/* ==========================================================================
   Drènt — mockup variant B (nieuw ontwerp)
   Idee: de kleurvlakken van de etiketten zijn het ontwerp. Elke wijn heeft zijn
   eigen kleur; de rest van de site blijft stil (papier + olijf + inkt).
   Huisstijl = olijf #828169. De overige schemakleuren zijn alleen voor de wijnen zelf.
   Alle kleuren komen uit het schema Rebranding Drent/Drent-kleuren_kopie.pdf:
   #828169 (vast) · geel #e3b83f · koraal #f78e73 · rood #9a4643 · licht olijf #94916c ·
   zand #e1c08a · aubergine #37141e · RAL 7002 #797047 · RAL 7032 #b2b398.
   ========================================================================== */

:root {
  --olijf: #828169;          /* vaste huisstijlkleur */
  --olijf-diep: #5f5e4b;
  --steen: #b2b398;          /* RAL 7032, kleur van de watertoren */
  --toren: #797047;          /* RAL 7002 */
  --papier: #f6f6f6;         /* gelijk aan de achtergrond van de flesfoto's → flessen "zweven" */
  --inkt: #1d1d1b;
  --inkt-zacht: #5c5b55;
  --aubergine: #37141e;
  --lijn: rgba(29, 29, 27, 0.14);

  --display: 'Italiana', 'Cormorant Garamond', Georgia, serif;
  --tekst: 'Jost', 'Helvetica Neue', Arial, sans-serif;

  --marge: clamp(1.25rem, 4vw, 4rem);
  --kop-hoogte: 84px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: var(--tekst);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.65;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; margin: 0; line-height: 1; letter-spacing: 0.005em; }
p { margin: 0 0 1em; max-width: 62ch; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* ---------- Kop ---------- */
.kop {
  position: sticky; top: 0; z-index: 40;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  height: var(--kop-hoogte); padding: 0 var(--marge);
  background: var(--papier);
  border-bottom: 1px solid var(--lijn);
}
.kop nav { display: flex; gap: clamp(1.1rem, 2vw, 2.25rem); }
.kop__rechts { display: flex; justify-content: flex-end; align-items: center; gap: clamp(1.1rem, 2vw, 2.25rem); }
.menuknop { display: none; background: none; border: 0; font: inherit; font-weight: 400; letter-spacing: 0.04em; color: inherit; cursor: pointer; padding: 0.4rem 0; }
.kop a { text-decoration: none; font-weight: 400; letter-spacing: 0.04em; }
.kop nav a { padding: 0.4rem 0; border-bottom: 1px solid transparent; }
.kop nav a:hover, .kop nav a[aria-current] { border-bottom-color: currentColor; }
.kop .logo img { height: 54px; width: auto; }

/* ---------- Mobiel menu ---------- */
.menu { position: fixed; inset: var(--kop-hoogte) 0 0 0; z-index: 39; background: var(--olijf); color: #fff; display: flex; flex-direction: column; justify-content: center; gap: 0.35rem; padding: 2rem var(--marge); }
.menu[hidden] { display: none; }
.menu a { font-family: var(--display); font-size: clamp(2.2rem, 9vw, 3.25rem); line-height: 1.15; text-decoration: none; }
.menu a[aria-current] { border-bottom: 1px solid currentColor; align-self: flex-start; }
html.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .menu:not([hidden]) a { opacity: 0; transform: translateY(0.4em); animation: opkomst 0.5s cubic-bezier(0.2, 0.7, 0.1, 1) forwards; }
  .menu a:nth-child(2) { animation-delay: 0.04s; } .menu a:nth-child(3) { animation-delay: 0.08s; } .menu a:nth-child(4) { animation-delay: 0.12s; }
  .menu a:nth-child(5) { animation-delay: 0.16s; } .menu a:nth-child(6) { animation-delay: 0.2s; }
}

/* ---------- Knoppen ---------- */
.knop {
  display: inline-block; padding: 0.95rem 1.75rem;
  font: inherit; font-weight: 400; letter-spacing: 0.04em; text-decoration: none;
  color: #fff; background: var(--olijf); border: 1px solid var(--olijf); border-radius: 0;
  cursor: pointer; transition: background-color 0.2s, color 0.2s;
}
.knop:hover { background: var(--olijf-diep); border-color: var(--olijf-diep); }
.knop--lijn { background: transparent; color: inherit; border-color: currentColor; }
.knop--lijn:hover { background: var(--inkt); border-color: var(--inkt); color: var(--papier); }

/* ---------- Opening ---------- */
/* De opening vult de volle schermhoogte — de foto komt daar het best tot zijn recht.
   De tekstkolom staat verticaal gecentreerd: met de kop van twee regels gaf uitlijnen
   op de onderkant een gat van een halve schermhoogte erboven. */
.opening {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  min-height: calc(100svh - var(--kop-hoogte));
}
.opening__tekst {
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--marge) var(--marge) clamp(2.5rem, 6vw, 5rem);
}
.opening h1 { font-size: clamp(2.6rem, 5.7vw, 6.75rem); line-height: 1; margin-bottom: 2rem; }
.opening h1 span { display: block; white-space: nowrap; }
.opening h1 span:nth-child(2) { padding-left: 1.2em; }
.opening h1 span:last-child { color: var(--olijf); }
.opening__tekst p { font-size: 1.15rem; max-width: 46ch; }
.opening__acties { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.5rem; }
.opening__beeld { position: relative; background: var(--olijf); }
.opening__beeld img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }

/* ---------- Kleurenkaart: de zes wijnen ---------- */
.kaart-intro { display: flex; justify-content: space-between; align-items: end; gap: 2rem; padding: clamp(4rem, 9vw, 8rem) var(--marge) 2.5rem; }
.kaart-intro h2 { font-size: clamp(2.5rem, 5vw, 4.5rem); }
.kaart-intro p { margin: 0; max-width: 38ch; color: var(--inkt-zacht); }

.kaart { display: flex; height: clamp(640px, 88vh, 900px); }
.strook {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column;
  background: var(--kleur); color: var(--inkt);
  text-decoration: none;
  transition: flex-grow 0.55s cubic-bezier(0.2, 0.7, 0.1, 1);
}
.strook[data-tekst='licht'] { color: #fff; }
.strook__naam {
  flex: 1; display: flex; align-items: flex-start; justify-content: flex-start;
  padding: 1.75rem 1.5rem;
}
.strook__naam h3 {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: clamp(2.75rem, 4.6vw, 5rem); white-space: nowrap;
}
.strook__info {
  position: absolute; left: 1.5rem; right: 1.5rem; top: 1.75rem;
  padding-left: clamp(4.5rem, 6vw, 6.5rem);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity 0.3s 0s, transform 0.3s 0s;
}
.strook__info p { font-size: 1rem; line-height: 1.55; margin-bottom: 0.9em; }
.strook__druiven { font-weight: 400; letter-spacing: 0.04em; }
.strook__info .strook__prijs { font-family: var(--display); font-size: 2rem; line-height: 1; margin: 1.25rem 0 0; }
.strook__tabprijs, .strook__meer { display: none; }
.strook__fles { position: relative; background: var(--papier); height: 58%; overflow: hidden; }
/* vaste fleshoogte, los van de strookbreedte: vierkante foto op volle hoogte, gecentreerd */
.strook__fles img { position: absolute; left: 50%; bottom: 0; height: 96%; width: auto; max-width: none; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.1, 1); }

@media (hover: hover) and (min-width: 900px) {
  .kaart:hover .strook, .kaart:focus-within .strook { flex-grow: 0.8; }
  .kaart .strook:hover, .kaart .strook:focus-visible { flex-grow: 2.6; }
  .strook:hover .strook__info, .strook:focus-visible .strook__info { opacity: 1; transform: none; transition-delay: 0.25s; }
  .strook:hover .strook__fles img, .strook:focus-visible .strook__fles img { transform: translateX(-50%) scale(1.05); }
}

/* ---------- Verhaal ---------- */
.verhaal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 1.5rem; padding: clamp(5rem, 10vw, 10rem) var(--marge); align-items: center; }
.verhaal__beeld-a { grid-column: 1 / span 5; aspect-ratio: 4 / 5; overflow: hidden; }
.verhaal__beeld-b { grid-column: 10 / span 3; aspect-ratio: 3 / 4; overflow: hidden; align-self: end; }
.verhaal__beeld-a img, .verhaal__beeld-b img { width: 100%; height: 100%; object-fit: cover; }
.verhaal__tekst { grid-column: 6 / span 4; padding-inline: clamp(1rem, 3vw, 3.5rem); }
.verhaal h2 { font-size: clamp(2.25rem, 3.6vw, 3.5rem); line-height: 1.05; margin-bottom: 1.75rem; }
.verhaal p { color: var(--inkt-zacht); }

