/* Oliebollen Brigade — huisstijl
   Twee letters: Bowlby One voor de koppen en het logo, Courier Prime (typemachine) voor alle tekst.
   Kleuren: rood, geel, blauw, wit en zwart. Grote vlakken, echte foto's van het product, gewone knoppen.
   Lettertypes staan op onze eigen server (geen verbinding met Google). Licentie: SIL OFL, zie assets/fonts. */
@font-face{font-family:"Bowlby One";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/bowlby-one-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Courier Prime";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/courier-prime-latin-700-normal.woff2) format("woff2")}

:root{
  --rood:#E3241B;
  --geel:#FFD400;
  --blauw:#1F4FD8;
  --zwart:#111111;
  --wit:#FFFFFF;
  --grijs:#4D4D4D;
  --fout:#C0170E;
  --disp:"Bowlby One","Arial Black",Impact,sans-serif;
  --type:"Courier Prime","Courier New",Courier,monospace;
  --pad:clamp(16px,4vw,56px);
  --sec:clamp(64px,9vw,128px);
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{background:var(--wit);color:var(--zwart);font:400 18px/1.5 var(--type);-webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-x:clip}
body.locked{overflow:hidden}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0}
a{color:inherit}
button{font-family:inherit;color:inherit}
img{max-width:100%}
:focus-visible{outline:3px solid var(--zwart);outline-offset:3px}
.wrap{padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px;top:0;background:var(--zwart);color:var(--wit);padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font:400 14px/1.4 var(--type);color:var(--grijs)}
.d{font:400 clamp(40px,6vw,84px)/.92 var(--disp);text-transform:uppercase;letter-spacing:-.01em;text-align:center;text-wrap:balance}
.shop .d,.zo .d,.vragen .d,.d-sm{color:var(--rood)}
.tag{display:inline-block;align-self:flex-start;background:var(--geel);color:var(--zwart);font:700 15px/1 var(--type);padding:8px 12px}

/* knoppen: geel met typemachineletters, zoals een etiket */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:0;padding:15px 24px;font:700 19px/1.1 var(--type);background:var(--geel);color:var(--zwart);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
.btn:hover{background:var(--zwart);color:var(--geel)}
.btn.ink{background:var(--zwart);color:var(--geel)}
.btn.ink:hover{background:var(--wit);color:var(--zwart)}
.btn.wit,.btn.alt{background:var(--wit);color:var(--zwart);box-shadow:inset 0 0 0 2px var(--zwart)}
.btn.wit:hover,.btn.alt:hover{background:var(--zwart);color:var(--wit)}
.btn.sm{padding:11px 16px;font-size:16px}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:var(--geel);color:var(--zwart)}
.btn.added,.btn.added:hover{background:var(--zwart);color:var(--geel)}
.btn.busy{opacity:.7;cursor:progress}
.linkbtn{background:none;border:0;padding:4px 0;font:700 16px var(--type);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* kop: alles rood, net als de opening */
.kop{background:var(--rood);color:var(--wit)}
.topbar{text-align:center;font:700 15px/1.3 var(--type);padding:10px 16px 0}
header.site{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:32px;padding:14px var(--pad) 10px}
.logo{display:block;line-height:0}
.logo img{height:46px;width:auto}
header.site nav{display:flex;gap:28px;font:700 18px/1 var(--type)}
header.site nav a{text-decoration:none}
header.site nav a:hover,.cartbtn:hover{text-decoration:underline;text-underline-offset:5px}
header.site nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.h-acts{display:flex;align-items:center;gap:18px;justify-self:end;grid-column:-2}
.menubtn{display:none;background:none;border:2px solid var(--wit);color:var(--wit);font:700 16px/1 var(--type);padding:9px 12px;cursor:pointer}
.menubtn:hover{background:var(--wit);color:var(--rood)}
.cartbtn{background:none;border:0;padding:8px 0;cursor:pointer;color:var(--wit);font:700 18px/1 var(--type);justify-self:end}
.cartbtn .count::before{content:"("}
.cartbtn .count::after{content:")"}
.cartbtn.bump .count{animation:bump .5s ease}
@keyframes bump{40%{color:var(--geel)}}
.kop :focus-visible,.hero :focus-visible,.stroom :focus-visible,footer.site :focus-visible{outline-color:var(--wit)}

/* opening: rood, de oliebollen links, de kop rechts */
.hero{background:var(--rood);color:var(--wit);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(24px,3vw,48px) var(--pad) clamp(56px,7vw,104px)}
.hero-pic img{display:block;width:100%;height:auto}
.hero-txt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(20px,2.2vw,30px);min-width:0}
.fit{container-type:inline-size;width:100%}
.hero h1,.stroom h2{font:400 10px/1 var(--disp);text-transform:uppercase}
.hero h1 span,.stroom h2 span{line-height:.86;letter-spacing:-.01em}
/* elke regel even breed als het vlak (gemeten in Bowlby One) */
.hero h1 .w1,.hero h1 .w2{font-size:14.05cqi}
.hero h1 .w3,.hero h1 .w4{font-size:12.54cqi}
.bm{display:none}
.hero-txt p{font:700 clamp(18px,1.45vw,21px)/1.45 var(--type);max-width:32em}

