/* ═══════════════════════════════
   DESIGN SYSTEM VARIABLES
═══════════════════════════════ */
:root {
  --navy-900: #0d1526;
  --navy-800: #152038;
  --navy-700: #1e2f52;
  --slate-100: #f4f5f7;
  --slate-200: #e8eaee;
  --slate-300: #d0d4dc;
  --slate-400: #a0a8b8;
  --slate-500: #6b7590;
  --slate-600: #4a5270;
  --amber-400: #f5a623;
  --font-display: 'Montserrat', sans-serif;
  --font-body: Arial, sans-serif;
}

/* ═══════════════════════════════
   PAGE BACKGROUND
═══════════════════════════════ */
.listings-page .PageContainer {
  background-color: var(--slate-100);
}

/* ═══════════════════════════════
   BLUE RESULTS BAR (full width)
═══════════════════════════════ */
.searchResultsContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(135deg, #0d1526 0%, #1e2f52 100%);
  padding: 8px 24px;
}

.numberOfResults {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.numberOfResults h3 {
  font-size: 2.4rem;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1;
}

.numberOfResults p {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  font-weight: 500;
}

.sortFilterContainer {
  display: flex;
  align-items: center;
}

.sortFilter {
  border-radius: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(13, 21, 38, 0.3);
  background: #fff;
  color: #0d1526;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

.sortFilter option {
  background: #fff;
  color: #0d1526;
}

/* ═══════════════════════════════
   ACTIVE FILTER CHIPS
═══════════════════════════════ */
.active-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: #fff;
  border-bottom: 1px solid var(--slate-200);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--slate-100);
  border: 1.5px solid var(--slate-300);
  border-radius: 999px;
  padding: 4px 12px 4px 12px;
  font-size: 12px;
  font-weight: 500;
  color: var(--navy-800);
  text-decoration: none;
  transition: border-color 150ms, background 150ms;
  white-space: nowrap;
}

.filter-chip:hover {
  border-color: #e84040;
  background: #fff1f1;
  color: #e84040;
}

.filter-chip-x {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--slate-400);
}

.filter-chip:hover .filter-chip-x {
  color: #e84040;
}

.filter-chip-clear {
  font-size: 12px;
  font-weight: 600;
  color: #e84040;
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 150ms;
}

.filter-chip-clear:hover {
  background: #fff1f1;
}

/* ═══════════════════════════════
   MOBILE FILTER TOGGLE BAR
═══════════════════════════════ */
#FilterContainer {
  display: none;
}

.filterBTN {
  background: var(--navy-900);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.filterBTN h4 {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

.mobile-reset {
  font-size: 13px;
  color: var(--slate-500);
  text-decoration: none;
}

.mobile-reset:hover { color: #e84040; }
.mobile-reset p { margin: 0; }

/* ═══════════════════════════════
   BROWSE LAYOUT
═══════════════════════════════ */
.browse-layout {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding: 20px 20px 40px;
}

/* ═══════════════════════════════
   FILTER SIDEBAR (no scroll)
═══════════════════════════════ */
.filter-sidebar {
  background: #fff;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  width: 260px;
}

.filter-sidebar-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-sidebar-title {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy-900);
}

.filter-clear-btn {
  font-size: 12px;
  font-weight: 500;
  color: var(--slate-400);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: color 150ms ease;
}

.filter-clear-btn:hover { color: #e84040; }

/* ═══════════════════════════════
   FILTER GROUPS (<details>/<summary>)
═══════════════════════════════ */
details.filter-group {
  border-bottom: 1px solid var(--slate-200);
}

details.filter-group summary.filter-group-header {
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  list-style: none;
  transition: background 150ms ease;
}

details.filter-group summary.filter-group-header::-webkit-details-marker { display: none; }
details.filter-group summary.filter-group-header::marker { display: none; }

details.filter-group summary.filter-group-header:hover { background: var(--slate-100); }

.filter-group-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-800);
}

.filter-group-chevron {
  width: 13px;
  height: 13px;
  stroke: var(--slate-400);
  fill: none;
  stroke-width: 2;
  transition: transform 150ms ease;
  flex-shrink: 0;
}

details.filter-group[open] .filter-group-chevron {
  transform: rotate(180deg);
}

.filter-group-body {
  padding: 6px 16px 12px;
}

/* Labels for location inputs */
.filter-group-body > label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  margin-top: 8px;
}

