/* =========================================================
   Blue Olive — gedeeld ontwerpsysteem
   Mediterraan, warm, zakelijk. Mobile-first.
   ========================================================= */

:root{
  /* Kleuren, afgeleid van het bestaande palet van de site */
  --kleur-groen:#4a705b;
  --kleur-groen-donker:#37553f;
  --kleur-groen-licht:#e4ecdf;
  --kleur-olijf:#b5b34c;
  --kleur-olijf-donker:#5e5d26;
  --kleur-blauw:#2763ba;
  --kleur-terra:#2763ba;
  --kleur-terra-donker:#1e4e94;
  --kleur-creme:#f6f6f3;
  --kleur-zand:#e8e7dc;
  --kleur-zand-donker:#dcd9cb;
  --kleur-goud:#edecd3;
  --kleur-inkt:#212326;
  --kleur-tekst:#2e3129;
  --kleur-tekst-zacht:#5f6358;
  --kleur-wit:#ffffff;
  --kleur-lijn:#dcd9cb;
  --kleur-fout:#af2323;
  --kleur-ok:#4a705b;
  /* Donkere tekst op het olijfgroen: wit is daarop te licht (Blue Olive, 22 oktober 2026). */
  --kleur-op-olijf:#434549;

  /* Typografie */
  /* Montserrat overal, ook in citaten en uitspraken, zoals op blueolive.nl
     (Blue Olive, 22 oktober 2026). Alleen het Landelijke etiket op Private
     label houdt Bodoni: dat is het voorbeeld van een etiket, geen sitetekst. */
  --font-heading:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-accent:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-body:'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Maten */
  --container:1200px;
  --container-smal:820px;
  --radius:12px;
  --radius-klein:8px;
  /* Pilvormen zijn sinds 26 oktober 2026 net zo hoekig als de knoppen. */
  --radius-pil:4px;
  /* Knoppen hebben rechte hoeken, zoals de knop van Olivia (26 okt 2026). */
  --radius-knop:4px;
  --schaduw:0 0 0 1px var(--kleur-lijn);
  --schaduw-hover:0 0 0 1px var(--kleur-groen);
  --transitie:180ms cubic-bezier(.4,0,.2,1);
  --header-hoogte:80px;
}

/* ---------- Reset & basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-body);
  font-size:14px;
  line-height:1.6;
  color:var(--kleur-tekst);
  background:var(--kleur-wit);
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--kleur-groen);text-decoration:underline;text-underline-offset:.15em;transition:color var(--transitie)}
a:hover{color:var(--kleur-groen-donker)}
ul,ol{padding-left:1.25rem}
:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:0;background:var(--kleur-inkt);color:var(--kleur-wit);padding:.6rem 1rem;z-index:2000}
.skip-link:focus{left:1rem;top:1rem}

/* ---------- Typografie ---------- */
h1,h2,h3,h4,.h1,.h2,.h3{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.2;
  color:var(--kleur-groen);
  margin:0 0 .6em;
  letter-spacing:-.01em;
}
h1,.h1{font-size:clamp(1.85rem,3.8vw,2.6rem)}
h2,.h2{font-size:clamp(1.7rem,3.6vw,2.5rem)}
h3,.h3{font-size:clamp(1.25rem,2.2vw,1.55rem)}
h4{font-size:1.125rem;font-family:var(--font-body);font-weight:600}
p{margin:0 0 1.1em}
.lead{font-size:clamp(1.15rem,1.8vw,1.35rem);line-height:1.55;color:var(--kleur-tekst-zacht);max-width:42em}
.eyebrow{
  display:inline-block;
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--kleur-olijf-donker);
  margin-bottom:.9rem;
}
.eyebrow::before{content:"";display:inline-block;width:1.6rem;height:2px;background:var(--kleur-olijf);vertical-align:middle;margin-right:.6rem}
.tekst-centreer{text-align:center}
.tekst-zacht{color:var(--kleur-tekst-zacht)}
.tekst-wit{color:var(--kleur-wit)}
.accent{color:var(--kleur-terra)}
.smal{max-width:var(--container-smal);margin-left:auto;margin-right:auto}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.mt-1{margin-top:1rem}.mt-2{margin-top:2rem}.mt-3{margin-top:3rem}
.mb-1{margin-bottom:1rem}.mb-2{margin-bottom:2rem}.mb-3{margin-bottom:3rem}

/* ---------- Layout ---------- */
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 1.25rem}
.container-smal{width:100%;max-width:var(--container-smal);margin:0 auto;padding:0 1.25rem}
.section{padding:3.5rem 0}
.section-groot{padding:5rem 0}
.section-alt{background:var(--kleur-zand)}
.section-wit{background:var(--kleur-wit)}
.section-donker{background:var(--kleur-groen);color:var(--kleur-wit)}
.section-donker h1,.section-donker h2,.section-donker h3,.section-donker .eyebrow{color:var(--kleur-wit)}
.section-donker .eyebrow::before{background:var(--kleur-goud)}
.section-donker a{color:var(--kleur-goud)}
/* De regel hierboven kleurt elke link in een groene sectie goud, ook de knoppen:
   op de witte knop werd dat goud op wit (1,2:1, onleesbaar). Knoppen houden hun
   eigen kleuren. */
.section-donker a.btn-licht{color:var(--kleur-groen-donker)}
.section-donker a.btn-licht:hover,.section-donker a.btn-licht:focus-visible{color:var(--kleur-inkt)}
.section-donker a.btn-outline-licht{color:var(--kleur-wit)}
.section-donker a.btn-outline-licht:hover,.section-donker a.btn-outline-licht:focus-visible{color:var(--kleur-groen-donker)}
.section-inkt{background:var(--kleur-groen-donker);color:var(--kleur-zand)}
.section-inkt h1,.section-inkt h2,.section-inkt h3{color:var(--kleur-wit)}
.section-kop{max-width:var(--container-smal);margin-bottom:2.5rem}
.section-kop.tekst-centreer{margin-left:auto;margin-right:auto}

.grid{display:grid;gap:1.5rem;grid-template-columns:1fr}
.grid-2,.grid-3,.grid-4{display:grid;gap:1.5rem;grid-template-columns:1fr}
@media (min-width:640px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:980px){
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
}

.split{display:grid;gap:2.5rem;align-items:center;grid-template-columns:1fr}
.split-omgekeerd > :first-child{order:2}
@media (min-width:880px){
  .split{grid-template-columns:1fr 1fr;gap:4rem}
  .split-omgekeerd > :first-child{order:0}
}
.split-media img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/3}

/* ---------- Knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--font-body);font-weight:600;font-size:1rem;line-height:1;
  padding:.95rem 1.6rem;border-radius:var(--radius-knop);
  border:2px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform var(--transitie),background-color var(--transitie),color var(--transitie),border-color var(--transitie),box-shadow var(--transitie);
  will-change:transform;
}
.btn:hover,.btn:focus-visible{transform:scale(1.02)}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--kleur-groen);color:var(--kleur-wit);border-color:var(--kleur-groen)}
.btn-primary:hover,.btn-primary:focus-visible{background:var(--kleur-olijf);border-color:var(--kleur-olijf);color:var(--kleur-op-olijf)}
.btn-accent{background:var(--kleur-terra);color:var(--kleur-wit);border-color:var(--kleur-terra)}
.btn-accent:hover,.btn-accent:focus-visible{background:var(--kleur-terra-donker);border-color:var(--kleur-terra-donker);color:var(--kleur-wit)}
.btn-secondary{background:transparent;color:var(--kleur-groen);border-color:var(--kleur-groen)}
.btn-secondary:hover,.btn-secondary:focus-visible{background:var(--kleur-olijf);border-color:var(--kleur-olijf);color:var(--kleur-op-olijf)}
.btn-licht{background:var(--kleur-wit);color:var(--kleur-groen-donker);border-color:var(--kleur-wit)}
.btn-licht:hover,.btn-licht:focus-visible{background:var(--kleur-goud);border-color:var(--kleur-goud);color:var(--kleur-inkt)}
.btn-outline-licht{background:transparent;color:var(--kleur-wit);border-color:rgba(255,255,255,.7)}
.btn-outline-licht:hover,.btn-outline-licht:focus-visible{background:var(--kleur-wit);color:var(--kleur-groen-donker);border-color:var(--kleur-wit)}
.btn-link{background:none;border:0;padding:.4rem 0;color:var(--kleur-groen);text-decoration:underline;text-underline-offset:.2em;border-radius:0}
.btn-link:hover{color:var(--kleur-groen-donker);transform:none}
.btn-sm{padding:.65rem 1.15rem;font-size:.9rem}
.btn-lg{padding:1.15rem 2.1rem;font-size:1.1rem}
.btn-blok{width:100%}
.btn-groep{display:flex;flex-wrap:wrap;gap:.85rem;align-items:center}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:var(--kleur-groen-donker);color:var(--kleur-wit);
  padding:4.5rem 0 5rem;
}
.hero-groot{min-height:78vh;display:flex;align-items:center}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img,.hero-media video{width:100%;height:100%;object-fit:cover}
.hero-overlay{position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%)}
.hero-overlay-neutraal{background:linear-gradient(100deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.25) 55%,rgba(0,0,0,0) 100%)}
.hero-inhoud{position:relative;z-index:2;max-width:46rem}
.hero h1{color:var(--kleur-wit);margin-bottom:1rem}
.hero .eyebrow{color:var(--kleur-goud)}
.hero .eyebrow::before{background:var(--kleur-goud)}
.hero .lead{color:rgba(255,255,255,.88)}
.hero .btn-groep{margin-top:2rem}
.hero-licht{background:var(--kleur-zand);color:var(--kleur-tekst)}
.hero-licht h1{color:var(--kleur-inkt)}
.hero-licht .lead{color:var(--kleur-tekst-zacht)}
.hero-licht .eyebrow{color:var(--kleur-olijf-donker)}
.hero-licht .eyebrow::before{background:var(--kleur-olijf)}
.hero-compact{padding:3rem 0 3.5rem}
/* Homepage: een iets lagere kop met foto's die elkaar afwisselen (home.js),
   Blue Olive, 23 oktober 2026. Zonder script staat alleen de eerste foto. */
.hero-groot.hero-dia-kop{min-height:62vh}
.hero-dia img{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
.hero-dia img.actief{opacity:1}
.hero-dia-knoppen{position:absolute;left:0;right:0;bottom:1rem;z-index:2;display:flex;justify-content:center;align-items:center;gap:.5rem}
.hero-dia-stip{width:.7rem;height:.7rem;padding:0;border:1.5px solid var(--kleur-wit);border-radius:50%;background:transparent;cursor:pointer}
.hero-dia-stip[aria-current="true"]{background:var(--kleur-wit)}
.hero-dia-pauze{margin-left:.5rem;padding:.2rem .6rem;border:1.5px solid rgba(255,255,255,.7);border-radius:var(--radius-pil);background:transparent;color:var(--kleur-wit);font:inherit;font-size:.8rem;cursor:pointer}
.hero-dia-stip:focus-visible,.hero-dia-pauze:focus-visible{outline:2px solid var(--kleur-wit);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.hero-dia img{transition:none}}

/* Paginakop voor subpagina's */
.paginakop{background:var(--kleur-zand);padding:3rem 0 2.5rem;border-bottom:1px solid var(--kleur-lijn)}
.paginakop h1{margin-bottom:.4rem}
.paginakop .lead{margin-bottom:0}

/* ---------- Kaarten ---------- */
.card{
  background:var(--kleur-wit);border-radius:var(--radius);
  box-shadow:var(--schaduw);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform var(--transitie),box-shadow var(--transitie);
  will-change:transform;
}
.card,.card:hover{text-decoration:none}
.card:hover,.card:focus-within{transform:scale(1.02);box-shadow:var(--schaduw-hover)}
.card:active{transform:scale(.98)}
.card-img{aspect-ratio:4/3;overflow:hidden;background:var(--kleur-zand)}
.card-img img{width:100%;height:100%;object-fit:cover}
.card-img-vierkant{aspect-ratio:1/1}
.card-body{padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card-body h3{margin-bottom:.2rem}
.card-body p{margin:0;color:var(--kleur-tekst-zacht)}
.card-body .btn,.card-body .card-link{margin-top:auto;align-self:flex-start}
/* Kaarten in een rij delen hun regels: label, naam, herkomst en prijs staan naast elkaar op gelijke hoogte */
@supports (grid-template-rows:subgrid){
  .grid-gelijk{row-gap:0}
  .grid-gelijk > .card{grid-row:span 4;margin-bottom:1.5rem}
  .grid-gelijk > .card:has(> .card-body > .eyebrow:first-child){display:grid;grid-template-rows:subgrid}
  .grid-gelijk > .card:has(> .card-body > .eyebrow:first-child) > .card-body{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:.5rem;align-items:start}
}
.card-link{font-weight:600;text-decoration:none;color:var(--kleur-groen)}
.card-link::after{content:" \2192";transition:transform var(--transitie);display:inline-block}
.card:hover .card-link::after{transform:translateX(4px)}
.card-zand{background:var(--kleur-zand);box-shadow:none}
.card-groen{background:var(--kleur-groen);color:var(--kleur-wit)}
.card-groen h3,.card-groen p{color:var(--kleur-wit)}
.card-rand{box-shadow:none;border:1px solid var(--kleur-lijn)}
.card-icoon{width:3.25rem;height:3.25rem;border-radius:50%;background:var(--kleur-groen-licht);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-size:1.4rem;color:var(--kleur-groen);margin-bottom:.5rem}

/* Categorie-tegel: afbeelding met titel eroverheen */
.tegel{position:relative;display:block;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--kleur-groen-donker);color:var(--kleur-wit);text-decoration:none;transition:transform var(--transitie),box-shadow var(--transitie)}
.tegel:hover,.tegel:focus-visible{transform:scale(1.02);box-shadow:var(--schaduw-hover);color:var(--kleur-wit)}
.tegel:active{transform:scale(.98)}
.tegel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 400ms cubic-bezier(.4,0,.2,1)}
.tegel:hover img{transform:scale(1.05)}
.tegel-tekst{position:absolute;inset:auto 0 0 0;padding:1.25rem;background:linear-gradient(to top,rgba(55,85,63,.88),rgba(55,85,63,0));font-family:var(--font-heading);font-size:1.3rem}

/* Productkaart (webshop) */
.product-card{background:var(--kleur-wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius);padding:1rem;display:flex;flex-direction:column;gap:.6rem;transition:transform var(--transitie),box-shadow var(--transitie)}
.product-card:hover,.product-card:focus-within{transform:scale(1.02);box-shadow:var(--schaduw-hover)}
.product-card:active{transform:scale(.98)}
.product-img{aspect-ratio:1/1;background:var(--kleur-creme);border-radius:var(--radius-klein);overflow:hidden}
.product-img img{width:100%;height:100%;object-fit:contain}
.product-merk{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--kleur-olijf-donker);font-weight:600}
.product-naam{font-family:var(--font-body);font-weight:600;font-size:1rem;margin:0;color:var(--kleur-inkt)}
.product-naam a{text-decoration:none;color:inherit}
.product-inhoud{font-size:.9rem;color:var(--kleur-tekst-zacht)}
.prijs{font-weight:700;color:var(--kleur-inkt)}
.prijs-info{font-size:.85rem;color:var(--kleur-tekst-zacht)}
.prijs-verborgen{font-size:.9rem;color:var(--kleur-tekst-zacht);font-style:italic}

/* Merken-logo's */
.logo-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:640px){.logo-grid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:980px){.logo-grid{grid-template-columns:repeat(6,1fr)}}
.logo-item{background:var(--kleur-wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius-klein);padding:1.25rem;display:flex;align-items:center;justify-content:center;min-height:6rem;transition:transform var(--transitie),box-shadow var(--transitie)}
.logo-item:hover,.logo-item:focus-visible{transform:scale(1.02);box-shadow:var(--schaduw)}
.logo-item img{max-height:3.5rem;width:auto;object-fit:contain}

