/* Frontend – home & listing details */

/* Bootstrap and Font Awesome are NOT @imported here on purpose. AssetMapper keeps @import as a real
   CSS at-rule, so the browser could only discover them after this file had downloaded and parsed —
   a serial chain three levels deep off the document. app.js imports them as top-level entries
   instead, which makes them their own <link rel="stylesheet"> in the head, fetched in parallel.
   The import order in app.js reproduces the cascade the @imports used to produce; keep it. */

/* Symfony form_div_layout adds .help-text; Bootstrap styles .form-text. Keep both aligned. */
.help-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--bs-secondary-color);
}

/* Surfaces inherit from app.css tokens */
body {
  background-color: var(--app-bg);
  color: var(--app-text);
}

.shadow-soft {
  box-shadow: var(--app-shadow-md);
}

.result-spec {
  font-size: var(--text-body-sm);
  color: var(--bs-secondary-color, var(--app-text-muted));
}

.result-price {
  font-weight: var(--fw-bold);
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* -------------------------------------------------------------------------- */
/* Buttons (Bootstrap-compatible variations) */
/* -------------------------------------------------------------------------- */
.btn {
  --bs-btn-font-weight: var(--fw-semibold);
  --bs-btn-padding-y: 0.55rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-border-radius: var(--app-radius-btn);
  --bs-btn-focus-box-shadow: var(--app-focus-ring);
  letter-spacing: var(--ls-wide);
  box-shadow: var(--app-shadow-xs);
  transition:
    transform var(--dur-btn) var(--ease-standard),
    box-shadow var(--dur-btn) var(--ease-standard),
    background-color var(--dur-btn) var(--ease-standard),
    border-color var(--dur-btn) var(--ease-standard),
    color var(--dur-btn) var(--ease-standard);
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--app-shadow-sm);
}

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  --bs-btn-bg: var(--btn-primary-bg);
  --bs-btn-border-color: var(--btn-primary-bg);
  --bs-btn-color: var(--btn-primary-text);
  --bs-btn-hover-bg: var(--btn-primary-hover);
  --bs-btn-hover-border-color: var(--btn-primary-hover);
  --bs-btn-hover-color: var(--btn-primary-text);
  --bs-btn-active-bg: var(--btn-primary-active);
  --bs-btn-active-border-color: var(--btn-primary-active);
  --bs-btn-active-color: var(--btn-primary-text);
  --bs-btn-disabled-bg: #bfdbfe;
  --bs-btn-disabled-border-color: #bfdbfe;
}

.btn-secondary {
  --bs-btn-bg: var(--btn-secondary-bg);
  --bs-btn-border-color: #d1d9e3;
  --bs-btn-color: var(--btn-secondary-text);
  --bs-btn-hover-bg: var(--btn-secondary-hover);
  --bs-btn-hover-border-color: #c3cdd9;
  --bs-btn-hover-color: var(--btn-secondary-text);
  --bs-btn-active-bg: var(--btn-secondary-active);
  --bs-btn-active-border-color: #8ba0b5;
  --bs-btn-active-color: #f8fafc;
}

.btn-success {
  --bs-btn-bg: var(--btn-success-bg);
  --bs-btn-border-color: var(--btn-success-bg);
  --bs-btn-color: var(--btn-success-text);
  --bs-btn-hover-bg: var(--btn-success-hover);
  --bs-btn-hover-border-color: var(--btn-success-hover);
  --bs-btn-hover-color: var(--btn-success-text);
  --bs-btn-active-bg: var(--btn-success-active);
  --bs-btn-active-border-color: var(--btn-success-active);
  --bs-btn-active-color: var(--btn-success-text);
}

.btn-outline-secondary {
  --bs-btn-color: var(--btn-outline-text);
  --bs-btn-border-color: var(--btn-outline-border);
  --bs-btn-hover-color: var(--app-text);
  --bs-btn-hover-bg: var(--btn-outline-bg-hover);
  --bs-btn-hover-border-color: #b8c4d4;
  --bs-btn-active-color: var(--app-text);
  --bs-btn-active-bg: #e8eef5;
  --bs-btn-active-border-color: #b8c4d4;
  box-shadow: none;
}

/* Optional soft button variation for low-emphasis actions */
.btn-subtle {
  --bs-btn-color: var(--btn-subtle-text);
  --bs-btn-bg: var(--btn-subtle-bg);
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: #1d4ed8;
  --bs-btn-hover-bg: var(--btn-subtle-hover);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: #1e40af;
  --bs-btn-active-bg: rgba(96, 165, 250, 0.32);
  --bs-btn-active-border-color: transparent;
  box-shadow: none;
}

.card-cover {
  width: 100%;
}

.card-cover-placeholder {
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-cover-placeholder i {
  font-size: 3rem;
}

.card a img {
  transition: transform var(--dur-media) var(--ease-standard);
}

.card:hover a img {
  transform: scale(1.02);
}

/*
 * Overlay WebP: when the cover uses the template aspect ratio (--listing-card-cover-ar), contain shows
 * the full composite with no empty bars. Fixed-height cards without dimensions fall back to cover.
 */
.listing-card-public-cover--overlay-fit img.listing-card-img--overlay,
.listings-page-card-cover--overlay-fit img.listing-card-img--overlay {
  object-fit: contain;
  object-position: center;
}

img.listing-card-img--overlay {
  object-fit: cover;
  object-position: center;
}

.listing-card-featured-badge {
  top: 45px;
}

/* Sidebar search/inventory grids: shorter image band than full-width home — pull Featured below overlay banner up slightly */
.listings-page .listing-card-public .listing-card-featured-badge,
.listings-page .listings-page-card .listing-card-featured-badge {
  top: 1.75rem;
}

/* -------------------------------------------------------------------------- */
/* Public listing cards (reference-style layout) */
/* -------------------------------------------------------------------------- */
.card.listing-card-public.border-0.shadow-soft {
  border-radius: 1rem;
}

/* Trap each card's internal z-index stack (custom badges sit at z-index: 3 inside
   the card). Without this, the badge bubbles up to the document root and beats
   the hero search-suggestions dropdown which lives inside .hero-cover .container
   (a stacking context capped at z-index: 1). */
.listing-card-public {
  isolation: isolate;
}

.listing-card-status-badge {
  background-color: var(--app-success-badge);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
}

/* ---- Card body (design system: components/listings/ListingCard.jsx) ----
   Title, a "City, ST · Seller" meta line, a boxed 3-up spec grid, optional tags,
   a labelled price row pinned to the bottom, then the CTA row. Vertical rhythm
   lives here rather than in Bootstrap mb-* utilities because the DS steps
   (0.35rem / 0.875rem) are off the Bootstrap scale. */
.listing-card-title {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  margin: 0 0 0.35rem;
}

.listing-card-meta {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--app-text-muted);
  margin: 0 0 0.875rem;
}

.listing-card-meta i {
  margin-right: 0.4rem;
  opacity: 0.85;
  font-size: 0.85em;
}

/* Boxed spec grid. grid-auto-flow keeps the columns even without the markup
   having to know how many cells it emitted. */
.listing-card-specs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  overflow: hidden;
  margin-bottom: 0.875rem;
}

.listing-card-spec {
  padding: 0.5rem 0.625rem 0.625rem;
  min-width: 0;
}

.listing-card-spec + .listing-card-spec {
  border-left: 1px solid var(--app-border);
}

.listing-card-spec__caption,
.listing-card-spec__value {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.listing-card-spec__caption {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--app-text-muted);
  margin-bottom: 0.2rem;
}

.listing-card-spec__value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--app-text);
}

.listing-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.875rem;
}

.listing-card-tag {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-heading);
  color: var(--bs-gray-800, #343a40);
  background-color: var(--bs-gray-100, #f8f9fa);
  border-radius: 0.25rem;
}

.listing-card-award {
  font-size: var(--text-sm);
  line-height: 1.4;
  margin: 0 0 0.875rem;
}

/* The one auto margin in the body: it soaks up the slack so the price and CTA
   line up across a row of cards whose titles wrap to different heights. */
.listing-card-pricing {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  margin-bottom: 1rem;
}

.listing-card-pricing__main {
  min-width: 0;
}

.listing-card-price-label {
  display: block;
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--app-text-muted);
  margin-bottom: 0.15rem;
}

.listing-card-price {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--app-text);
  margin-bottom: 0;
}

.listing-card-price--muted {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  color: var(--app-text-secondary);
}

.listing-card-price-drop {
  flex-shrink: 0;
  margin-bottom: 0.3rem;
}

.listing-card-actions {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0.5rem;
}

.listing-card-actions__primary {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--fw-semibold);
  border-radius: var(--app-radius-sm);
}

/* Square compare button beside the CTA. It keeps the Bootstrap .btn classes
   because compare.js swaps btn-outline-secondary <-> btn-secondary to show
   whether the listing is in the compare tray. */
.listing-card-compare-btn {
  flex: 0 0 auto;
  width: 2.75rem;
  min-width: 2.75rem;
  padding-left: 0;
  padding-right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--app-radius-sm);
}

.listing-card-featured-h__main {
  flex: 1 1 auto;
  min-height: 0;
  /* margin-top: auto on .listing-card-pricing only bites inside a flex column. */
  display: flex;
  flex-direction: column;
}

/* The horizontal body already spaces its children with gap: 0.75rem. */
.listing-card-featured-h .listing-card-pricing {
  margin-bottom: 0;
}

/* DS body padding is 1.125rem 1.25rem 1.25rem. Scoped to this card because
   .card.border-0.shadow-soft .card-body is shared site-wide. */
.listing-card-public .card-body {
  padding-bottom: 1.25rem;
}

.listings-page .listing-card-public .listing-card-title {
  font-size: var(--text-body-sm);
}

.listings-page .listing-card-public .listing-card-meta {
  font-size: var(--text-xs);
  margin-bottom: 0.625rem;
}

.listings-page .listing-card-public .listing-card-specs {
  margin-bottom: 0.625rem;
}

.listings-page .listing-card-public .listing-card-spec {
  padding: 0.375rem 0.5rem 0.5rem;
}

.listings-page .listing-card-public .listing-card-spec__value {
  font-size: var(--text-xs);
}

.listings-page .listing-card-public .listing-card-price {
  font-size: var(--text-xl);
}

.listings-page .listing-card-public .listing-card-price--muted {
  font-size: var(--text-body);
}

/* -------------------------------------------------------------------------- */
/* Hero (home) */
/* -------------------------------------------------------------------------- */
.hero-bg-1 {
  background-image: linear-gradient(
    135deg,
    var(--hero-gradient-start) 0%,
    var(--hero-gradient-mid) 48%,
    var(--hero-gradient-end) 100%
  );
}

.hero-cover {
  --hero-pad-y: clamp(2rem, 6vw, 4rem);
  position: relative;
  min-height: clamp(300px, 42vh, 380px);
  display: flex;
  align-items: center;
  padding-block: var(--hero-pad-y);
  border-color: var(--app-border) !important;
}

.hero-bg-layer {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-cover .hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  transition:
    opacity 1s ease-in-out,
    transform 12s ease-out;
}

.hero-cover .hero-bg.active {
  opacity: 1;
  transform: scale(1);
}

.hero-cover .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--hero-overlay-top) 0%,
    var(--hero-overlay-mid) 45%,
    var(--hero-overlay-bottom) 100%
  );
  pointer-events: none;
}

.hero-cover .container {
  position: relative;
  z-index: 1;
  width: 100%;
}