.filter-group-body > label:first-child { margin-top: 0; }

/* Text/number/select inputs (location section) */
.filter-group-body input[type="text"],
.filter-group-body input[type="number"],
.filter-group-body select:not([multiple]) {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--slate-300);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy-900);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 150ms;
}

.filter-group-body input:focus,
.filter-group-body select:not([multiple]):focus {
  border-color: var(--navy-700);
}

/* Range row (price, year, mileage) */
.filter-range-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.filter-range-select {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--slate-300);
  border-radius: 7px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy-900);
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color 150ms;
  cursor: pointer;
}

.filter-range-select:focus {
  border-color: var(--navy-700);
}

/* ═══════════════════════════════
   CHECKBOXES
═══════════════════════════════ */
.filter-checkbox-label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 2px;
  cursor: pointer;
  transition: color 150ms;
}

.filter-checkbox-label:hover .filter-checkbox-text {
  color: var(--navy-900);
}

.filter-checkbox {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  /* Room between the box and its text. The label's flex gap never applied —
     `.filter-group-body > label` (the location inputs' rule) wins on
     specificity and lays the label out as a block — so the only space was the
     markup's whitespace, and a label built by listingsView.js had none. */
  margin-right: 7px;
  vertical-align: middle;
  border: 1.5px solid var(--slate-300);
  border-radius: 3px;
  cursor: pointer;
  accent-color: var(--navy-800);
}

.filter-checkbox-text {
  font-size: 13px;
  color: var(--slate-600);
  line-height: 1.3;
}

/* ═══════════════════════════════
   APPLY BUTTON
═══════════════════════════════ */
.filter-submit-wrap {
  padding: 12px 16px 14px;
}

.filter-submit-btn {
  width: 100%;
  padding: 10px;
  background: var(--navy-900);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 150ms;
}

.filter-submit-btn:hover { background: var(--navy-700); }

/* ═══════════════════════════════
   RESULTS AREA + CARDS GRID
═══════════════════════════════ */
.browse-results {
  flex: 1;
  min-width: 0;
}

.no-results {
  text-align: center;
  padding: 56px 16px;
}

.no-results-title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.no-results-hint {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-muted);
}

.browse-results .CardsContainer {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* ═══════════════════════════════
   MOBILE POPUP & OVERLAY
═══════════════════════════════ */
.SearchPopup {
  position: fixed;
  top: 80px;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 92vw;
  background: #fff;
  border-left: 1px solid var(--slate-200);
  box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
  z-index: 10;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 250ms ease;
}

.SearchPopup.visible { transform: translateX(0); }

#searchPopupForm {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.Overlay {
  position: fixed;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9;
  display: none;
}

.Overlay.visible { display: block; }

/* Popup header */
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
}

.popup-close-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--slate-500);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
  transition: color 150ms, background 150ms;
}

.popup-close-x:hover {
  color: var(--navy-900);
  background: var(--slate-100);
}

/* Active chips inside popup */
.popup-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--slate-200);
  flex-shrink: 0;
}

/* pageTitle is used by dropDownFilters.js for scroll detection */
.pageTitle { margin: 0; }

/* ═══════════════════════════════
   RESPONSIVE
═══════════════════════════════ */
@media (max-width: 860px) {
  .browse-layout {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .filter-sidebar {
    display: none;
    width: 100%;
  }

  #FilterContainer {
    display: flex;
    position: sticky;
    top: 80px;
    z-index: 6;
    background: var(--slate-100);
    padding: 10px 16px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--slate-200);
  }

  #FilterContainer.scrolled {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }

  .searchResultsContainer { padding: 8px 16px; }
  .active-filters-bar { padding: 8px 16px; }
  .numberOfResults h3 { font-size: 1.8rem; }
}

