/*
 Theme Name:   iLectric Cars
 Theme URI:    https://generatepress.com
 Description:  Main Custom Style sheet of iLectric Cars (Unified 2026 Expert Style — Token Refactor)
 Author:       SQUAB Automotive B.V.
 Author URI:   squabautomotive.nl
 Template:     generatepress
 Version:      3.0
*/

/* ==========================================================================
   1. DESIGN TOKENS
   --------------------------------------------------------------------------
   Eén bron van waarheid. Componenten consumeren uitsluitend tokens;
   lokale afwijkingen lopen via component-scoped variabelen (--_naam) die
   media queries overschrijven i.p.v. declaraties te herhalen.

   Breakpoint-conventie (gedocumenteerd, CSS kent geen breakpoint-vars):
   - 599px / 600px   kaart-scrollers ↔ grid
   - 767px / 768px   mobiel ↔ desktop (hoofdgrens)
   - 1024px          tablet ↔ breed
   - 1610px          extra breed (taxonomie-grids)
   Waar mogelijk vervangen clamp(), min(), auto-fit en column-width de
   media query volledig.
   ========================================================================== */
:root {

  /* ── Layout & Spacing ─────────────────────────────────────── */
  --pad-container:  clamp(1rem, 2vw, 2.5rem);
  --space-xxs:      clamp(0.25rem, 0.15rem + 1vw, 0.6rem);
  --space-xs:       clamp(0.5rem, 0.35rem + 1.5vw, 1rem);
  --space-s:        clamp(0.75rem, 0.5rem + 2vw, 1.5rem);
  --space-m:        clamp(1rem, 0.75rem + 1.2vw, 2rem);
  --space-l:        clamp(2rem, 1.5rem + 2.5vw, 3rem);
  --measure:        clamp(75ch, 8ch + 3vw, 85ch);
  --measure-tight:  clamp(40ch, 6ch + 2vw, 50ch);
  --content-max:    2000px;   /* footer-inner, preview-wrapper */

  /* Component-level spacing */
  --gap-xs: 0.35rem;
  --gap-s:  0.5rem;
  --gap-m:  1rem;
  --gap-l:  1.25rem;
  --gap-xl: 1.5rem;

  /* ── Typography ───────────────────────────────────────────── */
  --fs-body:  clamp(0.95rem, 0.9rem + 0.3vw, 1rem);
  --fs-lead:  clamp(1rem, 0.95rem + 0.4vw, 1.15rem);
  --fs-h1:    clamp(1.6rem, 1.2rem + 2vw, 2.2rem);
  --fs-h2:    clamp(1.4rem, 1.1rem + 1.6vw, 1.8rem);
  --fs-h3:    clamp(1.2rem, 1rem + 1.2vw, 1.5rem);
  --fs-h4:    clamp(1.1rem, 0.95rem + 0.8vw, 1.3rem);
  --fs-h5:    clamp(1rem, 0.9rem + 0.6vw, 1.15rem);
  --fs-h6:    clamp(0.9rem, 0.85rem + 0.4vw, 1rem);

  /* Component-level font sizes */
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-md:   1rem;
  --fs-lg:   1.1rem;
  --fs-note: 0.8rem;

  --lh-tight:     1.2;
  --lh-normal:    1.55;
  --lh-relaxed:   1.8;
  --letter-spacing: 0.3px;

  /* ── Border radius ────────────────────────────────────────── */
  --radius-s: 0.5rem;
  --radius-m: 0.875rem;
  --radius-l: 1.25rem;

  /* ── Aspect-ratios ────────────────────────────────────────── */
  --ratio-photo: 4 / 3;      /* product-/modelfoto's, form-thumbnails */
  --ratio-video: 16 / 9;

  /* ── Safe area ────────────────────────────────────────────── */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);

  /* ── Vaste UI-lagen & componenthoogtes ────────────────────── */
  --z-card-active: 3;
  --z-sticky:      100;
  --z-bottombar:   1000;

  /* 48px knop + 8px boven + 8px onder; safe-area komt apart erbij. */
  --il-bottombar-h: calc(48px + (2 * var(--gap-s)));

  /* ── Kleurenpalet ─────────────────────────────────────────── */
  --il-contrast:   #0e1e42;
  --il-accent:     #0067c3;
  --il-blue:       #275da5;
  --il-base:       #edebe8;
  --il-success:    #082d0f;
  --il-muted:      #6f9283;
  --il-error:      #b3261e;
  --white:         #ffffff;

  /* Extended palette */
  --il-text-muted:     #475569;
  --il-border:         #e5e5e5;
  --il-border-light:   #e8eaf0;
  --il-surface:        #f9f9f9;
  --il-surface-blue:   #f0f4fb;
  --il-footer-bg:      #0b1529;
  --il-footer-link:    #7ea8cc;
  --il-status-bg:      #bccde0;
  --il-status-border:  #aabccf;
  --il-topbar-bg:      #0d1c3a;
  --il-safearea-bg:    #111827;
  --il-star:           #ffb400;

  /* Afgeleide tinten — één formule, overal dezelfde zweem */
  --il-line:        color-mix(in srgb, var(--il-contrast) 12%, transparent); /* hairlines (footer, kaders) */
  --il-line-soft:   color-mix(in srgb, var(--il-contrast) 8%, transparent);  /* subtiele kaders (KV) */
  --il-line-strong: color-mix(in srgb, var(--il-contrast) 40%, transparent); /* iconen, chevrons */
  --il-error-bg:    color-mix(in srgb, var(--il-error) 6%, var(--white));

  /* ── Elevation (schaduw) ──────────────────────────────────── */
  --shadow-s: 0 4px 16px  color-mix(in srgb, var(--il-contrast) 8%, transparent);
  --shadow-m: 0 8px 24px  color-mix(in srgb, var(--il-contrast) 12%, transparent);
  --shadow-l: 0 12px 40px color-mix(in srgb, var(--il-contrast) 10%, transparent);

  /* ── Motion (duur + easing in één token; werkt in shorthand) ─ */
  --t-fast: 0.15s ease;   /* links, kleuraccenten */
  --t-base: 0.2s ease;    /* knoppen, chevrons */
  --t-card: 0.25s ease;   /* kaart-hover (shadow/border) */
  --t-slow: 0.3s ease;    /* grote vlakken */
  --t-zoom: 0.35s ease;   /* image scale-on-hover */

  /* ── Legacy aliassen ── */
  --global-color-7: var(--il-accent);
  --accent:         var(--il-contrast);
  --base-3:         var(--white);
  --parchment:      var(--il-base);
  --evergreen:      var(--il-success);
  --muted-teal:     var(--il-muted);
  --prussian-blue:  var(--il-contrast);
  --ocean-deep:     var(--il-accent);

  /* ── Border shorthand tokens ── */
  --border-std:          1px solid var(--il-border);
  --border-light:        1px solid var(--il-border-light);
  --border-line:         1px solid var(--il-line);
  --border-soft:         1px solid var(--il-line-soft);
  --border-muted:        1px solid color-mix(in srgb, var(--il-muted) 30%, transparent);
  --border-error:        1px solid var(--il-error);
  --border-accent-top:   4px solid var(--il-accent);
  --border-contrast-top: 4px solid var(--il-contrast);
}

/* ==========================================================================
   2. GLOBAL BASE
   ========================================================================== */
html { hanging-punctuation: first last; }

body {
  text-wrap: pretty;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  letter-spacing: var(--letter-spacing);
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--il-contrast);
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

h1, h2, h3, h4, h5, h6, p {
  text-wrap: pretty;
  hyphens: auto;
  max-width: var(--measure);
  letter-spacing: var(--letter-spacing);
}

/* ==========================================================================
   3. CONTAINERS & LAYOUT UTILITIES
   ========================================================================== */
.ix { width: 100%; padding: var(--pad-container); box-sizing: border-box; }
.container-bleed { width: 100%; margin-inline: 0; padding: var(--pad-container); box-sizing: border-box; }
.content { max-width: var(--measure); margin-inline: auto; }
.content-tight { max-width: var(--measure-tight); margin-inline: auto; }
.container-y-xxs { padding-block: var(--space-xxs); }
.container-y-xs  { padding-block: var(--space-xs); }
.container-y-s   { padding-block: var(--space-s); }
.p-xxs  { padding: var(--space-xxs); }
.p-xs   { padding: var(--space-xs); }
.p-s    { padding: var(--space-s); }
.px-xxs { padding-inline: var(--space-xxs); }
.px-xs  { padding-inline: var(--space-xs); }
.px-s   { padding-inline: var(--space-s); }
.py-xxs { padding-block: var(--space-xxs); }
.py-xs  { padding-block: var(--space-xs); }
.py-s   { padding-block: var(--space-s); }

/* min(100%, …) in de minmax voorkomt overflow op zeer smalle viewports */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(220px, 40vw, 360px)), 1fr));
  gap: clamp(var(--space-xxs), 2vw, var(--space-s));
}
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, clamp(260px, 46vw, 420px)), 1fr));
  gap: clamp(var(--space-xxs), 2.5vw, var(--space-s));
}

/* Flex/grid-kinderen krijgen standaard min-width:auto → overflow-bron.
   Site-breed genezen (was sectie 40.1, hoort in het fundament). */
.gb-grid-wrapper > .gb-container { min-width: 0; }

/* ==========================================================================
   4. GLOBAL BORDER-RADIUS RESET
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .added_to_cart,
.availability-status,
.gb-container,
.gb-grid-wrapper,
.woocommerce ul.products li.product,
.model-grid-container,
.il-card-cta,
.il-card-cta *,
.il-card-cta-wrap,
.header-quick-select,
.header-quick-select > *,
.option-brand-grid .gb-loop-item,
.product-detail-block details > summary {
  border-radius: 0 !important;
}

/* ==========================================================================
   5. HERO / VIDEO / CONTENT BLOCKS
   ========================================================================== */
.content-overlay {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0; text-align: center; padding: 1rem;
  width: 100%; max-width: 600px; box-sizing: border-box;
}
.content-overlay h1 { font-size: clamp(2rem, 4vw + 1rem, 4.5rem); line-height: var(--lh-tight); margin-bottom: var(--space-xs); font-weight: 800; }
.content-overlay p  { font-size: var(--fs-lead); line-height: var(--lh-normal); max-width: var(--measure-tight); margin-inline: auto; font-weight: 600; }

/* Padding-hack bewust behouden (iframe-compat); ratio via --_ratio-pad
   zodat de mobiele portrait-switch alleen de variabele raakt. */
.video-container, .videoWrapper { position: relative; height: 0; overflow: hidden; max-width: 100%; border-radius: var(--radius-m); }
.video-container { padding-bottom: 56.25%; }
.video-container .responsive-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.videoWrapper { --_ratio-pad: 56.25%; width: 100%; padding-bottom: var(--_ratio-pad); background: #000; }
@media (max-width: 767px) { .videoWrapper { --_ratio-pad: 177.78%; } }
.responsive-iframe { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; object-fit: cover; border: none; }
.video-poster { position: absolute; inset: 0; overflow: hidden; z-index: 1; }
.video-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ==========================================================================
   6. WOOCOMMERCE BUTTONS
   ========================================================================== */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .added_to_cart {
  display: inline-block;
  background: var(--global-color-7, var(--il-accent)) !important;
  color: var(--base-3, var(--white));
  font-weight: 600; padding: 0.65rem 1.25rem;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), transform var(--t-fast);
  border: none;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover, .woocommerce #respond input#submit:hover,
.woocommerce .added_to_cart:hover, .woocommerce a.button:focus,
.woocommerce button.button:focus, .woocommerce input.button:focus,
.woocommerce #respond input#submit:focus, .woocommerce .added_to_cart:focus {
  background: color-mix(in srgb, var(--global-color-7) 85%, black);
  color: var(--base-3, var(--white)); outline: none;
}
.woocommerce a.button.disabled, .woocommerce button.button:disabled,
.woocommerce input.button:disabled, .woocommerce #respond input#submit:disabled {
  opacity: 0.6; cursor: not-allowed;
  background: color-mix(in srgb, var(--global-color-7) 60%, #ccc);
}

/* ==========================================================================
   7. WOOCOMMERCE PRODUCT LOOP TITLES & META
   ========================================================================== */
.woocommerce-loop-product__title {
  padding: 1rem 1.25rem 0.25rem 1.25rem !important;
  font-size: var(--fs-lg) !important; font-weight: 600;
  line-height: 1.4 !important; margin-bottom: 4px;
  display: flex; flex-direction: column;
}
.title-main-line  { font-weight: 700; color: var(--il-contrast); }
.product-uitvoering { font-size: var(--fs-sm) !important; color: var(--il-text-muted) !important; font-weight: 400 !important; line-height: 1.3; display: block; margin-top: 2px; }
.title-second-line  { display: block; color: var(--il-blue); font-size: 0.9em; font-weight: 500; margin-top: 2px; }
.product-meta-desc  { padding: 0 1.25rem; font-size: var(--fs-sm); color: var(--il-text-muted); margin-bottom: 1rem; min-height: 2.5em; line-height: 1.4; }
.price       { padding: 0 1.25rem; font-size: var(--fs-h3) !important; font-weight: 700; color: var(--il-contrast) !important; display: block; margin-bottom: 1rem !important; }
.price-suffix{ font-size: var(--fs-sm); font-weight: 400; color: var(--il-text-muted); margin-left: 4px; }

/* ==========================================================================
   8. WOOCOMMERCE ARCHIVE — GRID + CARDS
   --------------------------------------------------------------------------
   Vervangt Woo's float/percentage-layout door een intrinsiek CSS-grid,
   in lijn met .grid-cards / .il-bc__grid.
   - --_card-min stuurt de kolombreedte (280px = 4 kolommen op desktop)
   - auto-fill (niet auto-fit): bij weinig voorraad blijven kaarten
     kolombreed i.p.v. uit te rekken
   - il-scroll-mobile (<600px, sectie 38) wint via display:flex !important
   ========================================================================== */