.hero-cover h1 {
  color: var(--app-text-inverse);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  max-width: 22ch;
  margin-inline: auto;
}

.hero-cover .hero-lead {
  color: rgba(248, 250, 252, 0.88);
  font-size: clamp(0.9rem, 0.82rem + 0.45vw, 1.0625rem);
  font-weight: var(--fw-normal);
  line-height: var(--lh-body);
  max-width: 36rem;
  letter-spacing: var(--ls-wide);
}

.hero-cover .hero-search-container {
  overflow: visible;
}

.hero-cover .brand-grid {
  overflow: visible;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: clamp(0.75rem, 2vw, 1.125rem);
  max-width: min(52rem, 100%);
  margin: 0 auto;
}

.brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--app-text-inverse);
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
  padding: 1rem 0.75rem;
  border-radius: var(--app-radius-md);
  background: var(--hero-brand-panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hero-brand-panel-border);
  box-shadow: var(--app-shadow-xs);
}

.brand-item:hover {
  transform: translateY(-3px);
  background: var(--hero-brand-panel-hover);
  color: var(--app-text-inverse);
  text-decoration: none;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: var(--app-shadow-md);
}

.brand-logo-container {
  width: 60px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--app-surface);
  border-radius: var(--app-radius-sm);
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-xs);
}

.brand-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brand-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  opacity: 0.95;
  letter-spacing: var(--ls-wide);
}

.hero-search-container {
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: min(32rem, 100%);
  margin-top: clamp(0.75rem, 2vw, 1.25rem);
}

.hero-search-input-group {
  border-radius: var(--app-radius-pill);
  overflow: hidden;
  box-shadow: var(--hero-search-shadow);
  background: var(--hero-search-surface);
  border: 1px solid var(--app-border);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.hero-search-input-group:focus-within {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: var(--hero-search-shadow), var(--app-focus-ring);
}

.hero-search-input {
  border: none;
  padding: 0.875rem 1.25rem;
  font-size: var(--text-body);
  background: var(--hero-search-surface);
  color: var(--app-text);
  border-radius: var(--app-radius-pill) 0 0 var(--app-radius-pill);
}

.hero-search-input::placeholder {
  color: var(--app-text-muted);
}

.hero-search-input:focus {
  border: none;
  box-shadow: none;
  background: var(--hero-search-surface);
  outline: none;
}

.hero-search-btn {
  border: none;
  padding: 0.875rem 1.35rem;
  font-weight: var(--fw-semibold);
  border-radius: 0 var(--app-radius-pill) var(--app-radius-pill) 0;
  letter-spacing: 0.02em;
}

.hero-search-btn:focus-visible {
  z-index: 2;
}

.hero-search-suggest {
  z-index: 5;
}

.hero-search-suggestions {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1050;
  margin-top: 0.35rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 0.35rem 0;
  border-radius: var(--app-radius-md);
  background: var(--hero-search-surface);
  border: 1px solid var(--app-border);
  box-shadow: var(--hero-search-shadow);
}

.hero-search-suggestions__item {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--app-text);
  text-decoration: none;
  font-size: var(--text-body-sm);
  line-height: 1.35;
}

.hero-search-suggestions__item:hover,
.hero-search-suggestions__item:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  color: var(--app-text);
  outline: none;
}

.hero-search-suggestions__item--active {
  background: rgba(37, 99, 235, 0.12);
}

.hero-search-suggestions__item--error,
.hero-search-suggestions__item--error:hover,
.hero-search-suggestions__item--error:focus-visible {
  background: none;
  cursor: default;
  pointer-events: none;
}

.hero-cover .hero-advanced-toggle {
  opacity: 0.92;
}

.hero-cover .hero-advanced-toggle:hover,
.hero-cover .hero-advanced-toggle:focus-visible {
  color: rgba(255, 255, 255, 0.95) !important;
  opacity: 1;
}

.hero-cover .hero-advanced-filters {
  margin-top: 0.125rem;
  padding: 1rem 1.125rem;
  border-radius: var(--app-radius-md);
  background: var(--hero-search-surface);
  border: 1px solid var(--app-border);
  box-shadow: var(--hero-search-shadow);
}

.hero-cover .hero-advanced-filters .form-control,
.hero-cover .hero-advanced-filters .form-select {
  border-color: var(--app-border);
  background: var(--hero-search-surface);
  color: var(--app-text);
}

.hero-cover .hero-advanced-filters .form-control:focus,
.hero-cover .hero-advanced-filters .form-select:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: var(--app-focus-ring);
}

@media (min-width: 768px) {
  .hero-cover {
    min-height: clamp(380px, 48vh, 460px);
  }
}

@media (min-width: 992px) {
  .hero-cover {
    min-height: clamp(420px, 52vh, 520px);
  }
}

@media (max-width: 576px) {
  .brand-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }

  .brand-item {
    padding: 0.625rem 0.4rem;
  }

  .brand-logo-container {
    width: 50px;
    height: 38px;
  }

  .brand-name {
    font-size: 0.6875rem;
  }

  .hero-search-input,
  .hero-search-btn {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: var(--text-body-sm);
  }
}

@media (min-width: 993px) {
  .brand-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* -------------------------------------------------------------------------- */
/* Details page */
/* -------------------------------------------------------------------------- */
.spec-kv {
  font-size: var(--text-body-sm);
  color: var(--bs-secondary-color, var(--app-text-muted));
}

.gallery-main .carousel-inner .ratio > img {
  object-fit: contain;
}

.gallery-main .ratio i.fa-car {
  font-size: 4rem;
}

.seller-avatar {
  width: 56px;
  height: 56px;
}

.copy-feedback {
  display: none;
}

.share-modal-dialog {
  max-width: 22rem;
}

.share-icon-btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 2.75rem;
  height: 2.25rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.thumb img {
  object-fit: contain;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--app-radius-sm);
}

.thumb.active img {
  border-color: var(--bs-primary, var(--app-accent));
}

.thumbs-container {
  position: relative;
}

.thumbs-wrapper {
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 8px;
  display: flex;
  gap: 0.5rem;
}

.thumb-item {
  width: 120px;
  flex-shrink: 0;
}

.sticky-cta {
  position: sticky;
  top: 1rem;
}

.feature-group {
  margin-bottom: 1rem;
}

.feature-group:last-child {
  margin-bottom: 0;
}

.feature-group-title {
  color: var(--app-text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
}

.features-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem 1.5rem;
}

/* Two columns once the (now wider) Highlights card has room for them. */
@media (min-width: 576px) {
  .features-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.feature-item {
  font-size: var(--text-body-sm);
  color: var(--app-text-secondary);
  line-height: 1.45;
}

.hero-slim {
  background: var(--app-surface);
  border-color: var(--app-border);
}

@media (max-width: 991.98px) {
  .mobile-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border-strong);
    box-shadow: 0 -4px 24px rgba(15, 23, 42, 0.08);
    z-index: 1030;
    /* iOS home-indicator clearance for the bottom-most fixed element. */
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
}

/* Desktop compare bar gets safe-area padding too in case Bootstrap is ever
   rendered in a Safari iframe with a notch. Cheap insurance, evaluates to 0
   on regular desktops. */
#compare-bar {
  padding-bottom: env(safe-area-inset-bottom);
}
@media (max-width: 991.98px) {
  #compare-bar { display: none !important; }
}

/* ── Mobile compare FAB ───────────────────────────────────────────────── */
.compare-fab {
  position: fixed;
  right: 1rem;
  /* Default bottom for pages without a sticky mobile-bar at the bottom. */
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 1040;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  border: 0;
  background: #212529;
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
}
.compare-fab:hover,
.compare-fab:focus-visible {
  transform: translateY(-2px);
  color: #fff;
}

.compare-fab[hidden] {
  display: none;
}
.compare-fab__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: 0.7rem;
}

/* When a sticky bottom bar is present on the page (listing detail), lift the
   FAB above it so it doesn't overlap. Approx mobile-bar height + spacing. */
body:has(.mobile-bar) .compare-fab {
  bottom: calc(7rem + env(safe-area-inset-bottom));
}

/* Offcanvas footer reuses Bootstrap offcanvas conventions. */
.offcanvas-footer {
  background: var(--app-surface);
}

/* Breadcrumb (under navbar). Theming via CSS variables */
.breadcrumb-nav {
  --breadcrumb-bg: var(--app-surface-muted);
  --breadcrumb-border-color: var(--app-border);
  --breadcrumb-separator-color: var(--app-text-muted);
  --breadcrumb-link-color: var(--app-accent);
  --breadcrumb-link-hover-color: var(--app-accent-hover);
  --breadcrumb-active-color: var(--app-text-secondary);
  background-color: var(--breadcrumb-bg);
  border-bottom: 1px solid var(--breadcrumb-border-color);
}

.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin: 0;
  font-size: var(--text-body-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--breadcrumb-separator-color);
  font-weight: bold;
}

.breadcrumb-link {
  color: var(--breadcrumb-link-color);
  text-decoration: none;
}

.breadcrumb-link:hover {
  color: var(--breadcrumb-link-hover-color);
  text-decoration: underline;
}

.breadcrumb-item.active span {
  color: var(--breadcrumb-active-color);
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* Site header (design system: components/navigation/Navbar)                    */
/* -------------------------------------------------------------------------- */
/* Rendered by _partials/site_nav.html.twig on the marketplace and on every dealer
   microsite. Behaviour lives in site_nav_controller.js. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-xs);
}

/* Width and gutters come from Bootstrap's .container on the same element. */
.site-nav__inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  height: var(--site-nav-h);
}

.site-nav__brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.site-nav__logo {
  height: 34px;
  width: auto;
  display: block;
}

.site-nav__wordmark {
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ls-tight);
  color: var(--app-accent);
}

.site-nav__links {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-left: 0.5rem;
  align-self: stretch;
  min-width: 0;
}

.site-nav__item {
  position: relative;
  align-self: stretch;
  display: flex;
}

.site-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--app-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.site-nav__link:hover {
  color: var(--app-text);
}

.site-nav__link.is-active,
.site-nav__link[aria-expanded='true'] {
  color: var(--app-text);
  font-weight: var(--fw-semibold);
}

/* The accent underline is the design's active affordance — it sits on the header's
   bottom edge, so it must not be a border (which would shift the link's height). */
.site-nav__link.is-active::after {
  content: '';
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--btn-primary-bg);
}

.site-nav__caret {
  font-size: 0.7rem;
  opacity: 0.6;
}

.site-nav__right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.site-nav__icon {
  position: relative;
  width: 38px;
  height: 38px;
  border: none;
  background: none;
  border-radius: var(--app-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  color: var(--app-text-secondary);
  text-decoration: none;
  cursor: pointer;
}

.site-nav__icon:hover,
.site-nav__icon[aria-expanded='true'] {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.site-nav__badge {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--app-radius-pill);
  background: var(--btn-primary-bg);
  color: #fff;
  font-size: 0.625rem;
  font-weight: var(--fw-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--app-surface);
}

.site-nav__cta {
  white-space: nowrap;
}

.site-nav__menu {
  position: absolute;
  top: 100%;
  left: 0.25rem;
  min-width: 210px;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  box-shadow: var(--app-shadow-lg);
  padding: 0.375rem;
  z-index: 5;
}

.site-nav__menu--account {
  left: auto;
  right: 0;
  min-width: 236px;
}

.site-nav__menu a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.625rem;
  border-radius: 6px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--app-text-secondary);
  text-decoration: none;
}

.site-nav__menu a:hover {
  background: var(--app-surface-muted);
  color: var(--app-text);
}

