/* ==========================================================================
   Cocoon Vehicles — Design System
   Brand: navy #003446 / gold #FEC20A — pulled directly from the live
   cocoonvehicles.co.uk site (nav buttons, links, headings all use #003446;
   the gold Apply-Here button is an exact match at #FEC20A already).
   ========================================================================== */

:root {
  --navy: #003446;
  --navy-deep: #00232f;
  --navy-mid: #004b65;
  --orange: #FEC20A;
  --orange-dark: #e3aa00;
  --cream: #f7f5f1;
  --white: #ffffff;
  /* Page background — a touch off-white so the many white cards (vehicle
     cards, filter panel, info cards, etc.) actually stand out from the
     page behind them, rather than blending into a flat white canvas. */
  --bg-page: #f4f5f7;
  --text: #1d2635;
  --muted: #687386;
  --border: #dfe4ea;
  --success: #1c7c4d;
  --success-bg: #eaf7ef;
  --danger: #c0392b;
  /* Secondary/neutral palette (utility greys, not the primary brand colours) */
  --p-slate: #5E667A;
  --p-charcoal: #54595F;
  --p-grey: #7A7A7A;
  --p-navy-grey: #474D5C;
  --p-mint: #C3E6E0;
  --p-sage: #90B9B7;
  --p-lime: #CFE979;
  --p-sky: #E7F4FB;
  --p-steel: #A0BCC4;
  --p-cloud: #D7D8DA;
  --shadow-sm: 0 2px 10px rgba(16,26,46,.06);
  --shadow-md: 0 12px 30px rgba(16,26,46,.10);
  --shadow-lg: 0 24px 60px rgba(16,26,46,.16);
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --container: 1440px;
  --header-h: 76px;
  --transition: 200ms cubic-bezier(.4,0,.2,1);
  color-scheme: light;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg-page);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Several components (.btn, .quote-footer, …) set their own explicit
   `display` value, which — being an author rule — silently wins over the
   browser's built-in `[hidden] { display: none }` at equal specificity.
   Concretely this was leaving the quote form's "Back" button visible (but
   inert) on step 1, and its Back/Continue footer visible under the success
   message. This one rule makes the `hidden` attribute reliably hide
   anything, everywhere, regardless of what else styles that element. */
[hidden] { display: none !important; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; color: var(--navy); letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
ul, ol { padding-left: 1.2em; }
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--orange); color: var(--navy); padding: 10px 16px; z-index: 10000; font-weight: 700; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid rgba(254,194,10,.55); outline-offset: 2px; }
section.section { padding: 88px 0; }
.section-narrow { padding: 56px 0; }
.section-alt { background: var(--cream); }
.section-navy { background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: rgba(255,255,255,.92); }
.section-navy h2, .section-navy h3 { color: #fff; }
.eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 800; font-size: .78rem; color: var(--orange-dark); margin-bottom: 10px; }
.section-navy .eyebrow { color: var(--orange); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 62ch; }
.section-navy .lead { color: rgba(255,255,255,.82); }
.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 24px; border-radius: 999px; font-weight: 800; font-size: .96rem;
  text-decoration: none; border: 2px solid transparent; cursor: pointer;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--orange); color: var(--navy); border-color: var(--orange); box-shadow: 0 10px 24px rgba(254,194,10,.28); }
.btn-primary:hover { background: var(--orange-dark); border-color: var(--orange-dark); }
.btn-outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.section-navy .btn-outline { color: #fff; border-color: rgba(255,255,255,.6); }
.section-navy .btn-outline:hover { background: #fff; color: var(--navy); }
.btn-ghost { background: rgba(27,67,80,.06); color: var(--navy); border-color: transparent; }
.btn-ghost:hover { background: rgba(27,67,80,.12); }
.btn-whatsapp { background: #25D366; color: #06301a; border-color: #25D366; }
.btn-whatsapp:hover { background: #1ebd58; }
.btn-sm { padding: 10px 18px; font-size: .86rem; }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; }

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 500; background: rgba(255,255,255,.94);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--border);
  height: var(--header-h);
}
.header-inner { max-width: var(--container); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 24px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 40px; width: auto; }
.main-nav { display: none; align-items: center; gap: 4px; margin-right: auto; }
.nav-item { position: relative; }
.nav-link {
  display: flex; align-items: center; gap: 6px; background: none; border: 0; cursor: pointer;
  padding: 10px 14px; font-weight: 700; font-size: .93rem; color: var(--navy); border-radius: 10px;
  transition: background var(--transition); text-decoration: none;
}
.nav-link:hover, .nav-item.open .nav-link { background: rgba(27,67,80,.07); }
.nav-item svg { transition: transform var(--transition); opacity: .6; }
.nav-item.open svg { transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 260px;
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); padding: 10px; display: grid; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition);
}
.nav-item.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { padding: 10px 12px; border-radius: 8px; font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--text); }
.dropdown a:hover { background: var(--cream); color: var(--navy); }
.header-cta { display: none; align-items: center; gap: 10px; flex-shrink: 0; }
.header-finder-cta { display: none; }
@media (min-width: 1240px) { .header-finder-cta { display: inline-flex; } }

.menu-toggle {
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 10px;
  background: #fff; cursor: pointer; margin-left: auto;
}
.menu-toggle span { display: block; width: 20px; height: 2px; background: var(--navy); margin: 0 auto; transition: transform var(--transition), opacity var(--transition); }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1080px) {
  .main-nav { display: flex; }
  .header-cta { display: flex; }
  .menu-toggle { display: none; }
}

/* Mobile off-canvas menu — fixed, high z-index, above all content, own scroll */
.mobile-menu-backdrop {
  position: fixed; inset: 0; background: rgba(15,25,38,.5); z-index: 998;
  opacity: 0; visibility: hidden; transition: opacity var(--transition);
}
.mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(88vw, 380px); z-index: 999;
  background: #fff; box-shadow: -10px 0 40px rgba(0,0,0,.2);
  transform: translateX(100%); transition: transform 260ms cubic-bezier(.4,0,.2,1);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
body.menu-open .mobile-menu { transform: translateX(0); }
body.menu-open .mobile-menu-backdrop { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.mobile-menu-inner { padding: 18px 20px 40px; min-height: 100%; }
.mmenu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.mmenu-top img { height: 32px; }
.menu-close { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--navy); }
.mnav-featured { display: grid; gap: 8px; margin-bottom: 6px; }
.mnav-featured a { display: block; text-align: center; padding: 12px 14px; border-radius: 10px; font-weight: 800; text-decoration: none; background: var(--orange); color: var(--navy); }
.mnav-featured a:nth-child(2), .mnav-featured a:nth-child(3) { background: rgba(27,67,80,.07); color: var(--navy); }
.mnav-group { border-top: 1px solid var(--border); padding: 0; }
.mnav-group summary { list-style: none; cursor: pointer; padding: 14px 0; display: flex; justify-content: space-between; align-items: center; }
.mnav-group summary::-webkit-details-marker { display: none; }
.mnav-group summary::after { content: "+"; color: var(--muted); font-size: 1.1rem; }
.mnav-group[open] summary::after { content: "−"; }
.mnav-heading { text-transform: uppercase; font-size: .74rem; letter-spacing: .1em; font-weight: 800; color: var(--muted); margin: 0; }
.mnav-group-links { padding-bottom: 10px; }
.mnav-group a { display: block; padding: 9px 0; font-weight: 700; text-decoration: none; color: var(--navy); }
.mnav-actions { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 1080px) { .mobile-menu, .mobile-menu-backdrop { display: none; } }

/* ==========================================================================
   Homepage hero slides (100vh)
   ========================================================================== */
.hero-slide {
  min-height: 100svh; display: flex; align-items: center; position: relative;
  padding: calc(var(--header-h) + 32px) 0 48px;
}
.hero-slide-1 {
  /* Flexigo's own header photo removed — this was pointed at a
     flexigo-branded image and shouldn't ship under Cocoon's name.
     Placeholder navy gradient until Rhys supplies a real Cocoon hero photo. */
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  color: #fff; justify-content: center;
}
.hero-slide-1 .hero-copy { text-align: center; max-width: 760px; margin: 0 auto 34px; }
.hero-logo { display: block; margin: 0 auto 18px; height: 44px; width: auto; max-width: 200px; object-fit: contain; }
.hero-slide-1 h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.2rem); }
.hero-slide-1 .lead { color: rgba(255,255,255,.86); margin: 0 auto; }
.hero-badges { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.hero-badge { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28); padding: 8px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; }
.scroll-cue { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.75); font-size: .8rem; text-align: center; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translate(-50%,0);} 50% { transform: translate(-50%,8px);} }

/* Mobile hero: the quote form is the reason people land here — trim the
   surrounding copy/decoration so it reads as the main event, not one of
   several competing things, on small screens. Nothing here is removed on
   larger viewports. */
@media (max-width: 640px) {
  .hero-slide-1 { padding-top: calc(var(--header-h) + 14px); padding-bottom: 22px; min-height: 0; }
  .hero-slide-1 .hero-copy { margin-bottom: 16px; }
  .hero-logo { height: 34px; margin-bottom: 10px; }
  .hero-slide-1 .eyebrow { font-size: .68rem; margin-bottom: 6px; }
  .hero-slide-1 h1 { font-size: 1.5rem; line-height: 1.2; margin-bottom: 8px; }
  .hero-slide-1 .lead { display: none; }
  .hero-badges { display: none; }
  .scroll-cue { display: none; }
}

