/* ============================================================
   Sprankelstof — sprankelstof.nl
   Mobile-first. De basisregels gelden voor de telefoon; verderop
   staan de uitzonderingen voor tablet (600px) en desktop (960px).
   ============================================================ */

/* ---------- Lettertypes (staan in assets/fonts/) ---------- */

@font-face {
  font-family: 'Baloo 2';
  src: url('../assets/fonts/baloo2-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Nunito is een variabel lettertype: één bestand voor alle dikten. */
@font-face {
  font-family: 'Nunito';
  src: url('../assets/fonts/nunito-var.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Kleuren en maten ---------- */

:root {
  /* Palet, rechtstreeks overgenomen uit de illustratie van Sprankeltje. */
  --creme:       #FFF4E6;
  --creme-diep:  #FBE7CE;
  --perzik:      #FBD3A9;
  --goud:        #F5A93B;
  --goud-licht:  #FFC94D;
  --roze:        #F9C6D3;
  --roze-diep:   #EE9CB4;
  --lila:        #CDB8F0;
  --lila-diep:   #8B6BC4;
  --nacht:       #3E2A73;
  --nacht-diep:  #2C1D53;

  --inkt:        #3E2A73;   /* tekst op lichte vlakken */
  --inkt-licht:  #FFF4E6;   /* tekst op donkere vlakken */

  --font-kop:   'Baloo 2', 'Trebuchet MS', system-ui, sans-serif;
  --font-tekst: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:      1120px;
  --wrap-smal:  680px;
  --ruimte:     clamp(3.5rem, 9vw, 6.5rem);   /* verticale ruimte per sectie */
  --rond:       1.5rem;
}

/* ---------- Basis ---------- */

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

/* Het hidden-attribuut moet het altijd winnen van display-regels
   zoals display: flex, anders blijft een verborgen element staan. */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  /* Ankerlinks stoppen onder de vaste balk in plaats van eronder. */
  scroll-padding-top: 5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--font-tekst);
  font-size: 1.0625rem;
  line-height: 1.7;
  overflow-x: hidden;   /* de decoratieve vormen mogen nooit horizontaal scrollen */
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--font-kop);
  font-weight: 700;
  line-height: 1.05;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(3rem, 15vw, 5.5rem); }
h2 { font-size: clamp(2rem, 8vw, 3.25rem); }
h3 { font-size: clamp(1.25rem, 4.5vw, 1.5rem); }

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

/* Kleine kop boven een titel, zoals de labels in de referenties. */
.kop-boven {
  font-family: var(--font-kop);
  font-size: .8125rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--lila-diep);
  margin-bottom: .75rem;
}

.lead { font-size: 1.1875rem; }
.midden { text-align: center; }
.zacht-uit { opacity: .75; font-size: .9375rem; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.wrap.smal { max-width: var(--wrap-smal); }

.svg-opslag { position: absolute; width: 0; height: 0; overflow: hidden; }

.visueel-verborgen {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 100;
  background: var(--nacht);
  color: var(--inkt-licht);
  padding: .75rem 1.25rem;
  border-radius: 0 0 var(--rond) 0;
  text-decoration: none;
}
.skip-link:focus { left: 0; top: 0; }

:focus-visible {
  outline: 3px solid var(--lila-diep);
  outline-offset: 3px;
  border-radius: 4px;
}
.sectie--nacht :focus-visible,
.site-footer :focus-visible { outline-color: var(--goud-licht); }

/* ---------- Knoppen ---------- */

.knop {
  display: inline-block;
  font-family: var(--font-kop);
  font-size: 1.0625rem;
  line-height: 1;
  padding: .95rem 1.6rem;
  border-radius: 999px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.knop:hover { transform: translateY(-2px); }
.knop--klein { padding: .6rem 1.1rem; font-size: .9375rem; }

.knop--goud { background: var(--goud); color: var(--nacht); border-color: var(--goud); }
.knop--goud:hover { background: var(--goud-licht); border-color: var(--goud-licht); }

.knop--roze { background: var(--roze-diep); color: var(--nacht); border-color: var(--roze-diep); }
.knop--roze:hover { background: var(--roze); border-color: var(--roze); }

.knop--lijn { border-color: currentColor; }
.knop--lijn:hover { background: var(--nacht); color: var(--creme); border-color: var(--nacht); }
.sectie--nacht .knop--lijn:hover { background: var(--creme); color: var(--nacht); border-color: var(--creme); }

/* Uitgeschakelde knop: blijft zichtbaar maar is niet te gebruiken. */
.knop--uit {
  background: transparent;
  border-color: rgba(62, 42, 115, .3);
  color: rgba(62, 42, 115, .55);
  pointer-events: none;
  cursor: default;
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* ---------- Testbalk ----------
   Alleen tijdens het testen met de Stripe-sandbox. Bewust NIET in het
   palet van de site, zodat hij opvalt in plaats van erbij past.

   WEGHALEN VOOR JE OPENGAAT: verwijder op elke pagina de regel die
   begint met <div class="testbalk">, en deze regels hier mogen dan
   ook weg. Zoek op TESTLINK om de bijbehorende knoppen te vinden. */

.testbalk {
  background: #B3261E;
  color: #fff;
  font-family: var(--font-tekst);
  font-size: .875rem;
  line-height: 1.4;
  font-weight: 700;
  text-align: center;
  padding: .7rem 1.25rem;
  position: relative;
  z-index: 60;   /* boven de plakkende kopbalk */
}
.testbalk span { font-weight: 400; display: block; }

@media (min-width: 600px) {
  .testbalk span { display: inline; }
  .testbalk span::before { content: ' — '; }
}

/* ---------- Kopbalk ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--creme);
  border-bottom: 2px solid var(--creme-diep);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-kop);
  font-size: 1.4rem;
  text-decoration: none;
  color: var(--nacht);
}
.merk__ster { width: 1.1em; height: 1.1em; fill: var(--goud); flex: none; }
.merk--footer { color: var(--inkt-licht); margin-bottom: .35rem; }

.nav-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem; height: 2.75rem;
  background: var(--goud);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: var(--nacht);
}

/* Hamburger: één streepje met twee streepjes erboven en eronder. */
.nav-knop__streepjes,
.nav-knop__streepjes::before,
.nav-knop__streepjes::after {
  display: block;
  width: 1.15rem; height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-knop__streepjes { position: relative; }
.nav-knop__streepjes::before,
.nav-knop__streepjes::after { content: ''; position: absolute; left: 0; }
.nav-knop__streepjes::before { top: -6px; }
.nav-knop__streepjes::after  { top: 6px; }

.nav-knop[aria-expanded="true"] .nav-knop__streepjes { background: transparent; }
.nav-knop[aria-expanded="true"] .nav-knop__streepjes::before { transform: translateY(6px) rotate(45deg); }
.nav-knop[aria-expanded="true"] .nav-knop__streepjes::after  { transform: translateY(-6px) rotate(-45deg); }

.hoofdnav {
  display: none;
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--creme);
  border-bottom: 2px solid var(--creme-diep);
  padding: .5rem 1.25rem 1.5rem;
}
.hoofdnav.is-open { display: block; }

.hoofdnav ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.hoofdnav a {
  display: block;
  padding: .6rem 0;
  font-family: var(--font-kop);
  font-size: 1.15rem;
  text-decoration: none;
}
.hoofdnav a.knop { margin-top: .75rem; text-align: center; }

/* ---------- Secties en kleurvlakken ---------- */

.sectie {
  position: relative;
  padding-block: var(--ruimte);
  background: var(--creme);
}
.sectie--perzik { background: var(--perzik); }
.sectie--roze   { background: var(--roze); }
.sectie--lila   { background: var(--lila); }

.sectie--nacht {
  background: var(--nacht);
  color: var(--inkt-licht);
}
.sectie--nacht .kop-boven { color: var(--goud-licht); }

/* Secties met een rand onderin krijgen daar extra ruimte voor. */
.sectie:has(> .rand) { padding-bottom: calc(var(--ruimte) + 2.5rem); }

/* ---------- Golf- en schulpranden tussen de vlakken ---------- */

.rand {
  position: absolute;
  left: 0; right: 0;
  width: 100%;
  display: block;
  fill: var(--nacht);
}
.rand--golf   { bottom: -1px; height: 3.75rem; }
.rand--schulp { bottom: -1px; height: 2.5rem; }
.rand--boven  { top: -1px; bottom: auto; }

/* ---------- Decoratieve vormen ---------- */

.vorm {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.vorm--rond  { border-radius: 999px; }
.vorm--halve { border-radius: 999px 999px 0 0; }
.vorm--sprankel { fill: var(--goud); }

.vorm--a { width: 7rem;   height: 3.5rem; background: var(--roze);  bottom: 24%; left: -2.5rem; }
.vorm--b { width: 4.5rem; height: 4.5rem; background: var(--lila);  bottom: 7rem; right: -1.5rem; }
.vorm--c { width: 1.75rem; height: 1.75rem; top: 4.5rem; right: 12%; }
.vorm--d { width: 1.15rem; height: 1.15rem; bottom: 9rem; left: 8%; fill: var(--roze-diep); }
.vorm--e { width: 2.25rem; height: 2.25rem; top: 3rem; right: 8%; fill: var(--nacht); opacity: .25; }

.vorm--maan {
  width: 3.5rem; height: 3.5rem;
  top: 2.5rem; right: 8%;
  fill: var(--goud-licht);
  opacity: .8;
  position: absolute;
  pointer-events: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--creme);
  padding-top: clamp(2.5rem, 8vw, 4.5rem);
  padding-bottom: calc(var(--ruimte) + 3rem);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.hero h1 { margin-bottom: .25em; }
.hero .lead { max-width: 34rem; }

.hero__beeld {
  position: relative;
  align-self: center;
  width: min(74vw, 22rem);
}

/* Boogvorm: bovenkant rond, onderkant licht afgerond. */
.boog {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 1.75rem 1.75rem;
  background: var(--lila);
}
.boog img { width: 100%; }
.boog--klein { border-radius: 999px 999px 1rem 1rem; }

/* Achter de boog ligt een gekleurd vlak dat er net onderuit steekt. */
.hero__beeld::before {
  content: '';
  position: absolute;
  inset: 1.25rem -1.25rem -1.25rem 1.25rem;
  background: var(--goud-licht);
  border-radius: 999px 999px 1.75rem 1.75rem;
  z-index: -1;
}

/* ---------- Draaiend zegel ---------- */

/* Rond zegel op een crèmekleurige schijf, zodat het als een sticker
   op de illustratie ligt en de tekst leesbaar blijft. */
.zegel {
  position: absolute;
  width: 7.5rem; height: 7.5rem;
  bottom: -2.25rem; left: -2rem;
  background: var(--creme);
  border-radius: 50%;
  animation: draai 24s linear infinite;
}
.zegel__tekst {
  font-family: var(--font-kop);
  /* De tekst moet de cirkel exact rondlopen, anders zie je het gat
     langsdraaien. De omtrek is 452px; met deze letterafstand komt de
     tekst daar precies op uit. Verander je de zin, stel dan opnieuw af. */
  font-size: 33px;
  letter-spacing: .038em;
  fill: var(--nacht);
}
.zegel__ster { fill: var(--goud); }

@keyframes draai { to { transform: rotate(360deg); } }

/* ---------- Lopende tekstband ---------- */

.loopband {
  background: var(--nacht);
  color: var(--goud-licht);
  padding: .85rem 0;
  overflow: hidden;
  font-family: var(--font-kop);
  font-size: 1.05rem;
  letter-spacing: .04em;
}
.loopband__spoor {
  display: flex;
  width: max-content;
  animation: loop 38s linear infinite;
}
.loopband__spoor span { white-space: nowrap; }

@keyframes loop { to { transform: translateX(-50%); } }

/* ---------- Kaarten "01 / 02 / 03" ---------- */

.kaarten {
  list-style: none;
  margin: 3rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.25rem;
}

.kaart {
  background: var(--creme);
  border-radius: var(--rond);
  padding: 2rem 1.5rem 1.75rem;
  position: relative;
}
.kaart__nr {
  font-family: var(--font-kop);
  font-size: 2.75rem;
  line-height: 1;
  color: var(--goud);
  display: block;
  margin-bottom: .35rem;
}
.kaart h3 { margin-bottom: .4em; }
.kaart p { font-size: .9875rem; margin: 0; }

/* ---------- Spotify-speler ---------- */

.speler {
  margin-top: 2.5rem;
  border-radius: var(--rond);
  overflow: hidden;
  background: var(--nacht-diep);
  min-height: 380px;
}
.speler iframe { display: block; border: 0; width: 100%; }

/* Plaatshouder zolang een insluiting nog niet geladen is. */
.wacht {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 244, 230, .6);
  font-size: .9375rem;
}
.sectie:not(.sectie--nacht) .wacht { color: rgba(62, 42, 115, .5); }

/* Insluiting waarvan het adres nog niet is ingevuld. */
.nog-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  /* Wint van de gereserveerde hoogte van .reel, zodat een
     nog niet ingestelde insluiting geen groot leeg vlak achterlaat. */
  color: rgba(62, 42, 115, .5);
  font-size: .9375rem;
}
[data-embed].nog-leeg { min-height: 8rem; }

/* ---------- Instagram ---------- */

/* Eén ingesloten reel, gecentreerd. Instagram levert een vaste breedte
   rond de 400px, dus breder rekken heeft geen zin. */
.reel {
  width: 100%;
  max-width: 26rem;
  min-height: 46rem;
  margin: 2.5rem auto;
  border-radius: var(--rond);
  overflow: hidden;
  background: var(--creme-diep);
}
.reel iframe { display: block; border: 0; width: 100%; }

/* De Instagram-feed van Behold. De dienst levert zijn eigen opmaak;
   wij zorgen alleen voor de ruimte eromheen. */
.insta-feed {
  margin: 2.5rem 0;
  min-height: 6rem;
}

/* ---------- Sprankeltje ---------- */

.mascotte-figuur { margin: 2.5rem 0 1.5rem; }
.mascotte-figuur .boog { width: min(74vw, 22rem); margin-inline: auto; }
.mascotte-figuur figcaption {
  text-align: center;
  font-size: .9375rem;
  opacity: .8;
  margin-top: 1rem;
}


/* ---------- Winkel ---------- */

.producten {
  list-style: none;
  margin: 2.5rem 0 2rem;
  padding: 0;
  display: grid;
  gap: 1.5rem;
}

.product {
  background: var(--creme-diep);
  border-radius: var(--rond);
  padding: 1.25rem 1.25rem 1.75rem;
  display: flex;
  flex-direction: column;
}

/* De steunkaart is geen gekocht product, dus krijgt een eigen kleur. */
.product--steun { background: var(--lila); }

.product__beeld {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  background: var(--lila);
  margin-bottom: 1.25rem;
}
/* Elke kaart een eigen tint, zodat ze uit elkaar te houden zijn zolang
   er nog geen echte productfoto's zijn. */
.product__beeld--twee { background: var(--goud); }
.product__beeld--drie { background: var(--roze-diep); }
.product--steun .product__beeld { background: var(--nacht); }

.product__ster { width: 30%; height: 30%; fill: var(--creme); opacity: .9; }

.product__label {
  font-family: var(--font-kop);
  font-size: .6875rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lila-diep);
  margin-bottom: .3rem;
}
.product--steun .product__label { color: var(--nacht); opacity: .7; }

.product h3 { margin-bottom: .35em; }
.product__omschrijving { font-size: .9375rem; }

.product__prijs {
  font-family: var(--font-kop);
  font-size: 1.35rem;
  margin-top: auto;      /* houdt prijs en knop op gelijke hoogte per rij */
  padding-top: .75rem;
  margin-bottom: 1rem;
}
.product__prijs--vrij { font-size: 1.05rem; }

.product .knop { align-self: flex-start; }

/* Kleine toelichting onder een koopknop, bijvoorbeeld over levertijd. */
.product__na {
  font-size: .8125rem;
  line-height: 1.5;
  opacity: .75;
  margin-top: .85rem;
  margin-bottom: 0;
}

/* ---------- Voettekst ---------- */

.site-footer {
  position: relative;
  background: var(--nacht);
  color: var(--inkt-licht);
  padding-top: calc(var(--ruimte) + 2rem);
  padding-bottom: 2rem;
}
.site-footer .rand--boven { fill: var(--nacht); background: var(--lila); height: 3.75rem; }

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-links {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }

.copyright {
  text-align: center;
  font-size: .875rem;
  opacity: .7;
  margin: 2.5rem 0 0;
}

/* ---------- Zachte opkomst bij scrollen (aangezet vanuit js/main.js) ---------- */

.js .komt-op {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js .komt-op.is-zichtbaar { opacity: 1; transform: none; }

/* ---------- Losse pagina's: kopbalk met alleen een terugknop ----------
   .hoofdnav staat op de telefoon standaard verborgen achter het menu.
   Op de productpagina is er geen menuknop, dus moet deze variant altijd
   zichtbaar blijven. */

.hoofdnav--kaal {
  display: block;
  position: static;
  background: none;
  border: 0;
  padding: 0;
}
.hoofdnav--kaal ul { flex-direction: row; }
.hoofdnav--kaal a {
  padding: 0;
  font-size: .9375rem;
  font-family: var(--font-tekst);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* ---------- Productpagina ---------- */

.product-kop__titel { font-size: clamp(2.25rem, 10vw, 4rem); }

.product-kop__beeld {
  width: min(70vw, 20rem);
  margin: 2.5rem auto 0;
}

.product-kop__prijs {
  font-family: var(--font-kop);
  font-size: 2rem;
  margin: 2rem 0 0;
}

.knoppenrij--midden { justify-content: center; }

.citaat {
  margin: 2rem 0 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--creme);
  border-radius: var(--rond);
}
.citaat p {
  font-family: var(--font-kop);
  font-size: 1.15rem;
  line-height: 1.45;
  margin-bottom: .75rem;
}
.citaat footer {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .7;
}

/* Het quote-vak van Sprankeltje op het roze vlak: gecentreerd, met een
   sterretje erboven en de aanhalingstekens in het goud van de mascotte. */
.citaat--sprankeltje {
  text-align: center;
  max-width: 34rem;
  margin-inline: auto;
  position: relative;
  padding-top: 2.5rem;
}
.citaat--sprankeltje::before {
  content: '“';
  position: absolute;
  top: .35rem;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-kop);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--goud);
}
.citaat--sprankeltje p { font-size: 1.25rem; }

/* Twee reacties naast elkaar, zodat ze samen weinig hoogte innemen.
   Op een telefoon komen ze vanzelf onder elkaar te staan.

   De kolommen zijn bewust ongelijk: een korte reactie in een even
   breed vak als een lange oogt leeg. Staan er straks twee reacties
   van gelijke lengte? Zet de tweede waarde dan ook op 1fr. */
.citaten {
  display: grid;
  gap: 1.5rem;
  align-items: start;
  margin-top: 2.5rem;
}

/* Binnen dit rooster bepaalt de kolom de breedte, niet het vak zelf. */
.citaten .citaat {
  margin: 0;
  max-width: none;
}

@media (min-width: 800px) {
  .citaten { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}

/* Drie reacties naast elkaar (homepage). Een aparte variant, want het
   rooster hierboven is voor twee vakken gemaakt en wordt ook gebruikt
   op de pagina ouder-kind-meditatie.

   Deze regel staat na het blok hierboven en overschrijft het dus: tot
   960px staan de drie vakken onder elkaar. Smaller dan dat worden drie
   kolommen te krap voor een prettig leesbare regel.

   Vier of meer reacties? Maak er dan een variant bij in plaats van
   deze aan te passen, bijvoorbeeld repeat(2, minmax(0, 1fr)) in twee
   rijen. Drie smalle kolommen naast elkaar is het maximum. */
.citaten--drie { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 960px) {
  .citaten--drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tips--midden {
  display: inline-block;
  text-align: left;
  margin-inline: auto;
}

/* ---------- Over mij: foto naast de tekst ---------- */

/* De foto is staand (2:3), dus hij wordt anderhalf keer zo hoog als
   breed. Daarom bewust klein gehouden: zo blijft hij naast de eerste
   twee alinea's staan in plaats van er ver onderuit te steken. */
.over-mij__foto {
  width: min(45vw, 11rem);
  margin: 0 auto 1.5rem;
  flex: none;
}

@media (min-width: 600px) {
  .over-mij {
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
  }
  .over-mij__foto { width: 10rem; margin: .35rem 0 0; }
  .over-mij__tekst { flex: 1; }
}

/* ---------- Intakepagina ---------- */

.privacy-regel {
  background: var(--creme-diep);
  border-radius: var(--rond);
  padding: 1rem 1.25rem;
  font-size: .9375rem;
  margin-bottom: 1.25rem;
}

/* ---------- Downloadpagina na betaling (bedankt-9c4f2a/) ---------- */

.bedankt__kop { font-size: clamp(2.5rem, 11vw, 4rem); }
.bedankt__tussenkop { font-size: clamp(1.5rem, 5vw, 2rem); margin-top: 3rem; }

.download-kaart {
  background: var(--creme-diep);
  border-radius: var(--rond);
  padding: 1.75rem 1.5rem;
  margin-top: 2.5rem;
  text-align: center;
}
.download-kaart h2 { font-size: clamp(1.5rem, 6vw, 2.25rem); }
.download-kaart .knoppenrij { justify-content: center; }
.download-kaart .product__label { margin-bottom: .5rem; }

.download-kaart audio {
  width: 100%;
  margin: 1.5rem 0 .5rem;
  border-radius: 999px;
}

.download-fout {
  background: var(--roze);
  border-radius: var(--rond);
  padding: 1rem 1.25rem;
  margin-top: 1.25rem;
  font-size: .9375rem;
}

.tips {
  margin: 1rem 0 2rem;
  padding-left: 1.25rem;
}
.tips li { margin-bottom: .6rem; }

/* ============================================================
   LANCERINGSKORTING — tijdelijke actie
   ============================================================
   Alles hieronder hoort bij de lanceringskorting van 20%. Stopt de
   actie? Dan mag dit hele blok weg, samen met het blok
   <section class="actie"> op de homepage en de doorgestreepte prijzen.
   In LEES-MIJ.txt hoofdstuk 3l staat stap voor stap wat je dan doet. */

/* ---------- Prijs met korting ----------
   Deze drie werken zowel in de winkelkaartjes op de homepage
   (.product__prijs) als op de productpagina's (.product-kop__prijs).
   Ze rekenen in em, dus ze schalen vanzelf mee met de prijs. */

.prijs-was {
  font-size: .8em;
  opacity: .6;
  margin-right: .4em;
  text-decoration-thickness: .09em;
}

/* De actieprijs houdt bewust de gewone tekstkleur. Lila of roze zou
   op het crèmevlak van een productkaart te licht worden om prettig
   te lezen. Het streepje en het gouden pilletje doen het werk al. */
.prijs-nu { white-space: nowrap; }

.prijs-vlag {
  display: inline-block;
  vertical-align: .18em;
  margin-left: .5em;
  padding: .25rem .6rem;
  background: var(--goud);
  color: var(--nacht);
  border-radius: 999px;
  font-family: var(--font-kop);
  font-size: .6875rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------- Het actieblok op de homepage ----------
   Warm geel: die kleur komt nergens anders als vlak voor, dus de band
   springt eruit tussen de donkere loopband erboven en het perzikvlak
   eronder. */

.actie {
  position: relative;
  overflow: hidden;
  background: var(--goud-licht);
  color: var(--nacht);
  padding-block: clamp(2rem, 5vw, 3rem);
}

.actie__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.25rem;
}

.actie__tekst { max-width: 42rem; }
.actie__tekst h2 { margin-bottom: .35em; }
.actie__tekst p:last-child { margin-bottom: 0; }
.actie .kop-boven { color: var(--nacht); opacity: .65; }

/* Rond zegel met het kortingspercentage, net iets scheef zodat het
   als een sticker op de band ligt. */
.actie__zegel {
  flex: none;
  display: grid;
  place-items: center;
  width: 5.5rem; height: 5.5rem;
  margin: 0;
  border-radius: 50%;
  background: var(--nacht);
  color: var(--goud-licht);
  font-family: var(--font-kop);
  font-size: 1.6rem;
  line-height: 1;
  transform: rotate(-8deg);
}

.actie__knop { margin-bottom: 0; }

.vorm--f {
  width: 2rem; height: 2rem;
  top: 1.5rem; right: 6%;
  fill: var(--nacht);
  opacity: .2;
}

@media (min-width: 800px) {
  .actie__inner {
    flex-direction: row;
    align-items: center;
    text-align: left;
    gap: 2rem;
  }
  .actie__knop { margin-left: auto; flex: none; }
  .actie__zegel { width: 6.5rem; height: 6.5rem; font-size: 1.9rem; }
}

/* ============================================================
   Tablet
   ============================================================ */

@media (min-width: 600px) {
  .kaarten   { grid-template-columns: repeat(3, 1fr); }
  .producten { grid-template-columns: repeat(2, 1fr); }

  /* Staan er maar twee kaarten in een rijtje? Dan krijgen ze samen de
     volle breedte, elk even breed. Komt er een derde kaart bij, dan
     gaat het vanzelf weer terug naar drie kolommen. */
  .kaarten:has(> :last-child:nth-child(2)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-footer__inner { flex-direction: row; justify-content: space-between; }
  .footer-links { align-items: flex-end; }

  .vorm--a { width: 11rem; height: 5.5rem; }
  .vorm--b { width: 7rem;  height: 7rem; }
  .zegel   { width: 9rem; height: 9rem; }
}

/* ============================================================
   Desktop
   ============================================================ */

@media (min-width: 960px) {
  .site-header__inner { min-height: 5rem; }

  .nav-knop { display: none; }

  .hoofdnav {
    display: block;
    position: static;
    background: none;
    border: 0;
    padding: 0;
  }
  .hoofdnav ul {
    flex-direction: row;
    align-items: center;
    gap: 1.75rem;
  }
  .hoofdnav a { padding: 0; font-size: 1.05rem; }
  .hoofdnav a:not(.knop):hover { color: var(--lila-diep); }
  .hoofdnav a.knop { margin-top: 0; }

  .hero__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
  }
  .hero__tekst { flex: 1 1 32rem; }
  .hero__beeld { flex: none; width: 24rem; align-self: auto; }

  .producten { grid-template-columns: repeat(3, 1fr); }

  .vorm--a { width: 14rem; height: 7rem; left: -3rem; }
  .vorm--c { width: 2.5rem; height: 2.5rem; }
}

/* ============================================================
   COOKIEBALK EN TOESTEMMING
   ============================================================
   Hoort bij de Spotify-speler: die plaatst een cookie, en dat mag
   pas nadat een bezoeker ja gezegd heeft. De balk zelf wordt door
   js/main.js opgebouwd, niet in elke pagina apart neergezet.
   Zie LEES-MIJ.txt hoofdstuk 10. */

.cookiebalk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;                 /* boven de plakkende kopbalk en de testbalk */
  background: var(--nacht);
  color: var(--inkt-licht);
  border-radius: var(--rond) var(--rond) 0 0;
  box-shadow: 0 -8px 30px rgba(44, 29, 83, .25);
  padding: 1.25rem 0 1.5rem;
}
.cookiebalk[hidden] { display: none; }

.cookiebalk__inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cookiebalk__kop {
  font-family: var(--font-kop);
  font-size: 1.15rem;
  margin: 0 0 .35rem;
}
.cookiebalk p { margin: 0; font-size: .9375rem; line-height: 1.55; }
.cookiebalk a { color: var(--goud-licht); }

/* Accepteren en weigeren moeten even makkelijk zijn. Daarom krijgen
   beide knoppen dezelfde vorm, kleur en grootte — geen opvallende
   ja-knop naast een weggemoffelde nee-knop. */
.cookiebalk__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.cookiebalk__knoppen .knop { flex: 1 1 10rem; justify-content: center; }

@media (min-width: 800px) {
  .cookiebalk__inner { flex-direction: row; align-items: center; gap: 2rem; }
  .cookiebalk__tekst { flex: 1; }
  .cookiebalk__knoppen { flex: none; flex-wrap: nowrap; }
  .cookiebalk__knoppen .knop { flex: none; }
}

/* Lichte knop voor op het nachtblauwe vlak. */
.knop--licht { background: var(--creme); color: var(--nacht); border-color: var(--creme); }
.knop--licht:hover { background: var(--creme-diep); border-color: var(--creme-diep); }

/* Vraag in de plaats van de speler, zolang er geen toestemming is. */
.speler-vraag {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  min-height: 380px;
  padding: 2rem 1.5rem;
  color: var(--inkt-licht);
}
.speler-vraag p { margin: 0; max-width: 30rem; font-size: .9375rem; line-height: 1.55; }
.speler-vraag a { color: var(--goud-licht); }

/* Knop die eruitziet als een link, voor in de voettekst. */
.voet-knop {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.voet-knop:hover { text-decoration: underline; }

/* ============================================================
   Minder beweging: alle animaties uit voor wie dat instelt.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .loopband__spoor { animation: none; }
  .zegel { animation: none; }
  .knop:hover { transform: none; }
  .js .komt-op { opacity: 1; transform: none; }
}