.woocommerce ul.products,
.woocommerce-page ul.products {
  --_card-min: 280px;   /* TODO: bevestigen — 280px = 4 kolommen bij brede container; 320px = ruimer, eerder 3 */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--_card-min)), 1fr));
  gap: var(--gap-l);
  align-items: stretch;
  width: 100%;
  margin: 0 0 var(--space-l);
  padding: 0;
  list-style: none;
}

/* Woo's clearfix-pseudo's zouden anders lege grid-cellen worden */
.woocommerce ul.products::before,
.woocommerce ul.products::after { content: none; }

/* Neutraliseer float/breedte/marge uit Woo core, incl. alle columns-varianten */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce-page[class*="columns-"] ul.products li.product,
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product {
  float: none;
  clear: none;
  width: 100%;
  margin: 0;
}

/* ── Kaart — zelfde designtaal als .model-grid-container / .il-bc__card ── */
.woocommerce ul.products li.product {
  position: relative;
  z-index: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--white);
  border: var(--border-light);
  border-top: var(--border-contrast-top) !important;
  overflow: hidden;
  transition: box-shadow var(--t-card), border-color var(--t-card);
}
.woocommerce ul.products li.product:hover,
.woocommerce ul.products li.product:focus-within {
  z-index: var(--z-card-active);
  box-shadow: var(--shadow-m);
  border-color: var(--il-blue);
}
/* Inset focusring blijft zichtbaar ondanks overflow:hidden op de kaart */
.woocommerce ul.products li.product:focus-within {
  box-shadow: inset 0 0 0 3px var(--il-accent), var(--shadow-m);
}

.woocommerce ul.products li.product a { display: block; width: 100%; }

/* Loop-afbeelding op vaste ratio → gelijke rijhoogtes in het grid */
.woocommerce ul.products li.product a img {
  margin: 0 !important;
  width: 100% !important;
  aspect-ratio: var(--ratio-photo);
  object-fit: cover;
  border-radius: 0 !important;
  display: block;
}

.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.product-detail-block .detail-container .row .value.kenteken { font-size: clamp(1rem, 0.95rem + 0.8vw, 1.125rem); }
.woocommerce ul.products li.product.woocommerce-image-align-left .wc-product-image { margin-right: 0 !important; float: unset !important; }

/* ── CTA — via margin-top:auto altijd onderaan, per rij op gelijke hoogte ── */
.woocommerce ul.products li.product .single_button_wrapper {
  margin-top: auto;
  flex-shrink: 0;
}
.woocommerce ul.products li.product .single_button_wrapper .button,
.woocommerce ul.products li.product.woocommerce-text-align-left .button {
  display: block;
  width: 100%;
  text-align: center;
  font-size: var(--fs-md);
}

/* ── Toolbar boven het grid (result count) ── */
.woocommerce .woocommerce-result-count {
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
  margin: 0 0 var(--space-s);
  float: none;
}

.woocommerce-archive-wrapper { padding: var(--pad-container); }
.product-meta, .extra-product-meta { display: block; }
.extra-product-meta { padding: var(--space-xs); }

/* ==========================================================================
   9. STATUS BADGES
   ========================================================================== */
.availability-status { width: 100%; padding: 0.5rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: -5px; position: relative; z-index: 2; }
.status-in-stock { background-color: var(--il-status-bg); color: var(--il-contrast); border-top: 1px solid var(--il-status-border); }
.status-sold     { background-color: var(--il-contrast); color: var(--white); }

.lbv-specs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-s) 1rem; padding: 1rem 1.25rem;
  margin: 0 1.25rem 1rem 1.25rem;
  border-top: var(--border-light);
  border-bottom: var(--border-light);
  font-size: var(--fs-xs); color: var(--il-text-muted);
}
.spec-item   { display: flex; align-items: center; gap: var(--gap-s); }
.spec-item i { width: 14px; text-align: center; color: var(--il-blue); }
/* ==========================================================================
   9. STATUS BADGES
   ========================================================================== */
.availability-status { width: 100%; padding: 0.5rem; text-align: center; font-size: var(--fs-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-top: -5px; position: relative; z-index: 2; }
.status-in-stock { background-color: var(--il-status-bg); color: var(--il-contrast); border-top: 1px solid var(--il-status-border); }
.status-sold     { background-color: var(--il-contrast); color: var(--white); }

.lbv-specs-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--gap-s) 1rem; padding: 1rem 1.25rem;
  margin: 0 1.25rem 1rem 1.25rem;
  border-top: var(--border-light);
  border-bottom: var(--border-light);
  font-size: var(--fs-xs); color: var(--il-text-muted);
}
.spec-item   { display: flex; align-items: center; gap: var(--gap-s); }
.spec-item i { width: 14px; text-align: center; color: var(--il-blue); }

/* ==========================================================================
   10. SINGLE PRODUCT — TITEL / VOORRAAD / PRIJS
   ========================================================================== */
h1.product_title.entry-title {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  font-size: clamp(1.6rem, 4vw + 1rem, 2.4rem); line-height: 1.1;
  font-weight: 700; letter-spacing: -0.02em;
  color: var(--prussian-blue); margin-bottom: 0.5em; word-wrap: break-word;
}
.woocommerce div.product p.stock {
  display: inline-flex; align-items: center;
  font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
  background-color: var(--parchment); color: var(--evergreen);
  padding: 0.5em 1em; border-radius: 99px !important;
  border: var(--border-muted); margin-bottom: 1.5rem;
}
.woocommerce div.product p.stock::before {
  content: ""; display: block; width: 0.6em; height: 0.6em;
  background-color: var(--muted-teal); border-radius: 50%; margin-right: 0.75em;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--parchment);
}
.woocommerce div.product p.price {
  font-size: clamp(1.4rem, 2vw + 1rem, 1.8rem); font-weight: 700; color: var(--prussian-blue);
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5em; line-height: 1.2;
}
.woocommerce div.product p.price span.woocommerce-Price-suffix,
.woocommerce div.product p.price small { font-size: 0.55em; font-weight: 400; color: var(--muted-teal); text-transform: lowercase; }
.product-detail-block { line-height: var(--lh-relaxed); }

/* ==========================================================================
   11. ACCORDIONS / DETAIL BLOCKS (basisvariant)
   ========================================================================== */
.product-detail-block details > summary {
  position: relative; cursor: pointer; list-style: none;
  padding: var(--space-xxs) var(--space-s);
  background: color-mix(in srgb, var(--global-color-7) 6%, var(--il-surface));
  transition: background var(--t-base), color var(--t-base);
}
.product-detail-block details > summary:hover,
.product-detail-block details > summary:focus {
  background: color-mix(in srgb, var(--global-color-7) 14%, var(--il-surface));
  color: var(--accent); outline: none;
}
.product-detail-block details > summary::after {
  content: ""; position: absolute; right: var(--space-xs); top: 50%;
  width: 0.6em; height: 0.6em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg); transition: transform var(--t-base); opacity: 0.7;
}
.product-detail-block details[open] > summary::after { transform: translateY(-50%) rotate(-135deg); opacity: 1; }
.product-detail-block .product-detail-section,
.product-detail-block section { margin-bottom: var(--space-m, 1rem); }
.product-detail-block :is(h2,h3,h4) { margin-top: var(--space-m, 2rem); margin-bottom: var(--space-s, 0.75rem); }
.product-detail-block details { margin: var(--space-m, 2rem) 0; padding: 0.26rem 0; }
.product-detail-block .acc-body { padding: var(--space-s, 1rem) var(--space-m, 1.25rem) var(--space-m, 2rem); line-height: var(--lh-normal, 1.55); }
.product-detail-block dl,
.product-detail-block ul,
.product-detail-block ol { margin-top: var(--space-xs, 0.5rem); margin-bottom: var(--space-s, 1rem); }
.product-detail-block li { margin-bottom: 0.35em; }
.product-detail-block .detail-container .row .value.kenteken { font-size: clamp(0.875rem, 0.8238rem + 0.1751vw, 1rem); }

/* ==========================================================================
   12. PRODUCT GALLERY
   ========================================================================== */
.woocommerce div.product div.images div.thumbnails { display: none; }
.woocommerce div.product div.images div.thumbnails::before { position: absolute; top: auto; bottom: -9999px; }
.woocommerce div.product div.images .woocommerce-product-gallery__image { width: 100% !important; }

@media (min-width: 768px) {
  .woocommerce div.product div.images div.thumbnails { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xxs); }
  .woocommerce #content div.product div.thumbnails a,
  .woocommerce div.product div.thumbnails a,
  .woocommerce-page #content div.product div.thumbnails a,
  .woocommerce-page div.product div.thumbnails a { float: unset !important; width: unset !important; margin: 0 !important; }
}

@media (max-width: 767px) {
  .woocommerce div.product div.images { margin-block-end: 0; }
  .title_container .breadcrumb { display: none; }
  div.product div.images div.thumbnails a { display: none; }
  div.product div.images div.thumbnails { margin: 0; padding: 0; }
  .gallery-images-length { display: inline-block; width: 100%; text-align: center; padding: 5px 0; }
  .single-product .template-shop { padding-top: 20px; }
  #top .main_color p.price { float: none; display: inline-block; margin: 0; font-size: var(--fs-md); }
  .quotation { display: none; }
}

/* ==========================================================================
   13. FACETWP / TAXONOMY
   --------------------------------------------------------------------------
   Taxonomie-grid nu volledig intrinsiek: één auto-fit regel vervangt de
   vier breakpoint-varianten (2/2/3/auto kolommen) uit oud sectie 28.
   ========================================================================== */
.facetwp-pager { text-align: center; margin-top: calc(var(--space-s) * 2); }
.facetwp-page,
.facetwp-page:first-of-type:before,
.facetwp-page:last-of-type:after { display: inline-block; margin: var(--space-xxs); padding: calc(var(--space-s) * 1.2) calc(var(--space-s) * 2); border-radius: 0.1rem; transition: background-color var(--t-slow), color var(--t-slow); }
.term-description { padding-top: calc(var(--space-s) * 2); }

.woocommerce-taxonomy-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
  gap: var(--space-xs);
}
.woocommerce-taxonomy-term { display: grid; place-items: center; padding: var(--space-xs); border-radius: var(--radius-s); text-align: center; transition: all var(--t-slow); }
@media (max-width: 767px) { .woocommerce-taxonomy-term a { font-size: 1.1em; } }

.electric-cars-list { display: flex; flex-wrap: wrap; gap: var(--space-s); justify-content: space-between; }
.brand-column { flex: 1 1 calc(33.333% - 20px); box-sizing: border-box; padding: var(--space-s); border-radius: var(--radius-s); transition: box-shadow var(--t-slow); }
@media (max-width: 767px) { .brand-column { flex: 1 1 100%; } }
.electric-cars-list h2,.electric-cars-list h3,.electric-cars-list h4 { margin-bottom: var(--space-xxs); }
.electric-cars-list h2 a,.electric-cars-list h3 a,.electric-cars-list h4 a { text-decoration: underline; transition: color var(--t-slow); }
.subchild-list { margin-left: 20px; }

/* ==========================================================================
   14. HERO INTRO GRID
   ========================================================================== */
.hero-section { margin-bottom: var(--space-l); }
.hero-intro-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-m); align-items: start; margin-bottom: var(--space-l); }
@media (min-width: 768px) { .hero-intro-grid { grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem); } }
.hero-intro-text h2 { color: var(--il-contrast); font-size: var(--fs-h2); font-weight: 800; margin-top: 0; margin-bottom: var(--space-xs); line-height: var(--lh-tight); }
.hero-intro-text p  { color: var(--il-contrast); font-size: var(--fs-lead); max-width: 65ch; margin: 0; }

/* ==========================================================================
   15. SECTIE WRAPPER
   ========================================================================== */
.il-section-wrapper {
  width: 100%; padding-block: var(--space-l); padding-inline: var(--pad-container);
  box-sizing: border-box; display: flex; flex-direction: column; gap: var(--space-m);
  border-bottom: var(--border-light);
}
.il-section-wrapper:last-of-type { border-bottom: none; }
nav[aria-label="Snelkeuze"].il-section-wrapper,
nav[aria-label="Snelkeuze"] + .il-section-wrapper { border-bottom: none; }
.il-section-wrapper.quadblock { border-bottom: var(--border-light); }
.il-section-wrapper > .gb-container [class*="gb-headline"] { text-align: center; max-width: var(--measure-tight); margin-inline: auto; }
.il-section-wrapper > .gb-query,
.il-section-wrapper > div > .gb-query { width: 100%; }

/* ==========================================================================
   16. MODEL CARDS
   ========================================================================== */
.il-card-outer  { display: flex; flex-direction: column; height: 100%; }
.il-model-link  { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; text-decoration: none; color: inherit; position: relative; }

.model-grid-container {
  display: flex; flex-direction: column; flex: 1 1 auto; width: 100%;
  background: var(--white); border: var(--border-light);
  border-top: var(--border-contrast-top) !important;
  overflow: hidden; transition: box-shadow var(--t-card), border-color var(--t-card);
}
.model-grid-container:hover { box-shadow: var(--shadow-m); border-color: var(--il-accent) !important; }
.il-usps-card.model-grid-container { border: var(--border-light) !important; border-top: var(--border-contrast-top) !important; }

.model-container-title { padding: 0.75rem 1rem; background: var(--white); border-bottom: 3px solid var(--il-accent); flex-shrink: 0; }
.model-container-title h3 { margin: 0; color: var(--il-accent); font-size: var(--fs-h4); font-weight: 700; text-align: center; text-transform: uppercase; letter-spacing: 0.06em; max-width: none; }

.il-card-image { flex-shrink: 0; width: 100%; aspect-ratio: var(--ratio-photo); overflow: hidden; background: var(--il-surface); }
.il-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--t-zoom); }
.model-grid-container:hover .il-card-image img { transform: scale(1.03); }

