/* =========================================================================
   SmithCSS: our styling for the third-party IDX widget's own markup.

   Loaded ONLY where that widget still renders (its city pages, the /homes/
   search, its listing pages). On every self-hosted page the link is removed
   from the finished HTML by realhomes_child_smithcss_strip() (inc/smithcss.php),
   because owner rule 2026-09-26 forbids any trace of the vendor on pages we
   render ourselves. Rules here were moved verbatim, in their original order,
   from child-custom.css (first) and rt-header.css (second) on 2026-09-26.

   Never put a rule for our own markup in this file: it would vanish from
   every self-hosted page.
   ========================================================================= */

/* Hide sidx-details-table__friends */
.sidx-details-table__friends{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* Hide sidx-details-table__timeline (Recent Activity section on listing pages) */
.sidx-details-table__timeline{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}
/* =========================================================================
   Embedded IDX listings grid — mobile side padding.
   On pages that embed the IDX widget search/hotsheet (city pages like
   /laguna-beach/, plus the /homes/ search), the listings grid goes full-bleed
   on mobile — the grid wrapper is 100vw with 0 padding, so cards touch the
   screen edges. Pad the results wrapper so they don't.
   Target .sidx-search-results directly (NOT .sidx-container:has(...)): the grid
   is injected after render and Chromium's :has() invalidation doesn't reliably
   restyle the container for late-added descendants. .sidx-search-results only
   exists in search/grid contexts, so this never touches /homes/listing detail
   pages (padded separately). body+container prefixes raise specificity to beat
   the IDX's own later-loading rules.
   ========================================================================= */
@media (max-width: 768px){body .sidx-container .sidx-search-results{
        padding-left: 16px !important;
        padding-right: 16px !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   Brand-color the IDX widget listing badges (blue/pink -> navy/gold)
   so listings read consistently with the navy/gold scheme.
   ============================================================ */
/* The widget account's generated custom.css forces these ribbons blue (bright blue)
   with a 5-class selector + !important, e.g.
   `.sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-new-listing`.
   To win the cascade we replicate that exact chain and add a leading `body`
   (specificity 0,5,1 > their 0,5,0). New listings + price drops -> navy;
   open houses stay gold. Fallback short selectors cover non-search contexts. */
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-new-listing,
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-price-drop,
.sidx-ribbon.sidx-new-listing,
.sidx-ribbon.sidx-price-drop{ background:var(--rt-navy) !important; color:#fff !important; }
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-open-houses,
.sidx-ribbon.sidx-open-houses{ background:var(--rt-gold) !important; color:#fff !important; }
.sidx-actions{ background:var(--rt-navy) !important; }
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-price-reduced,
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-back-on-market,
.sidx-ribbon.sidx-price-reduced,
.sidx-ribbon.sidx-back-on-market{ background:var(--rt-gold-soft) !important; color:var(--rt-navy) !important; }
/* Separate the widget hotsheet LIST-view listings into distinct cards so the page band
   shows between them (matches the mobile presentation). The result containers are
   transparent + each card is white with margin-bottom:0, so the rows visually fuse
   into one white block; we just add a gap, a hairline border, rounding, and a light
   shadow. Scoped to `.sidx-search-results .…-grid-list-item` (LIST view only) so the
   /homes/ grid search is untouched; `body` + the parent chain + !important beat the widget's
   cross-origin CDN base CSS (incl. the 5px row divider). No @media / :hover -> RUCSS-safe. */
body .sidx-search-results .sidx-search-result-grid-list-item{
  margin-bottom:16px !important;
  border:1px solid #e7dfd1 !important;
  border-radius:10px !important;
  overflow:hidden !important;
  box-shadow:0 2px 6px rgba(14,44,74,.07) !important;
}
/* Brand the IDX form inside the modal */
.rt-modal__form .sidx-simple-form{ display:flex; flex-direction:column; gap:12px; }
.rt-modal__form .sidx-button{
  font-family:var(--rt-f-sans); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  background:var(--rt-navy) !important; color:var(--rt-cream) !important; border:0 !important; border-radius:3px !important;
  padding:14px 26px !important; cursor:pointer; width:100%; transition:background .2s ease;
}
/* Brand the widget submit button precisely (its class is .sidx-primary, blue by default). */
.rt-modal__form .sidx-simple-form button.sidx-primary,
.rt-modal__form .sidx-simple-form input.sidx-primary,
.rt-modal__form button.sidx-primary,
.rt-modal__form .sidx-primary{
  background-color:var(--rt-navy) !important; background-image:none !important;
  color:var(--rt-cream) !important; border:0 !important;
}
.rt-modal__form button.sidx-primary:hover,
.rt-modal__form .sidx-primary:hover{ background-color:#143a5c !important; }
/* ---- IDX HOTSHEET editorial restyle (Option B), CSS-only. Scoped to
   `.sidx-hotsheet` so it applies to EVERY hotsheet (homepage #rt-home-feed +
   all city/community pages' [the IDX widget_hotsheet]) but NOT the /homes/ full
   search app (a different IDX widget, no .sidx-hotsheet ancestor). Restyles
   the widget's server-rendered grid cards; the shortcodes/data/FOUC-guard are NOT
   touched. (Homepage section width stays in .rt-home-listings max-width:1480;
   city pages keep their own content width.) Grid-VIEW cards only — list-view
   hotsheets (.sidx-search-result-grid-list-item) keep their own styling.
   Spec: docs/superpowers/specs/2026-06-19-homepage-hotsheet-restyle-design.md */
/* Force the widget's .sidx-grid (it sets fixed-px tracks via JS, inline) to fill its
   container as an even 4-up; gap drives the spacing so the tracks MUST flex (1fr).
   !important beats the widget's inline grid-template-columns at any specificity. */
.sidx-hotsheet .sidx-grid{ grid-template-columns:repeat(4,1fr) !important; gap:24px !important; }
/* Card chrome. SPECIFICITY NOTE: the widget's default card `border` (5px white) lives in
   a cascade context author CSS cannot out-specify (an 8-level !important selector
   could NOT change its border-COLOR), but border-WIDTH and box-shadow ARE beatable.
   So we REMOVE the border (border:0) and draw the hairline as a box-shadow RING.
   Selectors carry `body .sidx-container .sidx-hotsheet [.sidx-grid]` so they win
   order-independently over the widget + the global Hanken `*`-override (0,2,1). */
body .sidx-container .sidx-hotsheet .sidx-grid .sidx-search-result-grid-item{
  background:#fff !important; border:0 !important; border-radius:6px !important; overflow:hidden !important;
  box-shadow:0 0 0 1px #e2dccd, 0 10px 30px rgba(8,24,40,.07) !important;
  transition:transform .4s ease, box-shadow .4s ease !important;
  /* The widget caps grid-view cards at max-width:400px (list view gets none), which
     left the 1-up mobile card floating narrow in its track and would center-gap
     2-up tablet tracks wider than 400px. Our forced grid owns the sizing. */
  max-width:none !important; width:100% !important;
}
/* NOTE: the .sidx-require-auth grid cell stays display:flex on purpose - it is
   what stretches cards to equal heights per row; width:100% on the card (a flex
   child) is enough to fill the track without touching the cell. */
body .sidx-container .sidx-hotsheet .sidx-grid .sidx-search-result-grid-item:hover{ transform:translateY(-5px); box-shadow:0 0 0 1px var(--rt-navy), 0 20px 46px rgba(8,24,40,.16) !important; }
/* ---- Equal-height cards with aligned rows (owner 2026-07-18: match the
   city-page look at EVERY width, not by luck). Card height was content-driven,
   so a type line that wraps on one card but not another ("SINGLE FAMILY
   RESIDENCE FOR SALE" vs "CONDOMINIUM FOR SALE") made ragged bottoms and
   misaligned stat/address rows. Fix: flex the whole cell→card→details chain so
   every card fills its grid row (the widget nests an UNCLASSED <div> and <a> between
   the cell and .sidx-details — they must join the chain or nothing stretches),
   pin each text row to its natural size (the widget gives them flex-grow, which
   otherwise inflates the price row on short cards), and let margin-top:auto on
   .sidx-info-blocks swallow the variable space just above the stats divider,
   where it is invisible. Price, stats, and address rows then align across the
   row. Mirrored in the .sidx-main-app-body block below — keep in sync. */
body .sidx-container .sidx-hotsheet .sidx-grid > * > div:first-child{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
body .sidx-container .sidx-hotsheet .sidx-grid .sidx-search-result-grid-item{ flex:1 1 auto !important; }
body .sidx-container .sidx-hotsheet .sidx-grid .sidx-search-result-grid-item .sidx-content{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
body .sidx-container .sidx-hotsheet .sidx-content > a{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
body .sidx-container .sidx-hotsheet .sidx-primary-details{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
body .sidx-container .sidx-hotsheet .sidx-primary-details > *{ flex:0 0 auto !important; }
/* Photo locked to 3:2 with a hover zoom on the gallery image. */
body .sidx-container .sidx-hotsheet .sidx-thumbnail{ aspect-ratio:3/2; overflow:hidden; flex:0 0 auto; }
body .sidx-container .sidx-hotsheet .sidx-gallery-display, body .sidx-container .sidx-hotsheet .sidx-gallery-image{ height:100% !important; }
body .sidx-container .sidx-hotsheet .sidx-gallery-image img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .7s ease; }
body .sidx-container .sidx-hotsheet .sidx-grid .sidx-search-result-grid-item:hover .sidx-gallery-image img{ transform:scale(1.06); }
/* Text block padding (+ joins the equal-height flex chain above). */
body .sidx-container .sidx-hotsheet .sidx-details{ padding:18px 20px 20px !important; display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
/* Serif navy price (beats the global Hanken *-override (0,2,1) by specificity). */
body .sidx-container .sidx-hotsheet .sidx-price{ font-family:var(--rt-f-serif) !important; color:var(--rt-navy) !important; font-size:23px !important; font-weight:400 !important; line-height:1.1 !important; }
/* MLS compliance logo: pin the BOX so an unloaded image cannot inflate the price row.
   WP Rocket lazyloads this logo and its placeholder is an inline SVG with
   viewBox='0 0 0 0'. A zero viewBox carries NO intrinsic ratio, so `height:auto`
   cannot resolve and the browser falls back to the placeholder's natural 150px:
   the logo box renders 50x150 instead of 50x25 until the swap, inflating
   .sidx-primary-info from 25px to 150px on every not-yet-swapped card. Combined
   with the widget's grid-auto-rows:1fr that propagated to EVERY row on the page, and
   .sidx-info-blocks' margin-top:auto then dumped the whole surplus into one hole
   above the stats divider (owner-reported on /aliso-viejo-open-houses/ 2026-08-12,
   measured: cards 452->576px, gap 0->124px on all 29 cards).
   Constrain the box and the load state stops mattering. Mirrored below. */
body .sidx-container .sidx-hotsheet .sidx-listing-logo img{ max-height:25px !important; max-width:50px !important; width:auto !important; }
/* Property type + status line, small and muted. */
/* padding-bottom keeps the old 14px minimum gap to the stats divider now that
   the divider's margin-top is auto (flexible) instead of a fixed 14px. */
body .sidx-container .sidx-hotsheet .sidx-mls-details{ margin-top:6px; font-size:11.5px; letter-spacing:.04em; color:#5a626e; padding-bottom:14px; }
/* a11y contrast: the widget defaults the type/status to red #ea3d3d (4.0:1, fails AA) and
   the subdivision to light gray #99a9af (2.4:1). Recolor within our hotsheet cards:
   status -> navy (on-brand + passes), subdivision -> #5a626e (5.6:1). */
body .sidx-container .sidx-hotsheet .sidx-sale-type, body .sidx-container .sidx-hotsheet .sidx-mls-info{ color:var(--rt-navy) !important; }
body .sidx-container .sidx-hotsheet .sidx-listing-heading small{ color:#5a626e !important; }
/* Beds / baths / sqft row under a hairline divider; values navy, labels teal caps.
   margin-top:auto bottom-anchors the stats+address group (equal-height chain). */
body .sidx-container .sidx-hotsheet .sidx-info-blocks{ margin-top:auto !important; padding-top:13px; border-top:1px solid #e2dccd; }
/* value + label share a baseline (the widget top-aligns them) so "5 BEDS" lines up. */
body .sidx-container .sidx-hotsheet .sidx-info-block{ align-items:baseline !important; gap:5px; }
body .sidx-container .sidx-hotsheet .sidx-info-value{ color:var(--rt-navy) !important; font-weight:500 !important; font-size:15px !important; line-height:1 !important; }
body .sidx-container .sidx-hotsheet .sidx-info-title{ font-size:10px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--rt-gold) !important; line-height:1 !important; }
/* Hide the social action row + the photo reaction overlay (owner: clean look). */
body .sidx-container .sidx-hotsheet .sidx-actions, body .sidx-container .sidx-hotsheet .sidx-reaction-action{ display:none !important; }
/* iPad landscape / small desktop (1025–1319px): the forced 4-up above overflowed —
   the widget card innards have a ~290px min-content, so the 1fr tracks bottom out at
   4x290 + 3x24 gaps = 1232px, wider than the ~1130px container on iPads (the 4th
   card was clipped at the right edge). min-width:0 on the DIRECT grid children
   (the .sidx-require-auth cells, which drive track min sizing) lets the tracks
   shrink below min-content; tighter gap buys back some card width. >=1320 fits
   at full size and is untouched. */
@media (min-width:1025px) and (max-width:1319.98px){.sidx-hotsheet .sidx-grid{ gap:18px !important; }
body .sidx-container .sidx-hotsheet .sidx-grid > *{ min-width:0 !important; }
}
@media (max-width:1024px){.sidx-hotsheet .sidx-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px){.sidx-hotsheet .sidx-grid{ grid-template-columns:1fr !important; }
}
/* ---- Same editorial card restyle applied to the /homes/ full SEARCH app (and
   the featured-listings app). The search uses the SAME card markup as a hotsheet
   (.sidx-grid > .sidx-search-result-grid-item) but is wrapped in .sidx-main-app-body
   instead of .sidx-hotsheet (the two are mutually exclusive, so this NEVER touches
   hotsheets). Owner 2026-06-21: make /homes/ match the hotsheets, per-card actions
   hidden too (full match). DELIBERATELY does NOT set grid-template-columns/gap so the
   search keeps its own column-view toggle (3-up etc.), filters, sort, and map. This is
   a MIRROR of the .sidx-hotsheet card rules above — keep the two blocks in sync. */
body .sidx-container .sidx-main-app-body .sidx-grid .sidx-search-result-grid-item{
  background:#fff !important; border:0 !important; border-radius:6px !important; overflow:hidden !important;
  box-shadow:0 0 0 1px #e2dccd, 0 10px 30px rgba(8,24,40,.07) !important;
  transition:transform .4s ease, box-shadow .4s ease !important;
}
/* Mirror of the hotsheet card uncap (the widget max-width:400px) - keep in sync. */
body .sidx-container .sidx-main-app-body .sidx-grid .sidx-search-result-grid-item{ max-width:none !important; width:100% !important; }
body .sidx-container .sidx-main-app-body .sidx-grid .sidx-search-result-grid-item:hover{ transform:translateY(-5px); box-shadow:0 0 0 1px var(--rt-navy), 0 20px 46px rgba(8,24,40,.16) !important; }
/* Mirror of the hotsheet equal-height/aligned-rows chain - keep in sync. */
body .sidx-container .sidx-main-app-body .sidx-grid > * > div:first-child{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
body .sidx-container .sidx-main-app-body .sidx-grid .sidx-search-result-grid-item{ flex:1 1 auto !important; }
body .sidx-container .sidx-main-app-body .sidx-grid .sidx-search-result-grid-item .sidx-content{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
body .sidx-container .sidx-main-app-body .sidx-content > a{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
body .sidx-container .sidx-main-app-body .sidx-primary-details{ display:flex !important; flex-direction:column !important; flex:1 1 auto !important; min-height:0; }
body .sidx-container .sidx-main-app-body .sidx-primary-details > *{ flex:0 0 auto !important; }
body .sidx-container .sidx-main-app-body .sidx-thumbnail{ aspect-ratio:3/2; overflow:hidden; flex:0 0 auto; }
body .sidx-container .sidx-main-app-body .sidx-gallery-display, body .sidx-container .sidx-main-app-body .sidx-gallery-image{ height:100% !important; }
body .sidx-container .sidx-main-app-body .sidx-gallery-image img{ width:100% !important; height:100% !important; object-fit:cover !important; transition:transform .7s ease; }
body .sidx-container .sidx-main-app-body .sidx-grid .sidx-search-result-grid-item:hover .sidx-gallery-image img{ transform:scale(1.06); }
body .sidx-container .sidx-main-app-body .sidx-details{ padding:18px 20px 20px !important; display:flex !important; flex-direction:column !important; flex:1 1 auto !important; }
body .sidx-container .sidx-main-app-body .sidx-price{ font-family:var(--rt-f-serif) !important; color:var(--rt-navy) !important; font-size:23px !important; font-weight:400 !important; line-height:1.1 !important; }
/* Mirror of the hotsheet compliance-logo box guard above (see that comment). */
body .sidx-container .sidx-main-app-body .sidx-listing-logo img{ max-height:25px !important; max-width:50px !important; width:auto !important; }
body .sidx-container .sidx-main-app-body .sidx-mls-details{ margin-top:6px; font-size:11.5px; letter-spacing:.04em; color:#5a626e; padding-bottom:14px; }
body .sidx-container .sidx-main-app-body .sidx-sale-type, body .sidx-container .sidx-main-app-body .sidx-mls-info{ color:var(--rt-navy) !important; }
body .sidx-container .sidx-main-app-body .sidx-listing-heading small{ color:#5a626e !important; }
body .sidx-container .sidx-main-app-body .sidx-info-blocks{ margin-top:auto !important; padding-top:13px; border-top:1px solid #e2dccd; }
body .sidx-container .sidx-main-app-body .sidx-info-block{ align-items:baseline !important; gap:5px; }
body .sidx-container .sidx-main-app-body .sidx-info-value{ color:var(--rt-navy) !important; font-weight:500 !important; font-size:15px !important; line-height:1 !important; }
body .sidx-container .sidx-main-app-body .sidx-info-title{ font-size:10px !important; letter-spacing:.12em !important; text-transform:uppercase !important; color:var(--rt-gold) !important; line-height:1 !important; }
body .sidx-container .sidx-main-app-body .sidx-actions, body .sidx-container .sidx-main-app-body .sidx-reaction-action{ display:none !important; }
body.page-id-9863:not(.rt-listing-detail) .sidx-main-app-body{ max-width:none !important; }
body.page-id-9863:not(.rt-listing-detail) .sidx-main-app-body .sidx-grid{ grid-template-columns:repeat(4,1fr) !important; gap:24px !important; }
/* Same iPad-landscape 4-up overflow fix as the hotsheet block above — keep in sync. */
@media (min-width:1025px) and (max-width:1319.98px){body.page-id-9863:not(.rt-listing-detail) .sidx-main-app-body .sidx-grid{ gap:18px !important; }
body.page-id-9863:not(.rt-listing-detail) .sidx-main-app-body .sidx-grid > *{ min-width:0 !important; }
}
@media (max-width:1024px){body.page-id-9863:not(.rt-listing-detail) .sidx-main-app-body .sidx-grid{ grid-template-columns:repeat(2,1fr) !important; }
}
@media (max-width:560px){body.page-id-9863:not(.rt-listing-detail) .sidx-main-app-body .sidx-grid{ grid-template-columns:1fr !important; }
}
/* ---- LIST-VIEW hotsheets (descriptions shown, e.g. /beach-road-properties/):
   restore the widget's photo-LEFT / details-RIGHT horizontal card. TWO causes stacked the
   card (photo on top, details cramped below with dead space to the right):
   (1) the widget's OWN app.css bug — the list anchor rule ends `display:row` (an INVALID
       value; the browser discards it and keeps `display:flex` at the DEFAULT
       flex-direction:column), so the widget never actually lays the list card out as a row.
   (2) The two editorial GRID restyle blocks above are scoped `.sidx-hotsheet` /
       `.sidx-main-app-body` (NOT `.sidx-grid`), and list cards share the
       `.sidx-search-result-grid-item` class AND that ancestor (a list card carries
       BOTH `-grid-item` and `-grid-list-item`), so the grid's flex-COLUMN anchor
       (line ~827/891) + 3:2 photo (line ~831/894) leak onto list cards and force the
       stack even against the widget's (broken) intent.
   Fix, LIST-cards only (selectors require `.sidx-search-result-grid-list-item`, so the
   heavily-used grid view can NEVER be touched): force the anchor to row, drop the 3:2
   aspect for a fixed 250px left photo (the widget's native list width) stretched to the card
   height (cover-filled), and let details fill the rest. Compound card class
   `.sidx-search-result-grid-item.sidx-search-result-grid-list-item` = specificity (0,4,x),
   beating the leaked (0,3,x) rules by specificity alone (order-independent, RUCSS-safe).
   NO media query needed: the widget only renders list cards at its LARGE tier (container
   >800px) — at medium/small it auto-switches to GRID cards (verified: 375px + 560px =
   0 list items), which the grid restyle already handles. So a 250px photo on a list card
   is always beside >=550px of details; there is no narrow list card to guard. */
body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-content > a{ flex-direction:row !important; align-items:stretch !important; }
/* margin-left insets the photo from the card's left edge (the card has 20px top/bottom
   padding but 0 left, so the left margin balances the frame); border-radius + the
   inherited overflow:hidden round the photo (and clip the New-Listing ribbon inside it,
   which sits at the thumbnail's 0,0). */
body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-thumbnail{ aspect-ratio:auto !important; width:250px !important; flex:0 0 250px !important; align-self:stretch !important; margin-left:16px !important; border-radius:8px !important; overflow:hidden !important; }
body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-details{ flex:1 1 auto !important; min-width:0 !important; }
/* FAIR-HOUSING GUARD (2026-08-11, owner-approved): list-view cards render raw MLS agent
   remarks (.sidx-description), which routinely carry familial-status steering phrases
   ("family-friendly", "perfect for growing families") that must not display on our pages.
   Grid view never renders descriptions and the <=800px block below already hides them on
   phones; this completes the set on desktop list view. The text stays in the DOM on
   purpose: we hide the display, we never edit MLS content (its own compliance problem). */
body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-description{ display:none !important; }
/* MOBILE CLS FIX (2026-07-19): the widget SSRs the LIST card (with the tall
   `.sidx-description`, ~200px) but hydrates to a GRID card (no description) at its
   medium/small tier (container <=800px), so on phones the description collapses on
   hydration and every card below reflows (~0.064 CLS, phones only; desktop stays
   list->list = 0). We can't stop the widget's re-render, so instead make the pre-hydration
   SSR list card MATCH the grid it becomes: below 800px stack it (photo-top, full-width
   3:2) and hide the description, so SSR ~= hydrated and the reflow ~vanishes. Safe
   because the widget only KEEPS list view at the large tier (>800px container, verified: 768px
   viewport = grid); at <=800px the list card is always transient (replaced by a grid
   card), so restyling it can never alter a real list view. No content loss — grid view
   never shows the description anyway. */
@media (max-width:800px){body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-content > a{ flex-direction:column !important; align-items:stretch !important; }
body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-thumbnail{ width:100% !important; flex:0 0 auto !important; aspect-ratio:3/2 !important; margin-left:0 !important; align-self:auto !important; border-radius:0 !important; }
body .sidx-container .sidx-search-result-grid-item.sidx-search-result-grid-list-item .sidx-description{ display:none !important; }
}
.rt-contact__form .sidx-primary{ background-color:var(--rt-navy) !important; background-image:none !important; border-color:var(--rt-navy) !important; }
.rt-contact__form .sidx-primary:hover{ background-color:var(--rt-gold) !important; border-color:var(--rt-gold) !important; }
/* The IDX widget in-content text links: bright accent blue -> navy, accent
   on hover. Scoped to text links only (button/pill links keep their own bg).
   The widget result/list/detail UIs are light-background, so navy stays readable. */
[class*="sidx"] a:not([class*="button"]):not([class*="btn"]):not([class*="primary"]){ color:var(--rt-navy) !important; }
[class*="sidx"] a:not([class*="button"]):not([class*="btn"]):not([class*="primary"]):hover{ color:var(--rt-gold) !important; }
/* ============================================================
   MLS / the IDX widget old-palette cleanup.
   The widget account custom.css paints buttons, badges, header links, etc. the
   old accent blue, much of it with !important. We replicate each of
   those selectors with a leading `body` (one extra specificity point) so our
   navy/gold wins regardless of source order. Backgrounds -> navy (gold hover),
   text -> navy, accent borders -> gold.
   ============================================================ */
/* Buttons (search/save/etc.) + listing-detail CTA + days-online badge -> navy */
body .sidx-button,
body .sidx-container button,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button,
body .sidx-container .sidx-listing-details .sidx-price-area .sidx-days-online{ background:var(--rt-navy) !important; background-color:var(--rt-navy) !important; box-shadow:none !important; border-color:var(--rt-navy) !important; }
body .sidx-button:hover,
body .sidx-container button:hover,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button:hover{ background:var(--rt-gold) !important; background-color:var(--rt-gold) !important; color:#fff !important; border-color:var(--rt-gold) !important; }
/* Header links, search inputs, status labels, dates, menu accents -> navy text */
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link,
body .sidx-container .sidx-main-header .sidx-header-link a,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search,
body .sidx-container .sidx-searchform .sidx-suggestions-input,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-left-column .sidx-open-houses .sidx-open-house-date,
body .sidx-container .sidx-search-results .sidx-mls-details .sidx-for-sale,
body .sidx-container .sidx-searchform .sidx-features .sidx-menu .sidx-title em{ color:var(--rt-navy) !important; }
/* Accent border (share pill) -> gold */
body .sidx-container .sidx-share-search-pill.sidx-share-search-pill{ border-color:var(--rt-gold) !important; }
/* --- auto-generated MLS/widget accent cleanup (app.css + custom.css) --- */
body .sidx-container .sidx-collapse-button,
body .sidx-container .sidx-dashboard .sidx-activity .sidx-activity-item .sidx-action-icon i.sidx-comment,
body .sidx-container .sidx-dashboard .sidx-activity .sidx-activity-item .sidx-address,
body .sidx-container .sidx-link,
body .sidx-container .sidx-listing-comments .sidx-comments .sidx-comments-list .sidx-comment.sidx-agent-visible:before,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-left-column .sidx-open-houses .sidx-open-house-date,
body .sidx-container .sidx-listing-details .sidx-timeline .sidx-emoji.sidx-comment,
body .sidx-container .sidx-listing-details .sidx-timeline i.sidx-comment,
body .sidx-container .sidx-listing-details .sidx-top-level-nav a.sidx-blue,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link a,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link.sidx-new-search,
body .sidx-container .sidx-mobile .sidx-dropdown-pill.sidx-save-search-pill,
body .sidx-container .sidx-photo-array button,
body .sidx-container .sidx-primary-action .sidx-primary-action-icon-container i.blue,
body .sidx-container .sidx-reset-search-pill.sidx-share-search-pill,
body .sidx-container .sidx-saved-searches .sidx-saved-search .sidx-search-title,
body .sidx-container .sidx-search-result-grid-item .sidx-actions .sidx-comments .sidx-count,
body .sidx-container .sidx-search-results .sidx-back,
body .sidx-container .sidx-search-results .sidx-back i,
body .sidx-container .sidx-search-results .sidx-mls-details .sidx-for-sale,
body .sidx-container .sidx-searchform .sidx-features .sidx-menu .sidx-title em,
body .sidx-container .sidx-searchform .sidx-suggestions-input,
body .sidx-container .sidx-share-search-pill.sidx-share-search-pill,
body .sidx-container .sidx-social-search-box .sidx-actions,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle,
body .sidx-container .sidx-suggestions-matches .sidx-geo-search-button,
body .sidx-container .sidx-suggestions-matches .sidx-suggestions-keywords-button,
body .sidx-container .sidx-suggestions-matches li,
body .sidx-container .sidx-suggestions-no-matches .sidx-geo-search-button,
body .sidx-container .sidx-suggestions-no-matches .sidx-suggestions-keywords-button,
body .sidx-container .sidx-suggestions-use-geo .sidx-geo-search-button,
body .sidx-container .sidx-suggestions-use-geo .sidx-suggestions-keywords-button,
body .sidx-container a{ color:var(--rt-navy) !important; }
body .sidx-container .sidx-photo-array button:hover,
body .sidx-container .sidx-primary-action .sidx-primary-action-icon-container i.blue:hover,
body .sidx-container .sidx-search-results .sidx-back:hover,
body .sidx-container .sidx-searchform .sidx-field:hover,
body .sidx-container .sidx-social-search-box .sidx-actions>:hover{ color:var(--rt-gold) !important; }
body .sidx-button,
body .sidx-container .sidx-bar-chart .sidx-chart-item .sidx-chart-datum,
body .sidx-container .sidx-button.sidx-primary,
body .sidx-container .sidx-chart-datum:nth-child(5n+2),
body .sidx-container .sidx-chart-item:nth-child(5n+2) .sidx-chart-datum,
body .sidx-container .sidx-legend-item:nth-child(5n+2) .sidx-legend-dot,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button,
body .sidx-container .sidx-listing-details .sidx-price-area .sidx-days-online,
body .sidx-container .sidx-listing-landing-1 .sidx-landing-photos-form .sidx-landing-form,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search,
body .sidx-container .sidx-search-result-grid-item .sidx-actions,
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-new-listing,
body .sidx-container .sidx-search-results .sidx-thumbnail .sidx-ribbons .sidx-price-drop,
body .sidx-container .sidx-small-screen .sidx-main-header .sidx-header-link .sidx-current-page.sidx-new-search .sidx-icon-label,
body .sidx-container .sidx-small-screen .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search .sidx-icon-label,
body .sidx-container .sidx-small-screen .sidx-main-header .sidx-header-link a.sidx-new-search .sidx-icon-label,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-done,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-searchbox .sidx-add-keyword,
body .sidx-container button,
body .sidx-container button.sidx-primary{ background:var(--rt-navy) !important;background-color:var(--rt-navy) !important; }
/* The widget app-header nav tabs (Search / Dashboard / Listings / Searches / Sign in): render
   BOLD navy to match the rest of the site (owner 2026-07-05). After the IDX widget design
   was rebranded, the tabs read grey at the stock 400 weight; the color was already navy but
   thin. Bold every tab + reassert navy; keep the active .sidx-new-search pill navy with bold
   WHITE text. Broad .sidx-header-link selectors (not requiring .sidx-main-header) so it holds
   on both the /homes/ search app (9863) and listing-detail views. */
body .sidx-container .sidx-header-link,
body .sidx-container .sidx-header-link .sidx-link,
body .sidx-container .sidx-header-link a,
body .sidx-container .sidx-header-link span,
body .sidx-container .sidx-header-link .sidx-icon-label,
body .sidx-container .sidx-header-link .sidx-current-page,
body .sidx-container .sidx-main-header .sidx-header-link,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link,
body .sidx-container .sidx-main-header .sidx-header-link a{ color:var(--rt-navy) !important; font-weight:700 !important; }
body .sidx-container .sidx-header-link .sidx-new-search,
body .sidx-container .sidx-header-link a.sidx-new-search,
body .sidx-container .sidx-header-link .sidx-link.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page.sidx-new-search{ background:var(--rt-navy) !important;background-color:var(--rt-navy) !important; color:#fff !important; font-weight:700 !important; }
body .sidx-container .sidx-header-link .sidx-new-search span,
body .sidx-container .sidx-header-link .sidx-new-search .sidx-icon-label,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search span,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search .sidx-icon-label{ color:#fff !important; font-weight:700 !important; }
/* The widget dims the ENTIRE app-header nav to opacity:.6 (a stylesheet rule on the
   .sidx-main-header .sidx-header-link inner links -- active "Search" pill AND the
   Dashboard/Listings/Searches/Sign in text). At 60% the navy #0e2c4a blends with the
   ivory band and renders grey-slate: this is the recurring "the nav is grey, make it
   navy blue" report (owner 2026-07-05, again 2026-07-15). The 2026-07-05 fix set
   color+weight but NOT opacity, and only sampled computed COLOR (already navy) so the
   dimming was invisible to that check. Reassert full opacity. It MUST out-specify
   the widget's OWN `.sidx-main-header .sidx-header-link a` rule: a bare
   `body .sidx-header-link a{opacity:1 !important}` (0,2,2) LOSES (verified live) --
   the doubled `.sidx-header-link.sidx-header-link` bumps us to (0,4,3) so we win
   regardless of source order. Covers the listing-detail view AND the /homes/ search
   app (both use .sidx-main-header). LESSON: verify the EFFECTIVE render (opacity /
   screenshot), never just computed color, when the widget element "looks grey". */
html body .sidx-container .sidx-main-header .sidx-header-link.sidx-header-link a,
html body .sidx-container .sidx-main-header .sidx-header-link.sidx-header-link .sidx-link,
html body .sidx-container .sidx-main-header .sidx-header-link.sidx-header-link .sidx-new-search,
html body .sidx-container .sidx-main-header .sidx-header-link.sidx-header-link .sidx-signin,
html body .sidx-container .sidx-main-header .sidx-header-link.sidx-header-link span{ opacity:1 !important; }
body .sidx-container .sidx-dropdown-pill.sidx-save-search-pill,
body .sidx-container .sidx-photo-array button,
body .sidx-container .sidx-primary-actions.sidx-primary-jumbo,
body .sidx-container .sidx-reset-search-pill.sidx-share-search-pill,
body .sidx-container .sidx-search-result-grid-item .sidx-actions,
body .sidx-container .sidx-share-search-pill.sidx-share-search-pill,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-done,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-searchbox .sidx-add-keyword,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-toggle,
body .sidx-container .sidx-toggle-bar .sidx-toggle-bar-item.sidx-selected,
body .sidx-container .sidx-toggle-bar .sidx-toggle-bar-item:hover{ border-color:var(--rt-gold) !important; }
/* White text on every the widget element we gave a navy background. Several inherited
   navy text from the accent->navy recolor, leaving text invisible on the navy
   box (call button, action bars, days-online badge, active search tab, etc.).
   Includes ` *` so inner icons/labels go white too. */
body .sidx-button,
body .sidx-button *,
body .sidx-container button,
body .sidx-container button *,
body .sidx-container .sidx-button.sidx-primary,
body .sidx-container button.sidx-primary,
body .sidx-container .sidx-call-button,
body .sidx-container .sidx-call-button *,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button,
body .sidx-container .sidx-listing-details .sidx-columns .sidx-call-to-actions button *,
body .sidx-container .sidx-listing-details .sidx-price-area .sidx-days-online,
body .sidx-actions,
body .sidx-actions *,
body .sidx-container .sidx-search-result-grid-item .sidx-actions,
body .sidx-container .sidx-search-result-grid-item .sidx-actions *,
body .sidx-container .sidx-social-search-box .sidx-actions,
body .sidx-container .sidx-social-search-box .sidx-actions *,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-done,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-done *,
body .sidx-container .sidx-streamlined-search .sidx-streamlined-searchbox .sidx-add-keyword{ color:#fff !important; }
/* Photo-gallery controls ("Quickview / Next Photos"): the generic
   `.sidx-container button` rule paints them navy AND `.sidx-photo-array button`
   sits in the navy-text color group at specificity (0,2,2) -- out-ranking the
   generic button{color:#fff} (0,1,2) -- so the control rendered navy-on-navy
   (invisible). Re-assert white at equal specificity, placed later to win the
   tie. (:hover stays gold -- its pseudo-class makes it more specific.) */
body .sidx-container .sidx-photo-array button,
body .sidx-container .sidx-photo-array button *{ color:#fff !important; }
/* The "New Search" tab is the only main-header link with a navy background, so
   the generic main-header `i, span{ color:navy }` rule (below) painted its icon
   + label navy-on-navy -- the invisible dark box left of "Dashboard". Force the
   whole control's contents white. (0,4,2) out-ranks that rule's (0,3,2); placed
   later to win the cascade. */
body .sidx-container .sidx-main-header .sidx-header-link .sidx-current-page.sidx-new-search *,
body .sidx-container .sidx-main-header .sidx-header-link .sidx-link.sidx-new-search *,
body .sidx-container .sidx-main-header .sidx-header-link a.sidx-new-search *,
body .sidx-container .sidx-main-header .sidx-header-link.sidx-new-search *{ color:#fff !important; }
/* Photo-gallery "Quickview / Next Photos" button hover was gold-on-gold
   (invisible). Pin a deterministic, on-brand hover -- accent background, white
   text (the site's accent-button convention) -- so the label is always readable.
   (0,3,2) + later source order beats the prior :hover color rule. */
body .sidx-container .sidx-photo-array button:hover,
body .sidx-container .sidx-photo-array button:hover *{ background:var(--rt-gold) !important; background-color:var(--rt-gold) !important; color:#fff !important; }
/* Last-mile the widget accents that inherit the old blue (map/marker FA icons, the
   selected detail-nav tab). Force them on-brand explicitly. */
body .sidx-container .sidx-icon.sidx-map,
body .sidx-container .sidx-icon.sidx-map-marker,
body .sidx-container .sidx-menu-item.sidx-selected{ color:var(--rt-navy) !important; }
body .sidx-container .sidx-menu-item.sidx-selected{ border-color:var(--rt-gold) !important; }
/* Listing-detail carousel tabs (Map / Nearby Listings) — were accent blue. */
body .sidx-container .sidx-listing-details .sidx-carousel .sidx-menu .sidx-menu-item{ color:var(--rt-navy) !important; border-color:var(--rt-gold) !important; }
body .sidx-container .sidx-listing-details .sidx-carousel .sidx-menu .sidx-menu-item.sidx-selected{ color:var(--rt-navy) !important; }
/* The widget main-header link variants (Dashboard/Listings/Searches/etc.) can pick up
   a default link blue (#0576f5) on their container — force the whole set navy. */
body .sidx-container .sidx-main-header .sidx-header-link,
body .sidx-container .sidx-main-header .sidx-header-link i,
body .sidx-container .sidx-main-header .sidx-header-link span{ color:var(--rt-navy) !important; border-color:var(--rt-gold) !important; }
/* "Save Search" pill (highlighted state) was light blue -> navy with cream text. */
body .sidx-container .sidx-save-search-pill,
body .sidx-container .sidx-save-search-pill.sidx-search-pill,
body .sidx-container .sidx-dropdown-pill.sidx-save-search-pill{ background:var(--rt-navy) !important; background-color:var(--rt-navy) !important; color:#fff !important; }
/* The navy-text group also paints `.sidx-mobile .sidx-dropdown-pill.sidx-save-search-pill`
   navy (specificity 0,4,1, !important), out-ranking the white rules above (0,3,1) -- so the
   "Save Search" pill (and its inherited text child) rendered navy-on-navy. Re-assert white
   at higher specificity (0,5,1 via the extra .sidx-search-pill class), incl. descendants. */
body .sidx-container .sidx-mobile .sidx-dropdown-pill.sidx-save-search-pill.sidx-search-pill,
body .sidx-container .sidx-mobile .sidx-dropdown-pill.sidx-save-search-pill.sidx-search-pill *,
body .sidx-container .sidx-mobile .sidx-dropdown-pill.sidx-save-search-pill,
body .sidx-container .sidx-mobile .sidx-dropdown-pill.sidx-save-search-pill *{ color:#fff !important; }
/* "See More Listings" hotsheet CTA -> gold primary (matches Search Homes / Let's
   talk), navy on hover. Beats the generic sidx button->navy rule on specificity. */
body .sidx-container .sidx-hotsheet-see-all-results,
body .sidx-hotsheet-see-all-results{ background:var(--rt-gold) !important; background-color:var(--rt-gold) !important; color:#fff !important; border-color:var(--rt-gold) !important; box-shadow:none !important; }
body .sidx-container .sidx-hotsheet-see-all-results:hover,
body .sidx-hotsheet-see-all-results:hover{ background:var(--rt-navy) !important; background-color:var(--rt-navy) !important; color:#fff !important; border-color:var(--rt-navy) !important; }
/* ============================================================
   the widget SEARCH-BAR POLISH (2026-06-17) — match site typography + accent.
   The /homes/ search shipped in retired Cormorant (-> Times fallback) with
   the widget's stock orange "+ Advanced Search" accent. Map both onto Tidewater:
   Marcellus serif + accent teal, and soften the widget's 3px radius to the site's.
   (.sidx-* selectors are RUCSS-safelisted, so these survive used-css.)
   ============================================================ */
body .sidx-container .sidx-searchform,
body .sidx-container .sidx-searchform .sidx-field,
body .sidx-container .sidx-searchform .sidx-range,
body .sidx-container .sidx-searchform .sidx-types,
body .sidx-container .sidx-searchform button,
body .sidx-container .sidx-search-pill,
body .sidx-container .sidx-search-pill-links,
body .sidx-container .sidx-collapse-button,
body .sidx-container .sidx-main-header .sidx-header-link,
body .sidx-container button{ font-family:var(--rt-f-serif) !important; }
/* Orange "+ Advanced Search" circle -> Tidewater accent */
body .sidx-container .sidx-plus-circle,
body .sidx-container .sidx-fa-plus-circle,
body .sidx-container .sidx-collapse-button i,
body .sidx-container .sidx-collapse-button .sidx-icon{ color:var(--rt-gold) !important; }
/* Soften the widget's 3px radius to the site's rounder controls */
body .sidx-container .sidx-search-pill,
body .sidx-container .sidx-suggestions-input,
body .sidx-container .sidx-searchform .sidx-field,
body .sidx-container button{ border-radius:6px !important; }
/* The "+ Advanced Search" glyph is a FontAwesome ::before — recolor the pseudo too */
body .sidx-container .sidx-plus-circle::before,
body .sidx-container .sidx-fa-plus-circle::before,
body .sidx-container .sidx-collapse-button i::before{ color:var(--rt-gold) !important; }
/* The widget listing cards (/homes/ full-app) -> site sans (Hanken), matching the
   homepage hotsheet. They shipped in retired Cormorant (-> Times fallback);
   the owner prefers the homepage's clean sans card text. */
body .sidx-container .sidx-search-result-grid-item,
body .sidx-container .sidx-search-result-grid-item *,
body .sidx-container .sidx-search-result-grid-list-item,
body .sidx-container .sidx-search-result-grid-list-item *{ font-family:var(--rt-f-sans) !important; }
/* ...but the sans override above also clobbered the icon glyph font on the cards
   (carousel chevrons + save/comment/share/hide action icons render from the widget
   "ShowcaseSearchWidget" icon font on a ::before). Forcing Hanken on them turned
   the glyphs into broken boxes, so restore the icon font on the icon elements. */
body .sidx-container .sidx-search-result-grid-item .sidx-icon,
body .sidx-container .sidx-search-result-grid-item .sidx-icon::before,
body .sidx-container .sidx-search-result-grid-item .sidx-fa,
body .sidx-container .sidx-search-result-grid-item .sidx-fa::before,
body .sidx-container .sidx-search-result-grid-list-item .sidx-icon,
body .sidx-container .sidx-search-result-grid-list-item .sidx-icon::before,
body .sidx-container .sidx-search-result-grid-list-item .sidx-fa,
body .sidx-container .sidx-search-result-grid-list-item .sidx-fa::before{ font-family:"ShowcaseSearchWidget" !important; }
/* Convert the REMAINING inherited widget text (the search-app canvas + empty states +
   dropdowns + filter chrome) from retired Cormorant (-> Times fallback) to site sans.
   Deliberately overrides only the two app CONTAINERS' font-family, NOT a blanket `*`:
   icon elements set their OWN font-family (.sidx-icon/.sidx-fa -> ShowcaseSearchWidget),
   which beats inheritance, so the glyphs keep their icon font and do NOT break (the
   blanket-`*` approach is what breaks them). Text inherits the sans; icons are immune. */
body .sidx-main-app-body, body .sidx-container{ font-family:var(--rt-f-sans) !important; }
/* The widget renders its listing call-to-action line (.sidx-call-text, "Is this the listing
   for you?...") in bright red (#f10c0c) by default -- badly off the Tidewater palette.
   Recolor to brand navy to match the Ask/Tour buttons + phone right beside it. */
body .sidx-container .sidx-call-text{ color:var(--rt-navy) !important; }