/* ==========================================================================
   Koelaanhangerdirect.nl — global stylesheet
   Basis: het Watertankie/Toiletzonderafvoer-ontwerp (Plus Jakarta Sans),
   hertint naar koud kobaltblauw op De-Lo-navy. De koelcomponenten (prijscheck,
   offerte in twee stappen, rijbewijscheck, terugbelverzoek, prijskaarten)
   staan onderaan in het blok "Koelaanhangerdirect.nl — koelcomponenten".
   ========================================================================== */

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

:root {
  /* Koelaanhangerdirect.nl huisstijl — koud kobaltblauw (koelen, vriezen) op
     De-Lo-navy. De tokens heten nog 'yellow' (historisch, uit het Watertankie-
     ontwerp) en zijn een alias van --accent, zodat alle componenten van de
     zustersites in één keer meekleuren. Witte knoptekst op --accent haalt
     5,7 : 1 (AA); het groen van toiletzonderafvoer.nl haalde dat niet. */
  --accent: #0a66c2;        /* primair accent: knoppen, iconen, links, koelen-badge */
  --accent-600: #084e99;    /* hover / actief */
  --yellow: var(--accent);
  --yellow-600: var(--accent-600);
  --hl: #9be7ff;            /* ijsblauwe highlight-marker in koppen, altijd met --ink */
  --vries: #3730a3;         /* vriezen-badge (koud indigo) */
  --warm: #ffb703;          /* alleen de belknop op navy of foto, met --ink-tekst */
  --ok: #059669;            /* vinkjes en de 'nu bereikbaar'-stip; nooit als tekstkleur */
  --ink: #142238;           /* diep navy voor tekst */
  --dark: #232b52;          /* donkere secties (De-Lo navy) */
  --dark-2: #1a2040;        /* footer */
  --bg: #eef4fa;            /* ijsgrijze paginaachtergrond */
  --card: #ffffff;
  --line: #d9e3ee;
  --muted: #5b6a70;
  --muted-light: rgba(255, 255, 255, 0.62);
  --green: #059669;         /* 'inbegrepen'-accent */
  --blue: #2c3153;          /* De-Lo navy — 'koelcel'-badge */
  --radius: 14px;
  --radius-sm: 10px;
  --maxw: 1240px;
  --shadow: 0 12px 36px rgba(20, 28, 58, 0.08);
  --shadow-sm: 0 4px 14px rgba(20, 28, 58, 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;
}

/* scroll-padding-top = de vaste header (78px + 1px rand): een ankerlink
   (#offerte, #faq, de skip-link) liet de kop van het doel anders onder de
   header verdwijnen. */
html { scroll-behavior: smooth; scroll-padding-top: 80px; }

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: #075e54; color: #fff; }
.btn-whatsapp:hover { background: #054c44; }
.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: #e3eef9;
}
.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; }

/* flex: none — anders is de hamburger het enige item in de header dat kan
   krimpen (tot de 20 px van zijn streepjes) zodra logo en belknop niet passen. */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; flex: none;
  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, #141a38 0%, #24305e 100%);
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(155,231,255,.14), 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%, #1d4e89 0%, #1b2a52 45%, #12172e 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: #141a38;
}
.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(14,20,40,.93) 0%,
      rgba(14,20,40,.85) 30%,
      rgba(18,26,52,.62) 60%,
      rgba(22,30,60,.44) 100%),
    /* vignet boven/onder: header en USP-balk blijven afsteken */
    linear-gradient(180deg,
      rgba(14,20,40,.55) 0%,
      rgba(14,20,40,0) 34%,
      rgba(14,20,40,.12) 62%,
      rgba(20,28,58,.72) 100%),
    /* merkblauw over het beeld zodat het groen niet wegvalt van de huisstijl */
    linear-gradient(0deg, rgba(28,36,71,.22), rgba(28,36,71,.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(14,20,40,.78) 0%,
        rgba(14,20,40,.52) 28%,
        rgba(14,20,40,.58) 60%,
        rgba(20,28,58,.88) 100%),
      linear-gradient(0deg, rgba(28,36,71,.12), rgba(28,36,71,.12));
  }
}

