/* ==========================================================================
   Publieke site: koptekst, beeldbanden, secties, collectie, productpagina,
   mandje, bestelflow en voettekst.
   ========================================================================== */

/* --- Raster --------------------------------------------------------------- */

.omhulsel {
  width: 100%;
  max-width: var(--maat-breed);
  margin-inline: auto;
  padding-inline: 20px;
}
@media (min-width: 900px) { .omhulsel { padding-inline: 40px; } }

.sectie { padding-block: var(--sp-8); }
.sectie--kort { padding-block: var(--sp-7); }

/* ==========================================================================
   Gekleurde banden
   --------------------------------------------------------------------------
   De pagina is een reeks banden, elk met een eigen kleur uit de kaart. Dat
   is wat een site kleurrijk maakt zonder dat het rommelig wordt: binnen een
   band klopt alles bij elkaar, en de banden wisselen elkaar af.
   ========================================================================== */

.sectie--creme  { background: var(--c-creme); }
.sectie--zand   { background: var(--c-zand); }
.sectie--blush  { background: var(--c-blush-zacht); }
.sectie--salie  { background: var(--c-salie-zacht); }
.sectie--oker   { background: var(--c-oker-zacht); }
.sectie--terra  { background: var(--c-terra-zacht); }
.sectie--pruim  { background: var(--c-pruim-zacht); }

/* Een band in de merkkleur, met lichte tekst erop. */
.sectie--merk {
  background: var(--c-merk);
  color: var(--c-op-donker);
}
.sectie--merk h1, .sectie--merk h2, .sectie--merk h3 { color: var(--c-op-donker); }
.sectie--merk .lead, .sectie--merk p { color: rgba(251, 245, 234, .82); }
.sectie--merk .opschrift { color: rgba(251, 245, 234, .6); }
.sectie--merk a { color: var(--c-op-donker); }

.sectiekop {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-3) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.sectiekop h2 { max-width: 14em; }
.sectiekop__intro { max-width: 34em; }

/* ==========================================================================
   Koptekst
   --------------------------------------------------------------------------
   Volle breedte. Bovenaan doorzichtig over de foto heen, met witte tekst.
   Zodra je begint te scrollen wordt hij crème met een zachte schaduw.
   ========================================================================== */

.aankondiging {
  background: var(--c-merk);
  color: var(--c-op-donker);
  text-align: center;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  padding: 9px 16px;
}
.aankondiging a { color: inherit; }

.kop {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-creme);
  border-bottom: 1px solid transparent;
  transition: background var(--vloei), box-shadow var(--vloei),
              border-color var(--vloei), color var(--vloei);
}

/* Over een beeldband heen begint de balk doorzichtig met witte tekst. */
.kop[data-overbeeld="ja"][data-gescrold="nee"] {
  background: transparent;
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .22);
}
.kop[data-overbeeld="ja"][data-gescrold="nee"] .kop__naam,
.kop[data-overbeeld="ja"][data-gescrold="nee"] .kop__regel,
.kop[data-overbeeld="ja"][data-gescrold="nee"] nav a,
.kop[data-overbeeld="ja"][data-gescrold="nee"] .taalknop { color: #fff; }
.kop[data-overbeeld="ja"][data-gescrold="nee"] .mandknop,
.kop[data-overbeeld="ja"][data-gescrold="nee"] .menuknop {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .55);
  color: #fff;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.kop[data-overbeeld="ja"][data-gescrold="nee"] .kop__merk svg { filter: brightness(0) invert(1); opacity: .92; }

.kop[data-gescrold="ja"] {
  background: rgba(252, 249, 243, .94);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  box-shadow: var(--schaduw-kop);
  border-bottom-color: var(--c-line-soft);
}

.kop__binnen {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  width: 100%;
  max-width: none;
  min-height: 80px;
  padding-inline: clamp(16px, 3vw, 46px);
  transition: min-height var(--vloei);
}
.kop[data-gescrold="ja"] .kop__binnen { min-height: 64px; }

.kop__merk {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: inherit; white-space: nowrap;
}
.kop__merk img, .kop__merk svg {
  width: 46px; height: 46px;
  border-radius: var(--radius-rond);
  transition: width var(--vloei), height var(--vloei);
}
.kop[data-gescrold="ja"] .kop__merk img,
.kop[data-gescrold="ja"] .kop__merk svg { width: 38px; height: 38px; }

/* Merknaam en regel staan naast elkaar, niet boven elkaar. */
.kop__woordmerk { display: flex; align-items: baseline; gap: var(--sp-3); }
.kop__naam {
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1;
  color: var(--c-ink);
}
.kop__punt { opacity: .4; font-size: 11px; }
.kop__regel {
  font-family: var(--font-body);
  font-size: 9.5px;
  letter-spacing: var(--spatie-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--c-ink-soft);
  white-space: nowrap;
}
@media (max-width: 900px) { .kop__punt, .kop__regel { display: none; } }

/* De navigatie vult de volle breedte tussen merk en acties. */
.kop nav { display: none; }
@media (min-width: 940px) {
  .kop nav {
    display: flex; flex: 1;
    justify-content: space-evenly; align-items: center;
    gap: var(--sp-3);
    padding-inline: var(--sp-5);
  }
  .kop nav a {
    font-family: var(--font-body);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: var(--spatie-label);
    text-transform: uppercase;
    text-decoration: none;
    color: var(--c-ink-2);
    padding: 8px 4px;
    position: relative;
  }
  .kop nav a::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 2px;
    height: 2px; border-radius: 2px;
    background: currentColor;
    opacity: .8;
    transition: left var(--vloei), right var(--vloei);
  }
  .kop nav a:hover::after,
  .kop nav a[aria-current="page"]::after { left: 0; right: 0; }
  .kop nav a:hover { color: var(--c-ink); }
}

