/* ==========================================================================
   Mobiel Sanitair Shop — global stylesheet
   Basis: het Watertankie/Toiletzonderafvoer-ontwerp (Plus Jakarta Sans),
   hertint naar Europe Wagon-rood (#d42a2a) op antraciet (#1f2327).
   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 {
  /* mobielsanitairshop.nl-huisstijl — Europe Wagon-rood op antraciet.
     De tokens heten nog 'yellow' (historisch, uit het Watertankie-ontwerp waar
     Toiletzonderafvoer op voortbouwt) maar dragen hier het rode accent, zodat
     de hele stylesheet in één keer meekleurt (BUILD-SPEC §11).

     Contrast (WCAG 2, sRGB-luminantie, gemeten bij het hertinten op 2026-09-23):
       wit op --yellow      #d42a2a   5,0 : 1   knoppen, badge-teller, sticky balk
       wit op --yellow-600  #b31f1f   6,7 : 1   hover, verlopen
       --yellow-600 op wit            6,7 : 1   tekstlinks en iconen op wit
       wit op --green-600   #0b7f47   5,1 : 1   badge 'Direct bestelbaar'
       wit op --green       #0f9d58   3,5 : 1   → niet voor tekst; alleen vlakken/iconen
       wit op --blue        #2b4c7e   8,6 : 1   badge 'Op offerte'
       --muted op wit       #5e6670   5,8 : 1
       --ink op --hl        #ff6b6b   6,4 : 1   gemarkeerde woorden in koppen
     Het rood is bewust iets gedempter dan het felle Europe Wagon-rood: feller
     haalt witte knoptekst de 4,5 : 1 niet meer. */
  --yellow: #d42a2a;        /* primair accent: knoppen, iconen, prijsbadge */
  --yellow-600: #b31f1f;    /* hover / donkerder accent, tekstlinks op wit */
  --yellow-soft: #fbe9e9;   /* lichte tint achter rode iconen en in gemarkeerde kolommen */
  --hl: #ff6b6b;            /* highlight-marker in koppen (donkere tekst erop) */
  --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 */
  --blue: #2b4c7e;          /* 'offerte'-badge */
  --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(--yellow); 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(--yellow); 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(--yellow);
}
.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;
  padding: 11px 13px;
  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(212,42,42,.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%, #5c1e1e 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(--yellow); 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;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff;
  color: var(--ink);
  padding: 14px 18px;
  font-weight: 600;
  font-size: .95rem;
  min-width: 190px;
  justify-content: space-between;
  transition: transform .15s ease, box-shadow .15s ease;
}
.chip:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.12); }
.chip svg { width: 15px; height: 15px; opacity: .6; }
.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-badge.badge-blue { background: var(--blue); }
.product-body { padding: 22px 20px 24px; display: flex; flex-direction: column; flex: 1; }
.product-body h3 { font-size: 1.12rem; margin-bottom: 8px; }
.product-body .desc {
  font-size: .88rem; color: var(--muted);
  margin-bottom: 18px; flex: 1;
}
.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(--yellow);
  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(212,42,42,.12), transparent 60%),
    radial-gradient(120% 120% at 30% 20%, #5c1e1e, #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: center; gap: 14px; font-weight: 500; }
.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%, #5c1e1e, #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%, #5c1e1e, #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, #5c1e1e, #141618);
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
}
.social-tile:nth-child(2){ background: linear-gradient(135deg,#5c1e1e,#2a1010);}
.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, #c9302c 0%, #8e1c1c 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, #c9302c 0%, #8e1c1c 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; }
.help-card {
  display: flex; align-items: center; 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; 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(--yellow); flex: none; margin-top: 4px; }
.footer-col h3 { color: #fff; font-size: .95rem; margin-bottom: 18px; letter-spacing: 0; }
.footer-col ul li { margin-bottom: 11px; }
.footer-col ul a { font-size: .88rem; transition: color .15s; }
.footer-col ul a:hover { color: var(--yellow); }
.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(212,42,42,.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 { background: #fff; border-bottom: 1px solid var(--line); }
.trust-strip .container { display: flex; flex-wrap: wrap; gap: 28px 44px; justify-content: space-between; padding-block: 20px; }
.trust-strip li { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: .92rem; }
.trust-strip svg { width: 20px; height: 20px; color: var(--yellow-600); flex: none; }

.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 4px; color: var(--muted); font-size: .98rem; }
.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; }
.filter-option { display: flex; align-items: center; 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; 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 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; }
  .main-nav.open {
    display: block; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 24px;
  }
  .main-nav.open ul { flex-direction: column; gap: 0; }
  /* display:flex + volle breedte: anders is elke menuregel maar zo breed als
     zijn tekst en lopen de scheidingslijnen ongelijk. */
  .main-nav.open > ul > li > a { display: flex; width: 100%; padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  /* Offerteknop onderaan het menu: de header-CTA verdwijnt op mobiel, dus
     hier blijft een tikbare route naar de offerte-pop-up bestaan. */
  .main-nav.open .nav-cta { display: block; padding-top: 16px; }
  .main-nav.open > ul > li.nav-cta > a,
  .main-nav.open > ul > li.nav-cta > button { display: inline-flex; width: 100%; justify-content: center; padding: 15px 22px; border-bottom: 0; border-radius: 0; font-weight: 600; }
  .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; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-col ul li { margin-bottom: 8px; }
  .footer-col ul a { 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 (4 blokken onder de hero) */
.usp-strip-wrap { background: #fff; border-bottom: 1px solid var(--line); }
.usp-strip { display: grid; grid-template-columns: repeat(4, 1fr); }
.usp-block { display: flex; gap: 16px; padding: 30px 26px; border-left: 1px solid var(--line); }
.usp-block:first-child { border-left: 0; }
.usp-block .ico { width: 46px; height: 46px; flex: none; border-radius: 11px; background: var(--yellow-soft); color: var(--yellow-600); display: grid; place-items: center; }
.usp-block .ico svg { width: 23px; height: 23px; }
.usp-block .usp-kop { font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 5px; }
.usp-block p { font-size: .85rem; color: var(--muted); line-height: 1.5; }

/* 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(255,107,107,.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(212,42,42,.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: center; margin-bottom: 15px; font-weight: 500; }
.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); }
  .usp-strip { grid-template-columns: repeat(2, 1fr); }
  .usp-block:nth-child(3) { border-left: 0; }
  .usp-block { border-top: 1px solid var(--line); }
  .usp-block:nth-child(1), .usp-block:nth-child(2) { border-top: 0; }
}
@media (max-width: 900px) {
  .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .usp-strip { grid-template-columns: 1fr; }
  .usp-block { border-left: 0; }
  .usp-block:nth-child(2) { border-top: 1px solid var(--line); }
  .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; margin-bottom: 34px; }
.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; }
.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; }
.map-embed iframe { width: 100%; height: 380px; border: 0; }

/* ==========================================================================
   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; }
  .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 zonder "shop"-suffix en krappere
     tussenruimte; de naam staat voluit in de footer. */
  .logo { font-size: 1.05rem; gap: 8px; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .site-header .logo .logo-tld { display: none; }
  .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(212,42,42,.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-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: 1px; }
.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; }

.pdp-mini-usps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.pdp-mini-usps li { display: flex; align-items: center; gap: 10px; font-size: .88rem; font-weight: 500; color: var(--ink); }
.pdp-mini-usps svg { width: 17px; height: 17px; color: var(--yellow-600); flex: none; }

/* ---- 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; }

/* ---- standaard geleverd ---- */
.included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 40px; }
.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: 1px; }
.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) {
  .included-grid { grid-template-columns: 1fr; }
  .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; } }
.modal-close {
  position: absolute; top: 16px; right: 16px;
  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; }
.modal-head { margin-bottom: 20px; padding-right: 44px; }
.modal-head .section-eyebrow { margin-bottom: 8px; }
.modal-head h2 { font-size: 1.5rem; margin-bottom: 8px; }
.modal-head p { color: var(--muted); font-size: .95rem; }
.modal-product {
  display: flex; align-items: center; 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-product .product-badge { position: static; border-radius: 5px; }
.modal .offer-form { border: 0; padding: 0; box-shadow: none; }

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

/* ==========================================================================
   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) */
.about-feature { display: grid; grid-template-columns: minmax(280px, 440px) 1fr; gap: 32px; margin-top: 44px; align-items: center; }
.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, #c9302c, #8e1c1c);
  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.
   ========================================================================== */

/* ---- logo: ".nl" klein achter het woordmerk ---- */
.logo .logo-tld { font-style: normal; font-weight: 600; font-size: .68em; color: var(--muted); margin-left: 1px; letter-spacing: 0; }
.footer-brand .logo .logo-tld { color: rgba(255,255,255,.55); }

/* ---- badges (kaarten, PDP-galerij, modal) ----
   De verhuursite had een badge per wagentype (vacuüm/standaard/luxe/miva).
   De shop kent maar twee bestelwijzen plus een neutraal subtype; die staan
   als .badge-koop / .badge-offerte / .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 ---- */
.keuzehulp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 28px; 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 { color: #f5b301; 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 14px calc(10px + env(safe-area-inset-bottom));
  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 { 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; } }
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 18px; }
  .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 (homepage): beschrijving groeide mee met de bullets,
   waardoor de witruimte tússen beide per kaart verschilde. Nu staat de
   inhoud bovenaan en vangt de bulletlijst de restruimte op, zodat prijs en
   knoppen in elke rij op dezelfde hoogte staan. */
.product-card.is-rich .desc { flex: none; }

/* 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, laatste rij gecentreerd.
   Flex i.p.v. grid zodat een onvolledige laatste rij (13 mensen) in het
   midden staat in plaats van links te hangen. ---- */
.team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.team-card {
  flex: 0 0 calc((100% - 4 * 22px) / 5);
  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-card { flex-basis: calc((100% - 3 * 22px) / 4); } }
@media (max-width: 800px)  { .team-card { flex-basis: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 560px)  {
  .team-grid { gap: 14px; }
  .team-card { flex-basis: calc((100% - 14px) / 2); }
  .team-body { padding: 12px 12px 14px; }
}

/* ---- Google-reviews van De-Lo op productpagina's: badge boven de vouw +
   donkere band met score en drie citaten onder het productblok ---- */
.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 { color: #f5b301; 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 { color: #f5b301; letter-spacing: 1px; font-size: .95rem; }
.review-card p { font-size: .95rem; line-height: 1.6; color: #3b4046; flex: 1; }
.review-card footer { 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 footer 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 — mobielsanitairshop.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 (.is-quote)
     2. Badges            .badge-koop .badge-offerte .badge-sub (+ .pdp-eyebrow .tag)
     3. Productkaart      .card-eyebrow  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;
}
/* "Prijs op aanvraag" staat op de plek van de prijs, maar is geen bedrag:
   kleiner en minder zwaar, zodat het niet als prijs wordt gelezen. */
.price-incl.is-quote { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; white-space: normal; }
.price-note { font-size: .82rem; color: var(--muted); line-height: 1.5; }
/* 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 .price-incl { font-size: 1.3rem; }
.product-card .price-incl.is-quote { font-size: 1rem; }
.product-card .price-excl { font-size: .8rem; }

/* ---- 2. Badges: bestelwijze en subtype ----
   Twee bestelwijzen (direct bestelbaar / op offerte) en één neutrale badge
   voor subtypen (vacuüm, standaard). 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-offerte { background: var(--blue); }
.product-badge.badge-sub     { background: #4a5058; }
.pdp-eyebrow .tag.t-koop     { background: var(--green-600); }
.pdp-eyebrow .tag.t-offerte  { background: var(--blue); }
.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 ---- */
.product-card .card-eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 6px;
}
/* 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 + bekijken, of details + offerte);
   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 22px;
}
.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 [data-facet] { border-top: 1px solid var(--line); padding: 16px 0; }
.catalog-filters [data-facet]:first-child { border-top: 0; padding-top: 0; }
.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) {
  .catalog-filters { position: sticky; top: 96px; padding: 26px 24px; }
  .catalog-filters .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). Verzendkosten staan
   dus altijd vóór de knop. Bij een offerteproduct (.pdp-order.is-quote)
   staat er geen stepper en geen bestelknop, alleen offerte + bellen.
   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. */
.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; }
.pdp-order.is-quote .pdp-buy-row .btn { flex: 1 1 100%; }
.pdp-alt { margin-top: 14px; font-size: .88rem; color: var(--muted); text-align: center; line-height: 1.5; }
.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; }
  .pdp-order.is-quote .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 .price-incl { font-size: 1.05rem; font-weight: 800; color: var(--ink); line-height: 1.15; }
.pdp-sticky .sticky-price .price-incl.is-quote { font-size: .95rem; }
.pdp-sticky .sticky-price .price-excl { font-size: .74rem; }

/* ---- 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; }
.cart-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 18px; }
.cart-head { display: none; }
.cart-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 36px;
  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; }
.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 .price-incl { font-size: .95rem; font-weight: 700; }
.cart-price .price-excl { font-size: .76rem; }
.cart-total { grid-area: total; justify-self: end; text-align: right; line-height: 1.2; }
.cart-total .price-incl { font-size: 1.05rem; }
.cart-total .price-excl { display: block; font-size: .74rem; 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 .price-incl { font-size: .95rem; }
.cart-table.is-readonly .cart-total .price-excl { display: none; }

/* Samenvatting: subtotaal, btw, bezorgkosten, totaal. */
.cart-summary, .checkout-summary {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px 24px; 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); }
.sum-row b, .sum-row output { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.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; }
/* Onbekend bezorgtarief (VERZENDGROEPEN.tarief null): tekst i.p.v. bedrag. */
.sum-row .sum-pending { font-size: .82rem; font-weight: 500; color: var(--muted); white-space: normal; text-align: right; max-width: 60%; }
.sum-note { font-size: .8rem; color: var(--muted); line-height: 1.5; margin-top: 6px; }
.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(212,42,42,.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-table { padding: 0 24px; }
  .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 { text-align: right; }
  .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);
  }
  .cart-summary, .checkout-summary { padding: 26px 26px 28px; }
}
@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: 22px 18px 24px; 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; }
.checkout-form legend + .form-row, .checkout-form .fieldset-hint + .form-row { margin-top: 12px; }
.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(212,42,42,.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; }
@media (min-width: 621px) {
  .checkout-form { padding: 34px; }
}
@media (min-width: 981px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr) 400px; 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: flex-start; margin-bottom: 22px; }
.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: 8px; }
.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; }
.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; }
.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(179,31,31,.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: 12px; }

