/* ============================================================
   /properties — search results: sticky filter bar + results grid,
   with a sticky Mapbox map beside the grid when a token is configured.
   ============================================================ */

/* ---- filter bar ---------------------------------------------------- */
.filterBar {
  position: sticky; top: var(--header-h); z-index: 40;
  background: var(--white); border-bottom: 1px solid var(--hairline);
  view-transition-name: search;
}
.filterBar__row {
  /* one row at every width: pills fold into "Filters" instead of wrapping
     (components/filter-bar.js measures the overflow) */
  display: flex; align-items: center; gap: var(--sp-2) var(--sp-3);
  padding-block: var(--sp-3);
}
.filterBar__loc { position: relative; flex: 1 1 280px; min-width: 150px; max-width: 420px; }
.filterBar__loc .ico {
  position: absolute; left: 12px; top: 50%; translate: 0 -50%;
  width: 18px; height: 18px; color: var(--slate); pointer-events: none;
}
.filterBar__loc .boxField { width: 100%; padding-left: 38px; }
.filterBar__loc .boxField::-webkit-search-cancel-button { cursor: pointer; }
.filterBar__opts { flex: none; display: flex; align-items: center; gap: var(--sp-2); }
.filterBar .segmented { flex: none; }
.filterBar .segmented__opt span { padding: 7px 14px; }
.filterBar [data-collapsed] { display: none; }

/* ---- filter pills ---------------------------------------------------- */
.filterPill {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 12px 0 16px;
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-md);
  background: var(--white); color: var(--charcoal);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.filterPill:hover { border-color: var(--slate); }
.filterPill:focus-visible { outline: none; border-color: var(--ocean); box-shadow: 0 0 0 4px var(--focus-halo); }
.filterPill__chev { width: 14px; height: 14px; stroke-width: 2.4; color: var(--slate); rotate: 90deg; transition: rotate var(--dur-fast) var(--ease); }
.filterPill.is-open { border-color: var(--ocean); }
.filterPill.is-open .filterPill__chev { rotate: -90deg; }
.filterPill.is-set { border-color: var(--ocean); background: var(--seafoam-tint); color: var(--ocean-deep); }
.filterPill.is-set .filterPill__chev { color: var(--ocean); }
.filterPill[hidden] { display: none; }
/* "Listings I manage": an on/off toggle, not a popover — no chevron. */
.filterPill--mine .ico { width: 16px; height: 16px; }
.filterPill--all { padding-inline: 14px; }
.filterPill--all .ico { width: 18px; height: 18px; stroke-width: 2; color: var(--ocean); }
.filterPill__count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--ocean-deep); color: var(--white);
  font-size: var(--fs-xs); line-height: 1;
}
.filterPill__count[hidden] { display: none; }

/* ---- popover panels (anchored by filter-bar.js; top layer, so the
        sticky bar and the results scroller never clip them) --------- */
.filterPop {
  inset: auto; margin: 0; padding: 0;
  width: min(360px, calc(100vw - 2 * var(--sp-2)));
  border: 1px solid var(--hairline); border-radius: var(--r-lg);
  background: var(--white); color: var(--charcoal); box-shadow: var(--shadow-lift);
  overflow: hidden;
}
.filterPop:popover-open { display: flex; flex-direction: column; }
.filterPop--all { width: min(460px, calc(100vw - 2 * var(--sp-2))); }
@media (prefers-reduced-motion: no-preference) {
  .filterPop {
    transition: opacity var(--dur-fast) var(--ease), translate var(--dur-med) var(--ease),
      display var(--dur-fast) allow-discrete, overlay var(--dur-fast) allow-discrete;
  }
  .filterPop:not(:popover-open) { opacity: 0; translate: 0 -6px; }
  @starting-style { .filterPop:popover-open { opacity: 0; translate: 0 -6px; } }
}
.filterPop__title { padding: var(--sp-5) var(--sp-5) 0; font-size: var(--fs-lg); color: var(--ocean-deep); letter-spacing: -.01em; }
.filterPop__body {
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--sp-5); padding: var(--sp-5);
}
.filterPop--all .fGroup:not([hidden]) ~ .fGroup:not([hidden]) { padding-top: var(--sp-5); border-top: 1px solid var(--hairline); }
.filterPop__foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--hairline); background: var(--white);
}
.filterPop__foot .btn { font-variant-numeric: tabular-nums; }
.filterPop__reset {
  padding: var(--sp-2) 0; border: 0; background: none;
  font-size: var(--fs-sm); font-weight: 700; color: var(--ocean);
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px;
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.filterPop__reset:hover { text-decoration-color: currentColor; }
.filterPop__reset:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }

.fGroup__title { margin-bottom: var(--sp-3); font-size: var(--fs-sm); font-weight: 700; color: var(--charcoal); }

/* chips: one-of-a-few choices */
.fChips--chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fChip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 14px;
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-pill);
  background: var(--white); color: var(--slate);
  font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums;
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.fChip:hover { border-color: var(--ocean); color: var(--ocean-deep); }
.fChip[aria-pressed="true"] { border-color: var(--ocean-deep); background: var(--ocean-deep); color: var(--white); }
.fChip:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

/* list: the same choice read as a menu (home type) */
.fChips--list { display: grid; gap: 2px; margin-inline: calc(-1 * var(--sp-2)); }
.fChips--list .fChip {
  justify-content: flex-start; min-height: 44px; padding: 0 var(--sp-3);
  border: 0; border-radius: var(--r-sm); color: var(--charcoal);
}
.fChips--list .fChip:hover { background: var(--seafoam-tint); color: var(--ocean-deep); }
.fChips--list .fChip[aria-pressed="true"] { background: var(--seafoam-tint); color: var(--ocean-deep); }
.fChip__check { width: 18px; height: 18px; stroke-width: 2.4; color: var(--turquoise-ink); visibility: hidden; }
.fChip[aria-pressed="true"] .fChip__check { visibility: visible; }

/* price: presets, then an exact range */
.fRange { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: var(--sp-2); margin-top: var(--sp-4); }
.fRange[hidden], .fChips[hidden], .fNote[hidden] { display: none; }
.fRange__dash { width: 10px; height: 1.5px; margin-bottom: 21px; background: var(--hairline-strong); }
.fRange__field { display: grid; gap: 6px; min-width: 0; }
.fRange__field > span:first-child { font-size: var(--fs-xs); font-weight: 700; color: var(--slate); }
.fRange__box { position: relative; }
.fRange__box > span { position: absolute; left: 12px; top: 50%; translate: 0 -50%; font-size: var(--fs-sm); color: var(--slate); pointer-events: none; }
.fRange__box .boxField { width: 100%; padding-left: 26px; font-variant-numeric: tabular-nums; }
.fNote p { margin-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--slate); max-width: 38ch; }

