/* Wijnen Feys — webshop v15 (oktober 2026), volgens de huisstijlmanual van Wijnen Feys.
   Gotham is het werkfont: titels in Bold, leestekst in Book. Chap (basis van het logo) enkel voor
   highlights en het woordmerk. Kleuren: warm kelderzwart #16130f (nooit vlak #000) en wit #ffffff, met grijswaarden ertussen.
   Lay-out en motion blijven gebouwd op [[Ref Bellussi]]; v2: menubalk bovenaan op elke pagina. */
@font-face { font-family: "Gotham"; src: url("../assets/fonts/gotham-book.woff2") format("woff2"), url("../assets/fonts/gotham-book.ttf") format("truetype"); font-weight: 100 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Gotham"; src: url("../assets/fonts/gotham-bold.woff2") format("woff2"), url("../assets/fonts/gotham-bold.ttf") format("truetype"); font-weight: 600 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Chap"; src: url("../assets/fonts/chap-light.woff2") format("woff2"), url("../assets/fonts/chap-light.ttf") format("truetype"); font-weight: 100 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Chap"; src: url("../assets/fonts/chap-semibold.woff2") format("woff2"), url("../assets/fonts/chap-semibold.ttf") format("truetype"); font-weight: 500 900; font-style: normal; font-display: swap; }
:root {
  --zwart: #16130f;
  --zwart-2: #1d1914;
  --nacht: #211c17;
  --nacht-2: #2b251f;
  --wit: #ffffff;
  --grijs: #f1f0ee;
  --inkt: #1a1612;
  --tekst: #1b1b1b;
  --tekst-zacht: #6b6b6b;
  --goud: #a8a8a8;
  --goud-diep: #6b6b6b;
  --wijnrood: #8e2a2e;
  --lijn: rgba(0, 0, 0, .14);
  --lijn-d: rgba(255, 255, 255, .16);
  /* reliëf op donkere vlakken: fijne korrel en warm kelderlicht van linksboven, nooit een vlak zwart */
  --korrel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .1 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
  --kelderlicht: rgba(255, 228, 196, .07);
  --relief: var(--korrel), radial-gradient(120% 90% at 12% 0%, var(--kelderlicht), transparent 62%);

  --sans: "Gotham", "Helvetica Neue", Arial, sans-serif;
  --accent: "Chap", Georgia, serif;
  --merk: "Chap", Georgia, serif;
  --t-menu: clamp(46px, 6vw, 85px);
  --t-h1: clamp(22px, 1.4rem + .5vw, 30px);
  --t-h2: clamp(20px, 1.25rem + .35vw, 26px);
  --t-body: 16px;
  --t-cta: 12px;

  --zij: 72px;
  --rand: clamp(20px, 4vw, 64px);
  --sectie: clamp(80px, 11vw, 150px);
  --smal: 560px;
  --expo: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--zwart); }
body {
  margin: 0; background: var(--wit); color: var(--tekst);
  font-family: var(--sans); font-weight: 400; font-size: var(--t-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
b, strong { font-weight: 700; color: inherit; }
:focus-visible { outline: 1px solid var(--goud); outline-offset: 4px; }
::selection { background: var(--zwart); color: #fff; }
@media (min-width: 1024px) { body { padding-right: var(--zij); } }

/* ---------- Typografie (Bellussi) ---------- */
.titel { font-weight: 700; font-size: var(--t-h2); line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; color: var(--inkt); text-wrap: balance; }
.titel--groot { font-size: var(--t-h1); }
.titel--zwaar { font-weight: 900; }
.donker .titel, .titel--licht { color: #fff; }
.acc { font-family: var(--accent); font-style: normal; font-weight: 300; text-transform: none; letter-spacing: 0; font-size: 1.14em; line-height: .9; }
.label { display: inline-block; font-weight: 700; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--goud-diep); }
.donker .label { color: var(--goud); }
.dun { max-width: var(--smal); margin-inline: auto; font-weight: 300; color: var(--tekst); }
.dun b { font-weight: 700; color: var(--inkt); }
.donker .dun { color: rgba(255, 255, 255, .72); }
.donker .dun b { color: #fff; }
.midden { text-align: center; }
.blok { display: grid; gap: 22px; justify-items: center; text-align: center; }
.ontdek {
  display: inline-block; padding-bottom: 7px;
  font-weight: 700; font-size: var(--t-cta); letter-spacing: 2px; text-transform: uppercase; color: var(--inkt);
  background: linear-gradient(currentColor, currentColor) center bottom / 26px 1px no-repeat;
  transition: background-size .6s var(--expo), color .3s;
}
.ontdek:hover { background-size: 100% 1px; }
.donker .ontdek { color: #fff; }
.knop {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px;
  border: 1px solid currentColor; font-weight: 700; font-size: var(--t-cta); letter-spacing: 2px; text-transform: uppercase;
  transition: background .4s, color .4s, border-color .4s;
}
.knop:hover { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.knop--vol { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.knop--vol:hover { background: var(--goud-diep); border-color: var(--goud-diep); }
.knop--goud { color: var(--goud); border-color: var(--goud); font-weight: 300; letter-spacing: .14em; }
.knop--goud:hover { background: var(--goud); color: var(--zwart); border-color: var(--goud); }
.donker .knop:not(.knop--goud):hover { background: #fff; color: var(--zwart); border-color: #fff; }
.knop:disabled { opacity: .4; cursor: not-allowed; }

/* ---------- Leeftijdscheck (NO / SI) ---------- */
.poort { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--rand); color: #fff; text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .85)), url("../assets/foto/bubbels.jpg") center / cover;
  transition: opacity .9s var(--expo), visibility 0s .9s; }
.poort.weg { opacity: 0; visibility: hidden; }
.poort__binnen { display: grid; justify-items: center; gap: 26px; }
.poort img { height: 96px; width: auto; filter: invert(1) sepia(.2) brightness(1.05); }
.poort h2 { font-weight: 300; font-size: 20px; letter-spacing: .02em; margin-top: 40px; }
.poort__keuze { display: flex; gap: 14px; }
.poort__keuze button { min-width: 108px; height: 70px; padding: 0 22px; background: rgba(0, 0, 0, .85); font-weight: 900; font-size: 35px; line-height: 1; transition: background .3s, color .3s; }
.poort__keuze button:hover, .poort__keuze button:focus-visible { background: #fff; color: var(--zwart); }
.poort__nee { min-height: 1.4em; font-size: 14px; color: var(--goud); }

/* ---------- Zijbalk (desktop) en topbalk (mobiel) ---------- */
.zijbalk { position: fixed; z-index: 50; background: var(--zwart); color: #fff; }
.zijbalk__shop { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 9px; border: 1px solid var(--goud); color: var(--goud); font-weight: 300; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; transition: background .3s, color .3s; }
.zijbalk__shop:hover { background: var(--goud); color: var(--zwart); }
.zijbalk__ico { position: relative; width: 36px; height: 36px; display: grid; place-items: center; opacity: .85; transition: opacity .3s, color .3s; }
.zijbalk__ico:hover { opacity: 1; color: var(--goud); }
.zijbalk__ico svg { width: 19px; height: 19px; }
.teller { position: absolute; top: 0; right: -2px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--goud); color: var(--zwart); font-size: 10px; font-weight: 900; line-height: 17px; text-align: center; }
.teller:empty { display: none; }
.zijbalk__logo img { filter: invert(1) sepia(.2) brightness(1.05); }
.zijbalk__taal { font-size: 11px; font-weight: 500; letter-spacing: .1em; opacity: .75; }
@media (min-width: 1024px) {
  .zijbalk { top: 0; right: 0; bottom: 0; width: var(--zij); display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; padding: 22px 0; gap: 16px; }
  .zijbalk__logo { display: none; }
  .zijbalk__menu { align-self: center; }
  .zijbalk__tools { display: grid; gap: 6px; justify-items: center; }
}
@media (max-width: 1023px) {
  .zijbalk { top: 0; left: 0; right: 0; height: 64px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
  .zijbalk__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .zijbalk__logo img { height: 44px; width: auto; }
  .zijbalk__tools { display: flex; gap: 2px; margin-left: auto; margin-right: 10px; }
  .zijbalk__menu { gap: 0; } .zijbalk__menu span { display: none; }
  .zijbalk__taal { display: none; }
  body { padding-top: 64px; }
}
.omhoog { position: fixed; z-index: 49; right: calc(var(--zij) + 18px); bottom: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--zwart); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .5s var(--expo); }
.omhoog.zicht { opacity: 1; transform: none; pointer-events: auto; }
.omhoog svg { width: 16px; height: 16px; }
@media (max-width: 1023px) { .omhoog { right: 16px; } }


/* ---------- Mandje ---------- */
.sluier { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, .5); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; }
.sluier.open { opacity: 1; visibility: visible; transition: opacity .5s, visibility 0s; }
.mand { position: fixed; top: 0; right: 0; bottom: 0; z-index: 71; width: min(440px, 100%); background: var(--wit); color: var(--inkt); display: flex; flex-direction: column; transform: translateX(100%); transition: transform .7s var(--expo); }
.mand.open { transform: none; }
.mand__kop { display: flex; justify-content: space-between; align-items: center; padding: 24px 28px; border-bottom: 1px solid var(--lijn); }
.mand__kop h2 { font-weight: 500; font-size: 22px; text-transform: uppercase; }
.mand__sluit svg { width: 24px; height: 24px; }
.mand__lijst { flex: 1; overflow: auto; padding: 0 28px; }
.mand__rij { display: grid; grid-template-columns: 1fr auto; gap: 4px 16px; padding: 18px 0; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.mand__rij span:first-child { font-weight: 500; text-transform: uppercase; font-size: 13px; line-height: 1.35; }
.mand__rij small { font-size: 12px; color: var(--tekst-zacht); }
.mand__rij button { justify-self: end; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--wijnrood); }
.mand__leeg { padding: 28px 0; color: var(--tekst-zacht); }
.mand__voet { padding: 22px 28px 28px; border-top: 1px solid var(--lijn); display: grid; gap: 14px; }
.mand__totaal { display: flex; justify-content: space-between; font-weight: 500; font-size: 18px; text-transform: uppercase; }
.mand__voet small { font-size: 12px; color: var(--tekst-zacht); }

/* ---------- Secties ---------- */
main { position: relative; background: var(--wit); }
.sectie { padding: var(--sectie) var(--rand); position: relative; }
.donker { background: var(--zwart); color: #fff; }
.grijs { background: var(--grijs); }
.wit { background: var(--wit); }

.hero { position: relative; height: min(100svh, 980px); min-height: 560px; overflow: hidden; color: #fff; display: grid; align-items: end; justify-items: center; text-align: center; isolation: isolate; }
@media (max-width: 1023px) { .hero { height: min(calc(100svh - 64px), 900px); } }
.hero__foto { position: absolute; inset: 0; z-index: -2; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; transform: scale(1.12); animation: kelderlicht 1.4s var(--expo) both; }
@keyframes kelderlicht { from { transform: scale(1.22); filter: brightness(.2); } to { transform: scale(1.12); filter: brightness(1); } }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 50% 40%, rgba(0, 0, 0, .15), rgba(0, 0, 0, .78)), linear-gradient(0deg, var(--zwart) 0%, rgba(0, 0, 0, .85) 8%, transparent 45%); }
.hero__logo { position: absolute; top: 34px; left: 50%; transform: translateX(-50%); }
.hero__logo img { height: 108px; width: auto; filter: invert(1) sepia(.2) brightness(1.05); }
@media (max-width: 1023px) { .hero__logo { display: none; } }
.hero__tekst { display: grid; gap: 18px; justify-items: center; padding: 0 var(--rand) clamp(80px, 13vh, 130px); max-width: 860px; }
.hero h1 { font-weight: 700; font-size: clamp(26px, 1.2rem + 1.6vw, 44px); line-height: 1.12; text-transform: uppercase; letter-spacing: .02em; }
.hero h1 .acc { color: var(--goud); display: block; margin-top: 8px; }
.hero__scroll { position: absolute; bottom: 24px; left: 50%; width: 1px; height: 48px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.hero__scroll::after { content: ""; position: absolute; left: 0; top: -50%; width: 1px; height: 50%; background: #fff; animation: druppel 2.2s var(--expo) infinite; }
@keyframes druppel { to { top: 100%; } }

.beloften { border-bottom: 1px solid var(--lijn); }
.beloften ul { list-style: none; margin: 0; padding: 16px var(--rand); display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 46px; }
.beloften li { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt); }
.beloften svg { width: 20px; height: 20px; stroke: var(--goud-diep); fill: none; stroke-width: 1.3; }

.volfoto { position: relative; height: clamp(360px, 70vh, 760px); overflow: hidden; background: var(--zwart); }
.parimg { overflow: hidden; }
.parimg img { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; will-change: transform; }

.lijnkolommen { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(14px, 2vw, 30px); margin-top: clamp(48px, 6vw, 80px); }
.lijn { display: grid; gap: 12px; justify-items: center; align-content: start; text-align: center; }
.lijn__foto { position: relative; width: 100%; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--zwart); }
.lijn__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--expo); }
.lijn:hover .lijn__foto img { transform: scale(1.06); }
.lijn .acc { color: var(--tekst-zacht); font-size: 24px; margin-top: 8px; }
.lijn h3 { font-weight: 500; font-size: 22px; line-height: 1; text-transform: uppercase; color: var(--inkt); margin-top: -4px; }
.lijn p { font-size: 14px; line-height: 1.5; color: var(--tekst); max-width: 24ch; }
.lijn small { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--goud-diep); }

.rooster { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 40px); row-gap: 56px; }
.wijn { position: relative; display: grid; gap: 10px; justify-items: center; align-content: start; text-align: center; min-width: 0; }
.wijn__beeld { position: relative; width: 100%; aspect-ratio: 3 / 4; max-width: 100%; display: grid; place-items: center; background: #fff; overflow: hidden; }
/* elke fles even hoog: de foto schaalt op de hoogte van het vak, het wit naast een vierkante packshot valt weg */
.wijn__beeld img { position: absolute; top: 5%; left: 50%; translate: -50% 0; height: 90%; width: auto; max-width: 150%; object-fit: contain; transition: transform 1s var(--expo); }
.wijn:hover .wijn__beeld img { transform: translateY(-8px); }
.wijn__leeg { font-family: var(--merk); font-size: 3rem; color: rgba(0, 0, 0, .15); }
.wijn__herkomst { font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-diep); margin-top: 8px; }
.wijn__naam { font-weight: 500; font-size: 13px; line-height: 1.35; text-transform: uppercase; color: var(--inkt); letter-spacing: .02em; max-width: 30ch; text-wrap: balance; }
.wijn__naam a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.wijn__voet { display: flex; gap: 12px; align-items: baseline; justify-content: center; font-size: 16px; font-weight: 200; color: var(--inkt); }
.wijn__sku { font-size: 11px; color: var(--tekst-zacht); font-weight: 300; }
.wijn__op { font-size: 11px; color: var(--wijnrood); font-weight: 500; }
.wijn__plus { position: relative; z-index: 2; margin-top: 2px; }

.woordmerk { text-align: center; }
.woordmerk__woord {
  font-family: var(--merk); font-weight: 600; font-size: clamp(64px, 14.5vw, 240px); line-height: .9; letter-spacing: -.02em; text-transform: uppercase;
  background: url("../assets/foto/kelder-rek.jpg") center 40% / cover; -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: brightness(1.35) contrast(1.05);
}
.woordmerk__kolommen { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; gap: 48px; margin: clamp(40px, 6vw, 80px) auto 36px; text-align: center; font-size: 15px; }


.loopband { overflow: hidden; border-block: 1px solid var(--lijn); padding: 20px 0; white-space: nowrap; }
.loopband__rij { display: inline-flex; gap: 48px; will-change: transform; }
.loopband span { font-weight: 200; font-size: clamp(28px, 3.4vw, 52px); text-transform: uppercase; color: var(--inkt); }
.loopband span .acc { color: var(--goud-diep); font-size: .9em; margin: 0 6px; }

.geschenken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); margin-top: 60px; }
.geschenk { background: var(--wit); padding: 48px 28px; display: grid; gap: 12px; justify-items: center; text-align: center; }
.geschenk b { font-family: var(--merk); font-weight: 600; font-size: 56px; line-height: 1; color: var(--inkt); }
.geschenk h3 { font-weight: 500; font-size: 20px; text-transform: uppercase; color: var(--inkt); }
.geschenk p { font-size: 14px; max-width: 28ch; }
.cadeaubon { display: grid; grid-template-columns: 1fr 1fr; margin-top: 60px; background: var(--zwart); color: #fff; }
.cadeaubon figure { position: relative; min-height: 340px; }
.cadeaubon > div { padding: clamp(40px, 6vw, 80px); display: grid; gap: 20px; align-content: center; justify-items: center; text-align: center; }

.register { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 34px; max-width: 1200px; margin: 50px auto 0; }
.register a { font-weight: 500; font-size: clamp(22px, 2.6vw, 40px); line-height: 1.3; text-transform: uppercase; color: var(--inkt); transition: color .3s; }
.register a sup { font-size: 11px; font-weight: 700; color: var(--goud-diep); margin-left: 4px; letter-spacing: .05em; }
.register a:hover { color: var(--goud-diep); }

.kaartband { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--lijn-d); border: 1px solid var(--lijn-d); margin-top: 56px; }
.kaartband div { background: var(--zwart); padding: 36px 28px; display: grid; gap: 10px; justify-items: center; text-align: center; }
.kaartband b { font-family: var(--accent); font-style: normal; font-weight: 300; font-size: 30px; color: var(--goud); line-height: 1; }
.kaartband span { font-size: 14px; color: rgba(255, 255, 255, .75); max-width: 26ch; }

.citaat { position: relative; min-height: clamp(420px, 80vh, 820px); display: grid; place-items: center; text-align: center; overflow: hidden; color: #fff; padding: var(--sectie) var(--rand); isolation: isolate; }
.citaat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgba(0, 0, 0, .35), rgba(0, 0, 0, .85)); }
.citaat .parimg { position: absolute; inset: 0; z-index: -2; }
.citaat blockquote { font-family: var(--accent); font-style: normal; font-weight: 300; font-size: clamp(34px, 4.6vw, 72px); line-height: 1.05; max-width: 16ch; }
.citaat cite { display: block; margin-top: 24px; font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--goud); }