/* ---------- Brede foto ---------- */
.breed { position: relative; height: clamp(360px, 70vh, 760px); overflow: hidden; }
.breed img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Praktisch (bezorgen) ---------- */
.praktisch { background: color-mix(in srgb, var(--steen) 28%, var(--papier)); color: var(--inkt); padding: clamp(4rem, 8vw, 7rem) var(--marge); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3rem; }
.praktisch h2 { font-size: clamp(2.25rem, 4vw, 4rem); line-height: 1.05; }
.praktisch dl { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.praktisch dt { font-family: var(--display); font-size: 1.6rem; margin-bottom: 0.6rem; color: var(--olijf-diep); }
.praktisch dd { margin: 0; color: var(--inkt-zacht); font-size: 1rem; }
/* Onderaan de homepage: de winkelknop met daarnaast de link naar Instagram. */
.praktisch__acties { display: flex; align-items: center; flex-wrap: wrap; gap: 1.5rem; }
.praktisch .knop { margin-top: 2rem; }
.sociaal { margin-top: 2rem; display: inline-flex; align-items: center; gap: 0.6rem; color: var(--olijf-diep); text-decoration: none; letter-spacing: 0.02em; }
.sociaal svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.4; }
.sociaal:hover { color: var(--inkt); }
.voet .sociaal { margin-top: 0.7rem; color: inherit; }
.voet .sociaal:hover { color: inherit; }
.voet .sociaal span { border-bottom: 1px solid transparent; }
.voet .sociaal:hover span { border-bottom-color: currentColor; }

/* ---------- Voet ---------- */
.voet { background: var(--olijf); color: #fff; padding: clamp(3.5rem, 7vw, 6rem) var(--marge) 2rem; }
.voet__boven { display: grid; grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 3fr)); gap: 3rem; padding-bottom: 4rem; }
.voet__merk { display: flex; gap: 2rem; align-items: flex-start; }
.voet__beeldmerk { flex: none; width: 86px; aspect-ratio: 124 / 148; background: rgba(255, 255, 255, 0.85); -webkit-mask: url(../img/drent/beeldmerk-drent.svg) center / contain no-repeat; mask: url(../img/drent/beeldmerk-drent.svg) center / contain no-repeat; }
.voet__merk img { height: 64px; width: auto; margin-bottom: 1.25rem; }
.voet__merk p { color: rgba(255, 255, 255, 0.82); max-width: 34ch; }
.voet h3 { font-family: var(--tekst); font-weight: 400; font-size: 1rem; letter-spacing: 0.04em; margin-bottom: 1rem; color: rgba(255, 255, 255, 0.7); }
.voet ul { list-style: none; margin: 0; padding: 0; }
.voet li { margin-bottom: 0.45rem; }
.voet a { text-decoration: none; border-bottom: 1px solid transparent; }
.voet a:hover { border-bottom-color: currentColor; }
.voet__onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.28); font-size: 0.9rem; color: rgba(255, 255, 255, 0.75); }
.voet__onder p { margin: 0; max-width: none; }

/* ---------- Winkel ---------- */
.paginakop { padding: clamp(3rem, 7vw, 6rem) var(--marge) clamp(2rem, 4vw, 3.5rem); display: flex; justify-content: space-between; align-items: end; gap: 2rem; flex-wrap: wrap; }
.paginakop h1 { font-size: clamp(3rem, 7vw, 7rem); }
.paginakop p { margin: 0; max-width: 40ch; color: var(--inkt-zacht); }
/* Het schap loopt beeldvullend van rand tot rand — drie flessen op een rij. Het
   beeldvlak heeft de verhouding 4/5, maar krijgt een hoogtelimiet mee: een tegel
   (fles + naam + prijs + knop) past daardoor altijd binnen één schermhoogte, ook op
   een compacte laptop. De 16rem is de ruimte die het tekstblok eronder inneemt. */
.schap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--lijn); border-block: 1px solid var(--lijn); }
.product { background: var(--papier); display: flex; flex-direction: column; }
.product__beeld { position: relative; display: block; aspect-ratio: 4 / 5; max-height: calc(100svh - var(--kop-hoogte) - 16rem); overflow: hidden; }
.product__beeld::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--kleur); transition: height 0.35s cubic-bezier(0.2, 0.7, 0.1, 1); }
.product__beeld img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.product:hover .product__beeld::after, .product__beeld:focus-visible::after { height: 28px; }
.product__tekst { padding: 1.5rem var(--marge) 2.25rem; padding-inline: clamp(1.25rem, 2vw, 2rem); display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 1rem; align-items: baseline; }
.product__tekst h2 { font-size: 2.25rem; }
.product__tekst h2 a { text-decoration: none; }
.product__prijs { font-family: var(--display); font-size: 1.6rem; }
.product__druiven { grid-column: 1 / -1; color: var(--inkt-zacht); margin: 0; }
.product__tekst .knop { grid-column: 1 / -1; justify-self: start; margin-top: 1.1rem; padding: 0.7rem 1.4rem; }

