/* ═══════════════════════════════════════════════════════════════════════════
   RV Dealer Theme — Design System
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 0. Self-hosted Inter (latin-ext covers Polish; latin covers base ASCII) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                 U+FEFF, U+FFFD;
}

/* ── 1. Custom Properties ─────────────────────────────────────────────── */
:root {
  --clr-primary:       #bc182a;
  --clr-primary-dark:  #9a1322;
  --clr-primary-light: #f5d5d8;
  --clr-dark:          #111111;
  --clr-dark-soft:     #1f1f1f;
  --clr-body:          #333333;
  --clr-muted:         #767676;
  --clr-border:        #e0e0e0;
  --clr-bg:            #f5f5f5;
  --clr-white:         #ffffff;
  --clr-success:       #16a34a;
  --clr-warning:       #d97706;
  --clr-sold:          #767676;

  --font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', 'Segoe UI', system-ui, sans-serif;

  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-full: 2px;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 20px rgba(0,0,0,.1);
  --shadow-lg:  0 12px 48px rgba(0,0,0,.16);
  --shadow-card: 0 1px 4px rgba(0,0,0,.06);

  --transition: 160ms ease;

  --container-max: 1280px;
  --container-pad: clamp(1rem, 4vw, 2rem);

  --header-h: 64px;
}

/* ── 2. Reset & Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  color: var(--clr-body);
  background: var(--clr-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--clr-primary); }

ul, ol { list-style: none; }

button { cursor: pointer; font-family: inherit; border: none; background: none; }

input, select, textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--clr-body);
}

/* ── 3. Layout Utilities ──────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.site-wrapper { display: flex; flex-direction: column; min-height: 100vh; position: relative; }
.site-content { flex: 1; }

/* ── 4. Typography ────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--clr-dark);
  line-height: 1.25;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.375rem, 3vw, 2rem); }
h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); }
h4 { font-size: 1.125rem; }

/* ── 5. Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .625rem 1.375rem;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 0;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
  line-height: 1.25;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.btn:active { opacity: .9; }

.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}
.btn-primary:hover {
  background: var(--clr-dark);
  border-color: var(--clr-dark);
  color: var(--clr-white);
}

.btn-outline {
  background: transparent;
  color: var(--clr-dark);
  border-color: var(--clr-dark);
}
.btn-outline:hover {
  background: var(--clr-dark);
  color: var(--clr-white);
}

.btn-dark {
  background: var(--clr-dark);
  color: var(--clr-white);
  border-color: var(--clr-dark);
}
.btn-dark:hover {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
}

.btn-full  { width: 100%; justify-content: center; }
.btn-lg    { padding: .875rem 2rem; font-size: .9375rem; }
.btn-sm    { padding: .3125rem .875rem; font-size: .8125rem; }

/* ── 6. Icons ─────────────────────────────────────────────────────────── */
.icon-xs { width: 14px; height: 14px; flex-shrink: 0; }
.icon-sm { width: 18px; height: 18px; flex-shrink: 0; }
.icon-md { width: 24px; height: 24px; flex-shrink: 0; }
.icon-lg { width: 32px; height: 32px; flex-shrink: 0; }
.icon-menu, .icon-close { width: 24px; height: 24px; }

/* ── 7. Header ────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

/* Body offset — compensates for fixed header so content isn't hidden beneath it.
   hdr-transparent (homepage only) uses 0 — the hero fills behind the header. */
body {
  padding-top: calc( var(--header-h) + var(--topbar-h, 0px) );
}
body.hdr-transparent {
  padding-top: 0;
}

/* Top bar */
.header-topbar {
  background: var(--clr-dark);
  color: rgba(255,255,255,.75);
  font-size: .8125rem;
  padding: .35rem 0;
  transition: background-color .3s ease;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.topbar-tagline { font-weight: 500; }
.topbar-contact { display: flex; gap: 1.25rem; }
.topbar-link {
  display: flex;
  align-items: center;
  gap: .35rem;
  color: rgba(255,255,255,.8);
  transition: color var(--transition);
}
.topbar-link:hover { color: var(--clr-white); }

/* Main header bar */
.header-main {
  display: flex;
  align-items: center;
  padding: var(--header-pt, .625rem) 0;
  min-height: var(--header-h, 72px);
  background: var(--hdr-bg, var(--clr-white));
  transition: background-color .3s ease;
}
.header-main > .container { flex: 1; }

/* Height modifiers — control --header-h only; logo size is independent (--logo-h var) */
.header-inner {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  align-items: center;
  gap: 1rem;
}
/* Actions column type modifiers */
.site-header--actions-none .header-inner { grid-template-columns: 1fr 3fr; }
.site-header--actions-none .header-col--actions { display: none; }
/* drawer_menu: show hamburger on desktop too */
.site-header--actions-drawer-menu .nav-toggle { display: flex; }
/* cta_and_drawer: CTA and hamburger become independent grid items */
.site-header--actions-cta-and-drawer .header-inner { grid-template-columns: auto 1fr auto auto; }
.site-header--actions-cta-and-drawer .header-col--actions { display: contents; }
.site-header--actions-cta-and-drawer .nav-toggle { display: flex; }

/* Logo */
.site-logo, .footer-logo { flex-shrink: 0; }
.logo-text {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--hdr-text, var(--clr-dark));
  letter-spacing: -.03em;
}
.logo-img { height: var(--logo-h, 44px); width: auto; display: block; }
.site-logo img { height: var(--logo-h, 44px); width: auto; }
/* Transparent logo swap */
.logo-img--transparent { display: none; }
.site-header--transparent:not(.is-scrolled) .logo-img--default { display: none; }
.site-header--transparent:not(.is-scrolled) .logo-img--transparent { display: block; }
.footer-logo img { height: 40px; width: auto; }

/* Header columns — 1fr 3fr 1fr grid */
.header-col {
  display: flex;
  align-items: center;
  min-width: 0;
}
.header-col--left    { justify-content: flex-start; }
.header-col--center  { justify-content: center; }
.header-col--right   { justify-content: flex-end; }

/* Nav */
.header-col--nav { gap: .25rem; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: .25rem;
  flex-wrap: wrap;
}
.nav-menu li a {
  display: block;
  padding: .5rem .875rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--hdr-text, var(--clr-dark));
  letter-spacing: .02em;
  transition: color var(--transition), opacity var(--transition);
}
.nav-menu li a:hover,
.nav-menu li.current-menu-item > a {
  color: var(--hdr-accent, var(--clr-primary));
  opacity: 1;
}

.header-cta {
  --cta-bg: var(--hdr-accent, var(--clr-primary));
  --cta-color: #fff;
}
.header-cta.btn-primary {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-color);
}

/* Dropdown */
.nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--clr-dark);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: var(--shadow-md);
  min-width: 200px;
  padding: .5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: all var(--transition);
  z-index: 200;
}
.nav-menu li:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-menu .sub-menu li a {
  color: rgba(255,255,255,.8);
  padding: .5rem .875rem;
}
.nav-menu .sub-menu li a:hover { color: var(--clr-white); }
.nav-menu li { position: relative; }

.header-cta { flex-shrink: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  color: var(--hdr-toggle, var(--hdr-text, var(--clr-dark)));
  transition: background var(--transition), color var(--transition);
}
.nav-toggle:hover { background: rgba(0,0,0,.06); }

/* ── 8. Breadcrumb ────────────────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  padding: 1rem 0;
  font-size: .875rem;
  color: var(--clr-muted);
}
.breadcrumb a { color: var(--clr-muted); transition: color var(--transition); }
.breadcrumb a:hover { color: var(--clr-primary); }
.breadcrumb span[aria-hidden] { color: var(--clr-border); }

/* ── 9. Vehicle Card ──────────────────────────────────────────────────── */
.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.vehicle-card {
  position: relative;
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.vehicle-card:hover {
  box-shadow: 0 6px 28px rgba(0,0,0,.1);
  border-color: rgba(17,17,17,.35);
}
/* Featured: label bar + left red border + shadow */
.vehicle-card.is-featured {
  border-left: 4px solid var(--clr-primary);
  box-shadow: 0 4px 24px rgba(0,0,0,.10);
}
.vehicle-card__featured-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .375rem;
  background: rgba(17,17,17,.82);
  color: #fff;
  font-size: .6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .35rem 1rem;
  backdrop-filter: blur(2px);
}
.vehicle-card__featured-bar svg { opacity: .75; }

/* Full-card click layer — sits above image, below badges + body interactive */
.vehicle-card__link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Card image */
.vehicle-card__image-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/11;
  background: var(--clr-bg);
}
.vehicle-card__image-link {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}
.vehicle-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
  display: block;
}
.vehicle-card__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-muted);
  opacity: .35;
}

/* Badges */
.vehicle-card__badges {
  position: absolute;
  bottom: .75rem;
  left: .75rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .25rem;
  z-index: 2;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .2rem .5rem;
  font-size: .625rem;
  font-weight: 700;
  border-radius: 0;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.badge--featured  { background: var(--clr-primary); color: var(--clr-white); }
.badge--new       { background: var(--clr-dark);    color: var(--clr-white); }
.badge--promo     { background: var(--clr-primary); color: var(--clr-white); }
.badge--sold      { background: var(--clr-muted);   color: var(--clr-white); }
.badge--reserved  { background: var(--clr-warning); color: var(--clr-white); }

/* Card body */
.vehicle-card__body {
  padding: 1rem 1.25rem .875rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
}

.vehicle-card__manufacturer {
  font-size: .625rem;
  font-weight: 700;
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .3rem;
}

.vehicle-card__title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--clr-dark);
  margin-bottom: .625rem;
  min-height: calc(1rem * 1.3 * 2);
}
/* Link is the full-card overlay; style the title as clickable text but
   pointer-events handled by ::after. Keep color on hover via parent. */
.vehicle-card__link { color: inherit; }
.vehicle-card:hover .vehicle-card__title { color: var(--clr-primary); }

/* Specs strip */
.vehicle-card__specs {
  display: flex;
  flex-wrap: wrap;
  gap: .1875rem .625rem;
  padding: .625rem 0;
  border-top: 1px solid var(--clr-border);
  margin-bottom: .625rem;
}
.vehicle-card__specs li {
  display: flex;
  align-items: center;
  gap: .25rem;
  font-size: .75rem;
  color: var(--clr-muted);
  font-weight: 500;
}
.vehicle-card__specs svg { color: var(--clr-muted); }

.vehicle-card__dmc {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--clr-muted);
  padding-bottom: .5rem;
}
.vehicle-card__dmc-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--clr-border);
  color: var(--clr-body);
  padding: .1em .4em;
  line-height: 1.5;
}

/* Bottom row: price + arrow */
.vehicle-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--clr-border);
}

.vehicle-card__price-wrap { line-height: 1.2; }

.price-original {
  display: block;
  font-size: .75rem;
  color: var(--clr-muted);
  text-decoration: line-through;
}
.price-promo {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-primary);
  letter-spacing: -.02em;
}
.price-regular {
  display: block;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--clr-dark);
  letter-spacing: -.02em;
}
.price-on-request {
  font-size: .875rem;
  color: var(--clr-muted);
  font-style: italic;
}

.vehicle-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--clr-border);
  color: var(--clr-muted);
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
.vehicle-card:hover .vehicle-card__arrow {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: var(--clr-white);
  transform: translateX(3px);
}

/* ── 10. Archive / Listings Page ──────────────────────────────────────── */
.archive-vehicle-page,
.category-page,
.manufacturer-page { padding-bottom: 0; }

.section.section--listings { padding: 2.5rem 0 4rem; background: var(--clr-bg); }

.archive-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2rem;
  align-items: start;
}
.archive-layout--no-sidebar {
  grid-template-columns: 1fr;
  align-items: start;
}

