/* ============================================================================
   common-wp-S1.css — Nutrifoodz WordPress-advertorial huisstijl (v1.0.0)
   data-template: common-wp-S1

   Gedeelde CSS voor ALLE "WP TRANSFORMATION"-clones. Repliceert de bestaande
   go.nutrifoodz.nl advertorial-look. Talen delen deze CSS (taal-neutraal).

   Palette (geëxtraheerd uit de live WP-page):
     groen  #679d34  — knoppen, productnaam, ✓, community, "beste deal"
     coral  #ed716b  — kop-accenten, genummerde secties, HR, quote-box
     tekst  #1e1e1e  · sterren #facc15 · grijze kaart #efefef / rand #e1e1e1
   Fonts: Montserrat (headings) + Open Sans (body)

   Laadt als OVERLAY bovenop /common/css/common.css → overschrijft de basis waar nodig.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;0,800;1,600;1,700&family=Open+Sans:ital,wght@0,400;0,600;0,700;0,800;1,400;1,600;1,700&display=swap');

:root {
  --wp-green:      #679d34;
  --wp-green-dark: #567f2c;
  --wp-coral:      #ed716b;
  --wp-coral-dark: #d85850;
  --wp-text:       #1e1e1e;
  --wp-muted:      #5a5a5a;
  --wp-gold:       #facc15;
  --wp-card:       #f1f1f1;
  --wp-border:     #e1e1e1;
  --wp-orange:     #ff7a2e;
  --content: 840px;

  /* Per product override-bare kleuren (zie thema-blok hieronder):
       --wp-heading : sectie-koppen (h2.section / h3.section)
       --wp-line    : scheidingslijntjes (hr + de lijn boven elke sectiekop)
     Default = de bestaande omega-3-look (groene kop, coral lijn). De CTA-knoppen
     blijven bewust altijd groen (var(--wp-green)) en horen hier NIET bij. */
  --wp-heading: var(--wp-green);
  --wp-accent:  var(--wp-green);
  --wp-line:    var(--wp-coral);
  --wp-reason-bg: #7c1d1d;   /* gevulde "5 problemen"-blokken — donkerrood als default */
  --wp-warn: #b23b3b;        /* nadeel-koppen (✖︎ …) en de ✕ in de vergelijkingstabel */
}

/* ─── PRODUCT-THEMA'S ────────────────────────────────────────────────────────
   Eén stylesheet voor ÁLLE producten. Kop-, accent- en lijnkleur hangen aan variabelen
   en worden per pagina gezet via <body data-product="…"> (de builder zet dat attribuut
   automatisch op basis van de productslug). Een nieuw product = één regel hier.
   Pagina's zónder data-product vallen terug op de default in :root.
   NB: de CTA-knoppen staan hier bewust NIET in; die blijven altijd groen.

   De kleuren komen van de VERPAKKING (shop.nutrifoodz.nl, uitgelezen 29-07-2026):
   het logo/etiket van de zak of het potje, niet de splash eromheen.

   VIER variabelen, en waarom:
     --wp-heading   kop-TEKST. Alleen de productkleur als die leesbaar is op wit
                    (≥ 3:1, de WCAG-drempel voor grote tekst). Anders var(--wp-text)
                    — zwart dus — want een lichte kleur als kop leest niet.
     --wp-accent    de losse woorden in de kop (<span class="coral">). Altijd de
                    productkleur; is die te licht, dan exact zover verdonkerd dat hij
                    net 3:1 haalt. Zo houdt de page zijn kleur zonder onleesbaar te worden.
     --wp-line      de streep boven een sectiekop. Geen tekst, dus hier mag de volle
                    verpakkingskleur staan. Alleen onder 2:1 pakken we de accentkleur,
                    anders is de lijn niet te zien.
     --wp-reason-bg gevuld blok met WITTE tekst → donkere variant van dezelfde tint.

   Zwarte verpakkingen (ReCharge, Creatine, Complete, PEAK, Alpha) hebben hun accent
   van het gekleurde element op of naast de zak. Alpha heeft er geen — die staat op
   grafiet en heeft dus geen eigen kleuridentiteit. */