/* rekenhulp: één zin op geel */
.reken{background:var(--geel);text-align:center;padding:var(--sec) var(--pad)}
.zin{font:700 clamp(22px,2.4vw,32px)/1.9 var(--type);max-width:28em;margin:clamp(24px,3vw,40px) auto 0}
.stepper{display:inline-flex;vertical-align:middle;border:2px solid var(--zwart);background:var(--wit);height:1.75em;margin:0 .1em}
.stepper button{width:1.5em;border:0;background:var(--wit);font:400 .9em/1 var(--disp);cursor:pointer;padding:0}
.stepper button:hover{background:var(--zwart);color:var(--geel)}
.stepper input{width:2.6em;border:0;border-inline:2px solid var(--zwart);text-align:center;font:400 .95em/1 var(--disp);color:var(--zwart);background:var(--wit);padding:0;-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;background:#FFF7C7}
.per{display:inline-flex;vertical-align:middle;gap:.2em;margin:0 .1em}
.per label{position:relative;cursor:pointer}
.per span{display:grid;place-items:center;width:1.6em;height:1.6em;border:2px solid var(--zwart);background:var(--wit);font:400 .85em/1 var(--disp)}
.per label:hover span{background:#FFF7C7}
.per label:has(input:checked) span{background:var(--zwart);color:var(--geel)}
.per input,.seg input,.up input{position:absolute;opacity:0;pointer-events:none}
.per label:has(input:focus-visible),.seg label:has(input:focus-visible),.up:has(input:focus-visible){outline:3px solid var(--zwart);outline-offset:2px}
.hint{font:400 17px/1.4 var(--type);margin-top:6px}
.advies{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:34em;margin:clamp(28px,3vw,44px) auto 0}
.advies p{font:700 clamp(18px,1.5vw,21px)/1.5 var(--type)}
.advies .prijs{font:700 17px/1.3 var(--type)}
#calcPrice{display:block;font:400 clamp(52px,6.4vw,88px)/1 var(--disp);letter-spacing:-.01em;margin-bottom:4px}
.up{display:inline-flex;align-items:center;gap:12px;font:700 18px/1.3 var(--type);cursor:pointer}
.up .box{width:26px;height:26px;flex:none;border:2px solid var(--zwart);background:var(--wit)}
.up:has(input:checked) .box{background:var(--zwart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10.5l4 4 8-9' fill='none' stroke='%23FFD400' stroke-width='3'/%3E%3C/svg%3E") center/18px no-repeat}
.up em{font-style:normal;white-space:nowrap}
.up > span:last-child{text-align:left}

/* winkel: pakketten met foto, losse dozen als prijslijst */
.shop{padding:var(--sec) var(--pad)}
.intro{font:700 clamp(18px,1.45vw,21px)/1.5 var(--type);text-align:center;max-width:34em;margin:clamp(20px,2.4vw,28px) auto 0}
.packs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.6vw,40px);margin-top:clamp(40px,5vw,72px)}
.pack{display:flex;flex-direction:column;min-width:0;background:var(--k-bg);color:var(--k-t)}
.pack.geel{--k-bg:var(--geel);--k-t:var(--zwart);--k-zacht:#3D3D3D;--k-chip:rgba(255,255,255,.65);--k-chip-hover:var(--wit);--k-on:var(--zwart);--k-on-t:var(--wit);--k-knop:var(--zwart);--k-knop-t:var(--geel)}
.pack.rood,.pack.blauw{--k-t:var(--wit);--k-zacht:rgba(255,255,255,.88);--k-chip:rgba(255,255,255,.2);--k-chip-hover:rgba(255,255,255,.34);--k-on:var(--wit);--k-on-t:var(--zwart);--k-knop:var(--geel);--k-knop-t:var(--zwart)}
.pack.rood{--k-bg:var(--rood)}
.pack.blauw{--k-bg:var(--blauw)}
.pack.rood :focus-visible,.pack.blauw :focus-visible{outline-color:var(--wit)}
.tile{position:relative;aspect-ratio:1/1;overflow:hidden;background:#2A2018}
.tile img{display:block;width:100%;height:100%;object-fit:cover}
.pack-body{display:flex;flex-direction:column;gap:6px;padding:20px 22px 22px;flex:1}
.pack h3{font:400 clamp(24px,2.2vw,30px)/1 var(--disp);text-transform:uppercase}
.pack .who{font:700 17px/1.4 var(--type)}
.pack .comp{font:400 15px/1.4 var(--type);color:var(--k-zacht)}
.seg{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 16px}
.seg label{position:relative;cursor:pointer}
.seg span{display:block;padding:8px 11px;background:var(--k-chip);font:700 15px/1 var(--type)}
.seg label:hover span{background:var(--k-chip-hover)}
.seg label:has(input:checked) span{background:var(--k-on);color:var(--k-on-t)}
.buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-top:auto;padding-top:14px;border-top:2px solid currentColor}
.price{font:400 15px/1 var(--type);white-space:nowrap}
.pv{font:400 32px/1 var(--disp);margin-right:6px}
.pack .add{background:var(--k-knop);color:var(--k-knop-t)}
.pack .add:hover,.pack .add.added{background:var(--wit);color:var(--zwart)}
.dozen{max-width:960px;margin:clamp(64px,8vw,112px) auto 0}
.d-sm{font:400 clamp(32px,3.6vw,48px)/1 var(--disp);text-transform:uppercase;text-align:center;margin-bottom:24px}
.boxes{list-style:none;border-top:2px solid var(--zwart)}
.item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"main price add" "bag bag bag";align-items:center;gap:0 28px;padding:18px 0;border-bottom:2px solid var(--zwart)}
.i-main{grid-area:main;min-width:0}
.i-main b{display:block;font:400 clamp(20px,2vw,26px)/1.1 var(--disp);text-transform:uppercase}
.i-main span{display:block;font:400 16px/1.4 var(--type);margin-top:4px}
.i-price{grid-area:price;font:400 26px/1 var(--disp);white-space:nowrap;text-align:right}
.i-price small{font:400 14px/1 var(--type)}
.item .add{grid-area:add}
.item.twee{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main opts" "bag bag"}
.i-opts{grid-area:opts;display:grid;grid-template-columns:auto auto;align-items:center;gap:10px 28px}
.i-opts .i-price,.i-opts .add{grid-area:auto}
.inbag{grid-area:bag;font:700 15px/1.2 var(--type);color:var(--rood);margin-top:8px}
.kleintjes{font:400 16px/1.5 var(--type);text-align:center;margin-top:20px}

/* stroom: blauw vlak, kop over de hele breedte */
.stroom{background:var(--blauw);color:var(--wit);text-align:center;padding:var(--sec) var(--pad)}
.stroom h2 .s1,.stroom h2 .s2{font-size:8.13cqi}
.stroom h2 .s3,.stroom h2 .s4{font-size:8.72cqi}
.stroom p{font:700 clamp(18px,1.45vw,21px)/1.5 var(--type);max-width:36em;margin:clamp(28px,3vw,44px) auto 0}

/* zo gaat het */
.zo{text-align:center;padding:var(--sec) var(--pad)}
.zo-txt{max-width:36em;margin:clamp(24px,3vw,36px) auto 0;display:flex;flex-direction:column;gap:18px;font:700 clamp(18px,1.45vw,21px)/1.55 var(--type)}
.seizoen{display:flex;justify-content:center;flex-wrap:wrap;gap:24px clamp(32px,7vw,120px);margin-top:clamp(48px,6vw,80px)}
.seizoen div{display:flex;flex-direction:column;align-items:center}
.seizoen b{font:400 clamp(36px,5.4vw,76px)/1 var(--disp);text-transform:uppercase;color:var(--rood);white-space:nowrap}
.seizoen span{font:700 18px/1.3 var(--type);margin-top:10px}
.seizoen-noot{font:400 16px/1.5 var(--type);margin-top:22px}

/* foto over de hele breedte */
.band{background:#3A2A20}
.band img{display:block;width:100%;height:clamp(260px,42vw,640px);object-fit:cover;object-position:62% 50%}

/* vragen */
.vragen{padding:var(--sec) var(--pad)}
.faq{max-width:880px;margin:clamp(28px,3vw,44px) auto 0;border-top:2px solid var(--zwart)}
.faq details{border-bottom:2px solid var(--zwart)}
.faq summary{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:18px 0;font:700 clamp(18px,1.6vw,21px)/1.35 var(--type);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--disp);flex:none}
.faq details[open] summary::after{content:"–"}
.faq summary:hover{text-decoration:underline;text-underline-offset:4px}
.faq details p{padding:0 0 20px;max-width:62ch;font:400 17px/1.55 var(--type)}

/* voet: het woordmerk over de hele breedte */
footer.site{background:var(--rood);color:var(--wit);padding:clamp(32px,5vw,72px) var(--pad) 28px}
.f-word{display:block;width:100%;height:auto}
.f-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 28px;margin-top:clamp(28px,3.4vw,48px);font:700 15px/1.4 var(--type)}
.f-meta .links{display:flex;flex-wrap:wrap;gap:4px 18px}
.f-geg{flex-basis:100%}
.f-geg .fgeg{display:block;width:370px;max-width:100%;height:auto;opacity:.95}
.geg{margin:18px 0}
.ct-geg{max-width:720px;margin:28px auto 0}
.geg .fgeg,.ct-geg .fgeg{display:block;max-width:100%;height:auto}
.f-meta a{color:var(--wit);text-underline-offset:3px}
body.hasbar footer.site{padding-bottom:110px}

/* zwevende balk met de mand */
.floatbar{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(560px,calc(100% - 32px));display:flex;align-items:center;gap:12px;background:var(--zwart);color:var(--wit);padding:7px 7px 7px 18px}
.floatbar .fb-info{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 15px/1.2 var(--type)}

/* lade: winkelmand en afrekenen */
.scrim{position:fixed;inset:0;z-index:40;background:rgba(17,17,17,.55);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
.scrim.open{opacity:1;visibility:visible;transition:opacity .2s}
.drawer{position:fixed;z-index:41;top:0;right:0;bottom:0;width:min(500px,100%);background:var(--wit);display:flex;flex-direction:column;transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
.drawer.open{transform:none;visibility:visible;transition:transform .25s ease}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 16px 10px 22px}
.d-head h2{font:400 30px/1 var(--disp);text-transform:uppercase;color:var(--rood)}
.x{width:44px;height:44px;flex:none;border:0;background:#F1F1F1;color:var(--zwart);font:400 28px/1 var(--type);cursor:pointer;display:grid;place-items:center;padding:0}
.x:hover{background:var(--geel)}
.progress{display:flex;gap:22px;margin:0;padding:0 22px;list-style:none;border-bottom:1px solid #E3E3E3}
.progress li{padding:10px 0 9px;font:700 15px/1.2 var(--type);color:#A0A0A0;border-bottom:3px solid transparent;margin-bottom:-1px}
.progress li.done{color:var(--zwart)}
.progress li.now{color:var(--zwart);border-bottom-color:var(--rood)}
.d-body{flex:1;overflow-y:auto;padding:8px 22px 22px;overscroll-behavior:contain}
.panel{display:flex;flex-direction:column;gap:18px}
#st1,#st2{padding-top:14px}
#cartList{display:flex;flex-direction:column}
#cartList .line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:start;padding:18px 0;border-bottom:1px solid #E6E6E6}
.l-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.l-main b{font:700 18px/1.25 var(--type)}
.l-sub{font:400 15px/1.35 var(--type);color:var(--grijs)}
.l-price{font:700 18px/1.25 var(--type);text-align:right;white-space:nowrap}
.l-price small{display:block;font:400 13px/1.4 var(--type);color:var(--grijs)}
.l-act{display:flex;align-items:center;justify-content:space-between;gap:12px;grid-column:1/-1}
.qty{display:inline-flex;align-items:stretch;border:1.5px solid #CFCFCF;height:36px}
.qty button{width:36px;border:0;background:var(--wit);font:700 18px/1 var(--type);cursor:pointer;padding:0}
.qty button:hover{background:#FFF6C2}
.qty span{display:grid;place-items:center;min-width:34px;font:700 16px/1 var(--type)}
.l-rm{background:none;border:0;padding:6px 0;font:400 14px/1 var(--type);color:var(--grijs);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.l-rm:hover{color:var(--rood)}
.empty{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:24px 0}
.empty b{font:700 20px/1.25 var(--type)}
.empty p{color:var(--grijs)}
.paynote{background:var(--geel);padding:14px 16px;font:400 15px/1.45 var(--type);margin-top:10px}
.paynote b{font-weight:700}
.upsell-card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;background:#FFF6C2;padding:16px 18px}
.upsell-card p{font:400 15px/1.45 var(--type)}
.upsell-card b{font-weight:700}
.minbox{display:flex;flex-direction:column;gap:8px;font:400 15px/1.4 var(--type)}
.minbar{height:8px;background:#EEEEEE}
.minbar i{display:block;height:100%;background:var(--rood);transition:width .3s}
.form-grid{display:flex;flex-direction:column;gap:14px}
.row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field label,.flabel{font:700 16px/1.3 var(--type)}
.field label small{font-weight:400}
.field > small{font:400 14px/1.4 var(--type);color:var(--grijs)}
input[type=text],input[type=email],input[type=tel],input[type=date],textarea{font:400 17px var(--type);color:var(--zwart);background:var(--wit);border:1.5px solid #BDBDBD;border-radius:0;padding:11px 12px;width:100%;min-width:0}
input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=date]:focus,textarea:focus{outline:none;border-color:var(--zwart);box-shadow:0 0 0 3px var(--geel)}
textarea{min-height:76px;resize:vertical}
.pick{display:grid;gap:8px}
.pick.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pick label{position:relative;display:flex;flex-direction:column;gap:2px;border:1.5px solid #CFCFCF;padding:10px 12px;cursor:pointer;background:var(--wit)}
.pick label:hover{background:#FFF7C7}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick label b{font:700 16px/1.3 var(--type)}
.pick label span{font:400 14px/1.35 var(--type)}
.pick label:has(input:checked){background:var(--geel);border-color:var(--geel)}
.pick label:has(input:focus-visible){outline:3px solid var(--zwart);outline-offset:2px}
.pick.three label{text-align:center;font:700 16px/1.3 var(--type)}
.pick label.full{color:#9A9A9A;cursor:not-allowed;text-decoration:line-through;background:#F1F1F1}
.pick label.full span{text-decoration:none}
.pick label.off{opacity:.5;cursor:not-allowed}
.pick .left{font:700 13px/1.2 var(--type);color:var(--rood)}
.pick .hint{grid-column:1/-1;margin:0;padding:12px 14px;border:1.5px dashed #CFCFCF;font:400 15px/1.4 var(--type);color:var(--grijs)}
.form-grid .row.keep{grid-template-columns:repeat(2,minmax(0,1fr))}
.addr{margin:-4px 0 0;font:700 15px/1.4 var(--type)}
.addr.ok::before{content:"✓ "}
.addr.warn{color:var(--fout)}
.addr a{color:inherit}
.slotnote{margin:4px 0 0;font:400 15px/1.4 var(--type)}
.slotnote .linkbtn{font-size:15px;padding:0 0 0 4px}
.err{color:var(--fout);font:700 16px/1.4 var(--type)}
.recap{background:#F5F5F5;padding:12px 14px;font:400 15px/1.45 var(--type);display:flex;flex-direction:column;gap:4px}
.recap b{font-weight:700}
.akkoord{font:400 14px/1.45 var(--type);color:var(--grijs)}
.akkoord a{color:var(--zwart);text-underline-offset:3px}
.d-foot{border-top:1px solid #E3E3E3;padding:14px 22px 18px;background:var(--wit);display:flex;flex-direction:column;gap:12px}
.tot{display:grid;grid-template-columns:1fr auto;gap:0 12px;font:400 14px/1.6 var(--type);color:var(--grijs)}
.tot span:nth-child(even){text-align:right}
.tot .t-big{font:700 20px/1.5 var(--type);color:var(--zwart);margin-top:4px}
.d-actions{display:flex;gap:10px;align-items:center}
.d-actions .btn{flex:1}
.d-actions .back{flex:none}
.secure{font:400 13px/1.3 var(--type);display:flex;align-items:center;gap:6px}

/* bezorggebied op de homepage */
.gebied{background:var(--geel);text-align:center;padding:var(--sec) var(--pad);display:flex;flex-direction:column;align-items:center;gap:clamp(24px,3vw,36px)}
.gebied-txt{font:700 clamp(18px,1.45vw,21px)/1.5 var(--type);max-width:34em}
.plaatsen{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;max-width:52em;font:700 clamp(18px,1.6vw,22px)/1.4 var(--type)}
.plaatsen span{display:none}
.plaatsen a{text-underline-offset:4px;text-decoration-thickness:2px}
.plaatsen a:hover{background:var(--zwart);color:var(--geel);text-decoration:none}

/* losse pagina's: bezorggebied, plaatsen en de gids */
.crumbs{background:var(--rood);color:var(--wit);padding:14px var(--pad) 0;font:400 15px/1.4 var(--type)}
.crumbs a{color:var(--wit);text-underline-offset:3px}
.crumbs span[aria-hidden]{margin:0 .25em}
.page-hero{background:var(--rood);color:var(--wit);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(24px,4vw,72px);padding:clamp(24px,3vw,40px) var(--pad) clamp(56px,7vw,96px)}
.ph-txt{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2vw,26px);min-width:0}
.page-hero h1{font:400 clamp(40px,5.4vw,84px)/.92 var(--disp);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.ph-txt p{font:700 clamp(18px,1.45vw,21px)/1.5 var(--type);max-width:32em}
.ph-pic img{display:block;width:100%;height:auto}
.page-hero :focus-visible,.crumbs :focus-visible{outline-color:var(--wit)}
.notice{background:var(--geel);padding:16px var(--pad);font:700 17px/1.4 var(--type);text-align:center}
.ct{padding:var(--sec) var(--pad)}
.ct .d{color:var(--rood)}
.ct.geel-vlak{background:var(--geel)}
.ct.geel-vlak .d{color:var(--zwart)}
.ct-txt{max-width:38em;margin:clamp(24px,3vw,40px) auto 0;display:flex;flex-direction:column;gap:18px;font:400 clamp(17px,1.3vw,19px)/1.6 var(--type)}
.ct-txt b{font-weight:700}
.ct-intro{font:700 clamp(18px,1.45vw,21px)/1.5 var(--type);text-align:center;max-width:34em;margin:clamp(20px,2.4vw,28px) auto 0}
.ct-cta{text-align:center;margin-top:clamp(28px,3vw,40px)}
.ct.vragen + .ct.buurt{padding-top:0}
.feiten{max-width:880px;margin:clamp(24px,3vw,40px) auto 0;border-top:2px solid var(--zwart)}
.feiten div{display:grid;grid-template-columns:minmax(140px,210px) 1fr;gap:4px 28px;padding:16px 0;border-bottom:2px solid var(--zwart)}
.feiten dt{font:700 clamp(16px,1.25vw,18px)/1.5 var(--type)}
.feiten dd{margin:0;font:400 clamp(17px,1.3vw,19px)/1.55 var(--type)}
.bron{max-width:880px;margin:10px auto 0;font:400 13px/1.4 var(--type);opacity:.7}
.buurt .plaatsen small{font:400 .72em/1 var(--type);margin-left:6px;white-space:nowrap}
.buurt .plaatsen{margin:0 auto}
.buurt .d-sm{margin-bottom:20px}
.prijslijst{list-style:none;max-width:880px;margin:clamp(28px,3vw,44px) auto 0;border-top:2px solid var(--zwart)}
.prijslijst li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"naam prijs" "info prijs";align-items:center;gap:2px 24px;padding:16px 0;border-bottom:2px solid var(--zwart)}
.prijslijst b{grid-area:naam;font:400 clamp(20px,2vw,26px)/1.1 var(--disp);text-transform:uppercase}
.prijslijst span{grid-area:info;font:400 16px/1.4 var(--type)}
.prijslijst em{grid-area:prijs;font:400 clamp(24px,2.4vw,30px)/1 var(--disp);font-style:normal;white-space:nowrap}
.provs{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:clamp(36px,4vw,56px) clamp(24px,3vw,48px);max-width:1200px;margin:clamp(40px,5vw,64px) auto 0}
.prov h3{font:400 clamp(24px,2.2vw,30px)/1 var(--disp);text-transform:uppercase;color:var(--rood);padding-bottom:10px;border-bottom:2px solid var(--zwart)}
.prov ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-top:14px}
.prov a{font:700 18px/1.3 var(--type);text-underline-offset:3px}
.prov li span{display:block;font:400 15px/1.4 var(--type);color:var(--grijs)}
.tw{overflow-x:auto;max-width:1000px;margin:clamp(28px,3vw,44px) auto 0}
.gids-tabel{width:100%;border-collapse:collapse;font:400 16px/1.4 var(--type)}
.gids-tabel th{text-align:left;font-weight:700;padding:12px 16px 12px 0;border-bottom:2px solid var(--zwart);white-space:nowrap}
.gids-tabel td{padding:12px 16px 12px 0;border-bottom:1px solid var(--zwart);vertical-align:top}
.gids-tabel td:first-child{font-weight:700;white-space:nowrap}
.gids-tabel td span{white-space:nowrap}
.gids-tabel th:nth-child(n+3),.gids-tabel td:nth-child(n+3){text-align:right;white-space:nowrap;padding-right:0;padding-left:16px}
.ct:not(.geel-vlak) + .ct:not(.geel-vlak){padding-top:0}

/* stappen, pakketkaarten op de homepage, contactgegevens */
.steps{list-style:none;counter-reset:stap;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px);max-width:1100px;margin:clamp(28px,3vw,44px) auto 0;text-align:left}
.steps.lang{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px}
.steps li{counter-increment:stap;display:flex;flex-direction:column;gap:8px;border-top:2px solid var(--zwart);padding-top:16px}
.steps li::before{content:counter(stap);font:400 clamp(40px,4vw,56px)/1 var(--disp);color:var(--rood)}
.steps b{font:400 clamp(22px,2vw,28px)/1.1 var(--disp);text-transform:uppercase}
.steps span{font:400 17px/1.55 var(--type)}
.meer{margin-top:clamp(24px,3vw,36px);font:700 18px/1.4 var(--type)}
.meer a{text-underline-offset:4px;text-decoration-thickness:2px}
.pack.kaart{text-decoration:none;color:var(--k-t)}
.pack.kaart:hover .add{background:var(--wit);color:var(--zwart)}
.pack.kaart:focus-visible{outline-offset:4px}
.shop .kleintjes a{text-underline-offset:3px}
.gegevens{list-style:none;max-width:720px;margin:0 auto;border-top:2px solid var(--zwart)}
.gegevens li{display:grid;grid-template-columns:140px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:2px solid var(--zwart);font:400 18px/1.4 var(--type)}
.gegevens b{font-weight:700}
.page-hero.kort{grid-template-columns:minmax(0,1fr);padding-bottom:clamp(40px,5vw,64px)}
.page-hero.kort .ph-txt{max-width:48em}
.ph-txt p a{color:var(--wit);text-underline-offset:3px}

/* cookiekeuze */
.cookies{position:fixed;z-index:35;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:min(440px,calc(100% - 32px));background:var(--zwart);color:var(--wit);padding:18px 18px 16px;display:flex;flex-direction:column;gap:10px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.cookies[hidden]{display:none!important}
.ck-title{font:400 22px/1.1 var(--disp);text-transform:uppercase;color:var(--geel)}
.cookies p{font:400 15px/1.45 var(--type)}
.cookies a{color:var(--wit);text-underline-offset:3px}
.ck-acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.ck-acts .btn{width:100%}
.cookies :focus-visible{outline-color:var(--geel)}
.f-meta .linkbtn{color:var(--wit);font:700 15px/1.4 var(--type);padding:0;text-underline-offset:3px}

/* voorwaarden en privacy */
.juridisch{max-width:46em}
.juridisch h2{font:400 clamp(22px,2vw,28px)/1.15 var(--disp);text-transform:uppercase;margin-top:18px}
.juridisch ul{padding-left:1.2em;display:flex;flex-direction:column;gap:8px}
.juridisch a{text-underline-offset:3px}
.juridisch .linkbtn{font:700 inherit var(--type);font-size:inherit;padding:0}
.versie{font:400 15px/1.4 var(--type);color:var(--grijs)}
.artikel{list-style:none;display:flex;flex-direction:column;gap:10px}
.artikel li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px}
.artikel li > span{font-weight:700}

/* bedankpagina */
.thanks{padding-block:clamp(40px,6vw,96px);display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:start}
.thanks h1{font:400 clamp(44px,6.4vw,92px)/.9 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.state{display:flex;flex-direction:column;gap:22px;min-width:0}
.state .lede{font:700 clamp(18px,1.45vw,21px)/1.5 var(--type);max-width:34em}
.card-sum{border:2px solid var(--zwart);padding:20px 22px;display:flex;flex-direction:column;gap:12px;min-width:0;font-size:16px}
.card-sum h2{font:400 26px/1 var(--disp);text-transform:uppercase}
.rows{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 14px;font:400 16px/1.4 var(--type)}
.rows .sum{font:400 24px/1.2 var(--disp);border-top:2px solid var(--zwart);padding-top:10px}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.spin{width:48px;height:48px;border:5px solid #E2E2E2;border-top-color:var(--rood);animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* menu: onder 1100 px klapt het menu in */
@media (max-width:1100px){
  header.site{grid-template-columns:auto 1fr;gap:16px}
  header.site nav{display:none}
  .menubtn{display:inline-flex}
  .kop.open header.site nav{display:flex;flex-direction:column;gap:0;grid-column:1/-1;grid-row:2;padding:6px 0 8px;border-top:2px solid rgba(255,255,255,.4)}
  .kop.open header.site nav a{padding:13px 0;font-size:20px;border-bottom:1px solid rgba(255,255,255,.3)}
}
/* tablet */
@media (max-width:1024px){
  .packs{gap:16px}
  .seg span{padding:6px 8px;font-size:14px}
  .buy{flex-wrap:wrap}
}
@media (max-width:860px){
  header.site{grid-template-columns:auto 1fr;gap:16px}
  header.site nav{display:none}
  .logo img{height:38px}
  .hero{grid-template-columns:minmax(0,1fr)}
  .hero-pic{order:2;max-width:520px;width:100%;justify-self:center}
  .packs{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto;row-gap:48px}
  .tile{aspect-ratio:4/3}
  .thanks{grid-template-columns:minmax(0,1fr)}
  .page-hero{grid-template-columns:minmax(0,1fr)}
  .ph-pic{max-width:520px;width:100%;justify-self:center}
}
/* telefoon */
@media (max-width:640px){
  body{font-size:17px}
  .topbar{font-size:13px}
  .bm{display:inline}
  .bd{display:none}
  .hero h1 .w1{font-size:22.14cqi}
  .hero h1 .w2,.hero h1 .w3{font-size:18.08cqi}
  .hero h1 .w4{font-size:21.25cqi}
  .stroom h2 .s1,.stroom h2 .s3{font-size:18.07cqi}
  .stroom h2 .s2{font-size:15.57cqi}
  .stroom h2 .s4{font-size:17.9cqi}
  .zin{line-height:2.1}
  .stepper{height:44px}
  .stepper button{width:40px}
  .stepper input{width:64px}
  .per span{width:40px;height:40px}
  .item{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main main" "price add" "bag bag";gap:12px 16px}
  .item.twee{grid-template-columns:minmax(0,1fr);grid-template-areas:"main" "opts" "bag"}
  .i-opts{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .i-price{text-align:left}
  .seizoen{flex-direction:column;align-items:center}
  .f-meta{flex-direction:column}
  .row{grid-template-columns:minmax(0,1fr)}
  .steps,.steps.lang{grid-template-columns:minmax(0,1fr)}
  .gegevens li{grid-template-columns:minmax(0,1fr);gap:2px}
  .page-hero h1{font-size:clamp(34px,10vw,52px)}
  .ph-pic{max-width:330px}
  .gids-tabel thead{display:none}
  .gids-tabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--zwart)}
  .gids-tabel tr:first-child{border-top:2px solid var(--zwart)}
  .gids-tabel td{border:0;padding:0!important}
  .gids-tabel td:nth-child(2){grid-row:2;grid-column:1}
  .gids-tabel td:nth-child(3){grid-row:1;grid-column:2;font-weight:700}
  .gids-tabel td:nth-child(4){grid-row:2;grid-column:2}
  .gids-tabel td:nth-child(4)::after{content:" p.p."}
  .plaatsen{gap:6px 16px}
  .feiten div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:400px){
  .pick.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .d-actions .btn{font-size:16px;padding:13px 14px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}