/* ==========================================================================
   Wagendepot — global stylesheet
   Basis: het Watertankie/Toiletzonderafvoer-ontwerp (Plus Jakarta Sans),
   hertint naar cabineblauw (#0065d7) op antraciet (#1f2327); tot 30-09-2026 rood.
   De shopcomponenten (prijzen, winkelwagen, bestellen, beleid) staan als
   apart blok onderaan; zie BUILD-SPEC §11 voor het klassencontract.
   ========================================================================== */

/* ---- Reset & tokens ---- */
*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* wagendepot.nl-huisstijl — cabineblauw op antraciet (besluit eigenaar
     30-09-2026; daarvoor Europe Wagon-rood, zie blok 27). Het blauw is gemeten
     op de packshot van de Global MTM blauw (familie.swatch in products.js):
     de kleur van de klassieke toiletcabine uit het eigen assortiment.
     De tokens heten nog 'yellow' (historisch, uit het Watertankie-ontwerp waar
     Toiletzonderafvoer op voortbouwt) maar dragen hier het accent, zodat de
     hele stylesheet in één keer meekleurt (BUILD-SPEC §11).

     Contrast (WCAG 2, sRGB-luminantie, gemeten bij het hertinten op 2026-09-30):
       wit op --yellow      #0065d7   5,5 : 1   knoppen, badge-teller, sticky balk
       wit op --yellow-600  #0052b0   7,4 : 1   hover, verlopen
       --yellow-600 op wit            7,4 : 1   tekstlinks en iconen op wit (6,8 op --bg)
       --yellow op --ink              3,2 : 1   → op antraciet voor iconen --hl (9,7 : 1)
       wit op --green-600   #0b7f47   5,1 : 1   badge 'Direct bestelbaar'
       wit op --green       #0f9d58   3,5 : 1   → niet voor tekst; alleen vlakken/iconen
       --muted op wit       #5e6670   5,8 : 1
       --ink op --hl        #8cc2ff   9,5 : 1   gemarkeerde woorden in koppen
       wit op --fout        #b31f1f   6,7 : 1   foutstaten (blijven rood: een betekenis, geen merkkleur) */
  --yellow: #0065d7;        /* primair accent: knoppen, iconen, prijsbadge */
  --yellow-600: #0052b0;    /* hover / donkerder accent, tekstlinks op wit */
  --yellow-soft: #e5effc;   /* lichte tint achter accenticonen en in gemarkeerde kolommen */
  --hl: #8cc2ff;            /* highlight-marker in koppen (donkere tekst erop); accent op antraciet */
  --fout: #b31f1f;          /* foutstaten: rand, sterretje, foutmelding bij een veld */
  --ink: #17191c;           /* tekst, topbar, logo-blok */
  --dark: #1f2327;          /* donkere secties (antraciet) */
  --dark-2: #141618;        /* footer */
  --bg: #f4f5f7;            /* lichtgrijze pagina-achtergrond */
  --card: #ffffff;
  --line: #e2e5e9;
  --muted: #5e6670;
  --muted-light: rgba(255, 255, 255, 0.62);
  --green: #0f9d58;         /* 'bestelbaar'-accent voor vlakken en iconen (te licht voor tekst) */
  --green-600: #0b7f47;     /* zelfde groen, donker genoeg voor witte badge- en voorraadtekst */
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --shadow: 0 18px 50px rgba(15, 20, 30, 0.08);
  --shadow-sm: 0 6px 20px rgba(15, 20, 30, 0.06);
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Zelf gehost — variabel latin-subset, dekt gewicht 400 t/m 800 in één bestand.
   Scheelt twee externe verbindingen (fonts.googleapis.com + fonts.gstatic.com)
   en een render-blokkerende stylesheet van derden. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/plus-jakarta-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { scroll-behavior: smooth; }

body {
  font-family: "Plus Jakarta Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

.container {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ---- Typography helpers ---- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 18px;
}
.section-eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--yellow);
}
.on-dark .section-eyebrow { color: rgba(255,255,255,.65); }

.section-title {
  font-size: clamp(2.1rem, 4.5vw, 3.3rem);
  margin-bottom: 8px;
}