.site-nav__menu a i {
  width: 16px;
  text-align: center;
  color: var(--app-text-muted);
  font-size: 0.875rem;
}

.site-nav__menu-heading {
  padding: 0.5rem 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.site-nav__menu-divider {
  border: none;
  border-top: 1px solid var(--app-divider);
  margin: 0.375rem 0.25rem;
  opacity: 1;
}

.site-nav__who {
  padding: 0.625rem;
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.site-nav__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--btn-subtle-bg);
  color: var(--btn-subtle-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 0.8125rem;
  flex-shrink: 0;
}

.site-nav__who-text {
  min-width: 0;
}

.site-nav__who-text b {
  display: block;
  font-size: 0.875rem;
  color: var(--app-text);
  line-height: 1.3;
}

.site-nav__who-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--app-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-nav__toggle {
  display: none;
}

.site-nav__sheet {
  position: fixed;
  inset: var(--site-nav-h) 0 0;
  z-index: 1029;
  background: var(--app-surface);
  overflow-y: auto;
  padding-top: 1rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--app-border);
}

.site-nav__sheet a:not(.btn) {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 0.25rem;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  color: var(--app-text);
  text-decoration: none;
  border-bottom: 1px solid var(--app-divider);
}

.site-nav__sheet a i {
  width: 20px;
  text-align: center;
  color: var(--app-text-muted);
  font-size: 0.9rem;
}

.site-nav__sheet-heading {
  padding: 1.25rem 0.25rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.site-nav__sheet-cta {
  width: 100%;
  margin-top: 1.25rem;
}

body.site-nav-sheet-open {
  overflow: hidden;
}

@media (max-width: 991.98px) {
  :root {
    --site-nav-h: 60px;
  }

  .site-nav__inner {
    padding: 0 1rem;
    gap: 0.75rem;
  }

  .site-nav__links,
  .site-nav__right .site-nav__cta {
    display: none;
  }

  .site-nav__toggle {
    display: flex;
  }

  .site-nav__right {
    gap: 0.125rem;
  }
}

/* Publish sidebar on listing forms */
.publish-sidebar-sticky {
  top: calc(var(--site-nav-h) + 0.5rem);
  z-index: 10;
}

/* Forms – light touch, Bootstrap-compatible */
.form-control,
.form-select {
  border-color: var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: var(--app-focus-ring);
}

.form-text {
  margin-top: 0.35rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #8b95a5;
  opacity: 1;
}

.form-check .form-text {
  margin-left: 1.6rem;
}

/* Cards on listings */
.card.border-0.shadow-soft {
  border: 1px solid var(--app-border) !important;
  border-radius: var(--app-radius-md);
  overflow: hidden;
}

.card.border-0.shadow-soft .card-body {
  padding: 1.125rem 1.25rem;
}

.ways-to-buy-icon-wrap {
  width: 2.5rem;
  min-width: 2.5rem;
  height: 2.5rem;
  font-size: var(--text-body-sm);
}

/* Listings by make: compact cards (3 per row) + filter sidebar */
.listings-page .listings-sidebar-filter {
  position: sticky;
  top: 1rem;
  z-index: 2;
}

@media (max-width: 991.98px) {
  .listings-page .listings-sidebar-filter {
    position: static;
  }

  .listings-page {
    padding-bottom: 4.5rem;
  }

  #filter-offcanvas {
    top: 0;
    margin-top: 0;
    width: 100%;
    max-width: 100%;
    z-index: 1050;
  }
}

.listings-page .listings-page-card .listings-page-card-cover {
  aspect-ratio: 4 / 3;
}

.listings-page .listings-page-card .listings-page-card-cover.listings-page-card-cover--overlay-fit {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--listing-card-cover-ar);
  display: flex;
  align-items: stretch;
  font-size: 0;
}

.listings-page .listings-page-card .card-body {
  padding: 0.625rem 0.75rem;
}

.listings-page-card-title {
  font-size: var(--text-body-sm);
  line-height: 1.35;
  font-weight: var(--fw-semibold);
}

.listings-page-card-spec {
  font-size: var(--text-xs);
  line-height: 1.35;
}

/* Featured listing: horizontal card (image left, details right) */
.listing-card-featured-h {
  flex-direction: row;
  align-items: stretch;
}

.listing-card-featured-h__img-link {
  flex: 0 0 44%;
  max-width: 44%;
  display: block;
  overflow: hidden;
}

.listing-card-featured-h__img-wrap {
  height: 100%;
  min-height: 190px;
  position: relative;
}

.listing-card-featured-h__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-card-featured-h__img-wrap .card-cover-placeholder {
  height: 100%;
  min-height: 190px;
  border-radius: 0;
}

.listing-card-featured-h .listing-card-featured-h__body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 1.125rem;
  flex: 1;
  gap: 0.75rem;
}

@media (max-width: 575.98px) {
  .listing-card-featured-h {
    flex-direction: column;
  }

  .listing-card-featured-h__img-link {
    flex: none;
    max-width: 100%;
  }

  .listing-card-featured-h__img-wrap {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  /* Overlay composites: use template aspect ratio, not the 4/3 fallback */
  .listing-card-featured-h__img-wrap.listing-card-public-cover--overlay-fit,
  .listing-card-featured-h__img-wrap.listings-page-card-cover--overlay-fit {
    aspect-ratio: var(--listing-card-cover-ar);
    min-height: 0;
  }
}

/* Home + dealer profile: full-size listing cards (match landing) */
.listing-card-public .listing-card-public-cover {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: stretch;
  font-size: 0;
}

.listing-card-public .listing-card-public-cover.listing-card-public-cover--overlay-fit {
  height: auto;
  min-height: 0;
  aspect-ratio: var(--listing-card-cover-ar);
}

.listing-card-public .card-cover-placeholder.listing-card-public-cover {
  aspect-ratio: 4 / 3;
}

/* -------------------------------------------------------------------------- */
/* Dealer public profile */
/* -------------------------------------------------------------------------- */
.dealer-hero {
  position: relative;
  background: var(--app-surface, #fff);
  border-color: var(--app-border) !important;
}

.dealer-banner-wrap {
  position: relative;
  max-height: min(42vh, 320px);
  min-height: 200px;
  overflow: hidden;
  background: #1a1f26;
}

.dealer-banner-img {
  width: 100%;
  height: min(42vh, 320px);
  min-height: 200px;
  object-fit: cover;
  display: block;
}

.dealer-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15, 23, 42, 0.92) 0%,
    rgba(15, 23, 42, 0.35) 45%,
    transparent 100%
  );
  pointer-events: none;
}

.dealer-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding-bottom: 1.5rem;
  padding-top: 2rem;
}

.dealer-hero-inner {
  align-items: flex-end;
}

.dealer-hero-title {
  color: #fff;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.dealer-verified-badge {
  background: color-mix(in srgb, var(--app-success) 95%, transparent) !important;
  color: #fff !important;
  font-weight: var(--fw-semibold);
}

.dealer-hero-logo {
  width: 88px;
  height: 88px;
  object-fit: contain;
  background: #fff;
}

.dealer-hero-logo--on-light {
  width: 80px;
  height: 80px;
}

.dealer-hero-logo-placeholder {
  width: 80px;
  height: 80px;
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border);
}

.dealer-banner-placeholder {
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 55%, #f8fafc 100%);
}

.dealer-profile-main {
  background: var(--app-bg);
}

.dealer-contact-card .card-body {
  padding: 1.5rem 1.75rem;
}

.dealer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.dealer-contact-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 0;
}

.dealer-contact-icon {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--app-radius-sm, 0.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--btn-primary-bg, #2563eb) 10%, transparent);
  color: var(--btn-primary-bg, #2563eb);
  font-size: var(--text-body);
}

.dealer-contact-label {
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--bs-secondary-color, #64748b);
  margin-bottom: 0.2rem;
}

.dealer-contact-value {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.45;
  word-break: break-word;
}

/* -------------------------------------------------------------------------- */
/* Blog */
/* -------------------------------------------------------------------------- */

.blog-back-link {
  color: var(--bs-secondary-color, #64748b);
  font-weight: var(--fw-semibold);
  font-size: var(--text-body-sm);
  transition:
    color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}

.blog-back-link:hover {
  color: var(--btn-primary-bg, #2563eb);
}

.blog-index-header {
  border-bottom: 1px solid var(--app-border);
}

.blog-card {
  border-radius: var(--app-radius-lg) !important;
  transition:
    transform var(--dur-card) var(--ease-standard),
    box-shadow var(--dur-card) var(--ease-standard);
}

.blog-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--app-shadow-lg) !important;
}

.blog-card__media {
  border-bottom: 1px solid var(--app-border);
}

.blog-card__date {
  letter-spacing: var(--ls-caps);
  font-size: var(--text-xs) !important;
}

.blog-card__title-link:hover {
  color: var(--btn-primary-bg, #2563eb) !important;
}

.blog-card__excerpt {
  line-height: 1.55;
  font-size: var(--text-body-sm);
}

.blog-post-show-card {
  border-radius: 1.25rem;
  background: var(--app-surface, #fff);
}

.blog-post-show-card__body {
  background: var(--app-surface, #fff);
}

.blog-post-show__hero {
  overflow: hidden;
  background: color-mix(in srgb, var(--app-border, #e2e8f0) 35%, var(--app-surface, #f8fafc));
}

.blog-post-show__hero-img {
  display: block;
  width: 100%;
  max-height: min(48vh, 480px);
  object-fit: cover;
}

/* The weekly-digest hero is a designed 1200×630 card, not a photo — show it whole rather than
   cover-cropping its brand/count off the top and bottom. `contain` fits the entire card; the dark
   figure background matches the card so the letterboxing is seamless. */
.blog-post-show__hero--card {
  background: #0f172a;
}
.blog-post-show__hero--card .blog-post-show__hero-img {
  object-fit: contain;
}

.blog-post-show__header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--app-border);
}

.blog-post-show__title {
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

.blog-post-show__meta {
  font-size: var(--text-body-sm);
}

.blog-post-show__meta-dot {
  opacity: 0.45;
  user-select: none;
}

.blog-post-show__body {
  font-size: 1.125rem;
  line-height: 1.8;
  max-width: 100%;
}

@media (min-width: 992px) {
  .blog-post-show__body {
    font-size: 1.1875rem;
    line-height: 1.82;
  }
}

/* -------------------------------------------------------------------------- */
/* Blog article — editorial single-post page (templates/blog/show.html.twig)  */
/* Restyle from the "AllCarsListed" Design System BlogPost.dc mockup: centered */
/* header, rounded hero, two-column body + sticky TOC/share, related strip and */
/* a browse CTA. Kept separate from the shared .blog-post-show* classes above  */
/* (those also style the legal pages).                                         */
/* -------------------------------------------------------------------------- */

/* Reading-progress bar (JS-driven via blog_post_controller) */
.bp-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  z-index: 60;
  background: transparent;
  pointer-events: none;
}
.bp-progress__bar {
  display: block;
  height: 100%;
  width: 0;
  background: var(--app-accent);
  transition: width 0.05s linear;
}

.bp-wrap {
  max-width: none;
  margin: 0 auto;
}

/* Header */
.bp__header {
  max-width: 760px;
  margin: 0 auto 2rem;
  text-align: center;
}
.bp__eyebrow {
  display: inline-block;
  margin-bottom: 1rem;
  padding: 0.35rem 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--app-accent);
  background: var(--app-accent-subtle);
  border-radius: var(--app-radius-pill);
}
.bp__title {
  margin: 0 0 1.1rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--app-text);
  text-wrap: balance;
}
.bp__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: var(--text-sm);
  color: var(--app-text-muted);
}
.bp__meta-dot {
  opacity: 0.45;
}

/* Hero */
.bp__hero {
  margin: 0 0 2.5rem;
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
  background: color-mix(in srgb, var(--app-border) 35%, var(--app-surface));
}
.bp__hero img {
  display: block;
  width: 100%;
  height: clamp(240px, 42vw, 460px);
  object-fit: cover;
}
.bp__hero--card {
  background: #0f172a;
}
.bp__hero--card img {
  object-fit: contain;
}

/* Body + sidebar layout */
.bp__layout {
  display: flex;
  gap: 3.5rem;
  align-items: flex-start;
  max-width: none;
  margin: 0 auto;
}
.bp__main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: none;
  margin: 0 auto;
}
.bp__sidebar {
  flex: 0 0 232px;
  position: sticky;
  top: 96px;
  align-self: flex-start;
}