.kop__acties { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
@media (min-width: 940px) { .kop__acties { margin-left: 0; } }

.taalknop {
  background: none; border: none;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: var(--spatie-label);
  text-transform: uppercase; font-weight: 700;
  color: var(--c-ink-soft); cursor: pointer; padding: 5px 3px;
}
.taalknop[aria-pressed="true"] { color: var(--c-ink); }

/* De mandjeknop is een rond pictogram, net als het hamburgermenu ernaast.
   Het aantal verschijnt als gekleurd bolletje rechtsboven, en alleen als er
   echt iets in het mandje zit. De naam van de knop staat nog wel in de
   pagina, als aria-label, zodat een schermlezer hem gewoon voorleest. */
.mandknop {
  position: relative;
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-rond);
  color: var(--c-ink);
  text-decoration: none; cursor: pointer;
  transition: border-color var(--vloei), color var(--vloei), background var(--vloei);
}
.mandknop:hover { border-color: var(--c-merk); color: var(--c-merk-diep); }
.mandknop__teken { display: block; }
.mandknop__telling {
  position: absolute; top: -3px; right: -3px;
  font-variant-numeric: tabular-nums;
  background: var(--c-terra); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  min-width: 18px; height: 18px;
  display: inline-grid; place-items: center;
  border-radius: var(--radius-rond); padding-inline: 5px;
}
.mandknop__telling[data-leeg="ja"] { display: none; }

/* Als er iets in het mandje gelegd wordt geeft de knop één keer een knikje,
   zodat je ziet dat het gelukt is. */
@keyframes mandje-knik {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.14); }
}
.mandknop[data-knikt="ja"] { animation: mandje-knik .42s var(--vloei); }
@media (prefers-reduced-motion: reduce) {
  .mandknop[data-knikt="ja"] { animation: none; }
}

.menuknop {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-rond);
  width: 42px; height: 42px;
  display: grid; place-items: center;
  cursor: pointer; color: inherit;
}
@media (min-width: 940px) { .menuknop { display: none; } }

.mobielmenu {
  display: none;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line-soft);
  padding: var(--sp-3) clamp(16px, 3vw, 46px) var(--sp-5);
}
.mobielmenu[data-open="ja"] { display: block; }
.mobielmenu a {
  display: block; padding: 13px 0;
  text-decoration: none; color: var(--c-ink);
  border-bottom: 1px solid var(--c-line-soft);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 400;
}
.mobielmenu a:last-of-type { border-bottom: none; }
.mobielmenu__taal {
  display: flex; gap: var(--sp-4);
  padding-top: var(--sp-4); margin-top: var(--sp-2);
  border-top: 1px solid var(--c-line-soft);
}
.mobielmenu__taal .taalknop { font-size: 12px; }
@media (min-width: 621px) { .mobielmenu__taal { display: none; } }