.il-card-desc   { flex: 1 1 auto; padding: 1rem; border-top: 1px solid var(--il-surface); }
.il-card-desc p { margin: 0; font-size: var(--fs-sm); color: var(--il-text-muted); line-height: 1.5; max-width: none; }
.il-card-cta-wrap { flex-shrink: 0; }

/* ── 16b. MODEL CARD VARIANTS (uitvoeringen — laag 3) ──────────────────────
   Server-side gerenderd door ilectric-query-bridge in .il-card-variants-slot.
   Items zijn <a>-tags binnen <li>; z-index zorgt dat clicks naar de
   uitvoering navigeren i.p.v. naar het modelarchief (parent .il-model-link). */
.il-card-variants-slot { margin-top: var(--gap-m); }

.il-card-variants {
  list-style: none;
  margin: 0;
  padding: var(--gap-s) 0 0 0;
  border-top: var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.il-card-variants__item { margin: 0; padding: 0; list-style: none; }

.il-card-variants__item a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--il-text-muted) !important;
  background: var(--il-surface);
  border: var(--border-light);
  border-radius: 0;
  letter-spacing: var(--letter-spacing);
  text-decoration: none !important;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  position: relative;
  z-index: 2;
}

.il-card-variants__item a:hover,
.il-card-variants__item a:focus-visible {
  background: var(--il-contrast) !important;
  border-color: var(--il-contrast) !important;
  color: var(--white) !important;
  outline: none;
}

/* ==========================================================================
   17. USP KAARTEN
   --------------------------------------------------------------------------
   Quadblock is nu een intrinsiek auto-fit grid: 4 → 2 → 1 kolommen zonder
   media queries (verving flex-basis 25%/50%/100% + 2 breakpoints).
   ========================================================================== */
.il-usps-card {
  background: var(--white) !important; border-radius: 0 !important;
  padding: var(--space-l) var(--space-m) var(--space-m) !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  text-align: center; gap: 0; flex: 1 1 0; min-width: 0;
}
.il-usps-card .gb-block-image { margin: 0 0 var(--space-m) 0; display: flex; justify-content: center; align-items: center; min-height: 100px; }
.il-usps-card .gb-block-image img, .il-usps-card img { max-height: 100px; width: auto; object-fit: contain; display: block; }
.il-usps-card h2, .il-usps-card h3 { color: var(--il-contrast) !important; font-size: var(--fs-h4) !important; font-weight: 700 !important; text-align: center !important; margin-top: 0 !important; margin-bottom: var(--space-xs) !important; max-width: none; line-height: var(--lh-tight); }
.il-usps-card p   { color: var(--il-text-muted); font-size: var(--fs-body); line-height: var(--lh-normal); text-align: center; margin: 0; max-width: none; }
.il-usps-card p a { color: var(--il-accent); font-weight: 600; text-decoration: underline; }

.quadblock.il-section-wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gap-xl) !important;
  align-items: stretch !important;
}
.quadblock.il-section-wrapper > .gb-container { min-width: 0; }

.textpadding { padding-inline: 0; }

.il-card-cta {
  display: flex !important; align-items: center; justify-content: flex-start;
  width: 100%; box-sizing: border-box; padding: 0.9rem 1.5rem !important;
  background-color: var(--il-accent) !important; color: var(--white) !important;
  font-size: var(--fs-sm) !important; font-weight: 700 !important;
  text-decoration: none !important;
  transition: background-color var(--t-base), padding-left var(--t-base) !important;
}
.il-model-link:hover .il-card-cta,
.il-model-link:focus .il-card-cta { background-color: var(--il-blue) !important; padding-left: 2rem !important; }

/* ==========================================================================
   18. TESLA CAROUSEL — GB PRO NATIVE
   ========================================================================== */
.gb-carousel .gb-carousel-item { display: flex; flex-direction: column; height: 100%; }
.gb-carousel .il-model-link    { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; text-decoration: none; color: inherit; }
.gb-carousel .model-grid-container { flex: 1 1 auto; height: 100%; }

.il-carousel-header   { display: flex; align-items: center; justify-content: flex-end; margin-bottom: 1rem; }
.il-carousel-controls { display: flex; gap: var(--gap-s); align-items: center; }

.il-carousel-btn {
  display: flex !important; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background-color: var(--white) !important; color: var(--il-contrast) !important;
  border: var(--border-std) !important; border-radius: 0 !important;
  cursor: pointer; transition: background-color var(--t-base), border-color var(--t-base), color var(--t-base);
}
.il-carousel-btn:hover, .il-carousel-btn:focus { background-color: var(--il-contrast) !important; border-color: var(--il-contrast) !important; color: var(--white) !important; outline: none; }
.il-carousel-btn .gb-carousel-control-icon svg { width: 18px; height: 18px; fill: currentColor; }
.il-carousel-btn[disabled], .il-carousel-btn.is-disabled { opacity: 0.3; cursor: not-allowed; }

.il-carousel-pagination { margin-top: 1.25rem !important; margin-inline: auto !important; display: flex; justify-content: center; }
.il-carousel-pagination .gb-carousel-pagination-content { display: flex; gap: 0.4rem; align-items: center; }
.gb-carousel-pagination-bullet { width: 8px; height: 8px; border-radius: 0 !important; background-color: var(--il-border); transition: background-color var(--t-base), transform var(--t-base); }
.gb-carousel-pagination-bullet-active { background-color: var(--il-accent) !important; transform: scaleX(2); transform-origin: center; }

/* ==========================================================================
   19. QUICK SELECT GRID — BASIS
   --------------------------------------------------------------------------
   Component-API: één media query zet uitsluitend variabelen om; de
   declaraties zelf staan er maar één keer. (Kolommen blijven expliciet
   2/4 omdat de bento-modifier op vaste spans rekent.)
   ========================================================================== */
.option-brand-grid {
  --_qs-cols: 2;
  --_qs-gap:  var(--gap-s);
  --_qs-pad:  1rem 0.5rem;
  --_qs-fs:   var(--fs-body);
  display: grid !important;
  grid-template-columns: repeat(var(--_qs-cols), 1fr) !important;
  gap: var(--_qs-gap) !important;
  padding: 0 !important; margin: 0 !important; list-style: none;
}
@media (min-width: 768px) {
  .option-brand-grid {
    --_qs-cols: 4;
    --_qs-gap:  var(--gap-m);
    --_qs-pad:  1.5rem 1rem;
    --_qs-fs:   var(--fs-md);
  }
}

.option-brand-grid > * { display: flex !important; align-items: center; justify-content: center; text-align: center; min-height: 55px !important; padding: 0 !important; margin: 0 !important; box-sizing: border-box; border: none !important; background: transparent !important; position: relative; }

.option-brand-grid > * > a,
.option-brand-grid > * > .gb-headline,
.option-brand-grid > * > .gb-text {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--_qs-pad) !important; margin: 0 !important; font-weight: 700 !important;
  text-decoration: none !important; font-size: var(--_qs-fs) !important;
  box-sizing: border-box; transition: background-color var(--t-base), color var(--t-base), padding-left var(--t-base);
  border: var(--border-std); background-color: var(--white); color: var(--il-contrast);
  border-radius: 0 !important; min-height: 70px;
}
.option-brand-grid > * > .gb-text a,
.option-brand-grid > * > .gb-headline a { color: inherit !important; text-decoration: none !important; }
.option-brand-grid > * > .gb-text a::after,
.option-brand-grid > * > .gb-headline a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.option-brand-grid > *:hover > a,
.option-brand-grid > *:hover > .gb-headline,
.option-brand-grid > *:hover > .gb-text { background-color: var(--il-surface); border-color: var(--il-blue); color: var(--il-blue); padding-left: 2rem !important; }

/* ── Nav Snelkeuze wrapper ── */
nav[aria-label="Snelkeuze"] { padding-block: var(--space-m); padding-inline: var(--pad-container); border-bottom: var(--border-light); box-sizing: border-box; }

/* ==========================================================================
   20. QUICK SELECT — BENTO MODIFIER
   ========================================================================== */
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) { grid-column: 1 / -1 !important; }
@media (min-width: 768px) { nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) { grid-column: span 2 !important; } }

nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) > a,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) > .gb-text,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) > .gb-headline,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) .gb-text a,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(1) .gb-headline a { background-color: var(--il-contrast) !important; border-color: var(--il-contrast) !important; color: var(--white) !important; font-size: var(--fs-lg) !important; }

nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(2) > a,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(2) > .gb-text,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(2) > .gb-headline,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(2) .gb-text a,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(3) > a,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(3) > .gb-text,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(3) > .gb-headline,
nav[aria-label="Snelkeuze"] .option-brand-grid > *:nth-child(3) .gb-text a { background-color: var(--il-base) !important; border-color: var(--il-blue) !important; color: var(--il-contrast) !important; }

/* ==========================================================================
   21. QUICK SELECT — SPECIFICATIES MODIFIER
   ========================================================================== */
.specs-grid .option-brand-grid > * > a,
.specs-grid .option-brand-grid > * > .gb-text,
.specs-grid .option-brand-grid > * > .gb-headline { background-color: var(--il-contrast) !important; border-color: var(--il-contrast) !important; color: var(--white) !important; }
.specs-grid .option-brand-grid > *:hover > a,
.specs-grid .option-brand-grid > *:hover > .gb-text,
.specs-grid .option-brand-grid > *:hover > .gb-headline { background-color: var(--il-blue) !important; border-color: var(--il-blue) !important; color: var(--white) !important; }

/* ==========================================================================
   22. NAVIGATIE / MEGA MENU
   ========================================================================== */
.inside-navigation { position: unset; }
.inside-navigation .mega-menu { position: unset; }
.inside-navigation .mega-menu .sub-menu { width: 100%; left: 0 !important; background: transparent; box-shadow: none; }
.inside-navigation .mega-menu .sub-menu > .menu-item { left: 0 !important; opacity: 1; }
.inside-navigation .mega-menu .sub-menu a { display: inline-flex; line-height: 1.8em; }
.inside-navigation .mega-menu .sub-menu a:not(.gb-button) { font-size: unset; padding: 0; }
.inside-navigation .mega-menu .sub-menu ul { overflow: visible; opacity: 1; left: 0; position: relative; }
.inside-navigation .mega-menu .sub-menu > .menu-item ul { list-style: disc; background: unset; height: 100%; box-shadow: unset; visibility: visible; border: unset; pointer-events: auto; }
.gb-list { padding: 0; margin: 0; text-decoration: none; }
.gb-list li { list-style: none; text-decoration: none; }
.gb-list ul { list-style: none; text-decoration: none; margin-bottom: 1rem; }

/* ==========================================================================
   23. HELPERS
   ========================================================================== */
.absolute { position: absolute; }
.secondary-navigation .menu-toggle { display: block; text-align: left; }
.menu-link-item { text-decoration: none; color: inherit; transition: color var(--t-slow); }
.highlight { font-weight: 600; padding: 0 0.15em; border-radius: 0.2em; }

/* ==========================================================================
   24. BOTTOMBAR SOUNDBITES — stabiele CSS-rotatie
   --------------------------------------------------------------------------
   Alleen breed ondersteunde CSS:
   - position:absolute
   - opacity
   - transform
   - @keyframes
   - :nth-child()
   ========================================================================== */

.il-bottom-soundbites {
  position: relative;
  display: block;
  min-width: 0;
  min-height: 1.5em;
  overflow: hidden;
}

.il-bottom-soundbites > .gb-text {
  position: absolute;
  inset: 0;
  display: block !important;
  width: 100%;
  max-width: 100%;
  margin: 0;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;

  animation-name: il-soundbite-rotate;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.il-bottom-soundbites > .gb-text:nth-child(1) { animation-delay: 0s; }
.il-bottom-soundbites > .gb-text:nth-child(2) { animation-delay: 4s; }
.il-bottom-soundbites > .gb-text:nth-child(3) { animation-delay: 8s; }
.il-bottom-soundbites > .gb-text:nth-child(4) { animation-delay: 12s; }
.il-bottom-soundbites > .gb-text:nth-child(5) { animation-delay: 16s; }
.il-bottom-soundbites > .gb-text:nth-child(6) { animation-delay: 20s; }
.il-bottom-soundbites > .gb-text:nth-child(7) { animation-delay: 24s; }

@keyframes il-soundbite-rotate {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }

  2%,
  18% {
    opacity: 1;
    transform: translateY(0);
  }

  20%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/*
 * Toegankelijke fallback:
 * bij 'Verminder beweging' staat alleen het eerste bericht stil in beeld.
 * Dit sluit aan op de globale reduced-motion-regel in sectie 28.
 */
@media (prefers-reduced-motion: reduce) {
  .il-bottom-soundbites > .gb-text {
    position: absolute;
    animation: none !important;
    opacity: 0;
    transform: none;
  }

  .il-bottom-soundbites > .gb-text:first-child {
    position: relative;
    opacity: 1;
  }
}


/* ==========================================================================
   25. KLANTENVERTELLEN
   --------------------------------------------------------------------------
   Schaduwzweem nu contrast-getint (tokens) i.p.v. neutraal zwart;
   kaders via --border-soft. kv-inner stapelt via eigen MQ (uit oud 28).
   ========================================================================== */
.kv-card { background: var(--white); border: var(--border-soft); border-radius: 0 !important; padding: 1.75rem; transition: var(--t-card); }
.kv-card:hover { box-shadow: var(--shadow-l); }
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 2rem; }
.kv-stars { display: flex; gap: 0.25rem; }
.kv-star  { width: 14px; height: 14px; fill: var(--il-star); }
.kv-star.empty { opacity: 0.25; }
.kv-pill { display: inline-flex; font-size: var(--fs-xs); font-weight: 600; padding: 0.4em 0.9em; border-radius: 0 !important; background: var(--parchment); color: var(--evergreen); border: var(--border-muted); margin-bottom: 1rem; }
.kv-review-header { display: flex; justify-content: space-between; gap: var(--gap-m); }
.kv-meta  { font-size: var(--fs-xs); opacity: 0.7; }
.kv-title { font-weight: 600; margin: 0.5rem 0; }
.kv-content { line-height: 1.6; }

