/*
 * De Fruitboertjes - alle opmaak van de hele site.
 *
 * Een pagina heeft dus nooit een eigen <style>-blok of style="..." in de HTML:
 * wat je hier verandert, verandert overal. include.header.php laadt dit bestand,
 * en elke pagina laadt die header.
 *
 * Volgorde: tokens - basis - onderdelen (van boven naar beneden op de pagina) -
 * subpagina - popups - responsive.
 */

/* ---- tokens ---------------------------------------------------- */
:root{
  --forest:#0E4A21;--forest-deep:#083216;--leaf:#5FB92C;--leaf-dark:#498f21;--sprout:#93E03F;
  --ink:#14181A;--body:#4d5a52;--mist:#F1F3EF;--line:#E3E8DF;--white:#fff;
  /* Dunne lichtgroene hairline uit het logo � het outline-systeem van de site. Nooit dikker dan 1px. */
  --lijn:#C7D6BD;--lijn-dik:1px;
  --grad:linear-gradient(135deg,#0E4A21 0%,#3E9A2E 52%,#93E03F 100%);
  --grad-soft:linear-gradient(135deg,#5FB92C,#93E03F);
  /* Koppen blijven op Figtree � de strakke, smalle bouw draagt de negatieve tracking
     hieronder. Lopende tekst staat op Nunito Sans, de vrij te gebruiken tegenhanger van
     de Avenir Pro Book van aalbertsbouw.nl: ronder, rustiger, en prettiger op lengte. */
  --display:"Figtree",system-ui,sans-serif;
  --sans:"Nunito Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--white);color:var(--ink);font-family:var(--sans);font-size:18px;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:3px solid var(--leaf);outline-offset:3px;border-radius:6px}
.shell{width:min(1180px,calc(100% - 48px));margin:auto}
.eyebrow{display:inline-flex;gap:10px;align-items:center;text-transform:uppercase;letter-spacing:.14em;font-size:14px;font-weight:700;color:var(--leaf-dark)}
.eyebrow:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grad-soft);border:1px solid var(--lijn)}
.eyebrow.on-dark{color:var(--sprout)}
.h-sec{font-family:var(--display);font-weight:900;font-size:clamp(38px,5vw,60px);line-height:1.02;letter-spacing:-.05em;margin:16px 0 20px}
.lead{font-size:20px;color:var(--body);max-width:56ch;margin:0}
.num{font-variant-numeric:tabular-nums}

/* ---- buttons --------------------------------------------------- */
/* Vlakke knop met harde schaduw eronder � de hairline is te licht voor een knoprand. */
.button{border:0;cursor:pointer;font-family:var(--sans);display:inline-flex;gap:11px;align-items:center;justify-content:center;
  padding:17px 28px;border-radius:15px;background:var(--leaf);color:#fff;font-size:18px;font-weight:700;
  box-shadow:0 5px 0 var(--leaf-dark);transition:transform .18s,box-shadow .18s,background .18s}
.button:hover{transform:translateY(-2px);box-shadow:0 7px 0 var(--leaf-dark)}
.button:active{transform:translateY(3px);box-shadow:0 2px 0 var(--leaf-dark)}
.button:disabled{opacity:.45;pointer-events:none}
.button svg{width:18px;height:18px}
.button.dark{background:var(--forest);box-shadow:0 5px 0 var(--forest-deep)}
.button.dark:hover{box-shadow:0 7px 0 var(--forest-deep)}
.button.dark:active{box-shadow:0 2px 0 var(--forest-deep)}
.button.cream{background:#fff;color:var(--forest);box-shadow:0 5px 0 rgba(8,50,22,.28)}
.button.cream:hover{box-shadow:0 7px 0 rgba(8,50,22,.28)}
.button.cream:active{box-shadow:0 2px 0 rgba(8,50,22,.28)}
.ghost{font-weight:700;font-size:18px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2.5px;text-decoration-color:var(--leaf)}

/* ---- logo ------------------------------------------------------ */
.brand{display:inline-flex;align-items:center;flex:none}
.brand img{height:98px;width:auto;transition:height .25s}
.topbar.is-stuck .brand img{height:58px}
/* Het logo is transparant, maar de belettering is donkerrood/donkergroen en valt weg op de
   donkere footer. Daarom houdt die versie een licht kaartje eronder. */
.brand.op-donker{background:var(--white);border:var(--lijn-dik) solid var(--lijn);border-radius:18px;padding:14px 16px}
.brand.op-donker img{height:124px}

/* ---- topbar ---------------------------------------------------- */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:var(--lijn-dik) solid transparent;padding:16px 0;transition:padding .25s,border-color .25s,box-shadow .25s}
.topbar.is-stuck{padding:9px 0;border-color:var(--lijn);box-shadow:0 10px 30px rgba(14,74,33,.07)}
.nav{display:flex;justify-content:space-between;align-items:center;gap:18px}
/* margin-right:auto duwt de vrije ruimte naar rechts, zodat het menu direct
   naast het logo staat in plaats van tegen de rechterrand. */
.navlinks{display:flex;align-items:center;gap:2px;font-weight:700;font-size:21px;margin-right:auto}
.navlinks a{padding:11px 13px;border-radius:12px;white-space:nowrap;transition:background .18s,color .18s}
.navlinks a:hover{background:var(--mist);color:var(--forest)}
.navlinks .button{margin-left:8px;white-space:nowrap;font-size:16px;padding:14px 22px}
.status{display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px;background:var(--mist);
  border:var(--lijn-dik) solid var(--lijn);font-size:16px;font-weight:700;white-space:nowrap;flex:none}
.status i{width:9px;height:9px;border-radius:50%;background:#c3ccc4;border:1px solid var(--lijn);flex:none}
.status.open i{background:var(--leaf);box-shadow:0 0 0 0 rgba(95,185,44,.6);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(95,185,44,0)}100%{box-shadow:0 0 0 0 rgba(95,185,44,0)}}
.menu{display:none;width:54px;height:54px;border:var(--lijn-dik) solid var(--lijn);border-radius:14px;background:var(--white);color:var(--ink);cursor:pointer;place-items:center;padding:0;box-shadow:0 4px 0 rgba(14,74,33,.14)}
.menu:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(14,74,33,.14)}
.menu svg{width:26px;height:26px}
.menu svg path{stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none;transform-box:view-box;transform-origin:center;transition:transform .2s,opacity .2s}
.menu.is-open .m1{transform:rotate(45deg) translateY(6px)}
.menu.is-open .m2{opacity:0}
.menu.is-open .m3{transform:rotate(-45deg) translateY(-6px)}
#assortiment,#verhaal,#automaat,#bezoek{scroll-margin-top:96px}

