/*
 * SIW Product Kortingen — winkelkant.
 *
 * Themaneutraal: elke kleur en maat staat als variabele met een nette
 * standaard. Een thema zet alleen de variabelen, niet de opmaak zelf.
 * Geen laag (@layer), zodat een thema er met een gewone regel bij kan.
 */

/* Neutrale standaard: grijstinten, zodat het blok in elke winkel netjes staat
   ook als het thema niets instelt. Een thema zet alleen deze variabelen. */
:root {
  --siw-kk-radius: 8px;
  --siw-kk-gap: 0.5rem;
  --siw-kk-rand: #d9d9d9;
  --siw-kk-vlak: #f6f6f6;
  --siw-kk-tekst: inherit;
  --siw-kk-nu-rand: #333;
  --siw-kk-nu-vlak: #333;
  --siw-kk-nu-tekst: #fff;
  --siw-kk-accent: #333;
  --siw-kk-balk: #333;
  --siw-kk-balk-leeg: #d9d9d9;
  /* Het eerstvolgende punt springt eruit met een eigen kleur. */
  --siw-kk-volgende: #2e7d32;
  --siw-kk-volgende-tekst: #fff;
  --siw-kk-volgende-gloed: rgb(46 125 50 / 45%);
}

/* ---------- productpagina ---------- */

.siw-kk-tredes {
  margin-block: 1rem;
  color: var(--siw-kk-tekst);
}

.siw-kk-tredes__kop {
  margin-block-end: 0.5rem;
  font-weight: 700;
}

.siw-kk-tredes__lijst {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--siw-kk-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.siw-kk-trede {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--siw-kk-rand);
  border-radius: var(--siw-kk-radius);
  background: var(--siw-kk-vlak);
  text-align: center;
  line-height: 1.25;
}

.siw-kk-trede--nu {
  border-color: var(--siw-kk-nu-rand);
  background: var(--siw-kk-nu-vlak);
  color: var(--siw-kk-nu-tekst);
}

.siw-kk-trede__aantal {
  font-weight: 700;
}

.siw-kk-trede__waarde {
  font-size: 0.875rem;
}

.siw-kk-tredes__uitleg,
.siw-kk-tredes__voortgang {
  margin-block: 0.5rem 0;
  font-size: 0.9375rem;
}

.siw-kk-tredes__voortgang {
  font-weight: 700;
  color: var(--siw-kk-accent);
}

/* ---------- voortgangsbalk ----------
   Punten met een lijn ertussen, zoals een tijdlijn. De lijn loopt van het
   midden van het eerste punt tot het midden van het laatste, dus hij begint en
   eindigt netjes onder een stip. --siw-kk-punten staat op het element zelf. */

.siw-kk-balk {
  --siw-kk-stip: 0.75rem;
  /* Het vlaggetje ("nog 1 boek") stond eerst bóven de stippen en had daar een
     hele regel voor nodig. Nu neemt het de plek van de stip zelf in, dus hier
     alleen nog de ruimte die het vlaggetje boven de lijn uitsteekt. */
  --siw-kk-boven: 0.5rem;
  position: relative;
  margin-block: 0.9rem 0;
  padding-block-start: var(--siw-kk-boven);
}

.siw-kk-balk__rail {
  position: absolute;
  inset-inline: calc(50% / var(--siw-kk-punten, 3));
  inset-block-start: calc(var(--siw-kk-boven) + var(--siw-kk-stip) / 2 - 1px);
  block-size: 2px;
  background: var(--siw-kk-balk-leeg);
}

.siw-kk-balk__vul {
  display: block;
  block-size: 100%;
  inline-size: 0;
  background: var(--siw-kk-balk);
  transition: inline-size 0.35s ease;
}

