/* Marques sections redesign (v2) — Liqui Pneus palette: orange #F15A22, charcoal #3A3A3A,
   black lines #111, white. Theme layer over existing classes (vehicle-* and library-/brand-*).
   Non-destructive: targets existing classes only, preserves search/filter JS. */

:root {
  --lp-orange: #F15A22;
  --lp-orange-ink: #993C1D;
  --lp-orange-soft: #FEF1E9;
  --lp-charcoal: #3A3A3A;
  --lp-ink: #1c1c1c;
  --lp-line: #111111;
}

/* ---- Hero (both systems) ---- */
.vehicle-hero, .library-hero {
  background: #fff !important;
  border-bottom: 1px solid var(--lp-line) !important;
}
.vehicle-hero h1, .library-hero h1 {
  color: var(--lp-ink) !important;
  display: inline-block;
  border-bottom: 3px solid var(--lp-orange);
  padding-bottom: 5px;
}
.section-kicker {
  color: var(--lp-orange) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}
.vehicle-hero__stats > *, .library-hero__stats > * {
  border: 1px solid var(--lp-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
.vehicle-hero__stats strong, .library-hero__stats strong,
.vehicle-hero__stats b, .library-hero__stats b {
  color: var(--lp-orange) !important;
}

/* ---- Search ---- */
.vehicle-search, .library-tools__search {
  border: 1.5px solid var(--lp-line) !important;
  border-radius: 10px !important;
  background: #fff !important;
}
.vehicle-search input, .library-tools__search input { background: transparent !important; }

/* ---- Filter pills (chips, quick filters, A-Z) ---- */
.vehicle-filters button, .vehicle-quick-filters button, .vehicle-alphabet button,
.az-filter__button {
  border-radius: 20px !important;
  border: 1px solid var(--lp-line) !important;
  background: #fff !important;
  color: var(--lp-ink) !important;
  font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.vehicle-filters button:hover, .vehicle-quick-filters button:hover,
.vehicle-alphabet button:hover, .az-filter__button:hover {
  background: var(--lp-orange-soft) !important;
  border-color: var(--lp-orange) !important;
}
.vehicle-alphabet button.is-active, .vehicle-quick-filters button.is-active,
.vehicle-filters button.is-active, .az-filter__button.is-active,
.az-filter__button[aria-pressed="true"] {
  background: var(--lp-orange) !important;
  color: #fff !important;
  border-color: var(--lp-orange) !important;
}

/* ---- Brand cards (both systems) ---- */
.vehicle-card, .brand-card {
  background: #fff !important;
  border: 1px solid var(--lp-line) !important;
  border-radius: 12px !important;
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.vehicle-card::before, .brand-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--lp-orange);
}
.vehicle-card:hover, .brand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(17,17,17,.10) !important;
}
.brand-card__logo {
  background: var(--lp-charcoal) !important;
  color: #fff !important;
  border-radius: 9px !important;
}
.vehicle-card__badges span, .brand-card__badges span {
  background: var(--lp-orange-soft) !important;
  color: var(--lp-orange-ink) !important;
  border-radius: 6px !important;
  border: none !important;
}

/* ---- CTAs ---- */
.vehicle-button--primary {
  background: var(--lp-orange) !important;
  color: #fff !important;
  border: 1px solid var(--lp-orange) !important;
}
.vehicle-button--primary:hover { filter: brightness(.95); }
.vehicle-button--secondary {
  background: #fff !important;
  color: var(--lp-ink) !important;
  border: 1px solid var(--lp-line) !important;
}
.brand-card__actions .button--outline,
.brand-card__actions .button {
  border: 1px solid var(--lp-line) !important;
  color: var(--lp-ink) !important;
  border-radius: 8px !important;
}
.brand-card__actions .button:first-child {
  background: var(--lp-orange) !important;
  color: #fff !important;
  border-color: var(--lp-orange) !important;
}
.vehicle-card__link { color: var(--lp-orange) !important; font-weight: 500; }

/* ---- Section result count + headings accent ---- */
.vehicle-result-count, .brand-results__header h2 {
  border-left: 3px solid var(--lp-orange);
  padding-left: 8px;
}