/* Archive header row */
.archive-header {
  display: flex;
  align-items: center;
  gap: .875rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--clr-border);
}
.archive-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-dark);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.archive-count {
  font-size: .75rem;
  color: var(--clr-muted);
  font-weight: 500;
  margin-left: auto;
}
.filters-mobile-toggle { display: none; }

/* Pagination */
.archive-pagination {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* Loading state */
#rvd-results.rvd-loading {
  opacity: .5;
  pointer-events: none;
  transition: opacity .2s;
}

.rvd-no-results {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--clr-muted);
  font-size: 1.0625rem;
}

/* ── 11. Filter Sidebar ───────────────────────────────────────────────── */
.filters-sidebar {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  padding: 0;
  position: sticky;
  top: calc(var(--header-h) + 1.25rem);
  max-height: calc(100vh - var(--header-h) - 2.5rem);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.filters-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 1.25rem 1.25rem .75rem;
  border-bottom: 1px solid var(--clr-border);
}
.filters-title {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--clr-dark);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.filters-header__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.filters-reset {
  font-size: .75rem;
  color: var(--clr-muted);
  font-weight: 500;
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}
.filters-reset:hover { color: var(--clr-primary); background: var(--clr-primary-light); }
.filters-close {
  display: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--clr-body);
  transition: color var(--transition);
}
.filters-close:hover { color: var(--clr-dark); }

/* Filter groups */
.filter-group { margin-bottom: 1rem; }
.filter-label {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--clr-muted);
  margin-bottom: .375rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.filter-input {
  width: 100%;
  padding: .4375rem .75rem;
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  font-size: .9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.filter-input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-light);
}

/* Custom select — shared by filter sidebar + hero search */
.custom-select {
  position: relative;
  width: 100%;
}
.custom-select select {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.custom-select__trigger {
  width: 100%;
  padding: .5rem 2.25rem .5rem .75rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  font-size: .9375rem;
  font-family: inherit;
  color: var(--clr-body);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  transition: border-color var(--transition), box-shadow var(--transition);
  white-space: nowrap;
  overflow: hidden;
}
.custom-select__trigger:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-light);
}
.custom-select.is-open .custom-select__trigger {
  border-color: var(--clr-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.custom-select__value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.custom-select__arrow {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--clr-muted);
  transition: transform var(--transition);
  position: absolute;
  right: .625rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.custom-select.is-open .custom-select__arrow {
  transform: translateY(-50%) rotate(180deg);
}
.custom-select__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  list-style: none;
  margin: 0;
  padding: .25rem 0;
  max-height: 280px;
  overflow-y: auto;
  z-index: 200;
  display: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
.custom-select.is-open .custom-select__dropdown { display: block; }
.custom-select__option {
  padding: .5rem .875rem;
  font-size: .9375rem;
  color: var(--clr-body);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.custom-select__option:hover,
.custom-select__option.is-focused { background: var(--clr-bg); }
.custom-select__option.is-selected {
  color: var(--clr-primary);
  font-weight: 600;
}
.custom-select__option--indented { padding-left: 1.75rem; }
.custom-select__group-label {
  padding: .5rem .875rem .25rem;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--clr-muted);
  text-transform: uppercase;
  letter-spacing: .07em;
  border-top: 1px solid var(--clr-border);
  margin-top: .25rem;
}
.custom-select__group-label:first-child { border-top: none; margin-top: 0; }

.filter-range-inputs {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.filter-input--half { width: calc(50% - 1rem); }
.filter-range-sep { color: var(--clr-muted); flex-shrink: 0; }

/* Radio group */
.filter-radio-group { display: flex; flex-direction: column; gap: .3rem; }
.filter-radio {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  cursor: pointer;
  color: var(--clr-body);
}
.filter-radio input { accent-color: var(--clr-primary); }

/* ── Button-style radio group (vehicle type selector) ── */
.filter-radio-group--buttons { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
.filter-radio--btn { margin: 0; }
.filter-radio--btn input { position: absolute; opacity: 0; width: 0; height: 0; }
.filter-radio--btn span {
  display: inline-block;
  padding: .3rem .75rem;
  border: 1px solid var(--clr-border);
  font-size: .8125rem;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  user-select: none;
}
.filter-radio--btn input:checked + span {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}

/* ── Equipment checkboxes ── */
.filter-checkbox-group { display: flex; flex-direction: column; gap: .35rem; }
.filter-checkbox {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  cursor: pointer;
  color: var(--clr-body);
}
.filter-checkbox input { accent-color: var(--clr-primary); flex-shrink: 0; }
.filter-checkbox--inline { font-weight: 500; }

/* ── "Więcej filtrów" toggle ── */
.filter-more-toggle {
  display: flex;
  align-items: center;
  gap: .4rem;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--clr-border);
  padding: .75rem 0 0;
  margin-top: .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-primary);
  cursor: pointer;
  text-align: left;
}
.filter-more-toggle__count { font-weight: 400; color: var(--clr-muted); }
.filter-more-toggle__chevron {
  margin-left: auto;
  transition: transform .2s;
  flex-shrink: 0;
}
.filter-more-toggle[aria-expanded="true"] .filter-more-toggle__chevron {
  transform: rotate(180deg);
}

/* ── Advanced filter hint (shown when no category selected) ── */
.filter-advanced-hint {
  margin: 0;
  padding: .6rem .75rem;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  font-size: .8125rem;
  color: var(--clr-muted);
}
.filter-advanced-hint[hidden] { display: none; }

/* ── Advanced filter panel ── */
.filter-advanced {
  border-top: 1px solid var(--clr-border);
  padding-top: .75rem;
  margin-top: .75rem;
}
.filter-advanced__group { margin-top: .25rem; }
.filter-advanced__group[hidden] { display: none; }
.filter-group--equipment[hidden] { display: none; }
.filter-group--vehicle-type { margin-bottom: 1rem; }

.filters-form {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 1.25rem 1.25rem 1rem;
  scrollbar-width: thin;
}

.filters-footer {
  flex-shrink: 0;
  padding: .875rem 1.25rem;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-white);
}

.filters-submit { margin: 0; }

/* ── 12. Single Vehicle Page ──────────────────────────────────────────── */
.single-vehicle-page { padding-bottom: 4rem; }

.sold-notice {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.125rem 1.5rem;
  margin-bottom: 1.75rem;
  background: var(--clr-dark-soft);
  border-left: 4px solid var(--clr-muted);
  color: var(--clr-white);
}
.sold-notice__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.sold-notice__text strong {
  font-size: 1rem;
  font-weight: 700;
}
.sold-notice__text span {
  font-size: .9375rem;
  color: rgba(255,255,255,.65);
}

@media (max-width: 600px) {
  .sold-notice { flex-direction: column; align-items: flex-start; gap: 1rem; }
}

/* ── Sold archive page ───────────────────────────────────────────────────── */
.section--sold-listings { background: var(--clr-bg); padding: 3rem 0 5rem; }

/* ── Sold page stat banner ── */
.sold-stat-banner {
  background: var(--clr-dark);
  padding: 4rem 0;
  margin-bottom: 3.5rem;
  position: relative;
}
.sold-stat-banner--image {
  background-size: cover;
  background-position: center;
}
.sold-stat-banner--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(17,17,17, var(--stat-overlay, .65));
}
.sold-stat-banner--image .container { position: relative; }
.sold-stat {
  text-align: center;
}
.sold-stat__label {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  margin: 0 0 1rem;
}
.sold-stat__number {
  display: block;
  font-size: clamp(4.5rem, 14vw, 9rem);
  font-weight: 700;
  line-height: 1;
  color: var(--clr-primary);
  margin-bottom: 1.25rem;
  font-variant-numeric: tabular-nums;
}
.sold-stat__sub {
  font-size: 1.1875rem;
  color: rgba(255,255,255,.75);
  margin: 0;
}

.sold-archive__cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
}
.sold-archive__cta--centered {
  justify-content: center;
}
.sold-archive__cta p {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--clr-dark);
  margin: 0;
}

.archive-pagination--numbered {
  display: flex;
  justify-content: center;
  gap: .375rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.archive-pagination--numbered .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .5rem;
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  color: var(--clr-body);
  font-size: .9375rem;
  transition: background var(--transition), color var(--transition);
}
.archive-pagination--numbered .page-numbers:hover { background: var(--clr-bg); }
.archive-pagination--numbered .page-numbers.current {
  background: var(--clr-dark);
  border-color: var(--clr-dark);
  color: var(--clr-white);
}
.archive-pagination--numbered .page-numbers.dots { border-color: transparent; background: none; }

@media (max-width: 600px) {
  .sold-archive__cta { flex-direction: column; align-items: flex-start; gap: .75rem; }
}

.vehicle-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 2.5rem;
  align-items: start;
}

/* Gallery */
.vehicle-gallery { margin-bottom: 2rem; }

/* ── Featured area ─────────────────────────────────────────── */
.gallery-featured {
  display: flex;
  gap: 4px;
  height: 320px;
  margin-bottom: .5rem;
  overflow: hidden;
}

.gallery-featured__main {
  position: relative;
  flex: 3;
  min-width: 0;
  overflow: hidden;
  background: var(--clr-bg);
}

.gallery-featured__stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 4px;
}

.gallery-featured__side {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--clr-bg);
}

.gallery-featured__btn {
  position: absolute;
  inset: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
}

.gallery-featured__btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.gallery-featured__btn:hover img { transform: scale(1.03); }

.gallery-count {
  position: absolute;
  top: .875rem;
  right: .875rem;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  padding: .25rem .625rem;
  letter-spacing: .03em;
}

.gallery-more-badge {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.01em;
  pointer-events: none;
}

/* ── Thumbnail strip ───────────────────────────────────────── */
.gallery-thumbs {
  display: flex;
  gap: .5rem;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: .25rem;
}
.gallery-thumb-btn {
  flex: 1;
  min-width: 0;
  height: 68px;
  overflow: hidden;
  border: 2px solid transparent;
  transition: border-color var(--transition);
}
.gallery-thumb-btn:hover { border-color: var(--clr-primary); }
.gallery-thumb-btn img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Quick specs strip */
.vehicle-quickspecs {
  list-style: none;
  margin: 0 0 1.75rem;
  padding: .875rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--clr-border);
  border-bottom: 1px solid var(--clr-border);
}
.vehicle-quickspecs__item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--clr-body);
  padding: .25rem .75rem;
  border-right: 1px solid var(--clr-border);
}
.vehicle-quickspecs__item:last-child {
  border-right: none;
}
.vehicle-quickspecs__item svg { color: var(--clr-primary); flex-shrink: 0; }
.vehicle-quickspecs__dmc-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--clr-dark);
  color: #fff;
  padding: .15rem .4rem;
  line-height: 1.3;
}

/* Description */
.vehicle-description {
  margin-bottom: 2rem;
}
.vehicle-description h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--clr-border);
}
.vehicle-description__content {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--clr-body);
  overflow-wrap: break-word;
  word-break: break-word;
}
/* Force consistent typography regardless of editor inline styles or block classes */
.vehicle-description__content p,
.vehicle-description__content li,
.vehicle-description__content td,
.vehicle-description__content th,
.vehicle-description__content div:not([class*="wp-block"]) {
  font-family: inherit !important;
  font-size: 1rem !important;
  font-weight: 400 !important;
  line-height: 1.75 !important;
  color: var(--clr-body) !important;
}
/* span gets same treatment except font-weight — keeps strong>span bold */
.vehicle-description__content span {
  font-family: inherit !important;
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: var(--clr-body) !important;
}
/* Normalize all headings — h1/h2 pasted from Word or typed freely get tamed */
.vehicle-description__content h1,
.vehicle-description__content h2,
.vehicle-description__content h3,
.vehicle-description__content h4,
.vehicle-description__content h5,
.vehicle-description__content h6 {
  font-family: inherit !important;
  font-size: 1.0625rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--clr-dark) !important;
  margin: 1.25rem 0 .375rem !important;
  text-transform: none !important;
}
/* WP block editor font-size utility classes */
.vehicle-description__content [class*="has-"][class*="-font-size"] {
  font-size: 1rem !important;
}
/* Links keep their colour */
.vehicle-description__content a,
.vehicle-description__content a span {
  color: var(--clr-primary) !important;
}
.vehicle-description__content p { margin-bottom: .875rem; }
.rvd-section-divider { border: none; border-top: 1px solid var(--clr-border); margin: 1.5rem 0; }
.vehicle-description__content img { max-width: 100%; height: auto; }
.vehicle-description__content table {
  display: block;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Description expand/collapse */
.vehicle-description__content--collapsible.is-collapsed {
  max-height: 52rem;
  overflow: hidden;
  position: relative;
}
.vehicle-description__content--collapsible.is-collapsed::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 5rem;
  background: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}
