/* =====================================================================
   Baby Bokser — designtokens & basis
   Editorial-premium palet: crème-neutraal + terracotta accent + inkt-zwart.
   Product-foto's (rood/blauw/roze) knallen tegen deze warme neutrale achtergrond.
   ===================================================================== */
:root{
  /* --- Kleuren --- */
  --bg:            #faf6f2;   /* warm off-white cream */
  --bg-diep:       #f0e8de;   /* iets dieper vlak */
  --bg-tint:       #f5ede4;   /* subtiele tint tussen */
  --wit:           #ffffff;

  --inkt:          #1a1a1a;   /* koppen + primary knop */
  --inkt-2:        #4d453f;   /* bodytekst */
  --inkt-3:        #8a8078;   /* gedempt */

  --accent:        #b85a3e;   /* terracotta — hover, badges, accent */
  --accent-diep:   #9b4832;
  --accent-zacht:  #f4e3dc;   /* voor bump-box */

  --goud:          #c9962b;   /* sterren, klein detail */
  --rand:          #e5ddd3;   /* 1px cardrand */
  --rand-zacht:   rgba(26,26,26,.08);

  /* Product-kleur-swatches (rood/blauw/roze bokspak) */
  --product-rood:  #c94a47;
  --product-blauw: #6e9dc4;
  --product-roze:  #e896a9;

  /* Overige kleuren voor eventuele varianten */
  --creme:   #f5e9d8;
  --lila:    #c9a9df;
  --geel:    #f5d472;
  --oranje:  #f2a35e;
  --mint:    #a8dcc4;
  --grijs:   #b8bfc4;
  --zwart:   #2a2a2a;

  /* --- Typografie --- */
  --kop:  'Fraunces', Georgia, serif;
  --tekst:'Inter', system-ui, -apple-system, sans-serif;

  /* --- Maten --- */
  --maxw: 1200px;
  --radius: 12px;
  --radius-groot: 20px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--inkt-2);
  font-family:var(--tekst);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--kop);font-weight:600;color:var(--inkt);line-height:1.15;letter-spacing:-0.01em}
h2{font-size:36px;margin-bottom:18px}
h3{font-size:22px;margin-bottom:12px}

button{font-family:inherit;cursor:pointer;background:none;border:0;color:inherit}
input,textarea{font-family:inherit;font-size:16px;color:var(--inkt)}

a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:6px;
}

/* =====================================================================
   Aankondigingsbalk + header
   ===================================================================== */
.aankondiging{
  background:var(--inkt);
  color:var(--wit);
  text-align:center;
  padding:11px 20px;
  font-size:13px;
  letter-spacing:.2px;
  font-weight:500;
}
/* Twee versies van de aankondiging: lang op desktop, kort op mobiel */
.aank-lang{display:inline}
.aank-kort{display:none}
@media (max-width: 640px){
  .aank-lang{display:none}
  .aank-kort{display:inline}
  .aankondiging{padding:9px 14px;font-size:11.5px;letter-spacing:.1px}
}

.site-header{
  background:var(--wit);
  border-bottom:1px solid var(--rand);
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:18px;
  padding-bottom:18px;
}
.logo-mark{
  font-family:var(--kop);
  font-weight:700;
  font-size:24px;
  color:var(--inkt);
  letter-spacing:-0.01em;
}
.header-acties{display:flex;gap:6px}
.icon-knop{
  width:40px;height:40px;
  border-radius:999px;
  display:grid;place-items:center;
  font-size:15px;
  color:var(--inkt-2);
  transition:background .2s, color .2s;
}
.icon-knop:hover{background:var(--bg-diep);color:var(--inkt)}

/* =====================================================================
   Productsectie: gallerij + info
   ===================================================================== */
.product-sectie{padding:48px 0 64px}
.product-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:64px;
  align-items:start;
}