/* ---------- Wijn (detail) ---------- */
.wijn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--kop-hoogte)); }
.wijn__vlak { background: var(--kleur); color: var(--inkt); display: flex; flex-direction: column; justify-content: space-between; padding: var(--marge); }
.wijn__vlak[data-tekst='licht'] { color: #fff; }
.wijn__vlak h1 { font-size: clamp(4rem, 11vw, 12rem); line-height: 0.9; }
.wijn__vlak a { text-decoration: none; letter-spacing: 0.04em; font-weight: 400; }
.wijn__feiten { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 0; }
.wijn__feiten div { min-width: 6rem; }
.wijn__feiten dt { font-size: 0.95rem; opacity: 0.8; }
.wijn__feiten dd { margin: 0; font-family: var(--display); font-size: 1.7rem; line-height: 1.2; }
.wijn__inhoud { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.wijn__fles { overflow: hidden; min-height: 50vh; }
.wijn__fles img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }
.wijn__koop { padding: 2rem var(--marge) var(--marge); border-top: 1px solid var(--lijn); }
.wijn__koop p { color: var(--inkt-zacht); }
.wijn__regel { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-top: 1.5rem; }
.wijn__prijs { font-family: var(--display); font-size: 2.5rem; line-height: 1; margin-right: auto; }
.aantal { display: inline-flex; border: 1px solid var(--inkt); }
.aantal button { width: 2.75rem; height: 3.1rem; background: none; border: 0; font: inherit; font-size: 1.2rem; cursor: pointer; color: inherit; }
.aantal output { width: 2.5rem; display: grid; place-items: center; font-weight: 400; }
.verder { padding: clamp(3rem, 6vw, 5rem) var(--marge); }
.verder h2 { font-size: 2.5rem; margin-bottom: 2rem; }
.verder__rij { display: flex; height: 120px; }
.verder__rij a { flex: 1; background: var(--kleur); color: var(--inkt); text-decoration: none; display: flex; align-items: flex-end; padding: 1rem 1.25rem; font-family: var(--display); font-size: 1.6rem; transition: flex-grow 0.4s; }
.verder__rij a[data-tekst='licht'] { color: #fff; }
.verder__rij a:hover, .verder__rij a:focus-visible { flex-grow: 1.6; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - var(--kop-hoogte)); }
.contact__beeld { position: relative; background: var(--olijf); }
.contact__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.contact__inhoud { padding: clamp(3rem, 7vw, 6rem) var(--marge); max-width: 52rem; }
.contact h1 { font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 1.5rem; }
.contact__direct { display: flex; gap: 2.5rem; flex-wrap: wrap; margin: 2rem 0 3rem; padding: 1.5rem 0; border-block: 1px solid var(--lijn); }
.contact__direct a { font-family: var(--display); font-size: 1.6rem; text-decoration: none; border-bottom: 1px solid var(--olijf); }
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.formulier label { display: grid; gap: 0.4rem; font-weight: 400; font-size: 0.95rem; letter-spacing: 0.02em; }
.formulier .vol { grid-column: 1 / -1; }
.formulier input, .formulier textarea { font: inherit; font-weight: 300; padding: 0.85rem 0; border: 0; border-bottom: 1px solid var(--inkt); background: transparent; color: inherit; border-radius: 0; }
.formulier textarea { min-height: 8rem; resize: vertical; }
.formulier input:focus, .formulier textarea:focus { outline: none; border-bottom: 2px solid var(--olijf); }
.formulier .knop { justify-self: start; }

/* ---------- Tweeluik (cadeau, watertoren) ---------- */
.tweeluik { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: calc(100vh - var(--kop-hoogte)); }
.tweeluik__vlak { background: var(--kleur); color: #fff; padding: var(--marge); display: flex; flex-direction: column; justify-content: flex-end; gap: 1.5rem; }
.tweeluik__vlak h1 { font-size: clamp(3rem, 6.5vw, 7rem); line-height: 0.95; }
.tweeluik__vlak p { font-size: 1.15rem; max-width: 40ch; margin: 0; }
.tweeluik__beeld { position: relative; }
.tweeluik__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 2.5rem; }
.tweeluik__teken { background: var(--steen); display: grid; place-items: center; padding: var(--marge); }
.beeldmerk { width: min(62%, 420px); aspect-ratio: 124 / 148; background: var(--olijf-diep); -webkit-mask: url(../img/drent/beeldmerk-drent.svg) center / contain no-repeat; mask: url(../img/drent/beeldmerk-drent.svg) center / contain no-repeat; }
.drieslag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--lijn); border-bottom: 1px solid var(--lijn); }
.drieslag article { background: var(--papier); padding: clamp(2.5rem, 5vw, 4.5rem) var(--marge); }
.drieslag h2 { font-size: 2.25rem; margin-bottom: 1.25rem; }
.drieslag p { color: var(--inkt-zacht); margin: 0; }
.oproep { padding: clamp(4rem, 9vw, 8rem) var(--marge); text-align: left; }
.oproep h2 { font-size: clamp(2.25rem, 4.5vw, 4.25rem); line-height: 1.05; max-width: 18ch; margin-bottom: 1.5rem; }
.oproep p { color: var(--inkt-zacht); margin-bottom: 2rem; }
.verhaal--tekst .verhaal__tekst { grid-column: 3 / span 6; padding: 0; }
.verhaal--omgekeerd .verhaal__beeld-a { grid-column: 8 / span 5; grid-row: 1; }
.verhaal--omgekeerd .verhaal__tekst { grid-column: 2 / span 5; grid-row: 1; }

