/* ==========================================================================
   ALLESVOORJOUWAUTO.NL — FRONTEND PROTOTYPE V2
   Design system + components. Vanilla CSS, no build step, no framework.

   Brand tokens are carried over from the live Elfmedia/carparts theme
   (app/design/frontend/Elfmedia/carparts/web/css/source/settings.less)
   so this prototype reads as "the same company", not a random reskin.
   Everything else (scale, components, states) is new.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand colors — same values as the live theme's :root in settings.less */
  --brand: #3140cd;            /* donkerblauw — primary */
  --brand-600: #2934a8;        /* hover/active */
  --brand-700: #212a86;        /* pressed */
  --brand-50: #eef0fd;         /* tint background */
  --brand-ink: #ffffff;        /* text on brand */

  --plate: #ffcc00;            /* kentekengeel — vehicle/garage context only */
  --plate-ink: #14161a;        /* text on plate yellow */
  --plate-600: #e6b800;

  --success: #12995a;
  --success-50: #e9f7f0;
  --danger: #c53333;
  --danger-50: #fbebeb;
  --warning: #b45309;
  --warning-50: #fdf1e2;
  --info: #3140cd;

  --ink: #0f1115;              /* primary text */
  --ink-soft: #3f4961;         /* secondary text */
  --muted: #5a6270;            /* tertiary text / placeholders */
  --on-brand-muted: rgba(255,255,255,.72);

  --bg: #ffffff;
  --bg-soft: #f5f6f8;
  --surface: #ffffff;
  --surface-soft: #f7f9fc;
  --surface-sunken: #eef0f4;
  --line: #dfe6f2;
  --line-strong: #cfd8e6;
  --overlay: rgb(15 17 21 / 55%);
  --overlay-brand: rgb(49 64 205 / 45%);

  /* Typography — system stack carries all body copy (perf-first, see
     DESIGN-SYSTEM.md), "Sora" is loaded non-blocking (media="print" swap
     trick, see <head>) and used ONLY for display moments — h1-h4, prices,
     eyebrows, the hero headline — so the brand gets real typographic
     personality without paying webfont cost on body text. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Sora", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.8125rem;   /* 13px */
  --text-base: 0.9375rem; /* 15px */
  --text-md: 1.0625rem;   /* 17px */
  --text-lg: 1.25rem;     /* 20px */
  --text-xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);   /* 24-30px */
  --text-2xl: clamp(1.875rem, 1.5rem + 1.8vw, 2.5rem);/* 30-40px */
  --text-3xl: clamp(2.25rem, 1.7rem + 2.6vw, 3.25rem);/* 36-52px */
  --text-4xl: clamp(2.75rem, 1.7rem + 5.2vw, 5.25rem);/* 44-84px — big hero statements */

  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-normal: 1.55;

  /* Spacing scale (4px base) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15,17,21,.06), 0 1px 1px rgba(15,17,21,.04);
  --shadow-md: 0 6px 16px rgba(15,17,21,.08), 0 2px 6px rgba(15,17,21,.05);
  --shadow-lg: 0 16px 40px rgba(15,17,21,.14), 0 4px 12px rgba(15,17,21,.06);
  --shadow-xl: 0 30px 70px -12px rgba(15,17,21,.22), 0 8px 20px rgba(15,17,21,.08);
  --shadow-brand: 0 10px 24px rgba(49,64,205,.28);
  --shadow-brand-lg: 0 18px 40px -8px rgba(49,64,205,.45);
  --shadow-plate: 0 10px 22px rgba(255,204,0,.35);
  --shadow-focus: 0 0 0 3px rgba(49,64,205,.28);

  /* Gradients — reused across hero, buttons and accent bands so the brand
     palette reads as considered rather than flat single-color fills. */
  --gradient-brand: linear-gradient(135deg, #4553e0 0%, var(--brand) 52%, var(--brand-700) 100%);
  --gradient-plate: linear-gradient(135deg, #ffe066 0%, var(--plate) 55%, var(--plate-600) 100%);
  --gradient-mesh: radial-gradient(60% 90% at 85% -10%, rgba(255,204,0,.16), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(255,255,255,.12), transparent 60%);

  /* Layout */
  --container: 1280px;
  --container-narrow: 920px;
  --gutter: clamp(16px, 4vw, 32px);
  --header-h: 64px;
  --header-h-mobile: 40px;
  --bottom-nav-h: 0px; /* bottom-nav is verwijderd (2026-08-23), var blijft zodat de calc()-plekken die 'm nog gebruiken (body-padding, floating knoppen) geen aparte fix nodig hadden */
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* Motion — short + functional only, see DESIGN-SYSTEM.md */
  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;

  --z-header: 40;
  --z-bottomnav: 45;
  --z-sticky-cta: 44;
  --z-backdrop: 90;
  --z-sheet: 100;
  --z-toast: 120;
}

/* --------------------------------------------------------------------------
   2. RESET + BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
/* overflow-x:hidden lives on <html>, not <body>: an ancestor of the sticky
   header with a non-"visible" overflow turns that ancestor into the header's
   scrolling context instead of the real viewport, which is what made the
   header let go and scroll away partway down the page. html is the actual
   root scrolling element, so clipping horizontal overflow here is safe. */
html{ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-b));
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
@media (min-width: 1024px){ body{ padding-bottom: 0; } }

/* Sticky footer: on short pages main grows to fill the leftover space so
   the footer always sits flush with the viewport bottom instead of
   floating right under a half-empty page. Tall pages are unaffected —
   main just grows past 100vh like normal and the page scrolls. */
main{ flex: 1 0 auto; }

img, picture, svg{ display: block; max-width: 100%; }
h1,h2,h3,h4,p,ul,ol,figure{ margin: 0; }
/* Dutch loves long unbroken compound words ("Nieuwsbriefvoorkeuren",
   "Accountgegevens") - a heading with no space to wrap at can push past
   the viewport edge on mobile without ever showing up as an oversized
   element in devtools (the box itself stays contained, only the painted
   text overflows). Defensive site-wide safety net, not a per-page fix. */
h1,h2,h3{ overflow-wrap: break-word; word-break: break-word; }
ul,ol{ padding: 0; list-style: none; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea{ font: inherit; color: inherit; }
:focus-visible{ outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--radius-sm); }
::selection{ background: var(--brand); color: var(--brand-ink); }

h1{ font-family: var(--font-display); font-size: var(--text-3xl); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.02em; }
.hero-headline{ font-family: var(--font-display); font-size: var(--text-4xl); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }

/* Bold "process" numerals — used by the 01/02/03-style sections */
.step-numeral{ font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--brand-50); -webkit-text-stroke: 1.5px var(--brand); }

/* Stat strip under the hero — one bold confident line, not a card grid */
.stat-strip{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat-strip .container{ display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); padding-block: var(--space-5); }
.stat-item{ display: flex; align-items: baseline; gap: var(--space-2); }
.stat-item strong{ font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; color: var(--brand); }
.stat-item span{ font-size: var(--text-sm); color: var(--ink-soft); font-weight: 600; }
h2{ font-family: var(--font-display); font-size: var(--text-2xl); line-height: var(--lh-tight); font-weight: 800; letter-spacing: -0.01em; }
h3{ font-family: var(--font-display); font-size: var(--text-xl); line-height: var(--lh-snug); font-weight: 700; }
h4{ font-family: var(--font-display); font-size: var(--text-lg); line-height: var(--lh-snug); font-weight: 700; }
.lead{ font-size: var(--text-md); line-height: var(--lh-normal); color: var(--ink-soft); }
.eyebrow{
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-display); font-size: var(--text-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 var(--space-2); position: relative; padding-left: var(--space-4);
}
.eyebrow::before{
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 10px; height: 3px; border-radius: var(--radius-full); background: var(--gradient-plate);
}
.section--brand .eyebrow::before, .hero-dark .eyebrow::before{ background: var(--plate); }
.muted{ color: var(--muted); }
.mono{ font-family: var(--mono); }
.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;
}
.skip-link{
  position: absolute; left: var(--space-3); top: -48px; z-index: var(--z-toast);
  background: var(--ink); color: #fff; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm); transition: top var(--dur-base) var(--ease);
}
.skip-link:focus{ top: var(--space-3); }

/* Scroll-reveal — opt-in via [data-reveal] on section-level elements
   (app.js toggles .is-visible with an IntersectionObserver, one-shot, never
   re-hides on scroll-up so it can't feel janky). Purely a fade + 14px rise;
   short and one-time, in line with DESIGN-SYSTEM.md's "motion is functional,
   never decorative" rule — it confirms content has settled, nothing loops. */
[data-reveal]{ opacity: 0; transform: translateY(14px); transition: opacity 520ms var(--ease), transform 520ms var(--ease); }
[data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ [data-reveal]{ opacity: 1; transform: none; transition: none; } }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */
.container{ width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow{ max-width: var(--container-narrow); }
.stack{ display: flex; flex-direction: column; }
.cluster{ display: flex; flex-wrap: wrap; align-items: center; }
/* Hero CTA rows: stack full-width below ~420px instead of letting a long
   button label force horizontal overflow on the narrowest phones. */
@media (max-width: 420px){ .hero-cta-row{ flex-direction: column; align-items: stretch; } .hero-cta-row > .btn{ width: 100%; } }
.section{ padding-block: var(--space-12); }
.section--tight{ padding-block: var(--space-8); }
/* Subtle dot-grid texture on soft sections — depth without weight; a single
   1px SVG dot repeated, near-invisible until you scroll past it. */
.section--soft{
  background:
    radial-gradient(rgba(15,17,21,.05) 1px, transparent 1px) 0 0/22px 22px,
    var(--surface-soft);
}
.section--brand{
  background: var(--gradient-brand); color: var(--brand-ink);
  position: relative; overflow: hidden;
}
.section--brand::before{
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--gradient-mesh);
}
.section--brand > .container{ position: relative; z-index: 1; }
/* Homepage hero — subtle brand-tinted glow instead of flat white, without
   competing with the kenteken-yellow finder panel for attention. */
.hero-section{ background: radial-gradient(1100px 480px at 15% 0%, var(--brand-50), transparent 60%); }

