/* ============================================================
   Kafeïno — gedeeld design system
   Crème achtergrond, goud/mosterd accent, donkerbruine tekst
   ============================================================ */

:root{
  /* Huisstijl: okergeel · wit · zwart */
  --cream:        #FFFFFF;   /* wit (hoofdachtergrond) */
  --cream-2:      #F6F2E8;   /* zacht okertint-wit voor afwisseling */
  --paper:        #FFFFFF;
  --gold:         #E6A81E;   /* okergeel (accent) */
  --gold-deep:    #BE850E;   /* dieper oker (hover/tekst-accent) */
  --gold-soft:    #FBE7B4;   /* licht oker */
  --ink:          #161513;   /* zwart (tekst & footer) */
  --ink-soft:     #57534C;
  --line:         #EAE5DA;
  --green:        #74854C;
  --green-soft:   #E4EAD2;
  --shadow:       0 12px 34px rgba(20,18,15,.13);
  --shadow-sm:    0 4px 14px rgba(20,18,15,.08);
  --radius:       18px;
  --radius-lg:    28px;
  --maxw:         1180px;
  --font-display: "Archivo", "Manrope", system-ui, sans-serif;
  --font-body:    "Manrope", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2{font-family:var(--font-display);font-weight:700;line-height:1.06;letter-spacing:-.02em;margin:0 0 .4em}
h3,h4{font-family:var(--font-body);font-weight:700;line-height:1.18;margin:0 0 .4em}
h1{text-wrap:balance}
h1{font-size:clamp(2.4rem,6vw,4.2rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
h3{font-size:1.3rem}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:84px 0}
.section-tight{padding:52px 0}
.eyebrow{font-family:var(--font-body);font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:.78rem;color:var(--gold-deep);margin-bottom:14px}
.center{text-align:center}
.lead{font-size:1.12rem;color:var(--ink-soft);max-width:560px}
.muted{color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--font-body);font-weight:600;font-size:.98rem;
  padding:14px 28px;border-radius:999px;border:2px solid transparent;
  cursor:pointer;transition:.2s ease;white-space:nowrap;
}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 8px 20px rgba(227,169,44,.32)}
.btn-gold:hover{background:var(--gold-deep);transform:translateY(-2px)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--cream)}
.btn-ghost{background:var(--paper);color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-sm{padding:9px 18px;font-size:.86rem}
.btn-block{width:100%}

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{font-family:var(--font-display);font-weight:700;font-size:1.5rem;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:9px}
.logo .dot{color:var(--gold)}
.logo-mark{height:30px;width:auto;display:block;flex:0 0 auto}
@media(max-width:480px){.logo-mark{height:26px}}
.nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.nav-links a{font-weight:500;font-size:.95rem;color:var(--ink-soft);transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--ink)}
.nav-actions{display:flex;align-items:center;gap:14px}
.cart-btn{position:relative;background:none;border:none;cursor:pointer;font-size:1.3rem;color:var(--ink);padding:6px}
.cart-count{position:absolute;top:-2px;right:-4px;background:var(--gold);color:#fff;font-family:var(--font-body);font-size:.66rem;font-weight:700;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.nav-toggle{display:none;background:none;border:none;font-size:1.6rem;cursor:pointer;color:var(--ink)}

@media(max-width:880px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;top:74px;left:0;right:0;background:var(--cream);
    flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);
    box-shadow:var(--shadow);display:none;
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{display:block;padding:14px 24px}
}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:var(--cream)}
.hero .container{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-top:60px;padding-bottom:60px}
.hero h1{margin-bottom:.3em}
.hero-art{position:relative}
.hero-art .blob{position:absolute;inset:-10% -6%;background:var(--gold-soft);border-radius:48% 52% 60% 40%/55% 45% 55% 45%;z-index:0;filter:blur(2px)}
.hero-art img{position:relative;z-index:1;border-radius:50%;box-shadow:var(--shadow)}
@media(max-width:820px){.hero .container{grid-template-columns:1fr;text-align:center}.hero .lead{margin-inline:auto}.hero-actions{justify-content:center}}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* Hero-illustratie zonder foto: gelaagde organische blobs */
.hero-orb{position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;max-width:440px;margin:0 auto}
.hero-orb .b1{position:absolute;inset:0;border-radius:48% 52% 60% 40%/55% 45% 55% 45%;background:radial-gradient(circle at 32% 28%, var(--gold-soft), var(--gold) 120%);opacity:.9;filter:blur(1px)}
.hero-orb .b2{position:absolute;width:40%;height:40%;right:-3%;top:-3%;border-radius:50%;background:var(--cream-2);box-shadow:var(--shadow-sm)}
.hero-orb .ring{position:absolute;inset:7%;border-radius:50%;border:2px dashed rgba(200,136,26,.38)}
.hero-orb .core{position:relative;z-index:2;width:62%;height:62%;border-radius:50%;background:radial-gradient(circle at 38% 30%, #fff, var(--cream-2));display:flex;align-items:center;justify-content:center;font-size:6.4rem;box-shadow:var(--shadow);filter:drop-shadow(0 8px 14px rgba(120,86,16,.18))}
.hero-orb .bean{position:absolute;z-index:3;font-size:1.7rem;filter:drop-shadow(0 4px 6px rgba(120,86,16,.28));animation:float 5s ease-in-out infinite}
.hero-orb .bean.x1{top:3%;left:0}
.hero-orb .bean.x2{bottom:9%;right:-2%;animation-delay:1.4s}
.hero-orb .bean.x3{bottom:-1%;left:20%;animation-delay:.7s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.hero-orb .bean{animation:none}}

/* ---------- Cards / grids ---------- */
.grid{display:grid;gap:26px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow-sm);overflow:hidden;transition:.25s;border:1px solid var(--line)}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card-pad{padding:22px}
.product{display:flex;flex-direction:column}
.product .thumb{
  position:relative;isolation:isolate;aspect-ratio:1/1;
  display:flex;align-items:center;justify-content:center;font-size:3.9rem;
  background:radial-gradient(125% 125% at 28% 22%, #fff8e9 0%, var(--cream-2) 52%, #ead9b8 100%);
  overflow:hidden;text-shadow:0 6px 11px rgba(120,86,16,.22);
}
.product .thumb > *{filter:drop-shadow(0 6px 10px rgba(120,86,16,.22))}
.product .thumb::before{ /* organische gouden blob */
  content:"";position:absolute;z-index:-1;width:74%;height:74%;
  background:radial-gradient(circle at 34% 30%, var(--gold-soft), var(--gold) 135%);
  border-radius:46% 54% 60% 40%/55% 45% 55% 45%;opacity:.5;filter:blur(1px);
  transition:transform .55s cubic-bezier(.22,1,.36,1);
}
.product .thumb::after{ /* fijne stippelring */
  content:"";position:absolute;z-index:-1;width:58%;height:58%;border-radius:50%;
  border:2px dashed rgba(200,136,26,.30);
}
.card:hover .product .thumb::before,.product:hover .thumb::before{transform:scale(1.12) rotate(9deg)}
.product .body{padding:18px;display:flex;flex-direction:column;gap:6px;flex:1}
.product h3{font-size:1.08rem;margin:0}
.product .price{font-weight:700;color:var(--gold-deep);font-family:var(--font-body)}
.product .row{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:10px}

.badge{display:inline-block;font-size:.7rem;font-weight:600;letter-spacing:.04em;padding:4px 11px;border-radius:999px;background:var(--gold-soft);color:var(--gold-deep)}
.badge.green{background:var(--green-soft);color:var(--green)}

/* ---------- Feature / split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow)}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:28px}}

/* ---------- Pills / tabs / filters ---------- */
.tabs{display:inline-flex;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px;gap:4px;box-shadow:var(--shadow-sm)}
.tab{border:none;background:none;font-family:var(--font-body);font-weight:600;font-size:.9rem;color:var(--ink-soft);padding:9px 22px;border-radius:999px;cursor:pointer;transition:.2s}
.tab.active{background:var(--gold);color:#fff}

.chip{display:inline-flex;align-items:center;gap:.4em;border:1.5px solid var(--line);background:var(--paper);border-radius:999px;padding:8px 16px;font-size:.85rem;font-weight:500;cursor:pointer;transition:.2s}
.chip.active,.chip:hover{border-color:var(--gold);background:var(--gold-soft);color:var(--gold-deep)}

/* ---------- Banner / CTA ---------- */
.cta-band{background:linear-gradient(120deg,var(--gold) 0%,var(--gold-deep) 100%);color:#fff;border-radius:var(--radius-lg);padding:54px;text-align:center;position:relative;overflow:hidden}
.cta-band h2{color:#fff}
.cta-band .lead{color:rgba(255,255,255,.92);margin-inline:auto}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#d9d1c4;padding:60px 0 28px;margin-top:0}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px}
@media(max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}}
.site-footer h4{color:#fff;font-family:var(--font-body);font-weight:600;font-size:.95rem;letter-spacing:.04em;margin-bottom:16px}
.site-footer .logo{color:#fff;margin-bottom:14px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:10px}
.site-footer a:hover{color:var(--gold)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:40px;padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.85rem;color:#9d9588}
.social{display:flex;gap:12px}
.social a{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center;transition:.2s}
.social a:hover{background:var(--gold);color:#fff}

/* ---------- Builder ---------- */
.builder-step{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:18px}
.builder-step .step-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.step-num{width:30px;height:30px;border-radius:50%;background:var(--gold);color:#fff;font-weight:700;font-family:var(--font-body);display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}
.opt-row{display:flex;flex-wrap:wrap;gap:10px}
.bar-sticky{position:sticky;bottom:0;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:16px 0}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.field label{font-size:.85rem;font-weight:600;color:var(--ink-soft)}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:.95rem;padding:12px 14px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--paper);color:var(--ink);
  width:100%;max-width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.field-row{grid-template-columns:1fr}}

/* ---------- Order summary ---------- */
.summary{background:var(--gold-soft);border-radius:var(--radius);padding:26px;position:sticky;top:90px}
.summary .line{display:flex;justify-content:space-between;padding:7px 0;font-size:.92rem}
.summary .total{border-top:1.5px solid rgba(43,38,32,.18);margin-top:10px;padding-top:12px;font-weight:700;font-size:1.15rem}

/* ---------- Map placeholder ---------- */
.map-wrap{background:var(--cream-2);border-radius:var(--radius);min-height:420px;position:relative;overflow:hidden;border:1px solid var(--line)}
.map-pin{position:absolute;width:40px;height:40px;background:var(--gold);color:#fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm)}
.map-pin span{transform:rotate(45deg);font-size:1rem}

/* ---------- Modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(43,38,32,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:var(--paper);border-radius:var(--radius-lg);max-width:420px;width:100%;padding:34px;text-align:center;box-shadow:var(--shadow)}
.stars{display:flex;gap:8px;justify-content:center;font-size:2rem;color:var(--line);margin:14px 0}
.stars .star{cursor:pointer;transition:.15s}
.stars .star.on,.stars .star:hover{color:var(--gold)}

/* ---------- Utility ---------- */
.flex{display:flex}
.between{justify-content:space-between}
.items-center{align-items:center}
.gap-sm{gap:10px}
.mt-1{margin-top:10px}.mt-2{margin-top:22px}.mb-0{margin-bottom:0}
.wave-top{display:block;width:100%;height:auto}
.hidden{display:none!important}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120%);background:var(--ink);color:#fff;padding:14px 24px;border-radius:999px;box-shadow:var(--shadow);z-index:200;transition:.3s;font-size:.9rem}
.toast.show{transform:translateX(-50%) translateY(0)}

/* ============================================================
   POLISH LAYER — premium afwerking (animaties, a11y, micro-UX)
   ============================================================ */

/* ---- Skip-link (toegankelijkheid) ---- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:300;background:var(--ink);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;font-weight:600}
.skip-link:focus{left:0}

/* ---- Zichtbare focus voor toetsenbordgebruikers ---- */
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:6px}
.btn:focus-visible{outline-offset:4px}

/* ---- Selectie-kleur in huisstijl ---- */
::selection{background:var(--gold-soft);color:var(--ink)}

/* ---- Vloeiender scroll-gedrag al aanwezig; tekst-render ---- */
body{text-rendering:optimizeLegibility}

/* ---- Header: krimpt + diept uit bij scrollen ---- */
.site-header{transition:box-shadow .3s ease, background .3s ease, height .3s ease}
.site-header .nav{transition:height .3s ease}
.site-header.scrolled{background:rgba(255,255,255,.94);box-shadow:0 6px 24px rgba(43,38,32,.08)}
.site-header.scrolled .nav{height:62px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--gold);border-radius:2px;transition:right .28s cubic-bezier(.22,1,.36,1)}
.nav-links a:hover::after,.nav-links a.active::after{right:0}

/* ---- Hamburger → animeert naar kruis ---- */
.nav-toggle{position:relative;z-index:60}

/* ---- Mobiel: slide-in paneel + overlay i.p.v. dropdown ---- */
.nav-backdrop{position:fixed;inset:0;background:rgba(43,38,32,.45);backdrop-filter:blur(2px);opacity:0;visibility:hidden;transition:.3s;z-index:45}
.nav-backdrop.open{opacity:1;visibility:visible}
@media(max-width:880px){
  /* De header heeft een backdrop-filter (blur). Dat maakt de header het
     referentiekader (containing block) voor position:fixed-kinderen, waardoor
     het schuifmenu vastgeklemd werd in de ~74px hoge header en amper zichtbaar
     was. Op mobiel zetten we de blur af zodat het paneel weer t.o.v. het scherm
     positioneert (volle hoogte). De achtergrond maken we wat dekkender voor
     een nette, leesbare balk zonder blur. */
  .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.97)}
  .nav-links{
    position:fixed;top:0;right:0;left:auto;bottom:0;width:min(80vw,320px);
    flex-direction:column;gap:0;padding:84px 0 24px;border:none;border-radius:0;
    background:var(--cream);box-shadow:-12px 0 40px rgba(43,38,32,.18);z-index:55;
    transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);display:flex;
  }
  .nav-links.open{transform:translateX(0)}
  .nav-links a{font-size:1.05rem;padding:16px 28px;border-bottom:1px solid var(--line)}
  .nav-links a::after{display:none}
}

/* ---- Buttons: meer leven + actieve indruk ---- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.5),transparent 60%);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.btn:active{transform:translateY(0) scale(.97)}
.btn-gold:hover{box-shadow:0 12px 28px rgba(227,169,44,.42)}

/* ---- Cards: zachtere lift + gouden randgloed ---- */
.card{transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s,border-color .3s}
.card:hover{border-color:var(--gold-soft)}
.product .body h3{transition:color .2s}
.card:hover .product h3,.product:hover h3{color:var(--gold-deep)}

/* ---- Echte productfoto's (vervangt emoji-thumb wanneer aanwezig) ---- */
.product .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.card:hover .product .thumb img,.product:hover .thumb img{transform:scale(1.06)}
.media{position:relative;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow)}
.media img{width:100%;height:100%;object-fit:cover;display:block}
.ratio-4-3{aspect-ratio:4/3}
.ratio-1-1{aspect-ratio:1/1}
.ratio-16-9{aspect-ratio:16/9}

/* ---- Scroll-reveal ---- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal][data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal][data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal][data-reveal-delay="3"]{transition-delay:.24s}

/* ---- USP / vertrouwen-strip ---- */
.usp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;list-style:none;margin:0;padding:0}
.usp-strip li{display:flex;gap:12px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-sm)}
.usp-strip .ico{font-size:1.5rem;line-height:1;flex-shrink:0}
.usp-strip b{display:block;font-family:var(--font-body);font-size:.98rem}
.usp-strip span{font-size:.85rem;color:var(--ink-soft)}
@media(max-width:880px){.usp-strip{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.usp-strip{grid-template-columns:1fr}}

/* ---- Testimonials ---- */
.quote-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px}
.quote-card .qstars{color:var(--gold);letter-spacing:2px}
.quote-card p{margin:0;font-size:1.02rem}
.quote-card .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote-card .who .av{width:42px;height:42px;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-soft),var(--gold));display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-family:var(--font-body)}
.quote-card .who b{font-family:var(--font-body);font-size:.92rem}
.quote-card .who span{font-size:.8rem;color:var(--ink-soft)}

