/* ==========================================================================
   Hibayat, richting B "Souk".
   Warm en compact. Ronde hoeken, zachte schaduw, dichte sectieruimte,
   snelle overgangen. Alle kleuren staan als HSL-token in :root.
   ========================================================================== */

:root {
  /* --- oppervlak en inkt --- */
  --bg:         hsl(30 42% 96%);
  --vlak:       hsl(26 36% 92%);
  --kaart:      hsl(34 50% 98%);
  --inkt:       hsl(20 24% 15%);
  --inkt-zacht: hsl(20 16% 28%);
  --gedempt:    hsl(20 12% 42%);
  --lijn:       hsl(24 24% 86%);
  --lijn-diep:  hsl(22 18% 74%);

  /* --- accent, klei en terracotta --- */
  --klei:       hsl(14 44% 47%);
  --klei-diep:  hsl(14 42% 34%);
  --klei-vaag:  hsl(14 52% 94%);
  --diep:       hsl(16 30% 22%);

  /* --- signaal --- */
  --verzend:      hsl(150 32% 34%);
  --verzend-vaag: hsl(150 30% 93%);
  --let-op:       hsl(30 72% 42%);
  --let-op-vaag:  hsl(38 82% 93%);
  --uit:          hsl(20 8% 62%);

  /* --- ritme, merkbaar compacter dan richting A --- */
  --sectie:    2.75rem;
  --sectie-lg: 3.75rem;
  --marge:     1.1rem;
  --maat:      80rem;
  --rond:      1rem;
  --rond-lg:   1.25rem;
  --rond-pil:  999px;
  --schaduw:   0 1px 2px hsl(20 24% 15% / .04), 0 6px 18px hsl(20 24% 15% / .06);
  --schaduw-op: 0 2px 6px hsl(20 24% 15% / .07), 0 14px 32px hsl(20 24% 15% / .10);

  /* --- typografie, lage schaal --- */
  --display: 'Fraunces', Georgia, serif;
  --tekst:   'Manrope', 'Helvetica Neue', sans-serif;
  --snel:    180ms cubic-bezier(.3, .8, .4, 1);
  --normaal: 260ms cubic-bezier(.3, .8, .4, 1);

  --onderbalk: 4.1rem;
}

@media (min-width: 60rem) {
  :root { --marge: 2rem; --sectie: 4rem; --sectie-lg: 5.5rem; --onderbalk: 0rem; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --snel: 1ms; --normaal: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important; animation-iteration-count: 1 !important;
    transition-duration: 1ms !important; scroll-behavior: auto !important;
  }
}

/* ============================================================ basis */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0; background: var(--bg); color: var(--inkt);
  font-family: var(--tekst); font-size: 1rem; font-weight: 400; line-height: 1.55;
  overflow-x: hidden;
  padding-bottom: var(--onderbalk);
}
/* ruimte onder de laatste sectie zodat de vaste koopbalk niets afdekt */
body.heeft-sticky { padding-bottom: calc(var(--onderbalk) + 3.4rem); }
@media (min-width: 60rem) { body.heeft-sticky { padding-bottom: 0; } }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.14;
  letter-spacing: -.015em; margin: 0;
  font-variation-settings: 'SOFT' 40, 'WONK' 1;
}
h1 { font-size: clamp(1.75rem, 5.5vw, 2.4rem); }
h2 { font-size: clamp(1.45rem, 4.4vw, 2rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.3rem); }

p { margin: 0 0 .8em; }
::selection { background: var(--klei-vaag); }
:focus-visible { outline: 2px solid var(--klei); outline-offset: 2px; }

.overslaan { position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--inkt); color: var(--kaart); padding: .8rem 1.2rem; border-radius: var(--rond); }
.overslaan:focus { left: .5rem; top: .5rem; }

.visueel-verborgen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ============================================================ bouwstenen */

.omhulsel { width: 100%; max-width: var(--maat); margin-inline: auto; padding-inline: var(--marge); }
.sectie    { padding-block: var(--sectie); }
.sectie-lg { padding-block: var(--sectie-lg); }

.oogje { font-size: .6875rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--klei-diep); }

.kopblok { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.1rem; }
.kopblok h2 { margin-top: .25rem; }
.kopblok .meer { font-size: .8125rem; font-weight: 600; color: var(--klei-diep);
  white-space: nowrap; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }

.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.4rem; border: 0; border-radius: var(--rond-pil);
  background: var(--klei); color: hsl(34 50% 98%);
  font-size: .875rem; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  box-shadow: var(--schaduw);
  transition: background var(--snel), box-shadow var(--snel), transform var(--snel);
}
.knop:hover { background: var(--klei-diep); box-shadow: var(--schaduw-op); }
.knop:active { transform: translateY(1px); }
.knop--vol { width: 100%; padding-block: 1rem; font-size: .9375rem; }
.knop--stil { background: var(--kaart); color: var(--inkt); border: 1.5px solid var(--lijn-diep);
  box-shadow: none; }
.knop--stil:hover { background: var(--vlak); border-color: var(--inkt); }
.knop--donker { background: var(--diep); }
.knop--donker:hover { background: var(--inkt); }
.knop[disabled] { background: var(--vlak); color: var(--uit); box-shadow: none; cursor: not-allowed; }
.knop[disabled]:hover { background: var(--vlak); }

.tekstknop { background: none; border: 0; padding: 0; cursor: pointer;
  font-size: .8125rem; font-weight: 700; color: var(--klei-diep);
  border-bottom: 1.5px solid currentColor; padding-bottom: 1px; }

/* notitie van de ontwerper, duidelijk geen winkeltekst */
.notitie { display: block; font-size: .75rem; line-height: 1.5; color: var(--klei-diep);
  background: var(--klei-vaag); border-radius: var(--rond); padding: .55rem .7rem; margin-block: .5rem 1rem; }
.notitie::before { content: 'Ontwerpnotitie '; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; font-size: .625rem; }

/* placeholder voor wat de huidige shop niet vermeldt */
.tekort { display: inline-flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  background: var(--let-op-vaag); border-radius: .5rem; padding: .35rem .6rem;
  color: hsl(30 62% 26%); font-size: .75rem; line-height: 1.4; }
.tekort::before { content: 'nog invullen'; font-size: .5625rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--let-op); white-space: nowrap; }
.tekort--blok { display: flex; }

/* ============================================================ kop */

.usp-boven {
  background: var(--diep); color: hsl(30 30% 88%);
  font-size: .75rem; font-weight: 600;
}
.usp-boven__spoor { display: flex; gap: 1.4rem; padding-block: .6rem; overflow-x: auto;
  scrollbar-width: none; white-space: nowrap; }
.usp-boven__spoor::-webkit-scrollbar { display: none; }
.usp-boven { position: relative; }
.usp-boven::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2rem;
  background: linear-gradient(to left, var(--diep), transparent); pointer-events: none; }
@media (min-width: 60rem) { .usp-boven::after { display: none; } }
.usp-boven__spoor span { display: inline-flex; align-items: center; gap: .4rem; flex: 0 0 auto; }
.usp-boven__spoor b { color: hsl(34 50% 98%); font-weight: 800; }
@media (min-width: 60rem) { .usp-boven__spoor { justify-content: center; gap: 2.5rem; } }

.kop { position: sticky; top: 0; z-index: 60; background: hsl(30 42% 96% / .92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--lijn); }
.kop__rij { display: flex; align-items: center; gap: .9rem; padding-block: .7rem; }
.merk { font-family: var(--display); font-weight: 600; font-size: 1.3rem;
  letter-spacing: .01em; margin-right: auto; }
@media (min-width: 60rem) { .merk { margin-right: 1.5rem; font-size: 1.45rem; } }

.kop__nav { display: none; gap: .2rem; margin-right: auto; }
.kop__nav > * { position: relative; }
.kop__nav button, .kop__nav a {
  background: none; border: 0; cursor: pointer; padding: .5rem .75rem;
  border-radius: var(--rond-pil); font-size: .875rem; font-weight: 600;
  transition: background var(--snel);
}
.kop__nav button:hover, .kop__nav a:hover { background: var(--vlak); }
@media (min-width: 60rem) { .kop__nav { display: flex; } }

.icoonknop { background: none; border: 0; cursor: pointer; padding: .4rem;
  display: inline-flex; align-items: center; position: relative; border-radius: var(--rond-pil); }
