@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/caveat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Caveat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/caveat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/montserrat-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/montserrat-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/montserrat-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-800-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/fonts/montserrat-800-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}


/* ============ DESIGN TOKENS ============ */
:root{
  --groen-900:#173B25;
  --groen-800:#2c4f1f;
  --groen-700:#3d6b2c;   /* primair merkgroen — Streekvers */
  --groen-600:#4f8339;
  --groen-500:#67a04c;
  --groen-100:#e6f0dd;
  --groen-50:#f5f9f1;

  --oranje-700:#8a4600;
  --oranje-600:#a05500;  /* primair merkoranje — koppen op wit */
  --oranje-500:#c76e00;
  --amber-400:#e6a817;   /* logo-goud — decoratief, badges, iconen */
  --amber-100:#fdf1d9;

  --inkt:#22281d;
  --grijs-700:#4b5245;
  --grijs-600:#68705f;
  --grijs-400:#9aa38c;
  --grijs-300:#cbd2bf;
  --grijs-200:#e4e8db;
  --grijs-100:#f2f4ec;
  --wit:#ffffff;

  --font-kop:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-tekst:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-merk:'Caveat',cursive;

  --breedte:1240px;
  --breedte-smal:760px;
  --radius:16px;
  --radius-klein:10px;
  --radius-groot:28px;
  --schaduw-1:0 1px 2px rgba(34,40,29,.06), 0 2px 8px rgba(34,40,29,.07);
  --schaduw-2:0 2px 6px rgba(34,40,29,.07), 0 12px 30px rgba(34,40,29,.12);
  --schaduw-3:0 18px 50px rgba(34,40,29,.20);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;font-family:var(--font-tekst);color:var(--inkt);background:var(--wit);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-kop);margin:0;line-height:1.15;letter-spacing:-.01em;}
.omhulsel{max-width:var(--breedte);margin:0 auto;padding:0 24px;}
.omhulsel--smal{max-width:var(--breedte-smal);margin:0 auto;padding:0 24px;}

/* ============ BUTTONS ============ */
.knop{display:inline-flex;align-items:center;gap:.5rem;padding:.9rem 1.7rem;border-radius:999px;font-weight:700;font-size:.98rem;border:2px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
.knop--primair{background:var(--groen-700);color:var(--wit);box-shadow:var(--schaduw-1);}
.knop--primair:hover{background:var(--groen-800);transform:translateY(-2px);box-shadow:var(--schaduw-2);}
.knop--wit{background:var(--wit);color:var(--groen-800);}
.knop--wit:hover{transform:translateY(-2px);box-shadow:var(--schaduw-2);}
.knop--rand{background:transparent;color:var(--groen-800);border-color:var(--groen-700);}
.knop--rand:hover{background:var(--groen-50);}
.knop--klein{padding:.6rem 1.1rem;font-size:.86rem;}

/* ============ TOP BAR ============ */
.topbalk{background:var(--groen-900);color:var(--groen-100);font-size:.85rem;padding:.5rem 0;}
.topbalk__inhoud{display:flex;justify-content:center;gap:.7rem;align-items:center;flex-wrap:wrap;text-align:center;}
.topbalk__scheiding{opacity:.5;}
.topbalk__sterren{color:var(--amber-400);font-weight:700;}
.topbalk__sterren-detail{color:var(--groen-100);font-weight:400;opacity:.85;}

/* ============ HEADER ============ */
.kop{position:sticky;top:0;z-index:50;background:var(--wit);box-shadow:0 1px 0 var(--grijs-200);}
.kop__hoofd{display:flex;align-items:center;justify-content:space-between;padding:.9rem 24px;gap:2rem;max-width:1240px;margin:0 auto;}
.kop__logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0;}
.kop__logo img{height:52px;width:auto;}
.kop__nav ul{display:flex;gap:1.9rem;list-style:none;margin:0;padding:0;}
.kop__nav a{font-weight:600;font-size:.96rem;color:var(--grijs-700);transition:color .15s;}
.kop__nav a:hover{color:var(--groen-700);}
.kop__acties{display:flex;align-items:center;gap:1.3rem;}
.kop__telefoon{display:flex;flex-direction:column;font-size:.82rem;color:var(--grijs-600);line-height:1.3;}
.kop__telefoon strong{color:var(--inkt);font-size:.98rem;}
.kop__mand{position:relative;color:var(--inkt);}
.menu-schakelaar{position:absolute;opacity:0;pointer-events:none;}
.menu-knop{display:none;order:9;cursor:pointer;font-size:1.7rem;line-height:1;color:var(--inkt);padding:.2rem .4rem;user-select:none;}
.menu-schakelaar:focus-visible+.menu-knop{outline:2px solid var(--groen-700);outline-offset:2px;}
/* Omslagpunt van 980 naar 1200 op 28 september 2026. Met het menu-item Offerte
   erbij heeft de kop negen items en past de brede versie pas vanaf ongeveer
   1250px. Tussen 981 en 1200 stond het menu wel uitgeklapt maar viel de
   Proefbox-knop buiten beeld. Nu klapt het daar netjes in. */
@media(max-width:1200px){
  .kop__hoofd{position:relative;gap:1rem;}
  .kop__nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--wit);border-top:1px solid var(--grijs-200);box-shadow:var(--schaduw-1);padding:.2rem 24px .8rem;}
  .menu-schakelaar:checked~.kop__nav{display:block;}
  .kop__nav ul{flex-direction:column;gap:0;}
  .kop__nav li+li{border-top:1px solid var(--grijs-200);}
  .kop__nav a{display:block;padding:.9rem 0;font-size:1.02rem;}
  .menu-knop{display:block;}
}
@media(max-width:620px){
  .kop__telefoon{display:none;}
  .kop__hoofd{padding:.7rem 16px;gap:.6rem;}
  .kop__logo img{height:42px;}
}

/* ============ BREADCRUMB ============ */
.kruimelpad{font-size:.82rem;color:var(--grijs-600);padding:1rem 0 0;}
.kruimelpad a{color:var(--groen-700);font-weight:600;}
.kruimelpad span{margin:0 .4rem;color:var(--grijs-400);}

/* ============ PAGINAKOP (secundaire pagina's) ============ */
.paginakop{background:linear-gradient(120deg,var(--groen-900),var(--groen-800));padding-block:clamp(2.5rem,5vw,3.5rem);color:var(--wit);}
.paginakop__kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;padding:.4rem .9rem;border-radius:999px;margin-bottom:1rem;}
.paginakop h1{font-size:clamp(2rem,4vw,2.9rem);max-width:20ch;color:var(--wit);}
.paginakop p{margin-top:1rem;color:var(--groen-100);font-size:1.05rem;max-width:52ch;}

/* ============ HERO (met Johan) ============ */
.hero{position:relative;background:linear-gradient(120deg,var(--groen-900) 0%,var(--groen-800) 55%,var(--groen-700) 100%);overflow:hidden;padding-block:0;}
.hero:before{content:"";position:absolute;top:-10rem;left:-8rem;width:30rem;height:30rem;border-radius:50%;background:radial-gradient(circle,rgba(230,168,23,.18) 0%,transparent 70%);pointer-events:none;}
.hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .78fr;gap:1rem;align-items:end;}
.hero__tekstblok{padding-block:clamp(3rem,7vw,5.5rem);}
.hero__kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);color:var(--wit);font-weight:700;font-size:.82rem;letter-spacing:.03em;text-transform:uppercase;padding:.45rem 1rem;border-radius:999px;margin-bottom:1.3rem;}
.hero h1{font-size:clamp(2.3rem,4.6vw,3.6rem);max-width:14ch;color:var(--wit);}
.hero h1 em{font-style:normal;color:var(--amber-400);}
.hero__tekst{margin-top:1.3rem;font-size:1.12rem;color:var(--groen-100);max-width:42ch;}
.hero__acties{margin-top:2.1rem;display:flex;gap:1rem;flex-wrap:wrap;}
.hero__johan{position:relative;align-self:end;height:100%;display:flex;align-items:flex-end;justify-content:center;}
.hero__johan img{max-height:min(620px,88vh);width:auto;object-fit:contain;filter:drop-shadow(0 25px 40px rgba(0,0,0,.35));}
@media(max-width:1000px){.hero__grid{grid-template-columns:1.15fr .85fr;}.hero__johan img{max-height:420px;}}
@media(max-width:640px){.hero__grid{grid-template-columns:1fr;}.hero__johan{order:-1;padding-top:2rem;}.hero__johan img{max-height:300px;}}

/* ============ MAAT-VERGELIJKING (kist-standaard) ============ */
.maten{background:var(--groen-700);}
.maten__raster{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:.5rem;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.maten__raster::-webkit-scrollbar{height:6px;}
.maten__raster::-webkit-scrollbar-thumb{background:var(--groen-500);border-radius:99px;}
.maten__kaart{scroll-snap-align:start;flex:0 0 min(320px,84vw);position:relative;background:rgba(255,255,255,.06);border-radius:var(--radius-groot);padding:1.6rem 1.6rem 2rem;transition:transform .2s ease;}
.maten__kaart:hover{transform:translateY(-4px);}
.maten__badge{position:absolute;top:1.6rem;left:1.6rem;z-index:2;background:var(--groen-900);color:var(--wit);font-weight:700;font-size:.8rem;padding:.4rem .75rem;border-radius:999px;display:flex;align-items:center;gap:.35rem;}
.maten__vlag{position:absolute;top:1.6rem;right:1.6rem;z-index:2;background:var(--amber-400);color:var(--groen-900);font-weight:800;font-size:.72rem;letter-spacing:.03em;text-transform:uppercase;padding:.35rem .7rem;border-radius:999px;}
.maten__beeld{aspect-ratio:1;background:linear-gradient(160deg,var(--groen-50) 0%,var(--amber-100) 100%);border-radius:var(--radius);display:grid;place-items:center;overflow:hidden;margin-bottom:1.2rem;}
.maten__beeld img{width:100%;height:100%;object-fit:contain;padding:.6rem;mix-blend-mode:multiply;}
.maten__titel{font-family:var(--font-kop);font-weight:800;font-size:1.25rem;color:var(--wit);}
.maten__prijs{margin-top:.3rem;font-weight:700;font-size:.95rem;color:var(--amber-400);}
.maten__prijs small{font-weight:500;color:var(--groen-100);opacity:.75;}
.maten__tekst{margin-top:.4rem;font-size:.9rem;color:var(--groen-100);opacity:.85;min-height:2.7em;line-height:1.35;}
.maten__link{display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;font-weight:700;font-size:.9rem;color:var(--wit);text-decoration:underline;text-underline-offset:3px;}


/* ============ SNELKOPPELINGEN (4-panel, groothuisbouw-stijl) ============ */
.snel{padding-block:clamp(2.5rem,5vw,3.5rem) 0;}
.snel__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;}
.snel__tegel{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3.1;box-shadow:var(--schaduw-1);transition:transform .2s ease, box-shadow .2s ease;}
.snel__tegel:hover{transform:translateY(-4px);box-shadow:var(--schaduw-2);}
.snel__tegel img{width:100%;height:100%;object-fit:cover;}
.snel__laag{position:absolute;inset:0;background:linear-gradient(0deg,rgba(31,56,21,.88) 0%,rgba(31,56,21,.15) 55%,rgba(31,56,21,0) 75%);display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;}
.snel__titel{color:var(--wit);font-weight:700;font-size:1.02rem;}
.snel__link{color:var(--groen-100);font-size:.82rem;margin-top:.2rem;display:inline-flex;align-items:center;gap:.3rem;}
@media(max-width:900px){.snel__raster{grid-template-columns:repeat(2,1fr);}}

/* ============ SECTIEKOP ============ */
.sectiekop{max-width:46rem;margin-bottom:2.2rem;}
.sectiekop--midden{margin-left:auto;margin-right:auto;text-align:center;}
.kicker{display:inline-block;color:var(--oranje-600);font-weight:700;font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;margin-bottom:.5rem;}
.sectiekop h2{font-size:clamp(1.6rem,3vw,2.15rem);color:var(--inkt);}
.sectiekop p{margin-top:.7rem;color:var(--grijs-600);font-size:1.02rem;}

.ond{padding-block:clamp(3rem,6vw,4.5rem);}
.ond--groen{background:var(--groen-50);}
.ond--donker{background:var(--groen-900);color:var(--groen-100);}
.ond--donker .sectiekop h2{color:var(--wit);}
.ond--donker .kicker{color:var(--amber-400);}

/* ============ ZEKERHEDEN CAROUSEL ============ */
.zeker__rij{display:flex;gap:1.4rem;overflow-x:auto;padding-bottom:1rem;scroll-snap-type:x mandatory;scroll-behavior:smooth;}
.zeker__rij::-webkit-scrollbar{height:6px;}
.zeker__rij::-webkit-scrollbar-thumb{background:var(--groen-600);border-radius:99px;}
.schuif-wrap{position:relative;}
.schuif-knop{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:46px;height:46px;border-radius:50%;border:none;background:var(--wit);color:var(--groen-800);box-shadow:var(--schaduw-2);display:grid;place-items:center;cursor:pointer;font-size:1.1rem;transition:transform .15s;}
.schuif-knop:hover{transform:translateY(-50%) scale(1.08);}
.schuif-knop--links{left:-22px;}
.schuif-knop--rechts{right:-22px;}
.ond--donker .schuif-knop{background:var(--groen-900);color:var(--wit);}
@media(max-width:700px){.schuif-knop{display:none;}}
.zeker__kaart{scroll-snap-align:start;flex:0 0 270px;background:var(--wit);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw-1);}
.zeker__beeld{aspect-ratio:4/3;overflow:hidden;}
.zeker__beeld img{width:100%;height:100%;object-fit:cover;}
.zeker__body{padding:1.2rem 1.3rem 1.4rem;}
.zeker__titel{font-family:var(--font-kop);font-weight:700;font-size:1.02rem;color:var(--inkt);}
.zeker__tekst{margin-top:.5rem;font-size:.9rem;color:var(--grijs-600);}
.zeker__link{display:inline-flex;align-items:center;gap:.35rem;margin-top:.9rem;font-weight:700;font-size:.86rem;color:var(--groen-700);}

/* ============ PRODUCTEN ============ */
.raster--4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem;}
.raster--3{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
.kaart.pk{background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw-1);transition:transform .18s, box-shadow .18s;}
.kaart.pk:hover{transform:translateY(-4px);box-shadow:var(--schaduw-2);}
.pk__foto{aspect-ratio:1;background:var(--grijs-100);display:grid;place-items:center;overflow:hidden;}
.pk__foto img{width:100%;height:100%;object-fit:contain;padding:.7rem;}
.pk__vlag{position:absolute;margin:.6rem;background:var(--oranje-600);color:var(--wit);font-size:.7rem;font-weight:700;padding:.25rem .6rem;border-radius:999px;}
.pk__body{padding:1rem 1.1rem 1.2rem;}
.pk__naam{font-size:.96rem;font-weight:600;color:var(--inkt);margin-bottom:.5rem;min-height:2.5em;}
.pk__prijs{font-family:var(--font-kop);font-weight:800;font-size:1.2rem;color:var(--groen-700);margin-bottom:.8rem;}
.pk__prijs small{color:var(--grijs-400);font-size:.75rem;font-weight:500;}
@media(max-width:980px){.raster--4,.raster--3{grid-template-columns:repeat(2,1fr);}}

/* ============ WAAROM STREEKVERS (badges) ============ */
.waarom__raster{display:grid;grid-template-columns:repeat(6,1fr);gap:1.3rem;}
.waarom__item{text-align:center;padding:1.4rem .8rem;}
.waarom__icoon{width:52px;height:52px;margin:0 auto 1rem;display:grid;place-items:center;background:rgba(230,168,23,.16);border-radius:50%;color:var(--amber-400);font-size:1.3rem;}
.waarom__titel{font-weight:700;font-size:.92rem;color:var(--wit);}
.waarom__tekst{margin-top:.4rem;font-size:.8rem;color:var(--groen-100);opacity:.8;}
@media(max-width:980px){.waarom__raster{grid-template-columns:repeat(3,1fr);}}
@media(max-width:640px){.waarom__raster{grid-template-columns:repeat(2,1fr);}}

