/* ==========================================================================
   KATA Camperbox — Shop Archive Stylesheet
   v5.5.3 scaffolding. Built up in Commits 3-10.
   Uses tokens from main.css (canon V1). Shop-scoped additions below.
   ========================================================================== */

/* ─── Shop-scoped tokens (only additions vs main.css) ─────────────────── */
:root {
  --grid-gap:    clamp(1rem, 1.6vw, 1.75rem);
  --sticky-top:  var(--nav-h);
  /* --ff-mono is now defined globally in main.css as var(--ff-body) (v5.8.7). */
}

/* ─── Archive root ────────────────────────────────────────────────────── */
.shop-archive {
  min-height: 60vh;
}

/* CRITICAL: break the .kata-container cage on shop / category archives.
   functions.php hooks into woocommerce_before_main_content to wrap *all*
   WC content in <main class="kata-main woo-main"><div class="kata-container">.
   That .kata-container has max-width: var(--maxw) (~1480px), which clamps
   every .shop-archive section to that width regardless of inner overrides.
   These selectors restore edge-to-edge flow when (and only when) we're on
   the shop archive surfaces. Cart / checkout / my-account keep the cage. */
body.woocommerce-shop .kata-container,
body.post-type-archive-product .kata-container,
body.tax-product_cat .kata-container,
body.tax-product_tag .kata-container {
  max-width: none;
  padding-inline: 0;
}

/* ─── Header logo defensive sizing ────────────────────────────────────────
   WC body classes (.woocommerce-page / .woocommerce-shop) apparently
   interact with some cascade path that lets the native <img width="1689">
   attribute dominate over main.css `.nav__logo-img { height: 44px }`.
   Higher-specificity selector locks the brand size on WC archive pages. */
body.woocommerce-page .nav__logo-img,
body.woocommerce-shop .nav__logo-img,
body.post-type-archive-product .nav__logo-img {
  height: 44px;
  width: auto;
}
@media (max-width: 720px) {
  body.woocommerce-page .nav__logo-img,
  body.woocommerce-shop .nav__logo-img,
  body.post-type-archive-product .nav__logo-img {
    height: 36px;
  }
}

/* ─── WIP gate — "Coming Soon" placeholder (Commits 4-10 scope) ──────── */
.shop-coming-soon {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--nav-h) + 2rem) var(--gutter) 6rem;
  background: var(--c-black);
}
.shop-coming-soon__inner {
  max-width: 640px;
  text-align: center;
}
.shop-coming-soon .eyebrow {
  justify-content: center;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-mute);
  margin-bottom: 1.5rem;
  display: inline-flex;
  gap: 0.5rem;
}
.shop-coming-soon__title {
  font-family: var(--ff-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  line-height: 0.92;
  letter-spacing: -0.015em;
  font-weight: 400;
  margin-bottom: 1.5rem;
  color: var(--c-white);
}
.shop-coming-soon__lede {
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--c-mute);
  margin-bottom: 2.5rem;
  font-weight: 300;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}
.shop-coming-soon__actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.shop-coming-soon__meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--c-mute-2);
  padding-top: 2rem;
  border-top: 1px solid var(--c-line);
}
.shop-coming-soon__meta a {
  color: var(--c-gold);
  transition: opacity 0.2s;
}
.shop-coming-soon__meta a:hover { opacity: 0.75; }

/* ─── Section head (shared) ───────────────────────────────────────────── */
/* main.css declares .section__head with max-width:var(--maxw). On the shop
   archive we want the head to span viewport edges (consistent with the
   grids below it). Higher-specificity selector + explicit max-width:none. */
.shop-archive .section__head,
body.woocommerce-page .section__head,
body.woocommerce-shop .section__head,
body.post-type-archive-product .section__head {
  padding: 7rem var(--gutter) 3.5rem;
  margin: 0 auto;
  max-width: none;
}
.section__title {
  font-family: var(--ff-display);
  font-size: clamp(3rem, 6.5vw, 5.75rem);
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.section__lede {
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.55;
  color: var(--c-mute);
  max-width: 46ch;
  font-weight: 300;
}

/* ─── Eyebrow override (shop uses mono stack for eyebrows) ────────────── */
.shop-archive .eyebrow {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ─── 01 · Categories — full-bleed compact 4-tile (v5.8.1 A2+full-width)
   Body-below-media. 4 equal tiles, full viewport width matching §02 below
   (was caged in v5.8.0). Side gutter only. Bigger tiles at desktop now
   that 4 fit in the wider container. */
.categories {
  background: var(--c-black);
  padding: calc(var(--nav-h, 78px) + 4rem) var(--gutter) 4rem;
}

/* Override the global shop archive max-width:none rule — categories head
   inherits from parent, no extra cage needed. */
body.woocommerce-shop .categories .section__head,
body.post-type-archive-product .categories .section__head,
body.tax-product_cat .categories .section__head {
  max-width: none;
  margin: 0;
  padding: 0 0 1.75rem;
}

/* Single-column header (was --split 2-col). Title sits below eyebrow.
   Sized to match §02 Vehicle Selector title — both H2s now read at the
   same hierarchy as primary section headings. */
.categories .section__head .section__title {
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  font-weight: 400;
  margin: 0.75rem 0 1rem;
}
.categories .section__head .section__title em {
  font-style: italic;
  font-family: var(--ff-display);
  color: var(--c-gold);
}

/* Grid — 4 equal tiles, no bento. */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

/* Tile — body-below-media. Each is a single <a>. */
.cat-tile {
  display: flex;
  flex-direction: column;
  background: var(--c-dark);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  text-decoration: none;
  color: var(--c-white);
  transition:
    border-color 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}
.cat-tile:hover {
  border-color: rgba(254, 197, 62, 0.55);
  transform: translateY(-2px);
}
.cat-tile:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}

/* Media — 1:1 square, image cover or gradient placeholder. */
.cat-tile__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--c-dark-2);
}
.cat-tile__img,
.cat-tile__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.cat-tile:hover .cat-tile__img,
.cat-tile:hover .cat-tile__placeholder { transform: scale(1.04); }