.siw-kk-balk__punten {
  display: grid;
  grid-template-columns: repeat(var(--siw-kk-punten, 3), minmax(0, 1fr));
  gap: 0 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.siw-kk-punt {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.15rem;
  text-align: center;
  line-height: 1.2;
}

/* Aantal en wat het oplevert op één regel: dat scheelt hoogte en leest als een
   zin ("2 - 10% korting"). Wrap erbij, want op een smal scherm past het niet en
   dan is twee regels beter dan tekst die over de buurman heen valt. */
.siw-kk-punt__tekst {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.05rem 0.35rem;
}

/* Het vlaggetje van het eerstvolgende punt gaat op de plek van de stip staan,
   midden op de lijn. Het dekt de stip af en scheelt een hele regel hoogte.
   Staat buiten de stroom, zodat de andere stippen op één lijn blijven. */
.siw-kk-punt__hint {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: absolute;
  inset-block-start: calc(var(--siw-kk-stip) / 2);
  z-index: 1;
  transform: translateY(-50%);
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--siw-kk-volgende);
  color: var(--siw-kk-volgende-tekst);
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.siw-kk-punt__hint[hidden] {
  display: none;
}

/* Het stapelicoon voor de tekst in het vlaggetje, zodat het vlaggetje bij
   hetzelfde teken hoort als de mandjeregels. */
.siw-kk-punt__icoon {
  flex: 0 0 auto;
  inline-size: 0.8em;
  block-size: 0.8em;
}

/* Waar een vlaggetje staat, hoeft de stip niet meer: die zou er toch achter
   verdwijnen. Kent een browser :has niet, dan blijft de stip gewoon staan en
   dekt het vlaggetje hem af. Dus geen enkel risico. */
/* Let op de voorwaarde hieronder: het vlaggetje-element staat er altijd, ook
   leeg, en bevat dan nog het icoon. Met :not(:empty) verdween dus elke stip,
   op elke balk. Het hidden-attribuut zegt of het vlaggetje echt in beeld is. */
.siw-kk-punt:has(.siw-kk-punt__hint:not([hidden])) .siw-kk-punt__stip {
  visibility: hidden;
}

.siw-kk-punt__stip {
  inline-size: var(--siw-kk-stip);
  block-size: var(--siw-kk-stip);
  border: 2px solid var(--siw-kk-balk-leeg);
  border-radius: 50%;
  background: #fff;
  transition: background-color 0.25s ease, border-color 0.25s ease;
}

.siw-kk-punt.is-gehaald .siw-kk-punt__stip {
  border-color: var(--siw-kk-balk);
  background: var(--siw-kk-balk);
}

/* Het punt waar je nú staat krijgt een ring, zodat het opvalt tussen de
   punten die je al gehad hebt. */
.siw-kk-punt.is-nu .siw-kk-punt__stip {
  box-shadow: 0 0 0 3px rgb(0 0 0 / 12%);
}

/* Het eerstvolgende punt: eigen kleur en een rustige puls. Dat is het enige
   dat nog te halen valt, dus daar mag het oog naartoe. */
.siw-kk-punt.is-volgende .siw-kk-punt__stip {
  border-color: var(--siw-kk-volgende);
  background: var(--siw-kk-volgende);
  animation: siw-kk-pols 1.9s ease-out infinite;
}

/* Staat het vlaggetje op de plek van de stip, dan pulseert het vlaggetje. De
   gloed volgt de ovale vorm vanzelf, want het is een box-shadow. */
.siw-kk-punt.is-volgende .siw-kk-punt__hint {
  animation: siw-kk-pols 1.9s ease-out infinite;
}

.siw-kk-punt.is-volgende .siw-kk-punt__kop,
.siw-kk-punt.is-volgende .siw-kk-punt__label {
  color: var(--siw-kk-volgende);
  font-weight: 700;
  opacity: 1;
}

@keyframes siw-kk-pols {
  0% {
    box-shadow: 0 0 0 0 var(--siw-kk-volgende-gloed);
  }

  70% {
    box-shadow: 0 0 0 0.5rem transparent;
  }

  100% {
    box-shadow: 0 0 0 0 transparent;
  }
}

/* Beweging is hier versiering: wie er last van heeft, krijgt hem stil. */
@media (prefers-reduced-motion: reduce) {
  .siw-kk-punt.is-volgende .siw-kk-punt__stip,
  .siw-kk-punt.is-volgende .siw-kk-punt__hint {
    animation: none;
    box-shadow: 0 0 0 3px var(--siw-kk-volgende-gloed);
  }
}

.siw-kk-punt__kop {
  margin-block-start: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 700;
}

.siw-kk-punt__label {
  font-size: 0.75rem;
  opacity: 0.75;
}

.siw-kk-punt.is-nu .siw-kk-punt__label {
  opacity: 1;
}

/* De volledige zin staat er nog wel, maar alleen voor schermlezers: in beeld
   vertellen het vlaggetje en het oplichtende punt het verhaal al. */
.siw-kk-balk__tekst {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- "Maak het compleet" ----------
   Een rij artikelen met een plusje ertussen. Op een smal scherm schuift de rij
   horizontaal (scroll-snap), zodat er niets in elkaar gedrukt wordt. */

.siw-kk-collectie {
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid var(--siw-kk-rand);
  border-radius: var(--siw-kk-radius);
  background: var(--siw-kk-vlak);
}

.siw-kk-collectie__kop {
  margin-block-end: 1.25rem;
  text-align: center;
}

.siw-kk-collectie__bovenkop {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--siw-kk-accent);
}

.siw-kk-collectie__titel {
  margin: 0.2rem 0 0;
  font-size: 1.5rem;
}

/* ---------- uitlegvenster: kruisje en voorbeeldbadge ---------- */

.siw-kk-uitleg {
  position: relative;
}

.siw-kk-uitleg__sluitvorm {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-end: 0.5rem;
  margin: 0;
}

.siw-kk-uitleg__kruis {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.6;
}

.siw-kk-uitleg__kruis:hover,
.siw-kk-uitleg__kruis:focus-visible {
  opacity: 1;
}

/* De kop mag niet onder het kruisje doorlopen. */
.siw-kk-uitleg__kop {
  padding-inline-end: 2rem;
}

/* Voorbeeldbadge onder een streep: laten zien waar je naar zoekt werkt beter
   dan het beschrijven. */
.siw-kk-uitleg__merk {
  margin-block-start: 1rem;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--siw-kk-rand);
}