/* BIG brand-blue hero — full-bleed drama using the actual logo palette
   (brand blue + white + kentekengeel), never dark/black. A huge ghost
   wrench watermark echoes the logo mark; the kenteken plate itself is the
   dramatic hero visual, tilted like a product shot. A diagonal cut at the
   bottom breaks the "rectangle after rectangle" pattern every competitor
   site uses. */
.hero-dark{
  position: relative; overflow: hidden; isolation: isolate;
}
/* Layer 1: the real workshop photo, desaturated + darkened so it reads as
   atmosphere, never competes with foreground text/contrast requirements. */
.hero-dark::after{
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/category/home-hero-background.webp") center 30% / cover no-repeat;
  filter: saturate(.35) brightness(.55);
}
/* Layer 2: brand-blue duotone + mesh glow on top of the photo — keeps the
   hero unmistakably "this brand" instead of a generic stock-photo hero. */
.hero-dark::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gradient-mesh), linear-gradient(155deg, rgb(37 48 163 / 26%) 0%, rgba(20, 26, 110, .96) 55%, rgb(15 17 21 / 15%) 100%);
}
.hero-diagonal{ display: block; width: 100%; height: 48px; margin-top: calc(-1 * var(--space-8) - 1px); position: relative; z-index: 1; }
@media (min-width: 1024px){ .hero-diagonal{ height: 72px; } }
.hero-dark .eyebrow-pill{
  display: inline-flex; align-items: center; gap: 6px; background: var(--gradient-plate); color: var(--plate-ink);
  font-family: var(--font-display); font-weight: 800; font-size: var(--text-xs); letter-spacing: .04em; text-transform: uppercase;
  padding: 7px 14px 7px 12px; border-radius: var(--radius-full); margin-bottom: var(--space-5);
  box-shadow: var(--shadow-plate);
}
.hero-dark .eyebrow-pill svg{ width: 14px; height: 14px; }
.hero-dark h1{ color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero-dark h1 .accent{
  background: linear-gradient(100deg, var(--plate) 0%, #fff08a 50%, var(--plate) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--plate);
}
.hero-dark .lead{ color: rgba(255,255,255,.82); }
.hero-dark .hero-checklist li{ color: #fff; font-weight: 600; }
.hero-dark .hero-checklist svg{ color: var(--plate); }
.hero-dark .finder-panel{ box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255,255,255,.08); }
.hero-dark .hero-grid, .hero-dark [data-vehicle-card]{ position: relative; z-index: 1; }
.hero-dark [data-vehicle-card] .vehicle-card{ box-shadow: 0 20px 50px -15px rgba(8,10,30,.4); }

/* Social-proof micro-row under the hero checklist — same "4.8/5 Google
   Reviews" claim already surfaced on the live site header, just given real
   visual weight here instead of small print. */
.hero-social-proof{ display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-6); }
.hero-social-proof .stars{ color: var(--plate); }
.hero-social-proof .stars svg{ width: 16px; height: 16px; }
.hero-social-proof strong{ font-family: var(--font-display); color: #fff; font-size: var(--text-sm); }
.hero-social-proof span{ color: rgba(255,255,255,.8); font-size: var(--text-xs); }

.section-head{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
.section-head h2{ margin: 0; }
.section-link{ font-weight: 700; color: var(--brand); white-space: nowrap; }
.section-link:hover{ text-decoration: underline; }

.grid{ display: grid; gap: var(--space-6); min-width: 0; }
.grid > *{ min-width: 0; }
.hero-stack{ display: grid; gap: var(--space-8); grid-template-columns: 1fr; min-width: 0; }
.hero-stack > *{ min-width: 0; }
.hero-grid{ grid-template-columns: 1.15fr .85fr; }
@media (max-width: 899px){ .hero-grid{ grid-template-columns: 1fr; } }
/* .grid-2 holds substantial content (cards with forms, full-width buttons) —
   stacks by default and only goes 2-up once there is genuinely room for it. */
.grid-2{ grid-template-columns: 1fr; }
@media (min-width: 480px){ .grid-2{ grid-template-columns: repeat(2, 1fr); } }
/* .grid-3/.grid-4 hold small icon-style cards (categories, brands) that
   stay legible 2-up even on the smallest phones. */
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px){ .grid-4{ grid-template-columns: repeat(2, 1fr); } .grid-3{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px){ .grid-3, .grid-4{ grid-template-columns: 1fr 1fr; gap: var(--space-3); } }

.scroller{
  display: flex; gap: var(--space-3); overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch; padding-bottom: var(--space-2); scrollbar-width: none;
}
.scroller::-webkit-scrollbar{ display: none; }
.scroller > *{ scroll-snap-align: start; flex: 0 0 auto; }

.visually-hide-below-1024{ }
@media (max-width: 1023px){ .hide-mobile{ display: none !important; } }
@media (min-width: 1024px){ .hide-desktop{ display: none !important; } }
@media (min-width: 600px){ .hide-from-tablet{ display: none !important; } }

/* --------------------------------------------------------------------------
   4. BUTTONS
   -------------------------------------------------------------------------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-5);
  border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-base);
  border: 1.5px solid transparent; white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  touch-action: manipulation;
}
.btn:active{ transform: translateY(1px) scale(.99); }
.btn-lg{ min-height: 56px; padding: 0 var(--space-6); font-size: var(--text-md); }
.btn-sm{ min-height: 38px; padding: 0 var(--space-3); font-size: var(--text-sm); border-radius: var(--radius-sm); }
.btn-block{ width: 100%; }
.btn-icon{ min-width: 44px; min-height: 44px; padding: 0; border-radius: var(--radius-full); }

.btn-primary{ background: var(--gradient-brand); color: var(--brand-ink); box-shadow: var(--shadow-brand); }
.btn-primary:hover{ box-shadow: var(--shadow-brand-lg); transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(1px) scale(.99); }
.btn-primary:disabled{ background: var(--line-strong); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none; }

.btn-secondary{ background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-secondary:hover{ border-color: var(--brand); color: var(--brand); box-shadow: var(--shadow-sm); }

.btn-ghost{ background: transparent; color: var(--ink); }
.btn-ghost:hover{ background: var(--surface-soft); }

.btn-plate{ background: var(--gradient-plate); color: var(--plate-ink); box-shadow: var(--shadow-plate); }
.btn-plate:hover{ box-shadow: 0 14px 30px rgba(255,204,0,.45); transform: translateY(-1px); }

/* Arrow micro-interaction — opt in with a trailing <svg class="btn-arrow">,
   used on primary hero/section CTAs for a tiny bit of tactile delight. */
.btn .btn-arrow{ width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); }
.btn:hover .btn-arrow{ transform: translateX(3px); }

.btn-danger{ background: var(--danger); color: #fff; }
.btn-danger-ghost{ background: transparent; color: var(--danger); border-color: var(--danger-50); }
.btn-danger-ghost:hover{ background: var(--danger-50); }

.link-strong{ font-weight: 700; color: var(--brand); }
.link-strong:hover{ text-decoration: underline; }

/* --------------------------------------------------------------------------
   5. FORMS
   -------------------------------------------------------------------------- */
.field{ display: flex; flex-direction: column; gap: var(--space-2); }
.field > span, .field > label{ font-size: var(--text-sm); font-weight: 700; color: var(--ink-soft); }
.input, .select{
  min-height: 48px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font-size: var(--text-md); width: 100%;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input::placeholder{ color: var(--muted); }
.input:focus, .select:focus{ border-color: var(--brand); box-shadow: var(--shadow-focus); outline: none; }
.input.is-error, .select.is-error{ border-color: var(--danger); }
.input.is-success{ border-color: var(--success); }
.field-error{ display: none; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: 600; color: var(--danger); }
.field.has-error .field-error{ display: flex; }
.field.has-error .input{ border-color: var(--danger); box-shadow: 0 0 0 3px rgba(197,51,51,.15); }
.field-hint{ font-size: var(--text-sm); color: var(--muted); }
.select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20'%3E%3Cpath fill='%235a6270' d='M5 7l5 6 5-6z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); }
.checkbox-row{ display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); }
.checkbox-row input{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex: none; }
/* Magento's own checkbox markup (`.field.choice`, used by newsletter-manage,
   account-edit's "e-mailadres/wachtwoord wijzigen" toggles, etc.) also
   matches the generic `.field` rule above, which sets flex-direction:column -
   that stacked the checkbox UNDER its label instead of beside it. Same
   row/gap/checkbox-size recipe as .checkbox-row, just scoped to core markup. */
.field.choice{ flex-direction: row; align-items: flex-start; gap: var(--space-3); }
.field.choice input[type="checkbox"]{ width: 20px; height: 20px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.field.choice label{ font-size: var(--text-sm); font-weight: 600; color: var(--ink); }

/* Kenteken / license plate input — NL plate visual, brand-differentiated */
.plate-field{ display: flex; flex-direction: column; gap: var(--space-2); }
.plate-input{
  display: flex; align-items: stretch; height: 56px; border-radius: var(--radius-md);
  overflow: hidden; background: var(--plate);
  box-shadow: 0 1px 2px rgba(15,17,21,.08), inset 0 0 0 1px rgba(15,17,21,.08);
}
.plate-input__eu{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 40px; background: #1652b8; color: #fff; font-size: 9px; font-weight: 800; line-height: 1.1; flex: none;
}
.plate-input__nl{ font-size: var(--text-sm); }
.plate-input input{
  flex: 1; min-width: 0; border: 0; background: transparent; padding: 0 var(--space-3);
  font-family: var(--mono); font-weight: 800; font-size: 1.375rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--plate-ink);
}
.plate-input input::placeholder{ color: rgba(20,22,26,.4); letter-spacing: .12em; }
.plate-input input:focus{ outline: none; }
.plate-input:focus-within{ box-shadow: 0 0 0 3px rgba(255,204,0,.5); }

/* --------------------------------------------------------------------------
   6. BADGES / CHIPS / COMPATIBILITY STATES
   -------------------------------------------------------------------------- */
.badge{
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 700; line-height: 1.4; white-space: nowrap;
}
.badge svg{ width: 14px; height: 14px; flex: none; }
.badge-neutral{ background: var(--surface-sunken); color: var(--ink-soft); }
.badge-brand{ background: var(--brand-50); color: var(--brand); }
.badge-plate{ background: var(--plate); color: var(--plate-ink); }

.chip{
  display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full); background: var(--surface-soft); border: 1px solid var(--line);
  font-size: var(--text-xs); font-weight: 600; color: var(--ink-soft);
}
.chip-filter{
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border-radius: var(--radius-full); background: var(--brand-50); color: var(--brand);
  font-size: var(--text-xs); font-weight: 700;
}
.chip-filter button, .chip-filter a{ display: flex; padding: 2px; border-radius: var(--radius-full); }
.chip-filter button:hover, .chip-filter a:hover{ background: rgba(49,64,205,.15); }