.hero-slide-alt { padding-top: calc(var(--header-h) + 56px); padding-bottom: 56px; }
.hero-slide-2 { background: var(--p-lime); }
.hero-slide-3 { background: var(--p-sage); }
.hero-slide-3 .lead, .hero-slide-3 p:not(.eyebrow) { color: rgba(18,32,38,.78); }
.hero-slide-4 { background: var(--p-sky); }
.hero-slide-5 { background: linear-gradient(135deg, var(--p-navy-grey), var(--navy-deep)); }
.hero-grid { display: grid; gap: 44px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero-grid.reverse .hero-media { order: -1; }
.hero-media img { border-radius: var(--radius-lg); width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
.hero-phone { font-size: 1.5rem; font-weight: 900; color: var(--navy); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.hero-phone small { display: block; font-weight: 600; font-size: .75rem; color: var(--muted); }
.check-list { list-style: none; padding: 0; margin: 20px 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.check-list li::before { content: "✓"; flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--orange); color: var(--navy); display: grid; place-items: center; font-size: .78rem; font-weight: 900; }

.showcase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 760px) { .showcase-grid { grid-template-columns: repeat(4, 1fr); } }
.showcase-card { background: #fff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); text-align: center; transition: transform var(--transition), box-shadow var(--transition); }
.showcase-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.showcase-card img { aspect-ratio: 4/3; object-fit: contain; background: var(--cream); padding: 18px; }
.showcase-card p { margin: 12px 0; font-weight: 800; color: var(--navy); }

/* ==========================================================================
   Multistep Quote Form
   ========================================================================== */
.quote-widget {
  background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  max-width: 460px; margin: 0 auto; overflow: hidden; text-align: left; color: var(--text);
  font-size: 14px;
}
@media (min-width: 900px) { .quote-widget { max-width: 640px; } }
@media (min-width: 1240px) { .quote-widget { max-width: 700px; } }
.quote-progress-wrap { padding: 14px 22px 0; }
.quote-progress-meta { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.quote-progress { height: 5px; border-radius: 999px; background: #edf0f4; overflow: hidden; }
.quote-progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--orange), #ff9a4c); transition: width 280ms ease; }
.quote-body { padding: 16px 22px 6px; min-height: 260px; }
.quote-step h2 { font-size: .98rem; margin-bottom: 3px; font-weight: 800; }
.quote-step .step-help { color: var(--muted); margin-bottom: 12px; font-size: .78rem; }
.quote-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; max-height: 340px; overflow-y: auto; padding: 2px; }
@media (min-width: 620px) { .quote-options.cols-3 { grid-template-columns: repeat(3, 1fr); } }
.quote-option {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 8px 10px; text-align: left;
  background: #fff; cursor: pointer; font-weight: 700; font-size: .78rem; color: var(--text);
  transition: all var(--transition); position: relative;
}
.quote-option small { display: block; font-weight: 500; color: var(--muted); margin-top: 2px; font-size: .68rem; }
.quote-option:hover { border-color: var(--orange); transform: translateY(-1px); }
.quote-option[aria-pressed="true"] { border-color: var(--orange); background: #fff9e6; box-shadow: 0 0 0 3px rgba(254,194,10,.18); }
.quote-option[aria-pressed="true"]::after { content: "✓"; position: absolute; top: 6px; right: 6px; width: 16px; height: 16px; background: var(--orange); color: var(--navy); border-radius: 50%; display: grid; place-items: center; font-size: .6rem; }
.quote-field { margin-bottom: 12px; }
.quote-field label { display: block; font-weight: 700; margin-bottom: 5px; font-size: .78rem; }
/* :not([type=radio]):not([type=checkbox]) matters here — the Personal/
   Business radios (and the consent/marketing checkboxes) live nested
   inside a .quote-field, and this descendant selector was catching them
   too: appearance:none plus width:100%/padding turned each radio into an
   invisible, oddly-shaped hit area that wouldn't register clicks at all,
   not just "unhighlighted" as first reported. */
.quote-field input:not([type="radio"]):not([type="checkbox"]), .quote-field select {
  width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px; background: #fff;
  font-family: inherit; color: var(--text); appearance: none; -webkit-appearance: none;
}
.quote-field select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23687386' stroke-width='2'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 30px;
}
.quote-field input:not([type="radio"]):not([type="checkbox"]):focus, .quote-field select:focus { border-color: var(--orange); }
.quote-checkbox { display: flex; gap: 8px; align-items: flex-start; font-size: .74rem; color: var(--muted); }

/* Showroom carousel (/showroom/) — reuses stock.js's initStock() and its
   .vehicle-card markup unchanged; only the wrapper it renders into
   (#stock-grid > .vehicle-grid) is retargeted from a wrapping grid to a
   horizontally-scrolling, snapping strip, dressed up as a shopfront window. */
.showroom-window { background: linear-gradient(180deg, #eef6fb 0%, #fff 45%); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 4px 4px 22px; overflow: hidden; }
.showroom-window-bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px 10px; }
.showroom-open-badge { background: var(--navy); color: var(--orange); font-weight: 800; font-size: .7rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.showroom-window-caption { font-size: .82rem; color: var(--muted); font-weight: 600; }
.showroom-carousel-wrap { position: relative; padding: 4px 46px; }
/* stock.js's initStock() writes '<div class="vehicle-grid">'+cards+'</div>'
   straight into #stock-grid — this is that inner div, retargeted from a
   wrapping grid into a horizontally-scrolling, snapping strip. */
#stock-grid .vehicle-grid { display: flex; flex-wrap: nowrap; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 14px; scrollbar-width: thin; }
#stock-grid .vehicle-grid .vehicle-card { flex: 0 0 280px; scroll-snap-align: start; }
@media (max-width: 600px) { #stock-grid .vehicle-grid .vehicle-card { flex-basis: 240px; } .showroom-carousel-wrap { padding: 4px 8px; } .showroom-nav { display: none; } }
.showroom-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--border); background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); font-size: 1.3rem; line-height: 1; color: var(--navy); cursor: pointer; display: grid; place-items: center; }
.showroom-nav-prev { left: 2px; }
.showroom-nav-next { right: 2px; }
.showroom-nav:hover { background: var(--cream); }
.showroom-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 22px; }

/* Multistep quote form (/quote/) */
.quote-progress { margin-bottom: 22px; }
.quote-progress-steps { display: flex; justify-content: space-between; gap: 6px; margin-bottom: 10px; }
.quote-progress-step { flex: 1; text-align: center; font-size: .72rem; font-weight: 800; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.quote-progress-step::before { content: attr(data-step-label); width: 26px; height: 26px; border-radius: 50%; background: var(--cream); color: var(--muted); display: grid; place-items: center; font-size: .78rem; }
.quote-progress-step.is-active { color: var(--navy); }
.quote-progress-step.is-active::before { background: var(--orange); color: var(--navy); }
.quote-progress-step.is-done::before { background: var(--navy); color: #fff; }
.quote-progress-step small { font-weight: 600; font-size: .68rem; color: inherit; display: none; }
@media (min-width: 560px) { .quote-progress-step small { display: block; } }
.quote-progress-bar { height: 6px; border-radius: 4px; background: var(--cream); overflow: hidden; }
.quote-progress-bar-fill { height: 100%; background: var(--orange); border-radius: 4px; width: 0%; transition: width .25s ease; }
fieldset.quote-step { border: none; margin: 0; padding: 0; display: none; }
fieldset.quote-step.is-active { display: block; animation: quoteStepIn .2s ease; }
@keyframes quoteStepIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.quote-step-title { font-size: 1.05rem; font-weight: 800; color: var(--navy); padding: 0; margin: 0 0 14px; width: 100%; }
.quote-step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.quote-step-nav button { min-width: 96px; }
.quote-radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.quote-radio {
  display: flex; gap: 6px; align-items: center; font-size: .84rem; font-weight: 700; color: var(--text); cursor: pointer;
  border: 1.5px solid var(--border); border-radius: 999px; padding: 8px 16px; background: #fff; transition: all var(--transition);
}
.quote-radio input { width: auto; accent-color: var(--navy); }
.quote-radio:hover { border-color: var(--navy); }
/* Highlights the pill the customer actually picked — plain radio buttons
   on their own didn't read as "selected" clearly enough, per Rhys.
   :has() covers it with no JS; the matching class toggle in
   bindVehiclePageEvents is the fallback for browsers without :has(). */
.quote-radio:has(input:checked), .quote-radio.active {
  border-color: var(--orange); background: #fff9e6; box-shadow: 0 0 0 3px rgba(254,194,10,.18);
}
.quote-search { width: 100%; padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border); margin-bottom: 10px; font-size: 14px; }
.quote-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 22px 20px; border-top: 1px solid #edf0f4; }
.quote-footer-right { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.quote-footer .btn { font-size: .82rem; padding: 10px 18px; }
.quote-slider-value { font-weight: 800; color: var(--navy); font-size: .92rem; margin-top: 4px; }
input[type="range"] { width: 100%; accent-color: var(--orange); }
.quote-summary-card { background: var(--navy); color: #fff; border-radius: 12px; padding: 18px; text-align: center; margin-bottom: 14px; }
.quote-summary-card h3 { color: #fff; font-size: 1rem; }
.quote-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.quote-chips li { background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px; font-size: .7rem; font-weight: 700; }
.quote-success { text-align: center; padding: 20px 6px; }
.quote-success .tick { width: 52px; height: 52px; border-radius: 50%; background: var(--success-bg); color: var(--success); display: grid; place-items: center; margin: 0 auto 12px; font-size: 1.5rem; }

/* Preferred-brand picker — collapsed by default (progress-disclosure, keeps
   step 1 short) and built from toggle-chip buttons rather than checkboxes.
   Checkboxes were tested twice and still read as unclear/unresponsive to
   users; a filled/outlined button with a checkmark badge mirrors the
   .quote-option pattern already used elsewhere in this form, so selected vs
   not is obvious at a glance and the tap target is much larger on mobile. */
.quote-brand-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; background: #fff;
  font-family: inherit; font-weight: 700; font-size: .82rem; color: var(--text); cursor: pointer;
  text-align: left; transition: border-color var(--transition);
}
.quote-brand-toggle:hover { border-color: var(--orange); }
.quote-brand-toggle small { font-weight: 500; color: var(--muted); }
.quote-brand-toggle-state { display: flex; align-items: center; gap: 6px; font-size: .74rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.quote-brand-toggle-state svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform var(--transition); }
.quote-brand-toggle[aria-expanded="true"] .quote-brand-toggle-state svg { transform: rotate(180deg); }
.quote-brand-panel { border: 1px solid var(--border); border-radius: 8px; background: var(--cream); padding: 10px; margin-top: 8px; max-height: 260px; overflow-y: auto; }
.quote-brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (min-width: 620px) { .quote-brand-grid { grid-template-columns: repeat(3, 1fr); } }
.quote-brand-chip {
  border: 1.5px solid var(--border); border-radius: 8px; padding: 10px 8px; text-align: center;
  background: #fff; cursor: pointer; font-weight: 700; font-size: .76rem; color: var(--text);
  font-family: inherit; transition: all var(--transition); position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 40px;
}
.quote-brand-chip:hover { border-color: var(--orange); transform: translateY(-1px); }
.quote-brand-chip[aria-pressed="true"] {
  border-color: var(--orange); background: #fff9e6; color: var(--navy);
  box-shadow: 0 0 0 3px rgba(254,194,10,.18); padding-right: 22px;
}
.quote-brand-chip[aria-pressed="true"]::after {
  content: "✓"; position: absolute; top: 4px; right: 4px; width: 15px; height: 15px;
  background: var(--orange); color: var(--navy); border-radius: 50%; display: grid;
  place-items: center; font-size: .58rem; font-weight: 900;
}

/* Sitemap page — grouped sections */
.sitemap-grid { display: grid; grid-template-columns: 1fr; gap: 36px; }
@media (min-width: 700px) { .sitemap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sitemap-grid { grid-template-columns: repeat(3, 1fr); } }
.sitemap-group h2 { font-size: 1.05rem; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--orange); }
.sitemap-group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sitemap-group li a { font-size: .88rem; color: var(--text); text-decoration: none; }
.sitemap-group li a:hover { color: var(--orange); text-decoration: underline; }

/* ==========================================================================
   Cards / grids / generic content blocks
   ========================================================================== */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2,1fr); }
@media (min-width: 700px) { .grid-2 { grid-template-columns: repeat(2,1fr); } .grid-3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width: 960px) { .grid-4 { grid-template-columns: repeat(4,1fr); } }

.info-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 26px; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.info-card .icon { font-size: 1.6rem; margin-bottom: 10px; display: inline-block; }

.tile-card { display: block; text-decoration: none; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); transition: all var(--transition); }
.tile-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--orange); }
.tile-card .tile-img { aspect-ratio: 16/10; background: var(--cream); display: grid; place-items: center; padding: 20px; }
.tile-card .tile-img img { max-height: 60px; object-fit: contain; }
.tile-card .tile-body { padding: 16px 18px; }
.tile-card h3 { margin: 0 0 4px; font-size: 1rem; }
.tile-card p { margin: 0; font-size: .84rem; color: var(--muted); }