.kv-ring { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--gap-m); text-decoration: none; color: inherit; }
.kv-ring-shape { width: 120px; height: 120px; background: url(https://www.klantenvertellen.nl/assets/dtg/images/kv_shape.svg) center/contain no-repeat; display: flex; align-items: center; justify-content: center; }
.kv-ring-inner { background: var(--white); width: 65%; height: 65%; border-radius: 50% !important; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.8rem; }

.kv-badge { display: flex; align-items: center; gap: var(--gap-m); padding: 1rem 1.25rem; border-radius: 0 !important; border: var(--border-soft); background: var(--white); text-decoration: none; color: inherit; transition: var(--t-card); }
.kv-badge:hover { box-shadow: var(--shadow-m); transform: translateY(-2px); }
.kv-badge-score { font-size: 2rem; font-weight: 800; line-height: 1; }
.kv-badge-meta  { display: flex; flex-direction: column; gap: 0.3rem; }
.kv-badge-count { font-size: var(--fs-xs); opacity: 0.7; }
.kv-badge-logo img { height: 16px; width: auto; display: block; }

.kv-badge--sm { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.9rem; border-radius: 0 !important; border: var(--border-soft); background: var(--white); text-decoration: none; color: inherit; font-size: var(--fs-note); transition: var(--t-card); }
.kv-badge--sm:hover { box-shadow: var(--shadow-s); transform: translateY(-1px); }
.kv-badge--sm .kv-badge-score { font-weight: 800; font-size: var(--fs-md); line-height: 1; }
.kv-badge--sm .kv-stars { gap: 0.2rem; }
.kv-badge--sm .kv-star  { width: 12px; height: 12px; }
.kv-badge--sm .kv-badge-count { opacity: 0.6; font-weight: 500; }

.kv-section { padding: clamp(2rem, 4vw, 3rem) 1rem; background: var(--white); border-top: var(--border-light); border-bottom: var(--border-light); }
.kv-inner   { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: clamp(1.5rem, 3vw, 3rem); max-width: 1200px; margin: 0 auto; }
.kv-text h3 { margin: 0; max-width: 52ch; line-height: 1.25; }
.kv-badge-wrap { justify-self: end; }
@media (max-width: 767px) {
  .kv-inner { grid-template-columns: 1fr; row-gap: var(--gap-xl); }
  .kv-badge-wrap { justify-self: start; }
}

/* ==========================================================================
   26. SAFE AREA / TOP BAR
   ========================================================================== */
.top-bar { padding-top: var(--safe-top); background-color: var(--il-topbar-bg); }
.ios-safearea-bg { position: fixed; top: 0; left: 0; width: 100%; height: var(--safe-top); background-color: var(--il-safearea-bg); pointer-events: none; z-index: -9999; }

/* ==========================================================================
   27. CANVAS PREVIEW HELPERS
   ========================================================================== */
.preview-wrapper  { max-width: var(--content-max); margin: 0 auto; background: var(--white); padding: 3rem; }
.preview-section  { margin-bottom: 3rem; }
.preview-section-mt { margin-top: 4rem; }
.preview-header   { text-align: center; margin-bottom: 2rem; }
.preview-title    { color: var(--il-contrast); font-weight: 800; margin-bottom: 0.5rem; font-size: 2rem; }
.preview-subtitle { color: var(--il-contrast); font-weight: 600; margin-top: 0; }

/* ==========================================================================
   28. ACCESSIBILITY / MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
.il-qs-link:focus-visible, .il-model-link:focus-visible { outline: 3px solid var(--il-accent); outline-offset: 2px; z-index: 2; position: relative; }

/* ==========================================================================
   29. FOOTER — DESKTOP GRID + MOBILE ACCORDION
   ========================================================================== */
.il-footer { background-color: var(--white); color: var(--il-contrast); border-top: var(--border-accent-top); }

.il-footer-inner { display: grid; grid-template-columns: repeat(4, 1fr); max-width: var(--content-max); margin-inline: auto; padding-inline: var(--pad-container); }

.il-footer-col { padding: 2.5rem 1.5rem; border-right: var(--border-line); display: flex; flex-direction: column; gap: 2rem; }
.il-footer-col:last-child { border-right: none; }

.il-footer-desktop-links { display: flex; flex-direction: column; gap: 0.2rem; }

.il-footer-heading,
.il-footer .il-footer-heading { font-size: var(--fs-xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.12em !important; color: var(--il-accent) !important; margin: 0 0 0.875rem 0 !important; max-width: none; }

.il-footer-body,
.il-footer .il-footer-body { font-size: var(--fs-sm); color: var(--il-contrast); line-height: 1.65; margin: 0; max-width: none; }

.il-footer .wp-block-navigation__container,
.il-footer .wp-block-navigation { display: flex !important; flex-direction: column !important; gap: var(--gap-xs) !important; }
.il-footer .wp-block-navigation-item a,
.il-footer .wp-block-navigation-item__content { color: var(--il-contrast) !important; text-decoration: none !important; font-size: var(--fs-sm) !important; line-height: 1.6; padding: 0 !important; transition: color var(--t-fast); }
.il-footer .wp-block-navigation-item a:hover { color: var(--il-blue) !important; }

.il-footer-address { font-style: normal; display: flex; flex-direction: column; gap: 0.15rem; }
.il-footer-address p,
.il-footer-address .gb-headline-text { font-size: var(--fs-sm); color: var(--il-contrast); margin: 0; max-width: none; }

.il-footer-maps-link { display: inline-flex; align-items: center; gap: var(--gap-xs); margin-top: 0.75rem; font-size: var(--fs-note); font-weight: 600; color: var(--il-accent) !important; text-decoration: none !important; transition: color var(--t-fast); }
.il-footer-maps-link:hover { color: var(--il-blue) !important; }
.il-footer-maps-link svg { flex-shrink: 0; }

.il-footer-col--contact { gap: var(--gap-xl); }
.il-footer-col--contact .gb-headline-text a { color: var(--il-contrast); text-decoration: none; transition: color var(--t-fast); }
.il-footer-col--contact .gb-headline-text a:hover { color: var(--il-blue); }
.il-footer-note { font-size: var(--fs-xs); color: var(--il-text-muted); margin-left: 0.2rem; }

.il-footer-bovag { margin-top: auto; padding-top: 1rem; }
.il-footer-bovag img { width: 130px !important; height: auto !important; filter: none; opacity: 1; }

.il-footer-bar { background-color: var(--il-accent); padding: 0.875rem var(--pad-container); text-align: center; }
.il-footer-bar .gb-headline-text { font-size: var(--fs-note); color: var(--white); margin: 0; max-width: none; }
.il-footer-bar a { color: var(--white); text-decoration: underline; }

.il-footer-accordion { display: none; }

@media (max-width: 1024px) {
  .il-footer-inner { grid-template-columns: repeat(2, 1fr); }
  .il-footer-col { border-right: var(--border-line); border-bottom: var(--border-line); }
  .il-footer-col:nth-child(2n) { border-right: none; }
  .il-footer-col:nth-last-child(-n+2) { border-bottom: none; }
}

@media (max-width: 767px) {
  .il-footer-inner { grid-template-columns: 1fr; padding-inline: 0; }
  .il-footer-col { padding: 0; border-right: none; border-bottom: none; gap: 0; }
  .il-footer-col--contact { gap: 0; padding: 1.25rem var(--pad-container); border-bottom: var(--border-line); }
  .il-footer-desktop-links { display: none; }
  .il-footer-accordion { display: block; }
  .il-footer-col--contact .il-footer-desktop-links { display: flex; }
  .il-footer .il-footer-acc-item { border-bottom: var(--border-line) !important; padding: 0 !important; margin: 0 !important; background: transparent !important; }
  .il-footer .il-footer-acc-toggle { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 1rem var(--pad-container) !important; cursor: pointer; color: var(--il-contrast) !important; font-weight: 600; font-size: var(--fs-sm); background: transparent !important; }
  .il-footer .il-footer-acc-label { font-size: var(--fs-sm); font-weight: 600; color: var(--il-contrast); letter-spacing: 0.03em; }
  .il-footer .il-footer-acc-icon svg { width: 1rem !important; height: 1rem !important; color: var(--il-line-strong); }
  .il-footer .gb-accordion__item.gb-block-is-current .il-footer-acc-icon svg { color: var(--il-accent); }
  .il-footer .gb-accordion__content { padding: 0.25rem var(--pad-container) 1.25rem !important; }
  .il-footer .gb-accordion__content .wp-block-navigation__container,
  .il-footer .gb-accordion__content .wp-block-navigation { gap: var(--gap-s) !important; }
  .il-footer-bovag { margin-top: 1.25rem; padding-top: 0; }
}

/* ==========================================================================
   30. HERO SECTIE — DONKERE ACHTERGROND
   ========================================================================== */
.il-hero-section { background-color: var(--il-contrast); border-bottom: var(--border-accent-top); }

.il-hero-section .hero-intro-grid { display: grid; grid-template-columns: 1fr auto; gap: clamp(2rem, 5vw, 4rem); align-items: center; margin-bottom: 0; padding-block: 0; }

.il-hero-section .hero-intro-text h2,
.il-hero-section [class*="gb-headline"] h2,
.il-hero-section h2 { color: var(--white) !important; font-size: var(--fs-h2); font-weight: 700; margin: 0 0 var(--space-xs) 0; line-height: var(--lh-tight); max-width: 52ch; }

.il-hero-section .hero-intro-text p,
.il-hero-section p { color: color-mix(in srgb, var(--white) 65%, transparent); font-size: var(--fs-lead); margin: 0; max-width: 55ch; line-height: var(--lh-normal); }

.il-hero-kv { flex-shrink: 0; display: flex; align-items: center; justify-content: center; align-self: center; }
.il-hero-kv > * { max-width: 180px; }
.il-hero-kv .kv-ring { color: var(--white); }
.il-hero-kv .kv-ring-inner { background: var(--il-contrast); color: var(--white); }
.il-hero-kv a { color: var(--il-contrast) !important; transition: color var(--t-fast); }
.il-hero-kv a:hover { color: var(--il-blue) !important; }
.il-hero-kv p, .il-hero-kv span:not(.kv-star) { color: var(--il-contrast); }
.il-hero-kv > *, .il-hero-kv .kv-badge, .il-hero-kv .kv-card, .il-hero-kv [class*="kv-"] { border-radius: 0 !important; }
.il-hero-kv .kv-ring-shape, .il-hero-kv .kv-ring-inner { border-radius: 50% !important; }

@media (max-width: 767px) {
  .il-hero-section .hero-intro-grid { grid-template-columns: 1fr; gap: var(--space-m); }
  .il-hero-kv { flex-direction: row; gap: var(--space-m); width: 100%; justify-content: center; padding: var(--space-xs) var(--space-m); }
  .il-hero-kv .kv-count, .il-hero-kv .kv-read-link { display: none; }
}

/* ==========================================================================
   31. PRODUCT DETAIL PAGINA
   --------------------------------------------------------------------------
   - detail-container: min(100%, 320px) in de minmax → mobiele 1fr-MQ weg.
   - acc-body lijsten: column-width i.p.v. columns:2 → kolommen klappen
     zelf naar 1 op smalle schermen, MQ weg.
   - Mobiele kleur-overrides (uit oud sectie 28) staan nu hier bij het
     component waar ze horen.
   ========================================================================== */
.product-detail-block { display: block; }

.product-kv-badge { margin-bottom: var(--space-s); }

.product-anchor-links--wrapper {
  position: sticky !important;
  top: 0 !important;
  z-index: var(--z-sticky) !important;
  background: var(--white) !important;
  border-bottom: var(--border-light) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 var(--pad-container) !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.product-anchor-links--wrapper::-webkit-scrollbar { display: none; }

.product-anchor-links--wrapper ol {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
}

.product-anchor-links--wrapper ol::after { display: none !important; }

.product-anchor-links--wrapper li { flex-shrink: 0; }

.product-anchor-links--wrapper a {
  display: block !important;
  padding: var(--_anchor-pad, 0.75rem 1.25rem) !important;
  font-size: var(--_anchor-fs, var(--fs-sm)) !important;
  font-weight: 600 !important;
  color: var(--il-text-muted) !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  transition: color var(--t-fast), border-color var(--t-fast) !important;
  white-space: nowrap !important;
  letter-spacing: var(--letter-spacing) !important;
}
.product-anchor-links--wrapper a:hover,
.product-anchor-links--wrapper a:focus-visible {
  color: var(--il-contrast) !important;
  border-bottom-color: var(--il-border-light) !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  outline: none !important;
}
.product-anchor-links--wrapper a.is-active {
  color: var(--il-accent) !important;
  border-bottom-color: var(--il-accent) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product-detail-block .product-detail-section { margin-bottom: 0; padding-block: var(--space-m); border-bottom: var(--border-light); }
.product-detail-block .product-detail-section:last-child { border-bottom: none; }

.product-detail-block .detail-container {
  padding: var(--space-m) 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 0 var(--space-l);
}

.product-detail-block .detail-container h3,
.product-detail-block .product-detail-section > h3 { font-size: var(--fs-xs) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 0.1em !important; color: var(--il-accent) !important; margin: 0 0 var(--space-s) 0 !important; padding-bottom: var(--space-xs); border-bottom: var(--border-accent-top); }

.product-detail-block .detail-container .row { display: grid; grid-template-columns: minmax(120px, 45%) 1fr; gap: var(--gap-xs) var(--gap-s); padding: 0.4rem 0; border-bottom: var(--border-light); font-size: var(--fs-sm); align-items: baseline; }
.product-detail-block .detail-container .row:last-child { border-bottom: none; }
.product-detail-block .detail-container .row .label { color: var(--il-text-muted); font-weight: 500; }
.product-detail-block .detail-container .row .value { color: var(--il-contrast); font-weight: 600; }
.product-detail-block .detail-container .row .value a { color: var(--il-accent); text-decoration: none; }
.product-detail-block .detail-container .row .value a:hover { color: var(--il-blue); text-decoration: underline; }

/* ── Kentekenplaat ── */
.product-detail-block .detail-container .row .value.kenteken {
  background-image: none !important;
  background-color: transparent !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
}

.etr-plate {
  display: inline-flex;
  overflow: hidden;
  border: 3px solid var(--il-contrast);
  border-radius: 6px;
  background: var(--il-star);
  height: 36px;
  width: fit-content;
  min-width: 100px;
  max-width: 150px;
  box-sizing: border-box;
  vertical-align: middle;
  flex-shrink: 0;
}

.etr-plate__strip {
  width: 26px;
  min-width: 26px;
  height: 100%;
  background-color: var(--il-accent);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding-bottom: 3px;
  box-sizing: border-box;
  flex-shrink: 0;
}

.etr-plate__country {
  color: var(--white);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  line-height: 1;
}

.etr-plate__text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 900;
  color: var(--il-contrast);
  letter-spacing: -0.5px;
  text-transform: uppercase;
  padding-inline: 4px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, monospace;
}

.product-detail-block .description { font-size: var(--fs-body); line-height: var(--lh-relaxed); color: var(--il-contrast); padding: var(--space-m) 0; }
.product-detail-block .description p { max-width: 70ch; }

/* column-width: kolommen ontstaan alleen als er ruimte voor is */
.product-detail-block .acc-body ul,
.product-detail-block .acc-body ol { column-width: 18rem; column-gap: var(--space-l); }
.product-detail-block .acc-body li { break-inside: avoid; padding: 0.2em 0; font-size: var(--fs-sm); color: var(--il-contrast); border-bottom: var(--border-light); }

.product-detail-block details { margin: 0; padding: 0; border-bottom: var(--border-light); }
.product-detail-block details > summary { padding: var(--space-xs) 0; background: transparent; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--il-contrast); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; transition: color var(--t-fast); }
.product-detail-block details > summary:hover,
.product-detail-block details > summary:focus { color: var(--il-accent); background: transparent; outline: none; }
.product-detail-block details > summary::after { content: ""; width: 0.55em; height: 0.55em; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-25%) rotate(45deg); transition: transform var(--t-base); opacity: 0.6; right: 0; }
.product-detail-block details[open] > summary::after { transform: translateY(25%) rotate(-135deg); opacity: 1; }
.product-detail-block .acc-body { padding: var(--space-xs) 0 var(--space-m); }

@media (max-width: 767px) {
  .product-anchor-links--wrapper { padding-inline: 0; }
  .product-anchor-links--wrapper a {
    --_anchor-pad: 0.65rem 0.75rem;
    --_anchor-fs: 0.7rem;
    /* Kleur-override mobiel (voorheen los in 'RESPONSIVE' sectie) */
    color: var(--accent, var(--il-contrast)) !important;
  }
  .product-anchor-links--wrapper a.is-active { color: var(--base-3, var(--white)) !important; }
  .product-detail-block .detail-container .row { grid-template-columns: 1fr 1fr; font-size: var(--fs-xs); }
  .product-detail-block h3,
  .product-detail-block :is(h2,h3,h4)[id],
  .product-detail-block details > summary { color: var(--accent, var(--il-contrast)) !important; }
}

/* ==========================================================================
   32. KV INTEGRATIE — PRODUCTPAGINA
   ========================================================================== */
.product-kv-badge { display: flex; align-items: center; gap: var(--gap-m); margin-bottom: var(--space-s); }
.product-kv-badge .kv-badge--sm { border: var(--border-light); background: var(--il-surface); font-size: var(--fs-sm); padding: 0.6rem 1.25rem; gap: var(--gap-m); }
.product-kv-badge .kv-badge--sm .kv-badge-score { color: var(--il-contrast); font-size: var(--fs-h4); font-weight: 700; }
.product-kv-badge .kv-badge--sm .kv-star { width: 16px; height: 16px; }
.product-kv-badge .kv-badge--sm .kv-badge-count { font-size: var(--fs-sm); opacity: 0.8; }
.product-kv-badge .kv-badge--sm:hover { border-color: var(--il-accent); background: var(--white); }

.product-kv-reviews { margin-top: var(--space-l); padding-top: var(--space-l); border-top: var(--border-light); }
.product-kv-reviews > h2 { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--il-accent); margin: 0 0 var(--space-m) 0; padding-bottom: var(--space-xs); border-bottom: var(--border-accent-top); }
.product-kv-reviews .kv-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--gap-l); }
.product-kv-reviews .kv-card { border: var(--border-light); border-top: var(--border-contrast-top); padding: var(--space-m); background: var(--white); }
.product-kv-reviews .kv-card:hover { box-shadow: var(--shadow-s); border-top-color: var(--il-accent); }
.product-kv-reviews .kv-review-header { margin-bottom: var(--space-xs); }
.product-kv-reviews .kv-review-header strong { font-size: var(--fs-sm); color: var(--il-contrast); }
.product-kv-reviews .kv-meta { font-size: var(--fs-xs); color: var(--il-text-muted); margin-top: 2px; }
.product-kv-reviews .kv-rating { display: flex; align-items: center; gap: var(--gap-xs); }
.product-kv-reviews .kv-rating-number { font-size: var(--fs-lg); font-weight: 700; color: var(--il-contrast); line-height: 1; }
.product-kv-reviews .kv-pill { font-size: var(--fs-xs); background: color-mix(in srgb, var(--il-success) 10%, var(--white)); color: var(--il-success); border-color: color-mix(in srgb, var(--il-success) 30%, var(--white)); padding: 0.25em 0.75em; margin-bottom: var(--gap-s); }
.product-kv-reviews .kv-title { font-size: var(--fs-sm); font-weight: 600; color: var(--il-contrast); margin: var(--gap-xs) 0; }
.product-kv-reviews .kv-content { font-size: var(--fs-sm); color: var(--il-text-muted); line-height: var(--lh-normal); }
.product-kv-reviews .kv-summary { border-top: var(--border-accent-top); margin-bottom: var(--space-m); padding: var(--space-m); background: var(--il-surface); display: flex; align-items: center; justify-content: space-between; gap: var(--gap-m); }
.product-kv-reviews .kv-summary strong { font-size: var(--fs-sm); color: var(--il-contrast); }
.product-kv-reviews .kv-summary-score { font-size: var(--fs-h3); font-weight: 700; color: var(--il-contrast); display: flex; align-items: baseline; gap: var(--gap-xs); }
.product-kv-reviews .kv-summary-score span { font-size: var(--fs-xs); font-weight: 400; color: var(--il-text-muted); }