/* ============ LANGE TEKST / SEO ============ */
.tekst{color:var(--grijs-700);font-size:1.02rem;}
.tekst p{margin:0 0 1.1rem;}
.tekst a{color:var(--groen-700);font-weight:600;text-decoration:underline;text-decoration-color:var(--groen-300);text-underline-offset:3px;}
.tekst-raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
@media(max-width:860px){.tekst-raster{grid-template-columns:1fr;}}

/* ============ REVIEWS (compact) ============ */
.reviews__strip{display:flex;align-items:center;gap:2rem;background:var(--groen-50);border-radius:var(--radius);padding:1.4rem 1.8rem;flex-wrap:wrap;}
.reviews__score{display:flex;align-items:center;gap:.8rem;flex-shrink:0;}
.reviews__score-getal{font-family:var(--font-kop);font-size:1.9rem;font-weight:800;color:var(--groen-800);}
.reviews__score-detail{font-size:.8rem;color:var(--grijs-600);line-height:1.3;}
.reviews__score-sterren{color:var(--amber-400);letter-spacing:1px;}
.reviews__scheiding{width:1px;align-self:stretch;background:var(--grijs-300);}
.reviews__citaten{flex:1;min-width:260px;display:flex;gap:1.6rem;flex-wrap:wrap;}
.reviews__citaat{flex:1;min-width:220px;font-size:.9rem;color:var(--grijs-700);font-style:italic;}
.reviews__citaat strong{display:block;font-style:normal;font-weight:700;color:var(--inkt);font-size:.82rem;margin-top:.4rem;}
.reviews__links{display:flex;flex-direction:column;gap:.4rem;flex-shrink:0;font-size:.85rem;}
.reviews__links a{color:var(--groen-700);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;}
@media(max-width:760px){.reviews__strip{flex-direction:column;align-items:flex-start;}.reviews__scheiding{display:none;}}
/* ============ CONTACTFORMULIER ============ */
.formulier{display:grid;gap:1.1rem;}
.formulier label{display:block;font-weight:600;font-size:.88rem;color:var(--inkt);margin-bottom:.4rem;}
.formulier input,.formulier select,.formulier textarea{width:100%;padding:.8rem 1rem;border:1px solid var(--grijs-300);border-radius:var(--radius-klein);font-family:var(--font-tekst);font-size:.96rem;background:var(--wit);}
.formulier input:focus,.formulier select:focus,.formulier textarea:focus{outline:2px solid var(--groen-500);outline-offset:1px;}
.formulier__rij{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;}
@media(max-width:640px){.formulier__rij{grid-template-columns:1fr;}}

.faq{max-width:var(--breedte-smal);margin:0 auto;}
.faq__item{border-bottom:1px solid var(--grijs-200);padding:1.4rem 0;}
.faq__vraag{display:flex;justify-content:space-between;align-items:center;gap:1rem;cursor:pointer;font-family:var(--font-kop);font-weight:700;font-size:1.02rem;color:var(--inkt);list-style:none;}
.faq__vraag::-webkit-details-marker{display:none;}
.faq__vraag::after{content:"+";font-size:1.4rem;color:var(--groen-700);flex-shrink:0;transition:transform .15s;}
details[open] .faq__vraag::after{transform:rotate(45deg);}
.faq__antwoord{margin-top:.8rem;color:var(--grijs-700);font-size:.96rem;line-height:1.65;}
.okaart{background:var(--wit);border-radius:var(--radius);padding:1.8rem;box-shadow:var(--schaduw-1);position:relative;}
.okaart__nummer{position:absolute;top:1.4rem;right:1.6rem;font-family:var(--font-kop);font-size:2rem;font-weight:800;color:var(--groen-100);}
.okaart__titel{font-size:1.08rem;font-weight:700;margin-bottom:.6rem;color:var(--inkt);}
.kaarten{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;}
@media(max-width:900px){.kaarten{grid-template-columns:1fr;}}

/* ============ CTA-BANNER ============ */
.cta{background:linear-gradient(120deg,var(--groen-700),var(--groen-800));border-radius:var(--radius-groot);overflow:hidden;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;color:var(--wit);}
.cta__tekst{padding:clamp(2.2rem,5vw,3.5rem);}
.cta__beeld{position:relative;height:100%;min-height:260px;background:linear-gradient(160deg,var(--groen-600),var(--groen-900));display:flex;align-items:center;justify-content:center;padding:1.5rem;}
.cta__beeld img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 15px 25px rgba(0,0,0,.3));}
.cta__badge{position:absolute;top:1.3rem;left:1.3rem;background:var(--amber-400);color:var(--groen-900);font-weight:800;font-size:.78rem;letter-spacing:.02em;text-transform:uppercase;padding:.4rem .8rem;border-radius:999px;}
@media(max-width:760px){.cta{grid-template-columns:1fr;}.cta__beeld{order:-1;min-height:200px;}}
.cta h2{color:var(--wit);font-size:clamp(1.5rem,2.6vw,2rem);max-width:20ch;}
.cta p{color:var(--groen-100);margin-top:.6rem;}

/* ============ FOOTER ============ */
.voet{background:var(--inkt);color:var(--grijs-300);}
.voet__hoofd{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.5rem;padding-block:3.5rem;}
.voet__logo{height:48px;margin-bottom:1rem;filter:brightness(0) invert(1);}
.voet__pitch{font-size:.92rem;color:var(--grijs-400);max-width:26ch;}
.voet__kop{font-family:var(--font-kop);color:var(--wit);font-size:.92rem;font-weight:700;letter-spacing:.03em;text-transform:uppercase;margin-bottom:1.1rem;}
.voet__lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.65rem;}
.voet__lijst a{font-size:.9rem;color:var(--grijs-400);transition:color .15s;}
.voet__lijst a:hover{color:var(--amber-400);}
.voet__adres{font-style:normal;font-size:.9rem;color:var(--grijs-400);line-height:1.7;}
.voet__adres a{color:var(--grijs-300);}
.voet__onder{border-top:1px solid rgba(255,255,255,.08);}
.voet__onder-inhoud{display:flex;justify-content:space-between;padding-block:1.3rem;font-size:.82rem;color:var(--grijs-400);flex-wrap:wrap;gap:.6rem;}
@media(max-width:900px){.voet__hoofd{grid-template-columns:1fr 1fr;}}