/* ---- Search / category yellow band ---- */
.search-band {
  background: linear-gradient(120deg, #0a66c2 0%, #0b4f93 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: #eef3f9;
  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(155,231,255,.12), transparent 60%),
    radial-gradient(120% 120% at 30% 20%, #1d4e89, #12172e);
  display: grid; place-items: center;
}
.play-btn {
  width: 78px; height: 78px; border-radius: 50%;
  background: var(--yellow); color: var(--ink);
  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: var(--ink);
  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, #cfe0f2, #a9c4e0);
  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%, #1d4e89, #12172e);
}
.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%, #1d4e89, #12172e);
}
.project-tags { position: absolute; top: 22px; left: 22px; display: flex; gap: 8px; }
.project-tags span { background: var(--yellow); color: var(--ink); 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, #1d4e89, #12172e);
  display: grid; place-items: center;
  color: rgba(255,255,255,.9);
}
.social-tile:nth-child(2){ background: linear-gradient(135deg,#1d4e89,#12335e);}
.social-tile:nth-child(3){ background: linear-gradient(135deg,#2b3a5a,#12172e);}
.social-tile:nth-child(4){ background: var(--yellow); color: var(--ink);}
.social-tile svg { width: 46px; height: 46px; opacity: .6; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
  background: linear-gradient(120deg, #0a66c2 0%, #0b4f93 55%, #1c2447 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: #121833; }
.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 — blauwe band + witte platte kaarten ---- */
.help-band { position: relative; overflow: hidden; padding: 48px 0; background: linear-gradient(120deg, #0a66c2 0%, #0b4f93 55%, #1c2447 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, 28, 58, .16);
  transition: transform .15s ease, box-shadow .15s ease;
}
.help-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(20, 28, 58, .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: #aebfd4; 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: var(--ink); }
.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(155,231,255,.10), 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: var(--ink);
  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: var(--ink); 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
   ========================================================================== */
@media (max-width: 1200px) {
  /* Hier stond de telefoon verborgen, met als reden dat hij "al in de topbar"
     zou staan. Dat is niet zo — de topbar bevat alleen de USP's, en onder
     980px verdwijnt hij helemaal. Mobiel had daardoor nergens een belknop,
     terwijl de offerteknop daar óók wegvalt (zie 620px verderop): dan blijft
     er geen enkele directe actie in de header over.
     Vanaf hier wordt het dus een compacte icoonknop naast het hamburgermenu.
     Het nummer zelf verdwijnt visueel maar blijft in het aria-label staan, dus
     de link houdt een naam voor schermlezers. */
  .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: #e3eef9; 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: #0a66c2; }
.product-badge.badge-vuil   { background: #4a5b66; }
.product-badge.badge-trailer{ background: #1d4e89; }
.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: #41505a; 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 #aebfd4; color: #7a8985; 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: #33434d; }
.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;          /* blauwe 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(155,231,255,.25); }

/* offerteformulier */
.offer-grid { display: grid; grid-template-columns: 1.4fr .9fr; gap: 40px; align-items: start; }
.offer-form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow-sm); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 600; }
.field label .req { color: #c0392b; }
.field input, .field textarea, .field select {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: .95rem; background: #fff; color: var(--ink);
}
.field input, .field select { height: 48px; }
.field textarea { resize: vertical; min-height: 90px; }
/* iOS Safari zoomt automatisch in zodra een veld kleiner is dan 16px, en ná die
   zoom kan de bezoeker de pagina zijwaarts slepen. Op touchformaten dus minimaal 16px. */
@media (max-width: 1024px) {
  .field input, .field textarea, .field select,
  .catalog-toolbar select { font-size: 16px; }
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(10,102,194,.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 #aebfd4; color: #7a8985; 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; }
  /* minmax(0, …): een kale 1fr groeit mee met de breedste inhoud (de
     Turnstile-widget van 300 px) en duwt het formulier dan buiten beeld. */
  .offer-grid { grid-template-columns: minmax(0, 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; }
  /* Smallere zijpadding: vanaf 390 px (iPhone) houdt de Turnstile-widget zo zijn
     300 px binnen het formulier; daaronder rendert main.js hem compact. */
  .offer-form { padding: 26px 22px; }
}

/* ==========================================================================
   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: #e3eef9; 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: #eef3f9; 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: #33434d; 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: #33434d; 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: #e3eef9; border-left: 4px solid var(--yellow);
  border-radius: 10px; padding: 22px 24px; margin: 26px 0; color: #234;
  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; }
  /* Die ene knop ("Terug naar home" op /bedankt) past tot ~450px niet op één
     regel naast het logo en mag dus afbreken. Weinig padding boven en onder:
     de min-height van 44px uit het 980px-blok houdt hem even hoog. */
  .header-actions .btn.keep-on-mobile { white-space: normal; text-align: center; line-height: 1.15; padding-block: 6px; }
  .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) {
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .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: 6px 12px; font-size: .85rem; }
  /* "Bekijk het volledige aanbod op de-lo.nl" (over ons) past hier niet op één
     regel en mag afbreken in plaats van uit te steken. Hogere regelhoogte voor
     als hij afbreekt, minder padding zodat één regel ongeveer even hoog blijft.
     Zelfde aanpak voor het koopblok op de productpagina's, zie daar. */
  .split-body .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 14px 12px; }
  /* Logo + belknop + hamburger (2× 44 px) moeten op 320 px passen. Het woordmerk
     is ~9,8× zijn lettergrootte breed (Plus Jakarta Sans; de fallbacks zijn
     smaller). Vrij voor het woord: 100vw − 2×18 padding − 2×44 knoppen − 2×8 gaps
     − 32 merkje − 8 = 100vw − 180px, dus lettergrootte ≈ 10,2vw − 18,4px.
     10vw − 18px laat ~3 px over: 14px op 320, 18px op 360, 1.15rem vanaf 364. */
  .site-header .container { gap: 8px; }
  .site-header .logo { gap: 8px; font-size: clamp(.875rem, 10vw - 1.125rem, 1.15rem); }
  .site-header .logo .logo-mark { width: 32px; height: 32px; flex: none; }
  .site-header .logo .logo-mark svg { width: 20px; height: 20px; }
}

/* ==========================================================================
   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: #a9c4e0; }
.pdp-thumb.active { border-color: var(--yellow-600); box-shadow: 0 0 0 2px rgba(10,102,194,.18); }
.pdp-thumb.is-empty {
  cursor: default; color: #93a4a0; font-size: .7rem; font-weight: 600; text-align: center;
  background: repeating-linear-gradient(135deg, #f3f7fb, #f3f7fb 8px, #eef3f9 8px, #eef3f9 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: #0a66c2; }
.pdp-eyebrow .tag.t-vuil { background: #4a5b66; }
.pdp-eyebrow .tag.t-trailer { background: #1d4e89; }
.pdp-eyebrow .tag.t-osmose { background: #1d4e89; }
.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: #33434d; 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: #33434d; 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: #f3f7fb; font-size: 1.2rem; color: var(--ink); cursor: pointer; font-family: inherit; }
.pdp-qty button:hover { background: #e4edf7; }
.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: #33434d; 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: #33434d; 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: #e3eef9; 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%; }
}
/* Op 320px is er in het koopblok 230px ruimte voor "Check beschikbaarheid &
   prijs" (273px): minder padding en een kleinere knoptekst, dan past hij op één
   regel. Afbreken mag als vangnet (grotere tekstinstelling op de telefoon). */
@media (max-width: 400px) {
  .pdp-buy { padding-inline: 18px; }
  .pdp-buy-row .btn { white-space: normal; text-align: center; line-height: 1.25; padding: 14px 12px; font-size: .92rem; }
}

/* ==========================================================================
   Offerte-modal (pop-up) — herbruikbaar over productpagina's
   ========================================================================== */
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 20, 40, .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: #eef3f9; 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: #dbe6f3; }
.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: #eef4fa; 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: #33434d; 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: #33434d; 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: #eef3f9; }
.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, #0a66c2, #0b4f93);
  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: #33434d; 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; }
}
/* "Daarom Koelaanhangerdirect.nl": het merkwoord is ~10× de lettergrootte breed
   en kan niet afbreken. Op 1.9rem is dat 303px, op 320px is er 284px. */
@media (max-width: 400px) {
  .values-head h2 { font-size: 1.75rem; }
}

/* ==========================================================================
   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, 28, 58, .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; }
}

/* ==========================================================================
   Conversiecomponenten (overgenomen van toiletzonderafvoer.nl)
   Toegevoegd bovenop het Watertankie-ontwerp. Alles hergebruikt de bestaande
   tokens (--yellow = groen accent, --dark = navy) 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 per categorie (kaarten, PDP-galerij, modal) ---- */
.product-badge.badge-koelen  { background: var(--accent); }
.product-badge.badge-vriezen { background: var(--vries); }
.product-badge.badge-koelcel { background: var(--dark); }
.product-badge.badge-keuze   { background: var(--hl); color: var(--ink); }
.pdp-eyebrow .tag.t-koelen  { background: var(--accent); }
.pdp-eyebrow .tag.t-vriezen { background: var(--vries); }
.pdp-eyebrow .tag.t-koelcel { background: var(--dark); }

/* 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: #e3eef9; 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: #f6f9fc; }
.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: #e3eef9; }
/* gemarkeerde kolom in de kop: donkere kop blijft leesbaar, groen accent i.p.v. mint */
.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: #33434d; 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: #e3eef9; 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. groene */
.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, 28, 58, .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: #1b2a52;
}
.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: #12172e; }
.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: #141a38; } /* 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: #33434d; 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: #f6f9fc; 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 #eef3f9; }
  .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: #e3eef9; }
  .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 mint 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 groen 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; }
}

/* ==========================================================================
   Homepage-hero met foto (2026-10, overgenomen van Wagendepot blok 23)
   Het wagenpark van De-Lo over de volle breedte achter de tekst en het
   keuzehulppaneel. Hergebruikt .hero-media en .hero-scrim uit het hero-blok,
   met dezelfde laagvolgorde als .hero--video: foto (0) → scrim (1) → tekst (3).
   De wagens staan in de onderste helft van de foto, dus de uitsnede schuift
   omlaag. De foto is decoratief (alt="", aria-hidden): de h1 en de tekst
   blijven gelijk.
   ========================================================================== */
.hero--foto { isolation: isolate; }
/* Geen groene gloed en raster over een foto: dat leest als een kleurzweem. */
.hero--foto::before { content: none; }
.hero--foto .container { z-index: 3; }
.hero--foto .hero-media img { object-position: 50% 70%; }
.hero--foto h1,
.hero--foto .lead,
.hero--foto .hero-trust { text-shadow: 0 1px 18px rgba(10, 14, 30, .5); }
/* Twee kolommen (vanaf 981px): donker tot waar de tekst ophoudt, daarna
   lichter, zodat de wagens rechts te zien zijn. De tekstkolom begint op de
   linkerrand van de container, max(24px, 50% − 596px) bij --maxw 1240px, en is
   op volle breedte 715px breed (1.25fr van 1144px). Witte tekst staat zo op
   minstens .78 navy, ook boven een witte wagen ruim 7 : 1. Het paneel rechts
   krijgt zijn eigen donkere glas. */
@media (min-width: 981px) {
  .hero--foto .hero-scrim {
    background:
      linear-gradient(90deg,
        rgba(14, 20, 40, .9) 0,
        rgba(14, 20, 40, .78) calc(max(24px, 50% - 596px) + 715px),
        rgba(14, 20, 40, .4) calc(max(24px, 50% - 596px) + 860px),
        rgba(14, 20, 40, .22) 100%),
      linear-gradient(180deg,
        rgba(14, 20, 40, .4) 0%,
        rgba(14, 20, 40, 0) 28%,
        rgba(14, 20, 40, 0) 72%,
        rgba(14, 20, 40, .5) 100%);
  }
}
/* Eén kolom (tot 980px): tekst en paneel onder elkaar over de volle breedte,
   dus verticaal verlopen. Met minstens .68 is wit op een witte wagen 5 : 1. */
@media (max-width: 980px) {
  .hero--foto .hero-scrim {
    background: linear-gradient(180deg,
      rgba(14, 20, 40, .8) 0%,
      rgba(14, 20, 40, .68) 35%,
      rgba(14, 20, 40, .7) 70%,
      rgba(20, 28, 58, .9) 100%);
  }
}
/* Het keuzehulppaneel ligt nu op een foto: donker glas in plaats van de bijna
   doorzichtige laag, zodat de chips overal even goed leesbaar zijn. */
.hero--foto .hero-side {
  background: rgba(14, 20, 40, .58);
  border-color: rgba(255, 255, 255, .2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* ==========================================================================
   Rondingen: knoppen en acties (2026-10, overgenomen van Wagendepot blok 19)
   Eén geneste radiusschaal in plaats van vierkante knoppen en badges in
   afgeronde kaarten: kaart 14 (--radius) > control 10 (--radius-sm) >
   klein 8 > badge 6. Alleen hoeken; maten, kleuren en layout blijven gelijk.
   ========================================================================== */
:root {
  --r-control: var(--radius-sm);   /* 10px: knoppen, velden, iconknoppen, menuknoppen */
  --r-control-sm: 8px;             /* .btn-sm */
  --r-badge: 6px;                  /* badges en tags: 14 min de inzet van 8 */
}
.btn { border-radius: var(--r-control); }
.btn-sm { border-radius: var(--r-control-sm); }
.header-phone, .nav-toggle, .main-nav > ul > li > a, .pagination a { border-radius: var(--r-control); }
.nav-toggle span { border-radius: 1px; }
.field input, .field textarea, .field select, .catalog-toolbar select { border-radius: var(--r-control); }
.product-badge, .modal-product .product-badge, .pdp-eyebrow .tag, .blog-tag { border-radius: var(--r-badge); }
.usp-block .ico { border-radius: var(--r-control); }
.faq-q { border-radius: 4px; }   /* alleen zichtbaar in de focusring */
@media (max-width: 980px) {
  /* Het mobiele menu zette de offerteknop expliciet op 0. De menuregels
     zelf blijven recht: ze lopen met een lijn over de volle breedte. */
  .main-nav.open > ul > li.nav-cta > a,
  .main-nav.open > ul > li.nav-cta > button { border-radius: var(--r-control); }
}

/* ==========================================================================
   Megamenu met foto's onder "Koelen en vriezen" (2026-10, overgenomen van Wagendepot
   blok 26 en 21e; de HTML komt uit navMega in tools/build.js). Vanaf 981px
   opent de knop Toiletwagens een paneel met twee kolommen, Soort wagen en
   Toepassing, elk met foto; bij een soort de wagens als knoppen; onderin Alle
   toiletwagens en hulp (bellen of offerte). Tot 980px is er geen knop en staat
   hetzelfde blok bovenin het mobiele menu.
   Vindbaarheid: de links staan één keer in de HTML, als echte links, ook als
   het paneel dicht is. De groepskoppen zijn <p>, geen h2/h3, zodat de
   kopjeshiërarchie van de pagina niet verandert. Beelden zijn decoratief
   (alt="") en lazy: zolang het menu dicht is, laadt de browser ze niet.
   Toegankelijk als disclosure (main.js "Megamenu"). Huidige pagina: accent
   op lichtgroen met een balk van 3px (--yellow-600 op --yellow-soft 4,7 : 1,
   op wit 5,3 : 1); de balk, want kleur alleen is te weinig verschil.
   ========================================================================== */
:root {
  --yellow-soft: #e3eef9;   /* de tint achter de USP- en checklisticonen */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-1: .16s;
  --dur-2: .28s;
  --shadow-raise: 0 2px 6px -2px rgba(15, 20, 30, .06), 0 18px 40px -16px rgba(15, 20, 30, .2);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.nav-mega-knop, .main-nav .nav-cats, .main-nav .nav-cat-aantal, .main-nav .nav-subs,
.main-nav .nav-hulp, .main-nav .nav-alles-aantal, .main-nav .nav-chev { display: none; }
.main-nav .nav-cat-beeld {
  display: grid; place-items: center; flex: none; overflow: hidden;
  border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1px var(--line);
}
.main-nav .nav-cat-beeld img { width: 100%; height: 100%; object-fit: cover; }
.main-nav .nav-cat-naam { flex: 1; min-width: 0; }

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

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

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

  .main-nav .nav-voet {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin: 18px -24px 0; padding: 14px 24px 16px;
    border-top: 1px solid var(--line); background: var(--bg);
  }
  .main-nav .nav-alles {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; margin-left: -10px;
    border-radius: var(--r-control); font-weight: 700; color: var(--ink);
  }
  .main-nav .nav-alles:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
  .main-nav .nav-alles[aria-current] { color: var(--yellow-600); }
  .main-nav .nav-alles .nav-chev { display: block; width: 16px; height: 16px; color: var(--yellow-600); }
  .main-nav .nav-alles-aantal { display: inline; font-weight: 600; color: var(--muted); }
  .main-nav .nav-hulp { display: block; margin: 0; font-size: .92rem; color: var(--muted); }
  .main-nav .nav-hulp a, .main-nav .nav-hulp button {
    padding: 0; border: 0; background: none; font: inherit; font-weight: 650; color: var(--ink);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .main-nav .nav-hulp a:focus-visible, .main-nav .nav-hulp button:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: 2px; }
}
/* De balk paste al niet overal: op 1000 px liep de offerteknop 74 px buiten de
   container (deels buiten beeld), rond 1220 px 36 px en vanaf 1260 px 11 px. De
   knop met pijl maakt hem 20 px breder. Daarom vanaf 981 px 10 px opzij in
   plaats van 13 (zoals Wagendepot, 11), en tot 1260 px compacter: het kleinere
   logo dat de site onder 400 px al gebruikt, smallere menuknoppen en minder
   tussenruimte. Gemeten met een schuifbalk: van 981 px tot breed eindigt de
   offerteknop op de rand van de container en raakt niets elkaar. */
@media (min-width: 981px) {
  .main-nav > ul > li > a, .nav-mega-knop { padding-inline: 10px; }
}
@media (min-width: 981px) and (max-width: 1260px) {
  .site-header .container { gap: 12px; }
  .logo { font-size: 1.15rem; }
  .logo .logo-mark { width: 34px; height: 34px; }
  .main-nav > ul > li > a, .nav-mega-knop { padding-inline: 8px; font-size: .92rem; }
  .header-actions { gap: 8px; }
  .header-actions .btn { padding-inline: 14px; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-kolom li > a:hover { background: var(--bg); }
  .main-nav .nav-kolom li > a[aria-current]:hover { background: var(--yellow-soft); }
  .main-nav .nav-subs a:hover { color: var(--ink); border-color: var(--muted); }
  .main-nav .nav-alles:hover { background: #fff; }
  .main-nav .nav-hulp a:hover, .main-nav .nav-hulp button:hover { text-decoration-thickness: 2px; }
}
@keyframes megaIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* Mobiel: het blok staat bovenin het menu, met foto, zonder aantallen, wagens en
   hulp (die staan op de pagina's zelf). Het menu wordt daardoor langer dan een
   klein scherm; het scrolt nu zelf, anders viel de onderkant (Contact, de
   offerteknop) buiten beeld onder de vaste header. */
@media (max-width: 980px) {
  .main-nav.open {
    max-height: calc(100vh - 78px); max-height: calc(100dvh - 78px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .main-nav.open .nav-cats { display: block; }
  .main-nav.open .nav-groep { margin: 0; padding: 12px 8px 4px; font-size: .84rem; font-weight: 650; line-height: 1.4; color: var(--muted); }
  .main-nav.open .nav-cats ul { padding-bottom: 6px; }
  .main-nav.open .nav-cats ul a {
    display: flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 4px 8px; border-radius: var(--r-control);
    font-weight: 600; line-height: 1.3; color: var(--ink);
    -webkit-tap-highlight-color: transparent;
  }
  .main-nav.open .nav-cat-beeld { width: 40px; height: 30px; }
  .main-nav.open .nav-cats ul a:active { background: var(--bg); }
  .main-nav.open .nav-cats ul a:focus-visible { outline: 2px solid var(--yellow-600); outline-offset: -2px; }
  .main-nav.open .nav-cats ul a[aria-current] { color: var(--yellow-600); background: var(--yellow-soft); box-shadow: inset 3px 0 0 var(--yellow-600); }
  /* Alle toiletwagens: een gewone menuregel, met een lijn erboven als einde van het blok. */
  .main-nav.open .nav-alles {
    display: flex; align-items: center; width: 100%; padding: 14px 8px;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  }
}
@media (prefers-reduced-motion: reduce) {
  .main-nav .nav-mega.is-open .nav-cats { animation: none; }
  .nav-mega-pijl, .nav-mega-knop, .main-nav .nav-kolom li > a { transition: none; }
}
@media (forced-colors: active) {
  .main-nav .nav-mega.is-open .nav-cats { border: 1px solid CanvasText; }
  .main-nav a[aria-current] .nav-cat-naam { text-decoration: underline; }
}

/* ==========================================================================
   Mobiel menu open (2026-10, zoals watertankie.nl). Het menu loopt sinds het
   fotoblok tot de onderkant van het scherm, dus wat daar vast staat viel over
   de offerteknop onderaan het menu: de WhatsApp-knop (z-index 90) en op
   productpagina's de sticky offertebalk (80) liggen boven de header (60), en
   linksonder het cookie-icoon van de consentmelding (#site-consent-ui, niet
   uit deze repo). Zolang het menu open is (body.nav-open, main.js "Mobile nav
   toggle") zijn ze weg; de offerte gaat voor. Bij sluiten komen ze terug.
   ========================================================================== */
@media (max-width: 980px) {
  /* De 4px van de desktopbalk (.main-nav { margin-left }) schoof het absolute
     menu naar rechts; links bleef dan een randje van de pagina zichtbaar. */
  .main-nav.open { margin-left: 0; }
  body.nav-open .wa-float,
  body.nav-open .pdp-sticky.is-visible,
  body.nav-open #site-consent-ui button[aria-controls="site-cookievoorkeuren"] { display: none; }
}

/* ==========================================================================
   Uitleg "Hoe werkt het?" bij Toiletwagens zonder afvoer (2026-10). "Zonder
   afvoer" staat niet meer in de balk; de uitlegpagina hangt nu onder de soort
   zelf (navMega in tools/build.js, .nav-uitleg). Desktop: achter de types,
   als tekstknop in de accentkleur met pijl, zodat hij niet als nog een wagen
   leest. Mobiel: daar zijn de types verborgen; de uitleg staat als eigen
   regel onder de soort, ingesprongen tot de naam (8 + 40 + 12).
   ========================================================================== */
@media (min-width: 981px) {
  .main-nav .nav-subs .nav-uitleg { gap: 2px; padding-right: 8px; border-color: transparent; color: var(--yellow-600); font-weight: 650; }
  .main-nav .nav-uitleg .nav-chev { display: block; width: 14px; height: 14px; }
}
@media (min-width: 981px) and (hover: hover) and (pointer: fine) {
  .main-nav .nav-subs .nav-uitleg:hover { color: var(--ink); border-color: var(--line); }
}
@media (max-width: 980px) {
  .main-nav.open .nav-subs { display: block; padding-bottom: 2px; }
  .main-nav.open .nav-subs a:not(.nav-uitleg) { display: none; }
  .main-nav.open .nav-subs .nav-uitleg {
    display: flex; align-items: center; gap: 4px;
    min-height: 40px; margin-top: -4px; padding: 0 8px 0 60px;
    font-size: .92rem; font-weight: 600; color: var(--yellow-600);
  }
  .main-nav.open .nav-uitleg .nav-chev { display: block; width: 14px; height: 14px; }
}

/* ==========================================================================
   Koelaanhangerdirect.nl — koelcomponenten (2026-10-23)
   Alles hieronder is nieuw ten opzichte van de Toiletzonderafvoer-stylesheet
   en komt uit de CRO-benchmark voor koelverhuur: prijscheck in de hero,
   offerte in twee stappen met de keuze bezorgen of ophalen, rijbewijscheck,
   "nu bereikbaar" met terugbelverzoek, prijskaarten, transparantieblok en het
   blok "Ook van De-Lo". Tokens staan bovenaan (--accent, --vries, --warm, --ok).
   ========================================================================== */

/* ---- maat en ritme ---- */
.section { padding: 88px 0; }
@media (max-width: 620px) { .section { padding: 64px 0; } }
.compare, .pdp-price, .spec-table, .prijs-amount, .price-rows { font-variant-numeric: tabular-nums; }

/* ---- warme belknop: alleen op navy of foto, met inkt-tekst ---- */
.btn-warm { background: var(--warm); color: var(--ink); }
.btn-warm:hover { background: #ffc733; }
.btn-warm svg { color: var(--ink); }

/* ---- homepage-hero: tekst links, vrijstaande koelaanhanger rechts, prijscheck eronder ---- */
.hero--koel {
  overflow: visible;
  background: linear-gradient(160deg, #1b2a52 0%, #23386c 48%, #0f5aa8 100%);
}
.hero--koel::before {
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(155, 231, 255, .18), transparent 60%),
    radial-gradient(50% 60% at 10% 100%, rgba(10, 102, 194, .35), transparent 60%);
}
.hero--koel .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: center; position: relative; z-index: 2; }
.hero--koel .hero-inner { max-width: none; min-height: 0; padding: 64px 0 112px; }
.hero--koel h1 { font-size: clamp(2.2rem, 4.6vw, 3.9rem); line-height: 1.06; letter-spacing: -.025em; }
.hero--koel .lead { max-width: 56ch; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 22px; font-size: .88rem; color: rgba(255, 255, 255, .78); }
.hero-proof .review-badge { margin: 0; }
.hero-visual { position: relative; align-self: center; padding: 20px 0 40px; }
.hero-visual img { width: 100%; height: auto; display: block; filter: drop-shadow(0 34px 44px rgba(0, 0, 0, .45)); }
.hero-chip {
  position: absolute; display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--ink); font-weight: 700; font-size: .86rem;
  padding: 10px 14px; border-radius: 999px; box-shadow: var(--shadow);
  animation: chipIn .6s var(--ease-out) both;
}
.hero-chip svg { width: 16px; height: 16px; color: var(--accent-600); }
.hero-chip-1 { left: 0; top: 6%; animation-delay: .15s; }
.hero-chip-2 { right: 0; top: 30%; animation-delay: .3s; }
.hero-chip-3 { left: 8%; bottom: 10%; animation-delay: .45s; }
/* Alleen een verschuiving, geen opacity: in een tabblad op de achtergrond
   lopen animaties niet en bleven de chips anders onzichtbaar. */
@keyframes chipIn { from { transform: translateY(8px); } to { transform: none; } }

/* De prijscheck hangt half over de onderrand van de hero. */
.hero-check-wrap { position: relative; z-index: 3; margin-bottom: -58px; }
.hero--koel + .usp-strip-wrap { padding-top: 70px; }
.hero-check {
  display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr auto; gap: 12px; align-items: end;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 14px; box-shadow: var(--shadow);
}
.hc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.hc-field label { font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.hc-field input, .hc-field select {
  height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-control);
  font: inherit; font-size: .95rem; background: #fff; color: var(--ink); width: 100%;
}
.hc-field input:focus, .hc-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10, 102, 194, .18); }
.hero-check .btn { height: 48px; padding: 0 22px; white-space: nowrap; }
.hc-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin: 2px 0 0; }
.hc-note .tick { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--ok); color: #fff; display: grid; place-items: center; }
.hc-note .tick svg { width: 10px; height: 10px; }
.page-hero-check { margin-top: 26px; }
.page-hero-check .hero-check { box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
@media (max-width: 1080px) {
  .hero-check { grid-template-columns: 1fr 1fr; }
  .hero-check .btn { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .hero--koel .hero-grid { grid-template-columns: 1fr; gap: 8px; }
  .hero--koel .hero-inner { padding: 52px 0 0; }
  .hero-visual { max-width: 520px; margin: 0 auto; padding: 10px 0 70px; }
  .hero-chip { font-size: .8rem; padding: 8px 12px; }
}
@media (max-width: 620px) {
  .hero-check { grid-template-columns: 1fr; padding: 16px 16px 12px; }
  .hero-check-wrap { margin-bottom: -40px; }
  .hero--koel + .usp-strip-wrap { padding-top: 52px; }
  .hero-ctas .btn-warm { order: -1; }
  .hero-visual { padding-bottom: 56px; }
  .hero-chip-3 { display: none; }
}

/* ---- productkaart: route en rijbewijslabel ---- */
.card-route { display: flex; align-items: center; gap: 8px; font-size: .82rem; color: var(--muted); margin: -6px 0 12px; }
.card-route svg { width: 15px; height: 15px; color: var(--accent-600); flex: none; }
.card-tow { background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: .72rem; color: var(--ink); }
.product-media img.tank-photo { padding: 10px; }

/* ---- offerteformulier in twee stappen ---- */
.form-step + .form-step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.form-kop, .form-progress { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 14px; }
.form-progress-num { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; font-size: .85rem; }
.form-progress-van { margin-left: auto; font-size: .8rem; color: var(--muted); font-weight: 600; }
.route-keuze { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: 0; }
.route-keuze legend { font-size: .85rem; font-weight: 600; margin-bottom: 8px; }
.route-optie { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1.5px solid var(--line); border-radius: var(--r-control); cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.route-optie input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.route-optie b { display: block; font-size: .92rem; }
.route-optie small { display: block; font-size: .78rem; color: var(--muted); line-height: 1.35; margin-top: 2px; }
.route-optie:has(input:checked) { border-color: var(--accent); background: #e3eef9; }
.form-vinkjes { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.vinkje { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; cursor: pointer; }
.vinkje input { accent-color: var(--accent); width: 16px; height: 16px; }
.vinkje-groep { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.vinkje-label { font-size: .82rem; font-weight: 700; color: var(--muted); }
.optioneel { font-weight: 400; color: var(--muted); font-size: .8rem; }
.field.is-uit { display: none; }
.form-next { width: 100%; margin-top: 6px; }
.form-next svg { width: 16px; height: 16px; }
.form-back { background: none; border: 0; font: inherit; font-size: .88rem; font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; padding: 0; }
.form-back svg { width: 16px; height: 16px; }
.form-samenvatting { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-control); padding: 10px 14px; font-size: .88rem; margin-bottom: 14px; }
.form-samenvatting[hidden] { display: none; }
.form-wijzig { background: none; border: 0; padding: 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--accent-600); text-decoration: underline; cursor: pointer; }
.form-note .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--ok); color: #fff; vertical-align: -4px; margin-right: 4px; }
.form-note .tick svg { width: 10px; height: 10px; }
.form-trust { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 10px; font-size: .82rem; color: var(--muted); }
.review-badge.form-review { padding: 5px 10px 5px 6px; font-size: .8rem; }
.modal .form-step[hidden] { display: none; }
@media (max-width: 620px) {
  .route-keuze { grid-template-columns: 1fr; }
  /* Pop-up als sheet vanaf de onderkant: één stap tegelijk in beeld. */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { border-radius: 16px 16px 0 0; max-height: 92vh; max-height: 92dvh; overflow-y: auto; padding: 22px 18px 28px; animation: sheetIn .25s ease; }
  @keyframes sheetIn { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
}

/* ---- rijbewijscheck in het koopblok (aanhangers) ---- */
.tow-check { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: var(--r-control); background: #f6f9fc; }
.tow-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
.tow-kop svg { width: 18px; height: 18px; color: var(--accent-600); }
.tow-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tow-row label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--muted); min-width: 0; }
.tow-row select, .tow-row input { height: 42px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .9rem; background: #fff; color: var(--ink); width: 100%; }
.tow-uitkomst { margin-top: 10px; font-size: .86rem; color: var(--muted); line-height: 1.5; }
.tow-check.is-ok { border-color: var(--ok); background: #ecfdf5; }
.tow-check.is-ok .tow-uitkomst { color: #065f46; font-weight: 600; }
.tow-check.is-nee .tow-uitkomst { color: var(--ink); font-weight: 600; }
.tow-check.is-let-op { border-color: #f59e0b; background: #fffbeb; }
.tow-check.is-let-op .tow-uitkomst { color: #92400e; font-weight: 600; }
@media (max-width: 400px) { .tow-row { grid-template-columns: 1fr; } }

/* ---- "nu bereikbaar" ---- */
.open-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .88rem; }
.open-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); flex: none; }
.open-status.is-open i { background: var(--ok); box-shadow: 0 0 0 4px rgba(5, 150, 105, .22); }
.open-status.is-closed i { background: #f59e0b; }
.help-head .open-status { display: flex; margin-top: 8px; color: #fff; }
.direct-box .open-status { color: #fff; }

/* ---- terugbelverzoek ---- */
.help-callback { position: relative; margin-top: 22px; }
.callback-form { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--radius); padding: 16px 18px; color: #fff; }
.cb-kop { font-weight: 700; margin-bottom: 10px; }
.cb-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; }
.cb-row input { height: 46px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--r-control); font: inherit; font-size: .95rem; background: #fff; color: var(--ink); min-width: 0; }
.cb-row .btn { height: 46px; white-space: nowrap; }
.cb-note { font-size: .8rem; opacity: .82; margin-top: 8px; }
.callback-form .form-error { margin-top: 10px; }
.callback-form.is-verzonden { background: rgba(255, 255, 255, .16); }
.team-block .callback-form { background: var(--bg); border-color: var(--line); color: var(--ink); }
.team-block .cb-row input { border-color: var(--line); }
.team-block .cb-note { color: var(--muted); opacity: 1; }
@media (max-width: 620px) {
  .cb-row { grid-template-columns: 1fr; }
  .cb-row .btn { width: 100%; }
}

/* ---- "Ook van De-Lo" ---- */
.zuster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.zuster-card { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; transition: transform .18s ease, box-shadow .18s ease; }
.zuster-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.zuster-ic { width: 40px; height: 40px; border-radius: 10px; background: #e3eef9; color: var(--accent-600); display: grid; place-items: center; margin-bottom: 4px; }
.zuster-ic svg { width: 20px; height: 20px; }
.zuster-card b { font-size: 1.08rem; }
.zuster-card p { color: var(--muted); font-size: .9rem; flex: 1; }
.zuster-url { font-size: .85rem; font-weight: 700; color: var(--accent-600); }
@media (max-width: 900px) { .zuster-grid { grid-template-columns: 1fr; } }

/* ---- prijzenpagina: prijskaarten ---- */
.prijs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.prijs-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; display: flex; flex-direction: column; gap: 8px; }
.prijs-card .product-badge { position: static; align-self: flex-start; }
.prijs-card h3 { font-size: 1.25rem; }
.prijs-amount .from { font-size: .85rem; color: var(--muted); }
.prijs-amount b { font-size: 2rem; letter-spacing: -.02em; }
.prijs-sub { font-size: .85rem; color: var(--muted); }
.prijs-card ul { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 16px; flex: 1; }
.prijs-card li { display: flex; gap: 10px; font-size: .9rem; align-items: center; }
.prijs-card .tick { width: 22px; height: 22px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; }
.prijs-card .tick svg { width: 11px; height: 11px; }
@media (max-width: 980px) { .prijs-grid { grid-template-columns: 1fr; } }

/* ---- transparantie en foto-noot op de productpagina ---- */
.transparant-slot { display: flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; font-size: .92rem; }
.transparant-slot svg { width: 18px; height: 18px; color: var(--ok); flex: none; }
.pdp-foto-note { font-size: .78rem; color: var(--muted); margin-top: 8px; }

/* ---- compacte vergelijkingstabel (home) en knoppen in donkere secties ---- */
.compare.is-compact { font-size: .88rem; }
.split-links { display: flex; gap: 12px; flex-wrap: wrap; }
.main-nav .nav-cat-naam small { display: block; font-size: .78rem; font-weight: 500; color: var(--muted); }

/* ---- bedankt-pagina: hero vult niet meer het hele scherm, er staat een vervolg onder ---- */
.hero--fill .hero-inner { min-height: 0; padding: 80px 0 90px; }

/* De prijscheck in de donkere page-hero (/huren): de regel onder de knop is een
   <p> en erfde de witte tekst van .page-hero p; op de witte kaart viel hij weg. */
.page-hero .hero-check .hc-note { color: var(--muted); max-width: none; font-size: .82rem; }
.page-hero .hero-check .hc-field label { color: var(--muted); }

/* Over ons: de kop bevat het merkwoord (22 tekens, breekt niet) en de kop
   "Daarom Koelaanhangerdirect.nl". Op 320px past 2rem niet; daarom kleiner en,
   als vangnet bij grotere tekstinstellingen, afbreken binnen het woord. */
.about-h1 { font-size: clamp(1.7rem, 4vw, 3rem); overflow-wrap: anywhere; }
@media (max-width: 400px) {
  .about-h1 { font-size: 1.55rem; }
  .values-head h2 { font-size: 1.45rem; overflow-wrap: anywhere; }
}

/* Formuliervelden: een <select> met een lange optie ("Koelaanhanger +
   vriesaanhanger") rekte zijn gridkolom op tot buiten het scherm op 320px.
   Kolommen mogen niet breder worden dan de ruimte, en het veld vult de kolom. */
.form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.field { min-width: 0; }
.field select { width: 100%; min-width: 0; }
@media (max-width: 620px) { .form-row { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   Reviewronde 2026-10-23: bevindingen van de design- en SEO-review
   ========================================================================== */
/* Vergelijkingstabel: "Ja/kan" in groen (4,9 : 1 op wit), niet in het blauwe accent. */
.compare .ok { color: #047857; }
/* Gestapelde tabel op mobiel: de cel was een grid, waardoor gemengde inhoud
   (<span>Ja</span>, met <abbr>BE</abbr>) in losse kolommen brak. Nu een blok
   met het unitlabel absoluut links. */
@media (max-width: 620px) {
  .compare.is-stack td { display: block; position: relative; padding: 9px 14px 9px 124px; min-height: 40px; }
  .compare.is-stack td::before { position: absolute; left: 14px; top: 9px; width: 100px; }
  .compare.is-stack tfoot td { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; padding-left: 14px; }
  .compare.is-stack tfoot td::before { position: static; width: 100px; }
}
/* Marker in koppen: binnen de regel houden, zodat hij de regel erboven niet raakt. */
.hl-yellow { background: linear-gradient(transparent 8%, var(--hl) 8%, var(--hl) 92%, transparent 92%); }
.hero--koel h1 { line-height: 1.12; font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
/* Hero lager, zodat de prijscheck op een laptop van 900px hoog in beeld staat;
   op mobiel (hero-visual verborgen) geen lege ruimte boven de prijscheck. */
@media (min-width: 981px) { .hero--koel .hero-inner { padding: 44px 0 96px; } }
@media (max-width: 980px) { .hero--koel .hero-inner { padding: 44px 0 0; } }
.hero-visual { padding: 10px 0 30px; }
.hero-chip-1 { left: 2%; top: 4%; }
.hero-chip-2 { right: 0; top: 36%; }
.hero-chip-3 { left: 6%; bottom: 6%; }
/* Zwevende WhatsApp-knop wijkt voor primaire CTA's en de sticky balk (die heeft een eigen WhatsApp-knop). */
body.cta-in-view .wa-float, body.has-sticky-cta .wa-float { opacity: 0; pointer-events: none; transform: translateY(8px); }
.wa-float { transition: transform .2s ease, background .15s ease, opacity .2s ease; }
.pdp-sticky .btn-ghost + .btn-ghost { margin-left: -4px; }
/* Filterpaneel: knoptekst mag afbreken. */
.filter-panel .btn { white-space: normal; line-height: 1.2; padding: 14px 14px; font-size: .92rem; }
/* Pop-up op een telefoon: kop en sluitknop blijven boven de scrollende stappen staan. */
@media (max-width: 620px) {
  .modal { padding-top: 0; }
  .modal-head { position: sticky; top: 0; z-index: 2; background: #fff; padding-top: 22px; padding-bottom: 12px; margin-bottom: 10px; }
  .modal-close { top: 14px; }
  /* Hero: de vrijstaande aanhanger kost 300px vóór de prijscheck; op een telefoon
     komen de productkaarten snel genoeg. Van/Tot naast elkaar. */
  .hero-visual { display: none; }
  .hero-check { grid-template-columns: 1fr 1fr; }
  .hc-field:first-child, .hc-field:nth-child(4), .hero-check .btn, .hc-note { grid-column: 1 / -1; }
}
/* Terugbelknop: blauw als primaire actie; wit in het blauwe hulpblok. */
.cb-btn { background: var(--accent); color: #fff; }
.cb-btn:hover { background: var(--accent-600); }
.help-band .cb-btn { background: #fff; color: var(--ink); }
.help-band .cb-btn:hover { background: #e3eef9; }
/* Rijbewijscheck: ook de uitkomst "wij brengen hem" krijgt een duidelijke status. */
.tow-check.is-nee { border-style: solid; border-color: var(--accent); background: #e3eef9; }
/* WhatsApp in het koopblok als secundaire knop, naast bellen. */
.pdp-buy .btn-whatsapp { background: #fff; color: #075e54; box-shadow: inset 0 0 0 1.5px #075e54; }
.pdp-buy .btn-whatsapp:hover { background: #ecfdf5; }
/* "Prijs in je offerte" leest als zin, niet als bedrag. */
.prijs-amount b.is-tekst, .pdp-price .amount.is-tekst { font-size: 1.25rem; font-weight: 700; }
/* Specificaties: label en waarde als twee kolommen, links uitgelijnd. */
.spec-table h2 { font-size: 1.1rem; padding: 20px 24px; background: var(--dark); color: #fff; letter-spacing: 0; }
.spec-table .spec-row { display: grid; grid-template-columns: 42% 1fr; gap: 14px; }
.spec-table .spec-row dd { text-align: left; }
@media (max-width: 620px) { .spec-table h2 { padding: 16px 18px; } .spec-table .spec-row { grid-template-columns: 1fr; gap: 3px; } }
/* Kaart op /contact: route-link als vangnet onder de iframe. */
.map-embed { position: relative; background: #e3eef9; min-height: 120px; }
.map-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; color: var(--ink); z-index: 0; }
.map-fallback svg { width: 16px; height: 16px; }
.map-embed iframe { position: relative; z-index: 1; }
/* Kruimelpad als nav (zelfde uiterlijk als de div ervoor). */
nav.breadcrumb { display: block; }
/* Bronregel onder de uitlegsecties. */
.bronnen { font-size: .82rem; color: var(--muted); margin-top: 6px; }
/* Tekstknop in de lege catalogusstaat. */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--yellow-600); font-weight: 600; text-decoration: underline; cursor: pointer; }
/* "Ook van De-Lo": pijl bij de link, icoon per kaart. */
.zuster-url { display: inline-flex; align-items: center; gap: 6px; }
.zuster-url svg { width: 14px; height: 14px; }
/* Hero op desktop: smallere beeldkolom, zodat de prijscheck op 1440×900 boven de vouw staat. */
@media (min-width: 981px) {
  .hero--koel .hero-grid { grid-template-columns: 1.2fr .8fr; gap: 40px; }
  .hero-visual { max-width: 470px; width: 100%; margin-left: auto; }
}
/* Hero-knop: secundair (wit), de prijscheck eronder is de primaire actie. */
.hero--koel .hero-ctas .btn-white:hover { background: #e3eef9; }
/* Sluitknop staat in de (op mobiel sticky) kop van de pop-up, zodat hij niet meescrolt
   en niet onder de witte kop verdwijnt. Op desktop is de kop statisch en blijft de
   knop ten opzichte van de pop-up zelf staan. */
@media (min-width: 621px) { .modal-head { position: relative; } }
.modal-head .modal-close { top: 0; right: 0; }
@media (max-width: 620px) { .modal-head { position: sticky; } .modal-head .modal-close { top: 18px; } }