/* ══════════════════════════════════════════════════════════════════════════
   PRODUCTPAGINA — één sjabloon voor elk artikel (tools/productpaginas.py)

   Het pak op een vanille tegel in een inkt-lijst, zoals de etalage en de
   receptkaarten; ernaast de naam, de omschrijving en drie feiten. Twee
   tekstkleuren (vanille en vanille-zacht) en goud alleen voor de soort, de
   knop en de lijnen: het moet rustig zijn, het pak is het beeld.
   ══════════════════════════════════════════════════════════════════════════ */

.product{
  position:relative;
  padding-block:calc(var(--kv-boog,0px) * 71 / 60 + clamp(1.2rem,3.5vh,2.4rem))
                clamp(3rem,9vh,6rem);
}

.product__pad{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;
  margin:-.6rem 0 clamp(.9rem,3vh,2rem);
  font-size:var(--label);font-weight:500;letter-spacing:.04em;
  color:var(--vanille-zacht);
}
.product__pad a{
  /* 44 px hoog om aan te tikken, ook al is de tekst klein; de streep blijft
     onder het woord door hem als achtergrond te tekenen. */
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--vanille-zacht);text-decoration:none;
  background:linear-gradient(rgba(223,237,192,.3),rgba(223,237,192,.3)) no-repeat 0 calc(50% + .75em) / 100% 1px;
}
.product__pad a:hover{color:var(--goud);background-image:linear-gradient(var(--goud),var(--goud))}

.product__raster{
  display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,5vw,5rem);
}

/* ── het pak ──────────────────────────────────────────────────────────── */
.pak{
  position:relative;margin:0;
  display:grid;place-items:center;
  aspect-ratio:1;
  padding:clamp(.7rem,1.3vw,1rem);
  background:var(--inkt);
  border-radius:var(--rond);
}
/* De vanille tegel binnen de lijst, als achtergrond van de lijst zelf: zo
   blijft het pak één element en schaalt het vanzelf in zijn vak. */
.pak::before{
  content:"";position:absolute;inset:clamp(.7rem,1.3vw,1rem);
  background:var(--vanille);border-radius:var(--rond-in);
}
.pak__foto{
  position:relative;
  width:auto;height:auto;max-width:72%;max-height:72%;
  object-fit:contain;
  filter:drop-shadow(0 1rem 1.4rem rgba(9,20,12,.28));
}
.pak__leeg{position:relative;--m:var(--bos);width:58%;opacity:.25}

/* ── de tekst ──────────────────────────────────────────────────────────── */
.product__tekst{display:flex;flex-direction:column;align-items:flex-start;gap:1rem}
.product__soort{
  margin:0;color:var(--goud);
  font-size:var(--label);font-weight:600;letter-spacing:.04em;
}
.product__naam{
  margin:0;color:var(--vanille);
  font-size:clamp(2rem,3.6vw,3.2rem);font-weight:400;line-height:1.1;
}
.product__besch{
  margin:0;max-width:46ch;color:var(--vanille-zacht);
  font-size:var(--nl-body);font-weight:300;line-height:1.75;
}
.product__feiten{
  margin:.4rem 0 0;width:min(100%,30rem);
  border-top:1px solid rgba(223,237,192,.18);
}
.product__feiten > div{
  display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;
  padding:.8rem 0;
  border-bottom:1px solid rgba(223,237,192,.18);
}
.product__feiten dt{color:var(--vanille-zacht);font-size:var(--label);font-weight:500;letter-spacing:.04em}
.product__feiten dd{margin:0;color:var(--vanille);font-size:var(--nl-body);font-weight:300}
.product__knoppen{
  display:flex;flex-wrap:wrap;gap:clamp(.7rem,1.6vw,1.1rem);
  margin:var(--uitgang) 0 0;
}

/* ── meer uit dezelfde categorie ──────────────────────────────────────── */
.meer{position:relative;padding-block:0 var(--lucht)}
.meer__kop{
  margin:0 0 clamp(1.2rem,3vh,2rem);color:var(--vanille);
  font-size:var(--nl-kop);font-weight:400;
}
.meer__kop::first-letter{text-transform:uppercase}
.meer__rij{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(1rem,2vw,1.6rem);
}
.meer__stuk{
  display:flex;flex-direction:column;gap:.8rem;
  color:inherit;text-decoration:none;
}
.meer__stuk .pak__foto{max-width:66%;max-height:66%;transition:scale .5s var(--ease-ui)}
.meer__naam{
  color:var(--vanille);font-size:1.05rem;font-weight:400;line-height:1.35;
  transition:color .3s var(--ease-ui);
}
.meer__maat{color:var(--vanille-zacht);font-weight:300;white-space:nowrap}
.meer__stuk:focus-visible{outline:2px solid var(--goud);outline-offset:4px;border-radius:var(--rond)}
@media (hover:hover) and (pointer:fine){
  .meer__stuk:hover .pak__foto{scale:1.05}
  .meer__stuk:hover .meer__naam{color:var(--goud)}
}

@media (max-width:899px){
  .product__raster{grid-template-columns:1fr}
  .product__beeld{width:min(100%,30rem)}
  .meer__rij{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:480px){
  .product__feiten > div{grid-template-columns:1fr;gap:.2rem}
}
@media (prefers-reduced-motion:reduce){
  .meer__stuk .pak__foto,.meer__naam{transition:none}
}

/* ── Binnenkomen ──────────────────────────────────────────────────────────
   De lijst met het pak komt eerst, het pak zakt erin, en de tekst volgt
   regel voor regel. Komt de pagina binnen met een overgang (html.vt, zie
   js/overgang.js), dan staan het pak en zijn lijst al stil: anders landt
   het pak en schuift het daarna nog een stukje. De pakken onder "Meer uit"
   komen op als ze in beeld scrollen, waar de browser dat kan. */
@media (prefers-reduced-motion:no-preference){
  .product__beeld{animation:pd-op .8s cubic-bezier(.2,.9,.25,1) backwards}
  .product__beeld .pak__foto{animation:pd-pak 1s cubic-bezier(.2,.9,.25,1) .12s backwards}
  html.vt .product__beeld,
  html.vt .product__beeld .pak__foto,
  html.vt .product__tekst > *,
  html.vt .product__pad{animation:none}
  .product__tekst > *{animation:pd-op .7s cubic-bezier(.2,.9,.25,1) backwards}
  .product__tekst > :nth-child(1){animation-delay:.08s}
  .product__tekst > :nth-child(2){animation-delay:.14s}
  .product__tekst > :nth-child(3){animation-delay:.2s}
  .product__tekst > :nth-child(4){animation-delay:.26s}
  .product__tekst > :nth-child(5){animation-delay:.32s}
  .product__pad{animation:pd-op .6s cubic-bezier(.2,.9,.25,1) backwards}
  @supports (animation-timeline:view()){
    .meer__rij > li{
      animation:pd-op linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 65%;
    }
  }
}
@keyframes pd-op{from{opacity:0;transform:translateY(16px)}}
@keyframes pd-pak{from{opacity:0;transform:translateY(14px) scale(.92)}}