.cat-tile__placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px),
    linear-gradient(140deg, #1e1a15 0%, #0c0a07 100%);
}
.cat-tile[data-slug="vanbox"] .cat-tile__placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(254,197,62,0.06) 0 2px, transparent 2px 14px),
    linear-gradient(140deg, #2a2418 0%, #141109 100%);
}
.cat-tile[data-slug="surfbox"] .cat-tile__placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(140deg, #14202a 0%, #060a0e 100%);
}
.cat-tile[data-slug="camperbox"] .cat-tile__placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(140deg, #221912 0%, #110907 100%);
}
.cat-tile[data-slug="accessories"] .cat-tile__placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(254,197,62,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(140deg, #1f1c14 0%, #0d0c08 100%);
}

/* Icon variant (Accessories) — flat dark with centered SVG. */
.cat-tile--icon .cat-tile__media {
  background: linear-gradient(155deg, var(--c-dark-2) 0%, #0c0c0c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-tile--icon .cat-tile__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--c-line);
  border-radius: 4px;
  color: rgba(255,255,255,0.65);
  transition:
    color 0.28s var(--ease-out),
    border-color 0.28s var(--ease-out),
    transform 0.28s var(--ease-out);
}
.cat-tile--icon .cat-tile__icon svg {
  width: 22px;
  height: 22px;
}
.cat-tile--icon:hover .cat-tile__icon {
  color: var(--c-gold);
  border-color: var(--c-gold);
  transform: rotate(-4deg);
}

/* Badge — only Camperbox. Top-left of media. */
.cat-tile__badge {
  position: absolute;
  top: 0.65rem;
  left: 0.65rem;
  padding: 0.25rem 0.6rem;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--c-gold);
  color: var(--c-black);
  border-radius: 2px;
  z-index: 2;
}

/* Body — sits below media, dark background. */
.cat-tile__body {
  padding: 0.7rem 0.85rem 0.85rem;
  background: var(--c-dark);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cat-tile__count {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}
.cat-tile__title {
  font-family: var(--ff-display);
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: var(--c-white);
  margin: 0;
  transition: color 0.24s var(--ease-out);
}
.cat-tile:hover .cat-tile__title { color: var(--c-gold); }
.cat-tile__tagline {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.55);
  font-weight: 300;
  line-height: 1.4;
  margin: 0;
}

/* Responsive — 4 → 2×2 below 1024px. Intentionally NOT 1-col stacked
   (would re-inflate the section vertically — the goal is compactness). */
@media (max-width: 1023px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .cat-tile__body { padding: 0.6rem 0.7rem 0.7rem; }
  .cat-tile__title { font-size: 1rem; }
  .cat-tile__tagline { font-size: 0.65rem; }
  /* Touch-target floor: tile itself ≥ 44×44 — guaranteed since aspect 1:1
     gives at least 150+px wide on smallest viewport. */
}

@media (prefers-reduced-motion: reduce) {
  .cat-tile,
  .cat-tile__img,
  .cat-tile__placeholder,
  .cat-tile__title,
  .cat-tile--icon .cat-tile__icon { transition: none; }
  .cat-tile:hover { transform: none; }
  .cat-tile:hover .cat-tile__img,
  .cat-tile:hover .cat-tile__placeholder { transform: none; }
}

/* ─── 02 · Vehicle selector (Commit 4) ──────────────────────────────────
   10 cards data-driven from pa_vehicle taxonomy. Grid 5/4/2 cols.
   Inline SVG silhouettes tinted via currentColor. */
.veh-sel {
  position: relative;
  /* Bruno 2026-05-09: bumped top padding 6rem → 9rem after dropping the
     eyebrow above the headline. The headline now needs to breathe against
     the categories grid above. */
  padding: 9rem var(--gutter) 5.5rem;
  background:
    linear-gradient(180deg, var(--c-black) 0%, var(--c-dark-2) 50%, var(--c-black) 100%);
  border-top: 1px solid var(--c-line);
  color: var(--c-white);
}
/* Full-width — no max-width cage. Shop sections breathe to viewport edges
   with only the side gutter for breathing space.
   Explicit max-width:none defends against any cascade carrying a
   var(--maxw) constraint from main.css ancestors. */
.veh-sel__inner { margin: 0 auto; max-width: none; }
.veh-sel__head  { max-width: 780px; margin-bottom: 3rem; }

.veh-sel__title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  line-height: 0.95;
  font-weight: 400;
  margin: 0.75rem 0 1rem;
  letter-spacing: -0.01em;
}
.veh-sel__title em {
  font-style: italic;
  color: var(--c-gold);
  /* Tracking gap so the next character (typically "?") doesn't crash into
     the italic stem. Visual-only — doesn't affect layout flow. */
  margin-right: 0.18em;
}
.veh-sel__lede {
  font-size: clamp(0.98rem, 1.1vw, 1.08rem);
  line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 56ch;
  font-weight: 300;
}

.veh-sel__grid {
  display: grid;
  /* Single row at desktop (10 cards) — was 5×2 in v5.7.x. With .veh-card__fit
     hidden the cards are short enough to fit ~120px width comfortably. */
  grid-template-columns: repeat(10, 1fr);
  gap: 0.6rem;
  margin-bottom: 2rem;
}

.veh-card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.25rem 0.85rem 1rem;
  background: var(--c-dark);
  border: 1px solid var(--c-line);
  color: var(--c-white);
  font: inherit;
  cursor: pointer;
  text-align: center;
  transition:
    border-color 0.24s var(--ease-out),
    background-color 0.24s var(--ease-out),
    transform 0.24s var(--ease-out);
}
.veh-card:hover {
  border-color: var(--c-gold);
  background: var(--c-dark-2);
  transform: translateY(-2px);
}
.veh-card:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
.veh-card.is-active {
  border-color: var(--c-gold);
  background: linear-gradient(155deg, #1f180a 0%, #0d0a04 100%);
}
.veh-card.is-active::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--c-gold);
}

.veh-card__silhouette {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* Per-vehicle visual normalisation (v5.24.18): some traces render visually
     bigger than others because their viewBox aspect leaves them width-bound at
     the same container size. Scale each card via `--silhouette-scale` set on
     the parent .veh-card[data-vehicle=…] below, falling back to 1 for cards
     that match the default visual weight. --silhouette-base also shifts per
     breakpoint (152→125→101) so the per-vehicle ratio holds at every size. */
  --silhouette-base: 152px;
  max-width: calc(var(--silhouette-base) * var(--silhouette-scale, 1));
  height: 68px;
  color: rgba(255,255,255,0.55);
  transition: color 0.3s;
}
.veh-card__silhouette svg {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}
.veh-card:hover .veh-card__silhouette,
.veh-card.is-active .veh-card__silhouette { color: var(--c-gold); }

/* Per-vehicle silhouette scale — first 3 SUV/compact cards render visually
   larger than the vans because of their tighter aspect; trim 15% on those,
   7% on the next three. Last three (h300/multivan/sprinter) stay at default. */
.veh-card[data-vehicle="forester"],
.veh-card[data-vehicle="rav4"],
.veh-card[data-vehicle="delica"]       { --silhouette-scale: 0.85; }
.veh-card[data-vehicle="iload"],
.veh-card[data-vehicle="hiace-h200"],
.veh-card[data-vehicle="transporter"]  { --silhouette-scale: 0.93; }

.veh-card__name {
  font-family: var(--ff-display);
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: 0.01em;
  font-weight: 400;
}
/* Laptop band (1200–1579px CSS, e.g. a 1920px screen at 125–150% scaling):
   cards are narrower than on a full 1920 desktop, so drop the name to 1rem and
   swap long labels (Mercedes-Benz Sprinter → Mercedes Sprinter) for a one-line
   fit. The full name stays in the DOM; ::after shows the short visible text. */
@media (min-width: 1200px) and (max-width: 1579px) {
  .veh-card__name { font-size: 1rem; }
  .veh-card__name[data-short] { font-size: 0; }
  .veh-card__name[data-short]::after {
    content: attr(data-short);
    font-size: 1rem;
    letter-spacing: 0.01em;
  }
}
.veh-card__fit {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  /* Hidden in v5.8.1 per Bruno feedback ("X Fits" subtitle removed for now).
     Markup kept so re-enable is a 1-line CSS revert. */
  display: none;
}