.vehicle-description__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: .375rem;
  margin-top: .75rem;
  background: none;
  border: none;
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-primary);
  cursor: pointer;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vehicle-description__toggle svg {
  transition: transform .25s ease;
  flex-shrink: 0;
}
.vehicle-description__toggle.is-expanded svg {
  transform: rotate(180deg);
}

/* Specs — grouped collapsible sections */
.vehicle-specs { margin-bottom: 2rem; }
.vehicle-specs h2 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--clr-border);
}

.specs-group {
  border: 1px solid var(--clr-border);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
}
.specs-group__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .7rem 1rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--clr-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.specs-group__header::-webkit-details-marker { display: none; }
.specs-group__arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  transition: transform .16s;
}
details[open] .specs-group__arrow { transform: rotate(180deg); }
.specs-group__body { border-top: 1px solid var(--clr-border); }

.specs-table { width: 100%; border-collapse: collapse; }
.specs-table tr { border-bottom: 1px solid var(--clr-border); }
.specs-table tr:last-child { border-bottom: none; }
.specs-table th, .specs-table td {
  padding: .625rem 1rem;
  font-size: .9375rem;
  text-align: left;
  vertical-align: middle;
}
.specs-table th {
  width: 48%;
  font-weight: 500;
  color: var(--clr-muted);
}
.specs-table td { font-weight: 500; color: var(--clr-dark); overflow-wrap: break-word; word-break: break-word; }
.specs-table tr:nth-child(even) { background: var(--clr-bg); }

/* Location info */
.vehicle-location-info {
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.vehicle-location-info h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.0625rem;
  margin-bottom: .75rem;
}
.vehicle-location-info p { font-size: .9375rem; color: var(--clr-muted); margin-bottom: .5rem; }
.vehicle-location-info a {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .9375rem;
  color: var(--clr-primary);
  margin-bottom: .375rem;
}

/* Sidebar */
.vehicle-sidebar__sticky {
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}

/* Price box */
.price-box {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.price-box__manufacturer {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--clr-primary);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .25rem;
}
.price-box__title {
  font-size: 1.25rem;
  margin-bottom: .5rem;
  line-height: 1.3;
}
.price-box__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
  font-size: .875rem;
  color: var(--clr-muted);
  margin-bottom: .5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--clr-border);
}
.price-box__price { margin-bottom: .5rem; }
.price-box__price .price-regular { font-size: 1.875rem; }
.price-box__price .price-promo   { font-size: 1.875rem; }

.status-dot {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .8125rem;
  font-weight: 600;
  padding: .2rem .625rem;
  border-radius: var(--radius-full);
}
.status-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-dot--available { color: var(--clr-success); background: #dcfce7; }
.status-dot--reserved  { color: var(--clr-warning); background: #fef3c7; }
.status-dot--sold      { color: var(--clr-sold);    background: #f1f5f9; }

.price-promo-badge {
  display: inline-block;
  margin-top: .25rem;
  font-size: .75rem;
  font-weight: 700;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.price-box__eur {
  margin-top: .625rem;
  padding-top: .625rem;
  border-top: 1px solid var(--clr-border);
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.price-eur {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-muted);
}
.price-eur-original {
  font-size: .9375rem;
  color: var(--clr-muted);
  text-decoration: line-through;
  font-weight: 400;
}
.price-eur-promo {
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-muted);
}

/* ── 13. Lead Form ────────────────────────────────────────────────────── */
.lead-box {
  background: var(--clr-white);
  border: 1px solid var(--clr-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.lead-phone-btn {
  display: flex;
  align-items: center;
  gap: .75rem;
  background: var(--clr-dark);
  color: var(--clr-white);
  padding: .875rem 1.125rem;
  margin-bottom: 1.125rem;
  transition: background var(--transition);
}
.lead-phone-btn:hover { background: var(--clr-dark-soft); color: var(--clr-white); }
.lead-phone-btn__number {
  font-size: 1rem;
  font-weight: 700;
  flex: 1;
  white-space: nowrap;
}
.lead-phone-btn__cta {
  font-size: .75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .7;
  text-align: right;
}

.lead-divider {
  position: relative;
  text-align: center;
  margin-bottom: 1.125rem;
}
.lead-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--clr-border);
}
.lead-divider span {
  position: relative;
  background: var(--clr-white);
  padding: 0 .75rem;
  font-size: .8125rem;
  color: var(--clr-muted);
}

.lead-box__title {
  font-size: 1rem;
  margin-bottom: 1rem;
  color: var(--clr-dark);
}

/* Form fields */
.form-field { margin-bottom: .875rem; }
.form-field label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--clr-muted);
  margin-bottom: .375rem;
}
.form-field input,
.form-field textarea {
  width: 100%;
  padding: .5625rem .875rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  font-size: .9375rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-light);
}
.form-field textarea { resize: vertical; }

.form-field--hint { margin-top: -.5rem; }
.form-field__hint {
  font-size: .75rem;
  color: var(--clr-muted);
  font-style: italic;
}

.rvd-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-consent {
  font-size: .75rem;
  color: var(--clr-muted);
  margin-bottom: .875rem;
  line-height: 1.5;
}

.form-field--consent {
  margin-bottom: .875rem;
}

.form-field--consent .consent-label {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  align-items: start;
  cursor: pointer;
  font-size: .75rem;
  font-weight: 400;
  color: var(--clr-muted);
  line-height: 1.5;
}

.form-field--consent .consent-input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
  pointer-events: none;
}

.consent-box {
  flex-shrink: 0;
  display: block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  min-height: 14px;
  margin-top: .1rem;
  border: 1.5px solid var(--clr-border);
  background: #fff;
  position: relative;
  transition: border-color .15s, background .15s;
  box-sizing: border-box;
}

.consent-label:hover .consent-box,
.consent-input:focus + .consent-label .consent-box {
  border-color: var(--clr-primary);
}

.consent-input:checked + .consent-label .consent-box {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
}

.consent-input:checked + .consent-label .consent-box::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0px;
  width: 4px;
  height: 8px;
  border: 1.5px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

.consent-label a {
  color: var(--clr-muted);
  text-decoration: underline;
}

.consent-label a:hover {
  color: var(--clr-body);
}

/* Form messages */
.rvd-form-message {
  margin-top: .875rem;
  padding: .75rem 1rem;
  border-radius: var(--radius-md);
  font-size: .9375rem;
  font-weight: 500;
}
.rvd-form-message.rvd-success {
  background: #dcfce7;
  color: #15803d;
  border: 1px solid #86efac;
}
.rvd-form-message.rvd-error {
  background: #fee2e2;
  color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* ── 14. Manufacturer Hero ────────────────────────────────────────────── */
.manufacturer-hero {
  background: var(--clr-dark);
  color: var(--clr-white);
  padding: 3rem 0;
  margin-bottom: 0;
}
.manufacturer-hero__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.manufacturer-hero__logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.manufacturer-hero__label {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  margin-bottom: .25rem;
}
.manufacturer-hero__title { color: var(--clr-white); margin-bottom: .5rem; }
.manufacturer-hero__desc  { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: .75rem; }
.manufacturer-hero__count {
  display: inline-block;
  background: rgba(255,255,255,.12);
  padding: .3rem .875rem;
  border-radius: var(--radius-full);
  font-size: .875rem;
  font-weight: 600;
}

/* Category hero */
.category-hero {
  background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-soft) 100%);
  color: var(--clr-white);
  padding: 2.5rem 0;
}
.category-hero__label {
  font-size: .8125rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-primary);
  font-weight: 600;
  margin-bottom: .25rem;
}
.category-hero__title { color: var(--clr-white); margin-bottom: .5rem; }
.category-hero__desc  { color: rgba(255,255,255,.75); }

/* ── 15. Page Hero (unified — manufacturer + category) ───────────────── */

/* Base: used by all three contexts. Homepage uses .hero CSS; these add the
   shared image-background layer for manufacturer & category contexts. */
.page-hero {
  position: relative;
  /* overflow: hidden removed — bg image is self-contained via object-fit: cover;
     needed for hero search dropdowns to extend below the hero boundary */
}

/* Background image layer */
.page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Dark overlay (opacity set inline from section settings) */
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content wrapper */
.page-hero__inner {
  position: relative;
  z-index: 3;
}

/* Text block — always full-width so text-align works across all contexts */
.page-hero__text {
  width: 100%;
}

/* ── Manufacturer hero ────── */
.page-hero--manufacturer {
  background: var(--clr-dark);
  color: var(--clr-white);
  padding: 3.15rem 0;
  min-height: 380px;
  display: flex;
  align-items: center;
}
.page-hero--manufacturer .page-hero__inner {
  display: flex;
  align-items: center;
  gap: 2.1rem;
  width: 100%;
}
.page-hero--manufacturer .page-hero__text {
  flex: 1;
  min-width: 0;
}
.page-hero--manufacturer.page-hero--has-image .page-hero__inner {
  padding-block: 3.15rem;
}
.page-hero__logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  flex-shrink: 0;
}
.page-hero__eyebrow {
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.6);
  margin-bottom: .75rem;
}
.page-hero--category .page-hero__eyebrow {
  color: var(--clr-primary);
  font-weight: 600;
}
.page-hero__title  { color: var(--clr-white); margin-bottom: 1rem; }
.page-hero__subtitle { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: .8rem; }
.page-hero__count {
  display: inline-block;
  background: rgba(255,255,255,.12);
  padding: .3rem .875rem;
  border-radius: var(--radius-full);
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-white);
}

/* ── Category hero ────────── */
.page-hero--category {
  background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-soft) 100%);
  color: var(--clr-white);
  padding: 2.65rem 0;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.page-hero--category.page-hero--has-image {
  justify-content: center;
}

/* ── Transparent header adaptations ─────────────── */

/* Gradient veil — darkens the top of the hero so header links stay readable
   over any background (photo, video, gradient). z-index 2 = above overlay (1),
   below content (3). */
body.hdr-transparent .page-hero::before,
body.hdr-transparent .hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 320px;
  background: linear-gradient( to bottom, rgba(0,0,0,.55) 0%, transparent 100% );
  z-index: 2;
  pointer-events: none;
}

/* Content padding — prevent hero headline from sitting directly behind the header */
body.hdr-transparent .hero {
  padding-top: calc( var(--header-h, 70px) + 2rem );
}
body.hdr-transparent .page-hero--manufacturer,
body.hdr-transparent .page-hero--category {
  padding-top: calc( var(--header-h, 70px) + 1.25rem );
}

/* ── Responsive ─────────────── */
@media (max-width: 768px) {
  .page-hero--manufacturer .page-hero__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .page-hero--manufacturer { padding: 2rem 0; min-height: 260px; }
.page-hero--category { min-height: 260px; padding: 1.5rem 0; }
}