.icoonknop:hover { background: var(--vlak); }
.icoonknop svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.teller { position: absolute; top: -1px; right: -1px; min-width: 1.05rem; height: 1.05rem;
  padding-inline: .2rem; background: var(--klei); color: hsl(34 50% 98%);
  border-radius: var(--rond-pil); font-size: .625rem; font-weight: 800;
  line-height: 1.05rem; text-align: center; }
.kop__hamburger { display: inline-flex; }
@media (min-width: 60rem) { .kop__hamburger { display: none; } }

/* megamenu met swatches en prijs, richting B */
.mega {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--kaart); border-bottom: 1px solid var(--lijn);
  box-shadow: var(--schaduw-op);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--snel), transform var(--snel), visibility var(--snel);
}
@media (min-width: 60rem) { .mega { display: block; } }
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; }
.mega__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
  padding-block: 1.5rem 1.8rem; }
.mega__item { display: grid; grid-template-columns: 4.5rem 1fr; gap: .9rem;
  padding: .7rem; border-radius: var(--rond); transition: background var(--snel); }
.mega__item:hover { background: var(--vlak); }
.mega__item img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: .6rem; }
.mega__item h4 { font-size: 1.05rem; margin-bottom: .1rem; }
.mega__item .prijs { font-size: .8125rem; font-weight: 700; color: var(--klei-diep); }
.mega__swatches { display: flex; gap: .3rem; margin-top: .45rem; }

/* mobiel menu */
.blad {
  position: fixed; inset: auto 0 0 0; z-index: 85; background: var(--kaart);
  border-radius: var(--rond-lg) var(--rond-lg) 0 0; box-shadow: var(--schaduw-op);
  max-height: 84svh; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform var(--normaal);
}
.blad[data-open="true"] { transform: none; }
.blad__kop { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--marge) .8rem; border-bottom: 1px solid var(--lijn); flex: 0 0 auto; }
.blad__kop h3 { font-size: 1.15rem; }
.blad__lijf { flex: 1 1 auto; overflow-y: auto; padding: var(--marge);
  padding-bottom: calc(var(--marge) + env(safe-area-inset-bottom)); }
.blad__voet { flex: 0 0 auto; border-top: 1px solid var(--lijn); background: var(--vlak);
  padding: var(--marge); padding-bottom: calc(var(--marge) + env(safe-area-inset-bottom)); }
.blad__greep { width: 2.5rem; height: 4px; border-radius: var(--rond-pil);
  background: var(--lijn-diep); margin: .5rem auto 0; }

.menulijst { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.menulijst a { display: flex; align-items: center; gap: .9rem; padding: .6rem;
  border-radius: var(--rond); transition: background var(--snel); }
.menulijst a:hover { background: var(--vlak); }
.menulijst img { width: 3.2rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .55rem; }
.menulijst strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.05rem; }
.menulijst small { font-size: .75rem; color: var(--gedempt); }
.menukop { font-size: .6875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gedempt); margin: 1.2rem 0 .5rem; }
.menukop:first-child { margin-top: 0; }

/* vaste onderbalk op mobiel, het duidelijkste structuurverschil met richting A */
.onderbalk {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: hsl(34 50% 98% / .95); backdrop-filter: blur(10px);
  border-top: 1px solid var(--lijn);
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.onderbalk a, .onderbalk button {
  background: none; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .18rem;
  padding: .55rem .2rem .5rem; font-size: .625rem; font-weight: 700;
  color: var(--gedempt); position: relative;
}
.onderbalk svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; }
.onderbalk [aria-current="page"] { color: var(--klei); }
.onderbalk .teller { top: .25rem; right: calc(50% - 1.35rem); }
@media (min-width: 60rem) { .onderbalk { display: none; } }

/* ============================================================ hero, gesplitst */

.hero { padding-top: 1.2rem; }
.hero__doos { display: grid; gap: .9rem; grid-template-columns: 1fr; }
.hero__beeld { position: relative; border-radius: var(--rond-lg); overflow: hidden;
  background: var(--vlak); }