.kv-reviews-cta { display: inline-flex; align-items: center; margin-top: var(--space-m); padding: 0.75rem 1.5rem; background: var(--il-accent); color: var(--white) !important; font-size: var(--fs-sm); font-weight: 700; text-decoration: none !important; transition: background var(--t-base); }
.kv-reviews-cta:hover { background: var(--il-blue); }

@media (max-width: 767px) {
  .product-kv-reviews .kv-summary { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   33. DLV BLOCK — CONSISTENTE STIJL
   ========================================================================== */
.product-detail-block .dlv-block > h2,
.product-detail-block .dlv-block > h3,
.product-detail-block .dlv-block__title {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--il-accent) !important;
  margin: 0 0 var(--space-s) 0 !important;
  padding-bottom: var(--space-xs) !important;
  border-bottom: var(--border-accent-top) !important;
  background: none !important;
  line-height: var(--lh-tight) !important;
}

.product-detail-block .dlv-block {
  padding-block: var(--space-m);
  border-bottom: var(--border-light);
}

.product-detail-block .dlv-block:last-child { border-bottom: none; }

/* ==========================================================================
   34. VEILIGHEID / OPTIES ACCORDIONS
   --------------------------------------------------------------------------
   !important blijft hier bewust staan: dit blok vecht tegen LBV-plugin-CSS.
   Kolommen via column-width → drie mobiele MQ's vervallen.
   ========================================================================== */
.product-detail-section--accordions { display: block !important; }

.product-detail-section--accordions > h3 {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--il-accent) !important;
  margin: 0 0 var(--space-s) !important;
  padding-bottom: var(--space-xs) !important;
  border-bottom: var(--border-accent-top) !important;
  background: none !important;
}

.product-detail-section--accordions details {
  display: block !important;
  border-top: var(--border-light) !important;
  border-bottom: none !important;
  border-left: none !important;
  border-right: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

.product-detail-section--accordions details:last-child {
  border-bottom: var(--border-light) !important;
}

.product-detail-section--accordions details > summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: var(--space-s) 0 !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  color: var(--il-contrast) !important;
  cursor: pointer !important;
  list-style: none !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  transition: color var(--t-fast) !important;
  user-select: none !important;
}

.product-detail-section--accordions details > summary::-webkit-details-marker,
.product-detail-section--accordions details > summary::marker {
  display: none !important;
}

.product-detail-section--accordions details > summary::after {
  content: "" !important;
  display: inline-block !important;
  width: 0.45em !important;
  height: 0.45em !important;
  border-right: 2px solid var(--il-contrast) !important;
  border-bottom: 2px solid var(--il-contrast) !important;
  transform: rotate(45deg) !important;
  transition: transform var(--t-base) !important;
  flex-shrink: 0 !important;
  margin-left: auto !important;
}

.product-detail-section--accordions details[open] > summary::after {
  transform: rotate(-135deg) !important;
}

.product-detail-section--accordions details > summary:hover {
  color: var(--il-accent) !important;
}

.product-detail-section--accordions details .lbv-block-content,
.product-detail-section--accordions details .acc-body {
  padding: var(--space-xs) 0 var(--space-m) !important;
  column-width: 18rem;
  column-gap: var(--space-l);
}

.product-detail-section--accordions details li {
  break-inside: avoid;
  padding: 0.2em 0;
  font-size: var(--fs-sm);
  list-style: disc;
  margin-left: 1.25em;
}

/* ── Opties lijst binnen accordion ── */
.il-opties-lijst {
  list-style: none;
  margin: 0;
  padding: var(--space-xs) 0 var(--space-m);
  column-width: 18rem;
  column-gap: var(--space-l);
}

.il-opties-lijst li {
  break-inside: avoid;
  padding: 0.3em 0;
  font-size: var(--fs-sm);
  color: var(--il-contrast);
  border-bottom: var(--border-light);
  padding-left: 1em;
  position: relative;
}

.il-opties-lijst li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--il-accent);
}

.product-detail-section--accordions .il-opties-lijst {
  list-style: none !important;
  margin: 0 !important;
  padding: var(--space-xs) 0 var(--space-m) !important;
  column-width: 18rem;
  column-gap: var(--space-l);
}

.product-detail-section--accordions .il-opties-lijst li {
  break-inside: avoid;
  padding: 0.3em 0 0.3em 1em !important;
  font-size: var(--fs-sm) !important;
  color: var(--il-contrast) !important;
  border-bottom: var(--border-light) !important;
  list-style: none !important;
  position: relative;
}

.product-detail-section--accordions .il-opties-lijst li::before {
  content: "\2013" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--il-accent) !important;
}

/* Laad meer knop */
button.ilc-kv-load-more {
  border: none;
  cursor: pointer;
  font-family: inherit;
}

button.ilc-kv-load-more:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ==========================================================================
   35. KV COMPACT SAMENVATTING
   ========================================================================== */
.product-kv-reviews--compact {
  border-top: var(--border-light) !important;
  padding-block: var(--space-l) !important;
  margin-top: var(--space-m) !important;
}

.kv-product-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  flex-wrap: wrap;
}

.kv-product-summary__score {
  display: flex;
  align-items: center;
  gap: var(--gap-m);
}

.kv-product-summary__score .kv-rating-number {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--il-contrast);
  line-height: 1;
}

.kv-product-summary__label {
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
}

@media (max-width: 767px) {
  .kv-product-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--gap-m);
  }
}

/* KV pill in footer */
.kv-footer-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-s);
  margin-top: var(--gap-s);
  font-size: var(--fs-xs);
  color: var(--il-text-muted);
}

.kv-footer-pill__score {
  font-weight: 700;
  color: var(--il-contrast);
  font-size: var(--fs-sm);
}

.kv-footer-pill .kv-stars { gap: 0.15rem; }
.kv-footer-pill .kv-star  { width: 11px; height: 11px; }
.kv-footer-pill__label { opacity: 0.7; }

/* ==========================================================================
   36. KV PAGER
   ========================================================================== */
.kv-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: var(--border-light);
}

.kv-pager__btn {
  display: inline-flex;
  align-items: center;
  padding: 0.65rem 1.25rem;
  background: var(--il-accent);
  color: var(--white) !important;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none !important;
  transition: background var(--t-base);
}

.kv-pager__btn:hover { background: var(--il-blue); }

.kv-pager__info {
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
  flex: 1;
  text-align: center;
}

.kv-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  flex-wrap: wrap;
  margin-bottom: var(--space-m);
}