.siw-kk-uitleg__merk-tekst {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
}

.siw-kk-collectie__rij {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(9.5rem, 1fr);
  gap: 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 1rem;
}

.siw-kk-boek {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.4rem;
  scroll-snap-align: start;
  text-align: center;
}

/* Het plusje tussen twee artikelen. Zuiver sier, dus verborgen voor
   schermlezers via content in ::before op een aria-hidden vrij element. */
.siw-kk-boek + .siw-kk-boek::before {
  content: "+";
  position: absolute;
  inset-inline-start: -1.25rem;
  inset-block-start: 3rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--siw-kk-rand);
  transform: translateX(-50%);
}

.siw-kk-boek__foto {
  position: relative;
  display: block;
  inline-size: 100%;
}

.siw-kk-boek__foto img {
  inline-size: 100%;
  block-size: auto;
  border-radius: calc(var(--siw-kk-radius) / 1.5);
}

.siw-kk-boek__label {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-start: 0.4rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--siw-kk-balk);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
}

.siw-kk-boek__naam {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.25;
}

.siw-kk-boek__naam a {
  color: inherit;
  text-decoration: none;
}

.siw-kk-boek__prijs {
  margin: 0;
  font-weight: 700;
}

.siw-kk-boek__kies {
  inline-size: 100%;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--siw-kk-balk);
  border-radius: 999px;
  background: transparent;
  color: var(--siw-kk-balk);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
}