/* ---------- Labels, cijfers, banden ---------- */
.badge{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.05em;padding:.3rem .7rem;border-radius:var(--radius-pil);background:var(--kleur-goud);color:var(--kleur-olijf-donker)}
.badge-groen{background:var(--kleur-groen-licht);color:var(--kleur-groen-donker)}
.badge-terra{background:#dde7f6;color:var(--kleur-terra-donker)}
.tag{display:inline-block;font-size:.85rem;padding:.35rem .8rem;border-radius:var(--radius-pil);border:1px solid var(--kleur-lijn);background:var(--kleur-wit);color:var(--kleur-tekst);text-decoration:none;transition:transform var(--transitie),background-color var(--transitie)}
.tag:hover,.tag:focus-visible{background:var(--kleur-zand);transform:scale(1.02)}
.tag-lijst{display:flex;flex-wrap:wrap;gap:.5rem}

.stats{display:grid;gap:1.5rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:880px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{text-align:center;padding:1.5rem 1rem;border-radius:var(--radius);background:var(--kleur-wit);border:1px solid var(--kleur-lijn)}
.stat-getal{font-family:var(--font-heading);font-size:clamp(2rem,4vw,2.8rem);color:var(--kleur-groen);line-height:1;margin-bottom:.4rem}
.stat-label{font-size:.9rem;color:var(--kleur-tekst-zacht)}
.section-donker .stat{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}
.section-donker .stat-getal{color:var(--kleur-goud)}
.section-donker .stat-label{color:rgba(255,255,255,.85)}

.cta-band{background:var(--kleur-groen);color:var(--kleur-wit);padding:3.5rem 0}
.cta-band h2{color:var(--kleur-wit)}
.cta-band p{color:rgba(255,255,255,.88)}
.cta-band-inhoud{display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
@media (min-width:880px){.cta-band-inhoud{flex-direction:row;align-items:center;justify-content:space-between}}
.cta-band-terra{background:var(--kleur-terra)}
.cta-band-zand{background:var(--kleur-goud);color:var(--kleur-inkt)}
.cta-band-zand h2{color:var(--kleur-inkt)}
.cta-band-zand p{color:var(--kleur-tekst)}

.usp-lijst{list-style:none;padding:0;margin:0;display:grid;gap:.75rem}
.usp-lijst li{position:relative;padding-left:1.9rem}
.usp-lijst li::before{content:"";position:absolute;left:0;top:.45em;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--kleur-olijf);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.6 14.5L4 10.1l1.5-1.5 2.9 2.9 6.1-6.1L16 6.9z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' d='M10 0a10 10 0 100 20 10 10 0 000-20zm-1.6 14.5L4 10.1l1.5-1.5 2.9 2.9 6.1-6.1L16 6.9z'/%3E%3C/svg%3E") center/contain no-repeat}
.section-donker .usp-lijst li::before{background:var(--kleur-goud)}

.stappen{list-style:none;padding:0;margin:0;display:grid;gap:1.5rem;counter-reset:stap}
@media (min-width:880px){.stappen{grid-template-columns:repeat(3,1fr)}}
.stappen li{counter-increment:stap;background:var(--kleur-wit);border-radius:var(--radius);padding:1.75rem 1.5rem 1.5rem;border:1px solid var(--kleur-lijn);position:relative}
.stappen li::before{content:counter(stap);display:inline-flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--kleur-groen);color:var(--kleur-wit);font-family:var(--font-heading);font-size:1.2rem;margin-bottom:.9rem}
.stappen h3{font-size:1.2rem}

.citaat{border-left:4px solid var(--kleur-olijf);padding:.5rem 0 .5rem 1.5rem;margin:0;font-family:var(--font-accent);font-size:1.3rem;line-height:1.4;color:var(--kleur-inkt)}
.citaat cite{display:block;margin-top:.8rem;font-family:var(--font-body);font-style:normal;font-size:.95rem;color:var(--kleur-tekst-zacht)}

.melding{padding:1rem 1.25rem;border-radius:var(--radius-klein);border:1px solid var(--kleur-lijn);background:var(--kleur-wit)}
.melding-info{background:var(--kleur-groen-licht);border-color:var(--kleur-groen)}
.melding-let-op{background:var(--kleur-goud);border-color:var(--kleur-olijf)}
.melding-fout{background:#f8e5e5;border-color:var(--kleur-fout);color:var(--kleur-fout)}

/* ---------- Uitklappers (FAQ) ---------- */
.faq{border-top:1px solid var(--kleur-lijn)}
.faq details{border-bottom:1px solid var(--kleur-lijn)}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;font-weight:600;font-size:1.05rem;color:var(--kleur-inkt);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-size:1.6rem;font-weight:400;color:var(--kleur-groen);transition:transform var(--transitie)}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details > div,.faq details > p{padding:0 0 1.25rem;color:var(--kleur-tekst-zacht)}

/* ---------- Formulieren ---------- */
.form{display:grid;gap:1.1rem}
.form-rij{display:grid;gap:1.1rem}
@media (min-width:640px){.form-rij{grid-template-columns:1fr 1fr}}
.form-veld{display:flex;flex-direction:column;gap:.35rem}
.form-veld label,.form label{font-weight:600;font-size:.95rem;color:var(--kleur-inkt)}
.form-veld .hint{font-size:.85rem;color:var(--kleur-tekst-zacht)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=url],input[type=date],select,textarea{
  width:100%;font:inherit;color:var(--kleur-tekst);
  padding:.8rem 1rem;border:1.5px solid var(--kleur-zand-donker);border-radius:var(--radius-klein);
  background:var(--kleur-wit);transition:border-color var(--transitie),box-shadow var(--transitie);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--kleur-groen);box-shadow:0 0 0 3px rgba(74,112,91,.2)}
textarea{min-height:8rem;resize:vertical}
.form-keuze{display:flex;align-items:flex-start;gap:.6rem;font-weight:400}
.form-keuze input{width:1.15rem;height:1.15rem;margin-top:.2rem;accent-color:var(--kleur-groen)}
.form-acties{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.verplicht{color:var(--kleur-terra)}

/* ---------- Tabellen ---------- */
.tabel-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabel{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--kleur-wit);border-radius:var(--radius-klein);overflow:hidden}
.tabel th,.tabel td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--kleur-lijn);vertical-align:top}
.tabel th{background:var(--kleur-zand);font-weight:600;color:var(--kleur-inkt)}
.tabel tr:last-child td{border-bottom:0}

/* ---------- Broodkruimels & paginering ---------- */
.breadcrumbs{font-size:.88rem;color:var(--kleur-tekst-zacht);margin-bottom:1rem}
.breadcrumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.4rem}
.breadcrumbs li+li::before{content:"/";margin-right:.4rem;color:var(--kleur-zand-donker)}
.breadcrumbs a{color:var(--kleur-tekst-zacht);text-decoration:none}
.breadcrumbs a:hover{color:var(--kleur-groen)}
.paginering{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:2.5rem}
.paginering a,.paginering span{display:inline-flex;align-items:center;justify-content:center;min-width:2.6rem;height:2.6rem;padding:0 .8rem;border-radius:var(--radius-pil);border:1px solid var(--kleur-lijn);text-decoration:none;color:var(--kleur-tekst);background:var(--kleur-wit);transition:transform var(--transitie),background-color var(--transitie)}
.paginering a:hover{background:var(--kleur-zand);transform:scale(1.02)}
.paginering .actief{background:var(--kleur-groen);color:var(--kleur-wit);border-color:var(--kleur-groen)}

/* Filterbalk (shop) */
.filterbalk{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;padding:1rem 0;border-bottom:1px solid var(--kleur-lijn);margin-bottom:1.5rem}
.zijbalk{background:var(--kleur-wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius);padding:1.5rem}
.zijbalk h3{font-size:1.1rem;font-family:var(--font-body);font-weight:600}
.zijbalk ul{list-style:none;padding:0;margin:0}
.zijbalk li{padding:.35rem 0}
.zijbalk a{text-decoration:none;color:var(--kleur-tekst)}
.zijbalk a:hover,.zijbalk a.actief{color:var(--kleur-groen);font-weight:600}
.shop-layout{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:980px){.shop-layout{grid-template-columns:260px 1fr;align-items:start}}
/* Shop-overzicht: de inleiding onder "Assortiment" loopt even breed door als het raster eronder */
.shop-hoofd .shop-intro{max-width:none}

/* Proza (lange teksten) */
.proza{max-width:var(--container-smal)}
.proza h2{margin-top:2.2rem}
.proza h3{margin-top:1.6rem}
.proza img{border-radius:var(--radius);margin:1.5rem 0}
.proza ul li,.proza ol li{margin-bottom:.4rem}

.serif{font-family:var(--font-accent);font-weight:500;line-height:1.3}

/* ---------- Recepten (2 oktober 2026) ----------
   Een uitgewerkt voorbeeld uit het klantportaal, en de rest als kaart op slot:
   wie het wil zien, logt in of vraagt een account aan. */
.recept{display:grid;gap:2.5rem;grid-template-columns:1fr;align-items:start}
@media (min-width:980px){.recept{grid-template-columns:5fr 7fr;gap:4rem}}
.recept-media{position:relative}
.recept-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--radius)}
.recept-label{position:absolute;left:1rem;top:1rem}
.recept-label,.recept-slot{display:inline-block;font-size:.78rem;font-weight:600;letter-spacing:.05em;padding:.35rem .8rem;border-radius:var(--radius-pil);background:var(--kleur-wit);color:var(--kleur-groen-donker)}
.recept-met{color:var(--kleur-tekst-zacht);margin-bottom:1.75rem}
.recept-delen{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:640px){.recept-delen{grid-template-columns:2fr 3fr}}
.recept-delen h3{font-size:1.05rem;text-transform:uppercase;letter-spacing:.12em;color:var(--kleur-olijf-donker);margin-bottom:.9rem}
.recept-lijst{list-style:none;padding:0;margin:0}
.recept-lijst li{padding:.5rem 0}
.recept-lijst li:has(strong) + li:not(:has(strong)){margin-top:.5rem;padding-top:1rem;border-top:1px solid var(--kleur-lijn)}
.recept-lijst strong{color:var(--kleur-groen-donker)}
.recept-stappen{counter-reset:stap;list-style:none;padding:0;margin:0}
.recept-stappen li{counter-increment:stap;position:relative;padding:0 0 1rem 2.6rem;line-height:1.5}
.recept-stappen li::before{content:counter(stap);position:absolute;left:0;top:-.1rem;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-weight:700;font-size:.9rem;display:flex;align-items:center;justify-content:center}
.recept-kaart{display:flex;flex-direction:column;gap:.35rem;color:inherit;text-decoration:none}
.recept-kaart-beeld{position:relative;display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--kleur-zand)}
.recept-kaart-beeld img{width:100%;height:100%;object-fit:cover;transition:transform var(--transitie)}
.recept-kaart:hover .recept-kaart-beeld img,.recept-kaart:focus-visible .recept-kaart-beeld img{transform:scale(1.03)}
.recept-slot{position:absolute;left:.75rem;bottom:.75rem}
.recept-slot::before{content:'';display:inline-block;width:.7em;height:.55em;margin-right:.45em;border:2px solid currentColor;border-radius:2px;vertical-align:-.05em}
.recept-kaart-titel{font-weight:700;font-size:1.1rem;color:var(--kleur-groen-donker);line-height:1.3;margin-top:.5rem}
.recept-kaart-met{font-size:.9rem;color:var(--kleur-tekst-zacht)}
.recept-cta{margin-top:2.5rem;padding:1.75rem;border:1px solid var(--kleur-lijn);border-radius:var(--radius);background:var(--kleur-wit);display:flex;flex-direction:column;gap:1rem}
.recept-cta p{margin:0;max-width:40em}
@media (min-width:880px){.recept-cta{flex-direction:row;align-items:center;justify-content:space-between}.recept-cta .btn-groep{flex-shrink:0}}
@media (prefers-reduced-motion:reduce){.recept-kaart-beeld img{transition:none}.recept-kaart:hover .recept-kaart-beeld img{transform:none}}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:1000;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--kleur-lijn);
}
.nav-container{
  display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
  min-height:var(--header-hoogte);
}
/* Het logo (Blue Olive, 2 oktober 2026): de tegel was in een balk van 80 px
   te klein om te lezen, en een balk die dikker wordt wilden ze niet. Op een
   pagina met een hero valt de tegel daarom groot vanuit de balk over de hero:
   de groene tegel met het woordmerk op 76%, zonder tagline en zonder wit vlak
   eromheen (21 oktober 2026). De tegel blijft altijd zo groot, ook als je
   op een pagina zonder hero; de inhoud van de pagina begint onder
   de tegel (22 oktober 2026). Met het mobiele menu open en zodra je scrolt
   is hij klein (23 oktober 2026). */
.logo{display:flex;flex-direction:column;align-items:center;flex-shrink:0;text-decoration:none;align-self:flex-start;position:relative;z-index:2;padding:22px 0 0;margin-bottom:-80px;transition:padding var(--transitie),margin var(--transitie)}
.logo img{width:132px;height:132px;max-width:none;transition:width var(--transitie),height var(--transitie)}
main > .hero:first-child{padding-top:11.5rem}
main > .hero-compact:first-child{padding-top:10rem}
/* Zonder hero: zoveel ruimte boven de inhoud als de tegel onder de balk uitsteekt. */
/* In de shop staat de leverbalk tussen kop en inhoud: dan krijgt die balk de
   ruimte onder de tegel, en de inhoud niet nog eens (22 oktober 2026). */
body:not(:has(main > .hero:first-child)):not(:has(.site-header + .shop-balk)) main{padding-top:74px}
.site-header + .shop-balk{margin-top:74px}
@media (max-width:1099px){
  .logo{padding:14px 0 0;margin-bottom:-48px}
  .logo img{width:100px;height:100px}
  main > .hero:first-child,main > .hero-compact:first-child{padding-top:8rem}
  body:not(:has(main > .hero:first-child)):not(:has(.site-header + .shop-balk)) main{padding-top:34px}
  .site-header + .shop-balk{margin-top:34px}
  .nav-container:has(.nav-toggle:checked) .logo{padding:3px 0;margin-bottom:0;align-self:center}
  .nav-container:has(.nav-toggle:checked) .logo img{width:74px;height:74px}
}
/* Tussen 1100 en 1180 px staat het volledige menu in de balk, en
   daar past de grote tegel niet naast: daar blijft het de tegel in de balk. */
@media (min-width:1100px) and (max-width:1179px){
  .logo{padding:3px 0;margin-bottom:0;align-self:center}
  .logo img{width:74px;height:74px}
  main > .hero:first-child{padding-top:4.5rem}
  main > .hero-compact:first-child{padding-top:3rem}
  body:not(:has(main > .hero:first-child)):not(:has(.site-header + .shop-balk)) main{padding-top:0}
  .site-header + .shop-balk{margin-top:0}
}
/* Wat zelf meeschuift (een formulierkop, een fles) blijft onder de tegel staan. */
:root{--logo-uitsteek:74px}
@media (max-width:1099px){:root{--logo-uitsteek:34px}}
@media (min-width:1100px) and (max-width:1179px){:root{--logo-uitsteek:0px}}
/* Zodra je scrolt krimpt de tegel tot hij precies in de balk past
   (Blue Olive, 23 oktober 2026; kop.js zet .kop-klein). */