/* Compatibility — the single most important trust signal on the site.
   Never invented: every state below is either driven by real fitment data
   or explicitly "unknown/verify". See AUDIT.md §Compatibiliteit. */
.fit{
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm);
  font-size: var(--text-sm); font-weight: 700;
}
.fit svg{ width: 18px; height: 18px; flex: none; }
.fit-ok{ background: var(--success-50); color: var(--success); }
.fit-check{ background: var(--warning-50); color: var(--warning); }
.fit-unknown{ background: var(--surface-sunken); color: var(--ink-soft); }
.fit-no{ background: var(--danger-50); color: var(--danger); }
.fit-none{ background: var(--brand-50); color: var(--brand); }
.fit-sm{ padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border-radius: var(--radius-full); }

/* --------------------------------------------------------------------------
   7. NOTIFICATIONS / TOASTS / MOCKDATA NOTICE
   -------------------------------------------------------------------------- */

.toast-region{
  position: fixed; left: 50%; bottom: calc(var(--bottom-nav-h) + var(--safe-b) + var(--space-4));
  transform: translateX(-50%); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2);
  width: min(420px, calc(100vw - 32px)); pointer-events: none;
}
@media (min-width: 1024px){ .toast-region{ bottom: var(--space-6); } }
.toast{
  pointer-events: auto; display: flex; align-items: center; gap: var(--space-3);
  background: var(--ink); color: #fff; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  animation: toast-in var(--dur-slow) var(--ease);
}
.toast.is-leaving{ animation: toast-out var(--dur-base) var(--ease) forwards; }
.toast-icon{ flex: none; width: 22px; height: 22px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--success); }
.toast-icon svg{ width: 14px; height: 14px; }
.toast p{ font-size: var(--text-sm); font-weight: 600; margin: 0; }
@keyframes toast-in{ from{ opacity: 0; transform: translateY(12px); } to{ opacity: 1; transform: translateY(0); } }
@keyframes toast-out{ to{ opacity: 0; transform: translateY(8px); } }

.notice{
  display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4);
  border-radius: var(--radius-md); background: var(--surface-soft); border: 1px solid var(--line);
  font-size: var(--text-sm); color: var(--ink-soft);
}
.notice svg{ flex: none; width: 18px; height: 18px; color: var(--brand); }
.notice-success{ background: var(--success-50); border-color: transparent; color: #0d6b40; }
.notice-success svg{ color: var(--success); }
.notice-danger{ background: var(--danger-50); border-color: transparent; color: #8f2626; }
.notice-danger svg{ color: var(--danger); }
.notice-warning{ background: var(--warning-50); border-color: transparent; color: #7c3d09; }
.notice-warning svg{ color: var(--warning); }

/* --------------------------------------------------------------------------
   8. SKELETONS + EMPTY STATES
   -------------------------------------------------------------------------- */
.skeleton{ position: relative; overflow: hidden; background: var(--surface-sunken); border-radius: var(--radius-md); }
.skeleton::after{
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75), transparent);
  animation: shimmer 1.3s infinite;
}
@keyframes shimmer{ to{ transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce){ .skeleton::after{ animation: none; } }

.empty-state{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3);
  padding: var(--space-16) var(--space-6); color: var(--ink-soft);
}
.empty-state svg{ width: 56px; height: 56px; color: var(--line-strong); }
.empty-state h3{ color: var(--ink); }
.empty-state p{ max-width: 42ch; }
.cart-empty.empty-state{ padding: var(--space-24) var(--space-6); min-height: 50vh; justify-content: center; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* --------------------------------------------------------------------------
   9. HEADER (desktop) + MOBILE HEADER
   -------------------------------------------------------------------------- */
.site-header{
  position: sticky; top: 0; z-index: var(--z-header); background: var(--surface);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.site-header.is-scrolled{ box-shadow: var(--shadow-md); border-bottom-color: transparent; }
.header-main{
  display: flex; align-items: center; gap: var(--space-6);
  height: var(--header-h-mobile);
}
/* Mobile only: logo dead-center on screen regardless of the hamburger's
   and the icon-row's (unequal) widths — a 1fr/auto/1fr grid centers the
   middle track against the full row width, unlike margin:auto which only
   centers relative to its two neighbors. Desktop keeps the flex layout
   (search bar needs flex:1 between logo and actions there). */
@media (max-width: 1023px){
  .header-main{ display: grid; grid-template-columns: 1fr auto 1fr; padding-left: 8px; padding-top: 4px; }
  .header-main > .header-icon-btn{ justify-self: start; }
  .header-main > .logo{ justify-self: center; }
  .header-main > .header-actions{ justify-self: end; margin-left: 0; gap: 4px; }
}
/* Really small phones only: dead-centering the logo (above) leaves an
   awkward gap next to the hamburger on narrow screens - pull it over to sit
   right beside the menu button instead. Overrides the 1023px grid's middle
   1fr track with auto-sized hamburger+logo columns, actions keep the
   remaining space on the right. */
@media (max-width: 380px){
  .header-main{ grid-template-columns: auto auto 1fr; }
  .header-main > .logo{ justify-self: start; margin-left: var(--space-2); }
}
/* Logo lockup — icon (car glyph on brand-blue rounded square, see
   logo-car-only_2.html for the source concept) + wordmark, built from
   inline SVG/CSS instead of a raster file so it stays crisp at any size
   and the footer variant needs no invert-filter hack. */
.logo{ flex: none; display: flex; align-items: center; gap: 9px; transition: opacity var(--dur-fast) var(--ease); }
.logo:hover{ opacity: .82; }
.logo__icon{ height: 22px; width: 22px; flex: none; }
.logo__name{ font-family: var(--font-display); font-weight: 800; font-size: 14px; line-height: 1; letter-spacing: -0.01em; color: var(--ink); white-space: nowrap; }
.logo__nl{ display: inline-flex; align-items: center; background: var(--plate); color: var(--plate-ink); font-weight: 800; font-size: 9px; padding: 1px 5px; border-radius: 4px; margin-left: 3px; }
.footer .logo__name{ color: #fff; }

.header-search{ flex: 1; position: relative; display: none; }
.header-search .input{ padding-left: var(--space-10); min-height: 46px; background: var(--surface-soft); border-color: transparent; }
.header-search .input:focus{ background: var(--surface); }
.searchbar svg.search-ico{
  position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--muted); pointer-events: none;
}
/* margin-left:auto (deviation from the frontend-prototype-v2 source file):
   on desktop the flex:1 .header-search bar between .logo and .header-actions
   already pushes this to the right edge, but below 1024px .header-search is
   display:none and drops out of the flex layout entirely, leaving no spacer
   — without this, actions cluster right next to the logo instead of sitting
   at the right edge. */
.header-actions{ display: flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; min-width: 0; margin-left: auto; }
.header-btn{
  display: flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 0 var(--space-3); border-radius: var(--radius-md); font-weight: 700; font-size: var(--text-sm);
  position: relative;
}
.header-btn:hover{ background: var(--surface-soft); }
.header-btn svg{ width: 20px; height: 20px; }
.header-btn .cart-count{
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-full); background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
.header-btn--vehicle{ background: var(--surface-soft); border: 1px solid var(--line); }
.header-btn--vehicle .plate-mini{
  display: inline-flex; align-items: center; gap: 4px; background: var(--plate); color: var(--plate-ink);
  font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; border: 1.5px solid var(--ink);
}
.header-icon-btn{
  position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radius-full);
}
.header-icon-btn:hover{ background: var(--surface-soft); }
.header-icon-btn svg{ width: 22px; height: 22px; }
/* Was missing entirely — the cart badge only had positioning for the
   text-label .header-btn variant, so on the icon-only cart button its
   count rendered unstyled inline next to the icon instead of as a corner
   badge. Reuses the same look as .header-btn .cart-count. */
.header-icon-btn .cart-count{
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 3px;
  border-radius: var(--radius-full); background: var(--brand); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
}
/* Cart is the one header icon that gets an accent — it's where purchase
   intent lands, and it already matches the brand-blue item-count badge.
   Account/klantenservice/zakelijk stay neutral so the row doesn't get busy. */
.header-icon-btn--cart{ color: var(--brand); }

/* Account menu — clicking the header account icon opens this flyout instead
   of navigating away (see initAccountMenu() in app.js, rendered from a
   [data-account-menu] mount so the same markup/behavior stays in sync
   across every page instead of being hand-duplicated per file). */
.account-menu{ position: relative; display: flex; }
/* Login-status badge on the account icon — green check when logged in
   (mocked, see LS_AUTH in app.js), red cross when not. */
.account-status{
  position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--surface); color: #fff;
}
.account-status svg{ display: block; width: 8px; height: 8px; }
.account-status--in{ background: var(--success); }
.account-status--out{ background: var(--danger); }
.account-menu__panel{
  position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 60; width: 280px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-3);
}
.account-menu__panel[hidden]{ display: none; }
.account-menu__greeting{ padding: var(--space-2) var(--space-2) var(--space-3); margin-bottom: var(--space-2); border-bottom: 1px solid var(--line); }
.account-menu__greeting strong{ display: block; font-size: var(--text-sm); color: var(--ink); }
.account-menu__greeting span{ display: block; font-size: var(--text-xs); color: var(--muted); margin-top: 2px; }
.account-menu__list{ display: flex; flex-direction: column; }
.account-menu__list a,
.account-menu__list button{
  display: flex; align-items: center; gap: var(--space-3); padding: 9px var(--space-2);
  border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600; color: var(--ink-soft);
  width: 100%; background: none; border: 0; text-align: left; font-family: inherit; cursor: pointer;
}
.account-menu__list a:hover,
.account-menu__list button:hover{ background: var(--surface-soft); color: var(--brand); }
.account-menu__list svg{ width: 18px; height: 18px; flex: none; color: var(--muted); }
.account-menu__list a:hover svg{ color: var(--brand); }
.account-menu__auth{
  margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: var(--space-2); align-items: stretch;
}
.account-menu__auth[hidden]{ display: none; }
.account-menu__signup{ font-size: var(--text-xs); color: var(--muted); text-align: center; }
.account-menu__signup strong{ color: var(--brand); font-weight: 700; }