@media (max-width: 620px) {
  .kop__binnen { gap: var(--sp-3); }
  .kop__merk { min-width: 0; }
  .kop__naam { font-size: 21px; }
  .kop__merk img, .kop__merk svg { width: 38px; height: 38px; }
  .kop__acties .taalgroep { display: none; }
  .mandknop { width: 40px; height: 40px; }
}

/* ==========================================================================
   Beeldbanden
   --------------------------------------------------------------------------
   Volbeeldfoto's die over de hele breedte doorlopen, met de tekst eroverheen.
   Dit is de ruggengraat van de pagina. Er zijn negen tekstposities, zodat
   twee banden onder elkaar nooit hetzelfde aanvoelen.
   ========================================================================== */

.band {
  position: relative;
  display: grid;
  min-height: var(--band-hoog-mobiel);
  padding: var(--sp-8) clamp(20px, 5vw, 64px);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-zand);
}
@media (min-width: 900px) { .band { min-height: var(--band-hoog); } }

.band__beeld {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Op een groot scherm blijft de foto staan terwijl de tekst eroverheen
   schuift. Dat geeft de diepte die je bij de mooie webshops ziet. */
@media (min-width: 900px) and (hover: hover) {
  .band--vast { background-attachment: fixed; }
  .band--vast .band__beeld { position: fixed; height: 100vh; top: 0; }
  .band--vast { clip-path: inset(0); }
}
.band::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top,
              rgba(45, 34, 24, calc(var(--band-scrim) + .22)) 0%,
              rgba(45, 34, 24, var(--band-scrim)) 46%,
              rgba(45, 34, 24, calc(var(--band-scrim) * .5)) 100%);
}
.band--licht::after { background: rgba(252, 249, 243, .5); }