/* ── 16. Footer ───────────────────────────────────────────────────────── */
.site-footer { background: var(--clr-dark); color: rgba(255,255,255,.75); margin-top: 4rem; }

.footer-main { padding: 4rem 0 3rem; }
.footer-grid {
  display: grid;
  gap: 3rem;
}
.footer-grid--cols-1 { grid-template-columns: 1fr; }
.footer-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.footer-grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.footer-grid--cols-4 { grid-template-columns: 1.5fr 1fr 1fr 1fr; }

.footer-col { }
.footer-brand { }
.footer-logo .logo-text { color: #fff; }
.footer-desc {
  margin: 1rem 0;
  font-size: .9375rem;
  line-height: 1.7;
}
.footer-contact-link {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  color: rgba(255,255,255,.8);
  margin-bottom: .5rem;
  transition: color var(--transition);
}
.footer-contact-link:hover { color: var(--clr-white); }

.footer-heading {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.4);
  margin-bottom: 1.25rem;
}

.footer-links { display: flex; flex-direction: column; gap: .625rem; }
.footer-links a {
  font-size: .9375rem;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.footer-links a:hover { color: var(--clr-white); }

.footer-location-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin-bottom: .875rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-location-item:last-child { border-bottom: none; margin-bottom: 0; }
.footer-location-item strong { color: var(--clr-white); font-size: .9375rem; }
.footer-location-item span   { font-size: .875rem; }
.footer-location-item a      { font-size: .875rem; color: rgba(255,255,255,.6); transition: color var(--transition); }
.footer-location-item a:hover{ color: var(--clr-white); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 1.25rem 0;
}
.footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; }
.footer-copy { font-size: .875rem; color: rgba(255,255,255,.4); }

.footer-text { font-size: .9375rem; line-height: 1.7; }
.footer-text a { color: rgba(255,255,255,.7); transition: color var(--transition); }
.footer-text a:hover { color: var(--clr-white); }

/* ── 16. Lightbox ─────────────────────────────────────────────────────── */
.rvd-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.rvd-lightbox[hidden] { display: none; }

.rvd-lightbox__img-wrap {
  max-width: 90vw;
  max-height: 85vh;
}
.rvd-lightbox__img-wrap img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.rvd-lightbox__close,
.rvd-lightbox__prev,
.rvd-lightbox__next {
  position: absolute;
  background: rgba(255,255,255,.12);
  color: var(--clr-white);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  transition: background var(--transition);
}
.rvd-lightbox__close:hover,
.rvd-lightbox__prev:hover,
.rvd-lightbox__next:hover { background: rgba(255,255,255,.25); }

.rvd-lightbox__close { top: 1.25rem; right: 1.25rem; }
.rvd-lightbox__prev  { left: 1.25rem; top: 50%; transform: translateY(-50%); }
.rvd-lightbox__next  { right: 1.25rem; top: 50%; transform: translateY(-50%); }

.rvd-lightbox__counter {
  position: absolute;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,.6);
  font-size: .875rem;
  background: rgba(0,0,0,.4);
  padding: .25rem .875rem;
  border-radius: var(--radius-full);
}

/* ── 17. Similar vehicles ─────────────────────────────────────────────── */
.similar-vehicles {
  background: var(--clr-bg);
  padding: 3rem 0 4rem;
  border-top: 1px solid var(--clr-border);
}
.similar-vehicles__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 1.75rem;
}

/* ── Vehicle FAQ ──────────────────────────────────────────────────────── */
.vehicle-faq {
  padding: 4rem 0;
  background: #fff;
  border-top: 1px solid var(--clr-border);
}
.vehicle-faq__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--clr-dark);
  margin-bottom: 2rem;
  letter-spacing: -.01em;
}
.vehicle-faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.faq-item {
  border-bottom: 1px solid var(--clr-border);
}
.faq-item:first-child {
  border-top: 1px solid var(--clr-border);
}
.faq-item__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.125rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-dark);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color .15s;
}
.faq-item__question::-webkit-details-marker { display: none; }
.faq-item:hover .faq-item__question,
.faq-item[open] .faq-item__question { color: var(--clr-primary); }
.faq-item__arrow {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 14px;
  background-position: center;
  transition: transform .2s ease, border-color .15s;
  opacity: .5;
}
.faq-item[open] .faq-item__arrow {
  transform: rotate(180deg);
  opacity: 1;
}
.faq-item__answer {
  padding: 0 0 1.25rem;
  font-size: .9375rem;
  color: var(--clr-muted);
  line-height: 1.75;
  overflow-wrap: break-word;
  word-break: break-word;
}
.faq-item__answer a { color: var(--clr-primary); text-decoration: underline; }

/* ── 18. Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .vehicle-layout       { grid-template-columns: 1fr 340px; gap: 2rem; }
  .footer-grid--cols-3,
  .footer-grid--cols-4  { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .archive-layout { grid-template-columns: 1fr; }
  .filters-sidebar {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 500;
    max-height: 100vh;
    border-radius: 0;
  }
  .filters-sidebar.is-open { display: flex; }
  .filters-mobile-toggle { display: inline-flex; }
  .filters-close { display: flex; }

  .vehicle-layout { grid-template-columns: 1fr; }
  /* Dissolve wrappers so each section becomes a direct grid child */
  .vehicle-main,
  .vehicle-sidebar,
  .vehicle-sidebar__sticky { display: contents; }
  /* Explicit mobile order — breadcrumb is outside .vehicle-layout so naturally first */
  .vehicle-gallery       { order: 1; min-width: 0; }
  .vehicle-quickspecs    { order: 1; min-width: 0; }
  .price-box             { order: 2; min-width: 0; }
  .vehicle-description   { order: 3; min-width: 0; }
  .vehicle-specs         { order: 4; min-width: 0; }
  .lead-box              { order: 5; min-width: 0; }
  .vehicle-location-info { order: 6; min-width: 0; }
}

@media (max-width: 768px) {
  /* --header-h is set by Customizer mobile size setting (inline style from PHP) */

  /* Primary nav hidden in grid — lives inside drawer on mobile */
  .primary-nav { display: none; }

  /* Drawer shows nav as column layout */
  .site-drawer__nav .nav-menu { flex-direction: column; align-items: flex-start; gap: 0; }
  .site-drawer__nav .nav-menu > li { width: 100%; border-bottom: 1px solid var(--clr-border); }
  .site-drawer__nav .nav-menu > li:first-child { border-top: 1px solid var(--clr-border); }
  .site-drawer__nav .nav-menu li a { font-size: .9375rem; padding: .75rem 1.25rem; width: 100%; display: flex; align-items: center; min-height: 48px; }
  .site-drawer__nav .nav-menu .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding-left: 1rem;
    border-top: 1px solid var(--clr-border);
  }
  .site-drawer__nav .nav-menu .sub-menu li a { font-size: .9375rem; padding: .75rem 1.25rem; min-height: 48px; color: var(--clr-muted); }

  .header-inner {
    grid-template-columns: 1fr auto;
    gap: .5rem;
  }
  /* Restore actions col on mobile for all types — hamburger always needed */
  .site-header--actions-none .header-inner { grid-template-columns: 1fr auto; }
  .site-header--actions-none .header-col--actions { display: flex; }
  /* Undo cta_and_drawer desktop grid — mobile is always logo + hamburger */
  .site-header--actions-cta-and-drawer .header-inner { grid-template-columns: 1fr auto; }
  .site-header--actions-cta-and-drawer .header-col--actions { display: flex; }

  /* Side drawer goes full-width on phones */
  .site-drawer--side .site-drawer__panel { width: 100%; max-width: 100%; }
  /* Show primary nav section and divider on mobile */
  .site-drawer__nav { display: block; }
  .site-drawer__divider { display: block; }

  .nav-toggle { display: flex; }
  .header-cta { display: none; }

  .topbar-contact { display: none; }

  .footer-grid { gap: 2rem; }
  .footer-grid--cols-2,
  .footer-grid--cols-3,
  .footer-grid--cols-4 { grid-template-columns: 1fr; }
  .footer-main  { padding: 2.5rem 0 2rem; }

  .gallery-featured { height: 260px; width: 100%; max-width: 100%; }
  .gallery-featured__main { width: 100%; }
  .gallery-featured__btn { position: relative; display: block; width: 100%; height: 100%; }
  .gallery-featured__btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .gallery-featured__stack { display: none; }
  .gallery-thumbs { max-width: 100%; }
  .gallery-thumb-btn { height: 52px; }

  .vehicle-quickspecs {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--clr-border);
    padding: 0;
    overflow: hidden;
  }
  .vehicle-quickspecs__item {
    flex: 1 0 calc(33.334% - 1px);
    background: #fff;
    border: none;
    padding: .75rem .5rem;
    font-size: .8125rem;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
  .vehicle-quickspecs__item:last-child { border: none; }

  .vehicle-description__toggle { width: 100%; justify-content: center; }

  .manufacturer-hero__inner { flex-direction: column; align-items: flex-start; gap: 1rem; }

  .specs-table th { width: 45%; }

  .archive-layout { gap: 1.5rem; }
  .vehicle-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
}

@media (max-width: 480px) {
  :root { --container-pad: 1.5rem; }
  .vehicle-grid { grid-template-columns: 1fr; gap: .875rem; }
  .breadcrumb { font-size: .8125rem; }

  /* PDP price box — tighter on small screens */
  .price-box { padding: 1rem; }
  .price-box__meta { margin-bottom: .25rem; padding-bottom: .75rem; }
  .price-box__price { margin-bottom: .25rem; }
  .price-box__price .price-regular,
  .price-box__price .price-promo { font-size: 1.5rem; }
  .price-box__compare { padding: .25rem 0 .5rem; }
  .compare-btn { width: 100%; justify-content: center; }
}

/* ── Mobile: touch targets, breathing room, native layout ────────────── */
@media (max-width: 768px) {
  /* Card body — more padding so text doesn't feel crammed */
  .vehicle-card__body { padding: 1rem 1.25rem .875rem; }
  .vehicle-card__specs li { font-size: .8125rem; }

  /* 44 px minimum touch targets on all form controls */
  .filter-input,
  .custom-select__trigger,
  .form-field input {
    min-height: 44px;
    padding-block: .75rem;
  }
  .filter-input           { padding-inline: .875rem; }
  .custom-select__trigger { padding-inline: .875rem 2.5rem; }

  /* Price / year range: stack vertically, both inputs full-width */
  .filter-range-inputs { flex-direction: column; gap: .5rem; }
  .filter-input--half  { width: 100%; }
  .filter-range-sep    { display: none; }

  /* Archive header: title owns the first row, count + toggle sit below */
  .archive-header { flex-wrap: wrap; row-gap: .5rem; column-gap: .75rem; }
  .archive-title  { flex: 0 0 100%; }
  .archive-count  { margin-left: 0; }

  /* Full-width utility buttons */
  #rvd-load-more        { width: 100%; justify-content: center; }
  .filters-submit .btn  { width: 100%; justify-content: center; }

  /* Filter overlay: generous insets + iOS safe area at bottom */
  .filters-form   { padding: 1.5rem 1.25rem 1rem; }
  .filters-footer { padding: 1rem 1.25rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }

  /* Specs table: slightly more readable padding on small screens */
  .specs-table th,
  .specs-table td { padding: .625rem .875rem; font-size: .875rem; }

  /* Drawer actions: full-width CTA */
  .site-drawer__actions         { padding: 1rem 1.25rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .site-drawer__actions .btn    { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  /* Card specs: consistent size at all small sizes */
  .vehicle-card__specs li { font-size: .875rem; }
}

/* ── 17a. Site drawer ────────────────────────────────────────────────── */
.site-drawer {
  position: fixed;
  inset: 0;
  z-index: 500;
  visibility: hidden;
  pointer-events: none;
}
.site-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
}
.site-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .25s ease;
}
.site-drawer.is-open .site-drawer__backdrop { opacity: 1; }

