/* ShowcaseIDX listings in the v2 layout (spec 2026-09-25). EVERY rule is under body.rt-sx, which the server sets only when our parts rendered and rt-sx.js toggles on SPA nav, so the /homes/ search view and outage renders are untouched. Layout is a grid on the EXISTING .rt-citypage__prose so no node inside or around ShowcaseIDX's React root is moved. */ /* max-width/margin only: NO horizontal padding on .rt-citypage__prose itself (code review 2026-09-25). .rt-citypage__body (rt-header.css) already supplies a 24px ambient gutter at every width -- the exact rule the first-party template's own .rt-mls-wrap relies on too (it declares none of its own either) -- so an additional padding here just stacked a SECOND 24px on top of it: measured live, 48px total from 1024px up, where ShowcaseIDX never strips anything (see the mobile-gutter block below for the width range where it does). 1320px, MATCHING v2, NOT v1's 1200 (code review 2026-09-26). v2 caps its own page at 1320px (`.rt-mls--v2 .rt-mls-wrap` / `.rt-mls-body > .rt-citypage__prose`, rt-mls-listing-v2.css), and this file's own grid-template-columns below already use v2's exact rail widths (380px from 1024px, 452px from 1280px) with the same 28px gap -- only this max-width had been left at v1's number. At 1200px every SX listing above ~1248px was narrower than first-party, and RT_MLS_GALLERY_SIZES_V2's 840px `sizes` bucket (inc/mls/lib-redesign.php) described a slot this page never actually rendered (1200 - 452 - 28 = 720). At 1320 the arithmetic is 1320 - 452 - 28 = 840, matching the constant exactly (see rt_sx_gallery_html()'s docblock in inc/sx-parts-lib.php). */ body.rt-sx .rt-citypage__prose { max-width: 1320px; margin: 0 auto; } /* min-height is intentionally left alone here (code review 2026-09-25): the listing-detail polish printer (functions.php) sets `min-height: 100vh` on this same element as a load-flash / CLS guard (SIDX server-renders this container at ~zero height, so anything appended after it would jump into place once React mounts). That rule has no !important, so a `min-height: 0 !important` here defeated it silently on every rt-sx render. Do not add it back without re-measuring layout-shift sources on a direct listing load. */ body.rt-sx .rt-citypage__prose > .sidx-container { max-width: none !important; padding-top: 0 !important; } /* The duplicates our parts replace. .property-address-banner-placeholder is included because address-bar.js still wires the (now display:none, see the banner block in functions.php) banner on desktop, and once the visitor scrolls past its zero-height natural position it flips the placeholder to .is-active, a real 34px flow element (address-bar.css) -- measured live, that wiring runs even against a hidden banner (code review 2026-09-25). :is(body.rt-sx, body.rt-sx-wait) (code review 2026-09-25, CLS fix): the SAME hides also apply under body.rt-sx-wait, a class the gallery-order observer (functions.php) sets the moment it knows a v2-match hero is coming for the current listing (window.rtSxSync loaded) but before the fetch that carries .rt-sx-top/.rt-sx-rail has resolved. Without this, the vendor header/carousel/price/actions stayed fully visible and painted for the whole 0.5-1.2s round trip, then vanished in the same tick the hero was inserted above them: one large layout-shift entry, well outside the click's hadRecentInput window. Hiding them as soon as rt-sx-wait is set moves most of that same hide inside the window the click opened. THIS IS A PARTIAL FIX, MEASURED HONESTLY, NOT A COMPLETE ONE. Hiding early barely moves the COUNTED score by itself (fixture-measured: 0.4654 -> ~0.45), because nothing holds the vendor content's old space open -- the LATER swap-in still has to add the hero's full height back on its own. A reserved placeholder swapped in for the real content was tried in the same fixture and made the counted score WORSE (0.51), because sizing it without the SAME max-width/grid constraints that only apply once body.rt-sx (not body.rt-sx-wait) is set over-reserves at desktop widths -- not shipped for that reason. See functions.php's syncSxWait() and Task 6 Step 6 of docs/superpowers/plans/2026-09-25-sidx-listing-v2-match.md for the live measurement this session added, which is what actually decides whether a properly-scoped reservation is worth building. */ :is(body.rt-sx, body.rt-sx-wait) .property-address-banner, :is(body.rt-sx, body.rt-sx-wait) .property-address-banner-placeholder, :is(body.rt-sx, body.rt-sx-wait) .sidx-main-header, :is(body.rt-sx, body.rt-sx-wait) .sidx-menu, :is(body.rt-sx, body.rt-sx-wait) .sidx-carousel, :is(body.rt-sx, body.rt-sx-wait) .sidx-photo-array, :is(body.rt-sx, body.rt-sx-wait) .sidx-price, :is(body.rt-sx, body.rt-sx-wait) .sidx-sub-address, :is(body.rt-sx, body.rt-sx-wait) .sidx-primary-action, :is(body.rt-sx, body.rt-sx-wait) .sidx-actions, :is(body.rt-sx, body.rt-sx-wait) .sidx-call-to-actions, :is(body.rt-sx, body.rt-sx-wait) .rt-noacct, :is(body.rt-sx, body.rt-sx-wait) .sidx-prev-nav-container #rt-viewall, /* .sidx-price-area is the LEFT-COLUMN box holding both .sidx-price (already hidden above) and .sidx-days-online, a navy "N Days On Site" chip. Hiding only .sidx-price left that chip as an orphan, the first element of the main column, directly under the tabs (code review 2026-09-26). First-party shows the same fact inside the fact card's price line instead (rt-mls-listing-v2.php's .rt-mls-days); hiding the whole box here is the in-scope fix (adding that div would need the caller in functions.php, which builds $d, to pass a first-seen date -- out of this lane). */ :is(body.rt-sx, body.rt-sx-wait) .sidx-price-area, /* Three legacy vendor/spot blocks that used to open the main column under the tabs, none of which exist on first-party (code review 2026-09-26): the elevated stats card (repeats Beds/Baths/Sq Ft/Built the fact card already shows), the centred "{street}, {city}" H2 (repeats the fact card's own aria-hidden headline), and the "Call Clark Smith..." box (repeats the fact card's + rail's own call line). Hidden rather than restyled: their content is a duplicate, not a distinct section, so there is nothing here worth keeping visible. */ :is(body.rt-sx, body.rt-sx-wait) .sidx-primary-info, :is(body.rt-sx, body.rt-sx-wait) .property-address-h2, :is(body.rt-sx, body.rt-sx-wait) .property-contact-text-below-description, body.rt-sx .rt-citypage__prose > .rt-listing-crumbs:not(.rt-sx-crumbs) { display: none !important; } /* * MOBILE GUTTER PARITY (code review 2026-09-25). Below 1024px ShowcaseIDX's * own small-screen mode strips the horizontal padding from EVERY non-sidx * ancestor of .sidx-container with an inline !important override -- the * documented full-bleed behaviour; page 9863 is deliberately excluded from * the theme's fix that reverts it (realhomes_child_sidx_fullbleed_fix() in * functions.php), because on the vendor-served /homes/ search view that * full-bleed IS the intended layout. .rt-citypage__body and * .rt-citypage__prose are both such ancestors, so whatever gutter they * supply disappears the instant ShowcaseIDX hydrates: measured live at * 390px (both an iPhone-13 emulation and a plain 390 viewport), * .rt-mls-facts, .rt-mls-h1 (inside it), .rt-mls-ctas (inside it) and * .rt-sx-crumbs all sat flush at the viewport edges post-hydration -- and, * before hydration, at x=48 (a doubled 24px+24px gutter, from * .rt-citypage__body's ambient plus .rt-citypage__prose's own padding, * which is why that padding was removed from the base rule above rather * than kept as a fallback). Either way a real, visible shift on hydration. * * A rule that only ADDS its own 24px on top of whatever ambient happens to * be present would still jump on hydration -- just 48px pre / 24px post * instead of 24 pre / 0 post. The fix instead makes each of these three * elements independent of the ambient ENTIRELY, using the SAME * viewport-relative bleed rt-mls-listing.css's `.rt-mls-gallery__stage` * already relies on: `width:100vw` plus `margin-left:calc(50% - 50vw)` * makes the box span exactly 0 to 100vw regardless of what padding its * ancestors currently carry (the calc resolves against whatever the * element's containing block happens to measure at that moment, so it is * correct whether the ambient is present, stripped, or anything in * between), and the element's OWN `padding-left/padding-right: 24px` then * re-adds a FIXED 24px inset on top of that (padding-top/bottom are left * exactly as each element's own base rule already sets them) -- * `box-sizing:border-box` keeps the padding * inside the explicit 100vw instead of pushing the box past it. * `margin-right` is deliberately left undeclared: once `width` and * `margin-left` are both explicit, CSS's own over-constrained-box rule * (2.1 10.3.3) recalculates it to make the box fit, which is also why the * gallery's own rule never sets it either. * * The extra bleed step (beyond a plain padding declaration, which is all * .rt-listing-gallery / .rt-mls-map / .rt-listing-area need for the same * underlying reason) is needed here because those three sit as TOP-LEVEL * siblings of .sidx-container with nothing else between them and * .rt-citypage__prose, while .rt-mls-facts and .rt-sx-crumbs sit inside * .rt-mls-hero (a real box, not display:contents) -- a plain padding * declaration on them would ADD to whatever inset .rt-mls-hero's own * containing chain is currently supplying, not replace it. * * The gallery photo itself is deliberately left untouched: spec 4.2 has it * edge to edge below 761px on purpose (today's Redfin-style mobile hero), * and its existing bleed rule already resolves to that edge-to-edge result * regardless of ambient state, so there was nothing to fix there. * * Scoped to max-width:1023px because from 1024px .rt-mls-facts becomes its * own card with 26px/28px padding (rt-mls-listing-v2.css) and the tab row's * own @media(min-width:1024px) override (`margin:0;padding:0`) takes over -- * neither of these rules is needed or wanted there, and ShowcaseIDX never * strips anything at that width in the first place. */ @media (max-width: 1023px) { body.rt-sx .rt-mls-facts, body.rt-sx .rt-mls-hero > .rt-sx-crumbs, body.rt-sx .rt-mls-tabs__row { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); padding-left: 24px; padding-right: 24px; box-sizing: border-box; } /* MAIN-COLUMN LEFT EDGES, mobile half (code review 2026-09-26). Below 1024px ShowcaseIDX's own small-screen mode strips .sidx-main-app-body's padding to 0 (the same full-bleed behaviour the big comment above this block describes for our own injected elements), so re-add the same 24px inset the facts/crumbs/tabs above already carry, with !important to beat the vendor's own inline override the same way the rest of this file counters vendor !important rules. */ body.rt-sx .sidx-main-app-body { padding-left: 24px !important; padding-right: 24px !important; } } /* ShowcaseIDX's address

