/* =========================================================================
   HulkHoneyPack — hulkhoneypack.com
   Eigen huisstijl, bewust het tegendeel van de gouden editorial-look van de
   zusterwinkel: donker-eerst, giftig groen, zware condensed display-letter,
   scherpe hoeken en dikke randen. Kracht in plaats van verfijning.
   Geen framework: één winkelpagina, één productpagina, één bedanktpagina.
   ========================================================================= */

:root {
  /* Ondergrond — donker-eerst, drie dieptes */
  --void:       #07090A;
  --pit:        #0D1113;
  --slab:       #141A1C;
  --slab-lift:  #1C2427;

  /* Groen: de merkkleur. Namen zijn functioneel (--accent*), zodat een
     volgende kleurwissel alleen waarden raakt en geen selectors. */
  --accent:      #35E06A;
  --accent-lift: #5BFF8C;
  --accent-deep: #12331C;
  --accent-ink:  #041007;

  /* Tekst */
  --chalk:      #F4F8F5;
  --chalk-soft: #C3CEC7;
  --muted:      #8A9992;
  --muted-soft: #5F6E68;

  --line:       rgba(255, 255, 255, .10);
  --line-hard:  rgba(255, 255, 255, .18);

  /* Scherp, niet zacht: 4px waar de zusterwinkel 18px gebruikt */
  --radius:    4px;
  --radius-sm: 3px;
  --radius-pill: 2px;

  --shadow-md: 0 10px 30px rgba(0, 0, 0, .45);
  --shadow-lg: 0 24px 70px rgba(0, 0, 0, .60);
  --glow:      0 0 0 1px var(--accent), 0 0 28px rgba(53, 224, 106, .28);

  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --sans:    'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --shell: 1220px;
  --gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--chalk-soft);
  background: var(--void);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .012em;
  line-height: .96;
  color: var(--chalk);
  margin: 0;
}

h1 { font-size: clamp(2.9rem, 7.2vw, 5.4rem); }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); }
h3 { font-size: 1.4rem; }
h4 { font-size: .95rem; letter-spacing: .14em; }

p { margin: 0 0 1rem; }
strong { color: var(--chalk); font-weight: 700; }
em { font-style: normal; color: var(--accent); }

.container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.narrow { max-width: 780px; }

/* ---------- Aankondigingsbalk ---------- */
.announce {
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.announce-inner {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; min-height: 38px; text-align: center;
}
.announce-sep { opacity: .5; }

/* ---------- Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(7, 9, 10, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 76px;
}

.logo { display: inline-flex; align-items: center; gap: 11px; margin-right: auto; }
.logo-mark {
  display: grid; place-items: center;
  width: 42px; height: 42px;
  /* Het embleem van de verpakking staat vrij, zonder tegel eromheen —
     currentColor laat de druppel en de schicht de merkkleur volgen. */
  color: var(--accent);
  filter: drop-shadow(0 0 10px rgba(53, 224, 106, .45));
}
.logo-svg { width: 100%; height: 100%; display: block; }
.logo-text {
  font-family: var(--display);
  font-size: 1.42rem;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--chalk);
}
.logo-text { color: var(--accent); }
.logo-text strong { color: var(--accent-lift); font-weight: 400; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: color .16s, border-color .16s;
}
.nav a:hover { color: var(--chalk); border-bottom-color: var(--accent); }

.header-actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  background: var(--slab); color: var(--chalk);
  border: 1px solid var(--line-hard); border-radius: var(--radius-sm);
  font-size: 1.05rem; cursor: pointer;
}

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: .84rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  border: 2px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: transform .12s, background .16s, color .16s, border-color .16s, box-shadow .16s;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--accent-lift); border-color: var(--accent-lift); box-shadow: 0 0 26px rgba(53, 224, 106, .3); }