.hero__beeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center 26%; }
.hero__op {
  position: absolute; inset: auto 0 0 0; padding: 1.4rem 1.1rem 1.1rem;
  background: linear-gradient(to top, hsl(16 30% 18% / .86) 0%, hsl(16 30% 18% / .5) 38%, transparent 82%);
  color: hsl(34 50% 98%);
}
.hero__op h1 { margin-bottom: .3rem; }
.hero__op p { font-size: .875rem; opacity: .92; margin-bottom: .9rem; }
.hero__zij { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
.hero__tegel {
  display: flex; gap: .7rem; align-items: center; padding: .6rem;
  background: var(--kaart); border-radius: var(--rond); box-shadow: var(--schaduw);
  transition: transform var(--snel), box-shadow var(--snel);
}
.hero__tegel:hover { transform: translateY(-2px); box-shadow: var(--schaduw-op); }
.hero__tegel img { width: 2.7rem; aspect-ratio: 3 / 4; object-fit: cover; border-radius: .55rem; flex: 0 0 auto; }
@media (min-width: 26rem) { .hero__tegel img { width: 3.1rem; } }
.hero__tegel strong { display: block; font-family: var(--display); font-weight: 600; font-size: .8125rem; }
@media (min-width: 26rem) { .hero__tegel strong { font-size: .9375rem; } }
.hero__tegel small { font-size: .6875rem; color: var(--gedempt); display: block; line-height: 1.35; }
.hero__tegel span { min-width: 0; }
.hero__tegel strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (min-width: 60rem) {
  .hero__doos { grid-template-columns: 1.55fr 1fr; gap: 1.1rem; }
  .hero__beeld img { aspect-ratio: 5 / 4; object-position: center 30%; }
  .hero__op { padding: 2.5rem 2rem 2rem; }
  .hero__zij { grid-template-columns: 1fr; align-content: space-between; }
  .hero__tegel { padding: .8rem; }
  .hero__tegel img { width: 4rem; }
}

/* ============================================================ rails */

.rail { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity;
  padding-bottom: .4rem; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge);
  scrollbar-width: none; }
.rail::-webkit-scrollbar { display: none; }
.rail > * { flex: 0 0 min(62vw, 15rem); scroll-snap-align: start; }
@media (min-width: 60rem) {
  .rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem;
          margin-inline: 0; padding-inline: 0; overflow: visible; }
  .rail > * { flex: initial; }
}

/* ============================================================ productkaart */

.kaart { background: var(--kaart); border-radius: var(--rond-lg); overflow: hidden;
  box-shadow: var(--schaduw); display: flex; flex-direction: column;
  transition: box-shadow var(--snel), transform var(--snel); }
.kaart:hover { box-shadow: var(--schaduw-op); transform: translateY(-2px); }
.kaart__beeld { position: relative; aspect-ratio: 3 / 4; background: var(--vlak); }
.kaart__beeld img { width: 100%; height: 100%; object-fit: cover;
  transition: opacity var(--snel); }
.kaart__beeld img.hover { position: absolute; inset: 0; opacity: 0; }
.kaart:hover .kaart__beeld img.hover { opacity: 1; }
.kaart__vlag { position: absolute; top: .55rem; left: .55rem; z-index: 2;
  background: var(--diep); color: hsl(34 50% 98%); border-radius: var(--rond-pil);
  font-size: .625rem; font-weight: 800; letter-spacing: .06em; padding: .22rem .55rem; }
.kaart__snel { position: absolute; right: .5rem; bottom: .5rem; z-index: 2;
  background: hsl(34 50% 98% / .94); border: 0; border-radius: var(--rond-pil);
  padding: .4rem .75rem; font-size: .6875rem; font-weight: 700; cursor: pointer;
  box-shadow: var(--schaduw); }
.kaart__info { padding: .7rem .8rem .85rem; display: grid; gap: .15rem; }
.kaart__naam { font-family: var(--display); font-weight: 600; font-size: 1.0625rem; line-height: 1.2; }
.kaart__kleur { font-size: .75rem; color: var(--gedempt); }
.kaart__prijs { font-size: .9375rem; font-weight: 800; margin-top: .1rem; }
.kaart__prijs small { font-weight: 500; font-size: .6875rem; color: var(--gedempt); }