/* --- Gallerij --- */
.gallerij-hoofd{
  position:relative;
  border-radius:var(--radius-groot);
  overflow:hidden;
  background:var(--bg-diep);
  aspect-ratio:1/1;
  box-shadow:0 1px 3px rgba(0,0,0,.03);
}
.gallerij-hoofd img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .4s ease;
}
.gallerij-hoofd:hover img{transform:scale(1.02)}

.gallerij-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(4px);
  border-radius:999px;
  font-size:20px;
  color:var(--inkt);
  box-shadow:0 2px 8px rgba(0,0,0,.08);
  transition:background .2s;
}
.gallerij-nav:hover{background:var(--wit)}
.gallerij-nav.prev{left:16px}
.gallerij-nav.volg{right:16px}

.gallerij-strip{
  display:flex;
  gap:10px;
  margin-top:14px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.gallerij-strip::-webkit-scrollbar{height:4px}
.gallerij-strip::-webkit-scrollbar-thumb{background:var(--rand);border-radius:4px}
.thumb{
  flex:0 0 84px;
  width:84px;height:84px;
  border-radius:10px;
  overflow:hidden;
  border:2px solid transparent;
  background:var(--bg-diep);
  cursor:pointer;
  transition:border-color .15s, transform .1s;
}
.thumb:hover{transform:translateY(-2px)}
.thumb.actief{border-color:var(--inkt)}
.thumb img{width:100%;height:100%;object-fit:cover}

/* --- Info-kolom --- */
.sterren{color:var(--goud);font-size:15px;letter-spacing:3px;margin-bottom:14px}

.product-titel{
  font-size:44px;
  margin-bottom:12px;
  color:var(--inkt);
  letter-spacing:-0.02em;
}
.product-onderkop{
  font-size:16px;
  color:var(--inkt-2);
  margin-bottom:22px;
  line-height:1.55;
  max-width:480px;
}

.prijs-blok{
  display:flex;align-items:baseline;gap:14px;
  margin-bottom:20px;flex-wrap:wrap;
  padding:16px 0;
  border-top:1px solid var(--rand);
  border-bottom:1px solid var(--rand);
}
.prijs{
  font-family:var(--kop);
  font-size:32px;font-weight:700;
  color:var(--inkt);
  letter-spacing:-0.01em;
}
.prijs-oud{
  font-size:15px;
  color:var(--inkt-3);
  text-decoration:line-through;
}
.korting-badge{
  background:var(--accent);color:var(--wit);
  padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;
}

.kenmerken{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:6px;
  margin:0 0 22px;
}
.kenmerken li{
  background:var(--bg-diep);
  color:var(--inkt-2);
  border-radius:999px;
  padding:5px 12px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.2px;
}

.viral{
  background:var(--accent-zacht);
  border-left:3px solid var(--accent);
  padding:14px 16px;
  border-radius:6px;
  margin-bottom:26px;
  font-size:14px;
  font-style:italic;
  color:var(--inkt-2);
  line-height:1.5;
}

/* --- Varianten --- */
.variant{margin-bottom:22px}
.variant-kop{
  font-size:13px;color:var(--inkt-3);
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-weight:500;
}
.variant-kop strong{
  color:var(--inkt);font-weight:600;
  text-transform:none;letter-spacing:0;
  font-size:15px;
}

.kleur-opties{display:flex;flex-wrap:wrap;gap:12px}
.kleur{
  width:42px;height:42px;
  border-radius:999px;
  border:2px solid var(--rand);
  transition:transform .15s, border-color .15s, box-shadow .15s;
}
.kleur:hover{transform:scale(1.06)}
.kleur.actief{
  border-color:var(--inkt);
  transform:scale(1.1);
  box-shadow:0 3px 12px rgba(0,0,0,.08);
}
.kleur.red{background:var(--product-rood)}
.kleur.blue{background:var(--product-blauw)}
.kleur.pink{background:var(--product-roze)}
.kleur.cream{background:var(--creme)}
.kleur.yellow{background:var(--geel)}
.kleur.orange{background:var(--oranje)}
.kleur.lila{background:var(--lila)}
.kleur.mint{background:var(--mint)}
.kleur.grey{background:var(--grijs)}
.kleur.black{background:var(--zwart)}

/* --- Quantity-tier cards --- */
.tier-opties{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.tier{
  position:relative;
  padding:20px 14px 16px;
  border:1.5px solid var(--rand);
  border-radius:14px;
  background:var(--wit);
  display:flex;flex-direction:column;gap:5px;
  text-align:center;
  transition:border-color .15s, transform .1s, box-shadow .15s;
  cursor:pointer;
}
.tier:hover{border-color:var(--inkt-3);transform:translateY(-2px)}
.tier.actief{
  border-color:var(--inkt);
  border-width:2px;
  padding:19.5px 13.5px 15.5px;
  box-shadow:0 4px 16px rgba(0,0,0,.06);
}
.tier-badge{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:var(--wit);
  padding:4px 11px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.6px;
  text-transform:uppercase;
  white-space:nowrap;
}
.tier-badge.best{background:var(--inkt)}
.tier-aantal{font-family:var(--kop);font-size:18px;font-weight:600;color:var(--inkt)}
.tier-perstuk{font-size:13px;color:var(--inkt-2)}
.tier-totaal{font-size:12px;color:var(--inkt-3);margin-top:4px;line-height:1.5}
.tier-bespaart{display:block;color:var(--accent-diep);font-weight:600;margin-top:3px}

/* --- Order bump --- */
.bump{
  margin:18px 0;
  border:1.5px dashed var(--accent);
  border-radius:14px;
  background:var(--accent-zacht);
  padding:16px 18px;
}
.bump-label{display:flex;gap:12px;cursor:pointer;align-items:flex-start}
.bump-label input{
  width:20px;height:20px;margin-top:3px;
  accent-color:var(--accent-diep);
  flex-shrink:0;
  cursor:pointer;
}
.bump-inhoud{display:flex;flex-direction:column;gap:5px}
.bump-titel{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:baseline}
.bump-titel strong{font-family:var(--kop);font-size:15px;color:var(--inkt)}
.bump-prijs{color:var(--accent-diep);font-weight:700;font-size:14px;white-space:nowrap}
.bump-uitleg{font-size:13px;color:var(--inkt-2);line-height:1.5}

/* --- Subtotaal-rij --- */
.subtotaal-rij{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 0;
  border-top:1px solid var(--rand);
  border-bottom:1px solid var(--rand);
  margin:18px 0 16px;
  font-size:15px;color:var(--inkt-2);
}
.subtotaal-bedrag{
  font-family:var(--kop);
  font-size:26px;font-weight:700;
  color:var(--inkt);
  letter-spacing:-0.01em;
}

/* --- Bestelform + knop --- */
.bestel-form{display:flex;flex-direction:column;gap:12px}
.veld-label{font-size:13px;color:var(--inkt-3);text-transform:uppercase;letter-spacing:.5px;font-weight:500}
.bestel-form input[type=email]{
  padding:15px 18px;
  border:1.5px solid var(--rand);
  border-radius:10px;
  background:var(--wit);
  transition:border-color .15s;
}
.bestel-form input[type=email]:focus{
  border-color:var(--inkt);
  outline:none;
}

.knop-groot{
  background:var(--inkt);
  color:var(--wit);
  padding:18px 30px;
  border-radius:999px;
  font-size:15px;
  font-weight:600;
  letter-spacing:.3px;
  transition:background .2s, transform .05s;
  display:inline-block;
  text-align:center;
}
.knop-groot:hover{background:var(--accent-diep)}
.knop-groot:active{transform:scale(.99)}
.knop-groot.pill{background:var(--accent);color:var(--wit)}
.knop-groot.pill:hover{background:var(--accent-diep)}

.badges{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:20px;
  margin:20px 0 26px;
  font-size:13px;
  color:var(--inkt-2);
}
.badges li{display:flex;align-items:center;gap:6px}

/* --- Accordions in product-info --- */
.uitklap{
  border-top:1px solid var(--rand);
  padding:16px 0;
}
.uitklap:last-child{border-bottom:1px solid var(--rand)}
.uitklap summary{
  font-family:var(--kop);
  font-size:17px;
  font-weight:600;
  color:var(--inkt);
  cursor:pointer;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  gap:10px;
}
.uitklap summary::-webkit-details-marker{display:none}
.uitklap summary::after{content:'+';font-size:22px;font-weight:300;color:var(--inkt-3);transition:transform .2s}
.uitklap[open] summary::after{content:'−'}
.uitklap p{margin-top:12px;color:var(--inkt-2);line-height:1.65}
.uitklap ul{margin-top:12px;padding-left:22px;color:var(--inkt-2);line-height:1.7}

/* =====================================================================
   Feature-band (auto-scroll met accent)
   ===================================================================== */
.feature-band{
  background:var(--inkt);
  color:var(--wit);
  overflow:hidden;
  padding:18px 0;
  border-top:1px solid var(--rand);
  border-bottom:1px solid var(--rand);
}
.feature-strip{
  display:flex;gap:56px;
  white-space:nowrap;
  animation:schuif 36s linear infinite;
  font-family:var(--kop);
  font-size:18px;
  font-weight:500;
  letter-spacing:.3px;
}
.feature-strip span:nth-child(odd) span,
.feature-strip > span{color:var(--wit)}
@keyframes schuif{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* =====================================================================
   Lifestyle-sectie (editorial-blok)
   ===================================================================== */
.lifestyle{padding:88px 0;background:var(--bg-diep)}
.lifestyle-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;align-items:center;
}
.lifestyle-tekst h2{
  font-size:40px;
  margin-bottom:20px;
  line-height:1.15;
}
.lifestyle-tekst p{
  color:var(--inkt-2);
  margin-bottom:18px;
  font-size:17px;
  line-height:1.7;
  max-width:520px;
}
.check-lijst{
  list-style:none;display:flex;flex-direction:column;gap:12px;
  margin-top:24px;
}
.check-lijst li{
  padding-left:32px;position:relative;
  color:var(--inkt-2);
  font-size:15px;
  line-height:1.55;
}
.check-lijst li::before{
  content:'';
  position:absolute;left:0;top:6px;
  width:20px;height:20px;
  background:var(--accent);
  border-radius:999px;
}
.check-lijst li::after{
  content:'';
  position:absolute;left:6px;top:11px;
  width:9px;height:5px;
  border-left:2px solid var(--wit);
  border-bottom:2px solid var(--wit);
  transform:rotate(-45deg);
}
.lifestyle-beeld img{
  border-radius:var(--radius-groot);
  aspect-ratio:4/5;
  object-fit:cover;
  width:100%;
  box-shadow:0 4px 24px rgba(0,0,0,.06);
}

/* =====================================================================
   CTA-band (cadeau-hoek)
   ===================================================================== */
.cta-band{
  padding:72px 0;
  text-align:center;
  background:var(--inkt);
  color:var(--wit);
}
.cta-band h2{
  font-size:34px;margin-bottom:12px;
  color:var(--wit);
}
.cta-band p{
  color:rgba(255,255,255,.75);
  margin-bottom:26px;
  font-size:17px;
}
.cta-band .knop-groot{background:var(--accent);color:var(--wit)}
.cta-band .knop-groot:hover{background:var(--wit);color:var(--inkt)}

/* =====================================================================
   Voordelen-grid
   ===================================================================== */
.benefits{padding:88px 0;text-align:center;background:var(--bg)}
.benefits h2{margin-bottom:44px}
.benefits-grid{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  max-width:1000px;margin:0 auto;
}
.benefits-grid li{
  background:var(--wit);
  border-radius:var(--radius-groot);
  padding:32px 20px;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  border:1px solid var(--rand);
}
.benefit-icon{
  font-size:28px;margin-bottom:10px;
  display:grid;place-items:center;
  width:52px;height:52px;
  background:var(--bg-diep);
  border-radius:999px;
}
.benefits-grid strong{
  font-family:var(--kop);font-size:16px;color:var(--inkt);
  line-height:1.3;
}
.benefits-grid span:last-child{
  font-size:13px;color:var(--inkt-3);
  line-height:1.5;
}

/* =====================================================================
   Vergelijkings-tabel
   ===================================================================== */
.vergelijking{padding:88px 0;background:var(--bg-tint);text-align:center}
.vergelijking .lead{
  max-width:640px;margin:0 auto 32px;
  color:var(--inkt-2);font-size:16px;line-height:1.65;
}
.tabel-wrap{max-width:640px;margin:0 auto 32px;overflow-x:auto}
.vergelijkings-tabel{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--wit);
  border-radius:var(--radius-groot);
  overflow:hidden;
  border:1px solid var(--rand);
  font-size:15px;
}
.vergelijkings-tabel th,
.vergelijkings-tabel td{
  padding:16px 18px;
  text-align:center;
  border-bottom:1px solid var(--rand);
}
.vergelijkings-tabel th{
  background:var(--inkt);color:var(--wit);
  font-family:var(--kop);font-weight:600;
  font-size:14px;
  letter-spacing:.3px;
}
.vergelijkings-tabel tbody tr:last-child td{border-bottom:0}
.vergelijkings-tabel td:first-child{text-align:left;font-weight:500;color:var(--inkt)}
.vergelijkings-tabel td:nth-child(2){color:var(--accent-diep);font-weight:700}
.vergelijkings-tabel td:nth-child(3){color:var(--inkt-3)}
.center{text-align:center}

/* =====================================================================
   FAQ
   ===================================================================== */
.faq{padding:88px 0;text-align:center;background:var(--bg)}
.faq .lead{color:var(--inkt-2);margin-bottom:36px;font-size:16px}
.faq-item{
  max-width:720px;
  margin:0 auto 12px;
  background:var(--wit);
  border-radius:var(--radius);
  border:1px solid var(--rand);
  text-align:left;
  padding:6px 22px;
  transition:box-shadow .15s;
}
.faq-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.03)}
.faq-item summary{
  font-family:var(--kop);
  font-size:17px;font-weight:600;color:var(--inkt);
  padding:18px 0;
  cursor:pointer;
  list-style:none;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:'+';font-size:22px;font-weight:300;color:var(--inkt-3);
  transition:transform .2s;
}
.faq-item[open] summary::after{content:'−'}
.faq-item p{padding:0 0 20px;color:var(--inkt-2);line-height:1.7}