/* voet: vast onderaan, wordt onthuld door de laatste sectie */
.voet { background: var(--zwart); color: #fff; padding: clamp(70px, 9vw, 120px) var(--rand) 34px; }
@media (min-width: 1024px) and (min-height: 760px) {
  .voet { position: sticky; bottom: 0; z-index: 0; }
  main > :where(:not(.voet)) { position: relative; z-index: 1; background: var(--wit); }
}
.voet__rooster { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr auto; gap: 40px; align-items: start; }
.voet__logo img { height: 92px; width: auto; filter: invert(1) sepia(.2) brightness(1.05); }
.voet h4 { margin: 0 0 14px; font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.voet p, .voet li { font-size: 13px; line-height: 1.8; color: rgba(255, 255, 255, .7); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet a:hover { color: var(--goud); }
.voet__groot { display: grid; gap: 4px; margin-top: 22px; }
.voet__groot a { font-weight: 500; font-size: 15px; text-transform: uppercase; color: #fff; }
.brief { display: flex; margin-top: 12px; border-bottom: 1px solid rgba(255, 255, 255, .4); max-width: 320px; }
.brief input { flex: 1; min-width: 0; background: none; border: 0; padding: 10px 0; color: #fff; font: inherit; font-size: 13px; }
.brief input::placeholder { color: rgba(255, 255, 255, .45); }
.brief input:focus { outline: none; }
.brief button { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--goud); }
.voet__klein { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px 30px; margin-top: clamp(50px, 7vw, 90px); padding-top: 22px; border-top: 1px solid var(--lijn-d); font-size: 11px; color: rgba(255, 255, 255, .5); }

/* ============ WEBSHOP ============ */
.shopcover { position: relative; height: clamp(240px, 42vh, 460px); background: var(--zwart); }
.shopkop { padding: clamp(56px, 7vw, 90px) var(--rand) 40px; text-align: center; display: grid; gap: 18px; justify-items: center; }
.shopkop h1 { display: grid; gap: 2px; }
.shopkop h1 span { font-weight: 900; }
.shopkop h1 span + span { font-weight: 500; }
.kruimel { font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-zacht); display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.kruimel a:hover { color: var(--inkt); }
.zoek { margin-top: 10px; display: flex; width: min(560px, 100%); border-bottom: 1px solid var(--inkt); }
.zoek svg { width: 18px; flex: none; stroke: var(--inkt); fill: none; stroke-width: 1.4; }
.zoek input { flex: 1; min-width: 0; background: none; border: 0; color: var(--inkt); font: inherit; font-size: 15px; padding: 12px; }
.zoek input:focus { outline: none; }
.winkel { padding: 0 0 var(--sectie); border-top: 1px solid var(--lijn); }
.resultaat { padding: 28px var(--rand) 0; }

/* filterbalk: horizontaal onder de menubalk, elk filter opent een paneel over de volle breedte (zoals de menupanelen) */
.filterbalk { position: sticky; top: 76px; z-index: 40; background: var(--wit); border-bottom: 1px solid var(--lijn); }
.filterbalk__rij { display: flex; align-items: center; gap: 8px 28px; padding: 0 var(--rand); }
.filterbalk__facetten { list-style: none; margin: 0 0 0 -14px; padding: 0; display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.filterbalk__facetten::-webkit-scrollbar { display: none; }
.fb__knop { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 62px; padding: 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--inkt); white-space: nowrap; }
.fb__knop::before { content: ""; order: 3; align-self: center; width: 6px; height: 6px; margin: -4px 0 0 2px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform .4s var(--expo); }
.fb__knop[aria-expanded="true"]::before { transform: translateY(3px) rotate(-135deg); }
.fb__knop::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 2px; background: var(--inkt); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--expo); }
.fb__knop:hover::after, .fb__knop[aria-expanded="true"]::after { transform: scaleX(1); }
.fb__waarde { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tekst-zacht); }
.fb__waarde:empty { display: none; }
.fb__paneel { position: absolute; left: 0; right: 0; top: 100%; max-height: min(62vh, 560px); overflow: auto; padding: 32px var(--rand) 40px; background: var(--wit); border-bottom: 1px solid var(--lijn); box-shadow: 0 28px 44px -16px rgba(0, 0, 0, .16); animation: sbmIn .45s var(--expo) both; }
.fb__paneel .filter__lijst, .fb__paneel .categorieen { display: block; columns: 220px 5; column-gap: 48px; }
.fb__paneel .filter__lijst button, .fb__paneel .categorieen li { break-inside: avoid; width: 100%; }
.fb__paneel .filter__zoek { max-width: 320px; margin-bottom: 20px; }
.fb__paneel--prijs .prijsschuif { max-width: 520px; }
.filterbalk .schakel { flex: none; font-size: 13px; }
@media (max-width: 1023px) { .filterbalk { top: 64px; } }
.filter__lijst { display: grid; }
.filter__lijst button { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; text-align: left; font-size: 14px; border-bottom: 1px solid var(--lijn); transition: padding-left .3s var(--expo), color .2s; }
.filter__lijst button small { font-size: 12px; color: var(--tekst-zacht); }
.filter__lijst button:hover { padding-left: 6px; color: var(--inkt); }
.filter__lijst button[aria-pressed="true"] { font-weight: 700; color: var(--inkt); padding-left: 10px; box-shadow: inset 2px 0 0 var(--goud-diep); }
.filter__meer { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--goud-diep); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px; border: 1px solid var(--lijn); font-size: 13px; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: var(--inkt); }
.chip[aria-pressed="true"] { background: var(--inkt); color: #fff; border-color: var(--inkt); }
.chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.schakel { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.schakel input { accent-color: var(--inkt); width: 16px; height: 16px; }
.resultaat__balk { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--lijn); margin-bottom: 40px; }
.resultaat__tel { font-size: 14px; }
.resultaat__tel b { color: var(--inkt); }
.gekozen { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.gekozen .chip { height: 28px; font-size: 12px; }
.sorteer { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.sorteer select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23222'/%3E%3C/svg%3E") right 10px center no-repeat; border: 1px solid var(--lijn); color: var(--inkt); font: inherit; font-weight: 300; letter-spacing: 0; text-transform: none; font-size: 14px; padding: 9px 30px 9px 12px; border-radius: 0; }
.winkel .rooster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.meer { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 64px; font-size: 13px; }
.meer__balk { width: 200px; height: 1px; background: var(--lijn); position: relative; }
.meer__balk i { position: absolute; inset: 0 auto 0 0; background: var(--inkt); }
.leeg { padding: 60px 0; text-align: center; }

.product { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 100px); padding: clamp(50px, 7vw, 100px) var(--rand) 40px; align-items: center; }
.product__beeld { position: relative; aspect-ratio: 1; max-width: 100%; display: grid; place-items: center; background: #fff; }
.product__beeld img { height: 96%; width: auto; max-width: 90%; object-fit: contain; }
.product__info { display: grid; gap: 18px; max-width: min(460px, 36vw); }
.product__info .kruimel { justify-content: flex-start; }
.product__domein { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--goud-diep); }
.product__info h1 { font-weight: 500; font-size: 28px; line-height: 1.15; color: var(--inkt); text-wrap: balance; }
.product__meta { font-size: 15px; }
.product__prijs { display: flex; align-items: baseline; gap: 12px; }
.product__prijs b { font-weight: 200; font-size: 26px; color: var(--inkt); }
.product__prijs small { font-size: 12px; color: var(--tekst-zacht); }
.koop { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 6px; }
.aantal { display: inline-flex; align-items: center; height: 48px; border: 1px solid var(--lijn); }
.aantal button { width: 42px; height: 100%; font-size: 18px; font-weight: 200; }
.aantal output { min-width: 30px; text-align: center; font-weight: 500; }
.koop .knop { flex: 1; min-width: 220px; }
.zekerheden { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.zekerheden li { display: flex; gap: 10px; align-items: center; }
.zekerheden svg { width: 18px; height: 18px; stroke: var(--goud-diep); fill: none; stroke-width: 1.3; flex: none; }
.fiche-blok { padding: 30px var(--rand) clamp(60px, 8vw, 110px); }
.fiche { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1100px; margin: 0 auto; border-top: 1px solid var(--lijn); }
.fiche div { padding: 22px 16px; border-bottom: 1px solid var(--lijn); text-align: center; display: grid; gap: 4px; }
.fiche div:not(:nth-child(4n)) { border-right: 1px solid var(--lijn); }
.fiche dt { font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; color: var(--inkt); }
.fiche dd { margin: 0; font-size: 14px; }
.advies { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding-top: 16px; border-top: 1px solid var(--lijn); font-size: 13px; }
.advies img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 72% 30%; }
.advies b { display: block; font-weight: 500; text-transform: uppercase; font-size: 13px; color: var(--inkt); }

/* ---------- Responsief ---------- */
@media (max-width: 1100px) {
  .lijnkolommen { grid-template-columns: repeat(3, 1fr); }
  .rooster { grid-template-columns: repeat(2, 1fr); }
  .winkel .rooster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .voet__rooster { grid-template-columns: 1fr 1fr 1fr; }
  .fiche { grid-template-columns: repeat(2, 1fr); }
  .fiche div:not(:nth-child(4n)) { border-right: 0; }
  .fiche div:nth-child(odd) { border-right: 1px solid var(--lijn); }
}
@media (max-width: 860px) {
  .menu__streek { grid-template-columns: 1fr; gap: 18px; }
  .menu__rij { justify-content: flex-start; }
  .woordmerk__kolommen, .cadeaubon, .product { grid-template-columns: 1fr; }
  .geschenken, .kaartband { grid-template-columns: 1fr; }
  .winkel .rooster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filterbalk__rij { flex-wrap: wrap; padding-bottom: 12px; }
  .filterbalk__facetten { flex-basis: 100%; margin-right: calc(var(--rand) * -1); }
  .fb__knop { height: 52px; padding-top: 18px; }
  .filterbalk__rij { column-gap: 16px; }
  .filterbalk .sorteer { margin-left: auto; gap: 0; font-size: 0; }
  .filterbalk .sorteer select { max-width: 150px; padding: 8px 26px 8px 10px; }
  .fb__paneel { max-height: 70vh; padding: 24px var(--rand) 32px; }
}
@media (max-width: 560px) {
  .lijnkolommen { grid-template-columns: repeat(2, 1fr); }
  .lijnkolommen .lijn:last-child { grid-column: 1 / -1; }
  .rooster, .winkel .rooster { gap: 14px; row-gap: 40px; }
  .voet__rooster { grid-template-columns: 1fr 1fr; }
  .fiche { grid-template-columns: 1fr; }
  .fiche div:nth-child(odd) { border-right: 0; }
  .lijnen a .acc { font-size: 22px; }
  .poort__keuze button { font-size: 28px; height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* beschrijving op de productpagina (uit de live shop) */
.uitklap { border-top: 1px solid var(--lijn); padding-top: 14px; }
.uitklap summary { cursor: pointer; font-weight: 700; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--inkt); list-style: none; display: flex; justify-content: space-between; }
.uitklap summary::-webkit-details-marker { display: none; }
.uitklap summary::after { content: "+"; font-weight: 200; font-size: 18px; }
.uitklap[open] summary::after { content: "–"; }
.rte { font-size: 15px; line-height: 1.75; }
.rte p { margin: 1em 0 0; }

/* logo linksboven op alle pagina's behalve de homepage (desktop; mobiel staat het in de topbalk) */
.paginalogo { position: absolute; top: 26px; left: var(--rand); z-index: 30; display: block; transition: opacity .3s; }
.paginalogo img { height: 92px; width: auto; }
.paginalogo--licht img { filter: invert(1) sepia(.2) brightness(1.05); }
.paginalogo:hover { opacity: .8; }
.product { padding-top: clamp(140px, 12vw, 170px); }
.pagina { padding-top: clamp(140px, 12vw, 170px); }
@media (max-width: 1023px) {
  .paginalogo { display: none; }
  .product, .pagina { padding-top: clamp(50px, 7vw, 100px); }
}

/* shopheader: titel, intro en zoeken in de kelderfoto */
.shopheld { position: relative; min-height: clamp(460px, 66vh, 700px); display: grid; align-items: end; overflow: hidden; background: var(--zwart); color: #fff; isolation: isolate; }
.shopheld .shopcover { position: absolute; inset: 0; height: auto; z-index: -2; }
.shopheld::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .45) 0%, rgba(0, 0, 0, .15) 30%, rgba(0, 0, 0, .55) 62%, rgba(0, 0, 0, .9) 100%); }
.shopkop--held { position: relative; padding: clamp(150px, 16vw, 200px) var(--rand) clamp(44px, 6vw, 72px); }
.shopkop--held .kruimel { color: rgba(255, 255, 255, .7); }
.shopkop--held .kruimel a:hover { color: #fff; }
.shopkop--held .titel { color: #fff; font-size: clamp(24px, 1.2rem + 1.2vw, 38px); line-height: 1.15; }
.shopkop--held .dun { color: rgba(255, 255, 255, .8); }
.shopkop--held .dun b, .shopkop--held .dun strong { color: #fff; }
.shopkop--held .zoek { border-bottom-color: rgba(255, 255, 255, .7); }
.shopkop--held .zoek svg, .shopkop--held .zoek .icon { stroke: #fff; color: #fff; }
.shopkop--held .zoek input { color: #fff; }
.shopkop--held .zoek input::placeholder { color: rgba(255, 255, 255, .6); }
.shopkop--held .zoek:focus-within { border-bottom-color: var(--goud); }
.shopheld + .winkel { border-top: 0; }
@media (max-width: 1023px) { .shopkop--held { padding-top: 90px; } .shopheld { min-height: 420px; } }
/* ---------- AI-wijnadviseur (de sommelier) ---------- */
.adviseur-sectie { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 6vw, 100px); align-items: start; }
.adviseur-sectie__kop { display: grid; gap: 18px; justify-items: start; position: sticky; top: 40px; }
.adviseur-sectie__kop .titel { font-size: var(--t-h1); }
.adviseur { display: grid; gap: 22px; }
.adviseur__form { display: grid; gap: 14px; }
.adviseur__modus { display: inline-flex; border: 1px solid var(--lijn); justify-self: start; }
.adviseur__modus label { cursor: pointer; }
.adviseur__modus input { position: absolute; opacity: 0; pointer-events: none; }
.adviseur__modus span { display: block; padding: 10px 18px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; transition: background .2s, color .2s; }
.adviseur__modus input:checked + span { background: var(--inkt); color: #fff; }
.adviseur__modus input:focus-visible + span { outline: 1px solid var(--goud); outline-offset: 2px; }
.adviseur textarea { width: 100%; border: 1px solid var(--lijn); background: #fff; padding: 16px; font: inherit; font-size: 16px; line-height: 1.5; color: var(--inkt); resize: vertical; }
.adviseur textarea:focus, .adviseur__budget input:focus { outline: 1px solid var(--goud-diep); border-color: var(--goud-diep); }
.adviseur__voorbeelden { display: flex; flex-wrap: wrap; gap: 6px; }
.adviseur__voorbeelden .chip { font-size: 12px; background: #fff; cursor: pointer; }
.adviseur__rij { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; }
.adviseur__budget { display: grid; gap: 6px; }
.adviseur__budget span { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); }
.adviseur__budget input { width: 150px; border: 1px solid var(--lijn); background: #fff; padding: 12px; font: inherit; }
.adviseur__rij .knop { flex: 1; min-width: 200px; }
.advies-uit { display: grid; gap: 16px; padding-top: 6px; animation: in .8s var(--expo) both; }
@keyframes in { from { opacity: 0; transform: translateY(12px); } }
.advies-uit__tekst { font-size: 17px; line-height: 1.6; color: var(--inkt); margin: 0; }
.advies-uit__pakket { margin: 0; font-size: 14px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.advies-uit__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lijn); }
.advies-uit__wijn { display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.advies-uit__beeld { width: 64px; aspect-ratio: 3 / 4; background: #fff; display: grid; place-items: center; }
.advies-uit__beeld img { max-height: 100%; width: auto; object-fit: contain; }
.advies-uit__info { display: grid; gap: 3px; min-width: 0; }
.advies-uit__info small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--goud-diep); }
.advies-uit__info a { font-weight: 500; font-size: 13px; text-transform: uppercase; color: var(--inkt); line-height: 1.35; }
.advies-uit__info p { margin: 0; font-size: 14px; color: var(--tekst); }
.advies-uit__prijs { font-weight: 300; white-space: nowrap; }
.advies-uit__voet { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.advies-uit__voet b { font-weight: 500; font-size: 18px; color: var(--inkt); }
.advies-uit__vervolg { justify-self: start; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; }
.advies-uit__noot, .advies-uit__fout { font-size: 12px; color: var(--tekst-zacht); margin: 0; }
.advies-uit__fout { color: var(--wijnrood); }
.advies-uit__laden { display: flex; align-items: center; gap: 12px; color: var(--tekst-zacht); margin: 0; }
.advies-uit__laden span { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--lijn); border-top-color: var(--inkt); animation: draai 1s linear infinite; }
@keyframes draai { to { transform: rotate(360deg); } }
@media (max-width: 860px) { .adviseur-sectie { grid-template-columns: 1fr; } .adviseur-sectie__kop { position: static; } .advies-uit__wijn { grid-template-columns: 56px 1fr; } .advies-uit__prijs { grid-column: 2; } }

/* ---------- Foto-intro: Sebastien in de kelder, tekst links op het donkere deel van de foto ---------- */
.fotointro { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: min(92vh, 860px); padding: var(--sectie) var(--rand); background: var(--zwart); color: #fff; }
.fotointro__beeld { position: absolute; inset: 0 0 0 clamp(0px, 34vw - 120px, 34%); z-index: -1; overflow: hidden; }
.fotointro__beeld img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 62% 40%; }
.fotointro__beeld::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--zwart) 0%, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0) 85%, var(--zwart) 100%), linear-gradient(90deg, var(--zwart) 0%, rgba(0, 0, 0, .8) 12%, rgba(0, 0, 0, .25) 32%, rgba(0, 0, 0, 0) 50%); }
.fotointro__tekst { display: grid; gap: 22px; justify-items: start; text-align: left; max-width: min(460px, 36vw); }
.fotointro .titel { color: #fff; }
.fotointro .dun { margin-inline: 0; color: rgba(255, 255, 255, .78); }
.fotointro .dun b, .fotointro .dun strong { color: #fff; }
.fotointro .ontdek { color: #fff; }
@media (max-width: 767px) {
  .fotointro { display: block; min-height: 0; padding: 0; }
  .fotointro__beeld { position: relative; inset: 0 !important; z-index: 0; aspect-ratio: 4 / 3; }
  .fotointro__beeld::after { background: linear-gradient(180deg, var(--zwart) 0%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 55%, var(--zwart) 100%); }
  .fotointro__tekst { max-width: none; padding: 8px var(--rand) var(--sectie); }
}

/* ---------- v16: productpagina (beter dan Dulst, Crombé en De Bruijn) ---------- */
.product--fijn { align-items: start; }
.product--fijn .product__beeld { background: var(--grijs); }
.product--fijn .product__beeld img { mix-blend-mode: multiply; }
.product--fijn .product__info { gap: 20px; max-width: min(520px, 40vw); }
.product--fijn .product__info h1 { font-weight: 700; font-size: clamp(26px, 1.4rem + .8vw, 36px); line-height: 1.12; }
.product__stempel { position: absolute; top: 18px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--zwart); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.product__stempel .icon, .kenmerken__ster .icon { width: 13px; height: 13px; fill: currentColor; stroke: none; }
.kenmerken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kenmerken a, .kenmerken span { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border: 1px solid var(--lijn); font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--inkt); transition: background .25s, color .25s, border-color .25s; }
.kenmerken a:hover { background: var(--zwart); border-color: var(--zwart); color: #fff; }
.kenmerken__ster a { background: var(--zwart); border-color: var(--zwart); color: #fff; }
.product__teaser { margin: 0; font-size: 15px; line-height: 1.7; color: var(--tekst); }
.product__teaser .ontdek { margin-left: 4px; white-space: nowrap; }
.punten { list-style: none; margin: 0; padding: 16px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; border-block: 1px solid var(--lijn); }
.punten:not(:has(li:not([hidden]))) { display: none; }
.punten li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; align-content: start; }
.punten .icon { grid-row: span 2; width: 22px; height: 22px; stroke: var(--inkt); fill: none; stroke-width: 1.2; }
.punten small { font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--tekst-zacht); }
.punten b { font-weight: 400; font-size: 14px; line-height: 1.4; color: var(--inkt); }
.product--fijn .product__prijs b { font-weight: 700; font-size: 30px; }
.product__doos { margin: -10px 0 0; font-size: 13px; color: var(--tekst-zacht); }
.product__doos b { font-weight: 700; color: var(--inkt); }
.vinkje { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 14px; cursor: pointer; }
.vinkje input { accent-color: var(--zwart); width: 16px; height: 16px; flex: none; }
.voorraad { display: flex; align-items: center; gap: 10px; margin: -4px 0 0; font-size: 13px; color: var(--inkt); }
.voorraad i { width: 8px; height: 8px; border-radius: 50%; background: #2f7d4f; box-shadow: 0 0 0 4px rgba(47, 125, 79, .14); flex: none; }
.voorraad--uit i { background: var(--wijnrood); box-shadow: 0 0 0 4px rgba(142, 42, 46, .14); }
.bezorging { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--lijn); border: 1px solid var(--lijn); }
.bezorging > div { display: grid; grid-template-columns: 22px 1fr; gap: 12px; padding: 16px; background: var(--wit); }
.bezorging .icon { width: 22px; height: 22px; stroke: var(--inkt); fill: none; stroke-width: 1.2; }
.bezorging p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--tekst); }
.bezorging b { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--inkt); }
.advies .ontdek { margin-top: 6px; }

/* proefnotities, fiche en domein op een zwarte band */
.wijnband { background: var(--zwart); color: #fff; padding: clamp(60px, 8vw, 110px) var(--rand); }
.wijnband__tabs { display: flex; justify-content: center; gap: clamp(18px, 4vw, 56px); max-width: 1100px; margin: 0 auto clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--lijn-d); overflow-x: auto; scrollbar-width: none; }
.wijnband__tabs button { position: relative; padding: 0 2px 18px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .55); white-space: nowrap; transition: color .3s; }
.wijnband__tabs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: #fff; transform: scaleX(0); transition: transform .5s var(--expo); }
.wijnband__tabs button[aria-selected="true"] { color: #fff; }
.wijnband__tabs button[aria-selected="true"]::after { transform: scaleX(1); }
.wijnband__tabs button:hover { color: #fff; }
.wijnband__paneel { max-width: 760px; margin: 0 auto; display: grid; gap: 28px; justify-items: start; animation: in .7s var(--expo) both; }
.wijnband .rte { font-size: 16px; line-height: 1.85; color: rgba(255, 255, 255, .8); }
.wijnband .rte p + p { margin-top: 1.1em; }
.wijnband .rte strong, .wijnband .rte b { color: #fff; }
.wijnband .fiche { width: 100%; grid-template-columns: repeat(3, 1fr); border-top-color: var(--lijn-d); }
.wijnband .fiche div { border-color: var(--lijn-d) !important; text-align: left; padding: 18px 16px 18px 0; }
.wijnband .fiche div:not(:nth-child(4n)) { border-right: 0; }
.wijnband .fiche dt { font-size: 10px; font-weight: 700; letter-spacing: .2em; color: rgba(255, 255, 255, .55); }
.wijnband .fiche dd { font-size: 15px; color: #fff; }
.wijnband .ontdek { color: #fff; }
.wijnband__print { display: inline-flex; align-items: center; gap: 10px; }
.wijnband__print .icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.3; }
.smaakbalken { display: grid; gap: 14px; width: 100%; max-width: 460px; margin: 0; }
.smaakbalken div { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 16px; }
.smaakbalken dt { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.smaakbalken dd { margin: 0; height: 2px; background: var(--lijn-d); position: relative; }
.smaakbalken i { position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 20%); background: #fff; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wijn__label { position: absolute; top: 12px; left: 12px; z-index: 1; padding: 5px 9px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.wijn__label--ster { left: auto; right: 12px; background: var(--zwart); }

/* categorieën en prijsschuif in de filters */
.categorieen, .categorieen ul { list-style: none; margin: 0; padding: 0; display: grid; }
.categorieen a { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; color: var(--tekst); transition: padding-left .3s var(--expo), color .2s; }
.categorieen a:hover { padding-left: 6px; color: var(--inkt); }
.categorieen a[aria-current="page"] { font-weight: 700; color: var(--inkt); padding-left: 10px; box-shadow: inset 2px 0 0 var(--inkt); }
.categorieen small { font-size: 12px; color: var(--tekst-zacht); }
.categorieen__sub a, .categorieen ul a { padding-left: 14px; font-size: 13px; }
.filter__zoek { width: 100%; margin: 0 0 8px; padding: 8px 10px; border: 1px solid var(--lijn); background: #fff; font: inherit; font-size: 13px; }
.filter__lijst li.is-extra { display: none; }
[data-filter-groep].is-alles li.is-extra, [data-filter-groep].is-zoekend li.is-extra:not([hidden]) { display: block; }
[data-filter-groep].is-zoekend .filter__meer { display: none; }
.prijsschuif { display: grid; gap: 16px; padding-top: 6px; }
.prijsschuif__baan { position: relative; height: 28px; }
.prijsschuif__baan::before, .prijsschuif__vulling { content: ""; position: absolute; top: 13px; height: 2px; }
.prijsschuif__baan::before { left: 0; right: 0; background: var(--lijn); }
.prijsschuif__vulling { left: 0; right: 0; background: var(--inkt); }
.prijsschuif input[type="range"] { position: absolute; inset: 0; width: 100%; margin: 0; background: none; pointer-events: none; -webkit-appearance: none; appearance: none; height: 28px; }
.prijsschuif input[type="range"]::-webkit-slider-thumb { pointer-events: auto; -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid var(--inkt); cursor: grab; transition: transform .2s; }
.prijsschuif input[type="range"]::-moz-range-thumb { pointer-events: auto; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--inkt); cursor: grab; }
.prijsschuif input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.15); }
.prijsschuif input[type="range"]:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--inkt); outline-offset: 3px; }
.prijsschuif input[type="range"]::-webkit-slider-runnable-track { background: none; }
.prijsschuif input[type="range"]::-moz-range-track { background: none; }
.prijsschuif__velden { display: grid; grid-template-columns: 1fr 14px 1fr; align-items: end; gap: 8px; }
.prijsschuif__velden label { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; border: 1px solid var(--lijn); background: #fff; padding: 6px 10px; }
.prijsschuif__velden label:focus-within { border-color: var(--inkt); }
.prijsschuif__velden label span { grid-column: 1 / -1; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-zacht); }
.prijsschuif__velden b { font-weight: 400; color: var(--tekst-zacht); }
.prijsschuif__velden input { width: 100%; min-width: 0; border: 0; padding: 2px 0; font: inherit; font-size: 15px; color: var(--inkt); background: none; -moz-appearance: textfield; }
.prijsschuif__velden input::-webkit-inner-spin-button { -webkit-appearance: none; }
.prijsschuif__velden input:focus { outline: none; }
.prijsschuif__streep { height: 1px; background: var(--tekst-zacht); margin-bottom: 18px; }
.prijsschuif__snel { display: flex; flex-wrap: wrap; gap: 6px; }
.prijsschuif__snel button { height: 28px; padding: 0 10px; border: 1px solid var(--lijn); font-size: 12px; transition: background .2s, color .2s, border-color .2s; }
.prijsschuif__snel button:hover { border-color: var(--inkt); }
.prijsschuif__snel button[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: #fff; }

@media (max-width: 860px) {
  .product--fijn .product__info { max-width: none; }
  .bezorging { grid-template-columns: 1fr; }
  .wijnband__tabs { justify-content: flex-start; }
  .wijnband .fiche { grid-template-columns: 1fr 1fr; }
}

/* fiche afdrukken of als PDF bewaren: enkel fles, naam, kenmerken en fiche */
@media print {
  html.print-fiche body { padding: 0 !important; background: #fff; }
  html.print-fiche body > *:not(main):not(#MainContent), html.print-fiche .zijbalk, html.print-fiche .paginalogo, html.print-fiche .kopenbalk,
  html.print-fiche .koopform, html.print-fiche .voorraad, html.print-fiche .bezorging, html.print-fiche .advies, html.print-fiche .kruimel,
  html.print-fiche .wijnband__tabs, html.print-fiche .wijnband__print, html.print-fiche .product__duimen, html.print-fiche .shopify-section:not(:has(.product, .wijnband)),
  html.print-fiche .voet, html.print-fiche footer { display: none !important; }
  html.print-fiche .product { grid-template-columns: 40% 1fr; padding: 0 0 20px; }
  html.print-fiche .product__media { position: static; }
  html.print-fiche .wijnband { background: #fff; color: #000; padding: 0; }
  html.print-fiche .wijnband__paneel[hidden] { display: grid !important; }
  html.print-fiche .wijnband .rte, html.print-fiche .wijnband .fiche dd, html.print-fiche .wijnband .fiche dt, html.print-fiche .wijnband h2 { color: #000 !important; }
  html.print-fiche .wijnband .fiche div { border-color: #ccc !important; }
}

/* footer en productinfo: kolommen mogen smaller worden dan hun langste woord (mail, url), zodat er niets naast het scherm valt */
.voet__rooster > *, .product--fijn .product__info, .product--fijn .product__media { min-width: 0; }
.voet__rooster a { overflow-wrap: anywhere; }
@media (max-width: 560px) { .voet__rooster { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 20px; } .punten { grid-template-columns: 1fr; gap: 12px; } }

/* ---------- v17: horizontale menubalk in de webshop ----------
   Op de shop- en productpagina's vervangt een zwarte balk bovenaan de verticale zijbalk.
   Wijn, Mousserend en Spirits openen een paneel met kolommen (land → streek → kleur/stijl), Advies en Winkel een infopaneel. */
body.heeft-shopbalk { padding-right: 0 !important; padding-top: 0 !important; }
.heeft-shopbalk .zijbalk, .heeft-shopbalk .paginalogo { display: none !important; }
.shopbalk { position: sticky; top: 0; z-index: 65; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 76px; padding: 0 var(--rand); background: var(--zwart); color: #fff; }
.shopbalk__logo img { height: 52px; width: auto; filter: invert(1) brightness(1.1); }
.shopbalk__burger { display: none; width: 40px; height: 40px; position: relative; }
.shopbalk__burger i, .shopbalk__burger i::before, .shopbalk__burger i::after { position: absolute; left: 9px; width: 22px; height: 1px; background: currentColor; transition: transform .4s var(--expo), opacity .2s; }
.shopbalk__burger i { top: 20px; }
.shopbalk__burger i::before, .shopbalk__burger i::after { content: ""; left: 0; }
.shopbalk__burger i::before { top: -7px; }
.shopbalk__burger i::after { top: 7px; }
.shopbalk.nav-open .shopbalk__burger i { background: transparent; }
.shopbalk.nav-open .shopbalk__burger i::before { transform: translateY(7px) rotate(45deg); }
.shopbalk.nav-open .shopbalk__burger i::after { transform: translateY(-7px) rotate(-45deg); }
.shopbalk__nav ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: clamp(18px, 2.6vw, 44px); }
.shopbalk__nav a, .shopbalk__nav button { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 76px; font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); transition: color .25s; }
.shopbalk__nav a svg { width: 12px; height: 12px; opacity: .6; }
.shopbalk__nav a::after, .shopbalk__nav button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 22px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--expo); }
.shopbalk__nav a:hover, .shopbalk__nav button:hover, .shopbalk__nav button[aria-expanded="true"] { color: #fff; }
.shopbalk__nav a:hover::after, .shopbalk__nav button:hover::after, .shopbalk__nav button[aria-expanded="true"]::after { transform: scaleX(1); }
.shopbalk__tools { display: flex; align-items: center; gap: 6px; }
.shopbalk__ico { position: relative; width: 40px; height: 40px; display: grid; place-items: center; color: #fff; }
.shopbalk__ico svg { width: 20px; height: 20px; }
.shopbalk__ico .teller { top: 2px; right: 0; }

.sbm { position: absolute; left: 0; right: 0; top: 100%; background: var(--wit); color: var(--tekst); border-top: 1px solid var(--lijn-d); box-shadow: 0 30px 60px rgba(0, 0, 0, .18); animation: sbmIn .45s var(--expo) both; max-height: calc(100vh - 76px); overflow: auto; }
@keyframes sbmIn { from { transform: translateY(-6px); } }
.sbm__binnen { display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; max-width: 1360px; margin: 0 auto; padding: 40px var(--rand) 48px; gap: 0; }
.sbm__kolom { padding: 0 32px; border-left: 1px solid var(--lijn); display: grid; align-content: start; gap: 2px; min-width: 0; }
.sbm__kolom:first-child { border-left: 0; padding-left: 0; }
.sbm__kolom--land, .sbm__kolom--regio { max-height: 420px; overflow: auto; scrollbar-width: thin; }
.sbm__kolom--breed { grid-column: span 2; }
.sbm__kop { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-zacht); }
.sbm__rij { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; font-size: 15px; color: var(--inkt); transition: padding-left .35s var(--expo); }
.sbm__rij small { font-size: 12px; color: var(--tekst-zacht); }
.sbm__rij:hover { padding-left: 6px; }
.sbm__rij[aria-current="true"] { font-weight: 700; padding-left: 10px; box-shadow: inset 2px 0 0 var(--inkt); }
.sbm__rij.is-leeg { opacity: .35; pointer-events: none; }
.sbm__alles { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt); }
.sbm__alles svg { width: 14px; height: 14px; transition: transform .4s var(--expo); }
.sbm__alles:hover svg { transform: translateX(4px); }
.sbm__noot { margin: 0; font-size: 14px; line-height: 1.6; color: var(--tekst); }
.sbm__kaart { position: relative; display: block; margin-left: 32px; overflow: hidden; min-height: 300px; background: var(--zwart); color: #fff; }
.sbm__kaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .82; transition: transform 1.2s var(--expo), opacity .4s; }
.sbm__kaart:hover img { transform: scale(1.05); opacity: .7; }
.sbm__kaart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .75), transparent 60%); }
.sbm__kaart span { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: grid; gap: 4px; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: .02em; }
.sbm__kaart small { font-family: var(--accent); font-weight: 300; font-size: 18px; text-transform: none; letter-spacing: 0; }
.sbm__kaart svg { width: 18px; height: 18px; }
.sbm__kaart--breed { grid-column: span 2; }
.sbm__flessen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.sbm__fles { display: grid; gap: 6px; justify-items: center; text-align: center; font-size: 12px; line-height: 1.35; color: var(--inkt); }
.sbm__fles img { height: 150px; width: auto; object-fit: contain; mix-blend-mode: multiply; transition: transform .6s var(--expo); }
.sbm__fles:hover img { transform: translateY(-4px); }
.sbm__fles span { text-transform: uppercase; letter-spacing: .02em; }
.sbm__fles b { font-weight: 400; color: var(--tekst-zacht); }
.sbm__persoon { grid-column: span 2; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.sbm__persoon img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 40%; }
.sbm__adres { margin: 0 0 4px; font-size: 16px; line-height: 1.6; color: var(--inkt); }
.sbm__adres small { color: var(--tekst-zacht); }
.sbm__uren { margin: 0 0 14px; display: grid; gap: 6px; }
.sbm__uren div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--lijn); font-size: 14px; }
.sbm__uren dt { font-weight: 700; color: var(--inkt); }
.sbm__uren dd { margin: 0; }
/* de shopheld schuift onder de balk: de foto begint meteen onder de zwarte balk */
.heeft-shopbalk .shopheld { margin-top: 0; }
.heeft-shopbalk .product { padding-top: clamp(48px, 6vw, 80px); }
/* home en evenement: de balk draagt het logo, de hero past eronder op één scherm */
.heeft-shopbalk .hero__logo { display: none; }
.heeft-shopbalk .hero { height: min(calc(100svh - 76px), 980px); }
.heeft-shopbalk section[id] { scroll-margin-top: 76px; }
@media (max-width: 1023px) { .heeft-shopbalk .hero { height: min(calc(100svh - 64px), 900px); } .heeft-shopbalk section[id] { scroll-margin-top: 64px; } }

