/* =====================================================================
   BabyMaaltje.nl — stylesheet
   Mobile-first. Kleuren komen als CSS-variabelen uit de database
   (Settings::cssVariables), de waarden hieronder zijn de fallback.
   ===================================================================== */

:root {
  /* Merkkleuren — overschrijfbaar vanuit de database */
  --c-green-900:  #1E3B2C;   /* koppen, donkere tekst */
  --c-green-700:  #3A6B4C;   /* primaire knop */
  --c-green-600:  #4A7C5C;
  --c-green-300:  #A8C4A2;
  --c-green-100:  #E8F0E4;   /* lichte vlakken, tool-kaarten */
  --c-green-050:  #F2F7EF;
  --c-orange-500: #EE8034;   /* accent, knop oranje */
  --c-orange-400: #F49A5A;
  --c-orange-100: #FCE7D5;   /* perzik vlakken */
  --c-orange-050: #FDF1E6;
  --c-cream:      #FDF6F0;   /* paginablad */
  --c-white:      #FFFFFF;
  --c-ink:        #2C2C2C;
  --c-ink-soft:   #6B6B6B;
  --c-line:       rgba(30, 59, 44, .10);

  /* Typografie */
  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* Ritme */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem;  --sp-8: 2rem;    --sp-10: 2.5rem;
  --sp-12: 3rem;   --sp-16: 4rem;

  --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-xl: 26px; --r-pill: 999px;

  --shadow-card: 0 2px 12px rgba(30, 59, 44, .06);
  --shadow-lift: 0 6px 24px rgba(30, 59, 44, .10);

  --wrap: 480px;          /* mobiel-eerst: de site is een kolom */
  --gutter: 20px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-cream);
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Inline iconen krijgen een vast formaat; anders schalen ze mee met hun
   viewBox en vullen ze de hele container. */
svg { display: block; flex-shrink: 0; }
svg:not([width]):not(.logo__mark) { width: 20px; height: 20px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--c-green-900);
  line-height: 1.2;
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  letter-spacing: -.01em;
}
h1 { font-size: 2rem; line-height: 1.15; letter-spacing: -.02em; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p  { margin: 0 0 var(--sp-4); }

/* Toegankelijkheid: zichtbare focus, altijd */
:focus-visible {
  outline: 3px solid var(--c-orange-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-green-900); color: #fff;
  padding: var(--sp-3) var(--sp-4); z-index: 200; border-radius: 0 0 var(--r-sm) 0;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------- layout */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page { max-width: var(--wrap); margin-inline: auto; background: var(--c-cream); overflow-x: hidden; }

.section { padding-block: var(--sp-10); }
.section--tight { padding-block: var(--sp-6); }
.section--cream { background: var(--c-cream); }
.section--peach { background: var(--c-orange-050); }

/* ------------------------------------------------------------- header */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--c-cream);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck {
  border-bottom-color: var(--c-line);
  box-shadow: 0 1px 8px rgba(30, 59, 44, .05);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); min-height: 62px;
}

.logo { display: flex; align-items: center; gap: var(--sp-2); text-decoration: none; }
.logo__mark { width: 34px !important; height: 34px !important; flex: 0 0 34px; }
.logo__text { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }
.logo__text .is-baby   { color: var(--c-green-700); }
.logo__text .is-maal   { color: var(--c-orange-500); }
.logo__text .is-tld    { color: var(--c-green-900); font-weight: 600; }

.nav-toggle {
  appearance: none; border: 0; background: none; cursor: pointer;
  width: 44px; height: 44px; padding: 10px;      /* 44px tikdoel */
  display: grid; place-content: center; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 2px; border-radius: 2px;
  background: var(--c-green-900); transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-nav {
  display: none;
  border-top: 1px solid var(--c-line);
  padding-block: var(--sp-3) var(--sp-5);
}
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a {
  display: block; padding: var(--sp-3) 0;
  text-decoration: none; font-weight: 600; color: var(--c-green-900);
}
.site-nav a:hover { color: var(--c-orange-500); }

/* ------------------------------------------------------------- hero */
.hero { position: relative; padding-top: var(--sp-6); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-orange-100); color: var(--c-green-900);
  font-size: .8125rem; font-weight: 600;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-5);
}
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-orange-500); }

.hero__title { font-size: 2.125rem; margin-bottom: var(--sp-4); }
.hero__intro { color: var(--c-ink-soft); font-size: 1rem; max-width: 34ch; margin-bottom: var(--sp-6); }

/* Dezelfde verhouding en marges als de rest. Dit beeld liep tot de
   schermrand en had een andere verhouding dan alle andere; dat is precies
   wat een homepage rommelig maakt. */
.hero__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-green-050);
  margin-bottom: var(--sp-6);
}
.hero__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------- gerecht van de dag */
.daily {
  background: var(--c-white);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-top: calc(var(--sp-12) * -1);
  position: relative; z-index: 2;
}
.daily__label svg { width: 18px; height: 18px; color: var(--c-orange-500); }
.daily__label {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-weight: 700; color: var(--c-green-900); font-size: 1rem;
  margin-bottom: var(--sp-4);
}
.daily__media {
  position: relative; border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-green-050);
}
.daily__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.fav-btn {
  position: absolute; top: var(--sp-3); right: var(--sp-3);
  width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  display: grid; place-content: center; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  transition: transform .18s ease, background .18s ease;
}
.fav-btn:hover { transform: scale(1.08); }
.fav-btn svg { width: 19px; height: 19px; stroke: var(--c-green-900); fill: none; stroke-width: 1.9; }
.fav-btn[aria-pressed="true"] svg { fill: var(--c-orange-500); stroke: var(--c-orange-500); }

.daily__title { text-align: center; font-size: 1.375rem; margin: var(--sp-5) 0 var(--sp-4); }

.meta-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap; gap: var(--sp-2);
  font-size: .75rem; color: var(--c-ink-soft);
  margin-bottom: var(--sp-5);
  white-space: nowrap;
}
.meta-row__item svg { width: 14px; height: 14px; }
.meta-row__item { display: inline-flex; align-items: center; gap: 5px; }
.meta-row__item svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.meta-row__sep { color: var(--c-green-300); }

/* ------------------------------------------------------------- knoppen */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 50px; padding: var(--sp-3) var(--sp-6);
  border: 0; border-radius: var(--r-pill);
  font-family: var(--font-display); font-size: .9375rem; font-weight: 600;
  text-decoration: none; cursor: pointer; width: 100%;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translateY(0); }
.btn svg { width: 18px; height: 18px; stroke-width: 2; }
.btn__arrow { transition: transform .2s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.btn--green  { background: var(--c-green-700); color: #fff; }
.btn--green:hover { background: var(--c-green-600); }
.btn--orange { background: var(--c-orange-500); color: #fff; }
.btn--orange:hover { background: var(--c-orange-400); }
.btn--ghost  { background: transparent; color: var(--c-green-900); border: 1.5px solid var(--c-line); }
.btn--inline { width: auto; }

/* Tekstlink met pijl — zoals "Gebruik generator →" */
.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: .875rem; text-decoration: none;
  color: var(--c-orange-500);
}
.link-arrow:hover { text-decoration: underline; }
.link-arrow svg { width: 14px; height: 14px; transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(3px); }

/* ------------------------------------------------------------- tools */
.tools { display: grid; gap: var(--sp-3); }

.tool-card {
  display: flex; gap: var(--sp-4);
  background: var(--c-green-050);
  border: 1px solid var(--c-green-100);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  transition: box-shadow .2s ease, transform .2s ease;
}
.tool-card:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.tool-card__icon {
  flex: 0 0 46px; width: 46px; height: 46px;
  background: var(--c-white); border-radius: var(--r-md);
  display: grid; place-content: center;
}
.tool-card__icon svg { width: 23px; height: 23px; stroke: var(--c-green-700); fill: none; stroke-width: 1.5; }
.tool-card__body { flex: 1; min-width: 0; }
.tool-card__title { font-size: 1rem; font-weight: 700; color: var(--c-green-900); margin-bottom: var(--sp-1); }
.tool-card__text  { font-size: .875rem; color: var(--c-ink-soft); margin-bottom: var(--sp-3); line-height: 1.5; }

/* ------------------------------------------------------------- producten */
.products-head { text-align: center; margin-bottom: var(--sp-6); }
.products-head h2 { font-size: 1.25rem; margin-bottom: var(--sp-2); }
.products-head p  { font-size: .9375rem; color: var(--c-ink-soft); margin: 0; }

.product-card {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
  overflow: hidden;
}
.product-card--orange { background: var(--c-orange-050); }
.product-card--green  { background: var(--c-green-050); }

.product-card__badge {
  display: inline-block;
  background: var(--c-white);
  color: var(--c-green-900);
  font-size: .75rem; font-weight: 600;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
}
.product-card--orange .product-card__badge { color: var(--c-orange-500); }

.product-card__grid { display: grid; grid-template-columns: 1fr 42%; gap: var(--sp-4); align-items: start; }
.product-card__title { font-size: 1.375rem; margin-bottom: var(--sp-4); }

.feature-list { list-style: none; margin: 0 0 var(--sp-5); padding: 0; display: grid; gap: var(--sp-3); }
.feature-list li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-3);
  align-items: start; font-size: .875rem; line-height: 1.45; color: var(--c-ink);
}
.feature-list svg { width: 18px; height: 18px; margin-top: 2px; }
.product-card--orange .feature-list svg { color: var(--c-orange-500); }
.product-card--green  .feature-list svg { color: var(--c-green-700); }

/* De omslag wordt VOLLEDIG getoond en nooit bijgesneden. Op een omslag
   staat tekst, en die mag je niet afkappen om een vakje te vullen.

   height: auto laat het beeld zijn eigen verhouding houden, welke dat ook
   is. Samen met de width- en height-attributen uit het bestand weet de
   browser vooraf hoeveel ruimte hij vrij moet houden, en verspringt de
   pagina niet tijdens het laden. */
/* 16:9 is breed en laag. In een kolom van 480px betekent dat een beeld
   van hooguit 250 pixels hoog, en dat valt weg als het ook nog marges
   krijgt.

   Daarom over de VOLLE breedte van de kaart, zonder zijmarge en zonder
   afgeronde hoeken aan de onderkant. Dan wordt het beeld het gezicht van
   de kaart in plaats van een plaatje erin.

   aspect-ratio 16/9 met object-fit: cover is hier veilig: de beelden ZIJN
   16:9, dus er wordt niets bijgesneden. Het voorkomt alleen dat de kaart
   verspringt als er ooit een afwijkend beeld tussen zit. */
.product-card__cover {
  display: block;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--c-green-050);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.product-card__cover img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.product-card__cover--orange { background: var(--c-orange-050); }

.product-card__foot { display: flex; align-items: center; gap: var(--sp-4); }
.product-card__price {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--c-green-900); white-space: nowrap;
}
.product-card__foot .btn {
  flex: 1; min-width: 0;
  font-size: .8125rem; padding-inline: var(--sp-4);
  white-space: nowrap;
}
.product-card__foot .btn svg { width: 16px; height: 16px; }

/* ------------------------------------------------------------- content */
.answer-box {
  background: var(--c-green-050);
  border-left: 4px solid var(--c-green-700);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  font-size: 1rem; line-height: 1.6;
}
.answer-box p:last-child { margin-bottom: 0; }

.safety-note {
  display: flex; gap: var(--sp-3);
  background: var(--c-orange-050);
  border: 1px solid var(--c-orange-100);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  font-size: .875rem; line-height: 1.5;
  margin-bottom: var(--sp-5);
}
.safety-note svg { flex: 0 0 20px; width: 20px; height: 20px; color: var(--c-orange-500); margin-top: 2px; }
.safety-note strong { display: block; color: var(--c-green-900); margin-bottom: 2px; }

.byline {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: .8125rem; color: var(--c-ink-soft);
  padding-block: var(--sp-4);
  border-block: 1px solid var(--c-line);
  margin-bottom: var(--sp-6);
}
.byline__avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.byline a { color: var(--c-green-700); font-weight: 600; }

.breadcrumbs { font-size: .8125rem; color: var(--c-ink-soft); padding-block: var(--sp-4) 0; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.breadcrumbs li::after { content: '/'; margin-left: var(--sp-2); color: var(--c-green-300); }
.breadcrumbs li:last-child::after { content: ''; }
.breadcrumbs a { color: var(--c-green-700); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }

/* Chips: leeftijdsnavigatie */
.chips { display: flex; gap: var(--sp-2); overflow-x: auto; padding-block: var(--sp-2) var(--sp-4);
         scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(var(--gutter) * -1);
         padding-inline: var(--gutter); }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-pill); font-size: .875rem; font-weight: 600;
  color: var(--c-green-900); text-decoration: none; white-space: nowrap;
}
.chip.is-active { background: var(--c-green-700); border-color: var(--c-green-700); color: #fff; }

/* Receptkaarten in een raster */
.recipe-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
.recipe-card {
  background: var(--c-white); border-radius: var(--r-lg);
  overflow: hidden; box-shadow: var(--shadow-card); text-decoration: none;
  display: flex; flex-direction: column;
}
/* Ook 16:9. Vierkante receptkaarten naast 16:9-productkaarten op dezelfde
   pagina is precies het soort verschil dat een site rommelig maakt. */
.recipe-card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--c-green-050); }
.recipe-card__media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card__body { padding: var(--sp-3); flex: 1; display: flex; flex-direction: column; }
.recipe-card__title { font-size: .9375rem; font-weight: 700; color: var(--c-green-900); line-height: 1.3; margin-bottom: var(--sp-2); }
.recipe-card__meta { margin-top: auto; font-size: .75rem; color: var(--c-ink-soft); }

/* ------------------------------------------------------------- footer */
.site-footer {
  background: var(--c-green-900); color: rgba(255, 255, 255, .78);
  padding-block: var(--sp-10) var(--sp-8);
  font-size: .875rem;
}
.site-footer h3 {
  color: #fff; font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: var(--sp-3);
}
.site-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; line-height: 1.45; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-2); }
.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--sp-5); margin-top: var(--sp-4);
  font-size: .75rem; color: rgba(255, 255, 255, .55); line-height: 1.55;
}

/* ------------------------------------------------------------- breder scherm
   De site blijft één kolom van 480px, gecentreerd op een rustige achtergrond.
   Dat is een bewuste keuze: het ontwerp is voor de telefoon gemaakt. */
@media (min-width: 640px) {
  body { background: #F6EFE8; }
  .page { box-shadow: 0 0 60px rgba(30, 59, 44, .07); min-height: 100vh; }
}

/* =====================================================================
   Contentpagina's: artikel, recept, ingrediënt
   ===================================================================== */

.article { padding-bottom: var(--sp-8); }
.article .wrap > h1 { margin-top: var(--sp-4); font-size: 1.75rem; }

.article__hero {
  margin: var(--sp-5) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.article__hero img { width: 100%; height: 100%; object-fit: cover; }

/* Redactionele tekst uit de database */
.prose { font-size: 1rem; line-height: 1.7; }
.prose h2 { font-size: 1.25rem; margin-top: var(--sp-8); }
.prose h3 { font-size: 1.0625rem; margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.15rem; margin-bottom: var(--sp-4); }
.prose li { margin-bottom: var(--sp-2); }
.prose a { color: var(--c-green-700); font-weight: 500; }
.prose table {
  width: 100%; border-collapse: collapse; font-size: .875rem;
  margin-bottom: var(--sp-5);
}
.prose th, .prose td {
  text-align: left; padding: var(--sp-3);
  border-bottom: 1px solid var(--c-line);
}
.prose th { background: var(--c-green-050); font-weight: 600; color: var(--c-green-900); }

.meta-row--left { justify-content: flex-start; margin-bottom: var(--sp-5); }

.center-link { text-align: center; margin-top: var(--sp-5); }

/* ------------------------------------------------------- factsheet */
.factsheet {
  margin: 0 0 var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--c-white);
}
.factsheet__row {
  display: grid; grid-template-columns: 42% 1fr;
  border-bottom: 1px solid var(--c-line);
}
.factsheet__row:last-child { border-bottom: 0; }
.factsheet dt {
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-green-050);
  font-weight: 600; font-size: .875rem; color: var(--c-green-900);
}
.factsheet dd { padding: var(--sp-3) var(--sp-4); margin: 0; font-size: .875rem; }

/* -------------------------------------------------- ingrediëntenlijst */
.recipe-block { margin-block: var(--sp-8); }
.recipe-block__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4);
}
.recipe-block__head h2 { margin: 0; }

.servings {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-green-050); border-radius: var(--r-pill);
  padding: var(--sp-1);
}
.servings__btn {
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: var(--c-white); color: var(--c-green-900);
  font-size: 1.125rem; line-height: 1; cursor: pointer;
  display: grid; place-content: center;
}
.servings__btn:hover { background: var(--c-green-100); }
.servings__value { font-size: .8125rem; font-weight: 600; padding-inline: var(--sp-2); }

.ingredient-list { list-style: none; margin: 0; padding: 0; }
.ingredient-list li {
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
  font-size: .9375rem;
}
.ingredient-list li:last-child { border-bottom: 0; }
.ingredient-list__amount { font-weight: 700; color: var(--c-green-900); }
.ingredient-list__unit { color: var(--c-green-900); margin-right: 3px; }
.ingredient-list__note { color: var(--c-ink-soft); font-size: .8125rem; }
.ingredient-list a { color: var(--c-green-700); text-decoration: underline; text-underline-offset: 2px; }

/* -------------------------------------------------------- stappen */
.step-list { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step {
  display: grid; grid-template-columns: 34px 1fr; gap: var(--sp-4);
  padding-bottom: var(--sp-5); margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.step:last-child { border-bottom: 0; margin-bottom: 0; }
.step__number {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-green-700); color: #fff;
  display: grid; place-content: center;
  font-weight: 700; font-size: .9375rem;
}
.step__title { font-size: 1rem; margin-bottom: var(--sp-1); }
.step__body p { margin-bottom: var(--sp-3); font-size: .9375rem; }

.timer-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--c-orange-050); border: 1px solid var(--c-orange-100);
  color: var(--c-green-900); border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4); font-size: .8125rem; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.timer-btn svg { width: 15px; height: 15px; color: var(--c-orange-500); }
.timer-btn.is-running { background: var(--c-green-100); border-color: var(--c-green-300); }

.safety-note__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.safety-note__list li { margin-bottom: var(--sp-2); }

/* ------------------------------------------------------------ faq */
.faq { margin-block: var(--sp-8); }
.faq__item {
  border-bottom: 1px solid var(--c-line);
  padding-block: var(--sp-4);
}
.faq__item summary {
  cursor: pointer; font-weight: 600; color: var(--c-green-900);
  font-size: .9375rem; list-style: none; position: relative;
  padding-right: var(--sp-8);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: '+'; position: absolute; right: 0; top: -2px;
  font-size: 1.25rem; color: var(--c-orange-500); font-weight: 400;
}
.faq__item[open] summary::after { content: '−'; }
.faq__answer { padding-top: var(--sp-3); font-size: .9375rem; line-height: 1.65; }
.faq__answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------- bronnen */
.sources { margin-block: var(--sp-8); font-size: .8125rem; }
.sources h2 { font-size: 1rem; }
.sources__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.sources__list a { color: var(--c-green-700); }
.sources__date { color: var(--c-ink-soft); }

/* --------------------------------------------------------- pager */
.pager { display: grid; gap: var(--sp-3); margin-block: var(--sp-8); }
.pager__link {
  display: block; padding: var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-md); text-decoration: none;
}
.pager__link--next { text-align: right; }
.pager__label { display: block; font-size: .75rem; color: var(--c-ink-soft); }
.pager__title { display: block; font-weight: 700; color: var(--c-green-900); }

/* ---------------------------------------------------- leeftijdslijst */
.age-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.age-list__item {
  display: grid; grid-template-columns: 56px 1fr 20px;
  gap: var(--sp-4); align-items: center;
  padding: var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease;
}
.age-list__item:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }
.age-list__badge {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--c-green-100); color: var(--c-green-900);
  display: grid; place-content: center;
  font-weight: 700; font-size: .8125rem; text-align: center;
}
.age-list__title { display: block; font-weight: 700; color: var(--c-green-900); font-size: .9375rem; }
.age-list__text { display: block; font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.45; margin-top: 2px; }
.age-list__arrow { color: var(--c-orange-500); }

/* ------------------------------------------------------ lege staat */
.empty-state { text-align: center; padding-block: var(--sp-8); }
.empty-state__links { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.empty-state__links a { color: var(--c-green-700); font-weight: 600; }

/* =====================================================================
   Product- en checkoutpagina
   ===================================================================== */
.product-subtitle { color: var(--c-orange-500); font-weight: 600; margin-top: calc(var(--sp-3) * -1); }

/* De oude regel voor staande omslagen stond hier: max-width 240px en
   gecentreerd. Bij een 16:9-beeld levert dat een postzegel op van 240 bij
   135 pixels, midden op de pagina. De volledige stijl staat verderop bij
   de beeldvlakken. */

.feature-list--large li { font-size: .9375rem; }
.feature-list--large svg { color: var(--c-green-700); }

.checkout {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  margin-top: var(--sp-8);
}
.checkout h2 { margin-bottom: var(--sp-2); }
.checkout__price {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--c-green-900); margin-bottom: var(--sp-5); line-height: 1.1;
}
.checkout__vat { display: block; font-size: .8125rem; font-weight: 400; color: var(--c-ink-soft); }
.checkout__note { font-size: .8125rem; color: var(--c-ink-soft); margin: var(--sp-4) 0 0; line-height: 1.5; }

