/* ============================================================
   HORDIGRIT · v3 (Spoor A) — gedeelde stylesheet
   Tuinhuis-structuur, omgekleurd naar het HG-moodboard.
   Gebroken wit + groen-accent + kraft spaarzaam + warm oranje CTA.
   Gabarito + Figtree + Caveat. Pills, ronde hoeken, marker-warmte.
   ============================================================ */
:root{
  --bg:#f4efe3;          /* warm gebroken wit */
  --surface:#fbf8f0;
  --kraft:#ece4d2;
  --kraft-2:#dccba6;
  --ink:#26241d;
  --ink-soft:#5e574a;
  --line:#26241d1f;
  --green:#278627;       /* HG-groen, brand-accent */
  --green-deep:#2f5233;  /* badges / banners */
  --green-soft:#e6efe1;
  --accent:#e07b2c;      /* warm oranje, knal-CTA */
  --accent-ink:#fff;
  --rust:#c2622f;        /* wortel-oranje — grote tekst / accenten */
  --rust-ink:#a34f22;    /* dezelfde kleur, donker genoeg voor kleine tekst (4,9:1 op --bg) */
  --mustard:#e7b53f;

  --disp:"Gabarito",system-ui,sans-serif;
  --body:"Figtree",system-ui,sans-serif;
  --hand:"Caveat",cursive;

  --radius:18px;
  --radius-lg:30px;
  --max:1180px;
}
*,*::before,*::after{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:clip} /* clip (niet hidden): geen h-scroll, sticky header blijft werken */
body{font-family:var(--body);color:var(--ink);background:var(--bg);line-height:1.6;font-size:1.02rem;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.08}
/* alle h2's op dezelfde vloeiende maat: koppen zonder eigen regel (reviews, about, news)
   vielen terug op de browser-standaard en oogden nét anders dan de sectiekoppen
   (fine-pass 2026-08-05) */