.mobile-search-row{ display: flex; align-items: center; gap: var(--space-1); padding-bottom: var(--space-1); }
.mobile-search-row .header-search{ display: flex; }
.header-icon-btn--vehicle-mobile{ flex: none; background: var(--surface-soft); border: 1px solid var(--line); }

@media (min-width: 1024px){
  .header-main{ height: var(--header-h); gap: var(--space-8); }
  .logo__icon{ height: 28px; width: 28px; }
  .logo__name{ font-size: 17px; }
  .logo__nl{ font-size: 10px; }
  .header-search{ display: flex; }
  .mobile-search-row{ display: none; }
}

/* Global search — autocomplete panel */
.searchbar{ position: relative; width: 100%; z-index: 2; }
/* Local dim layer inside the (elevated, see body.is-search-active .site-header
   below) header — covers the header's own chrome (logo, nav icons, mega-nav)
   while .searchbar's higher z-index above keeps the search bar + dropdown
   bright, matching how the .sheet-backdrop dims everything below the header. */
.header-dim{
  position: absolute; inset: 0; z-index: 1; background: var(--overlay);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
body.is-search-active .header-dim{ opacity: 1; pointer-events: auto; }
.suggest-panel{
  position: absolute; top: calc(100% + var(--space-2)); left: 0; right: 0;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); max-height: min(70vh, 480px); overflow-y: auto;
  padding: var(--space-2); display: none; z-index: var(--z-header);
}
.suggest-panel.is-open{ display: block; }
/* Search results darken the rest of the page behind them, reusing the same
   .sheet-backdrop as the slide-in sheets. The header (which contains the
   search bar + this panel) needs to sit above that backdrop while it's up,
   otherwise the scrim would paint over the search UI itself. */
/* .header-dim sizes to the header's padding box (inset:0), so the header's
   own 1px border-bottom sits just outside it and stayed bright against the
   dimmed page below — hide it while search is active, same trick already
   used for .is-scrolled above. */
body.is-search-active .site-header{ z-index: var(--z-sheet); border-bottom-color: transparent; }
.suggest-group{ padding: var(--space-2) var(--space-3) var(--space-1); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.suggest-item{
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md); width: 100%; text-align: left;
}
.suggest-item:hover, .suggest-item:focus-visible{ background: var(--surface-soft); }
.suggest-item svg{ flex: none; width: 18px; height: 18px; color: var(--muted); }
.suggest-item mark{ background: none; color: var(--brand); font-weight: 800; }
.suggest-item .suggest-meta{ margin-left: auto; font-size: var(--text-xs); color: var(--muted); font-family: var(--mono); }
.suggest-empty{ padding: var(--space-6) var(--space-4); text-align: center; color: var(--muted); font-size: var(--text-sm); }

/* Breadcrumbs */
.breadcrumbs{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--muted); padding-block: var(--space-3); }
.breadcrumbs a:hover{ color: var(--brand); text-decoration: underline; }
.breadcrumbs .sep{ opacity: .5; }
.breadcrumbs [aria-current]{ color: var(--ink-soft); font-weight: 600; }

/* --------------------------------------------------------------------------
   10. MOBILE BOTTOM NAVIGATION (app blueprint)
   -------------------------------------------------------------------------- */
.bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-bottomnav);
  display: flex; background: var(--surface); border-top: 1px solid var(--line);
  padding-bottom: var(--safe-b); box-shadow: 0 -4px 16px rgba(15,17,21,.06);
}
@media (min-width: 1024px){ .bottom-nav{ display: none; } }
.bottom-nav a{
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 56px; padding-top: var(--space-2); color: var(--muted);
  font-size: 10.5px; font-weight: 700; position: relative;
}
.bottom-nav a svg{ width: 22px; height: 22px; }
.bottom-nav a[aria-current="page"]{ color: var(--brand); }
.bottom-nav a[aria-current="page"]::before{
  content: ""; position: absolute; top: 0; width: 28px; height: 3px; border-radius: var(--radius-full); background: var(--brand);
}
.bottom-nav .cart-count{
  position: absolute; top: 0; right: calc(50% - 18px); min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: var(--radius-full); background: var(--brand); color: #fff; font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 1.5px solid var(--surface);
}

/* --------------------------------------------------------------------------
   11. DESKTOP TOP NAVIGATION (categories)
   -------------------------------------------------------------------------- */
.top-nav{ display: none; border-top: 1px solid var(--line); }
@media (min-width: 1024px){ .top-nav{ display: block; } }
.top-nav-list{ display: flex; align-items: center; gap: var(--space-2); }
.top-nav-list > a{
  display: flex; align-items: center; height: 48px; padding: 0 var(--space-3);
  font-weight: 700; font-size: var(--text-sm); color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.top-nav-list > a:hover{ color: var(--brand); border-color: var(--brand); }

/* Header mega-menu — category hierarchy (8 groups -> subcategory columns ->
   sub-subcategory children) verified against the live site's own markup;
   visuals use this prototype's own design system (white top-nav, card-style
   flyout with radius/shadow), not the live site's chrome. */
.mega-nav{ display: flex; gap: var(--space-2); flex: 1; }
.mega-nav__item{ position: relative; display: flex; }
.mega-nav__trigger{
  display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 var(--space-3);
  font-weight: 700; font-size: var(--text-sm); color: var(--ink-soft); border-bottom: 2px solid transparent;
  background: none; border-left: none; border-right: none; border-top: none; cursor: pointer; font-family: inherit;
}
/* Pull back by the trigger's own horizontal padding so the hamburger icon
   lines up flush with the logo above it instead of sitting a bit further
   right than it. */
.mega-nav__trigger--all{ color: var(--brand); margin-left: calc(var(--space-3) * -1); }
.mega-nav__trigger--all svg{ width: 18px; height: 18px; }
.mega-nav__trigger:hover, .mega-nav__trigger[aria-expanded="true"]{ color: var(--brand); border-color: var(--brand); }
.mega-nav__trigger:focus-visible{ outline: 2px solid var(--brand); outline-offset: -2px; border-radius: var(--radius-sm); }

.mega-nav__panel{
  position: absolute; top: 100%; left: 0; z-index: 60; min-width: 640px; max-width: min(760px, 90vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-5);
}
.mega-nav__panel[hidden]{ display: none; }
.mega-nav__panel--all{ min-width: 860px; max-width: min(980px, 92vw); padding: 0; overflow: hidden; }
.mega-nav__panel-inner{ /* kept for markup compat; no extra layout here outside the "all" flyout */ }
.mega-nav__panel--all .mega-nav__panel-inner{ padding: 0; }

.mega-nav__cols{ display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-5); align-items: start; }
.mega-nav__col-title{ display: block; font-weight: 800; font-size: var(--text-sm); color: var(--ink); margin-bottom: var(--space-2); }
.mega-nav__col-title:hover{ color: var(--brand); }
.mega-nav__col-links{ display: flex; flex-direction: column; gap: 7px; }
.mega-nav__col-links a{ font-size: var(--text-xs); color: var(--ink-soft); }
.mega-nav__col-links a:hover{ color: var(--brand); }

/* Categories directory page (categorieen.html) — reuses .mega-nav__cols /
   __col-title / __col-links for the link columns (same markup as the header
   flyout, see initCategoriesDirectory()), just wrapped in a plain page
   section instead of a dropdown panel. */
.cat-directory__group{ padding-block: var(--space-8); border-top: 1px solid var(--line); }
.cat-directory__group:first-of-type{ border-top: none; padding-top: 0; }
.cat-directory__group-title{ margin-bottom: var(--space-6); }
.cat-directory__group .mega-nav__cols{ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-6); }
.cat-directory__group .mega-nav__col-title{ font-size: var(--text-base); }
.cat-directory__group .mega-nav__col-links a{ font-size: var(--text-sm); }

.mega-nav__all{ display: flex; min-height: 320px; }
.mega-nav__all-left{ flex: none; width: 260px; background: var(--brand-50); padding: var(--space-4) 0; border-right: 1px solid var(--line); }
.mega-nav__all-lvl1{
  padding: var(--space-3) var(--space-5); font-weight: 700; font-size: var(--text-sm); color: var(--ink-soft);
  cursor: pointer; border-left: 3px solid transparent;
}
.mega-nav__all-lvl1.is-active{ background: var(--surface); color: var(--brand); border-left-color: var(--brand); }
.mega-nav__all-right{ flex: 1; padding: var(--space-5); max-height: 65vh; overflow-y: auto; }
.mega-nav__all-panel{ display: none; }
.mega-nav__all-panel.is-active{ display: block; }

/* Mobile categories sheet — photo-tile drill-down (winparts.nl-achtige
   mobiele categorie-browser, 2026-08-23), vervangt de eerdere platte
   accordion. .mobile-cat-group/__body/-item/-sub blijven hieronder staan
   (ongebruikt, niet verwijderd) - .mobile-cat-footer wordt nog wel
   hergebruikt onderaan elk scherm. */