stays the document's one h1, visible to crawlers and screen readers, not on screen. Never display:none. SCOPE FIX (code review 2026-09-25). The old `body.rt-sx .sidx-listing-heading` selector is (0,2,1), which LOSES `width` and `margin-left` to the polish printer's `body.rt-listing-detail .sidx-container .sidx-listing-heading` (functions.php) at (0,3,1) -- both !important, so specificity (not source order) decides, and the printer's is higher. Measured live: the element kept `position:absolute` and `height:1px` from here (nothing else set those), but `width` resolved to the printer's `100%` and `margin-left` to its `0`. With no positioned ancestor its containing block is the ICB (viewport), so `width:100%` is 100% of the VIEWPORT, not of any local column -- computed 1440px wide at a 1440px viewport, 390px at 390 -- and with the element's static (in-flow) position offset from the viewport's left edge by the page's own gutter, that full-viewport-width box pushed past the right edge: documentElement.scrollWidth measured 1575 at 1440 (innerWidth 1440) and 429 at 390 (innerWidth 390), and scrollTo(300,0) / scrollTo(x,0) actually scrolled. `.sidx-container`'s `max-width:none` (this same file) does not clip it either -- clip only crops a box's own overflowing DESCENDANTS, and this box is itself the one overflowing its ancestors. Fixed by adding `.sidx-container` to the selector for a fourth class -- `body.rt-listing-detail.rt-sx .sidx-container .sidx-listing-heading` is (0,4,1), which beats the printer's (0,3,1) outright regardless of source order, so this rule's `width:1px` and `margin:-1px` (both !important) win instead. Re-verified: documentElement.scrollWidth equals innerWidth at both 1440 and 390, and the h1 is still present and reachable in the accessibility tree (position:absolute + clip does not remove it). */ body.rt-listing-detail.rt-sx .sidx-container .sidx-listing-heading { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; } /* * STICKY TAB BAR FIX (code review 2026-09-25, verified in Chromium AND WebKit * with a static HTML/CSS fixture; both engines agree byte-for-byte). * * .rt-mls-tabs reuses rt-mls-listing-v2.css's unconditional * `.rt-mls--v2 .rt-mls-tabs { position: sticky; top: var(--rt-v2-hdr) }` * (it applies at every width, not just desktop). A position:sticky element's * containing block is its parent box. rt_sx_top_html() (inc/sx-parts-lib.php) * puts .rt-mls-tabs inside .rt-mls-lower, and on this page .rt-mls-lower * wraps ONLY the