.band__inhoud { max-width: 30em; z-index: 1; }
.band__inhoud h2, .band__inhoud h1 {
  color: #fff;
  font-size: var(--fs-4xl);
  font-weight: 300;
  letter-spacing: -.03em;
}
.band__inhoud p { color: rgba(255, 255, 255, .92); font-size: var(--fs-md); margin-top: var(--sp-4); }
.band__inhoud .opschrift { color: rgba(255, 255, 255, .72); }
.band__acties { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.band--licht .band__inhoud h2,
.band--licht .band__inhoud h1 { color: var(--c-ink); }
.band--licht .band__inhoud p { color: var(--c-ink-2); }
.band--licht .band__inhoud .opschrift { color: var(--c-merk-licht); }

/* Negen posities voor de tekst. */
.band[data-plek^="boven"]  { align-items: start; }
.band[data-plek^="midden"] { align-items: center; }
.band[data-plek^="onder"]  { align-items: end; }
.band[data-plek$="links"]  { justify-items: start; text-align: left; }
.band[data-plek$="midden"] { justify-items: center; text-align: center; }
.band[data-plek$="rechts"] { justify-items: end; text-align: right; }
.band[data-plek$="midden"] .band__acties { justify-content: center; }
.band[data-plek$="rechts"] .band__acties { justify-content: end; }

/* Als er nog geen foto is, blijft de band bruikbaar met een warme kleur. */
/* De koordtekening in de lege held past alleen naast de tekst op een breed
   scherm. Op een telefoon zou hij dwars door de kop lopen. */
[data-bandteken] { display: none; }
@media (min-width: 900px) { [data-bandteken] { display: block; } }

.band--leeg { background: linear-gradient(150deg, var(--c-zand), var(--c-blush-zacht) 60%, var(--c-oker-zacht)); }
.band--leeg::after { background: rgba(59, 47, 36, .12); }
.band--leeg .band__inhoud h1,
.band--leeg .band__inhoud h2 { color: var(--c-ink); }
.band--leeg .band__inhoud p { color: var(--c-ink-2); }
.band--leeg .band__inhoud .opschrift { color: var(--c-merk-licht); }
.band--leeg .knop--opfoto { border-color: var(--c-merk); color: var(--c-merk-diep); }
.band--leeg .knop--opfoto:hover { background: var(--c-merk); color: var(--c-op-donker); border-color: var(--c-merk); }
.band--leeg .knop--vol { background: var(--c-merk); border-color: var(--c-merk); color: var(--c-op-donker); }
.band--leeg .knop--vol:hover { background: var(--c-merk-diep); border-color: var(--c-merk-diep); color: var(--c-op-donker); }

/* ==========================================================================
   Held
   ========================================================================== */

.held { padding-block: var(--sp-7) var(--sp-6); }
.held__raster { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; }
@media (min-width: 900px) {
  .held__raster { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--sp-7); }
}
.held h1 { font-weight: 300; }
.held h1 em { font-style: normal; font-weight: 400; color: var(--c-merk); }
.held .lead { margin-top: var(--sp-4); }
.held__acties { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

.held__beeld {
  background: var(--c-creme);
  aspect-ratio: 4 / 3.5;
  overflow: hidden;
  border-radius: var(--radius-groot);
  display: grid; place-items: center;
}
.held__beeld img { width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: no-preference) {
  .zweef { animation: zweven 7s ease-in-out infinite; }
}
@keyframes zweven {
  0%, 100% { transform: translateY(-6px); }
  50%      { transform: translateY(6px); }
}

/* De koordtekening die zichzelf tekent zolang er nog geen foto's zijn. */
.icord-teken { width: 72%; max-width: 320px; overflow: visible; }
.icord-teken [data-lijn] { fill: none; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .icord-teken [data-lijn] {
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: tekenen 2.2s cubic-bezier(.3, .8, .3, 1) forwards;
  }
  .icord-teken [data-lijn]:nth-of-type(2) { animation-delay: .35s; }
  .icord-teken [data-lijn]:nth-of-type(3) { animation-delay: .6s; }
  .icord-teken [data-pom] {
    opacity: 0;
    animation: ploppen .5s cubic-bezier(.3, 1.4, .5, 1) forwards;
    transform-box: fill-box; transform-origin: center;
  }
  .icord-teken [data-pom]:nth-of-type(1) { animation-delay: 1.5s; }
  .icord-teken [data-pom]:nth-of-type(2) { animation-delay: 1.65s; }
  .icord-teken [data-pom]:nth-of-type(3) { animation-delay: 1.8s; }
  .icord-teken [data-pom]:nth-of-type(4) { animation-delay: 1.95s; }
}
@keyframes tekenen { to { stroke-dashoffset: 0; } }
@keyframes ploppen { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

.beloften { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--sp-4); margin-top: var(--sp-7); }
.beloften div {
  font-size: var(--fs-sm); color: var(--c-ink-2);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
}
.beloften b {
  display: block; font-family: var(--font-display);
  color: var(--c-ink); font-size: var(--fs-lg); font-weight: 500;
  letter-spacing: -.015em; margin-bottom: 4px;
}

/* ==========================================================================
   Lopende band met woorden
   --------------------------------------------------------------------------
   Een rustig schuivende regel, in de merkkleur. Stopt zodra je erop staat
   en beweegt niet bij wie minder beweging heeft ingesteld.
   ========================================================================== */

.loopband {
  background: var(--c-merk);
  color: var(--c-op-donker);
  padding-block: var(--sp-4);
  overflow: hidden;
  white-space: nowrap;
}
.loopband__spoor { display: inline-flex; gap: var(--sp-6); will-change: transform; }
.loopband span {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 300;
  letter-spacing: -.01em;
  display: inline-flex; align-items: center; gap: var(--sp-6);
}
.loopband span::after {
  content: "";
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
  .loopband__spoor { animation: schuiven 38s linear infinite; }
  .loopband:hover .loopband__spoor { animation-play-state: paused; }
}
@keyframes schuiven { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Productraster
   ========================================================================== */

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-6) var(--sp-5); }
@media (max-width: 560px) { .raster { grid-template-columns: repeat(2, 1fr); gap: var(--sp-5) var(--sp-3); } }

.kaart { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.kaart__beeld {
  position: relative;
  background: var(--c-creme);
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-groot);
  margin-bottom: var(--sp-3);
  transition: box-shadow var(--vloei);
}
.kaart__beeld img {
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity .45s cubic-bezier(.25,.46,.45,.94), transform var(--vloei-traag);
}
/* Tweede foto eronder, die bij hover doorschijnt. */
.kaart__beeld img + img { position: absolute; inset: 0; opacity: 0; }
.kaart:hover .kaart__beeld img + img { opacity: 1; }
.kaart:hover .kaart__beeld { box-shadow: var(--schaduw-kop); }
.kaart:hover .kaart__beeld img:first-child { transform: scale(1.03); }