@media (max-width: 600px) {
  .browse-results .CardsContainer {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .numberOfResults h3 { font-size: 1.5rem; }
}


/* ═══════════════════════════════
   SAVE THIS SEARCH (docs/SAVED_SEARCHES_PLAN.md §4)
═══════════════════════════════ */
.save-search-btn {
  margin-left: 12px;
  border-radius: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 150ms ease;
}
.save-search-btn:hover { background: rgba(255, 255, 255, 0.24); }
.save-search-btn--done { background: rgba(255, 255, 255, 0.9); color: #0d1526; cursor: default; }
.save-search-manage { margin-left: 10px; color: #fff; font-size: 0.85rem; text-decoration: underline; white-space: nowrap; }
.save-search-dialog {
  border: none;
  border-radius: 12px;
  padding: 22px 24px;
  width: min(92vw, 420px);
  box-shadow: 0 20px 60px rgba(13, 21, 38, 0.35);
  background: var(--bg-surface, #fff);
  color: var(--text-primary, #0d1526);
}
.save-search-dialog::backdrop { background: rgba(13, 21, 38, 0.55); }
.save-search-dialog h3 { margin: 0 0 6px; font-size: 1.15rem; }
.save-search-hint { margin: 0 0 14px; font-size: 0.9rem; opacity: 0.8; line-height: 1.5; }
.save-search-field { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 12px; }
.save-search-optional { font-weight: 400; opacity: 0.7; }
.save-search-field input, .save-search-field select {
  display: block; width: 100%; margin-top: 5px; padding: 9px 10px; font-size: 0.95rem;
  border: 1px solid var(--border-input, #cbd5e1); border-radius: 8px; background: var(--bg-input, #f9fafb); color: inherit;
}
.save-search-error { color: #b91c1c; font-size: 0.85rem; margin: 0 0 10px; }
.save-search-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.save-search-cancel { background: transparent; border: 1px solid var(--border-input, #cbd5e1); color: inherit; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
.save-search-submit { background: var(--navy-900, #0d1526); color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; }
.save-search-submit:disabled { opacity: 0.6; cursor: wait; }
@media (max-width: 640px) {
  .save-search-btn { margin-left: 0; margin-top: 8px; }
}


/* ═══════════════════════════════
   RESULTS BAR — LAYOUT SWITCH + FILTER TOGGLE
   (grid | list | map lives on <body data-listings-view>; the collapsed
   sidebar on <body data-filters="collapsed">; public/js/listingsView.js)
═══════════════════════════════ */
.sortFilterContainer {
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.view-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
}

.view-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.view-switch-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.view-switch-btn:hover { background: rgba(255, 255, 255, 0.16); }

.view-switch-btn[aria-pressed="true"] {
  background: #fff;
  color: var(--navy-900);
}

.filters-toggle,
.filters-drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background 150ms ease;
}

.filters-toggle:hover,
.filters-drawer-btn:hover { background: rgba(255, 255, 255, 0.24); }

.filters-drawer-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
}

.filters-count {
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--amber-400);
  color: var(--navy-900);
  font-size: 11px;
  font-weight: 800;
}

/* Drawer button only when the sidebar is out of the way */
.filters-drawer-btn { display: none; }

body[data-filters="collapsed"] .filter-sidebar { display: none; }
body[data-filters="collapsed"] .filters-drawer-btn { display: inline-flex; }

/* Map view: the sidebar always lives in the drawer so the map gets the width */
body[data-listings-view="map"] .filter-sidebar { display: none; }
body[data-listings-view="map"] .filters-toggle { display: none; }
body[data-listings-view="map"] .filters-drawer-btn { display: inline-flex; }
body[data-listings-view="map"] .browse-results { display: none; }

/* ═══════════════════════════════
   LIST VIEW — the same card, laid on its side
   (identical markup and contents; only the shape changes)
═══════════════════════════════ */
body[data-listings-view="list"] .browse-results .CardsContainer {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body[data-listings-view="list"] .browse-results .card { height: auto; }

body[data-listings-view="list"] .browse-results .card .CardLink {
  display: grid;
  grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}

body[data-listings-view="list"] .browse-results .image-container {
  height: 100%;
  min-height: 210px;
}

body[data-listings-view="list"] .browse-results .card-body,
.map-cards .card-body {
  /* a grid item's min-width is its content's by default; nowrap spec values
     and a long VIN would widen the body past the card on phones */
  min-width: 0;
}

body[data-listings-view="list"] .browse-results .card-body {
  padding: 18px 24px;
  gap: 6px;
  justify-content: center;
}

body[data-listings-view="list"] .browse-results .card-title {
  font-size: 20px;
  min-height: 0;
  -webkit-line-clamp: 2;
}

body[data-listings-view="list"] .browse-results .card-sub,
body[data-listings-view="list"] .browse-results .card-spec,
body[data-listings-view="list"] .browse-results .seller-name,
body[data-listings-view="list"] .browse-results .dealer-link,
body[data-listings-view="list"] .browse-results .card-location {
  font-size: 13px;
}

body[data-listings-view="list"] .browse-results .card-seller-row {
  margin-top: 10px;
  padding-top: 10px;
}

body[data-listings-view="list"] .browse-results .seller-avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

/* ═══════════════════════════════
   MAP VIEW — list beside a map
═══════════════════════════════ */
.map-view { display: none; }

body[data-listings-view="map"] .map-view {
  display: flex;
  flex: 1;
  min-width: 0;
  gap: 16px;
  /* Height is set by listingsView.js to fill the viewport below the bars,
     so the map's bottom edge (Google's logo, the "Search this area"
     button) is on screen without scrolling; this is the fallback. The floor
     matches the script's (360 px): a 480 px floor here overrode the fitted
     height and ran the map 34 px below the fold on a 1366x768 laptop
     (600 px viewport, UAT #1216 re-test 2026-10-06). */
  height: calc(100vh - 220px);
  min-height: 360px;
}

.map-cards-pane {
  /* The pane is the containing block for the cards' absolutely positioned
     bits (the visually-hidden spec labels). Without this they escaped the
     pane's clip and stretched the PAGE to the height of every card — a black
     void below the footer in map view. */
  position: relative;
  width: 40%;
  min-width: 300px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  /* room for the featured card's 2px outline and the hover lift, which are
     drawn outside the card and were clipped by the pane's edge */
  padding: 6px 6px 12px 4px;
  overscroll-behavior: contain;
}

.map-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.map-cards .card { height: auto; }

.map-cards .card .CardLink {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
}

.map-cards .image-container {
  height: 100%;
  min-height: 150px;
}

.map-cards .card-body {
  padding: 10px 14px;
  gap: 4px;
  justify-content: center;
}

.map-cards .card-title { font-size: 14px; }
.map-cards .card-price-badge { font-size: 15px; padding: 4px 9px; }
.map-cards .favorite-btn { width: 30px; height: 30px; }

/* Card ↔ pin pairing */
.map-cards .card.is-hover,
.map-cards .card.is-active {
  /* Amber, not navy-on-navy: the pairing has to catch the eye across the
     pane and the map at once (UAT #1213). */
  border-color: var(--amber-400);
  box-shadow: 0 0 0 3px var(--amber-400), 0 10px 28px rgba(13, 21, 38, 0.22);
  transform: translateY(-2px);
}

.map-cards-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--slate-200);
  color: var(--slate-600);
  font-size: 13px;
  line-height: 1.45;
}

.map-canvas-pane {
  position: relative;
  flex: 1;
  min-height: 420px;
  border: 1px solid var(--slate-200);
  border-radius: 12px;
  overflow: hidden;
  background: var(--slate-200);
}

.map-canvas {
  position: absolute;
  inset: 0;
}

.map-follow {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--navy-900);
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(13, 21, 38, 0.2);
  cursor: pointer;
  user-select: none;
}

.map-follow input { accent-color: var(--navy-800); margin: 0; }

/* Under the follow toggle, top-left — top-right belongs to Google's controls */
.map-status {
  position: absolute;
  top: 54px;
  left: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(13, 21, 38, 0.25);
}

.map-status[hidden] { display: none; }

/* "Search this area" — only while "Search as I move" is off and the map moved.
   Top-centre, so it can never sit below the fold. */
.map-search-here {
  position: absolute;
  top: 12px;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
  padding: 9px 16px;
  border: none;
  border-radius: 999px;
  background: var(--navy-900);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 3px 12px rgba(13, 21, 38, 0.35);
  cursor: pointer;
}

.map-search-here:hover { background: var(--navy-700); }
.map-search-here[hidden] { display: none; }

/* HTML markers (google.maps.OverlayView, anchored by listingsView.js) */
.map-pin,
.map-cluster {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  font-family: var(--font-display);
  cursor: pointer;
}

.map-pin {
  transform: translate(-50%, calc(-100% - 7px));
  padding: 5px 10px;
  border: 1.5px solid var(--navy-800);
  border-radius: 999px;
  background: var(--navy-800); /* same navy as a cluster (owner, 2026-10-13) */
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(13, 21, 38, 0.25);
  transition: background 120ms ease, color 120ms ease;
}

.map-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 2px;
  height: 7px;
  background: var(--navy-800);
  transform: translateX(-50%);
}
.map-pin:hover::after,
.map-pin.is-hover::after,
.map-pin.is-active::after { background: var(--amber-400); }

.map-pin.is-featured {
  border-color: #C5A76C; /* gold ring = featured; the fill stays navy */
}

.map-pin:hover,
.map-pin.is-hover,
.map-pin.is-active {
  background: var(--amber-400);
  border-color: var(--amber-400);
  color: var(--navy-900);
  transform: translate(-50%, calc(-100% - 7px)) scale(1.12);
  box-shadow: 0 0 0 4px rgba(245, 166, 35, 0.35), 0 6px 16px rgba(0, 0, 0, 0.35);
  z-index: 5;
}

.map-cluster {
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--navy-800);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 0 0 5px rgba(30, 47, 82, 0.22), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.map-cluster:hover,
.map-cluster.is-hover { background: var(--navy-700); box-shadow: 0 0 0 8px rgba(245, 166, 35, 0.5), 0 3px 10px rgba(0, 0, 0, 0.3); }

/* A same-spot cluster the shopper opened (the list shows just its cars) */
.map-cluster.is-active {
  background: var(--amber-400);
  color: var(--navy-900);
  box-shadow: 0 0 0 5px rgba(245, 166, 35, 0.3), 0 3px 10px rgba(0, 0, 0, 0.3);
}

.map-note-link {
  margin-left: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--navy-700);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

/* Consent gate and failure notice sit over the canvas. Qualified by the pane
   because cookieConsent.css (linked later, from the header partial) styles
   .map-consent-box for the listing page's iframe placeholder — translucent,
   dashed, and a stretched button under 560px — and would otherwise win. */
.map-canvas-pane .map-consent-inline,
.map-canvas-pane .map-error {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  height: auto;
  padding: 24px;
  border: none;
  border-radius: 0;
  text-align: center;
  background: var(--slate-100);
  color: var(--navy-800);
  font-size: 14px;
  line-height: 1.5;
}

.map-canvas-pane .map-consent-inline[hidden],
.map-canvas-pane .map-error[hidden] { display: none; }

.map-canvas-pane .map-consent-inline .cookie-btn { flex: 0 0 auto; }
.map-canvas-pane .map-consent-inline .map-consent-note { font-size: 12px; color: var(--slate-500); }

/* ═══════════════════════════════
   RESPONSIVE — the new shapes
═══════════════════════════════ */
@media (max-width: 860px) {
  /* The sidebar is already a drawer on small screens (#FilterContainer) */
  .filters-toggle,
  body[data-filters="collapsed"] .filters-drawer-btn,
  body[data-listings-view="map"] .filters-drawer-btn { display: none; }

  .sortFilterContainer { justify-content: flex-start; }

  body[data-listings-view="map"] .map-view {
    flex-direction: column;
    height: auto !important; /* the desktop inline height must not apply */
    min-height: 0;
  }

  .map-canvas-pane {
    order: 1;
    flex: 0 0 auto; /* the desktop flex: 1 would zero the basis and leave the map at its minimum */
    /* Never taller than leaves a card row visible beneath it (UAT #1216) */
    height: min(55vh, calc(100vh - 270px));
    min-height: 320px;
    position: sticky;
    top: 130px;
    z-index: 5;
    /* An opaque backdrop out to the page gutters: cards scrolling under the
       sticky map are wider than it (outline, shadow, hover lift), and their
       edges showed at its sides and rounded corners */
    box-shadow: 0 0 0 16px var(--bg-page, var(--slate-100));
  }

  .map-cards-pane {
    order: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: visible;
    padding-right: 0;
  }
}

@media (max-width: 600px) {
  /* Count on its own line; controls fill the next */
  .searchResultsContainer { flex-wrap: wrap; gap: 8px; }
  .sortFilterContainer { width: 100%; justify-content: space-between; }
  .sortFilterContainer #sortForm { flex: 1; }
  .sortFilterContainer .sortFilter { width: 100%; }

  body[data-listings-view="list"] .browse-results .card .CardLink,
  .map-cards .card .CardLink { grid-template-columns: minmax(0, 1fr); }

  body[data-listings-view="list"] .browse-results .image-container,
  .map-cards .image-container { height: 200px; min-height: 0; }

  body[data-listings-view="list"] .browse-results .card-body { padding: 12px 14px; }
}

/* ═══════════════════════════════
   CARD DETAIL BLOCK — list + map shapes only
   (trim · VIN line, spec cells, history line; rendered in every card by
   views/listings.ejs and public/js/listingCard.js, hidden in the grid)
═══════════════════════════════ */
.card-extra { display: none; }

body[data-listings-view="list"] .browse-results .card-extra,
.map-cards .card-extra {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* In the list shape the spec cells carry mileage / transmission / condition,
   so the grid's own two lines step aside instead of repeating them */
body[data-listings-view="list"] .browse-results .card-sub,
body[data-listings-view="list"] .browse-results .card-specs { display: none; }

.card-detail-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--slate-500);
}

.card-trim { font-weight: 600; color: var(--slate-600); }

.card-vin {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.03em;
}

.card-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px 16px;
  margin: 2px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--slate-200);
}

.spec-cell { min-width: 0; }

.spec-cell dt {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-400);
}

.spec-cell dd {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 14px;
  color: var(--navy-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.swatch {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(13, 21, 38, 0.25);
  background: var(--slate-300);
}

.swatch[data-tone="black"]     { background: #111827; }
.swatch[data-tone="white"]     { background: #f8fafc; }
.swatch[data-tone="silver"]    { background: #c3c8d1; }
.swatch[data-tone="gray"],
.swatch[data-tone="grey"]      { background: #6b7280; }
.swatch[data-tone="red"]       { background: #c0392b; }
.swatch[data-tone="blue"]      { background: #2457a6; }
.swatch[data-tone="green"]     { background: #2f7d4f; }
.swatch[data-tone="yellow"]    { background: #e6c229; }
.swatch[data-tone="orange"]    { background: #e0722a; }
.swatch[data-tone="brown"]     { background: #6b4423; }
.swatch[data-tone="beige"]     { background: #d8c9a8; }
.swatch[data-tone="tan"]       { background: #d2b48c; }
.swatch[data-tone="gold"]      { background: #c9a227; }
.swatch[data-tone="purple"]    { background: #6d3fa0; }
.swatch[data-tone="burgundy"],
.swatch[data-tone="maroon"]    { background: #6e1b2c; }
.swatch[data-tone="bronze"]    { background: #a97142; }
.swatch[data-tone="champagne"] { background: #e2d3b0; }

.card-history {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding-top: 8px;
  border-top: 1px solid var(--slate-200);
  font-size: 13px;
}

.card-history-status { font-weight: 600; }
.card-history-status.is-good { color: #1f7a3f; }
.card-history-status.is-warn { color: #b45309; }
.card-history-owners { color: var(--slate-500); }

/* Map cards are narrow: the grid's own lines stay, the duplicate cells go,
   and drivetrain · exterior · interior read as one inline line */
.map-cards .card-extra { gap: 5px; }
.map-cards .spec-cell--dup { display: none; }

.map-cards .card-spec-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  margin: 0;
  padding: 0;
  border-top: none;
}

.map-cards .spec-cell dt {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.map-cards .spec-cell dd {
  font-size: 12px;
  color: var(--slate-600);
  gap: 5px;
}

/* A dot between VISIBLE cells only — the hidden duplicate cells come first
   in source order, so an adjacent-sibling rule put a dot before the first one */
.map-cards .spec-cell:not(.spec-cell--dup) ~ .spec-cell:not(.spec-cell--dup) dd::before {
  content: '·';
  color: var(--slate-400);
}

.map-cards .swatch { width: 10px; height: 10px; }
.map-cards .card-detail-line { font-size: 12px; gap: 2px 10px; }
.map-cards .card-vin { font-size: 11px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-cards .card-history { font-size: 12px; padding-top: 6px; gap: 2px 12px; }

/* Bottom-of-list marker the map pane watches to reveal / load more cards */
.map-cards-sentinel { height: 1px; }

/* The list grows at its bottom as the shopper scrolls. Scroll anchoring
   pinned the viewport to the note beneath it and rode that growth, so the
   list loaded itself to the end without a scroll (measured 2026-09-26: 60 →
   744 cards from one re-zoom). Off for the map view, pane and page alike. */
body[data-listings-view="map"],
.map-cards-pane { overflow-anchor: none; }

/* A short screen (phone in landscape, a small tablet) has no room for a stuck
   map AND the cards: the cards scrolled under it and were never seen
   (UAT #1216). Let the map scroll away with the page instead. */
@media (max-width: 860px) and (max-height: 640px) {
  .map-canvas-pane {
    position: static;
    height: 45vh;
    min-height: 240px;
    box-shadow: none;
  }
}