/* amenities: independent toggles */
.fChecks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: var(--sp-2); }
.fCheck { position: relative; }
.fCheck input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.fCheck > span {
  display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px var(--sp-3);
  border: 1.5px solid var(--hairline-strong); border-radius: var(--r-md);
  font-size: var(--fs-sm); color: var(--charcoal); line-height: var(--lh-snug);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.fCheck__tick {
  width: 18px; height: 18px; padding: 2px; flex: none;
  border: 1.5px solid var(--hairline-strong); border-radius: 5px;
  stroke: transparent; stroke-width: 3;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fCheck:hover > span { border-color: var(--ocean); }
.fCheck input:checked + span { border-color: var(--ocean); background: var(--seafoam-tint); color: var(--ocean-deep); font-weight: 700; }
.fCheck input:checked + span .fCheck__tick { background: var(--ocean-deep); border-color: var(--ocean-deep); stroke: var(--white); }
.fCheck input:focus-visible + span { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.clearBtn {
  flex: none; display: inline-flex; align-items: center; gap: 6px;
  height: 44px; padding: 0 var(--sp-3); border: 0; border-radius: var(--r-md);
  background: transparent; font-weight: 700; font-size: var(--fs-sm); color: var(--ocean);
  transition: background-color var(--dur-fast) var(--ease);
}
.clearBtn:hover { background: var(--seafoam-tint); }
.clearBtn .ico { width: 1em; height: 1em; stroke-width: 2.2; }
.clearBtn[hidden] { display: none; }

/* ---- results header ------------------------------------------------ */
/* title on its own line; the count and Sort share the row under it */
.resultsHead { display: grid; gap: var(--sp-3); padding-block: var(--sp-6) var(--sp-5); }
.resultsHead__meta { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.resultsHead h1 { font-size: var(--fs-2xl); letter-spacing: -.02em; color: var(--charcoal); overflow-wrap: anywhere; }
.resultsHead__count { min-width: 0; font-size: var(--fs-sm); color: var(--slate); min-height: 1.55em; }
.resultsHead__sort { flex: none; display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--slate); }
.resultsHead__sort label { font-weight: 700; color: var(--ocean-deep); }

.results { container: results / inline-size; padding-bottom: var(--sp-6); }
/* design-width cards (photo 220px, body below) that stretch to fill the row */
.results .listingGrid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.results__more { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); margin-top: var(--sp-7); }
.results__more[hidden] { display: none; }
.results__progress { font-size: var(--fs-xs); color: var(--slate); }
.results__note { margin-top: var(--sp-6); font-size: var(--fs-xs); color: var(--stone); text-align: center; }

/* site footer closes the results column (it scrolls with the list), set as a
   tinted panel that echoes the map's corners; reflows to the column's width */
.results .siteFooter {
  margin-top: var(--sp-8); padding: var(--sp-7) var(--sp-6) var(--sp-5);
  border: 1px solid var(--hairline); border-radius: var(--r-photo);
}
.results .siteFooter .wrap { max-width: none; padding-inline: 0; }
.resultsLayout.has-map .results { padding-bottom: var(--map-inset); }
@container results (max-width: 760px) {
  .siteFooter__top { grid-template-columns: repeat(3, 1fr); }
  .siteFooter__about { grid-column: 1 / -1; }
  .siteFooter__bottom { margin-top: var(--sp-6); }
}
@container results (max-width: 480px) {
  .results .siteFooter { padding: var(--sp-6) var(--sp-5) var(--sp-5); }
  .siteFooter__top { grid-template-columns: repeat(2, 1fr); }
}
@container results (max-width: 340px) {
  .siteFooter__top { grid-template-columns: 1fr; }
}

/* ---- results + map split ------------------------------------------ */
.resultsLayout { --filterbar-h: 69px; } /* 44px controls + 2 × 12px padding + 1px rule */
/* with a map the split runs edge to edge (grid 35% / map 65%): the grid is
   inset from the viewport by --split-pad (the filter bar lines up with it),
   the map by a tight --map-inset on all four sides */
body:has(.resultsLayout.has-map) {
  --split-pad: clamp(var(--sp-5), 2.5vw, var(--sp-7));
  --map-inset: var(--sp-2);
}
/* the header spans the same full width: brand hard left, nav hard right */
.resultsLayout.has-map,
body:has(.resultsLayout.has-map) .siteHeader__row,
main:has(.resultsLayout.has-map) .filterBar__row { max-width: none; padding-inline: var(--split-pad); }
/* the split fills the viewport under the filter bar: the results column is
   the scroller, the map stays put beside it */
.resultsLayout.has-map {
  display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 65fr);
  gap: var(--map-inset); align-items: stretch;
  padding-right: var(--map-inset);
}
/* beside a map the page itself never scrolls: header + filter bar + the split
   fill exactly one screen, and only the results column scrolls (the footer
   lives at its end). Stacked layouts below 1001px scroll as a normal page. */
@media (min-width: 1001px) {
  body:has(.resultsLayout.has-map) { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body:has(.resultsLayout.has-map) > main { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .resultsLayout.has-map { flex: 1; min-height: 0; }
}
.resultsLayout.has-map .results {
  min-height: 0; overflow-y: auto; scrollbar-gutter: stable;
  /* the scrollbar only shows while the list is moving (.is-scrolling is set
     by pages/properties.js); the gutter is reserved, so nothing shifts */
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  /* room for card shadows and focus rings the scroller would clip */
  padding-left: var(--sp-2); margin-left: calc(-1 * var(--sp-2));
}
.resultsLayout.has-map .results.is-scrolling { scrollbar-color: var(--slate) transparent; }
@supports not (scrollbar-color: auto) { /* Safari */
  .resultsLayout.has-map .results::-webkit-scrollbar { width: 8px; }
  .resultsLayout.has-map .results::-webkit-scrollbar-thumb { border-radius: var(--r-pill); background: transparent; }
  .resultsLayout.has-map .results.is-scrolling::-webkit-scrollbar-thumb { background: var(--slate); }
}
.resultsMap[hidden] { display: none; }
.resultsMap {
  min-height: 0; margin-block: var(--map-inset);
  overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-photo);
  background: var(--seafoam-tint);
}
.resultsMap__canvas { width: 100%; height: 100%; }

/* price pins. Mapbox owns the button's `transform` (it places the marker),
   so the button stays still and every hover effect lives on its body. */
.mapPin { padding: 0; border: 0; background: none; cursor: pointer; }
.mapPin__body {
  position: relative; display: block;
  padding: 5px 10px; border: 1.5px solid var(--white); border-radius: var(--r-pill);
  font: 700 var(--fs-xs) / 1.2 var(--font-sans); font-variant-numeric: tabular-nums; white-space: nowrap;
  box-shadow: var(--shadow-med);
  transform-origin: 50% calc(100% + 5px); /* grow from the tail's tip, which marks the address */
  transition: scale var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.mapPin__body::after { /* tail pointing at the address */
  content: ""; position: absolute; left: 50%; bottom: -5px; width: 8px; height: 8px;
  background: inherit; border: solid var(--white); border-width: 0 1.5px 1.5px 0;
  translate: -50% 0; rotate: 45deg;
}
.mapPin--rent .mapPin__body { background: var(--rental-ink); color: var(--white); }
.mapPin--sale .mapPin__body { background: var(--sale); color: var(--charcoal); }
.mapPin:hover, .mapPin.is-active { z-index: 2; }
.mapPin:hover .mapPin__body, .mapPin.is-active .mapPin__body { scale: 1.12; background: var(--ocean-deep); color: var(--white); }
.mapPin:focus-visible { outline: none; }
.mapPin:focus-visible .mapPin__body { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* a pin whose label would overlap another (results-map.js declutter) shrinks
   to a dot centred on its address; hover / focus / highlight bring the label
   back, above its neighbours. Dots sit over labels so none is ever hidden. */
.mapPin.is-dot { z-index: 1; }
.mapPin.is-dot:not(:hover, :focus-visible, .is-active) .mapPin__body {
  width: 14px; height: 14px; padding: 0; overflow: hidden;
  font-size: 0; border-width: 2px;
  translate: 0 13px; /* body bottom sits 6px (marker offset) above the point; + half the dot */
}
.mapPin.is-dot:not(:hover, :focus-visible, .is-active) .mapPin__body::after { display: none; }
.mapPin.is-dot:hover, .mapPin.is-dot:focus-visible, .mapPin.is-dot.is-active { z-index: 3; }
/* the label pops up above the dot's spot; this strip keeps that spot part of
   the button, so the pointer that summoned the label is still "on" it
   (otherwise hover drops, the dot returns under the cursor, and it flickers) */
.mapPin.is-dot::before {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 16px; height: 16px; translate: -50% 0;
}

/* cluster badges: nearby pins folded into a count; a click zooms in until
   they split. Same rule as pins: Mapbox owns the button's `transform`. */
.mapCluster { padding: 0; border: 0; background: none; cursor: pointer; }
.mapCluster__body {
  display: grid; place-items: center;
  min-width: 36px; height: 36px; padding: 0 var(--sp-2);
  border: 2px solid var(--white); border-radius: var(--r-pill);
  background: var(--ocean-deep); color: var(--white);
  font: 700 var(--fs-sm) / 1 var(--font-sans); font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow-med);
  transition: scale var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.mapCluster:hover, .mapCluster.is-active { z-index: 2; }
.mapCluster:hover .mapCluster__body, .mapCluster.is-active .mapCluster__body { scale: 1.12; background: var(--ocean); }
.mapCluster:focus-visible { outline: none; }
.mapCluster:focus-visible .mapCluster__body { outline: 3px solid var(--focus-ring); outline-offset: 2px; }

.resultsMap .mapboxgl-popup-content {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  box-shadow: var(--shadow-lift); font-family: var(--font-sans);
}
.mapPopup { display: grid; gap: 2px; }
.mapPopup__price { font-size: var(--fs-md); font-weight: 700; color: var(--turquoise-ink); font-variant-numeric: tabular-nums; }
.mapPopup__price small { font-size: var(--fs-xs); color: var(--stone); }
.mapPopup__title { font-size: var(--fs-sm); font-weight: 700; color: var(--charcoal); }
.mapPopup__place { font-size: var(--fs-xs); color: var(--slate); }
.mapPopup__more {
  justify-self: start; display: inline-flex; align-items: center; gap: var(--sp-1);
  margin-top: var(--sp-2); padding: 0; border: 0; background: none;
  font-weight: 700; font-size: var(--fs-xs); color: var(--ocean);
}
.mapPopup__more .ico { width: 1em; height: 1em; stroke-width: 2.2; }
.mapPopup__more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  /* map-first: when the split no longer fits, the map fills the screen under
     the header; the search + Filters float over its top, and the results ride
     along the bottom as a swipeable carousel whose centred card is the
     selected one (pages/properties.js pans the map to its pin). */
  body:has(.resultsLayout.has-map) { --split-pad: var(--gutter); height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
  body:has(.resultsLayout.has-map) > main { position: relative; flex: 1; min-height: 0; }

  main:has(.resultsLayout.has-map) .filterBar {
    position: absolute; top: var(--sp-3); left: 50%; translate: -50% 0; z-index: 40;
    width: min(560px, calc(100% - 2 * var(--gutter)));
    background: none; border: 0;
  }
  main:has(.resultsLayout.has-map) .filterBar__row {
    padding: 6px; gap: 6px;
    background: var(--white); border: 1px solid var(--hairline); border-radius: var(--r-lg);
    box-shadow: var(--shadow-lift);
  }
  main:has(.resultsLayout.has-map) .filterBar__loc { flex: 1 1 auto; max-width: none; min-width: 0; }
  main:has(.resultsLayout.has-map) .filterBar__loc .boxField { border-color: transparent; background: var(--seafoam-tint); }
  main:has(.resultsLayout.has-map) .filterBar__loc .boxField:focus { border-color: var(--ocean); background: var(--white); }

  .resultsLayout.has-map { position: absolute; inset: 0; display: block; padding: 0; max-width: none; }
  .resultsLayout.has-map .resultsMap { position: absolute; inset: 0; margin: 0; border: 0; border-radius: 0; }
  /* the floating search bar owns the top edge; pinch and wheel still zoom */
  .resultsLayout.has-map .resultsMap .mapboxgl-ctrl-zoom-in,
  .resultsLayout.has-map .resultsMap .mapboxgl-ctrl-zoom-out { display: none; }
  .resultsLayout.has-map .resultsMap .mapboxgl-ctrl-group:not(:has(button:not(.mapboxgl-ctrl-zoom-in, .mapboxgl-ctrl-zoom-out))) { display: none; }

  .resultsLayout.has-map .results {
    --card-w: min(326px, calc(100vw - 2 * var(--gutter) - var(--sp-6)));
    position: absolute; left: 0; right: 0; bottom: calc(var(--sp-4) + env(safe-area-inset-bottom));
    z-index: 3; overflow: visible; padding: 0; margin: 0;
    pointer-events: none; /* the map stays draggable around the cards */
    container-type: normal;
  }
  /* the heading and count stay for screen readers; the rest is the page's
     scrolling furniture, which a full-screen map has no room for */
  .resultsLayout.has-map .resultsHead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .resultsLayout.has-map :is(.results__more, .results__note, .siteFooter) { display: none; }

  .resultsLayout.has-map .listingGrid {
    display: flex; align-items: flex-end; gap: var(--sp-3); pointer-events: auto; /* a taller complex card doesn't stretch the rest */
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: var(--sp-2) calc(50% - var(--card-w) / 2) var(--sp-3); /* first and last cards can centre */
    scrollbar-width: none;
  }
  .resultsLayout.has-map .listingGrid::-webkit-scrollbar { display: none; }
  .resultsLayout.has-map .listingGrid > * { flex: 0 0 var(--card-w); scroll-snap-align: center; }

  /* a 172px card, so the map stays in view (design canvas "Map Carousel
     Card", price header + side photo): the price and heart head the card,
     the photo cell sits beside the details under them (listing-card.js
     `carouselCard`). */
  .resultsLayout.has-map .lcard {
    display: flex; flex-direction: column; height: 172px; box-sizing: border-box;
    border-radius: var(--r-card); box-shadow: var(--shadow-lift);
    transition: box-shadow var(--dur-med) var(--ease), border-color var(--dur-fast) var(--ease);
  }
  /* selected: a real border, which the photo can't cover the way it did an inset outline */
  .resultsLayout.has-map .lcard.is-current { border: 2px solid var(--ocean); }
  .resultsLayout.has-map .lcard__head {
    flex: none; display: flex; align-items: center; gap: var(--sp-2); height: 48px; box-sizing: border-box;
    padding: 0 6px 0 14px; background: var(--price-band); border-bottom: 1px solid var(--price-band-line);
  }
  /* the whole price shows: pages/properties.js shrinks its font (fitText)
     when it doesn't fit; the units scale with it */
  .resultsLayout.has-map .lcard__head .lcard__price { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .resultsLayout.has-map .lcard__price small { font-size: .65em; }
  .resultsLayout.has-map .lcard__heart {
    position: relative; inset: auto; flex: none; width: 40px; height: 40px; margin: 0;
    background: transparent; box-shadow: none; color: var(--ocean);
  }
  .resultsLayout.has-map .lcard__heart .ico { width: 20px; height: 20px; }
  .resultsLayout.has-map .lcard__main { flex: 1; min-height: 0; display: grid; grid-template-columns: 120px minmax(0, 1fr); }
  .resultsLayout.has-map .lcard__media { height: auto; min-height: 0; }
  .resultsLayout.has-map .lcard:hover .lcard__media > img { transform: none; }
  .resultsLayout.has-map .lcard__ph .ico { width: 36px; height: 36px; }
  .resultsLayout.has-map .lcard__ph span { display: none; }
  /* chips on the photo cell: the mode at its foot, a unit's label on top */
  .resultsLayout.has-map .lcard__mode { left: var(--sp-2); bottom: var(--sp-2); height: 22px; padding: 0 var(--sp-2); font-size: 11px; }
  .resultsLayout.has-map .lcard__topChip {
    left: var(--sp-2); top: var(--sp-2); max-width: calc(100% - 2 * var(--sp-2)); box-sizing: border-box;
    height: 22px; padding: 0 var(--sp-2); font-size: var(--fs-2xs); overflow: hidden; text-overflow: ellipsis;
  }
  .resultsLayout.has-map .lcard__topChip:has(.ico) { padding-left: 6px; }
  .resultsLayout.has-map .lcard__topChip .ico { width: 13px; height: 13px; }
  .resultsLayout.has-map :is(.lcard__manageChip, .lcard__note) { display: none; }
  /* the details: address, facts, the move-in / per-m² line, the agency at the foot */
  .resultsLayout.has-map .lcard__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 10px 12px 10px 14px; }
  .resultsLayout.has-map .lcard__specs { gap: var(--sp-3); }
  .resultsLayout.has-map .lcard__extra { align-self: flex-start; }
  /* the company: a muted line at the foot instead of the navy chip */
  .resultsLayout.has-map .lcard__company {
    position: static; align-self: flex-start; margin-top: auto; max-width: 100%; height: auto;
    padding: 0; background: none; box-shadow: none; color: var(--slate); font-weight: 400;
  }
  /* you manage it: the way into the app takes the foot row */
  .resultsLayout.has-map .lcard--managed :is(.lcard__extra, .lcard__company) { display: none; }
  .resultsLayout.has-map .lcard__manage { margin: auto 0 0; padding: 0; background: none; }
  .resultsLayout.has-map .lcard__manageLink { font-size: var(--fs-xs); }
  /* a complex: its name heads the card; its address (type · town when it has
     none), then a "from" row per mode */
  .resultsLayout.has-map .lcard--stack .lcard__head .lcard__title { flex: 1; min-width: 0; font-size: var(--fs-md); }
  .resultsLayout.has-map .lcard--stack .lcard__titleText {
    position: static; display: block; width: auto; height: auto; overflow: hidden; clip-path: none;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .resultsLayout.has-map .lcard--stack .lcard__topChip { top: auto; bottom: var(--sp-2); }
  .resultsLayout.has-map .lcard--stack .lcard__place { display: block; }
  .resultsLayout.has-map .lcard.lcard--stack .lcard__priceRow {
    display: flex; align-items: center; gap: var(--sp-2); min-width: 0; margin: 0; padding: 0; border: 0;
  }
  .resultsLayout.has-map .lcard--stack .lcard__priceRow .lcard__mode { position: static; flex: none; padding: 0 6px; letter-spacing: .04em; }
  .resultsLayout.has-map .lcard--stack .lcard__price { font-size: var(--fs-ui); overflow: hidden; text-overflow: ellipsis; }
  .resultsLayout.has-map .lcard--stack .lcard__price small { font-size: .93em; }
  .resultsLayout.has-map .lcard--stack .lcard__price small:last-child { display: none; } /* the chip says rent or sale */
  /* the skeleton keeps the same footprint: a photo block and three lines */
  .resultsLayout.has-map .lcard--skeleton { display: grid; grid-template-columns: 120px minmax(0, 1fr); padding: 0; }
  .resultsLayout.has-map .lcard--skeleton .skel--media { height: auto; }
  .resultsLayout.has-map .lcard--skeleton .lcard__body { gap: var(--sp-2); padding: var(--sp-3) 14px; }
  .resultsLayout.has-map .lcard--skeleton .lcard__priceRow { margin: auto 0 0; padding: 0; border: 0; }
  /* the grid's hover colors (turquoise border, soft ring), without the lift:
     the row scrolls under the finger; the selected card keeps its border */
  .resultsLayout.has-map .lcard:has(a, .lcard__open, .ccard__row):hover {
    translate: none; box-shadow: var(--shadow-lift), 0 0 0 3px var(--rental-bg);
  }
  .resultsLayout.has-map .lcard:not(.is-current):has(a, .lcard__open, .ccard__row):hover { border-color: var(--turquoise); }
  /* facts as icon + number only; the words stay for screen readers */
  .resultsLayout.has-map .lcard__specLabel {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .resultsLayout.has-map .lcard__specShort { display: inline; }
  /* the complete address in one line instead of the name and type · town
     (type · town when there's no address); the name stays in the link's
     accessible name */
  .resultsLayout.has-map .lcard__titleText {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .resultsLayout.has-map .lcard__address {
    display: inline; font-size: var(--fs-ui); font-weight: 400; line-height: var(--lh-snug); color: var(--slate);
  }
  .resultsLayout.has-map .lcard__place { display: none; }
  .resultsLayout.has-map .lcard:not(.lcard--stack):not(:has(.lcard__address)) .lcard__place { display: block; }
  .resultsLayout.has-map .lcard:has(.lcard__title a:focus-visible, .lcard__open:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: -2px; }
  .resultsLayout.has-map .listingGrid > .statePanel {
    flex-basis: min(440px, calc(100vw - 2 * var(--gutter))); padding: var(--sp-5); background: var(--white);
    border-style: solid; box-shadow: var(--shadow-lift);
  }
}
@media (max-width: 520px) {
  .resultsHead { padding-top: var(--sp-5); }
}