/* Editorial body typography — scoped so it never bleeds into the appended
   "available now" (.wd-*) listing block that lives inside post.body. */
.bp-body {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--app-text);
}
@media (min-width: 992px) {
  .bp-body {
    font-size: 1.1875rem;
  }
}
.bp-body > p:first-of-type:not(.wd-intro) {
  font-size: 1.25rem;
  color: var(--app-text-secondary);
}
.bp-body h2 {
  margin: 2.4rem 0 0.9rem;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--app-text);
  scroll-margin-top: 90px;
}
.bp-body h3 {
  margin: 1.8rem 0 0.7rem;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--app-text);
  scroll-margin-top: 90px;
}
.bp-body p {
  margin: 0 0 1.25rem;
}
.bp-body > ul {
  margin: 0 0 1.4rem;
  padding-left: 0;
  list-style: none;
}
.bp-body > ul > li {
  position: relative;
  padding-left: 1.9rem;
  margin-bottom: 0.7rem;
}
.bp-body > ul > li::before {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--app-success);
  position: absolute;
  left: 0;
  top: 0.15rem;
  font-size: 0.85em;
}
.bp-body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.3rem;
}
.bp-body ol li {
  margin-bottom: 0.7rem;
}
.bp-body a {
  color: var(--app-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--app-accent-subtle);
}
.bp-body a:hover {
  color: var(--app-accent-hover);
  border-bottom-color: var(--app-accent);
}
.bp-body strong {
  font-weight: 600;
}
.bp-body blockquote {
  margin: 2.4rem 0;
  padding: 0;
  border: 0;
  text-align: center;
}
.bp-body blockquote p {
  margin: 0;
  font-size: 1.6rem;
  line-height: 1.35;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--app-text);
  text-wrap: balance;
}
.bp-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--app-radius-md);
}
/* Don't let the editorial link underline reach the appended listing-card links. */
.bp-body .wd-list a {
  border-bottom: 0;
}

/* Sidebar — table of contents */
.bp-toc {
  padding: 1.125rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-xs);
}
.bp-toc__label,
.bp-share__label {
  margin-bottom: 0.75rem;
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--app-text-muted);
}
.bp-toc__links {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  font-size: 0.84375rem;
  line-height: 1.35;
}
.bp-toc__links a {
  color: var(--app-text-secondary);
  text-decoration: none;
}
.bp-toc__links a:hover {
  color: var(--app-accent);
}
.bp-toc__links a.is-active {
  color: var(--app-accent);
  font-weight: var(--fw-semibold);
}

/* Sidebar — share */
.bp-share__row {
  display: flex;
  gap: 0.5rem;
}
.bp-share__btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--app-border-strong);
  background: transparent;
  color: var(--app-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color 0.15s var(--ease-standard), border-color 0.15s var(--ease-standard);
}
.bp-share__btn:hover {
  color: var(--app-accent);
  border-color: var(--app-accent);
}
.bp-share__btn.is-copied {
  color: var(--app-success);
  border-color: var(--app-success);
}

/* Related strip */
.bp-related {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--app-border);
}
.bp-related__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.bp-related__title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--app-text);
}
.bp-related__all {
  font-size: var(--text-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--app-accent);
  text-decoration: none;
  white-space: nowrap;
}
.bp-related__all:hover {
  color: var(--app-accent-hover);
}

/* Browse CTA */
.bp-cta {
  margin-top: 3.5rem;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border-radius: var(--app-radius-lg);
  background: var(--app-text);
  color: var(--app-text-inverse);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  flex-wrap: wrap;
}
.bp-cta__text {
  flex: 1 1 260px;
  min-width: 240px;
}
.bp-cta__title {
  margin-bottom: 0.35rem;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.bp-cta__sub {
  font-size: var(--text-lg);
  line-height: 1.5;
  opacity: 0.8;
}

@media (max-width: 991.98px) {
  .bp__layout {
    flex-direction: column;
    gap: 2rem;
  }
  .bp__sidebar {
    position: static;
    flex-basis: auto;
    width: 100%;
  }
  .bp-toc {
    display: none;
  }
}

/* ── Weekly "new arrivals" digest — alternating listing rows ───────────────────
   Rendered inside a blog post (blog/_weekly_digest_body.html.twig). Each listing
   is a full-width row: photo on one side, details on the other, alternating sides
   down the page. */
.wd-intro {
  margin: 0 0 0.5rem;
}
.wd-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.wd-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  overflow: hidden;
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
  transition:
    box-shadow var(--dur-card) var(--ease-standard),
    transform var(--dur-card) var(--ease-standard);
}
.wd-row:hover {
  box-shadow: var(--app-shadow-md);
  transform: translateY(-2px);
}
.wd-row:nth-child(even) {
  flex-direction: row-reverse;
}
.wd-media {
  flex: 0 0 40%;
  align-self: stretch;
  min-height: 170px;
  overflow: hidden;
  background: var(--app-surface-muted);
}
.wd-media img {
  width: 100%;
  height: 100%;
  /* contain (not cover) so the whole listing photo — dealer banner/watermark and
     all — is visible rather than cropped; the muted media background frames any
     letterbox gap. */
  object-fit: contain;
  display: block;
  transition: transform 0.4s ease;
  /* The whole post is a `.card`, so the global `.card:hover a img` rule would zoom
     EVERY digest photo whenever the post is hovered. Neutralize it here and drive an
     intentional, per-row zoom below (both !important to beat that non-important rule). */
  transform: none !important;
}
.wd-row:hover .wd-media img {
  transform: scale(1.04) !important;
}
.wd-media--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--app-text-muted);
  font-size: 2.75rem;
}
.wd-body {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.15rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wd-title {
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  line-height: 1.25;
  margin: 0;
}
.wd-title a {
  color: var(--app-text);
  text-decoration: none;
}
.wd-title a:hover {
  color: var(--app-accent);
}
.wd-price {
  font-size: 1.2rem;
  font-weight: var(--fw-bold);
  color: var(--app-text);
  margin: 0;
}
.wd-price--muted {
  color: var(--app-text-muted);
  font-weight: var(--fw-semibold);
  font-size: var(--text-lg);
}
.wd-specs {
  margin: 0.15rem 0;
  color: var(--app-text-muted);
  font-size: var(--text-body-sm);
}
.wd-desc {
  margin: 0.25rem 0 0;
  color: var(--app-text-secondary);
  font-size: var(--text-body);
  line-height: var(--lh-relaxed);
}
.wd-link {
  margin-top: auto;
  align-self: flex-start;
  padding-top: 0.5rem;
  font-weight: var(--fw-semibold);
  text-decoration: none;
}
.wd-link:hover {
  text-decoration: underline;
}
@media (max-width: 767.98px) {
  .wd-row,
  .wd-row:nth-child(even) {
    flex-direction: column;
  }
  .wd-media {
    flex: 0 0 auto;
    min-height: 0;
    aspect-ratio: 3 / 2;
  }
}

/* Listing card hover overlay */
.listing-card-hover-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.5rem;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.45));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 2;
}

.listing-card-public:hover .listing-card-hover-overlay {
  opacity: 1;
  pointer-events: auto;
}

/* The card footer no longer carries a Save button, so on touch — where :hover
   never fires — this overlay is the only way to favourite from a card. Show it. */
@media (hover: none) {
  .listing-card-hover-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

.listing-card-hover-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.listing-card-hover-btn:hover {
  background: #fff;
  transform: scale(1.1);
}

/* Footer */
footer#contact {
  border-top: 1px solid var(--app-border);
  background: var(--app-surface);
}

/* =========================================================
   Pricing page — comparison table + mobile stacked cards
   ========================================================= */

.pricing-table thead th.plan-col {
  vertical-align: top;
  padding-top: 2.5rem; /* leaves room for the absolute-positioned ribbon */
  padding-bottom: 1rem;
  position: relative;
}

.pricing-table .plan-col-name {
  font-size: var(--text-lg);
}

.pricing-table .plan-col-tagline {
  margin-top: 0.15rem;
  min-height: 1.25em;
}

.pricing-table .plan-col-price {
  margin-top: 0.6rem;
  line-height: 1.1;
}

.pricing-table .plan-col-price-amount {
  font-size: var(--text-3xl);
  font-weight: var(--fw-bold);
  color: var(--bs-body-color, #212529);
}

.pricing-table .plan-col-price-currency {
  font-size: var(--text-body-sm);
  color: var(--bs-secondary-color);
  margin-left: 0.25rem;
}

.pricing-table .plan-col-period {
  margin-top: 0.2rem;
}

/* Featured column highlight (both table + card contexts). */
.plan-col-ribbon {
  position: absolute;
  top: 0.5rem; /* sits inside the header cell so .table-responsive overflow doesn't clip it */
  left: 50%;
  transform: translateX(-50%);
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  padding: 0.2rem 0.6rem;
  border-radius: var(--app-radius-pill);
  white-space: nowrap;
  box-shadow: var(--app-shadow-accent-sm);
}

.pricing-table .plan-col-featured {
  background-color: var(--app-accent-tint);
}

.pricing-table thead th.plan-col-featured {
  border-top: 3px solid var(--bs-primary, #0d6efd);
}

/* Mobile / narrow viewport stacked cards. */
.plan-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.plan-card {
  position: relative;
  border: 1px solid var(--app-border, #dee2e6);
  border-radius: var(--app-radius-md);
  padding: 1.25rem 1.25rem 1rem;
  background: var(--app-surface, #fff);
  box-shadow: var(--app-shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.04));
}

.plan-card-featured {
  border-color: var(--bs-primary, #0d6efd);
  border-width: 2px;
  box-shadow: var(--app-shadow-accent-md);
}

.plan-card-ribbon {
  position: absolute;
  top: -0.75rem;
  left: 1rem;
  background: var(--bs-primary, #0d6efd);
  color: #fff;
  font-size: 0.7rem;
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  padding: 0.2rem 0.6rem;
  border-radius: var(--app-radius-pill);
  box-shadow: var(--app-shadow-accent-sm);
}

.plan-card-header {
  margin-bottom: 0.9rem;
}

.plan-card-price {
  line-height: 1.1;
}

.plan-card-price-amount {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--bs-body-color, #212529);
}

.plan-card-price-currency {
  font-size: var(--text-body);
  color: var(--bs-secondary-color);
  margin-left: 0.25rem;
}

.plan-card-price-period {
  margin-left: 0.35rem;
}

.plan-card-features li {
  padding: 0.15rem 0;
  font-size: var(--text-body-sm);
}

/* -------------------------------------------------------------------------- */
/* Dealer site home */
/* -------------------------------------------------------------------------- */
.dealer-home-banner {
  max-width: 1400px;
  margin-inline: auto;
  padding: 0;
}

.dealer-home-banner__img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--app-surface-muted);
}

@media (min-width: 768px) {
  .dealer-home-banner {
    padding: 1.5rem 1rem 0;
  }

  .dealer-home-banner__img {
    aspect-ratio: 3 / 1;
    object-fit: cover;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-lg, 1rem);
  }
}

.dealer-home-welcome {
  padding-block: 2rem;
}

.dealer-home-welcome-card {
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg, 1rem);
  box-shadow: var(--app-shadow-md);
  padding: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 56rem;
  margin-inline: auto;
}

.dealer-home-welcome--overlap {
  padding-block: 0 2rem;
}

.dealer-home-welcome--overlap .dealer-home-welcome-card {
  margin-top: -1.5rem;
}

@media (min-width: 768px) {
  .dealer-home-welcome--overlap .dealer-home-welcome-card {
    margin-top: -3.5rem;
  }
}

@media (min-width: 992px) {
  .dealer-home-welcome--overlap .dealer-home-welcome-card {
    margin-top: -4.5rem;
  }
}

.dealer-home-welcome-card__title {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
  margin: 0 0 0.75rem;
  color: var(--app-text);
}

.dealer-home-welcome-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  font-size: var(--text-body-sm);
  color: var(--app-text-muted);
}