.kaart__titel {
  font-family: var(--font-display);
  font-size: var(--fs-lg); font-weight: 500;
  letter-spacing: -.015em; line-height: 1.18; margin-bottom: 2px;
}
.kaart:hover .kaart__titel { color: var(--c-merk-diep); }
.kaart__meta { font-size: var(--fs-sm); color: var(--c-ink-soft); display: flex; gap: var(--sp-3); }
.kaart__prijs { color: var(--c-ink-2); font-variant-numeric: tabular-nums; }

/* Collectiekaart met een eigen kleurtje per stuk. */
.tegel {
  display: flex; flex-direction: column;
  text-decoration: none; color: inherit;
  border-radius: var(--radius-groot);
  overflow: hidden;
  background: var(--tegelkleur, var(--c-creme));
  transition: transform var(--vloei), box-shadow var(--vloei);
}
.tegel:hover { transform: translateY(-4px); box-shadow: var(--schaduw-kop); }
.tegel__beeld { aspect-ratio: 4 / 3; overflow: hidden; }
.tegel__beeld img { width: 100%; height: 100%; object-fit: cover; }
.tegel__tekst { padding: var(--sp-5); }
.tegel__tekst h3 { margin-bottom: 4px; }
.tegel__tekst p { font-size: var(--fs-sm); color: var(--c-ink-2); }

/* --- Filters -------------------------------------------------------------- */

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); align-items: center; }
.filters__groep { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.filters__label {
  font-size: 10.5px; letter-spacing: var(--spatie-label); text-transform: uppercase;
  color: var(--c-ink-soft); font-weight: 700; margin-right: var(--sp-2);
}
.filterknop {
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-knop);
  color: var(--c-ink-2);
  font-family: var(--font-body); font-size: var(--fs-sm);
  padding: 8px 17px; cursor: pointer;
  transition: all var(--vloei);
}
.filterknop:hover { border-color: var(--c-merk); color: var(--c-merk-diep); }
.filterknop[aria-pressed="true"] { background: var(--c-merk); border-color: var(--c-merk); color: var(--c-op-donker); }

/* ==========================================================================
   Productpagina
   ========================================================================== */

.product { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-8); }
@media (min-width: 900px) {
  .product { grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr); gap: var(--sp-7); align-items: start; }
  .product__galerij { position: sticky; top: 100px; }
}

.galerij__groot { background: var(--c-creme); aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-groot); }
.galerij__groot img { width: 100%; height: 100%; object-fit: cover; }
.galerij__strook { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); flex-wrap: wrap; }
.galerij__strook button {
  width: 72px; height: 72px; padding: 0;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-creme); cursor: pointer; overflow: hidden;
  transition: border-color var(--vloei);
}
.galerij__strook button[aria-pressed="true"] { border-color: var(--c-merk); border-width: 2px; }
.galerij__strook img { width: 100%; height: 100%; object-fit: cover; }

.product__kruimel { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-3); }
.product__kruimel a { color: var(--c-ink-soft); }
.product h1 { font-size: var(--fs-2xl); font-weight: 400; }
.product__intro { margin-top: var(--sp-3); color: var(--c-ink-2); font-size: var(--fs-md); }

.prijsregel {
  display: flex; align-items: baseline; gap: var(--sp-3);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-4); border-top: 1px solid var(--c-line-soft);
}
.prijsregel__bedrag {
  font-family: var(--font-display); font-size: 34px; font-weight: 500;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.prijsregel__btw { font-size: var(--fs-sm); color: var(--c-ink-soft); }

.optie { margin-bottom: var(--sp-5); }
.optie__kop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.optie__naam { font-size: 11px; letter-spacing: var(--spatie-label); text-transform: uppercase; font-weight: 700; color: var(--c-ink-soft); }
.optie__gekozen { font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; color: var(--c-ink); }

.stalen { display: flex; flex-wrap: wrap; gap: 10px; }
.staal {
  width: 38px; height: 38px; padding: 0;
  border: 1px solid rgba(0, 0, 0, .08);
  cursor: pointer; border-radius: var(--radius-rond);
  transition: transform var(--vloei), box-shadow var(--vloei);
}
.staal:hover { transform: scale(1.09); }
.staal[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--c-paper), 0 0 0 4px var(--c-merk); }
.staal[disabled] { opacity: .3; cursor: not-allowed; transform: none; }