.swatches { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.swatch { width: 1.1rem; height: 1.1rem; border-radius: var(--rond-pil); padding: 0; cursor: pointer;
  border: 1px solid var(--lijn-diep); background: var(--kleur); position: relative;
  transition: box-shadow var(--snel); }
.swatch[data-actief="true"] { box-shadow: 0 0 0 1.5px var(--kaart), 0 0 0 3px var(--klei); }
.swatch--op::after { content: ''; position: absolute; inset: 0; border-radius: var(--rond-pil);
  background: linear-gradient(to top left, transparent calc(50% - .6px),
    var(--inkt-zacht) calc(50% - .6px), var(--inkt-zacht) calc(50% + .6px), transparent calc(50% + .6px)); }
.swatch--groot { width: 2.4rem; height: 2.4rem; }
.swatches--meer { font-size: .6875rem; color: var(--gedempt); align-self: center; font-weight: 700; }

/* ============================================================ verzendblok */

.verzenduitleg { background: var(--verzend-vaag); border-radius: var(--rond-lg); padding: 1.3rem; }
.verzenduitleg h2 { margin-bottom: .4rem; }
.verzenduitleg p { font-size: .875rem; color: var(--inkt-zacht); }
.verzendmeter { margin-top: 1rem; }
.verzendmeter__spoor { height: 8px; border-radius: var(--rond-pil); background: hsl(150 20% 86%);
  overflow: hidden; }
.verzendmeter__vulling { height: 100%; border-radius: var(--rond-pil); background: var(--verzend);
  transition: width var(--normaal); }
.verzendmeter__schaal { display: flex; justify-content: space-between; font-size: .75rem;
  color: var(--gedempt); margin-top: .4rem; font-weight: 600; }

/* ============================================================ tegels */

.tegels { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 60rem) { .tegels { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; } }
.tegel { position: relative; border-radius: var(--rond-lg); overflow: hidden; background: var(--vlak);
  transition: transform var(--snel); }
.tegel:hover { transform: translateY(-2px); }
.tegel img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.tegel__op { position: absolute; inset: auto 0 0 0; padding: 1.4rem .8rem .7rem;
  background: linear-gradient(to top, hsl(16 30% 18% / .8), transparent);
  color: hsl(34 50% 98%); }
.tegel__op strong { display: block; font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.tegel__op small { font-size: .6875rem; opacity: .9; }

/* ============================================================ stof in tabbladen */

.tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; margin-bottom: 1rem; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; background: var(--kaart); border: 1.5px solid var(--lijn);
  border-radius: var(--rond-pil); padding: .5rem 1rem; cursor: pointer;
  font-size: .8125rem; font-weight: 700; transition: all var(--snel); }
.tab[aria-selected="true"] { background: var(--diep); border-color: var(--diep); color: hsl(34 50% 98%); }

.tabvlak { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 48rem) { .tabvlak { grid-template-columns: 1fr 1.15fr; gap: 1.8rem; } }
.tabvlak img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--rond-lg); }

.spec { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: 0; }
.spec li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline;
  padding: .55rem 0; border-bottom: 1px solid var(--lijn); font-size: .875rem; }
.spec li:first-child { border-top: 1px solid var(--lijn); }
.spec .sleutel { color: var(--gedempt); font-weight: 600; flex: 0 0 auto; }
.spec .waarde { text-align: right; }

/* ============================================================ recensies */

.recensierail { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x proximity;
  margin-inline: calc(var(--marge) * -1); padding: .2rem var(--marge) .6rem; scrollbar-width: none; }
.recensierail::-webkit-scrollbar { display: none; }
.recensie { flex: 0 0 min(80vw, 22rem); scroll-snap-align: start;
  background: var(--kaart); border-radius: var(--rond-lg); padding: 1.1rem;
  box-shadow: var(--schaduw); display: flex; flex-direction: column; justify-content: space-between; }
.recensie blockquote { margin: 0 0 .8rem; font-size: .9375rem; line-height: 1.5; }
.recensie figcaption { font-size: .75rem; color: var(--gedempt); font-weight: 600; }
@media (min-width: 60rem) {
  .recensierail { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
                  margin-inline: 0; padding-inline: 0; overflow: visible; }
  .recensie { flex: initial; }
}

/* ============================================================ accordeon */

.vouw { border-bottom: 1px solid var(--lijn); }
.vouw:first-of-type { border-top: 1px solid var(--lijn); }
.vouw__knop { width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .95rem 0; text-align: left; font-size: .9375rem; font-weight: 700; }
.vouw__knop::after { content: ''; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid var(--klei); border-bottom: 2px solid var(--klei);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--snel); }
.vouw__knop[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
.vouw__lijf { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--normaal); }
.vouw__knop[aria-expanded="true"] + .vouw__lijf { grid-template-rows: 1fr; }
.vouw__inhoud { overflow: hidden; }
.vouw__inhoud > :last-child { margin-bottom: 1rem; }