.dealer-home-welcome-meta li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.dealer-home-welcome-meta i {
  width: 1rem;
  text-align: center;
  color: var(--app-text-muted);
}

.dealer-home-welcome-meta a {
  color: inherit;
  text-decoration: none;
}

.dealer-home-welcome-meta a:hover {
  color: var(--app-text);
  text-decoration: underline;
}

.dealer-home-welcome-card__about {
  color: var(--app-text);
  line-height: var(--lh-relaxed);
  margin-bottom: 1.25rem;
}

.dealer-home-welcome-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
}

.dealer-home-search {
  background: var(--app-bg);
  border-top: 1px solid var(--app-border);
  border-bottom: 1px solid var(--app-border);
}

.dealer-home-search-container {
  width: 100%;
  max-width: min(40rem, 100%);
}

.dealer-home-search .hero-advanced-toggle {
  color: var(--app-text-muted);
  opacity: 0.9;
}

.dealer-home-search .hero-advanced-toggle:hover,
.dealer-home-search .hero-advanced-toggle:focus-visible {
  color: var(--app-text);
  opacity: 1;
}

.dealer-home-search .hero-advanced-filters {
  margin-top: 0.125rem;
  padding: 1rem 1.125rem;
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-xs);
}

.dealer-home-brands {
  background: var(--app-surface-muted, var(--app-bg));
}

.dealer-home-brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: clamp(0.75rem, 2vw, 1.125rem);
  max-width: min(64rem, 100%);
  margin: 0 auto;
}

.dealer-home-brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: var(--app-text);
  padding: 1rem 0.75rem;
  border-radius: var(--app-radius-md);
  background: var(--app-surface, #fff);
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-xs);
  transition:
    transform var(--dur-card) var(--ease-standard),
    box-shadow var(--dur-card) var(--ease-standard),
    border-color var(--dur-card) var(--ease-standard);
}

.dealer-home-brand-item:hover {
  transform: translateY(-2px);
  color: var(--app-text);
  text-decoration: none;
  border-color: var(--app-accent-ring);
  box-shadow: var(--app-shadow-sm);
}

.dealer-home-brand-item__logo {
  width: 60px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem;
  margin-bottom: 0.5rem;
}

.dealer-home-brand-item__logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dealer-home-brand-item__name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

@media (max-width: 576px) {
  .dealer-home-brand-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.625rem;
  }

  .dealer-home-brand-item {
    padding: 0.625rem 0.4rem;
  }

  .dealer-home-brand-item__logo {
    width: 50px;
    height: 38px;
  }

  .dealer-home-brand-item__name {
    font-size: 0.6875rem;
  }
}

@media (min-width: 993px) {
  .dealer-home-brand-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* -------------------------------------------------------------------------- */
/* Dealer site — builder-composed pages                                       */
/*                                                                            */
/* Blocks a dealer assembled themselves, rendered by                          */
/* App\Service\PageBuilder\DealerPageRenderer. Everything here reads the       */
/* app.css token scale — a dealer page must look like the rest of the site,    */
/* not like a page builder's idea of one.                                     */
/* -------------------------------------------------------------------------- */
.dealer-page-block {
  display: block;
  padding-block: var(--app-section-y);
}

/* Consecutive blocks would otherwise stack two full section paddings between
   them, leaving a gap twice the size of the one above the first block. */
.dealer-page-block + .dealer-page-block {
  padding-top: 0;
}

/* A separator inherits padding-top: 0 from the rule above and keeps its bottom padding, which
   lands the rule midway between the two blocks. Zeroing both would push it flush against the
   heading below it. */

.dealer-block-heading {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  color: var(--app-text);
  margin-bottom: var(--space-4);
}

.dealer-block-separator {
  border: 0;
  border-top: 1px solid var(--app-border);
  opacity: 1;
  margin: 0;
}

/* ---- Content ---- */
.dealer-block-content--narrow {
  max-width: var(--app-container-narrow);
}

.dealer-block-prose {
  color: var(--app-text-secondary);
  line-height: var(--lh-relaxed);
}

.dealer-block-prose > :last-child {
  margin-bottom: 0;
}

.dealer-block-prose h2,
.dealer-block-prose h3,
.dealer-block-prose h4 {
  color: var(--app-text);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.dealer-block-prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--app-radius-md);
}

.dealer-block-prose iframe {
  max-width: 100%;
  border: 0;
  border-radius: var(--app-radius-md);
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

.dealer-block-prose blockquote {
  border-left: 3px solid var(--app-border-strong);
  padding-left: var(--space-4);
  margin-left: 0;
  color: var(--app-text-muted);
}

/* ---- Hero ---- */
.dealer-block-hero-bleed {
  width: 100%;
}

.dealer-block-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
  /* Sized to land near the 3:1 the dealer banner uses, because that is the proportion dealers
     have their artwork cut to. min-height rather than aspect-ratio: a fixed ratio on a phone
     gives a band two centimetres tall that any heading overflows. */
  min-height: clamp(16rem, 34vw, 28rem);
}

.dealer-block-hero--compact {
  min-height: clamp(11rem, 22vw, 17rem);
}

.dealer-block-hero--tall {
  min-height: clamp(20rem, 46vw, 38rem);
}

/* No heading, no subheading, no button: the image is the whole message. Drop the padding so a
   finished banner is shown at its own proportions rather than floated in dead space. */
.dealer-block-hero--bare {
  padding-block: 0;
}

.dealer-block-hero--plain {
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
}

.dealer-block-hero--image {
  background: var(--hero-gradient-start);
}

.dealer-block-hero--rounded {
  border-radius: var(--app-radius-lg);
}

.dealer-block-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Opt-out, not automatic. Dimming keeps white text legible over a photograph, but a dealer
   banner that is already a finished piece of artwork just looks faded under it. */
.dealer-block-hero--dimmed .dealer-block-hero__bg {
  filter: brightness(0.55);
}

/* With the dim off, the text still has to survive whatever is behind it. A scrim behind the
   words only — rather than over the whole picture — keeps the artwork at full strength and the
   heading readable, instead of trading one for the other. Nothing renders it when the hero has
   no text, which is the designed-banner case. */
.dealer-block-hero--image:not(.dealer-block-hero--dimmed) .dealer-block-hero__inner {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--app-radius-lg);
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  text-shadow: 0 1px 6px rgba(15, 23, 42, 0.5);
}

/* The scrim is a panel, so it should not run the full width of a full-bleed hero. */
.dealer-block-hero--image:not(.dealer-block-hero--dimmed) .dealer-block-hero__inner.container {
  width: auto;
  max-width: min(46rem, 90%);
}

.dealer-block-hero__eyebrow {
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.dealer-block-hero--image .dealer-block-hero__eyebrow {
  color: var(--app-text-inverse);
  opacity: 0.9;
}

.dealer-block-hero__inner {
  position: relative;
  z-index: 1;
}

.dealer-block-hero__title {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, var(--text-display));
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-3);
  color: var(--app-text);
}

.dealer-block-hero__subtitle {
  max-width: var(--app-container-narrow);
  margin-inline: auto;
  margin-bottom: 0;
  font-size: var(--text-lg);
  line-height: var(--lh-relaxed);
  color: var(--app-text-secondary);
}

.dealer-block-hero--image .dealer-block-hero__title,
.dealer-block-hero--image .dealer-block-hero__subtitle {
  color: var(--app-text-inverse);
}

.dealer-block-hero__cta {
  margin-top: var(--space-6);
}

/* ---- CTA ---- */
.dealer-block-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
}

.dealer-block-cta--stacked {
  flex-direction: column;
  align-items: flex-start;
}

.dealer-block-cta__copy {
  min-width: 0;
}

.dealer-block-cta__title {
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-snug);
  color: var(--app-text);
  margin-bottom: 0;
}

.dealer-block-cta__subtitle {
  margin-top: var(--space-2);
  margin-bottom: 0;
  color: var(--app-text-muted);
  line-height: var(--lh-relaxed);
}

.dealer-block-cta__button {
  flex-shrink: 0;
}

/* ---- Image ---- */
.dealer-block-image-bleed {
  width: 100%;
}

.dealer-block-image {
  margin: 0;
}

.dealer-block-image__img {
  display: block;
  width: 100%;
  height: auto;
}

.dealer-block-image--rounded {
  overflow: hidden;
  border-radius: var(--app-radius-lg);
}

.dealer-block-image__caption {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--app-text-muted);
  text-align: center;
}

/* ---- Columns ---- */
.dealer-block-row__head {
  margin-bottom: var(--space-5);
}

/* A block inside a column sits under the row's own heading, so its heading has to step down or
   the two read as siblings. One rule here beats a --nested modifier on every block type. */
.dealer-block-col .dealer-block-heading {
  font-size: var(--text-xl);
}

.dealer-block-row__subtitle {
  margin-bottom: 0;
  color: var(--app-text-muted);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------------------- */
/* Turbo frame: loading state + active-filter chips (search results)          */
/* -------------------------------------------------------------------------- */
turbo-frame#search-results {
  display: block;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

turbo-frame#search-results[aria-busy='true'],
turbo-frame#search-results[busy] {
  opacity: 0.55;
  pointer-events: none;
}

.search-active-chips {
  padding: 0.5rem 0.75rem;
  background-color: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-btn);
}

.search-chip,
.search-chip-clear {
  display: inline-flex;
  align-items: center;
  font-size: var(--text-body-sm);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}