.siw-kk-boek.is-gekozen .siw-kk-boek__kies {
  background: var(--siw-kk-balk);
  color: #fff;
}

/* Eén knop, twee teksten: welke je ziet hangt af van de stand. */
.siw-kk-boek__kies-aan,
.siw-kk-boek.is-gekozen .siw-kk-boek__kies-uit {
  display: none;
}

.siw-kk-boek.is-gekozen .siw-kk-boek__kies-aan {
  display: inline;
}

.siw-kk-boek__mandje {
  display: none;
  margin: 0;
  font-size: 0.8125rem;
  color: var(--siw-kk-volgende);
  font-weight: 700;
}

.siw-kk-boek.is-inmandje .siw-kk-boek__kies {
  display: none;
}

.siw-kk-boek.is-inmandje .siw-kk-boek__mandje {
  display: block;
}

.siw-kk-collectie__voet {
  margin-block-start: 1.25rem;
  text-align: center;
}

.siw-kk-collectie__knop {
  padding: 0.7rem 1.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--siw-kk-volgende);
  color: var(--siw-kk-volgende-tekst);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.siw-kk-collectie__knop[disabled] {
  opacity: 0.6;
  cursor: progress;
}

.siw-kk-collectie__melding {
  margin-block: 0.6rem 0;
  font-weight: 700;
  color: var(--siw-kk-accent);
}

.siw-kk-collectie__melding:empty {
  display: none;
}

.siw-kk-collectie__mandje-link {
  color: inherit;
}

/* ---------- winkelmandje ---------- */

.siw-kk-mandje {
  margin-block: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--siw-kk-rand);
  border-radius: var(--siw-kk-radius);
  background: var(--siw-kk-vlak);
}

/* Alle acties delen één vlak. De eerste balk heeft daarbinnen geen eigen marge
   nodig: de padding van het vlak doet dat al. */
.siw-kk-mandje .siw-kk-balk {
  margin-block-start: 0;
}

/* De ruimte tussen de balken met gap, niet met een marge: een rij die wegvalt
   laat dan ook geen lege ruimte achter. */
.siw-kk-mandje {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Een balk die nog niets te melden heeft staat op hidden. Dan valt zijn rij ook
   weg, en een vlak zonder enkele zichtbare balk verdwijnt helemaal. */
.siw-kk-mandje__rij:has(> .siw-kk-balk[hidden]) {
  display: none;
}

.siw-kk-mandje:not(:has(.siw-kk-balk:not([hidden]))) {
  display: none;
}

.siw-kk-mandje__kop {
  margin: 0 0 0.4rem;
  font-weight: 700;
}

.siw-kk-mandje__balk {
  inline-size: 100%;
  block-size: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: var(--siw-kk-balk-leeg);
  appearance: none;
}

/* De balk moet in elke browser dezelfde kleur hebben. */
.siw-kk-mandje__balk::-webkit-progress-bar {
  border-radius: 999px;
  background: var(--siw-kk-balk-leeg);
}

.siw-kk-mandje__balk::-webkit-progress-value {
  border-radius: 999px;
  background: var(--siw-kk-balk);
}

.siw-kk-mandje__balk::-moz-progress-bar {
  border-radius: 999px;
  background: var(--siw-kk-balk);
}

.siw-kk-mandje__stand {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
}

.siw-kk-mandje__korting {
  color: var(--siw-kk-accent);
}

.siw-kk-mandje__nog {
  display: block;
}

/* Een artikel dat niet toegevoegd kon worden: dat moet je zien, niet raden. */
.siw-kk-collectie__fout {
  display: block;
  margin-block-start: 0.3rem;
  color: #a3423c;
  font-weight: 700;
}

/* Het vinkje voor "Gekozen": maakt in één oogopslag duidelijk dat dit artikel
   meegaat zodra je op de knop onderaan drukt. */
.siw-kk-boek__vink {
  margin-inline-end: 0.25rem;
}

/* ---------- uitleg achter een vraagteken ----------
   Klein rond knopje rechtsboven in het vlak, met een venster erachter. De rij
   eronder heeft position: relative nodig; dat regelt .siw-kk-mandje__rij. */

.siw-kk-mandje__rij {
  position: relative;
}

.siw-kk-info {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 2;
  display: inline-grid;
  place-items: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: 1px solid var(--siw-kk-rand);
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  opacity: 0.65;
}

.siw-kk-info:hover,
.siw-kk-info:focus-visible {
  opacity: 1;
}

.siw-kk-uitleg {
  inline-size: min(28rem, calc(100vw - 2rem));
  padding: 1.25rem 1.5rem 1.5rem;
  border: 1px solid var(--siw-kk-rand);
  border-radius: var(--siw-kk-radius);
  color: var(--siw-kk-tekst);
}

.siw-kk-uitleg::backdrop {
  background: rgb(0 0 0 / 40%);
}

.siw-kk-uitleg__kop {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
}

.siw-kk-uitleg__tekst {
  margin: 0 0 0.75rem;
}

.siw-kk-uitleg__sluit {
  margin-block-start: 0.5rem;
}

/* ---------- merkje bij een mandjeregel ----------
   Klein en rustig: het is een aanwijzing, geen label dat om aandacht vraagt.
   Hetzelfde icoon staat in het uitlegvenster, daar hangt de herkenning aan. */

.siw-kk-stapel {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--siw-kk-nu-vlak);
  color: var(--siw-kk-nu-tekst);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.4;
}

