/* ==========================================================================
   Clear Auto Choice - Tesla Inventory Tool
   Loaded alongside style.css (shared header/footer/nav come from there)
   ========================================================================== */

:root {
  --ti-warn: #92400E;
  --ti-warn-bg: #FEF3C7;
  --ti-muted: #8A93A0;
}

/* This page stacks three full-width ".section-tight" bands (hero title,
   Matches/Top Picks, Your comparison list) directly on top of the
   filter+grid layout below them. ".section-tight" itself is shared
   sitewide (style.css) at padding: 48px 0 72px — fine as a single
   section, but back-to-back on this page that's a ~120px gap between
   each band. Scoped to just these three IDs (not the shared class) so
   every other page keeps the original spacing. */
#ev-inventory-hero {
  padding: 4px 0 2px;
}

#ev-inventory-hero h1 {
  margin: 0 0 2px !important;
  line-height: 1.15;
}

#ev-inventory-hero p.muted {
  margin: 0 0 4px !important;
  line-height: 1.3;
}

#picks-section,
#comparison-list-section {
  padding: 4px 0 8px;
}

/* Intro lines above the card rows carry an inline 14px bottom margin. */
#picks-section p.muted,
#comparison-list-section p.muted {
  margin-bottom: 8px !important;
  line-height: 1.35;
}

/* Comparison tabs: the comparison list is its own section directly below
   the tab bar's section, so its description sat ~70px below the tabs
   (28px bottom padding + 24px top padding + heading row) versus ~14px on
   Top Picks. While a comparison tab is active, collapse the tab section's
   bottom padding and the comparison section's top padding so both start
   14px under the tabs, exactly like Top Picks. */
#picks-section.picks-comparison-active {
  padding-bottom: 0;
}

#comparison-list-section {
  padding-top: 0;
}

.ti-layout {
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  padding: 0 24px 12px;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 12px;
  align-items: start;
}

@media (max-width: 860px) {
  .ti-layout { grid-template-columns: 1fr; }
}

.filter-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 104px);
  overflow-y: auto;
}

/* This rule must come AFTER the unconditional .filter-panel rule above —
   both have the same specificity (one class), so with a tie, CSS gives it
   to whichever one is LAST in the file regardless of the media query,
   and a fix placed before the base rule would silently lose to it.
   "position: sticky; top: 88px" above only makes sense in the two-column
   desktop layout, where the panel has its own column next to the
   scrolling vehicle grid. Below this breakpoint the panel stacks ABOVE
   the grid in a single column instead — sticky there means it re-pins
   itself to the top of the viewport as soon as you scroll past it, and
   since the panel's own content (every filter control) is taller than
   most phone screens, it ends up covering almost the whole viewport,
   silently swallowing clicks meant for the vehicle cards underneath
   (this is why "Add to Comparison" and other card buttons could look
   unresponsive on a narrow window or phone). Reverting to normal
   document flow here fixes that — the panel scrolls away like any other
   content instead of staying pinned over the cards. */
@media (max-width: 860px) {
  .filter-panel {
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}

.filter-panel h2 {
  font-size: 13px;
  color: var(--slate);
  margin: 0 0 6px;
  font-weight: 600;
}

.panel-section { margin-bottom: 10px; }
.panel-section:last-child { margin-bottom: 0; }

/* None of these selects have a width rule elsewhere (the shared ".field
   select { width: 100% }" in style.css doesn't apply — these are wrapped
   in .panel-section, not .field), so a native <select> sizes itself to
   its longest option text. Every option here is short except color
   ("Deep Ocean Blue Pearl/Black Diamond Pearl" and similar two-tone
   names run ~289px), which alone forces the filter panel wider than its
   258px column and puts a horizontal scrollbar on the whole panel.
   Capping every select at 100% keeps them all inside the column
   regardless of option text length; the browser truncates the closed
   select's own text natively, and the open dropdown list is unaffected. */
.panel-section select {
  width: 100%;
  max-width: 100%;
}

.chip-list { display: flex; flex-wrap: wrap; gap: 6px; }

.chip {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--slate);
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}