.search-chip {
  padding: 0.35rem 0.7rem;
  border-radius: var(--app-radius-pill);
  background-color: #fff;
  color: var(--bs-primary-text-emphasis, #084298);
  border: 1px solid var(--bs-primary-border-subtle, #b6d4fe);
}

.search-chip:hover,
.search-chip:focus-visible {
  background-color: var(--bs-primary, #0d6efd);
  color: #fff;
  border-color: var(--bs-primary, #0d6efd);
  outline: none;
}

.search-chip-clear {
  padding: 0.35rem 0.5rem;
  color: var(--bs-secondary-color, #6c757d);
  background-color: transparent;
  border: none;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.search-chip-clear:hover,
.search-chip-clear:focus-visible {
  color: var(--app-danger);
  outline: none;
}

/* SOLD overlay: diagonal ribbon stretched corner-to-corner over the listing photo. */
.listing-sold-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  user-select: none;
}


/* ── Gallery video tile ──────────────────────────────────────────────────
   The tile reuses the cover photo instead of hotlinking a YouTube thumbnail,
   so the badge is what distinguishes it from a normal thumb. */
.thumb--video {
  cursor: pointer;
}

.thumb-video-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  border-radius: var(--app-radius-sm);
  transition: background 0.15s ease-in-out;
}

.thumb--video:hover .thumb-video-badge,
.thumb--video:focus-visible .thumb-video-badge {
  background: rgba(0, 0, 0, 0.2);
}

.thumb-video-badge i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.9);
  padding-left: 0.15rem; /* optically centre the play triangle */
  font-size: 0.7rem;
}

/* ── Gallery lightbox ────────────────────────────────────────────────────
   Bootstrap modal supplies the shell (focus trap, ESC, scroll-lock); these
   rules only make it a dark, edge-to-edge viewer. */
.listing-lightbox__content {
  background: rgba(0, 0, 0, 0.94);
  border: 0;
  border-radius: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.listing-lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.listing-lightbox__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 1rem 1.5rem;
}

.listing-lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Every stored gallery image is 1200x900, so a fixed 4:3 box never letterboxes
   oddly; the video keeps its own 16:9. */
.listing-lightbox__video {
  width: 100%;
  max-width: min(100%, calc((100vh - 8rem) * 16 / 9));
  aspect-ratio: 16 / 9;
  border: 0;
}

.listing-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease-in-out;
}

.listing-lightbox__nav:hover,
.listing-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.listing-lightbox__nav--prev {
  left: 1rem;
}

.listing-lightbox__nav--next {
  right: 1rem;
}

@media (max-width: 575.98px) {
  .listing-lightbox__nav {
    width: 2.5rem;
    height: 2.5rem;
  }

  .listing-lightbox__nav--prev {
    left: 0.35rem;
  }

  .listing-lightbox__nav--next {
    right: 0.35rem;
  }
}

/* Placeholder for an added-but-unfilled block. Preview-only — the live page skips these
   entirely, so this never reaches a visitor. */
.dealer-block-placeholder {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-md);
  background: var(--app-surface-muted);
  color: var(--app-text-muted);
  font-size: var(--text-sm);
}

.dealer-block-placeholder strong {
  color: var(--app-text-secondary);
}

/* -------------------------------------------------------------------------- */
/* Dealer site width                                                          */
/*                                                                            */
/* Three settings of the container rhythm the site already has. "Centered" is */
/* the base style and adds no class, so no existing showroom moves.           */
/* -------------------------------------------------------------------------- */
.dealer-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* A footer sits at the bottom of a short page rather than halfway up it, leaving the dead space
   above it instead of below. Two shells because there are two: `body` for the marketplace and the
   error pages, and `.dealer-site` for a micro-site, whose footer is inside the theme wrapper and so
   is not a child of body. Both are flex columns with a viewport-height floor. */
body > footer,
.dealer-site > footer {
  margin-top: auto;
}

/* Full width: sections run edge to edge, with the page gutter as the only inset. */
.dealer-site--full .container {
  max-width: none;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}

/* Boxed: the whole site sits on a contained sheet with the page background around it.

   `width: 100%` is load-bearing, not decoration. This is a flex item (body is a flex column so a
   short page can push its footer down), and a flex item with auto inline margins does not stretch
   — auto margins absorb the free space instead, leaving the item sized to its own content. Without
   a definite width the sheet shrink-wraps whatever is on the page, so a showroom with one sparse
   block renders as a phone-width strip in the middle of a desktop screen. */
.dealer-site--boxed {
  width: 100%;
  max-width: var(--app-container-max);
  margin: var(--space-5) auto;
  min-height: 0;
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-md);
}

/* The sticky navbar cannot stick to the viewport once it is inside a rounded, clipped
   sheet — overflow: hidden kills position: sticky's containing block. Make it honest
   rather than leaving a header that looks sticky and is not. */
.dealer-site--boxed .navbar.sticky-top {
  position: static;
}

/* Below the sheet's own max-width, inset it from the viewport edges. Expressed as max-width rather
   than a margin because the sheet is now `width: 100%`, and a fixed inline margin on top of that
   would push it 2 × --space-3 wider than the page and scroll the whole site sideways. */
@media (max-width: 1439.98px) {
  .dealer-site--boxed {
    max-width: calc(100% - 2 * var(--space-3));
  }
}

/* Count pill on a brand tile. The rest of .dealer-home-brand-* already existed, written for a
   showroom home that was cut before it shipped; the browse-by-make block is what they were for. */
.dealer-home-brand-item__count {
  font-size: var(--text-xs);
  color: var(--app-text-muted);
}

/* ---- Browse by body type ---- */
.dealer-body-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.dealer-body-tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-4);
  text-decoration: none;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-xs);
  transition: border-color var(--dur-card) var(--ease-standard), box-shadow var(--dur-card) var(--ease-standard), transform var(--dur-card) var(--ease-standard);
}

.dealer-body-tile:hover {
  border-color: var(--app-border-strong);
  box-shadow: var(--app-shadow-sm);
  transform: translateY(-2px);
}

.dealer-body-tile__label {
  font-size: var(--text-lg);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-snug);
  color: var(--app-text);
}

.dealer-body-tile__count {
  font-size: var(--text-sm);
  color: var(--app-text-muted);
}

/* ---- Location & hours ---- */
.dealer-location {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

/* A location block dropped into a Columns cell has no room for a side-by-side map. */
.dealer-location--stacked {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 767.98px) {
  .dealer-location {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dealer-location__address,
.dealer-location__phone {
  display: flex;
  gap: var(--space-2);
  color: var(--app-text-secondary);
  margin-bottom: var(--space-3);
}

.dealer-location__address i,
.dealer-location__phone i {
  color: var(--app-text-muted);
  margin-top: 0.2rem;
}

.dealer-location__hours {
  width: 100%;
  max-width: 22rem;
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  border-collapse: collapse;
}

.dealer-location__hours caption {
  caption-side: top;
  padding: 0 0 var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--app-text-muted);
  text-align: left;
}

.dealer-location__hours th,
.dealer-location__hours td {
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--app-divider);
  font-weight: var(--fw-normal);
  text-align: left;
}

.dealer-location__hours th {
  color: var(--app-text-secondary);
}

.dealer-location__hours td {
  text-align: right;
  color: var(--app-text);
}

/* ---- Finance calculator ---- */
.dealer-finance {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
}

.dealer-finance__intro {
  grid-column: 1 / -1;
}

.dealer-finance__lede {
  margin-bottom: 0;
  color: var(--app-text-muted);
}

.dealer-finance__result {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-4);
  background: var(--app-surface-muted);
  border-radius: var(--app-radius-md);
  text-align: center;
}

.dealer-finance__result-label {
  font-size: var(--text-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
  color: var(--app-text-muted);
}

.dealer-finance__result-value {
  font-size: var(--text-3xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--app-text);
}

.dealer-finance__result-note {
  font-size: var(--text-sm);
  color: var(--app-text-muted);
}

.dealer-finance__disclaimer {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--app-text-muted);
}

@media (max-width: 767.98px) {
  .dealer-finance {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Stock search ---- */
.dealer-search {
  padding: var(--space-6);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
}

.dealer-search__heading {
  margin-bottom: var(--space-4);
}

/* auto-fit rather than a fixed column count: the block renders with anywhere between two and five
   fields depending on what the dealer switched on and what they have in stock. */
.dealer-search__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-3);
  align-items: end;
}

.dealer-search__field--wide {
  grid-column: span 2;
}

.dealer-search__submit {
  display: flex;
  align-items: flex-end;
}

@media (max-width: 575.98px) {
  .dealer-search {
    padding: var(--space-4);
  }

  .dealer-search__fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .dealer-search__field--wide {
    grid-column: auto;
  }
}

/* ---- Contact form block ---- */
.dealer-form {
  padding: var(--space-6);
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-sm);
  max-width: 46rem;
  margin-inline: auto;
}

.dealer-form__intro {
  margin-bottom: var(--space-4);
}

.dealer-form__lede {
  margin-bottom: 0;
  color: var(--app-text-muted);
  line-height: var(--lh-relaxed);
}

/* -------------------------------------------------------------------------- */
/* Platform page                                                              */
/*                                                                            */
/* The dealer pitch at /for-dealers. Built from the "About the Platform"      */
/* template in the public Claude Design project; every colour, radius and     */
/* shadow the mock spelled as a hex is mapped onto the tokens above rather    */
/* than shipped raw, so a change to the palette carries this page with it.    */
/*                                                                            */
/* Class names keep the `demo-` prefix the page was born with: they are       */
/* internal, the page moved URL in v2.161.0 and the markup did not.           */
/*                                                                            */
/* Three literals had no existing token and are declared once, here, rather   */
/* than added to the global set for a page nothing else shares: the two dark  */
/* gradient stops, and the red traffic-light dot of the fake browser chrome.  */
/* -------------------------------------------------------------------------- */
.demo-page {
  --demo-dark-mid: #1e3a5f;
  --demo-dark-end: #0c4a6e;
  --demo-dark: linear-gradient(160deg, var(--app-text), var(--demo-dark-mid) 55%, var(--demo-dark-end));
  --demo-chrome-red: #fb7185;
  --demo-chrome-amber: var(--app-warning);
  --demo-chrome-green: var(--btn-success-bg);
  --demo-on-dark-muted: rgba(248, 250, 252, 0.65);
  --demo-section-y: clamp(3.5rem, 7vw, 5.5rem);
  --demo-gap: clamp(2rem, 4vw, 4rem);
}

.demo-page__container {
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

.demo-page__section {
  padding-top: var(--demo-section-y);
}

.demo-eyebrow {
  display: inline-block;
  margin-bottom: var(--space-3);
  color: var(--app-accent);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide);
  text-transform: uppercase;
}

.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
  padding: 0.375rem 0.875rem;
  border-radius: var(--app-radius-pill);
  background: var(--btn-subtle-bg);
  color: var(--btn-subtle-text);
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
}

/* Split hero: the pitch on the left, a screenshot in browser chrome on the right. The screenshot
   is the second column rather than a band beneath the copy so that the headline and the product
   are on screen together — the whole argument of the page is that the two belong to each other. */
.demo-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--demo-gap);
  align-items: center;
  padding-top: clamp(3rem, 6vw, 5rem);
}

.demo-hero__copy {
  max-width: 34rem;
}

