/* ============================================================
   Cars on Caledon — Design Fixes (drop-in)
   Load AFTER coc-site.css:
     <link rel="stylesheet" href="coc-fixes.css?v=20260806a">
   
   Does NOT touch feeds, widgets, or webhooks.
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   FIX 01 — GREEN-ON-BLACK → BLUE ACCENT
   Status dots, pulse rings, and "live" indicators were using
   WhatsApp green on a near-black field. Now uses the site's
   own blue accent (#6E9BFF). WhatsApp green stays ONLY on
   the WhatsApp button itself (brand requirement).
   ──────────────────────────────────────────────────────────── */

/* Hero badge dot */
.hero-badge i{
  background:var(--sk-accent,#6E9BFF)!important;
  box-shadow:none!important;
  animation:none!important;
}

/* Stock source pill — live dot */
.stock-source.live .dot{
  background:var(--sk-accent,#6E9BFF)!important;
  animation:cocBluePulse 2s ease-out infinite!important;
}
@keyframes cocBluePulse{
  0%{box-shadow:0 0 0 0 rgba(110,155,255,.5)}
  70%{box-shadow:0 0 0 7px rgba(110,155,255,0)}
  100%{box-shadow:0 0 0 0 rgba(110,155,255,0)}
}

/* Card "Inspected" badge dot */
.card .ph .vir i{
  background:var(--sk-accent,#6E9BFF)!important;
}

/* Hours pill — open state: blue instead of green */
.coc-status.open{
  background:rgba(110,155,255,.14)!important;
  border-color:rgba(110,155,255,.30)!important;
  color:rgba(160,190,255,.9)!important;
}
.coc-status.open i{
  background:var(--sk-accent,#6E9BFF)!important;
}
.coc-status.open i::after{
  border-color:var(--sk-accent,#6E9BFF)!important;
}

/* TruInspect badge dot */
.coc-trade .ct-badge i{
  background:var(--sk-accent,#6E9BFF)!important;
  animation:none!important;
}
.coc-trade .ct-badge{
  color:rgba(160,190,255,.9)!important;
  background:rgba(110,155,255,.12)!important;
  border-color:rgba(110,155,255,.30)!important;
}

/* TruValue eyebrow dot */
.ti-eyebrow i{
  background:var(--sk-accent,#6E9BFF)!important;
  animation:none!important;
}

/* Trust dots in VD modal */
.vd-trust i[style*="25D366"]{
  background:var(--sk-accent,#6E9BFF)!important;
}

/* Ticker icon — blue not green */
.coc-ticker .tk-ic{
  background:rgba(110,155,255,.14)!important;
  color:var(--sk-accent,#6E9BFF)!important;
}

/* Mobile nav status pill — blue not green */
.nav-status i{
  background:var(--sk-accent,#6E9BFF)!important;
  box-shadow:none!important;
  animation:cocBluePulse 2s ease-out infinite!important;
}
.nav-status{
  color:rgba(160,190,255,.9)!important;
  background:rgba(110,155,255,.08)!important;
  border-color:rgba(110,155,255,.20)!important;
}
@media(max-width:860px){
  .nav-status.closed i{
    background:var(--sk-muted,rgba(232,234,230,.55))!important;
    animation:none!important;
  }
  .nav-status.closed{
    color:var(--sk-muted)!important;
    background:rgba(232,234,230,.06)!important;
    border-color:var(--sk-line,rgba(232,234,230,.14))!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 02 — SPACING: TIGHTER SECTIONS
   110px section padding was excessive. 72px desktop, 48px
   mobile. Internal gaps tightened.
   ──────────────────────────────────────────────────────────── */

section{
  padding-top:72px!important;
  padding-bottom:72px!important;
}
@media(max-width:760px){
  section{
    padding-top:48px!important;
    padding-bottom:48px!important;
  }
}
/* Finance and sell grid gaps */
.fin-grid{gap:40px!important;}
.sell-grid{gap:36px!important;}
@media(max-width:960px){
  .fin-grid{gap:28px!important;}
  .sell-grid{gap:24px!important;}
}
/* Why-us grid */
.why-grid{margin-top:24px!important;gap:14px!important;}
/* Testimonial grid */
.testi-grid{margin-top:24px!important;gap:14px!important;}
/* Body type section */
.cat-section{padding:52px 0 40px!important;}


/* ────────────────────────────────────────────────────────────
   FIX 03 — MOBILE CARD CTA SIMPLIFICATION
   On mobile (≤640px), hide inline WhatsApp + Book buttons.
   The card itself is tappable → detail modal has both actions.
   ──────────────────────────────────────────────────────────── */

@media(max-width:640px){
  .card-body .cta-row{
    display:none!important;
  }
  /* Also tighten card body padding */
  .card-body{
    padding:12px 14px 14px!important;
  }
  /* Specs row — tighter */
  .specs{
    margin:8px 0 10px!important;
    gap:4px!important;
  }
  /* Price row */
  .price-row{
    padding-top:10px!important;
  }
  /* View detail button is the only CTA on mobile */
  .card-body .btn-vd{
    margin-top:10px!important;
    padding:11px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 04 — REMOVE FAKE DATA VISUALS
   Ribbons (Just arrived / Price reduced / Reserved) are
   derived from a price hash — not real status. Hide them.
   The delivered ticker is hardcoded fake deliveries — hide.
   Synthetic TruPrice tags — hide when not DMS-sourced.
   ──────────────────────────────────────────────────────────── */

/* Hide ribbons entirely */
.coc-ribbon{
  display:none!important;
}

/* Hide the delivered ticker */
.coc-ticker{
  display:none!important;
}

/* TruPrice tag: only show "win" (real DMS data),
   hide the synthetic "fair" fallback */
.tp-tag.fair{
  display:none!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 05 — CALL BUTTON: DIRECT DIAL
   The double-tap pattern is non-standard. Make the phone
   number visible and tappable immediately. The .coc-call JS
   still runs but we make the armed state instantaneous.
   ──────────────────────────────────────────────────────────── */

/* Footer + visit section: show number directly */
/* SUPERSEDED by FIX 33 below — the dashed underline was a stand-in for
   "this is tappable" back when the control was bare text. It is a real
   button now, so the underline is redundant. */

/* ────────────────────────────────────────────────────────────
   FIX 33 — "CALL US" DOESN'T LOOK OR READ LIKE A BUTTON

   In the visit card it measured 46x44px, transparent background, zero
   padding, marked only by a dashed underline — a text fragment, not a
   control, sitting among real buttons. Its armed state (the revealed
   number) also came out at 1.03:1 in the full-text contrast sweep.

   Give it the blue tier like every other CTA, and let the armed state
   switch to the green tier — green is the "now dialling" affordance and
   it reads at ~9:1 rather than near-invisible.

   The double-tap-to-arm behaviour is deliberate (it keeps the number out
   of reach of scrapers, same reasoning as the email hardening), so the
   interaction is untouched — only its appearance and legibility.
   ──────────────────────────────────────────────────────────── */

.coc-call.coc-call-text{
  display:inline-flex!important;
  align-items:center!important;justify-content:center!important;gap:8px;
  min-height:44px!important;
  padding:10px 16px!important;
  border-radius:12px!important;
  background:rgba(110,155,255,.22)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
  font-weight:800!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  box-shadow:0 0 0 1px rgba(110,155,255,.10) inset!important;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.coc-call.coc-call-text:hover{
  background:rgba(110,155,255,.32)!important;
  border-color:rgba(110,155,255,.78)!important;
  color:#C8D9FF!important;
}
/* no dashed underline now that it has a real button shape */
.coc-call-text .cc-num{border-bottom:0!important;color:inherit!important;}

/* armed = "tap again to dial": switch to the green tier, legible */
.coc-call-text.armed{
  background:rgba(37,211,102,.22)!important;
  border-color:rgba(37,211,102,.58)!important;
  border-bottom-color:rgba(37,211,102,.58)!important;
}
.coc-call-text.armed .cc-arm{
  color:#4ADE80!important;
  font-weight:800!important;
}

/* Form labels measured 4.48:1 — just under AA, across the trade-in fields. */
.ct-f label,.coc-bk-fields label{color:rgba(255,255,255,.62)!important;}

/* Topbar / mobile bar: arm immediately on first tap via CSS
   (the JS still handles the actual dialing) — shorter timeout */


/* ────────────────────────────────────────────────────────────
   FIX 06 — SEARCH PANEL: COLLAPSIBLE ON MOBILE
   The search panel pushes car content below the fold on
   small screens. Collapse it behind a toggle.
   ──────────────────────────────────────────────────────────── */

@media(max-width:640px){
  .search-panel .sp-row{
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;
    transition:max-height .35s ease, opacity .25s ease, margin-top .35s ease;
  }
  .search-panel.sp-open .sp-row{
    max-height:400px;
    opacity:1;
    margin-top:12px;
  }
  /* The toggle button is injected by coc-fixes.js */
  .sp-toggle{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    width:100%;
    padding:0;
    background:none;
    border:none;
    color:#fff;
    font-family:inherit;
    cursor:pointer;
  }
  .sp-toggle svg{
    transition:transform .3s ease;
  }
  .search-panel.sp-open .sp-toggle svg{
    transform:rotate(180deg);
  }
}
@media(min-width:641px){
  .sp-toggle{display:none!important;}
}


/* ────────────────────────────────────────────────────────────
   FIX 07 — FAB RAIL: KILL AMBIENT ANIMATIONS
   Float, sheen, and breathing loops run continuously.
   Keep entrance only; kill ambient motion.
   ──────────────────────────────────────────────────────────── */

.fab-btn .fab-inner{
  animation:none!important;
}
.fab-btn::after{
  animation:none!important;
  background:none!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 08 — BODY TYPE TILES: RESPONSIVE
   6-column grid wraps awkwardly. Better breakpoints.
   ──────────────────────────────────────────────────────────── */

@media(max-width:640px){
  .cat-grid{
    grid-template-columns:repeat(3,1fr)!important;
    gap:8px!important;
  }
  .cat-tile{
    padding:14px 8px 12px!important;
  }
  .cat-tile svg{
    width:42px!important;
    height:22px!important;
    margin-bottom:6px!important;
  }
  .cat-tile .ct-name{
    font-size:12px!important;
  }
  .cat-tile .ct-count{
    font-size:9px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 09 — STATS STRIP: RESPONSIVE
   4-column → 2×2 on mobile with tighter padding.
   ──────────────────────────────────────────────────────────── */

@media(max-width:640px){
  .stats-row .si{
    padding:14px 10px!important;
  }
  .stats-row .sn{
    font-size:22px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 10 — VISIT CARD: RESPONSIVE
   ──────────────────────────────────────────────────────────── */

@media(max-width:640px){
  .visit-l{
    padding:28px 20px!important;
  }
  .visit-l h2{
    font-size:24px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 11 — FOOTER: TIGHTER ON MOBILE
   ──────────────────────────────────────────────────────────── */

@media(max-width:560px){
  footer .f-grid{
    gap:20px!important;
  }
  .f-about p{
    font-size:12px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 12 — TruAfford LAUNCHER: OUT OF THE MID-SCREEN (mobile)
   The widget host was fixed at bottom:160px on the right, so the
   "What can I afford?" pill floated in the middle of the page.
   Pin it to the bottom-left, just above the sticky Call/WhatsApp
   bar, clear of TruChat's bottom-right FAB.
   ────────────────────────────────────────────────────────────

   UPDATE: the left/right override that used to live here has been removed.
   TruAfford already supports sides natively — tru-afford.js:40 reads
   `data-position` ("right" | "left") and switches at line 172 — and
   tru-loader.js passes it through from its own data-position attribute.
   index.html now sets data-position="left" on the loader tag, so the
   widget puts itself on the left at EVERY breakpoint instead of being
   forced there by !important below 720px only. That was the cause of the
   left-on-mobile / right-on-desktop split: the override was mobile-scoped,
   so desktop fell back to the widget's "right" default.
   Only the bottom offset is still nudged here, to line the pill up with
   the TruChat FAB on the opposite corner. */

@media(max-width:720px){
  #tru-afford-host{
    bottom:80px!important;
  }
}
/* Desktop: tru-loader.js hard-codes data-bottom="92px" for TruAfford while
   the TruChat FAB sits at 24px, so the pair sat at different heights on
   opposite corners. Level them. */
@media(min-width:721px){
  #tru-afford-host{
    bottom:24px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 13 — DETAIL MODAL: STOP SIDEWAYS SCROLL
   The mobile modal is a single grid column (1fr), whose implicit
   min-width:auto let a wide child blow the column — and the whole
   modal — to ~2× the viewport, so the page scrolled sideways and
   every CTA was cut off on the right. minmax(0,1fr) + min-width:0
   lets the column shrink to the shell. The thumbnails keep their
   original 3-column grid (just capped to 8 in coc-vd.js) — the
   single-row experiment caused this blowout and was reverted.
   ──────────────────────────────────────────────────────────── */

@media(max-width:920px){
  .vd-grid{grid-template-columns:minmax(0,1fr)!important;}
  .vd-grid > *{min-width:0!important;max-width:100%!important;}
}

/* MEASURED ROOT CAUSE (Chrome @375px, against the deployed build):
   the abandoned "single-row thumbnail strip" experiment was still live as

     @media(max-width:640px){
       .vd-thumbs{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto!important}
       .vd-thumbs .vd-thumb{flex:0 0 88px!important;...}
     }

   `overflow-x:auto` does NOT clip here: the flex row's min-content
   (8 thumbs x 88px + gaps = 760px) propagates up through .vd-gallery into
   the `1fr` track, so the left column measured 760px min-content inside a
   330px shell. That is what pushed the modal to 771px of scroll width —
   which is the gallery overflow AND why the Reserve/WhatsApp bar appeared
   cut off at the right edge. Deleting that block (already done above the
   line in this file) is the actual fix; verified 771px -> 375px.

   The rules below are hardening so the same shape can't come back: they cap
   the CHAIN that carried the demand, not just the track. */
.vd-gallery,.vd-hero-img,.vd-thumbs,.vd-thumb,.vd-3d,.vd-stage{
  min-width:0!important;
}
/* A2 — 5 columns. Lens enforces a 10-photo minimum before a car can publish,
   and VD_THUMB_CAP in coc-vd.js is now 10 to match, so 5 columns is exactly two
   full rows on every car. 3 columns gave 3+3+2 and 4 gave 4+4+2 — both orphan.
   THE COLUMN COUNT AND THE CAP ARE ONE DECISION: if you change VD_THUMB_CAP,
   change this. minmax(0,1fr) keeps the min-content chain capped, so this cannot
   reintroduce the 771px overflow documented above. */
.vd-thumbs{grid-template-columns:repeat(5,minmax(0,1fr))!important;}
.vd-thumb .im,.vd-hero-img .im{max-width:100%!important;}

/* Deliberately NOT adding `overflow-x:hidden` to .vd-overlay. Verified at
   360/375/768/1280 that the rules above bring scrollWidth back to exactly
   clientWidth on their own. A blanket overflow-x:hidden would have turned this
   same bug from a visible sideways scroll into silently CLIPPED CTAs — the
   sideways scroll is what made it findable. Fix causes, don't hide symptoms. */


/* ────────────────────────────────────────────────────────────
   FIX 15 — FLOATING WIDGETS MUST NOT COVER THE DETAIL MODAL
   TruAfford / TruChat / TruForm launchers sit at z-index ~1M, well
   above the modal (z300), so the "Check Affordability" pill floated
   on top of the open vehicle detail. Hide them while it's open —
   the modal has its own Reserve / WhatsApp / finance actions.
   ──────────────────────────────────────────────────────────── */

body.vd-lock #tru-afford-host,
body.vd-lock #tc-fab,
body.vd-lock [id^="tru-form-"][id$="-host"],
/* The booking sheet (#cocBookBg, coc-book.js) sets body.modal-open rather
   than .vd-lock, so it was missed. It sits at z-index 340 while the widgets
   are at 999990 — measured covering the sticky "Confirm this slot" button,
   i.e. the floating pills were sitting on top of the primary action. */
body.modal-open #tru-afford-host,
body.modal-open #tc-fab{
  display:none!important;
}
/* DELIBERATELY NOT hiding the TruForm host on .modal-open.
   TruForm sets body.modal-open ITSELF when it opens — it is a modal, not
   just a launcher — so including its host here hid TruForm the instant it
   opened. Symptom: the "Get a Free Valuation" / "Book a Viewing" CTAs
   appeared dead while the form was actually opening fine underneath
   (tf.is-open === true, display:flex, host display:none).
   Only .vd-lock keeps the TruForm host hidden, which is correct: the
   vehicle-detail modal is a different modal and carries its own actions. */
/* "+N" badge on the last shown thumb when more photos exist */
.vd-thumb{position:relative;}
.vd-thumb-more{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(7,9,14,.62);
  color:#fff;
  font-weight:700;
  font-size:14px;
  border-radius:inherit;
  pointer-events:none;
}


/* ────────────────────────────────────────────────────────────
   FIX 14 — DETAIL MODAL: CLEAR THE FIXED RESERVE/WHATSAPP BAR
   .vd-mbar is a position:fixed bottom bar (Reserve / WhatsApp)
   shown on mobile, and it's the last child of #vdContent, which
   reserves no space for it — so it overlapped the last actions
   (Share / Apply for finance). Pad the content so nothing hides
   behind the bar.
   ──────────────────────────────────────────────────────────── */

@media(max-width:720px){
  .vd-overlay.open #vdContent{
    padding-bottom:88px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 16 — MOBILE BAR STUCK MID-SCREEN (the reported bug)

   .vd-mbar is position:fixed, but it was rendered INSIDE .vd-shell,
   and .vd-shell carries `transform:translateY(22px) scale(.985)` as
   its entrance state. A transformed ancestor becomes the containing
   block for position:fixed descendants — so the bar stopped being
   viewport-fixed and became absolutely positioned inside a 2456px-tall
   shell. bottom:0 then resolved to the bottom of the CONTENT, i.e.
   ~2357px down: the bar parked mid-screen and scrolled with the page.

   coc-vd.js now portals the bar to <body> so no ancestor can ever
   trap it again (a filter/backdrop-filter/contain added to any wrapper
   later would re-break it). Two consequences handled here:

   1. The bar no longer matches `.vd-overlay.open .vd-mbar`, so its
      layout is restated below.
   2. --vd-* custom properties are declared on .vd-overlay, so a
      portalled bar would inherit nothing. Colours are literal here.

   Belt-and-braces: kill the shell transform on mobile entirely. The
   entrance reads fine as a fade at this size, and it removes the whole
   class of bug rather than just this instance.
   ──────────────────────────────────────────────────────────── */

@media(max-width:720px){
  .vd-shell{transform:none!important;}

  body.vd-lock > .vd-mbar{
    position:fixed!important;left:0;right:0;bottom:0;z-index:320;
    display:grid!important;grid-template-columns:1.2fr 1fr 1fr;gap:8px;
    align-items:center;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(8,14,28,.96);
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-family:'Mulish',system-ui,sans-serif;
  }
  body.vd-lock > .vd-mbar .mb-price b{
    display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.1;
  }
  body.vd-lock > .vd-mbar .mb-price span{
    font-size:10px;color:rgba(255,255,255,.45);font-weight:600;
  }
  body.vd-lock > .vd-mbar a{
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:800;border-radius:11px;padding:12px 8px;
    text-decoration:none;
    /* long labels must shrink, never push the bar wider than the screen */
    min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body.vd-lock > .vd-mbar .mb-reserve{background:linear-gradient(135deg,#6E9BFF,#2E54BE);color:#fff;}
  body.vd-lock > .vd-mbar .mb-wa{background:#25D366;color:#fff;}
}

/* The bar only exists while the modal is open; never show it otherwise. */
body:not(.vd-lock) > .vd-mbar{display:none!important;}


/* ────────────────────────────────────────────────────────────
   FIX 18 — CTA SYSTEM: GLASS TINT, ON THE TruPrice PATTERN

   THE PROBLEM. Saturated fills on a near-black page force a label
   choice where both options are bad, and the site had picked
   differently on the page vs the modal — which is the white/black
   mix that's visible walking from the showroom into a car:

     .btn-blue  (page)   #06080D on #6E9BFF ........ 7.44:1
     .vd-btn-primary     #ffffff on #6E9BFF ........ 2.70:1  FAIL
     .btn-wa    (page)   #06210F on green .......... 9.03:1  (legible, reads heavy)
     .vd-btn-wa/.mb-wa   #ffffff on #25D366 ........ 1.98:1  FAIL (severe)
     .coc-mbar           rgba(255,255,255,.96) ..... a WHITE bar on a black site
     .coc-mbar a         .72 white @ weight 400 .... muted AND thin on saturated fill

   WhatsApp green is the trap: it sits at luminance .479, almost
   exactly halfway, so white (1.98) and black (9.03, but visually
   heavy/muddy) are both poor. There is no good label for a solid
   #25D366 slab on this page.

   THE FIX. Stop fighting the fill — invert it, exactly the way the
   TruPrice tag already does and reads well:

     .tp-tag.win = rgba(34,197,94,.12) fill + #16A34A label = 4.78:1

   Same idea, brighter label so it works at button scale:

     glass green + #4ADE80 ..... 9.05:1
     glass blue  + #A8C3FF ..... 8.78:1

   Both clear AAA, both keep the brand hue as the SIGNAL rather than
   as a wall of colour, and the whole CTA family now shares one rule
   instead of two contradictory ones.

   HIERARCHY. If everything is glass, nothing is primary — and on a
   dealer site the CTA hierarchy IS the conversion path. So the tint
   carries the weight instead of the label colour: the single highest
   intent action per surface gets `.is-lead` (heavier fill, brighter
   border, soft glow); everything else sits one tier down. Prominence
   is preserved without going back to a solid slab.
   ──────────────────────────────────────────────────────────── */

.vd-btn.vd-btn-primary,
.vd-btn.vd-btn-wa,
body.vd-lock > .vd-mbar .mb-reserve,
body.vd-lock > .vd-mbar .mb-wa,
.coc-mbar .mb-wa,
.coc-mbar .mb-stock,
.coc-mbar .mb-call{
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  font-weight:800!important;          /* .coc-mbar labels were rendering at 400 */
  letter-spacing:.01em;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
}

/* ---- BLUE tier: Reserve / Stock / Call ---- */
.vd-btn.vd-btn-primary,
body.vd-lock > .vd-mbar .mb-reserve,
.coc-mbar .mb-stock,
.coc-mbar .mb-call{
  background:rgba(110,155,255,.14)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.38)!important;
  color:#A8C3FF!important;            /* 8.78:1 */
}
.vd-btn.vd-btn-primary:hover,
body.vd-lock > .vd-mbar .mb-reserve:hover,
.coc-mbar .mb-stock:hover,
.coc-mbar .mb-call:hover{
  background:rgba(110,155,255,.24)!important;
  border-color:rgba(110,155,255,.62)!important;
  color:#C8D9FF!important;
}

/* ---- GREEN tier: WhatsApp, everywhere ---- */
.vd-btn.vd-btn-wa,
body.vd-lock > .vd-mbar .mb-wa,
.coc-mbar .mb-wa{
  background:rgba(37,211,102,.14)!important;
  background-image:none!important;
  border:1px solid rgba(37,211,102,.38)!important;
  color:#4ADE80!important;            /* 9.05:1 */
}
.vd-btn.vd-btn-wa:hover,
body.vd-lock > .vd-mbar .mb-wa:hover,
.coc-mbar .mb-wa:hover{
  background:rgba(37,211,102,.24)!important;
  border-color:rgba(37,211,102,.62)!important;
  color:#86EFAC!important;
}

/* ---- LEAD tier: the one action that must still shout ----
   Reserve in the modal, WhatsApp on the site-wide bar. */
.vd-btn.vd-btn-primary,
body.vd-lock > .vd-mbar .mb-reserve{
  background:rgba(110,155,255,.22)!important;
  border-color:rgba(110,155,255,.58)!important;
  box-shadow:0 0 0 1px rgba(110,155,255,.10) inset,
             0 8px 22px -12px rgba(110,155,255,.65)!important;
}
.coc-mbar .mb-wa{
  background:rgba(37,211,102,.22)!important;
  border-color:rgba(37,211,102,.58)!important;
  box-shadow:0 0 0 1px rgba(37,211,102,.10) inset,
             0 8px 22px -12px rgba(37,211,102,.65)!important;
}

/* Call and Stock were left at the .14 base fill while WhatsApp sat at .22,
   so against the near-black bar they read as unfilled/black rather than as
   glass. Match the fill; WhatsApp still leads via its green plus the glow. */
.coc-mbar .mb-call,
.coc-mbar .mb-stock{
  background:rgba(110,155,255,.22)!important;
  border-color:rgba(110,155,255,.58)!important;
}

/* The Call button's glyph inherits currentColor (#A8C3FF), which reads as a
   faint blue smudge at 15px against the tinted fill. White gives the icon
   its own weight while the label keeps the tier colour. */
.coc-mbar .mb-call svg{color:#fff!important;stroke:#fff!important;opacity:.95;}

/* Favourites counter was the last red on the site
   (linear-gradient(145deg,#F0426B,#DC2626)). */
#navFavN,.fav-count,.nav-fav-n{
  background:#6E9BFF!important;
  background-image:none!important;
  color:#06080D!important;
}

/* SVG glyphs inherit currentColor, so they track the label automatically. */


/* ---- Same system on the PAGE buttons ----
   Without this the showroom keeps its solid-blue/black-label slabs
   right next to the new glass bar, which is the inconsistency this
   fix exists to remove. `.btn.btn-x` outranks coc-site.css's
   `.btn-x{color:#06080D!important}` restatement at line ~889.
   .btn-blue / .btn-vd / .btn-grad stay the LEAD tier so the primary
   action in each section still carries the most weight. */
.btn.btn-blue,.btn.btn-vd,.btn.btn-grad,.btn.btn-primary,.sp-go,
.btn.btn-white{
  background:rgba(110,155,255,.22)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  box-shadow:0 0 0 1px rgba(110,155,255,.10) inset,
             0 8px 22px -12px rgba(110,155,255,.65)!important;
  text-shadow:none!important;
}
.btn.btn-blue:hover,.btn.btn-vd:hover,.btn.btn-grad:hover,
.btn.btn-primary:hover,.sp-go:hover,.btn.btn-white:hover{
  background:rgba(110,155,255,.32)!important;
  border-color:rgba(110,155,255,.78)!important;
  color:#C8D9FF!important;
}

.btn.btn-wa{
  background:rgba(37,211,102,.22)!important;
  background-image:none!important;
  border:1px solid rgba(37,211,102,.58)!important;
  color:#4ADE80!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  box-shadow:0 0 0 1px rgba(37,211,102,.10) inset,
             0 8px 22px -12px rgba(37,211,102,.65)!important;
  text-shadow:none!important;
}
.btn.btn-wa:hover{
  background:rgba(37,211,102,.32)!important;
  border-color:rgba(37,211,102,.78)!important;
  color:#86EFAC!important;
}


/* ---- MODAL CHROME + FAB RAIL: same glass, NEUTRAL tint ----
   Close, Tags/Watch, the 360 view tabs, secondary modal actions and
   the floating rail are navigation, not conversion — so they take the
   neutral tier. Same glass language, one step down in emphasis, so
   the blue/green CTAs stay the things your eye lands on. */
.vd-close,
.vd-btn.vd-btn-dark,
.vd-btn.vd-btn-ghost,
.vd-3d-actions button,
.vd-3d-thumb,
.fab-btn{
  background:rgba(232,234,230,.09)!important;
  background-image:none!important;
  border:1px solid rgba(232,234,230,.26)!important;
  color:#E8EAE6!important;
  backdrop-filter:blur(10px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2)!important;
  box-shadow:none!important;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.vd-close:hover,
.vd-btn.vd-btn-dark:hover,
.vd-btn.vd-btn-ghost:hover,
.vd-3d-actions button:hover,
.vd-3d-thumb:hover,
.fab-btn:hover{
  background:rgba(110,155,255,.20)!important;
  border-color:rgba(110,155,255,.55)!important;
  color:#C8D9FF!important;
}
/* the close button's rotate-on-hover is a nice touch — keep it,
   just don't let the old solid-blue hover fill come back */
.vd-close:hover{transform:rotate(90deg) scale(1.06);}

/* Selected states in the modal read as the blue tier, not a solid slab */
.vd-3d-thumb.on,
.vd-3d-actions button.on{
  background:rgba(110,155,255,.22)!important;
  border-color:rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
}

/* Header WhatsApp dot — last solid-green holdout. It's icon-only, and a
   white glyph on #2FDC74 is the same 1.98:1 problem as the text buttons,
   so it gets the green tier too. */
.nav-wa{
  background:rgba(37,211,102,.20)!important;
  background-image:none!important;
  border:1px solid rgba(37,211,102,.55)!important;
  color:#4ADE80!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  box-shadow:0 0 0 1px rgba(37,211,102,.10) inset,
             0 8px 20px -12px rgba(37,211,102,.6)!important;
}
.nav-wa:hover{
  background:rgba(37,211,102,.30)!important;
  border-color:rgba(37,211,102,.75)!important;
  color:#86EFAC!important;
}
/* it had a pulsing green halo tuned for the solid fill */
.nav-wa::after,.nav-wa::before{background:none!important;animation:none!important;}


/* ---- Booking / trade-in wizard: the last solid fills ----
   Selected day, time and condition chips were #fff on the
   #6E9BFF->#2E54BE gradient (2.70:1 at the light end), and .ti-nav
   .next was a solid blue slab. Same blue tier as everything else. */
.vd-slot.on,
.ti-cond.on,.ti-opt.on,.ti-chip.on,
.ti-nav .next{
  background:rgba(110,155,255,.22)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  box-shadow:0 0 0 1px rgba(110,155,255,.10) inset!important;
}
.ti-nav .next{
  box-shadow:0 0 0 1px rgba(110,155,255,.10) inset,
             0 8px 22px -12px rgba(110,155,255,.65)!important;
}
.vd-slot.on:hover,.ti-cond.on:hover,.ti-opt.on:hover,
.ti-chip.on:hover,.ti-nav .next:hover{
  background:rgba(110,155,255,.32)!important;
  border-color:rgba(110,155,255,.78)!important;
  color:#C8D9FF!important;
}
/* the confirm button in the booking sheet is the lead action there */
.vd-booking-confirm{
  background:rgba(110,155,255,.22)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
  box-shadow:0 0 0 1px rgba(110,155,255,.10) inset,
             0 8px 22px -12px rgba(110,155,255,.65)!important;
}
.vd-booking-confirm:hover{
  background:rgba(110,155,255,.32)!important;
  border-color:rgba(110,155,255,.78)!important;
  color:#C8D9FF!important;
}

/* ────────────────────────────────────────────────────────────
   FIX 30 — TRADE-IN FORM EATS THE MOBILE PAGE

   #tradeTool measured 904px tall on a 812px viewport — 1.11 full
   screens of form that every visitor scrolls past, whether or not
   they have a car to trade. On desktop it earns its space (two
   columns, all visible at once); on mobile it is a wall.

   Collapse it behind its own pitch on mobile: the heading and the
   value proposition stay visible, the fields appear on tap. Same
   idea as the search panel (FIX 06), and it keeps every existing
   field, id and handler intact — no rebuild, so coc-tradein.js and
   the booking wiring are untouched.

   Desktop is deliberately unaffected: above 760px the form is
   always open and the toggle is not rendered.
   ──────────────────────────────────────────────────────────── */

@media(max-width:760px){
  .coc-trade .ct-grid,
  .coc-trade .ct-cta,
  .coc-trade .ct-note{
    max-height:0;
    overflow:hidden;
    opacity:0;
    margin-top:0;
    transition:max-height .4s ease,opacity .3s ease,margin-top .4s ease;
  }
  .coc-trade.ct-open .ct-grid,
  .coc-trade.ct-open .ct-cta,
  .coc-trade.ct-open .ct-note{
    max-height:1600px;
    opacity:1;
  }
  .coc-trade.ct-open .ct-grid{margin-top:18px;}

  .ct-toggle{
    display:flex!important;
    align-items:center;justify-content:center;gap:8px;
    width:100%;margin-top:16px;min-height:48px;
    padding:13px 16px;border-radius:14px;
    font-family:inherit;font-size:13.5px;font-weight:800;
    cursor:pointer;
    background:rgba(110,155,255,.22);
    border:1px solid rgba(110,155,255,.58);
    color:#A8C3FF;
    backdrop-filter:blur(10px) saturate(1.25);
    -webkit-backdrop-filter:blur(10px) saturate(1.25);
    box-shadow:0 0 0 1px rgba(110,155,255,.10) inset,
               0 8px 22px -12px rgba(110,155,255,.65);
    transition:background .2s ease,border-color .2s ease;
  }
  .ct-toggle:hover{
    background:rgba(110,155,255,.32);
    border-color:rgba(110,155,255,.78);
    color:#C8D9FF;
  }
  .ct-toggle svg{width:15px;height:15px;transition:transform .3s ease;}
  .coc-trade.ct-open .ct-toggle svg{transform:rotate(180deg);}
  .coc-trade.ct-open .ct-toggle .ct-t-open{display:none;}
  .coc-trade:not(.ct-open) .ct-toggle .ct-t-close{display:none;}
}
@media(min-width:761px){
  .ct-toggle{display:none!important;}
}


/* Trade-in card chips (condition / day / time) — these carry a bare
   `.on` class from coc-tradein.js, so the .ti- and .vd-slot selectors
   above miss them. Same blue tier.
   (Do not write a star-slash sequence in here — it terminates this
   comment early and silently eats the rule below it.) */
.ct-chips .on,
.ct-chips button.on{
  background:rgba(110,155,255,.22)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
}
.ct-chips .on:hover{
  background:rgba(110,155,255,.32)!important;
  border-color:rgba(110,155,255,.78)!important;
  color:#C8D9FF!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 19 — INVISIBLE CLOSE BUTTON ON THE FAVOURITES PANEL

   #favClose inherited color:#111318 — near-black ink left over from
   the light retail build — sitting on the dark panel. Measured 1.01:1,
   i.e. the "×" is genuinely invisible; the only way out of the panel
   was the Esc key or a lucky tap. Found while sweeping contrast, not
   reported, but it's a dead end on a live site so it goes in now.
   ──────────────────────────────────────────────────────────── */

#favClose,
.fav-head button,
.fav-head .fav-close{
  color:#E8EAE6!important;
  background:rgba(232,234,230,.09)!important;
  border:1px solid rgba(232,234,230,.26)!important;
  border-radius:10px!important;
  opacity:1!important;
}
#favClose:hover,
.fav-head button:hover{
  background:rgba(110,155,255,.20)!important;
  border-color:rgba(110,155,255,.55)!important;
  color:#C8D9FF!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 20 — ACTIVE NAV LINK

   The current-section nav pill was a #4A66B8 -> #23419A gradient
   carrying a .72-alpha label: 3.12:1, below AA, and the last thing
   on the site still using a solid gradient fill. Blue tier, same as
   every other selected state.
   ──────────────────────────────────────────────────────────── */

nav a.active,.nav-links a.active,header a.active{
  background:rgba(110,155,255,.22)!important;
  background-image:none!important;
  border:1px solid rgba(110,155,255,.58)!important;
  color:#A8C3FF!important;
  backdrop-filter:blur(10px) saturate(1.25)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.25)!important;
}
nav a.active:hover,.nav-links a.active:hover,header a.active:hover{
  background:rgba(110,155,255,.32)!important;
  border-color:rgba(110,155,255,.78)!important;
  color:#C8D9FF!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 21 — MOBILE RHYTHM: CHIP ROWS AND BUTTON METRICS

   (a) RAGGED CHIP ROWS. Four groups are flex-wrap rows of five,
   so each breaks 3 + 2 at uneven widths and leaves a jagged right
   edge and an orphan row:

     .banks         5 chips, widths 88/122/61/129/80  -> 2 rows
     .ct-chips      (workshop day)   5 chips          -> 2 rows
     .ct-chips      (workshop time)  5 chips          -> 2 rows
     .vd-3d-thumbs  Front/Side/Rear/Interior/Engine   -> 2 rows

   The booking sheet already solves this properly — .vd-slot-grid is
   a real 3-column grid — so match that rather than invent anything.
   Equal columns means both rows share the same left/right edges and
   the orphan sits flush instead of floating.

   (b) BUTTON METRICS. The modal action stack measured 70 / 49 / 49 /
   49 / 45px tall, with text-align flipping between start and center
   and line-height between 21.6px and normal. The 70px one is the
   primary wrapping to two lines. Normalise the metrics so the stack
   reads as one rhythm, and let the long primary wrap as two BALANCED
   centred lines rather than a full line plus an orphan word.
   ──────────────────────────────────────────────────────────── */

@media(max-width:640px){
  /* (a) even grids, matching .vd-slot-grid's 3-column pattern */
  .ct-chips,
  .vd-3d-thumbs{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:7px!important;
    align-items:stretch!important;
  }
  .ct-chips > *,
  .vd-3d-thumbs > *{
    width:auto!important;min-width:0!important;
    display:inline-flex!important;align-items:center;justify-content:center;
    text-align:center;
    padding-left:6px!important;padding-right:6px!important;
  }

  /* Bank names are long ("STANDARD BANK"), so two columns not three —
     three would force mid-word truncation. */
  .banks{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .banks > *{
    width:auto!important;min-width:0!important;
    display:inline-flex!important;align-items:center;justify-content:center;
    text-align:center;
  }
  /* Five chips in two columns leaves a lone chip on row three. Let an odd
     last chip span the full width so the block closes flush instead of
     trailing an orphan. */
  .banks > *:last-child:nth-child(odd){grid-column:1 / -1!important;}

  /* Same treatment for the 3-column rows: a trailing pair centres itself
     under the row above rather than hugging the left edge. */
  .ct-chips > *:nth-last-child(2):nth-child(3n+1){grid-column:1 / span 1;}
}

/* (b) one set of button metrics across the modal stack */
@media(max-width:920px){
  .vd-actions .vd-btn,
  .vd-actions .row2 .vd-btn{
    min-height:48px!important;
    text-align:center!important;
    line-height:1.35!important;
    align-items:center!important;
    justify-content:center!important;
    text-wrap:balance;
  }
  /* both halves of the Test drive / Book LVS row match height */
  .vd-actions .row2{align-items:stretch!important;}
  .vd-actions .row2 .vd-btn{height:100%!important;}
  /* the icon should not be pushed away from a two-line label */
  .vd-actions .vd-btn svg{flex:0 0 auto;align-self:center;}
}


/* ────────────────────────────────────────────────────────────
   FIX 22 — DUPLICATE CTAs ON MOBILE

   Below 920px the sticky bar is always on screen carrying Reserve
   and WhatsApp. The inline .vd-actions stack repeats both, so the
   page shows each of the two highest-intent actions TWICE within a
   couple of hundred pixels:

     [ Reserve this car · refundable deposit ]  <- inline
     [ Test drive ] [ Book LVS ]
     [ WhatsApp — I'm interested ]              <- inline
     [ Apply for finance ]
     [ Share this car ]
     ───────────────────────────────────────
     R599 990   [ Reserve ]  [ WhatsApp ]       <- sticky, always visible

   Two buttons for one action isn't reassurance, it's a decision the
   user has to re-make. Drop the inline pair on mobile and let the
   sticky bar own them; the stack keeps what the bar does NOT offer
   (Test drive, Book LVS, finance, share). Desktop is untouched —
   there is no sticky bar there, so the inline pair is the only path
   and both stay.

   Side effect worth having: "Reserve this car · refundable deposit"
   was the button wrapping to two lines and making the stack ragged.
   It's the one we remove, so the mobile stack is now uniform without
   needing to shrink or truncate any label.
   ──────────────────────────────────────────────────────────── */

@media(max-width:920px){
  .vd-actions > .vd-btn-primary,
  .vd-actions > .vd-btn-wa{
    display:none!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 23 — BOOKING SHEET HEADER OFF-CENTRE

   The panel itself is centred correctly (measured: 20px each side of
   a 375px viewport, offset 0). What reads as "not centre" is the
   header ROW inside it.

   .vd-booking-head is align-items:flex-start, and "Book a workshop
   viewing" wraps to two lines at mobile width. Measured against the
   64px-tall title:

     logo   sits 15px BELOW the title's top edge
     close  centre sits 19px ABOVE the title's centre — it hangs high
            in the corner instead of relating to anything

   So the row has three things on three different baselines. Centre
   them on the row instead.

   Also: the close was a 25x26px tap target. Below the 44px minimum,
   on the control that dismisses a sheet covering the whole screen.
   ──────────────────────────────────────────────────────────── */

.vd-booking-head{
  align-items:center!important;
  gap:12px!important;
}
.vd-booking-head > div:first-child{
  align-items:center!important;
  min-width:0;
}
.vd-booking-head img{flex:0 0 auto;align-self:center!important;}
.vd-booking-head h3{
  text-wrap:balance;
  margin:0!important;
  align-self:center!important;
}
.vd-booking-close{
  flex:0 0 auto;align-self:center!important;
  display:inline-flex!important;align-items:center;justify-content:center;
  width:40px;height:40px;margin:-8px -8px -8px 0;   /* grow the hit area, keep the optical position */
  border-radius:10px;
  line-height:1;
  /* MY BUG: this rule originally set only `color:#E8EAE6`. coc-book.js gives
     its own close button (#cocBkClose) a near-white background:#f0f0f0, so
     near-white ink on it measured ~1.03:1 — an invisible close button on a
     modal that covers the screen. Setting the background here too, rather
     than assuming the widget's default was dark. */
  background:rgba(232,234,230,.10)!important;
  background-image:none!important;
  border:1px solid rgba(232,234,230,.26)!important;
  color:#E8EAE6!important;
  backdrop-filter:blur(10px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(10px) saturate(1.2)!important;
  box-shadow:none!important;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.vd-booking-close:hover{
  background:rgba(110,155,255,.20)!important;
  border-color:rgba(110,155,255,.55)!important;
  color:#C8D9FF!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 31 — CONFIRM BUTTON OUT OF REACH IN THE BOOKING SHEET

   Measured on #cocBookBg (coc-book.js — a SEPARATE modal from
   #vdBookingBg in coc-vd.js, and it needs the same treatment):

     panel height          731px  (max-height caps it to the viewport)
     panel scrollHeight   1002px
     "Confirm this slot"  bottom at y=972, viewport 812

   So the primary action sat 160px below the fold INSIDE a modal that
   itself scrolls — the user has to discover a second scroll context
   to finish booking. Pin it to the bottom of the sheet so it is
   always on screen no matter where the panel is scrolled.
   ──────────────────────────────────────────────────────────── */

.vd-booking-confirm,
#cocBkConfirm,
#vdBookConfirm{
  position:sticky!important;
  bottom:0;
  z-index:3;
  margin-top:14px!important;
}
/* a fade so content scrolling underneath doesn't collide with the button */
.vd-booking-confirm::before,
#cocBkConfirm::before,
#vdBookConfirm::before{
  content:"";
  position:absolute;
  left:-16px;right:-16px;bottom:-16px;top:-18px;
  background:linear-gradient(180deg,transparent,rgba(11,16,32,.92) 42%);
  z-index:-1;
  pointer-events:none;
}
/* the note under the button shouldn't sit on top of the sticky fade */
.vd-booking-note{position:relative;z-index:2;padding-top:4px;}

/* Day chips render as `<div class="day">Fri</div>7 Aug` — the .day is a
   block, but .vd-slot computes to flex-direction:row, so the two sit side
   by side and read as "Fri7 Aug". Stack them. */
.vd-slot{
  flex-direction:column!important;
  justify-content:center!important;
  text-align:center;
  line-height:1.25;
}
.vd-slot .day{
  display:block!important;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Washed-out supporting text in the booking sheets. Found only after
   widening the contrast sweep past a/button/.vd-slot/.chip to plain
   div/span text — worth remembering, since label text is exactly what
   makes a form feel greyed-out and unfinished:
       .vd-slot-label   .40 white -> 3.75:1
       .day             .35 white -> 3.12:1
       .vd-booking-note .35 white -> 3.12:1 */
.vd-slot-label{color:rgba(255,255,255,.66)!important;}
.vd-slot .day{color:rgba(255,255,255,.62)!important;}
.vd-slot.on .day{color:rgba(200,217,255,.85)!important;}
.vd-booking-note{color:rgba(255,255,255,.62)!important;}

/* Safety: the slot-summary pill is populated by coc-book.js. It is NOT
   empty in normal use (it reads e.g. "Fri 7 Aug · 08:30 — 60 min" in
   white at 18.29:1), but if it ever renders before a slot is chosen it
   would show as a styled blank box above Confirm. Hide it when empty. */
#cocBkWhen:empty,.coc-bk-when:empty{display:none!important;}
@media(max-width:420px){
  /* one step down so the title takes two balanced lines rather than
     a long line plus an orphan word */
  .vd-booking-head h3{font-size:18px!important;line-height:1.3!important;}
}


/* ────────────────────────────────────────────────────────────
   FIX 24 — LABEL NOT CENTRED IN FULL-WIDTH BUTTONS

   "Confirm & WhatsApp" measured 48.4px LEFT of its own button's
   centre. The button is display:inline-flex with justify-content
   left at its initial value, and `text-align:center` does nothing
   to a flex container's items — it only centres inline content
   inside a block. So the label sat flush-left in a full-width
   button while the CSS looked correct at a glance.

   This is the trap behind "text-align:center didn't work": any
   button that got flex (for icon + label alignment) silently stops
   honouring text-align. Centre them explicitly, and make the
   full-width ones flex rather than inline-flex so the box actually
   fills its column.
   ──────────────────────────────────────────────────────────── */

.vd-booking-confirm,
.vd-btn,
.btn,
.coc-mbar a,.coc-mbar button,
body.vd-lock > .vd-mbar a,
.ti-nav button,.ti-nav .back,.ti-nav .next,
.vd-3d-actions button,
.ct-cta .ct-book,.sp-go{
  justify-content:center!important;
  align-items:center!important;
}
.vd-booking-confirm{
  display:flex!important;
  width:100%!important;
  text-align:center!important;
  line-height:1.35!important;
  min-height:48px!important;
}


/* ────────────────────────────────────────────────────────────
   FIX 25 — HERO GUTTERS ON MOBILE

   Every .wrap on the site is padded `0 24px` except one:

     .wrap.hero-inner  ->  padding: 56px 0 0     (no side gutters)

   So the hero headline started at x=0 and ran to the screen edge,
   which is the "tight, words cut off" reading. Give it the same
   gutter the rest of the page uses.
   ──────────────────────────────────────────────────────────── */

@media(max-width:760px){
  .hero .wrap,.wrap.hero-inner{
    padding-left:24px!important;
    padding-right:24px!important;
  }
  .hero h1{
    font-size:clamp(26px,7.6vw,32px)!important;
    line-height:1.12!important;
    text-wrap:balance;
    hyphens:none;
  }
  .hero p,.hero .hero-sub{text-wrap:pretty;}
}


/* ────────────────────────────────────────────────────────────
   FIX 26 — TOO MANY WHATSAPP ENTRY POINTS

   WhatsApp appeared in the header, the hero, the sticky bottom bar,
   every card, the modal and the footer. The header dot is the most
   redundant of them — the sticky bar carries WhatsApp on every
   screen and never scrolls away — so it goes.
   ──────────────────────────────────────────────────────────── */

.nav-wa{display:none!important;}


/* ────────────────────────────────────────────────────────────
   FIX 32 — WHITE MOBILE MENU

   #mmenu opens correctly (5 links, dark ink, 15.83:1) — it just
   renders as rgba(255,255,255,.97): a white slab dropped into a
   near-black page. Same leftover-from-the-light-build family as the
   white .coc-mbar and the light .mb-call pill.

   Two structural problems alongside the colour:
     position:static  -> it PUSHES the page down instead of overlaying,
                         so the content jumps when you open the menu
     z-index:auto     -> nothing guarantees it sits above the hero
     links inline-flex -> 5 items wrapped into 106px of cramped rows

   Dark glass, overlaid, one row per link with a real tap target.
   ──────────────────────────────────────────────────────────── */

#mmenu,.m-menu{
  background:rgba(10,14,24,.96)!important;
  border-top:1px solid rgba(232,234,230,.12)!important;
  border-bottom:1px solid rgba(232,234,230,.12)!important;
  backdrop-filter:blur(14px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2)!important;
  position:absolute!important;
  left:0;right:0;
  z-index:120!important;
  box-shadow:0 24px 48px -24px rgba(0,0,0,.8)!important;
  overflow:hidden;
}
#mmenu a,.m-menu a{
  display:flex!important;
  align-items:center;
  width:100%;
  min-height:52px;
  padding:0 24px!important;
  color:#E8EAE6!important;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid rgba(232,234,230,.08);
}
#mmenu a:last-child,.m-menu a:last-child{border-bottom:0;}
#mmenu a:hover,#mmenu a:focus-visible,
.m-menu a:hover,.m-menu a:focus-visible{
  background:rgba(110,155,255,.16)!important;
  color:#C8D9FF!important;
}

/* The obfuscated email link inherited #4A66B8 in the visit card — a dark
   blue on a dark panel, 3.4:1. Same bright blue as the rest of the system. */
.coc-mail{color:#A8C3FF!important;}
.coc-mail:hover{color:#C8D9FF!important;}
footer .coc-mail{color:rgba(232,234,230,.78)!important;}
footer .coc-mail:hover{color:#C8D9FF!important;}


/* ────────────────────────────────────────────────────────────
   FIX 27 — .btn-row CTA PAIRS NOT CENTRED

   .btn-row is flex with justify-content at its initial value and
   buttons of unequal width, so pairs sat left-aligned and ragged:

     Sell:  "Get a Free Valuation" 207px | "WhatsApp ..." 268px
     Visit: "Get Directions"       161px | "Book a Viewing" 155px

   On mobile they stack full-width — even edges, bigger tap targets,
   and consistent with the modal's action stack. Above that they
   centre as a row instead of hugging the left edge.
   ──────────────────────────────────────────────────────────── */

.btn-row{
  justify-content:center!important;
  align-items:stretch!important;
}
@media(max-width:640px){
  .btn-row{
    flex-direction:column!important;
    gap:10px!important;
  }
  .btn-row > .btn,.btn-row > a,.btn-row > button{
    width:100%!important;
    min-height:48px!important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 28 — FLOATING WIDGETS NOT ALIGNED

   Measured: TruAfford pill bottom:80px (78px tall), TruChat FAB
   bottom:96px (52px tall) — so they sat on different baselines on
   opposite sides of the screen. Bottom-align them so the pair reads
   as one row above the sticky bar.
   ──────────────────────────────────────────────────────────── */

@media(max-width:720px){
  #tc-fab{bottom:80px!important;}
  #tru-afford-host{bottom:80px!important;}
}


/* ────────────────────────────────────────────────────────────
   FIX 29 — TruChat IS STILL WEARING ANOTHER DEALER'S RED

   .tc-root declares the widget's whole palette:

     --tc-red: #e30613;  --tc-red-dark: #9b0410;

   That is not a Cars on Caledon colour — it's red brand paint from
   a different dealer build. Re-point the two variables at the COC
   blues and the avatar, user bubbles, primary buttons and rings all
   follow. A few rules hard-code the rgba instead of using the var,
   so those are restated underneath.

   Also: .tc-panel had no max-width/max-height and sized itself from
   the viewport (inset 117/10/110), so on a shorter phone it filled
   the screen. Capped.
   ──────────────────────────────────────────────────────────── */

.tc-root{
  --tc-red:#2E54BE!important;
  --tc-red-dark:#23419A!important;
}
/* hard-coded rgba(227,6,19,...) instances */
.tc-msg.user{
  background:linear-gradient(145deg,rgba(46,84,190,.38),rgba(46,84,190,.20))!important;
  border-color:rgba(110,155,255,.42)!important;
}
.tc-avatar-wrap::after{border-color:rgba(110,155,255,.45)!important;}
.tc-car:hover{
  border-color:rgba(110,155,255,.45)!important;
  box-shadow:0 12px 28px -14px rgba(46,84,190,.5)!important;
}
.tc-shell::before{background:radial-gradient(90% 60% at 50% 0%,rgba(46,84,190,.18),transparent 70%)!important;}
.tc-root .pill{
  background:rgba(110,155,255,.12)!important;
  border-color:rgba(110,155,255,.30)!important;
  color:#A8C3FF!important;
}
.tc-root .pill span,.tc-root .pill *{color:inherit!important;border-color:inherit!important;}

/* The footer badge hard-codes the red on a bare <span>. */
.tc-foot span{
  color:rgba(110,155,255,.85)!important;
  border-color:rgba(110,155,255,.55)!important;
}
/* The FAB becomes a close button pinned bottom-right while the panel is
   open, and it sat on top of the footer strapline. Keep the footer clear
   of it rather than letting the text run underneath. */
.tc-foot{
  padding-right:56px!important;
  text-align:left!important;
  overflow:hidden;
}

/* Red also survives in BOX-SHADOWS, which is what still glowed around the
   avatar and the Send button after the variables were re-pointed. Worth
   noting for the next person: a colour audit that only reads background /
   color / border-color will report "clean" while the widget is visibly
   still red. Shadows and filters carry colour too. */
.tc-shell{
  box-shadow:0 28px 80px -24px rgba(0,0,0,.75),
             0 0 0 1px rgba(110,155,255,.10),
             inset 0 1px 0 rgba(255,255,255,.06)!important;
}
.tc-avatar{box-shadow:0 8px 20px -6px rgba(46,84,190,.65)!important;}
.tc-pri,.tc-composer button,#tcSend{
  box-shadow:0 8px 20px -8px rgba(46,84,190,.75)!important;
}
.tc-composer button:hover,.tc-pri:hover{
  box-shadow:0 10px 24px -8px rgba(46,84,190,.85)!important;
}
.tc-composer input:focus{
  border-color:rgba(110,155,255,.55)!important;
  box-shadow:0 0 0 4px rgba(110,155,255,.14)!important;
}
.tc-grid button.sel{
  border-color:#6E9BFF!important;
  background:rgba(110,155,255,.22)!important;
  box-shadow:0 0 0 1px rgba(110,155,255,.20)!important;
}

/* Panel must never read as full-screen.
   NOTE selector: the widget and coc-site.css both target #tc-panel (an ID).
   A `.tc-panel` class rule matches nothing here, and even if it did it would
   lose to coc-site.css's `#tc-panel{bottom:110px!important}` — two !important
   declarations are settled by specificity, and an ID outranks a class. So
   these must be ID selectors too; being later in the cascade then wins. */
#tc-panel{
  max-width:400px!important;
  max-height:min(620px,78vh)!important;
}
@media(max-width:480px){
  #tc-panel{
    left:10px!important;right:10px!important;width:auto!important;
    max-width:none!important;
    top:auto!important;
    bottom:80px!important;                 /* clears the sticky Call/WhatsApp bar */
    height:min(64vh,520px)!important;      /* leaves the page visible behind it */
    max-height:none!important;
  }
}

/* ---- The white bar itself ---- */
.coc-mbar{
  background:rgba(10,14,24,.92)!important;
  border-top:1px solid rgba(232,234,230,.12)!important;
  backdrop-filter:blur(14px) saturate(1.2)!important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2)!important;
}
/* .mb-call is a <button> carrying a light-build gradient of its own,
   plus a ::before overlay — both must go or the glass shows through them. */
.coc-mbar .mb-call,
.coc-mbar .coc-call{
  background-image:none!important;
}
.coc-mbar .mb-call::before{background:none!important;}
.coc-mbar .mb-call .cc-num,
.coc-mbar .mb-call .cc-arm{color:inherit!important;}


/* ────────────────────────────────────────────────────────────
   FIX 17 — TABLET DEAD ZONE: NO PERSISTENT CTA BETWEEN 721–920px

   Two breakpoints that should have been one:
     ≤920px  .vd-grid collapses to a single column AND .vd-buy
             drops position:sticky  (coc-widgets.css:47,171)
     ≤720px  .vd-mbar appears       (coc-widgets.css:226)

   So on any 721–920px viewport — iPad portrait, most Android
   tablets, a half-width desktop window — the price and every CTA
   (Reserve / WhatsApp / finance) scroll off the top and nothing
   replaces them. The user reads the whole car with no way to act
   without scrolling back. Align the bar to the same 920px the
   layout already collapses at.
   ──────────────────────────────────────────────────────────── */

@media(min-width:721px) and (max-width:920px){
  body.vd-lock > .vd-mbar{
    position:fixed!important;left:0;right:0;bottom:0;z-index:320;
    display:grid!important;grid-template-columns:1.2fr 1fr 1fr;gap:10px;
    align-items:center;
    padding:12px 18px calc(12px + env(safe-area-inset-bottom));
    background:rgba(8,14,28,.96);
    border-top:1px solid rgba(255,255,255,.12);
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    font-family:'Mulish',system-ui,sans-serif;
  }
  body.vd-lock > .vd-mbar .mb-price b{
    display:block;font-size:17px;font-weight:800;color:#fff;line-height:1.1;
  }
  body.vd-lock > .vd-mbar .mb-price span{
    font-size:11px;color:rgba(255,255,255,.45);font-weight:600;
  }
  body.vd-lock > .vd-mbar a{
    display:flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;border-radius:12px;padding:13px 10px;
    text-decoration:none;min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body.vd-lock > .vd-mbar .mb-reserve{background:linear-gradient(135deg,#6E9BFF,#2E54BE);color:#fff;}
  body.vd-lock > .vd-mbar .mb-wa{background:#25D366;color:#fff;}

  /* reserve room so Share / Apply for finance aren't hidden behind it */
  .vd-overlay.open #vdContent{padding-bottom:92px!important;}
}

/* ────────────────────────────────────────────────────────────
   C1 — CONDITION PILL STATES (card)
   Condition is now one of four states rendered by condPill() in index.html.
   These rules live here because this file loads LAST and already pins
   `.card .ph .vir i{background:…!important}` — an inline style would have lost
   to it, so the state colour is carried by a class instead.
   ──────────────────────────────────────────────────────────── */

/* the state text is a short sentence, not a one-word label — uppercase at 10px
   made "Condition report · 2 noted" unreadable and wide enough to wrap */
.card .ph .vir{
  text-transform:none!important;letter-spacing:.01em!important;
  max-width:calc(100% - 20px)!important;
}
.card .ph .vir i.d-rep{background:#23419A!important;}   /* report, something flagged — evidence-backed */
.card .ph .vir i.d-decl{background:#9CA3AF!important;}  /* dealer declaration only — no evidence */
/* nothing on file: no dot, no assertion, dashed edge to read as an open question */
.card .ph .vir.vir-ask{
  border-style:dashed!important;
  color:#6B7280!important;
  background:rgba(255,255,255,.78)!important;
}
.card .ph .vir img{width:12px;height:12px;flex-shrink:0;}

/* ────────────────────────────────────────────────────────────
   C3 — OPTIONAL EXTRAS ON THE CARD
   Three pills, ranked by what a buyer searches for (EXTRA_TIER1 in
   index.html), with "+N more" opening the detail modal. Renders nothing at
   all when the car has no extras — no label, no empty row.
   ──────────────────────────────────────────────────────────── */
.card-body .cx{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 14px;
}
/* COLOURS ARE THE DARK-SKIN ONES, NOT THE LIGHT PAGE TOKENS.
   coc-site.css's identity pass repaints the showroom cards dark, so the
   obvious values (#23419A ink on an 8%-blue wash, straight from the light
   palette) render dark navy on near-black — verified invisible in the browser
   before this was changed. These match the sibling `.specs span`, which is the
   element directly above and the right reference for this surface. */
.card-body .cx-l{
  font-size:9.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(232,234,230,.45);
}
.card-body .cx-p{
  font-size:11px;font-weight:700;
  color:var(--sk-accent,#6E9BFF);
  background:rgba(110,155,255,.10);border:1px solid rgba(110,155,255,.22);
  border-radius:100px;padding:4px 10px;
}
.card-body .cx-more{
  font-size:11px;font-weight:700;color:rgba(232,234,230,.60);background:none;
  border:0;padding:4px 2px;text-decoration:underline;text-underline-offset:2px;
  cursor:pointer;
}

/* "Rather WhatsApp us →" — the subordinate line under Apply for finance.
   Deliberately a text link, not a button: it is the fallback, and giving it
   button weight is how you end up back where we started, with WhatsApp as the
   only CTA anyone notices. */
.vd-overlay .vd-fin-wa{
  display:block;text-align:center;
  margin:-2px 0 2px;padding:6px 4px;
  font-size:12px;font-weight:600;
  color:rgba(255,255,255,.52);
  text-decoration:underline;text-underline-offset:2px;
}
.vd-overlay .vd-fin-wa:hover{color:rgba(255,255,255,.78);}

/* ────────────────────────────────────────────────────────────
   FINANCE STEPS (.fp) — heading/body separation when the heading wraps
   `.fp b` inherited a 24px line-height (1.6, a body leading) and carried
   only margin-bottom:2px. On a heading that fits one line that reads fine;
   the moment it wraps — "Every major bank, one application" at narrow
   widths — there is 24px of space INSIDE the heading and 2px below it, so
   the paragraph reads as a third heading line.
   Tighten the leading (headings want ~1.25, not 1.6) and give the block
   below it more room than the block has inside itself.
   ──────────────────────────────────────────────────────────── */
.fp .t b{
  line-height:1.25!important;
  margin-bottom:7px!important;
}

/* Search panel labels — same defect as .fp above.
   An 11px uppercase micro-label inherited the 1.6 body leading, so its own
   line box carried ~6.6px of internal space against a 4px margin below it.
   The label ended up visually equidistant between the panel title and its
   own field, reading as unattached. Tighten the box, then set the gap
   deliberately so the label belongs to the control under it. */
.search-panel .sp-field label{
  line-height:1.2!important;
  margin-bottom:6px!important;
}

/* ────────────────────────────────────────────────────────────
   FOOTER — clear the floating furniture
   The footer carried padding-bottom:78px, which clears the sticky
   .coc-mbar (65px). It does NOT clear the TruAfford pill, which sits
   88px off the bottom to avoid the WhatsApp FAB and is 78px tall.
   MEASURED at 375px: "Powered by TruDealer" occupied y=684–701 while the
   TruAfford pill occupied y=654–732 — the last line of the footer was
   sitting underneath the pill.
   Raising the padding moves the credit clear rather than hiding a widget
   that is doing its job. See also D6 in the handoff: up to five fixed
   elements compete for the bottom of this viewport, and this is one
   symptom of that, not the whole problem.
   ──────────────────────────────────────────────────────────── */
@media(max-width:900px){
  footer{padding-bottom:172px!important;}
}

/* TruForm open → stand the other floating widgets down.
   TruForm now sets body.tf-open (canonical tru-form.js). Before that hook
   existed the page had no way to know: `is-open` lives inside the widget's
   shadow tree, and the assumption further up this file that TruForm sets
   body.modal-open is WRONG — measured, body carried no class at all while
   the form was open. The TruAfford pill (z 999990) therefore sat on top of
   the form panel (z 999980), covering the vehicle field.
   Hiding rather than re-stacking: while someone is filling in a form, an
   affordability pill and a chat bubble are not competing offers, they are
   obstructions. */
body.tf-open #tru-afford-host,
body.tf-open #tc-fab{
  display:none!important;
}

/* ────────────────────────────────────────────────────────────
   FOOTER ON MOBILE — two columns, not one long stack
   index.html:841 drops .f-grid to a single column at 560px, which made the
   footer 1188px tall at 375px — 1.46 screens of scrolling to get past four
   blocks whose content is ~140px wide. The three link groups pair up
   comfortably; the about block keeps the full width because its paragraph
   needs the measure.
   Contact spans too: it carries the address and the tap-to-call button,
   which are the longest strings in the footer and read badly at 153px.
   ──────────────────────────────────────────────────────────── */
@media(max-width:560px){
  footer .f-grid{
    grid-template-columns:1fr 1fr!important;
    column-gap:18px!important;
  }
  footer .f-grid > .f-about,
  footer .f-grid > div:last-child{
    grid-column:1/-1;
  }
}

/* Footer Contact on mobile — drop what the sticky bar already does.
   .coc-mbar is permanently on screen with Call / WhatsApp / Stock, so the
   footer's "Call us" button is the same action twice in one viewport.
   Hidden below 560px only — on desktop there is no sticky bar and it is the
   only phone number down there.
   The address STAYS: it is the NAP record Google reads for local search, and
   a Kariega dealer's footer without a street address is a real ranking cost.
   Contact still SPANS the full width (set further up). Tried packing it into
   the grid once the call button was gone: with three link groups in two
   columns one is always left alone, and Contact landed by itself in a
   155px cell with 172px of dead space beside it, address wrapping to two
   lines. Full width is the better shape. */
@media(max-width:560px){
  footer .f-grid .coc-call-text{display:none!important;}
}

/* ────────────────────────────────────────────────────────────
   CARD SHARE BUTTON (TruShare)
   Sits beside the heart rather than in the CTA stack: that card already
   carries a badge, condition pill, specs, extras, price, TruPrice pill and
   three buttons — a fourth CTA would be noise, and sharing is a secondary
   action anyway.
   Matched to .fav-btn's geometry and to the dark-skin treatment coc-site.css
   applies to it, so the two read as a pair rather than as two eras of the
   design. Offset by 34px + 8px = the heart's width plus a gap.
   ──────────────────────────────────────────────────────────── */
.card .ph .share-btn{
  position:absolute;top:10px;right:52px;z-index:3;
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;padding:0;
  background:rgba(232,234,230,.08)!important;
  border:1px solid var(--sk-line,rgba(232,234,230,.14))!important;
  color:var(--sk-dim,rgba(232,234,230,.72))!important;
  transition:transform .35s cubic-bezier(.34,1.4,.64,1), color .2s, background .2s;
}
.card .ph .share-btn svg{
  width:15px;height:15px;fill:none;
  stroke:var(--sk-white,#E8EAE6);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
}
.card .ph .share-btn:hover{
  transform:scale(1.12);
  background:rgba(110,155,255,.14)!important;
  border-color:rgba(110,155,255,.32)!important;
}
.card .ph .share-btn:hover svg{stroke:var(--sk-accent,#6E9BFF);}
.card .ph .share-btn:active{transform:scale(.94);}

/* TruShare open → stand the floating widgets down, same rule as body.tf-open.
   The sheet is fixed and centred; an affordability pill on top of it is the
   same obstruction bug, just a different widget. */
body.ts-open #tru-afford-host,
body.ts-open #tc-fab{
  display:none!important;
}

/* ────────────────────────────────────────────────────────────
   FULL-SCREEN PHOTO VIEWER (vdLightbox in coc-vd.js)
   Mounted on <body>, above the vehicle modal. Cars carry 8–23 photos and
   there was previously no way to see one larger than a 130px thumbnail.
   ──────────────────────────────────────────────────────────── */
.vd-lb{
  position:fixed;inset:0;z-index:100000;
  display:flex;align-items:center;justify-content:center;
  background:rgba(4,7,14,.94);
  /* no backdrop blur: this sits over full-bleed photography, and blurring a
     4MP image every frame is what makes mid-range Android stutter — most of
     this audience is on one */
  padding:56px 12px 72px;
  animation:vdLbIn .18s cubic-bezier(.4,0,.2,1);
}
@keyframes vdLbIn{from{opacity:0}to{opacity:1}}
.vd-lb-img{
  max-width:100%;max-height:100%;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 24px 80px -30px rgba(0,0,0,.9);
  /* the photo is the subject — let it take whatever space it needs */
  user-select:none;-webkit-user-drag:none;
}
.vd-lb-x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:44px;height:44px;border-radius:50%;   /* 44px = the accessible tap floor */
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);
  color:#fff;font-size:26px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vd-lb-x:hover{background:rgba(255,255,255,.16);}
.vd-lb-count{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:12px;font-weight:600;letter-spacing:.06em;
  color:rgba(255,255,255,.72);
}
.vd-lb-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);
  color:#fff;font-size:30px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.vd-lb-nav:hover{background:rgba(255,255,255,.15);}
.vd-lb-nav.prev{left:12px;}
.vd-lb-nav.next{right:12px;}
/* Touch gets swipe, so the arrows only cost thumb-space — hide them there
   and give the photo the full width back. */
@media(pointer:coarse){
  .vd-lb-nav{display:none;}
  .vd-lb{padding:56px 0 64px;}
}
/* the hero reads as tappable, because now it is */
.vd-overlay .vd-hero-img{cursor:zoom-in;}

/* ────────────────────────────────────────────────────────────
   ACTIVE FILTER SUMMARY
   A filtered grid used to look identical to an unfiltered one — nothing on
   the page said what was applied or offered a way out, which is how a buyer
   concludes the yard has four cars and leaves. Collapsed to nothing when no
   filter is set, so it costs no space by default.
   ──────────────────────────────────────────────────────────── */
.filter-summary{display:none;}
.filter-summary.on{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 18px;
}
.filter-summary .fs-l{
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(232,234,230,.45);
}
.filter-summary .fs-tok{
  display:inline-flex;align-items:center;gap:7px;
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  color:var(--sk-accent,#6E9BFF);
  background:rgba(110,155,255,.10);
  border:1px solid rgba(110,155,255,.24);
  border-radius:100px;padding:6px 12px;
  transition:background .18s,border-color .18s;
}
.filter-summary .fs-tok:hover{
  background:rgba(110,155,255,.18);border-color:rgba(110,155,255,.42);
}
.filter-summary .fs-tok i{font-style:normal;font-size:14px;line-height:1;opacity:.7;}
.filter-summary .fs-tok:hover i{opacity:1;}
.filter-summary .fs-clear{
  font-size:12px;font-weight:700;font-family:inherit;cursor:pointer;
  background:none;border:0;padding:6px 2px;
  color:rgba(232,234,230,.55);
  text-decoration:underline;text-underline-offset:2px;
}
.filter-summary .fs-clear:hover{color:rgba(232,234,230,.85);}
/* the count sits at the far end so it reads as a result, not a filter */
.filter-summary .fs-n{
  margin-left:auto;
  font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;font-weight:600;letter-spacing:.04em;
  color:rgba(232,234,230,.45);
}
@media(max-width:560px){
  .filter-summary .fs-n{margin-left:0;width:100%;}
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}