/* ---- hero ------------------------------------------------------ */
header{position:relative;overflow:hidden;padding:64px 0 96px;
  background:radial-gradient(760px 520px at 88% -12%,rgba(147,224,63,.22),transparent 62%),
             radial-gradient(620px 460px at -6% 8%,rgba(14,74,33,.07),transparent 60%)}
.hero{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:56px;align-items:center}
.hero h1{font-family:var(--display);font-weight:900;font-size:clamp(46px,6vw,78px);line-height:.98;letter-spacing:-.06em;margin:18px 0 22px}
/* De negatieve letter-spacing trekt de achtergrondbox �n de laatste letter, waardoor die
   bij background-clip:text wordt afgesneden. Extra padding verbreedt de verfrand; de
   negatieve marge houdt de layout identiek. */
.hero h1 em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-right:.1em;margin-right:-.1em}
.hero .lead{font-size:21px;margin-bottom:32px}
.hero-actions{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero-note{display:flex;gap:10px;align-items:center;font-size:17px;color:var(--body);margin:28px 0 0}
.hero-note b{color:var(--ink)}
.hero-note svg{width:20px;height:20px;flex:none;color:var(--leaf)}

.shot{position:relative;border-radius:26px;overflow:hidden;border:7px solid var(--white);
  box-shadow:0 0 0 var(--lijn-dik) var(--lijn),13px 13px 0 rgba(14,74,33,.09),0 24px 54px rgba(14,74,33,.14)}
.shot img{width:100%;height:auto;object-fit:cover;aspect-ratio:4/3}

/* ---- usp strip ------------------------------------------------- */
.usp{background:var(--grad);color:#fff;padding:40px 0;border-block:var(--lijn-dik) solid rgba(255,255,255,.28)}
.usp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
.usp-item{display:flex;gap:15px;align-items:flex-start}
.usp-item svg{width:30px;height:30px;flex:none;color:#fff;margin-top:2px}
.usp-item b{display:block;font-family:var(--display);font-size:19px;letter-spacing:-.03em}
.usp-item span{font-size:16px;color:rgba(255,255,255,.82)}

/* ---- generic section ------------------------------------------- */
section{padding:104px 0}
.sec-head{max-width:640px;margin-bottom:46px}
.sec-head.mid{margin-inline:auto;text-align:center}
/* .lead heeft een max-width, dus die moet zelf ook nog gecentreerd worden. */
.sec-head.mid .lead{margin-inline:auto}

/* ---- assortiment ----------------------------------------------- */
.waren{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
/* overflow:hidden knipt de foto netjes mee met de afgeronde hoek van de kaart. */
.waar{position:relative;background:var(--white);border:var(--lijn-dik) solid var(--lijn);border-radius:20px;overflow:hidden;transition:transform .2s,box-shadow .2s}
.waar:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,74,33,.11)}
/* De hele kaart is klikbaar: dit vlak ligt over de kaart heen, maar de link houdt
   de kop als naam, zodat schermlezers niet de hele lap tekst voorlezen. */
.waar h3 a:after{content:"";position:absolute;inset:0;z-index:1}
/* Toetsenbordfocus om de hele kaart in plaats van een randje om alleen de kop. */
.waar h3 a:focus-visible{outline:0}
.waar:has(a:focus-visible){outline:3px solid var(--leaf);outline-offset:3px}
/* Van iets donker naar licht: de foto klaart op en zoomt een fractie in. */
.waar-foto{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-bottom:var(--lijn-dik) solid var(--lijn);
  filter:brightness(.92) saturate(.96);transform:scale(1);transition:filter .3s,transform .5s cubic-bezier(.2,.7,.3,1)}
.waar:hover .waar-foto,.waar:has(a:focus-visible) .waar-foto{filter:brightness(1.05) saturate(1.05);transform:scale(1.05)}
.waar-tekst{padding:24px 28px 28px}
/* De vormpjes in de automaat-demo houden dezelfde dunne contour als in het logo. */
.waren-vorm{border-radius:50%;border:1px solid var(--lijn)}
.waar h3{font-family:var(--display);font-weight:900;font-size:23px;letter-spacing:-.04em;margin:0 0 9px}
.waar p{font-size:17px;color:var(--body);margin:0}

/* ---- verhaal --------------------------------------------------- */
.verhaal{background:var(--mist)}
.verhaal-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.tijdlijn{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:0}
.tijdlijn li{position:relative;padding:0 0 26px 40px}
/* left = 11px: het midden van de bol (2px + (17px + 2x1px rand) / 2), zodat de lijn er precies doorheen loopt */
.tijdlijn li:before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:1px;background:var(--lijn)}
.tijdlijn li:last-child{padding-bottom:0}
.tijdlijn li:last-child:before{display:none}
.tijdlijn li:after{content:"";position:absolute;left:2px;top:6px;width:17px;height:17px;border-radius:50%;background:var(--grad-soft);border:var(--lijn-dik) solid var(--lijn);outline:3px solid var(--mist)}
.tijdlijn b{display:block;font-family:var(--display);font-size:20px;letter-spacing:-.035em}
.tijdlijn span{font-size:17px;color:var(--body)}
.verhaal-beeld{position:relative}
.verhaal-beeld:before{content:"";position:absolute;inset:-7% -5%;border-radius:50%;background:radial-gradient(circle,rgba(147,224,63,.45),transparent 68%)}
/* height:auto is nodig, anders wint het height-attribuut van de <img> en doet aspect-ratio niets. */
.verhaal-beeld>img{position:relative;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;object-position:center 58%;
  border:var(--lijn-dik) solid var(--lijn);border-radius:26px;box-shadow:13px 13px 0 rgba(14,74,33,.09),0 24px 54px rgba(14,74,33,.14)}
.zegel{position:absolute;z-index:2;left:-22px;bottom:-26px;width:180px;padding:13px 15px;border-radius:20px;
  background:var(--white);border:var(--lijn-dik) solid var(--lijn);box-shadow:0 16px 38px rgba(14,74,33,.2)}
.zegel img{width:100%;height:auto;display:block}

/* ---- automaat demo --------------------------------------------- */
.stappen{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.stap{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:26px;display:flex;flex-direction:column;gap:8px}
.stap-num{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;background:var(--mist);
  font-family:var(--display);font-weight:900;font-size:18px;color:var(--forest);margin-bottom:10px}
.stap:nth-child(2) .stap-num{background:#e4f3d8}
.stap:nth-child(3) .stap-num{background:var(--grad-soft);color:#fff}
.stap h3{font-family:var(--display);font-weight:900;font-size:21px;letter-spacing:-.03em;margin:0}
.stap>p{font-size:15.5px;color:var(--body);margin:0 0 16px}
.demo{margin-top:auto;background:var(--mist);border:1px solid var(--line);border-radius:16px;padding:16px;min-height:268px;display:flex;flex-direction:column;gap:11px}

/* vakkenwand */
.wand{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.vak{position:relative;border:2px solid var(--line);background:var(--white);border-radius:11px;padding:9px 6px 7px;cursor:pointer;
  font-family:var(--sans);display:flex;flex-direction:column;align-items:center;gap:6px;transition:border-color .16s,box-shadow .16s,transform .16s}
.vak:hover:not(:disabled){transform:translateY(-2px)}
.vak small{font-size:10.5px;font-weight:700;line-height:1.15;text-align:center;color:var(--body)}
.vak .waren-vorm{width:30px;height:30px;display:block}
/* De acht productvormpjes in de wand zijn getekend met CSS in plaats van met foto's.
   Ze staan onder .vak, want anders wint de maat van .vak .waren-vorm hierboven. */
.vak .vorm-appel    {background:radial-gradient(circle at 34% 30%,#f4694f,#d33a24)}
.vak .vorm-peer     {background:linear-gradient(160deg,#cfe06a,#96b12c);border-radius:50% 50% 50% 50%/64% 64% 38% 38%}
.vak .vorm-pruim    {background:radial-gradient(circle at 36% 30%,#8158b5,#4d2c78)}
.vak .vorm-sap      {width:20px;background:linear-gradient(160deg,#f0b429,#d98b0d);border-radius:5px 5px 8px 8px}
.vak .vorm-ei       {width:24px;background:linear-gradient(160deg,#fffdf7,#ecdfc6);border-radius:50%/58% 58% 42% 42%;border-color:#e0d3bb}
.vak .vorm-kaas     {height:26px;background:linear-gradient(150deg,#f7d774,#e8b02f);clip-path:polygon(0 100%,0 24%,100% 0,100% 100%)}
.vak .vorm-aardappel{height:26px;background:linear-gradient(150deg,#d3a675,#a97541);border-radius:52% 48% 46% 54%/58% 54% 46% 42%}
.vak .vorm-honing   {width:22px;background:linear-gradient(160deg,#f0a91c,#c9770a);border-radius:6px 6px 9px 9px}
.vak .tik{position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--leaf);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;opacity:0;transform:scale(.4);transition:.18s}
.vak.gekozen{border-color:var(--leaf);box-shadow:0 4px 0 rgba(95,185,44,.22)}
.vak.gekozen .tik{opacity:1;transform:scale(1)}
.vak:disabled{cursor:not-allowed;opacity:.5;background:repeating-linear-gradient(45deg,#fff 0 6px,var(--mist) 6px 12px)}
/* Een leeg vakje heeft geen vormpje, dus staat het woord 'Uitverkocht' zelf gecentreerd. */
.vak:disabled small{margin:auto 0}
.vak.plop{animation:plop .3s}
@keyframes plop{50%{transform:scale(1.07)}}

/* pinautomaat */
.pin{flex:1;background:var(--forest);border-radius:14px;padding:16px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;color:#fff;min-height:112px}
.pin-scherm{font-size:13px;font-weight:700;text-align:center;color:rgba(255,255,255,.85)}
.pin-kaart{width:64px;height:41px;border-radius:7px;background:linear-gradient(135deg,#3E9A2E,#93E03F);position:relative;transition:transform .5s}
.pin-kaart:before{content:"";position:absolute;left:8px;top:13px;width:13px;height:10px;border-radius:2px;background:rgba(255,255,255,.75)}
.pin.betaalt .pin-kaart{transform:translateY(-7px) rotate(-9deg)}
.pin.klaar .pin-kaart{background:var(--white)}
.pin-ok{display:none;font-family:var(--display);font-size:18px;font-weight:800}
.pin.klaar .pin-kaart,.pin.klaar .pin-scherm{display:none}
.pin.klaar .pin-ok{display:block}
.pin-btn{width:100%;padding:12px;font-size:15px;border-radius:12px}

/* klepje */
.luik{position:relative;flex:1;border-radius:14px;overflow:hidden;background:var(--forest-deep);perspective:800px;min-height:150px}
.luik-inhoud{position:absolute;inset:0;display:grid;place-items:center;gap:6px;color:#fff;text-align:center;padding:14px}
.luik-inhoud b{font-family:var(--display);font-size:17px;letter-spacing:-.02em}
.luik-inhoud span{font-size:13px;color:rgba(255,255,255,.72)}
.klep{position:absolute;inset:0;background:linear-gradient(150deg,#dfe5da,#f6f8f4);border-radius:14px;transform-origin:left center;
  transition:transform .85s cubic-bezier(.3,.7,.2,1);display:grid;place-items:center;box-shadow:inset 0 0 0 2px rgba(14,74,33,.1)}
.klep:after{content:"";position:absolute;right:11px;top:50%;width:7px;height:26px;border-radius:4px;background:#b9c4b6;transform:translateY(-50%)}
.klep span{font-family:var(--display);font-size:14px;font-weight:800;color:var(--forest);letter-spacing:.02em}
.luik.open .klep{transform:rotateY(-108deg)}
.teller{text-align:center;font-size:13px;font-weight:700;color:var(--body)}

/* ---- bezoek ---------------------------------------------------- */
.bezoek{background:var(--mist)}
.bezoek-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.kaart-info{display:grid;gap:2px;margin:28px 0 0;padding:0;list-style:none}
.kaart-info li{display:flex;gap:15px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--line)}
.kaart-info li:last-child{border-bottom:0}
.kaart-info svg{width:21px;height:21px;flex:none;color:var(--leaf-dark);margin-top:3px}
.kaart-info b{display:block;font-size:14px;text-transform:uppercase;letter-spacing:.1em;color:var(--body)}
.kaart-info span{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.025em}
.uren{background:var(--white);border-radius:22px;padding:30px;border:1px solid var(--line)}
.uren h3{font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.03em;margin:0 0 4px}
.uren>p{font-size:15.5px;color:var(--body);margin:0 0 20px}
.uur-rij{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:16px}
.uur-rij:last-of-type{border-bottom:0}
.uur-rij.vandaag{font-weight:700;color:var(--forest)}
.uren-nu{margin-top:22px}
.uur-rij.vandaag .dag:after{content:"vandaag";margin-left:9px;padding:3px 8px;border-radius:999px;background:var(--grad-soft);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;vertical-align:1px}

/* ---- cta ------------------------------------------------------- */
/* Geen eigen padding: de basisregel voor section geeft boven en onder evenveel ruimte. */
.cta-box{position:relative;isolation:isolate;overflow:hidden;border-radius:28px;background:var(--grad);color:#fff;padding:58px 62px;
  display:flex;justify-content:space-between;align-items:center;gap:36px}
.cta-box:after{content:"";position:absolute;z-index:-1;right:-120px;top:-170px;width:320px;height:320px;border-radius:50%;border:40px solid rgba(255,255,255,.12)}
.cta-box h2{font-family:var(--display);font-weight:900;font-size:clamp(28px,3.4vw,40px);line-height:1.04;letter-spacing:-.04em;margin:0 0 10px}
.cta-box p{margin:0;color:rgba(255,255,255,.85);max-width:46ch}
.cta-box .button{white-space:nowrap}

/* ---- footer ---------------------------------------------------- */
footer{background:var(--forest-deep);color:rgba(255,255,255,.72);padding:60px 0 26px}
.foot-top{display:flex;justify-content:space-between;gap:44px}
.foot-copy{max-width:340px}
.foot-copy p{margin:20px 0 0;font-size:17px}
.foot-nav{display:flex;gap:62px}
/* Gelijk aan .foot-copy p aan de linkerkant van de footer. */
.foot-nav b{display:block;color:#fff;font-family:var(--display);font-size:17px;margin-bottom:12px}
/* Geen marges tussen de regels: de regelafstand bepaalt het ritme, zodat telefoon,
   e-mail, straat en postcode allemaal even ver uit elkaar staan. */
.foot-nav a,.foot-nav span{display:block;font-size:17px;line-height:2;margin:0;transition:color .18s}
.foot-nav a:hover{color:var(--sprout)}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:14px;font-size:15px}

/* ---- subpagina --------------------------------------------------- */
/* Een subpagina heeft geen hero boven de inhoud, dus die mag dichter op de balk
   beginnen dan de secties op de homepage (die staan op de 104px van de section-regel). */
.sub-start{padding-top:48px}
/* Zelfde korpsgrootte als de introtekst in de hero op de homepage (.hero .lead). */
.sub-intro{max-width:62ch;font-size:21px}
.sub-blokken{display:grid;gap:70px;margin-top:64px}
.sub-blok{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}

.sub-blok:has(> :only-child){grid-template-columns:1fr}
/* Om en om: het beeld staat vooraan in de HTML, dus staat het standaard links.
   Bij de even blokken schuift het naar rechts. */
.sub-blok:nth-child(even) .sub-beeld{order:1}
.sub-beeld img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:22px;
  border:var(--lijn-dik) solid var(--lijn);box-shadow:0 16px 38px rgba(14,74,33,.12)}
.sub-blok h2{font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.04em;margin:0 0 12px}
.sub-blok p{margin:0 0 13px;color:var(--body)}
.sub-blok p:last-child{margin-bottom:0}
.sub-blok{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.sub-blok-duo{grid-template-columns:1fr 1fr}
.sub-blok-duo .sub-beeld{order:0}
.sub-blok-paar{display:grid;grid-template-columns:1fr 1fr;gap:52px}
/* Om en om: het beeld staat vooraan in de HTML, dus staat het standaard links.
   Bij de even blokken schuift het naar rechts. */
.sub-blok:nth-child(even) .sub-beeld{order:1}
/* Een bericht kan tekst-zonder-beeld of beeld-zonder-tekst zijn (bouwBericht() geeft
   dan maar ��n van de twee terug). Met nog altijd 1fr 1fr blijft de lege kolom als gat
   staan; met maar ��n kind mag dat ene element de volle breedte pakken. */
.sub-blok:has(> :only-child){grid-template-columns:1fr}
.naar-boven{position:fixed;right:24px;bottom:24px;z-index:30;width:48px;height:48px;border-radius:50%;background:var(--forest);color:#fff;
  display:grid;place-items:center;opacity:0;visibility:hidden;transform:translateY(10px);
  /* Twee lagen: een strakke donkere rand eronder plus een wijde zachte slagschaduw, zodat de
     knop ook op een lichte sectie los van de pagina komt te staan. */
  box-shadow:0 4px 10px rgba(8,50,22,.3),0 14px 34px rgba(8,50,22,.42);
  transition:opacity .22s,transform .22s,visibility .22s,background .18s,box-shadow .18s}
.naar-boven.zichtbaar{opacity:1;visibility:visible;transform:translateY(0)}
.naar-boven:hover{background:var(--leaf);box-shadow:0 6px 14px rgba(8,50,22,.32),0 18px 42px rgba(8,50,22,.46)}
.naar-boven svg{width:20px;height:20px}

/* ---- contact dialog -------------------------------------------- */
dialog{border:0;padding:0;max-width:492px;width:calc(100% - 36px);border-radius:24px;background:var(--white);
  box-shadow:0 34px 90px rgba(8,50,22,.34);overflow:hidden;max-height:calc(100% - 40px);max-height:calc(100dvh - 40px)}
dialog::backdrop{background:rgba(10,45,20,.42);backdrop-filter:blur(11px) saturate(130%);-webkit-backdrop-filter:blur(11px) saturate(130%)}
dialog[open]{display:flex;flex-direction:column;animation:dlg .34s cubic-bezier(.2,.8,.3,1)}
@keyframes dlg{from{opacity:0;transform:translateY(16px) scale(.97)}}
.modal{padding:34px;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.modal-kop{display:flex;gap:13px;align-items:center;margin-bottom:18px}
.modal h2{font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.04em;margin:0}
.modal-kop p{margin:3px 0 0;font-size:16px;color:var(--body)}
.veld{display:block;margin-top:14px}
.veld span{display:block;font-size:15px;font-weight:700;margin-bottom:6px}
/* '(optioneel)' achter een label: wel apart, maar niet schreeuwerig. */
.veld .optioneel{font-style:normal;color:#8d9990}
.veld input,.veld select,.veld textarea{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:12px 13px;
  font:17px var(--sans);color:var(--ink);background:var(--white);transition:border-color .16s,box-shadow .16s}
.veld textarea{resize:vertical;min-height:92px}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:0;border-color:var(--leaf);box-shadow:0 0 0 4px rgba(95,185,44,.15)}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal .button{width:100%;margin-top:22px}
/* De knoppen en de bedanktekst erven anders de sitebrede maat; in de popup staat alles een maat groter. */
dialog .button{font-size:19px}
.modal-sluit{position:absolute;top:14px;right:14px;z-index:2;width:42px;height:42px;border:0;border-radius:12px;color:var(--body);
  background:rgba(255,255,255,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  cursor:pointer;display:grid;place-items:center;transition:background .18s,color .18s}
.modal-sluit:hover{background:var(--mist);color:var(--ink)}
.modal-sluit svg{width:22px;height:22px}
.bedankt{display:none;padding:44px 34px;text-align:center;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.bedankt svg{width:60px;height:60px;color:var(--leaf);margin-bottom:16px}
.bedankt h2{font-family:var(--display);font-weight:900;font-size:27px;letter-spacing:-.04em;margin:0 0 8px}
.bedankt p{color:var(--body);margin:0 0 24px;font-size:19px}
dialog.verzonden .modal{display:none}
dialog.verzonden .bedankt{display:block}
.fout{display:none;margin-top:14px;padding:12px 14px;border-radius:12px;background:#fdeaea;color:#a3261f;font-size:16px;font-weight:500}
.fout.toon{display:block}

/* ---- reveal ---------------------------------------------------- */
.js .op{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.js .op.in{opacity:1;transform:none}

/* ---- responsive ------------------------------------------------ */
@media(max-width:1240px){
  .navlinks{position:absolute;top:calc(100% + 12px);right:0;left:0;flex-direction:column;align-items:stretch;gap:5px;padding:12px;
    background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 48px rgba(14,74,33,.16);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility .2s}
  .navlinks.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
  .navlinks a{padding:12px 14px}
  .navlinks .button{width:100%;margin:4px 0 0}
  .nav{position:relative}
  .menu{display:grid}
  /* .navlinks wordt hier position:absolute en valt daarmee uit de flex-flow, dus
     de margin-right:auto daarop (die 'm op desktop links houdt) werkt niet meer.
     Zonder vervanging verdeelt justify-content:space-between de overige kinderen
     (logo, cart, hamburger) gelijkmatig over de balk. Deze margin-left:auto op
     header-right duwt cart-icon + hamburger als groep naar rechts, logo blijft links. */
  .header-right{margin-left:auto}
}
@media(max-width:900px){
  .sub-blok-duo{grid-template-columns:1fr}
  .sub-blok-paar{grid-template-columns:1fr}
  .product-gallery-area{
    display:flex;
    flex-direction:column;
  }
  .product-left{width:100%;float:none}
  .product-right{width:200%;float:none}
  .shell{width:min(100% - 34px,620px)}
  section{padding:74px 0}
  header{padding:44px 0 70px}
  .hero,.verhaal-grid,.bezoek-grid{grid-template-columns:1fr;gap:40px}
  .usp-grid{grid-template-columns:1fr 1fr;gap:24px}
  .stappen{grid-template-columns:1fr}
  /* Met foto's zijn de kaarten fors hoger; op tablet blijven twee kolommen prettiger lezen. */
  .waren{grid-template-columns:1fr 1fr}
  .verhaal-beeld{max-width:420px;margin-inline:auto}
  .sub-start{padding-top:34px}
  /* Beeld altijd boven de tekst, dus de om-en-om-volgorde vervalt. */
  .sub-blok{grid-template-columns:1fr;gap:26px}
  .sub-blok:nth-child(even) .sub-beeld{order:0}
  .sub-blokken{gap:56px}
  .cta-box,.foot-top,.foot-bottom{flex-direction:column;align-items:flex-start}
  .cta-box{padding:40px 32px}

  .buy-now .btn{
    min-width:80px;
    padding:12px 16px;
  }


  .checkout .shell{display:flex;flex-direction:column;gap:36px;padding-bottom:74px}
  .checkout-kop{margin-bottom:36px}

  .checkout-grid{
    display:flex;
    flex-direction:column;
    gap:36px;
    padding-bottom:74px;
  }
  .checkout-kop{margin-bottom:5px !important}
  .checkout-samenvatting{position:static;order:1}
  .checkout-form{order:2}
  .veld input,.veld select,.veld textarea{
  border:1.5px solid #E3E8DF !important}
}
@media(max-width:520px){
  .usp-grid,.waren{grid-template-columns:1fr}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .ghost{text-align:center;padding:8px}
  .foot-nav{width:100%;gap:34px}
  dialog{width:calc(100% - 20px);max-height:calc(100% - 20px);max-height:calc(100dvh - 20px)}
  .modal{padding:26px 22px}
  .bedankt{padding:34px 22px}
  .duo{grid-template-columns:1fr}
  .zegel{width:96px;height:96px}
  /* Kleiner tikdoel zodat cart-icon en hamburger naast elkaar passen op smalle telefoons. */
  .cart-icon a{width:48px;height:48px}
  .header-right{margin-left:auto;gap:0}
 }
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .js .op{opacity:1;transform:none}
}
.buy-now .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  /* Reset layout constraints preventing full rounded caps */
  width: auto;
  max-width: max-content;
  box-shadow: none; /* If active, box-shadows can clip rounded edges on static containers */

  /* Equal horizontal padding gives the radius room to round out completely */
  padding: 14px 32px;
  border-radius: 999px;
  white-space: nowrap;
}

.buy-now .btn svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.buy-now .btn .btn-tekst {
  display: inline-block;
  white-space: nowrap;
}
/* --------- Productview -------------------------------- */
.product-details-area {
	padding: 6px 0 30px 0;
	line-height: 30px;
}

.product-details-area h1 {
	font-size: 25px;
	line-height: 25px;
	padding: 0 0 20px 0;
	font-weight: 400;
}

.product-details-area h2 {
	font-size: 21px;
	line-height: 25px;
	padding: 0 0 15px 0;
	font-weight: 100;
}

.product-gallery-area {
	padding: 0 0 20px 0;
	overflow: hidden;
}

.product-left {
	width: 80%;
	float: left;
}

.product-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.product-gallery-big {
	width: 55%;
}

.product-gallery-big img {
	display: block;
	width: 100%;
	height: auto;
}

.desoslide-overlay {
	display: none;
}

.product-gallery-thumb {
	width: 30%;
}

.product-gallery-thumb img {
	display: block;
	width: 100%;
	height: auto;
}

.product-gallery-thumb ul li {
	margin: 10px 0 0 0;
	border: 1px solid #666698;
}

.product-gallery-thumb ul li:first-child {
	margin: 0;
}

.product-right {
	width: 30%;
	float: right;
}
.container {
	max-width: 1150px;
	margin: 0 auto;
	position: relative;
	padding: 0 10px;
}

a{color:inherit;text-decoration:none}
.btn {
	font-size: 14px;
	background: var(--leaf);
	color: #fff;
	padding: 10px 30px 10px 30px;
	display: inline-block;
	text-decoration: none;
	border-radius: 50px;
	border-style: none;
	text-transform: uppercase;
	cursor: pointer;
}
.menuicon {
	position: absolute;
	right: 0;
	top: 12px;
	cursor: pointer;
	display: none;
}

/* Make the navlinks container a flex row */
.navlinks {
    display: flex;
    align-items: center;      /* Vertical centering */
    gap: 20px;                /* Space between menu / search / button */
    flex-wrap: wrap;          /* Allow wrapping on small screens if needed */
}

/* Reset search box so it sits inline instead of as a centered block */
.search-box {
    max-width: 260px;         /* Slightly smaller so it fits in the nav row */
    margin: 0;                /* Remove auto margin */
    padding: 0;               /* Remove top padding */
    flex: 0 0 auto;
}

/* Lock the entire row to a single line */
.navlinks {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;           /* Prevent wrapping */
}

/* Keep $menutxt horizontal if it is a <ul> */
.navlinks > ul,
.navlinks > ol {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-shrink: 0;              /* Don't let the menu shrink away */
}

/* Form must stay inline and not claim full width */
.navlinks > form {
    display: flex;
    align-items: center;
    margin: 0;
    flex: 0 1 auto;              /* Can shrink if needed, but don't grow */
}

/* Shrink the search box so it fits in the nav row */
.search-box {
    width: 220px;                /* Fixed width � adjust if you need more/less */
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.search-box-inner {
    position: relative;
    width: 100%;
}
.navlinks {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.navlinks form {
    flex: 1 1 auto;
    min-width: 220px;
    max-width: 100%;
}

.search-box {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.search-box-inner {
    display: flex;
    width: 100%;
}

.search-input {
    flex: 1 1 auto;
    min-width: 0;
}

 input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
.search-input input {
    width: 235px;
    height: 40px;
    border: 1px solid #999;;
    background: #fff;
    border-radius: 30px;
    padding: 0 40px 0 16px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    box-shadow: none !important;
    outline: none !important;
}

.search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.search-btn input {
    width: 22px;
    height: 22px;
    cursor: pointer;
    background: url(../images/search-icon.png) no-repeat center center / contain;
    border: none;
    padding: 0;
    display: block;
}

/* Keep the contact button from wrapping or stretching */
.navlinks > .button[data-contact],
.navlinks > button[data-contact] {
    flex-shrink: 0;              /* Never let the button shrink */
    white-space: nowrap;
    margin: 0;
}
.header-right{
  display:flex;
  align-items:center;
  flex:none;
  margin-left:14px;
}
.cart-icon{
  display:flex;
  align-items:center;
}
.cart-icon a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:14px;
  transition:background .18s;
  position:relative;
}
.cart-icon a:hover{
  background:var(--mist);
}
.cart-icon img{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
}
.cart-icon svg{
  width:30px;
  height:30px;
  display:block;
}
/* Aantal-badge op het winkelmandicoontje (data-mand-teller in de PHP). */
.cart-icon [data-mand-teller]{
  position:absolute;
  top:2px;
  right:2px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--leaf);
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:20px;
  text-align:center;
  box-shadow:0 0 0 2px var(--white);
}
.search-input input{
  outline:none; /* opt out of the global :focus-visible ring for this field */
  box-shadow:0 0 0 3px rgba(95,185,44,.25);
}
/* ---- checkout (PaymentView) ------------------------------------ */
.checkout-kop{max-width:640px;margin-bottom:44px}
.checkout-titel{font-size:clamp(32px,4vw,46px);margin:14px 0 16px}
.checkout-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:48px;align-items:start;padding-bottom:104px}

.checkout-blok{margin-bottom:40px}
.checkout-blok:last-of-type{margin-bottom:32px}
.checkout-blok-kop{font-family:var(--display);font-weight:900;font-size:20px;letter-spacing:-.03em;
  margin:0 0 16px;padding-bottom:12px;border-bottom:var(--lijn-dik) solid var(--lijn)}
.checkout-blok-kop .optioneel{font-style:normal;font-weight:400;font-size:15px;color:#8d9990;letter-spacing:0}

/* Zelfde .veld/.duo als de contactdialoog, dus visueel identiek gedrag,
   alleen de kolomverdeling van huisnummer wijkt af: smal en vast. */
.duo-krap{grid-template-columns:1fr auto}
.veld-smal{width:130px}
.veld-smal input{text-align:center}

.checkout-submit{width:100%;font-size:19px;padding:19px 28px}

/* ---- samenvatting (order summary card) -------------------------- */
.checkout-samenvatting{position:sticky;top:104px}
.checkout-card h3{margin:0 0 4px}
.checkout-regels{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.checkout-regel{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:13px 0;border-bottom:1px solid var(--line);font-size:16px}
.checkout-regel:last-child{border-bottom:0}
.checkout-regel-naam{color:var(--ink)}
.checkout-regel-aantal{color:var(--body);font-weight:700;margin-left:6px}
.checkout-regel-prijs{white-space:nowrap;font-weight:700}
.checkout-totaal{display:flex;justify-content:space-between;align-items:center;margin-top:18px;padding-top:18px;
  border-top:var(--lijn-dik) solid var(--lijn);font-family:var(--display);font-weight:900;font-size:22px;letter-spacing:-.03em;margin-bottom:25px;}

/* ---- validatiefouten --------------------------------------------- */
/* Vali::err() print vermoedelijk kale tekst of een eigen element; dit vangt
   de meest gangbare varianten op zodat een foutmelding onder een veld altijd
   dezelfde stijl krijgt als .fout in de contactdialoog. Pas de selector aan
   zodra bekend is welk element/klasse Vali zelf uitvoert. */
.veld .error,.veld .err,.veld small.fout-veld{
  display:block;margin-top:6px;font-size:14px;font-weight:600;color:#f55e56}
.veld:has(.error) input,.veld:has(.err) input{border-color:#e3a5a0}

@media(max-width:900px){
  .checkout-grid{grid-template-columns:1fr;gap:36px;padding-bottom:74px}
  .checkout-samenvatting{position:static}
}
@media(max-width:520px){
  .duo-krap{grid-template-columns:1fr}
  .veld-smal{width:100%}
}
/* ---- winkelmand (OrderFormView) --------------------------------- */
.mand-kop{max-width:640px;margin-bottom:44px}
.mand-titel{font-size:clamp(32px,4vw,46px);margin:14px 0 16px}
.mand-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start;padding-bottom:104px}

.mand-lijst{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mand-regel{display:grid;grid-template-columns:64px 1fr auto auto auto;gap:18px;align-items:center;
  background:var(--white);border:var(--lijn-dik) solid var(--lijn);border-radius:18px;padding:14px 18px;
  transition:opacity .18s,transform .18s}
.mand-foto{width:64px;height:64px;border-radius:12px;object-fit:cover;border:var(--lijn-dik) solid var(--lijn)}
.mand-info{min-width:0}
.mand-naam{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;margin:0 0 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mand-prijs-stuk{font-size:14.5px;color:var(--body)}

.mand-stepper{display:flex;align-items:center;gap:2px;background:var(--mist);border-radius:12px;padding:4px}
.stepper-btn{width:32px;height:32px;border:0;border-radius:9px;background:var(--white);color:var(--forest);cursor:pointer;
  display:grid;place-items:center;box-shadow:0 1px 0 var(--lijn);transition:background .15s,transform .1s}
.stepper-btn:hover:not(:disabled){background:var(--leaf);color:#fff}
.stepper-btn:active:not(:disabled){transform:scale(.92)}
.stepper-btn:disabled{opacity:.5;cursor:not-allowed}
.stepper-btn svg{width:16px;height:16px}
.stepper-aantal{min-width:26px;text-align:center;font-weight:800;font-size:16px}

.mand-regel-totaal{font-weight:800;font-size:17px;white-space:nowrap;min-width:78px;text-align:right}
.mand-verwijder{width:38px;height:38px;border:0;border-radius:10px;background:transparent;color:#a3261f;cursor:pointer;
  display:grid;place-items:center;transition:background .15s}
.mand-verwijder:hover{background:#fdeaea}
.mand-verwijder svg{width:18px;height:18px}

.mand-samenvatting{position:sticky;top:104px}

.mand-leeg{text-align:center;padding:64px 0;display:grid;gap:20px;justify-items:center}

@media(max-width:900px){
  .mand-grid{grid-template-columns:1fr;gap:36px;padding-bottom:74px}
  .mand-samenvatting{position:static}
}
@media(max-width:560px){
  .mand-regel{grid-template-columns:48px 1fr;grid-template-areas:"foto info" "stepper stepper" "totaal verwijder";row-gap:10px}
  .mand-foto{grid-area:foto;width:48px;height:48px}
  .mand-info{grid-area:info}
  .mand-stepper{grid-area:stepper;justify-self:start}
  .mand-regel-totaal{grid-area:totaal;text-align:left}
  .mand-verwijder{grid-area:verwijder;justify-self:end}
}
/* ---- bestel-knop onder de productlijst (naast die in .mand-samenvatting) */
.mand-bestel-onder{margin-top:18px}
.mand-bestel-onder .checkout-submit{width:auto;padding:16px 34px}

@media(max-width:900px){
  /* Op smal scherm staat de samenvatting-kaart onder de lijst, dus deze knop
     zou dubbelop staan vlak boven diezelfde knop in de kaart. Daarom hier weg,
     de kaart met de "echte" bestelknop blijft dan de enige op mobiel. */
  .mand-bestel-onder{display:none}
}
/* ---- Bestellen + Verder winkelen gestapeld onder de productlijst ------- */
.mand-bestel-onder{margin-top:18px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.verder-winkelen {
	font-size: 25px;
	background: var(--leaf);
	color: #fff;
	padding: 15px 38px;
	display: inline-block;
	text-decoration: none;
	border-radius: 50px;
	border-style: none;
	text-transform: uppercase;
	cursor: pointer;
}
.verder-winkelen.cream {
	font-size: 18px;
	font-weight: 700;
	font-family: var(--sans);
	background: var(--mist);
	color: var(--body);
	padding: 17px 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	border-radius: 15px;
	border: var(--lijn-dik) solid var(--lijn);
	box-shadow: 0 5px 0 #C7D6BD;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .18s, box-shadow .18s, background .18s;
}
.verder-winkelen:hover.cream{
  transform:translateY(-2px);
  box-shadow:0 7px 0 #C7D6BD;
  background:#e7ebe3;
}
.verder-winkelen:active.cream{
  transform:translateY(3px);
  box-shadow:0 2px 0 #C7D6BD;
}
@media(max-width:520px){
  .mand-bestel-onder{align-items:stretch}
  .mand-bestel-onder .checkout-submit,
  .mand-bestel-onder .verder-winkelen{width:100%;text-align:center}
}
.product-left img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:22px;border:var(--lijn-dik) solid var(--lijn);
  box-shadow:0 16px 38px rgba(14,74,33,.12)}

.desoslide-wrapper img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:22px;border:var(--lijn-dik) solid var(--lijn);
  box-shadow:0 16px 38px rgba(14,74,33,.12)}
  /* ---- categorieoverzicht (CategoryView) --------------------------- */
.cat-terug{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--body);margin-bottom:18px;transition:color .16s}
.cat-terug:hover{color:var(--forest)}
.cat-terug svg{width:18px;height:18px}

.cat-subnav{display:flex;flex-wrap:wrap;gap:10px;margin:24px 0 44px}
.cat-subnav a{padding:11px 20px;border-radius:999px;background:var(--mist);border:var(--lijn-dik) solid var(--lijn);
  font-weight:700;font-size:15px;color:var(--forest);transition:background .16s,border-color .16s}
.cat-subnav a:hover{background:var(--white);border-color:var(--leaf)}

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}
.cat-item{position:relative;background:var(--white);border:var(--lijn-dik) solid var(--lijn);border-radius:20px;
  overflow:hidden;transition:transform .2s,box-shadow .2s}
.cat-item:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(14,74,33,.11)}
.cat-item h3 a:after{content:"";position:absolute;inset:0;z-index:1}
.cat-item h3 a:focus-visible{outline:0}
.cat-item:has(a:focus-visible){outline:3px solid var(--leaf);outline-offset:3px}
.cat-item-foto{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-bottom:var(--lijn-dik) solid var(--lijn);
  filter:brightness(.92) saturate(.96);transition:filter .3s,transform .5s cubic-bezier(.2,.7,.3,1)}
.cat-item:hover .cat-item-foto,.cat-item:has(a:focus-visible) .cat-item-foto{filter:brightness(1.05) saturate(1.05);transform:scale(1.05)}
.cat-item-tekst{padding:18px 20px 20px}
.cat-item h3{font-family:var(--display);font-weight:900;font-size:18px;letter-spacing:-.03em;margin:0 0 6px;line-height:1.25}
.cat-item-prijs{font-family:var(--display);font-weight:800;font-size:17px;color:var(--forest);margin:0}
.cat-item-name {margin-left: 10px;}

.cat-leeg{text-align:center;padding:64px 0;color:var(--body);font-size:17px}

@media(max-width:520px){
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
.cat-item-omschrijving{font-size:14.5px;color:var(--body);margin:0 0 8px;line-height:1.4}
.cat-aantal{margin-top:24px;color:var(--body);font-size:15px}
/* ---- productgalerij (Artikelview) -------------------------------- */
.product-gallery-big{border-radius:20px;overflow:hidden;border:var(--lijn-dik) solid var(--lijn)}
.product-gallery-big img{display:block;width:100%;height:auto;border-radius:0}

.product-gallery-thumb ul li{border-radius:12px;overflow:hidden;border:var(--lijn-dik) solid var(--lijn);
  transition:border-color .16s}
.product-gallery-thumb ul li:hover{border-color:var(--leaf)}
.product-gallery-thumb img{display:block;width:100%;height:auto;border-radius:0}

/* De thumblijst is een kale <ul> en hield dus de browserstandaard
   padding-inline-start van 40px. Die 40px zijn absoluut, niet relatief: op
   desktop kost dat weinig, op 375px bleef van een kolom van 107px nog 65px
   over. Hierboven worden alleen losse klassen gereset, geen bare ul. */
.product-gallery-thumb ul{margin:0;padding:0;list-style:none}

/* Zonder die 40px werd 55/30 te thumb-zwaar: de thumb kwam dan boven de helft
   van de hoofdfoto uit. 74/23 laat de rest (3%) als space-between gap staan en
   houdt dezelfde verhouding aan als poppenmode, waar dit wel goed schaalt. */
.product-gallery-big{width:74%}
.product-gallery-thumb{width:23%}

.menu{
  order:99; /* always rightmost, no matter what else is in .nav */
}