.chip.active {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

.field-label {
  font-size: 12px;
  color: var(--slate);
  display: block;
  margin-bottom: 4px;
}

.ti-layout input[type="range"] {
  width: 100%;
  margin-top: 6px;
}

.reset-link {
  display: inline-block;
  margin-top: 14px;
  font-size: 13px;
  color: var(--accent);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.toolbar-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

/* ---------- Saved-preferences pill ---------- */

.prefs-pill {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12.5px;
  color: var(--slate);
}

.prefs-pill-icon { font-size: 13px; }

.prefs-pill-text {
  flex: 1 1 auto;
  min-width: 160px;
}

.prefs-pill-link {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent);
  text-decoration: underline;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.prefs-pill-link-btn { color: var(--slate); }

/* ---------- "Matches for you" / "Top Picks" tab switcher ---------- */

.picks-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.picks-tabs {
  display: flex;
  gap: 6px;
}

.picks-tab {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--slate);
  cursor: pointer;
  font-family: inherit;
}

.picks-tab:hover {
  border-color: var(--accent);
  color: var(--ink);
}

.picks-tab.active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.picks-tab-count {
  font-weight: 600;
  opacity: 0.75;
}

.picks-solo-heading { margin: 0; }

/* Top Picks: title, asking price, then the one-line discount; the full
   explanation is the card's hover tooltip (title attribute). */
#top-picks-grid .top-pick-highlight {
  min-height: 0 !important;
  height: auto !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  container-type: inline-size;
}

/* Font size follows the card width (cqw = 1% of the highlight's own width) so the whole line fits on one line;
   the ellipsis is only a fallback. */
#top-picks-grid .top-pick-headline {
  margin: 0 !important;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  font-size: clamp(9px, 6cqw, 12px);
}

/* Title sits directly under the label, with no reserved extra lines. */
#top-picks-grid .top-pick-vehicle {
  min-height: 0 !important;
  margin-top: 4px !important;
}

/* ---------- Comparison drawer ---------- */

.compare-drawer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1100;
}

.compare-drawer-bar {
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
}

.compare-drawer-bar-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 6px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.compare-drawer-bar-inner .btn-sm {
  padding: 4px 14px;
  font-size: 0.8rem;
}

.compare-drawer-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.compare-drawer-caret {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.7);
}

.compare-drawer-count {
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  font-size: 12px;
}

.compare-drawer-panel {
  max-height: min(60vh, 480px);
  overflow-y: auto;
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.compare-drawer-panel-inner {
  max-width: 1800px;
  margin: 0 auto;
  padding: 18px 24px;
}

@media (max-width: 640px) {
  .compare-drawer-bar-inner { padding: 5px 16px; }
  .compare-drawer-panel-inner { padding: 14px 16px; }
  .picks-tab { padding: 7px 12px; font-size: 12.5px; }
}

/* ---------- "Your comparison list" mini-grid ---------- */

.compare-mini-wrap { margin-bottom: 16px; }

.compare-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.compare-mini-grid {
  display: grid;
}

.compare-mini-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: border-color 0.15s ease;
}

.compare-mini-card:hover { border-color: var(--accent); }

.compare-mini-media {
  flex: 0 0 auto;
}

.compare-mini-card .thumb {
  width: 100%;
  background-color: #E9ECEF;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
}

.compare-mini-rank {
  position: absolute;
  background: rgba(15, 23, 42, 0.72);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  z-index: 2;
}

.compare-mini-info {
  flex: 1 1 auto;
  min-width: 0;
}

.compare-mini-name {
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.compare-mini-price {
  font-weight: 700;
  color: var(--ink);
}

.compare-mini-actions {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  flex-shrink: 0;
}

.compare-mini-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  white-space: nowrap;
}

.compare-mini-remove-btn {
  background: var(--white);
  border-color: #B91C1C;
  color: #B91C1C;
}

.compare-mini-remove-btn:hover { background: #FEE2E2; }

.compare-mini-view-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.compare-mini-view-btn:hover { filter: brightness(0.92); }

.compare-mini-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  text-align: center;
}

/* ---- #compare-mini-grid: the drawer's own compact size ---- */

#compare-mini-grid.compare-mini-grid {
  grid-template-columns: repeat(var(--compare-cols, 10), minmax(0, 1fr));
  gap: 8px;
}