/* Score onder de koopknop (10 nov 2026). */
.pp__score{margin:.5rem 0 0;font-size:.92rem;color:#4a4a4a;}
.pp__score .beoordeling{margin:0;}
.pp__score .ster--aan{color:#e0a100;}
/* Meebalk productpagina, telefoon (10 nov 2026, zie site.js). Boven de cookiebalk. */
.meebalk{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;gap:.8rem;
  padding:.6rem 1rem calc(.6rem + env(safe-area-inset-bottom));background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.12);}
.meebalk[hidden]{display:none;}
.meebalk__prijs{display:flex;gap:.4rem;align-items:baseline;font-size:1.15rem;font-weight:700;white-space:nowrap;}
.meebalk__prijs s{color:#6b6b6b;font-size:.9rem;font-weight:400;}
.meebalk__knop{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;}
body.meebalk-aan{padding-bottom:calc(76px + env(safe-area-inset-bottom));}
body.meebalk-aan .cookiebalk{bottom:calc(84px + env(safe-area-inset-bottom));}
.paginahero__lead.paginahero__lead--altijd{display:block;}
/* De betaalstrook: logo's van de betaalmethodes plus hoe wij bezorgen. */
.betaalraster{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:1.2rem;}
.betaalkaart{display:flex;flex-direction:column;align-items:center;gap:.45rem;
  background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;
  padding:.85rem 1.1rem;min-width:104px;box-shadow:0 1px 2px rgba(0,0,0,.04);}
.betaalkaart img{display:block;height:36px;width:auto;}
.betaalkaart span{font-size:.78rem;color:#4a4a45;text-align:center;line-height:1.25;}
.betaalkaart--tekst{justify-content:center;}
.betaalkaart__woord{font-weight:700;font-size:.92rem;color:#2f3a24;}
.betaalstrook__voet{margin-top:1.3rem;text-align:center;font-size:.87rem;color:#5c5c55;
  max-width:46rem;margin-left:auto;margin-right:auto;}
@media(max-width:640px){
  .betaalkaart{min-width:88px;padding:.7rem .8rem;}
  .betaalkaart img{height:30px;}
}


/* ============ TOEVOEGINGEN VOOR DE COMPLETE SITE ============ */
.ond--wit{background:var(--wit);}
/* Boven de producten hoort alleen een korte inleiding te staan, dus die
   strook mag smaller dan een gewone sectie. */
.ond--kort{padding-top:1.6rem;padding-bottom:1.2rem;}
/* ---- contrast: goud is te licht op groen en op wit ---- */
/* op middengroen een lichter goud: 2,99 -> 4,63 */
.maten .kicker,
.maten__prijs,
.zekerheden .kicker,
.ctaband .kicker{color:#ffd97a!important;}
.maten__prijs small,
.maten__tekst{color:#e8f0dd;}
/* sterren op wit: goud haalde 2,1, dit oranje haalt 5,5 */
.reviews__score-sterren,
.reviews__sterren{color:var(--oranje-600);}
.kicker{color:var(--oranje-600);}
/* op het donkerste groen mag het goud blijven staan, dat haalt 6,1 */
.topbalk__sterren{color:var(--amber-400);}

/* leesbaarder grijs voor kleine tekst op wit */
.kruimelpad span{color:var(--grijs-600);}
.pk__prijs small{color:var(--grijs-600);}

/* ---- hero op binnenpagina's ---- */
.paginahero{position:relative;background:var(--groen-900);overflow:hidden;}
.paginahero:before{content:"";position:absolute;inset:0;background-image:var(--hero);
  background-size:cover;background-position:center;opacity:.34;}
.paginahero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--groen-900) 12%,rgba(31,56,21,.72) 55%,rgba(31,56,21,.35) 100%);}
.paginahero__inhoud{position:relative;z-index:2;padding-block:clamp(3rem,7vw,5.5rem);max-width:1240px;}
.paginahero__kicker{display:inline-block;padding:.4rem 1rem;border-radius:99px;background:rgba(255,255,255,.14);
  color:var(--wit);font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.paginahero h1{margin:1.1rem 0 0;color:var(--wit);font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;max-width:19ch;}
.paginahero__lead{margin-top:1rem;color:var(--groen-100);max-width:56ch;font-size:1.05rem;line-height:1.7;}
.paginahero__knoppen{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:1.8rem;}
.paginahero__regel{margin-top:1rem;color:var(--groen-100);font-size:.92rem;line-height:1.5;}
.paginahero__voet{margin-top:1.4rem;color:rgba(255,255,255,.72);font-size:.85rem;}

/* ---- tekst met zijbalk ---- */
.inhoud-raster{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:3rem;align-items:start;}
.tekst--artikel{max-width:none;}
.tekst--artikel h2{margin-top:2.4rem;font-size:1.5rem;line-height:1.25;}
.tekst--artikel h2:first-child{margin-top:0;}
.tekst--artikel h3{margin-top:1.8rem;font-size:1.12rem;color:var(--groen-800);}
.tekst--artikel p{line-height:1.8;}
.tekst--artikel ul{margin:1rem 0 1.4rem;padding-left:1.1rem;}
.tekst--artikel li{margin-bottom:.5rem;line-height:1.7;}
.tekst--artikel a{color:var(--groen-700);text-decoration:underline;text-underline-offset:3px;}
/* Een knop in een tekstblok kreeg de linkkleur van die tekst: groen op een
   groene knop, dus onleesbaar. `.tekst--artikel a` (0,2,1) wint het van
   `.knop--primair` (0,1,0), en dat gebeurde op achtennegentig pagina's --
   overal waar een knop tussen de lopende tekst staat. Johan zag het op de
   kerstpagina op 28 september 2026: "tekst valt weg". Deze regel geeft de knop
   zijn eigen kleur en haalt de onderstreping eraf; een knop hoort er niet uit
   te zien als een link in een zin. */
.tekst a.knop,.tekst--artikel a.knop{text-decoration:none;font-weight:700;}
.tekst a.knop--primair,.tekst--artikel a.knop--primair{color:var(--wit);}
.tekst a.knop--wit,.tekst--artikel a.knop--wit{color:var(--groen-700);}
.tekst__opsomming{list-style:none;padding-left:0;}
.vinklijst{list-style:none;padding-left:0;margin:1.2rem 0 1.6rem;display:grid;gap:.55rem;}
.vinklijst li{position:relative;padding-left:1.9rem;line-height:1.6;}
.vinklijst li:before{content:"";position:absolute;left:.25rem;top:.42em;width:.75rem;height:.42rem;
  border-left:2.5px solid var(--groen-600);border-bottom:2.5px solid var(--groen-600);transform:rotate(-45deg);}
.tussencta{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;flex-wrap:wrap;
  margin:2.2rem 0;padding:1.3rem 1.5rem;background:var(--groen-50);border:1px solid var(--groen-100);
  border-left:4px solid var(--groen-600);border-radius:12px;}
.tussencta strong{display:block;color:var(--inkt);font-size:1.02rem;}
.tussencta span{display:block;font-size:.9rem;color:var(--grijs-600);margin-top:.2rem;}
.beeld-mist{object-fit:contain!important;padding:12%;background:var(--grijs-100);opacity:.55;}
.pk__uitleg{font-size:.85rem;color:var(--grijs-600);line-height:1.5;margin:.4rem 0 .6rem;}
.rekentool{max-width:900px;margin:0 auto;background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);padding:1.8rem;box-shadow:var(--schaduw-1);}
.rekentool__velden{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.rekentool__velden label,.rekentool__wensen legend{display:block;font-weight:700;font-size:.86rem;margin-bottom:.4rem;}
.rekentool__velden input,.rekentool__velden select{width:100%;padding:.7rem .8rem;border:1px solid var(--grijs-300);
  border-radius:9px;font-family:inherit;font-size:.95rem;background:var(--wit);}
.rekentool__wensen{border:0;padding:1.2rem 0 0;margin:0;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;}
.rekentool__wensen label{font-weight:500;font-size:.92rem;display:flex;align-items:center;gap:.45rem;}
.rekentool__uitslag{margin-top:1.5rem;padding-top:1.4rem;border-top:1px solid var(--grijs-200);}
.rekentool__uitslag h3{font-size:1.1rem;margin-bottom:.8rem;}
.rekentool__regels{list-style:none;padding:0;margin:0 0 1rem;}
.rekentool__regels li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;padding:.6rem 0;
  border-bottom:1px solid var(--grijs-200);}
.rekentool__regels span{color:var(--grijs-600);font-size:.9rem;}
.rekentool__regels a{margin-left:auto;color:var(--groen-700);font-weight:700;font-size:.86rem;}
.rekentool__totaal{font-size:1.05rem;}
.rekentool__totaal strong{color:var(--groen-700);}
.rekentool__wens{font-size:.9rem;color:var(--grijs-600);margin-top:.4rem;}
.rekentool__knop{margin-top:1.2rem;}
@media(max-width:820px){.rekentool__velden{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.rekentool__velden{grid-template-columns:1fr;}}
.tabelwikkel{overflow-x:auto;max-width:820px;margin:0 auto;}
.schooltabel{width:100%;border-collapse:collapse;font-size:.95rem;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:var(--radius);overflow:hidden;}
.schooltabel th,.schooltabel td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--grijs-200);}
.schooltabel th{background:var(--groen-50);font-weight:700;color:var(--groen-800);}
.schooltabel tr:last-child td{border-bottom:0;}
.tabelnoot{max-width:820px;margin:1rem auto 0;font-size:.92rem;color:var(--grijs-600);}
.tabelnoot a{color:var(--groen-700);text-decoration:underline;}
.stappen{max-width:820px;margin:0 auto;padding-left:0;list-style:none;counter-reset:stap;}
.stappen li{counter-increment:stap;position:relative;padding:.9rem 0 .9rem 3.2rem;
  border-bottom:1px solid var(--grijs-200);}
.stappen li:last-child{border-bottom:0;}
.stappen li:before{content:counter(stap);position:absolute;left:0;top:.9rem;width:2.1rem;height:2.1rem;
  border-radius:50%;background:var(--groen-700);color:var(--wit);display:grid;place-items:center;
  font-weight:800;font-size:.95rem;}
.stappen strong{display:block;color:var(--inkt);}
.stappen span{color:var(--grijs-600);font-size:.93rem;}
.vraag{border:1px solid var(--grijs-200);border-radius:12px;background:var(--wit);margin-bottom:.7rem;}
/* ---- vragenpagina: sprongmenu en sectie-inleiding ---- */
/* Zeven onderwerpen achter elkaar is veel scrollen voor iemand die maar een
   ding wil weten. Deze strook staat direct onder de aanhef en brengt hem in
   een klik bij het juiste blok. */
.faqsprong{display:flex;flex-wrap:wrap;gap:.45rem;justify-content:center;}
.faqsprong__balk{border-bottom:1px solid var(--grijs-200);}
/* Acht secties van 4,5rem boven en onder is bijna twee schermen aan lucht voor
   wie een vraag zoekt. Op deze pagina telt de lijst, niet de ruimte eromheen. */
.ond--vragen{padding-block:clamp(1.1rem,2vw,1.6rem);}
.ond--vragen .sectiekop{margin-bottom:.9rem;max-width:820px;margin-inline:auto;}
.ond--vragen .sectiekop h2{font-size:clamp(1.25rem,2.1vw,1.55rem);}
.ond--vragen .kicker{font-size:.76rem;}
.ond--vragen .vraag{margin-bottom:.4rem;border-radius:10px;}
.ond--vragen .vraag summary{padding:.62rem .95rem;font-size:.95rem;}
.ond--vragen .vraag summary:after{font-size:1.2rem;}
.ond--vragen .vraag__antwoord{padding:.15rem .95rem .85rem;line-height:1.62;font-size:.95rem;}
.ond--vragen .vragenlijst__intro{margin:0 auto .8rem;max-width:820px;font-size:.93rem;}
/* De hero op de vragenpagina: kort houden, de eerste vraag hoort in beeld. */
.paginahero--kort .paginahero__inhoud{padding-block:clamp(1.6rem,3.4vw,2.4rem);}
.paginahero--kort h1{font-size:clamp(1.5rem,3.4vw,2.1rem);}
.paginahero--kort .paginahero__lead{margin-bottom:0;}
.paginahero--kort .paginahero__voet{display:none;}
.faqsprong__balk{padding-block:.85rem;}
.faqsprong__link{display:inline-block;padding:.4rem .85rem;border:1px solid var(--grijs-200);
  border-radius:999px;background:#fff;color:var(--inkt);font-size:.9rem;text-decoration:none;
  transition:background .15s,border-color .15s;}
.faqsprong__link:hover,.faqsprong__link:focus{background:var(--groen-50,#f2f7f1);
  border-color:var(--groen-700);}
/* De secties krijgen een id en zijn dus een sprongdoel. Zonder deze regel
   schuift de vaste kop eroverheen en begint de bezoeker midden in de eerste
   vraag. */
.ond[id]{scroll-margin-top:5.5rem;}
.vragenlijst__intro{max-width:62ch;margin:0 0 1.1rem;color:var(--grijs-600,#5b6157);}
.vraag summary{cursor:pointer;padding:1rem 1.2rem;font-weight:700;font-size:1rem;color:var(--inkt);
  list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center;}
.vraag summary::-webkit-details-marker{display:none;}
.vraag summary:after{content:"+";font-weight:400;font-size:1.4rem;color:var(--groen-700);line-height:1;}
.vraag[open] summary:after{content:"–";}
.vraag[open] summary{border-bottom:1px solid var(--grijs-200);}
.vraag__antwoord{padding:1rem 1.2rem 1.2rem;color:var(--grijs-700);line-height:1.7;}
.vraag__antwoord p{margin:0 0 .8rem;}
.vraag__antwoord p:last-child{margin-bottom:0;}
.vragenlijst{max-width:820px;margin:0 auto;}
.zoekblok{position:relative;max-width:620px;margin:0 auto 2.6rem;}
.zoekblok__label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.5rem;text-align:center;}
.zoekblok__veld{width:100%;padding:.95rem 1.1rem;border:1px solid var(--grijs-300);border-radius:999px;
  font-family:inherit;font-size:1rem;}
.zoekblok__veld:focus{outline:2px solid var(--groen-500);outline-offset:1px;}
.zoekblok__uitslag{list-style:none;margin:.5rem 0 0;padding:0;display:none;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:12px;box-shadow:var(--schaduw-1);overflow:hidden;}
.zoekblok__uitslag--open{display:block;}
.zoekblok__uitslag li+li{border-top:1px solid var(--grijs-200);}
.zoekblok__uitslag a{display:flex;flex-direction:column;padding:.7rem 1rem;color:var(--inkt);}
.zoekblok__uitslag a:hover{background:var(--groen-50);}
.zoekblok__uitslag span{font-size:.82rem;color:var(--grijs-600);}
.zoekblok__leeg{padding:.8rem 1rem;font-size:.9rem;color:var(--grijs-600);}
.zoekblok__leeg button{background:none;border:0;padding:0;color:var(--groen-700);font:inherit;
  text-decoration:underline;cursor:pointer;}

/* op telefoon staat Johan achter de tekst in plaats van erboven,
   zodat de titel meteen in beeld staat */
@media(max-width:640px){
  .hero__grid{grid-template-columns:1fr;gap:0;position:relative;}
  .hero__tekstblok{padding-block:2.2rem 2.6rem;position:relative;z-index:2;}
  .hero__johan{position:absolute;right:-2rem;bottom:0;top:auto;width:72%;height:100%;
    justify-content:flex-end;align-items:flex-end;z-index:1;pointer-events:none;}
  .hero__johan img{max-height:100%;width:auto;opacity:.4;filter:none;}
  .hero h1{font-size:1.85rem;max-width:11ch;}
  .hero__kicker{font-size:.68rem;padding:.35rem .7rem;margin-bottom:.8rem;}
  .hero__tekst{font-size:.95rem;margin-top:.8rem;max-width:26ch;
    text-shadow:0 1px 12px rgba(31,56,21,.6);}
  .hero__acties{margin-top:1.4rem;}
  .hero__acties .knop{width:100%;justify-content:center;}
}
.galerij{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.galerij__tegel{margin:0;border-radius:var(--radius);overflow:hidden;background:var(--grijs-100);aspect-ratio:1/1;}
.galerij__tegel img{width:100%;height:100%;object-fit:cover;transition:transform .35s;}
.galerij__tegel:hover img{transform:scale(1.04);}
@media(max-width:900px){.galerij{grid-template-columns:repeat(3,1fr);}}
@media(max-width:600px){.galerij{grid-template-columns:repeat(2,1fr);}}
.tekstbeeld{margin:2rem 0;border-radius:var(--radius);overflow:hidden;background:var(--grijs-100);}
.aantallen-knoppen{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 .2rem;}
.aantallen-noot{margin:.6rem 0 0;font-size:.93rem;color:var(--grijs-700);}
.beloftes{list-style:none;margin:.6rem 0 1.4rem;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.3rem .9rem;}
.beloftes li{position:relative;padding-left:1.5rem;line-height:1.5;}
.beloftes li::before{content:"✓";position:absolute;left:0;color:var(--groen,#71a469);font-weight:700;}
/* ---- de bezorgkaart: klein tonen, op verzoek uitklappen ---- */
.tekstbeeld--kaart{background:transparent;text-align:center;}
.kaartvak__schakelaar{position:absolute;opacity:0;pointer-events:none;}
.kaartvak svg{max-width:400px;transition:max-width .25s ease;}
.kaartvak a{pointer-events:none;}
.kaartvak__schakelaar:checked ~ .kaartvak svg{max-width:720px;}
.kaartvak__schakelaar:checked ~ .kaartvak a{pointer-events:auto;}
.kaartvak__knop{display:inline-block;margin:.6rem auto 0;padding:.5rem 1.1rem;border:1px solid var(--groen,#71a469);border-radius:999px;background:#fff;color:var(--groen,#71a469);font-size:.9rem;font-weight:600;cursor:pointer;}
.kaartvak__knop:hover{background:var(--groen,#71a469);color:#fff;}
.kaartvak__schakelaar:focus-visible ~ .kaartvak__knop{outline:2px solid var(--groen,#71a469);outline-offset:2px;}
.kaartvak__aan{display:none;}
.kaartvak__schakelaar:checked ~ .kaartvak__knop .kaartvak__uit{display:none;}
.kaartvak__schakelaar:checked ~ .kaartvak__knop .kaartvak__aan{display:inline;}
@media (prefers-reduced-motion:reduce){.kaartvak svg{transition:none;}}
.tekstbeeld img{width:100%;height:auto;display:block;max-height:420px;object-fit:cover;}
.zijbalk{position:sticky;top:120px;display:flex;flex-direction:column;gap:1rem;}
.zijbalk__kaart{background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);padding:1.4rem;}
.zijbalk__kaart h3{font-size:1.02rem;margin-bottom:.6rem;color:var(--inkt);}
.zijbalk__kaart p{font-size:.9rem;color:var(--grijs-600);line-height:1.6;}
.zijbalk__kaart--cta{background:var(--groen-700);border-color:var(--groen-700);}
.zijbalk__kaart--cta h3,.zijbalk__kaart--cta p{color:var(--wit);}
.zijbalk__kaart--cta .knop{margin-top:.9rem;width:100%;justify-content:center;}
.zijbalk__lijst{list-style:none;padding:0;margin:0;}
.zijbalk__lijst li{border-top:1px solid var(--grijs-200);}
.zijbalk__lijst li:first-child{border-top:0;}
.zijbalk__lijst a{display:block;padding:.55rem 0;font-size:.92rem;color:var(--grijs-700);font-weight:600;}
.zijbalk__lijst a:hover{color:var(--groen-700);}
.zijbalk__klein{font-size:.82rem;color:var(--grijs-600);margin-top:.5rem;}
.zijbalk__kaart--contact a{color:var(--groen-700);font-weight:700;}

/* ---- zekerheden met icoon ---- */
.zekerheden{background:var(--groen-900);}
.zekerheden .kicker{color:var(--amber-400);}
.zekerheden h2{color:var(--wit);}
.zekerheden .sectiekop p{color:var(--groen-100);}
.zeker__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
.zeker__kaart--icoon{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:1.6rem 1.4rem;}
.zeker__kaart--icoon .zeker__titel{color:var(--wit);margin-top:.9rem;font-size:1.05rem;}
.zeker__kaart--icoon .zeker__tekst{color:var(--groen-100);font-size:.9rem;line-height:1.65;}
.zeker__ico{width:34px;height:34px;color:var(--amber-400);}

/* ---- linktegels ---- */
.meer__raster{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;}
.meer__tegel{display:flex;align-items:center;gap:.6rem;padding:.95rem 1.1rem;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:10px;font-weight:600;font-size:.93rem;color:var(--grijs-700);}
.meer__tegel:before{content:"";width:.45rem;height:.45rem;border-radius:50%;background:var(--amber-400);flex-shrink:0;}
.meer__tegel:hover{border-color:var(--groen-500);color:var(--groen-700);}
.cattegels--tekst{margin:1.6rem 0 2rem;grid-template-columns:repeat(3,1fr);}

/* ---- bezorgcheck ---- */
.check{max-width:620px;margin:0 auto;background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);padding:1.8rem;box-shadow:var(--schaduw-1);}
.check__label{display:block;font-weight:700;font-size:.9rem;margin-bottom:.5rem;}
.check__veld{width:100%;padding:.9rem 1rem;border:1px solid var(--grijs-300);border-radius:10px;
  font-family:inherit;font-size:1rem;}
.check__veld:focus{outline:2px solid var(--groen-500);outline-offset:1px;}
.check__uitslag{margin-top:1rem;font-size:.95rem;line-height:1.6;color:var(--grijs-700);min-height:1.4em;}
.check__uitslag--ja{color:var(--groen-800);font-weight:600;}
.check__uitslag a{color:var(--groen-700);text-decoration:underline;}

/* de antwoordkaart van de bezorgcheck */
.checkkaart{display:grid;grid-template-columns:190px 1fr;gap:1.2rem;align-items:center;
  margin-top:1.2rem;padding:1rem;border-radius:14px;background:var(--groen-50);
  border:1px solid var(--groen-100);border-left:4px solid var(--groen-500);}
.checkkaart--nee{background:var(--grijs-100);border-color:var(--grijs-200);
  border-left-color:var(--grijs-400);}
.checkkaart__foto{width:100%;height:135px;object-fit:cover;border-radius:10px;display:block;}
.checkkaart__merk{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--groen-800);background:var(--groen-100);
  padding:.2rem .6rem;border-radius:999px;margin-bottom:.4rem;}
.checkkaart--nee .checkkaart__merk{color:var(--grijs-700);background:var(--grijs-200);}
.checkkaart__kop{font-size:1.15rem;line-height:1.3;margin:0 0 .3rem;color:var(--groen-900);}
.checkkaart--nee .checkkaart__kop{color:var(--inkt);}
.checkkaart__regel{font-size:.92rem;line-height:1.55;color:var(--grijs-700);margin:0;}
.checkkaart__link{display:inline-block;margin-top:.6rem;font-weight:600;font-size:.92rem;
  color:var(--groen-700);text-decoration:underline;}
@media(max-width:560px){
  .checkkaart{grid-template-columns:1fr;}
  .checkkaart__foto{height:160px;}
}
.check__noot{margin-top:1rem;}
.check__bevestiging{margin-top:1rem;padding:.9rem 1.1rem;border-radius:10px;
  background:var(--groen-50);border:1px solid var(--groen-100);color:var(--groen-800);
  font-weight:600;font-size:.95rem;}
.check__bevestiging--fout{background:#fdf2f2;border-color:#f3c9c9;color:#8f2b2b;}

@media(max-width:1000px){
  .inhoud-raster{grid-template-columns:1fr;gap:2rem;}
  .zijbalk{position:static;flex-direction:row;flex-wrap:wrap;}
  .zijbalk__kaart{flex:1 1 260px;}
  .zeker__raster{grid-template-columns:repeat(2,1fr);}
  .meer__raster{grid-template-columns:repeat(3,1fr);}
  .cattegels--tekst{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  /* minmax(0,1fr): met 1fr maakten "Groothandelsprijzen" en "Betaalmogelijkheden"
     een kolom 219px breed en schoof de hele pagina op 390px opzij */
  .meer__raster{grid-template-columns:repeat(2,minmax(0,1fr));}
  .zeker__raster{grid-template-columns:1fr;}
  .paginahero h1{font-size:1.7rem;}
}

.uspstrook{background:var(--amber-100);border-bottom:1px solid #f0dcb4;}
.topbalk{background:#173B25} /* zelfde groen als de kop van de pagina (11 nov) */
/* De bovenbalk moet op een telefoon op hoogstens twee regels passen. */
@media(max-width:640px){.topbalk{font-size:.78rem;}.topbalk__sterren-detail{display:none;}}
@media(max-width:640px){.uspstrook--nietmobiel{display:none;}}
.uspstrook__rij{display:flex;flex-wrap:wrap;gap:.6rem 2.2rem;justify-content:center;padding:1rem 24px;}
.uspstrook__rij span{position:relative;padding-left:1.5rem;font-weight:600;font-size:.94rem;color:var(--oranje-700);}
.uspstrook__rij span:before{content:"";position:absolute;left:0;top:.35em;width:.85rem;height:.5rem;
  border-left:2px solid var(--oranje-500);border-bottom:2px solid var(--oranje-500);transform:rotate(-45deg);}
@media(max-width:640px){.uspstrook__rij{gap:.4rem 1.2rem;}.uspstrook__rij span{font-size:.85rem;}}
.voet__hoofd{grid-template-columns:1.5fr 1fr 1fr 1fr 1fr 1.1fr;gap:2rem;}
@media(max-width:1100px){.voet__hoofd{grid-template-columns:repeat(3,1fr);}}
@media(max-width:700px){.voet__hoofd{grid-template-columns:repeat(2,1fr);}}
.ond--grijs{background:var(--grijs-100);}
.kop__nav a.actief{color:var(--groen-700);}
/* menu op één regel houden: geen woorden die over vier regels vallen */
.kop__nav a{white-space:nowrap;}
.kop__hoofd{gap:1.2rem;}
@media(min-width:1201px){
  .kop__nav ul{gap:1.15rem;}
  .kop__nav a{font-size:.9rem;}
}
@media(min-width:1260px){
  /* 1,6rem tussenruimte kostte bij negen menu-items ruim tweehonderd pixels. */
  .kop__nav ul{gap:1.05rem;}
  .kop__nav a{font-size:.92rem;}
}
.kruimelpad__pijl{margin:0 .45rem;color:var(--grijs-600);}
.tekst--breed{max-width:820px;}
.middenknop{text-align:center;margin-top:2.2rem;}

/* categoriemenu onder Winkel */
.kop{position:sticky;}
.catmenu{display:none;position:absolute;left:0;right:0;top:100%;background:var(--wit);
  border-top:1px solid var(--grijs-200);box-shadow:0 18px 40px rgba(34,40,29,.14);padding:1.6rem 24px 1.3rem;z-index:60;}
.kop__nav .heeft-menu:hover .catmenu,.catmenu:hover,.catmenu.catmenu--open{display:block;}
.kop__nav .heeft-menu{position:static;}
/* Johan, 16 september 2026: "als je cursor op winkel houdt en naar categorie
   wilt is het menu in split second al weg". Gemeten op 1440 breed: tussen de
   onderkant van de menuregel (91px) en de onderkant van de kop (119px) zat een
   strook van 27 pixels waar de muis niets raakte. Daar viel hij tussenuit en
   klapte het paneel dicht voordat je erbij was.
   De padding rekt het gevoelige gebied tot aan het paneel; de negatieve marge
   houdt de opmaak op de pixel hetzelfde, zodat er niets verschuift. */
.kop__nav .heeft-menu > a{padding-bottom:32px;margin-bottom:-32px;}
/* Het mailadres in de kop stond er als tekst, niet als link -- Johan op
   16 september 2026: "staat er in kop stuur ons mail, maar is niet op de
   klikken". Nu een <a> met mailto. De kleur en het formaat blijven precies
   zoals ze waren, zodat er niets verspringt. */
/* Geen display hier! De basisopmaak zet dit blok op flex en verbergt het onder
   620px; die regel staat eerder in het bestand, dus een display: hier wint
   ervan. Op 16 september 2026 stond er display:block en toen verscheen het
   mailadres op de telefoon en duwde het de hele kop over de rand. */
/* Het mailadres in de kop nam veel breedte in: "Mail ons" boven het volledige
   adres. Met het menu-item Offerte erbij paste de Proefbox-knop niet meer op
   1440 breed. Johan op 28 september 2026: "Mail ons met hele email erbij hoeft
   ook niet perse, in ieder geval smaller." Het label is weg, het adres staat er
   kleiner, en onder de 1200px verdwijnt het helemaal -- daar staat het ook in
   de voet en op de contactpagina. */
/* Het mailadres stond in de kop als "Mail ons" boven het volledige adres en
   nam daarmee ruim honderd pixels. Met het menu-item Offerte erbij paste de
   Proefbox-knop op 1440 breed niet meer op het scherm: de kop had 1481px nodig
   in een omhulsel van 1240. Johan op 28 september 2026: "uitlijning gaat niet
   goed, proefbox slecht te zien... in ieder geval smaller." Het adres is uit de
   kop; het staat in de voet, op de contactpagina en in het menu onder Contact. */
.kop__telefoon{display:none;}
/* Met de zoekknop erbij staan er op een telefoon vier dingen naast elkaar:
   zoeken, mand, Proefbox en het menu. Op 375px was de kop 376px breed -- net
   over de rand, en op een Android van 360px verder. De tussenruimte van 1,3rem
   is daar te ruim; 0,5rem laat alles passen zonder dat iets kleiner wordt. */
@media(max-width:620px){
  .kop__acties{gap:.5rem;}
  .kop__acties .knop--klein{padding-inline:.85rem;}
}
/* Op 320px (oude iPhone SE, Galaxy Fold dicht) bleef de kop 342px breed. Daar
   mag de Proefbox-knop krapper; hij blijft gewoon staan, want dat is de knop
   waar zakelijke bezoekers voor komen. */
@media(max-width:380px){
  .kop__acties{gap:.35rem;}
  .kop__acties .knop--klein{padding-inline:.6rem;font-size:.82rem;}
  .kop__hoofd{padding-inline:10px;}
  .kop__mand svg{width:21px;height:21px;}
}
.kop__telefoon:hover strong{color:var(--groen-700);}
.kop__telefoon strong{white-space:nowrap;}
.kop__telefoon span{white-space:nowrap;}
.catmenu__raster{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem 1.6rem;}
.catmenu__item{display:flex;align-items:center;gap:.7rem;padding:.5rem .6rem;border-radius:8px;
  font-size:.92rem;color:var(--grijs-700);font-weight:500;}
.catmenu__item:hover{background:var(--groen-50);color:var(--groen-700);}
/* Labels nooit afkappen (Johan 11 nov): mag naar een tweede regel, knoppen even hoog. */
.catmenu__raster{grid-auto-rows:1fr;}
.catmenu__item{min-height:3.2rem;}
.catmenu__item span{white-space:normal;line-height:1.2;overflow:visible;text-overflow:clip;min-width:0;}
@media(max-width:600px){.catmenu__raster{grid-template-columns:repeat(2,1fr);gap:.4rem .6rem;}}
/* De categorieen die deze maand vooraan horen. Alleen dikgedrukt en een
   iets donkerder icoon -- geen kleur of kader, want dan gaat het raster
   rommelig staan en schuift de rest optisch weg. */
.catmenu__item--uit{font-weight:700;}
/* ---- zoeken in de kop ----------------------------------------------------
   Een knop van dezelfde maat als de winkelmand, in dezelfde rij. Daardoor
   verschuift er niets en wordt er niets kleiner: het is een extra icoon in een
   rij die er al stond. Het venster zelf schuift over de pagina heen, dus ook
   dat duwt niets opzij. */
.kop__zoekknop{border:0;background:none;cursor:pointer;font:inherit;}
.zoekvenster{position:absolute;left:0;right:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--grijs-200);box-shadow:0 14px 30px rgba(0,0,0,.10);}
.zoekvenster__binnen{padding:1rem 0 1.2rem;}
.zoekvenster__veld{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;
  border:2px solid var(--groen-700);border-radius:10px;background:#fff;}
.zoekvenster__veld svg{width:22px;height:22px;flex-shrink:0;color:var(--groen-700);}
.zoekvenster__veld input{flex:1;border:0;outline:0;font:inherit;font-size:1.05rem;background:none;}
.zoekvenster__veld button{border:0;background:none;font-size:1.6rem;line-height:1;
  color:var(--grijs-600);cursor:pointer;padding:0 .2rem;}
.zoekvenster__uitslag{margin-top:.8rem;max-height:60vh;overflow-y:auto;}
.zoekuit{display:flex;align-items:center;gap:.8rem;padding:.6rem .5rem;border-radius:8px;
  text-decoration:none;color:var(--inkt);}
.zoekuit:hover,.zoekuit:focus{background:var(--groen-50);}
.zoekuit__soort{margin-left:auto;font-size:.78rem;color:var(--grijs-600);white-space:nowrap;}
.zoekuit__prijs{font-weight:700;white-space:nowrap;}
.zoekvenster__leeg{padding:.8rem .5rem;color:var(--grijs-600);}
.catmenu__item--uit .catmenu__ico{color:var(--groen-700);}
.catmenu__item em{margin-left:auto;font-style:normal;font-size:.78rem;color:var(--grijs-600);}
.catmenu__ico{width:26px;height:26px;flex-shrink:0;color:var(--inkt);}
.catmenu__alles{display:block;max-width:1240px;margin:1rem auto 0;padding-top:.9rem;
  border-top:1px solid var(--grijs-200);font-weight:700;color:var(--groen-700);font-size:.92rem;}

/* foto-tegels op /winkel/ (11 nov 2026) */
.fototegels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-top:1.2rem;}
.fototegel{display:flex;flex-direction:column;background:var(--wit);border:1px solid var(--grijs-200);
  border-radius:var(--radius);overflow:hidden;transition:border-color .15s,transform .15s;color:var(--inkt);}
.fototegel:hover{border-color:var(--groen-500);transform:translateY(-2px);}
.fototegel__beeld{display:block;aspect-ratio:4/3;background:var(--groen-50);overflow:hidden;}
.fototegel__beeld img{width:100%;height:100%;object-fit:cover;display:block;}
.fototegel__naam{font-weight:700;font-size:1rem;padding:.7rem .85rem 0;line-height:1.25;}
.fototegel__aantal{font-size:.8rem;color:var(--grijs-600);padding:.15rem .85rem .75rem;}
.fototegel__naam:last-child{padding-bottom:.75rem;}
.ookbalk{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:1rem;}
.nuafgeprijsd{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .9rem;border-radius:999px;
  border:1.5px solid var(--groen-700);color:var(--groen-700);font-weight:700;font-size:.9rem;}
.nuafgeprijsd span{background:var(--groen-700);color:var(--wit);border-radius:999px;padding:0 .45rem;font-size:.78rem;}
.nuafgeprijsd:hover{background:var(--groen-50);}
.ookregel{margin:0;font-size:.88rem;color:var(--grijs-700);line-height:1.7;}
.ookregel a{color:var(--groen-700);text-decoration:underline;text-underline-offset:2px;}
@media(max-width:760px){.fototegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;}
  .fototegel__naam{font-size:.9rem;padding:.55rem .6rem 0;}.fototegel__aantal{padding:.1rem .6rem .6rem;font-size:.75rem;}}
/* categorieen bovenaan het telefoonmenu */
.mobcats{display:none;}
@media(max-width:1200px){
  .mobcats{display:block;padding:.7rem 0;border-bottom:1px solid var(--grijs-200);}
  .mobcats__kop{display:block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs-600);margin-bottom:.45rem;}
  .mobcats__raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;}
  .kop__nav .mobcats__raster a{display:block;padding:.6rem .7rem;font-size:.92rem;font-weight:600;background:var(--groen-50);
    border-radius:8px;color:var(--inkt);white-space:normal;line-height:1.2;}
}

/* categorietegels op de winkelpagina */
.cattegels{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
.cattegel{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;
  padding:1.5rem 1rem;background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  transition:border-color .15s,transform .15s;}
.cattegel:hover{border-color:var(--groen-500);transform:translateY(-2px);}
.cattegel__ico{width:44px;height:44px;color:var(--inkt);}
.cattegel__naam{font-weight:700;color:var(--inkt);font-size:.98rem;}
.cattegel__aantal{font-size:.8rem;color:var(--grijs-600);}

/* productkaarten */
.pk__cat{font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grijs-600);margin-bottom:.35rem;}
.pk__naam a{color:var(--inkt);}
.pk__naam a:hover{color:var(--groen-700);}
.pk__knop{width:100%;justify-content:center;margin-top:.9rem;}
.pk__foto{display:block;}

/* productpagina */
.prod__raster{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;}
.prod__beeld{background:var(--grijs-100);border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;}
.prod__beeld img{width:100%;height:100%;object-fit:cover;}
.prod__galerij{display:flex;gap:.6rem;margin-top:.8rem;}
.prod__galerij img{width:76px;height:76px;object-fit:cover;border-radius:8px;border:1px solid var(--grijs-200);}
.prod__info h1{font-size:1.9rem;margin-bottom:.5rem;}
.prod__prijs{font-family:var(--font-kop);font-weight:800;font-size:1.7rem;color:var(--groen-700);margin-bottom:1rem;}
.prod__btw{margin:-.8rem 0 1rem;font-size:.85rem;color:var(--grijs-600);}
/* "excl. btw" achter de prijs op de productkaarten en in het zoekvenster. Bewust
   in de opmaak en niet in de HTML: de kaarten staan op 339 pagina's, en een woord
   erbij in de HTML zou al die sitemapdatums op dezelfde dag zetten. Een
   inline-block, zodat het label op een smal telefoonkaartje als geheel naar de
   volgende regel valt in plaats van buiten de kaart te steken. */
.pk__prijs::after,.zoekuit__prijs::after{content:"excl. btw";display:inline-block;margin-left:.3em;
  font-family:var(--font-tekst,inherit);font-size:.72rem;font-weight:500;color:var(--grijs-600);white-space:nowrap;}
.meer__tegel{min-width:0;}
.meer__tegel span{min-width:0;overflow-wrap:anywhere;hyphens:auto;}
.prod__groter{background:#f2f6ee;border-left:3px solid #3D6B2A;padding:.6rem .85rem;margin:.2rem 0 .9rem;font-size:.94rem;}
/* Uitverkocht: geen knop maar een regel, en een kaart die niet uitnodigt. */
.prod__uitverkocht { margin: .9rem 0 0; padding: .7rem .9rem; border-radius: 10px;
  background: #f3f4f0; color: #4a5245; font-weight: 600; }
.pk__knop--uit { opacity: .75; pointer-events: none; }

/* Staffelkorting onder de koopknop: groene voordeelkaarten, zie staffelblok(). */
.staffel { margin: .9rem 0 0; display: grid; gap: .5rem; }
.vkaart { display: flex; align-items: center; gap: .7rem; padding: .6rem .7rem; border: 2px solid #2e6b1f;
  border-radius: 12px; background: #eef6e8; }
.vkaart__links { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; flex: 1;
  min-width: 0; padding-right: .7rem; border-right: 1px solid rgba(46,107,31,.35); }
.vkaart__label { background: #c8102e; color: #fff; font-weight: 800; font-size: .75rem; padding: .2rem .55rem; border-radius: 6px; }
.vkaart__drie { font-size: 1.25rem; font-weight: 800; color: #c8102e; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vkaart__bespaar { font-size: .88rem; font-weight: 800; color: #2e6b1f; font-variant-numeric: tabular-nums; }
.vkaart__per { font-size: .8rem; color: var(--grijs-600); font-variant-numeric: tabular-nums; }
.vkaart__knop { flex: none; max-width: 9.5rem; white-space: normal; line-height: 1.2; padding: .6rem .9rem;
  border-radius: 999px; text-align: center; font-size: .9rem; }
.staffel__uitleg { margin: 0 .2rem; font-size: .84rem; color: #2f5222; }
/* Staffel op de productkaart: rode schuine badge op de foto, groene regel onder de prijs. */
.pk__staffelbadge { position: absolute; top: .7rem; right: .5rem; z-index: 1; transform: rotate(-6deg);
  background: #c8102e; color: #fff; font-weight: 800; font-size: .74rem; line-height: 1.15; text-align: center;
  padding: .3rem .55rem; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.pk__vlag.pk__vlag--onder { top: 3.3rem; }
.pk__staffel { margin: -.35rem 0 .6rem; font-size: .82rem; line-height: 1.3; color: #2e6b1f; font-variant-numeric: tabular-nums; }
.pk__staffel b { font-weight: 800; }

/* Melding boven de koopknop: informatie, geen waarschuwing. Zie PRODUCTMELDING. */
.prod__melding{display:flex;align-items:flex-start;gap:.55rem;margin:.2rem 0 1rem;padding:.75rem .9rem;border-radius:8px;border:1px solid #e6c98a;background:#fdf6e6;color:#6b4e14;font-size:.93rem;line-height:1.5;}
.prod__melding svg{flex-shrink:0;margin-top:.15rem;}
.prod__beeld{position:relative;}
.gratisbadge{position:absolute;top:4%;right:4%;z-index:2;width:31%;aspect-ratio:1;border-radius:50%;
 background:#3D6B2A;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;
 line-height:1.05;text-align:center;box-shadow:0 3px 10px rgba(0,0,0,.28);
 box-sizing:border-box;padding:.4rem;}
.gratisbadge::before{content:"";position:absolute;inset:5%;border:2px solid rgba(255,255,255,.7);border-radius:50%;}
.gratisbadge b{font-size:clamp(.85rem,3.4vw,1.5rem);font-weight:800;letter-spacing:.01em;}
.gratisbadge>span{font-size:clamp(.7rem,2.7vw,1.2rem);font-weight:700;}
.gratisbadge i{font-style:normal;font-size:clamp(.55rem,1.9vw,.85rem);font-weight:500;opacity:.92;margin-top:.15em;}
.gratisbadge i:empty{display:none;}
.beoordeling{display:flex;align-items:center;gap:.35rem;margin:0 0 .6rem;font-size:.92rem;}
.ster{font-size:1.05rem;line-height:1;}
.ster--aan{color:var(--amber-500,#c98a00);}
.ster--uit{color:var(--grijs-300,#d6d9d0);}
.beoordeling__cijfer{font-weight:700;margin-left:.2rem;}
.beoordeling__aantal{color:var(--grijs-600,#68705f);}
.pk__prijs + .beoordeling{margin:-.2rem 0 .5rem;font-size:.85rem;}
.prod__knop{width:100%;justify-content:center;margin-top:.4rem;}
.kaartkeuze{background:var(--groen-50);border:1px solid var(--groen-100);border-radius:12px;
  padding:1.1rem 1.2rem;margin:1.2rem 0;}
.kaartkeuze__kop{font-weight:700;color:var(--groen-800);margin:0 0 .8rem;font-size:.95rem;}
.kaartkeuze label{display:block;font-size:.85rem;font-weight:600;margin:.6rem 0 .3rem;}
.kaartkeuze label span{font-weight:400;color:var(--grijs-600);}
.kaartkeuze select,.kaartkeuze textarea{width:100%;padding:.65rem .8rem;border:1px solid var(--grijs-300);
  border-radius:9px;font-family:inherit;font-size:.95rem;background:var(--wit);}
.bestelform{margin:0;}
.prod__winkelnoot{font-size:.82rem;color:var(--grijs-600);margin-top:.6rem;}
.prod__usp{list-style:none;padding:0;margin:1.4rem 0 0;font-size:.9rem;color:var(--grijs-700);}
.prod__usp li{padding-left:1.5rem;position:relative;margin-bottom:.45rem;}
.prod__usp li:before{content:"";position:absolute;left:0;top:.45em;width:.7rem;height:.7rem;
  border-radius:50%;background:var(--groen-500);}
.prod__lang{max-width:820px;margin-top:3rem;}
.subcats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;}
.subcats__knop{padding:.5rem 1rem;border:1px solid var(--grijs-300);border-radius:99px;font-size:.9rem;
  color:var(--grijs-700);font-weight:600;}
.subcats__knop span{color:var(--grijs-600);font-weight:400;}
.subcats__knop:hover{border-color:var(--groen-500);color:var(--groen-700);}

/* inhoudspagina's */
.paginakop__beeld{margin-bottom:2rem;border-radius:var(--radius);overflow:hidden;background:var(--grijs-100);
  display:flex;justify-content:center;align-items:center;}
.paginakop__beeld img{width:auto;height:auto;max-width:100%;max-height:400px;object-fit:contain;}
.ctaband{background:var(--groen-800);}
.cta-blok{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;}
.cta-blok h2{color:var(--wit);}
.cta-blok p{color:var(--groen-100);max-width:520px;margin-top:.6rem;}

/* blog */
.blogkaart{display:block;overflow:hidden;}
.blogkaart__foto{aspect-ratio:16/10;overflow:hidden;}
.blogkaart__foto img{width:100%;height:100%;object-fit:cover;}
.blogkaart__body{padding:1.2rem 1.3rem 1.5rem;}
.blogkaart__body h2{font-size:1.08rem;color:var(--inkt);}
.blogkaart__body p{font-size:.9rem;color:var(--grijs-600);margin-top:.5rem;}
.blogkaart__link{display:inline-block;margin-top:.9rem;font-weight:700;font-size:.86rem;color:var(--groen-700);}
.artikel{max-width:820px;margin:0 auto;}
.artikel h1{font-size:2.1rem;margin:.4rem 0 1.4rem;}
.artikel__beeld{max-width:100%;height:auto;border-radius:var(--radius);margin-bottom:2rem;display:block;}
.artikel__terug{margin-top:2.5rem;font-weight:700;}

/* contact en formulieren */
.okaart__kop{font-size:1.3rem;margin-bottom:1.2rem;}
.contact__foto{max-width:220px;margin-bottom:1.5rem;border-radius:var(--radius);}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.formulier__noot{font-size:.82rem;color:var(--grijs-600);}
/* Productpagina, combinatie van de drie voorbeelden (11 okt 2026). */
.pp__intro{font-size:1rem;line-height:1.6;color:var(--inkt);margin:0 0 1rem;}
.pp .kaartkeuze{margin:0 0 1rem;}
.pp .kaartkeuze [data-kaarttekst][hidden]{display:none!important;}
.mandstrook{grid-column:1/-1;list-style:none;margin:.4rem 0 0;padding:1rem 1.2rem;border:1px solid #e3e7dd;border-radius:var(--radius);display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;background:#fbfcf9;}
@media(max-width:860px){.mandstrook{grid-template-columns:1fr 1fr;}}
.mandstrook li{font-size:.82rem;color:var(--grijs-600);line-height:1.4;}
.mandstrook b{display:block;color:var(--groen-700);font-size:.92rem;}

.pp{padding-block:clamp(1.2rem,3vw,2.4rem) clamp(1.5rem,3vw,2.5rem);}
.pp__raster{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"beeld koop" "bundel koop";gap:1.4rem clamp(1.5rem,4vw,3.5rem);align-items:start;}
.pp__beeld{grid-area:beeld;}.pp__koopkolom{grid-area:koop;}.pp__raster>.bundel{grid-area:bundel;}
@media(max-width:860px){.pp__raster{grid-template-columns:1fr;grid-template-areas:"beeld" "koop" "bundel";}}
@media(min-width:861px){.pp__foto{aspect-ratio:auto;width:100%;height:min(30rem,56vh);}}
.pp__foto{position:relative;background:#fff;border-radius:var(--radius);overflow:hidden;aspect-ratio:1/1;display:grid;place-items:center;}
.pp__foto .gratisbadge{width:22%;max-width:6.5rem;}
.pp__foto img{width:100%;height:100%!important;max-height:100%;object-fit:contain;}@media(min-width:861px){.pp__foto img{position:absolute;inset:0;}}
.pp__duimen{display:flex;gap:.6rem;margin-top:.8rem;flex-wrap:wrap;}
.pp__duimen img{width:4.6rem;height:4.6rem;object-fit:cover;border-radius:.5rem;border:1px solid var(--grijs-300);background:#fff;cursor:pointer;}
.pp__duimen img.is-actief{border:2px solid var(--groen-700);}
.pp__naam{font-size:clamp(1.7rem,2.6vw,2.1rem);line-height:1.15;margin:0 0 .4rem;}
.pp__prijs{font-family:var(--font-kop);font-weight:800;font-size:clamp(1.8rem,2.6vw,2rem);color:var(--groen-700);margin:.7rem 0 .1rem;}
.pp__eenheid{font-size:.92rem;color:var(--grijs-600);margin:0 0 1rem;}
.pp__kenmerken{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;gap:.45rem;}
.pp__kenmerken li{position:relative;padding-left:1.7rem;font-size:1rem;color:var(--inkt);}
.pp__kenmerken li::before{content:"";position:absolute;left:0;top:.18rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--groen-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;}
.pp .maatkeuze{margin:0 0 1.1rem;}
.pp .prod__koop{margin:0 0 1rem;flex-wrap:nowrap;}
.pp .prod__koop .prod__knop{flex:1 1 auto;min-width:0;}
.pp .prod__koop{align-items:center;}
.pp .aantal{height:3.2rem;flex:none;}
.pp .aantal__knop{width:2.3rem;min-height:0;height:100%;}
.pp .aantal__veld{width:2.2rem;}
.pp .prod__koop .prod__knop{white-space:nowrap;height:3.2rem;min-height:0;padding-inline:1rem;}
.pp .prod__koop .prod__knop{min-height:3.2rem;font-size:1.05rem;display:flex;align-items:center;justify-content:center;}
.pp__info{list-style:none;padding:0;margin:0 0 1.2rem;display:grid;grid-template-columns:1fr 1fr;gap:.8rem;border-top:1px solid #e8ebe3;padding-top:1rem;}
@media(max-width:480px){.pp__info{grid-template-columns:1fr;}}
.pp__info li{font-size:.85rem;color:var(--grijs-600);line-height:1.45;padding-left:1.1rem;position:relative;}
.pp__info li::before{content:"";position:absolute;left:0;top:.38rem;width:.55rem;height:.55rem;border-radius:50%;background:#4caf50;}
.pp__info b{display:block;color:var(--inkt);font-size:.9rem;}
.pp .staffel{margin-top:0;}
.bundel-sectie{padding-block:0 clamp(1.5rem,3vw,2.5rem);}
.bundel{border:2px solid var(--groen-700);border-radius:var(--radius);padding:.9rem 1.1rem;background:#f2f8ef;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"kop kop" "rij totaal";gap:.6rem 1rem;align-items:center;}
.bundel__kop{grid-area:kop;}.bundel__rij{grid-area:rij;}.bundel__totaal{grid-area:totaal;}
@media(max-width:480px){.bundel{grid-template-columns:1fr;grid-template-areas:"kop" "rij" "totaal";}}
.bundel__kop h2{font-size:1rem;margin:.1rem 0 0;}
.bundel__rij{display:flex;align-items:flex-start;justify-content:space-between;gap:.3rem;}
.bundel__item{display:grid;justify-items:center;text-align:center;gap:.2rem;flex:1 1 0;min-width:0;text-decoration:none;color:var(--inkt);}
.bundel__item img{width:3.4rem;height:3.4rem;object-fit:contain;background:#fff;border-radius:.6rem;border:1px solid #e8ebe3;}
.bundel__naam{font-size:.74rem;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.bundel__prijs{font-size:.85rem;font-weight:700;color:var(--groen-700);}
.bundel__plus{font-size:1.1rem;color:var(--grijs-600);align-self:center;margin-top:-1.8rem;}
.bundel__totaal{display:grid;gap:.45rem;justify-items:stretch;text-align:center;}
.bundel__totaal .knop{white-space:nowrap;padding-inline:1.1rem;}
@media(max-width:480px){.bundel__totaal{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #d6e4cf;padding-top:.7rem;}}
.bundel__bedrag{font-family:var(--font-kop);font-weight:800;font-size:1.1rem;}
.bundel__oud{text-decoration:line-through;color:var(--grijs-600);font-weight:500;font-size:.9rem;}
.bundel__voordeel{display:inline-block;background:#a55b10;color:#fff;border-radius:999px;font-size:.75rem;font-weight:700;padding:.15rem .6rem;justify-self:center;}
.pp-uitleg{padding-block:clamp(1.5rem,3vw,2.5rem);border-top:1px solid #eef0ea;}
.pp-uitleg__raster{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;}
@media(max-width:860px){.pp-uitleg__raster{grid-template-columns:1fr;}}
.pp-uitleg__tekst{font-size:1.05rem;line-height:1.7;max-width:42rem;}
.pp-uitleg__tekst h2{font-size:1.5rem;margin:0 0 .8rem;}
.pp-uitleg__feiten{background:#f6f7f3;border-radius:var(--radius);padding:1.3rem 1.4rem;}
.pp-uitleg__feiten h2{font-size:1.1rem;margin:0 0 .8rem;}
.pp-uitleg__feiten dl{margin:0;display:grid;gap:.7rem;}
.pp__feit{display:grid;gap:.1rem;border-bottom:1px solid #e3e7dd;padding-bottom:.6rem;}
.pp__feit:last-child{border-bottom:0;padding-bottom:0;}
.pp__feit dt{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--grijs-600);}
.pp__feit dd{margin:0;font-weight:600;color:var(--inkt);}
/* Nieuwe productpagina (voorbeeld 11 okt 2026). */
.maatkeuze{margin:.2rem 0 1rem;}
.maatkeuze__kop{display:block;font-size:.82rem;font-weight:600;color:var(--grijs-600);margin-bottom:.4rem;}
.maatkeuze__rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.5rem;}
.maatkaart{display:grid;gap:.1rem;padding:.65rem .8rem;border:1px solid var(--grijs-300);border-radius:var(--radius-klein);text-decoration:none;color:var(--inkt);background:var(--wit);}
a.maatkaart:hover,a.maatkaart:focus-visible{border-color:var(--groen-500);}
.maatkaart--actief{border:2px solid var(--groen-700);background:#f2f8ef;}
.maatkaart__maat{font-weight:700;font-size:.92rem;}
.maatkaart__prijs{font-family:var(--font-kop);font-weight:800;color:var(--groen-700);}
.maatkaart__regel{font-size:.78rem;color:var(--grijs-600);}
.maatkaart__regel b{color:#a55b10;}
.prod__koop{display:flex;gap:.6rem;align-items:stretch;flex-wrap:wrap;margin:.4rem 0 .5rem;}
.prod__koop .prod__knop{flex:1 1 12rem;text-align:center;}
.aantal{display:inline-flex;align-items:center;border:1px solid var(--grijs-300);border-radius:var(--radius-klein);background:var(--wit);}
.aantal__knop{width:2.6rem;height:100%;min-height:2.8rem;border:0;background:none;font-size:1.25rem;color:var(--groen-700);cursor:pointer;}
.aantal__veld{width:2.8rem;border:0;text-align:center;font-size:1rem;font-weight:600;-moz-appearance:textfield;background:none;}
.aantal__veld::-webkit-outer-spin-button,.aantal__veld::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.prod__herkomst{font-size:.86rem;color:var(--groen-700);font-weight:600;margin:.2rem 0 .7rem;}
.prod__herkomst::before{content:"✔  ";}
.levertijd{border:1px solid #e3e7dd;background:#f7f9f4;border-radius:var(--radius-klein);padding:.7rem .9rem;margin:0 0 .9rem;}
.levertijd__regel{margin:0;font-size:.9rem;color:var(--inkt);display:flex;gap:.5rem;align-items:baseline;}
.levertijd__stip{flex:none;width:.55rem;height:.55rem;border-radius:50%;background:#4caf50;transform:translateY(-.05rem);}
.levertijd__regel b{color:var(--groen-700);}
.levertijd__klok{font-variant-numeric:tabular-nums;background:var(--groen-700);color:#fff;border-radius:.3rem;padding:0 .35rem;font-weight:700;}
.levertijd__sub{margin:.25rem 0 0 1.05rem;font-size:.8rem;color:var(--grijs-600);}
/* Hero: tweede route naar cadeaus (11 okt 2026). Bescheiden, onder de knoppen. */
.hero__ook{margin-top:1.1rem;font-size:.9rem;color:rgba(255,255,255,.85);display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;}
.hero__ook a{display:inline-flex;align-items:center;gap:.3rem;padding:.35rem .8rem;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);color:#fff;text-decoration:none;font-weight:600;}
.hero__ook a:hover,.hero__ook a:focus-visible{background:rgba(255,255,255,.26);}
/* Drie ingangen onder de homepage-opening (11 okt 2026, audit). */
.ingangen{background:var(--wit);border-bottom:1px solid var(--grijs-200,#e8ebe3);}
.ingangen__rij{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding-block:1.4rem;}
@media(max-width:760px){.ingangen__rij{grid-template-columns:1fr;gap:.6rem;padding-block:1rem;}}
.ingang{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:.8rem;align-items:center;padding:1rem 1.1rem;border:1px solid var(--grijs-300);border-radius:var(--radius-klein);text-decoration:none;color:var(--inkt);background:var(--wit);transition:border-color .15s,background .15s;}
.ingang:hover,.ingang:focus-visible{border-color:var(--groen-500);background:#f2f8ef;}
.ingang__icoon{grid-row:1/3;font-size:1.6rem;line-height:1;}
.ingang__titel{font-family:var(--font-kop);font-weight:700;font-size:1rem;color:var(--groen-700);}
.ingang__tekst{font-size:.86rem;color:var(--grijs-600);line-height:1.4;}
.ingangen__rij--vier{grid-template-columns:repeat(4,1fr);padding-block:.4rem 0;}
@media(max-width:900px){.ingangen__rij--vier{grid-template-columns:1fr 1fr;}}
/* Kerstformulier in drie stappen (11 okt 2026). .formulier input zet alles op
   width:100%, dus rondjes en vinkjes krijgen hier hun eigen maat terug. */
.kerststap{border:0;padding:0;margin:0;display:grid;gap:.8rem;min-width:0;}
.kerststap legend{font-family:var(--font-kop);font-weight:700;font-size:1.05rem;color:var(--inkt);margin-bottom:.6rem;padding:0;display:flex;align-items:center;gap:.5rem;}
.kerststap__nr{display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--groen-700);color:#fff;font-size:.85rem;}
.kerststap__vraag{display:block;font-weight:600;font-size:.88rem;color:var(--inkt);margin-bottom:.4rem;}
.keuzelijst{display:grid;gap:.5rem;}
.keuzelijst--twee{grid-template-columns:1fr 1fr;}
@media(max-width:640px){.keuzelijst--twee{grid-template-columns:1fr;}}
.formulier .keuze{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:0;font-weight:500;padding:.7rem .9rem;border:1px solid var(--grijs-300);border-radius:var(--radius-klein);background:var(--wit);cursor:pointer;}
.formulier .keuze:has(input:checked){border-color:var(--groen-500);background:#f2f8ef;}
.formulier .keuze input{width:auto;margin:0;padding:0;accent-color:var(--groen-700);}
.keuze__prijs{margin-left:auto;font-weight:400;font-size:.85rem;color:var(--grijs-600);}
.kerststap .formulier__noot{margin:0;}
.kerststap__melding{color:#8a1c12;font-weight:600;}
/* Melding als formulier.php een aanvraag terugstuurt (?fout=1); zie site.js. */
.formulier__fout{margin:0 0 1rem;padding:.8rem 1rem;border-radius:.6rem;background:#fdecea;color:#8a1c12;border:1px solid #f3b8b0;font-size:.92rem;line-height:1.5;}
.voet__lijst--kolommen{columns:2;column-gap:1rem;}
.voet__contact{font-size:.92rem;line-height:1.7;color:var(--groen-100);}
.voet__contact a{color:var(--wit);}
.alleslijst{columns:3;column-gap:2rem;font-size:.92rem;}
.alleslijst a{display:block;padding:.32rem 0;color:var(--grijs-700);break-inside:avoid;}
.alleslijst a:hover{color:var(--groen-700);}
@media(max-width:820px){.alleslijst{columns:2;}}
@media(max-width:560px){.alleslijst{columns:1;}}
.stadtegels{display:grid;grid-template-columns:repeat(6,1fr);gap:.6rem;}
.stadtegel{padding:.7rem .9rem;background:var(--wit);border:1px solid var(--grijs-200);border-radius:8px;
  text-align:center;font-weight:600;font-size:.9rem;color:var(--grijs-700);}
.stadtegel:hover{border-color:var(--groen-500);color:var(--groen-700);}
@media(max-width:980px){.stadtegels{grid-template-columns:repeat(4,1fr);}}
@media(max-width:640px){.stadtegels{grid-template-columns:repeat(2,1fr);}}
.voet__meer{display:inline-block;margin-top:.6rem;font-weight:700;font-size:.86rem;color:var(--groen-100);}

@media(max-width:980px){
  .catmenu{display:none!important;}
  .cattegels{grid-template-columns:repeat(3,1fr);}
  .prod__raster{grid-template-columns:1fr;gap:1.8rem;}
}

/* Productpagina op een telefoon: titel, prijs en koopknop op het eerste scherm.
   Gemeten op 3 september 2026, scherm 888 px hoog. Er ging 242 px op aan de
   groene balk, het menu en het kruimelpad; daarna 327 px foto en 117 px
   miniaturen. De titel kwam pas op 685 px, de prijs op 721 px en de knop op
   1.581 px - anderhalf scherm naar beneden.
   Wat de meting die dag zei: van 57 bezoekers zagen er 41 een productpagina en
   legde er precies een iets in de mand, bij een gemiddelde scrolldiepte van
   24 %. Dat is ongeveer 1.500 px, dus de gemiddelde bezoeker stopte net voor de
   knop. Zestig procent zat op een telefoon.
   Kruimelpad en miniaturen dragen op dat eerste scherm niets bij en gaan er
   daarom af; de foto wordt ingekort in plaats van vierkant. De volgorde blijft
   zoals bezoekers hem kennen: foto, titel, prijs, knop. */
@media(max-width:640px){
  .p-product .kruimelpad{display:none;}
  .p-product .prod__galerij{display:none;}
  .p-product .prod__beeld{aspect-ratio:4/3;max-height:34vh;}
  .p-product .prod__raster{gap:1rem;}
  .p-product .prod__info h1{font-size:1.5rem;margin-bottom:.35rem;}
  .p-product .prod__prijs{margin-bottom:.6rem;}

  /* De koopknop direct onder de prijs. Hij stond na de omschrijving en kwam
     daardoor alsnog op 1.418 px uit - nog altijd bijna twee schermen. De
     omschrijving schuift eronder; wie meer wil weten leest gewoon door, maar
     wie al besloten heeft hoeft niet meer te zoeken. */
  /* De flex-order die hier stond is op 2 oktober 2026 weggehaald: de HTML zet
     de knop nu zelf boven de omschrijving, op elk scherm. Alleen de ruimte
     onder de knop blijft. */
  .p-product .bestelform,
  .p-product a.prod__knop{margin-bottom:1rem;}

  /* Het wenskaartblok is 290 px hoog en duwde bij de fruitmanden en de
     groenteboxen de knop naar 893 px - net buiten het scherm, en juist die
     producten krijgen de betaalde advertenties. Op een telefoon mag het
     compacter: de kop en de labels kleiner, minder lucht eromheen en een
     tekstvak van twee regels in plaats van drie. Wie meer wil typen, rekt het
     vak vanzelf op. */
  .p-product .kaartkeuze{padding:.7rem .8rem;margin:.7rem 0;}
  .p-product .kaartkeuze__kop{margin-bottom:.4rem;font-size:.9rem;}
  .p-product .kaartkeuze label{margin:.35rem 0 .2rem;font-size:.8rem;}
  .p-product .kaartkeuze select,
  .p-product .kaartkeuze textarea{padding:.5rem .7rem;font-size:.9rem;}
  .p-product .kaartkeuze textarea{height:3.4rem;}
}
/* Winkel- en categoriepagina's: er stond te veel tekst en lucht voordat er een
   product in beeld kwam, en de categorietegels liepen niet gelijk omdat een naam
   van twee regels de tegel hoger maakte. Dezelfde keuze op alle schermen: een
   slankere kop en tegels van gelijke hoogte. Alleen de inleidende zin verdwijnt
   uitsluitend op een telefoon, want daar kost hij een halve pagina. */
.cattegel{min-height:132px;justify-content:center;padding:1.1rem .75rem;}
/* 18 okt 2026: compacte tegels, zodat de producten eerder in beeld komen */
.cattegels.cattegels{grid-template-columns:repeat(6,minmax(0,1fr));gap:.5rem;}
.cattegels .cattegel__aantal{display:none;}
.cattegels .cattegel{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;padding:.5rem .7rem;gap:.5rem;}
.cattegels .cattegel__ico{width:22px;height:22px;flex:none;}
.cattegels .cattegel__naam{font-size:.85rem;line-height:1.2;}
.cattegel__aantal{margin-left:auto;font-size:.75rem;white-space:nowrap;}
@media (max-width:760px){.cattegels.cattegels{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;}
  .cattegels .cattegel{padding:.55rem .6rem;gap:.45rem;min-height:0;}.cattegels .cattegel__ico{width:22px;height:22px;}
  .cattegels .cattegel__naam{font-size:.82rem;}.cattegels .cattegel__aantal{display:none;}}
/* De winkel en de categoriepagina's hadden hier hun eigen, lagere maat. Die
   is nu de maat voor iedereen; zie de regel bij .paginakop. */
/* De winkel had hier ook nog een krappere binnenruimte (25,6px tegen 35,2px
   elders). Weg, anders blijft de balk daar lager dan de rest. */
@media(max-width:640px){
  /* Deze vier regels golden alleen op de winkel en de categoriepagina's. Daar
     was de balk daardoor 196px en elders 217 tot 367 -- op een telefoon het
     verschil tussen een kop en een half scherm groen. Nu gelden ze overal:
     dezelfde krappe binnenruimte, dezelfde kopgrootte, en de inleidende zin
     valt weg. Zes op de tien bezoekers zit op een telefoon. */
  .paginakop,.paginahero{min-height:200px;}
  .paginakop > .omhulsel,.paginahero__inhoud{padding-block:1.2rem!important;}
  .paginakop h1,.paginahero h1{font-size:1.55rem;}
  .paginakop p,.paginahero__lead{display:none;}
  .cattegels{gap:.6rem;}
  .cattegel{padding:.85rem .5rem;gap:.3rem;min-height:108px;}
  .cattegel__ico{width:30px;height:30px;}
  .cattegel__naam{font-size:.88rem;line-height:1.25;}
  .cattegel__aantal{font-size:.74rem;}
}
@media(max-width:640px){
  .cattegels{grid-template-columns:repeat(2,1fr);}
  .raster--4,.raster--3{grid-template-columns:1fr 1fr;}
  .artikel h1{font-size:1.6rem;}
  .prod__info h1{font-size:1.5rem;}
}

/* ---- afbeeldingen niet uitrekken ------------------------------------------ */
/* Staat er een width in de css en een height als kenmerk op de img, dan neemt
   de browser die height letterlijk. Een vierkante foto van 600 werd zo 280 breed
   en 600 hoog. Dit hoort in de basisopmaak thuis en geldt voor de hele site. */
img{height:auto;}

/* ---- de band met de andere zakelijke oplossingen -------------------------- */
.cta__lijst{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;gap:.5rem;}
.cta__lijst li{position:relative;padding-left:1.6rem;color:var(--groen-100);font-size:.95rem;}
.cta__lijst li:before{content:"";position:absolute;left:.15rem;top:.5em;width:.7rem;height:.4rem;
  border-left:2px solid var(--amber-400);border-bottom:2px solid var(--amber-400);
  transform:rotate(-45deg);}
.cta__knoppen{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.8rem;}
.cta__knoppen .knop--rand{background:transparent;color:var(--wit);border:2px solid rgba(255,255,255,.55);}
.cta__knoppen .knop--rand:hover{background:rgba(255,255,255,.12);border-color:var(--wit);}
/* de foto kleiner, zodat het groen eromheen rustig blijft */
.cta__beeld img{max-width:300px;max-height:300px;margin:0 auto;}
/* de penning viel achter de foto weg */
.cta__badge{z-index:2;}

/* ---- proefboxformulier met de kiststandaard ernaast ----------------------- */
.proefraster{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:2rem;
  align-items:start;max-width:1000px;margin:0 auto;}
.proefzij{color:var(--grijs-700);}
.proefzij img{width:100%;max-width:200px;margin:0 auto 1.2rem;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:var(--radius);padding:.8rem;}
.proefzij h3{color:var(--groen-800);font-size:1.15rem;margin-bottom:.5rem;}
.proefzij p{font-size:.95rem;line-height:1.6;}
.proefzij .cta__lijst{margin-top:1rem;}
.proefzij .cta__lijst li{color:var(--grijs-700);}
.proefzij .cta__lijst li:before{border-color:var(--groen-700);}
@media(max-width:860px){
  .proefraster{grid-template-columns:1fr;}
  .proefzij{text-align:center;}
  .proefzij .cta__lijst li{text-align:left;}
}

/* ---- springen naar een blok op dezelfde pagina ---------------------------- */
/* De kop blijft bovenaan staan; zonder deze marge verdwijnt de sectiekop
   eronder en land je ogenschijnlijk middenin een blok. */
section[id]{scroll-margin-top:100px;}
@media(max-width:820px){section[id]{scroll-margin-top:84px;}}

/* ---- contrast op de groene kaarten --------------------------------------- */
/* Lighthouse mat 4,02 / 3,85 / 3,39 waar 4,5 nodig is. De tinten zijn zo ver
   opgetrokken dat ze de norm halen en niet verder, zodat het beeld hetzelfde
   blijft. Het grote cijfer op de offertekaart stond in groen-100 op wit: 1,17.
   Dat is sier en geen informatie, dus dat gaat uit het voorleesscherm. */
.maten__prijs{color:#ffe6a8;}
.maten__prijs small{color:#e8f1e0;opacity:1;}
.maten__tekst{color:#eaf3e3;opacity:1;}
/* het cijfer blijft licht; het is sier, geen informatie, en wordt daarom
   uit het voorleesscherm gehaald in plaats van donkerder gemaakt */

/* ---- de vier stappen van fruit op het werk -------------------------------- */
/* LET OP: niet .stappen noemen. Die klasse is al de genummerde lijst op de
   schoolfruitpagina, met max-width 820px en een groen bolletje voor elke li. */
/* Zelfde gedachte als de jampotjes bij Quinta Hoekstra: een getekend plaatje in
   plaats van een opsomming, en een kaartje dat oplicht als je erover gaat. De
   twee kaartjes waar je iets kunt doen zijn een link; de andere twee vertellen
   alleen wat er gebeurt en zijn daarom bewust geen link. */
.stappenvak{background:linear-gradient(180deg,var(--wit) 0%,var(--groen-50) 100%);}
.stappenvak .ond,.stappenvak{padding-block:clamp(2rem,4vw,3rem);}
.stappenvak h2{font-size:clamp(1.5rem,2.4vw,1.9rem);}
.sectiekop__lead{max-width:56ch;margin:.9rem auto 0;color:var(--grijs-700);}
.stapkaarten{list-style:none;margin:1.6rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;}
.stapkaarten > li{display:flex;position:relative;}
/* het stippellijntje tussen de kaartjes; alleen waar ze naast elkaar staan */
.stapkaarten > li:before{content:none;}
.stapkaarten > li + li:after{content:"";position:absolute;left:-1rem;top:5.4rem;width:1rem;height:0;
  background:none;border-radius:0;border-top:2px dotted var(--groen-500);}
.stapk{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;
  padding:1.15rem 1rem 1.1rem;text-align:center;background:var(--wit);
  border:1px solid var(--grijs-200);border-radius:var(--radius);
  box-shadow:var(--schaduw-1);color:var(--inkt);
  transition:transform .18s, box-shadow .18s, border-color .18s;}
.stapk__nr{display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;background:var(--groen-100);
  color:var(--groen-800);font-family:var(--font-kop);font-weight:800;font-size:.95rem;}
.stapk__beeld{display:block;height:58px;}
.stapk__beeld svg{display:block;}
.stapk__titel{font-family:var(--font-kop);font-weight:800;font-size:.98rem;
  line-height:1.3;color:var(--groen-800);}
.stapk__tekst{font-size:.86rem;line-height:1.45;color:var(--grijs-700);}
.stapk__link{margin-top:auto;padding-top:.55rem;font-weight:700;font-size:.86rem;
  color:var(--groen-700);}
.stapk__link:after{content:" \2192";}
.stapk--klik{border-color:var(--groen-100);}
.stapk--klik:hover,.stapk--klik:focus-visible{transform:translateY(-4px);
  box-shadow:var(--schaduw-2);border-color:var(--groen-500);}
.stapk--klik:hover .stapk__link{color:var(--oranje-600);}
.stapk--klik:focus-visible{outline:2px solid var(--groen-700);outline-offset:3px;}
@media(max-width:900px){
  .stapkaarten{grid-template-columns:1fr 1fr;gap:.9rem;}
  .stapkaarten > li + li:after{display:none;}
}
@media(max-width:420px){
  .stapkaarten{grid-template-columns:1fr;}
  .stapk{flex-direction:row;text-align:left;align-items:flex-start;gap:.9rem;
    padding:1.1rem;flex-wrap:wrap;}
  .stapk__beeld{height:48px;flex:none;}
  .stapk__beeld svg{width:48px;height:48px;}
  .stapk__nr{position:absolute;top:.7rem;right:.7rem;width:26px;height:26px;font-size:.85rem;}
  .stapk__titel,.stapk__tekst,.stapk__link{flex-basis:100%;}
  .stapk__link{margin-top:.2rem;padding-top:0;}
}
@media(prefers-reduced-motion:reduce){
  .stapk{transition:none;}
  .stapk--klik:hover{transform:none;}
}

/* ---- elke paginakop even hoog: de contactpagina is de maat ---------------- */
/* Johan, 16 september 2026: "de hoogte groene balk van de winkel moet bij alle
   pagina's zijn, nu is de 1 hoger de andere". Er stonden drie hoogtes door
   elkaar -- op 1440 breed gaf dat 325px op de winkel, 413px op contact en blog,
   en 280px op de mand en het afrekenen. Nu een maat voor alles, en dat is de
   maat van de winkel. */
/* Verlaagd op 28 september 2026. Johan: "ik wil meteen de boxen zien, altijd
   het product moet meteen te zien zijn van welke pagina ook." Gemeten op
   1440x900 stond het eerste product op /fruit-op-je-werk/ op 867px, ruim onder
   de vouw. De kop hoeft geen 372px hoog te zijn om te staan; met 300 blijft de
   titel op zijn plek en schuift alles daaronder een stuk omhoog. */
.paginakop,.paginahero{display:flex;align-items:center;
  min-height:clamp(220px,21vw,300px);}
/* 24ch brak "Neem contact op met Streekvers" over twee regels en maakte die
   kop 107px hoog -- daar kwamen de 451px van /contact/ vandaan tegenover 325px
   op de winkel. Met 34ch past vrijwel elke titel op een regel en blijft de
   inhoud binnen de vaste hoogte. */
.paginakop h1,.paginahero h1{max-width:34ch;}
.paginakop p,.paginahero__lead{max-width:60ch;}
.paginakop > .omhulsel,.paginahero__inhoud{width:100%;
  padding-block:clamp(1.6rem,2.6vw,2.2rem)!important;}
.paginahero__voet{display:none;}
/* .paginakop--smal had een eigen, lagere maat; die is opgegaan in de regel
   hierboven. De klasse blijft in de HTML staan, hij doet alleen niets meer. */
@media(max-width:820px){
  .paginakop,.paginahero{min-height:200px;}
}

/* ---- productkaarten netjes op één lijn ----------------------------------- */
/* het beeld iets minder hoog: dan past een hele rij in beeld zodra je scrolt.
   De foto's staan er met object-fit:contain in, dus er wordt niets afgesneden. */
.pk__foto{aspect-ratio:5/4;background:#fff;}.pk__foto{position:relative;}.pk__gratis{position:absolute;top:.6rem;left:.6rem;background:#3d6b35;color:#fff;font-weight:700;font-size:.78rem;padding:.3rem .65rem;border-radius:999px;}.pk__foto img{padding:.25rem;}
.kaart.pk{display:flex;flex-direction:column;}
.pk__body{display:flex;flex-direction:column;flex:1;}
.pk__naam{min-height:2.7em;}
.pk__prijs{margin-bottom:.6rem;}
.pk__vlag{position:absolute;top:.6rem;right:.6rem;background:#b3261e;color:#fff;font-size:.75rem;font-weight:700;padding:.2rem .5rem;border-radius:4px;}
.pk__oud{color:var(--grijs-600);font-weight:400;margin-right:.25em;}
.pk__knop,.pk__body > a:last-child{margin-top:auto;}
.pk__body > p{margin-bottom:.9rem;}

/* ---- winkelmandknop in de kop -------------------------------------------- */
.kop__mand{position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:42px;border-radius:50%;color:var(--inkt);flex:none;}
.kop__mand:hover{background:var(--groen-50);color:var(--groen-700);}
.kop__mand svg{width:23px;height:23px;}
[hidden]{display:none!important;}
.kop__mandteller{position:absolute;top:1px;right:0;min-width:18px;height:18px;padding:0 4px;
  border-radius:9px;background:var(--groen-700);color:var(--wit);font-size:.7rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;line-height:1;}

/* ---- de winkelmand -------------------------------------------------------- */
.mand-raster{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:2.2rem;align-items:start;}
.mandladen{color:var(--grijs-600);}
.mandtotaal__kop{font-size:1rem;margin:0 0 .9rem;padding-bottom:.7rem;border-bottom:1px solid var(--grijs-200);}
.mandtotaal__btw{margin:.35rem 0 1.1rem;font-size:.85rem;color:var(--grijs-600);}
.mandtotaal .knop{display:block;width:100%;text-align:center;}
.mandtotaal .knop + .knop{margin-top:.75rem;}
.mandtotaal__knop{margin-top:1.1rem;}
.mandtotaal__uitleg{margin:.5rem 0 0;font-size:.82rem;color:var(--grijs-600);line-height:1.5;}
.mandhulp{margin-top:.9rem;font-size:.85rem;line-height:1.55;color:var(--grijs-600);}
.mandhulp a{color:var(--groen-700);}
.mandleeg{text-align:center;padding:3rem 1rem;background:var(--grijs-100);border-radius:var(--radius);}
.mandleeg p{margin-bottom:1.2rem;color:var(--grijs-700);}
.mandregel{display:grid;grid-template-columns:80px minmax(0,1fr) auto 5.5rem 2.4rem;gap:1rem;
  align-items:center;padding:1rem 0;border-bottom:1px solid var(--grijs-200);}
.mandregel__beeld{width:80px;height:80px;object-fit:contain;background:var(--grijs-100);
  border-radius:10px;padding:.3rem;}
.mandregel__naam{font-weight:700;color:var(--inkt);line-height:1.35;}
.mandregel__extra{font-weight:400;font-size:.82rem;color:var(--grijs-600);margin-top:.25rem;}
.mandregel__aantal{display:inline-flex;align-items:center;gap:.1rem;border:1px solid var(--grijs-300);
  border-radius:999px;overflow:hidden;background:var(--wit);}
.mandregel__aantal button{width:32px;height:34px;border:0;background:none;cursor:pointer;
  font-size:1.05rem;color:var(--groen-800);}
.mandregel__aantal button:hover{background:var(--groen-50);}
.mandregel__aantal span{min-width:26px;text-align:center;font-weight:700;font-size:.92rem;}
.mandregel__prijs{font-weight:800;color:var(--groen-700);white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}
.mandregel__weg{border:0;background:none;cursor:pointer;font-size:1.3rem;color:var(--grijs-600);
  width:2.4rem;justify-self:center;
  line-height:1;padding:.2rem .4rem;}
.mandregel__weg:hover{color:#a13d3d;}
.mandtotaal{background:var(--grijs-100);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:1.4rem 1.5rem;position:sticky;top:1.5rem;}
.mandtotaal__regel{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.5rem 0;font-size:.95rem;}
.mandtotaal__regel--groot{border-top:1px solid var(--grijs-300);margin-top:.4rem;padding-top:.9rem;
  font-size:1.15rem;}
.mandtotaal__regel--groot strong{color:var(--groen-700);font-family:var(--font-kop);font-size:1.35rem;}
.mandtotaal__later{color:var(--grijs-600);font-size:.85rem;text-align:right;}
.mandtotaal__regel small{font-weight:400;color:var(--grijs-600);font-size:.8rem;margin-left:.25rem;}
.mandtotaal__korting{color:var(--groen-700);}
/* "Vaak samen besteld" onder de mandregels. Overgenomen van fruitbijuthuis.nl. */
.bijverkoop{border-top:1px solid var(--grijs-300);margin-top:1.4rem;padding-top:1.1rem;}
.bijverkoop__kop{margin:0 0 .75rem;font-size:1.05rem;}
.bijverkoop__lijst{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.bijverkoop__rij{display:grid;grid-template-columns:48px minmax(0,1fr) 5.5rem 2.4rem;align-items:center;gap:1rem;padding:.55rem 0;}
.bijverkoop__rij img,.bijverkoop__leeg{width:48px;height:48px;object-fit:cover;border-radius:6px;
background:var(--grijs-100);}
.bijverkoop__naam{color:inherit;text-decoration:none;font-size:.95rem;line-height:1.3;}
.bijverkoop__naam:hover{color:var(--groen-700);text-decoration:underline;}
.bijverkoop__prijs{font-weight:700;font-size:.95rem;white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;}
.bijverkoop__knop{width:2.4rem;height:2.4rem;border:0;border-radius:6px;cursor:pointer;
background:var(--groen-700);color:#fff;font-size:1.2rem;line-height:1;}
.bijverkoop__knop:hover{background:var(--groen-600);}
.bijverkoop__knop:disabled{opacity:.6;cursor:default;}
.mandbalk__extra{display:block;font-size:.82rem;opacity:.85;margin-top:.15rem;}
.mandtotaal__uitleg{color:var(--grijs-600);font-size:.85rem;line-height:1.45;margin:.5rem 0 0;padding-top:.5rem;border-top:1px dotted var(--grijs-300);}
.mandtotaal__btw{font-size:.8rem;color:var(--grijs-600);margin:.3rem 0 1rem;}
.mandtotaal__knop{width:100%;justify-content:center;}
.mandmelding{font-size:.9rem;margin-top:.8rem;}
.pp-aanvul{margin-top:.9rem;padding:.75rem .9rem;border:1px solid var(--grijs-200,#e6e0d2);border-radius:12px;background:#fff}
.pp-aanvul__kop{margin:0 0 .5rem;font-size:.85rem;color:#4a4a4a}
.pp-aanvul__rij{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:.6rem;font-size:.88rem}
.pp-aanvul__rij img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.pp-aanvul__rij>a:first-of-type{color:inherit}
.pp-aanvul__knop{border:1.5px solid var(--groen-700,#2f4a22);border-radius:999px;padding:.35rem .7rem;font-weight:600;color:var(--groen-700,#2f4a22);white-space:nowrap}
@media (max-width:480px){.pp-aanvul__rij{grid-template-columns:44px 1fr auto}.pp-aanvul__rij>span{display:none}}
.bijna{margin-top:1rem;padding:1rem;border-radius:12px;background:#fff;border:1px solid var(--groen-100,#dfe9d8);}
.bijna__kop{font-weight:700;color:var(--groen-700,#2f4a22);margin:0;}
.bijna__tekst{font-size:.9rem;margin:.25rem 0 0;color:#4a4a4a;}
.bijna__sub{font-size:.85rem;font-weight:600;margin:.9rem 0 .4rem;color:#4a4a4a;}
.bijna__product{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"b n k" "b p k";align-items:center;column-gap:.7rem;}
.bijna__beeld{grid-area:b;width:48px;height:48px;border-radius:10px;object-fit:cover;background:#f6f6f2;}
.bijna__naam{grid-area:n;font-size:.9rem;color:inherit;text-decoration:none;line-height:1.25;}
.bijna__prijs{grid-area:p;font-size:.85rem;font-weight:600;}
.bijna__knop{grid-area:k;border:1.5px solid var(--groen-700,#2f4a22);background:#fff;color:var(--groen-700,#2f4a22);border-radius:999px;padding:.45rem .85rem;font-weight:600;font-size:.85rem;cursor:pointer;white-space:nowrap;}
.bijna__knop:hover,.bijna__knop:focus-visible{background:var(--groen-700,#2f4a22);color:#fff;}
.mandmelding--ja{color:var(--groen-700);font-weight:600;}
.mandmelding--nee{color:#a13d3d;font-weight:600;}
/* Cookiebalk. Bewust smal en onopvallend: hij mag de winkel niet afdekken, en
   de twee knoppen zijn even groot omdat weigeren even makkelijk moet zijn als
   accepteren. Staat rechtsonder en niet over de volle breedte, zodat hij de
   mandbalk niet in de weg zit. */
.cookiebalk{position:fixed;right:1rem;bottom:1rem;z-index:70;max-width:26rem;
  display:flex;flex-wrap:wrap;align-items:center;gap:.7rem .9rem;
  padding:.85rem 1rem;background:var(--wit,#fff);color:var(--inkt,#1d2a20);
  border:1px solid var(--rand,#dfe3da);border-radius:6px;
  box-shadow:0 6px 24px rgba(0,0,0,.14);font-size:.86rem;line-height:1.45;}
.cookiebalk__tekst{flex:1 1 13rem;margin:0;}
.cookiebalk__tekst a{color:var(--groen-700,#20502f);}
/* Grid met twee gelijke kolommen, niet flex: anders wordt de knop met de
   langste tekst breder en oogt accepteren als de hoofdkeuze. Weigeren moet
   even makkelijk zijn, en dus ook even groot. */
.cookiebalk__knoppen{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;flex:1 1 100%;}
.cookiebalk__knop{font:inherit;font-weight:600;cursor:pointer;white-space:nowrap;
  padding:.45rem .8rem;border-radius:4px;border:1px solid var(--groen-700,#20502f);}
.cookiebalk__knop--vol{background:var(--groen-700,#20502f);color:#fff;}
.cookiebalk__knop--rand{background:transparent;color:var(--groen-700,#20502f);}
.cookiebalk--weg{opacity:0;transform:translateY(.4rem);}
@media(prefers-reduced-motion:no-preference){
  .cookiebalk{transition:opacity .22s ease,transform .22s ease;}
  .cookiebalk{animation:cookiebalkop .22s ease-out;}
  @keyframes cookiebalkop{from{opacity:0;transform:translateY(.5rem);}to{opacity:1;transform:translateY(0);}}
}
@media(max-width:560px){
  .cookiebalk{left:.75rem;right:.75rem;bottom:.75rem;max-width:none;}
  .cookiebalk__knoppen{flex:1 1 100%;}
  .cookiebalk__knop{flex:1 1 0;text-align:center;}
}
.formulier__hulp{font-size:.88rem;margin-top:.9rem;color:var(--grijs-700,#555);}
.formulier__hulp a{color:var(--groen-700,#20502f);font-weight:600;}
/* Op de afrekenpagina horen de Mollie-regel en het vangnet bij elkaar: een klein
   blokje onder de knop in plaats van twee losse alinea's met ruimte ertussen. */
.afreken__slotnoot > p{margin:0;}
.afreken__slotnoot .formulier__hulp{font-size:.82rem;margin-top:.15rem;color:var(--grijs-600);}
/* Bevestigingsbalk na het toevoegen vanaf een winkelkaartje. Vast onderaan, dus
   de pagina verschuift niet; blijft staan tot de klant hem wegklikt. */
.mandbalk{position:fixed;left:0;right:0;bottom:var(--cookiehoogte,0px);z-index:80;transition:bottom .2s ease;display:flex;align-items:center;gap:1rem;
  flex-wrap:wrap;padding:.9rem clamp(1rem,4vw,2rem);background:var(--groen-700,#20502f);color:#fff;
  box-shadow:0 -2px 12px rgba(0,0,0,.18);}
.mandbalk__tekst{flex:1 1 14rem;font-size:.95rem;}
.mandbalk__knop{flex:0 0 auto;background:#fff;color:var(--groen-700,#20502f);}
.mandbalk__weg{flex:0 0 auto;background:none;border:0;color:#fff;font-size:1.5rem;line-height:1;
  cursor:pointer;padding:0 .3rem;}
@media(max-width:560px){.mandbalk{gap:.6rem;padding:.75rem 1rem;}.mandbalk__tekst{flex-basis:100%;}}
@media(prefers-reduced-motion:no-preference){.mandbalk{animation:mandbalkop .25s ease-out;}
  @keyframes mandbalkop{from{transform:translateY(100%);}to{transform:translateY(0);}}}

/* ---- afrekenen ------------------------------------------------------------ */
.afreken-raster{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:2.2rem;align-items:start;}
.okaart{background:var(--wit);border:1px solid var(--grijs-200);border-radius:var(--radius);
  padding:1.6rem 1.7rem;box-shadow:var(--schaduw-1);}
.okaart__kop{font-size:1.1rem;margin:1.6rem 0 .9rem;}
.okaart__kop:first-child{margin-top:0;}
.afreken__overzicht{position:sticky;top:1.5rem;background:var(--grijs-100);box-shadow:none;}
.afreken__regel{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  padding:.45rem 0;font-size:.93rem;border-bottom:1px solid var(--grijs-200);}
.afreken__regel:last-of-type{border-bottom:0;}
.afreken__regel--groot{font-size:1.12rem;padding-top:.8rem;}
.afreken__regel--groot strong{color:var(--groen-700);font-family:var(--font-kop);font-size:1.3rem;}
.afreken__keuzes{display:grid;gap:.6rem;}
.afreken__keuze{display:flex;align-items:center;gap:.7rem;border:1px solid var(--grijs-300);
  border-radius:11px;padding:.8rem 1rem;cursor:pointer;background:var(--wit);font-size:.95rem;}
.afreken__keuze:hover{border-color:var(--groen-500);}
.afreken__keuze span{flex:1;}
.afreken__keuze input{accent-color:var(--groen-700);width:18px;height:18px;}
.afreken__keuzevak{display:grid;gap:.35rem;}
.afreken__uitlegknop{flex:0 0 auto;width:24px;height:24px;border-radius:50%;border:1px solid var(--groen-500);
  background:#fff;color:var(--groen-700);font:600 .85rem/1 inherit;cursor:pointer;padding:0;}
.afreken__uitlegknop:hover,.afreken__uitlegknop[aria-expanded="true"]{background:var(--groen-700);color:#fff;}
.afreken__uitlegknop:focus-visible{outline:2px solid var(--groen-700);outline-offset:2px;}
.afreken__uitleg{margin:0 .2rem;padding:.6rem .85rem;background:#f3f6ee;border-radius:10px;font-size:.85rem;line-height:1.5;color:var(--grijs-700,#4a4a4a);}
.afreken__hint{font-size:.87rem;color:var(--grijs-600);}
.afreken__veldkop{font-weight:700;font-size:.95rem;color:var(--inkt);margin:1.3rem 0 .5rem;}
.check__vervolg{margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid var(--grijs-200);}
.check__vervolgkop{font-weight:700;margin-bottom:.8rem;color:var(--inkt);}
.formulier--check .formulier__noot{margin-top:.7rem;}
.vw__wegwijzer{background:var(--groen-50);border-left:4px solid var(--groen-500);
  padding:1rem 1.2rem;border-radius:0 10px 10px 0;margin-bottom:2rem;}
.vw h2{font-size:1.15rem;margin:2rem 0 .6rem;}
.vw__leden{margin:0;padding-left:1.4rem;}
.vw__leden li{margin-bottom:.55rem;line-height:1.65;}
.vw__slot{margin-top:2.4rem;font-size:.92rem;color:var(--grijs-600);}
.afreken__factuurkeuze{margin-top:1.1rem;padding:.85rem 1rem;background:var(--groen-50,#F1F6EC);
 border:1px solid var(--rand,#DCE3D4);border-radius:4px;}
.afreken__factuurkeuze small{color:var(--inkt-zacht,#5A6553);display:block;margin-top:.15rem;line-height:1.4;}
.afreken__factuurblok{margin-top:1.2rem;padding-top:.4rem;border-top:1px solid var(--rand,#DCE3D4);}
.afreken__akkoord{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.6rem;
  font-size:.9rem;line-height:1.5;color:var(--grijs-700);cursor:pointer;}
.afreken__akkoord input{margin-top:.2rem;width:18px;height:18px;flex:none;accent-color:var(--groen-700);}
.afreken__akkoord a{color:var(--groen-700);text-decoration:underline;text-underline-offset:2px;}
.afreken__akkoord--vergeten{color:#a13d3d;}
.afreken__akkoord--vergeten a{color:#a13d3d;}
/* Het veld dat aandacht nodig heeft. Rand plus achtergrond, want kleur alleen
   is niet genoeg voor wie slecht kleuren onderscheidt. */
.afreken__veld--fout{border-color:#a13d3d;background:#fdf6f6;outline:2px solid #a13d3d;outline-offset:-2px;}
/* de dagen naast elkaar, zodat het een keuze blijft en geen lijst */
.afreken__keuzes--kort{grid-template-columns:1fr 1fr;}
.afreken__keuzes--kort .afreken__keuze{padding:.6rem .8rem;font-size:.9rem;}
@media(max-width:520px){.afreken__keuzes--kort{grid-template-columns:1fr;}}
#bestelknop{width:100%;justify-content:center;margin-top:1.4rem;}
#bestelknop[disabled]{opacity:.55;cursor:not-allowed;}
.bestelling__status{font-size:1.05rem;font-weight:600;color:var(--groen-700);}

@media(max-width:900px){
  .mand-raster,.afreken-raster{grid-template-columns:1fr;}
  .mandtotaal,.afreken__overzicht{position:static;}
  /* Op de telefoon stond "Naar het afrekenen" onder de suggesties, buiten
     beeld. Op 7 oktober 2026 kwamen vier van de zes klanten in de mand en
     gingen niet verder. Nu: eerst wat er in de mand zit, dan het overzicht
     met de knop, en pas daaronder "Nog wat lekkers erbij?". */
  .mand-raster>div:first-child{display:contents;}
  .mand-raster [data-mandinhoud]{order:1;}
  .mand-raster .mand-zij{order:2;}
  .mand-raster .bijverkoop{order:3;}
}
@media(max-width:560px){
  .mandregel{grid-template-columns:64px minmax(0,1fr) auto;row-gap:.6rem;}
  .mandregel__beeld{width:64px;height:64px;}
  .mandregel__aantal{grid-column:2;}
  .mandregel__prijs{grid-column:3;text-align:right;}
  .mandregel__weg{grid-row:1;grid-column:3;justify-self:end;}
}

/* ===== Nieuwe voet, 13 okt 2026 (Johan: "meer onze koers") =====
   Bosgroen #173B25, fruit-oranje #F59A00, versgroen #78B94B, creme #FFF9EF. */
.sv-voet{--sv-bos:#173B25;--sv-oranje:#F59A00;--sv-vers:#78B94B;--sv-creme:#FFF9EF;
  background:var(--sv-bos);color:rgba(255,255,255,.86);position:relative;overflow:hidden;}
.sv-voet a{color:inherit;text-decoration:none;}
.sv-voet .omhulsel{max-width:1380px;}
.sv-voet__hoofd{display:grid;grid-template-columns:minmax(220px,1.3fr) repeat(4,minmax(0,1fr)) minmax(225px,1.15fr);
  gap:1.9rem;padding-block:4rem 2.4rem;position:relative;z-index:1;}
.sv-voet__merk{padding-right:1.6rem;border-right:1px solid rgba(255,255,255,.12);}
.sv-voet__logo{width:150px;height:auto;display:block;margin-bottom:1.1rem;}
.sv-voet__slogan{font-family:var(--font-kop);font-weight:800;font-size:1.45rem;line-height:1.2;color:#fff;margin:0 0 .7rem;}
.sv-voet__pitch{font-size:.92rem;line-height:1.55;color:rgba(255,255,255,.82);margin:0 0 1.2rem;max-width:30ch;}
.sv-voet__usp,.sv-voet__lijst,.sv-voet__contact{list-style:none;margin:0;padding:0;}
.sv-voet__usp{display:flex;flex-direction:column;gap:.9rem;}
.sv-voet__usp li{display:flex;align-items:center;gap:.8rem;font-size:.88rem;line-height:1.35;}
.sv-voet__rond{flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1.6px solid var(--sv-vers);color:var(--sv-vers);
  display:inline-flex;align-items:center;justify-content:center;}
.sv-voet__rond--oranje{border-color:var(--sv-oranje);color:var(--sv-oranje);width:40px;height:40px;}
.sv-voet__kop{font-family:var(--font-kop);font-weight:800;font-size:1.02rem;white-space:nowrap;color:#fff;margin-bottom:1.3rem;position:relative;padding-bottom:.65rem;}
.sv-voet__kop::after{content:"";position:absolute;left:0;bottom:0;width:30px;height:3px;border-radius:2px;background:var(--sv-oranje);}
.sv-voet__lijst{display:flex;flex-direction:column;gap:.62rem;}
.sv-voet__lijst a{font-size:.9rem;color:rgba(255,255,255,.82);transition:color .15s;}
.sv-voet__lijst a:hover,.sv-voet__lijst a:focus-visible{color:var(--sv-oranje);}
.sv-voet__meer{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;margin-top:1rem;font-weight:700;font-size:.92rem;color:#fff;}
.sv-voet__meer svg{color:var(--sv-oranje);transition:transform .15s;}
.sv-voet__meer:hover svg{transform:translateX(3px);}
.sv-voet__kol--contact{padding-left:1.6rem;border-left:1px solid rgba(255,255,255,.12);}
.sv-voet__contact{display:flex;flex-direction:column;gap:.9rem;}
.sv-voet__contact li{display:flex;align-items:center;gap:.75rem;font-size:.9rem;}
.sv-voet__contact a:hover{color:var(--sv-oranje);}
.sv-voet__banner{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;
  border:1px solid rgba(120,185,75,.45);border-radius:18px;overflow:hidden;margin-bottom:2.6rem;
  background:linear-gradient(90deg,#1d4a2e 0%,#1d4a2e 52%,rgba(29,74,46,0) 100%),#1d4a2e;}
.sv-voet__banner-tekst{padding:2.2rem 2.4rem;position:relative;z-index:2;}
.sv-voet__banner-kop{font-family:var(--font-kop);font-weight:800;font-size:clamp(1.4rem,2.6vw,2.1rem);line-height:1.15;color:#fff;margin:0 0 .6rem;}
.sv-voet__banner-sub{font-size:1rem;line-height:1.5;color:rgba(255,255,255,.88);margin:0 0 1.4rem;max-width:44ch;}
.sv-voet__banner-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;}
.sv-voet__knop{display:inline-flex;align-items:center;gap:.5rem;background:var(--sv-oranje);color:#1b1b1b !important;font-weight:800;
  padding:.85rem 1.5rem;border-radius:12px;transition:background .15s,transform .15s;}
.sv-voet__knop:hover,.sv-voet__knop:focus-visible{background:#ffad1f;transform:translateY(-1px);}
.sv-voet__offerte{color:#fff !important;text-decoration:underline !important;text-underline-offset:3px;font-size:.95rem;}
.sv-voet__offerte:hover{color:var(--sv-oranje) !important;}
.sv-voet__banner-foto{display:block;width:100%;height:100%;min-height:230px;max-height:300px;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);mask-image:linear-gradient(90deg,transparent 0,#000 28%);}
.sv-voet__onder{border-top:1px solid rgba(255,255,255,.1);position:relative;z-index:1;}
.sv-voet__onder-inhoud{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;
  padding-block:1.1rem;font-size:.82rem;color:rgba(255,255,255,.72);}
.sv-voet__onder-inhoud--klein{padding-block:0 1.2rem;}
.sv-voet__onder-links{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;}
.sv-voet__onder a:hover{color:var(--sv-oranje);}
.sv-voet__onder-inhoud--klein a:not(.facilsites){text-decoration:underline;text-underline-offset:2px;}
.sv-voet a:focus-visible{outline:2px solid var(--sv-oranje);outline-offset:3px;border-radius:4px;}
@media(max-width:1180px){
  .sv-voet__hoofd{grid-template-columns:repeat(3,minmax(0,1fr));}
  .sv-voet__merk{grid-column:1/-1;border-right:0;padding-right:0;display:grid;grid-template-columns:auto 1fr;gap:0 2rem;align-items:start;}
  .sv-voet__merk .sv-voet__logo{grid-row:1/4;}
  .sv-voet__usp{flex-direction:row;flex-wrap:wrap;gap:1rem 1.6rem;grid-column:2;}
  .sv-voet__kol--contact{padding-left:0;border-left:0;}
}
@media(max-width:760px){
  .sv-voet__hoofd{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.4rem;padding-block:3rem 2rem;}
  .sv-voet__merk{display:block;}
  .sv-voet__usp{flex-direction:column;}
  .sv-voet__banner{grid-template-columns:1fr;}
  .sv-voet__banner-foto{max-height:200px;min-height:160px;order:-1;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%);}
  .sv-voet__banner-tekst{padding:1.4rem 1.4rem 1.6rem;}
  .sv-voet__onder-inhoud{flex-direction:column;align-items:flex-start;}
}
@media(max-width:400px){.sv-voet__hoofd{gap:1.8rem 1rem;}.sv-voet__lijst a{font-size:.86rem;}.sv-voet__kop{font-size:.95rem;}}
/* Kortere footer op de telefoon (Johan 11 nov 2026, zoals fbut 6 nov): de vier
   linkkolommen klappen uit op een tik (site.js), contact blijft open. Zonder
   JavaScript blijven alle links gewoon zichtbaar. */
@media(max-width:600px){
  .sv-voet__hoofd{grid-template-columns:1fr;gap:0;padding-block:2.2rem 1.4rem;}
  .sv-voet__merk{margin-bottom:1.2rem;}
  .sv-voet__logo,.sv-voet__usp{display:none;}
  .sv-voet__kol--klap .sv-voet__kop{cursor:pointer;display:flex;justify-content:space-between;align-items:center;
    margin:0;padding:.85rem 0;border-bottom:1px solid rgba(255,255,255,.14);}
  .sv-voet__kol--klap .sv-voet__kop::after{position:static;width:auto;height:auto;background:none;content:"+";
    font-size:1.3rem;line-height:1;color:var(--sv-oranje);}
  .sv-voet__kol--klap.open .sv-voet__kop::after{content:"−";}
  .sv-voet__kol--klap:not(.open) .sv-voet__lijst{display:none;}
  .sv-voet__kol--klap .sv-voet__lijst{padding:.8rem 0 1rem;}
  .sv-voet__kol--contact{margin-top:1.4rem;}
}
/* Kop in de koers van 15 oktober 2026 (variant B): topbalk met rechts de
   zakelijke offerteregel, en een oranje knop "Offerte aanvragen". */
.topbalk__inhoud{justify-content:space-between;gap:1rem;}
.topbalk__links{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;}
.topbalk__zakelijk{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap;}
.topbalk__zakelijk:hover{color:#F59A00;}
.kop .kop__offerte{white-space:nowrap;background:#F59A00;border-color:#F59A00;color:#173B25;}
.kop .kop__offerte:hover{background:#ffab1f;border-color:#ffab1f;color:#173B25;}
@media (max-width:420px){.kop .kop__offerte{padding-left:12px;padding-right:12px;font-size:14px}.kop .kop__mand{width:36px}.pp__beeld img,.pp__foto{max-height:260px;object-fit:contain}}
@media(max-width:700px){.topbalk__links{display:none;}.topbalk__inhoud{justify-content:center;}}
@media(max-width:520px){.kop__lang{display:none;}}
/* 10 nov 2026: op een laptop van 1366px stak "Offerte aanvragen" 30px buiten beeld
   (horizontaal schuiven). Tot 1480px staat er net als op de telefoon "Offerte". */
@media(max-width:1480px){.kop__lang{display:none;}}