/* =====================================================================
   MLS single-listing page  -  portal layout (Zillow / Realtor.ca / HouseSigma)
   ---------------------------------------------------------------------
   Everything is scoped under .mlsp so it cannot leak into the theme.
   The only two exceptions are .mlsp-sticky and .mlsp-uiswitch, which are
   position:fixed and therefore live at body level.

   Palette/typography come exclusively from the condoy-design-system.css
   :root tokens. Every var() carries a fallback because ten [data-theme]
   palettes remap the same token names - never hard-code the brand colours.

   CTA rule enforced throughout: ONE gold button per viewport.
     desktop  -> .mlsp-btn.primary in the sticky summary rail
     mobile   -> the last .mlsp-sticky-btn (Book Tour) in the bottom bar
   Everything else is ghost/outline/text.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Shell
   --------------------------------------------------------------------- */

/* Bootstrap sets box-sizing globally, but this component must stand on
   its own tokens only - so it declares its own box model. */
.mlsp,
.mlsp *,
.mlsp *::before,
.mlsp *::after,
.mlsp-sticky,
.mlsp-sticky *,
.mlsp-uiswitch,
.mlsp-uiswitch *{
    box-sizing:border-box;
}

.mlsp{
    max-width:none;                       /* full-bleed on large screens; the cap looked stranded */
    margin:0 auto;
    padding:18px clamp(16px,3vw,56px) 48px;
    /* Page-level guard against sideways scroll on mobile: if any deferred child (a loaded map,
       WalkScore tile, wide image, etc.) is briefly wider than the screen it can't make the whole
       page scroll right. `clip` (not `hidden`) never creates a scroll container, so it doesn't break
       the internal scrollers (.mlsp-rail, .mlsp-tablewrap) or the desktop sticky summary. The fixed
       action bar / switcher are viewport-positioned and unaffected. */
    overflow-x:clip;
    font-family:var(--font-body,'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif);
    color:var(--ink,#151a21);
    line-height:1.6;
}
/* Belt-and-suspenders: no image or embedded frame in the listing may exceed its column, so nothing
   pops the layout wider the moment it finishes loading. */
.mlsp img, .mlsp iframe{ max-width:100%; }
/* Root-level guard. This stylesheet is enqueued ONLY on the listing page, so constraining <html>
   here cannot touch any other page. The theme's global chrome uses Bootstrap rows (negative
   margins) inside a `.container-fluid.px-0` with no compensating padding, which overflows ~30px and
   made the whole page scroll sideways - pushing the right-hand content padding off the mobile
   screen. Use overflow-x:hidden, NOT clip: only `hidden` propagates to the viewport and actually
   caps the scrollable width; `overflow:clip` on the root is ignored for viewport propagation, which
   is why it didn't take. Vertical scroll and every fixed element keep working. */
@media (max-width:900px){ html{ overflow-x:hidden; } }

/* Breadcrumbs - separators are expected in the markup, not injected here,
   so a server-rendered trail with its own dividers is not doubled up. */
.mlsp-crumbs{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
    margin:2px 0 14px;
    font-size:13px;
    line-height:1.4;
    color:var(--ink-soft,#5a6472);
}
.mlsp-crumbs a{
    color:var(--ink-soft,#5a6472);
    text-decoration:none;
    transition:color var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-crumbs a:hover{color:var(--gold-deep,#e0a800);}
/* last crumb marked with aria-current reads as the current page */
.mlsp-crumbs [aria-current]{color:var(--ink,#151a21);font-weight:600;}

.mlsp-section{
    background:var(--surface,#fff);
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius,14px);
    box-shadow:var(--shadow-sm,0 1px 3px rgba(16,26,42,.06));
    padding:22px 24px;
    margin-top:18px;
}

/* Section heading: mirrors .titr-list h3::after in the design system so
   the page reads as native (56x3 gold rule under the text). */
.mlsp-h2{
    position:relative;
    margin:0 0 16px;
    padding-bottom:12px;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-weight:800;
    font-size:19px;
    line-height:1.25;
    letter-spacing:-.01em;
    color:var(--ink,#151a21);
}
.mlsp-h2::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:56px;
    height:3px;
    border-radius:3px;
    background:var(--gold,#fec20f);
}

/* MLS®/REALTOR® trademark + IDX accuracy notice - legally required, but
   must never compete with the listing content for attention. */
.mlsp-disclaimer{
    margin-top:20px;
    padding-top:14px;
    border-top:1px solid var(--line,#e7ebf0);
    font-size:11.5px;
    line-height:1.65;
    color:var(--ink-soft,#5a6472);
}


/* ---------------------------------------------------------------------
   2. Hero (gallery + summary rail)
   --------------------------------------------------------------------- */

.mlsp-hero{
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
    gap:24px;
    align-items:start;
}
/* Grid items must be allowed to shrink to their column - the same thing the New view does with
   .mlsc-col{min-width:0}. Without it, .mlsp-summary's min-content pushed the single-column mobile
   track wider than the .mlsp content box, so the hero (image + summary card) spilled past the right
   padding and got clipped at the edge, while the sections below (in their own .mlsp-section padding)
   stayed correct. minmax(0,…) columns + min-width:0 items keep the hero exactly the content width. */
.mlsp-hero > *{ min-width:0; }


/* ---------------------------------------------------------------------
   3. Gallery mosaic
   --------------------------------------------------------------------- */

/* 5 tiles: g0 spans both rows on the left, g1-g4 fill a 2x2 on the right. */
.mlsp-gallery{
    position:relative;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:8px;
    height:460px;
    border-radius:var(--radius,14px);
    overflow:hidden;
    background:var(--surface-2,#f5f7fa);
}
.mlsp-g{
    position:relative;
    overflow:hidden;
    background:var(--surface-2,#f5f7fa);
    cursor:pointer;
}
/* Tiles hold a real <img> (not a background) so the browser can lazy-load,
   srcset and alt them - the img must simply fill its tile. */
.mlsp-g img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s var(--ease,.22s cubic-bezier(.4,0,.2,1)),filter var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-g:hover img{transform:scale(1.04);filter:brightness(.94);}
.mlsp-g0{grid-row:1 / 3;}
.mlsp-g1{grid-column:2;grid-row:1;}
.mlsp-g2{grid-column:3;grid-row:1;}
.mlsp-g3{grid-column:2;grid-row:2;}
.mlsp-g4{grid-column:3;grid-row:2;}

/* Fewer than 3 photos: drop the mosaic entirely and let 1-2 tiles share
   the width, so a single photo is never stretched into 5 slots. */
.mlsp-gallery.few{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    grid-template-rows:1fr;
    height:380px;
}
.mlsp-gallery.few .mlsp-g0,
.mlsp-gallery.few .mlsp-g1,
.mlsp-gallery.few .mlsp-g2,
.mlsp-gallery.few .mlsp-g3,
.mlsp-gallery.few .mlsp-g4{grid-row:auto;grid-column:auto;}

/* "+N photos" scrim, centred on the last tile - the floating button sits
   in the corner, so the two never collide. */
.mlsp-more{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(15,30,48,.52);
    color:#fff;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-weight:700;
    font-size:17px;
    letter-spacing:.01em;
    pointer-events:none;
}

.mlsp-gallery-btn{
    position:absolute;
    right:14px;
    bottom:14px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:38px;
    padding:0 16px;
    border:1px solid rgba(21,26,33,.12);
    border-radius:999px;
    background:#fff;
    color:var(--ink,#151a21);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-weight:700;
    font-size:13.5px;
    text-decoration:none;
    cursor:pointer;
    box-shadow:0 4px 14px rgba(0,0,0,.22);
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1)),transform var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-gallery-btn:hover{background:var(--gold,#fec20f);color:#151a21;transform:translateY(-1px);}


/* ---------------------------------------------------------------------
   4. Summary rail
   --------------------------------------------------------------------- */

/* top:90px clears the theme's sticky desktop nav (#sticker .wrap-nav). */
.mlsp-summary{
    position:sticky;
    top:90px;
    background:var(--surface,#fff);
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius,14px);
    box-shadow:var(--shadow-sm,0 1px 3px rgba(16,26,42,.06));
    padding:20px;
}

.mlsp-badges{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:10px;
}
/* Tinted chips, not saturated fills - solid red/violet blocks would out-shout
   the price and the primary CTA. Text is the darkened hue for AA contrast. */
.mlsp-badge{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border-radius:999px;
    background:var(--surface-2,#f5f7fa);
    color:var(--ink-soft,#5a6472);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:11px;
    font-weight:700;
    letter-spacing:.03em;
    text-transform:uppercase;
    line-height:1.5;
    white-space:nowrap;
}
.mlsp-badge.sold{background:#fee2e2;color:#b42318;}
.mlsp-badge.leased{background:#ede9fe;color:#6d28d9;}
.mlsp-badge.reduced{background:#fef3c7;color:#92400e;}
.mlsp-badge.oh{background:#d1fae5;color:#047857;}
.mlsp-badge.new{background:#e0f2fe;color:#075985;}

/* flex+baseline so a struck-through original price sits beside the headline
   when it is nested inside .mlsp-price */
.mlsp-price{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 10px;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-weight:800;
    font-size:34px;
    line-height:1.05;
    letter-spacing:-.02em;
    color:var(--ink,#151a21);
}
/* inline-block so it also works as a plain sibling of .mlsp-price */
.mlsp-price-orig{
    display:inline-block;
    color:var(--ink-soft,#5a6472);
    font-family:var(--font-body,'Inter',sans-serif);
    font-size:15px;
    font-weight:600;
    letter-spacing:0;
    text-decoration:line-through;
}
.mlsp-price-sub{
    margin-top:5px;
    font-size:13.5px;
    line-height:1.45;
    color:var(--ink-soft,#5a6472);
}

.mlsp-addr{
    margin-top:12px;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:18px;
    font-weight:600;
    line-height:1.35;
    color:var(--ink,#151a21);
}
.mlsp-addr-sub{
    margin-top:2px;
    font-size:14px;
    color:var(--ink-soft,#5a6472);
}

.mlsp-stats{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
    margin:16px 0;
}
.mlsp-stat{
    min-width:0;
    padding:10px 4px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface-2,#f5f7fa);
    text-align:center;
}
.mlsp-stat-v{
    display:block;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:19px;
    font-weight:700;
    line-height:1.2;
    color:var(--ink,#151a21);
    overflow:hidden;
    text-overflow:ellipsis;
}
.mlsp-stat-k{
    display:block;
    margin-top:2px;
    font-size:11px;
    font-weight:600;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink-soft,#5a6472);
}

.mlsp-mls-line{
    margin-top:12px;
    font-size:11.5px;
    line-height:1.55;
    color:var(--ink-soft,#5a6472);
    text-align:center;
}


/* ---------------------------------------------------------------------
   5. Buttons
   --------------------------------------------------------------------- */

.mlsp-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:0 18px;
    border:1px solid transparent;
    border-radius:var(--radius-sm,9px);
    background:transparent;
    color:var(--ink,#151a21);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:15px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1)),border-color var(--ease,.22s cubic-bezier(.4,0,.2,1)),transform var(--ease,.22s cubic-bezier(.4,0,.2,1)),box-shadow var(--ease,.22s cubic-bezier(.4,0,.2,1));
}

/* Matches .btn-primary in condoy-design-system.css (gold fill, 2px ink
   border, gold glow) so the one CTA on this page feels theme-native. */
.mlsp-btn.primary{
    background:var(--gold,#fec20f);
    color:#151a21;
    border:2px solid #151a21;
    font-weight:700;
    box-shadow:0 4px 14px rgba(254,194,15,.34);
}
.mlsp-btn.primary:hover{
    background:#151a21;
    color:var(--gold,#fec20f);
    transform:translateY(-2px);
    box-shadow:var(--shadow-lg,0 16px 44px rgba(16,26,42,.14));
}

.mlsp-btn.ghost{
    background:transparent;
    border:1px solid var(--line,#e7ebf0);
    color:var(--ink,#151a21);
}
.mlsp-btn.ghost:hover{
    border-color:var(--gold,#fec20f);
    color:var(--gold-deep,#e0a800);
    background:var(--surface-2,#f5f7fa);
}

.mlsp-btn.wide{width:100%;}

.mlsp-cta-stack{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-top:16px;
}
/* buttons inside the rail are always full-bleed (contract) */
.mlsp-cta-stack .mlsp-btn,
.mlsp-summary .mlsp-btn{width:100%;}


/* ---------------------------------------------------------------------
   6. Tour date chips
   --------------------------------------------------------------------- */

.mlsp-daychips{
    display:flex;
    gap:8px;
    margin:14px 0 4px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;              /* the chips are self-evidently swipeable */
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}
.mlsp-daychips::-webkit-scrollbar{display:none;}

.mlsp-daychip{
    flex:0 0 64px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    min-height:54px;
    padding:6px 4px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface,#fff);
    color:var(--ink,#151a21);
    cursor:pointer;
    line-height:1.2;
    transition:border-color var(--ease,.22s cubic-bezier(.4,0,.2,1)),background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
/* two lines: weekday over date - targeted positionally so the markup can
   use spans, divs or <small> without new class names */
.mlsp-daychip > *:first-child{
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink-soft,#5a6472);
}
.mlsp-daychip > *:last-child{
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:15px;
    font-weight:700;
    color:inherit;
}
.mlsp-daychip:hover{border-color:var(--gold,#fec20f);}
.mlsp-daychip.active{
    background:var(--gold,#fec20f);
    border-color:var(--gold,#fec20f);
    color:#151a21;
}
.mlsp-daychip.active > *:first-child{color:#151a21;}


/* ---------------------------------------------------------------------
   7. Agent trust block
   --------------------------------------------------------------------- */

.mlsp-agent{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:16px;
    padding:12px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface-2,#f5f7fa);
}
.mlsp-agent-pic{
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:50%;
    overflow:hidden;
    object-fit:cover;
    background:var(--line,#e7ebf0);
}
/* The class sits on the <img> ITSELF, so `.mlsp-agent-pic img` never matched and the cover above
   kept cropping. A brokerage wordmark in a circle renders as a sliver of letters - contain it in a
   rounded tile instead. Declared after, so these win. */
.mlsp-agent-pic{
    flex:0 0 auto;
    width:58px;
    height:44px;
    padding:5px 7px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:#fff;
    object-fit:contain;
}
.mlsp-agent-info{
    flex:1 1 auto;
    min-width:0;
    font-size:13.5px;
    line-height:1.45;
    color:var(--ink-soft,#5a6472);
}
.mlsp-agent-info strong,
.mlsp-agent-info b{
    display:block;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:14.5px;
    font-weight:700;
    color:var(--ink,#151a21);
}
.mlsp-agent-stars{
    color:var(--gold,#fec20f);
    font-size:12px;
    letter-spacing:1.5px;
    line-height:1.4;
}


/* ---------------------------------------------------------------------
   8. Micro-CTAs (save / share / print - deliberately low-contrast)
   --------------------------------------------------------------------- */

.mlsp-microcta{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:14px;
    padding-top:12px;
    border-top:1px solid var(--line,#e7ebf0);
}
.mlsp-micro{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:40px;
    padding:0 10px;
    border:0;
    border-radius:var(--radius-sm,9px);
    background:transparent;
    color:var(--ink-soft,#5a6472);
    font-family:var(--font-body,'Inter',sans-serif);
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-micro:hover{background:var(--surface-2,#f5f7fa);color:var(--gold-deep,#e0a800);}
.mlsp-micro svg,
.mlsp-micro i{font-size:15px;width:15px;height:15px;flex:0 0 auto;}
/* saved / favourited - the only gold permitted outside the primary CTA,
   and only because it is a state, not an invitation */
.mlsp-micro.active{
    background:rgba(254,194,15,.16);
    color:var(--gold-deep,#e0a800);
}


/* ---------------------------------------------------------------------
   9. Open house callout
   --------------------------------------------------------------------- */

/* No green token exists in the design system, so the success hue is a
   literal - kept identical to .mlsp-badge.oh for consistency. */
.mlsp-oh{
    margin-top:16px;
    padding:14px 16px;
    border:1px solid #a7f3d0;
    border-left:3px solid #10b981;
    border-radius:var(--radius-sm,9px);
    background:#ecfdf5;
    font-size:14px;
    line-height:1.55;
    color:#065f46;
}
.mlsp-oh-item{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:4px 10px;
}
.mlsp-oh-item + .mlsp-oh-item{
    margin-top:8px;
    padding-top:8px;
    border-top:1px dashed rgba(6,95,70,.25);
}
.mlsp-oh-item strong,
.mlsp-oh-item b{color:#047857;font-weight:700;}


/* ---------------------------------------------------------------------
   10. Content blocks
   --------------------------------------------------------------------- */

/* MLS remarks arrive as plain text with real newlines -> pre-line.
   Full width of its own section box on desktop. */
.mlsp-desc{
    font-size:16px;
    line-height:1.7;
    color:var(--ink,#151a21);
    white-space:pre-line;
}

/* Anchor jumps must clear the fixed theme header (~88px) - and on the views
   with their own floating bar (New/Inspire) also that bar (~+56px). */
.mlsp .mlsp-section{ scroll-margin-top:110px; }
.mlsc .mlsp-section{ scroll-margin-top:160px; }
/* Inspire (precon) anchor targets used by its floating bar. */
.mlsx #mlsx-overview, .mlsx #mlsx-details, .mlsx #mlsx-location,
.mlsx #mlsp-nb, .mlsx #mlsp-similar{ scroll-margin-top:150px; }

/* Agent-only panel (PrivateRemarks / showing instructions), visible only to
   the agent and administrator roles - visually unmistakable as internal. */
.mlsp-agentonly{
    border:1px dashed #d3a11a;
    background:#fffaf0;
    border-radius:12px;
    padding:16px 18px;
    margin:24px 0;
}
.mlsp-agentonly h2{
    display:flex; align-items:center; gap:8px;
    font-size:15px; font-weight:800; margin:0 0 8px; color:#8a6207;
    text-transform:uppercase; letter-spacing:.04em;
}
.mlsp-agentonly .mlsp-ao-tag{
    font-size:10.5px; background:#d3a11a; color:#fff; border-radius:999px;
    padding:2px 8px; letter-spacing:.05em;
}
.mlsp-agentonly p{ margin:0 0 8px; font-size:14.5px; line-height:1.65; color:#151a21; white-space:pre-line; }
.mlsp-agentonly p:last-child{ margin-bottom:0; }
.mlsp-agentonly b{ color:#8a6207; }
/* collapsed to ~9 lines (9 x 1.7em) with a fade instead of a hard cut */
.mlsp-desc.clamped{
    max-height:15.3em;
    overflow:hidden;
    -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 70%,transparent 100%);
}
.mlsp-desc-toggle{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:40px;
    margin-top:4px;
    padding:0;
    border:0;
    background:none;
    color:var(--gold-deep,#e0a800);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:14px;
    font-weight:700;
    cursor:pointer;
}
.mlsp-desc-toggle:hover{text-decoration:underline;}

/* Explicit column counts, capped at 4. auto-fill was fine while the page was
   capped at 1240px, but full-bleed it opened to 7-8 columns and the label ended
   up nowhere near its value. Readability beats filling the width. */
.mlsp-dgrid{
    display:grid;
    grid-template-columns:repeat(1,minmax(0,1fr));
    gap:10px;
}
@media (min-width:620px){  .mlsp-dgrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .mlsp-dgrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1500px){ .mlsp-dgrid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.mlsp-ditem{
    display:flex;
    align-items:flex-start;
    gap:11px;
    padding:11px 13px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface,#fff);
}
/* Icon sits in a soft tile so the row has an anchor to scan down. */
.mlsp-di-ico{
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;width:30px;height:30px;
    border-radius:8px;
    background:var(--surface-2,#f5f7fa);
    color:var(--ink-soft,#5a6472);
}
.mlsp-di-ico .mlsp-ico{width:17px;height:17px;}
.mlsp-di-txt{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mlsp-k{
    font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    color:var(--ink-soft,#5a6472);
}
.mlsp-v{
    font-size:14.5px;font-weight:600;
    color:var(--ink,#151a21);
    overflow-wrap:break-word;       /* long MLS strings must not blow the grid, but never mid-word */
}

/* Group heading inside Property details - had no styles at all, so it fell
   through to the theme's h3 and rendered as a page-sized title. */
.mlsp-h3{
    display:flex;align-items:center;gap:8px;
    margin:26px 0 12px;
    font-family:var(--font-head,'Sora',sans-serif);
    font-size:15px;font-weight:800;letter-spacing:-.01em;
    color:var(--ink,#151a21);
}
.mlsp-h3:first-child{margin-top:0;}
.mlsp-h3 .mlsp-ico{width:16px;height:16px;color:var(--gold-deep,#e0a800);}
.mlsp-h3::after{
    content:"";flex:1 1 auto;height:1px;margin-left:4px;
    background:var(--line,#e7ebf0);
}

/* Room table. The wrapper is the scroll container on both axes; the
   max-height only engages on genuinely long tables, and that is what
   makes the sticky <thead> meaningful rather than decorative. */
.mlsp-tablewrap{
    max-height:min(70vh,560px);
    overflow:auto;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    -webkit-overflow-scrolling:touch;
}
.mlsp-table{
    width:100%;
    min-width:560px;                /* forces horizontal scroll instead of crushing columns */
    border-collapse:collapse;
    font-size:14px;
}
.mlsp-table th{
    position:sticky;
    top:0;
    z-index:2;
    padding:10px 14px;
    background:var(--surface-2,#f5f7fa);
    border-bottom:2px solid var(--line,#e7ebf0);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:12px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    text-align:left;
    white-space:nowrap;
    color:var(--ink,#151a21);
}
.mlsp-table td{
    padding:10px 14px;
    border-bottom:1px solid var(--line,#e7ebf0);
    vertical-align:middle;
    color:var(--ink,#151a21);
}
.mlsp-table tbody tr:nth-child(even){background:var(--surface-2,#f5f7fa);}
.mlsp-table tbody tr{transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1));}
.mlsp-table tbody tr:hover{background:rgba(254,194,15,.10);}
.mlsp-table tbody tr:last-child td{border-bottom:0;}

.mlsp-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.mlsp-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 13px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:999px;
    background:var(--surface-2,#f5f7fa);
    font-size:13px;
    line-height:1.5;
    color:var(--ink,#151a21);
}


/* ---------------------------------------------------------------------
   11. Map
   --------------------------------------------------------------------- */

.mlsp-map{
    position:relative;
    /* NOT aspect-ratio: on a full-bleed page 16/9 made this ~1080px tall at 1920px wide.
       A map only needs enough height to give the pin context. */
    height:clamp(260px,34vh,420px);
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius,14px);
    overflow:hidden;
    background:var(--surface-2,#f5f7fa);
}
/* whatever is dropped in (iframe / canvas / div) fills the frame */
.mlsp-map > *{
    display:block;
    width:100%;
    height:100%;
    border:0;
}


/* ---------------------------------------------------------------------
   12. Mortgage calculator
   --------------------------------------------------------------------- */

.mlsp-calc{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:22px;
    align-items:start;
}
.mlsp-calc-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:14px 16px;
}
.mlsp-field{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}
.mlsp-field > label,
.mlsp-field > span:first-child{
    font-size:12px;
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--ink-soft,#5a6472);
}
.mlsp-field input:not([type=range]),
.mlsp-field select{
    width:100%;
    min-height:42px;
    padding:0 12px;
    border:1.5px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface,#fff);
    color:var(--ink,#151a21);
    font-family:var(--font-body,'Inter',sans-serif);
    font-size:15px;
    transition:border-color var(--ease,.22s cubic-bezier(.4,0,.2,1)),box-shadow var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-field input:not([type=range]):focus,
.mlsp-field select:focus{
    border-color:var(--gold,#fec20f);
    box-shadow:0 0 0 3px rgba(254,194,15,.22);
    outline:none;
}
/* A locked email for a signed-in lead: readable but visibly not-editable. */
.mlsp-field input[readonly]{
    background:var(--surface-2,#f4f6f9);
    color:var(--ink-soft,#5a6472);
    cursor:not-allowed;
}
.mlsp-hint{
    margin-top:2px;
    font-size:12px;
    font-weight:400;
    text-transform:none;
    letter-spacing:0;
    color:var(--ink-soft,#5a6472);
}

/* Range input: appearance must be reset per-engine, and the WebKit thumb
   needs a negative margin to centre on a 6px track. */
.mlsp-range{
    -webkit-appearance:none;
    appearance:none;
    width:100%;
    height:6px;
    margin:10px 0;
    padding:0;
    border:0;
    border-radius:999px;
    background:var(--line,#e7ebf0);
    cursor:pointer;
}
.mlsp-range::-webkit-slider-runnable-track{
    height:6px;
    border-radius:999px;
    background:var(--line,#e7ebf0);
}
.mlsp-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    appearance:none;
    width:20px;
    height:20px;
    margin-top:-7px;
    border:2px solid #151a21;
    border-radius:50%;
    background:var(--gold,#fec20f);
    box-shadow:0 2px 6px rgba(16,26,42,.25);
    cursor:pointer;
}
.mlsp-range::-moz-range-track{
    height:6px;
    border-radius:999px;
    background:var(--line,#e7ebf0);
}
.mlsp-range::-moz-range-thumb{
    width:18px;
    height:18px;
    border:2px solid #151a21;
    border-radius:50%;
    background:var(--gold,#fec20f);
    box-shadow:0 2px 6px rgba(16,26,42,.25);
    cursor:pointer;
}

.mlsp-calc-out{
    padding:20px;
    border-radius:var(--radius,14px);
    background:var(--navy,#0f1e30);
    color:#fff;
}
.mlsp-payment{
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:40px;
    font-weight:800;
    line-height:1.05;
    letter-spacing:-.02em;
    color:#fff;
}
.mlsp-payment small{
    font-size:14px;
    font-weight:600;
    color:rgba(255,255,255,.66);
    letter-spacing:0;
}
.mlsp-breakdown{
    margin-top:14px;
    border-top:1px solid rgba(255,255,255,.16);
}
.mlsp-breakdown-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
    font-size:13.5px;
    color:rgba(255,255,255,.74);
}
.mlsp-breakdown-row:last-child{border-bottom:0;}
.mlsp-breakdown-row > *:last-child{color:#fff;font-weight:600;}

/* Gold is allowed here because the summary rail's gold CTA is far out of
   view by the time this panel is on screen (see the 900px block, where it
   steps down to an outline so the sticky bar keeps the only gold). */
.mlsp-calc-cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:46px;
    margin-top:16px;
    padding:0 18px;
    border:2px solid #151a21;
    border-radius:var(--radius-sm,9px);
    background:var(--gold,#fec20f);
    color:#151a21;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:15px;
    font-weight:700;
    text-decoration:none;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1)),transform var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-calc-cta:hover{background:#fff;color:#151a21;transform:translateY(-2px);}


/* ---------------------------------------------------------------------
   13. Similar listings rail
   --------------------------------------------------------------------- */

.mlsp-railhead{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:12px;
}
.mlsp-railbtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:50%;
    background:var(--surface,#fff);
    color:var(--ink,#151a21);
    font-size:16px;
    line-height:1;
    cursor:pointer;
    transition:border-color var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1)),background var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-railbtn:hover{border-color:var(--gold,#fec20f);color:var(--gold-deep,#e0a800);}
.mlsp-railbtn + .mlsp-railbtn{margin-left:8px;}
.mlsp-railbtn[disabled]{opacity:.4;cursor:default;}

/* scrollbar hidden: the arrow buttons and snap points are the affordance */
.mlsp-rail{
    display:flex;
    gap:14px;
    overflow-x:auto;
    padding-bottom:6px;
    scroll-snap-type:x mandatory;
    scroll-padding-left:2px;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}
.mlsp-rail::-webkit-scrollbar{display:none;}

.mlsp-card{
    flex:0 0 250px;
    scroll-snap-align:start;
    display:block;
    background:var(--surface,#fff);
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius,14px);
    box-shadow:var(--shadow-sm,0 1px 3px rgba(16,26,42,.06));
    overflow:hidden;
    color:inherit;
    text-decoration:none;
    transition:transform var(--ease,.22s cubic-bezier(.4,0,.2,1)),box-shadow var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-card:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow,0 6px 20px rgba(16,26,42,.08));
}
.mlsp-card-img{
    position:relative;
    aspect-ratio:16 / 10;
    overflow:hidden;
    background:var(--surface-2,#f5f7fa);
}
.mlsp-card-img img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform .45s var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-card:hover .mlsp-card-img img{transform:scale(1.05);}
/* padding is carried per-element (not by a body wrapper) so the card works
   with or without an inner container div */
.mlsp-card-price{
    padding:11px 13px 0;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:17px;
    font-weight:700;
    line-height:1.2;
    color:var(--ink,#151a21);
}
.mlsp-card-meta{
    padding:3px 13px 0;
    font-size:12.5px;
    color:var(--ink-soft,#5a6472);
}
.mlsp-card-addr{
    padding:4px 13px 13px;
    font-size:13px;
    line-height:1.35;
    color:var(--ink,#151a21);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}


/* ---------------------------------------------------------------------
   14. Sold / rented state
   --------------------------------------------------------------------- */

/* Visitor arrived after the deal closed - swap "book a tour" for
   "find me one like it". Ghost buttons on navy, one gold among them. */
.mlsp-soldcta{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-top:18px;
    padding:22px 24px;
    border-radius:var(--radius,14px);
    background:var(--navy,#0f1e30);
    color:#fff;
}
.mlsp-soldcta .mlsp-h2,
.mlsp-soldcta strong{color:#fff;}
.mlsp-soldcta .mlsp-btn.ghost{
    border-color:rgba(255,255,255,.4);
    color:#fff;
}
.mlsp-soldcta .mlsp-btn.ghost:hover{
    background:rgba(255,255,255,.1);
    border-color:var(--gold,#fec20f);
    color:var(--gold,#fec20f);
}
.mlsp-soldcta .mlsp-cta-stack{
    flex-direction:row;
    flex-wrap:wrap;
    margin-top:0;
}
.mlsp-soldcta .mlsp-cta-stack .mlsp-btn{width:auto;}


/* ---------------------------------------------------------------------
   15. Lead form
   --------------------------------------------------------------------- */

.mlsp-form{
    display:grid;
    gap:12px;
}
.mlsp-input{
    width:100%;
    min-height:46px;
    padding:12px 14px;
    border:1.5px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface,#fff);
    color:var(--ink,#151a21);
    font-family:var(--font-body,'Inter',sans-serif);
    font-size:15px;
    line-height:1.4;
    transition:border-color var(--ease,.22s cubic-bezier(.4,0,.2,1)),box-shadow var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-input::placeholder{color:#98a2b3;}
.mlsp-input:focus{
    border-color:var(--gold,#fec20f);
    box-shadow:0 0 0 3px rgba(254,194,15,.22);
    outline:none;
}
textarea.mlsp-input{
    min-height:110px;
    line-height:1.6;
    resize:vertical;
}
/* validation red is a literal - there is no error token in the system */
.mlsp-input.err{
    border-color:#d92d20;
    background:#fffbfa;
}
.mlsp-input.err:focus{box-shadow:0 0 0 3px rgba(217,45,32,.18);}

.mlsp-note{
    font-size:11.5px;
    line-height:1.55;
    color:var(--ink-soft,#5a6472);
}
.mlsp-note a{color:var(--ink-soft,#5a6472);text-decoration:underline;}

.mlsp-msg{
    padding:10px 13px;
    border:1px solid transparent;
    border-radius:var(--radius-sm,9px);
    font-size:13.5px;
    font-weight:600;
    line-height:1.5;
}
.mlsp-msg.ok{background:#ecfdf5;border-color:#a7f3d0;color:#047857;}
.mlsp-msg.err{background:#fef3f2;border-color:#fecdca;color:#b42318;}

/* Honeypot: must be invisible to humans but still a real, fillable field
   in the DOM - display:none / visibility:hidden are skipped by most bots,
   so this is pushed off-screen instead. Pair with tabindex="-1" +
   autocomplete="off" + aria-hidden="true" in the markup. */
.mlsp-hp{
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}


/* ---------------------------------------------------------------------
   16. Modal + lightbox
   --------------------------------------------------------------------- */

/* Layering: sticky bar 1000 < uiswitch 1010 < modal 1200 < lightbox 1300.
   visibility (not display) so open/close can transition. */
.mlsp-modal{
    position:fixed;
    inset:0;
    z-index:1200;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(15,30,48,.62);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .24s var(--ease,.22s cubic-bezier(.4,0,.2,1)),visibility .24s;
}
.mlsp-modal.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.mlsp-modal-card{
    width:min(560px,100%);
    max-height:88vh;
    overflow-y:auto;
    border-radius:var(--radius,14px);
    background:var(--surface,#fff);
    box-shadow:var(--shadow-lg,0 16px 44px rgba(16,26,42,.14));
    transform:translateY(14px) scale(.985);
    transition:transform .24s var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-modal.open .mlsp-modal-card{transform:none;}
/* sticky head keeps the close button reachable in a long scrolled form */
.mlsp-modal-head{
    position:sticky;
    top:0;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 20px;
    border-bottom:1px solid var(--line,#e7ebf0);
    background:var(--surface,#fff);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:17px;
    font-weight:700;
    color:var(--ink,#151a21);
}
.mlsp-modal-head h2,
.mlsp-modal-head h3{margin:0;font-size:inherit;font-weight:inherit;}
.mlsp-modal-close{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border:0;
    border-radius:50%;
    background:var(--surface-2,#f5f7fa);
    color:var(--ink-soft,#5a6472);
    font-size:20px;
    line-height:1;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-modal-close:hover{background:var(--line,#e7ebf0);color:var(--ink,#151a21);}
.mlsp-modal-card .mlsp-form{padding:18px 20px 20px;}

.mlsp-lightbox{
    position:fixed;
    inset:0;
    z-index:1300;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:64px 18px 18px;
    background:rgba(8,12,18,.94);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .24s var(--ease,.22s cubic-bezier(.4,0,.2,1)),visibility .24s;
}
.mlsp-lightbox.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
.mlsp-lb-img{
    max-width:min(1100px,94vw);
    max-height:70vh;
    object-fit:contain;
    border-radius:var(--radius-sm,9px);
    box-shadow:0 20px 60px rgba(0,0,0,.55);
}
/* .mlsp-lb-nav is treated as the shared base class of the two arrows;
   .mlsp-lb-prev/.mlsp-lb-next repeat the look so they also stand alone. */
.mlsp-lb-nav,
.mlsp-lb-prev,
.mlsp-lb-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:66px;
    border:0;
    border-radius:var(--radius-sm,9px);
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:30px;
    line-height:1;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-lb-nav:hover,
.mlsp-lb-prev:hover,
.mlsp-lb-next:hover{background:rgba(255,255,255,.28);}
.mlsp-lb-prev{left:18px;right:auto;}
.mlsp-lb-next{right:18px;left:auto;}
.mlsp-lb-close{
    position:absolute;
    top:16px;
    right:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.14);
    color:#fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-lb-close:hover{background:rgba(255,255,255,.3);}
.mlsp-lb-count{
    position:absolute;
    top:24px;
    left:22px;
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:13px;
    font-weight:600;
    letter-spacing:.04em;
    color:rgba(255,255,255,.8);
}
.mlsp-lb-thumbs{
    display:flex;
    gap:8px;
    max-width:min(1100px,94vw);
    padding:2px;
    overflow-x:auto;
    scrollbar-width:none;
    -ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
}
.mlsp-lb-thumbs::-webkit-scrollbar{display:none;}
.mlsp-lb-thumb{
    flex:0 0 auto;
    width:76px;
    height:54px;
    object-fit:cover;
    border:2px solid transparent;
    border-radius:6px;
    opacity:.5;
    cursor:pointer;
    transition:opacity var(--ease,.22s cubic-bezier(.4,0,.2,1)),border-color var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-lb-thumb:hover{opacity:.85;}
.mlsp-lb-thumb.active{opacity:1;border-color:var(--gold,#fec20f);}


/* ---------------------------------------------------------------------
   17. Body-level fixed elements (NOT scoped under .mlsp)
   --------------------------------------------------------------------- */

/* Mobile bottom action bar - the highest-converting element on this page
   (click-to-call is the #1 lead source in residential real estate).
   Desktop hides it; the screen-only media query keeps it out of print. */
.mlsp-sticky{display:none;}

.mlsp-sticky-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:48px;                /* genuine thumb target */
    min-width:0;                    /* let the button shrink inside its grid track instead of overflowing */
    padding:0 8px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:var(--radius-sm,9px);
    background:var(--surface,#fff);
    color:var(--ink,#151a21);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:14px;
    font-weight:600;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    cursor:pointer;
}
/* only the last action is gold - Call/Text stay outline */
.mlsp-sticky-btn:last-child{
    background:var(--gold,#fec20f);
    border-color:#151a21;
    border-width:2px;
    color:#151a21;
    font-weight:700;
}

/* Design switcher (portal <-> preconstruction). Deliberately tiny and
   low-contrast: a utility, never a call to action. */
.mlsp-uiswitch{
    position:fixed;
    left:12px;
    bottom:12px;
    z-index:1010;
    display:inline-flex;
    gap:2px;
    padding:2px;
    border:1px solid var(--line,#e7ebf0);
    border-radius:999px;
    background:var(--surface,#fff);
    box-shadow:var(--shadow-sm,0 1px 3px rgba(16,26,42,.06));
    opacity:.72;
    transition:opacity var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-uiswitch:hover,
.mlsp-uiswitch:focus-within{opacity:1;}
.mlsp-uiswitch button{
    height:18px;                    /* 18 + 2x2 padding + 1px border ~= 22px overall */
    padding:0 9px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--ink-soft,#5a6472);
    font-family:var(--font-head,'Sora','Inter',sans-serif);
    font-size:10px;
    font-weight:700;
    letter-spacing:.04em;
    line-height:1;
    cursor:pointer;
    transition:background var(--ease,.22s cubic-bezier(.4,0,.2,1)),color var(--ease,.22s cubic-bezier(.4,0,.2,1));
}
.mlsp-uiswitch button.active{
    background:var(--gold,#fec20f);
    color:#151a21;
}


/* ---------------------------------------------------------------------
   18. Focus visibility - this is a lead-gen surface, keyboard users must
        never lose the caret. Gold ring, 3px, offset.
   --------------------------------------------------------------------- */

.mlsp a:focus-visible,
.mlsp button:focus-visible,
.mlsp input:focus-visible,
.mlsp select:focus-visible,
.mlsp textarea:focus-visible,
.mlsp summary:focus-visible,
.mlsp [tabindex]:focus-visible,
.mlsp-sticky-btn:focus-visible,
.mlsp-uiswitch button:focus-visible,
.mlsp-modal-close:focus-visible,
.mlsp-lb-nav:focus-visible,
.mlsp-lb-prev:focus-visible,
.mlsp-lb-next:focus-visible,
.mlsp-lb-close:focus-visible,
.mlsp-lb-thumb:focus-visible{
    outline:3px solid var(--gold,#fec20f);
    outline-offset:3px;
}
/* on the navy/black surfaces a plain gold ring can merge with the panel
   edge - a thin dark halo keeps it separated */
.mlsp-calc-out :focus-visible,
.mlsp-soldcta :focus-visible,
.mlsp-lightbox :focus-visible{
    outline:3px solid var(--gold,#fec20f);
    outline-offset:3px;
    box-shadow:0 0 0 6px rgba(0,0,0,.35);
}


/* ---------------------------------------------------------------------
   19. Responsive - 1100 / 980 / 900 / 760 / 560
   --------------------------------------------------------------------- */

@media (max-width:1100px){
    .mlsp{padding:16px 16px 44px;}
    .mlsp-hero{gap:18px;}
    .mlsp-gallery{height:400px;}
    .mlsp-gallery.few{height:340px;}
    .mlsp-price{font-size:31px;}
    .mlsp-section{padding:20px 20px;}
    .mlsp-card{flex:0 0 230px;}
}

/* Rail leaves the sidebar: one column, and it must stop being sticky or a
   full-width card would pin itself over the content below. */
@media (max-width:980px){
    .mlsp-hero{grid-template-columns:1fr;}
    .mlsp-summary{
        position:static;
        top:auto;
    }
    .mlsp-gallery{height:360px;}
}

/* Mobile action bar. `screen` scoping matters: a printed page is narrower
   than 900px, and the bar must not be reserved for in print. */
@media screen and (max-width:900px){
    .mlsp-sticky{
        position:fixed;
        left:0;
        right:0;
        bottom:0;
        z-index:1000;
        display:grid;
        /* minmax(0,1fr) - NOT plain 1fr (== minmax(auto,1fr)): the auto minimum lets a button's
           content push its track past a third of the bar, so the third button (Book) overflowed the
           fixed, viewport-wide bar and got clipped off the right edge. minmax(0,…) forces equal thirds. */
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:8px;
        padding:8px 10px;
        padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));
        border-top:1px solid var(--line,#e7ebf0);
        background:var(--surface,#fff);
        box-shadow:0 -6px 20px rgba(16,26,42,.10);
    }
    /* reserve the bar's height so it can never cover the last section */
    .mlsp{padding-bottom:calc(78px + env(safe-area-inset-bottom,0px));}
    /* lift the switch clear of the bar */
    .mlsp-uiswitch{bottom:calc(70px + env(safe-area-inset-bottom,0px));}
    /* The theme's global back-to-top button (bottom:20px right:20px, z-index:9999) otherwise lands
       right on top of the gold "Book a tour" CTA. Lift it above the action bar. This stylesheet loads
       only on the listing page, so overriding the global id here affects nowhere else. */
    #back-to-top{
        bottom:calc(84px + env(safe-area-inset-bottom,0px)) !important;
        right:14px !important;
    }
    /* the sticky bar's gold is the only gold allowed on a mobile screen,
       so the in-panel calculator CTA steps down to an outline */
    .mlsp-calc-cta{
        background:transparent;
        border:1.5px solid rgba(255,255,255,.55);
        color:#fff;
        font-weight:600;
    }
    .mlsp-calc-cta:hover{background:rgba(255,255,255,.12);color:#fff;}
}

@media (max-width:760px){
    .mlsp{padding-left:14px;padding-right:14px;}
    .mlsp-section{padding:18px 16px;}
    .mlsp-calc{grid-template-columns:1fr;gap:18px;}
    .mlsp-payment{font-size:34px;}
    .mlsp-dgrid{gap:0 16px;}
    .mlsp-soldcta{padding:18px 16px;}
    .mlsp-lb-nav,
    .mlsp-lb-prev,
    .mlsp-lb-next{width:42px;height:56px;font-size:24px;}
    .mlsp-lb-prev{left:8px;}
    .mlsp-lb-next{right:8px;}
}

@media (max-width:560px){
    /* mosaic collapses to a single lead image - the "View all" button is
       then the only route into the rest of the photos */
    .mlsp-gallery,
    .mlsp-gallery.few{
        grid-template-columns:1fr;
        grid-template-rows:1fr;
        height:260px;
    }
    .mlsp-g0{grid-row:auto;grid-column:auto;}
    .mlsp-g1,
    .mlsp-g2,
    .mlsp-g3,
    .mlsp-g4{display:none;}

    .mlsp-stats{grid-template-columns:repeat(2,1fr);}
    .mlsp-price{font-size:28px;}
    .mlsp-addr{font-size:16.5px;}
    .mlsp-h2{font-size:17.5px;}
    .mlsp-desc{font-size:15.5px;}
    .mlsp-summary{padding:16px;}
    .mlsp-daychip{flex:0 0 58px;}
    .mlsp-card{flex:0 0 210px;}
    .mlsp-sticky-btn{font-size:13px;}
    .mlsp-lb-thumb{width:60px;height:44px;}
}


/* ---------------------------------------------------------------------
   20. Reduced motion - kill every transition/transform in the component.
        No !important needed: these selectors match or beat the ones above
        and come later in the cascade.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce){
    .mlsp *,
    .mlsp *::before,
    .mlsp *::after,
    .mlsp-sticky *,
    .mlsp-uiswitch,
    .mlsp-uiswitch *,
    .mlsp-modal,
    .mlsp-modal *,
    .mlsp-lightbox,
    .mlsp-lightbox *{
        transition:none;
        animation:none;
    }
    .mlsp-btn.primary:hover,
    .mlsp-btn:hover,
    .mlsp-card:hover,
    .mlsp-gallery-btn:hover,
    .mlsp-calc-cta:hover{transform:none;}
    .mlsp-g:hover img,
    .mlsp-card:hover .mlsp-card-img img{transform:none;}
    .mlsp-modal.open .mlsp-modal-card,
    .mlsp-modal-card{transform:none;}
    .mlsp-rail{scroll-behavior:auto;}
}


/* ---------------------------------------------------------------------
   21. Print - a printed listing is a leave-behind: content only.
        Must be the last block so it outranks the screen rules above.
   --------------------------------------------------------------------- */

@media print{
    .mlsp-sticky,
    .mlsp-uiswitch,
    .mlsp-modal,
    .mlsp-lightbox,
    .mlsp-rail,
    .mlsp-railhead,
    .mlsp-railbtn,
    .mlsp-gallery-btn,
    .mlsp-microcta,
    .mlsp-daychips,
    .mlsp-desc-toggle{display:none;}

    .mlsp{
        max-width:none;
        padding:0;
        padding-bottom:0;
    }
    .mlsp-hero{grid-template-columns:1fr;gap:14px;}
    .mlsp-summary{position:static;top:auto;}
    .mlsp-section,
    .mlsp-summary,
    .mlsp-gallery{
        break-inside:avoid;
        page-break-inside:avoid;
        box-shadow:none;
        border-color:#ccc;
    }
    .mlsp-gallery{height:280px;}
    /* the full remarks must be on the paper, never a faded excerpt */
    .mlsp-desc.clamped{
        max-height:none;
        overflow:visible;
        -webkit-mask-image:none;
        mask-image:none;
    }
    /* internal scroll containers would clip rows off the page */
    .mlsp-tablewrap{max-height:none;overflow:visible;border-color:#ccc;}
    .mlsp-table{min-width:0;}
    .mlsp-table th{position:static;}
    .mlsp-calc-out,
    .mlsp-soldcta{
        background:transparent;
        color:#000;
        border:1px solid #ccc;
    }
    .mlsp-payment,
    .mlsp-breakdown-row,
    .mlsp-breakdown-row > *:last-child{color:#000;}
}

/* ============================================================================
   22 · CONDOY VARIANT (.mlsx)
   The second design. It carries .mlsp too, so it inherits the gallery, lightbox,
   modal, form, calculator, rail and sticky bar above - this section only restyles
   what must look like the preconstruction property page instead of a portal.
   ============================================================================ */

/* The theme's own hero card supplies the frame, so drop the portal shell. */
.mlsx .mlsp-hero { display: block; }
.mlsx .mlsp-crumbs { display: none; }

/* Status pills - the preconstruction page's vocabulary, not the portal's badges. */
.mlsx-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.mlsx-pill {
    display: inline-flex; align-items: center; height: 26px; padding: 0 12px;
    border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em;
    background: var(--surface-2, #f5f7fa); color: var(--ink, #151a21);
}
.mlsx-pill-forsale { background: #e6f4ea; color: #14683a; }
.mlsx-pill-forrent { background: #e7effd; color: #1d4ed8; }
.mlsx-pill-sold    { background: #fdeaea; color: #b42318; }
.mlsx-pill-rented  { background: #f1e9fd; color: #6027c4; }
.mlsx-pill-reduced { background: #fff4e0; color: #96530a; }
.mlsx-pill-oh      { background: #e6f6ee; color: #0f6b45; }
.mlsx-listed { font-size: 13px; color: var(--ink-soft, #5a6472); }

/* Price line reuses .start-price from the project page; only the extras need rules. */
.mlsx .start-price { font-family: var(--font-head, sans-serif); font-size: 32px; font-weight: 800; color: var(--ink, #151a21); }
.mlsx-orig { margin-left: 10px; font-size: 16px; font-weight: 600; color: var(--ink-soft, #5a6472); text-decoration: line-through; }
.mlsx .start-price small { font-size: 14px; font-weight: 500; }

/* Secondary CTAs. Outline only - .condoy-lead-cta is the single gold button in this view. */
.mlsx-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 18px; margin-right: 8px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--control-radius, 9px);
    background: var(--surface, #fff); color: var(--ink, #151a21);
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: border-color var(--ease, .2s), background var(--ease, .2s);
}
.mlsx-ghost:hover { border-color: var(--gold, #fec20f); background: var(--surface-2, #f5f7fa); }
.mlsx-ghost.active { border-color: var(--gold, #fec20f); color: var(--gold-deep, #e0a800); }

/* Key-facts strip. The theme's .characteristics-cnt gives the frame; this fills the cells. */
.mlsx .characteristics-cnt ul {
    display: flex; flex-wrap: wrap; gap: 10px 28px;
    margin: 14px 0 0; padding: 14px 0 0; list-style: none;
    border-top: 1px solid var(--line, #e7ebf0);
}
.mlsx .characteristics-cnt li { display: flex; flex-direction: column; gap: 2px; }
.mlsx-fk { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #5a6472); }
.mlsx-fv { font-size: 16px; font-weight: 700; color: var(--ink, #151a21); }

/* Detail groups render as the project page's small cards rather than a flat grid. */
.mlsx .card-developments {
    background: var(--surface, #fff); border: 1px solid var(--line, #e7ebf0);
    border-radius: var(--radius, 14px); padding: 18px 20px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,26,42,.05));
}
.mlsx-group {
    margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #e7ebf0);
    font-family: var(--font-head, sans-serif); font-size: 15px; font-weight: 800; color: var(--ink, #151a21);
}
.mlsx-row { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 14px; }
.mlsx-row + .mlsx-row { border-top: 1px dashed var(--line, #e7ebf0); }
.mlsx-row span { color: var(--ink-soft, #5a6472); }
.mlsx-row strong { color: var(--ink, #151a21); font-weight: 600; text-align: right; }

/* Sticky register card - the project page's right rail. */
.mlsx-register {
    background: var(--surface, #fff); border: 1px solid var(--line, #e7ebf0);
    border-radius: var(--radius, 14px); padding: 22px; box-shadow: var(--shadow, 0 6px 20px rgba(16,26,42,.08));
}
.mlsx-register-title { margin: 0 0 6px; font-family: var(--font-head, sans-serif); font-size: 20px; font-weight: 800; }
.mlsx-register-sub { margin: 0 0 16px; font-size: 14px; color: var(--ink-soft, #5a6472); }
.mlsx-call { display: block; margin-top: 10px; text-align: center; font-size: 14px; font-weight: 600; color: var(--ink-soft, #5a6472); }
.mlsx-call:hover { color: var(--gold-deep, #e0a800); }
/* Agent identity next to the ask - a face and a brokerage name measurably lift form completion. */
.mlsx-trust { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #e7ebf0); }
.mlsx-trust img {
    width: 58px; height: 44px; flex: 0 0 auto;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius-sm, 9px);
    background: #fff; padding: 5px 7px;
    object-fit: contain;                  /* whole wordmark, never cropped into a circle */
}
.mlsx-trust strong { display: block; font-size: 14px; }
.mlsx-trust span { font-size: 12px; color: var(--gold-deep, #e0a800); }
.mlsx-courtesy { margin: 12px 0 0; font-size: 11px; color: var(--ink-soft, #5a6472); }

/* Gallery keeps the theme's softer corners. */
.mlsx .mlsp-gallery { border-radius: var(--radius, 14px); height: 420px; }

/* The inline form sits on the orange .hlri-contact-form panel, so its controls invert. */
.mlsx-inline-form { padding: 26px 28px 30px; }
.mlsx-inline-form .hlri-title { margin: 0 0 16px; font-size: 20px; color: #fff; }
.mlsx-inline-form .mlsp-field span,
.mlsx-inline-form .mlsp-note { color: rgba(255, 255, 255, .92); }
.mlsx-inline-form .mlsp-input { background: rgba(255, 255, 255, .96); border-color: transparent; }
.mlsx-inline-form .mlsp-msg.ok  { background: rgba(255, 255, 255, .95); }
.mlsx-inline-form .mlsp-msg.err { background: rgba(0, 0, 0, .28); color: #fff; }

@media (max-width: 767px) {
    .mlsx .mlsp-gallery { height: 260px; }
    .mlsx-register { position: static !important; margin-top: 20px; }
    .mlsx-ghost { width: 100%; margin-right: 0; }
}

/* ---------------------------------------------------------------------
   23 · NO-PHOTO STATE
   Shown when the MLS Media feed returns nothing (or its key has lapsed).
   Deliberately a real panel with an ask in it, not a broken <img>: the
   visit is still worth a lead even without pictures.
   --------------------------------------------------------------------- */
.mlsp-noimg {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; min-height: 320px; padding: 32px 24px; text-align: center;
    border: 1px dashed var(--line, #e7ebf0); border-radius: var(--radius, 14px);
    background: var(--surface-2, #f5f7fa);
}
.mlsp-noimg span { font-size: 30px; line-height: 1; opacity: .55; }
.mlsp-noimg strong { font-family: var(--font-head, sans-serif); font-size: 16px; color: var(--ink, #151a21); }
.mlsp-noimg em { font-style: normal; font-size: 13px; color: var(--ink-soft, #5a6472); }
.mlsp-noimg .mlsp-btn { width: auto; margin-top: 6px; padding: 0 18px; }
@media (max-width: 560px) { .mlsp-noimg { min-height: 220px; } }

/* ---------------------------------------------------------------------
   24 · CONDOY VARIANT - CORRECTIONS
   Fixes found on the live page after the first pass.
   --------------------------------------------------------------------- */

/* The gold CTA sat shorter and tighter than the outline buttons beside it, so
   the row read as mismatched. The design system supplies its colours with
   !important, so match GEOMETRY here and leave the palette alone. */
.mlsx .condoy-lead-cta {
    display: inline-flex; align-items: center; justify-content: center;
    height: 44px; padding: 0 22px; margin-right: 8px;
    border-radius: var(--control-radius, 9px);
    font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer;
}
.mlsx .condoy-lead-cta.w-100 { width: 100%; margin-right: 0; height: 48px; font-size: 15px; }
/* Same box as the CTA so the buttons line up on one baseline. */
.mlsx-ghost { height: 44px; line-height: 1; }

/* Register card - it was cramped against its own border. */
.mlsx-register { padding: 26px 24px 24px; }
.mlsx-register-title { font-size: 21px; line-height: 1.25; }
.mlsx-register-sub { margin-bottom: 18px; line-height: 1.5; }
.mlsx-register .mlsp-daychips { margin-bottom: 16px; gap: 8px; }
.mlsx-register .mlsx-call { margin-top: 14px; }
.mlsx-register .mlsx-trust { margin-top: 20px; padding-top: 18px; }
.mlsx-register .mlsx-courtesy { margin-top: 14px; line-height: 1.5; }

/* Mortgage estimate - it inherited the portal's bare two-column split, which
   looked unfinished sitting between the theme's bordered cards. Give it the
   same card frame as everything else on this view. */
.mlsx .mlsp-calc {
    gap: 24px; padding: 24px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius, 14px);
    background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,26,42,.05));
}
.mlsx .mlsp-calc-grid { gap: 18px 20px; align-content: start; }
.mlsx .mlsp-field span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #5a6472); }
.mlsx .mlsp-calc-out { padding: 26px 24px; border-radius: var(--radius, 14px); }
.mlsx .mlsp-payment { font-size: 38px; letter-spacing: -.02em; }
.mlsx .mlsp-breakdown-row { padding: 9px 0; font-size: 14px; }
.mlsx .mlsp-calc-cta { margin-top: 18px; height: 46px; }

/* Similar-listings rail ran straight into the Register block underneath it. */
.mlsx #mlsp-similar { margin-bottom: 44px; }
.mlsx #mlsp-similar .mlsp-rail { padding-bottom: 8px; }
.mlsx .hlri-container { margin-top: 8px; }

/* Card photo that fails to load (dead MLS key, or a listing with no media):
   say so, rather than showing a broken-image icon. */
.mlsp-card-img.noimg img { display: none; }
.mlsp-card-img.noimg::after {
    content: "Photo not available";
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    padding: 0 12px; text-align: center;
    background: var(--surface-2, #f5f7fa); color: var(--ink-soft, #5a6472);
    font-size: 12px; font-weight: 600;
}

/* ---------------------------------------------------------------------
   25 · ICONOGRAPHY
   Inline stroke icons (template-parts/mls/icons.php). They inherit
   currentColor everywhere, so a context only has to set a colour.
   --------------------------------------------------------------------- */
.mlsp-ico { display: inline-block; vertical-align: -.18em; flex: 0 0 auto; }

/* Stat tiles (Beds / Baths / Sq Ft / Parking) get their icon beside the label. */
.mlsp-stat-k { display: flex; align-items: center; justify-content: center; gap: 5px; }
.mlsp-stat-k .mlsp-ico { width: 13px; height: 13px; opacity: .7; }

/* Feature chips read as a checklist rather than a word cloud. */
.mlsp-chip { display: inline-flex; align-items: center; gap: 6px; }
.mlsp-chip .mlsp-ico { width: 14px; height: 14px; color: var(--gold-deep, #e0a800); }

/* Section headings carry a gold glyph, matching the underline rule. */
.mlsp-h2 { display: flex; align-items: center; gap: 9px; }
.mlsp-h2 .mlsp-ico { width: 19px; height: 19px; color: var(--gold-deep, #e0a800); }

/* CondoY key-facts strip: icon above the value. */
.mlsx-fk { display: flex; align-items: center; gap: 5px; }
.mlsx-fk .mlsp-ico { width: 13px; height: 13px; opacity: .75; }

/* CondoY detail cards reuse the same tiles, minus the outer border (the card
   already provides one) so they don't read as boxes inside a box. */
.mlsx .mlsp-dgrid { gap: 8px; }
.mlsx .mlsp-ditem { border: none; padding: 8px 0; border-bottom: 1px solid var(--line, #e7ebf0); border-radius: 0; }
.mlsx .mlsp-ditem:last-child { border-bottom: none; }

/* Room table: a small glyph in the first column anchors each row. */
.mlsp-table td:first-child { white-space: nowrap; }
.mlsp-table td:first-child .mlsp-ico { width: 15px; height: 15px; margin-right: 7px; color: var(--ink-soft, #5a6472); }

/* CondoY group heading inside each detail card. */
.mlsx-group { display: flex; align-items: center; gap: 7px; }
.mlsx-group .mlsp-ico { width: 15px; height: 15px; color: var(--gold-deep, #e0a800); }
/* Gold-underlined section titles carry their glyph inline. */
.mlsx .titr-list h3 .mlsp-ico { width: 17px; height: 17px; margin-right: 4px; color: var(--gold-deep, #e0a800); vertical-align: -.15em; }

/* The CondoY detail cards are half-width columns, but .mlsp-dgrid's breakpoints
   measure the VIEWPORT - so a 1440px window put 3 columns inside a ~550px card
   and broke words in half. Inside a card, one column; two only once the card
   itself is genuinely wide. Specificity beats the viewport rules regardless of
   source order. */
.mlsx .card-developments .mlsp-dgrid { grid-template-columns: 1fr; }
@media (min-width: 1800px) {
    .mlsx .card-developments .mlsp-dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   26 · LEAD FORM + MODAL - corrections
   The sub-line had no rules at all (so it sat flush in the corner), the
   form had no padding of its own, and labels were only styled inside the
   CondoY view. All three fixed here.
   --------------------------------------------------------------------- */

/* The card's body needs its own gutter - only .mlsp-modal-head had one. */
.mlsp-modal-sub {
    margin: 0;
    padding: 16px 22px 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft, #5a6472);
}
.mlsp-modal .mlsp-form { padding: 16px 22px 22px; }
.mlsp-modal-sub + .mlsp-form { padding-top: 14px; }

.mlsp-form { gap: 16px; }

/* Two short fields share a row on anything wider than a phone - a lead form
   that scrolls feels longer than it is, and length is what costs submissions. */
.mlsp-form-row { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 520px) { .mlsp-form-row { grid-template-columns: 1fr 1fr; } }

/* Labels, globally rather than only under .mlsx. */
.mlsp-field > span {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--ink-soft, #5a6472);
}
.mlsp-field > span em {
    font-style: normal; font-weight: 500; letter-spacing: 0;
    text-transform: none; opacity: .75;
}
.mlsp-input::placeholder { color: #a8b1bd; }
textarea.mlsp-input { min-height: 92px; resize: vertical; }

/* The submit button sat tight against the textarea. */
.mlsp-form .mlsp-btn.primary { margin-top: 4px; height: 50px; font-size: 15.5px; }
.mlsp-form .mlsp-note { margin: 0; }
.mlsp-form .mlsp-msg:empty { display: none; }

/* Inline (orange panel) copy of the form in the CondoY Register block. */
.mlsx-inline-form .mlsp-form { padding: 0; }
.mlsx-inline-form .mlsp-field > span { color: rgba(255, 255, 255, .94); }
.mlsx-inline-form .mlsp-input { border-color: transparent; }

/* ---------------------------------------------------------------------
   27 · NEIGHBOURHOOD COMPARISON + WHAT'S NEARBY
   Both panels are filled by JS and stay hidden until they have an answer.
   --------------------------------------------------------------------- */

/* The verdict line. Tone is a colour hint only - every label is a factual
   comparison against a median, never a recommendation. */
.mlsp-nb-tone {
    display: flex; flex-direction: column; gap: 3px;
    padding: 16px 18px; margin-bottom: 16px;
    border-left: 4px solid var(--line, #e7ebf0);
    border-radius: var(--radius-sm, 9px);
    background: var(--surface-2, #f5f7fa);
}
.mlsp-nb-tone strong { font-family: var(--font-head, sans-serif); font-size: 19px; font-weight: 800; }
.mlsp-nb-tone span { font-size: 13px; color: var(--ink-soft, #5a6472); }
.mlsp-nb-tone.good    { border-left-color: #16a34a; background: #f0fdf4; }
.mlsp-nb-tone.good strong    { color: #14683a; }
.mlsp-nb-tone.high    { border-left-color: #d97706; background: #fffbeb; }
.mlsp-nb-tone.high strong    { color: #96530a; }
.mlsp-nb-tone.neutral { border-left-color: var(--gold, #fec20f); }

.mlsp-nb-grid { display: grid; gap: 10px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 620px)  { .mlsp-nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .mlsp-nb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mlsp-nb-cell {
    display: flex; flex-direction: column; gap: 3px;
    padding: 13px 15px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius-sm, 9px);
    background: var(--surface, #fff);
}
.mlsp-nb-k { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, #5a6472); }
.mlsp-nb-v { font-family: var(--font-head, sans-serif); font-size: 20px; font-weight: 800; color: var(--ink, #151a21); }
.mlsp-nb-a { font-size: 12.5px; color: var(--ink-soft, #5a6472); }

/* Our own access estimate - deliberately NOT branded as a Walk Score. */
.mlsp-walk { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mlsp-walk-n {
    display: flex; align-items: center; justify-content: center;
    width: 62px; height: 62px; flex: 0 0 auto;
    border-radius: 50%; background: var(--gold, #fec20f); color: #151a21;
    font-family: var(--font-head, sans-serif); font-size: 24px; font-weight: 800;
}
.mlsp-walk-t { display: flex; flex-direction: column; gap: 2px; }
.mlsp-walk-t strong { font-family: var(--font-head, sans-serif); font-size: 17px; font-weight: 800; }
.mlsp-walk-t span { font-size: 12.5px; color: var(--ink-soft, #5a6472); }

.mlsp-near-grid { display: grid; gap: 14px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 620px)  { .mlsp-near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mlsp-near-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mlsp-near-col {
    padding: 15px 17px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius-sm, 9px);
    background: var(--surface, #fff);
}
.mlsp-near-col h3 {
    display: flex; align-items: center; gap: 7px;
    margin: 0 0 10px; padding-bottom: 9px;
    border-bottom: 1px solid var(--line, #e7ebf0);
    font-family: var(--font-head, sans-serif); font-size: 14px; font-weight: 800;
}
.mlsp-near-col h3 b { font-size: 11px; font-weight: 700; color: var(--ink-soft, #5a6472); }
.mlsp-near-col ul { margin: 0; padding: 0; list-style: none; }
.mlsp-near-col li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 6px 0; font-size: 13.5px;
}
.mlsp-near-col li + li { border-top: 1px dashed var(--line, #e7ebf0); }
.mlsp-near-col li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlsp-near-col li b { flex: 0 0 auto; font-weight: 700; color: var(--ink-soft, #5a6472); }

/* CondoY view: the panels sit inside the theme's content column. */
.mlsx .mlsp-nb-grid, .mlsx .mlsp-near-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 1200px) {
    .mlsx .mlsp-nb-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mlsx .mlsp-near-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   28 · WALK SCORE® TILE
   Walk Score renders the widget's innards themselves, so this only frames
   it - the score, branding, trademark line and deep link are all theirs
   and must not be restyled or covered.
   --------------------------------------------------------------------- */
.mlsp-ws {
    margin-bottom: 20px;
    padding: 14px 16px;
    border: 1px solid var(--line, #e7ebf0);
    border-radius: var(--radius, 14px);
    background: var(--surface, #fff);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,26,42,.05));
    overflow: hidden;
}
/* The widget ships its own floats; neutralise them so it sits in our card
   without dragging the following content up beside it. */
#ws-walkscore-tile { position: relative; text-align: left; min-height: 60px; }
#ws-walkscore-tile * { float: none; max-width: 100%; }
#ws-walkscore-tile iframe { width: 100% !important; border: 0; }

/* Standalone section now. The widget's own layout is fixed-ish, so cap the frame rather than
   stretching it across a full-bleed page. */
.mlsp-ws { max-width: 420px; margin-bottom: 0; }

/* ---------------------------------------------------------------------
   29 · INLINE HELP ("?")
   The long note under a panel is easy to miss, so the explanation also
   sits next to the number it explains. Hover/focus on pointer devices,
   tap to toggle on touch (mls-listing.js handles the tap).
   --------------------------------------------------------------------- */
.mlsp-help {
    display: inline-flex; align-items: center; justify-content: center;
    width: 17px; height: 17px; margin-left: 6px; padding: 0;
    vertical-align: middle;
    border: 1px solid var(--line, #e7ebf0); border-radius: 50%;
    background: var(--surface, #fff); color: var(--ink-soft, #5a6472);
    font-family: var(--font-body, sans-serif); font-size: 11px; font-weight: 700; line-height: 1;
    cursor: help;
}
.mlsp-help:hover, .mlsp-help:focus-visible {
    border-color: var(--gold, #fec20f); color: var(--ink, #151a21); background: var(--gold, #fec20f);
}
/* The bubble. position:relative lives on the button so it can anchor. */
.mlsp-help { position: relative; }
.mlsp-help::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 9px); left: 50%;
    width: max-content; max-width: min(340px, 76vw);
    transform: translateX(-50%) translateY(4px);
    padding: 11px 13px;
    border-radius: var(--radius-sm, 9px);
    background: var(--navy, #0f1e30); color: #fff;
    font-size: 12.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0;
    text-align: left; text-transform: none; white-space: normal;
    box-shadow: var(--shadow-lg, 0 16px 44px rgba(16,26,42,.24));
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .16s var(--ease, ease), transform .16s var(--ease, ease);
    z-index: 40;
}
.mlsp-help:hover::after,
.mlsp-help:focus-visible::after,
.mlsp-help.open::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Near the left edge of a card the bubble would overflow - nudge it in. */
.mlsp-nb-cell:first-child .mlsp-help::after { left: 0; transform: translateX(0) translateY(4px); }
.mlsp-nb-cell:first-child .mlsp-help:hover::after,
.mlsp-nb-cell:first-child .mlsp-help:focus-visible::after,
.mlsp-nb-cell:first-child .mlsp-help.open::after { transform: translateX(0) translateY(0); }

@media (max-width: 620px) {
    /* On a phone, anchor to the card rather than the tiny button. */
    .mlsp-help::after { left: 0; transform: translateX(0) translateY(4px); max-width: 82vw; }
    .mlsp-help:hover::after, .mlsp-help:focus-visible::after, .mlsp-help.open::after { transform: translateX(0) translateY(0); }
}
/* Near the top of a panel the bubble would be clipped - .below flips it under the button. */
.mlsp-help.below::after { top: calc(100% + 9px); bottom: auto; transform: translateX(-50%) translateY(-4px); }
.mlsp-help.below:hover::after,
.mlsp-help.below:focus-visible::after,
.mlsp-help.below.open::after { transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------------------
   30 · RAIL ARROWS, STREET VIEW, ALERTS + AGENT
   --------------------------------------------------------------------- */

/* The arrows were text chevrons rendering at a few pixels of ink. Real SVG,
   bigger target, and they now exist in BOTH views. */
.mlsp-railnav { display: flex; align-items: center; gap: 8px; }
.mlsp-railnav-solo { justify-content: flex-end; margin-bottom: 12px; }
.mlsp-railbtn { width: 42px; height: 42px; box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,26,42,.06)); }
.mlsp-railbtn svg { width: 20px; height: 20px; }
.mlsp-railbtn + .mlsp-railbtn { margin-left: 0; }
.mlsp-railbtn:hover { background: var(--gold, #fec20f); border-color: var(--gold, #fec20f); color: #151a21; }

/* Street View: a link out to Google Maps. No API key, so no cost. */
.mlsp-sv { display: inline-flex; align-items: center; gap: 8px; width: auto; margin-top: 12px; padding: 0 18px; text-decoration: none; }
.mlsp-sv svg { width: 17px; height: 17px; }

/* Alerts + agent sit side by side once there is room. */
/* Two matching blocks: each is a heading (title + subtitle) ABOVE a bordered
   card. align-items:stretch + height:100% make the two cards equal height and
   bottom-aligned regardless of which heading wraps to more lines. */
.mlsp-leadrow { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .mlsp-leadrow { grid-template-columns: 1fr 1.25fr; align-items: stretch; } }
.mlsp-alerts, .mlsp-expert { display: flex; flex-direction: column; height: 100%; }

/* Alerts - the lowest-commitment ask on the page, so it is styled as an invitation,
   not as another sales panel. */
.mlsp-alerts-head h3 { margin: 0 0 4px; font-family: var(--font-head, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.mlsp-alerts-head p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-soft, #5a6472); }
.mlsp-alerts-card {
    /* Same skeleton as .mlsp-expert-card so the two cards are true mirrors: a circular media on the
       left, content on the right, vertically centred, and a full-width CTA spanning the bottom. */
    flex: 1 1 auto; align-content: center;
    display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center;
    padding: 20px 22px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius, 14px);
    background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,26,42,.05));
}
.mlsp-alerts-ico {
    display: flex; align-items: center; justify-content: center;
    width: 96px; height: 96px; flex: 0 0 auto;   /* same footprint as the agent photo opposite */
    border-radius: 50%; background: var(--gold, #fec20f); color: #151a21;
}
.mlsp-alerts-ico svg { width: 34px; height: 34px; }
.mlsp-alerts-list { list-style: none; margin: 4px 0 4px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mlsp-alerts-list li { position: relative; padding-left: 24px; font-size: 13.5px; line-height: 1.45; color: var(--ink-soft, #5a6472); }
.mlsp-alerts-list li::before {
    content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px;
    border-radius: 50%; background: var(--gold, #fec20f);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/11px no-repeat;
}
.mlsp-alerts-card .mlsp-btn { grid-column: 1 / -1; width: 100%; margin-top: 4px; }   /* full-width CTA across both columns */

/* Agent block. Navy panel so it reads as the human ask, distinct from the data panels. */
.mlsp-expert-head h3 { margin: 0 0 4px; font-family: var(--font-head, sans-serif); font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.mlsp-expert-head p { margin: 0 0 14px; font-size: 14px; line-height: 1.55; color: var(--ink-soft, #5a6472); }
.mlsp-expert-card {
    flex: 1 1 auto; align-content: center;
    display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center;
    padding: 20px 22px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius, 14px);
    background: var(--surface, #fff); box-shadow: var(--shadow-sm, 0 1px 3px rgba(16,26,42,.05));
}
.mlsp-expert-pic {
    width: 96px; height: 96px; flex: 0 0 auto;   /* doubled - a real face at a glanceable size */
    border-radius: 50%; object-fit: cover; background: var(--surface-2, #f5f7fa);
}
.mlsp-expert-initials {
    display: flex; align-items: center; justify-content: center;
    background: var(--navy, #0f1e30); color: var(--gold, #fec20f);
    font-family: var(--font-head, sans-serif); font-size: 30px; font-weight: 800; letter-spacing: .02em;
}
.mlsp-expert-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlsp-expert-info strong { font-family: var(--font-head, sans-serif); font-size: 17px; font-weight: 800; }
.mlsp-expert-info span { font-size: 13.5px; color: var(--ink-soft, #5a6472); }
.mlsp-expert-info a { margin-top: 3px; font-size: 15px; font-weight: 700; color: var(--gold-deep, #e0a800); }
.mlsp-expert-card .mlsp-btn { grid-column: 1 / -1; }

@media (max-width: 560px) {
    .mlsp-alerts-card, .mlsp-expert-card { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .mlsp-expert-info { align-items: center; }
    .mlsp-alerts-list { text-align: left; }   /* bullets read better left-aligned even when centred as a block */
}

/* ---------------------------------------------------------------------
   31 · BUILDING VIEW (.mlsc)
   Third layout, modelled on condos.ca's information architecture: building
   above unit, a sticky price/anchor bar, a pinned right rail. Palette and
   components are ours - only the ORDER is borrowed.
   --------------------------------------------------------------------- */

/* Sticky bar. On a page this long the price should never leave the screen,
   and the anchor list doubles as a table of contents. */
.mlsc-bar {
    /* Slide-in bar: hidden at the top of the page (the header block shows the
       price/badge there), fixed flush under the site header once you scroll.
       `top` is set by JS (mls-listing.js) to the header's live bottom edge.
       When hidden it drops to z-index:0 + pointer-events:none so it can NEVER
       sit over (or intercept clicks on) the theme header on the way back up -
       it only claims a high z-index while actually shown under the fixed header. */
    position: fixed; top: 0; left: 0; right: 0; z-index: -1;
    /* 1fr | auto | 1fr - the equal side columns keep the anchor nav centred in the WHOLE bar,
       not just in the gap between the (wider) price block on the left and the CTA on the right. */
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 18px;
    margin: 0; padding: 10px 24px;
    border-bottom: 1px solid var(--line, #e7ebf0);
    background: var(--surface, #fff);
    box-shadow: 0 6px 16px rgba(21, 26, 33, .07);
    transform: translateY(-110%);
    transition: transform .18s ease;
    pointer-events: none;
}
.mlsc-bar.on { transform: translateY(0); z-index: 1001; pointer-events: auto; }
/* Slide IN on show, but hide INSTANTLY (no transition) - otherwise the exit
   slide-up animates across the theme header on the way back to the top, since
   the header has by then dropped its fixed high z-index. */
.mlsc-bar:not(.on) { transition: none; }
.mlsc-bar-id { display: flex; flex-direction: column; flex: 0 0 auto; min-width: 0; }
.mlsc-bar-id strong { font-family: var(--font-head, sans-serif); font-size: 18px; font-weight: 800; line-height: 1.2; }
.mlsc-bar-id span { font-size: 12.5px; color: var(--ink-soft, #5a6472); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mlsc-bar-nav { display: flex; gap: 18px; justify-content: center; overflow-x: auto; scrollbar-width: none; }
.mlsc-bar-nav::-webkit-scrollbar { display: none; }
/* The nav is the grid's centre (auto) column, so the equal 1fr side columns already centre it in
   the bar; justify-content keeps its links centred within the column if it ever has slack. */
.mlsc-bar-nav a {
    flex: 0 0 auto; padding: 4px 0;
    font-size: 13.5px; font-weight: 600; color: var(--ink-soft, #5a6472);
    text-decoration: none; border-bottom: 2px solid transparent;
}
.mlsc-bar-nav a:hover { color: var(--ink, #151a21); border-bottom-color: var(--gold, #fec20f); }
.mlsc-bar-cta { justify-self: end; width: auto; height: 40px; padding: 0 20px; }
@media (max-width: 900px) { .mlsc-bar-nav, .mlsc-bar-cta { display: none; } }

.mlsc-head { margin-bottom: 16px; }
.mlsc-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.mlsc-head h1 { margin: 0 0 4px; font-family: var(--font-head, sans-serif); font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.02em; }
.mlsc-sub { margin: 0; font-size: 15px; color: var(--ink-soft, #5a6472); }
.mlsc-sub strong { color: var(--ink, #151a21); font-weight: 700; }

/* Content + pinned rail. */
.mlsc-main { display: grid; gap: 24px; grid-template-columns: 1fr; margin-top: 20px; }
@media (min-width: 1040px) { .mlsc-main { grid-template-columns: minmax(0, 1fr) 360px; } }
.mlsc-col { min-width: 0; }
.mlsc-rail { min-width: 0; }
/* Sticky offset is a live variable: when the floating bar (#mlsc-bar) is shown it
   equals header-bottom + bar-height + gap, so the rail's price card clears the bar
   instead of sliding under it. mls-listing.js sets it; the fallback (78px, just below
   the theme header) applies whenever the bar is hidden. */
@media (min-width: 1040px) { .mlsc-rail { position: sticky; top: var(--mlsc-rail-top, 78px); align-self: start; } }

.mlsc-price-card {
    padding: 22px;
    border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius, 14px);
    background: var(--surface, #fff); box-shadow: var(--shadow, 0 6px 20px rgba(16,26,42,.08));
}
.mlsc-agent { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line, #e7ebf0); }
.mlsc-agent img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.mlsc-agent div { display: flex; flex-direction: column; min-width: 0; }
.mlsc-agent strong { font-size: 14.5px; }
.mlsc-agent span { font-size: 12.5px; color: var(--ink-soft, #5a6472); }
.mlsc-agent a { font-size: 14px; font-weight: 700; color: var(--gold-deep, #e0a800); }

/* Facts strip: inline, the way a portal leads. */
.mlsc-strip { display: flex; flex-wrap: wrap; gap: 10px 20px; padding: 14px 0 18px; border-bottom: 1px solid var(--line, #e7ebf0); }
.mlsc-strip-i { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; }
.mlsc-strip-i svg { width: 17px; height: 17px; color: var(--ink-soft, #5a6472); }
.mlsc-strip-age { color: var(--ink-soft, #5a6472); font-weight: 500; }

/* Key facts: their 8-pair grid, minus the "-" placeholders. */
.mlsc-kf { display: grid; gap: 10px; grid-template-columns: repeat(1, minmax(0, 1fr)); }
@media (min-width: 620px)  { .mlsc-kf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1300px) { .mlsc-kf { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mlsc-kf-i { display: flex; align-items: center; gap: 11px; padding: 13px 15px; border: 1px solid var(--line, #e7ebf0); border-radius: var(--radius-sm, 9px); }
.mlsc-kf-ico { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 auto; border-radius: 8px; background: var(--surface-2, #f5f7fa); color: var(--ink-soft, #5a6472); }
.mlsc-kf-ico svg { width: 17px; height: 17px; }
.mlsc-kf-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mlsc-kf-t strong { font-family: var(--font-head, sans-serif); font-size: 16px; font-weight: 800; }