/* Page hero (non-homepage) */
.page-hero {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy)); color: #fff;
  padding: calc(var(--header-h) + 48px) 0 60px;
}
.page-hero h1 { color: #fff; }
.page-hero .lead { color: rgba(255,255,255,.85); }
.page-hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.6); }
.page-hero .btn-outline:hover { background: #fff; color: var(--navy); }
.page-hero .eyebrow { color: var(--orange); }
.page-hero .breadcrumbs-dark a:hover { color: #fff; }
.hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

.breadcrumbs { padding: 14px 0; font-size: .82rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; color: var(--muted); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--border); }
.breadcrumbs a { text-decoration: none; color: var(--muted); font-weight: 600; }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumbs-dark { color: rgba(255,255,255,.7); }
.breadcrumbs-dark ol { color: rgba(255,255,255,.7); }
.breadcrumbs-dark a { color: rgba(255,255,255,.85); }

/* FAQ */
.faq-list { display: grid; gap: 12px; max-width: 880px; }
.faq-item { border: 1px solid var(--border); border-radius: 12px; padding: 4px 20px; background: #fff; }
.faq-item summary { cursor: pointer; font-weight: 800; padding: 16px 0; color: var(--navy); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--orange-dark); flex-shrink: 0; }
.faq-item[open] summary::after { content: "−"; }
.faq-answer { padding: 0 0 18px; color: var(--muted); }
.faq-answer p:last-child { margin-bottom: 0; }

/* Stat strip */
.stat-strip { display: grid; grid-template-columns: repeat(2,1fr); gap: 24px; text-align: center; }
@media (min-width: 760px) { .stat-strip { grid-template-columns: repeat(4,1fr); } }
.stat-strip .stat b { display: block; font-size: 2.1rem; font-weight: 900; color: var(--orange); }
.stat-strip .stat span { font-size: .84rem; color: rgba(255,255,255,.75); font-weight: 700; }

/* Steps */
.steps-list { counter-reset: step; display: grid; gap: 20px; }
@media (min-width: 760px) { .steps-list { grid-template-columns: repeat(3,1fr); } }
.step-card { position: relative; padding: 26px 22px 22px; background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border); }
.step-card::before { counter-increment: step; content: counter(step); width: 40px; height: 40px; border-radius: 50%; background: var(--navy); color: var(--orange); font-weight: 900; display: grid; place-items: center; margin-bottom: 14px; }

/* Table (price list) */
.price-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; }
.price-toolbar select, .price-toolbar input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); width: 100%; box-sizing: border-box; }
@media (min-width: 560px) { .price-toolbar select, .price-toolbar input { width: auto; } }
.price-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
table.price-table { width: 100%; border-collapse: collapse; min-width: 760px; }
table.price-table th, table.price-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .88rem; white-space: nowrap; }
table.price-table th { background: var(--cream); color: var(--navy); position: sticky; top: 0; cursor: pointer; }
table.price-table tbody tr:hover { background: #fbfbf9; }

/* Below ~900px (phones and portrait tablets) a 10-column table with
   min-width:760px forces awkward sideways scrolling with tiny truncated
   cells. Collapse it into a stack of cards instead — each <tr> becomes a
   card, each <td> a label/value row via its data-label attribute, driven
   entirely by CSS so priceRowHTML's markup stays the same on desktop. */
@media (max-width: 900px) {
  .price-table-wrap { overflow-x: visible; border: none; border-radius: 0; }
  table.price-table { min-width: 0; display: block; }
  table.price-table thead { display: none; }
  table.price-table tbody { display: block; }
  table.price-table tr { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); margin-bottom: 14px; padding: 4px 0; }
  table.price-table td { display: flex; align-items: center; justify-content: space-between; gap: 12px; white-space: normal; border-bottom: 1px solid var(--border); padding: 10px 14px; }
  table.price-table tr td:last-child { border-bottom: none; }
  table.price-table td[data-label]::before { content: attr(data-label); font-weight: 700; color: var(--muted); font-size: .74rem; flex: none; }
  table.price-table td.price-cell-vehicle { padding: 14px; }
  table.price-table td.price-cell-vehicle a { width: 100%; }
  table.price-table td.price-cell-view { padding: 12px 14px 14px; }
  table.price-table td.price-cell-view a { width: 100%; text-align: center; }
  table.price-table td.price-cell-price { background: var(--cream); }
}

/* ==========================================================================
   Inventory / filters
   ========================================================================== */