.veh-card__badge {
  position: absolute;
  top: 0.5rem; right: 0.5rem;
  padding: 0.15rem 0.45rem;
  font-family: var(--ff-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--c-gold);
  color: var(--c-black);
  border-radius: 2px;
  white-space: nowrap;
}

.veh-card--preferred { background: var(--c-dark-2); }

.veh-card__icon-other {
  /* v5.24.18: dimension-match .veh-card__silhouette so the "Another Vehicle"
     name lands on the same baseline as the model names across the row. Inner
     SVG centred via grid; size held constant regardless of container scale. */
  width: 100%;
  max-width: 152px;
  height: 68px;
  display: grid; place-items: center;
  color: var(--c-gold);
  transition: color 0.3s, transform 0.3s var(--ease-out);
}
.veh-card__icon-other svg { width: 36px; height: 36px; }
.veh-card--other:hover .veh-card__icon-other { transform: translateY(-2px) scale(1.05); }
.veh-card--other:hover .veh-card__icon-other,
.veh-card--other.is-active .veh-card__icon-other { color: var(--c-gold); }
.veh-card--other .veh-card__fit { color: var(--c-gold); }

.veh-sel__helper {
  display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  flex-wrap: wrap;
}
.veh-sel__helper .btn-link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--c-gold);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: gap 0.24s var(--ease-out), opacity 0.2s;
}
.veh-sel__helper .btn-link:hover { gap: 0.7rem; opacity: 0.85; }

/* Progressive shrink from 10-in-a-row to 2x5 mobile. Tuned around the
   actual card content (silhouette ~110px + name) at each breakpoint.
   v5.24.16: 10→5-col bp lifted to ≤1460 to cover MacBook 1440px (1439 left
   it on the wrong side). Within the 5/4/3-col laptop range silhouettes also
   cap at 125px so 2-row layouts don't waste vertical room; mobile and large
   desktop ranges keep their own sizes (101 / 152). */
@media (max-width: 1460px) {
  .veh-sel__grid { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1023px) {
  .veh-sel__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 780px) {
  .veh-sel__grid { grid-template-columns: repeat(3, 1fr); }
  .veh-sel       { padding: 4.5rem var(--gutter) 4rem; }
}
/* Laptop band: shrink silhouette cap (152→125) while ≥720 keeps the desktop
   spacing/typography. Below 720 the mobile rule below wins by source order.
   Section padding also halves (9rem → 4.5rem top, 5.5rem → 4.5rem bottom)
   so the 5-col 2-row grid doesn't waste vertical room on common laptops. */
@media (min-width: 720px) and (max-width: 1460px) {
  .veh-card__silhouette { --silhouette-base: 125px; }
  .veh-card__icon-other { max-width: 125px; }
  .veh-sel { padding-top: 4.5rem; padding-bottom: 4.5rem; }
}
@media (max-width: 719px) {
  .veh-card__silhouette { --silhouette-base: 101px; height: 52px; }
  .veh-card__icon-other { max-width: 101px; height: 52px; }
  .veh-card__icon-other svg { width: 31px; height: 31px; }
}
@media (max-width: 560px) {
  .veh-sel__grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .veh-card      { padding: 1rem 0.65rem 0.85rem; }
}

/* ─── Vehicle grouping (shop + category only · Bruno 06/2026) ───────────────
   Subtle SUV / Van / People Mover labels above the cards WITHOUT adding height.
   On phones/tablets the clusters collapse via display:contents, so the cards
   flow into the same responsive grid as before and the labels are hidden (zero
   extra height — the section was already tall enough). On laptop/desktop the
   clusters become labelled columns that wrap as a unit, so a label always
   stays attached to its group. Only applies to .veh-sel__grid--grouped (the
   shop selector) — the Home selector keeps the plain .veh-sel__grid. */
@media (min-width: 1461px) {
  /* Single full-width row of labelled clusters (matches the old repeat(10,1fr)
     edge-to-edge layout). Each cluster's flex-grow = its card count
     (--veh-group-weight) and EVERY gap is the same 0.6rem, so the cards end up
     the exact same width as the old 10-col grid and the row spans the whole
     container — we only add the subtle group labels on top, nothing is boxed in. */
  .veh-sel__grid--grouped {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
  }
  .veh-sel__grid--grouped .veh-group {
    display: flex; flex-direction: column; gap: 0.55rem;
    flex: var(--veh-group-weight, 1) 1 0;
    min-width: 0;
  }
  .veh-sel__grid--grouped .veh-group__cards { display: flex; gap: 0.6rem; }
  .veh-sel__grid--grouped .veh-group__cards .veh-card { flex: 1 1 0; min-width: 0; }

  .veh-group__label {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--ff-mono);
    font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 0 2px 0.1rem;
    white-space: nowrap;
  }
  /* Thin trailing rule — editorial but quiet. */
  .veh-group__label::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.09); }
  /* "Another Vehicle" cluster: keep the label box (visibility:hidden) so its
     card top aligns with the labelled clusters in the same row. */
  .veh-group--nolabel .veh-group__label { visibility: hidden; }
  .veh-group--nolabel .veh-group__label::after { display: none; }
  /* Corner tag is a laptop/tablet-only cue — hidden where cluster headers show. */
  .veh-card__group-tag { display: none; }
}
/* Laptop / tablet (561–1460): clusters collapse via display:contents into the
   ORIGINAL responsive grid (repeat 5/4/3 — no width change), and the group name
   rides as a corner tag on the FIRST card of each group. Zero added height
   (the tag is absolutely positioned). Groups wrap across grid rows here, so a
   header-above-the-group can't align — the leading-card tag is the cue. */
@media (min-width: 561px) and (max-width: 1460px) {
  .veh-sel__grid--grouped .veh-group,
  .veh-sel__grid--grouped .veh-group__cards { display: contents; }
  .veh-sel__grid--grouped .veh-group__label { display: none; }
  .veh-card__group-tag {
    display: block;
    position: absolute;
    top: 0.5rem; left: 0.6rem;
    font-family: var(--ff-mono);
    font-size: 8.5px; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--c-gold);
    pointer-events: none;
  }
}

/* Mobile (≤560): stacked labelled bands — clearest where the section already
   scrolls. Each group is a block with its header above a 2-col card grid. */
@media (max-width: 560px) {
  .veh-sel__grid--grouped { display: flex; flex-direction: column; gap: 1.1rem; }
  .veh-sel__grid--grouped .veh-group { display: flex; flex-direction: column; gap: 0.5rem; }
  .veh-sel__grid--grouped .veh-group__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  .veh-sel__grid--grouped .veh-group__label {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--ff-mono);
    font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 2px;
  }
  .veh-sel__grid--grouped .veh-group__label::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); }
  /* Mobile uses band headers, not the corner tag. */
  .veh-card__group-tag { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .veh-card,
  .veh-card__silhouette,
  .veh-card__icon-other,
  .veh-sel__helper .btn-link { transition: none; }
  .veh-card:hover            { transform: none; }
}

