/*!
 * First-party listing page, layout v2: "E" on desktop, the "mix" on phones.
 * Spec: docs/superpowers/specs/2026-09-22-listing-page-redesign-design.md.
 *
 * LOADED ONLY ON v2 RENDERS, AND ALWAYS AFTER rt-mls-listing.css, which it
 * declares as its dependency in rt_mls_isolate_assets(). Everything in that
 * file still applies here: the [hidden] guard, the Redfin phone hero (100/83,
 * full bleed, snap track, no arrows, touch-action), the accordions, the
 * description clamp, the snapshot table and the map box. This file only lays
 * the v2 page out on top of it, so a v1 render is exactly what it was.
 *
 * SCOPE. Every rule is under .rt-mls--v2 (on <main>) or body.rt-mls-v2 and
 * scores at least (0,2,0). That is what beats GeneratePress's generated
 * `button:hover, button:focus` reset (0,1,1), the column's
 * `.rt-citypage__prose p / a / h2 / h3` (0,1,1) and `.rt-about h1, h2, h3`
 * (0,1,1). The two overflow rules are the only exceptions, on purpose (see
 * there). assets/js/rt-mls-v2.test.js checks every selector in this file.
 *
 * THE INLINE SHEETS PRINTED AFTER THIS ONE. rh-custom sets `p { font-size:
 * 20px }`, `td { font-size: 2rem; padding: .5rem .7rem }` and `dl, ul, table,
 * button { font-size: 2rem }` at (0,0,1), and html is 62.5%, so a rem here
 * would be 10px. Every size in this file is px, and every text size is
 * declared on the element that carries the text, never inherited from a
 * container: a direct rule on a <p> beats anything the <p> would inherit.
 *
 * SIZES COUPLING. RT_MLS_GALLERY_SIZES_V2 (inc/mls/lib-redesign.php) describes
 * the media track laid out below: the 24px body gutters, a 380px rail from
 * 1024px and 452px from 1280px, a 28px gap and a 1320px column. Change one of
 * those numbers and the constant has to move with it, or every browser picks
 * the wrong hero candidate at every width and the LCP preload stops matching.
 * assets/js/rt-mls-v2.test.js re-derives each clause of the constant from the
 * rules in this file.
 */

/* ---- sticky has to work at all ----------------------------------------- */
/* rh-custom prints `html, body { overflow-x: hidden }` inline on every page.
   overflow-x:hidden makes body compute overflow-y:auto, so body becomes a
   scroll container that never scrolls, and every position:sticky element on
   the page pins to IT: measured live, a sticky probe scrolled away to -2855px.
   `clip` clips the same overflow without creating a scroll container, so the
   viewport is the scroller again and sticky works. Verified on the live page
   at 1440 and 390 with no horizontal scroll.

   BODY ONLY, and html is left alone on purpose (spec 4.5). html keeps
   rh-custom's `hidden`, which propagates to the viewport, so the viewport is
   the one scroller and still clips sideways: no horizontal scroll. A rule on
   html would buy nothing, and an `html:has(> body...)` selector is (0,1,2),
   which out-ranks the html half of both scroll locks (`html.rt-drawer-lock`
   and `html.rt-modal-lock`, (0,1,1) in rt-header.css).

   THE LOCKS STILL WIN. `html.rt-drawer-lock body` and `html.rt-modal-lock body
   { overflow: hidden }` are (0,1,2) against this (0,1,1), so body goes back to
   hidden while the menu or a modal is open. Keep this rule free of !important.

   Safari below 16 does not know `clip`, drops the declaration and keeps
   `hidden`, so sticky simply stays off there. There is no JS pinning and no
   fixed-plus-placeholder fallback: the address-bar gap bugs came from that. */
body.rt-mls-v2 { overflow-x: clip; }

/* ---- geometry the tabs, the tour card and the jump targets share -------- */
/* The header is 58px and 68px from 1024 (rt-header.css .rt-hdr__solid). The
   tab row is 52px on phones and 56px from 1024. The sticky offsets, every
   scroll margin and the reading area in rt-mls-v2.js derive from these, so
   they are stated once. */