/* ---------- Tekstpagina (voorwaarden, privacy) ---------- */
.tekstpagina { max-width: 46rem; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) var(--marge); }
.tekstpagina h1 { font-size: clamp(2.75rem, 6vw, 5rem); margin-bottom: 1rem; }
.tekstpagina h2 { font-size: 1.9rem; margin: 2.75rem 0 0.9rem; }
.tekstpagina p, .tekstpagina li { color: var(--inkt-zacht); max-width: 68ch; }
.tekstpagina a { color: var(--olijf-diep); }

/* ---------- Afrekenen ---------- */
.afrekenen { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); min-height: calc(100vh - var(--kop-hoogte)); }
.afrekenen__formulier { padding: clamp(2.5rem, 6vw, 5rem) var(--marge); }
.afrekenen h1 { font-size: clamp(3rem, 6vw, 6rem); margin-bottom: 2rem; }
.afrekenen .formulier h2 { font-size: 1.9rem; margin-top: 1.5rem; }
.afrekenen .formulier h2:first-child { margin-top: 0; }
.formulier .vink { display: flex; gap: 0.75rem; align-items: flex-start; font-weight: 300; font-size: 1rem; }
.formulier .vink input { width: 1.2rem; height: 1.2rem; margin-top: 0.2rem; accent-color: var(--olijf); }
.afrekenen__overzicht { background: color-mix(in srgb, var(--steen) 22%, var(--papier)); padding: clamp(2.5rem, 6vw, 5rem) var(--marge); }
.afrekenen__overzicht h2 { font-size: 2.25rem; margin-bottom: 1.5rem; }
.afrekenen__overzicht .lade__lijst { padding: 0; }
.afrekenen__som { margin: 1.5rem 0 0; }
.afrekenen__som div { display: flex; justify-content: space-between; padding: 0.45rem 0; }
.afrekenen__som dd { margin: 0; }
.afrekenen__som .totaal { font-family: var(--display); font-size: 1.9rem; margin-top: 0.75rem; padding-top: 1rem; border-top: 1px solid var(--inkt); }

