/* Scrubskin (20 okt 2026, Lars). Laadt alleen als Kernel\Skin "scrub" zegt:
   op /scrub, de scrub-PDP en alle pagina's die de bezoeker daarna opent. De
   kleuren komen van het potje: mint #C9FFF7 en lavendel #B8ADFF, met zwarte
   letters. Allebei te licht voor witte tekst, dus knoppen zijn lavendel met
   donkere letters (11:1), en tekstaccenten gebruiken een diepere violet die op
   wit 6:1 haalt. Alleen tokens en een paar componenten die een kleur hard in
   zich hebben; de rest volgt vanzelf uit tokens.css. */
:root[data-skin="scrub"] {
  --mint:        #C9FFF7;
  --lavender:    #B8ADFF;

  --terracotta:        #5B4FCF;  /* tekstaccenten, links, prijzen: violet, 6:1 op wit */
  --terracotta-strong: #4A3FB8;
  --terracotta-soft:   #D4CEFF;
  --terracotta-wash:   #F1EEFF;

  --plum:        #1E1A3A;  /* koppen en footer: inktviolet */
  --plum-soft:   #5B4FCF;
  --plum-wash:   #F1EEFF;

  --cream-deep:  #EEFFFC;  /* sectie-achtergrond: een vleugje mint */
  --ink:         #1B1A24;
  --muted:       #565470;
  --line:        #E2E0F0;

  --sage:        #17786A;  /* vinkjes en "op voorraad": diep mint, 5,3:1 op wit */
  --gold:        #B8ADFF;  /* vlaggetjes ("Bespaar"), zachte accenten */
  --promo:       #C9FFF7;
  --promo-strong:#B8ADFF;
  --promo-ink:   #1E1A3A;

  --shadow-sm:   0 4px 14px -8px rgba(30, 26, 58, .25);
  --shadow:      0 16px 36px -22px rgba(30, 26, 58, .38);
  --shadow-lift: 0 24px 50px -26px rgba(30, 26, 58, .42);
}

/* Woordmerk zwart zoals op het potje; in de footer mint. */
[data-skin="scrub"] .wordmark { color: #14122A; }
[data-skin="scrub"] .site-footer .wordmark { color: var(--mint); }

/* Knoppen: lavendel met donkere letters. */
[data-skin="scrub"] .btn { background: var(--lavender); color: var(--plum); }
[data-skin="scrub"] .btn:hover { background: #A79BFA; color: var(--plum); }
[data-skin="scrub"] .btn--ghost { background: transparent; color: var(--plum); }
[data-skin="scrub"] .btn--ghost:hover { background: var(--plum); color: #fff; }
[data-skin="scrub"] .btn--plum { background: var(--plum); color: #fff; }
[data-skin="scrub"] .btn[disabled] { background: var(--line); color: var(--muted); }
[data-skin="scrub"] .btn--whatsapp { background: #fff; color: var(--plum); }

/* Geselecteerde bundel: lavendel rand, mint gloed. */
[data-skin="scrub"] .bundle.is-active,
[data-skin="scrub"] .hh-bundle.is-featured { border-color: var(--lavender); box-shadow: 0 0 0 3px var(--mint); }
[data-skin="scrub"] .bundle.is-active .bundle__radio { border-color: var(--terracotta); background: var(--terracotta); }
[data-skin="scrub"] .hh-bundle:hover { border-color: var(--lavender); }

/* Vinkjes in de hero: het olijf zat hard in het svg'tje. */
[data-skin="scrub"] .hh-ticks li::before { background: var(--mint)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1A3A' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 10px no-repeat; }
[data-skin="scrub"] .hh-steps li::before { background: var(--mint); color: var(--plum); }

/* Hero: mint vlak met de lavendel krul van het etiket. Het accentwoord krijgt
   een markeerstreep in plaats van een kleur, zoals de banen op het potje. */
.sc-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, #EEFFFC 0%, #fff 100%); }
/* Alleen vanaf tablet: op een telefoon zou de krul achter de lopende tekst staan. */
.sc-hero::before { content: none; }
@media (min-width: 900px) {
.sc-hero::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 46vmax; height: 46vmax; right: -16vmax; top: 18%; border-radius: 50%;
  border: 6vmax solid var(--lavender); opacity: .35; }
}
.sc-hero .container { position: relative; z-index: 1; }
[data-skin="scrub"] .hh-hero__title em { color: inherit;
  background: linear-gradient(transparent 58%, var(--mint) 58%, var(--mint) 92%, transparent 92%); padding-inline: .06em; }
.sc-hero .hh-hero__media { background: #EEF0F3; }

/* Waarom-blok en footer: inktviolet met lavendel accenten. */
[data-skin="scrub"] .section--plum .usp::before { background: var(--mint); }
[data-skin="scrub"] .hh-eyebrow--light,
[data-skin="scrub"] .footer-brand .footer-tagline { color: var(--lavender); }

/* Twee bundels in plaats van drie: gecentreerd, niet op een driekoloms raster. */
@media (min-width: 760px) { .hh-bundles--2 { grid-template-columns: repeat(2, 1fr); max-width: 660px; } }

/* Afrekenpagina zonder header: dezelfde knoppen en accenten. */
[data-skin="scrub"] .co-body { background: #fff; }