@media (max-width: 1023px) {
  .shopbalk { grid-template-columns: auto 1fr auto; height: 64px; gap: 8px; }
  .shopbalk__burger { display: block; }
  .shopbalk__logo { justify-self: center; }
  .shopbalk__logo img { height: 42px; }
  .shopbalk__nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--zwart); max-height: calc(100vh - 64px); overflow: auto; display: none; border-top: 1px solid var(--lijn-d); }
  .shopbalk.nav-open .shopbalk__nav { display: block; }
  .shopbalk__nav ul { flex-direction: column; gap: 0; padding: 8px var(--rand) 24px; }
  .shopbalk__nav a, .shopbalk__nav button { width: 100%; height: 56px; font-size: 14px; border-bottom: 1px solid var(--lijn-d); justify-content: space-between; }
  .shopbalk__nav a::after, .shopbalk__nav button::after { display: none; }
  .shopbalk__nav button::before { content: "+"; order: 2; font-weight: 300; font-size: 20px; }
  .shopbalk__nav button[aria-expanded="true"]::before { content: "–"; }
  .sbm { position: fixed; top: 64px; bottom: 0; max-height: none; z-index: 2; }
  .shopbalk:not(.nav-open) .sbm { display: none; }
  .sbm__binnen { grid-template-columns: 1fr; padding: 24px var(--rand) 40px; gap: 28px; }
  .sbm__kolom, .sbm__kolom:first-child { border-left: 0; padding: 0; }
  .sbm__kolom--land, .sbm__kolom--regio { max-height: none; }
  .sbm__kolom--breed, .sbm__persoon, .sbm__kaart--breed { grid-column: auto; }
  .sbm__kaart { margin-left: 0; min-height: 200px; }
  .sbm__flessen { grid-template-columns: 1fr 1fr; }
  .sbm__persoon { grid-template-columns: 1fr; }
}
.sbm__terug { display: none; }
@media (max-width: 1023px) { .sbm__terug { display: flex; align-items: center; gap: 10px; width: 100%; padding: 18px var(--rand); border-bottom: 1px solid var(--lijn); font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inkt); } .sbm__terug::before { content: "←"; font-size: 16px; letter-spacing: 0; } }
.shopbalk__nav .icon { width: 12px; height: 12px; opacity: .6; }
.shopbalk__ico .icon { width: 20px; height: 20px; }
.sbm__alles .icon, .sbm__kaart .icon { width: 14px; height: 14px; }
.sbm__kaart img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
button.sbm__rij { width: 100%; text-align: left; }
.shopbalk-sectie { display: contents; }