.keuzes { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.keuze {
  background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--radius-knop);
  color: var(--c-ink-2); font-family: var(--font-body); font-size: var(--fs-sm);
  padding: 10px 19px; cursor: pointer;
  display: inline-flex; gap: 8px; align-items: baseline;
  transition: all var(--vloei);
}
.keuze span { color: var(--c-ink-soft); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.keuze:hover { border-color: var(--c-merk); }
.keuze[aria-pressed="true"] { border-color: var(--c-merk); background: var(--c-creme); color: var(--c-merk-diep); }
.keuze[aria-pressed="true"] span { color: var(--c-merk-diep); }

.tellerregel { display: flex; justify-content: space-between; align-items: baseline; font-size: var(--fs-xs); color: var(--c-ink-soft); margin-top: 6px; }
.productacties { display: flex; flex-direction: column; gap: var(--sp-3); margin-top: var(--sp-5); }

.uitklap { border-top: 1px solid var(--c-line-soft); }
.uitklap summary {
  cursor: pointer; padding: var(--sp-4) 0;
  font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500;
  list-style: none; display: flex; justify-content: space-between; align-items: center;
}
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::after { content: "+"; color: var(--c-ink-soft); font-weight: 300; font-size: 22px; }
.uitklap[open] summary::after { content: "\2013"; }
.uitklap__inhoud { padding-bottom: var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-2); }
.uitklap__inhoud p { max-width: none; }

.specs { display: grid; grid-template-columns: auto 1fr; gap: 8px var(--sp-4); font-size: var(--fs-sm); }
.specs dt { color: var(--c-ink-soft); }
.specs dd { margin: 0; }

/* ==========================================================================
   Kleurenkaart
   ========================================================================== */

.kleurenraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--sp-5); }
.kleurkaart { text-align: center; background: none; border: none; padding: 0; cursor: pointer; font: inherit; color: inherit; }
.kleurkaart i {
  display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-rond);
  border: 1px solid rgba(0, 0, 0, .06);
  transition: transform var(--vloei), box-shadow var(--vloei);
}
.kleurkaart:hover i { transform: scale(1.06); box-shadow: var(--schaduw-zacht); }
.kleurkaart b { display: block; font-family: var(--font-display); font-size: var(--fs-md); font-weight: 500; margin-top: 10px; }
.kleurkaart span { display: block; font-size: var(--fs-xs); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Mandje en bestellen
   ========================================================================== */

.mand { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); padding-block: var(--sp-6) var(--sp-8); }
@media (min-width: 900px) { .mand { grid-template-columns: minmax(0, 1.6fr) minmax(300px, .9fr); gap: var(--sp-7); align-items: start; } }

.mandregel {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius);
  margin-bottom: var(--sp-3);
}
.mandregel__beeld { background: var(--c-creme); aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius); }
.mandregel__beeld img { width: 100%; height: 100%; object-fit: cover; }
.mandregel__titel { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.015em; }
.mandregel__opties { font-size: var(--fs-sm); color: var(--c-ink-soft); margin-top: 4px; }
.mandregel__voet { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.mandregel__prijs { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

.aantal { display: inline-flex; border: 1px solid var(--c-line); border-radius: var(--radius-knop); background: var(--c-paper); overflow: hidden; }
.aantal button { width: 34px; height: 34px; background: none; border: none; cursor: pointer; color: var(--c-ink); font-size: 16px; line-height: 1; }
.aantal button:hover { color: var(--c-merk); }
.aantal output { width: 36px; display: grid; place-items: center; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; border-inline: 1px solid var(--c-line); }

.overzicht {
  background: var(--c-creme);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-groot);
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
}
.overzicht__regel { display: flex; justify-content: space-between; gap: var(--sp-4); font-size: var(--fs-sm); padding-block: 7px; }
.overzicht__regel--totaal {
  border-top: 1px solid var(--c-line); margin-top: var(--sp-3); padding-top: var(--sp-3);
  font-size: var(--fs-md); font-weight: 700;
}
.overzicht__regel b, .overzicht__regel span:last-child { font-variant-numeric: tabular-nums; }

.stappen {
  display: flex; gap: var(--sp-4); flex-wrap: wrap;
  font-size: var(--fs-xs); letter-spacing: var(--spatie-label); text-transform: uppercase;
  color: var(--c-ink-soft); margin-bottom: var(--sp-5);
}
.stappen b { color: var(--c-merk-diep); font-weight: 700; }

/* --- Instagramstrook ------------------------------------------------------ */

.insta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--sp-3); }
.insta a { display: block; aspect-ratio: 1/1; background: var(--c-creme); overflow: hidden; border-radius: var(--radius); }
.insta img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--vloei-traag); }
.insta a:hover img { transform: scale(1.06); }