.field { display: block; margin-bottom: var(--sp-4); }
.field__label { display: block; font-size: .875rem; font-weight: 600; color: var(--c-green-900); margin-bottom: var(--sp-2); }
.field__input {
  width: 100%; min-height: 50px;
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid var(--c-line); border-radius: var(--r-md);
  font-family: inherit; font-size: 1rem; background: var(--c-cream);
  color: var(--c-ink);
}
.field__input:focus {
  outline: none; border-color: var(--c-green-700);
  box-shadow: 0 0 0 3px rgba(58, 107, 76, .14);
}
.field__hint { display: block; font-size: .75rem; color: var(--c-ink-soft); margin-top: var(--sp-2); }

.checkout__form .btn { margin-top: var(--sp-2); }

/* ---------------------------------------------------------- generator */
.generator__block { border: 0; padding: 0; margin: 0 0 var(--sp-6); }
.generator__category {
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-ink-soft); margin: var(--sp-5) 0 var(--sp-3); font-weight: 600;
}
.chips--inline { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
.chip--radio { cursor: pointer; position: relative; }
.chip--radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip--radio:has(input:checked) { background: var(--c-green-700); border-color: var(--c-green-700); color: #fff; }
.chip--radio:has(input:focus-visible) { outline: 3px solid var(--c-orange-500); outline-offset: 2px; }

.checkbox-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-2); }
.checkbox {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  font-size: .875rem; cursor: pointer; min-height: 46px;
}
.checkbox:has(input:checked) { background: var(--c-green-050); border-color: var(--c-green-300); }
.checkbox input { accent-color: var(--c-green-700); width: 18px; height: 18px; }

.generator__result { margin-top: var(--sp-8); }
.generated-recipe {
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-xl); padding: var(--sp-5);
}
.generated-recipe h2 { font-size: 1.25rem; }
.generated-notice {
  background: var(--c-orange-050); border: 1px solid var(--c-orange-100);
  border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
  font-size: .8125rem; margin-top: var(--sp-4); line-height: 1.5;
}
.blocked-list {
  background: var(--c-green-050); border-radius: var(--r-md);
  padding: var(--sp-4); font-size: .8125rem; margin-bottom: var(--sp-4);
}
.blocked-list ul { margin: var(--sp-2) 0 0; padding-left: 1.1rem; }
.is-loading { opacity: .55; pointer-events: none; }
.step-list--plain { list-style: decimal; padding-left: 1.3rem; }
.step-list--plain li { display: list-item; margin-bottom: var(--sp-3); border: 0; padding: 0; }

/* ---------------------------------------------------------- weekmenu */
.weekday { margin-bottom: var(--sp-6); }
.weekday__title {
  font-size: 1rem; padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--c-green-100);
}
.weekday__list { list-style: none; margin: 0; padding: 0; }
.weekday__list li {
  display: grid; grid-template-columns: 34% 1fr; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-line);
  font-size: .875rem;
}
.weekday__slot { color: var(--c-ink-soft); font-weight: 600; }
.weekday__meal a { color: var(--c-green-700); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------- artikel & auteur */
.related { margin-block: var(--sp-8); }
.related__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.related__list a {
  display: block; padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-md); color: var(--c-green-900);
  font-weight: 600; font-size: .875rem; text-decoration: none;
}
.related__list a:hover { border-color: var(--c-green-300); }

.author-head { display: flex; gap: var(--sp-4); align-items: flex-start; margin-bottom: var(--sp-5); }
.author-head__photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: 0 0 88px; }
.author-head h1 { font-size: 1.5rem; margin-bottom: var(--sp-1); }
.author-head__role { color: var(--c-orange-500); font-weight: 600; font-size: .875rem; margin-bottom: 2px; }
.author-head__creds { font-size: .8125rem; color: var(--c-ink-soft); margin: 0; }

/* -------------------------------------------------------- paginering */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2); margin-top: var(--sp-8);
}
.pagination__step {
  padding: var(--sp-2) var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-white);
  font-size: .8125rem; font-weight: 600; color: var(--c-green-900);
  text-decoration: none; white-space: nowrap; min-height: 40px;
  display: inline-flex; align-items: center;
}
.pagination__step:hover { border-color: var(--c-green-300); }
.pagination__step.is-disabled { opacity: .35; pointer-events: none; }

.pagination__pages { display: flex; gap: var(--sp-1); list-style: none; margin: 0; padding: 0; }
.pagination__page {
  display: grid; place-content: center;
  min-width: 38px; height: 38px; padding-inline: var(--sp-2);
  border-radius: var(--r-sm); font-size: .8125rem; font-weight: 600;
  color: var(--c-green-900); text-decoration: none;
}
.pagination__page:hover { background: var(--c-green-050); }
.pagination__page.is-current { background: var(--c-green-700); color: #fff; }
.pagination__gap { display: grid; place-content: center; min-width: 20px; color: var(--c-ink-soft); }
.pagination__summary { text-align: center; font-size: .75rem; color: var(--c-ink-soft); margin-top: var(--sp-3); }

@media (max-width: 380px) {
  .pagination__pages { display: none; }
  .pagination { justify-content: space-between; }
}

/* ------------------------------------------------- akkoordverklaringen */
.check-row {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--sp-3);
  align-items: start; margin-bottom: var(--sp-4);
  font-size: .8125rem; line-height: 1.5; color: var(--c-ink-soft);
  cursor: pointer;
}
.check-row input { width: 20px; height: 20px; margin-top: 1px; accent-color: var(--c-green-700); }
.check-row a { color: var(--c-green-700); text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------- toestemmingsbanner */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px rgba(30, 59, 44, .10);
  padding: var(--sp-5) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom));
}
.consent__inner { max-width: var(--wrap); margin-inline: auto; }
.consent__title { font-weight: 700; color: var(--c-green-900); margin-bottom: var(--sp-2); }
.consent__text { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; margin-bottom: var(--sp-4); }
.consent__text a { color: var(--c-green-700); text-decoration: underline; }
.consent__buttons { display: grid; gap: var(--sp-2); }

/* ------------------------------------------------- ingrediëntoverzicht */
.ing-tools {
  position: sticky; top: 0; z-index: 40;
  background: var(--c-cream);
  padding: var(--sp-4) 0 var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-5);
}

.ing-search { position: relative; display: block; margin-bottom: var(--sp-3); }
.ing-search__icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--c-ink-soft); pointer-events: none;
}
.ing-search input {
  width: 100%; box-sizing: border-box;
  padding: var(--sp-3) 42px;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-white); font: inherit; font-size: 1rem;
  -webkit-appearance: none;   /* iOS geeft anders een eigen rond kader */
}
.ing-search input:focus-visible { outline: 2px solid var(--c-green-700); outline-offset: 1px; }
.ing-search input::-webkit-search-cancel-button { display: none; }
.ing-search__clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; color: var(--c-ink-soft); font-size: 1.4rem; line-height: 1;
  cursor: pointer;
}

/* Filters horizontaal scrollbaar: op een telefoon passen er geen zeven naast
   elkaar, en afbreken naar drie regels kost te veel hoogte. */
.ing-filters {
  /* Afbreken in plaats van horizontaal scrollen.
     Zeven knoppen passen niet naast elkaar in een kolom van 480px. Met
     scrollen zie je niet dat er meer filters zijn, en met een muis is
     horizontaal scrollen bovendien onhandig. Twee regels knoppen kost
     nauwelijks ruimte en toont alles in één oogopslag. */
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  padding-bottom: var(--sp-1);
}

.chip {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-white); color: var(--c-ink);
  font: inherit; font-size: .8125rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; min-height: 38px;
}
.chip.is-on { background: var(--c-green-700); border-color: var(--c-green-700); color: #fff; }
.chip--warn.is-on { background: var(--c-orange-500); border-color: var(--c-orange-500); }

.ing-count { font-size: .8125rem; color: var(--c-ink-soft); margin: var(--sp-3) 0 0; }

.ing-jump {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.ing-jump a {
  font-size: .75rem; font-weight: 600;
  color: var(--c-green-700); text-decoration: none;
  padding: var(--sp-1) var(--sp-3);
  background: var(--c-green-050); border-radius: var(--r-pill);
}
.ing-jump a:hover { background: var(--c-green-100); }

.ing-group { scroll-margin-top: 150px; }   /* onder de plakkende balk uit */
.ing-group[hidden] { display: none; }

.ing-cat {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em;
  color: var(--c-ink-soft); margin: var(--sp-7) 0 var(--sp-3);
}
.ing-cat__count {
  font-size: .6875rem; background: var(--c-green-050);
  color: var(--c-green-700); padding: 1px var(--sp-2); border-radius: var(--r-pill);
}

.ing-index { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.ing-index li[hidden] { display: none; }
.ing-index a {
  display: grid; grid-template-columns: 62px 1fr 18px;
  gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-md); text-decoration: none;
  min-height: 56px;
}
.ing-index a:hover { border-color: var(--c-green-300); }
.ing-index__age {
  font-size: .75rem; font-weight: 700; text-align: center;
  background: var(--c-green-100); color: var(--c-green-900);
  padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm);
}
.ing-index__age.is-never { background: var(--c-orange-100); color: #A8501C; }
.ing-index__name { display: block; font-weight: 600; color: var(--c-green-900); font-size: .9375rem; }
.ing-index__tags { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: 2px; }
.ing-index__arrow { color: var(--c-orange-500); }

.mini-tag {
  font-size: .6875rem; font-weight: 600;
  background: var(--c-green-050); color: var(--c-green-700);
  padding: 1px var(--sp-2); border-radius: var(--r-pill);
}
.mini-tag--warn { background: var(--c-orange-050); color: #A8501C; }

.ing-empty {
  padding: var(--sp-6); text-align: center;
  color: var(--c-ink-soft); background: var(--c-white);
  border: 1px dashed var(--c-line); border-radius: var(--r-lg);
}

/* Vanaf tablet twee kolommen: de kaarten zijn smal genoeg */
@media (min-width: 700px) {
  .ing-index { grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------ auteurskaarten */
.author-card {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  padding: var(--sp-4); margin-bottom: var(--sp-3);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-lg);
}
.author-card__photo { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 64px; }
.author-card__name { font-size: 1rem; margin-bottom: 2px; }
.author-card__name a { color: var(--c-green-900); text-decoration: none; }
.author-card__role { font-size: .8125rem; color: var(--c-orange-500); font-weight: 600; margin-bottom: var(--sp-2); }
.author-card__bio { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; margin: 0; }

/* ---------------------------------------------------------- sterren */
.rating {
  background: var(--c-green-050);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  margin-block: var(--sp-8);
  text-align: center;
}
.rating__question { font-weight: 600; color: var(--c-green-900); margin-bottom: var(--sp-4); font-size: .9375rem; }

/* De sterren staan in omgekeerde volgorde in de HTML, zodat de zusselector
   alle sterren links van de aangewezen ster kan kleuren. */
.rating__stars {
  display: inline-flex; flex-direction: row-reverse;
  border: 0; margin: 0 0 var(--sp-3); padding: 0; gap: var(--sp-1);
}
.rating__stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rating__stars label { cursor: pointer; padding: var(--sp-1); line-height: 0; }
.rating__stars svg { fill: #D8DCD4; transition: fill .12s ease, transform .12s ease; }

.rating__stars label:hover svg,
.rating__stars label:hover ~ label svg,
.rating__stars input:checked ~ label svg { fill: var(--c-orange-500); }

.rating__stars label:hover svg { transform: scale(1.12); }
.rating__stars input:focus-visible + label svg { outline: 3px solid var(--c-green-700); outline-offset: 2px; }

.rating__result { font-size: .875rem; color: var(--c-ink-soft); margin: 0; }
.rating__result strong { color: var(--c-green-900); font-size: 1rem; }
.rating.is-saving { opacity: .6; pointer-events: none; }

.star-inline { color: var(--c-orange-500); }

/* Sterren op de receptkaarten in een lijst */
.recipe-card__rating { color: var(--c-orange-500); font-weight: 600; }

/* ------------------------------------------------------------ delen */
.share {
  display: flex; align-items: center; gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  margin-block: var(--sp-6);
}
.share__label { font-size: .8125rem; font-weight: 600; color: var(--c-ink-soft); }
.share__buttons { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

.share__btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-white); color: var(--c-ink);
  font-size: .8125rem; font-weight: 600; font-family: inherit;
  text-decoration: none; cursor: pointer;
  min-height: 44px;   /* comfortabel aantikbaar op een telefoon */
}
.share__btn:hover { border-color: var(--c-green-300); }
.share__btn svg { flex: 0 0 auto; }

.share__btn--wa { background: #25D366; border-color: #25D366; color: #fff; }
.share__btn--wa:hover { background: #1FBE5A; border-color: #1FBE5A; }
.share__btn--wa svg { fill: currentColor; }

.share__btn.is-done { background: var(--c-green-100); border-color: var(--c-green-300); }

/* ----------------------------------------------------- wachten op betaling */
.checkout__waiting {
  display: flex; align-items: center; gap: var(--sp-3);
  justify-content: center;
  color: var(--c-ink-soft); font-size: .875rem;
  margin-top: var(--sp-5);
}
.spinner {
  width: 18px; height: 18px; flex: 0 0 auto;
  border: 2px solid var(--c-green-100);
  border-top-color: var(--c-green-700);
  border-radius: 50%;
  animation: bm-spin .8s linear infinite;
}
@keyframes bm-spin { to { transform: rotate(360deg); } }

/* Wie beweging liever vermijdt, krijgt een stilstaande stip */
@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; border-top-color: var(--c-green-100); }
}

/* ------------------------------------------------- downloadlink herstellen */
.recover-form { display: grid; gap: var(--sp-3); margin-block: var(--sp-5); }
.recover-form label { font-weight: 600; font-size: .875rem; color: var(--c-green-900); }
.recover-form input {
  width: 100%; box-sizing: border-box;
  padding: var(--sp-4); font: inherit; font-size: 1rem;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-white);
}
.recover-form input:focus-visible { outline: 2px solid var(--c-green-700); outline-offset: 1px; }
.form-error {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md);
  background: var(--c-orange-050); color: #A8501C; font-size: .875rem;
}

/* ==================================================== gidsen en printables */
.hub__title { font-size: 1.0625rem; margin: var(--sp-8) 0 var(--sp-2); }
.hub__lead { font-size: .875rem; color: var(--c-ink-soft); margin-bottom: var(--sp-4); }

.pgrid { display: grid; gap: var(--sp-4); }


.pgrid--one { grid-template-columns: 1fr !important; }

.pcard {
  display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); text-decoration: none;
  overflow: hidden;   /* beeld volgt de ronde hoeken */
}
.pcard:hover { border-color: var(--c-green-300); }

/* Vaste beeldverhouding, zodat alle kaarten in een rij even hoog beginnen */
/* Pakketten in dezelfde stijl als de gidsen.

   Hier stond aspect-ratio 4/3 met object-fit: cover, waardoor elke omslag
   werd bijgesneden tot die verhouding. Bij beelden die daar niet op
   staan, verdwijnt de bovenkant of de zijkant van de omslag.

   Nu houdt het beeld zijn eigen verhouding, precies zoals op /gidsen/. */
.pcard__media { position: relative; display: block; }
.pcard__beeld {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--c-green-050);
  /* De hoeken volgen de kaart, anders steekt het beeld erbuiten */
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.pcard__beeld--orange { background: var(--c-orange-050); }
.pcard__beeld img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.pcard__badge {
  position: absolute; top: var(--sp-3); left: var(--sp-3);
  background: var(--c-orange-500); color: #fff;
  font-size: .6875rem; font-weight: 700; line-height: 1;
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-pill);
}

/* Body als kolom met de prijs onderaan: kaarten in een rij lijnen dan uit,
   ongeacht hoe lang de omschrijving is. */
.pcard__body {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  flex: 1;
}
.pcard__kind {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-ink-soft);
}
.pcard__name { font-size: 1.0625rem; font-weight: 700; color: var(--c-green-900); line-height: 1.25; }
.pcard__text { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; }

.pcard__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}
.pcard__price { font-size: 1.125rem; font-weight: 700; color: var(--c-green-900); }
.pcard__was {
  font-size: .8125rem; font-weight: 500; color: var(--c-ink-soft);
  text-decoration: line-through; margin-left: var(--sp-2);
}
.pcard__arrow { color: var(--c-orange-500); flex: 0 0 auto; }
.pcard__saving {
  font-size: .75rem; font-weight: 600; color: var(--c-green-700);
  background: var(--c-green-050); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); align-self: flex-start;
}

/* De uitgelichte bundel breed, met beeld naast de tekst vanaf tablet */
@media (min-width: 700px) {
  /* Niet actief: de site is 480px breed. Blijft staan voor als de
     kolombreedte ooit verandert. */
  .pcard--wide { flex-direction: row; align-items: stretch; }

  /*
   * In de brede variant VULT het beeld de hele kolom.
   *
   * Deze regels stonden op .pcard__media, maar het beeld zit sinds de
   * herziening in .pcard__beeld. Daardoor deden ze niets meer: het beeld
   * hield zijn 16:9 terwijl de tekstkolom hoger was, en dat liet een wit
   * vlak achter onder de afbeelding.
   *
   * Een 16:9-beeld in een staande kolom moet worden bijgesneden, anders
   * krijg je lege ruimte. Dat mag hier: bij een breed uitgesneden omslag
   * blijft het midden staan, en daar staat de titel.
   */
  .pcard--wide .pcard__media { flex: 0 0 42%; display: flex; }
  .pcard--wide .pcard__beeld {
    flex: 1; aspect-ratio: auto; min-height: 100%;
    border-radius: var(--r-lg) 0 0 var(--r-lg);
  }
  .pcard--wide .pcard__beeld img { height: 100%; object-fit: cover; }
  .pcard--wide .pcard__body { justify-content: center; }
  .pcard--wide .pcard__name { font-size: 1.375rem; }
}

/* ----------------------------------------- contextueel blok in de content */
/* Leest als vervolg op de tekst erboven, niet als advertentie ernaast.
   Vandaar: de aanknopingszin in dezelfde stijl als lopende tekst, en pas
   daaronder een kaart die duidelijk product is. */

.offer { margin-block: var(--sp-8); }

/* Extra scheiding wanneer het blok direct op een lijst of teller volgt:
   zonder die ruimte leest de aanknopingszin als onderdeel van de lijst. */
.pagination + .offer,
.pagination__summary + .offer,
.list-meta + .offer,
.pager + .offer { margin-top: var(--sp-9); padding-top: var(--sp-7); border-top: 1px solid var(--c-line); }

.offer__hook {
  margin: 0 0 var(--sp-4);
  font-size: 1rem; line-height: 1.65;
  color: var(--c-ink);
}

.offer__card {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  border-top: 3px solid var(--c-orange-500);
}

.offer__head { margin-bottom: var(--sp-4); }
.offer__kind {
  display: block;
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-ink-soft);
  margin-bottom: var(--sp-1);
}
.offer__name {
  font-size: 1.25rem; font-weight: 700; line-height: 1.25;
  color: var(--c-green-900); margin: 0 0 var(--sp-2);
}
.offer__text { font-size: .875rem; line-height: 1.6; color: var(--c-ink-soft); margin: 0; }

/* Wat je krijgt: concreet, en het zwaartepunt van de kaart */
.offer__list {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  display: grid; gap: var(--sp-2);
}
.offer__list li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: .875rem; line-height: 1.5; color: var(--c-ink);
}
.offer__check { flex: 0 0 auto; margin-top: 3px; color: var(--c-orange-500); width: 15px; height: 15px; }

.offer__foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.offer__pricing { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.offer__price { font-size: 1.5rem; font-weight: 700; color: var(--c-green-900); }
.offer__was {
  font-size: .9375rem; color: var(--c-ink-soft);
  text-decoration: line-through;
}
.offer__saving {
  font-size: .75rem; font-weight: 600; color: var(--c-green-700);
  background: var(--c-green-050);
  padding: 2px var(--sp-2); border-radius: var(--r-pill);
}
.offer__cta { flex: 1 1 auto; justify-content: center; min-width: 200px; }

/* De regel eronder is feitelijk, geen belofte: levering, geldigheid, bron */
.offer__meta {
  list-style: none; margin: var(--sp-4) 0 0; padding: 0;
  display: grid; gap: var(--sp-1);
}
.offer__meta li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: .75rem; line-height: 1.45; color: var(--c-ink-soft);
}
.offer__meta-icon { color: var(--c-orange-500); width: 12px; height: 12px; flex: 0 0 auto; margin-top: 3px; }

/* Naast elkaar zodra er ruimte is */