/* ---------- v18: digitale wijncatalogus ---------- */
.cat-held { position: relative; isolation: isolate; display: grid; align-items: end; min-height: min(78vh, 720px); padding: clamp(120px, 14vw, 180px) var(--rand) clamp(56px, 7vw, 96px); background: var(--zwart) url("../assets/foto/vaten.jpg") center 40% / cover; color: #fff; }
.cat-held::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--zwart) 0%, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .35) 100%); }
.cat-held__tekst { max-width: 980px; display: grid; gap: 22px; }
.cat-held__acc { margin: 0; font-family: var(--accent); font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); color: rgba(255, 255, 255, .85); }
.cat-held__titel { margin: 0; font-weight: 700; font-size: clamp(40px, 6.4vw, 96px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.cat-held__cijfers { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 32px; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cat-held__cijfers b { color: #fff; font-size: 15px; margin-right: 6px; }
.cat-held__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 10px; }
.knop--wit { background: #fff; color: var(--zwart); border-color: #fff; }
.knop--wit:hover { background: transparent; color: #fff; }
.ontdek--licht { color: #fff; }

.cat-brief { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--sectie) var(--rand); max-width: 1360px; margin: 0 auto; }
.cat-brief__beeld img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 40%; }
.cat-brief__tekst { display: grid; gap: 18px; justify-items: start; }
.cat-brief__inhoud { position: relative; max-height: 15.5em; overflow: hidden; font-size: 16px; line-height: 1.8; color: var(--tekst); transition: max-height .8s var(--expo); }
.cat-brief__inhoud p + p { margin-top: 1em; }
.cat-brief__inhoud::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5em; background: linear-gradient(transparent, var(--wit)); pointer-events: none; transition: opacity .4s; }
.cat-brief__inhoud.is-open { max-height: 200em; }
.cat-brief__inhoud.is-open::after { opacity: 0; }

.cat-balk { position: sticky; top: 76px; z-index: 30; display: grid; grid-template-columns: minmax(240px, 1.2fr) auto auto; align-items: center; gap: 14px 28px; padding: 16px var(--rand); background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); border-block: 1px solid var(--lijn); scroll-margin-top: 76px; }
.cat-zoek { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--inkt); padding: 6px 0; }
.cat-zoek svg { width: 18px; height: 18px; flex: none; }
.cat-zoek input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 15px; color: var(--inkt); padding: 4px 0; }
.cat-zoek input:focus { outline: none; }
.cat-kleuren, .cat-btw { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-kleuren button, .cat-btw button { height: 32px; padding: 0 12px; border: 1px solid var(--lijn); font-size: 12px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; }
.cat-kleuren button:hover, .cat-btw button:hover { border-color: var(--inkt); }
.cat-kleuren button[aria-pressed="true"], .cat-btw button[aria-pressed="true"] { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.cat-opties { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }

.cat { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding: 48px var(--rand) var(--sectie); max-width: 1440px; margin: 0 auto; }
.cat-inhoud { position: sticky; top: 170px; align-self: start; max-height: calc(100vh - 190px); overflow: auto; scrollbar-width: thin; }
.cat-inhoud ol { list-style: none; margin: 12px 0 0; padding: 0; counter-reset: h; }
.cat-inhoud li { counter-increment: h; }
.cat-inhoud li.is-leeg { display: none; }
.cat-inhoud a { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: baseline; padding: 6px 0; font-size: 14px; color: var(--tekst); transition: color .2s, padding-left .35s var(--expo); }
.cat-inhoud a::before { content: counter(h, decimal-leading-zero); font-size: 11px; color: var(--tekst-zacht); }
.cat-inhoud a small { font-size: 11px; color: var(--tekst-zacht); }
.cat-inhoud a:hover, .cat-inhoud a[aria-current] { color: var(--inkt); }
.cat-inhoud a[aria-current] { font-weight: 700; padding-left: 8px; box-shadow: inset 2px 0 0 var(--inkt); }

.cat-hoofdstuk { scroll-margin-top: 170px; padding-bottom: 56px; }
.cat-hoofdstuk + .cat-hoofdstuk { padding-top: 40px; border-top: 1px solid var(--inkt); }
.cat-hoofdstuk__kop { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 18px; margin-bottom: 28px; }
.cat-hoofdstuk__nr { font-family: var(--accent); font-weight: 300; font-size: 44px; line-height: 1; color: var(--tekst-zacht); }
.cat-hoofdstuk__kop h2 { margin: 0; font-weight: 700; font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; text-transform: uppercase; color: var(--inkt); }
.cat-hoofdstuk__kop small { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--tekst-zacht); }
.cat-streek { margin-top: 26px; }
.cat-streek__titel { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--lijn); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--inkt); }
.cat-domein { margin: 22px 0 30px; }
.cat-domein__naam { margin: 0 0 6px; font-family: var(--merk); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--inkt); }
.cat-domein__tekst { margin: 0 0 12px; max-width: 72ch; font-size: 14px; line-height: 1.7; color: var(--tekst-zacht); }
.cat-wijnen { list-style: none; margin: 0; padding: 0; }
.cat-wijn { position: relative; display: grid; grid-template-columns: 10px 44px minmax(0, 1fr) 62px 96px 34px; align-items: center; gap: 14px; padding: 10px 8px; border-bottom: 1px solid var(--lijn); transition: background .2s; }
.cat-wijn:hover { background: var(--grijs); }
.cat-wijn__kleur { width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-zacht); }
.cat-wijn--rood .cat-wijn__kleur { background: #7a1f2b; }
.cat-wijn--wit .cat-wijn__kleur { background: #d9c58a; }
.cat-wijn--rosé .cat-wijn__kleur { background: #e2a39b; }
.cat-wijn--mousserend .cat-wijn__kleur { background: #fff; box-shadow: inset 0 0 0 2px #c9ad62; }
.cat-wijn--zoet .cat-wijn__kleur { background: #a8631c; }
.cat-wijn--sterk .cat-wijn__kleur { background: var(--zwart); }
.cat-wijn__jaar { font-size: 13px; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }
.cat-wijn__tekst { display: grid; gap: 2px; min-width: 0; }
.cat-wijn__tekst a { display: grid; gap: 2px; }
.cat-wijn__naam { font-size: 15px; font-weight: 700; color: var(--inkt); }
.cat-wijn.is-online .cat-wijn__naam { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: text-decoration-color .2s; }
.cat-wijn.is-online:hover .cat-wijn__naam { text-decoration-color: currentColor; }
.cat-wijn__detail { font-size: 13px; color: var(--tekst); }
.cat-wijn__druif { font-size: 12px; color: var(--tekst-zacht); }
.cat-wijn__fles { position: absolute; right: 200px; top: 50%; height: 84px; width: auto; transform: translateY(-50%) scale(.9); opacity: 0; pointer-events: none; mix-blend-mode: multiply; transition: opacity .25s, transform .4s var(--expo); }
.cat-wijn:hover .cat-wijn__fles { opacity: 1; transform: translateY(-50%) scale(1); }
.cat-wijn__code { font-size: 11px; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; text-align: right; }
.cat-prijs { font-size: 15px; color: var(--inkt); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cat-prijs--vraag { font-size: 11px; color: var(--tekst-zacht); white-space: normal; }
.cat-wijn__plus { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--lijn); border-radius: 50%; color: var(--inkt); transition: background .2s, color .2s, border-color .2s; }
.cat-wijn__plus svg { width: 16px; height: 16px; }
.cat-wijn__plus:hover { background: var(--inkt); border-color: var(--inkt); color: #fff; }
.cat-wijn__plus.is-ok { background: #2f7d4f; border-color: #2f7d4f; color: #fff; }
.cat-wijn__plus.is-bezig { opacity: .5; }
.cat-wijn__plus--leeg { border: 0; }
.cat-leeg { padding: 40px 0; font-size: 16px; }
.cat-voorwaarden { max-width: 900px; margin: 0 auto; padding: 0 var(--rand) var(--sectie); font-size: 13px; line-height: 1.7; color: var(--tekst-zacht); display: grid; gap: 8px; }

@media (max-width: 1023px) {
  .cat-balk { top: 64px; grid-template-columns: 1fr; gap: 12px; padding: 12px var(--rand); }
  .cat-kleuren { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--rand) * -1); padding: 0 var(--rand); }
  .cat-kleuren button { flex: none; }
  .cat-opties { justify-content: space-between; }
  .cat { grid-template-columns: 1fr; padding-top: 28px; }
  .cat-inhoud { display: none; }
  .cat-hoofdstuk, .cat-balk { scroll-margin-top: 64px; }
  .cat-brief { grid-template-columns: 1fr; }
  .cat-wijn { grid-template-columns: 8px minmax(0, 1fr) auto 32px; gap: 10px; padding: 12px 0; }
  .cat-wijn__jaar { display: none; }
  .cat-wijn__code, .cat-wijn__fles { display: none; }
  .cat-hoofdstuk__nr { font-size: 32px; }
}
.sbm__snel { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--lijn); }
.sbm__snel span { font-size: 11px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--tekst-zacht); }
.sbm__snel a { font-size: 14px; color: var(--inkt); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.sbm__snel a:hover { text-decoration-color: currentColor; }



/* ---------- v20: evenementpagina (Herfstdegustatie) ---------- */
.ev-held { position: relative; isolation: isolate; overflow: hidden; display: grid; align-items: end; min-height: min(92vh, 860px); padding: clamp(120px, 14vw, 180px) var(--rand) clamp(56px, 7vw, 96px); background: var(--zwart); color: #fff; }
.ev-held__beeld { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.ev-held__beeld img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; max-width: none; object-fit: cover; object-position: 50% 45%; }
.ev-held::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--zwart) 0%, rgba(0, 0, 0, .6) 40%, rgba(0, 0, 0, .25) 100%); }
.ev-held__tekst { display: grid; gap: 18px; max-width: 1000px; }
.ev-held__label { color: rgba(255, 255, 255, .75); }
.ev-held__titel { margin: 0; font-weight: 700; font-size: clamp(42px, 7vw, 108px); line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.ev-held__acc { margin: 0; font-family: var(--accent); font-weight: 300; font-size: clamp(22px, 2.4vw, 34px); color: rgba(255, 255, 255, .88); }
.ev-held__data { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px 0; font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
.ev-held__data span + span::before { content: "·"; margin: 0 14px; color: rgba(255, 255, 255, .5); }
.ev-held__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; margin-top: 12px; }

/* volle breedte (anders schijnt de sticky voet zwart door aan de zijkanten), inhoud binnen 1360px */
.ev-uitnodiging { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--sectie) max(var(--rand), (100% - 1360px) / 2 + var(--rand)); }
.ev-uitnodiging__tekst { display: grid; gap: 20px; justify-items: start; }
.ev-uitnodiging__tekst .dun { margin: 0; max-width: 56ch; }
.ev-uitnodiging__beeld { margin: 0; }
.ev-uitnodiging__beeld img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }

.ev-dagen { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--zwart); color: #fff; }
.ev-dag { display: grid; gap: 10px; justify-items: center; text-align: center; padding: clamp(40px, 6vw, 80px) 20px; border-left: 1px solid var(--lijn-d); }
.ev-dag:first-child { border-left: 0; }
.ev-dag p { margin: 0; }
.ev-dag__dag { font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: rgba(255, 255, 255, .65); }
.ev-dag__datum { font-family: var(--merk); font-weight: 600; font-size: clamp(64px, 8vw, 120px); line-height: .9; display: flex; align-items: flex-start; gap: 6px; }
.ev-dag__datum small { font-family: var(--sans); font-weight: 700; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; margin-top: 12px; }
.ev-dag__uren { font-size: 14px; color: rgba(255, 255, 255, .75); line-height: 1.6; }
.ev-dag__uren b { color: #fff; font-size: 18px; }

.ev-praktisch { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--sectie) max(var(--rand), (100% - 1360px) / 2 + var(--rand)); }
.ev-praktisch__tekst { display: grid; gap: 20px; justify-items: start; }
.ev-praktisch__tekst .dun { margin: 0; }
.ev-info { margin: 0; width: 100%; border-top: 1px solid var(--lijn); }
.ev-info div { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--lijn); }
.ev-info dt { font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt); }
.ev-info dd { margin: 0; font-size: 15px; line-height: 1.55; }
.ev-info a { text-decoration: underline; text-underline-offset: 3px; }
.ev-praktisch__kaart { margin: 0; background: var(--grijs); padding: clamp(16px, 2vw, 28px); }
.ev-praktisch__kaart img { width: 100%; height: auto; }