/* ============================================================ voet */

.voet { background: var(--diep); color: hsl(30 26% 80%); padding-block: 2.5rem 1.5rem;
  border-radius: var(--rond-lg) var(--rond-lg) 0 0; margin-top: var(--sectie); }
.voet a:hover { color: hsl(34 50% 98%); }
.voet__raster { display: grid; gap: 1.8rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .voet__raster { grid-template-columns: 1.6fr 1fr 1fr 1.4fr; gap: 1.5rem; } }
.voet h4 { font-family: var(--tekst); font-size: .6875rem; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: hsl(30 16% 58%); margin-bottom: .7rem; }
.voet ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; font-size: .875rem; }
.voet__merk { font-family: var(--display); font-weight: 600; font-size: 1.4rem;
  color: hsl(34 50% 98%); margin-bottom: .3rem; }
.voet__onder { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid hsl(16 20% 30%);
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  font-size: .75rem; color: hsl(30 14% 60%); }
.voet__betaal { display: flex; flex-wrap: wrap; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.voet__betaal li { background: hsl(16 20% 28%); border-radius: .35rem; padding: .18rem .45rem;
  font-size: .625rem; font-weight: 600; }

.previewmelding { background: var(--let-op-vaag); padding: .9rem var(--marge);
  font-size: .8125rem; color: hsl(30 62% 24%); text-align: center; }

/* ============================================================ lades */

.gordijn { position: fixed; inset: 0; z-index: 80; background: hsl(16 30% 18% / .42);
  opacity: 0; visibility: hidden; transition: opacity var(--normaal), visibility var(--normaal); }
.gordijn[data-open="true"] { opacity: 1; visibility: visible; }

.lade { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(26rem, 100%); background: var(--bg);
  display: flex; flex-direction: column; box-shadow: var(--schaduw-op);
  transform: translateX(100%); transition: transform var(--normaal); }
.lade[data-open="true"] { transform: none; }
@media (max-width: 47.99rem) {
  .lade { top: auto; left: 0; width: 100%; max-height: 88svh;
          border-radius: var(--rond-lg) var(--rond-lg) 0 0; transform: translateY(101%); }
  .lade[data-open="true"] { transform: none; }
}
.lade__kop { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem var(--marge); border-bottom: 1px solid var(--lijn); flex: 0 0 auto; }
.lade__kop h3 { font-size: 1.15rem; }
.lade__lijf { flex: 1 1 auto; overflow-y: auto; padding: var(--marge); }
.lade__voet { flex: 0 0 auto; border-top: 1px solid var(--lijn); background: var(--vlak);
  padding: var(--marge); padding-bottom: calc(var(--marge) + env(safe-area-inset-bottom)); }

.wagenregel { display: grid; grid-template-columns: 4rem 1fr auto; gap: .8rem;
  padding: .8rem 0; border-bottom: 1px solid var(--lijn); }
.wagenregel img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: .6rem; }
.wagenregel__naam { font-family: var(--display); font-weight: 600; font-size: 1rem; line-height: 1.2; }
.wagenregel__meta { font-size: .75rem; color: var(--gedempt); }
.aantal { display: inline-flex; align-items: center; border: 1.5px solid var(--lijn);
  border-radius: var(--rond-pil); margin-top: .45rem; background: var(--kaart); }
.aantal button { background: none; border: 0; width: 1.9rem; height: 1.8rem; cursor: pointer;
  font-size: .95rem; line-height: 1; border-radius: var(--rond-pil); }
.aantal span { min-width: 1.5rem; text-align: center; font-size: .8125rem; font-weight: 700; }

.bijverkoop { display: grid; grid-template-columns: 3.4rem 1fr; gap: .8rem; align-items: center;
  background: var(--klei-vaag); border-radius: var(--rond); padding: .75rem; margin-top: 1rem; }
.bijverkoop img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: .5rem; }
.bijverkoop h4 { font-family: var(--tekst); font-size: .8125rem; font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase; color: var(--klei-diep); margin-bottom: .2rem; }
.bijverkoop p { font-size: .8125rem; margin: 0 0 .4rem; }

