/* Custom CSS generated on Tue Nov 03 2026 19:59:53 GMT+0000 (Coordinated Universal Time) */

@import url('https://fonts.googleapis.com/css?family=Libre+Franklin|Cormorant');

.sidx-container .sidx-main-app-body {
  background-color: rgba(247, 244, 238, 1);
  color: rgb(85, 88, 99);
  font-family: 'Libre Franklin', sans-serif;
}

.sidx-container a {
  color: rgba(74, 74, 74, 1);
}

.sidx-container .sidx-listing-details .sidx-columns .sidx-heading {
  color: rgb(85, 88, 99);
  font-family: 'Cormorant', serif;
}

.sidx-container .sidx-searchform .sidx-basic .sidx-field {
  background-color: rgba(219, 216, 206, 1);
  color: rgba(0, 0, 0, 1);
}

.sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button {
  background-color: rgba(255, 255, 255, 1);
  color: rgba(74, 74, 74, 1);
}

.sidx-container .sidx-search-results .sidx-search-result-grid-item:not(.sidx-search-result-grid-list-item) .sidx-actions {
  background-color: rgba(255, 255, 255, 1);
  border-color: rgba(255, 255, 255, 1) !important;
  color: rgba(0, 0, 0, 1);
}

/* ==========================================================================
   UPSTATE DOWN - Showcase IDX custom CSS  (v12)

   Paste into: Showcase IDX control panel > Settings > Design > Custom CSS
   (replace everything currently in that box).

   House rules for this file
   1. Paste ONLY CSS. Any stray label or word above a rule (e.g. a pasted
      heading) silently kills the rule right after it.
   2. No font-import lines. They are only valid at the very top of a
      stylesheet, and Showcase IDX writes its own generated rules above this
      box, so they never load. Fonts come from Kadence (Fraunces headings,
      Inter body) - already loaded on every page.
   3. Icons keep their native icon font. Never set font-family on i, svg,
      .sidx-icon or .sidx-fa.
   4. Specificity: the broad "everything is Inter" rule is wrapped in :where()
      so it has ZERO specificity and every rule below can override it.
      (Previously its :not() chain out-ranked almost every rule in the file.)
   5. Almost every declaration carries !important on purpose. The plugin sets
      its own !important rules (different ones for its small, medium and large
      layouts) and inline styles, so a plain declaration can win on a desktop
      and lose on a phone.
   ========================================================================== */

:root {
  --ud-ink:   #000000;
  --ud-paper: #ffffff;
  --ud-stone: #e4e5e0;
  --ud-cream: #f7f4ee;
  --ud-brown: #3d2418;
  --ud-sage:  #a6a999;
  --ud-sold:  rgba(176, 0, 0, 0.8);
  --ud-line:  #dbd8ce;
  --ud-muted: rgba(0, 0, 0, 0.62);
  --ud-hero-max: 1110px; /* widest the listing photo gets: lower is sharper, with more cream at the sides */
  --ud-hero-gap-max: 40px; /* most space between the menu and the top of the listing photo (it follows the cream space at the sides, so it is 0 on a phone); 0px removes it */
  --ud-body:  var(--global-body-font-family, Inter), Helvetica, Arial, sans-serif;
  --ud-head:  var(--global-heading-font-family, Fraunces), Georgia, serif;
}

/* ---------- 1. Base type ------------------------------------------------ */

:where(.sidx-container, .sidx-widget, .ReactModal__Content)
:where(*:not(i, svg, path, use, .sidx-icon, .sidx-fa, .fa, .fas, .far, .fal, .fab, [class*="sidx-fa"], [class*="fa-"])) {
  color: var(--ud-ink) !important;
  font-family: var(--ud-body) !important;
  font-weight: 200 !important;
}

/* ---------- 2. Headings (serif, display sizes only) ---------------------- */

:where(.sidx-container, .sidx-widget, .ReactModal__Content) :is(h1, h2, h3, h4, h5, h6, .sidx-heading, .sidx-heading *, .sidx-title),
.ReactModal__Content :is([class*="title"], [class*="heading"]):not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"]),
.sidx-listing-details .sidx-listing-heading h1,
.sidx-listing-details .sidx-address-1,
.sidx-listing-details .sidx-address-2 {
  font-family: var(--ud-head) !important;
  font-weight: 300 !important;
}

/* ---------- 3. Individual property pages ------------------------------- */

/* Hide the IDX top bar and the icon row; the site's own header is used */
.sidx-listing-details .sidx-top-level-nav,
.sidx-listing-details .sidx-primary-actions,
.sidx-listing-details .sidx-primary-jumbo,
.sidx-listing-details .sidx-primary-action,
.sidx-listing-details .sidx-primary-action-share {
  display: none !important;
}

/* The layout of the page itself (photo, title, price, stats, story, details)
   is in section 17 at the end of this file. */

/* ---------- 4. Buttons and CTAs ----------------------------------------- */