.siw-kk-stapel__icoon {
  flex: 0 0 auto;
}

.siw-kk-uitleg__merk {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-block-start: 0.75rem;
  border-block-start: 1px solid var(--siw-kk-rand);
  font-size: 0.9rem;
}

.siw-kk-uitleg__icoon {
  flex: 0 0 auto;
  margin-block-start: 0.15rem;
}

/* De zin onder de staffel begint met het stapelicoon. inline-flex houdt het
   icoon op de eerste regel staan, ook als de zin doorloopt. */
.siw-kk-tredes__uitleg {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}

/* Op een smal scherm past "3+ 15% korting" net wel naast de buurman (gemeten:
   101 px tekst in een vak van 103), en dan staan de punten bijna tegen elkaar.
   Daar dus weer onder elkaar: de winst in hoogte weegt niet op tegen tekst die
   je moet uitpluizen. */
@media (max-width: 575.98px) {
  .siw-kk-punt__tekst {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* ---------- smalle balk: alleen gratis verzending ----------
   Een actie die alleen verzendkosten wegneemt, krijgt geen tijdlijn met punten.
   Dat was te veel drukte naast de stapelkorting. Eén dun balkje met de zin
   eronder, in een eigen kleur (groen leest als "gehaald" en botst niet met het
   terracotta van de korting). */

.siw-kk-balk--smal {
  --siw-kk-verzending: #4f7a3f;

  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-block: 0;
  padding-block-start: 0;
}

.siw-kk-smal__rail {
  block-size: 6px;
  border-radius: 999px;
  background: var(--siw-kk-balk-leeg);
  overflow: hidden;
}

.siw-kk-smal__vul {
  display: block;
  block-size: 100%;
  inline-size: 0;
  border-radius: inherit;
  background: var(--siw-kk-verzending);
  transition: inline-size 0.35s ease;
}

/* De zin hoort hier wél in beeld: zonder punten eromheen is dit het enige dat
   vertelt waar je staat. */
.siw-kk-smal__tekst {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--siw-kk-verzending);
}

/* De verzendbalk staat los onder het vlak: geen rand, geen achtergrond, alleen
   wat lucht erboven. In het vlak vocht hij om aandacht met de stapelkorting. */
.siw-kk-mandje__los {
  margin-block: 0.9rem 1rem;
}