/* build:v417e-1778823493-vt-label-fix — content hash bust */
/* ═══════════ v7 CROSS-BROWSER DEFENSIVE BASE LAYER ═══════════
   Targets: iOS Safari, Android Chrome, Safari Mac, Firefox, Edge/Chromium Windows.
   Applies in this order: vendor prefixes → tap-highlight → text rendering →
   form input zoom prevention → reduced-motion guard → color-scheme. */
:root{color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
*:focus-visible{outline:2px solid #EA0649;outline-offset:2px;border-radius:4px}
/* v156: search inputs get a subtle box-shadow on focus, not a thick outline.
   The 2px teal outline was too loud on the listings search bar. */
input[type="text"]:focus-visible,
input[type="search"]:focus-visible,
input[type="email"]:focus-visible,
.lb-search-inp:focus,
#nav-q:focus,
#hero-clean-q:focus,
.hero-clean-input:focus,
.lb-search-wrap:focus-within,
.mob-search-pill:focus-within{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(158,13,54,.18) !important;
  border-color:#EA0649 !important;
}
button,a,[role="button"],[onclick],input[type="button"],input[type="submit"]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
/* iOS Safari: prevent auto-zoom on input focus when font-size < 16px. */
input,select,textarea{font-size:16px}
/* Reduced-motion accessibility — disable transitions/animations for users who prefer it. */
@media (prefers-reduced-motion: reduce){*,::before,::after{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important}}
/* Mobile (<=600px) emergency rule for very tiny screens (320px iPhone SE). */
@media (max-width:359px){html{font-size:14.5px}}
/* v7 Touch target defensive minimums — every interactive element gets 44×44 on mobile.
   Inline style="..." or hard-coded sizes still win, so this only nudges otherwise-tiny
   buttons/links up to the WCAG-recommended size. */
@media (max-width:768px){
  button,a[onclick],a[role="button"],[role="button"]{min-height:44px}
  /* But don't break tiny chip/icon buttons that are already usable in compact UI by giving them inline sizes. */
  .pd-step,.bot-tab,.fav-btn,.mob-search-chip-x,.hood-chip-strip-x,.mob-search-chip-more,.fm-area-summary-x,.cb-locked-btn,.htt,.fc,.lf-chip,.fm-hood-chip,.mob-inline-pill-chev,.mob-search-chev,.mob-search-pin,.cmeta-sep,.fm-step-btn{min-height:auto}
}
:root{
  --navy:#0c1f38;--navy2:#0a1828;--navy3:#162845;
  --teal:#CE2C44;--teal2:#EA0649;--teal3:#fde2ea;
  --white:#fff;--off:#f4f6f8;--off2:#eaecef;--light:#dde1e8;--mid:#6b7a8d;--text:#1a2535;
  --green:#0a7a40;--red:#c0392b;--blue:#1a56db;--amber:#d97706;
  --r:6px;--rlg:12px;--rxl:18px;
  --sh:0 1px 4px rgba(0,0,0,.08);--shlg:0 8px 28px rgba(0,0,0,.14);--shxl:0 20px 60px rgba(0,0,0,.22);
  --navh:56px;--fh:50px;--mob-fh:100px;
  --serif:'DM Serif Display',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);

  /* ─────────────────────────────────────────────────────────────────────
     v31 ELITE DESIGN TOKENS (Stripe / Linear / Vercel parity)
     New tokens, additive — existing tokens preserved so nothing breaks.
     Use these for any new component or refactor. Static audit caught:
       · 99 unique font-size values     (target: ~7)
       · 16 unique border-radius values (target: 5)
       · 10 unique transition timings   (target: 2)
       · 4 different teals (#EA0649 / #EA0649 / #EA0649 / #EA0649)
       · 758 !important declarations
     This block is the canonical scale forward.
     ───────────────────────────────────────────────────────────────────── */

  /* Spacing — multiples of 4. Use these everywhere instead of magic numbers. */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  /* Type scale — DM Sans body, DM Serif Display for headlines. 7 sizes only. */
  --t-xs:  11px;
  --t-sm:  12px;
  --t-md:  14px;
  --t-lg:  16px;
  --t-h3:  20px;
  --t-h2:  28px;
  --t-h1:  36px;

  /* Radius — 5 stops. */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill:999px;

  /* Shadow — 3 levels. Subtle / card / modal. */
  --sh-1: 0 1px 2px rgba(11,37,69,.06), 0 1px 3px rgba(11,37,69,.05);
  --sh-2: 0 4px 12px rgba(11,37,69,.08), 0 1px 4px rgba(11,37,69,.04);
  --sh-3: 0 16px 48px rgba(11,37,69,.18), 0 4px 12px rgba(11,37,69,.08);

  /* Motion — 2 timings + standard easing. */
  --t-fast: 150ms;
  --t-mod:  250ms;
  --ease-out: cubic-bezier(.16,1,.3,1);    /* fast-start, slow-end — for hovers + reveals */
  --ease-mod: cubic-bezier(.4,0,.2,1);     /* symmetric — for state transitions */

  /* Canonical brand colors (alias to existing for new rules). */
  --brand-navy: var(--navy);
  --brand-teal: var(--teal2);     /* canonical teal — was 4 different values across the file */
  --brand-teal-deep: #CE2C44;     /* hover/press state, single source of truth */
  --brand-teal-bg:   var(--teal3);

  /* Status colors (badges, alerts) — use sparingly. */
  --st-positive: var(--green);
  --st-warning:  var(--amber);
  --st-negative: var(--red);
  --st-info:     var(--blue);

  /* ─────────────────────────────────────────────────────────────────────
     v310 HOMEPAGE — Modern luxury accents (champagne gold + editorial scale).
     Additive only. Existing brand tokens (navy/teal/serif/sans) untouched.
     Used by .hp-* classes scoped to #v310-home.
     ───────────────────────────────────────────────────────────────────── */
  --gold:        #c9a96a;
  --gold-deep:   #a88947;
  --gold-bg:     #f7f0df;
  --hp-section-y: 96px;                       /* generous vertical breathing */
  --hp-text-mute: #6b7a8d;
  --hp-display-1: clamp(48px, 7vw, 88px);     /* hero headline */
  --hp-display-2: clamp(32px, 4vw, 56px);     /* section headlines */
  --hp-eyebrow:   11px;                       /* small-caps section labels */
}
@media (max-width: 768px){
  :root{ --hp-section-y: 56px; }
}
html{scroll-behavior:smooth;height:100%;overscroll-behavior:none;background:#fff;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* v17 Fix 1: touch-action: pan-x pan-y blocks pinch-zoom on the page chrome
   while still allowing scroll/pan. Mapbox needs to keep its native pinch-zoom
   inside the map canvas — see .mapboxgl-canvas-container override below. */
body{font-family:var(--sans);background:var(--white);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;height:100%;overscroll-behavior:none;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y}
/* v17: Mapbox needs all touch gestures (pinch, rotate, two-finger pan) inside
   its canvas — explicitly grant `touch-action: none` so the browser doesn't
   intercept gestures and Mapbox can handle them itself. */
.mapboxgl-canvas-container,
.mapboxgl-canvas,
.mapboxgl-map{touch-action:none !important}
/* v147: ensure the map-pane wrapper isn't restricting touch — body sets
   touch-action:pan-x pan-y which would block pinch-zoom unless the map
   container itself overrides. Force the map pane to allow all gestures. */
.map-pane,.map-pane #map{touch-action:none !important}

/* v17 Fix 3: CROSS-BROWSER POLISH ───────────────────────────────────
   • 100dvh → 100vh fallback for iOS Safari URL-bar resize.
   • prefers-reduced-motion: kill long transitions for users who opt out.
   • `:has()` fallback: parallel rules using v8 body classes for Safari <15.4.
   • -webkit- prefixes are already inline on each backdrop-filter usage. */

/* iOS Safari respects 100dvh; older browsers ignore the unit and the fallback
   100vh kicks in. Ordered fallback-first → preferred-second. */
.hero-clean,
#search-view,
.acct-modal{min-height:100vh;min-height:100dvh}

/* Reduced-motion: respect the OS-level preference. Drop ALL transitions and
   animations to <0.01s so they're effectively instant but still fire events. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* :has() fallbacks for Safari <15.4. v8/v9 already toggles body.type-dd-open
   and body.price-dd-open; mirror the existing :has() rules with the classes. */
body.type-dd-open .fab-row,
body.price-dd-open .fab-row,
body.type-dd-open .bot-tabs,
body.price-dd-open .bot-tabs{display:none !important}
/* v307c — on mobile, when a listing detail is open, HIDE the global
   bot-tabs (Map/Listings/Favourites/Sold). The bot-tabs at z-index:550
   was covering the v42-detail-cta sticky pill ("Request a viewing"),
   so the pill rendered behind it and the user never saw it. Matches
   condos.ca: while you're on a listing detail, only the listing's own
   sticky CTA shows at the bottom — global nav steps out of the way. */
body.in-listing-detail .bot-tabs{display:none !important}
/* checkbox-as-style fallback for .lf-check / .lf-radio: pair with the
   already-existing 'on' class that JS toggles. */
.lf-check.on{border-color:var(--teal);background:var(--teal3)}
.lf-radio.on{background:var(--teal);color:#fff;border-color:var(--teal)}

/* iOS Safari: disable default tap-highlight for cleaner buttons. */
button,a,[role="button"]{-webkit-tap-highlight-color:transparent}

/* v17 Fix 3: prevent iOS auto-zoom on inputs by ensuring 16px minimum on mobile. */
@media (max-width:768px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  input[type="date"],
  input[type="url"],
  textarea,
  select{font-size:16px !important}
}
/* Desktop: lock html+body to viewport height — prevents whitespace below .main when JS hasn't added .in-search class */
/* v37 CRITICAL: was `@media(min-width:769px){html,body{overflow:hidden;height:100vh}}`
   which globally killed body scroll on every desktop view — including the home page.
   The intent was to lock scroll on the search view (which has its own internal flex
   layout with .main scrolling internally), NOT on the home/precon/etc views.
   Scope the lock to body.in-search so home/sold/listing-detail/precon all scroll
   naturally.
   v311 desktop scroll fix: dropping the unconditional `html, body { height:100% }`.
   Combined with body's `overflow-x:hidden` (line 232), the height:100% lock turned
   body into a fixed-height scroll container — the document content overflowed
   visibly but wheel events fired on the body box (which was viewport-height) and
   were eaten before reaching the scrollable html viewport. Result: scroll worked
   only when grabbing the document scrollbar, not when wheel-scrolling from the
   middle of the page. The .in-search lock below preserves the search-view's
   internal-flex-scroll layout. Other desktop views (home, precon, sold, listing
   detail, neighbourhood, etc.) now get natural document-level scroll. */
@media(min-width:769px){
  body.in-search{ overflow:hidden; height:100vh }
  html:has(body.in-search){ overflow:hidden; height:100vh }
  /* For every other desktop view, let body grow with its content so the
     document scrollbar handles scroll instead of body trapping wheel events. */
  body:not(.in-search):not(.in-sold):not(.in-listing-detail):not(.map-fs):not(.in-fullmap){
    height:auto !important;
    min-height:100vh;
    overflow-y:visible !important;
  }
  html:has(body:not(.in-search):not(.in-sold):not(.in-listing-detail):not(.map-fs):not(.in-fullmap)){
    height:auto !important;
    overflow-y:visible !important;
  }
}
/* v263/v265: kill the white flash on iOS Safari when scrolling fast or when
   bottom-nav repaints. Set the map and bottom nav to use the natural
   sage map color so the brief unstyled frame matches the surrounding UI
   instead of flashing pure white. v265: stronger GPU-layer hints —
   backface-visibility:hidden + perspective + contain so iOS keeps the
   sticky/fixed elements composited and never repaints them as plain
   text on white. */
/* v324 perceived-instant-load: static Toronto placeholder behind #map so the
   user never sees a blank/gray map area while Mapbox GL JS lazy-loads. The
   live canvas fades in on top once the first idle event fires (see index.html
   doInitMap → reveal). */
#map{
  background:#e8efe7 url('/assets/map-placeholder/toronto-desktop.jpg') center center / cover no-repeat !important;
}
@media (max-width: 1024px){
  #map{background-image:url('/assets/map-placeholder/toronto-tablet.jpg') !important}
}
@media (max-width: 600px){
  #map{background-image:url('/assets/map-placeholder/toronto-mobile.jpg') !important}
}
#map .mapboxgl-canvas{opacity:0;transition:opacity 260ms ease-out}
#map.cdg-map-ready .mapboxgl-canvas{opacity:1}
/* v311 Fix 1: removed transform:translate3d hack on .bot-tabs — it was creating
   a new compositing layer on iOS that "popped" during URL-bar collapse, causing
   the visible scroll-jump and the white gap under the tabs. Keeping will-change
   + contain alone is enough to keep the bar composited without the pop. */
.bot-tabs{
  background:#0c1f38 !important;
  will-change:auto;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout style;
}
.lb-row{
  background:#fff;
  will-change:transform;
  transform:translate3d(0,0,0);
  -webkit-transform:translate3d(0,0,0);
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  perspective:1000;
  -webkit-perspective:1000;
  contain:layout style;
}

/* v225: HouseSigma-style — on mobile, lock the page scroll ONLY while in
   the actual MAP view so the page scrollbar can't appear/disappear when
   overlays open. The scrollbar appearing was causing the map canvas to
   widen briefly, making Mapbox shift the camera. Locking body overflow
   eliminates the trigger. v245: dropped body.in-search from the lock —
   the regular list view needs to scroll normally. Only fullmap / map-fs
   / building-panel get the lock. */
@media(max-width:768px){
  body.in-fullmap,
  body.map-fs,
  body.v69-bld-panel-open{
    overflow:hidden !important;
    height:100vh !important;
    height:100dvh !important;
    overscroll-behavior:none !important;
    -webkit-overflow-scrolling:auto !important;
  }
  html:has(body.in-fullmap),
  html:has(body.map-fs),
  html:has(body.v69-bld-panel-open){
    overflow:hidden !important;
    height:100vh !important;
    height:100dvh !important;
  }
}
body.in-search{background:#ffffff}
button,select,input,textarea{font-family:inherit;cursor:pointer;border:none;outline:none;background:none}

/* ═══════════ STOP MOBILE BOUNCE while interacting with cards/map ═══════════ */
@media (max-width: 768px) {
  /* Prevent the entire body from rubber-banding when listings are scrolled */
  body { position: relative; }
  /* Cards container should contain its own scroll without bouncing the page */
  .cards, #cards, .list-pane, #list-pane { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

  /* v311 Fix 5: Homepage scroll on mobile.
     The default html{height:100%} + body{height:100%} pin both to the
     viewport, which together with body's missing overflow-y:auto stopped
     #v310-home from scrolling at all on iOS. On the home view (no .in-search,
     .in-sold, .in-listing-detail, .map-fs body classes) we let html and body
     grow with content so the document scrolls naturally. The 96px
     padding-bottom keeps the last home section above the .bot-tabs bar. */
  body:not(.in-search):not(.in-sold):not(.in-listing-detail):not(.map-fs):not(.in-fullmap){
    height:auto !important;
    min-height:100vh;
    min-height:100dvh;
    overflow-y:visible !important;
    padding-bottom:96px;
  }
  html:has(body:not(.in-search):not(.in-sold):not(.in-listing-detail):not(.map-fs):not(.in-fullmap)){
    height:auto !important;
    min-height:100vh;
    min-height:100dvh;
    overflow-y:auto;
  }
}

/* ═══════════ SOLD / RENTED LOGIN WALL — like condos.ca "Sign In Required" ═══════════ */
.locked-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:5;border-radius:inherit;cursor:pointer;transition:all .15s}
.locked-overlay:hover{background:rgba(255,255,255,.45)}
.locked-pill{padding:11px 22px;background:#EA0649;color:#fff;border-radius:24px;font-size:14px;font-weight:600;box-shadow:0 6px 18px rgba(131,0,37,.35);display:inline-flex;align-items:center;gap:7px;letter-spacing:-.1px}
.locked-pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.locked-overlay:hover .locked-pill{background:#830025;transform:translateY(-1px);box-shadow:0 8px 22px rgba(131,0,37,.45)}

/* FULL-COVER locked card — Zoocasa style. Used when historical listing + logged out */
.card-locked-full{cursor:pointer;transition:all .2s}
.card-locked-full:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(11,37,69,.12)}
.card-locked-full .ci img{filter:blur(18px) saturate(.85);transform:scale(1.1)}
.card-locked-full .gallery-prev,.card-locked-full .gallery-next,.card-locked-full .gallery-dots,.card-locked-full .gallery-count,.card-locked-full .ci-top{display:none}
.locked-full-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);z-index:6;border-radius:inherit;pointer-events:none}
.locked-full-pill{padding:11px 22px;background:#fff;color:#0b2545;border-radius:10px;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(11,37,69,.18);display:inline-flex;align-items:center;gap:8px;letter-spacing:-.1px}
.locked-full-pill svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.cb-locked{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}
.cb-locked-msg{font-size:13.5px;color:#475569;line-height:1.45}
.cb-locked-btn{align-self:flex-start;padding:7px 18px;background:transparent;border:1.5px solid #0b2545;color:#0b2545;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.cb-locked-btn:hover{background:#0b2545;color:#fff}
.locked-card-info{position:absolute;bottom:0;left:0;right:0;padding:14px 16px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-size:12.5px;color:#475569;text-align:center;line-height:1.5;border-top:1px solid #eef2f7;z-index:6;pointer-events:none}
.locked-card-info strong{color:#0b2545;display:block;font-size:13.5px;font-weight:600;margin-bottom:2px}

/* ═══════════ iOS-SAFE INPUTS — prevents auto-zoom on focus on iPhones ═══════════ */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
  input[type="search"], input[type="password"], select, textarea {
    font-size: 16px !important;  /* iOS only zooms when font-size < 16px */
  }
}

/* ═══════════ EXIT-INTENT MODAL — fires when cursor leaves the page ═══════════ */
.exit-intent-ov{position:fixed;inset:0;background:rgba(11,37,69,.65);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);animation:fadeIn .25s ease}
.exit-intent-ov.open{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.exit-intent-modal{background:#fff;border-radius:16px;max-width:480px;width:100%;padding:32px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .35s ease}
.exit-intent-x{position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:50%;background:#f4f6f8;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#64748b;border:none}
.exit-intent-x:hover{background:#e0e7ef;color:#0b2545}
.exit-intent-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#EA0649,#c41446);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.exit-intent-icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:2.2}
.exit-intent-title{font-family:'DM Serif Display',Georgia,serif;font-size:26px;color:#0b2545;letter-spacing:-.4px;margin-bottom:8px;line-height:1.15}
.exit-intent-sub{font-size:14.5px;color:#475569;line-height:1.55;margin-bottom:18px}
.exit-intent-form{display:flex;flex-direction:column;gap:10px}
.exit-intent-form input{padding:12px 14px;border:1.5px solid #dbe2ea;border-radius:8px;font-size:16px;color:#0b2545;background:#fff;transition:border-color .15s}
.exit-intent-form input:focus{border-color:#EA0649;outline:none}
.exit-intent-form button{padding:13px 20px;background:linear-gradient(165deg,#0b2545,#13315c);color:#fff;border:none;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit}
.exit-intent-form button:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(11,37,69,.25)}
.exit-intent-trust{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11.5px;color:#64748b;justify-content:center}
.exit-intent-trust svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}

/* ═══════════ ENGAGEMENT POPUP — after 3+ listings viewed ═══════════ */
.engage-pop{position:fixed;bottom:24px;left:24px;background:#fff;border-radius:14px;box-shadow:0 12px 36px rgba(11,37,69,.22);padding:18px 20px;max-width:340px;z-index:700;border:1.5px solid #f7e0e7;transform:translateY(20px);opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.4,0,.2,1)}
.engage-pop.open{transform:translateY(0);opacity:1;pointer-events:auto}
@media (max-width: 768px) {
  .engage-pop{bottom:14px;left:14px;right:14px;max-width:none}
}
.engage-pop-x{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#94a3b8;cursor:pointer;font-size:14px;background:transparent;border:none}
.engage-pop-x:hover{background:#f4f6f8;color:#0b2545}
.engage-pop-avatar{width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#EA0649,#c41446);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;margin-bottom:10px}
.engage-pop-title{font-size:15px;font-weight:700;color:#0b2545;margin-bottom:4px;letter-spacing:-.2px}
.engage-pop-text{font-size:13px;color:#475569;line-height:1.5;margin-bottom:12px}
.engage-pop-btn{display:block;width:100%;padding:10px 16px;background:linear-gradient(165deg,#0b2545,#13315c);color:#fff;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;text-align:center;border:none;font-family:inherit}
.engage-pop-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(11,37,69,.2)}

/* ═══════════════════════════════════════════════════════════════════
   USER ACCOUNT SYSTEM — auth modal, profile, favourites, account dropdown
   Mirrors condos.ca / property.ca account experience
   ═══════════════════════════════════════════════════════════════════ */

/* Account buttons in nav */
.nav-auth{display:flex;align-items:center;gap:6px}
.nav-auth-btn{padding:7px 14px;border-radius:20px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.85);background:transparent;border:none;cursor:pointer;transition:all .12s;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.nav-auth-btn svg{width:14px;height:14px;flex-shrink:0}
.nav-auth-btn:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-auth-btn.primary{background:#EA0649;color:#fff;border:1px solid #EA0649;font-weight:600;padding:7px 18px}
.nav-auth-btn.primary:hover{background:#EA0649;border-color:#EA0649}
.nav-auth-divider{width:1px;height:14px;background:rgba(255,255,255,.2)}

/* Logged-in user pill in nav */
.nav-user{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:24px;cursor:pointer;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);transition:all .12s;position:relative}
.nav-user:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
.nav-user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#EA0649,#c41446);display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700;letter-spacing:-.3px}
.nav-user-name{color:#fff;font-size:12.5px;font-weight:500;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-user-caret{color:rgba(255,255,255,.6);transition:transform .15s}
.nav-user.open .nav-user-caret{transform:rotate(180deg)}

/* Account dropdown menu */
.nav-user-dd{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:12px;box-shadow:0 12px 32px rgba(11,37,69,.18);min-width:240px;padding:6px;z-index:800;display:none;border:1px solid #eef2f7}
.nav-user.open .nav-user-dd{display:block}
.nav-user-dd-hdr{padding:14px 14px 12px;border-bottom:1px solid #eef2f7;margin-bottom:6px}
.nav-user-dd-name{font-size:14px;font-weight:600;color:#0b2545;margin-bottom:2px;letter-spacing:-.2px}
.nav-user-dd-email{font-size:12px;color:#64748b;word-break:break-all}
.nav-user-dd-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;color:#0b2545;cursor:pointer;transition:background .1s;text-decoration:none;border:none;background:transparent;width:100%;text-align:left;font-family:inherit}
.nav-user-dd-item:hover{background:#f4f6f8}
.nav-user-dd-item svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;color:#64748b}
.nav-user-dd-sep{height:1px;background:#eef2f7;margin:6px 0}
.nav-user-dd-item.danger{color:#475569}
.nav-user-dd-item.danger:hover{background:#f1f5f9;color:#0b2545}
.nav-user-dd-item.danger svg{color:#64748b}

/* AUTH MODAL — sign up / log in */
.auth-ov{position:fixed;inset:0;background:rgba(11,37,69,.55);z-index:9000;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto}
.auth-ov.open{display:flex}
.auth-modal{background:#fff;border-radius:16px;max-width:880px;width:100%;display:flex;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.3);position:relative;max-height:calc(100vh - 40px);overflow-y:auto;animation:slideUp .35s ease}
.auth-x{position:absolute;top:12px;right:12px;width:44px;height:44px;border-radius:50%;background:#f4f6f8;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0b2545;border:none;z-index:10;transition:background .12s,transform .12s;box-shadow:0 2px 6px rgba(11,37,69,.12)}
.auth-x:hover{background:#e8ecf1;transform:scale(1.05)}
.auth-x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round}
.auth-features{flex:1;padding:42px 36px;background:#fafbfc;display:flex;flex-direction:column;justify-content:center;gap:28px;min-width:0}
.auth-feat{display:flex;gap:14px;align-items:flex-start}
.auth-feat-ico{flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#f7e0e7;display:flex;align-items:center;justify-content:center;color:#830025}
.auth-feat-ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.auth-feat-body h4{font-size:15px;font-weight:700;color:#0b2545;margin-bottom:4px;letter-spacing:-.2px}
.auth-feat-body p{font-size:13px;color:#475569;line-height:1.5}
.auth-form-wrap{flex:1;padding:42px 36px;display:flex;flex-direction:column;justify-content:center;min-width:0}
@media (max-width: 720px) {
  /* v=631 — stack the value-prop panel ABOVE the form on mobile (condos.ca
     parity) instead of hiding it. Compact padding/gaps keep the modal short
     enough to scroll cleanly inside .auth-modal's max-height. */
  .auth-modal{flex-direction:column}
  .auth-features{display:flex;padding:30px 24px 8px;gap:18px;background:#fff}
  .auth-feat-body h4{font-size:14px}
  .auth-feat-body p{font-size:12.5px;line-height:1.45}
  .auth-form-wrap{padding:18px 24px 30px}
}
.auth-title{font-family:'DM Serif Display',Georgia,serif;font-size:26px;color:#0b2545;letter-spacing:-.5px;margin-bottom:8px;line-height:1.18}
.auth-sub{font-size:13.5px;color:#475569;line-height:1.5;margin-bottom:18px}
.auth-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:13px 16px;background:#fff;color:#0b2545;border:1.5px solid #dbe2ea;border-radius:10px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .15s;margin-bottom:14px;min-height:48px}
.auth-google:hover{background:#f7fafa;border-color:#EA0649}
.auth-divider{display:flex;align-items:center;gap:12px;margin:6px 0 14px;color:#94a3b8;font-size:12px}
.auth-divider::before,.auth-divider::after{content:"";flex:1;height:1px;background:#e0e6ec}
.auth-divider span{padding:0 4px}
/* v=631 — "Already have an account? Log in" framing toggle under the submit */
.auth-switch{font-size:13px;color:#475569;text-align:center;margin-top:4px}
.auth-switch button{background:none;border:none;padding:0;color:#EA0649;font-family:inherit;font-size:13px;font-weight:600;text-decoration:underline;cursor:pointer}
.auth-switch button:hover{color:#7a0023}
/* Zoocasa-style benefits list - shown above signup form */
.auth-benefits{list-style:none;padding:0;margin:0 0 22px;display:flex;flex-direction:column;gap:10px}
.auth-benefits li{display:flex;align-items:center;gap:10px;font-size:14px;color:#334;line-height:1.4}
.auth-benefits li svg{width:18px;height:18px;stroke:#EA0649;flex-shrink:0}
.auth-form{display:flex;flex-direction:column;gap:14px}
.auth-field{display:flex;flex-direction:column;gap:6px}
.auth-field label{font-size:12px;font-weight:600;color:#475569;letter-spacing:.2px}
.auth-field input{padding:11px 14px;border:1.5px solid #dbe2ea;border-radius:8px;font-size:15px;color:#0b2545;background:#fff;transition:border-color .15s;font-family:inherit;width:100%;min-height:44px}
.auth-field input:focus{border-color:#EA0649;outline:none;box-shadow:0 0 0 3px rgba(169,0,48,.12)}
.auth-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-phone-row{display:flex;gap:8px;align-items:stretch}
.auth-phone-row select{padding:11px 10px;border:1.5px solid #dbe2ea;border-radius:8px;font-size:15px;background:#fff;color:#0b2545;font-family:inherit;cursor:pointer}
.auth-phone-row input{flex:1}
.auth-pwd-wrap{position:relative}
.auth-pwd-wrap input{padding-right:40px}
.auth-pwd-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);width:28px;height:28px;display:flex;align-items:center;justify-content:center;color:#64748b;cursor:pointer;background:transparent;border:none;border-radius:4px}
.auth-pwd-eye:hover{color:#0b2545;background:#f4f6f8}
.auth-pwd-eye svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.auth-pwd-hint{font-size:12px;color:#64748b;margin-top:-6px}
.auth-cb{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:13px;color:#475569;line-height:1.5;user-select:none}
.auth-cb input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;margin:1px 0 0;accent-color:#EA0649;cursor:pointer}
.auth-cb a{color:#EA0649;text-decoration:underline}
.auth-submit{padding:13px 20px;background:linear-gradient(165deg,#0b2545,#13315c);color:#fff;border:none;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .15s;font-family:inherit;margin-top:6px;min-height:44px}
.auth-submit:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(11,37,69,.25)}
.auth-submit:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.auth-error{background:#fee4e0;border:1px solid #f7c1c1;color:#a32d2d;padding:11px 14px;border-radius:8px;font-size:13px;line-height:1.45;margin-bottom:4px}
.auth-error strong{display:block;margin-bottom:3px;color:#791f1f;font-size:13.5px}
.auth-fineprint{font-size:11.5px;color:#64748b;line-height:1.5;margin-top:4px}
.auth-fineprint a{color:#EA0649;text-decoration:underline}
.auth-divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:#94a3b8;font-size:12px}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#dbe2ea}
.auth-foot{text-align:center;font-size:13px;color:#475569;margin-top:18px}
.auth-foot a{color:#EA0649;text-decoration:underline;cursor:pointer;background:none;border:none;font-family:inherit;font-size:13px}

/* SUCCESS MODAL */
.auth-success{padding:48px 36px;text-align:center}
.auth-success-ico{width:64px;height:64px;border-radius:50%;background:#f7e0e7;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:#830025}
.auth-success-ico svg{width:32px;height:32px;stroke:currentColor;fill:none;stroke-width:2.5}
.auth-success h2{font-family:'DM Serif Display',Georgia,serif;font-size:30px;color:#0b2545;letter-spacing:-.5px;margin-bottom:12px}
.auth-success p{font-size:14px;color:#475569;line-height:1.6;margin-bottom:8px;max-width:420px;margin-left:auto;margin-right:auto}
.auth-success-btn{margin-top:22px;padding:13px 28px;background:linear-gradient(165deg,#0b2545,#13315c);color:#fff;border:none;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit}

/* ACCOUNT PAGE MODAL — Profile / Favourites / Email Prefs */
.acct-ov{position:fixed;inset:0;background:rgba(11,37,69,.55);z-index:8500;display:none;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);overflow-y:auto}
.acct-ov.open{display:block}
.acct-modal{background:#fafbfc;min-height:100vh;width:100%;max-width:1280px;margin:0 auto;animation:slideUp .35s ease}
.acct-hdr{background:#fff;border-bottom:1px solid #eef2f7;padding:20px 32px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:5}
.acct-hdr h2{font-family:'DM Serif Display',Georgia,serif;font-size:26px;color:#0b2545;letter-spacing:-.4px}
.acct-x{width:36px;height:36px;border-radius:50%;background:#f4f6f8;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:18px;color:#0b2545;border:none}
.acct-x:hover{background:#e0e7ef}
.acct-body{display:flex;padding:24px 32px;gap:32px;max-width:1200px;margin:0 auto}
@media (max-width: 768px) {
  .acct-hdr{padding:16px 20px}
  .acct-body{padding:16px 20px;flex-direction:column;gap:20px}
}
.acct-side{flex:0 0 240px;background:#fff;border-radius:12px;border:1px solid #eef2f7;padding:8px;height:fit-content;position:sticky;top:96px}
@media (max-width: 768px) {
  .acct-side{position:static;flex:none;width:100%}
}
.acct-side-item{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:8px;font-size:13.5px;color:#475569;cursor:pointer;transition:all .12s;font-family:inherit;background:transparent;border:none;width:100%;text-align:left;font-weight:500}
.acct-side-item:hover{background:#f4f6f8;color:#0b2545}
.acct-side-item.on{background:#f7e0e7;color:#830025;font-weight:600}
.acct-side-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.acct-main{flex:1;min-width:0}
.acct-card{background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:24px 28px;margin-bottom:18px}
.acct-card h3{font-size:15px;font-weight:700;color:#0b2545;margin-bottom:18px;letter-spacing:-.2px}
.acct-card-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media (max-width: 600px) { .acct-card-row{grid-template-columns:1fr} }
.acct-field{display:flex;flex-direction:column;gap:5px}
.acct-field label{font-size:11.5px;font-weight:600;color:#64748b;letter-spacing:.3px;text-transform:uppercase}
.acct-field input,.acct-field select{padding:10px 13px;border:1.5px solid #dbe2ea;border-radius:8px;font-size:14px;color:#0b2545;background:#fff;font-family:inherit;width:100%}
.acct-field input:focus,.acct-field select:focus{border-color:#EA0649;outline:none}
.acct-btn{padding:10px 22px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.acct-btn:hover{background:#830025}
.acct-btn.outline{background:transparent;color:#0b2545;border:1.5px solid #dbe2ea}
.acct-btn.outline:hover{background:#f4f6f8;border-color:#0b2545}
.acct-btn.danger{background:transparent;color:#d63d2a;border:1.5px solid #f7c1c1}
.acct-btn.danger:hover{background:#fee4e0;border-color:#d63d2a}
.acct-btn:disabled{opacity:.5;cursor:not-allowed}
.acct-tabs{display:flex;gap:4px;border-bottom:1.5px solid #eef2f7;margin-bottom:20px}
.acct-tab{padding:10px 4px;font-size:14px;font-weight:600;color:#64748b;cursor:pointer;border:none;background:transparent;border-bottom:2px solid transparent;margin-bottom:-1.5px;font-family:inherit;letter-spacing:-.1px}
.acct-tab.on{color:#830025;border-bottom-color:#EA0649}
.acct-tab span{font-weight:400;color:#94a3b8;margin-left:5px;font-size:13px}
.acct-empty{background:#fff;border:1px solid #eef2f7;border-radius:12px;padding:60px 30px;text-align:center}
.acct-empty-ico{width:48px;height:48px;border-radius:50%;background:#f4f6f8;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;color:#94a3b8}
.acct-empty-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
.acct-empty h4{font-size:16px;font-weight:600;color:#0b2545;margin-bottom:6px}
.acct-empty p{font-size:13.5px;color:#64748b;max-width:380px;margin:0 auto;line-height:1.55}
.acct-fav-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.acct-fav-card{background:#fff;border:1px solid #eef2f7;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .15s}
.acct-fav-card:hover{border-color:#EA0649;box-shadow:0 6px 18px rgba(169,0,48,.12);transform:translateY(-2px)}
.acct-fav-img{aspect-ratio:16/10;background:#f4f6f8 center/cover}
.acct-fav-body{padding:14px 16px}
.acct-fav-price{font-size:18px;font-weight:700;color:#0b2545;letter-spacing:-.3px;margin-bottom:4px}
.acct-fav-addr{font-size:13px;color:#475569;margin-bottom:8px;line-height:1.4}
.acct-fav-meta{font-size:12px;color:#64748b;display:flex;gap:8px}
.acct-fav-meta span:not(:last-child)::after{content:'·';margin-left:8px;color:#cbd5e1}
.acct-fav-rm{margin-top:10px;padding:7px 12px;background:#fee4e0;color:#a32d2d;border:none;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;width:100%}
.acct-fav-rm:hover{background:#f7c1c1}
.acct-pref-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #eef2f7;gap:20px}
.acct-pref-row:last-child{border-bottom:none}
.acct-pref-info h4{font-size:14px;font-weight:600;color:#0b2545;margin-bottom:3px}
.acct-pref-info p{font-size:13px;color:#64748b;line-height:1.45}
.acct-pref-toggle{display:flex;gap:6px;flex-shrink:0}
.acct-pref-yn{padding:7px 16px;border:1.5px solid #dbe2ea;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;background:#fff;color:#475569;font-family:inherit}
.acct-pref-yn.on{background:#0b2545;color:#fff;border-color:#0b2545}
.acct-int-chips{display:flex;gap:8px;flex-wrap:wrap}
.acct-int-chip{padding:8px 18px;border:1.5px solid #dbe2ea;border-radius:8px;font-size:13px;font-weight:500;cursor:pointer;background:#fff;color:#0b2545;font-family:inherit}
.acct-int-chip.on{background:#0b2545;color:#fff;border-color:#0b2545}

/* LEGAL PAGES — Terms / Privacy */
.legal-modal{background:#fff;max-width:780px;width:100%;border-radius:16px;max-height:calc(100vh - 40px);overflow-y:auto;position:relative}
.legal-hdr{position:sticky;top:0;background:#fff;border-bottom:1px solid #eef2f7;padding:18px 28px;display:flex;align-items:center;justify-content:space-between;z-index:5}
.legal-hdr h2{font-family:'DM Serif Display',Georgia,serif;font-size:24px;color:#0b2545;letter-spacing:-.3px}
.legal-body{padding:28px 32px 36px;font-size:14px;color:#334155;line-height:1.7}
.legal-body h3{font-size:16px;font-weight:700;color:#0b2545;margin:24px 0 10px;letter-spacing:-.2px}
.legal-body h3:first-child{margin-top:0}
.legal-body h4{font-size:14px;font-weight:700;color:#0b2545;margin:18px 0 8px}
.legal-body p{margin-bottom:12px}
.legal-body ul{margin:8px 0 14px 22px}
.legal-body li{margin-bottom:6px}
.legal-body strong{color:#0b2545;font-weight:700}
.legal-body .legal-meta{font-size:12px;color:#64748b;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #eef2f7}
.legal-body .legal-callout{background:#fef3d9;border-left:3px solid #d4a24c;padding:13px 16px;margin:14px 0;border-radius:0 6px 6px 0;font-size:13.5px;color:#5a3a0e}
.legal-body .legal-callout strong{color:#854f0b}

img{display:block;max-width:100%}

/* ── NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:500;height:var(--navh);background:var(--navy);display:flex;align-items:center;padding:0 14px;gap:8px;border-bottom:1px solid var(--navy);box-shadow:none}
.logo{display:flex;align-items:center;gap:7px;cursor:pointer;flex-shrink:0;text-decoration:none}
.logo-mark{width:30px;height:30px;background:linear-gradient(135deg,var(--teal),var(--teal2));border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.logo-mark svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.logo-name{font-family:var(--serif);font-size:17px;color:#fff;white-space:nowrap}
.logo-name em{color:var(--teal2);font-style:italic}
.logo-name sup{font-size:7px;color:rgba(255,255,255,.3);font-family:var(--sans);vertical-align:super}
.nav-search{display:none}
.ns-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);width:13px;height:13px;stroke:rgba(255,255,255,.4);fill:none;stroke-width:2;pointer-events:none}
.nav-search input{width:100%;padding:7px 11px 7px 30px;border-radius:20px;border:1.5px solid rgba(255,255,255,.1);font-size:12.5px;background:rgba(255,255,255,.08);color:#fff;transition:all .15s}
.nav-search input::placeholder{color:rgba(255,255,255,.35)}
.nav-search input:focus{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);outline:none}
/* Premium right-aligned nav links — billion-$ luxury portal feel.
   Push links to the RIGHT next to the auth zone (bell + Join Free + hamburger). */
.nav-links{display:flex;gap:2px;margin-left:auto;justify-content:flex-end;flex-wrap:nowrap;overflow:visible;align-items:center}
.nl{color:rgba(255,255,255,.78);font-size:13.5px;font-weight:500;padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .12s,background .12s;white-space:nowrap;letter-spacing:.1px;font-family:var(--sans);text-decoration:none}
a.nl,a.nl:link,a.nl:visited{color:rgba(255,255,255,.78);text-decoration:none}
a.nl:hover{color:#fff;text-decoration:none}
@media(max-width:1500px){.nl-secondary{display:none}}
@media(max-width:1280px){.nl{padding:8px 10px;font-size:13px}}
@media(max-width:1100px){.nl{padding:7px 8px;font-size:12.5px}}
.nl:hover{color:#fff;background:rgba(255,255,255,.07)}
.nl.on{color:#fff;background:rgba(184,20,66,.18)}
/* "FREE" indicator — minimal pro style: tiny green dot, not a tacky pill */
.nl-free{display:inline-block;width:6px;height:6px;border-radius:50%;background:#EA0649;box-shadow:0 0 8px rgba(184,20,66,.6);margin-left:5px;vertical-align:middle}
/* Map nav button — premium teal accent with subtle border, slightly larger to draw conversion eyes */
.nl-map{color:#fff;font-weight:600;border:1px solid rgba(184,20,66,.45);margin-left:6px;display:inline-flex;align-items:center;background:rgba(184,20,66,.1);padding:7px 14px !important;border-radius:8px}
.nl-map:hover{color:#fff;background:#EA0649;border-color:#EA0649}
/* Talk to Agent — primary conversion CTA in nav (replaces Map; lead-gen focused) */
.nl-talk{color:#fff !important;font-weight:600 !important;background:#EA0649 !important;margin-left:6px;display:inline-flex !important;align-items:center;padding:8px 16px !important;border-radius:99px !important;box-shadow:0 2px 8px rgba(184,20,66,.35);transition:all .15s !important}
.nl-talk:hover{background:#EA0649 !important;box-shadow:0 4px 12px rgba(184,20,66,.5);transform:translateY(-1px)}
.nav-r{display:flex;gap:6px;flex-shrink:0;align-items:center;margin-left:8px;padding-left:10px;border-left:1px solid rgba(255,255,255,.1)}
.nb{display:flex;align-items:center;gap:4px;padding:6px 11px;border-radius:var(--r);font-size:12.5px;font-weight:500;color:rgba(255,255,255,.7);cursor:pointer;transition:all .15s;white-space:nowrap}
.nb:hover{background:rgba(255,255,255,.09);color:#fff}
.nb svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.nb-p{background:var(--teal);color:#fff!important;font-weight:600}
.nb-p:hover{background:var(--teal2)!important}
/* Mobile hamburger — pure icon, no chrome at all */
.mob-btn{display:none;background:transparent;border:none;color:#fff;padding:6px;cursor:pointer;flex-shrink:0;outline:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;box-shadow:none}
.mob-btn:hover,.mob-btn:focus,.mob-btn:active{color:#fff;background:transparent;outline:none;box-shadow:none}
/* Mobile Map button — HIDDEN (floating Map pill at bottom is more thumb-reachable) */
.mob-map-btn{display:none !important}

/* ═══════════ LOADING SKELETONS — premium polish while data loads ═══════════ */
.skeleton{background:linear-gradient(90deg,#f0f3f5 0%,#e6ebef 50%,#f0f3f5 100%);background-size:200% 100%;animation:skel 1.4s ease infinite;border-radius:6px}
@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}
.sk-card{background:#fff;border:1px solid #eef2f5;border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.sk-card-img{width:100%;height:170px}
.sk-card-body{padding:14px}
.sk-line{height:14px;margin-bottom:8px}
.sk-line.sk-line-lg{height:22px;width:50%;margin-bottom:10px}
.sk-line.sk-line-sm{height:10px;width:65%;margin-bottom:6px}
.sk-line.sk-line-xs{height:9px;width:40%}

/* ═══════════════════════════════════════════════════════════════════════════
   v304 ELITE — image loading polish.
   Every photo container (card thumbnail, building card, popup card, hero,
   gallery, building modal item) gets a subtle skeleton-shimmer background
   that pulses while the photo loads. The img itself fades in on load. So
   the user never sees broken/empty img boxes — every photo arrives with a
   smooth premium reveal.
   Implementation: pure-CSS shimmer on the container, opacity transition on
   the <img>. A tiny global JS hook adds `.cdg-loaded` to images on `load`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* v305 fix: targets ONLY containers whose photos are <img> tags. The
   v65-photogrid-hero and v65-photogrid-thumb use inline background-image
   instead of <img>, so applying a shimmer's 200% background-size to them
   stretches the photo offscreen. They're excluded from this list. */
.card-img,
.bldg-item-img,
.v69-bld-card-img,
.v280-card-img,
.mp-img-wrap,
.hp-fcard-img,
.hp-card-img,
.m-gallery-slide{
  background:linear-gradient(90deg,#eef2f5 0%,#e2e8ec 50%,#eef2f5 100%);
  background-size:200% 100%;
  animation:skel 1.6s ease-in-out infinite;
}
.card-img > img,
.bldg-item-img > img,
.v69-bld-card-img > img,
.v280-card-img > img,
.mp-img-wrap > img,
.hp-fcard-img > img,
.hp-card-img > img,
.m-gallery-slide > img{
  opacity:0;
  transition:opacity .35s ease;
}
.card-img > img.cdg-loaded,
.bldg-item-img > img.cdg-loaded,
.v69-bld-card-img > img.cdg-loaded,
.v280-card-img > img.cdg-loaded,
.mp-img-wrap > img.cdg-loaded,
.hp-fcard-img > img.cdg-loaded,
.hp-card-img > img.cdg-loaded,
.m-gallery-slide > img.cdg-loaded{
  opacity:1;
}
/* Once an image has loaded, kill the shimmer on the parent so it doesn't
   bleed through transparent PNG edges. */
.cdg-img-loaded-parent{
  background:#0c1f38 !important;
  animation:none !important;
}

/* ═══════════ v16 Fix 3: BOTTOM-SHEET MODAL (mobile filter dropdowns) ═══════════ */
.ms-ov{position:fixed;inset:0;z-index:680;display:flex;flex-direction:column;justify-content:flex-end;pointer-events:none}
.ms-ov.open{pointer-events:auto}
.ms-backdrop{position:absolute;inset:0;background:rgba(11,37,69,.42);opacity:0;transition:opacity .22s}
.ms-ov.open .ms-backdrop{opacity:1}
.ms-sheet{position:relative;background:#fff;width:100%;max-height:78vh;border-radius:18px 18px 0 0;box-shadow:0 -14px 40px rgba(11,37,69,.32);transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;overflow:hidden;z-index:1}
.ms-ov.open .ms-sheet{transform:translateY(0)}
.ms-hdr{padding:8px 18px 12px;border-bottom:1px solid #eef2f5;flex-shrink:0;position:relative;display:flex;flex-direction:column;align-items:stretch}
.ms-grabber{width:42px;height:4px;border-radius:2px;background:#d4dae2;margin:0 auto 10px}
.ms-title{font-family:var(--serif),Georgia,serif;font-size:18px;color:#0c1f38;font-weight:500;letter-spacing:-.2px;text-align:center;padding:0 36px;line-height:1.2}
.ms-close{position:absolute;top:14px;right:12px;width:32px;height:32px;border-radius:50%;background:#f4f6f8;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0c1f38}
.ms-close:hover{background:#e8ecf0}
.ms-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 12px calc(20px + env(safe-area-inset-bottom,0px))}
.ms-opt{display:flex;align-items:center;gap:12px;width:100%;padding:14px 14px;background:#fff;border:1.5px solid transparent;border-radius:12px;cursor:pointer;font-family:inherit;text-align:left;color:#0c1f38;font-size:15px;font-weight:500;transition:background .12s,border-color .12s;min-height:52px;-webkit-tap-highlight-color:transparent}
.ms-opt:hover{background:#f4f6f8}
.ms-opt:active{background:#eaeef2}
.ms-opt.ms-on{background:#faf0f3;border-color:#EA0649;color:#EA0649;font-weight:600}
.ms-opt-lbl{flex:1;line-height:1.25}
.ms-opt-sub{font-size:12px;color:#788a9d;font-weight:500;margin-top:2px}
.ms-opt-check{flex-shrink:0;color:#EA0649;visibility:hidden;stroke:currentColor;fill:none}
.ms-opt.ms-on .ms-opt-check{visibility:visible}
body.ms-open{overflow:hidden}
@media (min-width:769px){
  /* Desktop: keep the legacy in-place dropdown — sheet is reserved for mobile */
  .ms-sheet{max-width:480px;margin:0 auto;border-radius:18px}
  .ms-ov{justify-content:center;align-items:center}
  .ms-sheet{transform:translateY(20px) scale(.96);max-height:70vh}
  .ms-ov.open .ms-sheet{transform:translateY(0) scale(1)}
}

/* v16 Fix 7: Areas tool active — hide all map controls except the polygon
   overlays + the bottom "Tap neighborhoods" instruction bar.
   Existing JS sets `body.areas-tool-on`; we also accept `areas-tool-active`
   for forward-compat. */
body.areas-tool-on .fab-row,
body.areas-tool-on .map-cta-pills,
body.areas-tool-on .alert-pill,
body.areas-tool-on .mob-map-toolbar,
body.areas-tool-on .map-controls-top,
body.areas-tool-on .sticky-bar,
body.areas-tool-on .bot-tabs,
body.areas-tool-on .mapboxgl-ctrl-zoom-in,
body.areas-tool-on .mapboxgl-ctrl-zoom-out,
body.areas-tool-on .mapboxgl-ctrl-group,
body.areas-tool-active .fab-row,
body.areas-tool-active .map-cta-pills,
body.areas-tool-active .alert-pill,
body.areas-tool-active .mob-map-toolbar,
body.areas-tool-active .map-controls-top,
body.areas-tool-active .sticky-bar,
body.areas-tool-active .bot-tabs,
body.areas-tool-active .mapboxgl-ctrl-zoom-in,
body.areas-tool-active .mapboxgl-ctrl-zoom-out,
body.areas-tool-active .mapboxgl-ctrl-group{display:none !important}

/* ═══════════ FLOATING ACTION PILLS — Map + Create Alert (above bot-tabs, condos.ca style) ═══════════ */
.fab-row{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:540;gap:10px;pointer-events:none;transition:opacity .2s,transform .2s}
@media(max-width:768px){.fab-row{display:flex}}
/* Hide floating Map + Create Alert pills when a map listing popup is showing — gives the popup full breathing room */
body.mob-popup-open .fab-row{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(20px)}
/* v24 Fix 6: floating Map + Create Alert pills now show ONLY on the actual
   fullscreen map view. Hidden on Listings, Sold, Favourites, Listing Detail,
   homepage, and the desktop split view. (User: pills covered Sign-In-Required
   gated cards on Listings.)
   The default `.fab-row {display:none}` rule above means hidden everywhere
   except where we explicitly opt-in. Mobile fullscreen map = show. */
@media (max-width:768px){
  body.in-search.in-fullmap .fab-row,
  body.map-fs .fab-row{display:flex !important}
  /* Belt-and-suspenders: also hide if some other view body-class is active. */
  body.in-sold .fab-row,
  body.in-listings .fab-row,
  body.in-listing-detail .fab-row,
  body.modal-open .fab-row{display:none !important}
}
/* Default mobile rule: only show when explicitly on fullmap. */
@media (max-width:768px){.fab-row{display:none}}
/* The existing v23 .alert-pill (and related ad-pill) follows the same rule. */
@media (max-width:768px){
  body.in-sold .alert-pill,
  body.in-listings .alert-pill,
  body.modal-open .alert-pill{display:none !important}
}
.fab-pill{pointer-events:auto;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:13px 22px;min-width:140px;border:none;border-radius:99px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.1px;transition:all .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 6px 20px rgba(11,37,69,.22),0 2px 4px rgba(11,37,69,.1);-webkit-tap-highlight-color:transparent}
.fab-pill svg{stroke:currentColor;fill:none;flex-shrink:0}
.fab-pill-p{background:#0c1f38;color:#fff}
.fab-pill-p:hover,.fab-pill-p:active{background:#162845;transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,37,69,.28)}
.fab-pill-s{background:#fff;color:#0c1f38;border:1px solid #e0e6ec}
.fab-pill-s:hover,.fab-pill-s:active{background:#fff;color:#EA0649;border-color:#EA0649;transform:translateY(-1px);box-shadow:0 6px 18px rgba(11,37,69,.18)}

/* ═══════════ MOBILE BOTTOM TAB BAR — persistent app-like nav (mobile only) ═══════════ */
/* ═══════════ v18 Fix 1: COMPARE TRAY + MODAL ═══════════ */
.cmp-tray{position:fixed;left:14px;right:14px;bottom:calc(70px + env(safe-area-inset-bottom,0px));max-width:520px;margin:0 auto;background:#0c1f38;color:#fff;border-radius:14px;padding:10px 14px 10px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px;box-shadow:0 12px 32px rgba(11,37,69,.32),0 4px 10px rgba(11,37,69,.18);z-index:560;font-family:inherit;animation:cmpTraySlide .25s cubic-bezier(.2,.8,.2,1)}
@keyframes cmpTraySlide{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@media(min-width:769px){.cmp-tray{bottom:24px;left:auto;right:24px;max-width:none;width:auto}}
.cmp-tray[hidden]{display:none}
.cmp-tray-info{display:flex;align-items:baseline;gap:8px;min-width:0}
.cmp-tray-count{font-size:18px;font-weight:800;color:#e37f9b;font-feature-settings:"tnum" 1}
.cmp-tray-lbl{font-size:13px;color:rgba(255,255,255,.78);letter-spacing:-.1px}
.cmp-tray-actions{display:flex;gap:8px;flex-shrink:0}
.cmp-tray-clear,.cmp-tray-go{padding:9px 14px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;border:none;letter-spacing:-.1px;min-height:38px;transition:background .12s,transform .12s}
.cmp-tray-clear{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28)}
.cmp-tray-clear:hover{background:rgba(255,255,255,.1)}
.cmp-tray-go{background:#EA0649;color:#fff}
.cmp-tray-go:hover{background:#CE2C44;transform:translateY(-1px)}
/* When tray is visible, push the cards-grid up a bit so the tray doesn't cover the last row */
body.cmp-tray-open .cards-list,
body.cmp-tray-open .cards-grid,
body.cmp-tray-open .cards-mixed{padding-bottom:calc(200px + env(safe-area-inset-bottom,0px)) !important}

/* Compare modal */
.cmp-modal{position:fixed;inset:0;background:rgba(11,37,69,.6);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:780;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .2s}
.cmp-modal.open{opacity:1;pointer-events:auto}
.cmp-modal[hidden]{display:none}
.cmp-modal-hdr{flex-shrink:0;padding:14px 18px calc(14px + env(safe-area-inset-top,0px));padding-top:calc(14px + env(safe-area-inset-top,0px));background:#fff;border-bottom:1px solid #eef2f5;display:flex;align-items:center;justify-content:space-between;gap:12px;box-shadow:0 1px 0 rgba(11,37,69,.04)}
.cmp-modal-title{font-family:var(--serif),Georgia,serif;font-size:20px;color:#0c1f38;font-weight:500;letter-spacing:-.3px}
.cmp-modal-close{width:36px;height:36px;border-radius:50%;background:#f4f6f8;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0c1f38;flex-shrink:0;transition:background .12s}
.cmp-modal-close:hover{background:#e8ecf0}
.cmp-modal-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;background:#fafbfc;padding:14px 14px calc(20px + env(safe-area-inset-bottom,0px))}
.cmp-grid{display:grid;grid-template-columns:120px repeat(var(--cmp-cols, 2), minmax(140px, 1fr));gap:0;background:#fff;border:1px solid #eef2f5;border-radius:14px;overflow:hidden}
@media(min-width:769px){.cmp-grid{grid-template-columns:160px repeat(var(--cmp-cols, 2), minmax(180px, 1fr))}}
.cmp-row{display:contents}
.cmp-row .cmp-row-lbl,
.cmp-row .cmp-cell,
.cmp-row .cmp-col{padding:11px 14px;border-bottom:1px solid #eef2f5;font-size:13.5px;line-height:1.4;color:#0c1f38;display:flex;align-items:center;min-height:48px}
.cmp-row .cmp-row-lbl{background:#f7fafa;font-weight:600;color:#5a6e84;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-right:1px solid #eef2f5}
.cmp-row-hdr .cmp-row-lbl,
.cmp-row-hdr .cmp-col{padding:0;min-height:0}
.cmp-row-hdr .cmp-row-lbl{padding:11px 14px}
.cmp-col{flex-direction:column;align-items:stretch;border-bottom:1px solid #eef2f5;padding:0 !important}
.cmp-col-img{aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#dde3eb;position:relative}
.cmp-col-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;background:rgba(11,37,69,.78);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cmp-col-x:hover{background:#0c1f38}
.cmp-cell.cmp-win{background:#faf0f3;color:#EA0649;font-weight:700;position:relative}
.cmp-cell.cmp-win::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;background:#EA0649;border-radius:0 2px 2px 0}
.cmp-cell strong{font-size:15px;color:inherit;font-feature-settings:"tnum" 1}
.cmp-empty{padding:60px 20px;text-align:center;color:#788a9d;font-size:14px}
body.cmp-modal-open{overflow:hidden}

/* v18 Fix 5: Grouped-by-status listings rendering */
.cards-grouped{display:flex;flex-direction:column;gap:24px;padding:14px 14px calc(140px + env(safe-area-inset-bottom,0px))}
.cg-section{display:flex;flex-direction:column;gap:10px}
.cg-hdr{display:flex;align-items:baseline;gap:10px;padding:0 2px;border-bottom:1px solid #eef2f5;padding-bottom:8px}
.cg-title{font-family:var(--serif),Georgia,serif;font-size:20px;font-weight:500;color:#0c1f38;letter-spacing:-.3px;margin:0;flex:1}
.cg-count{font-size:14px;color:#5a6e84;font-weight:600;font-family:var(--sans);letter-spacing:.2px}
.cg-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.cg-more{align-self:flex-start;padding:9px 16px;background:transparent;border:1.5px solid #e5e9ee;border-radius:99px;color:#EA0649;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s;min-height:38px}
.cg-more:hover{background:#faf0f3;border-color:#EA0649}
.cg-section-sale .cg-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#0c1f38;margin-right:8px;vertical-align:middle}
.cg-section-rent .cg-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#EA0649;margin-right:8px;vertical-align:middle}
.cg-section-sold .cg-title::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#c0392b;margin-right:8px;vertical-align:middle}

/* v19 Fix 3: Bot-nav navy restyle. Brand navy bg matches the desktop top-nav,
   subtle border-top + drop shadow for depth, teal accent on the selected tab,
   muted teal-grey + light grey on unselected. Labels are #cdd5da (passes WCAG
   AA against navy at ~7.4:1; selected teal #EA0649 also passes). */
.bot-tabs{display:none;position:fixed;bottom:0;left:0;right:0;background:#0c1f38;border-top:1px solid rgba(255,255,255,.08);z-index:600;padding:6px 0 calc(6px + env(safe-area-inset-bottom,0px));box-shadow:0 -2px 8px rgba(0,0,0,.12)}
@media(max-width:768px){
  .bot-tabs{display:grid;grid-template-columns:repeat(4,1fr)}
  /* v311 Fix 1: ensure the body always extends to the *full* dynamic viewport
     so iOS Safari URL-bar collapse never reveals a white gap under the bot-tabs.
     100vh is the static fallback for browsers that ignore 100dvh. */
  html, body.in-search{min-height:100vh; min-height:100dvh}
  /* Push body content up so it doesn't hide behind the bar (~64px = 48 tab + 6 padding top + 6 padding bottom + ~4 cushion). Increased from 64 to 72 for safe-area phones. */
  body{padding-bottom:72px}
  /* Hide the legacy 2-button sticky bar — replaced by bot-tabs */
  .sticky-bar{display:none !important}
}
/* v19 Fix 3: bot-tab tones tuned for the new navy bg.
   • Unselected label: #cdd5da (~7.4:1 against #0c1f38 → WCAG AAA-eligible).
   • Unselected icon : #5a7480 (muted teal-grey, ~3.4:1 — meets non-text 3:1).
   • Selected      : #EA0649 brand teal (~4.6:1 — meets WCAG AA for text).
   • Tap target    : 48px min-height (>= 44pt). */
.bot-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:none;border:none;color:#cdd5da;cursor:pointer;padding:6px 4px;font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:-.1px;transition:color .15s;position:relative;min-height:48px}
.bot-tab svg{width:22px;height:22px;stroke:#5a7480;fill:none;stroke-width:2;transition:transform .15s,stroke .15s}
.bot-tab:hover{color:#fff}
.bot-tab:hover svg{stroke:#9aa5ad}
.bot-tab.active{color:#EA0649}
.bot-tab.active svg{transform:scale(1.1);stroke:#EA0649}
.bot-tab:focus-visible{outline:2px solid #EA0649;outline-offset:-2px;border-radius:6px}
.bot-tab-cta{color:#EA0649}
.bot-tab-cta svg{stroke:#EA0649}
.bot-tab-badge{position:absolute;top:2px;right:calc(50% - 18px);background:#e02a3c;color:#fff;font-size:9px;font-weight:700;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:1.5px solid #0c1f38}

/* ═══════════ MOBILE SLIDE-IN MENU PANEL — premium navy with brand teal accents ═══════════ */
.mm-ov{position:fixed;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:800;display:none;animation:mmFadeIn .2s ease}
.mm-ov.open{display:block}
@keyframes mmFadeIn{from{opacity:0}to{opacity:1}}
.mm-panel{position:absolute;top:0;right:0;bottom:0;width:88%;max-width:380px;background:#0c1f38;color:#fff;display:flex;flex-direction:column;overflow-y:auto;animation:mmSlideIn .3s cubic-bezier(.2,.8,.2,1);box-shadow:-12px 0 40px rgba(0,0,0,.4)}
@keyframes mmSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
.mm-hdr{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.1);flex-shrink:0}
.mm-logo{font-family:var(--serif);font-size:22px;color:#fff;cursor:pointer;letter-spacing:-.3px}
.mm-logo em{color:#EA0649;font-style:italic}
.mm-logo sup{font-size:9px;color:rgba(255,255,255,.4);font-family:var(--sans)}
.mm-close{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.mm-close:hover{background:rgba(255,255,255,.18)}
.mm-section{padding:18px 0 8px;border-bottom:1px solid rgba(255,255,255,.06)}
.mm-section:last-of-type{border-bottom:none}
.mm-section-lbl{font-size:10.5px;font-weight:700;color:rgba(184,20,66,.85);text-transform:uppercase;letter-spacing:1.5px;padding:0 22px;margin-bottom:6px}
.mm-link{display:flex;align-items:center;gap:14px;padding:14px 22px;color:#fff;text-decoration:none;font-size:15.5px;font-weight:500;cursor:pointer;transition:background .15s,padding .15s;position:relative;letter-spacing:-.1px}
.mm-link:hover{background:rgba(184,20,66,.12);padding-left:26px}
.mm-link svg{width:20px;height:20px;stroke:rgba(255,255,255,.6);fill:none;stroke-width:1.8;flex-shrink:0;transition:stroke .15s}
.mm-link:hover svg{stroke:#EA0649}
.mm-link-accent svg{stroke:#EA0649}
.mm-pill{margin-left:auto;background:#EA0649;color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:6px;letter-spacing:.4px}
/* Account section at top of mobile menu */
.mm-account{display:flex;gap:8px;padding:14px 22px 4px}
.mm-account-btn{flex:1;padding:11px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.1px;transition:all .15s;border:none}
.mm-account-signup{background:#EA0649;color:#fff;box-shadow:0 3px 10px rgba(184,20,66,.3)}
.mm-account-signup:hover{background:#EA0649}
.mm-account-login{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.25)}
.mm-account-login:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4)}
.mm-cta-section{padding:18px 22px;background:rgba(184,20,66,.08);border-top:1px solid rgba(255,255,255,.08)}
.mm-cta-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:#EA0649;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;box-shadow:0 4px 14px rgba(184,20,66,.4);letter-spacing:-.1px}
.mm-cta-primary:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,20,66,.5)}
.mm-foot{padding:18px 22px;border-top:1px solid rgba(255,255,255,.08);text-align:center}
.mm-foot-broker{font-size:11.5px;color:rgba(255,255,255,.55);font-weight:500;margin-bottom:4px}
.mm-foot-disc{font-size:10px;color:rgba(255,255,255,.35);letter-spacing:.5px}
.mob-btn:hover{color:#fff}
.mob-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;display:block}

/* ── FILTER BAR ── */
.fbar{position:fixed;top:var(--navh);left:0;right:0;z-index:400;background:#fff;height:var(--fh);display:flex;align-items:center;border-bottom:1px solid #eef2f5;box-shadow:0 1px 0 rgba(11,37,69,.04);padding:0 10px;gap:5px;overflow:visible}

/* For Rent / For Sale DROPDOWN button */
.type-wrap,.price-wrap{position:relative;flex-shrink:0}
.type-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--light);background:var(--white);font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;transition:all .15s;white-space:nowrap}
.type-btn:hover{border-color:var(--navy)}
.type-btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.type-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}

/* Type dropdown */
/* v9 Bug 2: type-dd is HARD-HIDDEN unless .open is set. The previous CSS used
   `display:none` (no !important) and was being beaten by other rules in some
   browser/state combinations, leaving "For Rent" / "Rented" peeking from the top.
   Force display:none with !important so the closed state is unconditionally hidden. */
.type-dd{position:absolute;top:calc(100% + 4px);left:0;background:var(--white);border:1px solid var(--light);border-radius:var(--rlg);box-shadow:var(--shlg);padding:4px;min-width:150px;z-index:500;display:none !important;visibility:hidden}
.type-dd.open{display:block !important;visibility:visible}
.type-dd:not(.open) .type-dd-item{display:none !important}
.type-dd-item{padding:10px 14px;border-radius:var(--r);font-size:14px;font-weight:500;cursor:pointer;transition:all .15s;color:var(--text);display:block}
.type-dd-item:hover{background:var(--off)}
.type-dd-item.on{background:var(--off);color:var(--navy);font-weight:600}
/* v23 Fix 3: muted "Coming soon" subtitle on the Pre-Construction dropdown item. */
.type-dd-sub{display:inline-block;margin-left:6px;font-size:11px;font-weight:600;color:#94a3b8;letter-spacing:.2px}
.type-dd-item.on .type-dd-sub{color:#5a6e84}

/* Price slider pill */
.price-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--light);background:var(--white);font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;transition:all .15s;white-space:nowrap}
.price-btn:hover{border-color:var(--navy)}
.price-btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.price-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}

/* Price dropdown with slider — condos.ca style */
/* v9 Bug 2: same hard-hide for price-dd. */
.price-dd{position:absolute;top:calc(100% + 4px);left:0;background:var(--white);border:1px solid var(--light);border-radius:var(--rlg);box-shadow:var(--shlg);padding:18px 20px 16px;width:340px;z-index:500;display:none !important;visibility:hidden}
.price-dd.open{display:block !important;visibility:visible}
/* v=430h — Item 146: ensure readability — navy text on light-grey
   chip background. Was rendering with low-contrast text under some
   theme overrides. */
.pd-current{display:inline-block;font-size:13px;font-weight:600;color:#0c1f38;background:#f1f5f9;padding:6px 12px;border-radius:8px;margin-bottom:18px}
/* Premium dual-handle range slider — billion-$ portal feel */
.pd-slider-wrap{position:relative;height:28px;margin:0 6px 22px;display:flex;align-items:center}
.pd-slider-track{position:absolute;left:0;right:0;height:5px;background:#e5e9ed;border-radius:99px;top:50%;transform:translateY(-50%)}
.pd-slider-fill{position:absolute;height:5px;background:#EA0649;border-radius:99px;pointer-events:none;top:50%;transform:translateY(-50%);box-shadow:0 0 0 1px rgba(184,20,66,.15)}
.pd-slider{position:absolute;left:-6px;right:-6px;width:calc(100% + 12px);-webkit-appearance:none;appearance:none;height:28px;background:transparent;outline:none;cursor:pointer;pointer-events:none}
.pd-slider::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;cursor:grab;pointer-events:auto;border:2.5px solid #EA0649;box-shadow:0 2px 6px rgba(11,37,69,.18),0 0 0 4px rgba(184,20,66,.0);position:relative;transition:box-shadow .15s,transform .1s}
.pd-slider::-webkit-slider-thumb:hover{box-shadow:0 2px 8px rgba(11,37,69,.22),0 0 0 6px rgba(184,20,66,.12)}
.pd-slider::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.08);box-shadow:0 4px 12px rgba(11,37,69,.28),0 0 0 8px rgba(184,20,66,.18)}
.pd-slider::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;cursor:grab;pointer-events:auto;border:2.5px solid #EA0649;box-shadow:0 2px 6px rgba(11,37,69,.18);transition:box-shadow .15s}
.pd-slider::-moz-range-thumb:hover{box-shadow:0 2px 8px rgba(11,37,69,.22),0 0 0 6px rgba(184,20,66,.12)}
.pd-slider.min-slider{z-index:3}
.pd-slider.max-slider{z-index:4}
.pd-slider::-webkit-slider-thumb::before{content:'';position:absolute;inset:-8px;border-radius:50%}
.pd-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:16px}
.pd-inp-wrap{position:relative}
.pd-inp{width:100%;padding:9px 11px;border:1.5px solid var(--light);border-radius:var(--r);font-size:13px;font-family:var(--sans);color:var(--navy);text-align:center;background:var(--white)}
.pd-inp:focus{border-color:var(--teal);outline:none}
.pd-dash{color:var(--mid);font-size:13px;user-select:none}
.pd-actions{display:flex;justify-content:space-between;align-items:center;padding-top:4px}
.pd-mob-hdr{display:none}
.pd-cancel{background:none;border:none;color:var(--navy);font-size:13.5px;font-weight:500;cursor:pointer;padding:6px 10px;font-family:var(--sans)}
.pd-cancel:hover{color:var(--mid)}
.pd-apply-btn{background:#EA0649;border:none;color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;padding:8px 18px;font-family:var(--sans);border-radius:8px;box-shadow:0 3px 10px rgba(184,20,66,.3);transition:all .15s}
.pd-apply-btn:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 5px 14px rgba(184,20,66,.4)}
.pd-apply-btn:hover{color:var(--teal2)}
/* v4 Fix 3c: NEW Price slider UI — title, presets, thumb bubbles, ± steppers, Cancel/Clear/Apply */
.pd-title{font-size:14.5px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:-.1px}
/* v26: Desktop hides chips entirely (replaced by .pd-list vertical list).
   Mobile (≤768px override below) shows chips with compact pattern. */
.pd-presets{display:none;margin:0}
.pd-presets:empty{display:none;margin:0}
/* Compact-chip pattern (active only on mobile via the @media block) — matches .fc / Building Age */
.pd-preset{padding:8px 14px;background:#fff;border:1.5px solid var(--light, #e5e9ee);color:var(--navy, #0c1f38);border-radius:99px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;white-space:nowrap;line-height:1;min-height:36px;display:inline-flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;user-select:none}
.pd-preset:hover{background:#f4f6f8;border-color:#cbd5d1}
.pd-preset.on{background:#0c1f38 !important;color:#fff !important;border-color:#0c1f38 !important;box-shadow:0 2px 6px rgba(11,37,69,.15) !important}
.pd-preset:focus-visible{outline:2px solid #EA0649;outline-offset:2px}
/* v26: DESKTOP — vertical list of preset options (mirrors .type-dd-item). Selected item shows ✓ checkmark. */
.pd-list{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.pd-list:empty{display:none;margin:0}
.pd-list-item{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-radius:8px;font-size:14px;font-weight:500;color:var(--text, #0c1f38);cursor:pointer;transition:background .12s,color .12s;font-family:inherit;line-height:1.2;-webkit-tap-highlight-color:transparent;user-select:none;border:none;background:#fff;text-align:left;width:100%}
.pd-list-item:hover{background:var(--off, #f4f6f8)}
.pd-list-item.on{background:var(--off, #f4f6f8);color:var(--navy, #0c1f38);font-weight:600}
.pd-list-item .pd-list-check{width:16px;height:16px;color:#EA0649;opacity:0;flex-shrink:0;margin-left:8px}
.pd-list-item.on .pd-list-check{opacity:1}
.pd-list-item-divider{border-top:1px solid #eef2f5;margin:6px 0 4px}
/* v26: Slider section is collapsible. Hidden by default on desktop; revealed when "Custom range" picked
   (body.pd-custom-mode or .price-dd.pd-custom). On mobile, always visible (compact chips on top). */
.price-dd:not(.pd-custom) .pd-slider-wrap,
.price-dd:not(.pd-custom) .pd-stepper-row{display:none}
.price-dd.pd-custom .pd-slider-wrap{display:flex}
.price-dd.pd-custom .pd-stepper-row{display:grid}
/* Thumb-label bubbles — sit above the thumbs and show the current $ value */
.pd-slider-wrap{position:relative;height:36px;margin:18px 6px 22px;display:flex;align-items:center}
.pd-thumb-bubble{position:absolute;top:-26px;transform:translateX(-50%);background:#0c1f38;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:5px;white-space:nowrap;pointer-events:none;letter-spacing:.1px;z-index:5;line-height:1.4;transition:opacity .15s}
.pd-thumb-bubble::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:4px solid transparent;border-top-color:#0c1f38}
/* DEFAULT-STATE TRACK FIX (no more "everything teal"): when the slider is at extremes,
   the fill is a desaturated teal so users don't think the whole range is "selected". */
.pd-slider-fill.is-default{background:#cdd5dc !important;box-shadow:none !important;opacity:.7}
/* NEW ± stepper row — inputs flanked by tappable +/- buttons */
.pd-stepper-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.pd-stepper-grp{display:flex;flex-direction:column;gap:4px}
.pd-stepper-lbl{font-size:10.5px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.4px}
.pd-stepper{display:flex;align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:8px;overflow:hidden;height:44px}
.pd-stepper:focus-within{border-color:#EA0649}
.pd-stepper .pd-step{width:36px;height:42px;background:#f7fafa;border:none;color:#0c1f38;font-size:18px;font-weight:400;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;transition:background .12s}
.pd-stepper .pd-step:hover{background:#fde2ea;color:#EA0649}
.pd-stepper .pd-step:active{background:#e7d1d7}
.pd-stepper .pd-step:disabled{color:#cbd5e1;cursor:not-allowed;background:#f7fafa}
.pd-stepper .pd-inp{flex:1;border:none;border-radius:0;padding:0 8px;height:100%;font-size:13px;font-weight:600;text-align:center;background:#fff;color:var(--navy);min-width:0}
.pd-stepper .pd-inp:focus{outline:none;background:#f7fafa}
/* CLEAR button (between Cancel and Apply) */
.pd-clear{background:transparent;border:1.5px solid var(--light);color:var(--mid);font-size:13.5px;font-weight:600;cursor:pointer;padding:7px 14px;font-family:var(--sans);border-radius:8px;transition:all .15s}
.pd-clear:hover{border-color:var(--navy);color:var(--navy)}
/* MOBILE: ± buttons get larger tap target, presets break to 2 cols max, action buttons fill width */
@media (max-width:768px){
  .pd-stepper{height:48px}
  .pd-stepper .pd-step{width:42px;height:46px;font-size:20px}
  .pd-stepper .pd-inp{font-size:14.5px}
  /* v26: MOBILE — show compact chips, hide desktop vertical list. Slider/inputs always visible. */
  .pd-list{display:none !important}
  .pd-presets{display:flex !important;flex-wrap:wrap;gap:6px;margin-bottom:14px}
  .pd-preset{padding:8px 14px;font-size:13px;min-height:36px;border-radius:99px;flex:0 0 auto;text-align:center;font-weight:600}
  /* On mobile, slider + min/max are always visible regardless of "Custom range" mode */
  .price-dd .pd-slider-wrap{display:flex !important}
  .price-dd .pd-stepper-row{display:grid !important}
  .pd-actions{display:grid !important;grid-template-columns:1fr 1fr 1.5fr !important;gap:8px !important}
  .pd-cancel,.pd-clear,.pd-apply-btn{padding:13px 0 !important;text-align:center;border-radius:10px !important;min-height:48px;font-size:14px !important}
  .pd-thumb-bubble{font-size:12px;padding:4px 9px}
}

/* ───────── v43 FIX 2 — Price modal radical simplification ─────────
   Drops chips, slider, and thumb-bubbles entirely. Keeps the Min/Max
   stepper inputs as the only visible UI. The slider DOM stays in place
   (hidden) so existing JS handlers (updatePriceSlider, stepPrice) keep
   working without modification.
   The user's bug: thumb labels were misaligned + chips/slider felt
   complex. The fix: remove every moving part except two number fields
   with -/+ steppers. Cancel + Apply at the bottom. */
.v43-pd-simple .v43-hidden,
.v43-pd-simple .pd-list,
.v43-pd-simple .pd-presets,
.v43-pd-simple .pd-slider-wrap,
.v43-pd-simple .pd-thumb-bubble,
.v43-pd-simple .pd-slider-track,
.v43-pd-simple .pd-slider-fill,
.v43-pd-simple .pd-slider,
.v43-pd-simple .pd-clear{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  width:0 !important;
  margin:0 !important;
  padding:0 !important;
  position:absolute !important;
  pointer-events:none !important;
  opacity:0 !important;
  z-index:-1 !important;
}
/* Stepper-row: side-by-side on desktop (existing 2-col grid is fine) */
.v43-pd-simple .v43-pd-row{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:14px !important;
  margin:6px 0 18px !important;
}
.v43-pd-simple .pd-stepper-lbl{
  font-size:11.5px !important;
  font-weight:700 !important;
  color:#475569 !important;
  text-transform:uppercase !important;
  letter-spacing:.5px !important;
  margin-bottom:6px !important;
}
.v43-pd-simple .pd-stepper{
  height:48px !important;
  border:1.5px solid #e5e9ed !important;
  border-radius:10px !important;
  background:#fff !important;
}
.v43-pd-simple .pd-stepper:focus-within{
  border-color:#EA0649 !important;
  box-shadow:0 0 0 3px rgba(184,20,66,.12) !important;
}
.v43-pd-simple .pd-step{
  width:42px !important;
  height:46px !important;
  font-size:22px !important;
  font-weight:500 !important;
  color:#0c1f38 !important;
  background:#f7fafa !important;
}
.v43-pd-simple .pd-step:hover{ background:#fde2ea !important; color:#EA0649 !important; }
.v43-pd-simple .pd-inp{
  font-size:15px !important;
  font-weight:600 !important;
  text-align:center !important;
  color:#0c1f38 !important;
  background:#fff !important;
  padding:0 6px !important;
}
.v43-pd-simple .v43-pd-actions{
  display:flex !important;
  gap:10px !important;
  justify-content:space-between !important;
  align-items:stretch !important;
  padding-top:6px !important;
  margin-top:0 !important;
}
.v43-pd-simple .v43-pd-actions .pd-cancel{
  flex:0 0 auto !important;
  padding:13px 22px !important;
  font-size:14.5px !important;
  font-weight:600 !important;
  color:#475569 !important;
  background:#fff !important;
  border:1.5px solid #e5e9ed !important;
  border-radius:10px !important;
  cursor:pointer !important;
  min-height:48px !important;
}
.v43-pd-simple .v43-pd-actions .pd-cancel:hover{
  border-color:#0c1f38 !important;
  color:#0c1f38 !important;
}
.v43-pd-simple .v43-pd-actions .pd-apply-btn{
  flex:1 !important;
  padding:13px !important;
  font-size:15px !important;
  font-weight:700 !important;
  background:#EA0649 !important;
  color:#fff !important;
  border:none !important;
  border-radius:10px !important;
  cursor:pointer !important;
  min-height:48px !important;
  box-shadow:0 4px 12px rgba(184,20,66,.32) !important;
}
.v43-pd-simple .v43-pd-actions .pd-apply-btn:hover{ background:#EA0649 !important; }
/* Mobile: stack Min and Max vertically (one stepper per row, tappable). */
@media (max-width:768px){
  .v43-pd-simple .v43-pd-row{
    grid-template-columns:1fr !important;
    gap:14px !important;
  }
  .v43-pd-simple .pd-stepper{ height:54px !important; }
  .v43-pd-simple .pd-step{ width:48px !important; height:52px !important; font-size:24px !important; }
  .v43-pd-simple .pd-inp{ font-size:16px !important; }
  .v43-pd-simple .v43-pd-actions .pd-cancel,
  .v43-pd-simple .v43-pd-actions .pd-apply-btn{
    min-height:54px !important;
    font-size:15.5px !important;
  }
}


/* More filters pill */
.more-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--r);border:1.5px solid var(--light);background:var(--white);font-size:13px;font-weight:500;color:var(--navy);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.more-btn:hover{border-color:var(--navy)}
.more-btn.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.more-btn svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2}

/* Get Alerts gold */
.alert-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--r);background:linear-gradient(135deg,#fef3c7,#fde68a);border:1.5px solid #fcd34d;font-size:13px;font-weight:600;color:#92400e;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}
.alert-btn:hover{background:linear-gradient(135deg,#fde68a,#fcd34d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(252,211,77,.35)}
.talk-btn{display:flex;align-items:center;gap:5px;padding:8px 14px;border-radius:var(--r);background:#EA0649;border:1.5px solid #EA0649;font-size:13px;font-weight:600;color:#fff;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;margin-left:6px}
.talk-btn:hover{background:#EA0649;border-color:#EA0649;transform:translateY(-1px);box-shadow:0 4px 12px rgba(184,20,66,.35)}
/* When the fbar Map button is active (viewing fullscreen map), invert it to navy so user knows what it does */
.talk-btn.on{background:#0c1f38;border-color:#0c1f38;color:#fff}
.talk-btn.on:hover{background:#13315c;border-color:#13315c}
@media (max-width: 768px){
  .talk-btn{display:none}  /* keeps mobile filter bar uncluttered; users still have nav button */
}
.alert-btn:hover{background:linear-gradient(135deg,#fde68a,#fbbf24)}
.fb-sep{width:1px;height:20px;background:var(--light);flex-shrink:0;margin:0 2px}

/* ── LAYOUT — 55% map, 45% listings ── */
.main{margin-top:calc(var(--navh)+var(--fh));display:flex;height:calc(100vh - var(--navh) - var(--fh));overflow:hidden}
/* Desktop: anchor .main to viewport with position:fixed so content cannot stretch it (defeats the bug where .main grew to 3843px in a 714px viewport) */
@media(min-width:769px){.main{position:fixed!important;top:calc(var(--navh) + var(--fh))!important;left:0;right:0;bottom:0;height:auto!important;margin-top:0!important}}
.list-pane{width:50%;flex-shrink:0;overflow:hidden;background:#ffffff;border-right:1px solid var(--light);display:flex;flex-direction:column}
.list-pane::-webkit-scrollbar{width:3px}
.list-pane::-webkit-scrollbar-thumb{background:var(--light);border-radius:3px}
.cards-scroll{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column}
.cards-scroll::-webkit-scrollbar{width:3px}
.cards-scroll::-webkit-scrollbar-thumb{background:var(--light);border-radius:3px}
.list-pane .list-hdr,.list-pane .lb-row{background:#ffffff}
.cards-mixed,.cards-grid,.cards-list{min-height:200px}
/* v12 Bug 1: map-pane and #map get explicit min-height so they can never collapse
   to zero from a parent layout bug. Container with zero height = blank map. */
.map-pane{flex:1;position:relative;background:var(--off2);min-height:60vh;overflow:hidden}
.map-pane #map{position:absolute;inset:0;min-height:60vh}
/* CONDOS.CA-STYLE count chip — top-left of map, clean white pill with subtle shadow */
.map-count-pill{position:absolute;top:16px;left:16px;background:#fff;color:#0c1f38;padding:9px 14px;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:-.1px;box-shadow:0 4px 14px rgba(11,37,69,.12),0 1px 3px rgba(11,37,69,.06);border:1px solid rgba(220,228,236,.6);z-index:14;display:inline-flex;align-items:center;gap:6px;font-feature-settings:"tnum" 1}
.map-count-pill::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#EA0649;box-shadow:0 0 0 0 rgba(184,20,66,.5);animation:mcpPulse 2s infinite}
@keyframes mcpPulse{0%,100%{box-shadow:0 0 0 0 rgba(184,20,66,.5)}50%{box-shadow:0 0 0 5px rgba(184,20,66,0)}}
@media (max-width: 880px){.map-count-pill{display:none}}

/* Draw feature — Zillow/Zoocasa style */
.map-draw-controls{position:absolute;top:14px;right:14px;z-index:16;display:flex;gap:8px}
.map-draw-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#fff;border:1.5px solid #e0e6ec;border-radius:8px;font-size:13px;font-weight:600;color:#0b2545;cursor:pointer;font-family:inherit;transition:all .15s;box-shadow:0 2px 8px rgba(0,0,0,.08);white-space:nowrap}
.map-draw-btn:hover{border-color:#EA0649;background:#faf0f3;box-shadow:0 4px 12px rgba(169,0,48,.15)}
.map-draw-btn svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor}
.map-draw-btn-remove{border-color:#0b2545;color:#0b2545;background:#fff}
.map-draw-btn-remove:hover{background:#f1f5f9}

/* Draw button inside the bottom-right map controls group (icon variant) */
.map-ctrl-btn.map-ctrl-draw{color:#EA0649}
.map-ctrl-btn.map-ctrl-draw:hover{background:#f0f7f5;color:#EA0649}
.map-ctrl-btn.map-ctrl-draw.on{background:#EA0649;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.map-ctrl-btn.map-ctrl-draw-remove{color:#dc2626}
.map-ctrl-btn.map-ctrl-draw-remove:hover{background:#fef2f2;color:#dc2626}

/* Drawing-mode banner across top of map */
.map-draw-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:17;background:rgba(11,37,69,.94);color:#fff;padding:10px 14px 10px 18px;border-radius:12px;display:flex;align-items:center;gap:14px;font-size:13.5px;box-shadow:0 8px 24px rgba(0,0,0,.28);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);max-width:calc(100% - 60px);animation:slideDown .25s ease}
@keyframes slideDown{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.map-draw-banner-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-draw-banner-text strong{font-weight:700}
.map-draw-banner-actions{display:flex;gap:6px;flex-shrink:0;align-items:center}
.map-draw-banner-undo{display:flex;align-items:center;gap:5px;padding:6px 10px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;border:none;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25);transition:all .15s}
.map-draw-banner-undo svg{width:13px;height:13px}
.map-draw-banner-undo:hover:not(:disabled){background:rgba(255,255,255,.12)}
.map-draw-banner-undo:disabled{opacity:.35;cursor:not-allowed}
.map-draw-banner-cancel,.map-draw-banner-apply{padding:7px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;border:none;transition:all .15s}
.map-draw-banner-cancel{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.35)}
.map-draw-banner-cancel:hover{background:rgba(255,255,255,.15)}
.map-draw-banner-apply{background:#EA0649;color:#fff;box-shadow:0 0 0 0 rgba(169,0,48,.4)}
.map-draw-banner-apply:hover:not(:disabled){background:#830025}
.map-draw-banner-apply:not(:disabled){animation:pulseGlow 1.6s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(169,0,48,.55)}50%{box-shadow:0 0 0 6px rgba(169,0,48,0)}}
.map-draw-banner-apply:disabled{opacity:.45;cursor:not-allowed;background:#475569}

/* While drawing, change cursor over map */
.map-pane.drawing #map,.map-pane.drawing .mapboxgl-canvas-container{cursor:crosshair !important}

/* Issue 5: APPLIED-BOUNDARY action bar — sits at the bottom of the map pane after Apply Boundary.
   Houses Save Boundary + Remove Boundary + Hide-listings-outside toggle. */
/* v80: compact applied-boundary chip — small horizontal pill that NEVER blocks
   the right-side tools rail (right:8px width:54px on mobile, right:16px on desktop).
   Sits under the "Back to list" button on mobile, top-left on desktop. */
.map-applied-bar{
  position:absolute;
  top:80px;
  left:16px;
  right:auto;
  bottom:auto;
  z-index:18;
  background:#fff;
  color:#0c1f38;
  padding:6px 8px 6px 12px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  box-shadow:0 6px 18px rgba(11,37,69,.14), 0 1px 3px rgba(11,37,69,.08);
  border:1px solid rgba(220,228,236,.7);
  max-width:calc(100% - 32px - 80px);
  animation:slideDown .25s ease;
  white-space:nowrap;
  overflow:hidden;
}
.map-applied-bar-info{display:inline-flex;align-items:center;gap:6px;color:#0b2545;font-weight:500;flex-shrink:0;min-width:0}
.map-applied-bar-info svg{width:13px;height:13px;color:#EA0649;flex-shrink:0}
.map-applied-bar-info strong{font-weight:700}
.map-applied-bar-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.map-applied-bar-toggle[hidden]{display:none !important}
.map-applied-bar-actions{display:inline-flex;gap:4px;flex-shrink:0;align-items:center}
.map-applied-bar-remove,.map-applied-bar-save{
  padding:5px 10px;border-radius:999px;
  font-size:11.5px;font-weight:700;cursor:pointer;font-family:inherit;
  border:none;transition:all .12s;white-space:nowrap;min-height:0;
  letter-spacing:-.1px;display:inline-flex;align-items:center;gap:4px;
}
.map-applied-bar-remove{background:#fef2f2;color:#dc2626;border:1px solid rgba(220,38,38,.25)}
.map-applied-bar-remove svg{flex-shrink:0;stroke:currentColor;fill:none}
.map-applied-bar-remove:hover{background:#fee2e2;border-color:rgba(220,38,38,.45)}
.map-applied-bar-save{background:#faf0f3;color:#EA0649;padding:5px 7px;border:1px solid rgba(158,13,54,.25)}
.map-applied-bar-save svg{stroke:currentColor;fill:none}
.map-applied-bar-save:hover{background:#f5dce3;border-color:rgba(158,13,54,.45)}

@media (max-width: 768px){
  /* v80: compact pill on mobile too. Sits under the "Back to list" button,
     reserves 78px on the right so it never overlaps the .mob-map-toolbar. */
  .map-applied-bar{
    position:fixed !important;
    top:calc(var(--navh, 56px) + 52px) !important;
    bottom:auto !important;
    left:12px !important;
    right:auto !important;
    max-width:calc(100% - 12px - 78px) !important;
    padding:5px 7px 5px 11px !important;
    font-size:12px !important;
    z-index:545 !important;
    flex-wrap:nowrap !important;
    border-radius:999px !important;
    gap:6px !important;
  }
  .map-applied-bar-info{flex:1 1 auto;justify-content:flex-start;font-size:11.5px;color:#0c1f38;min-width:0}
  .map-applied-bar-info svg{color:#EA0649}
  .map-applied-bar-actions{flex:0 0 auto !important;display:inline-flex !important;grid-template-columns:none !important;gap:4px !important}
  .map-applied-bar-remove,.map-applied-bar-save{
    font-size:11px !important;padding:4px 9px !important;
    min-height:0 !important;border-radius:999px !important;
  }
  .map-applied-bar-save{padding:4px 6px !important}
}

@media (max-width: 880px){
  /* v77: draw banner sits directly UNDER the "Back to list" button (top-left,
     ~10px + ~32px tall). Always clears the right-side .mob-map-toolbar
     (right:8px, width:54px). Locked with !important + bottom:auto so the
     banner can never drift to the bottom of the viewport. */
  .map-draw-banner{
    position:fixed !important;
    font-size:12px !important;
    padding:6px 10px !important;
    gap:8px !important;
    max-width:none !important;
    width:auto !important;
    left:12px !important;
    right:78px !important;
    top:calc(var(--navh, 56px) + 52px) !important;
    bottom:auto !important;
    transform:none !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
    align-items:center !important;
    z-index:545 !important;
    box-sizing:border-box;
  }
  .map-draw-banner-text{
    flex:1 1 auto;
    text-align:left;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.2;
    font-size:11.5px;
  }
  .map-draw-banner-text strong{display:none}
  .map-draw-banner-actions{flex:0 0 auto;gap:4px}
  .map-draw-banner-undo{padding:4px 6px;font-size:11px}
  .map-draw-banner-undo span{display:none}
  .map-draw-banner-cancel,.map-draw-banner-apply{padding:5px 10px;font-size:11.5px;min-height:0}
}

/* ── MAP CONTROLS (condos.ca style) ── */
/* v24 Fix 3: belt-and-suspenders against the "two stacked (i) info icons at
   bottom-left of map" bug (user IMG_4799). Mapbox's compact AttributionControl
   renders ONE info pill — anything else at the same position is a duplicate.
   Hide any second .mapboxgl-ctrl-attrib in the bottom-left container, plus
   any custom info-icon element that historically lived there. */
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib ~ .mapboxgl-ctrl-attrib{display:none !important}
.mapboxgl-ctrl-bottom-left .mapboxgl-ctrl-attrib + .mapboxgl-ctrl-attrib{display:none !important}
/* If our DOM ever rendered a custom .map-info-btn, .map-info-pill, or other
   info-icon-style affordance at the map's bottom-left, hide it so the only
   surviving (i) is Mapbox's mandatory attribution. */
.map-info-btn,.map-info-pill,.map-info-icon-fab,#map-info-btn,#map-info-pill{display:none !important}

.map-controls{position:absolute;z-index:15;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.map-controls>*{pointer-events:auto}
/* Top controls — view toggle centered at top */
/* TOP-CENTER pill bar (List / Split / Map) — clean horizontal toolbar floating above the map */
.map-controls-top{position:absolute;top:16px;left:50%;right:auto;transform:translateX(-50%);z-index:15;pointer-events:none}
.map-controls-top>*{pointer-events:auto}
/* DESKTOP: tools cluster top-right, zoom +/- pinned bottom-right (Condos.ca pattern).
   v4 Fix 2: tools are now ALWAYS visible — auto-fade has been REMOVED per user request. */
/* v=410g — Vertically centered on the right edge of the map. Transform
   anchor puts the visual center of the pill column at 50% of the map
   viewport. max-height + overflow-y let the pill scroll internally if a
   future tool addition pushes it past the viewport; the @media block
   below falls back to top:16px on very short viewports so the pill never
   spills off-screen on a 390x600 mobile-landscape orientation. */
/* v=429ap — Item 115 FINAL: right-side tool column anchored to the TOP
   of the map pane. top:24px matches the View toggle vertical baseline
   above the map so the two read as one row. No vertical centering — the
   pill grows downward from the top edge. */
.map-controls-bottom{position:absolute;top:24px;right:16px;bottom:auto;transform:none;display:flex;flex-direction:column;gap:10px;align-items:flex-end;max-height:calc(100% - 48px);overflow-y:auto;scrollbar-width:none}
/* v=429g — Item 63: hide the right-side map toolbar (Layers/Transit/
   Schools/Draw/Areas/Nearby) in List view. With no map visible those
   controls are inert and only add chrome. They reappear in Mixed view
   (cards + map split) and Map view (full map). Mobile keeps its own
   .mob-map-toolbar — unaffected. */
body.cdg-view-list .map-controls,
body.cdg-view-list .map-controls-bottom,
body.cdg-view-list .map-controls-zoom,
body.in-list .map-controls,
body.in-list .map-controls-bottom,
body.in-list .map-controls-zoom{display:none !important}
.map-controls-bottom::-webkit-scrollbar{display:none}
@media (max-height: 560px){
  /* If the toolbar would overflow a short viewport, abandon the centered
     anchor and pin to the top — better to truncate the bottom than to
     centre something that no longer fits. */
  .map-controls-bottom{top:16px;transform:none}
}
.map-controls-zoom{position:absolute;right:16px;bottom:36px;z-index:15;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.map-controls-zoom>*{pointer-events:auto}
@media (max-width: 768px){
  /* MOBILE: hide the right-side rail + bottom-right zoom — replaced by .mob-map-toolbar below */
  .map-controls-bottom{display:none}
  .map-controls-zoom{display:none}
}

/* v4 Fix 2: BOTTOM MAP TOOLBAR (mobile only) — always visible, anchored at the
   bottom of the map ABOVE the sticky "View N Listings" CTA. Compact horizontal layout:
   icon buttons in a row with subtle labels, ~56px tall, respects safe-area-inset-bottom.
   z-index sits above the map but below the listing-card overlay. */
/* v10 Bug 1: top-right vertical rail (Condos.ca pattern).
   v11 Bug 4: top anchor pushed lower (navh + mob-fh + 60px) so it clears the
   filter-pills row AND any dropdown that opens downward from those pills.
   Also auto-hides while a dropdown is open so the toolbar can never block a
   selection menu. */
/* v=484p — toolbar pushed to the very top edge of the map (8px below the
   filter pills row instead of +60px). Sits flush against the top of the map
   container so the user sees the tools immediately, not buried mid-map. */
.mob-map-toolbar{display:none;position:fixed;right:8px;top:calc(var(--navh,56px) + var(--mob-fh,100px) + 8px);z-index:540;background:rgba(255,255,255,.98);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border:1px solid rgba(11,37,69,.10);border-radius:14px;box-shadow:0 8px 24px rgba(11,37,69,.14),0 2px 6px rgba(11,37,69,.08);padding:4px;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:2px;height:auto;width:54px;max-height:calc(100vh - var(--navh,56px) - 200px);overflow-y:auto;transition:opacity .15s, transform .15s}
/* v11 Bug 4: auto-hide toolbar while any dropdown is open so it can't block. */
body.type-dd-open .mob-map-toolbar,
body.price-dd-open .mob-map-toolbar{opacity:0;pointer-events:none;transform:translateX(8px)}
/* v10 Bug 1: toolbar buttons in the new top-right vertical rail layout — compact,
   icon-on-top + label-below, full width of the rail. */
.mob-map-toolbar-btn{flex:0 0 auto;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px 2px;background:transparent;border:none;cursor:pointer;color:#0c1f38;font-family:inherit;font-size:9.5px;font-weight:600;line-height:1.1;border-radius:8px;min-height:44px;transition:background .12s, color .12s;letter-spacing:-.1px}
.mob-map-toolbar-btn:active{background:#faf0f3}
.mob-map-toolbar-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.mob-map-toolbar-btn.on{color:#EA0649}
.mob-map-toolbar-btn.on svg{color:#EA0649}
.mob-map-toolbar-btn.draw-pill svg{color:#EA0649}
.mob-map-toolbar-btn.draw-pill.on{background:#EA0649;color:#fff}
.mob-map-toolbar-btn.draw-pill.on svg{color:#fff}
/* v10 Bug 1: zoom +/- now stacks VERTICALLY at the bottom of the rail (was horizontal). */
.mob-map-toolbar-zoom{flex:0 0 auto;display:flex;flex-direction:column;align-items:stretch;border:1.5px solid #e0e6ec;border-radius:10px;overflow:hidden;background:#fff;margin:4px 0 0}
/* v=410l — mobile zoom +/− matches the desktop weight drop (500 → 300)
   so the glyph stops reading bold next to the line-icon tools above.
   Tap target stays 44px / 24px font for accessibility. */
.mob-map-toolbar-zoom .mob-map-toolbar-btn{min-height:44px;padding:0;font-size:24px;font-weight:300;color:#0c1f38;border-radius:0;display:flex;align-items:center;justify-content:center}
.mob-map-toolbar-zoom .mob-map-toolbar-btn:not(:last-child){border-bottom:1px solid #eef2f7}
@media (max-width: 768px){
  .mob-map-toolbar{display:flex}
  /* v14 Fix 4: hide map toolbar on non-map views (Sold, listing detail,
     building popup) so it doesn't fight with sticky bottom CTAs. The toolbar
     is only relevant when the user is on the actual search map view. */
  body.in-sold .mob-map-toolbar,
  body.bldg-sheet-open .mob-map-toolbar,
  body.modal-open .mob-map-toolbar,
  body:not(.in-search) .mob-map-toolbar{display:none !important}

  /* v14 Fix 2: Sticky-CTA clearance — ensure scrollable views reserve enough
     bottom padding so the bot-tabs (~60px) + floating Map/Create Alert pills
     (~52px) + safe-area-inset never cover the last row of content.
     Total reservation: 140px + safe-area-inset-bottom. */
  .cards-list,.cards-grid,.cards-mixed{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important}
  .sold-body{padding-bottom:calc(140px + env(safe-area-inset-bottom,0px)) !important}
  body.in-search #search-view,
  body.in-sold #sold-view,
  body:not(.in-search):not(.in-sold) #precon-view{padding-bottom:0}
  /* Listing-detail (`.m-modal`) bottom safe-area handled by .m-cta padding-bottom. */
}

/* v5 Critical 2: AREAS TOOL ACTION BAR — slides up from bottom, sits above the
   bottom toolbar. Mobile-first: 56pt buttons, full-width on phones. */
/* v387: property.ca-style hover label — rounded white pill, navy text,
   subtle shadow. Always 14px so it reads at any zoom level. */
.v311-area-tooltip{
  background:#fff;
  color:var(--brand-navy,#0c1f38);
  font-family:var(--sans,system-ui,-apple-system,sans-serif);
  font-size:13px;
  font-weight:600;
  letter-spacing:-.1px;
  padding:7px 13px;
  border-radius:999px;
  box-shadow:0 4px 14px rgba(11,37,69,.20), 0 1px 2px rgba(11,37,69,.10), 0 0 0 1px rgba(11,37,69,.06);
  white-space:nowrap;
  pointer-events:none;
  user-select:none;
  /* v=529a — subtle fade-in to match the 150-200ms hover polish on the
     polygon fill. Mapbox marker transforms cancel out so we animate
     opacity only. */
  animation: cdgTooltipFade .12s ease-out;
}
@keyframes cdgTooltipFade{ from { opacity:0 } to { opacity:1 } }
/* v7 Bug 10: areas-tool-bar pushed above the toolbar + bot-tabs. */
.areas-tool-bar{position:fixed;left:12px;right:12px;bottom:calc(130px + env(safe-area-inset-bottom,0px));z-index:545;background:#0c1f38;color:#fff;padding:14px 16px;border-radius:14px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 36px rgba(11,37,69,.32);animation:slideDown .25s ease}
.areas-tool-bar-info{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.areas-tool-bar-info strong{font-size:13.5px;font-weight:700;letter-spacing:-.1px}
.areas-tool-bar-info span{font-size:12px;color:rgba(255,255,255,.72)}
.areas-tool-bar-actions{display:flex;gap:8px;flex-shrink:0}
.areas-tool-cancel,.areas-tool-apply{padding:11px 18px;font-size:13.5px;font-weight:700;border-radius:10px;border:none;cursor:pointer;font-family:inherit;min-height:44px;transition:all .15s}
.areas-tool-cancel{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.areas-tool-cancel:hover{background:rgba(255,255,255,.1)}
.areas-tool-apply{background:#EA0649;color:#fff;box-shadow:0 4px 12px rgba(184,20,66,.4)}
.areas-tool-apply:hover{background:#EA0649}
@media (max-width:480px){
  .areas-tool-bar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 14px}
  .areas-tool-bar-actions{display:grid;grid-template-columns:1fr 2fr;gap:8px}
  .areas-tool-cancel,.areas-tool-apply{padding:13px 0;text-align:center}
}
/* While Areas tool is active, keep the bottom toolbar visible but dim non-Areas buttons */
body.areas-tool-on .mob-map-toolbar-btn:not(.areas-tool-btn){opacity:.45}
.mob-map-toolbar-btn.areas-tool-btn.on{background:#0c1f38;color:#fff}
.mob-map-toolbar-btn.areas-tool-btn.on svg{color:#fff}

/* v5 UX: CLEAR MAP BOUNDS button — small floating capsule above the toolbar */
/* v7 Bug 10: clear bounds + alert CTA pushed above the bottom toolbar (60px) +
   the bot-tabs (60+sai). Total clearance: 130px from viewport bottom. */
/* v23 Fix 2: Clear Map Bounds — teal outlined pill, stacks ABOVE the
   applied-boundary bar when both are visible, never overlaps the View
   Listings sticky CTA below. Min-height 40px for tap target. */
.map-clear-bounds-btn{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(150px + env(safe-area-inset-bottom,0px));z-index:535;background:#fff;color:#EA0649;border:1.5px solid #EA0649;border-radius:24px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 4px 14px rgba(158,13,54,.18);transition:all .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;letter-spacing:-.1px;min-height:40px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.map-clear-bounds-btn:hover{background:#faf0f3;color:#CE2C44;border-color:#CE2C44;box-shadow:0 6px 18px rgba(158,13,54,.28);transform:translateX(-50%) translateY(-1px)}
.map-clear-bounds-btn:focus-visible{outline:2px solid #EA0649;outline-offset:3px}
/* Stack ABOVE applied-boundary bar when both visible (mobile). Use a body
   class so we don't depend on :has() which Safari <15.4 doesn't support. */
body.draw-applied-on .map-clear-bounds-btn{display:none !important} /* v75: hide when boundary is applied — applied banner already has Clear Boundary */
@media (min-width:769px){
  /* Desktop has no bot-tabs — pull the Clear button closer to the bottom edge.
     Still leaves clearance for the View Listings sticky CTA when present. */
  .map-clear-bounds-btn{bottom:60px}
  body.draw-applied-on .map-clear-bounds-btn{bottom:140px}
}

/* v5 Mobile spec: FLOATING "Alert me of new listings" CTA — sits above Mapbox
   attribution. Soft conversion ask. Persistent throughout map browsing. */
/* v7 Bug 10: Alert CTA sits above the bottom toolbar with clear visible separation. */
/* v10 Bug 4: .map-alert-cta is HIDDEN by default. Only shown when body.in-search.
   v10 Bug 1: now sits at bottom:calc(75px + sai) — JUST above the bot-tabs (60px+sai)
   with 15px gap. The toolbar moved to top-right so there's no more collision. */
.map-alert-cta{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(75px + env(safe-area-inset-bottom,0px));z-index:535;background:#f5f0e8;color:#0c1f38;border:1px solid #e7dec9;border-radius:24px;padding:10px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;align-items:center;gap:8px;box-shadow:0 6px 18px rgba(11,37,69,.14);transition:all .15s;max-width:calc(100% - 24px);white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
body.in-search .map-alert-cta,body.map-fs .map-alert-cta{display:flex}
.map-alert-cta:hover{background:#efe7d3;transform:translateX(-50%) translateY(-1px);box-shadow:0 8px 22px rgba(11,37,69,.18)}
.map-alert-cta svg{width:14px;height:14px;stroke:#0c1f38;fill:none;stroke-width:2;flex-shrink:0}
@media (min-width:769px){
  /* On desktop the side rail and other affordances cover this need; keep the CTA visible but smaller */
  .map-alert-cta{bottom:48px;font-size:12.5px;padding:8px 14px}
}

/* v5 UX: persistent chip strip below the mobile search row showing all selected hoods */
.hood-chip-strip{display:none;flex-wrap:wrap;gap:6px;padding:8px 12px 4px;background:#fff;border-bottom:1px solid #eef2f7}
.hood-chip-strip:not(:empty){display:flex}
.hood-chip-strip-item{display:inline-flex;align-items:center;gap:6px;background:#0c1f38;color:#fff;border-radius:14px;padding:5px 4px 5px 10px;font-size:12px;font-weight:600;line-height:1.2}
.hood-chip-strip-x{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.18);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;font-size:12px;line-height:1}
.hood-chip-strip-x:hover{background:rgba(255,255,255,.32)}
.hood-chip-strip-clear{background:transparent;color:#EA0649;border:none;font-size:12px;font-weight:700;cursor:pointer;padding:5px 8px;font-family:inherit}
.hood-chip-strip-clear:hover{text-decoration:underline}

/* v5 UX: per-area selection summary inside the picker view (Condos.ca pattern) */
.fm-area-summary{margin:8px 12px 12px;padding:10px 12px;background:#faf0f3;border:1.5px solid #e7d1d7;border-radius:10px;display:flex;align-items:center;gap:8px;font-size:13px;color:#5b0c22;font-weight:600}
.fm-area-summary-x{margin-left:auto;width:24px;height:24px;background:transparent;border:none;color:#5b0c22;cursor:pointer;border-radius:50%;font-size:14px;line-height:1;font-family:inherit;display:inline-flex;align-items:center;justify-content:center}
.fm-area-summary-x:hover{background:rgba(91,12,34,.1)}
.fm-area-summary-clr{color:#EA0649;cursor:pointer;background:transparent;border:none;font-size:12.5px;font-weight:700;font-family:inherit;padding:0}
.fm-area-summary-clr:hover{text-decoration:underline}

/* v5 UX: "Show All" / "Hide All" link top of picker accordion */
.hood-picker-show-all{background:transparent;border:none;color:#EA0649;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;padding:6px 12px;margin:6px 12px 0;align-self:flex-start;border-radius:6px;transition:background .12s}
.hood-picker-show-all:hover{background:rgba(148,14,52,.08)}
.hood-picker-stats-link{display:flex;align-items:center;gap:6px;padding:14px 16px;color:#0c1f38;background:#f7fafa;border-top:1px solid #eef2f7;font-size:13px;font-weight:600;cursor:pointer;border:none;font-family:inherit;text-decoration:none}
.hood-picker-stats-link svg{width:16px;height:16px;stroke:#EA0649;fill:none;stroke-width:2;flex-shrink:0}
.hood-picker-stats-link:hover{background:#fde2ea}

/* v5 Mobile spec: INLINE filter pills below the search bar showing the CURRENT
   selected value (Condos.ca pattern from IMG_4395). 2-up grid: For Sale/Rent + Price. */
/* v20: filter pills row shown on BOTH mobile (existing 2-up grid) and desktop
   (auto-fit row). Mobile keeps the 2-up grid (Sort + More Filters are hidden
   on mobile because they're available elsewhere — sort-link in the lb-row,
   filter-icon in the search row). Desktop shows all 4 inline pills above the
   listings/map area as a clean horizontal row. */
.mob-inline-pills{display:none;grid-template-columns:1fr 1fr;gap:8px;padding:8px 12px;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid rgba(11,37,69,.06)}
.mob-inline-pill-ico{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;margin-right:4px}
@media (max-width:768px){
  /* Mobile: only Status + Price are shown inline; Sort/Filters live elsewhere. */
  .mob-inline-pill-desktop-only{display:none !important}
}
@media (min-width:769px){
  /* Desktop: show the 4-pill row above the search/map area as a horizontal
     auto-fit row (Condos.ca / Zoocasa pattern). */
  .mob-inline-pills{display:flex !important;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 16px;background:#fff;border-bottom:1px solid #eef2f5;grid-template-columns:none}
  .mob-inline-pills > .mob-inline-pill{flex:0 0 auto;width:auto;min-width:140px;max-width:240px;height:42px;padding:0 16px;font-size:13.5px}
  .mob-inline-pill-desktop-only{flex:0 0 auto !important;min-width:120px !important}
  /* v20: hide the legacy compact desktop type-btn/price-btn so we don't end
     up with two duplicate sets of controls on desktop. The .type-dd / .price-dd
     dropdown DOM stays intact (used by the bottom-sheet path on mobile,
     ignored on desktop now that the sheet covers both). */
  .fbar .type-wrap > .type-btn,
  .fbar .price-wrap > .price-btn,
  /* v21 Fix 2: hide the legacy .more-btn ("More Filters") on desktop too —
     v20 added a pill version (#mob-inline-filters) which is the single source
     of truth on desktop now. The .more-btn DOM stays as a defensive fallback. */
  .fbar .more-btn{display:none !important}
}
.mob-inline-pill{display:flex;align-items:center;justify-content:space-between;height:42px;background:#fff;border:1.5px solid #e0e6ec;border-radius:10px;padding:0 14px;font-size:13.5px;font-weight:600;color:#0c1f38;cursor:pointer;font-family:inherit;transition:border-color .12s, box-shadow .12s;text-align:left}
.mob-inline-pill:hover,.mob-inline-pill:focus{border-color:#EA0649;box-shadow:0 2px 8px rgba(169,0,48,.12);outline:none}
.mob-inline-pill.on{background:#0c1f38;color:#fff;border-color:#0c1f38}
.mob-inline-pill.on .mob-inline-pill-chev{color:#fff}
.mob-inline-pill-lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.mob-inline-pill-chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;margin-left:6px}
@media (max-width: 768px){
  .mob-inline-pills{display:grid}
  /* v6 Fix 1: hide the OLD .mob-dd-row pills on mobile — the new .mob-inline-pills
     (with current value labels) replaces them. Keep the .type-dd / .price-dd
     dropdowns themselves in the DOM so togglePriceDD/toggleTypeDD still works. */
  .fbar .mob-dd-row > .type-wrap > .type-btn,
  .fbar .mob-dd-row > .price-wrap > .price-btn{display:none !important}
  .mob-dd-row{display:contents !important}
  /* v=449d-7 P0 fix (Bug 3): "For Rent" was clipped to "For Ren" at 375px.
     Tighter horizontal padding + smaller right gap + lighter letter-spacing
     restores fit. Removed ellipsis truncation on the label (labels here are
     always short — Sale/Rent/Price/Sort — so truncation only ever masked a
     layout bug). */
  .mob-inline-pill{padding:0 10px;font-size:13px;height:42px;gap:4px}
  .mob-inline-pill-lbl{font-weight:600;letter-spacing:-.15px;overflow:visible;text-overflow:clip}
  .mob-inline-pill-chev{width:12px;height:12px;margin-left:2px}
}

/* v5 Mobile spec: DRAW MODE NAVY HEADER TAKEOVER (replaces the regular nav while drawing).
   Per IMG_4403/4404. Shows instructional copy + Cancel/Apply + "Add another shape" link. */
/* v38: draw-takeover redesigned — Zillow / Condos.ca pattern.
   Desktop (≥769px): anchored INSIDE .map-pane at top, position:absolute, no
     full-page dim, narrow card (max-content with min 320px), compact buttons
     in a row. Listings panel stays fully interactive.
   Mobile (≤768px): keeps the v23 centered upper-third pattern with subtle map
     dim, since the map is fullscreen on mobile and there's no listings panel
     to compete with.
   The element is now a child of .map-pane (line ~5810); position:absolute
     resolves to the map area on desktop. ═══════════════════════════════════ */

/* — Base (mobile-first) — centered upper-third of map, with subtle ::before dim — */
/* v64: compact draw banner — non-blocking top strip on the map, no dim overlay */
.draw-takeover{
  display:none;
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  background:rgba(11,37,69,.92);
  color:#fff;
  z-index:520;
  padding:8px 12px;
  text-align:left;
  border-radius:10px;
  box-shadow:0 8px 24px rgba(11,37,69,.28);
  border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  animation:drawTakeoverIn .25s cubic-bezier(.2,.8,.2,1);
  align-items:center;
  gap:10px;
  font-size:12.5px;
  pointer-events:auto;
}
.draw-takeover::before{ display:none !important; content:none }
.draw-takeover.on{display:flex !important}
@keyframes drawTakeoverIn{from{opacity:0;transform:translate(-50%,-8px) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1)}}

/* v78: mobile draw-takeover — locked UNDER the "Back to list" button at the
   top of the map. Always reserves 78px on the right so the Apply button can
   never slide behind the .mob-map-toolbar (right:8px, width:54px). Uses
   position:fixed + !important so it never drifts to the middle or bottom. */
@media(max-width:768px){
  .draw-takeover{
    position:fixed !important;
    top:calc(var(--navh, 56px) + 52px) !important;
    bottom:auto !important;
    left:12px !important;
    right:78px !important;
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    padding:8px 12px !important;
    transform:none !important;
    z-index:545 !important;
    box-sizing:border-box !important;
    flex-wrap:nowrap !important;
    justify-content:space-between !important;
  }
  .draw-takeover .draw-takeover-msg{
    font-size:12px !important;
    line-height:1.3 !important;
    margin:0 !important;
    flex:1 1 auto !important;
    min-width:0;
  }
  .draw-takeover .draw-takeover-actions{
    display:flex !important;
    gap:6px !important;
    flex-shrink:0 !important;
    margin:0 !important;
  }
  .draw-takeover .draw-takeover-cancel,
  .draw-takeover .draw-takeover-apply{
    padding:6px 12px !important;
    font-size:12px !important;
    min-height:32px !important;
    border-radius:8px !important;
  }
}

/* — Desktop (≥769px): anchored toast inside .map-pane, no global dim — */
@media (min-width:769px){
  .map-pane > .draw-takeover{
    /* Anchor to the map-pane (not viewport). .map-pane is position:relative
       so this resolves correctly inside the map area. */
    position:absolute !important;
    top:16px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:max-content !important;
    min-width:320px !important;
    max-width:calc(100% - 32px) !important;
    padding:14px 18px !important;
    text-align:left !important;
    background:rgba(11,37,69,.94) !important;
    border-radius:12px !important;
    box-shadow:0 8px 24px rgba(11,37,69,.28),0 1px 3px rgba(11,37,69,.16) !important;
    z-index:18 !important;  /* above map controls (z-index < 20) */
  }
  /* Kill the global dim on desktop — listings panel must stay interactive. */
  .map-pane > .draw-takeover::before{ display:none !important }
  /* Compact instruction text — no big serif title, just one clean line. */
  .map-pane > .draw-takeover .draw-takeover-msg{
    font-family:var(--sans, 'DM Sans'), system-ui, sans-serif !important;
    font-size:13.5px !important;
    font-weight:500 !important;
    line-height:1.4 !important;
    margin:0 0 12px !important;
    letter-spacing:-.05px !important;
    color:#fff !important;
    text-align:left !important;
  }
  /* Drop the giant teal pencil icon on desktop — too prominent for a toast. */
  .map-pane > .draw-takeover .draw-takeover-msg::before{ display:none !important }
  /* Action buttons stay in a row, smaller, right-aligned. */
  .map-pane > .draw-takeover .draw-takeover-actions{
    display:flex !important;
    gap:8px !important;
    grid-template-columns:none !important;
    max-width:none !important;
    margin:0 !important;
    justify-content:flex-end !important;
  }
  .map-pane > .draw-takeover .draw-takeover-cancel,
  .map-pane > .draw-takeover .draw-takeover-apply{
    padding:8px 16px !important;
    font-size:13px !important;
    font-weight:600 !important;
    min-height:36px !important;
    border-radius:8px !important;
  }
  /* "+ Add another shape" link below buttons — same row treatment. */
  .map-pane > .draw-takeover .draw-takeover-add{
    margin:8px 0 0 !important;
    font-size:12.5px !important;
    text-align:left !important;
    padding:0 !important;
  }
  /* v39: removed v38's `.map-pane.drawing > .draw-takeover { opacity:.88 }` +
     hover rule. The opacity shift was perceived as a background-color flicker
     when the card transitioned in/out of the drawing state and on hover. Kept
     simpler: card is always full opacity; user hides it via Cancel if it
     blocks polygon visibility. The card is small enough on desktop (max-content
     width, top-anchored) that it rarely covers anything meaningful anyway. */
}

.draw-takeover-msg{font-size:12.5px;font-weight:500;line-height:1.3;color:#fff;letter-spacing:-.1px;flex:1 1 auto;white-space:normal;margin:0}
.draw-takeover-msg::before{display:none !important;content:none}
.draw-takeover-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:340px;margin:0 auto}
.draw-takeover-cancel,.draw-takeover-apply{padding:12px;border-radius:10px;font-size:14.5px;font-weight:700;border:none;cursor:pointer;font-family:inherit;min-height:48px;transition:all .15s}
.draw-takeover-cancel{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.draw-takeover-cancel:hover{background:rgba(255,255,255,.12)}
.draw-takeover-apply{background:#EA0649;color:#fff}
.draw-takeover-apply:hover{background:#EA0649}
.draw-takeover-apply:disabled{opacity:.4;cursor:not-allowed;background:#475569}
.draw-takeover-add{display:block;margin:14px auto 0;background:transparent;border:none;color:#d37d95;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:underline;font-family:inherit;padding:6px 12px}
.draw-takeover-add:hover{color:#e6a5b7}
/* v45: keep normal nav padding during draw mode */
/* v49: Scott's request — hide ONLY the map control sidebar (Satellite, Subway,
   Nearby, Save) during draw mode. The Draw button itself, the filter bar, and
   the nav all stay visible. */
body.draw-mode-on .map-controls-bottom,
body.draw-mode-on .map-ctrl-pill:not(.map-ctrl-draw-pill):not(.map-ctrl-cancel-pill):not(.map-ctrl-clear-pill){
  display:none !important;
}
/* v49 (cont'd): now that we restored the filter bar in draw mode, we should NOT
   zero out --fh anymore — but we still want the layout robust. Leave the v47
   --fh/--mob-fh:0px rule as-is for any FUTURE element that hides fbar. */
/* v47: When fbar is hidden (draw mode), zero out --fh / --mob-fh so any
   element positioned with var(--fh) or calc(var(--navh) + var(--fh)) auto-
   reflows to fill the void. This is the "responsive" guarantee — no element
   should leave whitespace when the filter bar is removed. */
body.draw-mode-on{
  --fh:0px !important;
  --mob-fh:0px !important;
}
/* v=429b — Per-shape chips in the applied-boundary bar (Item 47). Each
   completed polygon gets one "Shape N ×" chip; the × removes that shape
   from the union while preserving the others. Chips wrap on narrow
   viewports so they never push the Save / Clear buttons off-screen. */
.draw-shape-chips{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:8px}
.draw-shape-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 10px;background:rgba(158,13,54,.12);border:1px solid rgba(158,13,54,.32);border-radius:14px;color:#0c1f38;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1;font-family:inherit;transition:background .12s,border-color .12s}
.draw-shape-chip:hover{background:rgba(158,13,54,.22);border-color:#EA0649}
.draw-shape-chip-lbl{letter-spacing:.1px}
.draw-shape-chip-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:rgba(11,31,56,.85);color:#fff;font-size:13px;font-weight:600;line-height:1}
/* v=429b — Draw mode KEEPS the list pane visible (Item 46). Previously the
   layout flipped to fullmap during Draw, hiding every card and breaking
   visual continuity with the listings the user was browsing. Match
   condos.ca: list stays on the left, map drawing canvas on the right.
   - Desktop mixed view: list-pane 50% / map-pane 50%.
   - Desktop fullmap view: untouched (already full-width map).
   - Mobile: untouched (map already full-width; list slides under). */
@media (min-width:881px){
  body.draw-mode-on.in-mixed .list-pane,
  body.draw-mode-on.cdg-view-mixed .list-pane{display:flex !important;width:50% !important;flex:0 0 50% !important}
  body.draw-mode-on.in-mixed .map-pane,
  body.draw-mode-on.cdg-view-mixed .map-pane{flex:1 1 50% !important;display:block !important}
  /* Mute the cards-list pointer events while drawing so a stray click on
     a card doesn't pull the user out of draw mode (matches condos.ca). */
  body.draw-mode-on.in-mixed #cards,
  body.draw-mode-on.cdg-view-mixed #cards{pointer-events:none;opacity:.78;transition:opacity .15s}
}
/* Also collapse the in-search top blur strip when in draw mode (it sits at
   top:var(--navh) with height var(--mob-fh) and shows as a white band). */
body.draw-mode-on.in-search::after{ display:none !important; }
body.draw-mode-on .map-draw-banner{display:none !important}
@media (min-width:600px){ .draw-takeover-actions{max-width:420px} }

/* v5 Mobile spec: tiered cluster pin styling — single = price label, small = count, medium = "X units" */
.mm-clust-2,.mm-clust-3{display:inline-flex;align-items:center;justify-content:center;background:#EA0649;color:#fff;border-radius:50%;border:2px solid rgba(255,255,255,.85);box-shadow:0 3px 10px rgba(11,37,69,.32)}
.mm-clust-2{width:28px;height:28px;font-size:12px;font-weight:800}
.mm-clust-3{padding:4px 10px;border-radius:14px;font-size:11.5px;font-weight:800;letter-spacing:-.1px}


/* Top-right: List/Mixed/Map horizontal group (condos.ca style) */
/* TOP-CENTER horizontal pill bar: List / Split / Map */
.view-ctrl-group{display:flex;flex-direction:row;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(11,37,69,.14),0 2px 6px rgba(11,37,69,.06);border:1px solid rgba(220,228,236,.8)}
.vcb{min-width:120px;height:48px;background:#fff;border:none;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:#0c1f38;border-right:1px solid #eef2f5;gap:8px;padding:0 18px;font-family:inherit;position:relative}
.vcb:last-child{border-right:none}
.vcb svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
.vcb-label{display:inline !important;font-size:13px;font-weight:600;letter-spacing:.1px;color:inherit;line-height:1}
.vcb:hover{background:#fbf5f7;color:#EA0649}
/* v172: selected state goes brand navy with white text — was teal which
   washed out into the white pill bg and looked unselected. */
.vcb.on{background:#0c1f38 !important;color:#fff !important;box-shadow:none !important}
.vcb.on svg{stroke:#e37f9b !important;color:#e37f9b !important}
.vcb.on .vcb-label{color:#fff !important}
.vcb.on:hover{background:#162845 !important;color:#fff !important}

/* Side controls group (Satellite/Subway/Nearby/Draw/Save) — premium card */
.map-ctrl-group{display:flex;flex-direction:column;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px rgba(11,37,69,.12),0 2px 6px rgba(11,37,69,.06);border:1px solid rgba(220,228,236,.5);margin-bottom:14px}
.map-ctrl-group:last-child{margin-bottom:0}
.map-ctrl-btn{width:42px;height:42px;background:transparent;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;color:#475569;border-bottom:1px solid #f1f4f7;padding:0;position:relative}
.map-ctrl-btn:last-child{border-bottom:none}
.map-ctrl-btn:hover{background:#f0f7f5;color:#EA0649}
.map-ctrl-btn.on{background:#EA0649;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.map-ctrl-btn.on:hover{background:#EA0649;color:#fff}
.map-ctrl-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;transition:transform .15s}
.map-ctrl-btn:hover svg{transform:scale(1.08)}
.map-ctrl-lbl{display:none}
.map-ctrl-zoom{font-size:26px;font-weight:300;color:#0c1f38}
/* v=410d — legacy .map-ctrl-zoom-group standalone styling kept as a no-op
   guard so old SSR/cached HTML doesn't paint a second floating pill. Now
   the zoom group lives INSIDE .map-ctrl-pill-stack and inherits the
   wrapper's background. The standalone bg/border/shadow that used to make
   it a separate floating pill have been zeroed. */
.map-ctrl-zoom-group{background:transparent;border:none;box-shadow:none;border-radius:0;width:auto;overflow:visible;margin:0}
.map-ctrl-zoom-group .map-ctrl-btn{width:42px;height:40px}

/* v=410d — Merged map-toolbar pill column. Wraps the tools group + zoom
   group into ONE rounded white pill on the right side of the desktop map.
   The wrapper paints the pill (bg, radius, shadow, border). Inner groups
   go transparent. A 1px hairline sits BETWEEN Nearby and "+" via a
   .map-ctrl-zoom-group { border-top } rule, exactly mimicking
   property.ca's stacked-control pattern. Sits at top-right; zoom-pill is
   the bottom segment, no gap from tools. */
.map-ctrl-pill-stack{
  background:#fff;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(11,37,69,.12), 0 2px 6px rgba(11,37,69,.06);
  border:1px solid rgba(11,37,69,.06);
  width:64px;
  overflow:hidden;
}
.map-ctrl-pill-stack .map-ctrl-pills{
  /* Tools group now sits inside the wrapper. Reset its own pill chrome —
     the wrapper carries it now. */
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  width:auto;
  padding:6px;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
}
.map-ctrl-pill-stack .map-ctrl-zoom-group{
  /* Zoom group also flushed against the wrapper. The 1px divider above
     creates the visual grouping cue Scott asked for. */
  border-top:1px solid rgba(11,31,56,.08);
  padding:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
}
/* v=410e — zoom buttons sized to match condos.ca's spec: 44x44 tap
   target, 24px glyph, weight 500 so the "+" / "−" reads obvious on
   touch. The .map-ctrl-pill base rule comes LATER in this file with
   font-size:10.5px;font-weight:600 — earlier this block lost the
   cascade. Solved by upping the specificity to .map-ctrl-pill.map-ctrl-
   zoom-pill (two class selectors), which beats the single-class base
   rule and also future-proofs against base-rule edits. */
/* v=430h — Item 145: zoom +/- as outlined-square buttons in a different
   visual register from the tool pills above. Centered within the 64px
   column, 36px tall, navy-tinted 1px border, 8px radius. */
.map-ctrl-pill.map-ctrl-zoom-pill{
  font-size:18px;
  font-weight:400;
  color:#0c1f38;
  line-height:1;
  padding:0;
  height:36px;
  width:36px;
  min-width:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:4px auto;
  background:#ffffff;
  border:1px solid rgba(12,31,56,.08);
  border-radius:8px;
  transition:background .15s, border-color .15s;
}
.map-ctrl-pill.map-ctrl-zoom-pill > span{ display:none }
.map-ctrl-pill.map-ctrl-zoom-pill svg{ display:none }
.map-ctrl-pill.map-ctrl-zoom-pill:hover{ color:#0c1f38; background:#f1f5f9; border-color:rgba(12,31,56,.15) }

/* v154: Map control buttons — rounded squares with icon ABOVE label, mirroring
   the mobile toolbar style. User wanted the names visible like on mobile.
   Sits on the right rail, stacked vertically. */
/* v=429ay — Item 121: shrink desktop toolbar AGAIN. 64px wide (was 72),
   10px container padding (was 12), 2px gap (was 4). Pairs with the
   smaller 28px icon-circle treatment below (14px svg + 7px padding). */
/* v=430h — Item 145: elite polish. 64px wide, soft white card with
   subtle outline + dual shadow. 12px vertical padding gives breathing
   room around each tool. */
.map-ctrl-pills{flex-direction:column;gap:0;background:#ffffff;padding:12px 0;align-items:stretch;width:64px;border-radius:14px;box-shadow:0 8px 24px rgba(12,31,56,.10), 0 1px 3px rgba(12,31,56,.06);border:1px solid rgba(12,31,56,.06)}
.map-ctrl-pill{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;
  width:auto;height:auto;padding:8px 4px;border-radius:8px;
  background:transparent;
  border:none;
  cursor:pointer;transition:all .15s ease;
  color:#0b2545;font-family:inherit;
  font-size:10.5px;font-weight:600;letter-spacing:.1px;line-height:1.1;
  box-shadow:none;
  white-space:nowrap;
  text-align:center;
}
.map-ctrl-pill > span{
  /* Show the label below the icon on desktop, like the mobile toolbar */
  display:block;font-size:10.5px;font-weight:600;color:#0b2545;
  position:static;width:auto;height:auto;clip:auto;
}
.map-ctrl-pill svg{width:18px;height:18px;flex-shrink:0;color:#475569;display:block}
.map-ctrl-pill:hover{ background:#f1f5f9 }
.map-ctrl-pill:hover svg{color:#EA0649}
.map-ctrl-pill:hover > span{color:#EA0649}
.map-ctrl-pill:active{transform:scale(.97)}
/* v=410h — Per locked map-pin spec: toolbar buttons in the ON state use
   brand navy (#0c1f38), NOT teal. Teal is reserved for content surfaces
   (the "N units" stack pin, popup chips, save-search affordances). Mixing
   teal on the tool rail confused the visual hierarchy. Active toolbar
   state is now identical across every button — Layers, Transit, Schools,
   Draw, Areas (off-state default), Nearby. Areas in its hood-selected
   state continues to read red (.selected rule below). */
/* v=429af — Item 101: map toolbar with light-green tinted icon circles
   per Scott's screenshot. Each SVG gets its own 36×36 circular tinted
   bg; the button frame and the label below stay transparent/navy. Active
   tool's circle fills brand teal with a white icon, label flips teal.
   Radio-button feel — only the engaged tool stands out, others read as
   soft tinted circles on the white toolbar column. */
/* v=429ai — Item 105: shrunk map toolbar back to compact size so it
   doesn't compete with the big top-middle View toggle. 16×16 SVG +
   6px padding = 28px icon circle; label 11px. Light-green resting +
   teal active from Item 101 preserved. */
/* v=429am — Items 110+111: map toolbar uses the "toggle" pattern —
   grey resting circle (#f1f5f9 backplate behind a navy icon), white
   active circle with brand-teal icon + teal label. Keeps the right-rail
   distinct from the solid-teal View toggle pattern. */
/* v=430h — Item 145: 32px icon circle (was 28). Hover applies subtle
   navy tint to the whole tool row (not just the icon). Active gets
   brand-teal solid fill + teal halo glow + white icon + teal label. */
.map-ctrl-pill{ background:transparent; padding:8px 4px; gap:4px; transition:background .15s }
.map-ctrl-pill svg{
  color:#0c1f38 !important;
  background-color:#f1f5f9;
  border-radius:50%;
  box-sizing:content-box;
  padding:8px;
  width:16px !important; height:16px !important;
  transition:background-color .18s, color .18s, box-shadow .18s, transform .15s;
}
.map-ctrl-pill > span{ color:#0c1f38 !important; font-size:11px; font-weight:500; margin-top:4px; transition:color .15s }
.map-ctrl-pill:hover{ background:rgba(12,31,56,.04) }
.map-ctrl-pill:hover svg{ background-color:#e2e8f0 }
/* Active state: brand-teal solid + halo glow, white icon, teal label. */
.map-ctrl-pill.on{ background:transparent }
.map-ctrl-pill.on svg{ background-color:#EA0649 !important; color:#ffffff !important; box-shadow:0 4px 10px rgba(158,13,54,.30) }
.map-ctrl-pill.on > span{ color:#EA0649 !important; font-weight:600 }
.map-ctrl-pill.on:hover svg{ background-color:#8a0b2f !important }
/* Top-middle floating List|Mixed|Map toggle keeps its own navy active
   treatment, set inline below (cdg-vt-floating .on — Item 102). */
/* And the top-middle floating List|Mixed|Map toggle gets the same active
   treatment — brand teal fill, white icon + label — matching Scott's
   "active = brand teal filled pill" spec for the canonical view toggle. */
/* v=429ac — Item 99: view toggle active state in BRAND NAVY (was teal
   per Item 95 — Scott reverted to navy for the segmented pill so it
   doesn't compete with the right-rail map toolbar's teal active fill).
   All three options (List / Mixed / Map) visible at every breakpoint
   inside the floating pill; the only earlier hide was on the in-toolbar
   COPY which is intentional. */
/* v=429ak — Item 107 FINAL: View toggle matches the Listings|Buildings
   tab pattern (Item 100). Mixed is restored as a button option.
   Container = light grey #f1f5f9 backplate, active option = white pill
   with teal #0d8a99 text + icon + subtle shadow. Reads as cohesive with
   the inline tab below the heading. */
.cdg-vt-floating .cdg-vt-btn[data-view="list"],
.cdg-vt-floating .cdg-vt-btn[data-view="mixed"],
.cdg-vt-floating .cdg-vt-btn[data-view="map"]{display:inline-flex !important}
/* v=429aq — Item 117: dial Item 116 back. The 22/30 + 17px/600 jump
   was too far — the active teal pill grew so large it ate the white
   container padding visually. Restored moderate sizing: 14/24 padding,
   15px / 500 weight, 20px glyphs with normal stroke. Total height now
   ~58–62px with clear white border visible around the active pill. */
.cdg-vt-floating .cdg-vt-btn{
  background:transparent;
  color:#475569;
  font-weight:500;
  font-size:14px;
  /* v=429av — Item 120A: SHRINK. Item 118 was too big — toggle dwarfed
     the Get Alerts + Filter pills (~40-44px). Down to 10/20 padding,
     14px font, 18px icons → container ~52-56px tall, balanced with
     the rest of the toolbar. */
  padding:10px 20px;
  gap:6px;
  /* Base .cdg-vt-btn at line ~2274 hardcodes height:30px which caps
     the floating toggle. Force auto so padding drives the size. */
  height:auto !important;
  min-height:auto;
}
.cdg-vt-floating.cdg-vt{ height:auto !important }
/* v=429av — Item 120A: 18px glyph (was 20px) — pairs with smaller pill. */
.cdg-vt-floating .cdg-vt-btn svg{ stroke:#475569; width:18px; height:18px; stroke-width:2 }
.cdg-vt-floating .cdg-vt-btn:hover{ color:#0c1f38; background:rgba(12,31,56,.05) }
.cdg-vt-floating .cdg-vt-btn:hover svg{ stroke:#0c1f38 }
/* v=429al — Item 108 (unified): active option = solid brand teal +
   white text/icon. Matches the Get Alerts button + every segmented
   control across the site. Replaces the v=429ak white-pill-teal-text
   pattern with the louder selected state Scott requested. */
/* v=430i — Item 150: View toggle active state moves to Tier 3 (navy
   filled, white text) per unified hierarchy spec. Get Alerts keeps
   solid teal (Tier 1); More Filters outlined teal (Tier 2); view-mode
   nav active uses navy so it doesn't compete with the teal CTA. */
.cdg-vt-floating .cdg-vt-btn.on{ background:#0c1f38; color:#ffffff; font-weight:600; box-shadow:0 1px 3px rgba(12,31,56,.20) }
.cdg-vt-floating .cdg-vt-btn.on svg{ stroke:#ffffff }
.cdg-vt-floating .cdg-vt-btn.on:hover{ background:#1a3258; color:#ffffff }
.cdg-vt-floating .cdg-vt-btn.on:hover svg{ stroke:#ffffff }

/* v387 — Areas-button 3-state palette (overrides the generic teal .on style):
     • Off:      grey icon + grey label, white pill background (default)
     • On:       Areas mode active, dark navy fill, white icon/text
     • Selected: a hood/super-area is filter-active, red fill, white icon/text */
#areas-btn.on, #mob-areas-toggle-btn.on{ background:#0c1f38; color:#fff }
#areas-btn.on svg, #mob-areas-toggle-btn.on svg{ color:#fff }
#areas-btn.on > span, #mob-areas-toggle-btn.on > span{ color:#fff }
#areas-btn.on:hover, #mob-areas-toggle-btn.on:hover{ background:#1a2f4d }
#areas-btn.selected, #mob-areas-toggle-btn.selected{ background:#dc2626; color:#fff }
#areas-btn.selected svg, #mob-areas-toggle-btn.selected svg{ color:#fff }
#areas-btn.selected > span, #mob-areas-toggle-btn.selected > span{ color:#fff }
#areas-btn.selected:hover, #mob-areas-toggle-btn.selected:hover{ background:#b91c1c }
/* Draw button: brand teal accent at rest */
.map-ctrl-draw-pill svg{color:#EA0649}
.map-ctrl-draw-pill:hover svg{color:#CE2C44}
.map-ctrl-draw-pill.on{background:#EA0649;border-color:#EA0649}
.map-ctrl-draw-pill.on svg{color:#fff}
/* Save / favourite-style accent */
.map-ctrl-save-pill svg{color:#EA0649}
.map-ctrl-save-pill:hover svg{color:#CE2C44}
/* Remove / cancel: red accent */
.map-ctrl-draw-remove-pill svg{color:#dc2626}
.map-ctrl-draw-remove-pill:hover{border-color:rgba(220,38,38,.4)}
.map-ctrl-draw-remove-pill:hover svg{color:#b91c1c}
/* v154: Tooltips disabled — labels are visible inline now */
.map-ctrl-pill::after,.map-ctrl-pill::before{display:none !important}

/* Hover tooltip — appears on the LEFT of the button */
.map-ctrl-btn[data-tip]:hover::after{content:attr(data-tip);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background:#0b2545;color:#fff;padding:7px 12px;border-radius:7px;font-size:12.5px;font-weight:500;white-space:nowrap;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.2);z-index:30}
.map-ctrl-btn[data-tip]:hover::before{content:'';position:absolute;right:calc(100% + 4px);top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:#0b2545;pointer-events:none;z-index:30}

@media (max-width: 768px){
  .map-ctrl-btn{width:44px;height:44px}
  .map-ctrl-btn svg{width:18px;height:18px}
  .map-ctrl-zoom-group{width:52px}
  .map-ctrl-zoom-group .map-ctrl-btn{width:52px;height:42px}
  /* v=429ay — Item 123: mobile toolbar = icon-only column (no labels).
     Matches Google Maps mobile pattern. 52px column, 28px icon circle,
     14px svg. Labels hidden. Active state continues to use the white
     pill + teal icon treatment from the desktop rules above. */
  .map-ctrl-pills{width:52px;padding:8px 0;gap:2px}
  .map-ctrl-pill{padding:6px 4px;gap:0}
  .map-ctrl-pill > span{display:none !important}
  .map-ctrl-pill svg{width:14px !important;height:14px !important;padding:7px}
  /* No tooltips on mobile (no hover) */
  .map-ctrl-btn[data-tip]:hover::after,.map-ctrl-btn[data-tip]:hover::before{display:none}
}

/* User location pin (Google Maps blue dot style) */
.user-loc-pin{position:relative;width:22px;height:22px}
.user-loc-dot{position:absolute;inset:0;width:18px;height:18px;margin:2px;background:#4285f4;border:3px solid #fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.user-loc-pulse{position:absolute;inset:0;width:22px;height:22px;background:rgba(66,133,244,.35);border-radius:50%;animation:locpulse 2s ease-out infinite}
@keyframes locpulse{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.8);opacity:0}}

/* Mapbox map */
#map{position:absolute;inset:0;width:100%;height:100%}

/* Mobile map overlays (hidden on desktop) */
.map-mob-alert,.map-mob-count,.map-mob-close{display:none}

/* ── PAGE HEADING (PropertyHub style — small, regular weight, centered) ── */
/* v11 Feature 5: visible listing count header — Condos.ca/Zoocasa pattern */
/* v232: header lives INSIDE the scroll area (condos.ca pattern). The user
   scrolls from the header down through the cards as one continuous list.
   No sticky, no slide-out — the header simply scrolls away with the rest
   of the content when the user scrolls down. */
.list-sticky-top{
  background:#fff;
  flex-shrink:0;
}
.page-title-wrap{padding:14px 16px 8px;flex-shrink:0;text-align:center;background:#fff}
.page-title{font-family:var(--serif),Georgia,serif;font-size:clamp(18px,4vw,24px);font-weight:400;color:#0c1f38;line-height:1.2;letter-spacing:-.3px;margin:0}
.page-title #page-title-count{font-weight:600;color:#EA0649}
.page-title{font-size:15px;font-weight:500;color:var(--navy);margin:0;line-height:1.3;letter-spacing:0}
.page-title #page-title-count{font-weight:600}
.page-sub{display:none}

/* List-hdr no longer needed - count is in heading */
.list-hdr{display:none !important}

/* Market stats banner (condos.ca style) — light teal bg, chart icon, prominent */
.market-stats-banner{display:flex;align-items:flex-start;gap:12px;background:#f4e8eb;padding:14px 16px;margin:8px 16px 0;border-radius:10px;flex-shrink:0}
.market-stats-banner svg{width:22px;height:22px;stroke:var(--teal);flex-shrink:0;margin-top:1px}
.msb-text{font-size:13.5px;color:var(--navy);line-height:1.5}
.msb-text a{color:var(--teal);text-decoration:underline;display:block;margin-top:4px;font-weight:500;font-size:13px}
/* v=404: when the banner lives AFTER #cards instead of inside the sticky
   top header, give it breathing room above (separates it from the last
   row of cards) and below (so the cdg-ss-footer wrapper doesn't crash
   into it). Mobile gets a slightly tighter margin. */
.market-stats-banner--after-cards{margin:24px 16px 16px}
@media(max-width:720px){
  .market-stats-banner--after-cards{margin:18px 12px 12px}
}

/* v=409 — Scott killed both list-pane save-search CTAs (pill + footer).
   v373-fixes.js's ensureSaveSearchSurfaces is now scrub-only, but until
   every visitor's cached bundle refreshes, the old code may still inject
   a pill/footer into the list pane between renders. Hide them at the CSS
   layer too so there's no visible flash before the scrub tick fires.
   Scoped to the list pane (#cards-scroll) so the .cdg-ss-* modal that
   opens via the filter-row Get-Alerts CTA is untouched — only the
   in-list duplicates are killed.

   These are kept (not deleted) intentionally — the save-search.js bundle
   still defines them and any future placement decision can drop these
   rules without touching JS. */
#cards-scroll .cdg-ss-pill,
#cards-scroll .cdg-ss-footer,
#cdg-ss-pill-wrap,
#cdg-ss-footer-wrap{ display:none !important }

/* Listings/Buildings toggle + Sort row — INSIDE list-pane, clean condos.ca tab style */
/* v=430j — Item 151: tighter toolbar vertical (padding 14/12 → 6/4) +
   horizontal gap 12 → 8 between flex children. */
.lb-row{padding:6px 16px 4px;display:flex !important;align-items:center;justify-content:flex-start;gap:8px;background:#fff;visibility:visible !important;min-height:36px;flex-shrink:0;position:relative;z-index:10;overflow:visible}
/* v=429bc — Item 132: .lb-row-right fills remaining space in .lb-row so
   the trailing .sort-wrap can be pushed to the far right via
   margin-left:auto. Wrap is enabled so narrow viewports stack instead
   of horizontally clipping.
   v=456e — Scott's layout pass: at desktop (≥1024px, where the inline
   .cdg-chip-bar is visible) all of [chips, More Filters, Get Alerts,
   Sort] must sit on ONE row with no wrap. Get Alerts becomes the
   right-anchor (margin-left:auto consumes slack); Sort sits immediately
   after it. Below 1024 the chips are hidden anyway and the row can
   still wrap to keep More Filters + Get Alerts + Sort legible on narrow
   viewports. */
.lb-row-right{display:flex;align-items:center;gap:8px;flex:1 1 auto;min-width:0;flex-wrap:wrap}
.lb-row-right > .sort-wrap{margin-left:auto}
/* On viewports below 1100 the chip set + sort + more-filters may not all
   fit on one line; sort drops to the next row via flex-wrap and the
   margin-left:auto keeps it right-aligned even when wrapped. */
@media(max-width:1100px){
  .lb-row-right{ row-gap:6px }
}
/* v=456e — desktop: lock the toolbar to one row, anchor Get Alerts right. */
@media(min-width:1024px){
  .lb-row-right{flex-wrap:nowrap}
  .lb-row-right > .cdg-save-search{margin-left:auto}
  /* Sort no longer needs its own margin-left:auto on desktop — Get Alerts
     already consumed the slack. Reset so Sort sits right next to Get Alerts
     rather than fighting it for the right edge. */
  .lb-row-right > .sort-wrap{margin-left:0}
}
/* v=456f — Mobile: mirror the desktop filter-row layout. All 5 of
   [For Sale, Price, Beds, More Filters, Get Alerts] sit on ONE
   horizontal row in .lb-row-right. We:
     (1) unhide .cdg-chip-bar (was display:none at <1024px),
     (2) shrink chips + More Filters + Get Alerts so they target ~32px
         height / 12.5px font — tight but legible at a 390px viewport,
     (3) lock flex-wrap to nowrap so the row never stacks,
     (4) layer in overflow-x:auto + scroll-snap as a safety net: if the
         five pills still don't fit on a narrower handset, the user can
         swipe horizontally (condos.ca pattern). The scrollbar itself is
         hidden so the row looks clean either way.
     (5) Get Alerts uses margin-left:auto to anchor the right edge,
         matching the desktop pattern from v=456e.
     (6) the legacy fbar .mob-inline-pills filter row is now hidden on
         mobile — it duplicated For Sale/Price/Sort/More Filters from
         the same lb-row chips and made the page feel cluttered. The
         lb-row chip bar is now the single source of truth on every
         viewport.
   Sort stays hidden on mobile via the existing rule at line 2964. */
@media(max-width:1023px){
  .cdg-chip-bar{display:inline-flex !important;gap:4px;margin-right:0;flex-shrink:0}
  .cdg-chip{padding:0 9px;height:32px;font-size:12px;gap:3px;border-width:1.25px;flex-shrink:0}
  .cdg-chip-lbl{overflow:visible;text-overflow:clip;white-space:nowrap}
  .cdg-chip-chev{width:11px;height:11px}
  .lb-row-right .filter-link{padding:6px 10px;font-size:12px;height:32px;line-height:1;gap:4px;flex-shrink:0;margin-right:0}
  .lb-row-right .filter-link svg{width:13px;height:13px}
  .cdg-save-search{padding:6px 11px !important;font-size:12px !important;min-height:32px !important;height:32px;line-height:1;flex-shrink:0}
  .cdg-save-search svg{width:12px;height:12px}
  .lb-row-right{
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:visible;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    gap:4px;
    padding-right:4px;
    scrollbar-width:none;
    min-width:0;
  }
  .lb-row-right::-webkit-scrollbar{display:none}
  .lb-row-right > .cdg-chip-bar,
  .lb-row-right > .filter-link{scroll-snap-align:start}
  .lb-row-right > .cdg-save-search{margin-left:auto;scroll-snap-align:end}
  .mob-inline-pills{display:none !important}
}
/* v=472 — at very narrow handsets (≤420px) drop the chevron arrows on the
   3 inline filter chips so all 5 of [For Sale, Price, Beds, More Filters,
   Get Alerts] survive on one row without horizontal-scroll. Saves ~15px
   per chip × 3 = ~45px — enough to put the Get Alerts CTA fully on-screen
   at iPhone-12/13/14 widths (390px). At <360px we still rely on the
   horizontal-scroll safety net set above. */
@media(max-width:420px){
  .cdg-chip-bar{gap:3px}
  .cdg-chip{padding:0 8px;font-size:11.5px;gap:2px}
  .cdg-chip .cdg-chip-chev{display:none}
  .lb-row-right{gap:4px;padding-right:2px}
  .lb-row-right .filter-link{padding:6px 9px;font-size:11.5px;gap:3px}
  .lb-row-right .filter-link svg{width:12px;height:12px}
  .cdg-save-search{padding:6px 10px !important;font-size:11.5px !important}
  .cdg-save-search svg{width:11px;height:11px}
}
/* v=429b9 — Item 131: inline filter chips. Sits between Listings/Buildings
   tabs and Sort/More Filters/View toggle. Each chip is a small pill that
   opens its own popover (anchored under the chip via _v44PositionDD).
   Active filter ⇒ teal border + tinted bg + bolder weight. Mobile <1024
   collapses the chips so the toolbar fits on one row; users still get the
   full filter set via the "More Filters" button. */
.cdg-chip-bar{display:inline-flex;align-items:center;gap:6px;margin-right:4px}
/* v=430j — Item 151: 14px font + 0/16 padding (height stays 36) for
   button-set consistency. The border bumps to 1.5px to match the
   visual weight of More Filters/Sort outlines. */
.cdg-chip{display:inline-flex;align-items:center;gap:6px;padding:0 16px;height:36px;border-radius:999px;border:1.5px solid #e5e7eb;background:#fff;color:#0c1f38;font-size:14px;font-weight:500;cursor:pointer;font-family:inherit;letter-spacing:.1px;transition:border-color .12s,background .12s,color .12s;white-space:nowrap;line-height:1}
.cdg-chip:hover{border-color:#cbd5e1;background:#f8fafc}
.cdg-chip:focus-visible{outline:2px solid #EA0649;outline-offset:2px}
/* v=481s — Item #18: HouseSigma-style "applied" pill (full teal fill,
   white text, trailing ×). Replaces the v=429 light-tint version so the
   active state is unmistakable at a glance. */
.cdg-chip.has-value{
  border-color:#EA0649;
  background:#EA0649;
  color:#fff;
  font-weight:600;
  box-shadow:0 2px 8px rgba(158,13,54,.18);
}
.cdg-chip.has-value:hover{
  background:#890b2f;
  border-color:#890b2f;
}
.cdg-chip.has-value .cdg-chip-chev{ opacity:.9 }
.cdg-chip.has-value .cdg-chip-x{ color:#fff !important; opacity:.9 }
.cdg-chip.has-value .cdg-chip-x:hover{ opacity:1 }

/* v=501 — Scott reinstated the Baths pill as a top-level chip alongside
   Beds. Was hidden in v=481s (lived only inside More Filters modal);
   Scott's 2026-05-23 audit flagged it as missing from the toolbar. */
/* #cdg-chip-baths{display:none !important}  // removed v=501 */

/* v=481s — Item #18: same active-state styling on the More Filters pill
   when there's an active count badge ("More Filters (3)"). */
.filter-link.has-value{
  border-color:#EA0649 !important;
  background:#EA0649 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(158,13,54,.18);
}
.filter-link.has-value svg{ stroke:#fff !important }
.filter-link.has-value:hover{ background:#890b2f !important; border-color:#890b2f !important }
.cdg-chip-lbl{display:inline-block;line-height:1}
.cdg-chip-chev{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;opacity:.6;transition:transform .15s}
.cdg-chip[aria-expanded="true"] .cdg-chip-chev{transform:rotate(180deg)}
.cdg-pop{position:fixed;background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(11,37,69,.20),0 2px 8px rgba(11,37,69,.10);padding:16px;z-index:500;min-width:260px;max-width:320px;border:1px solid rgba(11,37,69,.06);left:var(--dd-x,0);top:var(--dd-y,0)}
.cdg-pop[hidden]{display:none}
.cdg-pop-title{font-size:13px;font-weight:700;color:#0c1f38;margin:0 0 12px;letter-spacing:.2px;text-transform:uppercase}
.cdg-pop-chips{display:flex;flex-wrap:wrap;gap:6px}
.cdg-pop-chip{padding:7px 14px;height:34px;display:inline-flex;align-items:center;border-radius:999px;border:1px solid #e2e8f0;background:#fff;color:#0c1f38;font-size:13px;cursor:pointer;font-family:inherit;font-weight:500;transition:all .12s;white-space:nowrap}
.cdg-pop-chip:hover{border-color:#EA0649;color:#EA0649}
.cdg-pop-chip.on{background:#EA0649;color:#fff;border-color:#EA0649;font-weight:600}
.cdg-pop-chip.on:hover{background:#8a0b2f;color:#fff}
/* v=481m — show chip bar at all breakpoints (was hidden <1024 → moved into
   the floating filter row on mobile). The mobile bottom-sheet picker below
   takes over from the anchored popover at ≤768px. */
@media(max-width:1023px) and (min-width:769px){.cdg-chip-bar{display:none}}

/* v=481m — Mobile bottom-sheet for ALL chip popovers (.cdg-pop). Matches the
   existing .type-dd / .price-dd polish: drag handle, X close, animation,
   dark backdrop, full-width tap rows, vertical option list with a green ✓
   on the active selection. Single-tap → applies + dismisses. */
.cdg-pop-grab,.cdg-pop-close{display:none}
@media(max-width:768px){
  .cdg-pop{
    position:fixed !important;
    left:0 !important; right:0 !important;
    top:auto !important; bottom:0 !important;
    width:100% !important; max-width:none !important; min-width:0 !important;
    margin:0 !important;
    border-radius:20px 20px 0 0 !important;
    padding:32px 20px calc(28px + env(safe-area-inset-bottom,0px)) !important;
    z-index:610 !important;
    box-shadow:0 -10px 40px rgba(11,37,69,.28) !important;
    background:#fff !important;
    border:none !important;
    min-height:280px;
    max-height:75vh;
    overflow-y:auto;
    animation:bottomSheetUp .28s cubic-bezier(.2,.8,.2,1);
  }
  .cdg-pop[hidden]{display:none !important}
  /* Drag handle pill at top */
  .cdg-pop-grab{display:block;position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:#cbd5d1;pointer-events:none}
  /* X close button top-right */
  .cdg-pop-close{display:flex;position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#f4f6f8;color:#0c1f38;border:none;cursor:pointer;align-items:center;justify-content:center;font-size:20px;font-weight:300;line-height:1;font-family:inherit;-webkit-tap-highlight-color:transparent}
  .cdg-pop-close:active{background:#e5e9ed}
  /* Title centered with more breathing room */
  .cdg-pop-title{text-align:center;font-size:16px !important;font-weight:700 !important;color:#0c1f38 !important;text-transform:none !important;letter-spacing:-.2px !important;margin:0 0 18px !important;font-family:Georgia,'Times New Roman',serif !important}
  /* v=481p — HouseSigma-style pill grid inside the bottom-sheet. Multi-row
     wrap, ~44px tall pills, brand-teal fill + ✓ when active. Bigger tap
     targets than the cramped v=481m vertical list. */
  .cdg-pop-chips{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    margin-bottom:18px !important;
  }
  .cdg-pop-chip{
    flex:0 0 auto;
    min-width:60px;
    height:44px !important;
    padding:0 16px !important;
    font-size:14.5px !important;
    border-radius:999px !important;
    border:1.5px solid #d4dae0 !important;
    background:#fff !important;
    color:#0c1f38 !important;
    font-weight:600 !important;
    text-align:center !important;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    transition:all .12s ease;
  }
  .cdg-pop-chip:active{background:#f4f6f8 !important;transform:scale(.97)}
  .cdg-pop-chip.on{
    background:#EA0649 !important;
    color:#fff !important;
    border-color:#EA0649 !important;
    box-shadow:0 4px 12px rgba(158,13,54,.25);
  }
  /* Sticky-bottom Apply bar for multi-select sheets (Beds, Baths).
     Shown on mobile via the @media block; hidden on desktop. */
  .cdg-pop .cdg-pop-apply-row{
    display:block;
    position:sticky;
    bottom:0;
    left:0;right:0;
    margin:8px -20px -22px;
    padding:12px 20px calc(14px + env(safe-area-inset-bottom,0px));
    background:linear-gradient(to bottom, rgba(255,255,255,0), #fff 30%);
    border-top:1px solid #f0f3f6;
  }
  .cdg-pop-apply{
    display:block;width:100%;
    padding:14px 20px;
    background:#EA0649;color:#fff;
    border:none;border-radius:12px;
    font:700 15.5px/1 var(--sans, system-ui);
    cursor:pointer;
    box-shadow:0 4px 14px rgba(158,13,54,.35);
    min-height:48px;
    letter-spacing:.2px;
  }
  .cdg-pop-apply:hover{background:#890b2f}
  .cdg-pop-apply:active{transform:scale(.98)}
  /* Dark backdrop driven by body.cdg-pop-open (set by toggle*DD JS). */
  body.cdg-pop-open{overflow:hidden !important;touch-action:none !important}
  body.cdg-pop-open::before{
    content:"";position:fixed;inset:0;z-index:609;
    background:rgba(11,37,69,.5);
    animation:fadeIn .25s ease;
    pointer-events:auto;
  }
}

/* v=481p — Price slider scale-stop labels (visual reference under the
   slider). 6 stops, evenly distributed across the slider width.
   Renders in both desktop and mobile via the same .pd-stops node;
   CSS just spaces them out as a flex row. */
/* v=481q — bump specificity past .price-dd.open > * {display:block!important}
   at line ~9181 (v13 visibility reset that nukes children's display). */
#price-dd .pd-stops,
#price-dd.open > .pd-stops,
.price-dd.open > .pd-stops,
.pd-stops{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  padding:6px 8px 14px !important;
  margin:0 !important;
  width:auto !important;
  font:500 11px/1 var(--sans, system-ui);
  color:#94a3b8;
  letter-spacing:.2px;
  font-feature-settings:"tnum" 1;
  user-select:none;
  pointer-events:none;
}
#price-dd .pd-stop,
.pd-stop{
  flex:0 0 auto !important;
  white-space:nowrap;
  display:inline-block !important;
}
.map-search-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1.5px solid #e0e6ec;border-radius:8px;font-size:12.5px;font-weight:600;color:#0b2545;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.map-search-btn:hover{border-color:#EA0649;background:#faf0f3;transform:translateY(-1px);box-shadow:0 3px 10px rgba(169,0,48,.15)}
.map-search-btn svg{width:14px;height:14px;flex-shrink:0}

/* DEFENSIVE — ensure card body always renders properly on every viewport. */
/* These rules use !important to defeat any cached/conflicting CSS. */
.card{display:block !important;min-height:340px;height:auto !important}
.card .cb{display:block !important;visibility:visible !important}
.cards-list .card{display:flex !important;min-height:0 !important}
.card-locked-full .cb-locked{display:flex !important;flex-direction:column !important}
/* Listings/Buildings: connected segmented toggle (one bordered group) */
.lb-toggle{display:inline-flex;background:#f5f7f8;border:1px solid #e5e9ed;border-radius:8px;padding:3px;gap:0}
.lb-btn{padding:8px 18px;border:none;background:transparent;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;border-radius:6px;font-family:var(--sans);transition:all .15s}
.lb-btn.on{background:#fff;color:var(--teal);box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* v326 — condos.ca pattern: count baked into BOTH pills, always visible.
   Inactive tab inherits the muted #64748b label color; active tab inherits
   the white text color set by .lb-btn.on (see the v59 block farther down).
   font-feature-settings:"tnum" 1 keeps "(1,234)" widths consistent so the
   tab doesn't jitter as the count animates between values. */
.lb-count{font-weight:500;margin-left:4px;font-size:13px;opacity:.78;font-feature-settings:"tnum" 1}
.lb-btn:not(.on):hover{color:var(--teal)}

/* Compact navy "Coming Soon" pill — sits inline above the Buildings tab area, right-aligned */
.buildings-msg{display:none;align-items:center;gap:6px;background:#0c1f38;color:#fff;padding:5px 11px;border-radius:99px;font-size:11.5px;font-weight:600;line-height:1;letter-spacing:.2px;box-shadow:0 3px 10px rgba(11,37,69,.22);position:absolute;top:-30px;right:0;white-space:nowrap;animation:fadeIn .2s ease;z-index:5}
.buildings-msg.show{display:inline-flex}
.buildings-msg svg{width:12px;height:12px;stroke:#e37f9b;fill:none;stroke-width:2.2;flex-shrink:0}

/* v=410l — Buildings tab "Coming Soon" empty state.
   Tab-swap content lives inside #cards (replaces the listing-card grid
   when Buildings is active). Single column, centered, generous padding.
   Building outline icon at 56px / 1.4-stroke matches the rest of the
   thin-line iconography. Notify-me CTA is navy filled — the same lead
   gen surface every other primary CTA uses. */
.bldg-cs{
  padding:64px 32px 56px;
  text-align:center;
  max-width:420px;
  margin:0 auto;
  color:#0c1f38;
}
.bldg-cs-ico{
  width:56px; height:56px; margin:0 auto 18px;
  display:flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:#f1f5f9;
  color:#0c1f38;
}
.bldg-cs-ico svg{ width:30px; height:30px; }
.bldg-cs-h{
  font-family: Georgia, "Times New Roman", serif;
  font-size:24px; font-weight:400; letter-spacing:-.01em;
  margin:0 0 10px;
  color:#0c1f38;
}
.bldg-cs-p{
  font-size:14.5px; line-height:1.55;
  color:#5a6b80;
  margin:0 0 24px;
}
.bldg-cs-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:#0c1f38; color:#fff;
  border:none; border-radius:99px;
  padding:13px 22px;
  font-size:14px; font-weight:600;
  font-family:inherit; cursor:pointer;
  transition:background .12s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.bldg-cs-cta:hover{ background:#1a2f4d }
.bldg-cs-cta:active{ transform:scale(.98) }

/* v=430h — Item 143: Sort = outlined grey pill (utility tier). White bg,
   navy text + navy icon, subtle 1.5px grey outline. Sits as the only
   item on Row 3's right side via .lb-row-three's space-between. */
/* v=430j — Item 151: 8/16 padding + 36px min-height + 14px font to
   match the rest of the toolbar buttons. */
.sort-link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;min-height:36px;background:#ffffff;border:1.5px solid #e5e7eb;border-radius:9999px;font-size:14px;font-weight:500;color:#0c1f38;cursor:pointer;font-family:var(--sans);transition:background .15s, border-color .15s;white-space:nowrap;letter-spacing:.1px;line-height:1}
.sort-link:hover{background:#f8fafc;border-color:#cbd5e1;color:#0c1f38;opacity:1}
.sort-link svg{stroke:#0c1f38 !important;color:#0c1f38;width:16px;height:16px;flex-shrink:0;transition:stroke .15s}
.sort-link:hover svg{stroke:#0c1f38 !important}
/* Filter button - mirrors Sort, mobile only */
/* v256: Filter pill — teal/green on desktop and mobile per user. Stands
   out as the primary "do something" action across both. */
.filter-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;background:#EA0649;border:none;font-size:13.5px;font-weight:600;color:#fff;cursor:pointer;font-family:var(--sans);transition:transform .12s, background .15s, box-shadow .15s;white-space:nowrap;border-radius:999px;box-shadow:0 3px 10px rgba(158,13,54,.25);letter-spacing:.1px;margin-right:8px}
.filter-link:hover{background:#CE2C44;box-shadow:0 5px 14px rgba(158,13,54,.32)}
.filter-link:active{transform:scale(.97)}
.filter-link svg{stroke:#fff;color:#fff;width:14px;height:14px}
.filter-link svg{stroke:#EA0649 !important}
.filter-link svg{width:18px;height:18px;flex-shrink:0;stroke:var(--teal);fill:none;stroke-width:2}
.filter-link:hover{opacity:.7}

/* ── v=415 — List / Mixed / Map view toggle ─────────────────────────────────
   Segmented pill, condos.ca styling: white container, dark-navy active button
   with teal icon, grey inactive buttons. Lives in .lb-row-right next to Sort
   + Filter. The JS in 55-view-toggle.js routes clicks through legacy setView()
   so the inline-style layout (list-pane / map-pane widths) actually flips. */
.cdg-vt{
  display:inline-flex;align-items:stretch;
  background:#fff;border:1px solid #e2e8f0;border-radius:999px;
  padding:3px;gap:2px;height:36px;margin-left:4px;
  box-shadow:0 1px 2px rgba(11,37,69,.04);
}
.cdg-vt-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;padding:0 12px;border:none;background:transparent;
  border-radius:999px;cursor:pointer;color:#64748b;
  font-size:13px;font-weight:500;letter-spacing:.1px;
  transition:background .15s, color .15s, transform .12s;
}
.cdg-vt-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;display:block;flex:0 0 auto}
/* v=429d — Item 50/51: at viewport widths where the list-pane gets tight
   (≤1280px → ≤55% × 1280 ≈ 704px column width), the toolbar's seven
   chips don't fit on one row — "Map" gets clipped behind the column edge.
   Mitigation:
     · ≤1280: cdg-vt drops text labels (icon-only) and the "List" button.
     · ≤600:  Sort hidden too (Item 51 spec). */
/* Up to 1500px (the bound where the 50%/55% list-pane is too narrow for
   text labels) the view toggle stays icon-only AND drops the "List" option.
   On really tight mobile (<600) buttons shrink further. */
/* v=429h — the in-toolbar copy is hidden entirely (Item 68 moves the toggle
   to a floating top-middle pill). These rules only apply to the floating
   copy now — and the floating copy KEEPS its text labels (Scott: "the way
   we had it, top middle"). So no icon-only collapse at any width. */
.cdg-vt-lbl{display:inline-block;line-height:1}
.cdg-vt-btn:hover{color:#0c1f38}
/* v=430i — Item 150: view toggle active = Tier 3 navy. Supersedes
   Item 126's teal-everywhere lock. Hierarchy: teal is reserved for
   CTA tier (Get Alerts solid, More Filters outlined); nav controls
   like List/Mixed/Map use navy so they don't compete with the CTA. */
.cdg-vt-btn.on{
  background:#0c1f38;color:#fff;
  box-shadow:0 1px 3px rgba(12,31,56,.20);
}
.cdg-vt-btn.on svg{stroke:#fff}
.cdg-vt-btn.on:hover{background:#1a3258;color:#fff}
.cdg-vt-btn.on:hover svg{stroke:#fff}
.cdg-vt-btn:active{transform:scale(.96)}
.cdg-vt-btn:focus-visible{outline:2px solid #EA0649;outline-offset:2px}

/* — Mixed (default) view: force the 55/45 split alive even if legacy code
     left inline display:none on list-pane (e.g. after a previous fullmap
     entry). !important wins over inline styles so the toggle is reliable. — */
@media (min-width: 769px){
  body.cdg-view-mixed .list-pane{display:flex !important;width:55% !important;flex:0 0 55% !important}
  body.cdg-view-mixed .map-pane{display:block !important;flex:1 1 0% !important}
}

/* — List view: hide map, expand list to fill width, 4-col card grid. — */
body.cdg-view-list .map-pane{display:none !important}
body.cdg-view-list .list-pane{width:100% !important;flex:1 1 100% !important;border-right:none !important}
body.cdg-view-list #cards.cards-mixed,
body.cdg-view-list #cards{
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:14px !important;padding:14px 18px 24px !important;
}
@media (max-width: 1199px){
  body.cdg-view-list #cards.cards-mixed,
  body.cdg-view-list #cards{grid-template-columns:repeat(3, minmax(0, 1fr)) !important}
}
@media (max-width: 899px){
  body.cdg-view-list #cards.cards-mixed,
  body.cdg-view-list #cards{grid-template-columns:repeat(2, minmax(0, 1fr)) !important}
}
@media (max-width: 599px){
  body.cdg-view-list #cards.cards-mixed,
  body.cdg-view-list #cards{grid-template-columns:1fr !important}
}

/* — Map view: full-bleed map, list collapses to fixed-width drawer on the
     left. On desktop the drawer is a narrow scrollable column (380px). On
     mobile (<769px) the existing map-fs / bot-sheet flow handles things, so
     we just expand the map to 100% and hide the list pane. — */
@media (min-width: 769px){
  body.cdg-view-map .main{display:flex !important}
  body.cdg-view-map .list-pane{
    width:380px !important;flex:0 0 380px !important;
    border-right:1px solid var(--light) !important;
    box-shadow:2px 0 12px rgba(11,37,69,.04);
    z-index:6;
  }
  body.cdg-view-map .map-pane{flex:1 1 0% !important;display:block !important}
  body.cdg-view-map #cards.cards-mixed,
  body.cdg-view-map #cards{
    grid-template-columns:1fr !important;
    gap:10px !important;padding:10px 10px 20px !important;
  }
}
@media (max-width: 768px){
  body.cdg-view-map .list-pane{display:none !important}
  body.cdg-view-map .map-pane{display:block !important;width:100% !important;flex:1 1 100% !important}
}

/* v=429h — Item 68: List | Mixed | Map view toggle floats at top-MIDDLE
   of the map, visible whenever a map is on screen (Mixed view + Map view).
   Hidden in List view (no map) and in the toolbar/lb-row (the toolbar's
   inline copy is suppressed below). Solid white pill with soft shadow so
   it reads against Mapbox tiles. Text labels stay visible — Scott
   explicitly: "LIST, the way we had it, yes, top middle". */
.cdg-vt-floating{display:none}
body.cdg-view-mixed .cdg-vt-floating,
body.cdg-view-map .cdg-vt-floating,
body.in-mixed .cdg-vt-floating,
body.in-fullmap .cdg-vt-floating{
  display:inline-flex;
  /* v=429am — Item 111 FINAL: container goes WHITE (was light-grey per
     Item 107). Active option still paints solid teal — see .cdg-vt-btn.on
     below. Subtle white inner border helps the pill pop against varied
     map terrain. */
  background:#ffffff;
  /* v=429av — Item 120A: container padding 8 → 6 to match the smaller
     option pill. Softer shadow (.16/.06) — toggle reads as a peer of
     the Get Alerts / Filter pills, not the dominant element. */
  box-shadow:0 6px 20px rgba(12,31,56,.16), 0 2px 6px rgba(12,31,56,.06);
  border:none;
  padding:6px;
  animation:cdg-vt-enter .35s cubic-bezier(.2,.8,.2,1) both;
  /* v=429an — Item 112: opacity transition so the toggle fades out when
     Draw mode engages (rule below) and fades back in on apply/cancel
     instead of snapping. */
  transition:opacity .2s ease-out, visibility 0s linear .2s;
  opacity:1;
  visibility:visible;
}
/* v=429an — Item 112: hide the floating View toggle while the user is
   actively drawing. body.draw-mode-on is added by startDraw() and
   removed by applyDraw / cancelDraw / removeDraw, so the toggle
   reappears automatically whenever the user exits drawing state.
   opacity+pointer-events keeps the layout stable; visibility flip on a
   delay matches the fade so screen readers + tab order don't pick it
   up mid-transition. */
body.draw-mode-on .cdg-vt-floating{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease-out, visibility 0s linear .2s;
}
/* v=429aw — Item 120B: keyframe was authored for a position:absolute;
   left:50% self-centering pattern and left the toggle stuck at
   transform:translate(-50%, 0) — shifting it 145px LEFT of its already-
   centered parent (.map-controls-top). Drop the X translate; animate
   opacity + Y only so the final state has no residual X transform. */
@keyframes cdg-vt-enter{
  from{ opacity:0; transform:translateY(-8px) }
  to  { opacity:1; transform:translateY(0) }
}
/* Respect reduced-motion: skip the entrance fade for users who opt out. */
@media (prefers-reduced-motion:reduce){
  body.cdg-view-mixed .cdg-vt-floating,
  body.cdg-view-map .cdg-vt-floating,
  body.in-mixed .cdg-vt-floating,
  body.in-fullmap .cdg-vt-floating{ animation:none }
}
/* Anchor .map-controls-top top-middle of the map pane in Mixed + Map.
   v=429aj — Item 106: 18px top offset, moderate breathing room. */
body.cdg-view-mixed .map-controls-top,
body.cdg-view-map .map-controls-top,
body.in-mixed .map-controls-top,
body.in-fullmap .map-controls-top{
  left:50% !important;right:auto !important;top:18px !important;
  transform:translateX(-50%) !important;
  z-index:18 !important;
}
/* v=429m — Item 79: the in-toolbar copy is hidden by default but shows
   in LIST view — the floating top-middle copy lives on the map so it's
   invisible when there's no map. Without the toolbar fallback, users
   stuck in List view had no way to switch back to Mixed/Map. Now the
   two copies trade off: floating in Mixed/Map, toolbar in List. */
.lb-row-right > #cdg-view-toggle{display:none !important}
body.cdg-view-list .lb-row-right > #cdg-view-toggle,
body.in-list .lb-row-right > #cdg-view-toggle{display:inline-flex !important}
/* Tighter padding on mobile so the floating pill fits at 390px. */
@media (max-width:600px){
  .cdg-vt-floating .cdg-vt-btn{padding:0 11px;min-width:auto}
  .cdg-vt-floating .cdg-vt-lbl{display:inline-block !important}
}

/* — v=415e — Mobile <768px: icon-only EXCEPT the active button, which keeps
     its text label. Inactive buttons collapse to icon-only so the 3 affordances
     fit at 390px without competing with Sort/Filter for toolbar width. Tap
     targets stay ≥44px tall on the active button and 36px on inactive (still
     comfortable for thumbs given the wide tap area around each icon). — */
@media (max-width: 767px){
  .cdg-vt{height:40px;padding:3px;gap:2px}
  .cdg-vt-btn{height:34px;padding:0 10px;gap:0;font-size:13px;min-width:38px;font-weight:500}
  .cdg-vt-btn svg{width:16px;height:16px}
  .cdg-vt-btn .cdg-vt-lbl{display:none}
  .cdg-vt-btn.on{padding:0 14px;gap:6px}
  .cdg-vt-btn.on .cdg-vt-lbl{display:inline-block;transition:opacity .15s}
}

/* v34: .sort-wrap is the local positioning context for the .sort-menu so the
   menu anchors directly under the .sort-link button (was anchoring to the
   .lb-row parent which placed it visually off to the right). */
.sort-wrap{position:relative;display:inline-flex;align-items:center}
.sort-menu{
  position:absolute !important;
  top:calc(100% + 4px) !important;
  right:0 !important;
  left:auto !important;
  background:var(--white);
  border:1px solid var(--light);
  border-radius:var(--r-md, 8px);
  box-shadow:var(--sh-2, 0 8px 24px rgba(0,0,0,.12));
  z-index:550;
  min-width:220px;
  display:none;
  overflow:hidden;
}
.sort-menu.open{display:block}
.sort-menu-item{padding:12px 16px;font-size:13.5px;color:var(--navy);cursor:pointer;transition:background .15s}
.sort-menu-item:hover{background:var(--off)}

/* v135: Sort menu becomes a centered bottom sheet on mobile so it escapes the
   lb-row's overflow-x:auto and can render at full readable size with a backdrop. */
@media(max-width:768px){
  .sort-menu{
    position:fixed !important;
    top:auto !important;
    bottom:0 !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    min-width:0 !important;
    max-height:70vh !important;
    overflow-y:auto !important;
    border-radius:18px 18px 0 0 !important;
    box-shadow:0 -10px 36px rgba(11,37,69,.22) !important;
    padding:8px 0 calc(20px + env(safe-area-inset-bottom,0px)) !important;
    z-index:9050 !important;
    transform:translateY(100%);
    transition:transform .25s cubic-bezier(.2,.8,.2,1);
    display:block !important;
    pointer-events:none;
  }
  .sort-menu.open{
    transform:translateY(0);
    pointer-events:auto;
  }
  .sort-menu::before{
    content:'';
    display:block;
    width:42px;height:4px;border-radius:99px;
    background:#cbd5e1;
    margin:8px auto 12px;
  }
  .sort-menu::after{
    content:'Sort by';
    display:block;
    padding:0 20px 12px;
    font-size:13px;
    font-weight:600;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.5px;
    border-bottom:1px solid #eef2f5;
    margin-bottom:6px;
  }
  .sort-menu-item{padding:14px 20px;font-size:15px;border-bottom:1px solid #f4f6f8}
  .sort-menu-item:last-child{border-bottom:none}
  .sort-menu-item:active{background:#f1f5f9}
  /* Backdrop when sort menu open on mobile */
  body.sort-menu-open::after{
    content:'';position:fixed;inset:0;
    background:rgba(11,37,69,.45);
    z-index:9049;
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
    pointer-events:auto;
  }
}
.lh-count{font-size:12.5px;font-weight:600;color:var(--navy);flex:1}
.lh-count span{color:var(--mid);font-weight:400}
.sort-sel{padding:4px 8px;border-radius:var(--r);border:1px solid var(--light);font-size:11.5px;color:var(--mid);background:var(--white)}

/* ── CARD GRID — 3 col ── */
.cards-wrap{flex:1;overflow-y:auto}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px 10px 20px;align-content:start}
/* List view — full-width responsive grid (condos.ca "List" mode) */
.cards-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:14px 16px 24px;align-content:start}
/* v296: tightened desktop padding + gap to match condos.ca. Was 12px gap
   + 8/12 padding which left visible white margins around each card.
   Now 8px gap and minimal side padding so the cards fill the list pane. */
.cards-mixed{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 8px 16px;align-content:start}
/* v=454 P0-1 — force [hidden] to win over display:grid base rules so the
   Buildings tab can hide the listings grid. Without !important the browser
   default [hidden]{display:none} loses to .cards-mixed{display:grid}. */
.cards-mixed[hidden],.cards-grid[hidden],.cards-list[hidden]{display:none !important}
/* v=429ax — Item 120C: intermediate breakpoint. At 768–1279px the
   list pane is roughly 420–700px wide; three columns there cram each
   card down to ~140–230px and the price/address truncate awkwardly.
   Drop to TWO columns in this band — matches condos.ca's reflow at
   the same widths. Mobile (≤767px) keeps its single-column override
   at line ~8068. */
@media (min-width:768px) and (max-width:1279px){
  .cards-grid, .cards-mixed{ grid-template-columns:repeat(2,1fr) }
}
/* v=415 — #cards is a flex item inside #cards-scroll (display:flex;flex-direction:column).
   Default flex-shrink:1 was clamping the cards box to ~322px tall while grid
   items rendered at their natural ~6000px stack, so the visible grid items
   overflowed their container and any sibling below (the dropped market-stats
   banner, now the IDX footer) rendered visually behind/between the cards.
   Pin flex-shrink:0 so #cards keeps its intrinsic content height and the
   footer sibling sits cleanly beneath the last card. */
#cards-scroll #cards{flex:0 0 auto}

/* PROPTX IDX banner — § 6.3(b) cap notice + § 6.3(h) refresh timestamp.
   Renders inside #cards (cards-mixed/grid/list); spans full row. */
/* v314 — yellow .v311-idx-cap "Showing first 100 of N" alert removed in
   favour of infinite scroll. Keeping the .v311-idx-updated rule scoped
   in case any other code path still injects that node. */
.v311-idx-updated{grid-column:1 / -1;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--mid);background:var(--off);border:1px solid var(--light);border-radius:8px;padding:8px 12px;margin:0}

/* v314 — infinite scroll sentinel + spinner */
.idx-scroll-sentinel{
  grid-column: 1 / -1;
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:24px 16px;color:#94a3b8;font-size:13px;font-weight:500;
  letter-spacing:.1px;
}
.idx-scroll-spin{
  width:14px;height:14px;border-radius:50%;
  border:2px solid #e2e8f0;border-top-color:#EA0649;
  animation:idx-scroll-spin 0.8s linear infinite;
  display:inline-block;
}
@keyframes idx-scroll-spin{ to { transform: rotate(360deg); } }

/* v=415 — TRREB compliance disclaimer now lives at the BOTTOM of the
   listings (below #cards, inside #cards-scroll). Same quiet inline-text
   register as before — small grey, no background/border/icon — but the
   .idx-list-foot wrapper gives it a bit of top padding + a hairline
   divider so it reads as a footer note instead of a stray paragraph.
   TRREB IDX rules still satisfied: visible, not hidden, carries the
   Data-updated timestamp via #idx-list-updated. */
.idx-list-foot{
  padding:18px 16px 22px;margin-top:8px;
  border-top:1px solid #eef1f5;
  background:transparent;
  flex:0 0 auto;
}
.idx-list-disclaimer{
  font-size:11.5px;line-height:1.5;color:#94a3b8;
  background:none;border:0;padding:0;margin:0;
  font-weight:400;letter-spacing:.1px;
}
#idx-list-updated{display:inline-block;margin-left:6px;color:#94a3b8}
@media (max-width:768px){
  .idx-list-foot{padding:14px 12px 80px}
  .idx-list-disclaimer{font-size:11px}
}
.v311-idx-updated{background:transparent;border:0;padding:2px 4px;color:var(--mid);font-size:11.5px;letter-spacing:.1px}

/* ── LISTING CARD ── */
.card{background:#ffffff !important;border-radius:var(--rlg);overflow:hidden;box-shadow:0 1px 3px rgba(11,37,69,.06);transition:box-shadow .18s,border-color .18s;cursor:pointer;border:1px solid #e5e7eb}
/* v=429g — Item 65: listing cards are pure-white #ffffff with a hairline
   border so they read as distinct cards against the white page background
   without picking up the off-white tint --white had in some calc paths.
   The border + soft shadow keep visual separation. */
.card:hover{box-shadow:var(--shlg);border-color:rgba(122,11,42,.25)}
.card.active{border-color:var(--teal);box-shadow:0 0 0 2px rgba(122,11,42,.15),var(--shlg)}

/* List mode card */
/* List view cards — grid items, condos.ca premium card style */
.cards-list .card{border-radius:10px;box-shadow:none;border:1px solid #eef2f5;transform:none!important;display:flex;flex-direction:column;background:var(--white);overflow:hidden;transition:border-color .15s,box-shadow .15s,transform .15s;cursor:pointer}
.cards-list .card:hover{border-color:#EA0649;box-shadow:0 6px 20px rgba(184,20,66,.15);transform:translateY(-2px)}
.cards-list .ci{width:100%;height:170px;min-height:auto;flex-shrink:0;border-radius:0;position:relative}
.cards-list .ci-top{padding:10px}
.cards-list .fav-btn{width:32px;height:32px}
.cards-list .fav-btn svg{width:20px;height:20px}
.cards-list .cb{flex:1;display:flex;flex-direction:column;justify-content:flex-start;padding:12px 14px 14px;min-width:0}
.cards-list .cf{display:none}
.cards-list .cprice-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.cards-list .cprice{font-size:20px;line-height:1;font-weight:700}
.cards-list .ctime{font-size:12px;color:var(--mid);font-weight:500;white-space:nowrap}
.cards-list .ca{font-size:13.5px;font-weight:400;color:var(--navy);margin-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cards-list .cmeta{font-size:12.5px;margin-bottom:6px}
.cards-list .cmeta-row{font-size:11px;margin-bottom:4px}
.cards-list .cmls{text-transform:none;font-size:11px}
.cards-list .cbroker{font-size:10.5px;color:var(--mid);font-weight:500;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── CARD IMAGE with SWIPE GALLERY ── */
/* v=467 bug#3: explicit pale-gray background + camera icon so that even if
   the <img> fails (CFImage 4xx, MLS Media not yet synced, broken URL) and
   onerror hides the img, the card never renders as an unbranded dark block.
   The .card-locked-full override (login-gate Sold cards) still wins. */
.ci{position:relative;height:160px;overflow:hidden;background:#eef2f5 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='60' viewBox='0 0 80 60' fill='none' stroke='%23a8b3c2' stroke-width='2'><rect x='2' y='2' width='76' height='56' rx='4'/><circle cx='22' cy='22' r='6'/><path d='M78 44 L54 26 L20 52 L2 42'/></svg>") center/60px no-repeat;border-radius:var(--rlg) var(--rlg) 0 0;container-type:inline-size}
/* "Photos coming soon" caption shows underneath the icon when the img is
   missing or its onerror handler hid it. The img has object-fit:cover so it
   blankets the caption when present. */
.ci::after{content:"Photos coming soon";position:absolute;left:0;right:0;bottom:14px;text-align:center;font-family:var(--sans,system-ui);font-size:11px;font-weight:600;letter-spacing:.6px;color:#94a3b8;text-transform:uppercase;pointer-events:none;z-index:0}
.gallery-slide img{position:relative;z-index:1}
.card-locked-full .ci::after{display:none}
/* v=481 dedupe: when a .gallery-nophoto slide is present, the responsive
   gallery-slide overlay below renders the caption; suppress the .ci::after
   so the text doesn't appear twice stacked. */
.ci:has(.gallery-slide.gallery-nophoto)::after,
.ci:has(.gallery-slide > img[alt="Photos coming soon"])::after,
.ci:has(.gallery-slide > img[data-fb="1"])::after,
.ci:has(.gallery-slide > img[src*="listing-placeholder"])::after{display:none}
/* v=469 — responsive "Photos coming soon" overlay for the branded placeholder
   SVG. The SVG used to embed the text inline at font-size:44 in a 1200x800
   viewBox; on Mixed-view cards (~250px wide) that text scaled to ~9px and
   vanished. List view (~700px wide) rendered it at ~26px. Solution: strip
   the text out of the SVG, overlay it via CSS using cqi units so the size
   scales with the card width (container-type:inline-size on .ci above).
   Selector matches both branches in the firstSlide template — the no-photo
   branch (alt="Photos coming soon") and the real-photo→fallback branch
   (data-fb="1" set on onerror swap). Either path lands here. */
.gallery-slide.gallery-nophoto::after,
.gallery-slide:has(>img[alt="Photos coming soon"])::after,
.gallery-slide:has(>img[data-fb="1"])::after,
.gallery-slide:has(>img[src*="listing-placeholder"])::after{
  content:"Photos coming soon";
  position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
  text-align:center;
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(12px, 7cqi, 22px);
  font-weight:500;letter-spacing:.5px;
  color:#e8eef7;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  pointer-events:none;
  z-index:2;
  padding:0 10px;
  line-height:1.2;
}
.card-locked-full .gallery-slide::after{display:none}
.gallery-track{display:flex;height:100%;transition:transform .3s var(--ease)}
/* v148 (was v24 Fix 8): swap to `touch-action: pan-y` — the user expectation
   on real estate apps is "I can scroll the page DOWN with my thumb on the
   photos", but a left/right swipe should still advance to the next photo.
   - pan-y = browser handles vertical scroll natively (page scrolls)
   - JS gallery code captures horizontal touchmove and advances/retracts the slide
   This matches condos.ca / Zoocasa / HouseSigma. */
.gallery,.gallery-track,.gallery-slide,
.m-gallery,.m-gallery-track,.m-gallery-slide,
.hp-fcard-img,
.bldg-item-img,
.cmp-col-img,
.sc-img,
.v22-nearby-rail{touch-action:pan-y !important;-webkit-tap-highlight-color:transparent}
/* The lightbox image is allowed full pinch + pan (zoom into a single photo). */
.lb-img{touch-action:none}
.gallery-slide{min-width:100%;height:100%;flex-shrink:0;position:relative}
.gallery-slide img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.gallery-prev,.gallery-next{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:36px;height:36px;background:rgba(255,255,255,.95);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:opacity .2s,background .15s;opacity:0;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.gallery-prev{left:10px}
.gallery-next{right:10px}
.card:hover .gallery-prev,.card:hover .gallery-next{opacity:1;pointer-events:auto}
@media(hover:none){.gallery-prev,.gallery-next{opacity:.92;pointer-events:auto}}
.gallery-prev:hover,.gallery-next:hover{background:#fff}
.gallery-prev svg,.gallery-next svg{width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:2.5}
.gallery-dots{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:4px;z-index:5}
.gdot{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);transition:all .15s;cursor:pointer}
.gdot.on{background:#fff;width:16px;border-radius:3px}

/* Gallery count (bottom-right) */
.gallery-count{position:absolute;bottom:8px;right:10px;background:rgba(12,31,56,.7);color:#fff;font-size:10.5px;font-weight:600;padding:3px 8px;border-radius:4px;z-index:4;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:inline-flex;align-items:center;gap:4px;line-height:1}
.gallery-count .gc-ico{display:block;flex-shrink:0}
.gallery-count .gc-num{display:inline-block;line-height:1}

/* Pills top-left, fav top-right */
.ci-top{position:absolute;top:0;left:0;right:0;padding:12px;display:flex;justify-content:space-between;align-items:flex-start;z-index:4;pointer-events:none}
.ci-top>*{pointer-events:all}
.bdgs{display:flex;gap:6px;flex-wrap:wrap;flex:1}
.card-pill{padding:5px 10px;border-radius:4px;font-size:11.5px;font-weight:600;letter-spacing:.1px;color:#fff;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.card-pill-navy{background:var(--navy);color:#fff}
.card-pill-amber{background:#d97706;color:#fff}
.card-pill-dark{background:var(--navy);color:#fff}
.card-pill-featured{background:#dc2626;color:#fff}
.card-pill-featured:before{content:'★';font-size:10px;margin-right:2px}
/* v=429 — SEO H1 + subtitle on search-results / hood pages. Sits above
   the Areas chip strip, below the toolbar. Quiet but unmistakable: serif
   H1 in navy, gray subtitle 14-15px. Hidden on the homepage SPA route via
   body.is-home (hp router toggles the class). */
.cdg-page-header{padding:14px 18px 6px;max-width:1200px}
.cdg-page-h1{font-family:var(--serif,Georgia,serif);font-size:26px;font-weight:600;color:#0c1f38;letter-spacing:-.4px;line-height:1.15;margin:0 0 6px}
.cdg-page-sub{font-size:14px;color:#475569;line-height:1.5;margin:0 0 4px;max-width:780px}
body.is-home .cdg-page-header,body.cdg-view-map .cdg-page-header{display:none}
@media (max-width:600px){
  .cdg-page-header{padding:12px 14px 4px}
  .cdg-page-h1{font-size:21px}
  .cdg-page-sub{font-size:13px}
}
/* v=429 — Zoocasa-style slate-blue status pill. Single solid color
   regardless of status text ("For Sale" / "For Rent" / "Just Listed" /
   "Price Reduced" / "Sold Conditional" / "Sold" / "Leased"). The wording
   carries the meaning; the color is brand-neutral so it doesn't compete
   with the photo. */
.card-pill-slate{background:#5B88B3;color:#fff}
/* Legacy badges */
.bdg{padding:3px 8px;border-radius:100px;font-size:9.5px;font-weight:700;letter-spacing:.2px;backdrop-filter:blur(6px)}
.b-new{background:rgba(10,122,64,.92);color:#fff}
.b-leased{background:rgba(26,86,219,.92);color:#fff}
.b-sold{background:rgba(192,57,43,.92);color:#fff}
.b-price{background:rgba(217,119,6,.92);color:#fff}
.b-other{background:rgba(107,122,141,.85);color:#fff}
.b-rent{background:rgba(122,11,42,.92);color:#fff}
.b-sale{background:rgba(184,134,11,.92);color:#fff}
/* Premium HEART button on listing cards — circular, frosted-glass, instant-feedback ready */
.fav-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0;box-shadow:0 2px 8px rgba(0,0,0,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.fav-btn:hover{transform:scale(1.1);background:#fff;box-shadow:0 4px 12px rgba(0,0,0,.22)}
.fav-btn:active{transform:scale(.95)}
.fav-btn svg{width:20px;height:20px;stroke:#0c1f38;fill:none;stroke-width:2;transition:all .15s}
.fav-btn:hover svg{stroke:#e02a3c}
.fav-btn.on svg{fill:#e02a3c;stroke:#e02a3c}

/* ───────────────────────────────────────────────────────────────────
   P0 Photo Gallery Polish — listing card status badges (top-left) +
   compare-next-to-heart icon button (top-right). Sits inside .ci-top.
   Badge design language mirrors condos.ca: small rounded rectangles
   (6px radius), tight padding, semibold 11px text, vivid solid fills
   that read at a glance on top of photography. White text on every
   variant for AA contrast against any photo. Subtle drop-shadow so a
   badge over a bright sky still has shape.
   ─────────────────────────────────────────────────────────────────── */
.bdgs{max-width:calc(100% - 88px)}
.cdg-bdg{
  display:inline-flex;align-items:center;gap:4px;
  padding:5px 8px;
  border-radius:6px;
  font:600 11px/1 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  letter-spacing:.1px;
  color:#fff;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
  backdrop-filter:saturate(120%);
  -webkit-backdrop-filter:saturate(120%);
}
.cdg-bdg svg{flex-shrink:0;display:block}
.cdg-bdg-just{background:#16a34a}        /* green — Just Listed */
.cdg-bdg-drop{background:#dc2626}        /* red — price drop */
.cdg-bdg-oh{background:#7c3aed}          /* purple — open house */
.cdg-bdg-featured{background:#f59e0b;color:#1f1300}  /* gold/amber */
.cdg-bdg-featured::before{content:'★';margin-right:1px;font-size:11px;color:#1f1300}
.cdg-bdg-3d{background:#EA0649}          /* brand teal — 3D Tour */
.cdg-bdg-vt{background:#0ea5e9}          /* sky — Virtual Tour */
.cdg-bdg-vid{background:#0ea5e9}         /* sky — Video walkthrough */
.cdg-bdg-precon{background:#1d4ed8}      /* deep blue — pre-construction */
.cdg-bdg-coming{background:#475569}      /* slate — coming soon */
.cdg-bdg-sold{background:#0c1f38}        /* navy — sold (unlocked) */
.cdg-bdg-leased{background:#0c1f38}      /* navy — leased (unlocked) */

@media (max-width:600px){
  .cdg-bdg{font-size:10.5px;padding:4px 7px;border-radius:5px;gap:3px}
  .bdgs{gap:5px;max-width:calc(100% - 80px)}
}

/* Compare icon button — sits to the LEFT of .fav-btn inside .ci-top.
   Same frosted-glass treatment as the heart so they read as a pair,
   sized down so the heart still wins as the primary save action. The
   icon swaps from "+" to a check when active (handled in JS).         */
.cdg-cmp-icon-btn{
  width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);
  border:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;flex-shrink:0;
  margin-right:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:all .15s;
  color:#0c1f38;
}
.cdg-cmp-icon-btn:hover{transform:scale(1.08);background:#fff;color:#EA0649}
.cdg-cmp-icon-btn:active{transform:scale(.95)}
.cdg-cmp-icon-btn svg{display:block}
.cdg-cmp-icon-btn.on{background:#EA0649;color:#fff}
.cdg-cmp-icon-btn.on:hover{background:#CE2C44;color:#fff}

/* Allow .ci-top to host: bdgs (left) + [compare icon] + [fav-btn] (right).
   The wrapper is already flex space-between, so group the two right-side
   buttons inline. */
.ci-top{align-items:flex-start}
.ci-top .cdg-cmp-icon-btn + .fav-btn{margin-left:0}

@media (max-width:600px){
  .cdg-cmp-icon-btn{width:32px;height:32px;margin-right:5px}
  .cdg-cmp-icon-btn svg{width:16px;height:16px}
}

/* v=536q-fix3 — Scott audit vs v=533c (ecb9f49) preview design.
   The v=533c card had: heart-only top-right (no + Compare icon next to
   heart), no top-left status badges (Bucket X added Just Listed/Price
   Drop/Open House/3D Tour/Video/Pre-construction/Featured AFTER v=533c),
   and "X hours on site" lived as small grey text in the card footer
   alongside the "+ Compare" text button — NOT as a prominent sage pill
   in the cstatus-row. Restore that shape by:
     - hiding all Bucket X status badges on cards (.cdg-bdg variants)
     - hiding the Bucket X top-right .cdg-cmp-icon-btn
     - hiding the Bucket J .cdays-pill in the body cstatus-row
     - restoring the footer .card-cmp-btn (drop the !important hide)
   Listing detail right rail is unaffected — those FOR SALE / hours-on-site
   pills live outside .card so the selectors below don't touch them. */
.card .ci-top .bdgs{display:none !important}
.card .ci-top .cdg-cmp-icon-btn{display:none !important}
.card .cb .cstatus-row .cdays-pill{display:none !important}
/* (was) .cfooter-row > .card-cmp-btn{display:none !important} — restored */

/* v=429d — Items 57/58/59. Row 1 (status pill + time-ago) sits ABOVE the
   price. Status pill: soft-teal background, dark text, mixed-case "For Sale"
   / "For Rent" / "Sold" / "Leased". Time-ago: brand-teal small text right-
   aligned. */
/* P0 Areas selector parity: re-enabled the inline
   "Areas in Toronto" chip strip on the search SRP to match condos.ca.
   v=529 reparents v316-areas-strip between the chip row (.lb-row) and
   the Listings/Buildings tab row (.cdg-tabseg-row) — see
   v478BuildTabsegRow in app.js. Pills populate from TORONTO_AREAS. */
/* Areas right-toolbar dropdown styling. */
#areas-btn{ position: relative; }
.areas-dd{
  position: fixed;
  z-index: 10000;
  background: #fff;
  border: 1px solid rgba(11,37,69,.12);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(11,37,69,.18);
  padding: 0;
  width: 240px;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  overflow: hidden;
}
.areas-dd[hidden]{ display: none; }
.areas-dd-hdr-row{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(11,37,69,.08);
}
.areas-dd-hdr{
  font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: #64748b;
}
.areas-dd-close{
  background:transparent; border:0; cursor:pointer;
  width:24px; height:24px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  color:#64748b; border-radius:6px;
}
.areas-dd-close:hover{ background:#f1f5f9; color:#0c1f38; }
.areas-dd-close svg{ width:16px; height:16px; display:block; }
.areas-dd-list{ padding: 6px 0; max-height: 60vh; overflow-y: auto; }
.areas-dd-item{
  display: block;
  padding: 9px 18px;
  font-size: 14px; font-weight: 500;
  color: #0c1f38;
  text-decoration: none;
  line-height: 1.3;
}
.areas-dd-item:hover,
.areas-dd-item:focus{
  background: #f1f5f9;
  color: #EA0649;
  outline: none;
}
/* Mobile (≤390px): full-screen bottom sheet with backdrop. */
.areas-dd-backdrop{
  position: fixed; inset: 0;
  background: rgba(11,37,69,.35);
  z-index: 9999;
  display: none;
  -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px);
}
.areas-dd-backdrop.on{ display:block; }
@media (max-width: 480px){
  .areas-dd{
    position: fixed;
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0;
    width: auto;
    max-width: none;
    border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .areas-dd-hdr-row{ padding: 14px 18px 10px; }
  .areas-dd-hdr{ font-size: 12px; }
  .areas-dd-close{ width:32px; height:32px; }
  .areas-dd-close svg{ width:20px; height:20px; }
  .areas-dd-list{ max-height: 70vh; padding: 8px 0 12px; }
  .areas-dd-item{ padding: 13px 20px; font-size: 15px; }
}
/* v=429g — Item 67: Zoocasa-pattern city header above the toolbar.
   "X+ Listings in Toronto, ON ▾" reads as the page H1, navy on white.
   The "Toronto, ON ▾" button opens a dropdown of GTA cities. The Listings/
   Buildings tab + the toolbar count pill are hidden — the heading now
   carries the count. */
/* v=430j — Item 151: heading bottom space 4 → 6 (small gap before Row 2);
   combined with .lb-row padding-top:6 gives a clean 12px gap between
   heading baseline area and Row 2 button row. */
.cdg-city-hdr{position:relative;padding:14px 18px 6px;max-width:1200px}
.cdg-city-hdr-h1{margin:0;font-family:var(--serif,Georgia,serif);font-size:26px;font-weight:600;color:#0c1f38;letter-spacing:-.3px;line-height:1.2;display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.cdg-city-hdr-h1 #cdg-city-hdr-count{margin-right:0}
.cdg-city-hdr-plus{color:#0c1f38;font-weight:600;margin-left:-6px}
.cdg-city-hdr-noun{font-weight:400;color:#475569}
/* v=429b0 — Item 128 FIX: while the server total is unconfirmed
   (cdg-hdr-pending), hide the count number + plus + "Listings in"
   prefix so the user doesn't see "35+ Listings" briefly flash to
   "1,001+ Listings". The city name + dropdown chevron remain so the
   header still reads as a header during the ~300-500ms hydration. */
body.cdg-hdr-pending .cdg-city-hdr-h1 #cdg-city-hdr-count,
body.cdg-hdr-pending .cdg-city-hdr-plus,
body.cdg-hdr-pending .cdg-city-hdr-noun,
html[data-hdr-pending] .cdg-city-hdr-h1 #cdg-city-hdr-count,
html[data-hdr-pending] .cdg-city-hdr-plus,
html[data-hdr-pending] .cdg-city-hdr-noun{ visibility:hidden; opacity:0 }
body.cdg-hdr-pending #cdg-tab-listings-count,
html[data-hdr-pending] #cdg-tab-listings-count{ visibility:hidden }
/* Set the pending state synchronously at first paint via a tiny inline
   class on <body> when SPA loads — handled by the SPA boot script
   (search route only). On non-search routes the heading is hidden
   anyway by the existing isSearchView() check. */
.cdg-city-hdr-city{display:inline-flex;align-items:center;gap:4px;background:transparent;border:none;padding:2px 4px 2px 6px;cursor:pointer;color:#0c1f38;font:inherit;font-weight:600;border-radius:8px;transition:background .15s}
.cdg-city-hdr-city:hover{background:#f1f5f9}
.cdg-city-hdr-chev{flex-shrink:0;color:#0c1f38;transition:transform .18s}
.cdg-city-hdr-city[aria-expanded="true"] .cdg-city-hdr-chev{transform:rotate(180deg)}
/* v=429t — Item 85: .list-pane has overflow:hidden, which clips
   absolute-positioned descendants. The dropdown was rendering invisible
   even though display:block / opacity:1. Switch to position:fixed (escapes
   the overflow clip) with coordinates computed by _cdgPositionCityDd().
   z-index bumped above the navy nav (500) so it floats over everything
   except the modal overlays (≥9000). */
.cdg-city-dd{position:fixed;top:120px;left:18px;background:#fff;border-radius:14px;box-shadow:0 12px 36px rgba(11,37,69,.22),0 1px 4px rgba(11,37,69,.08);padding:14px 16px;min-width:340px;max-width:420px;z-index:1500;border:1px solid #eef2f5;max-height:calc(100vh - 140px);overflow-y:auto}
.cdg-city-dd[hidden]{display:none}
.cdg-city-dd-eyebrow{font-size:10.5px;font-weight:700;color:#94a3b8;letter-spacing:.18em;text-transform:uppercase;margin-bottom:10px}
.cdg-city-dd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px 10px}
.cdg-city-dd-item{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;background:transparent;border:none;cursor:pointer;font:inherit;font-size:14px;font-weight:500;color:#0c1f38;text-align:left;transition:background .12s;font-family:inherit}
.cdg-city-dd-item:hover{background:#f1f5f9}
.cdg-city-dd-item.on{background:#e6efe9;color:#0c1f38}
.cdg-city-dd-avatar{width:28px;height:28px;border-radius:50%;background:#0c1f38;color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}
/* v=429p — Item 80: cascading hood section inside the city dropdown.
   Sits below the cities grid with its own eyebrow + 2-col link list +
   "Show all" footer link. Hoods are clickable text links (no avatar),
   tighter spacing than the city rows. */
.cdg-city-dd-hood-eyebrow{font-size:10.5px;font-weight:700;color:#94a3b8;letter-spacing:.18em;text-transform:uppercase;margin:16px 0 10px;padding-top:14px;border-top:1px solid #eef2f5}
.cdg-city-dd-hood-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 10px}
.cdg-city-dd-hood-item{display:block;padding:7px 10px;border-radius:8px;background:transparent;border:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:500;color:#0c1f38;text-align:left;transition:background .12s,color .12s;font-family:inherit;text-decoration:none}
.cdg-city-dd-hood-item:hover{background:#f1f5f9;color:#EA0649}
.cdg-city-dd-hood-all{display:block;margin-top:10px;padding:8px 10px;border-radius:8px;font-size:13px;font-weight:600;color:#EA0649;text-decoration:none;transition:background .12s}
.cdg-city-dd-hood-all:hover{background:#f7e6eb}
/* Hide the legacy Listings/Buildings tabs + count pill — the city header
   carries the count now via the new .cdg-tabseg below. */
.lb-toolbar-lead .lb-tabs,
.lb-toolbar-lead .lb-results-count{display:none !important}
/* Bucket N — Selected-area counter bar. Sits between #v316-areas-strip
   and #cdg-tabseg-row in the sticky block. Quiet by default; the area
   name reads as a label, the count and intent are the supporting copy.
   Hidden when body lacks .in-search (homepage, listing detail). */
.cdg-area-ctx-bar{
  display:flex;
  align-items:center;
  padding:8px 18px 4px;
  /* v=597 CLS fix — reserve the populated single-line height (border-box:
     padding 8+4 + 14px×1.35 line ≈ 30.9px) so the bar does NOT grow from
     ~12px (empty, padding-only) to ~31px when _bucketNUpdateCtx() fills the
     count after the async route-total fetch. Without this, the Listings/
     Buildings tabs + Sort row + cards below jump down ~19px on cold load. */
  min-height:31px;
  box-sizing:border-box;
  font-size:14px;
  line-height:1.35;
  color:#475569;
  background:transparent;
  font-variant-numeric:tabular-nums;
}
.cdg-area-ctx-text strong{
  color:#0c1f38;
  font-weight:600;
  margin-right:2px;
}
.cdg-area-ctx-sep{
  color:#cbd5e1;
  margin:0 4px;
  font-weight:500;
}
body:not(.in-search) .cdg-area-ctx-bar{ display:none }
@media (max-width:600px){
  /* v=597 CLS fix — mobile reserve: padding 6+2 + 13px×1.35 line ≈ 25.6px. */
  .cdg-area-ctx-bar{ padding:6px 14px 2px; font-size:13px; min-height:26px }
}
/* v=429h — Item 67 update: condos.ca-style Listings | Buildings segmented
   control below the city heading. Light-grey pill container, active state
   navy filled. Inline counts inside each button. */
/* v=429ad — Item 100: rounded-pill container so the white active tab
   reads as a floating capsule on a grey backplate. */
.cdg-tabseg{display:inline-flex;background:#f1f5f9;border-radius:9999px;padding:4px;gap:0;margin-top:10px}
/* v=430e — Item 139 (FINAL): Row 3 wrapper holds tabseg (left) + Sort
   (right). justify-content:space-between separates them, padding
   matches .lb-row's 24px L/R desktop padding so the tabs align under
   the For Sale chip and Sort aligns under the toolbar's right edge. */
.list-pane > .lb-row-three[data-cdg-row3="1"]{
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* v=430j — Item 151: tighter vertical (6/12 → 4/8) + gap 12 → 8.
     Still aligned 18px L/R under the heading h1. */
  padding:4px 18px 8px;
  gap:8px;
}
.list-pane > .lb-row-three[data-cdg-row3="1"] > .cdg-tabseg{ margin:0 }
.list-pane > .lb-row-three[data-cdg-row3="1"] > .sort-wrap{ margin:0 }
@media(max-width:1024px){
  .list-pane > .lb-row-three[data-cdg-row3="1"]{ padding-left:16px; padding-right:16px }
}
/* v=429am — Item 110: revert Item 108's solid teal back to WHITE pill
   with TEAL text + inline count. Toggles/tabs all use this treatment;
   primary CTAs (Get Alerts, Filter Apply) use the solid teal + white
   pattern instead. */
.cdg-tabseg-btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:transparent;border:none;border-radius:9999px;cursor:pointer;color:#475569;font:inherit;font-size:14px;font-weight:500;line-height:1;transition:background .15s,color .15s,box-shadow .15s,font-weight .15s;font-family:inherit}
.cdg-tabseg-btn:hover{color:#0c1f38}
.cdg-tabseg-btn.on{background:#ffffff;color:#0d8a99;box-shadow:0 1px 3px rgba(0,0,0,.08);font-weight:600}
.cdg-tabseg-btn.on .cdg-tabseg-count{color:#0d8a99;font-weight:600}
.cdg-tabseg-lbl{letter-spacing:.05px}
.cdg-tabseg-count{font-weight:500;color:#94a3b8;font-size:13px;letter-spacing:.02em;display:inline-block;min-width:3ch;text-align:left}
/* v=475 CLS — reserve width for the city-heading count so the "X+ Listings"
   row doesn't reflow when the number arrives. Same idea as .cdg-tabseg-count
   above. tabular-nums keeps digits from shifting around between paints. */
#cdg-city-hdr-count{display:inline-block;min-width:3ch;font-variant-numeric:tabular-nums}
@media (max-width:600px){
  .cdg-tabseg{margin-top:8px}
  .cdg-tabseg-btn{padding:7px 12px;font-size:13px}
  .cdg-tabseg-count{font-size:12px}
}
@media (max-width:600px){
  /* v=430g — Item 141: mobile drop to 20px so the compact desktop
     proportion holds at small widths too. */
  .cdg-city-hdr{padding:12px 14px 4px}
  .cdg-city-hdr-h1{font-size:20px;gap:4px}
  .cdg-city-hdr-chev{width:16px;height:16px}
  /* v=429p — Item 80: dropdown becomes a bottom sheet on mobile so cities
     + hoods don't overflow a 390px viewport. Anchored to viewport bottom
     with safe-area inset for iOS home-indicator clearance. */
  .cdg-city-dd{
    position:fixed;left:0;right:0;bottom:0;top:auto;
    min-width:0;
    border-radius:16px 16px 0 0;
    max-height:80vh;
    overflow-y:auto;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -12px 36px rgba(11,37,69,.18);
  }
}
/* v=429i — Item 69 (supersedes Item 64): final canonical status pill.
   Teal-blue #4b94ba fill + white #ffffff text, capsule 9999px radius,
   mixed-case "For Sale" / "For Rent" / "Just Listed" / etc. ONE style
   site-wide — listing card row 1, listing-detail price row, map popup
   card, building-detail section headers, compare column headers. */
/* v=429k — Item 72: tighter status pill. Same #4b94ba / white treatment,
   just smaller — 3px 10px padding, 11px / 600, .02em tracking, 1.4 line.
   Reads as a small status badge instead of a heading-sized chip. */
.cstatus-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px;min-height:20px}
.cstatus-pill,.cdg-status-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:9999px;font-size:11px;font-weight:600;letter-spacing:.02em;line-height:1.4;background:#4b94ba;color:#ffffff;white-space:nowrap;text-transform:none;font-family:inherit}
.cstatus-pill-rent,.cstatus-pill-sale,
.cstatus-pill-sold,.cstatus-pill-leased{background:#4b94ba;color:#ffffff}
@media (max-width:600px){
  .cstatus-pill,.cdg-status-pill{padding:3px 9px;font-size:10.5px}
}
/* v=429d — Item 51: toolbar fit/hide order at mobile (<600px). Keep the
   count badge, Filter, Get Alerts, and the view toggle. Hide Sort (its
   options live behind the Filter modal anyway) and tighten button padding
   so the row fits cleanly without horizontal scroll or wrap. */
@media (max-width:600px){
  .lb-row-right .sort-wrap,
  .lb-row-right .sort-link{display:none !important}
  .lb-row-right{gap:6px}
  .lb-row-right .filter-link{padding:7px 10px;font-size:13px}
  .cdg-save-search{padding:7px 12px !important;font-size:12.5px !important}
}
/* Card body — v=429 Zoocasa 4-line layout
   Line 1: price + time-ago (right, brand teal)
   Line 2: address with city, ON
   Line 3: bed | bath | parking | sqft  (text only, pipe-separated)
   Line 4: MLS#: <id> · <BROKERAGE>  + Compare action */
.cb{padding:12px 14px 14px}
.cprice-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:6px}
.cprice{font-family:var(--sans);font-size:22px;color:var(--navy);line-height:1;font-weight:700;letter-spacing:-.3px}
/* v=430h — Item 144: time-ago text uses brand navy (matches header bg). */
.ctime{font-size:12.5px;color:#0c1f38;font-weight:500;white-space:nowrap}
.ca{font-size:13.5px;font-weight:400;color:var(--navy);margin-bottom:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
.cmeta{font-size:13px;color:var(--navy);margin-bottom:7px;font-weight:400;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.cmeta-sep{color:#cbd5e0;font-weight:400}
.cmeta-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px;font-size:11.5px;color:var(--mid);font-weight:500;letter-spacing:.2px}
.cmaint{font-size:11.5px;color:var(--mid);font-weight:500}
.cmls{font-size:11.5px;color:var(--mid);text-transform:uppercase;letter-spacing:.2px;font-weight:500}
.cbroker{font-size:11.5px;color:var(--mid);font-weight:500}
/* v=429 — Row 4: single-line "MLS#: <id> · <BROKERAGE>" with a small
   Compare affordance pushed right. No "Listed by" prefix per Scott's
   directive. text-overflow:ellipsis ensures long brokerage names never
   wrap mid-word into a second line. */
.cmls-row{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11.5px;color:#64748b;font-weight:500;letter-spacing:.15px;line-height:1.3;min-width:0}
.cmls-line{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none}
.cmls-cmp{flex-shrink:0;padding:4px 9px;border-radius:4px;font-size:11px;font-weight:600;letter-spacing:.15px;color:#EA0649;background:rgba(158,13,54,.08);border:1px solid rgba(158,13,54,.25);cursor:pointer;white-space:nowrap;transition:all .15s}
.cmls-cmp:hover{background:rgba(158,13,54,.16);border-color:#EA0649}
.cmls-cmp.on{background:#EA0649;color:#fff;border-color:#EA0649}
@media (max-width:600px){
  .cb{padding:14px 14px 16px}
  .cprice{font-size:20px}
  .ca{margin-bottom:9px}
  .cmeta{margin-bottom:9px;font-size:12.5px}
  .cmls-row{font-size:11px}
  .cmls-cmp{padding:5px 10px}
}

/* Hide legacy styles */
.cf,.cn,.cm,.cprice-l{display:none}

/* ── MAPBOX POPUP (condos.ca style) ── */
.mapboxgl-popup-content{padding:0;border-radius:12px;overflow:visible;box-shadow:0 10px 30px rgba(0,0,0,.25);background:transparent}
.mapboxgl-popup-close-button{display:none!important}
.mapboxgl-popup-tip{border-top-color:#fff!important;border-bottom-color:#fff!important}

/* PREMIUM POPUP — billion-$ map listing card (vertical layout, larger photo, prominent CTAs) */
.mp-card{display:flex;flex-direction:column;background:#fff;cursor:pointer;width:300px;border-radius:14px;overflow:hidden;position:relative;box-shadow:0 14px 38px rgba(11,37,69,.22),0 4px 12px rgba(11,37,69,.1)}
.mp-img-wrap{position:relative;width:100%;height:170px;overflow:hidden;background:var(--off);flex-shrink:0}
.mp-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.mp-card:hover .mp-img-wrap img{transform:scale(1.04)}
.mp-img-placeholder{width:100%;height:100%;background:linear-gradient(135deg,#e5e7eb 0%,#d1d5db 100%);display:flex;align-items:center;justify-content:center}
.mp-img-placeholder svg{width:36px;height:36px;stroke:#9ca3af;fill:none;stroke-width:1.5}
.mp-days{position:absolute;bottom:10px;left:10px;background:rgba(12,31,56,.92);color:#fff;font-size:11px;font-weight:600;padding:5px 9px;border-radius:6px;backdrop-filter:blur(8px);letter-spacing:.1px}
.mp-body{padding:14px 16px 16px;flex:1;min-width:0;display:flex;flex-direction:column}
.mp-price{font-family:var(--sans);font-size:22px;color:#0c1f38;line-height:1;font-weight:700;letter-spacing:-.4px}
.mp-price-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;flex-wrap:wrap}
.mp-days-inline{display:inline-flex;align-items:center;background:rgba(12,31,56,.92);color:#fff;font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px;letter-spacing:.1px;line-height:1}
.mp-addr{font-size:13.5px;color:#0c1f38;font-weight:500;line-height:1.3;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v=440 — popup meta switches to Lucide outline icons (bed / bath / parking
   / sqft) per card-icon spec. 14px icon, slate-600, 4px gap to number, 12px
   gap between groups. Pipes retired. */
.mp-meta{font-size:13px;color:#475569;display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px;font-weight:500}
.mp-meta .mp-meta-i{display:inline-flex;align-items:center;gap:4px;line-height:1}
.mp-meta .mp-meta-ico{width:14px;height:14px;flex-shrink:0;color:#475569;stroke:currentColor;fill:none;display:block}
/* v=484p — Phosphor glyph variant of the same hook in map popup. */
.mp-meta i.mp-meta-ico{font-size:14px;width:auto;height:14px;line-height:1;color:#475569;display:inline-flex;align-items:center}
.mp-meta-sep{display:none}
.mp-bldg{font-size:12.5px;color:#EA0649;font-weight:600;margin-bottom:12px;text-decoration:none}
.mp-bldg:hover{text-decoration:underline}
/* CLOSE button — top-right (more conventional than top-left) */
.mp-close{position:absolute;top:10px;right:10px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.95);color:#0c1f38;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:12;padding:0;line-height:1;backdrop-filter:blur(8px);box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .12s}
.mp-close:hover{background:#fff;transform:scale(1.06)}
.mp-close svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.4}
/* HEART — top-left of photo (luxury convention; stays put even when close is right) */
.mp-fav{position:absolute;top:10px;left:10px;width:50px;height:50px;border-radius:50%;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:11;padding:0;color:#0c1f38;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:all .12s}
.mp-fav:hover,.mp-fav:active{background:#fff;transform:scale(1.08)}
.mp-fav svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2;transition:all .15s}
.mp-fav.on{color:#e02a3c}
.mp-fav.on svg{fill:#e02a3c;stroke:#e02a3c}
/* CTA BUTTONS — full row, conversion-optimized */
.mp-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto}
.mp-btn{padding:11px 10px;background:#EA0649;color:#fff;border-radius:8px;text-align:center;font-size:12.5px;font-weight:600;cursor:pointer;border:none;font-family:var(--sans);transition:all .15s;line-height:1.2;letter-spacing:.1px;box-shadow:0 2px 8px rgba(184,20,66,.3)}
.mp-btn:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 4px 12px rgba(184,20,66,.4)}
.mp-btn-s{background:#fff;color:#0c1f38;border:1.5px solid #e5e9ed;box-shadow:none}
.mp-btn-s:hover{background:#fbf5f7;border-color:#EA0649;color:#EA0649;box-shadow:none;transform:translateY(-1px)}

@media(max-width:768px){
  /* Bottom-sheet style popup on mobile — slides up from screen bottom */
  /* Mapbox positions popups at the marker; we override that to anchor to viewport bottom */
  .condogo-popup.mapboxgl-popup{
    max-width:none !important;
    left:0 !important;
    top:auto !important;
    bottom:calc(86px + env(safe-area-inset-bottom,0px)) !important;
    transform:none !important;
    width:100% !important;
    padding:0 !important;
    z-index:445;
    pointer-events:none;
    /* Strip ALL inline styles that Mapbox injects (anchor classes etc.) */
    margin:0 !important;
  }
  /* Hide the popup tip arrow + the anchor-positioning artifacts from Mapbox */
  .condogo-popup .mapboxgl-popup-tip,
  .condogo-popup.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
  .condogo-popup.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
  .condogo-popup .mapboxgl-popup-anchor-top,
  .condogo-popup::before,
  .condogo-popup::after{display:none !important;border:none !important;width:0 !important;height:0 !important}
}
/* Always hide the popup tip arrow + Mapbox anchor classes that inject visual artifacts */
.condogo-popup .mapboxgl-popup-tip{display:none !important;border:none !important;width:0 !important;height:0 !important}
.condogo-popup{filter:none !important}
@media(max-width:768px){
  .condogo-popup .mapboxgl-popup-content{
    background:transparent !important;
    box-shadow:none !important;
    /* No right padding — right-side tools are now ABOVE the popup, not beside it */
    padding:0 12px !important;
    pointer-events:auto;
    animation:popupSlideUp .3s cubic-bezier(.2,.8,.2,1)
  }
  @keyframes popupSlideUp{
    from{opacity:0;transform:translateY(40px)}
    to{opacity:1;transform:translateY(0)}
  }
  /* Centered compact card on mobile (not full-width — easier to read, photo and content properly sized) */
  .mp-card{
    width:100% !important;
    max-width:340px !important;
    margin:0 auto !important;
    box-shadow:0 -4px 24px rgba(0,0,0,.22),0 2px 8px rgba(0,0,0,.1) !important;
    border-radius:16px !important;
    display:flex !important;
    flex-direction:column !important
  }
  .mp-img-wrap{width:100% !important;min-width:0 !important;height:170px !important}
  .mp-body{padding:14px 16px 16px !important}
}

/* v311 Fix 2: condos.ca-style mobile popup — anchor to BOTTOM of the map area
   with 12px gutter, just above the bot-tabs (~76px). Earlier rule used
   left:0 + width:100% + bottom:86px; this version is the simpler condos.ca
   layout per IMG_4502. .map-pane scope keeps the override targeted to the map
   view only and won't leak into other Mapbox surfaces. */
@media (max-width: 768px) {
  .map-pane .mapboxgl-popup{
    left:12px !important;
    right:12px !important;
    bottom:76px !important;
    top:auto !important;
    transform:none !important;
    max-width:none !important;
    width:auto !important;
    margin:0 !important;
  }
  .map-pane .mapboxgl-popup-tip{display:none !important}
  .map-pane .mp-card{width:100% !important; max-width:none !important; margin:0 !important}
}

/* CONDOS.CA-STYLE price markers — compact pill, white border, soft drop, crisp typography */
/* v11 Bug 3: COMPACT navy price pill (Condos.ca pattern). 11.5px text, smaller
   padding, brand colors only — no orange/purple gradients. Single listings still
   show price; multi-unit buildings show "X units" via .mm-bldg below. */
.mm{padding:3px 9px;border-radius:99px;font-size:11.5px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;border:1.5px solid #fff;transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s,border-color .15s;letter-spacing:-.2px;box-shadow:0 2px 6px rgba(11,37,69,.22),0 1px 2px rgba(11,37,69,.1);line-height:1.3;font-feature-settings:"tnum" 1}
.mm:hover{transform:scale(1.12);box-shadow:0 6px 16px rgba(11,37,69,.28),0 2px 4px rgba(11,37,69,.14);z-index:5}
.mm.sel{transform:scale(1.15);box-shadow:0 0 0 3px rgba(184,20,66,.5),0 6px 16px rgba(11,37,69,.32);z-index:6}
/* Visited markers — slightly faded so the user can see what they've already opened (UX win) */
.mm.visited{opacity:.65}
.mm.visited:hover{opacity:1}

/* ═══════════ BUILDING (MULTI-UNIT) MARKERS — HouseSigma+ style ═══════════ */
/* Pin shows: count badge + price range. Click → side panel with all units. */
/* v11 Bug 3: building marker — compact pill with count + "units" text only.
   Was showing price range in addition; now just shows "X units" (matches Condos.ca pattern). */
.mm-bldg{position:relative;padding:4px 10px 4px 6px;border-radius:18px;font-size:11.5px;font-weight:700;color:#fff;cursor:pointer;white-space:nowrap;border:1.5px solid rgba(255,255,255,.55);transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s;background:#0c1f38;display:inline-flex;align-items:center;gap:6px;letter-spacing:-.1px;box-shadow:0 3px 10px rgba(11,37,69,.34),0 1px 3px rgba(11,37,69,.15)}
.mm-bldg:hover{transform:scale(1.08);box-shadow:0 8px 22px rgba(11,37,69,.45),0 2px 5px rgba(11,37,69,.2);border-color:#fff;z-index:2}
.mm-bldg.sel{outline:3px solid #fff;box-shadow:0 0 0 4px rgba(184,20,66,.45),0 8px 22px rgba(11,37,69,.4);z-index:3;transform:scale(1.06)}
.mm-bldg-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#EA0649;color:#fff;font-size:11px;font-weight:800;letter-spacing:.2px;box-shadow:0 0 0 2px rgba(255,255,255,.25)}
.mm-bldg-range{font-weight:700;letter-spacing:-.1px}

/* Building modal — centered floating card inside map pane (condos.ca style) */
/* Lives inside .map-pane, not anchored to a marker. Doesn't block toolbar/zoom controls. */
.bldg-modal{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:50;display:none;animation:bldgModalIn .22s cubic-bezier(.2,.8,.2,1);max-width:calc(100% - 220px);max-height:calc(100% - 60px)}
.bldg-modal.open{display:block}
@keyframes bldgModalIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)} to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.bldg-card{width:480px;max-width:100%;background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 16px 48px rgba(11,37,69,.32);display:flex;flex-direction:column;max-height:560px}
.bldg-hdr{padding:14px 16px 14px;background:#fff;color:#0c1f38;flex-shrink:0;position:relative;border-bottom:1px solid #eef2f5;text-align:center}
.bldg-hdr-back{position:absolute;top:14px;left:14px;width:28px;height:28px;border-radius:50%;background:transparent;border:none;color:#0c1f38;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.bldg-hdr-back:hover{background:#f4f6f8}
.bldg-hdr-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}
.bldg-hdr-close{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:50%;background:transparent;border:none;color:#6b7a8d;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.bldg-hdr-close:hover{background:#f4f6f8;color:#0c1f38}
.bldg-hdr-close svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.5}
.bldg-hdr-name{font-family:var(--serif);font-size:22px;font-weight:400;letter-spacing:-.3px;line-height:1.15;color:#EA0649;margin-bottom:4px}
.bldg-hdr-status{font-size:14px;color:#6b7a8d;font-weight:500}
.bldg-hdr-cta{margin-top:10px;display:inline-block;padding:7px 16px;background:#EA0649;color:#fff;border:none;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.bldg-hdr-cta:hover{background:#EA0649}
.bldg-list{flex:1;overflow-y:auto;padding:10px;background:#fff}
.bldg-list::-webkit-scrollbar{width:6px}
.bldg-list::-webkit-scrollbar-thumb{background:#cbd5d1;border-radius:3px}
.bldg-item{display:flex;gap:14px;padding:10px;background:#fff;border-radius:10px;margin-bottom:8px;cursor:pointer;border:1px solid #eef2f5;transition:border-color .15s,box-shadow .15s;position:relative}
.bldg-item:hover{border-color:#EA0649;box-shadow:0 4px 14px rgba(184,20,66,.18)}
.bldg-item-img{width:140px;height:108px;flex-shrink:0;border-radius:8px;overflow:hidden;background:#e5e7eb;position:relative}
.bldg-item-img img{width:100%;height:100%;object-fit:cover}
.bldg-item-featured{position:absolute;top:8px;left:8px;padding:3px 9px;background:#e02a3c;color:#fff;font-size:10.5px;font-weight:700;border-radius:4px;display:inline-flex;align-items:center;gap:3px;z-index:2}
.bldg-item-featured svg{width:9px;height:9px;fill:currentColor}
.bldg-item-days-badge{position:absolute;bottom:0;left:0;right:0;padding:5px 8px;background:rgba(11,37,69,.85);color:#fff;font-size:11px;font-weight:500;backdrop-filter:blur(4px);text-align:left}
.bldg-item-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding-right:0}
.bldg-item-price{font-size:20px;font-weight:700;color:#0c1f38;letter-spacing:-.4px;line-height:1.1;margin-bottom:4px}
.bldg-item-unit{font-size:14px;color:#0c1f38;font-weight:400;margin-bottom:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v=440e — bldg-item rows use shared .cdg-mi icon-metric token. 12px between
   groups, 4px icon→number; sep retired. */
.bldg-item-specs{font-size:12.5px;color:#475569;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:2px;font-weight:500}
.bldg-item-specs-sep{display:none}
.bldg-item-sqft{font-size:12.5px;color:#475569;font-weight:500;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* v=406 — same right-side heart+chevron pattern as the v69 panel row.
   Heart is now in flow inside .bldg-item-actions (was absolute top:14/right:14). */
.bldg-item-actions{
  display:flex; align-items:center; gap:4px;
  flex-shrink:0;
  align-self:center;
  padding-left:2px;
}
.bldg-item-fav{position:static;width:36px;height:36px;border-radius:50%;background:transparent;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#cbd5e1;padding:0;flex-shrink:0;transition:color .15s, background .15s, transform .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.bldg-item-fav svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;display:block;transition:fill .18s ease-out, stroke .18s ease-out}
.bldg-item-fav:hover{color:#dc2626;background:rgba(220,38,38,.08);transform:scale(1.10)}
.bldg-item-fav.on{color:#dc2626}
.bldg-item-fav.on svg{fill:#dc2626;stroke:#dc2626}
.bldg-item-chev{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#94a3b8;
  flex-shrink:0;
  pointer-events:none;
}
.bldg-item-chev svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:2}
.bldg-item:hover .bldg-item-chev{ color:#0c1f38 }

/* Mobile: building modal goes bottom-sheet style */
@media(max-width:768px){
  .bldg-modal{position:fixed;top:auto;left:0;right:0;bottom:calc(86px + env(safe-area-inset-bottom,0px));transform:none;max-width:100%;max-height:70vh;padding:0 12px}
  .bldg-modal.open{display:block;animation:bldgModalInMob .25s cubic-bezier(.2,.8,.2,1)}
  @keyframes bldgModalInMob{from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)}}
  .bldg-card{width:100%;max-width:none;max-height:none;box-shadow:0 -6px 24px rgba(0,0,0,.28)}
  .bldg-item-img{width:96px;height:88px}
  .bldg-item-price{font-size:17px}
  .bldg-hdr-name{font-size:20px}
}
/* Premium marker color treatments — refined gradients with subtle inner shadow for depth */
/* v11 Bug 3: brand-only color palette. Dropped orange (.mm-price) and purple
   (.mm-leased) gradients per user request — unexplained colors looked like bugs. */
.mm-new{background:#EA0649;box-shadow:0 2px 6px rgba(158,13,54,.32)}

/* v13 Fix 2: navy-circle pin (Condos.ca / HouseSigma cluster pattern). Replaces
   the price-pill .mm marker. Single listings render "1"; multi-unit buildings
   render the unit count. Featured (New / Price Change) get the teal accent. */
.mm-circle{width:28px;height:28px;border-radius:50%;background:#0c1f38;color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid #fff;box-shadow:0 2px 6px rgba(11,37,69,.32),0 1px 2px rgba(11,37,69,.18);transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .15s;line-height:1;font-feature-settings:"tnum" 1;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.mm-circle:hover{transform:scale(1.15);box-shadow:0 4px 12px rgba(11,37,69,.45);z-index:2}
.mm-circle.sel{outline:3px solid #EA0649;outline-offset:2px;z-index:3;transform:scale(1.1)}
.mm-circle.featured{background:#EA0649;box-shadow:0 2px 6px rgba(158,13,54,.4),0 1px 2px rgba(11,37,69,.18)}
.mm-circle-bldg{width:34px;height:34px;font-size:13.5px}
.mm-circle-bldg.featured{background:#EA0649}

/* ═══════════════════════════════════════════════════════════════════ */
/* v69 HOUSESIGMA-STYLE MAP PINS                                       */
/* Cluster (multi-unit building): orange numbered circle               */
/* Single listing: teal pill with letter prefix + abbreviated price    */
/* ═══════════════════════════════════════════════════════════════════ */
/* v194: single-listing pins reshaped — soft rounded oval ("price chip") in
   brand navy with white price text. Cleaner than the old triangle pill,
   removes the bright amber FEATURED tag noise on the map, matches the
   navy cluster pins (v155) for visual consistency. */
.v69-pin-single{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  background:#0c1f38;color:#fff;
  font-size:12px;font-weight:700;letter-spacing:-.2px;
  padding:7px 13px;border-radius:999px;
  border:2px solid #fff;
  box-shadow:0 4px 12px rgba(11,37,69,.32), 0 0 0 1px rgba(255,255,255,.5);
  cursor:pointer;white-space:nowrap;
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s, background .15s;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  line-height:1;
}
.v69-pin-single::after{display:none}
.v69-pin-single:hover{transform:scale(1.5);box-shadow:0 10px 28px rgba(11,37,69,.5), 0 0 0 1px #fff;z-index:5}
.v69-pin-single.sel{transform:scale(1.10);background:#EA0649;border-color:#fff;box-shadow:0 0 0 4px rgba(158,13,54,.30), 0 8px 22px rgba(158,13,54,.46);z-index:3}
.v69-pin-single .v69-pin-prefix{display:none}
/* v194: hide the amber Featured tag on the map — was visually competing
   with the listing pins. Featured status still surfaces in card UI. */
.v69-pin-single .v69-pin-featured{display:none !important}
/* v155: cluster pins now condos.ca-style — navy circle with white number,
   subtle white ring. Dropped the orange/red gradient (felt off-brand). */
.v69-pin-cluster{
  position:relative;width:36px;height:36px;border-radius:50%;
  background:#0c1f38;
  color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;border:2.5px solid #fff;
  box-shadow:0 4px 12px rgba(11,37,69,.32), 0 0 0 1px rgba(255,255,255,.5);
  transition:transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s;
  line-height:1;font-feature-settings:"tnum" 1;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.v69-pin-cluster:hover{transform:scale(1.5);box-shadow:0 10px 28px rgba(11,37,69,.55), 0 0 0 1px #fff;z-index:5}
.v69-pin-cluster.sel{
  background:#EA0649;
  box-shadow:0 0 0 4px rgba(158,13,54,.30), 0 8px 22px rgba(158,13,54,.45);
  z-index:3;transform:scale(1.08);
}
.v69-pin-cluster-lg{width:40px;height:40px;font-size:14px}
.v69-pin-cluster-xl{width:46px;height:46px;font-size:15px}
/* v306 Phase B — price label below each cluster pin, HouseSigma signature.
   Pinned via CSS positioning relative to the marker container. */
.v306-pin-price-lbl{
  position:absolute;
  top:calc(100% + 2px);
  left:50%; transform:translateX(-50%);
  background:#0c1f38; color:#fff;
  font-size:10.5px; font-weight:700; letter-spacing:.2px;
  padding:2px 7px; border-radius:6px;
  white-space:nowrap;
  box-shadow:0 2px 6px rgba(11,37,69,.30);
  pointer-events:none;
  font-feature-settings:"tnum" 1;
}
.v306-pin-price-lbl::before{
  content:''; position:absolute;
  top:-3px; left:50%; transform:translateX(-50%);
  border:3px solid transparent;
  border-bottom-color:#0c1f38;
}

/* ═══════════════════════════════════════════════════════════════════ */
/* v69 BUILDING SIDE PANEL — HouseSigma-style "X Listings in Selected" */
/* ═══════════════════════════════════════════════════════════════════ */
/* v96: building panel on desktop — anchored to the BOTTOM of the map area.
   Sits low so it doesn't block the map view. Smaller card sizes to match
   HouseSigma's compact look. */
/* v209: panel now CENTERED vertically + horizontally over the map area
   (HouseSigma pattern), instead of pinned to the bottom. Looks more
   intentional and easier to scan. */
.v69-bld-panel{
  position:fixed;
  top:50%;
  left:calc(45% + (55% / 2));
  right:auto;bottom:auto;
  width:480px;
  max-width:calc(55vw - 48px);
  max-height:70vh;
  background:#fff;
  border-radius:14px;
  border:1px solid #e8edf2;
  box-shadow:0 24px 60px rgba(11,37,69,.28), 0 4px 12px rgba(11,37,69,.10);
  z-index:550;
  display:flex;flex-direction:column;
  transform:translate(-50%,-50%) scale(.98);
  opacity:0;
  pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s;
  overflow:hidden;
}
.v69-bld-panel.open{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}
/* Once the user is in fullmap (no listings panel visible), center over the
   whole viewport instead of just the map area. */
body.in-fullmap .v69-bld-panel{
  left:50%;
}
/* v209: mobile — panel centered, narrow width, taller max */
@media(max-width:768px){
  .v69-bld-panel{
    left:50% !important;
    width:calc(100vw - 32px) !important;
    max-width:calc(100vw - 32px) !important;
    max-height:75vh !important;
  }
}
.v69-bld-panel-hdr{
  /* v295: centered header — building name + subtitle in the middle of
     the panel like condos.ca. Close X stays absolutely positioned on
     the right so the title stays perfectly centered. */
  position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:16px 56px 14px;
  border-bottom:1px solid #eef2f5;flex-shrink:0;background:#fff;
}
.v69-bld-panel-titlewrap{
  flex:0 1 auto; min-width:0; max-width:100%;
  text-align:center;
}
.v69-bld-panel-title{
  font-family:var(--serif),Georgia,serif;
  font-size:19px; font-weight:400; color:#0c1f38; letter-spacing:-.2px;
  line-height:1.2; margin-bottom:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.v69-bld-panel-subtitle{
  font-size:12.5px; font-weight:600; color:#EA0649; letter-spacing:.2px;
}
/* v291: "Listed In / Sold In" period filter chip row + year row.
   Years wrap into a 2nd line when there are too many to fit. */
.fm-period-years{
  display:flex; flex-wrap:wrap; gap:6px;
  margin-top:8px;
}
.fm-period-years .fm-chip-step{
  padding:6px 12px; font-size:12.5px;
  background:#fff; border:1px solid #e5e9ed; border-radius:999px;
  font-weight:600; color:#475569; cursor:pointer; font-family:inherit;
  transition:all .12s;
}
.fm-period-years .fm-chip-step:hover{ border-color:#cbd5e1 }
.fm-period-years .fm-chip-step.on{ background:#0c1f38; border-color:#0c1f38; color:#fff }

/* v292: gated header — when all listings are sold/leased and the user
   isn't signed in, the count IS the title (no building name shown).
   Cleaner than blurring + protects the data fully. */
.v69-bld-panel-titlewrap-gated{ display:flex; align-items:center }
.v69-bld-panel-title-only{
  font-family:var(--serif),Georgia,serif;
  font-size:21px; font-weight:400; color:#0c1f38; letter-spacing:-.2px;
  line-height:1.15;
}
/* v295: bigger close X — easier to tap, more prominent. Positioned
   absolutely on the right so the centered title isn't pushed. */
.v69-bld-panel-close{
  position:absolute !important;
  right:14px; top:50%; transform:translateY(-50%);
  width:34px !important; height:34px !important;
  background:#f8fafc !important;
  border:none;
  border-radius:50%;
  box-shadow:none !important;
  color:#0c1f38 !important;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.v69-bld-panel-close:hover{ background:#e2e8f0 !important }
.v69-bld-panel-close svg{ width:16px !important; height:16px !important }
/* v302: back-arrow on top-LEFT of the building panel header — mirrors the
   X on the right. Tapping it closes the panel (returns user to the map),
   matching the condos.ca / native-app pattern of "back" navigation. */
.v69-bld-panel-back{
  position:absolute;
  left:14px; top:50%; transform:translateY(-50%);
  width:34px; height:34px;
  background:#f8fafc;
  border:none;
  border-radius:50%;
  color:#0c1f38;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .12s;
}
.v69-bld-panel-back:hover{ background:#e2e8f0 }
.v69-bld-panel-back:active{ transform:translateY(-50%) scale(.94) }
.v69-bld-panel-back svg{ width:18px; height:18px; stroke:#0c1f38; stroke-width:2.4 }
/* v302: empty-state message when the building has no listings matching
   the current status filter (strict separation — never mixes statuses). */
.v69-bld-empty{
  padding:32px 18px;
  text-align:center;
  font-size:14px; color:#64748b;
  line-height:1.5;
}
.v69-bld-empty strong{ color:#0c1f38; font-weight:600 }
/* v292: tighter card layout on mobile — was colliding because the body
   content was taller than the photo. Bumped row min-height + tightened
   leading + locked photo size. */
@media(max-width:768px){
  .v69-bld-card{ min-height:104px; padding:10px 12px; gap:12px }
  .v69-bld-card-img{ width:96px !important; min-width:96px; height:96px !important; flex-shrink:0 }
  .v69-bld-card-body{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 }
  .v69-bld-card .v69-bld-card-price{ font-size:16px; line-height:1.15; margin-bottom:0 }
  .v69-bld-card .v69-bld-card-addr{ font-size:13px; line-height:1.25; margin-bottom:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
  .v69-bld-card .v69-bld-card-stats{ font-size:11.5px; line-height:1.2; gap:4px; margin-bottom:0 }
  .v69-bld-card .v69-bld-card-stats .v69-bld-stat{ gap:3px }
  .v69-bld-card .v69-bld-card-info{ font-size:11.5px; color:#64748b; gap:5px }
  .v69-bld-card-fav{ width:28px !important; height:28px !important; right:8px !important; top:8px !important }
  .v69-bld-card-fav svg{ width:18px !important; height:18px !important }
}

/* v288 legacy: blur class kept for backward-compat (no longer applied
   by the renderer in v292+). */
.v69-bld-panel-title-blur{
  filter:blur(7px);
  -webkit-filter:blur(7px);
  user-select:none;
  pointer-events:none;
  color:#94a3b8;
}
.v69-bld-panel-close{
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#475569;transition:background .12s,color .12s;
}
.v69-bld-panel-close:hover{background:#f1f5f9;color:#0c1f38}
.v69-bld-panel-close svg{width:16px;height:16px}
.v69-bld-panel-list{
  flex:1;overflow-y:auto;
  padding:14px 16px 28px;
  background:#fff;
}
.v69-bld-card{
  display:flex;gap:14px;
  padding:12px 12px 12px 12px;background:#fff;
  border:1px solid #e8edf2;border-radius:12px;
  margin-bottom:10px;cursor:pointer;
  transition:border-color .12s, box-shadow .12s, transform .12s;
  position:relative;
}
/* v=406 — heart + chevron live in .v69-bld-card-actions on the right side
   of the row (was: heart absolutely positioned in the top-right corner of
   the photo column). Body no longer needs right-padding since the actions
   column is in flow. Layout: [photo] [body flex:1] [♡ ›].

   Sized so the column is comfortably tappable on touch without crowding
   the body content — heart 36px, chevron 24px, 4px gap. */
.v69-bld-card-actions{
  display:flex; align-items:center; gap:4px;
  flex-shrink:0;
  align-self:center;
  padding-left:2px;
}
.v69-bld-card-body{padding-right:0}
.v69-bld-card-fav{
  position:static;
  width:36px;height:36px;border-radius:50%;
  background:transparent;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#cbd5e1;
  transition:color .15s, background .15s, transform .15s;
  z-index:auto;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  padding:0;
  flex-shrink:0;
}
.v69-bld-card-chev{
  width:24px;height:24px;
  display:inline-flex;align-items:center;justify-content:center;
  color:#94a3b8;
  flex-shrink:0;
  pointer-events:none;
}
.v69-bld-card-chev svg{width:18px;height:18px;display:block}
.v69-bld-card:hover .v69-bld-card-chev{ color:#0c1f38 }
.v69-bld-card-fav:hover{
  color:#dc2626;
  background:rgba(220,38,38,.08);
  transform:scale(1.10);
}
.v69-bld-card-fav svg{width:18px;height:18px;display:block;transition:fill .18s ease-out, stroke .18s ease-out}
.v69-bld-card-fav.on{color:#dc2626}
.v69-bld-card-fav.on svg{fill:#dc2626;stroke:#dc2626}
.v69-bld-card-fav.on:hover{background:rgba(220,38,38,.14)}
.v69-bld-card:hover{
  border-color:#EA0649;
  box-shadow:0 6px 18px rgba(158,13,54,.15);
  transform:translateY(-1px);
}
.v69-bld-card-img{
  width:96px;height:96px;flex-shrink:0;
  border-radius:8px;overflow:hidden;
  background:#0c1f38;position:relative;
}
.v69-bld-card-img img{width:100%;height:100%;object-fit:cover;display:block}
.v69-bld-card-pill{
  position:absolute;left:8px;bottom:8px;
  background:#EA0649;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  padding:4px 9px;border-radius:3px;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.v69-bld-card-pill-rent{background:#3b82f6}
.v69-bld-card-pill-sold{background:#dc2626}
.v69-bld-card-pill-leased{background:#475569}
.v69-bld-card-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 0}
/* v153: price + small date on the same row (date top-right of price, neutral grey) */
.v69-bld-card-top{display:flex;align-items:baseline;justify-content:flex-start;gap:8px;padding-right:32px;flex-wrap:wrap}
.v69-bld-card-price{font-size:13px;color:#475569;font-weight:500}
.v69-bld-card-price span{color:#EA0649;font-weight:700;font-size:15.5px}
.v69-bld-card-date{font-size:11.5px;color:#94a3b8;font-weight:500;flex-shrink:0}
/* v137: days-on-market badge moved onto the photo (bottom-left) so it can't
   conflict with the heart icon at top-right of the card body. */
.v69-bld-card-days-badge{position:absolute;bottom:6px;left:6px;padding:3px 8px;background:rgba(11,37,69,.85);color:#fff;font-size:10.5px;font-weight:600;border-radius:4px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);letter-spacing:.1px;line-height:1.2;z-index:2}
/* v139: days-on-market inline next to the price ("Listed: $X · Y days on market") */
.v69-bld-card-days-inline{font-size:11.5px;color:#94a3b8;font-weight:500;letter-spacing:.1px;white-space:nowrap}
/* v213: HouseSigma-style enhancements */
.v69-bld-card-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:3}
.v69-bld-card-share{width:32px;height:32px;border-radius:50%;background:#fff;border:1px solid rgba(11,37,69,.12);cursor:pointer;display:flex;align-items:center;justify-content:center;color:#475569;transition:color .15s, background .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;padding:0;box-shadow:0 1px 3px rgba(11,37,69,.08)}
.v69-bld-card-share:hover{color:#EA0649;background:#faf0f3}
.v69-bld-card-share svg{width:15px;height:15px}
.v69-bld-card-drop{position:absolute;top:6px;left:6px;background:#dc2626;color:#fff;font-size:10px;font-weight:700;letter-spacing:.5px;padding:3px 8px;border-radius:4px;text-transform:uppercase;box-shadow:0 2px 6px rgba(220,38,38,.35);z-index:2}
.v69-bld-card-days-onphoto{position:absolute;bottom:0;left:0;right:0;background:rgba(11,37,69,.92);color:#fff;font-size:11px;font-weight:600;padding:5px 8px;border-radius:0;letter-spacing:.1px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:2;line-height:1.2;white-space:nowrap;text-align:center;overflow:hidden;text-overflow:ellipsis}
.v69-bld-card .v69-bld-card-price{font-size:18px;font-weight:700;color:#0c1f38;letter-spacing:-.3px;line-height:1.1;margin-bottom:4px}
/* v253: HouseSigma-style sold gate. Sold/leased listings show price + photo
   but the photo is BLURRED with a "Create an account" CTA overlaid, and the
   address is masked. Price is the hook; address + visual detail are the
   sign-up incentive. */
.v69-bld-card-img .v69-sold-blur{
  position:absolute;inset:0;
  background:rgba(11,37,69,.55);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  z-index:1;
  pointer-events:none;
}
.v69-bld-card-img .v69-sold-cta{
  /* v299: condos.ca-style pill — text wraps to 2 lines ("Create an" /
     "account") so it fits inside the 96px square photo without clipping.
     Pill becomes more like a soft squircle to accommodate two lines. */
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;justify-content:center;
  padding:6px 10px;
  background:#fff;color:#0c1f38;
  border:none;border-radius:18px;
  font-size:10.5px;font-weight:600;letter-spacing:.1px;line-height:1.2;
  cursor:pointer;font-family:inherit;
  white-space:normal;text-align:center;
  max-width:calc(100% - 8px); width:max-content;
  box-shadow:0 2px 8px rgba(11,37,69,.18);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  z-index:2;
  transition:transform .12s, box-shadow .15s, background .15s;
}
.v69-bld-card-img .v69-sold-cta:hover{ background:#f8fafc; box-shadow:0 4px 12px rgba(11,37,69,.24) }
.v69-bld-card-img .v69-sold-cta:active{ transform:translate(-50%,-50%) scale(.96) }
.v69-bld-card-img .v69-sold-cta svg{ display:none }
.v69-bld-card-img .v69-sold-cta:hover{ box-shadow:0 6px 16px rgba(11,37,69,.4) }
.v69-bld-card-img .v69-sold-cta:active{ transform:translate(-50%,-50%) scale(.96) }
.v69-bld-card-img .v69-sold-cta svg{flex-shrink:0;color:#0c1f38}
.v69-bld-card .v69-sold-addr-locked{
  display:block;background:transparent;border:none;padding:0;
  font-family:inherit;font-size:13.5px;font-weight:500;
  color:#EA0649;cursor:pointer;text-align:left;
  text-decoration:underline;text-underline-offset:2px;
  margin-bottom:6px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.v69-bld-card .v69-sold-addr-locked:hover{ color:#CE2C44 }
/* v294/v299: gated card shows price + GRAY BARS (placeholder for the
   hidden address) + sign-in link. Matches condos.ca exactly — they
   render literal gray bars where the address would be, and the actual
   address never appears in the rendered DOM. */
.v69-bld-card .v69-bld-card-signin{
  display:inline-block;background:transparent;border:none;padding:0;
  font-family:inherit;font-size:13px;font-weight:500;
  color:#EA0649;cursor:pointer;text-align:left;
  text-decoration:underline;text-underline-offset:2px;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  margin-top:4px;
}
.v69-bld-card .v69-bld-card-signin:hover{ color:#CE2C44 }
.v69-bld-card-addr-blur{
  display:flex; flex-direction:column; gap:5px;
  margin:5px 0 6px;
}
.v69-bld-card-addr-blur .v69-bar{
  display:block; height:9px; border-radius:3px;
  background:#dfe4ea;
}
.v69-bld-card-addr-blur .v69-bar:first-child{ width:75% }
.v69-bld-card-addr-blur .v69-bar:last-child{ width:55% }
.v69-bld-card .v69-bld-card-addr{font-size:13.5px;color:#0c1f38;font-weight:500;margin-bottom:6px;line-height:1.3}
/* v=440e — v69 bldg cards adopt the shared .cdg-mi icon-metric pattern.
   Per-row stats use 12px between groups, 4px icon→number; legacy
   .v69-bld-stat selector kept as no-op for any cached HTML. */
.v69-bld-card .v69-bld-card-stats{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:12.5px;color:#475569;margin-bottom:4px;font-weight:500}
.v69-bld-card .v69-bld-card-stats .v69-bld-stat{display:inline-flex;align-items:center;gap:4px;font-weight:500}
.v69-bld-card .v69-bld-card-stats .v69-bld-stat svg{width:14px;height:14px;flex-shrink:0;color:#94a3b8}
.v69-bld-stat-sep{display:none}
.v69-bld-card-info{font-size:12px;color:#475569;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-weight:500}
.v69-bld-card-info span{white-space:nowrap}
/* hide old type/foot */
.v69-bld-card-type{display:none}
.v69-bld-card-foot{display:none}
/* v151: days-on-market in small subtle text on the bottom row, next to MLS#. */
.v69-bld-card-days-foot{font-size:11px;color:#94a3b8;font-weight:500;letter-spacing:.1px;white-space:nowrap}
.v69-bld-card-addr{font-size:13.5px;font-weight:600;color:#0c1f38;letter-spacing:-.1px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;white-space:nowrap}
.v69-bld-card-type{font-size:12px;color:#64748b}
.v69-bld-card-stats{display:flex;align-items:center;gap:10px;margin-top:2px;flex-wrap:wrap}
.v69-bld-stat{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#475569}
.v69-bld-stat svg{width:13px;height:13px;flex-shrink:0;stroke:#94a3b8}
.v69-bld-stat-sz{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;color:#64748b;font-weight:500}
.v69-bld-stat-sz svg{width:11px;height:11px;flex-shrink:0;stroke:#94a3b8}
.v69-bld-card-foot{font-size:10.5px;color:#94a3b8;letter-spacing:.1px;margin-top:auto;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v69-bld-card-mls{font-weight:600}

/* v85: building panel is now a centered modal — no need to reserve left space
   for the map. Both modals overlay center-screen (listing detail z=600,
   building panel z=6000 so listing-detail-from-card opens above it). */

@media (max-width:768px){
  /* v93: mobile = HouseSigma-style BOTTOM SHEET. Docks to the bottom of the
     viewport so the map stays visible at the top and the user can pan/zoom
     the map while looking at the listings. Drag-handle at the top of the
     sheet. No backdrop — map is interactive while sheet is open. */
  .v69-bld-panel{
    top:auto !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:65vh !important;
    max-height:65vh !important;
    border-radius:18px 18px 0 0 !important;
    border:none !important;
    border-top:1px solid #eef2f5 !important;
    transform:translateY(0) !important;
    opacity:0;
    visibility:hidden;
    box-shadow:0 -10px 32px rgba(11,37,69,.18) !important;
    transition:opacity .12s ease-out, visibility 0s linear .12s !important;
    z-index:540 !important;
    pointer-events:none;
    border-left:none !important;
    padding-top:8px;
  }
  .v69-bld-panel.open{
    opacity:1 !important;
    visibility:visible !important;
    transition:opacity .12s ease-out, visibility 0s !important;
    transform:translateY(0) !important;
    pointer-events:auto;
  }
  /* Drag handle at the top of the bottom sheet */
  .v69-bld-panel::before{
    content:'';
    position:absolute;
    top:6px;left:50%;transform:translateX(-50%);
    width:42px;height:4px;
    background:#cbd5e1;border-radius:999px;
    pointer-events:none;
  }
  .v69-bld-card-img{width:120px;height:100px}
  /* Hide bot-tabs while bottom sheet is open so the sheet has the bottom edge */
  body.v69-bld-panel-open .bot-tabs{ transform:translateY(100%); transition:transform .25s }
  body.v69-bld-panel-open .fab-row{ display:none !important }
}

/* v13 Fix 3: BUILDING SHEET — slides DOWN from top of viewport */
.bldg-sheet-ov{position:fixed;inset:0;z-index:600;pointer-events:none;display:flex;flex-direction:column}
.bldg-sheet-ov.open{pointer-events:auto}
.bldg-sheet-backdrop{position:absolute;inset:0;background:rgba(11,37,69,.42);opacity:0;transition:opacity .25s;z-index:0}
.bldg-sheet-ov.open .bldg-sheet-backdrop{opacity:1}
.bldg-sheet{position:relative;background:#fff;width:100%;max-height:72vh;display:flex;flex-direction:column;border-radius:0 0 18px 18px;box-shadow:0 14px 40px rgba(11,37,69,.32);transform:translateY(-100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);z-index:1;overflow:hidden}
.bldg-sheet-ov.open .bldg-sheet{transform:translateY(0)}
.bldg-sheet-hdr{padding:14px 48px 12px 18px;border-bottom:1px solid #eef2f5;flex-shrink:0;position:relative;padding-top:calc(var(--navh,56px) + 14px)}
.bldg-sheet-title{font-family:var(--serif),Georgia,serif;font-size:20px;color:#0c1f38;font-weight:500;letter-spacing:-.3px;line-height:1.15}
.bldg-sheet-sub{font-size:13px;color:#EA0649;margin-top:3px;font-weight:600;letter-spacing:.2px}
.bldg-sheet-close{position:absolute;top:calc(var(--navh,56px) + 10px);right:12px;width:36px;height:36px;border-radius:50%;background:#f4f6f8;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0c1f38;transition:background .15s}
.bldg-sheet-close:hover{background:#e8ecf0}
.bldg-sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 18px;display:flex;flex-direction:column;gap:10px}
@media (min-width:881px){
  .bldg-sheet{max-width:560px;margin:0 auto;border-radius:0 0 22px 22px}
}
.mm-rent{background:#EA0649;box-shadow:0 2px 6px rgba(158,13,54,.32)}
.mm-sale{background:#0c1f38;box-shadow:0 2px 6px rgba(11,37,69,.32)}
.mm-sold{background:#c0392b;box-shadow:0 2px 6px rgba(192,57,43,.28)} /* keep red for sold — universal indicator */
.mm-leased{background:#475569;box-shadow:0 2px 6px rgba(71,85,105,.28)} /* muted slate, not purple */
.mm-price{background:#0c1f38;box-shadow:0 2px 6px rgba(11,37,69,.32)} /* brand navy, not orange */
.mm-other{background:linear-gradient(135deg,#475569,#64748b);box-shadow:0 3px 10px rgba(71,85,105,.35),0 1px 3px rgba(11,37,69,.15),inset 0 1px 0 rgba(255,255,255,.15)}

/* ── LISTING DETAIL MODAL — HouseSigma-style full-page takeover on desktop ── */
/* v95: Listing detail opens from the TOP of the page (full-page overlay),
   like HouseSigma. The Selected Listings panel handles browsing within the
   map; clicking a card opens the FULL listing detail page. Mobile keeps
   full-screen. v94's "anchor to right side" approach was wrong — reverted. */
.modal-ov{position:fixed;inset:0;background:rgba(12,31,56,.55);backdrop-filter:blur(4px);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .22s}
.modal-ov.open{opacity:1;pointer-events:all}

/* ═══════════════════════════════════════════════════════════════════════════
   v307 — FULL-PAGE LISTING DETAIL.
   When a user clicks "Open full page" or arrives via a /listing/[id] URL,
   the modal promotes itself to fill the viewport — no overlay backdrop,
   no border-radius, no max-width. Reads as a real page, shareable, SEO-
   friendly, opens-in-new-tab-friendly. Same DOM, just different chrome.
   The listing modal body keeps its content (gallery, sidebar, sections)
   but feels like a full page rather than a popup.
   ═══════════════════════════════════════════════════════════════════════════ */
body.v307-fullpage .modal-ov{
  background:#fff !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  padding:0 !important;
  align-items:stretch !important;
}
body.v307-fullpage .modal{
  max-width:100% !important;
  max-height:none !important;
  height:100vh !important;
  height:100dvh !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transform:none !important;
}
body.v307-fullpage .modal-ov.open .modal{ transform:none !important }
/* Hide the legacy ✕ in fullpage mode — back-to-search button replaces it */
body.v307-fullpage .modal .v68-act-close{ display:none !important }
/* Header tab bar gets a "Back to search" pill on the left when in fullpage */
.v307-fullpage-back{
  display:none;
  align-items:center; gap:6px;
  padding:8px 14px 8px 10px;
  background:#0c1f38; color:#fff;
  border:none; border-radius:999px;
  font-size:13px; font-weight:600;
  cursor:pointer; font-family:inherit;
  margin-right:14px;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(11,37,69,.18);
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .12s;
}
.v307-fullpage-back:hover{ background:#13315c }
.v307-fullpage-back:active{ transform:scale(.96) }
.v307-fullpage-back svg{ width:14px; height:14px; stroke:#e37f9b }
body.v307-fullpage .v307-fullpage-back{ display:inline-flex }
/* v323: "Open Full Page" converted to icon-only (Zoocasa-style).
   Rounded square ~36-38px to match heart/share/X buttons in the same row.
   Shown in modal mode, hidden when already fullpage (back button replaces it). */
/* v=429x — Item 93: Open Full Page button RESTORED (Scott clarified the
   earlier ask was "fix the empty square", not "remove it"). Navy outline
   square pill — same brand as the v=429p pill set — with the Lucide
   external-link glyph at 18px. Clicking opens the listing in a new
   tab via _v307EnterFullPage(). */
/* v=429z — Item 93 update: square 36×36, 8px radius (not pill), thin
   1px #e5e7eb grey border, white bg, navy #0c1f38 external-link icon at
   18px. Matches Scott's reference screenshot exactly. */
.v307-open-full{
  display:inline-flex !important; align-items:center; justify-content:center; gap:0;
  width:36px; height:36px; padding:0;
  background:#ffffff; color:#0c1f38;
  border:1px solid #e5e7eb; border-radius:8px;
  /* font-size:14px keeps the global FOUC svg-1em rule (Item 81) from
     shrinking the inner SVG to 0px. The label span is display:none. */
  font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit;
  margin-right:8px; flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, border-color .12s;
  position:relative;
}
.v307-open-full svg{ width:18px !important; height:18px !important; stroke:#0c1f38; fill:none; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; display:block }
.v307-open-full:hover{ background:#f8fafc; border-color:#cbd5e1 }
.v307-open-full > span{ display:none }
body.v307-fullpage .v307-open-full{ display:none !important }
.v307-open-full:hover{ background:#f8fafc; border-color:#cbd5e1; color:#0c1f38 }
.v307-open-full svg{
  width:20px; height:20px;
  stroke:currentColor; fill:none;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
.v307-open-full > span{ display:none }
body.v307-fullpage .v307-open-full{ display:none !important }
/* No size collapse needed at narrow widths — already icon-only. */
/* v95: full-page modal back, like HouseSigma. Wide (1100px) to fit the
   photo grid + Schedule Viewing form side-by-side. */
.modal{width:100%;max-width:1100px;max-height:94vh;background:var(--white);border-radius:18px;overflow:hidden;overflow-y:auto;transform:scale(.96) translateY(10px);transition:transform .25s var(--ease);box-shadow:0 30px 80px rgba(11,37,69,.35),0 8px 24px rgba(11,37,69,.18);display:flex;flex-direction:column;position:relative}
.modal-ov.open .modal{transform:scale(1) translateY(0)}

/* Top bar (mobile primarily — shows back + search + menu) */
.m-topbar{display:none;background:var(--navy);padding:10px 12px;align-items:center;gap:10px;flex-shrink:0}
/* v=658 — bumped from 36px → 44px tap target (iOS/Google touch-target
   minimum) per Scott's "make this arrow bigger" complaint. SVG chevron
   24px so it reads at a glance. Applies to both back + menu icons. */
.m-topbar-back,.m-topbar-menu{width:44px;height:44px;border-radius:var(--r);background:transparent;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0}
.m-topbar-back svg,.m-topbar-menu svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2.4}
.m-topbar-search{flex:1;background:var(--white);border-radius:var(--r);display:flex;align-items:center;padding:0 12px;height:40px;gap:8px}
.m-topbar-search svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2.2;flex-shrink:0}
.m-topbar-search input{flex:1;border:none;outline:none;background:transparent;font-size:14px;color:var(--navy);font-family:var(--sans)}
/* v=539a — top-right Save + Share buttons (elite mobile pattern). White-on-
   navy 36px hit targets, matching .m-topbar-back. Save heart fills rose on
   active (.on class) — synced by _syncActiveListingFavButtons. */
.m-topbar-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.m-topbar-act{width:36px;height:36px;border-radius:var(--r);background:transparent;border:none;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;transition:background .12s,transform .12s}
.m-topbar-act svg{width:21px;height:21px;color:#fff;stroke:currentColor;fill:none}
.m-topbar-act:hover{background:rgba(255,255,255,.08)}
.m-topbar-act:active{transform:scale(.94)}
.m-topbar-fav.on svg{color:#ff5b78;fill:#ff5b78;stroke:#ff5b78}

/* Address row above gallery (mobile condos.ca style) */
.m-addr-row{display:flex;align-items:flex-start;justify-content:space-between;padding:14px 18px 10px;gap:12px;flex-shrink:0;background:var(--white);border-bottom:1px solid var(--light)}
.m-addr-info{flex:1;min-width:0}
.m-addr{font-family:var(--serif);font-size:18px;font-weight:400;color:var(--navy);line-height:1.25;margin-bottom:4px}
.m-addr-sub{font-size:13px;color:var(--mid)}
/* v323: four-segment subtitle (building → hood → district → city). All underlined. */
.m-bldg-link,.m-hood-link,.m-dist-link,.m-city-link{color:var(--teal);text-decoration:underline;cursor:pointer}
.m-addr-sub .m-addr-in,
.m-addr-sub .m-addr-sep{color:var(--mid);text-decoration:none;cursor:default}

/* v21 Fix 4: BUILDING POPOVER (right-side tooltip on desktop, bottom sheet on
   narrow screens). Brief building info + "View building →" link inside. */
.bldg-popover{position:fixed;z-index:720;background:#fff;border-radius:14px;box-shadow:0 14px 40px rgba(11,37,69,.22),0 4px 12px rgba(11,37,69,.08);border:1px solid #e5e9ee;width:280px;padding:18px 20px 16px;font-family:inherit;opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top left;transition:opacity .18s,transform .18s;pointer-events:none}
.bldg-popover.open{opacity:1;transform:none;pointer-events:auto}
.bldg-popover[hidden]{display:none}
.bldg-popover-x{position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:50%;background:#f4f6f8;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#0c1f38;padding:0;transition:background .12s}
.bldg-popover-x:hover{background:#e8ecf0}
.bldg-popover-eyebrow{font-size:10.5px;font-weight:700;color:#788a9d;text-transform:uppercase;letter-spacing:.6px;margin-bottom:4px}
.bldg-popover-title{font-family:var(--serif),Georgia,serif;font-size:18px;color:#0c1f38;font-weight:500;letter-spacing:-.3px;line-height:1.2;padding-right:32px;margin-bottom:4px}
.bldg-popover-addr{font-size:12.5px;color:#5a6e84;line-height:1.4;margin-bottom:12px}
.bldg-popover-stats{display:flex;gap:14px;margin-bottom:14px;padding:10px 12px;background:#f7fafa;border-radius:10px}
.bldg-popover-stat{flex:1;text-align:center}
.bldg-popover-stat-num{font-size:18px;font-weight:800;color:#0c1f38;line-height:1.05;font-feature-settings:"tnum" 1}
.bldg-popover-stat-lbl{font-size:10.5px;color:#788a9d;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:2px}
.bldg-popover-go{width:100%;padding:11px 14px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;letter-spacing:-.1px;min-height:42px;transition:background .12s}
.bldg-popover-go:hover{background:#CE2C44}
@media (max-width:520px){
  /* Narrow screens: render as a bottom sheet for thumb reach. */
  .bldg-popover.bldg-popover-sheet{width:auto;left:0 !important;right:0 !important;bottom:env(safe-area-inset-bottom,0px) !important;top:auto !important;border-radius:18px 18px 0 0;border-bottom:none;transform:translateY(100%);transform-origin:bottom center;padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));max-width:100vw}
  .bldg-popover.bldg-popover-sheet.open{transform:translateY(0)}
}
.m-addr-actions{display:flex;gap:7px;flex-shrink:0}
/* v321: refined outlined-square icon trio for the listing modal header.
   Each button is a 38px rounded-square with a 1px gray-200 border, white
   background, and a colored icon — heart=rose-600, share=teal-700,
   close=condos.ca navy (#0F546F). Hover tints the bg to a 5% wash of the
   icon's color so the action reads but doesn't shout. */
.m-fav-btn,.m-share-btn,.m-close-btn{
  width:38px;height:38px;border-radius:8px;
  background:var(--white);border:1px solid #e5e7eb;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  transition:background .15s, border-color .15s, color .15s;
}
.m-fav-btn svg,.m-share-btn svg,.m-close-btn svg{
  width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;
}
/* v323: resampled from condos.ca live (lambton-square listing). */
/* Heart — red-pink #EA0649 (matches Favourite pill). */
.m-fav-btn{ color:#ea0649 }
.m-fav-btn:hover{ background:#fff0f4 }
.m-fav-btn.on svg{ fill:#ea0649; stroke:#ea0649 }
/* Share — navy/blue-teal #0F546F (matches Share pill, sampled from condos.ca). */
.m-share-btn{ color:#0f546f }
.m-share-btn:hover{ background:#eef5f8 }
/* Close — charcoal #1F1F23 (per spec; matches the near-black X icon
   condos.ca uses in their listing modal header). */
.m-close-btn{ color:#1f1f23 }
.m-close-btn:hover{ background:#f1f5f9 }

/* v=405 — "← Back to map" affordance, top-left of the detail modal.
   Pinned absolutely so it overlays the photo gallery / hero strip without
   pushing layout. JS toggles display:none ↔ inline-flex based on whether
   sessionStorage has a popup snapshot to return to. condos.ca pattern:
   back arrow top-left, X top-right — same close, two affordances. */
.m-back-arrow{
  position:absolute;
  top:14px; left:14px;
  z-index:30;
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 14px 0 10px;
  background:rgba(255,255,255,.94);
  color:#0c1f38;
  border:1px solid rgba(12,31,56,.10);
  border-radius:18px;
  font-family:inherit; font-size:13px; font-weight:600; letter-spacing:.1px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(11,37,69,.18), 0 6px 16px rgba(11,37,69,.10);
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.m-back-arrow:hover{
  background:#ffffff;
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(11,37,69,.24), 0 10px 22px rgba(11,37,69,.14);
}
.m-back-arrow svg{ flex-shrink:0; stroke:#0c1f38 }
@media(max-width:720px){
  .m-back-arrow{
    top:10px; left:10px;
    height:34px; padding:0 12px 0 8px;
    font-size:12.5px;
  }
  .m-back-arrow span{ display:none }
  .m-back-arrow{ padding:0 8px }
}

/* Photo gallery — larger, condos.ca style */
/* v17 Fix 2: PHOTO LIGHTBOX — fullscreen image viewer */
.lb-ov{position:fixed;inset:0;z-index:7500;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s}
.lb-ov.open{opacity:1;pointer-events:auto}
.lb-backdrop{position:absolute;inset:0;background:#0c1f38;background:radial-gradient(ellipse at center, #1a2b48 0%, #0c1f38 75%, #050d1a 100%);cursor:zoom-out}
.lb-img{position:relative;max-width:96vw;max-height:88vh;object-fit:contain;border-radius:6px;box-shadow:0 20px 60px rgba(0,0,0,.55);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;will-change:transform,opacity;transition:transform .22s, opacity .2s;background:#0c1f38}
.lb-counter{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);left:50%;transform:translateX(-50%);background:rgba(255,255,255,.12);color:#fff;padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:600;letter-spacing:.4px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;font-feature-settings:"tnum" 1}
.lb-close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);right:10px;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;transition:background .15s,transform .15s}
.lb-close:hover{background:rgba(255,255,255,.24);transform:scale(1.06)}
.lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;transition:background .15s,transform .15s}
.lb-prev{left:14px}
.lb-next{right:14px}
.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.26);transform:translateY(-50%) scale(1.08)}
body.lb-open{overflow:hidden}
@media (max-width:640px){
  /* v313: chevrons restored on mobile per Scott. Users navigate by tap OR
     swipe — both keep working. Sized down + repositioned for thumb reach. */
  .lb-prev,.lb-next{
    display:flex;
    width:36px;height:36px;
    background:rgba(255,255,255,.92);
    color:#0c1f38;
    box-shadow:0 2px 8px rgba(0,0,0,.30);
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  .lb-prev svg,.lb-next svg{stroke:#0c1f38}
  .lb-prev{left:12px}
  .lb-next{right:12px}
  .lb-img{max-width:100vw;max-height:82vh;border-radius:0}
}
@media (prefers-reduced-motion: reduce){
  .lb-ov,.lb-img,.lb-close,.lb-prev,.lb-next{transition:none !important}
}
.m-gallery-slide{cursor:zoom-in;-webkit-tap-highlight-color:transparent}

.m-gallery{position:relative;height:520px;flex-shrink:0;background:var(--navy2);overflow:hidden}
.m-gallery-track{display:flex;height:100%;transition:transform .3s var(--ease)}
.m-gallery-slide{min-width:100%;height:100%}
.m-gallery-slide img{width:100%;height:100%;object-fit:cover}
.m-gallery-prev,.m-gallery-next{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;background:rgba(255,255,255,.95);border-radius:50%;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 14px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.08);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.m-gallery-prev:hover,.m-gallery-next:hover{background:#fff;transform:translateY(-50%) scale(1.08);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.m-gallery-prev{left:18px}
.m-gallery-next{right:14px}
.m-gallery-prev svg,.m-gallery-next svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:2.5}
.m-gallery-prev:hover,.m-gallery-next:hover{background:#fff}
.m-gallery-counter{position:absolute;bottom:18px;right:18px;z-index:5;background:rgba(12,31,56,.85);color:#fff;padding:8px 14px;border-radius:8px;font-size:13.5px;font-weight:600;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 4px 12px rgba(0,0,0,.22);letter-spacing:.2px}

/* ═══════════════════════════════════════════════════════════════════ */
/* v68 HOUSESIGMA-STYLE LISTING HEADER (tabs + actions) — DESKTOP ONLY */
/* ═══════════════════════════════════════════════════════════════════ */
.v68-listing-hdr{display:none}
@media (min-width:769px){
  /* Hide the legacy mobile m-topbar + m-addr-row on desktop now that we have v68 */
  .modal .m-topbar{display:none}
  .modal .m-addr-row{display:none}
  /* v317 Bug A: housesigma-pattern — tabs hug LEFT, actions hug RIGHT,
     no clustered middle. justify-content:space-between + tabs flex:1 +
     min-width:0 keeps the actions group pinned right while tabs scroll
     within their available width. Edge-to-edge feel via 24px horizontal
     padding (was 22px). Height stays 54px so the existing sticky / scroll-
     padding-top math is unchanged. */
  .v68-listing-hdr{
    display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:0 24px;
    height:54px;
    background:#fff;
    border-bottom:1px solid var(--off2);
    flex-shrink:0;
    position:sticky;top:0;z-index:30;
  }
  .v68-listing-tabs{
    display:flex;align-items:center;gap:0;height:100%;flex:1;min-width:0;
    overflow-x:auto;scrollbar-width:none;
    /* v311 Bug 3: native momentum scroll on small modals; mask hints overflow. */
    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth;
    -webkit-mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
            mask-image:linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
  }
  .v68-listing-tabs::-webkit-scrollbar{display:none}
  .v68-tab{
    appearance:none;background:transparent;border:none;cursor:pointer;font-family:inherit;
    /* v311 Bug 3: 14px → 11px to free ~36px so all 6 tabs fit cleanly without truncation */
    padding:0 11px;height:100%;display:flex;align-items:center;
    font-size:14px;font-weight:500;color:#475569;letter-spacing:-.1px;
    position:relative;white-space:nowrap;
    transition:color .15s;
  }
  .v68-tab:hover{color:#0c1f38}
  .v68-tab.on{color:#EA0649;font-weight:600}
  .v68-tab.on::after{
    content:'';position:absolute;left:11px;right:11px;bottom:-1px;
    height:2px;background:#EA0649;border-radius:2px 2px 0 0;
  }
  .v68-listing-actions{display:flex;align-items:center;gap:3px;flex-shrink:0;position:relative}
  .v68-act{
    appearance:none;background:transparent;border:none;cursor:pointer;font-family:inherit;
    width:32px;height:32px;border-radius:50%;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
    color:#475569;transition:all .15s;
    position:relative;padding:0;
  }
  .v68-act svg{width:18px;height:18px;flex-shrink:0}
  .v68-act-lbl{display:none}
  .v68-act:hover{background:#f1f5f9;color:#0c1f38}
  /* Active states for stateful actions */
  .v68-act.on{color:#EA0649}
  .v68-act.on svg{fill:#EA0649;stroke:#EA0649}
  .v68-act#v68-fav.on svg{fill:#e02a3c;stroke:#e02a3c}
  .v68-act#v68-noint.on{color:#dc2626}
  .v68-act#v68-noint.on svg{stroke:#dc2626}
  .v68-act#v68-toured.on{color:#EA0649}
  .v68-act#v68-note.on{color:#0c1f38}
  .v68-act#v68-note.on svg{stroke:#0c1f38;fill:#fef3c7}
  /* Hover tooltip */
  .v68-act::before{
    content:attr(data-lbl);
    position:absolute;top:46px;left:50%;transform:translateX(-50%);
    background:#0c1f38;color:#fff;font-size:11.5px;font-weight:500;letter-spacing:.1px;
    padding:5px 9px;border-radius:6px;white-space:nowrap;
    pointer-events:none;opacity:0;transition:opacity .15s;
    z-index:50;
  }
  .v68-act:hover::before{opacity:1}
  .v68-act-close{margin-left:6px}
  .v68-act-close:hover{background:#fef2f2;color:#dc2626}
  /* v100: More-menu dropdown */
  .v100-more-menu{
    position:absolute;top:48px;right:0;
    width:260px;min-width:260px;max-width:260px;
    background:#fff;border:1px solid #e8edf2;border-radius:12px;
    box-shadow:0 24px 56px rgba(11,37,69,.28), 0 6px 16px rgba(11,37,69,.14);
    padding:6px;z-index:1000;
    display:none;
  }
  .v100-more-menu.open{display:block}
  .v100-more-item{
    display:flex;align-items:center;gap:12px;
    padding:10px 12px;border-radius:8px;cursor:pointer;
    font-size:13.5px;color:#0c1f38;letter-spacing:-.05px;
    transition:background .12s;
  }
  .v100-more-item:hover{background:#f1f5f9}
  .v100-more-icon{width:20px;height:20px;color:#475569;flex-shrink:0;display:flex;align-items:center;justify-content:center}
  .v100-more-icon svg{width:18px;height:18px}
  .v100-more-lbl{flex:1;min-width:0}
  .v100-more-toggle{
    width:32px;height:18px;border-radius:999px;background:#e2e8f0;
    position:relative;flex-shrink:0;transition:background .15s;
  }
  .v100-more-toggle::after{
    content:'';position:absolute;top:2px;left:2px;
    width:14px;height:14px;border-radius:50%;background:#fff;
    box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .15s;
  }
  .v100-more-toggle.on{background:#EA0649}
  .v100-more-toggle.on::after{transform:translateX(14px)}
}

/* v68 Note popover — clean white card, slides in from right */
.v68-note-pop{
  position:fixed;inset:0;background:rgba(12,31,56,.45);
  display:none;align-items:center;justify-content:center;
  z-index:7000;padding:20px;
}
.v68-note-pop.open{display:flex}
.v68-note-pop-inner{
  background:#fff;border-radius:16px;padding:24px;
  max-width:520px;width:100%;
  box-shadow:0 24px 60px rgba(12,31,56,.3);
}
.v68-note-pop-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.v68-note-pop-hdr h3{margin:0;font-family:var(--serif);font-weight:400;font-size:22px;color:#0c1f38;letter-spacing:-.4px}
.v68-note-pop-close{
  appearance:none;background:transparent;border:none;cursor:pointer;
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#64748b;transition:background .12s;
}
.v68-note-pop-close:hover{background:#f1f5f9;color:#0c1f38}
.v68-note-pop-close svg{width:16px;height:16px}
.v68-note-pop-sub{font-size:13px;color:#64748b;margin:0 0 14px}
.v68-note-pop-area{
  width:100%;border:1.5px solid #e2e8f0;border-radius:10px;
  padding:14px 16px;font-family:inherit;font-size:14px;line-height:1.5;color:#0c1f38;
  resize:vertical;min-height:120px;outline:none;transition:border-color .15s;
}
.v68-note-pop-area:focus{border-color:#EA0649}
.v68-note-pop-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:12px}
.v68-note-pop-cnt{font-size:11.5px;color:#94a3b8;font-weight:500}
.v68-note-pop-save{
  appearance:none;background:#EA0649;color:#fff;border:none;font-family:inherit;
  padding:10px 22px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;
  letter-spacing:-.1px;transition:background .15s,transform .12s;
}
.v68-note-pop-save:hover{background:#EA0649}
.v68-note-pop-save:active{transform:scale(.97)}

/* v=426 — bold uppercase teal photo-overlay pill killed. Scott flagged this
   as the duplicate of the soft pastel pill that now lives above the price.
   Status is conveyed once at the top of the price section, not redundantly
   on the photo. (Listing CARDS in search results still want a status pill
   top-left of the photo per item 42 — but that's a separate template,
   handled in a follow-up agent.) */
.v68-photogrid-status{ display:none !important }
.v68-photogrid-status-LEGACY{
  position:absolute;bottom:14px;left:14px;
  background:#EA0649;color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:6px 12px;border-radius:4px;
  box-shadow:0 4px 12px rgba(158,13,54,.35);
  z-index:6;
}
.v68-photogrid-status.v68-status-sold{background:#dc2626;box-shadow:0 4px 12px rgba(220,38,38,.35)}
.v68-photogrid-status.v68-status-leased{background:#475569;box-shadow:0 4px 12px rgba(71,85,105,.35)}
.v68-photogrid-status.v68-status-rent{background:#3b82f6;box-shadow:0 4px 12px rgba(59,130,246,.35)}
@media (min-width:769px){
  .v68-photogrid .v68-photogrid-allbtn{
    background:#EA0649 !important;color:#fff !important;
    box-shadow:0 6px 20px rgba(158,13,54,.3) !important;
  }
  .v68-photogrid .v68-photogrid-allbtn:hover{background:#EA0649 !important}
  .v68-photogrid .v68-photogrid-allbtn svg{stroke:#fff}
}
@media (max-width:768px){
  .v68-photogrid-status{display:none}
}

/* Mobile: action toolbar stays on the existing m-addr-row, header tabs hide */

/* ═══════════════════════════════════════════════════════════════════ */
/* v65 PHOTO GRID — condos.ca-style 1 hero + 2x2 thumb layout (DESKTOP) */
/* ═══════════════════════════════════════════════════════════════════ */
.v65-photogrid{display:none;position:relative;width:100%;max-width:100%;background:#fff}
@media (min-width:769px){
  /* v102: condos.ca-style photo header — 1 big hero on left + 2 thumbs stacked
     on the right. Hero ~62% width, thumbs ~38%. Compact height (380px).
     "See all N photos" button stays bottom-right, opens fullscreen lightbox. */
  .m-gallery{display:none}
  .v65-photogrid{display:grid;grid-template-columns:1.6fr 1fr;gap:6px;height:380px;flex-shrink:0;padding:0}
  /* v=475 — single-column variant for 1-2 photo listings. Collapses the
     empty thumb slots so the hero stretches edge-to-edge instead of leaving
     a gray placeholder column. */
  .v65-photogrid.v65-pg-single{grid-template-columns:1fr}
  .v65-photogrid.v65-pg-single .v65-photogrid-thumbs{display:none}
  .v65-photogrid-hero{background:#0c1f38 center/cover no-repeat;cursor:zoom-in;-webkit-tap-highlight-color:transparent;border-radius:0;position:relative;overflow:hidden;transition:opacity .15s}
  .v65-photogrid-hero:hover{opacity:.96}
  .v65-photogrid-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 70%,rgba(0,0,0,.18) 100%);pointer-events:none;opacity:0;transition:opacity .15s}
  .v65-photogrid-hero:hover::after{opacity:1}
  .v65-photogrid-thumbs{display:grid;grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:6px;min-height:0;min-width:0}
  .v65-photogrid-thumb{background:#0c1f38 center/cover no-repeat;cursor:zoom-in;-webkit-tap-highlight-color:transparent;position:relative;overflow:hidden;transition:opacity .15s;min-width:0;min-height:0}
  .v65-photogrid-thumb:hover{opacity:.92}
  .v65-photogrid-thumb-empty{background:#f1f5f9}
  .v65-photogrid-allbtn{position:absolute;right:14px;bottom:14px;z-index:5;background:#fff;color:#0c1f38;border:none;border-radius:8px;padding:9px 14px;font-size:12.5px;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-family:inherit;box-shadow:0 6px 18px rgba(0,0,0,.20),0 1px 2px rgba(0,0,0,.08);letter-spacing:-.1px;transition:transform .15s,box-shadow .15s}
  .v65-photogrid-allbtn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(0,0,0,.26)}
  .v65-photogrid-allbtn svg{width:14px;height:14px;flex-shrink:0}
}
@media (min-width:1100px){
  .v65-photogrid{height:420px}
}

/* v99: quick-action strip under the photo grid */
.v99-qstrip{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 22px;
  background:#fff;border-bottom:1px solid #eef2f5;flex-shrink:0;
}
.v99-qstrip-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.v99-qstrip-addr{font-size:16px;font-weight:700;color:#0c1f38;letter-spacing:-.2px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v99-qstrip-meta{font-size:12.5px;color:#475569;font-weight:500;margin-top:2px}
.v99-qstrip-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.v99-qbtn{appearance:none;background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:8px 12px;font-size:12.5px;font-weight:600;color:#0c1f38;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;letter-spacing:-.05px;transition:all .12s}
.v99-qbtn:hover{background:#f1f5f9;border-color:#cbd5e1;transform:translateY(-1px)}
.v99-qbtn svg{width:14px;height:14px;flex-shrink:0}
.v99-qbtn.on svg{fill:#e02a3c;stroke:#e02a3c}
.v99-qbtn-cta{background:#EA0649;color:#fff;border-color:#EA0649;padding:9px 16px;box-shadow:0 4px 12px rgba(158,13,54,.28)}
.v99-qbtn-cta:hover{background:#EA0649;border-color:#EA0649;color:#fff;box-shadow:0 6px 16px rgba(158,13,54,.4)}
.v99-qbtn-cta svg{width:13px;height:13px}
@media (max-width:768px){
  .v99-qstrip{padding:11px 14px;gap:10px}
  .v99-qstrip-addr{font-size:14px}
  .v99-qstrip-meta{font-size:11.5px}
  .v99-qbtn{padding:7px 9px;font-size:11.5px}
  .v99-qbtn-lbl{display:none}
  .v99-qbtn-cta{padding:8px 12px}
  .v99-qbtn-cta .v99-qbtn-lbl{display:inline}
}
/* v113: hide the legacy m-addr-row (pre-v112 address block) — duplicate of
   the new v112 address block. */
.modal .m-addr-row{ display:none !important }
/* v114: hide legacy m-price-block — v112 covers price now */
.modal .m-price-block{ display:none !important }
/* v115: hide "Buy with PropertyHub" section per user direction (will revisit later) */
.modal .v83-buy-sec{ display:none !important }
/* v115: hide the broken v42 viewing-now counter + the gated "Unlock full history"
   capture (replaced by the new condos.ca-style Price History section). */
.modal .v42-viewing-now{ display:none !important }
.modal .v42-capture{ display:none !important }
/* v116: hide the OLD "Price & Listing History" m-history-sec — replaced by
   the new v115 Price History section that matches condos.ca. */
.modal .m-history-sec{ display:none !important }
/* v116: hide the OLD "Property Details" m-sec (m-details) — duplicates the
   new v114 Listing Details table. */
.modal .m-sec:has(.m-dg#m-details){ display:none !important }
/* v307g — desktop keeps the original 4-button .m-cta-4 (Schedule Tour /
   Talk to Agent / phone / heart). Mobile gets the simpler .m-cta-2
   (Request a viewing pill + heart). Hide each on the wrong viewport. */
@media (max-width:1023px){
  .modal .m-cta-4{ display:none !important }
}
@media (min-width:1024px){
  .modal .m-cta-2{ display:none !important }
}
/* v308: mobile detail CTA now lives only at body level (.v42-detail-cta).
   Keeping a second fixed bar inside .modal made the button/heart drift or
   disappear on scroll on some mobile browsers, so the inner duplicate is
   fully disabled on phones only. */
@media (max-width:768px){
  .modal .m-cta-2{ display:none !important }
}
/* On desktop the v303 sidebar covers Schedule Tour / Contact Agent —
   hide the m-cta-2 bottom bar to avoid duplication. */
@media (min-width:1024px){
  .modal .m-cta-2{ display:none !important }
}
/* v122: on mobile, hide the m-topbar search bar on listing detail (was
   confusing — typing didn't take user to map results). Listing detail
   address is already shown in the v112 address block below. Users can
   search via the home page or listings page. */
/* v124: KEEP the search bar on mobile listing detail (HouseSigma/Zolo/
   Zoocasa pattern). Tapping opens the v121 search overlay (which v123
   added TRREB area-code recognition + city/neighborhood/MLS lookup). */
@media (max-width:768px){
  .modal .m-topbar-search{ display:flex !important }
}
/* v=503AA P0: anchor sticky CTA to viewport bottom (was bottom:84
   which assumes a 84px bottom-tabs strip — on iPhone listing
   detail there's no bot-tabs strip, so the CTA floated mid-screen
   covering the stats row). Use safe-area-inset for iOS notch. */
@media (max-width:768px){
  .v113-sticky-cta{
    position:fixed !important;
    bottom:max(12px, env(safe-area-inset-bottom, 12px)) !important;
    left:50% !important;right:auto !important;
    transform:translateX(-50%) !important;
    z-index:9050 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-top:none !important;
    padding:0 !important;
  }
  .modal{ padding-bottom:0 !important }
  body.in-listing-detail .modal{ padding-bottom:0 !important }
}

/* v120: REMOVE FAKE / MOCK STATS site-wide. We cannot publish unverified
   numbers — TRREB compliance + honest marketing. Hides:
   - "X people viewing this listing now"
   - "1,247 people unlocked this week"
   - "1,200+ Toronto sellers" / "340+ Toronto buyers"
   - "4,200+ Torontonians get the daily brief"
   - "4.9 stars on Google" trust badges
   - "47-min Avg Reply" trust badges
   - v65 trust signals row (RECO + 4.9 + 47-min)
   - v42 ticker (recent-activity feed using mock data) */
.v42-viewing-now,
.v42-trust-badge,
.hp-leadband-trust{ display:none !important }
.v65-trustbar{ display:none !important }
.v42-ticker{ display:none !important }
.v42-magnets-stats{ display:none !important }
/* "Locked sold prices drive signup" gate text — soften to remove fake count */

/* v280/v281/v282: Compact single-listing popup card on the map.
   v282: centered on the map but narrower (max 360px) and shifted upward
   so it sits in the upper-middle area, leaving the right tools rail
   (Layers / Transit / Schools / Draw / Nearby) and the bottom controls
   uncovered. Pulled left of dead-center on desktop where the rail is
   visible too. */
.v280-card-ov{
  position:absolute; inset:0; z-index:548;
  display:none;
  pointer-events:none;
}
.v280-card-ov.open{ display:block }
.v280-card{
  position:absolute;
  left:50%; top:32%;
  transform:translateX(-50%);
  /* v302b: card is now flex-column — top row (photo+body) and a bottom
     banner spanning the full width. */
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:12px;
  width:min(360px, calc(100vw - 100px));
  box-shadow:0 12px 36px rgba(11,37,69,.22), 0 2px 8px rgba(11,37,69,.10);
  cursor:pointer;
  overflow:hidden;
  font-family:inherit;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  animation:v280CardIn .18s ease-out;
}
.v280-card-row{
  /* v302b: holds photo (left) + body (right). The bottom banner sits
     OUTSIDE this row, spanning the full card width. */
  display:flex; flex-direction:row;
  flex:1; min-height:0;
}
@keyframes v280CardIn{
  from{ opacity:0; transform:translate(-50%, -6px) scale(.97) }
  to  { opacity:1; transform:translate(-50%, 0) scale(1) }
}
/* v302b: X close moved BACK onto the photo top-left (matches condos.ca).
   Dark background so it stands out against any photo. */
.v280-card-close{
  position:absolute; top:6px; left:6px; z-index:3;
  width:24px; height:24px; border-radius:50%;
  background:rgba(11,31,56,.78); border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 1px 4px rgba(11,37,69,.28);
  -webkit-tap-highlight-color:transparent;
  transition:background .12s, transform .12s;
  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}
.v280-card-close:hover{ background:rgba(11,31,56,.92) }
.v280-card-close:active{ transform:scale(.92) }
.v280-card-close svg{ width:12px; height:12px; stroke:#fff; stroke-width:2.8 }
.v280-card-img{
  /* v283: square photo — matches condos.ca's compact card. Photo is a
     fixed 120x120 square; the card body content is laid out to fit that
     same height so the card reads as one balanced unit. */
  width:120px; min-width:120px; height:120px;
  background:#0c1f38;
  position:relative; overflow:hidden;
  flex-shrink:0;
}
.v280-card-img img{ width:100%; height:100%; object-fit:cover; display:block }
.v280-card-days{
  /* v=484j-pill — restyled from a dark navy footer band to the same
     sage/teal pill the cards + listing detail use. Sits absolute at
     bottom-left of the photo as a free-floating pill (no full-width
     bar). */
  position:absolute; bottom:6px; left:6px;
  background:#dff2ec; color:#7a0c2b;
  font-size:11px; font-weight:600; letter-spacing:.1px;
  padding:3px 8px;
  border-radius:9999px;
  white-space:nowrap;
  box-shadow:0 1px 3px rgba(0,0,0,.18);
}
.v280-card-body{
  flex:1; min-width:0;
  /* v302b: tightened condos.ca-style stacking — minimal gap, gentle
     padding, line-heights pulled in. */
  padding:8px 10px 8px 12px;
  display:flex; flex-direction:column;
  justify-content:flex-start;
  gap:1px;
}
.v280-card-top{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  margin-bottom:1px;
}
.v280-card-price{
  /* v290: 17px; condos.ca-prominent-price feel. */
  font-size:17px; font-weight:700; color:#0c1f38;
  letter-spacing:-.2px; line-height:1.1;
}
.v280-card-fav{
  /* v=484l — Scott's spec: map-popup heart matches condos.ca's
     ~22px outline. Always red (#dc2626) — outlined when unsaved,
     filled when saved. No circle background. */
  width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  padding:5px; flex-shrink:0; color:#dc2626;
  -webkit-tap-highlight-color:transparent;
  transition:color .12s, transform .12s;
  display:flex; align-items:center; justify-content:center;
  border-radius:0;
  margin-right:-2px;
}
.v280-card-fav:hover{ color:#b91c1c; background:transparent }
.v280-card-fav.on{ color:#dc2626 }
.v280-card-fav:active{ transform:scale(.92) }
.v280-card-fav svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:2 }
.v280-card-fav.on svg,
.v280-card-fav[aria-pressed="true"] svg{ fill:currentColor; stroke:currentColor }
.v280-card-addr{
  /* v302b: condos.ca-tight — sits right under price with thin gap. */
  font-size:12.5px; color:#0c1f38; font-weight:500; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  margin-top:1px;
}
.v280-card-specs{
  /* v=440b — icon row matches card meta spec (Lucide outline, 14px, slate). */
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  font-size:12px; color:#475569; font-weight:500;
  line-height:1.25;
  margin-top:3px;
}
.v280-card-sep{ display:none }
.v280-card-foot{
  /* v=440b — sqft icon group + maint fee text on one row. */
  display:flex; align-items:center; flex-wrap:wrap; gap:12px;
  margin-top:2px;
  font-size:12px; color:#475569; font-weight:500;
  line-height:1.25;
}
.v280-card-foot .v280-card-sep{ display:none }
/* Shared icon-metric token used inside v280 specs/foot rows. */
.cdg-mi{ display:inline-flex; align-items:center; gap:4px; line-height:1; white-space:nowrap }
.cdg-mi-ico{ width:14px; height:14px; flex-shrink:0; color:#475569; stroke:currentColor; fill:none; display:block }
.cdg-mi-maint{ color:#64748b }
/* v302b: bottom banner — full address + status pill, spanning the whole
   card width. Visually separated from the body content with a hairline
   divider, condos.ca-style. */
.v280-card-banner{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:7px 12px;
  background:#f8fafc;
  border-top:1px solid #eef2f5;
  font-size:11px; color:#475569; font-weight:500;
  line-height:1.2;
}
.v280-card-banner-addr{
  flex:1; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  color:#475569;
}
.v280-card-banner-pill{
  flex-shrink:0;
  font-size:10.5px; font-weight:700; letter-spacing:.3px;
  color:#EA0649; background:#f7e6eb;
  padding:3px 8px; border-radius:999px;
  white-space:nowrap;
}
/* v=429i — Item 69: map-popup banner pill now uses the canonical teal-blue
   tag (white text on #4b94ba). Same style for every status. */
.v280-card-banner-pill,
.v280-card-banner-pill.rent,
.v280-card-banner-pill.sale,
.v280-card-banner-pill.sold,
.v280-card-banner-pill.leased{ color:#ffffff; background:#4b94ba }
/* legacy classes — kept for safety, not used by v302b layout */
.v280-card-city{
  font-size:11px; color:#64748b;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.v280-card-pill{
  font-size:10px; font-weight:700; letter-spacing:.4px;
  color:#EA0649; background:#faf0f3; padding:3px 7px; border-radius:4px;
  white-space:nowrap; flex-shrink:0;
}
/* v297/v298: card centered OVER THE MAP. On mobile (or fullmap on
   desktop) the map is full-screen, so left:50% works. In desktop split
   view (body.in-mixed) the map is at the RIGHT 45% of the screen, so
   the card needs to be centered there, not at viewport-50% (which
   would put it inside the listings pane).
   v302: on mobile the right edge of the map carries a vertical tools
   rail (Layers / Transit / Schools / Draw / Nearby). A dead-center card
   was overlapping those tools. Nudge the card 28px LEFT of center on
   narrow viewports so the tools rail breathes. */
.v280-card{
  /* v302b: card height includes top row (~108px) + banner (~30px). */
  width:clamp(252px, calc(100vw - 110px), 320px);
  height:auto;
  min-height:clamp(126px, 36vw, 144px);
  top:50%;
  left:calc(50% - 28px);
  transform:translate(-50%, -50%);
}
.v280-card-img{
  /* v302b: photo height matches the row, not the full card (banner sits
     below the row). Width stays square-ish. */
  width:clamp(96px, 28vw, 108px);
  min-width:clamp(96px, 28vw, 108px);
  height:clamp(96px, 28vw, 108px);
  align-self:stretch;
}
@keyframes v280CardIn{
  from{ opacity:0; transform:translate(-50%, calc(-50% + 6px)) scale(.97) }
  to  { opacity:1; transform:translate(-50%, -50%) scale(1) }
}
@media(min-width:769px){
  /* v302b: desktop card has fixed top row (108px photo) + banner (~32px). */
  .v280-card{ width:340px; height:auto; min-height:140px }
  .v280-card-img{ width:108px; min-width:108px; height:108px }
  /* v=429 — Desktop split view: nudge the card LEFT of the map's true
     center so its right edge can't collide with the vertical tools rail
     (Layers / Transit / Schools / Draw / Areas / Nearby) anchored to the
     right edge of the map. Previously left:75% put the card's right edge
     at ~75% + 170px = ~92% of viewport on a 1100px screen — exactly where
     the 56px-wide tools rail lives. Reserving 88px of right-side margin
     (rail 56px + 16px gap + 16px breathing) keeps them clear at every
     viewport between 1024px and 1600px. */
  body.in-mixed .v280-card{ left:auto; right:104px; top:50%; transform:translate(0, -50%) }
  body.in-mixed .v280-card-ov.open .v280-card{ transform:translate(0, -50%) }
  /* Fullmap on desktop: map fills the viewport, true center applies — but
     the same toolbar lives at viewport right, so apply the same right
     offset instead of left:50%. */
  body.in-fullmap .v280-card{ left:auto; right:max(104px, calc(50% - 220px)); top:50%; transform:translate(0, -50%) }
}
/* v=429 — anchor-flip animation override: in-mixed / in-fullmap pull
   transform off the keyframes so the desktop card animates from
   translate(0,-50%) instead of translate(-50%,-50%). Mobile / narrow
   viewports keep the original centered keyframes. */
@media(min-width:769px){
  body.in-mixed .v280-card,
  body.in-fullmap .v280-card{ animation:none }
  body.in-mixed .v280-card-ov.open .v280-card,
  body.in-fullmap .v280-card-ov.open .v280-card{
    animation:v280CardInRight .18s ease-out;
  }
}
@keyframes v280CardInRight{
  from{ opacity:0; transform:translate(6px, -50%) scale(.97) }
  to  { opacity:1; transform:translate(0, -50%) scale(1) }
}
/* v=431 — Item 17: anchor-flip override. When the clicked pin sits on the
   right half of the map (JS toggles body.v280-flip-left in 44-building-sheet),
   override the default right:104px placement to LEFT-anchor instead. Keeps
   the card from covering the user's clicked pin and the right-side tools rail.
   Applies only on desktop (>=769px) in-mixed / in-fullmap — mobile UI is
   centered and doesn't need the flip. */
@media(min-width:769px){
  body.v280-flip-left.in-mixed .v280-card,
  body.v280-flip-left.in-fullmap .v280-card{
    left:32px !important;
    right:auto !important;
    transform:translate(0, -50%) !important;
  }
  body.v280-flip-left.in-mixed .v280-card-ov.open .v280-card,
  body.v280-flip-left.in-fullmap .v280-card-ov.open .v280-card{
    animation:v280CardInLeft .18s ease-out !important;
  }
}
@keyframes v280CardInLeft{
  from{ opacity:0; transform:translate(-6px, -50%) scale(.97) }
  to  { opacity:1; transform:translate(0, -50%) scale(1) }
}
@media(max-width:340px){
  .v280-card{ width:calc(100vw - 24px); left:calc(50% - 18px) }
}

/* v279: Mortgage Calculator on listing detail. Live-recalculating
   interactive calculator. Inputs in a 2-col grid on desktop, stacked
   on mobile. Result block at the bottom shows monthly payment + total
   interest + total cost + "Get pre-approved" lead-gen CTA. */
.v279-mort{ background:#fff }
.v279-mort-sub{ font-size:13px; color:#64748b; margin-bottom:14px }
.v279-mort-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; margin-bottom:18px;
}
@media (max-width:600px){ .v279-mort-grid{ grid-template-columns:1fr } }
.v279-mort-field label{ display:block; font-size:11.5px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px }
.v279-mort-input{
  display:flex; align-items:center; background:#f8fafc; border:1.5px solid #e5e9ed;
  border-radius:10px; padding:0 12px; transition:border-color .12s;
}
.v279-mort-input:focus-within{ border-color:#EA0649; background:#fff }
.v279-mort-input input{
  flex:1; min-width:0; padding:10px 0; border:none; outline:none; background:transparent;
  font-size:15px; font-weight:600; color:#0c1f38; font-family:inherit;
}
.v279-mort-unit{ color:#94a3b8; font-size:14px; font-weight:500; padding-right:6px }
.v279-mort-unit-r{ padding-right:0; padding-left:6px }
.v279-mort-field select{
  width:100%; padding:11px 12px; background:#f8fafc; border:1.5px solid #e5e9ed;
  border-radius:10px; font-size:15px; font-weight:600; color:#0c1f38; font-family:inherit;
  cursor:pointer; -webkit-appearance:none; appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748b' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:36px;
}
.v279-mort-field select:focus{ outline:none; border-color:#EA0649; background-color:#fff }
.v279-mort-row-mini{ display:flex; gap:6px; margin-top:8px }
.v279-mort-chip{
  flex:1; padding:6px 10px; background:#fff; border:1px solid #e5e9ed; border-radius:999px;
  font-size:11.5px; font-weight:600; color:#64748b; cursor:pointer; font-family:inherit;
  transition:all .12s;
}
.v279-mort-chip:hover{ border-color:#cbd5e1; color:#0c1f38 }
.v279-mort-chip.on{ background:#EA0649; border-color:#EA0649; color:#fff }
.v279-mort-result{
  background:linear-gradient(135deg,#faf0f3 0%,#f5e6ea 100%);
  border:1px solid #e8ccd4;
  border-radius:14px;
  padding:20px 22px;
  display:flex; flex-direction:column; gap:14px;
  overflow:hidden;
}
.v279-mort-result-amt{
  font-family:var(--serif),Georgia,serif;
  font-size:36px; font-weight:400; color:#0c1f38; letter-spacing:-.5px; line-height:1;
}
.v279-mort-result-per{ font-size:15px; color:#64748b; font-weight:500; font-family:var(--sans); margin-left:4px }
.v279-mort-result-meta{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; padding-top:8px; border-top:1px solid #e8ccd4 }
@media (max-width:540px){ .v279-mort-result-meta{ grid-template-columns:1fr; gap:8px } }
.v279-mort-result-line{ display:flex; flex-direction:column; gap:2px }
.v279-mort-result-line span{ font-size:11px; font-weight:600; color:#64748b; text-transform:uppercase; letter-spacing:.4px }
.v279-mort-result-line strong{ font-size:15px; font-weight:700; color:#0c1f38 }
.v279-mort-cta{
  width:100%; padding:13px 18px; background:#0c1f38; color:#fff; border:none;
  border-radius:10px; font-size:14.5px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.1px; box-shadow:0 4px 12px rgba(11,37,69,.22);
  transition:background .15s, transform .12s, box-shadow .15s;
}
.v279-mort-cta:hover{ background:#13315c; box-shadow:0 6px 16px rgba(11,37,69,.3) }
.v279-mort-cta:active{ transform:scale(.98) }

/* v304 ELITE — Rate stress-test row inside the mortgage result card.
   Three columns: best-case (rate -1%), current rate, stress test (rate +2%).
   Visual hierarchy puts the current rate in the middle, slightly emphasized,
   with cooler/warmer tints flanking it for instant comprehension. */
.v304-stress-row{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px;
  padding:14px 0 0;
  border-top:1px solid #e8ccd4;
  align-items:stretch;
}
@media (max-width:600px){ .v304-stress-row{ grid-template-columns:1fr } }
.v304-stress-cell{
  background:rgba(255,255,255,.7);
  border:1px solid rgba(232,204,212,.6);
  border-radius:10px;
  padding:11px 12px;
  display:flex; flex-direction:column; gap:3px;
  text-align:left;
  min-width:0;
}
.v304-stress-cell.v304-stress-now{
  background:#fff;
  border-color:#EA0649;
  box-shadow:0 2px 6px rgba(158,13,54,.10);
}
.v304-stress-cell.v304-stress-best{ background:rgba(220,252,231,.55); border-color:rgba(34,197,94,.30) }
.v304-stress-cell.v304-stress-worst{ background:rgba(254,242,242,.55); border-color:rgba(252,165,165,.42) }
.v304-stress-lbl{
  font-size:11px; font-weight:600; color:#64748b;
  text-transform:uppercase; letter-spacing:.4px;
  white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25;
}
.v304-stress-lbl span{ color:#0c1f38; letter-spacing:0; text-transform:none }
.v304-stress-amt{
  font-family:var(--serif);
  font-size:18px; font-weight:500; color:#0c1f38;
  letter-spacing:-.2px; line-height:1.1;
  font-feature-settings:"tnum" 1;
}
.v304-stress-cell.v304-stress-now .v304-stress-amt{ font-size:20px; font-weight:600 }
.v304-stress-delta{
  font-size:11.5px; color:#475569; font-weight:500; line-height:1.25; word-break:break-word;
}
.v304-stress-best .v304-stress-delta{ color:#15803d }
.v304-stress-worst .v304-stress-delta{ color:#b91c1c }

/* v304 ELITE — Building Expert card on the building landing page.
   A premium-feeling "this person knows this building" card with avatar,
   stats, and dual CTA. Beats condos.ca / HouseSigma's generic contact
   form by name-dropping a real building specialist. */
.v304-bldg-expert-band{
  padding:32px 0;
  background:linear-gradient(180deg, #fafdfc 0%, #fff 100%);
}
.v304-bldg-expert{
  display:flex; align-items:center; gap:24px;
  padding:28px 32px;
  background:#fff;
  border:1px solid #eef2f5;
  border-radius:18px;
  box-shadow:0 6px 20px rgba(11,37,69,.06), 0 2px 6px rgba(11,37,69,.04);
}
.v304-be-avatar{
  width:84px; height:84px; border-radius:50%;
  background:linear-gradient(135deg, #0c1f38 0%, #13315c 60%, #EA0649 100%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-family:var(--serif); font-size:30px; font-weight:500;
  letter-spacing:-.5px;
  flex-shrink:0;
  box-shadow:0 6px 18px rgba(11,37,69,.20), 0 0 0 4px #fff, 0 0 0 5px #eef2f5;
}
/* v305: building-icon variant (no fake person/initials) — same shape, but
   carries a serif building glyph instead of a name. Honest, calm, premium. */
.v304-be-icon{
  width:72px; height:72px; border-radius:18px;
  background:linear-gradient(135deg, #faf0f3 0%, #f2e0e5 100%);
  color:#EA0649;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(158,13,54,.10);
}
.v304-be-icon svg{ width:34px; height:34px; stroke:currentColor }
@media (max-width:768px){
  .v304-be-icon{ width:60px; height:60px }
  .v304-be-icon svg{ width:28px; height:28px }
}
.v304-be-info{ flex:1; min-width:0 }
.v304-be-eyebrow{
  font-size:11px; font-weight:700; color:#EA0649;
  text-transform:uppercase; letter-spacing:1.2px;
  margin-bottom:6px;
}
.v304-be-title{
  font-family:var(--serif); font-size:22px; font-weight:400;
  color:#0c1f38; letter-spacing:-.3px; line-height:1.2;
  margin:0 0 8px;
}
.v304-be-sub{
  font-size:14px; color:#475569; line-height:1.55;
  margin:0 0 12px;
  max-width:560px;
}
.v304-be-stats{
  display:flex; gap:16px; flex-wrap:wrap;
  font-size:12.5px; color:#64748b;
}
.v304-be-stat strong{ color:#0c1f38; font-weight:600 }
.v304-be-actions{
  display:flex; flex-direction:column; gap:8px;
  flex-shrink:0;
}
.v304-be-cta{
  padding:12px 22px; border-radius:10px;
  font-size:13.5px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.05px;
  white-space:nowrap;
  transition:transform .12s, background .15s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.v304-be-cta:active{ transform:scale(.97) }
.v304-be-cta-primary{
  background:#0c1f38; color:#fff; border:none;
  box-shadow:0 4px 12px rgba(11,37,69,.20);
}
.v304-be-cta-primary:hover{ background:#13315c; box-shadow:0 6px 16px rgba(11,37,69,.28) }
.v304-be-cta-secondary{
  background:#fff; color:#0c1f38; border:1px solid #cbd5e1;
}
.v304-be-cta-secondary:hover{ background:#f8fafc; border-color:#94a3b8 }
@media (max-width:768px){
  .v304-bldg-expert{
    flex-direction:column; align-items:flex-start; gap:18px;
    padding:22px;
  }
  .v304-be-avatar{ width:64px; height:64px; font-size:24px }
  .v304-be-title{ font-size:19px }
  .v304-be-sub{ font-size:13.5px }
  .v304-be-actions{ flex-direction:row; width:100% }
  .v304-be-cta{ flex:1; padding:11px 16px }
}

/* v304 ELITE — Neighbourhood living section. Editorial-feeling layout
   with text on the left and three score circles on the right (Walk /
   Transit / Bike). Calmer than condos.ca's "stats grid" — reads like
   a magazine spread. */
.v304-living-sec{ padding:48px 0 }
.v304-living-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:48px;
  align-items:center;
}
.v304-living-text{ max-width:560px }
.v304-living-p{
  font-size:16px; line-height:1.65; color:#475569;
  margin:14px 0 22px;
}
.v304-living-tags{
  display:flex; gap:8px; flex-wrap:wrap;
}
.v304-living-tag{
  padding:6px 14px;
  background:#faf0f3; color:#7e0d2d;
  border:1px solid #ebd6dc;
  border-radius:999px;
  font-size:12.5px; font-weight:500;
  letter-spacing:.1px;
}
.v304-living-stats{
  display:flex; gap:18px; justify-content:flex-start;
  flex-wrap:wrap;
}
.v304-living-stat{
  flex:1; min-width:120px; max-width:140px;
  text-align:center;
}
.v304-living-stat-circle{
  position:relative;
  width:96px; height:96px;
  margin:0 auto 10px;
  display:flex; align-items:center; justify-content:center;
}
.v304-living-stat-circle svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:rotate(-90deg);
}
.v304-living-stat-circle .v304-ls-bg{
  fill:none; stroke:#eef2f5; stroke-width:6;
}
.v304-living-stat-circle .v304-ls-fg{
  fill:none; stroke:#EA0649; stroke-width:6; stroke-linecap:round;
}
.v304-living-stat-num{
  font-family:var(--serif);
  font-size:30px; font-weight:500; color:#0c1f38;
  letter-spacing:-.4px;
  position:relative; z-index:1;
}
.v304-living-stat-lbl{
  font-size:13px; font-weight:600; color:#0c1f38;
  margin-bottom:2px;
}
.v304-living-stat-meta{
  font-size:11.5px; color:#94a3b8; font-weight:500;
}
@media (max-width:880px){
  .v304-living-grid{ grid-template-columns:1fr; gap:28px }
  .v304-living-stats{ justify-content:space-around }
}
@media (max-width:520px){
  .v304-living-stat{ min-width:96px }
  .v304-living-stat-circle{ width:80px; height:80px }
  .v304-living-stat-num{ font-size:24px }
}

/* v279: What's Nearby section — mini-map + scrollable POI list. */
.v279-nearby{}
.v279-nearby-sub{ font-size:13px; color:#64748b; margin-bottom:14px }
.v279-nearby-tabs{
  display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px;
  padding-bottom:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.v279-nb-tab{
  padding:8px 14px; background:#fff; border:1.5px solid #e5e9ed; border-radius:999px;
  font-size:12.5px; font-weight:600; color:#475569; cursor:pointer; font-family:inherit;
  white-space:nowrap; transition:all .12s;
}
.v279-nb-tab:hover{ border-color:#cbd5e1 }
.v279-nb-tab.on{ background:#0c1f38; border-color:#0c1f38; color:#fff }
.v279-nearby-body{
  display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(280px, 1fr); gap:0;
  border:1px solid #e5e9ed; border-radius:14px; overflow:hidden; background:#fff;
  align-items:stretch;
}
@media (max-width:768px){ .v279-nearby-body{ grid-template-columns:1fr } }
.v279-nearby-map{
  width:100%; height:340px; background:#e8efe7;
  background-image: linear-gradient(135deg, #e8efe7 0%, #e9d6db 50%, #e8efe7 100%);
  position:relative; overflow:hidden;
}
.v279-nearby-map::after{
  content:''; position:absolute; left:50%; top:50%; width:18px; height:18px;
  transform:translate(-50%,-50%);
  background:#0c1f38; border:3px solid #fff; border-radius:50%;
  box-shadow:0 0 0 6px rgba(158,13,54,.25), 0 4px 10px rgba(11,37,69,.3);
}
.v279-nearby-pin{
  position:absolute; width:28px; height:28px; transform:translate(-50%,-50%);
  background:#fff; border:2px solid #EA0649; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:13px;
  box-shadow:0 2px 6px rgba(11,37,69,.15); cursor:pointer;
}
.v279-nearby-list{
  min-width:0;
  max-height:340px; overflow-y:auto; overflow-x:hidden; padding:10px 12px; background:#fff;
  border-left:1px solid #e5e9ed;
}
.v279-nb-item{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto;
  align-items:start; column-gap:10px; padding:12px 8px; border-bottom:1px solid #f1f5f9;
}
.v279-nb-item:last-child{ border-bottom:none }
.v279-nb-item-ico{ width:34px; height:34px; border-radius:50%; background:#faf0f3; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0 }
.v279-nb-item-body{ min-width:0; display:flex; flex-direction:column; gap:2px }
.v279-nb-item-name{ font-size:13.5px; font-weight:600; color:#0c1f38; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25 }
.v279-nb-item-meta{ font-size:12px; color:#64748b; line-height:1.3; word-break:break-word }
.v279-nb-item-walk{ font-size:13px; font-weight:600; color:#EA0649; flex-shrink:0; padding-left:12px; white-space:nowrap; align-self:start }
@media (max-width:768px){
  .v279-nearby-list{ border-left:none; border-top:1px solid #e5e9ed }
}

/* v279: Comparable Sales — 3-up grid of recently sold listings nearby.
   Sold prices gated for non-logged-in users (TRREB rule); addresses,
   photos, and unit specs shown openly. */
.v279-comps{}
.v279-comps-sub{ font-size:13px; color:#64748b; margin-bottom:14px }
.v279-comps-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
@media (max-width:768px){ .v279-comps-grid{ grid-template-columns:1fr 1fr; gap:10px } }
@media (max-width:520px){ .v279-comps-grid{ grid-template-columns:1fr } }
/* v307c — global hide of the legacy v18 Walk/Transit/Bike section. The
   v65 .v65-scores-sec ("Lifestyle Scores") is the canonical Walk-Transit-
   Bike widget. Hide the old one on every viewport so it never duplicates. */
.modal .m-sec-scores{ display:none !important }

/* v306b: gated bars where address/specs would render — matches the
   condos.ca / HouseSigma "sign-in required" placeholder pattern. */
.v279-comp-bar{
  height:11px; background:#eef2f5; border-radius:6px;
  margin:6px 0;
}
.v279-comp-bar-lg{ height:13px; width:75% }
.v279-comp-gated .v279-comp-bar:nth-of-type(2){ width:55% }
.v279-comp-gated{ cursor:pointer }
.v279-comp{
  border:1px solid #e5e9ed; border-radius:12px; overflow:hidden; background:#fff;
  cursor:pointer; transition:transform .12s, box-shadow .15s;
}
.v279-comp:hover{ transform:translateY(-2px); box-shadow:0 8px 20px rgba(11,37,69,.1) }
.v279-comp-img{ width:100%; aspect-ratio:4/3; background:#f1f5f9; position:relative; overflow:hidden }
.v279-comp-img img{ width:100%; height:100%; object-fit:cover; display:block }
.v279-comp-blur{
  position:absolute; inset:0; background:rgba(11,37,69,.6);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:6px;
}
.v279-comp-cta{
  display:inline-flex; align-items:center; gap:5px; padding:6px 12px; background:#EA0649; color:#fff;
  border:none; border-radius:999px; font-size:11.5px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.1px; box-shadow:0 3px 10px rgba(158,13,54,.4);
}
.v279-comp-body{ padding:12px 14px }
.v279-comp-price{ font-size:17px; font-weight:700; color:#0c1f38; margin-bottom:4px }
.v279-comp-price-locked{ font-size:13px; color:#EA0649; font-weight:600; cursor:pointer; text-decoration:underline }
.v279-comp-addr{ font-size:13px; color:#0c1f38; margin-bottom:6px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.v279-comp-stats{ font-size:12px; color:#64748b; display:flex; gap:6px; flex-wrap:wrap }
.v279-comp-stats span{ white-space:nowrap }
.v279-comp-sold-pill{ display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.5px; color:#fff; background:#dc2626; padding:3px 8px; border-radius:4px; margin-bottom:6px; text-transform:uppercase }

/* v278: Inline Schedule Viewing form on the listing detail page.
   HouseSigma-style: sticky on the right column on desktop, inline at the
   top of the body on mobile. Pre-filled message points to this listing
   so users just enter name/phone/email and submit. */
.v278-sched{
  background:#fff;
  border:1px solid #eaedf2;
  border-radius:14px;
  padding:18px 18px 16px;
  margin:14px 18px 18px;
  box-shadow:0 4px 14px rgba(11,37,69,.06);
}
.v278-sched-hdr{ margin-bottom:14px }
.v278-sched-eyebrow{ font-size:11.5px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:#EA0649; margin-bottom:4px }
.v278-sched-title{ font-family:var(--serif),Georgia,serif; font-size:21px; font-weight:400; color:#0c1f38; line-height:1.2; margin-bottom:6px; letter-spacing:-.2px }
.v278-sched-sub{ font-size:13px; color:#64748b; line-height:1.45 }
.v278-sched-form{ display:flex; flex-direction:column; gap:10px }
.v278-sched-form input,
.v278-sched-form textarea{
  width:100%; padding:11px 14px; border:1.5px solid #e5e9ed; border-radius:10px;
  font-size:14px; font-family:inherit; background:#fff; color:#0c1f38;
  transition:border-color .12s, box-shadow .12s;
  -webkit-appearance:none; appearance:none; box-sizing:border-box;
}
.v278-sched-form input:focus,
.v278-sched-form textarea:focus{ outline:none; border-color:#EA0649; box-shadow:0 0 0 3px rgba(158,13,54,.12) }
.v278-sched-form textarea{ resize:vertical; min-height:64px; line-height:1.45 }
.v278-sched-btn{
  width:100%; padding:12px 18px; background:#EA0649; color:#fff; border:none;
  border-radius:10px; font-size:14.5px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.1px; margin-top:4px;
  box-shadow:0 4px 12px rgba(158,13,54,.28);
  transition:transform .12s, background .15s, box-shadow .15s;
}
.v278-sched-btn:hover{ background:#CE2C44; box-shadow:0 6px 16px rgba(158,13,54,.36) }
.v278-sched-btn:active{ transform:scale(.98) }
.v278-sched-or{ text-align:center; font-size:11.5px; font-weight:600; letter-spacing:.4px; text-transform:uppercase; color:#94a3b8; padding:2px 0 }
.v278-sched-call{
  width:100%; padding:11px 18px; background:#fff; color:#0c1f38;
  border:1.5px solid #cbd5e1; border-radius:10px; font-size:14px; font-weight:600;
  cursor:pointer; font-family:inherit; transition:border-color .12s, color .12s, background .12s;
}
.v278-sched-call:hover{ border-color:#0c1f38; background:#f8fafc }
/* Desktop: float to the right column, sticky-ish position via grid placement
   below in the desktop media query for the listing detail body. */
@media (min-width:1024px){
  .v278-sched{
    position:sticky; top:80px; max-width:340px; margin:0 0 0 auto;
    align-self:flex-start;
  }
}

/* v115: Price History section — condos.ca-style login gate + faded transaction list. */
.v115-history-sub{ font-size:13px;color:#64748b;margin:0 0 14px;font-weight:500 }
.v115-history-gate{
  background:#faf0f3;border:1px solid rgba(158,13,54,.25);border-radius:10px;
  padding:12px 14px;font-size:13px;color:#0c1f38;margin-bottom:14px;line-height:1.5;
}
.v115-history-gate a{ color:#EA0649;font-weight:600;cursor:pointer;text-decoration:underline }
.v115-history-row{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid #f1f5f9;
}
.v115-history-row:last-of-type{border-bottom:none}
.v115-history-thumb{
  width:64px;height:48px;border-radius:6px;background:#e5e7eb center/cover no-repeat;flex-shrink:0;filter:blur(3px);
}
.v115-history-meta{display:flex;flex-direction:column;gap:3px;min-width:0}
.v115-history-status{font-size:13px;font-weight:700;color:#dc2626;letter-spacing:.2px}
.v115-history-line{font-size:12px;color:#64748b;font-weight:500}
.v115-history-line .v115-blur{ display:inline-block;background:rgba(11,37,69,.15);border-radius:3px;padding:0 8px;letter-spacing:2px;color:transparent;text-shadow:0 0 8px rgba(11,37,69,.4);min-width:60px;height:13px;vertical-align:middle }
.v115-history-na{font-size:12px;color:#94a3b8;font-weight:500;text-align:right;flex-shrink:0}
.v115-history-foot{
  text-align:center;margin-top:14px;
}
.v115-history-foot button{
  appearance:none;background:#fff;color:#0c1f38;border:1px solid #e2e8f0;
  border-radius:8px;padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:inherit;transition:all .12s;
}
.v115-history-foot button:hover{ background:#f1f5f9;border-color:#cbd5e1 }
/* v114: cleaner section styling for m-sec blocks (description, listing details, etc.) */
.modal .m-sec{
  padding:20px 22px !important;
  border-bottom:1px solid #f1f5f9;
  background:#fff;
}
.modal .m-sec:last-child{ border-bottom:none }
/* v117: on desktop, center the listing detail content sections with max-width
   ~820px and comfortable side padding (HouseSigma/condos.ca pattern). Keeps
   the description, listing details, price history etc. readable instead of
   sprawling edge-to-edge across a wide modal. Photo grid + sticky CTA stay
   full-width — only the inner content gets the container. */
@media (min-width:769px){
  .modal .m-body,
  .modal .v114-status-row,
  .modal .v114-facts-sec,
  .modal .v115-history-sec,
  .modal .m-sec{
    max-width:1160px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    width:100% !important;
    box-sizing:border-box;
  }
  .modal .v112-stats-block{
    max-width:1160px;margin-left:auto;margin-right:auto;
  }
  .modal .v112-addr-block{
    max-width:1160px;margin-left:auto;margin-right:auto;
  }
}
.modal .m-sec-t{
  font-family:var(--serif);
  font-size:20px;
  font-weight:400;
  color:#0c1f38;
  letter-spacing:-.3px;
  margin:0 0 14px;
}
@media (max-width:768px){
  .modal .m-sec{ padding:16px 16px !important }
  .modal .m-sec-t{ font-size:17px }
}
/* v307k — heart-save button at the top-right of the mobile photo gallery
   (condos.ca / Zillow pattern). White circle with shadow; tap → toggle fav. */
.v307-photo-fav{
  position:absolute;
  top:14px; right:14px;
  width:44px; height:44px;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  color:#0c1f38;
  box-shadow:0 6px 16px rgba(11,37,69,.25), 0 1px 4px rgba(11,37,69,.10);
  z-index:5;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s, color .12s, background .12s;
}
.v307-photo-fav svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2.2 }
.v307-photo-fav:hover{ background:#fff }
.v307-photo-fav:active{ transform:scale(.92) }
.v307-photo-fav.on{ color:#dc2626 }
.v307-photo-fav.on svg{ fill:currentColor; stroke:currentColor }
@media (min-width:1024px){
  /* Desktop has v303 sidebar Save action; hide the photo-corner heart */
  .v307-photo-fav{ display:none !important }
}

/* v307i — new pill cluster directly under the photo gallery (condos.ca
   pattern). Days-on-market is the #1 signal for negotiation, surface it
   right away. Two small light-gray pills stacked vertically on the LEFT. */
.v307-status-pills{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0;
  background:transparent;
  border:none;
  flex-shrink:0;
}
.v307-pill{
  display:inline-flex; align-items:center;
  padding:6px 14px;
  background:#f1f5f9; color:#0c1f38;
  border-radius:999px;
  font-size:12.5px; font-weight:600;
  letter-spacing:.1px;
}
/* v=426 — KEEPER pill: soft pastel teal background, dark teal mixed-case
   text ("For Sale", not "FOR SALE"). This is the survivor per Scott's
   final screenshot spec. The bold solid-fill uppercase pill (.v114-status-pill)
   is hidden as the duplicate. Days-on-market renders inline as muted grey
   text immediately to the right of the soft pill. */
/* v=429i — Item 69: listing detail page status pill (above price) uses
   the canonical teal-blue tag site-wide. */
.v307-pill-status,
.v307-pill-status.sold,
.v307-pill-status.leased,
.v307-pill-status.rent{ background:#4b94ba; color:#ffffff }
/* v=429au — Item 119: status row becomes left/right justified — the
   For Sale (or Sold/Leased/Rent) pill stays at the LEFT, the
   "Listed Mon D, YYYY" text moves to the FAR RIGHT of the same row.
   Matches condos.ca's listing-detail layout. The row is forced to
   fill the price-head column width via width:100% + space-between. */
.v307-status-pills{ display:flex; align-items:center; justify-content:space-between; width:100%; gap:8px }
/* v=430h — Item 144: brand navy (was teal). */
.v307-pill-days{ background:transparent; color:#0c1f38; padding:0; font-weight:500; font-size:13.5px; letter-spacing:.01em; display:inline-flex; align-items:center; text-align:right; white-space:nowrap }
/* v=494 — .v112-price-head is no longer used in the SPA modal markup
   (the new Zolo single-row layout uses .v494-price-row instead). Kept
   harmless here as a no-op for any historical surface that still emits
   the old structure. */
.v112-price-head{ flex-direction:column; align-items:stretch; gap:6px }

/* ── v=494 Zolo single-row price layout — SPA modal ─────────────────────── */
/* Price row: $578,800   Estimated mortgage: $X/mo · 20% down, 5-yr fixed →
                Get pre-approved in 3 minutes →
   Horizontal flex, wraps on mobile so price stays prominent on its own line.
   In-cluster gaps: column-gap 16px desktop / 12px mobile, row-gap 8px / 6px
   (mobile wrap). No section-break (>16px) gaps inside this cluster. */
.v494-price-row{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  column-gap:16px;
  row-gap:8px;
  width:100%;
}
@media (max-width:768px){
  .v494-price-row{ column-gap:12px; row-gap:6px }
  /* v=536r — Scott: keep price + est. mortgage inline on a single row on
     mobile, matching v=533c-desktop. Was: `.v112-price{ width:100% }`
     which forced the price to span the full row and pushed the mortgage
     link onto row 2. Drop the width override so flex baseline-aligns
     them side-by-side at every viewport. */
}
.v494-price-row .v112-mort-link{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  font-size:14px;
  line-height:1.3;
  color:#64748b;
  text-decoration:none;
  flex-shrink:0;
  margin-top:0;
  padding:0;
  background:none;
  border:none;
}
@media (max-width:768px){
  .v494-price-row .v112-mort-link{ font-size:13px; flex-wrap:wrap; gap:4px }
}
.v494-price-row .v112-mort-link:hover .v112-mort-lbl,
.v494-price-row .v112-mort-link:hover .v112-mort-val,
.v494-price-row .v112-mort-link:hover .v112-mort-arrow{ color:#7a0c2b }
.v494-price-row .v112-mort-lbl{
  color:#EA0649;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.v494-price-row .v112-mort-val{
  color:#0c1f38;
  font-weight:700;
  font-feature-settings:"tnum" 1;
  font-variant-numeric:tabular-nums;
}
.v494-price-row .v112-mort-meta{ color:#64748b; font-weight:400 }
.v494-price-row .v112-mort-arrow{ color:#EA0649; font-weight:600 }
.v494-price-row .v112-preapprove-link{
  display:inline-flex;
  align-items:baseline;
  font-size:14px;
  color:#EA0649;
  font-weight:600;
  text-decoration:none;
  flex-shrink:0;
  margin-top:0;
  padding:0;
}
@media (max-width:768px){
  .v494-price-row .v112-preapprove-link{ font-size:13px }
}
.v494-price-row .v112-preapprove-link:hover{
  color:#7a0c2b;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Status row (below price row): inline blue pill + bullet + days on site.
   On desktop the inline days+sep are hidden — days renders under the
   "Condo Apt / type" stats column instead (see .v494-days-under-type). */
.v494-status-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:13.5px;
  color:#64748b;
  line-height:1.3;
  margin-top:6px;
}
.v494-status-row .v307-pill-status{
  display:inline-flex;
  align-items:center;
  background:#4b94ba;
  color:#fff;
  font-size:12px;
  font-weight:500;
  letter-spacing:.3px;
  text-transform:uppercase;
  padding:4px 11px;
  border-radius:9999px;
}
.v494-status-row .v307-pill-status.sold{ background:#dc2626 }
.v494-status-row .v307-pill-status.leased{ background:#d97706 }
.v494-status-sep{ color:#cbd5e1; font-weight:400 }
.v494-status-row .v494-status-days,
.v494-status-row .v307-pill-days{
  display:inline-flex;
  align-items:center;
  background:transparent;
  color:#64748b;
  font-size:13.5px;
  font-weight:500;
  padding:0;
  border-radius:0;
  letter-spacing:0;
}
.v494-status-row .v307-pill-days:empty,
.v494-status-row .v494-status-days:empty{ display:none }

/* v=494g revert — days-on-site stays inline next to the FOR SALE chip on
   BOTH viewports. No responsive shift, no under-type placement. */
.v112-price-head .v307-status-pills{ margin-bottom:2px }
@media (max-width:768px){
  .v307-status-pills{ gap:6px }
  .v307-pill{ font-size:11.5px; padding:5px 12px }
}
/* v307i — hide the old standalone status row (now redundant). */
.modal .v114-status-row{ display:none !important }
/* (legacy) v114: status pill row under stats block — kept for backwards
   compat in case something targets these classes elsewhere. */
.v114-status-row{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:14px 22px;background:#fff;
  border-bottom:1px solid #f1f5f9;flex-shrink:0;
}
/* v=429i — Item 69: canonical teal-blue tag site-wide (mixed-case, not
   uppercase) — same #4b94ba / white treatment as the listing card row 1
   and the map popup. */
.v114-status-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 16px;border-radius:9999px;
  font-size:14px;font-weight:500;letter-spacing:.01em;text-transform:none;
  background:#4b94ba;color:#ffffff;
}
.v114-status-pill.sold,
.v114-status-pill.leased,
.v114-status-pill.rent{background:#4b94ba;color:#ffffff}
.v114-days{font-size:13px;color:#64748b;font-weight:500}
@media (max-width:768px){
  .v114-status-row{padding:12px 16px}
  .v114-status-pill{font-size:11px;padding:5px 10px}
}
/* v114: Listing Details key-facts table */
.v114-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
@media (min-width:769px){ .v114-facts{ grid-template-columns:1fr 1fr 1fr } }
.v114-fact{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:10px 14px;
  border-bottom:1px solid #f1f5f9;
  font-size:13px;
}
.v114-fact-lbl{ color:#64748b;font-weight:500 }
.v114-fact-val{ color:#0c1f38;font-weight:600;text-align:right;font-feature-settings:"tnum" 1 }

/* v113: sticky Request a Viewing CTA bar — pinned to the bottom of the
   listing detail modal. Always visible while user is reading the listing —
   highest-converting placement for lead capture. */
/* v191: Request a Viewing pill — body-level, position:fixed at bottom-center.
   Same floating-pill pattern as the Map button. Visible only on listing detail. */
/* v210: lock v113-sticky-cta to ONE position — bottom-center, fixed.
   Hide everywhere except listing detail; force exact position to prevent
   any duplicate-looking render. */
.v113-sticky-cta{
  position:fixed !important;
  bottom:24px !important;
  left:50% !important;
  right:auto !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  display:none !important;
  align-items:center !important;
  justify-content:center !important;
  gap:0 !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  border-top:none !important;
  z-index:9050 !important;
  box-shadow:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}
/* v214: hide the floating v113 Request a Viewing pill EVERYWHERE.
   The v104 photo preview modal already has its own Request a Viewing
   button at the bottom of its card — that's the canonical location.
   v113 was creating a duplicate. */
.v113-sticky-cta{ display:none !important }
.v113-sticky-info{display:none !important}
.v113-sticky-price{font-family:var(--serif);font-size:18px;font-weight:500;color:#0c1f38;letter-spacing:-.3px;line-height:1.05}
.v113-sticky-addr{font-size:11.5px;color:#64748b;font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v113-sticky-btn{
  appearance:none;background:#EA0649;color:#fff;border:none;
  border-radius:999px;padding:13px 22px;font-size:14px;font-weight:600;
  cursor:pointer;font-family:inherit;letter-spacing:-.05px;
  display:inline-flex;align-items:center;gap:8px;flex-shrink:0;
  box-shadow:0 8px 22px rgba(158,13,54,.42), 0 2px 6px rgba(11,37,69,.10);
  transition:transform .12s, background .15s, box-shadow .15s;
}
.v113-sticky-btn:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 8px 22px rgba(158,13,54,.46)}
.v113-sticky-btn svg{width:14px;height:14px;flex-shrink:0}
@media (max-width:768px){
  .v113-sticky-cta{padding:7px 14px calc(7px + env(safe-area-inset-bottom,0px))}
  .v113-sticky-price{font-size:16px}
  .v113-sticky-addr{font-size:11px}
  .v113-sticky-btn{padding:8px 14px;font-size:12.5px}
}

/* v112: ELITE listing detail header — address block above the photo grid,
   stats + price + mortgage block below. condos.ca pattern, polished. */
.v112-addr-block{
  position:relative;
  padding:18px 22px 14px;
  background:#fff;
  border-bottom:1px solid #f1f5f9;
  flex-shrink:0;
}
/* v=484j-flat — condos.ca pattern: HEART on LEFT (red), SHARE on RIGHT
   (dark). No circle/pill chrome — just the bare icon strokes. Hit
   target preserved via 44×44 invisible bounds (padding + tap-highlight
   suppression). v=484o-addr — vertically centered against the
   address+breadcrumb 2-row stack via top:50% + translateY. */
.v112-page-fav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:62px;
  width:44px;
  height:44px;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#dc2626;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:8px;
  transition:color .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.v112-page-fav svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2.2 }
.v112-page-fav:hover{ color:#b91c1c }
.v112-page-fav:active{ transform:translateY(-50%) scale(.92) }
.v112-page-fav.on,
.v112-page-fav[aria-pressed="true"]{ color:#dc2626 }
.v112-page-fav.on svg,
.v112-page-fav[aria-pressed="true"] svg{ fill:currentColor; stroke:currentColor }

/* Share sits at right:14px (rightmost) so the visual order reads
   heart → share, left-to-right, mirroring condos.ca's pattern. */
.v112-page-share{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  right:14px;
  width:44px;
  height:44px;
  border-radius:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#0c1f38;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:8px;
  transition:color .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.v112-page-share svg{ width:26px; height:26px; stroke:currentColor; fill:none; stroke-width:2.2 }
.v112-page-share:hover{ color:#EA0649 }
.v112-page-share:active{ transform:translateY(-50%) scale(.92) }
@media (max-width:768px){
  .v112-page-fav{ top:50%; right:54px; width:40px; height:40px }
  .v112-page-fav svg{ width:22px; height:22px }
  .v112-page-share{ top:50%; right:12px; width:40px; height:40px }
  .v112-page-share svg{ width:22px; height:22px }
}
.v112-addr-line{
  font-family:var(--serif);
  /* v=484j — bumped from 30 → 34 (≈+13%) so the address reads as the
     visual anchor of the page, not a postscript. Matches condos.ca's
     larger detail-page address treatment. */
  font-size:34px;
  font-weight:400;
  color:#0c1f38;
  letter-spacing:-.6px;
  line-height:1.15;
  margin:0;
  /* Reserve room on the right for the absolute-positioned fav+share
     button pair so the heading doesn't crash into them. */
  padding-right:118px;
  /* v=495 — ALWAYS wraps fully (1-2 lines). text-wrap:balance lets the
     browser pick a pretty break point for long addresses; never an
     ellipsis. Explicit safety so no inherited nowrap/overflow rule can
     truncate the title. */
  text-wrap:balance;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  overflow-wrap:break-word;
}
.v112-addr-sub{
  /* v=484j — bumped from 13.5 → 15 so the hood/district/city links read
     comfortably without zoom.
     v=495 — breadcrumb ALWAYS sits on ONE line. If Building + Hood +
     City overflow at narrow widths, the building portion drops out
     (see @media (max-width:390px) below) so the city is always
     visible. */
  font-size:15px;
  color:#64748b;
  margin-top:5px;
  padding-right:118px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* v=495 — narrow phones: drop the building name + " in " separator so
   the breadcrumb collapses to "Hood, District, City". */
@media (max-width:390px){
  .v112-addr-sub .v112-bldg-link,
  .v112-addr-sub .v112-in{ display:none }
}
/* v323: four-segment subtitle — every segment is an underlined link
   (matches condos.ca: Lambton Square in Rockcliffe-Smythe, York Crosstown, Toronto). */
/* v=484k — condos.ca breadcrumb hierarchy: building gets primary teal
   (the building IS the destination user cares about); hood/district/
   city are secondary gray links. The "in" connector + commas stay as
   plain muted text. */
.v112-addr-sub .v112-bldg-link{
  color:#EA0649;
  cursor:pointer;
  text-decoration:underline;
  font-weight:600;
}
.v112-addr-sub .v112-bldg-link:hover{ color:#7a0c2b }
.v112-addr-sub .v112-area-link{
  color:#64748b;
  cursor:pointer;
  text-decoration:underline;
  text-decoration-color:#cbd5e1;
  text-underline-offset:2px;
  font-weight:500;
}
.v112-addr-sub .v112-area-link:hover{ color:#0c1f38; text-decoration-color:#0c1f38 }
.v112-addr-sub .v112-in,
.v112-addr-sub .v112-sep{ color:#94a3b8; text-decoration:none; cursor:default }

/* v=484j-flat — status + DOM pill pair under the breadcrumb (condos.ca
   pattern). Sits LEFT, mirrors the card-side pill pair. */
.v112-status-row{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  flex-wrap:wrap;
}
.v112-status-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:9999px;
  background:#EA0649;
  color:#fff;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
}
.v112-status-pill.sold{ background:#dc2626 }
.v112-status-pill.leased{ background:#d97706 }
.v112-status-pill.sold-conditional{ background:#7c3aed }
.v112-status-pill.leased-conditional{ background:#7c3aed }
.v112-dom-pill{
  display:inline-flex;
  align-items:center;
  padding:5px 12px;
  border-radius:9999px;
  background:#dff2ec;
  color:#7a0c2b;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1px;
}
.v112-dom-pill:empty{ display:none }

.v112-stats-block{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 22px;
  background:#fff;
  border-bottom:1px solid #f1f5f9;
  flex-shrink:0;
  flex-wrap:wrap;
}
.v112-stats-icons{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
}
.v112-stat{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  white-space:nowrap;
}
.v112-stat svg{
  width:18px;height:18px;
  stroke:#475569;flex-shrink:0;
  align-self:center;
  margin-right:2px;
}
/* v=484p — Phosphor Regular glyph in SPA stats row. Sized + colored to
   match the navy SVG it replaces; flex-aligned so it sits with num + lbl. */
.v112-stat-ico{
  font-size:22px;
  line-height:1;
  color:#0c1f38;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:22px;
  flex-shrink:0;
  margin-right:2px;
}
@media (max-width:768px){
  .v112-stat-ico{font-size:20px;height:20px}
}
.v112-stat-num{
  font-size:16px;
  font-weight:700;
  color:#0c1f38;
  font-feature-settings:"tnum" 1;
}
.v112-stat-lbl{
  font-size:13px;
  color:#64748b;
  font-weight:500;
}

.v112-price-block{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  flex-shrink:0;
}
.v112-price-head{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
}
.v112-price{
  /* v305: per user — bold sans price like condos.ca / HouseSigma. The price
     is the headline of the card, it should read unmistakably. */
  font-family:inherit;
  font-size:34px;
  font-weight:700;
  color:#0c1f38;
  letter-spacing:-.9px;
  line-height:1;
}
/* v=484p — inline mortgage estimate link replaces standalone calc button.
   "Estimated mortgage: $X,XXX/mo · 20% down, 5-yr fixed →" — descriptive
   mid-gray + teal underline accents. Tight cluster under the price. */
.v112-mort-link{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px;
  margin-top:6px;
  font-size:13.5px;
  line-height:1.35;
  color:#64748b;
  text-decoration:none;
  cursor:pointer;
}
.v112-mort-link:hover .v112-mort-arrow,
.v112-mort-link:hover .v112-mort-lbl{ color:#7a0c2b }
.v112-mort-lbl{ color:#EA0649;font-weight:600;text-decoration:underline;text-underline-offset:3px }
.v112-mort-val{ color:#0c1f38;font-weight:700;font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums }
.v112-mort-meta{ color:#64748b;font-weight:400 }
.v112-mort-arrow{ color:#EA0649;font-weight:600 }
.v112-preapprove-link{
  display:inline-block;
  margin-top:2px;
  font-size:12.5px;
  color:#64748b;
  text-decoration:none;
  cursor:pointer;
}
.v112-preapprove-link:hover{ color:#7a0c2b;text-decoration:underline;text-underline-offset:3px }
/* v=484p — "Set alert for similar listings" lead-capture link. Lives in its
   own m-sec below Listing Details; pairs with the existing openLead('alert')
   modal flow so the email lands in /api/lead with type=saved_search. */
.v112-alert-sec{ padding-top:8px;padding-bottom:24px }
.v112-alert-link{
  display:inline-block;
  color:#EA0649;
  font-size:14px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
}
.v112-alert-link:hover{ color:#7a0c2b }

@media (max-width:768px){
  /* v=484j-pillonsite-2 — reserve room for heart + share pair on the right.
     Heart at right:68, share at right:16, each 42px wide → ~126px reserved
     so the address heading doesn't crash into them. The legacy single-fav
     right:16 rule is dropped; the new pair lives in the .v112-page-fav /
     .v112-page-share blocks higher up in this stylesheet. */
  /* v=484o-addr — mobile address sizing. Long street names like
     "1402 - 125 Western Battery Road" wrapped to 3 lines at 22px on
     a 390px viewport. Shrink to 19px + tighter right padding so they
     fit on 1-2 lines while still reading as a premium display-serif
     heading. */
  .v112-addr-block{ padding:14px 100px 10px 16px }
  .v112-addr-line{
    font-size:19px;
    letter-spacing:-.3px;
    padding-right:100px;
    text-wrap:balance;
    /* v=495 — never truncate the address on mobile either. */
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:break-word;
  }
  .v112-addr-sub{
    font-size:13px;
    padding-right:100px;
    /* Force breadcrumb onto one line at mobile widths too. */
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .v112-stats-block{
    padding:14px 16px;
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
  }
  .v112-stats-icons{ gap:14px;width:100%;justify-content:space-between }
  .v112-stat{ flex-direction:column;align-items:flex-start;gap:2px }
  .v112-stat-num{ font-size:14px }
  .v112-stat-lbl{ font-size:11.5px }
  .v112-price-block{ align-items:flex-start;width:100% }
  .v112-price-head{ justify-content:flex-start }
  .v112-price{ font-size:28px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v303 ELITE — premium pass on the listing detail page.
   Goal: feel calmer, more confident, more curated than condos.ca / HouseSigma.
   What this layer changes (additive — NOT a rewrite):
   - Typography: serif title scaled up, refined letter-spacing, generous line-
     height. Section headers get a subtle 3px navy accent bar on the left.
   - Stats row: replaces the boxy v112 stats with hairline-divided cells —
     looks like a premium product spec sheet, not a button row.
   - Section spacing: more breathing room, cleaner dividers, no boxy borders.
   - Desktop sidebar: a sticky right-rail (≥1024px) with price, status pill,
     primary "Schedule Tour" CTA, secondary "Contact Agent" CTA, and a quiet
     "Save / Share" row. Rides along as the user scrolls the body content.
   - Photo gallery overlay: status chip + "X days on market" badge bottom-left
     of the hero photo with a soft scrim — so the headline stat is visible
     without scrolling.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  /* v303: refined typography for the address title — bigger, calmer.
     v=494: explicit font-weight:400 so the Georgia serif renders Regular
     (not the UA's bold-by-default <h1> styling). */
  .modal .v112-addr-line{
    font-size:36px;
    font-weight:400;
    letter-spacing:-.8px;
    line-height:1.1;
  }
  .modal .v112-addr-sub{
    font-size:14.5px;
    color:#475569;
    margin-top:6px;
    letter-spacing:.1px;
  }
  .modal .v112-addr-block{
    padding:24px 32px 18px;
    /* v303: leave room on the right for the sticky sidebar */
    padding-right:calc(32px + 320px + 24px);
  }
  .v112-page-fav,
  .v112-page-share{ display:none !important }
  /* v303: hairline-divided stats row — desktop keeps the specs on the
     left and restores the price/status grouping on the right. */
  .modal .v112-stats-block{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:0 32px;
    padding-right:calc(32px + 320px + 24px);
    background:#fff;
    border-bottom:1px solid #eef2f5;
    border-top:1px solid #eef2f5;
  }
  .modal .v112-price-block{
    /* v=494: price-block paints FIRST on desktop modal (was order:1 → 0).
       Source order is [price-block, stats-icons]; we now want visual
       order to match source so the Zolo single-row layout appears
       directly under the photo grid. */
    order:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:8px;
    width:100%;
    min-width:0;
    padding:20px 0 16px;
    border-left:none;
    border-bottom:1px solid #eef2f5;
  }
  /* v=429b6 — Item 125 FIX (re-applied for 4th time): force the pills
     row to space-between INSIDE the preview modal too. The earlier
     Item 119 rule at .v307-status-pills (1-class specificity) was
     being overridden here by .modal .v112-price-block .v307-status-
     pills (3-class). Now: pill stays left, "Listed X Days Ago" floats
     to the far right, matching Scott's preview-modal spec. Full-page
     standalone view keeps its inline-left layout (handled separately
     in functions/_lib/render-listing.js — Item 125). */
  .modal .v112-price-head{
    align-items:stretch;
    /* The parent .v112-price-block uses align-items:flex-start which
       lets children shrink to content width. Force this row to span
       the full block width so the inner pill row's space-between
       actually pushes the date to the right rail edge. */
    width:100%;
  }
  .modal .v112-price{ font-size:36px }
  .modal .v112-price-block .v307-status-pills{
    justify-content:space-between;
    width:100%;
  }
  .modal .v112-stats-icons{
    order:2;
    display:grid;
    grid-template-columns:repeat(5, minmax(0, 1fr));
    width:100%;
    gap:0;
    min-width:0;
  }
  .modal .v112-stat{
    display:flex; flex-direction:column; align-items:flex-start;
    gap:3px;
    padding:18px 20px;
    border-right:1px solid #eef2f5;
    white-space:normal;
    min-width:0;
  }
  .modal .v112-stat:last-child{ border-right:none }
  .modal .v112-stat svg{ width:18px; height:18px; stroke:#94a3b8; margin-bottom:2px }
  .modal .v112-stat-num{
    font-size:16px; font-weight:600; color:#0c1f38;
    letter-spacing:-.1px;
    line-height:1.1;
  }
  .modal .v112-stat-lbl{
    font-size:11px; font-weight:500; color:#94a3b8;
    text-transform:uppercase; letter-spacing:.8px;
    white-space:normal;
    line-height:1.25;
  }
  /* v303: section title — serif with a subtle left accent bar. */
  .modal .m-sec{
    padding:32px 32px;
    padding-right:calc(32px + 320px + 24px);
    border-bottom:1px solid #eef2f5;
  }
  /* v307c: per user — REMOVED the 3px navy accent bar before section
     titles. It was reading as a stray "l" character on desktop. Section
     headings now render plain serif with a subtle bottom rhythm via the
     m-sec border. */
  .modal .m-sec-t{
    font-size:24px; letter-spacing:-.4px;
    position:relative;
    margin-bottom:18px;
  }
  /* v307c — hide the legacy "Walk · Transit · Bike" section on desktop.
     There were two Walk/Transit/Bike sections rendering: the old v18
     .m-sec-scores ("Walk · Transit · Bike") AND the newer v65
     .v65-scores-sec ("Lifestyle Scores"). v65 is canonical; silence the
     old one to avoid showing the same data twice. */
  .modal .m-sec-scores{ display:none !important }
  /* v303: the topbar (mobile back arrow + search) is mobile-only. Hide on
     desktop so the elite header reads clean. */
  .modal .m-topbar{ display:none }
}

/* v303 / v305 — desktop sidebar with price + Schedule Tour / Contact Agent
   / Save / Share / agent card. Hidden on mobile (the bottom sticky CTA bar
   covers mobile).
   v305 final: anchored to the modal's positioning context (the modal has
   position:relative). The modal scrolls internally via overflow-y:auto, so
   position:absolute would scroll out of view. We use position:absolute
   relative to the modal AND wire scroll-spy in JS to keep the sidebar
   pinned to the visible top of the modal as the user scrolls. */
.v303-sidebar{
  display:none;
  width:320px;
  background:#fff;
  border:1px solid #eef2f5;
  border-radius:14px;
  box-shadow:0 4px 14px rgba(11,37,69,.06), 0 1px 4px rgba(11,37,69,.04);
  padding:22px 22px 20px;
  z-index:80;
  font-family:inherit;
}
@media (min-width:1024px){
  body.in-listing-detail .v303-sidebar{
    display:block;
    position:absolute;
    top:96px; /* leaves room for the m-topbar (hidden on desktop) + sticky tab bar above */
    right:24px;
  }
  /* v305: pad the desktop photo grid + content blocks so they don't slide
     under the sidebar. (.v112-addr-block, .v112-stats-block, .m-sec already
     have right padding from the v303 elite block.) */
  body.in-listing-detail .v65-photogrid{
    padding-right:calc(320px + 48px) !important;
    padding-left:32px !important;
    box-sizing:border-box !important;
  }
}
/* v=426 — sidebar status pill killed. Scott flagged this green-dot + plain
   "FOR SALE" text as a duplicate of the prominent teal pill that now lives
   above the price (in v307-status-pills, restyled). Right rail still shows
   price + CTAs; status conveyed once at the top. */
.v303-sidebar-status{ display:none !important }
.v303-sidebar-status-LEGACY{
  display:flex; align-items:center; gap:8px;
  font-size:11.5px; font-weight:600;
  color:#475569; letter-spacing:.4px; text-transform:uppercase;
  margin-bottom:8px;
}
.v303-sidebar-status .v303-status-dot{
  width:8px; height:8px; border-radius:50%;
  background:#EA0649;
  box-shadow:0 0 0 4px rgba(158,13,54,.16);
}
.v303-sidebar-status.sold .v303-status-dot{ background:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.16) }
.v303-sidebar-status.leased .v303-status-dot{ background:#d97706; box-shadow:0 0 0 4px rgba(217,119,6,.16) }
.v303-sidebar-status.rent .v303-status-dot{ background:#0c4a6e; box-shadow:0 0 0 4px rgba(12,74,110,.16) }
.v303-sidebar-status .v303-days{
  margin-left:auto; color:#94a3b8; text-transform:none;
  font-weight:500; letter-spacing:0;
}
.v303-sidebar-price{
  /* v305: per user — price reads bold like condos.ca / HouseSigma. Drop the
     serif weight-400 in favor of sans-serif weight-700 so the number is
     unmistakable as the headline of the card. */
  font-family:inherit;
  font-size:36px; font-weight:700; color:#0c1f38;
  letter-spacing:-1px; line-height:1.05;
}
/* v=536r — elite right-rail price row: $price + inline est.* $X/mo on the
   same baseline (condos.ca / HouseSigma pattern). Replaces the v=307b
   Instant Estimate yellow box that was overshadowing the price. */
.v303-sidebar-price-row{
  display:flex; align-items:baseline; flex-wrap:nowrap;
  gap:8px; margin-bottom:14px; min-width:0;
}
.v303-sb-mort-link{
  display:inline-flex; align-items:baseline; gap:4px;
  font-size:13px; line-height:1.3;
  text-decoration:none; color:#64748b;
  white-space:nowrap; min-width:0;
}
.v303-sb-mort-lbl{ color:#94a3b8; font-weight:500 }
.v303-sb-mort-val{
  color:#EA0649; font-weight:600;
  text-decoration:underline; text-underline-offset:3px;
  font-feature-settings:"tnum" 1;
}
.v303-sb-mort-link:hover .v303-sb-mort-val{ color:#7a0c2b }
.v303-sb-mort-link:hover .v303-sb-mort-arrow{ color:#7a0c2b }
/* v=536s — trailing → on the inline est. link hints it opens the
   mortgage calculator. Shares the link's color so hover stays unified. */
.v303-sb-mort-arrow{ color:#EA0649; font-weight:600 }
@media (max-width:768px){
  .v303-sidebar-price-row{ gap:6px }
  .v303-sb-mort-link{ font-size:12px }
}

/* v=536r Option C (refined, polished per Scott's elite review) —
   conditional AVM chip + tiny Mortgage Calculator link. Used on BOTH
   the left-side .v112-price-block and the right-side .v303-sidebar so
   both columns share the layout. Hidden by default ([hidden]); JS
   flips .good (≥+1.5%) or .at-market (between -2% and +1.5%). Below
   -2% stays hidden — no negative messaging to leads.
   Visual rules:
     - 8px border-radius (soft-square, matches active-filter chips)
     - 6px 12px padding
     - 0 1px 2px rgba(0,0,0,0.05) shadow for depth
     - 16-20px margin-top above chip for breathing room
   States — Green (good deal): subtle green tint + deep teal text +
   up-chevron icon, weight 500. Neutral: off-white + slate text +
   filled-dot icon, weight 400. */
.v536r-avm-chip{
  display:none; align-items:center; gap:6px;
  margin:18px 0 2px;
  padding:6px 12px;
  border-radius:8px;
  font-size:12.5px;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  width:fit-content;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,0.05);
  transition:background .14s ease, color .14s ease, box-shadow .14s ease;
}
.v536r-avm-chip:hover{ box-shadow:0 2px 4px rgba(0,0,0,0.07) }
.v536r-avm-chip.good{
  display:inline-flex;
  background:#eaf6ee;
  color:#7a0c2b;
  border:1px solid #c8e8d3;
  font-weight:500;
}
.v536r-avm-chip.good:hover{ background:#dcefe2; color:#5f0821 }
.v536r-avm-chip.at-market{
  display:inline-flex;
  background:#f5f5f5;
  color:#555;
  border:1px solid #e6e6e6;
  font-weight:400;
}
.v536r-avm-chip.at-market:hover{ background:#ebebeb; color:#333 }
.v536r-avm-chip .v536r-avm-chip-ico{ width:12px; height:12px; flex-shrink:0 }
.v536r-mort-calc-link{
  display:inline-block;
  margin:8px 0 14px;
  padding:0;
  font-size:12px; font-weight:500;
  color:#EA0649;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:rgba(158,13,54,.5);
}
.v536r-mort-calc-link:hover{ color:#7a0c2b; text-decoration-color:#7a0c2b }
@media (max-width:768px){
  .v536r-avm-chip{ font-size:11.5px; padding:5px 10px; margin-top:14px }
  .v536r-mort-calc-link{ font-size:11.5px }
}

/* v=536s — "you were just here" pulse on the listing card the user
   just returned from. Added by _v536sScrollAndHighlightOnReturn()
   after scrollIntoView; auto-removed after 1.3s. Soft teal accent
   matching #7a0c2b — non-intrusive, fades cleanly. */
.cdg-just-viewed-highlight{
  animation: cdgJustViewedPulse 1.2s ease-out;
  position:relative;
  z-index:1;
}
@keyframes cdgJustViewedPulse{
  0%   { box-shadow:0 0 0 0 rgba(122,12,43,0.45) }
  40%  { box-shadow:0 0 0 10px rgba(122,12,43,0.18) }
  100% { box-shadow:0 0 0 0 rgba(122,12,43,0) }
}
.v303-sidebar-price-sub{
  font-size:12.5px; color:#64748b; font-weight:500;
  margin-bottom:18px;
}
.v303-sidebar-price-sub a{
  color:#EA0649; text-decoration:none; font-weight:600;
}
.v303-sidebar-price-sub a:hover{ text-decoration:underline }

/* v=536r — Scott: yellow Instant Estimate box was overshadowing the
   listing price + pushing the action CTAs down. Hide it from the v303
   right rail. The AVM/valuation data still lives in the Estimates tab
   (the natural semantic home, condos.ca-parity). v307b kept for
   reference; remove this rule + the .v307-est-row markup at lines
   7004-7008 in index.html when Bucket CC's AVM has its own placement. */
#v307-est-row, .v307-est-row{ display:none !important }
.v307-est-row-legacy{
  display:flex; align-items:center; gap:6px;
  padding:8px 10px;
  background:#fffbeb;
  border:1px solid #fde68a;
  border-radius:8px;
  font-size:12.5px; font-weight:500;
  color:#5a3a0e;
  margin-bottom:18px;
}
.v307-est-ico{ width:14px; height:14px; stroke:#ca8a04; flex-shrink:0 }
.v307-est-lbl{ color:#5a3a0e; font-weight:500 }
.v307-est-val{
  color:#a16207; font-weight:700; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
  font-feature-settings:"tnum" 1;
}
.v307-est-val:hover{ color:#854d0e }

/* v307c — Home Value Estimate card on listing detail. Matches condos.ca:
   gray rounded card with lightning bolt + "Instant estimate" + big number +
   delta. Below: three stacked navy bars showing High / Mid / Low. */
.v307-est-sub-line{
  font-size:13.5px; color:#64748b;
  margin:-8px 0 16px;
  font-weight:500;
}
.v307-est-card{
  background:#f4f6f8;
  border-radius:12px;
  padding:18px 22px;
  margin-bottom:18px;
}
.v307-est-card-hdr{
  display:flex; align-items:center; gap:8px;
  margin-bottom:6px;
}
.v307-est-bolt{ width:18px; height:18px; flex-shrink:0 }
.v307-est-card-lbl{
  font-size:14.5px; color:#0c1f38; font-weight:600;
  letter-spacing:.05px;
}
.v307-est-card-info{
  margin-left:auto;
  width:22px; height:22px; border-radius:50%;
  border:1.5px solid #cbd5e1;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:Georgia,serif; font-style:italic; font-size:12px;
  color:#64748b; cursor:help;
  flex-shrink:0;
}
.v307-est-card-num{
  font-family:inherit;
  font-size:38px; font-weight:700; color:#0c1f38;
  letter-spacing:-1px; line-height:1;
  margin:6px 0 6px;
  font-feature-settings:"tnum" 1;
}
.v307-est-card-delta{
  font-size:13.5px; color:#64748b; font-weight:500;
}
.v307-est-card-delta.up{ color:#15803d }
.v307-est-card-delta.down{ color:#b91c1c }
.v307-est-range{
  display:flex; flex-direction:column; gap:8px;
  margin-bottom:8px;
}
.v307-est-range-bar{
  position:relative;
  background:#0c1f38;
  color:#fff;
  border-radius:999px;
  padding:14px 22px;
  display:flex; align-items:baseline; gap:14px;
  font-feature-settings:"tnum" 1;
  transition:transform .12s, box-shadow .15s;
}
.v307-est-range-bar.v307-est-range-high{ width:100%; background:#0c1f38 }
.v307-est-range-bar.v307-est-range-mid{ width:75%; background:#1e3a5f }
.v307-est-range-bar.v307-est-range-low{ width:55%; background:#475569 }
.v307-est-range-lbl{
  font-size:14px; font-weight:500; color:rgba(255,255,255,.85);
  min-width:42px;
}
.v307-est-range-val{
  font-size:18px; font-weight:700; color:#fff;
  letter-spacing:-.2px;
}
@media (max-width:540px){
  .v307-est-card{ padding:16px 18px }
  .v307-est-card-num{ font-size:30px }
  .v307-est-range-bar{ padding:11px 16px }
  .v307-est-range-val{ font-size:15px }
}
/* v=430k — Item 152: Request a viewing CTA = slate-blue #4b94ba (matches
   For Sale pill). Distinguishes listing-specific lead-gen from
   search-page Get Alerts (which stays teal). */
.v303-cta-primary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:13px 16px;
  background:#4b94ba; color:#fff;
  border:none; border-radius:10px;
  font-size:14px; font-weight:600; letter-spacing:.1px;
  cursor:pointer; font-family:inherit;
  box-shadow:0 4px 12px rgba(75,148,186,.22);
  transition:transform .12s, background .12s, box-shadow .15s;
  -webkit-tap-highlight-color:transparent;
}
.v303-cta-primary:hover{ background:#1e7ea0; box-shadow:0 6px 18px rgba(75,148,186,.30) }
.v303-cta-primary:active{ transform:scale(.98) }
.v303-cta-primary svg{ width:16px; height:16px; stroke:currentColor; flex-shrink:0 }
.v303-cta-secondary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  width:100%;
  padding:12px 16px;
  background:#fff; color:#0c1f38;
  border:1px solid #cbd5e1; border-radius:10px;
  font-size:13.5px; font-weight:600; letter-spacing:.05px;
  cursor:pointer; font-family:inherit;
  margin-top:10px;
  transition:transform .12s, background .12s, border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.v303-cta-secondary:hover{ background:#f8fafc; border-color:#94a3b8 }
.v303-cta-secondary:active{ transform:scale(.98) }
.v303-cta-secondary svg{ width:15px; height:15px; stroke:currentColor; flex-shrink:0 }
.v303-cta-link{
  display:block; width:100%;
  margin-top:10px;
  padding:8px 4px;
  background:transparent; color:#EA0649;
  border:none;
  font-size:13.5px; font-weight:600; letter-spacing:.05px;
  text-align:center; cursor:pointer; font-family:inherit;
  text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px;
  -webkit-tap-highlight-color:transparent;
}
.v303-cta-link:hover{ color:#EA0649 }
.v303-cta-link:active{ opacity:.85 }
/* v=501z-cleanup-A — v303-agent-* dead block removed.
   Verified dead per CSS-DEBT-AUDIT.md: zero non-CSS usage in HTML
   or JS. Explicitly forbidden by CLAUDE.md "NEVER include: Fake
   agents / 'PropertyHub Agent — Verified' personas / fabricated
   headshots". Removed 10 classes:
     .v303-agent-block, .v303-agent-row, .v303-agent-block .v303-
     agent-avatar (+ svg), .v303-agent-meta, .v303-agent-block
     .v303-agent-name, .v303-agent-block .v303-agent-role,
     .v303-agent-card, .v303-agent-avatar, .v303-agent-name,
     .v303-agent-role.
   .v303-mini-actions / .v303-mini-btn KEPT — those are the heart/
   share/save row, still used in the listing-detail UI. */
.v303-mini-actions{
  display:flex; gap:8px; margin-top:14px;
  padding-top:14px; border-top:1px solid #eef2f5;
}
.v303-mini-btn{
  flex:1;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 8px;
  background:transparent; color:#475569;
  border:none; border-radius:8px;
  font-size:12.5px; font-weight:600;
  cursor:pointer; font-family:inherit;
  transition:background .12s, color .12s;
  -webkit-tap-highlight-color:transparent;
}
.v303-mini-btn:hover{ background:#faf0f3; color:#0c1f38 }
.v303-mini-btn.on{ color:#dc2626 }
.v303-mini-btn svg{ width:14px; height:14px; stroke:currentColor; flex-shrink:0 }
.v303-mini-btn .v303-mini-btn-fav-svg{
  fill:none;
}
.v303-mini-btn.on .v303-mini-btn-fav-svg{
  fill:#dc2626;
}
/* v=501z-cleanup-A — second v303-agent-* dead cluster removed
   (.v303-agent-card, .v303-agent-avatar, .v303-agent-name,
   .v303-agent-role). See CSS-DEBT-AUDIT.md. */

/* v305: hide the legacy m-addr-row entirely — v112-addr-block above the
   photo gallery is now the single canonical address header (matches
   condos.ca: address always at the top, before the photo). The legacy
   row was duplicating the address below the photo. */
.modal .m-addr-row{ display:none !important }

/* v305: hide the sticky bottom CTA bar on desktop — the v303 sidebar on
   the right already carries Schedule Tour / Contact Agent / Save / Share
   so the bottom bar would be redundant. Mobile keeps it (sidebar hidden). */
@media (min-width:1024px){
  body.in-listing-detail .v42-detail-cta{ display:none !important }
  /* v305 ALSO hide the v278 inline "Schedule a Viewing" form on desktop —
     it was overlapping the v303 sidebar (both rendering on the right). The
     v303 sidebar's Schedule a Tour / Contact Agent buttons cover the same
     action. v278 stays inline on mobile (sidebar is hidden there). */
  .modal .v278-sched{ display:none !important }
  /* v305 SWEEPING FIX — every body section in the listing modal gets a
     right-padding on desktop to leave room for the v303 sidebar. Targets
     ALL direct children of the modal that render content. We exclude only
     the sidebar itself, the sticky tab header, the topbar (mobile-only),
     the v278 inline form (already hidden on desktop), the bottom CTA bar
     (already hidden on desktop), and the v303 sidebar wrapper. */
  body.in-listing-detail #modal > *:not(.v303-sidebar):not(.v68-listing-hdr):not(.m-topbar):not(.v278-sched):not(.v42-detail-cta):not(.v68-note-pop){
    padding-right: calc(320px + 48px) !important;
    box-sizing:border-box !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v303 ELITE — Phase 2: sticky section tab nav + scroll-spy.
   The v68-listing-hdr already exists with tabs (Overview / Listing History /
   Estimates / Comparables / Schools / Community). Phase 2 makes it sticky on
   desktop and adds a soft shadow when stuck so it feels like a navigation
   bar that locks to the top of the modal, not a hovering chip strip.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .modal .v68-listing-hdr{
    display:flex !important;
    position:sticky;
    top:0;
    z-index:10;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid #eef2f5;
    transition:box-shadow .2s ease, background .2s ease;
    /* v317 Bug A: was padding-right:calc(320px + 24px + 32px) — that 376px
       defensive gutter for the v303 sticky sidebar pushed the actions group
       deep into the middle of the header (Scott's "clustered in the middle"
       complaint). The sidebar starts at top:96px (below the header's 54px
       height) so there is no actual vertical overlap with header chrome.
       Drop the gutter and let the actions hug the modal's real right edge,
       matching housesigma's tabs-left / actions-right pattern. */
    padding-right:24px;
  }
  /* When stuck (scrolled past natural position), JS adds .v303-stuck for
     a subtle shadow so the bar lifts off the content. */
  .modal .v68-listing-hdr.v303-stuck{
    box-shadow:0 4px 14px rgba(11,37,69,.06), 0 1px 2px rgba(11,37,69,.04);
    background:rgba(255,255,255,.985);
  }
  /* v303: refined tab styling — calmer font weight, refined hover. */
  .modal .v68-tab{
    font-size:13.5px;
    font-weight:500;
    letter-spacing:.05px;
    color:#64748b;
    padding:0 18px;
    height:48px;
    border-bottom:2px solid transparent;
    transition:color .12s, border-color .12s;
    background:transparent;
  }
  .modal .v68-tab:hover{ color:#0c1f38 }
  .modal .v68-tab.on{
    color:#0c1f38;
    font-weight:600;
    border-bottom-color:#0c1f38;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v303 ELITE — Phase 3: data-quality polish.
   - Key Facts grid → premium 4-col on desktop with hairline-divided cells,
     uppercase label + tabular-numeric value (looks like a luxury spec sheet).
   - Estimated Value card → big serif number + confidence range bar, the
     HouseSigma "SigmaEstimate" idea but cleaner.
   - Rooms table → cleaner typography, alternating subtle row tint.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1024px){
  .modal .v114-facts{
    grid-template-columns:repeat(4, 1fr);
    border-top:1px solid #eef2f5;
    border-left:1px solid #eef2f5;
    background:#fff;
  }
  .modal .v114-fact{
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:6px;
    padding:18px 18px;
    border-right:1px solid #eef2f5;
    border-bottom:1px solid #eef2f5;
    min-height:80px;
  }
  .modal .v114-fact-lbl{
    font-size:11px;
    font-weight:600;
    color:#94a3b8;
    text-transform:uppercase;
    letter-spacing:.8px;
  }
  .modal .v114-fact-val{
    font-size:15px;
    font-weight:600;
    color:#0c1f38;
    text-align:left;
    letter-spacing:-.1px;
  }
  /* v303: rooms table polish — already styled but make it feel premium. */
  .modal .m-rooms-tbl{
    border-collapse:separate;
    border-spacing:0;
    width:100%;
    font-size:13.5px;
  }
  .modal .m-rooms-tbl th{
    font-size:11px; text-transform:uppercase; letter-spacing:.8px;
    color:#94a3b8; font-weight:600;
    padding:12px 14px; text-align:left;
    border-bottom:1px solid #eef2f5;
  }
  .modal .m-rooms-tbl td{
    padding:14px 14px;
    border-bottom:1px solid #f1f5f9;
    color:#0c1f38;
  }
  .modal .m-rooms-tbl tbody tr:hover td{ background:#fafbfc }
  /* v303: m-dg property details — already 2-col, polish typography. */
  .modal .m-dg .mdi{
    padding:14px 16px;
    border-bottom:1px solid #f1f5f9;
  }
  .modal .m-dg .mdi-l{
    font-size:11px; text-transform:uppercase; letter-spacing:.8px;
    color:#94a3b8; font-weight:600;
    margin-bottom:4px;
  }
  .modal .m-dg .mdi-v{
    font-size:14.5px; color:#0c1f38; font-weight:600;
  }
}

/* v303: the Estimated Value premium card — a HouseSigma-inspired feature.
   Big serif number on the left, confidence range bar on the right (where
   the listing price sits within an estimated low / high band). Rendered
   inside the existing Estimates section. */
.v303-estimate-card{
  display:flex; align-items:stretch; gap:24px;
  padding:22px 24px;
  background:linear-gradient(135deg, #fafdfc 0%, #faf4f6 100%);
  border:1px solid #ebd6dc;
  border-radius:16px;
  margin-bottom:18px;
}
.v303-estimate-num{
  font-family:var(--serif);
  font-size:36px; font-weight:400; color:#0c1f38;
  letter-spacing:-.8px; line-height:1.05;
  white-space:nowrap;
}
.v303-estimate-lbl{
  font-size:11px; font-weight:600; color:#EA0649;
  text-transform:uppercase; letter-spacing:.8px;
  margin-bottom:6px;
}
.v303-estimate-sub{
  font-size:12.5px; color:#64748b;
  margin-top:4px;
}
.v303-estimate-bar-wrap{
  flex:1; min-width:0;
  display:flex; flex-direction:column; justify-content:center;
}
.v303-estimate-bar-row{
  display:flex; align-items:center; justify-content:space-between;
  font-size:11px; font-weight:600; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.6px;
  margin-bottom:6px;
}
.v303-estimate-bar{
  position:relative;
  height:6px; background:#e2e8f0; border-radius:6px;
  overflow:visible;
}
.v303-estimate-bar-fill{
  position:absolute; top:0; bottom:0;
  background:linear-gradient(90deg, #EA0649 0%, #c2345c 100%);
  border-radius:6px;
}
.v303-estimate-bar-marker{
  position:absolute; top:50%;
  width:14px; height:14px; border-radius:50%;
  background:#0c1f38;
  border:3px solid #fff;
  box-shadow:0 2px 6px rgba(11,37,69,.30);
  transform:translate(-50%, -50%);
}
.v303-estimate-bar-tick{
  display:flex; justify-content:space-between;
  font-size:11.5px; color:#64748b; font-weight:500;
  margin-top:8px;
}
@media (max-width:768px){
  .v303-estimate-card{
    flex-direction:column; gap:14px;
    padding:18px;
  }
  .v303-estimate-num{ font-size:28px }
}

/* v108: simple share modal — Copy Link + Email only, condos.ca-style.
   Replaces navigator.share and Twitter/Facebook fallbacks. */
.v108-share-ov{
  position:fixed;inset:0;z-index:9100;
  background:rgba(11,37,69,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:center;justify-content:center;padding:20px;
  opacity:0;transition:opacity .18s;
}
.v108-share-ov.open{display:flex;opacity:1}
.v108-share-card{
  position:relative;background:#fff;border-radius:14px;
  width:100%;max-width:440px;
  padding:36px 24px 24px;
  box-shadow:0 24px 60px rgba(11,37,69,.32);
}
.v108-share-close{
  position:absolute;top:14px;right:14px;
  width:32px;height:32px;border-radius:50%;
  background:transparent;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  color:#475569;transition:background .12s,color .12s;
}
.v108-share-close:hover{background:#f1f5f9;color:#0c1f38}
.v108-share-close svg{width:16px;height:16px}
.v108-share-hdr{font-size:15px;font-weight:600;color:#0c1f38;text-align:center;margin-bottom:6px}
.v108-share-addr{font-family:var(--serif);font-size:24px;font-weight:400;color:#0c1f38;text-align:center;margin-bottom:18px;letter-spacing:-.4px;line-height:1.2}
.v108-share-row{
  display:flex;align-items:center;gap:14px;
  width:100%;background:#f8fafb;border:1px solid #eef2f5;
  border-radius:10px;padding:14px 16px;margin-bottom:8px;
  cursor:pointer;font-family:inherit;
  transition:background .12s, border-color .12s;
}
.v108-share-row:hover{background:#eef2f5;border-color:#cbd5e1}
.v108-share-row:last-of-type{margin-bottom:0}
.v108-share-icon{
  width:38px;height:38px;border-radius:8px;
  background:#0c1f38;color:#fff;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.v108-share-icon svg{width:18px;height:18px;stroke:currentColor;fill:none}
.v108-share-lbl{font-size:15px;font-weight:600;color:#0c1f38;letter-spacing:-.1px}

/* v104: PREVIEW MODAL — condos.ca-style. Photos stacked vertically,
   info+actions header at top, sticky "Request a viewing" at bottom.
   Click any photo → opens fullscreen single-photo gallery. */
.v104-preview-ov{
  position:fixed;inset:0;z-index:7000;
  background:rgba(11,37,69,.55);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  display:none;align-items:flex-start;justify-content:center;
  padding:20px 16px;
  opacity:0;transition:opacity .2s;
}
.v104-preview-ov.open{display:flex;opacity:1}
.v104-preview-card{
  width:100%;max-width:780px;
  max-height:calc(100vh - 40px);
  background:#fff;border-radius:14px;overflow:hidden;
  display:flex;flex-direction:column;position:relative;
  box-shadow:0 30px 80px rgba(11,37,69,.35),0 8px 24px rgba(11,37,69,.18);
}
.v104-preview-hdr{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:14px 18px;
  border-bottom:1px solid #eef2f5;flex-shrink:0;background:#fff;
}
.v104-preview-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.v104-preview-addr{font-size:20px;font-weight:700;color:#0c1f38;letter-spacing:-.3px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v104-preview-meta{display:flex;align-items:center;gap:7px;font-size:15px;color:#334155;font-weight:500;margin-top:6px;flex-wrap:wrap}
.v104-preview-meta .v104-price{color:#EA0649;font-weight:800;font-size:16px;letter-spacing:-.2px}
.v104-preview-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.v104-preview-btn{
  appearance:none;background:transparent;border:none;cursor:pointer;
  /* v=517i — Scott elite-icon pass #2: 48 → 52 frame, 30 → 36 svg.
     Brings icon scale into balance with the 20px address + 15px specs
     above. Tap target stays well over 44 WCAG min. */
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#475569;transition:background .12s,color .12s;
}
.v104-preview-btn:hover{background:#f1f5f9;color:#0c1f38}
.v104-preview-btn svg{width:36px;height:36px;stroke-width:1.9}
.v104-preview-btn.on svg{fill:#e02a3c;stroke:#e02a3c}
.v104-preview-close:hover{background:#fef2f2;color:#dc2626}
.v104-preview-scroll{
  flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:12px 0;background:#f8fafb;
}
.v104-preview-photo{
  display:block;cursor:zoom-in;-webkit-tap-highlight-color:transparent;
  margin:0 0 6px;background:#0c1f38;
  position:relative;overflow:hidden;
}
.v104-preview-photo:last-child{margin-bottom:0}
.v104-preview-photo img{width:100%;height:auto;display:block;object-fit:cover}
.v104-preview-photo:hover{opacity:.96}
/* v105: alternating layout — hero (full width) then 2 thumbs side-by-side */
.v104-pp-hero img{ aspect-ratio:16/10; height:auto; object-fit:cover }
/* v105: condos.ca-style "Directions" pill overlaid on the hero photo top-left */
.v104-photo-direction{
  position:absolute;top:14px;left:14px;z-index:3;
  appearance:none;background:#fff;color:#EA0649;
  border:1px solid rgba(158,13,54,.3);
  border-radius:999px;padding:7px 12px;
  font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;letter-spacing:-.05px;
  box-shadow:0 4px 12px rgba(0,0,0,.12);transition:all .12s;
}
.v104-photo-direction:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.18);background:#faf0f3}
.v104-photo-direction svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor}

.v104-preview-row{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0 0 6px }
.v104-pp-half{ margin:0 !important }
.v104-pp-half img{ aspect-ratio:1/1; height:auto; object-fit:cover }
@media (max-width:520px){
  .v104-pp-hero img{ aspect-ratio:4/3 }
  .v104-pp-half img{ aspect-ratio:1/1 }
}
.v104-preview-cta-bar{
  position:sticky;bottom:0;left:0;right:0;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.96) 30%);
  display:flex;justify-content:center;flex-shrink:0;
  border-top:1px solid #eef2f5;
}
.v104-preview-cta{
  appearance:none;background:#EA0649;color:#fff;border:none;
  border-radius:999px;padding:11px 26px;font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;letter-spacing:-.1px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 6px 18px rgba(158,13,54,.36);
  transition:transform .12s, background .15s, box-shadow .15s;
}
.v104-preview-cta:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 8px 22px rgba(158,13,54,.44)}
.v104-preview-cta svg{width:16px;height:16px;flex-shrink:0}
@media (max-width:768px){
  .v104-preview-ov{padding:12px 8px}
  .v104-preview-card{max-height:calc(100vh - 24px);border-radius:12px}
  .v104-preview-hdr{padding:12px 14px}
  .v104-preview-addr{font-size:17px;letter-spacing:-.25px}
  .v104-preview-meta{font-size:13.5px}
  .v104-preview-meta .v104-price{font-size:14.5px}
  .v104-preview-btn{width:48px;height:48px}
  .v104-preview-btn svg{width:32px;height:32px;stroke-width:1.9}
}

/* v103: lightbox TOP bar (address + meta + Save/Share/Direction) and BOTTOM
   sticky CTA (Request a Viewing). Match condos.ca pattern — info on top,
   action button anchored to bottom of viewport. */
.lb-top-bar{
  position:absolute;top:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 22px calc(14px + env(safe-area-inset-top,0px));
  background:linear-gradient(180deg, rgba(11,37,69,.85) 0%, rgba(11,37,69,0) 100%);
  z-index:6;pointer-events:none;
}
.lb-top-bar > *{ pointer-events:auto }
.lb-top-info{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;color:#fff}
.lb-top-addr{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.2px;text-shadow:0 1px 4px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lb-top-meta{font-size:13px;color:rgba(255,255,255,.92);font-weight:500;margin-top:3px;text-shadow:0 1px 3px rgba(0,0,0,.4)}
.lb-top-actions{display:flex;gap:8px;align-items:center;flex-shrink:0}
.lb-top-btn{
  appearance:none;background:rgba(255,255,255,.95);
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;padding:8px 12px;
  font-size:12.5px;font-weight:600;color:#0c1f38;
  cursor:pointer;font-family:inherit;
  display:inline-flex;align-items:center;gap:6px;
  letter-spacing:-.05px;transition:all .12s;
  box-shadow:0 4px 14px rgba(0,0,0,.18);
}
.lb-top-btn:hover{background:#fff;transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.22)}
.lb-top-btn svg{width:14px;height:14px;flex-shrink:0}
.lb-top-btn.on svg{fill:#e02a3c;stroke:#e02a3c}
.lb-bottom-bar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;justify-content:center;
  padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(0deg, rgba(11,37,69,.78) 0%, rgba(11,37,69,0) 100%);
  z-index:6;pointer-events:none;
}
.lb-bottom-bar > *{pointer-events:auto}
.lb-cta-bottom{
  appearance:none;background:#EA0649;color:#fff;border:none;
  border-radius:999px;padding:12px 28px;font-size:14.5px;font-weight:600;
  cursor:pointer;font-family:inherit;letter-spacing:-.1px;
  display:inline-flex;align-items:center;gap:8px;
  box-shadow:0 8px 22px rgba(158,13,54,.45),0 0 0 1px rgba(255,255,255,.6);
  transition:transform .12s, background .15s, box-shadow .15s;
}
.lb-cta-bottom:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 10px 26px rgba(158,13,54,.55),0 0 0 1px rgba(255,255,255,.7)}
.lb-cta-bottom svg{width:16px;height:16px;flex-shrink:0}
@media (max-width:768px){
  .lb-top-bar{padding:12px 14px calc(10px + env(safe-area-inset-top,0px));gap:10px}
  .lb-top-addr{font-size:14px}
  .lb-top-meta{font-size:11.5px}
  .lb-top-btn{padding:7px 9px;font-size:11.5px}
  .lb-top-lbl{display:none}
  .lb-bottom-bar{padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .lb-cta-bottom{padding:11px 22px;font-size:13.5px}
}

/* v101: same strip as the listing-detail v99-qstrip, but pinned to the bottom
   of the fullscreen lightbox over a translucent dark backdrop. */
.lb-header.v99-qstrip-lb{
  position:absolute !important;
  left:0 !important;right:0 !important;bottom:0 !important;top:auto !important;
  background:linear-gradient(180deg, rgba(11,37,69,0) 0%, rgba(11,37,69,.78) 100%) !important;
  display:flex !important;align-items:flex-end !important;justify-content:space-between !important;
  padding:18px 22px calc(18px + env(safe-area-inset-bottom,0px)) !important;
  border:none !important;
  z-index:6 !important;
  pointer-events:none;
}
.lb-header.v99-qstrip-lb > *{ pointer-events:auto }
.lb-header.v99-qstrip-lb .v99-qstrip-addr{ color:#fff !important;font-size:17px !important;font-weight:700 !important;text-shadow:0 1px 4px rgba(0,0,0,.4) }
.lb-header.v99-qstrip-lb .v99-qstrip-meta{ color:rgba(255,255,255,.85) !important;font-size:13px !important;text-shadow:0 1px 3px rgba(0,0,0,.35) }
.lb-header.v99-qstrip-lb .v99-qbtn{ background:rgba(255,255,255,.92);border-color:rgba(255,255,255,.4);color:#0c1f38 }
.lb-header.v99-qstrip-lb .v99-qbtn:hover{ background:#fff }
.lb-header.v99-qstrip-lb .v99-qbtn.on svg{ fill:#e02a3c;stroke:#e02a3c }
.lb-header.v99-qstrip-lb .v99-qbtn-cta{ background:#EA0649 !important;color:#fff !important;border-color:#EA0649 !important }
.lb-header.v99-qstrip-lb .v99-qbtn-cta:hover{ background:#EA0649 !important;border-color:#EA0649 !important }
@media (max-width:768px){
  .lb-header.v99-qstrip-lb{ padding:14px 14px calc(14px + env(safe-area-inset-bottom,0px)) !important }
  .lb-header.v99-qstrip-lb .v99-qstrip-addr{ font-size:14px !important }
  .lb-header.v99-qstrip-lb .v99-qstrip-meta{ font-size:11.5px !important }
}

/* Modal body */
.m-body{padding:0;flex:1;padding-bottom:72px}

/* Status row (For Rent / 51 minutes on market) */
.m-status-row{display:flex;align-items:center;gap:10px;padding:16px 18px 0;flex-wrap:wrap}
.m-status-pill{padding:6px 14px;border-radius:20px;font-size:12.5px;font-weight:700;background:#EA0649;color:#fff;text-transform:uppercase;letter-spacing:.4px;box-shadow:0 2px 6px rgba(184,20,66,.25)}
.m-status-pill.on-market{background:rgba(122,11,42,.1);color:var(--teal)}
/* v=484j-pill — upgrade the listing-detail "X day(s) on site" from
   plain text to a sage/teal pill matching the card-side .ctime
   treatment (and condos.ca's reference). The JS now adds
   .m-status-pill-time on this element to flag it for pill styling. */
.m-status-time{font-size:12px;color:var(--teal);font-weight:500}
.m-status-pill-time,
.m-status-time.m-status-pill-time{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:9999px;
  background:#dff2ec;
  color:#7a0c2b;
  font-size:12px;
  font-weight:600;
  letter-spacing:.1px;
  box-shadow:none;
  text-transform:none;
}

/* Big centered price */
.m-price-block{text-align:center;padding:14px 18px 10px}
.m-price{font-family:var(--serif);font-size:44px;color:var(--navy);line-height:1;font-weight:400;letter-spacing:-.5px}

/* Rent vs Buy pill button */
/* v18 Fix 3: Walk/Transit/Bike Score row */
.m-sec-scores .m-scores-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-score-card{padding:14px 8px 12px;background:#f7fafa;border:1px solid #eef2f5;border-radius:12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.m-score-icon{font-size:22px;line-height:1;margin-bottom:4px}
.m-score-num{font-size:24px;font-weight:800;color:#0c1f38;letter-spacing:-.5px;font-feature-settings:"tnum" 1;line-height:1.05}
.m-score-card.score-good .m-score-num{color:#EA0649}
.m-score-card.score-ok .m-score-num{color:#d4a24c}
.m-score-card.score-low .m-score-num{color:#c0392b}
.m-score-lbl{font-size:11px;color:#5a6e84;font-weight:600;text-transform:uppercase;letter-spacing:.4px;margin-top:3px}
.m-score-desc{font-size:11.5px;color:#788a9d;line-height:1.3;margin-top:2px}

/* v18 Fix 4: Commute calculator */
.m-sec-commute .m-commute-form{display:flex;gap:8px;margin-bottom:12px}
.m-commute-input{flex:1;padding:11px 14px;border:1.5px solid #e5e9ee;border-radius:10px;font-size:14px;font-family:inherit;color:#0c1f38;outline:none;-webkit-appearance:none;min-height:44px;min-width:0}
.m-commute-input:focus{border-color:#EA0649;box-shadow:0 0 0 3px rgba(158,13,54,.12)}
.m-commute-go{padding:11px 16px;background:#0c1f38;color:#fff;border:none;border-radius:10px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;min-height:44px;transition:background .12s}
.m-commute-go:hover{background:#162845}
.m-commute-results{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.m-commute-results[hidden]{display:none}
.m-commute-card{padding:12px 8px;background:#f7fafa;border:1px solid #eef2f5;border-radius:10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.m-commute-ico{font-size:20px;line-height:1;margin-bottom:2px}
.m-commute-lbl{font-size:11px;color:#5a6e84;font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.m-commute-time{font-size:18px;font-weight:800;color:#0c1f38;font-feature-settings:"tnum" 1}
.m-commute-foot{font-size:11.5px;color:#94a3b8;margin-top:10px;line-height:1.4}

.m-rvb-btn{margin:6px 18px 18px;padding:13px;background:var(--teal3);border:1px solid rgba(122,11,42,.2);border-radius:var(--rlg);display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;width:calc(100% - 36px);font-family:var(--sans);transition:all .15s}
.m-rvb-btn:hover{background:rgba(122,11,42,.08)}
.m-rvb-btn svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:2}

/* v4 Fix 3d: Inline mortgage calculator on listing detail */
.m-mort-summary{display:flex;align-items:center;justify-content:space-between;background:#f7fafa;border:1px solid #eef2f7;border-radius:12px;padding:14px 16px;margin-bottom:10px}
.m-mort-monthly{display:flex;flex-direction:column;gap:2px}
.m-mort-label{font-size:11.5px;color:#64748b;font-weight:500;text-transform:uppercase;letter-spacing:.4px}
.m-mort-value{font-size:22px;font-weight:700;color:#0c1f38;font-family:var(--serif);letter-spacing:-.4px}
.m-mort-toggle{background:#fff;border:1.5px solid #e7d1d7;color:#EA0649;font-size:12.5px;font-weight:600;padding:8px 14px;border-radius:8px;cursor:pointer;font-family:inherit;transition:all .12s}
.m-mort-toggle:hover{background:#fde2ea;border-color:#EA0649}
.m-mort-body{padding:14px 4px 4px}
.m-mort-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}
@media (max-width:600px){ .m-mort-grid{grid-template-columns:1fr 1fr;gap:12px} }
.m-mort-field label{display:block;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.m-mort-row{display:flex;align-items:center;border:1.5px solid #e0e6ec;border-radius:8px;background:#fff;height:42px;padding:0 12px;gap:6px}
.m-mort-row input,.m-mort-row select{flex:1;border:none;outline:none;font-size:14px;font-weight:600;color:#0c1f38;background:transparent;font-family:inherit;min-width:0}
.m-mort-suffix{color:#64748b;font-weight:600;font-size:13px;flex-shrink:0}
.m-mort-sub{font-size:11px;color:#94a3b8;margin-top:4px}
.m-mort-disc{font-size:11.5px;color:#94a3b8;line-height:1.5;margin-top:6px;font-style:italic}

/* ════════════════════════════════════════════════════════════════════
   v323 — TRUE CARRYING COST CALCULATOR styles.
   Sits below the existing mortgage calc. White card, condos.ca-style
   line items with right-aligned values. Total line emphasised. Closing
   costs collapsed inside a <details>. Mobile stacks to single column. */
.m-carry-sec{ background:#fff; border:1px solid #eef2f7; border-radius:14px; padding:18px 18px 16px; margin:14px 18px }
.m-carry-sub{ font-size:12.5px; color:#64748b; line-height:1.55; margin-bottom:14px }
.m-carry-grid{ display:flex; flex-direction:column; gap:6px }
.m-carry-row{ display:flex; justify-content:space-between; align-items:baseline; padding:9px 0; border-bottom:1px dashed #eef2f7; gap:12px }
.m-carry-row:last-child{ border-bottom:none }
.m-carry-lbl{ font-size:13.5px; color:#334155 }
.m-carry-val{ font-size:14px; font-weight:600; color:#0c1f38; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }
.m-carry-hint{ font-size:11.5px; color:#94a3b8; font-weight:400; margin-left:6px }
.m-carry-total{ margin-top:6px; padding-top:14px; border-top:1.5px solid #0c1f38; border-bottom:none }
.m-carry-total .m-carry-lbl{ font-size:14px; font-weight:700; color:#0c1f38 }
.m-carry-total .m-carry-val{ font-size:18px; font-weight:700; color:#0c1f38; letter-spacing:-.3px }
.m-carry-closing{ margin-top:14px; border:1px solid #eef2f7; border-radius:10px; background:#f8fafa }
.m-carry-closing-summary{ list-style:none; cursor:pointer; padding:13px 14px; display:flex; justify-content:space-between; align-items:center; font-size:13.5px; font-weight:600; color:#0c1f38; gap:12px }
.m-carry-closing-summary::-webkit-details-marker{ display:none }
.m-carry-closing-summary::after{ content:"▾"; color:#64748b; font-size:12px; transition:transform .15s }
.m-carry-closing[open] .m-carry-closing-summary::after{ transform:rotate(180deg) }
.m-carry-closing-total{ font-weight:700; color:#0c1f38; font-variant-numeric:tabular-nums }
.m-carry-closing-body{ padding:4px 14px 14px; display:flex; flex-direction:column; gap:0 }
.m-carry-fthb{ display:flex; align-items:center; gap:8px; padding:9px 0 12px; font-size:13px; color:#334155; cursor:pointer; border-bottom:1px dashed #eef2f7; margin-bottom:6px }
.m-carry-fthb input{ accent-color:#EA0649; width:16px; height:16px; flex-shrink:0; cursor:pointer }
.m-carry-disc{ font-size:11.5px; color:#94a3b8; line-height:1.5; margin-top:10px; font-style:italic }
@media (max-width:600px){
  .m-carry-sec{ margin:14px 14px; padding:16px 14px 14px }
  .m-carry-lbl{ font-size:13px }
  .m-carry-val{ font-size:13.5px }
  .m-carry-total .m-carry-val{ font-size:17px }
}

/* ════════════════════════════════════════════════════════════════════
   v323 — Listing-detail footer. Compact version of the homepage footer,
   sized for the modal content column. Uses the same navy bg + teal-accent
   palette as the main footer. Hidden on mobile (the mobile listing already
   has its own bottom-sheet CTAs and the homepage footer renders below the
   page anyway). */
.m-listing-footer{ background:#0c1f38; color:#fff; margin:24px -18px 0; padding:30px 28px 24px; border-radius:0 }
.m-listing-footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; margin-bottom:22px }
.m-listing-footer-brand .m-listing-footer-logo{ font-family:var(--serif,Georgia,serif); font-size:22px; font-weight:600; letter-spacing:-.4px; margin-bottom:8px }
.m-listing-footer-brand .m-listing-footer-logo em{ font-style:normal; color:#e37f9b }
.m-listing-footer-brand .m-listing-footer-tag{ font-size:12.5px; color:rgba(255,255,255,.65); line-height:1.55; margin-bottom:8px }
.m-listing-footer-brand .m-listing-footer-brk{ font-size:11.5px; color:rgba(255,255,255,.45); letter-spacing:.3px }
.m-listing-footer-col h4{ font-size:11px; font-weight:700; color:#e37f9b; text-transform:uppercase; letter-spacing:1.2px; margin:0 0 10px }
.m-listing-footer-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:7px }
.m-listing-footer-col a{ color:rgba(255,255,255,.78); font-size:13px; cursor:pointer; text-decoration:none; transition:color .12s }
.m-listing-footer-col a:hover{ color:#e37f9b }
.m-listing-footer-disc{ font-size:11px; color:rgba(255,255,255,.45); line-height:1.55; padding-top:18px; border-top:1px solid rgba(255,255,255,.08) }
.m-listing-footer-disc a{ color:rgba(255,255,255,.6); text-decoration:underline }
.m-listing-footer-bot{ display:flex; justify-content:space-between; align-items:center; padding-top:10px; font-size:11px; color:rgba(255,255,255,.5); gap:12px; flex-wrap:wrap }
@media (max-width:768px){
  .m-listing-footer{ display:none }
}

/* v4 Fix 3d: Price history login gate (Condos.ca pattern, TRREB-VOW compliant) */
.m-history-locked{display:flex;flex-direction:column;gap:12px}
.m-history-card-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (max-width:540px){ .m-history-card-row{grid-template-columns:1fr 1fr} }
.m-history-locked-card{background:#f7fafa;border:1px solid #eef2f7;border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden;min-height:78px}
.m-history-locked-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.0) 0%,rgba(247,250,250,.85) 100%);z-index:1}
.m-history-locked-date{font-size:11px;color:#94a3b8;font-weight:600}
.m-history-locked-blur{font-size:18px;font-weight:700;color:#cbd5e1;filter:blur(6px);user-select:none;pointer-events:none}
.m-history-locked-mini{font-size:11.5px;color:#cbd5e1;filter:blur(4px);user-select:none}
.m-history-callout{background:#eaf5ff;border:1px solid #bfdbf6;color:#0c1f38;padding:14px 16px;border-radius:10px;display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.5}
.m-history-callout svg{width:22px;height:22px;color:#1e6dca;flex-shrink:0;margin-top:1px}
.m-history-callout strong{display:block;font-size:13.5px;color:#0c1f38;margin-bottom:3px}
.m-history-callout-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.m-history-callout-btn{padding:9px 16px;font-size:13px;font-weight:600;border-radius:8px;border:none;cursor:pointer;font-family:inherit;transition:all .15s}
.m-history-callout-btn-p{background:#EA0649;color:#fff;box-shadow:0 2px 8px rgba(184,20,66,.3)}
.m-history-callout-btn-p:hover{background:#EA0649;transform:translateY(-1px)}
.m-history-callout-btn-s{background:#fff;color:#0c1f38;border:1.5px solid #cbd5d1}
.m-history-callout-btn-s:hover{border-color:#0c1f38}
.m-history-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#fff;border:1px solid #eef2f7;border-radius:8px;margin-bottom:6px}
.m-history-row-l{display:flex;flex-direction:column;gap:2px}
.m-history-row-date{font-size:12px;color:#64748b;font-weight:500}
.m-history-row-event{font-size:13.5px;color:#0c1f38;font-weight:600}
.m-history-row-r{font-size:14.5px;color:#0c1f38;font-weight:700;letter-spacing:-.2px}

/* MLS copy-to-clipboard button */
.m-mls-copy{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;background:transparent;border:none;color:#94a3b8;cursor:pointer;border-radius:5px;margin-left:6px;padding:0;transition:all .12s;vertical-align:middle}
.m-mls-copy:hover{background:#f4f6f8;color:#0c1f38}

/* Similar / Recently Viewed rail */
.m-similar-rail{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:4px 4px 14px;scroll-snap-type:x mandatory}
.m-similar-rail::-webkit-scrollbar{height:6px}
.m-similar-rail::-webkit-scrollbar-thumb{background:#cbd5d1;border-radius:3px}
.m-similar-card{flex:0 0 220px;scroll-snap-align:start;background:#fff;border:1px solid #eef2f7;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .18s cubic-bezier(.2,.8,.2,1)}
.m-similar-card:hover{border-color:#EA0649;box-shadow:0 8px 24px rgba(11,37,69,.12);transform:translateY(-2px)}
.m-similar-img{aspect-ratio:16/10;background:#f4f6f8 center/cover}
.m-similar-body{padding:10px 12px}
.m-similar-price{font-size:15.5px;font-weight:700;color:#0c1f38;letter-spacing:-.3px;margin-bottom:3px}
.m-similar-addr{font-size:12px;color:#475569;line-height:1.35;margin-bottom:5px;height:32px;overflow:hidden}
.m-similar-meta{font-size:11px;color:#64748b;display:flex;gap:7px}

/* Quick stats — condos.ca 3-column layout with icons */
.m-quick-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;padding:6px 28px 14px;border-bottom:1px solid #eef2f5;padding-bottom:18px}
.m-quick-stats-2{grid-template-columns:1fr 1fr;padding-top:14px;border-bottom:none}
.m-qs{text-align:center;padding:14px 8px;background:#f8fbfa;border-radius:10px;border:1px solid #eef2f5;transition:border-color .15s,transform .15s,box-shadow .15s}
.m-qs:hover{border-color:#EA0649;transform:translateY(-1px);box-shadow:0 3px 10px rgba(184,20,66,.12)}
.m-qs svg{width:22px;height:22px;stroke:#EA0649;fill:none;stroke-width:2;margin-bottom:6px}
.m-qs div{font-size:13.5px;font-weight:600;color:var(--navy)}
.m-qs:last-child{border-right:none}
.m-qs svg{width:26px;height:26px;stroke:var(--navy);fill:none;stroke-width:1.5;margin:0 auto 6px;display:block}
.m-qs>div{font-size:14px;font-weight:500;color:var(--navy)}

/* Body sections */
.m-sec{padding:24px 28px;border-bottom:1px solid #eef2f5}
.m-sec:last-child{border-bottom:none}
.m-sec-t{font-family:var(--serif);font-size:22px;font-weight:400;color:var(--navy);margin-bottom:16px;letter-spacing:-.3px}
.m-sec-desc .m-sec-t{font-size:17px}
.m-dg{display:grid;grid-template-columns:1fr 1fr;gap:0}
.mdi{padding:13px 0;border-bottom:1px solid #f1f4f7;display:flex;justify-content:space-between;align-items:center;gap:12px;transition:padding-left .15s}
.mdi:hover{padding-left:6px;background:linear-gradient(to right,#f0f7f5 0%,transparent 50%)}
.m-dg .mdi:nth-last-child(1),.m-dg .mdi:nth-last-child(2){border-bottom:none}
.mdi-l{font-size:13.5px;color:var(--mid);font-weight:500}
.mdi-v{font-size:13.5px;font-weight:600;color:var(--navy);text-align:right}

/* Amenities (condos.ca shows them with icons in 2-col) */
.ac-wrap{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px}
.ac{display:flex;align-items:center;gap:10px;font-size:13.5px;color:var(--navy);padding:0;background:transparent;border:none;border-radius:0}
.ac-ico{width:28px;height:28px;flex-shrink:0;border-radius:50%;background:var(--off);display:flex;align-items:center;justify-content:center}
.ac-ico svg{width:15px;height:15px;stroke:var(--navy);fill:none;stroke-width:1.8}

.m-remarks{font-size:14px;color:var(--text);line-height:1.7;white-space:pre-wrap}
/* v17 Fix 4: description read-more clamp (4 lines on mobile, 6 on desktop). */
.m-remarks.m-remarks-clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}
@media (min-width:769px){.m-remarks.m-remarks-clamp{-webkit-line-clamp:6}}
.m-remarks.m-remarks-open{display:block;-webkit-line-clamp:unset;overflow:visible}
.m-remarks-more{margin-top:8px;background:transparent;border:none;color:#EA0649;font-size:13.5px;font-weight:600;cursor:pointer;padding:6px 0;font-family:inherit;letter-spacing:-.1px;min-height:36px}
.m-remarks-more:hover{color:#CE2C44;text-decoration:underline}
.m-remarks-more:focus-visible{outline:2px solid #EA0649;outline-offset:3px;border-radius:4px}

/* v17 Fix 4: ROOMS TABLE with ft/m toggle. */
.m-sec-hdr{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.m-sec-hdr .m-sec-t{margin-bottom:0}
.m-rooms-units{display:inline-flex;background:#f4f6f8;border-radius:99px;padding:3px;flex-shrink:0}
.m-rooms-unit{padding:6px 14px;background:transparent;border:none;color:#5a6e84;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;border-radius:99px;min-width:38px;min-height:32px;line-height:1;transition:background .15s,color .15s}
.m-rooms-unit:hover{color:#0c1f38}
.m-rooms-unit.on{background:#0c1f38;color:#fff}
.m-rooms-unit:focus-visible{outline:2px solid #EA0649;outline-offset:2px}
.m-rooms-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #eef2f5;border-radius:10px}
.m-rooms-table{width:100%;border-collapse:collapse;font-size:13px;color:#0c1f38}
.m-rooms-table th{text-align:left;padding:10px 12px;background:#f7fafa;font-weight:600;color:#5a6e84;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #eef2f5;white-space:nowrap}
.m-rooms-table td{padding:10px 12px;border-bottom:1px solid #f0f3f6;vertical-align:top}
.m-rooms-table tr:last-child td{border-bottom:none}
.m-rooms-table .m-rooms-dim{font-feature-settings:"tnum" 1;white-space:nowrap;color:#0c1f38;font-weight:600}
.m-rooms-empty{text-align:center;color:#788a9d;padding:24px 16px !important;font-size:13px;line-height:1.5}
.m-rooms-empty em{font-style:normal;display:block;margin-top:4px;font-size:11.5px;color:#94a3b8}

/* v17 Fix 4: DESKTOP SPLIT LAYOUT — gallery left, key info right (Condos.ca pattern).
   At ≥1024px the listing modal flips from single-column to a 2-column grid for
   the gallery + the topmost info sections; everything else stays full-width below. */
@media (min-width:1024px){
  .m-modal-inner,
  .m-body{max-width:1240px;margin-left:auto;margin-right:auto}
  .m-gallery{height:600px}
  .m-body{padding-left:24px;padding-right:24px;padding-bottom:96px}
}

/* Listed by block */
.m-listed-by-row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.m-listed-by-office{font-size:12px;color:var(--mid);text-transform:uppercase;letter-spacing:.5px}
.m-listed-by-mls{font-size:12px;color:var(--mid);margin-top:4px}

/* v313 — Pattern A1 (prominent BROKERAGE card) and Pattern B (buyer-rep
   agent block) were removed per Scott's final spec. Only .m-broker-meta
   is still used (small grey lines under the A2 row for the data-updated
   timestamp + TRREB attribution). */
.m-broker-meta{font-size:11.5px;color:var(--mid)}

/* v313 — Pattern A2: inline Broker · MLS®# row, condos.ca style.
   Sits directly under the description / Read more block. */
.m-broker-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid #eef2f5;
  font-size:13px;color:#64748b;font-weight:400;line-height:1.5}
.m-broker-row-l{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.m-broker-row-r{flex:0 0 auto;color:#475569}
.m-broker-row-r sup{font-size:9px;vertical-align:super}
@media(max-width:600px){
  .m-broker-row{flex-direction:column;align-items:flex-start;gap:4px}
  .m-broker-row-l{white-space:normal}
}

/* v313 — Read more toggle for description */
.m-about-readmore-wrap{position:relative}
.m-about-readmore-wrap .m-about-txt{
  display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
  overflow:hidden;
}
.m-about-readmore-wrap.expanded .m-about-txt{
  display:block;-webkit-line-clamp:unset;overflow:visible;
}
.m-about-readmore{display:inline-block;margin-top:8px;background:none;border:0;padding:0;
  color:#EA0649;font:600 13px/1.4 inherit;cursor:pointer;letter-spacing:.1px}
.m-about-readmore:hover{text-decoration:underline}

/* v313 — Pattern B agent-card CSS removed (no agent block in the right
   rail per Scott's final spec). The bare .v303-cta-primary / -secondary /
   -link classes already handle the right-rail CTA stack. */

/* About section */
.m-about-sec{padding-bottom:90px}
.m-about-txt{font-size:14px;color:var(--text);line-height:1.7}

/* Sticky bottom CTA bar (condos.ca style) */
.m-cta{position:sticky;bottom:0;left:0;right:0;padding:14px 18px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid #eef2f5;background:rgba(255,255,255,.98);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-shrink:0;display:grid;grid-template-columns:1.2fr 1fr 56px;gap:10px;z-index:10;box-shadow:0 -6px 20px rgba(11,37,69,.1)}
.cta{padding:14px;border-radius:var(--rlg);font-size:14px;font-weight:600;cursor:pointer;border:none;font-family:var(--sans);transition:all .15s;text-align:center;display:flex;align-items:center;justify-content:center;gap:4px;width:100%}
/* v=430k — Item 152: slate-blue (was teal). */
.cta-p{background:#4b94ba;color:#fff;border:none;box-shadow:0 3px 10px rgba(75,148,186,.30);transition:all .18s cubic-bezier(.2,.8,.2,1)}
.cta-p:hover{background:#1e7ea0;box-shadow:0 5px 14px rgba(75,148,186,.36)}
.cta-p:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 5px 16px rgba(184,20,66,.4)}
.cta-p:hover{background:var(--teal2)}
.cta-s{background:var(--white);color:var(--navy);border:1.5px solid #cbd5d1;transition:all .18s cubic-bezier(.2,.8,.2,1)}
.cta-s:hover{background:#f0f7f5;border-color:#EA0649;color:#EA0649;transform:translateY(-1px)}
.cta-icon{background:var(--white);border:1.5px solid #cbd5d1;color:var(--navy);display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;transition:all .18s;padding:0}
.cta-icon:hover{background:#fef0f1;border-color:#e02a3c;color:#e02a3c;transform:translateY(-1px)}
.cta-icon.on{color:#e02a3c;background:#fef0f1;border-color:#e02a3c}
.cta-icon svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2}
.cta-icon.on svg{fill:currentColor}
.cta-s:hover{background:var(--off);border-color:var(--navy)}

/* ── LEAD FORM — PropertyHub brand style, conversion-optimized ── */
.lm-ov{position:fixed;inset:0;background:rgba(12,31,56,.72);backdrop-filter:blur(6px);z-index:9000;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .2s}

/* ═══════════════════════════════════════════════════════════════════ */
/* NEIGHBORHOOD LANDING PAGE — premium per-area experience */
/* ═══════════════════════════════════════════════════════════════════ */
.nb-hero{position:relative;min-height:440px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#0c1f38}
.nb-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;z-index:0}
.nb-hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,31,56,.45) 0%,rgba(12,31,56,.92) 100%)}
.nb-hero-inner{position:relative;z-index:2;max-width:1280px;width:100%;margin:0 auto;padding:80px 24px 40px}
.nb-hero-back{display:inline-block;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.85);cursor:pointer;margin-bottom:28px;transition:opacity .15s;letter-spacing:-.1px}
.nb-hero-back:hover{opacity:.7}
/* Breadcrumb-style nav at top of building/neighborhood hero — sticky on scroll */
.nb-crumbs{display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:28px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:99px;padding:7px 16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:background .2s}
.nb-crumb-current{color:#fff;font-weight:600;cursor:default}
.nb-crumb-current:hover{color:#fff}
/* Sticky version when scrolling past hero (uses position:fixed for cross-browser) */
/* v8 Bug 1: stuck breadcrumb pill positions BELOW the fixed nav, not over it.
   v9 Bug 1: + force display:none unless body has .show-stuck-crumb class set
   by the scroll handler. So even if a stale clone leaks into the DOM (race
   condition or stuck reference), the pill is HIDDEN by default at the CSS layer. */
.nb-crumbs-stuck{display:none;position:fixed;top:calc(var(--navh,56px) + 8px);left:50%;transform:translateX(-50%);z-index:480;background:rgba(12,31,56,.95);border-color:rgba(255,255,255,.2);box-shadow:0 6px 20px rgba(0,0,0,.25);margin:0;animation:crumbDrop .25s cubic-bezier(.2,.8,.2,1);max-width:calc(100% - 24px)}
body.show-stuck-crumb .nb-crumbs-stuck{display:inline-flex}
@keyframes crumbDrop{from{opacity:0;transform:translate(-50%,-12px)}to{opacity:1;transform:translate(-50%,0)}}
.nb-crumb{font-size:13px;font-weight:600;color:rgba(255,255,255,.85);cursor:pointer;transition:color .15s;letter-spacing:-.1px;display:inline-flex;align-items:center;text-decoration:none}
.nb-crumb:hover{color:#e37f9b}
.nb-crumb-sep{color:rgba(255,255,255,.3);font-size:13px;font-weight:300}
@media(max-width:768px){
  .nb-crumbs{padding:6px 12px;gap:6px;font-size:12px}
  .nb-crumb{font-size:12px}
  .nb-crumb svg{width:11px!important;height:11px!important;margin-right:3px!important}
}
.nb-hero-eyebrow{font-size:11.5px;font-weight:700;color:#e37f9b;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:10px}
.nb-hero-title{font-family:var(--serif);font-size:54px;font-weight:400;color:#fff;line-height:1.05;letter-spacing:-1px;margin:0 0 14px;max-width:780px}
.nb-hero-sub{font-size:16px;color:rgba(255,255,255,.85);line-height:1.55;max-width:680px;margin-bottom:32px}
.nb-hero-stats{display:flex;flex-wrap:wrap;gap:32px}
.nb-hero-stat-num{font-family:var(--serif);font-size:30px;font-weight:400;color:#fff;line-height:1;margin-bottom:4px;letter-spacing:-.4px}
.nb-hero-stat-lbl{font-size:11.5px;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.8px;font-weight:600}

/* Neighborhood section shell */
.nb-section{padding:64px 0;background:#fff}
.nb-section-alt{background:#f8fbfa}
.nb-container{max-width:1280px;margin:0 auto;padding:0 24px}
.nb-sec-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;gap:20px;flex-wrap:wrap}
.nb-eyebrow{font-size:11.5px;font-weight:700;color:#EA0649;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.nb-title{font-family:var(--serif);font-size:32px;font-weight:400;color:#0c1f38;line-height:1.1;letter-spacing:-.5px;margin:0}
.nb-link{font-size:14px;font-weight:600;color:#EA0649;cursor:pointer;text-decoration:none;transition:opacity .15s;white-space:nowrap}
.nb-link:hover{opacity:.7}

/* Chart toggle pills */
.nb-chart-toggle{display:inline-flex;background:#f4f6f8;border-radius:10px;padding:4px;gap:0}
.nb-toggle-btn{padding:8px 16px;border:none;background:transparent;font-size:13px;font-weight:600;color:#475569;cursor:pointer;border-radius:7px;font-family:inherit;transition:all .15s}
.nb-toggle-btn.on{background:#fff;color:#EA0649;box-shadow:0 1px 3px rgba(11,37,69,.12)}

/* Chart container */
.nb-chart-wrap{background:#fff;border:1px solid #eef2f5;border-radius:14px;padding:28px;min-height:340px;position:relative}
.nb-chart-svg{width:100%;height:300px;display:block}
.nb-chart-empty{text-align:center;padding:80px 20px;color:#64748b;font-size:14px}
.nb-chart-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:0 4px;flex-wrap:wrap;gap:10px}
.nb-chart-summary{font-size:12.5px;color:#64748b;font-weight:500}

/* Listings grid in neighborhood view */
.nb-listings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}

/* CTA section */
.nb-cta-section{padding:48px 0 80px;background:#fff}
.nb-cta-card{background:linear-gradient(135deg,#0c1f38,#162845);color:#fff;border-radius:18px;padding:48px 44px;text-align:center;position:relative;overflow:hidden}
/* v7 Bug 8: REMOVED the decorative 400×400 radial-gradient circle that bled
   outside .nb-cta-card upward and showed as a "curvy thing" under the navy header.
   The card now has a clean edge with no soft glow leaking out. */
.nb-cta-eyebrow{font-size:11.5px;font-weight:700;color:#e37f9b;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;position:relative}
.nb-cta-title{font-family:var(--serif);font-size:34px;font-weight:400;line-height:1.1;letter-spacing:-.5px;margin:0 0 14px;position:relative}
.nb-cta-sub{font-size:15px;color:rgba(255,255,255,.85);line-height:1.55;max-width:560px;margin:0 auto 28px;position:relative}
.nb-cta-buttons{display:inline-flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative}
.nb-cta-btn{padding:13px 28px;border:none;border-radius:9px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s cubic-bezier(.2,.8,.2,1);letter-spacing:-.1px}
.nb-cta-btn-p{background:#EA0649;color:#fff;box-shadow:0 4px 14px rgba(184,20,66,.4)}
.nb-cta-btn-p:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,20,66,.5)}
.nb-cta-btn-s{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.25)}
.nb-cta-btn-s:hover{background:rgba(255,255,255,.2);transform:translateY(-1px)}

/* Mobile */
@media(max-width:768px){
  .nb-hero{min-height:360px}
  .nb-hero-inner{padding:60px 16px 32px}
  .nb-hero-title{font-size:36px}
  .nb-hero-sub{font-size:14.5px}
  .nb-hero-stats{gap:20px}
  .nb-hero-stat-num{font-size:24px}
  .nb-section{padding:40px 0}
  .nb-container{padding:0 16px}
  .nb-title{font-size:24px}
  .nb-cta-card{padding:36px 24px}
  .nb-cta-title{font-size:26px}
  .nb-chart-wrap{padding:18px}
  .nb-listings-grid{grid-template-columns:1fr 1fr;gap:12px}
}
@media(max-width:480px){
  .nb-listings-grid{grid-template-columns:1fr}
}

/* ═══════════ COMPARE LISTINGS — full-width sticky drawer + comparison modal ═══════════ */
/* v424-compare-elite: redesigned as a full-width bottom drawer matching
   condos.ca exactly. Collapsible handle at the top, label + actions on a
   summary row, horizontal scrolling thumbnail row below. White surface
   with a single navy CTA — premium, not the navy-pill utility we had. */
/* v=426 — desktop cmp-bar: pulled in from right edge by 240px so the
   right-side map controls (Clear Map Bounds, layers, draw, areas) stay
   accessible while the drawer is open. Mobile override below restores
   full-width with rounded corners. visibility:hidden when not .open
   prevents stale renders of an empty "Compare 0" handle. */
.cmp-bar{position:fixed;left:0;right:240px;bottom:0;z-index:600;background:#fff;color:#0c1f38;border-top:1px solid #e6ebf0;box-shadow:0 -8px 28px rgba(11,31,56,.12);transform:translateY(calc(100% + 8px));transition:transform .28s cubic-bezier(.2,.8,.2,1);max-width:none;width:auto;border-radius:0;padding:0}
.cmp-bar:not(.open){visibility:hidden;pointer-events:none}
.cmp-bar.open{transform:translateY(0);visibility:visible;pointer-events:auto}
.cmp-bar.cmp-bar-collapsed .cmp-bar-inner,
.cmp-bar.cmp-bar-collapsed .cmp-bar-thumbs{display:none}
.cmp-bar.cmp-bar-collapsed .cmp-bar-handle-chev{transform:rotate(180deg)}
/* v=429ab — Item 96a: Compare drawer top stripe in dark purple per
   Scott's condos.ca reference. The collapsible handle that shows
   "Compare 1 ▼" sits above the white panel. */
.cmp-bar-handle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#7c2d8e;color:#fff;border:none;padding:9px 16px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:600;letter-spacing:.2px;transition:background .15s}
.cmp-bar-handle:hover{background:#651f74}
.cmp-bar-handle-lbl{display:inline-flex;align-items:center;gap:6px}
.cmp-bar-handle-lbl span{font-weight:700}
.cmp-bar-handle-chev{width:14px;height:14px;transition:transform .2s}
.cmp-bar-inner{display:flex;align-items:center;gap:14px;padding:14px 24px;border-bottom:1px solid #eef2f5}
.cmp-bar-label{flex:1;font-size:14px;font-weight:500;color:#0c1f38;line-height:1.3}
.cmp-bar-label span{color:#EA0649;font-weight:700}
.cmp-bar-actions{display:flex;gap:10px;flex-shrink:0}
.cmp-bar-clear{background:transparent;color:#0c1f38;border:none;padding:9px 14px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;text-decoration:underline}
.cmp-bar-clear:hover{color:#EA0649}
.cmp-bar-go{background:#0c1f38;color:#fff;border:none;padding:10px 22px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.2px;transition:all .15s}
.cmp-bar-go:hover:not(:disabled){background:#152d4a;transform:translateY(-1px)}
.cmp-bar-go:disabled{opacity:.45;cursor:not-allowed;transform:none}
.cmp-bar-thumbs{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:14px 24px;scroll-behavior:smooth}
.cmp-bar-thumbs::-webkit-scrollbar{height:6px}
.cmp-bar-thumbs::-webkit-scrollbar-thumb{background:#cbd5dc;border-radius:3px}
.cmp-bar-card{flex:0 0 220px;background:#fff;border:1px solid #e8edf2;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.cmp-bar-card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(11,31,56,.08)}
.cmp-bar-card-empty{flex:0 0 180px;justify-content:center;align-items:center;min-height:96px;background:#f5f7f9;color:#9aa6b0;font-size:11px;position:relative}
.cmp-bar-card-img{width:100%;height:80px;background-size:cover;background-position:center;background-color:#e5e7eb;position:relative}
.cmp-bar-card-x{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.95);border:none;cursor:pointer;font-size:15px;line-height:1;color:#0c1f38;display:flex;align-items:center;justify-content:center;font-weight:600;padding:0;box-shadow:0 1px 3px rgba(11,37,69,.18)}
.cmp-bar-card-x:hover{background:#fff;transform:scale(1.08)}
.cmp-bar-card-body{padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.cmp-bar-card-price{font-size:13px;font-weight:700;color:#0c1f38;letter-spacing:-.2px}
.cmp-bar-card-addr{font-size:11.5px;color:#64748b;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Push the mobile bottom-tabs above the drawer when it's open so they don't overlap. */
body.cmp-tray-open .bot-tabs{transform:translateY(0)}

.cmp-ov{position:fixed;inset:0;background:rgba(12,31,56,.78);backdrop-filter:blur(8px);z-index:9100;display:none;align-items:center;justify-content:center;padding:20px}
.cmp-ov.open{display:flex}
/* v134: scope the modal-card styling to .cmp-ov so it overrides the legacy
   line-698 .cmp-modal rule that was making the modal invisible
   (opacity:0;pointer-events:none with no .open trigger). */
.cmp-ov .cmp-modal{position:relative;inset:auto;background:#fff !important;border-radius:18px;max-width:1200px;width:100%;max-height:92vh;overflow:hidden;display:flex !important;flex-direction:column;box-shadow:0 30px 80px rgba(0,0,0,.4);opacity:1 !important;pointer-events:auto !important;backdrop-filter:none !important}
.cmp-hdr{padding:20px 24px;border-bottom:1px solid #eef2f5;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.cmp-title{font-family:var(--serif);font-size:24px;font-weight:400;color:#0c1f38;letter-spacing:-.4px;margin:0}
.cmp-body{flex:1;overflow:auto;padding:20px 24px}
.cmp-grid{display:grid;gap:14px;align-items:start}
.cmp-col{background:#fff;border:1px solid #eef2f5;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.cmp-col-img{width:100%;height:160px;background-size:cover;background-position:center;background-color:#e5e7eb}
.cmp-col-body{padding:14px}
.cmp-col-price{font-size:22px;font-weight:700;color:#0c1f38;margin-bottom:4px;letter-spacing:-.4px}
.cmp-col-addr{font-size:13.5px;color:#0c1f38;margin-bottom:14px;line-height:1.3}
.cmp-stat-row{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f1f4f7;font-size:13px}
.cmp-stat-row:last-child{border-bottom:none}
.cmp-stat-l{color:#64748b;font-weight:500}
.cmp-stat-v{color:#0c1f38;font-weight:600;text-align:right}
.cmp-col-cta{margin-top:14px;padding:10px 16px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;width:100%;transition:all .15s}
.cmp-col-cta:hover{background:#EA0649}
.cmp-empty{text-align:center;padding:60px 20px;color:#64748b}

/* v134: condos.ca-style sectioned compare layout — photo cards at top, then
   grouped attribute rows under "Listing", "Building", "Neighbourhood" sections.
   Each row has a left label column + N value columns, perfectly aligned. */
.cmp-cards-grid{display:grid;gap:16px;align-items:stretch;margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid #eef2f5;position:sticky;top:0;z-index:5;background:#fff;padding-top:16px}
/* v=429d — Item 62: column headers stick to the top of the Compare modal
   while the user scrolls down through attribute rows so they can keep track
   of which column is which. Background goes solid white so rows scrolling
   underneath don't bleed through. */
.cmp-cards-spacer{display:block}
.cmp-card{background:#fff;border:1px solid #e8edf2;border-radius:14px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s, box-shadow .15s}
.cmp-card:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(11,37,69,.10)}
.cmp-card-img{width:100%;height:140px;background-size:cover;background-position:center;background-color:#e5e7eb;position:relative}
.cmp-card-badge{position:absolute;top:10px;left:10px;background:#0c1f38;color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:4px;letter-spacing:.4px}
.cmp-card-x{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.92);border:none;cursor:pointer;font-size:18px;line-height:1;color:#0c1f38;display:flex;align-items:center;justify-content:center;font-weight:600;padding:0;transition:background .15s,transform .15s;box-shadow:0 1px 3px rgba(11,37,69,.12)}
.cmp-card-x:hover{background:#fff;transform:scale(1.06)}
.cmp-card-body{padding:14px;display:flex;flex-direction:column;flex:1;gap:6px}
.cmp-card-price{font-size:20px;font-weight:700;color:#EA0649;letter-spacing:-.3px;line-height:1.1}
.cmp-card-addr{font-size:13.5px;color:#0c1f38;line-height:1.35;cursor:pointer;text-decoration:none}
.cmp-card-addr:hover{text-decoration:underline;color:#EA0649}
.cmp-card-cta-row{display:flex;flex-direction:column;gap:6px;margin-top:auto;padding-top:10px}
.cmp-card-cta{padding:9px 12px;background:#EA0649;color:#fff;border:none;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s}
.cmp-card-cta:hover{background:#CE2C44}
.cmp-card-cta-alt{padding:9px 12px;background:#fff;color:#0c1f38;border:1.5px solid #e0e6ec;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.cmp-card-cta-alt:hover{border-color:#EA0649;color:#EA0649}

.cmp-section{margin-bottom:28px}
.cmp-section-title{font-family:var(--serif),Georgia,serif;font-size:22px;font-weight:500;color:#0c1f38;margin:0 0 14px;letter-spacing:-.3px;padding-bottom:10px;border-bottom:2px solid #EA0649;display:inline-block}
.cmp-rows{display:flex;flex-direction:column}
.cmp-row{display:grid;grid-template-columns:200px repeat(var(--cmp-cols,2), minmax(0,1fr));gap:16px;padding:11px 0;border-bottom:1px solid #f1f4f7;align-items:start}
.cmp-row:last-child{border-bottom:none}
.cmp-row-l{font-size:13.5px;color:#64748b;font-weight:500;line-height:1.4}
.cmp-row-v{font-size:14px;color:#0c1f38;font-weight:500;line-height:1.4;word-wrap:break-word;min-width:0}
.cmp-yes{display:inline-flex;align-items:center;gap:5px;color:#EA0649;font-weight:600}
.cmp-yes::before{content:'✓';font-weight:700}
.cmp-no{color:#94a3b8}

/* v135 / v138: Contact card on the compare modal — high-conversion lead gen.
   Top placement so users see it as soon as the modal opens. */
.cmp-contact-card{margin-top:0;margin-bottom:24px;padding:24px 28px;background:linear-gradient(135deg,#0c1f38 0%,#13315c 100%);border-radius:16px;color:#fff;display:flex;flex-direction:column;gap:10px;position:relative;overflow:hidden}
.cmp-contact-card-top{margin-top:0;margin-bottom:24px}
.cmp-contact-card::before{content:'';position:absolute;top:-40px;right:-40px;width:200px;height:200px;background:radial-gradient(circle, rgba(158,13,54,.18) 0%, transparent 70%);pointer-events:none}
.cmp-contact-eyebrow{font-size:11.5px;font-weight:700;color:#e37f9b;text-transform:uppercase;letter-spacing:1.5px}
.cmp-contact-title{font-family:var(--serif),Georgia,serif;font-size:22px;font-weight:500;color:#fff;margin:0;letter-spacing:-.3px;line-height:1.2}
.cmp-contact-sub{font-size:14px;color:rgba(255,255,255,.78);line-height:1.5;margin:0 0 8px;max-width:580px}
.cmp-contact-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}
.cmp-contact-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:9px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;border:1.5px solid transparent}
.cmp-contact-btn-primary{background:#EA0649;color:#fff}
.cmp-contact-btn-primary:hover{background:#CE2C44;transform:translateY(-1px);box-shadow:0 6px 18px rgba(158,13,54,.4)}
.cmp-contact-btn-secondary{background:transparent;color:#fff;border-color:rgba(255,255,255,.3)}
.cmp-contact-btn-secondary:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.5)}
.cmp-contact-trust{font-size:12.5px;color:rgba(255,255,255,.6);margin-top:6px}
@media(max-width:768px){
  .cmp-contact-card{padding:22px 20px}
  .cmp-contact-title{font-size:19px}
  .cmp-contact-actions{flex-direction:column}
  .cmp-contact-btn{width:100%;justify-content:center}
}

.cmp-foot{margin-top:24px;padding-top:20px;border-top:1px solid #eef2f5;display:flex;justify-content:flex-end;gap:10px}
.cmp-share-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;background:#fff;color:#0c1f38;border:1.5px solid #e0e6ec;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.cmp-share-btn:hover{border-color:#EA0649;color:#EA0649}

@media(max-width:768px){
  .cmp-cards-grid{grid-template-columns:repeat(var(--cmp-cols,2),minmax(0,1fr)) !important}
  .cmp-cards-spacer{display:none}
  .cmp-row{grid-template-columns:repeat(var(--cmp-cols,2), minmax(0,1fr)) !important; padding-top:18px}
  .cmp-row::before{content:attr(data-label);grid-column:1 / -1;font-size:12px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:-6px}
  .cmp-row-l{display:none}
  .cmp-section-title{font-size:19px}
}

/* Compare button on cards — v41: text-only.
   User found every icon variant ambiguous (looked like music notes / equalizer
   bars / hamburger). Decision: kill the icon, keep the feature, use a clear
   text-pill button. Brand-teal outline by default, subtle teal fill when added.
   Compact pill (12px font / 28px tap height) — works on every card surface
   (home Featured / Recently Viewed / search results / building units /
   similar listings). */
.card-cmp-btn{
  position:absolute;
  bottom:8px;
  left:8px;
  background:rgba(255,255,255,.95);
  color:#EA0649;                 /* brand-teal text */
  border:1.5px solid rgba(158,13,54,.35);
  padding:5px 10px;
  border-radius:99px;             /* pill — discrete action chip */
  font-size:12px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  z-index:5;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  transition:background .15s, color .15s, border-color .15s, box-shadow .15s, transform .12s;
  font-family:inherit;
  letter-spacing:-.05px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.card-cmp-btn:hover{
  background:#fff;
  color:#EA0649;
  border-color:#EA0649;
  box-shadow:0 3px 10px rgba(158,13,54,.18);
}
.card-cmp-btn:active{ transform:scale(.97) }
.card-cmp-btn.on{
  background:#EA0649;
  color:#fff;
  border-color:#EA0649;
  box-shadow:0 2px 8px rgba(158,13,54,.32);
}
.card-cmp-btn.on:hover{ background:#CE2C44; border-color:#CE2C44 }
/* v=429d — the +/✓ glyph now lives in the button's textContent itself
   ("+ Compare" / "✓ Added") so the JS state-sync paths can flip it in
   one assignment. The old ::before pseudo doubled the prefix once the
   template added a literal one. */
.card-cmp-btn::before{ content: none }

/* Recently Viewed homepage section uses .hp-* styles already defined */

@media(max-width:768px){
  .cmp-bar{left:8px;right:8px;transform:none;max-width:none;border-radius:12px;padding:10px 12px}
  .cmp-bar.open{bottom:96px}
  .cmp-bar-thumbs{display:none}
  .cmp-bar-label{font-size:12px}
  .cmp-modal{max-height:96vh}
  .cmp-grid{grid-template-columns:1fr!important}
}

/* ═══════════════════════════════════════════════════════════════════ */
/* BUILDING LANDING PAGE — billion-$ per-building experience */
/* ═══════════════════════════════════════════════════════════════════ */
.bldg-hero{min-height:420px}

/* v18 Fix 2: Building view sub-tabs (For Sale / For Rent / Sold) */
.bldg-tabs{display:flex;gap:8px;margin:0 0 16px;background:#fff;padding:5px;border-radius:99px;border:1px solid #e5e9ee;box-shadow:0 2px 6px rgba(11,37,69,.06);width:fit-content}
.bldg-tab{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;background:transparent;color:#5a6e84;border:none;border-radius:99px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:-.1px;min-height:40px;transition:background .12s,color .12s}
.bldg-tab:hover{color:#0c1f38}
.bldg-tab.on{background:#0c1f38;color:#fff;box-shadow:0 2px 6px rgba(11,37,69,.18)}
.bldg-tab-count{font-size:11.5px;font-weight:700;background:rgba(255,255,255,.18);color:inherit;padding:2px 8px;border-radius:99px;font-feature-settings:"tnum" 1;min-width:22px;text-align:center}
.bldg-tab:not(.on) .bldg-tab-count{background:#f0f3f6;color:#5a6e84}
.bldg-tab-empty{padding:48px 18px;text-align:center;color:#788a9d;font-size:14px;background:#fff;border:1px dashed #e5e9ee;border-radius:12px}

/* ═══════════════════════════════════════════════════════════════════
   v22 Building-page enhancements (Condos.ca / Strata.ca pattern)
   All values are mock data — see TODO markers in JS.
   ═══════════════════════════════════════════════════════════════════ */
.bldg-hero-mgmt{font-size:13px;color:rgba(255,255,255,.78);margin-top:8px;font-weight:500;letter-spacing:.1px}
.bldg-hero-mgmt[hidden]{display:none}
.v22-bldg-sec .nb-sec-hdr{align-items:center}
/* Fix 1: Household Composition */
.v22-house-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:680px){.v22-house-grid{grid-template-columns:repeat(2,1fr)}}
.v22-house-card{padding:18px 14px;background:#fff;border:1px solid #e5e9ee;border-radius:14px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.v22-house-pct{width:54px;height:54px;border-radius:50%;background:#faf0f3;color:#EA0649;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14.5px;font-feature-settings:"tnum" 1;border:3px solid #EA0649}
.v22-house-lbl{font-size:12.5px;color:#0c1f38;font-weight:600;line-height:1.3;margin-top:4px}
.v22-house-sub{font-size:11px;color:#788a9d;line-height:1.3}
.v22-house-more{display:inline-block;margin-top:14px;color:#EA0649;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none}
.v22-house-more:hover{text-decoration:underline}
.v22-house-more-body{margin-top:14px;padding:14px 16px;background:#f7fafa;border-radius:12px;font-size:13px;color:#475569;line-height:1.6}
.v22-house-more-body[hidden]{display:none}

/* Fix 2: Nearby Schools table */
/* v=502a-poc-rename — v22-school* → school* (semantic). POC for the
   semantic-classname cleanup. IDs preserved (JS getElementById uses
   them); only class names renamed. */
.schools-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e5e9ee;border-radius:12px;background:#fff}
.schools-table{width:100%;border-collapse:collapse;font-size:13px;color:#0c1f38;min-width:680px}
.schools-table th{text-align:left;padding:11px 14px;background:#f7fafa;font-weight:700;color:#5a6e84;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #eef2f5;white-space:nowrap}
.schools-table td{padding:12px 14px;border-bottom:1px solid #f0f3f6;vertical-align:middle}
.schools-table tr:last-child td{border-bottom:none}
.schools-table .school-name{color:#EA0649;font-weight:600;cursor:pointer}
.schools-table .school-name:hover{text-decoration:underline}
.schools-table .school-rating{font-weight:700;font-feature-settings:"tnum" 1}
.schools-table .school-rating.high{color:#EA0649}
.schools-table .school-rating.mid{color:#d4a24c}
.schools-table .school-rating.low{color:#c0392b}
.schools-table .school-bdy{display:inline-flex;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700;letter-spacing:.3px}
.schools-table .school-bdy.in{background:#faf0f3;color:#EA0649}
.schools-table .school-bdy.out{background:#fef3d9;color:#854f0b}
.schools-more{margin-top:12px;padding:9px 16px;background:transparent;border:1.5px solid #EA0649;color:#EA0649;border-radius:99px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;min-height:38px;transition:background .12s}
.schools-more:hover{background:#faf0f3}
.schools-more[hidden]{display:none}

/* Fix 3: Values & Trends */
.v22-vt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:880px){.v22-vt-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.v22-vt-grid{grid-template-columns:1fr}}
.v22-vt-card{padding:18px 18px 16px;background:#fff;border:1px solid #e5e9ee;border-radius:14px}
.v22-vt-lbl{font-size:11.5px;color:#788a9d;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.v22-vt-val{font-size:24px;color:#0c1f38;font-weight:800;letter-spacing:-.5px;font-feature-settings:"tnum" 1;line-height:1.05}
.v22-vt-val.up{color:#EA0649}
.v22-vt-val.down{color:#c0392b}
.v22-vt-sub{font-size:12px;color:#5a6e84;margin-top:6px;line-height:1.4}

/* Fix 4: Historical chart */
.v22-history-toggle{display:inline-flex;background:#f4f6f8;border-radius:99px;padding:3px}
.v22-htog{padding:7px 16px;border:none;background:transparent;color:#5a6e84;font-size:12.5px;font-weight:600;border-radius:99px;cursor:pointer;font-family:inherit;min-height:32px}
.v22-htog.on{background:#0c1f38;color:#fff}
.v22-history-cmp{margin:14px 0 8px;display:inline-flex;align-items:center;gap:8px;font-size:13px;color:#5a6e84}
.v22-history-cmp select{padding:6px 10px;border:1px solid #e5e9ee;border-radius:8px;font-family:inherit;font-size:13px;color:#0c1f38;background:#fff;-webkit-appearance:none;appearance:none;cursor:pointer;min-height:34px}
.v22-history-wrap{padding:18px;background:#fff;border:1px solid #e5e9ee;border-radius:14px}
.v22-history-svg{width:100%;height:auto;display:block}

/* Fix 5: Comparison strip */
.v22-cmp-strip{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.v22-cmp-strip{grid-template-columns:1fr}}
.v22-cmp-card{padding:18px;background:#fff;border:1px solid #e5e9ee;border-radius:14px}
.v22-cmp-card-lbl{font-size:11.5px;color:#788a9d;font-weight:700;text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px}
.v22-cmp-card-val{font-size:22px;color:#0c1f38;font-weight:800;letter-spacing:-.4px;font-feature-settings:"tnum" 1}
.v22-cmp-card-delta{font-size:13px;color:#EA0649;font-weight:700;margin-left:8px}
.v22-cmp-card-delta.down{color:#c0392b}
.v22-cmp-callout{margin-top:14px;padding:14px 18px;background:#f7fafa;border-left:3px solid #EA0649;border-radius:0 10px 10px 0;font-size:13px;color:#475569;line-height:1.6}

/* Fix 6: Sold & Rented Prices table */
.v22-mix-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid #e5e9ee;border-radius:12px;background:#fff}
.v22-mix-table{width:100%;border-collapse:collapse;font-size:13px;color:#0c1f38;min-width:540px}
.v22-mix-table th{text-align:left;padding:11px 14px;background:#f7fafa;font-weight:700;color:#5a6e84;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #eef2f5}
.v22-mix-table td{padding:12px 14px;border-bottom:1px solid #f0f3f6;font-feature-settings:"tnum" 1}
.v22-mix-table tr:last-child td{border-bottom:none}
.v22-mix-table .v22-mix-type{font-weight:700;color:#0c1f38}
.v22-mix-table .v22-mix-empty{color:#94a3b8;font-style:italic}

/* Fix 8: Nearby listings rail + CTA */
.v22-nearby-go{padding:9px 16px;background:#EA0649;color:#fff;border:none;border-radius:99px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;min-height:38px;transition:background .12s;flex-shrink:0}
.v22-nearby-go:hover{background:#CE2C44}
.v22-nearby-rail{display:flex;gap:12px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 0 14px;scroll-snap-type:x mandatory}
.v22-nearby-rail::-webkit-scrollbar{height:6px}
.v22-nearby-rail::-webkit-scrollbar-thumb{background:#cbd5d1;border-radius:3px}
.v22-nearby-card{flex:0 0 220px;scroll-snap-align:start;background:#fff;border:1px solid #eef2f7;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .15s}
.v22-nearby-card:hover{border-color:#EA0649;box-shadow:0 6px 18px rgba(11,37,69,.1);transform:translateY(-2px)}
.v22-nearby-img{aspect-ratio:16/10;background:#f4f6f8 center/cover}
.v22-nearby-body{padding:9px 12px}
.v22-nearby-price{font-size:14px;font-weight:800;color:#0c1f38;letter-spacing:-.2px}
.v22-nearby-addr{font-size:11.5px;color:#5a6e84;margin-top:2px}
.v22-nearby-meta{font-size:11px;color:#788a9d;margin-top:5px}

/* Fix 9: Building-page SEO footer */
.v22-seo-footer{background:#fafbfc}
.v22-seo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:880px){.v22-seo-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.v22-seo-grid{grid-template-columns:1fr}}
.v22-seo-col{display:flex;flex-direction:column;gap:8px}
.v22-seo-col-t{font-size:12px;color:#0c1f38;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.v22-seo-link{display:block;font-size:13px;color:#5a6e84;text-decoration:none;line-height:1.5;cursor:pointer;padding:3px 0}
.v22-seo-link:hover{color:#EA0649;text-decoration:underline}
@media(max-width:520px){.bldg-tabs{width:100%;justify-content:space-between}.bldg-tab{flex:1;justify-content:center;padding:9px 8px}}

.nb-hero-stats-2{margin-top:8px;opacity:.86;border-top:1px solid rgba(255,255,255,.08);padding-top:14px}
.bldg-hero .nb-hero-bg::after{background:linear-gradient(180deg,rgba(12,31,56,.35) 0%,rgba(12,31,56,.94) 100%)}

/* Notify band — sits between hero and chart */
.bldg-notify-band{padding:24px 0;background:#fff}
.bldg-notify-card{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:24px 28px;background:linear-gradient(135deg,#f0f7f5 0%,#dceee5 100%);border-radius:14px;border:1px solid #cbd5d1;flex-wrap:wrap}
.bldg-notify-info{flex:1;min-width:280px}
.bldg-notify-eyebrow{font-size:11.5px;font-weight:700;color:#EA0649;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px}
.bldg-notify-title{font-family:var(--serif);font-size:22px;font-weight:400;color:#0c1f38;line-height:1.2;letter-spacing:-.3px;margin:0 0 8px}
.bldg-notify-title span{color:#EA0649}
.bldg-notify-sub{font-size:13.5px;color:#475569;line-height:1.5;margin:0;max-width:560px}
.bldg-notify-cta{padding:13px 26px;background:#EA0649;color:#fff;border:none;border-radius:9px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 14px rgba(184,20,66,.3);white-space:nowrap}
.bldg-notify-cta:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,20,66,.4)}

/* Amenities grid */
.bldg-amen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.bldg-amen-item{display:flex;align-items:center;gap:12px;padding:18px 16px;background:#fff;border:1px solid #eef2f5;border-radius:10px;transition:border-color .15s,transform .15s,box-shadow .15s}
.bldg-amen-item:hover{border-color:#EA0649;transform:translateY(-1px);box-shadow:0 4px 14px rgba(184,20,66,.12)}
.bldg-amen-ico{width:38px;height:38px;border-radius:9px;background:#f0f7f5;display:flex;align-items:center;justify-content:center;color:#EA0649;flex-shrink:0}
.bldg-amen-ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.bldg-amen-lbl{font-size:13.5px;font-weight:500;color:#0c1f38}

@media(max-width:768px){
  .bldg-hero{min-height:340px}
  .bldg-notify-card{padding:20px;flex-direction:column;text-align:center;align-items:stretch}
  .bldg-notify-cta{width:100%}
  .bldg-amen-grid{grid-template-columns:1fr 1fr;gap:10px}
}

/* ═══════════════════════════════════════════════════════════════════ */
/* v65 TRUST SIGNALS BAR — answers "is this site legit" right after hero */
/* ═══════════════════════════════════════════════════════════════════ */
.v65-trustbar{background:#fff;border-top:1px solid #eef1f4;border-bottom:1px solid #eef1f4;padding:18px 16px}
.v65-trustbar-inner{max-width:1280px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px}
.v65-trust-item{display:flex;align-items:center;gap:12px;flex:1 1 220px;min-width:0}
.v65-trust-ico{width:26px;height:26px;color:#EA0649;flex-shrink:0}
.v65-trust-ico.v65-trust-star{color:#f5a623}
.v65-trust-text{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.v65-trust-text strong{font-size:13.5px;font-weight:700;color:#0c1f38;letter-spacing:-.1px}
.v65-trust-text span{font-size:11.5px;color:#64748b;font-weight:500;margin-top:2px}
@media (max-width:768px){
  .v65-trustbar{padding:14px 12px}
  .v65-trustbar-inner{gap:12px}
  .v65-trust-item{flex:1 1 calc(50% - 6px);min-width:0}
  .v65-trust-ico{width:22px;height:22px}
  .v65-trust-text strong{font-size:12px}
  .v65-trust-text span{font-size:10.5px}
}

/* ═══════════════════════════════════════════════════════════════════ */
/* v65 SALES INDEX — condos.ca-style $/sqft trend chart */
/* ═══════════════════════════════════════════════════════════════════ */
.v65-salesidx-sec{background:#f8fbfa}
.v65-salesidx-tabs{display:flex;gap:6px;flex-wrap:wrap}
.v65-salesidx-tab{padding:8px 14px;background:#fff;border:1px solid #e2e8f0;border-radius:999px;font-size:12.5px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit;transition:all .15s;letter-spacing:-.1px}
.v65-salesidx-tab:hover{background:#f1f5f9;border-color:#cbd5e1}
.v65-salesidx-tab.on{background:#0c1f38;border-color:#0c1f38;color:#fff}
.v65-salesidx-card{background:#fff;border:1px solid #eef1f4;border-radius:18px;padding:28px 28px 22px;box-shadow:0 2px 16px rgba(12,31,56,.04)}
.v65-salesidx-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-bottom:20px;border-bottom:1px solid #f1f5f9;margin-bottom:18px}
.v65-salesidx-stat{display:flex;flex-direction:column}
.v65-salesidx-stat-num{font-family:var(--serif);font-size:30px;font-weight:400;color:#0c1f38;line-height:1.05;letter-spacing:-.6px;margin-bottom:6px}
.v65-salesidx-stat-num .v65-salesidx-stat-unit{font-size:18px;color:#64748b;font-family:var(--sans);margin-left:2px;font-weight:500}
.v65-salesidx-up{color:#EA0649}
.v65-salesidx-down{color:#dc2626}
.v65-salesidx-stat-lbl{font-size:11.5px;color:#64748b;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.v65-salesidx-chartwrap{position:relative;width:100%}
.v65-salesidx-svg{width:100%;height:180px;display:block}
.v65-salesidx-svg circle{fill:#EA0649;stroke:#fff;stroke-width:2;cursor:pointer;transition:r .15s}
.v65-salesidx-svg circle:hover{r:5}
.v65-salesidx-x{display:flex;justify-content:space-between;margin-top:8px;padding:0 4px;font-size:10.5px;color:#94a3b8;font-weight:500}
.v65-salesidx-foot{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:14px;border-top:1px solid #f1f5f9;font-size:11.5px;color:#94a3b8;flex-wrap:wrap;gap:10px}
.v65-salesidx-foot .hp-link{font-size:12.5px}
@media (max-width:768px){
  .v65-salesidx-card{padding:20px 18px 16px;border-radius:14px}
  .v65-salesidx-stats{grid-template-columns:repeat(2,1fr);gap:14px}
  .v65-salesidx-stat-num{font-size:24px}
  .v65-salesidx-stat-num .v65-salesidx-stat-unit{font-size:14px}
  .v65-salesidx-stat-lbl{font-size:10.5px}
  .v65-salesidx-svg{height:140px}
  .v65-salesidx-tab{padding:7px 12px;font-size:11.5px}
}

/* v65 DOM (Days on Market) badge — under the photo on each listing card */
.v65-dom-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;line-height:1.3;letter-spacing:.1px;flex-shrink:0}
.v65-dom-badge.v65-dom-fast{background:rgba(158,13,54,.10);color:#860d2f}
.v65-dom-badge.v65-dom-avg{background:#f1f5f9;color:#64748b}
.v65-dom-badge.v65-dom-slow{background:rgba(245,166,35,.10);color:#b45309}
.v65-dom-badge svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:2.4;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════════ */
/* HOMEPAGE SECTIONS — billion-$ landing page (below the hero) */
/* ═══════════════════════════════════════════════════════════════════ */
.hp-section{padding:60px 0;background:#fff}
.hp-section:nth-child(even){background:#f8fbfa}

/* v131/v136: condos.ca-style floating action strip — mobile only.
   Map toggle + Create Alert buttons side-by-side. White pills, navy text,
   subtle shadow. Hidden on desktop and when modals/draw/lead overlays open. */
.v131-mobtoggle-wrap{
  display:flex;
  position:fixed;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  z-index:560;
  gap:8px;
  align-items:center;
  pointer-events:auto;
  /* v179: explicitly transparent — was inheriting a white-ish box on iOS */
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0;
  margin:0;
}
/* v175: on mobile, push the floating pills ABOVE the bottom tab bar */
@media(max-width:768px){
  .v131-mobtoggle-wrap{ bottom:calc(76px + env(safe-area-inset-bottom,0px)) !important }
}
/* v175: hide the wrap only on the home page (no in-search class).
   Search view always shows, regardless of subview. */
body:not(.in-search) .v131-mobtoggle-wrap{ display:none !important }
.v131-mobtoggle, .v136-mobalert{
  display:inline-flex;
  align-items:center;
  gap:8px;
  /* v246: navy background, white text — matches the top "Map" button so the
     same action looks the same everywhere. */
  background:#0c1f38;
  color:#fff;
  border:1px solid #0c1f38;
  border-radius:999px;
  padding:11px 18px 11px 16px;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.1px;
  box-shadow:0 8px 24px rgba(11,37,69,.28), 0 2px 6px rgba(11,37,69,.14);
  cursor:pointer;
  font-family:inherit;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  transition:transform .15s, box-shadow .18s, background .15s;
}
.v131-mobtoggle:active, .v136-mobalert:active{ transform:scale(.96) }
.v131-mobtoggle:hover, .v136-mobalert:hover{ background:#13315c; box-shadow:0 12px 32px rgba(11,37,69,.34), 0 4px 8px rgba(11,37,69,.18) }
.v131-mobtoggle svg, .v136-mobalert svg{width:16px;height:16px;flex-shrink:0;color:#EA0649}
/* v184: pill rules — MOBILE ONLY. On desktop the cards + map split-view
   already provides direct navigation, so the floating pills are redundant. */
body.in-search .v131-mobtoggle-wrap{ display:flex !important }
@media(min-width:769px){
  /* v209: aggressive desktop hide — beat any inline styles */
  .v131-mobtoggle-wrap,
  #v131-mobtoggle-wrap{ display:none !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important }
}
/* Default both pills to inline-flex so they always render unless hidden */
.v131-mobtoggle-wrap .v131-mobtoggle{ display:inline-flex !important }
.v131-mobtoggle-wrap .v136-mobalert{ display:inline-flex !important }
/* On listings view → hide the alert pill */
body.in-search:not(.in-fullmap):not(.map-fs) .v131-mobtoggle-wrap .v136-mobalert{ display:none !important }
/* On map view → hide the Map button */
body.in-fullmap .v131-mobtoggle-wrap .v131-mobtoggle,
body.map-fs .v131-mobtoggle-wrap .v131-mobtoggle{ display:none !important }
/* Hide while drawing, while modals are open, while listing detail modal is open */
body.draw-mode-on .v131-mobtoggle-wrap,
body.modal-open .v131-mobtoggle-wrap,
body.in-listing-detail .v131-mobtoggle-wrap,
body.lead-open .v131-mobtoggle-wrap,
body.sort-menu-open .v131-mobtoggle-wrap,
body.fm-open .v131-mobtoggle-wrap{ display:none !important }
/* Lift higher when the applied-bar is visible */
body.draw-applied-on .v131-mobtoggle-wrap{ bottom:96px }

/* v144: Remove the "Join Free" CTA from the top nav — was competing for attention
   with the in-page lead-gen (Create Alert, Talk to a Realtor, signup gates). */
.nav-auth-join, .nav-auth-divider{display:none !important}

/* v167: Create An Area Alert — condos.ca-style modal */
.v167-alert-ov{position:fixed;inset:0;background:rgba(11,37,69,.55);z-index:9100;display:none;align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.v167-alert-ov.open{display:flex}
.v167-alert-modal{background:#fff;border-radius:18px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 24px 80px rgba(11,37,69,.30);display:flex;flex-direction:column}
.v167-alert-hdr{padding:22px 24px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.v167-alert-title{font-family:var(--serif),Georgia,serif;font-size:24px;font-weight:500;color:#0c1f38;margin:0;letter-spacing:-.4px;line-height:1.15}
.v167-alert-x{width:32px;height:32px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:#475569;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s}
.v167-alert-x:hover{background:#f1f5f9;color:#0c1f38}
.v167-alert-criteria{padding:18px 24px;background:#f8fafa;margin:18px 24px 0;border-radius:12px}
.v167-alert-criteria-lbl{font-size:14px;font-weight:600;color:#0c1f38;margin-bottom:10px}
.v167-alert-chips{display:flex;flex-wrap:wrap;gap:8px}
.v167-alert-chip{display:inline-flex;align-items:center;padding:7px 14px;border:1.5px solid #cbd5e1;border-radius:999px;font-size:13px;font-weight:500;color:#0c1f38;background:#fff}
.v167-alert-form{padding:20px 24px 24px;display:flex;flex-direction:column;gap:14px}
.v167-alert-name{padding:14px 16px;border:1.5px solid #e0e6ec;border-radius:10px;font-size:15px;font-family:inherit;color:#0c1f38;background:#fff;outline:none;transition:border-color .15s, box-shadow .15s}
.v167-alert-name:focus{border-color:#EA0649;box-shadow:0 0 0 3px rgba(158,13,54,.15)}
.v167-alert-name::placeholder{color:#94a3b8}
.v167-alert-freq-wrap{position:relative;display:flex;align-items:center;border:1.5px solid #e0e6ec;border-radius:10px;padding:0 14px;background:#fff;transition:border-color .15s}
.v167-alert-freq-wrap:focus-within{border-color:#EA0649;box-shadow:0 0 0 3px rgba(158,13,54,.15)}
.v167-alert-bell{color:#0c1f38;flex-shrink:0;margin-right:10px}
.v167-alert-freq{flex:1;border:none;outline:none;font-size:15px;font-family:inherit;color:#0c1f38;background:transparent;padding:14px 0;-webkit-appearance:none;appearance:none;cursor:pointer}
.v167-alert-chev{color:#475569;flex-shrink:0;pointer-events:none;margin-left:8px}
/* v168: inline "Enter CC email" + Add button (condos.ca pattern) */
.v167-alert-cc-wrap{position:relative;display:flex;align-items:center;border:1.5px solid #e0e6ec;border-radius:10px;padding:0 6px 0 14px;background:#fff;transition:border-color .15s, box-shadow .15s}
.v167-alert-cc-wrap:focus-within{border-color:#EA0649;box-shadow:0 0 0 3px rgba(158,13,54,.15)}
.v167-alert-cc{flex:1;border:none;outline:none;font-size:15px;font-family:inherit;color:#0c1f38;background:transparent;padding:13px 8px 13px 0;-webkit-appearance:none;appearance:none}
.v167-alert-cc::placeholder{color:#94a3b8}
.v167-alert-cc-add{background:transparent;border:none;color:#EA0649;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;padding:8px 12px;flex-shrink:0}
.v167-alert-cc-add:hover{text-decoration:underline}
.v167-alert-recipient{align-self:flex-start;background:transparent;border:none;color:#EA0649;font-size:14px;font-weight:600;cursor:pointer;padding:4px 0;font-family:inherit;text-align:left}
.v167-alert-recipient:hover{text-decoration:underline}
.v167-alert-recipients{display:flex;flex-direction:column;gap:8px}
.v167-alert-recipient-row{display:flex;gap:8px;align-items:center}
.v167-alert-recipient-row input{flex:1;padding:11px 14px;border:1.5px solid #e0e6ec;border-radius:10px;font-size:14px;font-family:inherit;color:#0c1f38;outline:none}
.v167-alert-recipient-row input:focus{border-color:#EA0649;box-shadow:0 0 0 3px rgba(158,13,54,.15)}
.v167-alert-recipient-x{width:28px;height:28px;border-radius:50%;background:#f1f5f9;border:none;cursor:pointer;font-size:18px;color:#475569;line-height:1;flex-shrink:0}
.v167-alert-recipient-x:hover{background:#e2e8f0;color:#0c1f38}
.v167-alert-done{padding:15px;background:#0c1f38;color:#fff;border:none;border-radius:10px;font-size:15.5px;font-weight:600;cursor:pointer;font-family:inherit;letter-spacing:.1px;transition:background .15s, transform .12s;margin-top:6px}
.v167-alert-done:hover{background:#162845;transform:translateY(-1px)}
.v167-alert-done:active{transform:scale(.97)}
.v167-alert-done[disabled]{opacity:.65;cursor:wait;transform:none}
.v167-alert-email{padding:14px 16px;border:1.5px solid #e0e6ec;border-radius:10px;font-size:15px;font-family:inherit;color:#0c1f38;background:#fff;outline:none;transition:border-color .15s, box-shadow .15s}
.v167-alert-email:focus{border-color:#EA0649;box-shadow:0 0 0 3px rgba(158,13,54,.15)}
.v167-alert-email::placeholder{color:#94a3b8}
.v167-alert-status{font-size:13px;color:#475569;min-height:18px;line-height:1.4}
.v167-alert-status.err{color:#dc2626}
.v167-alert-fineprint{font-size:12px;color:#64748b;line-height:1.5;margin-top:4px}

/* v128: TRREB sold-data gate banner — sits above Recently Sold cards on home */
.v128-sold-gate{background:#f4e8eb;border:1px solid #e6c7d0;border-radius:12px;padding:14px 18px;font-size:13.5px;color:#0c1f38;line-height:1.5;max-width:1080px;margin:0 auto 20px}

/* v127: Get insider access — condos.ca-style centered CTA on light teal */
.v127-insider-sec{padding:48px 24px;background:#fff}
.v127-insider-box{max-width:880px;margin:0 auto;background:#f4e8eb;border-radius:16px;padding:48px 32px;text-align:center}
.v127-insider-title{font-family:var(--serif),Georgia,serif;font-size:30px;font-weight:400;color:#0c1f38;margin:0 0 14px;letter-spacing:-.4px}
.v127-insider-sub{font-size:15px;color:#334155;line-height:1.55;max-width:520px;margin:0 auto 24px}
.v127-insider-btn{display:inline-block;background:#EA0649;color:#fff;border:none;border-radius:999px;padding:14px 36px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,transform .15s,box-shadow .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.v127-insider-btn:hover{background:#CE2C44;transform:translateY(-1px);box-shadow:0 6px 20px rgba(158,13,54,.3)}
@media(max-width:768px){
  .v127-insider-sec{padding:32px 16px}
  .v127-insider-box{padding:32px 20px;border-radius:14px}
  .v127-insider-title{font-size:24px}
  .v127-insider-sub{font-size:14px}
  .v127-insider-btn{padding:13px 28px;font-size:14.5px}
}
.hp-container{max-width:1280px;margin:0 auto;padding:0 24px}
.hp-sec-hdr{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:32px;gap:20px;flex-wrap:wrap}
.hp-sec-hdr-c{flex-direction:column;align-items:center;text-align:center;margin-bottom:48px}
.hp-eyebrow{font-size:11.5px;font-weight:700;color:#EA0649;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:8px}
.hp-title{font-family:var(--serif);font-size:36px;font-weight:400;color:#0c1f38;line-height:1.1;letter-spacing:-.6px;margin:0}
.hp-title-sub{font-size:16px;color:#64748b;margin-top:12px;max-width:560px;line-height:1.5}
.hp-link{font-size:14px;font-weight:600;color:#EA0649;cursor:pointer;text-decoration:none;transition:opacity .15s;white-space:nowrap}
.hp-link:hover{opacity:.7}

/* Featured listings row — mini cards */
/* v10: cards now stack vertically as compact horizontal listing cards (Condos.ca pattern).
   Was a multi-column grid of vertical cards; now single-column rows for a cleaner mobile read. */
.hp-cards-row{display:flex;flex-direction:column;gap:12px;max-width:680px;margin:0 auto}
/* v10: COMPACT HORIZONTAL listing card (Condos.ca pattern). Photo left, info right.
   Days-on-site badge overlays bottom-left of photo. Heart top-right of card content.
   Maintenance fee inline with size on its own row. */
.hp-fcard{background:#fff;border:1px solid #eef2f5;border-radius:12px;overflow:hidden;cursor:pointer;transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s,border-color .18s;display:flex;flex-direction:row;position:relative;align-items:stretch}
.hp-fcard:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(11,37,69,.14);border-color:#EA0649}
.hp-fcard-img{flex:0 0 38%;min-width:120px;max-width:160px;background:#e5e7eb;background-size:cover;background-position:center;position:relative;align-self:stretch}
@media (max-width:600px){
  .hp-fcard-img{flex:0 0 36%;min-width:108px}
}
.hp-fcard-badge{position:absolute;top:10px;left:10px;padding:4px 10px;background:#EA0649;color:#fff;font-size:10.5px;font-weight:700;border-radius:4px;text-transform:uppercase;letter-spacing:.4px;box-shadow:0 2px 6px rgba(184,20,66,.3)}
.hp-fcard-badge.featured{background:#e02a3c;box-shadow:0 2px 6px rgba(224,42,60,.3)}
/* v10: days-on-site badge — bottom-left of photo, dark navy, white text, Condos.ca pattern */
.hp-fcard-days{position:absolute;bottom:8px;left:8px;padding:3px 8px;background:rgba(11,37,69,.92);color:#fff;font-size:10.5px;font-weight:600;border-radius:4px;letter-spacing:-.1px;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.hp-fcard-body{flex:1;padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;position:relative}
/* v18 Fix 1: actions row groups Heart + Compare (Condos.ca pattern) */
.hp-fcard-actions{position:absolute;top:10px;right:10px;display:flex;gap:6px;align-items:center;z-index:2}
.hp-fcard-heart,
.hp-fcard-cmp{position:relative !important;top:auto !important;right:auto !important;width:32px;height:32px;border:none;background:rgba(255,255,255,.95);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s, background .12s, color .12s;box-shadow:0 1px 3px rgba(11,37,69,.06)}
.hp-fcard-heart:hover,
.hp-fcard-cmp:hover{transform:scale(1.08);background:#fff}
.hp-fcard-cmp svg{width:16px;height:16px;color:#0c1f38;stroke:currentColor;fill:none}
.hp-fcard-cmp.on{background:#EA0649;color:#fff}
.hp-fcard-cmp.on svg{color:#fff}

.hp-fcard-heart-plain{position:absolute;top:10px;right:10px;width:32px;height:32px;border:none;background:rgba(255,255,255,.95);border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .12s, background .12s;box-shadow:0 1px 3px rgba(11,37,69,.06)}
.hp-fcard-heart-plain:hover{transform:scale(1.08);background:#fff}
.hp-fcard-heart svg{width:16px;height:16px;stroke:#475569;fill:none;stroke-width:2;transition:fill .15s, stroke .15s}
.hp-fcard-heart.on svg{fill:#e02a3c;stroke:#e02a3c}
.hp-fcard-price{font-size:19px;font-weight:700;color:#0c1f38;letter-spacing:-.4px;line-height:1.1;margin:0;padding-right:42px}
.hp-fcard-addr{font-size:12.5px;color:#475569;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:42px}
.hp-fcard-specs{font-size:11.5px;color:#0c1f38;font-weight:500;display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:0}
.hp-fcard-sep{color:#cbd5d1}
/* v10: maintenance fee + size row (Condos.ca pattern: "600-699 sqft | Maint. Fee $997.55") */
.hp-fcard-secondary{font-size:11px;color:#64748b;display:flex;align-items:center;gap:5px;margin:0;flex-wrap:wrap}
.hp-fcard-secondary:empty{display:none}

/* Neighborhoods grid */
.hp-nb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.hp-nb-card{position:relative;height:240px;border-radius:16px;overflow:hidden;cursor:pointer;background-size:cover;background-position:center;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;-webkit-tap-highlight-color:transparent}
.hp-nb-card::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,31,56,0) 35%,rgba(11,31,56,.85) 100%);transition:background .3s ease}
.hp-nb-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(11,37,69,.28)}
.hp-nb-card:hover::after{background:linear-gradient(180deg,rgba(11,31,56,.10) 25%,rgba(11,31,56,.92) 100%)}
.hp-nb-info{position:absolute;bottom:0;left:0;right:0;padding:22px 22px 20px;color:#fff;z-index:1}
.hp-nb-name{font-family:var(--serif);font-size:26px;font-weight:400;letter-spacing:-.5px;line-height:1.1;margin-bottom:4px;text-shadow:0 1px 12px rgba(0,0,0,.25)}
.hp-nb-meta{font-size:13px;color:rgba(255,255,255,.92);font-weight:500;letter-spacing:.1px}

/* Lead bands — Sellers + Buyers */
.hp-leadband-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.hp-leadband{padding:38px 36px;border-radius:18px;color:#fff;display:flex;flex-direction:column;align-items:flex-start}
.hp-leadband-seller{background:linear-gradient(135deg,#0c1f38,#162845)}
.hp-leadband-buyer{background:linear-gradient(135deg,#EA0649,#EA0649)}
.hp-leadband-eyebrow{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:12px;opacity:.85}
.hp-leadband-title{font-family:var(--serif);font-size:30px;font-weight:400;line-height:1.1;letter-spacing:-.5px;margin:0 0 12px}
.hp-leadband-sub{font-size:14.5px;line-height:1.5;opacity:.92;margin-bottom:24px;max-width:440px}
.hp-leadband-cta{padding:13px 26px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 14px rgba(0,0,0,.18);letter-spacing:-.1px}
.hp-leadband-cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.25);background:#EA0649}
.hp-leadband-cta-alt{background:#fff;color:#0c1f38}
.hp-leadband-cta-alt:hover{background:#fff;color:#0c1f38;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.hp-leadband-trust{margin-top:14px;font-size:12px;font-weight:500;color:rgba(255,255,255,.78);letter-spacing:.1px}
.hp-leadband-trust-alt{color:rgba(255,255,255,.92)}

/* Market snapshot */
.hp-market-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.hp-market-stat{padding:28px 24px;background:#fff;border:1px solid #eef2f5;border-radius:14px;text-align:center;transition:border-color .15s,box-shadow .15s}
.hp-market-stat:hover{border-color:#EA0649;box-shadow:0 6px 18px rgba(184,20,66,.12)}
.hp-market-num{font-family:var(--serif);font-size:36px;font-weight:400;color:#0c1f38;line-height:1;letter-spacing:-.6px;margin-bottom:8px}
.hp-market-lbl{font-size:13px;font-weight:600;color:#0c1f38;margin-bottom:4px}
.hp-market-trend{font-size:11.5px;color:#EA0649;font-weight:500;text-transform:uppercase;letter-spacing:.4px}

/* Why PropertyHub cards */
.hp-why-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.hp-why-card{padding:28px 24px;background:#fff;border:1px solid #eef2f5;border-radius:14px;transition:border-color .15s,transform .15s,box-shadow .15s}
.hp-why-card:hover{border-color:#EA0649;transform:translateY(-2px);box-shadow:0 8px 22px rgba(184,20,66,.1)}
.hp-why-ico{width:48px;height:48px;border-radius:12px;background:#f0f7f5;display:flex;align-items:center;justify-content:center;color:#EA0649;margin-bottom:16px}
.hp-why-ico svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2}
.hp-why-card h3{font-family:var(--serif);font-size:19px;font-weight:400;color:#0c1f38;line-height:1.2;margin:0 0 10px;letter-spacing:-.3px}
.hp-why-card p{font-size:13.5px;color:#475569;line-height:1.55;margin:0}
/* Testimonial row — quick social proof beneath the four "Why" cards */
/* v120: hide the fake testimonial quotes (M. Chen, J. Patel, A. Reid) until we have real reviews. */
.hp-why-quotes{display:none !important;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:32px}
.hp-why-quote{padding:22px 22px 20px;background:#fbfbfd;border:1px solid #eef2f5;border-radius:12px;border-left:3px solid #f59e0b}
.hp-why-quote-stars{color:#f59e0b;font-size:14px;letter-spacing:2px;margin-bottom:8px;line-height:1}
.hp-why-quote p{font-family:var(--serif);font-size:15.5px;line-height:1.45;color:#0c1f38;margin:0 0 10px;font-style:italic}
.hp-why-quote-author{font-size:12px;color:#6b7a8d;font-weight:600;letter-spacing:.1px}
@media(max-width:640px){.hp-why-quote{padding:18px 18px 16px}.hp-why-quote p{font-size:14px}}

/* Mobile homepage */
@media(max-width:768px){
  .hp-section{padding:40px 0}
  .hp-container{padding:0 16px}
  .hp-title{font-size:26px}
  .hp-leadband-grid{grid-template-columns:1fr}
  .hp-leadband{padding:30px 24px}
  .hp-leadband-title{font-size:24px}
  .hp-market-num{font-size:30px}
  .hp-cards-row{grid-template-columns:repeat(2,1fr);gap:12px}
  .hp-fcard-img{height:140px}
  .hp-nb-grid{grid-template-columns:1fr 1fr;gap:10px}
  .hp-nb-card{height:160px}
  .hp-nb-name{font-size:18px}
  .hp-sec-hdr{margin-bottom:24px}
}
@media(max-width:480px){
  .hp-cards-row{grid-template-columns:1fr}
  .hp-nb-grid{grid-template-columns:1fr}
}

/* ═══════════ HOME VALUATION MODAL — Premium seller funnel (Compass-grade) ═══════════ */
.val-ov{position:fixed;inset:0;background:rgba(12,31,56,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:710;display:none;align-items:center;justify-content:center;padding:20px;animation:valFadeIn .25s ease}
.val-ov.open{display:flex}
@keyframes valFadeIn{from{opacity:0}to{opacity:1}}
.val-modal{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:92vh;overflow-y:auto;padding:36px 36px 32px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.35),0 8px 24px rgba(0,0,0,.18);animation:valSlideUp .35s cubic-bezier(.2,.8,.2,1)}
@keyframes valSlideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.val-x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:#f4f6f8;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:#64748b;border:none;transition:background .15s}
.val-x:hover{background:#e0e7ef;color:#0c1f38}
.val-progress{position:absolute;top:0;left:0;right:0;height:3px;background:#eef2f5;border-radius:18px 18px 0 0;overflow:hidden}
.val-progress-bar{height:100%;background:linear-gradient(90deg,#EA0649,#EA0649);border-radius:0 99px 99px 0;transition:width .35s cubic-bezier(.2,.8,.2,1)}
.val-step{display:none;animation:valStepIn .25s ease}
.val-step-active{display:block}
@keyframes valStepIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:translateX(0)}}
.val-eyebrow{font-size:11.5px;font-weight:700;color:#EA0649;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}
.val-title{font-family:var(--serif);font-size:28px;font-weight:400;color:#0c1f38;line-height:1.15;margin-bottom:8px;letter-spacing:-.5px}
.val-title-sm{font-family:var(--serif);font-size:20px;font-weight:400;color:#0c1f38;line-height:1.2;margin:24px 0 6px;letter-spacing:-.3px}
.val-sub{font-size:14.5px;color:#475569;line-height:1.5;margin-bottom:24px}
.val-sub-sm{font-size:13.5px;color:#64748b;line-height:1.5;margin-bottom:18px}
.val-back{background:transparent;border:none;color:#EA0649;font-size:13px;font-weight:600;cursor:pointer;padding:0;margin-bottom:18px;font-family:inherit;display:inline-flex;align-items:center;gap:4px;transition:opacity .15s}
.val-back:hover{opacity:.7}
.val-fg{margin-bottom:14px}
.val-row{display:flex;gap:12px}
.val-lbl{display:block;font-size:12.5px;font-weight:600;color:#0c1f38;margin-bottom:6px;letter-spacing:-.1px}
.val-inp{width:100%;padding:13px 14px;border:1.5px solid #dbe2ea;border-radius:9px;font-size:14.5px;color:#0c1f38;background:#fff;font-family:inherit;transition:border-color .15s,box-shadow .15s}
.val-inp:hover{border-color:#cbd5d1}
.val-inp:focus{outline:none;border-color:#EA0649;box-shadow:0 0 0 3px rgba(184,20,66,.12)}
.val-hint{font-size:12px;color:#94a3b8;margin-top:5px}
.val-chips{display:flex;flex-wrap:wrap;gap:8px}
.val-chip{padding:11px 16px;border:1.5px solid #dbe2ea;border-radius:9px;background:#fff;font-size:13px;font-weight:500;color:#0c1f38;cursor:pointer;font-family:inherit;transition:all .15s}
.val-chip:hover{border-color:#EA0649;background:#f0f7f5}
.val-chip.on{border-color:#EA0649;background:#EA0649;color:#fff;box-shadow:0 2px 8px rgba(184,20,66,.25)}
.val-cta{width:100%;padding:14px;background:#EA0649;color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;margin-top:8px;transition:all .18s cubic-bezier(.2,.8,.2,1);box-shadow:0 4px 14px rgba(184,20,66,.3);letter-spacing:-.1px}
.val-cta:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 6px 18px rgba(184,20,66,.4)}
.val-trust{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:#64748b}
.val-trust svg{stroke:#EA0649;flex-shrink:0}
/* Estimate display (Step 3) */
.val-estimate{font-family:var(--serif);font-size:42px;font-weight:400;color:#0c1f38;line-height:1;margin-bottom:6px;letter-spacing:-.8px}
.val-estimate-sub{font-size:13px;color:#64748b;font-weight:500;margin-bottom:6px}
.val-estimate-disclaimer{font-size:11.5px;color:#94a3b8;line-height:1.5;padding:10px 14px;background:#f8fafb;border-radius:8px;border-left:3px solid #EA0649;margin-bottom:24px}
/* Step 4 success */
.val-success-icon{display:flex;justify-content:center;margin-bottom:18px;color:#EA0649}
/* Mobile */
@media(max-width:768px){
  .val-modal{padding:30px 22px 26px;max-height:96vh;border-radius:14px}
  .val-title{font-size:23px}
  .val-estimate{font-size:34px}
  .val-row{flex-direction:column;gap:0}
}
.lm-ov.open{opacity:1;pointer-events:all}
.lm{background:var(--white);border-radius:var(--rxl);width:100%;max-width:460px;overflow:hidden;transform:scale(.96) translateY(8px);transition:transform .22s var(--ease);position:relative;max-height:94vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.lm-ov.open .lm{transform:scale(1) translateY(0)}

/* Navy gradient header */
.lm-hdr{background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 100%);padding:24px 24px 20px;color:#fff}
.lm-title{font-family:var(--serif);font-size:22px;color:#fff;margin-bottom:4px;font-weight:400;letter-spacing:-.2px}
.lm-sub{font-size:12.5px;color:rgba(255,255,255,.65);font-weight:400;line-height:1.4}
.lm-listing{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);padding:10px 12px;margin-top:14px;font-size:12.5px;color:rgba(255,255,255,.92);display:none;line-height:1.4}
.lm-listing.on{display:block}
.lm-listing:before{content:'📍 ';margin-right:4px}

.lm-x{position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:5;backdrop-filter:blur(4px)}
.lm-x:hover{background:rgba(255,255,255,.22)}

/* Body with clean traditional labels above fields */
.lm-body{padding:20px 24px 22px}

/* Trust signals at top */
.lm-trust{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;justify-content:center;padding:10px 0;border-bottom:1px solid var(--off);padding-bottom:14px;margin-bottom:14px}
.lm-trust-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--mid);font-weight:500}
/* v=410l — thinner stroke. Was 2.5 (bold), now 1.75 matches the rest of
   the elegant line-icon language used across the modal. Size unchanged. */
.lm-trust-item svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:1.75;flex-shrink:0}

/* Form fields */
.fg{margin-bottom:12px;position:relative}
.fg label{display:block;font-size:10.5px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px;position:static;background:transparent;padding:0}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 12px;border:1.5px solid var(--light);border-radius:var(--r);font-size:14px;font-family:var(--sans);color:var(--navy);background:var(--white);transition:border-color .15s,box-shadow .15s}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px rgba(122,11,42,.1)}
.fg input::placeholder,.fg textarea::placeholder{color:#a0aec0}
.fg textarea{resize:none;height:65px}
.fg-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* Submit button */
.lm-submit{width:100%;padding:14px;background:linear-gradient(135deg,var(--teal) 0%,var(--teal2) 100%);color:#fff;border:none;border-radius:var(--rlg);font-size:15px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .15s;margin-top:8px;box-shadow:0 3px 12px rgba(122,11,42,.3);letter-spacing:.2px}
.lm-submit:hover{transform:translateY(-1px);box-shadow:0 5px 16px rgba(122,11,42,.4)}
.lm-submit:active{transform:translateY(0)}

.lm-disc{font-size:10.5px;color:var(--mid);text-align:center;margin-top:12px;line-height:1.5}
.lm-disc a{color:var(--teal);text-decoration:underline}

/* Enhanced form elements (chips, checks, radios, consent) */
.lf-hint{color:var(--mid);font-weight:400;font-size:11px;margin-left:4px}
.lf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.lf-chip{padding:7px 12px;border:1.5px solid var(--light);background:var(--white);border-radius:20px;font-size:12.5px;font-weight:500;color:var(--navy);cursor:pointer;transition:all .15s;font-family:var(--sans);white-space:nowrap}
.lf-chip:hover{border-color:var(--teal);color:var(--teal)}
.lf-chip.on{background:var(--teal);color:#fff;border-color:var(--teal)}
.lf-checks{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:2px}
.lf-check{display:flex;align-items:center;gap:6px;padding:8px 10px;border:1.5px solid var(--light);border-radius:var(--r);cursor:pointer;transition:all .15s;background:var(--white);font-size:12.5px}
.lf-check:hover{border-color:var(--teal)}
.lf-check input{width:15px;height:15px;cursor:pointer;margin:0;accent-color:var(--teal)}
.lf-check input:checked ~ span{color:var(--teal);font-weight:600}
.lf-check:has(input:checked){border-color:var(--teal);background:var(--teal3)}
.lf-radio-row{display:flex;gap:6px;margin-top:2px}
.lf-radio{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;padding:9px 8px;border:1.5px solid var(--light);border-radius:var(--r);cursor:pointer;transition:all .15s;background:var(--white);font-size:12.5px;font-weight:500}
.lf-radio:hover{border-color:var(--teal)}
.lf-radio input{display:none}
.lf-radio:has(input:checked){background:var(--teal);color:#fff;border-color:var(--teal)}
.lf-consent{margin-top:14px;padding:12px;background:#fffbeb;border:1.5px solid #fcd34d;border-radius:var(--r)}
.lf-consent-label{display:flex;gap:9px;cursor:pointer;font-size:11.5px;line-height:1.5;color:#78350f;align-items:flex-start}
.lf-consent-label input{width:16px;height:16px;cursor:pointer;margin:1px 0 0 0;flex-shrink:0;accent-color:var(--amber)}
.lf-consent-label strong{color:#451a03}
@media(max-width:480px){.lf-checks{grid-template-columns:1fr 1fr}.lf-radio{padding:10px 6px;font-size:12px}}

/* Success screen */
.lm-success{display:none;text-align:center;padding:36px 28px 28px}
.lm-success-ico{font-size:56px;margin-bottom:14px;line-height:1}
.lm-success h3{font-family:var(--serif);font-size:24px;color:var(--navy);margin-bottom:10px;font-weight:400;line-height:1.2;letter-spacing:-.3px}
.lm-success p{font-size:13.5px;color:var(--mid);line-height:1.65;margin-bottom:22px}
.lm-success button{padding:14px 28px;background:var(--navy);color:#fff;border:none;border-radius:var(--rlg);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);width:100%;transition:background .15s}
.lm-success button:hover{background:var(--navy2)}

/* Agent card inside success */
.lm-agent{background:var(--off);border-radius:var(--rlg);padding:14px;display:flex;align-items:center;gap:12px;margin-bottom:18px;text-align:left}
.lm-agent-avatar{width:56px;height:56px;border-radius:50%;background:var(--teal3);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;color:var(--teal);flex-shrink:0;letter-spacing:.5px}
.lm-agent-name{font-size:14.5px;color:var(--teal);font-weight:700;margin-bottom:1px}
.lm-agent-title{font-size:12px;color:var(--navy);margin-bottom:1px}
.lm-agent-co{font-size:11.5px;color:var(--mid)}
.lm-agent-phone{font-size:12.5px;color:var(--teal);text-decoration:underline;margin-top:4px;display:block;font-weight:600}

/* ── FILTER PANEL — v=416i centered floating modal w/ dark backdrop (Zoocasa) ──
   Direction shift from Scott: drop the v=416d/e left-slide pane-width binding,
   adopt Zoocasa's centered modal pattern. Backdrop dims the entire page; the
   modal floats on top, max-width ~900px, rounded corners + soft shadow.
   Animation: backdrop fades in, modal scales+fades in.
   Click backdrop / Esc / X all close. Live "Show N Results" stays in footer. */
.fm-ov{
  position:fixed; inset:0;
  /* v=545 — Backdrop: semi-transparent dark, NO blur. Map + listings
     panel behind stay visible-but-dimmed (Zoocasa pattern). Blur read as
     "full takeover" — keeping page legible behind is lighter + less
     disorienting. */
  z-index:1200;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease-out;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  overflow-y:auto;
}
.fm-ov.open{ opacity:1; pointer-events:all }

.fm{
  /* Centered floating panel. */
  position:relative;
  width:100%; max-width:900px;
  /* v=429 — 88vh cap with internal scroll keeps the Apply / Show Results
     footer pinned to the viewport on every device. Previously 100vh-48px
     left the Apply button cropped on short Android viewports. fm-body
     owns the scroll (flex:1; overflow-y:auto). */
  max-height:88vh;
  background:#fff;
  border-radius:14px;
  box-shadow:
    0 20px 60px rgba(11,31,56,.28),
    0 4px 12px rgba(11,31,56,.16),
    0 0 0 1px rgba(11,31,56,.04);
  display:flex; flex-direction:column;
  overflow:hidden;
  /* Scale + fade-in entry animation. */
  transform:translateY(8px) scale(.985);
  opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.2,1), opacity .2s ease-out;
}
.fm-ov.open .fm{ transform:translateY(0) scale(1); opacity:1 }

@media (max-width: 768px){
  /* Mobile: full-screen sheet, no padding around backdrop, no rounded corners. */
  .fm-ov{ padding:0 }
  .fm{
    max-width:100%;
    /* v=429 — true full-screen height with safe-area inset honoured so the
       sticky footer (Reset / Show N Results) clears the iOS home-indicator. */
    max-height:100dvh;
    height:100dvh;
    border-radius:0;
    box-shadow:none;
  }
}
/* v=416i — removed legacy `.fm{flex:1;display:flex;flex-direction:column;overflow:hidden}`
   from this slot. The new .fm rule above sets a centered card layout; flex:1
   would have stretched it to fill the backdrop, breaking the centering. */
.fm-hdr{padding:16px 18px;border-bottom:1px solid #eef2f5;display:flex;align-items:center;justify-content:space-between;background:#fff;flex-shrink:0;gap:10px}
.fm-title{font-size:19px;font-weight:700;color:#0c1f38;font-family:var(--serif);letter-spacing:-.3px}
.fm-close-btn{width:36px;height:36px;border-radius:50%;background:#f4f6f8;color:#0c1f38;border:none;font-size:0;cursor:pointer;font-family:var(--sans);transition:all .12s;display:flex;align-items:center;justify-content:center;padding:0;flex-shrink:0;position:relative}
.fm-close-btn::before,.fm-close-btn::after{content:"";position:absolute;width:14px;height:1.8px;background:currentColor;border-radius:2px}
.fm-close-btn::before{transform:rotate(45deg)}
.fm-close-btn::after{transform:rotate(-45deg)}
.fm-close-btn:hover{background:#0c1f38;color:#fff;transform:scale(1.05)}
/* v24 Fix 4 / v27 tightened: scroll content reserves enough bottom padding so the sticky
   3-action footer (Reset | Save Search | View N Listings) never covers the
   last filter row. v27 footer is ~64px tall so 100px reserve is plenty. */
.fm-body{flex:1;overflow-y:auto;padding:4px 14px calc(100px + env(safe-area-inset-bottom,0px))}
.fm-body::-webkit-scrollbar{width:6px}
.fm-body::-webkit-scrollbar-thumb{background:var(--light);border-radius:3px}

/* v24 Fix 4: subtle 1px section dividers between filter rows (consistent with
   the divider already on .fm-row). Stronger contrast with the lighter `--off`.
   v27: tighten vertical spacing 14px → 11px so more controls fit per screen on mobile. */
.fm-row{display:grid;grid-template-columns:84px 1fr;gap:10px;align-items:start;padding:11px 0;border-bottom:1px solid #eef2f5}
.fm-row:last-child{border-bottom:none}
/* v27: section labels smaller — 12.5px → 11px, uppercase, tighter spacing so they don't dominate */
.fm-lbl{font-size:11px;font-weight:700;color:var(--navy);padding-top:8px;letter-spacing:.4px;text-transform:uppercase;line-height:1.2}
.fm-lbl-sub{text-transform:none;letter-spacing:0;font-weight:500;font-size:10.5px;color:var(--mid)}

/* v25: unified compact-chip pattern across every filter section. Matches
   the v14/v16 chip-stepper geometry (8px 14px padding, 13px / 600 font,
   36px min-height, 6px gap, 99px pill radius) — Beds (.fc), Baths/Parking
   chip-stepper, Building Age, DOM, Maintenance chip-stepper, Home Type,
   Amenities, Property Type. Selected = navy fill + white text + navy border.
   Unselected = white bg + navy text + light grey border. */
.fm-chips{display:flex;flex-wrap:wrap;gap:6px}
.fc{padding:8px 14px;border-radius:99px;border:1.5px solid var(--light, #e5e9ee);background:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;color:var(--navy, #0c1f38);user-select:none;white-space:nowrap;min-height:36px;display:inline-flex;align-items:center;justify-content:center;font-family:inherit;line-height:1;-webkit-tap-highlight-color:transparent}
.fc:hover{background:#f4f6f8;border-color:#cbd5d1}
.fc.on{background:#0c1f38 !important;color:#fff !important;border-color:#0c1f38 !important;box-shadow:0 2px 6px rgba(11,37,69,.15) !important}
.fc:focus-visible{outline:2px solid #EA0649;outline-offset:2px}

/* Square exposure chips — kept as 44px tap target for the 8-direction grid. */
.fm-chips-sq .fc{min-width:44px;padding:7px 8px;text-align:center;justify-content:center}
/* Home Type / Amenities / Property Type rows use the same compact chip;
   the legacy `-wide` modifier no longer downsizes the font. */
.fm-chips-wide .fc{padding:8px 14px;font-size:13px}

/* Stepper (−/+ with value in middle) */
.fm-stepper{display:inline-flex;align-items:center;gap:14px;background:var(--white);border:1.5px solid var(--light);border-radius:8px;padding:5px 8px;width:fit-content;transition:border-color .15s}
.fm-stepper:hover{border-color:#cbd5d1}
.fm-step-btn{width:32px;height:32px;border-radius:50%;background:var(--white);border:1.5px solid var(--light);font-size:17px;font-weight:400;color:var(--navy);cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;padding:0;transition:all .15s}
.fm-step-btn:hover{background:#EA0649;border-color:#EA0649;color:#fff;box-shadow:0 2px 6px rgba(184,20,66,.25)}
.fm-step-btn:hover{background:var(--navy);color:#fff;border-color:var(--navy)}
.fm-step-val{min-width:50px;text-align:center;font-size:12.5px;font-weight:600;color:var(--navy)}

/* v14 Fix 1 / v25: chip-stepper row — visually identical to .fc, just adds a
   min-width so Any|1+|2+|3+|4+|5+ render at uniform widths. */
.fm-chip-stepper{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.fm-chip-step{flex:0 1 auto;min-width:48px;padding:8px 14px;background:#fff;color:var(--navy,#0c1f38);border:1.5px solid var(--light,#e5e9ee);border-radius:99px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1;transition:background .12s,border-color .12s,color .12s,box-shadow .12s;-webkit-tap-highlight-color:transparent;min-height:36px;display:inline-flex;align-items:center;justify-content:center}
.fm-chip-step:hover{background:#f4f6f8;border-color:#cbd5d1}
.fm-chip-step.on{background:#0c1f38 !important;color:#fff !important;border-color:#0c1f38 !important;box-shadow:0 2px 6px rgba(11,37,69,.15) !important}
.fm-chip-step:focus-visible{outline:2px solid #EA0649;outline-offset:2px}
@media (max-width:380px){
  .fm-chip-step{flex:1 1 calc(33.333% - 4px);min-width:0;padding:8px 6px;font-size:12.5px}
}

/* Select dropdowns */
.fm-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fm-selects-1{grid-template-columns:1fr;max-width:240px}
.fm-select{padding:11px 12px;border:1.5px solid var(--light);border-radius:8px;font-size:13.5px;font-family:var(--sans);color:var(--navy);background:var(--white);cursor:pointer;width:100%;transition:border-color .15s,box-shadow .15s}
.fm-select:hover{border-color:#cbd5d1}
.fm-select:focus{border-color:var(--teal);outline:none}

/* Inline price/size slider inside filter panel */
.fm-slider-wrap{display:flex;flex-direction:column;gap:8px;max-width:340px}
.fm-slider-label{font-size:12px;font-weight:500;color:var(--mid);background:var(--off);padding:5px 10px;border-radius:var(--r);align-self:flex-start}
.fm-slider-inputs{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center;margin-top:4px}
.fm-inp{width:100%;padding:11px 12px;border:1.5px solid var(--light);border-radius:8px;font-size:13.5px;font-family:var(--sans);color:var(--navy);text-align:center;background:var(--white);transition:border-color .15s,box-shadow .15s}
.fm-inp:hover{border-color:#cbd5d1}
.fm-inp:focus{border-color:var(--teal);outline:none}
.fm-dash{color:var(--mid);font-size:13px;user-select:none}

/* ── v4 Fix 1: STANDALONE NEIGHBORHOOD PICKER (modal that opens from the search-bar pill) ── */
.hood-picker-ov{position:fixed;inset:0;background:rgba(11,37,69,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:6500;display:flex;align-items:flex-end;justify-content:center;padding:0;opacity:0;pointer-events:none;transition:opacity .22s}
.hood-picker-ov.open{opacity:1;pointer-events:all}
.hood-picker{background:#fff;width:100%;max-width:640px;height:100%;max-height:100vh;display:flex;flex-direction:column;transform:translateY(20px);opacity:.7;transition:all .25s cubic-bezier(.2,.8,.2,1);box-shadow:0 -10px 40px rgba(11,37,69,.18)}
.hood-picker-ov.open .hood-picker{transform:translateY(0);opacity:1}
.hood-picker-hdr{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #eef2f7;background:#fff;flex-shrink:0}
.hood-picker-back{width:36px;height:36px;border:none;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:8px;color:#0c1f38;flex-shrink:0;padding:0}
.hood-picker-back:hover{background:#f4f6f8}
.hood-picker-back svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2}
.hood-picker-title{flex:1;font-size:16px;font-weight:700;color:#0c1f38;letter-spacing:-.2px}
.hood-picker-clear{padding:7px 12px;background:transparent;color:#EA0649;border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;border-radius:6px;transition:background .12s}
.hood-picker-clear:hover{background:rgba(148,14,52,.08)}
.hood-picker-search{position:relative;padding:10px 16px 10px;background:#fff;flex-shrink:0;border-bottom:1px solid #eef2f7}
.hood-picker-search svg{position:absolute;left:28px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:#94a3b8;fill:none;stroke-width:2;pointer-events:none}
.hood-picker-search input{width:100%;padding:11px 14px 11px 40px;border:1.5px solid #e0e6ec;border-radius:10px;font-size:14px;font-family:inherit;color:#0c1f38;background:#f7fafa;outline:none;transition:all .15s}
.hood-picker-search input:focus{border-color:#EA0649;background:#fff}
.hood-picker-summary{padding:10px 16px;font-size:12.5px;color:#475569;background:#f7fafa;border-bottom:1px solid #eef2f7;flex-shrink:0;font-weight:500}
.hood-picker-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:6px 12px 14px}
.hood-picker-list .fm-area{border-radius:10px;margin-bottom:6px;border:1px solid #eef2f7;overflow:hidden;background:#fff}
.hood-picker-list .fm-area:last-child{margin-bottom:0}
.hood-picker-list .fm-area-row{padding:13px 14px}
.hood-picker-list .fm-area-name{font-size:14.5px}
.hood-picker-list .fm-area-hoods{padding:4px 14px 14px 42px;background:#fafbfc}
.hood-picker-list .fm-area.search-hidden{display:none}
.hood-picker-list .fm-hood-chip.search-hidden{display:none}
.hood-picker-foot{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid #eef2f7;display:flex;gap:10px;background:#fff;flex-shrink:0;box-shadow:0 -4px 16px rgba(11,37,69,.06)}
.hood-picker-reset{flex:1;padding:13px;border:1.5px solid #e0e6ec;background:#fff;border-radius:10px;font-size:14px;font-weight:600;color:#475569;cursor:pointer;font-family:inherit;transition:all .15s}
.hood-picker-reset:hover{border-color:#0c1f38;color:#0c1f38}
.hood-picker-apply{flex:2;padding:13px;background:#EA0649;color:#fff;border-radius:10px;font-size:14.5px;font-weight:700;cursor:pointer;border:none;font-family:inherit;letter-spacing:.2px;box-shadow:0 4px 14px rgba(184,20,66,.4);transition:all .15s}
.hood-picker-apply:hover{background:#EA0649;box-shadow:0 6px 20px rgba(184,20,66,.55);transform:translateY(-1px)}
@media (min-width:600px){
  .hood-picker-ov{align-items:center;padding:24px}
  .hood-picker{max-height:90vh;border-radius:18px;max-width:680px}
}

/* SEARCH-BAR PILL with chips (replaces the old plain-text input) */
.mob-search-pill{flex:1;display:flex;align-items:center;gap:8px;padding:0 12px;height:100%;background:transparent;border:none;cursor:pointer;font-family:inherit;text-align:left;min-width:0;overflow:hidden}
.mob-search-pill:hover{background:#f7fafa}
.mob-search-pill .mob-search-pin{width:14px;height:14px;stroke:#475569;fill:none;stroke-width:2;flex-shrink:0}
.mob-search-pill .mob-search-chev{width:14px;height:14px;stroke:#475569;fill:none;stroke-width:2;flex-shrink:0;margin-left:auto}
.mob-search-chips{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow:hidden;white-space:nowrap;flex-wrap:nowrap}
.mob-search-placeholder{color:#94a3b8;font-size:13.5px;font-weight:500;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mob-search-chips:not(:empty) ~ .mob-search-placeholder{display:none}
.mob-search-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 4px 4px 9px;background:#EA0649;color:#fff;border-radius:14px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0;max-width:130px;overflow:hidden;text-overflow:ellipsis}
.mob-search-chip-x{width:18px;height:18px;border-radius:50%;background:rgba(255,255,255,.2);border:none;color:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;font-size:12px;line-height:1;font-family:inherit}
.mob-search-chip-x:hover{background:rgba(255,255,255,.35)}
.mob-search-chip-more{display:inline-flex;align-items:center;padding:4px 9px;background:#0c1f38;color:#fff;border-radius:14px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}

/* ── Issue 4: Toronto Areas / Neighborhoods picker (Condos.ca-style accordion) ── */
.fm-areas{display:flex;flex-direction:column;gap:0;border:1px solid var(--light);border-radius:10px;overflow:hidden;background:var(--white)}
.fm-areas-hdr{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;background:#f7fafa;border-bottom:1px solid var(--light)}
.fm-areas-hdr-t{font-size:13px;font-weight:700;color:var(--navy)}
.fm-areas-hdr-toggle{font-size:12px;color:#EA0649;cursor:pointer;font-weight:600;background:transparent;border:none;padding:4px 8px;font-family:inherit;border-radius:6px;transition:background .12s}
.fm-areas-hdr-toggle:hover{background:rgba(148,14,52,.08)}
.fm-areas.collapsed .fm-area{display:none}
.fm-area{border-bottom:1px solid #f1f4f7}
.fm-area:last-child{border-bottom:none}
.fm-area-row{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;cursor:pointer;transition:background .12s;gap:10px}
.fm-area-row:hover{background:#f7fafa}
.fm-area-left{display:flex;align-items:center;gap:10px;flex:1;min-width:0}
.fm-area-cb{width:18px;height:18px;border:1.5px solid #cbd5d1;border-radius:4px;background:var(--white);cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .12s;padding:0}
.fm-area-cb.on{background:#EA0649;border-color:#EA0649}
.fm-area-cb.partial{background:#fff;border-color:#EA0649}
.fm-area-cb.partial::after{content:"";width:9px;height:9px;background:#EA0649;border-radius:2px;display:block}
.fm-area-cb.on::after{content:"";width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-top:-2px}
.fm-area-name{font-size:13.5px;font-weight:600;color:var(--navy);line-height:1.2;flex:1;min-width:0}
.fm-area-count{font-size:11.5px;color:var(--mid);font-weight:500}
.fm-area-chev{width:18px;height:18px;color:var(--mid);transition:transform .18s;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}
.fm-area.expanded .fm-area-chev{transform:rotate(180deg)}
.fm-area-hoods{display:none;padding:6px 14px 14px 42px;background:#fafbfc;border-top:1px solid #f1f4f7;flex-wrap:wrap;gap:6px}
.fm-area.expanded .fm-area-hoods{display:flex}
.fm-hood-chip{padding:6px 11px;border:1.5px solid #e0e6ec;background:#fff;border-radius:18px;font-size:12px;font-weight:500;color:var(--navy);cursor:pointer;transition:all .12s;font-family:inherit;line-height:1.3;white-space:nowrap}
.fm-hood-chip:hover{border-color:#EA0649;background:#faf0f3}
.fm-hood-chip.on{background:#EA0649;border-color:#EA0649;color:#fff;box-shadow:0 2px 4px rgba(158,13,54,.18)}
.fm-areas-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#f7fafa;border-top:1px solid var(--light)}
.fm-areas-clear{font-size:12px;color:#EA0649;cursor:pointer;font-weight:600;background:transparent;border:none;padding:4px 8px;font-family:inherit;border-radius:6px;transition:background .12s}
.fm-areas-clear:hover{background:rgba(148,14,52,.08)}
.fm-areas-clear:disabled{color:#94a3b8;cursor:default}
.fm-areas-clear:disabled:hover{background:transparent}
.fm-areas-summary{font-size:11.5px;color:var(--mid);font-weight:500}
/* v27: tighten sticky footer — 14px → 10px vertical padding, tighter button heights.
   Tap targets stay ≥44pt by combining padding + min-height. */
.fm-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--light);display:flex;gap:8px;background:var(--white);flex-shrink:0}
.fm-reset{flex:0 1 auto;min-width:60px;padding:9px 8px;border:1.5px solid var(--light);background:var(--white);border-radius:var(--r);font-size:12.5px;font-weight:600;color:var(--mid);cursor:pointer;font-family:var(--sans);transition:all .15s;min-height:42px;white-space:nowrap}
.fm-reset:hover{border-color:var(--navy);color:var(--navy)}
/* v10/v14: Save Search button — middle action. v14 Fix 5: ensure label fits at
   320px viewport. Use icon + label inline so the bell + "Save Search" never
   clips, and reduce gap on narrow widths. */
.fm-save-search{flex:1 1 100px;min-width:0;padding:9px 8px;border:1.5px solid #e7d1d7;background:#fff;color:#0c1f38;border-radius:var(--r);font-size:12.5px;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .15s;min-height:42px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fm-save-search:hover,.fm-save-search:active{border-color:#EA0649;color:#EA0649;background:#faf0f3}
.fm-save-search svg{flex-shrink:0;stroke:currentColor;fill:none;stroke-width:2}
.fm-apply{flex:1.4 1 120px;min-width:0;padding:9px 8px;background:#EA0649;color:#fff;border-radius:var(--r);font-size:12.5px;font-weight:600;cursor:pointer;border:none;font-family:var(--sans);transition:all .15s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:42px}
.fm-apply:hover{background:#EA0649}
@media (max-width:380px){
  .fm-foot{gap:6px;padding:12px 10px calc(12px + env(safe-area-inset-bottom,0px))}
  .fm-reset,.fm-save-search,.fm-apply{font-size:12.5px;padding:10px 6px}
  .fm-reset{min-width:56px}
}

/* ── MORTGAGE ── */
.mort-ov{position:fixed;inset:0;background:rgba(12,31,56,.65);backdrop-filter:blur(5px);z-index:700;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;pointer-events:none;transition:opacity .18s}
.mort-ov.open{opacity:1;pointer-events:all}
.mort-m{background:var(--white);border-radius:var(--rxl);width:100%;max-width:380px;overflow:hidden;box-shadow:var(--shxl)}
.mort-hdr{background:linear-gradient(135deg,var(--navy),var(--navy2));padding:16px 18px;display:flex;justify-content:space-between;align-items:center}
.mort-title{font-size:14px;font-weight:700;color:#fff}
.mort-x{width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px}
.mort-body{padding:16px}
.mort-row{margin-bottom:11px}
.mort-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:11px}
.ml{font-size:10px;font-weight:700;color:var(--mid);text-transform:uppercase;letter-spacing:.3px;margin-bottom:3px}
.mi{width:100%;padding:8px 10px;border:1.5px solid var(--light);border-radius:var(--r);font-size:13px;font-family:var(--sans);color:var(--navy);transition:border-color .15s}
.mi:focus{border-color:var(--teal);outline:none}
.mort-result{background:var(--teal3);border-radius:var(--rlg);padding:14px;text-align:center;margin:14px 0 11px;border:1px solid rgba(122,11,42,.18)}
.mort-pay{font-family:var(--serif);font-size:30px;color:var(--teal)}
.mort-pay-l{font-size:10px;color:var(--mid);margin-top:3px}
.mort-bk{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--light);border-radius:var(--r);overflow:hidden}
.mort-s{background:var(--white);padding:9px;text-align:center}
.mort-sv{font-size:12px;font-weight:700;color:var(--navy)}
.mort-sl{font-size:9px;color:var(--mid);margin-top:2px}

/* ── HERO ── */
.hero{min-height:100vh;background:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px 52px;position:relative;overflow:hidden}
/* v7 Bug 8: hero background is now a SOLID navy panel — the v3 radial gradients
   were the source of the "curvy thing" bleeding under the fixed nav. Eliminated entirely. */
.hero-bg{position:absolute;inset:0;background:var(--navy);pointer-events:none}

/* v7 Bug 11: CLEAN HERO (Condos.ca pattern). Full-bleed condo interior photo +
   centered serif headline + single search input. Mobile-first 375px design.
   Padding-top accounts for the fixed nav so the H1 is never clipped. */
/* v8 Bug 2: hero padding-top now uses runtime-measured --navh + a 40px buffer
   so the H1 is never clipped, even when iOS Safari computes nav height
   slightly differently (notch, dynamic address bar, font-loading reflow). */
/* v11 Bug 1 FINAL: hero is a flex column. Spacer at top has explicit height
   matching the rendered nav. Inner content fills remaining space and centers.
   No padding-top math — the spacer is a real element that can never be eaten. */
.hero-clean{min-height:100dvh;min-height:100vh;display:flex;flex-direction:column;align-items:stretch;padding:0;position:relative;overflow:hidden;background:var(--navy)}
.hero-clean-nav-spacer{flex:0 0 auto;min-height:calc(var(--navh,56px) + 24px);width:100%;position:relative;z-index:2}
.hero-clean-bg{position:absolute;inset:0;background-image:url('https://condogo.ca/cdn-cgi/image/width=1600,quality=70,format=auto,fit=cover/https://images.unsplash.com/photo-1517090504586-fde19ea6066f');background-size:cover;background-position:center;pointer-events:none;z-index:0;animation:v304-hero-zoom 18s ease-out forwards}
.hero-clean-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,37,69,.42) 0%,rgba(11,37,69,.66) 55%,rgba(8,24,46,.86) 100%);pointer-events:none;z-index:1}
/* v304 ELITE — subtle cinematic Ken-Burns zoom on the hero photo: starts
   at 1.0× and zooms to 1.06× over 18s. Calm, premium, never distracting. */
@keyframes v304-hero-zoom{
  from{ transform:scale(1) }
  to  { transform:scale(1.06) }
}
/* v11 Bug 2: search autocomplete dropdown. Renders below the hero-clean-search
   pill. Mobile-first 375px design. Each suggestion has an icon + label + category. */
.hero-clean-search{position:relative}
.search-suggest{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid #e0e6ec;border-radius:14px;box-shadow:0 12px 32px rgba(11,37,69,.18),0 2px 6px rgba(11,37,69,.08);max-height:60vh;overflow-y:auto;z-index:30;text-align:left}
.search-suggest.on{display:block}
.search-suggest-item{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border-bottom:1px solid #f4f6f8;color:#0c1f38;font-size:14px;-webkit-tap-highlight-color:transparent;touch-action:manipulation;min-height:44px}
.search-suggest-item:last-child{border-bottom:none}
.search-suggest-item:hover,.search-suggest-item.active{background:#f7fafa}
.search-suggest-icon{width:28px;height:28px;border-radius:50%;background:#faf0f3;color:#EA0649;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:13px}
.search-suggest-icon svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}
.search-suggest-label{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.search-suggest-label strong{font-size:14px;font-weight:600;color:#0c1f38;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.search-suggest-label span{font-size:11.5px;color:#64748b;font-weight:500}
.search-suggest-empty{padding:18px 16px;text-align:center;font-size:13px;color:#64748b;font-style:italic}
@media (max-width:600px){
  .search-suggest{max-height:50vh;border-radius:12px}
  .search-suggest-item{padding:13px 14px;font-size:14.5px}
}

/* v11: inner takes the remaining flex space and centers the headline+search */
.hero-clean-inner{position:relative;z-index:2;flex:1;max-width:680px;width:100%;margin:0 auto;text-align:center;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:24px 20px 48px;align-items:center}
.hero-clean-h1{font-family:var(--serif),Georgia,serif;font-size:clamp(28px,7.5vw,52px);line-height:1.10;letter-spacing:-.5px;color:#fff;margin:0 0 14px;font-weight:400;text-shadow:0 2px 24px rgba(0,0,0,.3);scroll-margin-top:calc(var(--navh,64px) + 12px)}
.hero-clean-h1 #hero-listing-count{color:#e37f9b;font-style:italic}
.hero-clean-sub{font-size:14.5px;color:rgba(255,255,255,.84);line-height:1.5;margin:0 auto 26px;max-width:420px;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.hero-clean-search{display:flex;align-items:center;background:#fff;border-radius:14px;box-shadow:0 16px 40px rgba(11,37,69,.34),0 4px 12px rgba(11,37,69,.18);padding:6px 6px 6px 14px;max-width:560px;margin:0 auto 16px;gap:6px}
.hero-clean-pin{width:18px;height:18px;stroke:#475569;flex-shrink:0}
/* ═══════════ v19: TAP-TO-OPEN SEARCH OVERLAY ═══════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.search-ov{position:fixed;inset:0;z-index:780;display:flex;flex-direction:column;pointer-events:none;opacity:0;transition:opacity .2s}
.search-ov.open{opacity:1;pointer-events:auto}
.search-ov[hidden]{display:none}
.search-ov-backdrop{position:absolute;inset:0;background:rgba(11,37,69,.46)}
.search-ov-panel{position:relative;background:#fff;width:100%;height:100%;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .26s cubic-bezier(.2,.8,.2,1);z-index:1}
.search-ov.open .search-ov-panel{transform:translateY(0)}
.search-ov-hdr{flex-shrink:0;display:flex;align-items:center;gap:10px;padding:calc(10px + env(safe-area-inset-top,0px)) 12px 10px;border-bottom:1px solid #eef2f5;background:#fff}
.search-ov-close{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#f4f6f8;border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0c1f38;transition:background .12s}
.search-ov-close:hover{background:#e8ecf0}
.search-ov-input-wrap{flex:1;display:flex;align-items:center;gap:8px;padding:0 14px;background:#f4f6f8;border-radius:99px;min-height:44px;border:1.5px solid transparent;transition:border-color .15s}
.search-ov-input-wrap:focus-within{border-color:#EA0649;background:#fff}
.search-ov-input-ico{width:18px;height:18px;color:#5a6e84;flex-shrink:0;stroke:currentColor}
.search-ov-input{flex:1;border:none;outline:none;background:transparent;font-size:16px;font-family:inherit;color:#0c1f38;min-width:0;padding:8px 0;-webkit-appearance:none;appearance:none}
.search-ov-input::placeholder{color:#94a3b8}
.search-ov-clear{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:rgba(11,37,69,.1);border:none;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#0c1f38;padding:0}
.search-ov-clear[hidden]{display:none}
.search-ov-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px 0 calc(20px + env(safe-area-inset-bottom,0px))}
.search-ov-sec{padding:10px 18px 6px}
.search-ov-sec-t{font-size:11px;font-weight:700;color:#788a9d;text-transform:uppercase;letter-spacing:.6px;padding:6px 6px 8px}
.search-ov-row{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;background:transparent;border:none;border-radius:8px;cursor:pointer;font-family:inherit;text-align:left;color:#0c1f38;font-size:14.5px;font-weight:500;line-height:1.3;-webkit-tap-highlight-color:transparent;min-height:48px;transition:background .12s}
.search-ov-row:hover{background:#f4f6f8}
.search-ov-row:active{background:#eaeef2}
.search-ov-row-ico{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#faf0f3;color:#EA0649;display:flex;align-items:center;justify-content:center}
.search-ov-row-ico svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.search-ov-row-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.search-ov-row-sub{font-size:12px;color:#788a9d;font-weight:500;margin-top:2px}
.search-ov-row-x{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:transparent;border:none;color:#94a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center}
.search-ov-row-x:hover{background:#f4f6f8;color:#0c1f38}
.search-ov-empty{padding:24px 18px;text-align:center;color:#788a9d;font-size:13px}
/* v216: search overlay lead-gen footer */
.search-ov-leadgen{margin:18px;padding:18px;background:linear-gradient(135deg,#0c1f38,#13315c);border-radius:14px;color:#fff;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.search-ov-leadgen-text{font-size:14px;color:rgba(255,255,255,.85);font-weight:500}
.search-ov-leadgen-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;background:#EA0649;color:#fff;border:none;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,transform .12s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.search-ov-leadgen-btn:hover{background:#CE2C44;transform:translateY(-1px)}
.search-ov-leadgen-btn svg{flex-shrink:0;color:#fff}
body.search-ov-open{overflow:hidden}
@media (min-width:769px){
  /* Desktop: panel becomes a centered dropdown anchored near the top, not full-screen. */
  .search-ov-backdrop{background:rgba(11,37,69,.32)}
  .search-ov-panel{position:absolute;top:80px;left:50%;transform:translate(-50%, 20px) scale(.96);width:min(720px, calc(100vw - 40px));height:auto;max-height:78vh;border-radius:16px;box-shadow:0 24px 60px rgba(11,37,69,.32);overflow:hidden}
  .search-ov.open .search-ov-panel{transform:translate(-50%, 0) scale(1)}
}
.mob-search-pill{cursor:pointer}

.hero-clean-input{flex:1;border:none;outline:none;font-size:16px;color:#0c1f38;background:transparent;font-family:inherit;padding:13px 4px;min-width:0;-webkit-appearance:none;appearance:none}
.hero-clean-input::placeholder{color:#94a3b8}
.hero-clean-geo{width:42px;height:42px;border:none;background:transparent;color:#475569;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hero-clean-geo:hover,.hero-clean-geo:active{background:#f1f5f9;color:#EA0649}
.hero-clean-geo svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0}
/* v141: explicit Search submit button — Zoocasa-style, sits at the right of the input */
.hero-clean-search-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#EA0649;color:#fff;border:none;
  height:46px;padding:0 22px;border-radius:10px;
  font-size:15px;font-weight:600;font-family:inherit;letter-spacing:.1px;
  cursor:pointer;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background .15s, transform .12s, box-shadow .15s;
  box-shadow:0 4px 12px rgba(158,13,54,.32);
}
.hero-clean-search-btn:hover{background:#CE2C44;box-shadow:0 6px 18px rgba(158,13,54,.42)}
.hero-clean-search-btn:active{transform:scale(.97)}
.hero-clean-search-btn svg{width:16px;height:16px;flex-shrink:0;display:block}
@media(max-width:768px){
  /* Mobile — keep the button compact, hide the word "Search", show the icon only */
  .hero-clean-search-btn{padding:0 12px;height:42px}
  .hero-clean-search-btn span{display:none}
}
/* v237: hero CTA row — Map Search + View Listings. Replaces the
   All/For Sale/For Rent/Sold/Precon tabs. */
.hero-clean-cta-row{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap;max-width:560px;margin-left:auto;margin-right:auto}
.hero-clean-cta{flex:1;min-width:160px;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:14px 20px;border-radius:14px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;border:none;transition:all .15s;-webkit-tap-highlight-color:transparent;touch-action:manipulation;letter-spacing:.1px;box-shadow:0 6px 20px rgba(11,37,69,.18)}
.hero-clean-cta svg{width:18px;height:18px;flex-shrink:0;display:block}
.hero-clean-cta-map{background:#EA0649;color:#fff}
.hero-clean-cta-map:hover{background:#CE2C44;box-shadow:0 8px 24px rgba(158,13,54,.45);transform:translateY(-1px)}
.hero-clean-cta-map:active{transform:translateY(0);box-shadow:0 4px 12px rgba(158,13,54,.35)}
.hero-clean-cta-list{background:#fff;color:#0c1f38;border:1.5px solid rgba(255,255,255,.85)}
.hero-clean-cta-list:hover{background:#f4f6f8;box-shadow:0 8px 24px rgba(11,37,69,.25);transform:translateY(-1px)}
.hero-clean-cta-list:active{transform:translateY(0)}
@media(max-width:520px){
  .hero-clean-cta-row{gap:8px;margin-top:12px}
  .hero-clean-cta{padding:12px 14px;font-size:14px;min-width:0}
}
.hero-clean-quicktype{display:inline-flex;flex-wrap:wrap;justify-content:center;gap:6px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:6px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero-clean-quicktype .htt{padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;color:rgba(255,255,255,.78);background:transparent;border:none;cursor:pointer;font-family:inherit;transition:all .12s;min-height:36px;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.hero-clean-quicktype .htt:hover{color:#fff;background:rgba(255,255,255,.08)}
.hero-clean-quicktype .htt.on{background:#EA0649;color:#fff;box-shadow:0 2px 8px rgba(158,13,54,.4)}
@media (max-width:600px){
  /* v11 Bug 1: mobile uses the same flex+spacer approach — no padding-top math.
     Just trim the inner padding for tighter mobile layout. */
  .hero-clean-inner{padding:18px 16px 32px}
  .hero-clean-h1{font-size:clamp(26px,8vw,38px);margin-bottom:10px}
  .hero-clean-sub{font-size:13.5px;margin-bottom:20px}
  .hero-clean-search{max-width:100%;padding:5px 5px 5px 12px}
  .hero-clean-input{font-size:16px;padding:12px 4px}
  .hero-clean-geo{width:42px;height:42px}
  .hero-clean-quicktype{gap:4px;padding:5px}
  .hero-clean-quicktype .htt{padding:7px 12px;font-size:12.5px}
}
.hero-dots{position:absolute;inset:0;opacity:.025;background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:42px 42px;pointer-events:none}
.hero-inner{position:relative;z-index:2;max-width:1320px;width:100%;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.hero-left{text-align:left}
.hero-right{position:relative}
.hero-map{width:100%;height:520px;border-radius:18px;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 70px rgba(0,0,0,.45),0 4px 16px rgba(0,0,0,.2);position:relative}
.hero-map-canvas{position:absolute;inset:0;background:linear-gradient(135deg,#dee5ec 0%,#f0f4f7 50%,#e3eaef 100%)}
/* v8 Bug 1: legacy "Loading map…" placeholder removed — the hero map element was
   replaced by .hero-clean in v7 but this CSS pseudo could still surface if the
   class was ever re-attached. Kill it to be safe. */
.hero-map-canvas.mapboxgl-map::after{display:none}
.hero-map-overlay{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);padding:10px 14px 10px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:10px;font-size:13.5px;font-weight:600;color:#0b2545;box-shadow:0 6px 20px rgba(0,0,0,.18);pointer-events:none}
.hero-map-overlay .h-pulse{width:7px;height:7px;border-radius:50%;background:#EA0649;box-shadow:0 0 0 0 rgba(169,0,48,.7);animation:pulse 1.6s infinite}
.hero-map-cta{position:absolute;right:18px;bottom:18px;background:#EA0649;color:#fff;padding:11px 18px;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;border:none;font-family:inherit;box-shadow:0 6px 18px rgba(184,20,66,.4);transition:all .18s cubic-bezier(.2,.8,.2,1);display:inline-flex;align-items:center;gap:7px;letter-spacing:-.1px}
.hero-map-cta:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 8px 22px rgba(184,20,66,.55)}
.hero-map-cta svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4}

@media (max-width: 1100px){
  .hero-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-left{text-align:center}
  .hero-map{height:380px}
}
@media (max-width: 600px){
  .hero-map{height:300px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.06)}
}
.h-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(122,11,42,.15);border:1px solid rgba(122,11,42,.3);border-radius:100px;padding:5px 14px;font-size:10px;font-weight:700;color:var(--teal2);letter-spacing:.7px;text-transform:uppercase;margin-bottom:20px;animation:fu .6s ease both}
/* Hero trust strip — surfaces "no call centers / no resellers / sold prices free" above the fold */
.h-trust{display:flex;flex-wrap:wrap;gap:10px 18px;margin:-12px 0 26px;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.78);animation:fu .6s .1s ease both}
.h-trust span{display:inline-flex;align-items:center;gap:6px;line-height:1.3}
.h-trust svg{stroke:#34d399;flex-shrink:0}
@media(max-width:640px){.h-trust{font-size:11.5px;gap:6px 14px;margin:-8px 0 22px}}
/* Precon tab — stands out vs the others */
.htt-precon{position:relative}
.htt-new{display:inline-block;margin-left:5px;padding:1px 5px;background:#f59e0b;color:#0c1f38;font-size:8px;font-weight:800;letter-spacing:.6px;border-radius:3px;vertical-align:top;line-height:1.4}
.h-pulse{width:6px;height:6px;border-radius:50%;background:var(--teal2);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
.hero h1{font-family:var(--serif);font-size:clamp(30px,6vw,68px);color:#fff;line-height:1.06;letter-spacing:-.5px;margin-bottom:16px;animation:fu .6s .06s ease both}
.hero h1 em{color:var(--teal2);font-style:italic}
.h-sub{font-size:15px;color:rgba(255,255,255,.52);line-height:1.7;max-width:460px;margin:0 auto 34px;animation:fu .6s .12s ease both}
.h-search{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(20px);border-radius:var(--rxl);padding:16px;width:100%;max-width:680px;animation:fu .6s .18s ease both}
.h-type{display:flex;gap:0;background:rgba(255,255,255,.08);border-radius:var(--r);padding:3px;width:fit-content;margin-bottom:14px}
.htt{padding:7px 18px;border-radius:4px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;color:rgba(255,255,255,.6)}
.htt.on{background:var(--teal);color:#fff}
.hs-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:8px;align-items:end}
.hsf label{display:block;font-size:10px;font-weight:700;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.hsf select{width:100%;padding:10px 11px;border:1.5px solid rgba(255,255,255,.12);border-radius:var(--r);font-size:13px;font-family:var(--sans);color:#fff;background:rgba(255,255,255,.08);outline:none;transition:border-color .15s;appearance:none}
.hsf select:focus{border-color:var(--teal2)}
.hs-btn{padding:11px 20px;background:#EA0649;color:#fff;border:none;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);display:flex;align-items:center;gap:6px;white-space:nowrap;box-shadow:0 3px 10px rgba(184,20,66,.4);transition:all .18s cubic-bezier(.2,.8,.2,1);letter-spacing:-.1px}
.hs-btn:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 5px 14px rgba(184,20,66,.5)}
.hs-btn svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2}
.hs-btn-map{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.3);box-shadow:none}
.hs-btn-map:hover{background:rgba(255,255,255,.08);border-color:#EA0649;color:#fff;box-shadow:none;transform:translateY(-1px)}
.h-stats{display:flex;margin-top:26px;animation:fu .6s .24s ease both;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--rxl);overflow:hidden}
.hs-s{padding:14px 20px;text-align:center}
.hs-s:not(:last-child){border-right:1px solid rgba(255,255,255,.07)}
.hs-sn{font-family:var(--serif);font-size:22px;color:var(--teal2)}
.hs-sl{font-size:9.5px;color:rgba(255,255,255,.38);margin-top:2px;letter-spacing:.3px}
@keyframes fu{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ── STICKY MOBILE BAR (mobile only) ── */
.sticky-bar{display:none;position:fixed;bottom:0;left:0;right:0;background:linear-gradient(to top, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.92) 60%, rgba(255,255,255,0) 100%);border-top:none;padding:24px 16px calc(10px + env(safe-area-inset-bottom,0px));z-index:450;box-shadow:none;pointer-events:none}
/* In map full-screen mode: pure transparent — only buttons float, nothing behind them */
body.map-fs .sticky-bar{background:transparent;padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px))}
.sticky-row{display:flex;gap:8px;pointer-events:none;justify-content:center}
.sticky-btn{flex:0 1 auto;padding:9px 18px;border:none;border-radius:var(--r);font-size:12.5px;font-weight:500;cursor:pointer;font-family:var(--sans);transition:all .15s;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;pointer-events:auto;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.sticky-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}
.sticky-btn-p{background:#EA0649;color:#fff;border:none}
.sticky-btn-p:hover{background:#EA0649}
.sticky-btn-s{background:#fff;color:var(--navy);border:none}
.sticky-btn-s:hover{background:#f4f6f8}
.sticky-btn-s svg{stroke:var(--navy)}

/* ── TOAST ── */
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:10px 15px;border-radius:var(--rlg);font-size:13px;font-weight:500;z-index:900;transform:translateY(70px);opacity:0;transition:all .25s;border-left:4px solid var(--teal);max-width:260px;box-shadow:var(--shlg)}
.toast.show{transform:translateY(0);opacity:1}
.toast.ok{border-left-color:var(--green)}
.toast.err{border-left-color:var(--red)}

/* ── NO RESULTS ── */
.no-res{padding:48px 20px;text-align:center;color:var(--mid);grid-column:1/-1}
.no-res-ico{font-size:36px;margin-bottom:11px}
.no-res h3{font-size:14px;font-weight:600;color:var(--navy);margin-bottom:5px}
.no-res p{font-size:12px;margin-bottom:14px}
.no-res button{padding:8px 18px;background:var(--navy);color:#fff;border-radius:var(--r);border:none;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--sans)}

/* ── FOOTER ── */
footer{background:var(--navy);padding:46px 32px 24px}
.fg-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:30px;max-width:1040px;margin:0 auto 30px}
.flogo{font-family:var(--serif);font-size:18px;color:#fff;margin-bottom:9px;cursor:pointer}
.flogo em{color:var(--teal2);font-style:italic}
.fdesc{font-size:12px;color:rgba(255,255,255,.34);line-height:1.7;max-width:220px;margin-bottom:8px}
.fbrk{font-size:10px;color:rgba(255,255,255,.2)}
.ftrreb{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:4px 8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:var(--r);font-size:9px;color:rgba(255,255,255,.27)}
.fcol h4{font-size:9.5px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:11px}
.fcol ul{list-style:none}
.fcol li{margin-bottom:7px}
.fcol a{font-size:12px;color:rgba(255,255,255,.38);transition:color .15s;cursor:pointer}
.fcol a:hover{color:#fff}
/* Newsletter signup band in footer */
.fnews{max-width:1040px;margin:0 auto 28px;padding:24px 28px;background:linear-gradient(135deg,rgba(184,20,66,.08),rgba(184,20,66,.02));border:1px solid rgba(184,20,66,.18);border-radius:14px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.fnews-l{flex:1;min-width:280px}
.fnews-eyebrow{font-size:10.5px;font-weight:700;color:#e37f9b;text-transform:uppercase;letter-spacing:1.5px;margin-bottom:6px}
.fnews-title{font-family:var(--serif);font-size:22px;font-weight:400;color:#fff;line-height:1.15;margin:0 0 6px;letter-spacing:-.3px}
.fnews-sub{font-size:13px;color:rgba(255,255,255,.7);line-height:1.5;margin:0;max-width:480px}
.fnews-form{display:flex;gap:8px;flex:1;min-width:280px;max-width:420px}
.fnews-inp{flex:1;padding:12px 14px;border:1.5px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(255,255,255,.05);color:#fff;font-size:14px;font-family:inherit;outline:none;transition:border-color .15s}
.fnews-inp::placeholder{color:rgba(255,255,255,.45)}
.fnews-inp:focus{border-color:#EA0649;background:rgba(255,255,255,.08)}
.fnews-btn{padding:12px 22px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;letter-spacing:-.1px}
.fnews-btn:hover{background:#EA0649;transform:translateY(-1px);box-shadow:0 4px 12px rgba(184,20,66,.4)}

/* Trust badges row */
.ftrust{max-width:1040px;margin:0 auto 22px;display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
.ftrust-badge{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:99px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.6);letter-spacing:.2px}
.ftrust-badge svg{width:13px;height:13px;stroke:#e37f9b;fill:none;stroke-width:2;flex-shrink:0}

@media(max-width:768px){
  .fnews{padding:20px 18px;flex-direction:column;align-items:stretch;gap:14px}
  .fnews-form{max-width:none;flex-direction:column}
  .fnews-btn{padding:14px}
  .ftrust{gap:8px}
  .ftrust-badge{font-size:10.5px;padding:6px 12px}
}

.fbot{max-width:1040px;margin:0 auto;border-top:1px solid rgba(255,255,255,.06);padding-top:18px;display:flex;justify-content:space-between;font-size:10px;color:rgba(255,255,255,.32);flex-wrap:wrap;gap:5px}
/* v6 Fix 10: Pre-construction landing page (Coming Soon + early-access capture) */
.precon-hero{min-height:80vh;background:linear-gradient(135deg,#0c1f38 0%,#13315c 100%);color:#fff;display:flex;align-items:center;justify-content:center;padding:64px 20px;position:relative;overflow:hidden}
.precon-hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(184,20,66,.16),transparent 60%);pointer-events:none}
.precon-hero-inner{position:relative;z-index:1;max-width:680px;width:100%;text-align:center}
.precon-eyebrow{display:inline-block;background:rgba(184,20,66,.16);border:1px solid rgba(184,20,66,.32);color:#e37f9b;padding:6px 14px;border-radius:99px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.2px;margin-bottom:18px}
.precon-title{font-family:var(--serif);font-size:clamp(34px,7vw,56px);line-height:1.08;letter-spacing:-.6px;margin:0 0 18px;color:#fff}
.precon-title em{color:#e37f9b;font-style:italic}
.precon-sub{font-size:15.5px;color:rgba(255,255,255,.72);line-height:1.6;margin:0 0 28px;max-width:520px;margin-left:auto;margin-right:auto}
.precon-form{display:flex;gap:8px;max-width:480px;margin:0 auto 18px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:6px}
.precon-email{flex:1;padding:13px 16px;border:none;background:transparent;color:#fff;font-size:15px;font-family:inherit;outline:none;min-width:0}
.precon-email::placeholder{color:rgba(255,255,255,.45)}
.precon-btn{padding:13px 20px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap;min-height:48px}
.precon-btn:hover{background:#CE2C44;transform:translateY(-1px);box-shadow:0 6px 18px rgba(158,13,54,.4)}
.precon-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 22px;font-size:12.5px;color:rgba(255,255,255,.62)}
.precon-trust span{display:inline-flex;align-items:center;gap:6px}
.precon-trust svg{stroke:#e37f9b}
.precon-cta{padding:24px 16px;text-align:center;background:#fff}
.precon-cta-back{display:inline-block;padding:10px 18px;color:#0c1f38;text-decoration:none;font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;font-family:inherit;transition:background .12s}
.precon-cta-back:hover{background:#f4f6f8}

/* ═══════════ v13 Fix 4 + 5: SOLD VIEW + LOCKED PRICE CARDS ═══════════ */
.sold-hdr{padding:calc(var(--navh,56px) + 22px) 18px 18px;background:linear-gradient(135deg,#0c1f38 0%,#143761 100%);color:#fff;text-align:center}
.sold-hdr-inner{max-width:680px;margin:0 auto}
.sold-eyebrow{display:inline-block;background:rgba(184,20,66,.16);border:1px solid rgba(184,20,66,.32);color:#e37f9b;padding:5px 12px;border-radius:99px;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:1.1px;margin-bottom:14px}
.sold-title{font-family:var(--serif),Georgia,serif;font-size:clamp(28px,6vw,40px);line-height:1.1;letter-spacing:-.4px;margin:0 0 10px;color:#fff;font-weight:400}
.sold-sub{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.55;margin:0;max-width:520px;margin-left:auto;margin-right:auto}
.sold-body{padding:18px 14px 100px;max-width:880px;margin:0 auto;position:relative}
.sold-grid{display:flex;flex-direction:column;gap:14px}
.sold-empty{padding:60px 20px;text-align:center;color:#6b7a8d;font-size:14px}
.sold-gate{position:sticky;bottom:14px;background:#fff;border:1px solid #e5e9ee;border-radius:14px;padding:22px 22px 18px;box-shadow:0 12px 32px rgba(11,37,69,.18),0 4px 12px rgba(11,37,69,.08);text-align:center;margin-top:18px;z-index:2}
body.sold-unlocked .sold-gate{display:none}
.sold-gate-icon{display:inline-flex;width:56px;height:56px;border-radius:50%;background:#f0f7f5;color:#EA0649;align-items:center;justify-content:center;margin-bottom:10px}
.sold-gate-title{font-family:var(--serif),Georgia,serif;font-size:22px;color:#0c1f38;margin:0 0 6px;font-weight:400;letter-spacing:-.3px}
.sold-gate-sub{font-size:13.5px;color:#5a6e84;line-height:1.5;margin:0 auto 16px;max-width:420px}
.sold-gate-actions{display:flex;flex-direction:column;gap:8px;max-width:280px;margin:0 auto}
.sold-gate-cta{padding:13px 18px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;min-height:48px;transition:background .12s}
.sold-gate-cta:hover{background:#CE2C44}
.sold-gate-alt{padding:11px 18px;background:transparent;color:#0c1f38;border:1px solid #d4dae2;border-radius:8px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;min-height:44px;transition:background .12s}
.sold-gate-alt:hover{background:#f4f6f8}

/* Sold listing card — Zolo/HouseSigma blurred-photo + tap-to-reveal pattern */
.sc{display:block;width:100%;background:#fff;border:1px solid #e5e9ee;border-radius:14px;overflow:hidden;cursor:pointer;text-align:left;font-family:inherit;padding:0;transition:box-shadow .15s,transform .15s;position:relative}
.sc:hover{box-shadow:0 8px 22px rgba(11,37,69,.13);transform:translateY(-1px)}
.sc-img{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:#dde3eb;position:relative;filter:blur(14px) brightness(.85);transition:filter .3s}
body.sold-unlocked .sc-img{filter:none}
.sc-badge{position:absolute;top:10px;padding:5px 10px;border-radius:6px;font-size:11px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#fff;line-height:1;backdrop-filter:blur(4px);box-shadow:0 1px 3px rgba(11,37,69,.18);z-index:2}
.sc-badge-sold{left:10px;background:#c0392b}
.sc-badge-dom{right:10px;background:rgba(12,31,56,.92)}
.sc-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(12,31,56,.55) 0%,rgba(20,55,97,.5) 100%);color:#fff;gap:8px;text-align:center;padding:14px;z-index:1}
body.sold-unlocked .sc-overlay{display:none}
.sc-overlay svg{stroke:#e37f9b;filter:drop-shadow(0 2px 6px rgba(11,37,69,.4))}
.sc-overlay-txt{font-size:13px;line-height:1.4;letter-spacing:-.1px}
.sc-overlay-txt strong{display:block;font-size:14.5px;font-weight:700;letter-spacing:.3px;font-feature-settings:"tnum" 1;margin-bottom:2px}
.sc-body{padding:12px 14px 14px}
.sc-price-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;margin-bottom:2px}
.sc-price{font-size:19px;font-weight:800;color:#0c1f38;letter-spacing:-.4px;font-feature-settings:"tnum" 1}
.sc-list{font-size:12px;color:#6b7a8d;text-decoration:line-through}
.sc-drop-row{font-size:12.5px;font-weight:600;color:#6b7a8d;margin-bottom:6px;letter-spacing:-.1px;line-height:1.2}
.sc-addr{font-size:13.5px;color:#0c1f38;font-weight:500;line-height:1.3;margin-bottom:6px}
.sc-mls{font-size:11px;color:#8a9aae;letter-spacing:.2px;text-transform:uppercase;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:881px){.sc-img{aspect-ratio:16/9}}

/* ═══════════ v13 Fix 5: Listing-detail PRICE-HISTORY blur + reveal overlay ═══════════ */
/* Re-uses the same gate pattern. Wrap the existing price-history block with class .ph-gate
   on the listing detail page; this CSS handles the styling. JS in the detail renderer
   adds/removes .ph-locked based on currentUser. */
.ph-gate{position:relative}
.ph-gate.ph-locked .ph-gate-content{filter:blur(7px) brightness(.95);user-select:none;pointer-events:none}
.ph-gate-overlay{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,246,248,.96));text-align:center;padding:18px;border-radius:12px;z-index:2;gap:8px}
.ph-gate.ph-locked .ph-gate-overlay{display:flex}
.ph-gate-overlay svg{stroke:#EA0649}
.ph-gate-overlay-title{font-family:var(--serif),Georgia,serif;font-size:18px;color:#0c1f38;font-weight:500;letter-spacing:-.2px}
.ph-gate-overlay-sub{font-size:13px;color:#5a6e84;line-height:1.45;max-width:300px}
.ph-gate-overlay-btn{padding:10px 18px;background:#EA0649;color:#fff;border:none;border-radius:8px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;min-height:44px;margin-top:4px}
.ph-gate-overlay-btn:hover{background:#CE2C44}
@media (max-width:600px){
  .precon-hero{padding:48px 18px;min-height:auto}
  .precon-form{flex-direction:column;padding:8px;gap:8px}
  .precon-btn{width:100%}
}

/* v6 Fix 9: Footer additions — App badges + pipe-separated link list + precon disclaimer */
.fapps{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:1040px;margin:0 auto 22px;padding:0 16px}
.fapp-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;background:#0c1f38;color:#fff;border:1px solid rgba(255,255,255,.18);border-radius:10px;text-decoration:none;font-family:inherit;transition:all .15s;min-height:48px}
.fapp-badge:hover{background:#13315c;border-color:rgba(255,255,255,.32);transform:translateY(-1px)}
.fapp-badge svg{flex-shrink:0;color:#fff}
.fapp-badge span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.fapp-badge small{font-size:9.5px;text-transform:uppercase;letter-spacing:.5px;color:rgba(255,255,255,.6);margin-bottom:1px}
.fapp-badge strong{font-size:14px;font-weight:600;color:#fff}
.fpipe{max-width:1040px;margin:0 auto 16px;padding:0 16px;font-size:11.5px;line-height:2;color:rgba(255,255,255,.32);text-align:center}
.fpipe a{color:rgba(255,255,255,.6);text-decoration:none;cursor:pointer;padding:0 6px;transition:color .12s}
.fpipe a:hover{color:#fff}
.fprecon-disc{max-width:1040px;margin:18px auto 12px;padding:0 16px;font-size:11px;color:rgba(255,255,255,.42)}
.fprecon-disc summary{cursor:pointer;font-weight:600;color:rgba(255,255,255,.7);padding:8px 0;list-style:none;font-size:11.5px}
.fprecon-disc summary::-webkit-details-marker{display:none}
.fprecon-disc[open] summary{color:#fff}
.fprecon-disc p{margin:8px 0 0;line-height:1.5;color:rgba(255,255,255,.42)}
.fdisc{max-width:1040px;margin:10px auto 0;font-size:9px;color:rgba(255,255,255,.14);line-height:1.6}
/* PROPTX IDX § 6.3(k) — bona-fide-consumer notice. Prominent (not collapsed),
   small-caps grey, ~12px, full-width line above the brokerage attribution. */
.v311-bona-fide{max-width:1040px;margin:18px auto 10px;padding:10px 14px;font-family:var(--sans);font-size:12px;line-height:1.5;letter-spacing:.4px;text-transform:uppercase;color:rgba(255,255,255,.55);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}

/* Mobile-only filter items (hidden by default, shown on mobile) */
.fm-mob-hdr,.fm-mob-only{display:none}
/* v6 Fix 6: kill the duplicate "Filters" header on mobile. The desktop
   .fm-hdr was rendering AT THE SAME TIME as .fm-mob-hdr at <=768px, both
   showing "Filters". Hide .fm-hdr at the breakpoint where .fm-mob-hdr takes over. */
@media (max-width: 768px){ .fm-hdr{display:none !important} }
/* v6 Fix 7: Maintenance fee filter is only meaningful For Sale.
   Hide .fm-row-sale-only when listing-status is rent/rented. */
body[data-list-type="rent"] .fm-row-sale-only,
body[data-list-type="rented"] .fm-row-sale-only{display:none}
.fm-lbl-sub{font-size:11px;color:var(--mid);font-weight:500;margin-left:4px}
.fm-apply-mob{display:none}
.fm-apply-dt{display:inline}
.mob-search-row{display:none}
.mob-dd-row{display:contents} /* desktop: flatten wrapper */

/* ── RESPONSIVE — condos.ca mobile style ──
   v30 BUG FIX: breakpoint was 960px which collapsed the desktop nav at 769–960px
   (iPad portrait, narrow desktop windows). User reported nav-links missing at
   "wide layout". Aligned to the rest of the codebase's 768px mobile breakpoint
   so any viewport ≥769px now shows the full For Sale / For Rent / Sold / Home
   Value / Mortgage Calc / Talk to Agent rail. */
@media(max-width:768px){
  /* Nav: hide desktop search/links/auth-zone, show Map + hamburger */
  .nav-links,.nav-search{display:none}
  .nav-r{display:flex}
  /* Mobile: Alerts shows just the bell icon (saves space), Join Free pill stays */
  .nav-r .nav-auth-btn{padding:6px 8px;font-size:12px}
  .nav-r .nav-auth-btn svg{width:18px;height:18px}
  /* v24 Fix 7: drop the bell icon entirely on mobile — header was crowded
     at 375px (logo + bell + Join Free + hamburger). Alerts feature is still
     reachable via the hamburger menu's "Listing Alerts" link and the bot-nav. */
  .nav-r .nav-auth-alerts{display:none !important}
  .nav-r .nav-auth-alerts span{display:none} /* legacy fallback */
  .nav-r .nav-auth-divider{display:none}
  .nav-r .nav-auth-join{padding:7px 12px !important;font-size:12px !important}
  .mob-btn{display:flex;align-items:center;justify-content:center}
  .nav{padding:0 10px;height:56px;gap:4px}
  .logo{flex:1;min-width:0}
  .logo-name{font-size:18px}

  /* Filter bar — TIGHT padding all around to push everything up close to the nav */
  .fbar{height:auto;padding:6px 12px 6px;flex-direction:column;gap:6px;align-items:stretch;border-bottom:none;box-shadow:none;background:rgba(255,255,255,.78);backdrop-filter:saturate(180%) blur(16px);-webkit-backdrop-filter:saturate(180%) blur(16px);z-index:400 !important;overflow:visible !important;pointer-events:auto !important}
  /* CRITICAL: ensure mobile filter bar buttons are tappable (defensive against any layered overlay blocking) */
  .fbar .mob-search-row,.fbar .mob-dd-row,.fbar .type-wrap,.fbar .price-wrap,.fbar .type-btn,.fbar .price-btn,.fbar .mob-filter-icon,.fbar input,.fbar select{pointer-events:auto !important;position:relative;z-index:1}
  /* Mobile top row: search box + filter icon */
  .mob-search-row{display:flex;gap:0;align-items:center;background:var(--white);border:1.5px solid var(--light);border-radius:var(--r);overflow:hidden;height:38px}
  .mob-search-row input{flex:1;padding:0 14px;border:none;font-size:14px;color:var(--navy);outline:none;background:transparent;height:100%;font-family:var(--sans)}
  .mob-search-row input::placeholder{color:var(--mid)}
  .mob-filter-icon{width:38px;height:38px;border-left:1.5px solid var(--light);background:var(--white);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--navy);flex-shrink:0}
  .mob-filter-icon svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
  /* v14 Fix 6: pill variant — icon + "Filter" text label, brand teal, white bg, light border */
  .mob-filter-pill{width:auto !important;height:auto !important;min-height:42px;padding:0 12px 0 10px;border:1.5px solid var(--light);border-radius:99px;background:#fff;color:#EA0649;display:inline-flex;align-items:center;justify-content:center;gap:6px;flex-shrink:0;font-family:inherit;font-size:13.5px;font-weight:600;letter-spacing:-.1px;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:background .12s,border-color .12s,color .12s}
  .mob-filter-pill svg{width:16px;height:16px;color:#EA0649;stroke:currentColor}
  .mob-filter-pill:hover,.mob-filter-pill:focus-visible{background:#faf0f3;border-color:#EA0649}
  .mob-filter-pill:focus-visible{outline:2px solid #EA0649;outline-offset:2px}
  .mob-filter-pill-lbl{line-height:1}

  /* Below search: For Rent + Price 2-column */
  .fbar .type-wrap,.fbar .price-wrap{flex:1}
  .fbar .type-btn,.fbar .price-btn{width:100%;padding:9px 14px;font-size:14px;font-weight:500;border-radius:var(--r);border:1.5px solid var(--light);background:var(--white);justify-content:space-between;color:var(--navy)}
  .fbar .type-btn.on,.fbar .price-btn.on{background:var(--white);color:var(--navy)} /* keep white bg on mobile */

  /* Hide the desktop-only top-bar items on mobile: filter button + alerts (mobile uses bottom bar) */
  .fbar .more-btn,.fbar .alert-btn,.fbar .fb-sep{display:none}

  /* Row of dropdowns only */
  .mob-dd-row{display:flex;gap:8px;width:100%}

  /* Layout — white base so cards float on a clean canvas, but the fbar/lb-row stay frosted-glass */
  .main{flex-direction:column;height:auto;overflow:visible;margin-top:calc(var(--navh) + var(--mob-fh));background:#fff}
  /* v311 Fix 1: padding-bottom 96 (was 88) — gives cards a stable cushion above
     the now z-600 bot-tabs and absorbs iOS safe-area variation. */
  /* v=472 — setView('mixed') sets listPane.style.width='55%' inline (line
     ~11733), which on mobile clamps the toolbar to 215px and pushes the chips
     toolbar half off-screen. Force 100% via !important so the inline style
     loses on phone viewports. The map-pane is a separate fixed overlay on
     mobile (CSS at line 8278+); list-pane stacking below the fbar is the
     correct mobile layout. */
  .list-pane{width:100% !important;height:auto;border-right:none;overflow:visible;max-height:none;padding-bottom:96px;background:#fff}
  .cards-mixed,.cards-grid,.cards-list{background:#fff}
  body,body.in-search{background:#fff}
  /* iOS overscroll bleed prevention — root and html stay white so rubber-band shows white not navy */
  html,html.in-search{background:#fff}
  /* v268: dropped backdrop-filter blur on .lb-row and the body::after seal.
     iOS Safari was dropping the blurred surface during fast scroll, which
     caused the brief "header disappears then comes back" flicker. Solid
     white is faster and stable. */
  .lb-row{background:#fff !important}
  .cards-scroll{overflow:visible !important;flex:none !important;min-height:auto !important;background:transparent !important}
  /* Lock lb-row tabs to top — flush against fbar bottom (NO overlap, so For Sale/Price buttons remain tappable) */
  /* v=429t — Item 87: bump the sticky lb-row backdrop to a strongly opaque
     fully solid #fff with a more visible bottom shadow so cards scrolling
     under it don't bleed through. The previous .04 shadow was too subtle
     and let the photo top edge appear partially clipped behind the
     toolbar — looked like a render bug. */
  .lb-row{position:sticky !important;top:calc(var(--navh) + var(--mob-fh)) !important;z-index:200;background:#ffffff !important;background-color:#ffffff !important;border-bottom:1px solid rgba(11,37,69,.10);border-top:none;padding:8px 16px 8px !important;margin-top:0;box-shadow:0 6px 16px rgba(11,37,69,.10)}
  /* v=454 P1-2 — when the satellite cdgnv chrome is fully active and the navy
     header is at top=0, the calc(var(--navh)+var(--mob-fh)) offset
     occasionally misreads as 0 mid-scroll, letting lb-row slide under the
     nav. Snap top to a measured 72px floor as a safety net. */
  .lb-row{top:max(72px, calc(var(--navh) + var(--mob-fh))) !important}
  /* v=454 P1-11 — single-column listing cards at narrow mobile widths so
     they fit fully inside a 390px viewport without right-edge clipping. */
  .cards-mixed,.cards-grid,.cards-list{grid-template-columns:1fr !important;box-sizing:border-box}
  .cards-mixed > *,.cards-grid > *,.cards-list > *{min-width:0;max-width:100%;box-sizing:border-box}
  /* SOLID white seal under the fbar (was a blurred translucent strip — too
     expensive on iOS Safari during scroll). z-index 150: below lb-row,
     above cards. */
  body.in-search::after{content:"";position:fixed;top:var(--navh);left:0;right:0;height:var(--mob-fh);background:#fff;z-index:150;pointer-events:none}
  body.map-fs.in-search::after{display:none}
  /* Show the Filter button on mobile (it sits next to Sort) */
  .filter-link{display:inline-flex !important}
  /* Pull the toggle 4px left so its visual edge aligns with the For Sale/Price filter buttons above */
  .lb-row .lb-toggle{margin-left:-4px}
  /* WHITE SHIELD: extends above sticky lb-row to cover any gap between fbar and tabs */
  /* Removed the white shield ::before — was creating shadow artifacts on scroll */
  /* Smaller heading on mobile - centered, regular weight */
  .page-title{font-size:13px;font-weight:500}
  .page-title-wrap{padding:8px 16px 4px;text-align:center}
  .market-stats-banner{margin:6px 16px 0;padding:12px 14px}
  .msb-text{font-size:13px}
  .map-pane{display:none;position:fixed;top:calc(var(--navh) + var(--mob-fh));bottom:0;left:0;right:0;margin:0;border-radius:0;z-index:320}
  .map-pane.show{display:block}
  /* Fullscreen map: hide filter bar, raise map above nav */
  body.map-fs .fbar{display:none}
  body.map-fs .map-pane{top:var(--navh)}
  /* v180: hide the v156 white-drawer entirely — it was creating the white
     stripe behind the Alert me of new listings pill. The top-left
     "Back to list" pill + bot-tabs Listings tab already cover navigation. */
  body.map-fs .map-mob-count{ display:none !important }
  .map-mob-count{ display:none !important }
  #map{position:absolute;inset:0}
  /* v5: show List/Mixed/Map toggle on mobile too — Condos.ca pattern (IMG_4396 has it) */
  .map-controls-top{top:8px;transform:translateX(-50%) scale(.85);transform-origin:top center}
  .map-controls-top .vcb{min-width:64px !important;padding:0 10px !important;height:36px !important;font-size:11.5px !important}
  .map-controls-top .vcb-label{font-size:11.5px !important}
  .map-controls-top .vcb svg{width:14px !important;height:14px !important}
  /* v4 Fix 2: right-side rail is HIDDEN on mobile (replaced by .mob-map-toolbar at the bottom). */
  .map-controls-bottom{display:none !important}
  /* v5: keep view-ctrl-group visible on mobile but compact */
  .view-ctrl-group{box-shadow:0 4px 14px rgba(11,37,69,.18)}

  /* Mobile map: floating pill + bottom count + back button */
  .map-mob-alert{display:flex;position:fixed;bottom:calc(64px + env(safe-area-inset-bottom,0px) + 16px);left:50%;transform:translateX(-50%);background:var(--white);border:1px solid var(--light);border-radius:100px;padding:10px 18px;align-items:center;gap:8px;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer;z-index:325;font-size:13px;font-weight:600;color:var(--navy);white-space:nowrap}
  .map-mob-alert svg{width:14px;height:14px;stroke:var(--teal);fill:none;stroke-width:2;flex-shrink:0}
  .map-mob-count{display:block;position:absolute;bottom:0;left:0;right:0;background:var(--white);padding:16px 16px calc(16px + env(safe-area-inset-bottom,0px));text-align:center;font-size:14px;font-weight:500;color:var(--navy);border-top:1px solid var(--light);z-index:10}
  .map-mob-count strong{font-weight:700}
  .map-mob-close{display:flex;position:absolute;top:10px;left:10px;background:var(--white);border:1px solid var(--light);border-radius:var(--r);padding:7px 11px;align-items:center;gap:5px;cursor:pointer;z-index:600;font-size:12.5px;font-weight:600;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.12);pointer-events:auto !important;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
  .map-mob-close:active{background:#f1f5f9}
  .map-mob-close svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.5}

  /* Cards single-column on mobile (like condos.ca) */
  /* v243: bump specificity so any later cards-grid/cards-mixed rule can't
     reintroduce 2 columns on phone. User explicitly wants ONE listing per
     row so they can scroll down to see the rest. */
  #cards.cards-grid,
  #cards.cards-mixed,
  .cards-grid,
  .cards-mixed{grid-template-columns:1fr!important;padding:6px 12px 16px;gap:16px}
  /* v=481 — kill the horizontal swipe carousel on mobile. The "peek next
     card" pattern looked like broken horizontal-overflow on /toronto/...-for-sale
     deep-link loads. Force single-column stacking so list and mixed views
     behave identically on phone. */
  body.cdg-view-mixed .cards-mixed,
  body.in-mixed .cards-mixed{
    display:grid !important;
    flex-direction:column !important;
    grid-template-columns:1fr !important;
    overflow-x:hidden !important;
    overflow-y:visible !important;
    scroll-snap-type:none !important;
    padding:6px 12px 16px !important;
    gap:16px !important;
  }
  body.cdg-view-mixed .cards-mixed > .card,
  body.in-mixed .cards-mixed > .card{
    flex:initial !important;
    width:auto !important;
    max-width:100% !important;
    min-width:0;
    scroll-snap-align:none !important;
  }
  .cards-list{padding:0}
  .cards-list .card{flex-direction:column;gap:0}
  .cards-list .ci{width:100%;height:260px}

  /* Cards bigger on mobile — condos.ca style with subtle border */
  .card{border-radius:10px;border:1px solid var(--light);box-shadow:none;overflow:hidden}
  .ci{height:200px;border-radius:0}
  .cprice{font-size:22px}

  /* Page title — hidden on mobile (count is the title) */
  .list-hdr{padding:16px 14px 10px}
  .list-hdr .sort-sel{display:none}

  /* Sticky bottom bar: Map + Create Alert (side by side) — also visible while in full-screen map mode */
  body.in-search .sticky-bar,body.map-fs .sticky-bar{display:block}
  .sticky-row{flex-direction:row;justify-content:center;gap:10px;max-width:420px;margin:0 auto}
  .sticky-btn{max-width:180px;flex:1 1 auto}

  /* Mobile: Type + Price dropdowns become bottom-sheet modals (condos.ca pattern) */
  .type-dd,.price-dd{position:fixed!important;top:auto!important;left:0!important;right:0!important;bottom:0!important;width:100%!important;max-width:none!important;margin:0!important;border-radius:20px 20px 0 0!important;padding:32px 20px calc(28px + env(safe-area-inset-bottom,0px))!important;z-index:610;box-shadow:0 -10px 40px rgba(11,37,69,.28)!important;background:#fff!important;border:none!important;animation:bottomSheetUp .28s cubic-bezier(.2,.8,.2,1);min-height:280px;max-height:75vh;overflow-y:auto}
  /* SCREEN LOCK: when a bottom-sheet is open, freeze the page underneath so iOS overscroll cannot reveal the hero/badge */
  /* v8 Bug 3: replaced :has() (Safari <15.4 / Chrome <105 silently fails) with
     explicit body classes. JS sets/clears these synchronously with the dd state. */
  body.type-dd-open,body.price-dd-open{overflow:hidden !important;position:fixed !important;width:100% !important;height:100% !important;touch-action:none !important}
  html.type-dd-open-html,html.price-dd-open-html{overflow:hidden !important;height:100% !important}
  /* DARK BACKDROP behind the bottom-sheet (taps dismiss the sheet) */
  /* v8 Bug 3: backdrop also driven by explicit body classes (no :has) */
  body.type-dd-open::before,body.price-dd-open::before{content:"";position:fixed;inset:0;background:rgba(11,37,69,.5);z-index:609;animation:fadeIn .25s ease;pointer-events:auto}
  /* Type dropdown items — bigger taps, clearer hierarchy */
  .type-dd .type-dd-item{padding:16px 14px !important;font-size:16px !important;border-radius:10px !important;border-bottom:1px solid #f0f3f6;display:block;color:#0c1f38;font-weight:500}
  .type-dd .type-dd-item:last-child{border-bottom:none}
  .type-dd .type-dd-item:active{background:#f4f6f8}
  .type-dd .type-dd-item.on{background:#f0f7f5 !important;color:#EA0649 !important;font-weight:700 !important}

  /* PRICE dropdown — billion-$ mobile polish */
  .price-dd .pd-current{display:block !important;text-align:center;font-size:18px !important;font-weight:700 !important;color:#0c1f38 !important;background:transparent !important;padding:0 0 18px !important;margin:0 !important;font-family:var(--sans)}
  .price-dd .pd-slider-wrap{margin:8px 14px 26px !important;height:36px !important}
  .price-dd .pd-slider-track{height:6px !important;background:#e5e9ed !important;border-radius:99px}
  .price-dd .pd-slider-fill{height:6px !important;background:#EA0649 !important;border-radius:99px}
  .price-dd .pd-inputs{margin-bottom:24px !important;align-items:center}
  .price-dd .pd-inp{padding:14px 12px !important;font-size:16px !important;border:1.5px solid #e5e9ed !important;border-radius:12px !important;color:#0c1f38 !important;background:#fff !important;text-align:center !important;font-weight:600;min-height:50px}
  .price-dd .pd-inp:focus{border-color:#EA0649 !important;outline:none !important;box-shadow:0 0 0 3px rgba(184,20,66,.12) !important}
  .price-dd .pd-dash{color:#94a3b8 !important;font-size:18px !important;font-weight:300}
  .price-dd .pd-actions{margin-top:8px !important;gap:10px !important}
  .price-dd .pd-cancel{flex:0 0 auto !important;padding:14px 22px !important;font-size:15px !important;color:#64748b !important;font-weight:600 !important;background:transparent !important;border:1.5px solid #e5e9ed !important;border-radius:12px !important;cursor:pointer !important;font-family:inherit;min-height:50px}
  .price-dd .pd-cancel:hover{border-color:#0c1f38 !important;color:#0c1f38 !important}
  .price-dd .pd-apply-btn{flex:1 !important;padding:14px !important;font-size:15.5px !important;font-weight:700 !important;background:#EA0649 !important;color:#fff !important;border:none !important;border-radius:12px !important;letter-spacing:.2px !important;box-shadow:0 4px 14px rgba(184,20,66,.4) !important;min-height:50px;cursor:pointer;font-family:inherit}
  .price-dd .pd-apply-btn:hover{background:#EA0649 !important}
  /* Backdrop: dark overlay covering everything else when dropdown is open */
  .type-dd.open::before,.price-dd.open::before{content:'';position:fixed;inset:0;background:rgba(11,37,69,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:-1;animation:fadeIn .25s ease}
  /* Drag handle at top of bottom sheet */
  .type-dd::after,.price-dd::after{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:#cbd5d1;pointer-events:none}
  @keyframes bottomSheetUp{from{opacity:0;transform:translateY(100%)} to{opacity:1;transform:translateY(0)}}
  @keyframes slideDown{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}
  /* Price slider: ensure both handles visible within the modal */
  .pd-slider-wrap{margin:0 10px 24px!important}
  .pd-inputs{grid-template-columns:1fr auto 1fr!important;gap:10px!important}
  .pd-actions{justify-content:space-between!important;gap:12px!important;padding-top:8px!important}
  .pd-apply-btn{flex:1;padding:14px 20px!important;font-size:15px!important;background:#EA0649!important;color:#fff!important;border-radius:10px!important;font-weight:600!important;box-shadow:0 4px 14px rgba(184,20,66,.4)!important}
  .pd-cancel{flex:0 0 auto;padding:12px 20px!important;font-size:15px!important;color:var(--navy)!important;font-weight:500!important}
  .pd-mob-hdr{display:none!important} /* no header needed — dropdown style */

  /* Filter panel goes full-screen on mobile */
  .fm-ov{position:fixed;top:0;left:0;right:0;bottom:0;width:100%;z-index:650;transform:translateY(100%);transition:transform .25s var(--ease);opacity:1;border-right:none;display:flex;flex-direction:column}
  .fm-ov.open{transform:translateY(0);opacity:1}
  .fm{height:100vh;display:flex;flex-direction:column}
  .fm-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .fm-mob-hdr{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--light);background:var(--white);flex-shrink:0;position:relative}
  .fm-mob-back{background:none;border:none;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--teal);padding:0}
  .fm-mob-back svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5}
  .fm-mob-title{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--navy);position:absolute;left:50%;transform:translateX(-50%)}
  .fm-mob-clear{background:none;border:none;color:var(--teal);font-size:14px;font-weight:600;cursor:pointer;font-family:var(--sans);padding:8px}
  .fm-mob-only{display:grid}
  .fm-row{grid-template-columns:1fr;gap:10px;padding:16px 0}
  .fm-lbl{padding-top:0;font-size:14px}
  .fm-body{padding:0 18px 18px}
  /* v25: chip rows use the compact-chip pattern (8px 14px / 13px font / 36px
     min-height / 99px pill / 6px gap) — no more 2-column grid blow-up. Chips
     wrap naturally to multiple rows when the row gets full. */
  #fm-beds,
  #fm-hometype,
  #fm-amens{display:flex !important;flex-wrap:wrap !important;gap:6px !important;grid-template-columns:none !important}
  #fm-beds .fc,
  #fm-hometype .fc,
  #fm-amens .fc{padding:8px 14px;font-size:13px;text-align:center;width:auto;min-height:36px;border-radius:99px;font-weight:600}
  /* Exposure (compass directions) keeps its 4-col grid because the labels are
     single chars (N/S/E/W). Just shrink the padding to match. */
  #fm-exposure{display:grid!important;grid-template-columns:repeat(4,1fr);gap:6px}
  #fm-exposure .fc{text-align:center;padding:8px 4px;font-size:13px;min-height:36px;border-radius:99px;font-weight:600}
  /* Property type uses the same compact pill chip — wrap, don't stack. */
  #fm-proptype{display:flex !important;flex-wrap:wrap !important;gap:6px !important}
  #fm-proptype .fc{padding:8px 14px;font-size:13px;width:auto;min-height:36px;border-radius:99px;font-weight:600;margin-bottom:0}
  /* Stepper: full width */
  .fm-stepper{width:100%;justify-content:space-between;padding:8px 12px}
  .fm-step-val{flex:1;font-size:14px}
  .fm-step-btn{width:36px;height:36px;font-size:20px}
  /* Selects full-width */
  .fm-selects,.fm-selects-1{grid-template-columns:1fr;max-width:none}
  .fm-select{padding:14px;font-size:14px}
  .fm-inp{padding:12px;font-size:14px}

  /* v27: tighter sticky footer — 14px → 10px vertical */
  .fm-foot{padding:10px 14px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .fm-reset{display:none}
  .fm-apply{flex:1;padding:11px;font-size:14px;min-height:44px}
  .fm-apply-dt{display:none}
  .fm-apply-mob{display:inline}

  /* v86: REVERTED — mobile listing detail back to full-screen takeover the
     way it was before v85. Desktop modal stays centered (the existing rule
     at the top of this file at line 2275 already centers it on desktop). */
  .modal-ov{align-items:stretch;padding:0;backdrop-filter:none;background:var(--white)}
  .modal{max-width:100%;max-height:100vh;height:100vh;border-radius:0;box-shadow:none}
  .m-topbar{display:flex}
  .m-gallery{height:260px}
  .m-addr{font-size:16px}
  .m-addr-sub{font-size:12.5px}
  .m-price{font-size:28px}
  .m-sec{padding:18px 16px}
  .m-sec-t{font-size:18px}
  .m-quick-stats{padding:0 16px 14px}
  .m-quick-stats-2{padding-top:14px}
  .m-cta{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));grid-template-columns:1.4fr 1fr 46px;gap:6px}
  .m-cta .cta{font-size:13.5px;padding:0 10px}
  .m-cta .cta-icon{width:46px}
  footer .fg-grid{grid-template-columns:1fr 1fr;gap:22px}
  .hs-row{grid-template-columns:1fr 1fr}
  .m-stats{grid-template-columns:repeat(2,1fr)}
  .m-dg{grid-template-columns:1fr 1fr}
  .m-cta-3{grid-template-columns:1fr 1fr}
}

/* v313: mobile listing-detail photo gallery — match the desktop layout
   (1 large hero photo + 2-up thumbnail grid below). Scott's clarified spec:
   the mobile gallery should mirror desktop instead of being a single swipe
   carousel. We hide the legacy .m-gallery carousel on mobile listing detail
   and surface the existing .v65-photogrid (hero + thumbs) in a vertical
   stack. The full-screen lightbox is also retuned to fill 100vw × 100vh
   with a black backdrop (no navy bars). */
@media (max-width:768px){
  body.in-listing-detail .m-gallery{ display:none !important }
  body.in-listing-detail .v65-photogrid{
    display:grid !important;
    grid-template-rows:auto auto;
    gap:4px;
    width:100vw;
    margin-left:calc(-1 * (100vw - 100%) / 2);
    padding:0 !important;
    background:#000;
    height:auto !important;
    grid-template-columns:1fr !important;
    flex-shrink:0;
  }
  body.in-listing-detail .v65-photogrid-hero{
    aspect-ratio:4/3;
    width:100%;
    /* v=503AA — light grey fallback BG (was #0c1f38 navy) so when
       the JS-set background-image hasn't loaded or photoUrl returns
       empty, the user sees a neutral placeholder, not the alarming
       "dark navy hero" that read as a broken page on iPhone. */
    background:#eef2f5 center/cover no-repeat;
    cursor:zoom-in;-webkit-tap-highlight-color:transparent;
    position:relative;overflow:hidden;
  }
  body.in-listing-detail .v65-photogrid-thumbs{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:auto !important;
    gap:4px;
  }
  body.in-listing-detail .v65-photogrid-thumb{
    aspect-ratio:4/3;
    width:100%;
    background:#0c1f38 center/cover no-repeat;
    cursor:zoom-in;-webkit-tap-highlight-color:transparent;
    position:relative;overflow:hidden;min-width:0;min-height:0;
  }
  body.in-listing-detail .v65-photogrid-thumb-empty{ background:#1a2b48 }
  body.in-listing-detail .v65-photogrid-allbtn{
    position:absolute;right:14px;bottom:14px;z-index:5;
    background:#fff;color:#0c1f38;border:none;border-radius:8px;
    padding:9px 14px;font-size:12.5px;font-weight:700;
    display:inline-flex;align-items:center;gap:7px;cursor:pointer;
    font-family:inherit;
    box-shadow:0 6px 18px rgba(0,0,0,.20),0 1px 2px rgba(0,0,0,.08);
    letter-spacing:-.1px;
  }
  body.in-listing-detail .v65-photogrid-allbtn svg{ width:14px;height:14px;flex-shrink:0 }
  /* Full-screen photo viewer (lightbox): fill the viewport edge-to-edge. */
  body.in-listing-detail .lb-img{
    max-width:100vw;
    max-height:100vh;
    border-radius:0;
    background:#000;
  }
  body.in-listing-detail .lb-backdrop{ background:#000 }
  /* v313: defensive mobile scroll guarantee — make absolutely sure that
     when the listing-detail full-page is open, content past the gallery
     (price, beds/baths, listing details, amenities, About, MLS#) can be
     reached by scrolling. The modal already scrolls internally via
     overflow-y:auto, but we re-assert it here in case any earlier rule
     locked it. The sticky "Request a viewing" CTA (.v42-detail-cta) is
     position:fixed and stays pinned through scroll. */
  body.in-listing-detail .modal{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior:contain;
  }
  body.in-listing-detail .modal-ov{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v314 BUG-FIX BUNDLE — bundle of three fixes per Scott (May 2026):
   1. Mobile fullscreen photo-viewer chevrons. v313's @media (max-width:640px)
      patch missed phones in the 641-768px range (large Android handsets,
      iPhone Pro Max landscape). We re-assert .lb-prev / .lb-next visibility
      at 768px with !important AND register a parallel pair of belt-and-
      braces buttons (.v311-photo-prev / .v311-photo-next) that get injected
      into the lightbox overlay at runtime by JS — high z-index, fixed pos,
      can't be smothered by any earlier CSS rule.
   2. Mobile listing detail content (price, beds/baths, Highlights, Amenities,
      About, Maintenance Fees, sticky "Request a viewing" CTA) — defensive
      display:block !important + scroll guarantees so the gallery edit
      cannot accidentally bury the listing info below the fold.
   3. Bottom-tab active-state sync — _v311UpdateBotTabs(view) helper hooked
      into _v310Apply + popstate so the highlight always reflects the
      current view, regardless of which navigation path got us there.
   ═══════════════════════════════════════════════════════════════════════════ */

/* v314 Bug 1 — extra chevron buttons (injected by JS at runtime) */
.v311-photo-prev,
.v311-photo-next{ display:none }
@media (max-width:768px){
  /* Re-assert v313 mobile chevron visibility at the 768px breakpoint, with
     !important so any later rule that flipped them to display:none can't win. */
  .lb-prev,
  .lb-next{
    display:flex !important;
    z-index:99 !important;
    pointer-events:auto !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  /* Belt-and-braces extra chevrons. Hidden when fullscreen viewer is closed. */
  body.lb-open .v311-photo-prev,
  body.lb-open .v311-photo-next{
    position:fixed !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:999999 !important;
    width:44px !important;
    height:44px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,0.95) !important;
    color:#0c1f38 !important;
    border:none !important;
    font-size:30px !important;
    font-weight:600 !important;
    cursor:pointer !important;
    box-shadow:0 4px 12px rgba(0,0,0,0.4) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    padding:0 0 4px 0 !important;
    font-family:inherit !important;
    -webkit-tap-highlight-color:transparent !important;
    margin:0 !important;
  }
  body.lb-open .v311-photo-prev{ left:12px !important }
  body.lb-open .v311-photo-next{ right:12px !important }
  body:not(.lb-open) .v311-photo-prev,
  body:not(.lb-open) .v311-photo-next{ display:none !important }
}

/* v314 Bug 2 — defensive: explicitly show every listing-info section on
   mobile when a listing is open, so a recent display:none rule cannot
   accidentally bury the info beneath the photo gallery. */
@media (max-width:768px){
  body.in-listing-detail .v112-addr-block,
  body.in-listing-detail .v114-facts-sec,
  body.in-listing-detail .v115-history-sec,
  body.in-listing-detail .m-body{
    display:block !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  body.in-listing-detail .v112-stats-block{
    display:flex !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  /* Every .m-sec on mobile (Highlights, Amenities, Maintenance Fees, About,
     MLS#, etc.) — except the legacy v116-old-property-details we explicitly
     hide elsewhere. */
  body.in-listing-detail .m-sec:not(#v116-old-property-details):not(#m-similar-sec):not(#m-recent-sec){
    display:block !important;
    visibility:visible !important;
  }
  /* Sticky "Request a viewing" CTA at the bottom — must always be tappable. */
  body.in-listing-detail .v42-detail-cta{
    display:block !important;
    visibility:visible !important;
    pointer-events:none !important; /* wrapper is transparent on mobile */
  }
  body.in-listing-detail .v42-detail-cta .v307-mob-cta-row,
  body.in-listing-detail .v42-detail-cta .v307-mob-cta,
  body.in-listing-detail .v42-detail-cta button,
  body.in-listing-detail .v42-detail-cta a{
    pointer-events:auto !important;
  }
  /* Re-assert modal scroll past the gallery — same intent as v313's rule but
     more specific and stronger so any later overflow:hidden cannot block it. */
  html:has(body.in-listing-detail),
  body.in-listing-detail,
  body.in-listing-detail .modal-ov,
  body.in-listing-detail #modal,
  body.in-listing-detail .modal{
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  /* Leave breathing room at the very bottom so content can scroll above the
     sticky CTA + bot-tabs (which are themselves hidden on listing detail, but
     the CTA pill is fixed at bottom:20px). */
  body.in-listing-detail .modal{
    padding-bottom:120px !important;
  }
}

@media(max-width:480px){
  .hs-row{grid-template-columns:1fr}
  .fg-row{grid-template-columns:1fr}
  .h-stats{flex-wrap:wrap}
  footer .fg-grid{grid-template-columns:1fr}
  .m-dg{grid-template-columns:1fr}
  .m-cta-row{grid-template-columns:1fr}
  .m-cta-3{grid-template-columns:1fr}
}
/* iPhone safe area */
@supports(padding-bottom: env(safe-area-inset-bottom)){
  .fbar{padding-bottom:0}
  .sticky-bar{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE POLISH PASS — comprehensive fixes for spacing, text, touch targets
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  /* CURVE KILLER: any element directly under the nav with rounded bottom corners gets squared off.
     This is a defensive sweep — catches any stray pseudo-element, dropdown, or popup that might
     bleed under the fixed nav and create the navy "tongue" effect Scott has been hunting */
  .nav::before,.nav::after{display:none !important}
  /* Nuke any popup/dropdown that's hanging off the nav */
  .nav-user-dd,.nav-auth-dd{border-top-left-radius:0 !important;border-top-right-radius:0 !important}
  /* Force the nav to render with a hard-edged bottom (no shadow, no border-radius bleed) */
  .nav{border-bottom:none !important;box-shadow:none !important;border-radius:0 !important}

  /* === HOMEPAGE HERO POLISH === */
  /* Make hero text sizing more breathable on mobile */
  .hero{padding:48px 18px 36px !important;min-height:auto !important}
  .hero h1{font-size:clamp(28px,7vw,40px) !important;letter-spacing:-.4px;margin-bottom:14px}
  .h-sub{font-size:14.5px !important;line-height:1.55 !important;margin-bottom:22px !important}
  /* GTA Live MLS badge — HIDDEN entirely on mobile.
     This was the "navy curve" Scott has been hunting: when iOS Safari overscrolls (pull-down rubber-band),
     the badge — which sits inside the navy .hero with rounded corners — becomes visible right below the
     fixed nav, looking like a navy pill protruding down. Killing it entirely on mobile solves it. */
  .h-badge{display:none !important}
  /* Belt-and-braces: lock the page top so iOS overscroll cannot reveal anything from above the nav */
  html,body{overscroll-behavior-y:none !important;-webkit-overflow-scrolling:touch}
  /* Also: ensure the .hero's top edge is masked so any rounded navy descendant cannot peek below the fixed nav.
     The .hero starts at top:0 and is OBSCURED by the fixed nav (z-index 500). Force the first 80px of the hero
     to be plain navy with no rounded children visible by clipping the hero's overflow. */
  .hero{padding-top:36px !important}
  .h-search{padding:14px !important;border-radius:14px}
  /* Hero map: make it COMPLETELY flat on mobile — no shadow halo, square edges to match the hero box */
  .hero-map{border-radius:12px !important;box-shadow:0 4px 14px rgba(0,0,0,.12) !important;border:none !important;height:240px !important;margin-top:8px}
  .hero-map-overlay{font-size:12px;padding:8px 12px}
  .hero-map-cta{font-size:12.5px;padding:9px 14px}

  /* === SEARCH PAGE POLISH === */
  /* Compact filter pill heights — tighter mobile layout per Scott's request */
  .fbar .type-btn,.fbar .price-btn{min-height:38px !important;font-size:14px !important;padding:8px 14px !important}
  .mob-search-row{height:38px !important}
  .mob-search-row input{font-size:14px !important}
  /* v14 Fix 6: don't force-square the pill variant */
  .mob-filter-icon:not(.mob-filter-pill){width:38px !important;height:38px !important}

  /* Listings/Buildings tabs — larger, more thumb-friendly */
  .lb-toggle{padding:4px}
  .lb-btn{padding:10px 18px !important;font-size:14.5px !important;min-height:38px}
  .lb-count{font-size:13.5px}
  /* Filter + Sort: bigger tap area */
  .filter-link,.sort-link{padding:10px 6px !important;font-size:15px !important;min-height:40px}

  /* Card meta + specs sizing — bump from cramped to readable */
  .cmeta{font-size:13px !important;line-height:1.4}
  .cspec{font-size:12.5px !important;color:#64748b}
  .caddr{font-size:13.5px !important;line-height:1.35;margin-top:2px}
  .cprice{font-size:23px !important;font-weight:700;letter-spacing:-.3px}

  /* Card spacing — give breathing room, no cramped grid */
  .cards-grid,.cards-mixed{padding:8px 14px 24px !important;gap:18px !important}
  .card{border-radius:12px !important;border:1px solid #eef2f5 !important;box-shadow:0 2px 8px rgba(11,37,69,.04) !important;overflow:hidden}
  .ci{height:220px !important}
  .cb{padding:14px 14px 16px !important}

  /* === LISTING DETAIL POLISH === */
  .m-topbar{padding:12px 12px !important;gap:10px}
  .m-topbar-back,.m-topbar-menu{width:40px !important;height:40px !important}
  .m-topbar-search{height:42px !important}
  .m-topbar-search input{font-size:14.5px}
  .m-addr{font-size:18px !important;line-height:1.25 !important;letter-spacing:-.3px}
  .m-addr-sub{font-size:13px !important;margin-top:2px}
  .m-price{font-size:30px !important;letter-spacing:-.5px}
  .m-sec-t{font-size:19px !important;letter-spacing:-.2px}

  /* === BOTTOM NAV / FAB POLISH === */
  /* Bottom tab bar — more breathing room */
  .bot-tab{padding:8px 4px !important}
  .bot-tab span{font-size:10.5px !important;margin-top:3px}
  .bot-tab svg{width:22px !important;height:22px !important}
  /* FAB pills — slightly larger for easy thumb tap */
  .fab-pill{padding:11px 18px !important;font-size:13.5px !important;min-height:42px}

  /* === HAMBURGER MENU POLISH === */
  .mm-link{padding:14px 18px !important;font-size:15px !important;min-height:48px}
  .mm-section-lbl{font-size:11px !important;letter-spacing:1.2px;padding:18px 18px 6px !important}
  .mm-account-btn{padding:13px !important;font-size:14.5px !important;min-height:46px}

  /* === FOOTER POLISH === */
  footer{padding:32px 18px 24px !important}
  footer .fg-grid{gap:24px !important}
  .fg-col h4{font-size:13px !important;margin-bottom:12px}
  .fg-col a{font-size:13.5px !important;padding:6px 0 !important;display:block}
}

/* When a bottom-sheet dropdown (For Sale type / Price) is OPEN, hide the FAB pills + bottom tabs
   so they don't visually overlap the dropdown's apply/cancel buttons */
body:has(.type-dd.open) .fab-row,
body:has(.price-dd.open) .fab-row,
body:has(.type-dd.open) .bot-tabs,
body:has(.price-dd.open) .bot-tabs{display:none !important}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE FILTER PANEL — billion-$ polish (spacing, fonts, color, buttons)
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  /* Header — premium serif title, subtle border, generous padding */
  .fm-mob-hdr{padding:16px 18px !important;border-bottom:1px solid #eef2f5 !important;background:#fff;box-shadow:0 1px 0 rgba(11,37,69,.02)}
  .fm-mob-back{width:40px !important;height:40px !important;color:#0c1f38 !important;border-radius:8px !important;transition:background .12s}
  .fm-mob-back:hover{background:#f4f6f8}
  .fm-mob-back svg{width:22px !important;height:22px !important;stroke-width:2 !important}
  .fm-mob-title{font-family:var(--serif) !important;font-size:19px !important;font-weight:700 !important;color:#0c1f38 !important;letter-spacing:-.3px}
  .fm-mob-clear{color:#EA0649 !important;font-size:13.5px !important;font-weight:600 !important;padding:10px !important;border-radius:8px !important;transition:background .12s}
  .fm-mob-clear:hover{background:rgba(184,20,66,.08)}

  /* Body — wider padding, more breathing room between sections */
  .fm-body{padding:8px 20px 28px !important}
  .fm-row{padding:18px 0 !important;border-bottom:1px solid #f0f3f6 !important;grid-template-columns:1fr !important;gap:12px !important}
  .fm-row:last-child{border-bottom:none !important}
  /* Section labels — uppercase eyebrow style for billion-$ feel */
  .fm-lbl{font-size:11.5px !important;font-weight:700 !important;color:#64748b !important;text-transform:uppercase;letter-spacing:.8px !important;padding-top:0 !important;margin-bottom:2px}

  /* v25: compact-chip pattern. Smaller pill chips (8px 14px / 13px / 36px /
     99px radius) — let chips wrap to multiple rows naturally. */
  .fm-chips{gap:6px !important}
  .fc{padding:8px 14px !important;font-size:13px !important;font-weight:600 !important;border:1.5px solid #e5e9ed !important;border-radius:99px !important;color:#0c1f38 !important;background:#fff !important;transition:background .12s,border-color .12s,color .12s,box-shadow .12s !important;min-height:36px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
  .fc:hover{background:#f4f6f8 !important;border-color:#cbd5d1 !important;color:#0c1f38 !important}
  .fc.on{background:#0c1f38 !important;border-color:#0c1f38 !important;color:#fff !important;box-shadow:0 2px 6px rgba(11,37,69,.15) !important}
  /* All chip rows render as the same compact pill — no special blow-up for
     Beds / Home Type / Amenities. They wrap to multiple rows when needed. */
  #fm-beds .fc,#fm-hometype .fc,#fm-amens .fc,#fm-proptype .fc{padding:8px 14px !important;font-size:13px !important;border-radius:99px !important;min-height:36px !important;font-weight:600 !important;width:auto !important;margin-bottom:0 !important}
  #fm-exposure .fc{padding:8px 4px !important;font-size:13px !important;border-radius:99px !important;min-height:36px !important;font-weight:600 !important}

  /* Stepper (parking, baths, etc.) — bigger, premium */
  .fm-stepper{padding:6px 12px !important;border-radius:12px !important;border:1.5px solid #e5e9ed !important;width:100% !important;justify-content:space-between !important;gap:10px !important;min-height:48px}
  .fm-step-btn{width:38px !important;height:38px !important;font-size:20px !important;border:1.5px solid #e5e9ed !important;color:#0c1f38 !important;background:#fff !important;border-radius:50% !important}
  .fm-step-btn:hover{background:#EA0649 !important;border-color:#EA0649 !important;color:#fff !important}
  .fm-step-val{font-size:15px !important;font-weight:600 !important;color:#0c1f38 !important;flex:1 !important;text-align:center !important}

  /* Selects + inputs — premium 12px radius, larger */
  .fm-select,.fm-inp{padding:14px 14px !important;font-size:15px !important;border:1.5px solid #e5e9ed !important;border-radius:12px !important;color:#0c1f38 !important;background:#fff !important;font-family:var(--sans) !important;transition:border-color .15s !important;min-height:48px}
  .fm-select:focus,.fm-inp:focus{border-color:#EA0649 !important;outline:none !important;box-shadow:0 0 0 3px rgba(184,20,66,.12) !important}

  /* v27: tightened sticky footer — 14px → 10px vertical padding, smaller buttons.
     Tap targets stay ≥44pt by combining padding + min-height. */
  .fm-foot{padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)) !important;border-top:1px solid #eef2f5 !important;background:#fff !important;box-shadow:0 -4px 16px rgba(11,37,69,.06) !important;flex-shrink:0}
  .fm-apply{padding:11px !important;font-size:14px !important;font-weight:700 !important;background:#EA0649 !important;color:#fff !important;border:none !important;border-radius:10px !important;letter-spacing:.2px !important;box-shadow:0 4px 12px rgba(184,20,66,.32) !important;transition:all .15s !important;min-height:44px !important}
  .fm-apply:hover{background:#EA0649 !important;transform:translateY(-1px) !important;box-shadow:0 6px 16px rgba(184,20,66,.45) !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE LISTING DETAIL — billion-$ polish (typography, spacing, color)
   ═══════════════════════════════════════════════════════════════════════ */
@media(max-width:960px){
  /* Top bar — clean navy with breathing room */
  .m-topbar{padding:10px 14px !important;gap:10px !important;background:#0c1f38 !important;border-bottom:1px solid rgba(255,255,255,.06)}
  .m-topbar-back,.m-topbar-menu,.m-topbar-act{width:40px !important;height:40px !important;border-radius:10px !important;transition:background .12s}
  .m-topbar-back:hover,.m-topbar-menu:hover,.m-topbar-act:hover{background:rgba(255,255,255,.08)}
  .m-topbar-search{height:42px !important;border-radius:10px !important;background:#fff !important;box-shadow:0 1px 4px rgba(0,0,0,.1)}
  .m-topbar-search input{font-size:14.5px !important;color:#0c1f38 !important}
  /* v=539a — keep the right-side actions cluster tight so search pill keeps width */
  .m-topbar-actions{gap:2px !important}

  /* Address row */
  .m-addr-row{padding:18px 16px 14px !important}
  .m-addr{font-family:var(--serif) !important;font-size:20px !important;font-weight:700 !important;color:#0c1f38 !important;line-height:1.2 !important;letter-spacing:-.4px !important}
  .m-addr-sub{font-size:13.5px !important;color:#64748b !important;margin-top:4px !important}
  .m-addr-sub a{color:#EA0649 !important;font-weight:500 !important}

  /* Price — hero number, very prominent */
  .m-price-row{padding:0 16px 14px !important;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
  .m-price{font-family:var(--serif) !important;font-size:32px !important;font-weight:700 !important;color:#0c1f38 !important;letter-spacing:-.6px !important;line-height:1 !important}
  .m-days{font-size:12.5px !important;color:#64748b !important;font-weight:500}

  /* Section titles — premium serif with subtle eyebrow */
  .m-sec{padding:22px 16px !important;border-top:1px solid #f0f3f6}
  .m-sec-t{font-family:var(--serif) !important;font-size:20px !important;font-weight:700 !important;color:#0c1f38 !important;letter-spacing:-.3px !important;margin-bottom:14px !important}

  /* Stats grid — billion-$ spec card layout */
  .m-quick-stats{padding:0 16px 18px !important;gap:0 !important;display:grid !important;grid-template-columns:repeat(4,1fr) !important;border:1px solid #eef2f5;border-radius:14px;margin:6px 16px 0 !important;background:#fafbfc;overflow:hidden}
  .m-quick-stats > *{padding:14px 8px !important;text-align:center;border-right:1px solid #eef2f5}
  .m-quick-stats > *:last-child{border-right:none}
  .m-quick-stats-2{padding:0 16px 18px !important}

  /* CTA bar (fixed bottom) — premium contrast */
  .m-cta{padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px)) !important;background:rgba(255,255,255,.96) !important;backdrop-filter:saturate(180%) blur(20px) !important;-webkit-backdrop-filter:saturate(180%) blur(20px) !important;border-top:1px solid rgba(11,37,69,.08) !important;box-shadow:0 -4px 20px rgba(11,37,69,.08) !important}
  .m-cta .cta{font-size:14px !important;padding:0 12px !important;height:46px !important;border-radius:10px !important;font-weight:600 !important;letter-spacing:.1px}
  .m-cta .cta-icon{width:46px !important;height:46px !important;border-radius:10px !important;background:#fff !important;border:1.5px solid #e5e9ed !important;color:#0c1f38 !important}
  .m-cta .cta-icon:hover{border-color:#EA0649 !important;color:#EA0649 !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   DESKTOP FILTER DRAWER — billion-$ polish (≤45% width, premium controls)
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:961px){
  /* Hide the mobile header on desktop (we have .fm-hdr instead) */
  .fm-mob-hdr{display:none !important}
  /* Filter body — cleaner padding, no left label column (stack vertically for better fit).
     v27: tighten section spacing so more controls fit per screen. */
  .fm-body{padding:10px 22px 22px !important}
  .fm-row{grid-template-columns:1fr !important;gap:8px !important;padding:11px 0 !important;border-bottom:1px solid #f0f3f6 !important}
  .fm-row:last-child{border-bottom:none !important}
  /* v27: section labels even smaller on desktop drawer (11.5px → 10.5px) so chips dominate the row */
  .fm-lbl{font-size:10.5px !important;font-weight:700 !important;color:#64748b !important;text-transform:uppercase;letter-spacing:.6px !important;padding-top:0 !important;margin-bottom:2px !important}
  /* v25: compact-chip pattern (matches the one above for the other media block). */
  .fc{padding:8px 14px !important;font-size:13px !important;font-weight:600 !important;border:1.5px solid #e5e9ed !important;border-radius:99px !important;color:#0c1f38 !important;background:#fff !important;transition:background .12s,border-color .12s,color .12s,box-shadow .12s !important;min-height:36px;line-height:1}
  .fc:hover{background:#f4f6f8 !important;border-color:#cbd5d1 !important;color:#0c1f38 !important;box-shadow:none !important}
  .fc.on{background:#0c1f38 !important;border-color:#0c1f38 !important;color:#fff !important;box-shadow:0 2px 6px rgba(11,37,69,.15) !important}
  /* Selects — subtle borders, no aggressive teal focus ring */
  .fm-select,.fm-inp{padding:12px 14px !important;font-size:14px !important;border:1.5px solid #e5e9ed !important;border-radius:10px !important;color:#0c1f38 !important;background:#fff !important;transition:border-color .12s !important;min-height:46px}
  .fm-select:hover,.fm-inp:hover{border-color:#cbd5d1 !important}
  .fm-select:focus,.fm-inp:focus{border-color:#EA0649 !important;outline:none !important;box-shadow:0 0 0 3px rgba(184,20,66,.1) !important}
  /* Stepper — premium clean */
  .fm-stepper{padding:5px 10px !important;border-radius:10px !important;border:1.5px solid #e5e9ed !important;width:auto !important;min-width:160px;justify-content:space-between !important;gap:8px !important;min-height:46px}
  .fm-step-btn{width:34px !important;height:34px !important;font-size:18px !important;border:1.5px solid #e5e9ed !important;color:#0c1f38 !important;background:#fff !important;border-radius:50% !important}
  .fm-step-btn:hover{background:#0c1f38 !important;border-color:#0c1f38 !important;color:#fff !important}
  .fm-step-val{font-size:14px !important;font-weight:600 !important;color:#0c1f38 !important;flex:1 !important;text-align:center !important;min-width:60px}
  /* v27: Footer — tightened (14px → 10px vertical), balanced Reset / Show buttons */
  .fm-foot{padding:10px 18px !important;border-top:1px solid #eef2f5 !important;background:#fff !important;display:flex !important;gap:10px !important;flex-shrink:0;box-shadow:0 -4px 12px rgba(11,37,69,.04)}
  .fm-reset{display:inline-flex !important;align-items:center;justify-content:center;flex:0 0 auto !important;padding:11px 18px !important;font-size:13px !important;font-weight:600 !important;background:transparent !important;color:#64748b !important;border:1.5px solid #e5e9ed !important;border-radius:10px !important;cursor:pointer;transition:all .12s !important;font-family:var(--sans);min-height:42px}
  .fm-reset:hover{border-color:#0c1f38 !important;color:#0c1f38 !important}
  .fm-apply{flex:1 !important;padding:11px !important;font-size:14px !important;font-weight:700 !important;background:#EA0649 !important;color:#fff !important;border:none !important;border-radius:10px !important;letter-spacing:.2px !important;box-shadow:0 4px 12px rgba(184,20,66,.32) !important;transition:all .15s !important;cursor:pointer;min-height:44px}
  .fm-apply:hover{background:#EA0649 !important;transform:translateY(-1px) !important;box-shadow:0 6px 18px rgba(184,20,66,.5) !important}
  /* Size slider — make sure track is visible */
  .pd-slider-track{background:#e5e9ed !important;height:6px !important}
  .pd-slider-fill{background:#EA0649 !important;height:6px !important}
}

/* === EXTRA SMALL SCREENS (< 380px — iPhone SE etc.) === */
@media(max-width:380px){
  .nav{padding:0 8px !important;gap:2px !important}
  .logo-name{font-size:16px !important}
  .nav-r .nav-auth-join{padding:6px 10px !important;font-size:11.5px !important}
  .hero h1{font-size:26px !important}
  .lb-btn{padding:9px 14px !important;font-size:13.5px !important}
  .filter-link,.sort-link{font-size:14px !important;padding:9px 4px !important}
  .cprice{font-size:21px !important}
  .ci{height:200px !important}
}

/* ═══════════════════════════════════════════════════════════════════════
   ZOOCASA-STYLE TOP BANNERS — Scott's brand colors (navy + teal), Zoocasa LAYOUT only
   v30: aligned breakpoint with the mobile @max-width:768px fix above. Was 961px,
   now 769px so the desktop polish kicks in the moment we leave mobile mode.
   ═══════════════════════════════════════════════════════════════════════ */
@media(min-width:769px){
  /* NAV — keep brand navy #0c1f38, just polished separators */
  .nav{background:#0c1f38 !important;border-bottom:1px solid rgba(255,255,255,.04)}
  /* Map button: pill style with teal-tinted outline (Zoocasa LAYOUT, brand color) */
  .nl-map{padding:9px 18px !important;border-radius:99px !important;border:1px solid rgba(184,20,66,.4) !important;background:rgba(184,20,66,.1) !important;color:#fff !important;font-weight:600 !important;font-size:13.5px !important;letter-spacing:.1px}
  .nl-map:hover{background:#EA0649 !important;border-color:#EA0649 !important}
  .nl-map svg{margin-right:6px !important;width:15px !important;height:15px !important}
  /* Hamburger menu — circle outline (Zoocasa LAYOUT, brand color) */
  .mob-btn{display:flex !important;width:42px !important;height:42px !important;border-radius:50% !important;border:1px solid rgba(255,255,255,.22) !important;background:transparent !important;color:#fff !important;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;margin-left:8px}
  .mob-btn:hover{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.4) !important}
  .mob-btn svg{width:18px !important;height:18px !important}

  /* FILTER BAR — clean white with pill-style filter buttons (Zoocasa LAYOUT) */
  .fbar{background:#fff !important;border-bottom:1px solid #e8ecf1 !important;box-shadow:0 1px 2px rgba(11,37,69,.04) !important;padding:0 16px !important;height:62px !important;gap:8px !important}
  /* v7 Bug 1 FINAL FIX: nuke the legacy .type-btn / .price-btn on mobile so the
     duplicate filter row from IMG_4338 cannot render. .mob-inline-pills replaces them. */
  .fbar .mob-dd-row .type-btn,
  .fbar .mob-dd-row .price-btn,
  .fbar .type-wrap > .type-btn,
  .fbar .price-wrap > .price-btn{display:none !important}
  /* All filter pills — rounded, navy text on white, subtle border (DESKTOP ONLY now via the rule above) */
  .fbar .more-btn{padding:9px 16px !important;border-radius:99px !important;border:1px solid #d8dee5 !important;background:#fff !important;color:#0c1f38 !important;font-size:13.5px !important;font-weight:500 !important;height:40px !important;display:inline-flex !important;align-items:center !important;gap:7px !important;letter-spacing:.1px;transition:border-color .12s,box-shadow .12s}
  .fbar .more-btn:hover{border-color:#EA0649 !important;color:#EA0649 !important;box-shadow:0 1px 4px rgba(184,20,66,.12) !important}
  /* "More Filters" pill — TEAL accent (brand color, NOT gold) */
  .more-btn.on,.more-btn:active{background:#EA0649 !important;color:#fff !important;border-color:#EA0649 !important}
  /* Save Search / Alert pill — navy brand CTA */
  .alert-btn{padding:9px 18px !important;border-radius:99px !important;background:#0c1f38 !important;color:#fff !important;border:none !important;font-size:13.5px !important;font-weight:600 !important;height:40px !important;letter-spacing:.1px;display:inline-flex !important;align-items:center !important;gap:7px !important;cursor:pointer;transition:background .12s}
  .alert-btn:hover{background:#EA0649 !important}
}

/* ═══════════════════════════════════════════════════════════════════
   v12 SCORCHED-EARTH DROPDOWN CLEANUP — last-rule-wins specificity.
   This is the 5th iteration with "options peeking from top" reports.
   The base CSS already has display:none !important when not .open, but
   some path is still leaking. This block is the absolute-final defense:
   • Hide every dropdown-item-like element when its parent doesn't have .open
   • Hide ANY orphan .type-dd-item or .price-dd-item that isn't inside a .open container
   • Forces visibility:hidden + opacity:0 + pointer-events:none + display:none
   This rule lives at the END of <style> so nothing later in the cascade can win. */
/* v13 FIX 1: Live-test of v12 confirmed inline `top:-9999px !important` written
   by the JS scrubber persisted when the dropdown REOPENED — items rendered with
   display:block (CSS) but top:-10100px (leftover inline). Result: invisible items
   off-screen even when the dropdown was supposed to be open. v13 removes the
   position-manipulation entirely. display:none + visibility:hidden + opacity:0
   is sufficient to hide. The :not(.open) gate ensures it only applies closed. */
.type-dd:not(.open) .type-dd-item,
.price-dd:not(.open) > *,
.type-dd:not(.open),
.price-dd:not(.open){
  display:none !important;
  visibility:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* When the dropdown IS .open, force its contents visible — beats any stale
   inline styles a previous v12 deploy may have written into the DOM tree.
   v=456b: position/top/left/width/height resets dropped. They were left over
   from the v13 cleanup of an old top:-10100px hack that no live deploy still
   ships. On mobile they overrode the bottom-sheet's position:fixed bottom:0
   (line 8292), letting the .price-dd render inline mid-document — visible
   in the DOM but offscreen. Desktop was unaffected because the v44 rule at
   line 11550 (more-specific) overrode positioning back to fixed + --dd-x/y.
   Now we only force visibility/display, and let the mobile + desktop
   positioning rules win on their own terms. */
.type-dd.open,
.type-dd.open .type-dd-item,
.price-dd.open,
.price-dd.open > *{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
/* Mobile bottom-sheet pattern overrides — when .open IS set, the items must render */
.type-dd.open,
.price-dd.open,
.type-dd.open *,
.price-dd.open *{
  visibility:visible !important;
  opacity:1 !important;
}
/* v24 Fix 2: the v13 .price-dd.open > * reset above forces position:static,
   width:auto, height:auto on every child — which broke the absolutely-
   positioned thumb-bubble labels. They were rendering inline as huge full-
   width navy blocks at the top of the page (user IMG_4797). Re-assert their
   anchored position + small size with higher specificity. */
.price-dd.open .pd-slider-wrap{position:relative !important}
.price-dd.open .pd-thumb-bubble,
.price-dd.open .pd-thumb-bubble-min,
.price-dd.open .pd-thumb-bubble-max{
  position:absolute !important;
  top:-26px !important;
  left:auto;
  width:auto !important;
  max-width:90px !important;
  height:auto !important;
  font-size:11px !important;
  font-weight:700 !important;
  padding:3px 8px !important;
  line-height:1.4 !important;
  display:inline-block !important;
  white-space:nowrap !important;
  pointer-events:none !important;
}
/* The body class is the v8 mechanism — both must be set/cleared together. If one is
   missing, the dropdown is in an inconsistent state. This rule says: if no body class,
   force-hide the dropdown contents regardless of .open.
   v29 CRITICAL: removed the universal `body.price-dd-open #price-dd > *{display:block !important}`
   force-show — it overrode mobile rules and made BOTH the desktop .pd-list AND mobile .pd-presets
   render at the same time on mobile (IMG_4879 bug). Children now rely on natural display per
   their own viewport-targeted rules (which is what we actually want). The type-dd force-show
   stays because it targets a specific class .type-dd-item, not `> *`. */
body:not(.type-dd-open) #type-dd .type-dd-item{display:none !important}
body:not(.price-dd-open) #price-dd > *:not(.pd-title):not(.pd-list):not(.pd-presets):not(.pd-slider-wrap):not(.pd-stepper-row):not(.pd-actions){display:none !important}
body.type-dd-open #type-dd .type-dd-item{display:block !important}
/* v29: explicit per-element show rules so we don't blanket-override the breakpoint-targeted
   display values. .pd-title / .pd-actions are always visible; .pd-list and .pd-presets keep
   their breakpoint-defined display (none on the wrong viewport, flex on the right one);
   slider + stepper-row stay gated by .pd-custom on desktop and forced visible on mobile. */
body.price-dd-open #price-dd .pd-title{display:block !important}
body.price-dd-open #price-dd .pd-actions{display:flex !important}

/* ═══════════════════════════════════════════════════════════════════════
   v28 CRITICAL FIX — Bulletproof map sizing + toolbar visibility.
   Bug: live mobile test reported #map and .map-pane both width:0/height:0 in
   fullmap mode — container collapsed despite v12's min-height:60vh fix. The
   root cause was setView('fullmap') clearing the inline display style with
   mapPane.style.display='' (which doesn't override the mobile `.map-pane{
   display:none}` default at line 3102), AND not adding the `.show` class
   that the existing CSS path requires. The right-rail .mob-map-toolbar is a
   CHILD of .map-pane, so when the parent collapsed the toolbar vanished too.

   This block is the defensive fallback so the map container can NEVER again
   collapse to 0×0 regardless of which body classes are set, which inline
   styles are cleared, or which CSS selectors win specificity.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Force map-pane visible whenever the user is on the fullmap view. Three
     equivalent body classes are checked because different code paths set
     different ones (toggleMobMap → map-fs; setView('fullmap') → in-fullmap;
     in-search is set whenever the search view is mounted). */
  body.in-fullmap .map-pane,
  body.map-fs .map-pane{
    display:block !important;
    width:100% !important;
    /* v277: was min-height (allowed map-pane to grow taller than viewport,
       inheriting the listings page's scroll height — that's why entering
       fullmap from a tall list view ended up with a 6000+ px-tall map
       canvas centered on Toronto but with Lake Simcoe visible at the top).
       Use exact height (viewport - top offset) so the canvas is always
       a single screen tall. */
    height:calc(100vh - var(--navh,56px)) !important;
    height:calc(100dvh - var(--navh,56px)) !important;
    max-height:calc(100vh - var(--navh,56px)) !important;
    max-height:calc(100dvh - var(--navh,56px)) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  body.in-fullmap #map,
  body.map-fs #map,
  body.in-fullmap .map-pane #map,
  body.map-fs .map-pane #map{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
  }
  /* Right-rail toolbar (Layers / Transit / Schools / Draw / Nearby) is a
     fixed-position child of .map-pane, so it inherits parent display:none.
     Force it visible on any map-relevant view. v14 Fix 4's hide rules for
     .in-sold / .bldg-sheet-open / .modal-open still take precedence
     (separate `body.X .mob-map-toolbar{display:none !important}` rules). */
  body.in-search .mob-map-toolbar,
  body.in-fullmap .mob-map-toolbar,
  body.map-fs .mob-map-toolbar{display:flex !important}
}
/* Desktop + universal — defensive min-height (matches v12's intent). The
   existing rules at line 893–894 already set min-height:60vh, but stating
   it again with !important here means no later rule can silently override. */
.map-pane{min-height:60vh !important}
.map-pane #map,#map{min-height:60vh !important;width:100% !important}

/* ═══════════════════════════════════════════════════════════════════════
   v29 BILLION-DOLLAR POLISH PASS
   - Belt-and-suspenders mobile/desktop split for Price modal (defends against
     the v26 force-show regression that re-broke in IMG_4879).
   - Universal motion easing + prefers-reduced-motion guard.
   - Focus-visible states for all interactive chips (a11y).
   - Image lazy/async hints to prevent layout shift on slow connections.
   - Listing-type modal backdrop reinforcement so nothing leaks behind it.
   ═══════════════════════════════════════════════════════════════════════ */

/* — Price modal: high-specificity belt around the v26 split — */
@media (max-width:768px){
  /* Mobile: the desktop vertical list is GONE, no exception. Higher specificity
     than `body.price-dd-open #price-dd > *` so this always wins. */
  body.price-dd-open #price-dd .pd-list,
  #price-dd .pd-list{display:none !important}
  /* Mobile: chips are flex-wrap, slider and inputs are always visible. */
  body.price-dd-open #price-dd .pd-presets,
  #price-dd .pd-presets{display:flex !important}
  body.price-dd-open #price-dd .pd-slider-wrap{display:flex !important}
  body.price-dd-open #price-dd .pd-stepper-row{display:grid !important}
}
@media (min-width:769px){
  /* v47: Desktop hides BOTH chips and vertical list; slider+inputs are the only UI. */
  body.price-dd-open #price-dd .pd-presets,
  #price-dd .pd-presets{display:none !important}
  body.price-dd-open #price-dd .pd-list,
  #price-dd .pd-list{display:none !important}
  /* Slider + stepper always visible on desktop (no preset path anymore). */
  body.price-dd-open #price-dd .pd-slider-wrap,
  #price-dd .pd-slider-wrap{display:flex !important}
  body.price-dd-open #price-dd .pd-stepper-row,
  #price-dd .pd-stepper-row{display:grid !important}
}

/* — Listing-type modal backdrop reinforcement — */
/* Ensures the dim backdrop covers the entire viewport so nothing visible leaks
   behind. The v8 backdrop already exists; this is a defensive z-index sanity
   check + a guarantee that interactive elements behind the sheet are not
   tappable. */
body.type-dd-open .type-dd.open{z-index:710 !important}
body.type-dd-open #type-dd::before{z-index:709 !important}

/* — Universal motion easing + reduced-motion guard — */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}

/* — Focus-visible states for keyboard users (a11y) —
   Chips, list items, and stepper buttons get a visible teal ring when focused
   via keyboard. Mouse clicks don't trigger this (`:focus-visible` is smart
   about pointer vs keyboard). */
.fc:focus-visible,
.fm-chip-step:focus-visible,
.pd-preset:focus-visible,
.pd-list-item:focus-visible,
.bot-tab:focus-visible,
.vcb:focus-visible,
.mob-inline-pill:focus-visible,
.fm-area-cb:focus-visible,
.fm-hood-chip:focus-visible{
  outline:2px solid #EA0649 !important;
  outline-offset:2px !important;
  border-radius:99px;
}
.pd-list-item:focus-visible{border-radius:8px}
.fm-area-cb:focus-visible{border-radius:4px}

/* — Image hints: prevent layout shift on slow connections —
   Reserves aspect-ratio space so card images don't "pop in" and shove text. */
.ci,.gallery-slide,.m-gallery-slide,.hp-fcard-img,.bldg-item-img{
  background:#eef2f5;
  /* keeps a soft skeleton tone while the photo decodes */
}

/* — Performance hint: contain layout/paint on offscreen lists — */
.cards-list .card,
.cards-grid .card,
.cards-mixed .card{
  content-visibility:auto;
  contain-intrinsic-size:auto 320px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v30 — Realtor.ca-style filter density polish
   - Size slider tick markers along the rail.
   - Open House chip row (Phase 2 placeholder — UI only, no data wiring yet).
   ═══════════════════════════════════════════════════════════════════════ */
.fm-size-ticks{
  display:flex;
  justify-content:space-between;
  margin:-12px 6px 14px;
  padding:0 4px;
  font-size:10.5px;
  font-weight:500;
  color:var(--mid, #64748b);
  letter-spacing:.2px;
  font-feature-settings:"tnum" 1;
  pointer-events:none;
  user-select:none;
}
.fm-size-ticks span{
  position:relative;
  flex:0 0 auto;
}
.fm-size-ticks span::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  transform:translateX(-50%);
  width:1.5px;
  height:5px;
  background:#cbd5d1;
  border-radius:1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   v31 — ELITE POLISH (Stripe / Linear / Vercel parity)
   - Microinteractions: every tappable surface gets press feedback.
   - Skeleton loaders: replace blank flashes during async work.
   - Empty states: clean iconography + helpful copy on every list.
   - Page transitions: fade-in on view switches.
   - Color discipline: canonical brand-teal token across new rules.
   - Focus ring: keyboard-only teal outline on every interactive surface.
   ═══════════════════════════════════════════════════════════════════════ */

/* — MICROINTERACTIONS — press feedback on tappable elements.
   Single 0.98 scale + slightly faster timing reads as "responsive" without
   feeling janky. Hover stays visual-only; press is the tactile signal. */
.fc:active,
.fm-chip-step:active,
.pd-preset:active,
.pd-list-item:active,
.bot-tab:active,
.vcb:active,
.mob-inline-pill:active,
.fab:active,
.cta-icon:active,
.cta:active,
.alert-btn:active,
.fm-apply:active,
.pd-apply-btn:active,
.fm-save-search:active,
.htt:active,
.nl:active{
  transform:scale(.98);
  transition:transform 80ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  .fc:active,.fm-chip-step:active,.pd-preset:active,.pd-list-item:active,
  .bot-tab:active,.vcb:active,.mob-inline-pill:active,.fab:active,.cta-icon:active,
  .cta:active,.alert-btn:active,.fm-apply:active,.pd-apply-btn:active,
  .fm-save-search:active,.htt:active,.nl:active{transform:none}
}

/* — SKELETON LOADER — shimmer animation for async content.
   Use .skel as a wrapper class on any container. .skel-line / .skel-block
   are the building blocks. Auto-hides via .skel-loaded toggled in JS. */
@keyframes cdg-skel-shimmer{
  0%   { background-position: -200% 0 }
  100% { background-position:  200% 0 }
}
.skel-block,
.skel-line{
  background: linear-gradient(90deg,
    var(--off, #f4f6f8)  0%,
    #e8ecf1            50%,
    var(--off, #f4f6f8) 100%
  );
  background-size: 200% 100%;
  animation: cdg-skel-shimmer 1.4s var(--ease-mod) infinite;
  border-radius: var(--r-md);
}
.skel-block{ width:100%; height:200px }
.skel-line { height:14px; margin:8px 0; border-radius:var(--r-sm) }
.skel-line.skel-line-sm{ height:12px; width:60% }
.skel-line.skel-line-md{ height:14px; width:80% }
.skel-line.skel-line-lg{ height:18px; width:90% }
.skel-card{
  border:1px solid var(--light, #dde1e8);
  border-radius:var(--r-lg);
  padding:0;
  overflow:hidden;
  background:#fff;
  margin-bottom:var(--s-4);
}
.skel-card .skel-block{ height:200px; border-radius:0 }
.skel-card-body{ padding:var(--s-3) var(--s-4) var(--s-4) }

/* While a list is loading, render a few skel-cards inside #cards via JS.
   The .cards-loading class on the parent is a hook for any enhancements. */
.cards-loading::before{
  content:"";
  display:block;
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--brand-teal), transparent);
  background-size:50% 100%;
  animation:cdg-skel-shimmer 1.2s var(--ease-mod) infinite;
  z-index:10;
}

@media (prefers-reduced-motion: reduce){
  .skel-block,.skel-line,.cards-loading::before{ animation:none }
  .skel-block,.skel-line{ background:#eef2f5 }
}

/* — EMPTY STATE — used when a filtered list / favs / sold returns 0 results.
   Pattern: icon (40px) + headline (h3 serif) + body copy + optional CTA.
   Brand discipline — soft navy on off-white, no rogue colors. */
.empty-state{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--s-7) var(--s-4);
  margin:var(--s-4) auto;
  max-width:380px;
  color:var(--mid, #6b7a8d);
  animation:cdg-fade-in var(--t-mod) var(--ease-out);
}
.empty-state-icon{
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  background:var(--off, #f4f6f8);
  border-radius:var(--r-pill);
  margin-bottom:var(--s-4);
  color:var(--brand-teal);
}
.empty-state-icon svg{ width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8 }
.empty-state-title{
  font-family:var(--serif), Georgia, serif;
  font-size:var(--t-h3);
  font-weight:400;
  color:var(--brand-navy);
  margin:0 0 var(--s-2);
  letter-spacing:-.2px;
}
.empty-state-body{
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:1.5;
  color:var(--mid, #6b7a8d);
  margin:0 0 var(--s-4);
}
.empty-state-cta{
  display:inline-flex;
  align-items:center;
  gap:var(--s-2);
  padding:var(--s-3) var(--s-5);
  background:var(--brand-teal);
  color:#fff;
  border:none;
  border-radius:var(--r-md);
  font-size:var(--t-md);
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background var(--t-fast) var(--ease-out), transform 80ms var(--ease-out);
  min-height:44px;
}
.empty-state-cta:hover{ background:var(--brand-teal-deep) }
.empty-state-cta:active{ transform:scale(.98) }
.empty-state-cta:focus-visible{
  outline:2px solid var(--brand-teal);
  outline-offset:2px;
}

/* — PAGE TRANSITIONS — fade-in on view switch.
   Lightweight 200ms fade on the major view containers so transitions never
   feel like hard cuts. Disabled under prefers-reduced-motion. */
@keyframes cdg-fade-in{
  from{ opacity:0; transform:translateY(4px) }
  to  { opacity:1; transform:translateY(0)   }
}
#search-view,
#sold-view,
#listing-view,
#favs-view,
#bldg-view,
.hero-clean,
.hp-section{
  animation:cdg-fade-in var(--t-mod) var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  #search-view,#sold-view,#listing-view,#favs-view,#bldg-view,
  .hero-clean,.hp-section{ animation:none }
}

/* — FOCUS RING reinforcement — brand teal, 2px, +2px offset.
   Belt against any earlier rule that set outline:none. The earlier v29 polish
   block already covered chips; v31 extends to ALL interactive surfaces. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex="0"]:focus-visible,
.fc:focus-visible,
.fm-chip-step:focus-visible,
.pd-preset:focus-visible,
.pd-list-item:focus-visible,
.bot-tab:focus-visible,
.vcb:focus-visible,
.nl:focus-visible{
  outline:2px solid var(--brand-teal);
  outline-offset:2px;
}
/* Keep input/select rings rectangular — chip rings can be pill. */
input:focus-visible,select:focus-visible,textarea:focus-visible{
  border-radius:var(--r-md);
}

/* — COLOR DISCIPLINE: canonical teal pinning —
   Static audit found 4 different teals. New rules ALWAYS use --brand-teal.
   We can't safely rewrite every old hex without risking regressions, but
   this token-based approach guarantees future code converges. */

/* — CARD POLISH: subtle elevation on hover — */
.cards-list .card,
.cards-grid .card,
.cards-mixed .card{
  transition: box-shadow var(--t-fast) var(--ease-out),
              transform  var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
@media (hover: hover){
  .cards-list .card:hover,
  .cards-grid .card:hover,
  .cards-mixed .card:hover{
    box-shadow: var(--sh-2);
    transform: translateY(-1px);
    border-color: rgba(11,37,69,.12);
  }
}

/* — BUTTON BASELINE — anything that calls itself a button gets a baseline transition.
   This catches countless one-off buttons that didn't have transition declared. */
button{
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              transform 80ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce){
  button{ transition:none }
}

/* — MOBILE BOTTOM-SHEET POLISH — subtle handle, refined shadow */
.type-dd.open,
.price-dd.open{
  box-shadow: var(--sh-3) !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v39 CRITICAL — Top navy nav must ALWAYS be visible across the app.
   User reported the navy header missing on the search/listings view (page
   started directly with the filter row). Whatever future rule triggers it,
   this defensive block guarantees visibility:
   - position:fixed; top:0; z-index:500
   - display:flex (not none)
   - opacity:1; visibility:visible
   - pointer-events:auto
   The single legitimate exception is the Draw takeover (body.draw-mode-on)
   which intentionally hides the nav while the user is actively drawing a
   polygon. Everything else gets the nav back. ═══════════════════════════ */
nav.nav,
body.in-search nav.nav,
body.in-fullmap nav.nav,
body.map-fs nav.nav,
body.in-listings nav.nav,
body.in-listing-detail nav.nav,
body.in-mixed nav.nav,
body.in-list nav.nav,
body.in-sold nav.nav{
  display:flex !important;
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  z-index:500 !important;
  height:var(--navh, 56px) !important;
  background:var(--navy, #0c1f38) !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
}
/* The ONLY legitimate hide path remains intact — drawing mode. */
/* v45: nav stays visible during draw mode */

/* ═══════════════════════════════════════════════════════════════════════
   v37 — modal mutual-exclusion reinforcement.
   1) Stronger dim backdrop (rgba(11,37,69,.62) — was .5) so listings behind
      a centered modal read as truly inactive.
   2) When ANY modal is open, the .fbar (which contains the Type/Price pills)
      becomes pointer-events:none so the user CANNOT click another pill while
      a modal is up. Closing requires X / backdrop / Esc / option pick — all
      of which already work.
   3) Same on mobile bottom-sheet path. ═════════════════════════════════════ */
@media (min-width:769px){
  body.type-dd-open::before,
  body.price-dd-open::before{
    background: rgba(11,37,69,.62) !important;   /* was .5 — darker, clearer dim */
  }
}
/* Universal — both desktop centered modal AND mobile bottom-sheet — block
   all interactions in the trigger row while a modal is up. The modal sheet
   itself sits at z-index ≥ 711 so it's unaffected. */
body.type-dd-open .fbar,
body.price-dd-open .fbar,
body.type-dd-open .mob-inline-pills,
body.price-dd-open .mob-inline-pills,
body.type-dd-open .lb-row,
body.price-dd-open .lb-row{
  pointer-events: none !important;
}
/* Re-enable the modal itself so its X / option clicks still register. */
body.type-dd-open #type-dd,
body.type-dd-open #type-dd *,
body.price-dd-open #price-dd,
body.price-dd-open #price-dd *,
body.type-dd-open .v33-modal-backdrop,
body.price-dd-open .v33-modal-backdrop{
  pointer-events: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v37 — Compare icon polish. Tried v30's side-by-side rectangles + connector,
   user still found it ambiguous. Switched to two arrows pointing AT each
   other inside a rounded square — the universal "compare two things" shorthand
   used by Apple Compare, Google Sheets diff, and most price-comparison apps.
   ═══════════════════════════════════════════════════════════════════════ */
/* (CSS-only — see card-cmp-btn SVG swap below) */

/* ═══════════════════════════════════════════════════════════════════════
   v36 — Listings/Buildings tab row left padding fix.
   Base .lb-row has 16px L/R padding, but `.lb-row .lb-toggle{margin-left:-4px}`
   (line ~3177) pulls the toggle 4px left into that reserve. Combined with the
   various view-mode width transforms in the desktop layout, the "Listings"
   tab visually flushed against the viewport edge with no breathing room.
   v36 pins the row's horizontal padding (16px mobile / 24px desktop) and
   zeroes out the negative pull on .lb-toggle. ═══════════════════════════════ */
.lb-row{
  padding-left:16px !important;
  padding-right:16px !important;
}
.lb-row .lb-toggle{ margin-left:0 !important }
@media (min-width:769px){
  .lb-row{
    /* v=430f — Item 140: padding-left 24→18px to align Row 2's first
       visible chip (For Sale) with the h1 heading's left edge. The
       heading has padding-left:18px inside .cdg-city-hdr; matching
       that here makes Row 2 + Row 3 start at the same x. */
    padding-left:18px !important;
    padding-right:18px !important;
  }
}
/* v=430f — Item 140: hide the now-empty .lb-toolbar-lead on desktop.
   Its only children (.lb-tabs, .lb-results-count) are already
   display:none from prior fixes, but the empty flex item still takes
   a 12px gap slot in .lb-row — pushing Row 2's chip-bar 12px right
   of where it should be. display:none removes the slot entirely. */
@media (min-width:769px){
  .lb-row > .lb-toolbar-lead{ display:none !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   v33 — UNIFIED CENTERED MODAL for Listing Type + Price (desktop)
   - Both render as a centered card with dim backdrop on desktop (≥769px).
   - Both still render as a bottom-sheet on mobile (≤768px) via the existing
     @media block — unchanged.
   - Both get a visible X close button (top-right) injected by JS on first open.
   - Both close on: X button click, backdrop click, Esc key, or option pick.
   - Body class still drives backdrop visibility (`type-dd-open`/`price-dd-open`).
   This block supersedes v32's anchored-dropdown fix for Price — that fix is
   no longer relevant because the dropdown is now a centered modal, not an
   anchored popup. ═══════════════════════════════════════════════════════════ */
@media (min-width:769px){
  /* ── Desktop dim backdrop — always behind the modal sheet ── */
  body.type-dd-open::before,
  body.price-dd-open::before{
    content:"";
    position:fixed; inset:0;
    background:rgba(11,37,69,.5);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    z-index:609;
    animation:cdg-fade-in var(--t-mod, 250ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
    pointer-events:auto;
  }
  body.type-dd-open .v33-modal-backdrop,
  body.price-dd-open .v33-modal-backdrop{
    /* This is the JS-injected click target — same visual as the ::before but
       gets pointer events. The ::before is non-interactive. */
    position:fixed; inset:0; z-index:610; cursor:pointer; background:transparent;
  }
  /* ── Centered modal sheet ── */
  #type-dd.type-dd.open,
  #price-dd.price-dd.open{
    position:fixed !important;
    top:80px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    width:min(480px, calc(100vw - 32px)) !important;
    max-width:480px !important;
    height:auto !important;
    max-height:calc(100vh - 120px) !important;
    background:#fff !important;
    border:1px solid var(--light, #dde1e8) !important;
    border-radius:var(--r-xl, 16px) !important;
    box-shadow:var(--sh-3, 0 16px 48px rgba(11,37,69,.18), 0 4px 12px rgba(11,37,69,.08)) !important;
    padding:24px 24px 20px !important;
    z-index:711 !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    animation:cdg-fade-in var(--t-mod, 250ms) var(--ease-out, cubic-bezier(.16,1,.3,1));
  }
  /* ── X close button — JS injects a `.v33-modal-close` button on first open ── */
  .v33-modal-close{
    position:absolute !important;
    top:14px !important; right:14px !important;
    width:36px !important; height:36px !important;
    border-radius:50% !important;
    background:var(--off, #f4f6f8) !important;
    border:none !important;
    color:var(--brand-navy, #0c1f38) !important;
    font-size:22px !important; line-height:1 !important;
    cursor:pointer !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    transition:background var(--t-fast, 150ms) var(--ease-out, ease-out),
               color var(--t-fast, 150ms) var(--ease-out, ease-out) !important;
    z-index:2 !important;
    padding:0 !important;
  }
  .v33-modal-close:hover{
    background:var(--brand-navy, #0c1f38) !important;
    color:#fff !important;
  }
  .v33-modal-close:focus-visible{
    outline:2px solid var(--brand-teal, #EA0649) !important;
    outline-offset:2px !important;
  }
  /* ── Modal title for type-dd (no built-in title element) — pseudo-injected ── */
  #type-dd.type-dd.open::before{
    content: attr(data-modal-title);
    display:block;
    font-family:var(--serif, 'DM Serif Display'), Georgia, serif;
    font-size:var(--t-h3, 20px);
    color:var(--brand-navy, #0c1f38);
    font-weight:400;
    letter-spacing:-.2px;
    margin:0 0 14px;
    padding-right:48px; /* leave room for the X */
  }
  /* Price-dd already has #pd-title (.pd-title) — restyle it to match the type-dd
     pseudo-title, with right padding for the X button. */
  #price-dd.price-dd.open .pd-title{
    font-family:var(--serif, 'DM Serif Display'), Georgia, serif !important;
    font-size:var(--t-h3, 20px) !important;
    color:var(--brand-navy, #0c1f38) !important;
    font-weight:400 !important;
    letter-spacing:-.2px !important;
    margin:0 0 14px !important;
    padding-right:48px !important;
  }
  /* ── List items — clean spacing on desktop ── */
  #type-dd.type-dd.open .type-dd-item{
    padding:14px 16px !important;
    font-size:15px !important;
    border-radius:8px !important;
    cursor:pointer !important;
    transition:background var(--t-fast, 150ms) var(--ease-out, ease-out) !important;
  }
  #type-dd.type-dd.open .type-dd-item:hover{
    background:var(--off, #f4f6f8) !important;
  }
  /* ── Price modal: re-assert v26 vertical-list semantics inside the centered modal ── */
  #price-dd.price-dd.open .pd-list{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    width:auto !important;
  }
  #price-dd.price-dd.open .pd-list-item{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    text-align:left !important;
    padding:12px 14px !important;
  }
  #price-dd.price-dd.open .pd-presets{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v33 — "Alert me of new listings" floating pill: tighten visibility.
   v10 rule (line ~1169) showed the pill on `body.in-search` OR `body.map-fs`,
   which incorrectly included split view + listing detail + listings tab.

   v33 rules:
   • Mobile (≤768px): show ONLY when the user is on fullmap (in-fullmap or
     map-fs). Hidden on list / mixed / listing detail / sold / building.
   • Desktop (≥769px): show ONLY when on fullmap view (in-fullmap). Split
     view already shows a list — the floating pill is redundant there.
   • Hidden whenever a modal is open (modal-open / type-dd-open / price-dd-open
     / sold view / listing-detail / building sheet) — independent of breakpoint.
   ═══════════════════════════════════════════════════════════════════════ */
/* Hide everywhere by default — only the rules below re-show it. */
.map-alert-cta{ display:none !important }
@media (max-width:768px){
  body.in-fullmap .map-alert-cta,
  body.map-fs .map-alert-cta{ display:flex !important }
}
@media (min-width:769px){
  body.in-fullmap .map-alert-cta{ display:flex !important }
}
/* Hard hides — beat the show rules above. */
body.in-list .map-alert-cta,
body.in-mixed .map-alert-cta,
body.in-listings .map-alert-cta,
body.in-sold .map-alert-cta,
body.in-listing-detail .map-alert-cta,
body.bldg-sheet-open .map-alert-cta,
body.modal-open .map-alert-cta,
body.type-dd-open .map-alert-cta,
body.price-dd-open .map-alert-cta,
body:not(.in-search) .map-alert-cta{ display:none !important }

/* ═══════════════════════════════════════════════════════════════════════
   v32 (preserved as historical doc) — Desktop Price dropdown truncation fix.
   Root cause: the v12 scorched-earth force-show rule at line ~3638 forces
   `.price-dd.open` and `.price-dd.open > *` to `position:static !important`.
   That destroys the desktop absolute anchor — the dropdown reflows inline
   inside the .fbar (height 50px), and the cascade of overflow/clipping at
   parents leaves only the bottom slice of the list visible (user IMG_4901
   showed only "$2.5K-$3K | $3K-$4K | $4K+ | Custom range" — the top 4
   rent options + Any price + title + actions were clipped above).

   v26 made it visible because the new vertical .pd-list is taller than the
   old chip row — the same broken positioning was less obvious before.

   Fix at desktop only (mobile uses position:fixed bottom-sheet via @media
   max-width:768px, which has higher specificity than this rule). ══════════ */
@media (min-width:769px){
  /* Re-assert absolute anchor on the dropdown itself + its direct children's
     natural display values. Higher specificity than the v12 reset because we
     scope through #price-dd (id) + .open (class). */
  #price-dd.price-dd.open{
    position:absolute !important;
    top:calc(100% + 4px) !important;
    left:0 !important;
    width:340px !important;
    height:auto !important;
    max-height:calc(100vh - var(--navh, 56px) - var(--fh, 50px) - 32px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
  }
  /* The vertical list wants flex column — the v12 force-show overrode it to
     block, but block stacking still works. Re-assert flex for crisp gap rendering. */
  #price-dd.price-dd.open .pd-list{
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
    width:auto !important;
  }
  #price-dd.price-dd.open .pd-list-item{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    width:100% !important;
    text-align:left !important;
  }
  /* Safety net: if the dropdown's own max-height kicks in on short viewports,
     ensure the inner list also scrolls cleanly — but in practice the parent
     scrolls. The list itself never needs an internal scroll. */
  #price-dd.price-dd.open .pd-presets{ display:none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   v31 LEAD-GEN MODULE — STYLES
   ═══════════════════════════════════════════════════════════════════════ */

/* — Sold-gate microsub (subtitle under the new social-proof headline) — */
.sold-gate-microsub{
  font-size:var(--t-sm); color:var(--mid); margin:-2px 0 14px;
  letter-spacing:.2px; font-weight:500;
}

/* — Lead form: SMS toggle row — Linear-style switch — */
.lf-sms-row{ margin-top:var(--s-2) }
.lf-sms-toggle{
  display:flex; gap:var(--s-3); align-items:flex-start; cursor:pointer;
  padding:var(--s-3); background:var(--off); border-radius:var(--r-md);
  border:1px solid var(--light); transition:border-color var(--t-fast) var(--ease-out);
}
.lf-sms-toggle:hover{ border-color:var(--brand-teal) }
.lf-sms-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.lf-sms-track{
  flex-shrink:0; width:36px; height:20px; background:#cbd5d1; border-radius:var(--r-pill);
  position:relative; transition:background var(--t-fast) var(--ease-out); margin-top:2px;
}
.lf-sms-thumb{
  position:absolute; top:2px; left:2px; width:16px; height:16px; background:#fff;
  border-radius:50%; box-shadow:var(--sh-1);
  transition:transform var(--t-fast) var(--ease-out);
}
.lf-sms-toggle input:checked ~ .lf-sms-track{ background:var(--brand-teal); }
.lf-sms-toggle input:checked ~ .lf-sms-track .lf-sms-thumb{ transform:translateX(16px); }
.lf-sms-toggle input:focus-visible ~ .lf-sms-track{ outline:2px solid var(--brand-teal); outline-offset:2px; }
.lf-sms-copy{ flex:1; min-width:0; }
.lf-sms-copy strong{ display:block; font-size:var(--t-md); color:var(--brand-navy); font-weight:600; }
.lf-hint-block{ display:block; margin-top:2px; line-height:1.4; }

/* — Listing detail .m-cta with 4 actions (Schedule / Talk / Call / Save) — */
.m-cta-4{ grid-template-columns: 1.4fr 1fr 48px 48px !important; gap:var(--s-2) !important; }
@media (max-width: 480px){
  .m-cta-4{ grid-template-columns: 1.2fr 1fr 44px 44px !important; }
}
.cta-icon-call{
  display:flex; align-items:center; justify-content:center;
  background:#fff; border:1.5px solid var(--brand-teal); color:var(--brand-teal);
  border-radius:var(--r-md); transition:background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
  text-decoration:none;
}
.cta-icon-call:hover, .cta-icon-call:active{ background:var(--brand-teal); color:#fff; }
.cta-icon-call svg{ width:20px; height:20px }

/* — Heart-favorite first-time tooltip — pops near the heart — */
.v31-fav-tip{
  position:fixed; z-index:8000;
  background:var(--brand-navy); color:#fff;
  padding:var(--s-2) var(--s-3);
  border-radius:var(--r-md);
  box-shadow:var(--sh-3);
  font-size:var(--t-sm); font-weight:500; line-height:1.35;
  display:flex; align-items:center; gap:var(--s-2);
  max-width:300px; pointer-events:none;
  opacity:0; transform:translateY(8px) scale(.96);
  transition:opacity var(--t-mod) var(--ease-out), transform var(--t-mod) var(--ease-out);
}
.v31-fav-tip svg{ flex-shrink:0; color:#ff5b6e; fill:#ff5b6e }
.v31-fav-tip-in { opacity:1; transform:translateY(0) scale(1) }
.v31-fav-tip-out{ opacity:0; transform:translateY(-4px) scale(.98) }
.v31-fav-tip::after{
  content:""; position:absolute; bottom:-4px; left:50%; margin-left:-4px;
  width:8px; height:8px; background:var(--brand-navy); transform:rotate(45deg);
}
@media (prefers-reduced-motion: reduce){
  .v31-fav-tip{ transition:opacity 1ms; transform:none; }
  .v31-fav-tip-in, .v31-fav-tip-out{ transform:none }
}

/* — Recent Sold wall on home page — horizontal scroller with locked-price — */
.hp-recent-sold .hp-sub{
  font-size:var(--t-md); color:var(--mid); margin-top:6px; max-width:560px;
}
.hp-recent-sold .hp-sub strong{ color:var(--brand-navy); font-weight:600 }
.hp-rsw-row{
  display:flex !important; gap:var(--s-4); overflow-x:auto; overflow-y:hidden;
  padding-bottom:var(--s-3); scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.hp-rsw-row::-webkit-scrollbar{ height:8px }
.hp-rsw-row::-webkit-scrollbar-thumb{ background:var(--light); border-radius:4px }
.rsw-card{
  flex:0 0 240px; scroll-snap-align:start;
  background:#fff; border:1px solid var(--light); border-radius:var(--r-lg);
  padding:0; overflow:hidden; cursor:pointer; text-align:left;
  font-family:inherit; transition:box-shadow var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.rsw-card:hover{ box-shadow:var(--sh-2); transform:translateY(-2px); }
.rsw-card:focus-visible{ outline:2px solid var(--brand-teal); outline-offset:2px }
.rsw-img{
  position:relative; height:140px; background:var(--off);
  display:flex; align-items:center; justify-content:center; color:var(--mid);
}
.rsw-status{
  position:absolute; top:var(--s-2); left:var(--s-2);
  background:var(--st-negative); color:#fff;
  padding:3px 8px; border-radius:var(--r-sm);
  font-size:10px; font-weight:700; letter-spacing:.5px;
}
.rsw-body{ padding:var(--s-3) }
.rsw-price{
  font-family:var(--serif); font-size:var(--t-h3); color:var(--brand-navy);
  font-weight:400; letter-spacing:-.3px; line-height:1.1; margin-bottom:6px;
}
.rsw-price-locked{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--brand-navy); color:#fff;
  padding:6px 10px; border-radius:var(--r-md);
  font-size:var(--t-sm); font-weight:600; margin-bottom:8px;
  letter-spacing:.5px;
}
.rsw-addr{ font-size:var(--t-md); font-weight:600; color:var(--brand-navy); margin-bottom:2px; line-height:1.3 }
.rsw-hood{ font-size:var(--t-sm); color:var(--mid); margin-bottom:8px }
.rsw-meta{
  display:flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:600; color:var(--mid);
}
.rsw-dot{ color:var(--light) }

/* v305: gated state — replace address/hood/beds with shimmering gray bars
   plus a "Sign up or Log in to view" link. Mirrors the building panel
   gated card for visual consistency. */
.rsw-bar{
  height:11px; background:#eef2f5; border-radius:6px;
  margin:6px 0;
}
.rsw-bar-lg{ height:13px; width:80%; margin-top:8px }
.rsw-card-gated .rsw-bar:nth-of-type(2){ width:60% }
.rsw-signin{
  display:inline-block;
  margin-top:10px;
  padding:6px 0;
  color:#EA0649; font-size:13px; font-weight:600;
  border-bottom:1.5px solid #EA0649;
}
.rsw-card-gated:hover .rsw-signin{ color:#CE2C44; border-color:#CE2C44 }

/* ═══════════════════════════════════════════════════════════════════════════
   v306 Phase A — Schools section on listing detail.
   HouseSigma-style data table: school name, type, board, rating ring,
   distance. Tab strip filters by level.
   ═══════════════════════════════════════════════════════════════════════════ */
.v306-schools-sub{ font-size:13px; color:#64748b; margin-bottom:14px }
.v306-schools-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:16px }
.v306-sch-tab{
  padding:7px 14px; background:#fff; border:1.5px solid #e5e9ed;
  border-radius:999px; font-size:12.5px; font-weight:600; color:#475569;
  cursor:pointer; font-family:inherit; transition:all .12s;
}
.v306-sch-tab:hover{ border-color:#cbd5e1; color:#0c1f38 }
.v306-sch-tab.on{ background:#0c1f38; border-color:#0c1f38; color:#fff }
.v306-schools-list{ display:flex; flex-direction:column }
.v306-school-row{
  display:flex; align-items:center; gap:14px;
  padding:14px 0; border-bottom:1px solid #f1f5f9;
}
.v306-school-row:last-child{ border-bottom:none }
.v306-school-rating{
  position:relative; width:54px; height:54px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.v306-school-rating svg{ position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg) }
.v306-school-rating .v306-sr-bg{ fill:none; stroke:#eef2f5; stroke-width:5 }
.v306-school-rating .v306-sr-fg{ fill:none; stroke-width:5; stroke-linecap:round }
.v306-school-rating.high .v306-sr-fg{ stroke:#15803d }
.v306-school-rating.mid .v306-sr-fg{ stroke:#ca8a04 }
.v306-school-rating.low .v306-sr-fg{ stroke:#b91c1c }
.v306-school-rating-num{
  position:relative; z-index:1;
  font-size:14px; font-weight:700; color:#0c1f38;
  font-feature-settings:"tnum" 1;
}
.v306-school-info{ flex:1; min-width:0 }
.v306-school-name{
  font-size:14.5px; font-weight:600; color:#0c1f38;
  margin-bottom:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.v306-school-meta{
  font-size:12.5px; color:#64748b; line-height:1.4;
}
.v306-school-meta strong{ color:#0c1f38; font-weight:600 }
.v306-school-meta-sep{ color:#cbd5e1; padding:0 6px }
.v306-school-distance{
  flex-shrink:0;
  font-size:12.5px; font-weight:600; color:#475569;
  text-align:right;
  min-width:80px;
}
.v306-school-distance small{ display:block; color:#94a3b8; font-weight:500; font-size:11px; margin-top:2px }
.v306-schools-disclaimer{
  font-size:11.5px; color:#94a3b8; margin-top:14px;
  line-height:1.5;
}

/* v306 Phase C — Listing History table (HouseSigma signature). Real database
   feel — Date Start / Date End / Price / Event / Listing ID columns. */
.v306-hist-tbl{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13.5px;
  font-feature-settings:"tnum" 1;
}
.v306-hist-tbl thead th{
  font-size:11px; text-transform:uppercase; letter-spacing:.8px;
  color:#94a3b8; font-weight:600;
  padding:11px 14px; text-align:left;
  border-bottom:1px solid #eef2f5;
  background:#fafbfc;
}
.v306-hist-tbl tbody td{
  padding:14px 14px;
  border-bottom:1px solid #f1f5f9;
  color:#0c1f38;
  vertical-align:middle;
}
.v306-hist-tbl tbody tr:hover td{ background:#fafbfc }
.v306-hist-tbl strong{ font-weight:700 }
.v306-hist-locked{
  color:#94a3b8; font-style:italic; font-weight:500;
}
.v306-hist-gated td{ background:rgba(248,250,252,.6) }
.v306-hist-mute{ color:#cbd5e1 }
.v306-hist-gate-foot{
  margin-top:14px; padding:12px 14px;
  background:#fef3d9; border:1px solid #ead398;
  border-radius:8px;
  font-size:13px; color:#5a3a0e;
}
.v306-hist-gate-foot a{ color:#EA0649; font-weight:600; cursor:pointer; text-decoration:underline }
@media (max-width:768px){
  .v306-hist-tbl thead th,
  .v306-hist-tbl tbody td{ padding:10px 8px; font-size:12.5px }
  .v306-hist-tbl thead th{ font-size:10.5px }
}

/* v319 — TRREB-compliant price-history gating. Active list price is IDX-public;
   every historical event (Expired/Terminated/Sold/Leased/Withdrawn) is VOW and
   collapses to "(Sign-in required)" until the user logs in + accepts the
   client agreement. Lock icons mark gated rows; disclaimer footer mirrors
   housesigma's "real estate boards require..." pattern. */
.v319-gated td{ background:rgba(248,250,252,.55) }
.v319-gated td .v319-locked,
.v319-locked{
  font-style:italic;
  color:var(--mid);
  font-size:13px;
  font-weight:500;
}
.v319-lock-icon{
  display:inline-block;
  margin-right:4px;
  font-style:normal;
  filter:grayscale(.3);
  opacity:.8;
}
.v319-history-disclaimer{
  margin-top:16px;
  padding:12px 16px;
  background:var(--off);
  border-radius:8px;
  font-size:13px;
  color:var(--mid);
  line-height:1.5;
}
.v319-history-disclaimer a{
  color:var(--brand-teal);
  text-decoration:underline;
  cursor:pointer;
  font-weight:600;
}
.v319-history-lock{
  margin-right:6px;
  font-style:normal;
}
.v319-show-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding:8px 14px;
  background:var(--white);
  border:1px solid var(--light);
  border-radius:8px;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  cursor:pointer;
  font-family:var(--sans);
  transition:background .15s,border-color .15s;
}
.v319-show-more:hover{ background:var(--off); border-color:#cbd5e1 }
.v319-hist-hidden{ display:none }

@media (max-width:768px){
  .v319-history-disclaimer{ font-size:12.5px; padding:10px 12px }
  .v319-show-more{ font-size:12.5px; padding:7px 12px }
}

@media (max-width:768px){
  .v306-school-row{ gap:10px; padding:11px 0 }
  .v306-school-rating{ width:44px; height:44px }
  .v306-school-rating-num{ font-size:12px }
  .v306-school-name{ font-size:13.5px }
  .v306-school-meta{ font-size:11.5px }
  .v306-school-distance{ min-width:60px; font-size:11.5px }
}

/* — Schedule Tour overlay — bottom-sheet on mobile, centered on desktop — */
.v31-tour-ov{
  position:fixed; inset:0; z-index:7000; opacity:0; pointer-events:none;
  background:rgba(11,37,69,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  transition:opacity var(--t-mod) var(--ease-out);
}
.v31-tour-ov.open{ opacity:1; pointer-events:auto }
.v31-tour-card{
  background:#fff; width:100%; max-width:520px;
  max-height:90vh; max-height:90dvh;
  overflow-y:auto;
  border-radius:var(--r-xl) var(--r-xl) 0 0;
  padding:var(--s-5) var(--s-5) var(--s-7);
  position:relative;
  transform:translateY(20px); transition:transform var(--t-mod) var(--ease-out);
  box-shadow:var(--sh-3);
}
.v31-tour-ov.open .v31-tour-card{ transform:translateY(0) }
@media (min-width:769px){
  .v31-tour-ov{ align-items:center; padding:var(--s-5) }
  .v31-tour-card{ border-radius:var(--r-xl) }
}
.v31-tour-close{
  position:absolute; top:var(--s-3); right:var(--s-3);
  width:36px; height:36px; border-radius:50%;
  background:var(--off); border:none; color:var(--brand-navy);
  font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.v31-tour-close:hover{ background:var(--brand-navy); color:#fff }
.v31-tour-hdr{ margin-bottom:var(--s-5); padding-right:48px }
.v31-tour-hdr h2{
  font-family:var(--serif); font-size:var(--t-h2); color:var(--brand-navy);
  font-weight:400; letter-spacing:-.3px; margin:0 0 6px; line-height:1.2;
}
.v31-tour-sub{ font-size:var(--t-md); color:var(--mid); line-height:1.5 }
.v31-tour-sub span{ color:var(--brand-navy); font-weight:600 }
.v31-tour-section{ margin-bottom:var(--s-5) }
.v31-tour-section-lbl{
  font-size:var(--t-xs); font-weight:700; color:var(--mid);
  letter-spacing:.6px; text-transform:uppercase; margin-bottom:var(--s-2);
}
.v31-tour-days{ display:grid; grid-template-columns:repeat(7, 1fr); gap:6px }
@media (max-width:380px){ .v31-tour-days{ grid-template-columns:repeat(4, 1fr) } }
.v31-tour-day-chip{
  display:flex; flex-direction:column; align-items:center;
  padding:var(--s-2) 4px; background:#fff;
  border:1.5px solid var(--light); border-radius:var(--r-md);
  cursor:pointer; font-family:inherit;
  transition:all var(--t-fast) var(--ease-out);
}
.v31-tour-day-chip:hover{ border-color:var(--brand-teal) }
.v31-tour-day-chip.on{ background:var(--brand-navy); color:#fff; border-color:var(--brand-navy) }
.v31-tour-day-dow{ font-size:10px; font-weight:600; opacity:.7; letter-spacing:.5px; text-transform:uppercase }
.v31-tour-day-num{ font-size:var(--t-h3); font-weight:700; line-height:1; margin:2px 0 }
.v31-tour-day-mon{ font-size:10px; font-weight:500; opacity:.7 }
.v31-tour-times{ display:flex; flex-wrap:wrap; gap:var(--s-2) }
.v31-tour-time-chip{
  flex:1 1 calc(33% - 8px); min-width:80px;
  padding:var(--s-3) var(--s-2);
  background:#fff; border:1.5px solid var(--light); border-radius:var(--r-md);
  cursor:pointer; font-family:inherit; font-size:var(--t-md); font-weight:600;
  color:var(--brand-navy);
  transition:all var(--t-fast) var(--ease-out);
}
.v31-tour-time-chip:hover{ border-color:var(--brand-teal) }
.v31-tour-time-chip.on{ background:var(--brand-teal); color:#fff; border-color:var(--brand-teal) }
.v31-tour-when-banner{
  display:flex; align-items:center; gap:var(--s-2);
  background:var(--brand-teal); color:#fff;
  padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  font-size:var(--t-md); margin-bottom:var(--s-4);
}
.v31-tour-fg{ margin-bottom:var(--s-3) }
.v31-tour-fg label{
  display:block; font-size:var(--t-sm); font-weight:600; color:var(--brand-navy);
  margin-bottom:6px;
}
.v31-tour-fg input{
  width:100%; padding:var(--s-3) var(--s-3);
  border:1.5px solid var(--light); border-radius:var(--r-md);
  font-size:16px; /* iOS no-zoom */
  font-family:inherit; color:var(--brand-navy);
  transition:border-color var(--t-fast) var(--ease-out);
}
.v31-tour-fg input:focus{ border-color:var(--brand-teal); outline:none }
.v31-tour-hint{ color:var(--mid); font-weight:500 }
.v31-tour-submit{
  width:100%; padding:var(--s-4); background:var(--brand-teal); color:#fff;
  border:none; border-radius:var(--r-md);
  font-size:var(--t-md); font-weight:700; cursor:pointer; font-family:inherit;
  margin-top:var(--s-2);
  transition:background var(--t-fast) var(--ease-out);
}
.v31-tour-submit:hover{ background:var(--brand-teal-deep) }
.v31-tour-back{
  width:100%; padding:var(--s-2); background:transparent; color:var(--mid);
  border:none; font-size:var(--t-sm); cursor:pointer; font-family:inherit;
  margin-top:var(--s-2);
}
.v31-tour-back:hover{ color:var(--brand-navy) }

/* — Investor Calculator overlay — */
.v31-ic-ov{
  position:fixed; inset:0; z-index:7000; opacity:0; pointer-events:none;
  background:rgba(11,37,69,.5); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-4);
  transition:opacity var(--t-mod) var(--ease-out);
}
.v31-ic-ov.open{ opacity:1; pointer-events:auto }
.v31-ic-card{
  background:#fff; width:100%; max-width:780px;
  max-height:92vh; max-height:92dvh; overflow-y:auto;
  border-radius:var(--r-xl); padding:var(--s-5);
  position:relative; box-shadow:var(--sh-3);
  transform:translateY(20px); transition:transform var(--t-mod) var(--ease-out);
}
.v31-ic-ov.open .v31-ic-card{ transform:translateY(0) }
.v31-ic-close{
  position:absolute; top:var(--s-3); right:var(--s-3);
  width:36px; height:36px; border-radius:50%;
  background:var(--off); border:none; color:var(--brand-navy);
  font-size:24px; line-height:1; cursor:pointer;
}
.v31-ic-close:hover{ background:var(--brand-navy); color:#fff }
.v31-ic-hdr{ margin-bottom:var(--s-5); padding-right:48px }
.v31-ic-eyebrow{
  font-size:var(--t-xs); font-weight:700; color:var(--brand-teal);
  letter-spacing:1.1px; text-transform:uppercase; margin-bottom:6px;
}
.v31-ic-hdr h2{
  font-family:var(--serif); font-size:var(--t-h2); color:var(--brand-navy);
  font-weight:400; letter-spacing:-.3px; margin:0 0 6px; line-height:1.2;
}
.v31-ic-sub{ font-size:var(--t-md); color:var(--mid); line-height:1.5 }
.v31-ic-grid{
  display:grid; grid-template-columns:1fr; gap:var(--s-5);
}
@media (min-width:680px){
  .v31-ic-grid{ grid-template-columns:1fr 1fr; }
}
.v31-ic-fg{ margin-bottom:var(--s-3) }
.v31-ic-fg label{
  display:block; font-size:var(--t-xs); font-weight:700; color:var(--mid);
  letter-spacing:.4px; text-transform:uppercase; margin-bottom:4px;
}
.v31-ic-fg input{
  width:100%; padding:var(--s-3);
  border:1.5px solid var(--light); border-radius:var(--r-md);
  font-size:16px; font-family:inherit; color:var(--brand-navy); font-weight:600;
  transition:border-color var(--t-fast) var(--ease-out);
}
.v31-ic-fg input:focus{ border-color:var(--brand-teal); outline:none }
.v31-ic-outputs{ display:flex; flex-direction:column; gap:var(--s-3) }
.v31-ic-out{
  background:var(--off); padding:var(--s-3) var(--s-4); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:4px;
}
.v31-ic-out-lbl{
  font-size:var(--t-xs); font-weight:700; color:var(--mid);
  letter-spacing:.4px; text-transform:uppercase;
}
.ic-out-num{
  font-family:var(--serif); font-size:var(--t-h3); color:var(--brand-navy);
  font-weight:400; letter-spacing:-.2px;
}
.ic-pos{ color:var(--st-positive) }
.ic-neg{ color:var(--st-negative) }
.v31-ic-5y-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); margin-top:6px }
.v31-ic-5y-grid > div{ display:flex; flex-direction:column; gap:2px }
.v31-ic-5y-grid span{ font-size:var(--t-xs); color:var(--mid); font-weight:500 }
.v31-ic-5y-grid strong{
  font-family:var(--serif); font-size:var(--t-lg); color:var(--brand-navy); font-weight:400;
}
.v31-ic-cta{
  margin-top:var(--s-3); padding:var(--s-3) var(--s-4);
  background:var(--brand-teal); color:#fff; border:none;
  border-radius:var(--r-md); font-size:var(--t-md); font-weight:600;
  font-family:inherit; cursor:pointer;
  transition:background var(--t-fast) var(--ease-out);
}
.v31-ic-cta:hover{ background:var(--brand-teal-deep) }
.v31-ic-gate{
  position:absolute; inset:0; background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--s-5); border-radius:var(--r-xl);
  opacity:0; pointer-events:none;
  transition:opacity var(--t-mod) var(--ease-out);
  z-index:5;
}
.v31-ic-gate.open{ opacity:1; pointer-events:auto }
.v31-ic-gate-card{
  background:#fff; padding:var(--s-5); border-radius:var(--r-lg);
  box-shadow:var(--sh-3); max-width:380px; text-align:center;
  border:1px solid var(--light);
}
.v31-ic-gate-card h3{
  font-family:var(--serif); font-size:var(--t-h3); color:var(--brand-navy);
  font-weight:400; margin:0 0 var(--s-2);
}
.v31-ic-gate-card p{ font-size:var(--t-md); color:var(--mid); line-height:1.5; margin:0 0 var(--s-4) }
.v31-ic-gate-card input{
  width:100%; padding:var(--s-3);
  border:1.5px solid var(--light); border-radius:var(--r-md);
  font-size:16px; margin-bottom:var(--s-3); font-family:inherit;
}
.v31-ic-gate-card input:focus{ border-color:var(--brand-teal); outline:none }
.v31-ic-gate-card button{
  width:100%; padding:var(--s-3); background:var(--brand-teal); color:#fff;
  border:none; border-radius:var(--r-md);
  font-size:var(--t-md); font-weight:700; cursor:pointer; font-family:inherit;
}
.v31-ic-gate-skip{
  margin-top:var(--s-2); background:transparent !important;
  color:var(--mid) !important; font-weight:500 !important;
}
.v31-ic-gate-skip:hover{ color:var(--brand-navy) !important }

/* ═══════════════════════════════════════════════════════════════════════
   v40 — ARCHITECTURE PASS
   ───────────────────────────────────────────────────────────────────────
   Five passes to break the regression cycle (v34→v35 missing div, v33→v37
   modal mutex re-fixes, v37→v38 home-scroll, v38→v39 nav-visibility, etc.)

   Pass 1 — CSS Containment.   Every major section gets `contain: layout
                               style` so a bug in one component can't reflow
                               its siblings.
   Pass 2 — Container queries. The most-broken components (filter modal,
                               cards, map area) declare container-name +
                               container-type so future rules can use
                               @container instead of fragile @media.
   Pass 3 — Fluid sizing.      Type + spacing tokens added with clamp() so
                               layout doesn't snap at breakpoint boundaries.
   Pass 4 — Visual regression. _verify_v40.js asserts structural invariants
                               at 9 viewports + iOS Safari + Android Chrome
                               quirks.
   Pass 5 — Strict no-new-cascade-override rule. v40 baseline: 915 occurrences
                               of the cascade-override keyword (491 lines × avg
                               ~1.86 per line). No new ones added in v40.
                               Future versions must not exceed the v40
                               baseline without explicit justification.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Pass 1: CSS Containment ─── */
/* `layout style` containment isolates the component's box model + property
   inheritance from siblings. A bug inside .fbar can't reflow .lb-row.
   `paint` containment additionally clips the descendant rendering — useful
   for large lists where offscreen items shouldn't repaint. */
.fbar,
.lb-row,
.list-pane,
.map-pane,
#bldg-view,
#sold-view,
#listing-view,
#search-view,
#favs-view,
.hero-clean,
.hp-section,
.fm-ov,
.cmp-modal,
.bldg-sheet,
.lb-ov,
#auth-modal-content,
#lead-modal,
.price-dd,
.type-dd,
.v31-tour-card,
.v31-ic-card,
#v31-tour-ov,
#v31-investor-calc{
  contain: layout style;
}
.cards-list .card,
.cards-grid .card,
.cards-mixed .card,
.hp-fcard,
.rsw-card,
.skel-card{
  contain: layout style paint;
}

/* ─── Pass 2: Container queries ───
   container-type: inline-size lets descendants query the container's width
   instead of the viewport. Components become viewport-agnostic — a card
   inside a popup looks the same as one inside the main grid because both
   query the same parent width logic.
   We register containers conservatively (not retrofitting every layout)
   so existing flex/grid behaviour stays intact. */
.cards-grid,
.cards-list,
.cards-mixed,
.hp-cards-row,
.hp-rsw-row{
  container-type: inline-size;
  container-name: cards-row;
}
.fm{
  container-type: inline-size;
  container-name: filter-modal;
}
.map-pane{
  container-type: inline-size;
  container-name: map-area;
}

/* Demo container query — listing card adapts to its parent's width.
   When the cards row is below 600px (e.g. inside a narrow split view OR
   a popup), the card becomes single-column. Triggered by parent width,
   not viewport, so it works correctly even when nested in unexpected
   places. */
@container cards-row (max-width: 600px){
  .card .card-spec-row{
    flex-wrap: wrap;
    gap: 4px 10px;
  }
}
@container cards-row (max-width: 480px){
  .card .ci{
    height: clamp(180px, 32vw, 220px);
  }
}
/* Filter modal: when the modal itself is below 480px wide, chip rows
   reduce gap. Useful for the desktop filter drawer when partially shown. */
@container filter-modal (max-width: 480px){
  .fm-chip-stepper{ gap: 4px }
}

/* ─── Pass 3: Fluid sizing tokens ───
   Use these in NEW rules to eliminate layout jumps at breakpoint
   boundaries. Existing rules with hard sizes are preserved (no
   destructive refactor) but converge here over time. */
:root{
  /* Fluid type scale — minimum at 320px viewport, max at 1440px+ */
  --t-fluid-xs: clamp(11px, 0.4vw + 9.5px, 12.5px);
  --t-fluid-sm: clamp(12px, 0.5vw + 10px, 13.5px);
  --t-fluid-md: clamp(13px, 0.6vw + 11px, 15px);
  --t-fluid-lg: clamp(15px, 0.8vw + 12px, 18px);
  --t-fluid-h3: clamp(18px, 1.5vw + 13px, 24px);
  --t-fluid-h2: clamp(24px, 2.5vw + 15px, 36px);
  --t-fluid-h1: clamp(32px, 4vw + 18px, 56px);
  /* Fluid spacing — gap that feels right at every viewport. */
  --s-fluid-sm: clamp(8px, 1vw, 12px);
  --s-fluid-md: clamp(12px, 1.5vw, 16px);
  --s-fluid-lg: clamp(16px, 2vw, 24px);
  --s-fluid-xl: clamp(20px, 3vw, 32px);
  --s-fluid-2xl: clamp(28px, 4vw, 48px);
}

/* ─── iOS Safari + Android Chrome quirks (already addressed, documented) ───
   • 100dvh fallback → see v25 .fm-body, v28 #map.
   • safe-area-inset-bottom → see .m-cta, .fm-foot, .v31-tour-card.
   • touch-action scoped → see v17 body{touch-action:pan-x pan-y}, v24 photo gallery pan-x.
   • iOS 16px no-zoom → see v17 inputs in @max-width:768px.
   • :has() body-class fallback → see v8/v9 type-dd-open, price-dd-open.
   • -webkit-tap-highlight-color: transparent → see v25 fc:hover, fm-chip-step, etc.
   • touch-action: manipulation → see fm-save-search, sticky-btn, lb-btn (chip touch targets).
   No new quirk fixes needed in v40 — they're all covered. */

/* ═══════════════════════════════════════════════════════════════════════
   v42 — LEAD-GEN OPTIMIZATION MODULE (10 items)
   All capture surfaces are wired but backend integration deferred — every
   handler is marked `// TODO: wire to CRM` (Mailchimp / HubSpot / Twilio).
   ═══════════════════════════════════════════════════════════════════════ */

/* — 1. "X people viewing now" — small inline counter on listing detail */
.v42-viewing-now{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; color:var(--mid, #6b7a8d);
  font-weight:500; margin:6px 0 0;
}
.v42-viewing-now-dot{
  width:7px; height:7px; border-radius:50%;
  background:#10b981; box-shadow:0 0 0 3px rgba(16,185,129,.15);
  animation:v42PulseDot 1.6s ease-in-out infinite; flex-shrink:0;
}
@keyframes v42PulseDot{
  0%,100%{box-shadow:0 0 0 3px rgba(16,185,129,.15)}
  50%   {box-shadow:0 0 0 6px rgba(16,185,129,0)}
}
.v42-viewing-now strong{ color:var(--brand-navy, #0c1f38); font-weight:700 }

/* — 2. Recent activity ticker (home page bottom) */
.v42-ticker{
  position:relative; overflow:hidden;
  background:linear-gradient(to right, var(--brand-navy, #0c1f38), #143761);
  color:#fff; padding:14px 0; margin:0;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.v42-ticker-row{
  display:flex; gap:48px; white-space:nowrap;
  animation:v42TickerScroll 60s linear infinite;
  font-size:13.5px; font-weight:500; letter-spacing:.1px;
}
.v42-ticker-row:hover{ animation-play-state:paused }
.v42-ticker-item{ display:inline-flex; align-items:center; gap:8px }
.v42-ticker-item::before{
  content:"●"; color:#e37f9b; font-size:8px;
}
.v42-ticker-item strong{ color:#e37f9b; font-weight:600 }
@keyframes v42TickerScroll{
  from{ transform:translateX(0) }
  to  { transform:translateX(-50%) }
}
@media (prefers-reduced-motion: reduce){
  .v42-ticker-row{ animation:none }
}

/* — 3. Lead capture moments — uniform inline-card style for in-page captures */
.v42-capture{
  display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(135deg, var(--brand-teal, #EA0649) 0%, #CE2C44 100%);
  color:#fff; padding:24px clamp(20px, 3vw, 32px); border-radius:16px;
  margin:24px clamp(12px, 3vw, 24px);
  box-shadow:0 8px 24px rgba(158,13,54,.22);
}
.v42-capture-row{ display:flex; flex-direction:column; gap:8px }
.v42-capture-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; opacity:.85;
}
.v42-capture-title{
  font-family:var(--serif, 'DM Serif Display'), Georgia, serif;
  font-size:clamp(20px, 2vw, 24px); font-weight:400;
  letter-spacing:-.3px; line-height:1.2; margin:0;
}
.v42-capture-sub{ font-size:14px; opacity:.92; line-height:1.5 }
.v42-capture-form{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px }
.v42-capture-form input{
  flex:1 1 220px;
  padding:13px 16px; border:none; border-radius:10px;
  font-size:16px; font-family:inherit; color:var(--brand-navy);
  background:#fff;
}
.v42-capture-form input:focus{ outline:2px solid #fff; outline-offset:2px }
.v42-capture-form button{
  flex:0 0 auto;
  padding:13px 22px; background:var(--brand-navy, #0c1f38);
  color:#fff; border:none; border-radius:10px;
  font-size:14px; font-weight:700; cursor:pointer;
  font-family:inherit; letter-spacing:-.05px;
  transition:background .15s, transform .12s;
}
.v42-capture-form button:hover{ background:#162845 }
.v42-capture-form button:active{ transform:scale(.97) }
.v42-capture-microsub{ font-size:11.5px; opacity:.78; margin-top:4px }

/* — 4. Sticky listing-detail bottom bar (Call / Text / Email) — */
.v42-detail-cta{
  position:fixed; left:0; right:0; bottom:0;
  background:#fff; border-top:1px solid rgba(11,37,69,.12);
  box-shadow:0 -4px 16px rgba(11,37,69,.08);
  padding:10px clamp(12px, 2vw, 20px) calc(10px + env(safe-area-inset-bottom, 0px));
  z-index:540; display:none;
}
body.in-listing-detail .v42-detail-cta{ display:block }
.v42-detail-cta-inner{
  display:flex; gap:8px; align-items:center;
  max-width:680px; margin:0 auto;
}
.v42-detail-cta-lbl{
  font-size:13px; font-weight:600; color:var(--brand-navy);
  margin-right:auto; line-height:1.2;
}
.v42-detail-cta-lbl small{
  display:block; font-weight:500; color:var(--mid); font-size:11.5px;
}
@media (max-width:600px){ .v42-detail-cta-lbl{ display:none } }
.v42-detail-cta-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:10px 14px; border-radius:10px;
  font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  text-decoration:none; min-height:44px;
  transition:background .15s, color .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.v42-detail-cta-btn:active{ transform:scale(.97) }
/* v=430k — Item 152: slate-blue (was teal). */
.v42-detail-cta-call{ background:#4b94ba; color:#fff; border:none }
.v42-detail-cta-call:hover{ background:#1e7ea0 }
.v42-detail-cta-text{ background:#fff; color:var(--brand-navy); border:1.5px solid var(--light) }
.v42-detail-cta-text:hover{ border-color:var(--brand-teal); color:var(--brand-teal) }
.v42-detail-cta-email{ background:#fff; color:var(--brand-navy); border:1.5px solid var(--light) }
.v42-detail-cta-email:hover{ border-color:var(--brand-navy) }
.v42-detail-cta-btn svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }

/* v308: body-level mobile CTA is the single canonical sticky action bar.
   It stays outside the scrolling modal so Request a viewing + Save remain
   visible while the listing content scrolls underneath on phones only. */
/* v315 BUG-FIX: removed the older broad `@media (min-width:769px) { display:none !important }`
   block that was fighting the mobile show rule on devices in the 769px-1023px
   range AND being declared after the mobile rule made it the last-write winner
   in some specificity-equal scenarios. Desktop hide is still handled by the
   explicit `@media (min-width:1024px)` rule in the v305 block above. */
@media (max-width:1023px){
  body.in-listing-detail .v42-detail-cta{
    display:flex !important;
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(20px + env(safe-area-inset-bottom,0px)) !important;
    z-index:650 !important;
    padding:0 16px !important;
    background:transparent !important;
    border:none !important;
    box-shadow:none !important;
    pointer-events:none !important;
  }
}
.v307-mob-cta-row{
  display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:680px; margin:0 auto;
  padding:0;
}
.v307-mob-cta{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-size:14.5px; font-weight:600; cursor:pointer;
  font-family:inherit; letter-spacing:.05px;
  min-height:48px;
  white-space:nowrap;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, transform .12s, box-shadow .15s;
}
.v307-mob-cta:active{ transform:scale(.97) }
.v307-mob-cta-primary{
  background:#0c1f38; color:#fff; border:none;
  box-shadow:0 8px 24px rgba(11,37,69,.32), 0 2px 6px rgba(11,37,69,.16);
}
.v307-mob-cta-primary:hover{ background:#13315c }
.v307-mob-cta svg{ flex-shrink:0; width:16px; height:16px }
.v307-mob-cta-icon{
  flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:50%;
  background:#fff; color:#0c1f38;
  cursor:pointer;
  pointer-events:auto;
  border:none;
  box-shadow:0 6px 16px rgba(11,37,69,.18), 0 1px 4px rgba(11,37,69,.10);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s, transform .12s, box-shadow .15s;
}
.v307-mob-cta-icon.on,
.v307-mob-cta-icon[aria-pressed="true"]{ color:#dc2626 }
.v307-mob-cta-icon:hover{ background:#f8fafc }
.v307-mob-cta-icon:active{ transform:scale(.94) }
.v307-mob-cta-icon svg{ width:20px; height:20px; stroke:currentColor; fill:none }
.v307-mob-cta-icon.on svg{ fill:currentColor }
@media (max-width:380px){
  .v307-mob-cta{ font-size:13.5px; padding:13px 22px }
  .v307-mob-cta svg{ width:14px; height:14px }
  .v307-mob-cta-icon{ width:42px; height:42px }
  .v307-mob-cta-icon svg{ width:18px; height:18px }
}

/* — 5. Web push opt-in soft prompt (after 30 seconds) — */
/* v75: positioned to never block the mobile bot-tabs / fab pills, and to hide
   while the user is drawing a boundary so the boundary banner is unobstructed. */
.v42-push-prompt{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(120%);
  background:#fff; color:var(--brand-navy);
  padding:14px 16px; border-radius:14px;
  box-shadow:0 12px 32px rgba(11,37,69,.18), 0 1px 3px rgba(11,37,69,.06);
  border:1px solid var(--light);
  display:flex; align-items:center; gap:12px;
  z-index:7500; max-width:380px; width:calc(100% - 32px);
  transition:transform .35s cubic-bezier(.16,1,.3,1), opacity .25s;
  opacity:0; pointer-events:none;
}
.v42-push-prompt.open{ transform:translateX(-50%) translateY(0); opacity:1; pointer-events:auto }
@media (max-width:768px){
  /* Sit above the bot-tabs (~60px) + fab-row pills (~52px) + safe-area */
  .v42-push-prompt{ bottom: calc(140px + env(safe-area-inset-bottom,0px)) }
}
/* Hide the push prompt during draw / applied boundary states so it doesn't
   block the boundary banner or get in the way of the Apply / Cancel buttons. */
body.draw-mode-on .v42-push-prompt,
body.draw-applied-on .v42-push-prompt{ opacity:0 !important; pointer-events:none !important }
.v42-push-prompt-ico{
  width:40px; height:40px; border-radius:50%;
  background:rgba(158,13,54,.12); color:var(--brand-teal);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.v42-push-prompt-ico svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2 }
.v42-push-prompt-body{ flex:1; min-width:0 }
.v42-push-prompt-title{ font-size:13.5px; font-weight:600; color:var(--brand-navy); margin:0 0 2px }
.v42-push-prompt-sub{ font-size:12px; color:var(--mid); line-height:1.35; margin:0 }
.v42-push-prompt-actions{ display:flex; gap:6px; flex-shrink:0 }
.v42-push-prompt-actions button{
  border:none; padding:7px 12px; border-radius:8px;
  font-size:12.5px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .12s;
}
.v42-push-prompt-yes{ background:var(--brand-teal); color:#fff }
.v42-push-prompt-yes:hover{ background:#CE2C44 }
.v42-push-prompt-no{ background:transparent; color:var(--mid) }
.v42-push-prompt-no:hover{ color:var(--brand-navy) }

/* — 6. Newsletter signup row in footer — */
.v42-news{
  background:rgba(255,255,255,.04);
  padding:24px clamp(16px, 3vw, 32px);
  border-radius:14px; margin:0 0 24px;
  display:flex; flex-direction:column; gap:14px;
  border:1px solid rgba(255,255,255,.08);
}
@media (min-width:640px){
  .v42-news{ flex-direction:row; align-items:center; gap:24px }
}
.v42-news-text{ flex:1; min-width:0 }
.v42-news-title{ font-family:var(--serif), Georgia, serif; font-size:18px; font-weight:400; color:#fff; margin:0 0 4px; letter-spacing:-.2px }
.v42-news-sub{ font-size:13px; color:rgba(255,255,255,.65); margin:0; line-height:1.4 }
.v42-news-form{ display:flex; gap:8px; flex:0 1 380px; min-width:0 }
.v42-news-form input{
  flex:1; min-width:0;
  padding:12px 14px; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06); color:#fff;
  font-size:16px; font-family:inherit;
}
.v42-news-form input::placeholder{ color:rgba(255,255,255,.45) }
.v42-news-form input:focus{ outline:none; border-color:var(--brand-teal); background:rgba(255,255,255,.10) }
.v42-news-form button{
  flex:0 0 auto;
  padding:12px 18px; background:var(--brand-teal); color:#fff;
  border:none; border-radius:10px;
  font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:background .15s;
}
.v42-news-form button:hover{ background:#CE2C44 }

/* — 7. Buyer guide PDF lead magnets (3 cards on home) — */
.v42-magnets{ padding:48px 0 24px; background:#fafbfc }
.v42-magnets-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  max-width:1200px; margin:0 auto; padding:0 clamp(12px, 3vw, 24px);
}
.v42-magnet-card{
  background:#fff; border:1px solid var(--light, #dde1e8);
  border-radius:16px; padding:24px;
  display:flex; flex-direction:column; gap:12px;
  transition:box-shadow .15s, transform .15s, border-color .15s;
}
.v42-magnet-card:hover{
  box-shadow:0 8px 24px rgba(11,37,69,.08);
  transform:translateY(-2px);
  border-color:rgba(158,13,54,.32);
}
.v42-magnet-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:1.1px;
  text-transform:uppercase; color:var(--brand-teal);
}
.v42-magnet-title{
  font-family:var(--serif), Georgia, serif;
  font-size:20px; font-weight:400; color:var(--brand-navy);
  margin:0; letter-spacing:-.2px; line-height:1.25;
}
.v42-magnet-sub{ font-size:13px; color:var(--mid); line-height:1.5; margin:0 }
.v42-magnet-cta{
  margin-top:auto;
  padding:11px 16px; background:var(--brand-navy); color:#fff;
  border:none; border-radius:10px;
  font-size:13.5px; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .15s;
  display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
}
.v42-magnet-cta:hover{ background:#162845 }

/* — 8. Trust badge bar (above home hero) — */
.v42-trust-bar{
  background:#fff;
  padding:10px clamp(12px, 3vw, 24px);
  display:flex; gap:clamp(12px, 2vw, 24px); flex-wrap:wrap;
  justify-content:center; align-items:center;
  border-bottom:1px solid var(--light);
  font-size:12.5px; color:var(--mid); font-weight:500;
}
.v42-trust-badge{
  display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.v42-trust-badge strong{ color:var(--brand-navy); font-weight:700 }
@media (max-width:480px){
  .v42-trust-bar{ font-size:11.5px; gap:10px; padding:8px 12px }
}

/* — 9. Urgency badges audit — make them prominent on cards (currently small/subtle) — */
.card-status-badge,
.card-new-badge,
.card-pricedrop-badge,
.card-trending-badge,
.cn-bx{
  font-size:11px !important;       /* slightly bigger than the existing 10px */
  font-weight:800 !important;
  letter-spacing:.4px !important;
  padding:4px 9px !important;
  box-shadow:0 2px 6px rgba(11,37,69,.18) !important;
}

/* — 10. "Book 15-min chat" CTA in header — */
.v42-book-cta{
  display:none;
  align-items:center; gap:6px;
  padding:8px 14px;
  background:var(--brand-teal); color:#fff;
  border:none; border-radius:99px;
  font-size:13px; font-weight:600; cursor:pointer; font-family:inherit;
  letter-spacing:-.05px;
  transition:background .15s, transform .12s;
  -webkit-tap-highlight-color:transparent;
}
.v42-book-cta:hover{ background:#CE2C44 }
.v42-book-cta:active{ transform:scale(.97) }
@media (min-width:769px){
  .v42-book-cta{ display:inline-flex }
}
.v42-book-cta svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }

/* — Book-15-chat modal (reuses v33 modal patterns) — */
.v42-book-ov{
  position:fixed; inset:0; z-index:7000;
  background:rgba(11,37,69,.5);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease-out;
}
.v42-book-ov.open{ opacity:1; pointer-events:auto }
.v42-book-card{
  background:#fff; width:100%; max-width:420px;
  border-radius:16px; padding:28px 24px;
  box-shadow:var(--sh-3, 0 16px 48px rgba(11,37,69,.18));
  position:relative;
  transform:translateY(20px);
  transition:transform .25s ease-out;
}
.v42-book-ov.open .v42-book-card{ transform:translateY(0) }
.v42-book-close{
  position:absolute; top:12px; right:12px;
  width:32px; height:32px; border-radius:50%;
  background:var(--off); border:none; color:var(--brand-navy);
  font-size:22px; line-height:1; cursor:pointer;
}
.v42-book-close:hover{ background:var(--brand-navy); color:#fff }
.v42-book-eyebrow{ font-size:11px; font-weight:700; color:var(--brand-teal); text-transform:uppercase; letter-spacing:1px; margin:0 0 6px }
.v42-book-title{ font-family:var(--serif), Georgia, serif; font-size:22px; color:var(--brand-navy); font-weight:400; margin:0 0 6px; letter-spacing:-.2px }
.v42-book-sub{ font-size:13.5px; color:var(--mid); line-height:1.5; margin:0 0 18px }
.v42-book-fg{ margin-bottom:10px }
.v42-book-fg label{ display:block; font-size:11.5px; font-weight:700; color:var(--brand-navy); margin-bottom:4px; letter-spacing:.3px }
.v42-book-fg input,
.v42-book-fg select{
  width:100%; padding:12px 14px;
  border:1.5px solid var(--light); border-radius:10px;
  font-size:16px; font-family:inherit; color:var(--brand-navy);
}
.v42-book-fg input:focus,
.v42-book-fg select:focus{ border-color:var(--brand-teal); outline:none }
.v42-book-submit{
  width:100%; padding:14px;
  background:var(--brand-teal); color:#fff;
  border:none; border-radius:10px;
  font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit;
  margin-top:8px;
  transition:background .15s;
}
.v42-book-submit:hover{ background:#CE2C44 }
.v42-book-cta{ white-space:nowrap !important }
@media (max-width:1500px){ .v42-book-cta{ font-size:12.5px !important; padding:8px 12px !important; gap:6px !important } }
@media (max-width:1300px){ .v42-book-cta{ display:none !important } }



/* ═══════════════════════════════════════════════════════════════════════
   v51 - Renter Qualification Modal styles
   ═══════════════════════════════════════════════════════════════════════ */
.v51-rqual-ov{
  position:fixed; inset:0; z-index:7100;
  background:rgba(11,37,69,.55); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
}
.v51-rqual-ov[hidden]{ display:none !important }
.v51-rqual-card{
  width:100%; max-width:480px; max-height:calc(100vh - 40px);
  background:#fff; border-radius:18px;
  box-shadow:0 24px 64px rgba(11,37,69,.32);
  overflow-y:auto; position:relative;
  animation:slideDown .25s cubic-bezier(.2,.8,.2,1);
}
.v51-rqual-x{
  position:absolute; top:14px; right:14px; z-index:2;
  width:36px; height:36px; border-radius:50%;
  background:#f4f6f8; border:none; color:#0c1f38;
  font-size:22px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s;
}
.v51-rqual-x:hover{ background:#0c1f38; color:#fff }
.v51-rqual-body{ padding:32px 28px 28px }
.v51-rqual-eyebrow{
  font-size:11px; font-weight:700; color:#EA0649;
  letter-spacing:1px; text-transform:uppercase;
  margin-bottom:8px;
}
.v51-rqual-title{
  font-family:var(--serif, Georgia, serif);
  font-size:24px; font-weight:700; color:#0c1f38;
  margin:0 0 8px; line-height:1.2;
}
.v51-rqual-sub{
  font-size:14.5px; color:#64748b; margin:0 0 20px;
  line-height:1.5;
}
.v51-rqual-row-lbl{
  font-size:12px; font-weight:700; color:#64748b;
  text-transform:uppercase; letter-spacing:.5px;
  margin:18px 0 8px;
}
.v51-rqual-opts{
  display:flex; flex-direction:column; gap:8px; margin-bottom:8px;
}
.v51-rqual-opts-row{
  flex-direction:row; flex-wrap:wrap; gap:8px;
}
.v51-rqual-opt{
  width:100%;
  padding:14px 16px;
  background:#fff; border:1.5px solid #e5e9ed; color:#0c1f38;
  border-radius:12px;
  font-size:15px; font-weight:600;
  cursor:pointer; font-family:inherit;
  text-align:left;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .15s;
}
.v51-rqual-opt small{
  font-size:12px; font-weight:500; color:#94a3b8;
  margin-left:8px;
}
.v51-rqual-opts-row .v51-rqual-opt{
  width:auto; flex:1 1 auto; min-width:80px;
  padding:11px 14px; text-align:center;
  justify-content:center; font-size:14px;
}
.v51-rqual-opt:hover{ border-color:#0c1f38; background:#f4f6f8 }
.v51-rqual-opt.on{
  border-color:#EA0649; background:rgba(158,13,54,.08); color:#EA0649;
}
.v51-rqual-inp{
  width:100%; padding:13px 14px; margin-bottom:10px;
  border:1.5px solid #e5e9ed; border-radius:12px;
  font-size:15px; font-family:inherit; color:#0c1f38;
  outline:none; transition:border-color .15s, box-shadow .15s;
  box-sizing:border-box;
}
.v51-rqual-inp:focus{
  border-color:#EA0649; box-shadow:0 0 0 3px rgba(158,13,54,.12);
}
.v51-rqual-consent{
  display:flex; align-items:flex-start; gap:8px;
  margin:14px 0 16px;
  font-size:12.5px; color:#64748b; line-height:1.5;
  cursor:pointer;
}
.v51-rqual-consent input[type=checkbox]{
  margin-top:3px; flex-shrink:0; cursor:pointer;
  accent-color:#EA0649;
}
.v51-rqual-next, .v51-rqual-submit{
  width:100%; padding:14px;
  background:#EA0649; color:#fff; border:none;
  border-radius:12px;
  font-size:15px; font-weight:700;
  cursor:pointer; font-family:inherit;
  letter-spacing:.2px;
  box-shadow:0 4px 14px rgba(158,13,54,.30);
  transition:background .15s, transform .12s;
  margin-top:12px;
}
.v51-rqual-next:hover, .v51-rqual-submit:hover{ background:#CE2C44 }
.v51-rqual-next:active, .v51-rqual-submit:active{ transform:translateY(1px) }
.v51-rqual-trust{
  font-size:12px; color:#94a3b8; margin:12px 0 0;
  text-align:center;
}
.v51-rqual-done-icon{
  width:64px; height:64px;
  background:#EA0649; color:#fff; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:700;
  margin:0 auto 20px;
}
@media (max-width:520px){
  .v51-rqual-body{ padding:28px 22px 24px }
  .v51-rqual-title{ font-size:20px }
}

/* ═══════════════════════════════════════════════════════════════════════
   v53 — Hide .mob-only elements on desktop (was missing this rule)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  .mob-only{ display:none !important }
}
/* ═══════════════════════════════════════════════════════════════════════
   v56 — Filter bar simplification (per Scott).
   - Top filter bar: search only. No For Sale, no Price, no More Filters,
     no Filter icon next to search.
   - Listings header row (.lb-row): Listings/Buildings tabs + Filter (left of Sort)
   - All listing-status changes happen inside the Filter drawer.
   ═══════════════════════════════════════════════════════════════════════ */
/* Hide For Sale dropdown in main filter bar (both desktop AND mobile) */
.fbar .type-wrap{ display:none !important }
/* Hide mobile filter icon next to search input */
.mob-filter-icon{ display:none !important }
/* Hide mobile inline pills row (For Sale / Price pills) */
.mob-inline-pills{ display:none !important }
/* Hide desktop More Filters button (replaced by lb-row Filter) */
.fbar .more-btn{ display:none !important }
/* v57: Get Alerts + Map buttons in lb-row, matching filter-link styling */
.lb-action-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 12px;
  background:transparent; border:1.5px solid transparent;
  font-size:14px; font-weight:600;
  color:var(--teal,#EA0649);
  cursor:pointer; font-family:var(--sans);
  white-space:nowrap;
  border-radius:99px;
  transition:background .12s, border-color .12s, color .12s, opacity .15s;
}
.lb-action-btn:hover{ background:rgba(184,20,66,.08); border-color:rgba(184,20,66,.25) }
.lb-action-btn svg{ flex-shrink:0; stroke:currentColor; fill:none }
/* Get Alerts — emphasized as primary CTA */
.lb-alerts-btn{
  background:#0c1f38; border-color:#0c1f38; color:#fff !important;
  padding:8px 14px;
}
.lb-alerts-btn:hover{ background:#13315c; border-color:#13315c }
.lb-alerts-btn svg{ stroke:#fff !important }
/* Map — green primary like before */
.lb-map-btn{
  background:#EA0649; border-color:#EA0649; color:#fff !important;
  padding:8px 14px;
}
.lb-map-btn:hover{ background:#CE2C44; border-color:#CE2C44 }
.lb-map-btn svg{ stroke:#fff !important }
/* On mobile, shrink the labels to icons-only when space tight */
@media (max-width:480px){
  .lb-action-btn .lb-action-lbl{ display:none }
  .lb-action-btn{ padding:8px; width:36px; height:36px; justify-content:center }
}

/* Hide originals (alert-btn, talk-btn) in the fbar — now in lb-row */
.fbar .alert-btn, .fbar .talk-btn{ display:none !important }
/* fbar is now mostly empty — collapse it on desktop */
@media (min-width:769px){
  .fbar{ height:auto !important; min-height:auto !important; padding:0 !important; border:none !important; box-shadow:none !important; }
  .fbar:empty, .fbar > *:not(:where(.mob-search-row, [style*="display:flex"])){ }
}

/* v59: Search bar in the middle of lb-row (desktop only) */
/* v321: position:relative so the dropdown anchors to the wrapper. */
.lb-search-wrap{
  /* v=416e — Scott's toolbar left-align spec: hide the in-pane search bar
     entirely. The top-nav already has a primary search, so this in-row
     search was redundant — and it was eating the row space that pushed
     the Sort / Filter / view-toggle group to the right. Hiding it lets
     [Listings|Buildings] [Sort] [Filter] [Toggle] pack to the left of
     the row with the empty space landing on the right edge of the pane. */
  display:none !important;
  position:relative;
  align-items:center; gap:8px;
  flex:0 0 auto;
  margin:0;
  padding:0 14px;
  background:#f4f6f8;
  border:1.5px solid transparent;
  border-radius:99px;
  height:38px;
  transition:border-color .15s, background .15s;
}
.lb-search-wrap:focus-within{
  background:#fff;
  border-color:#EA0649;
  box-shadow:0 0 0 3px rgba(158,13,54,.12);
}
.lb-search-ico{ flex-shrink:0; color:#64748b }
.lb-search-inp{
  flex:1 1 0;
  border:none; outline:none; background:transparent;
  font-size:13.5px; color:#0c1f38;
  font-family:inherit;
  min-width:0;
}
.lb-search-inp::placeholder{ color:#94a3b8 }
@media (min-width:769px){
  /* v=416e — kept the desktop-show rule disarmed; .lb-search-wrap is now
     hidden in all viewports (see base rule above). Top-nav search covers it. */
  .lb-search-wrap{ display:none !important }
}
@media (min-width:769px){
  /* Make lb-row a 3-section flex layout: toggle | search | actions */
  .lb-row{
    gap:12px !important;
    align-items:center !important;
  }
}

/* v62: Move Mapbox zoom controls UP on mobile so they don't sit behind the
   View Listings + Create Alert pills. The pills are at bottom ~75px, zoom was
   at bottom 36 — this gets the + button from peeking out behind Create Alert. */
@media (max-width:768px){
  body.map-fs .map-controls-zoom,
  body.in-search .map-controls-zoom{ bottom:160px !important }
  /* Also push the mapboxgl-ctrl-bottom-right (native +/- if used) up */
  body.map-fs .mapboxgl-ctrl-bottom-right,
  body.in-search .mapboxgl-ctrl-bottom-right{ bottom:160px !important }
  /* Hide the zoom buttons entirely if both fab pills are open AND the alert CTA shows */
  body.in-fullmap .map-controls-zoom{ bottom:160px !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   v65 — Listing detail enhancements: Lifestyle Scores, What's Nearby,
   Property Tax estimator, Share buttons. (Zoocasa / Zolo / HouseSigma)
   ═══════════════════════════════════════════════════════════════════════ */
/* Lifestyle Scores row */
.v65-scores-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:14px;
}
.v65-score{
  display:flex; flex-direction:column;
  padding:14px; background:#f8fbfa; border:1px solid #eef2f5; border-radius:12px;
}
.v65-score-num{ font-size:32px; font-weight:800; color:#EA0649; line-height:1; letter-spacing:-1px }
.v65-score-bar{
  height:6px; margin:8px 0 10px;
  background:#e5e9ed; border-radius:99px; overflow:hidden;
}
.v65-score-bar-fill{
  height:100%; background:#EA0649; border-radius:99px;
  transition:width .4s cubic-bezier(.2,.8,.2,1);
}
.v65-score-lbl{ font-size:13px; font-weight:700; color:#0c1f38; margin-bottom:2px }
.v65-score-sub{ font-size:11.5px; color:#64748b }
@media (max-width:520px){
  .v65-scores-row{ grid-template-columns:repeat(3, 1fr); gap:8px }
  .v65-score{ padding:10px 8px }
  .v65-score-num{ font-size:24px }
  .v65-score-lbl{ font-size:12px }
  .v65-score-sub{ font-size:10.5px }
}
/* What's Nearby grid */
.v65-nearby-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
}
.v65-nearby-item{
  display:flex; align-items:center; gap:10px;
  padding:11px 12px; background:#fff; border:1px solid #eef2f5; border-radius:10px;
}
.v65-nearby-item-ico{
  width:32px; height:32px; border-radius:8px;
  background:rgba(158,13,54,.10); color:#EA0649;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.v65-nearby-item-ico svg{ stroke:currentColor; fill:none }
.v65-nearby-item-info{ flex:1; min-width:0 }
.v65-nearby-item-name{ font-size:13px; font-weight:600; color:#0c1f38; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.v65-nearby-item-meta{ font-size:11.5px; color:#64748b }
@media (max-width:520px){
  .v65-nearby-grid{ grid-template-columns:1fr }
}
/* Property Tax */
.v65-proptax-row{
  display:flex; align-items:baseline; gap:10px;
  padding:14px 16px; background:#f8fbfa; border-radius:12px; border:1px solid #eef2f5;
}
.v65-proptax-amount{
  font-family:var(--serif, Georgia, serif);
  font-size:28px; font-weight:700; color:#0c1f38; letter-spacing:-.5px;
}
.v65-proptax-meta{ display:flex; flex-direction:column; gap:2px }
.v65-proptax-period{ font-size:13px; color:#64748b; font-weight:500 }
.v65-proptax-rate{ font-size:11.5px; color:#94a3b8; font-weight:500 }
.v65-proptax-note{
  font-size:11.5px; color:#94a3b8; line-height:1.5;
  margin-top:8px; padding:0 4px;
}
/* Share buttons */
.v65-share-row{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:10px;
}
.v65-share-btn{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:12px 8px;
  background:#fff; border:1.5px solid #e5e9ed;
  border-radius:10px; color:#0c1f38;
  font-size:12px; font-weight:600;
  cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.v65-share-btn svg{ stroke:currentColor; fill:none; flex-shrink:0 }
.v65-share-btn:hover{ border-color:#0c1f38; background:#f4f6f8 }

/* ═══════════════════════════════════════════════════════════════════════
   v64 — Sticky "View Map" pill on mobile listings (condos.ca pattern)
   ═══════════════════════════════════════════════════════════════════════ */
.v64-view-map-pill{
  display:none;
  position:fixed;
  bottom:calc(78px + env(safe-area-inset-bottom, 0px));
  left:50%; transform:translateX(-50%) translateY(100px);
  z-index:540;
  padding:11px 22px;
  background:#0c1f38; color:#fff;
  border:none; border-radius:99px;
  font-size:14px; font-weight:700;
  cursor:pointer; font-family:inherit;
  box-shadow:0 8px 24px rgba(11,37,69,.32), 0 2px 8px rgba(11,37,69,.18);
  align-items:center; gap:8px;
  letter-spacing:-.1px;
  transition:transform .22s cubic-bezier(.2,.8,.2,1), opacity .2s;
  opacity:0;
}
.v64-view-map-pill svg{ stroke:currentColor; flex-shrink:0 }
.v64-view-map-pill.show{ transform:translateX(-50%) translateY(0); opacity:1 }
@media (max-width:880px){
  body.in-search:not(.map-fs) .v64-view-map-pill{ display:flex }
}

/* ═══════════════════════════════════════════════════════════════════════
   v61 — Areas chips for quick neighborhood filtering (condos.ca pattern)
   ═══════════════════════════════════════════════════════════════════════ */
.v61-areas-row{
  padding:12px 16px;
  background:#f8fbfa;
  border-bottom:1px solid #eef2f5;
}
.v61-areas-label{
  font-size:11px; font-weight:700; color:#64748b;
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:8px;
}
.v61-areas-chips{
  display:flex; gap:8px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding-bottom:4px; scrollbar-width:thin;
}
.v61-areas-chips::-webkit-scrollbar{ height:4px }
.v61-areas-chips::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:99px }
.v61-area-chip{
  flex-shrink:0;
  padding:7px 14px;
  background:#fff;
  border:1.5px solid #e5e9ed;
  border-radius:99px;
  font-size:13px; font-weight:600;
  color:#0c1f38;
  cursor:pointer;
  font-family:inherit;
  transition:background .15s, border-color .15s, color .15s;
  white-space:nowrap;
}
.v61-area-chip:hover{ border-color:#0c1f38 }
/* v146: Selected area chip is now a soft teal-tint outline — visible enough to
   show what's active, but won't out-shout Map and Filter pills nearby. */
.v61-area-chip.on{
  background:rgba(158,13,54,.10);
  color:#EA0649;
  border-color:#EA0649;
  font-weight:700;
}
@media (max-width:768px){
  .v61-areas-row{ padding:10px 12px }
  .v61-area-chip{ padding:6px 12px; font-size:12.5px }
}

/* v60: Hide the List/Map toggle on mobile (bottom nav has Listings/Map already). */
@media (max-width:768px){
  .map-controls-top{ display:none !important }
}
/* v60: Style the top map-controls-top toggle (List | Map only now) for elite feel */
@media (min-width:769px){
  .view-ctrl-group{
    background:#fff;
    border:1px solid #e5e9ed;
    border-radius:99px;
    padding:3px;
    display:inline-flex;
    box-shadow:0 2px 8px rgba(11,37,69,.08);
  }
  .vcb{
    padding:7px 14px;
    font-size:13px; font-weight:600;
    color:#64748b;
    background:transparent; border:none;
    border-radius:99px;
    cursor:pointer; font-family:inherit;
    display:inline-flex; align-items:center; gap:6px;
    transition:all .15s;
  }
  .vcb svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2 }
  .vcb:hover{ color:#0c1f38 }
  .vcb.on{ background:#0c1f38; color:#fff }
}

/* v59: Make Listings/Buildings tabs subtler — smaller, less weight, like an elite site */
.lb-toggle{
  background:transparent !important;
  border:1px solid #e5e9ed !important;
  border-radius:8px !important;
  padding:2px !important;
  gap:0 !important;
}
.lb-btn{
  padding:5px 12px !important;
  font-size:13px !important;
  font-weight:500 !important;
  border-radius:6px !important;
  color:#64748b !important;
}
.lb-btn.on{
  background:#0c1f38 !important;
  color:#fff !important;
  font-weight:600 !important;
  box-shadow:none !important;
}
.lb-btn.on .lb-count{ color:rgba(255,255,255,.85) !important }
.lb-count{ font-size:12px !important; font-weight:500 !important; margin-left:4px !important }
/* v59: Hide Map button in lb-row on mobile (bottom nav has Map already) */
@media (max-width:768px){
  .lb-row .lb-map-btn{ display:none !important }
}

/* Hide top-bar Sort (it's now in lb-row) */
.fbar .sort-wrap, .fbar .sort-btn{ display:none !important }

/* v58: Collapse the empty .fbar gap.
   Desktop: fbar is now empty (search is in nav), hide it entirely.
   Mobile: fbar still has the .mob-search-row, so keep it but trim padding/height. */
@media (min-width:769px){
  .fbar{ display:none !important }
  /* Compensate for fbar removal: .main was using top:calc(navh + fh), reset */
  .main{ top: var(--navh) !important }
}
@media (max-width:768px){
  /* v59: aggressively collapse the fbar to JUST the height of the search-row */
  .fbar{
    padding:8px 12px !important;
    min-height:auto !important;
    height:auto !important;
    gap:0 !important;
    border-bottom:1px solid #eef2f5 !important;
    /* Hide everything inside fbar except .mob-search-row on mobile */
  }
  .fbar > *:not(.mob-search-row){ display:none !important }
  .fbar .fb-sep{ display:none !important }
  /* v59: reduce the --fh CSS variable on mobile so .main margin-top matches actual fbar height (~54px not 50px+gap) */
  body{ --fh:54px }
  /* Tighten lb-row top padding */
  .lb-row{ padding:8px 16px 8px !important }
  /* Tighten the Browse heading too */
  .list-pane .list-hdr{ padding:6px 16px !important }
}
@media (min-width:769px){
  /* Desktop has fbar:none from earlier rule, so .main starts at navh */
  body{ --fh:0px }
}

/* Show Filter link in listings header row (was hidden) */
/* v260: teal pill (was transparent text). Beats the .filter-link base
   color since .lb-row prefix gives higher specificity. */
/* v=430j — Item 151: 14px font, 8/16 padding, 36px min-height for
   button uniformity across the toolbar. */
.lb-row .filter-link{ display:inline-flex !important; align-items:center; gap:6px; padding:8px 16px !important; min-height:36px; background:#ffffff !important; border:1.5px solid #EA0649 !important; font-size:14px !important; font-weight:600 !important; color:#EA0649 !important; cursor:pointer; font-family:var(--sans); transition:transform .12s, background .15s, box-shadow .15s, border-color .15s; white-space:nowrap; border-radius:999px !important; box-shadow:none; letter-spacing:.1px; line-height:1 }
.lb-row .filter-link svg{ width:14px !important; height:14px !important; flex-shrink:0; stroke:#EA0649 !important; fill:none; stroke-width:2 }
.lb-row .filter-link:hover{ background:#f9e7ec !important; border-color:#8a0b2f !important; color:#8a0b2f !important; box-shadow:none; opacity:1 !important }
.lb-row .filter-link:hover svg{ stroke:#8a0b2f !important }
.lb-row .filter-link:active{ transform:scale(.97) }
/* v=430j — Item 151: gap 10 → 8px so siblings sit tighter. */
.lb-row .lb-row-right{ gap:8px }

/* v58: Make top-nav Get Alerts more prominent (filled CTA like Join Free) */
.nav-get-alerts{
  background:#EA0649 !important; color:#fff !important;
  border-color:#EA0649 !important;
  padding:8px 14px !important;
  border-radius:99px !important;
  font-weight:700 !important;
  box-shadow:0 2px 8px rgba(158,13,54,.25) !important;
}
.nav-get-alerts:hover{ background:#CE2C44 !important; border-color:#CE2C44 !important }
.nav-get-alerts svg{ stroke:#fff !important }
@media (max-width:768px){
  .nav-get-alerts span{ display:inline !important; font-size:12px }
  .nav-get-alerts{ padding:7px 10px !important }
}

/* v55: Listing Status button styled like a select but opens the bottom-sheet picker */
.fm-status-btn{
  display:flex; align-items:center; justify-content:space-between;
  width:100%; padding:14px 16px;
  background:#fff; border:1.5px solid #e5e9ed; border-radius:99px;
  font-size:15px; font-weight:600; color:#0c1f38;
  cursor:pointer; font-family:inherit;
  transition:border-color .15s, background .12s;
}
.fm-status-btn:hover{ border-color:#0c1f38 }
.fm-status-btn:focus-visible{ outline:none; border-color:#EA0649; box-shadow:0 0 0 3px rgba(158,13,54,.12) }
.fm-status-btn svg{ flex-shrink:0; color:#64748b; margin-left:8px }

/* v55: Remove standalone Price button from main filter bar. The price slider
   lives inside the More Filters drawer (already working). One source of price
   filtering instead of two competing surfaces. */
.fbar .price-wrap{ display:none !important }
/* Also remove the mob-only price pill on the mobile inline pills row, if any */
.mob-inline-pills .mob-inline-pill[onclick*="togglePriceDD"]{ display:none !important }

/* v54: was hiding lb-row Filter, but v56 reversed: filter is NOW the primary
   Filter affordance, lives in lb-row. (The hide rule was overridden above.) */
/* ═══════════════════════════════════════════════════════════════════════
   v52 — Force show simple slider+inputs price-dd (override v43-pd-simple, v32, etc.)
   ═══════════════════════════════════════════════════════════════════════ */
#price-dd .pd-current{ display:block !important; visibility:visible !important; height:auto !important; opacity:1 !important; pointer-events:auto !important; position:relative !important; padding:5px 10px !important; margin:0 0 18px !important; width:auto !important }
#price-dd .pd-slider-wrap{ display:flex !important; visibility:visible !important; height:28px !important; opacity:1 !important; pointer-events:auto !important; position:relative !important; margin:0 6px 22px !important; width:auto !important; padding:0 !important }
#price-dd .pd-slider-track,
#price-dd .pd-slider-fill{ display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:none !important }
#price-dd .pd-slider{ display:block !important; visibility:visible !important; opacity:1 !important; pointer-events:none !important }
#price-dd .pd-inputs{ display:flex !important; visibility:visible !important; gap:10px !important; align-items:center !important; margin-bottom:14px !important }
#price-dd .pd-inp-wrap{ flex:1 1 0 !important; min-width:0 !important }
#price-dd .pd-inp{ display:block !important; visibility:visible !important; width:100% !important; padding:11px 12px !important; font-size:14.5px !important; height:auto !important; opacity:1 !important; position:relative !important; pointer-events:auto !important; margin:0 !important; border:1.5px solid #e5e9ed !important; border-radius:10px !important; box-sizing:border-box !important }
#price-dd .pd-inp:focus{ border-color:#EA0649 !important; outline:none !important; box-shadow:0 0 0 3px rgba(158,13,54,.12) !important }
#price-dd .pd-dash{ color:#94a3b8 !important; font-size:18px !important; font-weight:300 !important; flex-shrink:0 !important }
#price-dd .pd-actions{ display:flex !important; gap:10px !important; margin-top:8px !important }
#price-dd .pd-cancel{ flex:0 0 auto !important; padding:11px 18px !important; font-size:14px !important; color:#64748b !important; background:transparent !important; border:1.5px solid #e5e9ed !important; border-radius:10px !important; cursor:pointer !important; font-family:inherit !important; font-weight:600 !important }
#price-dd .pd-cancel:hover{ border-color:#0c1f38 !important; color:#0c1f38 !important }
#price-dd .pd-apply-btn{ flex:1 1 auto !important; padding:11px 18px !important; font-size:14.5px !important; font-weight:700 !important; background:#EA0649 !important; color:#fff !important; border:none !important; border-radius:10px !important; cursor:pointer !important; font-family:inherit !important; box-shadow:0 4px 14px rgba(158,13,54,.30) !important }
#price-dd .pd-apply-btn:hover{ background:#CE2C44 !important }
/* Hide any vestigial UI from previous attempts */
#price-dd .pd-list, #price-dd .pd-presets,
#price-dd .pd-stepper-row, #price-dd .v33-modal-close,
#price-dd .pd-thumb-bubble{ display:none !important }
#price-dd .v50-pd-row, #price-dd .v50-pd-actions, #price-dd .v50-pd-clear, #price-dd .v50-pd-apply{ display:none !important }

/* ═══════════════════════════════════════════════════════════════════════
   v50 — Clean condos.ca-style price dropdown (replaces v43-pd-simple mess)
   Two native <select>s for Min and Max. Works on all devices and browsers.
   ═══════════════════════════════════════════════════════════════════════ */
#price-dd.v50-pd{
  padding:18px 20px 16px !important;
}
.v50-pd-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin:8px 0 16px;
}
.v50-pd-field{
  flex:1 1 0;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}
.v50-pd-lbl{
  font-size:11px;
  font-weight:700;
  color:#64748b;
  text-transform:uppercase;
  letter-spacing:.5px;
}
.v50-pd-sel{
  width:100%;
  padding:11px 12px;
  font-size:14.5px;
  font-weight:600;
  color:#0c1f38;
  background:#fff;
  border:1.5px solid #e5e9ed;
  border-radius:10px;
  font-family:inherit;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 10px center;
  padding-right:32px;
  transition:border-color .15s, box-shadow .15s;
}
.v50-pd-sel:hover{ border-color:#0c1f38 }
.v50-pd-sel:focus{
  outline:none;
  border-color:#EA0649;
  box-shadow:0 0 0 3px rgba(158,13,54,.12);
}
.v50-pd-dash{
  color:#94a3b8;
  font-size:18px;
  font-weight:300;
  align-self:center;
  padding:0 2px;
  flex-shrink:0;
  margin-bottom:9px;
}
.v50-pd-actions{
  display:flex;
  gap:10px;
  margin-top:4px;
}
.v50-pd-clear{
  flex:0 0 auto;
  padding:11px 18px;
  font-size:14px;
  color:#64748b;
  background:transparent;
  border:1.5px solid #e5e9ed;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  font-weight:600;
  transition:border-color .15s, color .15s;
}
.v50-pd-clear:hover{ border-color:#0c1f38; color:#0c1f38 }
.v50-pd-apply{
  flex:1 1 auto;
  padding:11px 18px;
  font-size:14.5px;
  font-weight:700;
  background:#EA0649;
  color:#fff;
  border:none;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  letter-spacing:.2px;
  transition:background .15s, box-shadow .15s;
  box-shadow:0 4px 14px rgba(158,13,54,.30);
}
.v50-pd-apply:hover{ background:#CE2C44 }

/* Mobile — bigger touch targets */
@media (max-width:768px){
  .v50-pd-sel{ padding:14px 36px 14px 14px; font-size:16px; min-height:50px }
  .v50-pd-clear, .v50-pd-apply{ padding:14px 18px; font-size:15px; min-height:50px }
}

/* Hide all legacy v43-pd-simple stuff inside the new v50-pd */
#price-dd.v50-pd .v43-hidden,
#price-dd.v50-pd .pd-list,
#price-dd.v50-pd .pd-presets,
#price-dd.v50-pd .pd-slider-wrap,
#price-dd.v50-pd .pd-thumb-bubble,
#price-dd.v50-pd .pd-stepper-row{
  display:none !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v49 — Price dropdown final fix
   The v32 + v34 rules force #price-dd.price-dd.open .pd-list to display:flex
   on desktop. We override with a higher-specificity id-on-id selector.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  /* ID-based override beats all the class-based rules */
  #price-dd #pd-list{ display:none !important }
  #price-dd #pd-presets{ display:none !important }
  /* Slider + steppers are ALWAYS visible on desktop */
  #price-dd #pd-slider-wrap, #price-dd .pd-slider-wrap{ display:flex !important }
  #price-dd .pd-stepper-row{ display:grid !important }
  /* The v43-pd-simple class also tries to hide slider — neutralize that on desktop */
  #price-dd.v43-pd-simple .pd-slider-wrap,
  #price-dd.v43-pd-simple .pd-slider-track,
  #price-dd.v43-pd-simple .pd-slider-fill,
  #price-dd.v43-pd-simple .pd-slider{
    display:flex !important;
    visibility:visible !important;
    height:auto !important;
    width:auto !important;
    margin:initial !important;
    padding:initial !important;
    position:relative !important;
    pointer-events:auto !important;
    opacity:1 !important;
  }
  #price-dd.v43-pd-simple .pd-slider-track{ height:6px !important }
  #price-dd.v43-pd-simple .pd-slider-fill{ height:6px !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   v44 — DROPDOWN ANCHOR FIX
   v33 made For Sale + Price into centered modals on desktop. We want them
   as TRUE anchored dropdowns under the click button. JS sets --dd-x/--dd-y
   CSS variables to the trigger button's bottom-left corner; CSS uses them
   to position the dropdown via fixed positioning. The X close button +
   backdrop are hidden on desktop (anchored dropdowns close on outside-click
   or option-pick instead).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  /* Anchored fixed positioning for both dropdowns (overrides v33 centering) */
  #type-dd.type-dd.open,
  #price-dd.price-dd.open{
    position:fixed !important;
    top:var(--dd-y, 130px) !important;
    left:var(--dd-x, 24px) !important;
    transform:none !important;
    width:auto !important;
    min-width:200px !important;
    max-width:360px !important;
    max-height:calc(100vh - var(--dd-y, 130px) - 24px) !important;
    padding:6px !important;
    border-radius:12px !important;
    z-index:711 !important;
  }
  #price-dd.price-dd.open{
    min-width:340px !important;
    width:340px !important;
    max-width:340px !important;
    padding:14px 16px !important;
  }
  /* Hide v33 X close button on desktop — anchored dropdowns close on outside-click */
  #type-dd .v33-modal-close,
  #price-dd .v33-modal-close{ display:none !important }
  /* Hide v33 dim backdrop on desktop — dropdown shouldn't dim the page */
  body.type-dd-open::before,
  body.price-dd-open::before{
    display:none !important; background:transparent !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
  }
  body.type-dd-open .v33-modal-backdrop,
  body.price-dd-open .v33-modal-backdrop{
    background:transparent !important;
  }
  /* Hide v33-style modal title (it's pseudo-injected; not needed on dropdown) */
  #type-dd.type-dd.open::before{ display:none !important }
  /* Don't hide the body when dropdown opens on desktop */
  body.type-dd-open,
  body.price-dd-open{
    overflow:auto !important;
    position:static !important;
    width:auto !important;
    height:auto !important;
    touch-action:auto !important;
  }
  html.type-dd-open-html,
  html.price-dd-open-html{
    overflow:auto !important; height:auto !important;
  }
  /* v45: hide preset list on desktop — slider is now primary */
  #price-dd .pd-list{ display:none !important; }
  /* Tighten internal spacing for anchored dropdown look */
  #type-dd .type-dd-item{
    padding:9px 12px !important; font-size:14px !important;
    border-radius:8px !important;
  }
}


/* ════════════════════════════════════════════════════════════════════════
   v310 — sticky listing tabs, unified .v310-iconbtn, mobile scroll fixes,
   homepage rebuild styles. Appended to the main stylesheet block.
   ═══════════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════════════════
   v310 LISTING DETAIL HEADER POLISH (re-applied from v309 + audit fixes).
   - Sticky tab strip at the very top of the modal scroll container.
   - Unified .v310-iconbtn class for heart / share / kebab — same size,
     padding, border-radius, hover.
   - "Open Full Page" gets a distinct pill (border + light bg).
   - X close is recessed.
   - Mobile (≤640px): tab strip horizontally scrolls with momentum.
   - scroll-padding-top on modal scroller fixes the v309 broken scroll-margin
     trick (which failed because the modal itself is the scroll container,
     not the document — sticky/transformed parent breaks scroll-margin-top).
   ═════════════════════════════════════════════════════════════════════════ */

/* Modal scroller scroll-padding so anchor scrolls land below the sticky bar */
.modal{
  scroll-padding-top: 64px;          /* leave room for sticky header on jump */
  -webkit-overflow-scrolling: touch;  /* momentum scroll on iOS */
}

/* Sticky tab strip — pin to top of modal scroller on every viewport */
.modal .v68-listing-hdr{
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
}

/* Make sure the tab strip itself NEVER vanishes (Bug 7).
   The v308 desktop-only block in @media (min-width:769px) was hiding the bar
   below 769px on certain layouts; we override that. */
.v68-listing-hdr,
.modal .v68-listing-hdr{ display: flex !important; }

/* Mobile: horizontal-scroll the tabs with momentum, NEVER hide. */
@media (max-width:640px){
  .modal .v68-listing-hdr{
    height: 48px;
    min-height: 48px;
    padding: 0 4px;
  }
  .v68-listing-tabs{
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex: 1;
    min-width: 0;
  }
  .v68-listing-tabs::-webkit-scrollbar{ display:none }
  .modal .v68-tab{
    flex: 0 0 auto;
    padding: 0 14px;
    font-size: 13px;
    height: 48px;
  }
}

/* Ultra-narrow (≤380px) — Bug 7 was the strip disappearing here. Lock width. */
@media (max-width:380px){
  .modal .v68-listing-hdr{
    padding: 0;
  }
  .modal .v68-tab{
    padding: 0 11px;
    font-size: 12.5px;
  }
}

/* Unified icon-button class for heart / share / kebab in the listing header.
   All three should have the SAME padding, size, border-radius, hover state. */
.v310-iconbtn{
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: transparent;
  color: #5a6e84;
  border: none;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
  flex-shrink: 0;
  padding: 0;
}
.v310-iconbtn svg{
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.v310-iconbtn:hover{
  background: #f1f5f9;
  color: #0c1f38;
}
.v310-iconbtn:active{
  background: #e6ecf3;
}
.v310-iconbtn.on{
  color: #EA0649;
}
.v310-iconbtn[data-pressed="true"] svg,
.v310-iconbtn.on svg{
  fill: currentColor;
}

/* Distinct "Open Full Page" pill — border + light bg, NOT another bare icon. */
.v310-fullpage-pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: #f8fafc;
  color: #0c1f38;
  border: 1px solid #cbd5e1;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, border-color .12s;
  flex-shrink: 0;
}
.v310-fullpage-pill:hover{
  background: #fff;
  border-color: #94a3b8;
}
.v310-fullpage-pill svg{
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* v311b: prominent X close on listing detail (housesigma pattern).
   Bumped from the previously recessed 32px/14px gray version: now a
   36px navy circle with a thicker, more readable chevron stroke, and
   inset ~16px from the right edge of the modal so it isn't glued to
   the corner. Applies to listing-detail modal + photo viewer chrome. */
/* v323: charcoal X (#1F1F23) per condos.ca-matched palette. */
.modal .v68-act-close,
.modal .v310-iconbtn.v310-iconbtn-close,
.modal .modal-close,
.modal .v33-modal-close{
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  color: #1f1f23 !important;
  background: #f4f6f8 !important;
  margin-left: 0 !important;
  margin-right: 16px !important;
}
.modal .v68-act-close:hover,
.modal .v310-iconbtn.v310-iconbtn-close:hover,
.modal .modal-close:hover,
.modal .v33-modal-close:hover{
  color: #fff !important;
  background: #1f1f23 !important;
}
.modal .v68-act-close svg,
.modal .v310-iconbtn.v310-iconbtn-close svg{
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
  stroke: currentColor !important;
}
/* v311c: explicit per-element spacing in the listing-detail icon group.
   Parent .v68-listing-actions uses gap:12px (uniform). Zero out the
   legacy per-element margin-rights so every adjacent control sits at a
   consistent 12px gap:
     ❤   ⬆   [Open Full Page]   ⋮   ✕
   X close keeps its 16px right inset (rule above).  */
.modal .v68-listing-actions .v307-open-full{
  margin-right: 0 !important;
}
.modal .v68-listing-actions .v68-more-wrap{
  margin-right: 0 !important;
}
/* Position-anchored close buttons (absolute/fixed) get pulled inward
   from the right edge so the X has breathing room from the corner. */
.v33-modal-close,
.modal-close,
.lb-close{
  right: 18px !important;
}
.lb-close{
  width: 44px !important; height: 44px !important;
}
.lb-close svg, .lb-close{ stroke-width: 2.6 }
/* v=503AB — REAL fix for lightbox icon size.
   v=503y/z targeted .lb-close SVG, but the actual markup is
   <button class="lb-close">×</button> — Unicode character, not
   SVG. Same for .lb-prev (‹) and .lb-next (›). Size lever is
   font-size on the button itself. Bump for clear visibility.
   .lb-header does NOT render in the current lightbox flow, so
   its v99-qbtn rules are inert (kept for safety if header
   surfaces later). */
.lb-close{ font-size:34px !important; line-height:1 !important }
.lb-prev, .lb-next{ font-size:34px !important; line-height:1 !important }
.lb-header.v99-qstrip-lb .v99-qbtn{ padding:12px 18px !important }
.lb-header.v99-qstrip-lb .v99-qbtn svg{ width:24px !important; height:24px !important }
.lb-header.v99-qstrip-lb .v99-qbtn-cta svg{ width:22px !important; height:22px !important }

/* v=503z — right-rail sidebar price matches DM Serif Display
   typography of the modal hero price (v=503n). */
html body.in-listing-detail .modal .v303-sidebar-price,
html body .modal .v303-sidebar-price{
  font-family:"DM Serif Display", Georgia, serif !important;
  font-size:38px !important;
  font-weight:800 !important;
  letter-spacing:-.6px !important;
  line-height:1.05 !important;
  color:#0c1f38 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   v311 MOBILE LISTING-DETAIL CHROME HIDE.
   On mobile we render a dedicated full-page layout (m-topbar navy search bar
   + back arrow + hamburger + photo gallery + Listing Details + sticky
   Request a Viewing CTA). The desktop modal chrome (sticky tab strip,
   Save/Share/Open Full Page/kebab/X close) was rendering on top of the
   mobile layout because earlier rules forced .v68-listing-hdr to
   display:flex !important on every viewport. Hide all of it on mobile when
   body.in-listing-detail is set. Override has higher specificity AND
   !important to beat the unconditional rule above.
   ═════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px){
  body.in-listing-detail .v68-listing-hdr,
  body.in-listing-detail .modal .v68-listing-hdr,
  body.in-listing-detail .v68-listing-tabs,
  body.in-listing-detail .v68-tab,
  body.in-listing-detail .v68-listing-actions,
  body.in-listing-detail .v68-act,
  body.in-listing-detail .v68-act-close,
  body.in-listing-detail .v68-act-lbl,
  body.in-listing-detail .v307-fullpage-back,
  body.in-listing-detail .v307-open-full,
  body.in-listing-detail .v100-more-menu,
  body.in-listing-detail .v310-iconbtn,
  body.in-listing-detail .v310-fullpage-pill,
  body.in-listing-detail .v320-pill,
  body.in-listing-detail .v320-actions-spacer{
    display: none !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════════
   v320 LISTING-DETAIL TOP-ACTION PILLS — v321 refined palette.
   Three labeled pills (Compare / Favourite / Share) right-aligned on the
   listing-detail header action row. Each pill carries a refined color in
   the same hue family — violet-600, rose-600, teal-700 — so the cluster
   reads as elegant brand colour without feeling primary-loud.
     • Thinner 1px border in matching color (was 1.5px gray).
     • Smaller 32px height (was 38px).
     • White background; hover tints to a 5% bg of the pill's color
       (violet-50 / rose-50 / teal-50).
     • Icon 16px @ 1.5px stroke; label in matching color.
   Right-alignment is achieved by putting .v320-actions-spacer BEFORE the
   pills in the DOM so flex pushes pills + icon trio together to the right.
   ═════════════════════════════════════════════════════════════════════════ */
.v320-pill{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 14px;
  background:#fff;
  border:1px solid currentColor;
  border-radius:999px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:-.05px;
  cursor:pointer;
  transition:background .15s, box-shadow .15s, color .15s, border-color .15s;
  flex-shrink:0;
  white-space:nowrap;
  line-height:1;
}
/* v=429x — Item 93 (part 2): explicit outline:none for mouse-focus so
   the "double outline / glow" after a click goes away. Keyboard users
   still get the visible focus ring via :focus-visible (only fires for
   keyboard navigation in modern browsers). Applied to every action pill
   in the listing-detail row so Compare / Favourite / Share / Open Full
   Page all behave the same. */
.v320-pill,
.v307-open-full,
.v68-act{ outline:none }
.v320-pill:focus,
.v307-open-full:focus,
.v68-act:focus{ outline:none }
.v320-pill:focus-visible{
  outline:2px solid currentColor;
  outline-offset:2px;
}
.v307-open-full:focus-visible,
.v68-act:focus-visible{
  outline:2px solid #0c1f38;
  outline-offset:2px;
}
.v320-pill .v320-pill-ic{
  width:16px;
  height:16px;
  flex-shrink:0;
  stroke:currentColor;
  stroke-width:1.5;
}
.v320-pill .v320-pill-lbl{
  display:inline-block;
}
/* v=449d-theme-polish: icon-only variant for the listing-modal action row.
   Was 6 controls (Compare/Favourite/Share/Open Full Page/⋮/X) which read
   cluttered against the modal's tight top bar. Now the three pills shrink
   to circular icon buttons; Open Full Page moved into the ⋮ menu. */
.v320-pill.v449d-icon-only{
  width:32px; padding:0; justify-content:center; gap:0;
}
.v320-pill.v449d-icon-only .v320-pill-lbl{ display:none }
.v320-pill.v449d-icon-only .v320-pill-ic{ width:15px; height:15px }
/* v=429ae — Item 88 RESTORED (Scott's locked-final purple/red-coral/teal
   from his reference screenshot). White pill, 1.5px colored outline,
   matching colored icon + label. Compare fills purple-white on add;
   Favourite heart fills red on save. Locked — no more iteration. */
.v320-pill{ border-width:1.5px }
.v320-pill.v320-pill-compare{ background:#ffffff; color:#7c4cbc; border-color:#7c4cbc }
.v320-pill.v320-pill-compare .v320-pill-ic{ stroke:#7c4cbc }
.v320-pill.v320-pill-compare:hover{ background:#f6f0fb }
.v320-pill.v320-pill-compare.on,
.v320-pill.v320-pill-compare[aria-pressed="true"]{
  background:#7c4cbc; border-color:#7c4cbc; color:#fff;
}
.v320-pill.v320-pill-compare.on .v320-pill-ic,
.v320-pill.v320-pill-compare[aria-pressed="true"] .v320-pill-ic{ stroke:#fff }
.v320-pill.v320-pill-compare.on:hover,
.v320-pill.v320-pill-compare[aria-pressed="true"]:hover{
  background:#6a3fa3; border-color:#6a3fa3;
}
.v320-pill.v320-pill-fav{ background:#ffffff; color:#e74c3c; border-color:#e74c3c }
.v320-pill.v320-pill-fav .v320-pill-ic{ stroke:#e74c3c }
.v320-pill.v320-pill-fav:hover{ background:#fef2f2 }
.v320-pill.v320-pill-fav.on,
.v320-pill.v320-pill-fav[aria-pressed="true"]{
  color:#e74c3c; border-color:#e74c3c;
}
.v320-pill.v320-pill-fav.on .v320-pill-ic,
.v320-pill.v320-pill-fav[aria-pressed="true"] .v320-pill-ic{
  fill:#e74c3c; stroke:#e74c3c;
}
.v320-pill.v320-pill-share{ background:#ffffff; color:#0d8a99; border-color:#0d8a99 }
.v320-pill.v320-pill-share .v320-pill-ic{ stroke:#0d8a99 }
.v320-pill.v320-pill-share:hover{ background:#e6f4f6 }
/* Spacer (now placed BEFORE the pills) pushes the whole right cluster
   — pills + Open Full Page + kebab + X — to the right edge of the row. */
.v320-actions-spacer{
  flex:1 1 auto;
  min-width:12px;
}
/* Override parent .v68-listing-actions gap (3px) for the new pills so they
   sit at a comfortable 8px gap from each other and the icon group. */
.v68-listing-actions{
  gap:8px;
  justify-content:flex-end;
}
/* Mobile / narrow modal: allow pills to wrap so they never overflow. */
@media (max-width:900px){
  .v68-listing-actions{
    flex-wrap:wrap;
    row-gap:8px;
  }
  .v320-pill{
    height:30px;
    padding:0 12px;
    font-size:12px;
  }
  .v320-actions-spacer{ display:none; }
}

/* v320 COMPARE TRAY — sticky bottom bar shown when ≥1 listing is in the
   compare set. White surface, soft shadow, ~64px tall. Chips are MLS labels
   with an X to remove; CTA on the right navigates to /compare?mls=A,B,C. */
.v320-cmp-tray{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:9500;
  background:#fff;
  border-top:1px solid #e5e7eb;
  box-shadow:0 -8px 24px rgba(11,37,69,.12);
  padding:12px 20px;
  display:none;
  align-items:center;
  gap:12px;
  min-height:64px;
}
.v320-cmp-tray.open{
  display:flex;
}
.v320-cmp-tray-label{
  font-size:13px;
  font-weight:600;
  color:#0c1f38;
  letter-spacing:-.05px;
  flex-shrink:0;
}
.v320-cmp-tray-chips{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1 1 auto;
  flex-wrap:wrap;
  min-width:0;
}
.v320-cmp-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:32px;
  padding:0 6px 0 12px;
  background:#f1f5f9;
  border:1px solid #e2e8f0;
  border-radius:999px;
  font-size:12.5px;
  font-weight:600;
  color:#0c1f38;
  letter-spacing:-.05px;
}
.v320-cmp-chip-x{
  appearance:none;
  background:transparent;
  border:none;
  cursor:pointer;
  width:22px;
  height:22px;
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#475569;
  transition:background .12s, color .12s;
}
.v320-cmp-chip-x:hover{
  background:#e2e8f0;
  color:#0c1f38;
}
.v320-cmp-chip-x svg{ width:12px; height:12px; stroke-width:2.4; }
.v320-cmp-cta{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:40px;
  padding:0 20px;
  background:#EA0649;
  color:#fff;
  border:none;
  border-radius:999px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  letter-spacing:-.05px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .15s;
}
.v320-cmp-cta:hover{ background:#8a0b2f; }
.v320-cmp-cta:disabled{ opacity:.55; cursor:not-allowed; }
@media (max-width:768px){
  .v320-cmp-tray{
    padding:10px 12px;
    gap:8px;
    flex-wrap:wrap;
  }
  .v320-cmp-tray-label{ display:none; }
  .v320-cmp-cta{ height:36px; padding:0 14px; font-size:13px; }
}

/* v320 COMPARE PLACEHOLDER VIEW — minimal centered card shown when the
   /compare route is hit. Replaced by the real side-by-side compare view
   in a future pass. */
.v320-cmp-placeholder{
  position:fixed;
  inset:0;
  z-index:9400;
  background:#f8fafc;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.v320-cmp-placeholder.open{ display:flex; }
.v320-cmp-placeholder-card{
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:16px;
  box-shadow:0 12px 32px rgba(11,37,69,.10);
  padding:40px 32px;
  max-width:520px;
  text-align:center;
}
.v320-cmp-placeholder-card h2{
  margin:0 0 8px;
  font-size:22px;
  color:#0c1f38;
  letter-spacing:-.3px;
}
.v320-cmp-placeholder-card p{
  margin:0 0 20px;
  color:#475569;
  font-size:14px;
  line-height:1.55;
}
.v320-cmp-placeholder-back{
  appearance:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:38px;
  padding:0 18px;
  background:#0c1f38;
  color:#fff;
  border:none;
  border-radius:999px;
  font-family:inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
}
.v320-cmp-placeholder-back:hover{ background:#0a1828; }

/* v310: scroll-margin-top + scroll-padding-top backup for modal targets so
   click-to-scroll lands BELOW the sticky bar instead of behind it. The audit
   noted that v309's scroll-margin-top alone was insufficient because the
   modal IS the scroll container — `scroll-padding-top` on the container is
   what makes scrollIntoView land correctly. */
.modal .v68-history-sec,
.modal .m-history-sec,
.modal #v42-listing-history,
.modal #v68-estimates-sec,
.modal #v303-estimates-sec,
.modal #v65-proptax-sec,
.modal #v42-valuation-sec,
.modal #m-similar-sec,
.modal #similar-sec,
.modal #v68-comparables-sec,
.modal #v68-schools-sec,
.modal #v65-nearby-sec,
.modal #v65-scores-sec,
.modal #v68-community-sec,
.modal #m-status-row,
.modal #m-price-block,
.modal #m-body{
  scroll-margin-top: 64px;
}

/* Bug 4: nearby empty state */
.v310-nb-empty{
  padding: 36px 16px;
  text-align: center;
  color: #94a3b8;
  font-size: 14px;
  background: #f8fafc;
  border-radius: 12px;
  margin: 8px 0;
}

/* Bug 3: photo coming-soon treatment for listings without real photos */
.v310-photo-coming{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #94a3b8;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.v310-photo-coming svg{
  width: 28px;
  height: 28px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  opacity: .7;
}


/* ════════════════════════════════════════════════════════════════════════════
   v310 HOMEPAGE STYLES — modern-luxury editorial rebuild.
   Layered ABOVE the v308 hero/listings stack — only renders on the home route
   (router toggles #v310-home display:'' / 'none').
   Existing v308 tokens reused: --brand-navy, --brand-teal, --serif, --sans.
   New premium accents in :root above (--gold, --hp-*).
   ═════════════════════════════════════════════════════════════════════════ */
.v310-home{
  display: block;
  background: #fff;
  color: var(--brand-navy);
  font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
/* When the v310 home is showing, hide the legacy hero and search-view
   wrappers so we don't double-render.
   v325 — Mobile-audit Bug #1: the inline-style attribute selector
   `[style*="display: none"]` only matches the WITH-space form. CSSOM
   serialisation of `el.style.display='none'` is browser-dependent —
   Chrome/Safari emit `"display: none;"` (with space), but if a prior
   `style=""` attribute was already on the element with `"display:none"`
   (no space) the no-space form can survive. We OR both forms so the
   rule fires correctly regardless of how the inline style ended up
   serialised. */
body:has(#v310-home:not([style*="display: none"]):not([style*="display:none"])) #hero,
body:has(#v310-home:not([style*="display: none"]):not([style*="display:none"])) #search-view{
  display: none !important;
}

/* ─── Section frame ─────────────────────────────────────────────────────── */
.hp-section{
  padding: var(--hp-section-y) 24px;
  background: #fff;
}
.hp-section-alt{ background: var(--off, #f4f6f8) }
.hp-section-dark{
  background: var(--brand-navy);
  color: #fff;
}
.hp-section-inner{
  max-width: 1180px;
  margin: 0 auto;
}
.hp-eyebrow{
  font-family: var(--sans);
  font-size: var(--hp-eyebrow);
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 16px;
  display: block;
}
.hp-section-dark .hp-eyebrow{ color: var(--gold) }
.hp-h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--hp-display-2);
  line-height: 1.04;
  letter-spacing: -1.2px;
  color: var(--brand-navy);
  margin: 0;
}
.hp-section-dark .hp-h2{ color: #fff }
.hp-section-hdr{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.hp-section-hdr-text{ max-width: 640px }
.hp-section-link{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--brand-navy);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 4px;
  transition: color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.hp-section-link:hover{ color: var(--gold-deep); border-color: var(--gold-deep) }
.hp-section-dark .hp-section-link{ color: #fff }
.hp-section-dark .hp-section-link:hover{ color: var(--gold) }

/* ─── Module 1 · Hero (editorial full-bleed) ────────────────────────────── */
/* v=545 hero-toronto-night — swapped third-party CDN unsplash URL for a
   local Toronto CN Tower night-skyline asset under /assets/img/hero/.
   The prior 1517502884422 photo + the earlier 1517935706615 conference-
   room shot both read as anywhere-but-Toronto. */
.hp-hero{
  position: relative;
  min-height: 60vh;
  background:
    linear-gradient(180deg, rgba(12,31,56,.45) 0%, rgba(12,31,56,.78) 100%),
    #0c1f38 url('/cdn-cgi/image/width=1600,quality=68,format=auto,fit=cover/assets/img/hero/toronto-cn-tower-night.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 96px 24px;
}
.hp-hero-inner{
  width: 100%;
  max-width: 940px;
  text-align: center;
}
/* v=545 eyebrow-contrast — brighter gold + soft text-shadow so the eyebrow
   reads on the dark night-skyline hero. Brand --gold (#bd933a) was washing
   into the warm building lights on the new hero. */
.hp-hero-eyebrow{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4af37;
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  margin-bottom: 28px;
}
.hp-hero-h1{
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--hp-display-1);
  line-height: 1.02;
  letter-spacing: -2px;
  margin: 0 0 22px;
  color: #fff;
}
.hp-hero-tag{
  font-family: var(--sans);
  font-size: 16px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.78);
  margin: 0 0 44px;
}
.hp-hero-tag b{ color: #fff; font-weight: 600 }
.hp-hero-search{
  display: flex;
  align-items: center;
  background: rgba(255,255,255,.97);
  border-radius: 999px;
  padding: 6px 6px 6px 26px;
  max-width: 620px;
  margin: 0 auto 28px;
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  /* v313 Fix 4: position:relative anchors #hp-search-suggest below the input. */
  position: relative;
}
/* v313 Fix 1: live-count number rendered in champagne gold inside the white
   serif headline. Bold-ish weight + tight tracking so the number reads as the
   hero element of the line. */
.hp-hero-h1 .hp-hero-count{
  color: var(--gold);
  font-weight: 600;
  letter-spacing: -1px;
  font-variant-numeric: tabular-nums;
}
.hp-hero-search svg{
  width: 18px;
  height: 18px;
  fill: none;
  stroke: var(--brand-navy);
  stroke-width: 2;
  flex: 0 0 auto;
}
.hp-hero-search input{
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  height: 50px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 15px;
  color: var(--brand-navy);
}
.hp-hero-search input::placeholder{ color: #94a3b8 }
.hp-hero-search-btn{
  flex: 0 0 auto;
  height: 46px;
  width: 46px;
  border-radius: 999px;
  background: var(--brand-teal);
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .18s ease;
}
.hp-hero-search-btn:hover{ background: var(--brand-teal-deep) }
.hp-hero-search-btn svg{ stroke: #fff; width: 18px; height: 18px }

/* v320: HouseSigma-style "Map Search" pill button replaces the small circular
   submit icon. Wider rounded pill, teal accent, sits flush on the right of
   the hero search input. Stays type=button so Enter still flows through the
   form's onsubmit (preserving the existing search-on-Enter behaviour). */
.hp-hero-search .hp-hero-mapbtn{
  width: auto;
  padding: 0 18px 0 16px;
  gap: 8px;
  height: 46px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .35px;
  color: #fff;
  white-space: nowrap;
}
.hp-hero-search .hp-hero-mapbtn span{
  display: inline-block;
}
@media (max-width: 480px){
  .hp-hero-search .hp-hero-mapbtn{ padding: 0 12px; font-size: 12.5px; }
  .hp-hero-search .hp-hero-mapbtn span{ display: none; }
  .hp-hero-search .hp-hero-mapbtn{ width: 46px; padding: 0; }
}

/* v320: live-preview rich dropdown for the homepage hero. Mirrors the
   HouseSigma autocomplete pattern — grouped result lists (Listings cards,
   Neighbourhoods, Buildings, Addresses) with a "See all results" footer.
   Scoped to .hp-suggest-rich so the legacy .search-suggest dropdown styles
   used by the listings hero still render the small flat list there.        */
.hp-suggest-rich{
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #e0e6ec;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(11,37,69,.20), 0 4px 12px rgba(11,37,69,.10);
  max-height: 75vh;
  overflow-y: auto;
  z-index: 40;
  text-align: left;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.hp-suggest-rich.on{
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hp-suggest-group{ padding: 6px 0 8px; border-top: 1px solid #f1f5f9; }
.hp-suggest-group:first-child{ border-top: 0; }
.hp-suggest-ghdr{
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 10px 16px 6px;
  font-family: var(--sans);
}
.hp-suggest-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: #0c1f38;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
  min-height: 44px;
}
.hp-suggest-row:hover,
.hp-suggest-row.active{ background: #f7fafa; outline: none; }
.hp-suggest-row .hp-sg-ico{
  width: 28px; height: 28px;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #faf0f3;
  color: #EA0649;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hp-suggest-row .hp-sg-ico svg{ width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.2 }
.hp-suggest-row .hp-sg-lbl{
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.hp-suggest-row .hp-sg-lbl strong{
  font-size: 14px;
  font-weight: 600;
  color: #0c1f38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-suggest-row .hp-sg-lbl span{
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-suggest-row .hp-sg-count{
  flex: 0 0 auto;
  font-size: 11.5px;
  color: #94a3b8;
  font-weight: 500;
}
.hp-suggest-row mark{
  background: rgba(158,13,54,.15);
  color: #EA0649;
  padding: 0;
  border-radius: 2px;
}

/* Listing cards inside the dropdown */
.hp-suggest-card{
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  color: #0c1f38;
  -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.hp-suggest-card:hover,
.hp-suggest-card.active{ background: #f7fafa; outline: none; }
.hp-suggest-card .hp-sc-img{
  width: 60px; height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: #eef2f7;
  flex: 0 0 60px;
  display: block;
}
.hp-suggest-card .hp-sc-img img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.hp-suggest-card .hp-sc-body{
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hp-suggest-card .hp-sc-top{
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.hp-suggest-card .hp-sc-addr{
  font-size: 13.5px;
  font-weight: 600;
  color: #0c1f38;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.hp-suggest-card .hp-sc-price{
  font-size: 14px;
  font-weight: 700;
  color: #0c1f38;
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.hp-suggest-card .hp-sc-hood{
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-suggest-card .hp-sc-meta{
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; color: #475569;
  margin-top: 2px;
}
.hp-suggest-card .hp-sc-meta span{ display: inline-flex; align-items: center; gap: 4px; }
.hp-suggest-card .hp-sc-meta svg{ width: 12px; height: 12px; stroke: #64748b; fill: none; stroke-width: 2; }
.hp-suggest-card .hp-sc-broker{
  font-size: 10.5px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.hp-suggest-foot{
  border-top: 1px solid #f1f5f9;
  padding: 12px 16px;
  font-size: 13px;
  color: #EA0649;
  font-weight: 600;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border-left: 0; border-right: 0; border-bottom: 0;
  font-family: inherit;
}
.hp-suggest-foot:hover{ background: #f7fafa; color: #CE2C44; }
.hp-suggest-empty{
  padding: 22px 16px;
  text-align: center;
  font-size: 13px;
  color: #64748b;
  font-style: italic;
}

/* Mobile: full-screen takeover when the input is focused. Matches the
   HouseSigma mobile pattern — input appears at the top, dropdown fills the
   rest of the viewport so users see the full result set without scroll
   wars with the page below. */
@media (max-width: 768px){
  body.hp-suggest-fs .hp-hero-search{
    position: fixed;
    top: 0; left: 0; right: 0;
    max-width: none;
    margin: 0;
    border-radius: 0;
    padding: 12px 14px;
    z-index: 9999;
    box-shadow: 0 4px 14px rgba(0,0,0,.15);
    background: #fff;
  }
  body.hp-suggest-fs .hp-hero-search > svg{ stroke: var(--brand-navy); }
  body.hp-suggest-fs .hp-hero-search input{ height: 44px; }
  body.hp-suggest-fs .hp-suggest-rich{
    position: fixed;
    top: 68px; left: 0; right: 0; bottom: 0;
    max-height: none;
    border-radius: 0;
    border: 0;
    border-top: 1px solid #eef2f7;
    box-shadow: none;
    z-index: 9998;
  }
  body.hp-suggest-fs::after{
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.96);
    z-index: 9990;
    pointer-events: none;
  }
}

/* v313 Fix 1: two big primary CTAs row (Map Search teal + View Listings
   gold-bordered). Replaces the previous .hp-hero-pills 5-pill row. */
.hp-hero-cta-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 4px;
}
.hp-hero-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 200px;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.hp-hero-cta svg{ width: 18px; height: 18px; flex: 0 0 auto; }
.hp-hero-cta-primary{
  background: var(--brand-teal);
  color: #fff;
  border: 1px solid var(--brand-teal);
  box-shadow: 0 12px 28px rgba(158,13,54,.32);
}
.hp-hero-cta-primary:hover{
  background: var(--brand-teal-deep, #CE2C44);
  border-color: var(--brand-teal-deep, #CE2C44);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px rgba(158,13,54,.42);
}
.hp-hero-cta-secondary{
  background: transparent;
  color: var(--gold);
  border: 1.5px solid var(--gold);
}
.hp-hero-cta-secondary:hover{
  background: rgba(212,175,103,.12);
  color: var(--gold);
  transform: translateY(-1px);
}
/* Smaller text-only filter links beneath the two CTAs — italic serif small
   caps so they read as supporting nav, not as primary actions. */
.hp-hero-mini-pills{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 10px;
  margin-top: 22px;
}
.hp-hero-mini-pills .hp-mini-pill{
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  background: transparent;
  text-decoration: none;
  cursor: pointer;
  padding: 4px 6px;
  transition: color .18s ease;
}
.hp-hero-mini-pills .hp-mini-pill:hover{ color: var(--gold); }
.hp-hero-mini-pills .hp-mini-sep{ color: rgba(255,255,255,.32); font-size: 12px; }
@media (max-width: 768px){
  .hp-hero{ min-height: 56dvh; padding: 72px 20px }
  .hp-hero-search{ padding-left: 18px }
  .hp-hero-cta{ min-width: 0; flex: 1 1 calc(50% - 14px); padding: 12px 18px; font-size: 13px; letter-spacing: .4px; }
  .hp-hero-cta svg{ width: 16px; height: 16px; }
  .hp-hero-mini-pills .hp-mini-pill{ font-size: 11.5px; letter-spacing: 1.2px; padding: 4px 4px; }
  .hp-hero-mini-pills .hp-mini-sep{ font-size: 11px; }
}

/* ─── Module 2 · Stat strip ─────────────────────────────────────────────── */
.hp-stats{
  background: var(--brand-navy);
  color: #fff;
  padding: 64px 24px;
}
.hp-stats-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  text-align: center;
}
.hp-stat-num{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -1px;
  color: #fff;
  line-height: 1;
  margin-bottom: 10px;
}
.hp-stat-lbl{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hp-text-mute);
}
@media (max-width: 768px){
  .hp-stats{ padding: 48px 20px }
  .hp-stats-inner{ grid-template-columns: repeat(2, 1fr); gap: 28px 20px }
  .hp-stat-num{ font-size: 36px }
}

/* ─── Module 3 · Just Listed ────────────────────────────────────────────── */
.hp-jl-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hp-jl-card{
  display: block;
  text-decoration: none;
  color: var(--brand-navy);
  background: transparent;
  cursor: pointer;
  transition: transform .25s ease;
}
.hp-jl-card:hover{ transform: translateY(-3px) }
.hp-jl-photo{
  position: relative;
  aspect-ratio: 4/3;
  background: #e9eef3 center/cover no-repeat;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.hp-jl-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.hp-jl-card:hover .hp-jl-photo img{ transform: scale(1.04) }
.hp-jl-ribbon{
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--gold);
  color: var(--brand-navy);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 2px;
}
.hp-jl-strip{
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--sans);
}
.hp-jl-price{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--brand-navy);
  letter-spacing: -.4px;
}
.hp-jl-addr{
  font-size: 13.5px;
  color: var(--hp-text-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hp-jl-meta{
  font-size: 12.5px;
  color: var(--hp-text-mute);
  letter-spacing: .2px;
}
.hp-jl-loading,
.hp-jl-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 16px;
  color: #94a3b8;
  font-size: 14px;
  font-style: italic;
}
@media (max-width: 1100px){
  .hp-jl-grid{ grid-template-columns: repeat(2, 1fr); gap: 24px }
}
@media (max-width: 640px){
  .hp-jl-grid{ grid-template-columns: 1fr; gap: 28px }
}

/* ─── Module 4 · Hood editorial cards ───────────────────────────────────── */
.hp-hood-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.hp-hood-card{
  position: relative;
  display: block;
  aspect-ratio: 4/5;
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  background: var(--brand-navy);
}
.hp-hood-card-img{
  position: absolute;
  inset: 0;
  background: center/cover no-repeat;
  transition: transform .8s cubic-bezier(.16,1,.3,1);
}
.hp-hood-card:hover .hp-hood-card-img{ transform: scale(1.06) }
.hp-hood-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12,31,56,.05) 35%, rgba(12,31,56,.78) 100%);
}
.hp-hood-card-body{
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  color: #fff;
}
.hp-hood-card-name{
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -.4px;
  margin: 0 0 6px;
  display: inline-block;
  position: relative;
  padding-bottom: 4px;
}
.hp-hood-card-name::after{
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transition: right .35s ease;
}
.hp-hood-card:hover .hp-hood-card-name::after{ right: 0 }
.hp-hood-card-meta{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  margin-top: 4px;
}
@media (max-width: 1024px){
  .hp-hood-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px }
}
@media (max-width: 640px){
  .hp-hood-grid{ grid-template-columns: 1fr }
  .hp-hood-card{ aspect-ratio: 5/4 }
  .hp-hood-card-name{ font-size: 24px }
}

/* ─── Module 5 · Featured buildings (premium spotlight) ─────────────────── */
.hp-bldg-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 36px;
}
.hp-bldg-card{
  display: block;
  text-decoration: none;
  color: var(--brand-navy);
}
.hp-bldg-photo{
  aspect-ratio: 16/10;
  background: #e9eef3 center/cover no-repeat;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 22px;
}
.hp-bldg-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s ease;
}
.hp-bldg-card:hover .hp-bldg-photo img{ transform: scale(1.03) }
.hp-bldg-name{
  font-family: var(--serif);
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -.4px;
  margin: 0 0 12px;
  color: var(--brand-navy);
}
.hp-bldg-desc{
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--hp-text-mute);
  margin: 0 0 14px;
  max-width: 480px;
}
.hp-bldg-units{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.hp-bldg-link{
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .4px;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 3px;
  display: inline-block;
  transition: color .18s ease, border-color .18s ease;
}
.hp-bldg-card:hover .hp-bldg-link{ color: var(--gold-deep); border-color: var(--gold-deep) }
@media (max-width: 768px){
  .hp-bldg-grid{ grid-template-columns: 1fr; gap: 44px }
}

/* ─── Module 6 · Recently sold (gated) ──────────────────────────────────── */
.hp-sold-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.hp-sold-card{
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--brand-navy);
}
.hp-sold-photo{
  aspect-ratio: 4/3;
  background: #e9eef3 center/cover no-repeat;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 16px;
}
.hp-sold-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.hp-sold-strip{
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--sans);
  transition: filter .25s ease;
}
.hp-sold-price{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  color: var(--brand-navy);
  letter-spacing: -.4px;
}
.hp-sold-addr{
  font-size: 13.5px;
  color: var(--hp-text-mute);
}
.hp-sold-meta{
  font-size: 12.5px;
  color: var(--hp-text-mute);
}
.hp-sold-card.is-gated{ position: relative }
.hp-sold-card.is-gated .hp-sold-strip{
  filter: blur(8px);
  user-select: none;
  pointer-events: none;
}
.hp-sold-card.is-gated::after{
  content: "Sign in";
  position: absolute;
  left: 50%;
  bottom: 16%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--brand-navy);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  pointer-events: none;
}
.hp-sold-cta-wrap{
  margin-top: 36px;
  text-align: center;
}
.hp-sold-cta{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--brand-navy);
  color: #fff;
  border: 1px solid var(--gold);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.hp-sold-cta:hover{
  background: var(--gold);
  color: var(--brand-navy);
  border-color: var(--gold);
}
@media (max-width: 1100px){
  .hp-sold-grid{ grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 640px){
  .hp-sold-grid{ grid-template-columns: 1fr }
}

/* ─── Module 7 · Pre-construction editorial ─────────────────────────────── */
.hp-precon{
  background: var(--brand-navy);
  color: #fff;
  padding: var(--hp-section-y) 24px;
}
.hp-precon-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
.hp-precon-photo{
  aspect-ratio: 4/5;
  background: #0a1828 center/cover no-repeat;
  border-radius: 4px;
  overflow: hidden;
}
.hp-precon-photo img{ width:100%; height:100%; object-fit:cover; display:block }
.hp-precon-body .hp-eyebrow{ color: var(--gold); margin-bottom: 18px }
.hp-precon-body h2{
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--hp-display-2);
  line-height: 1.05;
  letter-spacing: -1px;
  color: #fff;
  margin: 0 0 22px;
}
.hp-precon-body p{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255,255,255,.78);
  margin: 0 0 30px;
  max-width: 460px;
}
.hp-btn-gold{
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--brand-navy);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background .18s ease, transform .18s ease;
}
.hp-btn-gold:hover{ background: var(--gold-deep); transform: translateY(-1px) }
.hp-precon-form{
  display: none;
  margin-top: 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(201,169,106,.4);
  border-radius: 4px;
  padding: 18px;
  max-width: 460px;
}
.hp-precon-form.is-open{ display: block }
.hp-precon-form input[type=email]{
  width: 100%;
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  margin-bottom: 12px;
  outline: none;
}
.hp-precon-form input[type=email]::placeholder{ color: rgba(255,255,255,.5) }
.hp-precon-form-msg{
  font-size: 12.5px;
  color: rgba(255,255,255,.7);
  margin-top: 10px;
}
.hp-precon-form-msg.is-success{ color: var(--gold) }
@media (max-width: 900px){
  .hp-precon-inner{ grid-template-columns: 1fr; gap: 36px }
  .hp-precon-photo{ aspect-ratio: 16/10 }
}

/* ─── Module 8 · Tools row ──────────────────────────────────────────────── */
.hp-tools-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.hp-tool-card{
  display: block;
  padding: 32px 26px 28px;
  background: #fff;
  border: 1px solid #eef2f7;
  border-radius: 4px;
  text-decoration: none;
  color: var(--brand-navy);
  transition: border-color .18s ease, transform .18s ease, box-shadow .25s ease;
}
.hp-tool-card:hover{
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(11,37,69,.08);
}
.hp-tool-ico{
  width: 36px;
  height: 36px;
  margin-bottom: 22px;
  color: var(--gold-deep);
}
.hp-tool-ico svg{ width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.4 }
.hp-tool-name{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -.3px;
  margin: 0 0 8px;
  color: var(--brand-navy);
}
.hp-tool-sub{
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--hp-text-mute);
  margin: 0 0 14px;
}
.hp-tool-link{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--brand-navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
@media (max-width: 900px){
  .hp-tools-grid{ grid-template-columns: repeat(2, 1fr); gap: 18px }
}

/* ─── Module 9 · Why PropertyHub (mission) ──────────────────────────────────── */
.hp-mission{
  background: var(--off, #f4f6f8);
  padding: var(--hp-section-y) 24px;
  text-align: center;
}
.hp-mission-inner{
  max-width: 640px;
  margin: 0 auto;
}
.hp-mission p{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.55;
  letter-spacing: -.2px;
  color: var(--brand-navy);
  margin: 0 0 28px;
}
.hp-mission-caption{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--hp-text-mute);
}
@media (max-width: 640px){
  .hp-mission p{ font-size: 18px }
}

/* ─── Module 10 · SEO link block (collapsed) ────────────────────────────── */
.hp-seo{
  background: #fff;
  border-top: 1px solid #eef2f7;
}
.hp-seo-details{
  max-width: 1180px;
  margin: 0 auto;
  padding: 32px 24px;
}
.hp-seo-summary{
  list-style: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-navy);
  padding: 12px 0;
  user-select: none;
}
.hp-seo-summary::-webkit-details-marker{ display: none }
.hp-seo-summary::after{
  content: "+";
  float: right;
  color: var(--gold-deep);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
}
.hp-seo-details[open] .hp-seo-summary::after{ content: "−" }
.hp-seo-body{
  padding: 28px 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px 28px;
}
.hp-seo-col-h{
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--hp-text-mute);
  margin-bottom: 14px;
}
.hp-seo-links{
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hp-seo-links a{
  color: var(--brand-navy);
  font-family: var(--sans);
  font-size: 13.5px;
  text-decoration: none;
  transition: color .15s ease;
}
.hp-seo-links a:hover{ color: var(--gold-deep) }

/* ─── v312 Fix 4: narrow-desktop layout repairs ──────────────────────────
   Browser resized small (320–540px on desktop) was breaking the listings
   page: header crammed, listings tabs overlapped sort/filter, the
   floating "Map" pill stacked on top of the .bot-tabs nav. condos.ca
   handles this gracefully with tighter padding + the floating pill
   anchored well clear of the tab bar. These rules only kick in below
   540px so the regular mobile (≤ 480px iPhone) layout is unchanged. */

/* The floating "Map" pill MUST clear the .bot-tabs (~64px tall + safe
   area). Previous offset of 76px was visually tight on narrow widths
   where bot-tabs labels could wrap. Bump to 96px so it can never cover
   the tab bar regardless of label wrap. */
@media (max-width: 768px){
  .v131-mobtoggle-wrap{
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* If bot-tabs aren't visible (e.g. modals/listing-detail open), keep the
   pill at its standard 24px position. */
body:not(.in-search) .v131-mobtoggle-wrap{
  bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Narrow desktop / shrunken browser window — between very-small
   mobile (≤ 480) and tablet (≤ 768). Listings header tightens up,
   tabs+sort+filter row reflows cleanly, and the areas-pill row wraps. */
@media (min-width: 481px) and (max-width: 700px){
  /* Top nav — drop secondary items earlier so the logo + hamburger
     remain visible without crushing the search input. */
  .nav-link, .nl, .nav-secondary, .nl-secondary{ display:none !important; }
  /* Listings header search input shrinks to fit. */
  #lb-search-inp.lb-search-inp{
    font-size: 13px !important;
    padding-left: 36px !important;
    padding-right: 8px !important;
  }
  /* Tabs / sort / filter row — let it wrap so buttons keep their tap
     targets instead of shrinking into illegible icons. */
  .lb-tabs, .listings-tabs-row, .listings-controls-row{
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  /* Areas pill row — wrap freely */
  .hp-areas-pills, .lb-areas-pills, .areas-pills-row{
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* Very narrow (< 380px) — emergency reflow. Hide the floating pill
   entirely so it can never collide with bot-tabs. The bot-tabs already
   contains a "Map" tab so the action remains reachable. */
@media (max-width: 379px){
  .v131-mobtoggle-wrap{
    /* Move it just above bot-tabs and shrink padding so the pill
       doesn't extend past viewport edges either. */
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
    transform: translateX(-50%) scale(.92) !important;
  }
  .v131-mobtoggle, .v136-mobalert{
    padding: 9px 14px 9px 12px !important;
    font-size: 12.5px !important;
  }
}

/* Always: when bot-tabs is being shown on a narrow desktop browser,
   ensure the floating pill cannot have a higher z-index that puts it
   ON TOP of the tabs. bot-tabs z=600, pill z=560 already, but enforce. */
.bot-tabs{ z-index: 610 !important; }

/* ═══════════════════════════════════════════════════════════════════════
   v316 — Areas strip (v=410: property.ca styling)
   Pale mint container wash, larger title, red "Show All" link, white chip
   pills with subtle gray border and chevron scroll buttons at each end.
   Selected pill goes navy (super_area filter) or expands the child chip
   strip below. Tagged with .v410-areas-strip on the new path so the legacy
   condos.ca-pattern styling above can be reverted by removing the class.
   ═══════════════════════════════════════════════════════════════════════ */
.v316-areas-strip{
  /* v=417e — Scott: shrink vertical padding ~16/14 → 8/8 so the strip is
     ~55px tall (header + 38px chip row + tight padding) instead of ~95px.
     Pale brand-teal tint #f6edf0 stays. */
  background:#f6edf0;
  border-bottom:1px solid #d8e3dc;
  padding:8px 16px 8px;
  display:block;
  position:relative;
}
/* v=417e — mobile (<768px): chips bump to 44px touch-target which makes the
   strip taller. Tighten padding + header further so the strip stays compact. */
@media (max-width:768px){
  .v316-areas-strip{ padding:6px 12px 6px !important }
  .v316-areas-hdr{ margin-bottom:4px !important; min-height:auto !important }
  .v316-areas-hdr h3{ font-size:12px !important; line-height:1.2 !important }
  .v316-show-all{ padding:2px 4px !important; min-height:auto !important; font-size:12px !important }
  .v316-pill{ height:34px !important; min-width:auto !important; padding:4px 12px !important; min-height:34px !important; font-size:12px !important }
  .v316-areas-pills{ padding:0 !important }
}
.v316-areas-hdr{
  display:flex; align-items:center; justify-content:space-between;
  /* v=417e: header → chips margin tightened from 12px → 6px. */
  margin-bottom:6px;
}
.v316-areas-hdr h3{
  margin:0;
  font-family:var(--sans, inherit);
  /* v=417e: header font shrunk 15px → 13px so the strip looks compact. */
  font-size:13px; font-weight:700;
  color:var(--brand-navy, #0c1f38);
  letter-spacing:0;
}
.v316-show-all{
  /* v=416i — Scott: red was off-palette for navy/teal. Switch to brand teal. */
  font-size:13px; font-weight:600; color:#EA0649;
  cursor:pointer; text-decoration:none; padding:4px 6px;
  border-radius:6px; transition:background .12s;
}
.v316-show-all:hover{ background:rgba(158,13,54,.08); text-decoration:underline; }
.v316-areas-pills{
  display:flex; gap:12px; flex-wrap:nowrap;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  padding:2px 44px 6px 0; scrollbar-width:none;
  scroll-behavior:smooth;
}
.v316-areas-pills::-webkit-scrollbar{ display:none }
/* Scroll-affordance chevron buttons. JS toggles .v316-scroll-show-left /
   .v316-scroll-show-right on the strip based on scrollLeft / clientWidth. */
.v316-scroll-btn{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:#fff; border:1px solid #d8dce2;
  box-shadow:0 2px 6px rgba(11,31,56,.12), 0 1px 2px rgba(11,31,56,.06);
  display:none; align-items:center; justify-content:center;
  cursor:pointer; padding:0; z-index:2;
  color:#475569; transition:background .12s, border-color .12s;
}
.v316-scroll-btn:hover{ background:#f8fafc; border-color:#94a3b8; color:#0c1f38 }
.v316-scroll-btn svg{ width:16px; height:16px; display:block }
.v316-scroll-btn.v316-scroll-left{ left:6px }
.v316-scroll-btn.v316-scroll-right{ right:6px }
.v316-areas-strip.v316-scroll-show-left .v316-scroll-left{ display:inline-flex }
.v316-areas-strip.v316-scroll-show-right .v316-scroll-right{ display:inline-flex }
.v316-pill{
  /* v=416i — Scott: shrink chip from ~50px chunky pill to a tight 38px
     pill. Reduced vertical padding (13→9px) drops total height to ~38px
     while keeping the same font size + min-width. */
  flex-shrink:0;
  display:inline-flex; align-items:center; gap:6px; justify-content:center;
  background:#fff;
  color:#1f2937;
  border:1px solid #d8dce2;
  border-radius:12px;
  padding:9px 18px;
  min-width:120px;
  height:38px;
  box-sizing:border-box;
  font-family:inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; transition:background .15s, border-color .15s, color .15s, box-shadow .15s;
  white-space:nowrap; line-height:1.15;
  box-shadow:0 1px 2px rgba(11,31,56,.04);
}
.v316-pill:hover{ border-color:var(--brand-navy, #0c1f38) }
.v316-pill-name{ display:inline-block }
.v316-pill-sub{
  display:none; opacity:.85; font-weight:500; font-size:11.5px;
  margin-left:6px; padding-left:7px; border-left:1px solid rgba(255,255,255,.25);
}
.v316-pill-count{
  display:none; min-width:20px; padding:0 6px; height:18px;
  border-radius:99px; background:rgba(255,255,255,.18); color:#fff;
  font-size:11px; font-weight:700; align-items:center; justify-content:center;
  margin-left:4px;
}
.v316-pill-chevron{
  display:none; width:12px; height:12px; margin-left:2px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);
}
.v316-pill-close{
  display:none; width:18px; height:18px; line-height:16px; text-align:center;
  border-radius:50%; background:rgba(255,255,255,.14);
  font-size:14px; font-weight:600; cursor:pointer; margin-left:4px;
  transition:background .12s;
}
.v316-pill-close:hover{ background:rgba(255,255,255,.28) }
.v316-pill[aria-expanded="true"]{
  background:var(--brand-navy, #0c1f38);
  color:#fff;
  border-color:var(--brand-navy, #0c1f38);
}
.v316-pill[aria-expanded="true"] .v316-pill-sub{ display:inline-block }
.v316-pill[aria-expanded="true"] .v316-pill-chevron{ display:inline-block }
.v316-pill[aria-expanded="true"] .v316-pill-close{ display:inline-flex; align-items:center; justify-content:center; }
.v316-pill[data-partial="1"][aria-expanded="true"] .v316-pill-count{
  display:inline-flex;
}

/* v=410l — Selected super-area pill ([✓] District-Name [×]). Locked
   pattern Scott wants preserved: red fill, white check on the left,
   white text + sub, white × on the right. The leading check is drawn
   via a ::before pseudo with a small SVG mask so it scales independently
   from the close button. Stroke kept at 1.75 (matches the rest of the
   v=410l checkmark restraint pass — no chunky icons anywhere). */
.v316-pill.selected{
  background:#dc2626;
  color:#fff;
  border-color:#dc2626;
}
.v316-pill.selected::before{
  content:"";
  display:inline-block;
  width:14px; height:14px;
  margin-right:4px; flex-shrink:0;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
}
.v316-pill.selected:hover{ background:#b91c1c; border-color:#b91c1c }
.v316-pill.selected .v316-pill-sub{ display:inline-block; color:#fff; border-left-color:rgba(255,255,255,.35); }
.v316-pill.selected .v316-pill-close{ display:inline-flex; align-items:center; justify-content:center; }
.v316-pill.selected .v316-pill-chevron{ display:inline-block }
/* When hood-level picks exist in a super-area, surface the count even on the
   default white pill so the user sees "Downtown · 4". */
.v316-pill[data-partial="1"] .v316-pill-count{
  display:inline-flex;
  background:var(--brand-navy, #0c1f38);
  color:#fff;
}
/* Children chip strips */
.v316-area-children{ display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.v316-child-strip{
  background:#f8fbfa;
  border:1px solid #eef2f5;
  border-radius:10px;
  padding:9px 12px;
}
.v316-child-strip header{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:7px;
}
.v316-child-strip header > span{
  font-size:12px; font-weight:700; color:var(--brand-navy, #0c1f38);
  letter-spacing:.2px; text-transform:uppercase;
}
.v316-select-all{
  font-size:12px; font-weight:600; color:var(--brand-teal, #EA0649);
  cursor:pointer; text-decoration:none; padding:2px 4px; border-radius:5px;
}
.v316-select-all:hover{ background:rgba(158,13,54,.08) }
.v316-child-chips{
  display:flex; flex-wrap:wrap; gap:6px;
}
.v316-chip{
  flex-shrink:0;
  background:#fff;
  border:1px solid var(--brand-navy, #0c1f38);
  color:var(--brand-navy, #0c1f38);
  border-radius:99px;
  padding:5px 12px;
  font-family:inherit; font-size:12.5px; font-weight:600;
  cursor:pointer; transition:background .12s, color .12s;
  white-space:nowrap; line-height:1.2;
  display:inline-flex; align-items:center; gap:5px;
}
.v316-chip:hover{ background:rgba(12,31,56,.06) }
.v316-chip.selected{
  background:var(--brand-navy, #0c1f38);
  color:#fff;
}
.v316-chip.selected:hover{ background:#1a2f50 }
.v316-chip > span{ font-size:13px; font-weight:600; line-height:1; }

@media (max-width:768px){
  .v316-areas-strip{ padding:8px 12px 6px }
  .v316-pill{ padding:6px 10px; font-size:12.5px }
  .v316-chip{ padding:5px 10px; font-size:12px }
}

/* ── v316 Modal ── */
.v316-modal-backdrop{
  position:fixed; inset:0; background:rgba(11,37,69,.55);
  z-index:9000; display:none; align-items:flex-start; justify-content:center;
  padding:48px 16px;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.v316-modal-backdrop.open{ display:flex }
.v316-modal{
  background:#fff; border-radius:14px;
  width:min(640px, 100%); max-height:calc(100vh - 96px);
  display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(11,37,69,.32);
  overflow:hidden;
}
.v316-modal-hdr{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 20px; border-bottom:1px solid #eef2f5;
}
.v316-modal-hdr h2{
  margin:0; font-size:18px; font-weight:700;
  color:var(--brand-navy, #0c1f38); font-family:var(--sans, inherit);
}
.v316-modal-hide{
  font-size:14px; font-weight:600; color:var(--brand-teal, #EA0649);
  cursor:pointer; padding:6px 10px; border-radius:6px;
  background:transparent; border:none; font-family:inherit;
}
.v316-modal-hide:hover{ background:rgba(158,13,54,.08) }
.v316-modal-body{
  /* v=529 (P2-19) — flex children need min-height:0 for overflow-y:auto to
     actually scroll inside a flex parent (.v316-modal has display:flex +
     max-height:calc(100vh - 96px)). Without it, the body inherits its
     content's intrinsic height and the scrollbar can't engage cleanly.
     overscroll-behavior:contain prevents touch-scroll chaining when the
     modal hits its top/bottom edge, fixing the scout's "scroll flake" repro. */
  flex:1 1 auto;
  min-height:0;
  max-height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  padding:8px 20px;
}
.v316-modal-row{
  border-bottom:1px solid #f1f5f9;
}
.v316-modal-row:last-child{ border-bottom:none }
.v316-modal-row-hdr{
  display:flex; align-items:center; gap:12px;
  padding:12px 4px; cursor:pointer;
}
.v316-modal-cb{
  width:18px; height:18px; flex-shrink:0;
  border:1.5px solid #cbd5e1; border-radius:4px;
  background:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.v316-modal-cb.checked{ background:var(--brand-navy, #0c1f38); border-color:var(--brand-navy, #0c1f38) }
.v316-modal-cb.partial{ background:var(--brand-navy, #0c1f38); border-color:var(--brand-navy, #0c1f38) }
.v316-modal-cb.checked::after{ content:''; width:5px; height:9px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) translate(-1px,-1px); }
.v316-modal-cb.partial::after{ content:''; width:8px; height:2px; background:#fff; }
.v316-modal-name{ flex:1; font-size:14px; font-weight:600; color:var(--brand-navy, #0c1f38) }
.v316-modal-chev{
  width:10px; height:10px; border-right:2px solid #64748b; border-bottom:2px solid #64748b;
  transform:rotate(45deg); transition:transform .15s;
}
.v316-modal-row[aria-expanded="true"] .v316-modal-chev{ transform:rotate(-135deg) }
.v316-modal-children{
  display:none; padding:4px 0 14px 30px;
  flex-wrap:wrap; gap:8px 14px;
}
.v316-modal-row[aria-expanded="true"] .v316-modal-children{ display:flex }
.v316-modal-child{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--brand-navy, #0c1f38); cursor:pointer;
  padding:4px 0; min-width:46%;
}
.v316-modal-child .v316-modal-cb{ width:16px; height:16px }
.v316-modal-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px; border-top:1px solid #eef2f5; background:#f8fbfa;
}
.v316-modal-clear{
  font-size:14px; font-weight:600; color:var(--brand-navy, #0c1f38);
  cursor:pointer; background:transparent; border:none; font-family:inherit;
  padding:8px 10px; border-radius:6px;
}
.v316-modal-clear:hover{ background:rgba(12,31,56,.06) }
.v316-modal-cta{
  background:var(--brand-teal, #EA0649); color:#fff;
  border:none; padding:10px 22px; border-radius:8px;
  font-size:14px; font-weight:700; cursor:pointer;
  font-family:inherit;
}
.v316-modal-cta:hover{ background:var(--brand-teal-deep, #CE2C44) }

/* v316 — Pattern A right-rail icons: navy by default, teal only when ACTIVE.
   Overrides the prior Draw/Save default-teal accent. */
.map-ctrl-draw-pill svg{ color:var(--brand-navy, #0c1f38) !important }
.map-ctrl-draw-pill:hover svg{ color:var(--brand-teal, #EA0649) !important }
body.draw-mode-on .map-ctrl-draw-pill svg,
.map-ctrl-draw-pill.on svg,
.map-ctrl-draw-pill[aria-pressed="true"] svg{ color:#fff !important }
body.draw-mode-on .map-ctrl-draw-pill,
.map-ctrl-draw-pill.on,
.map-ctrl-draw-pill[aria-pressed="true"]{
  background:var(--brand-teal, #EA0649) !important; border-color:var(--brand-teal, #EA0649) !important;
  color:#fff !important;
}
.map-ctrl-save-pill svg{ color:var(--brand-navy, #0c1f38) !important }
.map-ctrl-save-pill:hover svg{ color:var(--brand-teal, #EA0649) !important }
.map-ctrl-save-pill.on svg,
.map-ctrl-save-pill[aria-pressed="true"] svg{ color:var(--brand-teal, #EA0649) !important; fill:var(--brand-teal, #EA0649) !important; }
.map-ctrl-save-pill.on,
.map-ctrl-save-pill[aria-pressed="true"]{ color:var(--brand-teal, #EA0649) !important }

/* v=410h — REGRESSION REMOVED. An earlier patch overrode the locked
   navy active state with teal here. Per locked map-pin spec the Areas
   button uses #0c1f38 (navy) in mode ON, #dc2626 (red) when a hood is
   selected. Teal is reserved for content elements. Rule rewritten to
   explicitly hold the navy override so any future cascade nudge doesn't
   silently roll us back to teal. */
#areas-btn.on{ background:#0c1f38 !important; color:#fff !important }
#areas-btn.on svg{ color:#fff !important }
#areas-btn.on > span{ color:#fff !important }
#areas-btn.on:hover{ background:#1a2f4d !important }

/* ═══════════════════════════════════════════════════════════════════════════
   v=416h — Premium loading state for bbox-driven listings refetch. While
   /api/listings is in flight (kicked off by map move/zoom or filter change),
   body.cdg-bbox-loading dims the listing cards so the user sees "we heard
   you, fetching new results" without a "Loading…" string. When the new
   payload lands and renderCards swaps the cards, the class drops and the
   transition fades them back to full opacity. The transition runs in BOTH
   directions so dim-down feels just as smooth as fade-back-up.
   condos.ca leaves cards at opacity:1 throughout (verified live, no
   skeleton state, no fade); this is a small step beyond — same speed,
   one extra visual cue.
   ═══════════════════════════════════════════════════════════════════════════ */
#cards .card{
  transition: opacity .25s cubic-bezier(.2, .8, .2, 1);
}
body.cdg-bbox-loading #cards .card{
  opacity: .55;
  pointer-events: none;
}
/* Honor reduced-motion: skip the dim entirely so users with vestibular
   sensitivity don't see flicker on every map nudge. */
@media (prefers-reduced-motion: reduce){
  #cards .card{ transition: none }
  body.cdg-bbox-loading #cards .card{ opacity: 1 }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v=416f — Toolbar lead slot. Replaces the Listings/Buildings sub-tabs in
   .lb-row with a high-converting "🔔 Save This Search" CTA + a small grey
   results count. Buildings already lives in the top nav; the duplicate sub
   tab was eating the row space that pushed Sort/Filter/View toggle off
   the right edge.
   ═══════════════════════════════════════════════════════════════════════════ */
.lb-toolbar-lead{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.cdg-save-search{
  appearance:none;-webkit-appearance:none;
  display:inline-flex;align-items:center;gap:6px;
  /* v=430j — Item 151: 8/16 padding + 36px min-height + 14px font. */
  padding:8px 16px;
  min-height:36px;
  background:#EA0649; color:#fff;
  border:none; border-radius:999px;
  font-family:var(--sans);
  font-size:14px; font-weight:600;
  letter-spacing:.1px;
  cursor:pointer; white-space:nowrap;
  box-shadow:0 3px 10px rgba(158,13,54,.25);
  transition:background .15s, box-shadow .15s, transform .12s;
  line-height:1;
}
.cdg-save-search:hover{ background:#CE2C44; box-shadow:0 5px 14px rgba(158,13,54,.32) }
.cdg-save-search:active{ transform:scale(.97) }
.cdg-save-search:focus-visible{ outline:2px solid #EA0649; outline-offset:2px }
.cdg-save-search svg{ width:14px; height:14px; stroke:#fff; flex-shrink:0 }
.lb-results-count{
  font-family:var(--sans);
  font-size:13px; color:#64748b; font-weight:500;
  white-space:nowrap;
}
/* v=449d-theme-polish: TRREB IDX disclaimer chip. CLAUDE.md requires this
   visible near search results. Styled subtly (small gray) so it doesn't
   compete with the listings UI. */
.lb-trreb-disc{
  font-family:var(--sans);
  font-size:11.5px; color:#94a3b8; font-weight:400;
  line-height:1.35; max-width:380px;
  border-left:2px solid #e2e8f0; padding-left:10px; margin-left:4px;
}
@media (max-width: 600px){
  .cdg-save-search{ padding:7px 12px; font-size:12.5px }
  .cdg-save-search > span{ display:inline }
  .lb-results-count{ font-size:12px }
  .lb-trreb-disc{ display:none }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v=416 — Discrete pagination + bottom-of-page SEO content
   (Top Areas / Market Trends / Pricing Insights). Lives inside #cards-scroll
   so it follows the listings grid in both List and Mixed views; hidden in
   Map view via the .cdg-view-map body class.
   ═══════════════════════════════════════════════════════════════════════════ */

/* — Pagination wrap + numeric pager —
   v=467 P2: sticky to the bottom of the listings scroll container so the
   page-number row is always reachable without scrolling all cards into view.
   The wrap is inside #cards-scroll which is the scrolling viewport for the
   list pane; sticky position pins it to the bottom edge of that viewport. */
.cdg-pager-wrap{
  padding:14px 18px 12px;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px;
  font-family:var(--sans);
  position:sticky;bottom:0;z-index:3;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 24%);
  backdrop-filter:saturate(1.1);
}
.cdg-pager-wrap:empty{display:none}
.cdg-pg-meta{
  font-size:13px;color:#64748b;letter-spacing:.1px;
}
.cdg-pg{
  display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.cdg-pg-btn{
  appearance:none;-webkit-appearance:none;
  min-width:34px;height:34px;padding:0 10px;
  border:1px solid #e2e8f0;background:#fff;color:#0c1f38;
  border-radius:50%;
  font-family:inherit;font-size:13px;font-weight:500;line-height:1;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.cdg-pg-btn:hover{ background:#f1f5f9; border-color:#cbd5e0 }
.cdg-pg-btn:focus-visible{ outline:2px solid #EA0649; outline-offset:2px }
.cdg-pg-btn.on{
  background:#0c1f38;color:#fff;border-color:#0c1f38;cursor:default;
}
.cdg-pg-btn.on:hover{ background:#0c1f38 }
.cdg-pg-gap{
  display:inline-flex;align-items:flex-end;justify-content:center;
  min-width:24px;height:34px;color:#94a3b8;font-size:14px;letter-spacing:1px;
  user-select:none;
}

/* Hide pager + SEO sections in Map view (only the map should be visible). */
body.cdg-view-map .cdg-pager-wrap,
body.cdg-view-map .cdg-seo-wrap{ display:none !important }

/* — SEO content sections — */
.cdg-seo-wrap{
  padding:8px 18px 28px;
  display:flex;flex-direction:column;gap:28px;
  font-family:var(--sans);
  color:#1e293b;
}
.cdg-seo{
  display:flex;flex-direction:column;gap:10px;
}
.cdg-seo-h{
  font-family:var(--sans);
  font-size:18px;font-weight:600;line-height:1.3;
  color:#0c1f38;
  margin:0;
  letter-spacing:-.1px;
}
.cdg-seo-h3{
  font-family:var(--sans);
  font-size:14px;font-weight:600;line-height:1.3;
  color:#0c1f38;
  margin:6px 0 2px;
  letter-spacing:-.05px;
}
.cdg-seo-intro{
  font-size:13.5px;line-height:1.6;color:#475569;margin:0;
  max-width:680px;
}
.cdg-seo-tablewrap{
  width:100%;overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.cdg-seo-table{
  width:100%;border-collapse:collapse;
  font-size:13.5px;
  background:#fff;
}
.cdg-seo-table thead th{
  text-align:left;font-weight:600;color:#64748b;
  padding:10px 12px 8px;
  border-bottom:1px solid #e2e8f0;
  letter-spacing:.2px;font-size:12px;text-transform:uppercase;
  white-space:nowrap;
}
.cdg-seo-table thead th:nth-child(n+2){text-align:right}
.cdg-seo-table tbody td{
  padding:10px 12px;
  border-bottom:1px solid #f1f5f9;
  color:#1e293b;
  white-space:nowrap;
}
.cdg-seo-table tbody td:nth-child(n+2){text-align:right;font-variant-numeric:tabular-nums}
.cdg-seo-table tbody tr:last-child td{border-bottom:none}
.cdg-seo-table tbody tr.cdg-seo-empty td{
  text-align:center;color:#94a3b8;font-style:italic;
  padding:20px 12px;
}
.cdg-seo-link{
  color:#EA0649;text-decoration:none;font-weight:500;
}
.cdg-seo-link:hover{ text-decoration:underline; color:#7d0a2b }
.cdg-seo-link:focus-visible{ outline:2px solid #EA0649; outline-offset:2px; border-radius:2px }

/* Mobile: tighten paddings, allow Area names to wrap, keep numeric cols readable. */
@media (max-width: 600px){
  .cdg-pager-wrap{ padding:14px 12px 6px; align-items:center }
  .cdg-pg-btn{ min-width:32px; height:32px; padding:0 8px; font-size:12.5px }
  .cdg-seo-wrap{ padding:6px 12px 22px; gap:22px }
  .cdg-seo-h{ font-size:16px }
  .cdg-seo-intro{ font-size:13px }
  .cdg-seo-table{ font-size:13px }
  .cdg-seo-table thead th,
  .cdg-seo-table tbody td{ padding:9px 8px }
  .cdg-seo-table tbody td:first-child{ white-space:normal }
}

/* ═════════════════════════════════════════════════════════════════════════
   v=417d — CSS-only quick wins (toolbar overflow + filter modal 3-col + map
   button redundancy). Doubled-class selectors are used in places to beat the
   `!important`-laden styles that 19-mobile-pill-fixes.js injects at runtime.
   ═════════════════════════════════════════════════════════════════════════ */

@media (max-width:480px){
  body.in-search .lb-row.lb-row{ gap:5px !important; padding:8px 10px !important }
  body.in-search .lb-row.lb-row .lb-toggle .lb-btn{ font-size:12px !important; padding:6px 9px !important }
  body.in-search .lb-row.lb-row .lb-count{ font-size:11.5px !important }
  body.in-search .lb-row.lb-row .lb-row-right{ gap:3px !important }
  body.in-search .lb-row.lb-row .sort-link{ padding:6px 6px !important; font-size:0 !important; gap:0 !important }
  body.in-search .lb-row.lb-row .sort-link svg{ width:18px !important; height:18px !important }
  body.in-search .lb-row.lb-row .filter-link{ padding:6px 11px !important; font-size:12px !important; gap:4px !important }
  body.in-search .lb-row.lb-row .filter-link svg{ width:13px !important; height:13px !important }
  body.in-search .lb-row.lb-row .cdg-vt{ height:34px !important; padding:2px !important; gap:1px !important; margin-left:2px !important }
  body.in-search .lb-row.lb-row .cdg-vt-btn{ height:30px !important; padding:0 8px !important; min-width:32px !important; gap:0 !important }
  body.in-search .lb-row.lb-row .cdg-vt-btn svg{ width:15px !important; height:15px !important }
  /* v=417e — restore v=415e active-label pattern even at <=480px. The
     <=430px wrap rule below gives the toolbar room; the active button can
     keep its text label so users always see which view they're in. */
  body.in-search .lb-row.lb-row .cdg-vt-btn .cdg-vt-lbl{ display:none !important }
  body.in-search .lb-row.lb-row .cdg-vt-btn.on{ padding:0 12px !important; gap:5px !important }
  body.in-search .lb-row.lb-row .cdg-vt-btn.on .cdg-vt-lbl{ display:inline-block !important; font-size:12px !important; font-weight:600 !important }
}
/* v=472 — was @media(max-width:430px) forcing flex-wrap:wrap on lb-row, which
   put Get Alerts on a 3rd row at 390px. Now nowrap with overflow-x scroll
   (see also the v=472 mobile toolbar block injected in app.js ~line 4740). */
@media (max-width:430px){
  body.in-search .lb-row.lb-row{
    flex-wrap:nowrap !important;
    row-gap:0 !important;
    overflow-x:visible !important;
  }
  body.in-search .lb-row.lb-row > .lb-toggle{ flex-shrink:0 !important }
}

@media (min-width:768px){
  /* v=545b — condos.ca pixel-match: left dock-out side panel pattern.
     The filter panel slides in from the left edge and docks where the
     listings panel was. Map stays on the right, FULLY INTERACTIVE — live
     filter changes update map polygon counts in real time (chip clicks
     already call applyFilters() per-tick). To keep the map clickable,
     .fm-ov is constrained to the panel's width so the right side of the
     viewport is naturally unblocked (no backdrop overlay catching
     map-pin clicks). Click-to-close fires on the .fm-ov area outside the
     .fm box (i.e. nowhere in this layout — there's no transparent strip
     around the panel). Close via the X button, Esc, or Apply. */
  .fm-ov{
    /* Constrain overlay box to the panel — outside this box the page
       (map, polygons, pins) stays clickable. */
    left:0 !important;
    top:0 !important;
    bottom:0 !important;
    right:auto !important;
    width:min(540px, 42vw) !important;
    max-width:540px !important;
    min-width:380px !important;
    padding:0 !important;
    background:transparent !important;
    display:block !important;
    overflow:visible !important;
  }
  .fm{
    /* Dock to the left edge, full viewport height. */
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    max-width:none !important;
    height:100% !important;
    max-height:100vh !important;
    margin:0 !important;
    border-radius:0 14px 14px 0 !important;
    box-shadow:8px 0 28px rgba(11,31,56,.18), 2px 0 8px rgba(11,31,56,.10) !important;
    /* Slide-in animation: from off-screen left into dock. */
    transform:translateX(-100%) !important;
    opacity:1 !important;
    transition:transform .24s cubic-bezier(.2,.8,.2,1) !important;
  }
  .fm-ov.open .fm{
    transform:translateX(0) !important;
  }
  .fm-ov .fm-body{
    padding:8px 24px calc(20px + env(safe-area-inset-bottom,0px)) !important;
  }
  /* Inside a single-column side panel, force .fm-cols to stack — the
     existing @media (min-width:1024px) 3-col grid would overflow the
     ~540px-wide panel. Higher specificity wins via the .fm-ov .fm-body
     prefix. */
  .fm-ov .fm-body .fm-cols{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    grid-template-columns:none !important;
  }
  .fm-ov .fm-body .fm-col{
    display:flex !important;
    flex-direction:column !important;
    min-width:0 !important;
  }
  /* Rows inside the panel stack label-over-controls. Selector relaxed
     from > .fm-row direct-child to .fm-row descendant so rows wrapped
     in the new .fm-col container still match. */
  .fm-ov .fm-body .fm-row{
    display:block !important;
    grid-template-columns:none !important;
    padding:10px 0 12px !important;
  }
  .fm-ov .fm-body .fm-row .fm-lbl{
    padding-top:0 !important;
    margin-bottom:8px !important;
    display:block !important;
  }
  .fm-ov .fm-body .fm-row .fm-slider-wrap{ max-width:none !important }
  .fm-ov .fm-body .fm-row .fm-selects{ grid-template-columns:1fr 1fr !important }
}

/* v=545b — Mobile: the left-dock slide-in from the desktop block must NOT
   leak into mobile. Mobile keeps the full-screen bottom-sheet pattern and
   slides up from below. position:fixed (not absolute) inside the
   inset:0 .fm-ov box; transform animates translateY(100%) → 0. */
@media (max-width:768px){
  .fm-ov .fm{
    position:fixed !important;
    inset:0 !important;
    width:100% !important;
    max-width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    box-shadow:none !important;
    transform:translateY(100%) !important;
    transition:transform .26s cubic-bezier(.2,.8,.2,1) !important;
  }
  .fm-ov.open .fm{
    transform:translateY(0) !important;
  }
}

body.in-search:not(.in-fullmap):not(.map-fs) .v131-mobtoggle-wrap .v131-mobtoggle{ display:none !important }

/* ═══════════════════════════════════════════════════════════════════════════
   v=432 — mobile comprehensive polish (Items 148 + listing detail polish).
   Item 149 (horizontal swipe carousel) and Item 150 (view-toggle Tier 3
   navy) shipped in v=430i; this block layers on the deferred Item 148
   responsive audit + listing-detail mobile polish.

   Scope (≤768px only — desktop untouched):
     · No horizontal page scroll (defensive overflow-x:hidden on body)
     · Listing-card photo gallery: dots more visible + bigger tap targets
     · Listing-detail tabs: explicit horizontal scroll affordance
     · Filter chip / Areas chip rails: ensure horizontal scroll never
       wraps to a second row on narrow phones
     · Mobile tap-target floor: any inline-style button under 44px gets
       bumped to 44px min via :where() so it never beats existing rules
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* Defensive — no rogue horizontal scroll. Scoped to <body> so it doesn't
     clobber sticky/fixed positioning inside .in-fullmap / .map-fs which
     deliberately lock <html> height. Cards-mixed horizontal carousel
     (Item 149) is overflow-x:auto on the inner .cards-mixed element, not
     <body>, so this guard is safe alongside it. */
  body:not(.in-fullmap):not(.map-fs){ overflow-x:hidden }

  /* Gallery dots — bump from 5px to 7px so they're tappable + visible at
     low DPR. .on indicator widens to 18px (was 16px) to match. Lifted off
     the bottom edge so they clear the bottom-left "+ Compare" pill that
     v=429d restored. */
  .ci > .gallery-dots{ bottom:10px; gap:5px }
  .ci > .gallery-dots > .gdot{ width:7px; height:7px }
  .ci > .gallery-dots > .gdot.on{ width:18px }

  /* Gallery prev/next on cards: bigger tap target. Existing positioning
     (left/right edge) preserved — only the hit area grows. */
  .ci > .gallery-prev,
  .ci > .gallery-next{ min-width:44px; min-height:44px }

  /* Listing-detail tabs row — already overflow-x:auto via .v68-listing-tabs.
     Keep the right-edge fade mask but bump tap targets so the tabs stay
     hit-friendly at 14px text. */
  .v68-listing-tabs > .v68-tab{ min-height:44px; padding-left:13px; padding-right:13px }

  /* Areas chip rail — already a single horizontal scroll row on mobile via
     .v61-areas-chips overflow-x:auto. Ensure the scrollbar gutter never
     pushes content down into the listings; hide it visually on mobile but
     keep momentum scrolling. */
  .v61-areas-chips{ -webkit-overflow-scrolling:touch; scrollbar-width:none }
  .v61-areas-chips::-webkit-scrollbar{ display:none }

  /* Filter pills row (.lb-row-right) wraps by default (flex-wrap:wrap) so
     pills stack onto a second row. On narrow phones (<420px) this eats
     vertical real estate above the cards. Switch to no-wrap + horizontal
     scroll for the pill row only; sort + view-toggle (which sit at the
     right edge via margin-left:auto) stay anchored. */
  @media (max-width:420px){
    .lb-row-right{
      flex-wrap:nowrap !important;
      overflow-x:auto;
      scrollbar-width:none;
      -webkit-overflow-scrolling:touch;
      gap:6px !important;
      padding-right:8px;
    }
    .lb-row-right::-webkit-scrollbar{ display:none }
    .lb-row-right > *{ flex-shrink:0 }
  }

  /* Tap-target floor for in-listing-detail right-rail / m-body buttons.
     The Schedule / Mortgage / RvB pill buttons already meet 44px but the
     small "save" / "share" icon row beside them did not — pin a floor. */
  body.in-listing-detail .m-rvb-btn,
  body.in-listing-detail .v112-mort-btn,
  body.in-listing-detail .v278-sched-btn,
  body.in-listing-detail .v278-sched-call,
  body.in-listing-detail .v113-sticky-cta button,
  body.in-listing-detail .v113-sticky-cta a{ min-height:44px }

  /* Listing-detail bottom sticky CTA — guarantee safe-area inset so the
     "Request a viewing" pill never sits under the iOS home indicator on
     phones with notches. (Existing v113 + v210 rules set this; defensive
     repeat with calc() so iPad mini in split-view also clears.) */
  .v113-sticky-cta{
    padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)) !important;
  }

  /* Photo gallery 16:9 aspect on listing CARDS (mobile) — existing rule
     pins .ci to height:200px on phones. At 390px viewport that's a 1.95:1
     ratio which is fine, but on 360px (Galaxy S, narrow Androids) it
     becomes 1.8:1 and looks squat. Switch to aspect-ratio so the photo
     always reads as a hero. */
  @media (max-width:380px){
    body.in-search .ci{ height:auto !important; aspect-ratio:16/10 }
  }
}

/* ═════════════════════════════════════════════════════════════════════════
   v=438 — FILTERS MODAL ELITE POLISH PASS
   Scope: ONLY selectors inside .fm-ov / .fm. Appends to override the v=417e
   baseline so existing rules stay intact (file-disjoint from toolbar work).
   Targets typography hierarchy, section breathing room, chip differentiation
   (multi-select teal w/ check vs radio navy), sticky footer hierarchy,
   range-input polish, and frame radius. Benchmark: Compass, Knight Frank,
   Sotheby's — quiet confidence, editorial type.
   ═════════════════════════════════════════════════════════════════════════ */

/* — Modal frame — softer 16px desktop radius, deeper shadow, 0.96→1 entry — */
.fm{
  border-radius:16px !important;
  box-shadow:
    0 32px 80px rgba(11,31,56,.22),
    0 8px 24px rgba(11,31,56,.12),
    0 0 0 1px rgba(11,31,56,.04) !important;
  transform:translateY(6px) scale(.96);
  transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease-out !important;
}
.fm-ov{ background:rgba(12,31,56,.42) !important }
@media (max-width:768px){
  .fm{ border-radius:0 !important; box-shadow:none !important }
}

/* — Header typography — editorial serif title, no harsh divider — */
.fm-hdr{
  padding:22px 24px 18px !important;
  border-bottom:1px solid #f1f5f9 !important;
}
.fm-title{
  font-family:Georgia, var(--serif), serif !important;
  font-size:24px !important;
  font-weight:600 !important;
  color:#0c1f38 !important;
  letter-spacing:-.4px !important;
  line-height:1.2 !important;
}

/* — Section rows — breathing room (was 11px/11px=22px between sections).
     v=545: widened label column 96->128 to fit bold mixed-case labels
     ("Maintenance Fee", "Property Type") without wrapping. — */
.fm-body{ padding:8px 24px calc(110px + env(safe-area-inset-bottom,0px)) !important }
.fm-row{
  grid-template-columns:128px 1fr !important;
  gap:18px !important;
  padding:18px 0 !important;
  border-bottom:1px solid #f1f5f9 !important;
  align-items:flex-start !important;
}
@media (max-width:768px){
  .fm-body{ padding:4px 18px calc(110px + env(safe-area-inset-bottom,0px)) !important }
  .fm-row{ grid-template-columns:1fr !important; gap:10px !important; padding:16px 0 !important }
}

/* — Section labels — v=545: bold mixed-case navy. 4-elite convergent pattern:
     condos.ca / Zoocasa / Zolo / HouseSigma all use bold mixed-case 13-16px,
     never the 11px UPPERCASE eyebrow we shipped. Restoring brand navy +
     dropping uppercase matches Compass / Knight Frank scanning ergonomics. — */
.fm-lbl{
  font-size:13.5px !important;
  font-weight:700 !important;
  color:#0c1f38 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  padding-top:3px !important;
  line-height:1.25 !important;
}
.fm-lbl-sub{
  text-transform:none !important;
  letter-spacing:0 !important;
  color:#64748b !important;
  font-weight:500 !important;
  font-size:11.5px !important;
}
@media (max-width:768px){
  .fm-lbl{
    font-size:13px !important;
    padding-top:0 !important;
    margin-bottom:4px !important;
  }
}

/* ═══════════ v=545 — 3-column explicit grid for filter modal ═══════════
   Replaces the prior CSS columns:3 flow with an explicit grid so the three
   columns are CATEGORY-grouped. Goal: zero-scroll on desktop at 1280x800. */
.fm-cols{
  display:flex;
  flex-direction:column;
  gap:0;
}
.fm-col{
  display:flex;
  flex-direction:column;
  min-width:0;
}
@media (min-width:1024px){
  .fm-cols{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:0 32px;
    align-items:start;
  }
}
@media (min-width:768px) and (max-width:1023px){
  .fm-cols{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:0 28px;
    align-items:start;
  }
  .fm-col:nth-child(3){
    grid-column:1 / -1;
    border-top:1px solid #f1f5f9;
    padding-top:12px;
    margin-top:4px;
  }
}

/* ═══════════ v=545 — iOS-style toggle switch ═══════════ */
.fm-row-toggle{ padding:14px 0 !important }
.fm-switch-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.fm-switch-text{
  display:flex;
  flex-direction:column;
  gap:2px;
  flex:1;
  min-width:0;
}
.fm-switch-lbl{
  margin-bottom:0 !important;
  padding-top:0 !important;
}
.fm-switch-hint{
  font-size:11.5px;
  color:#64748b;
  font-weight:500;
  line-height:1.35;
}
.fm-switch{
  position:relative;
  display:inline-flex;
  flex-shrink:0;
  width:42px;
  height:24px;
}
.fm-switch-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
  z-index:2;
}
.fm-switch-track{
  position:absolute;
  inset:0;
  border-radius:99px;
  background:#cbd5e1;
  transition:background .18s ease;
  display:block;
}
.fm-switch-thumb{
  position:absolute;
  top:2px;
  left:2px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.06);
  transition:transform .2s cubic-bezier(.4,.2,.2,1);
  display:block;
}
.fm-switch-input:checked + .fm-switch-track{ background:#EA0649 }
.fm-switch-input:checked + .fm-switch-track .fm-switch-thumb{ transform:translateX(18px) }
.fm-switch-input:focus-visible + .fm-switch-track{
  box-shadow:0 0 0 3px rgba(158,13,54,.28);
}
.fm-switch-row:hover .fm-switch-input:not(:checked) + .fm-switch-track{
  background:#94a3b8;
}

/* — Chip base — subtle teal hover for both radio (.fm-chip-step) & multi (.fc),
     tap micro-animation, 1.5px border — */
.fm .fc,
.fm .fm-chip-step{
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    box-shadow .18s ease,
    transform .12s ease !important;
}
.fm .fc:hover:not(.on),
.fm .fm-chip-step:hover:not(.on){
  background:rgba(158,13,54,.07) !important;
  border-color:rgba(158,13,54,.32) !important;
  color:#0c1f38 !important;
}
.fm .fc:active,
.fm .fm-chip-step:active{ transform:scale(.97) }

/* — MULTI-SELECT chips (.fm-chips .fc.on) — teal fill + white check prefix
     so users can read "I picked these" at a glance. Higher specificity than
     the .fc.on !important navy default. — */
.fm-chips .fc.on{
  background:#EA0649 !important;
  border-color:#EA0649 !important;
  color:#fff !important;
  box-shadow:0 2px 8px rgba(158,13,54,.28), 0 0 0 1px rgba(158,13,54,.1) !important;
  padding-left:30px !important;
  position:relative !important;
}
.fm-chips .fc.on::before{
  content:"";
  position:absolute;
  left:11px; top:50%;
  width:11px; height:6px;
  border-left:1.8px solid #fff;
  border-bottom:1.8px solid #fff;
  transform:translateY(-72%) rotate(-45deg);
}
/* Square 8-direction exposure chips keep the symmetric look — no check prefix */
.fm-chips-sq .fc.on{ padding-left:7px !important }
.fm-chips-sq .fc.on::before{ content:none !important }

/* — Range slider — slimmer thumb, navy border, soft teal track — */
.fm .pd-slider-wrap{ margin:6px 4px 16px !important }
.fm .pd-slider-track{ height:4px !important; background:#e2e8f0 !important }
.fm .pd-slider-fill{ height:4px !important; background:#EA0649 !important; box-shadow:none !important }
.fm .pd-slider::-webkit-slider-thumb{
  width:20px !important; height:20px !important;
  border:2px solid #0c1f38 !important;
  background:#fff !important;
  box-shadow:0 2px 6px rgba(11,31,56,.18) !important;
}
.fm .pd-slider::-webkit-slider-thumb:hover{
  box-shadow:0 3px 10px rgba(11,31,56,.24), 0 0 0 6px rgba(158,13,54,.12) !important;
}
.fm .pd-slider::-moz-range-thumb{
  width:20px !important; height:20px !important;
  border:2px solid #0c1f38 !important;
  background:#fff !important;
  box-shadow:0 2px 6px rgba(11,31,56,.18) !important;
}

/* — Min/Max number inputs — soft inset, italic placeholder, teal focus ring — */
.fm .fm-inp{
  border-radius:10px !important;
  border:1.5px solid #e2e8f0 !important;
  background:#fafbfc !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  letter-spacing:.1px !important;
  box-shadow:inset 0 1px 2px rgba(11,31,56,.04) !important;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease !important;
}
.fm .fm-inp::placeholder{
  font-style:italic;
  color:#94a3b8;
  font-weight:400;
}
.fm .fm-inp:focus{
  background:#fff !important;
  border-color:#EA0649 !important;
  box-shadow:0 0 0 3px rgba(158,13,54,.16), inset 0 1px 2px rgba(11,31,56,.04) !important;
  outline:none !important;
}

/* — Period (Listed In) year chips — make the dense 14-cell grid breathe — */
.fm-period-years{
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0,1fr)) !important;
  gap:6px !important;
  margin-top:8px !important;
}
.fm-period-years .fm-chip-step{ min-width:0 !important; width:100% !important }
@media (max-width:768px){
  .fm-period-years{ grid-template-columns:repeat(3, minmax(0,1fr)) !important }
}

/* — Sticky footer — subtle top shadow, blurred bg, premium CTA hierarchy:
     Reset (text link) < Save Search (outlined) < Show N Results (filled teal) — */
.fm-foot{
  padding:14px 24px calc(14px + env(safe-area-inset-bottom,0px)) !important;
  background:rgba(255,255,255,.96) !important;
  backdrop-filter:saturate(180%) blur(8px) !important;
  -webkit-backdrop-filter:saturate(180%) blur(8px) !important;
  box-shadow:0 -1px 0 #f1f5f9, 0 -8px 24px rgba(11,31,56,.06) !important;
  border-top:none !important;
  gap:14px !important;
  align-items:center !important;
}
@media (max-width:768px){
  .fm-foot{ padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px)) !important; gap:10px !important }
}

/* Reset → text link only (deemphasized) */
.fm-reset{
  flex:0 0 auto !important;
  min-width:0 !important;
  min-height:0 !important;
  padding:8px 4px !important;
  border:none !important;
  background:transparent !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.1px !important;
  border-radius:0 !important;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  transition:color .15s, text-decoration-color .15s !important;
}
.fm-reset:hover{
  border:none !important;
  color:#0c1f38 !important;
  text-decoration-color:#0c1f38;
  background:transparent !important;
}

/* Save Search → secondary outline (teal border, navy text) */
.fm-save-search{
  flex:0 1 auto !important;
  min-height:44px !important;
  padding:11px 18px !important;
  background:#fff !important;
  color:#0c1f38 !important;
  border:1.5px solid #EA0649 !important;
  border-radius:10px !important;
  font-size:13.5px !important;
  font-weight:600 !important;
  letter-spacing:.15px !important;
  transition:background .15s, color .15s, box-shadow .15s, transform .12s !important;
}
.fm-save-search:hover,.fm-save-search:active{
  background:rgba(158,13,54,.06) !important;
  color:#EA0649 !important;
  border-color:#EA0649 !important;
  box-shadow:0 2px 8px rgba(158,13,54,.18) !important;
}
.fm-save-search svg{ stroke-width:2.2 !important }

/* Show N Results → primary teal pill, slightly wider tracking */
.fm-apply{
  flex:1 1 auto !important;
  min-height:44px !important;
  padding:12px 22px !important;
  background:#EA0649 !important;
  color:#fff !important;
  border-radius:10px !important;
  font-size:14px !important;
  font-weight:600 !important;
  letter-spacing:.35px !important;
  box-shadow:0 4px 14px rgba(158,13,54,.32), 0 1px 2px rgba(158,13,54,.18) !important;
  transition:background .15s, box-shadow .18s, transform .12s !important;
}
.fm-apply:hover{
  background:#850b2e !important;
  box-shadow:0 6px 18px rgba(158,13,54,.4), 0 2px 4px rgba(158,13,54,.22) !important;
  transform:translateY(-1px);
}
.fm-apply:active{ transform:translateY(0) scale(.99) }
.fm-apply #fm-count, .fm-apply #fm-count-mob{
  display:inline-block;
  transition:transform .22s ease;
}
.fm-apply.is-counting #fm-count,
.fm-apply.is-counting #fm-count-mob{
  transform:scale(1.06);
}

@media (max-width:380px){
  .fm-foot{ padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px)) !important; gap:8px !important }
  .fm-save-search{ padding:10px 12px !important; font-size:12.5px !important }
  .fm-apply{ padding:11px 14px !important; font-size:13px !important }
}

/* — Mobile header — match desktop typography upgrade — */
.fm-mob-title{
  font-family:Georgia, var(--serif), serif !important;
  font-size:18px !important;
  font-weight:600 !important;
  letter-spacing:-.2px !important;
  color:#0c1f38 !important;
}
.fm-mob-clear{
  color:#475569 !important;
  font-weight:500 !important;
  font-size:13px !important;
  letter-spacing:.1px !important;
}
.fm-mob-clear:hover{ color:#0c1f38 !important }

/* — End v=438 filters modal polish — */

/* ═════════════════════════════════════════════════════════════════════════
   v=439 — SITE-WIDE TEAL-ACTIVE TOGGLE UNIFICATION + LISTING CARD POLISH
   Scope:
     A) Every toggle's "active/selected" state → brand teal #EA0649 filled,
        white text. Replaces a tangled mix (steel-blue status pills, navy
        view-toggle, white-pill teal-text tabseg, #EA0649 map-ctrl, etc.).
     B) Listing card modernization to match the pre-construction page
        aesthetic — lighter border, 16px radius, hover lift, serif price.
     C) Listing card meta row → icon + value layout (HouseSigma-style)
        replacing pipe-separated text. JS in 43-homepage-hero-preview-search.js
        builds .cmeta-item spans with inline SVGs; styled here.
     D) Map controls panel tightened (icon size, label size, panel width)
        per Scott's "elite-tier compact" spec.
   File-disjoint from toolbar / map-pin / ads / perf agents.
   ═════════════════════════════════════════════════════════════════════════ */

/* ───────── A · Site-wide teal-active treatment ───────── */

/* Status pill on listing cards — was steel-blue #4b94ba, now brand teal.
   Sale/Rent both use filled teal; Sold/Leased fade to muted slate. */
.cstatus-pill,
.cdg-status-pill,
.cstatus-pill-sale,
.cstatus-pill-rent{
  background:#EA0649 !important;
  color:#ffffff !important;
  box-shadow:0 1px 2px rgba(158,13,54,.2) !important;
  letter-spacing:.03em !important;
  font-weight:600 !important;
}
.cstatus-pill-sold,
.cstatus-pill-leased{
  background:#64748b !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

/* View toggle (List / Mixed / Map) — was navy active, now teal active. */
.cdg-vt-btn.on{
  background:#EA0649 !important;
  color:#ffffff !important;
  box-shadow:0 2px 8px rgba(158,13,54,.25) !important;
}
.cdg-vt-btn.on svg{ stroke:#ffffff !important }
.cdg-vt-btn.on:hover{ background:#850b2e !important; color:#ffffff !important }
.cdg-vt-btn.on:hover svg{ stroke:#ffffff !important }

/* Tab pills (Listings X / Buildings Y) — was white-bg/teal-text, now filled. */
.cdg-tabseg-btn.on{
  background:#EA0649 !important;
  color:#ffffff !important;
  box-shadow:0 2px 6px rgba(158,13,54,.25) !important;
  font-weight:600 !important;
}
.cdg-tabseg-btn.on .cdg-tabseg-count{
  color:#ffffff !important;
  font-weight:600 !important;
  opacity:.85;
}

/* For Sale / For Rent dropdown items — selected state teal. */
.type-dd-item.on{
  background:#EA0649 !important;
  color:#ffffff !important;
  font-weight:600 !important;
}
.type-dd-item.on .type-dd-sub{ color:rgba(255,255,255,.78) !important }

/* Map control panel active layer (Areas, Draw, Transit, Schools, Nearby)
   — unify #EA0649 → #EA0649 so brand teal is consistent everywhere. */
.map-ctrl-btn.on,
.map-ctrl-btn.map-ctrl-draw.on{
  background:#EA0649 !important;
  color:#ffffff !important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15), 0 2px 6px rgba(158,13,54,.2) !important;
}
.map-ctrl-btn.on:hover,
.map-ctrl-btn.map-ctrl-draw.on:hover{ background:#850b2e !important; color:#ffffff !important }
.mob-map-toolbar-btn.on,
.mob-map-toolbar-btn.on svg{ color:#EA0649 !important; stroke:#EA0649 !important }

/* Mobile bottom-nav active tab — unify #EA0649 → #EA0649. */
.bot-tab.active{ color:#EA0649 !important }
.bot-tab.active svg{ stroke:#EA0649 !important }
.bot-tab:focus-visible{ outline-color:#EA0649 !important }
.bot-tab-cta{ color:#EA0649 !important }
.bot-tab-cta svg{ stroke:#EA0649 !important }

/* More-Filters chip-stepper (radio) — Scott Phase 2: every toggle = teal active.
   v=438 left .fm-chip-step.on navy as differentiator vs multi-select; that
   distinction now drops in favor of brand consistency. Multi-select chips
   still carry the white check prefix for differentiation. */
.fm .fm-chip-step.on,
.fm-chip-step.on{
  background:#EA0649 !important;
  color:#ffffff !important;
  border-color:#EA0649 !important;
  box-shadow:0 2px 8px rgba(158,13,54,.25) !important;
  font-weight:600 !important;
}
.fm-period-years .fm-chip-step.on{
  background:#EA0649 !important;
  border-color:#EA0649 !important;
  color:#ffffff !important;
}

/* Sort menu — visually mark the current selection. JS at doSort() tags the
   item with .on via the small hook in 38-comparable-sales.js (added below
   in next deploy iteration) but the CSS hook lands now so the style is
   ready and the dropdown still degrades gracefully if no .on is set. */
.sort-menu-item.on{
  background:rgba(158,13,54,.08) !important;
  color:#0c1f38 !important;
  font-weight:600 !important;
  position:relative;
}
.sort-menu-item.on::before{
  content:"";
  position:absolute;
  left:5px; top:50%;
  width:3px; height:60%;
  background:#EA0649;
  border-radius:2px;
  transform:translateY(-50%);
}

/* Compare pill on listing card — already teal; just ensure brand exact color. */
.card-cmp-btn.on{ background:#EA0649 !important; border-color:#EA0649 !important }
.card-cmp-btn.on:hover{ background:#850b2e !important; border-color:#850b2e !important }

/* Save Search saved-state confirmation (when search is active). */
.cdg-save-search.saved,
.cdg-save-search.on{
  background:#EA0649 !important;
  color:#ffffff !important;
  box-shadow:0 2px 8px rgba(158,13,54,.32) !important;
}

/* ───────── B · Listing card modernization (precon-tier polish) ───────── */
/* Pre-cons card uses 1px #eef1f5 border + soft shadow + 16-20px radius +
   serif display title. Pull the same DNA into .card while keeping the
   listing layout (photo / status / price / address / meta / mls). */

.card{
  border:1px solid #eef1f5 !important;
  border-radius:14px !important;
  box-shadow:0 1px 3px rgba(11,37,69,.04), 0 4px 16px rgba(11,37,69,.04) !important;
  transition:transform .2s cubic-bezier(.2,.8,.2,1),
             box-shadow .2s ease,
             border-color .2s ease !important;
}
.card:hover{
  transform:translateY(-2px);
  border-color:#dde6ee !important;
  box-shadow:0 6px 24px rgba(11,37,69,.10), 0 2px 6px rgba(11,37,69,.05) !important;
}
.card.active{
  border-color:#EA0649 !important;
  box-shadow:0 0 0 2px rgba(158,13,54,.18), 0 6px 24px rgba(11,37,69,.10) !important;
}
/* Photo top corners match new 14px radius. */
.card .ci{ border-radius:14px 14px 0 0 !important }

/* Price — bigger, slight kerning, navy. Editorial weight without going serif
   so the price stays readable in dense grids. */
.cprice{
  font-size:25px !important;
  font-weight:700 !important;
  letter-spacing:-.6px !important;
  line-height:1.05 !important;
  color:#0c1f38 !important;
}
@media (max-width:600px){
  .cprice{ font-size:22px !important; letter-spacing:-.4px !important }
}

/* Address — slightly heavier so it reads as the secondary line. */
.ca{
  font-size:13.5px !important;
  font-weight:500 !important;
  color:#334155 !important;
  letter-spacing:.05px !important;
}

/* v=484j-pill — condos.ca-style "X day(s) on site" sage/teal pill.
   Sits inline with the .cstatus-pill-{sale,rent} on row 1 of the card
   body. Sage tint background + brand-teal text + rounded full. Reads
   as a peer pill to the status chip, not a subordinate caption. */
.ctime{
  display:inline-flex !important;
  align-items:center !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:.1px !important;
  color:#7a0c2b !important;
  background:#dff2ec !important;
  padding:4px 10px !important;
  border-radius:9999px !important;
  white-space:nowrap !important;
}

/* MLS line — even subtler so the data feels editorial, not utility. */
.cmls-row{
  font-size:11px !important;
  color:#94a3b8 !important;
  font-weight:500 !important;
  letter-spacing:.04em !important;
  padding-top:2px;
}

/* ───────── C · Listing card meta row — icon + value layout ───────── */

.cmeta{
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:4px 10px !important;
  margin:6px 0 8px !important;
  padding:0 !important;
  font-size:12.5px !important;
  color:#475569 !important;
  font-weight:500 !important;
  letter-spacing:.02em !important;
  line-height:1.2;
}
.cmeta-sep{ display:none !important }
.cmeta-item{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  white-space:nowrap;
  color:inherit;
  font-variant-numeric:tabular-nums;
}
.cmeta-icon{
  width:13px !important;
  height:13px !important;
  flex-shrink:0;
  color:#64748b !important;
  stroke-width:1.8;
}
/* v=484p — Phosphor glyph sizing for the same .cmeta-icon class when it's
   an <i> (icon font) instead of an <svg>. Font-size matches the SVG box,
   color matches the old stroke color, and align-self centers the glyph
   against the .cmeta-v number baseline. */
i.cmeta-icon{
  font-size:14px !important;
  width:auto !important;
  height:14px !important;
  line-height:1 !important;
  color:#64748b !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
@media (max-width:600px){
  i.cmeta-icon{ font-size:13px !important;height:13px !important }
}
.cmeta-v{
  color:#0c1f38;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:0;
}
.cmeta-item-sqft .cmeta-v{
  font-variant-numeric:normal;
}
@media (max-width:600px){
  .cmeta{ gap:4px 8px !important; font-size:12px !important }
  .cmeta-v{ font-size:12px }
  .cmeta-icon{ width:12px !important; height:12px !important }
}

/* ───────── D · Map controls panel — elite-tier compact ───────── */
/* Current panel: 42x42 buttons stacked vertically with text labels under
   each icon. Tighten on both desktop and mobile per spec. */

.map-ctrls{
  border-radius:12px !important;
  box-shadow:0 6px 20px rgba(12,31,56,.10),
             0 1px 3px rgba(12,31,56,.06) !important;
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(11,37,69,.06) !important;
}
.map-ctrl-btn{
  width:36px !important;
  height:36px !important;
  border-bottom:1px solid rgba(11,37,69,.04) !important;
}
.map-ctrl-btn svg{
  width:16px !important;
  height:16px !important;
  stroke-width:1.8 !important;
}
.map-ctrl-zoom-group .map-ctrl-btn{
  width:32px !important;
  height:32px !important;
}
.map-ctrl-zoom-group{
  border-radius:10px !important;
  box-shadow:0 6px 20px rgba(12,31,56,.10),
             0 1px 3px rgba(12,31,56,.06) !important;
  -webkit-backdrop-filter:saturate(180%) blur(10px);
  backdrop-filter:saturate(180%) blur(10px);
  background:rgba(255,255,255,.92) !important;
  border:1px solid rgba(11,37,69,.06) !important;
}

/* Mobile map toolbar — match the tightening pattern. */
.mob-map-toolbar{
  width:48px !important;
  padding:3px !important;
  border-radius:12px !important;
}
.mob-map-toolbar-btn{
  font-size:9px !important;
  letter-spacing:.04em !important;
  min-height:40px !important;
  padding:5px 2px !important;
  border-radius:8px !important;
}
.mob-map-toolbar-btn svg{
  width:18px !important;
  height:18px !important;
}

/* Apple-Maps-tier drawing experience — solid teal stroke + soft fill. */
.mapboxgl-canvas.cdg-drawing,
body.draw-active .mapboxgl-canvas{ cursor:crosshair !important }

/* — End v=439 site-wide teal + listing card polish — */

/* ═════════════════════════════════════════════════════════════════════════
   v=440 — SORT PILL & DROPDOWN — condos.ca pattern
   Trigger shows the current sort ("Sort by Date (Newest)"); when a non-
   default sort is active the trigger goes teal. Dropdown panel is white,
   soft shadow, 10px radius; rows 12px padding, hover #f5f7f9, the active
   row has a 2px teal left rail. Same elevation/transition family as the
   filter chips so the sort pill reads as a sibling.
   ═════════════════════════════════════════════════════════════════════════ */

/* Trigger — light gray bg, teal text when an active (non-default) sort applied. */
.sort-link{
  gap:6px !important;
  font-size:13.5px !important;
  font-weight:500 !important;
  background:#f5f7f9 !important;
  border:1px solid #e5e9ed !important;
  color:#0c1f38 !important;
  padding:7px 12px !important;
  min-height:36px !important;
  letter-spacing:.05px !important;
  transition:background .15s, border-color .15s, color .15s, box-shadow .15s !important;
}
.sort-link:hover{
  background:#eef1f5 !important;
  border-color:#cbd5e1 !important;
  color:#0c1f38 !important;
}
.sort-link svg{ width:14px; height:14px; flex-shrink:0; stroke-width:2 }
.sort-link .sort-link-chev{ width:14px; height:14px; opacity:.6 }
.sort-link .sort-link-lead{ color:#64748b; font-weight:500 }
.sort-link .sort-link-lbl{ color:#0c1f38; font-weight:600 }

/* Active state — teal text + teal icon when current sort != default. */
.sort-link.sort-active{
  color:#EA0649 !important;
  border-color:#EA0649 !important;
  background:rgba(158,13,54,.06) !important;
}
.sort-link.sort-active svg{ stroke:#EA0649 !important }
.sort-link.sort-active .sort-link-lead{ color:#EA0649 !important }
.sort-link.sort-active .sort-link-lbl{ color:#EA0649 !important }

/* Dropdown panel — condos.ca pattern: white card, soft shadow, 10px radius. */
.sort-menu{
  min-width:240px;
  background:#ffffff !important;
  border:1px solid #eef1f5 !important;
  border-radius:10px !important;
  box-shadow:0 4px 24px rgba(12,31,56,.08), 0 1px 3px rgba(12,31,56,.04) !important;
  padding:6px 0 !important;
  margin-top:6px;
  overflow:hidden;
}
.sort-menu-item{
  padding:12px 18px 12px 16px !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:#0c1f38 !important;
  cursor:pointer;
  transition:background .12s, color .12s, padding-left .12s !important;
  border-left:2px solid transparent !important;
  letter-spacing:.05px !important;
}
.sort-menu-item:hover{
  background:#f5f7f9 !important;
  color:#0c1f38 !important;
}

/* Active row — 2px teal left rail + faint teal tint. Overrides the v=439
   default-style hook so the row reads at a glance. */
.sort-menu-item.on{
  background:rgba(158,13,54,.06) !important;
  color:#EA0649 !important;
  font-weight:600 !important;
  border-left-color:#EA0649 !important;
  position:static !important;
  padding-left:14px !important;
}
.sort-menu-item.on::before{ content:none !important }
.sort-menu-item.on:hover{ background:rgba(158,13,54,.10) !important }

/* Mobile bottom-sheet variant — keep the v135 sheet treatment but adopt the
   v=440 row styling so option labels match the desktop dropdown. */
@media(max-width:768px){
  .sort-menu-item{
    padding:14px 20px !important;
    font-size:15px !important;
    border-bottom:1px solid #f4f6f8 !important;
    border-left:2px solid transparent !important;
  }
  .sort-menu-item.on{ padding-left:18px !important }
  .sort-link{ font-size:13px !important; padding:6px 10px !important }
  .sort-link .sort-link-lead{ display:none }
}

/* Mobile inline pill — id="mob-inline-sort" mirrors the sort label too,
   driven by 41-search-overlay's doSort update path. Keep the trigger
   compact; show only the sort label, not the "Sort by" lead-in. */
.mob-inline-pill#mob-inline-sort .mob-inline-pill-lbl{ font-weight:600 }

/* — End v=440 sort pill + dropdown — */

/* ═════════════════════════════════════════════════════════════════════════
   v=441 — Freshness badge unified to brand navy weight 600.
   Scott locked: navy #0c1f38 + 600 weight, no tier-based variation. Applies
   to every "X Ago" / "Just Listed" timestamp surface:
     • Listing card .ctime
     • Listing detail .v307-pill-days (already navy; bumped to weight 600)
     • Similar listings carousel (reuses .ctime selector)
     • Building detail listing rows (reuses .ctime selector)
   .mp-days (map popup chip with dark bg + white text) keeps its inverted
   treatment — the visual hierarchy already pops there; navy text would be
   invisible on the navy chip bg.
   ═════════════════════════════════════════════════════════════════════════ */
.ctime,
.v307-pill-days,
.cdg-time-pill{
  color:#0c1f38 !important;
  font-weight:600 !important;
  letter-spacing:.01em !important;
}

/* — End v=441 freshness badge — */

/* ═════════════════════════════════════════════════════════════════════════
   v=442 — Collapse long filter lists behind native <details> disclosures.
   Scope: the "Listed In" year-by-year grid (24 buttons, 2026 … 2003) which
   was visually overwhelming. The 6 relative time pills (Last 24 hrs / Last
   7 days / etc.) stay inline; the year grid hides behind a "Choose specific
   year" disclosure that auto-opens when a year is picked (setPeriodFilter
   in 41-search-overlay.js).
   Native <details> chosen over a JS toggle: zero new JS, semantic, a11y-
   correct out of the box.
   ═════════════════════════════════════════════════════════════════════════ */

.fm-period-disclosure{
  margin-top:6px;
}
.fm-period-disclosure > summary{
  display:inline-flex;
  align-items:center;
  gap:4px;
  cursor:pointer;
  font-size:12.5px;
  font-weight:500;
  color:#EA0649;
  letter-spacing:.02em;
  padding:4px 0;
  list-style:none;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
  outline:none;
  transition:color .15s;
}
.fm-period-disclosure > summary:hover{
  color:#850b2e;
  text-decoration:underline;
  text-underline-offset:3px;
}
.fm-period-disclosure > summary:focus-visible{
  outline:2px solid #EA0649;
  outline-offset:2px;
  border-radius:4px;
}
/* Hide the default triangle (WebKit + standards). */
.fm-period-disclosure > summary::-webkit-details-marker{ display:none }
.fm-period-disclosure > summary::marker{ content:'' }
/* Custom inline chevron — rotates 180deg when open. */
.fm-period-disclosure > summary::after{
  content:'';
  display:inline-block;
  width:10px; height:10px;
  margin-left:2px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:rotate(45deg);
  transition:transform .18s;
  position:relative;
  top:-2px;
}
.fm-period-disclosure[open] > summary::after{
  transform:rotate(-135deg);
  top:1px;
}
/* Swap label text between closed and open states. */
.fm-period-toggle-lbl-open{ display:none }
.fm-period-disclosure[open] .fm-period-toggle-lbl-closed{ display:none }
.fm-period-disclosure[open] .fm-period-toggle-lbl-open{ display:inline }
/* Year grid spacing once revealed. */
.fm-period-disclosure[open] .fm-period-years{ margin-top:8px }

/* — End v=442 disclosure pattern — */

/* ═════════════════════════════════════════════════════════════════════════
   v=444 — Inline filter chips: X-to-clear on active Price + Beds pills.
   Pattern: the X is an in-chip span that only renders when the parent
   .cdg-chip carries .has-value (set by updateChipLabels when fS has a
   non-default value for that filter). Clicking the X stops propagation
   so the chip's onclick (toggle popover) doesn't fire — the click clears
   the filter via window.clearPriceChip / window.clearBedsChip.
   ═════════════════════════════════════════════════════════════════════════ */
.cdg-chip-x{
  display:none;
  width:20px; height:20px;
  margin:0 0 0 6px;
  position:relative;            /* v=529 — anchor invisible hit-target ::before */
  border-radius:50%;
  background:rgba(158,13,54,.18);
  color:#0c1f38;
  font-size:14px;
  line-height:16px;
  text-align:center;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  font-family:inherit;
  font-weight:600;
  letter-spacing:0;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s, color .15s, transform .12s;
}
/* v=529 — invisible padding ring extends the X's hit-target beyond its
   20px visual circle so mobile taps land reliably without enlarging
   the visual. Sits behind the icon glyph. */
.cdg-chip-x::before{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius:50%;
}
.cdg-chip-x:hover{
  background:#0c1f38;
  color:#fff;
}
.cdg-chip-x:active{ transform:scale(.88) }
.cdg-chip-x:focus-visible{ outline:2px solid #EA0649; outline-offset:2px }
.cdg-chip.has-value .cdg-chip-x{ display:inline-flex }
/* When the X shows, the chevron becomes redundant — hide it on active pills. */
.cdg-chip.has-value .cdg-chip-chev{ display:none }

/* — End v=444 chip X-to-clear — */
/* ════════════════════════════════════════════════════════════════════
   v=440 — MAP ELITE POLISH
   Desktop tool pill stack + mobile mob-map-toolbar + pin states +
   draw / hood polygons. Tightens spacing, refines glass + shadow,
   pulls labels to 10px, lifts the selected/hover states to a tier
   that reads alongside Compass / Knight Frank / Zillow Premier.
   ════════════════════════════════════════════════════════════════════ */

/* ── DESKTOP TOOL PILL STACK ─────────────────────────────────────── */
/* Slimmer 60px column, glass-card background, single soft shadow,
   no internal dividers between the tools — let the hover backplate
   carry the affordance. */
.map-ctrl-pill-stack{
  width:60px !important;
  background:rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
  box-shadow:0 4px 24px rgba(12,31,56,0.08), 0 1px 2px rgba(12,31,56,0.04) !important;
  border:1px solid rgba(12,31,56,0.06) !important;
  border-radius:14px !important;
}
.map-ctrl-pill-stack .map-ctrl-pills{
  padding:8px 4px !important;
  gap:8px !important;
  width:auto !important;
}
.map-ctrl-pill{
  padding:4px 2px !important;
  gap:5px !important;
}
.map-ctrl-pill svg{
  width:18px !important; height:18px !important;
  padding:9px !important;                  /* 18 + 9*2 = 36px circle */
  background-color:#f1f5f9;
  border-radius:50%;
  box-sizing:content-box;
  color:#0c1f38 !important;
  transition:background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out, transform .2s ease-out;
}
.map-ctrl-pill > span{
  font-size:10px !important;
  letter-spacing:.04em !important;
  font-weight:500 !important;
  color:#0c1f38 !important;
  margin-top:2px !important;
  line-height:1.1;
}
.map-ctrl-pill:hover svg{
  background-color:#e6ebf2 !important;
  transform:scale(1.04);
}
.map-ctrl-pill.on svg{
  background-color:#EA0649 !important;
  color:#ffffff !important;
  box-shadow:0 0 0 4px rgba(158,13,54,0.18), 0 2px 8px rgba(158,13,54,0.22) !important;
}
.map-ctrl-pill.on > span{
  color:#EA0649 !important;
  font-weight:600 !important;
}

/* Zoom +/- — separate visual group below tools, 28×28, thin border. */
.map-ctrl-pill-stack .map-ctrl-zoom-group{
  padding:6px 4px !important;
  gap:4px !important;
  border-top:1px solid rgba(12,31,56,0.06);
}
.map-ctrl-pill.map-ctrl-zoom-pill{
  height:28px !important;
  width:28px !important;
  min-width:28px !important;
  margin:0 auto !important;
  font-size:16px !important;
  font-weight:300 !important;
  background:#ffffff !important;
  border:1px solid rgba(12,31,56,0.10) !important;
  border-radius:7px !important;
  color:#0c1f38 !important;
  transition:background-color .15s ease-out, border-color .15s ease-out;
}
.map-ctrl-pill.map-ctrl-zoom-pill:hover{
  background:#f1f5f9 !important;
  border-color:rgba(12,31,56,0.18) !important;
}

/* ── MOBILE TOOLBAR PILL ─────────────────────────────────────────── */
@media (max-width: 768px){
  .mob-map-toolbar{
    width:56px;
    background:rgba(255,255,255,0.92);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    backdrop-filter:saturate(180%) blur(12px);
    box-shadow:0 4px 24px rgba(12,31,56,0.08), 0 1px 2px rgba(12,31,56,0.04);
    border:1px solid rgba(12,31,56,0.06);
    border-radius:14px;
    padding:6px 4px;
    gap:6px;
  }
  .mob-map-toolbar-btn{
    font-size:10px;
    letter-spacing:.04em;
    font-weight:500;
    color:#0c1f38;
    gap:3px;
    padding:2px 2px;
    min-height:0;
  }
  .mob-map-toolbar-btn svg{
    width:14px; height:14px;
    padding:9px;                            /* 14 + 9*2 = 32px circle */
    box-sizing:content-box;
    background-color:#f1f5f9;
    color:#0c1f38;
    border-radius:50%;
    transition:background-color .2s ease-out, color .2s ease-out, box-shadow .2s ease-out;
  }
  .mob-map-toolbar-btn.on{ color:#EA0649; font-weight:600 }
  .mob-map-toolbar-btn.on svg{
    background-color:#EA0649;
    color:#ffffff;
    box-shadow:0 0 0 4px rgba(158,13,54,0.18), 0 2px 8px rgba(158,13,54,0.22);
  }
  /* Areas tool (navy active per existing 3-state palette) — preserve */
  .mob-map-toolbar-btn.areas-tool-btn.on svg{
    background-color:#0c1f38;
    box-shadow:0 0 0 4px rgba(12,31,56,0.18), 0 2px 8px rgba(12,31,56,0.22);
  }
  /* Zoom group: separated, thin border, 28×28 buttons */
  .mob-map-toolbar-zoom{
    border:none;
    background:transparent;
    margin-top:4px;
    padding-top:4px;
    border-top:1px solid rgba(12,31,56,0.06);
    border-radius:0;
    gap:4px;
  }
  .mob-map-toolbar-zoom .mob-map-toolbar-btn{
    min-height:28px;
    height:28px;
    padding:0;
    margin:0 auto;
    width:28px;
    border:1px solid rgba(12,31,56,0.10);
    border-radius:7px;
    background:#fff;
    font-size:16px;
    font-weight:300;
    color:#0c1f38;
  }
  .mob-map-toolbar-zoom .mob-map-toolbar-btn:not(:last-child){ border-bottom:1px solid rgba(12,31,56,0.10) }
}

/* ── PIN STATES — single $price + N-unit cluster ─────────────────── */
/* Spec: 13px monospace digits w=600, tight kern, soft shadow, 1.1x hover
   with teal halo, 1.15x selected filled teal with white text, 200ms ease-out. */
.v69-pin-single{
  font-size:13px;
  font-weight:600;
  letter-spacing:-.3px;
  font-feature-settings:"tnum" 1, "lnum" 1;
  font-variant-numeric:tabular-nums;
  box-shadow:0 2px 6px rgba(12,31,56,0.15), 0 0 0 1px rgba(255,255,255,0.5);
  transition:transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out;
}
.v69-pin-single:hover{
  transform:scale(1.1);
  box-shadow:0 0 0 4px rgba(158,13,54,0.20), 0 4px 12px rgba(12,31,56,0.20);
  z-index:5;
}
.v69-pin-single.sel{
  transform:scale(1.15);
  background:#EA0649;
  color:#fff;
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(158,13,54,0.30), 0 8px 22px rgba(158,13,54,0.40);
  z-index:4;
}
.v69-pin-cluster{
  transition:transform .2s ease-out, box-shadow .2s ease-out, background-color .2s ease-out;
  animation:cdg-pin-pop .2s ease-out;
  box-shadow:0 2px 8px rgba(12,31,56,0.18), 0 0 0 1px rgba(255,255,255,0.5);
}
.v69-pin-cluster:hover{
  transform:scale(1.1);
  box-shadow:0 0 0 4px rgba(158,13,54,0.20), 0 6px 16px rgba(12,31,56,0.24);
  z-index:5;
}
.v69-pin-cluster.sel{
  transform:scale(1.15);
  background:#EA0649;
  box-shadow:0 0 0 4px rgba(158,13,54,0.30), 0 8px 22px rgba(158,13,54,0.40);
}
@keyframes cdg-pin-pop{
  0%{ transform:scale(.7); opacity:0 }
  60%{ transform:scale(1.06); opacity:1 }
  100%{ transform:scale(1); opacity:1 }
}

/* ── DRAW MODE CURSOR + CLOSE-TOOLTIP ────────────────────────────── */
.map-pane.drawing #map,
.map-pane.drawing .mapboxgl-canvas-container,
.map-pane.drawing .mapboxgl-canvas{
  cursor:crosshair !important;
}
.cdg-draw-close-tip{
  position:fixed; z-index:560;
  background:rgba(12,31,56,0.94);
  color:#fff;
  font-size:11.5px;
  font-weight:500;
  letter-spacing:.02em;
  padding:5px 10px;
  border-radius:7px;
  pointer-events:none;
  box-shadow:0 4px 14px rgba(12,31,56,0.24);
  transform:translate(14px, 14px);
  white-space:nowrap;
  opacity:.95;
}

/* — End v=440 map elite polish — */

/* ═══════════════════════════════════════════════════════════════════════
   v=452 — mobile inline-pill clipping fix (Bug 3 follow-up to v=449d-7).
   The Price pill is hidden via display:none (rule near L11352), leaving
   only the Type pill inside a `grid-template-columns:1fr 1fr` track. The
   Type pill rendered into column 1 only — half the row — and a small drop
   in available width plus the existing right-pad pushed "For Rent" past
   the visible edge ("For Ren" clip on iPhone 12/13 mini and similar).
   Collapse the grid to a single auto-fit track on mobile so the only
   visible pill takes the full row, with extra horizontal headroom.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  .mob-inline-pills{grid-template-columns:1fr !important}
  .mob-inline-pill{padding:0 14px !important;font-size:13px !important;letter-spacing:-.15px !important;min-width:0 !important;max-width:none !important}
  .mob-inline-pill .mob-inline-pill-lbl{white-space:nowrap !important;overflow:visible !important;text-overflow:clip !important;flex:1 1 auto !important;min-width:0 !important}
  .mob-inline-pill .mob-inline-pill-chev{flex:0 0 auto !important;margin-left:6px !important}
}


/* v=458 — hood hover preview card */
#cdg-hood-hover{
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:10px;
  box-shadow:0 10px 30px rgba(12,31,56,0.16),0 2px 6px rgba(12,31,56,0.06);
  padding:10px 12px 8px;
  min-width:200px;
  max-width:240px;
  font-family:system-ui,-apple-system,"DM Sans",sans-serif;
  font-size:12px;
  line-height:1.35;
  color:#0c1f38;
  visibility:hidden;
  opacity:0;
  transition:opacity .12s ease-out;
}
#cdg-hood-hover .cdg-hh-title{font-weight:700;font-size:13px;margin-bottom:6px;letter-spacing:-.1px;color:#0c1f38}
#cdg-hood-hover .cdg-hh-row{display:flex;justify-content:space-between;gap:10px;padding:1px 0}
#cdg-hood-hover .cdg-hh-k{color:#64748b}
#cdg-hood-hover .cdg-hh-v{color:#0c1f38;font-weight:600}
#cdg-hood-hover .cdg-hh-cta{margin-top:8px;padding-top:6px;border-top:1px solid #f1f5f9;color:#EA0649;font-weight:600;font-size:11px}

/* ═══════════════════════════════════════════════════════════════════════════
   v=536d Bucket J — "X day(s) on site" .cdays-pill on listing preview cards.
   Sits beside the For Sale / For Rent status pill in .cstatus-row. Sage-mint
   pill matching condos.ca's search-card pattern. Applies regardless of
   MlsStatus, so it works for both for-sale and for-rent listings via
   fmtDays(OriginalEntryTimestamp || ListingContractDate).
   ═══════════════════════════════════════════════════════════════════════════ */
.cstatus-row > .cdays-pill,
.cb .cstatus-row .cdays-pill{
  display:inline-flex !important;
  align-items:center !important;
  font-size:12px !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
  color:#7a0c2b !important;
  background:#dff2ec !important;
  padding:3px 10px !important;
  border-radius:9999px !important;
  white-space:nowrap !important;
  line-height:1.4 !important;
  font-family:inherit !important;
  text-transform:none !important;
}
@media(max-width:480px){
  .cstatus-row > .cdays-pill,
  .cb .cstatus-row .cdays-pill{ font-size:11.5px !important; padding:3px 9px !important; }
}
.cb > .cstatus-row{
  justify-content:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484j-skel — restored skeleton UI for first-paint perception.
   Originally v=457-perf (commit 8b25f09); removed somewhere in the
   v=460-v=480 churn. The shimmer placeholders in #cards / #map give
   the search route an "instantly loaded" feel — gray pulsing card
   silhouettes paint immediately on cold load; real cards replace them
   in-place when renderCards() writes innerHTML, no flash.
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes cdg-skel-shim{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.cdg-skel{
  background:linear-gradient(90deg,#eef1f4 0%,#e1e5ea 50%,#eef1f4 100%);
  background-size:200% 100%;
  animation:cdg-skel-shim 1.4s ease-in-out infinite;
  border-radius:8px;
}
.cdg-skel-card{
  background:#fff;
  border:1px solid #eef2f5;
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cdg-skel-card .cdg-skel-img{
  aspect-ratio:4/3;
  width:100%;
  border-radius:0;
}
.cdg-skel-card .cdg-skel-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px}
.cdg-skel-card .cdg-skel-line{height:14px;border-radius:6px}
.cdg-skel-card .cdg-skel-line.lg{height:18px;width:62%}
.cdg-skel-card .cdg-skel-line.sm{height:12px;width:46%}
.cdg-skel-card .cdg-skel-line.xs{height:12px;width:30%}
/* Map skeleton — absolute-fill shimmer overlay inside #map. Sits BEHIND
   the Mapbox canvas (z-index:0); the canvas paints over it once tiles
   load, so the user never sees the static sage placeholder image as
   the only "loading" cue. */
.cdg-skel-map{
  position:absolute;inset:0;
  background:linear-gradient(90deg,#e6ebef 0%,#d9dfe4 50%,#e6ebef 100%);
  background-size:200% 100%;
  animation:cdg-skel-shim 1.6s ease-in-out infinite;
  z-index:0;
  pointer-events:none;
}
#map{position:relative}
#map.cdg-map-ready .cdg-skel-map{ opacity:0; transition:opacity 240ms ease-out; pointer-events:none }
@media (prefers-reduced-motion: reduce){
  .cdg-skel,.cdg-skel-map{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484k-final — Scott's final spec for the FOR RENT + "X on site" pair
   on listing detail: ONLY visible at .v307-status-pills (above the
   price, inside .v112-price-head — `flex-direction:column-reverse`
   stacks pills above price). The other three duplicate locations are
   suppressed:
     • .v112-status-row — under the breadcrumb (v=484j placement)
     • .m-status-row — below the Listing Details table, above Rent vs
       Buy (was the v=484k-pills-below placement)
     • .v114-status-row — older row above the Listing Details table
   Single source of truth = .v307-status-pills. The hidden selectors
   still get populated by _v112Populate() so they stay in sync with
   the listing record; only their visible output is suppressed.
   Also restyle .v307-pill-status to the canonical brand-teal pill
   and .v307-pill-days to the sage "on site" pill — both match the
   card-side / map-popup pair so the visual language is consistent. */
.v112-status-row,
.m-status-row,
.v114-status-row{ display:none !important }

/* Override the legacy light-blue pill colour with brand teal. */
.v307-pill-status,
.v307-pill-status.sale,
.v307-pill-status.sold,
.v307-pill-status.leased,
.v307-pill-status.rent{
  background:#EA0649 !important;
  color:#ffffff !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  letter-spacing:.4px !important;
  text-transform:uppercase !important;
  padding:5px 12px !important;
  border-radius:9999px !important;
}
.v307-pill-status.sold      { background:#dc2626 !important }
.v307-pill-status.leased    { background:#d97706 !important }

/* Days pill — sage tint, deep-teal text, matches the card .ctime
   pill exactly. Override the legacy transparent-inline-text styling. */
.v307-pill-days{
  background:#dff2ec !important;
  color:#7a0c2b !important;
  padding:5px 12px !important;
  border-radius:9999px !important;
  font-weight:600 !important;
  font-size:12px !important;
  letter-spacing:.1px !important;
  text-align:left !important;
}
.v307-pill-days:empty{ display:none !important }

/* Row layout — pills sit LEFT-aligned (not space-between which pushed
   the days pill to the far right). Keep the column-reverse so they
   render above the price. */
.v307-status-pills{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  width:auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484k-elite — listing detail polish bundle (Scott final autonomy):
     • Breadcrumb compact 2-element format: building + "in" + city
     • Pill uniform sizing across cards / detail / map popup
     • Elite color palette: sage DOM pill #e8f3ef + deep teal #5e0c23,
       brand teal status #EA0649, rose-600 heart #e11d48
     • Stats row upgrade: bigger icons, numbers, labels + alignment
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Breadcrumb 3-element (Building in Hood, City) ─────────────────
   v=484o-bcrumb-3el — neighbourhood restored for SEO. Visible chain:
   bldg-link + "in" + hood-link + ", " + city-link. We still hide:
     • #v112-dist-link        — district adds clutter without SEO
       value (TRREB codes like "C01" don't read like user content)
     • the .v112-sep that comes AFTER #v112-dist-link — that's the
       comma between district and city. The comma after hood (BEFORE
       district) stays so the rendered chain reads "Hood, City". */
.v112-addr-sub #v112-dist-link,
.v112-addr-sub #v112-dist-link + .v112-sep{ display:none !important }

/* Hood link: teal like building (Scott's spec), not gray like city.
   Both primary clickable terms get the same teal-underlined treatment;
   city stays slate-secondary. */
.v112-addr-sub #v112-hood-link{
  color:#EA0649 !important;
  font-weight:500 !important;
  text-decoration:underline !important;
  text-decoration-color:currentColor !important;
  text-underline-offset:2px !important;
}
.v112-addr-sub #v112-hood-link:hover{ color:#7a0c2b !important }

.v112-addr-sub #v112-bldg-link{
  color:#EA0649 !important;
  font-weight:600 !important;
  text-decoration:none !important;
}
.v112-addr-sub #v112-bldg-link:hover{
  text-decoration:underline !important;
  color:#7a0c2b !important;
}
.v112-addr-sub #v112-city-link{
  color:#475569 !important;
  font-weight:500 !important;
  text-decoration:underline !important;
  text-decoration-color:#cbd5e1 !important;
  text-underline-offset:2px !important;
  transition:color .15s, text-decoration-color .15s;
}
.v112-addr-sub #v112-city-link:hover{
  color:#EA0649 !important;
  text-decoration-color:#EA0649 !important;
}
.v112-addr-sub .v112-in{ color:#94a3b8 !important; font-weight:400 !important }

/* ── DOM pill ("X on site") — uniform sage tint + deep teal text ─── */
/* v=484l-popup: dropped .v280-card-days from this rule — the popup
   card's photo container has overflow:hidden + a narrow 120px width,
   so a sage pill at bottom-left got clipped ("27 days on si..."). The
   popup days element is restored to its original full-width navy band
   styling below so text spans the whole photo and never truncates. */
.ctime,
.v307-pill-days,
.m-status-time.m-status-pill-time{
  display:inline-flex !important;
  align-items:center !important;
  background:#e8f3ef !important;
  color:#5e0c23 !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.1px !important;
  padding:6px 14px !important;
  border-radius:9999px !important;
  border:0 !important;
  box-shadow:none !important;
  white-space:nowrap !important;
  text-transform:none !important;
}
.v280-card-days{
  /* v=484l-popup: restored original navy footer band (pre-v=484j).
     Full-width bar at the bottom of the photo so text never clips
     against the 120px narrow photo container. */
  position:absolute !important;
  background:rgba(11,37,69,.92) !important;
  color:#fff !important;
  font-size:10.5px !important;
  font-weight:600 !important;
  letter-spacing:.1px !important;
  padding:3px 6px !important;
  border-radius:0 !important;
  text-align:center !important;
  backdrop-filter:blur(4px) !important;
  -webkit-backdrop-filter:blur(4px) !important;
  /* Full-width band: bottom:0, left:0, right:0 so text never clips
     against the 120px overflow:hidden photo container. */
  bottom:0 !important; left:0 !important; right:0 !important;
}

/* ── Status pill — listing DETAIL page only (Scott's locked spec) ──
   v=484l: blue-teal #4b94ba (Scott pixel-sampled the exact swatch).
   Scoped down from v=484k which also targeted .cstatus-pill (cards)
   and .m-status-pill (popup) — those surfaces have their own
   treatments and Scott explicitly said don't touch them. Card pills
   are hidden (status implied by view); map popup keeps its original
   styling. */
.v307-pill-status,
.v307-pill-status.sale,
.v307-pill-status.rent{
  background:#4b94ba !important;
  color:#ffffff !important;
  font-size:13px !important;
  font-weight:500 !important;
  letter-spacing:.3px !important;
  text-transform:uppercase !important;
  padding:6px 14px !important;
  border-radius:9999px !important;
}
.v307-pill-status.sold     { background:#dc2626 !important }
.v307-pill-status.leased   { background:#d97706 !important }

/* ── Listing CARDS — v=484l-revised: Scott walked back "no pill on
   cards". The For Sale / For Rent pill stays, restyled to the same
   blue #4b94ba used on the listing detail status pill. DOM text
   ("X on site") stays plain gray (no pill chrome). */
#cards .card .cstatus-pill,
.cards-mixed .cstatus-pill,
.cards-list .cstatus-pill,
#cards .card .cstatus-pill-sale,
#cards .card .cstatus-pill-rent,
.cards-mixed .cstatus-pill-sale,
.cards-mixed .cstatus-pill-rent{
  display:inline-flex !important;
  align-items:center !important;
  background:#4b94ba !important;
  color:#ffffff !important;
  font-size:12px !important;
  font-weight:500 !important;
  letter-spacing:.3px !important;
  text-transform:uppercase !important;
  padding:4px 10px !important;
  border-radius:9999px !important;
  border:0 !important;
  box-shadow:none !important;
}
#cards .card .cstatus-pill-sold,
.cards-mixed .cstatus-pill-sold{ background:#dc2626 !important }
#cards .card .cstatus-pill-leased,
.cards-mixed .cstatus-pill-leased{ background:#d97706 !important }
#cards .card .ctime,
.cards-mixed .ctime,
.cards-list .ctime{
  background:transparent !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:500 !important;
  padding:0 !important;
  border-radius:0 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  box-shadow:none !important;
  border:0 !important;
}

/* ── Heart icon (top-right) — rose-600 #e11d48 ─────────────────── */
html body .v112-page-fav{
  color:#e11d48 !important;
  right:60px !important;   /* sits 12px left of share (44 - 32 padding = ~12) */
}
html body .v112-page-fav svg{
  stroke:currentColor !important;
  stroke-width:2 !important;
  width:26px !important; height:26px !important;
  fill:none !important;
}
html body .v112-page-fav.on svg,
html body .v112-page-fav[aria-pressed="true"] svg{ fill:currentColor !important }

/* ── Share icon (top-right) — navy, stroke 1.75 ────────────────── */
html body .v112-page-share{
  color:#0c1f38 !important;
  right:14px !important;
}
html body .v112-page-share svg{
  stroke:currentColor !important;
  stroke-width:1.75 !important;
  width:26px !important; height:26px !important;
  fill:none !important;
}

/* ── Stats row + price grouping — sized to match condos.ca ──
   v=484k-condos-parity: dialed back from earlier 28/26/14 spec to
   condos.ca's compact 20/18/12 values, measured directly from their
   listing detail. Stats sit tight against the price (no border, small
   gap) so a user scans stats + price as one cluster, not two. */
.v112-stats-block{
  gap:16px !important;
  padding:16px 22px 8px !important;
  border-bottom:0 !important;
  justify-content:space-between !important;
  flex-wrap:wrap !important;
}
.v112-stats-icons{
  gap:22px !important;
  flex-wrap:wrap !important;
  align-items:flex-start !important;
}
.v112-stat{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:4px !important;
  min-width:54px !important;
  text-align:center !important;
}
.v112-stat svg{
  width:20px !important; height:20px !important;
  stroke:#0c1f38 !important;
  stroke-width:1.8 !important;
  margin:0 !important;
  flex:0 0 auto !important;
}
.v112-stat-num{
  font-size:18px !important;
  font-weight:600 !important;
  color:#0c1f38 !important;
  line-height:1.1 !important;
  letter-spacing:-.2px !important;
  font-feature-settings:"tnum" 1 !important;
}
.v112-stat-lbl{
  font-size:12px !important;
  font-weight:500 !important;
  color:#64748b !important;
  letter-spacing:.2px !important;
  line-height:1 !important;
}
#v112-stat-type{
  font-size:14px !important;
  font-weight:600 !important;
  white-space:nowrap !important;
}

@media (max-width:768px){
  .v112-stats-block{ gap:12px !important; padding:14px 16px 6px !important }
  .v112-stats-icons{ gap:16px !important; justify-content:space-between !important; width:100% !important }
  .v112-stat{ min-width:48px !important }
  .v112-stat svg{ width:18px !important; height:18px !important }
  .v112-stat-num{ font-size:16px !important }
  .v112-stat-lbl{ font-size:11.5px !important }
  #v112-stat-type{ font-size:13px !important }
}

/* ── Price — condos.ca parity: 28px on desktop, no extra top padding
   so it sits visually adjacent to the stats row above and the status
   pills below. */
.v112-price{
  font-size:28px !important;
  font-weight:600 !important;
  color:#0c1f38 !important;
  letter-spacing:-.5px !important;
  line-height:1.1 !important;
  font-feature-settings:"tnum" 1 !important;
}
.v112-price-block{
  padding-top:6px !important;
  margin-top:0 !important;
}
@media (max-width:768px){
  .v112-price{ font-size:24px !important }
  .v112-price-block{ padding-top:4px !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484l-cardfooter — condos.ca card footer row.
   "+ Compare" link on the LEFT, "X on site" plain gray text on the
   RIGHT, both inline at the bottom of .cb (card body). Replaces the
   old setup where Compare was overlaid on the photo and the time tag
   sat at the top of the body.
   ═══════════════════════════════════════════════════════════════════════ */
.cfooter-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  margin-top:6px !important;
  padding-top:6px !important;
  border-top:1px solid #f1f5f9 !important;
}
/* v=484o — trim extra whitespace below the cardfooter row. .cb's
   default 14px padding-bottom + the footer's own 6px padding made
   the card feel bottom-heavy. Cap to 8px below the footer. */
#cards .card > .cb,
.cards-mixed .card > .cb,
.cards-list .card > .cb{ padding-bottom:8px !important }
.cfooter-row .card-cmp-btn{
  position:static !important;
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  color:#EA0649 !important;
  font-size:13px !important;
  font-weight:500 !important;
  cursor:pointer !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  white-space:nowrap !important;
  font-family:inherit !important;
  border-radius:0 !important;
}
.cfooter-row .card-cmp-btn:hover{ color:#7a0c2b !important; text-decoration:underline !important }
.cfooter-row .card-cmp-btn.on{ color:#7a0c2b !important; font-weight:600 !important }
.cfooter-row .ctime{
  background:transparent !important;
  color:#64748b !important;
  font-size:13px !important;
  font-weight:500 !important;
  padding:0 !important;
  border-radius:0 !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  box-shadow:none !important;
  border:0 !important;
  white-space:nowrap !important;
  text-align:right !important;
  margin-left:auto !important;
}
/* v=484l-blue-cards: .cstatus-row is back — it now holds the For Sale
   pill (re-enabled per Scott's revised spec). Layout: pill sits left,
   no padding/margin between it and the price row below. */
.card .cstatus-row{
  display:flex !important;
  align-items:center !important;
  margin:0 0 6px !important;
  padding:0 !important;
  min-height:0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-mobile-chips-compact — REVERSED. Earlier hide-all rule was
   wrong: Scott wants every chip (For Sale, Price, Beds, Baths, More
   Filters) visible on mobile, just sized to fit. Compact font/padding
   + horizontal-scroll fallback if the row overflows the viewport.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:599px){
  #cdg-chip-bar{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:6px !important;
    padding:8px 12px !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
  }
  #cdg-chip-bar::-webkit-scrollbar{ display:none !important }
  #cdg-chip-bar > *{ scroll-snap-align:start !important; flex-shrink:0 !important }
  #cdg-chip-bar #cdg-chip-type,
  #cdg-chip-bar #cdg-chip-price,
  #cdg-chip-bar #cdg-chip-beds,
  #cdg-chip-bar #cdg-chip-baths,
  #cdg-chip-bar .cdg-chip{
    display:inline-flex !important;
    font-size:12.5px !important;
    padding:6px 11px !important;
    min-height:32px !important;
    flex-shrink:0 !important;
    white-space:nowrap !important;
  }
  #cdg-chip-bar .cdg-chip .cdg-chip-lbl{ font-size:12.5px !important }
  #cdg-chip-bar #v482-filter-btn{
    display:inline-flex !important;
    flex-shrink:0 !important;
    width:32px !important;
    height:32px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-autocomplete — fix overflow on the header search dropdown.
   The .cdgnv-search-item-body flex child lacked min-width:0 so its
   ellipsis children couldn't shrink past their content width, causing
   long addresses to bleed off the right edge of the dropdown. Also
   ensure the dropdown container itself clips overflow.
   ═══════════════════════════════════════════════════════════════════════ */
.cdgnv-search-item{ overflow:hidden !important }
.cdgnv-search-item-body{
  flex:1 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1px !important;
  overflow:hidden !important;
}
.cdgnv-search-item-lbl,
.cdgnv-search-item-sub{
  display:block !important;
  max-width:100% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.cdgnv-search-dd{ overflow-x:hidden !important }

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-maptools — relocate desktop map toolbar from vertical right-rail
   to a HORIZONTAL row at the top-right (Google Maps / condos.ca pattern).
   Frees vertical space on the right side of the map. Mobile keeps its
   existing .mob-map-toolbar treatment (separate selector, untouched).
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:769px){
  .map-controls-bottom{
    top:16px !important;
    right:16px !important;
    bottom:auto !important;
    left:auto !important;
    flex-direction:row !important;
    align-items:center !important;
    gap:8px !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .map-controls-bottom .map-ctrl-pill-stack{
    width:auto !important;
    display:inline-flex !important;
    flex-direction:row !important;
    align-items:center !important;
    padding:4px !important;
  }
  .map-controls-bottom .map-ctrl-pill-stack .map-ctrl-pills{
    flex-direction:row !important;
    gap:2px !important;
    padding:0 !important;
    align-items:center !important;
  }
  .map-controls-bottom .map-ctrl-pill-stack .map-ctrl-zoom-group{
    flex-direction:row !important;
    border-top:0 !important;
    border-left:1px solid rgba(11,31,56,.08) !important;
    padding:0 4px 0 6px !important;
    margin-left:4px !important;
    gap:2px !important;
  }
  /* Hide the text labels under each icon — horizontal mode is icon-only
     with native title-attribute tooltips on hover. */
  .map-controls-bottom .map-ctrl-pill .map-ctrl-lbl,
  .map-controls-bottom .map-ctrl-pill span:not([class*="ico"]):not(.map-ctrl-x){
    display:none !important;
  }
  /* Compact each pill — narrower padding since they sit horizontally. */
  .map-controls-bottom .map-ctrl-pill{
    padding:6px !important;
    gap:0 !important;
    min-width:36px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-fab-hide — hide the floating "View Listings" button when a
   building bottom-sheet OR side panel is open. The user is already
   looking at listings in the sheet; the FAB is redundant and was
   overlapping the third card in the list.
   ═══════════════════════════════════════════════════════════════════════ */
body.v69-bld-panel-open #v483-map-view-listings,
body.bldg-sheet-open #v483-map-view-listings,
body.in-listing-detail #v483-map-view-listings{ display:none !important }

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-mob-icons — bump back arrow + hamburger to readable size on
   mobile. Both icons were rendering at 22px against the navy header —
   too small to spot quickly and below the 44px Apple HIG tap target.
   Bumps svg to 28px stroke 2.2; button bounds to 44×44.
   ═══════════════════════════════════════════════════════════════════════ */
html body .cdgnv-mob{
  min-width:44px !important;
  min-height:44px !important;
  width:44px !important;
  height:44px !important;
  padding:8px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}
html body .cdgnv-mob svg{
  width:28px !important;
  height:28px !important;
  stroke-width:2.2 !important;
  stroke:#fff !important;
}
html body .m-topbar-back,
html body .m-topbar-menu{
  min-width:44px !important;
  min-height:44px !important;
  width:44px !important;
  height:44px !important;
  padding:8px !important;
}
html body .m-topbar-back svg,
html body .m-topbar-menu svg{
  width:28px !important;
  height:28px !important;
  stroke-width:2.2 !important;
  stroke:#fff !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-all-fixes — final layout bundle.

   1) Double chevron fix. #m-back-arrow ("Back to map") and .m-topbar-back
      both render at top-left of the listing-detail modal on mobile. The
      m-topbar's back button is the canonical close; suppress m-back-arrow
      at ≤768px so only ONE chevron paints.
   2) Listing-detail order. v=494 swapped the source HTML so price-block
      already comes BEFORE stats-icons in DOM order. We force plain
      `column` here (was `column-reverse !important`) so the visual order
      matches Scott's Zolo single-row spec: price-row → status-row →
      stats. Bottom padding tightened from 96px → 24px now that the
      floating Request-a-Viewing CTA is reserved by .footer-disc's 110px
      bottom padding on the LAST page section.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  html body #m-back-arrow{ display:none !important }
}

.v112-stats-block{
  flex-direction:column !important;
  align-items:stretch !important;
  gap:14px !important;
}
.v112-stats-block .v112-price-block{
  padding-top:0 !important;
  margin-top:0 !important;
}
@media (max-width:768px){
  .v112-stats-block{ padding-bottom:24px !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=484o-vt-mobile-hide — hide the List/Mixed/Map segmented toggle on
   mobile. The bottom nav (Map | Listings | Saved | Sold) already
   provides view switching; the segmented toggle is redundant and eats
   horizontal space at narrow widths.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:599px){
  html body .cdg-vt,
  html body .cdg-vt-floating,
  html body #cdg-view-toggle-map{ display:none !important }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=496 — Bulletproof transparent mobile CTA wrapper.

   Scott reported the white card/strip persisted behind the "Request a
   viewing" pill on mobile listing-detail. Last-cascade !important sweep
   so any later rule defining background / border-top / box-shadow on
   the wrapper loses. The pill itself (.v307-mob-cta-primary / .v307-mob-
   cta) keeps its own shadow + navy fill — only the wrapper is
   neutralized.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:1023px){
  body.in-listing-detail .v42-detail-cta,
  body.in-listing-detail .v42-detail-cta-inner,
  body.in-listing-detail .v307-mob-cta-bar,
  body.in-listing-detail .v307-mob-cta-row,
  body.in-listing-detail .cdg-cta-bar,
  body.in-listing-detail [class*="mob-cta-bar"]:not(.v307-mob-cta):not(.v307-mob-cta-primary):not(.v307-mob-cta-secondary){
    background:transparent !important;
    background-color:transparent !important;
    background-image:none !important;
    border-top:none !important;
    border-bottom:none !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  /* Kill any potential ::before / ::after producing a white strip too. */
  body.in-listing-detail .v42-detail-cta::before,
  body.in-listing-detail .v42-detail-cta::after,
  body.in-listing-detail .v307-mob-cta-bar::before,
  body.in-listing-detail .v307-mob-cta-bar::after{
    content:none !important;
    background:transparent !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=497b — Mobile listing-detail polish, post-SPA-route switch.

   Scott's real-iPhone screenshot after v=497a flagged:
   1. Photo gallery rendered as 1+2 mosaic with all 3 slots navy (placeholder
      tone). On mobile we want a SINGLE hero photo only — drop the thumbs row
      and let "View all X photos" jump straight into the lightbox carousel.
   2. Breadcrumb ellipsis was eating the CITY ("Waterfront Communities, T...").
      The city must always be fully visible per Scott's spec — give the hood
      link a max-width + ellipsis instead so it's the hood that truncates.
   3. The "Request a viewing" floating pill was covering the FOR RENT chip /
      status row. Bottom-padding the modal scroll area so content scrolls past
      the fixed CTA's footprint.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:768px){
  /* 1. Single hero photo on mobile — hide the 2-thumb column.
     Specificity bumped to (0,4,3) to beat the .v483-pg-mobile inline
     rules in index.html (line 12485) that force thumbs display:grid. */
  html body.in-listing-detail .v65-photogrid.v483-pg-mobile .v65-photogrid-thumbs,
  html body.in-listing-detail .v65-photogrid .v65-photogrid-thumbs{
    display:none !important;
  }
  html body.in-listing-detail .v65-photogrid.v483-pg-mobile,
  html body.in-listing-detail .v65-photogrid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
    height:auto !important;
  }
  html body.in-listing-detail .v65-photogrid .v65-photogrid-hero{
    aspect-ratio:4/3 !important;
    width:100% !important;
  }

  /* 2. Protect the city in the breadcrumb. Hood + district can ellipsize;
        the city link always shows its full text. flex layout lets the city
        claim natural width while the hood shrinks. */
  .v112-addr-sub{
    display:flex;
    flex-wrap:nowrap;
    align-items:baseline;
    overflow:hidden;
  }
  .v112-addr-sub > *{ flex:0 0 auto }
  .v112-addr-sub .v112-area-link:not(#v112-city-link),
  .v112-addr-sub .bld:not(.bcity){
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .v112-addr-sub .v112-city-link,
  .v112-addr-sub .bcity,
  .v112-addr-sub #v112-city-link{
    flex:0 0 auto;
    overflow:visible;
    white-space:nowrap;
  }

  /* 3. Reserve room at the bottom so content scrolls past the floating CTA.
        Increased to 140px in v=498 — 96px wasn't enough; the FOR SALE chip
        was still getting covered by the pinned "Request a viewing" pill. */
  body.in-listing-detail #modal,
  body.in-listing-detail .modal,
  body.in-listing-detail .ssr-page,
  body.in-listing-detail{
    padding-bottom:140px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   v=498 — Address one-line + tight rhythm + breadcrumb spacing.

   • Address: regular weight (400), one line on mobile via responsive
     font-size + nowrap/ellipsis fallback. clamp(15px, 4.4vw, 19px) lets
     "1214 - 78 Harrison Garden Boulevard" (34 chars) fit a 390px iPhone
     viewport on a single row.
   • Breadcrumb: tight 11.5px on mobile so "Willowdale East" + "Toronto"
     both fit without ellipsis on a typical phone width. Add spacing
     around the inline "in" connector and ", " separators so flex
     children don't collapse the inter-word whitespace.
   • Vertical rhythm: collapse 30px+ gaps that were splitting tight
     clusters. address → photo = 10px, photo → price = 14px, price →
     status = 8px, status → stats = 14px. mortgage → preapprove = 6px.
   ═══════════════════════════════════════════════════════════════════════ */
html body .v112-addr-line,
html body.in-listing-detail .v112-addr-line,
html body .v112-addr-block h1,
html body.in-listing-detail .v112-addr-block h1{
  font-weight:400 !important;
  font-stretch:normal !important;
}
@media (max-width:768px){
  /* v=502j — mobile title LOCKED to 1 line. Replaces v=502c's
     wrap-allowing rules. Long addresses (>~25 chars at 390px) now
     truncate with ellipsis at the end instead of wrapping to a 2nd
     line. Scott's spec: row 1 = address (1 line), row 2 = breadcrumb
     (full hood), gap between = 40px (set on .v112-addr-sub margin). */
  html body .v112-addr-line,
  html body.in-listing-detail .v112-addr-line,
  html body .v112-addr-block h1,
  html body.in-listing-detail .v112-addr-block h1{
    font-size:22px !important;
    font-weight:700 !important;
    line-height:1.22 !important;
    letter-spacing:-.3px !important;
    text-wrap:nowrap !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    padding-right:96px !important;
  }
  /* v=499 Breadcrumb 13px reference-match.
     v=502d — drop the nowrap/ellipsis enforcement so long hood names
     like "Willowdale East" render in full. Breadcrumb may wrap to a
     second line on narrow screens; that's preferable to truncation.
     Overrides the .v112-addr-sub mobile rule (~line 5984) that pinned
     it to a single ellipsis-truncated line. */
  html body .v112-addr-sub,
  html body.in-listing-detail .v112-addr-sub{
    font-size:13px !important;
    line-height:1.3 !important;
    margin-top:2px !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
  }
  html body .v112-addr-sub a,
  html body .v112-addr-sub span,
  html body.in-listing-detail .v112-addr-sub a,
  html body.in-listing-detail .v112-addr-sub span{
    font-size:13px !important;
  }
  /* Breadcrumb spacing: flex layout was collapsing the whitespace
     between adjacent <a> + <span> nodes, producing "Avondalein" and
     ",Toronto". Force ~0.35em horizontal padding on the connector
     spans so the words read with their natural spacing. */
  html body .v112-addr-sub .v112-in,
  html body.in-listing-detail .v112-addr-sub .v112-in{
    padding:0 .35em !important;
  }
  html body .v112-addr-sub .v112-sep,
  html body .v112-addr-sub .bsep,
  html body.in-listing-detail .v112-addr-sub .v112-sep,
  html body.in-listing-detail .v112-addr-sub .bsep{
    padding:0 .2em 0 .1em !important;
  }
  /* Same flex-collapse problem on the SSR breadcrumb wrapper. */
  html body .v112-addr-sub .bld-bldg-wrap,
  html body.in-listing-detail .v112-addr-sub .bld-bldg-wrap{
    display:inline !important;
  }
  /* Tighten vertical rhythm: address block → hero, hero → price, etc. */
  html body.in-listing-detail .v112-addr-block{
    padding-bottom:10px !important;
  }
  html body.in-listing-detail .v65-photogrid{
    margin-top:0 !important;
    margin-bottom:14px !important;
  }
  html body.in-listing-detail .m-gallery{
    margin-bottom:14px !important;
  }
  html body.in-listing-detail .v112-stats-block{
    margin-top:0 !important;
    padding-top:10px !important;
  }
  html body.in-listing-detail .v494-price-row{
    margin-bottom:0 !important;
  }
  html body.in-listing-detail .v494-status-row{
    margin-top:8px !important;
  }
  /* Mortgage → pre-approved tight cluster (6px gap, was 40-60px). */
  html body.in-listing-detail .v112-mort-link{
    margin:0 !important;
    padding:0 !important;
  }
  html body.in-listing-detail .v112-preapprove-link{
    margin-top:6px !important;
    padding:0 !important;
  }
  /* If they end up on different flex rows (wrap on mobile), keep the
     row-gap small so the visual pair stays tight. */
  html body.in-listing-detail .v494-price-row{
    row-gap:6px !important;
  }
  /* v=499 Hero photo TRUE edge-to-edge on mobile. Use 100vw width
     anchored to the left edge of the viewport via calc + position
     relative. Belt-and-braces: width=100vw exactly + negative margin
     cancels parent padding + left position. */
  html body.in-listing-detail .v65-photogrid{
    position:relative !important;
    width:100vw !important;
    max-width:100vw !important;
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    transform:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  html body.in-listing-detail .v65-photogrid .v65-photogrid-hero,
  html body.in-listing-detail .v65-photogrid .pg-hero{
    border-radius:0 !important;
  }
  /* Pull the address block + photo grid closer together. Multiple
     wrappers between them were stacking ~10px each; collapse them. */
  html body.in-listing-detail .v112-addr-block + *,
  html body.in-listing-detail .v112-addr-block ~ .v65-photogrid,
  html body.in-listing-detail .v112-addr-block ~ .m-gallery{
    margin-top:0 !important;
  }
  html body.in-listing-detail .v112-addr-block{
    padding-bottom:8px !important;
    margin-bottom:0 !important;
  }
}

/* v=502s — three modal-only mobile fixes per Scott e4664ec6 screenshot:
   (1) Address title: strip nowrap+ellipsis (v=502j had locked it to
       one line with ...). Long addresses now wrap to 2 lines instead
       of truncating mid-word ("Harrison Garden Bo..." → "Harrison
       Garden Boulevard" on 2 rows).
   (2) Breadcrumb city glue: hide the comma-separator immediately
       before the city link and render ", " via ::before on the city
       link itself, with white-space:nowrap. ", Toronto" can no
       longer break apart onto its own row.
   (3) Heart + share icons: re-anchor from block geometric center
       (which sat low when breadcrumb wrapped) to a fixed offset
       aligned visually between row 1 (title) and row 2 (breadcrumb
       first line). At top:30px + translateY(-50%) icon center sits
       at the midpoint between title and first crumb row.

   All scoped to .modal at mobile (max-width:768px). Full direct-nav
   page (SSR / parallel-agent), homepage, listings index, etc.
   unaffected. */
@media (max-width:768px){
  /* (1) — flip the v=502j nowrap+ellipsis to wrap on modal only.
     v=503m — Scott walked back from 28 → 25px (target 24-26). */
  html body.in-listing-detail .modal .v112-addr-line,
  html body .modal .v112-addr-line,
  html body.in-listing-detail .modal .v112-addr-block h1,
  html body .modal .v112-addr-block h1{
    font-size:25px !important;
    text-wrap:wrap !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
  /* (2) — glue ", Toronto": hide the trailing comma-separator and
     inject ", " inside city link with nowrap so it can't break.
     Covers both the v112 markup (#v112-city-link) and the SSR-mirror
     markup (.bcity). nth-last-of-type(1) targets the LAST .v112-sep
     / .bsep span in the breadcrumb, which is always immediately
     before the city link.
     v=503p — ALSO hide the sep that sits IMMEDIATELY BEFORE the
     dist link. When the v=499 rule at line 15963 hides #v112-dist-link,
     the sep AFTER dist is also hidden — but the sep BEFORE dist
     was still rendering, producing "Hood, [hidden dist] , Toronto"
     = double comma. The :has(+ #v112-dist-link) selector kills it. */
  html body .modal .v112-addr-sub .v112-sep:nth-last-of-type(1),
  html body .modal .v112-addr-sub .bsep:nth-last-of-type(1),
  html body .modal .v112-addr-sub .v112-sep:has(+ #v112-dist-link),
  html body .modal .v112-addr-sub .bsep:has(+ .bdist){
    display:none !important;
  }
  /* v=503w — ::before ", " injection and city-link inline-block
     replaced by JS-side glue (app.js after line 2267). The JS
     inserts a literal ", " text node between hood and city, and
     the nbsp prevents the city portion from wrapping alone. */
  html body .modal .v112-addr-sub #v112-city-link,
  html body .modal .v112-addr-sub .v112-city-link,
  html body .modal .v112-addr-sub .bcity{
    white-space:nowrap !important;
  }
  /* (3) — re-anchor heart + share to row1/row2 midpoint (~30px
     from block top), not block geometric center which drifts low
     when breadcrumb wraps. */
  html body.in-listing-detail .modal .v112-page-fav,
  html body.in-listing-detail .modal .v112-page-share,
  html body .modal .v112-page-fav,
  html body .modal .v112-page-share{
    top:30px !important;
    transform:translateY(-50%) !important;
  }
}

/* v=502r — SPA modal rhythm matches SSR full-page exactly.
   Measured on prod /toronto/.../unit-XXX at 500px viewport:
     - 4px tabs/chrome → .v502-address (title)
     - 4px .v502-address → .v502-crumb (margin-top:4 on crumb)
     - 8px .v502-crumb → next sibling (margin-top:8 on .v502-pg)
   Mirroring those numbers onto the SPA modal scope (.modal +
   .v112-addr-block + .v112-addr-sub + photo-grid siblings).

   Scope is MODAL ONLY. Selectors are either prefixed `.modal` or
   target .v112-* classes that only exist inside the modal. Does
   NOT touch the SSR full-page (parallel-agent scope) — its CSS
   lives in its own inline <style>. Does NOT touch homepage,
   listings index, or any other surface — they don't render
   .v112-addr-block. */
/* Selectors use `body.in-listing-detail .modal` (specificity 0,0,3,3)
   so we beat the v=499 reference-match rules
   (html body.in-listing-detail .v112-addr-block, 0,0,3,2) that set
   their own padding/margin on the addr block at mobile. */
html body.in-listing-detail .modal .v112-addr-block,
html body .modal .v112-addr-block{
  /* v=503e — half to one line-height shift (~12px). Scott pulled
     back from 24px (v=503d was too much). */
  padding-top:12px !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}
html body.in-listing-detail .modal .v112-addr-sub,
html body .modal .v112-addr-sub{
  margin-top:4px !important;
  padding-top:0 !important;
}
/* v=502v — bundled mobile-modal fixes per Scott:
   (1) Mortgage cluster row-gap → 0 (was 2px in v=502u). Lines
       touch with only line-height as separation.
   (2) Price bold: .v112-price weight 600 → 700.
   (3) Stat values bold: .v112-stat-num weight 600 → 700.
       Labels (.v112-stat-lbl) stay at 500.
   (4) Defensive: force .v112-stat-lbl display:block in case the
       TYPE column's label was hidden by inline JS.
   Scoped strictly to .modal at max-width:768px. */
@media (max-width:768px){
  html body.in-listing-detail .modal .v494-price-row,
  html body .modal .v494-price-row{
    row-gap:0 !important;
    gap:0 12px !important;
  }
  html body.in-listing-detail .modal .v112-preapprove-link,
  html body .modal .v112-preapprove-link{
    margin:0 !important;
    padding:0 !important;
    /* v=503q — keep preapprove as its own tiny row BELOW the
       inline price+mortgage line. */
    flex-basis:100% !important;
    display:block !important;
    line-height:1.25 !important;
    font-size:12px !important;
  }
  /* v=503q Zolo inline mortgage moved OUTSIDE @media in v=503t
     so it applies at desktop too. See block at end of file. */
  /* v=503g — tighten the inter-section gaps from 10px (v=503f) to
     4px. Three sections still read distinct but feel grouped:
     [price] (4px) [mort+preapprove flush] (4px) [chip+days]. */
  html body.in-listing-detail .modal .v112-price-block,
  html body .modal .v112-price-block{
    gap:4px !important;
    row-gap:4px !important;
    column-gap:0 !important;
  }
  html body.in-listing-detail .modal .v112-price,
  html body .modal .v112-price{
    margin-bottom:4px !important;
    /* v=503n — HUGE serif price (Scott 2018205c). Supersedes
       v=503j's SSR-match downsize. Price is now the dominant
       visual element: DM Serif Display 38px / 800. */
    font-family:"DM Serif Display", Georgia, serif !important;
    font-size:38px !important;
    font-weight:800 !important;
    letter-spacing:-.6px !important;
    line-height:1.05 !important;
    color:#0c1f38 !important;
  }
  /* v=503g — shift the price-block UP closer to the photo by
     reducing .v112-stats-block's internal gap (was 14px between
     the stats-icons grid and the price-block). */
  html body.in-listing-detail .modal .v112-stats-block,
  html body .modal .v112-stats-block{
    gap:6px !important;
    row-gap:6px !important;
  }
  /* v=503m — hide mortgage block on FOR RENT listings. The status
     chip has class .v307-pill-status.rent when the listing is a
     rental. Use :has() to detect and hide the mortgage line +
     pre-approved link on the same price-block. */
  html body .modal .v112-price-block:has(.v307-pill-status.rent) .v112-mort-link,
  html body .modal .v112-price-block:has(.v307-pill-status.rent) .v112-preapprove-link,
  html body.in-listing-detail .modal .v112-price-block:has(.v307-pill-status.rent) .v112-mort-link,
  html body.in-listing-detail .modal .v112-price-block:has(.v307-pill-status.rent) .v112-preapprove-link{
    display:none !important;
  }
  /* v=502y — Scott live-watching: push mortgage block as close as
     possible to the chip/days row above (zero margins). */
  html body.in-listing-detail .modal .v494-status-row,
  html body .modal .v494-status-row,
  html body.in-listing-detail .modal #v307-status-pills,
  html body .modal #v307-status-pills{
    margin-top:0 !important;
    margin-bottom:0 !important;
    padding-top:0 !important;
    padding-bottom:0 !important;
  }
  html body.in-listing-detail .modal .v112-mort-link,
  html body .modal .v112-mort-link{
    margin-top:0 !important;
    padding-top:0 !important;
  }
  /* v=502x — kill the INTERNAL row-gap on .v112-mort-link too.
     It's a flex-wrap row with `gap:4px` between its 4 spans
     (label / value / meta / arrow). When the text wraps to 2
     lines at narrow widths the 4px vertical gap shows as extra
     space INSIDE the "Estimated mortgage" cluster, which reads
     as a gap above "Get pre-approved". Set row-gap:0 (keep
     column-gap:4px for horizontal word spacing). */
  html body.in-listing-detail .modal .v112-mort-link,
  html body .modal .v112-mort-link{
    /* v=503t — flex-basis:100% (v=503b) DELETED. The Zolo inline
       block below puts mort-link INLINE next to price; forcing
       its own row contradicts the Zolo pattern. */
    min-height:0 !important;
    height:auto !important;
  }
  html body.in-listing-detail .modal .v112-price,
  html body .modal .v112-price{
    font-weight:700 !important;
  }
  /* v=503j — match SSR .v502-rstat-num EXACTLY: 18px / 600. */
  html body.in-listing-detail .modal .v112-stat-num,
  html body .modal .v112-stat-num{
    font-weight:600 !important;
    font-size:18px !important;
  }
  /* TYPE column's value has id #v112-stat-type. Match other stats. */
  html body.in-listing-detail .modal #v112-stat-type,
  html body .modal #v112-stat-type{
    font-weight:600 !important;
    font-size:18px !important;
  }
  /* v=503j — stat labels match SSR .v502-rstat-lbl EXACTLY: 12px / 500 */
  html body.in-listing-detail .modal .v112-stat-lbl,
  html body .modal .v112-stat-lbl{
    font-size:12px !important;
    font-weight:500 !important;
  }
  /* v=503j — chip + days match SSR.
     .v494-status-row → contains FOR SALE chip + · + "X days on site".
     SSR sizes: chip 11.5px / 600, days 13px / 500. */
  html body.in-listing-detail .modal .v494-status-row .v307-pill-status,
  html body .modal .v494-status-row .v307-pill-status,
  html body.in-listing-detail .modal .v494-status-row .v307-pill,
  html body .modal .v494-status-row .v307-pill{
    font-size:11.5px !important;
    font-weight:600 !important;
  }
  html body.in-listing-detail .modal .v494-status-row .v494-status-days,
  html body .modal .v494-status-row .v494-status-days,
  html body.in-listing-detail .modal .v494-status-row span:not(.v307-pill):not(.v307-pill-status),
  html body .modal .v494-status-row span:not(.v307-pill):not(.v307-pill-status){
    font-size:13px !important;
    font-weight:500 !important;
  }
  html body.in-listing-detail .modal .v112-stat .v112-stat-lbl,
  html body .modal .v112-stat .v112-stat-lbl{
    display:block !important;
    visibility:visible !important;
  }
}

/* v=502t — tighten breadcrumb → photo from 8px to 4px (Scott wants
   picture closer to row 2). */
html body.in-listing-detail .modal .v112-addr-block + .v65-photogrid,
html body.in-listing-detail .modal .v112-addr-block + .m-gallery,
html body.in-listing-detail .modal .v112-addr-block ~ .v65-photogrid,
html body.in-listing-detail .modal .v112-addr-block ~ .m-gallery,
html body .modal .v112-addr-block + .v65-photogrid,
html body .modal .v112-addr-block + .m-gallery,
html body .modal .v112-addr-block ~ .v65-photogrid,
html body .modal .v112-addr-block ~ .m-gallery{
  margin-top:4px !important;
  padding-top:0 !important;
}

/* v=502i — kill remaining breadcrumb truncation. v=502d removed
   text-overflow:ellipsis from .v112-addr-sub itself, but the inner
   area-link rule at line ~16576 (inside max-width:768px media)
   still applied text-overflow:ellipsis + white-space:nowrap to the
   HOOD link, so "Willowdale East" rendered as "Willowdale Ea...".
   Also: parent .v112-addr-sub had flex-wrap:nowrap so the breadcrumb
   couldn't flow to a second line even with overflow:visible.

   Strip both: parent wraps, children never truncate. */
@media (max-width:768px){
  html body .v112-addr-sub,
  html body.in-listing-detail .v112-addr-sub,
  html body .modal .v112-addr-sub{
    flex-wrap:wrap !important;
  }
  html body .v112-addr-sub .v112-area-link,
  html body .v112-addr-sub .v112-area-link:not(#v112-city-link),
  html body .v112-addr-sub .bld,
  html body .v112-addr-sub .bld:not(.bcity),
  html body .v112-addr-sub a,
  html body .v112-addr-sub span,
  html body.in-listing-detail .v112-addr-sub .v112-area-link,
  html body.in-listing-detail .v112-addr-sub .v112-area-link:not(#v112-city-link),
  html body.in-listing-detail .v112-addr-sub .bld,
  html body.in-listing-detail .v112-addr-sub .bld:not(.bcity),
  html body.in-listing-detail .v112-addr-sub a,
  html body.in-listing-detail .v112-addr-sub span{
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    max-width:none !important;
    min-width:0 !important;
  }
}
/* v=502r — REMOVED the global "photo grid shift up flush" rule
   that set margin-top:0 on .v65-photogrid + .m-gallery siblings
   across all surfaces. It was overridden by v=502r's modal-scoped
   margin-top:8px rule above. Keeping it would have created a
   specificity war. Deleted cleanly. */

/* v=502r — remove v=502q dead .v502-address rules.
   SSR full-direct-nav page does NOT load /assets/app.css; its
   .v502-address styles come from an inline <style> emitted by
   functions/_lib/render-listing.js (parallel-agent scope). Any
   rules here for .v502-* are no-ops and dead code. Deleted. */

/* v=502l — extend v=499's 100vw edge-to-edge photo bleed (already
   live on .in-listing-detail SSR at line ~16726) to the SPA modal
   preview surface so mobile photos go flush to the viewport edges
   in BOTH surfaces. Per locked v=499 spec: no white gutter on
   either side of the hero photo at mobile widths. */
@media (max-width:768px){
  html body .modal .v65-photogrid,
  html body .modal .m-gallery,
  html body.in-listing-detail .modal .v65-photogrid,
  html body.in-listing-detail .modal .m-gallery{
    position:relative !important;
    width:100vw !important;
    max-width:100vw !important;
    left:50% !important;
    right:50% !important;
    margin-left:-50vw !important;
    margin-right:-50vw !important;
    transform:none !important;
    border-radius:0 !important;
    padding:0 !important;
  }
  html body .modal .v65-photogrid .v65-photogrid-hero,
  html body .modal .v65-photogrid .pg-hero,
  html body.in-listing-detail .modal .v65-photogrid .v65-photogrid-hero,
  html body.in-listing-detail .modal .v65-photogrid .pg-hero{
    border-radius:0 !important;
  }
}

/* v=503o — DESKTOP modal mirrors MOBILE typography for address +
   price. No @media wrapper, so these apply at ALL viewports. The
   mobile-specific layout (text-wrap, padding) inside the
   @media(max-width:768px) blocks above is unaffected — only the
   typography values are locked here. Beats the legacy desktop
   rule at line ~6027 (.modal .v112-addr-line{font-size:36px;
   font-weight:400}) via higher specificity (0,0,3,2). */
html body.in-listing-detail .modal .v112-addr-line,
html body .modal .v112-addr-line,
html body.in-listing-detail .modal .v112-addr-block h1,
html body .modal .v112-addr-block h1{
  font-family:"DM Serif Display", Georgia, serif !important;
  font-size:25px !important;
  font-weight:700 !important;
  letter-spacing:-.3px !important;
  line-height:1.22 !important;
}
html body.in-listing-detail .modal .v112-price,
html body .modal .v112-price{
  font-family:"DM Serif Display", Georgia, serif !important;
  font-size:38px !important;
  font-weight:800 !important;
  letter-spacing:-.6px !important;
  line-height:1.05 !important;
  color:#0c1f38 !important;
}

/* v=503t — Zolo-style inline mortgage estimate (lives OUTSIDE any
   @media so it applies at desktop AND mobile). Moved here from the
   mobile-only v=503q block. Price + "est. $X/mo" share a flex row
   with baseline alignment. */
html body.in-listing-detail .modal .v494-price-row,
html body .modal .v494-price-row{
  align-items:baseline !important;
  column-gap:10px !important;
}
html body.in-listing-detail .modal .v112-mort-link,
html body .modal .v112-mort-link{
  flex-basis:auto !important;
  display:inline-flex !important;
  align-items:baseline !important;
  font-size:13px !important;
  color:#94a3b8 !important;
  text-decoration:none !important;
  min-height:0 !important;
  height:auto !important;
  gap:0 4px !important;
  row-gap:0 !important;
  margin:0 !important;
  padding:0 !important;
}
html body.in-listing-detail .modal .v112-mort-link::before,
html body .modal .v112-mort-link::before{
  content:"est. ";
  color:#94a3b8;
  white-space:nowrap;
  margin-right:2px;
}
html body.in-listing-detail .modal .v112-mort-lbl,
html body .modal .v112-mort-lbl,
html body.in-listing-detail .modal .v112-mort-meta,
html body .modal .v112-mort-meta,
html body.in-listing-detail .modal .v112-mort-arrow,
html body .modal .v112-mort-arrow{
  display:none !important;
}
html body.in-listing-detail .modal .v112-mort-val,
html body .modal .v112-mort-val{
  color:#EA0649 !important;
  text-decoration:underline !important;
  font-weight:500 !important;
}
/* Hide mortgage block on FOR RENT listings at ALL viewports
   (was mobile-only in v=503m). */
html body .modal .v112-price-block:has(.v307-pill-status.rent) .v112-mort-link,
html body.in-listing-detail .modal .v112-price-block:has(.v307-pill-status.rent) .v112-mort-link{
  display:none !important;
}

/* v=503s — narrow-phone address scale-down (elite competitor pattern:
   HouseSigma, Condos.ca, Zolo all scale font down on small phones so
   the address fits in 1-2 lines without ellipsis truncation). */
@media (max-width:480px){
  html body.in-listing-detail .modal .v112-addr-line,
  html body .modal .v112-addr-line,
  html body.in-listing-detail .modal .v112-addr-block h1,
  html body .modal .v112-addr-block h1{
    font-size:20px !important;
    line-height:1.2 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }
}
@media (max-width:380px){
  html body.in-listing-detail .modal .v112-addr-line,
  html body .modal .v112-addr-line,
  html body.in-listing-detail .modal .v112-addr-block h1,
  html body .modal .v112-addr-block h1{
    font-size:18px !important;
  }
}

/* v=504d ROOT CAUSE FIX: breadcrumb wrap regression.
   Diagnosed via Chrome MCP on prod 1779637791 (v=504c):
   .v112-addr-sub had display:flex applied, which per CSS spec
   turns inline <a> children into BLOCK-LEVEL flex items.
   Each child = own row = "Toronto" wraps to own line every
   time. No amount of nbsp/nowrap between elements helped
   because the city <a> WAS a block.

   Fix: parent display:block so children flow as natural
   inline text. Combined with the v=503w ",  " text
   node between hood and city, the breadcrumb now reads as
   continuous inline run that wraps at any space inside the
   hood's words but never between hood and city. */
html body .modal .v112-addr-sub,
html body.in-listing-detail .modal .v112-addr-sub{
  display:block !important;
  flex-wrap:initial !important;
  overflow:visible !important;
  white-space:normal !important;
}
html body .modal .v112-addr-sub > a,
html body .modal .v112-addr-sub > span,
html body.in-listing-detail .modal .v112-addr-sub > a,
html body.in-listing-detail .modal .v112-addr-sub > span{
  display:inline !important;
  flex-basis:auto !important;
}

/* v=504f — the .hood-city-glue wrapper span inserted by v=504e JS
   was losing white-space to v=502i's
   `.modal .v112-addr-sub span { white-space:normal !important }`
   inheritance. Override with higher specificity + !important. */
html body .modal .v112-addr-sub .hood-city-glue,
html body.in-listing-detail .modal .v112-addr-sub .hood-city-glue{
  white-space:nowrap !important;
  display:inline !important;
}

/* v=504g — also force nowrap on CHILDREN of .hood-city-glue.
   v=502i set `.v112-addr-sub a, .v112-addr-sub span { white-space:normal
   !important }` which inherits into the glue's children
   (hood-link, city-link). Their `normal` may allow breaks within
   the glue's nowrap context. Override children's white-space too. */
html body .modal .v112-addr-sub .hood-city-glue,
html body .modal .v112-addr-sub .hood-city-glue *,
html body.in-listing-detail .modal .v112-addr-sub .hood-city-glue,
html body.in-listing-detail .modal .v112-addr-sub .hood-city-glue *{
  white-space:nowrap !important;
}

/* v=534d — Active-filter chip strip. Renders above #cards by
   _cdgRenderActiveChips() in app.js. One pill per active fS field with
   an × icon that clears that field on click. Brand-teal subtle fill so
   it reads as "applied, removable" without competing with the toolbar
   chips above. Hidden when no filters are active. */
.cdg-active-chips{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:8px 12px 6px;align-items:center;
}
.cdg-active-chips[hidden]{display:none}
.cdg-active-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px 5px 12px;
  background:rgba(158,13,54,0.10);
  color:#0c1f38;
  border:1px solid rgba(158,13,54,0.28);
  border-radius:7px;
  font-size:13px;line-height:1;font-weight:500;
  white-space:nowrap;cursor:default;
  transition:background .14s ease, border-color .14s ease;
}
.cdg-active-chip:hover{background:rgba(158,13,54,0.16);border-color:rgba(158,13,54,0.42)}
.cdg-active-chip-x{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:4px;
  background:rgba(12,31,56,0.06);color:#0c1f38;
  font-size:14px;line-height:1;cursor:pointer;
  border:0;padding:0;
}
.cdg-active-chip-x:hover{background:rgba(12,31,56,0.18)}
.cdg-active-clear-all{
  margin-left:4px;
  padding:5px 10px;
  background:transparent;color:#EA0649;
  border:0;border-radius:6px;
  font-size:13px;font-weight:600;cursor:pointer;
  text-decoration:underline;text-underline-offset:2px;
}
.cdg-active-clear-all:hover{color:#0c1f38}
@media (max-width:600px){
  .cdg-active-chips{padding:6px 10px 4px;gap:5px}
  .cdg-active-chip{font-size:12px;padding:4px 8px 4px 10px}
}

/* ═══════════════════════════════════════════════════════════════════
   v=645 — P1 elite-parity bundle
   ═══════════════════════════════════════════════════════════════════ */
/* (1) Zolo-style time-on-site badge — dark pill, top-left of card photo.
   This is the single time-on-site surface on SRP cards; the duplicate
   footer .ctime is hidden below (scoped to #cards .card so the similar-
   listings carousel + building-detail rows keep their own .ctime). */
/* Top-RIGHT (the heart/save button occupies top-left on SRP cards). */
.cdg-listed-badge{position:absolute;top:10px;right:10px;z-index:4;display:inline-flex;align-items:center;max-width:calc(100% - 60px);background:rgba(12,31,56,.92);color:#fff;font-size:11px;font-weight:600;line-height:1;letter-spacing:-.1px;padding:5px 9px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);pointer-events:none}
.cards-list .cdg-listed-badge{top:8px;right:8px;font-size:10.5px;padding:4px 8px}
#cards .card .cfooter-row .ctime{display:none !important}
/* (4) Reset Filters — gray text button in the chip row, shown only when a
   filter is active (display toggled inline by _v645SyncResetBtn). */
.cdg-reset-filters{align-items:center;gap:5px;height:32px;padding:0 11px;background:transparent;border:0;border-radius:8px;color:#64748b;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:color .15s ease,background .15s ease}
.cdg-reset-filters:hover{color:#0c1f38;background:#eef2f5}
.cdg-reset-filters svg{flex-shrink:0}