/* ------------------------------------------------------------ upgrade */
/* Binnen dezelfde kaart, met een zichtbare stippellijn ertussen: het is
   duidelijk een tweede aanbod, maar het hoort bij het eerste. Los eronder
   las het als een willekeurige suggestie. */
.offer__upgrade {
  display: grid; grid-template-columns: auto 1fr 16px;
  gap: var(--sp-3); align-items: center;
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--c-line-strong, #C8C2B8);
  text-decoration: none;
}
.offer__upgrade:hover .offer__upgrade-title { color: var(--c-orange-500); }

/* Het bedrag als eerste element: dat is het argument */
.offer__upgrade-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; padding: var(--sp-2) var(--sp-3);
  background: var(--c-orange-500); color: #fff;
  font-size: .875rem; font-weight: 700;
  border-radius: var(--r-pill); white-space: nowrap;
}

.offer__upgrade-body { display: grid; gap: 1px; min-width: 0; }
.offer__upgrade-title {
  font-size: .875rem; font-weight: 600; line-height: 1.35;
  color: var(--c-green-900);
}
.offer__upgrade-list {
  font-size: .75rem; line-height: 1.4; color: var(--c-ink-soft);
}
.offer__upgrade-arrow { color: var(--c-orange-500); flex: 0 0 auto; }

@media (max-width: 420px) {
  /* Badge bovenaan uitlijnen: bij een tekstblok van drie regels stond het
     bedrag halverwege te zweven. De pijl valt weg; op deze breedte is de
     hele rij al aantikbaar. */
  .offer__upgrade { grid-template-columns: auto 1fr; align-items: start; }
  .offer__upgrade-badge { margin-top: 1px; }
  .offer__upgrade-arrow { display: none; }
}

@media (max-width: 480px) {
  .offer__foot { flex-direction: column; align-items: stretch; }
  .offer__cta { width: 100%; }
}

/* -------------------------------------------------- bundel en upsell */
.section--tight { padding-block: var(--sp-5); }

.bundle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.bundle-list li {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.bundle-list a { text-decoration: none; display: grid; gap: 1px; }
.bundle-list strong { color: var(--c-green-900); font-size: .9375rem; }
.bundle-list span { font-size: .8125rem; color: var(--c-ink-soft); }
.bundle-list__price { font-size: .8125rem; color: var(--c-ink-soft); white-space: nowrap; }

.upsell {
  display: grid; gap: var(--sp-1);
  padding: var(--sp-5);
  background: var(--c-green-050); border: 1px solid var(--c-green-100);
  border-radius: var(--r-lg); text-decoration: none;
}
.upsell--orange { background: var(--c-orange-050); border-color: var(--c-orange-100); }
.upsell:hover { border-color: var(--c-green-300); }
.upsell__label {
  font-size: .6875rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-orange-500);
}
.upsell__name { font-size: 1.0625rem; font-weight: 700; color: var(--c-green-900); }
.upsell__text { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; }
.upsell__price { font-size: 1.0625rem; font-weight: 700; color: var(--c-green-900); margin-top: var(--sp-2); }

/* -------------------------------------------------------- order bump */
.bump-offer {
  display: grid; grid-template-columns: 24px 1fr; gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
  background: var(--c-orange-050);
  border: 2px dashed var(--c-orange-500);
  border-radius: var(--r-md);
  cursor: pointer;
}
.bump-offer input { width: 22px; height: 22px; margin-top: 1px; accent-color: var(--c-orange-500); }
.bump-offer__body { display: grid; gap: 2px; }
.bump-offer__title { font-weight: 700; color: #A8501C; font-size: .875rem; }
.bump-offer__name { font-weight: 600; color: var(--c-green-900); font-size: .9375rem; }
.bump-offer__line { font-size: .8125rem; color: var(--c-ink-soft); }

/* --------------------------------------------- aanbod na de aankoop */
.followup {
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line); text-align: left;
}
.followup__label {
  font-size: .8125rem; font-weight: 700; color: var(--c-green-900);
  margin-bottom: var(--sp-3);
}
.followup__note { font-size: .75rem; color: var(--c-ink-soft); margin-top: var(--sp-3); }

/* Knop met prijs op de hubkaart */
.pcard__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-green-700); color: #fff;
  font-size: .8125rem; font-weight: 700;
  border-radius: var(--r-pill); white-space: nowrap;
}
.pcard--orange .pcard__cta { background: var(--c-orange-500); }
.pcard__cta .pcard__arrow { color: #fff; }

/* =================================================== vertrouwen en zorg */
/* Vervangt twee zware kaarten. Beide waren visueel even luid als de inhoud
   zelf, terwijl het randinformatie is. Nu: één regel, kleine letter, rustig
   contrast, en de disclaimer daaronder ondergeschikt. */

.trust {
  margin-block: var(--sp-7) var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}

.trust__line {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  font-size: .8125rem; line-height: 1.55;
  color: var(--c-ink-soft);
}
.trust__check { flex: 0 0 auto; margin-top: 2px; color: var(--c-green-700); }
.trust__line strong { color: var(--c-green-900); font-weight: 600; }
.trust__line a { color: var(--c-green-700); text-decoration: underline; text-underline-offset: 2px; }
.trust__line time { white-space: nowrap; }

.trust__disclaimer {
  margin: 0; padding-left: calc(16px + var(--sp-2));
  font-size: .75rem; line-height: 1.5;
  color: #8A8A8A;
}

/* ------------------------------------------ aandachtspunt bij ingrediënt */
/* Staat waar de beslissing valt, niet onderaan in een verzamelkaart. */

.ingredient-list__care {
  display: block;
  margin-top: 2px;
  font-size: .75rem; line-height: 1.45;
  color: var(--c-ink-soft);
}

.care-tag {
  display: inline-block;
  padding: 1px var(--sp-2);
  margin-right: var(--sp-1);
  background: var(--c-orange-050);
  color: #A8501C;
  font-size: .6875rem; font-weight: 600;
  border-radius: var(--r-pill);
}

/* Het oranje accent is een dunne streep, geen vlak. Genoeg om op te vallen
   in een lijst, niet genoeg om de lijst te domineren. */
.care-note {
  display: inline-block;
  padding-left: var(--sp-2);
  border-left: 2px solid var(--c-orange-500);
}

/* ---------------------------------------------------- allergenenregel */
.allergen-line {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: var(--sp-4) 0 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-orange-050);
  border-radius: var(--r-md);
  font-size: .8125rem; line-height: 1.55;
  color: var(--c-ink);
}
.allergen-line__icon { flex: 0 0 auto; margin-top: 1px; color: var(--c-orange-500); }
.allergen-line a { color: #A8501C; font-weight: 600; }

@media print {
  .trust, .allergen-line { break-inside: avoid; }
}

/* Knop met prijs op de hubkaart */
.pcard__cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-green-700); color: #fff;
  font-size: .8125rem; font-weight: 700;
  border-radius: var(--r-pill); white-space: nowrap;
}

.pcard__cta .pcard__arrow { color: #fff; }

/* ------------------------------------------------- redactioneel beleid */
.editorial {
  margin-block: var(--sp-6);
  padding: var(--sp-5);
  background: var(--c-green-050);
  border-left: 3px solid var(--c-green-700);
  border-radius: var(--r-md);
}
.editorial__policy {
  margin: 0 0 var(--sp-3);
  font-size: .875rem;
  line-height: 1.6;
  color: var(--c-green-900);
}
.editorial__check {
  margin: 0 0 var(--sp-2);
  font-size: .8125rem;
  color: var(--c-ink-soft);
}
.editorial__more { margin: 0; font-size: .8125rem; }
.editorial__more a { color: var(--c-green-700); }

/* Onder de vouw in een printable of pdf hoort dit niet thuis */
@media print { .editorial { display: none; } }

/* De organisatienaam in de voettekst, klein maar controleerbaar */
.trust__publisher { margin: var(--sp-2) 0 0; padding-left: calc(16px + var(--sp-2)); font-size: .6875rem; color: #9A9A9A; }
.care-tag { font-style: normal; }

/* ------------------------------------------- upgrade op de productpagina */
/* Volle kaart in plaats van een regel: hier is de bezoeker al aan het
   kiezen, dus mag de upgrade meer ruimte innemen dan in lopende tekst. */
.upgrade-card {
  display: block;
  padding: var(--sp-5);
  background: var(--c-orange-050);
  border: 1px solid var(--c-orange-100);
  border-radius: var(--r-lg);
  text-decoration: none;
}
.upgrade-card:hover { border-color: var(--c-orange-500); }

.upgrade-card__head {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.upgrade-card__badge {
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-orange-500); color: #fff;
  font-size: .9375rem; font-weight: 700;
  border-radius: var(--r-pill); white-space: nowrap;
}
.upgrade-card__title {
  font-size: 1rem; font-weight: 700; line-height: 1.3;
  color: var(--c-green-900);
}

.upgrade-card__list {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}
.upgrade-card__item {
  font-size: .75rem; color: var(--c-ink);
  background: var(--c-white);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
}
.upgrade-card__item--more { color: var(--c-ink-soft); background: none; }

.upgrade-card__foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-orange-100);
  font-size: .8125rem; color: var(--c-ink-soft);
}
.upgrade-card__arrow { color: var(--c-orange-500); }

@media (max-width: 420px) {
  .upgrade-card__head { align-items: flex-start; }
}

/* --------------------------------------------- receptenlijst per moment */
.momentlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }


.momentlist__link {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  text-decoration: none;
}
.momentlist__link:hover { border-color: var(--c-green-300); }
.momentlist__title { font-weight: 600; color: var(--c-green-900); font-size: .9375rem; }
.momentlist__meta { font-size: .75rem; color: var(--c-ink-soft); white-space: nowrap; }

/* ------------------------------------------------------- voettekst */
/* De voettekst heeft een donkergroene achtergrond met witte tekst; die
   regels staan hierboven bij .site-footer en blijven leidend. Hier alleen
   de indeling.

   Twee kolommen, niet vijf: de site is een kolom van 480px breed. Vijf
   kolommen in die ruimte levert woorden van één lettergreep per regel. */
.site-footer__cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-6) var(--sp-5);
  margin-bottom: var(--sp-6);
}

/* Eén ritme: elke lijst met vier of meer items staat in twee kolommen,
   uitgelijnd op hetzelfde raster. Een enkele lijst in één kolom tussen
   tweekoloms lijsten leest als een fout. */
.site-footer__col ul { align-content: start; }
.site-footer__col--half ul { grid-template-columns: 1fr; }

.site-footer__col ul { margin-bottom: 0; }

/* Deze kolom loopt over de volle breedte: hij bevat de meeste regels en
   zou als halve kolom te smal worden. */
.site-footer__col--breed { grid-column: 1 / -1; }

/* Binnen een brede kolom passen twee smalle lijstkolommen; dat houdt de
   voettekst compact zonder dat regels afbreken. */
.site-footer__twee { grid-template-columns: 1fr 1fr; }
@media (max-width: 380px) { .site-footer__twee { grid-template-columns: 1fr; } }

.site-footer__products {
  margin-top: var(--sp-4) !important;
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.site-footer__products a { font-weight: 600; color: #fff; }

@media (max-width: 380px) {
  .site-footer__cols { grid-template-columns: 1fr; gap: var(--sp-5); }
}

/* ------------------------------------------------------------ zoeken */
/* Het zoekveld staat boven de menu-items, met een scheidingslijn eronder.
   Zo leest het als een ingang en niet als een los element dat in het menu
   is blijven liggen. */
.zoekbox {
  position: relative;
  margin: 0 0 var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
}
.zoekbox__veld { position: relative; display: block; }
.zoekbox__icoon {
  position: absolute; left: var(--sp-4); top: 50%;
  transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--c-ink-soft);
  pointer-events: none;
}
.zoekbox__input {
  width: 100%;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) calc(var(--sp-4) + 25px);
  font-size: 1rem; font-family: inherit; color: var(--c-ink);
  background: var(--c-cream);
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  -webkit-appearance: none;
}
.zoekbox__input::placeholder { color: var(--c-ink-soft); }
.zoekbox__input:focus {
  outline: none;
  background: var(--c-white);
  border-color: var(--c-green-300);
  box-shadow: 0 0 0 3px var(--c-green-050);
}

.zoekbox__suggesties {
  position: absolute; left: 0; right: 0; top: calc(100% - var(--sp-2)); z-index: 60;
  background: var(--c-white);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(30, 59, 44, .14);
  overflow: hidden auto; max-height: 62vh;
}
.zoekbox__item {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
}
.zoekbox__item:last-of-type { border-bottom: 0; }
.zoekbox__item:hover, .zoekbox__item:focus { background: var(--c-cream); }
.zoekbox__titel {
  grid-column: 1; font-size: .9375rem; font-weight: 600;
  color: var(--c-green-900); line-height: 1.3;
}
.zoekbox__label {
  grid-column: 2; grid-row: 1;
  font-size: .625rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-ink-soft);
  background: var(--c-cream); padding: 2px var(--sp-2);
  border-radius: var(--r-pill); white-space: nowrap;
}
.zoekbox__meta {
  grid-column: 1 / -1; font-size: .75rem; color: var(--c-ink-soft);
}
.zoekbox__leeg { padding: var(--sp-4); font-size: .875rem; color: var(--c-ink-soft); margin: 0; }
.zoekbox__alles {
  display: block; padding: var(--sp-3) var(--sp-4);
  font-size: .8125rem; font-weight: 600; color: var(--c-green-700);
  text-decoration: none; background: var(--c-green-050);
  border-top: 1px solid var(--c-line);
}

/* ----------------------------------------------------- zoekpagina */
.zoekform {
  display: flex; gap: var(--sp-2); margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.zoekform__input {
  /* min-width: 0 is nodig, anders weigert een flex-item te krimpen en
     duwt het de knop buiten beeld op smalle schermen. */
  flex: 1 1 200px; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  -webkit-appearance: none;
}
.zoekform__knop { flex: 0 0 auto; }
@media (max-width: 420px) {
  .zoekform__input { flex: 1 1 100%; }
  .zoekform__knop  { width: 100%; justify-content: center; }
}

.zoek__aantal, .zoek__hint, .zoek__leeg { font-size: .9375rem; color: var(--c-ink-soft); }
.zoek__kop { font-size: 1.0625rem; margin: var(--sp-6) 0 var(--sp-3); }
.zoek__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.zoek__item {
  display: grid; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-md); text-decoration: none;
}
.zoek__item:hover { border-color: var(--c-green-300); }
.zoek__titel { font-weight: 600; color: var(--c-green-900); }
.zoek__meta { font-size: .75rem; color: var(--c-ink-soft); }
.zoek__tekst { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; }
.zoek__suggesties { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.zoek__suggesties a { color: var(--c-green-700); font-weight: 600; }



/* ================================================ ingrediëntenoverzicht */
/* Twee kolommen met korte kaartjes in plaats van 129 volle rijen. Dat
   halveert de paginahoogte en maakt scannen mogelijk: bij het zoeken naar
   "mag dit?" is de naam plus de leeftijd alles wat je nodig hebt. */

.ing-grid {
  list-style: none; margin: 0 0 var(--sp-6); padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2);
}

.ing-tile {
  display: flex; flex-direction: column; justify-content: space-between;
  gap: var(--sp-2); height: 100%;
  padding: var(--sp-3);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-green-300);
  border-radius: var(--r-md);
  text-decoration: none;
}
.ing-tile:hover { border-color: var(--c-green-700); }

/* De rand draagt de waarschuwing. Tijdens het scannen zie je zo in één
   oogopslag welke producten aandacht vragen, zonder extra regels tekst. */
