/**
 * Het huidige complimentje op Cadeaus en op de productpagina.
 *
 * Route "product eerst", 28 september 2026, ontwerp van de ontwerpwacht. Alles
 * op de tokens uit ontwerpsysteem.css, niets inline. Drie regels uit dat
 * ontwerp die hier vastliggen:
 *   - de zin is het grootste element in het blok;
 *   - het label is gedempt: de rode bovenregel van de pagina staat al in de hero;
 *   - geen losse rode lijn onder een link (de oude .cmpl-maak-link had er een)
 *     en geen kaart in een kaart: het blok is een vlak, de zin staat er los in.
 *
 * Geladen op de winkel, de categorieen en de productpagina (inc/shop.php).
 */

/* ---------- Het blok op Cadeaus ------------------------------------------ */
.cmpl-huidig{
  margin:0;
  padding:var(--s5);
  background:var(--kleur-grond);
  border:var(--lijn-dikte) solid var(--kleur-lijn);
  border-radius:var(--r-vlak);
}
.cmpl-huidig__leeg,
.cmpl-huidig__zin{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s2); }
.cmpl-huidig [hidden]{ display:none; }
.cmpl-huidig__kop{
  margin:0;
  font-size:var(--fs-kop);
  line-height:1.25;
  color:var(--kleur-ink);
}
.cmpl-huidig__label{
  margin:0;
  font-size:var(--fs-label);
  color:var(--kleur-soft);
}
.cmpl-huidig__woorden{
  margin:0;
  max-width:36ch;
  font-family:var(--cmpl-serif);
  font-size:var(--fs-kop);
  line-height:1.3;
  color:var(--kleur-ink);
}
.cmpl-huidig__regel{
  margin:0;
  font-size:var(--fs-body);
  color:var(--kleur-soft);
}
.cmpl-huidig__knop{ margin-top:var(--s2); }
.cmpl-huidig__wegen{ margin:0; display:flex; flex-wrap:wrap; gap:var(--s4); }
.cmpl-huidig__wegen:not(:has(a:not([hidden]))){ display:none; }
.cmpl-huidig .link,
.cmpl-huidig__weg{
  display:inline-flex; align-items:center;
  min-height:44px;
  padding:0;
  background:none; border:0;
  font-size:var(--fs-body);
  color:var(--kleur-ink);
  text-decoration:underline; text-underline-offset:3px;
  cursor:pointer;
}
.cmpl-huidig__vergeet{ margin-top:var(--s2); }
.cmpl-huidig .cmpl-huidig__vergeet-vraag,
.cmpl-huidig .cmpl-huidig__nee{ font-size:var(--fs-label); color:var(--kleur-soft); }
.cmpl-huidig__bevestig{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3); }
.cmpl-huidig__bevestig .cmpl-huidig__regel{ flex-basis:100%; }
.cmpl-huidig__melding{ margin:0; font-size:var(--fs-label); color:var(--kleur-soft); }
.cmpl-huidig__melding:empty{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cmpl-huidig .link:hover,
  .cmpl-huidig__weg:hover{ color:var(--kleur-rood); }
}
@media (max-width:640px){
  .cmpl-huidig{ padding:var(--s4); }
}

/* ---------- De productpagina --------------------------------------------- */
.cmpl-jouwtekst__wegen{ margin:0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); }
.cmpl-jouwtekst__wegen .link{
  display:inline-flex; align-items:center; gap:var(--s2);
  min-height:44px;
  font-size:var(--fs-body);
  color:var(--kleur-ink);
  text-decoration:underline; text-underline-offset:3px;
}
.cmpl-pdp-wagen{ margin-top:var(--s4); }
.cmpl-pdp-wagen [hidden]{ display:none; }
.cmpl-pdp-wagen__inwagen{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--s3); }
.cmpl-pdp-wagen__regel{ margin:0; font-size:var(--fs-body); color:var(--kleur-ink); }
.cmpl-pdp-wagen .cmpl-pdp-wagen__nogeen{
  display:inline-flex; align-items:center;
  min-height:44px;
  font-size:var(--fs-body);
  color:var(--kleur-soft);
  text-decoration:underline; text-underline-offset:3px;
}
.cmpl-pdp-weg{ margin:var(--s4) 0 0; font-size:var(--fs-body); color:var(--kleur-ink); }
form.cart[hidden],
.pdp-koopkaart__knop[hidden]{ display:none; }