@media (max-width: 900px) {
  #compare-mini-grid.compare-mini-grid {
    grid-template-columns: repeat(min(var(--compare-cols, 10), 6), minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #compare-mini-grid.compare-mini-grid {
    grid-template-columns: repeat(min(var(--compare-cols, 10), 4), minmax(0, 1fr));
  }
}

#compare-mini-grid .compare-mini-card .thumb {
  aspect-ratio: 16 / 5;
  font-size: 16px;
}

#compare-mini-grid .compare-mini-rank {
  top: 4px;
  left: 4px;
  font-size: 10px;
  padding: 1px 6px;
}

#compare-mini-grid .compare-mini-info {
  padding: 5px 8px 3px;
}

#compare-mini-grid .compare-mini-name {
  font-size: 11px;
  line-height: 1.2;
  margin: 0 0 2px;
  min-height: 2.4em;
}

#compare-mini-grid .compare-mini-price {
  font-size: 11.5px;
}

#compare-mini-grid .compare-mini-info .vehicle-vin {
  font-size: 9.5px;
}

#compare-mini-grid .compare-mini-actions {
  gap: 3px;
  padding: 0 8px 6px;
}

#compare-mini-grid .compare-mini-action-btn {
  gap: 3px;
  border-radius: 5px;
  font-size: 10.5px;
  padding: 4px 6px;
}

#compare-mini-grid .compare-mini-empty {
  aspect-ratio: 16 / 6;
  font-size: 10.5px;
  padding: 6px;
}

/* ---- #comparison-list-grid: sized to match Top Picks/Matches ---- */

#comparison-list-grid.compare-mini-grid {
  grid-template-columns: repeat(var(--compare-cols, 5), minmax(0, 1fr));
  gap: 16px;
}

@media (max-width: 1300px) {
  #comparison-list-grid.compare-mini-grid {
    grid-template-columns: repeat(min(var(--compare-cols, 5), 3), minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  #comparison-list-grid.compare-mini-grid {
    grid-template-columns: repeat(min(var(--compare-cols, 5), 2), minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  #comparison-list-grid.compare-mini-grid {
    grid-template-columns: repeat(min(var(--compare-cols, 5), 1), minmax(0, 1fr));
  }
}

#comparison-list-grid .compare-mini-card .thumb {
  aspect-ratio: 16 / 10;
  font-size: 22px;
}

#comparison-list-grid .compare-mini-rank {
  top: 6px;
  left: 6px;
  font-size: 11px;
  padding: 2px 7px;
}

#comparison-list-grid .compare-mini-info {
  padding: 8px 10px 6px;
}

#comparison-list-grid .compare-mini-name {
  font-size: 12.5px;
  line-height: 1.3;
  margin: 0 0 3px;
  min-height: 2.6em;
}

#comparison-list-grid .compare-mini-price {
  font-size: 13.5px;
}

#comparison-list-grid .compare-mini-actions {
  gap: 6px;
  padding: 0 10px 10px;
}

#comparison-list-grid .compare-mini-action-btn {
  gap: 4px;
  border-radius: 6px;
  font-size: 12.5px;
  padding: 9px 10px;
}

#comparison-list-grid .compare-mini-empty {
  aspect-ratio: 16 / 12;
  font-size: 12px;
  padding: 8px;
}

.compare-btn.is-added {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}

/* Toast for the 10-vehicle comparison cap */

.cac-toast {
  position: fixed;
  left: 50%;
  bottom: 84px;
  transform: translateX(-50%);
  max-width: min(90vw, 420px);
  background: #B91C1C;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 10px 18px;
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 1200;
}

.cac-toast[hidden] { display: none; }

.count-line {
  font-size: 14px;
  color: var(--slate);
  margin: 0;
}

.sort-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sort-wrap label {
  font-size: 13px;
  color: var(--slate);
}

.sort-wrap select {
  width: auto;
  min-width: 190px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.vehicle-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.vehicle-card[data-private="1"] {
  cursor: pointer;
}

/* PHOTO DIMENSIONS ARE UNCHANGED */
.vehicle-card .photo {
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: #E9ECEF;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9AA3AD;
  font-size: 13px;
  position: relative;
}

.photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-nav:hover {
  background: rgba(0, 0, 0, 0.65);
}

.photo-nav.prev { left: 8px; }
.photo-nav.next { right: 8px; }

.photo-counter {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}

/* Full-listing-detail modal */

.listing-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
}