/* ── Side drawer (default) ── */
.site-drawer--side .site-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  max-width: 90vw;
  background: var(--clr-white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s ease;
  box-shadow: -4px 0 32px rgba(0, 0, 0, .15);
}
.site-drawer--side.is-open .site-drawer__panel { transform: translateX(0); }

/* ── Bottom sheet ── */
.site-drawer--bottom .site-drawer__panel {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  background: var(--clr-white);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.32,.72,0,1);
  box-shadow: 0 -4px 32px rgba(0, 0, 0, .15);
  border-radius: 1.25rem 1.25rem 0 0;
}
.site-drawer--bottom.is-open .site-drawer__panel { transform: translateY(0); }

/* Drag handle — visual affordance on bottom sheet */
.site-drawer--bottom .site-drawer__panel::before {
  content: '';
  display: block;
  width: 40px;
  height: 4px;
  background: var(--clr-border);
  border-radius: 2px;
  margin: .875rem auto .25rem;
  flex-shrink: 0;
}

.site-drawer__close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .375rem;
  padding: .75rem 1rem .25rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--clr-muted);
  font-size: .8125rem;
  font-weight: 500;
  flex-shrink: 0;
  align-self: flex-end;
}
.site-drawer__close:hover { color: var(--clr-primary); }

/* Primary nav inside drawer — hidden on desktop (col 2 handles nav) */
.site-drawer__nav { padding: .25rem 0; }
@media (min-width: 769px) {
  .site-drawer__nav { display: none; }
}

/* Divider between nav and actions sections */
.site-drawer__divider {
  margin: 0 1.25rem;
  border: none;
  border-top: 1px solid var(--clr-border);
  flex-shrink: 0;
}
@media (min-width: 769px) {
  .site-drawer__divider { display: none; }
}

/* Actions section */
.site-drawer__actions {
  padding: 1.25rem;
  flex-shrink: 0;
}
.btn--full { width: 100%; justify-content: center; }

/* Alternate menu in drawer (drawer_menu type) */
.drawer-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.drawer-nav-menu li a {
  display: block;
  padding: .625rem .25rem;
  color: var(--clr-body);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid var(--clr-border);
}
.drawer-nav-menu li:last-child a { border-bottom: none; }
.drawer-nav-menu li a:hover { color: var(--clr-primary); }

/* ── 17b. Sticky header behaviour ────────────────────────────────────── */
.site-header {
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
/* Don't hide when nav or filters are open */
body.nav-open .site-header,
body.filters-open .site-header {
  transform: none;
}

/* ── 17c. Transparent header ─────────────────────────────────────────── */
/* Only active on the homepage (body.hdr-transparent is gated to is_front_page() in PHP).
   All headers are already position:fixed — only bg and text colour change here. */
.site-header--transparent {
  box-shadow: none;
}
.site-header--transparent .header-main,
.site-header--transparent .header-topbar {
  background: transparent;
}
/* Once scrolled: solid background appears */
.site-header--transparent.is-scrolled {
  box-shadow: var(--shadow-md);
}
.site-header--transparent.is-scrolled .header-main {
  background: var(--hdr-bg, var(--clr-white));
}
.site-header--transparent.is-scrolled .header-topbar {
  background: var(--clr-dark);
}
/* Before scroll: override --hdr-text with the transparent-state color.
   Uses #site-header in selector to beat the ID-level inline style from wp_head. */
#site-header.site-header--transparent:not(.is-scrolled) {
  --hdr-text: var(--hdr-text-transp, #fff);
}

/* ── 18. Utilities ────────────────────────────────────────────────────── */

/* Text-align utilities — used by page builder align fields */
.ta-left   { text-align: left;   }
.ta-center { text-align: center; }
.ta-right  { text-align: right;  }

@media (max-width: 768px) {
  .ta-m-left   { text-align: left   !important; }
  .ta-m-center { text-align: center !important; }
  .ta-m-right  { text-align: right  !important; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

.text-center { text-align: center; }
.text-muted  { color: var(--clr-muted); }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   Homepage — Phase 3
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 19. Section Shared ───────────────────────────────────────────────── */
.section {
  padding: 4rem 0;
}
.section--carousel   { background: var(--clr-bg); }
.section--listings   { background: var(--clr-bg); }
.section--categories { background: var(--clr-white); }
.section--latest     { background: var(--clr-bg); }
.section--brands     { background: var(--clr-white); }
.section--locations  { background: var(--clr-dark); color: var(--clr-white); }
.section--cta-banner { background: var(--clr-white); padding: 3rem 0; }
.section--seo-text   { background: var(--clr-bg); padding: 3rem 0; }
.section--blog-posts { background: var(--clr-white); }

.seo-text-content {
    max-width: 860px;
    margin: 0 auto;
    color: var(--clr-muted);
    font-size: 0.9375rem;
    line-height: 1.75;
}

.seo-text-content h1 { font-size: 1.25rem; font-weight: 600; margin: 1.5em 0 .5em; color: var(--clr-dark); }
.seo-text-content h2 { font-size: 1.25rem; font-weight: 600; margin: 1.5em 0 .5em; color: var(--clr-dark); }
.seo-text-content h3 { font-size: 1.05rem; font-weight: 600; margin: 1.25em 0 .4em; color: var(--clr-dark); }
.seo-text-content h4,
.seo-text-content h5,
.seo-text-content h6 { font-size: 1rem; font-weight: 600; margin: 1em 0 .35em; color: var(--clr-dark); }
.seo-text-content p  { margin: 0 0 1em; font-weight: 400; }
.seo-text-content p:empty,
.seo-text-content p:has(> br:only-child) { display: none; }
.seo-text-content ul,
.seo-text-content ol { margin: 0 0 1em; padding-left: 1.5em; }
.seo-text-content a  { color: var(--clr-primary); }
.seo-text-content a:hover { text-decoration: underline; }

.seo-text-content--expandable {
    position: relative;
    max-height: 160px;
    overflow: hidden;
}
.seo-text-content--expandable::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(to bottom, transparent, var(--clr-bg));
    pointer-events: none;
}
.seo-text-content--expandable.is-expanded {
    max-height: none;
}
.seo-text-content--expandable.is-expanded::after {
    display: none;
}
/* ── SEO section blocks ────────────────────────────────────────────────────── */
.section--seo { padding: 2rem 0; }
.seo-blocks-content > * + * { margin-top: 1.25rem; }
.seo-blocks-content > .seo-heading + * { margin-top: .625rem; }

.seo-heading { font-size: 1.125rem; font-weight: 700; color: var(--clr-dark); margin: 0; }
.seo-heading--left   { text-align: left; }
.seo-heading--center { text-align: center; }
.seo-heading--right  { text-align: right; }

.seo-paragraph { color: var(--clr-body); line-height: 1.7; margin: 0; }
.seo-paragraph--left   { text-align: left; }
.seo-paragraph--center { text-align: center; }
.seo-paragraph--right  { text-align: right; }
.seo-paragraph p  { margin: 0 0 .75em; }
.seo-paragraph ul,
.seo-paragraph ol { margin: 0 0 .75em; padding-left: 1.5em; }
.seo-paragraph a  { color: var(--clr-primary); }
.seo-paragraph a:hover { text-decoration: underline; }
.seo-paragraph:last-child p:last-child { margin-bottom: 0; }

.seo-richtext { color: var(--clr-body); line-height: 1.7; }
.seo-richtext h1 { font-size: 1.375rem; font-weight: 700; color: var(--clr-dark); margin: 1.5em 0 .5em; }
.seo-richtext h2 { font-size: 1.375rem; font-weight: 700; color: var(--clr-dark); margin: 1.5em 0 .5em; }
.seo-richtext h3 { font-size: 1.125rem; font-weight: 700; color: var(--clr-dark); margin: 1.25em 0 .4em; }
.seo-richtext h4 { font-size: 1rem;     font-weight: 700; color: var(--clr-dark); margin: 1em 0 .35em; }
.seo-richtext h5,
.seo-richtext h6 { font-size: .9375rem; font-weight: 700; color: var(--clr-dark); margin: 1em 0 .35em; }
.seo-richtext h1:first-child,
.seo-richtext h2:first-child,
.seo-richtext h3:first-child,
.seo-richtext h4:first-child { margin-top: 0; }
.seo-richtext p   { margin: 0 0 .75em; font-weight: 400; }
.seo-richtext p:last-child { margin-bottom: 0; }
.seo-richtext p:empty,
.seo-richtext p:has(> br:only-child) { display: none; }
.seo-richtext ul,
.seo-richtext ol  { margin: 0 0 .75em; padding-left: 1.5em; }
.seo-richtext a   { color: var(--clr-primary); }
.seo-richtext a:hover { text-decoration: underline; }
.seo-richtext strong { font-weight: 700; }
.seo-richtext em { font-style: italic; }

.seo-gallery { display: grid; gap: .5rem; margin: 0; }
.seo-gallery--cols-2 { grid-template-columns: repeat(2, 1fr); }
.seo-gallery--cols-3 { grid-template-columns: repeat(3, 1fr); }
.seo-gallery--cols-4 { grid-template-columns: repeat(4, 1fr); }
.seo-gallery__item { display: block; overflow: hidden; aspect-ratio: 3/2; }
.seo-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .seo-gallery--cols-4 { grid-template-columns: repeat(2, 1fr); }
  .seo-gallery--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .seo-gallery--cols-4,
  .seo-gallery--cols-3,
  .seo-gallery--cols-2 { grid-template-columns: 1fr; }
}

.seo-expand-btn {
    display: block;
    margin: 1.25rem auto 0;
    background: none;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: .5rem 1.75rem;
    cursor: pointer;
    color: var(--clr-primary);
    font-size: .9375rem;
    font-weight: 500;
    transition: border-color var(--transition), color var(--transition);
}
.seo-expand-btn:hover {
    border-color: var(--clr-primary);
}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.section-header--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.section-eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--clr-primary);
  margin-bottom: .5rem;
}
.section-title {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: 0;
}
.section--locations .section-eyebrow { color: rgba(255,255,255,.45); }
.section--locations .section-title   { color: var(--clr-white); }

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

/* ── 20. Hero ─────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 620px;
  display: flex;
  align-items: center;
  padding: 5.25rem 0 3.15rem;
  /* overflow: hidden removed — bg layers clip themselves; needed for search dropdowns to extend below hero */
}

.hero__inner {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.625rem;
}

.hero__text {
  width: 100%;
  text-align: center;
}
.hero__eyebrow {
  font-size: .875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-primary);
  margin-bottom: .75rem;
}
.hero__title {
  color: var(--clr-white);
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  margin-bottom: 1.25rem;
}
.hero__subtitle {
  color: rgba(255,255,255,.7);
  font-size: clamp(1rem, 2vw, 1.1875rem);
  line-height: 1.65;
  text-align: center;
}

/* Hero search bar */
.hero-search {
  display: flex;
  align-items: flex-end;
  gap: .75rem;
  background: var(--clr-white);
  border-radius: 0;
  padding: 1.375rem 1.375rem 1.375rem 1.625rem;
  box-shadow: none;
  border: none;
  flex-wrap: wrap;
  max-width: 900px;
}

.hero-search__fields {
  display: flex;
  gap: .875rem;
  flex: 1;
  flex-wrap: wrap;
}

.hero-search__field {
  flex: 1;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.hero-search__field--price { min-width: 140px; }

.hero-search__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--clr-muted);
}

.hero-search__input {
  padding: .5rem .75rem;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-md);
  background: var(--clr-bg);
  font-size: .9375rem;
  color: var(--clr-body);
  width: 100%;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.hero-search__input:focus {
  outline: none;
  border-color: var(--clr-primary);
  box-shadow: 0 0 0 3px var(--clr-primary-light);
}
/* Hero search custom select inherits .custom-select styles; just ensure full width. */
.hero-search__fields .custom-select { width: 100%; }

