/* ============================================================
   SEARCH AREA (2026-10-09): page-scoped CSS for the buyer path.
   listings.html (map search) · listing.html (detail) · exclusives.html.
   Loads AFTER site.css and services.css (the .k-* kit) on those three
   pages only. Everything here is prefixed .sx-* or scoped to a body
   class (.sx-listings / .sx-listing / .sx-exclusives), so no other page
   changes. Behavior: assets/listings.js, listing.js, exclusives.js.

   BLOCKS
   --- shared
   .sx-pin / .sx-cluster     price-pill markers + clusters on the light Esri map
   .sx-map-tools             switch + buttons floating over the map (z 500, inside the map's stacking context)
   .lmodal / .lm-*           the quick-look modal (same markup on listings + exclusives)
   .sx-promo                 amber in-grid card (off-market / rentals hand-off)
   .k-listing tweaks         New tag, saved heart, missing-photo state
   .sx-card / .sx-card-link  the address is the card's one link, stretched over it (plain click = quick look)
   --- listings.html
   .sx-filters tweaks        Buy/Rent chips live in the top row; phones wrap search + chips
   .sx-short                 shortlist chip in the active row (opens the drawer)
   .sx-sort                  compact sort pill in the active row (name="sort", not a data-filter)
   .sx-drawer / .sx-dr-*     shortlist drawer (right panel; bottom sheet on phones) + .sx-scrim
   .sx-areas                 static "browse by area" chip links
   --- listing.html
   .sx-lhead / .sx-lprice    header row: status, h1, city line | price block
   .sx-gallery               .k-gallery wrapper + "all photos" button; data-n 1..4 layouts
   .sx-home / .sx-lede / .sx-quote (+ .sx-unfold on phones) / .sx-feats / .sx-facts-card
   .sx-cost-*                cost panel controls (kit chips + rate field) on the dark band
   .sx-where                 map + sidebar (building card or area links); .sx-map-toggle street/satellite
   .sx-missing               the two honest error states + bad-link state
   --- exclusives.html
   .sx-xbar / .sx-xsel       inset filter card (kit .k-filters.is-card); selects wrapped so they stay inline on phones
   .sx-more                  "Show all N listings" under the first 12 (6 on phones)
   .sx-points                how-it-works cards
   ============================================================ */

/* ---------- shared: map markers ---------- */
/* Leaflet positions the icon root with its own transform, so the centering
   offset lives on an inner wrapper (.sx-pin-c), never on the root. */