.rt-mls--v2 { --rt-v2-hdr: 58px; --rt-v2-tabs: 52px; --rt-v2-gap: 14px; }

/* ---- shell --------------------------------------------------------------- */
/* 1320px is the mockup's 840px media track + 28px gap + 452px rail. v1 caps
   the prose column at 1280 (rt-header.css) and the wrap at 1200. */
.rt-mls--v2 .rt-mls-body > .rt-citypage__prose { max-width: 1320px; }
.rt-mls--v2 .rt-mls-wrap { max-width: 1320px; }

/* ---- hero: the photo, the fact sheet, the breadcrumbs ------------------- */
.rt-mls--v2 .rt-mls-hero > .rt-mls-gallery { margin: 0; min-width: 0; }
/* The sold / off-market band sits above the hero at every width. 18px under
   the header, not v1's 36px, which also paid for a banner v2 does not render.
   (0,4,1) outranks v1's phone rule at (0,3,1). */
body.rt-mls-v2 .rt-mls--v2 .rt-mls-wrap > .rt-listing-closednote { margin-top: 18px; }
/* The band is a navy card and the stage behind the photo is the same navy.
   Butted together they read as one slab. */
.rt-mls--v2 .rt-listing-closednote + .rt-mls-hero { margin-top: 14px; }

/* The fact sheet (spec 4.3). ONE DOM for both widths, written in the order a
   screen reader and the Tab key meet it: h1, price row, the Est. link, the
   eight facts, the status line, Tour and Ask, the call line, the subdivision
   box, the dual-listing note. CSS moves only the price row (above the h1,
   below 1024px) and the status line (to the top, from 1024px). Neither holds
   a focus stop, and rt-mls-v2.test.js checks that against the template, so
   the visual order never contradicts the tab order. */
.rt-mls--v2 .rt-mls-facts { display: flex; flex-direction: column; min-width: 0; margin: 18px 0 0; }
.rt-mls--v2 .rt-mls-facts > .rt-mls-priceline { order: -1; }
.rt-mls--v2 .rt-mls-price { font-size: 30px; }
/* One element, one line of text with commas: v1's two display:block spans are
   gone, and the rule below is only a guard in case a span comes back. */