.hero-search__btn {
  flex-shrink: 0;
  align-self: flex-end;
  white-space: nowrap;
  height: 42px;
}

/* Hero stats */
.hero-stats {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  width: 100%;
  max-width: 900px;
}
.hero-stat {
  display: flex;
  flex-direction: column;
}
.hero-stat__number {
  font-size: 1.875rem;
  font-weight: 800;
  color: var(--clr-white);
  line-height: 1;
}
.hero-stat__label {
  font-size: .8125rem;
  color: rgba(255,255,255,.55);
  margin-top: .25rem;
}

/* ── 21. Carousel ─────────────────────────────────────────────────────── */
.carousel-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: .75rem;
}

.carousel-track-wrap {
  overflow: hidden;
  flex: 1;
}

.carousel-track {
  display: flex;
  gap: 1.25rem;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

.carousel-slide {
  flex: 0 0 calc(33.333% - .833rem);
  min-width: 280px;
  display: flex;
  flex-direction: column;
}
.carousel-slide > .vehicle-card {
  flex: 1;
}

.carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  color: var(--clr-dark);
  font-size: 1.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  z-index: 2;
}
.carousel-btn:hover {
  background: var(--clr-dark);
  border-color: var(--clr-dark);
  color: var(--clr-white);
}
.carousel-btn:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Dots */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: 1.25rem;
}
.carousel-dot {
  width: 24px;
  height: 3px;
  border-radius: 0;
  background: var(--clr-border);
  border: none;
  cursor: pointer;
  transition: background var(--transition), width var(--transition);
}
.carousel-dot.is-active {
  background: var(--clr-dark);
  width: 36px;
}

/* ── 22. Category Blocks ──────────────────────────────────────────────── */
.category-blocks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 1.75rem;
}

.category-block {
  overflow: hidden;
  border: 1px solid var(--clr-border);
  background: var(--clr-white);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.category-block:hover {
  border-color: var(--clr-dark);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
}

.category-block__image-link { display: block; }
.category-block__image-wrap {
  position: relative;
  aspect-ratio: 16/7;
  overflow: hidden;
  background: var(--clr-dark);
}
.category-block__image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.02);
}

.category-block__placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-soft) 100%);
  color: rgba(255,255,255,.2);
}

.category-block__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(17,17,17,.5) 0%, transparent 60%);
}

.category-block__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex: 1;
}

.category-block__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}

.category-block__title {
  font-size: 1.375rem;
  margin: 0;
}
.category-block__title a { color: var(--clr-dark); transition: color var(--transition); }
.category-block__title a:hover { color: var(--clr-primary); }

.category-block__count {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--clr-muted);
  white-space: nowrap;
}

.category-block__desc {
  font-size: .9375rem;
  color: var(--clr-muted);
  line-height: 1.6;
  margin: 0;
}

.category-block__children {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}

/* Push the CTA button to the bottom regardless of subcategory count */
.category-block__body > .btn {
  margin-top: auto;
}
.category-block__children a {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: var(--clr-body);
  padding: .35rem 0;
  border-bottom: 1px solid var(--clr-border);
  transition: color var(--transition);
}
.category-block__children a:hover {
  color: var(--clr-primary);
}
.child-count {
  font-size: .8125rem;
  color: var(--clr-muted);
  margin-left: auto;
}

/* ── 23. Brands Grid ──────────────────────────────────────────────────── */
.brands-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
}

.brand-card {
  display: flex;
  flex-direction: column;
  background: var(--clr-white);
  border: 1.5px solid var(--clr-border);
  text-decoration: none;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  overflow: hidden;
}
.brand-card:hover {
  border-color: var(--clr-dark);
  box-shadow: 0 6px 24px rgba(0,0,0,.09);
  transform: translateY(-2px);
}

.brand-card__logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: 1.75rem 1.5rem;
  background: var(--clr-white);
}

.brand-card__logo {
  max-height: 64px;
  max-width: 160px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1) opacity(.7);
  transition: filter var(--transition);
}
.brand-card:hover .brand-card__logo {
  filter: grayscale(0) opacity(1);
}

.brand-card__name-fallback {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--clr-dark);
  letter-spacing: -.02em;
}

.brand-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .75rem 1rem;
  border-top: 1px solid var(--clr-border);
  background: var(--clr-white);
}

.brand-card__name {
  font-size: .875rem;
  font-weight: 700;
  color: var(--clr-dark);
}

.brand-card__count {
  font-size: .75rem;
  font-weight: 600;
  color: var(--clr-white);
  background: var(--clr-primary);
  padding: .2em .6em;
  line-height: 1.4;
}

/* ── 24. Locations ────────────────────────────────────────────────────── */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.location-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
  transition: background var(--transition), border-color var(--transition);
}
.location-card:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.2);
}

.location-card__icon {
  color: var(--clr-primary);
  margin-bottom: .25rem;
}
.location-card__name {
  font-size: 1.125rem;
  font-weight: 700;
  margin: 0;
}
.location-card__name { color: var(--clr-white); }
.location-card__name a { color: var(--clr-white); transition: color var(--transition); }
.location-card__name a:hover { color: var(--clr-primary); }

/* ── Location open/closed badge ─────────────────────────────────────────────── */

.loc-badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: .375rem 0 .5rem;
  padding: .25rem .625rem;
  border-radius: 2px;
}

.loc-badge::before {
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.loc-badge--open {
  background: rgba( 0, 163, 42, .12 );
  color: #00a32a;
}
.loc-badge--open::before  { background: #00a32a; }

.loc-badge--closed {
  background: rgba( 100, 116, 139, .12 );
  color: var(--clr-muted);
}
.loc-badge--closed::before { background: var(--clr-muted); }

/* In the dark locations section on homepage, invert the closed badge slightly */
.section--locations .loc-badge--open   { background: rgba( 0, 163, 42, .18 ); }
.section--locations .loc-badge--closed { background: rgba( 255, 255, 255, .08 ); color: rgba( 255,255,255,.55 ); }
.section--locations .loc-badge--closed::before { background: rgba( 255,255,255,.35 ); }

.location-card__address {
  font-size: .875rem;
  color: rgba(255,255,255,.55);
  margin: 0;
}

.location-card__contact {
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.location-card__contact a {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .875rem;
  color: rgba(255,255,255,.7);
  transition: color var(--transition);
}
.location-card__contact a:hover { color: var(--clr-white); }

.location-card__link {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: auto;
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-primary);
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
  transition: gap var(--transition);
}
.location-card__link:hover { gap: .625rem; color: var(--clr-primary); }

/* ── 25. CTA Banner ───────────────────────────────────────────────────── */
.cta-banner {
  background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-soft) 100%);
  border-radius: var(--radius-lg);
  padding: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  box-shadow: var(--shadow-lg);
}
.cta-banner__text h2 {
  color: var(--clr-white);
  margin-bottom: .5rem;
  font-size: clamp(1.375rem, 3vw, 2rem);
}
.cta-banner__text p {
  color: rgba(255,255,255,.65);
  font-size: 1.0625rem;
}
.cta-banner__actions {
  display: flex;
  gap: 1rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cta-banner .btn-outline {
  color: var(--clr-white);
  border-color: rgba(255,255,255,.3);
}
.cta-banner .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.5);
  color: var(--clr-white);
}
.cta-banner--image {
  position: relative;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.cta-banner--image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,var(--cta-overlay,.5));
  z-index: 0;
}
.cta-banner--image .cta-banner__text,
.cta-banner--image .cta-banner__actions,
.cta-banner--image > .btn,
.cta-banner--image > a {
  position: relative;
  z-index: 1;
}

/* ── 26. Homepage Responsive ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .carousel-slide { flex: 0 0 calc(50% - .625rem); }
  .cta-banner { padding: 2.5rem; }
}

@media (max-width: 768px) {
  .section { padding: 2.5rem 0; }
  .section.section--listings { padding: 1.5rem 0 2.5rem; }

  :root { --container-pad: 1.5rem; }

  .hero { min-height: 420px; padding: 2.25rem 0 1.75rem; }
  .hero__inner { gap: 1.75rem; align-items: stretch; }
  .hero__title { font-size: clamp(1.625rem, 6vw, 2.5rem); }
  .hero__subtitle { font-size: .9375rem; }
  .hero-search {
    flex-direction: column;
    align-items: stretch;
    padding: 1rem;
    gap: .75rem;
    max-width: 100%;
  }
  .hero-search__fields { flex-direction: column; gap: .625rem; }
  .hero-search__field  { min-width: 100%; }
  .hero-search__btn    { width: 100%; justify-content: center; }
  .hero-stats          { gap: 1.5rem; max-width: 100%; }
  .hero-stat__number   { font-size: 1.375rem; }
  .hero-stat__label    { font-size: .75rem; }

  .page-hero--manufacturer,
  .page-hero--category { padding: 2rem 0; }
  .page-hero__title { font-size: clamp(1.5rem, 5.5vw, 2.25rem); }
  .page-hero__subtitle { font-size: .9375rem; }

  .carousel-slide { flex: 0 0 calc(100% - 0rem); min-width: 0; }
  .carousel-btn   { display: none; }

  .category-blocks { grid-template-columns: 1fr; }
  .brands-grid     { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .locations-grid  { grid-template-columns: 1fr; }

  .cta-banner {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }
  .cta-banner__actions { justify-content: center; }

  .section-header { flex-direction: column; align-items: flex-start; }
  .section-header--center { align-items: center; text-align: center; }
}

@media (max-width: 480px) {
  .hero__title    { font-size: 1.5rem; }
  .hero__inner    { gap: 1.25rem; }
  .hero-stat__number { font-size: 1.25rem; }
  .brands-grid    { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .brand-card__footer { flex-direction: column; align-items: flex-start; gap: .35rem; }
  .section        { padding: 2rem 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Hero Background Types
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Shared bg base ───────────────────────────────────────────────────── */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Gradient (default) */
.hero__bg--gradient {
  background:
    radial-gradient(ellipse at 75% 30%, rgba(26,35,64,.8) 0%, transparent 60%),
    radial-gradient(ellipse at 20% 80%, rgba(188,24,42,.08) 0%, transparent 50%),
    var(--clr-dark);
}

/* Static image */
.hero__bg--image {
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Self-hosted video */
.hero__bg--video {
  overflow: hidden;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Videos don't play on most mobile browsers — poster handles it */
}

/* YouTube iframe */
.hero__bg--youtube {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--clr-dark);
}
.hero__youtube-iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%) scale(1.2);
  border: none;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease;
}
.hero__youtube-iframe.is-loaded {
  opacity: 1;
}

/* Overlay sits above bg, below content */
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Content above everything */
.hero__inner {
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  .hero__bg--youtube {
    background: var(--clr-dark);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Location page, Page template, 404
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Location hero ────────────────────────────────────────────────────── */
.location-hero {
  background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-soft) 100%);
  padding: 3.5rem 0;
  color: var(--clr-white);
}
.location-hero__inner {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 3rem;
  align-items: center;
}
.location-hero__label {
  font-size: .8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--clr-primary);
  margin-bottom: .375rem;
}
.location-hero__title {
  color: var(--clr-white);
  margin-bottom: 1.5rem;
}
.location-hero__details {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.75rem;
}
.location-hero__details li {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1rem;
  color: rgba(255,255,255,.8);
}
.location-hero__details a {
  color: rgba(255,255,255,.9);
  transition: color var(--transition);
}
.location-hero__details a:hover { color: var(--clr-white); }

