/* Etalage: winkelfoto's als stapel afdrukken (alleen op winkelpagina's met foto's, zie etalageHtml in build.mjs).
   Basis is een gewoon fotoraster. etalage.js zet .is-js (lichtbak werkt) en .is-stapel (scroll-stapel, niet bij "minder beweging"). */

.etalage {
  --merk-donker: color-mix(in srgb, var(--merk, var(--paars)) 26%, var(--pruim-diep));
  margin-top: clamp(56px, 7vw, 100px);
  padding-top: clamp(52px, 6vw, 88px);
  padding-bottom: clamp(40px, 5vw, 72px);
  background: var(--pruim-diep);
  background: linear-gradient(180deg, var(--pruim-diep) 0%, var(--merk-donker) 100%);
  color: #fff;
}
.etalage__kop .h2 { color: #fff; margin: 0; }
.etalage__kop .eyebrow { margin-bottom: 10px; }

/* Basis: raster */
.etalage__stapel {
  list-style: none; margin: 0 auto; padding: 28px var(--gutter) 0; max-width: var(--max);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 14px;
}
.etalage__kaart { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.06); }
.etalage__knop { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: inherit; }
.etalage__knop:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.etalage__knop img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.etalage__band { display: none; }
.etalage__voet { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
.etalage__teller { display: none; margin: 0; font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.etalage__teller b { font-size: clamp(40px, 5vw, 64px); letter-spacing: -.02em; }
.etalage__teller span { margin-left: 8px; font-size: 18px; opacity: .55; }
.etalage.is-stapel .etalage__teller { text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.etalage:not(.is-js) .etalage__alles { display: none; }

/* Scroll-stapel */
.etalage.is-stapel { padding-bottom: 0; }
.etalage.is-stapel .etalage__baan { --stap: 62vh; --stap: 62svh; height: calc(100vh + (var(--n) - .5) * var(--stap)); height: calc(100svh + (var(--n) - .5) * var(--stap)); }
.etalage.is-stapel .etalage__podium {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  padding: calc(var(--header-h) + 62px) 0 clamp(14px, 2.4vh, 28px);
}
.etalage.is-stapel .etalage__band {
  display: block; position: absolute; left: 0; top: 50%; margin: 0; translate: 0 -50%;
  white-space: nowrap; pointer-events: none; user-select: none;
  font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 80, "opsz" 96;
  font-size: clamp(110px, 24vw, 340px); line-height: .9; letter-spacing: -.03em; color: rgba(255,255,255,.055);
}
.etalage.is-stapel .etalage__band span { display: inline-block; will-change: transform; }
.etalage.is-stapel .etalage__stapel { display: block; position: relative; padding: 0; max-width: none; width: 100%; height: 100%; }
.etalage.is-stapel .etalage__kaart {
  --ruimte: calc(100vh - var(--header-h) - 190px);
  --ruimte: calc(100svh - var(--header-h) - 190px);
  position: absolute; left: 50%; top: 50%;
  width: min(88vw, 900px, var(--ruimte) * 1.5); aspect-ratio: 3 / 2; height: auto;
  padding: clamp(6px, .8vw, 10px); border-radius: 8px; overflow: visible;
  background: #fbf8f4;
  box-shadow: 0 2px 4px rgba(0,0,0,.25), 0 34px 70px -24px rgba(0,0,0,.6);
  transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(var(--r));
  will-change: transform; backface-visibility: hidden;
}
.etalage.is-stapel .etalage__kaart.is-staand { width: auto; height: min(var(--ruimte), 700px); max-width: 66vw; aspect-ratio: 2 / 3; }
.etalage.is-stapel .etalage__kaart::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: #120718;
  opacity: var(--dim, 0); pointer-events: none;
}
.etalage.is-stapel .etalage__knop, .etalage.is-stapel .etalage__knop img { border-radius: 3px; }
.etalage.is-stapel .etalage__teller { display: block; }
.etalage.is-stapel .etalage__voet { margin-top: 0; position: relative; z-index: 20; }

@media (max-width: 760px) {
  .etalage.is-stapel .etalage__podium { padding-top: calc(var(--header-h) + 58px); }
  .etalage.is-stapel .etalage__kaart { --ruimte: calc(100vh - var(--header-h) - 160px); --ruimte: calc(100svh - var(--header-h) - 160px); }
  .etalage.is-stapel .etalage__kaart:not(.is-staand) { width: min(82vw, var(--ruimte) * 1.5); }
  .etalage.is-stapel .etalage__kaart.is-staand { max-width: 62vw; }
  .etalage__alles { min-height: 48px; padding: 10px 18px; font-size: 15px; }
}

/* Lichtbak */
html.lb-open { overflow: hidden; }
.lichtbak {
  width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: rgba(14, 6, 19, .97); color: #fff; overscroll-behavior: contain;
}
.lichtbak::backdrop { background: rgba(14, 6, 19, .6); }
.lichtbak[open] { display: block; }
.lichtbak__baan {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 72px clamp(12px, 7vw, 96px) 96px; touch-action: pinch-zoom; user-select: none;
}
.lichtbak__img { max-width: 100%; max-height: calc(100vh - 168px); max-height: calc(100dvh - 168px); width: auto; height: auto; object-fit: contain; border-radius: 4px; -webkit-user-drag: none; }
.lichtbak__tekst {
  position: absolute; left: var(--gutter); right: 140px; bottom: 26px; margin: 0;
  display: flex; gap: 14px; align-items: baseline; font-size: 15px; color: rgba(255,255,255,.75);
}
.lichtbak__tekst span:first-child { flex: none; font-family: var(--display); font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.lichtbak__knop {
  position: absolute; width: 52px; height: 52px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  transition: background-color .2s;
}
.lichtbak__knop:hover { background: rgba(255,255,255,.22); }
.lichtbak__knop:focus-visible { outline: 2px solid rgba(255,255,255,.7); outline-offset: 2px; }
.lichtbak__knop svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lichtbak__knop--sluit { top: 14px; right: 14px; }
.lichtbak__knop--vorige { left: 18px; top: 50%; translate: 0 -50%; }
.lichtbak__knop--volgende { right: 18px; top: 50%; translate: 0 -50%; }
@media (max-width: 760px) {
  .lichtbak__baan { padding: 64px 0 100px; }
  .lichtbak__img { max-height: calc(100vh - 176px); max-height: calc(100dvh - 176px); border-radius: 0; }
  .lichtbak__tekst { right: var(--gutter); bottom: 84px; font-size: 14px; }
  .lichtbak__knop--vorige, .lichtbak__knop--volgende { top: auto; bottom: 18px; translate: none; }
  .lichtbak__knop--vorige { left: auto; right: 82px; }
  .lichtbak__knop--volgende { right: 18px; }
  .lichtbak__tekst span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}