/* ─── 03 · Filterbar (Commit 5) ───────────────────────────────────────── */
.shop-anchor { position: absolute; margin-top: -1px; scroll-margin-top: var(--sticky-top); }

/* Sentinel — a 1px marker directly above the sticky bar. When it scrolls
   out of the viewport, IntersectionObserver toggles .is-stuck on .filterbar.
   v5.24.8: overflow-anchor:none on this + filterbar + shop-grid-wrap
   eliminates the scroll-anchoring feedback loop where browser scroll-adjust
   would re-cross the trigger line after each toggle. */
.filterbar-sentinel {
  height: 1px;
  width: 100%;
  pointer-events: none;
  overflow-anchor: none;
}

.filterbar {
  position: sticky;
  top: var(--sticky-top);
  z-index: 50;
  /* v5.8.3: solid dark-2 default (was glass dark). The glass effect kicks
     back in once .is-stuck — it sits over scrolling content then. */
  background: var(--c-dark-2);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  transition: box-shadow 0.25s var(--ease-out), background-color 0.25s var(--ease-out);
  overflow-anchor: none;
}
.filterbar.is-stuck {
  background: rgba(10, 8, 6, 0.96);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.6);
}

.filterbar__inner {
  margin: 0 auto;
  max-width: none;
  padding: 1rem var(--gutter);
  display: grid;
  /* v5.8.3: 1fr auto 1fr keeps the chips column geometrically centred even
     when the breadcrumbs (left) are wider than the sort (right). Was
     `auto 1fr auto` which let the centre column shift right of midline. */
  grid-template-columns: 1fr auto 1fr;
  gap: 1.5rem;
  align-items: center;
}
/* v5.24.8: dropped .filterbar.is-stuck .filterbar__inner padding-shrink
   (was 1rem → 0.65rem) and matching chip padding/font-size shrink. Combined
   they pulled the bar height down by ~10-15px when sticky engaged, triggering
   the browser's scroll-anchoring to re-adjust scrollY, which made the sentinel
   re-cross the IO trigger line → infinite class flip. Visual differentiation
   now lives in background+blur+shadow+crumbs-opacity only (all paint-only,
   no reflow). Outer box stays stable; loop eliminated. */
.filterbar.is-stuck .filterbar__crumbs { opacity: 0.5; }

/* Breadcrumbs ------------------------------------------------------------ */
.filterbar__left { min-width: 0; }
.filterbar__crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
  transition: opacity 0.25s var(--ease-out);
}
.filterbar__crumbs a { color: rgba(255, 255, 255, 0.55); transition: color 0.2s; }
.filterbar__crumbs a:hover { color: var(--c-gold); }
.filterbar__crumbs .current { color: var(--c-white); text-transform: uppercase; }
.filterbar__crumb-vehicle {
  display: inline-flex; align-items: center; gap: 0.5rem;
}

/* Chips ------------------------------------------------------------------ */
.filterbar__chips {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  justify-content: center;
  padding: 0 0.25rem;
  scroll-snap-type: x proximity;
}
.filterbar__chips::-webkit-scrollbar { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--c-white);
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  scroll-snap-align: start;
  transition:
    border-color 0.2s var(--ease-out),
    color 0.2s var(--ease-out),
    background-color 0.2s var(--ease-out),
    transform 0.18s var(--ease-out);
  cursor: pointer;
}
.chip:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
}
.chip:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
}
.chip--active {
  background: var(--c-gold);
  color: var(--c-black);
  border-color: var(--c-gold);
}
.chip--active:hover { color: var(--c-black); }
.chip--active .chip__count { opacity: 0.7; }

.chip__count {
  font-family: var(--ff-mono);
  font-size: 10px;
  opacity: 0.7;
}

.chip--removable {
  background: rgba(254, 197, 62, 0.15);
  color: var(--c-gold);
  border-color: rgba(254, 197, 62, 0.3);
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  cursor: default;
}
.chip--removable:hover { border-color: rgba(254, 197, 62, 0.55); }
.chip__remove {
  margin-left: 0.4rem;
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(254, 197, 62, 0.2);
  color: var(--c-gold);
  font-size: 14px;
  line-height: 1;
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
}
.chip__remove:hover { background: var(--c-gold); color: var(--c-black); }

/* v5.24.8: removed .filterbar.is-stuck .chip padding/font-size shrink — part of
   the same anti-oscillation fix (see .filterbar block above for full context). */

/* Right cluster: sort only (Filters stub button removed in v5.7.6) -------- */
.filterbar__right {
  display: flex; align-items: center; gap: 1rem;
  justify-content: flex-end;
}

.filterbar__sort {
  position: relative;
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.55);
}
.filterbar__sort label { text-transform: uppercase; }
.filterbar__sort select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background: transparent;
  border: none;
  color: var(--c-white);
  font: inherit;
  padding: 0.4rem 1.35rem 0.4rem 0.25rem;
  cursor: pointer;
  outline: none;
}
.filterbar__sort select:focus-visible {
  outline: 1px solid var(--c-gold);
  outline-offset: 2px;
}
.filterbar__sort > svg {
  position: absolute; right: 0.35rem; top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.5);
}
.filterbar__sort select option {
  background: var(--c-dark-2);
  color: var(--c-white);
}
.filterbar__sort-submit {
  margin-left: 0.5rem;
  padding: 0.35rem 0.6rem;
  font-size: 11px;
  background: var(--c-gold);
  color: var(--c-black);
  border: none;
  border-radius: 2px;
  cursor: pointer;
}

@media (max-width: 1100px) {
  .filterbar__inner { grid-template-columns: 1fr; gap: 0.75rem; }
  .filterbar__left  { display: none; }
  .filterbar__chips { justify-content: flex-start; padding: 0; }
  .filterbar__right { justify-content: space-between; }
}

/* Mobile: drop the sort control entirely. .filterbar__right holds only the
   sort form, so hiding the whole grid child collapses its row + gap and
   reclaims vertical space (just hiding .filterbar__sort would leave the
   empty grid row + 0.75rem gap behind). Sort is desktop/tablet only. */
@media (max-width: 720px) {
  .filterbar__right { display: none; }
}

/* Touch-target minimums on smaller viewports — Apple HIG / WCAG 2.5.5
   target size minimum is 44 CSS px on touch surfaces. Chips + remove
   buttons sit just below that on mobile after the .is-stuck compaction,
   so we re-floor them for tap reliability. */