/* ---------- Leeftijdscheck ---------- */
.leeftijd { position: fixed; inset: 0; z-index: 100; background: var(--olijf); color: #fff; display: grid; place-items: center; text-align: center; padding: 2rem; }
.leeftijd[hidden] { display: none; }
.leeftijd img { height: 92px; margin: 0 auto 3rem; }
.leeftijd h2 { font-size: clamp(2rem, 4vw, 3.25rem); margin-bottom: 0.75rem; }
.leeftijd p { margin: 0 auto 2.25rem; color: rgba(255, 255, 255, 0.85); }
.leeftijd__knoppen { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.leeftijd .knop { background: #fff; color: var(--olijf-diep); border-color: #fff; }
.leeftijd .knop--lijn { background: transparent; color: #fff; }

/* ---------- Eén binnenkomst-animatie (alleen de opening) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .opening h1 span { opacity: 0; transform: translateY(0.35em); animation: opkomst 0.9s cubic-bezier(0.2, 0.7, 0.1, 1) forwards; }
  .opening h1 span:nth-child(2) { animation-delay: 0.12s; }
  .opening h1 span:nth-child(3) { animation-delay: 0.24s; }
  @keyframes opkomst { to { opacity: 1; transform: none; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---------- Kleiner scherm ---------- */
@media (max-width: 899px) {
  :root { --kop-hoogte: 68px; }
  .kop { grid-template-columns: auto 1fr; gap: 1rem; }
  .kop .logo { order: -1; }
  .kop .logo img { height: 38px; }
  .kop .kop__links { display: none; }
  .menuknop { display: block; }
  .opening, .wijn, .contact, .praktisch, .tweeluik, .afrekenen { grid-template-columns: minmax(0, 1fr); }
  .drieslag { grid-template-columns: minmax(0, 1fr); }
  .tweeluik__vlak { min-height: 52vh; }
  .tweeluik__beeld { aspect-ratio: 1; }
  .tweeluik__beeld img { padding: 1rem; }
  .tweeluik__teken { min-height: 60vh; }
  .verhaal--omgekeerd .verhaal__beeld-a, .verhaal--omgekeerd .verhaal__tekst { grid-column: 1; grid-row: auto; }
  .afrekenen__overzicht { order: -1; }
  .opening { min-height: 0; }
  .opening__beeld { aspect-ratio: 4 / 5; order: -1; }
  .opening h1 span:nth-child(2) { padding-left: 0.6em; }
  /* De twee knoppen onder de kop passen op één regel door ze samen de breedte te
     laten delen; anders valt de tweede eronder en oogt het rommelig. */
  .opening__acties { flex-wrap: nowrap; gap: 0.7rem; }
  .opening__acties .knop {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.9rem 0.5rem;
    text-align: center;
    white-space: nowrap;
    font-size: 0.95rem;
  }
  .kaart-intro { flex-direction: column; align-items: flex-start; }
  /* Kleurenkaart op mobiel: stapelkaarten. Elke wijn is een kaart die onder de kop blijft
     plakken; de volgende schuift eroverheen en laat alleen het kleurlabel van de vorige
     zien. Al scrollend bouwt zich zo dezelfde kleurenwaaier op als bij hover op desktop. */
  .kaart { --tab: 50px; display: block; height: auto; }
  /* uitloop: de volledige waaier blijft nog even staan voordat hij als geheel wegscrolt */
  .kaart::after { content: ''; display: block; height: 45svh; }
  .strook {
    position: sticky; top: calc(var(--kop-hoogte) + var(--i) * var(--tab));
    height: calc(100svh - var(--kop-hoogte) - 5 * var(--tab)); min-height: 340px; max-height: 560px;
    display: grid; grid-template-columns: minmax(0, 1fr) 42%; grid-template-rows: var(--tab) minmax(0, 1fr);
    box-shadow: 0 -10px 24px rgba(29, 29, 27, 0.16);
  }
  .strook__naam { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding: 0 1.25rem; }
  .strook__naam h3 { writing-mode: horizontal-tb; transform: none; font-size: 1.9rem; }
  .strook__tabprijs { display: block; font-family: var(--display); font-size: 1.35rem; }
  .strook__info { position: static; opacity: 1; transform: none; padding: 0.75rem 1.25rem 1.25rem; overflow: hidden; display: flex; flex-direction: column; }
  .strook__info p { font-size: 0.95rem; line-height: 1.5; }
  .strook__info .strook__prijs { display: none; }
  .strook__meer { display: inline-block; margin-top: auto; align-self: flex-start; padding-bottom: 2px; border-bottom: 1px solid currentColor; font-weight: 400; letter-spacing: 0.04em; }
  .strook__fles { grid-column: 2; grid-row: 2; height: auto; }
  .strook__fles img { height: 94%; bottom: 3%; transform: translateX(-50%) scale(0.9); }
  .strook[data-actief] .strook__fles img { transform: translateX(-50%) scale(1); }
  .verhaal { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .verhaal__beeld-a, .verhaal__beeld-b, .verhaal__tekst { grid-column: 1; }
  .verhaal__beeld-b { width: 60%; justify-self: end; }
  .praktisch dl { grid-template-columns: minmax(0, 1fr); }
  .voet__boven { grid-template-columns: minmax(0, 1fr); }
  .schap { grid-template-columns: minmax(0, 1fr); }
  /* Eén tegel per rij: dan is de kleurstreep boven de naam niet meer te onderscheiden
     van de streep van de vorige wijn. Hij staat op mobiel daarom ónder de knop, zodat
     hij de tegel afsluit en duidelijk is bij welke wijn de knop hoort. */
  .product__beeld::after { display: none; }
  .product { border-bottom: 10px solid var(--kleur); }
  .contact__beeld { aspect-ratio: 3 / 2; }
  .formulier { grid-template-columns: minmax(0, 1fr); }
  .wijn__vlak { min-height: 46vh; gap: 2rem; }
  .wijn__fles { min-height: 0; aspect-ratio: 1; }
  .wijn__fles img { object-fit: contain; }
  .verder__rij { flex-direction: column; height: auto; }
  .verder__rij a { padding: 1.1rem 1.25rem; }
}
@media (min-width: 900px) {
  /* Kleurenkaart: titel + stroken + flessen samen precies één schermhoogte (onder de vaste kop),
     op elk scherm. Alle maten binnen het blok schalen daarom mee met de hoogte (vh), niet
     alleen met de breedte. Ondergrens 560px, zodat het op een heel laag venster leesbaar blijft. */
  .wijnenblok { display: flex; flex-direction: column; height: calc(100vh - var(--kop-hoogte)); height: calc(100svh - var(--kop-hoogte)); min-height: 560px; scroll-margin-top: var(--kop-hoogte); margin-top: clamp(2rem, 6vh, 5rem); }
  .wijnenblok .kaart-intro { flex: none; padding: clamp(1rem, 3vh, 2.5rem) var(--marge) clamp(1rem, 2.5vh, 2rem); align-items: center; }
  .wijnenblok .kaart-intro h2 { font-size: clamp(2rem, min(5vw, 6.5vh), 4.5rem); }
  .wijnenblok .kaart { flex: 1; height: auto; min-height: 0; }
  .wijnenblok .strook__naam { flex: 0 0 40%; padding: clamp(0.9rem, 2.4vh, 1.75rem) 1.5rem; }
  .wijnenblok .strook__naam h3 { font-size: clamp(1.7rem, min(4.6vw, 5vh), 5rem); }
  .wijnenblok .strook__fles { flex: 1; height: auto; min-height: 0; }
  .wijnenblok .strook__info { top: clamp(0.9rem, 2.4vh, 1.75rem); max-height: calc(40% - clamp(1.2rem, 3vh, 2.2rem)); overflow: hidden; }
  .wijnenblok .strook__info p { font-size: clamp(0.85rem, 1.75vh, 1rem); margin-bottom: 0.6em; }
  .wijnenblok .strook__info .strook__prijs { font-size: clamp(1.4rem, 3.4vh, 2rem); margin-top: 0.6em; }
  .menu { display: none; }
  /* kleurvlak blijft staan terwijl de rechterkolom scrolt */
  /* beide helften precies één scherm hoog: links het kleurvlak, rechts de fles met daaronder,
     vast tegen de onderrand, de omschrijving met prijs en winkelmandknop */
  .wijn { min-height: 0; height: calc(100vh - var(--kop-hoogte)); height: calc(100svh - var(--kop-hoogte)); }
  .wijn__vlak, .wijn__inhoud { height: 100%; min-height: 0; }
  .wijn__fles { min-height: 0; padding: 2rem 0 1rem; }
  .wijn__fles img { object-fit: contain; object-position: 50% 50%; }
  .wijn__koop { padding: 1.75rem var(--marge) 2.25rem; background: var(--papier); }
  .wijn__koop p { margin-bottom: 0.6em; }
  .wijn__regel { margin-top: 1.25rem; }
}
@media (min-width: 900px) and (max-height: 820px) { .wijnenblok .strook__info p:nth-of-type(3) { display: none; } }
@media (min-width: 900px) and (max-width: 1199px) { .schap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   Onderdelen die alleen op de echte site bestaan (niet in de mockup)
   ========================================================================== */

/* ---------- Sla-over-link (toetsenbord en schermlezer) ---------- */
.sla-over { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 0.9rem 1.4rem; background: var(--inkt); color: #fff; text-decoration: none; }
.sla-over:focus { left: 0; }

/* ---------- Winkelwagen (markup komt uit js/cart.js) ---------- */
/* De knop verschijnt pas zodra er iets in de wagen zit — zo blijft de kop rustig. */
.cart-nav { display: none; align-items: center; gap: 0.45rem; background: none; border: 0; padding: 0.4rem 0; font: inherit; color: inherit; cursor: pointer; }
.cart-nav.zichtbaar { display: inline-flex; }
.cart-nav svg { display: block; }
.cart-nav-count { display: inline-grid; place-items: center; min-width: 1.45rem; height: 1.45rem; padding: 0 0.35rem; border-radius: 999px; background: var(--olijf); color: #fff; font-size: 0.8rem; font-weight: 400; }
.cart-nav-count.puls { animation: mandje-puls 0.45s ease; }
@keyframes mandje-puls { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

.cart-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(29, 29, 27, 0.35); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; }
.cart-overlay.visible { opacity: 1; visibility: visible; }

.cart-drawer { position: fixed; inset: 0 0 0 auto; width: min(440px, 100%); z-index: 60; display: flex; flex-direction: column; background: var(--papier); border-left: 1px solid var(--lijn); transform: translateX(100%); visibility: hidden; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.1, 1), visibility 0.4s; }
.cart-drawer.open { transform: none; visibility: visible; }
.cart-drawer-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.5rem 1.75rem; border-bottom: 1px solid var(--lijn); }
.cart-drawer-header h3 { font-family: var(--display); font-weight: 400; font-size: 2rem; margin: 0; }
.cart-close { background: none; border: 0; padding: 0.4rem; color: inherit; cursor: pointer; line-height: 0; }
.cart-items { flex: 1; overflow: auto; padding: 0 1.75rem; }
.cart-empty { padding: 2rem 0; color: var(--inkt-zacht); }

.cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--lijn); }
.cart-item-thumb { width: 56px; height: 72px; overflow: hidden; background: var(--papier); }
.cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-item-name { font-weight: 400; }
.cart-item-meta { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 0.2rem; }
.cart-item-price { font-family: var(--display); font-size: 1.25rem; }
.cart-item-remove { background: none; border: 0; padding: 0; font: inherit; font-size: 0.9rem; color: var(--inkt-zacht); text-decoration: underline; cursor: pointer; }
.cart-item-remove:hover { color: var(--inkt); }
.cart-item-qty { display: inline-flex; align-items: center; border: 1px solid var(--lijn); }
.cart-item-qty button { width: 2rem; height: 2.2rem; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.cart-item-qty button:disabled { opacity: 0.35; cursor: default; }
.cart-item-qty span { min-width: 1.6rem; text-align: center; }

.cart-footer { padding: 1.5rem 1.75rem 2rem; border-top: 1px solid var(--lijn); }
.cart-total { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--display); font-size: 1.8rem; }
.cart-shipping-note { margin: 0.5rem 0 1.1rem; font-size: 0.9rem; color: var(--inkt-zacht); }
.cart-checkout { display: block; width: 100%; text-align: center; padding: 0.95rem 1.75rem; background: var(--olijf); border: 1px solid var(--olijf); color: #fff; text-decoration: none; letter-spacing: 0.04em; transition: background-color 0.2s, border-color 0.2s; }
.cart-checkout:hover { background: var(--olijf-diep); border-color: var(--olijf-diep); }

/* ---------- Uitverkocht ---------- */
.uitverkocht-label { display: inline-block; padding: 0.7rem 1.4rem; border: 1px dashed var(--lijn); color: var(--inkt-zacht); letter-spacing: 0.04em; }
.product--uitverkocht .product__beeld img { opacity: 0.55; }
.wijn__verzending { margin: 1.25rem 0 0; font-size: 0.92rem; color: var(--inkt-zacht); }
.schap__leeg { grid-column: 1 / -1; background: var(--papier); padding: clamp(2rem, 5vw, 4rem) var(--marge); color: var(--inkt-zacht); }

/* ---------- Leeftijdscheck: pagina eronder vastzetten ---------- */
html.leeftijd-open, html.leeftijd-open body { overflow: hidden; }

/* ---------- Secties die bij het scrollen in beeld komen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .toon-bij-scroll { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
  .toon-bij-scroll.in-beeld { opacity: 1; transform: none; }
}

/* ---------- Losse tekstblokken (bedankpagina, meldingen) ---------- */
.melding { padding: 1rem 1.25rem; border-left: 3px solid var(--olijf); background: color-mix(in srgb, var(--steen) 22%, var(--papier)); }
.melding--fout { border-left-color: var(--drent-rood, #9a4643); }

/* ---------- Contactformulier ---------- */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.veld-optioneel { color: var(--inkt-zacht); font-weight: 300; }
.contact-feedback[data-type="error"] { border-left-color: #9a4643; }
.formulier .contact-feedback { margin-top: 0.5rem; }