/**
 * Orderwaarde-componenten: meelift-kaartje, voortgangsbalk, cadeauset,
 * cadeauverpakking en de suggestie op de productpagina.
 *
 * Kleuren komen uit de tokens van het thema. Winkelwagen en afrekenen zijn
 * lab-templates waar `tokens.css` niet laadt en de variabelen `--ink`, `--terra`
 * enzovoort heten; op de overige pagina's heten ze `--cmpl-ink`. Vandaar de
 * dubbele val-terug per kleur. Zonder beide staat er op één van de twee
 * pagina's een onzichtbare of paarse component.
 */

:root {
  --cmpl-aov-ink:   var(--ink, var(--cmpl-ink, var(--kleur-ink)));
  --cmpl-aov-muted: var(--muted, var(--cmpl-muted-deep, #6e685e));
  --cmpl-aov-terra: var(--terra, var(--cmpl-terra, var(--kleur-rood)));
  --cmpl-aov-line:  var(--line, var(--cmpl-line, var(--kleur-lijn)));
  --cmpl-aov-cream: var(--cream, var(--cmpl-cream, var(--kleur-grond)));
  --cmpl-aov-white: var(--white, var(--cmpl-white, var(--kleur-grond)));
  /* Terracotta als tekstkleur haalt op crème te weinig contrast; deze wel. */
  --cmpl-aov-terra-deep: var(--kleur-rood);
  --cmpl-aov-sage: #5b7c60;
}

/* --- Voortgang naar gratis verzending ------------------------------------ */

.cmpl-aov-voortgang {
  margin: 16px 0 0;
}

.cmpl-aov-voortgang__balk {
  position: relative;
  height: 8px;
  border-radius: var(--r-rond);
  background: var(--cmpl-aov-line);
  overflow: hidden;
}

.cmpl-aov-voortgang__vulling {
  display: block;
  height: 100%;
  border-radius: var(--r-rond);
  background: var(--terra, var(--kleur-rood));
  /* Groeien met transform en niet met width: een breedte animeren laat de
     browser bij elke stap de opmaak opnieuw berekenen, een transform niet.
     De vulling staat daarom op de volle breedte en wordt geschaald. */
  width: 100%;
  transform-origin: left center;
  transition: transform .4s ease;
}

.cmpl-aov-voortgang.is-gehaald .cmpl-aov-voortgang__vulling {
  background: linear-gradient(90deg, #5b7c60, #7fa085);
}

.cmpl-aov-voortgang__tekst {
  margin: 8px 0 0;
  font-size:var(--fs-label);
  text-align: center;
  color: var(--cmpl-aov-terra-deep);
}

.cmpl-aov-voortgang.is-gehaald .cmpl-aov-voortgang__tekst {
  color: var(--cmpl-aov-sage);
}

/* De balk staat in het overzicht, waar het thema zijn eigen tekstnudge al
   plaatst. Die twee direct op elkaar leest als één mededeling. */
.free-nudge + .cmpl-aov-voortgang {
  margin-top: 8px;
}

.free-nudge + .cmpl-aov-voortgang .cmpl-aov-voortgang__tekst {
  display: none;
}

/* De balk is het laatste element in het overzichtsblok en raakte daar de rand. */
.summary .cmpl-aov-voortgang:last-child {
  margin-bottom: 4px;
}

/* In het afrekenoverzicht zit de balk in een tabelrij; die cel heeft de
   celopmaak van WooCommerce niet nodig. */
.cmpl-aov-voortgang-rij td {
  padding: 12px 0 4px;
  border: 0;
}

/* --- Meelift-kaartje ----------------------------------------------------- */

.cmpl-aov-bump {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  margin: 24px 0 0;
  padding: 16px 16px;
  border:var(--lijn-dikte) dashed var(--cmpl-aov-line);
  border-radius: var(--r-vlak);
  background: var(--cmpl-aov-white);
}

.cmpl-aov-bump.is-toegevoegd {
  border-style: solid;
  border-color: #cfe0d3;
  background: #f4f9f5;
}

.cmpl-aov-bump__beeld {
  flex: 0 0 64px;
  width: 64px;
}

.cmpl-aov-bump__beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-vlak);
}

.cmpl-aov-bump__tekst {
  flex: 1 1 220px;
  min-width: 0;
}

.cmpl-aov-bump__titel {
  margin: 0;
  font-weight: 700;
  color: var(--cmpl-aov-ink);
}

.cmpl-aov-bump__uitleg {
  margin: 4px 0 0;
  font-size:var(--fs-label);
  line-height: 1.5;
  color: var(--cmpl-aov-muted);
}

.cmpl-aov-bump__actie {
  flex: 0 0 auto;
}

/* `.chip` zonder `.chip-dark` heeft in het lab geen eigen vlak; hier krijgt de
   afmeldknop een rustige omlijning zodat hij niet als tekst wegvalt. */
.cmpl-aov-bump__actie .chip:not(.chip-dark) {
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  background: var(--cmpl-aov-white);
  color: var(--cmpl-aov-muted);
  text-decoration: none;
}

.cmpl-aov-bump__actie .chip {
  text-decoration: none;
}

.cmpl-aov-meelift-label {
  display: inline-block;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: var(--r-rond);
  background: #f4f9f5;
  font-size:var(--fs-label);
  font-weight: 600;
  color: var(--cmpl-aov-sage);
  white-space: nowrap;
}

/* --- Cadeauset ----------------------------------------------------------- */

.cmpl-aov-set {
  margin: 16px 0 0;
  padding: 16px;
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  border-radius: var(--r-vlak);
  background: var(--cmpl-aov-cream);
}

.cmpl-aov-set__titel {
  margin: 0;
  font-weight: 700;
  color: var(--cmpl-aov-ink);
}

.cmpl-aov-set__uitleg {
  margin: 4px 0 0;
  font-size:var(--fs-label);
  line-height: 1.5;
  color: var(--cmpl-aov-muted);
}

.cmpl-aov-set__prijs {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}

.cmpl-aov-set__was {
  color: var(--cmpl-aov-muted);
  text-decoration: line-through;
  font-size:var(--fs-body);
}

.cmpl-aov-set__nu {
  font-weight: 700;
  font-size:var(--fs-lead);
  color: var(--cmpl-aov-ink);
}

.cmpl-aov-set__besparing {
  padding: 4px 12px;
  border-radius: var(--r-rond);
  background: #f4f9f5;
  font-size:var(--fs-label);
  font-weight: 600;
  color: var(--cmpl-aov-sage);
}

.cmpl-aov-set .chip {
  text-decoration: none;
}

/* De onderdelen van de set, met het compliment van de bezoeker erop.
   Hier stond alleen een zin die de producten opsomde. Een raster dat zich naar
   de breedte voegt: op een telefoon twee naast elkaar, op een scherm drie of
   vier, zonder een breekpunt per aantal. */
.cmpl-aov-set__lijst {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 12px;
}

.cmpl-aov-set__item {
  margin: 0;
}

/* Het vinkje zelf staat buiten beeld maar blijft bereikbaar met het toetsenbord;
   het label eromheen is het klikvlak, en de rand toont de stand. Een verstopt
   vakje met `display:none` zou geen focus meer kunnen krijgen. */
.cmpl-aov-set__vink {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

.cmpl-aov-set__label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 8px;
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  border-radius: var(--r-vlak);
  background: var(--cmpl-aov-white, var(--kleur-grond));
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, opacity .16s;
}

.cmpl-aov-set__vink:checked + .cmpl-aov-set__label {
  border-color: var(--cmpl-aov-sage, #3e5942);
  box-shadow:none;
}

/* Uitgevinkt is niet weg, maar wel duidelijk uit. */
.cmpl-aov-set__vink:not(:checked) + .cmpl-aov-set__label {
  opacity: .5;
}

.cmpl-aov-set__vink:focus-visible + .cmpl-aov-set__label {
  outline: 2px solid var(--cmpl-aov-sage, #3e5942);
  outline-offset: 2px;
}

.cmpl-aov-set__beeld {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-vlak);
  overflow: hidden;
  background: var(--cmpl-aov-cream);
}

.cmpl-aov-set__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cmpl-aov-set__naam {
  font-size:var(--fs-label);
  line-height: 1.35;
  color: var(--cmpl-aov-ink);
}

.cmpl-aov-set__los {
  font-size:var(--fs-label);
  font-weight: 600;
  color: var(--cmpl-aov-muted);
  margin-top: auto;
}

.cmpl-aov-set__voorwaarde {
  margin: 8px 0 0;
  font-size:var(--fs-label);
  color: var(--cmpl-aov-muted);
}

/* --- Cadeauverpakking ---------------------------------------------------- */

.cmpl-aov-verpakking {
  margin: 16px 0 0;
  padding: 16px 16px;
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  border-radius: var(--r-vlak);
  background: var(--cmpl-aov-white);
}

.cmpl-aov-verpakking__label {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.cmpl-aov-verpakking__label input {
  flex: 0 0 auto;
  margin-top: 4px;
  width: 18px;
  height: 18px;
  accent-color: var(--cmpl-aov-terra-deep);
}

.cmpl-aov-verpakking__label strong {
  display: block;
  color: var(--cmpl-aov-ink);
}

.cmpl-aov-verpakking__uitleg {
  display: block;
  margin-top: 4px;
  font-size:var(--fs-label);
  line-height: 1.5;
  color: var(--cmpl-aov-muted);
}

/* --- Productpagina: meer exemplaren en de suggestie --------------------- */

.cmpl-aov-meer {
  margin: 12px 0 0;
  font-size:var(--fs-label);
  line-height: 1.5;
  color: var(--cmpl-aov-muted);
}


/* --- De bestelknop van het klassieke afrekenen --------------------------- */

/* Hoort strikt niet bij orderwaarde, maar wordt hier pas zichtbaar: zodra het
   klassieke afrekenen rendert, staat de knop "Bestelling plaatsen" in het paars
   van WooCommerce midden in een warm crème ontwerp. Het thema laat het
   betaalblok bewust ongemoeid (daar gaan betalingen stuk), dus de opmaak hoort
   op de uitvoer. Raakt niets aan het formulier zelf. */
#place_order,
.woocommerce #place_order {
  display: block;
  width: 100%;
  border: 0;
  border-radius: var(--r-rond);
  padding: 16px 24px;
  background: linear-gradient(160deg, var(--kleur-rood), var(--kleur-rood));
  color: var(--kleur-grond);
  font: 600 var(--fs-body)/1.2 inherit;
  cursor: pointer;
  transition: transform .15s ease, filter .2s ease;
}

@media (hover: hover) and (pointer: fine){#place_order:hover,
.woocommerce #place_order:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
}}

/* --- Telefoon (390px) --------------------------------------------------- */

@media (max-width: 480px) {
  .cmpl-aov-bump,
  .cmpl-aov-set,
  .cmpl-aov-verpakking {
    padding: 16px;
  }

  .cmpl-aov-bump__actie {
    flex: 1 1 100%;
  }

  .cmpl-aov-bump__actie .chip {
    width: 100%;
  }

  .cmpl-aov-meelift-label {
    white-space: normal;
  }
}

/* --- Verzendregel in het winkelwagen-overzicht ---------------------------- */

/*
 * `wc_cart_totals_shipping_html()` levert een <tr> met <th> en <td>. Die staat
 * hier in een div, dus de browser maakt er anonieme tabelvakken van en de
 * flex-verdeling van .sum-line grijpt er niet op aan. Vandaar block met een
 * eigen verdeling: label links, bedrag rechts, uitleg eronder.
 */
.sum-line--verzending {
  display: block;
}

.sum-line--verzending .woocommerce-shipping-totals,
.sum-line--verzending tr {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
}

.sum-line--verzending th {
  font-weight: inherit;
  text-align: left;
}

.sum-line--verzending td {
  text-align: right;
}

.sum-line--verzending ul,
.sum-line--verzending li {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* De uitleg onder het tarief mag zachter en op een eigen regel. */
.sum-line--verzending .woocommerce-shipping-destination,
.sum-line--verzending p {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size:var(--fs-label);
  color: var(--cmpl-aov-muted);
  text-align: left;
}

/* --- Collectie: "Dit ontwerp kan ook op" --------------------------------- */

/*
 * Rustige links onder de koopknop, geen tweede knoppenrij. De bezoeker heeft net
 * gekozen; dit is een terzijde en hoort niet met de koopknop te concurreren.
 */
.cmpl-collectie-vormen {
  margin: 16px 0 0;
  padding: 16px 16px;
  background: var(--cmpl-aov-cream);
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  border-radius: var(--r-vlak);
}

.cmpl-collectie-vormen__titel {
  margin: 0 0 8px;
  font-size:var(--fs-label);
  letter-spacing: .02em;
  color: var(--cmpl-aov-muted);
}

.cmpl-collectie-vormen__lijst {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmpl-collectie-vormen__lijst a {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--cmpl-aov-ink);
  background: var(--cmpl-aov-white);
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  border-radius: var(--r-rond);
  transition: border-color .2s ease;
}

.cmpl-collectie-vormen__lijst a:focus-visible{
  border-color: var(--cmpl-aov-terra);
}
@media (hover: hover) and (pointer: fine){.cmpl-collectie-vormen__lijst a:hover{
  border-color: var(--cmpl-aov-terra);
}}

.cmpl-collectie-vormen__naam {
  font-size:var(--fs-body);
}

.cmpl-collectie-vormen__prijs {
  font-size:var(--fs-label);
  color: var(--cmpl-aov-muted);
}

/* De prijsopmaak van WooCommerce mag hier niet zijn eigen kleur meebrengen. */
.cmpl-collectie-vormen__prijs .amount,
.cmpl-collectie-vormen__prijs bdi,
.cmpl-collectie-vormen__prijs del,
.cmpl-collectie-vormen__prijs ins {
  color: inherit;
  background: none;
  text-decoration: none;
}

@media (max-width: 720px) {
  .cmpl-collectie-vormen__lijst a {
    flex: 1 1 auto;
    justify-content: center;
  }
}
/* --- De cross-sell onder de koopknop ------------------------------------
   Eén klikbare regel: beeld links, waar het over gaat in het midden, prijs
   rechts. Dezelfde vorm als een regel in de winkelwagen, want dat is wat het
   is — een voorstel om er iets aan toe te voegen.

   Het thumbnail stond op 52 pixels; te klein om een wenskaart van een tegeltje
   te onderscheiden, en dan is een plaatje alleen maar ruis. 64 is waar het
   product herkenbaar wordt. */
.cmpl-aov-upsell {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
  padding: 12px 16px;
  border:var(--lijn-dikte) solid var(--cmpl-aov-line);
  border-radius: var(--r-vlak);
  text-decoration: none;
  color: inherit;
  background: var(--kleur-grond);
  transition: border-color .2s ease, transform .15s ease;
  /* Een hele regel aanraakbaar, en nooit lager dan een duim. */
  min-height: 64px;
}

.cmpl-aov-upsell:focus-visible{
  border-color: var(--cmpl-aov-terra, var(--kleur-rood));
  transform: translateY(-1px);
}
@media (hover: hover) and (pointer: fine){.cmpl-aov-upsell:hover{
  border-color: var(--cmpl-aov-terra, var(--kleur-rood));
  transform: translateY(-1px);
}}

.cmpl-aov-upsell__beeld {
  flex: 0 0 64px;
  width: 64px;
}

.cmpl-aov-upsell__beeld img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-vlak);
}

.cmpl-aov-upsell__tekst {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cmpl-aov-upsell__titel {
  font-family: 'Newsreader', serif;
  font-size:var(--fs-body);
  line-height: 1.2;
  color: var(--ink);
}

.cmpl-aov-upsell__onder {
  font-size:var(--fs-label);
  color: var(--muted, #6e685e);
}

.cmpl-aov-upsell__prijs {
  flex: none;
  font-weight: 700;
  font-size:var(--fs-body);
  color: var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .cmpl-aov-upsell { transition: none; }
  @media (hover: hover) and (pointer: fine){.cmpl-aov-upsell:hover { transform: none; }}
}

/* Zonder productfoto blijft de regel een regel, alleen zonder het vak ervoor. */
.cmpl-aov-upsell--zonder-beeld { padding-left: 16px; }