/* Snoepenzo.com — thema (bruin/perzik, snoep & import)
   Tinten komen 1-op-1 van de oude site:
     #5C2626 donkerbruin · #FED7B8 perzik · #FDB57C warm oranje · #D85E52 zalmrood
   Verschil met vroeger: de pagina is nu licht perzik in plaats van vol perzik, en
   productkaarten zijn wit. Daardoor springen de verpakkingen eruit in plaats van
   dat ze wegvallen tegen de achtergrond. */
:root{
  --bruin:#5C2626;          /* balk, footer, knoppen, koppen */
  --bruin-donker:#431A1A;   /* hover */
  --bruin-zacht:#7A403C;    /* rustige tekst op licht */
  --perzik:#FED7B8;         /* header, accentvlakken */
  --perzik-licht:#FFF3E9;   /* paginabasis */
  --perzik-diep:#FFE3CB;    /* fotovlak in kaarten */
  --oranje:#FDB57C;         /* accent */
  --rood:#D85E52;           /* badges */
  --tekst:#3D1B18;
  --muted:#8A5F58;
  --lijn:#F0DCCB;
  --wit:#ffffff;
  --radius:20px;
  --breed:980px;          /* breedte van de container: menu, content en footer */
  --kaart-max:205px;      /* max. kaartbreedte in de winkel; 205 = 4 per rij, 175 = 5 (zie beheer) */

  /* ── Tekstschaal ── één lijst, nergens tussenmaten.
     Maatstaf is de pagina Retourneren: 15px Poppins in #8A5F58. Alles wat
     lopende tekst is hoort daarop te staan. */
  --t-mini:11px;          /* badge, copyright */
  --t-klein:12px;         /* footer, pills, bijschrift */
  --t-meta:13px;          /* meta-regels, kleine toelichting */
  --t-knop:14px;          /* knoppen, menu, filters */
  --t-basis:15px;         /* LOPENDE TEKST — de standaard */
  --t-lead:17px;          /* introzin onder een kop */
  --t-h3:19px;            /* kleine kop */
  --schaduw:0 10px 30px rgba(92,38,38,.08);
  --schaduw-op:0 18px 44px rgba(92,38,38,.16);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Paginabasis is dezelfde perzik als de header, zodat de kleur boven en onder de
   video doorloopt (zoals op de oude site). De productkaarten blijven wit — daar
   springen de verpakkingen juist op deze vollere perzik goed uit. */
body{font-family:'Poppins',system-ui,sans-serif;color:var(--tekst);background:var(--perzik);
  line-height:1.65;font-weight:400;-webkit-font-smoothing:antialiased;
  /* Pagina vult altijd minstens het scherm; de footer wordt naar onderen geduwd.
     Zonder dit stopt de footer waar de inhoud stopt — bij een korte pagina
     (vier producten) hangt hij dan halverwege het scherm. */
  min-height:100vh;display:flex;flex-direction:column}
.site-main{flex:1 0 auto}
.site-footer{flex-shrink:0}
h1,h2,h3,h4{font-weight:700;line-height:1.15;margin:0 0 .5em;letter-spacing:-.4px}
/* Koppen op de pagina zijn bruin, niet bijna-zwart. Zonder deze regel erven ze
   de tekstkleur (#3D1B18) en dat leest als zwart naast de rest van de huisstijl.
   De hero heeft witte tekst op de video en houdt zijn eigen kleur. */
.site-main h1,.site-main h2,.site-main h3{color:var(--bruin)}
.hero h1,.hero h2,.hero-vol h1,.hero-vol h2{color:#fff}
a{color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--oranje);color:var(--bruin)}

/* ── Aankondigingsbalk ── */
/* Perzik op bruin in plaats van wit — zachter en het blijft binnen de huisstijl. */
.topbalk{background:var(--bruin);color:var(--perzik);text-align:center;padding:10px 18px;
  font-size:var(--t-klein);font-weight:600;letter-spacing:.3px;position:relative;z-index:120}

/* ── Header ── */
.site-header{background:var(--perzik);color:var(--bruin);position:relative;z-index:110}
/* De balk loopt door tot de schermrand, maar logo en menu staan in dezelfde
   1180px-container als de content. Zo eindigt het menu precies boven de
   rechterkolom in plaats van er nog een stuk naast. */
.kop-inner{max-width:var(--breed);margin:0 auto;padding:10px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap}
.site-header .logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
/* Het logo is een merkbeeld (blokletters in een kader) en blijft daarom een afbeelding.
   Bron is 768px breed en staat op ~280px → ook op retina messcherp. */
.logo-mark{width:var(--logo-b,225px);height:auto;border-radius:6px}
.site-header.transparant .logo-mark{filter:drop-shadow(0 4px 16px rgba(0,0,0,.35))}

/* Op de home zweven balk + menu over de video */
.kop-over{position:absolute;left:0;right:0;top:0;z-index:110}
.kop-over .topbalk{background:rgba(92,38,38,.94)}
/* Meldingsbalken zweven op de home mee over de video en krijgen daarom dezelfde
   halfdoorzichtige behandeling als de header erboven. */
.kop-over .shop-dicht-balk{background:rgba(255,240,228,.93);backdrop-filter:blur(10px);border-bottom:0}
.kop-over .site-uit-balk{background:rgba(92,38,38,.95)}
.site-header.transparant{background:rgba(254,215,184,.93);backdrop-filter:blur(10px)}

/* Items dicht op elkaar (~14px), net als op de oude site — met 34px ertussen
   spreidde het menu zich over de halve balk. */
.site-nav{display:flex;align-items:center;gap:clamp(12px,1.3vw,18px);flex-wrap:wrap}
/* Gewoon boekgewicht met een dun streepje eronder — precies zoals de oude site.
   Op 500 met een streep van 2,5px oogde het menu een stuk zwaarder dan het merk. */
.site-nav a{color:var(--bruin);text-decoration:none;font-size:var(--t-knop);font-weight:400;
  padding-bottom:3px;border-bottom:1.5px solid transparent;transition:.15s}
.site-nav a:hover{border-bottom-color:rgba(92,38,38,.3)}
.site-nav a.actief{border-bottom-color:rgba(92,38,38,.75)}
.nav-cart{display:inline-flex;align-items:center;gap:8px;margin-left:6px;position:relative;border-bottom:0!important}
.nav-cart svg{width:23px;height:23px}
.nav-cart .cart-woord{display:none}
.cart-badge{position:absolute;top:-6px;right:-10px;background:var(--rood);color:#fff;border-radius:20px;
  font-size:var(--t-mini);font-weight:700;padding:1px 7px;min-width:20px;text-align:center;
  box-shadow:0 2px 8px rgba(216,94,82,.45)}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.nav-toggle span{display:block;width:26px;height:2.5px;background:var(--bruin);border-radius:2px}

/* ── Winkel gesloten ── */
.shop-dicht-balk{display:flex;align-items:center;justify-content:center;gap:10px;
  background:#FFF0E4;border-bottom:1px solid #F5CFAE;color:#8A4B22;
  padding:12px 20px;font-size:var(--t-knop);font-weight:500;text-align:center}
.shop-dicht-balk svg{flex-shrink:0}
/* Site uit, maar jij bent ingelogd: dan zie je 'm door. Zonder deze balk lijkt de
   schakelaar stuk ("er gebeurt niets"), terwijl bezoekers wél de bouwpagina zien. */
.site-uit-balk{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:#5C2626;color:#FFE9D8;padding:10px 20px;font-size:var(--t-knop);font-weight:600;text-align:center}
.site-uit-balk a{color:#FDB57C;text-decoration:underline;text-underline-offset:2px}
.site-uit-balk .zacht{font-weight:400;color:#E5C3B4}

/* ── Contact ── */
/* Eén witte kaart met een donker informatiepaneel links en het formulier rechts.
   Twee losse kolommen op de perzik gaven veel lege ruimte en niets om het oog
   vast te houden; nu is het één blok met een duidelijke voor- en achterkant. */
.contact-blok{max-width:var(--breed);margin:0 auto;padding:26px 24px 48px}
/* Geen wit: de kaart staat in perzik-diep, de velden erin een tint lichter.
   Zo krijg je drie lagen die allemaal binnen de huisstijl blijven:
   pagina #FED7B8 → kaart #FFE3CB → invulveld #FFF3E9. */
.contact-doos{display:grid;grid-template-columns:330px 1fr;background:var(--perzik-diep);
  border:1px solid var(--lijn);border-radius:10px;overflow:hidden;box-shadow:var(--schaduw)}

.contact-info{background:var(--bruin);color:#F3D9C6;padding:30px 28px 28px}
.contact-info h2{color:#fff;font-size:22px;margin:0 0 8px;letter-spacing:-.3px}
.contact-info .ci-lead{font-size:var(--t-meta);color:#E0BCA6;line-height:1.55;margin:0 0 22px}
.ci-rij{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:var(--t-meta);
  line-height:1.5;color:#F3D9C6}
.ci-rij b{display:block;font-size:var(--t-klein);font-weight:600;color:var(--oranje);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:1px}
.ci-rij a{color:#F3D9C6;text-decoration:none;border-bottom:1px solid rgba(243,217,198,.35)}
.ci-rij a:hover{color:#fff;border-bottom-color:#fff}
.ci-ico{flex-shrink:0;width:20px;height:20px;margin-top:2px;color:var(--oranje)}
.ci-ico svg{width:20px;height:20px;display:block}
/* Klein kaartje onderin het paneel — genoeg om te zien waar we zitten */
.ci-kaart{display:block;position:relative;margin-top:22px;border-radius:8px;overflow:hidden;
  text-decoration:none;background:rgba(0,0,0,.2)}
.ci-kaart iframe{display:block;width:100%;height:130px;border:0;pointer-events:none;filter:saturate(.9)}
.ci-kaart-tekst{display:block;padding:8px 12px;font-size:var(--t-klein);color:#F3D9C6;
  background:rgba(0,0,0,.25)}
.ci-kaart:hover .ci-kaart-tekst{color:#fff;background:rgba(0,0,0,.4)}

.contact-formulier{padding:30px 32px 34px}
.contact-formulier form{margin:0}
.contact-formulier textarea{min-height:104px}
.contact-formulier .btn{margin-top:4px}
.form-voet{margin:14px 0 0;font-size:var(--t-klein);color:var(--muted)}

@media (max-width:820px){
  .contact-doos{grid-template-columns:1fr}
  .contact-info{padding:24px 22px}
  .contact-formulier{padding:24px 22px 28px}
}
/* ── Klantbeoordelingen (home) ── */
/* Donkerbruine kaarten, zoals op de oude site: ze onderbreken de perzik en zijn
   daardoor meteen een ander soort inhoud dan de producten erboven. */
.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.review{background:var(--bruin);color:#F3D9C6;border-radius:var(--radius);padding:22px 24px}
.review-sterren{color:#FFD34D;font-size:var(--t-lead);letter-spacing:2px;line-height:1}
.review-sterren .leeg{color:rgba(255,211,77,.28)}
.review-tekst{margin:12px 0 16px;font-size:var(--t-basis);color:#F3D9C6;line-height:1.5}
.review-wie{display:flex;align-items:center;gap:11px}
.review-bol{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;
  border-radius:50%;overflow:hidden;background:var(--perzik);color:var(--bruin);font-weight:700;
  font-size:var(--t-knop);flex-shrink:0}
/* De uitsnede uit het beheer: object-position schuift, scale zoomt. Het ronde
   venster snijdt de rest weg — de foto zelf blijft ongemoeid op de server. */
.review-bol img{width:100%;height:100%;object-fit:cover;display:block}
.review-wie b{display:block;font-size:var(--t-meta);color:#fff}
.review-wie em{display:block;font-style:normal;font-size:var(--t-klein);color:#E0BCA6}

/* ── Vending ── */
/* Drie kolommen op één scherm: verhaal · machine · formulier. Precies zoals de
   oude site — als losse secties onder elkaar wordt het een lange pagina terwijl
   het één kort verhaal is. De machine is een staande foto (410×630) en krijgt
   daarom een eigen smalle kolom. */
.vend-wrap{max-width:1120px;margin:0 auto;padding:26px 24px 44px;
  display:grid;grid-template-columns:1fr 230px 1fr;gap:38px;align-items:start}
.vend-tekst h1{font-size:clamp(26px,3.2vw,34px);margin:0 0 12px;color:var(--bruin)}
.vend-tekst h2{font-size:var(--t-basis);margin:20px 0 2px;color:var(--bruin)}
.vend-tekst h2.ruim{margin-top:30px}
.vend-tekst p{margin:0;font-size:var(--t-basis);color:var(--muted);line-height:1.6}
.vend-tekst a{color:var(--bruin);text-decoration:underline;text-underline-offset:2px}
.vend-foto{display:flex;justify-content:center;padding-top:6px}
.vend-foto img{width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(92,38,38,.20))}
.vend-form .form-veld{margin-bottom:14px}
.vend-form .btn{width:100%;margin-top:4px}
@media (max-width:980px){
  /* Machine naast de tekst, formulier eronder over de volle breedte */
  .vend-wrap{grid-template-columns:1fr 200px;gap:28px}
  .vend-form{grid-column:1 / -1}
}
@media (max-width:640px){
  .vend-wrap{grid-template-columns:1fr;gap:22px}
  .vend-foto{max-width:210px;margin:0 auto}
  .vend-tekst h1{font-size:26px}
}
/* Melding die verschijnt als iemand tóch op "In winkelwagen" klikt.
   [hidden] moet ná display staan, anders wint display en blijft hij zichtbaar. */
.dicht-melding{display:block;background:#FFF0E4;border:1px solid #F5CFAE;color:#8A4B22;
  font-size:var(--t-meta);font-weight:600;line-height:1.45;padding:10px 14px;border-radius:12px;margin-top:12px}
.dicht-melding[hidden]{display:none}
.dicht-vak{background:#FFF0E4;border:1px solid #F5CFAE;color:#8A4B22;border-radius:var(--radius);
  padding:20px 24px;margin:0 0 24px;font-size:var(--t-basis)}
.dicht-vak b{display:block;margin-bottom:4px;font-size:16px}

/* ── Hero (home, schermvullend) ── */
/* Hero op ~62% van de schermhoogte. Op 88vh vulde de video bijna het hele scherm
   en moest je scrollen voordat je ook maar één product zag — bij een winkel wil
   je dat de categorieën al half in beeld staan. */
/* De hero staat in dezelfde container als het logo, met perzik aan weerszijden.
   Over de volle schermbreedte werd de (staande) bronvideo veel te ver ingezoomd.
   De ruimte bovenin houdt het zwevende menu vrij van de tekst. */
.hero-vol{position:relative;flex-shrink:0;max-width:var(--breed);margin:18px auto 0;
  min-height:24vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--bruin) center/cover no-repeat;color:#fff;text-align:center;
  border-radius:10px;padding:46px clamp(20px,4vw,54px) 44px;overflow:hidden}
/* Video vult het blok; object-fit voorkomt het uitrekken dat de oude site had */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* Wat lager uitsnijden: bij een staande opname zit het onderwerp meestal boven
   het midden, en anders kijk je tegen een schouder aan. */
.hero-video{object-position:center 32%}
/* Warme sluier in plaats van grijs-zwart — houdt het bruin/perzik-gevoel vast */
.hero-vol::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(105deg,rgba(67,26,26,.80) 0%,rgba(67,26,26,.52) 45%,rgba(67,26,26,.20) 100%)}
.hero-vol::before{content:"";position:absolute;left:0;right:0;top:0;height:280px;z-index:2;
  background:linear-gradient(180deg,rgba(67,26,26,.55),rgba(67,26,26,0));pointer-events:none}
.hero-vol-inner{position:relative;z-index:3;max-width:900px}
.hero-streep{display:block;width:120px;max-width:40%;height:5px;background:var(--oranje);
  margin:0 auto 26px;border-radius:3px}
.hero-vol.pos-links {align-items:flex-start;text-align:left; padding-left:clamp(24px,8vw,140px)}
.hero-vol.pos-rechts{align-items:flex-end;  text-align:right;padding-right:clamp(24px,8vw,140px)}
.hero-vol.pos-links  .hero-streep{margin-left:0;margin-right:auto}
.hero-vol.pos-rechts .hero-streep{margin-left:auto;margin-right:0}
.hero-vol.vpos-boven{justify-content:flex-start}
.hero-vol.vpos-onder{justify-content:flex-end}
.hero-vol.pos-links .hero-vol-inner,
.hero-vol.pos-rechts .hero-vol-inner{max-width:min(620px,100%)}
.hero-vol h1{font-size:clamp(32px,4.6vw,54px);font-weight:700;letter-spacing:-1.5px;margin:0;
  text-shadow:0 4px 30px rgba(0,0,0,.35)}
.hero-vol .hero-sub{font-size:clamp(15px,1.5vw,17px);font-weight:400;margin:12px 0 20px;max-width:46ch;
  text-shadow:0 2px 14px rgba(0,0,0,.4)}
.hero-vol:not(.pos-links):not(.pos-rechts) .hero-sub{margin-left:auto;margin-right:auto}
.hero-pijl{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;
  opacity:.75;animation:wip 2.2s ease-in-out infinite}
@keyframes wip{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ── Hero (overige pagina's) ── */
.hero{position:relative;min-height:34vh;display:flex;align-items:center;justify-content:center;
  background:var(--bruin) center/cover no-repeat;color:#fff;text-align:center}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(67,26,26,.5),rgba(67,26,26,.72))}
.hero-inner{position:relative;z-index:1;max-width:var(--breed);padding:56px clamp(20px,5vw,60px)}
.hero h1{font-size:clamp(32px,5.5vw,54px);font-weight:700;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.hero .hero-sub{font-size:var(--t-lead);font-weight:400;margin:14px 0 0;opacity:.92}

/* Paginatitel zonder hero-foto */
/* Geen extra marge bovenop: de sectie eromheen geeft al ruimte. Met 60px erbij
   begon de winkel veel te laag, zeker met de gesloten-balk erboven. */
/* Paginakop: bescheiden, en met lucht erboven — zonder die ruimte plakt de titel
   tegen de balk of het menu erboven. */
.pagina-kop{font-size:clamp(22px,2.4vw,28px);font-weight:700;text-align:center;margin:0 auto;
  max-width:var(--breed);padding:30px 24px 0;color:var(--bruin)}
.pagina-intro{text-align:center;color:var(--muted);max-width:640px;font-size:var(--t-basis);margin:8px auto 0;padding:0 24px}

/* ── Secties ── */
/* Minder lucht bovenaan, zodat winkel en productpagina hoger beginnen — ook met
   de gesloten-balk erboven. Onderaan blijft er wel ruimte tot de footer. */
.sectie{max-width:var(--breed);margin:0 auto;padding:clamp(20px,2.2vw,28px) 24px clamp(30px,4vw,44px)}
.sectie.smal{max-width:860px}
.sectie-boven{display:block;text-align:center;color:var(--muted);font-size:var(--t-knop);
  letter-spacing:1.4px;text-transform:uppercase;margin-bottom:6px}
.sectie-kop{font-size:clamp(22px,2.6vw,28px);font-weight:700;text-align:center;margin:0 0 24px;color:var(--bruin)}
.sectie-kop::after{content:"";display:block;width:56px;height:4px;background:var(--oranje);
  margin:16px auto 0;border-radius:2px}
.blok-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.blok-2 img{border-radius:var(--radius);box-shadow:var(--schaduw-op);margin:0 auto}
.tekst p{margin:0 0 1em}
/* Lopende tekst op de pagina in het zachte bruin (#7A403C), niet in de bijna-zwarte
   basiskleur. Zelfde tint als de tekst op de vending-pagina. */
.sectie p,.sectie li,.tekst p{color:var(--muted)}
.sectie .review p{color:#F3D9C6}
.sectie .btn,.sectie .melding{color:inherit}
.sectie .btn.accent,.sectie .btn:not(.licht):not(.wit){color:#fff}
.sectie .btn.licht{color:var(--bruin)}
.lead{font-size:var(--t-lead)}

/* Volle-breedte witte band, met de inhoud netjes gecentreerd */
/* Was wit. Een wit vlak tussen twee perzik vlakken schreeuwt en trekt de
   aandacht naar de band zelf in plaats van naar de producten erin. Nu dezelfde
   perzik als de rest — de kop en de kaarten doen het werk. */
.band-wit{background:var(--perzik)}

/* ── Categoriekaarten (home) ── */
/* Smaller dan de volle contentbreedte en gecentreerd — drie kaarten van ~290px,
   zoals op de oude site. Over de volle 1180px werden ze onnodig fors. */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  max-width:920px;margin:0 auto}
.cat-kaart{position:relative;display:flex;align-items:flex-end;min-height:150px;border-radius:var(--radius);
  overflow:hidden;text-decoration:none;color:#fff;background:var(--bruin) center/cover no-repeat;
  box-shadow:var(--schaduw);transition:transform .22s,box-shadow .22s}
.cat-kaart::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(67,26,26,.12),rgba(67,26,26,.80))}
.cat-kaart:hover{transform:translateY(-4px);box-shadow:var(--schaduw-op)}
.cat-kaart span{position:relative;z-index:1;padding:22px 24px}
.cat-kaart b{display:block;font-size:26px;font-weight:700;letter-spacing:-.5px}
.cat-kaart em{font-style:normal;font-size:var(--t-knop);opacity:.9}

/* ── USP-blokken ── */
/* Geen witte kaders: alleen icoon, kop en regel direct op de perzik.
   Dat scheelt een laag en houdt de aandacht bij de producten. */
/* Iets dichter op de categorieën — zonder kaders heeft dit blok minder lucht nodig. */
.usp-sectie{padding-top:clamp(14px,2vw,22px)}
.usp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;
  max-width:920px;margin:0 auto}
.usp{background:none;border:0;box-shadow:none;padding:0;text-align:center}
.usp-ico{width:34px;height:34px;margin:0 auto 12px;color:var(--rood)}
.usp-ico svg{width:100%;height:100%}
.usp h3{font-size:var(--t-basis);margin:0 0 5px;color:var(--bruin)}
.usp p{margin:0;color:var(--muted);font-size:var(--t-meta);line-height:1.6}

/* ── Productkaarten ── */
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
/* Vlak op de perzik, zoals de oude site: geen witte kaart, geen randje, geen
   schaduw. De verpakkingen zijn zelf al druk — met een kaart eromheen kreeg je
   drie lagen over elkaar en oogde de winkel zwaar. Het fotovlak houdt wél zijn
   vaste 4:3-verhouding, anders staan een smal blikje en een brede zak niet meer
   op één lijn. */
/* Donker kader als omlijsting, en het licht zit alleen ONDERIN — waar de naam en
   de prijs staan. Boven blijft de kaart open, zodat het blikje gewoon op de
   perzik lijkt te staan in plaats van in een wit vak. */
.prod-kaart,.p-card{position:relative;border:1px solid rgba(92,38,38,.28);
  border-radius:var(--radius);
  background:linear-gradient(180deg,rgba(255,255,255,0) 42%,rgba(255,255,255,.30) 68%,rgba(255,255,255,.62) 100%);
  display:flex;flex-direction:column;transition:background .2s,transform .2s,box-shadow .2s,border-color .2s}
/* Bij hover komt de kaart omhoog, trekt het kader aan en loopt het licht verder
   omhoog — het product waar je op staat springt er dan echt uit. */
.prod-kaart:hover,.p-card:hover{transform:translateY(-5px);border-color:rgba(92,38,38,.55);
  background:linear-gradient(180deg,rgba(255,255,255,.14) 30%,rgba(255,255,255,.55) 62%,rgba(255,255,255,.88) 100%);
  box-shadow:var(--schaduw-op)}
/* contain, niet cover: een blikje of zakje mag niet aangesneden worden */
.prod-foto,.p-card .p-foto{background:transparent center/contain no-repeat;position:relative}
.prod-foto{aspect-ratio:4/3}
/* 4/3 in plaats van vierkant — scheelt flink hoogte per kaart, en een staand
   blikje of zakje past er nog steeds heel in dankzij 'contain'. */
.p-card .p-foto{aspect-ratio:4/3;border-radius:12px}
.prod-foto.leeg,.p-card .p-foto.leeg{display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:var(--t-meta);background-image:none!important}
.prod-body{padding:10px 2px 0;display:flex;flex-direction:column;flex:1}
.prod-kaart h3,.p-card h3{font-size:var(--t-knop);margin:10px 0 4px;color:var(--bruin);line-height:1.3}
.prod-prijs,.p-card .prijs{margin:auto 0 0;font-weight:700;color:var(--bruin);font-size:16px}

/* ── Labelstreepje ────────────────────────────────────────────
   Drie stijlen, te kiezen met een extra class op .p-label:
     (geen)     schuin lint over de rechterbovenhoek
     .verf      penseelstreek — ruwe boven- en onderrand
     .recht     recht bandje in de linkerbovenhoek
   Kleur komt per label uit label_kleuren() in functions.php. */
.p-label{position:absolute;right:-36px;top:16px;z-index:2;
  padding:5px 42px;font-size:var(--t-klein);font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;transform:rotate(32deg);transform-origin:center;
  box-shadow:0 3px 10px rgba(61,27,24,.22);pointer-events:none;white-space:nowrap}

/* Penseelstreek. Een SVG-masker bepaalt de vorm: taps toelopende uiteinden,
   een onregelmatige boven- en onderrand en losse spatten aan de zijkanten —
   dat laatste maakt het verschil met een strak bandje. Het masker werkt op
   de achtergrondkleur, dus elke labelkleur krijgt vanzelf dezelfde vorm. */
.p-label.verf{
  /* Kwast 5 (assets/img/kwast/k5.png) — gekozen om de kromming: de streek zakt
     weg en veert weer op, met een dikke aanzet links. Dat leest als één
     armbeweging in plaats van een lint.
     Meer padding rechts dan links, want de kwast waaiert naar rechts uit; meer
     onder dan boven, omdat de verf in het masker 13% boven het midden ligt. */
  right:-38px;top:14px;padding:4px 66px 12px 30px;transform:rotate(-6deg);
  box-shadow:none;clip-path:none;
  /* Het masker is een echte kwaststreek (assets/img/kwast.png): horizontale
     kwastsporen dóór de streek, uitlopende slierten aan de uiteinden. Met SVG-
     paden krijg je die haarfijne vezels niet — daarvoor zijn het er te veel.
     Het masker werkt op de achtergrondkleur, dus elke labelkleur krijgt vanzelf
     dezelfde vorm en je hoeft nooit een plaatje per kleur te maken. */
  --kwast:url('/assets/img/kwast/k5.png');
  -webkit-mask-image:var(--kwast); mask-image:var(--kwast);
  -webkit-mask-size:100% 100%;     mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;   mask-repeat:no-repeat;
}
/* De zes aangeleverde kwaststreken, omgezet naar maskers. Alleen om te kiezen
   op de voorbeeldpagina; daarna blijft alleen de gekozen over in --kwast hierboven.

   Elke kwast heeft zijn massieve deel op een andere plek — de een loopt rechts
   uit in vezels, de ander is gelijkmatiger. De padding staat daarom per kwast
   apart: de tekst moet op het volle deel vallen, niet op de vezels. */
/* Let op de ongelijke padding boven/onder: in elk masker ligt de verf hóger dan
   het midden van de afbeelding (gemeten: 5 tot 13% van de hoogte). Zonder deze
   correctie zakt de tekst onder de streek weg. Meer ruimte onder = tekst omhoog. */
.p-label.k1{--kwast:url('/assets/img/kwast/k1.png'); padding:5px 60px 13px 30px}
.p-label.k2{--kwast:url('/assets/img/kwast/k2.png'); padding:7px 44px 13px 38px}
.p-label.k3{--kwast:url('/assets/img/kwast/k3.png'); padding:7px 56px 13px 32px}
.p-label.k4{--kwast:url('/assets/img/kwast/k4.png'); padding:4px 52px 10px 34px}
.p-label.k5{--kwast:url('/assets/img/kwast/k5.png'); padding:4px 66px 12px 30px}
.p-label.k6{--kwast:url('/assets/img/kwast/k6.png'); padding:6px 40px 10px 36px}

/* Recht bandje linksboven, zoals een sticker op de verpakking */
.p-label.recht{
  left:0;right:auto;top:0;transform:none;border-radius:0 0 10px 0;
  padding:6px 14px;letter-spacing:.4px;box-shadow:0 2px 8px rgba(61,27,24,.18)}
/* Foto's snijden het lint af, anders steekt het buiten de kaart uit */
.p-card .p-foto,.prod-foto,.prod-detail-foto{overflow:hidden}

/* Oude badge-namen blijven werken voor het geval ze ergens nog gebruikt worden */
.p-badge,.uitverkocht-vlag{position:absolute;left:12px;top:12px;z-index:2;background:var(--rood);
  color:#fff;font-size:var(--t-klein);font-weight:600;padding:4px 12px;border-radius:20px}
.uitverkocht-vlag{background:rgba(255,255,255,.94);color:var(--muted)}

/* Prijs met actie: oude prijs dun doorgestreept, actieprijs ernaast in het rood */
.prijs.is-actie,.prod-prijs.is-actie,.detail-prijs.is-actie{display:flex;align-items:baseline;
  gap:9px;justify-content:center;flex-wrap:wrap}
.detail-prijs.is-actie{justify-content:flex-start}
.oude-prijs{position:relative;color:var(--muted);font-weight:500;font-size:.82em}
/* Eigen streep in plaats van line-through: dun en schuin, zoals met de hand */
.oude-prijs::after{content:"";position:absolute;left:-3%;right:-3%;top:52%;
  height:1.5px;background:var(--muted);opacity:.85;transform:rotate(-9deg)}
.nieuwe-prijs{color:var(--rood);font-weight:700}

.prod-cat{display:inline-block;background:var(--perzik-licht);border:1px solid var(--lijn);color:var(--muted);
  font-size:var(--t-klein);letter-spacing:.5px;text-transform:uppercase;font-weight:600;
  padding:3px 11px;border-radius:20px;margin-bottom:9px}

/* Inhoud + allergenen kort op de kaart — die informatie hoort vóór het afrekenen zichtbaar te zijn */
.p-meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 10px;font-size:var(--t-klein);color:var(--muted)}
.p-meta span{background:var(--perzik-licht);border:1px solid var(--lijn);border-radius:14px;padding:2px 9px}
.p-meta .allergeen{background:#FFF0EE;border-color:#F6D2CE;color:#A8443B}

/* ── Productpagina ── */
.kruimel{font-size:var(--t-meta);color:var(--muted);margin:0 0 20px}
.kruimel a{text-decoration:none}
.kruimel a:hover{text-decoration:underline}
/* Vaste, bescheiden fotokolom — even groot als een kaart in de winkel.
   Met 1fr 1fr werd de foto bijna 570px breed en dat oogde veel te fors. */
/* center in plaats van start: het product hangt nu midden naast de tekst,
   in plaats van bovenaan te blijven plakken terwijl de kolom ernaast doorloopt. */
.prod-detail{display:grid;grid-template-columns:320px 1fr;gap:40px;align-items:center}
/* Helemaal vrij: geen vlak, geen kader, geen schaduw. De foto's zijn zelf
   transparant, dus het blikje staat los op de perzik — dat oogt het rustigst. */
.prod-detail-foto{aspect-ratio:4/3;background:transparent center/contain no-repeat;
  border:0;border-radius:0;position:relative;box-shadow:none}
.prod-detail-foto.leeg{display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--t-knop)}
.prod-detail-info h1{font-size:clamp(26px,3.4vw,38px);color:var(--bruin);margin:0 0 8px}
/* Ondertitel: "One Piece limited edition blikje" */
.detail-onder{font-size:var(--t-lead);font-weight:600;color:var(--muted);margin:0 0 18px}
.detail-prijs{font-size:28px;font-weight:700;color:var(--bruin);margin:0}
.detail-prijs .btw-hint{font-size:var(--t-meta);font-weight:400;color:var(--muted);margin-left:8px}
.btw-los{font-size:var(--t-meta);color:var(--muted);margin:2px 0 18px}
.detail-oms{font-size:var(--t-basis);color:var(--muted);margin:0 0 22px;max-width:46ch;line-height:1.7}
.detail-verzend{font-size:var(--t-meta);color:var(--muted);margin:18px 0 0}

/* Voorraadregel */
.voorraad{font-size:var(--t-knop);font-weight:600;margin:0 0 16px}
.voorraad.ja{color:#2F7D53}
.voorraad.nee{color:var(--muted)}

/* Aantal kiezen + bestellen op één rij */
.koop-rij{display:flex;align-items:stretch;gap:12px;flex-wrap:wrap;margin:0}
.aantal{display:inline-flex;align-items:stretch;background:var(--perzik-licht);
  border:1.5px solid var(--lijn);border-radius:30px;overflow:hidden}
.aantal button{width:42px;border:0;background:none;font-size:var(--t-h3);line-height:1;color:var(--bruin);
  cursor:pointer;font-family:inherit;transition:.15s}
.aantal button:hover:not(:disabled){background:var(--perzik-licht)}
.aantal button:disabled{opacity:.35;cursor:not-allowed}
.aantal input,.aantal span{width:46px;border:0;background:none;text-align:center;
  font-family:inherit;font-size:16px;font-weight:600;color:var(--bruin);
  display:flex;align-items:center;justify-content:center}
.aantal input{-moz-appearance:textfield}
.aantal input::-webkit-outer-spin-button,
.aantal input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.aantal input:focus{outline:none}
/* Knop niet oprekken: hij is zo breed als zijn tekst plus de padding.
   Met flex:1 vulde hij de hele restbreedte en dat oogde fors. */
.koop-rij .btn{flex:0 0 auto}

/* Productinformatie — ingrediënten en allergenen horen zichtbaar te zijn
   vóórdat iemand bestelt, dus geen tabblad of uitklapper. */
.prod-info{background:var(--perzik-licht);border:1px solid var(--lijn);border-radius:var(--radius);
  padding:26px 28px;margin-top:44px;box-shadow:var(--schaduw)}
.prod-info h2{font-size:var(--t-h3);color:var(--bruin);margin:0 0 18px}
.prod-info dl{display:grid;grid-template-columns:200px 1fr;gap:10px 20px;margin:0}
.prod-info dt{font-weight:600;color:var(--bruin);font-size:var(--t-knop)}
.prod-info dd{margin:0;color:var(--muted);font-size:var(--t-knop)}
.prod-info dd.allergeen-regel{color:#A8443B;font-weight:600}
.info-voet{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--lijn);
  font-size:var(--t-meta);color:var(--muted)}

/* Klikbaar deel van een productkaart (foto + naam) */
.p-klik{display:block;text-decoration:none;color:inherit}

/* ── Winkel ── */
.shop-top{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  margin:22px 0 18px;color:var(--muted);font-size:var(--t-meta)}
.cat-filter{display:flex;gap:9px;flex-wrap:wrap}
.cat-filter a{text-decoration:none;background:var(--perzik-licht);border:1.5px solid var(--lijn);border-radius:24px;
  padding:7px 17px;font-size:var(--t-meta);font-weight:500;color:var(--muted);transition:.15s}
.cat-filter a:hover{border-color:var(--oranje);color:var(--bruin)}
.cat-filter a.actief{background:var(--bruin);border-color:var(--bruin);color:#fff}
.sorteer{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.shop-top select{padding:9px 14px;border:1.5px solid var(--lijn);border-radius:24px;font-family:inherit;
  background:var(--perzik-licht);color:var(--bruin)}
/* De rij vult zichzelf op basis van een kaartbreedte. Binnen de container van
   980px komt dat op een gewoon scherm uit op vier kolommen die samen precies de
   volle breedte pakken; op een telefoon worden het er twee.
   LET OP: de bovengrens (205px) moet zó staan dat er nooit een kolom óver is —
   bij een lege kolom eindigt de rij korter dan het menu erboven en hangt dat
   menu er rechts overheen. */
.shop-grid{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(clamp(140px,21vw,var(--kaart-max,205px)),1fr))}
/* Naam, prijs en knop links uitgelijnd onder de foto — zoals de oude site. */
.p-card{text-align:left;padding:12px 12px 14px}
.p-card .prod-cat{margin:10px auto 0}
.p-card .p-oms{color:var(--muted);font-size:var(--t-meta);margin:0 0 8px;line-height:1.5}
.p-card .prijs{margin:auto 0 12px}
.p-card .uit-label{display:inline-block;margin-top:0;background:var(--perzik-licht);border:1px solid var(--lijn);
  color:var(--muted);font-size:var(--t-meta);font-weight:600;padding:6px 15px;border-radius:20px;margin-bottom:12px}
.p-card.is-uit{opacity:.75}
.p-card.is-uit .prijs{color:var(--muted)}
.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* ── Knoppen ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--bruin);color:#fff;
  border:0;padding:11px 25px;border-radius:30px;font-family:inherit;font-size:var(--t-knop);font-weight:600;
  text-decoration:none;cursor:pointer;transition:.18s}
.btn:hover{background:var(--bruin-donker);transform:translateY(-2px);box-shadow:0 10px 24px rgba(92,38,38,.28)}
.btn.accent{background:var(--rood)}
.btn.accent:hover{background:#C24C41}
.btn.licht{background:transparent;color:var(--bruin);border:1.8px solid var(--bruin)}
.btn.licht:hover{background:var(--bruin);color:#fff}
.btn.wit{background:var(--perzik);color:var(--bruin);box-shadow:0 8px 26px rgba(0,0,0,.22)}
.btn.wit:hover{background:var(--perzik-licht)}
.btn.groot{font-size:16px;padding:16px 42px}
.btn.klein{font-size:var(--t-meta);padding:8px 18px}
.btn + .btn{margin-left:10px}

/* ── Formulieren ── */
.form-veld{margin-bottom:16px}
/* Labels klein en in normaal gewicht, zoals op de oude site. Vet en 14px leest
   als een ander lettertype dan de rest en maakt een formulier zwaar. */
.form-veld label{display:block;font-size:var(--t-meta);font-weight:400;color:var(--muted);
  margin-bottom:6px}
.form-veld input,.form-veld textarea,.form-veld select{width:100%;padding:13px 16px;border:1.5px solid var(--lijn);
  border-radius:12px;font-family:inherit;font-size:var(--t-basis);background:var(--perzik-licht);color:var(--tekst)}
.form-veld input:focus,.form-veld textarea:focus{outline:2px solid var(--oranje);outline-offset:1px;border-color:var(--oranje)}
.form-veld textarea{min-height:130px;resize:vertical}
.form-rij{display:flex;gap:16px;flex-wrap:wrap}
.form-rij .form-veld{flex:1;min-width:150px}
.veld-hint{color:var(--muted);font-weight:400;font-size:var(--t-meta)}
.melding{padding:14px 18px;border-radius:12px;margin-bottom:20px;font-size:var(--t-knop)}
.melding.ok{background:#E8F6EE;color:#1B7A3D;border:1px solid #B6E0C4}
.melding.fout{background:#FDEAE8;color:#B42318;border:1px solid #F5C2C0}

/* ── Winkelwagen ── */
.cart-tabel{width:100%;border-collapse:collapse}
.cart-tabel th,.cart-tabel td{padding:13px;border-bottom:1px solid var(--lijn);text-align:left}
.cart-tabel th{color:var(--bruin);font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.5px}
.cart-tabel td.rechts,.cart-tabel th.rechts{text-align:right}
.gratis-pill{display:inline-block;background:#E8F6EE;color:#1B7A3D;border:1px solid #B6E0C4;
  font-size:var(--t-klein);font-weight:600;padding:2px 11px;border-radius:20px}
.verzend-hint{color:var(--muted);font-size:var(--t-meta);padding-top:0!important;border-bottom:0!important;text-align:right}

/* ── Bestelling / betalen ── */
.betaal-vooraf{background:var(--perzik-licht);border:1px solid var(--lijn);border-radius:12px;
  padding:12px 16px;font-size:var(--t-knop);color:var(--muted);margin:4px 0 18px}
.bestel-vak{background:var(--perzik-licht);border:1px solid var(--lijn);border-radius:var(--radius);padding:22px 24px;margin-top:26px}
.bestel-rij{display:flex;justify-content:space-between;gap:16px;padding:8px 0;font-size:var(--t-basis)}
.bestel-rij + .bestel-rij{border-top:1px solid var(--lijn)}
.bestel-regels{margin:14px 0 0;padding-top:14px;border-top:1px solid var(--lijn);font-family:inherit;
  font-size:var(--t-knop);color:var(--muted);white-space:pre-wrap;word-break:break-word}
.betaal-blok{background:var(--perzik-licht);border:1px solid var(--lijn);border-radius:var(--radius);padding:26px;
  margin-top:22px;text-align:center}
.betaal-blok h3{font-size:var(--t-h3);margin:0 0 6px;color:var(--bruin)}
.betaal-blok p{color:var(--muted);font-size:var(--t-knop);margin:0 0 18px}
/* Enige plek die wit MOET blijven: een bankapp leest een QR-code op een
   gekleurde ondergrond onbetrouwbaar. */
.qr-vak{width:230px;max-width:100%;margin:0 auto 18px;background:#fff;padding:10px;border:1px solid var(--lijn);border-radius:12px}
.betaal-gegevens{display:inline-block;text-align:left;font-size:var(--t-knop)}
.betaal-gegevens div{display:flex;gap:18px;padding:5px 0}
.betaal-gegevens span{color:var(--muted);min-width:110px}
.qr-hint{font-size:var(--t-meta);color:var(--muted);margin:18px auto 0;max-width:420px}

/* ── Paginering ── */
.paging{display:flex;justify-content:center;align-items:center;gap:14px;margin-top:44px}
.paging a,.paging span{min-width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;text-decoration:none;color:var(--bruin);font-size:var(--t-knop);transition:.15s}
.paging a:hover{background:var(--perzik-licht)}   /* wit, want de pagina zelf is nu perzik */
.paging .huidig{background:var(--bruin);color:#fff;font-weight:600}

/* ── Footer ── */
/* Ruime band perzik tussen de inhoud en de footer — dat laat de winkel ademen
   en zet de footer duidelijk apart. Was 24px; dat plakte de footer tegen de
   laatste rij kaarten aan. */
.site-footer{background:var(--bruin);color:#F3D9C6;margin-top:40px}
/* Compact gehouden: anders valt de betaalbalk onderin buiten beeld en moet je
   scrollen om te zien waarmee je kunt afrekenen — juist dát wil een klant zien. */
.footer-inner{max-width:var(--breed);margin:0 auto;padding:16px 24px 0;
  display:grid;grid-template-columns:1.9fr .95fr 1fr 1.15fr;gap:16px}
.footer-merk{display:block;text-decoration:none}
.footer-merk img{width:132px;height:auto;border-radius:6px}
.footer-brand p{font-size:var(--t-klein);color:#E0BCA6;margin:5px 0 0;max-width:34ch;line-height:1.4}
/* Ronde icoonknoppen; alleen de kanalen die in het beheer zijn ingevuld worden
   getoond (zie footer.php). Een knop naar een lege pagina leest als kapot. */
.merk-social{display:flex;gap:8px;margin-top:8px}
.merk-social a{display:inline-flex;align-items:center;justify-content:center;color:#E0BCA6;
  width:29px;height:29px;border-radius:50%;color:#F3D9C6;text-decoration:none;
  border:1.5px solid rgba(243,217,198,.35);transition:.16s}
.merk-social a svg{width:14px;height:14px}
.merk-social a:hover{background:var(--oranje);border-color:var(--oranje);
  color:var(--bruin);transform:translateY(-2px)}
/* Bovenkant van het logo op één lijn met de kopjes WINKEL / CONTACT / VRAGEN?.
   De 3px vangt het verschil op tussen de bovenkant van een tekstregel en de
   bovenkant van een afbeelding; met 0 steekt het logo er nog net bovenuit. */
.footer-brand{padding-top:2px}
/* De drie tekstkolommen 2px lager dan het logo — op het oog valt de bovenkant
   van de kopjes dan gelijk met de bovenkant van het logokader. */
.footer-inner > .footer-col:not(.footer-brand){padding-top:6px}
.footer-col h4{color:var(--oranje);font-size:var(--t-mini);font-weight:500;margin-bottom:3px;
  letter-spacing:.4px;text-transform:uppercase}
.footer-col a,.footer-col span{display:block;color:#E0BCA6;text-decoration:none;font-size:var(--t-klein);line-height:1.4;margin-bottom:0}
.footer-col a:hover{color:#fff}
/* Losse regel in een kolom die geen link is (bv. de bereikbaarheid) */
.footer-col .voet-los{color:#E0BCA6;margin-top:6px}
.footer-col .voet-los + .voet-los{margin-top:0}
.footer-col .nowrap{white-space:nowrap}
/* Merkkolom: alleen het logo met de zin eronder — de winkelinformatie staat in
   een eigen kolom met kopje "Winkel", naast Contact. */
.footer-brand .footer-merk{margin-bottom:8px}
/* "Vragen?"-hoek: op de oude site zat hier het nieuwsbriefveld */
.voet-vraag p{font-size:var(--t-klein);color:#E0BCA6;line-height:1.4;margin:0 0 8px;max-width:26ch}
.voet-vraag .btn{color:#E0BCA6;border-color:rgba(224,188,166,.4);margin-top:0;
  padding:7px 15px;font-size:var(--t-klein);font-weight:500}
.voet-vraag .btn:hover{background:var(--oranje);border-color:var(--oranje);color:var(--bruin)}
/* Informatiepagina's uit de footer. Tussenkopjes komen uit de tekst zelf
   (zie info_tekst_naar_html) — zonder die kopjes werd het één lap tekst. */
.info-pagina .tekst{max-width:62ch;margin:0 auto}
.info-pagina .tekst h2{font-size:var(--t-lead);color:var(--bruin);margin:26px 0 4px;
  letter-spacing:-.2px}
.info-pagina .tekst h2:first-child{margin-top:0}
.info-pagina .tekst p{margin:0;font-size:var(--t-basis);color:var(--muted);line-height:1.7}
.info-pagina .tekst p + p{margin-top:12px}
.info-terug{max-width:62ch;margin:32px auto 0;padding-top:18px;border-top:1px solid var(--lijn);
  font-size:var(--t-meta);color:var(--muted)}
/* Betaalbalk: de PNG heeft exact dezelfde bruine achtergrond als de footer (#5C2626),
   dus hij valt naadloos weg — geen kader, geen witte rand nodig. */
.footer-betaal{max-width:var(--breed);margin:0 auto;padding:4px 24px 6px}
.footer-betaal img{width:330px;max-width:100%;height:auto}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);text-align:right;max-width:var(--breed);margin:0 auto;
  padding:5px 24px;font-size:var(--t-mini);color:#E0BCA6}

/* ── Responsive ── */
@media (max-width:980px){
  .usp-grid,.prod-grid,.cat-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .prod-detail{grid-template-columns:1fr;gap:24px}
  .prod-info dl{grid-template-columns:1fr;gap:2px 0}
  .prod-info dt{margin-top:12px}
}
@media (max-width:820px){
  .nav-toggle{display:flex}
  .kop-inner{flex-wrap:wrap}
  .site-nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:16px;padding:8px 0 18px}
  body.nav-open .site-nav{display:flex}
  .kop-over{position:relative}
  .kop-over .topbalk{background:var(--bruin)}
  .site-header.transparant{background:var(--perzik);backdrop-filter:none}
  .nav-cart .cart-woord{display:inline}
  .cart-badge{position:static;margin-left:2px}
  .hero-vol{min-height:auto;padding:70px 22px 84px}
  .blok-2{grid-template-columns:1fr;gap:24px}
  .footer-inner{grid-template-columns:1fr 1fr}
}
/* Onder 640px: velden op 16px. Bij kleinere tekst zoomt iPhone automatisch in
   zodra je een veld aantikt — hinderlijk, juist bij het afrekenen. */
@media (max-width:640px){
  .form-veld input,.form-veld textarea,.form-veld select{font-size:16px}
}
@media (max-width:540px){
  .usp-grid,.prod-grid,.cat-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .sectie{padding:40px 20px}
  .logo-mark{width:200px}
  .btn + .btn{margin-left:0;margin-top:10px}
  .hero-vol h1{letter-spacing:-1px}
}