.ing-tile--medium { border-left-color: var(--c-orange-500); }
.ing-tile--high   { border-left-color: #C2410C; }
.ing-tile--never  { border-left-color: #9A3412; background: #FEF2F2; }

.ing-tile__naam {
  font-size: .875rem; font-weight: 600; line-height: 1.3;
  color: var(--c-green-900);
}
.ing-tile__voet {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-2);
}
.ing-tile__vanaf { font-size: .75rem; color: var(--c-ink-soft); white-space: nowrap; }
.ing-tile--never .ing-tile__vanaf { color: #9A3412; font-weight: 600; }

.ing-tile__merken { display: flex; gap: 3px; }
.ing-merk {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  font-size: .625rem; font-weight: 700;
  border-radius: 4px; text-decoration: none; cursor: help;
}
.ing-merk--allergeen { background: var(--c-green-050); color: var(--c-green-700); }
.ing-merk--vorm      { background: var(--c-orange-050); color: #A8501C; }
.ing-merk--nitraat   { background: #EEF2FF; color: #4338CA; }

.ing-legenda {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin: 0 0 var(--sp-5);
  font-size: .75rem; color: var(--c-ink-soft);
}
.ing-legenda span { display: inline-flex; align-items: center; gap: var(--sp-1); }

/* Categoriekop blijft staan tijdens het scrollen, zodat je weet waar je
   bent in een lijst van ruim honderd producten. */
.ing-cat {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: baseline; gap: var(--sp-2);
  margin: var(--sp-6) 0 var(--sp-3);
  padding: var(--sp-2) 0;
  background: var(--c-cream);
  font-size: .9375rem;
}
.ing-cat__count {
  font-size: .75rem; font-weight: 600; color: var(--c-ink-soft);
  background: var(--c-white); padding: 1px var(--sp-2);
  border-radius: var(--r-pill);
}

@media (max-width: 340px) {
  .ing-grid { grid-template-columns: 1fr; }
}

/* ==================================================== kies voor mij */
.kies__lead { font-size: 1rem; color: var(--c-ink-soft); margin-bottom: var(--sp-7); }
.kies__stap { margin-bottom: var(--sp-6); }
.kies__vraag { font-size: 1rem; margin: 0 0 var(--sp-3); }

.kies__intro {
  margin-bottom: var(--sp-7);
  font-size: .9375rem; line-height: 1.7; color: var(--c-ink);
}
.kies__intro p { margin: 0 0 var(--sp-3); }
.kies__intro p:last-child { margin: 0; }

.kies__form {
  padding: var(--sp-5);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-7);
}
.kies__form fieldset { border: 0; margin: 0 0 var(--sp-5); padding: 0; }
.kies__form fieldset:last-of-type { margin-bottom: var(--sp-5); }

/* Radioknoppen als tikvlakken: de invoer zelf is verborgen, het label is
   de knop. Zo werkt de keuze zonder JavaScript en blijft hij toegankelijk
   met het toetsenbord. */
.kies__opties { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.kies__opties--moment { grid-template-columns: 1fr 1fr; }

.kies__optie {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-3) var(--sp-2);
  font-size: .875rem; font-weight: 600;
  color: var(--c-green-900); background: var(--c-cream);
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  cursor: pointer; text-align: center;
}
.kies__optie input { position: absolute; opacity: 0; width: 0; height: 0; }
.kies__optie:hover { border-color: var(--c-green-300); }
.kies__optie:has(input:checked),
.kies__optie.is-on { background: var(--c-green-700); border-color: var(--c-green-700); color: #fff; }
.kies__optie:has(input:focus-visible) { outline: 2px solid var(--c-green-300); outline-offset: 2px; }

.kies__zoek { width: 100%; justify-content: center; }

.kies__uitleg {
  margin-top: var(--sp-8); padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
  font-size: .9375rem; line-height: 1.7;
}
.kies__uitleg h2 { font-size: 1.0625rem; margin: var(--sp-6) 0 var(--sp-2); }
.kies__uitleg h2:first-child { margin-top: 0; }
.kies__uitleg p { margin: 0 0 var(--sp-3); color: var(--c-ink); }
.kies__momentlijst { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.kies__momentlijst li { margin-bottom: var(--sp-2); line-height: 1.6; }

.kies__uitkomst { font-size: 1.0625rem; margin: var(--sp-8) 0 var(--sp-3); }

.kies__kaart {
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.kies__beeld { display: block; aspect-ratio: 16 / 10; background: var(--c-cream); }
.kies__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kies__body { padding: var(--sp-5); }
.kies__meta {
  font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--c-ink-soft); margin: 0 0 var(--sp-2);
}
/* Titel en omschrijving op een vast aantal regels.
   Zonder die begrenzing verschilt de kaarthoogte per recept, en dan
   verspringt de voettekst bij elke nieuwe suggestie. Twee regels titel en
   drie regels tekst dekken vrijwel alles zonder af te kappen. */
.kies__titel {
  font-size: 1.25rem; line-height: 1.25; margin: 0 0 var(--sp-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.25em * 2);
}
.kies__tekst {
  font-size: .875rem; color: var(--c-ink-soft); line-height: 1.6;
  margin: 0 0 var(--sp-5);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; min-height: calc(1.6em * 3);
}
.kies__cta { width: 100%; justify-content: center; }

.kies__opnieuw { text-align: center; margin: var(--sp-5) 0 var(--sp-7); }
.kies__opnieuw p { font-size: .875rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-2); }
.kies__ander {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  font-size: .9375rem; font-weight: 600;
  color: var(--c-green-700); background: var(--c-green-050);
  border-radius: var(--r-pill); text-decoration: none;
}
.kies__ander:hover { background: var(--c-green-100, #D6E4D0); }
.kies__aantal { display: block; margin-top: var(--sp-2); font-size: .75rem; color: var(--c-ink-soft); }

.kies__ingredient { margin-bottom: var(--sp-7); }
.kies__ingredient label { display: block; font-size: .875rem; color: var(--c-ink-soft); margin-bottom: var(--sp-2); }
.kies__ingredient-rij { display: flex; gap: var(--sp-2); }
.kies__ingredient select {
  flex: 1; min-width: 0;
  padding: var(--sp-3) var(--sp-4);
  font-size: .9375rem; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: var(--r-pill);
  background: var(--c-white); -webkit-appearance: none;
}

.kies__leeg {
  padding: var(--sp-5); margin-top: var(--sp-6);
  background: var(--c-cream); border-radius: var(--r-md);
  font-size: .9375rem; line-height: 1.6;
}
.kies__leeg p { margin: 0 0 var(--sp-2); }
.kies__leeg p:last-child { margin: 0; }

/* Zichtbaar dat er iets gebeurt, zonder de kaart te laten verspringen */
.kies__resultaat { transition: opacity .15s ease; }
.kies__resultaat.is-laden { opacity: .45; pointer-events: none; }
.kies__titel:focus { outline: none; }
.kies__titel:focus-visible { outline: 2px solid var(--c-green-300); outline-offset: 3px; }

/* De eerste toolkaart iets nadrukkelijker: dat is de snelste route van
   "geen idee" naar "vanavond dit". */
.tool-card--uitgelicht { border-color: var(--c-orange-500); }
.tool-card--uitgelicht .tool-card__icon { color: var(--c-orange-500); background: var(--c-orange-050); }

/* Beeldvlak zonder afbeelding: zelfde hoogte, rustig merkvlak. Zo blijft
   de kaarthoogte gelijk en verspringt de pagina niet bij een nieuwe
   suggestie. */
.kies__beeld--leeg {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-green-050);
}
.kies__beeld-merk { color: var(--c-green-300); }
.kies__beeld-merk svg { width: 56px; height: 56px; }

/* ============================================ allergenen bijhouden */
.allerg__lead { font-size: 1rem; color: var(--c-ink-soft); margin-bottom: var(--sp-5); }

.allerg {
  margin: var(--sp-6) 0 var(--sp-7);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.allerg__balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-cream);
}
.allerg__voortgang { flex: 1; min-width: 0; }
.allerg__teller { display: block; font-size: .8125rem; font-weight: 600; color: var(--c-green-900); margin-bottom: var(--sp-2); }
.allerg__spoor { display: block; height: 5px; background: var(--c-line); border-radius: var(--r-pill); overflow: hidden; }
.allerg__vulling { display: block; height: 100%; width: 0; background: var(--c-green-700); border-radius: var(--r-pill); transition: width .25s ease; }
.allerg__wissen {
  flex: 0 0 auto; padding: var(--sp-2) var(--sp-3);
  font-size: .75rem; font-family: inherit; color: var(--c-ink-soft);
  background: none; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  cursor: pointer;
}
.allerg__wissen:hover { color: var(--c-green-900); border-color: var(--c-green-300); }

.allerg__lijst { list-style: none; margin: 0; padding: 0; }
.allerg__item { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--c-line); }
.allerg__item:last-child { border-bottom: 0; }
.allerg__item.is-gedaan { background: var(--c-green-050); }

.allerg__kop { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.allerg__vink { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.allerg__vink input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Eigen vinkje, want een systeemvinkje is op een telefoon te klein om
   prettig te raken. */
.allerg__vinkje {
  flex: 0 0 auto; width: 24px; height: 24px;
  border: 2px solid var(--c-line-strong, #C8C2B8); border-radius: 7px;
  position: relative; background: var(--c-white);
}
.allerg__vink input:checked + .allerg__vinkje {
  background: var(--c-green-700); border-color: var(--c-green-700);
}
.allerg__vink input:checked + .allerg__vinkje::after {
  content: ''; position: absolute; left: 7px; top: 3px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.allerg__vink input:focus-visible + .allerg__vinkje { outline: 2px solid var(--c-green-300); outline-offset: 2px; }

.allerg__naam { font-size: .9375rem; font-weight: 600; color: var(--c-green-900); }
.allerg__vanaf { font-size: .75rem; color: var(--c-ink-soft); white-space: nowrap; }
.allerg__tip { font-size: .8125rem; line-height: 1.55; color: var(--c-ink-soft); margin: var(--sp-2) 0 0 36px; }
.allerg__waarmee { font-size: .75rem; color: var(--c-ink-soft); margin: var(--sp-2) 0 0 36px; }
.allerg__waarmee a { color: var(--c-green-700); }

.allerg__gegeven {
  display: grid; gap: var(--sp-3);
  margin: var(--sp-4) 0 0 36px;
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
}
.allerg__gegeven label { display: grid; gap: var(--sp-1); font-size: .75rem; color: var(--c-ink-soft); }
.allerg__gegeven input, .allerg__gegeven select {
  padding: var(--sp-2) var(--sp-3);
  font-size: .875rem; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-white); -webkit-appearance: none;
}
@media (min-width: 420px) { .allerg__gegeven { grid-template-columns: 1fr 1fr; } }

.allerg__herinnering {
  grid-column: 1 / -1; margin: 0;
  padding: var(--sp-2) var(--sp-3);
  font-size: .75rem; line-height: 1.5;
  border-radius: var(--r-md);
}
.allerg__herinnering.is-attent { background: var(--c-orange-050); color: #A8501C; }
.allerg__herinnering.is-let-op { background: #FEF2F2; color: #9A3412; font-weight: 600; }

.allerg__privacy {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  margin: 0; padding: var(--sp-4) var(--sp-5);
  background: var(--c-cream);
  font-size: .75rem; line-height: 1.5; color: var(--c-ink-soft);
}
.allerg__privacy-icon { flex: 0 0 auto; margin-top: 2px; width: 13px; height: 13px; color: var(--c-green-700); }

.allerg__uitleg { margin-top: var(--sp-8); font-size: .9375rem; line-height: 1.7; }
.allerg__uitleg h2 { font-size: 1.0625rem; margin: var(--sp-7) 0 var(--sp-3); }
.allerg__uitleg p { margin: 0 0 var(--sp-3); }
.allerg__stappen { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); }
.allerg__stappen li { margin-bottom: var(--sp-3); line-height: 1.6; }

.allerg__faq {
  border-bottom: 1px solid var(--c-line);
  padding: var(--sp-3) 0;
}
.allerg__faq summary {
  font-size: .9375rem; font-weight: 600; color: var(--c-green-900);
  cursor: pointer; list-style: none;
}
.allerg__faq summary::-webkit-details-marker { display: none; }
.allerg__faq summary::after { content: ' +'; color: var(--c-ink-soft); }
.allerg__faq[open] summary::after { content: ' –'; }
.allerg__faq p { margin: var(--sp-2) 0 0; font-size: .875rem; color: var(--c-ink-soft); }

/* Kopjes in het menu: bij twaalf items is een platte lijst niet meer te
   overzien. De kopjes benoemen wat je komt doen, niet wat wij hebben. */
.nav__kop {
  margin: var(--sp-5) 0 var(--sp-2);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--c-ink-soft);
}
/* De eerste kop volgt op het zoekveld en heeft daar wat lucht bij nodig,
   maar minder dan tussen twee groepen onderling. */
.nav__kop:first-of-type { margin-top: var(--sp-2); }
.site-nav ul + .nav__kop { margin-top: var(--sp-5); }

/* ------------------------------------------------ overzicht van gidsen */
.uitleg__lead { font-size: 1rem; color: var(--c-ink-soft); margin-bottom: var(--sp-6); }
.uitleg__groep { margin-bottom: var(--sp-7); }
.uitleg__kop { font-size: 1.0625rem; margin: 0 0 var(--sp-3); }
.uitleg__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.uitleg__item {
  display: grid; gap: 3px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-md); text-decoration: none;
}
.uitleg__item:hover { border-color: var(--c-green-300); }
.uitleg__titel { font-size: .9375rem; font-weight: 600; color: var(--c-green-900); line-height: 1.3; }
.uitleg__tekst { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; }

/* ------------------------------------------------------- aanmelden */
.aanmeld {
  margin: var(--sp-7) 0;
  padding: var(--sp-5);
  background: var(--c-green-050);
  border-radius: var(--r-lg);
}
.aanmeld__kop { font-size: 1.0625rem; margin: 0 0 var(--sp-2); }
.aanmeld__tekst { font-size: .875rem; line-height: 1.6; color: var(--c-ink); margin: 0 0 var(--sp-4); }
.aanmeld__form { display: grid; gap: var(--sp-3); }
.aanmeld__veld { display: grid; gap: var(--sp-1); font-size: .8125rem; color: var(--c-ink-soft); }
.aanmeld__veld input {
  padding: var(--sp-3) var(--sp-4);
  font-size: 1rem; font-family: inherit;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--c-white); -webkit-appearance: none;
}
.aanmeld__veld input:focus {
  outline: none; border-color: var(--c-green-300);
  box-shadow: 0 0 0 3px rgba(58,107,76,.12);
}
.aanmeld__knop { width: 100%; justify-content: center; }

/* Het lokvakje voor robots: onzichtbaar, maar niet met display:none —
   sommige robots slaan verborgen velden juist over. */
.aanmeld__val { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aanmeld__klein { margin: var(--sp-3) 0 0; font-size: .75rem; line-height: 1.5; color: var(--c-ink-soft); }
.aanmeld__melding {
  margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4);
  font-size: .875rem; border-radius: var(--r-md);
}
.aanmeld__melding.is-goed { background: var(--c-white); color: var(--c-green-900); font-weight: 600; }
.aanmeld__melding.is-fout { background: #FEF2F2; color: #9A3412; }

/* ------------------------------------------------------- seizoen */
.seizoen__kop { font-size: 1.0625rem; margin: 0 0 var(--sp-1); }
.seizoen__lead { font-size: .875rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-4); }
.seizoen__lijst {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
}
.seizoen__lijst li { list-style: none; }
.seizoen__item {
  display: inline-flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  text-decoration: none;
}
.seizoen__item:hover { border-color: var(--c-green-300); }
.seizoen__naam { font-size: .875rem; font-weight: 600; color: var(--c-green-900); }
.seizoen__vanaf { font-size: .6875rem; color: var(--c-ink-soft); }

/* ------------------------------------------------- gidsen op de homepage */
.gidsen__kop { font-size: 1.0625rem; margin: 0 0 var(--sp-1); }
.gidsen__lead { font-size: .875rem; color: var(--c-ink-soft); margin: 0 0 var(--sp-4); }
.gidsen__lijst {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: grid; gap: var(--sp-2);
}
.gidsen__lijst li { list-style: none; }
.gidsen__item {
  display: grid; gap: 3px;
  padding: var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-green-700);
  border-radius: var(--r-md); text-decoration: none;
}
.gidsen__item:hover { border-color: var(--c-green-300); border-left-color: var(--c-green-700); }
.gidsen__titel { font-size: .9375rem; font-weight: 600; color: var(--c-green-900); line-height: 1.3; }
.gidsen__tekst { font-size: .8125rem; color: var(--c-ink-soft); line-height: 1.5; }
.gidsen__alles { font-size: .875rem; }

/* ---------------------------------------------------- verwante gidsen */
.verwant__kop { font-size: 1rem; margin: 0 0 var(--sp-3); }
.verwant__lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.verwant__item {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-white); border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  font-size: .875rem; font-weight: 600; color: var(--c-green-900);
  text-decoration: none;
}
.verwant__item:hover { border-color: var(--c-green-300); }
.verwant__pijl { flex: 0 0 auto; color: var(--c-orange-500); }

/* Een figure heeft in browsers standaard 40px zijmarge. Dat is precies
   wat er misging op de productpagina: het beeld liep niet door tot de
   rechterrand en stond scheef ten opzichte van de tekst eronder.
   Hier voor alle beeldvlakken tegelijk uitgezet. */
figure.product-hero,
figure.article__hero,
figure.recipe__hero { margin-inline: 0; padding: 0; }

/* ============================================ ÉÉN BEELDVLAK, OVERAL */
/*
 * Elk beeld op de site volgt dezelfde drie regels:
 *
 *   16:9, altijd. Eén verhouding zorgt dat pagina's op elkaar lijken en
 *   dat er niets verspringt tijdens het laden.
 *
 *   Afgeronde hoeken en binnen de marges. Een beeld dat tot de schermrand
 *   loopt, oogt op een smalle kolom als een fout in plaats van als een
 *   keuze.
 *
 *   Ruimte eronder. Een kop die tegen een afbeelding aan plakt, leest
 *   rommelig; dat was precies wat er op de productpagina misging.
 */
.beeldvlak {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--c-green-050);
  margin-bottom: var(--sp-6);
}
.beeldvlak--orange { background: var(--c-orange-050); }
.beeldvlak img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* Als het beeld een kaart afsluit, volgen alleen de bovenhoeken en
   vervalt de marge eronder. */
.beeldvlak--kop {
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  margin-bottom: 0;
}

/* --------------------------------------- productbeelden, 16:9 overal */
/* Eén verhouding op alle plekken waar een omslag verschijnt. Daardoor
   herkent een bezoeker het product terug van de ene pagina op de andere,
   en verspringt er niets tijdens het laden. */

/* Binnen de marges en met ruimte eronder. Eerder liep dit beeld tot de
   schermrand en plakte de kop "Wat je krijgt" er direct tegenaan.

   Minder ruimte erboven dan eronder: het beeld hoort bij de titel, de
   tekst eronder is een nieuw blok. */
/* Een figure heeft in de browser standaard 40px zijmarge. Zonder deze
   regel loopt het beeld niet door tot de rechterrand en staat het scheef
   ten opzichte van de tekst eronder. */
.product-hero { margin: var(--sp-4) 0 0; padding: 0; }
.product-hero__beeld {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  background: var(--c-green-050);
  margin-bottom: var(--sp-7);
}
.product-hero__beeld--orange { background: var(--c-orange-050); }
.product-hero__beeld img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* In het aanbodblok binnen de kaartrand blijven, met alleen de bovenhoeken
   afgerond zodat het beeld de kaart afmaakt in plaats van erin te zweven. */
.offer__beeld {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) var(--sp-4);
  border-radius: calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0;
  background: var(--c-orange-050);
}
.offer__beeld img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* De upgradekaart op productpagina's krijgt een klein voorbeeldje */
.upgrade-card__beeld {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-md);
  margin-bottom: var(--sp-3);
  background: var(--c-orange-050);
}
.upgrade-card__beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ================================================ productpagina */
/* De ruimte die je miste: het beeld en de eerste tekst plakten aan
   elkaar. Nu een volle regel ertussen. */
.product-hero__beeld { margin-bottom: var(--sp-7); }

/* De feiten die iemand nodig heeft om te beslissen */
.pfeiten {
  list-style: none; margin: 0 0 var(--sp-5); padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4);
}
.pfeiten li {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: .8125rem; color: var(--c-ink-soft);
}
.pfeiten__vink { color: var(--c-green-700); width: 14px; height: 14px; flex: 0 0 auto; }

/* Prijs en knop bovenaan */
.pkoop {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
  background: var(--c-white);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
}
.pkoop__prijs { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }
.pkoop__bedrag { font-size: 1.75rem; font-weight: 700; color: var(--c-green-900); }
.pkoop__was { font-size: 1rem; color: var(--c-ink-soft); text-decoration: line-through; }
.pkoop__korting {
  font-size: .75rem; font-weight: 600; color: var(--c-green-700);
  background: var(--c-green-050); padding: 2px var(--sp-2); border-radius: var(--r-pill);
}
.pkoop__knop { flex: 1 1 auto; justify-content: center; min-width: 180px; }

/* Wat zit erin, met losse prijzen. Een rekensom overtuigt beter dan een
   bewering over besparing. */
.pinhoud { list-style: none; margin: 0 0 var(--sp-7); padding: 0; }
.pinhoud__item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--c-line);
  text-decoration: none;
}
.pinhoud__item:hover .pinhoud__naam { color: var(--c-green-700); }
.pinhoud__naam { font-size: .9375rem; color: var(--c-green-900); }
.pinhoud__prijs { font-size: .875rem; color: var(--c-ink-soft); white-space: nowrap; }

.pinhoud__totaal, .pinhoud__nu {
  display: flex; justify-content: space-between;
  padding: var(--sp-3) 0;
  font-size: .9375rem;
}
.pinhoud__totaal { color: var(--c-ink-soft); }
.pinhoud__totaal span:last-child { text-decoration: line-through; }
.pinhoud__nu {
  font-weight: 700; color: var(--c-green-900);
  border-top: 2px solid var(--c-green-700);
}

/* Bezwaren wegnemen */
.pvragen { margin-bottom: var(--sp-7); }
.pvragen details { border-bottom: 1px solid var(--c-line); padding: var(--sp-3) 0; }
.pvragen summary {
  font-size: .9375rem; font-weight: 600; color: var(--c-green-900);
  cursor: pointer; list-style: none;
}
.pvragen summary::-webkit-details-marker { display: none; }
.pvragen summary::after { content: ' +'; color: var(--c-ink-soft); }
.pvragen details[open] summary::after { content: ' –'; }
.pvragen p { margin: var(--sp-2) 0 0; font-size: .875rem; line-height: 1.6; color: var(--c-ink-soft); }

/* De balk die blijft staan */
.pbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-white);
  border-top: 1px solid var(--c-line);
  box-shadow: 0 -4px 20px rgba(30, 59, 44, .10);
}
.pbalk[hidden] { display: none; }
.pbalk__prijs { font-size: 1.125rem; font-weight: 700; color: var(--c-green-900); white-space: nowrap; }
.pbalk__knop { flex: 1; justify-content: center; }

/* Ruimte onderaan, zodat de balk niets afdekt */
body:has(.pbalk) .site-footer { padding-bottom: 84px; }


/* =====================================================================
   REDESIGN 2026 — visuele laag uit het nieuwe ontwerp (map "nieuw")
   ---------------------------------------------------------------------
   Alleen presentatie. Markup, hooks, formulieren en scripts blijven
   zoals ze waren; dit blok overschrijft uitsluitend uiterlijk.

   Kleuren: html:root wint van de kleurinstellingen uit het beheer
   (Settings::cssVariables schrijft :root). Zo is het nieuwe palet op
   elke pagina gelijk. Wil je de beheerkleuren weer laten winnen, maak
   van "html:root" hieronder dan ":root".
   ===================================================================== */

html:root {
  --bm-ink:     #173e36;   /* koppen en tekst */
  --bm-muted:   #536b65;   /* tweede tekst */
  --bm-green:   #2e7437;   /* actieve chip, groene knop */
  --bm-leaf:    #347a3f;
  --bm-orange:  #f47725;   /* primaire actie */
  --bm-orange2: #fa8229;
  --bm-page:    #fffaf2;   /* paginablad */
  --bm-paper:   #fffdf9;   /* kop */
  --bm-canvas:  #e9e2d6;   /* rand op brede schermen */
  --bm-sage:    #eaf1e3;
  --bm-sage2:   #e5eee0;
  --bm-peach:   #fff1e3;
  --bm-pink:    #fde7ec;
  --bm-sand:    #fff0d9;
  --bm-blue:    #e3f2f7;
  --bm-lilac:   #f6effc;
  --bm-line:    rgba(23, 62, 54, .07);
  --bm-shadow:  0 10px 28px rgba(39, 59, 45, .085);
  --bm-shadow-s:0 7px 18px rgba(35, 57, 43, .07);

  /* Bestaande tokens wijzen naar het nieuwe palet */
  --c-green-900:  #173e36;
  --c-green-700:  #2e7437;
  --c-green-600:  #347a3f;
  --c-green-300:  #a9c79f;
  --c-green-100:  #e5eee0;
  --c-green-050:  #eef4e8;
  --c-orange-500: #f47725;
  --c-orange-400: #fa8229;
  --c-orange-100: #fde3cf;
  --c-orange-050: #fff4e8;
  --c-cream:      #fffaf2;
  --c-ink:        #173e36;
  --c-ink-soft:   #536b65;
  --c-line:       rgba(23, 62, 54, .08);

  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 26px;
  --shadow-card: 0 10px 28px rgba(39, 59, 45, .085);
  --shadow-lift: 0 14px 35px rgba(35, 57, 43, .12);

  --wrap: 430px;
  --gutter: 18px;
}

/* ------------------------------------------------------------ basis */
html { background: var(--bm-paper); }
body {
  background: var(--bm-paper);
  color: var(--bm-ink);
  font-family: var(--font-body);
  font-size: 16px; line-height: 1.5;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--bm-ink);
  font-weight: 700;
  letter-spacing: -.02em;
}
h1 { font-size: 1.9375rem; line-height: 1.05; letter-spacing: -.03em; }
h2 { font-size: 1.4375rem; line-height: 1.1; }
h3 { font-size: 1.125rem; line-height: 1.2; }
/* UI-teksten die als kop gestyled zijn maar geen serif horen */
.btn, .chip, .pcard__kind, .nav__kop, .site-footer h3 { font-family: var(--font-body); }