.listing-modal-overlay[hidden] {
  display: none;
}

.listing-modal {
  background: var(--white);
  border-radius: var(--radius);
  max-width: 1100px;
  width: 95vw;
  max-height: 95vh;
  overflow-y: auto;
  position: relative;
}

.listing-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
}

.listing-modal .photo {
  width: 100%;
  max-height: 80vh;
  min-height: 200px;
  background-color: #E9ECEF;
  border-radius: var(--radius) var(--radius) 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.listing-modal .photo img {
  display: block;
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.2s ease-out;
}

.listing-modal .photo img.zoomed {
  cursor: grab;
  touch-action: none;
}

.listing-modal .photo img.zoomed:active {
  cursor: grabbing;
}

.listing-modal .photo .zoom-hint {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 10px;
  pointer-events: none;
}

.listing-modal .photo .no-photo-label {
  color: #9AA3AD;
  font-size: 14px;
}

.listing-modal .photo-nav {
  width: 48px;
  height: 48px;
  font-size: 26px;
}

.listing-modal .photo-nav.prev { left: 16px; }
.listing-modal .photo-nav.next { right: 16px; }

.listing-modal .photo-counter {
  font-size: 14px;
  padding: 5px 12px;
  bottom: 14px;
  right: 14px;
}

.listing-modal-body {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.listing-modal-body h3 {
  margin: 4px 0 0;
  font-size: 18px;
}

/* ---------- MAIN VEHICLE CARD BODY ---------- */
/* The photo above is unchanged. These values make the information
   section substantially more compact without reducing readability. */

.vehicle-body {
  padding: 9px 14px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}

.model-tag {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.2;
}

.vehicle-trim {
  font-size: 15px;
  font-weight: 600;
  margin: 0;
  line-height: 1.25;
}

.version-line {
  font-size: 12px;
  color: var(--slate);
  margin-top: -3px;
  line-height: 1.2;
}

.price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 1px;
}

.vehicle-price {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
}

/* Compact monthly-payment stat */

.vehicle-monthly-chip,
.top-pick-monthly-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 1px;
  margin-bottom: 1px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(29, 78, 216, 0.08);
  border: 1px solid rgba(29, 78, 216, 0.25);
  font-size: 12.5px;
  color: var(--ink);
  width: fit-content;
  line-height: 1.2;
}

.vehicle-monthly-chip strong,
.top-pick-monthly-chip strong {
  color: var(--accent);
  font-size: 14px;
}

.vehicle-specs {
  font-size: 13px;
  color: var(--slate);
  margin-top: 1px;
  line-height: 1.25;
}

.vehicle-location {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.25;
  margin-top: 0;
}

.badge-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.pill-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
}

.pill-badge.good {
  background: var(--confirmed-bg);
  color: var(--confirmed);
}

.pill-badge.warn {
  background: var(--ti-warn-bg);
  color: var(--ti-warn);
}

.expand-toggle {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.spec-sheet {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}

.spec-sheet.open {
  display: block;
}

.spec-group-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--slate);
  margin: 10px 0 3px;
}

.spec-group-label:first-child {
  margin-top: 0;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}

.spec-row .k {
  color: var(--slate);
}

.spec-row .v {
  font-weight: 600;
  text-align: right;
}

.spec-row .v.not-provided {
  color: var(--ti-muted);
  font-weight: 500;
  font-style: italic;
}

.vehicle-link {
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  display: block;
}

.ti-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--slate);
  grid-column: 1 / -1;
}

.spec-row .v.is-estimate {
  color: var(--estimated, #664D03);
}

.vehicle-vin {
  font-size: 12px;
  color: var(--slate);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  line-height: 1.2;
}

.card-actions {
  margin-top: 6px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.compare-btn {
  width: 100%;
  text-align: center;
}

/* Top Picks card styling lives in assets/css/style.css (the ".top-pick*"
   rules) rather than here, since this page's own "Top Picks by Mileage"
   AND "Matches for you" sections both build on the exact same card
   template/classes (renderTopPicks()/renderMatchesForYou() in the script
   below) — one definition keeps the two views from drifting apart. */