.ev-eten { padding: 0 max(var(--rand), (100% - 1360px) / 2 + var(--rand)) var(--sectie); display: grid; gap: 32px; justify-items: start; }
.ev-eten__kop { display: grid; gap: 16px; max-width: 720px; }
.ev-eten__kop .dun { margin: 0; }
.ev-restos { list-style: none; margin: 0; padding: 0; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border-top: 1px solid var(--inkt); }
.ev-restos li { display: grid; gap: 6px; align-content: start; padding: 22px 24px 22px 0; border-bottom: 1px solid var(--lijn); }
.ev-restos b { font-family: var(--merk); font-weight: 600; font-size: 22px; color: var(--inkt); }
.ev-restos span { font-size: 14px; color: var(--tekst-zacht); }
.ev-restos a { justify-self: start; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--inkt); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.ev-afwezig { display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: clamp(32px, 6vw, 96px); padding: var(--sectie) var(--rand); background: var(--zwart); color: #fff; }
.ev-afwezig figure { margin: 0; }
.ev-afwezig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ev-afwezig > div { display: grid; gap: 18px; justify-items: start; max-width: 560px; }
.ev-afwezig .label { color: rgba(255, 255, 255, .7); }
.ev-afwezig .dun { margin: 0; color: rgba(255, 255, 255, .8); }
.ev-afwezig .dun a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ev-afwezig__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 28px; }