/* ---- FAQ (details/summary) ---- */
.faq{max-width:760px;margin:0 auto}
.faq details{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:12px;overflow:hidden;transition:border-color .2s}
.faq details[open]{border-color:var(--gold-soft)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:600;display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.4rem;color:var(--gold-deep);transition:transform .25s;line-height:1}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 22px 20px;color:var(--ink-soft);font-size:.96rem}

/* ---- Sectie-eyebrow centreren helper ---- */
.center .eyebrow{display:block}

/* ---- Lazy images: zachte fade-in ---- */
img[loading="lazy"]{background:var(--cream-2)}

/* ---- Respecteer reduced-motion overal ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1;transform:none}
}

/* ============================================================
   Hero v2 — premium koffievisual (vervangt .hero-orb look)
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 520px at 80% -10%, var(--gold-soft) 0%, rgba(246,223,166,0) 60%),
    radial-gradient(720px 420px at 4% 116%, var(--green-soft) 0%, rgba(228,234,210,0) 55%),
    var(--cream);
}
.hero .container{
  display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;
  padding-top:74px;padding-bottom:88px;position:relative;z-index:2;
}
.hero-glow{
  position:absolute;top:-170px;right:-130px;width:580px;height:580px;border-radius:50%;
  background:radial-gradient(circle at 42% 38%, rgba(227,169,44,.30), rgba(227,169,44,0) 66%);
  filter:blur(8px);z-index:1;pointer-events:none;
}
.hero h1{margin-bottom:.28em}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.hero-trust{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;list-style:none;
  margin:24px 0 0;padding:0;color:var(--ink-soft);font-size:.92rem;font-weight:500;
}
.hero-trust .stars{color:var(--gold);letter-spacing:1px}
.hero-trust .dotsep{color:var(--line)}

/* Visual ------------------------------------------------- */
.hero-visual{position:relative;aspect-ratio:1/1;max-width:460px;width:100%;margin:0 auto}
.hero-disc{
  position:absolute;inset:8%;border-radius:50%;
  background:radial-gradient(circle at 36% 30%, #fff 0%, var(--cream-2) 60%, #efe0c2 100%);
  box-shadow:0 30px 60px rgba(120,86,16,.22), inset 0 0 0 1px rgba(255,255,255,.6);
  display:flex;align-items:center;justify-content:center;
}
.hero-disc::before{content:"";position:absolute;inset:6%;border-radius:50%;border:2px dashed rgba(200,136,26,.42)}
.hero-disc::after{
  content:"";position:absolute;inset:-3%;border-radius:50%;z-index:-1;
  background:conic-gradient(from 200deg, var(--gold), var(--gold-soft), var(--green), var(--gold));
  opacity:.16;filter:blur(12px);
}
.hero-disc .cup{
  position:relative;z-index:2;font-size:clamp(5rem,12vw,8rem);
  filter:drop-shadow(0 12px 16px rgba(120,86,16,.22));
  animation:cupFloat 6s ease-in-out infinite;
}

/* Stoom */
.steam{
  position:absolute;top:13%;width:8px;height:46px;border-radius:50px;z-index:3;opacity:0;
  background:linear-gradient(to top, rgba(255,255,255,0), rgba(255,255,255,.85));filter:blur(3px);
}
.steam.s1{left:44%;animation:steam 3.6s ease-in-out infinite}
.steam.s2{left:50%;animation:steam 3.6s ease-in-out .9s infinite}
.steam.s3{left:56%;animation:steam 3.6s ease-in-out 1.8s infinite}

/* Zwevende bonen */
.hero-visual .bean,.hero-visual .leaf{
  position:absolute;z-index:4;font-size:1.9rem;
  filter:drop-shadow(0 6px 8px rgba(120,86,16,.3));animation:float 5s ease-in-out infinite;
}
.hero-visual .b-a{top:2%;left:7%}
.hero-visual .b-b{bottom:15%;right:1%;animation-delay:1.2s}
.hero-visual .leaf{bottom:-1%;left:30%;font-size:2.1rem;animation-delay:.6s}

/* Zwevende glas-badges */
.float-badge{
  position:absolute;z-index:5;display:flex;align-items:center;gap:10px;
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:16px;padding:11px 15px;
  box-shadow:var(--shadow);animation:float 6s ease-in-out infinite;
}
.float-badge .sub{font-family:var(--font-body);font-size:.72rem;line-height:1.25;color:var(--ink-soft);font-weight:500}
.badge-rating{top:5%;right:-4%}
.badge-rating .big{font-family:var(--font-display);font-weight:800;font-size:1.5rem;color:var(--ink)}
.badge-rating .stars{color:var(--gold);font-size:.72rem;letter-spacing:1px}
.badge-loc{bottom:7%;left:-6%;animation-delay:1.5s}
.badge-loc .ico{font-size:1.4rem}
.badge-loc b{color:var(--ink);font-size:.92rem;font-family:var(--font-display)}

@keyframes cupFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes steam{0%{opacity:0;transform:translateY(0) scaleX(1)}30%{opacity:.7}100%{opacity:0;transform:translateY(-34px) scaleX(1.6)}}

@media(max-width:820px){
  .hero .container{grid-template-columns:1fr;text-align:center;padding-top:48px;padding-bottom:56px}
  .hero .lead{margin-inline:auto}
  .hero-actions,.hero-trust{justify-content:center}
  .hero-visual{max-width:330px;margin-top:22px}
  .badge-rating{right:-2%}
  .badge-loc{left:-2%}
}
@media(prefers-reduced-motion:reduce){
  .hero-disc .cup,.hero-visual .bean,.hero-visual .leaf,.float-badge{animation:none}
  .steam{display:none}
}

/* ============================================================
   Hero v3 — full-bleed media (video/poster) met crème-veil
   ============================================================ */
.hero--media{position:relative;min-height:min(90vh,780px);display:flex;align-items:center;overflow:hidden;background:var(--ink);padding:0}
.hero--media .container{display:block}              /* override grid uit hero v2 */
.hero--media .hero-glow{display:none}
.hero-media{position:absolute;inset:0;z-index:0}
.hero-vid{width:100%;height:100%;object-fit:cover;object-position:65% center}
.hero-media .hero-veil{position:absolute;inset:0;
  background:linear-gradient(98deg,var(--cream) 0%,rgba(251,245,233,.97) 24%,rgba(251,245,233,.72) 46%,rgba(251,245,233,.32) 66%,rgba(251,245,233,.04) 85%,rgba(251,245,233,0) 100%);}
.hero-media .hero-grain{position:absolute;inset:0;opacity:.045;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hero--media .hero-inner{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:40px;width:100%;padding-top:64px;padding-bottom:72px}
.hero--media .hero-copy{max-width:580px;animation:heroIn .9s cubic-bezier(.22,1,.36,1) both}
.hero--media h1{font-size:clamp(2.6rem,6.2vw,4.6rem);margin-bottom:.26em}
.hero--media .lead{font-size:1.14rem;color:var(--ink-soft);max-width:520px}
@keyframes heroIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

/* Zwevende glas-cards (desktop) */
.hero-floats{position:relative;flex:0 0 auto;width:320px;height:400px}
.hero-card{position:absolute;width:212px;margin:0;border-radius:18px;overflow:hidden;
  background:#fff;border:1px solid rgba(20,18,15,.06);
  box-shadow:0 26px 60px rgba(20,18,15,.34);animation:float 7s ease-in-out infinite}
.hero-card img{width:100%;height:168px;object-fit:cover;object-position:center;display:block}
.hero-card figcaption{font-family:var(--font-body);font-size:.8rem;font-weight:600;color:var(--ink);padding:10px 12px;text-align:center;border-top:2px solid var(--gold)}
.hero-card.hc-1{top:26px;right:54px}
.hero-card.hc-2{bottom:8px;right:-6px;animation-delay:1.3s;width:190px}
@media(max-width:1080px){.hero-floats{display:none}}

/* Scroll-cue */
.hero-scroll{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;width:26px;height:42px;
  border:2px solid rgba(43,38,32,.38);border-radius:14px;display:flex;justify-content:center;align-items:flex-start;padding-top:7px}
.hero-scroll span{width:4px;height:8px;border-radius:2px;background:var(--gold-deep);animation:cueMove 1.8s ease-in-out infinite}
@keyframes cueMove{0%,100%{opacity:0;transform:translateY(0)}40%{opacity:1}70%{opacity:0;transform:translateY(11px)}}

@media(max-width:900px){
  .hero--media{min-height:78vh}
  .hero-media .hero-veil{background:linear-gradient(180deg,rgba(251,245,233,.92) 0%,rgba(251,245,233,.55) 46%,rgba(251,245,233,.92) 100%)}
  .hero--media .hero-inner{padding-top:48px;padding-bottom:60px}
}
@media(prefers-reduced-motion:reduce){
  .hero--media .hero-copy,.hero-card,.hero-scroll span{animation:none}
}

/* ============================================================
   Winkelmandje-drawer + sticky bestelbalk + promo-popup
   (B&B-geïnspireerd, in Kafeïno-huisstijl)
   ============================================================ */

/* ---- Cart drawer ---- */
.kf-cart{position:fixed;inset:0;z-index:120;visibility:hidden}
.kf-cart .kf-bg{position:absolute;inset:0;background:rgba(43,38,32,.5);backdrop-filter:blur(2px);opacity:0;transition:.3s}
.kf-cart aside{position:absolute;top:0;right:0;height:100%;width:min(420px,94vw);background:var(--cream);
  transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;
  box-shadow:-14px 0 44px rgba(43,38,32,.28)}
.kf-cart.open{visibility:visible}
.kf-cart.open .kf-bg{opacity:1}
.kf-cart.open aside{transform:translateX(0)}
.kf-cart-head{display:flex;align-items:center;justify-content:space-between;padding:22px 22px 14px;border-bottom:1px solid var(--line)}
.kf-cart-head h3{margin:0;font-family:var(--font-display);font-size:1.3rem}
.kf-cart-close{background:none;border:none;font-size:1.5rem;line-height:1;cursor:pointer;color:var(--ink-soft);padding:6px;border-radius:50%}
.kf-cart-close:hover{color:var(--ink)}
.kf-cart-body{flex:1;overflow-y:auto;padding:16px 22px}
.kf-cart-empty{text-align:center;color:var(--ink-soft);padding:48px 10px}
.kf-cart-empty .ico{font-size:3rem;display:block;margin-bottom:12px}
.kf-line{display:flex;gap:12px;align-items:flex-start;padding:14px 0;border-bottom:1px dashed var(--line)}
.kf-line .kf-thumb{width:46px;height:46px;flex:0 0 auto;border-radius:12px;background:radial-gradient(125% 125% at 28% 22%,#fff8e9,var(--cream-2) 60%,#ead9b8);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.kf-line .kf-info{flex:1;min-width:0}
.kf-line .kf-nm{font-weight:600;font-size:.95rem;line-height:1.25}
.kf-line .kf-pr{color:var(--gold-deep);font-weight:700;font-size:.9rem;margin-top:2px}
.kf-line .kf-rm{background:none;border:none;color:var(--ink-soft);cursor:pointer;font-size:.78rem;text-decoration:underline;padding:4px 0;margin-top:4px}
.kf-line .kf-rm:hover{color:#a23b2c}
.kf-qty{display:inline-flex;align-items:center;gap:0;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper);flex:0 0 auto}
.kf-qty button{width:30px;height:30px;border:none;background:none;font-size:1.1rem;line-height:1;cursor:pointer;color:var(--ink);transition:.15s}
.kf-qty button:hover{background:var(--gold-soft);color:var(--gold-deep)}
.kf-qty span{min-width:26px;text-align:center;font-weight:600;font-size:.9rem}
.kf-cart-foot{border-top:1px solid var(--line);padding:18px 22px 22px;background:var(--cream-2)}
.kf-cart-foot .kf-sub{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px}
.kf-cart-foot .kf-sub b{font-family:var(--font-display);font-size:1.4rem;color:var(--ink)}
.kf-cart-foot .muted{font-size:.78rem;margin:10px 0 0;text-align:center}

/* ---- Sticky bestelbalk ---- */
.kf-orderbar{position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(140%);transition:transform .35s ease;
  background:rgba(43,38,32,.97);backdrop-filter:blur(8px);color:#fff;box-shadow:0 -8px 30px rgba(43,38,32,.28)}
.kf-orderbar.show{transform:none}
.kf-orderbar .inner{max-width:var(--maxw);margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.kf-orderbar .kf-ob-info{display:flex;align-items:center;gap:12px;min-width:0}
.kf-orderbar .kf-ob-count{background:var(--gold);color:#fff;font-weight:700;font-size:.85rem;min-width:26px;height:26px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 6px}
.kf-orderbar .kf-ob-txt{font-size:.92rem}
.kf-orderbar .kf-ob-txt b{font-family:var(--font-display);font-size:1.1rem}
.kf-orderbar .kf-ob-actions{display:flex;gap:10px;flex:0 0 auto}
@media(max-width:520px){
  .kf-orderbar .kf-ob-txt small{display:none}
  .kf-orderbar .inner{padding:10px 16px}
}

/* ---- Promo-popup ---- */
.kf-promo{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;visibility:hidden;opacity:0;transition:opacity .3s}
.kf-promo.open{visibility:visible;opacity:1}
.kf-promo .kf-bg{position:absolute;inset:0;background:rgba(43,38,32,.55)}
.kf-promo .kf-card{position:relative;background:var(--paper);border-radius:var(--radius-lg);max-width:420px;width:100%;overflow:hidden;
  box-shadow:var(--shadow);transform:translateY(16px) scale(.97);transition:transform .3s}
.kf-promo.open .kf-card{transform:none}
.kf-promo .kf-top{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;text-align:center;padding:30px 26px 24px}
.kf-promo .kf-top .big{font-size:2.6rem;line-height:1}
.kf-promo .kf-top h3{color:#fff;font-family:var(--font-display);font-size:1.5rem;margin:10px 0 0}
.kf-promo .kf-top--img{padding:0;background:none}
.kf-promo .kf-flyer{display:block;width:100%;height:auto}
.kf-promo .kf-in .kf-title{font-family:var(--font-display);font-size:1.4rem;color:var(--ink);margin:0 0 6px}
.kf-promo .kf-in{padding:24px 26px 26px;text-align:center}
.kf-promo .kf-in p{color:var(--ink-soft);font-size:.95rem}
.kf-promo .kf-x{position:absolute;top:12px;right:14px;background:rgba(255,255,255,.25);border:none;color:#fff;width:32px;height:32px;border-radius:50%;font-size:1.1rem;cursor:pointer;z-index:2;line-height:1}
.kf-promo .kf-x:hover{background:rgba(255,255,255,.4)}

/* ============================================================
   Hero v4 — Bold poster (Clash Display) — homepage
   ============================================================ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hero-bold{position:relative;width:100%;max-width:none;margin:0;padding:clamp(34px,5vw,64px) 0 clamp(40px,6vw,72px);overflow:hidden;min-height:clamp(480px,62vw,660px);display:flex;align-items:center}
.hero-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0}
.hero-veil{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,#fff 0%,rgba(255,255,255,0) 13%),linear-gradient(100deg,#fff 0%,rgba(255,255,255,.99) 34%,rgba(255,255,255,.8) 50%,rgba(255,255,255,.26) 70%,rgba(255,255,255,0) 88%)}
@media(max-width:860px){.hero-veil{background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 44%,rgba(255,255,255,.92) 100%)}}
.hero-bold .container.hero-inner{position:relative;z-index:2;width:100%}
.hero-bold .kh-poster{position:relative;z-index:2;max-width:600px;width:100%}
.hero-bold .kh-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:center}
.kh-poster{position:relative}
.kh-poster::before{content:"";position:absolute;left:-5%;top:-4%;width:58%;height:38%;background:var(--gold);border-radius:28px;transform:rotate(-3deg);z-index:0;box-shadow:var(--shadow-sm);opacity:.95}
.kh-content{position:relative;z-index:2}
.kh-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:700;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);background:#fff;border:1.5px solid var(--ink);padding:8px 14px;border-radius:999px;box-shadow:3px 3px 0 var(--gold)}
.kh-title{font-family:var(--font-display);font-weight:800;font-size:clamp(38px,5.6vw,70px);line-height:.95;letter-spacing:-.03em;margin:16px 0 0;text-wrap:balance;color:var(--ink)}
.kh-title .ac{color:var(--ink)}
.kh-title .hl{color:var(--gold-deep)}
.kh-rot{display:inline-block;color:var(--gold-deep);position:relative;white-space:nowrap;transition:opacity .36s cubic-bezier(.22,1,.36,1),transform .36s cubic-bezier(.22,1,.36,1)}
.kh-rot::after{content:"";position:absolute;left:.02em;right:.02em;bottom:.04em;height:.08em;background:var(--gold);border-radius:999px;opacity:.9}
.kh-rot.is-swap{opacity:0;transform:translateY(.32em)}
.kh-dot{color:var(--gold-deep)}
.kh-sub{font-family:var(--font-body);font-size:clamp(15px,1.8vw,18px);line-height:1.55;color:var(--ink-soft);max-width:46ch;margin:16px 0 0;text-wrap:pretty}
.hero-bold .kh-actions{margin-top:20px}
.kh-trust{display:flex;flex-wrap:wrap;align-items:center;gap:9px 16px;margin-top:18px;font-size:13.5px;color:var(--ink-soft);font-weight:500}
.kh-trust .kh-sep{width:5px;height:5px;border-radius:50%;background:var(--gold)}
.kh-stars{color:var(--gold-deep);letter-spacing:1px}
.kh-media{position:relative;min-height:clamp(380px,50vw,540px)}
.kh-media-video{display:block;min-height:0;height:clamp(360px,48vw,540px)}
.kh-video{width:100%;height:100%;object-fit:cover;display:block;mix-blend-mode:multiply}
@media(max-width:920px){.kh-media-video{height:clamp(300px,72vw,420px);margin-top:8px}}
.kh-collage{position:absolute;inset:0;display:grid;grid-template-columns:1.12fr .88fr;grid-template-rows:1fr 1fr;gap:14px}
.kh-c{position:relative;margin:0;border-radius:22px;overflow:hidden;box-shadow:var(--shadow);outline:1px solid rgba(0,0,0,.07);outline-offset:-1px}
.kh-c img{width:100%;height:100%;object-fit:cover;display:block}
.kh-c-main{grid-row:1 / span 2}
.kh-c figcaption{position:absolute;left:10px;bottom:10px;font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.02em;color:var(--ink);background:rgba(255,255,255,.92);padding:5px 11px;border-radius:999px;box-shadow:var(--shadow-sm);backdrop-filter:saturate(1.1)}

/* Acties / promo-kaarten (gedeeld met acties.html) */
.promo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
/* Gecentreerde variant: 3 boven, 2 onder symmetrisch (homepage acties) */
.promo-grid--center{display:flex;flex-wrap:wrap;justify-content:center;gap:22px}
.promo-grid--center .promo{flex:0 1 calc(33.333% - 15px)}
@media(max-width:820px){.promo-grid--center .promo{flex:0 1 calc(50% - 11px)}}
@media(max-width:520px){.promo-grid--center .promo{flex:0 1 100%}}
.promo{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
.promo:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.promo .top{background:radial-gradient(125% 125% at 28% 22%,#fff8e9,var(--cream-2));aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;font-size:3rem;overflow:hidden}
.promo .top img{width:100%;height:100%;object-fit:cover;display:block}
.promo .b{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1}
.promo h3{margin:0;font-size:1.1rem}
.promo .tag{align-self:flex-start;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--gold-deep);background:var(--gold-soft);padding:4px 11px;border-radius:999px}

/* Locaties + kaart (homepage 'Vind ons') */
.locmap{display:grid;grid-template-columns:1.15fr .85fr;gap:30px;align-items:start}
@media(max-width:820px){.locmap{grid-template-columns:1fr}.locmap .map-wrap{position:relative!important;top:0!important;min-height:340px}}
.kh-sticker{position:absolute;right:-16px;bottom:-16px;width:clamp(112px,14vw,144px);height:clamp(112px,14vw,144px);z-index:4;animation:khspin 20s linear infinite}
.kh-disc{width:100%;height:100%;border-radius:50%;background:var(--gold);box-shadow:var(--shadow);border:3px solid var(--ink)}
.kh-sticker svg{position:absolute;inset:0;width:100%;height:100%}
.kh-sticker text{font-family:var(--font-display);font-weight:700;font-size:8.4px;letter-spacing:.2em;fill:var(--ink);text-transform:uppercase}
.kh-center{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.kh-center span{font-size:clamp(22px,3.2vw,30px);line-height:1}
@keyframes khspin{to{transform:rotate(360deg)}}
@media(max-width:920px){.hero-bold .kh-grid{grid-template-columns:1fr}.kh-media{min-height:clamp(330px,80vw,440px);margin-top:16px}.kh-poster::before{height:32%}}
@media(max-width:480px){.kh-title{font-size:clamp(40px,12vw,56px)}.kh-collage{gap:10px}.kh-c{border-radius:16px}.kh-c figcaption{font-size:10px;padding:4px 9px}.kh-sticker{width:90px;height:90px}}
@media(prefers-reduced-motion:reduce){.kh-sticker{animation:none}}

/* Bold hero — betrouwbare entree op load (geen scroll-afhankelijkheid) */
@keyframes khRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.kh-eyebrow,.kh-title,.kh-sub,.hero-bold .kh-actions,.kh-trust{opacity:0;animation:khRise .7s cubic-bezier(.22,1,.36,1) forwards}
.kh-eyebrow{animation-delay:.05s}
.kh-title{animation-delay:.14s}
.kh-sub{animation-delay:.24s}
.hero-bold .kh-actions{animation-delay:.34s}
.kh-trust{animation-delay:.42s}
.kh-media{opacity:0;animation:khRise .8s cubic-bezier(.22,1,.36,1) .2s forwards}
@media(prefers-reduced-motion:reduce){.kh-eyebrow,.kh-title,.kh-sub,.hero-bold .kh-actions,.kh-trust,.kh-media{opacity:1;animation:none}}

/* ============================================================
   MOBIEL & TABLET — extra afwerking (telefoon & tablet)
   Doel: geen horizontale scroll, rustiger witruimte op klein
   scherm, en alle 2-koloms layouts netjes onder elkaar.
   ============================================================ */

/* Decoratieve, absoluut geplaatste elementen (badges, sticker,
   hero-blobs) en het off-canvas mobiele menu mogen nooit een
   horizontale scrollbalk veroorzaken.
   LET OP: overflow-x:hidden op html/body dwingt overflow-y naar 'auto',
   wat een aparte scroll-container maakt en op iOS Safari position:sticky
   breekt (de navigatiebalk scrolt dan mee weg). overflow-x:clip clipt
   óók horizontaal, maar laat overflow-y 'visible' → sticky blijft werken.
   'hidden' staat als fallback voor zeer oude browsers. */
html,body{overflow-x:hidden;overflow-x:clip}

/* Tablet (± t/m 820px) */
@media(max-width:820px){
  .section{padding:62px 0}
  .section-tight{padding:42px 0}
  .cta-band{padding:42px 26px}
  /* Inline 2-koloms layouts (o.a. bestelpagina) onder elkaar.
     minmax(0,1fr) + min-width:0 zodat brede inhoud (lange select-opties)
     de kolom niet breder dan het scherm duwt → geen afgekapte inhoud. */
  div[style*="grid-template-columns:1.4fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  div[style*="grid-template-columns:1.4fr 1fr"]>*{min-width:0}
}

/* Telefoon (± t/m 520px) */
@media(max-width:520px){
  .container{padding:0 18px}
  .section{padding:46px 0}
  .section-tight{padding:32px 0}
  .cta-band{padding:30px 20px}
  .btn{padding:13px 22px}
  /* Footer-onderbalk netjes gecentreerd i.p.v. uit elkaar getrokken */
  .footer-bottom{justify-content:center;text-align:center}
  /* Knoppenrijen mogen vol de breedte gebruiken */
  .hero-actions .btn,.kh-actions .btn{flex:1 1 auto}
  /* Header ontwarren op telefoon: het losse mandje-icoon plakte tegen het
     woordmerk. Het mandje is bereikbaar via de vaste bestelbalk + drawer,
     dus we tonen op telefoon enkel woordmerk + "Bestel nu" + menuknop. */
  .site-header .nav-actions{gap:10px}
  .site-header .nav-actions .cart-btn{display:none}
}

/* No-JS menu fallback (getoond wanneer JavaScript uit staat) */
.mlist-ns{list-style:none;margin:0 0 8px;padding:0}
.mlist-ns li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid rgba(120,86,16,.12)}
.mlist-ns .nm{font-weight:600}
.mlist-ns .ds{color:var(--ink-soft);font-size:.9em}
.mlist-ns .pr{margin-left:auto;white-space:nowrap;font-weight:600;color:var(--gold-deep)}