/* ---- 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. */
@media (min-width: 761px) {
  .cart-table .cart-head, .cart-table:not(.is-readonly) .cart-row { grid-template-columns: 72px minmax(0, 1fr) 176px 122px 100px 36px; }
  .cart-table .cart-head span:nth-child(3), .cart-table .cart-head span:nth-child(5) { text-align: right; }
  .cart-price .price-excl { display: block; }
}
/* 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 + openingstijden + "Een webshop van …" passen hier
     niet naast elkaar; de laatste regel valt weg (staat in de footer). */
  .topbar-right span:last-child { display: none; }
  .main-nav { display: none; }
  .nav-toggle { display: flex; }
  .main-nav.open {
    display: block; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line); padding: 12px 24px 24px;
  }
  .main-nav.open ul { flex-direction: column; gap: 0; }
  .main-nav.open > ul > li > a { display: flex; width: 100%; padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0; }
  .main-nav.open .nav-cta { display: block; padding-top: 16px; }
  .main-nav.open > ul > li.nav-cta > a,
  .main-nav.open > ul > li.nav-cta > button { display: inline-flex; width: 100%; justify-content: center; padding: 15px 22px; border-bottom: 0; border-radius: 0; font-weight: 600; }
}
@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 8px; font-size: .9rem; }
  .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: .66rem; font-weight: 700; line-height: 1.2; text-align: center;
  color: var(--ink); background: rgba(255, 255, 255, .88);
}
/* Vijf koop-categorieën op de homepage op één rij zolang het 4-kolomsraster
   geldt (boven 1080px); daaronder de gewone 2- en 1-kolomsregels van .sector-grid. */
@media (min-width: 1081px) {
  .sector-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
}
/* 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; }