/* hoofdmenu: het evenement krijgt een datumlabel */

@media (max-width: 860px) {
  .ev-uitnodiging, .ev-praktisch, .ev-afwezig { grid-template-columns: 1fr; }
  .ev-dagen { grid-template-columns: 1fr; }
  .ev-dag { border-left: 0; border-top: 1px solid var(--lijn-d); padding: 32px 20px; }
  .ev-dag:first-child { border-top: 0; }
  .ev-info div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 560px) { .ev-held__tekst { min-width: 0; } .ev-held__titel { font-size: 7.4vw; overflow-wrap: break-word; } }
.ev-uitnodiging__beeld img, .ev-afwezig img, .cat-brief__beeld img { height: auto; }
.ev-uitnodiging__beeld img { max-height: 78vh; }

/* ---------- v21: mini-mandje en mandpagina, de klant ziet wat er gebeurt ---------- */
.mand__melding { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 28px; background: var(--zwart); color: #fff; font-size: 14px; line-height: 1.45; animation: in .5s var(--expo) both; }
.mand__melding b { font-weight: 700; }
.mand__melding[data-soort="fout"] { background: var(--wijnrood); }
.mand__vink { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; position: relative; }
.mand__vink::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid var(--zwart); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mand .mand__rij { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "beeld info weg" "beeld stuk stuk" "beeld aantal prijs"; align-items: center; gap: 6px 14px; padding: 18px 0; border-bottom: 1px solid var(--lijn); transition: background .6s; }
.mand__rij.is-nieuw { background: linear-gradient(90deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, 0)); }
.mand__rij .mand__beeld { grid-area: beeld; align-self: start; width: 72px; aspect-ratio: 3 / 4; background: var(--grijs); display: grid; place-items: center; }
.mand__rij .mand__beeld img { max-height: 92%; width: auto; mix-blend-mode: multiply; }
.mand__rij .mand__info { grid-area: info; display: grid; gap: 3px; min-width: 0; }
.mand__rij .mand__info small { font-size: 12px; color: var(--tekst-zacht); }
.mand__domein { font-size: 10px !important; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mand__rij .mand__naam { font-weight: 700; font-size: 13px; line-height: 1.35; text-transform: none; color: var(--inkt); }
.mand__eigenschap { color: var(--inkt) !important; }
.mand__korting { color: #2f7d4f !important; }
.mand__rij .mand__stukprijs { grid-area: stuk; font-size: 12px; color: var(--tekst-zacht); }
.mand .mand__stukprijs .saso-cart-item-price::after { content: " per fles"; }
.mand__rij s { color: var(--tekst-zacht); font-weight: 400; margin-right: 4px; }
.mand__kolomlabel { display: none; }
.mand__rij .mand__aantal { grid-area: aantal; display: inline-flex; align-items: center; gap: 0; height: 36px; padding: 0; margin: 4px 0 0; border: 1px solid var(--lijn); justify-self: start; }
.mand__rij .mand__aantal button { width: 34px; height: 34px; display: grid; place-items: center; justify-self: auto; color: var(--inkt); letter-spacing: 0; }
.mand__rij .mand__aantal button:disabled { opacity: .3; }
.mand__rij .mand__aantal input { width: 40px; height: 34px; border: 0; border-inline: 1px solid var(--lijn); text-align: center; font: inherit; font-size: 14px; color: var(--inkt); background: none; -moz-appearance: textfield; }
.mand__rij .mand__aantal input::-webkit-inner-spin-button { -webkit-appearance: none; }
.mand__rij .mand__prijs { grid-area: prijs; justify-self: end; font-size: 15px; font-weight: 700; color: var(--inkt); }
.mand__rij .mand__weg { grid-area: weg; align-self: start; justify-self: end; width: 28px; height: 28px; display: grid; place-items: center; color: var(--tekst-zacht); border-radius: 50%; transition: background .2s, color .2s; }
.mand__rij .mand__weg:hover { background: var(--grijs); color: var(--inkt); }
.mand__rij .mand__weg .icon { width: 14px; height: 14px; }
.mand__rij .mand__weg span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.mand__leeg { display: grid; gap: 16px; justify-items: start; padding: 32px 0; }
.mand__leeg p { margin: 0; color: var(--tekst-zacht); }
.mand__bedragen { margin: 0; display: grid; gap: 6px; }
.mand__bedragen div { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.mand__bedragen dd { margin: 0; }
.mand__bedragen .mand__totaal { font-size: 18px; font-weight: 700; text-transform: uppercase; color: var(--inkt); padding-top: 6px; }
.mand__beleid { margin: 0; font-size: 12px; line-height: 1.5; color: var(--tekst-zacht); }
.mand__beleid a { text-decoration: underline; text-underline-offset: 2px; }
.mand__snel, .mandpagina__snel { margin-top: -4px; }
.mand__links { display: flex; justify-content: space-between; gap: 16px; }
.mand.is-bezig .mand__lijst, .mandpagina.is-bezig .mandpagina__lijst, .mandpagina.is-bezig .mand__bedragen { opacity: .45; pointer-events: none; transition: opacity .2s; }
.teller.is-bump { animation: tellerBump .5s var(--expo); }
@keyframes tellerBump { 40% { transform: scale(1.45); } }
.knop.is-ok { background: #2f7d4f !important; border-color: #2f7d4f !important; color: #fff !important; }

/* mandpagina: kolommen Product · Prijs · Aantal · Totaal zoals de huidige shop */
.mandpagina { display: block; max-width: 1280px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) var(--rand) var(--sectie); }
.heeft-shopbalk .mandpagina { padding-top: clamp(40px, 5vw, 72px); }
.mandpagina__kop { display: grid; gap: 14px; margin-bottom: 36px; }
.mandpagina__kop .kruimel { justify-content: flex-start; }
.mandpagina__kop h1 small { font-weight: 400; font-size: 14px; letter-spacing: .14em; color: var(--tekst-zacht); margin-left: 10px; vertical-align: middle; }
.mandpagina__form { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.mandpagina__koppen, .mandpagina .mand__rij { display: grid; grid-template-columns: 96px minmax(0, 1fr) 110px 140px 110px 32px; grid-template-areas: "beeld info stuk aantal prijs weg"; align-items: center; gap: 0 20px; }
.mandpagina__koppen { padding: 0 0 12px; border-bottom: 1px solid var(--inkt); font-size: 11px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--inkt); }
.mandpagina__koppen span:first-child { grid-column: 1 / 3; }
.mandpagina__koppen span:nth-child(n+3) { text-align: right; }
.mandpagina__koppen span:nth-child(4) { text-align: center; }
.mandpagina .mand__rij { padding: 22px 0; border-bottom: 1px solid var(--lijn); }
.mandpagina .mand__rij .mand__beeld { width: 96px; }
.mandpagina .mand__rij .mand__naam { font-size: 15px; }
.mandpagina .mand__rij .mand__stukprijs { justify-self: end; font-size: 15px; color: var(--inkt); }
.mandpagina .mand__rij .mand__aantal { justify-self: center; margin: 0; }
.mandpagina .mand__rij .mand__prijs { font-size: 16px; }
.mandpagina .mand__rij .mand__weg { align-self: center; }
.mandpagina .mand__melding { margin: 12px 0 0; }
.mandpagina__terug { margin-top: 24px; }
.mandpagina__totaal { position: sticky; top: 110px; display: grid; gap: 16px; padding: 28px; background: var(--grijs); }
.mandpagina__totaal .mand__verzending { padding: 0 0 16px; border-bottom: 1px solid var(--lijn); }
.mandpagina__bijwerken { justify-self: center; }
.js .mandpagina__bijwerken { display: none; }
.mandpagina__zeker { list-style: none; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--lijn); display: grid; gap: 10px; font-size: 13px; }
.mandpagina__zeker li { display: flex; align-items: center; gap: 10px; }
.mandpagina__zeker .icon { width: 18px; height: 18px; stroke: var(--inkt); fill: none; stroke-width: 1.3; }
.mandpagina__leeg { display: grid; gap: 22px; justify-items: start; max-width: 560px; }
.mandpagina__knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
@media (max-width: 960px) {
  .mandpagina__form { grid-template-columns: 1fr; }
  .mandpagina__koppen { display: none; }
  .mandpagina .mand__rij { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "beeld info weg" "beeld stuk stuk" "beeld aantal prijs"; gap: 6px 14px; }
  .mandpagina .mand__rij .mand__beeld { width: 80px; }
  .mandpagina .mand__rij .mand__stukprijs { justify-self: start; font-size: 13px; color: var(--tekst-zacht); }
  .mandpagina .mand__rij .mand__aantal { justify-self: start; }
  .mandpagina__totaal { position: static; }
}
.mandpagina { max-width: none; background: var(--wit); }
.mandpagina > * { max-width: 1280px; margin-inline: auto; }
.mandpagina__form { grid-template-columns: minmax(0, 1fr) 340px; }
.mandpagina__koppen, .mandpagina .mand__rij { grid-template-columns: 88px minmax(180px, 1fr) 92px 128px 96px 28px; gap: 0 18px; }
.mand__notitie summary { list-style: none; display: flex; justify-content: space-between; gap: 12px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: none; color: var(--inkt); }
.mand__notitie summary::-webkit-details-marker { display: none; }
.mand__notitie summary::after { content: "+"; font-weight: 300; font-size: 18px; line-height: 1; }
.mand__notitie[open] summary::after { content: "–"; }
@media (max-width: 960px) { .mandpagina__form { grid-template-columns: 1fr; } .mandpagina .mand__rij { grid-template-columns: 80px minmax(0, 1fr) auto; gap: 6px 14px; } }

/* ---------- v2: reliëf op de grote donkere vlakken ---------- */
@media screen {
  .voet, .donker, .wijnband, .cadeaubon, .ev-dagen, .ev-afwezig, .proeven { background-image: var(--relief); background-size: 180px 180px, 100% 100%; }
  /* de smalle menubalk: enkel korrel, een lichtvlek zou hem in vakken delen */
  .shopbalk { background-image: var(--korrel); background-size: 180px 180px; }
}
@media screen and (max-width: 1023px) { .shopbalk__nav { background-image: var(--korrel); background-size: 180px 180px; } }

/* ---------- v2: degustaties. Rustig na de horizontale tijdlijn: het beeld blijft staan, de doelgroepen wisselen het ---------- */
.proeven { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background-color: var(--zwart); color: #fff; }
.proeven__beeld { position: sticky; top: 76px; height: calc(100vh - 76px); min-height: 520px; overflow: hidden; }
.proeven__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .8s var(--expo), transform 1.6s var(--expo); }
.proeven__beeld img.aan { opacity: 1; transform: scale(1); }
.proeven__tekst { display: grid; gap: 22px; align-content: center; justify-items: start; padding: var(--sectie) var(--rand) var(--sectie) clamp(40px, 6vw, 110px); max-width: 720px; }
.proeven__tekst .label { color: rgba(255, 255, 255, .7); }
.proeven__tekst .titel { color: #fff; }
.proeven__tekst .dun { margin: 0; max-width: 52ch; color: rgba(255, 255, 255, .8); }
.proeven__tekst .dun b { color: #fff; }
.proeven__lijst { list-style: none; margin: 18px 0 0; padding: 0; width: 100%; border-top: 1px solid var(--lijn-d); }
.proeven__lijst a { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 22px 0; border-bottom: 1px solid var(--lijn-d); transition: opacity .4s, padding-left .5s var(--expo); }
.proeven__lijst b { font-family: var(--merk); font-weight: 400; font-size: clamp(30px, 3vw, 46px); line-height: 1; }
.proeven__lijst span { font-size: 14px; color: rgba(255, 255, 255, .7); text-align: right; }
.proeven__lijst:hover a, .proeven__lijst:focus-within a { opacity: .45; }
.proeven__lijst a.aan, .proeven__lijst a:hover, .proeven__lijst a:focus-visible { opacity: 1; padding-left: 12px; }
.proeven__actie { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 14px; }
.proeven__actie p { margin: 0; font-size: 14px; color: rgba(255, 255, 255, .75); }
.proeven__actie p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1023px) { .proeven__beeld { top: 64px; height: calc(100vh - 64px); } }
@media (max-width: 860px) {
  .proeven { grid-template-columns: 1fr; }
  .proeven__beeld { position: relative; top: 0; height: 64vw; min-height: 0; }
  .proeven__tekst { padding: 48px var(--rand) var(--sectie); }
  .proeven__lijst:hover a, .proeven__lijst:focus-within a { opacity: 1; }
  .proeven__lijst a.aan { padding-left: 0; }
}

/* ---------- v22: klaar voor oplevering (P1) ----------
   Hero: schild terug boven de kop, kop op maat van het beeld, één zin, twee acties, geen scroll-druppel.
   Winkel: elke fles in hetzelfde lichtgrijze vak (zoals op de productpagina), formaatvarianten als regel onder de kaart. */
.hero__schild { position: absolute; top: clamp(28px, 5svh, 56px); left: 50%; transform: translateX(-50%); z-index: 1; }
.hero__schild img { height: clamp(84px, 12svh, 124px); width: auto; filter: invert(1) sepia(.2) brightness(1.05); }
.heeft-shopbalk .hero__schild { display: block; }
.hero__tekst { gap: 22px; padding-bottom: clamp(64px, 11vh, 120px); max-width: 960px; }
.hero h1 { font-size: clamp(32px, 1.6rem + 2.6vw, 68px); line-height: 1.04; letter-spacing: .02em; }
.hero h1 .acc { font-size: 1.08em; margin-top: 10px; color: var(--grijs); }
.hero__zin { max-width: 46ch; font-size: clamp(15px, .9rem + .3vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.hero__acties { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 32px; margin-top: 4px; }
.hero::after { background: radial-gradient(90% 70% at 50% 40%, rgba(0, 0, 0, .18), rgba(0, 0, 0, .8)), linear-gradient(0deg, var(--zwart) 0%, rgba(0, 0, 0, .88) 10%, transparent 52%); }
@media (max-width: 1023px) {
  .hero__schild { top: 20px; }
  .hero__schild img { height: 72px; }
  .hero h1 { font-size: clamp(30px, 8.6vw, 44px); }
}

.wijn__beeld { background: var(--grijs); }
.wijn__beeld img { top: 7%; height: 86%; mix-blend-mode: multiply; }
.wijn__beeld .wijn__label--ster { right: auto; left: 10px; top: 10px; padding: 6px 9px; font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--wit); background: var(--zwart); position: absolute; }
.wijn__varianten { margin: -2px 0 0; font-size: 12px; color: var(--tekst-zacht); }
.wijn__varianten a { position: relative; z-index: 2; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lijn); transition: text-decoration-color .2s; }
.wijn__varianten a:hover, .wijn__varianten a:focus-visible { text-decoration-color: currentColor; color: var(--inkt); }

/* ---------- v23: P2 en P3 na de review ----------
   Het huis als tijdlijnband, advies met gezicht, voet die alleen vast staat op lange pagina's, actieve staat in de balk,
   landen achter "Alle landen", geen nep-vet in de poort, catalogustitel die op telefoon past. */
.huis { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); background: var(--grijs); color: var(--tekst); }
.huis__beeld { position: relative; min-height: 420px; margin: 0; }
.huis__beeld figcaption { position: absolute; left: 20px; bottom: 16px; z-index: 1; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wit); }
.huis__jaren { display: grid; gap: 22px; align-content: center; justify-items: start; padding: clamp(48px, 6vw, 88px) clamp(28px, 5vw, 80px); }
.tijdlijn { margin: 0; display: grid; width: 100%; max-width: 560px; }
.tijdlijn > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--lijn); }
.tijdlijn dt { font-family: var(--merk); font-weight: 600; font-size: 30px; line-height: 1; color: var(--inkt); }
.tijdlijn dd { margin: 0; font-size: 15px; line-height: 1.5; }
.tijdlijn__nu dt { color: var(--wijnrood); }
.tijdlijn__nu dd { color: var(--inkt); }
@media (max-width: 860px) {
  .huis { grid-template-columns: 1fr; }
  .huis__beeld { min-height: 0; aspect-ratio: 4 / 3; }
  .huis__jaren { padding: 40px var(--rand) var(--sectie); }
  .tijdlijn > div { grid-template-columns: 72px minmax(0, 1fr); }
  .tijdlijn dt { font-size: 26px; }
}

