/* ==========================================================================
   components.css — Kiddykado (kk)
   Every UI component from the three "Naamstudio" concepts (home, shop, PDP),
   de-duplicated. Class names are taken over 1:1 from the concepts.
   Loaded AFTER typography.css. NO !important in this layer — never fight
   specificity here; corrections belong in mobile-fixes.css.

   Conventions used throughout:
   - fixed/sticky layers use the --z-* tokens from global.css
   - sticky offsets use var(--kk-hdr-real, 86px) (JS measures the real header)
   - every :hover rule sits in @media (hover:hover) and (pointer:fine)
   - images with aspect-ratio also get height:auto, because WordPress prints
     width/height attributes on <img> which otherwise win over aspect-ratio
   ========================================================================== */


/* ==========================================================================
   1. HEADER
   ========================================================================== */
header.site{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(243,245,238,.88);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(34,38,28,.07);
}
/* WordPress admin bar is 32px and fixed from 783px up. */
body.admin-bar header.site{top:32px}

.hbar{display:flex;align-items:center;gap:18px;padding:12px 0}
.hbar .logo{flex:none}
.hbar .logo img{height:54px;width:auto;object-fit:contain}

.zoek{
  flex:1;display:flex;align-items:center;gap:10px;
  background:#fff;border:1.5px solid rgba(34,38,28,.1);
  border-radius:999px;padding:9px 18px;max-width:420px;
  color:#7a7f70;font-size:14px;
}
.zoek svg{flex:none}
.zoek input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;color:var(--tekst)}
.zoek button{border:0;background:none;cursor:pointer;color:inherit;display:flex;align-items:center}

.hnav{display:flex;gap:18px;font-size:14px;font-weight:600}
.hnav a{padding:6px 2px;border-bottom:2px solid transparent;transition:border-color .2s}
.hnav .sale,
.hnav .kk-sale{color:var(--sale-diep)}

.hicons{display:flex;gap:8px;margin-left:auto}
.hicons a{
  width:40px;height:40px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(34,38,28,.1);transition:transform .2s, background .2s;
}
.hicons .telbol{
  position:absolute;transform:translate(14px,-14px);
  background:var(--goud);color:var(--tekst);border-radius:999px;
  min-width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:800;padding:0 5px;
}
@media(max-width:860px){.hnav{display:none}}

@media (hover:hover) and (pointer:fine){
  .hnav a:hover{border-color:var(--groen)}
  .hicons a:hover{transform:translateY(-2px);background:var(--goud);border-color:var(--goud)}
}


/* ==========================================================================
   2. SEARCH OVERLAY (mobile / expanded search)
   Top offset is measured live by JS into --kk-hdr-real; nothing is hardcoded.
   ========================================================================== */
.kk-search-overlay{
  position:fixed;left:0;right:0;top:var(--kk-hdr-real,78px);
  z-index:var(--z-overlay);
  background:#fff;
  border-bottom:1px solid rgba(34,38,28,.1);
  box-shadow:0 14px 34px rgba(34,38,28,.14);
  padding:14px 0 18px;
  max-height:calc(100vh - var(--kk-hdr-real,78px));
  max-height:calc(100dvh - var(--kk-hdr-real,78px));
  overflow:auto;overscroll-behavior:contain;
}
/* A [hidden] overlay must be gone, not just invisible — otherwise it keeps
   swallowing taps across the whole viewport. */
.kk-search-overlay[hidden]{display:none}
.kk-search-overlay .zoek{max-width:none;width:100%;display:flex}
.kk-search-overlay .resultaten{margin-top:12px;display:flex;flex-direction:column;gap:2px}


/* ==========================================================================
   3. USP-STRIP (inverted surface)
   ========================================================================== */
.usps{
  display:flex;justify-content:center;flex-wrap:wrap;gap:8px 26px;
  padding:9px 20px;background:var(--donker);color:#EDF1E4;font-size:12.5px;font-weight:500;
}
.usps span{display:flex;align-items:center;gap:7px;white-space:nowrap}
.usps svg{flex:none}
@media(max-width:700px){.usps span:nth-child(n+3){display:none}}


/* ==========================================================================
   4. BREADCRUMB
   ========================================================================== */
.kruimel{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-size:13px;color:#7a8069;padding:18px 0 4px;font-weight:500;
}
.kruimel a{font-weight:600;border-bottom:1px solid transparent;transition:border-color .2s}
.kruimel svg{flex:none;opacity:.6}
.kruimel b,
.kruimel .hier{color:var(--tekst);font-weight:600}
@media (hover:hover) and (pointer:fine){
  .kruimel a:hover{border-color:var(--groen);color:var(--groen)}
}


/* ==========================================================================
   5. HERO — three category cards (home)
   ========================================================================== */