.site-header.kop-klein .logo{padding:3px 0;margin-bottom:0;align-self:center}
.site-header.kop-klein .logo img{width:74px;height:74px}
:root:has(.site-header.kop-klein){--logo-uitsteek:0px}
@media (prefers-reduced-motion:reduce){.logo,.logo img{transition:none}}
.nav-toggle{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.hamburger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:8px;cursor:pointer;border-radius:var(--radius-klein);background:transparent;border:1.5px solid var(--kleur-lijn)}
.hamburger span{display:block;height:2px;width:100%;background:var(--kleur-inkt);border-radius:2px;transition:transform var(--transitie),opacity var(--transitie)}
.main-nav{display:flex;align-items:center;gap:.9rem;flex:1;justify-content:flex-end}
.nav-menu{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:.25rem}
.nav-menu > li{position:relative}
.nav-menu > li > a{
  display:block;padding:.6rem .5rem;font-weight:500;font-size:.94rem;
  color:var(--kleur-inkt);text-decoration:none;border-radius:var(--radius-klein);
  transition:color var(--transitie),background-color var(--transitie);white-space:nowrap;
}
.nav-menu > li > a:hover,.nav-menu > li > a:focus-visible,.nav-menu > li.actief > a{color:var(--kleur-groen);background:var(--kleur-creme)}
.heeft-submenu > a::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.45em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.submenu{
  list-style:none;margin:0;padding:.5rem;
  position:absolute;top:100%;left:0;min-width:240px;
  background:var(--kleur-wit);border:1px solid var(--kleur-lijn);border-radius:var(--radius);
  box-shadow:var(--schaduw-hover);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--transitie),transform var(--transitie),visibility 0s linear 180ms;
}
.heeft-submenu:hover > .submenu,.heeft-submenu:focus-within > .submenu{opacity:1;visibility:visible;transform:translateY(0);transition-delay:0s}
.submenu a{display:block;padding:.6rem .85rem;color:var(--kleur-tekst);text-decoration:none;border-radius:var(--radius-klein);font-size:.95rem;transition:background-color var(--transitie),color var(--transitie)}
.submenu a:hover,.submenu a:focus-visible{background:var(--kleur-creme);color:var(--kleur-groen)}
.nav-acties{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.nav-login{font-weight:500;color:var(--kleur-inkt);text-decoration:none;white-space:nowrap}
.nav-login:hover{color:var(--kleur-groen)}
/* Zoeken, Inloggen en Account aanvragen in dezelfde letter en grootte als
   het menu (Blue Olive, 13 oktober 2026); Zoeken krijgt een vergrootglas. */
@media (min-width:1100px){
  .site-header .shop-zoek-knop,.site-header .nav-login,.site-header .nav-acties .btn{font-family:var(--font-body);font-size:.94rem;font-weight:500;line-height:1.6}
  .site-header .shop-zoek-knop,.site-header .nav-login{color:var(--kleur-inkt)}
  .site-header .nav-acties .btn{line-height:1}
  .site-header .shop-zoek-knop{display:inline-flex;align-items:center;gap:.4em;padding:.6rem .5rem;border-radius:var(--radius-klein);transition:color var(--transitie),background-color var(--transitie)}
  .site-header .shop-zoek-knop:hover,.site-header .shop-zoek-schakelaar:checked+.shop-zoek-knop{color:var(--kleur-groen);background:var(--kleur-creme)}
  .site-header .shop-zoek-knop::before{content:"";width:1.05em;height:1.05em;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/contain no-repeat}
}

@media (max-width:1080px){
  .nav-menu > li > a{padding:.6rem .4rem;font-size:.9rem}
  .main-nav{gap:1rem}
}
@media (max-width:1099px){
  .hamburger{display:flex}
  .main-nav{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--kleur-wit);border-bottom:1px solid var(--kleur-lijn);
    box-shadow:var(--schaduw-hover);
    padding:.75rem 1.25rem 1.5rem;
    max-height:calc(100vh - var(--header-hoogte));overflow-y:auto;
  }
  .nav-toggle:checked ~ .main-nav{display:flex;animation:zachtOp .3s cubic-bezier(.16,1,.3,1)}
  .nav-toggle:checked ~ .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked ~ .hamburger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-menu{flex-direction:column;align-items:stretch;gap:0}
  .nav-menu > li{border-bottom:1px solid var(--kleur-lijn)}
  .nav-menu > li > a{padding:.9rem 0;font-size:1.05rem;border-radius:0}
  .nav-menu > li > a:hover,.nav-menu > li > a:focus-visible{background:transparent}
  .heeft-submenu > a::after{display:none}
  .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .75rem 1rem;min-width:0;background:transparent;transition:none}
  .submenu a{padding:.5rem 0;color:var(--kleur-tekst-zacht)}
  .nav-acties{flex-direction:column;align-items:stretch;gap:.75rem;padding-top:1.25rem}
  .nav-acties .btn{width:100%}
  .nav-login{text-align:center;padding:.5rem}
}

/* ---------- Footer ---------- */
.site-footer{background:var(--kleur-zand);color:var(--kleur-tekst);margin-top:4rem;font-size:.95rem}
.site-footer a{color:var(--kleur-tekst);text-decoration:none}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--kleur-inkt);text-decoration:underline}
.site-footer a.btn-licht{color:var(--kleur-inkt);text-decoration:none}
.site-footer a.btn-licht:hover,.site-footer a.btn-licht:focus-visible{color:var(--kleur-inkt);text-decoration:none}
.footer-grid{display:grid;gap:2.5rem;padding:3.5rem 1.25rem 2.5rem;grid-template-columns:1fr}
@media (min-width:640px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (min-width:980px){.footer-grid{grid-template-columns:1.6fr 1fr 1fr 1.2fr}}
.footer-kolom h3{font-family:var(--font-body);font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--kleur-olijf-donker);margin-bottom:.6rem}
/* Alle regels in de footer even dicht op elkaar, net als lopende tekst */
.footer-kolom{line-height:1.7}
.footer-kolom ul{list-style:none;margin:0;padding:0}
.footer-kolom li{margin:0}
.footer-kolom p,.footer-kolom address{margin:0}
.footer-merk p{color:var(--kleur-tekst-zacht);max-width:32em}
.footer-merk .btn{margin-top:1rem}
.footer-kolom address{font-style:normal}
.footer-kolom .footer-tel{display:inline-block;font-weight:600;color:var(--kleur-inkt)}
/* Contact of afspraak maken als knop onderaan de kolom Contact (Blue Olive, 23 oktober 2026). */
.footer-kolom > .btn{margin-top:1rem}
.site-footer a.btn-primary{color:var(--kleur-wit);text-decoration:none}
.site-footer a.btn-primary:hover,.site-footer a.btn-primary:focus-visible{color:var(--kleur-op-olijf);text-decoration:none}
.footer-juridisch{font-size:.85rem;color:var(--kleur-tekst-zacht)}
.footer-onder{border-top:1px solid var(--kleur-zand-donker)}
.footer-onder .container{display:flex;flex-direction:column;gap:.75rem;padding-top:1.25rem;padding-bottom:1.25rem;font-size:.85rem;color:var(--kleur-tekst-zacht)}
.footer-onder p{margin:0}
@media (min-width:880px){.footer-onder .container{flex-direction:row;align-items:center;justify-content:space-between}}
.juridische-links{display:flex;flex-direction:column;gap:.35rem;font-size:.85rem}
.juridische-links a{color:rgba(232,231,220,.7)}
.juridische-links a:hover{color:var(--kleur-goud)}
@media (min-width:640px){.juridische-links{flex-direction:row;flex-wrap:wrap;gap:1.25rem}}