h2{font-size:clamp(1.5rem,1.28rem + .75vw,1.9rem)}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.4rem)}
.section{padding-block:clamp(3rem,7vw,5.5rem)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:#fff;padding:.6rem 1rem;border-radius:10px;z-index:99}

.hand{font-family:var(--hand);font-weight:700;color:var(--green);font-size:1.5em;line-height:1}
.eyebrow{font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.lead{font-size:1.16rem;color:var(--ink-soft)}

/* marker-onderstreping onder koppen.
   z-index:0 is nodig, niet cosmetisch: de ::after staat op z-index:-1 en zonder eigen
   stapelcontext zakt die achter de achtergrond van de héle sectie. Daardoor was de
   gele streep onzichtbaar op alle gekleurde banden (kraft, groen-zacht, nieuwsbrief).
   Gevonden 2026-08-05. */
.mark{position:relative;display:inline-block;z-index:0}
.mark::after{content:"";position:absolute;left:-2%;right:2%;bottom:-.14em;height:.34em;background:var(--mustard);opacity:.85;z-index:-1;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E%3Cpath d='M2 7 C40 2 70 10 110 5 S180 3 198 6' stroke='black' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%;
         mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='12' viewBox='0 0 200 12'%3E%3Cpath d='M2 7 C40 2 70 10 110 5 S180 3 198 6' stroke='black' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/100% 100%}

/* knoppen — pills */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--disp);font-weight:700;font-size:.98rem;
 padding:.78rem 1.5rem;border-radius:999px;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s,background .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px #e07b2c44}
.btn-primary:hover{box-shadow:0 10px 24px #e07b2c55}
.btn-green{background:var(--green);color:#fff}
.btn-ghost{background:var(--surface);color:var(--ink);border:1.8px solid #26241d4d}
.btn-ghost:hover{border-color:var(--green);color:var(--green);box-shadow:0 4px 14px #26241d1a}
.btn-lg{padding:.95rem 1.8rem;font-size:1.04rem}
.btn-block{width:100%;justify-content:center}

/* groene cirkel-badge met lijn-icoon */
.badge{width:54px;height:54px;border-radius:50%;background:var(--green-deep);color:#fff;display:grid;place-items:center;flex:none}
.badge svg{width:26px;height:26px;stroke:currentColor;stroke-width:1.8;fill:none}
/* geïllustreerde stempel-iconen (assets/img/icons): cirkel zit in de svg zelf,
   dus geen css-achtergrond; iets groter dan de standaard badge voor leesbaarheid */
.badge-icon{width:64px;height:64px;background:none}
.badge-icon img{width:100%;height:100%;display:block}

/* promo-balk */
.promo{background:var(--green-deep);color:#eaf3e6;font-size:.86rem;overflow:hidden;white-space:nowrap}
.promo .track{display:inline-flex;gap:1.4rem;padding:.5rem 0;animation:slide 26s linear infinite}
.promo span{opacity:.92}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:#fff;backdrop-filter:blur(8px);border-bottom:1px solid #26241d12;box-shadow:0 4px 16px #26241d0f}
.site-header .wrap{display:flex;align-items:center;gap:1.4rem;height:68px}
.brand{display:flex;align-items:center;gap:.55rem;font-family:var(--disp);font-weight:900;font-size:1.32rem;letter-spacing:-.02em;color:var(--green-deep)}
.brand .leaf{width:30px;height:30px}
.brand-logo img{height:34px;width:auto;display:block}
.nav{margin-left:auto;display:flex;gap:1.5rem;font-weight:600;font-size:.96rem}
.nav a:hover,.nav a[aria-current]{color:var(--green)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--mustard);text-underline-offset:5px;text-decoration-thickness:3px}
.nav-actions{display:flex;align-items:center;gap:1rem}
.nav-actions .cart{display:flex;align-items:center;gap:.35rem;font-weight:600}
.nav-actions .cart .count{background:var(--green);color:#fff;font-size:.7rem;width:18px;height:18px;border-radius:50%;display:grid;place-items:center}

/* hamburger + mobiel menu */
.hamburger{display:none;margin-left:.4rem;width:44px;height:44px;border:0;background:transparent;cursor:pointer;color:var(--green-deep);align-items:center;justify-content:center}
.hamburger svg{width:26px;height:26px;stroke:currentColor;stroke-width:2;fill:none}
.hamburger .x{display:none}
.hamburger[aria-expanded="true"] .bars{display:none}
.hamburger[aria-expanded="true"] .x{display:block}
.mobile-nav{display:none}
.mobile-nav[data-open]{display:block}
@media(max-width:860px){
  .nav{display:none}
  .site-header .wrap{height:62px}
  .nav-actions .btn-primary{display:none}        /* CTA verhuist naar het paneel */
  .hamburger{display:inline-flex}
  .mobile-nav{position:fixed;inset:62px 0 auto 0;z-index:45;background:var(--surface);border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px #0000001f;padding:1rem clamp(1.1rem,4vw,2.4rem) 1.6rem;
    animation:menuDrop .22s cubic-bezier(.22,1,.36,1)}
  .mobile-nav a{display:block;font-family:var(--disp);font-weight:700;font-size:1.15rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
  .mobile-nav a:last-of-type{border-bottom:0}
  /* de generieke .mobile-nav a zet display:block; zonder inline-flex hieronder valt de
     pill-tekst links i.p.v. gecentreerd */
  .mobile-nav .btn{margin-top:1rem;width:100%;display:inline-flex;justify-content:center;text-align:center;border-bottom:0}
  .menu-backdrop{position:fixed;inset:0;z-index:44;background:#26241d40;backdrop-filter:blur(1px)}
}
@keyframes menuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* breadcrumb */
.crumbs{font-size:.86rem;color:var(--ink-soft);padding-top:1.4rem}
.crumbs a:hover{color:var(--green)}

/* hero */
.hero{padding-block:clamp(2.5rem,6vw,5rem)}
.hero .wrap{display:grid;gap:clamp(2rem,5vw,3.5rem);align-items:center}
@media(min-width:880px){.hero .wrap{grid-template-columns:1.05fr .95fr}}
/* Kopmaten: na de clamp-fix van 2026-08-05 bleken de oorspronkelijke maxima (4.4rem/2.7rem)
   veel te groot — het hele ontwerp is getekend rond de kleine koppen die de kapotte clamps
   maandenlang opleverden (h1 ±33px, h2 ±25px). De maxima staan daarom dicht bij die maten:
   desktop mag iets groeien, maar niet meer dan een stap (feedback Danny 2026-08-05). */
.hero h1{font-size:clamp(2rem,1.55rem + 1.3vw,2.5rem);font-weight:900;margin:.5rem 0 1rem}
.hero .lead{max-width:42ch}
.hero.center .wrap{grid-template-columns:1fr;text-align:center;max-width:64ch;margin-inline:auto}
.cta-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem}
.hero.center .cta-row{justify-content:center}
/* mobiel: álle content-knoppen gestapeld op volle breedte — los links zwevende pills
   oogden rommelig verderop de pagina (feedback 2026-08-05). Header/footer vallen
   buiten main en houden hun eigen maat. */
@media(max-width:679px){
  .cta-row{flex-direction:column;align-items:stretch}
  main .btn{width:100%;justify-content:center}
}
.hero-marks{display:flex;flex-wrap:wrap;gap:1.1rem;margin-top:1.7rem;list-style:none;font-weight:600;font-size:.92rem}
.hero.center .hero-marks{justify-content:center}
.hero-marks li{display:flex;align-items:center;gap:.45rem}
.hero-marks svg{width:18px;height:18px;stroke:var(--green);stroke-width:2.4;fill:none}
.hero-media{position:relative}
.hero-media img{border-radius:var(--radius-lg);background:var(--surface);width:100%;max-width:430px;margin-inline:auto}
.hero-media .tag{position:absolute;left:-6px;bottom:18px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.5rem 1rem;font-weight:700;font-size:.9rem;box-shadow:0 8px 22px #0000001a}
.hero-media .tag b{color:var(--green)}

/* usp/trust strip */
.trust{background:var(--green-soft);border-block:1px solid var(--line)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:1.2rem 2.2rem;justify-content:center;padding-block:1rem;font-weight:600;font-size:.94rem}
.trust .item{display:flex;align-items:center;gap:.5rem}
.trust svg{width:20px;height:20px;stroke:var(--green);stroke-width:2;fill:none}

/* sec-head — geen max-width op de container: koppen mogen op brede schermen op één
   regel doorlopen (feedback 2026-08-05, "Je doet alles goed…" brak halverwege af).
   De subtitel houdt z'n eigen leesbreedte; text-wrap:balance voorkomt een zwerfwoord
   als een kop op smallere schermen alsnog moet breken. */
.sec-head{margin-bottom:2.2rem}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(1.5rem,1.28rem + .75vw,1.9rem);text-wrap:balance}
/* :not(.eyebrow) — anders wint deze regel op specificiteit van .eyebrow en verliest de
   groene kicker z'n kleur (werd ink-soft) én z'n maat (werd 1.08rem i.p.v. .82rem).
   Raakte 12 plekken op alle vijf templates; gevonden 2026-08-04. */
/* :not(.hand) — anders overschrijft deze subtitel-regel de Caveat-accentregel in een
   sec-head (won op specificiteit: "Veelgestelde koopvragen" stond klein en grijs,
   gevonden 2026-08-05) */
.sec-head p:not(.eyebrow):not(.hand){color:var(--ink-soft);margin-top:.7rem;font-size:1.08rem;max-width:62ch}
.sec-head.center p:not(.eyebrow){margin-inline:auto}
.sec-head .hand{display:block;margin-top:.35rem}

/* feature grid met badges */
.grid{display:grid;gap:1.3rem}
.cols-2{grid-template-columns:1fr}
.cols-3{grid-template-columns:1fr}
.cols-4{grid-template-columns:1fr} /* 1 kolom op smal mobiel; 2x2 op tablet; 4 pas op desktop (4 smalle kolommen = 1 woord per regel) */
@media(min-width:480px){.cols-4{grid-template-columns:1fr 1fr}}
@media(min-width:680px){.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.cols-4{grid-template-columns:repeat(4,1fr)}}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 1.4rem}
.feature h3{font-size:1.15rem;margin:.9rem 0 .4rem}
.feature p{color:var(--ink-soft);font-size:.96rem}

/* split */
.split{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:820px){.split{grid-template-columns:1fr 1fr}.split.flip .split-media{order:-1}}
.split-media img{border-radius:var(--radius-lg);width:100%;object-fit:cover;aspect-ratio:4/3}
/* padding:0 — de browser-default padding-inline-start liet de vinkjes zweven t.o.v.
   de kop en de knop (feedback 2026-08-05) */
.usp-list{list-style:none;margin:1.3rem 0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.usp-list li{display:flex;align-items:flex-start;gap:.6rem;font-weight:500}
.usp-list svg{width:22px;height:22px;flex:none;stroke:var(--green);stroke-width:2.4;fill:none;margin-top:1px}

/* kraft band */
.kraftband{background:var(--kraft)}

/* hoe werkt het teaser / strata */
.howto{background:var(--kraft)}
.howto .wrap{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:820px){.howto .wrap{grid-template-columns:1.1fr .9fr}}
.howto img{border-radius:var(--radius);width:100%}
/* padding:0 — browser-default inspringing liet de lijst rechts van de kop zweven
   (feedback 2026-08-05) */
.layers{list-style:none;display:flex;flex-direction:column;gap:1rem;margin-top:1.4rem;padding:0}
.layers li{display:flex;gap:.8rem;align-items:flex-start}
.layers .n{font-family:var(--disp);font-weight:800;color:var(--rust);font-size:1.1rem;flex:none;width:1.6rem}
.layers b{display:block}
.layers span{color:var(--ink-soft);font-size:.95rem}

/* stappen (hoe werkt het pagina) */
.step{display:grid;gap:clamp(1.4rem,4vw,3rem);align-items:center;padding-block:clamp(1.5rem,4vw,2.5rem)}
@media(min-width:820px){.step{grid-template-columns:1fr 1fr}.step:nth-child(even) .step-media{order:-1}}
.step-media img{border-radius:var(--radius-lg);width:100%;background:var(--surface)}
.step .num{display:inline-grid;place-items:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--rust);color:#fff;font-family:var(--disp);font-weight:800;margin-bottom:.8rem}
.step h3{font-size:clamp(1.4rem,1rem + 1.6vw,2rem)}
.step p{color:var(--ink-soft);margin-top:.5rem}

/* product blok (home) */
section.product{background:var(--green-deep);color:#f3efe4}
section.product .wrap{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:820px){section.product .wrap{grid-template-columns:.9fr 1.1fr}}
section.product img{width:100%;max-width:380px;margin-inline:auto;filter:drop-shadow(0 18px 36px #0006)}
section.product h2{color:#fff;font-size:clamp(1.5rem,1.28rem + .75vw,1.9rem)}
section.product .price{display:flex;align-items:baseline;gap:.5rem;margin:1.1rem 0 .3rem}
section.product .price b{font-family:var(--disp);font-size:2.4rem;color:#fff}

/* tiers (1/3/5 zakken) */
.tiers{display:flex;gap:.7rem;margin:1.3rem 0;flex-wrap:wrap}
.tier{background:#ffffff14;border:1px solid #ffffff2e;border-radius:var(--radius);padding:.8rem 1rem;text-align:center;flex:1;min-width:90px;display:flex;flex-direction:column;gap:.15rem;justify-content:center}
.tier .q{font-family:var(--disp);font-weight:800;font-size:1.1rem}
.tier .pp{font-size:.84rem;opacity:.85}
.tier .korting{font-size:.72rem;font-weight:700;color:var(--mustard)}
.tier .paid{font-size:.72rem;font-weight:600;color:#ffffff8c}
.tier.best{border-color:var(--mustard);position:relative}
.tier.best::after{content:"voordeligst";position:absolute;top:-.7rem;left:50%;transform:translateX(-50%);background:var(--mustard);color:#3a2c08;font-size:.66rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;white-space:nowrap}
section.product .ship,.ship{font-size:.92rem;opacity:.85;margin-top:.4rem}

/* ---------- PDP ---------- */
.pdp-top{display:grid;gap:clamp(1.6rem,4vw,3rem);padding-top:1.5rem}
@media(min-width:880px){.pdp-top{grid-template-columns:1.05fr .95fr;align-items:start}}
.gallery .main{border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--line)}
.gallery .main img{width:100%;aspect-ratio:1/1;object-fit:contain;padding:clamp(.8rem,3vw,2rem);mix-blend-mode:multiply}
.thumbs{display:flex;gap:.7rem;margin-top:.7rem}
.thumbs img{width:78px;height:78px;object-fit:cover;border-radius:14px;border:1.6px solid var(--line);background:var(--surface);cursor:pointer}
.thumbs img:hover,.thumbs img.active{border-color:var(--green)}
.buybox h1{font-size:clamp(1.9rem,1.3rem + 2vw,2.6rem);margin:.3rem 0 .6rem}
.rating{display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.rating .stars{color:var(--mustard)}
.buy-price{display:flex;align-items:baseline;gap:.6rem;margin:.4rem 0}
.buy-price b{font-family:var(--disp);font-size:2.2rem}
.buy-price span{color:var(--ink-soft);font-size:.95rem}
.options{display:flex;flex-direction:column;gap:.6rem;margin:1.2rem 0}
.opt{display:flex;align-items:center;gap:.9rem;border:1.6px solid var(--line);border-radius:var(--radius);padding:.85rem 1rem;cursor:pointer;background:var(--surface);transition:border-color .2s}
.opt:hover{border-color:var(--green)}
.opt.sel{border-color:var(--green);box-shadow:0 0 0 2px var(--green-soft)}
.opt .dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none}
.opt.sel .dot{border-color:var(--green);background:radial-gradient(var(--green) 0 6px,transparent 7px)}
.opt .lab{font-weight:700;font-family:var(--disp)}
.opt .sub{font-size:.84rem;color:var(--ink-soft)}
.opt .right{margin-left:auto;text-align:right;flex:none}
.opt .right b{font-family:var(--disp)}
.opt .bespaar{display:block;font-size:.76rem;font-weight:700;color:var(--rust)}
.opt .save{display:inline-block;white-space:nowrap;font-size:.74rem;font-weight:700;color:#fff;background:var(--green);border-radius:999px;padding:.05rem .5rem;margin-top:.15rem}
.buy-marks{list-style:none;display:flex;flex-direction:column;gap:.5rem;margin:1.1rem 0}
.buy-marks li{display:flex;gap:.5rem;align-items:center;font-size:.95rem}
.buy-marks svg{width:19px;height:19px;stroke:var(--green);stroke-width:2.4;fill:none;flex:none}
.assurance{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:1.2rem;font-size:.86rem;color:var(--ink-soft)}
.assurance span{display:flex;align-items:center;gap:.4rem}

/* accordion / specs / faq */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;padding:1.1rem 0;font-family:var(--disp);font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;align-items:center}
.acc summary::-webkit-details-marker{display:none}
.acc summary::after{content:"+";color:var(--green);font-size:1.4rem;line-height:1}
.acc details[open] summary::after{content:"–"}
.acc .ac-body{padding:0 0 1.2rem;color:var(--ink-soft)}

/* doseringstabel */
.dose{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.dose th,.dose td{text-align:left;padding:.8rem 1rem;border-bottom:1px solid var(--line);font-size:.95rem}
.dose th{background:var(--green-soft);font-family:var(--disp);font-weight:700}
.dose tr:last-child td{border-bottom:0}
/* .note-flag verwijderd 2026-08-04: nergens gebruikt, en een gekleurde zijstreep is
   het luie callout-patroon. Vervangen door .callout onderaan dit bestand. */

/* vergelijkingstabel grit/perliet/vermiculiet */
.compare{width:100%;min-width:600px;border-collapse:collapse;background:var(--surface);font-size:.94rem}
.compare th,.compare td{padding:.85rem 1rem;border-bottom:1px solid var(--line);text-align:left}
.compare thead th{background:var(--green-deep);color:#fff;font-family:var(--disp)}
.compare tbody th{font-family:var(--disp);font-weight:700;background:var(--green-soft)}
.compare td.yes{color:var(--green);font-weight:700}
.compare td.no{color:var(--rust);font-weight:700}
.compare tr:last-child td,.compare tr:last-child th{border-bottom:0}
/* mobiel: horizontaal scrollen met vastgeplakte eerste kolom (radius/clip op de wrapper,
   want overflow:hidden op de tabel zelf breekt position:sticky) */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--radius)}
.compare thead th:first-child,.compare tbody th{position:sticky;left:0;z-index:2;box-shadow:8px 0 10px -8px #00000030}
.swipehint{display:none;font-size:.8rem;color:var(--ink-soft);text-align:center;margin-top:.6rem}
@media(max-width:679px){
  .swipehint{display:block}
  /* sticky eerste kolom smal op mobiel: labels wrappen op meerdere regels, zodat er
     meer antwoord-kolommen in beeld staan en er echt iets te scrollen valt */
  .compare thead th:first-child,.compare tbody th{
    width:6.8rem;min-width:6.8rem;max-width:6.8rem;
    white-space:normal;overflow-wrap:break-word;
    font-size:.86rem;line-height:1.3;padding:.75rem .65rem}
}

/* wortel-test band */
.test{background:var(--green);color:#fff}
.test .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.5rem;justify-content:space-between}
.test h2{color:#fff;font-size:clamp(1.45rem,1.2rem + .8vw,1.8rem)}
.test p{opacity:.92;max-width:46ch;margin-top:.4rem}
.test .hand{color:#d8f0cf}

/* seizoenen */
.season{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:480px){.season{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.season{grid-template-columns:repeat(4,1fr)}}
.season .s{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.3rem 1.1rem;text-align:center}
.season .s .ic{font-size:1.6rem}
.season .dot{display:inline-block;width:34px;height:34px;border-radius:50%;position:relative}
.season .dot::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff8}
.season .dot.lente{background:var(--green)}
.season .dot.zomer{background:#e7b53f}
.season .dot.herfst{background:#b5774a}
.season .dot.winter{background:#5b9bd5}
.season .s h3{margin:.5rem 0 .3rem;font-size:1.05rem}
.season .s p{font-size:.9rem;color:var(--ink-soft)}

/* reviews */
.reviews{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:680px){.reviews{grid-template-columns:repeat(3,1fr)}}
/* kaart een tint lichter dan --surface + zachte schaduw: op de gebroken-witte sectie-
   achtergrond vervaagde --surface te veel (feedback 2026-08-05); géén fel wit */
.review{background:#fefcf6;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;
  box-shadow:0 10px 24px #3a2a1710}
.stars{color:var(--mustard);letter-spacing:.1em}
.review p{margin:.6rem 0;font-size:.97rem}
.review .who{font-weight:700;font-size:.9rem;color:var(--ink-soft)}

/* about */
.about .wrap{display:grid;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(min-width:820px){.about .wrap{grid-template-columns:1fr 1fr}}
.about img{border-radius:var(--radius-lg);width:100%;max-width:440px;margin-inline:auto;display:block;object-fit:cover;aspect-ratio:4/5;object-position:center top}
.about .doorsnede img{aspect-ratio:auto;max-width:488px}
.badge-emoji{font-size:1.7rem;background:var(--kraft)}
.team{display:grid;gap:1.3rem;grid-template-columns:1fr}
@media(min-width:680px){.team{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.team{grid-template-columns:repeat(4,1fr)}}
.member{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;text-align:center}
.member img{width:100%;aspect-ratio:1/1;object-fit:cover}
.member .m-body{padding:1.1rem}
.member h3{font-size:1.1rem}
.member p{color:var(--ink-soft);font-size:.9rem;margin-top:.4rem;text-align:left}
.quote{background:var(--kraft);border-radius:var(--radius-lg);padding:clamp(2rem,5vw,3.5rem);text-align:center;max-width:60ch;margin-inline:auto}
.quote p{font-family:var(--hand);font-size:clamp(1.6rem,1rem + 2.5vw,2.6rem);color:var(--green-deep);line-height:1.25}
.quote .who{font-family:var(--body);font-size:.95rem;color:var(--ink-soft);margin-top:1rem;font-weight:600}

/* newsletter */
.news{background:var(--kraft)}
.news .wrap{display:grid;gap:1.4rem;align-items:center}
@media(min-width:760px){.news .wrap{grid-template-columns:1.1fr .9fr}}
.news form{display:flex;gap:.6rem;flex-wrap:wrap}
.news input{flex:1;min-width:200px;padding:.85rem 1.1rem;border-radius:999px;border:1.6px solid var(--line);background:#fff;font:inherit}

/* footer */
.site-footer{background:var(--green-deep);color:#d7e3d2}
/* twee-toons golf: golf-div krijgt de kleur van de sectie erbóven (default kraft) zodat de
   masked-out bovenkant naadloos aansluit; de groene golf rijst van onderen op. */
.golf{height:72px;background:var(--golf-top,var(--kraft));margin:0}
.golf::after{content:"";display:block;height:100%;background:var(--green-deep);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='72' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72 V34 C240 10 460 8 720 28 C980 48 1200 50 1440 22 V72 Z' fill='black'/%3E%3C/svg%3E") no-repeat bottom/100% 100%;
         mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1440' height='72' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 72 V34 C240 10 460 8 720 28 C980 48 1200 50 1440 22 V72 Z' fill='black'/%3E%3C/svg%3E") no-repeat bottom/100% 100%}
.site-footer .wrap{padding-block:2.6rem 1.5rem}

/* footer social-icons */
.socials{display:flex;gap:.6rem;margin-top:.2rem}
.socials a{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#ffffff16;color:#fff;transition:background .2s,transform .2s}
.socials a:hover{background:var(--green);transform:translateY(-2px)}
.socials svg{width:19px;height:19px;fill:currentColor}

/* WebwinkelKeur trust-chip (licht, leesbaar op de groene footer)
   NB: wwk-badge.png is van nature ~279px breed; max-width + flex-wrap
   zodat de pill op mobiel krimpt/wrapt i.p.v. de pagina openduwen. */
.wwk-chip{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .7rem;background:var(--surface);border-radius:14px;padding:.6rem .85rem;color:var(--ink);max-width:100%}
.wwk-chip img{max-height:30px;height:auto;width:auto;max-width:100%}
.wwk-chip .lab{font-size:.78rem;font-weight:600;color:var(--ink-soft);line-height:1.2;max-width:14ch}

/* reviews-kop met WWK-badge */
.reviews-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.8rem 1.4rem;margin-bottom:2rem;text-align:center}
.wwk-badge{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem .75rem;background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:.5rem 1rem .5rem .65rem;max-width:100%}
.wwk-badge img{max-height:30px;height:auto;width:auto;max-width:100%;display:block}
.wwk-badge .lab{font-size:.82rem;font-weight:700;color:var(--ink-soft)}
.review .src{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--ink-soft);margin-top:.6rem}
.review .src svg{width:14px;height:14px}
.foot-grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media(min-width:540px) and (max-width:759px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:2rem 1.5rem} /* tablet: linkkolommen 2-op-rij, brand erboven */
  .foot-brand{grid-column:1/-1}
}
@media(min-width:760px){.foot-grid{grid-template-columns:1.4fr 1fr 1fr 1fr}}
.foot-brand p{opacity:.8;font-size:.92rem;margin:.8rem 0;max-width:34ch}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:.8rem}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.45rem;font-size:.93rem}
.site-footer a:hover{color:#fff}
.site-footer .brand{color:#fff}
.foot-trust{display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem;justify-content:space-between;margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid #ffffff24}
.pay{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.foot-trust .pay{margin-top:0}
.pay span{background:#ffffff1c;border-radius:6px;padding:.2rem .5rem;font-size:.72rem;font-weight:600}
.foot-bottom{border-top:1px solid #ffffff24;margin-top:2rem;padding-top:1.2rem;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:.82rem;opacity:.75}

.mock-flag{position:fixed;left:12px;bottom:12px;background:var(--ink);color:#fff;font-size:.74rem;padding:.4rem .7rem;border-radius:999px;z-index:80;opacity:.85}
.mock-flag:hover{opacity:1}

/* ---------- gedeelde verfijningen (Spoor A, ronde 2/3) ---------- */
/* transparante doorsnede-hero (Screenshot_13): laat 'm zweven, geen surface-kaart eronder */
.hero-media.cut{display:flex;flex-direction:column;align-items:center}
.hero-media.cut img{background:none;border-radius:0;max-width:520px;
  filter:drop-shadow(0 22px 30px #3a2a1733)}
.hero-media.cut .tag{bottom:6px;left:0}
/* handgeschreven notitie boven de doorsnede (gedeeld, ook op subpagina's) */
.hero-note{align-self:flex-end;font-family:var(--hand);font-weight:700;color:var(--rust);
  font-size:1.6rem;line-height:1.05;text-align:right;margin:0 1.2rem .3rem 0;transform:rotate(-2deg)}
@media(prefers-reduced-motion:reduce){.hero-note{transform:none}}

/* pouch-render vult de hele kaart: de render heeft een subtiele gradient bij de randen,
   dus padding eromheen geeft een zichtbare naad (render-rect vs kaart-wit). Zonder padding
   is de beeldrand de kaartrand en bestaat er geen naad. */
/* aspect-ratio houdt de witte kaart op z'n oude formaat nu de zak-foto op 60% staat:
   de foto zweeft ruim in het wit (feedback 2026-08-05); pouch.png-rand is zuiver #fff,
   dus geen naad tegen het kaart-wit */
.pouch-card{background:#fff;border-radius:var(--radius-lg);padding:0;overflow:hidden;
  aspect-ratio:545/712;display:grid;place-items:center;box-shadow:0 20px 40px #0000002e;
  max-width:380px;margin-inline:auto}
/* section.product img (width:100%) wint anders op specificiteit van .pouch-card img */
section.product .pouch-card img{filter:none;width:70%;max-width:100%;display:block}

/* prijs-anker "vanaf €12,95" */
.price .from{font-family:var(--body);font-weight:600;font-size:1rem;align-self:center;opacity:.85}
.from-line{font-weight:700;color:var(--green);margin:.2rem 0 .6rem}
.buybox .from-line{font-size:1.02rem}

/* ronde foto-masker (variant B, uit de flyer) */
.circle-media{border-radius:50%;overflow:hidden;aspect-ratio:1/1;width:100%;max-width:420px;margin-inline:auto}
.circle-media img{width:100%;height:100%;object-fit:cover}

/* hand-genoteerde marker-tag (variant B) */
.note{font-family:var(--hand);color:var(--rust);font-size:1.4rem;line-height:1;transform:rotate(-4deg);display:inline-block}

/* demo-strip beeld (glas-cilinder, portrait) */
.media-portrait{border-radius:var(--radius-lg);width:100%;object-fit:cover;aspect-ratio:3/4}
.media-portrait.tall{aspect-ratio:4/5}

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}

/* ===== home-a.css (variant A overrides) ===== */
/* ============================================================
   HORDIGRIT v3 — Variant A "Helder & rustig"
   Koelst, veel lucht, minimaal kraft. Kalme asymmetrische hero.
   Bouwt op style.css; alleen de afwijkingen staan hier.
   ============================================================ */

/* meer lucht tussen secties */
.va .section{padding-block:clamp(3.4rem,8vw,6.5rem)}
.va .hero{padding-block:clamp(3rem,7vw,6rem)}

/* hero rustiger: copy iets ruimer, doorsnede kalm rechts */
.va .hero h1{font-size:clamp(2rem,1.55rem + 1.3vw,2.5rem)}
.va .hero-copy{max-width:34rem}

/* handgeschreven notitie boven de doorsnede (uit variant B overgenomen) */
.va .hero-media.cut{display:flex;flex-direction:column;align-items:center}
.va .hero-note{align-self:flex-end;font-family:var(--hand);font-weight:700;color:var(--rust);
  font-size:1.6rem;line-height:1.05;text-align:right;margin:0 1.2rem .3rem 0;transform:rotate(-2deg)}
@media(prefers-reduced-motion:reduce){.va .hero-note{transform:none}}

/* howto op de achtergrondkleur van de pot-illustratie (#f9ebd2, gesampled uit
   hordi-full.webp): het plaatje loopt naadloos in de band over. Solution blijft op de
   gewone achtergrond — de doorsnede-PNG is transparant en versmelt daar vanzelf. Zo
   blijven de secties gescheiden maar heeft elk beeld het opgaan-in-de-achtergrond-
   effect. Verving de groen-zachte tint waar Danny niet van hield (feedback 2026-08-05). */
.va .howto{background:#f9ebd2}
.va .howto .layers .n{color:var(--green)}

/* beeld-fit: portretfoto's netjes (punt 1) */
/* solution-beeld is sinds 2026-08-05 de doorsnede-illustratie met het handgeschreven
   notitie-tekstje (geruild met de hero, die nu de productfoto draagt). Zelfde zweef-
   behandeling als de hero-variant: geen kaart, geen crop, notitie rechtsboven. */
.split-media.cut{display:flex;flex-direction:column;align-items:center}
/* max-width 410: de doorsnede-PNG is 488px breed; groter tonen = opblazen = wazig
   (feedback 2026-08-05, ±80% van de eerdere 520) */
.split-media.cut img{background:none;border-radius:0;aspect-ratio:auto;object-fit:contain;
  max-width:410px;filter:drop-shadow(0 22px 30px #3a2a1733)}
/* max-width 380: de pot-illustratie is 482px breed; kolombreed tonen blies 'm op en
   maakte 'm wazig. NB: de oude max-height:600 begrensde 'm tóch al op ~480px breed,
   dus "80%" moet vanaf dáár rekenen (feedback 2026-08-05, tweede ronde) */
.va .howto figure img{aspect-ratio:4/5;object-fit:cover;max-height:475px;max-width:380px;
  margin-inline:auto;display:block}
/* teamfoto in een vierkant kader dat de plafondstrook van de beurshal wegsnijdt: de
   foto hangt ~26% groter in een overflow-crop, onderrand uitgelijnd, zodat alleen het
   onderste deel in beeld is — bestand zelf onbewerkt (feedback 2026-08-05) */
.va .about figure{position:relative;aspect-ratio:1/1;overflow:hidden;width:100%;
  border-radius:var(--radius-lg);max-width:440px;margin-inline:auto}
.va .about figure img{position:absolute;left:0;bottom:0;width:100%;height:140%;
  object-fit:cover;object-position:center bottom;aspect-ratio:auto;max-width:none;border-radius:0}

/* features rustiger (geen harde kaartrand, meer adem) */
.va .feature{background:transparent;border:0;padding:1rem .2rem}
.va .feature .badge{width:50px;height:50px}
.va .feature .badge-icon{width:64px;height:64px}

/* reviews iets luchtiger */
.va .review{background:#fefcf6}

/* fallback-template (index.php): cart/checkout/overige pagina's wat lucht geven */
.page-plain{padding-block:2.2rem 3.5rem}
.page-plain > h1{font-size:clamp(1.7rem,1.2rem + 1.6vw,2.3rem);margin:0 0 1.2rem}

/* ============================================================
   WooCommerce cart (klassieke shortcode) + checkout (blocks)
   naar A-stijl. Alles gescoped op de Woo body-classes: NIET op
   losse .cart/.button (zie het .cart-lek uit chat 70).
   ============================================================ */

/* --- notices (toegevoegd aan winkelwagen / lege winkelwagen / waardebon) --- */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info,
.woocommerce-cart .woocommerce-error{
  background:var(--green-soft);border:0;border-radius:var(--radius);
  color:var(--ink);font-family:var(--body);padding:1rem 1.3rem 1rem 3rem}
.woocommerce-cart .woocommerce-message::before,
.woocommerce-cart .woocommerce-info::before{color:var(--green);left:1.1rem;top:1.05rem}
.woocommerce-cart .woocommerce-error{background:#f7e3d8}
.woocommerce-cart .woocommerce-error::before{color:var(--rust);left:1.1rem;top:1.05rem}

/* --- knoppen: alle Woo-buttons als pill, checkout-knop als oranje CTA ---
   NB: Woo-core stylet met `.woocommerce a.button(.alt)`, dus hier a/button
   expliciet benoemen, anders wint Woo op specificiteit (paarse knop) */
.woocommerce-cart .woocommerce .button,
.woocommerce-cart .woocommerce a.button,
.woocommerce-cart .woocommerce button.button{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--disp);font-weight:700;font-size:.95rem;line-height:1.2;
  padding:.72rem 1.4rem;border-radius:999px;border:1.8px solid #26241d4d;
  background:var(--surface);color:var(--ink);cursor:pointer;
  transition:transform .2s,box-shadow .2s,border-color .2s,color .2s}
.woocommerce-cart .woocommerce .button:hover,
.woocommerce-cart .woocommerce a.button:hover,
.woocommerce-cart .woocommerce button.button:hover{
  transform:translateY(-2px);background:var(--surface);color:var(--green);
  border-color:var(--green);box-shadow:0 4px 14px #26241d1a}
.woocommerce-cart .woocommerce button.button:disabled,
.woocommerce-cart .woocommerce button.button:disabled:hover{
  transform:none;box-shadow:none;opacity:.45;background:var(--surface);color:var(--ink);border-color:#26241d2e;cursor:default}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button{
  width:100%;background:var(--accent);color:var(--accent-ink);border:0;
  padding:.95rem 1.8rem;font-size:1.04rem;box-shadow:0 6px 18px #e07b2c44}
.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover{
  background:var(--accent);color:var(--accent-ink);box-shadow:0 10px 24px #e07b2c55}

/* --- cart-tabel als kaart (zelfde toon als de vergelijkingstabel) --- */
.woocommerce-cart .shop_table.cart{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  border-collapse:separate;border-spacing:0;overflow:hidden}
.woocommerce-cart .shop_table.cart th,
.woocommerce-cart .shop_table.cart td{
  padding:.95rem 1rem;border:0;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.woocommerce-cart .shop_table.cart thead th{
  background:var(--green-soft);font-family:var(--disp);font-weight:700;font-size:.95rem}
.woocommerce-cart .shop_table.cart td.actions{border-bottom:0;background:var(--surface);padding:1rem}
.woocommerce-cart .shop_table.cart td.product-name a{font-family:var(--disp);font-weight:700}
.woocommerce-cart .shop_table.cart td.product-name a:hover{color:var(--green)}
.woocommerce-cart .shop_table.cart td.product-thumbnail img{
  width:64px;height:64px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}
.woocommerce-cart .shop_table.cart .product-remove a{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:999px;color:var(--ink-soft)!important;font-weight:400;transition:background .2s,color .2s}
.woocommerce-cart .shop_table.cart .product-remove a:hover{background:#f7e3d8;color:var(--rust)!important}
.woocommerce-cart .shop_table.cart .qty{
  width:4.2rem;padding:.5rem .3rem;text-align:center;font-family:var(--body);font-size:1rem;
  border:1.8px solid #26241d4d;border-radius:12px;background:#fff}
.woocommerce-cart .shop_table.cart .qty:focus{outline:none;border-color:var(--green)}

/* waardebon-veld naast de pill-knop */
.woocommerce-cart .shop_table.cart .coupon{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
.woocommerce-cart .shop_table.cart .coupon .input-text{
  width:12rem;padding:.66rem 1rem;border:1.8px solid #26241d4d;border-radius:999px;
  background:#fff;font-family:var(--body);font-size:.95rem}
.woocommerce-cart .shop_table.cart .coupon .input-text:focus{outline:none;border-color:var(--green)}

/* mobiel (Woo smallscreen stapelt de tabel <768px): coupon + knoppen full-width.
   Selectors spiegelen Woo's smallscreen-css (48%-floats), anders verliezen we op specificiteit */
@media(max-width:768px){
  .woocommerce-cart table.cart td.actions .coupon{display:grid;gap:.6rem}
  .woocommerce-cart table.cart td.actions .coupon .input-text,
  .woocommerce-cart table.cart td.actions .coupon .button{width:100%;float:none;margin:0}
  .woocommerce-cart table.cart td.actions .button{width:100%}
}

/* --- totalen-blok als kaart --- */
.woocommerce-cart .cart_totals{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem}
.woocommerce-cart .cart_totals h2{font-size:1.25rem;margin:0 0 .8rem}
.woocommerce-cart .cart_totals .shop_table{background:transparent;border:0}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{border:0;border-bottom:1px solid var(--line);padding:.7rem .2rem;text-align:left}
.woocommerce-cart .cart_totals tr:last-child th,
.woocommerce-cart .cart_totals tr:last-child td{border-bottom:0}
.woocommerce-cart .cart_totals .order-total .amount{font-family:var(--disp);font-size:1.15rem}
.woocommerce-cart .wc-proceed-to-checkout{padding:1rem 0 0}

/* lege winkelwagen: knop terug naar de PDP als ghost-pill */
.woocommerce-cart .return-to-shop .button{
  display:inline-flex;align-items:center;font-family:var(--disp);font-weight:700;
  padding:.78rem 1.5rem;border-radius:999px;border:1.8px solid #26241d4d;
  background:var(--surface);color:var(--ink);transition:transform .2s,border-color .2s,color .2s}
.woocommerce-cart .return-to-shop .button:hover{transform:translateY(-2px);border-color:var(--green);color:var(--green)}

/* --- checkout (Woo blocks): licht bijsturen, niet herbouwen --- */
.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-order-summary,
.woocommerce-checkout .wc-block-components-sidebar .wc-block-components-totals-wrapper{
  font-family:var(--body)}
.woocommerce-checkout .wc-block-components-button:not(.is-link){
  background:var(--accent);color:var(--accent-ink);border-radius:999px;border:0;
  font-family:var(--disp);font-weight:700;box-shadow:0 6px 18px #e07b2c44}
.woocommerce-checkout .wc-block-components-button:not(.is-link):hover{
  background:var(--accent);box-shadow:0 10px 24px #e07b2c55}
.woocommerce-checkout .wc-block-components-form .wc-block-components-text-input input[type],
.woocommerce-checkout .wc-block-components-text-input input,
.woocommerce-checkout .wc-block-components-combobox .components-combobox-control__input,
.woocommerce-checkout .wc-block-components-country-input select,
.woocommerce-checkout .wc-block-components-state-input select{border-radius:12px}
/* besteloverzicht-sidebar als kaart in A-stijl (binnenrand van het block weg: geen kaart-in-kaart) */
.woocommerce-checkout .wc-block-checkout__sidebar .wp-block-woocommerce-checkout-order-summary-block{border:0}
.woocommerce-checkout .wc-block-checkout__sidebar{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.2rem}
/* productnaam-kolom in het besteloverzicht kreeg 1 woord per regel; beschrijving is daar dubbelop */
.woocommerce-checkout .wc-block-components-order-summary-item__description .wc-block-components-product-metadata{display:none}
/* Elementor e-con (flex) + wc-blocks-checkout = fantoom-gat van ±724px tussen formulier en
   footer (mobiel): de checkout-DOM blaast de intrinsieke hoogte van het flex-item op
   (widget offsetHeight 2148 bij 1424px content, empirisch herleid). De e-cons zijn hier
   1-koloms wrappers; block rendert identiek maar meet de echte hoogte. Weg zodra
   Elementor van de checkout-pagina af is. */
.woocommerce-checkout .e-con,
.woocommerce-checkout .e-con-inner{display:block!important} /* !important: wint van Elementors .e-con-boxed .e-con-inner */

/* Hero-flow (hoe-werkt-het): op desktop het beeld 10px omhoog, zodat de bovenkant
   beter uitlijnt met de H1 en de onderkant met de CTA-rij. Transform en geen marge:
   .hero .wrap staat op align-items:center, dus een negatieve marge zou maar de helft
   opschuiven. Mobiel niet: daar staat het beeld in de kolomflow (regel hieronder). */
@media(min-width:880px){
  .hero-flow .hero-media{transform:translateY(-10px)}
}

/* Hero-flow (hoe-werkt-het): op mobiel het hero-beeld tussen de lead en de knoppen.
   display:contents tilt de hero-copy-kinderen naar de flex-container zodat order werkt;
   spacing komt uit de bestaande element-marges, dus gap:0 op de kolom - anders erft
   de flex-kolom de grid-gap van .hero .wrap (2-3.5rem tussen elk hero-element).
   align-items:stretch om dezelfde reden: .hero .wrap staat op center, en in een
   flex-kolom centreert dat elk kind op zijn eigen inhoudsbreedte - waardoor een
   korte alinea als "Jij blij. Plantje blij." gecentreerd tussen linkslijnende
   tekst stond. */
@media(max-width:879px){
  .hero-flow .wrap{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-flow .hero-copy{display:contents}
  .hero-flow .eyebrow{order:1}
  .hero-flow h1{order:2}
  .hero-flow .lead{order:3}
  .hero-flow .hero-media{order:4;margin-block:1.8rem .2rem}
  .hero-flow .cta-row{order:5}
  .hero-flow .hero-marks{order:6}
}

/* Blog-index (home.php) + losse post (single.php) */
.blog-title{font-size:clamp(1.8rem,1.2rem + 2.2vw,2.7rem)}
.post-grid{margin-top:.5rem}
.post-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.post-card .post-thumb img{aspect-ratio:16/10;object-fit:cover;width:100%}
.post-card .post-body{padding:1.2rem 1.3rem 1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.post-card time{font-size:.82rem;color:var(--ink-soft)}
.post-card h2{font-size:1.15rem;line-height:1.3;font-family:var(--disp);font-weight:800;letter-spacing:-.02em}
.post-card h2 a:hover{color:var(--green)}
.post-card p{font-size:.95rem;color:var(--ink-soft)}
.post-card .post-more{margin-top:auto;font-weight:700;color:var(--green)}
.pagination .nav-links{display:flex;gap:.4rem;justify-content:center;margin-top:2.4rem;flex-wrap:wrap}
.pagination .page-numbers{padding:.45rem .95rem;border:1px solid var(--line);border-radius:999px;background:var(--surface);font-weight:600}
.pagination .page-numbers.current{background:var(--green);color:#fff;border-color:var(--green)}
.pagination a.page-numbers:hover{border-color:var(--green);color:var(--green)}
/* Losse post (single.php): leeskolom in dezelfde maat als .read-solo (1,06rem/1,78 op
   66ch), plus een prose-basis voor content die uit de oude site komt. Wat daar aan
   rommel in zat wordt bij het renderen weggefilterd (functions.php). */
.post-wrap{max-width:760px}
.post-head{text-align:center}
.post-head h1{font-size:clamp(1.9rem,1.3rem + 2.2vw,2.5rem);margin-top:.4rem;text-wrap:balance}
.post-meta{margin-top:.8rem;font-size:.9rem;color:var(--ink-soft);display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.post-hero{margin-top:1.8rem}
.post-hero img{border-radius:var(--radius-lg);width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-content{margin-top:2rem;max-width:66ch;margin-inline:auto}
.post-content p,.post-content li{font-size:1.06rem;line-height:1.78;text-wrap:pretty}
.post-content p,.post-content ul,.post-content ol{margin-bottom:1.05em}
.post-content ul,.post-content ol{padding-left:1.3em}
.post-content li+li{margin-top:.35em}
.post-content h2{font-size:1.5rem;margin:1.8em 0 .5em}
.post-content h3{font-size:1.18rem;margin:1.7em 0 .4em}
.post-content h4{font-size:1.05rem;margin:1.4em 0 .3em}
.post-content b{font-weight:700}
.post-content hr{border:0;border-top:1px solid var(--line);margin:2rem 0}
.post-content a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.post-content a:hover{color:var(--green)}
.post-content figure{margin:1.6rem 0}
.post-content img{display:block;max-width:100%;height:auto;border-radius:var(--radius);margin-inline:auto}
.post-content figcaption{margin-top:.5rem;font-size:.88rem;color:var(--ink-soft);text-align:center}
.post-content blockquote{border-left:3px solid var(--green);padding-left:1rem;margin:1.4rem 0;color:var(--ink-soft)}
.post-content table{width:100%;border-collapse:collapse;margin:1.4rem 0;font-size:.95rem}
.post-content th,.post-content td{padding:.6rem .7rem;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.post-back{margin-top:1.4rem;font-weight:700}
.post-back a{color:var(--green-deep)}

/* Tekstlinks in Elementor-content: HG-groen i.p.v. Elementor-blauw.
   Bewust smal gescoped (tekst-widgets, accordion, post-content) zodat knoppen
   en widgets met eigen kleuren ongemoeid blijven. */
.elementor-widget-text-editor a:not(.elementor-button):not(.btn),
.elementor-tab-content a:not(.elementor-button),
.elementor-widget-theme-post-content a:not(.elementor-button){
  color:var(--green);text-decoration:underline;text-underline-offset:3px}

/* ============================================================
   ONS-VERHAAL / OVER ONS (Spoor A) — impeccable-ronde
   Zelfde zachtere behandeling als home (.va): meer lucht, features
   zonder harde kaartrand. Plus about-eigen componenten: een groen-
   drenched belofte-band, een verfijnde teamsectie en een matted
   frame voor de doorsnede-illustratie. Alles gescoped op .about-a.
   ============================================================ */
.about-a .section{padding-block:clamp(3.4rem,8vw,6rem)}

/* hero-foto (team op de beurs): iets ruimer frame, echte foto vult 'm */
.about-a .hero-media img{max-width:520px;aspect-ratio:5/4;object-fit:cover;object-position:center}
.about-a .hero-media .tag b{color:var(--green)}

/* founder-foto in het ontstaansverhaal: gezicht bovenaan houden */
.about-a .about img{object-position:center top}

/* hand-accent-quote binnen de verhaaltekst (los quote-blok vervalt) */
.about-a .story-quote{font-family:var(--hand);font-weight:700;color:var(--green-deep);
  font-size:clamp(1.7rem,1.1rem + 1.7vw,2.3rem);line-height:1.15;margin-top:1.5rem}
.about-a .story-quote-sub{font-size:.9rem;color:var(--ink-soft);font-weight:600;margin-top:.15rem}

/* doorsnede-illustratie als matted print (crème illustratie op wit frame,
   zodat 'ie niet als losse rechthoek op de kraft-band zweeft) */
.about-a .illo-frame{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:clamp(1rem,3vw,1.6rem);box-shadow:0 22px 44px #0000001c;max-width:440px;margin-inline:auto}
.about-a .illo-frame img{aspect-ratio:auto;object-fit:contain;max-width:100%;border-radius:12px;margin:0}

/* groen-drenched belofte-band: het merk-punt + kleurcontrast dat de pagina miste */
.about-a .promise{background:var(--green-deep);color:#e9f1e4}
.about-a .promise .wrap{max-width:60ch;margin-inline:auto;text-align:center}
.about-a .promise .hand{display:block;color:var(--mustard);
  font-size:clamp(1.9rem,1.2rem + 2.6vw,3rem);line-height:1.1;margin-bottom:.7rem}
.about-a .promise h2{color:#fff;font-size:clamp(1.7rem,1.2rem + 2vw,2.5rem)}
.about-a .promise p{opacity:.92;font-size:1.08rem;margin-top:.9rem;line-height:1.7}

/* waarden: transparant en luchtig (geen boxy kaarten) + benefit-regel */
/* .about-a .values/.value verplaatst naar het algemene .values-patroon onderaan dit
   bestand (moest vijf items aankunnen). Hier scoped laten zou de oude 4-koloms regel
   op specificiteit laten winnen. */
.about-a .value .benefit{display:block;margin-top:.5rem;font-weight:700;font-size:.86rem;color:var(--green)}

/* team: verfijnde kaarten met rol-label, links uitgelijnd, badge naast de naam */
.about-a .team{grid-template-columns:1fr}
@media(min-width:560px){.about-a .team{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.about-a .team{grid-template-columns:repeat(4,1fr)}}
.about-a .member{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:visible}
.about-a .member .m-body{padding:1.4rem 1.3rem}
.about-a .member .m-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem}
.about-a .member .badge-emoji{width:48px;height:48px;font-size:1.5rem;margin:0;flex:none}
.about-a .member h3{font-size:1.12rem;line-height:1.05;margin:0}
.about-a .member .role{display:block;margin-top:.15rem;font-size:.74rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;color:var(--green)}
.about-a .member p{font-size:.9rem;color:var(--ink-soft);margin:0;text-align:left}

/* bewijs-strook: WWK-kop + één review netjes gecentreerd */
.about-a .proof{max-width:560px;margin-inline:auto}

/* ============================================================
   v6-PATRONEN (2026-08-04)
   Zes herbruikbare blokken voor de uitgebreide v6-copy. Bouwt op de
   bestaande tokens; hier staan alleen de nieuwe patronen.

   1. .read     leeskolom voor lopende tekst (90-380 w)
   2. .reviews  reviewkaart die ongelijke quotes verdraagt
   3. .apply    twee toepassingen (twee problemen, geen keuzemenu)
   4. .doubts   bezwaarblok, visueel los van de SEO-FAQ
   5. .dosing   doseringsblok: antwoord eerst, verhaal daarna
   6. .values   waardenrij die vijf items aankan

   CADANS-BESLUIT: de home groeit naar 16 secties. Een .eyebrow boven
   elke sectie wordt dan behang. Nieuwe secties wisselen af tussen een
   .hand-notitie, een kale h2 en (spaarzaam) een eyebrow.
   ============================================================ */

/* ---------- 1. leeskolom ---------- */
/* Lopende tekst kreeg tot nu toe geen eigen behandeling. Vijf v6-blokken
   bestaan uit niets anders. Zonder maatvoering worden dat muren. */
.read-grid{display:grid;gap:clamp(1.3rem,3.5vw,2.4rem)}
@media(min-width:900px){
  /* smalle kopkolom: bij .82fr bleef er een holle linkerhelft over onder de kop */
  .read-grid{grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(2rem,4vw,3.2rem)}
  /* de kop blijft staan terwijl je het lange stuk leest */
  .read-side{position:sticky;top:5.5rem;align-self:start}
}
.read-side h2{font-size:clamp(1.7rem,1.1rem + 2vw,2.4rem);text-wrap:balance}
.read-note{display:block;margin-top:1rem;font-family:var(--hand);font-weight:700;
  color:var(--rust);font-size:1.5rem;line-height:1.15;
  transform:rotate(-1.5deg);transform-origin:left center}
/* 58ch, niet 64: de ch-eenheid rekent met de breedte van een "0" en die is breder dan
   de gemiddelde letter, dus 64ch gaf in de praktijk 77 tekens per regel. 58ch ~ 69. */
.read-body{max-width:58ch}
.read-body p{font-size:1.06rem;line-height:1.78;text-wrap:pretty}
.read-body p+p{margin-top:1.05em}
.read-body h3{font-size:1.18rem;margin-top:1.7em;margin-bottom:.35em}
.read-body h3:first-child{margin-top:0}
/* zonder zijkop: een gecentreerde kolom */
.read-solo{max-width:64ch;margin-inline:auto}
.read-solo p{font-size:1.06rem;line-height:1.78;text-wrap:pretty}
.read-solo p+p{margin-top:1.05em}

/* ---------- 2. reviewkaart met ongelijke quotes ---------- */
/* Quotes lopen van 6 tot 30 woorden. In een grid rekt de korte kaart mee met de
   lange en staat er een gat in. Meerkoloms-flow laat elke kaart zijn eigen hoogte
   houden; de rafelige onderkant leest als ritme in plaats van als fout. */
.reviews{columns:1;column-gap:1.1rem;display:block;grid-template-columns:none}
@media(min-width:680px){.reviews{columns:2}}
@media(min-width:980px){.reviews{columns:3}}
.review{break-inside:avoid;margin:0 0 1.1rem}
/* WWK-scoreblok op de plek van een reviewkaart (feedback 2026-08-05: badge uit de kop,
   samengevoegd met de derde kaartpositie) */
.review-wwk{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.8rem;text-align:center;padding:1.8rem 1.3rem}
.review-wwk img{max-height:36px;height:auto;width:auto;max-width:100%}
.review-wwk .lab{font-size:.88rem;font-weight:700;color:var(--ink-soft)}
.review .stars{font-size:1rem}
.review blockquote{margin:.7rem 0 0}
.review blockquote p{margin:0;font-size:1.03rem;line-height:1.6;text-wrap:pretty}
/* drie-delige bronregel: naam voorop, platform + datum eronder */
.review-meta{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line)}
.review-meta .name{display:block;font-family:var(--disp);font-weight:800;font-size:.98rem}
.review-src{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;
  margin-top:.15rem;font-size:.82rem;color:var(--ink-soft)}
.review-src .via{display:inline-flex;align-items:center;gap:.3rem;font-weight:600}
.review-src svg{width:13px;height:13px;stroke:var(--green-deep);stroke-width:3;fill:none}
.review-src .sep{opacity:.45}
/* scoreregel erboven, herhaalaankoop-regel eronder */
.reviews-score{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.7rem 1.6rem;margin-bottom:1.7rem;text-align:center}
.reviews-score .platform{display:inline-flex;align-items:baseline;gap:.4rem;
  font-size:.94rem;color:var(--ink-soft)}
.reviews-score .platform b{font-family:var(--disp);font-weight:800;font-size:1.22rem;color:var(--ink)}
.reviews-foot{display:flex;align-items:center;justify-content:center;gap:.5rem;
  margin-top:1.5rem;font-size:.92rem;color:var(--ink-soft);max-width:56ch;
  margin-inline:auto;text-align:center;text-wrap:balance}
.reviews-foot svg{width:17px;height:17px;flex:none;stroke:var(--green-deep);
  stroke-width:2;fill:none;margin-top:.2rem}

/* ---------- 3. twee toepassingen ---------- */
/* De belangrijkste inhoudelijke correctie van de copyronde: dit zijn twee dingen
   voor twee problemen, geen "kies er een". Daarom gestapeld en niet naast elkaar
   (naast elkaar = vergelijking = kiezen), met een probleemlabel boven elk blok
   en een slotregel die het expliciet maakt. Geen nummers: die lezen als stappen. */
/* align-items:start, niet center: het toplaag-blok heeft vier punten en dus een veel
   langere tekstkolom dan het beeld hoog is. Gecentreerd zweeft het beeld dan met een
   gat erboven en eronder. Bovenaan uitlijnen en meelopen leest als één blok. */
.apply{display:grid;gap:clamp(1.5rem,4vw,3rem);align-items:start;
  padding-block:clamp(1.8rem,4vw,2.8rem)}
.apply:first-of-type{padding-top:0}
.apply+.apply{border-top:1px solid var(--line)}
@media(min-width:860px){
  .apply{grid-template-columns:1fr 1fr}
  .apply-flip .apply-media{order:-1}
  .apply-media{position:sticky;top:5.5rem}
}
.apply-for{display:block;margin-bottom:.55rem;font-weight:700;font-size:.92rem;
  color:var(--rust-ink)}
.apply-head{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.apply-head img{width:52px;height:52px;flex:none}
.apply-head h3{margin:0;font-size:clamp(1.35rem,1rem + 1.4vw,1.85rem)}
.apply-copy>p{max-width:52ch;color:var(--ink-soft);font-size:1.02rem;line-height:1.7}
.apply-copy>p+p{margin-top:.8em}
.apply-media img{width:100%;border-radius:var(--radius-lg);object-fit:cover;
  aspect-ratio:4/3;background:var(--surface)}
.apply-points{margin:1.3rem 0 0}
.apply-points>div{padding:.85rem 0;border-top:1px solid var(--line)}
.apply-points>div:last-child{padding-bottom:0}
.apply-points dt{font-family:var(--disp);font-weight:700;font-size:1rem}
.apply-points dd{margin:.2rem 0 0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.apply-both{max-width:56ch;margin:clamp(1.6rem,4vw,2.4rem) auto 0;padding-top:1.4rem;
  border-top:1px solid var(--line);text-align:center;font-size:1.04rem;text-wrap:balance}

/* ---------- 4. bezwaarblok (niet de SEO-FAQ) ---------- */
/* Twee vraag-en-antwoordblokken op een pagina. Dit blok stelt gerust vlak voor de
   prijs: open, warm, twee kolommen, met een review als bewijs. De SEO-FAQ blijft
   een dichtgeklapte .acc op de gewone achtergrond. Zo lijken ze nergens op elkaar. */
.doubts{background:var(--green-soft);border-block:1px solid var(--line)}
/* Nette 2x2 met rijen die uitlijnen. De review stond eerst als kaart tússen de vragen
   in een kolomflow; dat propte de boel op elkaar (feedback Danny 2026-08-05). Het bewijs
   staat nu als eigen, gecentreerd blok onder het grid. */
.doubt-grid{display:grid;grid-template-columns:1fr;gap:2.4rem 3rem;align-items:start}
@media(min-width:820px){.doubt-grid{grid-template-columns:1fr 1fr}}
.doubt h3{font-size:1.16rem;line-height:1.28;text-wrap:balance}
.doubt>p{max-width:50ch;margin-top:.55rem;color:var(--ink-soft);font-size:1rem;line-height:1.7}
.doubt-proof{max-width:52ch;margin:clamp(2rem,4vw,2.8rem) auto 0;padding:1.15rem 1.35rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.doubt-proof blockquote{margin:0;font-size:.97rem;line-height:1.55;text-wrap:pretty}
/* de bronregel als één tekststroom in een span: los in een flex-container wordt elk
   los tekstknoopje een eigen flex-item en krijg je gaten rond de scheidingstekens */
.doubt-proof figcaption{display:flex;align-items:center;gap:.4rem;
  margin-top:.6rem;font-size:.8rem;color:var(--ink-soft)}
.doubt-proof figcaption b{color:var(--ink)}
.doubt-proof figcaption svg{width:13px;height:13px;stroke:var(--green-deep);stroke-width:3;fill:none}
/* Review als bewijs bij de bijpassende koopvraag (feedback 2026-08-05: eerder één losse
   review onder het grid, nu per vraag een passende quote). Zelfde kaartstijl als
   .doubt-proof, maar compacter en links uitgelijnd in de cel. */
.doubt-review{margin:1rem 0 0;padding:.9rem 1.1rem;max-width:50ch;
  background:#fefcf6;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 10px 24px #3a2a1710}
.doubt-review blockquote{margin:0;font-size:.92rem;line-height:1.55;text-wrap:pretty;color:var(--ink)}
.doubt-review figcaption{display:flex;align-items:center;gap:.4rem;
  margin-top:.55rem;font-size:.78rem;color:var(--ink-soft)}
.doubt-review figcaption b{color:var(--ink)}
.doubt-review figcaption svg{width:12px;height:12px;stroke:var(--green-deep);stroke-width:3;fill:none}
/* trust-afsluiter onder het vragenrooster: sterren (deelvulling ±4,2 van 5, het gemiddelde
   van WWK 8,5/10 en Trustpilot 4,1/5 — bewust geen cijfer erbij) + platformregel */
.doubt-trust{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;
  margin:clamp(1.9rem,4vw,2.6rem) auto 0;font-weight:600;font-size:.96rem;color:var(--ink-soft)}
.stars-avg{font-size:1.2rem;letter-spacing:.1em;line-height:1;
  background:linear-gradient(90deg,var(--mustard) 90%,#d9d2bf 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- 5. doseringsblok ---------- */
/* 352 woorden in vier lagen plus twee tabellen. "Hoeveel moet ik gebruiken" is de
   eerste vraag, dus die staat groot bovenaan; het verhaal eronder in de leeskolom. */
.dose-answer{display:grid;gap:1.2rem;align-items:center;margin-bottom:clamp(1.6rem,4vw,2.4rem)}
@media(min-width:760px){.dose-answer{grid-template-columns:.8fr 1.2fr;gap:2rem}}
.dose-figure{padding:clamp(1.4rem,3vw,2rem);text-align:center;background:var(--green-soft);
  border:1px solid var(--line);border-radius:var(--radius-lg)}
.dose-figure b{display:block;font-family:var(--disp);font-weight:900;color:var(--green-deep);
  font-size:clamp(3rem,2rem + 4vw,4.2rem);line-height:.95;letter-spacing:-.035em}
.dose-figure span{display:block;margin-top:.5rem;font-size:1rem;line-height:1.5}
.dose-figure em{display:block;margin-top:.45rem;font-style:normal;font-size:.88rem;color:var(--ink-soft)}
.dose td:last-child{font-family:var(--disp);font-weight:700;color:var(--green-deep)}
.dose-sub{margin:clamp(1.8rem,4vw,2.4rem) 0 .9rem;font-size:1.18rem}
/* vervanger van .note-flag: getinte kaart met icoon, geen gekleurde zijstreep */
.callout{display:flex;align-items:flex-start;gap:.8rem;max-width:64ch;margin-top:1.4rem;
  padding:1rem 1.25rem;background:var(--kraft);border-radius:var(--radius);
  font-size:.97rem;line-height:1.65}
.callout svg{width:20px;height:20px;flex:none;margin-top:.25rem;
  stroke:var(--rust-ink);stroke-width:2;fill:none}

/* ---------- 6. waardenrij voor vijf ---------- */
.values{display:grid;gap:1.8rem 1.4rem;grid-template-columns:1fr}
@media(min-width:520px){.values{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.values{grid-template-columns:repeat(5,1fr);gap:1.6rem 1.2rem}}
/* oneven aantal in twee kolommen: de laatste vult de rij i.p.v. te bungelen */
@media(min-width:520px) and (max-width:999px){
  .values>:last-child:nth-child(odd){grid-column:1/-1}
  /* wel de rij vullen, niet de regellengte: anders loopt dat ene item over de volle
     breedte terwijl de rest op halve breedte staat */
  .values>:last-child:nth-child(odd) p{max-width:46ch}
}
.value{padding:.2rem}
.value h3{margin:.85rem 0 .35rem;font-size:1.14rem;text-wrap:balance}
.value p{color:var(--ink-soft);font-size:.95rem}
@media(min-width:1000px){
  /* vijf smalle kolommen: badge en type een maat kleiner, anders wordt het te hoog */
  .value .badge{width:46px;height:46px}
  .value .badge svg{width:22px;height:22px}
  /* twee regels reserveren: anders zakt de body van het enige item met een lange titel
     ("Webshop op groene stroom") een regel lager dan de rest en staat de rij scheef */
  .value h3{font-size:1.05rem;min-height:2lh}
  .value p{font-size:.91rem}
}
.values-foot{max-width:52ch;margin:clamp(1.7rem,4vw,2.3rem) auto 0;
  text-align:center;color:var(--ink-soft)}

/* ---------- gedeeld ---------- */
/* de FAQ-accordeon moet een tabel kunnen dragen (PDP-antwoord "hoeveel potgrond") */
.acc .ac-body>*+*{margin-top:.8rem}
.acc .ac-body .dose{margin-top:.9rem}

@media(prefers-reduced-motion:reduce){
  .read-note{transform:none}
}

/* ---------- toetsenbordfocus (2026-08-04) ----------
   Het thema had alleen een focusstijl op de skip-link. Alles wat je met tab bereikt
   (knoppen, nav, FAQ-accordeons op drie paginas, betaalopties) leunde op de standaard
   browserring, en die verdwijnt onder de eigen achtergronden. :focus-visible, dus de
   ring komt alleen bij toetsenbordgebruik en niet bij een muisklik. */
:where(a,button,summary,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--green-deep);outline-offset:3px;border-radius:4px}
.btn:focus-visible,.acc summary:focus-visible{outline-offset:4px}
/* op de donkere vlakken (productband, wortel-test, belofte, footer) is groen onzichtbaar */
section.product :focus-visible,.test :focus-visible,
.about-a .promise :focus-visible,.site-footer :focus-visible{outline-color:var(--mustard)}

/* ---------- footer: wettelijk blok (2026-08-04) ----------
   Stond er niet in en is voor een webshop verplichte informatie. Structuur van de live
   site aangehouden (juridisch ín de merkkolom, niet als losse rij eronder), maar met de
   typografie van het nieuwe thema. Als dl, want het zijn label/waarde-paren. */
@media(min-width:760px){.foot-grid{grid-template-columns:1.6fr 1fr 1fr 1fr}}
/* Elk gegeven op een eigen regel, alles links uitgelijnd: "KvK: 74234811". Géén tweede
   kolom voor de waarden — dat gaf een tab-effect dat er raar uitzag (feedback 2026-08-05). */
.foot-legal{display:flex;flex-direction:column;gap:.35rem;
  margin:1.1rem 0 .6rem;font-size:.84rem;line-height:1.45;color:#d7e3d2}
.foot-legal>div{display:flex;flex-wrap:wrap;gap:0 .4rem}
.foot-legal dt{font-weight:700;color:#fff;opacity:.85}
.foot-legal dt::after{content:":"}
.foot-legal dd{margin:0}
.foot-legal a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.foot-legal a:hover{color:#fff}
.foot-btw{font-size:.84rem;color:#d7e3d2;opacity:.8;margin:0 0 1rem}
.foot-legal a:hover{color:#fff}

/* ---------- home v6: nieuwe blokken (2026-08-04) ---------- */

/* Het emotionele scharnier. Eerste opzet was gecentreerde tekst op de gewone
   achtergrond: dat zweefde tussen twee volle secties zonder anker (feedback 2026-08-05).
   Nu een kraft-band met de handgeschreven kantelzin op ware grootte als visueel anker,
   en een klantquote ernaast als afloop van het verhaal. */
.hinge{background:var(--kraft)}
/* Desktop: de slotalinea ("Bij planten die steeds achteruitgaan…") staat rechts ónder de
   reviewkaart en de kaart lijnt boven uit met de kop, zodat beide kolommen ongeveer even
   hoog eindigen (feedback Danny 2026-08-05). Mobiel blijft de leesvolgorde: kop, alinea's,
   kantelzin, slotalinea, kaart. */
.hinge .wrap{display:grid;gap:clamp(1.8rem,4vw,3.2rem);align-items:start}
@media(min-width:900px){
  .hinge .wrap{grid-template-columns:1.1fr .9fr;grid-template-areas:"copy quote" "copy after";row-gap:1.7rem}
  .hinge-copy{grid-area:copy}
  .hinge-quote{grid-area:quote}
  .hinge-after{grid-area:after}
}
.hinge h2{font-size:clamp(1.6rem,1.3rem + .8vw,1.9rem);text-wrap:balance;max-width:30ch}
.hinge-copy p,.hinge-after{margin-top:1.1rem;color:var(--ink-soft);font-size:1.06rem;
  line-height:1.75;max-width:50ch;text-wrap:pretty}
.hinge-after{margin-top:0}
/* De kantelzin. Stond eerst klein, in drie rafelige regels en licht gedraaid: dan weegt
   hij even zwaar als de bodytekst en leest hij als een derde alinea in plaats van als
   accent (feedback 2026-08-05). Nu op pull-quote-formaat, twee regels, recht, met lucht
   erboven en eronder zodat de onderbreking bedoeld lijkt. */
/* Caveat heeft een lage x-hoogte: op dezelfde px-maat oogt hij een slag kleiner dan
   Gabarito. Vandaar dat deze regel groter staat dan de h2 en toch niet schreeuwt. */
.hinge-copy .hinge-beat{font-family:var(--hand);font-weight:700;color:var(--rust);
  font-size:clamp(1.75rem,1.3rem + 1.2vw,2.2rem);line-height:1.15;
  margin:1.9rem 0 .4rem;max-width:26ch;text-wrap:balance}
/* de quote als afloop: groter en rustiger dan de kaarten in de reviewsectie,
   zodat het als bewijs leest en niet als een losse review die hier verdwaald is */
.hinge-quote{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(1.5rem,3vw,2.1rem)}
.hinge-quote .stars{color:var(--mustard);letter-spacing:.1em;font-size:1.05rem}
.hinge-quote blockquote{margin:.9rem 0 0}
.hinge-quote blockquote p{margin:0;font-size:1.14rem;line-height:1.55;
  color:var(--ink);text-wrap:pretty}
@media(prefers-reduced-motion:reduce){.hinge-copy .hinge-beat{transform:none}}

/* de drie mechanismen onder de split: zelfde dt/dd-typografie als .apply-points,
   maar naast elkaar i.p.v. gestapeld */
.mech{display:grid;gap:0 2.2rem;grid-template-columns:1fr}
@media(min-width:760px){.mech{grid-template-columns:repeat(3,1fr)}}
.mech>div{padding:1rem 0 0;border-top:1px solid var(--line)}
@media(max-width:759px){.mech>div{padding-bottom:1rem}}

/* vinkjes in de donkere productband: merkgroen op groen-deep is onleesbaar */
section.product .usp-list svg{stroke:var(--mustard)}
section.product .usp-list{margin:1.2rem 0 .4rem}

/* nieuwsbrief met voornaam erbij. Drie elementen op een flex-rij passen net niet in de
   formulierkolom, waardoor de knop scheef onder het eerste veld viel. Als grid: de twee
   velden naast elkaar, de knop over de volle breedte eronder. */
.news form{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.news input{min-width:0}
.news form .btn{grid-column:1/-1;justify-content:center}
@media(max-width:519px){.news form{grid-template-columns:1fr}}

/* ---------- home v6: twee toepassingen als één teaser (2026-08-05) ----------
   De uitgeschreven twee-secties-versie nam het werk van /horticultural-grit/ over.
   Terug naar één teaser met de .layers-vorm, maar met de stempel-iconen in plaats van
   de cijfers 1 en 2: nummers lezen als stappen, en dit zijn geen stappen. */
/* 64px: zelfde maat als de feature-iconen in "Herken je dit" (feedback 2026-08-05) */
.layers .layer-ic{width:64px;height:64px;flex:none;margin-top:.1rem}
.layers li:has(.layer-ic){gap:1rem}
.layers li:has(.layer-ic) b{font-family:var(--disp);font-size:1.05rem;margin-bottom:.15rem}
/* de doorsnede-illustratie is transparant en staand: geen crop naar 4/5 zoals de foto's,
   maar op ware verhouding met wat lucht eromheen */
.howto-illo img{aspect-ratio:auto;object-fit:contain;max-width:440px;max-height:none;
  margin-inline:auto;border-radius:0}
.va .howto figure.howto-illo img{aspect-ratio:auto;object-fit:contain;max-height:none}
/* bezwaarblok op de gewone bodem, voor pagina's waar de sectie erboven al groen-zacht is */
.doubts.on-bg{background:var(--bg);border-block-color:transparent}

/* ---------- .tl — plakboek-tijdlijn (over-ons v6, 2026-08-06) ----------
   Gestippelde middenlijn als getekende route, polaroid-fotokaarten om-en-om licht
   gedraaid (trekken recht bij hover), handgeschreven momentlabels in Caveat.
   Mobiel: lijn naar links, alles gestapeld. Rotaties uit bij reduced-motion. */
.tl{position:relative;max-width:880px;margin-inline:auto;padding-block:.5rem}
.tl::before{content:"";position:absolute;left:50%;top:2.2rem;bottom:2.2rem;
  border-left:2px dashed var(--kraft-2);transform:translateX(-1px)}
.tl-item{position:relative;display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(1.8rem,5vw,3.6rem);padding-block:clamp(1.5rem,3.5vw,2.4rem);align-items:center}
.tl-item::before{content:"";position:absolute;left:50%;top:50%;width:15px;height:15px;
  border-radius:50%;background:var(--green);border:3.5px solid var(--bg);
  transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px var(--kraft-2)}
/* om-en-om: foto links/rechts wisselt, tekst spiegelt mee */
.tl-item:nth-child(even) .tl-media{order:2}
.tl-item:nth-child(even) .tl-copy{order:1;justify-self:end;text-align:right}
.tl-item:nth-child(even) .tl-copy p:not(.tl-when){margin-left:auto}
/* polaroid: witte rand, zachte schaduw, kleine rotatie die per kant wisselt */
.tl-media{margin:0;background:#fefcf6;padding:.65rem .65rem 0;border:1px solid var(--line);
  border-radius:6px;box-shadow:0 10px 26px #0000001c;max-width:380px;justify-self:end;
  transform:rotate(-1.8deg);transition:transform .3s cubic-bezier(.22,1,.36,1)}
.tl-item:nth-child(even) .tl-media{justify-self:start;transform:rotate(1.4deg)}
.tl-item:hover .tl-media{transform:rotate(0)}
.tl-media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:3px}
.tl-media figcaption{font-family:var(--hand);font-weight:700;font-size:1.15rem;
  color:var(--rust);text-align:center;padding:.5rem .3rem .6rem;transform:rotate(-.6deg)}
.tl-when{font-family:var(--hand);font-weight:700;font-size:1.25rem;color:var(--green-deep)}
.tl-copy h3{font-size:1.3rem;margin-top:.15rem}
.tl-copy p:not(.tl-when){color:var(--ink-soft);margin-top:.5rem;max-width:34ch;line-height:1.65}
@media(max-width:759px){
  .tl::before{left:9px;top:1.2rem;bottom:1.2rem;transform:none}
  .tl-item{grid-template-columns:1fr;gap:1rem;padding-left:2.2rem;padding-block:1.4rem}
  .tl-item::before{left:9px;top:1.9rem;transform:translate(-50%,0)}
  .tl-item:nth-child(even) .tl-media{order:0;justify-self:start}
  .tl-item:nth-child(even) .tl-copy{order:0;justify-self:start;text-align:left}
  .tl-item:nth-child(even) .tl-copy p:not(.tl-when){margin-left:0}
  .tl-media{justify-self:start;max-width:340px;transform:rotate(-1.2deg)}
  .tl-item:nth-child(even) .tl-media{transform:rotate(1deg)}
}
@media(prefers-reduced-motion:reduce){
  .tl-media,.tl-item:nth-child(even) .tl-media,.tl-item:hover .tl-media{transform:none;transition:none}
  .tl-media figcaption{transform:none}
}

/* Klantenservice (page-klantenservice.php) + retourbeleid (page-retourbeleid.php) */
.contact-grid{display:grid;gap:1rem;margin-top:1.8rem}
@media(min-width:560px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{display:flex;flex-direction:column;gap:.2rem;padding:1.2rem 1.4rem;background:#fefcf6;border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 6px 18px -14px rgba(38,36,29,.35);transition:transform .15s,border-color .15s}
.contact-card:hover{transform:translateY(-2px);border-color:var(--green)}
.contact-label{font-size:.82rem;color:var(--ink-soft);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.contact-value{font-family:var(--disp);font-weight:700;font-size:1.15rem;color:var(--green-deep)}
.info-grid{display:grid;gap:2rem}
@media(min-width:680px){.info-grid{grid-template-columns:1fr 1fr}}
.info-grid h3,.review-note h3{font-size:1.05rem;margin-bottom:.6rem}
.info-grid p+p{margin-top:.7rem}
.link-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:.45rem}
.link-list a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.review-note{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line);max-width:64ch}
.review-note p{color:var(--ink-soft);font-size:.95rem;line-height:1.7}
.review-note a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.legal{margin-top:2rem}
.legal h2{font-size:1.35rem;margin:1.8em 0 .5em}
.legal h2:first-child{margin-top:0}
.legal a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}
.legal a.btn{color:#fff;text-decoration:none}
.page-links a{color:var(--green-deep);text-decoration:underline;text-underline-offset:3px}