.leeg { text-align: center; padding: 2.5rem 0; color: var(--gedempt); }

/* ============================================================ productpagina */

.pdp { display: grid; grid-template-columns: 1fr; gap: 1.2rem; padding-top: 1rem; }
@media (min-width: 60rem) {
  .pdp { grid-template-columns: 5.5rem minmax(0, 1fr) 23rem; gap: 1.5rem; align-items: start; }
}

.thumbs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none;
  order: 2; margin-inline: calc(var(--marge) * -1); padding-inline: var(--marge); }
.thumbs::-webkit-scrollbar { display: none; }
.thumb { flex: 0 0 3.6rem; padding: 0; border: 2px solid transparent; border-radius: .6rem;
  overflow: hidden; cursor: pointer; background: none; transition: border-color var(--snel); }
.thumb[aria-current="true"] { border-color: var(--klei); }
.thumb img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
@media (min-width: 60rem) {
  .thumbs { order: 0; flex-direction: column; overflow: visible; margin-inline: 0; padding-inline: 0;
            position: sticky; top: 5rem; }
  .thumb { flex: initial; }
}

.hoofdbeeld { order: 1; position: relative; border-radius: var(--rond-lg); overflow: hidden;
  background: var(--vlak); }
.hoofdbeeld img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; max-height: 52svh; }
@media (min-width: 60rem) { .hoofdbeeld img { max-height: none; } .hoofdbeeld { order: 0; } }

.koop { order: 3; }
@media (min-width: 60rem) { .koop { order: 0; position: sticky; top: 5rem; } }

.kruimels { font-size: .75rem; color: var(--gedempt); margin-bottom: .5rem; font-weight: 600; }
.kruimels span { margin-inline: .35rem; opacity: .6; }

.koop h1 { margin-bottom: .2rem; }
.koop__onder { font-size: .8125rem; color: var(--gedempt); }
.prijsrij { display: flex; align-items: baseline; gap: .5rem; margin-block: .6rem .2rem; }
.prijsrij .nu { font-size: 1.5rem; font-weight: 800; }
.prijsrij .btw { font-size: .75rem; color: var(--gedempt); font-weight: 600; }

.keuze { margin-block: 1rem; }
.keuze__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  margin-bottom: .5rem; font-size: .8125rem; }
.keuze__kop .label { font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  font-size: .6875rem; color: var(--gedempt); }
.keuze__kop .waarde { font-weight: 700; }

.maten { display: grid; grid-template-columns: repeat(auto-fit, minmax(3.1rem, 1fr)); gap: .4rem; }
.maat { padding: .7rem .4rem; cursor: pointer; background: var(--kaart);
  border: 1.5px solid var(--lijn-diep); border-radius: var(--rond); font-size: .875rem;
  font-weight: 700; transition: all var(--snel); }
.maat:hover:not([disabled]):not([aria-disabled="true"]) { border-color: var(--inkt); }
.maat[aria-pressed="true"] { background: var(--diep); border-color: var(--diep); color: hsl(34 50% 98%); }
.maat[disabled], .maat[aria-disabled="true"] { color: var(--uit); border-color: var(--lijn); cursor: pointer;
  background: linear-gradient(to top right, var(--kaart) calc(50% - .7px),
    var(--lijn-diep) calc(50% - .7px), var(--lijn-diep) calc(50% + .7px), var(--kaart) calc(50% + .7px)); }

.seintje { margin-top: .8rem; background: var(--vlak); border-radius: var(--rond); padding: .9rem; }
.seintje p { font-size: .8125rem; margin-bottom: .6rem; }
.seintje__rij { display: flex; gap: .4rem; }
.seintje input { flex: 1; min-width: 0; padding: .65rem .8rem; border: 1.5px solid var(--lijn-diep);
  border-radius: var(--rond-pil); background: var(--kaart); font-size: .8125rem; }
.seintje button { padding-inline: 1rem; font-size: .8125rem; }
.seintje[hidden] { display: none; }

.gerust { list-style: none; margin: .9rem 0 0; padding: .75rem .85rem; display: grid; gap: .55rem;
  background: var(--kaart); border-radius: var(--rond); box-shadow: var(--schaduw); }