.hero3{padding:clamp(22px,3vw,40px) 0 clamp(4px,1vw,10px)}
.hero3-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.7vw,22px);align-items:stretch;
}
.h3-kaart{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius);box-shadow:var(--schaduw);
  background:var(--donker);color:#fff;
  min-height:clamp(320px,34vw,440px);
  display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .25s ease, box-shadow .25s ease;
}
.h3-kaart>img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.h3-kaart::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    rgba(28,34,20,.84) 0%, rgba(28,34,20,.46) 46%, rgba(28,34,20,.06) 80%);
}
.h3-binn{
  position:relative;z-index:2;
  padding:clamp(20px,2.2vw,28px);
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
}
.h3-chip{
  background:var(--goud);color:var(--tekst);
  font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:12.5px;
  border-radius:999px;padding:5px 14px;margin-bottom:5px;
}
.h3-chip.groen{background:var(--groen);color:#fff}
.h3-chip.wit{background:rgba(255,255,255,.92);color:var(--tekst)}
.h3-kaart h2{
  font-size:clamp(22px,2.2vw,30px);font-weight:800;color:#fff;
  text-shadow:0 2px 20px rgba(18,22,12,.38);
}
.h3-kaart p{
  font-size:14.5px;color:rgba(255,255,255,.92);max-width:30ch;
  text-shadow:0 1px 12px rgba(18,22,12,.32);
}
.h3-cta{
  display:inline-flex;align-items:center;gap:9px;
  background:var(--wit);color:var(--donker);
  font-size:15px;
  border-radius:999px;padding:12px 24px;margin-top:10px;
  transition:background .2s,color .2s,transform .15s;
}
@media (hover:hover) and (pointer:fine){
  .h3-kaart:hover{transform:translateY(-3px);box-shadow:var(--schaduw-hover)}
  .h3-kaart:hover>img{transform:scale(1.04)}
  .h3-kaart:hover .h3-cta{background:var(--goud);color:#241f10;transform:translateX(2px)}
}
@media(max-width:1080px){
  .hero3-grid{grid-template-columns:repeat(2,1fr)}
  .h3-kaart{min-height:clamp(280px,40vw,380px)}
  .h3-kaart:first-child{grid-column:span 2;min-height:clamp(300px,32vw,360px)}
}
@media(max-width:640px){
  .hero3-grid{grid-template-columns:1fr}
  .h3-kaart,.h3-kaart:first-child{grid-column:auto;min-height:clamp(250px,58vw,330px)}
}


/* ==========================================================================
   6. CATEGORY HERO (shop)
   ========================================================================== */
.cathero{padding:22px 0 8px}
.cathero h1{font-size:clamp(32px,4.6vw,52px);font-weight:800}
.cathero h1 em{font-style:normal;color:var(--groen);position:relative;isolation:isolate}
.cathero h1 em::after{
  content:"";position:absolute;left:0;right:0;bottom:4px;height:.34em;
  background:rgba(232,163,61,.35);z-index:-1;border-radius:4px;
}
.cathero p.sub{margin:14px 0 16px;font-size:16px;color:#4c5243;max-width:62ch}
.trustregel{
  display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;
  padding:8px 20px 8px 10px;box-shadow:var(--schaduw);margin-bottom:20px;
}
.trustregel .bol{
  width:38px;height:38px;border-radius:50%;background:var(--goud);
  display:flex;align-items:center;justify-content:center;
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:14px;
  color:var(--tekst);
}
.trustregel .sterren{display:flex;gap:2px}
.trustregel small{font-size:12.5px;color:#8a9078;font-weight:600}
@media(max-width:760px){
  .cathero{padding:14px 0 4px}
  .cathero p.sub{font-size:15px;margin:10px 0 14px}
  .trustregel{margin-bottom:14px;padding:6px 16px 6px 6px;gap:9px}
  .trustregel .bol{width:32px;height:32px;font-size:13px}
}


/* ==========================================================================
   7. CATEGORY NAV (home)
   ========================================================================== */
.catnav{padding:clamp(34px,4.4vw,58px) 0 clamp(2px,1vw,10px)}
.catnav .cn-kop{font-size:clamp(21px,2.6vw,28px);font-weight:800;margin-bottom:5px}
.catnav .cn-sub{color:#5b6150;font-size:15px;margin-bottom:22px}
.catnav-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.catkaart{
  background:var(--bg);border-radius:var(--radius-s);
  padding:24px 14px 20px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:9px;
  border:1.5px solid transparent;transition:border-color .2s,background .2s;
}
.catkaart .ico{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--groen)}
.catkaart .ico svg{width:30px;height:30px}
.catkaart h3{font-size:15px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.catkaart .aantal{font-size:12.5px;color:#7a8069;font-weight:600}
@media (hover:hover) and (pointer:fine){
  .catkaart:hover{background:#fff;border-color:rgba(34,38,28,.16)}
}
@media(max-width:1080px){.catnav-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){
  .catnav-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .catkaart{padding:18px 10px 15px}
  .catkaart h3{font-size:14px}
  .catkaart .ico svg{width:26px;height:26px}
}


/* ==========================================================================
   8. PRODUCT SLIDER (shared)
   ========================================================================== */
.slider{position:relative;width:100vw;margin-left:calc(50% - 50vw)}
.sl-track{
  display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding:2px clamp(20px,4vw,56px) 18px;scroll-padding:0 clamp(20px,4vw,56px);
  scrollbar-width:none;-ms-overflow-style:none;
}
.slider .sl-track::-webkit-scrollbar,
.sl-track::-webkit-scrollbar{display:none;width:0;height:0}
.sl-track .pkaart{flex:0 0 clamp(240px,21vw,300px);scroll-snap-align:start}
.sl-pijl{
  position:absolute;top:calc(50% - 9px);transform:translateY(-50%);z-index:5;
  width:46px;height:46px;border-radius:50%;background:#fff;color:var(--tekst);
  border:1.5px solid rgba(34,38,28,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .2s,border-color .2s,opacity .2s,transform .2s;
}
.sl-pijl.prev{left:14px}
.sl-pijl.next{right:14px}
.sl-pijl[disabled]{opacity:0;pointer-events:none}
.sl-pijl:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .sl-pijl:hover{background:var(--goud);border-color:var(--goud)}
}
@media(max-width:980px){
  .sl-track .pkaart{flex-basis:41vw}
}
@media(max-width:640px){
  .sl-track .pkaart{flex-basis:72vw}
  .sl-pijl{display:none}
  .sl-track{padding-bottom:14px}
}


/* ==========================================================================
   9. SECTION PADDINGS (home)
   ========================================================================== */
.populair{padding:clamp(14px,2vw,28px) 0 0}
.bento-sec{padding:clamp(46px,6vw,82px) 0 10px}
.stappen{padding:clamp(54px,7vw,98px) 0 clamp(16px,2vw,26px)}
.bestsellers{padding:clamp(50px,6.5vw,90px) 0 10px}
.sale-sec{padding:clamp(50px,6.5vw,90px) 0 10px}


/* ==========================================================================
   10. BENTO (home)
   ========================================================================== */
.bento{
  display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:minmax(150px,auto);
}
.tegel{
  border-radius:var(--radius);overflow:hidden;position:relative;
  background:#fff;box-shadow:var(--schaduw);
  transition:transform .25s ease, box-shadow .25s ease;
  display:flex;flex-direction:column;
}
.tegel .binn{padding:24px;position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.tegel p{overflow-wrap:anywhere}
@media (hover:hover) and (pointer:fine){
  a.tegel:hover{box-shadow:var(--schaduw-hover)}
}

.t-badcape{grid-column:span 2;grid-row:span 2}
.t-badcape img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.t-badcape .overlay{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(34,38,28,.62) 0%,rgba(34,38,28,0) 55%);
}
.t-badcape .binn{justify-content:flex-end;color:#fff}
.t-badcape .chip-verkocht{
  align-self:flex-start;background:var(--goud);color:var(--tekst);
  font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 14px;margin-bottom:10px;
}
.t-badcape h3{font-size:26px;font-weight:800}
.t-badcape .prijs{font-size:17px;font-weight:700;margin-top:4px}

.t-review{background:var(--goud)}
.t-review .binn{justify-content:center;align-items:flex-start;gap:2px}
.t-review .cijfer{font-family:'Figtree',system-ui,sans-serif;font-size:44px;font-weight:800;line-height:1}
.t-review .sterren{display:flex;gap:2px;margin:6px 0 4px}
.t-review small{font-size:13px;font-weight:600;color:rgba(34,38,28,.75)}

.t-sale{background:var(--sale);color:#fff}
.t-sale .binn{justify-content:space-between}
.t-sale .salepill{
  align-self:flex-start;background:var(--sale-zacht);color:var(--sale-diep);
  font-size:12px;font-weight:800;border-radius:999px;padding:4px 12px;letter-spacing:.05em;
}
.t-sale h3{font-size:17px;font-weight:700;margin-top:8px}
.t-sale .prijzen{display:flex;align-items:baseline;gap:9px;margin-top:4px}
.t-sale .nu{font-family:'Figtree',system-ui,sans-serif;font-size:26px;font-weight:800}
.t-sale .was{text-decoration:line-through;opacity:.75;font-size:14px}
.t-sale .meer{font-size:12.5px;font-weight:600;opacity:.9;margin-top:6px}

.t-atelier{grid-column:span 2;background:var(--donker);color:#EDF1E4}
.t-atelier .binn{flex-direction:row;align-items:center;gap:22px}
.t-atelier .txt h3{font-size:22px;font-weight:800;color:#fff}
.t-atelier .txt p{font-size:13.5px;margin-top:6px;color:rgba(237,241,228,.85);max-width:34ch}
.t-atelier .foto{
  flex:none;width:118px;height:118px;border-radius:50%;overflow:hidden;
  border:4px solid rgba(232,163,61,.9);
}
.t-atelier .foto img{width:100%;height:100%;object-fit:cover}
.t-atelier .stiksel{
  position:absolute;inset:10px;border:1.5px dashed rgba(237,241,228,.28);
  border-radius:18px;pointer-events:none;
}

.t-pakket{grid-column:span 4;grid-row:span 2;background:var(--bg)}
.t-pakket .binn{flex-direction:row;align-items:center;gap:clamp(22px,3.4vw,44px);padding:clamp(24px,3vw,38px)}
.t-pakket .foto{flex:none;width:clamp(150px,19vw,236px);height:clamp(150px,19vw,236px);border-radius:22px;overflow:hidden;background:#fff}
.t-pakket .foto img{width:100%;height:100%;object-fit:cover}
.t-pakket .pak-pill{
  display:inline-block;background:var(--groen);color:#fff;font-size:12px;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:5px 14px;margin-bottom:12px;
}
.t-pakket h3{font-size:clamp(24px,3vw,34px);font-weight:800;line-height:1.12;letter-spacing:-.01em}
.t-pakket p{font-size:15.5px;color:#5b6150;margin-top:10px;max-width:48ch;line-height:1.5}
.t-pakket .pak-usp{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:16px}
.t-pakket .pak-usp span{font-size:13.5px;font-weight:600;color:#3d4433;display:flex;align-items:center;gap:7px}
.t-pakket .pak-usp svg{color:var(--groen);flex:none}
.t-pakket .vanaf{
  margin-top:20px;display:inline-flex;align-items:center;gap:10px;
  background:var(--goud);color:var(--tekst);font-weight:800;font-size:15.5px;
  border-radius:999px;padding:14px 28px;transition:background .2s,transform .2s;
}
@media (hover:hover) and (pointer:fine){
  a.t-pakket:hover .vanaf{background:#d8922f;transform:translateX(3px)}
}
@media(max-width:980px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(145px,auto)}
  .t-badcape{grid-column:span 2}
  .t-atelier{grid-column:span 2}
  .t-pakket{grid-column:span 2;grid-row:span 2}
}
@media(max-width:640px){
  .t-pakket{grid-row:auto}
  .t-pakket .binn{flex-direction:column;align-items:flex-start;gap:18px}
  .t-pakket .foto{width:132px;height:132px}
  .t-pakket p{font-size:14.5px}
  .t-pakket .vanaf{padding:12px 22px;font-size:15px}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr;grid-auto-rows:auto}
  .t-badcape,.t-atelier,.t-pakket{grid-column:span 1}
  .t-badcape{min-height:340px}
  .tegel{min-height:140px}
}

/* Tegel 5 + 6 (kraampakket · cadeauzoeker) delen de rij: desktop naast elkaar,
   tablet/mobiel onder elkaar (span 2 van 2 kolommen, of 1 van 1). */
.t-pakket.t-half{grid-column:span 2}
.t-half .binn{gap:clamp(18px,2vw,28px);padding:clamp(22px,2.4vw,32px)}
.t-half .foto{width:clamp(118px,11vw,168px);height:clamp(118px,11vw,168px)}
.t-half h3{font-size:clamp(22px,2.2vw,28px)}
.t-half p{font-size:15px}
.t-half .pak-usp{gap:8px 16px}
.t-half .vanaf{padding:13px 24px;font-size:15px}
@media(max-width:560px){
  .t-pakket.t-half{grid-column:span 1}
}

/* Asymmetrische onderrij (desktop + laptop, vanaf 981px): het raster gaat naar
   12 kolommen zodat cadeaumand (7/12 ≈ 58%) en cadeauzoeker (5/12 ≈ 42%) niet
   twee gelijke blokken zijn. De bovenste tegels houden exact hun oude
   verhouding (6+3+3 = 2+1+1 van 4). Tablet/mobiel (≤980px) blijft onder elkaar. */
@media(min-width:981px){
  .bento{grid-template-columns:repeat(12,1fr)}
  .t-badcape,.t-atelier{grid-column:span 6}
  .t-review,.t-sale{grid-column:span 3}
  .t-pakket{grid-column:span 12}
  .t-pakket.t-half.t-pakket{grid-column:span 7}
  .t-pakket.t-half.t-zoeker{grid-column:span 5}
  .t-half.t-pakket .foto{width:clamp(150px,15vw,214px);height:clamp(150px,15vw,214px);transform:rotate(-2deg)}
  /* Smalle tegel: foto als scheef polaroidje bovenaan, tekst eronder. */
  .t-half.t-zoeker .binn{flex-direction:column;align-items:flex-start;gap:18px}
  .t-half.t-zoeker .foto{width:104px;height:104px;border-radius:16px}
  .t-half.t-zoeker .pak-txt{width:100%}
}

/* Cadeauzoeker: heel licht roze #F8EAED (verzoek Sylvia, 14-10-2026, 2e
   ronde: #EBC6CE was te roze). Zelfde lichtheid als het oude blauw #E8F0F5;
   familie van het washi-tape-streepje boven stap 1 in "Zo werkt het"
   (#EBC6CE, dat blijft zo). Deco-cirkel #F1D8DE en hover-ring volgen dezelfde
   verhouding als vroeger bij het blauw (#D6E5EF). Accenten in een donker mauve
   (#8C5862) en een iets donkerder tekstgrijs houden alles goed leesbaar
   (wit op pill ~5.5:1, bodytekst ~5.4:1). Was: blauw #E8F0F5 / #4E7089. */
.t-zoeker{background:#F8EAED;box-shadow:0 0 0 1px rgba(140,88,98,.22)}
.t-zoeker p{color:#4a4f41}
.t-zoeker::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  width:clamp(160px,18vw,240px);aspect-ratio:1;right:-48px;bottom:-56px;border-radius:50%;
  background:radial-gradient(circle at 8px 8px,rgba(255,255,255,.75) 2.4px,transparent 3px) 0 0/16px 16px,#F1D8DE;
}
.t-zoeker .pak-pill{background:#8C5862}
.t-zoeker .pak-usp svg{color:#8C5862}
.t-half .foto{border:5px solid #fff;box-shadow:0 6px 18px rgba(34,38,28,.10);transition:transform .3s ease}
.t-half.t-zoeker .foto{transform:rotate(3deg)}
@media (hover:hover) and (pointer:fine){
  a.t-half:hover .foto{transform:rotate(0deg) scale(1.03)}
  a.t-zoeker:hover{box-shadow:0 0 0 1px rgba(140,88,98,.40)}
}
@media (prefers-reduced-motion:reduce){
  .t-half .foto{transition:none}
}

/* Cadeauzoeker: grotere foto (verzoek Sylvia, 14-10-2026). De foto was een
   klein polaroidje van ~105px; nu vult hij een flink deel van de tegel, in
   dezelfde scheve-polaroidstijl (witte rand, schaduw, 3deg).
   Desktop/laptop (>=981px): foto zweeft rechtsboven, pill + titel + tekst
   lopen er links omheen; de vinkjes en de knop staan eronder over de volle
   breedte (clear), zodat er nooit iets overlapt. */
@media(min-width:981px){
  .t-half.t-zoeker .binn{display:flow-root}
  .t-half.t-zoeker .foto{
    float:right;width:clamp(150px,46%,240px);height:auto;aspect-ratio:1;
    margin:4px 2px 16px clamp(14px,1.6vw,22px);
  }
  .t-half.t-zoeker .pak-txt{width:auto}
  .t-half.t-zoeker .pak-usp{clear:both;padding-top:4px}
}
/* Tablet (641-980px): tegel over de volle breedte, foto links naast de tekst. */
@media(min-width:641px) and (max-width:980px){
  .t-half.t-zoeker .foto{width:clamp(170px,26vw,230px);height:clamp(170px,26vw,230px)}
}
/* Mobiel (<=640px): foto bovenaan, groot (ca. 60% van de tegelbreedte). */
@media(max-width:640px){
  .t-half.t-zoeker .foto{width:min(62%,230px);height:auto;aspect-ratio:1}
}


/* ==========================================================================
   11. "ZO WERKT HET" — sticky notes (home)
   ========================================================================== */
.stappen .kopblok{text-align:center;margin-bottom:clamp(38px,4.8vw,58px)}
.stappen .sec-kop{color:var(--groen);margin-bottom:10px}
.stappen .sec-sub{margin:0 auto;max-width:52ch}
.stap-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.8vw,38px);max-width:1020px;margin:0 auto;
}
.stap{
  position:relative;background:var(--note);
  padding:56px 26px 38px;text-align:center;
  border-radius:3px 3px 14px 3px;
  transform:rotate(var(--kantel,0deg));
  transition:transform .3s ease;
}
.stap:nth-child(1){--note:#F3F5EE;--ink:#A9737C;--kantel:-1.6deg;
  --tape:radial-gradient(circle at 6px 6px,rgba(255,255,255,.9) 2px,transparent 2.6px) 0 0/12px 12px,#EBC6CE}
.stap:nth-child(2){--note:#F3F5EE;--ink:#6B7F4E;--kantel:.9deg;
  --tape:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,rgba(255,255,255,.6) 0 6px,transparent 6px 12px),#DFCFA8}
.stap:nth-child(3){--note:#F3F5EE;--ink:#5F819C;--kantel:-1deg;
  --tape:radial-gradient(circle at 6px 6px,rgba(255,255,255,.9) 2px,transparent 2.6px) 0 0/12px 12px,#BCD3E2}
.stap::before{
  content:'';position:absolute;top:-14px;left:50%;
  transform:translateX(-50%) rotate(-2.4deg);
  width:clamp(86px,9vw,116px);height:30px;background:var(--tape);
  border-radius:1px;
}
.stap:nth-child(2)::before{transform:translateX(-50%) rotate(1.8deg)}
.stap::after{
  content:'';position:absolute;right:0;bottom:0;width:26px;height:26px;
  background:rgba(34,38,28,.06);border-radius:0 0 14px 0;
  clip-path:polygon(100% 0,100% 100%,0 100%);
}
.stap .nr{
  width:46px;height:46px;border-radius:50%;background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  font-family:'Figtree',system-ui,sans-serif;font-size:21px;font-weight:800;line-height:1;
}
.stap .ico{display:block;color:var(--ink);margin-bottom:16px}
.stap .ico svg{width:44px;height:44px}
.stap h3{font-size:clamp(17px,1.6vw,20px);font-weight:800;color:var(--ink);margin-bottom:8px}
.stap p{font-size:14.5px;line-height:1.62;color:#4f5548;max-width:27ch;margin:0 auto}
@media (hover:hover) and (pointer:fine){
  .stap:hover{transform:rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.stap,.stap:hover{transition:none}}
@media(max-width:820px){
  .stap-grid{grid-template-columns:1fr;max-width:420px;gap:26px}
  .stap{padding:50px 24px 34px}
  .stap:nth-child(1){--kantel:-1deg}
  .stap:nth-child(2){--kantel:.7deg}
  .stap:nth-child(3){--kantel:-.7deg}
}


/* ==========================================================================
   12. PRODUCT CARD (.pkaart) — single source of truth
   ========================================================================== */
.pkaart{
  background:#fff;border-radius:var(--radius-s);overflow:hidden;box-shadow:var(--schaduw);
  transition:transform .25s, box-shadow .25s;display:flex;flex-direction:column;
}
.pkaart .foto{position:relative;background:#F7F8F3;overflow:hidden}
.pkaart .foto img{width:100%;aspect-ratio:1/1;object-fit:cover}
.pkaart .info{padding:15px 17px 18px;display:flex;flex-direction:column;gap:5px;flex:1;min-width:0}
.pkaart h3{font-size:14.5px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.pkaart .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.pkaart .prijs{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:16.5px}
.pkaart .prijs small{font-size:11px;font-weight:600;color:#8a9078;font-family:'Inter',sans-serif}
.pkaart .was,
.pkaart .prijs .was{font-size:12px;color:#a3a89a;text-decoration:line-through;font-weight:600;font-family:'Inter',sans-serif;margin-left:5px}
.pkaart .foto .sbadge{
  position:absolute;top:12px;left:12px;background:var(--sale);color:#fff;
  font-size:11.5px;font-weight:800;border-radius:999px;padding:4px 11px;letter-spacing:.04em;
}
/* Stock line inside a card (the buybox variant lives in the PDP section). */
.pkaart .voorraad{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:#5b6150}
.pkaart .voorraad .stip{width:8px;height:8px;border-radius:50%;background:#4CAF50;flex:none;box-shadow:0 0 0 3px rgba(76,175,80,.18)}
/* Niet op voorraad: oranje bolletje. kk_product_card() zet hier al .uit op,
   maar er stond geen regel tegenover — vandaar het groene stipje bij
   "Tijdelijk uitverkocht". Groen blijft voorbehouden aan op-voorraad. */
.pkaart .voorraad.uit .stip{background:var(--oranje);box-shadow:0 0 0 3px var(--oranje-ring)}
.pkaart .voorraad.uit{color:var(--oranje-tekst)}

.badge{
  position:absolute;top:10px;left:10px;z-index:4;border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.04em;padding:5px 12px;
  display:inline-flex;align-items:center;gap:5px;
}
.badge svg{flex:none}
.badge.best{background:var(--goud);color:var(--tekst)}
.badge.sale{background:var(--sale);color:#fff}
.badge.sale + .badge.best{top:44px}

/* Hover CTA. It lives inside .foto, so it can never cover the title.
   On touch devices it is removed entirely (the whole card is a link anyway). */
.kaart-cta{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:5;
  background:var(--groen);color:#fff;border-radius:999px;padding:9px 16px;
  font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:13.5px;
  display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .22s, transform .22s;
  pointer-events:none;
}
/* Keyboard focus must reveal it too — deliberately outside the hover query. */
.pkaart:focus-visible .kaart-cta,
.pkaart:focus-within .kaart-cta{opacity:1;transform:translateY(0)}
@media (hover:hover) and (pointer:fine){
  .pkaart:hover{box-shadow:var(--schaduw-hover)}
  .pkaart:hover .kaart-cta{opacity:1;transform:translateY(0)}
}
@media(hover:none){.kaart-cta{display:none}}

/* Favorietenhartje. Tot nu toe stond er geen enkele regel tegenover deze knop,
   dus tekende de browser zijn eigen knopstijl: een grijs blokje onderin .foto,
   in de normale flow onder de afbeelding. Vandaar de plaatsing hier, in
   dezelfde laag als de badge en de CTA — binnen .foto, zodat hij nooit over de
   titel kan vallen. Rechtsboven, want linksboven zitten de badges al. */
.kk-wish{
  position:absolute;top:10px;right:10px;z-index:6;
  width:34px;height:34px;padding:0;flex:none;
  -webkit-appearance:none;appearance:none;
  border:1.5px solid rgba(34,38,28,.10);border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--tekst);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 2px 8px rgba(34,38,28,.12);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .18s, color .18s, border-color .18s, transform .18s;
}
.kk-wish svg{width:16px;height:16px;flex:none;display:block}
.kk-wish:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.kk-wish:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .kk-wish:hover{background:#fff;border-color:var(--sale);color:var(--sale);transform:scale(1.08)}
}
/* Bewaard. De fill komt uit CSS en verslaat daarmee het fill="none" dat als
   presentatie-attribuut op de <svg> van kk_icon() staat. */
.kk-wish.is-on{background:#fff;border-color:var(--sale);color:var(--sale)}
.kk-wish.is-on svg{fill:currentColor}
@keyframes kaartIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pkaart.popin{animation:kaartIn .25s ease}


/* ==========================================================================
   13. SALE SLIDER (home)
   ========================================================================== */
.sale-sec .oppill{
  display:inline-flex;align-items:center;gap:8px;background:var(--sale);color:#fff;
  font-size:12px;font-weight:800;border-radius:999px;padding:5px 14px;letter-spacing:.05em;
  margin-bottom:12px;
}
.sale-sec .bs-alle{color:var(--sale-diep)}
@media (hover:hover) and (pointer:fine){
  .sale-sec .bs-alle:hover{border-color:var(--sale)}
}


/* ==========================================================================
   14. REVIEWS
   Three layouts share the .reviews wrapper: the home "wall" (.muur), the shop
   grid (.rev-grid) and the PDP band (.rev-flex). :has() picks the right
   padding; browsers without :has() simply keep the base value.
   ========================================================================== */
.reviews{padding:56px 0 20px}
.reviews:has(.muur){padding:clamp(54px,7vw,94px) 0 clamp(26px,3vw,42px)}
.reviews:has(.rev-flex){padding:40px 0 8px}
.reviews .sec-sub{margin-bottom:30px}

.rev-badge{
  display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;
  padding:10px 22px 10px 14px;box-shadow:var(--schaduw);margin-bottom:26px;
}
.rev-badge .bol{
  width:44px;height:44px;border-radius:50%;background:var(--goud);
  display:flex;align-items:center;justify-content:center;
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:15px;color:var(--tekst);
}
.rev-badge div p{font-size:13px;font-weight:700}
.rev-badge div small{font-size:12px;color:#8a9078;font-weight:500}

.rev-kop{text-align:center;margin-bottom:clamp(38px,5vw,60px)}
.rev-kop .sec-sub{margin:0 auto;max-width:52ch}

/* -- home: certificate + notes on a wall -- */
.muur{display:grid;grid-template-columns:340px 1fr;gap:clamp(30px,4.5vw,60px);align-items:start}
.certificaat{
  position:relative;background:var(--bg);border-radius:var(--radius);
  box-shadow:var(--schaduw);padding:30px 26px 28px;text-align:center;
}
.certificaat .label{
  display:inline-flex;align-items:center;gap:6px;background:var(--groen);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:999px;margin-bottom:18px;
}
.certificaat .cijfer{
  display:block;font-family:'Figtree',system-ui,sans-serif;font-weight:800;
  font-size:clamp(50px,6vw,66px);color:var(--groen);line-height:1;letter-spacing:-.02em;
}
.certificaat .cijfer small{font-size:20px;font-weight:700;color:#9aa38c;letter-spacing:0}
.certificaat .sterren{display:flex;justify-content:center;gap:3px;margin:14px 0 18px}
.certificaat p{
  font-size:13.5px;color:#8a9078;font-weight:500;line-height:1.5;
  border-top:1px solid rgba(34,38,28,.10);padding-top:16px;
}
.certificaat p b{display:block;color:var(--tekst);font-size:15px;font-weight:700;margin-bottom:2px}

.briefjes{display:grid;gap:24px}
.briefje{
  position:relative;background:#fff;border-radius:6px;padding:24px 26px 20px;
  box-shadow:var(--schaduw);max-width:600px;
}
.briefje:nth-child(odd){transform:rotate(-.7deg)}
.briefje:nth-child(even){transform:rotate(.8deg);margin-left:auto}
.briefje::before{
  content:"";position:absolute;top:-11px;left:50%;
  transform:translateX(-50%) rotate(-2deg);
  width:96px;height:24px;background:rgba(232,163,61,.38);border-radius:2px;
}
.briefje footer{
  display:flex;align-items:center;gap:8px;margin-top:14px;
  font-size:13px;font-weight:500;color:#8a9078;
}
.briefje footer b{color:var(--tekst);font-weight:700}
.briefje footer .vink{color:var(--groen);flex:none}
.briefje footer time{margin-left:auto;white-space:nowrap}
@media(max-width:900px){
  .muur{grid-template-columns:1fr;gap:60px}
  .certificaat{max-width:340px;margin:0 auto}
  .briefje{max-width:none}
  .briefje:nth-child(even){margin-left:0}
  .briefje blockquote{font-size:15px}
  .briefje footer{flex-wrap:wrap;row-gap:4px}
  .briefje footer time{margin-left:0;width:100%}
}

/* -- shop + PDP: review cards -- */
.rev-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.rkaart{
  background:#fff;border-radius:var(--radius);padding:26px;box-shadow:var(--schaduw);
  display:flex;flex-direction:column;gap:12px;transition:transform .25s;
}
.rkaart .sterren{display:flex;gap:2px}
.rkaart blockquote{font-size:15px;font-weight:500;line-height:1.5;flex:1}
.rkaart .wie{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:#8a9078;font-weight:600}
.rkaart .wie b{color:var(--tekst)}
@media (hover:hover) and (pointer:fine){
  .rkaart:hover{box-shadow:var(--schaduw-hover)}
}
@media(max-width:820px){.rev-grid{grid-template-columns:1fr}}

/* -- PDP review band -- */
.rev-flex{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:stretch}
.rev-flex .rkaart{padding:24px}
.rev-flex .rkaart blockquote{font-size:14.5px}
.scorekaart{
  background:var(--goud);border-radius:var(--radius);padding:26px;
  display:flex;flex-direction:column;justify-content:center;gap:4px;color:var(--tekst);
}
.scorekaart .cijfer{font-family:'Figtree',system-ui,sans-serif;font-size:52px;font-weight:800;line-height:1}
.scorekaart .sterren{display:flex;gap:2px;margin:6px 0 4px}
.scorekaart small{font-size:13px;font-weight:600;color:rgba(34,38,28,.75)}
@media(max-width:920px){
  .rev-flex{grid-template-columns:1fr}
  .rev-flex .rev-grid{grid-template-columns:1fr}
}


/* ==========================================================================
   15. SHOP LAYOUT — sidebar + grid
   ========================================================================== */
.shop{padding:22px 0 10px}
.shoplayout{display:block}
.shopmain{min-width:0}
.fsidebar{display:none}
@media(min-width:1024px){
  .shoplayout{display:grid;grid-template-columns:272px minmax(0,1fr);gap:28px;align-items:start}
  .fsidebar{
    display:block;position:sticky;
    top:calc(var(--kk-hdr-real,86px) + 8px);
    max-height:calc(100vh - var(--kk-hdr-real,86px) - 28px);
    overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
    padding:2px 6px 20px 2px;
  }
}


/* ==========================================================================
   16. FILTER BLOCKS
   ========================================================================== */
.fblok{background:#fff;border-radius:var(--radius-s);box-shadow:var(--schaduw);margin-bottom:14px;overflow:hidden}
.fblok summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:15px;
}
.fblok summary::-webkit-details-marker{display:none}
.fblok summary .pijl{flex:none;color:#8a9078;transition:transform .2s}
.fblok[open] summary .pijl{transform:rotate(180deg)}
.fblok summary:focus-visible{outline:2px solid var(--groen);outline-offset:-2px;border-radius:14px}
.fblok .finhoud{padding:2px 18px 16px;display:flex;flex-direction:column;gap:1px}
.fblok select{
  width:100%;border:1.5px solid rgba(34,38,28,.12);border-radius:12px;background:#fff;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--tekst);
  padding:9px 12px;cursor:pointer;outline:none;
}
.fblok select:focus-visible{border-color:var(--groen);outline:2px solid var(--groen);outline-offset:1px}

/* custom checkboxes */
.fopt{position:relative;display:flex;align-items:center;gap:10px;padding:6px 2px;font-size:13.5px;font-weight:500;cursor:pointer;border-radius:8px}
.fopt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fopt .box{
  width:20px;height:20px;flex:none;border:1.5px solid rgba(34,38,28,.28);border-radius:6px;background:#fff;
  display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s;
}
.fopt .box svg{opacity:0;transform:scale(.6);transition:opacity .15s,transform .15s}
.fopt input:checked ~ .box{background:var(--groen);border-color:var(--groen)}
.fopt input:checked ~ .box svg{opacity:1;transform:scale(1)}
.fopt input:focus-visible ~ .box{outline:2px solid var(--groen);outline-offset:2px}
.fopt .swatch{width:14px;height:14px;border-radius:50%;flex:none;border:1px solid rgba(34,38,28,.2)}
.fopt .ftekst{flex:1;min-width:0}
.fopt small{color:#8a9078;font-weight:600;font-size:12px}
.fopt.dim{opacity:.4}
.fopt.extra{display:none}
.finhoud.open .fopt.extra{display:flex}
@media (hover:hover) and (pointer:fine){
  .fopt:hover .box{border-color:var(--groen)}
}

.toonmeer{
  border:0;background:none;cursor:pointer;color:var(--groen);
  font-family:'Inter',sans-serif;font-weight:700;font-size:13px;
  padding:8px 2px 2px;text-align:left;display:inline-flex;align-items:center;gap:6px;
}
.toonmeer:focus-visible{outline:2px solid var(--groen);outline-offset:2px;border-radius:6px}
.toonmeer .pijl{transition:transform .2s}
.finhoud.open .toonmeer .pijl{transform:rotate(180deg)}

/* dual-range price slider */
.prange{position:relative;height:26px;margin:10px 2px 2px}
.prange .rail{position:absolute;left:0;right:0;top:11px;height:4px;border-radius:3px;background:rgba(34,38,28,.12)}
.prange .vulling{position:absolute;top:11px;height:4px;border-radius:3px;background:var(--groen)}
.prange input[type=range]{position:absolute;left:0;top:0;width:100%;height:26px;background:none;-webkit-appearance:none;appearance:none;pointer-events:none;margin:0}
.prange .js-rmax{z-index:4}
.prange input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#fff;border:2.5px solid var(--groen);cursor:pointer;pointer-events:auto}
.prange input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:#fff;border:2.5px solid var(--groen);cursor:pointer;pointer-events:auto}
.prange input[type=range]:focus-visible{outline:none}
.prange input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--groen);outline-offset:2px}
.prange input[type=range]:focus-visible::-moz-range-thumb{outline:2px solid var(--groen);outline-offset:2px}
.prijsvelden{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;color:#5b6150;font-weight:600}
.prijsvelden .veld{flex:1;min-width:0;display:flex;align-items:center;gap:4px;background:#F7F8F3;border:1.5px solid rgba(34,38,28,.12);border-radius:10px;padding:6px 10px}
.prijsvelden .veld:focus-within{border-color:var(--groen)}
.prijsvelden input{width:100%;border:0;outline:0;background:none;font:inherit;font-weight:600;color:var(--tekst);-moz-appearance:textfield;appearance:textfield}
.prijsvelden input::-webkit-outer-spin-button,
.prijsvelden input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}


/* ==========================================================================
   17. TOOLBAR + FILTER CHIPS
   ========================================================================== */
.toolbar{padding:2px 0 16px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.toolbar .aantal{font-size:14px;font-weight:700}
.toolbar .aantal small{font-weight:600;color:#8a9078}
.toolbar .lijn{flex:1;height:1.5px;background:rgba(34,38,28,.08);border-radius:2px;min-width:20px}
.sorteer{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#5b6150}
.sorteer select{
  border:1.5px solid rgba(34,38,28,.12);border-radius:999px;background:#fff;
  font-family:'Inter',sans-serif;font-size:13.5px;font-weight:600;color:var(--tekst);
  padding:8px 14px;cursor:pointer;outline:none;
}
.sorteer select:focus{border-color:var(--groen)}
.fchips{display:flex;gap:8px;flex-wrap:wrap;width:100%}
.fchip{
  border:1.5px solid rgba(34,38,28,.12);background:#fff;border-radius:999px;
  padding:8px 18px;font-family:'Inter',sans-serif;font-size:13px;font-weight:600;color:var(--tekst);
  cursor:pointer;transition:background .2s,border-color .2s,color .2s;
  display:inline-flex;align-items:center;gap:7px;
}
.fchip svg{flex:none}
.fchip.actief{background:var(--groen);border-color:var(--groen);color:#fff}
.fchip:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .fchip:hover{border-color:var(--groen)}
}
.actiefbalk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;width:100%}
.actiefbalk[hidden]{display:none}
.wisalles{
  border:0;background:none;cursor:pointer;font-family:'Inter',sans-serif;
  font-size:13px;font-weight:700;color:var(--rood);padding:6px 4px;
  border-bottom:1.5px solid rgba(208,69,62,.35);
}
.wisalles:focus-visible{outline:2px solid var(--rood);outline-offset:2px;border-radius:4px}


/* ==========================================================================
   18. PRODUCT GRID (shop)
   ========================================================================== */
.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.shop-grid .pkaart .info{padding-bottom:16px}
@media(max-width:700px){.shop-grid{grid-template-columns:repeat(2,1fr);gap:12px}}


/* ==========================================================================
   19. TRUSTBAND (inverted, inside the grid)
   ========================================================================== */
.trustband{
  grid-column:1/-1;background:var(--donker);color:#EDF1E4;border-radius:var(--radius-s);
  display:flex;justify-content:space-around;align-items:center;gap:14px;flex-wrap:wrap;
  padding:18px 22px;position:relative;
}
.trustband .stiksel{position:absolute;inset:8px;border:1.5px dashed rgba(237,241,228,.28);border-radius:12px;pointer-events:none}
.trustband span{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600}
.trustband svg{flex:none;color:var(--goud)}
@media(max-width:700px){.trustband{flex-direction:column;align-items:flex-start;gap:10px}}


/* ==========================================================================
   20. EMPTY STATE
   ========================================================================== */
.leeg{
  grid-column:1/-1;background:#fff;border-radius:var(--radius-s);box-shadow:var(--schaduw);
  padding:34px 26px;text-align:center;display:none;
}
.leeg.zichtbaar{display:block}
.leeg h3{font-size:19px;font-weight:800;margin-bottom:8px}
.leeg p{font-size:14.5px;color:#5b6150;margin-bottom:18px}
.leeg .leegacties{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
.leeg .knopje{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--groen);color:#fff;font-size:14px;
  border-radius:999px;padding:12px 24px;transition:background .2s;
}
.leeg .knopje.licht{background:#fff;color:var(--tekst);border:1.5px solid rgba(34,38,28,.15)}
.leeg .knopje:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .leeg .knopje:hover{background:var(--donker)}
  .leeg .knopje.licht:hover{background:var(--bg)}
}


/* ==========================================================================
   21. LOAD MORE
   ========================================================================== */
.meerladen{padding:30px 0 8px;text-align:center}
.meerladen a.knop{
  display:inline-flex;align-items:center;gap:10px;background:var(--groen);color:#fff;
  font-size:16px;border-radius:999px;padding:15px 34px;
  transition:background .2s, transform .15s;
}
.meerladen .hint{margin-top:12px;font-size:13px;color:#69705c;display:flex;align-items:center;justify-content:center;gap:7px}
@media (hover:hover) and (pointer:fine){
  .meerladen a.knop:hover{background:var(--donker);transform:translateY(-2px)}
}


/* ==========================================================================
   22. SEO BLOCK (typography lives in typography.css)
   ========================================================================== */
.seoblok{padding:50px 0 8px}
.seoblok .kader{background:#fff;border-radius:var(--radius);padding:34px;box-shadow:var(--schaduw)}
@media(max-width:640px){.seoblok .kader{padding:24px 20px}}


/* ==========================================================================
   23. PAYMENT ROW
   ========================================================================== */
.betaalrij{padding:34px 0 0;text-align:center}
.betaalrij p{font-size:13px;font-weight:600;color:#69705c;margin-bottom:12px}
.betaalrij .pills{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.betaalrij .pills span{
  background:#fff;border:1.5px solid rgba(34,38,28,.1);
  border-radius:10px;padding:7px 16px;font-size:12.5px;font-weight:700;
}


/* ==========================================================================
   24. MOBILE FILTER BAR + BOTTOM SHEET
   Visibility below 1023px is handled in mobile-fixes.css together with the
   body padding it needs.
   ========================================================================== */
.mobar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-mobar);display:none;
  background:rgba(243,245,238,.94);backdrop-filter:blur(12px);
  border-top:1px solid rgba(34,38,28,.1);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  gap:10px;
}
.mobar button{
  flex:1;border:0;cursor:pointer;background:var(--tekst);color:#fff;
  font-size:14.5px;border-radius:999px;padding:13px 18px;
  display:flex;align-items:center;justify-content:center;gap:9px;
}
.mobar button:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.mobar .telrestje{flex:none;display:flex;align-items:center;font-size:12.5px;font-weight:600;color:#5b6150}
.fbadge{
  background:var(--goud);color:var(--tekst);border-radius:999px;min-width:20px;height:20px;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:800;padding:0 6px;
}
.fbadge[hidden]{display:none}

.sheetlaag{
  position:fixed;inset:0;z-index:var(--z-backdrop);background:rgba(34,38,28,.45);
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.sheetlaag.open{opacity:1;pointer-events:auto}
.sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-sheet);background:#fff;
  border-radius:22px 22px 0 0;padding:16px 0 0;
  transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
  box-shadow:0 -14px 40px rgba(34,38,28,.25);
  display:flex;flex-direction:column;max-height:86vh;max-height:86dvh;
}
.sheet.open{transform:translateY(0)}
.sheet .greep{width:44px;height:5px;border-radius:3px;background:rgba(34,38,28,.15);margin:0 auto 14px;flex:none}
.sheet h3{font-size:18px;font-weight:800;margin-bottom:14px}
.sheet .sheetscroll{overflow:auto;overscroll-behavior:contain;padding:0 20px 8px;flex:1;min-height:0;-webkit-overflow-scrolling:touch}
.sheet .fblok{box-shadow:none;border:1.5px solid rgba(34,38,28,.1);margin-bottom:12px}
.sheet .klaarwrap{flex:none;padding:12px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid rgba(34,38,28,.08);background:#fff}
.sheet .klaar{
  border:0;cursor:pointer;background:var(--groen);color:#fff;
  font-size:15.5px;border-radius:999px;padding:14px;
}
.sheet .klaar:focus-visible{outline:2px solid var(--groen);outline-offset:2px}

/* Full-width buttons use min-width, not width: as a flex item `width:100%`
   still gets shrunk by flex-shrink, `min-width:100%` does not.
   .atc keeps flex:1 on purpose — it shares its row with the quantity field. */
.sheet .klaar,
.kk-btn--vol,
a.knop.kk-btn--vol{min-width:100%}


/* ==========================================================================
   25. PDP — layout + gallery
   ========================================================================== */
.pdp{display:grid;grid-template-columns:1.02fr 1fr;gap:34px;padding:16px 0 30px;align-items:start}
@media(max-width:920px){.pdp{grid-template-columns:1fr}}

.gal-main{position:relative;border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--schaduw)}
.gal-main img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gal-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.gal-thumbs button{
  border:2px solid transparent;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#fff;padding:0;width:86px;box-shadow:var(--schaduw);transition:border-color .2s;
}
.gal-thumbs button.actief{border-color:var(--groen)}
.gal-thumbs button:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.gal-thumbs img{width:100%;aspect-ratio:1/1;object-fit:cover}
.gal-hint{margin-top:12px;font-size:13px;color:#69705c;display:flex;align-items:center;gap:8px}
.gal-hint svg{flex:none;color:var(--groen)}
@media (hover:hover) and (pointer:fine){
  .gal-thumbs button:hover{border-color:var(--groen)}
}


/* ==========================================================================
   26. PDP — buybox
   ========================================================================== */
.buybox{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--schaduw)}
.buybox h1{font-size:clamp(26px,3vw,34px);font-weight:800}
.scoreregel{display:flex;align-items:center;gap:9px;margin-top:10px;font-size:13px;color:#5b6150;font-weight:500;flex-wrap:wrap}
.scoreregel .sterren{display:flex;gap:2px}
.scoreregel b{color:var(--tekst)}
.prijsblok{display:flex;align-items:baseline;gap:12px;margin-top:14px;flex-wrap:wrap}
.prijsblok .prijs{font-family:'Figtree',system-ui,sans-serif;font-size:34px;font-weight:800}
.prijsblok .was{font-size:17px;color:#a3a89a;text-decoration:line-through;font-weight:600}
.prijsblok .prijsuitleg{font-size:13px;color:#8a9078;font-weight:500}
.punten{
  display:inline-flex;align-items:center;gap:8px;background:var(--bg);
  border:1px dashed rgba(232,163,61,.8);border-radius:10px;padding:6px 12px;
  font-size:13.5px;margin-top:10px;font-weight:500;
}
.punten svg{flex:none;color:var(--goud)}
.korteomschrijving{font-size:14.5px;color:#4c5243;margin-top:12px}
.korteomschrijving p{margin-bottom:8px}
.korteomschrijving ul{padding-left:20px;margin:8px 0}

/* Stock line in the buybox (the card variant is in the .pkaart section). */
.buybox .voorraad{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:14px;font-weight:700;color:#3d7a3d}
.buybox .voorraad .stip{width:9px;height:9px;border-radius:50%;background:#3d7a3d;flex:none}
.buybox .voorraad small{font-weight:600;color:#8a9078}

.levertijd{display:flex;align-items:flex-start;gap:9px;margin-top:8px;font-size:13.5px;color:#4c5243;font-weight:500}
.levertijd svg{flex:none;color:var(--groen);margin-top:2px}
.levertijd b{color:var(--tekst)}
.levertijd .cd{color:var(--rood);font-weight:700}
.levertijd .pnote{display:block;font-size:12.5px;color:#8a9078;font-weight:500}


/* ==========================================================================
   27. PDP — options
   ========================================================================== */
.opt-label{display:flex;align-items:center;gap:6px;font-weight:700;font-size:14.5px;margin:20px 0 4px;font-family:'Figtree',system-ui,sans-serif}
.opt-label .ster{color:var(--rood)}
.opt-desc{font-size:12.5px;color:#8a9078;margin-bottom:9px}
.maten{display:flex;gap:10px;flex-wrap:wrap}
.maat-knop{
  border:2px solid rgba(34,38,28,.12);border-radius:14px;cursor:pointer;background:#fff;
  padding:6px;width:96px;transition:border-color .2s, box-shadow .2s;text-align:center;
}
.maat-knop.sel{border-color:var(--groen)}
.maat-knop:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
.maat-knop img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:9px}
.maat-knop .mnaam{display:block;font-weight:700;font-size:13px;margin-top:5px}
.maat-knop .mprijs{display:block;font-size:12px;color:#8a9078;font-weight:600;padding-bottom:2px}
@media (hover:hover) and (pointer:fine){
  .maat-knop:hover{border-color:var(--groen)}
}


/* ==========================================================================
   28. PDP — buy row, trust, payment pills
   ========================================================================== */
.koopregel{display:flex;gap:10px;margin-top:22px}
.koopregel .aantal{
  width:76px;padding:13px;border:2px solid rgba(34,38,28,.12);border-radius:14px;
  text-align:center;font-size:15px;font-weight:700;font-family:'Inter',sans-serif;background:#fff;
}
.atc{
  flex:1;min-width:0;border:0;cursor:pointer;background:var(--groen);color:#fff;
  font-size:17px;border-radius:16px;padding:14px 18px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .2s, transform .15s;
}
.atc:focus-visible{outline:2px solid var(--donker);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .atc:hover{background:var(--donker);transform:translateY(-1px)}
}
.microtrust{display:flex;justify-content:center;gap:7px 18px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:#69705c;font-weight:500}
.microtrust span{display:flex;align-items:center;gap:6px}
.microtrust svg{flex:none;color:var(--groen)}
.betaalpills{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:12px}
.betaalpills span{background:var(--bg);border:1px solid rgba(34,38,28,.1);border-radius:8px;padding:4px 11px;font-size:11.5px;font-weight:600;color:#5b6150}


/* ==========================================================================
   29. PDP — sticky add-to-cart bar
   ========================================================================== */
.atcbar{
  position:fixed;left:0;right:0;bottom:0;z-index:var(--z-atcbar);background:#fff;
  border-top:1px solid rgba(34,38,28,.1);box-shadow:0 -10px 30px rgba(34,38,28,.12);
  transform:translateY(110%);transition:transform .35s cubic-bezier(.2,.8,.3,1.05);
}
.atcbar.zichtbaar{transform:none}
.atcbar .binn{max-width:1240px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:14px}
.atcbar img{width:48px;height:48px;border-radius:10px;object-fit:cover;flex:none}
.atcbar .t{flex:1;min-width:0}
.atcbar .t b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.atcbar .t small{font-size:12px;color:#8a9078;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.atcbar .p{font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:19px;flex:none}
.atcbar button{
  border:0;cursor:pointer;background:var(--groen);color:#fff;
  font-size:14.5px;border-radius:999px;padding:11px 22px;flex:none;transition:background .2s;
}
@media (hover:hover) and (pointer:fine){
  .atcbar button:hover{background:var(--donker)}
}
@media(max-width:640px){
  .atcbar .binn{padding:12px 14px;gap:10px}
  .atcbar .p{font-size:21px}
  .atcbar button{padding:13px 20px;font-size:15px}
  .atcbar .t b{font-size:13px}
}


/* ==========================================================================
   30. PDP — USP band
   ========================================================================== */
.uspband{padding:26px 0 8px}
.uspband .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.uspkaart{background:#fff;border-radius:var(--radius-s);padding:20px 22px;box-shadow:var(--schaduw);display:flex;gap:14px;align-items:flex-start}
.uspkaart .ik{flex:none;width:44px;height:44px;border-radius:14px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--groen)}
.uspkaart:nth-child(2) .ik{background:rgba(232,163,61,.18);color:var(--goud)}
.uspkaart h3{font-size:15.5px;font-weight:700}
.uspkaart p{font-size:13px;color:#5b6150;margin-top:3px}
@media(max-width:820px){.uspband .grid{grid-template-columns:1fr}}


/* ==========================================================================
   31. PDP — frequently bought together
   ========================================================================== */
.samen{padding:36px 0 8px}
.samen .sec-kop,
.related .sec-kop,
.accsec .sec-kop{font-size:clamp(24px,3.2vw,34px)}
.samen .sec-sub,
.related .sec-sub{font-size:15px;margin-bottom:24px}
.samenkaart{background:#fff;border-radius:var(--radius);box-shadow:var(--schaduw);padding:26px;display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.samenkaart .duo{display:flex;align-items:center;gap:14px}
.samenkaart .sitem{width:130px;text-align:center}
.samenkaart .sitem .sfoto{position:relative;border-radius:14px;overflow:hidden;background:var(--bg)}
.samenkaart .sitem img{width:100%;aspect-ratio:1/1;object-fit:cover}
.samenkaart .sitem p{font-size:12.5px;font-weight:600;margin-top:7px;line-height:1.3;overflow-wrap:anywhere}
.samenkaart .sitem small{font-size:12px;color:#8a9078;font-weight:600}
.samenkaart .plus{flex:none;width:34px;height:34px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--groen)}
.samenkaart .stot{margin-left:auto;text-align:right}
.samenkaart .stot .lbl{font-size:12.5px;color:#8a9078;font-weight:600}
.samenkaart .stot .bedrag{font-family:'Figtree',system-ui,sans-serif;font-size:28px;font-weight:800}
.samenkaart .stot button{
  margin-top:8px;border:0;cursor:pointer;background:var(--goud);color:var(--tekst);
  font-size:14px;border-radius:999px;padding:11px 22px;transition:background .2s;
}
@media (hover:hover) and (pointer:fine){
  .samenkaart .stot button:hover{background:#f0b356}
}
@media(max-width:700px){
  .samenkaart{justify-content:center}
  .samenkaart .stot{margin-left:0;text-align:center;width:100%}
}


/* ==========================================================================
   32. PDP — accordion
   ========================================================================== */
.accsec{padding:36px 0 8px;max-width:860px}
.acc details{background:#fff;border-radius:var(--radius-s);box-shadow:var(--schaduw);margin-bottom:10px;padding:0 22px;overflow:hidden}
.acc summary{
  cursor:pointer;font-weight:700;font-size:15.5px;padding:16px 0;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  font-family:'Figtree',system-ui,sans-serif;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:focus-visible{outline:2px solid var(--groen);outline-offset:-2px;border-radius:10px}
.acc summary .pm{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--groen);transition:transform .25s}
.acc details[open] summary .pm{transform:rotate(45deg)}
.acc .body{padding:0 0 18px}


/* ==========================================================================
   33. RELATED PRODUCTS
   ========================================================================== */
.related{padding:40px 0 8px}
.bs-rij{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.bs-rij{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .bs-rij{
    display:flex;overflow-x:auto;gap:13px;padding:2px 2px 16px;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .bs-rij::-webkit-scrollbar{display:none}
  .bs-rij .pkaart{flex:0 0 72%;scroll-snap-align:start}
}


/* ==========================================================================
   34. FOOTER (inverted surface)
   ========================================================================== */
footer.site{margin-top:70px;background:var(--tekst);color:#D8DCCD}
/* Pages with a sticky add-to-cart bar need room so the bar never covers
   the last footer row. */
body:has(.atcbar) footer.site{padding-bottom:74px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px;padding:clamp(48px,5vw,68px) 0 36px}
.fgrid .logoF{background:#fff;border-radius:14px;padding:10px 14px;display:inline-block}
.fgrid .logoF img{height:50px;width:auto;object-fit:contain}
.fgrid p{font-size:13.5px;margin-top:14px;max-width:34ch;color:#a9ae9c}
.fgrid h4{font-family:'Figtree',system-ui,sans-serif;color:#fff;font-size:15px;margin-bottom:14px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13.5px}
.betaal{display:flex;flex-wrap:wrap;gap:8px}
.betaal span{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);
  border-radius:8px;padding:5px 11px;font-size:11.5px;font-weight:600;color:#e6e9dd;
}
.fbottom{
  border-top:1px solid rgba(255,255,255,.1);padding:18px 0;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:12.5px;color:#8b917d;
}
@media (hover:hover) and (pointer:fine){
  .fgrid ul a:hover{color:var(--goud)}
}
@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.fgrid{grid-template-columns:1fr}}


/* ==========================================================================
   35. INVERTED SURFACES — explicit text colours
   Heading colour is inherited, and inheritance loses from any later selector
   that touches the element itself. So every dark / coloured surface states its
   own colours here instead of relying on the parent.
   ========================================================================== */
.usps,
.usps h1,.usps h2,.usps h3,.usps h4,.usps p,.usps span,.usps a{color:#EDF1E4}

footer.site h1,
footer.site h2,
footer.site h3,
footer.site h4{color:#fff}
footer.site p,
footer.site span,
footer.site li,
footer.site a{color:inherit}

.trustband,
.trustband h1,.trustband h2,.trustband h3,.trustband p,.trustband span{color:#EDF1E4}

.tegel.t-sale h1,
.tegel.t-sale h2,
.tegel.t-sale h3,
.tegel.t-sale p,
.tegel.t-sale span{color:#fff}
.tegel.t-sale .salepill{background:var(--sale-zacht);color:var(--sale-diep)}

.tegel.t-atelier h1,
.tegel.t-atelier h2,
.tegel.t-atelier h3{color:#fff}
.tegel.t-atelier p{color:rgba(237,241,228,.85)}

.tegel.t-badcape h1,
.tegel.t-badcape h2,
.tegel.t-badcape h3,
.tegel.t-badcape p,
.tegel.t-badcape .prijs{color:#fff}
.tegel.t-badcape .chip-verkocht{color:var(--tekst)}

.h3-kaart h1,
.h3-kaart h2,
.h3-kaart h3{color:#fff}
.h3-kaart p{color:rgba(255,255,255,.92)}
.h3-kaart .h3-chip{color:var(--tekst)}
.h3-kaart .h3-chip.groen{color:#fff}
.h3-kaart .h3-cta{color:var(--donker)}

.scorekaart h1,.scorekaart h2,.scorekaart h3,.scorekaart p,.scorekaart span{color:var(--tekst)}
.t-review h1,.t-review h2,.t-review h3,.t-review p,.t-review span{color:var(--tekst)}


/* ==========================================================================
   36. GRID/FLEX SAFETY + WORDPRESS IMAGE FIX
   WordPress prints width="" and height="" on <img>; those attributes create a
   default aspect-ratio that beats the CSS one unless height is set to auto.
   ========================================================================== */
.pkaart .foto img,
.gal-main img,
.gal-thumbs img,
.maat-knop img,
.samenkaart .sitem img{height:auto}

.shopmain,
.pkaart .info,
.atcbar .t,
.fopt .ftekst{min-width:0}

/* ==========================================================================
   37. HEADER CHROME — hamburger, icon buttons, menu list, submenu, drawer
   Everything wp_nav_menu() emits that the mockup never showed: a <ul>, an
   <li class="menu-item-has-children"> and a <ul class="sub-menu">. Styled
   here so the fallback nav and a real WordPress menu look identical.
   ========================================================================== */

/* The skip link must be reachable by keyboard but invisible otherwise. */
.kk-skip{
  position:absolute;left:-9999px;top:0;z-index:calc(var(--z-drawer) + 10);
  background:var(--donker);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-s) 0;
  font-weight:700;
}
.kk-skip:focus{left:0}

.kk-main{display:block;min-width:0}

/* -- logo wordmark (used when no logo image is set) -- */
.logo{display:flex;align-items:center;gap:8px;flex:none}
.logo__woord{
  font-family:'Figtree',system-ui,sans-serif;font-weight:900;font-size:22px;
  letter-spacing:-.02em;color:var(--donker);white-space:nowrap;
}
.logo__woord i{font-style:normal;color:var(--goud)}

/* -- hamburger: only below the nav breakpoint -- */
.hburger{
  display:none;flex:none;width:40px;height:40px;border-radius:50%;
  background:#fff;border:1.5px solid rgba(34,38,28,.1);
  align-items:center;justify-content:center;cursor:pointer;color:var(--tekst);
  padding:0;
}
.hburger span{display:block;width:16px;height:2px;background:currentColor;border-radius:2px;position:relative}
.hburger span::before,
.hburger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor;border-radius:2px}
.hburger span::before{top:-5px}
.hburger span::after{top:5px}

/* -- the icon row: buttons must look exactly like the anchors -- */
.hicons{align-items:center}
.hicons button{
  width:40px;height:40px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;
  border:1.5px solid rgba(34,38,28,.1);cursor:pointer;color:inherit;padding:0;
  transition:transform .2s, background .2s;
}
.hicons a,
.hicons button{position:relative}
.hicoon--zoek{display:none}
@media (hover:hover) and (pointer:fine){
  .hicons button:hover{transform:translateY(-2px);background:var(--goud);border-color:var(--goud)}
}
/* A count of zero is not information — hide the bubble, keep the element so
   the WooCommerce fragment can still replace it. */
.telbol.is-empty{display:none}

/* -- menu list: wp_nav_menu markup -- */
.hnav__lijst{display:flex;align-items:center;gap:18px;list-style:none;margin:0;padding:0}
.hnav__lijst > li{position:relative}
.hnav__lijst > li > a{display:inline-flex;align-items:center;gap:5px}

/* Submenu. Opens on hover AND on keyboard focus; the 10px pseudo-element is a
   hover bridge so the pointer can travel from the parent to the panel. */
.hnav__lijst .sub-menu{
  position:absolute;top:100%;left:-14px;min-width:220px;
  background:#fff;border-radius:var(--radius-s);box-shadow:0 18px 40px rgba(34,38,28,.16);
  padding:10px;list-style:none;margin:0;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .18s, transform .18s, visibility .18s;
  z-index:1;
}
.hnav__lijst > li.menu-item-has-children::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:12px;
}
.hnav__lijst .sub-menu a{
  display:block;padding:8px 12px;border-radius:12px;border-bottom:0;
  font-weight:600;font-size:13.5px;white-space:nowrap;
}
.hnav__lijst > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:none}
@media (hover:hover) and (pointer:fine){
  .hnav__lijst > li:hover > .sub-menu{opacity:1;visibility:visible;transform:none}
  .hnav__lijst .sub-menu a:hover{background:var(--bg)}
}

/* -- mobile navigation drawer -- */
.knav{
  position:fixed;inset:0;z-index:var(--z-drawer);
  display:grid;grid-template-columns:minmax(0,86vw) 1fr;
}
.knav[hidden]{display:none}
.knav__paneel{
  background:#fff;height:100%;max-width:380px;width:100%;
  display:flex;flex-direction:column;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 0 60px rgba(34,38,28,.28);
}
.knav__backdrop{background:rgba(34,38,28,.42);border:0;padding:0;cursor:pointer}
.knav__kop{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid rgba(34,38,28,.08);
  position:sticky;top:0;background:#fff;
}
.knav__sluit{
  width:38px;height:38px;border-radius:50%;border:1.5px solid rgba(34,38,28,.1);
  background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:inherit;padding:0;flex:none;
}
.knav__zoek{padding:14px 18px 4px}
.knav__zoek .zoek{max-width:none;width:100%;display:flex}
.knav__lijst{list-style:none;margin:0;padding:8px 10px 20px}
.knav__lijst li{border-bottom:1px solid rgba(34,38,28,.06)}
.knav__lijst li:last-child{border-bottom:0}
.knav__lijst a{
  display:block;padding:13px 12px;font-weight:700;font-size:15.5px;
  font-family:'Figtree',system-ui,sans-serif;
}
.knav__lijst .sub-menu{list-style:none;margin:0 0 8px;padding:0 0 0 12px;display:none}
.knav__lijst li.is-open > .sub-menu{display:block}
.knav__lijst .sub-menu a{font-weight:500;font-size:14px;padding:9px 12px;color:#5c6353}
/* The chevron is injected by global.js as a SIBLING right after the parent
   link — the real DOM is li > a + button.knav__toggle + ul.sub-menu, the
   button is NOT inside the <a>. So the "name left, chevron right" flex row
   has to live on the LI, with the link as a flex item and the submenu forced
   onto its own line. The previous version put display:flex on the <a> and
   looked for .knav__toggle as a descendant of that <a>: neither selector
   could ever match, so the 44px button fell onto a line of its own below the
   name (doubling the height of every row with children) and the open-state
   rotation never fired. Keep the button a real 44px tap target, and never
   let it be the only way to reach the parent category. */
.knav__lijst li.menu-item-has-children{
  display:flex;flex-wrap:wrap;align-items:center;
}
.knav__lijst li.menu-item-has-children > a{flex:1 1 auto;min-width:0}
.knav__toggle{
  width:44px;height:44px;flex:0 0 44px;border:0;background:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:inherit;
  transition:transform .2s;margin-right:-2px;
}
/* The submenu is a flex item too, so it needs a full-width basis or it would
   try to sit next to the name. display:none/block keeps doing the hiding. */
.knav__lijst li.menu-item-has-children > .sub-menu{flex:0 0 100%;width:100%}
.knav__lijst li.is-open > .knav__toggle{transform:rotate(180deg)}
.knav__voet{margin-top:auto;padding:16px 18px;background:var(--bg);display:grid;gap:8px}
.knav__voet a{font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}

/* Scroll lock. html clips horizontally, so a body-level lock no longer
   propagates — lock at the html element itself. */
html:has(.knav:not([hidden])),
html:has(.kk-drawer:not([hidden])){overflow:hidden}

@media(max-width:860px){
  .hburger{display:flex}
  .hicoon--zoek{display:flex}
  .hbar{gap:12px}
  .logo{margin-right:auto}
}
@media(min-width:861px){
  .knav{display:none}
}

/* -- generic button + rich text, used by the fallback templates -- */
.kk-knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:800;font-size:14.5px;
  font-family:'Figtree',system-ui,sans-serif;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s, background .18s;
}
.kk-knop--groen{background:var(--groen);color:#fff}
.kk-knop--wit{background:#fff;color:var(--tekst);border-color:rgba(34,38,28,.12)}
.kk-knop--vol{min-width:100%}
/* Alias — side-cart.php en de Woo-templates gebruiken .kk-btn; één set regels,
   twee namen, zodat een naamdrift nooit stilletjes een knop ontstyled laat. */
.kk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 24px;border-radius:999px;font-weight:800;font-size:14.5px;
  font-family:'Figtree',system-ui,sans-serif;border:1.5px solid transparent;cursor:pointer;
  transition:transform .18s, background .18s;text-align:center;line-height:1.2}
.kk-btn--groen{background:var(--groen);color:#fff}
.kk-btn--licht,.kk-btn--wit{background:#fff;color:var(--tekst);border-color:rgba(34,38,28,.12)}
.kk-btn--vol{min-width:100%}
@media (hover:hover) and (pointer:fine){
  .kk-btn--groen:hover{background:var(--donker);transform:translateY(-1px)}
  .kk-btn--licht:hover,.kk-btn--wit:hover{border-color:rgba(34,38,28,.28)}
}
@media (hover:hover) and (pointer:fine){
  .kk-knop--groen:hover{background:var(--donker);transform:translateY(-1px)}
  .kk-knop--wit:hover{border-color:rgba(34,38,28,.28)}
}

.kk-paginakop{padding:26px 0 6px}
.kk-losse-pagina{padding-bottom:60px}
.kk-berichten{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;padding:18px 0}
.kk-bericht{background:#fff;border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden;min-width:0}
.kk-bericht__foto img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.kk-bericht__binn{padding:16px 18px 20px}
.kk-bericht__titel{font-size:18px;margin-bottom:6px}
.kk-leeg{padding:60px 0 80px;text-align:center;display:grid;gap:12px;justify-items:center}

/* Tile call-to-action (bento). The whole tile is the link; this is the
   visual affordance, never the only tap target. */
.tegel .tcta{
  display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:13.5px;
}
.t-badcape .tcta{color:#fff}
.t-sale .tcta{color:#fff}
.t-atelier .tcta{color:var(--goud)}
.tegel .tcta svg{transition:transform .2s}
@media (hover:hover) and (pointer:fine){
  a.tegel:hover .tcta svg{transform:translateX(3px)}
}
.t-review .binn .rev-bron{font-size:12px;font-weight:600;color:rgba(34,38,28,.7);margin-top:8px}


/* ==========================================================================
   34. PDP — aanvullingen op de conceptmarkup
   De concepten kenden geen echte WooCommerce-status: geen uitverkochte
   variant, geen uitgeschakelde knop, geen stepper. Die staan hier, in
   dezelfde taal als de rest van dit bestand.
   ========================================================================== */

/* De koopregel is een flexrij; `.aantal` is nu een omhulsel met twee knoppen
   en het invoerveld erin, niet meer het invoerveld zelf. Zelfde specificiteit
   als de regel hierboven, dus deze — later in het bestand — wint. */
.koopregel .aantal{
  width:auto;min-width:124px;padding:0;display:flex;align-items:center;
  border:2px solid rgba(34,38,28,.12);border-radius:14px;background:#fff;overflow:hidden;flex:none;
}
.koopregel .aantal button{
  border:0;background:none;cursor:pointer;color:var(--tekst);
  width:38px;height:100%;min-height:50px;display:flex;align-items:center;justify-content:center;
}
.koopregel .aantal button:focus-visible{outline:2px solid var(--groen);outline-offset:-2px}
.koopregel .aantal input.qty{
  width:44px;border:0;outline:0;background:none;text-align:center;
  font-family:'Inter',sans-serif;font-size:15px;font-weight:700;color:var(--tekst);
  -moz-appearance:textfield;appearance:textfield;padding:12px 0;
}
.koopregel .aantal input.qty::-webkit-outer-spin-button,
.koopregel .aantal input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.koopregel .aantal:focus-within{border-color:var(--groen)}
@media (hover:hover) and (pointer:fine){
  .koopregel .aantal button:hover{background:var(--bg)}
}

/* De knop blijft zichtbaar wanneer WooCommerce hem uitschakelt (er is nog geen
   variant gekozen); hij vertelt alleen dat hij nu niets doet. */
.atc.disabled,
.atc[disabled],
.atc.wc-variation-selection-needed{background:#b5bda6;cursor:not-allowed;transform:none}
.atc.bezig{opacity:.75;cursor:progress}
.atc .atc__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Een variantchip die niet leverbaar is. */
.maat-knop.is-disabled{opacity:.4;cursor:not-allowed}
.maat-knop.is-disabled .mnaam{text-decoration:line-through}

/* Voorraadregel: de groene basis staat hierboven, dit is de tegenhanger.
   Oranje, niet rood — "Tijdelijk uitverkocht" is een status, geen fout. */
.buybox .voorraad.uit{color:var(--oranje-tekst)}
.buybox .voorraad.uit .stip{background:var(--oranje)}

.maatwerknote{font-size:11px;color:#a6ac9a;text-align:center;margin-top:10px}

/* WooCommerce's eigen variatieomhulsels dragen geen eigen lay-out meer:
   ze mogen de koopregel niet insnoeren. */
.single_variation_wrap,
.woocommerce-variation-add-to-cart{display:block}
.woocommerce-variation.single_variation:empty{display:none}
.woocommerce-variation.single_variation{margin-top:6px}


/* ==========================================================================
   35. SHOP — aanvullingen op de conceptmarkup
   Het concept tekende de zijbalk als losse blokken; in WordPress is het één
   <form> en staan er hookregio's omheen die het concept niet kende.
   ========================================================================== */

/* Elke plek waar een plugin iets mag afdrukken is een eigen doos, geen
   rasteritem. Een grid ziet alleen directe kinderen: een banner op
   woocommerce_before_shop_loop zou anders een kolom van het productraster
   opeisen. min-width:0 houdt lange inhoud binnen de kolom. */
.kk-hooks{min-width:0}
.kk-hooks:empty{display:none}
.kk-hooks .woocommerce-notices-wrapper:empty{display:none}

/* De zijbalk is één formulier. Zonder JS is de knop eronder de enige manier om
   te filteren, dus hij moet er op desktop net zo goed uitzien als in de
   bottom sheet — waar .sheet .klaar hem al styleert. */
.kk-filters{display:block}
.kk-filters .klaarwrap{padding:4px 2px 18px}
.kk-filters .klaar{
  min-width:100%;border:0;cursor:pointer;background:var(--groen);color:#fff;
  font-family:'Figtree',system-ui,sans-serif;font-weight:700;font-size:15px;
  border-radius:999px;padding:13px 18px;
}
.kk-filters .klaar:focus-visible{outline:2px solid var(--groen);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .kk-filters .klaar:hover{background:var(--donker)}
}

/* Bezig met versturen: de zijbalk mag niet nog een keer worden aangeklikt. */
.kk-filters.is-bezig{opacity:.6;pointer-events:none}

/* De actieve-filterbalk staat in de toolbar en moet altijd op een eigen regel. */
.toolbar .actiefbalk{width:100%}

/* Chips zijn links (werkt zonder JS), geen knoppen. */
.fchip{text-decoration:none}
.leeg .knopje{text-decoration:none}


/* ==========================================================================
   36. TEKSTPAGINA'S — beleid, FAQ, losse pagina's, blog
   De concepten leverden alleen home/shop/pdp. Deze laag maakt de overige
   pagina's onderdeel van hetzelfde ontwerp: dezelfde tokens, dezelfde
   kaartradius, dezelfde koppenschaal. Geen nieuwe kleuren.
   ========================================================================== */
.tekstpagina{max-width:860px;padding:8px 20px 64px}
.tekstpagina__kop{margin:0 0 26px}
.tekstpagina__kop h1{margin:0}
.tekstpagina__sub{margin-top:10px;font-size:16px;color:#5b6150;max-width:62ch}
.tekstpagina__foto{margin:0 0 24px;border-radius:var(--radius);overflow:hidden;background:var(--bg)}
.tekstpagina__foto img{display:block;width:100%;height:auto}
.tekstpagina__body{font-size:16px}

/* Vrije tekst uit een WYSIWYG. Alles wat de klant kan typen moet hier
   leesbaar uitkomen — inclusief lijsten, tabellen en een lange URL. */
.kk-rtf,
.tekstpagina__body{line-height:1.7;overflow-wrap:anywhere}
.kk-rtf > * + *,
.tekstpagina__body > * + *{margin-top:16px}
.kk-rtf h2,
.tekstpagina__body h2{font-size:clamp(20px,2.4vw,26px);margin-top:34px}
.kk-rtf h3,
.tekstpagina__body h3{font-size:18px;margin-top:26px}
.kk-rtf ul,.kk-rtf ol,
.tekstpagina__body ul,.tekstpagina__body ol{padding-left:22px}
.kk-rtf li + li,
.tekstpagina__body li + li{margin-top:6px}
.kk-rtf a,
.tekstpagina__body a{color:var(--donker);text-decoration:underline;text-underline-offset:3px}
.kk-rtf img,
.tekstpagina__body img{max-width:100%;height:auto;border-radius:var(--radius-s)}
.kk-rtf table,
.tekstpagina__body table{width:100%;border-collapse:collapse;font-size:15px}
.kk-rtf th,.kk-rtf td,
.tekstpagina__body th,.tekstpagina__body td{border-bottom:1px solid rgba(34,38,28,.12);padding:9px 10px;text-align:left;vertical-align:top}
.kk-rtf blockquote,
.tekstpagina__body blockquote{border-left:3px solid var(--groen);padding-left:16px;color:#5b6150}

/* De accordeon van [kk_faq] gebruikt .acc-inhoud, de PDP-partial .body.
   Eén regel voor allebei: een naamverschil mag geen opmaakverschil zijn. */
.acc .acc-inhoud{padding:0 0 18px;line-height:1.7}
.acc .acc-inhoud > * + *{margin-top:12px}
.acc summary .pm{position:relative}
.acc summary .pm::before,
.acc summary .pm::after{content:"";position:absolute;background:currentColor;border-radius:2px}
.acc summary .pm::before{width:11px;height:2px}
.acc summary .pm::after{width:2px;height:11px}

.faqpagina .accsec{padding:0;max-width:none}
.faqhulp{margin-top:34px;background:var(--bg);border-radius:var(--radius);padding:26px}
.faqhulp h2{font-size:20px}
.faqhulp p{margin-top:8px;color:#5b6150}
.faqhulp__knoppen{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}


/* ==========================================================================
   37. OVER ONS
   ========================================================================== */
.overhero{display:grid;grid-template-columns:1.05fr .95fr;gap:34px;align-items:center;padding:14px 20px 44px}
.overhero__tekst{min-width:0}
.overhero__sub{margin-top:12px;font-size:17px;color:#5b6150;max-width:52ch}
.overhero__tekst .kk-rtf{margin-top:18px}
.overhero__knop{margin-top:22px}
.overhero__foto{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--bg);box-shadow:var(--schaduw)}
.overhero__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.overhero--geenfoto{grid-template-columns:1fr;max-width:760px}

.overblokken{padding:0 20px 20px;display:flex;flex-direction:column;gap:30px}
.overblok{display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center;
  background:#fff;border-radius:var(--radius);box-shadow:var(--schaduw);padding:24px;overflow:hidden}
.overblok__foto{margin:0;border-radius:var(--radius-s);overflow:hidden;background:var(--bg)}
.overblok__foto img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.overblok__tekst{min-width:0}
.overblok__tekst h2{font-size:clamp(20px,2.4vw,26px)}
.overblok__tekst .kk-rtf{margin-top:10px;color:#3d4436}
.overblok--om .overblok__foto{order:2}
.overblok--geenfoto{grid-template-columns:1fr}

@media(max-width:860px){
  .overhero,
  .overblok{grid-template-columns:1fr}
  .overblok--om .overblok__foto{order:0}
}


/* ==========================================================================
   38. CONTACT
   ========================================================================== */
.contactblok{padding:8px 20px 64px}
.contactblok__rij{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
.contactblok__form{min-width:0}
.contactblok__form .kk-rtf{margin-bottom:20px}

.contactkaart{background:var(--bg);border-radius:var(--radius);padding:24px;min-width:0}
.contactkaart h2{font-size:18px}
.contactkaart h2 + *{margin-top:12px}
.contactkaart__lijst{list-style:none;padding:0;margin:12px 0 22px;display:flex;flex-direction:column;gap:12px}
.contactkaart__lijst li{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.contactkaart__lijst svg{flex:none;color:var(--groen);margin-top:2px}
.contactkaart__lijst a{color:var(--tekst);text-decoration:none;overflow-wrap:anywhere}
.contactkaart__uren{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:12px}
.contactkaart__uren th{text-align:left;font-weight:600;padding:6px 0}
.contactkaart__uren td{text-align:right;color:#5b6150;padding:6px 0}
.contactkaart__faq{margin-top:20px}
.contactkaart__faq .knopje{display:inline-flex;align-items:center;gap:6px;text-decoration:none}

@media(hover:hover) and (pointer:fine){
  .contactkaart__lijst a:hover{color:var(--donker);text-decoration:underline}
}
@media(max-width:860px){
  .contactblok__rij{grid-template-columns:1fr}
}

/* Eigen formulier (geen plugin nodig). */
.kk-contactform{background:#fff;border-radius:var(--radius);box-shadow:var(--schaduw);padding:24px}
.kk-veldrij{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kk-veld{display:flex;flex-direction:column;gap:6px;margin-top:14px;min-width:0}
.kk-veldrij .kk-veld{margin-top:0}
.kk-veld label{font-size:13.5px;font-weight:600}
.kk-veld input,
.kk-veld textarea{
  width:100%;border:1px solid rgba(34,38,28,.16);border-radius:14px;padding:12px 14px;
  font-family:'Inter',system-ui,sans-serif;font-size:15px;background:#fff;color:var(--tekst);
}
.kk-veld textarea{border-radius:var(--radius-s);resize:vertical}
.kk-veld input:focus,
.kk-veld textarea:focus{outline:2px solid var(--groen);outline-offset:1px;border-color:transparent}
.kk-veld--honing{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kk-veld--knop{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.kk-veld__hint{font-size:13px;color:#8a9078}
.kk-melding{border-radius:var(--radius-s);padding:14px 16px;font-size:15px;margin-bottom:16px}
.kk-melding--goed{background:rgba(107,127,78,.12);color:var(--donker)}
.kk-melding--fout{background:rgba(208,69,62,.10);color:var(--rood)}

@media(max-width:640px){
  .kk-veldrij{grid-template-columns:1fr}
}


/* ==========================================================================
   39. VERLANGLIJST
   De pagina wordt client-side gevuld. Alles wat JS regelt is een KLASSE op
   de sectie; de HTML zelf toont de lege staat, zodat er zonder JavaScript
   nooit een blanco pagina staat. Vandaar dat elke verbergregel achter
   .kk-js zit — die klasse wordt in de <head> gezet.
   ========================================================================== */
.wishlist{padding:8px 20px 64px}
.wishlist__intro{margin-bottom:22px}
.wishlist__grid{margin-top:6px}
.wishlist__laden{display:none;color:#8a9078;font-size:15px;padding:18px 0}
.kk-js .wishlist.is-laden .wishlist__laden{display:block}
.kk-js .wishlist:not(.is-leeg) .wishlist__leeg{display:none}
.kk-js .wishlist.is-leeg .wishlist__grid{display:none}
.kk-js .wishlist.is-laden .wishlist__wis,
.kk-js .wishlist.is-leeg .wishlist__wis{display:none}
.wishlist__leeg{text-align:center;background:var(--bg);border-radius:var(--radius);padding:44px 24px}
.wishlist__leeg svg{color:var(--groen)}
.wishlist__leeg h2{font-size:22px;margin-top:10px}
.wishlist__leeg p{margin-top:8px;color:#5b6150;max-width:46ch;margin-left:auto;margin-right:auto}
.wishlist__leeg p:last-child{margin-top:18px}
.wishlist__wis{margin-top:24px;text-align:center}
.wishlist__wis .knopje{background:none;border:0;cursor:pointer;color:#8a9078;font-size:14px}
@media(hover:hover) and (pointer:fine){
  .wishlist__wis .knopje:hover{color:var(--rood)}
}


/* ==========================================================================
   40. 404 + losse berichten
   ========================================================================== */
.kk-404{text-align:center;padding:40px 20px 24px;max-width:760px}
.kk-404__code{display:inline-block;font-family:'Figtree',system-ui,sans-serif;font-weight:900;
  font-size:64px;line-height:1;color:var(--groen);opacity:.35}
.kk-404 h1{margin-top:10px}
.kk-404__sub{margin-top:12px;color:#5b6150;font-size:16px}
.kk-404__zoek{margin:22px auto 0;max-width:520px}
.kk-404__knoppen{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.kk-404__tips{padding:26px 20px 60px}

.kk-losse-pagina{padding:14px 20px 64px}
.kk-paginakop{margin-bottom:24px}
.kk-berichten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.kk-berichten:has(.kk-bericht:only-child){grid-template-columns:1fr;max-width:820px}
.kk-bericht{background:#fff;border-radius:var(--radius);box-shadow:var(--schaduw);overflow:hidden;min-width:0}
.kk-bericht__foto{display:block;background:var(--bg)}
.kk-bericht__foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.kk-bericht__binn{padding:20px}
.kk-bericht__titel{font-size:19px}
.kk-bericht__titel a{color:inherit;text-decoration:none}
.kk-bericht__tekst{margin-top:8px;color:#5b6150;font-size:15px}
.kk-leeg{text-align:center;background:var(--bg);border-radius:var(--radius);padding:52px 24px}
.kk-leeg p{margin-top:10px;color:#5b6150}
@media(max-width:980px){.kk-berichten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.kk-berichten{grid-template-columns:1fr}}
/* Verkooptekst onder de prijs (productmeta _custom_price_text). Krijgt een
   eigen regel in .meta — die staat op flex-wrap, dus flex-basis:100% is genoeg. */
.pkaart .prijstekst{flex:0 0 100%;font-size:12.5px;font-weight:600;color:#8a9078;line-height:1.35}


/* ==========================================================================
   46. PDP — speelse FAQ (.acc-speels)
   Zelfde toon als de "Zo werkt het"-stappen op de homepage: genummerde
   rondjes in wisselende accentkleuren, licht gekantelde kaartjes. Staat
   bewust ná sectie 32, zodat deze regels de rustige .acc-basis overschrijven.
   Alleen de FAQ onder een product krijgt deze klasse; de FAQ-pagina niet.
   ========================================================================== */
.acc-speels{padding:clamp(34px,4.5vw,56px) 0 8px;max-width:920px;margin:0 auto}

.acc-speels .faq-kop{text-align:center;margin-bottom:clamp(22px,3vw,34px)}
.acc-speels .faq-pill{
  display:inline-flex;align-items:center;gap:6px;margin-bottom:10px;
  background:var(--goud);color:var(--tekst);
  font-family:'Figtree',system-ui,sans-serif;font-size:12px;font-weight:800;
  letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:5px 14px;
  transform:rotate(-1.5deg);
}
.acc-speels .sec-kop{color:var(--groen);margin-bottom:8px}
.acc-speels .sec-sub{margin:0 auto;max-width:46ch;font-size:14.5px;color:#5b6150}

.acc-speels .faq-lijst{display:flex;flex-direction:column;gap:14px}

.acc-speels details.faq-kaart{
  position:relative;background:#fff;border-radius:20px;
  box-shadow:0 0 0 1px rgba(34,38,28,.10);
  padding:0 clamp(16px,2vw,24px);margin:0;overflow:hidden;
  transform:rotate(var(--kantel,0deg));
  transition:transform .28s ease, box-shadow .28s ease, background .28s ease;
}
.acc-speels details:nth-child(4n+1){--ink:#A9737C;--kantel:-.5deg}
.acc-speels details:nth-child(4n+2){--ink:#6B7F4E;--kantel:.45deg}
.acc-speels details:nth-child(4n+3){--ink:#5F819C;--kantel:-.35deg}
.acc-speels details:nth-child(4n+4){--ink:#C7893F;--kantel:.5deg}

/* Gekleurd streepje links: het rijgt de kaartjes aan elkaar als de stappen. */
.acc-speels details.faq-kaart::before{
  content:'';position:absolute;left:0;top:14px;bottom:14px;width:5px;
  background:var(--ink);border-radius:0 6px 6px 0;opacity:.9;
}

.acc-speels summary{
  display:flex;align-items:center;gap:14px;
  padding:16px 0;cursor:pointer;list-style:none;
  font-family:'Figtree',system-ui,sans-serif;font-weight:800;font-size:16px;
  line-height:1.35;color:var(--tekst);
}
.acc-speels summary::-webkit-details-marker{display:none}
.acc-speels summary:focus-visible{outline:2px solid var(--ink);outline-offset:-4px;border-radius:14px}

.acc-speels .faq-nr{
  flex:none;width:36px;height:36px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:'Figtree',system-ui,sans-serif;font-size:16px;font-weight:800;line-height:1;
  transform:rotate(-3deg);transition:transform .28s ease;
}
.acc-speels .faq-vraag{flex:1 1 auto}

.acc-speels summary .pm{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:color-mix(in srgb, var(--ink) 14%, #fff);
  color:var(--ink);display:flex;align-items:center;justify-content:center;
  transition:transform .25s ease, background .25s ease;
}
.acc-speels details[open] summary .pm{transform:rotate(45deg)}
.acc-speels details[open]{transform:rotate(0deg);background:color-mix(in srgb, var(--ink) 6%, #fff)}
.acc-speels details[open] .faq-nr{transform:rotate(0deg)}

.acc-speels .body{
  padding:0 0 20px 50px;font-size:14.8px;line-height:1.7;color:#4f5548;
}
.acc-speels .body > * + *{margin-top:12px}
.acc-speels .body a{color:var(--groen);text-decoration:underline;text-underline-offset:2px}

@media (hover:hover) and (pointer:fine){
  .acc-speels details.faq-kaart:hover{transform:rotate(0deg);box-shadow:0 0 0 1px rgba(34,38,28,.18)}
  .acc-speels details.faq-kaart:hover .faq-nr{transform:rotate(0deg) scale(1.06)}
}
@media(prefers-reduced-motion:reduce){
  .acc-speels details.faq-kaart,
  .acc-speels .faq-nr,
  .acc-speels summary .pm{transition:none}
}
@media(max-width:600px){
  .acc-speels summary{gap:11px;font-size:15px;padding:14px 0}
  .acc-speels .faq-nr{width:31px;height:31px;font-size:14px}
  .acc-speels summary .pm{width:26px;height:26px}
  .acc-speels .body{padding-left:42px}
  .acc-speels details.faq-kaart{--kantel:0deg}
}

/* Oudere browsers zonder color-mix() krijgen gewoon wit + een lichte tint. */
@supports not (background:color-mix(in srgb,#000 10%,#fff)){
  .acc-speels summary .pm{background:var(--bg)}
  .acc-speels details[open]{background:#fff}
}

/* ==========================================================================
   37. VARIATIE-SWATCH (kleurvlakje)
   Valt in als een variantchip geen eigen variatiefoto heeft maar de
   attribuutterm wel een kleur in de termmeta draagt (product_attribute_color,
   secondary_color + is_dual_color). Zelfde maatvoering als .maat-knop img.
   ========================================================================== */
.maat-knop .kkswatch{
  display:block;width:100%;aspect-ratio:1/1;border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(34,38,28,.14);
}


/* ==========================================================================
   XX. LIVE SEARCH — resultaten in de zoekoverlay
   De JS in global.js zet hier al <div class="resultaten__grid"> met .pkaart's
   in; er stond alleen nog geen enkele regel opmaak tegenover, waardoor de
   kaarten op volle breedte onder elkaar vielen.
   ========================================================================== */
.kk-search-overlay .resultaten{display:block;margin-top:14px}
.kk-search-overlay .resultaten:empty{display:none}
.kk-search-overlay .resultaten[hidden]{display:none}

.resultaten__grid{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start;
}
@media(max-width:1150px){.resultaten__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:880px){.resultaten__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.resultaten__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Compacte variant van de kaart: in een dropdown telt overzicht, niet detail. */
.resultaten__grid .pkaart{box-shadow:0 0 0 1px rgba(34,38,28,.09)}
.resultaten__grid .pkaart:hover{transform:none;box-shadow:0 0 0 1px rgba(34,38,28,.18)}
.resultaten__grid .pkaart .info{padding:9px 11px 11px;gap:3px}
.resultaten__grid .pkaart h3{
  font-size:13px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.resultaten__grid .pkaart .meta{padding-top:2px}
.resultaten__grid .pkaart .prijs{font-size:14.5px}
.resultaten__grid .pkaart .prijs small{font-size:10.5px}
/* Favoriet-knop en voorraadregel zijn hier ruis: je kiest, je koopt niet. */
.resultaten__grid .pkaart .kk-wish,
.resultaten__grid .pkaart .voorraad,
.resultaten__grid .pkaart .kaart-cta{display:none}
.resultaten__grid .pkaart .foto .badge,
.resultaten__grid .pkaart .foto .sbadge{font-size:10px;padding:3px 7px}

.resultaten__meer{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  padding:10px 18px;border-radius:999px;background:var(--groen);color:#fff;
  font-weight:800;font-size:13.5px;line-height:1;
}
.resultaten__meer:hover{background:var(--donker);color:#fff}

.resultaten__leeg{
  margin:6px 0 2px;padding:16px 18px;border-radius:var(--radius-s);
  background:var(--bg);font-size:14px;font-weight:600;color:rgba(34,38,28,.7);
}

/* ==========================================================================
   47. VOORRAAD — tijdelijk uitverkocht
   De winkelwagenknop is dan echt disabled (zie template-parts/pdp/buy-row.php),
   dus we stylen op [disabled] en niet alleen op de klasse: dan klopt de kleur
   ook als WooCommerce de knop zelf uitzet. Lichter groen, geen hover, geen
   cursor — de klant leest meteen dat hier niets te klikken valt.
   ========================================================================== */
.atc[disabled],
.atc.atc--uit{
  background:#C3CCB4;color:#fff;cursor:not-allowed;transform:none;
  box-shadow:none;
}
.atc[disabled]:hover,
.atc.atc--uit:hover{background:#C3CCB4;transform:none}

.koopregel--uit .aantal{opacity:.5}
.koopregel--uit .aantal button{cursor:not-allowed}
.koopregel--uit .aantal input{cursor:not-allowed}

/* Variabel product waarvan de GEKOZEN maat uitverkocht is. Die klasse zet
   wc-add-to-cart-variation.js op de wrapper; server-side weten we dat niet. */
.woocommerce-variation-add-to-cart-disabled .atc{
  background:#C3CCB4;color:#fff;cursor:not-allowed;transform:none;pointer-events:none;
}

/* --------------------------------------------------------------------------
   47.1 Aanmeldformulier "mail me als het weer op voorraad is"
   Zelfde blokvorm als de microtrust-strook eronder, in het oranje van
   "niet op voorraad" zodat het bij de voorraadregel hoort en niet bij een
   foutmelding.
   -------------------------------------------------------------------------- */
.kk-bis,
.buybox #wc_bis_product_form,
.single_variation_wrap #wc_bis_product_form{
  margin-top:18px;padding:16px 18px;border-radius:var(--radius-s);
  background:#FFF6EC;box-shadow:inset 0 0 0 1px var(--oranje-ring);
}
.kk-bis #wc_bis_product_form{margin:0;padding:0;background:none;box-shadow:none}

#wc_bis_product_form .wc_bis_form_title{
  font-size:14.5px;font-weight:700;line-height:1.4;color:var(--oranje-tekst);
  margin:0 0 10px;
}
#wc_bis_product_form .input-text,
#wc_bis_product_form input[type=text],
#wc_bis_product_form input[type=email]{
  width:100%;border:0;box-shadow:inset 0 0 0 1px rgba(34,38,28,.16);
  border-radius:14px;padding:12px 14px;font:inherit;font-size:15px;
  background:#fff;color:var(--tekst);
}
#wc_bis_product_form .input-text:focus,
#wc_bis_product_form input[type=text]:focus,
#wc_bis_product_form input[type=email]:focus{
  outline:0;box-shadow:inset 0 0 0 2px var(--oranje);
}
#wc_bis_product_form .wc_bis_send_form,
#wc_bis_product_form button.button{
  margin-top:10px;width:100%;border:0;cursor:pointer;
  background:var(--oranje-tekst);color:#fff;font-size:16px;font-weight:700;
  border-radius:14px;padding:13px 18px;line-height:1.2;
  transition:background .2s;
}
#wc_bis_product_form .wc_bis_send_form:hover,
#wc_bis_product_form button.button:hover{background:#8C4A08}
#wc_bis_product_form .wc_bis_opt_in,
#wc_bis_product_form label{font-size:13px;line-height:1.5;color:rgba(34,38,28,.75)}
#wc_bis_product_form .woocommerce-error,
#wc_bis_product_form .woocommerce-message{margin:10px 0 0;font-size:13.5px}
.wc_bis_signup_form_subscribed_link{text-decoration:underline}

@media(min-width:560px){
  #wc_bis_product_form .wc_bis_form_fields{display:flex;gap:10px;align-items:flex-start}
  #wc_bis_product_form .wc_bis_form_fields .input-text{flex:1;min-width:0}
  #wc_bis_product_form .wc_bis_form_fields .wc_bis_send_form{margin-top:0;width:auto;flex:0 0 auto}
}


/* ==========================================================================
   31b. PDP — bijpassende producten (max. 3 kaarten, cross-sells)
   ========================================================================== */
.bs-rij--bijpassend{grid-template-columns:repeat(3,minmax(0,1fr));max-width:960px}
@media(max-width:980px){.bs-rij--bijpassend{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;max-width:none}}
@media(max-width:640px){
  .bs-rij--bijpassend{display:flex;max-width:none}
  .bs-rij--bijpassend .pkaart{flex:0 0 68%}
  .bs-rij--bijpassend[data-aantal="1"] .pkaart{flex-basis:80%}
}