.demo-hero__title {
  margin-bottom: var(--space-4);
  font-size: clamp(2rem, 3.8vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.08;
  letter-spacing: var(--ls-tight);
  text-wrap: balance;
}

.demo-lede {
  margin-bottom: var(--space-6);
  color: var(--app-text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

.demo-hero__note {
  margin-top: var(--space-5);
  margin-bottom: 0;
  color: var(--app-text-muted);
  font-size: 0.875rem;
}

.demo-hero__note i {
  margin-right: 0.4rem;
  color: var(--app-success);
}

.demo-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Centred only where the section itself is — the hero is left-aligned now. */
.demo-close .demo-cta-row {
  justify-content: center;
}

/* Anchor strip. The mock describes a sticky section rail but ships none; the real navbar is
   already up there, so these span the foot of the hero instead of competing with it. */
.demo-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  margin-top: var(--space-8);
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  grid-column: 1 / -1;
}

.demo-jump a {
  color: var(--app-text-secondary);
  text-decoration: none;
}

.demo-jump a:hover {
  color: var(--app-accent);
}

/* Screenshot frames -------------------------------------------------------- */
/* Borderless: the shadow alone lifts the frame off the page, and an outline around a screenshot
   that already has its own chrome reads as a second window edge. */
.demo-frame {
  overflow: hidden;
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-md);
}

.demo-frame--hero {
  box-shadow: var(--app-shadow-lg);
}

.demo-chrome {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.5rem 0.75rem;
  background: var(--app-surface-muted);
}

.demo-chrome--lg {
  padding: 0.625rem 0.875rem;
}

.demo-chrome__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.demo-chrome--lg .demo-chrome__dot {
  width: 10px;
  height: 10px;
}

.demo-chrome__dot--red {
  background: var(--demo-chrome-red);
}

.demo-chrome__dot--amber {
  background: var(--demo-chrome-amber);
}

.demo-chrome__dot--green {
  background: var(--demo-chrome-green);
}

.demo-chrome__url {
  flex: 1;
  margin-left: var(--space-3);
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-pill);
  background: var(--app-surface);
  color: var(--app-text-muted);
  font-size: 0.75rem;
  text-align: left;
}

.demo-shot {
  position: relative;
  background: var(--app-surface-muted);
  aspect-ratio: 5 / 4;
}

.demo-shot--wide {
  aspect-ratio: 16 / 9;
}

/* Anchored to the top, not the centre. These are full-page captures: a web page starts at its
   masthead and gets less interesting downward, so cropping from the bottom keeps the part worth
   showing and centring would behead it. */
.demo-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Shown until a screenshot is dropped into public/demo/. Deliberately looks unfinished rather
   than empty, so a missing file reads as a missing file. */
.demo-shot__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--app-text-muted);
  font-size: 0.8125rem;
  text-align: center;
}

.demo-shot__placeholder i {
  font-size: 1.5rem;
  opacity: 0.5;
}

/* Logo strip --------------------------------------------------------------- */
.demo-logos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  justify-content: center;
  opacity: 0.65;
}

.demo-logos img {
  width: auto;
  height: 30px;
  object-fit: contain;
}

.demo-microcaption {
  margin-bottom: var(--space-5);
  color: var(--app-text-muted);
  font-size: 0.6875rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps-wide);
  text-align: center;
  text-transform: uppercase;
}

/* Section headers ---------------------------------------------------------- */
.demo-section-head {
  max-width: 38rem;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  text-align: center;
}

.demo-section-head h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.demo-section-head p {
  margin-bottom: 0;
  color: var(--app-text-secondary);
  font-size: 1.0625rem;
  line-height: var(--lh-body);
}

/* Onboarding steps --------------------------------------------------------- */
.demo-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.demo-step {
  padding: var(--space-5);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-xs);
}

.demo-step__num {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--btn-subtle-bg);
  color: var(--btn-subtle-text);
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
}

.demo-step h3 {
  margin-bottom: var(--space-2);
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}

.demo-step p {
  margin-bottom: 0;
  color: var(--app-text-secondary);
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

/* Video -------------------------------------------------------------------- */
.demo-video {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-text);
  box-shadow: var(--app-shadow-lg);
  aspect-ratio: 16 / 9;
}

.demo-video iframe,
.demo-video video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* contain, not cover: the tour is a screen recording, and cropping a recording of a user interface
   cuts off the very thing it is demonstrating. Letterboxing against the dark frame is the cheaper
   compromise, and is invisible while the source stays 16:9. */
.demo-video video {
  object-fit: contain;
  background: var(--app-text);
}

.demo-video__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  background: var(--demo-dark);
  color: var(--app-text-inverse);
  text-align: center;
}

.demo-video__play {
  display: flex;
  width: 76px;
  height: 76px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: var(--app-text-inverse);
  font-size: 1.5rem;
}

.demo-video__caption {
  margin-bottom: 0;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
}

.demo-video__hint {
  margin-bottom: 0;
  color: var(--demo-on-dark-muted);
  font-size: 0.8125rem;
}

/* Feature rows ------------------------------------------------------------- */
/* Each row is a card with the screenshot bled to its edge, so the picture is inside the thing it
   illustrates rather than floating beside it. That is also why these carry no browser chrome any
   more: the card edge already reads as a window, and a second one inside it reads as a mistake. */
.demo-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  align-items: center;
  overflow: hidden;
  margin-bottom: var(--space-5);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  background: var(--app-surface);
  box-shadow: var(--app-shadow-sm);
}

.demo-feature--flipped {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.demo-feature:last-child {
  margin-bottom: 0;
}

.demo-feature__copy {
  padding: clamp(1.25rem, 3vw, 2rem);
}

.demo-feature__shot {
  align-self: stretch;
  border-left: 1px solid var(--app-border);
}

.demo-feature--flipped .demo-feature__shot {
  border-right: 1px solid var(--app-border);
  border-left: 0;
}

/* The slot's own 5:4 has to go inside a card: the card's height is set by whichever column is
   taller, and a fixed ratio would either crop the copy or leave a band of dead surface. */
.demo-feature__shot .demo-shot {
  height: 100%;
  min-height: 16rem;
  aspect-ratio: auto;
}

.demo-feature__shot .demo-shot img {
  object-position: top left;
}

.demo-feature h3 {
  margin-bottom: var(--space-3);
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
}

.demo-feature p {
  margin-bottom: var(--space-4);
  color: var(--app-text-secondary);
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.demo-checks {
  display: grid;
  gap: 0.625rem;
  margin: 0;
  padding: 0;
  color: var(--app-text-secondary);
  font-size: 0.9375rem;
  list-style: none;
}

.demo-checks li {
  display: flex;
  gap: 0.625rem;
  align-items: flex-start;
}

.demo-checks i {
  margin-top: var(--space-1);
  color: var(--app-success);
}

.demo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo-tag {
  padding: 0.25rem 0.625rem;
  border-radius: var(--app-radius-pill);
  background: var(--btn-subtle-bg);
  color: var(--btn-subtle-text);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
}

/* What you get ------------------------------------------------------------- */
/* Hairline rules rather than cards: this is a list of things you get, and six boxes would give a
   plain enumeration more weight than the four feature rows above it. */
.demo-perks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 0 clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--app-border);
}

.demo-perk {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--app-border);
}

.demo-perk > i {
  margin-top: 0.3rem;
  color: var(--app-success);
  font-size: 0.8125rem;
}

.demo-perk h3 {
  margin-bottom: var(--space-1);
  font-size: 1rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-snug);
}

.demo-perk p {
  margin-bottom: 0;
  color: var(--app-text-secondary);
  font-size: 0.9375rem;
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

/* Dealer FAQ --------------------------------------------------------------- */
/* Plain cards, not an accordion: five short answers are quicker to skim open than to click open,
   and the real accordion lives on /faq where the answers are long enough to earn it. */
.demo-faq {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--space-4);
}

.demo-faq__item {
  padding: var(--space-5);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  background: var(--app-surface);
}

.demo-faq__item h3 {
  margin-bottom: var(--space-2);
  font-size: 0.9375rem;
  font-weight: var(--fw-bold);
}

.demo-faq__item p {
  margin-bottom: 0;
  color: var(--app-text-secondary);
  font-size: 0.875rem;
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

/* Mobile band -------------------------------------------------------------- */
.demo-mobile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--demo-gap);
  align-items: center;
  overflow: hidden;
  padding: clamp(2.5rem, 5vw, 3.5rem);
  border-radius: var(--app-radius-lg);
  background: var(--demo-dark);
  color: var(--app-text-inverse);
}

.demo-mobile .demo-eyebrow {
  color: var(--demo-on-dark-muted);
}

.demo-mobile h3 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-tight);
}

.demo-mobile p {
  margin-bottom: var(--space-6);
  color: var(--demo-on-dark-muted);
  font-size: 1rem;
  line-height: var(--lh-relaxed);
  text-wrap: pretty;
}

.demo-mobile__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.demo-mobile__pill {
  padding: 0.375rem 0.75rem;
  border-radius: var(--app-radius-pill);
  background: rgba(255, 255, 255, 0.12);
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
}

.demo-phones {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
  justify-content: center;
}

.demo-phone {
  position: relative;
  width: 180px;
  overflow: hidden;
  border: 6px solid rgba(15, 23, 42, 0.85);
  border-radius: 28px;
  background: var(--app-text);
  box-shadow: var(--app-shadow-lg);
  aspect-ratio: 9 / 19;
}

.demo-phone--raised {
  margin-bottom: var(--space-8);
}

/* The shot slot carries a desktop ratio of its own; inside a handset it has to give that up and
   take the frame's, or a portrait screenshot sits in the top third with dead glass beneath it. */
.demo-phone .demo-shot {
  height: 100%;
  aspect-ratio: auto;
}

.demo-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Closing CTA -------------------------------------------------------------- */
.demo-close {
  max-width: 40rem;
  margin-inline: auto;
  padding-bottom: var(--demo-section-y);
  text-align: center;
}

.demo-close h2 {
  margin-bottom: var(--space-3);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}

.demo-close__note {
  margin-top: var(--space-5);
  margin-bottom: 0;
  color: var(--app-text-muted);
  font-size: 0.875rem;
}

@media (max-width: 767.98px) {
  .demo-hero,
  .demo-feature,
  .demo-feature--flipped,
  .demo-mobile {
    grid-template-columns: 1fr;
  }

  .demo-hero__copy {
    max-width: none;
  }

  /* Alternating rows put the screenshot first in source order, which is what makes them alternate
     on two columns. On one column that would lead with a picture of something not yet described,
     so here — and only here — the copy is pulled back above it. */
  .demo-feature--flipped .demo-feature__copy {
    order: -1;
  }

  /* Stacked, the divider between copy and screenshot is horizontal — and always above the shot,
     since the rule above puts the copy first in both directions. */
  .demo-feature__shot,
  .demo-feature--flipped .demo-feature__shot {
    border-top: 1px solid var(--app-border);
    border-right: 0;
    border-left: 0;
  }

  .demo-phone {
    width: 140px;
  }

  .demo-phone--raised {
    margin-bottom: var(--space-4);
  }
}

/* ===== FAQ answers ==========================================================
   Answers used to be plain text rendered with nl2br. They are Editor.js
   documents now, so an answer can carry headings and lists — and inside an
   accordion body an unstyled <h2> arrives at Bootstrap's full 2rem, which reads
   as a broken page rather than as a subheading. Scaled to sit under the
   question, not compete with it. */
.faq-answer > :first-child {
  margin-top: 0;
}

.faq-answer > :last-child {
  margin-bottom: 0;
}

.faq-answer p {
  margin: 0 0 0.9rem;
}

.faq-answer h2,
.faq-answer h3,
.faq-answer h4 {
  margin: 1.4rem 0 0.6rem;
  font-weight: 700;
  color: var(--app-text);
}

.faq-answer h2 {
  font-size: 1.15rem;
}

.faq-answer h3 {
  font-size: 1.05rem;
}

.faq-answer h4 {
  font-size: 1rem;
}

.faq-answer ul,
.faq-answer ol {
  margin: 0 0 0.9rem;
  padding-left: 1.4rem;
}

.faq-answer li {
  margin-bottom: 0.35rem;
}

