/* Helder. · kennis en voorraadwacht
   v3: merk-aansluiting op de webshop (Tom + Willem, jul 2026).
   Palet: de Elementor-kit van de shop (dennengroen #274001, olijf #A2A637,
   salie #BDBF8E, water #609BBF, crème #FEFDE9) gecombineerd met onze
   watertinten (marine #1A4F94, tekstblauw #1F74A8) op wit; logo-groen
   #79B043 alleen als merkpunt; oranje #EB6924 alleen aanbieding/signaal.
   Typografie volgt de webshop-architectuur: koppen en knoppen in de sans
   (webshop: basic-sans, hier het vrij beschikbare Poppins dat de shop zelf
   ook laadt), lopende tekst in de serif Yrsa (exact de webshop-bodyfont),
   meetwaarden/peiling = monospace (het instrument, eigen aan Helder). */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins-600-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Yrsa";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/yrsa-var-latin.woff2") format("woff2");
}

:root {
  --papier: #FFFFFF;
  --inkt: #1D1C1C;
  --marine: #1A4F94;
  --marine-diep: #123A6E;
  --water: #1F74A8;      /* tekstblauw: donker genoeg voor 4,5:1 op wit (axe) */
  --waterlicht: #77BDE0;
  --kitwater: #609BBF;   /* het water uit de Elementor-kit van de shop */
  --dennen: #274001;     /* shop-kit primary: knoppen, sterke accenten */
  --dennen-diep: #1C2E04;
  --olijf: #A2A637;      /* shop-kit accent: decoratieve accenten */
  --olijf-donker: #6B6E26;
  --salie: #BDBF8E;      /* shop-kit secondary */
  --creme: #FEFDE9;      /* shop-kit crème */
  --logogroen: #79B043;  /* het frisse groen uit het logo (.nl) */
  --mist: #F2F7FB;
  --lijn: #DFE7EE;
  --grijs: #55616E;
  --oranje: #EB6924;
  --rood: #A5403C;
  --display: "basic-sans", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sans: "basic-sans", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "yrsa", "Yrsa", Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --maat: min(1120px, 92vw);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--inkt);
  background: var(--papier);
  border-top: 5px solid var(--marine);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--water); text-decoration-color: color-mix(in srgb, var(--water) 45%, transparent); text-underline-offset: 2px; }
a:hover { text-decoration-color: var(--water); }

:focus-visible { outline: 3px solid var(--water); outline-offset: 2px; border-radius: 2px; }

/* ── Waterlijn: het terugkerende motief ─────────────────────────────────── */

.waterline {
  height: 16px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="80" height="16" viewBox="0 0 80 16"><path d="M0 8 Q10 2 20 8 T40 8 T60 8 T80 8" fill="none" stroke="%232A92CE" stroke-width="1.6" opacity="0.7"/></svg>') repeat-x left center;
  background-size: 80px 16px;
  animation: drift 14s linear infinite;
}
@keyframes drift { to { background-position-x: 80px; } }

/* ── Masthead ───────────────────────────────────────────────────────────── */

.mast { border-bottom: 1px solid var(--lijn); background: var(--papier); }
.mast-inner {
  width: var(--maat); margin: 0 auto; padding: 1.4rem 0 1.1rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; align-items: baseline; justify-content: space-between;
}
.mast-logo {
  font-family: var(--display); font-weight: 600; font-size: 2.1rem; line-height: 1;
  color: var(--marine); text-decoration: none; letter-spacing: -0.02em;
}
.logo-punt { color: var(--logogroen); }
.mast-tag { font-size: .85rem; color: var(--grijs); margin-top: .45rem; display: flex; align-items: center; gap: .5rem; }
.mast-tag a { color: inherit; }
.mast-merk { flex-shrink: 0; }
.mast-nav { display: flex; gap: 1.4rem; font-size: .95rem; }
.mast-nav a { color: var(--inkt); text-decoration: none; padding-bottom: .15rem; border-bottom: 2px solid transparent; }
.mast-nav a:hover { border-bottom-color: var(--waterlicht); }
.mast-nav a.is-active { border-bottom-color: var(--marine); font-weight: 600; }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.hero { width: var(--maat); margin: 0 auto; padding: 3.4rem 0 2.6rem; }
.eyebrow {
  font-family: var(--mono); font-size: .78rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--grijs); margin-bottom: 1rem;
}
.hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(1.8rem, 4.6vw, 2.9rem); line-height: 1.16;
  letter-spacing: -0.015em; max-width: 24ch; color: var(--marine-diep);
}
.hero .standfirst { max-width: 58ch; margin-top: 1.3rem; font-size: 1.15rem; color: var(--grijs); }
.hero-cta { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: .8rem; }