.mobile-cat-group{ border-bottom: 1px solid var(--line); padding-block: var(--space-3); }
.mobile-cat-group:first-child{ padding-top: 0; }
.mobile-cat-group summary{
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-weight: 700; font-size: var(--text-sm); list-style: none; padding: var(--space-1) 0;
}
.mobile-cat-group summary::-webkit-details-marker{ display: none; }
.mobile-cat-group summary svg{ width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); color: var(--muted); }
.mobile-cat-group[open] summary svg{ transform: rotate(180deg); }
.mobile-cat-group__body{ display: flex; flex-direction: column; gap: var(--space-1); margin-top: var(--space-3); }
.mobile-cat-item{ font-weight: 700; font-size: var(--text-sm); color: var(--ink); padding: var(--space-2) 0; }
.mobile-cat-sub{ font-size: var(--text-sm); color: var(--ink-soft); padding: var(--space-2) 0 var(--space-2) var(--space-4); }
.mobile-cat-footer{ display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-4); margin-top: var(--space-4); border-top: 1px solid var(--line); }
.mobile-cat-footer a{ font-weight: 700; font-size: var(--text-sm); color: var(--brand); padding: var(--space-2) 0; }

/* .cat-screen: only one "screen" (root grid, a level-2 grid, or a level-3
   list) is visible at a time inside the sheet - drill-down/back is a pure
   class toggle (initCatNav() in site.js), all screens are server-rendered
   upfront so there's no AJAX/fetch involved. */