.btn-outline { background: transparent; color: var(--chalk); border-color: var(--line-hard); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-ghost {
  background: transparent; color: var(--chalk);
  border-color: var(--accent);
}
.btn-ghost:hover { background: var(--accent); color: var(--accent-ink); }

.btn-sm { padding: 10px 18px; font-size: .76rem; }

.btn-back {
  display: block; width: 100%;
  margin-top: 10px; padding: 10px;
  background: none; border: 0;
  color: var(--muted); font-family: var(--sans); font-size: .85rem;
  cursor: pointer;
}
.btn-back:hover { color: var(--accent); }

/* ---------- Eyebrow ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--accent);
  margin-bottom: 20px;
}
.dot {
  width: 7px; height: 7px;
  background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 84px);
  background:
    radial-gradient(1000px 520px at 78% -10%, rgba(53, 224, 106, .16), transparent 62%),
    linear-gradient(180deg, var(--pit), var(--void));
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
/* Diagonale groene baan achter de hero — puur decoratief */
.hero::after {
  content: '';
  position: absolute; inset: auto -10% -46% 40%;
  height: 340px;
  background: linear-gradient(90deg, transparent, rgba(53, 224, 106, .07));
  transform: skewY(-7deg);
  pointer-events: none;
}
.hero-grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.08fr .92fr;
  gap: clamp(32px, 5vw, 68px); align-items: center;
}
.hero h1 { margin-bottom: 22px; }
.lead {
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: var(--chalk-soft);
  max-width: 54ch;
  margin-bottom: 30px;
}
.hero-cta { display: flex; flex-wrap: wrap; gap: 13px; margin-bottom: 40px; }

.hero-stats {
  display: grid; grid-template-columns: repeat(3, auto);
  gap: 34px; justify-content: start;
  margin: 0; padding-top: 26px;
  border-top: 1px solid var(--line);
}
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats dt {
  font-family: var(--display);
  font-size: 1.85rem; color: var(--accent);
  text-transform: uppercase; line-height: 1;
}
.hero-stats dd {
  margin: 6px 0 0;
  font-size: .74rem; text-transform: uppercase; letter-spacing: .11em;
  color: var(--muted);
}

.hero-figure { margin: 0; position: relative; }
.hero-figure img {
  width: 100%;
  /* Het beeld heeft zelf een zwarte achtergrond; zonder masker leest dat als
     een doos met harde randen. Dit verloop laat de randen oplossen in de
     pagina, zodat de zakjes zweven in plaats van in een kader te zitten. */
  -webkit-mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 52%, transparent 100%);
          mask-image: radial-gradient(ellipse 76% 72% at 50% 50%, #000 52%, transparent 100%);
}

/* ---------- USP-balk ---------- */
.usps {
  background: var(--accent-deep);
  border-bottom: 1px solid var(--line);
}
.usp-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--line);
}
.usp {
  display: flex; align-items: center; gap: 14px;
  padding: 24px 22px;
  background: var(--accent-deep);
}
.usp i { color: var(--accent); font-size: 1.2rem; }
.usp div { display: flex; flex-direction: column; }
.usp strong {
  font-size: .84rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--chalk);
}
.usp span { font-size: .8rem; color: var(--muted); }

/* ---------- Secties ---------- */
.section { padding: clamp(60px, 8vw, 108px) 0; }
.section-tint { background: var(--pit); border-block: 1px solid var(--line); }
.section-dark { background: var(--slab); border-block: 1px solid var(--line); }

.section-head { max-width: 660px; margin-bottom: clamp(34px, 4vw, 54px); }
.section-head h2 { margin-bottom: 16px; }
.section-head p { color: var(--muted); margin: 0; }