body[data-product="vegan-omega-3"]            { --wp-heading: #679d34; --wp-accent: #679d34; --wp-line: #679d34; --wp-reason-bg: #3d6a23; }  /* groen — ongewijzigd, staat live */
body[data-product="red-juice"]                { --wp-heading: #b42454; --wp-accent: #b42454; --wp-line: #b42454; --wp-reason-bg: #B42454; }  /* magenta — kleur van de verpakking (was #c0392b) */
body[data-product="recharge"]                 { --wp-heading: var(--wp-text); --wp-accent: #DB7C00; --wp-line: #ff9000; --wp-reason-bg: #8F5100; }  /* oranje — kop zwart, accent gekleurd */
body[data-product="gold"]                     { --wp-heading: #a88424; --wp-accent: #a88424; --wp-line: #a88424; --wp-reason-bg: #765C19; }  /* goud */
body[data-product="greens-detox"]             { --wp-heading: #48843c; --wp-accent: #48843c; --wp-line: #48843c; --wp-reason-bg: #3B6B31; }  /* groen */
body[data-product="hormony"]                  { --wp-heading: #3c546c; --wp-accent: #3c546c; --wp-line: #3c546c; --wp-reason-bg: #3C546C; }  /* blauwgrijs */
body[data-product="lever-support"]            { --wp-heading: #006c3c; --wp-accent: #006c3c; --wp-line: #006c3c; --wp-reason-bg: #006C3C; }  /* groen */
body[data-product="cholesterol-support"]      { --wp-heading: #489c60; --wp-accent: #489c60; --wp-line: #489c60; --wp-reason-bg: #336F44; }  /* groen */
body[data-product="glucose-support"]          { --wp-heading: #602430; --wp-accent: #602430; --wp-line: #602430; --wp-reason-bg: #602430; }  /* bordeaux */
body[data-product="probiotica"]               { --wp-heading: #00606c; --wp-accent: #00606c; --wp-line: #00606c; --wp-reason-bg: #00606C; }  /* petrol */
body[data-product="magnesium-complex"]        { --wp-heading: #242460; --wp-accent: #242460; --wp-line: #242460; --wp-reason-bg: #242460; }  /* indigo */
body[data-product="peak"]                     { --wp-heading: #8c5a1e; --wp-accent: #8c5a1e; --wp-line: #8c5a1e; --wp-reason-bg: #88571D; }  /* amber */
body[data-product="creatine"]                 { --wp-heading: var(--wp-text); --wp-accent: #CB8224; --wp-line: #dc963c; --wp-reason-bg: #865618; }  /* oranje — kop zwart, accent gekleurd */
body[data-product="complete"]                 { --wp-heading: #7e6a4a; --wp-accent: #7e6a4a; --wp-line: #7e6a4a; --wp-reason-bg: #715F42; }  /* vanille-taupe — crème #f0e6c8 is onleesbaar als tekst */
body[data-product="complete-chocolate"]       { --wp-heading: #785032; --wp-accent: #785032; --wp-line: #785032; --wp-reason-bg: #785032; }  /* chocolade */
body[data-product="complete-protein-vanilla"] { --wp-heading: var(--wp-text); --wp-accent: #A29177; --wp-line: #a89880; --wp-reason-bg: #6D5F4B; }  /* warm grijs — kop zwart, accent gekleurd */
body[data-product="alpha"]                    { --wp-heading: #4a4e52; --wp-accent: #4a4e52; --wp-line: #4a4e52; --wp-reason-bg: #2E3235; }  /* graniet — de verpakking is volledig zwart, geen accentkleur */
/* ReCharge-oranje #ff9000 komt uit slider-5 (de balk met porties + "vanaf €0,99"), door
   Stefan aangewezen. Op wit haalt hij 2,27:1 — te licht voor koptekst, dus de kop is zwart
   en de accentwoorden staan op #DB7C00 (3,05:1), dezelfde tint net donker genoeg. De volle
   #ff9000 blijft wél op de lijn staan, want daar speelt leesbaarheid niet. */

/* ─── BASIS ──────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
body {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--wp-text);
  max-width: none;            /* overschrijft basis-common.css (820px) */
  margin: 0;
  padding: 0;
  background: #ffffff;
}
img { max-width: 100%; height: auto; display: block; }

/* Centrale leeskolom voor losse elementen */
body > h1, body > h2, body > h3, body > h4, body > p, body > ul, body > ol,
body > blockquote, body > hr, body > .author-block, body > .img-hero,
body > .harvard-quote, body > .food-item, body > .quote-card, body > .testimonial-card,
body > .product-reveal, body > .cta-center, body > .bundle-section, body > .community,
body > .research-links, body > .faq-wrap, body > .guarantee-wp, body > .img-block,
body > .wp-header, body > .wp-footer, body > .disclaimer, body > .checklist-block,
body > .scarcity-bar, body > .signature-block, body > .grey-box,
body > .reason-box, body > .compare-table, body > .wp-video {
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 740px) {
  body > h1, body > h2, body > h3, body > h4, body > p, body > ul, body > ol,
  body > blockquote, body > .author-block, body > .harvard-quote, body > .food-item,
  body > .quote-card, body > .testimonial-card, body > .product-reveal, body > .cta-center,
  body > .community, body > .research-links, body > .faq-wrap, body > .guarantee-wp,
  body > .img-block, body > .checklist-block, body > .img-hero, body > .reason-box,
  body > .wp-video {
    padding-left: 18px; padding-right: 18px;
  }
}

/* ─── TYPOGRAFIE ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: 'Montserrat', sans-serif; color: var(--wp-text); line-height: 1.25; }
p { margin: 0 0 1em; }
strong, b { font-weight: 700; }
em, i { font-style: italic; }
a { color: var(--wp-green-dark); }
/* .coral = de accent-highlight in de hook-koppen. Volgt de productkleur mee
   (--wp-heading): groen bij omega-3, rood bij red-juice. Ongetagde pagina's
   vallen terug op de default van --wp-heading. */
.coral { color: var(--wp-accent); }
.green { color: var(--wp-green); }
u { text-decoration: underline; }

/* Hook bovenaan — in hetzelfde contentkader als de rest */
.wp-hook { max-width: var(--content); margin-left: auto; margin-right: auto; }
@media (max-width: 740px) { .wp-hook { padding-left: 18px; padding-right: 18px; } }
.wp-hook h1, h1.wp-title {
  font-weight: 800; font-size: 2em; text-align: center; margin: 0.3em 0 0.3em;
}
.wp-hook .subhook, p.wp-sub {
  font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: italic;
  text-align: center; font-size: 1.15em; color: var(--wp-text); margin-bottom: 1.2em;
}

/* Sectie-koppen (gecentreerd, bold) — margin: auto zodat de kop mee-centreert
   met de contentkolom i.p.v. links te plakken op schermen breder dan --content */
h2.section, h2.wp-h2 { font-weight: 800; font-size: 1.55em; text-align: center; margin: 1.4em auto 0.7em; color: var(--wp-heading); }
h3.section { font-weight: 700; font-size: 1.3em; text-align: center; margin: 1.2em auto 0.6em; color: var(--wp-heading); }

/* Scheidingslijn tussen secties — kleurt mee met het product (--wp-line) */
hr, hr.sep { border: none; border-top: 2px solid var(--wp-line); margin: 2em auto; opacity: 0.9; }
/* Automatische lijn vóór elke sectiekop (zoals de bron) — ook in de productkleur */
h2.section::before {
  content: ""; display: block; max-width: var(--content); margin: 0 auto 1.3em;
  border-top: 2px solid var(--wp-line); opacity: 0.9;
}

/* Kop die met een kruis begint ("✖︎ Rauwe kokosolie is niet praktisch…") — een NADEEL uit
   een opsomming, geen nieuwe sectie. In de bron staan die koppen rood en pal onder elkaar;
   met de standaard sectielijn erboven werden ze uit elkaar getrokken tot losse secties.
   De builder zet deze klasse zelf (tools/bouw-page.py → kop_klasse/KRUIS_KOP). */
h2.section.nadeel { color: var(--wp-warn); margin-top: 1.6em; }
h2.section.nadeel::before { content: none; }

/* ─── HEADER (logo-balk, inline) ─────────────────────────────────────────── */
.wp-header { padding: 14px 18px; text-align: center; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.wp-header img { height: 46px; width: auto; margin: 0 auto; }

/* ─── AUTEUR-BLOK ────────────────────────────────────────────────────────── */
.author-block { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 1em auto 1.6em; }
.author-block .avatar { width: 46px; height: 46px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.author-block .avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-block .who { font-size: 0.95em; line-height: 1.3; }
.author-block .who strong { color: var(--wp-text); }

/* ─── BEELDEN ────────────────────────────────────────────────────────────── */
.img-hero, .img-block { margin: 1.4em auto; }
.img-hero img, .img-block img { width: 100%; border-radius: 10px; }
.img-block.small { max-width: 300px; }
.img-block.medium { max-width: 560px; }
.img-block figcaption, .cap { font-size: 0.8em; color: #8a8a8a; text-align: center; margin-top: 6px; }

/* ─── VIDEO (VSL / embed onder de hook) ───────────────────────────────────────
   Responsief in dezelfde contentkolom als de rest. Twee gevallen, apart behandeld
   zodat ze elkaar niet in de weg zitten:
   1) KALE iframe/video (direct kind, géén eigen wrapper) → wij geven 'm 16:9.
   2) Embed MÉT eigen responsive wrapper — de Vimeo/YouTube "padding-hack":
        <div style="padding:56.25% 0 0 0;position:relative">
          <iframe style="position:absolute;top:0;left:0;width:100%;height:100%">
      Die wrapper bepaalt zélf de verhouding; wij houden 'm alleen binnen de kolom
      en ronden de hoeken af. GÉÉN aspect-ratio op die iframe — anders vecht 'ie
      met de padding-hack en krijg je verkeerde hoogte / zwarte balken. */
.wp-video { margin: 1.4em auto 1.8em; }

.wp-video > iframe,
.wp-video > video {
  width: 100%; aspect-ratio: 16 / 9; height: auto;
  border: 0; display: block; border-radius: 12px; background: #000;
}

.wp-video > div {                       /* padding-hack wrapper */
  position: relative; width: 100%; max-width: 100%; margin: 0 auto;
  border-radius: 12px; overflow: hidden;
}
.wp-video > div > iframe {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}

.wp-video > [class*="player"],
.wp-video > vturb-smartplayer,
.wp-video > wistia-player {
  display: block; width: 100%; max-width: 100%; margin: 0 auto;
  border-radius: 12px; overflow: hidden;
}

/* ─── HARVARD / CORAL QUOTE-BOX ──────────────────────────────────────────── */
.harvard-quote {
  background: var(--wp-coral); color: #fff; border-radius: 10px;
  padding: 20px 24px; margin: 1.5em auto; font-weight: 600; font-size: 1.05em; line-height: 1.5;
}
.harvard-quote em { color: #fff; }
/* Ondertekening ("- Stefan, eigenaar Nutrifoodz") hoort ÍN de box, onder het citaat.
   De builder verplaatst hem daarheen (tools/bouw-page.py → quote_ondertekening). */
.harvard-quote .by {
  display: block; margin-top: 0.9em; font-weight: 500; font-size: 0.92em;
  opacity: 0.92; text-align: center;
}
.harvard-logo { display: block; max-width: 220px; margin: 1.4em auto 0.6em; }

/* ─── GENUMMERDE FOOD-SECTIE ─────────────────────────────────────────────── */
.food-item { margin: 1.6em auto; }
.food-item .food-img { margin: 0 auto 0.9em; }
.food-item .food-img img { width: 100%; max-width: 340px; margin: 0 auto; border-radius: 10px; }
.food-item h2, .food-item h3 {
  font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--wp-coral);
  font-size: 1.4em; text-align: left; margin: 0.2em 0 0.6em;
}
@media (min-width: 600px) {
  .food-item.imgleft { display: grid; grid-template-columns: 300px 1fr; gap: 22px; align-items: start; }
  .food-item.imgleft .food-head { grid-column: 1 / -1; }
}

/* ─── GENUMMERDE REDEN-BOX (kleurt mee met het product via --wp-reason-bg) ─── */
.reason-box {
  max-width: var(--content); margin: 1.4em auto 0.4em;
  background: var(--wp-reason-bg); color: #fff; border-radius: 10px;
  padding: 16px 24px; text-align: center;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.2em; line-height: 1.35;
}
/* Op mobiel liep de rode balk tot de schermrand (margin auto = 0), terwijl de tekst op 18px
   staat. Zelfde inset als de body-tekst geven, zodat de balk in dezelfde lijn valt. */
@media (max-width: 740px) {
  body > .reason-box { margin-left: 18px; margin-right: 18px; padding-left: 18px; padding-right: 18px; }
}

/* ─── VERGELIJKINGSTABEL (Nutrifoodz vs. visolie) ────────────────────────── */
.compare-table { max-width: var(--content); margin: 1.6em auto; border-collapse: collapse; width: 100%; table-layout: fixed; }
.compare-table col.c-us { width: 50%; }
.compare-table col.c-them { width: 50%; }
.compare-table th {
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.05em;
  padding: 12px 10px; text-align: center; vertical-align: middle;
}
.compare-table th.us { background: var(--wp-green); color: #fff; border-radius: 8px 0 0 0; }
.compare-table th.them { background: #6b6b6b; color: #fff; border-radius: 0 8px 0 0; }
.compare-table th img { display: block; width: 100%; max-width: 150px; margin: 0 auto 8px; }
.compare-table td {
  padding: 12px 14px; vertical-align: top; font-size: 0.95em; line-height: 1.4;
  border-bottom: 1px solid var(--wp-border);
}
.compare-table td.us { background: #f2f8ec; }
.compare-table td.them { background: #f4f4f4; color: #555; }
.compare-table td.us::before { content: "✓ "; color: var(--wp-green); font-weight: 800; }
.compare-table td.them::before { content: "✕ "; color: #b23b3b; font-weight: 800; }
@media (max-width: 740px) {
  /* body > .compare-table (regel 'leeskolom') zet margin:auto; die is specifieker dan een kale
     .compare-table, dus hier óók met body > schrijven, anders pakt de 18px niet. */
  body > .compare-table { margin-left: 18px; margin-right: 18px; width: auto; }
  .compare-table th { font-size: 0.9em; padding: 10px 6px; }
  .compare-table th img { max-width: 92px; }
  .compare-table td { font-size: 0.82em; padding: 10px 8px; }
}

/* ─── HULPKLASSEN ────────────────────────────────────────────────────────── */
p.center { text-align: center; }
mark { background: #fff3a3; color: inherit; padding: 0 2px; }

/* ─── ✓ CHECKLISTS ───────────────────────────────────────────────────────── */
ul.check { list-style: none; padding-left: 0; margin: 1em auto; }
ul.check li { position: relative; padding-left: 30px; margin-bottom: 0.9em; line-height: 1.5; }
ul.check li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--wp-green); font-weight: 800; font-size: 1.2em; }
/* Een bullet kan meer dan één alinea hebben: de eerste loopt door achter de vette kop,
   de rest wordt een eigen <p> (tools/bouw-page.py → bullet_li). Zonder margin-top plakken
   die alinea's tegen elkaar aan en leest de bullet als één blok — precies wat we met het
   splitsen wilden oplossen. Zelfde aanpak als bij ul.problems hieronder. */
ul.check li p { margin: 0.7em 0 0; }

/* ─── PROBLEMEN-LIJST (donkere cirkel-vinkjes) ───────────────────────────── */
ul.problems { list-style: none; padding-left: 0; margin: 1.4em auto; }
ul.problems > li { position: relative; padding-left: 42px; margin-bottom: 1.8em; }
ul.problems > li::before { content: "✓"; position: absolute; left: 0; top: 2px; width: 26px; height: 26px; background: #2c2c2c; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; line-height: 1; }
ul.problems > li p { margin: 0 0 0.8em; }
ul.problems > li p.lead { margin-top: 0; }
ul.problems > li p:last-child { margin-bottom: 0; }

/* ─── QUOTE-CARD (grijs, Stefan-uitspraak met avatar) ────────────────────── */
.quote-card {
  background: var(--wp-card); border-radius: 12px; padding: 26px 28px; margin: 1.6em auto;
  text-align: center;
}
.quote-card .avatar { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; margin: 0 auto 12px; }
.quote-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.quote-card .q { font-family: 'Montserrat', sans-serif; font-weight: 700; font-style: italic; font-size: 1.15em; line-height: 1.4; color: var(--wp-text); margin: 0 0 8px; }
.quote-card .by { font-size: 0.9em; color: var(--wp-muted); }

/* ─── GRIJZE TEKSTBOX ────────────────────────────────────────────────────
   Vervangt de grijze secties uit de WP-bron (data-op3-background="base").
   Voor losse tekstblokken; reviews met sterren gebruiken .testimonial-card. */
.grey-box { background: var(--wp-card); border-radius: 12px; padding: 24px 28px; margin: 1.6em auto; }
.grey-box p { margin: 0 0 0.9em; }
.grey-box p:last-child { margin-bottom: 0; }
.grey-box .name { font-weight: 700; }

/* ─── TESTIMONIAL-KAART (grijs, review) ──────────────────────────────────── */
.testimonial-card {
  background: var(--wp-card); border-radius: 12px; padding: 24px 26px; margin: 1.2em auto; text-align: center;
}
.testimonial-card .avatar { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; margin: 0 auto 12px; box-shadow: 0 3px 8px rgba(0,0,0,0.15); }
.testimonial-card .avatar img { width: 100%; height: 100%; object-fit: cover; }
.testimonial-card .stars { color: var(--wp-gold); letter-spacing: 2px; margin-bottom: 8px; }
.testimonial-card .t { font-style: italic; font-weight: 600; line-height: 1.45; margin: 0 0 8px; }
.testimonial-card .by { font-size: 0.88em; color: var(--wp-muted); }

/* ─── PRODUCT-REVEAL ─────────────────────────────────────────────────────── */
.product-reveal { text-align: center; margin: 1.6em auto; }
.product-reveal .pname { font-family: 'Montserrat', sans-serif; font-weight: 800; color: var(--wp-green); font-size: 1.7em; line-height: 1.2; margin: 0.2em 0 0.8em; }
.product-reveal img { max-width: 460px; margin: 0 auto; }

/* ─── GROENE CTA-KNOP ────────────────────────────────────────────────────── */
.cta-center { text-align: center; margin: 1.6em auto; }
.cta-wp, a.cta-wp {
  display: block; width: 100%; max-width: var(--content); margin: 1em auto;
  background: var(--wp-green); color: #fff !important; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.35em;
  text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
  padding: 18px 16px; border-radius: 8px; box-shadow: 0 3px 8px rgba(103,157,52,0.3);
}
.cta-wp:hover { background: var(--wp-green-dark); }

/* ─── PRODUCT-SLIDER (volledig zelfstandig — eigen .nf-* klassen zodat de
   portal-slider-JS hem NIET aanraakt; sticky.js regelt autoplay/pijltjes/dots) ── */
.product-block { max-width: var(--content); margin: 1.6em auto; background: #f0faf2; border-left: 4px solid var(--wp-green); border-radius: 10px; padding: 26px 24px; }
.product-block-title { text-align: center; color: var(--wp-text); font-weight: 800; font-size: 1.4em; margin: 0 0 1em; }
.nf-slider { position: relative; max-width: 420px; margin: 0 auto; }
.nf-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; border-radius: 8px; background: #fff; }
.nf-track::-webkit-scrollbar { display: none; }
.nf-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.nf-slide .nf-imgslide { width: 100%; height: 100%; overflow: hidden; border-radius: 8px; position: relative; }
.nf-slide .nf-imgslide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.nf-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: rgba(103,157,52,0.9); color: #fff; border: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6em; line-height: 1; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,0.2); z-index: 2; cursor: pointer; padding: 0; font-family: inherit; }
.nf-arrow:hover { background: var(--wp-green); }
.nf-prev { left: 8px; }
.nf-next { right: 8px; }
.nf-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.nf-dot { width: 10px; height: 10px; border-radius: 50%; background: #ccc; cursor: pointer; transition: background 0.2s; }
.nf-dot:hover, .nf-dot.active { background: var(--wp-green); }
.product-block-cta { text-align: center; margin-top: 1.4em; }
@media (max-width: 740px) { .nf-arrow { display: none; } .product-block { padding: 22px 16px; } }

/* ─── FAQ (2-koloms accordion) ───────────────────────────────────────────── */
.faq-wrap { margin: 1.6em auto; }
.faq-wrap h2 { text-align: center; font-weight: 800; font-size: 1.6em; margin-bottom: 0.8em; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.faq-grid details { border-bottom: 1px solid var(--wp-border); padding: 6px 0; }
.faq-grid summary { list-style: none; cursor: pointer; font-weight: 700; color: var(--wp-text); font-size: 0.98em; display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary::after { content: "+"; color: var(--wp-coral); font-weight: 800; }
.faq-grid details[open] summary::after { content: "–"; }
.faq-grid .a { padding: 0 2px 10px; font-size: 0.95em; color: var(--wp-muted); }
@media (max-width: 640px) { .faq-grid { grid-template-columns: 1fr; } }

/* ─── GARANTIE-BOX (roze) ────────────────────────────────────────────────── */
.guarantee-wp { text-align: center; margin: 1.8em auto; background: #fdeef0; border: 2px solid #f3ced4; border-radius: 18px; padding: 30px 32px; }
.guarantee-wp h2 { font-weight: 800; font-size: 1.4em; color: #c0392b; margin-bottom: 0.6em; }
.guarantee-wp img { max-width: 220px; margin: 0.4em auto 0.8em; mix-blend-mode: multiply; }
.guarantee-wp .gt-tagline { text-align: center; font-size: 1.05em; margin: 0 0 1em; }
.guarantee-wp .body { text-align: left; }

/* ─── PROMO-BOX (crème/goud) — bundel-korting intro ──────────────────────── */
.promo-box { max-width: var(--content); margin: 1.4em auto; background: #fdf6e6; border: 2px solid #e0a63c; border-radius: 18px; padding: 28px 32px; }
.promo-box h3 { font-family: 'Montserrat', sans-serif; font-weight: 800; color: #b07d2b; font-size: 1.2em; text-align: left; margin: 0 0 0.9em; }
.promo-box p { margin: 0 0 1em; }
.promo-box p:last-child { margin-bottom: 0; }

/* ─── DISCLAIMER / FOOTER ────────────────────────────────────────────────── */
.disclaimer { font-size: 0.8em; color: #7a7a7a; line-height: 1.6; margin: 2em auto; }
.wp-footer { text-align: center; padding: 24px 18px 40px; color: #7a7a7a; font-size: 0.82em; }
.wp-footer a { color: var(--wp-green-dark); }

/* ============================================================================
   BUNDLE-PRICING BLOCK — 1-op-1 uit bestaande Nutrifoodz-pages (mobile+desktop)
   ============================================================================ */
.bundle-section { padding: 20px 0; background: #fff; }
.bundle-desktop { display: none; }
.bundle-mobile { display: grid; grid-template-columns: 1fr; gap: 18px; }
.bundle-mobile-card { background: #fff; border: 2px solid #e0e0e0; border-radius: 8px; overflow: hidden; display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto auto; }
.bundle-mobile-card.best { border-color: #2d8a3e; order: 1; }
.bundle-mobile-card.discount { border-color: #ff7a2e; order: 2; }
.bundle-mobile-card.trial { border-color: #c8c8c8; order: 3; }
.bundle-mobile-label { grid-column: 1/2; grid-row: 1/2; background: #2d8a3e; color: #fff; font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; padding: 10px 8px; display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1.15; }
.bundle-mobile-card.discount .bundle-mobile-label { background: #ff7a2e; }
.bundle-mobile-card.trial .bundle-mobile-label { background: #c8c8c8; }
.bundle-mobile-title { grid-column: 2/3; grid-row: 1/2; font-size: 15px; font-weight: 800; color: #1a1a1a; line-height: 1.25; padding: 10px 14px; display: flex; align-items: center; }
.bundle-mobile-img { grid-column: 1/2; grid-row: 2/3; padding: 10px; display: flex; align-items: center; justify-content: center; }
/* Kaart zonder tekstlabel (korting zit al in de productfoto): foto vult de linkerkolom */
.bundle-mobile-card.no-label .bundle-mobile-img { grid-row: 1 / 3; }
.bundle-desktop-card.no-label .bundle-desktop-body { padding-top: 22px; }
.bundle-mobile-img img { width: 100%; height: auto; max-width: 180px; }
.bundle-mobile-info { grid-column: 2/3; grid-row: 2/3; padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.bundle-mobile-total { font-size: 14px; color: #1a1a1a; font-weight: 700; line-height: 1.3; }
.bundle-mobile-total .strike { text-decoration: line-through; color: #999; font-weight: 400; margin-left: 4px; }
.bundle-mobile-saved { font-size: 14px; font-weight: 700; font-style: italic; line-height: 1.3; }
.bundle-mobile-price { font-size: 22px; font-weight: 800; line-height: 1.1; color: #d62828; margin-top: 2px; }
.bundle-mobile-price .unit { font-size: 18px; font-weight: 700; color: #1a1a1a; }
.bundle-mobile-card.trial .bundle-mobile-price { color: #1a1a1a; }
.bundle-mobile-stock { font-size: 13px; font-weight: 800; color: #d62828; line-height: 1.2; text-align: right; }
.bundle-mobile-shipping { font-size: 12px; font-weight: 700; color: #1a1a1a; line-height: 1.3; text-align: center; margin-top: 10px; }
.bundle-mobile-shipping.trial { font-weight: 400; color: #555; }
.bundle-mobile-cta { display: block; text-align: center; color: #fff; text-decoration: none; font-weight: 800; font-size: 17px; padding: 13px 12px; letter-spacing: 0.5px; text-transform: uppercase; border-radius: 8px; margin-top: 6px; background: #2d8a3e; }
.bundle-mobile-card.discount .bundle-mobile-cta { background: #ff7a2e; }
.bundle-mobile-card.trial .bundle-mobile-cta { background: #c8c8c8; }
.bundle-desktop-card { background: #fff; border: 3px solid #c8c8c8; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; text-align: center; }
.bundle-desktop-card.best { border-color: #4caf50; }
.bundle-desktop-card.discount { border-color: #ff7a2e; }
.bundle-desktop-label { color: #fff; font-size: 18px; font-weight: 800; text-transform: uppercase; padding: 10px 12px; letter-spacing: 0.5px; line-height: 1.2; background: #c8c8c8; }
.bundle-desktop-card.best .bundle-desktop-label { background: #4caf50; }
.bundle-desktop-card.discount .bundle-desktop-label { background: #ff7a2e; }
.bundle-desktop-body { padding: 18px 16px 16px; display: flex; flex-direction: column; align-items: center; flex: 1; }
.bundle-desktop-title { font-size: 17px; font-weight: 700; color: #1a1a1a; line-height: 1.3; margin-bottom: 6px; }
.bundle-desktop-portions { font-size: 14px; color: #1a1a1a; margin-bottom: 12px; }
.bundle-desktop-per-portion { display: inline-block; background: #fff3a8; color: #1a1a1a; font-size: 14px; font-weight: 700; padding: 5px 12px; border-radius: 3px; margin-bottom: 16px; }
.bundle-desktop-img-wrap { margin: 0 auto 16px; width: 100%; padding: 0 20px; }
.bundle-desktop-img-wrap img { width: 100%; max-width: 100%; aspect-ratio: 1/1; object-fit: contain; }
.bundle-desktop-price { font-size: 32px; font-weight: 800; line-height: 1.1; margin: 4px 0 12px; color: #1a1a1a; }
.bundle-desktop-price .green { color: #2d8a3e; }
.bundle-desktop-price .grey { color: #b8b8b8; }
.bundle-desktop-pricing-detail { font-size: 15px; color: #1a1a1a; line-height: 1.5; margin-bottom: 6px; }
.bundle-desktop-pricing-detail .strike { text-decoration: line-through; color: #999; }
.bundle-desktop-pricing-detail .save-orange { color: #ff7a2e; font-weight: 700; }
.bundle-desktop-pricing-detail .save-red { color: #d62828; font-weight: 700; }
.bundle-desktop-pricing-detail .save-grey { color: #999; }
.bundle-desktop-shipping { font-size: 14px; color: #1a1a1a; margin-bottom: 12px; }
.bundle-desktop-stars { color: #ffc107; font-size: 16px; letter-spacing: 1px; margin-bottom: 6px; }
.bundle-desktop-social { font-size: 13px; color: #1a1a1a; line-height: 1.4; margin-bottom: 14px; }
.bundle-desktop-social .green { color: #2d8a3e; font-weight: 700; }
.bundle-desktop-cta { display: block; text-align: center; color: #fff; text-decoration: none; font-weight: 800; font-size: 22px; padding: 18px 12px; letter-spacing: 0.5px; text-transform: uppercase; width: 100%; background: #c8c8c8; margin-top: auto; }
.bundle-desktop-card.best .bundle-desktop-cta { background: #4caf50; }
.bundle-desktop-card.discount .bundle-desktop-cta { background: #ff7a2e; }
.bundle-desktop-guarantee { padding: 14px 16px 6px; }
.bundle-desktop-guarantee .line1 { font-size: 15px; font-weight: 700; color: #1a1a1a; }
.bundle-desktop-guarantee .line2 { font-size: 13px; color: #555; margin-top: 2px; }
.bundle-desktop-payments { padding: 8px 16px 16px; text-align: center; }
.bundle-desktop-payments img { max-width: 100%; margin: 0 auto; }
@media (min-width: 960px) {
  .bundle-mobile { display: none; }
  .bundle-desktop { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: stretch; }
  .bundle-desktop-card.discount { order: 1; }
  .bundle-desktop-card.best { order: 2; }
  .bundle-desktop-card.trial { order: 3; }
  .bundle-desktop-card.best { box-shadow: 0 4px 16px rgba(76,175,80,0.18); }
}

/* ─── COMMUNITY (groene gradient-box — Creating Better Humans) ────────────── */
.community { max-width: var(--content); margin: 2.5em auto; background: linear-gradient(135deg, #4a9d5e, #3d8650); color: #fff; padding: 36px; border-radius: 12px; text-align: left; }
.community h3 { color: #fff; margin-top: 0; text-align: center; font-weight: 800; font-size: 1.4em; line-height: 1.3; }
.community h4.community-sub { color: #fff; font-size: 1.2em; margin: 1.8em 0 0.4em; border-bottom: 1px solid rgba(255,255,255,0.25); padding-bottom: 6px; font-family: 'Montserrat', sans-serif; font-weight: 800; }
.community h4.community-tagline { text-align: center; font-size: 1.6em; margin-top: 2em; border-bottom: none; letter-spacing: 0.5px; font-style: italic; }
.community p { color: #fff; text-align: left; }
.community strong { color: #fff; }
.community em { color: #fff5d6; font-style: italic; }

/* ─── MISSIE-BEELDEN (Justdiggit / 4Ocean) ───────────────────────────────── */
.img-mission { max-width: var(--content); margin: 1.5em auto; }
.img-mission img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ─── IMPACT-BLOKKEN (Justdiggit = groen, 4Ocean = blauw) ─────────────────── */
.impact-block { max-width: var(--content); margin: 2em auto; padding: 36px; border-radius: 12px; }
.impact-block h3 { margin-top: 0; text-align: center; font-size: 1.7em; font-weight: 800; }
.impact-block h4.impact-sub { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15em; margin: 1.8em 0 0.4em; padding-bottom: 6px; }
.impact-block .impact-lead { font-size: 1.1em; font-weight: 600; font-style: italic; text-align: center; margin: 1em 0 1.5em; }
.impact-land { background: linear-gradient(135deg, #f4f8ec, #e8f3d6); border-left: 5px solid #6ba84f; color: #2c3a1f; }
.impact-land h3 { color: #3d6a23; }
.impact-land h4.impact-sub { color: #3d6a23; border-bottom: 1px solid #b8d49a; }
.impact-land strong { color: #2c5a12; }
.impact-ocean { background: linear-gradient(135deg, #e9f4f8, #d4eaf2); border-left: 5px solid #2a8fb5; color: #1f2f3a; }
.impact-ocean h3 { color: #1a5a78; }
.impact-ocean h4.impact-sub { color: #1a5a78; border-bottom: 1px solid #a8c8d8; }
.impact-ocean strong { color: #0d4560; }

/* ─── ZWARTE FOOTER (met wit Nutrifoodz-logo) ────────────────────────────── */
.site-footer { background: #000; color: #b9b9b9; padding: 34px 18px 40px; margin-top: 2.5em; font-size: 0.82em; line-height: 1.6; text-align: center; }
.site-footer .footer-inner { max-width: var(--content); margin: 0 auto; }
.site-footer .footer-results { font-style: italic; margin-bottom: 1.4em; }
/* Wit logo: het donkere logo (witte achtergrond) inverteren → wit op zwart */
.site-footer .footer-logo { display: block; height: 56px; width: auto; margin: 1.6em auto 1.2em; filter: invert(1) brightness(1.6); }
.site-footer .footer-copy { color: #8a8a8a; margin-top: 1.2em; }

/* ─── RESEARCH LINKS ─────────────────────────────────────────────────────── */
.research-links { background: #f8f8f8; padding: 22px 24px; margin: 2em auto; border-radius: 6px; font-size: 0.85em; border-left: 4px solid var(--wp-green); }
.research-links h3 { margin-top: 0; text-align: left; font-family: 'Montserrat', sans-serif; font-weight: 800; }
.research-links a { color: var(--wp-green-dark); overflow-wrap: break-word; }
.research-links ol, .research-links ul { padding-left: 1.3em; }
.research-links li { margin-bottom: 0.5em; }

/* ─── SCHAARSTE-BALK (voorraad-melding boven de hook of vóór een bundel) ──── */
.scarcity-bar { background: #fff4e5; border: 2px solid var(--wp-orange); border-radius: 8px;
  margin: 1.4em auto; padding: 14px 18px; text-align: center; }
.scarcity-bar p { margin: 0; font-family: 'Montserrat', sans-serif; font-weight: 800;
  font-size: 1.02em; line-height: 1.35; color: #1a1a1a; }
.scarcity-bar .count { color: var(--wp-orange); }
.scarcity-bar a { display: inline-block; margin-top: 8px; color: var(--wp-green-dark); font-weight: 700; }
@media (max-width: 740px) {
  body > .scarcity-bar { margin-left: 14px; margin-right: 14px; padding: 12px 14px; }
  .scarcity-bar p { font-size: 0.95em; }
}

/* ─── SIGNATURE-BLOK (persoonlijke afsluiting onder de bundle) ────────────── */
.signature-block { background: #f5f5f5; padding: 28px; margin: 2.5em auto; max-width: var(--content); border-radius: 10px; border-left: 4px solid #ed716b; }
.signature-block p:first-child { margin-top: 0; }
.signature-block p:last-child { margin-bottom: 0; }

/* ============================================================================
   FIXES — centrering, mobiele padding, geen horizontale scroll, sticky CTA
   ============================================================================ */

/* Vangnet tegen horizontaal scrollen op mobiel */
html, body { overflow-x: hidden; }

/* Productbeeld krimpt mee met smalle schermen (voorheen bleef het 460px → overflow) */
.product-reveal img { width: 100%; }

/* ─── STICKY CTA-BALK ─────────────────────────────────────────────────────────
   Onzichtbaar tot .show wordt gezet (JS toont hem na de 1e bundle-CTA en
   verbergt hem zodra de bundle in beeld is). Inert zonder de bijbehorende markup. */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 -2px 14px rgba(0,0,0,0.14);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  transform: translateY(130%); transition: transform 0.32s ease;
  pointer-events: none;
}
.sticky-cta.show { transform: translateY(0); pointer-events: auto; }
.sticky-cta a {
  display: block; max-width: var(--content); margin: 0 auto;
  background: var(--wp-green); color: #fff !important; text-decoration: none;
  font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.15em;
  text-transform: uppercase; letter-spacing: 0.5px; text-align: center;
  padding: 15px 16px; border-radius: 8px; box-shadow: 0 3px 8px rgba(103,157,52,0.35);
}
.sticky-cta a:hover { background: var(--wp-green-dark); }

/* ─── MOBIELE PADDING-FIXES (≤ 740px) ─────────────────────────────────────── */
@media (max-width: 740px) {
  /* Vinkjes/problemen-lijst losser van de schermrand (klasse overschreef de basispadding) */
  body > ul.check, body > ul.problems { padding-left: 18px; padding-right: 18px; }

  /* Gekleurde/grijze boxen niet meer rand-aan-rand, maar ingesprongen */
  body > .harvard-quote,
  body > .quote-card,
  body > .testimonial-card {
    margin-left: 16px; margin-right: 16px;
  }

  /* Bundelblok (prijskaarten) losser van de schermranden */
  body > .bundle-section { padding-left: 16px; padding-right: 16px; }

  /* Garantie- en promo-box los van de schermranden + compactere binnenpadding */
  body > .guarantee-wp, body > .promo-box { margin-left: 14px; margin-right: 14px; }
  .guarantee-wp { padding-left: 20px; padding-right: 20px; }
  .promo-box { padding-left: 20px; padding-right: 20px; }

  /* Community- en impact-blokken los van de schermranden + compactere padding */
  .community, .impact-block, .img-mission { margin-left: 14px; margin-right: 14px; }
  .community, .impact-block { padding: 26px 20px; }
  /* body > .community wint qua specificiteit van de regel hierboven → hier gelijktrekken */
  body > .community { margin-left: 14px; margin-right: 14px; padding: 26px 20px; }

  /* Grijze tekstboxen los van de schermranden + compactere binnenpadding */
  body > .grey-box { margin-left: 14px; margin-right: 14px; }
  .grey-box { padding: 20px 18px; }

  /* Referentie-box en signature-blok los van de schermranden */
  body > .research-links, body > .signature-block { margin-left: 14px; margin-right: 14px; }
  body > .research-links { padding: 22px 20px; }
  body > .signature-block { padding: 24px 20px; }

  /* Product-slider-blok los van de schermranden */
  body > .product-block { margin-left: 14px; margin-right: 14px; }

  /* Iets compactere sticky-knop op kleine schermen */
  .sticky-cta { padding-left: 12px; padding-right: 12px; }
  .sticky-cta a { font-size: 1.05em; padding: 14px 12px; }
}