/* --- Tekstpagina's -------------------------------------------------------- */

.tekstpagina {
  max-width: 46em;
  margin-block: var(--sp-7) var(--sp-8);
  background: var(--c-paper);
  border: 1px solid var(--c-line-soft);
  border-radius: var(--radius-groot);
  padding: var(--sp-6) clamp(20px, 4vw, 56px) var(--sp-7);
}
.tekstpagina h2 { margin-top: var(--sp-6); font-size: var(--fs-xl); }
.tekstpagina h3 { margin-top: var(--sp-5); font-size: var(--fs-md); font-family: var(--font-body); font-weight: 700; letter-spacing: 0; }
.tekstpagina .placeholder {
  border: 1px dashed var(--c-line); background: var(--c-creme);
  border-radius: var(--radius); padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-sm); color: var(--c-ink-soft); margin-bottom: var(--sp-5);
}

/* --- Atelier -------------------------------------------------------------- */

.stapraster { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); counter-reset: stap; }
@media (min-width: 760px) { .stapraster { grid-template-columns: repeat(3, 1fr); } }
.stap__beeld { background: var(--c-creme); aspect-ratio: 4/5; margin-bottom: var(--sp-4); overflow: hidden; border-radius: var(--radius-groot); }
.stap__beeld img { width: 100%; height: 100%; object-fit: cover; }
.stap h3 { font-size: var(--fs-lg); margin-bottom: 6px; }
.stap p { font-size: var(--fs-sm); color: var(--c-ink-2); }
.stap__nr {
  counter-increment: stap;
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: var(--spatie-label); color: var(--c-terra);
}
.stap__nr::before { content: counter(stap, decimal-leading-zero); }

/* ==========================================================================
   Voettekst
   ========================================================================== */

.voet {
  background: var(--c-merk);
  color: var(--c-op-donker);
  padding-block: var(--sp-8) var(--sp-5);
  font-size: var(--fs-sm);
}
.voet__raster { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); margin-bottom: var(--sp-6); }
@media (min-width: 760px) { .voet__raster { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--sp-5); } }
.voet h4 {
  color: rgba(251, 245, 234, .6);
  text-transform: uppercase; letter-spacing: var(--spatie-label);
  font-size: 10.5px; margin-bottom: var(--sp-3);
}
.voet ul { list-style: none; padding: 0; margin: 0; }
.voet li { margin-bottom: 9px; }
.voet a { color: rgba(251, 245, 234, .88); text-decoration: none; }
.voet a:hover { color: #fff; text-decoration: underline; }
.voet p { color: rgba(251, 245, 234, .78); }
.voet .knop { background: var(--c-op-donker); border-color: var(--c-op-donker); color: var(--c-merk-diep); }
.voet .knop:hover { background: #fff; border-color: #fff; color: var(--c-ink); box-shadow: none; }
.voet input { background: rgba(255, 255, 255, .12); border-color: rgba(251, 245, 234, .35); color: var(--c-op-donker); }
.voet input::placeholder { color: rgba(251, 245, 234, .5); }
.voet input:focus { border-color: var(--c-op-donker); box-shadow: 0 0 0 3px rgba(255, 255, 255, .12); }
.voet__slot {
  border-top: 1px solid rgba(251, 245, 234, .22);
  padding-top: var(--sp-4);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5);
  justify-content: space-between; align-items: baseline;
  color: rgba(251, 245, 234, .6); font-size: var(--fs-xs);
}
.voet__merk { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 500; letter-spacing: -.02em; color: var(--c-op-donker); }
.voet__zakelijk { color: rgba(251, 245, 234, .78); font-size: var(--fs-xs); line-height: 1.9; }
.voet__zakelijk b { color: var(--c-op-donker); font-weight: 600; }

.nieuwsbrief { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); }
.nieuwsbrief input { flex: 1; min-width: 0; }
.nieuwsbrief button { white-space: nowrap; padding-inline: 22px; }

/* --- Laadtoestand --------------------------------------------------------- */

.skelet { background: var(--c-creme); animation: pulseren 1.4s ease-in-out infinite; }
@keyframes pulseren { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.leegmelding { padding: var(--sp-7) 0; color: var(--c-ink-soft); text-align: center; }