/* ─────────────────────────────────────────────────────────────
    sportgripjes.nl — functioneel en minimalistisch.
    Alle kleuren staan hier bij elkaar.
    ───────────────────────────────────────────────────────────── */
 :root{
  --blauw:#00A3E0;        /* merkkleur: logo '.nl', tellers, balkjes */
  /* Knoppen en links: iets donkerder blauw. Witte tekst op #00A3E0 haalt
     maar contrast 2,9 (norm voor goed leesbaar is 4,5); dit is 5,3. */
  --actie:#00739E;
  --actie-diep:#005F83;
  --blauw-diep:var(--actie-diep);
  --groen:#3D7A14;        /* prijsvoordeel (p/st) — contrast 5,3 op wit */
  --groen-licht:#78B833;  /* alleen voor vlakken, niet voor tekst */
  --achtergrond:#F4F6F8;
  --wit:#ffffff;
  --inkt:#102A43;         /* tekst */
  --inkt-zacht:rgba(16,42,67,.72);
  --lijn:#dde3e9;
  --rood:#c0392b;
  --breedte:1200px;
  --kop:'Montserrat',-apple-system,Helvetica,Arial,sans-serif;
  --tekst:'Inter',-apple-system,Helvetica,Arial,sans-serif;
 }
 *{box-sizing:border-box}
 html,body{margin:0;padding:0; overflow-x:clip}
 body{background:var(--wit); color:var(--inkt); font-family:var(--tekst); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased}
 img{max-width:100%; display:block}
 a{color:var(--actie)}
 :focus-visible{outline:2px solid var(--actie); outline-offset:2px}
 /* Alleen links/rechts (padding-inline). Voorheen 'padding:0 40px': een
    class ernaast met 'padding:3rem 0' (sectie, productsectie, kop-rij)
    veegde dan de zijmarge weg op de laptop, en op mobiel veegde de wrap
    juist de ruimte boven/onder weg — vandaar de ontbrekende witruimte
    boven 'Veelgestelde vragen'. Nu raken ze elkaar niet meer. */
 .wrap{max-width:var(--breedte); margin:0 auto; padding-inline:40px}
 /* Smalle leeskolom, maar links uitgelijnd met logo en de rest van de site */
 .wrap-smal > *{max-width:720px}
 /* Tekstpagina's (privacy, voorwaarden, retour): lucht boven elk kopje */
 .wrap-smal > h3{font-size:1.05rem; margin:1.8em 0 .35em}
 .wrap-smal > h1 + h3{margin-top:.9em}
 .wrap-smal > p{line-height:1.7}

 h1,h2,h3{font-family:var(--kop); font-weight:700; margin:0 0 .4em; line-height:1.2; letter-spacing:-.01em}
 h1{font-size:2.6rem}
 h2{font-size:1.5rem}
 h3{font-size:1rem}
 p{margin:0 0 1em}

 /* ── Knoppen ── */
 .knop{
  display:inline-block; border:0; background:var(--actie); color:#fff;
  font-family:var(--kop); font-weight:600; font-size:.92rem;
  padding:.9rem 1.6rem; cursor:pointer; text-decoration:none; border-radius:4px;
  transition:background .15s;
 }
 .knop:hover{background:var(--actie-diep)}
 .knop:disabled{background:var(--lijn); color:var(--inkt-zacht); cursor:not-allowed}
 .knop.breed{width:100%; text-align:center}
 .knop.leeg{background:transparent; color:var(--actie); border:1px solid var(--lijn)}
 .knop.leeg:hover{background:var(--achtergrond)}

 /* ── Balk bovenaan ── */
 #announcement-bar{background:var(--inkt); color:#fff; font-size:.82rem; text-align:center; padding:.45rem 1rem}
 #announcement-bar a{color:#fff}
 html.uit-balk #announcement-bar{display:none}

 /* ── Header: alleen logo en winkelwagen ── */
 header{background:var(--wit); border-bottom:1px solid var(--lijn); position:sticky; top:0; z-index:40}
 .kop-rij{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:1rem}
 .logo{font-family:var(--kop); font-weight:700; font-size:1.25rem; color:var(--inkt); text-decoration:none; letter-spacing:-.02em}
 .logo span{color:var(--blauw)}
 nav.hoofd{display:flex; gap:1.6rem; align-items:center}
 nav.hoofd a{color:var(--inkt); text-decoration:none; font-size:.9rem; font-weight:500}
 nav.hoofd a:hover{color:var(--actie)}
 .kop-rechts{display:flex; gap:.6rem; align-items:center}
 .mand-knop{background:var(--achtergrond); border:1px solid var(--lijn); color:var(--inkt); font-family:var(--kop); font-weight:600; font-size:.85rem; padding:.55rem 1rem; cursor:pointer; border-radius:4px}
 .mand-knop:hover{border-color:var(--actie)}
 .mand-telling{background:var(--blauw); color:#fff; border-radius:100px; font-size:.72rem; padding:.05rem .42rem; margin-left:.4rem}
 .menu-knop{display:none; background:none; border:1px solid var(--lijn); color:var(--inkt); padding:.55rem .65rem; cursor:pointer; border-radius:4px; flex-direction:column; justify-content:center; align-items:center; gap:4px; width:38px; height:38px}
 .menu-knop span{display:block; width:18px; height:2px; background:var(--inkt); border-radius:1px; transition:transform .2s, opacity .2s}
 /* Menu open: de drie streepjes worden een kruisje */
 .menu-knop.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
 .menu-knop.open span:nth-child(2){opacity:0}
 .menu-knop.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

 /* ── Pagina's ── */
 .pagina{display:none; padding-block:2.5rem 4rem}
 .pagina.aan{display:block}
 #page-home{padding-block:0}

 /* ── Hero: kort en functioneel ── */
 .hero{background:var(--achtergrond); padding-block:2.8rem 2.4rem; text-align:center}
 .hero h1{margin-bottom:.5em; font-size:2.2rem}
 .hero p{margin:0; font-size:1.15rem; color:var(--inkt-zacht); line-height:1.5}
 .hero .garantie-regel{margin:.9rem 0 0; font-size:1.05rem}
 .hero .garantie-regel a{color:var(--actie); text-decoration:underline}
 html.uit-garantie .garantie-regel{display:none}

 /* ── Product grid ── */
 .productsectie{padding-top:2.5rem}
 /* Drie kaarten per rij: er zijn drie verpakkingen (1, 10, 20). Met vier
    kolommen bleef rechts een lege plek over. */
 .product-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.75rem}
 .product-grid:empty{display:none}
 .product{display:flex; flex-direction:column; background:var(--wit); border:1px solid var(--lijn); border-radius:6px; overflow:hidden}
 .product .foto{position:relative; aspect-ratio:1/1; background:var(--achtergrond); overflow:hidden}
 .product .foto img{width:100%; height:100%; object-fit:cover}
 .product .foto span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.75rem; color:var(--inkt-zacht)}
 .product .inhoud{padding:1rem 1.1rem 1.2rem; display:flex; flex-direction:column; flex:1}
 .product h3{font-family:var(--kop); font-weight:700; font-size:1.1rem; margin-bottom:.65rem}
 .product .beschrijving{font-size:.85rem; color:var(--inkt-zacht); margin:-.2rem 0 .6rem}
 .kleurkeuze{display:flex; gap:.4rem; margin:0 0 .9rem}
 .kleurkeuze button{flex:1; min-height:38px; padding:.4rem .3rem; font-family:var(--tekst); font-size:.85rem; border:1px solid var(--lijn); border-radius:5px; background:var(--wit); color:var(--inkt); cursor:pointer; transition:border-color .15s, background .15s}
 .kleurkeuze button:hover{border-color:var(--inkt-zacht)}
 .kleurkeuze button.aan{border-color:var(--actie); box-shadow:inset 0 0 0 1px var(--actie); background:#EAF4F9; color:var(--actie-diep); font-weight:600}
 .prijsregel{display:flex; align-items:baseline; gap:.5rem; margin-bottom:.15rem}
 .prijs{font-family:var(--kop); font-weight:700; font-size:1.35rem; color:var(--inkt)}
 .per-stuk{font-size:.85rem; font-weight:600; color:var(--groen)}
 .voorraad{font-size:.82rem; color:var(--inkt-zacht); margin:0 0 1rem}
 .voorraad.op{color:var(--rood)}
 .product .knop{margin-top:auto; font-size:.92rem; padding:.8rem 1rem}
 .thuisbezorgd{font-size:.8rem; color:var(--groen); font-weight:600; margin:.1rem 0 .15rem}
 /* Score op de productkaart: alleen met echte recensies (vanaf 5), zie winkel.js */
 .product-stars{display:flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--inkt-zacht); margin:-.35rem 0 .6rem}
 .product-stars a{color:var(--inkt-zacht)}
 html.uit-sterren .product-stars{display:none}

 /* Drie korte punten onder de producten: subtiel, klein en grijs */
 .usp-rij{list-style:none; margin:1.4rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.5rem 1.75rem; font-size:.88rem; color:var(--inkt-zacht)}
 .usp-rij li{display:flex; align-items:center; gap:.45rem}
 .usp-rij li::before{content:"\2713"; color:var(--groen); font-weight:700}
 .bulk-regel{color:var(--inkt-zacht); margin:0 0 .6rem !important}

 /* ── Secties onder de vouw ── */
 .sectie{padding-block:3.5rem}
 .sectie-kop{margin-bottom:1.5rem}
 .sectie-kop h2{margin-bottom:.2em}
 .sectie-kop p{margin:0; color:var(--inkt-zacht); font-size:.95rem}

 /* ── Eenmalige productomschrijving boven de grips ── */
 .product-omschrijving{max-width:56em; margin:0 0 2rem}
 .product-omschrijving h2{margin:0 0 .5rem; font-size:1.2rem}
 .product-omschrijving p{margin:0; color:var(--inkt-zacht); line-height:1.6}

 /* ── Vragen ── */
 .vraag{border-top:1px solid var(--lijn); padding-block:1.3rem}
 .vraag:last-child{border-bottom:1px solid var(--lijn)}
 .vraag h3{font-family:var(--kop); font-weight:600; font-size:1rem; margin-bottom:.35em}
 .vraag p{margin:0; color:var(--inkt-zacht); font-size:.94rem; line-height:1.55}
 html.uit-faq #faq-blok{display:none}

 /* ── Winkelmand ── */
 #cart-drawer{position:fixed; top:0; right:0; height:100%; width:400px; max-width:94vw; background:var(--wit); box-shadow:none; transform:translateX(102%); visibility:hidden; transition:transform .28s ease, visibility 0s linear .28s, box-shadow .28s; z-index:100; display:flex; flex-direction:column}
 #cart-drawer.open{transform:none; visibility:visible; box-shadow:-16px 0 40px rgba(16,42,67,.14); transition:transform .28s ease, visibility 0s, box-shadow .28s}
 .mand-kop{display:flex; justify-content:space-between; align-items:center; padding:1.2rem 1.4rem; border-bottom:1px solid var(--lijn)}
 .mand-kop h3{font-family:var(--kop); margin:0; font-size:1.05rem}
 .mand-lijst{flex:1; overflow:auto; padding:1.1rem 1.4rem}
 .mand-regel{display:grid; grid-template-columns:1fr auto; gap:.6rem; padding:.9rem 0; border-bottom:1px solid var(--lijn); font-size:.94rem}
 .mand-regel strong{font-weight:500}
 .aantal{display:flex; align-items:center; gap:.5rem; margin-top:.45rem}
 .aantal button{width:34px; height:34px; border:1px solid var(--lijn); background:var(--wit); cursor:pointer; border-radius:4px; color:var(--inkt); font-size:.95rem}
 .aantal button:hover{border-color:var(--actie)}
 .aantal span{font-size:.9rem; min-width:1.2em; text-align:center}
 .mand-voet{border-top:1px solid var(--lijn); padding:1.2rem 1.4rem; background:var(--achtergrond)}
 .totaalregel{display:flex; justify-content:space-between; gap:1rem; margin-bottom:.4rem; font-size:.94rem}
 .totaalregel.groot{font-family:var(--kop); font-weight:700; font-size:1.1rem; border-top:1px solid var(--lijn); padding-top:.7rem; margin-top:.7rem}
 .totaalregel.voordeel{color:var(--groen); font-weight:600}
 .totaalregel[hidden]{display:none}
 [hidden]{display:none !important}
 #overlay{position:fixed; inset:0; background:rgba(16,42,67,.4); opacity:0; pointer-events:none; transition:opacity .28s; z-index:95}
 #overlay.aan{opacity:1; pointer-events:auto}
 .sluit{background:none; border:none; font-size:1.6rem; line-height:1; cursor:pointer; color:var(--inkt-zacht); padding:0 .2rem}
 .sluit:hover{color:var(--inkt)}
 #verzend-voortgang{margin-bottom:1rem; display:none}
 #verzend-voortgang.aan{display:block}
 .verzend-tekst{font-size:.8rem; color:var(--inkt-zacht); margin-bottom:.45rem}
 .verzend-tekst strong{color:var(--inkt); font-weight:600}
 .verzend-tekst.gehaald{color:var(--groen); font-weight:500}
 .verzend-baan{height:4px; background:var(--lijn); border-radius:100px; overflow:hidden}
 .verzend-vulling{height:100%; width:0; background:var(--groen-licht); transition:width .35s}
 .betaal-rij{display:flex; flex-wrap:wrap; gap:.35rem; justify-content:center; margin-top:.9rem}
 .betaal-chip{font-size:.65rem; font-weight:600; color:var(--inkt-zacht); border:1px solid var(--lijn); border-radius:3px; padding:.25rem .5rem; background:var(--wit)}
 #mand-upsell{border-top:1px solid var(--lijn); padding:1rem 1.4rem; display:none}
 #mand-upsell.aan{display:block}
 .upsell-label{font-size:.75rem; font-weight:600; color:var(--inkt-zacht); margin-bottom:.7rem}
 .upsell-item{display:flex; align-items:center; gap:.8rem}
 .upsell-foto{width:42px; height:42px; flex:none; background:var(--achtergrond); border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center}
 .upsell-foto img{width:100%; height:100%; object-fit:cover}
 .upsell-foto span{font-size:.5rem; color:var(--inkt-zacht)}
 .upsell-info{flex:1; display:flex; flex-direction:column}
 .upsell-info strong{font-size:.9rem; font-weight:500}
 .upsell-info span{font-family:var(--kop); font-weight:700; font-size:.9rem}
 .upsell-knop{font-family:var(--kop); font-weight:600; font-size:.82rem; border:1px solid var(--actie); background:transparent; color:var(--actie); padding:.5rem .8rem; cursor:pointer; border-radius:4px}
 .upsell-knop:hover{background:var(--actie); color:#fff}

 /* ── Bevestigingsvenster ── */
 #added-overlay{position:fixed; inset:0; background:rgba(16,42,67,.35); opacity:0; pointer-events:none; transition:opacity .22s; z-index:105}
 #added-overlay.aan{opacity:1; pointer-events:auto}
 #added-sheet{position:fixed; left:50%; bottom:0; transform:translate(-50%,110%); width:430px; max-width:94vw; background:var(--wit); border-radius:8px 8px 0 0; box-shadow:none; visibility:hidden; transition:transform .28s ease, visibility 0s linear .28s; z-index:110}
 #added-sheet.aan{transform:translate(-50%,0); visibility:visible; box-shadow:0 -14px 40px rgba(16,42,67,.2); transition:transform .28s ease, visibility 0s}
 .added-inner{padding:1.4rem 1.5rem 1.6rem}
 .added-titel{font-family:var(--kop); font-weight:600; font-size:.82rem; color:var(--groen); margin:0 0 1rem}
 .added-product{display:flex; align-items:center; gap:1rem; padding-bottom:1.1rem; margin-bottom:1.1rem; border-bottom:1px solid var(--lijn)}
 .added-foto{width:52px; height:52px; flex:none; background:var(--achtergrond); border-radius:4px; overflow:hidden; display:flex; align-items:center; justify-content:center}
 .added-foto img{width:100%; height:100%; object-fit:cover}
 .added-foto span{font-size:.55rem; color:var(--inkt-zacht)}
 .added-info{flex:1}
 .added-info strong{display:block; font-weight:500; font-size:.98rem}
 .added-prijs{font-family:var(--kop); font-weight:700; font-size:1.05rem}

 /* ── Formulieren ── */
 label{display:block; font-size:.82rem; font-weight:500; color:var(--inkt-zacht); margin:.9rem 0 .35rem}
 input,select,textarea{width:100%; font-family:var(--tekst); font-size:.95rem; padding:.75rem .85rem; border:1px solid var(--lijn); border-radius:4px; background:var(--wit); color:var(--inkt)}
 input:focus,select:focus,textarea:focus{outline:none; border-color:var(--actie); box-shadow:0 0 0 3px rgba(0,115,158,.15)}
 .rij2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
 .land-vast{margin:.9rem 0 0; line-height:1.5}
 .vinkje{display:flex; gap:.6rem; align-items:flex-start; margin-top:1rem}
 .vinkje input{width:auto; margin-top:.3rem}
 .vinkje label{margin:0; font-size:.92rem; color:var(--inkt); font-weight:400}
 .melding{margin-top:.7rem; font-size:.85rem; min-height:1.2em}
 .melding.ok{color:var(--groen)}
 .melding:empty{min-height:0; margin-top:0}
 .melding.fout{color:var(--rood)}
 fieldset{border:0; border-top:1px solid var(--lijn); padding:1.3rem 0 .4rem; margin:1.6rem 0 0; min-width:0}
 legend{padding:0 .6rem 0 0; font-family:var(--kop); font-weight:700; font-size:.95rem; color:var(--inkt)}
 .kolommen{display:grid; grid-template-columns:1.2fr .8fr; gap:3rem; align-items:start}
 .kader{background:var(--achtergrond); padding:1.5rem; border-radius:6px}
 .kader h3{font-family:var(--kop)}
 .stappen{font-size:.85rem; color:var(--inkt-zacht); margin-bottom:1.5rem}

 /* ── Prijsgarantie ── */
 .intro{font-size:1.08rem; line-height:1.65; max-width:40em}
 .rekenvoorbeeld{border:1px solid var(--lijn); border-radius:6px; padding:1.25rem 1.4rem; margin-top:.4rem}
 .rv-kop{margin:0; font-weight:600}
 .rv-formule{margin:.15rem 0 1rem; font-family:var(--kop); font-weight:700; font-size:1.1rem; color:var(--actie)}
 .rv-voorbeeld{border-top:1px solid var(--lijn); padding-top:.9rem; margin-top:.9rem}
 .rv-voorbeeld p{margin:0 0 .45rem; font-size:.95rem}
 .rv-label{font-size:.78rem !important; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--inkt-zacht)}
 .voorwaarden{padding-left:1.2rem}
 .voorwaarden li{margin-bottom:.55rem; line-height:1.55}
 .garantie-prijzen{margin:.6rem 0 0}
 .gp-rij{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; padding:.55rem 0; border-bottom:1px solid var(--lijn); font-size:.95rem}
 .gp-rij strong{font-family:var(--kop); font-size:1.05rem; color:var(--groen)}
 @media(min-width:821px){ .kader-plak{position:sticky; top:96px} }

 /* ── Nieuwsbrief ── */
 #footer-nieuwsbrief{background:var(--achtergrond); padding-block:2.5rem}
 #footer-nieuwsbrief h3{font-family:var(--kop); margin-bottom:.3em}
 #footer-nieuwsbrief p{margin:0 0 .9rem; font-size:.92rem; color:var(--inkt-zacht)}
 html.uit-nieuwsbrief #footer-nieuwsbrief{display:none}
 .nb-rij{display:flex; gap:.6rem; flex-wrap:wrap; max-width:460px}
 .nb-rij input{flex:1; min-width:200px}

 /* ── Voettekst ── */
 footer{border-top:1px solid var(--lijn); padding-block:2.5rem 1.8rem}
 .voet-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem}
 .voet-grid h3{font-family:var(--kop); font-size:.82rem; color:var(--inkt-zacht); margin-bottom:.8rem}
 .voet-grid a{display:block; color:var(--inkt); text-decoration:none; font-size:.92rem; padding:.2rem 0}
 .voet-grid a:hover{color:var(--actie)}
 .voet-logo{font-family:var(--kop); font-weight:700; font-size:1.1rem; margin-bottom:.6rem}
 .voet-logo span{color:var(--blauw)}
 .voet-onder{border-top:1px solid var(--lijn); margin-top:2rem; padding-top:1.2rem; font-size:.8rem; color:var(--inkt-zacht); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}

 /* ── Meldingen ── */
 #cookie-banner{position:fixed; left:0; right:0; bottom:0; background:var(--wit); border-top:1px solid var(--lijn); box-shadow:0 -6px 24px rgba(16,42,67,.08); padding-block:1rem; z-index:80; display:none}
 #cookie-banner.aan{display:block}
 .cookie-in{display:flex; gap:1.2rem; align-items:center; justify-content:space-between; flex-wrap:wrap}
 .cookie-in p{margin:0; font-size:.88rem; color:var(--inkt-zacht)}
 #popup-overlay{position:fixed; inset:0; background:rgba(16,42,67,.45); display:none; align-items:center; justify-content:center; z-index:90; padding:1rem}
 #popup-overlay.aan{display:flex}
 html.uit-popup #popup-overlay{display:none !important}
 .popup{background:var(--wit); max-width:420px; width:100%; padding:1.8rem; border-radius:8px}
 .popup h3{font-family:var(--kop)}

 @media(max-width:1000px){ .product-grid{gap:1.1rem} .product .inhoud{padding:1rem .9rem 1.1rem} }
 @media(max-width:820px){
  h1{font-size:1.9rem} .hero h1{font-size:1.7rem} h2{font-size:1.3rem}
  .hero{padding-block:2rem 1.8rem}
  .hero p{font-size:1.05rem}
  .hero .garantie-regel{font-size:.98rem}
  .sectie{padding-block:2.6rem}
  .pagina{padding-block:2rem 3rem}
  .kolommen{grid-template-columns:1fr; gap:2rem}
  .voet-grid{grid-template-columns:1fr 1fr; gap:1.8rem}
  .voet-grid > :first-child{grid-column:1 / -1}
  nav.hoofd{display:none; position:absolute; top:100%; left:0; right:0; background:var(--wit); border-bottom:1px solid var(--lijn); box-shadow:0 10px 24px rgba(16,42,67,.08); flex-direction:column; gap:0; padding:.25rem 24px .75rem; align-items:stretch}
  nav.hoofd.open{display:flex}
  nav.hoofd a{padding:.85rem 0; border-bottom:1px solid var(--lijn); font-size:1rem}
  nav.hoofd a:last-child{border-bottom:0}
  .menu-knop{display:flex}
  .kop-rij{gap:.5rem; padding-block:.8rem}
  .logo{font-size:1.1rem}
  .mand-knop{padding:.5rem .75rem; font-size:.8rem; min-height:40px}
  .menu-knop{width:40px; height:40px}
  .rij2{grid-template-columns:1fr; gap:0}
  .wrap{padding-inline:24px}
  #added-sheet{width:100%; max-width:100%; border-radius:0}
  .voet-onder{flex-direction:column; gap:.4rem}
 }
 /* Telefoon: één kaart per rij, foto links en alles ernaast. Twee smalle
    kaarten naast elkaar gaf piepkleine knoppen ("Geel + wit" op twee regels,
    "In winkelwagen" in 11px) en een losse derde kaart eronder. */
 @media(max-width:600px){
  .product-grid{grid-template-columns:1fr; gap:1rem}
  .product{flex-direction:row; align-items:stretch}
  .product .foto{flex:0 0 38%; aspect-ratio:auto; min-height:100%; background:var(--wit); border-right:1px solid var(--lijn)}
  /* contain: de hele grip in beeld (cover sneed hem aan de zijkant af) */
  .product .foto img{position:absolute; inset:0; object-fit:contain; padding:.3rem}
  .product .inhoud{padding:.95rem 1rem 1rem}
  .product h3{font-size:1.05rem; margin-bottom:.55rem}
  .kleurkeuze{gap:.3rem; margin-bottom:.7rem}
  .kleurkeuze button{flex:1 1 auto; white-space:nowrap; font-size:.8rem; padding:.35rem .45rem; min-height:36px}
  .prijsregel{flex-wrap:wrap; column-gap:.45rem; row-gap:0}
  .prijs{font-size:1.25rem}
  .voorraad{margin-bottom:.75rem}
  .product .knop{padding:.7rem .5rem}
  .productsectie{padding-top:1.75rem}
  .wrap{padding-inline:20px}
  nav.hoofd{padding-inline:20px}
  .nb-rij input{min-width:0; flex-basis:100%}
  .nb-rij .knop{width:100%}
 }
 @media(max-width:360px){
  .product .foto{flex-basis:34%}
  .kleurkeuze button{font-size:.74rem; white-space:normal; padding-inline:.2rem}
 }

 /* ── Kleine, generieke hulpklasjes ─────────────────────────────────────
    Vervangen inline style="…"-attributen, zodat er een strenge Content-
    Security-Policy zonder 'unsafe-inline' voor stijlen mogelijk is. */
 .svg-middenlijn{vertical-align:middle}
 .mt-05{margin-top:.5rem} .mt-06{margin-top:.6rem} .mt-09{margin-top:.9rem}
 .mt-1{margin-top:1rem} .mt-2{margin-top:2rem}
 /* .wrap-smal: zie bovenaan bij .wrap (leeskolom links uitgelijnd) */
 .tekst-klein{font-size:.92rem}
 .tekst-zacht{color:var(--inkt-zacht)}
 .ml-03{margin-left:.3rem}
 .zonder-marge{margin:0}
 .honeypot{position:absolute; left:-9999px}
 .verborgen-blok{display:none}
 .rij-tussen{display:flex; justify-content:space-between; align-items:flex-start}
 .melding-strak{padding:0 1.4rem; margin:0}

 /* ── Recensies ──
    Sterren: vijf grijze sterren met daarover vijf gele, afgesneden op de
    score. De breedte gaat via een klasse (s0 … s50, in halve sterren), omdat
    de beveiliging (CSP) geen style="…" in de pagina toelaat. */
 :root{ --ster:#E8A317; --ster-leeg:#D5DCE3 }
 .sterren{position:relative; display:inline-block; line-height:1; letter-spacing:.06em; color:var(--ster-leeg); white-space:nowrap}
 .sterren::before{content:"\2605\2605\2605\2605\2605"}
 .sterren::after{content:"\2605\2605\2605\2605\2605"; position:absolute; left:0; top:0; overflow:hidden; color:var(--ster); width:0}
 .sterren.s5::after{width:10%} .sterren.s10::after{width:20%} .sterren.s15::after{width:30%} .sterren.s20::after{width:40%}
 .sterren.s25::after{width:50%} .sterren.s30::after{width:60%} .sterren.s35::after{width:70%} .sterren.s40::after{width:80%}
 .sterren.s45::after{width:90%} .sterren.s50::after{width:100%}
 .sterren.groot{font-size:1.5rem}

 .recensie-kop{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem 1rem}
 .recensie-kop p{display:flex; align-items:center; gap:.5rem}
 .recensie-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem}
 .recensie{border:1px solid var(--lijn); border-radius:6px; padding:1.1rem 1.2rem; background:var(--wit)}
 .recensie-lijst .recensie{margin-bottom:1rem}
 .recensie .bovenregel{display:flex; justify-content:space-between; align-items:center; gap:.6rem; margin-bottom:.55rem}
 .recensie .datum{font-size:.78rem; color:var(--inkt-zacht)}
 .recensie .tekst{margin:0 0 .7rem; font-size:.95rem; line-height:1.55; white-space:pre-line}
 .recensie .wie{margin:0; font-size:.85rem; font-weight:600}
 .recensie .wie span{font-weight:400; color:var(--inkt-zacht)}
 .geverifieerd{display:inline-flex; align-items:center; gap:.25rem; font-size:.75rem; font-weight:600; color:var(--groen); margin-top:.2rem}
 .geverifieerd::before{content:"\2713"}
 .recensie .reactie{margin:.8rem 0 0; padding:.7rem .85rem; background:var(--achtergrond); border-radius:4px; font-size:.88rem; white-space:pre-line}
 .recensie .reactie strong{display:block; font-size:.78rem; color:var(--inkt-zacht); margin-bottom:.15rem}

 .recensie-kolommen{display:grid; grid-template-columns:280px 1fr; gap:2.5rem; align-items:start}
 .recensie-overzicht{position:sticky; top:96px}
 .score-groot{font-family:var(--kop); font-weight:700; font-size:2.6rem; line-height:1; margin:0 0 .4rem}
 .score-sub{margin:.45rem 0 1.1rem; font-size:.88rem; color:var(--inkt-zacht)}
 .verdeling{display:block; width:100%; background:none; border:0; padding:.25rem 0; cursor:pointer; font:inherit; color:var(--inkt); text-align:left}
 .verdeling span{display:inline-block; vertical-align:middle}
 .verdeling .v-label{width:3.6em; font-size:.85rem}
 .verdeling .v-baan{width:calc(100% - 7em); height:8px; background:var(--wit); border:1px solid var(--lijn); border-radius:100px; overflow:hidden; position:relative}
 .verdeling .v-vulling{display:block; height:100%; background:var(--ster)}
 .v-vulling.p0{width:0%} .v-vulling.p5{width:5%} .v-vulling.p10{width:10%} .v-vulling.p15{width:15%} .v-vulling.p20{width:20%} .v-vulling.p25{width:25%} .v-vulling.p30{width:30%} .v-vulling.p35{width:35%} .v-vulling.p40{width:40%} .v-vulling.p45{width:45%} .v-vulling.p50{width:50%} .v-vulling.p55{width:55%} .v-vulling.p60{width:60%} .v-vulling.p65{width:65%} .v-vulling.p70{width:70%} .v-vulling.p75{width:75%} .v-vulling.p80{width:80%} .v-vulling.p85{width:85%} .v-vulling.p90{width:90%} .v-vulling.p95{width:95%} .v-vulling.p100{width:100%}
 .verdeling .v-aantal{width:3em; text-align:right; font-size:.82rem; color:var(--inkt-zacht)}
 .verdeling:hover .v-label, .verdeling.aan .v-label{color:var(--actie); font-weight:600}
 .verdeling:disabled{cursor:default; opacity:.5}
 .filter-melding{margin-bottom:.8rem}
 .filter-melding button{background:none; border:0; padding:0; color:var(--actie); text-decoration:underline; cursor:pointer; font:inherit}
 .controle-zin{margin-top:2.5rem; padding-top:1.2rem; border-top:1px solid var(--lijn); max-width:720px}
 .controle-zin h3{font-size:1rem; margin-bottom:.3rem}

 /* Formulier: vijf grote sterren om te kiezen */
 .sterkeuze{border-top:0; padding-top:0; margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center}
 .sterknoppen{display:inline-flex; gap:.15rem}
 .sterknoppen button{background:none; border:0; padding:.1rem .15rem; font-size:2.4rem; line-height:1; color:var(--ster-leeg); cursor:pointer; transition:color .1s, transform .1s}
 .sterknoppen button.aan{color:var(--ster)}
 .sterknoppen button:hover{transform:scale(1.08)}
 .sterlabel{margin-left:.6rem; font-size:.92rem; font-weight:600}
 /* Recensieblok sluit direct aan op de vragen eronder: niet twee keer witruimte */
 .home-recensies{padding-bottom:0}

 @media(max-width:820px){
  .recensie-grid{grid-template-columns:1fr; gap:.9rem}
  .recensie-kolommen{grid-template-columns:1fr; gap:1.5rem}
  .recensie-overzicht{position:static}
 }

 /* Stappen op de pagina Welke grip kies je? */
 .stappenlijst{padding-left:1.3rem} .stappenlijst li{margin-bottom:.45rem; line-height:1.6}