.adviseur-sectie__kop .dun { margin-inline: 0; }
.adviseur-sectie__wie { margin: 8px 0 0; display: grid; gap: 10px; max-width: 420px; }
.adviseur-sectie__wie img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 40%; }
.adviseur-sectie__wie figcaption { font-size: 14px; line-height: 1.5; color: var(--tekst); }
.adviseur-sectie__wie a { text-decoration: underline; text-underline-offset: 3px; }

/* voet: op korte pagina's gewoon mee scrollen, en nooit onder de terug-naar-boven-knop */
.voet-los .voet { position: static; }
.voet__klein { padding-right: 90px; }
.voet { border-top: 1px solid var(--lijn-d); }
@media (max-width: 1023px) { .voet__klein { padding-right: 0; padding-bottom: 60px; } }
@media (max-width: 560px) {
  .voet__rooster > :nth-child(4) { grid-column: 1 / -1; }
  .brief { max-width: none; }
  .voet .midden { justify-self: start; text-align: left; }
  .voet .knop--goud { padding: 10px 20px; line-height: 1.3; }
}

.shopbalk__nav a[aria-current="page"], .shopbalk__nav button[aria-current="page"] { color: var(--wit); }
.shopbalk__nav a[aria-current="page"]::after, .shopbalk__nav button[aria-current="page"]::after { transform: scaleX(1); }
.sbm__rest { display: grid; gap: 2px; }
.sbm__meer { margin-top: 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tekst-zacht); text-align: left; }
.sbm__meer:hover, .sbm__meer:focus-visible { color: var(--inkt); }
.sbm__kaart-noot { display: block; margin-top: 6px; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 12px; line-height: 1.4; text-transform: none; letter-spacing: 0; color: rgba(255, 255, 255, .8); }
@media (hover: none) { .sbm__rij[data-land]::after, .sbm__rij[data-regio]::after { content: "→"; margin-left: auto; padding-left: 10px; color: var(--tekst-zacht); } }