/* ---------- Producten ---------- */
.product-grid {
  /* Drie kolommen sinds de pot van 240 g uit het assortiment is; met vier
     kolommen bleef er een gat naast het laatste pakket staan. */
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.product {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.product:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
/* Groene streep bovenaan die uitschuift bij hover */
.product::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 100%; height: 3px;
  background: var(--accent);
  transition: right .28s ease;
  z-index: 2;
}
.product:hover::before { right: 0; }

.product-featured { border-color: var(--accent); }
.product-featured::before { right: 0; }

.badge {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 5px 11px;
  background: var(--accent); color: var(--accent-ink);
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .11em;
  border-radius: var(--radius-pill);
}

.product-media {
  aspect-ratio: 1 / 1;
  /* Zachte groene kern achter het vrijstaande product, zodat het op het zwart
     staat te gloeien in plaats van in een witte tegel te zweven. */
  position: relative;
  background: #000;
  display: grid; place-items: center;
  border-bottom: 1px solid var(--line);
}
/* Gloed als rand-halo bóven het beeld in plaats van een verloop erachter:
   een verloop achter een dekkende foto zie je niet, en een andere tint dan
   zwart verraadt juist waar de foto ophoudt. */
.product-media::after {
  content: '';
  position: absolute; inset: 0;
  box-shadow: inset 0 0 52px rgba(53, 224, 106, .18);
  pointer-events: none;
}
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-media--foto { padding: 0; }
.product-media--foto img { object-fit: cover; }

.product-body {
  display: flex; flex-direction: column; flex: 1;
  padding: 22px 20px 20px;
}
.product-body h3 { margin-bottom: 6px; }
.product-sub {
  font-size: .82rem; color: var(--muted);
  margin-bottom: 18px;
}
.price-row {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: auto; margin-bottom: 18px;
}
.price {
  font-family: var(--display);
  font-size: 2.05rem; color: var(--chalk);
  line-height: 1;
}
.price-unit { font-size: .76rem; color: var(--muted); }
.btn-buy { width: 100%; }

.ship-note {
  /* wrap is niet optioneel: zonder dat past de regel met beide bedragen niet
     op een telefoon en duwt hij de hele pagina 33 px buiten beeld. */
  display: flex; flex-wrap: wrap; align-items: center; gap: 11px;
  margin: 30px 0 0; padding: 16px 20px;
  background: var(--slab);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-size: .88rem; color: var(--muted);
}
.ship-note i { color: var(--accent); }

/* ---------- Split (ingrediënten) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 62px); align-items: center;
}
.split-figure { margin: 0; }
.split-figure img {
  width: 100%; border-radius: var(--radius);
  border: 1px solid var(--line-hard);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 8% 100%, 0 86%);
}
.split-copy h2 { margin-bottom: 18px; }

.ingredient-list { list-style: none; margin: 24px 0 0; padding: 0; }
.ingredient-list li {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: .94rem;
}
.ingredient-list li:last-child { border-bottom: 1px solid var(--line); }
.ingredient-list i { color: var(--accent); margin-top: 4px; }

/* ---------- Waarvoor / doelgroep ---------- */
.benefit-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.benefit {
  padding: 26px 24px;
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.benefit-slot { display: flex; flex-direction: column; gap: 14px; }
.doelgroep-kop, .benefit-tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--accent);
}
.doelgroep-kop i, .benefit-tag i { font-size: .9rem; }
.doelgroep { display: grid; gap: 20px; }
.benefit h3 { margin-bottom: 10px; }
.benefit p { margin: 0; font-size: .94rem; }
.benefit-lead { color: var(--chalk-soft); }
.benefit-note, .fact { font-size: .88rem; color: var(--muted); }

.benefit-advice {
  padding: 20px 22px;
  background: var(--accent-deep);
  border: 1px solid rgba(53, 224, 106, .3);
  border-radius: var(--radius);
}
.benefit-advice p { margin: 0; color: var(--chalk-soft); }

.fact-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 16px; margin-top: 24px;
}

/* Contra-indicaties: moet eruit springen, dus als enige rood */
.contra {
  margin-top: 26px; padding: 22px 24px;
  background: rgba(190, 42, 42, .10);
  border: 1px solid rgba(230, 80, 80, .38);
  border-left: 3px solid #E65050;
  border-radius: var(--radius);
}
.contra-kop {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  font-size: .8rem; color: #FF8A8A;
  margin-bottom: 10px;
}
.contra p { margin: 0; font-size: .92rem; }

.warning {
  padding: 20px 22px;
  background: rgba(190, 42, 42, .10);
  border: 1px solid rgba(230, 80, 80, .34);
  border-radius: var(--radius);
}