/* =====================================================================
   Contact
   ===================================================================== */
.contact{padding:88px 0;background:var(--bg-diep);text-align:center}
.contact-form{
  max-width:520px;
  margin:26px auto 0;
  display:flex;flex-direction:column;gap:14px;
  text-align:left;
}
.contact-form input,
.contact-form textarea{
  padding:15px 18px;
  border:1.5px solid var(--rand);
  border-radius:10px;
  background:var(--wit);
  width:100%;
  transition:border-color .15s;
}
.contact-form input:focus,
.contact-form textarea:focus{border-color:var(--inkt);outline:none}
.rij-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* =====================================================================
   Footer
   ===================================================================== */
.site-footer{
  background:var(--inkt);
  color:var(--wit);
  padding:56px 0 28px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:start;
}
.site-footer h3{color:var(--wit);font-family:var(--kop);font-size:22px;margin-bottom:8px}
.site-footer p{color:rgba(255,255,255,.65);font-size:14px;margin-bottom:14px;line-height:1.6}
.nieuwsbrief{display:flex;gap:8px}
.nieuwsbrief input{
  flex:1;
  padding:13px 15px;
  border-radius:8px;
  border:0;
  background:rgba(255,255,255,.08);
  color:var(--wit);
  font-size:14px;
}
.nieuwsbrief input::placeholder{color:rgba(255,255,255,.5)}
.nieuwsbrief input:focus{background:rgba(255,255,255,.14);outline:none}
.nieuwsbrief button{
  padding:13px 22px;
  border-radius:8px;
  background:var(--accent);
  color:var(--wit);
  font-weight:600;
  font-size:14px;
  transition:background .2s;
}
.nieuwsbrief button:hover{background:var(--accent-diep)}
.footer-links{text-align:right}
.footer-legal{
  color:rgba(255,255,255,.5);
  font-size:12px;
  margin-bottom:8px;
  letter-spacing:.3px;
}
.footer-links ul{
  list-style:none;
  display:flex;flex-wrap:wrap;gap:18px;
  justify-content:flex-end;margin-top:10px;
}
.footer-links a{color:rgba(255,255,255,.65);font-size:13px;transition:color .15s}
.footer-links a:hover{color:var(--wit)}