.gerust li { display: flex; gap: .6rem; align-items: flex-start; font-size: .8125rem; }
.gerust svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: .18rem;
  stroke: var(--klei); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gerust strong { font-weight: 800; }
.gerust span { color: var(--gedempt); }

/* maak je set compleet, in richting B direct onder de knop */
.compleet { margin-top: 1rem; background: var(--klei-vaag); border-radius: var(--rond-lg);
  padding: .9rem; }
.compleet__kop { font-size: .6875rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--klei-diep); margin-bottom: .6rem; }
.compleet__rij { display: grid; grid-template-columns: 4rem 1fr; gap: .8rem; align-items: center; }
.compleet img { aspect-ratio: 3 / 4; object-fit: cover; border-radius: .6rem; }
.compleet h4 { font-family: var(--display); font-weight: 600; font-size: 1rem; margin-bottom: .1rem; }
.compleet p { font-size: .75rem; color: var(--inkt-zacht); margin: 0 0 .45rem; }

/* sticky koopbalk, in richting B altijd zichtbaar op mobiel */
.stickykoop {
  position: fixed; left: 0; right: 0; bottom: var(--onderbalk); z-index: 65;
  background: hsl(34 50% 98% / .96); backdrop-filter: blur(10px);
  border-top: 1px solid var(--lijn);
  padding: .55rem var(--marge);
  display: flex; align-items: center; gap: .8rem;
  transform: translateY(130%); transition: transform var(--normaal);
}
.stickykoop[data-zichtbaar="true"] { transform: none; }
.stickykoop__info { flex: 1; min-width: 0; }
.stickykoop__naam { font-family: var(--display); font-weight: 600; font-size: .9375rem;
  line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stickykoop__meta { font-size: .6875rem; color: var(--gedempt); font-weight: 600; }
.stickykoop .knop { padding: .7rem 1.1rem; font-size: .8125rem; }
@media (min-width: 60rem) { .stickykoop { display: none; } }

/* ============================================================ collectiepagina */

.filterbalk { position: sticky; top: 3.4rem; z-index: 50;
  background: hsl(30 42% 96% / .94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn); }
.filterbalk__rij { display: flex; gap: .4rem; align-items: center; padding-block: .6rem;
  overflow-x: auto; scrollbar-width: none; }
.filterbalk__rij::-webkit-scrollbar { display: none; }
.filterbalk { position: sticky; }
.filterbalk::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 2rem;
  background: linear-gradient(to left, var(--bg), transparent); pointer-events: none; }
@media (min-width: 72rem) { .filterbalk::after { display: none; } }
.filterknop { flex: 0 0 auto; background: var(--kaart); border: 1.5px solid var(--lijn);
  border-radius: var(--rond-pil); padding: .4rem .85rem; cursor: pointer; white-space: nowrap;
  font-size: .8125rem; font-weight: 700; transition: all var(--snel); }
.filterknop[aria-pressed="true"] { background: var(--diep); border-color: var(--diep);
  color: hsl(34 50% 98%); }
.filterbalk__label { flex: 0 0 auto; font-size: .625rem; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gedempt); }
.filterbalk__groep { display: flex; gap: .35rem; align-items: center; flex: 0 0 auto; }
.filterbalk__scheiding { width: 1px; height: 1.3rem; background: var(--lijn); flex: 0 0 auto;
  margin-inline: .25rem; }

.resultaat { font-size: .8125rem; color: var(--gedempt); font-weight: 600; padding-block: .9rem .5rem; }
.raster { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .raster { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } }
@media (min-width: 72rem) { .raster { grid-template-columns: repeat(4, 1fr); } }

.snelweergave { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .snelweergave { grid-template-columns: .9fr 1.1fr; } }
.snelweergave img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: var(--rond); max-height: 26svh; }
@media (min-width: 40rem) { .snelweergave img { max-height: none; } }

/* tabel */
.tabel { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.tabel th, .tabel td { padding: .55rem .4rem; text-align: right; border-bottom: 1px solid var(--lijn); }
.tabel th:first-child, .tabel td:first-child { text-align: left; color: var(--gedempt); font-weight: 600; }
.tabel thead th { font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gedempt); }
.tabel tr[data-nadruk] td, .tabel tr[data-nadruk] th:first-child {
  background: var(--klei-vaag); color: var(--klei-diep); font-weight: 800; }