.page {
  max-width: var(--wrap);
  background:
    radial-gradient(circle at 0 18%, rgba(248, 218, 196, .22), transparent 16%),
    radial-gradient(circle at 100% 36%, rgba(219, 234, 208, .24), transparent 17%),
    var(--bm-page);
  overflow-x: hidden;
}
/* Brede schermen: warme rand naast de site, nooit erboven */
@media (min-width: 431px) {
  html, body { background: var(--bm-canvas); }
  .page { box-shadow: 0 0 70px rgba(58, 51, 40, .17); min-height: 100vh; }
}

.section { padding-block: 2.375rem; }
.section--tight { padding-block: 1.25rem; }

:focus-visible { outline-color: var(--bm-orange); }

/* ------------------------------------------------------------ kop */
.site-header {
  background: var(--bm-paper);
  border-bottom: 0;
}
.site-header.is-stuck { box-shadow: 0 6px 18px rgba(31, 59, 45, .07); border-bottom-color: transparent; }
.site-header__inner {
  min-height: 66px; height: 66px;
  padding-inline: 15px;
  gap: 10px;
}
.brand { flex: 1 1 auto; min-width: 0; height: 66px; display: flex; align-items: center; }
.brand__img {
  display: block; width: auto; height: 47px; max-width: 211px;
  object-fit: contain; object-position: left center;
}
.header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.header-action {
  appearance: none; -webkit-appearance: none;
  flex: 0 0 36px; width: 36px; height: 36px; padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; color: var(--bm-ink);
  border: 1px solid rgba(23, 62, 54, .07);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(31, 59, 45, .06);
  cursor: pointer; text-decoration: none;
  touch-action: manipulation;
}
.header-action:hover { box-shadow: 0 6px 16px rgba(31, 59, 45, .1); }

/* Zoekicoon in CSS getekend, zoals in het ontwerp */
.search-icon {
  position: relative; display: block;
  width: 15px; height: 15px;
  border: 2px solid var(--bm-ink); border-radius: 50%;
  box-sizing: border-box;
}
.search-icon::after {
  content: ""; position: absolute;
  width: 6px; height: 2px; border-radius: 2px;
  background: var(--bm-ink);
  right: -5px; bottom: -2px;
  transform: rotate(45deg); transform-origin: left center;
}

/* Hamburger: zelfde knop (#navToggle), nieuw uiterlijk */
.nav-toggle { display: flex; gap: 0; }
.nav-toggle span { background: none; width: auto; height: auto; border-radius: 0; transition: none; }
.nav-toggle[aria-expanded="true"] span:nth-child(n) { transform: none; opacity: 1; }
.nav-toggle .hamburger {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; width: 18px; height: 16px;
  background: none; border-radius: 0;
}
.hamburger i {
  display: block; width: 18px; height: 2px; border-radius: 2px;
  background: var(--bm-ink);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .hamburger i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .hamburger i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 390px) {
  .site-header__inner { height: 62px; min-height: 62px; padding-inline: 12px; }
  .brand { height: 62px; }
  .brand__img { height: 44px; max-width: 198px; }
}
@media (max-width: 350px) {
  .brand__img { height: 40px; max-width: 178px; }
  .header-action { flex-basis: 34px; width: 34px; height: 34px; }
}

/* ------------------------------------------------------------ menu */
/* Paneel over de pagina heen, direct onder de kop. Zelfde markup en
   dezelfde menuknop; alleen de vorm is nieuw. */