/* Map */
.location-hero__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 320px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}
.location-map-iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.location-map-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--transition), background var(--transition);
  padding: 1.5rem;
  text-align: center;
}
.location-map-placeholder:hover {
  color: var(--clr-white);
  background: rgba(255,255,255,.05);
}
.location-map-placeholder span { font-size: 1rem; font-weight: 600; }
.location-map-placeholder small { font-size: .875rem; opacity: .7; }
.location-map-placeholder--empty { cursor: default; }
.location-map-placeholder--empty:hover { color: rgba(255,255,255,.5); background: none; }

.location-page .container { padding-top: 0; }
.location-page .archive-layout { padding-top: 2rem; }

@media (max-width: 900px) {
  .location-hero__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .location-hero__map { height: 260px; }
}

/* ── Location contact block (section-based template) ─────────────────── */
.location-contact {
  display: grid;
  grid-template-columns: 1fr 460px;
  gap: 2.5rem;
  align-items: center;
  margin-bottom: 3rem;
  padding: 2rem 2.5rem;
  background: var(--clr-dark);
  border-radius: var(--radius-lg);
  color: var(--clr-white);
}
.location-contact__details {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin-bottom: 1.5rem;
  list-style: none;
  padding: 0;
}
.location-contact__details li {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: rgba(255,255,255,.8);
}
.location-contact__details a {
  color: rgba(255,255,255,.9);
  transition: color var(--transition);
}
.location-contact__details a:hover { color: var(--clr-white); }
.location-contact__map {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 280px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
}

@media (max-width: 900px) {
  .location-contact {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }
  .location-contact__map { height: 220px; }
}

/* ── Page template (static pages via page.php — no modifier class) ────── */
.page-hero:not(.page-hero--homepage):not(.page-hero--manufacturer):not(.page-hero--category) {
  background: linear-gradient(135deg, var(--clr-dark) 0%, var(--clr-dark-soft) 100%);
  padding: 3rem 0;
}
.page-hero:not(.page-hero--homepage):not(.page-hero--manufacturer):not(.page-hero--category) .page-hero__title {
  color: var(--clr-white);
  margin: 0;
}

.page-content {
  max-width: 800px;
  padding: 3rem 0 5rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--clr-body);
}
.page-content h2 { margin: 2rem 0 1rem; }
.page-content h3 { margin: 1.75rem 0 .75rem; }
.page-content p  { margin-bottom: 1.125rem; }
.page-content ul,
.page-content ol { padding-left: 1.5rem; margin-bottom: 1.125rem; list-style: revert; }
.page-content li { margin-bottom: .375rem; }
.page-content a  { color: var(--clr-primary); text-decoration: underline; }
.page-content img { border-radius: var(--radius-md); margin: 1.5rem 0; }
.page-content blockquote {
  border-left: 4px solid var(--clr-primary);
  margin: 1.5rem 0;
  padding: .75rem 1.25rem;
  background: var(--clr-bg);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic;
  color: var(--clr-muted);
}

/* ── 404 ──────────────────────────────────────────────────────────────── */
.page-404 { padding: 5rem 0; }

.error-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}

.error-404__code {
  font-size: clamp(6rem, 20vw, 10rem);
  font-weight: 900;
  line-height: 1;
  color: var(--clr-border);
  letter-spacing: -.05em;
  margin-bottom: .5rem;
  user-select: none;
}

.error-404__title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  margin-bottom: .875rem;
}

.error-404__desc {
  font-size: 1.0625rem;
  color: var(--clr-muted);
  margin-bottom: 2rem;
  line-height: 1.65;
}

.error-404__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 4rem;
}

.error-404__suggestions { width: 100%; text-align: left; }
.error-404__suggestions-title {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  text-align: center;
  color: var(--clr-muted);
  font-weight: 500;
}

@media (max-width: 480px) {
  .error-404__actions { flex-direction: column; }
  .error-404__actions .btn { width: 100%; justify-content: center; }
}

/* ── Shortcode grid column overrides ──────────────────────────────────── */
.vehicle-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vehicle-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vehicle-grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .vehicle-grid--4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  .vehicle-grid--2,
  .vehicle-grid--3,
  .vehicle-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vehicle-grid--2,
  .vehicle-grid--3,
  .vehicle-grid--4 { grid-template-columns: 1fr; }
}

/* ── 26. Vehicle Comparison ──────────────────────────────────────────── */

/* Compare button — single vehicle page */
.price-box__compare {
  padding: .5rem 1.25rem .75rem;
  border-top: 1px solid var(--clr-border);
}
.compare-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-muted);
  padding: .375rem 0;
  background: none;
  border: none;
  cursor: pointer;
  transition: color var(--transition);
}
.compare-btn svg { flex-shrink: 0; }
.compare-btn:hover { color: var(--clr-dark); }
.compare-btn.is-active { color: var(--clr-primary); }
.compare-btn:disabled { opacity: .4; cursor: not-allowed; }

/* Compare tray — fixed bottom bar */
.compare-tray {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: var(--clr-dark);
  color: var(--clr-white);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.32,.72,0,1);
  padding: .75rem 0;
}
.compare-tray.is-open {
  transform: translateY(0);
}
.compare-tray__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.compare-tray__label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  flex-shrink: 0;
}
.compare-tray__slots {
  display: flex;
  gap: .5rem;
  flex: 1;
  overflow: hidden;
}
.compare-tray__slot {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  padding: .375rem .5rem;
  flex: 1;
  min-width: 0;
  max-width: 220px;
}
.compare-tray__slot--empty {
  border-style: dashed;
  justify-content: center;
  color: rgba(255,255,255,.25);
  font-size: .75rem;
  font-weight: 500;
}
.compare-tray__slot-thumb {
  width: 44px;
  height: 34px;
  object-fit: cover;
  flex-shrink: 0;
}
.compare-tray__slot-thumb-placeholder {
  width: 44px;
  height: 34px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}
.compare-tray__slot-title {
  font-size: .8125rem;
  font-weight: 500;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.compare-tray__slot-remove {
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  line-height: 1;
  transition: color var(--transition);
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}
.compare-tray__slot-remove:hover { color: var(--clr-white); }
.compare-tray__actions {
  display: flex;
  gap: .5rem;
  flex-shrink: 0;
}
.compare-tray__actions .btn { white-space: nowrap; }
/* "Go compare" button disabled state */
#compare-tray-go[aria-disabled="true"] {
  opacity: .4;
  pointer-events: none;
}
/* Tray buttons: dark theme overrides */
.compare-tray .btn-primary {
  background: var(--clr-primary);
  border-color: var(--clr-primary);
  color: #fff;
}
.compare-tray .btn-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--clr-dark);
}
.compare-tray .btn-outline {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: rgba(255,255,255,.75);
}
.compare-tray .btn-outline:hover {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

/* Add tray offset to body when tray is open */
body.compare-tray-open { padding-bottom: 68px; }

/* ── Compare page ── */
.compare-page { padding: 3rem 0 5rem; }
.compare-page__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.compare-page__title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.compare-empty {
  text-align: center;
  padding: 5rem 2rem;
  color: var(--clr-muted);
}
.compare-empty p { font-size: 1.125rem; margin-bottom: 1.5rem; }

.compare-notice {
  background: var(--clr-bg);
  border-left: 3px solid var(--clr-primary);
  padding: .875rem 1.25rem;
  font-size: .9375rem;
  margin-bottom: 1.5rem;
  color: var(--clr-body);
}

/* Scrollable table wrapper */
.compare-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--clr-border);
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 520px;
}
.compare-col--label   { width: 190px; min-width: 140px; }
.compare-col--vehicle { min-width: 200px; }

/* Vehicle header row */
.compare-vehicles-row > th,
.compare-vehicles-row > td {
  padding: 1.25rem 1rem;
  border-bottom: 2px solid var(--clr-dark);
  vertical-align: top;
}
.compare-vehicles-row > th {
  background: var(--clr-bg);
}

/* Vehicle card inside thead */
.compare-vehicle-card {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  position: relative;
  padding-top: 1.5rem; /* space for remove button */
}
.compare-vehicle-card__remove {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--clr-muted);
  transition: color var(--transition);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.compare-vehicle-card__remove:hover { color: var(--clr-primary); }
.compare-vehicle-card__img-wrap {
  aspect-ratio: 16/10;
  overflow: hidden;
}
.compare-vehicle-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity var(--transition);
}
.compare-vehicle-card__img:hover { opacity: .9; }
.compare-vehicle-card__img-placeholder {
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--clr-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-muted);
}
.compare-vehicle-card__mfr {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--clr-muted);
  margin-top: .125rem;
}
.compare-vehicle-card__name {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--clr-dark);
  line-height: 1.35;
}
.compare-vehicle-card__name:hover { color: var(--clr-primary); }
.compare-vehicle-card__price { line-height: 1.25; }
.compare-vehicle-card__price .price-regular,
.compare-vehicle-card__price .price-promo { font-size: 1rem; }
.compare-vehicle-card__actions { margin-top: .25rem; }
.compare-vehicle-card__actions .btn { width: 100%; justify-content: center; }

/* Section header rows */
.compare-section-row > td {
  background: var(--clr-dark);
  color: var(--clr-white);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem 1rem;
}

/* Spec rows */
.compare-row > th,
.compare-row > td {
  padding: .5rem .875rem;
  font-size: .9375rem;
  border-bottom: 1px solid var(--clr-border);
  vertical-align: middle;
}
.compare-row:last-child > th,
.compare-row:last-child > td { border-bottom: none; }
.compare-row > th {
  background: var(--clr-bg);
  font-weight: 500;
  color: var(--clr-muted);
  font-size: .875rem;
}
.compare-row > td {
  font-weight: 500;
  color: var(--clr-dark);
}
.compare-row:nth-child(even) > td { background: var(--clr-bg); }

/* Diff highlighting */
.compare-row--diff > td { background: rgba(188,24,42,.04); }
.compare-row--diff > th { background: rgba(188,24,42,.06); }
.compare-row > td.is-unique {
  color: var(--clr-primary);
  font-weight: 700;
}
.compare-row > td.is-empty { color: var(--clr-muted); font-weight: 400; }

/* Responsive */
@media (max-width: 768px) {
  .compare-tray__label { display: none; }
  .compare-tray__slot { max-width: none; }
  .compare-tray__slot-thumb,
  .compare-tray__slot-thumb-placeholder { width: 36px; height: 28px; }
  .compare-page { padding: 2rem 0 3rem; }
  .compare-page__title { font-size: 1.375rem; }
  body.compare-tray-open { padding-bottom: 72px; }
}
/* Compare speed-dial — always hidden on desktop; shown by media query below */
.compare-fab-wrap { display: none; }