.filters-toggle-btn {
  display: block; width: 100%; margin-bottom: 16px; padding: 12px 16px; border-radius: 10px;
  border: 1px solid var(--border); background: #fff; color: var(--navy); font-weight: 800; font-size: .9rem; cursor: pointer;
}
@media (min-width: 980px) { .filters-toggle-btn { display: none; } }
.inventory-layout { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .inventory-layout { grid-template-columns: 280px 1fr; } }
.filters-panel { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 20px; position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
@media (max-width: 979px) {
  .filters-panel { display: none; position: static; max-height: none; }
  .filters-panel.mobile-open { display: block; }
}
.filters-panel h2 { font-size: 1rem; margin-bottom: 4px; }
.filter-group { border-top: 1px solid var(--border); padding: 14px 0; }
.filter-group:first-of-type { border-top: 0; padding-top: 8px; }
.filter-group summary { cursor: pointer; font-weight: 800; font-size: .88rem; color: var(--navy); list-style: none; display: flex; justify-content: space-between; }
.filter-group summary::-webkit-details-marker { display: none; }
.filter-group summary::after { content: "▾"; color: var(--muted); }
.filter-options { margin-top: 10px; display: grid; gap: 6px; max-height: 190px; overflow-y: auto; }
.filter-options label { display: flex; align-items: center; gap: 8px; font-size: .84rem; }
.filter-options input[type=checkbox] { accent-color: var(--orange); }
.filter-count { color: var(--muted); font-weight: 500; }
.range-row { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-top: 6px; }

.results-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.results-count { font-weight: 700; color: var(--navy); }
.vat-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.vat-toggle button { border: 0; background: #fff; padding: 8px 16px; font-weight: 800; font-size: .82rem; cursor: pointer; color: var(--muted); }
.vat-toggle button.active { background: var(--navy); color: #fff; }
.active-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.active-filter-chips .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--cream); border: 1px solid var(--border); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: .78rem; font-weight: 700; }
.active-filter-chips .chip button { border: 0; background: rgba(27,67,80,.1); width: 18px; height: 18px; border-radius: 50%; cursor: pointer; color: var(--navy); font-size: .7rem; }

.vehicle-grid-section { background: var(--p-sky); }
.vehicle-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
/* Mobile: 1 across (below). Tablet and up: 2 across from 640px — tried 3
   across at 1200px+ per Rhys's request, but he found it too cluttered, so
   back to a max of 2 (cards just render a bit wider on the 1440px page). */
@media (min-width: 640px) { .vehicle-grid { grid-template-columns: repeat(2,1fr); } }
/* "You may also be interested in" (vehicle detail page) is its own grid,
   separate from the main listing above — per Rhys this one goes up to 3
   across on desktop (≥1200px), 2 on tablet, 1 on mobile, showing 6 cards
   total (see similarVehicles() in inventory.js). */
@media (min-width: 1200px) { .vehicle-grid-similar { grid-template-columns: repeat(3,1fr); } }
.vehicle-card { background: #fff; border: 1px solid #eceff2; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: box-shadow var(--transition), transform var(--transition); }
.vehicle-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.vehicle-media { position: relative; aspect-ratio: 16/10; background: #fff; }
.vehicle-media img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.vehicle-fav { position: absolute; top: 10px; right: 10px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; font-size: .76rem; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; box-shadow: var(--shadow-sm); }
.vehicle-fav[aria-pressed="true"] { background: var(--orange); border-color: var(--orange); color: var(--navy); }
.vehicle-badge { position: absolute; top: 10px; left: 10px; background: var(--navy); color: #fff; font-size: .7rem; font-weight: 800; padding: 5px 10px; border-radius: 999px; }
/* "Special Offer" card badge — deliberately louder than the plain
   navy availability badge (orange, uppercase, a little glow) so it
   actually stands out and reads as a deal, per Rhys. */
.vehicle-badge-deal { background: var(--orange); color: var(--navy); text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 2px 10px rgba(254,194,10,.55); }
.vehicle-image-disclaimer { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.86); color: var(--muted); font-size: .62rem; text-align: center; padding: 3px 6px; line-height: 1.3; }
.vehicle-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.vehicle-manufacturer { display: flex; align-items: center; gap: 6px; margin: 0; }
.vehicle-manufacturer img { width: 22px; height: 22px; object-fit: contain; }
.vehicle-manufacturer span { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vehicle-make { font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vehicle-title { font-size: .96rem; font-weight: 800; color: var(--navy); margin: 0; line-height: 1.25; }
.vehicle-model-line { font-size: .8rem; font-weight: 600; color: var(--muted); margin: 0; }
.vehicle-meta { display: flex; flex-wrap: wrap; gap: 5px; font-size: .7rem; color: var(--muted); }
.vehicle-meta span { background: var(--cream); border-radius: 6px; padding: 3px 7px; }
/* Staff testing the site didn't realise this was a clickable dropdown that
   changes the contract terms — it read as plain static text. Fixed with:
   a small caption label above it ("Change contract option"), a visible
   navy border instead of a faint grey one, and a custom chevron icon
   (native selects often render with a barely-visible arrow) so it reads
   unmistakably as an interactive control rather than a text line. */
.vehicle-select-label { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin-top: 6px; }
.vehicle-select {
  display: block; width: 100%; margin-top: 4px; padding: 9px 30px 9px 10px;
  border-radius: 8px; border: 1.5px solid var(--navy); font-size: .78rem; font-weight: 700; color: var(--navy);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23003446'%3E%3Cpath d='M5.5 7.5l4.5 5 4.5-5z'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
  appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
}
.vehicle-select:hover { border-color: var(--orange-dark); }
.vehicle-select:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px rgba(254,194,10,.25); }
.vehicle-single-contract { width: 100%; padding: 8px 9px; border-radius: 8px; background: var(--cream); font-size: .74rem; font-weight: 700; margin: 2px 0 0; color: var(--navy); }
.vehicle-spacer { flex: 1; }
.vehicle-price-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.vehicle-price { font-size: 1.3rem; font-weight: 900; color: var(--navy); }
.vehicle-price small { font-size: .66rem; font-weight: 700; color: var(--muted); display: block; }
.vehicle-ir { font-size: .72rem; color: var(--muted); }
.vehicle-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vehicle-actions .btn { flex: 1; padding: 10px 8px; font-size: .78rem; min-width: 140px; }
/* Vehicle detail page's own CTA row (Apply Now / Enquire / WhatsApp) — kept
   as a separate modifier from the shared .vehicle-actions used on vehicle
   cards, because this row sits in the narrow sticky info column (roughly
   35% of the page even on desktop) where 3-4 buttons side by side collide
   and overlap. Stacked full-width, one per line, works at every screen
   size here — this is NOT applied to card buttons, which have their own
   room to sit side by side. */
.vehicle-detail-actions { flex-direction: column; flex-wrap: nowrap; gap: 14px; }
.vehicle-detail-actions .btn { width: 100%; min-width: 0; }
.vehicle-deal-link { text-align: center; font-size: .74rem; font-weight: 700; text-decoration: underline; color: var(--navy); margin-top: 6px; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.load-more-wrap { text-align: center; margin-top: 28px; }
.skeleton { background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%); background-size: 400% 100%; animation: shimmer 1.4s infinite; border-radius: var(--radius-md); height: 340px; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ---- Vehicle detail page (Phase 2) ---- */
.mockup { border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; padding: 24px; }
.mockup .body { padding: 0; }
.veh-row { display: flex; gap: 8px; flex-wrap: wrap; }
.term-chip {
  font-family: inherit; font-size: .82rem; font-weight: 700; padding: 9px 14px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--cream); color: var(--navy); cursor: pointer;
}
.term-chip.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.term-chip:hover:not(.active) { border-color: var(--navy); }
.price-big { font-weight: 900; font-size: 2rem; color: var(--navy); margin-top: 16px; }
.price-big .sub { font-weight: 600; font-size: .82rem; color: var(--muted); margin-left: 4px; }
/* The price figure and the Deal Summary box are rebuilt from scratch every
   time a customer changes contract type/term/mileage/VAT, so a brief
   highlight plays automatically on the fresh element — makes it obvious
   the numbers actually changed, not just a static re-paint. */
@keyframes priceUpdateFlash { 0% { color: var(--orange-dark); } 100% { color: var(--navy); } }
[data-vehicle-price] { animation: priceUpdateFlash 700ms ease; }
@keyframes dealSummaryFlash { 0% { background: rgba(254,194,10,.3); } 100% { background: transparent; } }
.deal-summary-flash { animation: dealSummaryFlash 900ms ease; border-radius: 8px; }
.vehicle-cross-note { color: var(--muted); font-size: .86rem; margin-top: 4px; }
.vehicle-breakdown { display: grid; gap: 6px; margin: 10px 0 0; max-width: 480px; }
.vb-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .88rem; }
.vb-row dt { color: var(--muted); font-weight: 600; }
.vb-row dd { margin: 0; font-weight: 800; color: var(--navy); text-align: right; }
.callout { background: var(--cream); border-left: 4px solid var(--orange-dark); border-radius: 8px; padding: 14px 18px; }
.vehicle-mfr-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
/* Manufacturer logo now sits above the H1 (was beside it, in a flex row —
   that markup wrapper is gone, so this rule is display:block spacing now,
   not a flex item). */
.vehicle-mfr-logo-top { display: block; height: 40px; width: auto; max-width: 160px; object-fit: contain; margin: 0 0 10px; }
/* H1 uses clamp() so it scales smoothly between mobile and wide desktop
   instead of jumping at breakpoints, and reads smaller/tidier now the logo
   sits above it — per Rhys. */
.vehicle-detail-info h1 { font-size: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); line-height: 1.15; margin: 0 0 10px; }
.vehicle-hero { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 12px 0 18px; }
/* The car renders (Imagin AI) are a fixed, fairly small silhouette on a
   white background — stretching that across the full width on desktop
   left huge empty margins either side, so the image column itself (not
   just the <img>) is capped rather than left unbounded. Widened from an
   earlier, smaller cap (560/300) per Rhys — the old size read as too
   small once the page itself grew to a 1440px container. */
.vehicle-hero-main { position: relative; max-width: 680px; margin: 0 auto; }
.vehicle-hero-main img { display: block; width: 100%; max-height: 420px; object-fit: contain; background: #fff; padding: 12px 0; }
.vehicle-hero-placeholder { display: flex; align-items: center; justify-content: center; height: 220px; color: var(--muted); background: var(--cream); font-size: .86rem; }
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: rgba(255,255,255,.92); color: var(--navy); font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.hero-arrow:hover { background: #fff; }
.hero-arrow-left { left: 10px; }
.hero-arrow-right { right: 10px; }
.vehicle-hero-thumbs { display: flex; gap: 8px; padding: 10px; overflow-x: auto; background: var(--cream); }
/* Export Contract Blurb is fed in as raw HTML from Rhys's CMS export (see
   contractDetailsHTML in inventory.js) — this just gives whatever tags it
   contains (p/ul/strong etc.) sane default spacing inside the tab panel. */
.vehicle-contract-blurb { margin-bottom: 18px; color: var(--text); line-height: 1.55; }
.vehicle-contract-blurb > *:first-child { margin-top: 0; }
.vehicle-contract-blurb > *:last-child { margin-bottom: 0; }
.vehicle-contract-blurb p { margin: 0 0 .8em; }
.vehicle-contract-blurb ul, .vehicle-contract-blurb ol { margin: 0 0 .8em; padding-left: 1.3em; }
.vehicle-contract-blurb li { margin-bottom: .3em; }
.hero-thumb { flex: 0 0 auto; width: 56px; height: 44px; padding: 0; border-radius: 6px; border: 2px solid transparent; background: #fff; overflow: hidden; cursor: pointer; }
.hero-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-thumb.active { border-color: var(--navy); }

/* ---- Vehicle page bottom tabs (Costs and Profiles / Contract Details / YouTube Video / Additional Information / Specialist Services) ---- */
.vehicle-tab-nav { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; padding-bottom: 2px; }
.vehicle-tab-btn {
  font-family: inherit; font-size: .84rem; font-weight: 700; padding: 10px 16px; border-radius: 8px 8px 0 0;
  border: 1px solid transparent; background: transparent; color: var(--muted); cursor: pointer;
}
.vehicle-tab-btn:hover:not(.active) { color: var(--navy); }
.vehicle-tab-btn.active { color: var(--navy); background: var(--cream); border-color: var(--border); border-bottom-color: var(--cream); margin-bottom: -1px; }
.vehicle-tab-panel { font-size: .92rem; line-height: 1.55; }
.info-block { margin: 0 0 20px; }
.info-block:last-child { margin-bottom: 0; }
.info-block h4 { margin: 0 0 6px; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; color: var(--navy); }
.info-block p { margin: 0 0 8px; color: var(--ink, #333); }
.quote-pair { margin-bottom: 10px; }
.quote-pair h4 { margin: 22px 0 4px; color: var(--navy); }
.quote-block { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 18px; margin: 12px 0; background: #fff; }
.quote-block-label { font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 0 0 6px; }
.quote-block .vehicle-breakdown { max-width: none; }
.vehicle-video-wrap { position: relative; padding-top: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-md); background: #000; }
.vehicle-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- Vehicle detail: two-column layout (image left, deal info + CTA
   right) on tablet/desktop, stacking back to one column on mobile. The
   info column is sticky so price/CTAs stay in view while the customer
   scrolls the image gallery. ---- */
.vehicle-detail-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr); gap: 32px; align-items: start; }
.vehicle-detail-info { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 880px) {
  .vehicle-detail-grid { grid-template-columns: 1fr; gap: 0; }
  .vehicle-detail-info { position: static; }
}

/* WhatsApp CTA — tablet/mobile only, per Rhys, not desktop. 880px matches
   the breakpoint above where the two-column layout switches to one
   column, i.e. "desktop" here means the two-column view. */
@media (min-width: 881px) {
  .whatsapp-mobile-tablet-only { display: none; }
}

/* ---- Floating price + Enquire/WhatsApp bar (vehicle detail page) — a
   full-width bottom bar on phones, a compact floating card bottom-right
   on tablet/desktop, so Enquire is always reachable however far the
   customer has scrolled (tabs, similar vehicles, etc), not just while the
   sticky info column above is in view. ---- */
.floating-cta-bar { display: none; }
@media (max-width: 720px) {
  .floating-cta-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 18px rgba(27,67,80,.12);
    padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
    align-items: center; gap: 10px;
  }
  .floating-cta-bar .mpb-price { flex: 1; font-weight: 900; color: var(--navy); font-size: 1.05rem; line-height: 1.1; }
  .floating-cta-bar .mpb-price small { display: block; font-size: .62rem; font-weight: 700; color: var(--muted); }
  .floating-cta-bar .btn { flex: 0 0 auto; padding: 10px 16px; font-size: .82rem; }
  body.has-mobile-price-bar { padding-bottom: 64px; }
}
@media (min-width: 721px) {
  .floating-cta-bar {
    display: flex; position: fixed; right: 24px; bottom: 24px; z-index: 60;
    background: #fff; border: 1px solid var(--border); border-radius: 999px;
    box-shadow: var(--shadow-lg); padding: 10px 12px 10px 20px;
    align-items: center; gap: 12px; max-width: 340px;
  }
  .floating-cta-bar .mpb-price { font-weight: 900; color: var(--navy); font-size: .98rem; line-height: 1.1; white-space: nowrap; }
  .floating-cta-bar .mpb-price small { display: block; font-size: .6rem; font-weight: 700; color: var(--muted); }
  .floating-cta-bar .btn { flex: 0 0 auto; padding: 9px 14px; font-size: .8rem; white-space: nowrap; }
}
.floating-cta-bar .btn-whatsapp { background: #25D366; color: #fff; border-color: #25D366; }

/* Enquiry basket */
.enquiry-basket { position: fixed; right: 20px; bottom: 20px; z-index: 400; }
.enquiry-basket-btn { background: var(--navy); color: #fff; border-radius: 999px; padding: 14px 22px; font-weight: 800; box-shadow: var(--shadow-lg); border: 0; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.enquiry-basket-count { background: var(--orange); color: var(--navy); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: .74rem; }
.enquiry-drawer { position: fixed; inset: 0 0 0 auto; width: min(94vw, 420px); background: #fff; z-index: 999; box-shadow: -10px 0 40px rgba(0,0,0,.2); transform: translateX(100%); transition: transform 260ms ease; overflow-y: auto; }
.enquiry-drawer.open { transform: translateX(0); }
.enquiry-drawer-inner { padding: 22px; }
.enquiry-item { display: flex; gap: 10px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 10px; margin-bottom: 10px; }
.enquiry-item img { width: 56px; height: 42px; object-fit: contain; background: var(--cream); border-radius: 6px; }
.enquiry-item .remove { margin-left: auto; border: 0; background: none; cursor: pointer; color: var(--danger); font-weight: 800; }

/* WhatsApp FAB */
.whatsapp-fab { position: fixed; left: 20px; bottom: 20px; z-index: 400; width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-lg); transition: transform var(--transition); }
.whatsapp-fab:hover { transform: scale(1.06); }
@media (max-width: 780px) { .whatsapp-fab { display: none; } }

/* Mobile bottom action bar */
.mobile-bottom-bar { display: none; }
@media (max-width: 780px) {
  .mobile-bottom-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 700;
    background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -6px 24px rgba(16,26,46,.10);
    padding: 8px max(8px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom));
  }
  .mobile-bottom-bar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--navy); font-size: .66rem; font-weight: 800; padding: 6px 4px; border-radius: 10px;
  }
  .mobile-bottom-bar a svg { width: 20px; height: 20px; }
  .mobile-bottom-bar a.mbb-primary { background: var(--orange); color: var(--navy); }
  .mobile-bottom-bar a.mbb-whatsapp { color: #1ebd58; }
  body.has-mobile-bar { padding-bottom: 62px; }
  body.has-mobile-bar .enquiry-basket, body.has-mobile-bar .cookie-banner { bottom: 66px; }
}

/* ==========================================================================
   Cookie banner
   ========================================================================== */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1000; background: var(--navy-deep); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.cookie-inner { padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; }
.cookie-inner p { margin: 0; font-size: .84rem; color: rgba(255,255,255,.85); max-width: 720px; }
.cookie-inner a { color: var(--orange); }
.cookie-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner .btn-outline { color: #fff; border-color: rgba(255,255,255,.65); background: transparent; }
.cookie-banner .btn-outline:hover { background: #fff; color: var(--navy); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--navy-deep); color: rgba(255,255,255,.78); padding: 64px 0 0; }
.footer-top { max-width: var(--container); margin: 0 auto; padding: 0 24px; display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-top { grid-template-columns: 1.4fr repeat(4, .8fr); } }
@media (min-width: 1180px) { .footer-top { grid-template-columns: 1.3fr .8fr .9fr .8fr .8fr 1.2fr; } }
.footer-brand img { filter: brightness(0) invert(1); margin-bottom: 14px; width: auto; height: auto; max-width: 170px; max-height: 44px; object-fit: contain; }
.footer-brand address { font-style: normal; color: rgba(255,255,255,.6); margin: 10px 0; font-size: .86rem; }
.footer-brand p { font-size: .88rem; }
.footer-brand a { color: #fff; text-decoration: none; }
.hours-table { font-size: .8rem; border-collapse: collapse; margin: 10px 0 4px; }
.hours-table caption { text-align: left; font-weight: 800; color: #fff; margin-bottom: 6px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.hours-table td { padding: 2px 10px 2px 0; color: rgba(255,255,255,.68); }
.hours-note { font-size: .74rem; color: rgba(255,255,255,.5); }
.footer-col h3 { color: #fff; font-size: .86rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 14px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,.68); font-size: .86rem; }
.footer-col a:hover { color: var(--orange); }
.footer-signup { background: rgba(255,255,255,.06); border-radius: var(--radius-md); padding: 22px; }
.footer-signup h3 { color: #fff; font-size: 1rem; }
.footer-signup p { font-size: .82rem; color: rgba(255,255,255,.6); }
.mc-row { display: flex; gap: 8px; margin-bottom: 10px; }
.mc-row input { flex: 1; padding: 10px 12px; border-radius: 8px; border: 0; }
.mc-consent { display: grid; gap: 4px; font-size: .72rem; color: rgba(255,255,255,.55); margin-bottom: 8px; }
.mc-consent label { display: flex; gap: 6px; align-items: center; }
.mc-legal { font-size: .68rem; color: rgba(255,255,255,.45); }
.footer-legal { border-top: 1px solid rgba(255,255,255,.12); margin-top: 44px; padding: 24px; font-size: .74rem; color: rgba(255,255,255,.5); }
.footer-legal p { margin: 0 0 8px; max-width: 1100px; margin-left: auto; margin-right: auto; }
.footer-legal a, .footer-legal button.link-btn { color: rgba(255,255,255,.7); }
.footer-links { text-align: left; }

/* ==========================================================================
   Vehicle Finder widget host page tweaks (keeps widget's own scoped CSS)
   ========================================================================== */
.finder-page-embed { max-width: 980px; margin: -40px auto 0; padding: 0 20px 40px; position: relative; z-index: 2; }

/* 404 */
.error-page { min-height: 70vh; display: flex; align-items: center; text-align: center; }
.error-page .code { font-size: clamp(4rem, 14vw, 8rem); font-weight: 900; color: var(--orange); line-height: 1; }

/* Manufacturer / bodystyle grid logos */
.logo-tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; transition: all var(--transition); text-decoration: none;
}
.logo-tile:hover { border-color: var(--orange); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.logo-tile img { height: 32px; max-width: 70%; object-fit: contain; filter: grayscale(100%); opacity: .8; transition: all var(--transition); }
.logo-tile:hover img { filter: grayscale(0%); opacity: 1; }
.logo-tile span { font-size: .78rem; font-weight: 800; color: var(--navy); text-align: center; }
.logo-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
@media (min-width: 640px) { .logo-grid { grid-template-columns: repeat(4,1fr); } }
@media (min-width: 960px) { .logo-grid { grid-template-columns: repeat(6,1fr); } }

/* Comparison table component */
.compare-table-wrap { width: 100%; overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border); }
table.compare-table { width: 100%; border-collapse: collapse; min-width: 640px; background: #fff; }
table.compare-table th, table.compare-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .86rem; vertical-align: top; }
table.compare-table thead th { background: var(--navy); color: #fff; font-weight: 800; position: sticky; top: 0; }
table.compare-table thead th:first-child { background: var(--navy-deep); }
table.compare-table tbody th { background: var(--cream); color: var(--navy); font-weight: 800; white-space: nowrap; }
table.compare-table tbody tr:last-child td, table.compare-table tbody tr:last-child th { border-bottom: 0; }
table.compare-table td.rec, table.compare-table th.rec { background: rgba(254,194,10,.10); }
.compare-yes { color: var(--success); font-weight: 800; }
.compare-no { color: var(--danger); font-weight: 800; }

/* Generic content tables (AI-citation / readability friendly) */
.content-table-wrap { width: 100%; overflow-x: auto; margin: 20px 0; }
table.content-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
table.content-table th, table.content-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-size: .86rem; }
table.content-table th { background: var(--cream); color: var(--navy); font-weight: 800; }
table.content-table tr:last-child td { border-bottom: 0; }

/* Reg lookup box */
.reg-box { background: #fff; border: 2px dashed var(--orange); border-radius: var(--radius-md); padding: 22px; display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.reg-box .quote-field { flex: 1; min-width: 180px; margin-bottom: 0; }
.reg-input { text-transform: uppercase; letter-spacing: .08em; font-weight: 800; text-align: center; }

/* Reveal-on-scroll */
.reveal-init { opacity: 0; transform: translateY(18px); transition: opacity 600ms ease, transform 600ms ease; }
.reveal-in { opacity: 1; transform: translateY(0); }

/* Utility */
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.badge-soft { display: inline-block; background: rgba(254,194,10,.16); color: var(--orange-dark); font-weight: 800; font-size: .74rem; padding: 5px 10px; border-radius: 999px; }
.card-navy { background: var(--navy); color: #fff; border-radius: var(--radius-lg); padding: 36px; }
.card-navy h2, .card-navy h3 { color: #fff; }

/* ==========================================================================
   Cocoon Vehicles additions — "Lease from / Subscription from" split price
   line on cards carrying both contract families (§10 "Show a range, not a
   teaser"), and the cascading Fixed/Flexible sub-filter wrappers.
   ========================================================================== */
.vehicle-from-split {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  margin: 4px 0 2px;
}
.vehicle-from-split span {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 10px;
}
.veh-meta-bubbles { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.veh-meta-bubbles span, .veh-meta-bubbles a {
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--navy);
  font-weight: 700;
  font-size: .82rem;
  padding: 6px 14px;
  border-radius: 999px;
}
.veh-meta-bubbles a { text-decoration: none; cursor: pointer; }
.veh-meta-bubbles a:hover { background: #fff; border-color: var(--navy); }
/* "Special Offer" chip in the Contract Details tab — same standout
   treatment as the card badge, so it doesn't blend in with the plain
   grey trend-phrase chips next to it. */
.veh-meta-bubbles .deal-tag { background: var(--orange); border-color: var(--orange); color: var(--navy); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.veh-breadcrumb { font-size: .82rem; color: var(--muted); margin-bottom: 10px; }
.veh-breadcrumb a { color: var(--navy); text-decoration: none; font-weight: 600; }
.veh-breadcrumb a:hover { text-decoration: underline; }
.vehicle-title a { color: inherit; text-decoration: none; }
.vehicle-title a:hover { text-decoration: underline; }
[data-filter-group-wrap] { transition: none; }

/* ---- Mobile refinements (vehicle detail + /vehicles/ listing) ---- */
@media (max-width: 640px) {
  /* Vehicle detail — hide the row of angle thumbnails under the main hero
     image; the prev/next arrows on the image itself are enough on a small
     screen, and 8 little thumbnails were just adding clutter/scroll. */
  .vehicle-hero-thumbs { display: none; }

  /* Vehicle detail — the tab row (Costs and Profiles / Contract Details /
     Specification / …) wrapped into a messy multi-line grid on narrow
     screens. A single horizontally-scrollable row reads far more like a
     normal mobile tab bar. */
  .vehicle-tab-nav { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; scrollbar-width: none; }
  .vehicle-tab-nav::-webkit-scrollbar { display: none; }
  .vehicle-tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* /vehicles/ listing toolbar — "Copy Link for Customer" is a staff tool,
     not something a customer browsing on their phone needs; drop it on
     mobile and let the VAT toggle sit against the right edge instead of
     wrapping onto its own line. */
  #copy-link-btn { display: none; }
  .results-toolbar-actions { width: 100%; justify-content: space-between; }
}

/* ==========================================================================
   Cookie consent banner + preferences modal (assets/consent.js)
   ========================================================================== */
#cocoon-consent-root { position: relative; z-index: 2000; }
.cc-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--navy); color: rgba(255,255,255,.94);
  padding: 16px 24px; display: flex; flex-wrap: wrap; gap: 14px 24px;
  align-items: center; justify-content: space-between;
  box-shadow: 0 -8px 30px rgba(0,0,0,.18);
}
.cc-banner-text { max-width: 640px; font-size: .88rem; line-height: 1.5; }
.cc-banner-text a { color: var(--orange); font-weight: 700; text-decoration: none; }
.cc-banner-text a:hover { text-decoration: underline; }
.cc-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cc-banner .btn-ghost { background: rgba(255,255,255,.12); color: #fff; }
.cc-banner .btn-ghost:hover { background: rgba(255,255,255,.2); }
.cc-banner .btn-outline { border-color: rgba(255,255,255,.5); color: #fff; }
.cc-banner .btn-outline:hover { background: rgba(255,255,255,.14); }

.cc-overlay { position: fixed; inset: 0; background: rgba(10,18,28,.55); z-index: 2001; }
.cc-modal {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 2002; width: min(92vw, 480px); max-height: 86vh; overflow-y: auto;
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  padding: 28px;
}
.cc-modal h2 { margin-bottom: 6px; }
.cc-modal-intro { color: var(--muted); font-size: .86rem; margin-bottom: 18px; }
.cc-row { border-top: 1px solid var(--border); padding: 14px 0; }
.cc-row:first-of-type { border-top: none; }
.cc-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 800; color: var(--navy); }
.cc-row-desc { color: var(--muted); font-size: .82rem; margin: 6px 0 0; line-height: 1.5; }
.cc-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.cc-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-switch-track { position: absolute; inset: 0; background: var(--border); border-radius: 999px; transition: background var(--transition); cursor: pointer; }
.cc-switch-track::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.cc-switch input:checked + .cc-switch-track { background: var(--orange); }
.cc-switch input:checked + .cc-switch-track::before { transform: translateX(18px); }
.cc-switch-locked .cc-switch-track { background: var(--navy); opacity: .5; cursor: not-allowed; }
.cc-switch-locked .cc-switch-track::before { transform: translateX(18px); }

@media (max-width: 640px) {
  .cc-banner { padding: 14px 16px; }
  .cc-banner-actions { width: 100%; justify-content: stretch; }
  .cc-banner-actions .btn { flex: 1; }
  .cc-modal { padding: 20px; }
}

/* ==========================================================================
   Car Dating — Tinder-style swipe page (assets/car-dating.js)
   ========================================================================== */
.cd-wrap { max-width: 420px; margin: 0 auto; padding: 0 16px 60px; display: flex; flex-direction: column; align-items: center; }
.cd-progress { font-size: .8rem; font-weight: 700; color: var(--muted); margin-bottom: 10px; height: 18px; }
.cd-stack { position: relative; width: 100%; max-width: 380px; aspect-ratio: 3/4.4; }
.cd-loading, .cd-empty { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 20px; background: var(--cream); border-radius: var(--radius-lg); }

.cd-card {
  position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: #fff; box-shadow: var(--shadow-lg); touch-action: none; user-select: none;
  transition: transform 260ms ease, opacity 260ms ease;
  display: flex; flex-direction: column;
}
.cd-card.cd-card-dragging { transition: none; }
.cd-card.cd-card-flying { transition: transform 260ms ease-out, opacity 260ms ease-out; }
.cd-card-top { cursor: grab; }
.cd-card-top.cd-card-dragging { cursor: grabbing; }
.cd-card-img { flex: 1; background-size: cover; background-position: center; background-color: var(--cream); }
.cd-card-flag {
  position: absolute; top: 16px; left: 16px; background: var(--orange); color: var(--navy);
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: .72rem;
  padding: 5px 12px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.cd-stamp {
  position: absolute; top: 26px; font-weight: 900; font-size: 1.6rem; letter-spacing: .04em;
  border: 4px solid; border-radius: 10px; padding: 4px 14px; opacity: 0; pointer-events: none;
  text-transform: uppercase;
}
.cd-stamp-like { left: 20px; color: var(--success); border-color: var(--success); transform: rotate(-18deg); }
.cd-stamp-skip { right: 20px; color: var(--danger); border-color: var(--danger); transform: rotate(18deg); }
.cd-card-info-link { text-decoration: none; color: inherit; display: block; }
.cd-card-info {
  padding: 16px 18px 18px; background: #fff;
}
.cd-card-info h2 { font-size: 1.1rem; margin: 0 0 6px; }
.cd-card-contract { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.cd-card-contract-type { background: var(--navy); color: #fff; font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px; }
.cd-card-contract-term { color: var(--muted); font-weight: 700; font-size: .78rem; }
.cd-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.cd-card-chips span { background: var(--cream); border: 1px solid var(--border); color: var(--navy); font-weight: 700; font-size: .74rem; padding: 3px 10px; border-radius: 999px; }
.cd-card-price { font-weight: 800; color: var(--navy); font-size: 1.05rem; }
.cd-card-price span { font-weight: 600; color: var(--muted); font-size: .78rem; margin-left: 4px; }
.cd-card-initial { color: var(--muted); font-weight: 700; font-size: .78rem; margin-top: 2px; }

/* Floating shortlist widget — bottom-right, distinct from the top-bar pill,
   visible as soon as the first vehicle is saved so progress always feels
   tangible while swiping. */
.cd-float-shortlist {
  position: fixed; right: 18px; bottom: 18px; z-index: 500;
  display: flex; align-items: center; gap: 10px;
  background: #fff; border-radius: 999px; box-shadow: var(--shadow-lg);
  padding: 8px 8px 8px 14px; border: 1px solid var(--border);
}
.cd-float-thumbs { display: flex; }
.cd-float-thumbs img, .cd-float-thumb-blank {
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 2px solid #fff; box-shadow: var(--shadow-sm); background: var(--cream);
  margin-left: -12px;
}
.cd-float-thumbs img:first-child, .cd-float-thumb-blank:first-child { margin-left: 0; }
.cd-float-cta {
  display: flex; align-items: center; gap: 6px; background: var(--orange); color: var(--navy);
  font-weight: 800; font-size: .84rem; text-decoration: none; padding: 8px 14px; border-radius: 999px;
  transition: transform var(--transition);
}
.cd-float-cta:hover { transform: translateY(-1px); }
.cd-float-count {
  background: var(--navy); color: #fff; font-size: .72rem; font-weight: 800;
  border-radius: 999px; padding: 1px 7px; min-width: 18px; text-align: center;
}
@keyframes cd-float-pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cd-float-shortlist.cd-float-pop { animation: cd-float-pop 320ms ease; }
@media (max-width: 480px) {
  .cd-float-shortlist { right: 12px; bottom: 12px; padding: 7px 7px 7px 12px; }
  .cd-float-cta { font-size: .8rem; padding: 7px 12px; }
}

.cd-actions { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 22px; }
.cd-btn {
  border-radius: 50%; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-md);
  display: grid; place-items: center; cursor: pointer; color: var(--navy); transition: transform var(--transition);
}
.cd-btn:hover { transform: translateY(-2px); }
.cd-btn-skip, .cd-btn-like { width: 60px; height: 60px; font-size: 1.6rem; font-weight: 900; }
.cd-btn-skip { color: var(--danger); }
.cd-btn-like { color: var(--success); }
.cd-btn-info { width: 40px; height: 40px; font-size: 1rem; font-weight: 800; font-style: italic; }

.cd-done { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; background: var(--cream); border-radius: var(--radius-lg); padding: 32px 24px; }
.cd-done-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 240px; margin-top: 8px; }

@media (max-width: 480px) {
  .cd-wrap { padding: 0 12px 40px; }
  .cd-stack { aspect-ratio: 3/4.8; }
}

/* ==========================================================================
   Manufacturer taxonomy pages (assets/manufacturers.js)
   ========================================================================== */
.mf-loading, .mf-notfound { padding: 40px 0; text-align: center; color: var(--muted); }
.mf-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .mf-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .mf-grid { grid-template-columns: repeat(4, 1fr); } }
.mf-tile {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 20px 14px; text-align: center; text-decoration: none; color: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.mf-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mf-tile img { max-width: 100%; max-height: 44px; object-fit: contain; }
.mf-tile-name { font-weight: 800; color: var(--navy); }
.mf-tile-count { font-size: .78rem; color: var(--muted); }

.mf-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 20px 0; }
.mf-hero-logo { max-width: 120px; max-height: 60px; object-fit: contain; }
.mf-section { padding: 24px 0; border-top: 1px solid var(--border); }
.mf-section h2 { margin-bottom: 14px; }
.mf-filter-bar { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 4px; }
.mf-filter-bar label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--muted); min-width: 150px; flex: 1 1 150px; }
.mf-filter-bar select { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); font-weight: 600; font-size: .86rem; color: var(--navy); background: #fff; }
.mf-vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (min-width: 640px) { .mf-vgrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .mf-vgrid { grid-template-columns: repeat(4, 1fr); } }
.mf-vcard { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; text-decoration: none; color: inherit; display: block; transition: transform var(--transition), box-shadow var(--transition); }
.mf-vcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.mf-vcard img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: var(--cream); }
.mf-vcard-noimg { width: 100%; aspect-ratio: 4/3; background: var(--cream); }
.mf-vcard-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.mf-vcard-body strong { font-size: .86rem; color: var(--navy); }
.mf-vcard-body span { font-size: .78rem; color: var(--muted); font-weight: 700; }

/* ==========================================================================
   Header search — magnifying-glass icon that expands into a live-filter
   field, with results dropdown (assets/search.js injects the markup this
   styles into every page's .header-inner; nothing here is written into
   individual page templates).
   ========================================================================== */
.header-search { position: relative; margin-left: auto; display: flex; align-items: center; }
@media (min-width: 1080px) { .header-search { margin-left: 0; } }
.hs-toggle {
  width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border);
  background: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--navy); flex-shrink: 0;
}
.hs-toggle:hover { background: var(--cream); }
.header-search.hs-open .hs-toggle { display: none; }
.hs-field-wrap {
  display: flex; align-items: center; width: 0; overflow: hidden; opacity: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  transition: width var(--transition), opacity var(--transition);
}
.header-search.hs-open .hs-field-wrap { width: 200px; opacity: 1; }
@media (min-width: 640px) { .header-search.hs-open .hs-field-wrap { width: 280px; } }
.hs-input { border: 0; outline: 0; background: none; padding: 9px 4px 9px 12px; font-size: .86rem; width: 100%; color: var(--text); min-width: 0; }
.hs-close { border: 0; background: none; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--muted); padding: 0 10px; flex-shrink: 0; }
.hs-results {
  position: absolute; top: calc(100% + 8px); right: 0; width: 340px; max-width: 92vw;
  max-height: 70vh; overflow-y: auto; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: 600;
}
.hs-result { display: flex; gap: 10px; align-items: center; padding: 8px; border-radius: 8px; text-decoration: none; color: inherit; }
.hs-result:hover, .hs-result-active { background: var(--cream); }
.hs-result img, .hs-result-noimg { width: 56px; height: 42px; object-fit: contain; background: var(--cream); border-radius: 6px; flex-shrink: 0; }
.hs-result-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-result-title { font-weight: 700; font-size: .85rem; color: var(--navy); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hs-result-badge { font-size: .68rem; font-weight: 800; background: var(--orange); color: var(--navy); padding: 1px 6px; border-radius: 999px; white-space: nowrap; }
.hs-result-meta { font-size: .76rem; color: var(--muted); }
.hs-empty { padding: 14px; text-align: center; color: var(--muted); font-size: .84rem; margin: 0; }

/* ==========================================================================
   Header nav v2 — desktop mega menus + mobile grouped list (assets/nav.js
   injects the markup this styles into every page's #main-nav/#mnav-featured
   containers — nothing here is written into individual page templates).
   ========================================================================== */
.brand img { display: block; height: 40px; width: 40px; border-radius: 8px; }

.cc-nav-item { position: relative; }
.cc-nav-item .nav-link { text-decoration: none; }
.cc-nav-item .nav-link svg { transition: transform var(--transition); opacity: .6; }
.cc-has-mega.cc-open .nav-link svg { transform: rotate(180deg); }
.cc-mega {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 680px; max-width: min(880px, 94vw);
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 24px; opacity: 0; visibility: hidden; transform: translateY(4px); pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease; z-index: 550;
}
.cc-has-mega.cc-open .cc-mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
/* Invisible hover-bridge spanning the small visual gap between the nav
   link and the mega panel — without it, moving the pointer straight down
   from the link crosses dead space that belongs to neither element,
   triggering mouseleave (and closing the panel) before the pointer ever
   reaches it. Sized to match the panel's own footprint, not just the
   trigger link's, since the panel is wider than its link. */
.cc-has-mega::after {
  content: ""; position: absolute; top: 100%; left: 0; height: 10px;
  width: min(880px, 94vw); min-width: 680px;
}
/* Four loose columns — Ways to Drive / By Body Type / By Contract Length /
   Popular Manufacturers on both Cars and Vans, so the two menus stay the
   same width and shape. Body-type links skip the one-line description
   the others carry (the label alone is already self-explanatory), which
   keeps that column from running much taller than its neighbours. */
.cc-mega-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.cc-mega-col h3 { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--orange); margin: 0 0 14px; font-weight: 800; }
.cc-mega-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.cc-mega-col a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 0 -8px; border-radius: 8px; text-decoration: none; }
.cc-mega-col a:hover { background: var(--cream); }
.cc-mega-link-text { display: grid; gap: 1px; }
.cc-mega-label { font-size: .87rem; font-weight: 700; color: var(--text); line-height: 1.25; }
.cc-mega-desc { font-size: .74rem; color: var(--muted); line-height: 1.2; }
.cc-mega-col a:hover .cc-mega-label { color: var(--navy); }
.cc-mega-logo { width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; }
.cc-mega-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px; max-height: 60vh; overflow-y: auto; }
.cc-mega-brand { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: .84rem; font-weight: 700; }
.cc-mega-brand:hover { background: var(--cream); color: var(--navy); }
.cc-mega-brand img { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.cc-mnav-brands { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; }
.cc-mega-more .cc-mega-label { color: var(--navy) !important; font-weight: 800 !important; }
.cc-mega-cta { display: inline-flex; margin-top: 18px; }

.cc-mnav-group { margin-bottom: 4px; }
.cc-mnav-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: rgba(27,67,80,.07); border: 0; padding: 12px 14px; border-radius: 10px;
  font-weight: 800; color: var(--navy); font-size: .95rem; cursor: pointer;
}
.cc-mnav-toggle svg { transition: transform var(--transition); flex-shrink: 0; }
.cc-mnav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cc-mnav-sub { display: grid; gap: 1px; padding: 6px 4px 10px 14px; max-height: 60vh; overflow-y: auto; }
.cc-mnav-sub a { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); font-size: .86rem; }
.cc-mnav-sub a:hover { background: var(--cream); }
.cc-mnav-sub-all { font-weight: 800; color: var(--navy) !important; margin-bottom: 4px; }
.cc-mnav-subgroup { border-top: 1px solid var(--border); padding-top: 6px; margin-top: 4px; }
.cc-mnav-subgroup:first-of-type { border-top: none; margin-top: 0; }
.cc-mnav-subhead { font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; margin: 4px 10px 2px; }
.mnav-featured > a { display: block; text-align: center; padding: 12px 14px; border-radius: 10px; font-weight: 800; text-decoration: none; background: rgba(27,67,80,.07); color: var(--navy); margin-bottom: 4px; }
.cc-mnav-cta { background: var(--orange) !important; color: var(--navy) !important; }

/* ==========================================================================
   /cars/ and /vans/ landing hubs (assets/hub.js)
   ========================================================================== */
/* Flexbox rather than a fixed-column grid: with a variable number of live
   tiles (some are skipped when a segment has zero current stock), a grid
   leaves a lone trailing tile stuck in the grid's leftmost column — small,
   off-centre and visually "unbalanced" under a full row above it. Flexbox
   with wrap + justify-content:center lets a leftover row of 1 or 2 tiles
   sit centred at the same fixed width as its neighbours instead. flex-grow
   is 0 throughout so a short last row centres rather than stretching. */
.hub-grid { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.hub-tile-lg, .hub-tile-sm { flex: 0 1 100%; }
@media (min-width: 640px) { .hub-tile-sm { flex-basis: calc(50% - 4px); } }
@media (min-width: 800px) { .hub-tile-lg { flex-basis: calc(50% - 4px); } }
@media (min-width: 900px) { .hub-tile-sm { flex-basis: calc(33.333% - 4px); } }
.hub-tile {
  position: relative; display: flex; align-items: flex-end; min-height: 260px;
  background-size: cover; background-position: center; text-decoration: none;
  overflow: hidden; transition: filter var(--transition);
}
.hub-tile-lg { min-height: 320px; }
.hub-tile:hover { filter: brightness(1.06); }
.hub-tile-body { padding: 22px; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.hub-tile-title { font-size: 1.15rem; font-weight: 800; color: #fff; }
.hub-tile-lg .hub-tile-title { font-size: 1.4rem; }
.hub-tile-desc { display: block; font-size: .85rem; color: rgba(255,255,255,.88); line-height: 1.45; max-width: 44ch; }
.hub-tile-desc em { font-style: normal; color: #fff; font-weight: 700; }
.hub-tile-cta { align-self: flex-start; margin-top: 6px; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.55); color: #fff; }
.hub-tile-cta:hover { background: rgba(255,255,255,.24); color: #fff; }
.trust-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.trust-item strong { display: block; color: var(--navy); font-size: .95rem; margin-bottom: 6px; }
.trust-item p { margin: 0; font-size: .84rem; color: var(--muted); line-height: 1.5; }

/* ==========================================================================
   Homepage — compact hero + live "hottest deals" strip + manufacturer
   chips (assets/home.js, plus hub.js's HOME_TILES grid)
   ========================================================================== */
.home-hero {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy-mid));
  color: #fff; padding: calc(var(--header-h) + 40px) 0 44px; text-align: center;
}
.home-hero .eyebrow { color: rgba(255,255,255,.75); }
.home-hero h1 { color: #fff; font-size: clamp(1.8rem, 4.4vw, 2.9rem); max-width: 20ch; margin: 0 auto 14px; }
.home-hero .lead { color: rgba(255,255,255,.86); max-width: 62ch; margin: 0 auto 26px; }
.home-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 640px) {
  .home-hero { padding: calc(var(--header-h) + 20px) 0 30px; }
  .home-hero h1 { font-size: 1.5rem; }
}

.home-deals-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .home-deals-grid { grid-template-columns: repeat(3, 1fr); } }
.home-deal-card {
  position: relative; display: block; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--cream); box-shadow: var(--shadow-md); text-decoration: none; color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.home-deal-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.home-deal-img { height: 170px; background-size: cover; background-position: center; background-color: var(--cream); }
.home-deal-flag {
  position: absolute; top: 12px; left: 12px; background: var(--orange); color: var(--navy);
  font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: .68rem;
  padding: 4px 10px; border-radius: 999px; box-shadow: var(--shadow-sm);
}
.home-deal-body { padding: 14px 16px 16px; background: #fff; }
.home-deal-body h3 { font-size: .96rem; margin: 0 0 6px; color: var(--navy); }
.home-deal-price { font-weight: 800; color: var(--navy); font-size: 1rem; margin: 0; }
.home-deal-price span { font-weight: 600; color: var(--muted); font-size: .76rem; margin-left: 4px; }

.why-cocoon-grid { display: grid; gap: 32px; align-items: center; grid-template-columns: 1fr; }
@media (min-width: 900px) { .why-cocoon-grid { grid-template-columns: 1.1fr .9fr; } }
.why-cocoon-copy h2 { margin-bottom: 10px; }
.why-cocoon-list { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 12px; }
.why-cocoon-list li { position: relative; padding-left: 26px; font-size: .92rem; color: var(--text); line-height: 1.5; }
.why-cocoon-list li::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--orange);
}
.why-cocoon-list li::after {
  content: ""; position: absolute; left: 5px; top: 9px; width: 6px; height: 3px;
  border-left: 2px solid var(--navy); border-bottom: 2px solid var(--navy); transform: rotate(-45deg);
}
.why-cocoon-media {
  border-radius: var(--radius-lg); background-size: cover; background-position: center;
  background-color: var(--cream); min-height: 320px; box-shadow: var(--shadow-md);
}
@media (max-width: 640px) { .why-cocoon-media { min-height: 220px; } }

.home-makes-strip { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.home-make-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--border); color: var(--navy); font-weight: 700;
  font-size: .86rem; padding: 8px 16px 8px 10px; border-radius: 999px; text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.home-make-chip img { width: 20px; height: 20px; object-fit: contain; }
.home-make-chip:hover { background: var(--cream); transform: translateY(-1px); }

.home-trend-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.home-trend-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--border); color: var(--navy); font-weight: 700;
  font-size: .86rem; padding: 8px 16px; border-radius: 999px; text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.home-trend-chip span { color: var(--muted); font-weight: 600; font-size: .78rem; }
.home-trend-chip:hover { background: var(--cream); transform: translateY(-1px); }

/* Internal mode (?internal=1) — staff-only reference data layered on top
   of the normal customer-facing pages. */
.cc-internal-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: #1a1a1a; color: #fff;
  font-size: .78rem; padding: 8px 16px; text-align: center;
}
.cc-internal-bar a { color: #ffd166; text-decoration: underline; margin-left: 6px; }
.cc-internal-ref {
  display: inline-block; background: #1a1a1a; color: #ffd166; font-weight: 700;
  font-size: .68rem; padding: 2px 7px; border-radius: 5px; margin-left: 6px; letter-spacing: .02em;
}

/* /stock/{slug}/ — one page per physical stock vehicle (assets/stock-detail.js) */
.stock-detail-grid { display: grid; gap: 28px; grid-template-columns: 1fr; margin-top: 10px; }
@media (min-width: 860px) { .stock-detail-grid { grid-template-columns: 1.1fr 1fr; align-items: start; } }
.stock-spec-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.stock-spec-list li { font-size: .86rem; color: var(--text); padding-left: 14px; position: relative; }
.stock-spec-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--orange); }
.stock-spec-table { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin-top: 10px; }
.stock-spec-row { display: flex; justify-content: space-between; gap: 16px; background: #fff; padding: 10px 14px; font-size: .84rem; }
.stock-spec-row span:first-child { font-weight: 700; color: var(--muted); }
.stock-spec-row span:last-child { color: var(--text); text-align: right; }
.stock-spec-subhead { font-size: .82rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 22px 0 0; }
.stock-spec-subhead:first-of-type { margin-top: 12px; }