.poort__keuze button { font-weight: 700; }
.poort__nee a { color: var(--wit); text-decoration: underline; text-underline-offset: 3px; }
.cat-held__titel { font-size: clamp(32px, 9vw, 96px); overflow-wrap: anywhere; }
.product__stempel { cursor: help; }
html, body { overflow-x: clip; }
.cat, .cat-lijst, .cat-hoofdstuk, .cat-wijn { min-width: 0; max-width: 100%; }
.mandpagina__leeg .dun { margin-inline: 0; }

/* ---------- v24: afwerking P3 ---------- */
.wijnband .rte { font-size: 17px; color: rgba(255, 255, 255, .9); }
.wijn__herkomst, .advies-uit__info small, .punten small, .wijnband .fiche dt, .product__stempel { font-size: 11px; }
.mand__domein { font-size: 11px !important; }
.adviseur__modus { padding: 3px; gap: 3px; }

/* ---------- v25: balk over de hero, inhoud gekapt op 1360px, koppen van roosters, adviescontact ----------
   Home: de balk ligt doorzichtig over de hero (schild en kop dragen het eerste scherm) en wordt een zwarte balk
   zodra de hero uit beeld is. Op elk ander scherm blijft hij zoals hij was. */
.balk-zwevend .shopbalk { position: fixed; left: 0; right: 0; top: 0; background: transparent; transition: background .35s, box-shadow .35s; }
.balk-zwevend .shopbalk::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .55), transparent); opacity: 1; transition: opacity .35s; pointer-events: none; }
.balk-zwevend .shopbalk__logo { opacity: 0; transition: opacity .3s; pointer-events: none; }
.balk-zwevend .shopbalk.is-vast { background: var(--zwart); box-shadow: 0 1px 0 var(--lijn-d); }
.balk-zwevend .shopbalk.is-vast::before { opacity: 0; }
.balk-zwevend .shopbalk.is-vast .shopbalk__logo, .balk-zwevend .shopbalk.mega-open .shopbalk__logo, .balk-zwevend .shopbalk.nav-open .shopbalk__logo { opacity: 1; pointer-events: auto; }
.balk-zwevend .shopbalk.mega-open, .balk-zwevend .shopbalk.nav-open { background: var(--zwart); }
.balk-zwevend .hero { height: min(100svh, 980px); }
.balk-zwevend .hero__schild { top: clamp(96px, 14svh, 130px); }
@media (max-width: 1023px) { .balk-zwevend .hero { height: min(100svh, 900px); } .balk-zwevend .hero__schild { top: 84px; } }
@media (prefers-reduced-motion: reduce) { .balk-zwevend .shopbalk, .balk-zwevend .shopbalk::before, .balk-zwevend .shopbalk__logo { transition: none; } }

/* inhoud binnen een gekapte container: op 1920 en breder groeien de randen, niet de roosters */
.lijnkolommen, .rooster, .geschenken, .cadeaubon, .register, .adviseur-sectie__binnen, .sectiekop, #collecties > .titel, #collecties > .dun, #geschenken > .blok { max-width: 1360px; margin-inline: auto; }
.rooster { width: 100%; }
.adviseur-sectie { display: block; }
.adviseur-sectie__binnen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 100px); align-items: start; }
@media (max-width: 860px) { .adviseur-sectie__binnen { grid-template-columns: 1fr; } }
.huis, .proeven { padding-inline: max(0px, (100% - 1920px) / 2); }
.huis__jaren, .proeven__tekst { max-width: 720px; }

/* kop van een rooster: titel links, link rechts, lijn eronder */
.sectiekop { display: flex; justify-content: space-between; align-items: baseline; gap: 16px 32px; flex-wrap: wrap; padding-bottom: 18px; margin-bottom: clamp(32px, 4vw, 48px); border-bottom: 1px solid var(--lijn); }
.sectiekop .titel { text-align: left; }
@media (max-width: 560px) { .sectiekop { flex-direction: column; align-items: flex-start; } }

/* adviescontact: kleine foto naast de tekst, geen grote foto meer */
.adviseur-sectie__wie { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center; max-width: 460px; margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.adviseur-sectie__wie img { width: 96px; height: 96px; aspect-ratio: 1; object-fit: cover; object-position: 74% 28%; border-radius: 50%; }
.adviseur-sectie__wie b { display: block; font-weight: 700; font-size: 14px; margin-bottom: 4px; }
.adviseur-sectie__wie p { font-size: 14px; line-height: 1.5; color: var(--tekst); }
.huis__beeld img { object-position: 50% 30%; }
/* tablet-landschap en kleine laptops: de balk past op één regel, roosters op drie kolommen */
@media (min-width: 1024px) and (max-width: 1220px) {
  .shopbalk { gap: 14px; }
  .shopbalk__nav ul { gap: clamp(12px, 1.6vw, 22px); }
  .shopbalk__nav a, .shopbalk__nav button { font-size: 11px; letter-spacing: .12em; white-space: nowrap; }
}
@media (min-width: 761px) and (max-width: 1100px) { .rooster, .winkel .rooster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* degustatiebeelden: alleen het actieve beeld staat in de boom, met een korte fade-in (geen beelden op opacity 0) */
.proeven__beeld img:not(.aan) { display: none; opacity: 1; transform: none; }
.proeven__beeld img.aan { animation: proefIn .7s var(--expo) both; }
@keyframes proefIn { from { opacity: 0; transform: scale(1.04); } }