/* ============================================================
   RIZON AUTODEALER — Shared Design System
   Brand: Rizon Maps purple. Structure: Carma-style.
   ============================================================ */

:root {
  /* ------------------------------------------------------------
     BRAND PURPLE — single source of truth for the whole site.
     To change the brand colour, edit --purple here AND the
     RIZON_ACCENT constant in config.php (they must match).

     09.08.26: the whole ladder was rebuilt around #4A237A. The old one was
     anchored on #6D28D9 at hue 263 / lightness 50% — technically violet, but
     bright and blue-leaning on screen. Every step below is the SAME hue
     family (~267) at a lower lightness and saturation, which is what makes it
     read as purple instead of blue. Keep the ladder in step if you change it.
     ------------------------------------------------------------ */
  --purple-deep:   #351957;   /* darkest — deep edges / hero top */
  --purple-deep-2: #351957;
  --purple:        #4A237A;   /* MAIN brand purple (buttons, links, accents) */
  --purple-bright: #6530A6;   /* lighter — gradient top end */
  --lilac:         #8753C6;
  --lilac-soft:    #C4A5E9;
  --lilac-bg:      #F4F0FA;

  /* Neutrals */
  --ink:      #1A1225;
  --ink-2:    #3A3348;
  --grey:     #6B6478;
  --grey-2:   #9A93A8;
  --line:     #E8E4F0;
  --off:      #FAFAFC;
  --white:    #FFFFFF;

  /* Status */
  --sold:     #DC2626;
  --success:  #16A34A;

  /* System */
  --hero-grad: linear-gradient(160deg, #6530A6 0%, #4A237A 60%, #351957 100%);
  --purple-grad: linear-gradient(135deg, #8753C6 0%, #4A237A 100%);
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow:    0 4px 20px rgba(45, 20, 78, 0.08);
  --shadow-lg: 0 12px 40px rgba(45, 20, 78, 0.14);
  --maxw:      1660px;

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

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

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

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* Horizontal padding uses LONGHANDS on purpose. `.wrap` is combined with a
   second class on several pages (`wrap inv-layout`, `wrap veh-layout`,
   `wrap cmp-page`...) and those classes set their own top/bottom padding. A
   `padding: 0 20px` shorthand here silently resets their vertical padding to
   zero whenever this rule wins on source order. Never use the shorthand. */
.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; color: var(--ink); letter-spacing: -0.02em; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 14px 28px; border-radius: 999px; border: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--purple-grad); color: #fff; box-shadow: 0 6px 18px rgba(101,48,166,.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(101,48,166,.45); }
.btn-ghost { background: transparent; color: var(--purple); border: 2px solid var(--lilac-soft); }
.btn-ghost:hover { background: var(--lilac-bg); border-color: var(--purple); }
.btn-white { background: #fff; color: var(--purple); }
.btn-white:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-block { width: 100%; }

/* ---------- Header ---------- */
/* ============================================================
   TOP ANNOUNCEMENT BAR
   Sits ABOVE the sticky header, so it scrolls away on scroll while
   the header stays pinned (same behaviour as the carsales bar).
   ============================================================ */
/* .top-banner = the bar at the top of the page.
   .cta-banner  = the same bar sitting just above the footer.
   They share every rule so the two always look identical. */
.top-banner, .cta-banner { background: var(--purple); color: #fff; }
.top-banner .wrap, .cta-banner .wrap { display: flex; align-items: center; justify-content: center; min-height: 42px; padding-top: 8px; padding-bottom: 8px; }
.top-banner p, .cta-banner p {
  margin: 0; text-align: center;
  font-size: .88rem; font-weight: 500; line-height: 1.35; color: #fff;
  text-wrap: balance;   /* keeps wrapped lines even instead of a long line + orphan */
}
@media (max-width: 700px) {
  .top-banner .wrap, .cta-banner .wrap { min-height: 0; padding-top: 9px; padding-bottom: 9px; }
  .top-banner p, .cta-banner p { font-size: .78rem; }
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px; background: var(--purple-grad);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 4px 12px rgba(101,48,166,.35);
}
/* Three columns: brand | links | buttons. The 1fr on each side is what puts
   the links dead centre in the header, whatever the brand or buttons measure.
   display:contents on .nav-wrap lets .nav and .nav-actions be grid children
   here while still being one element for the mobile panel to open. */
.nav-wrap { display: contents; }
/* Only the phone panel uses these — see the 1050px block further down. */
.nav-panel-head, .nav-close { display: none; }
.nav { display: flex; align-items: center; justify-content: center; gap: 28px; }
.nav a { font-weight: 500; font-size: .95rem; color: var(--ink-2); transition: color .15s; }
.nav a:hover, .nav a.active { color: var(--purple); }
.nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; }
.nav-cta { padding: 12px 26px; font-size: 1rem; background: var(--purple-grad); }
/* NOTE: the two header buttons live in <span class="nav-actions">, which is
   OUTSIDE <nav>. So selectors starting with `.nav a` do NOT reach them —
   that is why the old `.nav a.nav-cta-ghost` rule never did anything.
   Target them with `a.nav-cta...` instead. */
a.nav-cta, a.nav-cta:hover { color: #fff; }
/* Outlined button: white, thin dark hairline border, text the same colour as
   the rest of the menu links. Must come AFTER the rule above — same
   specificity, so source order decides which one wins. */
a.nav-cta-ghost {
  background: #fff; color: var(--ink-2);
  border: 1px solid rgba(26,18,37,.40); box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}
/* Hover matches the other nav links: text turns purple, border follows. */
a.nav-cta-ghost:hover { background: #fff; color: var(--purple); border-color: var(--purple); }
.menu-btn { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-btn span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ---------- Hero ---------- */
.hero { background: var(--hero-grad); color: #fff; position: relative; overflow: hidden; padding: 72px 0 120px; }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .5;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 6vw, 3.6rem); max-width: 720px; }
.hero h1 .accent { color: var(--lilac-soft); }
.hero p.lead { font-size: 1.15rem; color: rgba(255,255,255,.85); max-width: 560px; margin: 20px 0 32px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* The curve must match whatever sits BELOW the hero, otherwise a white band
   shows between the curve and the page background. currentColor lets that be
   set here once instead of being hardcoded in every page's SVG. */
.hero-curve { position: absolute; bottom: -1px; left: 0; width: 100%; z-index: 3; line-height: 0; color: #F7F6FA; }
.hero-curve svg { width: 100%; height: 60px; display: block; }

/* Hero search bar */
.hero-search {
  margin-top: 40px; background: #fff; border-radius: var(--radius);
  padding: 14px; display: flex; gap: 10px; flex-wrap: wrap; box-shadow: var(--shadow-lg); max-width: 720px;
}
.hero-search select, .hero-search input {
  flex: 1 1 140px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 14px; font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: var(--off);
}
.hero-search .btn { flex: 1 1 120px; }

/* ---------- Sections ---------- */
/* Section rhythm. Scales with the WIDTH of the screen (not the height), so a
   narrow window gets tighter spacing automatically. Was a flat 72px, which
   left ~144px of empty space between sections on the home page. */
.section { padding: clamp(34px, 3.6vw, 54px) 0; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto clamp(24px, 2.2vw, 34px); }
.section-head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-top: 10px; }
.section-head p { color: var(--grey); font-size: 1.05rem; margin-top: 12px; }

/* ---------- Vehicle cards ---------- */
.car-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.car-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; position: relative;
}
.car-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.car-card-img { position: relative; aspect-ratio: 4/3; background: var(--lilac-bg); overflow: hidden; }
.car-card-img img { width: 100%; height: 100%; object-fit: cover; }
.car-badge {
  position: absolute; top: 12px; left: 12px; padding: 6px 12px; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff;
}
.car-badge.sold {
  background: linear-gradient(135deg,#F4F5F7 0%,#D8DCE3 38%,#FFFFFF 52%,#C7CCD6 68%,#EDEFF3 100%);
  color: #3F3A47;
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.85);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.car-badge.featured { background: var(--purple-grad); }
.car-fav {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: none; display: grid; place-items: center; cursor: pointer; font-size: 1.1rem;
}
.car-card-body { padding: 18px; }
.car-title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.car-variant { color: var(--grey); font-size: .9rem; margin: 2px 0 12px; }
.car-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; color: var(--ink-2); margin-bottom: 14px; }
.car-meta span { display: inline-flex; align-items: center; gap: 5px; }
.car-price-row { display: flex; align-items: baseline; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 14px; }
.car-price { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--ink); }
.car-weekly { font-size: .82rem; color: var(--grey); }

/* ---------- Category tiles ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
.cat-tile {
  background: var(--off); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 18px; text-align: center; transition: .18s; cursor: pointer;
}
.cat-tile:hover { background: var(--lilac-bg); border-color: var(--lilac); transform: translateY(-3px); }
.cat-icon { font-size: 2rem; margin-bottom: 10px; }
.cat-tile h4 { font-size: 1rem; }
.cat-tile span { font-size: .82rem; color: var(--grey); }

/* ---------- Trust strip ---------- */
.trust { background: var(--lilac-bg); }
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; text-align: center; }
.trust-item .num { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; color: var(--purple); }
.trust-item .lbl { color: var(--grey); font-weight: 500; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; }
.step { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.step-num { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; width: 44px; height: 44px; border-radius: 12px; background: var(--purple-grad); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.step h4 { font-size: 1.15rem; margin-bottom: 8px; }
.step p { color: var(--grey); font-size: .95rem; }

/* ---------- CTA band ---------- */
.cta-band { background: var(--hero-grad); color: #fff; text-align: center; border-radius: var(--radius-lg); padding: 56px 30px; position: relative; overflow: hidden; }
.cta-band h2 { color: #fff; font-size: clamp(1.4rem,2.9vw,1.9rem); line-height: 1.25; }
.cta-band p { color: rgba(255,255,255,.9); margin: 14px 0 26px; font-size: 1.25rem; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,.75); padding: 54px 0 26px; margin-top: 20px; }
/* When the CTA bar is present, drop the footer's top margin so the purple
   bar sits flush on the dark footer instead of floating above it. */
.cta-banner + .site-footer { margin-top: 0; }
/* Four columns since the Company column was removed (was 1.5fr + 4). */
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; margin-bottom: 36px; }
.foot-blurb { font-size: .9rem; max-width: 280px; margin-bottom: 16px; line-height: 1.6; }
.foot-contact a, .foot-contact span { display: block; padding: 4px 0; font-size: .9rem; color: rgba(255,255,255,.7); }
.foot-credit { margin-top: 8px; color: rgba(255,255,255,.5) !important; font-size: .85rem !important; }
.foot-credit a { display: inline !important; padding: 0 !important; color: rgba(255,255,255,.72) !important; text-decoration: none; }
.foot-credit a:hover { color: var(--lilac-soft) !important; }
.site-footer .brand { color: #fff; margin-bottom: 14px; }
.site-footer h5 { color: #fff; font-family: var(--font-display); font-size: .95rem; margin-bottom: 14px; letter-spacing: .02em; }
.site-footer a { display: block; padding: 5px 0; color: rgba(255,255,255,.7); font-size: .92rem; transition: color .15s; }
.site-footer a:hover { color: var(--lilac-soft); }
/* Bottom block — same look as the rizonmaps.com footer: centred, monospace,
   generous line spacing, slightly brighter than the link columns. */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding-top: 30px;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: .95rem; letter-spacing: .01em; color: rgba(255,255,255,.82);
}
.footer-bottom p { margin: 0 0 16px; line-height: 1.5; }
.footer-bottom p:last-child { margin-bottom: 0; }
.fb-made a { display: inline; color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.fb-made a:hover { color: var(--lilac-soft); }
.fb-legal { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 22px; }
.fb-legal a { display: inline; padding: 0; color: rgba(255,255,255,.82); }
.fb-legal a:hover { color: var(--lilac-soft); }
.fb-legal span { color: rgba(255,255,255,.3); }
/* On phones the copyright wraps wherever it runs out of room, which split it
   mid-name. Forcing "All rights reserved." onto its own line makes the break
   deliberate instead of accidental. Desktop keeps it on one line. */
@media (max-width: 600px) { .fb-rights { display: block; } }

/* Purple heart with a soft double beat */
.foot-heart {
  display: inline-block; color: #BE9DE7; font-size: 1.05em;
  animation: foot-beat 1.8s ease-in-out infinite;
}
@keyframes foot-beat {
  0%, 100% { transform: scale(1); }
  12%      { transform: scale(1.28); }
  24%      { transform: scale(1); }
  36%      { transform: scale(1.18); }
  48%      { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .foot-heart { animation: none; } }

/* ---------- Mobile ---------- */
/* Squeeze zone: between 1050 and 1366 the two buttons are wider than the
   space opposite the brand, which drags the centred links off-centre. Tighten
   the gaps and the buttons so the three columns stay balanced. */
@media (min-width: 1051px) and (max-width: 1366px) {
  .nav { gap: 18px; }
  .nav a { font-size: .9rem; }
  .nav-cta { padding: 10px 16px; font-size: .88rem; }
  .nav-actions { gap: 8px; }
}

/* The menu collapses at 1050px, not 860px: with two buttons in the corner the
   links no longer fit alongside them below roughly 1000px. */
@media (max-width: 1050px) {
  /* The closed menu is parked above the header with translateY. That alone
     only just cleared the screen before; with the announcement bar pushing
     the header down, the panel's bottom edge poked over the bar. visibility
     keeps it unpainted while closed, whatever the header's offset is. */
  .site-header .wrap { display: flex; justify-content: space-between; }

  /* FULL-SCREEN MENU (modelled on rizonmaps.com): its own brand row on top,
     scrollable list in the middle, the two buttons pinned to the bottom.
     It covers the site header, hence .nav-panel-head. Slides in from the
     right; body scroll is locked by .nav-open in site.js. */
  .nav-wrap {
    display: flex; flex-direction: column;
    position: fixed; inset: 0; z-index: 1100;
    height: 100vh; height: 100dvh;
    background: #fff; padding: 0;
    transform: translateX(100%); visibility: hidden;
    transition: transform .3s cubic-bezier(.4,0,.2,1), visibility .3s;
    overflow-y: auto; overscroll-behavior: contain;
  }
  .nav-wrap.open { transform: translateX(0); visibility: visible; }
  body.nav-open { overflow: hidden; }

  .nav-panel-head {
    display: flex; align-items: center; justify-content: space-between;
    flex: 0 0 auto; gap: 12px;
    padding: 14px 18px; background: var(--off);
    border-bottom: 1px solid var(--line);
  }
  .nav-panel-head .brand { font-size: 1.15rem; }
  .nav-close {
    display: grid; place-items: center;
    width: 42px; height: 42px; flex: 0 0 auto;
    background: none; border: none; cursor: pointer; color: var(--ink);
  }
  .nav-close svg { width: 24px; height: 24px; }

  /* The whole panel scrolls as one column: list first, buttons right after it.
     flex-start is essential — the desktop .nav rule sets justify-content:center,
     which in a tall column pushes everything to the middle and leaves a big
     empty gap above the first link. */
  .nav {
    flex: 0 0 auto; justify-content: flex-start;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 4px 22px 0;
  }
  /* flex:0 0 auto on every row too, so nothing gets squeezed thinner than its
     own padding — that was what made the Resources row look compressed. */
  .nav > a, .nav > .nav-dd { flex: 0 0 auto; border-bottom: 1px solid var(--line); }
  .nav > a:last-child, .nav > .nav-dd:last-child { border-bottom: none; }
  .nav a {
    padding: 18px 2px; border-radius: 0;
    font-family: var(--font-body); font-weight: 500;
    font-size: 1.08rem; line-height: 1.4; color: var(--ink);
  }
  .nav a:hover, .nav a:active { background: none; color: var(--purple); }
  .nav a.active { color: var(--purple); }

  /* NOTE: the Resources accordion rules are NOT here. The base .nav-dd block
     sits further down this file, and media queries add no specificity — a
     later plain rule beats an earlier @media one. They live in their own
     @media block immediately after that base block instead. */

  /* The buttons follow the list instead of being pinned to the bottom edge:
     nothing floats over them, and on a short menu they are not stranded alone
     at the foot of the screen. */
  .nav-actions {
    flex: 0 0 auto; flex-direction: row; align-items: stretch; gap: 12px;
    justify-self: auto; width: auto;
    margin: 22px 22px calc(28px + env(safe-area-inset-bottom));
    padding-top: 22px; border-top: 1px solid var(--line);
  }
  .nav-actions .btn { flex: 1 1 0; min-width: 0; text-align: center; padding: 15px 8px; font-size: 1rem; }
  .nav-cta { margin: 0; }

  /* The floating chat button is a direct child of <body> at z-index 999, while
     the panel's 1100 is trapped inside .site-header's own stacking context
     (z-index 100). So the FAB paints OVER the menu no matter how high the
     panel goes — the only reliable fix is to take it out while the menu is open. */
  body.nav-open .fab { display: none; }

  .menu-btn { display: block; }
}
@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .section { padding: 52px 0; }
  .hero { padding: 48px 0 100px; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
  .car-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   INVENTORY PAGE (Part 2)
   ============================================================ */
.inv-top { background: var(--off); border-bottom: 1px solid var(--line); padding: 28px 0; }
.inv-top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.inv-top h1 { font-size: 1.7rem; }
.inv-count { color: var(--grey); font-weight: 500; font-size: 1.1rem; }
.inv-sortbar { display: flex; align-items: center; gap: 12px; }
.inv-sortbar label { font-size: .9rem; color: var(--grey); display: flex; align-items: center; gap: 8px; }
.inv-sortbar select { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px; font-family: var(--font-body); font-size: .9rem; background: #fff; color: var(--ink); }
.inv-filter-toggle { display: none; padding: 10px 20px; font-size: .9rem; }

.inv-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; padding-top: 32px; padding-bottom: 40px; align-items: start; }
/* top: 100px = the 68px header + 32px, the same 32px .inv-layout uses for its
   own top padding — so the gap above the panel looks identical whether the
   page is at the top or scrolled and the panel is pinned. If the header height
   ever changes from 68px, change this and .veh-side together. */
.inv-filters { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: sticky; top: 100px; }
.filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.filter-head h3 { font-size: 1.2rem; }
.filter-clear { color: var(--purple); font-size: .85rem; font-weight: 600; }
.filter-group { margin-bottom: 18px; }
.filter-label { display: block; font-weight: 600; font-size: .88rem; margin-bottom: 8px; color: var(--ink-2); }
.filter-group select, .filter-group input { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 11px 12px; font-family: var(--font-body); font-size: .9rem; background: var(--off); color: var(--ink); }
.filter-row { display: flex; gap: 8px; }
.filter-row input { width: 50%; }

.inv-results { min-height: 300px; }
.inv-results .car-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.inv-empty { text-align: center; padding: 60px 20px; background: var(--off); border-radius: var(--radius); }
.inv-empty h3 { margin: 12px 0 6px; }
.inv-empty p { color: var(--grey); margin-bottom: 20px; }
.finance-disclaimer { font-size: .78rem; color: var(--grey-2); margin-top: 28px; line-height: 1.5; }

@media (max-width: 900px) {
  .inv-layout { grid-template-columns: 1fr; }
  .inv-filters { position: static; display: none; }
  .inv-filters.open { display: block; }
  .inv-filter-toggle { display: inline-flex; }
}

/* ============================================================
   VEHICLE DETAIL PAGE (Part 3)
   ============================================================ */
.veh-breadcrumb { padding: 20px 20px 0; }
.veh-breadcrumb a { color: var(--purple); font-weight: 600; font-size: .9rem; }
.veh-layout { display: grid; grid-template-columns: 1fr 380px; gap: 36px; padding: 24px 20px 48px; align-items: start; }
.veh-main { min-width: 0; }

.veh-main-img { position: relative; aspect-ratio: 4/3; border-radius: var(--radius); overflow: hidden; background: var(--lilac-bg); }
.veh-main-img img { width: 100%; height: 100%; object-fit: cover; }
/* Magnifier lens + fullscreen viewer on the main photo */
.veh-main-img img { cursor: zoom-in; }
/* AI notice on the main vehicle photo. Deliberately small and low-contrast:
   it has to be readable without competing with the car. Centred at the top
   because that edge is empty on every photo in the set — the Sold badge sits
   top-LEFT and the zoom button bottom-right, so nothing collides.
   pointer-events:none keeps the magnifier and the click-to-zoom working
   through it. */
.veh-ai-note {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  pointer-events: none; text-align: center;
  padding: 7px 12px;
  font-size: .72rem; line-height: 1.35; letter-spacing: .01em;
  color: #fff; background: rgba(16,10,28,.42);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
@media (max-width: 600px) { .veh-ai-note { font-size: .64rem; padding: 6px 10px; } }

.veh-lens {
  position: absolute; z-index: 3; pointer-events: none;
  width: 190px; height: 190px; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.85);
  border: 3px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 28px rgba(15,20,32,.35), inset 0 0 0 1px rgba(15,20,32,.15);
  background-repeat: no-repeat;
  opacity: 0; transition: opacity .13s ease, transform .13s ease;
}
.veh-lens.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
/* Lens is desktop-only; on touch the photo just opens fullscreen. */
@media (hover: none), (pointer: coarse) { .veh-lens { display: none; } }
.veh-zoom {
  position: absolute; right: 12px; bottom: 12px; z-index: 2;
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(15,18,28,.55); color: #fff;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: background .15s, transform .15s;
}
.veh-zoom:hover { background: rgba(15,18,28,.78); transform: scale(1.06); }
.veh-zoom svg { width: 20px; height: 20px; }

.veh-lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(10,12,18,.94); display: flex; align-items: center; justify-content: center; padding: 20px; }
.veh-lightbox[hidden] { display: none; }
.veh-lightbox img { max-width: 94vw; max-height: 88vh; object-fit: contain; border-radius: 8px; }
.vl-close { position: absolute; top: 14px; right: 18px; background: none; border: none; color: #fff; font-size: 2.6rem; line-height: 1; cursor: pointer; padding: 0 8px; opacity: .85; }
.vl-close:hover { opacity: 1; }
.vl-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.12); border: none; color: #fff; font-size: 2.2rem; line-height: 1; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.vl-nav:hover { background: rgba(255,255,255,.24); }
.vl-prev { left: 16px; }
.vl-next { right: 16px; }
.vl-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.8); font-size: .9rem; }
@media (max-width: 700px) {
  .veh-zoom { width: 38px; height: 38px; right: 10px; bottom: 10px; }
  .vl-nav { width: 40px; height: 40px; font-size: 1.8rem; }
  .vl-prev { left: 8px; } .vl-next { right: 8px; }
  .veh-lightbox img { max-width: 100vw; max-height: 78vh; }
}

/* ===== Gallery — photo never cropped, thumbs beside it =====
   The photo keeps its true 4:3 (nothing is cut). To get the photo AND the
   thumbnails on one screen, the gallery is capped by the WINDOW HEIGHT:
     image height = 100dvh - 174px
     (header 68 + breadcrumb 42 + layout padding 24 + air 40)
   and the width follows from 4:3. Thumbs sit in a rail on the right so the
   width the cap gives back isn't left as dead space.
   If you want the photo bigger or smaller, change ONLY the 174px. */
.veh-gallery {
  display: grid;
  grid-template-columns: 1fr 92px;
  gap: 12px;
  align-items: start;
  max-width: min(100%, max(560px, calc((100dvh - 174px) * 4 / 3 + 104px)));
}
.veh-gallery--solo { grid-template-columns: 1fr; }   /* car with a single photo */

/* THUMBNAIL WINDOW.
   The rail shows SIX thumbs and scrolls for the rest, so a car with 15 photos
   occupies exactly the same space as one with 6 — the layout never grows.
   6 * 69px + 5 * 10px = 464px. The window-height cap still wins on short
   screens, hence the min().
   VALUE LIVES IN TWO PLACES: this 6 and the VEH_THUMB_CAP constant in
   pages/vehicle.php, which decides whether the ">" button is rendered. */
.veh-thumbs-col { display: flex; flex-direction: column; gap: 10px; }
.veh-thumbs {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 0;
  max-height: min(calc(100dvh - 174px), calc(6 * 69px + 5 * 10px));
  overflow-y: auto; scroll-behavior: smooth;
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;
}
.veh-thumbs::-webkit-scrollbar { width: 0; height: 0; }   /* the ">" is the control */
.veh-thumb { width: 92px; height: 69px; border-radius: 10px; overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; background: none; flex: 0 0 auto; }
.veh-thumb.active { border-color: var(--purple); }
.veh-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ">" — scrolls the rail one page. Only rendered when there are extra photos. */
.veh-thumbs-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 92px; height: 34px; flex: 0 0 auto;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--purple); cursor: pointer; transition: background .15s, border-color .15s;
}
.veh-thumbs-more:hover { background: var(--lilac-bg); border-color: var(--purple); }
.veh-thumbs-more svg { width: 16px; height: 16px; transform: rotate(90deg); }  /* points DOWN beside a vertical rail */
.vtm-n { font-family: var(--font-display); font-weight: 700; font-size: .82rem; line-height: 1; }

/* ===== Trade-in bar under the gallery =====
   Short version of the Sell card: two fields + Start on the same line.
   It forwards to /sell with the values prefilled — no data is stored here. */
.veh-trade {
  margin-top: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px 14px;
}
.vt-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vt-head strong { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.vt-head span { color: var(--grey); font-size: .88rem; }
.vt-row { display: grid; grid-template-columns: 1fr 1fr 170px; gap: 12px; align-items: end; }
.vt-row .tf-group { margin-bottom: 0; }
.vt-btn { height: 49px; padding: 0 20px; }
.vt-note { color: var(--grey); font-size: .8rem; margin: 10px 0 0; }
#vtError { margin: 12px 0 0; }
@media (max-width: 760px) {
  .vt-row { grid-template-columns: 1fr; }
  .vt-btn { width: 100%; }
}

/* Mobile: back to one column, thumbs in a row under the photo, no height cap */
@media (max-width: 900px) {
  .veh-gallery { display: block; max-width: none; }
  /* nowrap + overflow-x, NOT flex-wrap. Wrapping was the real problem: 15
     photos became four stacked rows of thumbs that pushed the whole page
     down. One scrolling strip always costs the same height. */
  .veh-thumbs-col { flex-direction: row; align-items: center; gap: 8px; margin-top: 12px; }
  .veh-thumbs {
    flex-direction: row; flex-wrap: nowrap; margin-top: 0;
    max-height: none; overflow-x: auto; overflow-y: hidden;
  }
  .veh-thumb { width: 88px; height: 66px; }
  .veh-thumbs-more { width: 40px; height: 66px; flex-direction: column; }
  .veh-thumbs-more svg { transform: none; }        /* points RIGHT beside a row */
  .vtm-n { font-size: .74rem; }
}

/* ===== Sticky summary bar =====
   Slides in under the header once the price in the buybox is off screen. */
.veh-stickybar {
  position: fixed; left: 0; right: 0; top: 68px; z-index: 90;
  background: #fff; border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 26px rgba(15,20,32,.09);
  transform: translateY(-115%); opacity: 0; pointer-events: none;
  transition: transform .22s ease, opacity .22s ease;
}
.veh-stickybar.on { transform: none; opacity: 1; pointer-events: auto; }
.vsb-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding-top: 8px; padding-bottom: 8px; }
.vsb-title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.2; }
.vsb-car { flex: 0 1 auto; min-width: 0; }
.vsb-meta { display: block; color: var(--grey); font-size: .85rem; margin-top: 2px; }
.vsb-meta i { font-style: normal; margin: 0 4px; }
.vsb-right { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
.vsb-thumbs { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; justify-content: center; min-width: 0; overflow: hidden; }
.vsb-thumb { width: 64px; height: 48px; flex: 0 0 auto; border: 1.5px solid var(--line); border-radius: 8px; overflow: hidden; padding: 0; background: none; cursor: pointer; transition: border-color .15s, transform .15s; }
.vsb-thumb:hover { border-color: var(--purple); transform: translateY(-2px); }
.vsb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1280px) { .vsb-thumb:nth-child(n+5) { display: none; } }
@media (max-width: 1100px) { .vsb-thumbs { display: none; } }
.vsb-price { text-align: right; }
.vsb-amount { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: var(--ink); line-height: 1.1; }
.vsb-weekly { display: block; color: var(--grey); font-size: .78rem; margin-top: 2px; }
.vsb-btn { padding: 12px 28px; white-space: nowrap; }
@media (max-width: 900px) {
  .vsb-meta, .vsb-weekly { display: none; }
  .vsb-inner { gap: 12px; min-height: 58px; }
  .vsb-title { font-size: .92rem; }
  .vsb-amount { font-size: 1.15rem; }
  .vsb-right { gap: 12px; }
  .vsb-btn { padding: 10px 16px; font-size: .9rem; }
}

.veh-block { margin-top: 36px; }
.veh-block h2 { font-size: 1.4rem; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.veh-desc { color: var(--ink-2); font-size: 1.02rem; }
.veh-features { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 20px; }
.veh-features li { color: var(--ink-2); font-size: .95rem; }
.veh-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.spec-row { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.spec-k { color: var(--grey); }
.spec-v { color: var(--ink); font-weight: 600; text-align: right; }

.veh-side { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 20px; }
.veh-buybox { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.veh-title { font-size: 1.4rem; }
.veh-variant { color: var(--grey); margin: 2px 0 14px; }
.veh-price { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--ink); }
.veh-weekly { color: var(--grey); font-size: .9rem; margin-top: 4px; }
.veh-sold-note { background: #FEF2F2; color: var(--sold); padding: 12px; border-radius: var(--radius-sm); font-size: .88rem; margin-top: 14px; }

.veh-calc { background: var(--lilac-bg); border-radius: var(--radius); padding: 22px; }
.veh-calc h3 { font-size: 1.2rem; margin-bottom: 16px; }
.calc-field { margin-bottom: 16px; }
.calc-field label { display: block; font-size: .92rem; font-weight: 600; color: var(--ink-2); margin-bottom: 7px; }
/* Inputs do NOT inherit font-size — only font-family was set here, so the
   browser default (about 13px) was making the typed numbers look smaller
   than everything around them. */
.calc-field input[type=number] {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 12px 13px; font-family: var(--font-body);
  font-size: 1.15rem; font-weight: 700; color: var(--ink); background: #fff;
}
.calc-field input[type=range] { width: 100%; accent-color: var(--purple); }
.calc-result { background: #fff; border-radius: var(--radius-sm); padding: 18px 16px; text-align: center; margin-top: 6px; }
/* Only the label directly inside .calc-result is small — NOT the number
   span inside .calc-weekly (that bug made "$367/week*" render as
   "$" big, "367" tiny, "/week*" big). */
.calc-result > span { font-size: .9rem; color: var(--grey); }
.calc-weekly { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--purple); margin-top: 2px; }
.calc-weekly span { font-size: inherit; font-weight: inherit; color: inherit; }

/* --- Vehicle page: white panel around Description / Features / Specs / Service --- */
.veh-panel {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 30px 32px; margin-top: 28px;
}
.veh-panel .veh-block:first-child { margin-top: 0; }

/* --- Vehicle page: km + transmission under the title (matches the cards) --- */
.veh-meta { color: var(--grey); font-size: .95rem; margin: 6px 0 0; }
.veh-meta span { margin: 0 4px; }

/* --- Share button (replaces the old Call button) --- */
.veh-share { display: inline-flex; align-items: center; justify-content: center; gap: 9px; }
.veh-share svg { width: 17px; height: 17px; flex: 0 0 17px; }

/* --- Trust badges under the Share button --- */
/* A bordered card of its own, echoing the outlined button above it, so the
   two promises read as a selling point instead of a footnote. */
.veh-badges {
  margin-top: 18px; padding: 6px 16px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, var(--lilac-bg) 190%);
}
.vb-item { display: flex; align-items: center; gap: 13px; padding: 13px 0; }
.vb-item + .vb-item { border-top: 1px solid var(--off); }
/* Icon disc — same treatment as the other feature icons on the site */
.vb-ico {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--purple);
  background: linear-gradient(160deg, #fff 0%, var(--lilac-bg) 100%);
  box-shadow: inset 0 0 0 1px rgba(74,35,122,.18), 0 2px 6px rgba(74,35,122,.10);
}
.vb-ico svg { width: 21px; height: 21px; }
.vb-txt { font-family: var(--font-display); font-weight: 700; font-size: .96rem; line-height: 1.3; color: var(--ink); }

/* --- Service history --- */
.svc-box { background: var(--off); border-radius: 14px; padding: 20px 22px; }
.svc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid rgba(15,20,32,.08); }
.svc-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--lilac-bg); color: var(--purple); display: flex; align-items: center; justify-content: center; }
.svc-ico svg { width: 20px; height: 20px; }
.svc-head-txt { display: flex; flex-direction: column; font-size: .85rem; color: var(--grey); }
.svc-head-txt strong { font-size: .95rem; color: var(--ink); font-weight: 700; margin-top: 2px; }
.svc-list { list-style: none; margin: 0; padding: 0; }
.svc-list li { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(15,20,32,.06); font-size: .92rem; }
.svc-list li:last-child { border-bottom: none; padding-bottom: 0; }
.svc-list li span { color: var(--ink-2); }
.svc-list li strong { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* --- "More options" carousel (one row, reuses the home page carousel) --- */
.more-options { padding-top: 20px; padding-bottom: 0; }
/* The carousel sits inside .wrap so it lines up with the rest of the page
   instead of running edge to edge. Negative margin only cancels .wrap's own
   side padding, so the fade mask still starts at the content edge. */
.more-options .carousel { margin-left: -6px; margin-right: -6px; }

/* Was 20+56 above and 56 below, and .more-options added another 72 on top of
   that — 128px of dead space between the box and the carousel. */
.veh-enquire { background: var(--off); padding: 36px 0 34px; margin-top: 0; }
/* Narrower than the page: the box holds less content now, and a full-width
   card would leave the map and tiles floating in empty space. */
/* Content column + a 380px illustration column, matching the Finance
   calculator sidebar above it, so both edges line up down the page. */
.enquire-outer { display: grid; grid-template-columns: 1fr 380px; gap: 36px; align-items: stretch; }
.enquire-box { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 40px; }

/* The image column has no content of its own — the box on its left sets the
   height, and the photo is cropped to fill it.
   Three slides cross-fade on a 12s loop (4s each). Negative animation delays
   mean slide 2 and 3 start mid-cycle, so there is no blank first frame. */
.enquire-aside {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background-image: linear-gradient(160deg, #6530A6, #351957);   /* fallback */
  background-size: cover; background-position: center;
  box-shadow: 0 12px 34px rgba(15,20,32,.10);
}
.ea-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: ea-cycle 12s infinite;
}
.ea-1 { background-image: url(/cardealers/assets/enquire-side-1.webp); animation-delay:  0s; }
.ea-2 { background-image: url(/cardealers/assets/enquire-side-2.webp); animation-delay: -8s; }
.ea-3 { background-image: url(/cardealers/assets/enquire-side-3.webp); animation-delay: -4s; }
@keyframes ea-cycle {
  0%, 28%  { opacity: 1; }
  33%, 95% { opacity: 0; }
  100%     { opacity: 1; }
}
/* Respect the OS "reduce motion" setting — show only the first slide. */
@media (prefers-reduced-motion: reduce) {
  .ea-slide { animation: none; opacity: 0; }
  .ea-1 { opacity: 1; }
}
.enquire-head h2 { font-size: 1.7rem; margin: 8px 0 10px; }
.enquire-head p { color: var(--grey); }
.enquire-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 28px; align-items: start; }
.enquire-cols--single { grid-template-columns: 1fr; max-width: 560px; }

/* Section headings inside the box (pin / clock) */
.ei-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 10px; }
.ei-head svg { width: 18px; height: 18px; color: var(--purple); flex: 0 0 18px; }
.ei-address { color: var(--ink-2); font-size: .95rem; margin-bottom: 16px; }

/* Opening hours */
.ei-hours { list-style: none; margin: 0 0 22px; padding: 0; }
.ei-hours li { padding: 4px 0; font-size: .95rem; }
.ei-hours span { color: var(--grey); }
.ei-hours strong { color: var(--ink); font-weight: 600; }

/* Map — fills its column */
.enquire-map { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; background: var(--lilac-bg); }
.enquire-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Four direct-contact tiles, 2 x 2 */
.enquire-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ec-tile { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ec-tile:hover { border-color: var(--purple); box-shadow: 0 8px 22px rgba(15,20,32,.08); transform: translateY(-2px); }
.ec-txt { min-width: 0; }
.ec-txt strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); }
.ec-txt span { display: block; font-size: .85rem; color: var(--purple); margin-top: 2px; word-break: break-word; }
.ec-ico { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: var(--lilac-bg); color: var(--ink); display: flex; align-items: center; justify-content: center; }
.ec-ico svg { width: 19px; height: 19px; }

/* .ef-row is shared with the contact page form — keep it. */
.ef-row { display: flex; gap: 12px; }
.ef-row input { width: 50%; }
.veh-thanks { text-align: center; padding: 40px 20px; }
.veh-thanks h3 { font-size: 1.5rem; margin-bottom: 8px; }

@media (max-width: 900px) {
  .veh-layout { grid-template-columns: 1fr; }
  .veh-side { position: static; }
  .veh-specs { grid-template-columns: 1fr; }
  .enquire-box { padding: 28px 22px; }

  /* Stacked, same rhythm as the home page contact strip:
       heading -> address -> hours -> map -> buttons
     display:contents dissolves the two column wrappers so their children
     become direct grid items and can be reordered across them. Without it
     the map is trapped inside the address column and can't move below the
     hours. */
  .enquire-cols { grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
  .enquire-place, .enquire-reach { display: contents; }
  .enquire-place .ei-head  { order: 1; }
  .enquire-place .ei-address { order: 2; }
  .enquire-reach .ei-head  { order: 3; }
  .enquire-reach .ei-hours { order: 4; }
  .enquire-map             { order: 5; }
  .enquire-tiles           { order: 6; }

  /* Centred, like the home strip. The headings are flex rows, so text-align
     alone would leave the icon + label hugging the left. */
  .enquire-head, .enquire-box .ei-address, .enquire-box .ei-hours li { text-align: center; }
  .enquire-box .ei-head { justify-content: center; }
  .enquire-box .ei-hours { margin-bottom: 18px; }
  .enquire-map { margin-bottom: 18px; aspect-ratio: 16/9; }

  /* Labels stay left-aligned inside their tile, icon on the right */
  .enquire-tiles { grid-template-columns: repeat(2, 1fr); }
  .enquire-tiles .ec-tile { text-align: left; }
}

/* Below 1100px the two columns plus the 380px image no longer fit side by
   side (the box hits its minimum width and the row overflows), so they stack
   and the tall portrait is swapped for a short wide image. */
@media (max-width: 1100px) {
  .enquire-outer { grid-template-columns: 1fr; gap: 20px; }
  .enquire-aside {
    aspect-ratio: 20/7;
    background-image: url(/cardealers/assets/enquire-side-mobile.webp), linear-gradient(160deg, #6530A6, #351957);
  }
  .ea-slide { display: none; }   /* mobile keeps the single wide image */
}
@media (max-width: 560px) {
  /* Keep two per row here too — one per row made the box very tall. */
  .enquire-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .enquire-tiles .ec-tile { padding: 13px 12px; gap: 8px; }
  .enquire-tiles .ec-txt strong { font-size: .88rem; white-space: nowrap; }
  .enquire-tiles .ec-ico { flex-basis: 34px; width: 34px; height: 34px; }
  .enquire-tiles .ec-ico svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  /* "WhatsApp" is the longest label — shrink a touch so it stays on one line */
  .enquire-tiles .ec-tile { padding: 12px 9px; }
  .enquire-tiles .ec-txt strong { font-size: .8rem; }
  .enquire-tiles .ec-ico { flex-basis: 30px; width: 30px; height: 30px; }
  .enquire-tiles .ec-ico svg { width: 15px; height: 15px; }
}

/* ============================================================
   STANDARD PAGES (Part 4)
   ============================================================ */
/* ===== Finance page (rebuilt) ===== */
.fin-top { padding-top: 8px; }
.fin-lead { max-width: 720px; margin: 0 auto 30px; text-align: center; color: var(--ink-2); font-size: 1.08rem; line-height: 1.6; }
.fin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch; }
/* stretch, not start: the image and the white box always end level. The row
   height is whichever of the two is taller, and both fill it. */

.fin-media { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 18px; background-image: url(/cardealers/assets/finance-hero.webp), linear-gradient(135deg,#6530A6,#351957); background-size: cover; background-position: center; box-shadow: 0 16px 40px rgba(15,20,32,.12); overflow: hidden; }
.fin-media-tag { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 20px 16px; color: #fff; font-weight: 600; font-size: .95rem; background: linear-gradient(to top, rgba(15,15,25,.72), transparent); }

.fin-calc { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 12px 34px rgba(15,20,32,.06); }
.fin-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; background: var(--off); border-radius: 12px; padding: 5px; margin-bottom: 22px; }
.fin-tab { padding: 11px; border: none; background: transparent; border-radius: 9px; font-family: var(--font-body); font-weight: 700; font-size: .92rem; color: var(--ink-2); cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.fin-tab.active { background: #fff; color: var(--purple); box-shadow: 0 2px 8px rgba(15,20,32,.1); }
.fin-calc-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin: 0 0 16px; color: var(--ink); }

.fin-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fin-money { position: relative; }
.fin-money-sym { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--grey); font-weight: 700; font-size: 1.35rem; line-height: 1; pointer-events: none; }
/* [type=number] is needed to beat .calc-field input[type=number] above, which
   has higher specificity and was keeping the old 12px left padding — that's
   what pushed the typed number underneath the $ sign. */
.fin-money input[type=number] { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 14px 14px 14px 38px; font-family: var(--font-body); font-size: 1.35rem; font-weight: 700; color: var(--ink); background: #fff; }
.fin-money input[type=number]:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(135,83,198,.15); }

.fin-sub-label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin: 20px 0 10px; }
.fin-terms { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.fin-term { padding: 12px 0; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; font-family: var(--font-body); font-weight: 700; font-size: .95rem; color: var(--ink-2); cursor: pointer; transition: all .15s; }
.fin-term:hover { border-color: var(--purple); }
.fin-term.active { border-color: var(--purple); background: var(--lilac-bg); color: var(--purple); }

.fin-rate-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 20px; }
.fin-rate-head .fin-sub-label { margin: 0; }
.fin-rate-note { font-size: .8rem; color: var(--grey); margin: 2px 0 0; }
.fin-rate-box { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--line); border-radius: 10px; padding: 6px 10px; }
.fin-rate-box input { width: 52px; border: none; outline: none; font-family: var(--font-body); font-size: 1rem; font-weight: 700; color: var(--ink); text-align: right; -moz-appearance: textfield; }
.fin-rate-box input::-webkit-outer-spin-button, .fin-rate-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fin-rate-box span { color: var(--purple); font-weight: 700; }
.fin-slider { width: 100%; margin: 12px 0 4px; accent-color: var(--purple); }

.fin-result { background: var(--lilac-bg); border-radius: 14px; padding: 20px; text-align: center; margin-top: 20px; }
.fin-result-label { font-size: .88rem; color: var(--ink-2); }
.fin-result-val { font-family: var(--font-display); font-weight: 800; font-size: 2.1rem; color: var(--ink); margin-top: 4px; }
.fin-cta { margin-top: 16px; }

@media (max-width: 900px) {
  .fin-grid { grid-template-columns: 1fr; gap: 22px; }
  .fin-media { aspect-ratio: 16/9; order: -1; background-image: url(/cardealers/assets/finance-hero-mobile.webp), linear-gradient(135deg,#6530A6,#351957); }
}
@media (max-width: 480px) {
  .fin-inputs { grid-template-columns: 1fr; gap: 0; }
  .fin-terms { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .fin-term { padding: 10px 0; font-size: .9rem; }
  .fin-calc { padding: 20px; }
  .fin-result-val { font-size: 1.8rem; }
}

.about-lead p { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 18px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 36px; margin-bottom: 40px; }
.contact-info { display: flex; flex-direction: column; gap: 22px; }
.ci-item { display: flex; gap: 16px; align-items: flex-start; }
.ci-ico { font-size: 1.6rem; width: 48px; height: 48px; background: var(--lilac-bg); border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.ci-item h4 { font-size: 1rem; margin-bottom: 2px; }
.ci-item a { color: var(--purple); font-weight: 600; }
.ci-item span { color: var(--grey); font-size: .95rem; }
.contact-form { background: var(--off); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.contact-form h3 { font-size: 1.3rem; margin-bottom: 6px; }
.contact-form input, .contact-form textarea { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 14px; font-family: var(--font-body); font-size: .95rem; background: #fff; }

@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }

/* ============================================================
   HERO v2 — carsales-style image band + overlapping search
   ============================================================ */
.hero2 {
  position: relative;
  width: 100%;
  height: 520px;               /* fixed band — box overlaps nicely */
  overflow: hidden;
  background: var(--hero-grad);
}
.hero2-img, .hero2-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;            /* fills any width, crops gracefully */
  object-position: center top;  /* keep heads/hair visible */
}
.hero2-overlay {
  position: absolute; inset: 0;
  /* Subtle left-side darkening only, so the title stays legible
     while the bright purple image shows through on the right. */
  background: linear-gradient(90deg, rgba(74,35,122,.45) 0%, rgba(74,35,122,.12) 45%, rgba(74,35,122,0) 70%);
}
.hero2.no-img .hero2-overlay { background: var(--hero-grad); }
.hero2-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; align-items: center;
}
.hero2-title {
  color: #fff; font-size: clamp(2rem, 5vw, 3.4rem);
  text-shadow: 0 2px 20px rgba(0,0,0,.3);
}

/* Search card overlapping the hero */
.search-card {
  position: relative; z-index: 5;
  margin-top: -80px;            /* less overlap — card sits lower, image shows more */
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 30px 32px;
  border: 1px solid var(--line);
}
.search-card-head { margin-bottom: 20px; text-align: center; }
.search-card-head h2 { font-size: 1.6rem; }
.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr auto;
  gap: 16px; align-items: end;
}
.search-field label {
  display: block; font-size: .82rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 6px;
}
.search-field select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; font-family: var(--font-body); font-size: .95rem;
  background: var(--off); color: var(--ink);
}
.search-btn { padding: 14px 28px; height: 48px; white-space: nowrap; border-radius: 10px; }

/* Body-type icon strip */
.cat-strip {
  display: flex; gap: 8px; flex-wrap: wrap; justify-content: space-between;
  margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line);
}
.cat-icon-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 14px 10px; border-radius: var(--radius-sm); flex: 1; min-width: 100px;
  transition: .15s;
}
.cat-icon-tile:hover { background: var(--lilac-bg); transform: translateY(-2px); }
.cat-icon-tile img { width: 104px; height: 72px; object-fit: contain; }
.cat-icon-tile span { font-size: .92rem; font-weight: 600; color: var(--ink); }

@media (max-width: 900px) {
  .search-grid { grid-template-columns: 1fr 1fr; }
  .search-btn { grid-column: 1 / -1; width: 100%; }
}
@media (max-width: 767px) {
  .hero2 { height: 380px; }
  .search-card { margin-top: -60px; padding: 22px; }
  .search-grid { grid-template-columns: 1fr 1fr; }
  .cat-strip { gap: 4px; }
  .cat-icon-tile { min-width: 80px; padding: 10px 6px; }
  .cat-icon-tile img { width: 80px; height: 56px; }
  .cat-icon-tile span { font-size: .82rem; }
}

/* ============================================================
   CUSTOM DROPDOWNS (open upward, carsales-style)
   ============================================================ */
.dd { position: relative; }
.dd-toggle {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 14px; font-family: var(--font-body); font-size: .95rem;
  background: var(--off); color: var(--ink); text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.dd-toggle:after {
  content: '▾'; color: var(--grey); font-size: .8rem; transition: transform .15s;
}
.dd.open .dd-toggle { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(135,83,198,.15); }
.dd.open .dd-toggle:after { transform: rotate(180deg); }
.dd-menu {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px);  /* opens UP */
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 280px; overflow-y: auto; z-index: 50;
  display: none; padding: 6px;
}
.dd.open .dd-menu { display: block; }
.dd-opt {
  padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: .92rem; color: var(--ink);
}
.dd-opt:hover { background: var(--lilac-bg); }
.dd-opt.selected { background: var(--purple); color: #fff; }

/* ============================================================
   MOBILE ICON SCROLL (show ~3, swipe for more)
   ============================================================ */
@media (max-width: 767px) {
  .cat-strip {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; gap: 6px;
    /* hide scrollbar but keep function */
    scrollbar-width: none;
  }
  .cat-strip::-webkit-scrollbar { display: none; }
  .cat-icon-tile {
    flex: 0 0 30%;               /* ~3 visible, rest scroll */
    scroll-snap-align: start; min-width: 30%;
  }
}

/* ============================================================
   NAV DROPDOWN (Resources)
   ============================================================ */
.nav-dd { position: relative; }
.nav-dd-toggle {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 500; font-size: .95rem;
  color: var(--ink-2); padding: 0; transition: color .15s;
}
.nav-dd-toggle:hover, .nav-dd-toggle.active { color: var(--purple); }
.nav-dd-menu {
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 8px; min-width: 190px;
  opacity: 0; visibility: hidden; transition: .15s; z-index: 90;
}
.nav-dd-caret { display: inline-block; margin-left: 5px; font-size: .7rem; color: var(--grey); transition: transform .2s; }
.nav-dd:hover .nav-dd-menu { opacity: 1; visibility: visible; top: calc(100% + 6px); }
.nav-dd-menu a {
  display: block; padding: 10px 14px; border-radius: 8px;
  font-size: .92rem; color: var(--ink-2); font-weight: 500;
}
.nav-dd-menu a:hover { background: var(--lilac-bg); color: var(--purple); }

/* ---- Phone panel: the same dropdown becomes an accordion ----
   This block MUST stay below the rules above. Media queries carry no extra
   specificity, so if it were written earlier in the file (next to the rest of
   the mobile menu) the desktop rules would simply overwrite it — the submenu
   would keep opening as a floating card on tap. */
@media (max-width: 1050px) {
  .nav-dd { position: static; }
  /* Every value mirrors .nav a — a <button> inherits neither font nor
     line-height from the page, so leaving them out makes this row render
     shorter and smaller than the links around it. */
  .nav-dd-toggle {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: 18px 2px; text-align: left;
    font-family: var(--font-body); font-weight: 500;
    font-size: 1.08rem; line-height: 1.4; color: var(--ink);
  }
  .nav-dd-toggle.active { color: var(--purple); }
  .nav-dd-caret { margin-left: 0; font-size: 1rem; color: var(--purple); transition: transform .2s; }
  .nav-dd.open .nav-dd-caret { transform: rotate(180deg); }

  /* Kill the desktop hover-to-open: on a touch screen the first tap counts as
     a hover, which is what made the card appear over the buttons. */
  .nav-dd-menu,
  .nav-dd:hover .nav-dd-menu {
    position: static; top: auto; left: auto; transform: none;
    opacity: 1; visibility: visible;
    background: none; box-shadow: none; border: none;
    border-left: 2px solid var(--lilac-bg);
    border-radius: 0; margin: 0 0 14px 4px; padding: 0; min-width: 0;
    max-height: 0; overflow: hidden;
    transition: max-height .28s cubic-bezier(.4,0,.2,1);
  }
  .nav-dd.open .nav-dd-menu { max-height: 400px; }   /* room for 4-6 items */
  .nav-dd-menu a {
    padding: 12px 16px; font-family: var(--font-body);
    font-size: .98rem; font-weight: 400; color: var(--ink-2);
  }
}



/* ============================================================
   FLOATING CONTACT BUTTON (fab) — matches Rizon contractor templates
   ============================================================ */
.fab { position: fixed; right: 22px; bottom: 22px; z-index: 999; }
.fab-btn {
  width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--purple-grad); color: #fff; display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(101,48,166,.45); transition: transform .15s;
}
.fab-btn:hover { transform: scale(1.06); }
.fab-btn svg { width: 26px; height: 26px; }

.fab-popup {
  position: absolute; right: 0; bottom: 74px; width: 300px;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
  opacity: 0; visibility: hidden; transform: translateY(12px) scale(.98);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.fab-popup.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.fab-head { background: var(--purple-grad); color: #fff; padding: 20px; }
.fab-head h4 { color: #fff; font-family: var(--font-display); font-size: 1.15rem; margin: 0; }
.fab-head p { color: rgba(255,255,255,.9); font-size: .9rem; margin: 4px 0 0; }
.fab-head .hours { font-size: .8rem; font-weight: 700; margin-top: 8px; color: #fff; }
.fab-body { padding: 8px; }
.fab-opt {
  display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 12px;
  cursor: pointer; transition: background .15s;
}
.fab-opt:hover { background: var(--lilac-bg); }
.oic {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
}
.oic svg { width: 22px; height: 22px; }
/* Floating contact button — icon tile colours.
   Three greens on purpose (WhatsApp, SMS, Call are all "talk to a human"),
   but three DIFFERENT greens so the rows still read as separate options at a
   glance. Email is the light blue, Pricing keeps the brand gradient. */
.oic.wa  { background: #25D366; }   /* WhatsApp brand green — do not change */
.oic.sms { background: #34C759; }   /* messaging green, a shade lighter */
.oic.em  { background: #38BDF8; }   /* light blue */
.oic.ca  { background: #16A34A; }   /* deeper green, same as --success */
.oic.pr  { background: var(--purple-grad); }
.fab-opt .ot { font-family: var(--font-display); font-weight: 600; font-size: .98rem; color: var(--ink); }
.fab-opt .os { font-size: .82rem; color: var(--grey); }

@media (max-width: 480px) {
  /* Was full width minus the margins; it only needs enough room for the
     labels, so cap it and let it stay anchored to the button. */
  .fab-popup { width: min(300px, calc(100vw - 60px)); }
}

/* ============================================================
   CARD CLEANUP (Carma-style, no emojis)
   ============================================================ */
.car-meta {
  display: block; font-size: .88rem; color: var(--ink-2);
  margin-bottom: 12px;
}
.car-card-body .car-price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.5rem; color: var(--ink); margin-top: 2px;
}
.car-weekly { font-size: .8rem; color: var(--grey); margin-top: 3px; }
.car-weekly strong { color: var(--ink-2); font-weight: 700; }

/* ============================================================
   BUDGET SECTION + SLIDER
   ============================================================ */
.budget-sec { padding-top: 20px; }
.budget-h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 22px; }

.budget-tabs {
  display: flex; gap: 28px; border-bottom: 1px solid var(--line);
  margin-bottom: 28px; overflow-x: auto; scrollbar-width: none;
}
.budget-tabs::-webkit-scrollbar { display: none; }
.budget-tab {
  background: none; border: none; cursor: pointer; white-space: nowrap;
  font-family: var(--font-body); font-weight: 500; font-size: .98rem;
  color: var(--grey); padding: 0 0 14px; position: relative;
}
.budget-tab:hover { color: var(--ink); }
.budget-tab.active { color: var(--ink); font-weight: 700; }
.budget-tab.active:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 3px; background: var(--purple); border-radius: 3px 3px 0 0;
}

.budget-panel { display: none; }
.budget-panel.active { display: block; }
.budget-empty { color: var(--grey); padding: 30px 0; }

/* Slider */
.slider-wrap { position: relative; }
.slider-track {
  display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 4px 2px 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .car-card {
  flex: 0 0 265px;              /* smaller cards */
  scroll-snap-align: start;
}
.slider-track .car-card-body { padding: 14px; }
.slider-track .car-title { font-size: 1rem; }
.slider-track .car-variant { font-size: .84rem; margin: 2px 0 8px; }
.slider-track .car-card-body .car-price { font-size: 1.3rem; }

.slider-arrow {
  position: absolute; top: 38%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 1px solid var(--line); color: var(--purple);
  font-size: 1.4rem; line-height: 1; display: grid; place-items: center;
  box-shadow: var(--shadow); z-index: 4; transition: .15s;
}
.slider-arrow:hover { background: var(--lilac-bg); border-color: var(--purple); }
.slider-arrow.prev { left: -14px; }
.slider-arrow.next { right: -14px; }
.slider-arrow[disabled] { opacity: 0; pointer-events: none; }

@media (max-width: 767px) {
  .budget-tabs { gap: 20px; }
  .budget-tab { font-size: .92rem; }
  .slider-track .car-card { flex: 0 0 78%; }
  .slider-arrow { display: none; }   /* mobile: swipe instead */
}

/* ============================================================
   COMPARE HEART + 2-ROW SLIDER + COMPARE TRAY
   ============================================================ */
.car-card-wrap { position: relative; }

.car-compare {
  position: absolute; right: 12px; bottom: 14px;
  width: 34px; height: 34px; border-radius: 50%;
  background: #fff; border: 1px solid var(--line);
  color: var(--grey-2); cursor: pointer;
  display: grid; place-items: center; transition: .15s; z-index: 3;
}
.car-compare svg { width: 18px; height: 18px; }
.car-compare:hover { border-color: var(--purple); color: var(--purple); }
.car-compare.selected {
  background: var(--purple); border-color: var(--purple); color: #fff;
}
.car-compare.selected svg { fill: #fff; }

/* 2-row slider: cards flow into a 2-row grid that scrolls sideways */
.slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto auto;      /* TWO rows */
  grid-auto-columns: 265px;
  gap: 18px;
  overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; padding: 4px 2px 8px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.slider-track::-webkit-scrollbar { display: none; }
.slider-track .car-card-wrap { scroll-snap-align: start; }
.slider-track .car-card { flex: none; width: 100%; }

/* Compare tray (bottom bar) */
.cmp-tray {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0,0,0,.12);
  transform: translateY(110%); transition: transform .25s ease;
  padding: 14px 0;
}
.cmp-tray.show { transform: translateY(0); }
.cmp-tray .wrap { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cmp-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.cmp-count {
  background: var(--lilac-bg); color: var(--purple); font-size: .82rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; margin-left: 8px;
}
.cmp-slots { display: flex; gap: 12px; flex: 1; min-width: 0; flex-wrap: wrap; }
.cmp-slots:empty::before {
  content: "Tap the \2665 on a car to add it here";
  color: var(--grey); font-weight: 600; font-size: .92rem; align-self: center;
}
/* On mobile the 4 slots form a 2x2 grid that fills column-first:
   1=top-left, 2=bottom-left, 3=top-right, 4=bottom-right */
@media (max-width: 767px) {
  .cmp-slots {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
  }
}
.cmp-slot {
  display: flex; align-items: center; gap: 10px; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 14px 8px 8px; min-width: 220px; background: var(--off);
}
.cmp-slot img { width: 56px; height: 42px; object-fit: cover; border-radius: 6px; }
.cmp-slot .n { font-weight: 700; font-size: .82rem; color: var(--ink); }
.cmp-slot .k { font-size: .75rem; color: var(--grey); }
.cmp-slot .p { font-size: .82rem; font-weight: 700; color: var(--ink); }
.cmp-x {
  position: absolute; left: -8px; top: -8px; width: 22px; height: 22px;
  border-radius: 50%; background: #fff; border: 1px solid var(--purple);
  color: var(--purple); cursor: pointer; font-size: .8rem; line-height: 1;
  display: grid; place-items: center;
}
.cmp-actions { display: flex; gap: 10px; align-items: center; }
.cmp-clear { background: none; border: none; color: var(--grey); cursor: pointer; font-size: .9rem; font-weight: 600; }
.cmp-clear:hover { color: var(--purple); }

@media (max-width: 767px) {
  .slider-track { grid-auto-columns: 78%; }
  .cmp-tray .wrap { gap: 10px; }
  .cmp-slot { min-width: 0; padding: 6px 8px 6px 6px; gap: 8px; }
  .cmp-slot img { width: 46px; height: 36px; flex-shrink: 0; }
  .cmp-slot > div { min-width: 0; flex: 1; }
  .cmp-slot .n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cmp-slot .k, .cmp-slot .p { white-space: nowrap; }
  .cmp-actions { width: 100%; }
  .cmp-actions .btn { flex: 1; }
}

/* ============================================================
   COMPARISON PAGE
   ============================================================ */
.cmp-page { padding: 32px 20px 120px; }
.cmp-page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.cmp-page-head h1 { font-size: 1.9rem; }

/* minmax(0, 1fr) — NOT 1fr. A plain `1fr` track will not shrink below its
   content's min-content width, so with 4 cars the head cards (image + title +
   "View car" button) forced the grid wider than the screen and the whole page
   scrolled sideways on phones. minmax(0, ...) lets the track shrink and the
   text wrap instead. */
.cmp-grid { display: grid; grid-template-columns: 220px repeat(var(--cols, 2), minmax(0, 1fr)); gap: 16px; align-items: center; }
/* stretch, NOT end. The cards hold titles of different lengths, so with
   align-items:end they were bottom-aligned and their tops staggered — that is
   what made them look like different sizes. stretch gives every card the
   height of the tallest one. */
.cmp-heads { margin-bottom: 28px; align-items: stretch; }
/* Flex column + margin-top:auto on the button pins every "View car" to the
   bottom edge of its card, however the title above it wraps. */
.cmp-head-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; display: flex; flex-direction: column; }
.cmp-head-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; margin-bottom: 10px; flex: 0 0 auto; }
/* Fixed 2-line box so the price, the weekly figure and the button all sit at
   the same height across every card. Longer names are clamped, not wrapped
   onto a third line that would push that card's contents down. */
.cmp-hn {
  font-family: var(--font-display); font-weight: 700; font-size: .98rem;
  line-height: 1.2; min-height: 2.4em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cmp-hp { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; margin-top: 4px; }
/* The 10px gap above the button lives here, not as padding on the button —
   .btn owns its own padding, and touching it would change the button itself. */
.cmp-hw { font-size: .78rem; color: var(--grey); margin-bottom: 10px; }
.cmp-hbtn { margin-top: auto; }

.cmp-block { margin-bottom: 32px; }
.cmp-block h2 { font-size: 1.25rem; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 2px solid var(--line); }
.cmp-row { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.cmp-label { color: var(--grey); font-weight: 500; }
.cmp-val { text-align: center; color: var(--ink); font-weight: 600; }
.cmp-val .tick { color: var(--success); font-size: 1.15rem; font-weight: 700; }
.cmp-val .dash { color: var(--grey-2); }

@media (max-width: 767px) {
  .cmp-grid { grid-template-columns: 92px repeat(var(--cols, 2), minmax(0, 1fr)); gap: 8px; }
  .cmp-label { font-size: .8rem; }
  /* Long unbroken values ("Comfortline") have nowhere to wrap in a narrow
     column — without this they push the track wide again. */
  .cmp-val { font-size: .82rem; overflow-wrap: anywhere; }
  .cmp-page-head h1 { font-size: 1.4rem; }
  .cmp-head-card { padding: 10px; }
  /* Narrow columns need a third line for names like "2019 Mitsubishi
     Outlander". Reserved on every card so they all stay the same height. */
  .cmp-hn { font-size: .84rem; line-height: 1.22; min-height: 3.66em; -webkit-line-clamp: 3; overflow-wrap: anywhere; }
  .cmp-hp { font-size: 1.05rem; }
  .cmp-hbtn { padding: 9px 6px; font-size: .8rem; }

  /* THREE cars on a phone. Roughly 74px per column on a 390px screen. */
  .cmp-cols-3 .cmp-grid { grid-template-columns: 80px repeat(var(--cols, 2), minmax(0, 1fr)); gap: 7px; }
  .cmp-cols-3 .cmp-head-card { padding: 8px; }
  .cmp-cols-3 .cmp-hn { font-size: .76rem; }
  .cmp-cols-3 .cmp-hp { font-size: .95rem; }
  .cmp-cols-3 .cmp-hw { font-size: .7rem; margin-bottom: 7px; }
  .cmp-cols-3 .cmp-hbtn { padding: 8px 4px; font-size: .74rem; }
  .cmp-cols-3 .cmp-label { font-size: .74rem; }
  .cmp-cols-3 .cmp-val { font-size: .76rem; }

  /* FOUR cars — the tight case in the screenshot. On a 390px screen that is
     a 74px label column, 6px gaps and ~64px per car. Everything in the head
     card steps down a size so nothing forces the track wider. */
  .cmp-cols-4 .cmp-grid { grid-template-columns: 74px repeat(var(--cols, 2), minmax(0, 1fr)); gap: 6px; }
  .cmp-cols-4 .cmp-head-card { padding: 5px; border-radius: 12px; }
  .cmp-cols-4 .cmp-head-card img { border-radius: 7px; margin-bottom: 5px; }
  .cmp-cols-4 .cmp-hn { font-size: .68rem; line-height: 1.18; min-height: 3.54em; }
  .cmp-cols-4 .cmp-hp { font-size: .84rem; margin-top: 2px; }
  .cmp-cols-4 .cmp-hw { font-size: .62rem; margin-bottom: 5px; }
  .cmp-cols-4 .cmp-hbtn { padding: 7px 2px; font-size: .68rem; }
  .cmp-cols-4 .cmp-label { font-size: .7rem; }
  .cmp-cols-4 .cmp-val { font-size: .72rem; }
  .cmp-cols-4 .cmp-block h2 { font-size: 1.05rem; }
}

/* ============================================================
   FULL FILTER SIDEBAR (Carma-style)
   ============================================================ */
.inv-filters { padding: 0; overflow: hidden; }
.inv-filters .filter-head { padding: 20px 20px 14px; margin: 0; border-bottom: 1px solid var(--line); }

.fgroup { border-bottom: 1px solid var(--line); }
.fgroup-t {
  width: 100%; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 10px;
  /* 600, not 700 — Poppins at 700 read as shouting down a narrow column. */
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  color: var(--ink); padding: 16px 20px; text-align: left; position: relative;
}
.fg-ic { font-size: 1.05rem; opacity: .75; }
.fgroup-t:after {
  content: '⌄'; position: absolute; right: 20px; top: 12px;
  color: var(--grey); font-size: 1.1rem; transition: transform .18s;
}
.fgroup.open .fgroup-t:after { transform: rotate(180deg); top: 16px; }
.fgroup-b { display: none; padding: 0 20px 18px; }
.fgroup.open .fgroup-b { display: block; }

.fsearch {
  width: 100%; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 14px; font-family: var(--font-body); font-size: .88rem;
  background: #fff; margin-bottom: 10px;
}
.fscroll { max-height: 240px; overflow-y: auto; padding-right: 4px; }
.fscroll::-webkit-scrollbar { width: 5px; }
.fscroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }

/* Custom checkbox rows */
.fchk {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; cursor: pointer; font-size: .9rem; color: var(--ink);
}
.fchk input { position: absolute; opacity: 0; width: 0; height: 0; }
.fbox {
  width: 18px; height: 18px; border: 1.5px solid var(--lilac-soft);
  border-radius: 4px; flex-shrink: 0; position: relative; transition: .12s;
}
.fchk:hover .fbox { border-color: var(--purple); }
.fchk input:checked + .fbox { background: var(--purple); border-color: var(--purple); }
.fchk input:checked + .fbox:after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff;
  border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fchk input:focus-visible + .fbox { box-shadow: 0 0 0 3px rgba(135,83,198,.25); }
.flabel { line-height: 1.3; }
.fcount { color: var(--grey-2); }

.frow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.frow2 select {
  width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 10px; font-family: var(--font-body); font-size: .88rem;
  background: #fff; color: var(--ink);
}
.inv-filters .btn-block { margin: 0 20px 20px; width: calc(100% - 40px); }

@media (max-width: 900px) {
  .inv-filters { position: static; }
}

/* ============================================================
   CARD REBUILD v2 — real card look (Carma reference)
   ============================================================ */
.car-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: box-shadow .18s ease, transform .18s ease;
  position: relative;
}
.car-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.car-card-link { display: block; color: inherit; }

/* Image sits INSIDE the card with white padding around it */
.car-card-img {
  position: relative;
  margin: 10px 10px 0;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--off);
}
.car-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Silver "Special Offer" stamp — top right, premium metallic */
.stamp-special {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  padding: 6px 13px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 700;
  font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: #3F3A47;
  background: linear-gradient(135deg,#F4F5F7 0%,#D8DCE3 38%,#FFFFFF 52%,#C7CCD6 68%,#EDEFF3 100%);
  border: 1px solid rgba(255,255,255,.9);
  box-shadow: 0 2px 8px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.85);
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.car-badge.sold { top: 10px; left: 10px; }

/* Body — tight typography like the reference */
.car-card-body { padding: 14px 14px 12px; }
.car-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .95rem; line-height: 1.3; color: var(--ink);
  letter-spacing: 0;
}
.car-variant {
  font-size: .88rem; line-height: 1.35; color: var(--ink-2);
  margin: 1px 0 0; font-weight: 400;
}
.car-meta {
  font-size: .88rem; line-height: 1.35; color: var(--ink-2);
  margin: 1px 0 10px; font-weight: 400;
}
.car-card-body .car-price {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.45rem; line-height: 1.15; color: var(--ink); margin: 0;
}
.car-weekly { font-size: .76rem; color: var(--grey); margin-top: 4px; }
.car-weekly strong { color: var(--ink-2); font-weight: 700; }

/* Action bar with divider — holds the compare heart */
.car-actions {
  margin-top: auto;
  border-top: 1px solid var(--line);
  display: flex;
}
.car-compare {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: none; border: none; cursor: pointer;
  padding: 13px 10px; font-family: var(--font-body);
  font-size: .88rem; font-weight: 500; color: var(--ink-2);
  transition: .15s; position: static; width: auto; height: auto; border-radius: 0;
}
.car-compare svg { width: 17px; height: 17px; }
.car-compare:hover { background: var(--lilac-bg); color: var(--purple); }
.car-compare.selected { color: var(--purple); font-weight: 700; background: none; border: none; }
.car-compare.selected svg { fill: var(--purple); color: var(--purple); }

/* 4 cards per row on desktop */
.car-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.inv-results .car-grid { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1200px) { .car-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px)  { .car-grid, .inv-results .car-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .car-grid, .inv-results .car-grid { grid-template-columns: 1fr; } }

/* Slider cards keep the same look */
.slider-track .car-card { width: 100%; }
.slider-track .car-card-body { padding: 12px 12px 10px; }

/* ---- Search card back to a narrower width ---- */
.search-card { max-width: 1200px; margin-left: auto; margin-right: auto; }

/* ---- Filter dropdowns stacked (one above the other) ---- */
.frow2 { display: block; }
.frow2 select { margin-bottom: 8px; }
.frow2 select:last-child { margin-bottom: 0; }

/* ============================================================
   INVENTORY v3 — Carma-style layout
   ============================================================ */
.inv-top { display: none; }              /* old full-width bar removed */

/* Scoped to desktop. Without the media query this rule sat AFTER the mobile
   one and won on source order, so phones kept a 340px sidebar column that the
   (hidden) filters no longer occupied — that was the dead strip on the right. */
@media (min-width: 901px) {
  .inv-layout {
    grid-template-columns: 340px 1fr;    /* WIDER sidebar */
    /* 32px matches the 100px sticky offset on .inv-filters (68px header + 32),
       so the gap above the panel is identical pinned and unpinned. */
    gap: 28px; padding-top: 32px;
  }
}
@media (max-width: 900px) {
  .inv-layout { grid-template-columns: 1fr; gap: 0; padding-top: 20px; }
}
.inv-crumb { font-size: .85rem; color: var(--grey); margin-bottom: 6px; }
.inv-headrow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.inv-headrow h1 { font-size: 2rem; letter-spacing: -.02em; }
.inv-count { color: var(--grey); font-weight: 500; font-size: 1.05rem; }
.inv-sortbar { display: flex; align-items: center; gap: 12px; }
.inv-sortbar label { font-size: .9rem; color: var(--grey); display: flex; align-items: center; gap: 8px; }
.inv-sortbar select {
  border: 1.5px solid var(--lilac-soft); border-radius: 999px;
  padding: 9px 16px; font-family: var(--font-body); font-size: .9rem;
  background: #fff; color: var(--purple); font-weight: 600; cursor: pointer;
}

/* Sidebar: roomier rows, no icons */
.fgroup-t { padding: 18px 22px; font-size: 1.02rem; }
.fgroup-t:after { right: 22px; top: 15px; }
.fgroup.open .fgroup-t:after { top: 19px; }
.fgroup-b { padding: 0 22px 20px; }
.fchk { padding: 8px 0; font-size: .94rem; }
.inv-filters .filter-head { padding: 22px 22px 16px; }
/* 1.28rem / 600 instead of 1.35rem / 700 (the global h3 weight) — the panel
   headings were the heaviest text on the page. */
.inv-filters .filter-head h3 { font-size: 1.28rem; font-weight: 600; }

/* 4 cards per row on the inventory page too */
.inv-results .car-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1400px) { .inv-results .car-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1000px) { .inv-results .car-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .inv-results .car-grid { grid-template-columns: 1fr; } }

/* Compact cards */
.car-card-img { margin: 8px 8px 0; }
.car-card-body { padding: 12px 12px 10px; }
.car-title { font-size: .9rem; }
.car-variant, .car-meta { font-size: .84rem; }
.car-card-body .car-price { font-size: 1.35rem; }
.car-weekly { font-size: .72rem; }
.car-compare { padding: 11px 8px; font-size: .84rem; }

/* Typography — tighter, closer to the reference */
h1, h2, h3, h4 { letter-spacing: -.025em; }
body { letter-spacing: -.006em; }

/* ============================================================
   SPECIAL OFFER — premium ribbon flag with movement
   ============================================================ */
.stamp-special {
  position: absolute; top: 0; right: 14px; z-index: 3;
  width: 62px; padding: 9px 6px 16px;
  font-family: var(--font-display); font-weight: 800;
  font-size: .56rem; line-height: 1.25; letter-spacing: .05em;
  text-transform: uppercase; text-align: center;
  color: #3A3540;
  background: linear-gradient(160deg,#FDFDFE 0%,#E3E6EC 22%,#FFFFFF 40%,#C9CFD9 62%,#EFF1F5 82%,#D6DAE2 100%);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 3px 10px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  /* notched ribbon tail */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  transform-origin: 50% 0;
  animation: flagWave 3.2s ease-in-out infinite;
}
/* metallic sheen sweeping across */
.stamp-special:before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.85) 48%, transparent 62%);
  animation: flagShine 3.2s ease-in-out infinite;
}
@keyframes flagWave {
  0%,100% { transform: rotate(0deg); }
  25%     { transform: rotate(1.6deg); }
  75%     { transform: rotate(-1.6deg); }
}
@keyframes flagShine {
  0%, 55%, 100% { transform: translateX(-120%); }
  75%           { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .stamp-special, .stamp-special:before { animation: none; }
}

/* ============================================================
   LIGHT GREY PAGE BACKGROUND — makes white cards stand out
   ============================================================ */
body { background: #F7F6FA; }
.section { background: transparent; }
.budget-sec, .veh-enquire { background: transparent; }
.section[style*="var(--off)"] { background: transparent !important; }
.car-card { background: #fff; }          /* cards stay white = pop */
.search-card { background: #fff; }
.inv-filters { background: #fff; }

/* ============================================================
   BUDGET CAROUSEL — 5 per row, auto-drift left, finger scroll
   ============================================================ */
.slider-track {
  grid-auto-columns: calc((100% - 4 * 16px) / 5);   /* 5 cards visible */
  gap: 16px;
  scroll-snap-type: none;        /* smooth drift, not snapping */
  cursor: grab;
}
.slider-track.dragging { cursor: grabbing; scroll-behavior: auto; }

@media (max-width: 1200px) { .slider-track { grid-auto-columns: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 1000px) { .slider-track { grid-auto-columns: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 767px)  { .slider-track { grid-auto-columns: 74%; } }

/* Carousel fix: `scroll-behavior: smooth` swallows the tiny per-frame
   auto-drift increments. Keep the track instant; the arrow buttons pass
   behavior:'smooth' themselves, so they still glide. */
.slider-track { scroll-behavior: auto; }

/* ============================================================
   CAROUSEL FIX — fill ACROSS first, not down in columns
   Old behaviour: grid-auto-flow:column + 2 rows meant 4 cars =
   2 columns and a big empty gap. Now cards flow left-to-right and
   only wrap to a 2nd row when there are enough of them.
   ============================================================ */
.slider-track {
  display: flex;                 /* simple horizontal flow */
  flex-wrap: nowrap;
  grid-auto-flow: unset;
  grid-template-rows: unset;
  grid-auto-columns: unset;
  align-items: stretch;
}
.slider-track .car-card {
  flex: 0 0 calc((100% - 4 * 16px) / 5);   /* exactly 5 across */
  min-width: 0;
}
/* Auto-drift only kicks in when there's actually overflow —
   handled in JS (max > 0 check), so short bands just sit still. */

@media (max-width: 1200px) { .slider-track .car-card { flex: 0 0 calc((100% - 3 * 16px) / 4); } }
@media (max-width: 1000px) { .slider-track .car-card { flex: 0 0 calc((100% - 2 * 16px) / 3); } }
@media (max-width: 767px)  { .slider-track .car-card { flex: 0 0 78%; } }

/* Cards stretch to fill the row when a band has fewer than 5 cars
   (no dead gap), but never get narrower than the 5-across size.
   With 10+ cars you get exactly 5 per row and it scrolls. */
.slider-track .car-card {
  flex: 1 1 calc((100% - 4 * 16px) / 5);
  max-width: 340px;
}
@media (max-width: 1200px) { .slider-track .car-card { flex: 1 1 calc((100% - 3 * 16px) / 4); } }
@media (max-width: 1000px) { .slider-track .car-card { flex: 1 1 calc((100% - 2 * 16px) / 3); } }
@media (max-width: 767px)  { .slider-track .car-card { flex: 0 0 78%; max-width: none; } }

/* Cards may GROW to fill a short row, but must never SHRINK below the
   5-across width — otherwise 12 cards squash to 100px instead of scrolling. */
.slider-track .car-card {
  flex-grow: 1;
  flex-shrink: 0;                                  /* never squash */
  flex-basis: calc((100% - 4 * 16px) / 5);
  max-width: 340px;
}
@media (max-width: 1200px) { .slider-track .car-card { flex-basis: calc((100% - 3 * 16px) / 4); } }
@media (max-width: 1000px) { .slider-track .car-card { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 767px)  { .slider-track .car-card { flex-basis: 78%; flex-grow: 0; max-width: none; } }

/* ============================================================
   WIDER CONTENT — closer to the edges (matches Carma reference)
   1440 -> 1660 gives ~200px more middle space, so 5 cards fit
   comfortably instead of being squashed.
   ============================================================ */
/* Longhands — see the note on the base .wrap rule. This line sits at ~1700,
   AFTER every page layout that sets its own padding-top, so as a shorthand it
   was wiping the vertical padding off .inv-layout, .veh-layout, .veh-breadcrumb,
   .vsb-inner and .cmp-page. That is why the inventory filter panel had no gap
   under the header. */
.wrap { padding-left: 30px; padding-right: 30px; }

/* Cards can now breathe at 5-across */
.slider-track .car-card { max-width: 400px; }

/* Search card stays narrower than the page (it looked too wide full-width) */
.search-card { max-width: 1280px; }

@media (max-width: 900px) { .wrap { padding-left: 18px; padding-right: 18px; } }

/* ============================================================
   CAROUSEL — ported from the Rizon contractor template
   (same .carousel / .carousel-track pattern, edge-fade mask,
    transform-based movement, x2 list for a seamless loop)
   ============================================================ */
.carousel {
  overflow: hidden; position: relative; cursor: grab; touch-action: pan-y;
  /* both edges fade out so cards disappear nicely */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  margin-bottom: 18px;
  padding: 4px 0;
}
.carousel:last-child { margin-bottom: 0; }
.carousel.grabbing { cursor: grabbing; }
.carousel-track {
  display: flex; gap: 16px; width: max-content; will-change: transform;
}
/* 5 cards visible per row — width is fixed so the loop maths stay exact */
.carousel-track .car-card,
.carousel-track .gr-card {
  width: calc((var(--maxw) - 60px - 4 * 16px) / 5);
  flex-shrink: 0; flex-grow: 0; max-width: none;
}

/* ---------- Google review card (same carousel, same card width) ---------- */
.gr-sec { padding-top: clamp(8px, 1vw, 16px); }
.gr-sec .carousel { cursor: default; }
.gr-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 15px; min-height: 210px;
  box-shadow: 0 6px 18px rgba(15,20,32,.05);
}
.gr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.gr-stars { display: flex; gap: 2px; }
.gr-stars svg { width: 15px; height: 15px; fill: #FBBC05; }
.gr-google { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* Google logo in the review cards. It shares the top row with the 5 stars
   (~83px), and the card has 264px of usable width, so anything up to ~150px
   wide is safe. max-width is the guard: a wider logo file shrinks to fit
   instead of pushing the stars. */
.gr-logo { height: 28px; width: auto; max-width: 150px; object-fit: contain; display: block; }
.gr-fallback { display: none; align-items: center; gap: 5px; }
.gr-google.no-logo .gr-fallback { display: inline-flex; }
/* Kept in step with .gr-logo above, so the card looks the same whether the
   image loaded or the inline fallback took over. */
.gr-fallback svg { width: 22px; height: 22px; flex: 0 0 22px; }
.gr-fallback span { font-weight: 600; font-size: .95rem; color: var(--grey); letter-spacing: .01em; }
.gr-text {
  flex: 1 1 auto; margin: 0 0 14px;
  color: var(--ink); font-size: .87rem; line-height: 1.55;
}
.gr-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-top: 1px solid var(--line); padding-top: 11px;
}
.gr-name { font-weight: 600; font-size: .85rem; color: var(--ink); }
.gr-date { font-size: .78rem; color: var(--grey); flex: 0 0 auto; }

@media (max-width: 1200px) { .carousel-track .gr-card { width: 260px; } }
@media (max-width: 767px)  {
  .carousel-track .gr-card { width: 74vw; }
  .gr-card { min-height: 0; }
}

@media (max-width: 1200px) { .carousel-track .car-card { width: 260px; } }
@media (max-width: 767px)  {
  .carousel-track .car-card { width: 74vw; }
  .carousel { -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
                      mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
}

/* ============================================================
   CARD SIZING — smaller special-offer grid + budget carousel
   (desktop tuned down, mobile made compact / 2-up)
   ============================================================ */

/* --- Special Offers: 4 across, SMALLER on desktop --- */
.section .car-grid { gap: 16px; }
.section .car-grid .car-card-img { margin: 7px 7px 0; }
.section .car-grid .car-card-body { padding: 11px 11px 9px; }
.section .car-grid .car-title { font-size: .86rem; }
.section .car-grid .car-variant,
.section .car-grid .car-meta { font-size: .8rem; }
.section .car-grid .car-card-body .car-price { font-size: 1.25rem; }
.section .car-grid .car-weekly { font-size: .7rem; }
.section .car-grid .car-compare { padding: 10px 8px; font-size: .82rem; }

/* --- Budget carousel: slightly smaller cards on desktop --- */
.carousel-track .car-card { width: calc((var(--maxw) - 60px - 4 * 16px) / 5); }
.carousel-track .car-card-body { padding: 11px 11px 9px; }
.carousel-track .car-title { font-size: .86rem; }
.carousel-track .car-variant,
.carousel-track .car-meta { font-size: .8rem; }
.carousel-track .car-card-body .car-price { font-size: 1.25rem; }

/* --- "Show N cars" button under the budget rows --- */
.budget-cta { text-align: center; margin-top: 30px; }
.budget-cta .btn { padding: 14px 40px; font-size: 1rem; }

/* ============================================================
   MOBILE — special offers 2x2 grid; budget cards extra compact
   ============================================================ */
@media (max-width: 767px) {
  /* Special Offers: 2 columns, 2 rows (not one big column) */
  .section .car-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .section .car-grid .car-card-img { margin: 5px 5px 0; }
  .section .car-grid .car-card-body { padding: 9px 9px 7px; }
  .section .car-grid .car-title { font-size: .74rem; line-height: 1.25; }
  .section .car-grid .car-variant,
  .section .car-grid .car-meta { font-size: .68rem; }
  .section .car-grid .car-card-body .car-price { font-size: 1rem; }
  .section .car-grid .car-weekly { font-size: .6rem; }
  .section .car-grid .car-compare { padding: 8px 4px; font-size: .72rem; }
  .section .car-grid .stamp-special { width: 46px; font-size: .48rem; padding: 6px 4px 12px; }

  /* Budget carousel: even smaller — just recognise car/price */
  .carousel-track .car-card { width: 60vw; }
  .carousel-track .car-card-body { padding: 9px 9px 7px; }
  .carousel-track .car-title { font-size: .78rem; }
  .carousel-track .car-variant,
  .carousel-track .car-meta { font-size: .7rem; }
  .carousel-track .car-card-body .car-price { font-size: 1.05rem; }
  .carousel-track .car-weekly { font-size: .62rem; }
}

/* Special Offers: cap card width so 4-across doesn't stretch too wide.
   Centres the row when cards are narrower than the container. */
@media (min-width: 768px) {
  .section .car-grid {
    grid-template-columns: repeat(4, minmax(0, 300px));
    justify-content: center;
  }
}

/* ============================================================
   MATCH sliding carousel cards to the Special Offer cards
   (same 300px width + same padding/typography)
   ============================================================ */
@media (min-width: 768px) {
  .carousel-track .car-card { width: 300px; }
  .carousel-track .car-card-img { margin: 7px 7px 0; }
  .carousel-track .car-card-body { padding: 11px 11px 9px; }
  .carousel-track .car-title { font-size: .86rem; }
  .carousel-track .car-variant,
  .carousel-track .car-meta { font-size: .8rem; }
  .carousel-track .car-card-body .car-price { font-size: 1.25rem; }
  .carousel-track .car-weekly { font-size: .7rem; }
  .carousel-track .car-compare { padding: 10px 8px; font-size: .82rem; }
}

/* ============================================================
   BUTTONS — less rounded corners (was fully-pill 999px)
   ============================================================ */
.btn { border-radius: 10px; }
.nav-cta { border-radius: 10px; }
.search-btn { border-radius: 10px; }
.budget-cta .btn { border-radius: 10px; }
.inv-sortbar select { border-radius: 10px; }

/* ============================================================
   MOBILE — sliding carousel cards EXACTLY match the 2-up
   static Special Offer cards (same width, padding, type).
   Width = (screen - wrap padding - gap) / 2, same as the 2-col grid.
   This block is last so it wins over the earlier 60vw rule.
   ============================================================ */
@media (max-width: 767px) {
  .carousel-track .car-card {
    width: calc((100vw - 36px - 10px) / 2);   /* 18px wrap padding each side + 10px gap */
  }
  .carousel-track .car-card-img { margin: 5px 5px 0; }
  .carousel-track .car-card-body { padding: 9px 9px 7px; }
  .carousel-track .car-title { font-size: .74rem; line-height: 1.25; }
  .carousel-track .car-variant,
  .carousel-track .car-meta { font-size: .68rem; }
  .carousel-track .car-card-body .car-price { font-size: 1rem; }
  .carousel-track .car-weekly { font-size: .6rem; }
  .carousel-track .car-compare { padding: 8px 4px; font-size: .72rem; }
  .carousel-track .stamp-special { width: 46px; font-size: .48rem; padding: 6px 4px 12px; }
  .carousel-track { gap: 10px; }
}

/* ============================================================
   CAR SWIPER v2 — cleaners-style peek row + full-screen swiper
   ============================================================ */
.swiper-sec { overflow: hidden; padding-top: clamp(18px, 1.8vw, 26px); padding-bottom: clamp(18px, 1.8vw, 26px); }

/* ---- DEFAULT: fanned peek row (ported from cleaners .rv-slot) ---- */
.peek-stage {
  position: relative; height: 380px; max-width: 1100px; margin: 0 auto 26px;
  width: 100%; cursor: pointer;
}
/* Built like the car cards everywhere else on the site: photo on top with a
   small inset, details on a white bar underneath. The caption used to sit ON
   the photo behind a dark gradient, which buried the car — worst on phones,
   where the price took up a third of the picture. Card height is now the photo
   plus the bar, so DON'T put aspect-ratio back on .peek-card. */
.peek-card {
  position: absolute; top: 50%; left: 50%; width: 440px;
  display: flex; flex-direction: column; padding: 10px;
  border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(15,20,32,.15);
  transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .7s, filter .7s;
}
.peek-card img {
  width: 100%; aspect-ratio: 16/10; height: auto; object-fit: cover;
  display: block; border-radius: 12px; background: var(--off);
}
.peek-cap { padding: 12px 4px 2px; color: var(--ink); text-align: left; }
.peek-cap .n { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--ink); }
.peek-cap .k { font-size: .82rem; color: var(--grey); margin-top: 2px; }
.peek-cap .p { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin-top: 6px; color: var(--ink); }
/* slot positions: center=0, fan ±1, ±2 */
.peek-slot0  { transform: translate(-50%,-50%) translateX(0)      scale(1);   z-index:5; opacity:1; }
.peek-slot1  { transform: translate(-50%,-50%) translateX(330px)  scale(.78); z-index:4; opacity:.7; filter:blur(.5px); }
.peek-slot-1 { transform: translate(-50%,-50%) translateX(-330px) scale(.78); z-index:4; opacity:.7; filter:blur(.5px); }
.peek-slot2  { transform: translate(-50%,-50%) translateX(560px)  scale(.62); z-index:3; opacity:.35; filter:blur(1.5px); }
.peek-slot-2 { transform: translate(-50%,-50%) translateX(-560px) scale(.62); z-index:3; opacity:.35; filter:blur(1.5px); }
.peek-hidden { opacity: 0; pointer-events: none; }

/* ---- Price filter: single dropdown button ---- */
.swipe-filter { display: flex; justify-content: center; margin: 0; position: relative; z-index: 20; }
.swipe-dd { position: relative; }
.swipe-dd-toggle {
  border: 1px solid var(--line); background: #fff; border-radius: 999px;
  padding: 10px 20px; font-family: var(--font-body); font-size: .92rem; font-weight: 700;
  color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 6px 18px rgba(15,20,32,.10);
}
.swipe-dd-caret { font-size: .7rem; color: var(--grey); }
.swipe-dd-menu {
  position: absolute; bottom: calc(100% + 10px); top: auto; left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 6px;
  box-shadow: 0 -14px 40px rgba(15,20,32,.22); z-index: 1100; min-width: 190px;
  display: none; flex-direction: column; gap: 2px;
}
.swipe-dd.open .swipe-dd-menu { display: flex; }
.swipe-dd-opt {
  border: none; background: none; text-align: left; padding: 10px 14px; border-radius: 9px;
  font-family: var(--font-body); font-size: .9rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.swipe-dd-opt:hover { background: var(--off); }
.swipe-dd-opt.on { background: var(--purple); color: #fff; }

/* ============================================================
   SHORTLIST BOX — always visible, white on grey, 2x2 fill order
   ============================================================ */
.shortlist {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 18px; width: 100%;
  box-shadow: 0 10px 30px rgba(15,20,32,.06);
}
.shortlist-grid {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  grid-auto-flow: column;              /* fill: TL, BL, TR, BR */
  gap: 14px;
}
.sl-cell {
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--off); min-height: 96px; position: relative;
  display: flex; align-items: center;
}
.sl-cell.filled { background: #fff; cursor: pointer; }
.sl-empty {
  width: 100%; text-align: center; color: var(--grey-2);
  font-size: .82rem; font-weight: 600;
}
.sl-card-inner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 8px; }
.sl-card-inner img { width: 92px; height: 72px; object-fit: cover; border-radius: 10px; flex-shrink: 0; background: var(--off); }
.sl-txt { text-align: left; min-width: 0; }
.sl-txt .n { font-family: var(--font-display); font-weight: 700; font-size: .88rem; line-height: 1.2; }
.sl-txt .k { font-size: .75rem; color: var(--grey); margin: 2px 0; }
.sl-txt .p { font-weight: 800; font-size: .98rem; }
.sl-x {
  position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; z-index: 4;
  border-radius: 50%; background: #fff; border: 1.5px solid var(--purple);
  color: var(--purple); cursor: pointer; font-size: .8rem; line-height: 1;
  display: grid; place-items: center;
}
.shortlist-cta { display: flex; align-items: center; justify-content: center; margin-top: 16px; }
.shortlist-clear { background: none; border: none; color: var(--grey); font-weight: 600; font-size: .9rem; cursor: pointer; }
.shortlist-clear:hover { color: var(--purple); }
.shortlist-cta .btn { flex: 0 0 auto; width: auto; max-width: none; padding: 12px 44px; }

/* ============================================================
   FULL-SCREEN SWIPER OVERLAY
   ============================================================ */
.swiper-overlay {
  position: fixed; inset: 0; z-index: 1000;
  height: 100vh; height: 100dvh;              /* locked to the screen height */
  overflow: hidden; overscroll-behavior: none; /* NO scrollbar, no drag-away */
  touch-action: none;
  background: #F2F1F6;                         /* mobile = light panel */
  --bar-h: 0px;                               /* bottom bar space to reserve (desktop overrides) */
  --rsv: 400px;                               /* vertical space used by everything EXCEPT the card */
}
.swiper-overlay[hidden] { display: none; }
.swiper-inner {
  height: 100vh; height: 100dvh; box-sizing: border-box;
  max-width: 480px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(8px, 1.8vh, 18px);
  padding: clamp(44px, 7vh, 72px) 14px calc(var(--bar-h) + 12px);
}
.swiper-close {
  position: fixed; top: 18px; right: 18px; z-index: 1010;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line);
  background: #fff; color: var(--ink); font-size: 1.1rem; cursor: pointer;
  box-shadow: var(--shadow);
}

.swipe-stage {
  position: relative;
  /* Mathematical fit: never wider than the screen, never taller than the
     space left after the bars — whichever is smaller wins. */
  width: min(92vw, 460px, calc((100dvh - var(--rsv)) * 4 / 3));
  aspect-ratio: 4 / 3;
  margin: 0 auto 40px;                          /* room for the bubbles below */
  touch-action: none;
}

.swipe-card {
  position: absolute; inset: 0;
  border-radius: 22px; overflow: visible;      /* bubbles overflow the bottom */
  will-change: transform; cursor: grab;
  transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s;
}
.swipe-card.dragging { transition: none; cursor: grabbing; }
.swipe-card.gone-left  { transform: translateX(-140%) rotate(-16deg) !important; opacity: 0; }
.swipe-card.gone-right { transform: translateX(140%)  rotate(16deg)  !important; opacity: 0; }
/* only the TOP card is visible; the rest are fully hidden (no bleed-through) */
.swipe-card.behind-1 { transform: scale(.955) translateY(10px); opacity: 0; }
.swipe-card.behind-2 { transform: scale(.91)  translateY(20px); opacity: 0; }
.swipe-card.buried   { opacity: 0; pointer-events: none; }

/* the image fills the card, with a white border (as drawn) */
.swipe-img {
  position: absolute; inset: 0; border-radius: 22px; overflow: hidden;
  background: var(--off);
  box-shadow: 0 18px 45px rgba(15,20,32,.18);
  container-type: inline-size;                 /* lets the info text scale with the card (cqw) */
}
.swipe-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .2s; }
.swipe-photo.active { opacity: 1; }

/* progress LINES (6), active = purple */
.swipe-lines {
  position: absolute; top: 14px; left: 14px; right: 14px; z-index: 12;
  display: flex; gap: 6px;
}
.swipe-line { flex: 1; height: 4px; border-radius: 2px; background: rgba(255,255,255,.55); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: background .2s; }
.swipe-line.on { background: var(--purple); }

.swipe-photo-nav { position: absolute; top: 40px; bottom: 30%; width: 42%; z-index: 8; background: none; border: none; cursor: pointer; display: flex; align-items: center; }
.swipe-photo-nav.prev { left: 0;  justify-content: flex-start; padding-left: 10px; }
.swipe-photo-nav.next { right: 0; justify-content: flex-end;   padding-right: 10px; }
.swipe-photo-nav svg { width: 22px; height: 22px; min-width: 22px; max-width: 22px; flex: 0 0 auto; color: #fff; opacity: .92; filter: drop-shadow(0 1px 4px rgba(0,0,0,.6)); transition: opacity .15s, transform .15s; }
.swipe-photo-nav:hover svg { opacity: 1; transform: scale(1.12); }

/* car info overlaid on the image bottom */
.swipe-info {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 10;
  padding: 8cqw 5cqw clamp(48px, 9cqw, 60px);  /* bottom keeps text clear of the bubbles */
  color: #fff; border-radius: 0 0 22px 22px;
  background: linear-gradient(transparent, rgba(15,18,28,.82));
}
.swipe-titleline { font-family: var(--font-display); font-weight: 700; font-size: 1rem; font-size: clamp(12px, 4.4cqw, 22px); line-height: 1.2; }
.swipe-price { font-family: var(--font-display); font-weight: 800; font-size: 1.7rem; font-size: clamp(20px, 9.5cqw, 40px); margin-top: 1cqw; }

/* LIKE / SKIP stamps */
.swipe-stamp {
  position: absolute; top: 40px; z-index: 13; padding: 8px 16px; border-radius: 10px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.5rem;
  letter-spacing: .04em; border: 3px solid; opacity: 0; transition: opacity .12s; pointer-events: none;
}
.swipe-stamp.like { right: 22px; color: #16a34a; border-color: #16a34a; transform: rotate(14deg); }
.swipe-stamp.nope { left: 22px;  color: #ef4444; border-color: #ef4444; transform: rotate(-14deg); }
.swipe-card.show-like .swipe-stamp.like { opacity: 1; }
.swipe-card.show-nope .swipe-stamp.nope { opacity: 1; }

/* 4 bubbles overlapping the image bottom */
.swipe-bubbles {
  position: absolute; left: 0; right: 0; bottom: -30px; z-index: 15;
  display: flex; align-items: center; justify-content: center; gap: 16px;
}
.swipe-bub {
  width: 60px; height: 60px; border-radius: 50%; cursor: pointer; border: none;
  background: #fff; box-shadow: 0 8px 22px rgba(15,20,32,.18);
  display: grid; place-items: center; transition: transform .15s;
}
.swipe-bub:hover { transform: translateY(-3px); }
.swipe-bub svg { width: 26px; height: 26px; }
.swipe-bub.back { color: #F59E0B; }               /* come back - amber */
.swipe-bub.skip { background: #EF4444; color: #fff; width: 68px; height: 68px; }  /* dislike - red, bigger */
.swipe-bub.skip svg { width: 30px; height: 30px; }
.swipe-bub.like { color: var(--purple); }         /* like - purple heart */

/* ---- COACH MARK: full-screen dim + centred instruction, phones only ----
   Sits above .swiper-inner (z 1005) but below the close button (z 1010), so
   the visitor can always bail out. .hint-on is added by swiper.js on open and
   cleared ~3.4s later; tapping the layer dismisses it early. */
.swipe-coach {
  position: fixed; inset: 0; z-index: 1005;
  display: none;                       /* desktop never shows it */
  flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  padding: 0 28px; text-align: center;
  background: rgba(12,10,20,.74);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0;
}
.swipe-coach-txt {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 6.2vw, 1.75rem); line-height: 1.35; color: #fff;
  margin: 0; text-wrap: balance;
}
.swipe-coach-heart {
  width: 1.15em; height: 1.15em; vertical-align: -.2em; margin: 0 .12em;
  color: #BE9DE7;
  animation: heart-pulse 1.3s ease-in-out infinite;   /* same beat as the button */
}
.swipe-coach-arrow { width: 34px; height: 34px; color: #BE9DE7; animation: coach-nudge 1.4s ease-in-out infinite; }
@keyframes coach-nudge { 0%,100% { transform: translateY(0); opacity: .75; } 50% { transform: translateY(7px); opacity: 1; } }

@media (max-width: 767px) {
  /* 3.4s total: ~0.3s fading in, 3s readable, ~0.4s out. If it needs longer,
     change this duration AND the matching timeout in swiper.js. */
  .swiper-overlay.hint-on .swipe-coach { display: flex; animation: swipe-coach-pop 3.4s ease forwards; }
}
@keyframes swipe-coach-pop {
  0%       { opacity: 0; }
  9%, 88%  { opacity: 1; }
  100%     { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .swiper-overlay.hint-on .swipe-coach { animation: none; opacity: 1; }
  .swipe-coach-heart, .swipe-coach-arrow { animation: none; }
}

.swipe-bub.next { color: #1D4ED8; }               /* next - blue */

/* end state */
.swipe-done {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 8px;
  background: #fff; border: 6px solid #fff; border-radius: 22px; padding: 30px;
  box-shadow: 0 18px 45px rgba(15,20,32,.18);
}
.swipe-done.show { display: flex; }
.swipe-done-ic { font-size: 3rem; }
.swipe-done h3 { font-size: 1.4rem; }
.swipe-done p { color: var(--grey); margin-bottom: 8px; }

@media (max-width: 900px) {
  .peek-card { width: 320px; }
  .peek-slot1  { transform: translate(-50%,-50%) translateX(210px)  scale(.76); }
  .peek-slot-1 { transform: translate(-50%,-50%) translateX(-210px) scale(.76); }
  .peek-slot2  { transform: translate(-50%,-50%) translateX(360px)  scale(.6); }
  .peek-slot-2 { transform: translate(-50%,-50%) translateX(-360px) scale(.6); }
}
@media (max-width: 767px) {
  .peek-stage { height: 300px; }
  .peek-card { width: 260px; padding: 8px; }
  .peek-cap { padding: 10px 3px 1px; }
  .peek-cap .n { font-size: .92rem; }
  .peek-cap .p { font-size: 1.25rem; margin-top: 4px; }
  .peek-slot1  { transform: translate(-50%,-50%) translateX(150px)  scale(.72); }
  .peek-slot-1 { transform: translate(-50%,-50%) translateX(-150px) scale(.72); }
  .peek-slot2, .peek-slot-2 { opacity: 0; }         /* only 3 visible on phone */
  .shortlist-grid { gap: 10px; }
  .sl-card-inner img { width: 66px; height: 52px; }
  .sl-txt .n { font-size: .78rem; }
  .sl-txt .k { font-size: .68rem; }
  .sl-txt .p { font-size: .9rem; }
}

/* Short phones (e.g. iPhone SE): shrink the compare box a bit more.
   The card itself already auto-fits via the min() formula (--rsv). */
@media (max-width: 767px) and (max-height: 720px) {
  .sl-cell { min-height: 72px; }
  .sl-card-inner img { width: 52px; height: 40px; }
  .shortlist { padding: 12px; }
  .shortlist-cta { margin-top: 10px; }
  .shortlist-cta .btn { padding: 10px 36px; }
}

/* Only the TOP swipe card's bubbles are interactive (behind cards' bubbles
   would otherwise intercept clicks since they overflow the card bottom) */
.swipe-card.behind-1 .swipe-bubbles,
.swipe-card.behind-2 .swipe-bubbles,
.swipe-card.buried .swipe-bubbles,
.swipe-card.behind-1 .swipe-photo-nav,
.swipe-card.behind-2 .swipe-photo-nav,
.swipe-card.buried .swipe-photo-nav { pointer-events: none; }

/* Behind & buried cards must not intercept ANY clicks — only the top card
   is interactive. (Their images/bubbles overflow and would block the top.) */
.swipe-card.behind-1, .swipe-card.behind-2, .swipe-card.buried { pointer-events: none; }

/* ============================================================
   SWIPER — mobile vs desktop split (added)
   Mobile: light panel, everything fits one screen, in-overlay box.
   Desktop: dim the frozen page, centered card only, bottom compare bar.
   ============================================================ */

/* Mobile: while the swiper is open, hide the bottom compare tray
   (mobile uses the in-overlay 2x2 box instead). */
@media (max-width: 767px) {
  body.swiper-open .cmp-tray { display: none !important; }
}

/* Desktop: dim the frozen page, centered card, and the bottom compare bar is
   ALWAYS visible (even with 0 cars) — its height is reserved so nothing hides. */
@media (min-width: 768px) {
  .swiper-overlay {
    background: rgba(17,20,29,.62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    --bar-h: 132px;                 /* always-visible bottom bar */
    --rsv: 312px;                   /* bar + close + filter + bubbles + gaps */
  }
  .swiper-inner { max-width: none; }  /* full width so the card & filter share the same center */
  .swipe-stage { width: min(52vw, 1040px, calc((100dvh - var(--rsv)) * 4 / 3)); }
  #shortlist { display: none; }     /* desktop uses the bottom compare bar */

  /* bar is always shown while the swiper is open, and sits above the backdrop */
  body.swiper-open .cmp-tray { transform: translateY(0); z-index: 1005; }
}

/* ============================================================
   PROMO CARDS (Carma-style: image + cream text panel)
   Purple gradient = placeholder (shows until real images exist).
   MOBILE: image is the 4:3 banner (::before), cream panel below.
           -> /cardealers/assets/promo-finance-mobile.webp  (1200x900 / 4:3)
           -> /cardealers/assets/promo-quality-mobile.webp
   DESKTOP: image fills the card, cream panel floats inset on the left.
           -> /cardealers/assets/promo-finance.webp  (1600x700, wide)
           -> /cardealers/assets/promo-quality.webp
   ============================================================ */
.promo-sec { padding: 8px 0 46px; }
.promo-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }

.promo-card {
  position: relative; display: flex; flex-direction: column;
  border-radius: 20px; overflow: hidden; text-decoration: none;
  background: linear-gradient(135deg, #6530A6, #351957);
  box-shadow: 0 16px 40px rgba(15,20,32,.12);
  transition: transform .2s, box-shadow .2s;
}
.promo-card:hover { transform: translateY(-3px); box-shadow: 0 22px 52px rgba(15,20,32,.18); }

/* MOBILE: the 4:3 banner holds the image, so a 4:3 image fits with NO crop */
.promo-card::before {
  content: ""; width: 100%; aspect-ratio: 4/3; display: block;
  background: linear-gradient(135deg, #6530A6, #351957);   /* purple placeholder */
  background-size: cover; background-position: center;
}
.promo-finance::before { background-image: url(/cardealers/assets/promo-finance-mobile.webp), linear-gradient(135deg,#6530A6,#351957); }
.promo-quality::before { background-image: url(/cardealers/assets/promo-quality-mobile.webp), linear-gradient(135deg,#6530A6,#351957); }
.promo-team::before    { background-image: url(/cardealers/assets/promo-team-mobile.webp),    linear-gradient(135deg,#6530A6,#351957); }
.promo-sell::before    { background-image: url(/cardealers/assets/promo-sell-mobile.webp),    linear-gradient(135deg,#6530A6,#351957); }

/* MOBILE panel. The angled clip-path this used to have was cut for a wide
   card; on a phone the diagonal became so steep that the card's purple
   background showed through as a broken wedge. A plain rounded top reads
   cleanly at any width. */
.promo-panel {
  position: relative; margin-top: -28px;                    /* overlap the banner bottom */
  background: #F7F5EF; padding: 28px 22px 26px;
  border-radius: 20px 20px 0 0;
}
.promo-title { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--ink); line-height: 1.15; margin: 0 0 12px; }
.promo-text  { color: var(--ink-2); font-size: .98rem; line-height: 1.5; margin: 0 0 22px; }
.promo-btn {
  display: inline-block; background: #fff; color: var(--purple);
  border: 2px solid var(--lilac-soft); border-radius: 10px;
  padding: 12px 24px; font-weight: 700; font-size: .95rem;
}
.promo-card:hover .promo-btn { border-color: var(--purple); background: var(--lilac-bg); }

/* DESKTOP: image fills the whole card; cream panel floats inset on the left,
   so the image shows as a border around it + the big right area. */
@media (min-width: 768px) {
  .promo-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .promo-card { flex-direction: row; aspect-ratio: 2.35 / 1; background-size: cover; background-position: center; }
  .promo-card::before { display: none; }                    /* no banner on desktop */
  .promo-finance { background-image: url(/cardealers/assets/promo-finance.webp), linear-gradient(135deg,#6530A6,#351957); }
  .promo-quality { background-image: url(/cardealers/assets/promo-quality.webp), linear-gradient(135deg,#6530A6,#351957); }
  .promo-team    { background-image: url(/cardealers/assets/promo-team.webp),    linear-gradient(135deg,#6530A6,#351957); }
  .promo-sell    { background-image: url(/cardealers/assets/promo-sell.webp),    linear-gradient(135deg,#6530A6,#351957); }
  .promo-panel {
    position: absolute; top: 22px; left: 22px; bottom: 22px; width: 52%;
    margin-top: 0; padding: 30px 40px 30px 34px; z-index: 1;
    display: flex; flex-direction: column; justify-content: center;
    clip-path: polygon(16px 0, calc(100% - 16px) 0, calc(100% - 16px + 8px) 2px, calc(100% - 16px + 14px) 8px, 100% 16px, 82% calc(100% - 16px), calc(82% - 16px + 14px) calc(100% - 16px + 8px), calc(82% - 16px + 8px) calc(100% - 16px + 14px), calc(82% - 16px) 100%, 16px 100%, calc(16px + -8px) calc(100% - 16px + 14px), calc(16px + -14px) calc(100% - 16px + 8px), 0 calc(100% - 16px), 0 16px, 2px 8px, 8px 2px);  /* angled right + rounded corners */
  }
  .promo-btn { align-self: stretch; text-align: left; }     /* button reaches the angled line */
  .promo-title { font-size: 1.55rem; }
  .promo-text  { max-width: 96%; }
}

/* ============================================================
   EXPERT CAR REVIEWS (3-card preview, carsales-style)
   Cards link to the /reviews blog. Purple placeholder in the photo
   area until real review images are added later.
   ============================================================ */
.reviews-sec { padding: 24px 0 20px; }
.reviews-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.reviews-head h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); color: var(--ink); margin: 0; }
.reviews-more { padding: 8px 18px; font-size: .85rem; border-width: 1.5px; white-space: nowrap; }
.reviews-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.reviews-sec .review-title { font-size: .98rem; }
.reviews-sec .review-body { padding: 14px 14px 18px; }

.review-card {
  display: block; border-radius: 18px; overflow: hidden; text-decoration: none;
  background: #fff; border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15,20,32,.08);
  transition: transform .2s, box-shadow .2s;
}
.review-card:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(15,20,32,.14); }
.review-img {
  position: relative; aspect-ratio: 16/10;
  background: linear-gradient(135deg, #6530A6, #351957);   /* purple placeholder */
  background-size: cover; background-position: center;
}
.review-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(15,18,28,.72); color: #fff;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
}
.review-body { padding: 18px 18px 22px; }
.review-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); line-height: 1.3; margin: 0 0 12px; }
.review-meta { color: var(--grey); font-size: .85rem; margin: 0; }
.reviews-cta { display: flex; justify-content: center; margin-top: 30px; }

@media (max-width: 1080px) { .reviews-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 820px)  { .reviews-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px)  { .reviews-grid { grid-template-columns: 1fr; } }

/* Per-card review images (purple placeholder until real images exist).
   Images go in /cardealers/assets/ — 1200x750 (16:10) WebP each. */
.rev-1 { background-image: url(/cardealers/assets/review-1.webp), linear-gradient(135deg,#6530A6,#351957); }
.rev-2 { background-image: url(/cardealers/assets/review-2.webp), linear-gradient(135deg,#6530A6,#351957); }
.rev-3 { background-image: url(/cardealers/assets/review-3.webp), linear-gradient(135deg,#6530A6,#351957); }
.rev-4 { background-image: url(/cardealers/assets/review-4.webp), linear-gradient(135deg,#6530A6,#351957); }
.rev-5  { background-image: url(/cardealers/assets/review-5.webp),  linear-gradient(135deg,#6530A6,#351957); }
.rev-6  { background-image: url(/cardealers/assets/review-6.webp),  linear-gradient(135deg,#6530A6,#351957); }
.rev-7  { background-image: url(/cardealers/assets/review-7.webp),  linear-gradient(135deg,#6530A6,#351957); }
.rev-8  { background-image: url(/cardealers/assets/review-8.webp),  linear-gradient(135deg,#6530A6,#351957); }
.rev-9  { background-image: url(/cardealers/assets/review-9.webp),  linear-gradient(135deg,#6530A6,#351957); }
.rev-10 { background-image: url(/cardealers/assets/review-10.webp), linear-gradient(135deg,#6530A6,#351957); }
.rev-11 { background-image: url(/cardealers/assets/review-11.webp), linear-gradient(135deg,#6530A6,#351957); }
.rev-12 { background-image: url(/cardealers/assets/review-12.webp), linear-gradient(135deg,#6530A6,#351957); }

/* ===== Blog sections (Reviews / Guides / Insights) ===== */
/* Shorter purple banner so the tabs + 2 rows of cards fit above the fold */
/* Short banner hero (Finance, Sold, Resources, Pricing, blog).
   Centred, with the bottom padding carrying the 60px curve so the text sits
   visually mid-band instead of hugging the top. */
.blog-hero { padding: 46px 0 106px; text-align: center; }
.blog-hero .wrap { display: flex; flex-direction: column; align-items: center; }
.blog-hero h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); max-width: 820px; margin-left: auto; margin-right: auto; }
.blog-hero p.lead { margin-left: auto; margin-right: auto; }
@media (max-width: 700px) {
  .blog-hero { padding: 34px 0 88px; }
}
.blog-list { padding: 0 0 46px; }

/* Section tabs — Reviews / Guides / Insights (active = filled purple) */
.content-tabs { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 24px auto 26px; }
.ct-tab {
  padding: 9px 24px; border-radius: 999px; background: #fff; color: var(--ink);
  font-weight: 700; font-size: .95rem; text-decoration: none;
  border: 1.5px solid var(--line); box-shadow: 0 6px 18px rgba(15,20,32,.08);
  transition: background .15s, color .15s, border-color .15s;
}
.ct-tab:hover { border-color: var(--purple); color: var(--purple); }
.ct-tab.active { background: var(--purple); color: #fff; border-color: var(--purple); box-shadow: 0 8px 22px rgba(135,83,198,.35); }

/* Card grid — mobile-first: 2 per row on ANY phone (fits the width via 1fr 1fr) */
.reviews-page-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 1200px; margin: 0 auto; }
.blog-list .review-title { font-size: .9rem; }
.blog-list .review-body { padding: 12px 12px 16px; }
.blog-list .review-meta { font-size: .78rem; }

/* Desktop: 4 per row. Image keeps its true 16:10 — same rule as the inventory,
   the card adapts to width, never to viewport height. */
@media (min-width: 768px) {
  .reviews-page-grid { grid-template-columns: repeat(4, 1fr); gap: 22px; }
  .blog-list .review-img { aspect-ratio: 16/10; height: auto; }
  .blog-list .review-title { font-size: .98rem; }
  .blog-list .review-body { padding: 14px 14px 18px; }
}
@media (min-width: 768px) and (max-width: 1080px) { .reviews-page-grid { grid-template-columns: repeat(3, 1fr); } }

/* ===== Individual blog post ===== */
.post-wrap { padding: 40px 0 70px; }
.post-narrow { max-width: 760px; }
.post-back { color: var(--purple); font-weight: 600; text-decoration: none; font-size: .9rem; }
.post-kicker { text-transform: uppercase; letter-spacing: .08em; font-size: .75rem; font-weight: 700; color: var(--purple); margin: 18px 0 6px; }
.post-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 8px; color: var(--ink); }
.post-meta { color: var(--grey); font-size: .9rem; margin: 0 0 24px; }
.post-cover { width: 100%; aspect-ratio: 16/9; border-radius: 16px; background-size: cover; background-position: center; margin-bottom: 28px; }
.post-body { color: var(--ink-2); font-size: 1.05rem; line-height: 1.7; }
.post-body p { margin: 0 0 18px; }
.post-body h2 { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink); margin: 30px 0 12px; }
.post-body a { color: var(--purple); }
.post-figure { margin: 26px 0; }
.post-figure img { width: 100%; border-radius: 14px; display: block; }
.post-cta { display: flex; gap: 12px; margin-top: 34px; flex-wrap: wrap; }

/* ============================================================
   INVENTORY GRID — 4 across, photo always true 4:3
   The card adapts to the WIDTH of the screen. Height is free:
   the page scrolls, and the photo is never squashed or cropped.
   Do NOT tie the image height to 100dvh again — that made the
   photo 162px on a 911px window and 240px on a taller one,
   neither of which is 4:3.
   Mobile: 2 cards per row on any phone width.
   ============================================================ */
@media (min-width: 768px) {
  .inv-results .car-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .inv-results .car-card-img { aspect-ratio: 4/3; height: auto; }
}
@media (min-width: 768px)  and (max-width: 1199px) { .inv-results .car-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px)  and (max-width: 999px)  { .inv-results .car-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   CONTACT STRIP (home, above the reviews)
   Wide and shallow: map | address + hours | four contact tiles.
   The map column is the narrow one — the tiles need the room.
   ============================================================ */
.contact-sec { padding-top: 0; padding-bottom: 34px; }
/* text | map | tiles. Text and tiles are sized to their content; the map takes
   whatever is left, so no dead space opens up between the columns. */
.contact-strip {
  display: grid; grid-template-columns: 290px 1fr 400px;
  gap: 28px; align-items: stretch;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 30px;
}
.contact-strip--nomap { grid-template-columns: 1fr 400px; }
/* Only the map stretches; the other two sit centred against it. */
.cs-info, .cs-tiles { align-self: center; }

.cs-map {
  border-radius: 14px; overflow: hidden; border: 1px solid var(--line);
  min-height: 230px; background: var(--lilac-bg);
}
.cs-map iframe { width: 100%; height: 100%; border: 0; display: block; }

.cs-title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.15; color: var(--ink); margin: 0 0 18px; }
/* Tighter than the vehicle page copies of these — this box has to stay shallow */
.cs-info .ei-head { margin-bottom: 6px; }
.cs-info .ei-address { margin-bottom: 14px; }
.cs-info .ei-hours { margin-bottom: 0; }

.cs-tiles { align-self: center; }

@media (max-width: 1200px) {
  /* Not enough width for three columns: text beside the map, tiles below. */
  .contact-strip, .contact-strip--nomap { grid-template-columns: 290px 1fr; }
  .cs-tiles { grid-column: 1 / -1; align-self: auto; }
  .cs-map { min-height: 210px; }
}
@media (max-width: 767px) {
  .contact-strip, .contact-strip--nomap { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .cs-tiles { grid-column: auto; }

  /* Phone order: text, then map, then the buttons. */
  .cs-info  { order: 1; text-align: center; }
  .cs-map   { order: 2; }
  .cs-tiles { order: 3; }

  /* Centre the headings too — they are flex rows, so text-align alone
     leaves the icon + label hugging the left. */
  .cs-info .ei-head { justify-content: center; }
  .cs-info .ei-hours li { text-align: center; }

  /* Full width edge to edge inside the card, and shallow enough not to
     take over the screen. width:100% guards against the iframe's own
     300px intrinsic width winning if the stretch ever fails. */
  .cs-map { width: 100%; min-height: 0; aspect-ratio: 16/9; }
  .cs-map iframe { width: 100%; }

  .cs-title { font-size: 1.3rem; margin-bottom: 14px; }
  .cs-info .ei-address { margin-bottom: 12px; }
  .cs-info .ei-hours { margin-bottom: 0; }
}
/* Keep the four tiles as a 2x2 block on phones. The vehicle page stacks them
   one per row, but this strip has to stay shallow. */
@media (max-width: 560px) {
  .cs-tiles.enquire-tiles { grid-template-columns: 1fr 1fr; gap: 10px; }
  .cs-tiles .ec-tile { gap: 8px; }
  .cs-tiles .ec-tile { padding: 13px 12px; }
  .cs-tiles .ec-txt strong { font-size: .88rem; white-space: nowrap; }
  .cs-tiles .ec-ico { flex-basis: 34px; width: 34px; height: 34px; }
  .cs-tiles .ec-ico svg { width: 16px; height: 16px; }
}
@media (max-width: 380px) {
  /* "WhatsApp" is the longest label — shrink a touch so it stays on one line */
  .cs-tiles .ec-tile { padding: 12px 9px; }
  .cs-tiles .ec-txt strong { font-size: .8rem; }
  .cs-tiles .ec-ico { flex-basis: 30px; width: 30px; height: 30px; }
  .cs-tiles .ec-ico svg { width: 15px; height: 15px; }
}

/* ============================================================
   REVIEW TILES IN THE INVENTORY GRID
   NOTE: class is .rev-tile, NOT .promo-card — that name is already taken by
   the Carma-style promo panels on the home page, and reusing it dragged in
   their purple gradient, 20px radius and hover lift.
   Photo fills the card; a scrim panel across the bottom carries the review
   name and a white button.
   ============================================================ */
.rev-tile { display: block; align-self: stretch; justify-self: stretch; width: auto; padding: 0; }
.rev-tile-link { position: absolute; inset: 0; display: block; }
.rev-tile .rev-tile-img {
  position: absolute; top: 8px; right: 8px; bottom: 8px; left: 8px;
  overflow: hidden; border-radius: calc(var(--radius) - 8px);
  background-color: var(--lilac-bg);
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end;
}

/* The dark scrim is what keeps the title readable over any photo. */
.rev-tile-panel {
  width: 100%; padding: 30px 12px 14px;
  background: linear-gradient(180deg, rgba(12,14,22,0) 0%, rgba(12,14,22,.62) 42%, rgba(12,14,22,.88) 100%);
  display: flex; flex-direction: column; gap: 11px; align-items: center; text-align: center;
}
.rev-tile-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: .92rem; line-height: 1.25; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
/* Button-only tile (the wording lives in the picture): shorter scrim, so the
   artwork is covered as little as possible. */
.rev-tile-panel-btnonly { padding: 22px 12px 14px; }
.rev-tile-btn {
  display: block; width: 100%; background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: .86rem; line-height: 1;
  padding: 11px 10px; border-radius: var(--radius-sm);   /* same 10px as .btn */
  text-align: center; white-space: nowrap;
  transition: background .15s, color .15s;
}
.rev-tile-link:hover .rev-tile-btn { background: var(--purple); color: #fff; }
.rev-tile:hover { transform: none; box-shadow: none; }

@media (max-width: 767px) {
  .rev-tile .rev-tile-img { top: 5px; right: 5px; bottom: 5px; left: 5px; }
  .rev-tile-panel { padding: 24px 8px 10px; gap: 8px; }
  .rev-tile-title { font-size: .78rem; }
  .rev-tile-btn { font-size: .76rem; padding: 10px 6px; }
}

/* Mobile: 2 per row, sized by fraction of the screen so it fits any phone */
@media (max-width: 767px) {
  .inv-results .car-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .inv-results .car-card-img { margin: 5px 5px 0; }
  .inv-results .car-card-body { padding: 9px 9px 7px; }
  .inv-results .car-title { font-size: .74rem; line-height: 1.25; }
  .inv-results .car-variant,
  .inv-results .car-meta { font-size: .68rem; }
  .inv-results .car-card-body .car-price { font-size: 1rem; }
  .inv-results .car-weekly { font-size: .6rem; }
  .inv-results .car-compare { padding: 8px 4px; font-size: .72rem; }
  .inv-results .stamp-special { width: 46px; font-size: .48rem; padding: 6px 4px 12px; }
}

/* Breathing room above the "Our cars" heading and the Sort by bar
   (replaces the spacing the old "Used cars" line used to provide) */
.inv-results .inv-headrow { margin-top: 26px; margin-bottom: 22px; }
@media (max-width: 767px) { .inv-results .inv-headrow { margin-top: 14px; margin-bottom: 14px; } }

/* ===== Pricing page ===== */
.price-intro { max-width: 760px; margin: 0 auto 40px; text-align: center; color: var(--ink-2); font-size: 1.05rem; line-height: 1.6; }
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1040px; margin: 0 auto; align-items: start; }
.price-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 28px 24px; box-shadow: 0 10px 30px rgba(15,20,32,.06); }
.price-card.featured { border-color: var(--purple); box-shadow: 0 18px 44px rgba(135,83,198,.22); }
.price-flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--purple-grad); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: 5px 14px; border-radius: 999px; white-space: nowrap; }
.price-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--ink); }
.price-amt { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; color: var(--ink); margin: 6px 0 2px; }
.price-amt span { font-size: 1rem; font-weight: 600; color: var(--grey); }
.price-tag { color: var(--grey); font-size: .9rem; margin-bottom: 18px; }
.price-feats { list-style: none; margin: 0 0 24px; padding: 0; }
.price-feats li { position: relative; padding: 7px 0 7px 26px; color: var(--ink-2); font-size: .92rem; border-top: 1px solid var(--off); }
.price-feats li::before { content: "✓"; position: absolute; left: 4px; color: var(--purple); font-weight: 800; }
.price-btn { width: 100%; }
.price-note { text-align: center; color: var(--grey); font-size: .85rem; margin-top: 30px; }
@media (max-width: 860px) { .price-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ============================================================
   SELL / TRADE-IN PAGE
   ============================================================ */
/* The purple band sits above, so almost no top padding. The bottom padding is
   cut right down and .howto gets zero top padding — two stacked .section
   defaults were putting ~108px of dead air between the two blocks. */
.sell-hero { padding: 8px 0 clamp(18px, 1.8vw, 28px); }
.howto { padding-top: 0; }
/* Left column is short (headline + start card), so centre the image against
   it. Ratio + aspect tuned together so the image height lands close to the
   height of the text block instead of towering over it. */
/* The whole hero is capped at 1280px and centred INSIDE the 1620px wrap.
   Before, the left track was ~960px wide while .sell-form-col capped its
   content at 620px — the leftover ~340px was the empty gap between the card
   and the image. Now the columns are the content: 1.25fr (~689px) for the
   card and 1fr (~551px) for the image, which at 4:3 lands ~413px tall,
   almost exactly the height of the headline + card. Nothing to eyeball. */
/* ONE column ratio for BOTH stacked blocks (hero card + how-to card), so the
   two white boxes are exactly the same width and both photos are exactly the
   same width. Change the ratio here and both follow.
   Full .wrap width, left-aligned — NOT centred.
   1.1fr / 1fr on a 1620px wrap = 828px content column, 752px image column.
   The card only holds 2 fields now (rego + state), so it does not need the
   922px it had when Build year was in there.

   align-items: STRETCH is the important part. The photos carry no
   aspect-ratio on desktop and are height:100% instead, so each one takes
   exactly the height of the block beside it — the hero photo matches the
   headline+card, the how-to photo matches the white card. That stays true at
   every screen width and however the text rewraps; a fixed pixel height would
   only ever be correct at one width. Mobile puts the ratio back (see the
   max-width:900px block) because a stacked row has no height to fill. */
.sell-hero-grid,
.howto-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: stretch; }
.sell-media-col { display: flex; }
.sell-form-col { max-width: none; }
.accent-text { color: var(--purple); }
.sell-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1.1; margin: 4px 0 12px; color: var(--ink); }
.sell-sub { color: var(--ink-2); font-size: 1.05rem; line-height: 1.55; margin: 0 0 24px; max-width: 90%; }

.trade-form { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px; box-shadow: 0 12px 34px rgba(15,20,32,.06); }
/* Inside the popup the form is not a card — the popup is the card. */
.trade-form--modal { background: none; border: none; box-shadow: none; padding: 0; }

/* ===== Step 1: short start card (Carma style) ===== */
.sell-start { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; box-shadow: 0 12px 34px rgba(15,20,32,.06); max-width: none; }
.sell-start-btn { width: 100%; margin-top: 4px; padding: 13px 20px; font-size: 1rem; }
.sell-start-note { color: var(--grey); font-size: .78rem; text-align: center; margin: 12px 0 0; }
/* Start card holds TWO fields: Registration plate · State of registration.
   Written as `.sell-start .tf-row` — specificity (0,2,0) — on purpose, so it
   always beats the plain .tf-row / .tf-row-3 rules no matter where they sit
   in the file. align-items:end keeps the inputs level if a label wraps. */
.sell-start .tf-row { grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; }
@media (max-width: 480px) { .sell-start .tf-row { grid-template-columns: 1fr; gap: 0; } }

/* ===== Step 2: full form popup ===== */
.sell-modal { position: fixed; inset: 0; z-index: 190; background: rgba(15,18,28,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sell-modal[hidden] { display: none; }
.sell-modal-card { background: #fff; border-radius: 18px; width: 100%; max-width: 900px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 30px 70px rgba(0,0,0,.3); overflow: hidden; }
.sell-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 22px 26px 16px; border-bottom: 1px solid var(--off); }
.sell-modal-head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--ink); margin: 0; }
.sell-modal-head p { color: var(--grey); font-size: .88rem; margin: 4px 0 0; }
.sm-close { flex: 0 0 auto; background: none; border: none; font-size: 1.8rem; line-height: 1; color: var(--grey); cursor: pointer; padding: 0 4px; }
.sm-close:hover { color: var(--ink); }
.sell-modal-body { overflow-y: auto; padding: 22px 26px 26px; -webkit-overflow-scrolling: touch; }
.tf-section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin: 0 0 14px; }
.tf-section-title:not(:first-child) { border-top: 1px solid var(--off); margin-top: 22px; padding-top: 22px; }
.tf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* 3 fields per row (desktop). Drops to 2 under 700px, then 1 under 560px. */
.tf-row-3 { grid-template-columns: repeat(3, 1fr); }
.tf-group { margin-bottom: 14px; }
.tf-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.req { color: var(--purple); }
.tf-optional { color: var(--grey); font-weight: 400; font-size: .8rem; }
.tf-input { width: 100%; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; font-family: var(--font-body); font-size: .95rem; color: var(--ink); background: #fff; transition: border-color .15s, box-shadow .15s; }
.tf-input:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 3px rgba(135,83,198,.15); }
.tf-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 36px; cursor: pointer; }
.tf-textarea { resize: vertical; min-height: 96px; }
.tf-invalid { border-color: #E5484D !important; background: #FEF3F3; }
.tf-km { position: relative; }
.tf-km-suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--grey); font-size: .9rem; pointer-events: none; }
.tf-km .tf-input { padding-right: 42px; }

.tf-photos { background: var(--lilac-bg); border: 1px solid var(--lilac-soft); border-radius: 12px; padding: 16px 18px; margin: 6px 0 18px; }
.tf-photos-head { display: flex; align-items: center; gap: 8px; color: var(--purple); margin-bottom: 6px; }
.tf-photos-head svg { width: 20px; height: 20px; }
.tf-photos p { color: var(--ink-2); font-size: .88rem; line-height: 1.5; margin: 0 0 4px; }
.tf-photos-note { color: var(--grey); font-size: .78rem; }

.tf-error { background: #FEF3F3; border: 1px solid #F5C2C4; color: #B4282C; border-radius: 10px; padding: 12px 14px; font-size: .88rem; margin-bottom: 14px; }

.tf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.tf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.tf-btn svg { width: 18px; height: 18px; }
.btn-wa { background: #25D366; color: #fff; border: none; }
.btn-wa:hover { background: #1EBE5A; color: #fff; }
.tf-privacy { color: var(--grey); font-size: .78rem; text-align: center; margin: 14px 0 0; }

.sell-media-col { position: static; }
/* Hero photo, desktop. NO aspect-ratio — height:100% makes it exactly as tall
   as the headline + card next to it. At full width (>=1660px screen) that is
   about 752 x 390. Source: assets/sell-hero.webp at 1500x780. Keep the
   subject centred: on narrower screens the block gets taller and `cover`
   trims the sides. Mobile uses its own 16:10 file (max-width:900px block). */
.sell-media {
  width: 100%; height: 100%; border-radius: 18px;
  background-image: url(/cardealers/assets/sell-hero.webp), linear-gradient(135deg,#6530A6,#351957);
  background-size: cover; background-position: center;
  box-shadow: 0 16px 40px rgba(15,20,32,.12);
}
.sell-badges { margin-top: 18px; display: grid; gap: 10px; }
.sell-badge { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.sell-badge strong { display: block; font-size: .92rem; color: var(--ink); }
.sell-badge span { font-size: .82rem; color: var(--grey); }

/* Column ratio lives in the shared .sell-hero-grid / .howto-grid rule above.
   NO aspect-ratio on desktop — height:100% makes this photo exactly as tall
   as the white card beside it. At full width that is about 752 x 590.
   Source: assets/sell-howto.webp at 1500x1180. */
.howto-media { width: 100%; height: 100%; border-radius: 18px; background-size: cover; background-position: center; box-shadow: 0 16px 40px rgba(15,20,32,.1); }
.howto-body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 20px; color: var(--ink); }
.howto-steps { list-style: none; margin: 0 0 24px; padding: 0; }
.howto-steps li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--off); }
.howto-steps li:first-child { border-top: none; }
/* Icon bubble instead of a number (Carma style) */
.hs-ico { flex: 0 0 42px; width: 42px; height: 42px; border-radius: 50%; background: var(--lilac-bg); color: var(--purple); display: flex; align-items: center; justify-content: center; }
.hs-ico svg { width: 21px; height: 21px; }
.howto-steps strong { color: var(--ink); }
.howto-steps p { color: var(--ink-2); font-size: .92rem; margin: 3px 0 0; line-height: 1.5; }

.trade-modal { position: fixed; inset: 0; z-index: 200; background: rgba(15,18,28,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }.trade-modal[hidden] { display: none; }
.trade-modal-card { position: relative; background: #fff; border-radius: 18px; max-width: 420px; width: 100%; padding: 30px 26px 26px; text-align: center; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.tm-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 1.6rem; line-height: 1; color: var(--grey); cursor: pointer; }
.tm-icon { font-size: 2.2rem; }
.trade-modal-card h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; margin: 8px 0 8px; color: var(--ink); }
.trade-modal-card p { color: var(--ink-2); font-size: .95rem; line-height: 1.5; margin: 0 0 14px; }
.tm-list { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; margin: 0 0 22px; }
.tm-list li { background: var(--lilac-bg); color: var(--purple); font-size: .82rem; font-weight: 600; padding: 6px 12px; border-radius: 999px; }
.tm-actions { display: grid; gap: 10px; }

@media (max-width: 900px) {
  .sell-hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .sell-media-col { position: static; order: -1; }
  /* Stacked single column: there is no neighbour to match, and height:100%
     of an auto row would collapse the photo to nothing. Put a real ratio
     back on both photos here. */
  .sell-media, .howto-media { height: auto; aspect-ratio: 16/10; }
  /* Phones get their own wider crop so the image doesn't become a tall block
     above the form. File: assets/sell-hero-mobile.webp 1200x750.
     If the file is missing the purple gradient shows instead — no broken box. */
  .sell-media { background-image: url(/cardealers/assets/sell-hero-mobile.webp), linear-gradient(135deg,#6530A6,#351957); }
  .sell-badges { grid-template-columns: repeat(3, 1fr); }
  .howto-grid { grid-template-columns: 1fr; gap: 24px; }
  /* The white card is FIRST in the markup on desktop (card left, photo
     right). On phones we want the photo on top, same as the hero. */
  .howto-media { order: -1; }
}
@media (max-width: 700px) {
  .tf-row-3 { grid-template-columns: 1fr 1fr; }
  /* Popups go near full-screen on phones */
  .sell-modal { padding: 0; }
  .sell-modal-card { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
  .sell-modal-head { padding: 18px 18px 14px; }
  .sell-modal-body { padding: 18px 18px 26px; }
}
@media (max-width: 560px) {
  .tf-row, .tf-row-3 { grid-template-columns: 1fr; gap: 0; }
  .tf-actions { grid-template-columns: 1fr; }
  .sell-badges { grid-template-columns: 1fr; }
  .sell-sub { max-width: 100%; }
}

/* ===== Sold Vehicles page ===== */
.sold-results { padding-top: 8px; }
.sold-intro { max-width: 760px; margin: 0 auto 30px; text-align: center; color: var(--ink-2); font-size: 1.02rem; line-height: 1.6; }
.sold-headrow { margin: 8px 0 20px; }
.sold-headrow h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--ink); }
.sold-count { color: var(--grey); font-weight: 500; font-size: 1.05rem; }

/* Same 4-per-row gallery as inventory (full width, no sidebar) */
.sold-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (max-width: 1199px) { .sold-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 899px)  { .sold-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .sold-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

/* Sold cars are slightly dimmed so the "Sold" badge reads clearly */
.sold-grid .car-card-link { position: relative; }
.sold-grid .car-card-img img { filter: saturate(.92) brightness(.99); }

/* "Sold: dd.mm.yy" line replacing the compare button */
.car-sold-date {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; background: var(--purple-grad);
  font-weight: 700; font-size: .9rem; color: #111;
  letter-spacing: .01em;
}

/* Mobile compacting to match inventory cards */
@media (max-width: 767px) {
  .sold-grid .car-card-img { margin: 5px 5px 0; }
  .sold-grid .car-card-body { padding: 9px 9px 7px; }
  .sold-grid .car-title { font-size: .74rem; line-height: 1.25; }
  .sold-grid .car-variant, .sold-grid .car-meta { font-size: .68rem; }
  .sold-grid .car-card-body .car-price { font-size: 1rem; }
  .sold-grid .car-weekly { font-size: .6rem; }
  .sold-grid .car-sold-date { padding: 8px; font-size: .78rem; }
}

/* Empty state */
.sold-empty { text-align: center; max-width: 460px; margin: 20px auto 10px; padding: 40px 20px; }
.sold-empty-icon { font-size: 2.6rem; }
.sold-empty h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin: 10px 0 8px; color: var(--ink); }
.sold-empty p { color: var(--ink-2); line-height: 1.6; margin: 0 0 22px; }

/* ============================================================
   LEGAL PAGES (Terms, Privacy)
   Plain readable document column — no cards, no decoration.
   ============================================================ */
.legal-doc {
  max-width: 780px; margin: 0 auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 52px);
}
.legal-doc h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.18rem; color: var(--ink);
  margin: 34px 0 12px; padding-top: 4px;
}
.legal-doc h2:first-child { margin-top: 0; }
.legal-doc p { color: var(--grey); line-height: 1.72; margin: 0 0 14px; font-size: .96rem; }
.legal-doc ul { margin: 0 0 16px; padding-left: 20px; }
.legal-doc li { color: var(--grey); line-height: 1.7; margin-bottom: 8px; font-size: .96rem; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--purple-deep); }
.legal-contact { list-style: none; padding-left: 0; }

/* Loud notice at the top of Terms / Privacy so nobody mistakes the sample
   wording for the dealer's real legal document. */
/* Sits directly above .legal-notice and shares its shape so the two read
   as one block. Purple rather than amber: this box is information, the one
   below it is a warning, and two amber boxes in a row would flatten the
   difference. */
.legal-real {
  background: var(--lilac-bg); border: 1px solid var(--lilac-soft);
  border-left: 4px solid var(--purple);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 14px;
}
.legal-real strong { display: block; color: var(--purple); font-size: .95rem; margin-bottom: 6px; }
.legal-real p { color: var(--ink-2) !important; font-size: .89rem !important; margin: 0 0 8px !important; line-height: 1.6; }
.legal-real ul { margin: 0; padding-left: 20px; }
.legal-real li { color: var(--ink-2); font-size: .89rem; line-height: 1.7; }
.legal-real a { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.legal-notice {
  display: flex; gap: 14px; align-items: flex-start;
  background: #FFF8E6; border: 1px solid #F0D48A; border-left: 4px solid #E0A82E;
  border-radius: var(--radius-sm); padding: 16px 18px; margin-bottom: 30px;
}
.legal-notice svg { width: 22px; height: 22px; flex: 0 0 22px; color: #B87500; margin-top: 1px; }
.legal-notice strong { display: block; color: #6B4600; font-size: .95rem; margin-bottom: 4px; }
.legal-notice p { color: #7A5510 !important; font-size: .89rem !important; margin: 0 !important; line-height: 1.6; }
.legal-contact li { margin-bottom: 6px; }

/* ============================================================
   AD BAND (under Special Offers)
   FOUR ads cross-fading on a 32s loop = 8s each. CSS only, no JS.
   Separate artwork for phones, swapped by the media query below.
   Files:  assets/ad-band-1.webp         2400 x 216  (desktop, ratio 100:9)
           assets/ad-band-2.webp         2400 x 216
           assets/ad-band-3.webp         2400 x 216
           assets/ad-band-4.webp         2400 x 216
           assets/ad-band-1-mobile.webp  1200 x 300  (phones,  ratio 4:1)
           assets/ad-band-2-mobile.webp  1200 x 300
           assets/ad-band-3-mobile.webp  1200 x 300
           assets/ad-band-4-mobile.webp  1200 x 300
   Thin leaderboard: exactly the width of the Special Offers grid above it.
   Keep the RIGHT THIRD of each image clear — the button covers it.
   ============================================================ */
.ad-band {
  position: relative; display: block; overflow: hidden;
  margin-top: 24px; border-radius: var(--radius);
  /* Same width as the card row above: 4 cards capped at 300px + 3 gaps of 16px.
     On narrower screens the cards shrink to fill, and so does this (max-width
     stops applying). If you change the 300px cap or the 16px gap on
     .section .car-grid, change them here too. */
  width: 100%;
  max-width: calc(300px * 4 + 16px * 3);   /* = 1248px */
  margin-left: auto; margin-right: auto;
  aspect-ratio: 1600 / 144;
  background: linear-gradient(135deg, #6530A6, #351957);   /* fallback */
  box-shadow: 0 6px 18px rgba(15,20,32,.08);
  text-decoration: none;
  transition: box-shadow .18s ease, transform .18s ease;
}
.ad-band:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15,20,32,.14); }
.ad-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: ad-cycle 32s infinite;
}
.ad-1 { background-image: url(/cardealers/assets/ad-band-1.webp); animation-delay:  0s; }
.ad-2 { background-image: url(/cardealers/assets/ad-band-2.webp); animation-delay:  -8s; }
.ad-3 { background-image: url(/cardealers/assets/ad-band-3.webp); animation-delay: -16s; }
.ad-4 { background-image: url(/cardealers/assets/ad-band-4.webp); animation-delay: -24s; }
@keyframes ad-cycle {
  /* 32s loop = 8s per ad across FOUR images, ~1.3s cross-fade between them.
     Each slide is visible for its own quarter, then hidden for the other three. */
  0%, 21%  { opacity: 1; }
  25%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}
.ad-btn {
  position: absolute; right: clamp(16px, 2.4vw, 40px); top: 50%; transform: translateY(-50%);
  background: #fff; color: var(--ink);
  font-family: var(--font-display); font-weight: 600; font-size: .95rem;
  padding: 9px 26px; border-radius: 9px;
  box-shadow: 0 6px 18px rgba(15,20,32,.18);
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.ad-band:hover .ad-btn { background: var(--lilac-bg); color: var(--purple-deep); }
@media (max-width: 767px) {
  /* Phone: its own 4:1 image, so nothing gets cropped. No min-height —
     a fixed ratio is what keeps the artwork intact at every phone width. */
  .ad-band { aspect-ratio: 4 / 1; margin-top: 18px; }
  .ad-1 { background-image: url(/cardealers/assets/ad-band-1-mobile.webp); }
  .ad-2 { background-image: url(/cardealers/assets/ad-band-2-mobile.webp); }
  .ad-3 { background-image: url(/cardealers/assets/ad-band-3-mobile.webp); }
  .ad-4 { background-image: url(/cardealers/assets/ad-band-4-mobile.webp); }
  .ad-btn { padding: 8px 16px; font-size: .82rem; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  /* No flashing for users who asked the OS to reduce motion — show ad 1 only */
  .ad-slide { animation: none; opacity: 0; }
  .ad-1 { opacity: 1; }
}

/* ------------------------------------------------------------
   WIDE BAND — same band, but full .wrap width (max 1600px on
   screen) instead of the 1248px card width. Used on Finance and
   Team via render_wide_band() in partials.php.
   TWO ads on a 16s loop = 8s each (reuses @keyframes promo-cycle).
   Files:  assets/wide-band-1.webp         2400 x 216  (desktop, ratio 100:9)
           assets/wide-band-2.webp         2400 x 216
           assets/wide-band-1-mobile.webp  1200 x 300  (phones,  ratio 4:1)
           assets/wide-band-2-mobile.webp  1200 x 300
   Keep the RIGHT THIRD clear — the Free Trial button sits there.
   ------------------------------------------------------------ */
.ad-band-wide { max-width: none; margin-top: 0; }
/* Its own tight wrapper instead of .section — the band only needs the
   surrounding sections' padding, not another 54px of its own on top of the
   24px .ad-band margin. */
.wide-band-sec { padding: 0; }
/* Two slides here, not four, so it needs its own timing. The two-class
   selector is what lets it beat the .ad-slide rule above.
   CAREFUL: `animation` is a shorthand, so it also resets animation-delay to 0.
   The delays below must therefore ALSO be two-class selectors — a plain
   `.wb-2 { animation-delay: -8s }` loses to this rule and both slides end up
   in sync, which makes wide-band-1 invisible under wide-band-2. */
.ad-band-wide .ad-slide { animation: promo-cycle 16s infinite; }
.wb-1 { background-image: url(/cardealers/assets/wide-band-1.webp); }
.wb-2 { background-image: url(/cardealers/assets/wide-band-2.webp); }
.ad-band-wide .wb-1 { animation-delay:  0s; }
.ad-band-wide .wb-2 { animation-delay: -8s; }

@media (max-width: 767px) {
  .wb-1 { background-image: url(/cardealers/assets/wide-band-1-mobile.webp); }
  .wb-2 { background-image: url(/cardealers/assets/wide-band-2-mobile.webp); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-band-wide .ad-slide { animation: none; opacity: 0; }
  .ad-band-wide .wb-1 { opacity: 1; }
}

/* ------------------------------------------------------------
   TEAM PAGE — reuses the Finance two-column layout (.fin-grid),
   with the calculator swapped for a block of copy.
   Files:  assets/team-hero.webp         1600 x 1200  (desktop, 4:3)
           assets/team-hero-mobile.webp  1600 x  900  (phones, 16:9)
   ------------------------------------------------------------ */
.fin-media-team {
  background-image: url(/cardealers/assets/team-hero.webp),
                    linear-gradient(135deg,#6530A6,#351957);
}
.fin-copy { display: flex; flex-direction: column; justify-content: center; }
.fin-copy h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.25; margin-bottom: 14px; }
.fin-copy p  { color: var(--ink-2); font-size: 1.02rem; line-height: 1.7; margin-bottom: 14px; }
.fin-copy p:last-of-type { margin-bottom: 0; }
.fin-copy .btn { align-self: flex-start; margin-top: 22px; }

@media (max-width: 900px) {
  .fin-media-team {
    background-image: url(/cardealers/assets/team-hero-mobile.webp),
                      linear-gradient(135deg,#6530A6,#351957);
  }
}

/* ============================================================
   PROMO BAND (big banner at the bottom of the home page)
   Same idea as the AD BAND above, just taller: two ads
   cross-fading on a 16s loop = 8s each. CSS only, no JS.
   Files:  assets/cta-band-1.webp         2400 x 420  (desktop, ratio 40:7)
           assets/cta-band-2.webp         2400 x 420
           assets/cta-band-1-mobile.webp  1200 x 800  (phones,  ratio 3:2)
           assets/cta-band-2-mobile.webp  1200 x 800
   Full width of the .wrap (max 1600px on screen), so it is WIDER than the
   ad band. Keep the BOTTOM QUARTER of every image clear — the button sits
   there, centred.
   NOTE: this is a separate class from .cta-band on purpose. about.php still
   uses the plain text .cta-band, so do not merge the two.
   ============================================================ */
.promo-band {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--hero-grad);            /* fallback until the images exist */
  aspect-ratio: 40 / 7;                    /* 1600 x 280 on screen */
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 28px;
  box-shadow: 0 6px 18px rgba(15,20,32,.08);
}
.promo-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  animation: promo-cycle 16s infinite;
}
.promo-1 { background-image: url(/cardealers/assets/cta-band-1.webp); animation-delay:  0s; }
.promo-2 { background-image: url(/cardealers/assets/cta-band-2.webp); animation-delay: -8s; }
@keyframes promo-cycle {
  /* 16s loop = 8s per ad, with a ~0.64s cross-fade between them */
  0%, 46%  { opacity: 1; }
  50%, 96% { opacity: 0; }
  100%     { opacity: 1; }
}
/* Button rides above the images */
.promo-band .btn { position: relative; z-index: 2; }

@media (max-width: 767px) {
  /* Phone: its own 3:2 artwork, so nothing gets cropped */
  .promo-band { aspect-ratio: 3 / 2; padding-bottom: 22px; }
  .promo-1 { background-image: url(/cardealers/assets/cta-band-1-mobile.webp); }
  .promo-2 { background-image: url(/cardealers/assets/cta-band-2-mobile.webp); }
}
@media (prefers-reduced-motion: reduce) {
  .promo-slide { animation: none; opacity: 0; }
  .promo-1 { opacity: 1; }
}

/* ============================================================
   CERTIFIED QUALITY — 20-point inspection checklist
   ONE full-width white card, no side photo. At full .wrap width the
   card is ~1620px, so the 20 items sit in a 4-column grid — exactly
   5 even rows, no ragged last row.
   ============================================================ */
.cq-sec { padding-top: clamp(20px, 2vw, 30px); }
.cq-body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0 0 10px; color: var(--ink); }
.cq-lead { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--ink); margin: 0 0 8px; line-height: 1.35; }
.cq-intro { color: var(--ink-2); font-size: .96rem; line-height: 1.6; margin: 0 0 26px; max-width: 88ch; }

.cq-list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 28px; }
.cq-list li { display: flex; gap: 12px; padding: 14px 0; border-top: 1px solid var(--off); }
/* Top row of a 4-column grid = items 1-4. Each breakpoint below RE-ASSERTS
   the border at the same (0,2,1) specificity before removing it from the new
   top row — a plain `.cq-list li` re-assert is only (0,1,1) and would lose to
   this rule, leaving items in row 2 without their divider. */
.cq-list li:nth-child(-n+4) { border-top: none; }

.cq-ic { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: var(--lilac-bg); color: var(--purple); display: flex; align-items: center; justify-content: center; }
.cq-ic svg { width: 19px; height: 19px; }
.cq-list strong { display: block; color: var(--ink); font-size: .92rem; line-height: 1.3; }
.cq-list p { color: var(--ink-2); font-size: .855rem; margin: 3px 0 0; line-height: 1.45; }
.cq-cta { display: inline-flex; }

/* Wrapper for the shared one-row car carousel (render_car_carousel).
   Used on 7 pages now, so the class is no longer named after one of them. */
.carrow-sec { padding-top: clamp(16px, 1.6vw, 24px); }

@media (max-width: 1320px) {
  .cq-list { grid-template-columns: repeat(3, 1fr); }
  .cq-list li:nth-child(-n+4) { border-top: 1px solid var(--off); }
  .cq-list li:nth-child(-n+3) { border-top: none; }
}
@media (max-width: 1000px) {
  .cq-list { grid-template-columns: repeat(2, 1fr); gap: 0 22px; }
  .cq-list li:nth-child(-n+3) { border-top: 1px solid var(--off); }
  .cq-list li:nth-child(-n+2) { border-top: none; }
}
@media (max-width: 620px) {
  .cq-list { grid-template-columns: 1fr; }
  .cq-list li:nth-child(-n+2) { border-top: 1px solid var(--off); }
  .cq-list li:nth-child(1)    { border-top: none; }
}