.site-nav {
  position: fixed; z-index: 99;
  top: 66px; bottom: 0;
  left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--wrap);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 6px 0 calc(28px + env(safe-area-inset-bottom, 0px));
  border-top: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 226, 196, .55), transparent 35%),
    radial-gradient(circle at 0 100%, rgba(223, 237, 212, .6), transparent 40%),
    var(--bm-page);
  /* Dimt alles eromheen (desktop: de randen naast de kolom) */
  box-shadow: 0 0 0 100vmax rgba(23, 62, 54, .28);
}
.site-nav.is-open { display: block; animation: bmMenuIn .22s ease-out; }
@keyframes bmMenuIn {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@media (max-width: 390px) { .site-nav { top: 62px; } }
/* Pagina eronder staat stil zolang het menu open is */
html:has(.site-nav.is-open), body:has(.site-nav.is-open) { overflow: hidden; }
.site-header:has(.site-nav.is-open) { box-shadow: none; }

.site-nav .wrap { padding-inline: 16px; }

/* Groepskoppen */
.nav__kop {
  display: flex; align-items: center; gap: 8px;
  margin: 22px 2px 10px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .09em;
  color: var(--bm-muted);
}
.nav__kop::after { content: ""; flex: 1; height: 1px; background: rgba(23, 62, 54, .09); }
.nav__kop:first-of-type { margin-top: 18px; }
.site-nav ul + .nav__kop { margin-top: 22px; }

/* Links als tegels, twee naast elkaar */
.site-nav ul {
  display: grid; grid-template-columns: 1fr 1fr; gap: 9px;
  background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible;
}
.site-nav li + li { border-top: 0; }
.site-nav li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.site-nav li > a {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  gap: 6px; min-height: 74px;
  padding: 12px 13px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 16px rgba(35, 57, 43, .06);
  font-size: .875rem; font-weight: 600; line-height: 1.2; color: var(--bm-ink);
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.site-nav li > a::after { content: none; }
.site-nav li > a:hover, .site-nav li > a:focus-visible {
  color: var(--bm-ink); background: #fff;
  transform: translateY(-1px); box-shadow: 0 10px 22px rgba(35, 57, 43, .1);
}
/* Kleur per groep, zoals de tegels op de homepage */
.site-nav ul:nth-of-type(1) li > a { background: var(--bm-sage); }
.site-nav ul:nth-of-type(2) li > a { background: var(--bm-pink); }
.site-nav ul:nth-of-type(3) li > a { background: var(--bm-sand); }
.site-nav ul:nth-of-type(1) li > a:hover { background: #e2ecd9; }
.site-nav ul:nth-of-type(2) li > a:hover { background: #fbdce3; }
.site-nav ul:nth-of-type(3) li > a:hover { background: #ffe8c7; }

/* Icoon per bestemming; puur decoratief */
.site-nav li > a::before {
  font-size: 1.25rem; line-height: 1;
  width: 34px; height: 34px; border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .7);
}
.site-nav a[href$="/recepten/"]::before               { content: "🥣"; }
.site-nav a[href$="/kan-baby/"]::before                { content: "✅"; }
.site-nav a[href$="/baby-eten/"]::before               { content: "👶"; }
.site-nav a[href$="/weekmenu/"]::before                { content: "🗓️"; }
.site-nav a[href$="/kies-voor-mij/"]::before           { content: "🎲"; }
.site-nav a[href$="/generator/"]::before               { content: "🥕"; }
.site-nav a[href$="/allergenen-bijhouden/"]::before    { content: "🥜"; }
.site-nav a[href$="/uitleg/"]::before                  { content: "📖"; }
.site-nav a[href$="/eerste-hapjes/"]::before           { content: "🥄"; }
.site-nav a[href$="/allergenen-introduceren/"]::before { content: "🥚"; }
.site-nav a[href$="/verslikken-en-kokhalzen/"]::before { content: "🛟"; }

/* Downloads: één ingang naar de winkel, als knop */
.site-nav ul:nth-of-type(4) li > a {
  flex-direction: row; align-items: center; justify-content: center;
  min-height: 52px; border-radius: 26px;
  background: linear-gradient(90deg, #f36f20, #fa8229);
  color: #fff; border: 0;
  box-shadow: 0 9px 20px rgba(244, 119, 37, .26);
}
.site-nav ul:nth-of-type(4) li > a::before { content: "⬇"; width: auto; height: auto; background: none; font-size: 1rem; }
.site-nav ul:nth-of-type(4) li > a:hover { background: linear-gradient(90deg, #f47725, #fb8c36); color: #fff; }

/* Suggesties staan binnen het menu; die houden hun eigen opmaak */
.site-nav .zoekbox__item {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 11px 16px; font-weight: 400;
}
.site-nav .zoekbox__alles { display: block; padding: 12px 16px; font-weight: 700; }

/* Zoekveld: de zoekbalk uit het ontwerp */
.zoekbox { border-bottom: 0; padding-bottom: 6px; margin-bottom: 6px; }
.zoekbox__input {
  height: 55px;
  padding: 0 18px 0 46px;
  font-size: .9375rem;
  background: #fff;
  border: 1px solid rgba(33, 60, 44, .045);
  border-radius: 25px;
  box-shadow: 0 10px 26px rgba(41, 60, 46, .10);
}
.zoekbox__input:focus {
  background: #fff;
  border-color: rgba(46, 116, 55, .35);
  box-shadow: 0 10px 26px rgba(41, 60, 46, .10), 0 0 0 3px rgba(46, 116, 55, .12);
}
.zoekbox__icoon { left: 18px; width: 18px; height: 18px; color: var(--bm-ink); }
/* De zoekbox omsluit in de markup ook de menulijsten; daardoor viel de
   suggestielijst onder het hele menu. Nu direct onder het zoekveld. */
.zoekbox__suggesties {
  top: 60px;
  border-radius: 18px; border: 1px solid var(--bm-line);
  box-shadow: 0 16px 34px rgba(30, 59, 44, .16);
}
.zoekbox__item:hover, .zoekbox__item:focus { background: #fffaf4; }
.zoekbox__label { background: var(--bm-sage); color: var(--bm-green); }
.zoekbox__alles { background: var(--bm-sage); color: var(--bm-green); }
.zoekbox__titel { font-family: var(--font-display); font-size: .9375rem; }

/* ------------------------------------------------------------ knoppen */
.btn {
  min-height: 48px;
  border-radius: 24px;
  font-family: var(--font-body);
  font-size: .875rem; font-weight: 700;
  letter-spacing: 0;
}
.btn:hover { box-shadow: 0 9px 20px rgba(23, 62, 54, .14); }
.btn--green { background: var(--bm-green); color: #fff; box-shadow: 0 7px 16px rgba(46, 116, 55, .22); }
.btn--green:hover { background: var(--bm-leaf); }
.btn--orange {
  background: linear-gradient(90deg, #f36f20, #fa8229);
  color: #fff; box-shadow: 0 9px 20px rgba(244, 119, 37, .24);
}
.btn--orange:hover { background: linear-gradient(90deg, #f47725, #fb8c36); }
.btn--ghost {
  background: #fff9f3; color: #39534d;
  border: 1px solid #f0dfd1;
  min-height: 42px; font-size: .8125rem;
}
.link-arrow { color: var(--bm-leaf); font-weight: 650; font-size: .8125rem; }
.link-arrow svg { color: currentColor; }

/* ------------------------------------------------------------ chips */
.chip, .seizoen__item {
  background: #fff;
  border: 1px solid rgba(23, 62, 54, .04);
  border-radius: 20px;
  box-shadow: 0 4px 11px rgba(33, 60, 44, .05);
  font-weight: 600; font-size: .8125rem;
  color: var(--bm-ink);
  padding: 9px 14px;
}
.chip.is-active, .chip.is-on {
  background: var(--bm-green); border-color: var(--bm-green); color: #fff;
  box-shadow: 0 5px 13px rgba(46, 116, 55, .24);
}

/* ------------------------------------------------------------ hero */
.hero { padding: 0 12px; }
.hero__card {
  position: relative; isolation: isolate;
  min-height: 402px;
  border-radius: 29px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 88% 17%, rgba(255, 218, 183, .92) 0 19%, transparent 19.5%),
    radial-gradient(ellipse at 93% 69%, rgba(220, 235, 209, .96) 0 30%, transparent 30.5%),
    linear-gradient(145deg, #fff7eb 0%, #fff1df 55%, #eef4e7 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 8px 25px rgba(52, 65, 48, .025);
  display: flex; align-items: flex-start;
}
/* Zachte vorm achter het beeld */
.hero__card::before {
  content: ""; position: absolute; z-index: 0;
  width: 190px; height: 280px; right: -24px; top: 45px;
  background: rgba(255, 255, 255, .42);
  border-radius: 52% 48% 38% 62% / 40% 52% 48% 60%;
  transform: rotate(8deg);
}
/* Verloop dat de tekstkolom rustig houdt */
.hero__card::after {
  content: ""; position: absolute; z-index: 3; inset: 0 auto 0 0;
  width: 67%;
  background: linear-gradient(90deg, #fff5e7 0%, rgba(255, 245, 231, .97) 34%, rgba(255, 245, 231, .55) 62%, transparent 86%);
  pointer-events: none;
}
.hero picture { display: contents; }
.hero__photo {
  position: absolute; z-index: 2;
  width: 332px; max-width: none; height: auto; max-height: 365px;
  right: -92px; bottom: -4px;
  object-fit: contain; object-position: center bottom;
  filter: drop-shadow(0 18px 22px rgba(58, 72, 45, .13));
}
/* Een zelf ingesteld hero-beeld krijgt dezelfde plek, maar rond afgesneden */
.hero__photo--eigen {
  width: 250px; height: 250px; max-height: none;
  right: -40px; bottom: 30px;
  object-fit: cover; border-radius: 50%;
}
.hero__decor { position: absolute; z-index: 4; pointer-events: none; height: auto; }
.hero__decor--leaf  { width: 75px; left: -34px; bottom: -4px; opacity: .62; }
.hero__decor--heart { width: 26px; right: 17px; top: 25px; opacity: .55; }
.hero__flower {
  position: absolute; z-index: 4; right: 124px; bottom: 72px;
  font-size: 25px; color: #f7a44d; opacity: .55; transform: rotate(-13deg);
  pointer-events: none;
}
.hero__copy {
  position: relative; z-index: 5;
  width: 58%;
  padding: 43px 0 40px 21px;
}
.hero .eyebrow {
  display: inline-block;
  background: none; padding: 0; margin: 0 0 4px;
  font-family: cursive;
  font-size: 1rem; font-weight: 400; line-height: 1.25;
  color: #3c8b4a;
  transform: rotate(-3deg); transform-origin: left center;
}
.hero .eyebrow__dot { display: none; }
.hero__title {
  font-size: 1.9375rem; line-height: 1.04; letter-spacing: -.9px;
  margin: 9px 0 15px; max-width: 218px;
}
.hero__intro {
  font-size: .84375rem; line-height: 1.48; color: #405d56;
  max-width: 205px; margin: 0;
}
@media (max-width: 390px) {
  .hero__card { min-height: 390px; }
  .hero__title { font-size: 1.8125rem; max-width: 202px; }
  .hero__intro { font-size: .8125rem; max-width: 190px; }
  .hero__photo { width: 310px; right: -95px; }
}

/* --------------------------------------------- gerecht van de dag */
.daily__label {
  justify-content: flex-start; gap: 8px;
  font-family: var(--font-display);
  font-size: 1.4375rem; line-height: 1.1; letter-spacing: -.4px;
  color: var(--bm-ink);
  margin: 12px 0 13px;
}
.daily__label svg { width: 22px; height: 22px; color: var(--bm-ink); }
.daily {
  margin-top: 0;
  padding: 0;
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(29, 63, 48, .045);
  box-shadow: 0 16px 38px rgba(37, 58, 44, .105);
  overflow: hidden;
}
.daily__media {
  border-radius: 24px 24px 0 0;
  aspect-ratio: auto; height: 230px;
}
.daily__media::after {
  content: ""; position: absolute; inset: auto 0 0; height: 42%;
  background: linear-gradient(transparent, rgba(24, 45, 36, .07));
  pointer-events: none;
}
.fav-btn {
  top: 10px; right: 10px; z-index: 2;
  background: #fff;
  box-shadow: 0 5px 14px rgba(24, 48, 38, .13);
}
.fav-btn svg { stroke: #46665f; }
.daily__body { padding: 15px 16px 17px; }
.daily__title {
  text-align: left; font-size: 1.3125rem; letter-spacing: -.35px;
  margin: 0 0 8px;
}
.meta-row {
  justify-content: flex-start; gap: 6px 10px; flex-wrap: wrap;
  font-size: .75rem; line-height: 1.35; color: #60736e;
  margin-bottom: 13px;
}
.meta-row__sep { color: rgba(23, 62, 54, .25); }
.daily .btn {
  background: linear-gradient(90deg, #f36f20, #fa8229);
  color: #fff; box-shadow: 0 9px 20px rgba(244, 119, 37, .24);
}
.daily .btn:hover { background: linear-gradient(90deg, #f47725, #fb8c36); }

/* ------------------------------------------------------------ tools */
.tools { grid-template-columns: 1fr 1fr; gap: 11px; }
.tool-card {
  position: relative; overflow: hidden;
  flex-direction: column; gap: 6px;
  min-height: 150px;
  padding: 15px 13px 14px;
  border-radius: 21px;
  border: 1px solid rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px rgba(37, 58, 44, .07);
  background: var(--bm-sage);
}
.tool-card::after {
  content: ""; position: absolute; width: 75px; height: 75px; border-radius: 50%;
  background: rgba(255, 255, 255, .22); right: -24px; top: -23px; pointer-events: none;
}
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 58, 44, .1); }
.tools .tool-card:nth-child(1) { background: var(--bm-pink); }
.tools .tool-card:nth-child(2) { background: var(--bm-sage); }
.tools .tool-card:nth-child(3) { background: var(--bm-sand); }
.tools .tool-card:nth-child(4) { background: var(--bm-blue); }
.tools .tool-card:nth-child(5) { background: var(--bm-lilac); }
/* De uitgelichte tool (Kies voor mij) over de volle breedte */
.tool-card--uitgelicht { grid-column: 1 / -1; min-height: 0; border-color: rgba(255, 255, 255, .82); }
.tool-card--uitgelicht .tool-card__body { max-width: 290px; }
.tool-card__icon {
  flex: 0 0 auto; width: 42px; height: 42px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
.tool-card__icon svg { width: 22px; height: 22px; stroke: var(--bm-ink); stroke-width: 1.7; }
.tool-card__body { display: flex; flex-direction: column; flex: 1; position: relative; z-index: 1; }
.tool-card__title {
  font-family: var(--font-display);
  font-size: 1rem; line-height: 1.1; letter-spacing: -.2px;
  margin: 2px 0 6px;
}
.tool-card__text { font-size: .75rem; line-height: 1.38; color: #526861; margin-bottom: 10px; }
.tool-card .link-arrow {
  margin-top: auto; width: 100%;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 8px;
  color: var(--bm-ink); font-size: .75rem; font-weight: 700; line-height: 1.25;
}
.tool-card .link-arrow svg { width: 16px; height: 16px; }
/* Hele tegel aanklikbaar, via de bestaande link */
.tool-card .link-arrow::after { content: ""; position: absolute; inset: -200px; }
.tool-card { cursor: pointer; }

/* ------------------------------------------------ gidsen op de home */
.gidsen__kop, .seizoen__kop, .products-head h2, .hub__title, .zoek__kop, .uitleg__kop, .verwant__kop {
  font-family: var(--font-display);
  font-size: 1.4375rem; line-height: 1.1; letter-spacing: -.4px;
}
.gidsen__lead, .seizoen__lead, .products-head p, .hub__lead, .uitleg__lead {
  font-size: .8125rem; line-height: 1.45; color: var(--bm-muted);
}
.gidsen__lijst { gap: 9px; }
.gidsen__item {
  position: relative;
  grid-template-columns: 52px 1fr 14px; column-gap: 12px; row-gap: 3px;
  align-items: center;
  padding: 8px 12px 8px 8px;
  background: #fff;
  border: 1px solid rgba(30, 61, 47, .04);
  border-radius: 19px;
  box-shadow: 0 8px 22px rgba(35, 57, 43, .07);
}
.gidsen__item:hover { border-color: rgba(30, 61, 47, .1); }
.gidsen__ico {
  grid-row: 1 / span 2; grid-column: 1;
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--bm-sand);
}
.gidsen__lijst li:nth-child(2) .gidsen__ico { background: var(--bm-sage); }
.gidsen__lijst li:nth-child(3) .gidsen__ico { background: var(--bm-pink); }
.gidsen__lijst li:nth-child(4) .gidsen__ico { background: var(--bm-blue); }
.gidsen__ico svg { width: 22px; height: 22px; stroke: var(--bm-ink); fill: none; stroke-width: 1.6; }
.gidsen__titel { grid-column: 2; font-family: var(--font-display); font-size: .9375rem; font-weight: 700; }
.gidsen__tekst { grid-column: 2; font-size: .75rem; line-height: 1.35; color: #657671; }
.gidsen__pijl { grid-column: 3; grid-row: 1 / span 2; font-size: 1.5rem; line-height: 1; color: var(--bm-ink); }
.gidsen__alles { margin-top: 4px; }

/* Panelen zoals de 'eilanden' in het ontwerp */
section[aria-labelledby="gidsen-kop"] > .wrap,
section[aria-labelledby="seizoen-kop"] > .wrap {
  margin-inline: 8px; width: auto;
  padding: 22px 12px 18px;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, .72), rgba(255, 250, 242, .72));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .72), 0 7px 22px rgba(39, 59, 45, .035);
}
section[aria-labelledby="seizoen-kop"] > .wrap { background: linear-gradient(145deg, #f8f3ea, #fffaf3); }

/* ------------------------------------------------------------ seizoen */
.seizoen__lijst { gap: 8px; }
.seizoen__item { padding: 8px 13px; }
.seizoen__naam { font-size: .8125rem; }
.seizoen__vanaf { color: var(--bm-leaf); font-weight: 600; }

/* --------------------------------------------- producten / gidsen */
.section--peach {
  position: relative; overflow: hidden; isolation: isolate;
  margin-top: 1.5rem;
  padding-top: 2.1875rem;
  background:
    radial-gradient(circle at 93% 18%, rgba(252, 222, 193, .9) 0 16%, transparent 16.5%),
    linear-gradient(152deg, #fff1e3 0%, #fff9ef 58%, #edf4e7 100%);
  border-radius: 31px 31px 0 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
}
.section--peach::after {
  content: ""; position: absolute; z-index: -1;
  width: 130px; height: 130px; left: -55px; bottom: 90px;
  background: url("../img/design/decor/wash-sage.png") center / cover no-repeat;
  opacity: .45; pointer-events: none;
}
.products-decor { position: absolute; z-index: 0; pointer-events: none; height: auto; }
.products-decor--botanical { width: 105px; right: -38px; top: 3px; opacity: .55; }
.products-decor--heart { width: 30px; right: 14px; top: 14px; opacity: .8; }
.section--peach > .wrap { position: relative; z-index: 1; }
.products-head { text-align: left; }
.products-head h2 { font-size: 1.5625rem; line-height: 1.08; max-width: 310px; margin-bottom: 6px; }

.pgrid { gap: 16px; }
.pcard {
  position: relative;
  background: rgba(255, 252, 246, .96);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  box-shadow: 0 13px 34px rgba(49, 64, 43, .11);
  overflow: visible;
}
.pcard:hover { border-color: rgba(255, 255, 255, .8); box-shadow: 0 16px 38px rgba(49, 64, 43, .15); }
.pcard__media { border-radius: 24px 24px 0 0; overflow: hidden; }
.pcard__beeld { border-radius: 24px 24px 0 0; background: #fff6ea; }
.pcard__badge {
  top: auto; bottom: -11px; left: auto; right: 15px; z-index: 2;
  background: #397d40; color: #fff;
  border-radius: 12px; padding: 6px 10px;
  font-size: .5625rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 5px 12px rgba(57, 125, 64, .18);
}
.pcard__media { overflow: visible; }
.pcard__beeld { overflow: hidden; }
.pcard__body { padding: 18px 18px 18px; gap: 6px; }
.pcard__kind { color: #d98c23; font-weight: 800; letter-spacing: .06em; }
.pcard__name { font-family: var(--font-display); font-size: 1.375rem; line-height: 1.1; letter-spacing: -.3px; }
.pcard__text { font-size: .8125rem; line-height: 1.5; color: #4c625c; }
.pcard__foot { border-top: 0; padding-top: 10px; gap: 8px; }
.pcard__price { font-family: var(--font-display); font-size: 1.3125rem; color: var(--bm-ink); }
.pcard__was { font-family: var(--font-body); }
.pcard__cta {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bm-orange); color: #fff;
  border-radius: 20px; padding: 11px 15px;
  font-size: .75rem; font-weight: 700;
  box-shadow: 0 7px 15px rgba(244, 119, 37, .22);
  white-space: nowrap;
}
.pcard__arrow { color: #fff; width: 15px; height: 15px; }
.pcard__saving { background: var(--bm-sage); color: var(--bm-green); }

/* ------------------------------------------------------------ recepten */
.recipe-grid { gap: 11px; }
.recipe-card {
  border-radius: 19px;
  border: 1px solid rgba(30, 61, 47, .04);
  box-shadow: 0 8px 21px rgba(35, 57, 43, .085);
}
.recipe-card__media { aspect-ratio: 4 / 3; }
.recipe-card__body { padding: 9px 11px 12px; }
.recipe-card__title { font-family: var(--font-display); font-size: .84375rem; line-height: 1.2; margin-bottom: 5px; }
.recipe-card__meta { font-size: .6875rem; color: #667773; }

/* ------------------------------------------------------------ inhoud */
.breadcrumbs { font-size: .75rem; color: var(--bm-muted); }
.breadcrumbs a { color: var(--bm-leaf); font-weight: 600; }
.answer-box {
  background: var(--bm-sage);
  border-left: 0;
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.safety-note {
  background: #fff4e8; border: 1px solid #f7e0cc; border-radius: 18px;
}
.byline { border-color: var(--bm-line); }
.byline a { color: var(--bm-leaf); }

/* Algemene kaartachtige vlakken krijgen de zachte kaartvorm */
.zoek__item, .uitleg__item, .verwant__item, .momentlist a {
  border-radius: 18px;
  border: 1px solid rgba(30, 61, 47, .04);
  box-shadow: 0 7px 20px rgba(41, 68, 55, .06);
}
.zoek__titel, .uitleg__titel { font-family: var(--font-display); }
.verwant__pijl { color: var(--bm-orange); }

/* Formulieren */
input[type="text"], input[type="email"], input[type="search"], input[type="month"],
input[type="date"], input[type="number"], select, textarea {
  font-family: var(--font-body);
}
.zoekform__input {
  height: 52px; background: #fff;
  border: 1px solid rgba(33, 60, 44, .05); border-radius: 25px;
  box-shadow: 0 10px 26px rgba(41, 60, 46, .08);
}

/* ------------------------------------------------ nieuwsbrief (aanmelden) */
.aanmeld {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 42px 1fr; column-gap: 10px;
  padding: 19px 17px 17px;
  background: linear-gradient(135deg, #e5eee0, #eef4e9);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  box-shadow: 0 11px 28px rgba(42, 67, 46, .09);
}
.aanmeld::before {
  content: ""; position: absolute; width: 150px; height: 150px; border-radius: 50%;
  background: rgba(255, 255, 255, .24); right: -50px; top: -70px; pointer-events: none;
}
.aanmeld > * { grid-column: 1 / -1; position: relative; }
.aanmeld__ico {
  grid-column: 1; grid-row: span 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: #d4e5cb; display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}
.aanmeld__kop { grid-column: 2; font-size: 1.1875rem; margin-top: 2px; }
.aanmeld__tekst { grid-column: 2; font-size: .8125rem; line-height: 1.4; color: #405d56; }
.aanmeld__veld input {
  background: #fff; border: 0; border-radius: 22px; height: 46px;
  box-shadow: 0 6px 15px rgba(38, 59, 44, .05);
}
.aanmeld__knop {
  background: linear-gradient(90deg, #f36f20, #fa8229);
  box-shadow: 0 9px 20px rgba(244, 119, 37, .24);
}

/* ------------------------------------------------------------ voettekst */
.site-footer {
  position: relative; overflow: hidden;
  margin-top: 8px;
  background: linear-gradient(160deg, #eef4e8 0%, #f5f1e8 100%);
  color: #405d56;
  border-radius: 31px 31px 0 0;
  padding-block: 2.25rem 2rem;
}
.site-footer::before {
  content: ""; position: absolute; width: 105px; height: 85px; right: -30px; top: 14px;
  background: url("../img/design/decor/leaf-sprig-right.png") center / contain no-repeat;
  opacity: .5; pointer-events: none;
}
.site-footer h3 {
  color: var(--bm-leaf);
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em;
}
.site-footer a { color: var(--bm-ink); font-weight: 500; }
.site-footer a:hover { color: var(--bm-orange); text-decoration: none; }
.site-footer__products { border-top-color: rgba(23, 62, 54, .1); }
.site-footer__products a { color: var(--bm-ink); font-weight: 700; font-family: var(--font-display); }
.site-footer__legal {
  border-top: 1px solid rgba(23, 62, 54, .1);
  color: #6f817c; font-size: .6875rem;
}
.site-footer__legal a { color: var(--bm-leaf); font-weight: 600; }

/* ------------------------------------------------------------ toestemming */
.consent__inner {
  border-radius: 24px 24px 0 0;
  background: var(--bm-paper);
  box-shadow: 0 -12px 30px rgba(31, 59, 45, .12);
}

/* ------------------------------------------------ primaire acties */
/* In het ontwerp is elke primaire knop oranje; groen is alleen voor een
   actieve keuze (chips, tikvlakken). */
.btn--green {
  background: linear-gradient(90deg, #f36f20, #fa8229);
  color: #fff;
  box-shadow: 0 9px 20px rgba(244, 119, 37, .24);
}
.btn--green:hover { background: linear-gradient(90deg, #f47725, #fb8c36); }

/* ------------------------------------------------ beeldvlakken */
figure.article__hero {
  margin: var(--sp-5) 12px;
  border-radius: 24px;
  box-shadow: 0 12px 30px rgba(35, 57, 43, .10);
}
.product-hero__beeld { border-radius: 24px; box-shadow: 0 12px 30px rgba(35, 57, 43, .10); }

/* ------------------------------------------------ productpagina */
.pkoop {
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: 24px;
  background: rgba(255, 252, 246, .96);
  box-shadow: 0 13px 34px rgba(49, 64, 43, .11);
}
.pkoop__bedrag, .pbalk__prijs, .checkout__price, .upsell__price, .bundle-list__price {
  font-family: var(--font-display);
}
.pbalk {
  background: var(--bm-paper);
  border-top: 0;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -10px 28px rgba(31, 59, 45, .12);
}
.pvragen details { border-color: var(--bm-line); }

/* ------------------------------------------------ weekmenu */
.weekday {
  background: #fff;
  border-radius: 22px;
  padding: 14px 16px 6px;
  margin-bottom: 14px;
  border: 1px solid rgba(30, 61, 47, .04);
  box-shadow: 0 8px 22px rgba(35, 57, 43, .07);
}
.weekday:nth-of-type(7n+1) { background: linear-gradient(150deg, #f1f7ed, #fff 60%); }
.weekday:nth-of-type(7n+2) { background: linear-gradient(150deg, #fff1e6, #fff 60%); }
.weekday:nth-of-type(7n+3) { background: linear-gradient(150deg, #eef6f8, #fff 60%); }
.weekday:nth-of-type(7n+4) { background: linear-gradient(150deg, #fcecf0, #fff 60%); }
.weekday:nth-of-type(7n+5) { background: linear-gradient(150deg, #fff8e9, #fff 60%); }
.weekday:nth-of-type(7n+6) { background: linear-gradient(150deg, #f6effc, #fff 60%); }
.weekday__title { border-bottom: 0; }


/* =====================================================================
   TYPOGRAFIE — Poppins, zoals de vorige versie
   Poppins loopt breder dan een serif; koppen iets kleiner en strakker
   zodat de verhoudingen uit het ontwerp blijven kloppen.
   ===================================================================== */
body { font-size: 15px; line-height: 1.55; }
h1, h2, h3, h4 { font-weight: 700; letter-spacing: -.025em; }
h1 { font-size: 1.75rem; line-height: 1.12; }
h2 { font-size: 1.3125rem; line-height: 1.2; }
h3 { font-size: 1.0625rem; line-height: 1.3; }

.hero__title { font-size: 1.6875rem; line-height: 1.1; letter-spacing: -.035em; margin: 6px 0 12px; }
.hero__intro { font-size: .8125rem; line-height: 1.55; }
.hero .eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-body);
  font-size: .75rem; font-weight: 600; line-height: 1.35;
  color: var(--bm-leaf);
  transform: none;
  margin-bottom: 6px;
}
.hero .eyebrow__dot { display: inline-block; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--bm-orange); }
@media (max-width: 390px) { .hero__title { font-size: 1.5625rem; } }

.daily__label,
.gidsen__kop, .seizoen__kop, .products-head h2, .hub__title, .zoek__kop, .uitleg__kop, .verwant__kop {
  font-size: 1.3125rem; letter-spacing: -.03em;
}
.products-head h2 { font-size: 1.4375rem; }
.daily__title { font-size: 1.1875rem; letter-spacing: -.02em; }
.tool-card__title { font-size: .9375rem; letter-spacing: -.02em; line-height: 1.2; }
.gidsen__titel { font-size: .875rem; font-weight: 600; }
.pcard__name { font-size: 1.1875rem; letter-spacing: -.02em; }
.pcard__price, .pkoop__bedrag, .pbalk__prijs { letter-spacing: -.02em; }
.recipe-card__title { font-size: .8125rem; font-weight: 600; }
.aanmeld__kop { font-size: 1.0625rem; }
.zoekbox__titel, .zoek__titel, .uitleg__titel { font-weight: 600; }
.site-footer__products a { font-weight: 600; }

/* Kopbalk blijft boven het gedimde vlak van het open menu */
.site-header__inner { position: relative; z-index: 101; background: var(--bm-paper); }

/* Zoek- en menuknop: exact even groot, inhoud exact gecentreerd */
.site-header .header-action,
.site-header .header-action.nav-toggle {
  box-sizing: border-box;
  flex: 0 0 36px; width: 36px; height: 36px; min-width: 36px; max-width: 36px;
  padding: 0; margin: 0;
  display: flex; align-items: center; justify-content: center;
  line-height: 0;
}
@media (max-width: 350px) {
  .site-header .header-action,
  .site-header .header-action.nav-toggle { flex-basis: 34px; width: 34px; height: 34px; min-width: 34px; max-width: 34px; }
}

/* =====================================================================
   PRODUCTPAGINA — koopkaart (titel, beeld, drie redenen, prijs + knop)
   ===================================================================== */
.wrap:has(> .product-hero) > h1 { font-size: 2rem; line-height: 1.05; letter-spacing: -.04em; margin-bottom: 4px; }
.product-subtitle { font-size: 1.125rem; font-weight: 600; margin-top: 0; margin-bottom: 0; color: var(--bm-orange); letter-spacing: -.01em; }

.product-hero { margin: 18px 0 0; }
.product-hero__beeld {
  margin-bottom: 0;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 36px rgba(35, 57, 43, .12);
}

.pkoop {
  display: block;
  margin: 16px 0 28px;
  padding: 18px 16px 16px;
  background: rgba(255, 252, 246, .96);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: 28px;
  box-shadow: 0 16px 36px rgba(35, 57, 43, .10);
}

/* Drie redenen naast elkaar, gescheiden door dunne lijnen */
.pkoop__redenen {
  list-style: none; margin: 0; padding: 0 0 16px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid rgba(23, 62, 54, .09);
}
.pkoop__reden {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 0 7px;
  min-width: 0;
}
.pkoop__reden:first-child { padding-left: 0; }
.pkoop__reden:last-child  { padding-right: 0; }
.pkoop__reden + .pkoop__reden { border-left: 1px solid rgba(23, 62, 54, .09); }
.pkoop__icoon {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
}
.pkoop__icoon svg { width: 18px; height: 18px; color: var(--bm-ink); stroke-width: 1.8; }
.pkoop__icoon--sage  { background: #e3eedd; }
.pkoop__icoon--peach { background: #fde7d3; }
.pkoop__icoon--pink  { background: #fbe0e6; }
.pkoop__icoon--pink svg { color: #d9486b; }
.pkoop__reden-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pkoop__reden-tekst strong {
  font-size: .75rem; line-height: 1.2; font-weight: 700; color: var(--bm-ink); letter-spacing: -.01em;
}
.pkoop__reden-tekst span { font-size: .625rem; line-height: 1.3; color: var(--bm-muted); }

/* Prijs links, knop rechts */
.pkoop__actie {
  display: flex; align-items: center; gap: 12px;
  padding-top: 16px;
}
.pkoop__prijs { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 0 0 auto; }
.pkoop__bedrag {
  font-family: var(--font-display);
  font-size: 2rem; line-height: 1; font-weight: 700; letter-spacing: -.04em;
  color: var(--bm-ink);
}
.pkoop__was { font-size: .8125rem; line-height: 1.2; }
.pkoop__korting {
  font-size: .6875rem; font-weight: 700; color: var(--bm-green);
  background: var(--bm-sage); border-radius: 10px; padding: 2px 8px; margin-top: 2px;
}
.pkoop__knop {
  flex: 1 1 auto; min-width: 0;
  min-height: 54px; border-radius: 28px;
  font-size: .9375rem; justify-content: center; white-space: nowrap;
}

/* Icoon boven de tekst: de site is nooit breder dan 430px, en zo krijgt
   de tekst de hele kolombreedte in plaats van een smal strookje. */
.pkoop__reden { flex-direction: column; gap: 8px; padding: 0 10px; }
.pkoop__icoon { flex-basis: auto; width: 38px; height: 38px; }
.pkoop__reden-tekst strong { font-size: .8125rem; }
.pkoop__reden-tekst span { font-size: .6875rem; }
@media (max-width: 359px) {
  .pkoop__actie { flex-wrap: wrap; }
  .pkoop__knop { flex-basis: 100%; }
}
@media (min-width: 400px) { .pkoop { padding: 20px 18px 18px; } }

/* =====================================================================
   /uitleg/ — overzicht van alle gidsen
   Eén paneel per categorie met eigen kleur, strakke rijen erin, en
   bovenaan tegels om direct naar een categorie te springen.
   ===================================================================== */
.uitleg { padding-top: 1.25rem; }

/* Kleur per categorie: --u-bg (vlak), --u-ico (icoonrondje), --u-acc (accent) */
.uitleg--pink  { --u-bg: #fdeef1; --u-ico: #fbdce3; --u-acc: #c8506e; }
.uitleg--sage  { --u-bg: #eef4e8; --u-ico: #dcebd3; --u-acc: #2e7437; }
.uitleg--sand  { --u-bg: #fff4e3; --u-ico: #ffe5c2; --u-acc: #c7731c; }
.uitleg--blue  { --u-bg: #eaf5f8; --u-ico: #d3ecf3; --u-acc: #2f7890; }
.uitleg--lilac { --u-bg: #f4eff9; --u-ico: #e6dcf3; --u-acc: #7a5aa6; }

/* ------------------------------------------------------------ kop */
.uitleg__hero { margin-bottom: 26px; }
.uitleg__eyebrow {
  margin: 0 0 4px;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--bm-orange);
}
.uitleg__hero h1 { margin-bottom: 6px; }
.uitleg__lead { font-size: .9375rem; line-height: 1.5; color: var(--bm-muted); margin: 0 0 18px; }

/* Tegels naar de categorieën */
.uitleg__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.uitleg__navitem {
  display: flex; align-items: center; gap: 10px;
  min-height: 64px; padding: 10px 11px;
  border-radius: 18px;
  background: var(--u-bg);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: 0 6px 16px rgba(35, 57, 43, .05);
  text-decoration: none; color: var(--bm-ink);
  transition: transform .15s ease, box-shadow .15s ease;
}
.uitleg__navitem:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(35, 57, 43, .09); }
/* Oneven aantal: de laatste tegel over de volle breedte */
.uitleg__navitem:last-child:nth-child(odd) { grid-column: 1 / -1; }
.uitleg__navicoon {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 12px;
  display: grid; place-items: center; background: #fff;
}
.uitleg__navicoon svg { width: 19px; height: 19px; color: var(--u-acc); stroke-width: 1.8; }
.uitleg__navtekst { display: flex; flex-direction: column; min-width: 0; }
.uitleg__navnaam { font-size: .8125rem; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.uitleg__navaantal { font-size: .6875rem; color: var(--bm-muted); margin-top: 2px; }

/* ------------------------------------------------------------ groep */
.uitleg__groep {
  margin: 0 0 18px;
  padding: 16px 14px 8px;
  border-radius: 24px;
  background: var(--u-bg);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 8px 22px rgba(35, 57, 43, .05);
  scroll-margin-top: 80px;   /* ruimte onder de vaste kop na een sprong */
}
.uitleg__groepkop {
  display: flex; align-items: center; gap: 11px;
  padding: 0 2px 14px;
}
.uitleg__groepicoon {
  flex: 0 0 42px; width: 42px; height: 42px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--u-ico);
}
.uitleg__groepicoon svg { width: 22px; height: 22px; color: var(--u-acc); stroke-width: 1.8; }
.uitleg__groeptitel { flex: 1; min-width: 0; }
.uitleg__groep .uitleg__kop {
  margin: 0; font-size: 1.125rem; line-height: 1.2; letter-spacing: -.02em;
}
.uitleg__sub { margin: 2px 0 0; font-size: .75rem; line-height: 1.35; color: var(--bm-muted); }
.uitleg__aantal {
  flex: 0 0 auto;
  min-width: 30px; height: 26px; padding: 0 9px; border-radius: 13px;
  display: grid; place-items: center;
  background: #fff; color: var(--u-acc);
  font-size: .75rem; font-weight: 700;
}

/* Rijen: één witte kaart per groep, gidsen gescheiden door dunne lijnen */
.uitleg__lijst {
  list-style: none; margin: 0 0 8px; padding: 0;
  display: block;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(35, 57, 43, .04);
  overflow: hidden;
}
.uitleg__lijst li + li { border-top: 1px solid rgba(23, 62, 54, .07); }
.uitleg__item {
  position: relative;
  display: grid; grid-template-columns: 1fr 14px; column-gap: 10px; row-gap: 2px;
  align-items: center;
  padding: 12px 14px;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  text-decoration: none;
  transition: background .15s ease;
}
.uitleg__item:hover { background: #fffaf4; border-color: transparent; }
.uitleg__titel {
  grid-column: 1; font-family: var(--font-body);
  font-size: .875rem; font-weight: 600; line-height: 1.3; color: var(--bm-ink);
}
.uitleg__tekst {
  grid-column: 1;
  font-size: .75rem; line-height: 1.4; color: var(--bm-muted);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.uitleg__pijl {
  grid-column: 2; grid-row: 1 / span 2;
  font-size: 1.375rem; line-height: 1; color: var(--u-acc);
}

/* "Toon nog X gidsen" */
.uitleg__meer { margin: 0 0 8px; }
.uitleg__meer summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; margin: 0 0 8px;
  border-radius: 21px;
  background: rgba(255, 255, 255, .7);
  font-size: .8125rem; font-weight: 700; color: var(--u-acc);
}
.uitleg__meer summary::-webkit-details-marker { display: none; }
.uitleg__meer summary::after { content: "▾"; font-size: .75rem; transition: transform .2s ease; }
.uitleg__meer[open] summary::after { transform: rotate(180deg); }
.uitleg__meer-dicht, .uitleg__meer[open] .uitleg__meer-open { display: none; }
.uitleg__meer[open] .uitleg__meer-dicht { display: inline; }
/* Uitgeklapt: de extra rijen sluiten aan op de lijst erboven */
.uitleg__meer[open] summary { order: 2; }
.uitleg__meer[open] { display: flex; flex-direction: column; }
/* Uitgeklapt: eerste en tweede deel lopen door als één lijst */
.uitleg__lijst:has(+ .uitleg__meer[open]) { margin-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.uitleg__meer[open] > .uitleg__lijst { border-top: 1px solid rgba(23, 62, 54, .07); border-top-left-radius: 0; border-top-right-radius: 0; }

/* =====================================================================
   HOMEPAGE — "Waar je mee zit"
   Crème paneel met decoratie rechtsboven; per gids een grote pastel
   tegel met illustratie, titel, twee regels tekst en een pijl.
   ===================================================================== */
/* De oude paneelstijl zat op de .wrap; die neemt .gidsen nu over */
section[aria-labelledby="gidsen-kop"] > .wrap {
  margin-inline: auto; width: 100%;
  padding: 0 12px;
  background: none; box-shadow: none; border-radius: 0;
}
.gidsen {
  position: relative; overflow: hidden; isolation: isolate;
  padding: 26px 16px 20px;
  border-radius: 30px;
  background: linear-gradient(160deg, #fffcf7 0%, #fdf8f0 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 14px 34px rgba(35, 57, 43, .08), inset 0 0 0 1px rgba(23, 62, 54, .03);
}
.gidsen__decor {
  position: absolute; z-index: -1; top: 0; right: 0;
  width: 128px; height: auto; pointer-events: none;
}
.gidsen .gidsen__kop {
  margin: 0 0 4px; padding-right: 70px;
  font-size: 1.75rem; line-height: 1.05; letter-spacing: -.045em;
}
.gidsen .gidsen__lead {
  margin: 0 0 18px; padding-right: 30px;
  font-size: .9375rem; line-height: 1.4; color: var(--bm-muted);
}

.gidsen .gidsen__lijst { display: grid; gap: 10px; margin: 0 0 16px; }
.gidsen .gidsen__item {
  display: grid;
  grid-template-columns: 72px 1fr 18px;
  column-gap: 14px; row-gap: 3px;
  align-items: center;
  padding: 10px 12px 10px 10px;
  background: #fff;
  border: 1px solid rgba(23, 62, 54, .04);
  border-radius: 22px;
  box-shadow: 0 6px 18px rgba(35, 57, 43, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gidsen .gidsen__item:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(35, 57, 43, .10); border-color: rgba(23, 62, 54, .04); }

/* Illustratietegel */
.gidsen .gidsen__ico {
  grid-row: 1 / span 2; grid-column: 1;
  width: 72px; height: 72px; border-radius: 18px;
  display: grid; place-items: center;
}
.gidsen .gidsen__ico svg { width: 62px; height: 62px; stroke: none; fill: none; }
.gidsen__ico--peach { background: #fde8d2; }
.gidsen__ico--sage  { background: #e4efdc; }
.gidsen__ico--pink  { background: #fde2e7; }
.gidsen__ico--blue  { background: #dcedfb; }
.gidsen__ico--lilac { background: #efe7f8; }

.gidsen .gidsen__titel {
  grid-column: 2; align-self: end;
  font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em;
}
.gidsen .gidsen__tekst {
  grid-column: 2; align-self: start;
  font-size: .8125rem; line-height: 1.4; color: var(--bm-muted);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.gidsen .gidsen__pijl {
  grid-column: 3; grid-row: 1 / span 2;
  display: grid; place-items: center;
}
.gidsen .gidsen__pijl svg { width: 18px; height: 18px; color: var(--bm-ink); stroke-width: 2.6; }

.gidsen .gidsen__alles {
  margin: 2px 0 0 4px;
  font-size: 1rem; font-weight: 700; color: var(--bm-green);
}
.gidsen .gidsen__alles svg { width: 18px; height: 18px; stroke-width: 2.2; }

@media (max-width: 360px) {
  .gidsen .gidsen__item { grid-template-columns: 60px 1fr 16px; column-gap: 11px; }
  .gidsen .gidsen__ico { width: 60px; height: 60px; border-radius: 16px; }
  .gidsen .gidsen__ico svg { width: 52px; height: 52px; }
  .gidsen .gidsen__kop { font-size: 1.5rem; }
}
/* Verfijning: meer ruimte voor de tekst, decoratie op ware grootte */
section[aria-labelledby="gidsen-kop"] > .wrap { padding: 0 10px; }
.gidsen { padding: 26px 14px 20px; }
.gidsen svg.gidsen__decor { width: 132px; height: 99px; }
.gidsen .gidsen__lead { padding-right: 0; }
.gidsen .gidsen__item { grid-template-columns: 64px 1fr 16px; column-gap: 12px; padding: 10px 10px 10px 10px; }
.gidsen .gidsen__ico { width: 64px; height: 64px; border-radius: 17px; }
.gidsen .gidsen__ico svg { width: 56px; height: 56px; }
.gidsen .gidsen__titel { font-size: .96875rem; letter-spacing: -.025em; }
.gidsen .gidsen__tekst { font-size: .78125rem; }

/* =====================================================================
   HOMEPAGE — "Nu in het seizoen" en "Handige tools"
   Zelfde paneel als "Waar je mee zit" (.gidsen).
   ===================================================================== */
section[aria-labelledby="seizoen-kop"] > .wrap,
section[aria-labelledby="tools-kop"] > .wrap {
  margin-inline: auto; width: 100%;
  padding: 0 10px;
  background: none; box-shadow: none; border-radius: 0;
}

/* Kop binnen de panelen: altijd de grote paneelkop */
.gidsen .seizoen__kop { margin: 0 0 4px; }

/* Tools: de titel is een h3 in de kaart */
.gidsen h3.gidsen__titel { margin: 0; font-family: var(--font-body); color: var(--bm-ink); }

/* Seizoen: twee kolommen met compacte kaartjes */
.gidsen .seizoen__lijst {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.gidsen .seizoen__lijst li { list-style: none; min-width: 0; }
.gidsen .seizoen__item {
  display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; row-gap: 1px;
  align-items: center;
  height: 100%;
  padding: 8px 10px 8px 8px;
  background: #fff;
  border: 1px solid rgba(23, 62, 54, .04);
  border-radius: 18px;
  box-shadow: 0 6px 16px rgba(35, 57, 43, .06);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
}
.gidsen .seizoen__item:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(35, 57, 43, .10); border-color: rgba(23, 62, 54, .04); }
.gidsen .seizoen__ico {
  grid-row: 1 / span 2; grid-column: 1;
  width: 48px; height: 48px; border-radius: 14px;
  display: grid; place-items: center;
}
.gidsen .seizoen__ico svg { width: 42px; height: 42px; stroke: none; fill: none; }
.gidsen .seizoen__naam {
  grid-column: 2; align-self: end; min-width: 0;
  font-size: .875rem; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--bm-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gidsen .seizoen__vanaf {
  grid-column: 2; align-self: start;
  font-size: .75rem; font-weight: 600; color: var(--bm-leaf);
}
.gidsen__ico--sand  { background: #fff0cf; }
/* Seizoen: foto van het ingrediënt in de tegel */
.gidsen .seizoen__ico--foto { overflow: hidden; background: #f4efe6; }
.gidsen .seizoen__ico--foto img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =====================================================================
   INSCHRIJFBLOK — gratis printable (partials/gratis-printable.php)
   ===================================================================== */
.gratis {
  position: relative; isolation: isolate; overflow: hidden;
  margin: 28px 0;
  padding: 22px 16px 18px;
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 214, 178, .7) 0 22%, transparent 22.5%),
    linear-gradient(160deg, #fff4e8 0%, #fffaf3 55%, #eef5e8 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 16px 36px rgba(35, 57, 43, .10);
  scroll-margin-top: 80px;
}
.gratis__badge {
  display: inline-block; margin: 0 0 12px;
  padding: 5px 12px; border-radius: 12px;
  background: var(--bm-orange); color: #fff;
  font-size: .6875rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(244, 119, 37, .25);
}
.gratis__omslag {
  display: block; width: 100%; height: auto;
  margin: 0 0 16px;
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(35, 57, 43, .14);
}
.gratis__kop {
  margin: 0 0 6px;
  font-size: 1.5rem; line-height: 1.1; letter-spacing: -.04em;
}
.gratis__tekst { margin: 0 0 12px; font-size: .9375rem; line-height: 1.5; color: var(--bm-muted); }
.gratis__punten { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 7px; }
.gratis__punten li {
  display: flex; align-items: center; gap: 9px;
  font-size: .875rem; font-weight: 600; color: var(--bm-ink);
}
.gratis__punten svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--bm-green); }

.gratis__form { display: grid; gap: 10px; }
.gratis__veld { display: grid; gap: 5px; }
.gratis__veld span { font-size: .75rem; font-weight: 600; color: var(--bm-muted); }
.gratis__veld em { font-style: normal; font-weight: 400; }
.gratis__veld input {
  width: 100%; height: 52px; padding: 0 18px;
  font: inherit; font-size: 1rem; color: var(--bm-ink);
  background: #fff; border: 1px solid rgba(23, 62, 54, .08); border-radius: 26px;
  box-shadow: 0 6px 16px rgba(38, 59, 44, .06);
  -webkit-appearance: none; appearance: none;
}
.gratis__veld input:focus {
  outline: none; border-color: rgba(46, 116, 55, .4);
  box-shadow: 0 6px 16px rgba(38, 59, 44, .06), 0 0 0 3px rgba(46, 116, 55, .12);
}
.gratis__veld--maand input { height: 46px; font-size: .9375rem; }
.gratis__knop { width: 100%; min-height: 54px; border-radius: 27px; font-size: 1rem; margin-top: 2px; }
.gratis__klein { margin: 12px 0 0; font-size: .75rem; line-height: 1.5; color: var(--bm-muted); text-align: center; }
.gratis__fout {
  margin: 0 0 10px; padding: 10px 14px; border-radius: 14px;
  background: #fdecec; color: #9a3412; font-size: .875rem; font-weight: 600;
}
.gratis__klaar { display: flex; align-items: center; gap: 12px; }
.gratis__klaar p { margin: 0; font-size: .9375rem; font-weight: 600; line-height: 1.5; color: var(--bm-ink); }
.gratis__klaar-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
}
.gratis__klaar-ico svg { width: 26px; height: 26px; color: var(--bm-green); }

/* Op de homepage staat het blok in een eigen sectie tussen de panelen */
section.section > .wrap > .gratis:first-child { margin-top: 0; margin-bottom: 0; }

/* =====================================================================
   Campagnepagina (/campagne/) — salespage voor Instagram.
   Naar het goedgekeurde salespage-ontwerp, in de huisstijl van de site.
   Altijd één kolom: de site staat ook op desktop in een telefoonkolom.
   ===================================================================== */
.sp, .sp-body { --sp-gutter: 22px; --sp-green: #3f9233; --sp-green2: #58a941; --sp-orange: var(--bm-orange); }
.sp { color: var(--bm-ink); }

/* Schil zonder menu en footerlinks (layouts/campagne.php) */
.sp-top { display: flex; justify-content: center; align-items: center; height: 64px; background: var(--bm-paper, #fffdf9); }
.sp-top img { height: 40px; width: auto; }
.sp-voet { padding: 26px 22px 110px; text-align: center; background: #cfe3bb; font-size: .75rem; line-height: 1.5; color: #2f4a44; }
.sp-voet p { margin: 0 0 6px; }
.sp-voet a { color: inherit; text-decoration: underline; }
.sp-voet__klein { opacity: .8; }

/* Kassa: in de pagina, of met JavaScript als paneel van onderen */
.sp-kassa { background: #fff; border: 1px solid var(--bm-line); border-radius: 22px; padding: 16px; box-shadow: 0 8px 22px rgba(80,48,0,.07); }
.sp-kassa__kop { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sp-kassa__kop img { width: 56px; height: 46px; object-fit: cover; border-radius: 10px; }
.sp-kassa__kop div { flex: 1; line-height: 1.2; }
.sp-kassa__kop strong { display: block; font-size: 1rem; }
.sp-kassa__kop span { color: var(--sp-orange); font-weight: 700; }
.sp-kassa__kop s { color: var(--bm-muted); font-weight: 400; font-size: .8rem; }
.sp-kassa__dicht { display: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--bm-page); font-size: 1.5rem; line-height: 1; color: var(--bm-ink); cursor: pointer; }
.sp-bestel__knop { display: none; }
.js .sp-bestel__knop { display: flex; }
.js [data-kassa-paneel]:not(.is-open) { display: none; }
.sp-kassa.is-open {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; max-width: var(--wrap); margin-inline: auto;
  border-radius: 24px 24px 0 0; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  max-height: 92vh; overflow-y: auto; box-shadow: 0 -10px 40px rgba(23,62,54,.22);
  animation: sp-omhoog .22s ease-out;
}
.sp-kassa.is-open .sp-kassa__dicht { display: grid; place-items: center; }
.sp-achter { position: fixed; inset: 0; z-index: 60; background: rgba(23,62,54,.45); }
.sp-achter[hidden] { display: none; }
html.sp-vast, html.sp-vast body { overflow: hidden; }
@keyframes sp-omhoog { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sp-kassa.is-open { animation: none; } }
.sp-hart { color: var(--sp-orange); font-weight: 400; white-space: nowrap; }
.sp-h2 { font-size: 1.7rem; line-height: 1.08; letter-spacing: -.03em; font-weight: 700; margin: 0 0 16px; color: var(--bm-ink); }
.sp-sub { margin: -8px 0 14px; color: var(--bm-muted); font-size: .9rem; }

/* ---- hero */
.sp-hero { padding: 20px var(--sp-gutter) 18px; background: linear-gradient(180deg, #fff9ef 0, #fff7e9 70%, var(--bm-page) 100%); }
.sp-eyebrow {
  display: inline-block; background: var(--sp-orange); color: #fff; font-weight: 700; font-size: .85rem;
  padding: 6px 14px; border-radius: 20px; transform: rotate(-2deg); box-shadow: 0 4px 12px rgba(244,119,37,.25);
}
.sp-h1 { font-size: clamp(2.35rem, 11vw, 2.9rem); line-height: .98; letter-spacing: -.045em; font-weight: 700; margin: 14px 0 12px; color: var(--bm-ink); }
.sp-h1 em { font-style: normal; color: var(--sp-orange); }
.sp-lead { font-size: 1rem; line-height: 1.5; margin: 0 0 6px; color: var(--bm-ink); }
.sp-hero__foto { position: relative; margin: 10px calc(-1 * var(--sp-gutter)) 16px; height: 380px; overflow: hidden; }
.sp-hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 30%; display: block; }
.sp-hero__foto::after { content: ""; position: absolute; inset: auto 0 0 0; height: 70px; background: linear-gradient(180deg, rgba(255,250,242,0), var(--bm-page)); }
.sp-badge {
  position: absolute; left: 16px; bottom: 26px; z-index: 1; width: 138px; height: 138px; border-radius: 50%;
  background: var(--sp-orange); color: #fff; border: 3px solid #fff; transform: rotate(-6deg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  box-shadow: 0 10px 24px rgba(164, 59, 34, .25);
}
.sp-badge small { font-weight: 700; font-size: .78rem; line-height: 1.1; }
.sp-badge strong { font-size: 2rem; line-height: 1.05; letter-spacing: -.03em; }
.sp-badge s { font-size: .72rem; opacity: .9; }

.sp-cta {
  display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 60px;
  background: linear-gradient(180deg, var(--sp-green2), var(--sp-green)); color: #fff; text-decoration: none;
  border: 0; border-radius: 30px; padding: 14px 22px; font-family: inherit; font-size: 1.08rem; font-weight: 700; line-height: 1.2; cursor: pointer;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(63,146,51,.28);
}
.sp-cta svg { width: 20px; height: 20px; }
.sp-cta:hover { filter: brightness(1.04); }
.sp-micro { display: flex; justify-content: center; gap: 26px; margin: 14px 0 18px; }
.sp-micro span { display: flex; align-items: center; gap: 7px; font-weight: 700; color: var(--bm-ink); }
.sp-micro svg { width: 22px; height: 22px; color: var(--sp-green); flex: none; }
.sp-micro small { font-size: .7rem; line-height: 1.2; }

.sp-usp { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid #eee0d0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.sp-usp li { display: flex; flex-direction: column; align-items: center; }
.sp-usp__ico { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; margin-bottom: 7px; box-shadow: 0 4px 12px rgba(35,57,43,.07); }
.sp-usp li .sp-usp__ico svg { width: 44px; height: 44px; }
.sp-usp b { font-size: .85rem; line-height: 1.1; }
.sp-usp small { font-size: .68rem; color: var(--bm-muted); margin-top: 4px; }
.sp-toon--peach { background: var(--bm-peach); } .sp-toon--sage { background: var(--bm-sage); } .sp-toon--blue { background: var(--bm-blue); }

/* ---- secties */
.sp-sectie { padding: 30px var(--sp-gutter); }
.sp-sectie--zacht { background: #fff; border-radius: 28px 28px 0 0; }
.sp-kaart {
  display: grid; grid-template-columns: 44% 1fr; gap: 12px; align-items: center; margin: 12px 0;
  background: #fffdf9; border: 1px solid var(--bm-line); border-radius: 20px; padding: 10px;
  box-shadow: 0 6px 16px rgba(80,48,0,.06);
}
.sp-kaart img { width: 100%; height: 150px; object-fit: cover; border-radius: 14px; display: block; }
.sp-kaart h3 { font-size: 1.08rem; line-height: 1.1; margin: 4px 0 8px; color: var(--bm-ink); }
.sp-vink { list-style: none; margin: 0 0 6px; padding: 0; font-size: .8rem; line-height: 1.4; color: #214e49; }
.sp-vink li { position: relative; padding-left: 16px; margin: 2px 0; }
.sp-vink li::before { content: "✓"; position: absolute; left: 0; color: var(--sp-green); font-weight: 700; }
.sp-kaart__los { font-size: .75rem; color: var(--bm-muted); }
.sp-som { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; background: var(--bm-peach); border-radius: 18px; padding: 14px 16px; }
.sp-som span { color: var(--bm-muted); font-size: .9rem; }
.sp-som strong { font-size: 1.25rem; }

.sp-inkijk { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 10px; margin: 0 calc(-1 * var(--sp-gutter)); padding-inline: var(--sp-gutter); }
.sp-inkijk figure { flex: 0 0 82%; scroll-snap-align: center; margin: 0; background: var(--bm-page); border: 1px solid var(--bm-line); border-radius: 18px; padding: 10px; box-shadow: 0 6px 16px rgba(80,48,0,.06); }
.sp-inkijk img { width: 100%; height: auto; border-radius: 10px; display: block; background: #fff; }
.sp-inkijk figcaption { font-size: .8rem; line-height: 1.35; margin: 8px 2px 2px; color: var(--bm-ink); font-weight: 600; }

/* ---- waarom */
.sp-waarom { padding: 30px var(--sp-gutter); background: linear-gradient(180deg, #edf6e5, #f7f8e9); }
.sp-waarom__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-waarom__grid div { background: rgba(255,255,255,.75); border-radius: 18px; text-align: center; padding: 16px 10px; }
.sp-waarom__grid span { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border-radius: 50%; background: #fff; color: var(--sp-orange); }
.sp-waarom__grid span svg { width: 22px; height: 22px; }
.sp-waarom__grid b { display: block; font-size: .88rem; line-height: 1.15; }
.sp-waarom__grid small { display: block; font-size: .72rem; margin-top: 5px; color: var(--bm-muted); }
.sp-cijfers { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-cijfers li { background: #fff; border-radius: 16px; padding: 12px 14px; }
.sp-cijfers strong { display: block; font-size: 1.35rem; letter-spacing: -.02em; }
.sp-cijfers span { font-size: .75rem; color: var(--bm-muted); }

/* ---- bestellen */
.sp-bestel { padding: 32px var(--sp-gutter); background: #fffaf2; border-top: 1px solid #f0e4d5; border-bottom: 1px solid #f0e4d5; }
.sp-bestel__voor { margin: 0; }
.sp-bestel__prijs { display: flex; align-items: baseline; gap: 12px; margin: 6px 0 14px; }
.sp-bestel__prijs span { font-size: 3.2rem; font-weight: 700; color: var(--sp-orange); line-height: 1; letter-spacing: -.04em; }
.sp-bestel__prijs s { color: var(--bm-muted); }
.sp-check { list-style: none; padding: 0; margin: 0 0 18px; }
.sp-check li { margin: 9px 0; font-size: .92rem; display: flex; align-items: center; gap: 10px; }
.sp-check li::before { content: "✓"; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; background: var(--sp-green); color: #fff; border-radius: 50%; font-weight: 700; font-size: .8rem; }
.sp-form { display: grid; gap: 12px; }
.sp-veld { display: grid; gap: 5px; font-size: .85rem; font-weight: 600; }
.sp-veld em { font-weight: 400; color: var(--bm-muted); }
.sp-veld input { width: 100%; min-height: 52px; border-radius: 16px; border: 1px solid #e6dccd; background: #fff; padding: 0 16px; font: inherit; font-size: 1rem; }
.sp-veld input:focus { outline: 2px solid var(--sp-green); outline-offset: 1px; }
.sp-veld small { font-weight: 400; color: var(--bm-muted); font-size: .75rem; }
.sp-akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: .78rem; line-height: 1.45; color: var(--bm-muted); }
.sp-akkoord input { width: 20px; height: 20px; flex: none; margin-top: 1px; accent-color: var(--sp-green); }
.sp-akkoord a { color: var(--bm-green); text-decoration: underline; }
.sp-paytrust { display: flex; justify-content: space-around; gap: 8px; font-size: .72rem; margin: 16px 0 12px; color: #355c56; }
.sp-paytrust span { display: inline-flex; align-items: center; gap: 5px; }
.sp-paytrust svg { width: 15px; height: 15px; color: var(--sp-green); }
.sp-betaal { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid #eee0d4; padding-top: 14px; }
.sp-betaal b { font-size: .78rem; background: #fff; border: 1px solid var(--bm-line); border-radius: 8px; padding: 5px 10px; }

/* ---- faq */
.sp-faq details { background: #fff; border: 1px solid var(--bm-line); border-radius: 16px; margin: 9px 0; padding: 0 16px; }
.sp-faq summary { list-style: none; cursor: pointer; padding: 14px 26px 14px 0; font-size: .92rem; font-weight: 700; position: relative; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 1.4rem; color: var(--sp-orange); }
.sp-faq details[open] summary::after { content: "–"; }
.sp-faq p { font-size: .88rem; line-height: 1.5; margin: 0 0 14px; color: var(--bm-muted); }
.sp-faq a { color: var(--bm-green); text-decoration: underline; }

/* ---- gratis */
.sp-gratis { padding: 30px var(--sp-gutter) 36px; text-align: center; background: linear-gradient(180deg, #eef6e6, #dfeecf); }
.sp-gratis > img { width: 82%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 22px; margin: 0 auto 18px; display: block; box-shadow: 0 10px 24px rgba(35,57,43,.12); }
.sp-gratis__label { display: block; font-size: .72rem; font-weight: 700; color: #5b7b55; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.sp-gratis > p { font-size: .95rem; line-height: 1.45; margin: 0 0 16px; }
.sp-gratis .sp-form { text-align: left; }
.sp-outline {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px;
  border: 2px solid var(--sp-green); color: var(--sp-green); background: #fffdf8; border-radius: 28px;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.sp-outline svg { width: 18px; height: 18px; }
.sp-outline:hover { background: #fff; }
.sp-klein { font-size: .72rem; color: #5b7b55; margin: 12px 0 0; }
.sp-fout { background: #fff1e3; color: #9a3d0e; border-radius: 12px; padding: 10px 12px; font-size: .85rem; }
.sp-gratis__klaar { display: flex; gap: 12px; align-items: center; text-align: left; background: #fff; border-radius: 18px; padding: 16px; }
.sp-gratis__klaar span { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sp-green); color: #fff; display: grid; place-items: center; }
.sp-gratis__klaar svg { width: 20px; height: 20px; }
.sp-gratis__klaar p { margin: 0; font-weight: 600; }

/* ---- vaste koopbalk */
.sp-balk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; max-width: var(--wrap); margin-inline: auto;
  display: flex; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 24px rgba(30,59,44,.14);
}
.sp-balk[hidden] { display: none; }
.sp-balk img { width: 52px; height: 44px; object-fit: cover; border-radius: 10px; }
.sp-balk div { flex: 1; line-height: 1.1; }
.sp-balk small { display: block; font-size: .75rem; color: var(--bm-muted); }
.sp-balk strong { font-size: 1.25rem; color: var(--sp-orange); }
.sp-balk a {
  display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(180deg, var(--sp-green2), var(--sp-green));
  color: #fff; text-decoration: none; font-weight: 700; border-radius: 26px; padding: 12px 18px;
}
.sp-balk a svg { width: 16px; height: 16px; }


/* ---- pakketkeuze in de kassa (upgrade naar het hele eerste jaar) */
.sp-keuze { border: 0; margin: 0 0 4px; padding: 0; display: grid; gap: 10px; }
.sp-keuze legend { font-size: .85rem; font-weight: 600; margin-bottom: 8px; padding: 0; }
.sp-optie { position: relative; display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: start;
  padding: 14px; border: 1.5px solid #e6dccd; border-radius: 16px; background: #fff; cursor: pointer; transition: border-color .15s, background .15s; }
.sp-optie input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--sp-green); }
.sp-optie:has(input:checked) { border-color: var(--sp-green); background: #f5faf2; box-shadow: 0 0 0 3px rgba(63,146,51,.14); }
.sp-optie:has(input:focus-visible) { outline: 2px solid var(--sp-green); outline-offset: 2px; }
.sp-optie__tekst { display: grid; gap: 3px; line-height: 1.25; }
.sp-optie__tekst strong { font-size: .98rem; color: var(--bm-ink); }
.sp-optie__tekst small { font-size: .78rem; color: var(--bm-muted); }
.sp-optie__label { justify-self: start; font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--sp-orange); border-radius: 999px; padding: 3px 9px; margin-bottom: 2px; }
.sp-optie__lijst { display: grid; gap: 3px; margin-top: 4px; font-size: .78rem; color: var(--bm-muted); }
.sp-optie__lijst span { display: flex; gap: 6px; align-items: flex-start; }
.sp-optie__lijst svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--sp-green); }
.sp-optie__prijs { font-weight: 700; color: var(--bm-ink); text-align: right; white-space: nowrap; line-height: 1.2; }
.sp-optie__prijs s { display: block; font-size: .75rem; font-weight: 400; color: var(--bm-muted); }

/* ---- inhoudskaarten met het echte productbeeld: beeld boven, tekst eronder */
.sp-kaart--beeld { grid-template-columns: 1fr; gap: 10px; align-items: start; padding: 8px 8px 12px; }
.sp-kaart--beeld img { height: auto; aspect-ratio: 5 / 3; object-fit: cover; border-radius: 14px; background: var(--bm-peach); }
.sp-kaart--beeld > div { padding: 0 8px; }
.sp-kaart__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 2px 0 6px; }
.sp-kaart__kop h3 { margin: 0; }
.sp-kaart__kop .sp-kaart__los { white-space: nowrap; }

/* ---- generator zonder AI: bestaande recepten */
.gen-match__kop { font-size: 1.2rem; margin: 0 0 .75rem; }
.gen-match { display: grid; gap: .75rem; }
.gen-match__item { display: grid; grid-template-columns: 96px 1fr; gap: .8rem; align-items: center; padding: .6rem; border: 1px solid var(--c-line, #eadfce);
  border-radius: 16px; background: #fff; text-decoration: none; color: inherit; }
.gen-match__item:hover { border-color: var(--c-green-700, #3f9233); }
.gen-match__item img { width: 96px; height: 72px; object-fit: cover; border-radius: 12px; background: #f6efe4; }
.gen-match__tekst { display: grid; gap: 2px; line-height: 1.3; }
.gen-match__tekst strong { font-size: .98rem; }
.gen-match__tekst small { font-size: .78rem; color: var(--c-ink-soft, #6b6b6b); }
.gen-match__raakt { color: var(--c-green-700, #3f9233) !important; }
.gen-leeg { padding: 1rem 1.1rem; border-radius: 16px; background: #fff6ec; border: 1px solid #f5d9bb; }
.gen-leeg p { margin: .5rem 0; }
.gen-leeg .btn { margin-top: .4rem; }

/* ---- kassa overal op de site (partials/kassa.php): eigen variabelen,
        want buiten de campagnepagina is er geen .sp-ouder */
.sp-kassa, .sp-achter { --sp-green: #3f9233; --sp-green2: #58a941; --sp-orange: var(--bm-orange); color: var(--bm-ink); }
.sp-kassa { text-align: left; margin: 16px 0; }
.sp-kassa.is-open { margin: 0 auto; }
.sp-kassa__inhoud { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .82rem; color: var(--bm-muted); }
.sp-kassa__inhoud li { display: flex; gap: 6px; align-items: flex-start; }
.sp-kassa__inhoud svg, .sp-optie__lijst svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--sp-green); }
.sp-optie__prijs s { display: block; font-size: .75rem; font-weight: 400; color: var(--bm-muted); }
/* aanbodblok: tweede knop als tekstlink */
.offer__cta-rij { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.offer__meer { font-size: .9rem; color: var(--bm-ink); text-decoration: underline; text-underline-offset: 3px; }
button.offer__upgrade { width: 100%; text-align: left; font: inherit; cursor: pointer; }
.checkout__open { display: none; }
.js .checkout__open { display: inline-flex; }
/* Kassa boven de vaste kop en balken van de site */
.sp-kassa.is-open { z-index: 130; }
.sp-achter { z-index: 120; }

/* ---- kassa op mobiel: uitlijning en ruimte (iPhone-werkbalken) */
/* Opties: titel en prijs op één regel, de lijst eronder over de volle breedte */
.sp-optie { grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
.sp-optie > input { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
.sp-optie__tekst { display: contents; }
.sp-optie__tekst > strong { grid-column: 2; line-height: 1.25; }
.sp-optie__label { grid-column: 2 / 4; grid-row: 1; margin-bottom: 4px; }
.sp-optie--groot > input, .sp-optie--groot .sp-optie__prijs { grid-row: 2; }
.sp-optie--groot .sp-optie__tekst > strong { grid-row: 2; }
.sp-optie__prijs { grid-column: 3; grid-row: 1; align-self: center; }
.sp-optie__lijst { grid-column: 2 / 4; margin-top: 6px; }

/* Paneel: past tussen de adresbalk en de werkbalk van Safari (dvh), en
   loopt onderaan door, zodat de pagina er nooit onderdoor zichtbaar is */
.sp-kassa.is-open { max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); overscroll-behavior: contain;
  padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.sp-kassa.is-open::after { content: ""; position: fixed; left: 0; right: 0; bottom: -120px; height: 120px; background: #fff; }
.sp-achter { top: -120px; bottom: -120px; }

/* ---- kassa als paneel: alles in één scherm, betaalknop altijd in beeld */
.sp-kassa.is-open { padding-top: 12px; }
.sp-kassa.is-open .sp-kassa__kop { margin-bottom: 10px; }
.sp-kassa.is-open .sp-form { gap: 10px; }
.sp-kassa.is-open .sp-keuze { gap: 8px; }
.sp-kassa.is-open .sp-keuze legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sp-kassa.is-open .sp-optie { padding: 11px 12px; }
/* Niet-gekozen optie: de inhoud op één regel */
.sp-kassa.is-open .sp-optie:not(:has(input:checked)) .sp-optie__lijst {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.sp-kassa.is-open .sp-optie:not(:has(input:checked)) .sp-optie__lijst span { display: inline; }
.sp-kassa.is-open .sp-optie:not(:has(input:checked)) .sp-optie__lijst span + span::before { content: " · "; }
.sp-kassa.is-open .sp-optie:not(:has(input:checked)) .sp-optie__lijst svg { display: none; }
.sp-kassa.is-open .sp-kassa__inhoud { display: none; }
.sp-kassa.is-open .sp-veld small { display: none; }
.sp-kassa.is-open .sp-veld input { min-height: 48px; }
.sp-kassa.is-open .sp-akkoord { font-size: .74rem; line-height: 1.35; gap: 8px; }
/* Betaalknop plakt onderin het paneel; wit eromheen zodat er niets doorheen schijnt */
.sp-kassa.is-open [data-sp-betaal] {
  position: sticky; bottom: 6px; z-index: 2; margin-top: 4px;
  box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(63,146,51,.28), 0 -14px 0 6px #fff, 0 14px 0 6px #fff;
}
.sp-kassa.is-open .sp-kassa__kop img { width: 48px; height: 40px; }
.sp-kassa.is-open .sp-kassa__kop strong { font-size: .95rem; }
.sp-kassa.is-open .sp-optie { padding: 10px 12px; }
.sp-kassa.is-open .sp-optie__label { margin-bottom: 2px; }
.sp-kassa.is-open .sp-optie__lijst { gap: 1px; }
.sp-kassa.is-open .sp-veld { gap: 4px; }
.sp-kassa.is-open .sp-veld input { min-height: 46px; }
.sp-kassa.is-open .sp-akkoord { font-size: .72rem; }
.sp-kassa.is-open [data-sp-betaal] { min-height: 54px; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 10px 22px rgba(63,146,51,.28), 0 -10px 0 4px #fff, 0 10px 0 4px #fff; }
.sp-kassa.is-open .sp-paytrust { margin-top: 12px; }

/* ---- vertrouwen onder de betaalknop: rustig, geen knoppen */
.sp-vertrouwen { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px;
  margin-top: 14px; font-size: .74rem; color: var(--bm-muted); text-align: center; }
.sp-vertrouwen__regel { display: inline-flex; align-items: center; gap: 5px; }
.sp-vertrouwen__regel svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.sp-vertrouwen__logos { display: inline-flex; align-items: center; gap: 6px; }
.sp-vertrouwen__logos img { height: 18px; width: auto; opacity: .85; }
.sp-vertrouwen__regel--klein { flex-basis: 100%; justify-content: center; font-size: .7rem; }

/* ---- kassa: verkoopversie (één scherm, één beslissing, één knop) */
.sp-kassa__kop { justify-content: space-between; }
.sp-kassa__titel { font-size: 1.15rem; font-weight: 700; color: var(--bm-ink); letter-spacing: -.01em; }
.sp-kassa.is-open .sp-kassa__titel { font-size: 1.1rem; }
.sp-kassa__product { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center;
  padding: 12px 14px; border: 1.5px solid var(--sp-green); border-radius: 16px; background: #f5faf2; }
.sp-kassa__product-tekst { display: grid; gap: 2px; line-height: 1.25; }
.sp-kassa__product-tekst strong { font-size: .98rem; }
.sp-kassa__product-tekst small { font-size: .78rem; color: var(--bm-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-veld > span em { font-style: normal; font-weight: 400; color: var(--bm-muted); font-size: .78rem; }
.sp-kassa__voorwaarden { margin: 2px 0 0; text-align: center; font-size: .7rem; color: var(--bm-muted); }
.sp-kassa__voorwaarden a { color: inherit; text-decoration: underline; }
.sp-vertrouwen { margin-top: 10px; }
.sp-kassa.is-open [data-sp-betaal] { box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 18px rgba(63,146,51,.25), 0 -10px 0 4px #fff; }
.sp-kassa__voorwaarden { margin-top: 8px; }

/* ---- campagne: product en koopknop in het eerste scherm */
.sp-hero { padding-top: 14px; }
.sp-hero .sp-eyebrow { font-size: .78rem; padding: 5px 12px; }
.sp-hero .sp-h1 { font-size: clamp(1.85rem, 8.6vw, 2.3rem); line-height: 1.04; letter-spacing: -.035em; margin: 10px 0 8px; }
.sp-hero .sp-lead { font-size: .95rem; line-height: 1.45; }
.sp-hero__foto--product { height: auto; margin: 8px -8px 12px; overflow: visible; }
.sp-hero__foto--product img { height: auto; object-fit: contain; border-radius: 18px; }
.sp-hero__foto--product::after { display: none; }
.sp-hero__foto--product .sp-badge { width: 96px; height: 96px; left: auto; right: 2px; bottom: -14px; border-width: 2px; }
.sp-hero__foto--product .sp-badge small { font-size: .58rem; }
.sp-hero__foto--product .sp-badge strong { font-size: 1.25rem; }
.sp-hero__foto--product .sp-badge s { font-size: .58rem; }

/* ---- campagne: "Waarom ouders kiezen voor BabyMaaltje" (ontwerp van Kay) */
.sp-waarom .sp-h2 { margin-bottom: 6px; }
.sp-waarom__sub { margin: 0 0 18px; color: var(--bm-muted); font-size: 1rem; }
.sp-redenen { list-style: none; margin: 0; padding: 4px 18px; background: #fff; border-radius: 20px;
  box-shadow: 0 6px 18px rgba(80,48,0,.05); }
.sp-redenen li { display: flex; align-items: center; gap: 16px; padding: 14px 0; }
.sp-redenen li + li { border-top: 1px solid #efece5; }
.sp-redenen__ico { flex: none; width: 56px; height: 56px; border-radius: 14px; background: #eef4ea; display: grid; place-items: center; }
.sp-redenen__ico svg { width: 30px; height: 30px; fill: none; stroke: #173e36; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sp-redenen__ico svg .o { stroke: var(--bm-orange); }
.sp-redenen b { display: block; font-size: 1.02rem; color: var(--bm-ink); line-height: 1.2; }
.sp-redenen small { display: block; margin-top: 3px; font-size: .86rem; color: var(--bm-muted); line-height: 1.35; }
.sp-bewijs { display: grid; grid-template-columns: 1fr 1fr; margin-top: 14px; padding: 18px 8px; border-radius: 20px; background: #eef4ea; text-align: center; }
.sp-bewijs--een { grid-template-columns: 1fr; }
.sp-bewijs__vak { display: grid; justify-items: center; align-content: center; gap: 2px; padding: 0 8px; }
.sp-bewijs__vak + .sp-bewijs__vak { border-left: 1px solid #d6e3d1; }
.sp-bewijs__vak strong { font-size: 1.9rem; line-height: 1.05; letter-spacing: -.02em; color: var(--bm-ink); }
.sp-bewijs__vak .sp-bewijs__groot { font-size: 2.3rem; }
.sp-bewijs__vak b { font-size: .92rem; color: var(--bm-ink); }
.sp-bewijs__vak small { font-size: .78rem; color: var(--bm-muted); }
.sp-sterren { position: relative; display: inline-block; font-size: 1.05rem; letter-spacing: 3px; color: #f1d7c2; line-height: 1; margin-bottom: 4px; }
.sp-sterren__vol { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: var(--bm-orange); }
.sp-waarom { background: var(--bm-page); }
.sp-redenen__ico { width: 58px; height: 58px; } .sp-redenen__ico svg { width: 34px; height: 34px; }

/* ---- campagne-hero: kop, drie vinkjes, badge en scheidingslijn (ontwerp okt) */
.sp-hero .sp-h1 { font-size: clamp(1.75rem, 8.3vw, 2.5rem); line-height: 1.02; letter-spacing: -.04em; margin: 14px 0 12px; }
.sp-hero .sp-h1 em { display: block; }
.sp-hero__kop { font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; color: var(--bm-ink); margin: 0 0 8px; }
.sp-hero__vink { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 6px; }
.sp-hero__vink li { position: relative; padding-left: 30px; font-size: .92rem; line-height: 1.35; color: var(--bm-ink); }
.sp-hero__vink li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px; border-radius: 50%;
  background: var(--sp-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.sp-hero__foto--product { margin: 14px -6px 14px; }
.sp-hero__foto--product .sp-badge { width: 92px; height: 92px; right: -2px; bottom: -6px; border-width: 3px; transform: rotate(-4deg); }
.sp-hero .sp-klein { margin: 8px 0 0; }
.sp-hero .sp-usp { border-top: 1px solid rgba(31, 61, 51, .12); padding-top: 18px; }
.sp-hero .sp-usp small { font-size: .66rem; letter-spacing: -.01em; }
@media (min-width: 375px) {
  .sp-hero .sp-usp { margin: 0 -10px; padding-left: 10px; padding-right: 10px; gap: 0; }
  .sp-hero .sp-usp small { white-space: nowrap; }
}
/* Koopbalk: duimnagel als boekje (voorkant Eerste 30 hapjes) */
.sp-balk img { width: 46px; height: 54px; object-fit: cover; border-radius: 7px; border: 2px solid #fff; box-shadow: 0 3px 10px rgba(35,57,43,.18); transform: rotate(-3deg); flex: none; }