.rt-mls--v2 .rt-mls-h1 { font: 400 21px/1.3 var(--rt-f-sans), system-ui, sans-serif; color: #0e2c4a; margin: 8px 0 0; }
.rt-mls--v2 .rt-mls-h1 span { display: inline; }
/* "Est. $67,543/mo with 20% down": a Reg Z trigger term, so its basis travels
   with it and it links to the card that discloses the rest. */
.rt-mls--v2 .rt-mls-est { margin: 6px 0 0; font: 400 15px/1.4 var(--rt-f-sans), system-ui, sans-serif; color: #3c4450; }
.rt-mls--v2 .rt-mls-est a { color: #143F77; text-decoration: underline; text-underline-offset: 2px; }
.rt-mls--v2 .rt-mls-est a:hover { color: #0e2c4a; }

/* The eight facts (spec 4.4). A missing value drops its cell and the grid
   reflows; nothing here reserves an empty slot. <dt> comes first in the markup
   so a screen reader says "Beds, 4", and order:-1 paints the value on top.
   The value keeps one weight in every state, so no cell ever changes width. */
.rt-mls--v2 .rt-mls-fgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 6px;
	margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid #e2dccd; }
.rt-mls--v2 .rt-mls-fgrid__c { display: flex; flex-direction: column; min-width: 0; }
.rt-mls--v2 .rt-mls-fgrid dt { margin: 0; font: 600 10.5px/1.3 var(--rt-f-sans), system-ui, sans-serif;
	letter-spacing: .08em; text-transform: uppercase; color: #5a626e; }
.rt-mls--v2 .rt-mls-fgrid dd { order: -1; margin: 0; font: 500 19px/1.25 var(--rt-f-sans), system-ui, sans-serif;
	color: #0e2c4a; overflow-wrap: anywhere; }

/* v1 declares these margins with !important, so the override has to as well:
   (0,2,0) !important beats (0,1,0) !important. */
.rt-mls--v2 .rt-mls-meta { margin: 12px 0 0 !important; }
.rt-mls--v2 .rt-mls-facts .rt-mls-ctas { margin: 14px 0 0; }
/* "Call Clark Smith (949) 494-8830". No response-time wording, ever. */
.rt-mls--v2 .rt-mls-call { margin: 10px 0 0; font: 400 14px/1.5 var(--rt-f-sans), system-ui, sans-serif;
	color: #5a626e; text-align: center; }
.rt-mls--v2 .rt-mls-call a { color: #143F77; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

/* The subdivision box keeps .rt-mls-sub, the class v1's order test reads. v1
   styles that class as a centred line: an !important margin, every <b> turned
   into a block label, and links set to inherit with no underline. Each of
   those is overridden here, with !important only where v1 used it. White on
   the ivory page below 1024px; ivory inside the white card from 1024px. */
.rt-mls--v2 .rt-mls-sub { margin: 16px 0 0 !important; padding: 14px 16px; text-align: left;
	background: #fff; border: 1px solid #e2dccd; border-radius: 8px;
	font: 400 14px/1.5 var(--rt-f-sans), system-ui, sans-serif; color: #3c4450; }
.rt-mls--v2 .rt-mls-sub p { margin: 0; font-size: 14px; line-height: 1.5; }
.rt-mls--v2 .rt-mls-sub p + p { margin-top: 6px; }
.rt-mls--v2 .rt-mls-sub b { display: inline; font: inherit; font-weight: 600; color: #0e2c4a;
	letter-spacing: 0; text-transform: none; }
.rt-mls--v2 .rt-mls-sub a { color: #143F77; text-decoration: underline; text-underline-offset: 2px; }
.rt-mls--v2 .rt-mls-sub .rt-mls-sub__name { font: 400 19px/1.3 var(--rt-f-serif), Georgia, serif; color: #0e2c4a; }
.rt-mls--v2 .rt-mls-sub .rt-mls-sub__stats { color: #0e2c4a; }
.rt-mls--v2 .rt-mls-sub__name a { text-decoration: none; }
.rt-mls--v2 .rt-mls-sub__name a:hover,
.rt-mls--v2 .rt-mls-sub__name a:focus-visible { text-decoration: underline; }
/* Decoration, so the second declaration gives it an empty accessible name.
   A browser that does not know the alt-text syntax drops that declaration and
   keeps the first, which only costs a spoken chevron. */
.rt-mls--v2 .rt-mls-sub__name a::after { content: "\203A"; content: "\203A" / ""; margin-left: 6px; }

/* Breadcrumbs follow the fact sheet below 1024px and sit above the photo from
   1024px (grid area further down). The polish printer pads them 36px on top
   for the ShowcaseIDX pages, where they close the page; (0,3,0) beats its
   (0,2,1). */
.rt-mls--v2 .rt-mls-hero > .rt-listing-crumbs { padding: 16px 0 0; margin: 0; }

/* ---- thumbnail strip (761px and up; rt-mls-listing.css hides it on phones) */
/* Five across. v1 fixes the tile at 150px tall for its two rows of four; here
   the tile takes the photo's own 3:2 at whatever width five columns leave. */
.rt-mls--v2 .rt-mls-thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 10px 0 0; }
.rt-mls--v2 .rt-mls-thumb img,
.rt-mls--v2 .rt-mls-thumbs__more img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover;
	display: block; border-radius: 4px; }
/* "+N photos" is an ANCHOR to #rt-photos, deliberately NOT a .rt-mls-thumb
   button: rt-mls-listing.js maps thumb index k to frame k, so a sixth "thumb"
   would point at a photo the strip never showed. rt-mls-v2.js routes its click
   through the same #rt-galx check jumpToPhotos() makes. */
.rt-mls--v2 .rt-mls-thumbs__more { position: relative; display: block; line-height: 0; text-decoration: none; }
.rt-mls--v2 .rt-mls-thumbs__n { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	padding: 0 6px; border-radius: 4px; background: rgba(14, 44, 74, .72); color: #fff; text-align: center;
	font: 400 19px/1.2 var(--rt-f-serif), Georgia, serif; }
.rt-mls--v2 .rt-mls-thumbs__more:hover .rt-mls-thumbs__n { background: rgba(14, 44, 74, .86); }
.rt-mls--v2 .rt-mls-thumbs__more:focus-visible { outline: 2px solid #2F5D62; outline-offset: 2px; }

/* ---- the section tabs --------------------------------------------------- */
/* In-flow sticky under the header: it adds no layout shift and needs no
   script. z-index 900 keeps it under the header's 1000 (and the drawer that
   lives inside the header's stacking context) and over the content scrolling
   beneath it. */
.rt-mls--v2 .rt-mls-lower { margin-top: 20px; }
.rt-mls--v2 .rt-mls-tabs { position: sticky; top: var(--rt-v2-hdr); z-index: 900; }
/* The white band runs edge to edge while the links stay on the column. A
   100vw box on the nav itself would shift its content by half a scrollbar on
   desktop; the pseudo-element takes the bleed instead, and the body clip above
   absorbs the part that reaches under the scrollbar. */
.rt-mls--v2 .rt-mls-tabs::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
	left: calc(50% - 50vw); width: 100vw; background: #fff; border-bottom: 1px solid #e2dccd; }
/* position:relative makes the row the offsetParent of its links, which is
   what rt-mls-v2.js reads to bring the active chip into view with scrollLeft.
   Below 1024px the row runs into the 24px gutters so the chips scroll edge to
   edge; that 24px is .rt-citypage__body's padding. */
.rt-mls--v2 .rt-mls-tabs__row { position: relative; display: flex; align-items: stretch; gap: 30px;
	height: var(--rt-v2-tabs); margin: 0 -24px; padding: 0 24px; box-sizing: border-box;
	overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; }
.rt-mls--v2 .rt-mls-tabs__row::-webkit-scrollbar { display: none; }
/* ONE WEIGHT IN EVERY STATE. The mockup set the active tab in 600; a label
   that changes width pushes every tab after it sideways on each section
   change, and those are layout shifts. The active tab changes colour and
   underline only. */
.rt-mls--v2 .rt-mls-tabs a { flex: 0 0 auto; display: flex; align-items: center; box-sizing: border-box;
	padding: 3px 0 0; border-bottom: 3px solid transparent;
	font: 500 15px/1.2 var(--rt-f-sans), system-ui, sans-serif; color: #1a1a1a;
	text-decoration: none; white-space: nowrap; }
.rt-mls--v2 .rt-mls-tabs a:hover { color: #143F77; }
.rt-mls--v2 .rt-mls-tabs a:focus-visible { outline: 2px solid #2F5D62; outline-offset: -2px; }
/* After :hover on purpose: same specificity, so the active state wins it. */
.rt-mls--v2 .rt-mls-tabs a[aria-current="true"] { color: #0e2c4a; border-bottom-color: #0e2c4a; }
.rt-mls--v2 .rt-mls-tabs__s { display: none; }

/* ---- the two columns below the hero ------------------------------------- */
.rt-mls--v2 .rt-mls-cols { padding-top: 24px; }
.rt-mls--v2 .rt-mls-main { min-width: 0; }
/* The tour card is desktop only. Hidden by WIDTH, never by pointer type. */
.rt-mls--v2 .rt-mls-rail { display: none; }
.rt-mls--v2 .rt-mls-rail__card { position: sticky; top: calc(var(--rt-v2-hdr) + var(--rt-v2-tabs) + 20px);
	padding: 22px 24px; background: #fff; border: 1px solid #e2dccd; border-radius: 10px;
	box-shadow: 0 10px 30px rgba(8, 24, 40, .07); }
.rt-mls--v2 .rt-mls-rail__top { display: flex; align-items: center; gap: 14px; }
.rt-mls--v2 .rt-mls-rail__img { flex: 0 0 96px; width: 96px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.rt-mls--v2 .rt-mls-rail__card p { margin: 0; }
.rt-mls--v2 .rt-mls-rail__card .rt-mls-rail__price { font: 400 26px/1.15 var(--rt-f-serif), Georgia, serif; color: #1a1a1a; }
.rt-mls--v2 .rt-mls-rail__card .rt-mls-rail__sum { margin-top: 4px; font: 400 14px/1.4 var(--rt-f-sans), system-ui, sans-serif; color: #3c4450; }
.rt-mls--v2 .rt-mls-rail__card .rt-mls-ctas { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin: 16px 0 0; }
.rt-mls--v2 .rt-mls-rail__card .rt-mls-cta { flex: 0 0 auto; width: 100%; padding: 13px 12px; font-size: 17px; }
.rt-mls--v2 .rt-mls-rail__card .rt-mls-call { margin-top: 12px; }

/* ---- sections ------------------------------------------------------------ */
/* Every jump target clears the header AND the pinned tabs. #rt-photos is in
   the list on purpose: functions.php gives .rt-listing-gallery 96px for the
   ShowcaseIDX pages, which no longer clears 58 + 52 here. (1,1,0) outranks
   that (0,2,1) without touching the shared rule. */
.rt-mls--v2 #rt-mls-oh, .rt-mls--v2 #overview, .rt-mls--v2 #details, .rt-mls--v2 #history,
.rt-mls--v2 #neighborhood, .rt-mls--v2 #schools, .rt-mls--v2 #location, .rt-mls--v2 #open-houses,
.rt-mls--v2 #payment, .rt-mls--v2 #rt-photos, .rt-mls--v2 #rt-mls-similar {
	scroll-margin-top: calc(var(--rt-v2-hdr) + var(--rt-v2-tabs) + var(--rt-v2-gap));
}
/* One rhythm between sections, whatever margin each reused component brought
   from the polish printer at (0,2,1). (0,3,1) is what it takes, and only the
   vertical margins are set, so v1's (0,3,1) horizontal resets on the same
   elements are left alone. The main column's direct children are the sections
   themselves, so the details accordions live inside the #details wrapper; the
   .rt-mls-acc line is a guard that keeps them stacked if one ever lands
   outside it. */
body.rt-mls-v2 .rt-mls--v2 .rt-mls-main > * { margin-top: 36px; margin-bottom: 0; }
body.rt-mls-v2 .rt-mls--v2 .rt-mls-main > :first-child,
body.rt-mls-v2 .rt-mls--v2 .rt-mls-main > * > :first-child { margin-top: 0; }
body.rt-mls-v2 .rt-mls--v2 .rt-mls-main > .rt-mls-acc + .rt-mls-acc { margin-top: 0; }
body.rt-mls-v2 .rt-mls--v2 .rt-listing-gallery,
body.rt-mls-v2 .rt-mls--v2 .rt-listing-area { padding-top: 0; }

/* One heading treatment for every section in the main column, including the
   two reused components whose titles the polish printer sets in ink at 24px. */
.rt-mls--v2 .rt-mls-h2,
body.rt-mls-v2 .rt-mls--v2 .rt-listing-gallery__title,
body.rt-mls-v2 .rt-mls--v2 .rt-listing-area__title { font: 400 22px/1.25 var(--rt-f-serif), Georgia, serif;
	color: #0e2c4a; margin: 0 0 12px; }
.rt-mls--v2 .rt-mls-h3 { font: 400 19px/1.3 var(--rt-f-serif), Georgia, serif; color: #0e2c4a; margin: 24px 0 10px; }
.rt-mls--v2 .rt-mls-ov__copy { margin: 0; font-size: 17px; line-height: 1.7; color: #33404a; }

/* ---- property history and recent-sales tables ---------------------------- */
/* GeneratePress borders every table, th and td, and rh-custom gives every td a
   20px size and its own padding at (0,0,1). Each is reset on the element. */
.rt-mls--v2 .rt-mls-tablewrap { overflow-x: auto; margin: 10px 0 0; }
.rt-mls--v2 .rt-mls-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; border-spacing: 0;
	font: 400 15px/1.45 var(--rt-f-sans), system-ui, sans-serif; color: #202122; }
.rt-mls--v2 .rt-mls-table th { border: 0; border-bottom: 1px solid #d9d4c8; padding: 0 14px 8px 0;
	text-align: left; vertical-align: bottom; white-space: nowrap;
	font: 600 11.5px/1.3 var(--rt-f-sans), system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5a626e; }
.rt-mls--v2 .rt-mls-table td { border: 0; border-bottom: 1px solid #e8e2d3; padding: 10px 14px 10px 0; vertical-align: top;
	font: 400 15px/1.45 var(--rt-f-sans), system-ui, sans-serif; color: #202122; }
.rt-mls--v2 .rt-mls-table th:last-child,
.rt-mls--v2 .rt-mls-table td:last-child { padding-right: 0; }
.rt-mls--v2 .rt-mls-table td:first-child { white-space: nowrap; }
.rt-mls--v2 .rt-mls-hist__none { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: #5a626e; }

/* ---- neighborhood -------------------------------------------------------- */
.rt-mls--v2 .rt-mls-nbhd__blurb { margin: 0; font-size: 17px; line-height: 1.7; color: #33404a; }
/* auto-fit collapses the empty tracks, so a tile dropped for want of data
   leaves no hole. 150px keeps "$19,750,000" inside a tile on a 390px phone. */
.rt-mls--v2 .rt-mls-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0 0; }
.rt-mls--v2 .rt-mls-tile { min-width: 0; padding: 14px 16px; background: #fff; border: 1px solid #e2dccd; border-radius: 8px; }
.rt-mls--v2 .rt-mls-tile__v { display: block; font: 400 22px/1.2 var(--rt-f-serif), Georgia, serif; color: #0e2c4a; overflow-wrap: anywhere; }
.rt-mls--v2 .rt-mls-tile__l { display: block; margin-top: 4px; font: 600 10.5px/1.35 var(--rt-f-sans), system-ui, sans-serif;
	letter-spacing: .08em; text-transform: uppercase; color: #5a626e; }
.rt-mls--v2 .rt-mls-nbhd__cmp { margin: 16px 0 0; font-size: 17px; line-height: 1.65; font-weight: 400; color: #202122; }
.rt-mls--v2 .rt-mls-nbhd__src { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: #5a626e; }
.rt-mls--v2 .rt-mls-nbhd__links { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }

/* ---- schools ------------------------------------------------------------- */
/* The rows are .rt-mls-dl, so they take v1's label | value treatment. */
.rt-mls--v2 .rt-mls-schools { margin: 4px 0 0; }
.rt-mls--v2 .rt-mls-schools__one { margin: 0; font-size: 17px; line-height: 1.65; color: #33404a; }
/* "As listed in the MLS record..." under the Schools H2: small print, the
   .rt-mls-nbhd__src treatment, never the column's 20px paragraph size. */
.rt-mls--v2 .rt-mls-schools__note { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: #5a626e; }
.rt-mls--v2 .rt-mls-schools__guide { margin: 12px 0 0; font-size: 15px; line-height: 1.6; }

/* ---- open houses nearby ------------------------------------------------- */
/* Each session line (p.rt-mls-ohn__when) carries its own data-end; rt-mls-v2.js
   hides an ended session and reveals the next, hides a row only when none of
   its sessions remain, and the section and its tab when no row remains. Nothing here sets
   `display` on the row, the section or the tab links in a way that could beat
   that: rt-mls-listing.css holds `.rt-mls [hidden] { display: none !important }`. */
.rt-mls--v2 .rt-mls-ohn__list { list-style: none; margin: 8px 0 0; padding: 0; }
.rt-mls--v2 .rt-mls-ohn__item { display: flex; align-items: flex-start; gap: 14px; margin: 0; padding: 12px 0;
	border-bottom: 1px solid #e8e2d3; }
.rt-mls--v2 .rt-mls-ohn__img { flex: 0 0 112px; width: 112px; height: 75px; object-fit: cover; border-radius: 5px;
	display: block; background: #d9d4c8; }
.rt-mls--v2 .rt-mls-ohn__body { min-width: 0; }
.rt-mls--v2 .rt-mls-ohn__body p { margin: 0; font-size: 14px; line-height: 1.45; color: #5a626e; }
.rt-mls--v2 .rt-mls-ohn__body p + p { margin-top: 2px; }
.rt-mls--v2 .rt-mls-ohn__body .rt-mls-ohn__when { font: 700 13px/1.4 var(--rt-f-sans), system-ui, sans-serif;
	letter-spacing: .05em; text-transform: uppercase; color: #2F5D62; }
.rt-mls--v2 .rt-mls-ohn__body .rt-mls-ohn__street { font-size: 16px; color: #0e2c4a; }
.rt-mls--v2 .rt-mls-ohn__street a { color: #0e2c4a; font-weight: 500; text-decoration: none; }
.rt-mls--v2 .rt-mls-ohn__street a:hover,
.rt-mls--v2 .rt-mls-ohn__street a:focus-visible { text-decoration: underline; }
.rt-mls--v2 .rt-mls-ohn__more { margin: 14px 0 0; font-size: 15px; line-height: 1.6; }

/* Plain text links inside the new sections read as links on the ivory band. */
.rt-mls--v2 .rt-mls-nbhd__links a,
.rt-mls--v2 .rt-mls-schools__guide a,
.rt-mls--v2 .rt-mls-ohn__more a { color: #143F77; text-decoration: underline; text-underline-offset: 2px; }

/* ---- similar homes ------------------------------------------------------ */
/* Seven cards, unchanged markup. SCOPED to this section on purpose: the
   .rt-ww card grid is shared by the hotsheets, the homepage feed, the browse
   pages and the White Water page, and a bare .rt-ww__grid rule would change
   every one of them. The shared grid is 4-up from 1025px, which squeezes a
   card under 200px in the main track, so the column counts are set in the
   1024 and 1368 blocks below (spec 5.11). */

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 760px) {
	/* The tabs become chips. Same links, same order; the short labels
	   ("History") replace the long ones. */
	.rt-mls--v2 .rt-mls-tabs__row { align-items: center; gap: 8px; }
	.rt-mls--v2 .rt-mls-tabs a { padding: 6px 12px; border: 1px solid #c5d3da; border-radius: 999px;
		font: 400 14px/1.3 var(--rt-f-sans), system-ui, sans-serif; color: #0e2c4a; }
	.rt-mls--v2 .rt-mls-tabs a[aria-current="true"] { background: #0e2c4a; border-color: #0e2c4a; color: #fff; }
	.rt-mls--v2 .rt-mls-tabs__l { display: none; }
	.rt-mls--v2 .rt-mls-tabs__s { display: inline; }
	/* D13: the history and recent-sales tables stack as label/value rows,
	   every column kept, each label printed from the cell's data-label, so no
	   table scrolls sideways. */
	.rt-mls--v2 .rt-mls-table { display: block; }
	.rt-mls--v2 .rt-mls-table thead { display: none; }
	.rt-mls--v2 .rt-mls-table tbody { display: block; }
	.rt-mls--v2 .rt-mls-table tr { display: block; border-bottom: 1px solid #e8e2d3; padding: 8px 0; }
	.rt-mls--v2 .rt-mls-table td { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
		border: 0; padding: 4px 0; font-size: 14px; text-align: right; white-space: normal; }
	.rt-mls--v2 .rt-mls-table td::before { content: attr(data-label); flex: 0 0 auto; text-align: left;
		font: 600 11.5px/1.3 var(--rt-f-sans), system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #5a626e; }
	.rt-mls--v2 .rt-mls-ohn__img { flex-basis: 84px; width: 84px; height: 56px; }
	/* SIMILAR HOMES AS A SIDEWAYS ROW: all seven anchors stay in the HTML, the
	   row snaps one card at a time, and it takes back about 2,600px of phone
	   scroll. It runs into the 24px gutters so the cards scroll edge to edge.
	   pan-x pan-y pinch-zoom (spec 5.11), NOT the hero's pan-x pinch-zoom:
	   this row sits mid page, and pan-y keeps a vertical drag on it scrolling
	   the page. */
	.rt-mls--v2 .rt-mls-similar .rt-ww__grid { display: flex; gap: 14px; margin: 0 -24px; padding: 6px 24px 16px;
		overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 24px;
		overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; scrollbar-width: none; }
	.rt-mls--v2 .rt-mls-similar .rt-ww__grid::-webkit-scrollbar { display: none; }
	.rt-mls--v2 .rt-mls-similar .rt-ww__card { flex: 0 0 min(300px, 82%); scroll-snap-align: start; }
}
@media (min-width: 761px) {
	.rt-mls--v2 .rt-mls-h2,
	body.rt-mls-v2 .rt-mls--v2 .rt-listing-gallery__title,
	body.rt-mls-v2 .rt-mls--v2 .rt-listing-area__title { font-size: 26px; }
	.rt-mls--v2 .rt-mls-tile__v { font-size: 26px; }
	.rt-mls--v2 .rt-mls-gallery__stage { border-radius: 8px; }
	body.rt-mls-v2 .rt-mls--v2 .rt-mls-main > * { margin-top: 44px; }
}
@media (min-width: 1024px) {
	.rt-mls--v2 { --rt-v2-hdr: 68px; --rt-v2-tabs: 56px; }
	.rt-mls--v2 .rt-mls-wrap { padding-top: 16px; }

	/* The hero and the columns below it share ONE track rule, so the photo
	   column and the main column are always the same width, and the fact sheet
	   lines up with the tour card that replaces it on scroll. */
	.rt-mls--v2 .rt-mls-hero, .rt-mls--v2 .rt-mls-cols { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: 28px; }
	.rt-mls--v2 .rt-mls-hero { grid-template-areas: "crumbs crumbs" "media facts"; row-gap: 12px; align-items: start; }
	.rt-mls--v2 .rt-mls-hero > .rt-mls-gallery { grid-area: media; }
	.rt-mls--v2 .rt-mls-hero > .rt-mls-facts { grid-area: facts; }
	.rt-mls--v2 .rt-mls-hero > .rt-listing-crumbs { grid-area: crumbs; padding: 0; }
	/* No photos: the fact sheet takes the whole hero. (0,3,0), so it holds
	   against the (0,2,0) track rules in this block and the 1280 one. */
	.rt-mls--v2 .rt-mls-hero.rt-mls-hero--nophoto { grid-template-columns: minmax(0, 1fr); grid-template-areas: "crumbs" "facts"; }

	.rt-mls--v2 .rt-mls-facts { margin: 0; padding: 26px 28px; background: #fff; border: 1px solid #e2dccd;
		border-radius: 10px; box-shadow: 0 10px 30px rgba(8, 24, 40, .07); }
	.rt-mls--v2 .rt-mls-facts > .rt-mls-priceline { order: 0; margin-top: 10px; }
	.rt-mls--v2 .rt-mls-facts > .rt-mls-meta { order: -1; margin: 0 !important; }
	.rt-mls--v2 .rt-mls-h1 { font: 400 clamp(24px, 2.1vw, 29px)/1.2 var(--rt-f-serif), Georgia, serif; margin: 12px 0 0; }
	.rt-mls--v2 .rt-mls-price { font-size: clamp(30px, 2.8vw, 38px); }
	.rt-mls--v2 .rt-mls-fgrid { gap: 14px 8px; margin-top: 16px; padding-top: 14px; }
	.rt-mls--v2 .rt-mls-fgrid dd { font-size: clamp(17px, 1.5vw, 21px); }
	.rt-mls--v2 .rt-mls-facts .rt-mls-ctas { gap: 10px; margin-top: 16px; }
	.rt-mls--v2 .rt-mls-facts .rt-mls-cta { flex: 1 1 0; min-width: 0; padding: 13px 10px; font-size: 17px; }
	.rt-mls--v2 .rt-mls-sub { background: #F7F4EF; border-color: #F7F4EF; }

	.rt-mls--v2 .rt-mls-lower { margin-top: 28px; }
	.rt-mls--v2 .rt-mls-tabs__row { margin: 0; padding: 0; }
	.rt-mls--v2 .rt-mls-cols { padding-top: 28px; }
	.rt-mls--v2 .rt-mls-rail { display: block; min-width: 0; }

	/* D7: the pinned tour card carries the same actions, so the floating
	   "Let's talk" pill would be a second CTA in the same corner. */
	body.rt-mls-v2 .rt-talk { display: none; }

	.rt-mls--v2 .rt-mls-similar .rt-ww__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
	.rt-mls--v2 .rt-mls-hero, .rt-mls--v2 .rt-mls-cols { grid-template-columns: minmax(0, 1fr) 452px; }
}
@media (min-width: 1368px) {
	.rt-mls--v2 .rt-mls-similar .rt-ww__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}