.hl { position: relative; white-space: nowrap; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hl-yellow {
  background: var(--hl);
  color: var(--ink);
  padding: 0 .18em;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.98rem;
  line-height: 1;
  padding: 19px 34px;
  border: 0;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-yellow { background: var(--yellow); color: #fff; }
.btn-yellow:hover { background: var(--yellow-600); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: #000; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.18); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-white { background: #fff; color: var(--ink); }
.btn-whatsapp { background: #25d366; color: #fff; }
.btn-whatsapp:hover { background: #1da851; }
.btn-whatsapp svg { width: 19px; height: 19px; flex: none; }

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .92rem;
  transition: gap .15s ease;
}
.arrow-link:hover { gap: 12px; }
.arrow-link svg { width: 15px; height: 15px; }

/* ==========================================================================
   Top bar + header
   ========================================================================== */
.topbar {
  background: var(--ink);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 40px;
  overflow: hidden;
}
.topbar-usps { display: flex; gap: 22px; }
.topbar-usps li { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-usps svg { width: 14px; height: 14px; color: var(--hl); flex: none; }
.topbar-right { display: flex; align-items: center; gap: 20px; }
.topbar-right span { white-space: nowrap; }
.topbar-right a { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.topbar-right a:hover { color: #fff; }
.topbar .quote-link { color: var(--hl); font-weight: 600; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 78px;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: -0.03em;
}
.logo .logo-mark {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--ink);
  color: var(--hl);
  /* Afgerond zoals het favicon en de app-iconen (tools/merk.js). */
  border-radius: var(--r-control-sm, 8px);
}
.logo .logo-mark svg { width: 22px; height: 22px; }
.logo b { color: var(--ink); }
.logo span { color: var(--yellow-600); }


.main-nav { margin-left: 4px; }
.main-nav > ul { display: flex; gap: 2px; }
.main-nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* 11px opzij (was 13px): met Woonunits in het menu (2026-09-28) past de
     header anders 13px niet meer in de container van 1240px. */
  padding: 11px 11px;
  font-weight: 500;
  font-size: .96rem;
  white-space: nowrap;
  border-radius: 8px;
  transition: background .15s ease;
}
.main-nav > ul > li > a:hover { background: #f2f2f2; }
.main-nav .caret { width: 11px; height: 11px; opacity: .5; }

.header-actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.header-search {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #eef0f3;
}
.header-search svg { width: 17px; height: 17px; }
.header-phone {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem;
  white-space: nowrap;
}
.header-phone svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
.header-actions .btn { padding: 14px 22px; white-space: nowrap; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  background: var(--ink);
  border: 0; cursor: pointer;
  flex-direction: column; gap: 5px;
  align-items: center; justify-content: center;
}
.nav-toggle span { width: 20px; height: 2px; background: #fff; transition: .2s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  background: linear-gradient(180deg, #1a1d21 0%, #2b3036 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(0, 101, 215, .16), transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.03' stroke-width='1'/%3E%3C/svg%3E");
  pointer-events: none;
}
.hero-water {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(110deg, rgba(11,17,25,.94) 0%, rgba(11,17,25,.72) 45%, rgba(11,17,25,.35) 100%),
    radial-gradient(140% 120% at 90% 60%, #0b2e5c 0%, #24282d 45%, #141618 80%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner {
  min-height: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 0 130px;
  max-width: 760px;
}
.hero .rating {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .9rem; margin-bottom: 26px;
  color: rgba(255,255,255,.85);
}
.hero .stars { color: var(--hl); letter-spacing: 2px; }
.hero h1 {
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 700;
  margin-bottom: 22px;
}
.hero .lead {
  font-size: 1.18rem;
  color: rgba(255,255,255,.82);
  max-width: 560px;
  margin-bottom: 34px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- Hero met achtergrondvideo (homepage) ----
   Laagvolgorde: media (0) → scrim (1) → glow/raster (2) → tekst (3).
   .hero-water blijft ongemoeid; die wordt nog door 404 en bedankt gebruikt. */
.hero--video { isolation: isolate; }
.hero-media {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  background: #1a1d21;
}
.hero-media img,
.hero-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 46%;
}
/* De video schuift met een fade over de poster heen zodra hij écht speelt,
   zodat je geen zwart frame of sprong ziet. */
.hero-video { opacity: 0; transition: opacity .9s ease; }
.hero-video.is-playing { opacity: 1; }

.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    /* donker links waar de tekst staat, naar rechts opent het beeld */
    linear-gradient(96deg,
      rgba(20,22,26,.93) 0%,
      rgba(20,22,26,.85) 30%,
      rgba(24,27,31,.62) 60%,
      rgba(28,31,36,.44) 100%),
    /* vignet boven/onder: header en USP-balk blijven afsteken */
    linear-gradient(180deg,
      rgba(20,22,26,.55) 0%,
      rgba(20,22,26,0) 34%,
      rgba(20,22,26,.12) 62%,
      rgba(22,25,29,.72) 100%),
    /* antraciet over het beeld zodat de foto bij de donkere hero blijft passen */
    linear-gradient(0deg, rgba(31,35,39,.22), rgba(31,35,39,.22));
}
.hero--video::before { z-index: 2; }
.hero--video .container { z-index: 3; }
/* Onzichtbaar op rustige vlakken, maar houdt de tekst leesbaar waar een lichte
   tank of lucht achter de letters langs schuift. */
.hero--video h1,
.hero--video .lead,
.hero--video .hero-trust { text-shadow: 0 1px 18px rgba(10,14,30,.5); }

@media (max-width: 767px) {
  /* Portret-still: tekst loopt over de volle breedte, dus verticaal verlopen. */
  .hero-media img { object-position: 50% 38%; }
  .hero-scrim {
    background:
      linear-gradient(180deg,
        rgba(20,22,26,.78) 0%,
        rgba(20,22,26,.52) 28%,
        rgba(20,22,26,.58) 60%,
        rgba(22,25,29,.88) 100%),
      linear-gradient(0deg, rgba(31,35,39,.12), rgba(31,35,39,.12));
  }
}

/* ---- Search / category accent band ---- */
.search-band {
  background: linear-gradient(120deg, var(--yellow) 0%, var(--yellow-600) 100%);
  padding: 30px 0 34px;
}
.search-band h2 {
  font-size: 1.15rem;
  margin-bottom: 18px;
  color: #fff;
}
/* "Geschikt voor" op de productpagina (toepassingen in product.js): een lijst
   in gelijke kolommen, met het vinkje vóór het label op de eerste regel, zoals
   in Uitrusting en de pluspunten. Eerst waren het witte chips op een witte
   sectie (de vorm was onzichtbaar) met min-width 190px en space-between: het
   vinkje zweefde per chip op een andere x, de kolommen verschoven per rij en
   er stond 64px tussen de regels. Geen hover of indrukeffect: het is geen link.
   Het vinkje staat midden in een kolom van 26px met 14px goot, zoals de
   vinkcirkels van "Dit krijg je": de tekst begint op +40px (blok 25d). */
.chip-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 24px; }
.chip { display: flex; align-items: flex-start; gap: 14px; min-width: 0; color: var(--ink); font-weight: 600; font-size: .95rem; line-height: 1.5; }
.chip svg { width: 15px; height: 15px; flex: none; margin: calc((1.5em - 15px) / 2) 5.5px 0; color: var(--yellow-600); }
.chip.chip-dark { background: var(--ink); color: #fff; }
.chip.chip-dark svg { opacity: .8; }

/* ==========================================================================
   Sections generic
   ========================================================================== */
.section { padding: 84px 0; }
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 40px;
}
.section-head .arrow-link { flex: none; }

/* ---- Product cards ---- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
.product-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.product-media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: #eef0f3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.product-media svg.tank-illus { width: 62%; height: 62%; }
.product-media img.tank-photo {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 18px;
  mix-blend-mode: multiply;   /* laat witte studio-achtergrond blenden met de tint */
}
/* klikbare afbeelding -> productpagina */
.product-media a.media-link { display: block; width: 100%; height: 100%; }
.product-media a.media-link img { transition: transform .28s ease; }
.product-card:hover .product-media a.media-link img { transform: scale(1.04); }
.product-body h3 a { transition: color .15s ease; }
.product-body h3 a:hover { color: var(--yellow-600); }
.product-badge {
  position: absolute;
  top: 12px; left: 12px;
  background: var(--ink);
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.product-badge.badge-eco { background: var(--green); }
.product-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
/* flex: none: de beschrijving groeit niet mee. De bulletlijst (.product-bullets,
   flex: 1) vangt de restruimte op, zodat bullets, prijs en knoppen per rij op
   dezelfde hoogte staan. Eerst deelden beschrijving en bullets de ruimte en
   begon de bulletlijst per kaart op een andere hoogte (tot 25px verschil). */
.product-body .desc {
  font-size: .88rem; color: var(--muted);
  margin-bottom: 18px; flex: none;
}
.price-block { margin-bottom: 18px; }
.price-label { font-size: .78rem; color: var(--muted); }
.price-rows { display: flex; flex-direction: column; gap: 2px; }
.price-rows .row { display: flex; justify-content: space-between; font-size: .86rem; }
.price-rows .row b { font-weight: 700; }
.price-single { font-size: 1.05rem; }
.price-single .from { font-size: .76rem; color: var(--muted); display: block; }
.price-single b { font-size: 1.35rem; }
.product-links { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.product-links .arrow-link { white-space: nowrap; }
.product-links .muted { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.product-links .muted a { color: var(--ink); font-weight: 600; text-decoration: underline; }

/* ==========================================================================
   Dark "Meer dan verhuur" section
   ========================================================================== */
.dark-section { background: var(--dark); color: #fff; position: relative; overflow: hidden; }
.dark-section .accent-block {
  position: absolute; top: 0; left: 0;
  width: 120px; height: 120px; background: var(--hl);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.dark-section .accent-block.br {
  top: auto; left: auto; right: 0; bottom: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center;
}
.split-media {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  background:
    linear-gradient(160deg, rgba(0, 101, 215, .12), transparent 60%),
    radial-gradient(120% 120% at 30% 20%, #0b2e5c, #141618);
  display: grid; place-items: center;
}
.play-btn {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--yellow); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  transition: transform .2s ease;
}
.play-btn:hover { transform: scale(1.07); }
.play-btn svg { width: 26px; height: 26px; margin-left: 4px; }
.split-body h2 { font-size: clamp(2.1rem, 4vw, 3.2rem); margin-bottom: 22px; }
.split-body p { color: rgba(255,255,255,.72); margin-bottom: 16px; font-size: .98rem; }
.split-body p a, .split-body p b { color: #fff; }
.split-body p a { text-decoration: underline; }
.usp-list { display: flex; flex-direction: column; gap: 14px; margin: 26px 0 30px; }
.usp-list li { display: flex; align-items: flex-start; gap: 14px; font-weight: 500; }   /* vinkje (26px) op de eerste regel (25,6px), niet op het midden van twee regels */
.usp-list .tick {
  width: 26px; height: 26px; flex: none;
  border-radius: 50%; background: var(--yellow); color: #fff;
  display: grid; place-items: center;
}
.usp-list .tick svg { width: 13px; height: 13px; }

/* ==========================================================================
   Sectors carousel
   ========================================================================== */
.sector-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 1fr);
  gap: 22px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.sector-track::-webkit-scrollbar { display: none; }
.sector-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.sector-media {
  position: relative;
  aspect-ratio: 16 / 10;
  min-height: 0;            /* geen automatische minimumhoogte als flex-item */
  background: linear-gradient(135deg, #d9dde2, #b6bcc4);
  display: grid; place-items: center;
  overflow: hidden;
}
.sector-media svg { width: 54px; height: 54px; color: rgba(16,22,29,.35); }
/* absoluut i.p.v. in de flow: de intrinsieke hoogte van de foto (500px) mag de
   16/10-verhouding van de kaart niet oprekken — zoals bij .product-media. */
.sector-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.sector-body { padding: 22px 22px 26px; }
.sector-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.sector-body p { font-size: .88rem; color: var(--muted); margin-bottom: 16px; }
.section-nav { display: flex; gap: 10px; }
.section-nav button {
  width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid var(--line); background: #fff;
  cursor: pointer; display: grid; place-items: center;
  transition: .15s;
}
.section-nav button:hover { border-color: var(--ink); }
.section-nav svg { width: 16px; height: 16px; }

/* ==========================================================================
   Projects (dark)
   ========================================================================== */
.projects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 20px; }
.project-card {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 340px;
  display: flex; align-items: flex-end;
  padding: 30px;
  color: #fff;
  background: linear-gradient(180deg, rgba(11,17,25,.2), rgba(11,17,25,.9)),
             radial-gradient(120% 120% at 70% 20%, #0b2e5c, #141618);
}
.project-card:nth-child(2) {
  background: linear-gradient(180deg, rgba(11,17,25,.2), rgba(11,17,25,.9)),
             radial-gradient(120% 120% at 30% 20%, #0b2e5c, #141618);
}
.project-tags { position: absolute; top: 22px; left: 22px; display: flex; gap: 8px; }
.project-tags span { background: var(--yellow); color: #fff; font-size: .72rem; font-weight: 600; padding: 6px 11px; }
.project-card h3 { font-size: 1.4rem; max-width: 420px; }

/* ==========================================================================
   Social section
   ========================================================================== */
.social-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
.social-icons { display: flex; gap: 12px; }
.social-icons a {
  width: 42px; height: 42px; border-radius: 50%;
  background: #ececec; display: grid; place-items: center;
  transition: .15s;
}
.social-icons a:hover { background: var(--yellow); }
.social-icons svg { width: 17px; height: 17px; }
.social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.social-tile {
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden; position: relative;
  background: linear-gradient(135deg, #0b2e5c, #141618);
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
}
.social-tile:nth-child(2){ background: linear-gradient(135deg,#0b2e5c,#081a33);}
.social-tile:nth-child(3){ background: linear-gradient(135deg,#2b3036,#141618);}
.social-tile:nth-child(4){ background: var(--yellow); color: #fff;}
.social-tile svg { width: 46px; height: 46px; opacity: .6; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(120deg, #0065d7 0%, #00458f 55%, #1f2327 100%);
  padding: 78px 0;
  position: relative;
  overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 90% 0%, rgba(255,255,255,.14), transparent 55%);
  pointer-events: none;
}
.cta-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-inner .section-eyebrow { color: rgba(255,255,255,.7); }
.cta-inner h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); color: #fff; }
.cta-inner .hl { text-decoration-color: rgba(255,255,255,.85) !important; }
.cta-inner p { margin-top: 12px; color: rgba(255,255,255,.85); font-size: 1.05rem; }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- CTA-variant met vrijstaande collega-foto + schuin kader (Rentwereld-stijl) ---- */
.cta-band.has-photo { padding-bottom: 0; padding-top: 52px; }
.cta-band.has-photo .cta-inner { display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 40px; flex-wrap: nowrap; }
.cta-band.has-photo .cta-text { padding-bottom: 56px; }
.cta-band.has-photo .cta-text .cta-actions { margin-top: 28px; }
.cta-visual { position: relative; align-self: end; min-height: 300px; display: flex; align-items: flex-end; justify-content: center; }
.cta-visual .cta-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; color: #17191c; }
.cta-visual .cta-person {
  position: relative; z-index: 2;
  max-height: 440px; width: auto; max-width: 100%;
  object-fit: contain; object-position: bottom;
  align-self: flex-end;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, .30));
}

@media (max-width: 900px) {
  .cta-band.has-photo { padding-top: 44px; }
  .cta-band.has-photo .cta-inner { grid-template-columns: 1fr; align-items: center; }
  .cta-band.has-photo .cta-text { padding-bottom: 20px; }
  .cta-visual { min-height: 0; }
  .cta-visual .cta-person { max-height: 320px; }
}

/* ---- 'Hulp nodig?'-blok — rode band + witte platte kaarten ---- */
.help-band { position: relative; overflow: hidden; padding: 48px 0; background: linear-gradient(120deg, #0065d7 0%, #00458f 55%, #1f2327 100%); }
.help-band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 120% at 88% 0%, rgba(255, 255, 255, .12), transparent 55%); }
.help-head { position: relative; margin-bottom: 26px; max-width: 760px; }
.help-head h2 { color: #fff; font-size: clamp(1.45rem, 2.5vw, 1.95rem); }
.help-head p { color: rgba(255, 255, 255, .85); margin-top: 6px; font-size: .98rem; }
.help-inner { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 48px; }
.help-person { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; flex: none; }
.help-photo {
  width: 130px; height: 130px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255, 255, 255, .5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
}
.help-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.help-person figcaption { text-align: center; line-height: 1.3; }
.help-person figcaption b { display: block; color: #fff; font-size: .98rem; }
.help-person figcaption span { font-size: .84rem; color: rgba(255, 255, 255, .72); }
.help-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* Icoon en tekst bovenaan, zodat het icoon (24px) op de titelregel (24,8px)
   staat en titels in één rij op dezelfde hoogte, ook als een ondertitel
   afbreekt; alleen het pijltje staat in het midden van de kaart. */
.help-card {
  display: flex; align-items: flex-start; gap: 14px;
  background: #fff; border-radius: 12px;
  padding: 15px 18px; text-decoration: none; color: var(--ink);
  box-shadow: 0 6px 16px rgba(20, 22, 26, .16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.help-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 22, 26, .22); }
.help-ic { flex: none; color: var(--ink); display: grid; place-items: center; }
.help-ic svg { width: 24px; height: 24px; }
.help-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.help-txt b { font-size: .97rem; font-weight: 700; }
.help-txt > span { font-size: .84rem; color: var(--muted); }
.help-arrow { margin-left: auto; align-self: center; color: #b8bec6; flex: none; display: grid; place-items: center; }
.help-arrow svg { width: 20px; height: 20px; }

@media (max-width: 900px) {
  .help-inner { grid-template-columns: 1fr; gap: 22px; justify-items: center; }
  .help-head { text-align: center; margin-left: auto; margin-right: auto; }
  .help-cards { grid-template-columns: 1fr; width: 100%; }
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--dark-2); color: rgba(255,255,255,.7); padding: 70px 0 0; }
.footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-brand .logo { color: #fff; margin-bottom: 20px; }
.footer-brand .logo b { color: #fff; }
.footer-brand p { font-size: .9rem; margin-bottom: 18px; max-width: 320px; }
.footer-contact li { display: flex; gap: 10px; margin-bottom: 10px; font-size: .9rem; }
.footer-contact svg { width: 15px; height: 15px; color: var(--hl); flex: none; margin-top: 4px; }
.footer-col h3 { color: #fff; font-size: .95rem; margin-bottom: 18px; letter-spacing: 0; }
/* De maat op de li, niet alleen op de a: de platte regels in Bedrijfsgegevens
   (naam, adres, KVK, BTW) waren anders 16px naast links van 14px. De regel
   wordt daardoor lager; 14px marge houdt de regelafstand op 36,5px, zoals hij was. */
.footer-col ul li { margin-bottom: 14px; font-size: .88rem; }
.footer-col ul a { transition: color .15s; }
.footer-col ul a:hover { color: var(--hl); }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  padding: 24px 0 88px; font-size: .84rem;
}
.footer-legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-legal a:hover { color: #fff; }
.footer-social { display: flex; gap: 10px; }
.footer-social a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.footer-social a:hover { background: var(--yellow); color: #fff; }
.footer-social svg { width: 15px; height: 15px; }

/* ==========================================================================
   Huren page — layout with filter sidebar
   ========================================================================== */
.page-hero {
  background: var(--dark);
  color: #fff;
  padding: 64px 0 60px;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(120% 100% at 85% 0%, rgba(0, 101, 215, .12), transparent 55%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.55); margin-bottom: 22px; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: 18px; max-width: 720px; }
.page-hero p { color: rgba(255,255,255,.75); max-width: 640px; font-size: 1.05rem; }

/* Trust-strip (trustStrip() in build.js, op alle pagina's behalve de homepage):
   vier gelijke kolommen, onder 1080px twee en op een telefoon één. Eerst flex
   met space-between: de items waren zo breed als hun tekst, dus elke rij werd
   anders verdeeld en er bleef altijd één item alleen op de laatste rij. De
   eerste kolom begint op de linkerrand van de container, gelijk met de
   pagina-inhoud; het icoon staat op het midden van de eerste tekstregel. */
.trust-strip { background: #fff; border-bottom: 1px solid var(--line); }
.trust-strip .container { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 32px; align-items: start; padding-block: 18px; }
.trust-strip li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; font-size: .92rem; line-height: 1.45; text-wrap: balance; }
.trust-strip svg { width: 20px; height: 20px; color: var(--yellow-600); flex: none; margin-top: calc((1.45em - 20px) / 2); }
@media (max-width: 1080px) {
  .trust-strip .container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .trust-strip .container { grid-template-columns: 1fr; gap: 12px; }
}

.catalog { padding: 56px 0 84px; }
.catalog-layout { display: grid; grid-template-columns: 268px 1fr; gap: 34px; align-items: start; }
.filter-panel {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; position: sticky; top: 96px;
}
.filter-panel .filter-titel { font-size: 1.05rem; font-weight: 700; margin: 0; }
.filter-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.filter-reset { background: none; border: 0; cursor: pointer; font-family: inherit; font-size: .82rem; font-weight: 600; color: var(--yellow-600); padding: 0; }
.filter-reset:hover { text-decoration: underline; }
.filter-reset[hidden] { display: none; }
.catalog-empty { padding: 40px 0; color: var(--muted); font-size: .98rem; }   /* 0 opzij: de tekst begint op de linkerrand van de teller erboven (was 4px ingesprongen) */
.catalog-empty a { color: var(--yellow-600); font-weight: 600; text-decoration: underline; }
.catalog-empty[hidden] { display: none; }
.filter-group { border-top: 1px solid var(--line); padding: 16px 0; }
.filter-group:first-of-type { border-top: 0; padding-top: 0; }
.filter-group .filter-kop { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 12px; }
/* Vinkje en teller op de eerste regel, niet op het midden van het label: een
   label dat afbreekt ("Woonunits & crew trailers" in een smal paneel) hield
   anders het vinkje 12px onder de eerste regel en de teller tussen de regels.
   Regel 1,6 × .9rem = 23px; teller 1,6 × .8rem = 20,5px, dus 1,3px omlaag. */
.filter-option { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: .9rem; cursor: pointer; }
.filter-option input { width: 17px; height: 17px; accent-color: var(--yellow-600); }
.filter-option .count { margin-left: auto; margin-top: calc(1.6 * (.9rem - .8rem) / 2); color: var(--muted); font-size: .8rem; }

.cat-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cat-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: .9rem; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cat-tabs a:hover { border-color: var(--ink); }
.cat-tabs a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

.catalog-main .catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; flex-wrap: wrap; gap: 14px;
}
.catalog-toolbar .result-count { font-weight: 600; font-size: 1rem; letter-spacing: 0; line-height: 1.4; }
.catalog-toolbar label { display: inline-flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }   /* stond als style="…" in catalog.js */
.catalog-toolbar select { padding: 11px 16px; border: 1px solid var(--line); border-radius: 8px; font-family: inherit; background: #fff; font-size: .9rem; }
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 44px; }
.pagination a {
  width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--line); background: #fff; font-weight: 600; border-radius: 8px;
  transition: .15s;
}
.pagination a:hover { border-color: var(--ink); }
.pagination a.active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---- FAQ ---- */
.faq { max-width: 860px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--ink);
  padding: 22px 44px 22px 0; position: relative;
}
.faq-q::after {
  content: "+"; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 1.5rem; font-weight: 400; color: var(--yellow-600); transition: transform .2s;
}
.faq-item.open .faq-q::after { content: "−"; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .28s ease; }
.faq-a p { padding: 0 0 22px; color: var(--muted); font-size: .96rem; }

/* ---- feature callouts ---- */
.feature-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.feature-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 34px 32px;
}
.feature-card .ficon {
  width: 54px; height: 54px; background: var(--yellow); color: #fff;
  display: grid; place-items: center; margin-bottom: 20px;
}
.feature-card .ficon svg { width: 26px; height: 26px; }
.feature-card h3 { font-size: 1.3rem; margin-bottom: 12px; }
.feature-card p { color: var(--muted); font-size: .95rem; }

/* ---- steps ---- */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; position: relative;
}
.step .num {
  font-size: 2.4rem; font-weight: 800; color: var(--yellow);
  line-height: 1; margin-bottom: 14px; letter-spacing: -.04em;
}
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: .9rem; }

/* ---- why list ---- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 40px; }
.why-grid li { display: flex; gap: 14px; align-items: flex-start; font-size: 1rem; }
.why-grid .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.why-grid .tick svg { width: 13px; height: 13px; }

/* ---- assortiment intro columns ---- */
.assort-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.assort-col h3 { font-size: 1.15rem; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }
.assort-col h3 svg { width: 20px; height: 20px; color: var(--yellow-600); }
.assort-col p { color: var(--muted); font-size: .92rem; }

.bg-white { background: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Telefoon in de header: op élke breedte een compacte icoonknop.
   In de referentie stond hieromheen @media (max-width: 1200px) en toonde de
   desktop het label "Vragen? Bel …". De shop heeft een winkelwagenknop in de
   header bij; met logo, zes navigatie-items, telefoonlabel, wagen en
   offerteknop is de header dan 1298px breed en past hij nooit in de
   container van 1240px — op 1400px werd de offerteknop afgekapt
   (screenshotcontrole 2026-09-24). Het nummer blijft in het aria-label staan,
   dus de link houdt een naam voor schermlezers; de topbar en de footer tonen
   het nummer voluit. */
.header-phone {
  width: 44px; height: 44px; flex: none;
  justify-content: center;
  gap: 0;
  background: var(--yellow);
  color: #fff;
}
.header-phone svg { width: 19px; height: 19px; color: #fff; }
.header-phone-label { display: none; }
@media (max-width: 1080px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .catalog-layout { grid-template-columns: 1fr; }
  .filter-panel { position: static; }
  .catalog-grid { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 40px; }
  .split-media { aspect-ratio: 16/9; }
}
@media (max-width: 980px) {
  .topbar { display: none; }
  /* .header-phone blijft staan: dit is vanaf hier de enige directe actie in
     de header naast het menu. */
  .main-nav, .header-search { display: none; }
  .nav-toggle { display: flex; }
  /* Het uitgeklapte menu (.main-nav.open) staat in blok 18. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 34px; }
  .projects-grid { grid-template-columns: 1fr; }
  .social-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid, .feature-cols { grid-template-columns: 1fr; }
  .steps-grid, .assort-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .product-grid, .catalog-grid { grid-template-columns: 1fr; }
  /* Footer: drie linkkolommen naast elkaar in twee kolommen i.p.v. 24 links
     onder elkaar (dat was 4,5 schermhoogte footer). Merkblok over de volle breedte. */
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px 18px; }
  /* Merkblok en Bedrijfsgegevens over de volle breedte: drie linkkolommen in
     twee sporen lieten Bedrijfsgegevens alleen in een halve kolom staan, waar
     "BTW" los van het nummer brak. */
  .footer-brand, .footer-top > .footer-col:last-child { grid-column: 1 / -1; }
  .footer-col ul li { margin-bottom: 8px; font-size: .84rem; }
  .social-grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 60px 0; }
  .hero-inner { min-height: 460px; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   WaterTanking — content components (DeLo copy-deck)
   ========================================================================== */

/* logo wordmark */
.logo .logo-word { letter-spacing: -.02em; }
.logo-sub { font-size: .62rem; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; margin-top: 2px; }

/* hero trust line (vervangt de review-score) */
.hero-trust {
  display: inline-flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: .92rem; color: rgba(255,255,255,.82); margin-bottom: 26px;
}
.hero-trust span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hero-trust svg { width: 15px; height: 15px; color: var(--hl); }

/* USP-balk: het enige blok onder de homepage-hero (besluit eigenaar
   30-09-2026, HOME.usps in site-content.js): icoon, korte kop, één regel.
   Sinds 26-10-2026 zoals de cijferbalk van koelaanhangerdirect.nl: een
   zwevende witte kaart die met 44px (telefoon 28px) over de onderrand van de
   hero valt; de hero heeft daarvoor onderin meer ruimte (blok 16). De kaart
   is zo breed als de container: de linkerrand staat gelijk met de hero-tekst
   en de sectiekoppen.
   Uitlijning (eigenaar 26-10-2026, "zorg dat dit mooi uitgelijnd is"): eerst
   stonden icoon en tekst verticaal gecentreerd in de cel, zodat koppen en
   iconen verschoven met de lengte van de omschrijving (2 of 3 regels). Nu
   staat in elke cel bovenaan het icoon met de kop op dezelfde hoogte, en de
   omschrijving daaronder over de volle breedte van de cel, op hoogstens
   19em en gebalanceerd: zo is elke omschrijving twee regels, op elke
   breedte vanaf 320px. Vier kolommen vanaf 1240px, daaronder 2 × 2 (een
   kolom was daar te smal voor icoon plus "Exclusief distributeur") en op een
   telefoon onder elkaar. De cellen van een rij zijn even hoog, dus ook de
   scheidingslijnen. */
.usp-strip-wrap { position: relative; z-index: 4; margin-top: -44px; }
.usp-strip {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 6px; list-style: none;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(15, 20, 30, .06), 0 18px 40px -24px rgba(15, 20, 30, .4);
}
.usp-block {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start;
  gap: 10px 12px; min-width: 0; padding: 18px 20px; border-left: 1px solid var(--line);
}
.usp-block:first-child { border-left: 0; }
.usp-block .ico { width: 40px; height: 40px; border-radius: var(--r-control); background: var(--yellow-soft); color: var(--yellow-600); display: grid; place-items: center; }
.usp-block .ico svg { width: 21px; height: 21px; }
.usp-block .usp-kop { font-size: 1.125rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); }
.usp-block p:not(.usp-kop) { grid-column: 1 / -1; max-width: 19em; font-size: .85rem; color: var(--muted); line-height: 1.45; text-wrap: balance; }
/* Twee kolommen onder 1240px: een lijn tussen de kolommen en tussen de rijen. */
@media (max-width: 1239px) {
  .usp-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .usp-block:nth-child(3) { border-left: 0; }
  .usp-block:nth-child(n+3) { border-top: 1px solid var(--line); }
}

/* product-grid 3 koloms variant + rijkere kaarten */
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cat-legend { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; font-size: .86rem; color: var(--muted); }
.cat-legend span { display: inline-flex; align-items: center; gap: 8px; }
.cat-legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.product-badge.badge-schoon { background: var(--yellow); }
.product-badge.badge-vuil   { background: #4a5058; }
.product-badge.badge-trailer{ background: var(--dark); }
.product-badge.badge-new    { background: var(--hl); color: var(--ink); }
.product-badge.badge-right  { left: auto; right: 12px; }
.product-media.media-vuil   { background: linear-gradient(135deg, #dfe6ea, #c3ccd2); }

.product-bullets { margin: 2px 0 16px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.product-bullets li { display: flex; gap: 10px; font-size: .87rem; color: #454b52; line-height: 1.45; }
.product-bullets li svg { width: 15px; height: 15px; color: var(--yellow-600); flex: none; margin-top: 3px; }
.spec-line { font-size: .8rem; color: var(--muted); margin-bottom: 18px; }
.spec-line .ph { display: inline-block; border: 1px dashed #b8bec6; color: #7b838c; border-radius: 5px; padding: 1px 8px; font-size: .76rem; }
.spec-line .amount { color: var(--ink); font-weight: 800; font-size: 1rem; }
.card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card-ctas .btn { flex: 1 1 96px; }
.btn-sm { padding: 12px 16px; font-size: .9rem; }

/* toepassingen — statisch 4-koloms grid */
.sector-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

/* klikbare sector-kaarten (link naar sector-landingspagina) */
a.sector-card { color: inherit; transition: transform .18s ease, box-shadow .18s ease; }
a.sector-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.sector-card .sector-body { display: flex; flex-direction: column; flex: 1; }
.sector-media svg { color: var(--yellow-600); opacity: .92; }
.sector-link { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: .9rem; color: var(--yellow-600); }
.sector-link svg { width: 15px; height: 15px; transition: transform .15s ease; }
a.sector-card:hover .sector-link svg { transform: translateX(4px); }
.sector-media img { transition: transform .28s ease; }
a.sector-card:hover .sector-media img { transform: scale(1.04); }

/* SEO-leesblok */
.reading-grid { display: grid; grid-template-columns: 1.55fr 1fr; gap: 52px; align-items: start; }
.reading-prose p { margin-bottom: 16px; color: #3b4046; }
.reading-prose p strong { color: var(--ink); }
.why-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 32px; position: sticky; top: 100px; }
.why-box h3 { font-size: 1.2rem; margin-bottom: 20px; }
.why-box ul li { display: flex; gap: 13px; margin-bottom: 15px; font-size: .92rem; color: rgba(255,255,255,.86); line-height: 1.5; }
.why-box ul li:last-child { margin-bottom: 0; }
.why-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: 1px; }
.why-box .tick svg { width: 12px; height: 12px; }
.why-box b { color: #fff; }

/* brand-panel in de 'Over Watertankie' media */
.brand-panel { text-align: center; color: #fff; padding: 40px; }
.brand-panel .bp-mark { width: 84px; height: 84px; margin: 0 auto 20px; background: var(--yellow); display: grid; place-items: center; }
.brand-panel .bp-mark svg { width: 46px; height: 46px; color: #fff; }
.brand-panel .bp-big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; }
.brand-panel .bp-sub { color: rgba(255,255,255,.72); margin-top: 6px; }

/* video-reel (verticale YouTube Short) in de 'Over Watertankie' media */
.split-media.video-stage {
  aspect-ratio: auto;
  background: none;          /* donkere stage-achtergrond weg */
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.video-reel {
  position: relative;
  width: 100%;
  max-width: 288px;
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 20px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 26px 60px rgba(0,0,0,.45);
  border: 4px solid rgba(255,255,255,.1);
}
.video-reel iframe,
.video-reel .video-el { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; background: #000; }
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; cursor: pointer; padding: 0;
  background: rgba(4, 12, 20, .14);
  display: grid; place-items: center;
  transition: background .15s ease;
}
.video-play:hover { background: rgba(4, 12, 20, .28); }
.video-play .pbtn {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--yellow); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.video-play:hover .pbtn { transform: scale(1.09); }
.video-play .pbtn svg { width: 30px; height: 30px; margin-left: 3px; }
.video-reel.playing .video-play { display: none; }
.video-caption {
  display: inline-flex; align-items: center; gap: 9px;
  color: #fff; font-weight: 600; font-size: .95rem;
}
.video-caption .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--hl); box-shadow: 0 0 0 4px rgba(140, 194, 255, .25); }

/* offerteformulier */
.offer-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.offer-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; }
.field label .req { color: #c0392b; }
.field input, .field textarea, .field select {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink);
}
.field input, .field select { height: 48px; }
.field textarea { resize: vertical; min-height: 90px; }
/* iOS Safari zoomt automatisch in zodra een veld kleiner is dan 16px, en ná die
   zoom kan de bezoeker de pagina zijwaarts slepen. Op touchformaten dus minimaal 16px. */
@media (max-width: 1024px) {
  .field input, .field textarea, .field select,
  .catalog-toolbar select { font-size: 16px; }
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(0, 101, 215, .18); }
.offer-form .btn { width: 100%; margin-top: 6px; }
.offer-form .btn[disabled] { opacity: .65; cursor: progress; }
.form-note { font-size: .82rem; color: var(--muted); margin-top: 12px; text-align: center; }
.form-error { margin-top: 14px; padding: 12px 14px; border-radius: 10px; background: #fdecec; border: 1px solid #f3c2c2; color: #9b1c1c; font-size: .88rem; line-height: 1.5; }
.form-error[hidden] { display: none; }
.turnstile-slot { margin-top: 16px; }
.trust-box { background: var(--dark); color: #fff; border-radius: var(--radius); padding: 34px 30px; }
.trust-box h3 { font-size: 1.35rem; margin-bottom: 22px; }
.trust-box ul li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 15px; font-weight: 500; }   /* vinkje (24px) op de eerste regel; de contactregels eronder erven dit, hun icoon heeft margin-top */
.trust-box .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.trust-box .tick svg { width: 12px; height: 12px; }
.trust-box .contact-block { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.12); }
.trust-box .contact-block li { display: flex; gap: 11px; margin-bottom: 11px; font-size: .9rem; font-weight: 400; color: rgba(255,255,255,.82); }
.trust-box .contact-block svg { width: 15px; height: 15px; color: var(--hl); flex: none; margin-top: 3px; }

/* placeholder-hint (aan te leveren door DeLo) */
.ph-inline { display: inline-block; border: 1px dashed #b8bec6; color: #7b838c; border-radius: 5px; padding: 0 7px; font-size: .82rem; }

@media (max-width: 1080px) {
  .reading-grid { grid-template-columns: 1fr; gap: 34px; }
  .why-box { position: static; }
  .offer-grid { grid-template-columns: 1fr; }
  .sector-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  /* Eén kolom: compact, met een lijn tussen de punten in plaats van ernaast.
     De kaart valt hier 28px over de hero. */
  .usp-strip-wrap { margin-top: -28px; }
  .usp-strip { grid-template-columns: minmax(0, 1fr); padding: 4px 14px; border-radius: var(--radius-sm); }
  .usp-block, .usp-block:nth-child(3) { gap: 8px 12px; padding: 14px 0; border-left: 0; }
  .usp-block + .usp-block { border-top: 1px solid var(--line); }
  .usp-block .ico { width: 36px; height: 36px; border-radius: var(--r-control-sm, 8px); }
  .usp-block .ico svg { width: 19px; height: 19px; }
  .usp-block .usp-kop { font-size: 1rem; }
  .sector-grid { grid-template-columns: 1fr; }
  .product-grid.cols-3 { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Contactpagina — contactkaarten + kaart
   ========================================================================== */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }   /* geen margin-bottom: de sectie heeft al padding, eronder stond 118px tegen 84px erboven */
.contact-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; text-align: center;
  transition: transform .18s ease, box-shadow .18s ease;
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.contact-card .ci-ico {
  width: 54px; height: 54px; margin: 0 auto 16px;
  background: var(--yellow-soft); color: var(--yellow-600);
  display: grid; place-items: center; border-radius: 12px;
}
.contact-card .ci-ico svg { width: 26px; height: 26px; }
.contact-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
/* Op /contact staan de kaarten direct onder de h1: hun titel is een label,
   geen kop (anders h1 → h3, SEO-check 29-10-2026). Zelfde opmaak als de h3. */
.contact-card .ci-titel { font-size: 1.1rem; margin-bottom: 6px; color: inherit; font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
.contact-card p { color: var(--muted); font-size: .95rem; }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); line-height: 0; }
/* De kaart vult de hoogte van de kolom ernaast (.about-feature, stretch); 380px
   is het minimum, ook als hij alleen staat. */
.map-embed iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ==========================================================================
   Blog — overzicht + kaarten
   ========================================================================== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
a.blog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.blog-media { position: relative; aspect-ratio: 16 / 10; background: #eef0f3; overflow: hidden; }
.blog-media img { width: 100%; height: 100%; object-fit: contain; padding: 22px; mix-blend-mode: multiply; }
.blog-tag {
  position: absolute; top: 14px; left: 14px;
  background: var(--ink); color: #fff; font-size: .72rem; font-weight: 600;
  padding: 6px 12px; border-radius: 6px;
}
.blog-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.blog-meta { font-size: .78rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.blog-body h2, .blog-body h3 { font-size: 1.2rem; margin-bottom: 10px; line-height: 1.25; }
.blog-body p { font-size: .9rem; color: var(--muted); margin-bottom: 18px; flex: 1; }
.blog-card .arrow-link { color: var(--ink); }
.blog-card .muted-link { color: var(--muted); font-weight: 600; font-size: .9rem; }
.blog-card.is-soon { opacity: .92; }
.blog-card.is-soon .blog-tag { background: var(--yellow-600); }

/* ==========================================================================
   Blog-artikel
   ========================================================================== */
.article { padding: 56px 0 80px; }
.article-head { max-width: 760px; margin: 0 auto 34px; }
.article-head .breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 20px; }
.article-head .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.article-head h1 { font-size: clamp(2rem, 4.4vw, 3rem); }
.article-body { max-width: 760px; margin: 0 auto; }
.article-body .lead-p { font-size: 1.2rem; color: var(--ink); margin-bottom: 28px; line-height: 1.55; }
.article-body h2 { font-size: 1.5rem; margin: 34px 0 12px; }
.article-body p { color: #3b4046; margin-bottom: 16px; line-height: 1.7; }
.article-body strong { color: var(--ink); }
.article-list { margin: 6px 0 24px; display: flex; flex-direction: column; gap: 10px; }
.article-list li { position: relative; padding-left: 26px; color: #3b4046; line-height: 1.6; }
.article-list li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 10px; height: 10px; border-radius: 3px; background: var(--yellow);
}
.callout {
  background: var(--yellow-soft); border-left: 4px solid var(--yellow);
  border-radius: 10px; padding: 22px 24px; margin: 26px 0; color: #2a2e33;
  line-height: 1.6;
}
.article-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; margin-top: 40px; padding: 30px 32px;
  background: var(--dark); color: #fff; border-radius: var(--radius);
}
.article-cta > div { flex: 1 1 320px; min-width: 0; }
.article-cta .btn { flex: none; }
.article-cta h3 { font-size: 1.3rem; margin-bottom: 6px; }
.article-cta p { color: rgba(255,255,255,.75); }

@media (max-width: 1080px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .blog-grid { grid-template-columns: 1fr; }
  .article-cta { flex-direction: column; align-items: flex-start; }
  .article-cta > div { flex: 0 0 auto; }
}

/* ==========================================================================
   Mobiele polish
   ========================================================================== */
@media (max-width: 980px) {
  .site-header .container { gap: 12px; }
  /* header-CTA behouden op tablet, maar compacter. min-height houdt hem op
     dezelfde 44px als de belknop en het hamburgermenu ernaast — zonder dat
     zakt hij naar 41px en staan de drie net niet gelijk. */
  .header-actions .btn { padding: 13px 18px; font-size: .92rem; min-height: 44px; }
}
@media (max-width: 620px) {
  .container { padding-inline: 18px; }
  /* sectiekop: titel + arrow-link onder elkaar i.p.v. geperst naast elkaar */
  .section-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  /* highlight mag afbreken op smalle schermen (voorkomt afkappen) */
  .hl { white-space: normal; }
  /* Redundante header-CTA verbergen op mobiel; pagina's zonder hamburgermenu
     (bedankt.html) houden hun knop via .keep-on-mobile.
     Bewust GEEN :has(): dat ontbreekt in Firefox <121 en oudere Safari/Chrome,
     waardoor de knop daar bleef staan en de header vanaf 360px horizontaal overliep. */
  .header-actions .btn:not(.keep-on-mobile) { display: none; }
  .hero h1 { font-size: clamp(1.85rem, 8.5vw, 2.5rem); line-height: 1.18; }
  .hero .lead { font-size: 1.02rem; line-height: 1.7; }
  .hero-kh { margin-top: 28px; padding-top: 22px; }
  .page-hero h1 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .section-title { font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .hero-ctas { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .cta-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .cta-actions .btn { width: 100%; }
  .btn { padding: 16px 22px; }
  .map-embed iframe { height: 300px; min-height: 0; }
  .article-body .lead-p { font-size: 1.08rem; }
  .split-media.video-stage { padding: 0; }
  .video-reel { max-width: 250px; }
}
@media (max-width: 400px) {
  /* Drie 44px-knoppen (bellen, wagen, menu) naast het logo: op 320px liep de
     header 41px over. Kleiner woordmerk en krappere tussenruimte. (Het
     "shop"-suffix dat hier verdween, bestaat sinds het woordmerk Wagendepot
     van 30-09-2026 niet meer.) */
  .logo { font-size: 1.05rem; gap: 8px; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .site-header .container { gap: 8px; }
  .header-actions { gap: 8px; }
  .hero-inner { padding: 70px 0 90px; }
  /* de enige header-knop die mobiel blijft staan, moet ook op 320px passen */
  .header-actions .btn.keep-on-mobile { padding: 11px 14px; font-size: .85rem; }
}

/* ==========================================================================
   Productpagina (PDP) — Rentwereld-indeling in Watertankie-huisstijl
   ========================================================================== */
.pdp { padding: 40px 0 30px; }
.pdp .breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 26px; }
.pdp .breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

.pdp-top { display: grid; grid-template-columns: 1.02fr 1fr; gap: 50px; align-items: start; }

/* ---- galerij (linkerkolom) ---- */
.pdp-gallery { position: sticky; top: 96px; }
.pdp-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  aspect-ratio: 4 / 3;
  display: grid; place-items: center;
  overflow: hidden;
}
.pdp-stage img { width: 100%; height: 100%; object-fit: contain; padding: 34px; mix-blend-mode: multiply; }
.pdp-stage .product-badge { z-index: 2; }
.pdp-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 14px; }
.pdp-thumb {
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  aspect-ratio: 1 / 1; overflow: hidden; cursor: pointer; padding: 0;
  display: grid; place-items: center; position: relative;
  transition: border-color .15s ease;
}
.pdp-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; mix-blend-mode: multiply; }
.pdp-stage.is-photo img,
.pdp-thumb.is-photo img { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.pdp-thumb:hover { border-color: #b8bec6; }
.pdp-thumb.active { border-color: var(--yellow-600); box-shadow: 0 0 0 2px rgba(0, 101, 215, .18); }
.pdp-thumb.is-empty {
  cursor: default; color: #9aa1a9; font-size: .7rem; font-weight: 600; text-align: center;
  background: repeating-linear-gradient(135deg, #f2f3f5, #f2f3f5 8px, #e9ebef 8px, #e9ebef 16px);
}
.pdp-gallery-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 18px; }
.pdp-gallery-links a { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links a:hover { color: var(--yellow-600); }
.pdp-gallery-links svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }

/* ---- samenvatting (rechterkolom) ---- */
.pdp-summary h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin-bottom: 14px; }
.pdp-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .82rem; color: var(--yellow-600); margin-bottom: 16px; }
.pdp-eyebrow .tag { color: #fff; padding: 6px 11px; font-size: .72rem; border-radius: 5px; }
.pdp-eyebrow .tag.t-schoon { background: var(--yellow); }
.pdp-eyebrow .tag.t-vuil { background: #4a5058; }
.pdp-eyebrow .tag.t-trailer { background: var(--dark); }
.pdp-eyebrow .tag.t-osmose { background: var(--dark); }
.pdp-trust { display: block; font-size: .9rem; color: var(--muted); margin-bottom: 22px; line-height: 1.6; }
.pdp-trust .stars { color: var(--yellow); letter-spacing: 1px; }
.pdp-trust b { color: var(--ink); font-weight: 700; }
.pdp-trust > span { display: inline-block; }   /* merk, artikelnummer en categorie elk heel naar de volgende regel (product.js) */
.pdp-lead { font-size: 1.05rem; color: #3b4046; margin-bottom: 22px; }

.pdp-key { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; }
.pdp-key li { display: flex; gap: 12px; font-size: .96rem; color: #3b4046; line-height: 1.5; }
.pdp-key .tick { width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: calc((1.5em - 24px) / 2); }   /* midden op de eerste regel (23px); 1px omlaag stond 1,5px te laag */
.pdp-key .tick svg { width: 13px; height: 13px; }
.pdp-key b { color: var(--ink); }

.pdp-buy {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: 26px 26px 28px; margin-bottom: 22px;
}
.pdp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pdp-price .from { font-size: .82rem; color: var(--muted); }
.pdp-price .amount { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.pdp-price .unit { font-size: .95rem; color: var(--muted); font-weight: 600; }
.pdp-price-note { font-size: .82rem; color: var(--muted); margin-bottom: 20px; }
.pdp-buy-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-buy-row .btn { flex: 1 1 170px; }
.pdp-qty { display: flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.pdp-qty button { width: 44px; height: 52px; border: 0; background: #f2f3f5; font-size: 1.2rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.pdp-qty button:hover { background: #e4e7eb; }
.pdp-qty input { width: 46px; height: 52px; border: 0; text-align: center; font-family: inherit; font-size: 1rem; font-weight: 700; color: var(--ink); -moz-appearance: textfield; }
.pdp-qty input::-webkit-outer-spin-button, .pdp-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pdp-term { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-term svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
/* white-space normal: de knoptekst moet op smalle telefoons kunnen afbreken */
.pdp-whatsapp { width: 100%; margin-top: 12px; white-space: normal; line-height: 1.3; }
.pdp-whatsapp-note { font-size: .82rem; color: var(--muted); margin-top: 9px; text-align: center; }

/* Icoon op de eerste regel en in een kolom van 24px, gelijk met de vinkcirkels
   van .pdp-key erboven: de tekst begint in beide lijsten op +36px (was 27 tegen
   36). Eerst stond het icoon op het midden van twee regels (11,5px te laag) en
   stond een item van één regel gecentreerd naast een buur van twee, 11px lager. */
.pdp-mini-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; align-items: start; }
.pdp-mini-usps li { display: flex; align-items: flex-start; gap: 12px; font-size: .88rem; font-weight: 500; color: var(--ink); line-height: 1.5; }
.pdp-mini-usps svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; margin: calc((1.5em - 17px) / 2) 3.5px 0; }

/* ---- omschrijving + specificaties ---- */
.pdp-detail-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 52px; align-items: start; }
.pdp-prose h2 { font-size: 1.5rem; margin-bottom: 14px; }
.pdp-prose p { color: #3b4046; margin-bottom: 15px; line-height: 1.7; }
.pdp-prose strong { color: var(--ink); }

.spec-table {
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: #fff; position: sticky; top: 96px;
}
.spec-table h3 { font-size: 1.1rem; padding: 20px 24px; background: var(--dark); color: #fff; }
.spec-table dl { margin: 0; }
.spec-table .spec-row { display: flex; justify-content: space-between; gap: 18px; padding: 13px 24px; border-top: 1px solid var(--line); font-size: .92rem; }
.spec-table .spec-row dt { color: var(--muted); flex: none; }
.spec-table .spec-row dd { font-weight: 600; color: var(--ink); text-align: right; text-wrap: balance; }   /* twee gelijke regels in plaats van één los woord ("… logo in de / zijwand") */

/* ---- standaard geleverd ---- */
/* Eén kolom, zoals Uitrusting en "Niet meegeleverd" eronder. In twee kolommen
   stond het derde item (69 van de 76 producten hebben er drie) alleen op de
   laatste rij naast een lege cel, en liepen de teksten in kolommen van 322px
   op tot vier regels. */
.included-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.included-grid li { display: flex; gap: 14px; align-items: flex-start; font-size: .98rem; color: #3b4046; line-height: 1.5; }
.included-grid .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; margin-top: calc((1.5em - 26px) / 2); }   /* midden op de eerste regel (23,5px), was 2,5px te laag */
.included-grid .tick svg { width: 13px; height: 13px; }
.included-grid b { color: var(--ink); }

/* ---- accessoires / opties ---- */
.acc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.acc-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease;
}
.acc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.acc-card .acc-ico { width: 50px; height: 50px; border-radius: 12px; background: var(--yellow-soft); color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 16px; }
.acc-card .acc-ico svg { width: 25px; height: 25px; }
.acc-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.acc-card p { font-size: .88rem; color: var(--muted); line-height: 1.5; }

@media (max-width: 1080px) {
  .pdp-top { grid-template-columns: 1fr; gap: 34px; }
  .pdp-gallery { position: static; }
  .pdp-detail-grid { grid-template-columns: 1fr; gap: 34px; }
  .spec-table { position: static; }
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .acc-grid { grid-template-columns: 1fr; }
  .pdp-mini-usps { grid-template-columns: 1fr; }
  .pdp-buy-row .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Offerte-modal (pop-up) — herbruikbaar over productpagina's
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 22, 26, .62);
  display: none; align-items: flex-start; justify-content: center;
  padding: 44px 20px; overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  position: relative; width: 100%; max-width: 620px; margin: auto;
  background: #fff; border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
  padding: 34px;
  animation: modalIn .22s ease;
}
@keyframes modalIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/* top/right: het midden van de knop op het midden van de kop (34px padding +
   halve regel van de h2); op een telefoon, met minder padding, 16px (hieronder). */
.modal-close {
  position: absolute; top: 27px; right: 24px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: #e9ebef; color: var(--ink); font-size: 1.5rem; line-height: 1; cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease;
}
.modal-close:hover { background: #dde0e5; }
/* Alleen de kop maakt ruimte voor de sluitknop; de intro eronder staat al
   onder de knop en krijgt de volle breedte (eerst eindigde hij met één los
   woord). Op 320px schaalt de kop mee, zodat "Offerte aanvragen" en "Koop je
   zakelijk?" op één regel passen. */
.modal-head { margin-bottom: 20px; }
.modal-head .section-eyebrow { margin-bottom: 8px; }
.modal-head h2 { font-size: clamp(1.25rem, 7vw, 1.5rem); margin-bottom: 8px; padding-right: 44px; }
.modal-head p { color: var(--muted); font-size: .95rem; text-wrap: pretty; }
/* "Aanvraag voor:" en de productnaam naast elkaar op één basislijn; de naam
   mag op een telefoon over twee tot vier regels lopen. */
.modal-product {
  display: flex; align-items: baseline; gap: 12px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px; margin-bottom: 20px; font-weight: 600; font-size: .95rem; color: var(--ink);
}
.modal .offer-form { border: 0; padding: 0; box-shadow: none; }

@media (max-width: 620px) {
  .modal-overlay { padding: 16px; }
  .modal { padding: 24px 22px; }
  .modal-close { top: 16px; right: 16px; }
}

/* ==========================================================================
   Over ons — intro + fotomozaïek, waarden, beloften, stats, team
   ========================================================================== */
.about-intro { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 50px; align-items: start; }
.about-intro h2 { font-size: clamp(2rem, 4vw, 3rem); }
.about-intro .intro-copy p { color: #3b4046; margin-bottom: 14px; line-height: 1.7; }
.about-intro .intro-copy p:last-child { margin-bottom: 0; font-weight: 600; color: var(--ink); }

/* Over ons — rustige feature-foto + stat (vervangt het mozaïek) */
/* stretch: de kaart (contact) begint en eindigt gelijk met de kolom ernaast;
   gecentreerd stond hij 28px lager en hield hij 28px eerder op. */
.about-feature { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 32px; margin-top: 44px; align-items: stretch; }
.about-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
.about-feature-side { display: flex; flex-direction: column; gap: 22px; }
.about-feature-side .stat-tile { border-radius: var(--radius); }
.about-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 30px; }
.about-note h2 { font-size: 1.2rem; margin-bottom: 10px; }
.about-note p { color: #3b4046; line-height: 1.65; }
.about-note p b { color: var(--ink); }
@media (max-width: 900px) {
  .about-feature { grid-template-columns: 1fr; }
  .about-photo { max-width: 420px; }
}

.about-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 150px; gap: 16px; margin-top: 44px; }
.about-mosaic > * { border-radius: var(--radius); overflow: hidden; position: relative; }
.about-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-mosaic .contain { background: #eef0f3; }
.about-mosaic .contain img { object-fit: contain; padding: 16px; mix-blend-mode: multiply; }
.mos-tall { grid-row: span 2; }
.mos-big { grid-column: span 2; grid-row: span 2; }
.stat-tile {
  background: linear-gradient(150deg, #0065d7, #00458f);
  color: #fff; padding: 24px; display: flex; flex-direction: column; justify-content: center;
}
.stat-tile .big { font-size: 2.6rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.stat-tile .lbl { margin-top: 8px; font-weight: 600; opacity: .95; }

/* Daarom Watertankie — waardenkolommen */
.values-head { text-align: center; margin-bottom: 40px; }
.values-head h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); }
.values-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.value-col { border-top: 2px solid var(--yellow); padding-top: 18px; }
.value-col h3 { font-size: 1.12rem; margin-bottom: 10px; }
.value-col p { color: var(--muted); font-size: .92rem; line-height: 1.55; }

/* Stats-rij */
.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding-top: 40px; border-top: 1px solid var(--line); }
.stat-item .num { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 800; color: var(--yellow); letter-spacing: -.03em; line-height: 1; }
.stat-item .lbl { margin-top: 8px; color: var(--muted); font-weight: 500; }

/* Ons team */
.team-layout { display: grid; grid-template-columns: 1fr 1.1fr; gap: 44px; align-items: center; }
.team-layout .team-block { max-width: none; }
.team-photo { margin: 0; }
.team-photo img { width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 900px) {
  .team-layout { grid-template-columns: 1fr; gap: 30px; }
}
.team-block { max-width: 720px; }
.team-block p { color: #3b4046; margin-bottom: 16px; line-height: 1.7; }

@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 24px; }
  .values-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
  .stats-row { grid-template-columns: repeat(2, 1fr); gap: 30px 24px; }
  .about-mosaic { grid-template-columns: repeat(2, 1fr); }
  .mos-big { grid-column: span 2; }
}
@media (max-width: 520px) {
  .values-grid { grid-template-columns: 1fr; }
  /* minmax(0,1fr) i.p.v. 1fr: anders kan de kolom niet kleiner worden dan zijn
     min-content ("30.000 L") en duwt hij de rij buiten het scherm. */
  .stats-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item .num { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .about-mosaic { grid-auto-rows: 130px; }
}

/* ==========================================================================
   Zwevende WhatsApp-knop — rechtsonder op elke pagina (opgebouwd in main.js)
   ========================================================================== */
.wa-float {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; /* onder de offerte-modal (200) */
  display: inline-flex; align-items: center; gap: 10px;
  background: #25d366; color: #fff;
  font-weight: 600; font-size: .95rem; line-height: 1;
  padding: 15px 22px; border-radius: 999px;
  box-shadow: 0 10px 28px rgba(20, 22, 26, .3);
  transition: transform .15s ease, background .15s ease;
}
.wa-float:hover { transform: translateY(-2px); background: #1da851; }
.wa-float svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 767px) {
  .wa-float { right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; justify-content: center; }
  .wa-float span { display: none; }
  .wa-float svg { width: 28px; height: 28px; }
}

/* ==========================================================================
   Toiletzonderafvoer.nl — extra conversiecomponenten
   Toegevoegd bovenop het Watertankie-ontwerp. Alles hergebruikt de bestaande
   tokens (--yellow = rood accent, --dark = antraciet) zodat de look gelijk blijft.
   ========================================================================== */

/* ---- badges (kaarten, PDP-galerij) ----
   De verhuursite had een badge per wagentype (vacuüm/standaard/luxe/miva).
   De shop kent één bestelwijze (alles is bestelbaar) plus een neutraal
   subtype; die staan als .badge-koop / .badge-sub in het blok Shopcomponenten
   onderaan. Alleen 'keuze' (aanbevolen) blijft hier over. */
.product-badge.badge-keuze     { background: var(--hl); color: var(--ink); }

/* capaciteitsregel op productkaarten (gasten · toiletten · urinoirs) */
.cap-line { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .82rem; color: var(--muted); margin: -8px 0 14px; }
.cap-line span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cap-line svg { width: 15px; height: 15px; color: var(--yellow-600); flex: none; }

/* ---- keuzehulp: "Hoeveel gasten?" → aanbevolen wagen ---- */
/* 20px opzij, net als het filterpaneel (.catalog-filters) en de productkaart
   (.product-body) eronder: in de drie witte blokken van de catalogus begint de
   tekst op dezelfde x (was 28, 22-24 en 20px; tot 8px verspringing). */
.keuzehulp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 20px; box-shadow: var(--shadow-sm); }
.keuzehulp .kh-kop { font-size: 1.15rem; line-height: 1.2; margin-bottom: 6px; }
.keuzehulp > p { color: var(--muted); font-size: .92rem; margin-bottom: 16px; }
.kh-row { display: flex; flex-wrap: wrap; gap: 10px; }
.kh-row + .kh-row { margin-top: 10px; }
.kh-label { width: 100%; font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 6px 0 -2px; }
.kh-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px; border: 1.5px solid var(--line); border-radius: 999px;
  background: #fff; font-weight: 600; font-size: .92rem; color: var(--ink);
  transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease;
}
.kh-btn:hover, .kh-btn.active { border-color: var(--yellow-600); color: var(--yellow-600); background: var(--yellow-soft); transform: translateY(-1px); }
.kh-btn svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; }
/* variant in de donkere hero */
.hero-kh { margin-top: 30px; }
.hero-kh p { font-size: .86rem; color: rgba(255,255,255,.72); margin-bottom: 10px; font-weight: 600; }
.hero-kh .kh-btn { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); color: #fff; }
.hero-kh .kh-btn svg { color: var(--hl); }
.hero-kh .kh-btn:hover { background: #fff; color: var(--ink); border-color: #fff; }
.hero-kh .kh-btn:hover svg { color: var(--yellow-600); }

/* ---- vergelijkingstabel (alle wagens naast elkaar) ---- */
.compare-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; -webkit-overflow-scrolling: touch; }
.compare { width: 100%; border-collapse: collapse; min-width: 900px; font-size: .9rem; }
.compare th, .compare td { padding: 13px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { background: var(--dark); color: #fff; font-weight: 700; font-size: .85rem; white-space: nowrap; position: sticky; top: 0; }
.compare thead th a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }
.compare thead th a:hover { text-decoration-color: #fff; }
.compare thead th small { display: block; font-weight: 500; color: rgba(255,255,255,.65); font-size: .74rem; margin-top: 2px; }
.compare tbody th { font-weight: 600; color: var(--ink); white-space: nowrap; background: #f7f8fa; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .ok { color: var(--yellow-600); font-weight: 700; }
.compare .no { color: #9b1c1c; font-weight: 700; }
.compare .hi { background: var(--yellow-soft); }
/* gemarkeerde kolom in de kop: donkere kop blijft leesbaar, rood accent i.p.v. lichtrood */
.compare thead th.hi { background: var(--yellow-600); color: #fff; }
.compare thead th.hi a { color: #fff; }
.compare thead th.hi small { color: rgba(255,255,255,.8); }
.compare tfoot td { padding: 14px 16px; border-top: 1px solid var(--line); }
.compare tfoot .btn { padding: 11px 14px; font-size: .85rem; width: 100%; }
.compare-hint { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin-top: 10px; }
.compare-hint svg { width: 15px; height: 15px; }

/* ---- plus- en minpunten (Coolblue-patroon), eerlijk per product ---- */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 4px 0 30px; }
.proscons > div { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.proscons h3 { font-size: 1rem; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.proscons h3 .pc-ico { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 1rem; line-height: 1; font-weight: 800; }
.proscons .pros h3 .pc-ico { background: var(--yellow); }
.proscons .cons h3 .pc-ico { background: #b45309; }
.proscons li { display: flex; gap: 10px; font-size: .92rem; color: #3b4046; margin-bottom: 9px; line-height: 1.5; }
.proscons li:last-child { margin-bottom: 0; }
.proscons li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; }
.proscons .pros li svg { color: var(--yellow-600); }
.proscons .cons li svg { color: #b45309; }

/* ---- "Wat regel je zelf op locatie?" — stroom / water / afvoer / ruimte ---- */
.checklist { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.check-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.check-card .ci { width: 46px; height: 46px; border-radius: 11px; background: var(--yellow-soft); color: var(--yellow-600); display: grid; place-items: center; margin-bottom: 14px; }
.check-card .ci svg { width: 23px; height: 23px; }
.check-card h3 { font-size: 1.05rem; margin-bottom: 6px; }
.check-card p { font-size: .9rem; color: var(--muted); line-height: 1.5; }
.check-card p b { color: var(--ink); }

/* optionele/apart berekende posten: grijze tick i.p.v. rode */
.included-grid.is-optional .tick { background: var(--line); color: var(--muted); }
/* specificatieblad-knop in de galerijlinks: als link opgemaakt */
.pdp-gallery-links button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: .9rem; color: var(--ink); }
.pdp-gallery-links button:hover { color: var(--yellow-600); }
.pdp-gallery-links button svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }
/* header-CTA als <button> (opent de modal) — zelfde maat als de link-variant */
.header-actions button.btn { min-height: 44px; }

/* ---- "Standaard inbegrepen"-strip (schoonmaak, toiletpapier, levering) ---- */
.included-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.included-strip li { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; font-weight: 600; font-size: .92rem; }
.included-strip .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--yellow); color: #fff; display: grid; place-items: center; }
.included-strip .tick svg { width: 13px; height: 13px; }
.on-dark .included-strip li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: #fff; }

/* ---- reviewbadge (alleen tonen met een écht, verifieerbaar cijfer) ---- */
.review-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px 8px 10px; font-size: .88rem; font-weight: 600; color: var(--ink); }
.review-badge .stars { letter-spacing: 1px; font-size: .95rem; }
.review-badge .g { width: 22px; height: 22px; border-radius: 50%; background: #fff; display: grid; place-items: center; border: 1px solid var(--line); font-weight: 800; font-size: .8rem; color: #4285f4; }
.review-badge span.muted { color: var(--muted); font-weight: 500; }
.hero .review-badge { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: #fff; margin-bottom: 22px; }
.hero .review-badge span.muted { color: rgba(255,255,255,.7); }

/* ---- sticky CTA-balk op productpagina's (mobiel/tablet) ---- */
.pdp-sticky {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; /* onder de modal (200), boven de WhatsApp-knop (90 → verschuift) */
  display: none; align-items: center; gap: 10px;
  padding: 10px 24px calc(10px + env(safe-area-inset-bottom));   /* 24px opzij, net als .container: prijs en belknop op de randen van de pagina-inhoud (was 14px) */
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 24px rgba(20, 22, 26, .12);
}
.pdp-sticky.is-visible { display: flex; }
.pdp-sticky .sticky-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.pdp-sticky .sticky-price b { font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.pdp-sticky .sticky-price > span:not([class]) { font-size: .76rem; color: var(--muted); white-space: nowrap; }
.pdp-sticky .btn { flex: 1; padding: 14px 12px; font-size: .92rem; }
.pdp-sticky .btn-ghost { flex: 0 0 auto; padding: 14px 16px; }
@media (min-width: 1081px) { .pdp-sticky { display: none !important; } }
@media (max-width: 620px) { .pdp-sticky { padding-inline: 18px; } }   /* = .container op een telefoon */
body.has-sticky-cta .wa-float { bottom: 86px; }

/* ---- "Direct huren?"-blok in de header-hero van categorieën (Boels-patroon) ---- */
.direct-box { display: inline-flex; align-items: center; gap: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius); padding: 14px 18px; margin-top: 22px; color: #fff; }
.direct-box svg { width: 22px; height: 22px; color: var(--hl); flex: none; }
.direct-box b { display: block; font-size: .95rem; }
.direct-box span { font-size: .84rem; color: rgba(255,255,255,.72); }
.direct-box a { text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); }

/* ---- uitlegpagina: hoe werkt een vacuümtoilet (stappen met iconen) ---- */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.how-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; }
.how-card .hn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); color: #fff; font-weight: 800; margin-bottom: 14px; }
.how-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.how-card p { font-size: .92rem; color: var(--muted); line-height: 1.55; }

/* ---- responsive ---- */
@media (max-width: 1080px) {
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .included-strip { grid-template-columns: repeat(2, 1fr); }
  .how-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .proscons { grid-template-columns: 1fr; }
  .checklist, .included-strip { grid-template-columns: 1fr; }
  .keuzehulp { padding: 20px; }
  .kh-btn { padding: 11px 14px; font-size: .88rem; }
  .compare { min-width: 760px; font-size: .84rem; }
  .compare th, .compare td { padding: 11px 12px; }
}

/* ---- hero-typografie ----
   De kop stond op clamp(…, 6vw, 5rem) met line-height 1.08 uit de globale
   h1-regel. Bij een kop van meer dan drie woorden levert dat een muur van
   vijf krappe regels op. Kleiner én ruimer laat de kop ademen zonder dat hij
   zijn gewicht verliest; de lead krijgt dezelfde behandeling. ---- */
.hero h1 {
  font-size: clamp(2.15rem, 4.4vw, 3.7rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 24px;
}
.hero .lead {
  font-size: 1.1rem;
  line-height: 1.72;
  color: rgba(255, 255, 255, .84);
  max-width: 54ch;
  margin-bottom: 32px;
}
.hero-trust { margin-bottom: 30px; row-gap: 12px; }
/* De keuzehulp is een eigen stap, geen vervolg op de knoppen. Een dunne lijn
   scheelt de bezoeker het gevoel dat alles op één hoop staat. */
.hero-kh {
  margin-top: 34px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.hero-kh p { margin-bottom: 12px; }
.hero-kh .kh-row { gap: 10px; }

/* Dezelfde rust op de smallere hero van categorie-, sector- en uitlegpagina's. */
.page-hero h1 {
  font-size: clamp(1.95rem, 4.2vw, 3.15rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.page-hero p { line-height: 1.7; max-width: 58ch; }

/* ---- split-hero (homepage): tekst links, scherpe foto in kader rechts.
   De bronfoto's zijn max 1000px breed; een full-bleed hero zou ze oprekken.
   Het kader houdt de foto op native resolutie en laat de donkere hero staan. ---- */
.hero--split .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; position: relative; z-index: 2; }
.hero--split .hero-inner { max-width: none; padding: 72px 0 84px; min-height: 0; }
.hero-photo {
  position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 5 / 4; box-shadow: 0 30px 70px rgba(0,0,0,.45); border: 4px solid rgba(255,255,255,.08);
  background: #24282d;
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo .hero-tag {
  position: absolute; left: 16px; bottom: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: .85rem;
  padding: 10px 14px; border-radius: 10px; box-shadow: var(--shadow-sm);
}
.hero-photo .hero-tag svg { width: 16px; height: 16px; color: var(--yellow-600); }
@media (max-width: 980px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-photo { aspect-ratio: 3 / 2; }
  .hero--split .hero-inner { padding: 56px 0 24px; }
  .hero-photo { max-width: 620px; margin-bottom: 56px; }
}
@media (max-width: 620px) {
  .hero--split .hero-inner { padding: 44px 0 20px; }
  .hero-photo { margin-bottom: 44px; border-width: 3px; }
}

/* ---- split-media met foto (dark-section 'Over De-Lo' / over ons) ---- */
.split-media.has-photo { aspect-ratio: 4 / 3; overflow: hidden; background: #141618; }
.split-media.has-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- product-thumbs: 5 kolommen op de PDP (hero + 4 galerij) ---- */
@media (max-width: 620px) { .pdp-thumbs { grid-template-columns: repeat(5, 1fr) !important; gap: 8px; } }

/* ==========================================================================
   Uitlijning & polish — audit 2026-09-04
   ========================================================================== */

/* Rijke productkaarten: .desc { flex: none } staat sinds 30-09-2026 voor elke
   kaart in de basisregel (.product-body .desc). */

/* Vergelijkingstabel: eerste kolom blijft staan bij horizontaal schuiven,
   zodat je op mobiel altijd ziet welke rij je leest. */
.compare th:first-child,
.compare td:first-child { position: sticky; left: 0; z-index: 1; }
.compare thead th:first-child { z-index: 2; }
.compare tfoot td:first-child { background: #fff; }

/* Negen wagens naast elkaar (/huren): iets compacter zodat de tabel binnen
   de container past op desktop; daarvoor viel de laatste kolom buiten beeld
   en moest je ook op een groot scherm schuiven. */
.compare.is-wide { font-size: .86rem; }
.compare.is-wide th, .compare.is-wide td { padding: 12px 10px; }
.compare.is-wide tbody th { white-space: normal; }
.compare.is-wide tfoot td { padding: 12px 10px; }
.compare.is-wide tfoot .btn { padding: 10px 8px; font-size: .82rem; }
@media (max-width: 620px) {
  .compare.is-wide { min-width: 760px; }
}

/* Sticky CTA-balk (PDP, mobiel/tablet) dekte de onderste footerregel af. */
body.has-sticky-cta .site-footer { padding-bottom: 72px; }

/* Aantal-kiezer op de PDP even hoog als de knoppen eronder (mobiel 48px). */
@media (max-width: 620px) {
  .pdp-qty button, .pdp-qty input { height: 46px; }
}

/* Bedankt-pagina: hero vult het scherm, anders bleef er een lege strook
   onder de hero omdat de pagina geen footer heeft. */
.hero--fill .hero-inner { min-height: calc(100vh - 79px); min-height: calc(100svh - 79px); }

/* ---- team (over ons): portretten in kaarten op een vast raster.
   Grid, links uitgelijnd: de kolommen lopen door, ook in een onvolledige
   laatste rij. Eerst flex met een gecentreerde laatste rij; die stond dan een
   halve kolom verschoven (negen mensen: 5 + 4 op desktop, 4 + 4 + 1 op 1024).
   Nu 5 kolommen, 3 onder 1080px (9 = 3 × 3) en 2 op een telefoon, waar een
   losse laatste kaart liggend over de volle breedte staat. ---- */
.team-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; }
.team-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
}
.team-card img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; background: #1a1d21; } /* height:auto: anders wint het height-attribuut van aspect-ratio */
.team-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 2px; }
.team-body b { font-size: 1rem; color: var(--ink); }
.team-body span { font-size: .85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 1080px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px)  {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .team-body { padding: 12px 12px 14px; }
  .team-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .team-card:last-child:nth-child(odd) > :first-child { width: calc(50% - 7px); flex: none; }
}

/* ---- Google-reviews op productpagina's: badge direct onder de kop + donkere band
   met score en tot drie citaten onder het productblok (basis uit de
   sjabloonfamilie; de aanvullingen voor deze shop staan in blok 30) ---- */
.pdp-review-badge { margin-bottom: 14px; transition: border-color .15s ease; }
.pdp-review-badge:hover { border-color: var(--ink); }
.pdp-review-badge b { font-size: .95rem; }
.reviews-band { background: var(--dark); color: #fff; padding: 56px 0; }
.reviews-layout { display: grid; grid-template-columns: 300px 1fr; gap: 44px; align-items: center; }
.reviews-score .section-eyebrow { margin-bottom: 12px; }
.reviews-num { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.reviews-num b { font-size: 3.2rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.reviews-num .stars { font-size: 1.35rem; letter-spacing: 2px; }
.reviews-score p { color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.6; margin-bottom: 16px; }
.reviews-score p b { color: #fff; }
.reviews-score .arrow-link { color: var(--hl); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.review-card { background: #fff; color: var(--ink); border-radius: var(--radius); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 10px; }
.review-card .stars { letter-spacing: 1px; font-size: .95rem; }
.review-card p { font-size: .95rem; line-height: 1.6; color: #3b4046; flex: 1; }
.review-card .review-bron { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: .84rem; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.review-card .review-bron b { color: var(--ink); }
@media (max-width: 1080px) { .reviews-layout { grid-template-columns: 1fr; gap: 28px; } }
@media (max-width: 800px) { .reviews-grid { grid-template-columns: 1fr; } .reviews-band { padding: 48px 0; } }

/* ==========================================================================
   Vergelijkingstabellen op mobiel — audit 2026-09-05
   Tot vier wagens (.is-stack): geen zijwaarts scrollen meer. Elke rij wordt
   een blokje: het kenmerk als kopregel, daaronder per wagen "naam · waarde"
   (de naam komt uit data-p). Negen wagens (.is-wide): blijft schuiven, maar
   compacter, zodat je op een telefoon twee wagens naast het kenmerk ziet in
   plaats van één.
   ========================================================================== */
.ch-scroll { display: inline-flex; align-items: center; gap: 8px; }
.compare.is-stack { min-width: 0; }

@media (max-width: 620px) {
  /* --- gestapeld --- */
  .is-stack-wrap, .compare-wrap:has(.is-stack) { overflow: visible; }
  .compare.is-stack { font-size: .88rem; display: block; }
  .compare.is-stack thead { display: none; }
  .compare.is-stack tbody, .compare.is-stack tfoot, .compare.is-stack tr { display: block; }
  .compare.is-stack tbody th {
    display: block; position: static; white-space: normal;
    padding: 9px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--muted); background: #f7f8fa; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
  .compare.is-stack tbody tr:first-child th { border-top: 0; }
  .compare.is-stack td {
    display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: start;
    padding: 9px 14px; border-bottom: 0; position: static;
  }
  .compare.is-stack td + td { border-top: 1px solid #eef0f3; }
  .compare.is-stack td::before { content: attr(data-p); font-weight: 600; color: var(--ink); font-size: .84rem; line-height: 1.45; }
  .compare.is-stack td.hi { background: var(--yellow-soft); }
  .compare.is-stack tbody tr:last-child td { border-bottom: 0; }
  .compare.is-stack tfoot tr { border-top: 1px solid var(--line); }
  .compare.is-stack tfoot td:first-child { display: none; }
  .compare.is-stack tfoot td { grid-template-columns: 96px max-content max-content; gap: 8px 10px; align-items: center; padding: 10px 14px; }
  .compare.is-stack tfoot td > * { width: auto; }
  .compare.is-stack tfoot .btn { padding: 10px 14px; font-size: .84rem; }
  .compare-hint { display: block; line-height: 1.5; }
  .compare-hint .ch-scroll { display: none; }
  .compare-wrap:has(.is-wide) + .compare-hint .ch-scroll { display: inline-flex; vertical-align: middle; margin-right: 4px; }

  /* --- negen wagens: compact schuiven, kenmerkkolom blijft staan --- */
  .compare.is-wide { min-width: 0; font-size: .8rem; }
  .compare.is-wide th, .compare.is-wide td { padding: 10px 10px; min-width: 120px; }
  .compare.is-wide thead th { white-space: normal; }
  .compare.is-wide thead th small { white-space: normal; }
  .compare.is-wide tbody th { white-space: normal; min-width: 104px; max-width: 112px; font-size: .78rem; box-shadow: 1px 0 0 var(--line); }
  .compare.is-wide thead th:first-child { box-shadow: 1px 0 0 rgba(255,255,255,.15); }
  .compare.is-wide tfoot td { padding: 10px 8px; }
  .compare.is-wide tfoot .btn { padding: 9px 8px; font-size: .8rem; }

}
/* Decoratieve hoekdriehoeken van donkere secties: zodra de container-rand op
   24px staat (≤ 1080) viel de 120px-driehoek over de eerste letters van de
   kop en over de hoek van de foto; op mobiel nog kleiner. */
@media (max-width: 1080px) { .dark-section .accent-block { width: 72px; height: 72px; } }
@media (max-width: 620px) { .dark-section .accent-block { width: 56px; height: 56px; } }

/* Vier kaarten naast elkaar (uitlegpagina) — via class i.p.v. style-attribuut,
   zodat de mobiele kolomregels van .catalog-grid gewoon meelopen. */
.catalog-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .catalog-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .catalog-grid.cols-4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mobiele polish — audit 2026-09-05/06
   ========================================================================== */
.nowrap { white-space: nowrap; }
/* Koppen evenwichtig afbreken (geen los woord op de laatste regel). Browsers
   zonder ondersteuning negeren dit gewoon. */
h1, h2, .section-title { text-wrap: balance; }

/* Filterpaneel: de kop is een knop; boven 1080px inert (geen chevron, altijd open). */
.filter-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; font: inherit; font-weight: 700; font-size: 1.05rem; color: var(--ink); cursor: default; }
.filter-toggle svg { display: none; width: 16px; height: 16px; color: var(--yellow-600); transition: transform .2s ease; }
@media (max-width: 1080px) {
  .filter-toggle { cursor: pointer; min-height: 44px; }
  .filter-toggle svg { display: block; transform: rotate(90deg); }
  .filter-panel.is-open .filter-toggle svg { transform: rotate(-90deg); }
  .filter-panel { padding: 8px 22px; }
  .filter-panel.is-open { padding: 8px 22px 24px; }
  .filter-head { margin-bottom: 0; }
  .filter-panel.is-open .filter-head { margin-bottom: 12px; }
  .filter-body { display: none; }
  .filter-panel.is-open .filter-body { display: block; }
}

@media (max-width: 620px) {
  /* Catalogus: zelfde sectieafstand als de rest (was 84px onder, 60px elders). */
  .catalog { padding-bottom: 60px; }
  /* Specificatietabel: label boven de waarde i.p.v. rechts uitgelijnd wrappen. */
  .spec-table .spec-row { flex-direction: column; gap: 3px; padding: 12px 18px; }
  .spec-table .spec-row dd { text-align: left; }
  .spec-table h3 { padding: 16px 18px; }
  /* Galerijlinks: tikdoel van minimaal 40px zonder de vormgeving te veranderen. */
  .pdp-gallery-links a, .pdp-gallery-links button { min-height: 40px; }
  /* Productfoto's zijn 3:2; het 4:3-vak liet op mobiel 60px grijs boven en onder over. */
  .product-media { aspect-ratio: 3 / 2; }
}

/* Menu-CTA alleen in het uitgeklapte mobiele menu; op desktop staat de knop in de header. */
.main-nav .nav-cta { display: none; }

/* Skip-link: alleen zichtbaar bij toetsenbordfocus; springt naar <main id="inhoud">. */
.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; font-weight: 600; border-radius: 8px; }
.skip-link:focus { left: 12px; }

/* ==========================================================================
   Homepage-hero zonder foto (2026-09-06): tekst links, keuzehulp als paneel
   rechts. De hero is daardoor zo hoog als de tekst, niet als de foto.
   ========================================================================== */
/* Tekstkolom breed genoeg voor de twee knoppen naast elkaar; het paneel
   houdt twee kolommen chips. Onder 980px valt het paneel onder de tekst. */
.hero--split .hero-grid { grid-template-columns: 1.25fr .75fr; gap: 48px; }
.hero--split .hero-inner { padding: 64px 0 72px; }
.hero-side {
  position: relative; z-index: 2;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius);
  padding: 26px 28px 28px;
  backdrop-filter: blur(2px);
}
.hero-side .hero-kh { margin-top: 0; padding-top: 0; border-top: 0; }
.hero-side .hero-kh-kop { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: 14px; }
.hero-side .kh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-side .kh-btn { width: 100%; justify-content: flex-start; padding: 12px 14px; border-radius: 10px; }
.hero-side .kh-btn:hover { transform: none; }
.hero-side .kh-btn:nth-child(5), .hero-side .kh-btn:nth-child(6) { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .hero--split .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero--split .hero-inner { padding: 56px 0 8px; }
  .hero-side { margin-bottom: 56px; }
}
@media (max-width: 620px) {
  .hero--split .hero-inner { padding: 44px 0 4px; }
  .hero-side { padding: 20px 18px 22px; margin-bottom: 44px; }
  .hero-side .kh-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .hero-side .kh-btn { padding: 11px 12px; font-size: .88rem; }
}

/* ==========================================================================
   Cookiemelding (Cookie Confirm) — op mobiel en tablet een balk onderaan
   ==========================================================================
   Cookie Confirm rendert standaard een gecentreerde modal die op een telefoon
   de hele hero afdekt. Deze regels maken er tot 980px een onderaan verankerde
   balk van, zodat de pagina zichtbaar blijft terwijl de bezoeker kiest; boven
   980px blijft de gewone modal staan. Zelfde opzet als watertankie.nl en
   lp.123vrachtwagen.nl.

   De widget schrijft zijn eigen CSS als <style> in de head, met selectors op
   #cc-consent-banner. Daarom hier dezelfde specificiteit plus !important: hun
   blok wordt ná dit bestand ingevoegd en zou anders winnen. Alles staat onder
   #cc-consent-banner, dus buiten de melding raakt dit niets.

   De knopkleur blijft bewust het rood van de huisstijl. Wil je de vorm liever
   bij de bron regelen, dan kan dat in het Cookie Confirm-dashboard; deze regels
   doen dan hetzelfde en mogen weg. dvh met een vh ervoor: browsers zonder dvh
   houden de vh-waarde. */
@media (max-width: 980px) {
  #cc-consent-banner.cc-modal-backdrop { align-items: flex-end !important; }
  #cc-consent-banner .cc-container { align-items: flex-end !important; min-height: 0 !important; padding: 0 !important; }
  #cc-consent-banner .cc-b {
    border-radius: 16px 16px 0 0 !important; max-width: 100% !important; height: auto !important;
    max-height: 35vh !important; max-height: 35dvh !important;
  }
  #cc-consent-banner .cc-tab-contents { min-height: 0 !important; overflow-y: auto !important; }
  #cc-consent-banner .cc-tab-content.cc-active { max-height: none !important; }
  #cc-consent-banner .cc-banner-header,
  #cc-consent-banner .cc-banner-footer,
  #cc-consent-banner .cc-responsive-padding { padding: 12px 16px !important; }
  /* Knoppen naast elkaar i.p.v. gestapeld; 44px blijft een fatsoenlijk tikdoel. */
  #cc-consent-banner .cc-footer-content { flex-direction: row !important; align-items: stretch !important; gap: 8px !important; }
  #cc-consent-banner .cc-button { flex: 1 1 0 !important; width: auto !important; max-width: none !important; min-height: 44px !important; padding: 10px 12px !important; }
  /* Tabblad "Over cookies" heeft meer ruimte nodig dan de korte eerste tab. */
  #cc-consent-banner[data-tab-opened="tab2"] .cc-b { max-height: 70vh !important; max-height: 70dvh !important; }
}

/* ==========================================================================
   SHOPCOMPONENTEN — wagendepot.nl (BUILD-SPEC §11)
   ==========================================================================
   Alles hieronder is nieuw ten opzichte van de Toiletzonderafvoer-stylesheet.
   De klassen zijn het contract tussen de templates (tools/templates/*.js),
   assets/js/main.js en deze css; hernoem ze niet zonder BUILD-SPEC §11 aan
   te passen. Mobiel-eerst: de basisregels gelden voor telefoons, de
   @media (min-width: …)-blokken bouwen daar de desktopindeling bovenop.
   Spacing, radius en schaduw komen uit de tokens bovenaan.

   Inhoud
     1. Prijzen           .price-incl .price-excl .price-note
                          .price-pair .btw-label .alleen-incl .alleen-excl .btw-switch
     2. Badges            .badge-koop .badge-sub (+ .pdp-eyebrow .tag)
     3. Productkaart      img.is-cutout  .card-ctas  .help-card.is-primary
     4. Catalogusfilters  .catalog-filters [data-facet]
     5. PDP-bestelblok    .pdp-order .pdp-qty .pdp-meta .pdp-alt  + .pdp-sticky met .price-incl
     6. Header            .header-cart .cart-count
     7. Toast             .toast.is-visible
     8. Winkelwagen       .cart-layout .cart-table .cart-row .cart-qty .cart-remove
                          .cart-summary .sum-row .cart-empty .land-select
     9. Bestellen         .checkout-grid .checkout-form .checkout-summary .pay-options
                          .pay-option .field-optional .field-check .field-error
    10. Bevestiging       .order-confirm .oc-*
    11. Beleidspagina's   .beleid-prose
    12. Verborgen staten  [hidden] op componenten met een eigen display
   ========================================================================== */

/* ---- 1. Prijzen ----
   Google eist dat de prijs incl. btw het opvallendst is (OPDRACHT.md §5.1):
   .price-incl is groot en vet, .price-excl klein en gedempt. De maat schaalt
   per context (kaart, PDP, sticky balk, winkelwagen) via de regels verderop,
   de verhouding tussen beide blijft overal gelijk. tabular-nums zorgt dat
   bedragen in een kolom (winkelwagen, samenvatting) netjes uitlijnen. */
.price-incl {
  display: inline-block;
  font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1;
  color: var(--ink); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-excl {
  display: inline-block;
  font-size: .84rem; font-weight: 500; line-height: 1.3;
  color: var(--muted); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-note { font-size: .82rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }   /* geen los laatste woord ("… naar je / locatie.") */
/* Prijsregel op de kaart: .spec-line uit het template is een <p> (muted, .8rem);
   de spans erin krijgen hun eigen maat en staan op één basislijn. */
.spec-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.product-card { --prijs-hoofd: 1.3rem; --prijs-bij: 1rem; --btw-label: .74rem; }

/* Prijspaar (.price-pair): beide bedragen met label, onder elkaar. Standaard
   is incl. btw de hoofdprijs en excl. btw de tweede regel: zo ziet Google de
   pagina, en elke nieuwe bezoeker. Kiest iemand "Zakelijk" (html[data-btw=
   "excl"], zie .btw-switch), dan wisselen de rollen en komt excl. btw
   bovenaan. De maat per context komt uit --prijs-hoofd en --prijs-bij. */
.price-pair { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; }
.price-pair > .price-incl,
html[data-btw="excl"] .price-pair > .price-excl {
  font-size: var(--prijs-hoofd, 1.9rem); font-weight: var(--prijs-hoofd-gewicht, 800);
  letter-spacing: -.02em; line-height: 1.1; color: var(--ink);
}
.price-pair > .price-excl,
html[data-btw="excl"] .price-pair > .price-incl {
  font-size: var(--prijs-bij, 1.25rem); font-weight: 600;
  letter-spacing: 0; line-height: 1.25; color: var(--ink);
}
html[data-btw="excl"] .price-pair > .price-excl { order: -1; }
.btw-label { font-size: var(--btw-label, .8rem); font-weight: 500; letter-spacing: 0; color: var(--muted); }
/* Tekst die maar in één weergave klopt (uitleg, samenvattingsrijen). */
html:not([data-btw="excl"]) .alleen-excl,
html[data-btw="excl"] .alleen-incl { display: none !important; }

/* Schakelaar Particulier / Zakelijk. De actieve knop volgt html[data-btw]
   (niet aria-pressed), zodat hij al klopt vóór main.js geladen is. */
.btw-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: #fff; max-width: 100%; }
.btw-switch button {
  display: inline-flex; align-items: baseline; gap: 5px;
  border: 0; border-radius: 999px; padding: 7px 14px; background: transparent;
  font: inherit; font-size: .86rem; font-weight: 700; line-height: 1.2;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.btw-switch button small { font-size: .76rem; font-weight: 500; }
.btw-switch [data-btw-set="incl"],
html[data-btw="excl"] .btw-switch [data-btw-set="excl"] { background: var(--ink); color: #fff; }
html[data-btw="excl"] .btw-switch [data-btw-set="incl"] { background: transparent; color: var(--muted); }
html:not([data-btw="excl"]) .btw-switch [data-btw-set="excl"]:hover,
html[data-btw="excl"] .btw-switch [data-btw-set="incl"]:hover { color: var(--ink); background: #f2f3f5; }
.btw-switch button:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
/* Donkere variant: topbar en de kop van winkelwagen en bestellen. */
.btw-switch.is-dark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.24); }
.btw-switch.is-dark button { color: rgba(255,255,255,.78); }
.btw-switch.is-dark [data-btw-set="incl"],
html[data-btw="excl"] .btw-switch.is-dark [data-btw-set="excl"] { background: #fff; color: var(--ink); }
html[data-btw="excl"] .btw-switch.is-dark [data-btw-set="incl"] { background: transparent; color: rgba(255,255,255,.78); }
html:not([data-btw="excl"]) .btw-switch.is-dark [data-btw-set="excl"]:hover,
html[data-btw="excl"] .btw-switch.is-dark [data-btw-set="incl"]:hover { color: #fff; background: rgba(255,255,255,.12); }
.btw-switch.is-dark button:focus-visible { outline-color: #fff; }
/* Plekken: topbar (desktop), mobiel menu, prijsblok, kop van wagen/bestellen. */
.topbar-btw { display: flex; align-items: center; gap: 8px; }
.topbar-btw .btw-switch { padding: 2px; }
.topbar-btw .btw-switch button { padding: 4px 11px; font-size: .78rem; }
.topbar-btw .btw-switch button small { font-size: .7rem; }
.main-nav .nav-btw { display: none; }
.pdp-order .btw-switch { margin: 0 0 18px; }
.hero-btw { margin-top: 18px; }
/* Vraag bij het eerste bezoek (btwVraag() in build.js): donker, zoals de
   topbar eronder, en weg zodra er een keuze is bewaard. Het inline script in
   <head> zet html[data-btw-vraag] vóór de eerste paint, dus geen verspringing. */
.btw-vraag { display: none; background: var(--dark-2); color: rgba(255,255,255,.85); font-size: .9rem; border-bottom: 1px solid rgba(255,255,255,.1); }
html[data-btw-vraag] .btw-vraag { display: block; }
.btw-vraag .container { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding-top: 10px; padding-bottom: 10px; }
/* Gecentreerd en gebalanceerd, net als de knoppen eronder: op 320px liep de
   tekst links uitgelijnd met "btw." los op de tweede regel. */
.btw-vraag p { margin: 0; line-height: 1.4; text-align: center; text-wrap: balance; }
.btw-vraag p b { color: #fff; font-weight: 700; }
.btw-vraag-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.btw-vraag .btn-sm { padding: 8px 14px; font-size: .85rem; }
.btw-vraag .btn-ghost { color: #fff; }   /* rand: --btn-schaduw in blok 19 */
/* Smalle telefoons (320–374px): de toelichting past niet naast beide knoppen
   en duwde de productkolom breder dan het scherm. Het label staat daar al
   bij elke prijs (.btw-label), dus de knoppen tonen alleen Particulier/Zakelijk. */
@media (max-width: 374px) {
  .btw-switch button small { display: none; }
}

/* ---- 2. Badges: bestelbaar en subtype ----
   Elk product is bestelbaar (besluit 30-09-2026): één groene badge, plus een
   neutrale voor subtypen (vacuüm, standaard). Uitverkocht (.badge-uit, .t-uit)
   staat in blok 21a. De tekst is wit, dus de achtergrond moet 4,5 : 1 halen:
   --green-600 in plaats van --green (zie de tokens). De .pdp-eyebrow
   .tag-varianten zijn dezelfde kleuren voor de productpagina. */
.product-badge.badge-koop    { background: var(--green-600); }
.product-badge.badge-sub     { background: #4a5058; }
.pdp-eyebrow .tag.t-koop     { background: var(--green-600); }
.pdp-eyebrow .tag.t-sub      { background: #4a5058; }
/* Badge in lopende tekst (winkelwagenregel, bestelblok): niet absoluut. */
.product-badge.badge-inline  { position: static; display: inline-flex; border-radius: 5px; }
/* Voorraadtekst (levering, bestelblok, winkelwagen). */
.stock { font-weight: 600; }
.stock.is-in  { color: var(--green-600); }
.stock.is-out { color: #9b1c1c; }

/* ---- 3. Productkaart ---- */
/* Geen bovenregeltje "Type · Merk" meer boven de naam: sinds 07-10-2026
   begint de naam zelf met het type en het merk ("Toiletwagen Global GL2400
   Fresh", tools/site-data.js PRODUCTTYPEN). */
/* De foto's van Europe Wagon zijn echte 3:2-foto's met achtergrond, geen
   studio-cutouts. Vullend (cover) dus, in een 3:2-vak zodat er niets wordt
   afgesneden; de referentie stond op contain + multiply voor witte studio-
   shots. Alleen een vrijstaande foto (afb.fotos[].alpha → .is-cutout) staat
   als cutout op een lichte achtergrond. */
.product-media { aspect-ratio: 3 / 2; background: #eef0f3; }
.product-media img.tank-photo { object-fit: cover; padding: 0; mix-blend-mode: normal; }
.product-media img.tank-photo.is-cutout { object-fit: contain; padding: 18px; background: #f2f3f5; }
/* Twee knoppen naast elkaar (bestellen of "Vraag levertijd" + bekijken);
   past het niet, dan onder elkaar via flex-wrap. */
.card-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.card-ctas .btn { flex: 1 1 calc(50% - 5px); min-width: 120px; padding-inline: 14px; }
/* Primaire hulpkaart (offerte) in de hulp-band: rood icoon. */
.help-card.is-primary .help-ic { color: var(--yellow-600); }

/* ---- 4. Catalogusfilters ----
   Zelfde uiterlijk als .filter-panel / .filter-group van /huren in de
   referentie. Het paneel heet hier .catalog-filters en elke facet (categorie,
   bestelwijze, merk) is een [data-facet]-blok, zodat main.js per facet kan
   tellen, tonen en verbergen (facet zonder opties → hidden). De generieke
   .filter-option / .filter-kop / .filter-reset / .filter-toggle / .filter-body
   regels hierboven werken er ongewijzigd in. Tot 1080px inklapbaar (kop is
   een knop), daarboven altijd open en sticky. */
.catalog-filters {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 20px;
}
.catalog-filters.is-open { padding-bottom: 24px; }
.catalog-filters .filter-head { margin-bottom: 0; }
.catalog-filters.is-open .filter-head { margin-bottom: 12px; }
.catalog-filters .filter-toggle { cursor: pointer; min-height: 44px; }
.catalog-filters .filter-toggle svg { display: block; transform: rotate(90deg); }
.catalog-filters.is-open .filter-toggle svg { transform: rotate(-90deg); }
.catalog-filters .filter-body { display: none; }
.catalog-filters.is-open .filter-body { display: block; }
.catalog-filters .filter-group[data-facet] { border-top: 1px solid var(--line); padding: 16px 0; }
.catalog-filters .filter-group[data-facet]:first-child { border-top: 0; padding-top: 0; }   /* alleen de groep: ook de vinkjes dragen data-facet */
.catalog-filters [data-facet] .filter-kop {
  font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin-bottom: 12px;
}
.catalog-filters .filter-option:last-child { margin-bottom: 0; }
/* Optie zonder resultaat binnen de huidige selectie: gedempt, niet weg. */
.catalog-filters .filter-option.is-empty { opacity: .45; }
@media (min-width: 1081px) {
  /* 20px opzij (was 24): 226px inhoud, zodat "Woonunits & crew trailers" naast
     vinkje en teller op één regel past. .is-open staat erbij: main.js zet die
     klasse ook op desktop zodra er een filter aanstaat, en dan wonnen de
     mobiele regels hierboven (24px onder, 12px onder de kop) en schoven alle
     opties 6px omhoog op het moment dat je een vinkje zette. */
  .catalog-filters { position: sticky; top: 96px; }
  .catalog-filters, .catalog-filters.is-open { padding: 26px 20px; }
  .catalog-filters .filter-head, .catalog-filters.is-open .filter-head { margin-bottom: 18px; }
  .catalog-filters .filter-toggle { cursor: default; min-height: 0; }
  .catalog-filters .filter-toggle svg { display: none; }
  .catalog-filters .filter-body { display: block; }
}

/* ---- 5. Bestelblok op de productpagina ----
   Volgorde binnen het blok is de Google-volgorde (OPDRACHT.md §5): prijs incl.
   btw → levertijd en bezorgkosten (.pdp-meta) → aantal + bestelknop
   (.pdp-buy-row) → "liever een offerte?" (.pdp-alt, de tweede route; vorm in
   blok 29). Verzendkosten staan dus altijd vóór de knop. Elk product heeft
   dit blok; zonder prijs staat er .price-volgt (blok 25a).
   De stepper .pdp-qty bestaat al (Toiletzonderafvoer) en wordt hergebruikt. */
.pdp-order {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; box-shadow: var(--shadow-sm);
  padding: 22px 20px 24px; margin-bottom: 22px;
}
.pdp-order .price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 6px; }
.pdp-order .price-note { margin-bottom: 16px; }
.pdp-meta { display: flex; flex-direction: column; gap: 9px; margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-meta li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.pdp-meta li svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; margin-top: 2px; }
.pdp-meta li b { color: var(--ink); font-weight: 600; }
.pdp-meta li a { color: var(--ink); text-decoration: underline; text-decoration-color: rgba(23,25,28,.3); }
.pdp-meta li a:hover { text-decoration-color: currentColor; }
/* Stepper en bestelknop op één regel zodra het past (vanaf ~360px);
   op 320px valt de knop eronder. Wint van de 100%-regel uit de referentie.
   Daar is de stepper dan even breed als de knop (het invoerveld groeit mee),
   in plaats van 136px met 106px leegte ernaast. */
.pdp-order .pdp-buy-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.pdp-order .pdp-buy-row .pdp-qty { flex: none; }
.pdp-order .pdp-buy-row .btn { flex: 1 1 120px; min-height: 52px; white-space: normal; line-height: 1.2; }
@media (max-width: 359px) {
  .pdp-order .pdp-buy-row .pdp-qty { flex: 1 1 100%; }
  .pdp-order .pdp-buy-row .pdp-qty input { flex: 1; min-width: 0; }
}
.pdp-alt { margin-top: 14px; font-size: .88rem; color: var(--muted); text-align: center; line-height: 1.5; text-wrap: pretty; }
.pdp-alt a, .pdp-alt button {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--yellow-600); text-decoration: underline; cursor: pointer;
}
.pdp-alt a:hover, .pdp-alt button:hover { color: var(--ink); }
@media (min-width: 621px) {
  .pdp-order { padding: 26px 26px 28px; }
  .pdp-order .pdp-buy-row .btn { flex: 1 1 170px; }
}
/* Sticky balk (mobiel/tablet, bestaat al): de prijs erin is nu .price-incl,
   niet meer <b>naam</b>. Compacter dan op de pagina, wint van de generieke
   span-regel van .sticky-price. */
.pdp-sticky .sticky-price { --prijs-hoofd: 1.05rem; --prijs-bij: .85rem; --btw-label: .7rem; }
.pdp-sticky .sticky-price .price-pair { gap: 1px; }

/* ---- 6. Winkelwagenknop in de header ----
   Zelfde 44px-maat als de belknop en het hamburgermenu, zodat de drie op
   mobiel gelijk staan. De teller is een rode bol op de hoek; bij 0 zet
   main.js het hidden-attribuut en verdwijnt hij. */
.header-cart {
  position: relative; flex: none;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: #eef0f3; color: var(--ink);
  transition: background .15s ease;
}
.header-cart:hover { background: #e4e7eb; }
.header-cart svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--yellow); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px #fff;
  font-variant-numeric: tabular-nums;
}
.cart-count[hidden] { display: none; }
/* Korte "bump" als er iets bij komt (main.js zet .is-bumped en haalt hem weer weg). */
.cart-count.is-bumped { animation: cartBump .35s ease; }
@keyframes cartBump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* ---- 7. Toast ("Toegevoegd aan je winkelwagen") ----
   Onderin, boven de sticky PDP-balk (z 80) en de WhatsApp-knop (z 90), onder
   de modal (200). Zichtbaar via .is-visible; het hidden-attribuut uit de
   schil hoeft main.js niet weg te halen, want display staat hier expliciet
   en visibility houdt de toast buiten de toegankelijkheidsboom zolang hij
   dicht is. Op mobiel laat hij rechts 88px vrij voor de WhatsApp-knop. */
.toast {
  position: fixed; z-index: 150;
  left: 16px; right: 88px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  max-width: 480px;
  display: flex; align-items: center; gap: 12px;
  background: var(--ink); color: #fff;
  padding: 14px 18px; border-radius: var(--radius-sm);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  font-size: .92rem; font-weight: 500; line-height: 1.4;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.toast.is-visible { opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s; }
.toast svg { width: 20px; height: 20px; color: var(--hl); flex: none; }
.toast a { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: rgba(255,255,255,.45); white-space: nowrap; }
.toast a:hover { text-decoration-color: #fff; }
.toast .toast-close { margin-left: auto; background: none; border: 0; color: rgba(255,255,255,.7); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 2px; }
.toast .toast-close:hover { color: #fff; }
/* Boven de sticky PDP-balk als die zichtbaar is. */
body.has-sticky-cta .toast { bottom: calc(92px + env(safe-area-inset-bottom)); }
@media (min-width: 981px) {
  .toast { left: 50%; right: auto; width: max-content; max-width: min(92vw, 520px); bottom: 28px; transform: translate(-50%, 12px); }
  .toast.is-visible { transform: translate(-50%, 0); }
}

/* ---- 8. Winkelwagen ----
   .cart-layout: regels links, samenvatting rechts (desktop) of eronder
   (mobiel). Een regel (.cart-row) is een grid met benoemde gebieden, zodat de
   foto, naam, stukprijs, stepper, regeltotaal en verwijderknop op mobiel in
   drie rijen vallen en op desktop op één rij; de volgorde in de HTML maakt
   niet uit. .cart-table.is-readonly is de compacte variant zonder stepper
   (samenvatting bij bestellen, orderbevestiging). */
.cart-layout { display: grid; gap: 24px; align-items: start; }
/* Eén binnenmarge voor de vier shopkaarten (wagen, samenvatting, formulier en
   samenvatting bij bestellen): 20px, vanaf 761px 28px. Eerst had elke kaart
   een eigen maat (18/24, 20/26, 18/34 en 20/26px): de inhoud van wagen en
   samenvatting begon op 390px 2px uit elkaar, op /bestellen bij 768px 8px, en
   de koppen naast elkaar op desktop stonden 10px uit elkaar. */
.cart-table, .cart-summary, .checkout-form, .checkout-summary { --kaart-pad: 20px; }
@media (min-width: 761px) {
  .cart-table, .cart-summary, .checkout-form, .checkout-summary { --kaart-pad: 28px; }
}
.cart-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 var(--kaart-pad); }
.cart-head { display: none; }
.cart-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) var(--cart-x, 36px);   /* --cart-x: 44px op touch (blok 18) */
  grid-template-areas:
    "img name remove"
    "img price price"
    "qty qty total";
  gap: 8px 14px; align-items: center;
  padding: 16px 0; border-top: 1px solid var(--line);
}
.cart-row:first-child { border-top: 0; }
.cart-img { grid-area: img; width: 64px; aspect-ratio: 1 / 1; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: #f2f3f5; align-self: start; }
.cart-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-name { grid-area: name; min-width: 0; font-size: .95rem; line-height: 1.35; text-wrap: balance; }   /* "Mobiele woonunit / 730 2A" in plaats van een los "2A" */
.cart-name a { font-weight: 700; color: var(--ink); }
.cart-name a:hover { color: var(--yellow-600); }
.cart-name small { display: block; font-size: .8rem; color: var(--muted); margin-top: 3px; }
.cart-price { grid-area: price; font-size: .84rem; color: var(--muted); }
.cart-price { --prijs-hoofd: .95rem; --prijs-hoofd-gewicht: 700; --prijs-bij: .8rem; --btw-label: .72rem; }
.cart-total { grid-area: total; justify-self: end; text-align: right; line-height: 1.2; }
.cart-total { --prijs-hoofd: 1.05rem; --btw-label: .72rem; }
.cart-total.price-pair { display: flex; align-items: flex-end; }
.cart-total .btw-label { display: block; margin-top: 2px; }
/* Stepper: zelfde vorm als .pdp-qty, maar 40px hoog voor in een regel.
   Inputgrootte 16px: anders zoomt iOS Safari in (zie de .field-regel boven). */
.cart-qty { grid-area: qty; justify-self: start; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.cart-qty button { width: 38px; height: 40px; border: 0; background: #f2f3f5; font-size: 1.1rem; color: var(--ink); cursor: pointer; font-family: inherit; display: grid; place-items: center; }
.cart-qty button:hover { background: #e4e7eb; }
.cart-qty button:disabled { opacity: .4; cursor: default; }
.cart-qty button svg { width: 14px; height: 14px; }
.cart-qty input { width: 44px; height: 40px; border: 0; text-align: center; font-family: inherit; font-size: 16px; font-weight: 700; color: var(--ink); -moz-appearance: textfield; }
.cart-qty input::-webkit-outer-spin-button, .cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-qty input:focus { outline: none; background: var(--yellow-soft); }
.cart-remove {
  grid-area: remove; justify-self: end;
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer;
  display: grid; place-items: center; transition: background .15s ease, color .15s ease;
}
.cart-remove:hover { background: var(--yellow-soft); color: var(--yellow-600); }
.cart-remove svg { width: 18px; height: 18px; }
/* Compacte, alleen-lezen variant (bestellen, bevestiging): foto, naam met
   aantal, regeltotaal. Geen stepper, geen verwijderknop. */
.cart-table.is-readonly { border: 0; padding: 0; background: none; }
.cart-table.is-readonly .cart-row {
  grid-template-columns: 48px minmax(0, 1fr) auto;
  grid-template-areas: "img name total";
  gap: 12px; padding: 12px 0;
}
.cart-table.is-readonly .cart-img { width: 48px; }
.cart-table.is-readonly .cart-name { font-size: .9rem; }
.cart-table.is-readonly .cart-total { --prijs-hoofd: .95rem; }

/* Samenvatting: subtotaal, btw, bezorgkosten, totaal. */
.cart-summary, .checkout-summary {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--kaart-pad); box-shadow: var(--shadow-sm);
}
.cart-summary h2, .checkout-summary h2 { font-size: 1.15rem; margin-bottom: 14px; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: .92rem; padding: 7px 0; }
.sum-row > :first-child { color: var(--muted); text-wrap: balance; }   /* "Totaal incl. btw, / excl. bezorgkosten" in plaats van een los "bezorgkosten" */
/* Toelichting onder het label (verzendgroep, levertijd) op een eigen regel,
   ook als het label zelf langer is ("Bezorgkosten excl. btw"). */
.sum-row > :first-child small { display: block; margin-top: 2px; font-size: .8rem; line-height: 1.4; }
.sum-row b, .sum-row output { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }   /* breekt een waarde af (tekst in plaats van bedrag), dan eindigt elke regel op de bedragrand */
.sum-row.is-muted { font-size: .84rem; padding-top: 0; }
.sum-row.is-muted b { font-weight: 500; color: var(--muted); }
.sum-row.is-total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 14px; font-size: 1rem; }
.sum-row.is-total > :first-child { color: var(--ink); font-weight: 700; }
.sum-row.is-total .price-incl { font-size: 1.5rem; }
/* Op 320px paste het totaal (1.5rem) niet naast het kortste label en stak het
   6px in de binnenmarge van de kaart. Het label zelf staat daar boven het
   bedrag: naast het bedrag brak "Totaal incl. btw, excl. bezorgkosten en
   producten zonder prijs" over vijf regels van 139px (review 30-09-2026). */
@media (max-width: 380px) {
  .sum-row.is-total .price-incl { font-size: 1.3rem; }
  .sum-row.is-total { flex-wrap: wrap; row-gap: 2px; }
  .sum-row.is-total > :first-child { flex: 1 1 100%; }
  .sum-row.is-total > b { margin-left: auto; }
}
.sum-row.is-subtotal { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; }
.sum-row.is-subtotal > :first-child { color: var(--ink); font-weight: 700; }
.sum-row.is-subtotal b { font-weight: 700; }
/* Onbekend bezorgtarief (VERZENDGROEPEN.tarief null): tekst i.p.v. bedrag.
   De breedte en de afbreking staan op het flexitem (<b>, main.js zet
   .is-pending op de rij): op de inline <span> deden text-align en max-width
   niets, en de regels stonden links in de bedragkolom, tot 104px voor de rand
   waarop alle bedragen eindigen. */
.sum-row .sum-pending { font-size: .82rem; font-weight: 500; color: var(--muted); }
.sum-row.is-pending > b { max-width: 55%; white-space: normal; text-wrap: balance; }
.sum-note { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: 6px; }
/* "Verzending en levering" aan het eind van de notitie: in inkt en
   onderstreept, want alleen een andere kleur (en hier niet eens dat) is geen
   herkenbare link (WCAG 1.4.1). Met een vinger groeit het tikvlak met padding
   boven en onder (44px); dat verschuift geen regel, en de alinea heeft geen
   andere link waar het overheen kan vallen. */
.sum-note a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
@media (hover: hover) {
  .sum-note a:hover { text-decoration-thickness: 2px; }
}
@media (pointer: coarse) {
  .sum-note a { padding-block: calc((44px - 1.5em) / 2); }
}
.cart-summary .btn, .checkout-summary .btn { width: 100%; margin-top: 16px; }
.cart-summary .btn + .btn, .checkout-summary .btn + .btn { margin-top: 10px; }
.cart-summary .btn[disabled], .checkout-summary .btn[disabled] { opacity: .65; cursor: not-allowed; transform: none; }
.cart-summary .land-select { margin-bottom: 14px; }

/* Landkeuze (NL/BE) bepaalt het bezorgtarief; staat bovenaan de samenvatting. */
.land-select { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: .9rem; font-weight: 600; }
.land-select select {
  flex: 1 1 140px; min-height: 44px; padding: 9px 36px 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink);
  font-family: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6670' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
.land-select select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(0, 101, 215, .18); }

/* Lege wagen. */
.cart-empty { text-align: center; padding: 48px 20px; background: #fff; border: 1px dashed var(--line); border-radius: var(--radius); }
.cart-empty svg { width: 42px; height: 42px; color: #b8bec6; margin: 0 auto 14px; display: block; }
.cart-empty h2 { font-size: 1.25rem; margin-bottom: 8px; }
.cart-empty p { color: var(--muted); margin-bottom: 18px; }

@media (min-width: 761px) {
  .cart-row {
    grid-template-columns: 72px minmax(0, 1fr) auto auto auto 36px;
    grid-template-areas: "img name price qty total remove";
    gap: 18px; padding: 18px 0;
  }
  .cart-img { width: 72px; align-self: center; }
  /* .cart-price staat hier niet meer op text-align: right. De stukprijs staat
     links in zijn kolom, net als de kop "Prijs" (blok 13); rechts uitlijnen
     deed niets op het prijspaar (een flexbox) en zette alleen "Prijs nog in te
     vullen" rechts, 46px naast de bedragen erboven. */
  .cart-total { min-width: 96px; }
  /* Kolomkoppen boven de regels op desktop (optioneel in het template). */
  .cart-head {
    display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto auto 36px; gap: 18px;
    padding: 12px 0; border-bottom: 1px solid var(--line);
    font-size: .76rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  }
}
@media (min-width: 981px) {
  .cart-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; }
  .cart-summary { position: sticky; top: 96px; }
}

/* ---- 9. Bestellen ----
   Formulier links, samenvatting rechts (sticky op desktop). Het formulier
   hergebruikt .form-row / .field / .req uit het offerteformulier; fieldsets
   groeperen contact, bezorgadres, zakelijk (optioneel), factuuradres en
   betaling. Betaalmethoden zijn radiokaarten (.pay-option); de factuuroptie
   blijft hidden tot er een bedrijfsnaam staat (main.js). */
.checkout-grid { display: grid; gap: 24px; align-items: start; }
.checkout-form {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--kaart-pad); box-shadow: var(--shadow-sm);
}
.checkout-form fieldset { border: 0; padding: 0; margin: 0 0 28px; min-width: 0; }
.checkout-form fieldset:last-of-type { margin-bottom: 0; }
.checkout-form legend { display: block; width: 100%; padding: 0; margin-bottom: 4px; font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.checkout-form .fieldset-hint { font-size: .86rem; color: var(--muted); margin-bottom: 14px; line-height: 1.5; }
/* 16px onder elke kop (4 + 12), ook boven een vinkje of de betaalopties: daar
   stond eerst 4px, tegen 16px boven de velden. Een vinkje binnen een fieldset
   houdt geen eigen ondermarge, anders stond er na Factuuradres 44px in plaats
   van 28px tot de volgende kop; het akkoord-vinkje onderaan wel. */
.checkout-form legend + .form-row, .checkout-form .fieldset-hint + .form-row,
.checkout-form legend + .field-check, .checkout-form legend + .pay-options { margin-top: 12px; }
.checkout-form fieldset > .field-check { margin-bottom: 0; }
.checkout-form .form-row:last-child { margin-bottom: 0; }
.checkout-form .btn-submit, .checkout-form > .btn { width: 100%; margin-top: 6px; }
.checkout-form .btn[disabled] { opacity: .65; cursor: progress; transform: none; }
/* "(optioneel)" achter een label. */
.field-optional { font-weight: 500; font-size: .8rem; color: var(--muted); }
/* Selectievakjes met tekst ernaast (voorwaarden, factuuradres gelijk, zakelijk). */
.field-check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; line-height: 1.5; cursor: pointer; margin-bottom: 16px; }
.field-check input { width: 18px; height: 18px; flex: none; margin-top: 3px; accent-color: var(--yellow); }
.field-check a { color: var(--yellow-600); font-weight: 600; text-decoration: underline; }
.field-check a:hover { color: var(--ink); }
/* Foutstaat per veld (main.js zet .has-error op .field en vult .field-error). */
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #c0392b; }
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.field-error { font-size: .8rem; color: #9b1c1c; line-height: 1.4; }
.field-check.has-error { color: #9b1c1c; }
/* Betaalmethoden als radiokaarten. :has() markeert de gekozen kaart in
   moderne browsers; main.js zet daarnaast .is-selected voor de rest. */
.pay-options { display: grid; gap: 10px; }
.pay-option {
  position: relative; display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pay-option:hover { border-color: #b8bec6; }
.pay-option input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--yellow); }
.pay-option b { display: block; font-size: .95rem; line-height: 1.3; }
.pay-option span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.5; margin-top: 3px; }
.pay-option.is-selected, .pay-option:has(input:checked) { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(0, 101, 215, .12); }
.pay-option:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }
/* Vertrouwensregel onder de bestelknop. */
.checkout-trust { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.checkout-trust svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; margin-top: 2px; }
/* Turnstile-widget: zelfde inspringing als de velden. */
.checkout-form .turnstile-slot { margin: 16px 0 0; }
/* Samenvatting 360px breed, net als naast de wagen (.cart-layout): de
   rechterkolom verspringt niet meer tussen stap 1 en 2 (was 360 tegen 400px). */
@media (min-width: 981px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 34px; }
  .checkout-summary { position: sticky; top: 96px; }
}

/* ---- 10. Orderbevestiging ----
   Eén leesbare kolom: kop met ordernummer, regels (alleen-lezen wagen),
   totalen, betaalinstructies, levertijd, vervolgstappen. main.js vult dit uit
   sessionStorage; zonder order toont het template alleen de neutrale tekst. */
.order-confirm {
  max-width: 760px; margin-inline: auto;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 26px 20px 28px;
}
.order-confirm .oc-head { display: flex; gap: 16px; align-items: center; margin-bottom: 22px; }   /* vinkje op het midden van de kop (stond 8 tot 9,5px te laag) */
.order-confirm .oc-ico { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--green-600); color: #fff; display: grid; place-items: center; }
.order-confirm .oc-ico svg { width: 26px; height: 26px; }
.order-confirm h1 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin-bottom: 0; }
.order-confirm .oc-num {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 999px;
  padding: 7px 14px; font-size: .88rem; color: var(--muted);
}
.order-confirm .oc-num b { color: var(--ink); font-size: 1rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.order-confirm h2 { font-size: 1.15rem; margin: 26px 0 12px; }
.order-confirm p { color: #3b4046; line-height: 1.65; margin-bottom: 12px; text-wrap: pretty; }   /* geen los "je." op de laatste regel */
.order-confirm p:last-child { margin-bottom: 0; }
.order-confirm p b { color: var(--ink); }
.order-confirm .cart-table { margin-bottom: 4px; }
.order-confirm .sum-row { padding: 6px 0; }
/* Betaalinstructies: rustig kader met rode accentlijn, geen alarmkleur. */
.order-confirm .oc-pay { background: var(--bg); border-left: 4px solid var(--yellow); border-radius: var(--radius-sm); padding: 16px 18px; margin: 12px 0 4px; }
.order-confirm .oc-pay p { margin-bottom: 10px; }
/* Binnenruimte gelijk boven en onder (16px): de kop hield de 26px van
   .order-confirm h2 en de laatste alinea de 10px hierboven (42 tegen 26px). */
.order-confirm .oc-pay h2 { margin-top: 0; }
.order-confirm .oc-pay p:last-child { margin-bottom: 0; }
.order-confirm .oc-pay dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; font-size: .92rem; margin-top: 8px; }
.order-confirm .oc-pay dt { color: var(--muted); }
.order-confirm .oc-pay dd { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.order-confirm .oc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.order-confirm .oc-actions .btn { flex: 1 1 200px; }
/* Zonder order in de sessie (schil op .is-empty, gezet door shop.js): grijs
   vinkje en gedempte kop. main.js haalt .is-empty weg zodra er een order staat
   en zet .has-order op [data-order-confirm]; die staat wint hieronder ook als
   .is-empty om wat voor reden blijft staan. :has() is een extra: browsers
   zonder :has() zien gewoon de .is-empty-regels. */
.order-confirm.is-empty .oc-ico { background: #b8bec6; }
.order-confirm.is-empty .oc-head h1 { color: #3b4046; }
.order-confirm:has([data-order-confirm].has-order) .oc-ico { background: var(--green-600); }
.order-confirm:has([data-order-confirm].has-order) .oc-head h1 { color: var(--ink); }
@media (min-width: 621px) {
  .order-confirm { padding: 38px 40px; }
  .order-confirm .oc-actions .btn { flex: 0 1 auto; }
}

/* ---- 11. Beleidspagina's (verzending, voorwaarden, retour, privacy) ----
   Eén leesbare kolom van max 760px, zoals .article-body. De inhoud komt als
   html uit tools/beleid-content.js en mag <p>, lijsten, <strong>, <a>,
   tabellen en <pre> (modelformulier herroeping) bevatten; de globale reset
   haalt lijsttekens weg, dus die komen hier terug. Tabellen blijven op
   smalle schermen zijwaarts scrollbaar via .table-wrap of, zonder wrapper,
   via display: block op de tabel zelf. */
.beleid { padding: 48px 0 72px; }
.beleid-prose { max-width: 760px; margin-inline: auto; }
.beleid-prose .beleid-meta { font-size: .84rem; color: var(--muted); margin-bottom: 26px; }
.beleid-prose .lead-p { font-size: 1.12rem; color: var(--ink); line-height: 1.6; margin-bottom: 26px; }
.beleid-prose h2 { font-size: 1.45rem; margin: 36px 0 12px; }
.beleid-prose h3 { font-size: 1.12rem; margin: 24px 0 8px; }
.beleid-prose h2:first-child, .beleid-prose section:first-child h2 { margin-top: 0; }
.beleid-prose p { color: #3b4046; line-height: 1.7; margin-bottom: 14px; }
.beleid-prose strong { color: var(--ink); }
.beleid-prose a { color: var(--yellow-600); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(0, 82, 176, .35); }
.beleid-prose a:hover { text-decoration-color: currentColor; }
.beleid-prose ul, .beleid-prose ol { margin: 4px 0 18px; padding-left: 24px; }
.beleid-prose ul { list-style: disc; }
.beleid-prose ol { list-style: decimal; }
.beleid-prose li { color: #3b4046; line-height: 1.65; margin-bottom: 7px; }
.beleid-prose li::marker { color: var(--yellow-600); }
.beleid-prose table { width: 100%; border-collapse: collapse; margin: 18px 0 24px; font-size: .92rem; background: #fff; border: 1px solid var(--line); }
.beleid-prose th, .beleid-prose td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; }
.beleid-prose thead th { background: var(--dark); color: #fff; font-weight: 700; font-size: .85rem; }
.beleid-prose tbody th { font-weight: 600; color: var(--ink); background: #f7f8fa; white-space: nowrap; }
.beleid-prose tbody tr:last-child th, .beleid-prose tbody tr:last-child td { border-bottom: 0; }
.beleid-prose td b { font-variant-numeric: tabular-nums; }
.beleid-prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0 24px; }
.beleid-prose .table-wrap table { margin: 0; min-width: 480px; }
.beleid-prose pre {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 18px 20px; margin: 18px 0 24px;
  white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: .92rem; line-height: 1.65; color: #3b4046;
}
.beleid-prose blockquote { border-left: 4px solid var(--yellow); background: var(--yellow-soft); border-radius: var(--radius-sm); padding: 16px 18px; margin: 18px 0 22px; color: #2a2e33; }
.beleid-prose blockquote p:last-child { margin-bottom: 0; }
.beleid-prose hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
/* Bedrijfsgegevens als definitielijst (voorwaarden, privacy). */
.beleid-prose dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 18px; margin: 4px 0 20px; font-size: .95rem; }
.beleid-prose dt { color: var(--muted); }
.beleid-prose dd { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
/* Inhoudsopgave bovenaan lange pagina's (optioneel in het template). */
.beleid-toc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-bottom: 30px; }
.beleid-toc b { display: block; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.beleid-toc ol { list-style: decimal; padding-left: 22px; margin: 0; columns: 2; column-gap: 24px; }
.beleid-toc li { font-size: .92rem; margin-bottom: 6px; break-inside: avoid; }
.beleid-toc a { color: var(--ink); font-weight: 500; text-decoration: none; }
.beleid-toc a:hover { color: var(--yellow-600); text-decoration: underline; }
@media (max-width: 620px) {
  .beleid { padding: 36px 0 56px; }
  .beleid-prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .beleid-prose .table-wrap table { display: table; }
  .beleid-prose tbody th { white-space: normal; }
  .beleid-prose dl { grid-template-columns: 1fr; gap: 2px; }
  .beleid-prose dt { margin-top: 8px; }
  .beleid-toc ol { columns: 1; }
  .beleid-prose pre { padding: 14px 16px; font-size: .88rem; }
}

/* ---- 12. Verborgen staten ----
   Componenten met een eigen display (grid/flex) winnen anders van het
   hidden-attribuut van de browser; main.js schakelt deze delen met hidden. */
.cart-layout[hidden], .cart-row[hidden], .cart-head[hidden], .cart-empty[hidden],
.sum-row[hidden], .pay-option[hidden], .field-check[hidden], .field-error[hidden],
.checkout-grid[hidden], .form-row[hidden], .field[hidden], .pdp-meta li[hidden],
.oc-actions[hidden], .land-select[hidden] { display: none; }
/* Uitklapbaar deel (afwijkend factuuradres, zakelijke velden). */
.toggle-block[hidden] { display: none; }
.toggle-block { margin-top: 16px; }   /* 16px onder het vinkje, zoals onder elke kop (blok 9) */

/* ---- 13. Integratie templates ↔ main.js (integratieronde 2026-09-24) ----
   Staten die main.js zet en die de blokken hierboven nog niet kenden, plus
   twee layoutreparaties uit de screenshotcontrole op 390px. */
/* Grid-items krijgen standaard min-width: auto, dus een lange knoptekst op
   white-space: nowrap (lege samenvatting op /bestellen) rekt de enige kolom
   breder dan het scherm en duwt formulier én samenvatting buiten beeld. */
.checkout-grid > *, .cart-layout > * { min-width: 0; }
.cart-empty .btn { white-space: normal; max-width: 100%; line-height: 1.25; }
/* Lege wagen: één kolom, gecentreerd, in plaats van een lege rechterkolom. */
.cart-layout.is-empty { grid-template-columns: minmax(0, 1fr); }
.cart-layout.is-empty .cart-empty { width: 100%; max-width: 640px; margin-inline: auto; }
/* Foutmelding als toast (productdata niet geladen, product niet bestelbaar). */
.toast.is-error { background: #9b1c1c; }
/* Bestelknop nadat de productdata niet laadde of het product uit de data
   verdween: uit, zonder hover-effect. Kort groen na een geslaagde toevoeging. */
.btn.is-unavailable, .btn.is-unavailable:hover { opacity: .55; cursor: not-allowed; transform: none; }
.btn.btn-yellow.is-added { background: var(--green-600); }
/* Totalen in de samenvatting bij bestellen en op de bevestiging: geen tweede
   kaart-in-kaart, alleen de rijen, met een lijn boven het blok. */
.checkout-totals, .oc-totals { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 6px; }
.checkout-totals .sum-row.is-total .price-incl { font-size: 1.35rem; }
/* Kolomkoppen van de wagen (desktop): de auto-kolommen van .cart-head werden
   op hun eigen inhoud gemeten en liepen daardoor niet gelijk met de cellen
   eronder. Vaste breedtes voor prijs, stepper en regeltotaal, in kop én rij,
   zodat ze exact boven elkaar staan; de naam neemt de rest. */
/* Prijs 136px (de langste prijs met label is ±120px; was 176px, zodat de kop
   64px rechts van de bedragen stond) en links uitgelijnd, net als de bedragen:
   die staan dan op hun euroteken onder de kop. Het regeltotaal rechts. Stepper
   en verwijderknop via --cart-qty en --cart-x, want op touch zijn ze breder
   (blok 18) en staken ze anders buiten hun kolom. */
@media (min-width: 761px) {
  .cart-table .cart-head, .cart-table:not(.is-readonly) .cart-row { grid-template-columns: 72px minmax(0, 1fr) 136px var(--cart-qty, 122px) 100px var(--cart-x, 36px); }
  .cart-table .cart-head span:nth-child(5) { text-align: right; }
}
/* Header tussen 981 en 1200px. Met de winkelwagenknop erbij liep de header
   hier 28 tot 248px over (meting 2026-09-24). Tot 1080px, de tabletgrens die
   het filterpaneel en de sticky PDP-balk al gebruiken, gaat de navigatie in
   het hamburgermenu (dezelfde regels als het 980px-blok, want dat blok bevat
   ook niet-headerregels en kan niet als geheel opschuiven). Van 1081 tot
   1200px blijft de navigatie zichtbaar, maar compacter. */
@media (min-width: 981px) and (max-width: 1080px) {
  /* Topbar: drie USP's en de prijsschakelaar passen hier niet naast elkaar;
     het derde punt (levering, ook in het USP-blok en de trust-strip) valt weg.
     "Onderdeel van Europe Wagon" blijft staan (boodschap eigenaar 30-09-2026).
     Openingstijden staan sinds die dag niet meer in de topbar (build.js). */
  .topbar-usps li:nth-child(3) { display: none; }
  /* 12px tussen alle knoppen, ook voor de menuknop (was 18px), net als op 768. */
  .site-header .container { gap: 12px; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  /* Het uitgeklapte menu (.main-nav.open) staat in blok 18. */
}
@media (min-width: 1081px) and (max-width: 1240px) {
  /* Tot 1240px: de container is dan nog niet op zijn maximum (--maxw) en de
     volle navigatie liep op 1201px nog 28px over. */
  .site-header .container { gap: 12px; }
  .logo { font-size: 1.15rem; }
  .main-nav { margin-left: 0; }
  .main-nav > ul > li > a { padding: 10px 6px; font-size: .9rem; } /* 6px (was 8px): ruimte voor Woonunits, gemeten 2026-09-28 op 1081px */
  .header-actions { gap: 8px; }
  .header-actions .btn { padding: 13px 16px; font-size: .92rem; }
}

/* ---- 14. Inline stijlen uit de templates (integratieronde 2, 2026-09-24) ----
   Regels die home.js, product.js en pages.js tot nu toe als style="…" in de
   HTML zetten. Hier als klassen, zodat de templates alleen de klassen uit dit
   contract kennen en een ontwerpwijziging één plek heeft. */
/* Vrijstaande productfoto (cutout) in het hero-kader: contain met lucht
   eromheen in plaats van cover, zodat er niets van de wagen wordt afgesneden. */
.hero-photo.is-cutout img { object-fit: contain; padding: 7%; }
/* Split-hero: de highlight in de h1 mag altijd afbreken. De breedste
   onafbreekbare regel bepaalt anders de tekstkolom en drukt het fotokader tot
   een strookje; door box-decoration-break: clone loopt de achtergrond per
   regel netjes door. min-width: 0 laat de kolomverhouding (1.25fr/.75fr) uit
   de stylesheet weer gelden. Sitebreed staat .hl al op white-space: normal
   onder 620px (zie het 620px-blok hierboven), dus smalle schermen zijn gedekt. */
.hero--split .hero-inner { min-width: 0; }
.hero--split h1 .hl { white-space: normal; }
/* Label op de plattegrond-thumb in de PDP-galerij (.pdp-thumb is relative). */
.pdp-thumb .thumb-label {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 4px;
  font-size: .7rem; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--ink); background: rgba(255, 255, 255, .88);
}
/* Op een telefoon is de thumb 48 tot 62px breed (vijf kolommen): daar stond
   "Plattegro" in beeld. Dan geen label; de tekening zelf, de title en de
   alt-tekst ("Plattegrond …") zeggen wat het is. */
@media (max-width: 620px) {
  .pdp-thumb .thumb-label { display: none; }
}
/* (.sector-grid.cols-5 stond hier: vijf koop-categorieën op één rij. Sinds
   30-09-2026 krijgt een oneven aantal tegels een slottegel; zie blok 25c.) */
/* Link in de hero-intro (404: terug naar het assortiment). De hero is donker
   en a { color: inherit } maakt de link anders onzichtbaar. */
.hero .lead a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hero .lead a:hover { text-decoration-color: var(--hl); }
/* Samenvatting-in-kaart: main.js rendert op /bestellen geen .cart-summary in
   .checkout-summary (alleen .checkout-totals), maar komt hij er toch in te
   staan, dan geen tweede rand, schaduw en padding binnen de kaart. */
.checkout-summary .cart-summary { border: 0; box-shadow: none; padding: 0; background: transparent; }

/* ==========================================================================
   15. Packshots op wit (2026-09-24)
   Elk product heeft een packshot: het product vrijstaand op wit, volledig in
   beeld, 1200×900 met een vaste marge (afb.packshot). Die staat op kaarten en
   als eerste beeld op de productpagina. Alle overige foto's staan op contain:
   nooit meer bijsnijden, want dan valt een cabine of container half weg.
   Deze regels overschrijven de eerdere cover-regels (blok 3 en de 3:2-kaart).
   ========================================================================== */
.product-media { aspect-ratio: 4 / 3; background: #fff; border-bottom: 1px solid var(--line); }
.product-media img.tank-photo,
.product-media img.tank-photo.is-cutout { object-fit: contain; padding: 0; mix-blend-mode: normal; background: #fff; }
.product-card:hover .product-media a.media-link img { transform: scale(1.03); }
.pdp-stage { background: #fff; aspect-ratio: 4 / 3; }
.pdp-stage img,
.pdp-stage.is-photo img { object-fit: contain; padding: 0; mix-blend-mode: normal; background: #fff; }
.pdp-thumb { background: #fff; }
.pdp-thumb img,
.pdp-thumb.is-photo img { object-fit: contain; padding: 4px; mix-blend-mode: normal; background: #fff; }
.pdp-thumb.is-packshot img { padding: 0; }

/* ==========================================================================
   16. Homepage-hero zonder foto (2026-09-24, op verzoek)
   De productfoto rechts in de hero is weg; de tekst krijgt één kolom met een
   leesbare maximale breedte en weer normale ruimte onderin (de split-hero had
   onderaan weinig padding omdat de foto eronder volgde op mobiel).
   ========================================================================== */
.hero--tekst .hero-grid { grid-template-columns: 1fr; }
/* Onderin plus de 44px (telefoon 28px) waarmee de USP-kaart over de hero valt
   (26-10-2026, blok "USP-balk"): tussen de knoppen en de kaart blijft 56px,
   48px en 36px. */
.hero--tekst .hero-inner { max-width: 780px; padding: 76px 0 100px; }
@media (max-width: 1080px) { .hero--tekst .hero-inner { padding: 56px 0 92px; } }
@media (max-width: 620px) { .hero--tekst .hero-inner { padding: 44px 0 64px; } }

/* ==========================================================================
   17. Staande foto's heel en gecentreerd in de productgalerij (2026-09-29)
   Fotovak en thumbs zijn een grid met één auto-rij. Een staande foto
   (633×1000) rekte die rij op tot zijn eigen verhouding (height: 100% van een
   auto-rij = de natuurlijke hoogte) en overflow: hidden knipte de rest weg:
   in het fotovak zag je alleen de bovenste helft, in de thumb het bovenste
   deel. Absoluut in het vak vult de img het vak precies en toont contain de
   hele foto in het midden. De badges (z-index 2) en het plattegrondlabel
   (later in de DOM) blijven erboven.
   ========================================================================== */
.pdp-stage img,
.pdp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ==========================================================================
   18. Mobiel menu, header en tikvlakken (2026-09-29)
   Meting op 320–430px en tablet: de menuknop werd op 320 en op 412–430px
   (de gangbaarste Android- en grote iPhone-breedtes) geplet tot 20–31px; het
   menu hing als lijst onder de header, scrolde niet mee (op een iPhone SE en
   liggend viel de offerteknop buiten beeld), de pagina erachter scrolde door
   en een tik naast het menu belandde in de pagina. Nu: een paneel van de
   header tot de onderkant van het scherm dat zelf scrolt, de pagina ligt
   stil (html.nav-open, main.js), offerte en bellen staan vast onderin binnen
   duimbereik, en ☰ wordt ✕.
   ========================================================================== */
/* Header past op elke breedte: de knoppen krimpen nooit; lukt het toch niet
   (grote tekstinstelling), dan geeft het woordmerk mee. */
.site-header .logo { min-width: 0; overflow: hidden; }
.header-actions { flex: none; }
.header-actions > *, .nav-toggle { flex-shrink: 0; }
.main-nav .nav-chev, .main-nav .nav-info { display: none; }

.nav-toggle span { transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .18s ease; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
.nav-toggle, .header-phone, .header-cart { -webkit-tap-highlight-color: transparent; }

@media (max-width: 1080px) {
  /* Alleen body op hidden: die waarde gaat naar het viewport en de pagina ligt
     stil. Ook html op hidden zetten maakt body (overflow-x: hidden) zelf de
     scrollcontainer, en dan laat de sticky header los en schiet hij uit beeld. */
  html.nav-open { scrollbar-gutter: stable; }
  html.nav-open body { overflow: hidden; }
  /* Boven de sticky koopbalk (80) en de WhatsApp-knop (90), onder toast en pop-ups. */
  html.nav-open .site-header { z-index: 95; }

  .main-nav.open {
    display: block;
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--nav-top, 78px);
    margin: 0; background: #fff;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    animation: navIn .32s cubic-bezier(.16, 1, .3, 1);
  }
  /* Over de volle breedte, ook op een tablet: iconen en koppen beginnen op de
     containergoot, gelijk met het logo, en de chevrons eindigen onder de
     menuknop. Eerst een gecentreerde kolom van 640px, 64 tot 192px ingesprongen. */
  .main-nav.open > ul {
    display: flex; flex-direction: column; gap: 0;
    min-height: 100%; padding-top: 6px;
  }
  .main-nav.open > ul > li > a:not(.btn) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 0 18px;
    font-size: 1.06rem; font-weight: 600; color: var(--ink);
    border-bottom: 1px solid var(--line); border-radius: 0;
    -webkit-tap-highlight-color: transparent;
  }
  .main-nav.open > ul > li > a:not(.btn):hover,
  .main-nav.open > ul > li > a:not(.btn):active { background: #f4f5f7; }
  .main-nav.open > ul > li > a:not(.btn):focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav.open > ul > li > a[aria-current="page"] { color: var(--yellow-600); }
  .main-nav.open .nav-chev { display: block; width: 18px; height: 18px; flex: none; color: #9aa1a9; }
  .main-nav.open a[aria-current="page"] .nav-chev { color: var(--yellow-600); }

  .main-nav.open .nav-btw { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 18px 4px; }
  .main-nav.open .nav-btw > span { font-size: .86rem; font-weight: 600; color: var(--muted); }
  .main-nav.open .nav-btw .btw-switch button { min-height: 44px; align-items: center; padding: 0 18px; }

  .main-nav.open .nav-info { display: block; padding: 20px 18px 24px; }
  .main-nav.open .nav-info ul { display: grid; gap: 10px; }
  .main-nav.open .nav-info li { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; line-height: 1.45; color: var(--muted); }
  .main-nav.open .nav-info svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--yellow-600); }

  /* Acties vast onderin het paneel: op een lang scherm staan ze onderaan
     (margin-top: auto), op een kort scherm blijven ze zichtbaar (sticky). */
  .main-nav.open .nav-cta {
    display: grid; gap: 10px; margin-top: auto;
    position: sticky; bottom: 0; z-index: 1;
    padding: 14px 18px calc(14px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 -12px 24px -12px rgba(20, 22, 26, .14);
  }
  /* De belknop is een <a> in een menu-<li>: zet de rijstijl (space-between,
     500) terug naar die van een knop; de hoek volgt --r-control (blok 19). */
  .main-nav.open .nav-cta .btn { width: 100%; min-height: 50px; padding: 0 20px; justify-content: center; gap: 10px; border-radius: var(--r-control, 10px); font-size: 1rem; font-weight: 650; white-space: nowrap; }
  .main-nav.open .nav-bel svg { width: 18px; height: 18px; color: var(--yellow-600); }
}
@media (min-width: 621px) and (max-width: 1080px) {
  .main-nav.open > ul > li > a:not(.btn), .main-nav.open .nav-btw, .main-nav.open .nav-info, .main-nav.open .nav-cta { padding-inline: 24px; }
  /* De twee acties naast elkaar, zoals liggend: over 1000px breed onder elkaar
     waren het twee lange balken. */
  .main-nav.open .nav-cta { grid-template-columns: 1fr 1fr; }
}
/* Liggend (lage schermen): offerte en bellen naast elkaar, anders nemen ze de
   helft van de hoogte in. */
@media (max-width: 1080px) and (max-height: 500px) {
  .main-nav.open .nav-cta { grid-template-columns: 1fr 1fr; padding-block: 10px; }
  .main-nav.open .nav-cta .btn { min-height: 46px; }
}
@keyframes navIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .main-nav.open { animation: none; }
  .nav-toggle span { transition: none; }
}

/* Woordmerk compact tot 480px (was 400px): daarboven nam het volle logo met
   "shop" op 412–430px de ruimte van de menuknop in. Onder 360px ook de drie
   knoppen iets kleiner (40px), anders past het niet op 320px. Het woordmerk
   Wagendepot (30-09-2026) heeft geen suffix meer en is korter; de maten
   hieronder bleven, gemeten op 320, 390 en 430px (blok 25b). */
@media (max-width: 480px) {
  .site-header .logo { font-size: 1.05rem; gap: 8px; }
  .site-header .logo .logo-mark { width: 34px; height: 34px; }
  .site-header .container, .header-actions { gap: 8px; }
}
/* Onder 360px een kleiner logo, zodat er lucht blijft tussen het woordmerk en
   de belknop: op 320px 18px in plaats van 7px (woordmerk eindigt op 140px, de
   knoppen beginnen op 158px, gemeten 30-09-2026). De knoppen zelf blijven met
   een vinger 44px, en de zijmarge blijft 18px zoals de rest van de pagina
   (.cat-tabs loopt met -18px tot de schermrand). */
@media (max-width: 359px) {
  .site-header .logo { font-size: .88rem; gap: 5px; }
  .site-header .logo .logo-mark { width: 30px; height: 30px; }
  .site-header .logo .logo-mark svg { width: 19px; height: 19px; }
  .site-header .container, .header-actions { gap: 6px; }
}
/* De knoppen alleen kleiner met een muis: met een vinger blijven ze 44px
   (huisregel). */
@media (max-width: 359px) and (pointer: fine) {
  .header-phone, .header-cart, .nav-toggle { width: 40px; height: 40px; }
}

/* Koppen breken nooit buiten beeld; "Verkoopvoorwaarden" liep op 320px 64px
   over (2rem-minimum van .article-head h1). */
h1, h2, h3 { overflow-wrap: break-word; }
@media (max-width: 620px) {
  .article-head h1 { font-size: clamp(1.5rem, 7.4vw, 2.3rem); }
}

/* Categorietegels op de homepage en de 404 in twee kolommen: onder elkaar
   waren elf tegels op een telefoon ruim 4.000px scrollen. */
@media (max-width: 620px) {
  .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sector-media svg { width: 40px; height: 40px; }
  .sector-body { padding: 12px 12px 14px; }
  .sector-body h3 { font-size: 1rem; line-height: 1.25; margin-bottom: 4px; }
  .sector-body p { font-size: .8rem; margin-bottom: 8px; }
  .sector-link { font-size: .86rem; }
}

/* Verzendtabel: tot 620px elke rij een kaartje met de kolomnaam per waarde
   (data-label in tools/templates/beleid.js) in plaats van zijwaarts scrollen. */
.beleid-prose .tabel-uitleg { font-weight: 400; color: var(--muted); white-space: normal; }
@media (max-width: 620px) {
  .beleid-prose .table-wrap.is-kaarten { overflow: visible; }
  .beleid-prose .table-wrap.is-kaarten table { display: block; min-width: 0; border: 0; background: none; }
  .beleid-prose .table-wrap.is-kaarten thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .beleid-prose .table-wrap.is-kaarten tbody { display: grid; gap: 12px; }
  .beleid-prose .table-wrap.is-kaarten tr { display: block; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
  .beleid-prose .table-wrap.is-kaarten tbody th,
  .beleid-prose .table-wrap.is-kaarten tbody tr:last-child th { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  /* Label boven de waarde: naast elkaar kreeg het label 42% (107 tot 136px) en
     brak "Bezorgkosten Nederland" in elk kaartje over twee regels. */
  .beleid-prose .table-wrap.is-kaarten td,
  .beleid-prose .table-wrap.is-kaarten tbody tr:last-child td { display: grid; gap: 2px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .beleid-prose .table-wrap.is-kaarten tbody tr td:last-child { border-bottom: 0; }
  .beleid-prose .table-wrap.is-kaarten td::before { content: attr(data-label); color: var(--muted); font-weight: 500; font-size: .8rem; }
}

/* Tikvlakken op touchschermen: minstens 44px voor knoppen, de aantal- en
   verwijderknoppen in de winkelwagen, de link onder de koopknop, de
   prijsschakelaar, de pijllinks en de links onder de productfoto. De
   schakelaar was 40px (hij staat midden in het prijsblok), de pijllinks
   ("Volledig assortiment") 23,5px en de galerijlinks op
   een tablet 23px: onder de huisregel van 44px (review 30-09-2026). */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btw-switch button { min-height: 44px; align-items: center; }
  .arrow-link { min-height: 44px; }
  .pdp-gallery-links a, .pdp-gallery-links button { min-height: 44px; }
  .cart-qty button { width: 44px; height: 44px; }
  .cart-qty input { height: 44px; }
  .cart-remove { width: 44px; height: 44px; }
  .cart-table { --cart-qty: 134px; --cart-x: 44px; }   /* kolommen van de wagen (blok 8 en 13): 3 × 44px + rand, en 44px */
  .pdp-alt a, .pdp-alt button { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Footerlinks op telefoons: 36px hoge regels in plaats van 22px tekstregels.
   De platte regels in Bedrijfsgegevens en de KVK- en btw-regel onderaan
   krijgen dezelfde 36px, anders liepen de regels in één kolom ongelijk.
   Telefoon en mail: het tikvlak groeit met padding en een negatieve marge
   (samen 0), zodat de tekst op dezelfde regel blijft als het icoon; met
   min-height en centreren stond de tekst 4px lager dan het icoon. */
/* Met een vinger (pointer: coarse, telefoon én tablet) zijn de rijen 44px,
   de huisregel voor tikvlakken; op een tablet waren de links 18px (inline) en
   de contactlinks 23px. --footer-rij en --footer-tik zetten beide maten;
   bij een smal venster met een muis blijft het 36px. De contactlinks groeien
   met padding en een even grote negatieve marge, en de regels ertussen met
   margin, zodat de tikvlakken van telefoon en mail niet overlappen. */
@media (max-width: 620px), (pointer: coarse) {
  .footer-col ul li { margin-bottom: 0; }
  .footer-col ul a, .footer-legal a { display: inline-flex; align-items: center; min-height: var(--footer-rij, 36px); }
  .footer-legal-list li { display: flex; align-items: center; min-height: var(--footer-rij, 36px); }
  .footer-legal { row-gap: 0; }
  .footer-legal > span { display: inline-flex; align-items: center; min-height: var(--footer-rij, 36px); }
  .footer-contact a { display: inline-block; padding-block: var(--footer-tik, 5px); margin-block: calc(-1 * var(--footer-tik, 5px)); }
}
@media (pointer: coarse) {
  .site-footer { --footer-rij: 44px; --footer-tik: calc((44px - 1.6em) / 2); }
  .footer-contact li { margin-bottom: calc(44px - 1.6em); }
}

/* Offerteformulier op een telefoon: de sluitknop blijft in beeld tijdens het
   scrollen door het lange formulier (sticky in de scrollende overlay). */
@media (max-width: 620px) {
  #offerteModal .modal-close {
    position: sticky; top: 10px; z-index: 3;
    margin: -10px -10px -30px auto;
    box-shadow: 0 2px 10px rgba(20, 22, 26, .14);
  }
}
.modal:focus { outline: none; }

/* ==========================================================================
   19. Componenten: één vormtaal, palet-focus en staten (2026-09-29)
   Richting "zacht en precies", gekozen uit drie gerenderde richtingen (zacht,
   strak, pil) na een component-review en een jury op merk, conversie en
   vakmanschap. Wat het oude beeld gedateerd maakte: vierkante knoppen,
   badges en iconknoppen in afgeronde kaarten (8–12 radii door elkaar), de
   blauwe browserring als focus, een veldfocus die op een fout leek, geen
   ingedrukte of laadstaat, en randen van velden en ghost-knoppen onder 3:1.
   Nu: geneste radiusschaal (kaart 14 > control 10 > klein 8 > badge 6), één
   focusring uit het palet, ingedrukt/laden/uitgeschakeld voor elke knop, en
   één bewegingstaal. Kleur, font en layout blijven gelijk.
   ========================================================================== */
:root {
  --r-control: var(--radius-sm);   /* 10px: knoppen, velden, steppers, iconknoppen */
  --r-control-sm: 8px;             /* .btn-sm en knoppen in een stepper */
  --r-badge: 6px;                  /* badges en tags: 14 min de inzet van 8–12 */
  --h-sm: 40px;
  --h-md: 48px;
  --h-lg: 52px;
  /* Rand van controls ≥3:1 op wit én op --bg (WCAG 1.4.11: 3,6 en 3,3) en de ingedrukte tint van het
     rood; beide afgeleid van tokens, met een vaste terugval. */
  --line-strong: #81888f;
  --yellow-press: #00458f;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-press: .08s;
  --dur-1: .16s;
  --dur-2: .28s;
  --shadow-cta: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(0, 82, 176, .22), 0 6px 14px -6px rgba(0, 82, 176, .45);
  --shadow-cta-hover: inset 0 1px 0 rgba(255, 255, 255, .14), 0 2px 4px rgba(0, 82, 176, .2), 0 12px 24px -10px rgba(0, 82, 176, .55);
  --shadow-raise: 0 2px 6px -2px rgba(15, 20, 30, .06), 0 18px 40px -16px rgba(15, 20, 30, .2);
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  accent-color: var(--yellow-600);
}
@supports (color: color-mix(in srgb, red, blue)) {
  :root {
    --line-strong: color-mix(in srgb, var(--muted) 78%, #fff);
    --yellow-press: color-mix(in srgb, var(--yellow-600) 85%, var(--ink));
  }
}

/* ---- Browseroppervlakken uit het palet ---- */
html { -webkit-tap-highlight-color: rgba(0, 101, 215, .1); }
:where(button, .btn, [role="button"], summary, label, input, select) { -webkit-tap-highlight-color: transparent; }
::selection { background: var(--yellow-soft); color: var(--ink); }
input, textarea { caret-color: var(--yellow-600); }
/* Eén focusring voor alles (was de blauwe browserring): 2px, 2px los. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
:is(.topbar, .hero, .page-hero, .dark-section, .cta-band, .help-band, .search-band, .site-footer, .btw-vraag,
    .why-box, .trust-box, .article-cta, .toast, .on-dark, .project-card, .spec-table h3) :focus-visible { outline-color: #fff; }

/* ---- Knoppen ---- */
.btn {
  border-radius: var(--r-control);
  min-height: var(--h-md);
  padding-top: 12px; padding-bottom: 12px;
  font-weight: 650; letter-spacing: -.005em;
  box-shadow: var(--btn-schaduw, none);
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-2) var(--ease-out), color var(--dur-1) var(--ease-out), opacity var(--dur-1) var(--ease-out);
}
.btn:hover { transform: none; }   /* de lift van -2px bleef op touch na een tik hangen; nu alleen met muis (onder) */
.btn-sm { border-radius: var(--r-control-sm); min-height: var(--h-sm); padding-top: 9px; padding-bottom: 9px; }
.hero-ctas .btn, .cta-actions .btn, .pdp-order .pdp-buy-row .btn, .offer-form .btn,
.checkout-form .btn-submit, .checkout-form > .btn, .cart-summary .btn, .checkout-summary .btn {
  min-height: var(--h-lg); padding-top: 14px; padding-bottom: 14px;
}
.pdp-sticky .btn { min-height: var(--h-md); padding-top: 0; padding-bottom: 0; }
.compare tfoot .btn { min-height: var(--h-sm); border-radius: var(--r-control-sm); }
.btw-vraag .btn-sm { min-height: 36px; }

/* Primair. Rustschaduw alleen op de koopactie van de pagina, zodat er per
   pagina één knop het hoogst ligt; hover-schaduw niet in de header en niet
   op donkere vlakken (daar wordt een rode gloed een halo). */
.btn-yellow { --btn-schaduw-hover: var(--shadow-cta-hover); }
.pdp-order .pdp-buy-row .btn-yellow, .cart-summary .btn-yellow, .checkout-summary .btn-yellow,
.offer-form .btn-yellow, .checkout-form .btn-submit { --btn-schaduw: var(--shadow-cta); }
:is(.site-header, .hero, .page-hero, .dark-section, .cta-band, .help-band, .btw-vraag, .pdp-sticky, .main-nav) .btn-yellow { --btn-schaduw: none; --btn-schaduw-hover: none; }
.btn-yellow:active { background-color: var(--yellow-press); }

/* Secundair: een rand die je in de zon nog ziet (1,5px op 52% inkt, 3,6:1)
   in plaats van een haarlijn van 1,5:1 die op 'uitgeschakeld' leek. */
.btn-ghost { background-color: transparent; color: var(--ink); --btn-schaduw: inset 0 0 0 1.5px rgba(23, 25, 28, .52); --btn-schaduw-hover: inset 0 0 0 1.5px var(--ink); }
.btn-ghost:hover { background-color: transparent; box-shadow: var(--btn-schaduw); }
.btn-ghost:active { background-color: rgba(23, 25, 28, .08); }
.btw-vraag .btn-ghost { --btn-schaduw: inset 0 0 0 1.5px rgba(255, 255, 255, .55); --btn-schaduw-hover: inset 0 0 0 1.5px #fff; }
.btw-vraag .btn-ghost:active { background-color: rgba(255, 255, 255, .12); }
.btn-white:active { background-color: #e4e7eb; }
.btn-dark:active { background-color: var(--dark-2); }

/* Toegevoegd: niet alleen groen, ook een vinkje. */
.btn.btn-yellow.is-added { --btn-schaduw: none; --btn-schaduw-hover: none; }
/* Het vinkje maakt de knop breder; op 375–390px viel hij anders onder de stepper. */
.pdp-order .pdp-buy-row .btn.btn-yellow.is-added { padding-inline: 12px; gap: 8px; }
.btn.btn-yellow.is-added::before {
  content: ""; width: 16px; height: 16px; flex: none; background-color: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
/* Uitgeschakeld: één stijl in elke context. */
.btn:disabled, .btn[aria-disabled="true"], .btn.is-unavailable, .btn.is-unavailable:hover { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
/* Laden (main.js zet aria-busy): knop blijft vol van kleur, na 180ms een
   laadring in plaats van de tekst. Geen flits bij een snelle reactie. */
.btn[aria-busy="true"] { position: relative; opacity: 1; cursor: progress; --spin: #fff; animation: laadTekstUit .12s linear .18s forwards; }
.btn-ghost[aria-busy="true"], .btn-white[aria-busy="true"] { --spin: var(--ink); }
:is(.offer-form, .checkout-form, .cart-summary, .checkout-summary) .btn[aria-busy="true"] { opacity: 1; cursor: progress; }
/* Uitgeschakeld is overal .5, ook waar oudere blokken .65 zetten. */
:is(.offer-form, .checkout-form, .cart-summary, .checkout-summary) .btn[disabled]:not([aria-busy="true"]) { opacity: .5; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid var(--spin); border-right-color: transparent; border-radius: 50%; opacity: 0;
  animation: laadDraai .7s linear infinite, laadIn .12s linear .18s forwards;
}
@keyframes laadTekstUit { to { color: transparent; } }
@keyframes laadIn { to { opacity: 1; } }
@keyframes laadDraai { to { transform: rotate(360deg); } }

/* ---- Header-iconknoppen ---- */
.header-phone, .header-cart, .nav-toggle, .header-search {
  border-radius: var(--r-control);
  transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.header-phone:active { background-color: var(--yellow-press); }
.header-cart:active { background-color: #dde0e5; }
.nav-toggle:active { background-color: var(--dark-2); }
.nav-toggle span { border-radius: 1px; }

/* ---- Badges en tags ---- */
.product-badge { border-radius: var(--r-badge); font-weight: 650; letter-spacing: .01em; }
.pdp-eyebrow .tag, .product-badge.badge-inline, .blog-tag, .project-tags span { border-radius: var(--r-badge); }

/* ---- Kaarten ---- */
.product-card, a.sector-card { transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out); }
.product-card:hover, a.sector-card:hover { transform: none; box-shadow: none; }
.product-card:hover .product-media a.media-link img, a.sector-card:hover .sector-media img { transform: none; }
.product-media a.media-link img, .sector-media img { transition: transform .5s var(--ease-out); }
.product-body h3 a { transition: color var(--dur-1) var(--ease-out); }
a.sector-card:active { transform: scale(.99); }
.sector-link svg { transition: transform var(--dur-2) var(--ease-out); }
.help-card, .wa-float, .kh-btn {
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out),
              background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.help-card:hover, .wa-float:hover, .kh-btn:hover, .kh-btn.active { transform: none; }
.help-card:active, .kh-btn:active { transform: scale(.98); }

/* ---- Prijsschakelaar (al een pil; blijft het referentiecomponent) ---- */
.btw-switch button { transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.btw-switch [data-btw-set="incl"], html[data-btw="excl"] .btw-switch [data-btw-set="excl"] { box-shadow: 0 1px 2px rgba(23, 25, 28, .18), 0 2px 6px -2px rgba(23, 25, 28, .25); }
html[data-btw="excl"] .btw-switch [data-btw-set="incl"],
html:not([data-btw="excl"]) .btw-switch [data-btw-set="excl"] { box-shadow: none; }
.btw-switch button:active { transform: scale(.97); }

/* ---- Steppers (PDP en winkelwagen) ---- */
.pdp-qty, .cart-qty {
  border-color: var(--line-strong); border-radius: var(--r-control); background: #fff;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.pdp-qty { align-items: stretch; min-height: var(--h-lg); align-self: stretch; }   /* even hoog als de koopknop */
.pdp-qty button, .pdp-qty input { height: auto; }
.pdp-qty button, .cart-qty button {
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out);
}
.pdp-qty button svg, .cart-qty button svg { width: 14px; height: 14px; transition: transform var(--dur-press) var(--ease-out); }
.pdp-qty button:hover, .cart-qty button:hover { background-color: transparent; }   /* oude hover bleef op touch hangen */
.pdp-qty button:active, .cart-qty button:active { background-color: rgba(23, 25, 28, .12); }
.pdp-qty button:active svg, .cart-qty button:active svg { transform: scale(.85); }
/* Min bij 1 en plus bij het maximum: zichtbaar niet beschikbaar (main.js). */
.pdp-qty button[aria-disabled="true"], .cart-qty button[aria-disabled="true"],
.pdp-qty button:disabled, .cart-qty button:disabled { color: rgba(23, 25, 28, .3); background: transparent; cursor: not-allowed; }
.pdp-qty button:focus-visible, .cart-qty button:focus-visible { outline-offset: -3px; border-radius: var(--r-control-sm); }
.pdp-qty input:focus, .cart-qty input:focus { outline: none; background: transparent; }
.pdp-qty:has(input:focus), .cart-qty:has(input:focus) { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.pdp-qty:hover, .cart-qty:hover { border-color: var(--muted); }

/* ---- Verwijderen en sluiten ---- */
.modal-close svg { width: 20px; height: 20px; }
.modal-close { transition: background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.modal-close:active { transform: scale(.92); background-color: #d3d7dc; }
/* In rust licht: het regeltotaal blijft het zwaarste element van de regel. */
.cart-remove { background-color: transparent; color: var(--muted); transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.cart-remove:active { transform: scale(.92); background-color: var(--yellow-soft); color: var(--yellow-600); }

/* ---- Formuliervelden ---- */
.field input, .field textarea, .field select, .land-select select, .catalog-toolbar select {
  border-color: var(--line-strong); border-radius: var(--r-control); color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field input:hover, .field textarea:hover, .field select:hover, .land-select select:hover, .catalog-toolbar select:hover { border-color: var(--muted); }
/* Focus is inkt (neutraal), een fout is rood: ze lijken niet meer op elkaar. */
.field input:focus, .field textarea:focus, .field select:focus, .land-select select:focus, .catalog-toolbar select:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), 0 0 0 5px rgba(23, 25, 28, .07);
}
.field select, .catalog-toolbar select {
  -webkit-appearance: none; appearance: none; padding-right: 40px; background-color: #fff; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235e6670' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}
.catalog-toolbar select { min-height: 44px; font-weight: 600; }
.field input:disabled, .field textarea:disabled, .field select:disabled { background-color: #f2f3f5; color: var(--muted); cursor: not-allowed; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--fout); }
.field.has-error input:not([type="checkbox"]):not([type="radio"]) {
  padding-right: 42px; background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b31f1f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
}
.field.has-error input:focus, .field.has-error select:focus, .field.has-error textarea:focus {
  border-color: var(--fout); box-shadow: 0 0 0 1px var(--fout), 0 0 0 5px rgba(179, 31, 31, .1);
}
.field label .req, .field-error, .field-check.has-error { color: var(--fout); }
/* Het offerteformulier valideert met de browser (reportValidity): :user-invalid
   geeft dezelfde foutstaat als de checkout, pas nadat de bezoeker iets deed. */
.offer-form .field :is(input, textarea, select):user-invalid { border-color: var(--fout); }
.offer-form .field input:user-invalid {
  padding-right: 42px; background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b31f1f' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E");
}
.offer-form .field :is(input, textarea, select):user-invalid:focus { border-color: var(--fout); box-shadow: 0 0 0 1px var(--fout), 0 0 0 5px rgba(179, 31, 31, .1); }
/* Vinkjes en keuzerondjes in dezelfde familie (6px / rond). */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; flex: none;
  border: 0; border-radius: 6px; box-shadow: inset 0 0 0 1.5px var(--line-strong);   /* ring: een border van 1,5px wordt in Chromium 1px */
  background: #fff center / 14px no-repeat;
  display: inline-grid; place-content: center; vertical-align: middle; cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:hover, input[type="radio"]:hover { box-shadow: inset 0 0 0 1.5px var(--muted); }
input[type="checkbox"]:active, input[type="radio"]:active { transform: scale(.9); }
input[type="checkbox"]:checked {
  background-color: var(--yellow-600); box-shadow: inset 0 0 0 1.5px var(--yellow-600);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
input[type="radio"]:checked { background-color: var(--yellow-600); box-shadow: inset 0 0 0 1.5px var(--yellow-600), inset 0 0 0 5px #fff; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
.filter-option input { width: 20px; height: 20px; margin: calc((1.6 * .9rem - 20px) / 2) 0 0; flex: none; }   /* op het midden van de eerste regel (23px) */
.field-check input, .pay-option input { margin-top: 1px; }
.pay-option input:focus-visible { outline: none; }
.pay-option:has(input:focus-visible) { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
.pay-option { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.pay-option:hover { border-color: var(--line-strong); }

/* ---- Tekstacties, FAQ, footer ---- */
.arrow-link { transition: color var(--dur-1) var(--ease-out); }
.arrow-link:hover { gap: 7px; }                          /* geen animatie op gap (layout) meer */
.arrow-link svg { transition: transform var(--dur-2) var(--ease-out); }
.pdp-alt a, .pdp-alt button {
  text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(0, 82, 176, .45); border-radius: 4px;
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
.pdp-alt a:hover, .pdp-alt button:hover { text-decoration-color: currentColor; }
.pdp-alt a:active, .pdp-alt button:active { color: var(--ink); }
.faq-q { transition: color var(--dur-1) var(--ease-out); border-radius: 4px; }
.faq-q:hover { color: var(--yellow-600); }
/* Het +/−-teken wordt een getekend plusje dat bij openen een kruisje draait.
   Het staat op het midden van de eerste regel (22px padding + halve regel van
   21px), niet op het midden van de knop: bij een vraag over twee of drie
   regels zakte het anders 10 tot 21px onder de eerste regel. */
.faq-q::after, .faq-item.open .faq-q::after {
  content: ""; width: 20px; height: 20px; right: 8px; top: 32.5px; background-color: var(--yellow-600);
  -webkit-mask: var(--i-plus) center / contain no-repeat; mask: var(--i-plus) center / contain no-repeat;
  transform: translateY(-50%); transition: transform var(--dur-2) var(--ease-out);
}
.faq-item.open .faq-q::after { transform: translateY(-50%) rotate(45deg); }
.footer-col ul a:hover, .footer-legal a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }   /* rood op #141618 was 3,6:1 */
.pagination a { border-radius: var(--r-control); transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.section-nav button, .social-icons a { transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--ease-out); }
.section-nav button:active, .social-icons a:active, .pagination a:active { transform: scale(.94); }
.cat-tabs a { transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.main-nav > ul > li > a { border-radius: var(--r-control); }
.filter-toggle svg { transition: transform var(--dur-2) var(--ease-out); }
.pdp-thumb { transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
.modal { animation-duration: .32s; animation-timing-function: var(--ease-out); }
.cart-count.is-bumped { animation-timing-function: var(--ease-out); }
.pdp-sticky.is-visible { animation: stickyOmhoog var(--dur-2) var(--ease-out); }
@keyframes stickyOmhoog { from { transform: translateY(100%); } to { transform: none; } }

/* ---- Hover alleen met een echte muis; ingedrukt voor iedereen ---- */
@media (hover: hover) and (pointer: fine) {
  .btn:not(:disabled):not(.is-unavailable):not([aria-busy="true"]):not([aria-disabled="true"]):hover { transform: translateY(-1px); box-shadow: var(--btn-schaduw-hover, var(--btn-schaduw, none)); }
  .btn-ghost:not(:disabled):not([aria-disabled="true"]):hover { background-color: rgba(23, 25, 28, .04); }
  .btw-vraag .btn-ghost:not(:disabled):not([aria-disabled="true"]):hover { background-color: rgba(255, 255, 255, .1); }
  .btn-white:hover { background-color: #f2f3f5; }
  .cart-remove:hover { background-color: var(--yellow-soft); color: var(--yellow-600); }
  .pdp-qty button:not([aria-disabled="true"]):hover, .cart-qty button:not([aria-disabled="true"]):hover { background-color: rgba(23, 25, 28, .06); }
  .product-card:hover, a.sector-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raise); border-color: rgba(23, 25, 28, .12); }
  .product-card:hover .product-media a.media-link img, a.sector-card:hover .sector-media img { transform: scale(1.03); }
  .arrow-link:hover svg { transform: translateX(3px); }
  .header-phone:hover { background-color: var(--yellow-600); }
  .nav-toggle:hover { background-color: var(--dark); }
  .help-card:hover { transform: translateY(-2px); }
  .kh-btn:hover { transform: translateY(-1px); }
  .wa-float:hover { transform: translateY(-2px); }
}
.btn:not(:disabled):not(.is-unavailable):not([aria-busy="true"]):not([aria-disabled="true"]):active { transform: translateY(1px) scale(.98); transition-duration: var(--dur-press); }
.btn-yellow:not(:disabled):active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .18); }
.header-phone:active, .header-cart:active, .nav-toggle:active { transform: scale(.94); transition-duration: var(--dur-press); }
.product-card:active { transform: none; }

/* ---- Tikvlakken op touch (blok 18 blijft leidend) ---- */
@media (pointer: coarse) {
  .btn.btn-sm, .btw-vraag .btn-sm, .compare tfoot .btn { min-height: 44px; }
  .modal-close { width: 44px; height: 44px; }
  .filter-option { min-height: 44px; padding-block: calc((44px - 1.6 * .9rem) / 2); margin-bottom: 0; }   /* 44px met padding: vinkje, label en teller blijven op de eerste regel */
}

/* ---- Minder beweging: geen verschuivingen, wel kleur- en statuswissels ----
   Geen globale 0,01ms-regel: die zou ook de laadring stilzetten, en die
   draait omdat hij status meldt. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .btn:hover, .btn:not(:disabled):not(.is-unavailable):not([aria-busy="true"]):not([aria-disabled="true"]):active,
  .header-phone:active, .header-cart:active, .nav-toggle:active,
  .product-card:hover, a.sector-card:hover, a.sector-card:active,
  .product-card:hover .product-media a.media-link img, a.sector-card:hover .sector-media img,
  .help-card:hover, .help-card:active, .kh-btn:hover, .kh-btn:active, .wa-float:hover,
  .btw-switch button:active, .cart-remove:active, .modal-close:active, .arrow-link:hover svg,
  input[type="checkbox"]:active, input[type="radio"]:active { transform: none !important; }
  .pdp-sticky.is-visible, .modal { animation: none; }
  .faq-q::after { transition: none; }
}

/* ---- Geforceerde kleuren (Windows-contrastmodus) ---- */
@media (forced-colors: active) {
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid CanvasText; }
  input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; appearance: auto; }
  .btn { border: 1px solid ButtonText; }
  .header-phone svg, .header-cart svg, .nav-toggle span, .cart-remove svg, .modal-close svg, .pdp-qty svg, .cart-qty svg { color: CanvasText; }
  .nav-toggle span { background: CanvasText; }
  .header-phone, .header-cart, .nav-toggle, .modal-close, .cart-remove { border: 1px solid ButtonText; }
  input[type="checkbox"], input[type="radio"] { box-shadow: none; }
}
/* Sticky koopbalk onder 360px: de tweede prijsregel liep onder de knop door
   en werd afgesneden. Daar alleen de hoofdprijs; het prijsblok toont beide. */
@media (max-width: 359px) {
  html:not([data-btw="excl"]) .pdp-sticky .sticky-price .price-excl,
  html[data-btw="excl"] .pdp-sticky .sticky-price .price-incl { display: none; }
  .pdp-sticky .btn { padding-inline: 12px; }
  .pdp-sticky .sticky-price :is(.price-incl, .price-excl) { white-space: normal; }
  .pdp-sticky .sticky-price .btw-label { display: block; }
}

/* ==========================================================================
   20. Koop- en betaalroute (2026-09-29)
   Hulpregel met telefoonnummer onder de knoppen van winkelwagen en
   bestelpagina, het totaal vlak boven de bestelknop (alleen waar de
   samenvatting onder het formulier staat) en de "geen mail?"-regel op de
   bevestigingspagina.
   ========================================================================== */
.hulp-regel { display: flex; align-items: flex-start; gap: 9px; font-size: .84rem; color: var(--muted); margin-top: 14px; line-height: 1.5; }
.hulp-regel svg { width: 16px; height: 16px; color: var(--yellow-600); flex: none; margin-top: 2px; }
.hulp-regel a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(23,25,28,.3); text-underline-offset: 2px; }
.hulp-regel a:hover { text-decoration-color: currentColor; }
.checkout-trust + .hulp-regel { margin-top: 8px; }

/* Onder 981px staat de samenvatting pas onder het hele formulier; zonder deze
   regel klikt een mobiele koper op de knop zonder het bedrag te zien. Altijd
   incl. btw (dat betaal je), ook in de zakelijke weergave. */
.checkout-total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 16px; margin: 22px 0 14px; padding-top: 16px; border-top: 1px solid var(--line); }
.checkout-total[hidden] { display: none; }
.checkout-total > span { font-size: .95rem; font-weight: 700; color: var(--ink); }
.checkout-total b { font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.checkout-total small { flex-basis: 100%; font-size: .8rem; color: var(--muted); line-height: 1.5; text-wrap: pretty; }   /* geen los "betaalt." op de laatste regel */
@media (min-width: 981px) {
  .checkout-total { display: none; }
}

.order-confirm .oc-pay .oc-geen-mail { font-size: .86rem; color: var(--muted); }
/* De wettelijke knoptekst ("Bestellen met betalingsverplichting") past onder
   ongeveer 380px niet op één regel; dan loopt hij netjes over twee gelijke
   regels in plaats van buiten de knop. */
.checkout-form .btn-submit { white-space: normal; text-wrap: balance; line-height: 1.25; }

/* ==========================================================================
   21. Vinden en kiezen (2026-09-29)
   CRO-ronde 2. Elk onderdeel heeft hieronder een eigen, gedateerde subsectie.
   ========================================================================== */

/* ---- 21a. Levertijd en voorraad (CRO k13 en k25) ----
   Nalevering en op bestelling zijn geen "op voorraad": neutrale inkt met een
   kalender (product.js) in plaats van groen met een vinkje, zodat "Nalevering"
   naast de bestelknop niet leest als direct leverbaar. Inkt op wit 17 : 1.
   Tijdelijk uitverkocht (vangnet, nog geen product) heet niet "Direct
   bestelbaar": een eigen neutrale badge, wit op #4a5058 is 8 : 1, dezelfde tint
   als de subtype-badge. In wagen, bestelpagina en bevestiging staat een eigen
   levertijd als extra regel onder de naam, iets zwaarder dan de categorie:
   hij bepaalt de levertijd van de hele bestelling. */
.stock.is-later { color: var(--ink); }
.product-badge.badge-uit,
.pdp-eyebrow .tag.t-uit { background: #4a5058; }
.cart-name small.cart-levertijd { color: var(--ink); font-weight: 600; }
/* Wagen op een smalle tabel. De rij op desktop heeft vaste kolommen voor
   prijs, stepper en totaal (blok 13: 176 + 122 + 100px); de naam krijgt de
   rest. Vlak boven 760px en naast de samenvatting van 360px (vanaf 981px)
   bleef daarvoor 0 tot 90px over: de naam liep over de prijs heen, en de
   levertijdregel hierboven brak over drie regels. Tot de naam op één rij
   weer ruim 150px heeft (900px, en 1240px met de samenvatting ernaast) staat
   de naam over de volle breedte en prijs, stepper en totaal op een tweede
   rij eronder; de kolomkoppen passen dan niet meer en vallen weg. */
@media (min-width: 761px) and (max-width: 899px), (min-width: 981px) and (max-width: 1239px) {
  .cart-table .cart-head { display: none; }
  .cart-table:not(.is-readonly) .cart-row {
    /* Vaste kolommen voor stepper en totaal (totaal: 44px + goot + 36px = de
       96px min-width van .cart-total): met auto kreeg elke regel zijn eigen
       maten en stond de stepper naast "Prijs nog in te vullen" 34px verder
       naar links dan in de regels erboven. */
    grid-template-columns: 72px minmax(0, 1fr) var(--cart-qty, 122px) 44px var(--cart-x, 36px);
    grid-template-areas:
      "img name name name remove"
      "img price qty total total";
    gap: 10px 16px;
  }
  .cart-table:not(.is-readonly) .cart-img { align-self: start; }
  .cart-table:not(.is-readonly) .cart-price { text-align: left; }
}

/* ---- 21b. Kleurkeuze (CRO k22) ----
   De leden van een familie (FAMILIE in products.js) als links in het koopblok,
   tussen de prijs en de levertijd, gegroepeerd op voorraad (product.js).
   Kleurfamilie: ronde stippen, rond zoals de keuzerondjes (één uit meer), met
   de naam eronder. Die naam staat er zichtbaar voor iedereen: op touch en met
   het toetsenbord verschijnt geen title, en donkergrijs en donkergroen, of
   geel en lichtgroen, zijn voor wie kleuren slecht onderscheidt bijna gelijk
   (WCAG 1.4.1). Het label van de voorraadgroep staat erboven; op een brede
   kolom staan de twee groepen naast elkaar, op een telefoon onder elkaar.
   Uitvoering (een lid zonder bekende kleur): knoppen met de naam. De huidige
   variant leunt niet op kleur alleen: een inktring van 2px met een vinkje (wit
   of inkt in de stip, wat meer contrast geeft; product.js), de naam vet, en
   aria-current="page". De focusring (palet, om stip en naam) heeft een andere
   vorm dan die selectiering. Tikvlak 44px op touch, 40px met een muis; hover
   alleen met een muis. */
.pdp-variants { margin: 0 0 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pdp-variants-kop { margin: 0 0 8px; font-size: .9rem; color: var(--muted); line-height: 1.5; }
.pdp-variants-kop b { color: var(--ink); font-weight: 600; }
.pdp-variants-groepen { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.pdp-variants-groep { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
/* Dezelfde kleuren als de voorraadregel (.stock), maar een eigen klasse:
   .pdp-order .stock blijft de voorraad van dit product. */
.pdp-variants-status { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.3; }
.pdp-variants-status.is-in { color: var(--green-600); }
.pdp-variants-status.is-later { color: var(--ink); }
.pdp-variants-status.is-out { color: #9b1c1c; }
.pdp-variants-status svg { width: 15px; height: 15px; flex: none; }
.pdp-variants ul { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pdp-variant {
  --maat: var(--h-sm);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: var(--maat); min-height: var(--maat);
  color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), outline-color var(--dur-1) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.pdp-variant:active { transform: scale(.94); }
.pdp-swatch { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(23, 25, 28, .2); forced-color-adjust: none; }
/* Een lichte stip (geel, lichtgroen: een inkt-vinkje, product.js) haalt op wit
   zelf geen 3 : 1; de rand in --line-strong wel (3,6 : 1), zodat de vorm van
   de link zichtbaar blijft (WCAG 1.4.11). De donkere stippen hebben dat niet nodig. */
.pdp-swatch.is-licht { box-shadow: inset 0 0 0 1px var(--line-strong); }
/* Kleur: kolom met de stip (tikvlak --maat) en de naam eronder. De ring om de
   huidige stip is een outline op de stip zelf, 4px los: 40px rond, binnen het
   tikvlak. Onder de stip 6px, precies de ring, zodat de naam er vlak onder
   staat: op een telefoon staan de groepen onder elkaar en telt elke pixel. */
.pdp-variants.is-kleur .pdp-variants-groepen { gap: 12px 28px; }
.pdp-variants.is-kleur .pdp-variants-groep { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 4px; }
/* Kolommen van gelijke breedte (--kleur-kolom, ruim genoeg voor "Donkergroen"
   in vet): de stippen hebben een vaste steek (was 52 tot 81px, de breedte van
   elk label) en staan op een telefoon, waar de twee groepen onder elkaar
   staan, in beide rijen op dezelfde x (eerst 9 en 23px verspringing). De lijst
   schuift een halve kolom min 20px naar links: de ring om de huidige stip
   (14 + 4 + 2px van het midden) begint dan op de linkerrand van "Kleur:" en
   het voorraadlabel, zoals toen elk item zo breed was als zijn label. */
.pdp-variants.is-kleur { --kleur-kolom: 5rem; }
.pdp-variants.is-kleur ul { display: grid; grid-auto-flow: column; grid-auto-columns: var(--kleur-kolom); gap: 0; margin-inline-start: calc(20px - var(--kleur-kolom) / 2); }
.pdp-variants.is-kleur .pdp-variant {
  flex-direction: column; justify-content: flex-start; gap: 0;
  width: 100%; min-height: 0; padding: 0 0 2px; border-radius: var(--r-control-sm);
}
.pdp-variants.is-kleur .pdp-swatch { margin: calc((var(--maat) - 28px) / 2) 0 6px; }
/* Op een telefoon staan de groepen onder elkaar over de volle breedte; de
   stippen lopen dan in rijen door op hetzelfde kolomraster, zodat een groep
   met meer kleuren afbreekt in plaats van buiten beeld te lopen. */
@media (max-width: 620px) {
  .pdp-variants.is-kleur .pdp-variants-groep { flex: 1 1 100%; align-items: stretch; }
  .pdp-variants.is-kleur ul { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, var(--kleur-kolom)); }
}
.pdp-variants.is-kleur .pdp-variant-naam { font-size: .76rem; line-height: 1.3; color: var(--muted); white-space: nowrap; }
.pdp-variants.is-kleur .pdp-variant[aria-current="page"] .pdp-variant-naam { color: var(--ink); font-weight: 650; }
.pdp-variants.is-kleur .pdp-variant[aria-current="page"] .pdp-swatch { outline: 2px solid var(--ink); outline-offset: 4px; }
.pdp-variants.is-kleur .pdp-variant[aria-current="page"] .pdp-swatch::after {
  content: ""; position: absolute; inset: 7px; background-color: #fff;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
.pdp-variants.is-kleur .pdp-variant[aria-current="page"] .pdp-swatch.is-licht::after { background-color: var(--ink); }
/* Uitvoering: knop met de naam, de stip alleen als de kleur bekend is. */
.pdp-variants.is-uitvoering .pdp-variant {
  padding: 0 14px; border: 1.5px solid var(--line-strong); border-radius: var(--r-control-sm);
  font-size: .9rem; font-weight: 500; line-height: 1.2;
}
.pdp-variants.is-uitvoering .pdp-swatch { width: 16px; height: 16px; }
.pdp-variants.is-uitvoering .pdp-variant[aria-current="page"] { padding: 0 13.5px; border: 2px solid var(--ink); font-weight: 650; }
.pdp-variants.is-uitvoering .pdp-variant[aria-current="page"]::before {
  content: ""; flex: none; width: 14px; height: 14px; background-color: currentColor;
  -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat;
}
@media (pointer: coarse) {
  .pdp-variant { --maat: 44px; }
}
@media (hover: hover) and (pointer: fine) {
  .pdp-variants.is-kleur .pdp-variant:not([aria-current="page"]):hover .pdp-swatch { outline: 2px solid var(--line-strong); outline-offset: 4px; }
  .pdp-variants.is-kleur .pdp-variant:hover .pdp-variant-naam { color: var(--ink); }
  .pdp-variants.is-uitvoering .pdp-variant:not([aria-current="page"]):hover { border-color: var(--ink); }
}
@media (prefers-reduced-motion: reduce) {
  .pdp-variant:active { transform: none; }
}
/* Forced colors: de stip houdt zijn kleur (forced-color-adjust: none), met een
   rand in CanvasText; de huidige krijgt een ring in Highlight. Het vinkje van
   de gekozen uitvoering is een mask op background-color, en die wordt hier
   Canvas: zonder deze regel viel precies het teken weg dat niet van kleur
   afhangt. */
@media (forced-colors: active) {
  .pdp-swatch { outline: 1px solid CanvasText; }
  .pdp-variants.is-kleur .pdp-variant[aria-current="page"] .pdp-swatch { outline: 2px solid Highlight; outline-offset: 4px; }
  .pdp-variants.is-uitvoering .pdp-variant[aria-current="page"] { border-color: Highlight; }
  .pdp-variants.is-uitvoering .pdp-variant[aria-current="page"]::before { forced-color-adjust: none; background-color: Highlight; }
}

/* ---- 21c. Productinhoud: plus/min eerst, "Niet meegeleverd" (CRO k04 en k17) ----
   prose() in product.js zet elk deel (plus/min, omschrijving, Dit krijg je,
   uitrusting, geschikt voor) in een .pdp-deel. De ruimte tussen de delen
   staat hier, in plaats van een inline margin per kop die afhing van wat
   erboven stond: nu plus/min bovenaan staat, klopte die volgorde niet meer.
   Het laatste element van een deel heeft geen ondermarge, dus elk deel
   begint 40px onder het vorige, wat er ook boven staat.
   Een minpunt met een alternatief linkt op een eigen regel onder de tekst,
   in de stijl van de hulpregel (inkt, 600, onderstreept op 30%): een
   tekstlink, geen knop, zodat hij niet concurreert met de koopknop. Het is
   een zin ("Bekijk de X, de Y of de Z") en dus een inline link (uitzondering
   in WCAG 2.5.8): geen tikvlak dat boven de regel uitsteekt. Een vlak van 44px
   bij een regel van 22px lag over de link op de regel erboven, en een tik op
   "Polar Basic" opende dan de Polar Fresh.
   "Niet meegeleverd" staat onder de rode vinkjes van "Dit krijg je" met
   hetzelfde rondje in grijs met een minteken, net als een optionele post
   (.included-grid.is-optional): herkenbaar als tegenhanger, zonder alarm. */
.pdp-deel + .pdp-deel { margin-top: 40px; }
.pdp-deel > h2 { margin-bottom: 16px; }
.pdp-deel > :last-child { margin-bottom: 0; }
.pdp-altlink { display: block; margin-top: 3px; }
.pdp-altlink a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(23, 25, 28, .3); text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
.pdp-prose .pdp-zonder { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; font-size: .98rem; color: #3b4046; line-height: 1.5; }
.pdp-zonder .tick { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--line); color: var(--muted); display: grid; place-items: center; margin-top: calc((1.5em - 26px) / 2); }   /* zoals .included-grid .tick */
.pdp-zonder .tick svg { width: 13px; height: 13px; }
.pdp-zonder b { color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .pdp-altlink a:hover { text-decoration-color: currentColor; }
}
@media (forced-colors: active) {
  .pdp-zonder .tick { outline: 1px solid CanvasText; }
}

/* ---- 21d. Keuzehulp met links (CRO k15) ----
   In de keuzehulp boven het categorieraster is elke modelnaam een link naar
   het product (kiesHulp.tekst in site-content.js). De basisstijl van a erft
   de kleur en heeft geen onderstreping (Reset & tokens), dus zonder deze regel zag
   niemand dat de namen links zijn. Dezelfde stijl als de hulpregel onder een
   minpunt (.pdp-altlink, 21c): inkt, 600, onderstreept op 30%. Lopende
   tekst, dus geen knop en geen vergroot tikvlak (inline link, uitzondering
   in WCAG 2.5.8): padding boven en onder lag over de link op de regel
   erboven, zodat een tik op "DL11" de GL2800 Vakuum Solar opende. */
.keuzehulp > p a {
  color: var(--ink); font-weight: 600;
  text-decoration: underline; text-decoration-color: rgba(23, 25, 28, .3); text-underline-offset: 2px;
  transition: text-decoration-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .keuzehulp > p a:hover { text-decoration-color: currentColor; }
}

/* ---- 21e. Alle categorieën in het mobiele menu (CRO k12) ----
   Bovenin het menupaneel (blok 18) staan alle categorieën in twee groepen,
   Cabines en toebehoren en Wagens en units (navCats in build.js), met daaronder de rij
   "Volledig assortiment". De NAV-regels naar Assortiment en de categorieën
   (.nav-dup) vallen daar weg, anders staat elke link twee keer in het menu;
   op desktop is het omgekeerd, zodat de desktopnavigatie niet verandert.
   Een categorie is een lagere rij (48px, groter dan de 44px van een tikvlak)
   dan Contact en Volledig assortiment (56px): het zijn onderdelen van een
   groep. Het icoon staat in een grijs vlak, zodat elf rijen onder elkaar
   scanbaar blijven zonder scheidingslijn per rij. De huidige categorie (van
   de categorie- of productpagina) krijgt het rood van de huidige NAV-regel.
   Vanaf 621px (tablet, liggend) staan de rijen in twee kolommen: liggend
   blijft er naast de vaste acties onderin maar 250px over. Zonder chevron:
   die stond dan midden in het paneel, en "Woonunits & crew trailers" brak
   ervoor af op twee regels.
   Het paneel is door dit blok langer dan het scherm; een regel die met Tab
   de focus kreeg, scrolde de browser tot net achter de vaste actiebalk
   (.nav-cta, sticky), onzichtbaar (WCAG 2.4.11). scroll-padding-bottom houdt
   hem erboven; main.js zet --nav-cta-h op de hoogte van die balk.
   De huidige categorie krijgt naast het rood een balk van 3px links: rood
   tegen inkt is 2,6 : 1, te weinig als kleur het enige verschil is (1.4.1). */
.main-nav .nav-cats { display: none; }
@media (max-width: 1080px) {
  .main-nav.open { scroll-padding-bottom: var(--nav-cta-h, 0px); }
  .main-nav.open .nav-dup { display: none; }
  .main-nav.open .nav-cats { display: block; }
  .main-nav.open .nav-groep { margin: 0; padding: 14px 18px 4px; font-size: .84rem; font-weight: 650; line-height: 1.4; color: var(--muted); }
  .main-nav.open .nav-cats ul { display: grid; padding-bottom: 8px; }
  .main-nav.open .nav-cats ul a {
    display: flex; align-items: center; gap: 12px;
    min-height: var(--h-md); padding: 4px 18px;
    font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
    transition: background-color var(--dur-1) var(--ease-out);
  }
  /* Het icoonvlak wordt wit als de rij grijs wordt, anders valt het weg. */
  .main-nav.open .nav-cats ul a:active { background: var(--bg); }
  .main-nav.open .nav-cats ul a:active .nav-cat-ico { background: #fff; }
  .main-nav.open .nav-cats ul a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav.open .nav-cat-ico {
    display: grid; place-items: center; flex: none;
    width: 34px; height: 34px; border-radius: var(--r-control-sm);
    background: var(--bg); color: var(--ink);
  }
  .main-nav.open .nav-cat-ico svg { width: 19px; height: 19px; }
  .main-nav.open .nav-cat-naam { flex: 1; min-width: 0; }
  .main-nav.open .nav-cats ul a[aria-current] { color: var(--yellow-600); box-shadow: inset 3px 0 0 var(--yellow-600); }
  .main-nav.open .nav-cats ul a[aria-current] .nav-cat-ico { background: var(--yellow-soft); color: var(--yellow-600); }
  .main-nav.open .nav-cats ul a[aria-current] .nav-chev { color: var(--yellow-600); }
  /* Volledig assortiment: een gewone menuregel (blok 18), met een lijn erboven
     als einde van het blok. */
  .main-nav.open .nav-cats > .nav-alles { border-top: 1px solid var(--line); }
}
@media (min-width: 621px) and (max-width: 1080px) {
  .main-nav.open .nav-groep, .main-nav.open .nav-cats ul a { padding-inline: 24px; }
  /* Twee kolommen die van boven naar beneden vullen (columns, niet een raster
     dat per rij vult): zeven categorieën worden 4 + 3, zonder één rij met
     alleen links een categorie. Tab en schermlezer volgen dan ook de kolom. */
  .main-nav.open .nav-cats ul { display: block; columns: 2; column-gap: 0; }
  .main-nav.open .nav-cats ul > li { break-inside: avoid; }
  .main-nav.open .nav-cats ul .nav-chev { display: none; }
}
/* Liggend: kop en rijen iets compacter, dan passen er meer tussen header en acties. */
@media (max-width: 1080px) and (max-height: 500px) {
  .main-nav.open .nav-groep { padding-top: 10px; }
  .main-nav.open .nav-cats ul { padding-bottom: 4px; }
}
@media (max-width: 1080px) and (hover: hover) and (pointer: fine) {
  .main-nav.open .nav-cats ul a:hover { background: var(--bg); }
  .main-nav.open .nav-cats ul a:hover .nav-cat-ico { background: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav.open .nav-cats ul a { transition: none; }
}
@media (forced-colors: active) {
  .main-nav.open .nav-cat-ico { outline: 1px solid CanvasText; }
  .main-nav.open .nav-cats ul a[aria-current] .nav-cat-naam { text-decoration: underline; }
}

/* ==========================================================================
   22. Categoriebeelden (2026-09-29)
   De categorietegels op de homepage en de 404 tonen een product van de groep
   in plaats van een icoon (CATEGORIEEN.beeld in tools/site-data.js; beelden in
   assets/img/categorieen, gemaakt met .claude/bron/packshot/categorie.js).
   Elk beeld heeft dezelfde opbouw: packshot op wit, 16:10, het product even
   hoog in een vast vak. Wit met een
   onderlijn, net als de productkaarten (blok 15), zodat tegels en kaarten één
   set vormen. Zonder beeld blijft de tegel zoals hij was (verloop en icoon).
   ========================================================================== */
.sector-media.is-photo { background: #fff; border-bottom: 1px solid var(--line); }
.sector-media.is-photo img { object-fit: contain; }
/* Telefoon: een 4:3-tegel zet het 16:10-beeld met wit erboven en eronder,
   zodat het product in de smalle tegel niet tegen de rand staat. */
@media (max-width: 620px) {
  .sector-media.is-photo { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   23. Homepage-hero met foto (2026-09-29)
   Het wagenpark van De-Lo (hero van de-lo.nl/over-ons, zonder De-Lo-logo's,
   contactbanden en www.de-lo.nl) over de volle breedte achter de tekst.
   Hergebruikt .hero-media en .hero-scrim uit het hero-blok, met dezelfde
   laagvolgorde als .hero--video: foto (0) → scrim (1) → tekst (3). De wagens
   staan in de onderste helft van de foto, dus de uitsnede schuift omlaag; op
   een telefoon snijdt cover alleen de zijkanten af en blijft het midden (rode
   cabines, toiletwagen) in beeld.
   ========================================================================== */
.hero--foto { isolation: isolate; }
/* Geen rode gloed en raster over een foto: dat leest als een kleurzweem. */
.hero--foto::before { content: none; }
.hero--foto .container { z-index: 3; }
/* De scrim van blok "Hero" is voor video: te donker voor een daglichtfoto. Hier
   is hij donker tot waar de tekst ophoudt en daarna licht, zodat de wagens
   rechts gewoon te zien zijn. De rand van de tekst ligt in px vast: de
   tekstkolom (max. 780px, blok 16) begint op de linkerrand van de container,
   max(24px, 50% − 596px) bij --maxw 1240px. Zo staat witte tekst op elke
   breedte op minstens .78 donker (ook boven een witte wagen ruim 7 : 1); op
   tablet loopt de tekst bijna tot de rand en blijft de hele foto gedempt.
   Onder 768px geldt de verticale scrim hieronder. */
@media (min-width: 768px) {
  .hero--foto .hero-scrim {
    background:
      linear-gradient(90deg,
        rgba(20, 22, 26, .9) 0,
        rgba(20, 22, 26, .78) calc(max(24px, 50% - 596px) + 780px),
        rgba(20, 22, 26, .36) calc(max(24px, 50% - 596px) + 1020px),
        rgba(20, 22, 26, .14) 100%),
      linear-gradient(180deg,
        rgba(20, 22, 26, .4) 0%,
        rgba(20, 22, 26, 0) 28%,
        rgba(20, 22, 26, 0) 72%,
        rgba(20, 22, 26, .5) 100%);
  }
}
.hero--foto h1,
.hero--foto .lead,
.hero--foto .section-eyebrow { text-shadow: 0 1px 18px rgba(10, 14, 30, .5); }
.hero--foto .hero-media img { object-position: 50% 70%; }
/* Telefoon: de hero is staand, de foto vult de volle hoogte en de wagens staan
   precies achter de intro. De verticale scrim van het hero-blok (.52–.58 in het
   midden) gaf wit op een witte wagen maar 3,6 : 1; met minstens .66 is dat 5 : 1. */
@media (max-width: 767px) {
  .hero--foto .hero-scrim {
    background: linear-gradient(180deg,
      rgba(20, 22, 26, .8) 0%,
      rgba(20, 22, 26, .68) 35%,
      rgba(20, 22, 26, .7) 70%,
      rgba(22, 25, 29, .9) 100%);
  }
}

/* ==========================================================================
   24. Over ons: wagenparkfoto (2026-09-29)
   Dezelfde foto als de homepage-hero (blok 23), hier over de volle breedte van
   de container onder de intro, met een onderschrift (OVER_ONS.beeld). Een smalle
   uitsnede (21 : 9) houdt de wagens in beeld zonder de tekst ver naar beneden
   te duwen; op een telefoon 4 : 3, anders worden de wagens te klein.
   ========================================================================== */
.about-foto { margin: 44px 0 0; }
.about-foto img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 21 / 9; object-fit: cover; object-position: 50% 72%;
  border-radius: var(--radius); background: #d9dde2;
}
.about-foto figcaption { margin-top: 10px; font-size: .85rem; color: var(--muted); }
@media (max-width: 620px) {
  .about-foto { margin-top: 28px; }
  .about-foto img { aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   25. Prijs volgt, naam en uitlijning (2026-09-30)
   Eén subsectie per bouwstap van deze ronde.
   ========================================================================== */

/* ---- 25a. Prijs nog in te vullen (stap prijsvolgt) ----
   Een bestelbaar product zonder prijs (prijsVolgt in build.js, klantbesluit
   30-09-2026) heeft dezelfde kaart en hetzelfde koopblok als een product met
   prijs; op de plek van de prijs staat .price-volgt. Dat is geen bedrag:
   kleiner en minder zwaar dan .price-incl, en een eigen klasse, zodat de zakelijke
   weergave (html[data-btw="excl"], blok 1 en 19) hem nooit verkleint of
   verbergt. Inkt op wit, 17 : 1. */
.price-volgt { display: inline-block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.product-card .price-volgt { font-size: 1rem; }
.pdp-sticky .sticky-price .price-volgt { font-size: .95rem; white-space: normal; }
/* Winkelwagen, bestelpagina, bevestiging: in de kolommen prijs en totaal de
   maat van de stukprijs, en mag hij afbreken (de totaalkolom is 100px, blok 13).
   In de samenvatting (alleen-lezen) op twee regels, zodat de productnaam de
   ruimte houdt. Op een telefoon staat de regel al naast de stepper (totaal,
   een kolom van 36px waar een bedrag naar links uit mag lopen); daar op één
   regel, net als een bedrag, en de rij "prijs" eronder zou hem nog eens
   noemen, dus die valt weg. */
.cart-price .price-volgt, .cart-total .price-volgt { font-size: .9rem; font-weight: 600; line-height: 1.3; white-space: normal; text-wrap: balance; }
.cart-row.is-volgt .cart-total { text-align: right; }
/* Vanaf 761px in de prijskolom hooguit zo breed als de totaalkolom (100px in
   blok 13, 96px in de tweerijige regel van blok 21a), zodat de tekst in beide
   op dezelfde plek breekt en de regels op dezelfde hoogte staan; eerst één
   regel links naast twee regels rechts, 9px verschoven. */
@media (min-width: 761px) {
  .cart-table:not(.is-readonly) .cart-row.is-volgt .cart-price .price-volgt { max-width: 100px; }
}
.cart-table.is-readonly .cart-row.is-volgt .cart-total { max-width: 6.5rem; }   /* "Prijs nog / in te vullen"; smaller dan 8rem, zodat de naam in de samenvatting van 360px (blok 9) op twee regels blijft */
@media (max-width: 760px) {
  .cart-table:not(.is-readonly) .cart-row.is-volgt .cart-price { display: none; }
  .cart-table:not(.is-readonly) .cart-row.is-volgt .cart-total .price-volgt { white-space: nowrap; }
}
/* Tot 380px (in em, zodat een grotere standaardletter meeschuift) past de
   tekst op één regel niet naast de stepper: op 320px lag hij 21px over de
   +knop en ving hij de helft van de tik (review 30-09-2026). Dan op twee
   regels, rechts in de totaalkolom, zoals in de alleen-lezen samenvatting.
   width: max-content met een max-width, want de kolom zelf is maar 44px: met
   alleen max-width brak de tekst op 44px, over vier regels. Het vak loopt net
   als een bedrag naar links uit, tot 5px naast de +knop. */
@media (max-width: 23.75em) {
  .cart-table:not(.is-readonly) .cart-row.is-volgt .cart-total .price-volgt { white-space: normal; width: max-content; max-width: 6.5rem; text-wrap: balance; text-align: right; }
}
.sum-row.is-volgt .price-volgt { font-size: 1.05rem; white-space: normal; text-align: right; }
.checkout-total b.price-volgt { font-size: 1.05rem; font-weight: 700; letter-spacing: 0; white-space: normal; }
/* Uitleg bij een aanvraag: onder de samenvatting (main.js) en boven de knop
   "Aanvraag versturen" (shop.js). Een licht vlak zoals de betaalinstructies op
   de bevestiging (.oc-pay), zodat hij niet als kleine lettertjes leest; inkt
   op --bg is 16 : 1. */
.sum-note.sum-aanvraag { margin-top: 12px; padding: 10px 12px; border-radius: var(--r-control-sm); background: var(--bg); color: var(--ink); }
.checkout-aanvraag {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 0 12px; padding: 12px 14px;
  border: 1px solid var(--line); border-left: 4px solid var(--yellow); border-radius: var(--r-control);
  background: var(--bg); color: var(--ink); font-size: .9rem; line-height: 1.5;
}
.checkout-aanvraag[hidden] { display: none; }
.checkout-aanvraag svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--yellow-600); }
@media (forced-colors: active) {
  .checkout-aanvraag, .sum-note.sum-aanvraag { border: 1px solid CanvasText; }
}

/* ---- 25b. Woordmerk Wagendepot en verhuurregel in de footer (stap naam) ----
   Besluit eigenaar 30-09-2026: de shop heet Wagendepot. Het woordmerk (LOGO in
   build.js) is "wagen" in inkt (<b>) en "depot" in het merkrood, in hetzelfde
   lettertype en gewicht als het oude; in de header kleurt .logo span (blok 1)
   "depot" --yellow-600, 6,7 : 1 op wit. In de footer staat het woordmerk op
   --dark-2: daar haalde --yellow-600 maar 2,7 : 1 (het oude "sanitair" was
   net zo zwak), dus "depot" in --hl, 6,5 : 1, dezelfde kleur als
   assets/img/logo-wit.svg. "wagen" blijft wit (.footer-brand .logo b, blok 1). */
.footer-brand .logo .logo-word { color: var(--hl); }
/* "Liever huren? Dat kan bij De-Lo: de-lo.nl" onder de omschrijving in het
   merkblok (footer() in build.js). De tekst is die van .footer-brand p; de link
   is wit en onderstreept, want een link midden in een zin mag niet alleen op
   kleur verschillen. Hover dikt de onderstreping aan (alleen met een muis);
   met een vinger is de link 44px hoog, zoals de andere tikvlakken. */
.footer-huren { margin-top: -6px; }
.footer-huren a {
  color: #fff; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  border-radius: 4px;
}
@media (hover: hover) {
  .footer-huren a:hover { text-decoration-thickness: 2px; }
}
@media (pointer: coarse) {
  .footer-huren a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---- 25c. Uitlijning A: homepage, chrome en inhoudspagina's (stap uitlijning-a) ----
   Uitlijningsaudit van 30-09-2026 op 320 tot 1440px. Waar de fout in een
   bestaande regel zat, is die regel op zijn plek hersteld: USP-balk en
   trust-strip (4/2/1 kolommen vanaf de containerrand), vinkjes en iconen op
   de eerste regel (.usp-list, .trust-box, .help-card, FAQ-plusje), team als
   raster, footer, menu op een tablet, modals, btw-vraag en verzendtabel. Hier
   staan de regels die nieuw zijn. */

/* Slottegel "alles" achter een oneven aantal categorietegels (sectorAlles in
   build.js): geen foto maar een icoon op de paginatint, in een vak met
   dezelfde verhouding en onderlijn als de categoriebeelden (blok 22), zodat
   de rij gelijk blijft. */
.sector-alles .sector-media { background: var(--bg); border-bottom: 1px solid var(--line); }
@media (max-width: 620px) {
  .sector-alles .sector-media { aspect-ratio: 4 / 3; }
  /* Koppen in een rij even hoog (twee regels): "Vacuümunits & pompen" breekt,
     "Sanitaircontainers" niet, en de regel eronder stond dan 20px verschoven. */
  .sector-body h3 { min-height: 2.5em; }
}
/* Zes tegels (homepage, met slottegel): 3 + 3 zolang het 4-kolomsraster geldt. */
@media (min-width: 1081px) {
  .sector-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 404: twaalf tegels in drie kolommen op een tablet (3 × 4) in plaats van zes
   rijen van twee tegels van 349 tot 477px breed. */
@media (min-width: 621px) and (max-width: 1080px) {
  .sector-grid.tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* In tegels van 225px breekt "Woonunits & crew trailers": koppen in een rij
     even hoog, net als op een telefoon. */
  .sector-grid.tablet-3 .sector-body h3 { line-height: 1.25; min-height: 2.5em; }
}

/* Over-blok op de homepage: twee portretten naast elkaar in het donkere vlak
   (home.js). Geen vaste verhouding, anders lopen de kaarten er op een smal
   scherm uit; op een telefoon 18px binnenmarge in plaats van 8%, zodat
   "Eigenaar, verkoop" op 390px op één regel past, net als "Eigenaar, inkoop". */
.split-media.is-team { aspect-ratio: auto; padding: 8%; }
.split-media.is-team .team-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) {
  .split-media.is-team { padding: 18px; }
}
/* Over ons: bedrijf, adres en openingstijden onder de teamkop in gelijke
   regels (elk deel is .nowrap, pages.js). */
.team-adres { text-wrap: balance; }

/* Contactkaarten (/contact) op een tablet: liggend, met het icoon naast kop en
   tekst. In één kolom gecentreerd stonden de regels tot 900px breed onder een
   los icoon. */
@media (min-width: 621px) and (max-width: 1080px) {
  .contact-info-grid.is-kanalen .contact-card { display: grid; grid-template-columns: 54px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; }
  .contact-info-grid.is-kanalen .contact-card .ci-ico { grid-row: span 2; margin: 0; }
}

/* Uitgelichte producten op de homepage (.product-grid): zonder subgrid (oudere
   browsers) is de prijsregel minstens zo hoog als een prijspaar en de
   beschrijving op desktop minstens vier regels, zodat bullets en prijs per rij
   ongeveer gelijk staan. Met subgrid (de regels bij .catalog-grid) lijnt elke
   rij exact uit, ook nu de namen met het type beginnen en verschillend lang
   zijn (07-10-2026). */
@supports not (grid-template-rows: subgrid) {
  .product-grid:has(.price-pair) .product-card .spec-line { min-height: 2.875rem; }
  @media (min-width: 1081px) {
    .product-grid .product-card .desc { min-height: calc(4 * 1.6em); }
  }
}

/* Sluitknop op touch is 44px (blok 19): 2px hoger voor hetzelfde midden. */
@media (min-width: 621px) and (pointer: coarse) {
  .modal-close { top: 25px; }
}

/* Verzendtabel vanaf 621px: koppen en levertijd op één regel; de omschrijving
   in de eerste kolom breekt af. Eerst brak "Bezorgkosten Nederland" over twee
   regels naast "Bezorgkosten België" op één, en "3–7" los van "werkdagen". */
@media (min-width: 621px) {
  .beleid-prose .table-wrap.is-kaarten thead th,
  .beleid-prose .table-wrap.is-kaarten td:last-child { white-space: nowrap; }
  /* Twee kolommen met dezelfde zin breken op dezelfde plek. */
  .beleid-prose .table-wrap.is-kaarten td { text-wrap: balance; }
}

/* ---- 25d. Uitlijning B: catalogus, productpagina, wagen en bestellen (stap uitlijning-b) ----
   Tweede deel van de uitlijningsaudit van 30-09-2026 (320 tot 1440px). Waar
   de fout in een bestaande regel zat, is die regel op zijn plek hersteld:
   binnenmarge van keuzehulp en filterpaneel (20px, als de productkaart), vinkje
   en teller van een filteroptie op de eerste regel, filterpaneel met en zonder
   actief filter even hoog, lege staat zonder inspringing, toolbarlabel als
   klasse; op de productpagina de mini-USP's, "Geschikt voor", "Dit krijg je"
   in één kolom, vinkcirkels, kleurstippen op vaste kolommen, specificaties,
   toelichtingen, stepper op 320px en de zijmarge van de sticky balk; in wagen,
   bestellen en bevestiging de kolommen van de wagen, de binnenmarge van de
   vier kaarten (--kaart-pad), de samenvattingsrijen, de fieldsets en het
   betaalkader. De trust-strip onder catalogus en shop is het raster van deel A
   (.trust-strip, trustStrip() in build.js). Hier staan de regels die nieuw zijn. */

/* Productkaarten in .catalog-grid (catalogus, categorieën en "Ook bekijken"
   op de productpagina, en sinds 07-10-2026 ook de uitgelichte producten op de
   homepage, .product-grid, waar de namen sindsdien met het type beginnen en
   dus verschillend lang zijn): elke kaart is een subgrid over zes rijen
   (foto, naam, omschrijving, bullets, prijs, knoppen), zodat die
   rijen over de kaarten van één rasterrij dezelfde hoogte hebben. Bullets,
   prijs en knoppen staan zo per rij op dezelfde y, ook naast een naam of
   omschrijving die een regel langer is (was tot 42px verschil), en "Prijs op
   aanvraag" en "Prijs nog in te vullen" staan bovenaan de prijsrij, gelijk met
   de hoofdprijs ernaast (was 28px lager). Het raster houdt zijn rijgoot van
   22px; binnen de kaart geen goot (row-gap: 0), de afstanden zijn de marges
   uit de kaartregels (.product-body). Elk deel heeft een vaste rij, zodat een
   kaart zonder omschrijving of bullets niet verschuift. Zonder subgrid
   (oudere browsers) blijft de kaart de flexkolom van .product-card. */
@supports (grid-template-rows: subgrid) {
  :is(.catalog-grid, .product-grid) > .product-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
  :is(.catalog-grid, .product-grid) > .product-card > .product-body { display: grid; grid-row: 2 / span 5; grid-template-rows: subgrid; row-gap: 0; }
  :is(.catalog-grid, .product-grid) .product-body > h3 { grid-row: 1; }
  :is(.catalog-grid, .product-grid) .product-body > .desc { grid-row: 2; }
  :is(.catalog-grid, .product-grid) .product-body > .product-bullets { grid-row: 3; }
  :is(.catalog-grid, .product-grid) .product-body > .spec-line { grid-row: 4; }
  :is(.catalog-grid, .product-grid) .product-body > .card-ctas { grid-row: 5; align-self: end; }
}

/* Filterpaneel uitgeklapt op een tablet: de groepen onder elkaar in de
   volgorde van de HTML (bestelwijze, categorie, merk), met de opties van elke
   groep in kolommen, in plaats van één kolom van 860px hoog met de tellers tot
   900px van hun label. CSS-kolommen vullen van boven naar beneden, en zo loopt
   ook de tabvolgorde. Eerst stond merk links en categorie
   rechts: de focus sprong dan van de laatste categorie terug naar links boven
   (WCAG 2.4.3, review 30-09-2026). */
@media (min-width: 621px) and (max-width: 1080px) {
  .catalog-filters.is-open .filter-group { column-gap: 40px; }
  .catalog-filters.is-open .filter-group[data-facet="cat"] { columns: 2; }
  .catalog-filters.is-open .filter-group[data-facet="merk"] { columns: 3; }
  .catalog-filters.is-open .filter-group .filter-kop { column-span: all; }
  .catalog-filters.is-open .filter-option { break-inside: avoid; }
}

/* Telefoon: de toolbar is op elke catalogus hetzelfde, de teller boven en het
   sorteerveld eronder over de volle breedte, gelijk met de kaarten. Eerst
   stond hij op de ene pagina op één rij en op de andere op twee, met de
   select 44 tot 114px voor de kaartrand. */
@media (max-width: 620px) {
  .catalog-main .catalog-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .catalog-toolbar select { flex: 1; min-width: 0; }
}

/* Telefoon: de subcategorieën (toiletwagens) als één rij om te schuiven, van
   rand tot rand, in plaats van drie pillen van ongelijke breedte onder
   elkaar (155px hoog). Iets smallere pillen (14px opzij, 8px ertussen), zodat
   op 320 en 390px de volgende pil half in beeld staat en je ziet dat er meer
   is; main.js schuift de actieve pil in beeld. De 4px boven en onder houden
   de focusring binnen het schuifvlak. */
@media (max-width: 620px) {
  .cat-tabs {
    flex-wrap: nowrap; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
    margin: -4px -18px 18px; padding: 4px 18px; scroll-padding-inline: 18px;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs a { flex: none; padding-inline: 14px; }
}

/* Productpagina, tekstkolom: Uitrusting krijgt dezelfde icoonkolom van 26px
   (vinkje van 15px in het midden, 14px goot) als de vinkcirkels van "Dit krijg
   je" en "Niet meegeleverd" en de lijst "Geschikt voor": in de hele kolom
   begint de tekst op +40px (was +25 tegen +40). Alleen hier; in de
   productkaarten blijft de compacte lijst. */
.pdp-prose .product-bullets li { gap: 14px; }
.pdp-prose .product-bullets li svg { margin-inline: 5.5px; }

/* Contactkaarten op de bevestiging: in de kolom van 680px drie gelijke kaarten
   (auto-fit), ook op een tablet, waar het raster van /contact
   (.contact-info-grid) ze op de schermbreedte onder elkaar zette. Eerst maakte het e-mailadres de middelste
   kolom breder (208, 218, 208px). Op een telefoon één kolom. */
.order-confirm .contact-info-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.order-confirm .contact-card { padding: 24px 16px; }

/* ---- 25e. Review van deze ronde: focus, huidige tab (stap fixer) ----
   De meeste bevindingen uit de review van 30-09-2026 zaten in een bestaande
   regel en zijn daar hersteld: tikvlakken van 44px met een vinger (blok 18:
   schakelaar, pijllinks, galerijlinks; footer; headerknoppen op 320px), het
   totaallabel boven het bedrag op 320px, de link in .sum-note, de
   plattegrond-thumb, de wagenregel zonder prijs op 320px (25a) en het
   filterpaneel op een tablet (25d). Hier staan de regels die nieuw zijn. */

/* Sticky koopbalk (productpagina, tot 1080px): een element dat met Tab de
   focus krijgt, scrolt de browser boven de balk in beeld in plaats van eronder
   (WCAG 2.4.11). Eerst lagen 6 tot 12 van de ±70 focusstops (kaartnamen bij
   "Ook bekijken", FAQ-knoppen, footerlinks) helemaal onder de balk. 88px =
   de balk (10 + 48 + 10px, plus de rand) met wat lucht; dezelfde aanpak als
   .main-nav.open (blok 21e). */
@media (max-width: 1080px) {
  html:has(body.has-sticky-cta) { scroll-padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* Huidige subcategorie (toiletwagens): catalog.js zet aria-current="page",
   zodat een schermlezer hem ook noemt. Met geforceerde kleuren viel het
   verschil (alleen achtergrond en tekstkleur) weg; dan een dikke rand in de
   systeemkleur voor een selectie. */
@media (forced-colors: active) {
  .cat-tabs a[aria-current="page"] { border: 2px solid Highlight; }
}

/* ==========================================================================
   26. Megamenu (2026-09-30)
   Besluit eigenaar na vergelijking met europewagon.nl: op desktop opent
   "Assortiment" een paneel met alle categorieën in twee kolommen, Cabines en
   toebehoren en Wagens en units (sinds het besluit "alles bestelbaar" van
   30-09-2026 op soort, niet meer op bestelwijze), elk met productbeeld en aantal, bij Toiletwagens
   de subgroepen, onderin Volledig assortiment en hulp (bellen of offerte).
   Het paneel IS het categorieblok van het mobiele menu (navCats in build.js,
   blok 21e): de categorielinks staan maar één keer in de HTML, als echte
   links, ook als het paneel dicht is (vindbaar voor zoekmachines).
   Toegankelijk als disclosure: een knop met aria-expanded; klik, Enter of
   spatie opent en sluit, Esc sluit en zet de focus terug, klik ernaast of
   Tab uit het paneel sluit (main.js). Met een muis opent het ook bij
   aanwijzen, met een korte vertraging; aanraken en toetsenbord gaan via de
   knop. Tot 1080px is er geen knop en blijft het blok het mobiele menu.
   ========================================================================== */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Alleen voor het paneel op desktop; in het mobiele menu (21e) niet. */
.nav-mega-knop,
.main-nav .nav-cat-beeld, .main-nav .nav-cat-aantal, .main-nav .nav-subs,
.main-nav .nav-hulp, .main-nav .nav-alles-aantal { display: none; }

/* Mobiel: Volledig assortiment stond als directe link in de <li> van het blok
   en kreeg zo de gewone menuregel van blok 18; nu staat hij een niveau dieper
   (.nav-voet), dus die regel staat hier voor hem. */
@media (max-width: 1080px) {
  .main-nav.open .nav-alles {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 56px; padding: 0 18px;
    font-size: 1.06rem; font-weight: 600; color: var(--ink);
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
    -webkit-tap-highlight-color: transparent;
  }
  .main-nav.open .nav-alles:hover, .main-nav.open .nav-alles:active { background: #f4f5f7; }
  .main-nav.open .nav-alles:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav.open .nav-alles[aria-current="page"] { color: var(--yellow-600); }
}
@media (min-width: 621px) and (max-width: 1080px) {
  .main-nav.open .nav-alles { padding-inline: 24px; }
}

@media (min-width: 1081px) {
  /* Het paneel hangt aan de container van de header, niet aan de knop: zo
     loopt het over de volle breedte van de inhoud, gelijk met logo en knoppen. */
  .site-header .container { position: relative; }

  .nav-mega-knop {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 11px; border: 0; border-radius: var(--r-control); background: none;
    font: inherit; font-size: .96rem; font-weight: 500; color: inherit; white-space: nowrap;
    cursor: pointer; transition: background-color var(--dur-1) var(--ease-out);
  }
  .nav-mega-knop:hover, .nav-mega-knop[aria-expanded="true"] { background: #f2f2f2; }
  .nav-mega-knop:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .nav-mega-pijl { width: 14px; height: 14px; opacity: .6; transform: rotate(90deg); transition: transform var(--dur-2) var(--ease-out); }
  .nav-mega-knop[aria-expanded="true"] .nav-mega-pijl { transform: rotate(-90deg); }

  .main-nav .nav-mega.is-open .nav-cats {
    display: block;
    position: absolute; top: calc(100% + 1px); left: 24px; right: 24px; z-index: 5;
    padding: 22px 24px 0;
    background: #fff; border: 1px solid var(--line); border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-raise);
    /* Past op een laag scherm: dan scrolt het paneel zelf. */
    max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain;
    animation: megaIn var(--dur-2) var(--ease-out);
  }
  .main-nav .nav-kolommen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 40px; }
  .main-nav .nav-groep {
    margin: 0 0 8px; padding: 0 10px;
    font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .main-nav .nav-kolom ul { display: grid; gap: 2px; }
  .main-nav .nav-kolom li > a {
    display: flex; align-items: center; gap: 14px;
    min-height: 52px; padding: 6px 10px; border-radius: var(--r-control);
    font-size: .98rem; font-weight: 600; line-height: 1.3; color: var(--ink);
    transition: background-color var(--dur-1) var(--ease-out);
  }
  .main-nav .nav-kolom li > a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav .nav-kolom li > a[aria-current] { color: var(--yellow-600); box-shadow: inset 3px 0 0 var(--yellow-600); background: var(--yellow-soft); }
  .main-nav .nav-kolom .nav-cat-ico { display: none; }
  .main-nav .nav-cat-beeld {
    display: grid; place-items: center; flex: none;
    width: 48px; height: 36px; overflow: hidden;
    border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
  }
  .main-nav .nav-cat-beeld img { width: 100%; height: 100%; object-fit: contain; }
  .main-nav .nav-cat-naam { flex: 1; min-width: 0; }
  .main-nav .nav-cat-aantal {
    display: inline-block; min-width: 28px; padding: 2px 8px; border-radius: 999px;
    background: var(--bg); color: var(--muted); font-size: .8rem; font-weight: 650; text-align: center;
  }
  /* Subgroepen onder hun categorie, ingesprongen tot de naam (10 + 48 + 14). */
  .main-nav .nav-subs { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 8px 72px; }
  .main-nav .nav-subs a {
    display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px;
    border: 1px solid var(--line); border-radius: 999px;
    font-size: .86rem; font-weight: 550; color: var(--muted);
    transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  }
  .main-nav .nav-subs a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-subs a[aria-current] { color: var(--yellow-600); border-color: var(--yellow-600); }

  .main-nav .nav-voet {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 18px -24px 0; padding: 14px 24px 16px;
    border-top: 1px solid var(--line); background: var(--bg);
  }
  .main-nav .nav-alles {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-left: -10px;
    border-radius: var(--r-control); font-weight: 700; color: var(--ink);
  }
  .main-nav .nav-alles:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-alles .nav-chev { display: block; width: 16px; height: 16px; color: var(--yellow-600); }
  .main-nav .nav-alles-aantal { display: inline; font-weight: 600; color: var(--muted); }
  .main-nav .nav-hulp { display: block; margin: 0; font-size: .92rem; color: var(--muted); }
  .main-nav .nav-hulp a, .main-nav .nav-hulp button {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .main-nav .nav-hulp a:focus-visible, .main-nav .nav-hulp button:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
}
@media (min-width: 1081px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-kolom li > a:hover { background: var(--bg); }
  .main-nav .nav-kolom li > a[aria-current]:hover { background: var(--yellow-soft); }
  .main-nav .nav-subs a:hover { color: var(--ink); border-color: var(--line-strong, #c9ced4); }
  .main-nav .nav-alles:hover { background: #fff; }
  .main-nav .nav-hulp a:hover, .main-nav .nav-hulp button:hover { color: var(--yellow-600); }
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-mega.is-open .nav-cats { animation: none; }
  .nav-mega-pijl, .nav-mega-knop, .main-nav .nav-kolom li > a { transition: none; }
}
@media (forced-colors: active) {
  .main-nav .nav-mega.is-open .nav-cats { border: 1px solid CanvasText; }
  .main-nav .nav-kolom li > a[aria-current] .nav-cat-naam { text-decoration: underline; }
}

/* ==========================================================================
   27. Cabineblauw (2026-09-30)
   Besluit eigenaar: het rode accent eruit, cabineblauw erin, gekozen uit drie
   proeven op de homepage (cabinegeel, petrolgroen, cabineblauw; alle drie
   gemeten cabinekleuren uit het assortiment). De tokens bovenaan dragen het
   blauw; de vaste rode waarden (gloed in hero's, donkere vlakken, focusringen,
   hulpband, CTA-band) zijn in hun eigen regel omgezet. Bewust anders dan
   "overal blauw":
   - Op antraciet haalt het blauw maar 3,2 : 1: iconen en accenten daar (topbar,
     logo-icoon, sterren, footer, accentblokken, het stipje hieronder) krijgen
     --hl (9,7 : 1).
   - Foutstaten blijven rood (--fout): rood betekent "fout", niet "merk". Tot nu
     toe hingen ze aan --yellow-600, omdat dat toevallig ook rood was.
   ========================================================================== */
.hero .section-eyebrow::before, .dark-section .section-eyebrow::before { background: var(--hl); }

/* ==========================================================================
   28. Filters op de productgroepen (2026-09-30)
   De categoriepagina's krijgen hetzelfde filterpaneel als /assortiment
   (.catalog-filters, blok Shopcomponenten §4), met groepen per productgroep
   uit tools/filters.js: bij woonunits soort, lengte, personen en stroom, bij
   toiletcabines model, voorzieningen, kleur en beschikbaarheid, enzovoort.
   Nieuw zijn alleen de onderdelen hieronder; ze staan ook op /assortiment,
   zodat beide pagina's hetzelfde werken:
   - een kleurstip bij de kleuropties (zelfde stip als de kleurkeuze op de
     productpagina, 21b, maar klein);
   - het aantal actieve filters naast "Filters" (vorm van de wagenteller);
   - de rij actieve filters boven het raster, als pillen zoals de
     subcategorie-tabs, elk met een kruisje;
   - tot 1080px de knop "Toon 8 producten" onderin het uitgeklapte paneel,
     met de offerteknop daaronder als tweede knop;
   - op desktop past het vaste paneel altijd in beeld (eigen scrolbalk).
   ========================================================================== */

/* Kleurstip in een filteroptie: 16px, op het midden van de eerste regel,
   net als het vinkje (blok 19). Decoratief: de kleurnaam staat ernaast. */
.filter-swatch {
  flex: none; width: 16px; height: 16px; border-radius: 50%;
  margin-top: calc((1.6 * .9rem - 16px) / 2);
  background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(23, 25, 28, .25);
  forced-color-adjust: none;
}
@media (max-width: 1080px) and (pointer: coarse) {
  .filter-swatch { margin-top: 0; align-self: center; }
}

/* Aantal actieve filters naast "Filters" (de kop is de knop die het paneel
   opent). Zelfde vorm als de teller op de winkelwagen, zonder witte rand. */
.filter-aantal {
  display: inline-block; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--yellow); color: #fff;
  font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.filter-aantal[hidden] { display: none; }

/* Rij actieve filters boven het raster: ronde pillen in de lichte
   accenttint (een gekozen waarde, geen navigatie: de subcategorie-tabs zijn
   wit met een rand), met een kruisje dat bij aanwijzen donker wordt. Het
   kruisje is 14px, het tikvlak de hele pil (36px, op een aanraakscherm
   44px). "Wis filters" achteraan als tekstknop in het accent, net als in de
   kop van het paneel; op desktop staat die daar al vlak naast, dus hier niet. */
.filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 22px; }
.filter-chips[hidden] { display: none; }
.filter-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px;
  padding: 6px 12px 6px 16px; border: 1px solid transparent; border-radius: 999px;
  background: var(--yellow-soft); color: var(--ink); font: inherit; font-size: .88rem; font-weight: 600; line-height: 1.3;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.filter-chip svg { flex: none; width: 14px; height: 14px; color: var(--muted); stroke-width: 2.5; transition: color var(--dur-1) var(--ease-out); }
.filter-chip:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .filter-chip:hover { border-color: var(--yellow-600); }
  .filter-chip:hover svg { color: var(--ink); }
}
.filter-chip:active { background: #d3e3f8; }
.filter-chips-wis {
  min-height: 36px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .85rem; font-weight: 600; color: var(--yellow-600);
}
.filter-chips-wis:hover { text-decoration: underline; }
.filter-chips-wis:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; border-radius: 4px; }
@media (min-width: 1081px) { .filter-chips-wis { display: none; } }
@media (pointer: coarse) {
  .filter-chip, .filter-chips-wis { min-height: 44px; }
  /* "Wis filters" in de kop van het paneel: tikvlak van 44px (de kop is al zo
     hoog), de tekst blijft op de rechterrand. */
  .catalog-filters .filter-reset { min-height: 44px; padding-inline: 8px; margin-right: -8px; }
}

/* Knoppen onderin het paneel. "Toon 8 producten" alleen waar het paneel
   inklapt (tot 1080px): daar staat het raster onder het paneel en zie je
   anders niet wat een vinkje doet. De offerteknop is op elke breedte de
   tweede knop (omlijnd, zoals .btn-ghost): de hoofdactie op een lijstpagina is
   "In winkelwagen" op de kaarten, de offerte is de tweede route (besluit
   30-09-2026: alles is bestelbaar). */
.catalog-filters .filter-toon { display: none; }
.catalog-filters .filter-offerte {
  width: 100%; margin-top: 8px;
  background-color: transparent; color: var(--ink);
  --btn-schaduw: inset 0 0 0 1.5px rgba(23, 25, 28, .52); --btn-schaduw-hover: inset 0 0 0 1.5px var(--ink);
  box-shadow: var(--btn-schaduw);
}
.catalog-filters .filter-offerte:hover { background-color: transparent; box-shadow: var(--btn-schaduw-hover); }
.catalog-filters .filter-offerte:active { background-color: rgba(23, 25, 28, .08); }
@media (max-width: 1080px) {
  .catalog-filters .filter-toon { display: flex; width: 100%; margin-top: 16px; }
}

/* Desktop: het paneel staat vast naast het raster (top 96px). Is het hoger
   dan het scherm (/assortiment 867px, toiletcabines 955px; op een laptop van
   1366 × 768 is er 660px), dan scrolt de inhoud onder de kop, anders valt de
   onderkant buiten beeld tot je onderaan het raster bent. De kop ("Filters",
   Wis filters) en de ronde rand blijven staan.
   - Een schaduw onder de kop en boven de onderrand laat zien dat er meer is,
     ook zonder zichtbare scrollbalk (macOS, trackpad). Dat is de techniek met
     twee witte vlakken die meescrollen (local) over twee schaduwen die blijven
     staan: aan een uiteinde dekt het witte vlak de schaduw af.
   - De scrollbalk krijgt vaste ruimte rechts, in de binnenmarge van het
     paneel (marge -12px, gutter stable), zodat de inhoud 226px breed blijft:
     met de balk in de inhoud brak "Woonunits & crew trailers" weer af.
   - Geen overscroll-behavior: onderaan scrolt het wieltje de pagina verder. */
@media (min-width: 1081px) {
  .catalog-filters { display: flex; flex-direction: column; max-height: calc(100vh - 96px - 12px); }
  .catalog-filters .filter-head { flex: none; }
  .catalog-filters .filter-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    margin-right: -12px; padding-right: 1px; scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: #c5cad0 transparent;
    background:
      linear-gradient(#fff 30%, rgba(255, 255, 255, 0)) top / 100% 32px no-repeat local,
      linear-gradient(rgba(255, 255, 255, 0), #fff 70%) bottom / 100% 32px no-repeat local,
      radial-gradient(farthest-side at 50% 0, rgba(23, 25, 28, .14), transparent) top / 100% 10px no-repeat scroll,
      radial-gradient(farthest-side at 50% 100%, rgba(23, 25, 28, .14), transparent) bottom / 100% 10px no-repeat scroll;
  }
  /* Een focusring aan de rand van de scrollende inhoud mag niet wegvallen. */
  .catalog-filters .filter-body > :first-child { margin-top: 2px; }
}
/* De kolommen van .catalog-layout mogen smaller worden dan hun inhoud: op
   /standaard-toiletwagens staat de schuifbare rij subcategorieën (25d) nu
   in de rasterkolom, en die rekte de kolom en de pagina 79px op (390px). */
.catalog-layout > * { min-width: 0; }

/* De vaste kop (79px, op een telefoon 64px) mag nooit iets bedekken waar de
   pagina naartoe springt of dat de focus krijgt: "Toon 8 producten", het
   terugspringen na een vinkje, de focus na het wegklikken van een filter of
   met Shift+Tab (WCAG 2.4.11). Voor de hele site, dus ook voor ankers. */
html { scroll-padding-top: 96px; }
@media (max-width: 1080px) { html { scroll-padding-top: 84px; } }

/* Optie zonder resultaat binnen de huidige keuze: gedempt met een kleur in
   plaats van doorzichtigheid. Met opacity .45 haalde het label 2,9 : 1 en de
   rand van het vinkje 1,7 : 1; --muted op wit is 5,8 : 1 (WCAG 1.4.3). Het
   vinkje blijft aan te zetten (dan zie je "geen producten" met Wis filters). */
.catalog-filters .filter-option.is-empty { opacity: 1; color: var(--muted); }

/* Levertijd op de productkaart bij nalevering of op bestelling (build.js,
   kaartLevertijd): een eigen regel onder de prijs, grijs zoals de btw-regel. */
.spec-line .card-levertijd { flex-basis: 100%; margin-top: 4px; font-size: .8rem; color: var(--muted); }

/* Tablet, paneel uitgeklapt: de groepen van de productgroepen in kolommen
   van minstens 220px (twee op 768px, drie op 1024px), zodat "400 V
   (krachtstroom)" op één regel blijft, zoals bestelwijze en merk op
   /assortiment (25d). Categorie daar blijft twee kolommen. De teller staat
   op een tablet vlak achter het label in plaats van tot 220px verderop aan
   de rand van de kolom; op /assortiment net zo. */
@media (min-width: 621px) and (max-width: 1080px) {
  .catalog-filters.is-open .filter-group[data-facet]:not([data-facet="cat"]):not([data-facet="merk"]) { columns: 3 220px; }
  /* De teller wisselt tijdens het filteren van lengte (15 → 6): vaste
     cijferbreedte, zodat een label er niet door af- en weer aanbreekt en het
     paneel onder je vinger verspringt. Alleen hier: in het paneel van 226px
     op desktop kost die breedte net de pixels waardoor "Woonunits & crew
     trailers" op /assortiment afbrak. */
  .catalog-filters.is-open .filter-option .count { margin-left: 8px; font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .filter-chip, .filter-chip svg { transition: none; }
}
@media (forced-colors: active) {
  .filter-swatch { outline: 1px solid CanvasText; }
  .filter-aantal { border: 1px solid CanvasText; }
  .filter-chip { border-color: CanvasText; }
  .filter-chip svg { color: ButtonText; }
}

/* ==========================================================================
   29. Verloop in de hero's buiten de homepage (2026-09-30)
   Verzoek eigenaar: de paginahero (.page-hero: assortiment, alle
   productgroepen, contact, zakelijk, winkelwagen, bestellen) en de hero van
   404 en bedankt (.hero-water) waren een vlak antraciet met een gloed van
   12%: "heel saai". Nu een verloop in de taal van de hulpband en de CTA-band
   (blauw #0065d7 → #00458f → antraciet), maar gespiegeld: links antraciet,
   waar de tekst staat, rechts cabineblauw, waar de hero leeg is. Zo vormen
   hero (boven) en hulpband (onder) samen de rand van elke pagina. Lagen, van
   boven naar onder:
   - een zachte gloed in --hl (lichtblauw) rechtsboven, voor diepte;
   - het raster van 40px van de homepage-hero (1px wit op 3,5%);
   - een blauwe gloed rechtsonder;
   - het lineaire verloop van antraciet naar cabineblauw onder 120°.
   Gekozen uit drie proeven (verloop naar nachtblauw, alleen een gloed, en
   deze). Tot 1080px loopt de tekst bijna over de volle breedte, dus ook over
   het blauw; daar staat het verloop steiler (155°), zodat het blauw van
   onderen opkomt in plaats van van rechts. Contrast gemeten op de lichtste
   pixel achter elke tekstregel, op 390 tot 1920px, op alle 18 pagina's met
   een paginahero plus 404 en bedankt: alinea en kruimelpad minstens
   5,37 : 1 (was 4,71 : 1 met de desktophoek op 768px), de 404 en bedankt
   minstens 8,5 : 1. De homepage-hero (foto, blok 23) blijft zoals hij is.
   ========================================================================== */
:root {
  --hero-verloop:
    radial-gradient(55% 110% at 100% 100%, rgba(0, 101, 215, .5), transparent 70%),
    linear-gradient(120deg, #1a1d21 0%, #1f2327 40%, #0b356f 76%, #0059bf 100%);
  --hero-gloed: radial-gradient(60% 100% at 88% 0%, rgba(140, 194, 255, .20), transparent 60%);
  --hero-raster: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23ffffff' stroke-opacity='.035' stroke-width='1'/%3E%3C/svg%3E");
}
@media (max-width: 1080px) {
  :root {
    --hero-verloop:
      radial-gradient(70% 60% at 100% 100%, rgba(0, 101, 215, .5), transparent 70%),
      linear-gradient(155deg, #1a1d21 0%, #1f2327 45%, #0b356f 80%, #0059bf 100%);
  }
}
.page-hero { background: var(--dark); background: var(--hero-verloop); }
.page-hero::after { background: var(--hero-gloed), var(--hero-raster); }
/* Het kruimelpad was 55% wit: op antraciet 5,7 : 1, maar over de gloed
   rechtsboven (op een telefoon loopt "Woonunits & crew trailers" naar een
   tweede regel) 4,49 : 1. Op 68% overal minstens 5 : 1, en nog steeds
   duidelijk rustiger dan de alinea (75%). */
.page-hero .breadcrumb { color: rgba(255, 255, 255, .68); }
/* 404 en bedankt: .hero-water ligt over .hero::before heen, dus alle lagen hier. */
.hero-water { background: var(--hero-gloed), var(--hero-raster), var(--hero-verloop); }

/* ==========================================================================
   30. Google-reviews op de productpagina (2026-09-30)
   Besluit eigenaar: op elke productpagina de score van het Google-
   bedrijfsprofiel van Europe Wagon, als badge onder de kop (.pdp-review-badge)
   en als band onder het koopblok (.reviews-band), zoals op Watertankie. De
   basis staat hierboven bij "Google-reviews op productpagina's"; hier wat
   deze shop anders doet:
   - het aantal citaten is 1 tot 3 (.reviews-layout.is-1/.is-2/.is-3; de
     teksten komen uit GOOGLE_REVIEWS in site-data.js). Eén citaat krijgt geen
     kaart over de volle breedte maar een leesbare maat en een grotere letter;
   - de kop van de band is een h2 met het uiterlijk van de eyebrow, zodat de
     band in de koppenstructuur staat (schermlezer) zonder een tweede grote kop;
   - de badge is met een vinger 44px hoog (WCAG 2.5.8), net als de andere
     links op de productpagina;
   - sterren in het geel van Google (--ster); alleen hier, het is geen huiskleur.
   - naam en bron onder een citaat staan in .review-bron, geen <footer>: de
     pagina heeft één footer (de sitefooter).
   ========================================================================== */
:root { --ster: #f5b301; }
.review-badge .stars, .reviews-num .stars, .review-card .stars { color: var(--ster); }
.pdp-summary .pdp-review-badge { max-width: 100%; flex-wrap: wrap; row-gap: 2px; }
.reviews-band h2.section-eyebrow { font-family: inherit; line-height: 1.4; letter-spacing: 0; }
.reviews-band .section-eyebrow::before { background: var(--hl); }   /* stip op donker, zoals in de hero */
.reviews-score p.reviews-controle { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; color: rgba(255,255,255,.62); }
.reviews-layout.is-0 { grid-template-columns: minmax(0, 520px); }
.reviews-layout.is-1 .reviews-grid { grid-template-columns: minmax(0, 620px); }
.reviews-layout.is-1 .review-card { padding: 28px 28px 22px; gap: 14px; }
.reviews-layout.is-1 .review-card p { font-size: 1.12rem; line-height: 1.55; text-wrap: pretty; }
.reviews-layout.is-2 .reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reviews-grid { list-style: none; margin: 0; padding: 0; }
.review-card p { margin: 0; }
@media (max-width: 800px) {
  .reviews-layout.is-1 .reviews-grid, .reviews-layout.is-2 .reviews-grid { grid-template-columns: 1fr; }
  .reviews-layout.is-1 .review-card { padding: 22px 22px 18px; }
  .reviews-layout.is-1 .review-card p { font-size: 1.02rem; }
}
@media (pointer: coarse) {
  .pdp-review-badge { min-height: 44px; }
}
/* Tot 360px paste de badge net niet op één regel (hij brak dan in een pil
   van twee regels): iets krapper, zodat hij ook op 320px één regel blijft.
   Dat past tot en met 99 reviews; vanaf 100 breekt hij op 320px weer (de test
   "smalle telefoon" in reviews.spec.js faalt dan): kort dan de badgetekst in. */
@media (max-width: 360px) {
  .pdp-summary .pdp-review-badge { gap: 7px; padding: 7px 12px 7px 8px; font-size: .8rem; }
  .pdp-summary .pdp-review-badge .stars { font-size: .84rem; letter-spacing: 0; }
  .pdp-summary .pdp-review-badge b { font-size: .86rem; }
}

/* ==========================================================================
   31. WhatsApp: knop in het koopblok en zwevende knop (2026-10-01)
   Besluit eigenaar: elke productpagina krijgt een WhatsApp-knop, en elke
   pagina de zwevende knop rechtsonder, zoals op Watertankie, met het nummer
   van De-Lo (D.WHATSAPP in site-data.js). De basis van .wa-float staat
   hierboven ("Zwevende WhatsApp-knop", uit het sjabloon); main.js bouwt hem.
   Wat deze shop anders doet:
   - groen --wa (= --green-600) in plaats van het WhatsApp-groen #25d366: wit
     haalt op #25d366 maar 2,0 : 1, ook het label "Heb je vragen?". Op --wa
     5,1 : 1, op --wa-hover 6,6 : 1, ingedrukt (--wa-press) 8,1 : 1. Het
     icoon is het WhatsApp-teken, dus herkenbaar zonder het felle groen;
   - de knop in het koopblok (.pdp-wa) is vol groen (.btn-whatsapp), net als
     op Watertankie (eigenaar 01-10-2026; eerst was hij omlijnd). De koopknop
     blijft de hoofdactie: hij staat erboven en is de enige met de
     rustschaduw (blok 19); de WhatsApp-knop ligt plat. Een lijn erboven
     scheidt "bestellen" van "eerst iets vragen";
   - de zwevende knop staat 16px boven de sticky koopbalk: 85px = de balk
     (69px: 48px knop, 2 × 10px en de rand) plus 16px. Hij telt de
     home-indicator mee (safe-area-inset-bottom), net als de toast;
   - een focusring die op wit én op antraciet zichtbaar is: de knop zweeft
     ook boven de footer en de donkere banden;
   - niet in print.
   ========================================================================== */
:root { --wa: var(--green-600); --wa-hover: #096b3c; --wa-press: #075c33; }
.wa-float { background: var(--wa); bottom: calc(22px + env(safe-area-inset-bottom)); }
.wa-float:hover { background: var(--wa-hover); }
.wa-float:active { background: var(--wa-press); transform: scale(.97); transition-duration: var(--dur-press); }
/* Ring in twee tinten: wit tegen de knop, de gewone blauwe ring (blok 19)
   daaromheen. Op wit valt het blauw op, op antraciet het wit. Zonder
   overgang, zodat de ring er meteen staat. */
.wa-float:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; box-shadow: 0 0 0 2px #fff, 0 10px 28px rgba(20, 22, 26, .3); transition: none; }
@media (max-width: 767px) {
  .wa-float { bottom: calc(16px + env(safe-area-inset-bottom)); }
}
body.has-sticky-cta .wa-float { bottom: calc(85px + env(safe-area-inset-bottom)); }
@media (prefers-reduced-motion: reduce) { .wa-float:active { transform: none; } }
@media print { .wa-float { display: none; } }

.pdp-wa { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Vol groen: de sjabloonregel .btn-whatsapp (#25d366) krijgt hier --wa. */
.btn-whatsapp { background-color: var(--wa); color: #fff; }
.btn-whatsapp:hover { background-color: var(--wa-hover); }
.btn-whatsapp:active { background-color: var(--wa-press); }
.pdp-wa .pdp-whatsapp { margin-top: 0; }
.pdp-wa .pdp-whatsapp svg { width: 20px; height: 20px; flex: none; }
.pdp-wa .pdp-whatsapp-note { margin-top: 10px; line-height: 1.5; text-wrap: pretty; }

/* ==========================================================================
   32. Op aanvraag (2026-10-06)
   Besluit eigenaar: de producten waar Europe Wagon "Op aanvraag" schreef,
   staan buiten de shop op /op-aanvraag (BESTELSTATUS in tools/build.js).
   - Label: "Op aanvraag" in leisteen (#475467, wit erop 7,4 : 1), los van
     het groen van "Direct bestelbaar" en het grijs van het subtype.
   - "Prijs op aanvraag" op de plek van de prijs: dezelfde maat als
     .price-volgt (blok 25a), want ook dat is geen bedrag.
   - Verwijzing onder het raster van /assortiment en van een categorie met
     producten op aanvraag: een rustige kaart met links, geen productkaarten.
   - /op-aanvraag: een kop per categorie met anker; de sticky header mag de
     kop na een sprong niet afdekken.
   - Megamenu: "Op aanvraag (n)" naast "Volledig assortiment", links samen.
   ========================================================================== */
.product-badge.badge-aanvraag,
.pdp-eyebrow .tag.t-aanvraag { background: #475467; }

.price-aanvraag { display: inline-block; font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.product-card .price-aanvraag { font-size: 1rem; }
.pdp-sticky .sticky-price .price-aanvraag { font-size: .95rem; white-space: normal; }
.pdp-order.is-aanvraag .price-note { margin-top: 6px; }

.aanvraag-verwijzing {
  margin-top: 32px; padding: 20px 24px 22px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.aanvraag-verwijzing .aanvraag-kop { margin: 0 0 6px; font-size: 1.1rem; line-height: 1.3; }
.aanvraag-verwijzing p { margin: 0 0 12px; color: var(--muted); }
.aanvraag-verwijzing p a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.aanvraag-verwijzing p a:hover { color: var(--yellow-600); }
.catalog-main .aanvraag-verwijzing { margin-top: 28px; }

.aanvraag-groep { scroll-margin-top: 110px; }
.aanvraag-groep + .aanvraag-groep { margin-top: 48px; }
.aanvraag-groep > .section-title { margin: 0 0 22px; }

.main-nav .nav-aanvraag { margin-left: 0; margin-right: auto; }
@media (max-width: 1080px) {
  .main-nav.open .nav-alles + .nav-aanvraag { border-top: 0; }
}

/* Logo B, keuze eigenaar 26-10-2026: vrijstaand beeldmerk en vast woordgewicht. */
.logo { font-weight: 760; }
.logo .logo-mark { background: transparent; color: var(--yellow); flex-shrink: 0; }
.logo .logo-mark svg { width: 38px; height: 38px; }
.footer-brand .logo .logo-mark { color: var(--hl); }
@media (max-width: 480px) {
  .site-header .logo .logo-mark svg { width: 34px; height: 34px; }
}
@media (max-width: 359px) {
  .site-header .logo .logo-mark svg { width: 30px; height: 30px; }
}

/* ==========================================================================
   33. Levergebied in de footer (2026-10-26)
   Overgenomen van koelaanhangerdirect.nl (dat het van vriesboxie.nl heeft,
   naar rentwereld.nl): een platte kaart als illustratie, met de ondergrond
   (img, assets/img/levergebied.svg) en daarover pijlen, pinnen en namen (svg),
   allebei in hetzelfde kaartvak (tools/kaart.js, levergebied() in build.js).
   Geen gloed, verloop of animatie; kleur zit in het levergebied (Nederland en
   België), de grote pin met het beeldmerk en de cabineblauwe pijlen. De maat
   van namen, lijnen en de grote pin hangt af van hoe breed de kaart getekend
   wordt, dus per breakpoint: namen minstens 12px en rijtijden 11px vanaf
   320px breed.
   Telefoon: de kaart is iets breder dan het scherm en loopt onder de rand
   door, ook onderaan. De onderregel krijgt daar minder ruimte onderin: de
   88px waren er voor de zwevende WhatsApp-knop, die nu boven de kaart staat.
   ========================================================================== */
.site-footer { overflow: hidden; }
.footer-kaart { width: 112vw; margin: 8px 0 0 calc(50% - 56vw); }
.kaart-uitleg { max-width: min(34ch, 100vw - 36px); margin-left: calc(6vw + 18px); }
.kaart-kop { margin: 0 0 2px; font-size: .95rem; font-weight: 700; line-height: 1.3; letter-spacing: 0; color: #fff; }
.kaart-uitleg p { margin: 0; font-size: .84rem; line-height: 1.5; color: var(--muted-light); }
.kaart { --naam: 30px; --lijn: 1.3; --basis: 1.2; position: relative; aspect-ratio: 1000 / 1092; margin-top: 8px; }
.kaart > img, .kaart > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kaart text { font-size: var(--naam); font-weight: 650; fill: var(--ink); }
/* Rijtijd onder de naam: donkergrijs, 6,7 : 1 op het lichtblauwe land
   (--muted haalt daar maar 3,9 : 1). */
.kaart tspan { font-size: .9em; font-weight: 500; fill: #3f454c; }
.kaart-pijl { fill: none; stroke: var(--yellow); stroke-width: calc(3.4px * var(--lijn)); stroke-linecap: round; stroke-linejoin: round; }
.kaart-pin { fill: var(--ink); fill-rule: evenodd; }
.kaart-basis { transform: translate(var(--x), var(--y)) scale(var(--basis)); }
.kaart-basispin { fill: var(--dark); }
.kaart-basis text { font-size: 27px; font-weight: 750; }
@media (max-width: 1199px) {
  .footer-bottom { padding-bottom: 24px; }
}
@media (min-width: 621px) { .kaart-uitleg { max-width: min(34ch, 100vw - 48px); margin-left: calc(6vw + 24px); } }
/* Tablet en kleine laptop: de kaart rechts tot de rand, het onderschrift
   linksboven over de lege zee van de kaart (naast de kaart werd het op 768px
   een kolom van twee woorden breed). */
@media (min-width: 641px) and (max-width: 1199px) {
  .footer-kaart { position: relative; width: auto; margin: 16px calc(50% - 50vw) 0 0; }
  .kaart-uitleg { position: absolute; top: 8%; left: 0; z-index: 1; max-width: 26ch; margin: 0; }
  .kaart { width: min(82vw, 640px); margin: 0 0 0 auto; --naam: 24px; --lijn: 1.1; --basis: 1.05; }
}
/* Desktop: los in de hoek, achter de inhoud. Het merkblok staat boven de drie
   linkkolommen, en inhoud en onderregel zijn zo breed als de ruimte links van
   de kaart (100vw - 100% is de marge naast de container). */
@media (min-width: 1200px) {
  .site-footer { --kaart-b: clamp(560px, 44vw, 720px); position: relative; isolation: isolate; min-height: calc(var(--kaart-b) * 1.092); }
  .footer-top, .footer-bottom { max-width: calc(100% - var(--kaart-b) + (100vw - 100%) / 2 - 48px); }
  .footer-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; }
  /* Het merkblok in twee kolommen, omschrijving links en contact rechts: onder
     elkaar werd de footer twee keer zo hoog als de kaart. */
  .footer-brand { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; align-content: start; }
  .footer-brand > .logo { grid-column: 1 / -1; justify-self: start; }
  .footer-brand > .footer-contact { grid-column: 2; grid-row: 2 / span 2; margin-top: 16px; }
  .footer-bottom { justify-content: flex-start; }
  .footer-kaart { position: absolute; right: 0; bottom: 0; z-index: -1; width: var(--kaart-b); margin: 0; }
  .kaart-uitleg { position: absolute; top: 6%; left: 4%; z-index: 1; max-width: 28%; margin: 0; }
  .kaart { --naam: 23px; --lijn: 1; --basis: 1; margin: 0; }
}

/* ==========================================================================
   34. Packshot op de kaart onder de labels (2026-10-27)
   Feedback Europe Wagon: op de kaarten van de GL2400 Fresh en de GL2800 Solar
   leek de foto afgesneden. De packshot (blok 15) vult het vak tot 7% van de
   rand, en de labels linksboven en rechtsboven ("Direct bestelbaar",
   "Standaard") vielen over het dak. Daarom schuift het product onder de
   labels: bovenin de ruimte van een label (12px + ~28px), aan de andere
   kanten een smalle rand. Het product blijft heel en gecentreerd (contain).
   ========================================================================== */
.product-media img.tank-photo.is-packshot { padding: 40px 6px 6px; }

/* ==========================================================================
   35. Showroom en voorraad op /contact (2026-10-27)
   Vier foto's van Europe Wagon (via WhatsApp, 680 px breed): klein in een
   raster, twee naast elkaar op een telefoon en vier vanaf 900px. Sfeerfoto's,
   geen productfoto's: hier mag cover, alle tegels even hoog (4:3), ook de
   staande foto van het magazijn.
   ========================================================================== */
.showroom-intro { color: var(--muted); max-width: 640px; margin: 10px 0 24px; }
.showroom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.showroom-grid figure { margin: 0; }
.showroom-grid img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); background: #eef0f3; }
.showroom-grid figcaption { margin-top: 6px; font-size: .84rem; color: var(--muted); }
@media (min-width: 900px) { .showroom-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }