/**
 * Complimentje — systeemlaag "clean" (richting Apple: less is more).
 *
 * style.css wordt door het lab gegenereerd en niet met de hand bewerkt. Deze
 * laag laadt erná en herdefinieert de design-tokens site-breed: weg van beige,
 * naar een schoon wit doek met heel veel lucht en bijna geen kleur. Eén
 * ingehouden warm accent, spaarzaam gebruikt. Geen decoratieve gradients,
 * geen zwevende stofjes, geen glans-veeg. De interface wijkt terug; het
 * compliment zelf houdt de serif en spreekt.
 */



/* --- Tokens opnieuw: het hele systeem verandert mee via var() --- */
:root{
  --cream:var(--kleur-grond);        /* was beige; nu wit doek */
  --soft:var(--kleur-grond);         /* Apple-achtige lichtgrijze rustvlakken */
  --white:var(--kleur-grond);
  --ink:var(--kleur-ink);          /* bijna zwart */
  --muted:var(--kleur-soft);        /* rustig grijs */
  --terra:var(--kleur-rood);        /* koraal-accent: knoppen en links. Was var(--kleur-rood), maar dat
                             haalde met wit maar 3.72:1; var(--kleur-rood) haalt 4.83:1 (WCAG AA). */
  --terra-soft:var(--kleur-rood);

  /* Twee roden, met een reden.
     --terra (var(--kleur-rood)) is voor alles wat je kunt aanklikken: knoppen, links,
     randen, focus. --label (var(--kleur-rood)) is voor wat je alleen leest: eyebrows,
     tags, badges. Dieper en rustiger, zodat een label nooit lijkt op iets
     waar je op moet drukken. Een derde rood (var(--kleur-rood)) stond er ook nog; die
     is weg. */
  --label:var(--kleur-rood);
  --gold:var(--kleur-lijn);         /* goud weg; neutrale hairline-tint */
  --line:var(--kleur-lijn);         /* fijne hairline */

  /* Knop-tokens: van terracotta naar koraal. Re-skint in één keer de
     pbtn-randen, chip-dark, momentfilter, motief-swatches en cadeau-iconen
     die via var(--knop-vol*) tekenen. */
  --knop-vol:var(--kleur-rood);       /* was var(--kleur-rood); opgetild naar 4.83:1 op wit */
  --knop-vol-hover:var(--kleur-rood-hover); /* een stap donkerder, zodat de hover zichtbaar blijft */
  --knop-rand:var(--kleur-lijn);

  /* Warme --cmpl-* fallbacks neutraliseren. style.css tekent .preview-art,
     .render en .pcard .ph met var(--cmpl-paper-warm, var(--kleur-grond)); die tokens
     laden nooit (lab-template), dus hier definiëren = overal wit/neutraal.
     De product-mockups (.cmpl-voorbeeldblok) zetten zelf background:transparent
     en blijven dus ongemoeid. */
  --cmpl-paper-warm:var(--kleur-grond);
  --cmpl-line:var(--kleur-lijn);
  --cmpl-terra-deep:var(--kleur-rood-hover);
  --cmpl-muted-deep:var(--kleur-soft);
}

/* --- Type: schone grotesk voor de interface, strak en tight --- */
body{ font-family:var(--cmpl-sans); color:var(--ink); }

/* Koppen sans en strak. Het compliment (.q, .rt, .ex, previews, canvas) houdt
   bewust de serif en blijft ongemoeid: dáár mogen de woorden spreken. */
h1, h2, h3, .big, .serif, .logo,
[class$="__titel"], .share-h, .brand, .sub{
  font-family:var(--cmpl-sans);
  letter-spacing:-.03em;
}
h1, h2, h3{ font-weight:600; }
.big{ font-weight:600; color:var(--kleur-ink); }
.logo{ font-weight:600; letter-spacing:-.02em; }

/* Meer lucht: ruimere secties, grotere en tightere hero. */
.section{ padding:96px 0; }
.hero{ padding:96px 32px 96px; }
.hero .big{ font-size:var(--fs-hero); line-height:1.05; letter-spacing:-.03em; margin-top:12px; }
.lead{ color:var(--kleur-soft); font-size:var(--fs-lead); }

/* --- Geen decoratie: rust boven effect (less is more) --- */
.hero .wash{ display:none; }
.motes{ display:none; }
.shine{ display:none; }
.hero .sig .hh{ animation:none; }

/* --- Knop: vlak koraal, geen gloed. Warm maar rustig. --- */
.btn{
  background:var(--kleur-rood); /* was var(--kleur-rood) (3.72:1 met wit); var(--kleur-rood) haalt 4.83:1 */
  color:var(--kleur-grond);
  border-radius:var(--r-rond);
  box-shadow:none;
  font-weight:600;
  padding:12px 24px;
}
@media (hover: hover) and (pointer: fine){.btn:hover{ background:var(--kleur-rood-hover); transform:none; }}

/* De verstuurknop van het recensieformulier komt van WooCommerce en heet
   `input#submit`. Een id weegt zwaarder dan onze klasse, dus onze knopregel
   verloor daar en het veld hield de 10px van de plugin: buiten de ruimteladder,
   en de ontwerpcontrole zag het meteen.

   Tot 10 september 2026 stond dat verborgen achter een !important op `.btn`.
   Een id versla je alleen met een id, en dat is hier de eerlijke oplossing: geen
   voorrang forceren, wel evenveel gewicht in de schaal leggen.

   WooCommerce weegt `.woocommerce ... #respond input#submit`: een klasse en
   twee id's. Vandaar `#respond` ervoor; dat is de houder die zij zelf al
   gebruiken. Er is ook een nettere uitweg: WooCommerce zet zijn eigen
   knopstijlen uit zodra de body de klasse `woocommerce-block-theme-has-button-styles`
   draagt. Dat is de bedoelde manier om te zeggen "dit thema doet zijn knoppen
   zelf", maar het raakt elke WooCommerce-knop tegelijk en verdient een eigen
   ronde met een meting erbij. */
#respond input#submit.btn{
  padding:var(--s3) var(--s5);
  border-radius:var(--r-rond);
  background:var(--kleur-rood);
  color:var(--kleur-grond);
  border:none;
  font-weight:600;
}
.btn-ghost{
  background:transparent;
  color:var(--terra);
  border:none;
  box-shadow:none;
  padding:12px 8px;
}
/* Ook op hover doorzichtig: `.btn:hover` (twee klassen zwaar) won anders van
   `.btn-ghost` (één) en vulde de tekstknop koraal, met terra tekst erop.
   Zichtbaar geworden op 3 sep 2026 bij "Deel als filmpje" op /klaar/. */
@media (hover: hover) and (pointer: fine){.btn-ghost:hover{ background:transparent; text-decoration:underline; text-underline-offset:4px; }}

/* De herstelregel: "dat lukte niet" met een knop "Opnieuw proberen".
   Eén patroon op de maker, in de editor en op /klaar/; de markup komt uit
   cmplRest.herstelregel() in de plugin. Inkt en geen rood: de bezoeker heeft
   niets fout gedaan. De knop is de stille knop (btn-ghost) op raakhoogte. */
.herstelregel{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--s2) var(--s3);
  margin:var(--s3) 0 0;
  font-size:var(--fs-label);
  color:var(--kleur-ink);
}
.herstelregel__knop{ min-height:44px; font-size:var(--fs-label); }
.btn .hh{ color:var(--kleur-grond); }
.link{ color:var(--terra); }

/* --- Kaarten en vlakken: rustig grijs, geen rand, ronde hoek --- */
.card{
  background:var(--kleur-grond);
  border:none;
  border-radius:var(--r-vlak);
  box-shadow:none;
}
.step .n{ border-color:var(--kleur-lijn); color:var(--ink); }

/* Het compliment als "product op een podium": schoon vlak, zachte druppelschaduw. */
.preview{ border:var(--lijn-dikte) solid var(--kleur-lijn); border-radius:var(--r-vlak); box-shadow:none; }
.preview-art{ background:var(--kleur-grond); }

/* Header schoon wit met een haarlijn. */
header{ background:rgba(255,255,255,.85); border-bottom:var(--lijn-dikte) solid var(--kleur-lijn); }

/* Ingehouden focus-ring. */
:focus-visible{ outline:2px solid var(--knop-vol,var(--kleur-rood)); outline-offset:2px; }

/* Naar-de-inhoud-link: uit beeld tot een toetsenbordgebruiker hem focust, dan
   springt hij zichtbaar bovenaan in beeld. Scheelt op elke pagina een reeks
   tabs door de kop heen. */
.cmpl-skiplink{
  position:absolute; left:8px; top:-60px; z-index:1000;
  background:var(--knop-vol,var(--kleur-rood)); color:var(--kleur-grond); padding:12px 16px; border-radius:0 0 var(--r-vlak) var(--r-vlak);
  font-weight:600; text-decoration:none; transition:top .15s ease;
}
.cmpl-skiplink:focus{ top:0; }


/* --- Algemene pagina's: consistentie met de homepage (systeemlaag: algemene pagina's) --- */

/* Eyebrow overal als rustig koraal-kopje in plaats van de streepjes-caps.
   Zo dragen hero's op alle pagina's dezelfde signatuur als de voorpagina. */
/* Lezen, niet klikken: --label. */
.hero .eyebrow{
  color:var(--label);
  font-size:var(--fs-lead);
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
  gap:0;
}
.hero .eyebrow .rule{ display:none; }

/* De "Over"-pagina zet de tekstkolom inline op verticaal midden, waardoor er
   bij een korte tekst een gat naast het portret valt. Boven uitlijnen zoals de
   contactpagina (die al start gebruikt). .wrap > .contact raakt alleen Over,
   niet de contactpagina zelf (die is .wrap.contact). */
.wrap > .contact{ align-items:flex-start; }

/* --- Resterende hardgecodeerde warme vlakken uit style.css --- */
/* Warme hover-crème (var(--kleur-grond)) weg; rustige grijstint. */
@media (hover: hover) and (pointer: fine){.feeling:hover, .ch:hover{ background:var(--soft); }}
/* Actieve gevoel-chip op de maakpagina gelijk aan de homepage-chips:
   witte pil met inkt-rand, koraal icoon (was warm roze var(--kleur-grond)). */
.feeling.choice-tile.is-active{
  background:var(--kleur-grond);
  background-image:none;
  color:var(--ink);
  border-color:var(--ink);
}
.feeling.choice-tile.is-active .ic{ color:var(--terra); }
@media (hover: hover) and (pointer: fine){.feeling.choice-tile.is-active:hover,
.chip.choice-tile.is-active:hover{ background:var(--soft); color:var(--ink); }}


/* --- Warme cadeau-/tekening-/foto-/naamvlakken uit style.css → neutraal/koraal --- */
.motief-swatch, .cmpl-tekening__duim{ background:var(--soft); }
.photo{ background:var(--soft); color:var(--muted); }
.cmpl-cadeau{ background:var(--soft); border-color:var(--line); }
.cmpl-cadeau.is-persoonlijk{
  background:rgba(224,85,95,.07);
  border-color:rgba(224,85,95,.30);
  box-shadow:none;
}
@media (hover: hover) and (pointer: fine){.cmpl-namen__knop:hover{ background:var(--soft); }}


/* --- Productkaart/PDP: tag-kleur van oude terracotta naar koraal; sub neutraal --- */
/* Een tag lees je, je klikt hem niet aan. Zie de twee accenten bovenaan. */
.pcard .tag, .pdp .tag{ color:var(--label); }
.pdp .sub{ color:var(--ink); }

/* --- WooCommerce-knoppen: primair koraal-gevuld, secundair koraal-omlijnd --- */
/* Secundair (winkelwagen bijwerken, coupon toepassen, verder winkelen, terug
   naar winkel): rustige omlijning, zodat ze niet concurreren met de knop die telt. */
.woocommerce .button, .woocommerce a.button, .woocommerce button.button, .woocommerce input.button{
  background:transparent;
  color:var(--terra);
  border:var(--lijn-dikte) solid var(--terra);
  border-radius:var(--r-rond);
  box-shadow:none;
  text-shadow:none;
  font-weight:600;
}
@media (hover: hover) and (pointer: fine){.woocommerce .button:hover, .woocommerce a.button:hover,
.woocommerce button.button:hover, .woocommerce input.button:hover{
  background:var(--terra);
  color:var(--kleur-grond);
}}
/* Primair (in mandje, doorgaan naar afrekenen, bestelling plaatsen, inloggen,
   registreren, blocks): gevuld koraal. Ná het secundaire blok, dus wint. */
.woocommerce .button.alt, .woocommerce input.button.alt, .woocommerce #place_order,
.woocommerce #respond input#submit, button.single_add_to_cart_button, a.checkout-button,
.woocommerce-Button, .woocommerce-form-login__submit, .woocommerce-form-register__submit,
.wc-block-components-button, .wp-block-button__link{
  background:var(--terra);
  color:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--terra);
  border-radius:var(--r-rond);
  box-shadow:none;
  text-shadow:none;
  font-weight:600;
}
@media (hover: hover) and (pointer: fine){.woocommerce .button.alt:hover, .woocommerce input.button.alt:hover, .woocommerce #place_order:hover,
.woocommerce #respond input#submit:hover, button.single_add_to_cart_button:hover, a.checkout-button:hover,
.woocommerce-Button:hover, .woocommerce-form-login__submit:hover, .woocommerce-form-register__submit:hover,
.wc-block-components-button:hover, .wp-block-button__link:hover{
  background:var(--terra-deep,var(--kleur-rood));
  border-color:var(--terra-deep,var(--kleur-rood));
  color:var(--kleur-grond);
}}
/* Meldingsknoppen ("Bekijk mandje") blijven een rustige tekst-actie. */
.woocommerce-message .button, .woocommerce-info .button{
  background:transparent;
  color:var(--terra);
  border:none;
}


/* "Mandje bijwerken" (winkelwagen) is een hulp-actie, geen hoofdactie. Rustige
   omlijning i.p.v. gevulde pil, zodat hij niet concurreert met "Naar afrekenen".
   Alleen deze knop (data-cmpl-bijwerken); andere .chip-dark blijven ongemoeid. */
.chip-dark[data-cmpl-bijwerken]{
  background:transparent;
  color:var(--terra);
  border:var(--lijn-dikte) solid var(--terra);
}
@media (hover: hover) and (pointer: fine){.chip-dark[data-cmpl-bijwerken]:hover{
  background:var(--terra);
  color:var(--kleur-grond);
}}


/* Voorbeelden-pagina: elke kaart heeft een "Kopieer"-knop. Een raster vol
   gevulde koraal-pillen is te luid; deze actie is licht en herhaald. Daarom
   een ghost-knop: transparant, koraal tekst, fijne rand. Alleen op deze knop. */
.example-card__copy{
  background:transparent;
  color:var(--terra);
  border:var(--lijn-dikte) solid var(--line,var(--kleur-lijn));
  box-shadow:none;
  font-weight:600;
  width:auto;
}
@media (hover: hover) and (pointer: fine){.example-card__copy:hover{
  /* --terra-tint bestond nergens, dus deze regel deed niets. Het stelsel
     heeft de tint platgeslagen naar wit; --cmpl-terra-tint is die naam. */
  background:var(--cmpl-terra-tint);
  border-color:rgba(224,85,95,.35);
  color:var(--terra-deep,var(--kleur-rood));
}}
.example-card__copy .cmpl-btn-label,
.example-card__copy svg{ color:inherit; }


/* ==========================================================================
 * De regels van het ontwerpsysteem, afgedwongen.
 *
 * Deze laag laadt als laatste en zet de vier regels vast die niet uit een
 * waarde volgen maar uit een afspraak. Ze staan hier bij elkaar zodat je aan
 * één blok kunt zien wat het systeem belooft — en zodat het controlescript in
 * tools/ontwerpsysteem/ precies deze vier dingen kan nameten.
 * ========================================================================== */

/* 1. Boven en onder een blok evenveel lucht.
      De enige uitzondering is de hero: die grenst boven aan de navigatie en
      draagt daar de ruimte van de balk al in zich. */
.section{ padding-top:var(--s9); padding-bottom:var(--s9); }
.hero{ padding-top:var(--s9); padding-bottom:var(--s8); }

@media (max-width:760px){
  .section{ padding-top:var(--s7); padding-bottom:var(--s7); }
  .hero{ padding-top:var(--s7); padding-bottom:var(--s6); }
}

/* 2. Secties scheiden met een lijn, niet met een vlak.
      Een gekleurd vlak zegt "dit hoort bij elkaar" én "dit is anders", en dat
      tweede is bijna nooit waar. Een haarlijn zegt alleen het eerste. De
      laatste sectie krijgt er geen, want daaronder komt de voettekst al met
      een eigen lijn. */
.section + .section{ border-top:var(--lijn-dikte) solid var(--kleur-lijn); }
.section--warm,
.section--soft,
.section--grijs{ background:var(--kleur-grond); }

/* 3. Rond is aanraakbaar.
      Alleen wat je indrukt is een pil. Een vlak is licht afgerond. Een
      productbeeld is recht: daar kijk je naar, je drukt er niet op. */
.btn, .chip, .pill, .cmpl-pil,
.woocommerce .button, .woocommerce a.button,
.woocommerce button.button, .woocommerce input.button,
.wc-block-components-button, .wp-block-button__link{
  border-radius:var(--r-rond);
}
.card, .pcard, .kaart, .vlak, .panel{ border-radius:var(--r-vlak); }
.pcard .ph, .pcard img, .pdp__beeld, .pdp__beeld img,
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img{ border-radius:var(--r-beeld); }

/* 4. Geen schaduw, nergens.
      Een schaduw suggereert hoogte die er niet is, en hij wordt vaag zodra je
      inzoomt. Een lijn doet hetzelfde werk en blijft op elk scherm scherp. */
*, *::before, *::after{ box-shadow:none; }

/* Een kaart die zijn schaduw kwijt is, heeft een rand nodig om nog een kaart
   te zijn. */
.card, .pcard{
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
}


/* --- Formuliervelden -----------------------------------------------------
 * Een input, select of textarea die je niet aankleedt, kleedt de browser aan:
 * zwarte tekst, een grijze 2px-rand en een eigen hoek. Dat viel niet op zolang
 * de site zelf ook donker en rond was, maar in een systeem van vijf kleuren is
 * het meteen het enige wat niet klopt. Het controlescript vond ze op de
 * maakpagina (de zoekbalk) en op de productpagina (de sterren van het
 * recensieformulier).
 *
 * De radio's en vinkjes houden hun eigen tekening: die vervangen door iets
 * eigens kost toegankelijkheid en levert alleen uiterlijk op. Ze krijgen wel
 * de kleur van het systeem, zodat een aangevinkte ster rood is en niet blauw.
 */
input:not([type="radio"]):not([type="checkbox"]):not([type="range"]),
select,
textarea{
  font-family:inherit;
  /*
   * Zestien, en met opzet geen var(--fs-body).
   *
   * Dit is de enige maat op de hele site die buiten de schaal van zes valt, en
   * dat is geen slordigheid. Safari op de iPhone zoomt het hele scherm in zodra
   * je een veld aanraakt dat kleiner is dan 16 px, en zoomt daarna niet vanzelf
   * terug: je staat dan uitvergroot in een formulier en moet zelf uitknijpen om
   * de knop weer te vinden. Op 15 gebeurde dat bij elk veld van de site, ook in
   * de kassa, bij elk gegeven dat iemand invult om te betalen. Dat is de duurste
   * plek om iemand het overzicht kwijt te laten raken.
   *
   * Zet dit niet terug naar var(--fs-body) om de schaal kloppend te maken. De
   * schaal gaat over lezen; deze maat gaat over de browser.
   *
   * Waarom, terwijl de rest van dit blok het zonder doet. De drie
   * `:not()`-en gelden alleen voor het `input`-deel van de opsomming; `select`
   * en `textarea` staan er kaal in en verliezen dus van elke regel met één
   * klasse ervoor. Het contactformulier hield daardoor een tekstvlak van 15 px
   * over (`.field textarea` in style.css), en WooCommerce brengt in de kassa
   * zijn eigen maten mee. Dit is de enige regel op de site die van geen enkele
   * pagina een uitzondering mag krijgen, en dan hoort dat er ook te staan.
   *
   * Bij de opruiming van 10 september 2026, waarbij 297 van de 300 !important
   * uit het thema verdwenen, is deze bewust blijven staan. Zonder hem zakt het
   * tekstvlak op /contact/ terug naar 15 px en zoomt iOS bij het aantikken in.
   */
  /* 1rem en niet 16px, sinds 10 september 2026. Safari kijkt naar de berekende
     maat, en 1rem is standaard precies 16px; wie zijn letter groter zet krijgt
     hier meer in plaats van hetzelfde. Een px-maat zou dat afkappen. */
  font-size:1rem !important;
  color:var(--kleur-ink);
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-veldrand);
  border-radius:var(--r-vlak);
  padding:var(--s3) var(--s4);
}
input::placeholder,
textarea::placeholder{ color:var(--kleur-soft); opacity:1; }

input:not([type="radio"]):not([type="checkbox"]):focus-visible,
select:focus-visible,
textarea:focus-visible{
  border-color:var(--kleur-rood);
  outline:var(--lijn-dikte) solid var(--kleur-rood);
  outline-offset:1px;
}

input[type="radio"],
input[type="checkbox"]{
  accent-color:var(--kleur-rood);
  color:var(--kleur-ink);
}

/* Dezelfde regel als hierboven, maar voor de knop.
 *
 * Een button die je geen font-size geeft krijgt die van de browser, en dat is
 * 13,3333 px: geen enkele maat uit de schaal, en onder de bodem van vijftien.
 * Het viel niet op omdat de meeste knoppen een klasse hebben die het wel zegt;
 * de knoppen zonder klasse stonden er stil doorheen. Gemeten op 8 september
 * 2026: 179 plekken in de etalage.
 *
 * Een kale `button` verliest van elke regel met een klasse ervoor, dus dit
 * raakt alleen de knoppen die zelf niets zeggen.
 */
button{
  font-family:inherit;
  font-size:var(--fs-body);
}


/* De ruimteregel wint van elke pagina.
 *
 * Er stonden drie plekken waar een losse pagina de boven- of ondermarge van een
 * sectie apart bijstelde. Elk van die drie had op zichzelf een goede reden en
 * samen maakten ze de regel betekenisloos: als "boven en onder gelijk" drie
 * uitzonderingen heeft, is het geen regel maar een gewoonte. Ze staan nu hier,
 * één keer, en er is geen pagina die eronderuit komt. De hero houdt zijn eigen
 * verhouding, want die grenst boven aan de navigatie.
 */
.section:not(.hero){
  padding-top:var(--s9);
  padding-bottom:var(--s9);
}
@media (max-width:760px){
  .section:not(.hero){
    padding-top:var(--s7);
    padding-bottom:var(--s7);
  }
}

/* Twee sectiematen, en dat is er een meer dan hierboven stond.
 *
 * Een maat voor alles is geen systeem maar een hamer. De vertrouwensband
 * onderaan de voorpagina is 166 pixels hoog; met 96 boven en onder werd dat
 * een blok van 359 waarvan meer dan de helft leeg was. De ruimte hoort bij
 * het gewicht van wat erin staat: een sectie met een kop en een raster draagt
 * 96, een afsluitende strook van drie regels draagt 48.
 *
 * Dit is geen uitzondering per pagina — daar staat het systeem niet voor. Het
 * is een tweede maat met een naam, die overal gebruikt mag worden waar een
 * blok licht is. Boven en onder blijven gelijk; dat is de regel die telt. */
.section--compact:not(.hero){
  padding-top:var(--s7);
  padding-bottom:var(--s7);
}
@media (max-width:760px){
  .section--compact:not(.hero){
    padding-top:var(--s6);
    padding-bottom:var(--s6);
  }
}

/* ------------------------------------------------------------------ FAQ --
 * De accordeon, een keer.
 *
 * Stond tot 7 september 2026 vier keer los opgeschreven: twee blokken in
 * style.css, een in teams-landing.css, en een als tekenreeks ingemetseld in
 * inc/aeo-artikelen.php. Drie paddings en twee markerkleuren waren het gevolg,
 * waarvan er een (de hover-rood op .tl-faq) niemands bedoeling was.
 *
 * De ruimte komt uit een eigenschap die het component zet, zodat de drie
 * tredes uit een ladder komen en niet uit drie losse regels.
 */
.cmpl-faq{ max-width:760px; margin:24px auto 0; }
.cmpl-faq details{ border-bottom:var(--lijn-dikte) solid var(--kleur-lijn); padding:var(--cmpl-faq-ruimte,16px) 0; }
.cmpl-faq summary{
  align-items:center;
  color:var(--kleur-ink);
  cursor:pointer;
  display:flex;
  font-family:'Newsreader',Georgia,serif;
  font-size:var(--fs-lead);
  gap:16px;
  justify-content:space-between;
  list-style:none;
}
.cmpl-faq summary::-webkit-details-marker{ display:none; }
/* Een zichtbare focus, want `list-style:none` haalt ook de standaardomlijning
   weg en dan is de accordeon met het toetsenbord niet meer te volgen. Van de
   vijf losse versies had alleen die op de productpagina dit; nu alle vijf. */
.cmpl-faq summary:focus-visible{ outline:2px solid var(--kleur-rood); outline-offset:3px; }
/* Een plus die een streepje wordt. Geen draaiing: bij 45 graden leest de plus
   als een kruisje, en een kruisje betekent sluiten in plaats van inklappen. */
.cmpl-faq summary::after{
  color:var(--kleur-rood);
  content:"+";
  font-family:var(--cmpl-sans);
  font-size:var(--fs-kop);
  line-height:1;
}
.cmpl-faq details[open] summary::after{ content:"\2013"; }
.cmpl-faq p{
  color:var(--muted);
  font-size:var(--fs-body);
  line-height:1.6;
  margin:12px 0 0;
  max-width:62ch;
}

/* ------------------------------------------------------------ TOONKEUZE --
 * De chiprij, als systeemcomponent.
 *
 * Hij staat hier en niet in maak.css omdat hij niet van de maker is: zodra de
 * gelegenheidspillen een keer in de flow komen krijgen die dezelfde chip, en
 * dan hoort er geen regel bij te komen. De rij is daarom algemeen gehouden.
 *
 * De stand zit in de input, niet in een klasse. Dat levert één tabstop voor de
 * groep, pijltjes die wisselen, en een schermlezer die de legend voorleest en
 * "3 van 5" meldt. Vandaar `:checked +` in plaats van een `.is-active`.
 */
.cmpl-toon{
  border:0;
  margin:var(--s6) 0;
  padding:0;
}
.cmpl-toon__vraag{
  padding:0;
  margin:0 0 var(--s4);
  font-size:var(--fs-body);
  font-weight:600;
  color:var(--kleur-ink);
}
/* Draagt de legend `screen-reader-text`, dan staat het zichtbare label er al
   boven als stapkopje en hoort deze niets meer op te eisen: geen marge, geen
   ruimte. Twee klassen, want de regel hierboven staat later in de volgorde dan
   `.screen-reader-text` en zou anders zijn marge terugzetten. */
.cmpl-toon__vraag.screen-reader-text{margin:-1px;padding:0}
.cmpl-toon__rij{
  display:flex;
  flex-wrap:wrap;
  gap:var(--s2);
}
/*
 * Op een telefoon vullen de chips hun rij.
 *
 * Met alleen `flex-wrap` bepaalt de lengte van het woord waar een rij ophoudt.
 * Nagemeten op 390 px: drie rijen die rechts eindigden op 285, 161 en 326,
 * terwijl elke andere regel op de pagina op 358 uitkomt. Vijf woorden, drie
 * ongelijke randen.
 *
 * `flex:1 1 auto` laat elke rij precies vol lopen. De opvuller erachter is er
 * voor de laatste rij: zonder hem zou een chip die alleen overblijft (met vijf
 * gevoelens is dat "Zomaar") zich over de volle 326 pixels uitrekken en als een
 * hoofdknop gaan lezen. Met een grote flex-grow slurpt de opvuller de restruimte
 * op en houdt die ene chip zijn eigen maat.
 *
 * Geen vast aantal kolommen en geen nth-child: de gelegenheidsvariant heeft er
 * vier in plaats van vijf, en dit werkt bij elk aantal.
 */
@media (max-width:767px){
  .cmpl-toon__chip{
    flex:1 1 auto;
    justify-content:center;
  }
  .cmpl-toon__rij::after{
    content:"";
    flex:999 1 auto;
  }
}
/* Verbergen zonder weg te halen: `display:none` haalt de radio uit de
   tabvolgorde en dan is er geen toetsenbordbediening meer. Zo blijft hij
   bereikbaar en onzichtbaar. */
.cmpl-toon__input{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.cmpl-toon__chip{
  align-items:center;
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-keuze);
  color:var(--kleur-ink);
  cursor:pointer;
  display:inline-flex;
  font-family:var(--cmpl-sans);
  font-size:var(--fs-body);
  font-weight:500;
  /* Vierenveertig is het raakvlak, niet de tekst. Padding boven en onder blijft
     nul; de hoogte doet het werk, zodat een chip met één woord even hoog is als
     een chip met drie. */
  min-height:44px;
  padding:0 var(--s4);
}
.cmpl-toon__input:checked + .cmpl-toon__chip{
  border-color:var(--kleur-rood);
  color:var(--kleur-rood);
  font-weight:600;
}
/* De ring hangt aan de chip en niet aan de input: die is een pixel groot en
   staat ergens anders, dus zijn eigen ring zou nergens te zien zijn. */
.cmpl-toon__input:focus-visible + .cmpl-toon__chip{
  outline:2px solid var(--kleur-rood);
  outline-offset:2px;
}
@media (hover: hover) and (pointer: fine){
  .cmpl-toon__chip:hover{ border-color:var(--kleur-rood); }
}

/* ---- Recensies: het lege blok is stil ----------------------------------- */

/* Zonder verhalen blijft alleen de uitnodiging over. Dan hoort er ook geen
   scheidingslijn en geen sectiehoogte omheen te staan: dat maakt van een
   lege plek weer een sectie. */
.cmpl-reviews--leeg {
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}
.cmpl-reviews--leeg .cmpl-schrijf-vouw { margin-top: 0; }

/* ---- Aanleidingspagina's: de datum en de koopfeiten ---------------------- */

/* Twee rustige regels in de gedempte inkt, allebei even zwaar als de regel
   "Gratis om te maken en te delen" waar ze naast staan. Ze mogen gezien worden
   en niets overstemmen; een aanleidingspagina blijft het hele jaar staan. */
.cmpl-landing__datum {
  margin-top: var(--s1);
  font-size: var(--fs-label);
  color: var(--kleur-soft);
}
.cmpl-landing__koopfeiten {
  margin: var(--s5) auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--kleur-soft);
  line-height: 1.6;
}

/* ---- Maakpagina: wat het kost en wanneer het komt ------------------------ */

/* Eén regel onder de maker. Geen band, geen kader: de pagina gaat over woorden
   en dit staat ernaast, niet erbovenop. De sectie zelf mag smal blijven, want
   het is één zin en geen blok. */
.cmpl-maak-koopfeiten {
  padding-top: 0;
}
.cmpl-maak-koopfeiten p {
  margin: 0 auto;
  max-width: 60ch;
  text-align: center;
  font-size: var(--fs-label);
  color: var(--kleur-soft);
  line-height: 1.6;
}

/* ---- Ingangen per ontvanger, in de hero --------------------------------- */

/* Woorden, geen capsules.

   Dit waren vier omlijnde chips met de hoek van een knop, en ze stonden direct
   onder de rode hoofdknop. Vijf keer dezelfde vorm onder elkaar, waarvan vier
   grijs: samen 1120 pixels breed, tegen 820 voor de kop erboven. Het laatste
   wat je oog in de hero raakte was daarmee het breedste en het minst
   belangrijke element, en de rode knop moest hem daar tegen opnemen.

   Dezelfde correctie als in de voettekst op 10 september 2026: de capsule is in
   dit systeem de knop die je pagina verder brengt, en die hoort er per scherm
   een te zijn. Deze vier zijn een afslag voor wie al weet voor wie het is, geen
   tweede oproep.

   Ze zijn wel zwaarder gezet dan de index in de voettekst: inktkleur in plaats
   van grijs, want ze staan boven de vouw en ze zijn met de hand gekozen. Het
   streepje ertussen komt uit de lijnkleur en is hetzelfde streepje als overal.

   Raakvlak: 32 pixels hoog en 24 ertussen, ruim boven de 24 van WCAG 2.5.8. */
/* ------------------------------------------------------------- KEUZERIJ --
 * Dit blok is op 11 september 2026 weggehaald, dezelfde dag dat het er kwam.
 *
 * Het gaf de twee linkrijen ("Voor wie is het?" in de hero en "Is het voor iets
 * bijzonders?" in de maker) dezelfde chipvorm als de toonkeuze. Beide rijen zijn
 * inmiddels van de site, dus deze regels renderden nergens meer.
 *
 * Er zat bovendien een fout in die eruit moest. De klasse heette `.chip`, en die
 * naam was al in gebruik: in style.css is `.chip` een pil (hoek --r-rond,
 * padding 12 bij 24, gewicht 700, doorzichtige rand), en die wordt gerenderd in
 * het account, in het AOV-blok en in de winkel. systeem.css laadt na style.css,
 * dus deze regels lagen daar stilletjes overheen en maakten van die pillen
 * omlijnde blokjes met hoek 6. Dat is uitgerold en een halve dag live geweest.
 *
 * De les staat in docs/frontend/componenten-en-api.md: een naam die al bestaat
 * is geen vrije naam, en in een thema met vijf chipfamilies zegt "chip" niets
 * over gedrag. Zie ook docs/frontend/ux-patronen.md over vorm die gedrag volgt.
 */