.faq-answer blockquote {
  margin: 0 0 0.9rem;
  padding-left: 1rem;
  border-left: 3px solid var(--app-border, #dee2e6);
  color: var(--app-text-secondary);
}

.faq-answer hr {
  margin: 1.2rem 0;
}

/* -------------------------------------------------------------------------- */
/* Dealer directory (/dealers)                                                  */
/* -------------------------------------------------------------------------- */
/* Design system project cddf0a70, templates/dealer-directory. Filtering happens
   in dealer_directory_controller.js; everything here is presentation. */
.dealer-dir__head {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
  padding: 1.125rem 0;
}

.dealer-dir__title {
  margin: 0 0 0.75rem;
  font-size: 1.5rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
}

/* Lead line under the H1 on a location page. */
.dealer-dir__lead {
  margin: 0;
  max-width: 60ch;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
}

.dealer-dir__inventory {
  border-top: 1px solid var(--app-border);
  padding: var(--app-section-y) 0;
}

.dealer-dir__section-title {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

.dealer-dir__searchrow {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.dealer-dir__searchrow[hidden] {
  display: none;
}

.dealer-dir__field {
  position: relative;
  flex: 1 1 320px;
  min-width: 0;
  max-width: 460px;
}

.dealer-dir__field i {
  position: absolute;
  left: 0.875rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--app-text-muted);
  font-size: 0.875rem;
}

.dealer-dir__field input {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--app-text);
  background: var(--app-surface);
  border: 1px solid var(--app-border-strong);
  border-radius: var(--app-radius-sm);
  padding: 0.5rem 0.75rem 0.5rem 2.35rem;
  outline: none;
  transition:
    border-color var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}

.dealer-dir__field input:focus,
.dealer-dir__select:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: var(--app-focus-ring);
}

.dealer-dir__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.dealer-dir__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.8rem;
  border-radius: var(--app-radius-pill);
  border: 1px solid var(--btn-outline-border);
  background: var(--app-surface);
  color: var(--app-text-secondary);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-standard);
}

.dealer-dir__chip:hover {
  background: var(--btn-outline-bg-hover);
  color: var(--app-text);
}

.dealer-dir__chip[aria-pressed='true'] {
  background: var(--btn-subtle-bg);
  border-color: transparent;
  color: var(--btn-subtle-text);
}

.dealer-dir__chip--reset {
  margin-left: auto;
  border-style: dashed;
}

.dealer-dir__select {
  flex: 0 0 200px;
  width: 200px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: var(--fw-semibold);
  color: var(--app-text);
  padding: 0.4rem 2rem 0.4rem 0.8rem;
  border-radius: var(--app-radius-pill);
  border: 1px solid var(--btn-outline-border);
  background-color: var(--app-surface);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 14px;
  appearance: none;
  outline: none;
}

/* The radius control carries a pin, because its closed state ("Within this city") is the one
   control in the row whose purpose is not obvious from its own text. The chips beside it all have
   an icon; a bare select reads as part of the city dropdown next to it. */
.dealer-dir__select--radius {
  padding-left: 2rem;
  background-image:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 11L3 6h10z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3E%3Cpath d='M8 1a5 5 0 0 0-5 5c0 3.6 4.35 8.6 4.54 8.81a.62.62 0 0 0 .92 0C8.65 14.6 13 9.6 13 6a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E");
  background-position: right 0.7rem center, left 0.75rem center;
  background-size: 14px, 12px;
}

.dealer-dir__select:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.dealer-dir__az {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--app-divider);
}

.dealer-dir__az button {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: var(--app-radius-sm);
  font: inherit;
  font-size: 0.75rem;
  font-weight: var(--fw-semibold);
  color: var(--app-text-muted);
  cursor: pointer;
}

.dealer-dir__az button.dealer-dir__az-all {
  width: auto;
  padding: 0 0.5rem;
}

.dealer-dir__az button:hover:not(:disabled) {
  background: var(--btn-secondary-bg);
  color: var(--app-text);
}

.dealer-dir__az button:disabled {
  opacity: 0.3;
  cursor: default;
}

.dealer-dir__az button[aria-pressed='true'] {
  background: var(--app-text);
  color: var(--app-text-inverse);
}

.dealer-dir__body {
  padding-top: 1.5rem;
  padding-bottom: 3rem;
}

.dealer-dir__count {
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  margin: 0 0 0.75rem;
}

/* The "…are not on the map yet" tail of a radius result. Quieter than the count itself: it is a
   caveat about our data, not part of the answer. */
.dealer-dir__count-note {
  opacity: 0.75;
  font-style: italic;
}

.dealer-dir__list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.dealer-dir__card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 1rem;
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-lg);
  box-shadow: var(--app-shadow-md);
  padding: 1rem 1.125rem;
  transition:
    box-shadow var(--dur-card) var(--ease-standard),
    border-color var(--dur-card) var(--ease-standard);
}

.dealer-dir__card:hover {
  box-shadow: var(--app-shadow-lg);
  border-color: var(--app-border-strong);
}

.dealer-dir__logo {
  width: 64px;
  height: 64px;
  border-radius: var(--app-radius-sm);
  background: var(--app-surface-muted);
  border: 1px solid var(--app-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
  font-size: 1.125rem;
  letter-spacing: var(--ls-tight);
  color: var(--app-text-secondary);
  text-decoration: none;
  overflow: hidden;
}

.dealer-dir__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 6px;
}

.dealer-dir__name {
  margin: 0 0 0.3rem;
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.dealer-dir__name a {
  color: var(--app-text);
  text-decoration: none;
}

.dealer-dir__name a:hover {
  color: var(--app-accent);
}

.dealer-dir__verified {
  color: var(--app-accent);
  font-size: 0.8125rem;
}

.dealer-dir__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.875rem;
  font-size: 0.8125rem;
  color: var(--app-text-muted);
  align-items: center;
}

.dealer-dir__meta i {
  margin-right: 0.3rem;
}

.dealer-dir__status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: var(--fw-semibold);
}

.dealer-dir__status.is-open {
  color: var(--app-success);
}

.dealer-dir__status.is-closed {
  color: var(--app-text-muted);
}

.dealer-dir__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
  margin-right: 0;
}

.dealer-dir__note {
  margin: 1rem 0 0;
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.dealer-dir__empty {
  background: var(--app-surface);
  border: 1px dashed var(--app-border-strong);
  border-radius: var(--app-radius-lg);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--app-text-muted);
}

.dealer-dir__empty-reset {
  display: block;
  margin: 1rem auto 0;
}

/* ---- Split list/map ---- */
.dealer-dir__body--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.dealer-dir__mapwrap {
  position: sticky;
  /* Clears the sticky header, which is why it reads the same variable the header's height does. */
  top: calc(var(--site-nav-h) + 0.75rem);
  border-radius: var(--app-radius-lg);
  overflow: hidden;
  border: 1px solid var(--app-border);
  box-shadow: var(--app-shadow-md);
  background: var(--app-surface);
}

.dealer-dir__map {
  height: calc(100vh - var(--site-nav-h) - 6rem);
  min-height: 520px;
  width: 100%;
}

.dealer-dir__card.is-active {
  box-shadow: var(--app-shadow-lg);
  border-color: var(--app-accent);
}

/* Leaflet renders this inside a div icon, so it cannot inherit the page's font stack. */
.leaflet-container {
  font-family: inherit;
}

.dealer-dir__pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--btn-primary-bg);
  border: 2px solid #fff;
  box-shadow: var(--app-shadow-sm);
  color: #fff;
  font-size: 0.7rem;
  font-weight: var(--fw-bold);
}

.dealer-dir__pin span {
  transform: rotate(45deg);
}

.dealer-dir__pin.is-active {
  background: var(--app-text);
}

.dealer-dir__popup {
  min-width: 170px;
}

.dealer-dir__popup a {
  display: block;
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  margin-bottom: 0.15rem;
}

.dealer-dir__popup span {
  font-size: 0.75rem;
  color: var(--app-text-muted);
}

.dealer-dir__viewbar {
  display: none;
}

.dealer-dir__cities {
  background: var(--app-surface);
  border-top: 1px solid var(--app-border);
  padding: 2.5rem 0;
}

.dealer-dir__cities h2 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  letter-spacing: -0.015em;
}

.dealer-dir__cities p {
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  color: var(--app-text-secondary);
}

.dealer-dir__citygrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem 1.5rem;
}

.dealer-dir__citygrid a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0;
  font-size: 0.875rem;
  border-bottom: 1px solid var(--app-divider);
  color: var(--app-text-secondary);
  text-decoration: none;
}

.dealer-dir__citygrid a:hover {
  color: var(--app-accent);
}

.dealer-dir__citygrid span {
  color: var(--app-text-muted);
  font-size: 0.8125rem;
}

/* Below the split's breakpoint the map goes full width above the list rather than
   squeezing both into half a tablet. */
@media (max-width: 991.98px) {
  .dealer-dir__body--split {
    grid-template-columns: 1fr;
  }

  .dealer-dir__mapwrap {
    position: static;
    order: -1;
    margin-bottom: 1rem;
  }

  .dealer-dir__map {
    height: 320px;
    min-height: 0;
  }
}

@media (max-width: 767.98px) {
  /* One row of controls that scrolls sideways, rather than three that stack and
     push the first dealership below the fold. */
  .dealer-dir__chips,
  .dealer-dir__az {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .dealer-dir__chips::-webkit-scrollbar,
  .dealer-dir__az::-webkit-scrollbar {
    display: none;
  }

  .dealer-dir__chip,
  .dealer-dir__select,
  .dealer-dir__az button {
    flex: 0 0 auto;
  }

  .dealer-dir__select {
    width: auto;
    max-width: 58vw;
  }

  .dealer-dir__chip--reset {
    margin-left: 0;
  }

  .dealer-dir__field {
    flex: 1 1 100%;
    max-width: none;
  }

  .dealer-dir__card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.875rem;
    padding: 0.875rem;
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-xs);
  }

  .dealer-dir__logo {
    width: 48px;
    height: 48px;
  }

  .dealer-dir__name {
    font-size: 1rem;
  }

  .dealer-dir__citygrid {
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
  }

  /* One at a time on a phone: a 320px map above a list is two half-useful things. */
  .dealer-dir__viewbar {
    display: block;
    position: sticky;
    top: var(--site-nav-h);
    z-index: 400;
    background: var(--app-bg);
    border-bottom: 1px solid var(--app-border);
    padding: 0.625rem 0;
  }

  .dealer-dir__viewtoggle {
    display: flex;
    gap: 0.25rem;
  }

  .dealer-dir__viewtoggle button {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid var(--btn-outline-border);
    background: var(--app-surface);
    border-radius: var(--app-radius-pill);
    font: inherit;
    font-size: 0.8125rem;
    font-weight: var(--fw-semibold);
    color: var(--app-text-secondary);
    cursor: pointer;
  }

  .dealer-dir__viewtoggle button[aria-pressed='true'] {
    background: var(--app-text);
    border-color: var(--app-text);
    color: var(--app-text-inverse);
  }

  .dealer-dir__body--split[data-view='list'] .dealer-dir__mapwrap,
  .dealer-dir__body--split[data-view='map'] .dealer-dir__listcol {
    display: none;
  }

  .dealer-dir__body--split[data-view='map'] .dealer-dir__mapwrap {
    margin-bottom: 0;
  }

  .dealer-dir__map {
    height: calc(100vh - var(--site-nav-h) - 8rem);
    min-height: 340px;
  }
}

@media (max-width: 419.98px) {
  .dealer-dir__citygrid {
    grid-template-columns: 1fr;
  }
}