/* ---------- Beweging ---------- */
@keyframes opkomst{from{opacity:0;transform:translateY(28px);filter:blur(12px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@keyframes zachtOp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes bedaren{from{transform:scale(1.12)}to{transform:scale(1)}}
.anim-op{opacity:0;animation:opkomst 1.1s cubic-bezier(.16,1,.3,1) forwards}
.anim-zacht{opacity:0;animation:zachtOp 1s cubic-bezier(.16,1,.3,1) forwards}
.bedaar{animation:bedaren 1.8s cubic-bezier(.16,1,.3,1) forwards}
.d1{animation-delay:.25s} .d2{animation-delay:.42s} .d3{animation-delay:.7s} .d4{animation-delay:.85s}
@media (prefers-reduced-motion:reduce){
  .anim-op,.anim-zacht,.bedaar{animation:none;opacity:1;transform:none;filter:none}
  .btn,.card,.tegel,.product-card,.logo-item,.tag,.paginering a{transition:none}
  .btn:hover,.card:hover,.tegel:hover,.product-card:hover,.logo-item:hover{transform:none}
  .tegel:hover img{transform:none}
  html{scroll-behavior:auto}
  .nav-toggle:checked ~ .main-nav{animation:none}
}

/* ---------- Hulpklassen ---------- */
.verberg-mobiel{display:none}
@media (min-width:880px){.verberg-mobiel{display:initial}.verberg-desktop{display:none}}
.flex{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.tussen{justify-content:space-between}
.rand-boven{border-top:1px solid var(--kleur-lijn)}
.rond{border-radius:var(--radius)}
.schaduw{box-shadow:var(--schaduw)}
.bg-wit{background:var(--kleur-wit)}
.bg-zand{background:var(--kleur-zand)}
.bg-goud{background:var(--kleur-goud)}
.bg-groen{background:var(--kleur-groen);color:var(--kleur-wit)}
.pad{padding:1.5rem}
.pad-groot{padding:2.5rem}

/* Juridische pagina's — leesbaarheid boven sfeer. */
.juridisch{max-width:44rem;margin:0 auto;padding:4rem 1.25rem;line-height:1.7}
.juridisch h1{margin:0 0 .5rem}
.juridisch h2{margin:2.5rem 0 .75rem;font-size:1.25rem}
.juridisch h3{margin:1.75rem 0 .5rem;font-size:1.05rem}
.juridisch p,.juridisch li{margin:0 0 .75rem}
.juridisch ul,.juridisch ol{padding-left:1.25rem}
.juridisch dl{margin:0 0 1rem}
.juridisch dt{font-weight:600;margin-top:.75rem}
.juridisch dd{margin:0 0 .25rem}
.juridisch .bijgewerkt{opacity:.7;font-size:.9rem}
.juridisch .kader{border:1px solid rgba(0,0,0,.15);border-radius:.5rem;padding:1.25rem;margin:1.5rem 0}
.juridisch .invullen{background:#fff2a8;padding:0 .25rem;border-radius:.2rem}
@media print{.juridisch .kader{page-break-inside:avoid}}

/* shop:begin */
.shop-zoek{display:inline-flex;align-items:center;gap:.5rem}
.shop-zoek input[type="search"]{font:inherit;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 25%,transparent);border-radius:.5rem;padding:.45rem .75rem}
.shop-zoek button{font:inherit;color:inherit;background:transparent;border:0;border-radius:.5rem;padding:.45rem .9rem;cursor:pointer}
.shop-zoek-item{list-style:none}
.shop-zoek{position:relative}
.shop-zoek-vak{display:inline-flex;align-items:center;gap:.5rem}
.shop-zoek-schakelaar{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.shop-zoek-knop{display:none;font:inherit;color:inherit;cursor:pointer;border:0;border-radius:.5rem;padding:.35rem .75rem}
.shop-zoek-schakelaar:focus-visible+.shop-zoek-knop{outline:2px solid currentColor;outline-offset:2px}
@media (min-width:48em){
  .shop-zoek-knop{display:inline-block}
  .shop-zoek-vak{display:none}
  .shop-zoek-schakelaar:checked~.shop-zoek-vak{display:inline-flex;position:absolute;top:calc(100% + .4rem);right:0;z-index:30;width:min(22rem,80vw);padding:.5rem;border:1px solid currentColor;border-radius:.6rem;background:var(--kleur-wit,Canvas)}
  .shop-zoek-schakelaar:checked~.shop-zoek-vak input[type="search"]{flex:1 1 auto;min-width:0}
}
@media (max-width:47.9375em){
  .shop-zoek{width:100%}
  .shop-zoek-knop{display:none}
  .shop-zoek-vak,.shop-zoek-schakelaar:checked~.shop-zoek-vak{display:flex;position:static;width:100%;padding:0;border:0;background:transparent}
  .shop-zoek-vak input[type="search"]{flex:1 1 auto;min-width:0}
}
.shop-submenu{list-style:none;margin:.35rem 0 0;padding:.5rem;columns:11rem;column-gap:1.5rem;width:min(44rem,92vw);max-height:calc(100vh - 6rem);overflow:auto}
.shop-submenu li{break-inside:avoid}
.shop-submenu>li:not(.shop-menu-item){column-span:all;margin:0 0 .4rem}
.shop-submenu>li:not(.shop-menu-item)+li:not(.shop-menu-item),
.shop-submenu>li.shop-menu-item+li:not(.shop-menu-item){margin:.5rem 0 0}
.shop-submenu>li:not(.shop-menu-item)>a{display:block;border:1px solid currentColor;border-radius:.6rem;padding:.5rem .85rem;font-weight:600;text-align:center}
.shop-submenu>li:not(.shop-menu-item)>a:hover,.shop-submenu>li:not(.shop-menu-item)>a:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);text-decoration:none}
.shop-submenu a{color:inherit;text-decoration:none;padding:.28rem .5rem;line-height:1.3}
.shop-submenu a:hover,.shop-submenu a:focus-visible{text-decoration:underline}
.shop-submenu .shop-menu-alle{column-span:all;margin:0 0 .6rem}
.shop-submenu .shop-menu-alle>a{display:block;border:1px solid currentColor;border-radius:.6rem;padding:.5rem .85rem;font-weight:600;text-align:center}
.shop-submenu .shop-menu-alle>a:hover,.shop-submenu .shop-menu-alle>a:focus-visible{background:color-mix(in srgb,currentColor 8%,transparent);text-decoration:none}
.shop-submenu-groepen{columns:10rem 4;width:min(48.5rem,92vw)}
.shop-submenu .shop-menu-groep{margin:0 0 .6rem}
.shop-menu-groep>ul{list-style:none;margin:0;padding:0}
.shop-submenu .shop-menu-groep a{padding:.16rem .5rem}
.shop-menu-kop{display:block;padding:.2rem .5rem .15rem;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.65}
@media (max-width:47.9375em){
  .shop-submenu{columns:1;width:auto;max-height:none;overflow:visible}
  .shop-submenu .shop-menu-item{display:none}
}
.shop-kopinlog{display:none}
html:not(.ingelogd) [data-alleen-ingelogd]{display:none!important}
html.ingelogd [data-alleen-gast],html.ingelogd a[href*="/shop/inloggen"],html.ingelogd a[href*="/shop/aanvragen"]{display:none!important}
.winkelnaam{display:inline-block;max-width:14em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
@media (max-width:1099px){
  .shop-kopinlog{display:inline-flex;align-items:center;margin-left:auto}
  .shop-kopinlog a{display:inline-flex;align-items:center;min-height:44px;padding:0 .9rem;border:1.5px solid currentColor;border-radius:.5rem;font-weight:600;text-decoration:none;color:inherit;white-space:nowrap}
  .shop-kopinlog .winkelnaam{max-width:9em}
  nav>.nav-acties{order:-1;padding:0 0 1rem;margin:0 0 .25rem;border-bottom:1px solid color-mix(in srgb,currentColor 15%,transparent)}
  .shop-submenu{columns:1;width:auto;max-height:none;overflow:visible}
  .shop-submenu .shop-menu-item{display:none}
  li:has(>.shop-submenu>li:not(.shop-menu-item)){display:flex;flex-direction:column}
  li:has(>.shop-submenu>li:not(.shop-menu-item))>.shop-submenu{order:-1;padding:.75rem 0 .35rem}
  .shop-submenu:not(:has(>li:not(.shop-menu-item))){display:none}
}
/* shop:eind */

/* Bestellijst (de verlanglijst in My Blue Olive) en Winkelwagen in de bovenbalk,
   met een icoon zoals Zoeken (Blue Olive, 13 oktober 2026). */
.nav-icoon{display:inline-flex;align-items:center;gap:.4em}
.nav-icoon::before{content:"";width:1.25em;height:1.25em;flex:none;background:currentColor}
.nav-acties .nav-icoon{padding:.5rem .1rem}
@media (min-width:1100px){.site-header .nav-acties{gap:.5rem}}
@media (min-width:1100px){.site-header .nav-menu > li > a{padding-left:.3rem;padding-right:.3rem}}
@media (max-width:1099px){.nav-icoon::after{content:attr(aria-label)}}
.nav-bestellijst::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z'/%3E%3C/svg%3E") center/contain no-repeat}
.nav-wagen::before{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4h2l2.4 11h11l2-8H6.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='17' cy='20' r='1.4'/%3E%3Cpath d='M3 4h2l2.4 11h11l2-8H6.2'/%3E%3C/svg%3E") center/contain no-repeat}
/* Zoeken als alleen het vergrootglas, in één rij met Bestellijst en
   Winkelwagen (Blue Olive, 22 oktober 2026). Het woord blijft in de knop
   staan voor voorlezers; het zoekvak klapt eronder open. */
@media (min-width:1100px){
  .site-header .main-nav{gap:.5rem}
  .site-header .shop-zoek-knop{font-size:0;gap:0;padding:.5rem .1rem;line-height:0}
  .site-header .shop-zoek-knop:hover,.site-header .shop-zoek-schakelaar:checked+.shop-zoek-knop{background:transparent}
  .site-header .shop-zoek-knop::before{width:1.175rem;height:1.175rem}
}
/* Meer lucht in de balk: ruimte tussen de menu-items, en een duidelijke
   afstand tussen Contact en Zoeken, Bestellijst en Winkelwagen
   (Blue Olive, 22 oktober 2026). Onder 1180 px is daar geen plek voor. */
@media (min-width:1180px){
  .site-header .nav-menu{gap:.7rem}
  .site-header .nav-menu > .shop-zoek-item{margin-left:1.25rem}
  .site-header .nav-acties{gap:.9rem}
}
/* Ook in de uitklapmenu's wat meer ruimte tussen de regels. */
@media (min-width:1100px){
  .shop-submenu{padding:1rem 1.1rem;column-gap:2.25rem}
  .shop-submenu a{padding:.42rem .5rem}
  .shop-submenu-groepen{width:min(52rem,92vw)}
  .shop-submenu .shop-menu-groep{margin:0 0 1.1rem}
  .shop-submenu .shop-menu-groep a{padding:.26rem .5rem}
  .shop-menu-kop{padding:.2rem .5rem .35rem}
  .shop-submenu .shop-menu-alle{margin:0 0 1rem}
  .submenu:not(.shop-submenu){padding:.75rem}
  .submenu:not(.shop-submenu) a{padding:.7rem 1rem}
}
/* De uitklapmenu's van Assortiment en Merken: niet vet, in het lichte
   olijfgroen (Blue Olive, 23 oktober 2026). */
.shop-submenu,.shop-submenu a,.shop-submenu a:hover,.shop-submenu a:focus-visible{color:var(--kleur-olijf)}
.shop-submenu a,.shop-submenu>li:not(.shop-menu-item)>a,.shop-submenu .shop-menu-alle>a,.shop-menu-kop{font-weight:400}
.shop-submenu a:hover,.shop-submenu a:focus-visible{background:var(--kleur-creme)}

/* ---------- Proefpakket: de doos die zich vult (proefdoos.js) ----------
   Zonder script staan alle vragen onder elkaar; .leeft zet één vraag tegelijk
   neer met de doos ernaast. */
@keyframes pdIn{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes pdVak{0%{opacity:0;transform:translateY(-18px) scale(.6) rotate(-6deg)}70%{opacity:1;transform:translateY(2px) scale(1.04)}100%{opacity:1;transform:none}}
@keyframes pdVink{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes pdDicht{from{transform:translateY(-104%)}to{transform:none}}
.pd{padding:2.5rem 0 3.5rem;background:linear-gradient(180deg,var(--kleur-zand) 0,var(--kleur-creme) 340px,var(--kleur-wit) 620px)}
.pd-raam{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "form" "mini"}
.pd-kop{grid-area:kop}
.pd-kop h1,.pd-kop h2{margin-bottom:.5rem}
.pd-kop .lead{margin:0;max-width:34em}
.pd-form{grid-area:form;position:relative}
.pd-beeld{grid-area:beeld;display:none}
.pd-minibalk{grid-area:mini;display:none}
@media (min-width:980px){
  .pd{padding:3.5rem 0 5rem}
  .pd-raam{grid-template-columns:minmax(0,1fr) 400px;column-gap:4rem;grid-template-areas:"kop beeld" "form beeld";align-items:start}
  .pd-raam.leeft .pd-beeld{display:block;position:sticky;top:calc(var(--header-hoogte) + 1.5rem)}
}

/* Voortgang */
.pd-voortgang{display:none;list-style:none;margin:0 0 1.75rem;padding:0;gap:.4rem;counter-reset:pd}
html.js .pd-voortgang{display:flex}
.pd-voortgang li{flex:1;position:relative}
.pd-voortgang li::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--kleur-zand-donker);transition:background var(--transitie)}
.pd-voortgang li.is-af::after{background:var(--kleur-olijf)}
.pd-voortgang li.is-nu::after{background:var(--kleur-groen)}
.pd-voortgang button{all:unset;cursor:pointer;display:flex;align-items:center;gap:.45rem;padding:.4rem 0 .7rem;font-size:.85rem;font-weight:600;color:var(--kleur-tekst-zacht)}
.pd-voortgang button span{display:inline-grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;font-size:.75rem;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn)}
.pd-voortgang .is-nu button{color:var(--kleur-groen-donker)}
.pd-voortgang .is-nu button span{background:var(--kleur-groen);color:var(--kleur-wit);box-shadow:none}
.pd-voortgang .is-af button span{background:var(--kleur-olijf);color:var(--kleur-wit);box-shadow:none}
.pd-voortgang button:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:2px;border-radius:4px}
@media (max-width:520px){.pd-voortgang button{font-size:0;gap:0}.pd-voortgang button span{font-size:.75rem}}

/* Een vraag */
.pd-stap{border:0;margin:0 0 2.5rem;padding:0;min-width:0}
html.js .pd-raam:not(.leeft) .pd-stap ~ .pd-stap{display:none}
.leeft .pd-stap{display:none;margin:0}
.leeft .pd-stap.is-actief{display:block;animation:pdIn .45s cubic-bezier(.16,1,.3,1)}
.pd-stap legend{padding:0;margin:0 0 1.1rem;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.45rem,2.6vw,1.9rem);line-height:1.2;color:var(--kleur-groen-donker)}
.pd-stap legend:focus{outline:none}
.pd-nr{display:block;font-family:var(--font-body);font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kleur-olijf-donker);margin-bottom:.4rem}
.pd-hint{color:var(--kleur-tekst-zacht);margin:-.4rem 0 1.1rem}
.pd-hint-klein{font-size:.9rem;margin:1rem 0 0}
.pd-sub{font-weight:600;color:var(--kleur-inkt);margin:1.75rem 0 .75rem}

/* Keuzetegels: het rondje of vinkje zelf is onzichtbaar, de tegel is de knop */
.pd-tegel input,.pd-smaak input,.pd-pil input,.ct-doel input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.pd-tegels{display:grid;gap:.75rem;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:640px){.pd-tegels-zaak{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pd-tegels-maat{grid-template-columns:1fr}
@media (min-width:640px){.pd-tegels-maat{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pd-tegel{position:relative;display:flex;flex-direction:column;gap:.2rem;padding:1.1rem 1rem 1rem;border-radius:var(--radius-knop);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);cursor:pointer;transition:transform var(--transitie),box-shadow var(--transitie),background var(--transitie),color var(--transitie)}
.pd-tegel:hover{box-shadow:0 0 0 2px var(--kleur-groen);transform:translateY(-2px)}
.pd-tegel strong{font-size:1rem;line-height:1.3;color:var(--kleur-inkt)}
.pd-tegel small{font-size:.85rem;line-height:1.4;color:var(--kleur-tekst-zacht)}
.pd-icoon{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--kleur-groen-licht);color:var(--kleur-groen);margin-bottom:.55rem;transition:background var(--transitie),color var(--transitie)}
.pd-icoon svg,.ct-icoon svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pd-tegel:has(input:checked){background:var(--kleur-groen);box-shadow:0 0 0 2px var(--kleur-groen)}
.pd-tegel:has(input:checked) strong,.pd-tegel:has(input:checked) small,.pd-tegel:has(input:checked) em{color:var(--kleur-wit)}
.pd-tegel:has(input:checked) .pd-icoon{background:var(--kleur-wit);color:var(--kleur-groen)}
.pd-tegel::after,.pd-smaak::after{content:"";position:absolute;top:.7rem;right:.7rem;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--kleur-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a705b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat;transform:scale(0);transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.pd-tegel:has(input:checked)::after,.pd-smaak:has(input:checked)::after{transform:scale(1)}
.pd-tegel:has(input:focus-visible),.pd-smaak:has(input:focus-visible),.pd-pil:has(input:focus-visible),.ct-doel:has(input:focus-visible){outline:3px solid var(--kleur-olijf);outline-offset:3px}

/* Formaat: een minidoos met zoveel vakjes als er producten in gaan */
.pd-maat em{font-style:normal;font-weight:700;font-size:1.15rem;color:var(--kleur-groen);margin-top:.35rem}
.pd-mini{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;width:4.4rem;padding:5px;border-radius:6px;background:var(--kleur-zand);margin-bottom:.7rem}
.pd-mini i{aspect-ratio:1;border-radius:2px;background:var(--kleur-olijf)}
.pd-tegel:has(input:checked) .pd-mini{background:rgba(255,255,255,.2)}
.pd-tegel:has(input:checked) .pd-mini i{background:var(--kleur-wit)}
.pd-vlag{position:absolute;top:-.6rem;left:1rem;padding:.15rem .6rem;border-radius:var(--radius-pil);background:var(--kleur-olijf);color:var(--kleur-inkt);font-size:.7rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}

/* Smaken: productfoto's om aan te tikken */
.pd-smaken{display:grid;gap:.6rem;grid-template-columns:repeat(3,minmax(0,1fr))}
.pd-smaak{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-knop);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);cursor:pointer;overflow:hidden;transition:transform var(--transitie),box-shadow var(--transitie)}
.pd-smaak:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--kleur-groen)}
.pd-smaak img{width:100%;aspect-ratio:1;object-fit:contain;padding:.6rem;background:var(--kleur-wit);transition:transform .35s cubic-bezier(.16,1,.3,1)}
.pd-smaak span{padding:.5rem .65rem .65rem;font-size:.85rem;font-weight:600;line-height:1.3;color:var(--kleur-inkt);border-top:1px solid var(--kleur-zand)}
.pd-smaak:has(input:checked){box-shadow:0 0 0 3px var(--kleur-groen)}
.pd-smaak:has(input:checked) span{background:var(--kleur-groen);color:var(--kleur-wit);border-color:var(--kleur-groen)}
.pd-smaak:has(input:checked) img{transform:scale(1.06)}
.pd-smaak::after{background-color:var(--kleur-groen);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
@media (min-width:640px){.pd-smaken{gap:.75rem;grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}}

.pd-pillen{display:flex;flex-wrap:wrap;gap:.5rem}
.pd-pil span{display:inline-block;padding:.55rem 1rem;border-radius:var(--radius-pil);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);font-size:.92rem;font-weight:600;cursor:pointer;transition:background var(--transitie),color var(--transitie),box-shadow var(--transitie)}
.pd-pil:hover span{box-shadow:0 0 0 2px var(--kleur-groen)}
.pd-pil:has(input:checked) span{background:var(--kleur-groen);color:var(--kleur-wit);box-shadow:0 0 0 2px var(--kleur-groen)}
.pd-pil:has(input:checked) span::before{content:"✓ "}

/* Categorieën: per categorie een vinkje, en na het aanvinken een vrij veld */
.pd-cats{display:grid;gap:.5rem .75rem;grid-template-columns:1fr;align-items:start}
@media (min-width:640px){.pd-cats{grid-template-columns:1fr 1fr}}
.pd-cat{display:flex;flex-direction:column;gap:.4rem}
.pd-cat .pd-pil,.pd-cat .pd-pil span{display:block}
.pd-cat-veld{width:100%;font-size:.9rem}
.pd-cat:not(:has(input:checked)) .pd-cat-veld{display:none}

/* Gekozen product uit de shop */
.pd-gekozen{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:0 0 1.25rem}
.pd-gekozen[hidden]{display:none}
.pd-gekozen-weg{all:unset;cursor:pointer;flex:none;font-size:1.4rem;line-height:1;padding:.15rem .45rem;border-radius:6px;color:var(--kleur-groen-donker)}
.pd-gekozen-weg:hover{background:var(--kleur-wit)}
.pd-gekozen-weg:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:2px}

/* Gegevens */
.pd-samenvatting{padding:.8rem 1rem;border-radius:10px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-size:.95rem;margin:-.2rem 0 1.25rem}
.pd-velden{display:grid;gap:.9rem 1rem;grid-template-columns:1fr}
@media (min-width:640px){.pd-velden{grid-template-columns:1fr 1fr}.pd-veld-breed{grid-column:1/-1}}
.pd-veld{display:flex;flex-direction:column;gap:.3rem}
.pd-veld label{font-weight:600;font-size:.92rem;color:var(--kleur-inkt)}
.pd-akkoord{display:flex;gap:.6rem;align-items:flex-start;margin:1.1rem 0 1.4rem;font-size:.9rem;color:var(--kleur-tekst-zacht)}
.pd-akkoord input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:none;accent-color:var(--kleur-groen)}
.pd-verstuur{width:100%}
@media (min-width:640px){.pd-verstuur{width:auto}}

.pd-nav{display:none}
html.js .pd-nav{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.75rem}
.pd-nav [data-verder]{margin-left:auto}
.pd-terug{all:unset;cursor:pointer;font-family:var(--font-body);font-size:1rem;line-height:1;font-weight:600;color:var(--kleur-tekst-zacht);padding:.6rem 0}
.pd-terug::before{content:"← "}
.pd-terug:hover{color:var(--kleur-groen-donker)}
.pd-terug:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:3px;border-radius:4px}
.pd-terug[hidden],.pd-nav [hidden]{display:none}

/* De doos */
.pd-doos{position:relative;overflow:hidden;border-radius:20px;padding:1.25rem;background:var(--kleur-zand);box-shadow:inset 0 0 0 1px var(--kleur-zand-donker)}
.pd-etiket{display:flex;flex-direction:column;align-items:flex-start;margin-bottom:1rem;padding:.7rem 1rem;border-radius:10px;background:var(--kleur-wit)}
.pd-etiket span{font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kleur-olijf-donker)}
.pd-etiket strong{font-family:var(--font-accent);font-weight:600;font-size:1.45rem;line-height:1.3;color:var(--kleur-groen-donker)}
.pd-etiket strong::first-letter{text-transform:uppercase}
.pd-vakken{display:grid;gap:6px;grid-template-columns:repeat(var(--kolommen,4),1fr)}
.pd-vak{aspect-ratio:1;border-radius:8px;border:1.5px dashed var(--kleur-zand-donker);background:rgba(255,255,255,.45);overflow:hidden;transition:border-color var(--transitie)}
.pd-vak.vol{border:0;background:var(--kleur-wit)}
.pd-vak.nieuw{animation:pdVak .55s cubic-bezier(.16,1,.3,1) both}
.pd-vak img{width:100%;height:100%;object-fit:contain;padding:4px}
.pd-vak span{display:flex;align-items:center;justify-content:center;height:100%;padding:4px;font-size:.62rem;font-weight:600;line-height:1.2;text-align:center;color:var(--kleur-groen-donker);overflow-wrap:anywhere}
.pd-onder{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;font-size:.9rem;font-weight:600;color:var(--kleur-groen-donker)}
.pd-onder span:last-child{color:var(--kleur-tekst-zacht);font-weight:500}
.pd-bel{margin:1rem 0 0;font-size:.92rem;color:var(--kleur-tekst-zacht);text-align:center}
.pd-deksel{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;background:var(--kleur-groen);color:var(--kleur-wit);transform:translateY(-104%)}
.pd-deksel span{font-family:var(--font-accent);font-size:2.4rem;line-height:1.2}
.pd-deksel small{font-size:.75rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--kleur-goud)}
.klaar .pd-deksel{animation:pdDicht .8s cubic-bezier(.65,0,.35,1) .2s both}

/* Op de telefoon: de doos als balkje onderaan */
@media (max-width:979px){
  .leeft .pd-minibalk{display:flex;align-items:center;gap:.75rem;position:sticky;bottom:0;z-index:5;margin:0 -1.25rem;padding:.65rem 1.25rem;background:var(--kleur-wit);border-top:1px solid var(--kleur-lijn);font-size:.88rem;font-weight:600;color:var(--kleur-groen-donker)}
  .pd-minivakken{display:flex}
  .pd-minivakken img{width:2.1rem;height:2.1rem;object-fit:contain;padding:2px;border-radius:6px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);margin-right:-.5rem;animation:pdVak .45s cubic-bezier(.16,1,.3,1) both}
  .pd-minivakken:not(:empty){margin-right:.5rem}
  .pd-minivakken:empty::before{content:"";width:2.1rem;height:2.1rem;border-radius:6px;border:1.5px dashed var(--kleur-zand-donker)}
}

/* Verstuurd */
.klaar .pd-stap,.klaar .pd-nav,.klaar .pd-voortgang,.klaar .pd-minibalk,.klaar .pd-gekozen{display:none!important}
.pd-form p[aria-live]:not(:empty){font-size:1.05rem}
.klaar .pd-form p[aria-live]{margin:0!important;padding:1.5rem;border-radius:14px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-size:1.25rem;font-weight:600;line-height:1.45}
.klaar .pd-form p[aria-live]:focus{outline:none}