@media (max-width: 800px) {
  .chip {
    min-height: 44px;
  }
  .chip__remove {
    width: 24px;
    height: 24px;
  }
  .filterbar.is-stuck .chip {
    /* Don't let stuck-state shrink below 44px on touch devices either */
    min-height: 44px;
    padding: 0.5rem 0.95rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .filterbar,
  .filterbar__inner,
  .filterbar__crumbs,
  .chip { transition: none; }
}

/* ─── 04 · Grid (Commit 5-6 / v5.8.1 light theme) ─────────────────────────
   Background flipped to white per Bruno feedback — the dark editorial
   weight of §02 + §03 + §05 (chapter cream) gives plenty of contrast,
   and product photography reads better on white. P-card overrides scoped
   under .shop-grid-wrap below preserve the dark theme everywhere else. */
.shop-grid-wrap { background: var(--c-white); padding: 3rem 0 6rem; overflow-anchor: none; }

/* Grid header — count meta. Sits between filterbar and grid, mono caps. */
.shop-grid-header {
  max-width: none;
  padding: 0 var(--gutter);
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.shop-grid-meta {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
}
.shop-grid-meta strong {
  color: var(--c-ink, #1a1a1a);
  font-weight: 500;
}
/* Unknown-vehicle notice — shown when ?vehicle= doesn't match a known van. */
.shop-grid-notice {
  max-width: none;
  margin: 0 auto 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid rgba(254, 197, 62, 0.5);
  background: rgba(254, 197, 62, 0.10);
  border-radius: 8px;
  font-size: 0.92rem;
  color: var(--c-ink, #1a1a1a);
}
.shop-grid-notice a {
  color: var(--c-gold);
  text-decoration: underline;
  margin-left: 0.4rem;
}

/* Load more (Commit 8) */
.shop-grid-loadmore {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  padding: 0 var(--gutter);
}
.shop-grid-loadmore[hidden] { display: none; }

.shop-loadmore-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 1rem 2.25rem;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-ink, #1a1a1a);
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    border-color 0.24s var(--ease-out),
    color 0.24s var(--ease-out),
    background-color 0.24s var(--ease-out),
    gap 0.24s var(--ease-out);
}
.shop-loadmore-btn:hover:not(:disabled) {
  border-color: var(--c-gold);
  color: var(--c-gold);
  gap: 0.85rem;
}
.shop-loadmore-btn:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 3px;
}
.shop-loadmore-btn:disabled {
  cursor: wait;
  opacity: 0.6;
}
.shop-loadmore-btn.is-loading svg {
  animation: kata-spin 0.9s linear infinite;
}

@keyframes kata-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-loadmore-btn,
  .shop-loadmore-btn:hover { transition: none; gap: 0.6rem; }
  .shop-loadmore-btn.is-loading svg { animation: none; }
}

/* AJAX filter state (Commit 7) — fade the grid during the swap so the
   layout shift is less jarring. Pointer events disabled to prevent
   double-clicks landing on stale cards. */
.shop-grid {
  transition: opacity 0.18s var(--ease-out);
}
.shop-grid.is-filtering {
  opacity: 0.35;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .shop-grid { transition: none; }
  .shop-grid.is-filtering { opacity: 0.6; }
}

/* AT-only live region for AJAX result announcements. */
.kata-shop-live {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.shop-grid {
  display: grid;
  /* 4-col on desktop + laptop (Orne/Bruno 06/2026 — was 3-col, 4-col only ≥1450).
     Steps down to 3 on small laptops, 2 on tablets, 1 on phones. */
  grid-template-columns: repeat(4, 1fr);
  gap: var(--grid-gap);
  margin: 0 auto;
  max-width: none;
  padding: 0 var(--gutter);
}

@media (max-width: 1279px) { .shop-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023px) { .shop-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .shop-grid { grid-template-columns: 1fr; } }

/* First batch of cards is above the fold on wide screens — render them
   visible immediately so users don't have to scroll a few pixels to
   trigger the reveal IntersectionObserver. Covers up to 2 rows on the
   4-col layout. Later cards still animate in as the user scrolls. */
.shop-grid .p-card.kata-reveal:nth-of-type(-n+8) {
  opacity: 1;
  transform: none;
}

/* Load-more scroll target: keep the first newly-loaded card clear of the
   sticky nav when shop.js scrolls it into view. */
.shop-grid .p-card { scroll-margin-top: calc(var(--nav-h, 72px) + 1rem); }

/* ─── Product card (Commit 6) ──────────────────────────────────────────
   Full data-driven card: hero image, badge, category, title, excerpt,
   model pills, From-prefixed price, stock state with dot. */
.p-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-dark);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md); /* 8px — unified grid card radius (Bruno 2026-06-02) */
  overflow: hidden;
  transition:
    border-color 0.28s var(--ease-out),
    transform 0.28s var(--ease-out),
    box-shadow 0.28s var(--ease-out);
}
.p-card:hover {
  border-color: rgba(254, 197, 62, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.7);
}

.p-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-dark-2);
}
.p-card__media img,
.p-card__img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease-out);
}
.p-card__placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  transition: transform 0.7s var(--ease-out);
}
.p-card:hover .p-card__img,
.p-card:hover .p-card__placeholder { transform: scale(1.05); }

/* Placeholder gradient variants — cycled by ID to avoid a flat grid when
   image regeneration is incomplete. Paired with editorial cross-hatch. */