/* ---------- Stappen ---------- */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.steps > div {
  padding: 28px 24px;
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.step-num {
  display: block;
  font-family: var(--display);
  font-size: 2.6rem; line-height: 1;
  color: var(--accent-deep);
  -webkit-text-stroke: 1px var(--accent);
  margin-bottom: 14px;
}
.steps h3 { margin-bottom: 8px; }
.steps p { margin: 0; font-size: .93rem; }

/* ---------- CTA-band ---------- */
.cta-band {
  margin-top: 40px; padding: clamp(30px, 4vw, 46px);
  background: linear-gradient(120deg, var(--accent-deep), var(--slab));
  border: 1px solid rgba(53, 224, 106, .3);
  border-radius: var(--radius);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 22px;
}
.cta-band h2 { margin-bottom: 8px; }
.cta-band p { margin: 0; color: var(--chalk-soft); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 10px; }
.faq details {
  background: var(--slab);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq details[open] { border-color: var(--accent); }
.faq summary {
  padding: 18px 22px;
  font-weight: 600; color: var(--chalk);
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  font-family: var(--display); font-size: 1.3rem;
  color: var(--accent); line-height: 1;
}
.faq details[open] summary::after { content: '\2013'; }
.faq p { margin: 0; padding: 0 22px 20px; font-size: .94rem; }

/* ---------- Winkelwagen ---------- */
.cart-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  background: rgba(3, 5, 5, .78);
  backdrop-filter: blur(4px);
  padding: 20px;
  align-items: center; justify-content: center;
}
.cart-overlay.active { display: flex; }

.cart-modal {
  width: 100%; max-width: 480px; min-width: 0;
  max-height: 90vh;
  display: flex; flex-direction: column;
  background: var(--pit);
  border: 1px solid var(--line-hard);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--line);
}
.cart-header h3 { font-size: 1.25rem; }
.cart-close {
  width: 34px; height: 34px;
  background: none; border: 1px solid var(--line-hard); border-radius: var(--radius-sm);
  color: var(--muted); font-size: 1.3rem; line-height: 1;
  cursor: pointer;
}
.cart-close:hover { color: var(--accent); border-color: var(--accent); }

.cart-items { flex: 1; overflow-y: auto; padding: 18px 22px; }
.cart-empty { text-align: center; color: var(--muted-soft); padding: 30px 0; margin: 0; }

.cart-items > div {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.cart-items > div:last-child { border-bottom: 0; }

.qty-minus, .qty-plus {
  width: 30px; height: 30px;
  background: var(--slab); color: var(--chalk);
  border: 1px solid var(--line-hard); border-radius: var(--radius-sm);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.qty-minus:hover, .qty-plus:hover { border-color: var(--accent); color: var(--accent); }

.cart-item-remove {
  background: none; border: 0; cursor: pointer;
  color: var(--muted-soft); font-size: 1rem;
}
.cart-item-remove:hover { color: #FF8A8A; }

.checkout-form { padding: 4px 22px 18px; display: grid; gap: 12px; }
.checkout-form label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
}
.checkout-form input, .checkout-form select {
  /* 16px is de ondergrens: kleiner laat Safari inzoomen bij focus */
  padding: 12px 13px;
  font-family: var(--sans); font-size: 16px;
  color: var(--chalk);
  background: var(--slab);
  border: 1px solid var(--line-hard); border-radius: var(--radius-sm);
}
.checkout-form input:focus, .checkout-form select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(53, 224, 106, .16);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.optioneel { color: var(--muted-soft); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form-error {
  margin: 0; padding: 10px 12px;
  background: rgba(190, 42, 42, .14);
  border: 1px solid rgba(230, 80, 80, .4);
  border-radius: var(--radius-sm);
  color: #FF9A9A; font-size: .85rem;
}

.cart-footer { padding: 18px 22px 22px; border-top: 1px solid var(--line); }
.cart-lines { display: grid; gap: 7px; margin-bottom: 12px; }
.cart-line { display: flex; justify-content: space-between; font-size: .89rem; color: var(--muted); }
.cart-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; margin-bottom: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.5rem; text-transform: uppercase;
  color: var(--chalk);
}
.cart-total span:last-child { color: var(--accent); }
.btn-checkout { width: 100%; }
.btn-checkout:disabled { opacity: .4; cursor: not-allowed; }

.cart-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 70;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  /* Donkere binnenrand: de knop zweeft over de pagina heen en botste op
     mobiel groen-op-groen met de volle-breedte CTA eronder. Een outline kan
     hier niet — die wordt door de clip-path net zo hard afgeknipt. */
  border: 3px solid var(--void);
  border-radius: var(--radius);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%);
  font-size: 1.2rem; cursor: pointer;
  box-shadow: 0 10px 30px rgba(53, 224, 106, .3);
}
.cart-count {
  position: absolute; top: -6px; left: -6px;
  min-width: 23px; height: 23px; padding: 0 5px;
  display: grid; place-items: center;
  background: var(--void); color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--radius-pill);
  font-size: .74rem; font-weight: 700;
}