/* Compacter (Blue Olive, 22 oktober 2026): hetzelfde verloop, minder ruimte.
   De categorieën staan als knopjes naast elkaar; een aangevinkte categorie
   krijgt een eigen regel met het veld ernaast. */
.pd-raam{gap:1.1rem}
.pd-kop h1,.pd-kop h2{margin-bottom:.35rem}
.pd-voortgang{margin-bottom:1.1rem}
.pd-voortgang button{padding:.25rem 0 .5rem}
.pd-stap{margin-bottom:1.75rem}
.pd-stap legend{margin-bottom:.7rem;font-size:clamp(1.3rem,2.2vw,1.6rem)}
.pd-nr{margin-bottom:.25rem}
.pd-hint{margin:-.2rem 0 .8rem;font-size:.95rem}
.pd-sub{margin:1.1rem 0 .55rem}
.pd-cats{display:flex;flex-wrap:wrap;gap:.4rem}
.pd-cat{display:block}
.pd-cat .pd-pil,.pd-cat .pd-pil span{display:inline-block}
.pd-cats .pd-pil span,.pd-pillen .pd-pil span{padding:.4rem .8rem;font-size:.88rem}
.pd-cat:has(input:checked){flex:1 1 100%;display:flex;flex-direction:row;align-items:center;gap:.5rem}
.pd-cat:has(input:checked) .pd-pil{flex:none}
.pd-cat:has(input:checked) .pd-cat-veld{flex:1;min-width:0;padding-top:.4rem;padding-bottom:.4rem}
.pd-pillen{gap:.4rem}
.pd-tegels{gap:.6rem}
.pd-tegel{padding:.8rem .85rem .75rem}
.pd-icoon{width:2.25rem;height:2.25rem;margin-bottom:.35rem}
.pd-mini{margin-bottom:.45rem}
.pd-maat em{margin-top:.15rem}
.pd-velden{gap:.7rem .9rem}
.pd-akkoord{margin:.8rem 0 1rem}
html.js .pd-nav{margin-top:1.1rem}
.pd-doos{padding:1rem}
.pd-etiket{margin-bottom:.75rem;padding:.55rem .85rem}
.pd-etiket strong{font-size:1.25rem}
.pd-onder{margin-top:.75rem}
.pd-bel{margin-top:.75rem}
@media (min-width:980px){
  .pd{padding:2.25rem 0 3rem}
  .pd-raam{grid-template-columns:minmax(0,1fr) 330px;column-gap:2.75rem}
  .pd-raam.leeft .pd-beeld{top:calc(var(--header-hoogte) + 1rem)}
}

/* Na het proeven */
.pd-route{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr;counter-reset:route}
@media (min-width:760px){.pd-route{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.pd-route li{position:relative;padding:1.4rem 1.4rem 1.2rem;border-radius:16px;background:var(--kleur-creme);box-shadow:0 0 0 1px var(--kleur-zand)}
.pd-route h3{font-size:1.15rem;margin:.6rem 0 .3rem}
.pd-route p{margin:0;color:var(--kleur-tekst-zacht);font-size:.95rem}
.pd-route-nr{display:inline-grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--kleur-groen);color:var(--kleur-wit);font-weight:700}
@media (min-width:760px){.pd-route li:not(:last-child)::after{content:"";position:absolute;top:2.5rem;right:-1.25rem;width:1.25rem;height:2px;background:var(--kleur-olijf)}}

@media (prefers-reduced-motion:reduce){
  .leeft .pd-stap.is-actief,.pd-vak.nieuw,.pd-minivakken img{animation:none}
  .klaar .pd-deksel{animation:none;transform:none}
  .pd-tegel,.pd-smaak,.pd-smaak img,.pd-tegel::after,.pd-smaak::after{transition:none}
  .pd-tegel:hover,.pd-smaak:hover{transform:none}
}

/* ---------- Contact: wie je spreekt, hoe je ons bereikt (contactpagina.js) ---------- */
@keyframes ctPuls{0%{box-shadow:0 0 0 0 rgba(74,112,91,.45)}70%{box-shadow:0 0 0 9px rgba(74,112,91,0)}100%{box-shadow:0 0 0 0 rgba(74,112,91,0)}}
.ct{padding:2.5rem 0 3rem;background:linear-gradient(180deg,var(--kleur-zand) 0,var(--kleur-creme) 70%,var(--kleur-wit) 100%)}
.ct-raam{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.ct{padding:4rem 0 4.5rem}.ct-raam{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem}}
.ct-intro h1{margin-bottom:.6rem}
.ct-intro .lead{margin-bottom:1.1rem}
.ct-status{display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1.6rem;padding:.45rem .9rem .45rem .75rem;border-radius:var(--radius-pil);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);font-size:.9rem;font-weight:600;color:var(--kleur-groen-donker)}
.ct-stip{width:.6rem;height:.6rem;border-radius:50%;background:var(--kleur-olijf)}
.ct-status.is-open .ct-stip{background:var(--kleur-groen);animation:ctPuls 2s infinite}
.ct-status.is-dicht .ct-stip{background:var(--kleur-zand-donker);box-shadow:inset 0 0 0 1.5px var(--kleur-tekst-zacht)}
.ct-kanalen{display:grid;gap:.6rem}
.ct-kanaal{display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;border-radius:var(--radius-knop);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);text-decoration:none;color:var(--kleur-inkt);transition:transform var(--transitie),box-shadow var(--transitie)}
.ct-kanaal::after{content:"→";margin-left:auto;color:var(--kleur-groen);font-weight:700;transition:transform var(--transitie)}
.ct-kanaal:hover{transform:translateX(4px);box-shadow:0 0 0 2px var(--kleur-groen);color:var(--kleur-inkt)}
.ct-kanaal:hover::after{transform:translateX(3px)}
.ct-kanaal small{display:block;font-size:.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--kleur-olijf-donker)}
.ct-kanaal strong{display:block;font-size:1.05rem;line-height:1.35;overflow-wrap:anywhere}
.ct-icoon{flex:none;display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--kleur-groen-licht);color:var(--kleur-groen);transition:background var(--transitie),color var(--transitie)}
.ct-foto{position:relative;margin:0;border-radius:24px;overflow:hidden;aspect-ratio:4/3;background:var(--kleur-zand)}
@media (min-width:900px){.ct-foto{aspect-ratio:4/5}}
.ct-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.ct-foto figcaption{position:absolute;left:1rem;bottom:1rem;display:flex;flex-direction:column;padding:.75rem 1.1rem;border-radius:12px;background:var(--kleur-wit)}
.ct-foto figcaption strong{font-family:var(--font-accent);font-weight:600;font-size:1.3rem;line-height:1.3;color:var(--kleur-groen-donker)}
.ct-foto figcaption span{font-size:.85rem;color:var(--kleur-tekst-zacht)}