@media (max-width: 480px) {
  /* Hide the full-width bar; speed-dial takes over */
  .compare-tray { display: none !important; }
  body.compare-tray-open { padding-bottom: 80px; }

  /* Speed-dial wrapper — fixed bottom-right, simple positioning */
  .compare-fab-wrap:not([hidden]) {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 300;
  }

  /* ── Circle trigger ─────────────────────────────────────────── */
  .compare-fab__circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--clr-primary);
    border: none;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.35);
    position: relative;
    flex-shrink: 0;
    transition: background var(--transition);
  }
  .compare-fab-wrap.is-open .compare-fab__circle { background: var(--clr-dark); }

  /* Icons: show compare icon by default, close icon when open */
  .compare-fab__icon-cmp  { display: block; }
  .compare-fab__icon-close { display: none; }
  .compare-fab-wrap.is-open .compare-fab__icon-cmp  { display: none; }
  .compare-fab-wrap.is-open .compare-fab__icon-close { display: block; }

  /* Count badge */
  .compare-fab__badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--clr-dark);
    color: #fff;
    font-size: .625rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    line-height: 1;
    border: 2px solid #fff;
  }
  .compare-fab__badge:empty { display: none; }
  .compare-fab-wrap.is-open .compare-fab__badge { display: none; }

  /* ── Menu (options above circle) ────────────────────────────── */
  .compare-fab__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
    margin-bottom: .75rem;
    opacity: 0;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
  }
  .compare-fab-wrap.is-open .compare-fab__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Vehicle slots in menu */
  .compare-fab__menu-slots {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .375rem;
    width: 100%;
  }
  .compare-fab__menu-slot {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--clr-dark);
    color: #fff;
    padding: .4375rem .625rem .4375rem .75rem;
    font-size: .8125rem;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    max-width: calc(100vw - 2rem - 52px - 1rem);
  }
  .compare-fab__menu-slot-name {
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
  }
  .compare-fab__menu-slot-remove {
    color: rgba(255,255,255,.4);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
    transition: color var(--transition);
  }
  .compare-fab__menu-slot-remove:hover { color: #fff; }

  /* Action items (Porównaj / Wyczyść) */
  .compare-fab__action {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding: .5rem .75rem;
    font-size: .8125rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    border: none;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
    white-space: nowrap;
  }
  .compare-fab__action--go {
    background: var(--clr-primary);
    color: #fff;
  }
  .compare-fab__action--clear {
    background: var(--clr-dark);
    color: rgba(255,255,255,.7);
  }
  #compare-fab-go[aria-disabled="true"] { opacity: .45; pointer-events: none; }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG & PORADNIKI
   ═══════════════════════════════════════════════════════════════ */

/* ── Article card ───────────────────────────────────────────── */
.article-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--clr-border);
  transition: box-shadow .2s;
}
.article-card:hover { box-shadow: 0 4px 20px rgba(0,0,0,.08); }

.article-card__image-wrap {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
}
.article-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.article-card:hover .article-card__image { transform: scale(1.04); }
.article-card__image--placeholder {
  width: 100%;
  height: 100%;
  background: var(--clr-border);
}

.article-card__category {
  position: absolute;
  bottom: .625rem;
  left: .625rem;
  padding: .2rem .625rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.4;
  pointer-events: none;
  background: var(--clr-primary);
  color: #fff;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.25rem 1.25rem 1.5rem;
  gap: .625rem;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  color: var(--clr-muted);
}
.article-card__meta-sep { opacity: .5; }

.article-card__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  margin: 0;
}
.article-card__link {
  color: var(--clr-dark);
  text-decoration: none;
}
.article-card__link:hover { color: var(--clr-primary); }

.article-card__excerpt {
  font-size: .875rem;
  color: var(--clr-muted);
  line-height: 1.6;
  margin: 0;
  flex: 1;
}

.article-card__more {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-primary);
  text-decoration: none;
  margin-top: .25rem;
  align-self: flex-start;
}
.article-card__more:hover { color: var(--clr-primary-dark); }
.article-card__more .icon-xs { flex-shrink: 0; }

/* ── Article grid ───────────────────────────────────────────── */
.article-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 2rem;
}
@media (max-width: 1100px) {
  .article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .article-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ── Article archive hero ───────────────────────────────────── */
.article-archive-hero {
  position: relative;
  background: var(--clr-dark);
  color: #fff;
  padding: 4rem 0 3.5rem;
  overflow: hidden;
}
.article-archive-hero--has-image {
  padding: 5rem 0 4rem;
}
.article-archive-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.article-archive-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-archive-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.article-archive-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 700px;
}
.article-archive-hero__eyebrow {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin: 0 0 .75rem;
}
.article-archive-hero__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 700;
  margin: 0 0 .75rem;
  line-height: 1.15;
  color: #fff;
}
.article-archive-hero__subtitle {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.7);
  margin: 0;
  max-width: 560px;
  line-height: 1.6;
}

.article-archive-body { padding: 2.5rem 0 4rem; }

/* ── Category pills nav ─────────────────────────────────────── */
.article-cat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: .5rem;
}
.article-cat-pill {
  display: inline-block;
  padding: .375rem .875rem;
  border: 1px solid var(--clr-border);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--clr-body);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.article-cat-pill:hover,
.article-cat-pill.is-active {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}

/* ── Pagination ─────────────────────────────────────────────── */
.article-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .375rem;
  margin-top: 3rem;
}
.article-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .625rem;
  border: 1px solid var(--clr-border);
  font-size: .875rem;
  font-weight: 600;
  color: var(--clr-body);
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.article-pagination .page-numbers:hover,
.article-pagination .page-numbers.current {
  background: var(--clr-primary);
  color: #fff;
  border-color: var(--clr-primary);
}
.article-pagination .page-numbers.dots {
  border-color: transparent;
  pointer-events: none;
}

.article-no-results {
  padding: 3rem 0;
  color: var(--clr-muted);
  text-align: center;
}

/* ── Single article hero ────────────────────────────────────── */
.single-article-hero {
  position: relative;
  background: var(--clr-dark);
  color: #fff;
  padding: 4rem 0 3.5rem;
  overflow: hidden;
}
.single-article-hero--has-image {
  min-height: 420px;
  display: flex;
  align-items: flex-end;
  padding: 5rem 0 3.5rem;
}

.single-article-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.single-article-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.single-article-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(17,17,17,.85) 0%,
    rgba(17,17,17,.55) 50%,
    rgba(17,17,17,.35) 100%
  );
}

.single-article-hero__inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
}

.single-article-hero__breadcrumb {
  font-size: .8125rem;
  color: rgba(255,255,255,.5);
  margin-bottom: 1.25rem;
}
.single-article-hero__breadcrumb a {
  color: rgba(255,255,255,.6);
  text-decoration: none;
}
.single-article-hero__breadcrumb a:hover { color: #fff; }
.single-article-hero__breadcrumb span { margin: 0 .25rem; }

.single-article-hero__cat {
  display: inline-block;
  padding: .25rem .75rem;
  background: var(--clr-primary);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  margin-bottom: 1rem;
}
.single-article-hero__cat:hover { background: var(--clr-primary-dark); }

.single-article-hero__title {
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 1rem;
  color: #fff;
}

.single-article-hero__meta {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  color: rgba(255,255,255,.6);
}

/* ── Article body ───────────────────────────────────────────── */
.single-article-body {
  padding: 3rem 0 4rem;
  display: flex;
  justify-content: center;
}
.single-article-content {
  width: 100%;
  max-width: 720px;
}

/* WP editor content styles */
.single-article-content h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
  color: var(--clr-dark);
}
.single-article-content h3 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2rem 0 .875rem;
  color: var(--clr-dark);
}
.single-article-content h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  margin: 1.75rem 0 .75rem;
}
.single-article-content p {
  line-height: 1.75;
  margin: 0 0 1.25rem;
  color: var(--clr-body);
}
.single-article-content ul,
.single-article-content ol {
  padding-left: 1.5rem;
  margin: 0 0 1.25rem;
  line-height: 1.75;
  color: var(--clr-body);
}
.single-article-content li { margin-bottom: .375rem; }
.single-article-content a {
  color: var(--clr-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.single-article-content a:hover { color: var(--clr-primary-dark); }
.single-article-content blockquote {
  margin: 2rem 0;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--clr-primary);
  background: var(--clr-bg);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--clr-body);
}
.single-article-content blockquote p { margin: 0; }
.single-article-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.5rem auto;
}
.single-article-content figure { margin: 2rem 0; }
.single-article-content figcaption {
  font-size: .8125rem;
  color: var(--clr-muted);
  text-align: center;
  margin-top: .5rem;
}
.single-article-content hr {
  border: none;
  border-top: 1px solid var(--clr-border);
  margin: 2.5rem 0;
}
.single-article-content pre,
.single-article-content code {
  font-family: 'Courier New', monospace;
  font-size: .875rem;
  background: var(--clr-bg);
  border: 1px solid var(--clr-border);
}
.single-article-content pre {
  padding: 1rem 1.25rem;
  overflow-x: auto;
  margin: 0 0 1.25rem;
}
.single-article-content code { padding: .125rem .375rem; }
.single-article-content pre code {
  background: none;
  border: none;
  padding: 0;
}
.single-article-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: 0 0 1.5rem;
}
.single-article-content th,
.single-article-content td {
  padding: .625rem .875rem;
  border: 1px solid var(--clr-border);
  text-align: left;
}
.single-article-content th {
  background: var(--clr-bg);
  font-weight: 700;
  color: var(--clr-dark);
}
.single-article-content tr:nth-child(even) td { background: var(--clr-bg); }

/* ── Post navigation ────────────────────────────────────────── */
.single-article-nav {
  display: flex;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--clr-border);
}
.single-article-nav__link {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  text-decoration: none;
  padding: 1rem;
  border: 1px solid var(--clr-border);
  transition: border-color .15s;
}
.single-article-nav__link:hover { border-color: var(--clr-primary); }
.single-article-nav__link--next { text-align: right; }
.single-article-nav__dir {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.single-article-nav__label {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--clr-dark);
  line-height: 1.4;
}
.single-article-nav__link:hover .single-article-nav__label {
  color: var(--clr-primary);
}

/* ── Related articles ───────────────────────────────────────── */
.related-articles {
  background: var(--clr-bg);
  padding: 3.5rem 0 4rem;
  border-top: 1px solid var(--clr-border);
}
.related-articles__title {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 0;
  color: var(--clr-dark);
}
.related-articles .article-grid { margin-top: 1.75rem; }

/* ── Responsive: single article ────────────────────────────── */
@media (max-width: 768px) {
  .single-article-hero { padding: 2.5rem 0 2.5rem; }
  .single-article-hero--has-image { min-height: 320px; padding: 3.5rem 0 2.5rem; }
  .single-article-body { padding: 2rem 0 3rem; }
  .single-article-nav { flex-direction: column; }
  .single-article-nav__link--next { text-align: left; }
  .article-archive-hero { padding: 2.5rem 0 2.5rem; }
}

/* ── Contact form section (contact_form type in page-contact.php) ─────── */
.section--contact-form { background: var(--clr-bg); padding: 4rem 0; }

.contact-form-wrap {
  max-width: 640px;
  margin: 0 auto;
}

.contact-form-header {
  text-align: center;
  margin-bottom: 2rem;
}

.contact-form-header__title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--clr-dark);
  margin: 0 0 .75rem;
}

.contact-form-header__subtitle {
  font-size: 1.0625rem;
  color: var(--clr-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}
.contact-form-header__subtitle p { margin-bottom: .5rem; }

.contact-form-header__details {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 1.5rem;
}
.contact-form-header__details li {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: 1rem;
  color: var(--clr-body);
}
.contact-form-header__details a {
  color: var(--clr-body);
  transition: color var(--transition);
}
.contact-form-header__details a:hover { color: var(--clr-primary); }

@media (max-width: 768px) {
  .section--contact-form { padding: 2.5rem 0; }
}

/* ── USP section ─────────────────────────────────────────────────────────── */
.section--usp { padding: 4rem 0; }

.usp-grid {
  display: grid;
  gap: 2.5rem 3rem;
  align-items: start;
}
.usp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.usp-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }

.usp-heading { display: flex; align-items: flex-start; }
.usp-heading__text {
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--clr-dark);
  margin: 0;
}

.usp-item { display: flex; gap: .875rem; align-items: flex-start; }
.usp-item__icon { width: 28px; height: 28px; flex-shrink: 0; color: var(--clr-dark); margin-top: .125rem; }
.usp-item__title { font-size: 1.0625rem; font-weight: 700; color: var(--clr-dark); margin: 0 0 .4rem; }
.usp-item__desc { color: var(--clr-body); line-height: 1.65; font-size: .9375rem; margin: 0; }
.usp-item__desc p { margin: 0 0 .5em; }
.usp-item__desc p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .usp-grid--cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .usp-grid--cols-3,
  .usp-grid--cols-2 { grid-template-columns: 1fr; }
  .section--usp { padding: 2.5rem 0; }
}