/* ---------- Productpagina ---------- */
.doc-hero {
  padding: clamp(48px, 6vw, 84px) 0 clamp(34px, 4vw, 54px);
  background:
    radial-gradient(760px 380px at 20% -20%, rgba(53, 224, 106, .14), transparent 60%),
    var(--pit);
  border-bottom: 1px solid var(--line);
}
.doc-hero h1 { margin-bottom: 18px; }

.prose { max-width: 780px; }
.prose h2 { margin: 42px 0 14px; }
.prose h3 { margin: 28px 0 10px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(53, 224, 106, .4); }

/* ---------- Bedankt-pagina ---------- */
.thankyou { padding: clamp(70px, 10vw, 130px) 0; text-align: center; }
.thankyou-icon {
  display: grid; place-items: center;
  width: 78px; height: 78px; margin: 0 auto 26px;
  background: var(--accent-deep); color: var(--accent);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  clip-path: polygon(0 0, 100% 0, 100% 76%, 76% 100%, 0 100%);
  font-size: 2rem;
}
.ordernummer {
  display: inline-block;
  margin: 18px 0 26px; padding: 11px 22px;
  background: var(--slab);
  border: 1px solid var(--line-hard);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  font-family: var(--display); font-size: 1.3rem;
  letter-spacing: .06em; color: var(--accent);
}

/* ---------- Footer ---------- */
.footer {
  background: var(--pit);
  border-top: 1px solid var(--line);
  padding: clamp(48px, 6vw, 74px) 0 26px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr;
  gap: 34px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}
.footer-brand p { margin: 16px 0 0; font-size: .9rem; color: var(--muted); max-width: 34ch; }
.footer-col { display: flex; flex-direction: column; gap: 9px; }
.footer-col h4 {
  color: var(--chalk);
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: 5px;
}
.footer-col a { font-size: .9rem; color: var(--muted); }
.footer-col a:hover { color: var(--accent); }
.footer-note { font-size: .84rem; color: var(--muted-soft); margin: 0; }

.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 14px; padding-top: 22px;
  font-size: .82rem; color: var(--muted-soft);
}
.pay-methods { display: inline-flex; align-items: center; gap: 8px; }
.pay-methods i { color: var(--accent); }
.made-by a { color: var(--muted); border-bottom: 1px solid var(--line-hard); }
.made-by a:hover { color: var(--accent); }

/* =========================================================================
   Responsief
   ========================================================================= */

/* Tablet staand (820 px) moet de balk nog kwijt kunnen — les uit de
   zusterwinkel: bij 720 px inklappen was te laat. */
@media (max-width: 980px) {
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 18px;
    background: var(--pit);
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .nav.active { display: flex; }
  .nav a { padding: 13px 0; border-bottom: 1px solid var(--line); }
  .nav a:hover { border-bottom-color: var(--line); color: var(--accent); }
  .nav-toggle { display: grid; place-items: center; }
  .header { position: sticky; }
  .header-inner { position: relative; }

  .hero-grid { grid-template-columns: 1fr; }
  .hero-figure { order: -1; }
  .split { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .usp-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .benefit-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr; }
  .fact-grid { grid-template-columns: 1fr; }
  .hide-sm { display: none; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }

  .product-grid { grid-template-columns: 1fr; }
  .product-media { aspect-ratio: 4 / 3; }
  .usp-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .hero-stats { grid-template-columns: repeat(3, auto); gap: 20px; }
  .hero-cta .btn { width: 100%; }

  /* Duimvriendelijk: knoppen minstens 48 px hoog */
  .btn { min-height: 48px; }

  .cart-overlay { padding: 0; align-items: flex-end; }
  .cart-modal {
    max-width: none; max-height: 92vh;
    border-radius: var(--radius) var(--radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .form-row { grid-template-columns: 1fr; }

  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =========================================================================
   Verankering van de levende laag (zie fx.css)
   .fx staat absoluut, dus elke sectie die hem draagt moet zelf een
   positioneringscontext zijn — anders springt de laag naar de body.
   ========================================================================= */
.section-dark {
  position: relative;
  overflow: hidden;
}
.section-dark > .container { position: relative; z-index: 1; }

/* De aderen in een gewone sectie mogen zachter staan dan in de hero */
.section-dark .fx-veins { opacity: .5; }

.hero-pulse { z-index: 0; }