.p-card__placeholder--1 { background: repeating-linear-gradient(135deg, rgba(254,197,62,0.05) 0 2px, transparent 2px 14px), linear-gradient(140deg, #2a2418 0%, #141109 100%); }
.p-card__placeholder--2 { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px), linear-gradient(140deg, #1e1a15 0%, #0c0a07 100%); }
.p-card__placeholder--3 { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px), linear-gradient(140deg, #1a1d22 0%, #0a0c0f 100%); }
.p-card__placeholder--4 { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px), linear-gradient(140deg, #141c22 0%, #070c11 100%); }
.p-card__placeholder--5 { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 14px), linear-gradient(140deg, #26201a 0%, #13100c 100%); }
.p-card__placeholder--6 { background: repeating-linear-gradient(135deg, rgba(254,197,62,0.05) 0 2px, transparent 2px 14px), linear-gradient(140deg, #2e2516 0%, #181307 100%); }
.p-card__placeholder--accessory {
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 2px, transparent 2px 14px),
    linear-gradient(140deg, #1a1a1a 0%, #0a0a0a 100%);
}

.p-card__badge {
  position: absolute; top: 0.75rem; left: 0.75rem;
  padding: 0.25rem 0.55rem;
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 2px;
  z-index: 2;
}
.p-card__badge--hot    { background: var(--c-gold);           color: var(--c-black); }
.p-card__badge--sell   { background: rgba(255, 255, 255, 0.95); color: var(--c-black); }
.p-card__badge--soft   {
  background: rgba(255, 255, 255, 0.12);
  color: var(--c-white);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.p-card__badge--accent {
  background: var(--c-black);
  color: var(--c-gold);
  border: 1px solid var(--c-gold);
}

/* Exclusive Design — gold-framed cards prepended when a vehicle filter
   matches a Featured Custom Kit. Architecture: P5 catalog rebuild
   demoted Featured Kits to product_tag `exclusive-design`; AJAX handler
   surfaces them on page 1 only. Visual: 4px gold outline drawn outside
   the card edge so it sits uniformly on both image (.p-card__media) and
   body — outline-offset:0 keeps it flush; previous inset-2px treatment
   read thinner over the dark image area. Soft gold ambient halo + hover
   amplification keeps it premium without shouting. */
/* Exclusive Design — WHITE/GOLD card (Orne 2026-06-01 · mockup Variant A + 8px).
   Replaces the old dark-card + 4px gold outline. The light fill pops against the
   dark regular cards on the white grid; gold border + soft gold shadow + gold
   accents carry the premium "made for your van" signal without shouting. All
   body text flips to dark-on-white — the base .p-card rules are light-on-dark. */
.p-card--exclusive {
  background: var(--c-white);
  border: 1.5px solid var(--c-gold);
  box-shadow: 0 8px 24px -10px rgba(254, 197, 62, 0.45);
}
.p-card--exclusive:hover {
  border-color: var(--c-gold);
  box-shadow: 0 18px 44px -12px rgba(254, 197, 62, 0.55);
}
.p-card--exclusive .p-card__media { background: var(--c-cream); }
.p-card--exclusive .p-card__cat { color: var(--c-gold-dark); }
.p-card--exclusive .p-card__title,
.p-card--exclusive .p-card__price-num { color: var(--c-dark); }
.p-card--exclusive .p-card__title a { color: var(--c-dark); }
.p-card--exclusive:hover .p-card__title a { color: var(--c-gold-dark); }
.p-card--exclusive .p-card__desc { color: rgba(15, 15, 15, 0.66); }
.p-card--exclusive .p-card__price-from { color: rgba(15, 15, 15, 0.5); }
.p-card--exclusive .p-card__cta { color: var(--c-gold-dark); }
.p-card--exclusive .p-card__specs,
.p-card--exclusive .p-card__foot { border-top-color: rgba(15, 15, 15, 0.1); }
.p-card--exclusive .p-card__spec dt { color: rgba(15, 15, 15, 0.5); }
.p-card--exclusive .p-card__spec dd { color: rgba(15, 15, 15, 0.82); }
/* Badge: gold fill, dark text — legible on the white media area. */
.p-card--exclusive .p-card__badge--accent {
  background: var(--c-gold);
  color: var(--c-dark);
  border-color: var(--c-gold);
  font-weight: 600;
  letter-spacing: 0.1em;
}
/* Swatch rings flip dark so they read on the white card. */
.p-card--exclusive .p-card__swatch {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 1px rgba(0,0,0,0.18);
}
.p-card--exclusive:hover .p-card__swatch {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25), 0 0 0 1px var(--c-gold-dark);
}

.p-card__body {
  padding: 1.25rem;
  display: flex; flex-direction: column;
  flex: 1;
}
.p-card__cat {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 0.5rem;
}
.p-card__title {
  font-family: var(--ff-display);
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  line-height: 1;
  font-weight: 400;
  margin: 0 0 0.5rem;
  letter-spacing: -0.005em;
}
.p-card__title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
.p-card:hover .p-card__title a { color: var(--c-gold); }

.p-card__desc {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.62);
  line-height: 1.45;
  margin: 0 0 0.95rem;
  font-weight: 300;
}

/* Spec rows — premium "spec sheet" layout for variation taxonomies. Each
   row has a mono-cap label on the left and the values on the right, so a
   colour swatch / size code / wheelbase code is unambiguous at a glance.
   Empty groups are dropped server-side, no row stubs. */
.p-card__specs {
  /* Specs share their bottom edge with .p-card__foot — the foot's
     border-top is the visible divider between specs and price. No
     border-bottom + no margin-bottom here, otherwise we get a double rule. */
  margin: 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.p-card__spec {
  display: grid;
  grid-template-columns: minmax(78px, auto) 1fr;
  gap: 1rem;
  align-items: center;
  margin: 0;
}
.p-card__spec dt {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
  margin: 0;
}
.p-card__spec dd {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.86);
  line-height: 1.3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.p-card__spec-swatches {
  gap: 0.35rem !important;
}

/* Color swatch — circular chip in a compact group on the right.
   Outer ring is always present so dark swatches (black, dark-grey) stay
   visible against the .p-card dark background. --bordered variants
   (white, light-grey) get a stronger outer ring for legibility. */
.p-card__swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch, transparent);
  display: inline-block;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.22);
  cursor: help;
  transition: transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  flex-shrink: 0;
}
.p-card__swatch--bordered {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 0 0 1px rgba(255, 255, 255, 0.35);
}
.p-card:hover .p-card__swatch {
  transform: scale(1.15);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(254, 197, 62, 0.55);
}
.p-card:hover .p-card__swatch--bordered {
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.18),
    0 0 0 1px var(--c-gold);
}

/* Tablet/mobile: single column above ~430px keeps labels readable; below
   that the dt label stacks on top of dd for cards that compress hard. */
@media (max-width: 460px) {
  .p-card__spec {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}

.p-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--c-line);
}

.p-card__price {
  display: flex; flex-direction: column;
  line-height: 1;
  min-width: 0;
}
.p-card__price-from {
  font-family: var(--ff-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 0.2rem;
}
.p-card__price-num {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  color: var(--c-white);
  line-height: 1;
}
.p-card__price-num .woocommerce-Price-amount { font: inherit; color: inherit; }
.p-card__price-num del {
  opacity: 0.4;
  font-size: 0.75em;
  margin-right: 0.35em;
}
.p-card__price-num ins { text-decoration: none; }
.p-card__price-num .screen-reader-text {
  position: absolute;
  width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.p-card__cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--c-gold);
  text-transform: uppercase;
  flex-shrink: 0;
  transition: gap 0.24s var(--ease-out);
}
.p-card:hover .p-card__cta { gap: 0.7rem; }

.p-card__stock {
  margin-top: 0.75rem;
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.p-card__stock::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.p-card__stock--in  { color: #7ec689; }
.p-card__stock--low { color: #d99a3e; }
.p-card__stock--out { color: rgba(255, 255, 255, 0.4); }
.p-card__stock--out::before { opacity: 0.6; }
.p-card__stock--pre { color: #89b4d9; }

@media (prefers-reduced-motion: reduce) {
  .p-card,
  .p-card__img,
  .p-card__placeholder,
  .p-card__cta,
  .p-card__title a { transition: none; }
  .p-card:hover { transform: none; }
  .p-card:hover .p-card__img,
  .p-card:hover .p-card__placeholder { transform: none; }
}

/* v5.8.2: Card light-theme overrides reverted. Cards stay DARK on the
   white grid background — strong editorial contrast that lets product
   photography read on dark and the section spread on white. The only
   light-theme rules kept are .shop-grid-wrap bg, .shop-grid-meta text,
   and .shop-loadmore-btn text (text on white needs to be dark). */

/* ─── Empty state (Commit 7/8) ────────────────────────────────────────── */
.shop-empty {
  display: block;
  padding: 5rem var(--gutter);
  text-align: center;
}
.shop-empty[hidden] { display: none; }
.shop-empty__inner {
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.shop-empty__icon {
  color: var(--c-gold);
  opacity: 0.85;
  margin-bottom: 1.75rem;
}
.shop-empty__title {
  font-family: var(--ff-display);
  font-size: clamp(1.85rem, 3.5vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  font-weight: 400;
  margin: 0 0 1rem;
}
.shop-empty__lede {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.65);
  font-weight: 300;
  max-width: 46ch;
  margin: 0 0 2rem;
}
.shop-empty__actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}
.shop-empty__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-line);
  text-decoration: none;
  transition: gap 0.24s var(--ease-out), background-color 0.2s, color 0.2s, border-color 0.2s;
}
.shop-empty__btn--primary {
  background: var(--c-gold);
  color: var(--c-black);
  border-color: var(--c-gold);
}
.shop-empty__btn--primary:hover {
  background: #fcd061;
  border-color: #fcd061;
  color: var(--c-black);
  transform: translateY(-1px);
}
.shop-empty__btn--secondary {
  color: var(--c-ink);
  background: transparent;
  border-color: var(--c-ink-line-strong, rgba(26,26,26,0.22));
}
.shop-empty__btn--secondary:hover {
  border-color: var(--c-gold);
  color: var(--c-gold);
  gap: 0.85rem;
}

/* ─── Editorial chapter (Commit 9) ──────────────────────────────────────
   Spans the full row inside .shop-grid (grid-column: 1 / -1). Editorial
   beat that breaks the rectangle rhythm Orne called out. PHP-side the
   loop suppresses it for result sets <4 cards. */
/* v5.8.3: chapter back inside .shop-grid (spans full row via grid-column
   1/-1). Splice logic: at index 8 if reached, otherwise at end of loop —
   chapter ALWAYS renders even with <8 products. Content is the
   compatibility CTA (absorbed §05 compat-nudge in v5.8.2). */
.shop-chapter {
  grid-column: 1 / -1;
  padding: 3rem clamp(1.75rem, 4vw, 3rem);
  background: var(--c-cream, #f1ede3);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-left: 3px solid var(--c-gold);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2.5rem;
  align-items: center;
  isolation: isolate;
}
.shop-chapter__eyebrow {
  font-family: var(--ff-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.55);
  display: flex;
  gap: 0.65rem;
  margin-bottom: 0.5rem;
  grid-column: 1 / -1;
}
.shop-chapter__eyebrow .eyebrow__index { color: var(--c-gold); }
.shop-chapter__title {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 2.8vw, 2.6rem);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.005em;
  color: var(--c-ink, #1a1a1a);
  grid-column: 1;
  margin: 0;
}
.shop-chapter__title em {
  font-style: italic;
  color: var(--c-gold);
}
.shop-chapter__lede {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(0, 0, 0, 0.72);
  font-weight: 300;
  max-width: 48ch;
  margin: 0;
  grid-column: 1;
}
.shop-chapter__actions {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.shop-chapter__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 1.6rem;
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background-color 0.24s var(--ease-out),
    color 0.24s var(--ease-out),
    border-color 0.24s var(--ease-out),
    gap 0.24s var(--ease-out);
}
.shop-chapter__btn--primary {
  background: var(--c-ink, #1a1a1a);
  color: var(--c-white);
  border: 1px solid var(--c-ink, #1a1a1a);
}
.shop-chapter__btn--primary:hover {
  background: var(--c-gold);
  border-color: var(--c-gold);
  color: var(--c-ink, #1a1a1a);
}
.shop-chapter__btn--link {
  color: var(--c-ink, #1a1a1a);
  background: transparent;
  border: 1px solid transparent;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
.shop-chapter__btn--link:hover {
  color: var(--c-gold);
  gap: 0.7rem;
}

@media (max-width: 760px) {
  .shop-chapter {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 2rem 1.5rem;
  }
  .shop-chapter__lede,
  .shop-chapter__actions { grid-column: 1; }
  .shop-chapter__actions { justify-content: flex-start; }
}

/* ─── 05 · Compat nudge — DEPRECATED v5.8.2 (content moved into chapter)
   The .compat-nudge block is no longer rendered by archive-product.php.
   CSS kept on disk as a reference / for potential future reuse — if you
   re-enable the section, all styles below still work. */
.compat-nudge {
  background: var(--c-cream, #f4ede0);
  color: var(--c-ink, #1a1a1a);
}
.compat-nudge__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 5rem var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}
.compat-nudge .eyebrow {
  color: rgba(26, 26, 26, 0.55);
  margin-bottom: 1.25rem;
}
.compat-nudge .eyebrow .eyebrow__index {
  color: #fbb715;
}
.compat-nudge__title {
  font-family: var(--ff-display);
  font-size: clamp(2.25rem, 4.5vw, 4rem);
  line-height: 0.95;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 1.25rem;
  color: var(--c-ink, #1a1a1a);
}
.compat-nudge__title em {
  font-style: italic;
  color: #fbb715;
}
.compat-nudge__lede {
  font-size: 1.05rem;
  line-height: 1.55;
  color: rgba(26, 26, 26, 0.72);
  max-width: 52ch;
  font-weight: 300;
  margin: 0 0 2rem;
}
.compat-nudge__actions {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.compat-nudge__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--ff-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 1.85rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  transition:
    background-color 0.24s var(--ease-out),
    color 0.24s var(--ease-out),
    border-color 0.24s var(--ease-out),
    gap 0.24s var(--ease-out);
}
.compat-nudge__btn--primary {
  background: var(--c-ink, #1a1a1a);
  color: var(--c-cream, #f4ede0);
  border-color: var(--c-ink, #1a1a1a);
}
.compat-nudge__btn--primary:hover {
  background: #fbb715;
  border-color: #fbb715;
  color: var(--c-ink, #1a1a1a);
}
.compat-nudge__btn--link {
  background: transparent;
  color: var(--c-ink, #1a1a1a);
  border-color: rgba(26, 26, 26, 0.25);
  padding: 1rem 1.5rem;
}
.compat-nudge__btn--link:hover {
  border-color: var(--c-ink, #1a1a1a);
  gap: 0.85rem;
}
.compat-nudge__vis {
  position: relative;
  aspect-ratio: 5 / 4;
  background: rgba(26, 26, 26, 0.04);
  overflow: hidden;
  border-radius: 4px;
}
.compat-nudge__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.compat-nudge__placeholder {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(135deg,
      rgba(26, 26, 26, 0.04) 0 2px,
      transparent 2px 14px),
    linear-gradient(140deg, #ece5d4 0%, #d6cfbb 100%);
}
@media (max-width: 820px) {
  .compat-nudge__inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    padding: 4rem var(--gutter);
  }
  .compat-nudge__vis {
    aspect-ratio: 16 / 10;
    order: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compat-nudge__btn,
  .compat-nudge__btn:hover { transition: none; gap: 0.55rem; }
}

/* ─── Taxonomy archive header (Commit rc11) ──────────────────────────────────
   On /category/X/ + /tag/X/ we skip the categories tile + vehicle selector
   hero and surface a brief "you're browsing X" header instead. */
.shop-tax-header {
  background: var(--c-dark-2, #181818);
  padding: 5rem var(--gutter) 3rem;
}
.shop-tax-header__inner {
  max-width: var(--maxw, 1280px);
  margin: 0 auto;
}
.shop-tax-header__title {
  font-family: var(--ff-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  letter-spacing: -0.005em;
  line-height: 0.95;
  color: var(--c-white);
  margin: 0.5rem 0 0;
}
.shop-tax-header__desc {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--c-mute);
  margin: 1rem 0 0;
  max-width: 60ch;
  font-weight: 300;
}

/* Filterbar context message (replaces .filterbar__chips on taxonomy archives) */
.filterbar__context {
  flex: 1;
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.filterbar__context-label {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-mute);
}
.filterbar__context-label strong {
  color: var(--c-white);
  font-weight: 500;
}
.filterbar__context-reset {
  font-family: var(--ff-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-white);
  text-decoration: underline;
  text-decoration-color: var(--c-gold);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}
.filterbar__context-reset:hover { color: var(--c-gold); }

/* ─── Built for your van — exclusive designs (CAMBIOS-27-5 P4) ──────────── */
.bfyv { background: var(--c-cream, #f4ede0); padding: clamp(3.5rem, 7vw, 6rem) 0; scroll-margin-top: calc(var(--nav-h) + 1rem); }
/* Full-bleed gutter to match the product grid (.shop-grid is max-width:none). */
.bfyv__inner { max-width: none; margin: 0; padding: 0 var(--gutter); }
.bfyv__head { max-width: 760px; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); }
.bfyv__title {
  font-family: var(--ff-display); font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.03;
  color: var(--c-dark); margin: .5rem 0 .7rem;
}
.bfyv__lede {
  font-family: var(--ff-body); color: rgba(41,41,41,.72);
  font-size: 1.02rem; line-height: 1.55; max-width: 64ch;
}
/* Carousel (Bruno 06/2026): one horizontal row of equal-height cards with
   scroll-snap + arrow controls. Was a 4/3/2-col grid that grew very tall and
   broke to 2 narrow columns on mobile. The flex row makes all cards the same
   height automatically (align-items:stretch) and shows ONE card per view on
   mobile (swipe), keeping the section short. */
.bfyv__carousel { position: relative; }
.bfyv__track {
  --bfyv-gap: clamp(1.2rem, 2vw, 2rem);
  display: flex;
  gap: var(--bfyv-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Room so the idle + hover-lift card shadows aren't clipped by the scroll
     container (overflow-x:auto also clips the Y axis). Generous top/bottom for
     the 40px hover shadow; horizontal stays ≤ the min --gutter (1.25rem=20px)
     so the negative margin never triggers page-level horizontal scroll. */
  padding: 20px 16px 48px;
  margin: -20px -16px 0;
}
.bfyv__track::-webkit-scrollbar { display: none; }
.bfyv__track:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }
.bfyv-card {
  flex: 0 0 82%;            /* mobile: one card + a peek of the next */
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--c-white); border-radius: 14px; overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(28,28,28,.08);
  transition: transform .3s ease-out, box-shadow .3s ease-out;
}
@media (min-width: 600px)  { .bfyv-card { flex-basis: calc((100% - 1 * var(--bfyv-gap)) / 2); } }
@media (min-width: 1024px) { .bfyv-card { flex-basis: calc((100% - 2 * var(--bfyv-gap)) / 3); } }
@media (min-width: 1280px) { .bfyv-card { flex-basis: calc((100% - 3 * var(--bfyv-gap)) / 4); } }

/* Controls below the track (Bruno 06/2026): prev + progress dots + next,
   centred — mirrors the home testimonials slider. Shown at every breakpoint
   (incl. mobile) and only when there's more than one page; revealed by shop.js. */
.bfyv__controls {
  display: flex; align-items: center; justify-content: center;
  gap: 1.25rem; margin-top: clamp(1.4rem, 3vw, 2.1rem);
}
.bfyv__controls[hidden] { display: none; }
.bfyv__nav {
  width: 44px; height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--c-white); color: var(--c-dark);
  border: 1px solid var(--c-ink-line, rgba(28,28,28,.18));
  border-radius: var(--radius-pill, 100px);
  box-shadow: 0 4px 14px rgba(28,28,28,.10);
  cursor: pointer;
  transition: background .2s ease-out, border-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}
.bfyv__nav:hover { background: var(--c-gold); border-color: var(--c-gold); }
.bfyv__nav:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.bfyv__nav:disabled { opacity: .35; cursor: not-allowed; }
.bfyv__dots { display: flex; align-items: center; gap: .5rem; }
.bfyv__dot {
  width: 8px; height: 8px; padding: 0;
  background: var(--c-ink-line, rgba(28,28,28,.25)); border: 0;
  border-radius: var(--radius-pill, 100px); cursor: pointer;
  transition: background .2s ease-out, transform .2s ease-out;
}
.bfyv__dot:hover { background: var(--c-ink-line-strong, rgba(28,28,28,.5)); }
.bfyv__dot[aria-selected="true"] { background: var(--c-gold); transform: scale(1.4); }
.bfyv__dot:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .bfyv__track { scroll-behavior: auto; } }
.bfyv-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px -10px rgba(28,28,28,.22); }
.bfyv-card { border: 1px solid rgba(254,197,62,.25); }
.bfyv-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #f1ede3; }
.bfyv-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease-out; }
.bfyv-card:hover .bfyv-card__media img { transform: scale(1.05); }
.bfyv-card__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, #2a2a2a, #1c1c1c); }
.bfyv-card__badge {
  position: absolute; top: .7rem; left: .7rem;
  background: var(--c-gold); color: var(--c-dark);
  font-family: var(--ff-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .28rem .55rem; border-radius: 2px;
}
.bfyv-card__body { padding: 1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.bfyv-card__cat {
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--c-gold-dark, #b88a18);
}
.bfyv-card__vehicle { font-family: var(--ff-display); font-weight: 400; font-size: 1.8rem; line-height: 1; color: var(--c-dark); }
.bfyv-card__desc { font-family: var(--ff-body); font-size: .85rem; line-height: 1.45; color: rgba(41,41,41,.72); }
.bfyv-card__specs { font-family: var(--ff-mono); font-size: 11px; color: rgba(41,41,41,.6); letter-spacing: .01em; }
.bfyv-card__fits { font-family: var(--ff-body); font-size: .78rem; line-height: 1.4; color: var(--c-gold-dark, #b88a18); font-weight: 600; }
.bfyv-card__foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; margin-top: auto; padding-top: .6rem;
}
.bfyv-card__price { font-family: var(--ff-display); font-weight: 400; font-size: 1.5rem; color: var(--c-dark); line-height: 1; }
.bfyv-card__price-from { font-family: var(--ff-body); font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: rgba(41,41,41,.55); }
.bfyv-card__cta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--ff-body); font-size: .82rem; font-weight: 600;
  color: var(--c-dark); transition: color .2s ease-out; white-space: nowrap;
}
.bfyv-card:hover .bfyv-card__cta { color: var(--c-gold-dark, #c79a2e); }
@media (prefers-reduced-motion: reduce) { .bfyv-card, .bfyv-card__media img { transition: none; } }
@media (max-width: 600px) {
  .bfyv-card__vehicle { font-size: 1.45rem; }
  .bfyv-card__price { font-size: 1.35rem; }
}