/* =====================================================================
   Cookiebanner (uit tracking.js)
   ===================================================================== */
.cc{
  position:fixed;left:16px;right:16px;bottom:16px;
  max-width:640px;margin:0 auto;
  background:var(--wit);
  border:1px solid var(--rand);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 10px 40px rgba(0,0,0,.15);
  z-index:100;
}
.cc-tekst{font-size:14px;color:var(--inkt-2);margin-bottom:14px;line-height:1.5}
.cc-knoppen{display:flex;gap:8px;flex-wrap:wrap}
.cc-knop{
  padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;border:1px solid var(--rand);
  transition:background .15s;
}
.cc-ja{background:var(--inkt);color:var(--wit);border-color:var(--inkt)}
.cc-ja:hover{background:var(--accent-diep)}
.cc-nee{background:var(--wit);color:var(--inkt)}
.cc-nee:hover{background:var(--bg-diep)}

/* =====================================================================
   Mobiel — heftig geoptimaliseerd (Meta-ads voor 3e trimester = 90% mobiel)
   Breakpoints: 900 (tablet naar mobiel-landscape), 640 (mobiel-portrait),
   480 (smalle telefoons).
   ===================================================================== */

/* --- Tablet + mobiel-landscape (<900px) --- */
@media (max-width: 900px){
  .header-inner{padding-top:14px;padding-bottom:14px}
  .logo-mark{font-size:22px}
  .icon-knop{width:38px;height:38px}

  .product-grid{grid-template-columns:1fr;gap:28px}
  .lifestyle-grid{grid-template-columns:1fr;gap:32px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
  .footer-links{text-align:left}
  .footer-links ul{justify-content:flex-start}

  .benefits-grid{grid-template-columns:1fr 1fr}
  .product-titel{font-size:34px}
  .product-onderkop{max-width:none}
  h2{font-size:28px}
  .lifestyle-tekst h2{font-size:30px}
  .cta-band h2{font-size:26px}

  .lifestyle{padding:64px 0}
  .cta-band{padding:56px 0}
  .benefits,.vergelijking,.faq,.contact{padding:64px 0}
  .product-sectie{padding:28px 0 48px}

  .tier-opties{grid-template-columns:repeat(3, 1fr);gap:8px}
  .tier{padding:16px 10px 14px}
  .tier.actief{padding:15.5px 9.5px 13.5px}
  .tier-aantal{font-size:16px}
  .tier-perstuk{font-size:12px}
  .tier-totaal{font-size:11px}
  .tier-bespaart{font-size:11px}
  .tier-badge{font-size:9px;padding:3px 8px;top:-9px}
}

/* --- Mobiel-portrait (<640px) --- */
@media (max-width: 640px){
  .wrap{padding:0 18px}

  .aankondiging{
    padding:10px 16px;font-size:12px;
    line-height:1.4;font-weight:500;
  }
  .header-inner{padding-top:12px;padding-bottom:12px}
  .logo-mark{font-size:20px}

  /* Hero-image compacter op mobiel — 5:4 laat meer product-info boven de fold */
  .gallerij-hoofd{aspect-ratio:5/4;max-height:60vh}
  .gallerij-nav{width:38px;height:38px;font-size:17px}
  .gallerij-nav.prev{left:10px}
  .gallerij-nav.volg{right:10px}

  .gallerij-strip{gap:8px;margin-top:10px}
  .thumb{flex:0 0 60px;width:60px;height:60px}

  .product-sectie{padding:18px 0 36px}
  .product-titel{font-size:26px;line-height:1.15;margin-bottom:8px}
  .product-onderkop{font-size:14px;margin-bottom:16px;line-height:1.5}
  .sterren{font-size:13px;margin-bottom:8px;letter-spacing:2px}

  /* Prijs-blok compacter */
  .prijs-blok{padding:12px 0;gap:10px;margin-bottom:14px}
  .prijs{font-size:24px}
  .prijs-oud{font-size:13px}
  .korting-badge{font-size:9.5px;padding:4px 10px;letter-spacing:.4px}

  .viral{padding:12px 14px;font-size:13px;margin-bottom:22px}
  .variant{margin-bottom:20px}
  .variant-kop{font-size:12px}
  .variant-kop strong{font-size:14px}

  /* Kleurtegels: grotere tap-target */
  .kleur{width:48px;height:48px;border-width:2px}
  .kleur-opties{gap:10px}

  /* Tiers: 3 kolommen behouden maar smaller */
  .tier{padding:14px 8px 12px;border-radius:12px}
  .tier.actief{padding:13.5px 7.5px 11.5px}
  .tier-aantal{font-size:15px}
  .tier-perstuk{font-size:11px}
  .tier-totaal{font-size:10px;line-height:1.4}
  .tier-bespaart{font-size:10px;margin-top:2px}
  .tier-badge{font-size:8.5px;padding:3px 7px;letter-spacing:.4px;top:-8px}

  .bump{padding:14px 14px;border-radius:12px}
  .bump-titel strong{font-size:14px}
  .bump-prijs{font-size:13px}
  .bump-uitleg{font-size:12.5px;line-height:1.5}

  .subtotaal-rij{padding:14px 0;margin:14px 0 12px;font-size:14px}
  .subtotaal-bedrag{font-size:22px}

  .bestel-form input[type=email]{padding:14px 16px;border-radius:10px}
  .knop-groot{padding:16px 24px;font-size:15px}
  .veld-label{font-size:11px}

  .badges{gap:14px;margin:16px 0 22px;font-size:12px}

  h2{font-size:22px}
  .lifestyle-tekst h2{font-size:24px}
  .cta-band h2{font-size:22px}
  .lifestyle{padding:48px 0}
  .cta-band{padding:44px 0}
  .benefits,.vergelijking,.faq,.contact{padding:48px 0}

  .lifestyle-tekst p{font-size:15px;margin-bottom:14px}
  .lifestyle-beeld img{aspect-ratio:1/1}
  .check-lijst li{font-size:14px}

  /* Feature-band sneller op mobiel (kleiner scherm) */
  .feature-strip{animation-duration:24s;font-size:15px;gap:36px}
  .feature-band{padding:14px 0}

  .benefits-grid li{padding:24px 16px}
  .benefit-icon{width:44px;height:44px;font-size:22px;margin-bottom:6px}
  .benefits-grid strong{font-size:15px}

  .vergelijkings-tabel th,
  .vergelijkings-tabel td{padding:12px 10px;font-size:14px}

  .faq-item{padding:4px 18px;border-radius:10px}
  .faq-item summary{font-size:15px;padding:16px 0}
  .faq-item p{padding:0 0 18px;font-size:14px}

  .contact-form input,.contact-form textarea{padding:14px 16px}

  .site-footer{padding:44px 0 24px}
  .rij-2{grid-template-columns:1fr;gap:10px}
}

/* --- Smalle telefoons (<480px) --- */
@media (max-width: 480px){
  .wrap{padding:0 16px}
  .benefits-grid{grid-template-columns:1fr}
  .kenmerken{gap:5px}
  .kenmerken li{font-size:11px;padding:4px 10px}
  .product-titel{font-size:26px}
  .prijs{font-size:26px}
  .subtotaal-bedrag{font-size:20px}
  .lifestyle-tekst h2{font-size:24px}

  /* Nieuwsbrief stack op smalle telefoon */
  .nieuwsbrief{flex-direction:column}
  .nieuwsbrief button{width:100%}
}

/* =====================================================================
   Sticky mobile buy-bar — altijd zichtbaar knop tijdens scrollen
   Grote conversie-driver op lange product-pagina's, standaard bij Shopify.
   ===================================================================== */
.sticky-mobile-buy{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  background:var(--wit);
  border-top:1px solid var(--rand);
  padding:8px 14px;
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
  z-index:99;
  box-shadow:0 -4px 20px rgba(0,0,0,.06);
  align-items:center;
  gap:10px;
  animation:slide-up .3s ease-out;
}
.sticky-mobile-buy-prijs{
  display:flex;flex-direction:column;line-height:1.15;
}
.sticky-mobile-buy-prijs .oud{
  font-size:11px;color:var(--inkt-3);text-decoration:line-through;
}
.sticky-mobile-buy-prijs .nu{
  font-family:var(--kop);font-size:20px;font-weight:700;color:var(--inkt);
}
.sticky-mobile-buy button{
  flex:1;
  background:var(--inkt);
  color:var(--wit);
  padding:12px 18px;
  border-radius:999px;
  font-weight:600;
  font-size:14px;
  transition:background .2s;
}
.sticky-mobile-buy-prijs .nu{font-size:18px}
.sticky-mobile-buy-prijs .oud{font-size:10px}
.sticky-mobile-buy button:hover{background:var(--accent-diep)}
@keyframes slide-up{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}

/* Alleen tonen op mobiel + reserve ruimte onderaan body zodat content niet
   verdwijnt achter de balk. Sticky-bar is ~62px hoog. */
@media (max-width: 900px){
  .sticky-mobile-buy{display:flex}
  body{padding-bottom:68px}
}
@media (max-width: 640px){
  body{padding-bottom:70px}
}

/* =====================================================================
   Post-purchase upsell (op bedankt.html)
   ===================================================================== */
.upsell{
  max-width:640px;margin:24px auto 0;
  border:2px solid var(--accent);
  border-radius:var(--radius-groot);
  padding:32px 28px;
  background:linear-gradient(to bottom, var(--accent-zacht), var(--wit));
  text-align:center;
  box-shadow:0 6px 24px rgba(184,90,62,.12);
}
.upsell-badge{
  display:inline-block;
  background:var(--accent-diep);color:var(--wit);
  padding:6px 16px;border-radius:999px;
  font-size:11px;font-weight:700;letter-spacing:.7px;
  text-transform:uppercase;
  margin-bottom:14px;
}
.upsell h2{font-size:28px;margin-bottom:10px;color:var(--inkt);line-height:1.2}
.upsell-korting{
  display:flex;justify-content:center;align-items:baseline;gap:12px;
  margin:18px 0 8px;
}
.upsell-korting .oud{font-size:18px;color:var(--inkt-3);text-decoration:line-through}
.upsell-korting .nieuw{
  font-family:var(--kop);
  font-size:36px;font-weight:700;
  color:var(--accent-diep);
  letter-spacing:-0.01em;
}
.countdown{
  font-family:var(--kop);font-size:15px;
  color:var(--inkt-2);
  margin:8px 0 22px;
  letter-spacing:.3px;
}
.countdown span{color:var(--accent-diep);font-weight:700}
.upsell-kleur-kies{margin:20px 0}
.upsell-kleur-kies .variant-kop{justify-content:center;text-align:center}
.upsell-kleur-kies .kleur-opties{justify-content:center}
.upsell-knoppen{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.upsell-knoppen .knop-groot{width:100%}
.knop-nee{
  background:transparent;
  color:var(--inkt-3);
  padding:12px;
  font-size:14px;
  text-decoration:underline;
  cursor:pointer;
  border:0;
}
.knop-nee:hover{color:var(--inkt-2)}