.cat-screen{ display: none; }
.cat-screen.is-active{ display: block; }
.cat-tile-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.cat-tile-grid--sm{ grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
.cat-tile{
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
  padding: var(--space-3); background: var(--surface-soft); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.cat-tile:active{ border-color: var(--brand); box-shadow: var(--shadow-sm); }
.cat-tile--sm{ padding: var(--space-2); gap: 6px; }
.cat-tile__media{
  display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1/1;
  border-radius: var(--radius-md); background: var(--surface); overflow: hidden;
}
.cat-tile__media img{ width: 100%; height: 100%; object-fit: contain; padding: var(--space-2); }
.cat-tile--sm .cat-tile__media img{ padding: 4px; }
.cat-tile__label{ font-size: var(--text-sm); font-weight: 700; color: var(--ink); line-height: var(--lh-snug); }
.cat-tile--sm .cat-tile__label{ font-size: var(--text-xs); }

.cat-screen__head{ display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.cat-back{
  display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none;
  border-radius: var(--radius-full); background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink);
}
.cat-back svg{ width: 18px; height: 18px; }
.cat-screen__title{ font-size: var(--text-lg); font-weight: 800; color: var(--ink); font-family: var(--font-display); }

.cat-list{ display: flex; flex-direction: column; }
.cat-list-item{
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-1) 0;
  width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line);
}
.cat-list-item:last-child{ border-bottom: 0; }
.cat-list-item__media{
  display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-md); background: var(--surface-soft); overflow: hidden;
}
.cat-list-item__media img{ width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cat-list-item__label{ flex: 1; min-width: 0; text-align: left; font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.cat-list-item > svg{ width: 16px; height: 16px; color: var(--muted); flex: none; }

/* --------------------------------------------------------------------------
   12. VEHICLE / GARAGE COMPONENTS
   -------------------------------------------------------------------------- */
.vehicle-card{
  display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.vehicle-card[hidden]{ display: none; }
.vehicle-card__icon{
  flex: none; width: 52px; height: 52px; border-radius: var(--radius-md); background: var(--brand-50);
  display: flex; align-items: center; justify-content: center; color: var(--brand);
}
.vehicle-card__icon svg{ width: 28px; height: 28px; }
.vehicle-card__body{ flex: 1; min-width: 0; }
.vehicle-card__label{ font-size: var(--text-xs); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.vehicle-card__name{ font-size: var(--text-md); font-weight: 800; }
.vehicle-card__meta{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--ink-soft); }
.vehicle-card__actions{ display: flex; gap: var(--space-2); flex: none; }
.vehicle-card__rename{ margin-top: var(--space-1); font-size: var(--text-xs); font-weight: 700; color: var(--brand); text-align: left; }
.vehicle-card__rename:hover{ text-decoration: underline; }
.vehicle-card--empty{ border-style: dashed; }
.vehicle-card--empty .vehicle-card__icon{ background: var(--surface-sunken); color: var(--muted); }

.vehicle-strip{
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--brand-50); border-radius: var(--radius-md); font-size: var(--text-sm);
}
.vehicle-strip strong{ color: var(--brand); }
.vehicle-strip .plate-mini{
  display: inline-flex; align-items: center; background: var(--plate); color: var(--plate-ink);
  font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; border: 1.5px solid var(--ink); flex: none;
}
.vehicle-strip a{ margin-left: auto; font-weight: 700; color: var(--brand); white-space: nowrap; }
.vehicle-strip a:hover{ text-decoration: underline; }

.garage-list{ display: flex; flex-direction: column; gap: var(--space-3); }
.garage-list .vehicle-card.is-active{ border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* Finder panel (homepage hero) */
.finder-panel{
  background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--line);
  box-shadow: var(--shadow-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-5);
  position: relative; overflow: hidden;
}
.route-tabs{ display: flex; gap: var(--space-2); background: var(--surface-soft); padding: 4px; border-radius: var(--radius-md); }
.route-tabs button{
  flex: 1; min-height: 40px; border-radius: var(--radius-sm); font-weight: 700; font-size: var(--text-sm); color: var(--ink-soft);
}
.route-tabs button.is-active{ background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }
.finder-route{ display: none; flex-direction: column; gap: var(--space-4); }
.finder-route.is-active{ display: flex; }
.finder-actions{ display: flex; flex-direction: column; gap: var(--space-3); }
.finder-divider{ display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; }
.finder-divider::before, .finder-divider::after{ content: ""; flex: 1; height: 1px; background: var(--line); }

/* --------------------------------------------------------------------------
   13. DISCOVERY / CATEGORY CARDS ("Wat wil je vervangen?")
   -------------------------------------------------------------------------- */
/* Plain white tiles with a cutout product shot; brand blue now lives only
   in the title text, not as a fill — an all-over blue tile and then a
   solid blue footer band were both flagged as "too much blue". Title
   reserves a fixed 2-line height so tiles stay aligned whether the name
   wraps or not. Stays a plain uniform grid so it reads as premium, not
   chaotic. */
.category-card{
  display: flex; flex-direction: column; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--line);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.category-card:hover{ box-shadow: var(--shadow-xl); transform: translateY(-5px); border-color: var(--brand); }
.category-card:hover .category-card__media img{ transform: scale(1.08); }
.category-card__media{
  aspect-ratio: 4/3; overflow: hidden; position: relative;
  background: radial-gradient(120% 100% at 50% 15%, #fff 0%, var(--surface-soft) 78%);
}
.category-card__media img{
  /* drop-shadow removed (deviation from the frontend-prototype-v2 source
     file): flagged by the site owner as not matching the reference design
     for these category tiles - the source file still has it, worth
     reconciling there someday, see .header-actions above for the same
     pattern. */
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; padding: var(--space-5);
  transition: transform var(--dur-slow) var(--ease);
}

/* Discovery grid — one calm, uniform grid of category tiles. (Used to be an
   asymmetric bento layout with a big featured tile + a fake "studio floor"
   shadow under every photo; both read as cluttered/glitchy in practice —
   see git history if reviving either idea.) */
/* Category rail — a single scrollable row instead of a grid: 6 tiles visible
   at once on desktop with prev/next paging, natural swipe on mobile (no
   buttons there — touch users scroll, they don't hunt for a chevron). */
.cat-rail{
  display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cat-rail::-webkit-scrollbar{ display: none; }
.cat-rail .category-card{ flex: 0 0 auto; scroll-snap-align: start; width: calc((100% - 5 * var(--space-4)) / 6); }
@media (max-width: 1023px){ .cat-rail .category-card{ width: 44vw; } }
@media (max-width: 599px){ .cat-rail .category-card{ width: 68vw; } }

.cat-rail-nav{ display: flex; gap: var(--space-2); }
.cat-rail-nav button{
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  transition: background var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease);
}
.cat-rail-nav button svg{ width: 20px; height: 20px; }
.cat-rail-nav button:hover{ background: var(--surface-soft); }
.cat-rail-nav button:disabled{ opacity: .35; pointer-events: none; }

/* Merged stat + USP band — big bold claims instead of generic icon rows. */
.claim-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: rgba(255,255,255,.14); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); }
@media (min-width: 768px){ .claim-grid{ grid-template-columns: repeat(4,1fr); } }
.claim-item{
  background: var(--brand-700); padding: var(--space-6) var(--space-5); min-width: 0;
  transition: background var(--dur-base) var(--ease);
}
.claim-item:hover{ background: var(--brand-600); }
.claim-item__icon{
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: var(--radius-md); background: rgba(255,255,255,.14); margin-bottom: var(--space-4); color: var(--plate);
}
.claim-item__icon svg{ width: 21px; height: 21px; }
.claim-item strong{ display: block; font-family: var(--font-display); font-size: var(--text-xl); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.claim-item span{ display: block; margin-top: var(--space-1); font-size: var(--text-sm); color: var(--on-brand-muted); font-weight: 600; }
.category-card__body{ padding: var(--space-4); background: var(--surface); border-top: 1px solid var(--line); }
.category-card strong{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  min-height: calc(var(--text-base) * var(--lh-tight) * 2); /* reserve 2 lines so 1-line and 2-line titles still line up */
  font-size: var(--text-base); font-weight: 800; color: var(--brand); letter-spacing: -0.01em;
}
.category-card span{ display: block; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--muted); }

.brand-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3); }
@media (min-width: 640px){ .brand-grid{ grid-template-columns: repeat(6,1fr); } }
.brand-chip{
  display: flex; align-items: center; justify-content: center; height: 64px;
  border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 800; color: var(--ink-soft); font-size: var(--text-sm);
  transition: border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.brand-chip:hover{ border-color: var(--brand); color: var(--brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }

/* --------------------------------------------------------------------------
   14. PRODUCT CARD
   -------------------------------------------------------------------------- */
.product-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (min-width: 640px){ .product-grid{ grid-template-columns: repeat(3,1fr); } }
@media (min-width: 1024px){ .product-grid{ grid-template-columns: repeat(4,1fr); gap: var(--space-5); } }
/* Listing pages (category.html, voertuig.html) have a filters sidebar eating
   into the width, so 4 columns felt cramped there — 3 fits better. Grids
   without a sidebar (homepage, PDP related, search-results) keep 4. */
@media (min-width: 1024px){ .listing-layout .product-grid{ grid-template-columns: repeat(3,1fr); } }
.product-grid.list-view{ grid-template-columns: 1fr; }

.product-card{
  display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; position: relative;
  transition: box-shadow var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.product-card:hover{ box-shadow: var(--shadow-lg); border-color: var(--line-strong); transform: translateY(-3px); }
.product-card__media{
  aspect-ratio: 4/3; position: relative; overflow: hidden;
  background: radial-gradient(120% 130% at 50% 10%, #fff 0%, var(--surface-soft) 80%);
}
.product-card__media img{ width: 100%; height: 100%; object-fit: contain; padding: var(--space-1); transition: transform var(--dur-slow) var(--ease); }
.product-card:hover .product-card__media img{ transform: scale(1.05); }
.product-card__fit{ position: absolute; top: var(--space-2); left: var(--space-2); right: 40px; z-index: 1; }
.product-card__fit .fit{ max-width: 100%; }
.product-card__fit .fit span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-card__fav{
  position: absolute; top: var(--space-2); right: var(--space-2); width: 32px; height: 32px;
  border-radius: var(--radius-full); background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
.product-card__fav svg{ width: 17px; height: 17px; color: var(--ink-soft); }
.product-card__body{ padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.product-card__title{ font-size: var(--text-sm); font-weight: 700; line-height: var(--lh-snug); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card__attrs{ display: flex; flex-wrap: wrap; gap: 4px; }
.product-card__attrs .chip{ padding: 2px 8px; }
.product-card__spacer{ flex: 1; }
.product-card__price-row{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.price{ font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; letter-spacing: -0.01em; }
.price-was{ font-size: var(--text-xs); color: var(--muted); text-decoration: line-through; }
.price-from{ font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
.stock-line{ display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; }
.stock-dot{ width: 7px; height: 7px; border-radius: var(--radius-full); flex: none; }
.stock-line.in-stock{ color: var(--success); } .stock-line.in-stock .stock-dot{ background: var(--success); }
.stock-line.low-stock{ color: var(--warning); } .stock-line.low-stock .stock-dot{ background: var(--warning); }
.stock-line.no-stock{ color: var(--muted); } .stock-line.no-stock .stock-dot{ background: var(--line-strong); }
.product-card__cta{ margin-top: var(--space-1); }
.product-card__reviews{ display: flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--muted); }
.stars{ display: inline-flex; gap: 1px; color: var(--plate-600); }
.stars svg{ width: 12px; height: 12px; }

/* List/table view (list-view density switch) */
.product-grid.list-view .product-card{ flex-direction: row; }
.product-grid.list-view .product-card__media{ width: 160px; aspect-ratio: 4/3; flex: none; }
.product-grid.list-view .product-card__title{ -webkit-line-clamp: 1; }

/* On phones, every product grid renders as a list — no manual toggle needed there. */
@media (max-width: 639px){
  .product-grid{ grid-template-columns: 1fr; }
  .product-grid .product-card{ flex-direction: row; }
  .product-grid .product-card__media{ width: 136px; aspect-ratio: 4/3; flex: none; }
  .product-grid .product-card__title{ -webkit-line-clamp: 1; }
}

.toolbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding-block: var(--space-3); border-bottom: 1px solid var(--line); margin-bottom: var(--space-5); flex-wrap: wrap;
}
.toolbar-count{ font-size: var(--text-sm); color: var(--ink-soft); }
.toolbar-count strong{ color: var(--ink); }
.toolbar-actions{ display: flex; align-items: center; gap: var(--space-2); }
.view-switch{ display: flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; }
.view-switch button{ width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; }
.view-switch button.is-active{ background: var(--brand-50); color: var(--brand); }
.view-switch svg{ width: 17px; height: 17px; }

.active-filters{ display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-bottom: var(--space-4); }
.active-filters .btn-ghost{ font-size: var(--text-xs); font-weight: 700; color: var(--brand); }

/* --------------------------------------------------------------------------
   15. FILTERS — desktop sidebar + mobile sheet
   -------------------------------------------------------------------------- */
.listing-layout{ display: grid; grid-template-columns: 1fr; gap: var(--space-8); min-width: 0; }
.listing-layout > *{ min-width: 0; }
@media (min-width: 1024px){ .listing-layout{ grid-template-columns: 260px 1fr; align-items: flex-start; } }

.filters-desktop{ display: none; }
@media (min-width: 1024px){
  .filters-desktop{ display: block; position: sticky; top: calc(var(--header-h) + 24px); }
}
.filter-group{ border-bottom: 1px solid var(--line); padding-block: var(--space-4); }
.filter-group:first-child{ padding-top: 0; }
.filter-group summary{
  display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  font-weight: 700; font-size: var(--text-sm); list-style: none; padding: var(--space-1) 0;
}
.filter-group summary::-webkit-details-marker{ display: none; }
.filter-group summary svg{ width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease); color: var(--muted); }
.filter-group[open] summary svg{ transform: rotate(180deg); }
.filter-options{ display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); max-height: 240px; overflow-y: auto; }
.filter-option{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.filter-option input{ width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.filter-option .count{ margin-left: auto; color: var(--muted); font-size: var(--text-xs); }
.filter-swatches{ display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.filter-swatch{ min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-full); border: 1.5px solid var(--line-strong); font-size: var(--text-xs); font-weight: 700; }
.filter-swatch.is-selected{ background: var(--brand); color: #fff; border-color: var(--brand); }

.filter-fab{
  display: none; position: fixed; right: var(--space-4); bottom: calc(var(--bottom-nav-h) + var(--safe-b) + var(--space-4));
  z-index: var(--z-sticky-cta); align-items: center; gap: var(--space-2);
}
@media (max-width: 1023px){ .filter-fab:not([hidden]){ display: inline-flex; } }
.filter-fab .count-pill{ background: rgba(255,255,255,.25); border-radius: var(--radius-full); padding: 2px 8px; font-size: var(--text-xs); }

.sheet-backdrop{
  position: fixed; inset: 0; background: var(--overlay); z-index: var(--z-backdrop);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease);
}
.sheet-backdrop.is-open{ opacity: 1; pointer-events: auto; }

.sheet{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sheet);
  background: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(100%); transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility 0s linear var(--dur-slow);
  box-shadow: 0 -16px 40px rgba(15,17,21,.2); padding-bottom: var(--safe-b);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.sheet.is-open{
  transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur-slow) var(--ease), visibility 0s linear;
}
/* Full-width edge-to-edge bottom sheet is a mobile pattern — on wider
   screens it read as oversized, so from tablet width up it becomes a
   compact, centered card instead (still slides up from the bottom). */
@media (min-width: 640px){
  .sheet{
    left: 50%; right: auto; bottom: var(--space-6); width: 100%; max-width: 420px;
    border-radius: var(--radius-xl); transform: translate(-50%, calc(100% + var(--space-6)));
  }
  .sheet.is-open{ transform: translate(-50%, 0); }
  .sheet::before{ display: none; }
}
.sheet::before{
  content: ""; width: 40px; height: 4px; border-radius: var(--radius-full); background: var(--line-strong);
  margin: 10px auto 0;
}
.sheet-head{ display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
.sheet-head h2{ font-size: var(--text-lg); }
.sheet-body{ padding: var(--space-4); overflow-y: auto; flex: 1; }
.sheet-foot{ padding: var(--space-4); border-top: 1px solid var(--line); display: flex; gap: var(--space-3); }
.sheet-foot .btn{ flex: 1; }

@media (min-width: 640px){
  .sheet:not(.sheet--filters){
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, calc(-50% + 24px)); width: min(480px, calc(100vw - 48px));
    border-radius: var(--radius-xl); max-height: 85vh;
  }
  .sheet:not(.sheet--filters).is-open{ transform: translate(-50%, -50%); }
  .sheet:not(.sheet--filters)::before{ display: none; }
}

.manual-select-grid{ display: grid; gap: var(--space-4); }
.manual-select-steps{ display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); }
.manual-select-steps .step{
  display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-full);
  background: var(--surface-sunken); color: var(--muted); font-size: var(--text-xs); font-weight: 800;
}
.manual-select-steps .step.is-active{ background: var(--brand); color: #fff; }
.manual-select-steps .step.is-done{ background: var(--success); color: #fff; }
.manual-select-steps .bar{ flex: 1; height: 2px; background: var(--line); }

/* --------------------------------------------------------------------------
   16. PRODUCT GALLERY
   -------------------------------------------------------------------------- */
.gallery{ display: flex; flex-direction: column; gap: var(--space-3); }
.gallery-main{
  position: relative; aspect-ratio: 16/9; border-radius: var(--radius-lg); background: var(--surface-soft);
  overflow: hidden; border: 1px solid var(--line);
}
.gallery-track{ display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery-track::-webkit-scrollbar{ display: none; }
.gallery-track img{ flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; padding: var(--space-6); scroll-snap-align: start; }
.gallery-dots{ position: absolute; left: 50%; bottom: var(--space-3); transform: translateX(-50%); display: flex; gap: 6px; }
.gallery-dots span{ width: 6px; height: 6px; border-radius: var(--radius-full); background: rgba(15,17,21,.2); }
.gallery-dots span.is-active{ background: var(--brand); width: 18px; border-radius: var(--radius-full); }
.gallery-zoom-hint{
  position: absolute; right: var(--space-3); top: var(--space-3); width: 36px; height: 36px; border-radius: var(--radius-full);
  background: rgba(255,255,255,.9); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
.gallery-zoom-hint svg{ width: 18px; height: 18px; }
.gallery-main{ cursor: zoom-in; }
.gallery-thumbs{ display: none; gap: var(--space-2); }

/* Photo lightbox — click the main product photo (or the zoom hint) to open
   a full-screen view, see initGalleries() in app.js. */
.lightbox{
  position: fixed; inset: 0; z-index: var(--z-sheet); background: var(--surface);
  display: flex; align-items: center; justify-content: center; padding: var(--space-8);
}
.lightbox[hidden]{ display: none; }
.lightbox img{ max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); cursor: zoom-in; transition: transform .15s ease; }
.lightbox img.is-zoomed{ transform: scale(2.4); cursor: zoom-out; }
.lightbox__close{
  position: absolute; top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.lightbox__close:hover{ background: var(--surface-sunken); }
.lightbox__close svg{ width: 20px; height: 20px; }
.lightbox__nav{
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: var(--radius-full);
  background: var(--surface-soft); border: 1px solid var(--line); color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.lightbox__nav:hover{ background: var(--surface-sunken); }
.lightbox__nav svg{ width: 22px; height: 22px; }
.lightbox__nav--prev{ left: var(--space-4); }
.lightbox__nav--next{ right: var(--space-4); }
@media (min-width: 640px){ .gallery-thumbs{ display: flex; } }
.gallery-thumbs button{
  width: 64px; height: 64px; border-radius: var(--radius-sm); border: 1.5px solid var(--line); background: var(--surface-soft); overflow: hidden; flex: none;
}
.gallery-thumbs button.is-active{ border-color: var(--brand); }
.gallery-thumbs img{ width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* --------------------------------------------------------------------------
   17. PRODUCT DETAIL INFO + STICKY PURCHASE BAR
   -------------------------------------------------------------------------- */
.pdp-layout{
  display: grid; gap: var(--space-8);
  grid-template-columns: 1fr;
  grid-template-areas: "gallery" "info";
}
.pdp-gallery-area{ grid-area: gallery; min-width: 0; }
.pdp-info{ grid-area: info; min-width: 0; }
/* Deliberately outside .pdp-layout, full page width — see comment in
   product.html for why (used to be squeezed into the gallery column). */
.pdp-content-area{ min-width: 0; margin-top: var(--space-10); margin-bottom: var(--space-12); }
@media (min-width: 900px){
  .pdp-layout{
    grid-template-columns: 1.1fr 0.9fr; align-items: start;
    grid-template-areas: "gallery info";
  }
}
.pdp-info{ display: flex; flex-direction: column; gap: var(--space-4); }
.pdp-title{ font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.02em; line-height: var(--lh-tight); }
.pdp-ref{ font-size: var(--text-sm); color: var(--muted); font-family: var(--mono); }
.pdp-price-block{ display: flex; align-items: baseline; gap: var(--space-3); }
.pdp-price{ font-family: var(--font-display); font-size: clamp(1.875rem, 1.6rem + 1vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); }
.pdp-vat{ font-size: var(--text-sm); color: var(--muted); }
.quick-specs{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: var(--space-3); }
.quick-specs__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: 4px; font-size: var(--text-sm); }
.quick-specs__row > span:first-child{ color: var(--muted); font-weight: 600; }
.quick-specs__row > span:last-child{ font-weight: 700; }

/* Vehicle fit result card — shown under "Controleer voor jouw auto" once a
   vehicle is active, see renderVehicleFitResult() in app.js. */
.vehicle-fit-result{ border-radius: var(--radius-lg); padding: var(--space-4); border: 1px solid var(--line); background: var(--surface-soft); }
.vehicle-fit-result[hidden]{ display: none; }
.vehicle-fit-result .plate-mini{
  display: inline-flex; align-items: center; background: var(--brand); color: #fff;
  font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: .06em;
  padding: 2px 6px; border-radius: 4px; margin-bottom: var(--space-3);
}
.vehicle-fit-result__vehicle{ font-weight: 700; font-size: var(--text-sm); }
.vehicle-fit-result__status{ font-family: var(--font-display); font-weight: 800; font-size: var(--text-md); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-2); }
.vehicle-fit-result__status svg{ width: 20px; height: 20px; flex: none; }
.vehicle-fit-result__explain{ font-size: var(--text-sm); color: var(--ink-soft); margin-top: var(--space-2); }
.vehicle-fit-result .btn{ margin-top: var(--space-3); }
.vehicle-fit-result--ok{ border-color: rgba(18,153,90,.3); background: rgba(18,153,90,.06); }
.vehicle-fit-result--ok .vehicle-fit-result__status{ color: var(--success); }
.vehicle-fit-result--check{ border-color: rgba(180,83,9,.3); background: rgba(180,83,9,.06); }
.vehicle-fit-result--check .vehicle-fit-result__status{ color: var(--warning); }
.vehicle-fit-result--no{ border-color: rgba(197,51,51,.3); background: rgba(197,51,51,.06); }
.vehicle-fit-result--no .vehicle-fit-result__status{ color: var(--danger); }
.vehicle-fit-result--unknown .vehicle-fit-result__status{ color: var(--muted); }

.pdp-buybox{
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-4); box-shadow: var(--shadow-sm);
}
.delivery-block{ display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); }
.delivery-block svg{ flex: none; width: 20px; height: 20px; color: var(--brand); margin-top: 1px; }
.delivery-block strong{ display: block; }
.qty-stepper{ display: flex; align-items: center; border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); overflow: hidden; height: 48px; width: 128px; flex: none; }
.qty-stepper button{ width: 40px; height: 100%; font-size: var(--text-lg); font-weight: 700; }
.qty-stepper button:hover{ background: var(--surface-soft); }
.qty-stepper input{ flex: 1; min-width: 0; height: 100%; border: 0; text-align: center; font-weight: 800; font-size: var(--text-md); border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.buybox-row{ display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.buybox-row > .btn{ min-width: 0; }
/* On the narrowest phones the stepper + full-text CTA don't fit on one row
   without either truncating the button label or overflowing — stack them
   instead so the CTA text always stays fully readable. */
@media (max-width: 380px){
  .buybox-row{ flex-direction: column; align-items: stretch; }
  .buybox-row .qty-stepper{ width: 100%; }
}

.specs-table{ width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.specs-table tr{ border-bottom: 1px solid var(--line); }
.specs-table th{ text-align: left; padding: var(--space-3) var(--space-3) var(--space-3) 0; color: var(--muted); font-weight: 600; width: 45%; }
.specs-table__label{ margin-right: var(--space-2); }
.specs-table td{ padding: var(--space-3) 0; font-weight: 600; }

/* "Geschikt voor" — default per-product compatibility list, shown without
   needing a kenteken (see AUDIT.md §5). The kenteken/garage fit-badge next
   to it is a refinement on top of this list, not a replacement for it. */
.compat-table{ border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.compat-table__head{ display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-4); padding: var(--space-3) var(--space-4); background: var(--surface-soft); font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.compat-table__row{ display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--line); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.compat-table__row:hover{ background: var(--surface-soft); color: var(--brand); }
.compat-table__row .muted{ font-weight: 600; }
.compat-table__row svg{ width: 16px; height: 16px; color: var(--muted); }

/* Example reviews (PDP Reviews tab) — mock content for design/testing, see
   REVIEW_POOL in app.js. Not tied to real review data. */
.review-card{ border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-4); }
.review-card__head{ display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.review-card__stars{ display: flex; gap: 2px; color: var(--plate-600); }
.review-card__stars svg{ width: 14px; height: 14px; }
.review-card__author{ font-weight: 700; font-size: var(--text-sm); }
.review-card__meta{ font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.review-card p{ font-size: var(--text-sm); color: var(--ink-soft); }
.review-card__vehicle{ display: inline-block; margin-top: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--brand); background: var(--brand-50); padding: 2px 8px; border-radius: var(--radius-full); }

.tabs{ display: flex; gap: var(--space-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs button{ padding: var(--space-3) var(--space-2); font-weight: 700; font-size: var(--text-sm); color: var(--muted); border-bottom: 2px solid transparent; white-space: nowrap; }
.tabs button.is-active{ color: var(--brand); border-color: var(--brand); }
.tab-panel{ display: none; padding-block: var(--space-5); } .tab-panel.is-active{ display: block; }

.faq-item{ border-bottom: 1px solid var(--line); }
.faq-item summary{ list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) 0; font-weight: 700; }
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary svg{ width: 18px; height: 18px; color: var(--muted); transition: transform var(--dur-base) var(--ease); flex: none; margin-left: var(--space-3); }
.faq-item[open] summary svg{ transform: rotate(45deg); }
.faq-item p{ padding-bottom: var(--space-4); color: var(--ink-soft); max-width: 68ch; }

.sticky-cta{
  /* sits just above the fixed bottom nav (also bottom:0) so the two never
     overlap and both stay independently clickable */
  position: fixed; left: 0; right: 0; bottom: calc(var(--bottom-nav-h) + var(--safe-b)); z-index: var(--z-sticky-cta);
  background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(15,17,21,.08);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; gap: var(--space-3);
  transform: translateY(100%); transition: transform var(--dur-base) var(--ease);
}
.sticky-cta.is-visible{ transform: translateY(0); }
@media (min-width: 1024px){ .sticky-cta{ display: none; } }
.sticky-cta .sticky-price{ display: flex; flex-direction: column; }
.sticky-cta .sticky-price strong{ font-size: var(--text-lg); font-weight: 800; }
.sticky-cta .sticky-price span{ font-size: 10px; color: var(--muted); }
.sticky-cta .btn{ flex: 1; }

/* --------------------------------------------------------------------------
   18. CART
   -------------------------------------------------------------------------- */
.cart-layout{ display: grid; gap: var(--space-8); min-width: 0; }
.cart-layout > *{ min-width: 0; }
@media (min-width: 900px){ .cart-layout{ grid-template-columns: 1.6fr 1fr; align-items: flex-start; } }
.cart-item{ display: grid; grid-template-columns: 88px 1fr; gap: var(--space-4); padding-block: var(--space-5); border-bottom: 1px solid var(--line); }
.cart-item__media{ width: 88px; height: 88px; border-radius: var(--radius-md); background: var(--surface-soft); overflow: hidden; border: 1px solid var(--line); }
.cart-item__media img{ width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cart-item__title{ font-weight: 700; font-size: var(--text-sm); }
.cart-item__row{ display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
.cart-item__remove{ font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.cart-item__remove:hover{ color: var(--danger); }
.qty-stepper--sm{ height: 44px; width: 116px; }
.qty-stepper--sm button{ width: 40px; }

.summary-card{ border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: calc(var(--header-h) + 16px); }
.summary-row{ display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); color: var(--ink-soft); }
.summary-row strong{ color: var(--ink); }
.summary-total{ display: flex; align-items: center; justify-content: space-between; font-size: var(--text-lg); font-weight: 800; padding-top: var(--space-3); border-top: 1px solid var(--line); }

.cart-empty{ }

/* --------------------------------------------------------------------------
   19. CHECKOUT
   -------------------------------------------------------------------------- */
.checkout-steps{ display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-6); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.checkout-steps .step{ flex: none; }
.checkout-steps .step{ display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; color: var(--muted); }
.checkout-steps .step-num{ width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--surface-sunken); display: flex; align-items: center; justify-content: center; font-size: 11px; }
.checkout-steps .step.is-active{ color: var(--brand); } .checkout-steps .step.is-active .step-num{ background: var(--brand); color: #fff; }
.checkout-steps .step.is-done .step-num{ background: var(--success); color: #fff; }
.checkout-steps .line{ flex: 1; height: 1px; background: var(--line); max-width: 40px; }

.field-grid{ display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px){ .field-grid-2{ grid-template-columns: 1fr 1fr; } }
.field-grid-3-2{ }
@media (min-width: 560px){ .field-grid-3-2{ grid-template-columns: 2fr 1fr; } }

.method-option{
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  border: 1.5px solid var(--line-strong); border-radius: var(--radius-md); cursor: pointer;
}
.method-option input{ width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.method-option.is-selected{ border-color: var(--brand); background: var(--brand-50); }
.method-option__body{ flex: 1; }
.method-option__title{ font-weight: 700; font-size: var(--text-sm); }
.method-option__meta{ font-size: var(--text-xs); color: var(--muted); }
.method-option__price{ font-weight: 700; font-size: var(--text-sm); }

.checkout-summary{ border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.checkout-summary-item{ display: flex; gap: var(--space-3); align-items: center; padding-block: var(--space-2); }
.checkout-summary-item img{ width: 44px; height: 44px; object-fit: contain; background: var(--surface-soft); border-radius: var(--radius-sm); padding: 4px; flex: none; }
.checkout-summary-item .name{ font-size: var(--text-xs); font-weight: 600; flex: 1; }
.checkout-summary-item .qty{ font-size: var(--text-xs); color: var(--muted); }

/* Order success */
.success-hero{ text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding-block: var(--space-10); }
.success-icon{ width: 76px; height: 76px; border-radius: var(--radius-full); background: var(--success-50); display: flex; align-items: center; justify-content: center; color: var(--success); animation: pop var(--dur-slow) var(--ease); }
.success-icon svg{ width: 38px; height: 38px; }
@keyframes pop{ from{ transform: scale(.7); opacity: 0; } to{ transform: scale(1); opacity: 1; } }

/* --------------------------------------------------------------------------
   20. FOOTER + TRUST BAR
   -------------------------------------------------------------------------- */
.trust-bar{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-4); }
@media (min-width: 768px){ .trust-bar{ grid-template-columns: repeat(4,1fr); } }
.trust-item{ display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.trust-item svg{ width: 26px; height: 26px; color: var(--brand); }
.trust-item strong{ font-size: var(--text-sm); }
.trust-item span{ font-size: var(--text-xs); color: var(--muted); }
/* On a brand-blue section background, the default (light-mode) icon/text
   colors above would be near-invisible blue-on-blue — override to white. */
.section--brand .trust-item__icon{ width: 44px; height: 44px; border-radius: var(--radius-md); background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; }
.section--brand .trust-item svg{ color: #fff; }
.section--brand .trust-item strong{ color: #fff; font-size: var(--text-md); }
.section--brand .trust-item span{ color: var(--on-brand-muted); }
.section--brand .eyebrow{ color: var(--plate); }
.section--brand h2{ color: #fff; }
.section--brand .step-numeral{ color: rgba(255,255,255,.18); -webkit-text-stroke: 1.5px rgba(255,255,255,.9); }
.section--brand p.muted{ color: var(--on-brand-muted); }

/* Pre-footer CTA band — a confident closing statement instead of drifting
   straight into the footer; reuses the WhatsApp-advice claim already made
   on the PDP (see product.html), not a new/invented claim. */
.cta-band{
  position: relative; overflow: hidden; background: var(--gradient-brand); color: #fff;
  padding-block: var(--space-10);
}
.cta-band::before{ content: ""; position: absolute; inset: 0; background: var(--gradient-mesh); }
.cta-band .container{ position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); }
.cta-band h2{ color: #fff; margin-bottom: var(--space-2); max-width: 28ch; }
.cta-band p{ color: rgba(255,255,255,.78); max-width: 46ch; }
.cta-band__actions{ display: flex; flex-wrap: wrap; gap: var(--space-3); max-width: 100%; }

.footer{ background: var(--ink); color: rgba(255,255,255,.72); padding-block: var(--space-12); font-size: var(--text-sm); }
.footer-newsletter{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding-bottom: var(--space-8); margin-bottom: var(--space-8); border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-newsletter h3{ color: #fff; }
.footer-newsletter p{ color: rgba(255,255,255,.6); font-size: var(--text-sm); margin-top: 4px; max-width: 40ch; }
.footer-newsletter__form{ display: flex; gap: var(--space-2); flex-wrap: wrap; }
.footer-newsletter__form input{
  min-width: 220px; height: 44px; padding: 0 var(--space-4); border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: #fff; font-size: var(--text-sm);
}
.footer-newsletter__form input::placeholder{ color: rgba(255,255,255,.4); }
.footer-newsletter__form input:focus-visible{ outline: 2px solid var(--plate); outline-offset: 1px; }
.footer h3{ color: #fff; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.footer-grid{ display: grid; grid-template-columns: repeat(2,1fr); gap: var(--space-8); }
@media (min-width: 768px){ .footer-grid{ grid-template-columns: repeat(4,1fr); } }
.footer-links{ display: flex; flex-direction: column; gap: var(--space-2); }
.footer-links a:hover{ color: #fff; }
.footer-bottom{ display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid rgba(255,255,255,.12); font-size: var(--text-xs); }
.footer-doclinks{ display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-doclinks a{ text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------------------------------
   21. UTILITIES
   -------------------------------------------------------------------------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.center{ text-align: center; }
.flex-1{ flex: 1; }
.divider{ height: 1px; background: var(--line); border: 0; margin: 0; }
.card{ background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-5); }
.card-pad-lg{ padding: var(--space-8); }

/* FAQ "nog vragen?" support card (homepage) — stands in for a real support
   photo we don't have mock assets for: an icon on a brand-gradient panel,
   same aspect-ratio-box pattern as a product/category photo would use. */
.faq-support-card{ display: flex; flex-direction: column; height: 100%; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); }
.faq-support-card:hover{ box-shadow: var(--shadow-xl); transform: translateY(-3px); border-color: var(--brand); }
.faq-support-card__media{ aspect-ratio: 16/10; border-radius: var(--radius-md); overflow: hidden; background: var(--gradient-brand); display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); }
.faq-support-card__media svg{ width: 56px; height: 56px; color: #fff; }
.faq-support-card h3{ font-size: var(--text-lg); margin-bottom: var(--space-2); }
.faq-support-card p{ color: var(--muted); font-size: var(--text-sm); margin-bottom: var(--space-4); }
.faq-support-card .section-link{ margin-top: auto; }

.filter-fab[hidden]{ display: none !important; }

/* --------------------------------------------------------------------------
   404 ("pagina niet gevonden") — geen prototype-referentie voor deze pagina,
   hergebruikt daarom bestaande componenten/tokens (btn, card, eyebrow) i.p.l.v.
   iets nieuws te verzinnen. Mobile-first: alles stapelt vanzelf op smalle
   schermen, geen aparte @media-regels nodig.
   -------------------------------------------------------------------------- */
.elf-404{ padding-block: var(--space-10) var(--space-20); }
/* .page-main already caps width at var(--container) site-wide (bridge.css) -
   no extra .container/max-width here, this section fills the same width as
   a category page (site owner feedback, 2026-09-29: the earlier 640px cap
   made the quick-link row look cramped/single-column on desktop). Only the
   intro copy (badge/title/lead/actions) keeps its own readable measure. */
.elf-404__intro{ max-width: 640px; margin-inline: auto; text-align: center; }
.elf-404__badge{
  width: 88px; height: 88px; margin: 0 auto var(--space-6);
  border-radius: var(--radius-full); background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-brand);
}
.elf-404__badge svg{ width: 40px; height: 40px; color: #fff; }
.elf-404__title{ font-size: var(--text-2xl); margin-bottom: var(--space-3); }
.elf-404__lead{ margin-bottom: var(--space-8); }
.elf-404__actions{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--space-3); margin-bottom: var(--space-5);
}
.elf-404__actions .btn{ flex: 0 1 auto; }
.elf-404__back{
  display: inline-flex; align-items: center; gap: var(--space-1);
  background: none; border: 0; color: var(--muted); font-size: var(--text-sm); font-weight: 600;
  cursor: pointer; padding: var(--space-2); margin-bottom: var(--space-10);
}
.elf-404__back:hover{ color: var(--brand); }
.elf-404__back svg{ width: 16px; height: 16px; }
.elf-404__links{
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4); text-align: left;
}
.elf-404__link{
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-4); text-decoration: none; color: var(--ink);
  transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease);
}
.elf-404__link:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--brand); }
.elf-404__link-icon{
  flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--brand-50);
  display: flex; align-items: center; justify-content: center;
}
.elf-404__link-icon svg{ width: 20px; height: 20px; color: var(--brand); }
.elf-404__link strong{ display: block; font-size: var(--text-sm); margin-bottom: 2px; }
.elf-404__link small{ display: block; color: var(--muted); font-size: var(--text-xs); line-height: var(--lh-normal); }