.leaflet-marker-icon.sx-pin-w { width: 0 !important; height: 0 !important; overflow: visible; border: 0; background: none; }
.sx-pin-c { position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); }
.sx-pin {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--ink); color: #fff; border: 1.5px solid #fff; border-radius: 999px; padding: 5px 9px;
  font: 700 11px/1 'Sora', 'Sora Fallback', sans-serif; letter-spacing: .01em; white-space: nowrap;
  box-shadow: 0 3px 10px rgba(0,0,0,.28); cursor: pointer; font-variant-numeric: tabular-nums;
  transform-origin: center; transition: transform .15s ease, background .15s ease, color .15s ease;
}
.sx-pin.lease { background: #fff; color: var(--ink); border-color: var(--ink); }
.sx-pin.saved::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
.sx-pin.on { background: var(--amber); color: var(--ink); border-color: var(--ink); transform: scale(1.18); }
.sx-pin.on.saved::before { background: var(--ink); }
.sx-cluster {
  display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%;
  background: var(--ink); color: #fff; border: 3px solid var(--amber);
  font: 800 12.5px/1 'Sora', 'Sora Fallback', sans-serif; box-shadow: 0 4px 14px rgba(0,0,0,.3); font-variant-numeric: tabular-nums;
}
.sx-map .leaflet-control-attribution { background: rgba(255,255,255,.8) !important; color: #6B7178 !important; font-size: 9.5px !important; }
.sx-map .leaflet-control-attribution a { color: #5A5F68 !important; }
.sx-map .leaflet-control-zoom a { background: #fff !important; color: var(--ink) !important; border-color: var(--hairline) !important; }
.sx-map .leaflet-bar { border: 1px solid var(--hairline) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }
.sx-map .leaflet-popup-content-wrapper { border-radius: 12px; font-family: 'Sora', 'Sora Fallback', sans-serif; }
.sx-map-tools { position: absolute; left: 10px; top: 10px; z-index: 500; display: flex; flex-wrap: wrap; gap: 6px; max-width: calc(100% - 20px); }
.sx-map-stamp { position: absolute; right: 10px; top: 10px; z-index: 500; display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--hairline); font: 600 11.5px 'Sora', 'Sora Fallback', sans-serif; color: var(--ink-soft); box-shadow: 0 2px 8px rgba(0,0,0,.12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sx-map-stamp::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); flex: none; }
@media (min-width: 981px) { .sx-listings .sx-map-stamp { display: none; } } /* the list header carries the same stamp beside the map */
.sx-map-stamp.is-live::before { background: #1B7A3D; box-shadow: 0 0 6px rgba(27,122,61,.5); }
.sx-map-stamp b { color: var(--ink); font-weight: 700; }
.sx-switch { position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--hairline); font: 600 12px 'Sora', 'Sora Fallback', sans-serif; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); white-space: nowrap; }
.sx-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-switch .sw { width: 28px; height: 16px; border-radius: 999px; background: #D9D5CC; position: relative; transition: background .2s ease; flex: none; }
.sx-switch .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .2s ease; }
.sx-switch input:checked + .sw { background: var(--amber); }
.sx-switch input:checked + .sw::after { left: 14px; }
.sx-switch input:focus-visible + .sw { outline: 3px solid #8A5B00; outline-offset: 2px; }
.sx-map-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--hairline); font: 700 12px 'Sora', 'Sora Fallback', sans-serif; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.12); white-space: nowrap; }
.sx-map-btn:hover { border-color: var(--ink); }
.sx-map-btn[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.sx-map-btn svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- shared: listing card extras (kit .k-listing) ---------- */
.k-listing-img .k-status { position: absolute; left: 10px; top: 10px; z-index: 1; background: var(--amber); color: var(--ink); border-color: var(--amber); }
.k-listing-img img[hidden] { display: none; }
.k-listing-img .sx-nophoto { position: absolute; inset: 0; display: grid; place-items: center; color: var(--k-dim); font: 600 12px 'Sora', 'Sora Fallback', sans-serif; background: repeating-linear-gradient(135deg, rgba(16,17,20,.04) 0 6px, transparent 6px 12px); }
/* cards: the address is the one link, stretched over the card (no role=button, no nested controls); the heart sits above it */
.sx-card { position: relative; }
.sx-card .sx-card-link { color: inherit; text-decoration: none; }
.sx-card .sx-card-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
.sx-card .k-save { z-index: 2; }
.sx-card .sx-card-link:focus-visible { outline: none; }
.sx-card:has(.sx-card-link:focus-visible) { outline: 3px solid #8A5B00; outline-offset: 3px; }
/* contrast: the kit's live chip is 4.45:1 on paper and the chip counts sit at 50% opacity */
.sx-lhead .k-status.is-live { color: #14632F; }
.k-listing .k-addr { white-space: normal; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.sx-promo { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-height: 100%; padding: 22px; border-radius: 12px; background: var(--amber); color: var(--ink); }
.sx-promo b { font: 800 1.15rem/1.25 'Sora', 'Sora Fallback', sans-serif; letter-spacing: -.02em; }
.sx-promo p { font-size: 13.5px; line-height: 1.55; color: rgba(16,17,20,.78); }
.sx-promo a { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; background: var(--ink); color: #fff; font: 700 13px 'Sora', 'Sora Fallback', sans-serif; text-decoration: none; transition: transform .15s ease; }
.sx-promo a:hover { transform: translateY(-2px); }

/* ---------- shared: quick-look modal ---------- */
.lmodal { position: fixed; inset: 0; z-index: 95; display: none; align-items: center; justify-content: center; padding: clamp(10px, 3vh, 32px) clamp(10px, 3vw, 32px); }
body.lm-open .lmodal { display: flex; }
body.lm-open { overflow: hidden; }
.lm-scrim { position: absolute; inset: 0; background: rgba(7,8,10,.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.lm-panel { position: relative; width: min(720px, 100%); max-height: 94vh; background: #0E1013; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; animation: lmIn .3s cubic-bezier(.3,1.1,.4,1); color: #C9CDD4; }
@keyframes lmIn { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
.lm-close { position: absolute; top: 16px; right: 16px; z-index: 3; cursor: pointer; width: 40px; height: 40px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); background: rgba(11,13,16,.65); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-size: 18px; line-height: 1; }
.lm-close:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }
.lm-scroll { overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2a2f36 transparent; }
.lm-hero { position: relative; aspect-ratio: 16/9.6; min-height: 260px; overflow: hidden; flex: none; cursor: pointer; display: block; background: #171B21; }
.lm-hero img { width: 100%; height: 100%; object-fit: cover; }
.lm-hero .scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(11,13,16,.95) 0%, rgba(11,13,16,.5) 40%, rgba(11,13,16,.04) 68%); }
.lm-hero .badge { position: absolute; left: 18px; top: 16px; border-radius: 6px; padding: 6px 11px; font: 700 10px 'Sora', 'Sora Fallback', sans-serif; letter-spacing: .14em; text-transform: uppercase; background: var(--amber); color: var(--ink); }
.lm-hero .badge.lease { background: rgba(11,13,16,.85); color: var(--amber); border: 1px solid rgba(242,179,54,.6); }
.lm-hero .k-save { top: auto; bottom: 18px; right: 18px; width: 40px; height: 40px; }
.lm-hero .k-save svg { width: 19px; height: 19px; }
.lm-over { position: absolute; left: 20px; right: 76px; bottom: 16px; pointer-events: none; }
.lm-price { font: 800 clamp(1.7rem, 3.4vw, 2.2rem)/1 'Sora', 'Sora Fallback', sans-serif; color: var(--amber); font-variant-numeric: tabular-nums; letter-spacing: -.025em; text-shadow: 0 2px 16px rgba(0,0,0,.55); }
.lm-price .psf { font-size: 13px; color: #D5D9DF; font-weight: 600; letter-spacing: 0; }
.lm-addr { font: 800 clamp(1.02rem, 1.8vw, 1.28rem)/1.25 'Sora', 'Sora Fallback', sans-serif; color: #fff; letter-spacing: -.015em; margin-top: 7px; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.lm-city { font-size: 12.5px; color: #C9CDD4; margin-top: 3px; text-shadow: 0 1px 8px rgba(0,0,0,.7); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lm-body { padding: clamp(18px, 2.6vw, 26px); color: #C9CDD4; }
.lm-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lm-chips > span { display: inline-flex; align-items: baseline; gap: 7px; background: var(--term-panel); border: 1px solid var(--term-line); border-radius: 8px; padding: 9px 12px; }
.lm-chips .k { font: 600 9px 'Sora', 'Sora Fallback', sans-serif; letter-spacing: .13em; text-transform: uppercase; color: var(--term-dim); }
.lm-chips .v { font: 600 13.5px 'Sora', 'Sora Fallback', sans-serif; color: #fff; font-variant-numeric: tabular-nums; }
.lm-remarks { margin-top: 16px; font-size: 13.5px; line-height: 1.75; color: #A7ADB5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lm-note { margin-top: 14px; font-size: 11px; color: #7A8089; line-height: 1.6; }
.lm-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
.lm-ctas .btn-amber { grid-column: 1 / -1; white-space: normal; text-align: center; }
.lm-ctas .btn, .lm-ctas .msg-btn { justify-content: center; }
.lm-ctas .lm-save { background: #1A1D22; color: #fff; border: 1px solid rgba(242,179,54,.5); }
.lm-ctas .lm-save[aria-pressed="true"] { background: var(--amber); color: var(--ink); }
.lm-ctas .lm-save svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.lm-ctas .lm-save[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 560px) { .lm-ctas { grid-template-columns: 1fr; } .lm-hero { min-height: 220px; } }

/* ============================================================
   listings.html
   ============================================================ */
.sx-listings .k-hero-in { min-height: min(46vh, 440px); }
.sx-listings .k-hero-side .k-kpi .v .k-skel { height: 1.05em; width: 56%; margin-top: 0; } /* = the value line box (font 1.05 line-height): no shift when the count lands */
.sx-listings .k-filters-row .k-chips { flex: none; }
.sx-listings .k-filters-row .k-chip { min-height: 44px; padding: 6px 16px; }
.sx-listings .k-filters-body .k-fseg { gap: 8px 12px; }
.sx-short { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; white-space: nowrap; min-height: 34px; padding: 5px 13px 5px 11px; border-radius: 999px; border: 1.5px solid var(--k-line); background: var(--k-field); color: var(--k-text); font: 700 12.5px 'Sora', 'Sora Fallback', sans-serif; font-variant-numeric: tabular-nums; transition: border-color .15s ease, background .15s ease; }
.sx-short svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.sx-short.has svg { fill: var(--amber); stroke: var(--amber); }
.sx-short:hover { border-color: var(--ink); }
.sx-short .n { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 11px; font-weight: 800; }
.sx-short:not(.has) .n { background: var(--k-flat-bg); color: var(--k-dim); }
.sx-listings .k-filters-active .k-view { margin-left: 0; }
.sx-listings .k-filters-active .sx-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* live stamps get a green dot (amber = snapshot), hero and list alike */
.sx-listings .k-asof.is-live::before, .sx-exclusives .k-asof.is-live::before { background: #22A55B; box-shadow: 0 0 0 3px rgba(34,165,91,.2); }
.sx-listings .k-split-head { align-items: center; }
.sx-listings .k-split-head .k-asof { margin-right: auto; }
.sx-listings #f-hood { max-width: 204px; }
.sx-listings #f-min, .sx-listings #f-max { max-width: 128px; padding-right: 28px; background-position: right 11px center; } /* disabled until For sale / For rent is picked (the stops differ); slimmer chevron gutter so "Buy or rent?" is not clipped */
/* sort orders the list, it doesn't filter: it sits in the bar's second row with the shortlist and the view toggle
   (still sticky, and the first row fits one line at 1440). No data-filter, so it never counts as an active filter. */
.sx-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--k-dim); }
.sx-sort select { appearance: none; -webkit-appearance: none; cursor: pointer; min-height: 36px; padding: 6px 30px 6px 13px; border-radius: 999px; border: 1.5px solid var(--k-line); background: var(--k-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23888' stroke-width='1.6'/%3E%3C/svg%3E") right 12px center / 10px no-repeat; color: var(--k-text); color-scheme: light; font: 600 12.5px 'Sora', 'Sora Fallback', sans-serif; }
.sx-sort select:hover { border-color: var(--k-line-2); }
.sx-sort select:focus-visible { outline: 3px solid #8A5B00; outline-offset: 2px; }
.sx-listings .k-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx-listings .k-split[data-view="list"] .k-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1180px) { .sx-listings .k-split[data-view="list"] .k-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sx-listings .k-split[data-view="list"] .k-split-map { display: none; }
.sx-listings .k-split[data-view="list"] { grid-template-columns: minmax(0, 1fr); }
.sx-listings .k-empty { grid-column: 1 / -1; }
.sx-listings .k-map .k-skel-map { position: absolute; inset: 0; z-index: 0; border-radius: 0; }
.sx-areas { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-areas a.k-chip { text-decoration: none; }
.sx-areas a.k-chip:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.sx-areas .ct { color: var(--k-dim); } /* colour, not opacity: .55 failed 4.5:1 */
@media (max-width: 760px) {
  .sx-listings .k-filters-row { flex-wrap: wrap; }
  .sx-listings .k-filters-row .k-search { flex: 1 1 100%; }
  .sx-listings .k-filters-row .k-chips { flex: 1 1 auto; }
  .sx-listings .k-filters-row .k-chip { min-height: 42px; padding: 6px 14px; flex: 1 1 0; justify-content: center; }
  .sx-listings .k-filters-row .k-filters-toggle { margin-left: auto; }
  .sx-listings .k-cards, .sx-listings .k-split[data-view="list"] .k-cards { grid-template-columns: minmax(0, 1fr); }
  .sx-map-tools { left: 8px; top: 8px; }
  .sx-sort > span { display: none; }
  .sx-map-stamp { display: none; }
}
/* sticky geometry (UX audit 2026-10-13). --k-filters-h = the bar's height (listings.js, ResizeObserver);
   --sx-bar-hide = the part of it that scrolls away while stuck (phones: the search row);
   --sx-dock = the phone contact dock (site.css .ep-dock, 68px at 768px and below). */
.sx-listings #browse { --sx-bar-hide: 0px; --sx-dock: 0px; --sx-bar-vis: calc(var(--k-filters-h, 66px) - var(--sx-bar-hide)); }
/* a new page of results, a card scrolled to from its pin and a Map / List switch all land below
   the stuck bar: the kit's 8px scroll margin put the list head and the first 64px of the cards
   under the 125px bar at 1440 (186px on phones) */
.sx-listings #results-top { scroll-margin-top: calc(var(--k-stick) + var(--sx-bar-vis)); }
.sx-listings #rlist > * { scroll-margin-top: calc(var(--k-stick) + var(--sx-bar-vis) + 12px); }
.sx-listings #split { scroll-margin-top: calc(var(--k-stick) + var(--sx-bar-vis) + 10px); }
@media (max-width: 980px) {
  /* the floating Map / List button does this job from here down (was shown twice at 761-980px) */
  .sx-listings .k-filters-active .k-view { display: none; }
  /* map view fills the screen between the stuck bar and the dock (was 100svh - 150px: 40px under
     the dock and 186px under the bar on a 390 x 844 phone) */
  .sx-listings .k-split[data-view="map"] .k-map { height: calc(100vh - var(--k-stick) - var(--sx-bar-vis) - var(--sx-dock) - 20px); min-height: 320px; }
  @supports (height: 100svh) { .sx-listings .k-split[data-view="map"] .k-map { height: calc(100svh - var(--k-stick) - var(--sx-bar-vis) - var(--sx-dock) - 20px); } }
}
@media (max-width: 768px) { .sx-listings #browse { --sx-dock: 68px; } }
@media (max-width: 760px) {
  /* phones: the stuck bar was 186px (22% of a 390 x 844 screen, 30% with the dock). It now keeps
     Buy / Rent, Filters, sort and the shortlist; the search row scrolls away with the page (back at
     the top of the results, and while the field has focus), and the count lives in the list head
     and on the Map button (still announced: visually hidden, aria-live kept). */
  .sx-listings #browse { --sx-bar-hide: 52px; }
  .sx-listings #filters { top: calc(var(--k-stick) - var(--sx-bar-hide)); }
  .sx-listings #filters:has(#f-q:focus) { top: var(--k-stick); }
  .sx-listings #rcount { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* sort + shortlist share the row: the sort pill takes what is left, so the Spanish "Precio, de
     mayor a menor" is no longer cut to "Precio, de mayor a r" by the old 168px cap */
  .sx-listings .k-filters-active .sx-right { flex: 1 1 auto; min-width: 0; }
  .sx-listings .sx-sort { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .sx-sort select { max-width: 100%; }
}
@media (max-width: 380px) {
  /* 360px: heart + count only (the word stays the button's accessible name), so the longest
     Spanish sort label still fits beside it (161px of text, 145px of room before) */
  .sx-listings .sx-short { font-size: 0; gap: 6px; }
  .sx-listings .sx-short .n { font-size: 11px; }
}

/* "your search" line inside the lead form (what gets sent along) */
.sx-cur { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; border: 1px solid rgba(242,179,54,.45); background: rgba(242,179,54,.08); border-radius: 9px; padding: 11px 14px; }
.sx-cur .k { flex: none; font-size: 11px; font-weight: 700; color: var(--amber); }
.sx-cur .v { font-size: 13px; font-weight: 600; color: #fff; min-width: 0; overflow-wrap: anywhere; }

/* shortlist drawer */
/* visibility flips instantly on open (so the close button is focusable at once) and only after the slide on close */
.sx-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(11,13,16,.45); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility 0s linear .25s; }
.sx-scrim.on { opacity: 1; visibility: visible; transition: opacity .25s ease, visibility 0s; }
.sx-drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 96; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--paper); border-left: 1px solid var(--hairline); box-shadow: -24px 0 60px rgba(0,0,0,.25); transform: translateX(105%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s linear .28s; }
.sx-drawer.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.7,.2,1), visibility 0s; }
.sx-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--hairline); }
.sx-drawer-head h2 { font-size: 1.15rem; letter-spacing: -.02em; }
.sx-drawer-head small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--ink-soft); font-weight: 500; }
.sx-drawer-x { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--hairline); background: #fff; cursor: pointer; font-size: 18px; line-height: 1; color: var(--ink); }
.sx-drawer-x:hover { border-color: var(--ink); }
.sx-drawer-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; display: grid; gap: 10px; align-content: start; }
.sx-dr-item { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px; border: 1px solid var(--hairline); border-radius: 12px; background: #FBFAF7; }
.sx-dr-item img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; background: rgba(16,17,20,.07); display: block; }
.sx-dr-item .sx-dr-ph { width: 96px; height: 72px; border-radius: 8px; background: repeating-linear-gradient(135deg, rgba(16,17,20,.06) 0 6px, transparent 6px 12px); }
.sx-dr-item .p { font: 700 14px 'Sora', 'Sora Fallback', sans-serif; font-variant-numeric: tabular-nums; }
.sx-dr-item .p small { font-weight: 600; color: var(--ink-soft); font-size: 11px; margin-left: 4px; }
.sx-dr-item .a { font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sx-dr-item .a a { color: inherit; text-decoration: none; }
.sx-dr-item .a a:hover { text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 3px; }
.sx-dr-item .m { font-size: 11.5px; color: var(--ink-soft); margin-top: 2px; }
.sx-dr-rm { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hairline); background: #fff; cursor: pointer; color: var(--ink-soft); font-size: 15px; line-height: 1; }
.sx-dr-rm:hover { border-color: var(--ink); color: var(--ink); }
.sx-drawer-foot { padding: 14px 20px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--hairline); display: grid; gap: 10px; background: #fff; }
.sx-drawer-foot .btn { width: 100%; justify-content: center; }
.sx-drawer-foot .msg-btns { margin: 0; }
.sx-drawer-foot .msg-btn { padding: 11px 12px; font-size: 13px; }
.sx-drawer-foot .msg-btns { grid-template-columns: 1fr 1fr; } /* side by side on phones too: the stacked pair made the sheet's foot 215px of a 709px sheet (UX 2026-10-13) */
.sx-drawer-foot .sx-dr-clear { justify-self: center; cursor: pointer; border: 0; background: none; padding: 6px 2px; font: 600 12px 'Sora', 'Sora Fallback', sans-serif; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; }
.sx-drawer-empty { padding: 40px 20px; text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.65; }
.sx-drawer-empty svg { width: 36px; height: 36px; margin: 0 auto 12px; display: block; fill: none; stroke: #8A5B00; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sx-drawer-empty b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 6px; }
@media (max-width: 760px) {
  .sx-drawer { top: auto; left: 0; width: 100%; max-height: min(84vh, 720px); border-left: 0; border-top: 1px solid var(--hairline); border-radius: 18px 18px 0 0; transform: translateY(105%); }
  .sx-drawer.open { transform: none; }
}

/* ============================================================
   listing.html
   ============================================================ */
.sx-listing .k-sec { padding-block: clamp(44px, 6vw, 72px); }
.sx-lhead-wrap { padding: 18px 0 14px; }
.sx-lhead { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 40px; align-items: end; margin-top: 14px; }
.sx-lhead h1 { font-size: clamp(1.8rem, 3.5vw, 2.75rem); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; margin-top: 12px; overflow-wrap: anywhere; }
.sx-lsub { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.sx-lsub a { color: inherit; text-underline-offset: 3px; }
.sx-lprice { text-align: right; min-width: 0; }
.sx-lprice .p { font: 800 clamp(1.8rem, 3.4vw, 2.9rem)/1 'Sora', 'Sora Fallback', sans-serif; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); }
.sx-lprice .p small { font-size: .42em; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }
.sx-lprice .s { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.sx-lprice .s b { color: var(--ink); font-weight: 600; }
.sx-lnote { margin-top: 16px; padding: 12px 16px; border-left: 3px solid var(--amber); border-radius: 0 10px 10px 0; background: #FBFAF7; font-size: 14px; line-height: 1.65; color: var(--ink-soft); max-width: 38em; }
.sx-lnote b { color: var(--ink); }
.sx-ltools { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 18px; margin-top: 16px; }
.sx-ltools[hidden] { display: none; }
.sx-ltools .k-share-k { margin-right: 0; }
.sx-skel-head .k-skel { max-width: 100%; }
/* while /api/listing answers, the skeletons hold the rendered heights (measured 2026-10-09), so the gallery doesn't jump */
#l-head-body:has(.sx-skel-head) { min-height: 119px; }
#l-specs:empty { min-height: 80px; }
@media (max-width: 980px) { #l-head-body:has(.sx-skel-head) { min-height: 110px; } #l-specs:empty { min-height: 139px; } }
@media (max-width: 700px) { #l-head-body:has(.sx-skel-head) { min-height: 200px; } #l-specs:empty { min-height: 189px; } }
.sx-gallery { position: relative; }
.sx-gallery .k-gallery[data-n="1"] { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr; }
.sx-gallery .k-gallery[data-n="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.sx-gallery .k-gallery[data-n="2"] > *:first-child { grid-row: auto; }
.sx-gallery .k-gallery[data-n="3"] { grid-template-columns: 2fr 1fr; }
.sx-gallery .k-gallery[data-n="4"] > *:nth-child(4) { grid-column: 2 / -1; }
.sx-gallery-all { position: absolute; right: 12px; bottom: 12px; z-index: 2; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(11,13,16,.72); color: #fff; font: 700 12.5px 'Sora', 'Sora Fallback', sans-serif; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sx-gallery-all svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sx-gallery-all:hover { border-color: var(--amber); }
.sx-gallery .k-skel { border-radius: 0; }
.sx-nophotos { display: grid; place-items: center; height: clamp(200px, 30vw, 320px); border-radius: var(--radius); border: 1px dashed var(--k-line-2); color: var(--ink-soft); font-size: 14px; text-align: center; padding: 20px; }
.sx-specs-wrap { margin-top: 14px; }
.sx-home { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.sx-lede { font-size: clamp(16.5px, 1.7vw, 19.5px); line-height: 1.7; color: var(--ink); max-width: 36em; letter-spacing: -.01em; }
.sx-lede b { background-image: linear-gradient(transparent 78%, rgba(242,179,54,.65) 78%, rgba(242,179,54,.65) 96%, transparent 96%); }
.sx-quote { margin: 22px 0 0; border-left: 3px solid var(--amber); padding: 4px 0 4px 22px; max-width: 36em; }
.sx-quote p { font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.sx-quote figcaption { margin-top: 10px; font-size: 12.5px; font-weight: 700; color: #8A5B00; }
.sx-feats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sx-feats span, .sx-feats button { font: 600 12.5px 'Sora', 'Sora Fallback', sans-serif; color: var(--ink); border: 1px solid var(--hairline); background: #fff; border-radius: 999px; padding: 7px 13px; }
.sx-feats button { cursor: pointer; color: #8A5B00; border-style: dashed; border-color: rgba(242,179,54,.7); }
.sx-feats button:hover { background: rgba(242,179,54,.12); }
.sx-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; }
.sx-photos button { padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius); background: var(--k-skel); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3.1; }
.sx-photos img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .2s ease; }
.sx-photos button:hover img { filter: brightness(1.06); }
.sx-facts-card { border: 1px solid var(--hairline); border-radius: 14px; background: #FBFAF7; padding: clamp(20px, 3vw, 28px); }
.sx-facts-card h3 { font-size: 1.1rem; margin-bottom: 4px; }
.sx-fgroup { margin-top: 18px; font-size: 11.5px; font-weight: 700; color: #8A5B00; }
.sx-fgroup:first-of-type { margin-top: 10px; }
.sx-facts-card .k-facts { grid-template-columns: minmax(0, 1fr); border-top: 0; margin-top: 6px; }
.sx-facts-card .k-facts > div { padding: 9px 0; font-size: 13.5px; }
.sx-facts-card .btn { width: 100%; justify-content: center; margin-top: 18px; white-space: normal; text-align: center; }
.sx-facts-card .btn + .btn { margin-top: 10px; }
.sx-note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--ink-soft); }
@media (max-width: 860px) { .sx-home { grid-template-columns: minmax(0, 1fr); } }
.sx-unfold { display: none; }
@media (max-width: 700px) {
  .sx-lhead { grid-template-columns: minmax(0, 1fr); align-items: start; } .sx-lprice { text-align: left; } .sx-lprice .p { white-space: normal; }
  .sx-photos { gap: 8px; margin-top: 18px; }
  .sx-quote.is-folded p { display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; }
  .sx-quote.is-folded .sx-unfold { display: inline-block; margin-top: 8px; padding: 6px 0; border: 0; background: none; cursor: pointer; font: 700 13px 'Sora', 'Sora Fallback', sans-serif; color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber); text-underline-offset: 4px; }
}

/* the numbers (dark band) */
.sx-cost-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin: 0 0 16px; }
.sx-cost-ctl > div { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; }
.sx-ctl-k { font-size: 12px; font-weight: 700; color: var(--k-dim); margin-right: 2px; }
.sx-rate { display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--k-line); background: var(--k-field); }
.sx-rate input { width: 54px; background: none; border: 0; outline: none; color: var(--k-text); font: 700 13.5px 'Sora', 'Sora Fallback', sans-serif; font-variant-numeric: tabular-nums; }
.sx-rate span { font-size: 13px; font-weight: 600; color: var(--k-dim); }
.sx-rate:focus-within { border-color: var(--amber); }
.sx-cost-note { margin-top: 14px; font-size: 12px; line-height: 1.6; color: var(--k-dim); max-width: 38em; }
.sx-cost-note a { color: var(--k-text); text-underline-offset: 2px; }
.sx-hist-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin: 34px 0 12px; }
.sx-hist-h h3 { font-size: 1.1rem; color: #fff; }
.sx-hist-h span { font-size: 12px; color: var(--k-dim); }
.sx-listing .term .k-table td.sx-ev span { display: inline-block; font: 700 9.5px 'Sora', 'Sora Fallback', sans-serif; letter-spacing: .1em; text-transform: uppercase; border-radius: 4px; padding: 3px 7px; background: rgba(255,255,255,.1); color: #C9CDD4; }
.sx-listing .term .k-table td.sx-ev span.sale { background: rgba(242,179,54,.16); color: var(--amber); }
.sx-listing .term .k-table tr.is-this td { background: rgba(242,179,54,.07); }
.sx-none { font-size: 13.5px; color: var(--k-dim); line-height: 1.7; padding: 6px 0 2px; max-width: 38em; }
.sx-flag { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 20px; padding: 15px 18px; border-radius: 12px; background: rgba(242,179,54,.12); border: 1px solid rgba(242,179,54,.5); text-decoration: none; color: #fff; transition: background .15s ease; }
.sx-flag:hover { background: rgba(242,179,54,.2); }
.sx-flag .k { font: 800 10.5px 'Sora', 'Sora Fallback', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); flex: none; }
.sx-flag .v { font: 700 13.5px 'Sora', 'Sora Fallback', sans-serif; }
.sx-flag .arr { margin-left: auto; color: var(--amber); }

/* where it sits: map + sidebar */
.sx-where { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.sx-where .k-map { height: clamp(320px, 42vw, 520px); min-height: 0; max-height: none; aspect-ratio: auto; } /* fixed height: the kit's phone aspect-ratio would size the width */
.sx-map-toggle { position: absolute; left: 10px; top: 10px; z-index: 500; display: inline-flex; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.94); border: 1px solid var(--hairline); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.sx-map-toggle button { cursor: pointer; min-height: 30px; padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font: 700 12px 'Sora', 'Sora Fallback', sans-serif; }
.sx-map-toggle button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.sx-where-side { display: grid; gap: 14px; }
.sx-where-side .k-kv div:first-child { border-top: 0; }
.sx-where-side .k-card-body h3 { font-size: 1.05rem; }
.sx-where-side .k-bldg .k-card-img { aspect-ratio: 16 / 9; }
.sx-where-side .sx-links { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-where-side .sx-links a { text-decoration: none; }
@media (max-width: 860px) { .sx-where { grid-template-columns: minmax(0, 1fr); } }

/* error + missing states */
.sx-missing { max-width: 640px; margin: 0 auto; text-align: center; padding: clamp(40px, 7vw, 80px) 0; }
.sx-missing svg { width: 44px; height: 44px; margin: 0 auto 16px; display: block; fill: none; stroke: #8A5B00; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sx-missing h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.03em; text-wrap: balance; }
.sx-missing p { margin: 14px auto 0; max-width: 34em; font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); }
.sx-missing .acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.sx-missing .acts .btn { padding: 12px 20px; font-size: 14px; }
.sx-listing .k-sec.sx-lead-only { padding-top: 0; }

/* ============================================================
   exclusives.html
   ============================================================ */
.sx-exclusives .k-hero-in { min-height: min(50vh, 480px); }
.sx-xbar { margin-bottom: 18px; }
.sx-xbar .k-filters-in { padding: 12px 14px; }
.sx-xbar .k-filters-row { gap: 10px; }
.sx-xbar .k-chips { flex: 1 1 auto; }
.sx-xsel { display: flex; gap: 8px; flex: 0 1 auto; min-width: 0; }
/* nothing pressed: the empty sheet body and active row would leave a blank strip in the card */
.sx-xbar .k-filters-body:empty { display: none; }
.sx-xbar .k-filters-active:not(:has(.k-achip)):has(.k-reset[hidden]) { display: none; }
.sx-more { display: flex; justify-content: center; margin-top: 22px; }
.sx-more[hidden] { display: none; }
.sx-exclusives .k-grid.sx-xgrid { gap: 14px; }
.sx-xsub { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 14px; }
.sx-xsub h3 { font-size: 1.15rem; letter-spacing: -.01em; }
.sx-xsub span { font-size: 12.5px; color: var(--ink-soft); }
.sx-points .k-card-body { padding: 22px 22px 24px; gap: 8px; }
.sx-points .k-card-body svg { width: 26px; height: 26px; fill: none; stroke: #8A5B00; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 6px; }
.sx-points .k-card-body h3 { font-size: 1.08rem; }
.sx-exclusives .k-card.is-link .k-card-body { padding: 22px 22px 24px; }
.sx-exclusives .k-card.is-link h3 { font-size: 1.1rem; }
@media (max-width: 760px) {
  .sx-xbar .k-filters-body { display: none; }
  .sx-xbar .k-filters-toggle { display: none; }
  .sx-xbar .k-filters-row { flex-wrap: wrap; }
  .sx-xbar .k-filters-row .k-chips { flex: 1 1 100%; }
  .sx-xbar .k-filters-row .k-chip { flex: 1 1 0; justify-content: center; }
  .sx-xsel { flex: 1 1 100%; }
  .sx-xsel .k-select { flex: 1 1 0; }
  .sx-xsel .k-select select { width: 100%; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-pin, .sx-drawer, .sx-scrim, .sx-switch .sw, .sx-switch .sw::after, .sx-promo a { transition: none; }
  .lm-panel { animation: none; }
}

/* ---------- audit fixes (2026-10-09, search-market) ----------
   1. The hidden attribute must win on these pages: .btn / .sx-drawer-foot set display,
      so #lo-tour ("Walk the 3D tour", href="#") showed on listings with no tour and the
      empty shortlist drawer showed its Send / WhatsApp foot.
   2. site.css .lead-grid is a plain 1fr track: the lead form's min-content (selects +
      padding) stretched it to 342px at a 360px viewport (2px page overflow). */
.sx-listings [hidden], .sx-listing [hidden], .sx-exclusives [hidden] { display: none !important; }
.sx-listings .lead-grid > *, .sx-listing .lead-grid > *, .sx-exclusives .lead-grid > * { min-width: 0; }
/* 3. exclusives Type / Sort pair at 360: the kit's 36px chevron gutter clipped "Highest price" by 3px */
@media (max-width: 380px) {
  .sx-xsel .k-select select { padding-right: 28px; padding-left: 12px; background-position: right 10px center; }
}
/* 4. CLS (Lighthouse mobile 0.03 on listings): the first paint lands before the end-of-body
      scripts render the cards, so the data note under the empty #rlist sat in view and was
      pushed down (0.04 at 1440); the hero stamp also changed line count when the feed landed
      (0.009 on phones). Reserve the list and two stamp lines on narrow screens. */
.sx-listings #rlist:empty { min-height: 150vh; }
@media (max-width: 480px) { .sx-listings #hero-asof { min-height: 36px; } }

/* listing.html: reserve a screen for the record (QA 10-09, ticket convert-craft-1). The
   sections fill in after /api/listing answers; without this the footer started near the
   top and jumped down (CLS 0.089 at 390 on the not-found state). */
body.sx-listing main#main { min-height: 100vh; min-height: 100svh; }

/* ---------- UX audit 2026-10-13 (ux-search) ----------
   listing.html, the honest states (gone / down / bad link): the message sat 152px under the crumbs
   (section padding + the block's own 80px) with 300-450px of blank paper under it, because main
   reserves a screen while the record loads (CLS guard above). The message now sits in the middle
   of that reserved screen; nothing moves when it renders (the space was already there). */
body.sx-listing main#main:has(> #lmissing:not([hidden])) { display: flex; flex-direction: column; }
body.sx-listing #lmissing:not([hidden]) { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; }
body.sx-listing #lmissing .sx-missing { padding-block: 0; }
/* pin tap: one small link to the full listing page (replaces the quick-look sheet, 2026-10-20) */
.sx-map .leaflet-popup-content { margin: 10px 12px; }
.sx-pop { display: grid; gap: 2px; text-decoration: none; color: var(--ink); font-size: 12.5px; line-height: 1.3; min-width: 150px; }
.sx-pop b { font-size: 14px; font-weight: 800; }
.sx-pop span { color: var(--ink-soft); }
.sx-pop:hover span, .sx-pop:focus-visible span { color: var(--ink); text-decoration: underline; }