:where(.sidx-container, .sidx-widget, .ReactModal__Content) :is(
  button,
  .sidx-button,
  .sidx-primary,
  .sidx-primary-alt,
  .sidx-call-button,
  .sidx-pagination-button,
  .sidx-field,
  .sidx-dropdown-pill,
  .sidx-streamlined-toggle,
  .sidx-save-search-pill,
  .sidx-hotsheet-see-all-results,
  .sidx-listings-map-controls .sidx-control,
  .leaflet-bar a,
  .leaflet-control button,
  [role="button"]:not(.sidx-gallery-prev, .sidx-gallery-center, .sidx-gallery-next,
                      .sidx-gallery-listings-prev, .sidx-gallery-listings-next,
                      .sidx-prev, .sidx-next, [class*="sidx-fa"])
) {
  background: var(--ud-paper) !important;
  background-color: var(--ud-paper) !important;
  color: var(--ud-ink) !important;
  border: 1px solid var(--ud-ink) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

:where(.sidx-container, .sidx-widget, .ReactModal__Content) :is(
  button, .sidx-button, .sidx-primary, .sidx-primary-alt, .sidx-call-button,
  .sidx-save-search-pill, .sidx-hotsheet-see-all-results
):hover {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 2px !important;
}

/* text inside buttons follows the button */
:where(.sidx-container, .sidx-widget, .ReactModal__Content) :is(button, .sidx-button, .sidx-primary, .sidx-primary-alt)
:where(*:not(i, svg, path, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ---------- 5. Forms ---------------------------------------------------- */

:where(.sidx-container, .sidx-widget, .ReactModal__Content) :is(input, textarea, select) {
  letter-spacing: normal !important;
}

/* ---------- 6. Top menus ------------------------------------------------ */

.sidx-container .sidx-main-header a {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* ---------- 7. Metadata, stats, body text ------------------------------- */

.sidx-container :is(.sidx-sub-address, .sidx-primary-info, .sidx-info-blocks, .sidx-list-item, .sidx-disclaimer, .sidx-call),
.sidx-container :is(.sidx-sub-address, .sidx-primary-info, .sidx-info-blocks, .sidx-list-item, .sidx-call)
  :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Card stats: wrap whole items instead of breaking words ("BED / S") */
.sidx-container .sidx-info-blocks {
  flex-wrap: wrap !important;
  row-gap: 2px !important;
}
.sidx-container .sidx-info-block {
  flex: 0 0 auto !important;
}
.sidx-container .sidx-info-block :is(.sidx-info-value, .sidx-info-title) {
  white-space: nowrap !important;
  word-break: normal !important;
}

/* ---------- 8. Ribbons, flags, day counters ----------------------------- */

.sidx-container :is(.sidx-days-online, .sidx-ribbon, .sidx-new-listing, .sidx-price-drop, .sidx-open-house, .sidx-open-houses, .sidx-price-change),
.sidx-container .sidx-search-result-grid-item :is([class*="ribbon"], [class*="flag"]) {
  background: var(--ud-stone) !important;
  background-color: var(--ud-stone) !important;
  color: var(--ud-ink) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ---------- 9. Property cards ------------------------------------------- */

.sidx-container .sidx-search-result-grid-item .sidx-price,
.sidx-container .sidx-search-result-grid-item .sidx-price :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Photos fill their frame. The plugin caps every photo at 400x272 while the
   frame keeps growing with the card, which left a white strip to the right of
   and below the photo on the one-card carousel at roughly 450-650px widths.
   (The plugin does this on its own, with or without custom CSS.) */
.sidx-container .sidx-search-result-grid-item .sidx-gallery-image img {
  max-width: none !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.sidx-container .sidx-search-result-grid-item,
.sidx-container .sidx-search-result-grid-item .sidx-content,
.sidx-container .sidx-search-result-grid-item .sidx-details {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Hide the save / share / hide action bars on cards */
.sidx-container .sidx-search-result-grid-item > .sidx-actions,
.sidx-widget.sidx-hotsheet .sidx-actions,
.sidx-search-result-grid-item > div:has(i.sidx-save-action),
.sidx-search-result-grid-item > div:has(i.sidx-star-o):has(i.sidx-share-action),
.sidx-search-result-grid-item > div:has(i.sidx-smile-o):has(i.sidx-times),
.sidx-search-result-grid-item > div:has(i.sidx-comments-action):has(i.sidx-share-action),
.sidx-search-result-grid-item > div:has(.sidx-comments):has(i.sidx-share-action) {
  display: none !important;
}

/* ---------- 10. Gallery controls ---------------------------------------- */
/* The centre overlay (.sidx-gallery-center) is a click target on every photo.
   It must stay invisible. (It was getting a white fill + black border from the
   old [role="button"] rule: that was the white square on the photos.) */

.sidx-container :is(
  .sidx-gallery-prev, .sidx-gallery-center, .sidx-gallery-next,
  .sidx-gallery-listings-prev, .sidx-gallery-listings-next,
  .sidx-gallery-controls, .sidx-carousel .sidx-prev, .sidx-carousel .sidx-next
),
.ReactModal__Content :is(.sidx-gallery-prev, .sidx-gallery-next, .sidx-gallery-listings-prev, .sidx-gallery-listings-next) {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sidx-listing-details .sidx-carousel .sidx-view-nav {
  background: transparent !important;
  background-color: transparent !important;
}

.sidx-listing-details .sidx-carousel .sidx-prev-nav-container {
  background: rgba(255, 255, 255, 0.72) !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

.sidx-listing-details .sidx-carousel :is(.sidx-prev-nav-container, .sidx-photo-count, .sidx-gallery-position)::before,
.sidx-listing-details .sidx-carousel :is(.sidx-prev-nav-container, .sidx-photo-count, .sidx-gallery-position)::after {
  content: none !important;
  display: none !important;
}

.sidx-listing-details .sidx-carousel .sidx-prev-nav-container :is(.sidx-prev, .sidx-next, .sidx-photo-count) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sidx-listing-details .sidx-carousel .sidx-prev-nav-container .sidx-photo-count,
.sidx-listing-details .sidx-carousel .sidx-prev-nav-container .sidx-photo-count :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* ---------- 11. Popups -------------------------------------------------- */

body .ReactModal__Content {
  background: var(--ud-paper) !important;
  max-height: 80vh !important;
  height: auto !important;
  overflow-y: auto !important;
}

body .ReactModal__Content :is(input, textarea, select) {
  background: var(--ud-stone) !important;
  background-color: var(--ud-stone) !important;
  border-color: #d8d8d8 !important;
}

/* The popup's "Close" bar is dark, so its text must be light. The old
   black-text-everywhere rule made it black on near-black (1.2:1 contrast). */
.ReactModal__Content .sidx-modal-close {
  background-color: var(--ud-brown) !important;
}

.ReactModal__Content .sidx-modal-close,
.ReactModal__Content .sidx-modal-close * {
  color: var(--ud-paper) !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Tooltips (the "Listing courtesy of" pop-up and similar). The plugin draws
   them as a dark box with light text; the black-text rule in section 1 turned
   the text black on that dark box, so it could not be read. */
:where(.sidx-container, .sidx-widget) :is(.sidx-disclaimer-tooltip, .sidx-tooltip),
:where(.sidx-container, .sidx-widget) :is(.sidx-disclaimer-tooltip, .sidx-tooltip) :where(*) {
  color: var(--ud-paper) !important;
  font-size: 12px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* On a listing page the courtesy line is already shown in full, so the pop-up
   only repeats it: switched off there. */
.sidx-container:has(.sidx-listing-details) div:has(> span > .sidx-disclaimer-tooltip) {
  display: none !important;
}

/* ---------- 12. Hot sheet SOLD ribbons ----------------------------------
   Needs the class "sold-hotsheet" on the Kadence row that holds the sold hot sheet. */

.sold-hotsheet .sidx-widget.sidx-hotsheet .sidx-search-result-grid-item .sidx-ribbons {
  display: block !important;
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  overflow: hidden !important;
  background: var(--ud-sold) !important;
}

.sold-hotsheet .sidx-widget.sidx-hotsheet .sidx-search-result-grid-item .sidx-ribbons .sidx-ribbon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 23px !important;
  min-height: 23px !important;
  max-height: 23px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: var(--ud-sold) !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: center !important;
}

.sold-hotsheet .sidx-widget.sidx-hotsheet .sidx-search-result-grid-item .sidx-ribbons .sidx-ribbon::before {
  content: "SOLD" !important;
  display: block !important;
  color: var(--ud-paper) !important;
  font-family: var(--ud-body) !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.08em !important;
  line-height: 23px !important;
  text-transform: uppercase !important;
}

/* ---------- 13. List view (search results + hot sheets) ----------------- */

.sidx-search-result-grid-item.sidx-search-result-grid-list-item,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item > .sidx-content,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-search-result-grid-list-item__content,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-details {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-search-result-grid-list-item__content {
  position: static !important;
  display: flex !important;
  align-items: stretch !important;
  min-height: 0 !important;
  width: 100% !important;
}

.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-thumbnail {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  align-self: stretch !important;
  flex: 0 0 clamp(260px, 22%, 400px) !important;
  width: clamp(260px, 22%, 400px) !important;
  height: auto !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-details {
  margin-left: 0 !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-thumbnail :is(.sidx-gallery-display, .sidx-gallery-image) {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-thumbnail .sidx-gallery-image img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* No divider lines above/below list rows. Targets the real wrapper
   (.sidx-grid-list-view) instead of the old *:has(...) sweep, which made the
   browser re-check every element on every re-render. */
.sidx-grid-list-view,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item > .sidx-content,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-search-result-grid-list-item__content,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-details,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details {
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-image: none !important;
}

.sidx-search-result-grid-item.sidx-search-result-grid-list-item::before,
.sidx-search-result-grid-item.sidx-search-result-grid-list-item::after,
.sidx-search-result-grid-list-item__content::before,
.sidx-search-result-grid-list-item__content::after {
  content: none !important;
  display: none !important;
}

/* ---------- 14. Hot sheet carousel arrows ------------------------------- */
/* Keep the plugin's own positioning so centred shortcode galleries stay centred. */

.sidx-widget.sidx-hotsheet :is(.sidx-gallery-listings-prev, .sidx-gallery-listings-next) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- 15. Search bars --------------------------------------------- */

.sidx-container .sidx-searchform .sidx-basic { text-transform: uppercase !important; }

.sidx-container .sidx-searchform .sidx-suggestions-input {
  background: var(--ud-cream) !important;
  border: 1px solid var(--ud-brown) !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.sidx-container .sidx-searchform .sidx-suggestions-input input {
  background: var(--ud-cream) !important;
  color: var(--ud-brown) !important;
  -webkit-text-fill-color: var(--ud-brown) !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
}

.sidx-container .sidx-searchform .sidx-suggestions-input input::placeholder {
  color: var(--ud-brown) !important;
  -webkit-text-fill-color: var(--ud-brown) !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
}

.sidx-container .sidx-searchform .sidx-suggestions-input i {
  color: var(--ud-brown) !important;
  -webkit-text-fill-color: var(--ud-brown) !important;
}

/* Price / Beds / Baths / More */
.sidx-container .sidx-searchform :is(.sidx-range .sidx-field, .sidx-beds-and-baths .sidx-field, .sidx-streamlined-toggle) {
  background: var(--ud-brown) !important;
  background-color: var(--ud-brown) !important;
  border: 1px solid var(--ud-brown) !important;
  box-shadow: none !important;
  color: var(--ud-paper) !important;
  -webkit-text-fill-color: var(--ud-paper) !important;
  text-transform: uppercase !important;
}

.sidx-container .sidx-searchform :is(.sidx-range .sidx-field, .sidx-beds-and-baths .sidx-field, .sidx-streamlined-toggle) * {
  color: var(--ud-paper) !important;
  -webkit-text-fill-color: var(--ud-paper) !important;
  text-transform: uppercase !important;
}

/* Search button */
.sidx-container .sidx-searchform button.sidx-primary {
  background: var(--ud-sage) !important;
  background-color: var(--ud-sage) !important;
  border: 1px solid var(--ud-sage) !important;
  box-shadow: none !important;
  color: var(--ud-paper) !important;
  -webkit-text-fill-color: var(--ud-paper) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  text-transform: uppercase !important;
}

.sidx-container .sidx-searchform button.sidx-primary i.sidx-search {
  color: var(--ud-paper) !important;
  -webkit-text-fill-color: var(--ud-paper) !important;
  position: static !important;
  margin: 0 !important;
  transform: none !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* The property search page has no true submit button in its HTML. This
   visually replaces "Save Search" with a magnifier, but cannot change what
   the button does when clicked. */
.sidx-container .sidx-streamlined-form .sidx-save-search-pill {
  background: var(--ud-sage) !important;
  background-color: var(--ud-sage) !important;
  border: 1px solid var(--ud-sage) !important;
  box-shadow: none !important;
  min-width: 96px !important;
  position: relative !important;
}

.sidx-container .sidx-streamlined-form .sidx-save-search-pill .sidx-label,
.sidx-container .sidx-streamlined-form .sidx-save-search-pill .sidx-label * {
  display: none !important;
}

.sidx-container .sidx-streamlined-form .sidx-save-search-pill::before {
  content: "" !important;
  width: 13px !important;
  height: 13px !important;
  border: 3px solid var(--ud-paper) !important;
  border-radius: 50% !important;
  box-sizing: border-box !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-60%, -60%) !important;
}

.sidx-container .sidx-streamlined-form .sidx-save-search-pill::after {
  content: "" !important;
  width: 10px !important;
  height: 3px !important;
  background: var(--ud-paper) !important;
  border-radius: 2px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(2px, 5px) rotate(45deg) !important;
  transform-origin: left center !important;
}

/* Dropdowns and suggestions */
.sidx-container .sidx-searchform :is(
  .sidx-floating-menu, .sidx-field-dropdown, .sidx-suggestions, .sidx-suggestions-facets,
  .sidx-suggestions-matches, .sidx-suggestions ul, .sidx-suggestions li, .sidx-suggestions-keywords-button
) {
  background: var(--ud-cream) !important;
  background-color: var(--ud-cream) !important;
  color: var(--ud-brown) !important;
  -webkit-text-fill-color: var(--ud-brown) !important;
  opacity: 1 !important;
  text-transform: uppercase !important;
}

.sidx-container .sidx-searchform :is(.sidx-floating-menu, .sidx-field-dropdown, .sidx-suggestions) * {
  color: var(--ud-brown) !important;
  -webkit-text-fill-color: var(--ud-brown) !important;
}

/* Selected location pills */
.sidx-searchform :is(.sidx-location-pill, .sidx-search-pill:not(.sidx-save-search-pill), .sidx-selected-location, .sidx-token,
                     [class*="location"][class*="pill"], [class*="selected"][class*="location"]) {
  background: var(--ud-sage) !important;
  background-color: var(--ud-sage) !important;
  border-color: var(--ud-sage) !important;
}

.sidx-searchform :is(.sidx-location-pill, .sidx-search-pill:not(.sidx-save-search-pill), .sidx-selected-location, .sidx-token,
                     [class*="location"][class*="pill"], [class*="selected"][class*="location"]) * {
  color: var(--ud-paper) !important;
  -webkit-text-fill-color: var(--ud-paper) !important;
}

/* ---------- 16. Hot sheets on phones ------------------------------------- */

@media (max-width: 700px) {
  /* Cards stacked in one column (plain grids only, not the sliding carousel) */
  .sidx-widget.sidx-hotsheet .sidx-grid:not(.sidx-grid-no-gap) .sidx-search-result-grid-item {
    width: 100% !important;
    max-width: 400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Sliding carousel: the plugin leaves 5px to the left of each card and 15px
     to the right. Auto margins centre it; the slide distance is unchanged. */
  .sidx-widget.sidx-hotsheet .sidx-gallery-listings .sidx-search-result-grid-item {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ---------- 17. Listing page: editorial layout --------------------------
   One centred column under a full-width photo, in the style of the UD Selects
   feature pages. The plugin's two columns are dissolved into one grid
   (display: contents), so every block can be ordered and styled on its own
   in all three of the plugin's screen layouts.
   Block order: 1 photo, 2 title, 3 price, 4 stats, 6 story, 7 contact
   buttons, 8 courtesy line, 9 photo grid, 58 snapshot, 59 calculator,
   60 everything else in page order. Blocks that are switched off on purpose
   are listed in 17.12.
   Needs a browser from 2023 or newer for :has(); older ones fall back to the
   plugin's own look for the few rules that use it. */

/* 17.1 Page frame. The "property search" page title and the spacer above the
   search app: on a listing page the title is removed (the address is the
   title) so the photo starts right under the menu; on the search page it stays
   in the page for screen readers but is not shown. */
.kt-inside-inner-col:has(.sidx-listing-details) > h1.wp-block-kadence-advancedheading,
.kt-inside-inner-col:has(#sidx-main-container) > .wp-block-kadence-spacer {
  display: none !important;
}

.kt-inside-inner-col:has(#sidx-main-container):not(:has(.sidx-listing-details)) > h1.wp-block-kadence-advancedheading {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.kt-row-column-wrap:has(.sidx-listing-details) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.sidx-container:has(.sidx-listing-details) .sidx-main-app-body {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

body:has(.sidx-listing-details) {
  overflow-x: clip;
}

/* 17.1b The plugin empties its box for a moment about a second after a listing
   opens (it redraws the listing for the phone layout). The menu bar used to
   come back during that moment and the footer jumped up the page. The box now
   keeps its height, and the menu bar stays hidden for a moment after the
   listing goes away instead of coming back at once. (It is hidden by shrinking
   it, because a plain "display: none" cannot be held back for a moment.) */
#sidx-main-container {
  min-height: 100svh;
}

.sidx-container .sidx-main-header {
  transition: visibility 0s linear 0.8s;
}

.sidx-container:has(.sidx-listing-details) .sidx-main-header {
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
  transition-delay: 0s !important;
}

/* 17.2 The grid. The top padding is the space between the menu and the photo.
   It follows the cream space beside the photo (the screen width minus the photo
   width, halved), up to --ud-hero-gap-max, so the photo has room on every side
   on a laptop, and still runs edge to edge, flush under the menu, on a phone. */
.sidx-listing-details .sidx-columns {
  display: grid !important;
  grid-template-columns: minmax(0, 820px) !important;
  justify-content: center !important;
  align-items: start !important;
  row-gap: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  padding-top: clamp(0px, calc((100vw - var(--ud-hero-max, 1440px)) / 2), var(--ud-hero-gap-max, 40px)) !important;
}

.sidx-listing-details .sidx-left-column,
.sidx-listing-details .sidx-right-column {
  display: contents !important;
}

.sidx-listing-details .sidx-left-column > *,
.sidx-listing-details .sidx-right-column > * {
  grid-column: 1;
  order: 60 !important;
  min-width: 0;
  width: auto !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 17.3 Photo: edge to edge, capped at --ud-hero-max (top of this file).
   The MLS only supplies photos 1024px wide, so they go soft when stretched;
   a lower cap is sharper, a higher one is wider. (The plugin moves the
   photo into the left column on small and medium screens.) */
.sidx-listing-details :is(.sidx-left-column, .sidx-right-column) > .sidx-carousel {
  order: 1 !important;
  width: min(100vw, var(--ud-hero-max, 1440px)) !important;
  max-width: none !important;
  justify-self: center;
  margin-bottom: 0 !important;
}

.sidx-listing-details .sidx-carousel-viewport {
  width: 100% !important;
  height: clamp(320px, min(68vh, 66vw), 760px) !important;
  height: clamp(320px, min(68svh, 66vw), 760px) !important;
  left: 0 !important;
  margin: 0 !important;
}

.sidx-listing-details .sidx-carousel-single-image {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}

/* A listing with no photos gets the plugin's grey placeholder picture. Show it
   small and quiet instead of stretched across the whole page, with no counter. */
.sidx-listing-details .sidx-carousel-viewport:has(.sidx-carousel-single-image[style*="nophotos"]) {
  height: 300px !important;
  background: var(--ud-stone) !important;
}

.sidx-listing-details .sidx-carousel-single-image[style*="nophotos"] {
  background-size: contain !important;
  background-position: center !important;
}

.sidx-listing-details .sidx-carousel-viewport:has(.sidx-carousel-single-image[style*="nophotos"]) .sidx-prev-nav-container {
  display: none !important;
}

/* photo counter: a small pill at the bottom of the photo */
.sidx-listing-details .sidx-carousel .sidx-prev-nav-container {
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 22px !important;
  width: auto !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 8px !important;
  gap: 6px !important;
  transform: translateX(-50%);
  border-radius: 999px !important;
  background: rgba(247, 244, 238, 0.92) !important;
}

.sidx-listing-details .sidx-carousel .sidx-prev-nav-container :is(.sidx-prev, .sidx-next) {
  height: 34px !important;
  line-height: 34px !important;
}

.sidx-listing-details .sidx-carousel .sidx-prev-nav-container .sidx-photo-count {
  padding: 0 6px !important;
  line-height: 34px !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
}

/* Photos / Map / Nearby Listings tabs, in one centred row under the photo */
.sidx-listing-details .sidx-carousel .sidx-menu {
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 4px 24px !important;
  margin: 0 !important;
  padding: 18px 0 0 !important;
  background: transparent !important;
}

.sidx-listing-details .sidx-menu-item {
  width: auto !important;
  padding: 6px 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  box-shadow: none !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

.sidx-listing-details .sidx-menu-item.sidx-selected {
  background: transparent !important;
  border-bottom-color: var(--ud-ink) !important;
}

.sidx-listing-details .sidx-menu-item :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
}

/* 17.4 Title: status line, address, town. The first selector of each pair is
   the fallback for browsers without :has(). */
.sidx-listing-details .sidx-left-column > :is(.sidx-price-area + .sidx-reversing, .sidx-reversing:has(.sidx-listing-heading)) {
  order: 2 !important;
  display: block !important;
  padding-top: 64px !important;
}

.sidx-listing-details .sidx-listing-heading {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.sidx-listing-details .sidx-listing-heading h1 {
  margin: 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.sidx-listing-details .sidx-sub-address,
.sidx-listing-details .sidx-sub-address * {
  margin-left: 0 !important;
  margin-right: 0 !important;
  font-size: 11px !important;
  letter-spacing: 0.24em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

.sidx-listing-details .sidx-sub-address {
  margin-bottom: 22px !important;
}

.sidx-listing-details .sidx-address-1 {
  display: block !important;
  font-size: clamp(32px, 4.4vw, 54px) !important;
  font-weight: 200 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-transform: none !important;
  text-wrap: balance;
}

.sidx-listing-details .sidx-address-2 {
  display: block !important;
  margin-top: 14px !important;
  font-family: var(--ud-body) !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.2em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* no street address: the town line becomes the title */
.sidx-listing-details .sidx-address-1:empty ~ .sidx-address-2 {
  margin-top: 0 !important;
  font-family: var(--ud-head) !important;
  font-size: clamp(32px, 4.4vw, 54px) !important;
  font-weight: 200 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

/* 17.5 Price and days on site */
.sidx-listing-details .sidx-left-column > .sidx-price-area {
  order: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 26px 0 40px !important;
  padding: 0 !important;
}

.sidx-listing-details .sidx-price-area .sidx-price {
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  text-align: center !important;
}

.sidx-listing-details .sidx-price-area .sidx-price,
.sidx-listing-details .sidx-price-area .sidx-price :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-family: var(--ud-head) !important;
  font-size: clamp(24px, 2.8vw, 30px) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.06em !important;
}

.sidx-listing-details .sidx-price-area .sidx-days-online {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  color: var(--ud-muted) !important;
}

/* 17.6 Stats: small label over a large numeral. Land has none, so the band
   (rules above and below) only appears when there are stats. */
.sidx-listing-details .sidx-left-column > :is(.sidx-reversing + .sidx-reversing, .sidx-carousel + .sidx-reversing, .sidx-reversing:has(.sidx-primary-info)) {
  order: 4 !important;
  display: block !important;
}

.sidx-listing-details .sidx-primary-info:has(.sidx-primary-info-item) {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 56px !important;
  padding: 28px 0 !important;
  border-top: 1px solid var(--ud-line) !important;
  border-bottom: 1px solid var(--ud-line) !important;
}

.sidx-listing-details .sidx-primary-info-section {
  display: contents !important;
}

.sidx-listing-details .sidx-primary-info-item {
  flex: 1 1 0 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  min-width: 0;
  width: auto !important;
  margin: 0 !important;
  padding: 0 6px !important;
  font-family: var(--ud-head) !important;
  font-size: clamp(26px, 3.2vw, 36px) !important;
  font-weight: 200 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-transform: none !important;
}

.sidx-listing-details .sidx-primary-info-item br {
  display: none !important;
}

.sidx-listing-details .sidx-primary-info-item [class*="sidx-primary-info-item-title"] {
  margin: 0 0 10px !important;
  font-family: var(--ud-body) !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
}

/* four stats: beds, baths, sqft, built (hides full baths and price per sqft) */
.sidx-listing-details .sidx-primary-info-top .sidx-primary-info-item:nth-child(n+3),
.sidx-listing-details .sidx-primary-info-bottom .sidx-primary-info-item:nth-child(2) {
  display: none !important;
}

/* 17.7 County line: switched off */
.sidx-listing-details .sidx-left-column > .sidx-list-items {
  display: none !important;
}

/* 17.7b Open houses. When a listing has an upcoming open house, the plugin adds
   a block for it far down the page. It is moved up here, between the stats and
   the story, and drawn as a small centred box in the body font and capitals. */
.sidx-listing-details .sidx-left-column > .sidx-open-houses {
  order: 5 !important;
  justify-self: center;
  width: fit-content !important;
  min-width: min(100%, 340px);
  margin: 0 0 32px !important;
  padding: 22px 40px 20px !important;
  border: 1px solid var(--ud-ink) !important;
  background: transparent !important;
  color: var(--ud-ink) !important;
  text-align: center !important;
}

.sidx-listing-details .sidx-open-houses .sidx-title {
  margin: 0 0 14px !important;
  font-family: var(--ud-body) !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: 0.26em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

.sidx-listing-details .sidx-open-house-dates {
  display: grid !important;
  gap: 6px !important;
  justify-items: center !important;
}

.sidx-listing-details .sidx-open-house-date {
  display: block !important;
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 300 !important;
  letter-spacing: 0.14em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: var(--ud-ink) !important;
}

.sidx-listing-details .sidx-open-house-date::before {
  content: none !important;
}

.sidx-listing-details .sidx-open-houses small {
  display: block !important;
  margin: 0 0 10px !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

@media (max-width: 799.98px) {
  .sidx-listing-details .sidx-left-column > .sidx-open-houses {
    width: 100% !important;
    min-width: 0;
    justify-self: stretch;
    padding: 20px 20px 18px !important;
  }

  .sidx-listing-details .sidx-open-house-date {
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
  }
}

@media (max-width: 380px) {
  .sidx-listing-details .sidx-open-house-date {
    font-size: 11px !important;
    letter-spacing: 0.08em !important;
  }
}

/* 17.8 The story (the MLS description keeps its paragraph breaks) */
.sidx-listing-details .sidx-right-column > .sidx-listing-description {
  order: 6 !important;
  max-width: 760px !important;
  justify-self: center;
  margin: 16px 0 48px !important;
  white-space: pre-line !important;
  font-family: var(--ud-head) !important;
  font-size: clamp(17px, 1.5vw, 20px) !important;
  font-weight: 200 !important;
  line-height: 1.75 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  text-transform: none !important;
}

/* 17.9 Contact buttons and the listing-courtesy line */
.sidx-listing-details .sidx-left-column > .sidx-call-to-actions {
  order: 7 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px !important;
  width: 100% !important;
  margin: 0 0 22px !important;
  padding: 0 !important;
}

.sidx-listing-details .sidx-call-to-actions .sidx-listing-detail-modal-container {
  width: auto !important;
  margin: 0 !important;
}

.sidx-listing-details .sidx-call-to-actions > div:not(.sidx-listing-detail-modal-container) {
  flex: 0 0 100%;
  text-align: center;
}

.sidx-listing-details .sidx-call-to-actions button.sidx-primary {
  min-width: 220px;
}

.sidx-listing-details .sidx-call-to-actions .sidx-call {
  width: 100% !important;
  margin-top: 8px !important;
  text-align: center !important;
}

.sidx-listing-details .sidx-left-column > div:not([class]) {
  order: 8 !important;
  margin: 0 0 64px !important;
  text-align: center !important;
}

/* sold listings repeat the courtesy line; the full notice stays lower down */
.sidx-listing-details .sidx-left-column > div:not([class]) ~ div:not([class]) {
  display: none !important;
}

.sidx-listing-details .sidx-left-column > div:not([class]) .sidx-disclaimer {
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-align: center !important;
}

/* 17.10 Photo grid (the plugin's "quickview" photos, four at a time). The tiles
   are 3:2 like the MLS photos, so normal landscape photos are not cropped. */
.sidx-listing-details .sidx-left-column > .sidx-photo-array {
  order: 9 !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1120px, calc(100vw - 32px)) !important;
  max-width: none !important;
  justify-self: center;
  margin: 0 0 72px !important;
  padding: 0 !important;
}

.sidx-listing-details .sidx-left-column > .sidx-photo-array:not(:has(img)) {
  display: none !important;
}

.sidx-listing-details .sidx-photo-array img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  margin: 0 !important;
}

.sidx-listing-details .sidx-photo-array button {
  grid-column: 1 / -1;
  justify-self: center;
  width: auto !important;
  min-width: 260px;
  margin: 12px 0 0 !important;
}

/* 17.11 Facts and details */
.sidx-listing-details .sidx-heading {
  margin: 0 0 26px !important;
  font-size: 28px !important;
  font-weight: 200 !important;
  letter-spacing: 0.01em !important;
  text-align: center !important;
  text-transform: none !important;
}

.sidx-listing-details .sidx-heading :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-weight: 200 !important;
}

.sidx-listing-details .sidx-details-table,
.sidx-listing-details .sidx-ldp-section {
  margin: 0 0 64px !important;
}

.sidx-listing-details .sidx-details-table-item {
  display: flex !important;
  align-items: baseline !important;
  gap: 24px !important;
  padding: 12px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  border-bottom: 1px solid var(--ud-line) !important;
}

.sidx-listing-details .sidx-details-table-item .sidx-key {
  flex: 0 0 38% !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

.sidx-listing-details .sidx-details-table-item .sidx-val {
  flex: 1 1 auto;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}

/* General Features: a compact two-column list (one column on phones) */
.sidx-listing-details .sidx-listing-general-features .sidx-details-multi-value {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 40px;
}

.sidx-listing-details .sidx-listing-general-features .sidx-details-table-item {
  padding: 8px 0 !important;
}

.sidx-listing-details .sidx-listing-general-features .sidx-details-table-item .sidx-key {
  flex-basis: 36% !important;
}

.sidx-listing-details .sidx-listing-general-features .sidx-details-table {
  margin-bottom: 40px !important;
}

/* single values get no bullet; lists of values keep theirs */
.sidx-listing-details .sidx-details-multi-value .sidx-val span:only-child::before {
  content: none !important;
}

/* the snapshot comes first, then the calculator */
.sidx-listing-details .sidx-listing-snapshot {
  order: 58 !important;
}

.sidx-listing-details .mortgage-calculator {
  order: 59 !important;
  display: block !important;
  width: 100% !important;
  margin: 0 0 64px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid var(--ud-line) !important;
}

.sidx-listing-details .mortgage-calculator h2 {
  margin: 40px 0 28px !important;
  font-size: 28px !important;
  font-weight: 200 !important;
  text-align: center !important;
  text-transform: none !important;
}

.sidx-listing-details .mortgage-calculator form {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  padding: 0 40px 36px !important;
}

.sidx-listing-details .mortgage-calculator form > button {
  grid-column: 1 / -1;
  justify-self: center;
  min-width: 220px;
}

.sidx-listing-details .mortgage-calculator label {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

.sidx-listing-details .mortgage-calculator .monthly-payment {
  padding: 30px 40px !important;
  text-align: center !important;
  border-top: 1px solid var(--ud-line) !important;
}

.sidx-listing-details .mortgage-calculator .monthly-payment__title {
  font-size: 22px !important;
  font-weight: 200 !important;
  text-align: center !important;
  text-transform: none !important;
}

.sidx-listing-details .mortgage-calculator__disclaimer {
  padding: 16px 40px !important;
  border-top: 1px solid var(--ud-line) !important;
}

/* Friends & Family and Recent Activity: one slim line each, label on the left */
.sidx-listing-details .sidx-details-table__friends,
.sidx-listing-details .sidx-details-table__timeline {
  display: flex !important;
  align-items: center;
  gap: 24px;
  margin: 0 0 28px !important;
}

.sidx-listing-details :is(.sidx-details-table__friends, .sidx-details-table__timeline) .sidx-heading {
  flex: 0 0 170px;
  margin: 0 !important;
  font-family: var(--ud-body) !important;
  font-size: 11px !important;
  letter-spacing: 0.2em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

.sidx-listing-details .sidx-social-search-box {
  flex: 0 1 auto;
  min-width: 0;
  background: transparent !important;
  background-color: transparent !important;
  border: 1px solid var(--ud-line) !important;
}

.sidx-listing-details .sidx-details-table__timeline i,
.sidx-listing-details .sidx-social-search-box i {
  color: var(--ud-ink) !important;
}

.sidx-listing-details .sidx-timeline {
  flex: 1 1 auto;
  margin: 0 !important;
}

.sidx-listing-details .sidx-timeline td {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-size: 12px !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

.sidx-listing-details .sidx-timeline td:nth-child(2) {
  display: none !important;
}

.sidx-listing-details .sidx-timeline td:first-child {
  border-left-color: var(--ud-sage) !important;
}

.sidx-listing-details .sidx-timeline td:first-child::before {
  background-color: var(--ud-sage) !important;
}

/* Schools */
.sidx-listing-details .sidx-school {
  border-bottom: 1px solid var(--ud-line) !important;
}

.sidx-listing-details .sidx-school-name {
  font-family: var(--ud-head) !important;
  font-size: 18px !important;
  font-weight: 200 !important;
}

.sidx-listing-details .sidx-school strong {
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

/* Neighbourhood charts: brand colours instead of the plugin's rainbow */
.sidx-listing-details .sidx-chart-datum,
.sidx-listing-details .sidx-legend-dot {
  background-color: var(--ud-brown) !important;
}

.sidx-listing-details .sidx-chart-datum:nth-child(4n+2),
.sidx-listing-details .sidx-legend-item:nth-child(4n+2) .sidx-legend-dot {
  background-color: var(--ud-sage) !important;
}

.sidx-listing-details .sidx-chart-datum:nth-child(4n+3),
.sidx-listing-details .sidx-legend-item:nth-child(4n+3) .sidx-legend-dot {
  background-color: #a8926f !important;
}

.sidx-listing-details .sidx-chart-datum:nth-child(4n+4),
.sidx-listing-details .sidx-legend-item:nth-child(4n+4) .sidx-legend-dot {
  background-color: #7e7a67 !important;
}

.sidx-listing-details .sidx-chart-datum,
.sidx-listing-details .sidx-chart-datum * {
  color: var(--ud-paper) !important;
  font-size: 10px !important;
}

/* Calculator fine print, MLS notices, "powered by" line. These stay visible
   and readable on purpose. */
.sidx-listing-details .mortgage-calculator__disclaimer,
.sidx-listing-details .mortgage-calculator__disclaimer *,
.sidx-listing-details .sidx-listing-disclaimer,
.sidx-listing-details .sidx-listing-disclaimer-center,
.sidx-listing-details .sidx-powered-by {
  font-size: 11px !important;
  line-height: 1.8 !important;
  letter-spacing: 0.08em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

.sidx-listing-details .sidx-disclaimer img {
  display: block !important;
  margin: 0 auto 10px !important;
}

/* 17.12 Switched off on purpose. To bring one back, delete its rule. */

/* the "Powered by Showcase IDX" line */
.sidx-listing-details .sidx-powered-by {
  display: none !important;
}

/* Interior, Exterior and Community Features (General Features stays) */
.sidx-listing-details .sidx-listing-general-features ~ .sidx-listing-general-features {
  display: none !important;
}

/* Neighborhood & Commute: the Walk Score tile with its map link, and its source line */
.sidx-listing-details .sidx-details-table:has(.sidx-walkscore-iframe-holder) {
  display: none !important;
}

.sidx-listing-details .sidx-details-table:has(.sidx-walkscore-iframe-holder) + .sidx-listing-disclaimer-center {
  display: none !important;
}

/* Employment & Commute Insight (the Population and Household insights stay) */
.sidx-listing-details .sidx-household-insight:has(.sidx-metric-sentence) {
  display: none !important;
}

/* Optional: to hide Friends & Family and Recent Activity completely, remove
   the comment marks around this rule.
.sidx-listing-details .sidx-details-table__friends,
.sidx-listing-details .sidx-details-table__timeline {
  display: none !important;
}
*/

/* 17.13 Phones and small tablets (the plugin's small and medium layouts) */
@media (max-width: 800px) {
  .sidx-listing-details .sidx-carousel-viewport {
    height: clamp(260px, min(52vh, 110vw), 520px) !important;
    height: clamp(260px, min(52svh, 110vw), 520px) !important;
  }

  .sidx-listing-details .sidx-carousel .sidx-prev-nav-container {
    height: 40px !important;
  }

  .sidx-listing-details .sidx-carousel .sidx-prev-nav-container :is(.sidx-prev, .sidx-next) {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 14px !important;
  }

  .sidx-listing-details .sidx-carousel .sidx-prev-nav-container .sidx-photo-count {
    line-height: 40px !important;
  }

  .sidx-listing-details .sidx-left-column > :is(.sidx-price-area + .sidx-reversing, .sidx-reversing:has(.sidx-listing-heading)) {
    padding-top: 40px !important;
  }

  .sidx-listing-details .sidx-sub-address,
  .sidx-listing-details .sidx-sub-address * {
    letter-spacing: 0.16em !important;
    line-height: 1.7 !important;
  }

  .sidx-listing-details .sidx-address-1,
  .sidx-listing-details .sidx-address-1:empty ~ .sidx-address-2 {
    font-size: clamp(28px, 7.6vw, 40px) !important;
  }

  .sidx-listing-details .sidx-primary-info:has(.sidx-primary-info-item) {
    padding: 22px 0 !important;
  }

  .sidx-listing-details .sidx-primary-info-item {
    font-size: 26px !important;
    padding: 0 2px !important;
  }

  .sidx-listing-details .sidx-primary-info-item [class*="sidx-primary-info-item-title"] {
    font-size: 10px !important;
    letter-spacing: 0.14em !important;
  }

  .sidx-listing-details .sidx-left-column > .sidx-photo-array {
    width: 100% !important;
  }

  .sidx-listing-details .sidx-details-table-item {
    gap: 16px !important;
  }

  .sidx-listing-details .sidx-details-table-item .sidx-key {
    flex-basis: 42% !important;
  }

  /* No mortgage calculator on phones or small tablets (800px and under). To
     keep it on tablets, move this rule into its own media block that stops
     at 700px. */
  .sidx-listing-details .mortgage-calculator {
    display: none !important;
  }
}

/* Below 800px the plugin strips the page's side padding, so add the gutter back */
@media (max-width: 799.98px) {
  .sidx-listing-details .sidx-columns {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Phones: the contact buttons run the full width, like the plugin's Call Now button */
@media (max-width: 520px) {
  .sidx-listing-details .sidx-call-to-actions .sidx-listing-detail-modal-container {
    flex: 0 0 100%;
  }

  .sidx-listing-details .sidx-call-to-actions button.sidx-primary {
    width: 100%;
  }

  /* General Features stay two columns on phones, label over value */
  .sidx-listing-details .sidx-listing-general-features .sidx-details-multi-value {
    column-gap: 20px;
  }

  .sidx-listing-details .sidx-listing-general-features .sidx-details-table-item {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
  }

  .sidx-listing-details .sidx-listing-general-features .sidx-details-table-item :is(.sidx-key, .sidx-val) {
    flex: 0 0 auto !important;
    width: auto !important;
  }

  .sidx-listing-details .sidx-timeline td:first-child {
    white-space: nowrap;
  }

  .sidx-listing-details .sidx-details-table__friends,
  .sidx-listing-details .sidx-details-table__timeline {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .sidx-listing-details :is(.sidx-details-table__friends, .sidx-details-table__timeline) .sidx-heading {
    flex-basis: auto;
  }
}

/* ---------- 18. Property cards: boutique layout ---------------------------
   Every property card (hot sheets, the search results in grid and list view,
   and the little card on the map) gets the same order: the address in the
   header font, the listing type and status in small capitals, beds / baths /
   square feet, then the price in bold with the MLS logo. The MLS logo stays on
   every card. The map's hover card has no address to show: the plugin does not
   put one in it. */

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item {
  border-color: var(--ud-line) !important;
}

/* The text area fills the card, so the price line sits at the bottom of every
   card in a row. (Grid and carousel cards; a list-view card stays as it is.) */
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item:not(.sidx-search-result-grid-list-item) :is(.sidx-content, .sidx-content > a, .sidx-details, .sidx-primary-details) {
  display: flex !important;
  flex-direction: column !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item:not(.sidx-search-result-grid-list-item) :is(.sidx-content, .sidx-content > a, .sidx-details, .sidx-primary-details) {
  flex: 1 1 auto !important;
}

/* Cards are only as tall as their own text, so one longer line would make a
   card taller than its neighbours. This makes every card as tall as the
   tallest one in its row (or in its carousel). */
:is(.sidx-widget, .sidx-container) .sidx-require-auth > div:has(> .sidx-search-result-grid-item) {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
}

:is(.sidx-widget, .sidx-container) .sidx-require-auth > div > .sidx-search-result-grid-item {
  flex: 1 1 auto !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details {
  padding: 20px 18px 22px !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details > * {
  order: 5 !important;
}

/* 1. Address, in the header font: street, then town. (A listing with no
   street keeps a blank first line, so the rows below still line up across
   cards. The subdivision line is switched off.) */
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-listing-heading {
  order: 1 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 0 16px !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  font-family: var(--ud-head) !important;
  font-size: 18px !important;
  font-weight: 300 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.005em !important;
  text-transform: none !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-listing-heading em {
  display: none !important;
}

/* 2. Listing type and status, small and in capitals */
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-mls-details {
  order: 2 !important;
  margin: 0 0 14px !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-mls-details,
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-mls-details * {
  font-size: 9.6px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

/* 3. Beds, baths, square feet (acres and county for land) */
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-info-blocks {
  order: 3 !important;
  margin: 0 0 18px !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-info-block {
  margin: 0 !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-info-blocks,
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-info-blocks * {
  font-size: 10.5px !important;
  letter-spacing: 0.06em !important;
  color: var(--ud-ink) !important;
}

/* 4. Price in bold, with the MLS logo, on its own line at the bottom */
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-primary-info {
  order: 4 !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin: auto 0 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ud-line) !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-price,
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item .sidx-details .sidx-primary-details .sidx-price :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* On a phone the plugin stacks the cards edge to edge. A small gap keeps each
   bordered card clear of the next one. */
.sidx-small-screen .sidx-search-results .sidx-grid:not(.sidx-grid-list-view) > .sidx-require-auth + .sidx-require-auth {
  margin-top: 12px !important;
}

/* List view: the plugin puts the stats in the same row as the price, so that
   row is opened up and its pieces are placed on a small grid in the same order.
   The description excerpt follows the price. */
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-content: start !important;
  padding: 20px 24px !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-primary-info {
  display: contents !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-listing-heading {
  grid-area: 1 / 1 / 2 / 3 !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-mls-details {
  grid-area: 2 / 1 / 3 / 3 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0 4px !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-info-blocks {
  grid-area: 3 / 1 / 4 / 3 !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-price,
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-listing-logo {
  margin: 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid var(--ud-line) !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-price {
  grid-area: 4 / 1 / 5 / 2 !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-listing-logo {
  grid-area: 4 / 2 / 5 / 3 !important;
  align-items: center !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-description {
  grid-area: 5 / 1 / 6 / 3 !important;
  margin-top: 14px !important;
}

:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-description,
:is(.sidx-widget, .sidx-container) .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-primary-details .sidx-description * {
  font-size: 13px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.01em !important;
  color: var(--ud-muted) !important;
}

/* The price markers on the maps: the font here is a little wider than the
   plugin expected, so a five-character price like "$389K" dropped its K onto a
   second line. */
.sidx-container .leaflet-marker-icon.sidx-map-listing {
  white-space: nowrap !important;
}

/* The little card on the map (hover a price marker). Same order, minus the
   address: type and status, stats, then the price. It is a little wider than
   the plugin's own so the longest type line ("Single Family Residence For
   Sale") fits without being cut off. */
.sidx-map-popup .sidx-map-popup__thumbnail {
  width: 100% !important;
  height: 96px !important;
  object-fit: cover !important;
}

.sidx-map-popup .sidx-map-popup__content {
  display: flex !important;
  flex-direction: column !important;
  width: 244px !important;
  padding: 10px 14px 12px !important;
  white-space: normal !important;
}

.sidx-map-popup .sidx-mls-details {
  order: 1 !important;
  display: block !important;
  margin: 0 0 8px !important;
}

.sidx-map-popup .sidx-sale-type,
.sidx-map-popup .sidx-mls-info {
  display: block !important;
  width: auto !important;
  height: auto !important;
  white-space: normal !important;
  font-size: 9px !important;
  line-height: 1.7 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: var(--ud-muted) !important;
}

.sidx-map-popup .sidx-primary-info {
  margin: 8px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

.sidx-map-popup .sidx-info-blocks {
  flex-wrap: wrap !important;
  gap: 0 10px !important;
}

.sidx-map-popup .sidx-info-blocks .sidx-info-block {
  padding: 2px 0 !important;
  border: 0 !important;
  text-align: left !important;
}

.sidx-map-popup .sidx-info-blocks,
.sidx-map-popup .sidx-info-blocks * {
  font-size: 10px !important;
  letter-spacing: 0.03em !important;
  color: var(--ud-ink) !important;
}

.sidx-map-popup .sidx-map-popup__row {
  order: 2 !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding-top: 8px !important;
  border-top: 1px solid var(--ud-line) !important;
}

.sidx-map-popup .sidx-map-popup__row .sidx-price,
.sidx-map-popup .sidx-map-popup__row .sidx-price :where(*:not(i, .sidx-icon, .sidx-fa, [class*="sidx-fa"])) {
  font-size: 17px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* The "See all results" button under a hot sheet. The plugin sets its width
   from the length of the plain words, so with capitals and wider letter
   spacing the label wrapped onto two lines on a phone. */
.sidx-widget .sidx-hotsheet-see-all-results {
  width: auto !important;
  white-space: nowrap !important;
}

/* On a phone the plugin makes the form around that button 140px wide, and the
   label is now wider than that, so the button hung off to the right of centre.
   Let the form fill the row so the button sits in the middle. */
.sidx-widget form:has(> .sidx-hotsheet-see-all-results) {
  width: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---------- Agent pages: no empty listing sections ----------------------- */

/* On an agent page each hot sheet sits in its own row with a heading
   ("Active listings", "Sold listings"). When an agent has nothing in one of
   them the plugin prints "No Results Found." under the heading. This hides the
   whole row (heading and spacing too) until there is at least one listing, and
   it comes back by itself when one appears. It only applies to the pages under
   About (the agent pages), so a hot sheet or search anywhere else keeps its
   own message. */
body.parent-pageid-1424 .kb-row-layout-wrap:has(.sidx-widget.sidx-hotsheet .sidx-no-results) {
  display: none !important;
}