.kv-summary__left {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

.kv-summary-score {
  display: flex;
  align-items: baseline;
  gap: var(--gap-s);
  flex-wrap: wrap;
}

.kv-summary-score__num {
  font-size: var(--fs-h1);
  font-weight: 800;
  color: var(--il-contrast);
  line-height: 1;
}

.kv-summary-score__denom {
  font-size: var(--fs-h3);
  color: var(--il-text-muted);
}

.kv-summary-score__count {
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
}

@media (max-width: 767px) {
  .kv-pager { flex-direction: column; align-items: stretch; }
  .kv-pager__btn { text-align: center; justify-content: center; }
  .kv-pager__info { text-align: center; }
  .kv-summary { flex-direction: column; }
}

/* ==========================================================================
   37. BRAND CAROUSEL — Pure shortcode rendering ([ilectric_brand_carousel])
   --------------------------------------------------------------------------
   Samengevoegd uit de twee eerdere duplicaat-secties; de scroll-snap
   variant is behouden als canonieke versie.

   Layout strategie:
   - Mobiel  (<600px):    horizontal scroll-snap, 1 kaart prominent in beeld,
                          edge-to-edge bleed met safe-area-respect
   - Tablet/desktop:      intrinsiek auto-fit grid (2 → 4 kolommen vanzelf)
   ========================================================================== */
.il-bc {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

.il-bc__header {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.il-bc__title {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--il-contrast);
  margin: 0;
  line-height: var(--lh-tight);
  max-width: none;
}

.il-bc__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

.il-bc__title a:hover { color: var(--il-accent); }

.il-bc__title strong { font-weight: 800; }

.il-bc__intro {
  font-size: var(--fs-body);
  color: var(--il-text-muted);
  margin: 0;
  max-width: 60ch;
}

/* Grid: auto-fit vervangt de vaste 2/4-koloms breakpoints */
.il-bc__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--gap-l);
  align-items: stretch;
}

@media (max-width: 599px) {
  .il-bc__grid {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--pad-container));
    padding-inline: max(var(--pad-container), var(--safe-left)) max(var(--pad-container), var(--safe-right));
    scroll-padding-inline: max(var(--pad-container), var(--safe-left));
  }

  .il-bc__grid::-webkit-scrollbar { display: none; }

  .il-bc__card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    min-width: 0;
  }
}

.il-bc__card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: var(--border-light);
  border-top: var(--border-contrast-top);
  overflow: hidden;
  transition: box-shadow var(--t-card), border-color var(--t-card);
}

.il-bc__card:hover {
  box-shadow: var(--shadow-m);
  border-color: var(--il-accent);
}

.il-bc__card-title {
  display: block;
  padding: 0.75rem 1rem;
  background: var(--white);
  border-bottom: 3px solid var(--il-accent);
  text-decoration: none;
  text-align: center;
  flex-shrink: 0;
}

.il-bc__card-title span {
  display: block;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--il-accent);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: var(--lh-tight);
  max-width: none;
}

.il-bc__card-image {
  display: block;
  width: 100%;
  aspect-ratio: var(--ratio-photo);
  overflow: hidden;
  background: var(--il-surface);
  flex-shrink: 0;
}

.il-bc__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--t-zoom);
}

.il-bc__card:hover .il-bc__card-image img { transform: scale(1.03); }

.il-bc__card-body {
  flex: 1 1 auto;
  padding: 1rem;
  border-top: 1px solid var(--il-surface);
  display: flex;
  flex-direction: column;
  gap: var(--gap-m);
}

.il-bc__card-desc {
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
  line-height: 1.5;
  margin: 0;
  max-width: none;
}

.il-bc__card-variants {
  list-style: none;
  margin: 0;
  padding: var(--gap-s) 0 0 0;
  border-top: var(--border-light);
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-xs);
}

.il-bc__card-variants li { margin: 0; padding: 0; list-style: none; }

.il-bc__card-variants a {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.65rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  color: var(--il-text-muted);
  background: var(--il-surface);
  border: var(--border-light);
  text-decoration: none;
  letter-spacing: var(--letter-spacing);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.il-bc__card-variants a:hover,
.il-bc__card-variants a:focus-visible {
  background: var(--il-contrast);
  border-color: var(--il-contrast);
  color: var(--white);
  outline: none;
}

.il-bc__card-cta {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.9rem 1.5rem;
  background: var(--il-accent);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  letter-spacing: var(--letter-spacing);
  flex-shrink: 0;
  transition: background var(--t-base), padding-left var(--t-base);
}

.il-bc__card-cta:hover,
.il-bc__card-cta:focus-visible {
  background: var(--il-blue);
  padding-left: 2rem;
  color: var(--white);
  outline: none;
}

/* ==========================================================================
   38. MOBILE HORIZONTAL SCROLL — Generieke modifier
   --------------------------------------------------------------------------
   Voeg `il-scroll-mobile` toe als extra class op een container.
   Onder 600px wordt de eerste lijst/grid binnen die container omgezet
   naar horizontale scroll-snap met edge-to-edge bleed en safe-area.
   Kaartbreedte stuurbaar via --_card-w op de container.
   ========================================================================== */
@media (max-width: 599px) {

  .il-scroll-mobile { --_card-w: 85%; }

  .il-scroll-mobile ul.products,
  .il-scroll-mobile .wc-block-grid__products,
  .il-scroll-mobile .wp-block-woocommerce-product-collection ul,
  .il-scroll-mobile .gb-grid-wrapper,
  .il-scroll-mobile .gb-query > .gb-grid-wrapper,
  .il-scroll-mobile .recent-products {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: var(--gap-l);
    margin-inline: calc(-1 * var(--pad-container));
    padding-inline: max(var(--pad-container), var(--safe-left)) max(var(--pad-container), var(--safe-right));
    scroll-padding-inline: max(var(--pad-container), var(--safe-left));
    list-style: none;
    width: auto !important;
    max-width: none !important;
  }

  .il-scroll-mobile ul.products::-webkit-scrollbar,
  .il-scroll-mobile .wc-block-grid__products::-webkit-scrollbar,
  .il-scroll-mobile .wp-block-woocommerce-product-collection ul::-webkit-scrollbar,
  .il-scroll-mobile .gb-grid-wrapper::-webkit-scrollbar,
  .il-scroll-mobile .recent-products::-webkit-scrollbar {
    display: none;
  }

  .il-scroll-mobile ul.products > li,
  .il-scroll-mobile .wc-block-grid__products > li,
  .il-scroll-mobile .wp-block-woocommerce-product-collection ul > li,
  .il-scroll-mobile .gb-grid-wrapper > *,
  .il-scroll-mobile .recent-products > .product {
    flex: 0 0 var(--_card-w) !important;
    width: var(--_card-w) !important;
    max-width: var(--_card-w) !important;
    scroll-snap-align: start;
    min-width: 0;
    margin: 0 !important;
  }

  /* Sectie-header (h2/h3) schuift niet mee in de scrollbalk */
  .il-scroll-mobile > h1,
  .il-scroll-mobile > h2,
  .il-scroll-mobile > h3,
  .il-scroll-mobile > .gb-text,
  .il-scroll-mobile > [class*="gb-headline"],
  .il-scroll-mobile > p {
    flex-shrink: 0;
    width: 100%;
  }
}

/* ==========================================================================
   39. GRAVITY FORMS — OFFERTEFORMULIER (Orbital · Unified 2026 Expert Style)
   --------------------------------------------------------------------------
   Enige Gravity Forms-sectie (oude generieke sectie is verwijderd; deze
   verving die al). Stuurt de Orbital Theme Framework via de officiële
   CSS-API (--gf-*), gemapt op de --il-* designtokens.
   - Element-overrides alleen waar de API geen variabele biedt
     (voortgangsbalk, secties, consent, validatie, knop-microinteractie).
   - Scope: form 1. Site-breed? Vervang #gform_wrapper_1 door
     .gform-theme--framework in het variabelenblok hieronder.
   Vereist: Orbital theme actief op dit form (markupVersion 2).
   ========================================================================== */

/* ── 39.1  CSS-API MAPPING (variabelen → --il-tokens) ──────────────────────
   De drievoudige selector matcht Orbital's auto-gegenereerde scope. */
#gform_wrapper_1.gform-theme--framework,
#gform_wrapper_1[data-form-index="0"].gform-theme,
[data-parent-form="1_0"] {

  /* Kleur — primair stuurt focus, radio/checkbox-accent, links */
  --gf-color-primary:            var(--il-accent);
  --gf-color-primary-rgb:        0, 103, 195;
  --gf-color-primary-contrast:   var(--white);
  --gf-color-primary-darker:     var(--il-blue);
  --gf-color-primary-lighter:    var(--il-surface-blue);

  /* Controls (inputs / selects / textarea) */
  --gf-ctrl-bg-color:            var(--white);
  --gf-ctrl-color:               var(--il-contrast);
  --gf-ctrl-border-color:        var(--il-border-light);
  --gf-ctrl-border-color-hover:  var(--il-blue);
  --gf-ctrl-border-color-focus:  var(--il-accent);
  --gf-ctrl-radius:              0;
  --gf-ctrl-size:                var(--gf-ctrl-size-md);
  --gf-ctrl-placeholder-color:   var(--il-text-muted);

  /* Labels & beschrijvingen */
  --gf-ctrl-label-color-primary:    var(--il-contrast);
  --gf-ctrl-label-color-secondary:  var(--il-text-muted);
  --gf-ctrl-desc-color:             var(--il-text-muted);

  /* Radius globaal (Orbital) */
  --gf-radius:                   0;

  /* Layout-ritme — sluit aan op --space-* / --gap-* */
  --gf-form-gap-y:               var(--space-s);
  --gf-field-gap-x:              var(--gap-m);
  --gf-field-gap-y:              var(--gap-s);

  /* Validatie */
  --gf-ctrl-color-invalid:       var(--il-error);
  --gf-ctrl-border-color-invalid:var(--il-error);
}

/* ── 39.2  TYPOGRAFIE & 16px-REGEL (voorkomt iOS zoom-on-focus) ────────────
   Component-API: mobiel 16px hard, desktop schaalt terug naar token. */
#gform_wrapper_1 .gfield_label,
#gform_wrapper_1 legend.gfield_label {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  color: var(--il-contrast);
}

#gform_wrapper_1 .gform_fields input,
#gform_wrapper_1 .gform_fields select,
#gform_wrapper_1 .gform_fields textarea {
  font-size: var(--_ctrl-fs, 16px);   /* nooit < 16px op mobiel → geen auto-zoom */
  line-height: var(--lh-normal);
  color: var(--il-contrast);
}
@media (min-width: 768px) {
  #gform_wrapper_1 { --_ctrl-fs: var(--fs-md); }
}

#gform_wrapper_1 .gfield_required { color: var(--il-text-muted); font-weight: 500; }

/* ── 39.3  CONTROLS — vlakke, scherpe iLectric-look ── */
#gform_wrapper_1 .ginput_container input[type="text"],
#gform_wrapper_1 .ginput_container input[type="email"],
#gform_wrapper_1 .ginput_container input[type="tel"],
#gform_wrapper_1 .ginput_container input[type="number"],
#gform_wrapper_1 .ginput_container textarea,
#gform_wrapper_1 .ginput_container select {
  background: var(--white);
  border: var(--border-light);
  border-radius: 0;
  padding: 0.85rem 1rem;
  box-shadow: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

#gform_wrapper_1 .ginput_container input:hover,
#gform_wrapper_1 .ginput_container textarea:hover,
#gform_wrapper_1 .ginput_container select:hover { border-color: var(--il-blue); }

#gform_wrapper_1 .ginput_container input:focus,
#gform_wrapper_1 .ginput_container textarea:focus,
#gform_wrapper_1 .ginput_container select:focus {
  border-color: var(--il-accent);
  outline: 3px solid color-mix(in srgb, var(--il-accent) 25%, transparent);
  outline-offset: 0;
  box-shadow: none;
}

#gform_wrapper_1 textarea { min-height: 8rem; resize: vertical; }

/* Custom select-pijl in merk-kleur (vervangt browser-default) */
#gform_wrapper_1 .ginput_container select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--il-accent) 50%),
    linear-gradient(135deg, var(--il-accent) 50%, transparent 50%);
  background-position:
    calc(100% - 1.25rem) center,
    calc(100% - 1rem) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 2.5rem;
}

/* ── 39.4  RADIO & CHECKBOX — vierkant, accent-fill (radio = rond) ── */
#gform_wrapper_1 .gfield_radio,
#gform_wrapper_1 .gfield_checkbox {
  display: flex;
  flex-direction: column;
  gap: var(--gap-s);
}

#gform_wrapper_1 .gchoice {
  display: flex;
  align-items: center;
  gap: var(--gap-s);
}

#gform_wrapper_1 .gfield_radio input[type="radio"],
#gform_wrapper_1 .gfield_checkbox input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  margin: 0;
  flex-shrink: 0;
  border: var(--border-std);
  background: var(--white);
  border-radius: 0;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
#gform_wrapper_1 .gfield_radio input[type="radio"] { border-radius: 50%; }

#gform_wrapper_1 .gfield_radio input[type="radio"]::before,
#gform_wrapper_1 .gfield_checkbox input[type="checkbox"]::before {
  content: "";
  width: 0.65rem;
  height: 0.65rem;
  transform: scale(0);
  transition: transform 0.12s ease-in-out;
  background: var(--il-accent);
}
#gform_wrapper_1 .gfield_radio input[type="radio"]::before { border-radius: 50%; }
#gform_wrapper_1 .gfield_checkbox input[type="checkbox"]::before {
  /* vinkje i.p.v. blokje */
  width: 0.5rem; height: 0.8rem;
  background: transparent;
  border-right: 2px solid var(--il-accent);
  border-bottom: 2px solid var(--il-accent);
  transform: scale(0) rotate(45deg);
  margin-top: -2px;
}

#gform_wrapper_1 .gfield_radio input[type="radio"]:checked,
#gform_wrapper_1 .gfield_checkbox input[type="checkbox"]:checked { border-color: var(--il-accent); }
#gform_wrapper_1 .gfield_radio input[type="radio"]:checked::before { transform: scale(1); }
#gform_wrapper_1 .gfield_checkbox input[type="checkbox"]:checked::before { transform: scale(1) rotate(45deg); }

#gform_wrapper_1 .gfield_radio input:focus-visible,
#gform_wrapper_1 .gfield_checkbox input:focus-visible {
  outline: 3px solid var(--il-accent);
  outline-offset: 2px;
}

