/* ============================================================
   ZINE — Assortiment
   Bouwt voort op css/zine.css (tokens, letters, ornamenten, nav).
   Honderdeenentwintig echte artikelen, zestien categorieën.
   Indeling naar de aangeleverde referentie: een menukaart met
   hoofdstukken, en per artikel een kaart met een gedeelde onderbalk
   waarvan het rechterhoekje de artikelcode draagt.
   ============================================================ */

/* ── Kop van de pagina ──────────────────────────────────────────────── */
/* De gouden band hangt onder de kop uit en wordt over de pagina heen getekend
   -- zie kop-voet.css: wie bij die rand in de buurt komt telt --kv-boog erbij
   op. Deze pagina begint met een regel tekst pal onder de kop, en die lag op
   een laag scherm twaalf pixels achter het goud. 71/60 is het verval van de
   band zelf en niet van de inktrand; de band steekt daar nog onderuit. */
#shopkop{
  position:relative;
  padding-block:calc(var(--kv-boog,0px) * 71 / 60 + clamp(1.5rem,4vh,2.6rem)) 0;
}
.shopkop__titel{
  margin:0;color:var(--vanille);
  font-size:clamp(2rem,4vw,3rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;
}

/* ── De balk: het menu en het zoekveld ─────────────────────────────────
   Eén regel: links een knop die uitklapt naar de zestien categorieën, rechts
   een klein zoekveld. Hier stonden eerst een zoekbalk over de volle breedte,
   cijfers en zestien pillen in twee rijen.

   Zonder script (geen .is-actief) staat de balk gewoon in de pagina, is het
   menu een rij sprongen naar de hoofdstukken en is er geen zoekveld. Met
   script plakt hij onder de gouden boog van de kop. */
.balk{
  position:relative;z-index:20;
  display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;
  margin-top:clamp(.9rem,2.4vh,1.4rem);
  margin-bottom:clamp(1.6rem,4vh,2.6rem);
  /* Iets breder dan de kolom: hij plakt bovenaan, en zonder die uitloop
     schuiven de kaarten er aan de zijkanten onderdoor in beeld. */
  margin-inline:calc(-1 * clamp(.6rem,1.4vw,1.2rem));
  padding-inline:clamp(.6rem,1.4vw,1.2rem);
}
.balk.is-actief{
  /* Onder de gouden boog (71/60 van --kv-boog: het goud hangt verder dan de
     inkt), niet erachter: zo hoeft er geen boogruimte in de balk zelf, en
     staat hij in rust gewoon dicht onder de titel. */
  position:sticky;top:calc(var(--kophoogte,78px) + var(--kv-boog,0px) * 71 / 60);
  flex-wrap:nowrap;
  padding-block:.6rem;
  /* --hx en --hy zet js/zine-shop.js: de nerf loopt zo door in die van de
     pagina en er is geen naad. */
  background:#2A5731 url(../assets/img/hout-bos.webp) var(--hx,0) var(--hy,0) / 1200px auto;
}
/* Vastgeplakt dekt een strook dezelfde plank het stuk tussen de boog en de
   balk af, en komt er een dun lijntje onder. In rust zijn ze er niet: anders
   lag die strook over de titel. js/zine-shop.js zet .is-vast. */
.balk.is-actief::before{
  content:"";position:absolute;left:0;right:0;bottom:100%;
  height:calc(var(--kv-boog,0px) * 71 / 60 + 2px);
  background:inherit;opacity:0;pointer-events:none;
  background-position:var(--hx,0) calc(var(--hy,0px) + var(--kv-boog,0px) * 71 / 60 + 2px);
}
.balk.is-vast::before{opacity:1}
.balk.is-vast{box-shadow:0 1px 0 rgba(223,237,192,.14)}

.kiezer{position:relative;flex:0 0 auto;min-width:0;max-width:62%}
.balk:not(.is-actief) .kiezer{flex:1 1 100%;max-width:none}

.kiezer__knop{
  display:inline-flex;align-items:center;gap:.6rem;max-width:100%;
  min-height:46px;padding:.5rem 1rem .5rem 1.2rem;
  border:1px solid rgba(223,237,192,.4);border-radius:999px;
  background:var(--inkt);color:var(--vanille);cursor:pointer;
  font:inherit;font-size:1rem;font-weight:500;line-height:1.2;
  transition:border-color .3s var(--ease-ui);
}
.kiezer__keus{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kiezer__knop[hidden]{display:none}
.kiezer__knop:hover,
.kiezer.is-open .kiezer__knop{border-color:var(--goud)}
.kiezer__knop:focus-visible{outline:2px solid var(--goud);outline-offset:3px}
.kiezer__n{color:var(--vanille-zacht);font-weight:400;font-variant-numeric:tabular-nums}
.kiezer__pijl{
  width:20px;height:20px;fill:none;stroke:var(--goud);stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;
  transition:rotate .3s var(--ease-ui);
}
.kiezer.is-open .kiezer__pijl{rotate:180deg}

.kiezer__lijst{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.kiezer.is-uitklap .kiezer__lijst{
  position:absolute;left:0;top:calc(100% + .55rem);
  width:min(54rem,calc(100vw - 2rem));
  display:none;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:.25rem;
  max-height:calc(100svh - var(--kophoogte,78px) - var(--catsh,80px) - 3rem);overflow-y:auto;
  padding:.6rem;
  background:var(--inkt);border:1px solid rgba(223,237,192,.16);border-radius:var(--rond);
  box-shadow:0 1.2rem 2.6rem rgba(9,20,12,.5);
}
.kiezer.is-uitklap.is-open .kiezer__lijst{display:grid}

.kiezer__optie{
  display:flex;align-items:center;justify-content:space-between;gap:.8rem;
  min-height:48px;padding:.55rem .95rem;
  border-radius:var(--rond-in);
  color:var(--vanille);text-decoration:none;
  font-size:1rem;font-weight:400;line-height:1.3;
  transition:background .2s var(--ease-ui),color .2s var(--ease-ui);
}
.kiezer:not(.is-uitklap) .kiezer__optie{border:1px solid rgba(223,237,192,.25);border-radius:999px}
.kiezer__aantal{color:var(--vanille-zacht);font-variant-numeric:tabular-nums}
.kiezer__optie:hover{background:rgba(223,237,192,.08)}
.kiezer__optie[aria-current="true"]{background:var(--vanille);color:var(--inkt)}
.kiezer__optie[aria-current="true"] .kiezer__aantal{color:var(--inkt)}
.kiezer__optie:focus-visible{outline:2px solid var(--goud);outline-offset:-2px}

/* Het zoekveld: klein, rechts van het menu, en het groeit niet verder dan
   nodig. Een kruisje om te wissen zodra er iets in staat. */
.zoeker{position:relative;flex:0 1 17rem;min-width:7.5rem}
.zoeker[hidden]{display:none}
.zoeker__in{
  width:100%;height:46px;padding:0 1rem 0 2.5rem;
  border:1px solid rgba(223,237,192,.3);border-radius:999px;
  background:rgba(18,37,26,.55);color:var(--vanille);
  font:inherit;font-size:1rem;font-weight:400;
  -webkit-appearance:none;appearance:none;
  transition:border-color .3s var(--ease-ui),background .3s var(--ease-ui);
}
.zoeker__in::placeholder{color:var(--vanille-zacht);opacity:1}
/* ruimte voor het kruisje alleen als het er staat */
.zoeker.is-gevuld .zoeker__in{padding-right:2.7rem}
.zoeker__in::-webkit-search-cancel-button{display:none}
.zoeker__in:hover{border-color:rgba(223,237,192,.5)}
.zoeker__in:focus{outline:none;border-color:var(--goud);background:var(--inkt)}
.zoeker__loep{
  position:absolute;left:1rem;top:50%;translate:0 -50%;
  width:18px;height:18px;fill:none;stroke:var(--vanille-zacht);stroke-width:2;stroke-linecap:round;
  pointer-events:none;
}
.zoeker__wis{
  position:absolute;right:3px;top:50%;translate:0 -50%;
  display:grid;place-items:center;width:40px;height:40px;padding:0;
  border:0;border-radius:50%;background:none;color:var(--vanille-zacht);cursor:pointer;
}
.zoeker__wis[hidden]{display:none}
.zoeker__wis svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zoeker__wis:hover{color:var(--vanille)}
.zoeker__wis:focus-visible{outline:2px solid var(--goud);outline-offset:-2px}

@media (max-width:1100px){.kiezer.is-uitklap .kiezer__lijst{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){.kiezer.is-uitklap .kiezer__lijst{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.kiezer__optie{padding-inline:.75rem;font-size:.95rem}}

/* ── Hoofdstuk ──────────────────────────────────────────────────────
   Eén regel met een streep eronder in plaats van een donkere balk: het nummer
   en het aantal stonden buiten die balk te hangen, en twee dikke plakkende
   balken onder elkaar aten een derde van het scherm op. --catsh wordt door de
   javascript gemeten; 64px is een veilige beginwaarde. */
.groep{margin-bottom:clamp(3rem,7vh,5rem)}
.groep:last-child{margin-bottom:0}
/* Alleen de naam en het aantal, zonder lijnen en zonder te plakken: de balk
   bovenaan zegt al waar je bent. Het nummer en de ondertitel zijn weg. */
.groep__kop{
  display:flex;align-items:baseline;gap:.7rem;
  margin:0 0 clamp(.9rem,2.2vh,1.3rem);
}
.groep__woord{min-width:0}
.groep__naam{
  margin:0;font-size:clamp(1.4rem,2.2vw,1.8rem);font-weight:400;line-height:1.15;
  color:var(--vanille);
}
.groep__n{margin:0;font-size:1rem;color:var(--vanille-zacht);white-space:nowrap}
.groep__n span{font-variant-numeric:tabular-nums}

.waren-leeg{margin:0;padding-block:clamp(1rem,4vh,2rem);color:var(--vanille-zacht);font-size:var(--nl-body)}
.waren-leeg[hidden]{display:none}

/* de sterren aan de zijmuren hebben een geplaatste voorouder nodig,
   net als de secties op de homepage */
#waren{position:relative}

/* ── Het raster ─────────────────────────────────────────────────────── */
.waren{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,2vw,1.7rem);
}
@media (min-width:1280px){ .waren{grid-template-columns:repeat(4,1fr)} }
/* 700 en niet 900. Op een iPad in staande stand (768) gaf die grens twee
   kolommen, en met een vierkante tegel is een kaart daar dan driehonderd
   pixels breed met een pak van honderdachtenvijftig er verloren in het
   midden. Drie kolommen maakt de tegel tweehonderdtien en vult het pak
   hem voor driekwart. */
@media (max-width:700px){ .waren{grid-template-columns:repeat(2,1fr)} }

/* Twee naast elkaar tot onderaan, en niet één. Met een vierkante tegel is
   één kaart per rij op een telefoon een heel scherm voor één pot -- in een
   catalogus van honderdeenentwintig artikelen scrol je daar niet doorheen.
   Op 390 is een kaart zo 165 px en vult het pak zijn tegel bijna helemaal. */
@media (max-width:480px){ .waren{grid-template-columns:repeat(2,1fr);gap:.7rem} }

/* De regel met de handelsmaat en de artikelcode staat naast elkaar met de
   ruimte ertussen. In een kolom van honderdvijfenzestig pixels past dat niet:
   "1 × 12 × 520 g" brak dan af en de code stond naast de eerste helft. Onder
   elkaar, met de code eronder. */
@media (max-width:560px){
  .waar__regel{
    flex-direction:column;align-items:flex-start;gap:.1rem;
    margin-top:.28rem;
  }
}

/* ── De kaart ───────────────────────────────────────────────────────
   Wat er stond was een kaart met vier lagen: een pilletje over de foto, een
   naam, een geel blok met de artikelcode, en daaronder de hele omschrijving
   met een uitklapknop. Honderdeenentwintig keer naast elkaar is dat geen
   overzicht meer maar een muur.

   Wat ervoor in de plaats komt: de foto op een licht paneel — dezelfde
   lichte tegel als de vloer op de homepage, en de pakshots zijn uitgesneden,
   dus daar komen ze op tot hun recht — en daaronder op de donkere grond de
   naam, de handelsverpakking en de code. De omschrijving is er nog, maar
   alleen als je hem wilt: hij schuift over de foto zodra je de kaart aanwijst
   of hem met tab bereikt. */
/* Het blok draagt de foto en de gegevens allebei. Het was een licht vlak met
   de tekst eronder op de grond; nu is het een blok van --inkt met de foto er
   als vierkante tegel op, zodat het blok een lijst om die tegel is. Dezelfde
   twee kleuren en dezelfde twee rondingen als de drie artikelen op de
   thuispagina: wie daarvandaan doorklikt komt hetzelfde ding tegen.
   --tg-radius stond hier en is nergens gezet, dus dit viel al die tijd terug
   op de vier pixels van de standaardwaarde. */
.waar{
  position:relative;display:flex;flex-direction:column;
  padding:clamp(.5rem,.9vw,.75rem);
  background:var(--inkt);
  border-radius:var(--rond);
  overflow:hidden;
  transition:transform .45s cubic-bezier(.2,.8,.3,1),
             box-shadow .45s cubic-bezier(.2,.8,.3,1);
}
.waar:hover,.waar:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 clamp(10px,1.6vw,22px) clamp(20px,3vw,40px) rgba(0,0,0,.4);
}
.waar:focus-visible{outline:2px solid var(--goud);outline-offset:3px}

/* De lichte tegel waar het product op staat. Vierkant: een liggend vlak met
   een staand pak erin is aan twee kanten lucht en aan twee kanten krap. */
.waar__beeld{
  --pakh:clamp(118px,13vw,158px);
  position:relative;isolation:isolate;
  display:flex;align-items:center;justify-content:center;
  aspect-ratio:1;
  padding:clamp(.9rem,2vw,1.4rem);
  background:var(--vanille);
  border-radius:var(--rond-in);
  overflow:hidden;
}
/* Zes artikelen hebben nog geen foto; daar staat een tekening van de
   verpakking. Hij krijgt dezelfde schaduw als een foto, zodat een rij met een
   tekening ertussen niet uit de toon valt. */
.waar__beeld svg{height:var(--pakh);max-height:100%;width:auto;display:block;overflow:visible;
  filter:drop-shadow(0 clamp(5px,.9vw,12px) clamp(9px,1.4vw,18px) rgba(20,32,14,.22));
  transition:transform .5s cubic-bezier(.2,.8,.3,1)}
.waar:hover .waar__beeld svg{transform:scale(1.04)}
/* Even hoog als de tekening en niet hoger: anders wordt een kaart met foto
   langer dan zijn buren en gaat de rij scheef staan. De foto's zijn strak op
   het pak bijgesneden, dus die hoogte is ook echt het pak. */
.waar__foto{
  height:var(--pakh);max-height:100%;width:auto;max-width:100%;
  object-fit:contain;display:block;
  filter:drop-shadow(0 clamp(5px,.9vw,12px) clamp(9px,1.4vw,18px) rgba(20,32,14,.22));
  transition:transform .5s cubic-bezier(.2,.8,.3,1);
}
.waar:hover .waar__foto{transform:scale(1.04)}

/* ── De onderregel ──────────────────────────────────────────────────
   Op het blok, onder de tegel, met de binnenruimte van het blok als marge. */
.waar__balk{
  display:flex;flex-direction:column;gap:.22rem;
  padding:.7rem .25rem .15rem;
}
.waar__soort{
  margin:0;font-size:.88rem;font-weight:600;letter-spacing:.03em;
  color:var(--goud);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.waar__naam{
  margin:0;font-size:1.05rem;font-weight:400;line-height:1.3;color:var(--vanille);
  /* "Granaatappelsiroop" past in een kolom van honderdvijfenzestig pixels
     niet op één regel en hing er vier pixels buiten. Afbreken mag. */
  overflow-wrap:break-word;hyphens:auto;
}
.waar__regel{
  margin:.18rem 0 0;display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;
  font-size:.88rem;color:var(--vanille-stil);
  font-variant-numeric:tabular-nums;
}
.waar__code{letter-spacing:.04em;white-space:nowrap}


/* ── de kaart is een link naar de productpagina ─────────────────────────
   De naam is de link (tools/productpaginas.py zet hem erin), en zijn ::after
   beslaat de hele kaart: je tikt de kaart aan, niet een woordje erin. De
   focusring komt op de kaart, niet om de naam. */
.waar{position:relative}
.waar__link{color:inherit;text-decoration:none}
.waar__link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit}
.waar__link:focus-visible{outline:none}
.waar:has(.waar__link:focus-visible){outline:2px solid var(--goud);outline-offset:3px}

/* ── Beweging in de balk ──────────────────────────────────────────────────
   Het menu valt een stukje open en de keuzes komen er een voor een in; bij
   dichtklappen gaat het vlug weer weg (js/zine-shop.js houdt .is-dicht even
   vast). De knop veert, het pijltje draait door, en de naam op de knop
   schuift erin als je iets kiest. Het zoekveld wordt breder zolang je erin
   typt. Alles alleen zonder "minder beweging". */
@media (prefers-reduced-motion:no-preference){
  .kiezer.is-uitklap.is-open .kiezer__lijst{
    transform-origin:0 0;
    animation:lijst-open .34s cubic-bezier(.2,.9,.25,1) both;
  }
  .kiezer.is-uitklap.is-dicht .kiezer__lijst{
    display:grid;pointer-events:none;transform-origin:0 0;
    animation:lijst-dicht .18s cubic-bezier(.4,0,1,1) both;
  }
  .kiezer.is-open .kiezer__optie{
    animation:optie-in .42s cubic-bezier(.2,.9,.25,1) backwards;
    animation-delay:calc(50ms + var(--n,0) * 16ms);
  }
  .kiezer__knop{transition:border-color .3s var(--ease-ui),box-shadow .3s var(--ease-ui),transform .2s var(--ease-ui)}
  .kiezer__knop:hover{box-shadow:0 .6rem 1.4rem rgba(9,20,12,.35)}
  .kiezer__knop:active{transform:scale(.97)}
  .kiezer__pijl{transition:rotate .5s cubic-bezier(.34,1.56,.64,1)}
  .kiezer__optie{transition:background .2s var(--ease-ui),color .2s var(--ease-ui),transform .25s var(--ease-ui)}
  .kiezer__optie:hover{transform:translateX(3px)}
  .kiezer__keus.is-wissel,
  .kiezer__n.is-wissel{animation:label-wissel .45s cubic-bezier(.2,.9,.25,1)}

  .zoeker{transition:flex-basis .45s cubic-bezier(.2,.9,.25,1)}
  .zoeker:focus-within{flex-basis:22rem}
  .zoeker__loep{transition:stroke .3s var(--ease-ui),scale .45s cubic-bezier(.34,1.56,.64,1)}
  .zoeker:focus-within .zoeker__loep{stroke:var(--goud);scale:1.12}
  .zoeker__wis:not([hidden]){animation:wis-in .32s cubic-bezier(.34,1.56,.64,1)}
  .waren-leeg:not([hidden]){animation:optie-in .4s cubic-bezier(.2,.9,.25,1)}

  .balk.is-actief{transition:box-shadow .3s var(--ease-ui)}
  .balk.is-actief::before{transition:opacity .2s linear}
}
@keyframes lijst-open{from{opacity:0;transform:translateY(-10px) scale(.98)}}
@keyframes lijst-dicht{to{opacity:0;transform:translateY(-6px) scale(.99)}}
@keyframes optie-in{from{opacity:0;transform:translateY(6px)}}
@keyframes label-wissel{from{opacity:0;transform:translateY(7px)}}
@keyframes wis-in{from{opacity:0;scale:.4}}