.ct-formsectie{padding:3.5rem 0;background:var(--kleur-wit)}
.ct-formraam{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.ct-formsectie{padding:5rem 0}.ct-formraam{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:4rem;align-items:start}.ct-formkop{position:sticky;top:calc(var(--header-hoogte) + var(--logo-uitsteek) + 2rem)}}
.ct-formkop h2{margin-bottom:.5rem}
.ct-formkop p:last-child{color:var(--kleur-tekst-zacht);margin:0}
.ct-doelen{border:0;margin:0 0 1.5rem;padding:0;display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:600px){.ct-doelen{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ct-doel{position:relative;display:flex;flex-direction:column;gap:.15rem;padding:1rem;border-radius:var(--radius-knop);background:var(--kleur-creme);box-shadow:0 0 0 1px var(--kleur-lijn);cursor:pointer;transition:transform var(--transitie),box-shadow var(--transitie),background var(--transitie)}
@media (max-width:599px){.ct-doel{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:center}.ct-doel .ct-icoon{grid-row:span 2}}
.ct-doel:hover{box-shadow:0 0 0 2px var(--kleur-groen);transform:translateY(-2px)}
.ct-doel .ct-icoon{margin-bottom:.45rem}
@media (max-width:599px){.ct-doel .ct-icoon{margin:0}}
.ct-doel strong{color:var(--kleur-inkt);line-height:1.3}
.ct-doel small{font-size:.85rem;line-height:1.4;color:var(--kleur-tekst-zacht)}
.ct-doel:has(input:checked){background:var(--kleur-groen);box-shadow:0 0 0 2px var(--kleur-groen)}
.ct-doel:has(input:checked) strong,.ct-doel:has(input:checked) small{color:var(--kleur-wit)}
.ct-doel:has(input:checked) .ct-icoon{background:var(--kleur-wit)}
.ct-velden{display:grid;gap:.9rem 1rem;grid-template-columns:1fr}
@media (min-width:600px){.ct-velden{grid-template-columns:1fr 1fr}.ct-veld-breed{grid-column:1/-1}}
.ct-veld{display:flex;flex-direction:column;gap:.3rem}
.ct-veld label{font-weight:600;font-size:.92rem;color:var(--kleur-inkt);transition:color var(--transitie)}
.ct-akkoord{display:flex;gap:.6rem;align-items:flex-start;margin:1.1rem 0 1.4rem;font-size:.9rem;color:var(--kleur-tekst-zacht)}
.ct-akkoord input{width:1.15rem;height:1.15rem;margin-top:.15rem;flex:none;accent-color:var(--kleur-groen)}
.ct-form p[aria-live]:not(:empty){padding:1rem 1.2rem;border-radius:12px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-weight:600}

.ct-extra{padding:3rem 0 3.5rem;background:var(--kleur-creme);border-top:1px solid var(--kleur-zand)}
.ct-strook{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.ct-strook{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1050px){.ct-strook{grid-template-columns:1.2fr 1fr 1fr 1fr}}
.ct-blok{padding:1.3rem 1.3rem 1rem;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand);font-size:.93rem}
.ct-blok h3{font-size:1.05rem;margin-bottom:.45rem}
.ct-blok p{margin:0 0 .7rem}
.ct-blok-uitnodiging{background:var(--kleur-groen);box-shadow:none;color:var(--kleur-wit)}
.ct-blok-uitnodiging h3{color:var(--kleur-wit);font-size:1.25rem}
.ct-blok-uitnodiging .card-link{color:var(--kleur-goud)}
.ct-voet{margin:1.5rem 0 0;font-size:.9rem}
@media (prefers-reduced-motion:reduce){
  .ct-status.is-open .ct-stip{animation:none}
  .ct-kanaal,.ct-doel{transition:none}
  .ct-kanaal:hover,.ct-doel:hover{transform:none}
}

/* ---------- Leverancier worden: van maker naar schap (leverancier.js) ---------- */
@keyframes lvBand{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes lvZweef{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.lv{padding:2.5rem 0 3rem;background:linear-gradient(180deg,var(--kleur-zand) 0,var(--kleur-creme) 75%,var(--kleur-wit) 100%);overflow:hidden}
.lv-raam{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.lv{padding:4rem 0 4.5rem}.lv-raam{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}
.lv-intro h1{margin-bottom:.5rem}
.lv-citaat{font-family:var(--font-accent);font-size:clamp(1.35rem,2.4vw,1.75rem);line-height:1.4;color:var(--kleur-olijf-donker);margin:0 0 1rem}
.lv-intro .lead{margin-bottom:1.5rem}
.lv-foto{position:relative;margin:0 0 1.5rem}
.lv-foto img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:24px}
.lv-kaartje{position:absolute;display:flex;flex-direction:column;padding:.6rem 1rem;border-radius:12px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);animation:lvZweef 5s ease-in-out infinite}
.lv-kaartje strong{font-size:1.35rem;line-height:1.2;color:var(--kleur-groen-donker)}
.lv-kaartje span{font-size:.8rem;color:var(--kleur-tekst-zacht)}
.lv-kaartje-1{top:1rem;left:-.5rem}
.lv-kaartje-2{top:38%;right:-.5rem;animation-delay:-1.6s}
.lv-kaartje-3{bottom:-1.25rem;left:12%;animation-delay:-3.2s}
@media (min-width:900px){.lv-kaartje-1{left:-1.5rem}.lv-kaartje-2{right:-1.5rem}}

.lv-band{padding:1.75rem 0 2rem;background:var(--kleur-wit);border-top:1px solid var(--kleur-zand);border-bottom:1px solid var(--kleur-zand)}
.lv-band-kop{text-align:center;margin:0 0 1.1rem;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--kleur-olijf-donker)}
.lv-band-kop a{color:inherit}
.lv-band-raam{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.lv-band-rij{display:flex;width:max-content;list-style:none;margin:0;padding:0;gap:2.75rem;animation:lvBand 60s linear infinite}
.lv-band-raam:hover .lv-band-rij,.lv-band-raam:focus-within .lv-band-rij{animation-play-state:paused}
.lv-band-rij li{flex:none}
.lv-band-rij img{height:3.5rem;width:auto;max-width:8.5rem;aspect-ratio:auto;object-fit:contain;mix-blend-mode:multiply;filter:grayscale(1);opacity:.75;transition:filter var(--transitie),opacity var(--transitie)}
.lv-band-rij a:hover img,.lv-band-rij a:focus-visible img{filter:none;opacity:1}

.lv-route-sectie{padding:4rem 0}
.lv-route{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr;position:relative}
@media (min-width:640px){.lv-route{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){
  .lv-route{grid-template-columns:repeat(4,1fr);gap:1.5rem}
  .lv-route::before{content:"";position:absolute;top:1.75rem;left:1.75rem;right:12%;height:2px;background:repeating-linear-gradient(90deg,var(--kleur-olijf) 0 8px,transparent 8px 14px)}
}
.lv-route li{position:relative;padding:0 0 .5rem}
.lv-route-icoon{position:relative;display:grid;place-items:center;width:3.5rem;height:3.5rem;border-radius:50%;background:var(--kleur-groen);color:var(--kleur-wit);margin-bottom:1rem;box-shadow:0 0 0 6px var(--kleur-wit)}
.lv-route-icoon svg,.lv-check svg{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lv-route h3{font-size:1.15rem;margin-bottom:.35rem}
.lv-route p{margin:0;color:var(--kleur-tekst-zacht);font-size:.95rem}

.lv-check-sectie{background:var(--kleur-groen);color:var(--kleur-wit)}
.lv-check-sectie h2{color:var(--kleur-wit)}
.lv-check-sectie .eyebrow{color:var(--kleur-goud)}
.lv-check-sectie .eyebrow::before{background:var(--kleur-goud)}
.lv-check-sectie .tekst-zacht{color:rgba(255,255,255,.8)}
.lv-check-raam{display:grid;gap:2rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.lv-check-raam{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:4rem}}
.lv-check{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.lv-check label{display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:var(--radius-knop);background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25);cursor:pointer;transition:background var(--transitie),box-shadow var(--transitie),color var(--transitie)}
.lv-check label:hover{background:rgba(255,255,255,.14)}
.lv-check input{position:absolute;opacity:0;width:1px;height:1px}
.lv-check label::before{content:"";flex:none;width:1.6rem;height:1.6rem;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6);margin-top:.1rem;transition:background var(--transitie),box-shadow var(--transitie)}
.lv-check label:has(input:checked){background:var(--kleur-wit);color:var(--kleur-tekst)}
.lv-check label:has(input:checked)::before{box-shadow:none;background:var(--kleur-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/65% no-repeat}
.lv-check label:has(input:focus-visible){outline:3px solid var(--kleur-goud);outline-offset:3px}
.lv-check strong{display:block;font-size:1.02rem;margin-bottom:.1rem}
.lv-check span{font-size:.92rem;line-height:1.5}
.lv-teller{min-height:1.6em;margin:1rem 0 0;font-weight:600;color:var(--kleur-goud)}
.lv-teller.is-vol{font-size:1.15rem}
.lv-teller a{color:var(--kleur-wit)}

.lv-form-sectie{padding:4rem 0 4.5rem;background:var(--kleur-wit)}
.lv-form-raam{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.lv-form-raam{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:4rem;align-items:start}.lv-form-kop{position:sticky;top:calc(var(--header-hoogte) + var(--logo-uitsteek) + 2rem)}}
.lv-form-kop p{color:var(--kleur-tekst-zacht)}
.lv-direct{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--kleur-zand);font-size:.95rem;line-height:1.7}
.lv-soorten{border:0;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.lv-soorten legend{width:100%;padding:0;margin-bottom:.7rem;font-weight:600;font-size:.92rem;color:var(--kleur-inkt)}
.lv-form p[aria-live]:not(:empty){padding:1rem 1.2rem;border-radius:12px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-weight:600}
.lv-inkoper{padding:1.5rem 0;background:var(--kleur-creme);border-top:1px solid var(--kleur-zand);font-size:.95rem}
.lv-inkoper p{margin:0;text-align:center}
@media (prefers-reduced-motion:reduce){
  .lv-band-rij,.lv-kaartje{animation:none}
  .lv-band-raam{overflow-x:auto}
}

/* ---------- Formspel: elk formulier als korte reeks vragen (formspel.js) ----------
   html.js (inline in de kop) verbergt de latere vragen al vóór de eerste
   weergave; zonder script staat alles onder elkaar. */
@keyframes spelIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes spelVink{0%{transform:scale(0) rotate(-20deg)}60%{transform:scale(1.15)}100%{transform:none}}
.spel{position:relative;scroll-margin-top:calc(var(--header-hoogte) + var(--logo-uitsteek) + 1rem)}
.spel-stap{border:0;margin:0 0 2rem;padding:0;min-width:0}
.spel-stap legend{padding:0;margin:0 0 1rem;font-family:var(--font-heading);font-weight:700;font-size:clamp(1.3rem,2.3vw,1.6rem);line-height:1.25;color:var(--kleur-groen-donker)}
.spel-stap legend:focus{outline:none}
html.js .spel:not(.speelt) .spel-stap ~ .spel-stap,.speelt .spel-stap:not(.is-actief){display:none}
.speelt .spel-stap{margin:0}
.speelt .spel-stap.is-actief{animation:spelIn .45s cubic-bezier(.16,1,.3,1)}
.spel-voortgang{display:flex;align-items:center;gap:.9rem;margin:0 0 1.5rem}
html.js .spel:not(.speelt)::before{content:"";display:block;height:calc(1.4rem + 1.5rem)}
.spel-balk{flex:1;height:6px;border-radius:6px;background:var(--kleur-zand);overflow:hidden}
.spel-balk i{display:block;height:100%;width:0;border-radius:6px;background:linear-gradient(90deg,var(--kleur-olijf),var(--kleur-groen));transition:width .5s cubic-bezier(.16,1,.3,1)}
.spel-tel{flex:none;font-size:.8rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--kleur-olijf-donker)}
.spel-nav{display:flex;align-items:center;gap:1rem;margin-top:1.5rem}
.spel-nav .spel-verder{margin-left:auto}
.spel-nav [hidden]{display:none}
.spel-terug{all:unset;cursor:pointer;font-weight:600;color:var(--kleur-tekst-zacht);padding:.6rem 0}
.spel-terug::before{content:"← "}
.spel-terug:hover{color:var(--kleur-groen-donker)}
.spel-terug:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:3px;border-radius:4px}
.spel textarea{width:100%}
.lv-site{margin-top:1rem}
.klaar .spel-stap,.klaar .spel-nav,.klaar .spel-voortgang{display:none!important}
.spel.klaar p[aria-live]{position:relative;margin:0!important;padding:1.6rem 1.6rem 1.6rem 4.8rem;border-radius:16px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-size:1.2rem;font-weight:600;line-height:1.45}
.spel.klaar p[aria-live]::before{content:"";position:absolute;left:1.4rem;top:1.5rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--kleur-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/60% no-repeat;animation:spelVink .6s cubic-bezier(.34,1.56,.64,1)}
.spel.klaar p[aria-live]:focus{outline:none}
@media (prefers-reduced-motion:reduce){
  .speelt .spel-stap.is-actief,.spel.klaar p[aria-live]::before{animation:none}
  .spel-balk i{transition:none}
}

/* Foto's uit de eigen OneDrive van Blue Olive (13 okt 2026) */
.pd-daarna-foto{margin:0 0 2rem;border-radius:20px;overflow:hidden;aspect-ratio:16/9;background:var(--kleur-zand)}
@media (min-width:760px){.pd-daarna-foto{aspect-ratio:21/8}}
.pd-daarna-foto img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.lv-route-kop{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);align-items:center;margin-bottom:2.5rem}
@media (min-width:900px){.lv-route-kop{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4rem}}
.lv-route-kop .section-kop{margin-bottom:0}
.lv-route-foto{margin:0;border-radius:20px;overflow:hidden;aspect-ratio:3/2;background:var(--kleur-zand)}
.lv-route-foto img{width:100%;height:100%;object-fit:cover}

/* ---------- Voor speciaalzaken (speciaalzaken.js) ---------- */
.sz-franco-sectie{background:var(--kleur-wit);border-top:1px solid var(--kleur-zand)}
.sz-franco-raam{display:grid;gap:1.75rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:900px){.sz-franco-raam{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:4rem}}
.sz-franco{padding:1.5rem;border-radius:20px;background:var(--kleur-creme);box-shadow:0 0 0 1px var(--kleur-zand)}
.sz-land{display:inline-flex;padding:4px;border-radius:var(--radius-pil);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);margin-bottom:1.25rem}
.sz-land input{position:absolute;opacity:0;width:1px;height:1px}
.sz-land span{display:inline-block;padding:.45rem 1.1rem;border-radius:var(--radius-pil);font-weight:600;font-size:.92rem;cursor:pointer;transition:background var(--transitie),color var(--transitie)}
.sz-land label:has(input:checked) span{background:var(--kleur-groen);color:var(--kleur-wit)}
.sz-land label:has(input:focus-visible) span{outline:3px solid var(--kleur-olijf);outline-offset:2px}
.sz-bedrag{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;color:var(--kleur-inkt)}
.sz-bedrag output{font-size:1.6rem;font-weight:700;color:var(--kleur-groen-donker)}
.sz-franco input[type=range]{width:100%;margin:.6rem 0 .4rem;accent-color:var(--kleur-groen)}
.sz-meter{position:relative;height:10px;border-radius:10px;background:var(--kleur-zand)}
.sz-meter i{position:absolute;left:0;top:0;bottom:0;border-radius:10px;background:var(--kleur-olijf);transition:width .2s,background .3s}
.sz-meter b{position:absolute;top:-6px;bottom:-6px;width:3px;border-radius:3px;background:var(--kleur-groen-donker);transition:left .3s}
.is-franco .sz-meter i{background:var(--kleur-groen)}
.sz-uitkomst{margin:1rem 0 0;font-weight:600;color:var(--kleur-groen-donker);min-height:3em}
.is-franco .sz-uitkomst::before{content:"✓ ";color:var(--kleur-groen)}

.sz-waarom{background:var(--kleur-creme)}
.sz-redenen{list-style:none;margin:0;padding:0;display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:640px){.sz-redenen{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.sz-redenen{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.sz-redenen li{padding:1.4rem;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand);transition:transform var(--transitie),box-shadow var(--transitie)}
.sz-redenen li:hover{transform:translateY(-3px);box-shadow:0 0 0 2px var(--kleur-groen)}
.sz-redenen .lv-route-icoon{width:2.9rem;height:2.9rem;margin-bottom:.8rem;box-shadow:none}
.sz-redenen h3{font-size:1.1rem;margin-bottom:.3rem}
.sz-redenen p{margin:0;font-size:.95rem;color:var(--kleur-tekst-zacht)}

.sz-pos{background:var(--kleur-wit)}
.sz-pos-lijst{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.6rem}
.sz-pos-lijst li{padding:.85rem 1rem .85rem 3rem;position:relative;border-radius:12px;background:var(--kleur-creme);font-size:.95rem;color:var(--kleur-tekst-zacht)}
.sz-pos-lijst li::before{content:"";position:absolute;left:1rem;top:1.05rem;width:1.2rem;height:1.2rem;border-radius:50%;background:var(--kleur-groen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/65% no-repeat}
.sz-pos-lijst strong{display:block;color:var(--kleur-inkt)}

.sz-schap{background:var(--kleur-creme);overflow:hidden}
.sz-schap-kop{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:.5rem 2rem;margin-bottom:1.5rem}
.sz-schap-kop h2{margin-bottom:0}
.sz-schap-kop p{margin:0;max-width:24em}
.sz-rij{list-style:none;margin:0 -1.25rem;padding:.25rem 1.25rem 1rem;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:1rem;overflow-x:auto;scrollbar-width:thin}
/* De snap gaat pas aan na het laden (kop.js). Staat hij er meteen, dan telt Chrome
   het eerste vastklikken als scrollen en meet hij geen LCP: PageSpeed gaf de
   homepage daardoor 0 voor snelheid (24 oktober 2026). */
.snap-aan .sz-rij{scroll-snap-type:x mandatory}
@media (min-width:1100px){.sz-rij{grid-auto-columns:1fr;overflow:visible}}
.sz-rij li{scroll-snap-align:start;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand);overflow:hidden;transition:transform var(--transitie)}
.sz-rij li:hover{transform:translateY(-3px)}
.sz-rij img{width:100%;aspect-ratio:1;object-fit:contain;padding:.75rem;background:var(--kleur-wit)}
.sz-rij h3{font-size:1.05rem;margin:.9rem 1rem .25rem}
.sz-rij p{margin:0 1rem 1rem;font-size:.9rem;color:var(--kleur-tekst-zacht)}
.sz-rij-meer a{display:flex;flex-direction:column;justify-content:center;gap:.4rem;height:100%;min-height:220px;padding:1.5rem;background:var(--kleur-groen);color:var(--kleur-wit);text-decoration:none}
.sz-rij-meer strong{font-size:1.3rem}
.sz-rij-meer span{color:var(--kleur-goud);font-weight:600}
/* Homepage: de schappenrij schuift ook op een breed scherm opzij, met pijlen. */
.sz-carrousel{position:relative}
.sz-carrousel .sz-rij{grid-auto-columns:minmax(220px,calc((100% - 3rem) / 3.4));overflow-x:auto;scroll-behavior:smooth}
@media (min-width:1100px){.sz-carrousel .sz-rij{grid-auto-columns:calc((100% - 4rem) / 4.4)}}
.sz-carrousel .sz-rij:focus-visible{outline:2px solid var(--kleur-groen);outline-offset:4px}
.sz-car-pijl{position:absolute;top:40%;z-index:2;width:2.75rem;height:2.75rem;border:0;border-radius:50%;background:var(--kleur-wit);box-shadow:0 2px 10px rgba(0,0,0,.15);color:var(--kleur-inkt);font:inherit;font-size:1.3rem;line-height:1;cursor:pointer;transition:opacity var(--transitie)}
.sz-car-pijl[data-richting="-1"]{left:-.5rem}
.sz-car-pijl[data-richting="1"]{right:-.5rem}
.sz-car-pijl:disabled{opacity:0;pointer-events:none}
.sz-car-pijl:focus-visible{outline:2px solid var(--kleur-groen);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.sz-carrousel .sz-rij{scroll-behavior:auto}}

.sz-wie{background:var(--kleur-wit)}
.sz-labels{list-style:none;margin:1.25rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.sz-labels li{padding:.5rem 1rem;border-radius:var(--radius-pil);background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-weight:600;font-size:.92rem}

.sz-faq{background:var(--kleur-creme)}
.sz-vragen{display:grid;gap:.6rem}
.sz-vragen details{border-radius:14px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
.sz-vragen summary{list-style:none;cursor:pointer;padding:1rem 3rem 1rem 1.2rem;position:relative;font-weight:600;color:var(--kleur-inkt)}
.sz-vragen summary::-webkit-details-marker{display:none}
.sz-vragen summary::after{content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);font-size:1.4rem;font-weight:400;color:var(--kleur-groen);transition:transform var(--transitie)}
.sz-vragen details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.sz-vragen summary:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:2px;border-radius:14px}
.sz-vragen details p{margin:0;padding:0 1.2rem 1.1rem;color:var(--kleur-tekst-zacht)}
html.ingelogd .sz-vragen [data-alleen-gast]{display:none}

.sz-slot{background:var(--kleur-wit)}
.sz-slot-kaart{display:flex;flex-direction:column;gap:1.25rem;padding:2rem;border-radius:24px;background:var(--kleur-groen);color:var(--kleur-wit)}
@media (min-width:900px){.sz-slot-kaart{flex-direction:row;align-items:center;justify-content:space-between;padding:2.5rem 3rem}}
.sz-slot-kaart h2{color:var(--kleur-wit);margin-bottom:.4rem}
.sz-slot-kaart .eyebrow{color:var(--kleur-goud)}
.sz-slot-kaart .eyebrow::before{background:var(--kleur-goud)}
.sz-slot-kaart p{margin:0;color:rgba(255,255,255,.85)}
.sz-slot-kaart a.btn-licht{color:var(--kleur-groen-donker)}
.sz-slot-kaart a.btn-outline-licht{color:var(--kleur-wit)}
@media (prefers-reduced-motion:reduce){
  .sz-meter i,.sz-meter b,.sz-redenen li,.sz-rij li{transition:none}
  .sz-redenen li:hover,.sz-rij li:hover{transform:none}
}

/* ---------- Private label: de etiketstudio (privatelabel.js) ---------- */
.pl-raam{display:grid;gap:1.5rem;grid-template-columns:minmax(0,1fr);grid-template-areas:"kop" "beeld" "form";align-items:start}
.pl-kop{grid-area:kop}.pl-beeld{grid-area:beeld}.pl-form{grid-area:form}
@media (min-width:900px){.pl-raam{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"kop beeld" "form beeld";column-gap:4rem;row-gap:0}}
.pl-tekst h1{margin-bottom:.5rem}
.pl-tekst .lead{margin-bottom:0}
@media (min-width:900px){.pl-tekst .lead{margin-bottom:1.75rem}}
.pl-form{padding:1.5rem;border-radius:20px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
@media (min-width:640px){.pl-form{padding:2rem}}
.pl-producten{display:grid;gap:.6rem;grid-template-columns:1fr}
@media (min-width:600px){.pl-producten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pl-producten .ct-doel{background:var(--kleur-wit)}
.pl-druppel{width:2.4rem;height:2.4rem;border-radius:50% 50% 50% 0;transform:rotate(-45deg);margin:.2rem 0 .8rem .3rem;box-shadow:inset 0 0 0 2px rgba(255,255,255,.4)}
@media (max-width:599px){.pl-druppel{grid-row:span 2;margin:0 .2rem}}
.pl-druppel-olie{background:linear-gradient(135deg,#c9c25a,#7d8a2c)}
.pl-druppel-balsamico{background:linear-gradient(135deg,#6b3a2a,#2a1410)}
.pl-druppel-plantaardig{background:linear-gradient(135deg,#f3dc8a,#d4a83a)}
.pl-form .pd-sub{margin-top:1.25rem}
.pl-beeld{margin:0;display:flex;flex-direction:column;align-items:center;gap:1rem}
@media (min-width:900px){.pl-beeld{position:sticky;top:calc(var(--header-hoogte) + var(--logo-uitsteek) + 1.5rem)}}
.pl-beeld figcaption{max-width:22rem;text-align:center;font-size:.88rem;color:var(--kleur-tekst-zacht)}
.pl-fles{width:min(240px,62vw);height:auto;overflow:visible;filter:drop-shadow(0 18px 18px rgba(55,85,63,.18))}
@media (max-width:899px){.pl-beeld{flex-direction:row;gap:1rem;padding:.75rem 1rem;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand);position:sticky;top:calc(var(--header-hoogte) + var(--logo-uitsteek) + .5rem);z-index:4}.pl-fles{width:100px;flex:none;filter:none}.pl-beeld figcaption{text-align:left;font-size:.8rem}}
.pl-glas,.pl-dop,.pl-etiket rect,.pl-etiket line,.pl-etiket text{transition:fill .5s,stroke .5s}
.pl-dop{fill:#1f2a22}
.pl-fles[data-fles=olie] .pl-glas{fill:#3d5a2c}
.pl-fles[data-fles=balsamico] .pl-glas{fill:#2b1712}
.pl-fles[data-fles=plantaardig] .pl-glas{fill:#c9a23c}
.pl-fles[data-fles=balsamico] .pl-dop{fill:#8a6a3a}
.pl-etiket rect{fill:#f6f1e3;stroke:#cfc6a8;stroke-width:1}
.pl-etiket line{stroke:#b5b34c;stroke-width:1.5}
.pl-merk{font-family:'Bodoni Moda',Didot,Georgia,'Times New Roman',serif;font-weight:600;fill:#37553f}
.pl-soort{font-family:var(--font-body);font-size:8.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;fill:#5e5d26}
.pl-maat{font-family:var(--font-body);font-size:10px;fill:#5f6358}
.pl-fles[data-stijl=Modern] .pl-etiket rect{fill:#fff;stroke:#212326}
.pl-fles[data-stijl=Modern] .pl-etiket line{stroke:#212326}
.pl-fles[data-stijl=Modern] .pl-merk{font-family:var(--font-heading);font-weight:800;fill:#212326;letter-spacing:-.02em}
.pl-fles[data-stijl=Modern] .pl-soort{fill:#212326}
.pl-fles[data-stijl=Landelijk] .pl-etiket rect{fill:#d9c39b;stroke:#9c7e4f}
.pl-fles[data-stijl=Landelijk] .pl-etiket line{stroke:#6b4f2a}
.pl-fles[data-stijl=Landelijk] .pl-merk{fill:#4a3218;font-style:italic}
.pl-fles[data-stijl=Landelijk] .pl-soort,.pl-fles[data-stijl=Landelijk] .pl-maat{fill:#4a3218}
@media (prefers-reduced-motion:reduce){.pl-glas,.pl-dop,.pl-etiket rect,.pl-etiket line,.pl-etiket text{transition:none}}

/* ---------- Over ons (overons.js, contactpagina.js voor de bereikbaarheid) ---------- */
.oo-foto{aspect-ratio:4/5}
.oo-foto img{object-position:50% 70%}
@media (max-width:899px){.oo-foto{aspect-ratio:4/3}.oo-foto img{object-position:50% 62%}}
.oo-cijfers{padding:2.25rem 0;background:var(--kleur-groen);color:var(--kleur-wit)}
.oo-tellers{list-style:none;margin:0;padding:0;display:grid;gap:1.5rem 2rem;grid-template-columns:repeat(2,1fr)}
@media (min-width:900px){.oo-tellers{grid-template-columns:repeat(4,1fr)}}
.oo-tellers li{display:flex;flex-direction:column}
.oo-tellers strong{font-size:clamp(2rem,4vw,2.8rem);line-height:1.1;font-variant-numeric:tabular-nums;color:var(--kleur-wit)}
.oo-tellers span{font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.78rem;color:var(--kleur-goud);margin:.3rem 0 .4rem}
.oo-tellers small{font-size:.88rem;line-height:1.45;color:rgba(255,255,255,.8)}
.oo-missie{background:var(--kleur-wit);text-align:center}
.oo-missie .eyebrow::before{display:none}
.oo-missie .lead{margin-left:auto;margin-right:auto}
.oo-wie{background:var(--kleur-creme)}
.oo-deuren{display:grid;gap:1rem;grid-template-columns:1fr}
@media (min-width:800px){.oo-deuren{grid-template-columns:repeat(3,1fr);gap:1.25rem}}
.oo-deur{display:flex;flex-direction:column;padding:1.5rem;border-radius:18px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand);text-decoration:none;color:var(--kleur-tekst);transition:transform var(--transitie),box-shadow var(--transitie)}
.oo-deur:hover{transform:translateY(-4px);box-shadow:0 0 0 2px var(--kleur-groen);color:var(--kleur-tekst)}
.oo-deur .lv-route-icoon{width:2.9rem;height:2.9rem;box-shadow:none;margin-bottom:.9rem}
.oo-deur h3{font-size:1.15rem;margin-bottom:.35rem}
.oo-deur p{flex:1;margin:0 0 1rem;color:var(--kleur-tekst-zacht);font-size:.95rem}
.oo-deur:hover .card-link::after{transform:translateX(4px)}
.oo-contact{background:var(--kleur-wit)}
@media (prefers-reduced-motion:reduce){.oo-deur{transition:none}.oo-deur:hover{transform:none}}

/* ---------- Homepage (home.js; overons.js voor de tellers, contactpagina.js voor de bereikbaarheid) ---------- */
@keyframes hmIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hm-wie{background:var(--kleur-wit)}
.hm-tabs{display:none}
html.js .hm-tabs{display:grid;gap:.6rem;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:1.25rem}
@media (min-width:800px){html.js .hm-tabs{grid-template-columns:repeat(4,minmax(0,1fr))}}
.hm-tabs button{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:.75rem;padding:.8rem 1rem;border-radius:var(--radius-knop);background:var(--kleur-creme);box-shadow:0 0 0 1px var(--kleur-lijn);font-weight:600;color:var(--kleur-inkt);transition:background var(--transitie),color var(--transitie),box-shadow var(--transitie),transform var(--transitie)}
.hm-tabs button:hover{box-shadow:0 0 0 2px var(--kleur-groen);transform:translateY(-2px)}
.hm-tabs .lv-route-icoon{width:2.4rem;height:2.4rem;margin:0;flex:none;box-shadow:none;background:var(--kleur-groen-licht);color:var(--kleur-groen)}
.hm-tabs .lv-route-icoon svg{width:1.25rem;height:1.25rem}
.hm-tabs [aria-selected=true]{background:var(--kleur-groen);color:var(--kleur-wit);box-shadow:0 0 0 2px var(--kleur-groen)}
.hm-tabs [aria-selected=true] .lv-route-icoon{background:var(--kleur-wit)}
.hm-tabs button:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:3px}
.hm-panelen{display:grid;gap:1rem}
html.js .hm-keuze:not(.leeft) .hm-paneel:not(:first-child),.hm-keuze.leeft .hm-paneel[hidden]{display:none}
.hm-paneel{display:grid;gap:0;grid-template-columns:minmax(0,1fr);border-radius:22px;overflow:hidden;background:var(--kleur-creme);box-shadow:0 0 0 1px var(--kleur-zand)}
@media (min-width:800px){.hm-paneel{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.hm-paneel.hm-in{animation:hmIn .45s cubic-bezier(.16,1,.3,1)}
/* De foto in een eigen vak: Safari rekent height:100% in een raster anders dan Chrome, en dan viel de foto over de tekst (iPhone, 13 okt). */
.hm-beeld{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--kleur-zand)}
.hm-beeld img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (min-width:800px){.hm-beeld{aspect-ratio:auto;min-height:320px}}
.hm-paneel > div{padding:1.5rem 1.5rem 1.75rem}
@media (min-width:800px){.hm-paneel > div{padding:2.5rem}}
.hm-paneel h3{font-size:clamp(1.4rem,2.4vw,1.9rem);margin-bottom:.5rem}
.hm-paneel p{color:var(--kleur-tekst-zacht)}
.hm-feiten{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.hm-feiten li{padding:.4rem .85rem;border-radius:var(--radius-pil);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);font-size:.88rem;font-weight:600;color:var(--kleur-groen-donker)}
.hm-feiten li::before{content:"✓ ";color:var(--kleur-groen)}

.hm-marge{background:var(--kleur-creme)}
.hm-balken{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;counter-reset:m}
.hm-balken li{display:grid;gap:.35rem 1.5rem;grid-template-columns:1fr;align-items:center;padding:1rem 1.2rem;border-radius:14px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
@media (min-width:900px){.hm-balken li{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) minmax(0,.9fr)}}
.hm-naam strong{display:block;color:var(--kleur-inkt);line-height:1.35}
.hm-naam span{font-size:.85rem;color:var(--kleur-tekst-zacht)}
.hm-prijs{font-size:.9rem;color:var(--kleur-tekst)}
.hm-prijs small{color:var(--kleur-tekst-zacht)}
.hm-marge-voet{margin:1.25rem 0 0;font-size:.95rem;color:var(--kleur-tekst-zacht)}
html.ingelogd .hm-marge-voet [data-alleen-gast]{display:none}

.hm-missie{background:var(--kleur-wit)}
.hm-quote{font-family:var(--font-accent);font-size:clamp(2.4rem,6vw,4rem);line-height:1.15;color:var(--kleur-groen-donker);margin:0 0 1rem}
.hm-missie .lead{margin:0 auto 1.5rem}
@media (prefers-reduced-motion:reduce){
  .hm-paneel.hm-in{animation:none}
  .hm-tabs button{transition:none}.hm-tabs button:hover{transform:none}
}

/* ---------- Veelgestelde vragen: zoeken en filteren (vragen.js) ---------- */
.vv-kop{padding-bottom:2rem}
.vv-kop h1{margin-bottom:.5rem}
.vv-zoek{margin-top:1.75rem}
.vv-zoek input[type=search]{width:100%;padding:1rem 1.2rem 1rem 3rem;border-radius:var(--radius-pil);font-size:1.05rem;background:var(--kleur-wit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a705b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 1.1rem 50%/1.2rem no-repeat}
.vv-chips{display:none}
html.js .vv-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.vv-chips button{all:unset;cursor:pointer;padding:.5rem 1rem;border-radius:var(--radius-pil);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-lijn);font-size:.9rem;font-weight:600;transition:background var(--transitie),color var(--transitie)}
.vv-chips button:hover{box-shadow:0 0 0 2px var(--kleur-groen)}
.vv-chips [aria-pressed=true]{background:var(--kleur-groen);color:var(--kleur-wit);box-shadow:0 0 0 2px var(--kleur-groen)}
.vv-chips button:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:2px}
.vv-tel{display:none}
html.js .vv-tel{display:block;margin:.9rem 0 0;font-size:.85rem;font-weight:600;color:var(--kleur-tekst-zacht)}
.vv-zoek input[type=search]{display:none}
html.js .vv-zoek input[type=search]{display:block}
.vv-lijst{background:var(--kleur-wit);padding-top:2rem}
.vv-groep{margin-bottom:2.5rem}
.vv-groep[hidden]{display:none}
.vv-groep h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin-bottom:1rem}
.vv-groep h2 .eyebrow{display:block;margin-bottom:.4rem}
.vv-antwoord{padding:0 1.2rem 1.1rem;color:var(--kleur-tekst-zacht)}
.vv-antwoord p{margin:0 0 .7rem}
.vv-antwoord p:last-child{margin-bottom:0}
.sz-vragen details[hidden]{display:none}
.vv-leeg{padding:1.25rem 1.4rem;border-radius:14px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-weight:600}
@media (prefers-reduced-motion:reduce){.vv-chips button{transition:none}}
@media (max-width:640px){html.js .vv-chips{flex-wrap:nowrap;overflow-x:auto;margin-left:-1.25rem;margin-right:-1.25rem;padding:.2rem 1.25rem .4rem;scrollbar-width:none}.vv-chips button{flex:none}}

/* Margebalken met de fles erop: de balk is een plank, de fles rijdt mee tot zijn factor (home.js zet .wacht en .vol). */
.hm-balk{display:flex;align-items:flex-end;gap:1rem;min-width:0}
.hm-balk b{flex:none;min-width:3.4rem;font-size:1.55rem;line-height:1;font-weight:700;color:var(--kleur-groen-donker);font-variant-numeric:tabular-nums;padding-bottom:.1rem}
.hm-spoor{--w:calc(var(--f) / 2.5 * 100%);position:relative;flex:1;height:92px}
.hm-spoor::before{content:"";position:absolute;left:0;right:0;bottom:0;height:8px;border-radius:8px;background:var(--kleur-zand)}
.hm-spoor i{position:absolute;left:0;bottom:0;height:8px;width:var(--w);border-radius:8px;background:linear-gradient(90deg,var(--kleur-olijf),var(--kleur-groen))}
.hm-fles{position:absolute;bottom:8px;left:var(--w);height:84px;width:auto;transform:translateX(-100%);mix-blend-mode:multiply;transition:transform var(--transitie)}
.hm-balken li:hover .hm-fles{transform:translateX(-100%) translateY(-4px) rotate(-3deg)}
.hm-balken.wacht .hm-spoor i{width:0}
.hm-balken.wacht .hm-fles{left:2.4rem}
.hm-balken.vol .hm-spoor i{transition:width 1.4s cubic-bezier(.16,1,.3,1)}
.hm-balken.vol .hm-fles{transition:left 1.4s cubic-bezier(.16,1,.3,1),transform var(--transitie)}
.hm-balken.vol li:nth-child(2) i,.hm-balken.vol li:nth-child(2) .hm-fles{transition-delay:.08s}
.hm-balken.vol li:nth-child(3) i,.hm-balken.vol li:nth-child(3) .hm-fles{transition-delay:.16s}
.hm-balken.vol li:nth-child(4) i,.hm-balken.vol li:nth-child(4) .hm-fles{transition-delay:.24s}
.hm-balken.vol li:nth-child(5) i,.hm-balken.vol li:nth-child(5) .hm-fles{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){.hm-fles,.hm-balken.vol .hm-spoor i,.hm-balken.vol .hm-fles{transition:none}.hm-balken li:hover .hm-fles{transform:translateX(-100%)}}

/* ---------- Een partner die meeverkoopt: Mijn Blue Olive in een telefoon (partner.js) ---------- */
@keyframes ptOp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ptLoop{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ptSpoor{0%{width:0}30%{width:0}100%{width:100%}}
@keyframes ptStip{from{background:var(--kleur-wit);box-shadow:0 0 0 2px var(--kleur-zand-donker)}to{background:var(--kleur-groen);box-shadow:0 0 0 2px var(--kleur-groen)}}
@keyframes ptChip{0%,70%{opacity:0;transform:scale(.6)}85%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:none}}
@keyframes ptRitme{from{width:0}to{width:75%}}
@keyframes ptWip{0%{transform:none}30%{transform:scale(1.35) rotate(-8deg)}60%{transform:scale(.9)}100%{transform:none}}
@keyframes ptDeksel{0%,15%{transform:none}60%,100%{transform:translateY(-6px) rotate(-28deg)}}
@keyframes ptUit{0%,35%{opacity:0;transform:translateY(-34px) scale(.5)}75%{opacity:1;transform:translateY(4px) scale(1.03)}100%{opacity:1;transform:none}}
.pt{background:var(--kleur-creme);overflow:hidden}
.pt-raam{display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr);align-items:center}
@media (min-width:960px){.pt-raam{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:4rem}}
.pt-tekst h2{margin-bottom:.6rem}
.pt-pijlers{display:grid;gap:.6rem;margin-top:1.5rem}
.pt-pijlers button{all:unset;box-sizing:border-box;position:relative;overflow:hidden;cursor:pointer;display:flex;gap:1rem;align-items:flex-start;padding:1rem 1.1rem;border-radius:var(--radius-knop);background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand);transition:box-shadow var(--transitie),transform var(--transitie)}
.pt-pijlers button:hover{transform:translateX(4px);box-shadow:0 0 0 2px var(--kleur-groen)}
.pt-pijlers button:focus-visible{outline:3px solid var(--kleur-olijf);outline-offset:3px}
.pt-pijlers .lv-route-icoon{width:2.6rem;height:2.6rem;margin:0;flex:none;box-shadow:none;background:var(--kleur-groen-licht);color:var(--kleur-groen);transition:background var(--transitie),color var(--transitie)}
.pt-pijlers .lv-route-icoon svg{width:1.3rem;height:1.3rem}
.pt-pijlers strong{display:block;font-size:1.05rem;color:var(--kleur-inkt);margin-bottom:.15rem}
.pt-pijlers small{display:block;font-size:.92rem;line-height:1.5;color:var(--kleur-tekst-zacht)}
.pt.leeft .pt-pijlers small{display:none}
.pt.leeft .pt-pijlers [aria-selected=true] small{display:block;animation:ptOp .4s cubic-bezier(.16,1,.3,1)}
.pt-pijlers [aria-selected=true]{box-shadow:0 0 0 2px var(--kleur-groen)}
.pt-pijlers [aria-selected=true] .lv-route-icoon{background:var(--kleur-groen);color:var(--kleur-wit)}
.pt-loop{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--kleur-olijf);transform:scaleX(0);transform-origin:left}
.pt.loopt [aria-selected=true] .pt-loop{animation:ptLoop var(--pt-duur,7s) linear forwards}

/* Het toestel */
.pt-toestel{position:relative;margin:0 auto;width:min(320px,86vw);display:flex;flex-direction:column;align-items:center;gap:.9rem}
.pt-tik{margin:0;font-family:var(--font-accent);font-style:italic;font-size:1.05rem;color:var(--kleur-olijf-donker)}
.pt-tik::after{content:" ↓"}
.pt-scherm{position:relative;width:100%;min-height:560px;padding:14px 14px 18px;border-radius:40px;background:var(--kleur-creme);box-shadow:0 0 0 10px var(--kleur-groen-donker),0 0 0 11px var(--kleur-groen);overflow:hidden}
.pt-scherm::before{content:"";position:absolute;top:8px;left:50%;width:80px;height:20px;margin-left:-40px;border-radius:12px;background:var(--kleur-groen-donker)}
.pt-balk{display:flex;align-items:center;justify-content:space-between;margin:20px 4px 12px;font-weight:700;font-size:.95rem;color:var(--kleur-groen-donker)}
.pt-wagen{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
.pt-wagen svg{width:18px;height:18px;fill:none;stroke:var(--kleur-groen-donker);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pt-wagen b{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--kleur-olijf);color:var(--kleur-inkt);font-size:.7rem;line-height:18px;text-align:center}
.pt-wagen.wip{animation:ptWip .55s cubic-bezier(.34,1.56,.64,1)}
.pt-paneel{display:grid;gap:8px}
.pt.leeft .pt-paneel[hidden]{display:none}
.pt-groet,.pt-kop{margin:0 4px 2px;font-weight:700;font-size:1.1rem;line-height:1.3;color:var(--kleur-inkt)}
.pt-sub{margin:6px 4px 0;font-size:.68rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--kleur-olijf-donker)}
.pt-kaart{position:relative;padding:12px 14px;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
.pt-kaart small,.pt-product small,.pt-levering small,.pt-recept small,.pt-schap small{display:block;font-size:.72rem;color:var(--kleur-tekst-zacht)}
.pt-kaart strong{display:block;font-size:.95rem;line-height:1.35;color:var(--kleur-inkt)}
.pt-kaart-rij{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pt-pijl{font-weight:700;color:var(--kleur-groen)}
.pt-knop{all:unset;box-sizing:border-box;cursor:pointer;flex:none;padding:7px 12px;border-radius:var(--radius-knop);background:var(--kleur-groen);color:var(--kleur-wit);font-size:.75rem;font-weight:700;white-space:nowrap;transition:transform .15s,background .2s}
.pt-knop:active{transform:scale(.94)}
.pt-knop:focus-visible{outline:2px solid var(--kleur-olijf);outline-offset:2px}
.pt-knop-licht{background:var(--kleur-groen-licht);color:var(--kleur-groen-donker)}
.pt-knop[disabled],.pt-knop[aria-pressed=true]{background:var(--kleur-olijf);color:var(--kleur-inkt);cursor:default}
.pt-snel{display:flex;gap:6px}
.pt-snel span{flex:1;padding:9px 4px;border-radius:12px;background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-size:.7rem;font-weight:700;text-align:center}
.pt-spoor{position:relative;display:flex;justify-content:space-between;margin:12px 2px 10px;padding-top:16px;font-size:.66rem;font-weight:600;color:var(--kleur-tekst-zacht)}
.pt-spoor::before,.pt-spoor i{content:"";position:absolute;top:5px;left:6px;height:3px;border-radius:3px}
.pt-spoor::before{right:6px;background:var(--kleur-zand)}
.pt-spoor i{width:0;max-width:calc(100% - 12px);background:var(--kleur-groen)}
.pt-spoor span{position:relative}
.pt-spoor span::before{content:"";position:absolute;top:-16px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--kleur-groen);box-shadow:0 0 0 2px var(--kleur-groen)}
.pt-spoor span:first-of-type::before{left:0;margin-left:0}
.pt-spoor span:last-of-type::before{left:auto;right:0;margin-left:0}
.pt-spoor i{width:calc(100% - 12px)}
.pt-chip{display:inline-block;margin-top:2px;padding:3px 10px;border-radius:var(--radius-knop);background:var(--kleur-groen-licht);color:var(--kleur-groen-donker);font-size:.7rem;font-weight:700}
.pt-product{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
.pt-product img{width:40px;height:48px;object-fit:contain}
.pt-product strong{display:block;font-size:.82rem;line-height:1.3;color:var(--kleur-inkt)}
.pt-ritme{display:block;height:4px;margin-top:5px;border-radius:4px;background:var(--kleur-zand);overflow:hidden}
.pt-ritme i{display:block;height:100%;width:75%;border-radius:4px;background:linear-gradient(90deg,var(--kleur-olijf),#c27a2c)}
.pt-stil{margin:4px 4px 0;font-size:.72rem;font-style:italic;color:var(--kleur-tekst-zacht)}
.pt-seintje{position:absolute;left:12px;right:12px;top:12px;z-index:3;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;background:var(--kleur-groen-donker);color:var(--kleur-wit);font-size:.8rem;line-height:1.4;transform:translateY(-140%);transition:transform .55s cubic-bezier(.34,1.56,.64,1);cursor:pointer}
.pt-seintje b{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--kleur-goud)}
.pt-seintje.in{transform:none}
.pt-levering{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:var(--kleur-wit);box-shadow:0 0 0 1px var(--kleur-zand)}
.pt-levering strong{display:block;font-size:.9rem;color:var(--kleur-inkt)}
.pt-doos{position:relative;flex:none;width:40px;height:34px;margin-top:8px;border-radius:4px;background:#c9a46a}
.pt-doos::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:6px;margin-left:-3px;background:#e7d3a8}
.pt-doos i{position:absolute;left:-3px;right:-3px;top:-8px;height:9px;border-radius:3px;background:#b48c52;transform-origin:left bottom}
.pt-kaartjes{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pt-schap{all:unset;box-sizing:border-box;cursor:pointer;position:relative;min-height:128px;perspective:600px}
.pt-schap:focus-visible{outline:2px solid var(--kleur-olijf);outline-offset:2px;border-radius:14px}
.pt-voor,.pt-achter{position:absolute;inset:0;display:flex;flex-direction:column;gap:3px;padding:10px 12px;border-radius:14px;backface-visibility:hidden;transition:transform .6s cubic-bezier(.34,1.3,.64,1)}
.pt-voor{background:var(--kleur-wit);box-shadow:inset 0 0 0 1px var(--kleur-zand)}
.pt-voor strong{font-family:var(--font-accent);font-size:1.05rem;color:var(--kleur-groen-donker)}
.pt-voor > span{font-size:.72rem;line-height:1.4;color:var(--kleur-tekst-zacht)}
.pt-voor em{margin-top:auto;font-style:normal;font-size:.66rem;font-weight:700;color:var(--kleur-olijf-donker)}
.pt-achter{justify-content:center;align-items:center;text-align:center;background:var(--kleur-groen);color:var(--kleur-wit);transform:rotateY(180deg)}
.pt-achter strong{font-size:1.2rem}
.pt-achter span{font-size:.72rem;line-height:1.4}
.pt-schap[aria-pressed=true] .pt-voor{transform:rotateY(-180deg)}
.pt-schap[aria-pressed=true] .pt-achter{transform:none}
.pt-recept{position:relative;min-height:128px;border-radius:14px;overflow:hidden;background:var(--kleur-zand)}
.pt-recept img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pt-recept > span{position:absolute;left:6px;right:6px;bottom:6px;padding:6px 8px;border-radius:10px;background:rgba(255,255,255,.92)}
.pt-recept strong{display:block;font-size:.82rem;color:var(--kleur-inkt)}
.pt-toestel figcaption{font-size:.82rem;color:var(--kleur-tekst-zacht);text-align:center}

/* De animaties die de boodschap dragen, elk keer als een scherm verschijnt. */
.pt-paneel.speelt .pt-a{animation:ptOp .5s cubic-bezier(.16,1,.3,1) both}
.pt-paneel.speelt .pt-a:nth-child(2){animation-delay:.08s}.pt-paneel.speelt .pt-a:nth-child(3){animation-delay:.16s}
.pt-paneel.speelt .pt-a:nth-child(4){animation-delay:.24s}.pt-paneel.speelt .pt-a:nth-child(5){animation-delay:.32s}
.pt-paneel.speelt .pt-a:nth-child(6),.pt-paneel.speelt .pt-a:nth-child(7){animation-delay:.4s}
.pt-paneel.speelt .pt-a:nth-child(8),.pt-paneel.speelt .pt-a:nth-child(9){animation-delay:.48s}
.pt-paneel.speelt .pt-spoor i{animation:ptSpoor 1.8s cubic-bezier(.45,0,.2,1) both .3s}
.pt-paneel.speelt .pt-spoor span:nth-of-type(2)::before{animation:ptStip .2s both 1.25s}
.pt-paneel.speelt .pt-spoor span:nth-of-type(3)::before{animation:ptStip .2s both 2s}
.pt-paneel.speelt .pt-chip{animation:ptChip 2.6s cubic-bezier(.34,1.56,.64,1) both}
.pt-paneel.speelt .pt-ritme i{animation:ptRitme 1.2s cubic-bezier(.16,1,.3,1) both .5s}
.pt-paneel.speelt .pt-doos i{animation:ptDeksel .9s cubic-bezier(.34,1.56,.64,1) both .2s}
.pt-paneel.speelt .pt-uit{animation:ptUit 1.1s cubic-bezier(.34,1.56,.64,1) both .3s}
.pt-paneel.speelt .pt-recept.pt-uit{animation-delay:.5s}
.pt-paneel.speelt .pt-kaart.pt-uit{animation-delay:.7s}
@media (prefers-reduced-motion:reduce){
  .pt-paneel.speelt *,.pt-paneel.speelt .pt-a,.pt-wagen.wip,.pt.loopt .pt-loop{animation:none!important}
  .pt-seintje,.pt-voor,.pt-achter,.pt-pijlers button{transition:none}
  .pt-pijlers button:hover{transform:none}
}
html.js .pt:not(.leeft) .pt-paneel:not(:first-of-type){display:none}
html.js .pt:not(.leeft) .pt-pijlers button:not(:first-child) small{display:none}
.pt:not(.leeft) .pt-scherm{overflow:visible}
.pt-paneel.speelt .pt-kerst{animation-delay:.9s}
.pt-kerst{background:var(--kleur-groen-licht);box-shadow:none}
/* Op de telefoon: kop, dan het toestel, dan de pijlers, zodat je ziet wat je aantikt. */
@media (max-width:959px){.pt-raam{gap:1.25rem}.pt-tekst{display:contents}.pt-tekst > .eyebrow{order:1;margin-bottom:-.6rem}.pt-tekst > h2{order:2;margin-bottom:-.6rem}.pt-tekst > p{order:3;margin:0}.pt-toestel{order:4;margin-top:.5rem}.pt-pijlers{order:5;margin-top:.5rem}.pt-tekst > .btn-groep{order:6;margin-top:0}}
.pl-fles[data-stijl=Landelijk] .pl-etiket line{stroke-dasharray:4 3}

/* De echte cursieve Bodoni, alleen voor het Landelijke etiket op Private label.
   Zelf gehost (niets bij Google); de browser haalt hem pas op als er cursief
   Bodoni op het scherm komt. Zonder dit bestand maakt elke browser de letter
   zelf schuin, en Safari meet die dan te smal: de naam liep over het etiket. */
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:600;font-display:swap;src:url(/fonts/bodoni-moda-italic-latin.woff2) format('woff2')}

/* Ingelogd: de winkelnaam in een gevulde groene knop met een poppetje, zodat
   je in één oogopslag ziet dát en bij wie je ingelogd bent. Inloggen blijft
   een lege omlijnde knop (Blue Olive, 26 oktober 2026; eerst groen omlijnd,
   17 oktober, en dat leek op de telefoon op Inloggen). */
.site-header .nav-login.nav-mijn,
.site-header .shop-kopinlog a.nav-mijn,
.site-header .shop-kopwinkel a.shop-kopwinkel-naam{display:inline-flex;align-items:center;gap:.45em;padding:.4rem .85rem;border:1.5px solid var(--kleur-groen);border-radius:var(--radius-knop);background:var(--kleur-groen);color:var(--kleur-wit);font-weight:600;text-decoration:none;line-height:1.2;transition:background-color var(--transitie),border-color var(--transitie),color var(--transitie)}
.site-header .nav-login.nav-mijn::before,
.site-header .shop-kopinlog a.nav-mijn::before{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/contain no-repeat}
.site-header .nav-login.nav-mijn:hover,
.site-header .shop-kopinlog a.nav-mijn:hover,
.site-header .shop-kopwinkel a.shop-kopwinkel-naam:hover{background:var(--kleur-groen-donker);border-color:var(--kleur-groen-donker);color:var(--kleur-wit)}
@media (max-width:1099px){
  .site-header .nav-login.nav-mijn{justify-content:center}
  .site-header .shop-kopinlog a.nav-mijn{padding:0 .8rem}
}

/* beurzen:begin (docs/opmaak/blueolive/beurzen in Launchpad) */
.bz-lijst{align-items:stretch}
.bz-beurs[hidden]{display:none}
.bz-naam{font-size:1.45rem;margin:0}
.bz-feiten{margin:.5rem 0 0;display:grid;gap:.45rem}
.bz-feiten div{display:grid;grid-template-columns:4.5rem 1fr;gap:.75rem}
.bz-feiten dt{font-weight:600;color:var(--kleur-groen-donker)}
.bz-feiten dd{margin:0;color:var(--kleur-tekst-zacht)}
.bz-knoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:auto;padding-top:1rem}
.card-body .bz-knoppen .btn{margin-top:0}
.card-body .bz-link{margin-top:.6rem}
.bz-noot{margin-top:2rem;font-size:.95rem}
/* beurzen:end */
/* Proefpakket: ingelogd staan de gegevens er al (proefdoos.js) */
.pd-bekend{margin:.2rem 0 .8rem}
.pd-pasaan{background:none;border:0;padding:0;font:inherit;color:var(--kleur-groen);text-decoration:underline;cursor:pointer}

/* Uitklapmenu's zoals op de oude blueolive.nl (Blue Olive, 26 oktober 2026):
   een zandkleurig vlak, groene letters in Montserrat van 14px, nergens vet, en
   de kolommen met een wit lijntje ertussen. Alleen breed: op de telefoon staat
   het menu open in de lijst. */
@media (min-width:1100px){
  .submenu{background:var(--kleur-zand);border:0;border-radius:0;box-shadow:0 12px 24px rgba(33,35,38,.08);padding:1.1rem 1rem}
  .submenu a,.shop-submenu a{font-family:var(--font-body);font-size:14px;font-weight:400;line-height:1.5;color:var(--kleur-groen);padding:.2rem .5rem;border-radius:0}
  .submenu a:hover,.submenu a:focus-visible,.shop-submenu a:hover,.shop-submenu a:focus-visible{background:transparent;color:var(--kleur-olijf);text-decoration:none}
  .shop-submenu{column-rule:1.6px solid var(--kleur-wit);column-gap:2rem}
  .shop-submenu .shop-menu-alle>a,.shop-submenu>li:not(.shop-menu-item)>a{font-weight:400;border-radius:0;border-color:var(--kleur-groen)}
  .shop-submenu .shop-menu-alle>a:hover,.shop-submenu>li:not(.shop-menu-item)>a:hover{background:var(--kleur-wit);color:var(--kleur-groen)}
  .shop-menu-kop{font-weight:400}
}
/* Greep uit de schappen draait vanzelf door; de knop zet hem stil (home.js) */
.sz-car-pauze{display:block;margin:.75rem 0 0 auto;padding:.25rem .8rem;border:1.5px solid var(--kleur-lijn);border-radius:var(--radius-knop);background:var(--kleur-wit);color:var(--kleur-tekst-zacht);font:inherit;font-size:.8rem;cursor:pointer}
.sz-car-pauze:hover{border-color:var(--kleur-groen);color:var(--kleur-groen)}
/* Het menu in dunne letters, zoals de oude blueolive.nl (Blue Olive, 26 oktober 2026). */
.nav-menu > li > a,.nav-menu .submenu a,.nav-login,.site-header .shop-kopinlog a,.site-header .shop-kopwinkel a{font-weight:400}
/* Nabestellen in de shop: niet op voorraad valt op (Blue Olive, 26 oktober 2026). */
.shop-voorraad-niet{color:var(--kleur-fout);background:#fbeeee}