#gform_wrapper_1 .gchoice label {
  font-size: var(--fs-sm);
  color: var(--il-contrast);
  cursor: pointer;
  margin: 0;
}

/* ── 39.5  SECTIES (gsection) — zelfde uppercase eyebrow als productdetail ── */
#gform_wrapper_1 .gsection {
  border-bottom: none;
  margin: var(--space-m) 0 var(--space-xs);
  padding: 0;
}
#gform_wrapper_1 .gsection .gsection_title {
  font-size: var(--fs-xs) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--il-accent);
  margin: 0 0 var(--space-xs);
  padding-bottom: var(--space-xs);
  border-bottom: var(--border-accent-top);
  max-width: none;
}

/* ── 39.6  VOORTGANGSBALK (paginatie) — vlak, accent ── */
#gform_wrapper_1 .gf_progressbar_wrapper { margin-bottom: var(--space-m); }
#gform_wrapper_1 .gf_progressbar_title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--il-text-muted);
  margin-bottom: var(--gap-s);
}
#gform_wrapper_1 .gf_progressbar {
  background: var(--il-border-light);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  height: 6px;
}
#gform_wrapper_1 .gf_progressbar_percentage {
  background: var(--il-accent) !important;
  border-radius: 0;
  height: 6px;
  line-height: 6px;
  transition: width var(--t-slow);
}
#gform_wrapper_1 .gf_progressbar_percentage span { display: none; }   /* % weg, strakker */

/* ── 39.7  KNOPPEN — gelijk aan .il-btn / .il-card-cta ── */
#gform_wrapper_1 .gform_footer,
#gform_wrapper_1 .gform_page_footer {
  margin-top: var(--space-m);
  padding-top: var(--space-m);
  border-top: var(--border-light);
  display: flex;
  gap: var(--gap-m);
  flex-wrap: wrap;
}

#gform_wrapper_1 .gform_button,
#gform_wrapper_1 .gform_next_button,
#gform_wrapper_1 .gform_previous_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  border: 1px solid var(--il-accent);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t-base), padding-left var(--t-base), color var(--t-base);
}

/* Primair: Verstuur / Volgende */
#gform_wrapper_1 .gform_button,
#gform_wrapper_1 .gform_next_button {
  background: var(--il-accent);
  color: var(--white);
}
#gform_wrapper_1 .gform_button:hover,
#gform_wrapper_1 .gform_next_button:hover,
#gform_wrapper_1 .gform_button:focus-visible,
#gform_wrapper_1 .gform_next_button:focus-visible {
  background: var(--il-blue);
  border-color: var(--il-blue);
  padding-left: 2.25rem;
  color: var(--white);
  outline: none;
}

/* Secundair: Vorige */
#gform_wrapper_1 .gform_previous_button {
  background: var(--white);
  color: var(--il-contrast);
  border-color: var(--il-border);
}
#gform_wrapper_1 .gform_previous_button:hover,
#gform_wrapper_1 .gform_previous_button:focus-visible {
  background: var(--il-surface);
  border-color: var(--il-blue);
  color: var(--il-blue);
  outline: none;
}

#gform_wrapper_1 .gform_button:focus-visible,
#gform_wrapper_1 .gform_next_button:focus-visible,
#gform_wrapper_1 .gform_previous_button:focus-visible {
  outline: 3px solid var(--il-accent);
  outline-offset: 2px;
}

/* ── 39.8  VALIDATIE — duidelijk maar rustig ── */
#gform_wrapper_1 .gform_validation_errors {
  border: var(--border-error);
  border-left: 4px solid var(--il-error);
  border-radius: 0;
  background: var(--il-error-bg);
  box-shadow: none;
  padding: var(--space-s) var(--space-m);
}
#gform_wrapper_1 .gform_validation_errors .gform_submission_error {
  color: var(--il-error);
  font-size: var(--fs-sm);
  font-weight: 700;
}
#gform_wrapper_1 .gfield_error .gfield_label { color: var(--il-error); }
#gform_wrapper_1 .gfield_error input,
#gform_wrapper_1 .gfield_error textarea,
#gform_wrapper_1 .gfield_error select { border-color: var(--il-error); }
#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message {
  background: transparent;
  border: none;
  color: var(--il-error);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: var(--gap-xs) 0 0;
}

/* ── 39.9  CONSENT (AVG) — compacte, rustige rij ── */
#gform_wrapper_1 .gfield--type-consent {
  background: var(--il-surface);
  border: var(--border-light);
  border-left: var(--border-accent-top);
  padding: var(--space-s) var(--space-m);
}
#gform_wrapper_1 .gfield--type-consent .gfield_consent_label,
#gform_wrapper_1 .gfield--type-consent label {
  font-size: var(--fs-xs);
  color: var(--il-text-muted);
  line-height: var(--lh-normal);
}
#gform_wrapper_1 .gfield--type-consent a { color: var(--il-accent); text-decoration: underline; }

/* ── 39.10  GP ADVANCED PHONE — flag-dropdown binnen de input-stijl ── */
#gform_wrapper_1 .gpapf-phone .iti,
#gform_wrapper_1 .iti { width: 100%; }
#gform_wrapper_1 .iti__flag-container + input { border-radius: 0; }
#gform_wrapper_1 .iti--separate-dial-code .iti__selected-flag { background: var(--il-surface); border-radius: 0; }

/* ── 39.11  BEVESTIGING (na verzenden) ── */
.gform_confirmation_wrapper .gform_confirmation_message {
  border: var(--border-light);
  border-top: var(--border-accent-top);
  background: var(--white);
  padding: var(--space-l) var(--space-m);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--il-contrast);
}

/* ── 39.12  REDUCED MOTION (globaal afgevangen in sectie 28, hier expliciet) ── */
@media (prefers-reduced-motion: reduce) {
  #gform_wrapper_1 * { transition: none !important; }
}

/* ==========================================================================
   40. OFFERTE-PAGINA — MOBIELE LAYOUT, AFBEELDING & VOORWAARDEN-LIJST
   --------------------------------------------------------------------------
   2-koloms GenerateBlocks-grid: formulier links, voorwaarden rechts.
   Vereist in blok-markup:
   - rechter container:                   il-offerte-aside
   - de <ul>:                             il-voorwaarden
   - wrapper om de product-thumbnail:     il-form-thumb__img
   (De generieke overflow-fix .gb-grid-wrapper > .gb-container staat nu
   in sectie 3 — site-breed fundament.)
   ========================================================================== */

/* ── 40.1  AFBEELDINGEN — altijd responsive binnen formulier-context ── */
.il-form-thumb__img img,
.gb-container-c3b1e71f img,
.product_quotation_wrapper img,
#gform_wrapper_1 img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Productfoto bovenaan de offerte: gecapte thumbnail i.p.v. full-bleed.
   Mobiel laat de variabele de cap los → geen herhaalde declaraties.
   TODO: bevestigen — .gb-container-c3b1e71f is een uniqueId-selector
   (anti-patroon); verwijderen zodra .il-form-thumb__img overal in de
   blok-markup staat. */
.il-form-thumb__img img,
.gb-container-c3b1e71f .product_quotation_wrapper img,
#gform_wrapper_1 .gfield img {
  --_thumb-max: 340px;
  width: 100%;
  max-width: var(--_thumb-max);
  aspect-ratio: var(--ratio-photo);
  object-fit: cover;
  margin-bottom: var(--space-m);
  border: var(--border-light);
}
@media (max-width: 767px) {
  .il-form-thumb__img img,
  .gb-container-c3b1e71f .product_quotation_wrapper img,
  #gform_wrapper_1 .gfield img { --_thumb-max: 100%; }
}

/* ── 40.2  VOORWAARDEN-ASIDE — kaart in lijn met USP/KV-blokken ── */
.il-offerte-aside {
  background: var(--il-surface);
  border: var(--border-light);
  border-top: var(--border-contrast-top);
  padding: var(--_aside-pad, var(--space-l) var(--space-m));
  align-self: start;            /* kaart groeit niet mee met de formulierhoogte */
}

.il-offerte-aside > h2,
.il-offerte-aside .wp-block-heading {
  font-size: var(--_aside-h-fs, var(--fs-h4));
  font-weight: 700;
  color: var(--il-contrast);
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-m);
  max-width: 32ch;
}

/* ── 40.3  VOORWAARDEN-LIJST — accent-checklist met hairline-scheiding ── */
.il-voorwaarden {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

.il-voorwaarden li {
  position: relative;
  padding: 0.7rem 0 0.7rem 1.9rem;
  border-bottom: var(--border-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--il-contrast);
  max-width: none;
}
.il-voorwaarden li:last-child { border-bottom: none; }

/* Vinkje in accentkleur i.p.v. bullet */
.il-voorwaarden li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.95rem;
  width: 0.5rem;
  height: 0.85rem;
  border-right: 2px solid var(--il-accent);
  border-bottom: 2px solid var(--il-accent);
  transform: rotate(45deg);
}

.il-voorwaarden li strong { color: var(--il-contrast); font-weight: 700; }

/* ── 40.4  GRID-RITME OP MOBIEL ──
   Voorwaarden boven het formulier (order: -1) — verwijder die regel als
   het formulier eerst moet. */
@media (max-width: 767px) {
  .gb-grid-wrapper { row-gap: var(--space-m) !important; }
  .il-offerte-aside {
    order: -1;
    --_aside-pad: var(--space-m);
    --_aside-h-fs: var(--fs-h5);
  }
}

/* ==========================================================================
   41. LANDINGSPAGINA'S — /verkoop-uw-tesla/* (Model 3 / Y / S / X)
   --------------------------------------------------------------------------
   Hergebruikt bestaande tokens en classes: .il-section-wrapper, .content,
   .il-hero-section, .il-voorwaarden, .grid-auto. Alleen ontbrekende
   Global Classes staan hier. Alles radius 0, conform huisstijl.
   ========================================================================== */

/* ── 41.1  EYEBROW — klein uppercase label boven headings ── */
.il-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--il-accent);
  margin: 0 0 var(--space-xxs);
  max-width: none;
}
.il-hero-section .il-eyebrow { color: var(--il-footer-link); }

/* ── 41.2  HERO H1 — il-hero-section stylet alleen h2; h1 erbij ── */
.il-hero-section h1 {
  color: var(--white);
  font-size: clamp(1.8rem, 1.3rem + 2.4vw, 2.6rem);
  font-weight: 800;
  line-height: var(--lh-tight);
  margin: 0 0 var(--space-xs);
  max-width: 30ch;
}

/* ── 41.3  KNOPPEN — basis + modifiers ── */
.il-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.9rem 1.75rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--letter-spacing);
  text-decoration: none !important;
  border: 1px solid var(--il-accent);
  border-radius: 0;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}

.il-btn--primary {
  background: var(--il-accent);
  color: var(--white) !important;
}
.il-btn--primary:hover,
.il-btn--primary:focus-visible {
  background: var(--il-blue);
  border-color: var(--il-blue);
  color: var(--white) !important;
}

.il-btn--secondary {
  background: transparent;
  color: var(--il-contrast) !important;
  border-color: var(--il-border);
}
.il-btn--secondary:hover,
.il-btn--secondary:focus-visible {
  background: var(--il-surface);
  border-color: var(--il-blue);
  color: var(--il-blue) !important;
}

/* Secondary op donkere hero: witte outline-variant */
.il-hero-section .il-btn--secondary {
  color: var(--white) !important;
  border-color: color-mix(in srgb, var(--white) 40%, transparent);
}
.il-hero-section .il-btn--secondary:hover,
.il-hero-section .il-btn--secondary:focus-visible {
  background: color-mix(in srgb, var(--white) 10%, transparent);
  border-color: var(--white);
  color: var(--white) !important;
}

.il-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-m);
  margin-top: var(--space-s);
}

/* ── 41.4  STREEPJESLIJST — probleem-/kenmerklijsten (1 kolom) ── */
.il-list {
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
  max-width: var(--measure);
}
.il-list li {
  position: relative;
  padding: 0.45em 0 0.45em 1.4em;
  border-bottom: var(--border-light);
  font-size: var(--fs-body);
  color: var(--il-contrast);
  max-width: none;
}
.il-list li:last-child { border-bottom: none; }
.il-list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--il-accent);
  font-weight: 700;
}

/* ── 41.5  PANEL — kaart voor verkooproutes (generalisatie il-offerte-aside) ── */
.il-panel {
  background: var(--il-surface);
  border: var(--border-light);
  border-top: var(--border-contrast-top);
  padding: var(--space-m);
  height: 100%;
  box-sizing: border-box;
}
.il-panel h3 {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-h4);
  color: var(--il-contrast);
}
.il-panel .il-list li { font-size: var(--fs-sm); }

/* ── 41.6  STAPPENPLAN — genummerde kaarten via CSS counter ── */
.il-steps {
  list-style: none;
  counter-reset: il-step;
  margin: var(--space-m) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--gap-l);
}
.il-steps li {
  counter-increment: il-step;
  background: var(--white);
  border: var(--border-light);
  border-top: var(--border-contrast-top);
  padding: var(--space-m);
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
  max-width: none;
}
.il-steps li::before {
  content: counter(il-step, decimal-leading-zero);
  display: block;
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1;
  color: var(--il-accent);
  margin-bottom: var(--gap-s);
}
.il-steps li strong {
  display: block;
  color: var(--il-contrast);
  margin-bottom: var(--gap-xs);
}

/* ── 41.7  RICHTPRIJS-CALLOUT ── */
.il-price-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--gap-s) var(--gap-m);
  margin: var(--space-s) 0;
  padding: var(--space-m);
  background: var(--il-surface-blue);
  border-left: 4px solid var(--il-accent);
}
.il-price-callout strong {
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--il-contrast);
  line-height: 1;
}
.il-price-callout span {
  font-size: var(--fs-sm);
  color: var(--il-text-muted);
}