.btn {
  display: inline-block; padding: .7rem 1.3rem; border-radius: 6px;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  text-decoration: none; border: 2px solid var(--dennen);
}
.btn--vol { background: var(--dennen); color: #fff; }
.btn--vol:hover { background: var(--dennen-diep); border-color: var(--dennen-diep); }
.btn--rand { color: var(--dennen); }
.btn--rand:hover { background: color-mix(in srgb, var(--olijf) 16%, transparent); }
.btn--ico { display: inline-flex; align-items: center; gap: .5rem; }

.ico { flex-shrink: 0; vertical-align: -0.12em; }

/* ── USP-strook (de winkel in één regel) ────────────────────────────────── */

.usp { width: var(--maat); margin: 0 auto; padding: 0 0 2.2rem; display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.usp > span { font-size: .9rem; color: var(--grijs); display: flex; align-items: center; gap: .5rem; }
.usp b { color: var(--inkt); font-weight: 600; }
.usp .dot { flex-shrink: 0; }

/* ── De Peiling: het instrument ─────────────────────────────────────────── */

.peiling { background: var(--marine-diep); color: #F4F9FE; }
.peiling-inner { width: var(--maat); margin: 0 auto; padding: 2.4rem 0 2rem; }
.peiling-top { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; align-items: baseline; justify-content: space-between; margin-bottom: 1.6rem; }
.peiling-title { font-family: var(--display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.01em; }
.peiling-stamp { font-family: var(--mono); font-size: .78rem; color: #A8C7E6; display: flex; align-items: center; gap: .5rem; }

.live {
  width: 9px; height: 9px; border-radius: 50%; background: var(--olijf);
  animation: puls 2.4s ease-in-out infinite; flex-shrink: 0;
}
@keyframes puls { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.2rem; }
.board-col { min-width: 0; }
.board-h {
  font-family: var(--mono); font-size: .8rem; font-weight: 400;
  letter-spacing: .12em; text-transform: uppercase; color: #A8C7E6;
  display: flex; align-items: center; gap: .55rem;
  padding-bottom: .6rem; border-bottom: 1px solid rgba(244, 249, 254, .25);
}
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot--ok { background: var(--olijf); }
.dot--laag { background: var(--oranje); }
.dot--op { background: #E08A82; }
.dot--olijf { background: var(--olijf); }
.dot--water { background: var(--kitwater); }
.dot--dennen { background: var(--logogroen); }

.board-list { list-style: none; }
.board-row {
  display: flex; align-items: baseline; gap: .55rem;
  padding: .45rem 0; border-bottom: 1px solid rgba(244, 249, 254, .12);
  font-size: .92rem;
}
.board-thumb {
  width: 26px; height: 26px; border-radius: 3px; flex-shrink: 0;
  align-self: center; background: #fff;
}
.board-thumb--leeg { display: inline-block; opacity: .25; }
.board-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-name a { color: #F4F9FE; text-decoration: none; }
.board-name a:hover { text-decoration: underline; text-decoration-color: var(--waterlicht); }
.board-dots { flex: 1; border-bottom: 1px dotted rgba(244, 249, 254, .35); transform: translateY(-4px); }
.board-val { font-family: var(--mono); font-size: .8rem; color: #CBE2F4; white-space: nowrap; }

.peiling-voet { margin-top: 1.5rem; font-size: .9rem; color: #A8C7E6; }
.peiling-voet a { color: #F4F9FE; }

/* ── Sectiekoppen ───────────────────────────────────────────────────────── */

.sectie { width: var(--maat); margin: 0 auto; padding: 3rem 0 1rem; }
.sectie-h {
  font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--marine-diep);
  letter-spacing: -0.01em; margin-bottom: .4rem;
}
.sectie-dek { color: var(--grijs); max-width: 62ch; margin-bottom: 1.8rem; }

/* ── De vier productgroepen ─────────────────────────────────────────────── */

.groepen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; }
.groep-kaart {
  display: flex; flex-direction: column; gap: .4rem;
  background: #fff; border: 1px solid var(--lijn); border-radius: 8px;
  border-top: 3px solid var(--marine);
  padding: 1.1rem 1.2rem; text-decoration: none; min-width: 0;
}
.groep-kaart:hover { border-color: var(--waterlicht); border-top-color: var(--water); }
.groep-n { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); }
.groep-t { font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.3; color: var(--marine-diep); }
.groep-b { font-size: .88rem; color: var(--grijs); }

/* ── BOROUX-spotlight ───────────────────────────────────────────────────── */

.spot { background: var(--mist); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); margin-top: 3rem; }
.spot-inner { width: var(--maat); margin: 0 auto; padding: 2.8rem 0; display: grid; grid-template-columns: 1.5fr 1fr; gap: 2.6rem; align-items: center; }
.spot .spot-badge {
  display: inline-block; font-family: var(--mono); font-size: .72rem; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: var(--dennen);
  padding: .3rem .8rem; border-radius: 99px; margin-bottom: 1rem; max-width: none;
}
.spot h2 { font-family: var(--display); font-weight: 600; font-size: 1.6rem; color: var(--marine-diep); line-height: 1.15; max-width: 24ch; }
.spot p { color: var(--grijs); margin-top: .9rem; max-width: 58ch; }
.spot .hero-cta { margin-top: 1.4rem; }
.spot-img { background: #fff; border: 1px solid var(--lijn); border-radius: 8px; padding: 1rem; }
.spot-img img { aspect-ratio: 3 / 4; object-fit: contain; mix-blend-mode: multiply; padding: 6%; }

/* ── Kennis-kaarten ─────────────────────────────────────────────────────── */

.kennis { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.kcard { border-left: 3px solid var(--olijf); padding-left: 1.3rem; }
.kcard h3 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; margin: .5rem 0 .6rem; }
.kcard h3 a { color: var(--marine-diep); text-decoration: none; }
.kcard h3 a:hover { text-decoration: underline; text-decoration-color: var(--waterlicht); }
.kcard p { color: var(--grijs); font-size: .98rem; }
.kcard .meer { display: inline-block; margin-top: .7rem; font-weight: 600; }

/* ── Productkaarten ─────────────────────────────────────────────────────── */

.pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.pcard { background: #fff; border: 1px solid var(--lijn); border-radius: 8px; padding: 1.1rem; }
.pcard-img { display: block; background: var(--mist); border-radius: 6px; }
.pcard-img img { aspect-ratio: 3 / 4; object-fit: contain; mix-blend-mode: multiply; padding: 8%; }
.pcard-note { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--grijs); margin: .9rem 0 .2rem; }
.pcard-name { font-family: var(--sans); font-size: .98rem; line-height: 1.35; font-weight: 600; }
.pcard-name a { color: var(--inkt); text-decoration: none; }
.pcard-name a:hover { color: var(--water); }
.pcard-meta { margin-top: .6rem; display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: center; }
.pcard-price { font-family: var(--mono); font-size: .95rem; }
.pcard-price s { color: var(--grijs); margin-right: .35rem; }

.chip {
  font-family: var(--mono); font-size: .72rem; padding: .18rem .55rem;
  border-radius: 99px; white-space: nowrap;
}
.chip--ok { background: color-mix(in srgb, var(--olijf) 24%, transparent); color: #55581A; }
.chip--laag { background: color-mix(in srgb, var(--oranje) 14%, transparent); color: #8F3E0F; }
.chip--op { background: color-mix(in srgb, var(--rood) 12%, transparent); color: var(--rood); }

/* ── Demo-melding (alleen nog in de embed-mock) ─────────────────────────── */

.pb-notice { font-size: .88rem; color: var(--marine); margin-top: .6rem; display: none; }
.pb-notice.toon { display: block; }

/* ── Voorraadpagina ─────────────────────────────────────────────────────── */

.vsectie { margin-bottom: 2.6rem; }
.vlist { list-style: none; border-top: 1px solid var(--lijn); }
.vrow {
  display: grid; grid-template-columns: auto 1fr auto auto auto;
  gap: .4rem 1.2rem; align-items: center;
  padding: .55rem 0; border-bottom: 1px solid var(--lijn); font-size: .95rem;
}
.vthumb {
  width: 42px; height: 42px; border-radius: 6px;
  border: 1px solid var(--lijn); background: #fff;
}
.vthumb--leeg { display: block; background: var(--mist); }
.vname { min-width: 0; }
.vgroep { font-family: var(--mono); font-size: .7rem; color: var(--grijs); white-space: nowrap; }
.vprice { font-family: var(--mono); font-size: .88rem; white-space: nowrap; }
.vprice s { color: var(--grijs); margin-right: .3rem; }
.vlink { font-weight: 600; white-space: nowrap; }
.vlink--btn { background: none; border: none; font: inherit; color: var(--water); cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--water) 45%, transparent); }
.vmeer { font-size: .9rem; color: var(--grijs); margin-top: .6rem; }

/* ── Artikel (gidsen, PFAS) ─────────────────────────────────────────────── */

.artikel { max-width: 68ch; }
.artikel h2 { font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--marine-diep); margin: 2.2rem 0 .7rem; }
.artikel p + p { margin-top: .9rem; }
.artikel .standfirst { font-size: 1.15rem; color: var(--grijs); }
.artikel ul, .artikel ol { padding-left: 1.3rem; margin: .9rem 0; }
.artikel li { margin: .45rem 0; }
.artikel li strong:first-child { font-family: var(--mono); font-weight: 400; font-size: .85em; color: var(--water); }
.artikel blockquote {
  background: var(--creme); border: 1px solid #EDEBD2; border-left: 3px solid var(--olijf);
  border-radius: 6px; padding: 1.1rem 1.3rem; margin: 1.6rem 0; font-size: .98rem;
}
.artikel blockquote strong:first-child { color: var(--marine); }

.tijdlijn { list-style: none; border-top: 1px solid var(--lijn); margin-top: 1rem; }
.tijdlijn li { display: flex; gap: 1.2rem; padding: .8rem 0; border-bottom: 1px solid var(--lijn); }
.tl-datum { font-family: var(--mono); font-size: .82rem; color: var(--water); white-space: nowrap; padding-top: .2rem; min-width: 5.2rem; }

.kader {
  background: var(--creme); border: 1px solid #EDEBD2; border-left: 3px solid var(--olijf);
  border-radius: 6px; padding: 1.1rem 1.3rem; margin: 1.6rem 0; font-size: .98rem;
}
.kader strong:first-child { color: var(--marine); }

.bronnen { font-size: .88rem; color: var(--grijs); }
.bronnen li { margin: .3rem 0 .3rem 1.2rem; }

/* ── Keuzehulp ──────────────────────────────────────────────────────────── */

.kh-stap { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); margin-bottom: .5rem; }
.kh-select {
  width: 100%; max-width: 560px; padding: .85rem 1rem; font-size: 1.05rem;
  font-family: var(--sans); color: var(--inkt);
  border: 2px solid var(--marine); border-radius: 6px; background: #fff;
}
.kh-intro { margin: 1.4rem 0 .4rem; color: var(--grijs); max-width: 60ch; }
.kh-gids { margin: .2rem 0 .8rem; font-weight: 600; }
.kh-result { margin-top: 1rem; }
.kh-demo { font-size: .85rem; color: var(--grijs); margin-top: 2rem; border-top: 1px solid var(--lijn); padding-top: .8rem; max-width: 68ch; }

/* de situatiehulp: vraag-chips */
.sit { margin-top: 1rem; }
.sit fieldset { border: none; margin: 0 0 1.1rem; }
.sit legend { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--grijs); margin-bottom: .55rem; }
.sit-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.sit-chip {
  display: inline-flex; align-items: center; gap: .45rem; cursor: pointer;
  border: 1.5px solid var(--lijn); border-radius: 99px; padding: .45rem 1rem;
  font-size: .95rem; background: #fff; color: var(--inkt);
}
.sit-chip:hover { border-color: var(--waterlicht); }
.sit-chip:has(input:checked), .sit-chip.is-aan { border-color: var(--marine); background: color-mix(in srgb, var(--waterlicht) 18%, transparent); font-weight: 600; }
.sit-chip input { accent-color: var(--marine); }
.sit-uitleg { font-size: .9rem; color: var(--grijs); max-width: 60ch; margin-top: .4rem; }

/* het advies-blok: Tom kijkt mee */
.advies {
  display: flex; gap: 1.6rem; align-items: center;
  background: var(--mist); border: 1px solid var(--lijn); border-radius: 8px;
  padding: 1.4rem 1.6rem; margin-top: 2.6rem; max-width: 720px;
}
.advies img { width: 96px; height: 96px; object-fit: cover; object-position: top; border-radius: 50%; border: 3px solid #fff; flex-shrink: 0; }
.advies-q { font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--marine-diep); }
.advies p { font-size: .95rem; color: var(--grijs); margin-top: .25rem; }
.advies .btn { margin-top: .8rem; padding: .5rem 1rem; font-size: .92rem; }

/* ── Gidsen ─────────────────────────────────────────────────────────────── */

.ggrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.gcard {
  display: flex; flex-direction: column; gap: .35rem; position: relative;
  background: #fff; border: 1px solid var(--lijn); border-radius: 8px;
  padding: 1rem 1.1rem 1rem; text-decoration: none; min-width: 0;
  border-top: 3px solid var(--olijf);
}
.gcard:hover { border-color: var(--waterlicht); border-top-color: var(--water); }
.gcard .eyebrow { margin-bottom: 0; font-size: .68rem; }
.gcard-t { font-family: var(--sans); font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--inkt); }
.gcard-arrow { color: var(--water); font-weight: 600; margin-top: auto; }

.gids-winkel { margin-top: 2.2rem; }
.gids-winkel h2 { font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--marine-diep); margin-bottom: .7rem; }
.gids-verder {
  margin-top: 2rem; padding-top: .9rem; border-top: 1px solid var(--lijn);
  font-size: .95rem; color: var(--grijs);
}

/* ── Vragen (FAQ) ───────────────────────────────────────────────────────── */

.faq-lijst { max-width: 68ch; }
.faq-item { padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.faq-item:first-child { border-top: 1px solid var(--lijn); }
.faq-q { font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--marine-diep); margin-bottom: .4rem; }
.faq-a { font-size: 1rem; color: var(--inkt); }

.faq-teaser { list-style: none; columns: 2; column-gap: 2.4rem; max-width: 62rem; }
.faq-teaser li { margin: 0 0 .65rem; break-inside: avoid; padding-left: 1rem; position: relative; }
.faq-teaser li::before { content: "?"; position: absolute; left: 0; color: var(--olijf-donker); font-weight: 700; }
.faq-teaser a { color: var(--inkt); text-decoration-color: var(--lijn); }
.faq-teaser a:hover { color: var(--water); }

/* ── Zo werkt het (3 stappen) ───────────────────────────────────────────── */

.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }
.stap { border-top: 3px solid var(--water); padding-top: .8rem; }
.stap-nr { font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; color: var(--water); }
.stap h3 { font-family: var(--display); font-weight: 600; font-size: 1.05rem; margin: .3rem 0 .4rem; color: var(--marine-diep); }
.stap p { font-size: .95rem; color: var(--grijs); }

/* ── Vertrouwensband (reviews op thema) ─────────────────────────────────── */

.trust { background: var(--mist); border-top: 1px solid var(--lijn); border-bottom: 1px solid var(--lijn); margin-top: 3rem; }
.trust-inner { width: var(--maat); margin: 0 auto; padding: 2.6rem 0; }
.trust-top { display: flex; flex-wrap: wrap; gap: 1rem 2.4rem; align-items: center; margin-bottom: 1.8rem; }
.trust-score { text-align: center; }
.trust-cijfer { font-family: var(--display); font-weight: 600; font-size: 3.2rem; line-height: 1; color: var(--marine); }
.trust-sub { font-family: var(--mono); font-size: .75rem; color: var(--grijs); margin-top: .4rem; }
.trust-kop h2 { font-family: var(--display); font-weight: 600; font-size: 1.4rem; color: var(--marine-diep); }
.trust-kop p { color: var(--grijs); font-size: .95rem; margin-top: .2rem; max-width: 58ch; }

.rev-wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.rev-col { min-width: 0; }
.rev-h {
  font-family: var(--mono); font-size: .78rem; font-weight: 400; letter-spacing: .12em;
  text-transform: uppercase; color: var(--grijs);
  padding-bottom: .5rem; border-bottom: 1px solid var(--lijn); margin-bottom: .9rem;
}
.rev-h .dot { margin-right: .5rem; }
.rev-item { display: flex; gap: .8rem; align-items: flex-start; border-left: 3px solid var(--olijf); padding-left: .9rem; margin-bottom: 1.1rem; }
.rev-item--olijf { border-left-color: var(--olijf); }
.rev-item--water { border-left-color: var(--kitwater); }
.rev-item--dennen { border-left-color: var(--logogroen); }
.rev-thumb {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; margin-top: .15rem;
  border: 1px solid var(--lijn); background: #fff; object-fit: cover;
}
.rev-thumb--leeg { display: block; background: var(--mist); }
.rev-item blockquote { font-size: .97rem; color: var(--inkt); }
.rev-item cite { display: block; font-style: normal; font-family: var(--mono); font-size: .72rem; color: var(--grijs); margin-top: .35rem; }
.rev-item cite a { color: var(--water); }
.trust-bron { font-size: .88rem; color: var(--grijs); margin-top: 1.2rem; }

/* ── Winkel-embed demo ──────────────────────────────────────────────────── */

.mock { background: #ECECEC; border: 1px solid #D8D8D8; border-radius: 8px; padding: 2rem; }
.mock-kader { max-width: 640px; margin: 0 auto; background: #fff; border-radius: 6px; padding: 1.6rem; font-family: var(--sans); }
.mock-crumb { font-size: .78rem; color: #767676; margin-bottom: 1rem; }
.mock-h { font-size: 1.35rem; font-weight: 700; color: #222; }
.mock-prijs { font-size: 1.2rem; margin: .6rem 0; color: #222; }
.mock-uit { display: inline-block; background: #F3D8D6; color: #8C3A36; font-size: .85rem; padding: .3rem .8rem; border-radius: 4px; margin-bottom: 1.2rem; }

.helder-strip {
  border: 2px dashed var(--waterlicht); border-radius: 6px;
  padding: 1.1rem 1.2rem; background: var(--papier);
}
.hs-kop { font-family: var(--display); font-weight: 600; color: var(--marine); font-size: 1rem; margin-bottom: .5rem; }
.hs-kop .logo-punt { color: var(--logogroen); }
.helder-strip ul { list-style: none; font-size: .92rem; }
.helder-strip li { margin: .35rem 0; }
.hs-form { display: flex; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.hs-form input[type="email"] { flex: 1; min-width: 180px; padding: .5rem .7rem; border: 1.5px solid var(--lijn); border-radius: 6px; font-size: .92rem; }
.hs-form .btn { padding: .5rem .9rem; font-size: .9rem; }

.anno { border-left: 3px solid var(--waterlicht); padding-left: 1.2rem; margin: 1.6rem 0; }
.anno h3 { font-size: 1.05rem; color: var(--marine-diep); margin-bottom: .3rem; }
.anno p { font-size: .95rem; color: var(--grijs); }

/* ── Footer (naar het model van de webshop-voet) ────────────────────────── */

.foot {
  background: var(--marine-diep); color: #BFD4EA; margin-top: 3.5rem;
  font-family: var(--sans);
}
.foot-inner {
  width: var(--maat); margin: 0 auto; padding: 2.8rem 0 2.2rem;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.2rem;
  font-size: .88rem;
}
.foot a { color: #E8F1FA; text-decoration: none; }
.foot a:hover { text-decoration: underline; text-decoration-color: var(--waterlicht); }
.foot-brand p { max-width: 34ch; }
.foot-brand p + p { margin-top: .8rem; }
.foot-am { width: 200px; height: auto; margin-bottom: 1rem; }
.foot-adres { font-size: .82rem; line-height: 1.8; }
.foot-noot { font-size: .78rem; color: #8FB0D4; display: block; margin: -.35rem 0 0 1.45rem; }
.foot-h { font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .7rem; color: #8FB0D4; }
.foot-lijst { list-style: none; }
.foot-lijst li { margin-bottom: .55rem; }
.foot-ico { display: inline-flex; align-items: center; gap: .5rem; }
.foot-ico .ico { opacity: .85; flex-shrink: 0; }
.foot-onder { border-top: 1px solid rgba(244, 249, 254, .18); }
.foot-onder-inner {
  width: var(--maat); margin: 0 auto; padding: 1rem 0 1.2rem;
  display: flex; flex-wrap: wrap; gap: .4rem 2rem;
  justify-content: space-between; align-items: baseline;
  font-size: .8rem; color: #8FB0D4;
}
.foot-onder-inner p { margin: 0; }
.foot-onder a { color: #BFD4EA; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
  .board { grid-template-columns: 1fr; gap: 1.4rem; }
  .kennis { grid-template-columns: 1fr; gap: 1.6rem; }
  .pgrid { grid-template-columns: 1fr 1fr; }
  .ggrid { grid-template-columns: 1fr 1fr; }
  .groepen { grid-template-columns: 1fr 1fr; }
  .stappen { grid-template-columns: 1fr; gap: 1.2rem; }
  .spot-inner { grid-template-columns: 1fr; gap: 1.6rem; }
  .spot-img { max-width: 380px; }
  .rev-wrap { grid-template-columns: 1fr; gap: 1.4rem; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 1.8rem; }
}

@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr; }
  .ggrid { grid-template-columns: 1fr; }
  .groepen { grid-template-columns: 1fr; }
  .faq-teaser { columns: 1; }
  .mast-inner { padding-top: 1.1rem; }
  .mast-nav { gap: 1rem; font-size: .9rem; }
  .advies { flex-direction: column; align-items: flex-start; }
  .foot-inner { grid-template-columns: 1fr; }
  .vrow { grid-template-columns: auto 1fr auto; row-gap: .25rem; }
  .vthumb { grid-row: 1 / span 2; }
  .vname { grid-column: 2 / span 2; }
  .vprice { grid-row: 2; grid-column: 2; }
  .vrow .chip { grid-row: 2; grid-column: 3; justify-self: end; }
  .vrow .vlink { grid-row: 3; grid-column: 2 / span 2; justify-self: start; }
  .vrow .vlink--btn, .vrow a.vlink { grid-row: 3; }
}