/* ── 41.8  FAQ — GB Pro accordion, zelfde ritme als productdetail ── */
.il-faq { border-top: var(--border-light); margin-top: var(--space-s); }
.il-faq-item { border-bottom: var(--border-light); }

.il-faq-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  padding: var(--space-s) 0;
  background: none;
  border: none;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: var(--letter-spacing);
  color: var(--il-contrast);
  transition: color var(--t-fast);
}
.il-faq-toggle:hover { color: var(--il-accent); }
.il-faq-toggle::after {
  content: "";
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--t-base);
  opacity: 0.7;
}
.gb-accordion__item.gb-block-is-current .il-faq-toggle::after {
  transform: rotate(-135deg);
  opacity: 1;
}

.il-faq-content { padding: 0 0 var(--space-m); }
.il-faq-content p {
  font-size: var(--fs-body);
  color: var(--il-text-muted);
  line-height: var(--lh-normal);
  margin: 0;
  max-width: var(--measure);
}

/* ── 41.9  FOCUS-VISIBLE — aansluitend op sectie 28 ── */
.il-btn:focus-visible,
.il-faq-toggle:focus-visible {
  outline: 3px solid var(--il-accent);
  outline-offset: 2px;
}
.il-hero-section .il-btn:focus-visible {
  outline-color: var(--white);
}

/* ==========================================================================
   42. BRAND NAV — dynamische merkenlijst ([il_brand_nav])
   --------------------------------------------------------------------------
   Gerenderd door mu-plugin il-brand-nav.php. Binnen .il-footer spiegelt de
   lijst exact de wp-block-navigation styling (sectie 29); daarbuiten een
   neutrale verticale lijst op il-tokens.
   ========================================================================== */
.il-brand-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
  max-width: none;
}

.il-brand-nav__list li { margin: 0; padding: 0; }

.il-brand-nav__list a {
  display: inline-block;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--il-contrast);
  text-decoration: none;
  padding: 0;
  letter-spacing: var(--letter-spacing);
  transition: color var(--t-fast);
}

.il-brand-nav__list a:hover { color: var(--il-blue); }

.il-brand-nav__list a:focus-visible {
  outline: 3px solid var(--il-accent);
  outline-offset: 2px;
}

/* ── Footer-context: identiek aan .il-footer .wp-block-navigation ── */
.il-footer .il-brand-nav__list { gap: var(--gap-xs) !important; }

.il-footer .il-brand-nav__list a {
  color: var(--il-contrast) !important;
  text-decoration: none !important;
  font-size: var(--fs-sm) !important;
  font-weight: 400;
  line-height: 1.6;
  padding: 0 !important;
}

.il-footer .il-brand-nav__list a:hover { color: var(--il-blue) !important; }

/* Mobiele accordion: zelfde ruimere gap als de nav-blocks (sectie 29) */
@media (max-width: 767px) {
  .il-footer .gb-accordion__content .il-brand-nav__list {
    gap: var(--gap-s) !important;
  }
}

/* ==========================================================================
   43. FACETWP SELECTIONS + PRIJSLABEL
   --------------------------------------------------------------------------
   Verplaatst uit inline wp_footer / inline style in functions.php.
   Hoort bij: mu-plugins/il-core/12-facetwp-frontend.php en
              mu-plugins/il-core/30-woocommerce-prijslabel.php.
   ========================================================================== */
.facetwp-selections ul {
  margin: var(--space-s) 0;
  padding: 0;
}

.facetwp-selections li {
  display: inline-block;
  margin: 0 6px 6px 0;
  padding: 8px 10px;
  list-style-type: none;
  border: var(--border-std);
  /* TODO: bevestigen — origineel had border-radius: 3px; designsysteem is 0 */
  border-radius: 0;
  font-size: var(--fs-sm);
}

.facetwp-selections .facetwp-selection-value {
  color: var(--il-contrast);
  cursor: pointer;
}

.facetwp-selections .facetwp-selection-value:hover { text-decoration: underline; }

.facetwp-selections .facetwp-selection-label + .facetwp-selection-value { margin-left: 4px; }

.facetwp-selections .facetwp-selection-value:last-child { margin-right: 0; }

/* Prijslabel op single product (Marge / Ex btw / Incl. btw) */
.iwc-price-note {
  font-size: var(--fs-sm);
  font-weight: 400;
  opacity: 0.8;
  margin-left: 0.35rem;
}

/* ==========================================================================
   44. FILTER DIALOG — native <dialog> met FacetWP-facets
   --------------------------------------------------------------------------
   Gerenderd door mu-plugin il-filter-dialog.php (alleen Woo-archieven).
   Geopend via [data-il-dialog-open="il-filter-dialog"] in de bottombar.
   Desktop: gecentreerd paneel. Mobiel: bottom-sheet.
   Browser levert gratis: focus-trap, ESC, top-layer, backdrop.
   ========================================================================== */
.il-filter-dialog {
  width: min(100%, 560px);
  max-height: min(85dvh, calc(100dvh - var(--space-l)));
  margin: auto;
  padding: 0;
  border: none;
  border-top: var(--border-accent-top);
  border-radius: 0;
  background: var(--white);
  color: var(--il-contrast);
  box-shadow: var(--shadow-l);
  flex-direction: column;

  /* Open/dicht-animatie (moderne browsers; degradeert naar direct tonen) */
  opacity: 0;
  translate: 0 16px;
  transition: opacity var(--t-base), translate var(--t-base),
              display var(--t-base) allow-discrete,
              overlay var(--t-base) allow-discrete;
}
.il-filter-dialog[open] {
  display: flex;
  opacity: 1;
  translate: 0 0;
}
@starting-style {
  .il-filter-dialog[open] { opacity: 0; translate: 0 16px; }
}

.il-filter-dialog::backdrop {
  background: color-mix(in srgb, var(--il-contrast) 45%, transparent);
  opacity: 0;
  transition: opacity var(--t-base),
              display var(--t-base) allow-discrete,
              overlay var(--t-base) allow-discrete;
}
.il-filter-dialog[open]::backdrop { opacity: 1; }
@starting-style {
  .il-filter-dialog[open]::backdrop { opacity: 0; }
}

/* Scroll-lock zolang de dialog open is */
html:has(.il-filter-dialog[open]) { overflow: hidden; }

/* Mobiel: bottom-sheet, van onderen omhoog */
@media (max-width: 767px) {
  .il-filter-dialog {
    width: 100%;
    max-width: none;
    max-height: 85dvh;
    margin: auto 0 0;
    translate: 0 24px;
  }
}

/* ── Header ── */
.il-filter-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-m);
  flex-shrink: 0;
  padding: var(--space-s) var(--space-m);
  border-bottom: var(--border-light);
}

.il-filter-dialog__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--il-accent);
  margin: 0;
  max-width: none;
}

.il-filter-dialog__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -8px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--il-contrast);
  cursor: pointer;
  transition: color var(--t-fast);
}
.il-filter-dialog__close:hover { color: var(--il-accent); }
.il-filter-dialog__close svg { width: 16px; height: 16px; }

/* ── Body ── */
.il-filter-dialog__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-m);
}

.il-filter-dialog__facet { margin-bottom: var(--space-m); }
.il-filter-dialog__facet:last-child { margin-bottom: 0; }

.il-filter-dialog__facet-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--il-contrast);
  margin: 0 0 var(--gap-s);
  max-width: none;
}

.il-filter-dialog__body .facetwp-selections ul { margin-top: 0; }

/* ── Footer ── */
.il-filter-dialog__footer {
  display: flex;
  gap: var(--gap-m);
  flex-shrink: 0;
  padding: var(--space-s) var(--space-m) max(var(--space-s), var(--safe-bottom));
  border-top: var(--border-light);
  background: var(--white);
}
.il-filter-dialog__footer .il-btn { flex: 1 1 0; }

.il-filter-dialog__close:focus-visible {
  outline: 3px solid var(--il-accent);
  outline-offset: 2px;
}

/* ==========================================================================
   BOTTOMBAR SOUNDBITES — Bulletproof Rotator
   ========================================================================== */

/* 1. Container: Grid stapelt alle items exact over elkaar */
.il-bottombar .il-bottom-soundbites {
  display: grid !important;
  grid-template-columns: 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  min-height: 1.5em;
}

/* 2. Alle 7 zinnen in hetzelfde grid-vak plaatsen */
.il-bottombar .il-bottom-soundbites > span {
  grid-area: 1 / 1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* Shorthand animatiesyntaxis (breder ondersteund door WP minifiers) */
  animation: ilSoundbiteRotate 35s linear infinite !important;
}

/* 3. Vertraging per item (stappen van 5 seconden) */
.il-bottombar .il-bottom-soundbites > span:nth-child(1) { animation-delay: 0s !important; }
.il-bottombar .il-bottom-soundbites > span:nth-child(2) { animation-delay: -30s !important; }
.il-bottombar .il-bottom-soundbites > span:nth-child(3) { animation-delay: -25s !important; }
.il-bottombar .il-bottom-soundbites > span:nth-child(4) { animation-delay: -20s !important; }
.il-bottombar .il-bottom-soundbites > span:nth-child(5) { animation-delay: -15s !important; }
.il-bottombar .il-bottom-soundbites > span:nth-child(6) { animation-delay: -10s !important; }
.il-bottombar .il-bottom-soundbites > span:nth-child(7) { animation-delay: -5s !important; }

/* 4. Keyframes met uitsluitend GEHELE getallen (voorkomt minifier-bugs) */
@keyframes ilSoundbiteRotate {
  0% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
  }
  2% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  12% {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  14% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
  }
}

/* 5. Fallback voor verminderde beweging */
@media (prefers-reduced-motion: reduce) {
  .il-bottombar .il-bottom-soundbites > span {
    animation: none !important;
    display: none !important;
  }
  .il-bottombar .il-bottom-soundbites > span:first-child {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* ==========================================================================
   45. TAXONOMIE ARCHIEF — HEADER (twee-koloms grid + panel-aside)
   --------------------------------------------------------------------------
   Content links, panel rechts. Eén signatuurlijn (topborder panel);
   eyebrows zonder onderlijn, checklist zonder hairlines, pills prominent.
   Vereist markup: il-archive-header > __main + __aside.
   TODO: bevestigen — selector "Toon meer"-toggle ontbreekt nog (markup?).
   ========================================================================== */

/* ── 45.1  HEADER GRID ── */
.il-archive-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  align-items: start;
  width: 100%;
  margin-bottom: var(--space-l);
}

@media (min-width: 900px) {
  .il-archive-header {
    grid-template-columns: minmax(0, 7fr) minmax(340px, 5fr);
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

.il-archive-header__main { min-width: 0; }
.il-archive-header__main h1 { margin-top: 0; margin-bottom: var(--space-xs); }

/* ── 45.2  TERM-INTRO ── */
.il-archive-header__main .term-description {
  padding-top: 0;
  max-width: var(--measure);
}
.term-description p {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--il-text-muted);
  margin: 0 0 var(--space-xs);
  max-width: none;
}

/* ── 45.3  ASIDE — panel met intern grid-ritme ──
   Twee gap-maten: --_gap-block tussen blokken, --_gap-head tussen een
   eyebrow en zijn eigen inhoud (via margin op h2, grid-gap = klein). */
.il-archive-header__aside {
  --_gap-head:  var(--gap-s);
  --_gap-block: var(--space-m);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: var(--_gap-head);
  background: var(--il-surface);
  border: var(--border-light);
  border-top: var(--border-contrast-top);
  padding: var(--space-m);
  align-self: start;
  min-width: 0;
}

/* Eyebrow: kleur + kapitalen dragen de scheiding, geen onderlijn meer.
   Elke eyebrow behalve de eerste opent een nieuw blok → extra marge boven. */
.il-archive-header__aside > h2,
.il-archive-header__aside .il-archive-eyebrow {
  font-size: var(--fs-xs) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--il-accent) !important;
  margin: 0 !important;
  padding: 0;
  border-bottom: none;
  max-width: none;
  line-height: var(--lh-tight);
}
.il-archive-header__aside > h2:not(:first-child) {
  margin-top: calc(var(--_gap-block) - var(--_gap-head)) !important;
}

/* ── 45.4  UITVOERINGEN — prominente pills ── */
.subterms-list.vertical-list,
.subterms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-s);
}
.subterms-list li { margin: 0; padding: 0; border-bottom: none; }

.subterms-list a {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  padding: 0.6rem 1.1rem;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  color: var(--il-accent);
  background: var(--il-surface-blue);
  border: 1px solid var(--il-accent);
  border-radius: 0;
  text-decoration: none;
  letter-spacing: var(--letter-spacing);
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.subterms-list a:hover,
.subterms-list a:focus-visible {
  background: var(--il-accent);
  border-color: var(--il-accent);
  color: var(--white);
  outline: none;
}
.subterms-list a:focus-visible {
  outline: 3px solid var(--il-accent);
  outline-offset: 2px;
}
/* Teller iets terug zodra hij in een eigen span gerenderd wordt */
.subterms-list a .subterm-count { font-weight: 400; opacity: 0.7; }

/* ── 45.5  AANBOD-KOP — volle breedte boven het productgrid ── */
.il-archive-products-title {
  margin: var(--space-l) 0 var(--space-s);
  font-size: var(--fs-h2);
  font-weight: 800;
  color: var(--il-contrast);
  line-height: var(--lh-tight);
  max-width: none;
}

/* ── 45.6  USP-CHECKLIST — 2 kolommen, geen hairlines ── */
.il-archive-header__aside .il-voorwaarden {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--gap-xs) var(--space-m);
}
.il-archive-header__aside .il-voorwaarden li {
  padding: 0.3rem 0 0.3rem 1.6rem;
  border-bottom: none;
  font-size: var(--fs-sm);
  text-wrap: balance;
}
.il-archive-header__aside .il-voorwaarden li::before {
  top: 0.55rem;
}