/* ==========================================================================
   Betuws Wijndomein — custom styles
   Tailwind doet het meeste; hier staan fonts, texturen en complexe gradients.
   ========================================================================== */

:root {
  --bordeaux: #3d2b1f;
  --bordeaux-deep: #2e1a0f;
  --walnut: #5a3d2a;
  --forest: #2d3a2a;
  --forest-deep: #1e2a1d;
  /* Lichtste groentint, gekozen op contrast: 8.07:1 op cream-tekst en 4.80:1 op
     de honey-accent, dus WCAG AA in beide gevallen. Zie docs/onderzoek. */
  --forest-soft: #3a4c3b;
  --oak: #8b5a2b;
  --honey: #e4b363;
  --honey-soft: #f0c988;
  --cream: #f5efe6;
  --cream-warm: #ede3d1;
  --paper: #faf6ee;
  --ink: #1a1410;
  --ink-soft: #463a32;
  --muted: #8a7c6e;
  --line: rgba(26, 20, 16, .12);
  --line-soft: rgba(26, 20, 16, .06);
  /* Foutkleur, gekozen binnen het warme palet: 7.04:1 met cream-tekst. */
  --danger: #8f2f2a;

  /* ------------------------------------------------------------------
     RITME EN TYPOGRAFIE: één maatvoering voor de hele site.
     Elke pagina leest deze waarden; pagina's zetten ze niet zelf opnieuw.
     Wie hier iets wijzigt, wijzigt het overal, en dat is de bedoeling:
     losse afwijkingen per pagina zijn precies wat de site rommelig maakte.
     ------------------------------------------------------------------ */

  /* Breedte van de leesbare kolom binnen elke sectie */
  --shell-max: 1280px;

  /* Witruimte rond en tussen secties */
  --section-px: 64px;
  --section-py: 112px;

  /* Hero: afstand van de bovenrand tot de titel, en de ruimte eronder.
     De vaste navigatiepill eindigt op 110px (desktop) resp. 78px (mobiel);
     de hero-kaart zelf staat 16px van de bovenrand. */
  --hero-pt: 184px;
  --hero-pb: 112px;

  /* Kop van een interieurpagina (contact, agenda, winkelwagen, ...):
     daar staat de navigatie al in scrolled-state en eindigt op 84px. */
  --page-head-pt: 138px;
  --page-head-pb: 96px;

  /* Koppenschaal. Eén trap voor de hele site:
     hero-titel > sectiekop > kaartkop. */
  --fs-hero: clamp(2.375rem, 4.4vw, 3.75rem);      /* 38px → 60px */
  --fs-section: clamp(1.8rem, 3.1vw, 2.75rem);     /* 28.8px → 44px */
  --fs-block: clamp(1.5rem, 2.2vw, 2rem);          /* 24px → 32px */
  --fs-card: clamp(1.25rem, 1.5vw, 1.375rem);      /* 20px → 22px */
  --fs-lede: 17px;

  /* Knoppen: één hoogte, zodat primair en secundair naast elkaar sluiten */
  --btn-h: 52px;

  /* Zwevende knoppen: de Tebi-reserveringswidget linksonder en de
     naar-boven-knop rechtsonder staan even ver van de rand en even hoog. */
  --fab-inset: 24px;
}

/* Tablet: de zijmarge krimpt eerder dan de verticale ruimte. */
@media (max-width: 1023px) {
  :root { --section-px: 48px; }
}

@media (max-width: 767px) {
  :root {
    --fab-inset: 16px;
    --section-px: 24px;
    --section-py: 72px;
    --hero-pt: 104px;
    --hero-pb: 72px;
    --page-head-pt: 120px;
    --page-head-pb: 64px;
    --fs-lede: 15.5px;
  }
}

* { box-sizing: border-box; }

html, body {
  background: #e9e0ce;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

/* Warm ambient background — alleen op desktop/tablet.
   Op mobiel tonen we uitsluitend de vlakke body-kleur zodat de bovenrand
   visueel identiek is aan de zijkant. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(1200px 600px at 20% 0%, rgba(228, 179, 99, .35), transparent 60%),
    radial-gradient(900px 500px at 100% 100%, rgba(90, 26, 43, .18), transparent 60%),
    linear-gradient(180deg, #e9e0ce 0%, #dfd3ba 100%);
}
@media (max-width: 767px) {
  body::before { display: none; }
}

.font-serif { font-family: 'Fraunces', Georgia, serif; font-feature-settings: "ss01"; }
.font-mono  { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ================= SECTIERITME =================
   Elke sectie op de site gebruikt dezelfde witruimte, links en rechts en
   boven en onder. Twee klassen, meer is er niet nodig:

   .wd-section  padding op de sectie zelf (achtergrond loopt door tot de rand)
   .wd-shell    de leesbare kolom binnen die sectie, met dezelfde padding
                voor secties die hun achtergrond volledig laten doorlopen

   Gebruik .wd-section > .wd-inner als de sectie de padding draagt, en
   .wd-shell als de padding bij de kolom hoort. Nooit allebei tegelijk. */
.wd-section {
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}
.wd-inner {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
}
.wd-shell {
  width: 100%;
  max-width: calc(var(--shell-max) + var(--section-px) * 2);
  margin-inline: auto;
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}

/* Kop van een interieurpagina: contact, agenda, evenementen, winkelwagen.
   Geen fotohero, wel exact dezelfde afstand tot de navigatie op elke pagina.
   Staat na .wd-section, zodat de modifier de sectiepadding overschrijft. */
.wd-section--page-head {
  padding-top: var(--page-head-pt);
  padding-bottom: var(--page-head-pb);
}

/* Titel van zo'n pagina; zelfde maat als een hero-titel. */
.page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}

/* ================= NAV =================
   Vloeiende hero→scrolled overgang.
   Truc: altijd gecentreerd layout met margin:auto. Op hero wordt de pill
   alleen via max-width (compact) + transform (naar rechts) uit het midden
   getrokken. Beide zijn CSS-animatable → geen left:auto→value snaps meer. */
.nav-pill {
  top: 56px;
  left: 16px;
  right: 16px;
  max-width: 1360px;                /* fallback: full width up to cap */
  margin-left: auto;
  margin-right: auto;
  transform: translateX(0);
  will-change: transform, max-width;

  background: rgba(250, 246, 238, .72);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border: 1px solid var(--line-soft);

  transition:
    top           .55s cubic-bezier(.2, .7, .2, 1),
    max-width     .6s  cubic-bezier(.2, .7, .2, 1),
    transform     .6s  cubic-bezier(.2, .7, .2, 1),
    padding       .6s  cubic-bezier(.2, .7, .2, 1),
    background    .4s  ease,
    box-shadow    .4s  ease,
    border-color  .4s  ease,
    color         .4s  ease;
}

/* Scrolled: landt terug in het midden, rekt uit naar wide;
   op desktop extra padding-left zodat de ingevlogen logo ruimte heeft. */
.nav-pill.scrolled {
  top: 14px;
  max-width: 1360px;
  transform: translateX(0);
  background: rgba(26, 20, 16, .88);
  color: var(--cream);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, .4);
}

/* ====================================================================
   NAV · 1024+ layout (tablet landscape + laptop + desktop)
   ---
   Gebruikt één formule voor de brand-float zodat zijn hero-positie
   smooth schaalt met viewport en in scrolled-state ALTIJD op dezelfde
   absolute x (30px) eindigt — of je nu op een iPad mini of een 4K
   scherm kijkt.
   ==================================================================== */
/* 768+ (portrait tablet en hoger): brand-float zichtbaar + right-align van
   nav-right. In-pill logo verborgen. */
@media (min-width: 768px) {
  .nav-right { margin-left: auto; }
  .nav-pill .brand-in-pill { display: none !important; }
}

/* 1024+ (landscape tablet + desktop): navlinks zichtbaar als absolute layer,
   pill.scrolled extra padding-left voor het ingevlogen logo */
@media (min-width: 1024px) {
  .nav-pill .navlinks {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translate(0, -50%);
    transition:
      left      .6s cubic-bezier(.2, .7, .2, 1),
      transform .6s cubic-bezier(.2, .7, .2, 1);
  }
  .nav-pill.scrolled {
    padding-left: 140px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .nav-pill.scrolled .navlinks {
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

/* Pill-breedte + shift: discreet per range zodat navlinks comfortabel
   passen (tablet) of adem hebben (desktop) */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Portrait tablet: logo + pill als gecentreerde groep (zoals scrolled).
     Hero: logo links, pill rechts ernaast — samen in het midden van vw. */
  .nav-pill {
    top: 52px !important;  /* = logo-center (40 + 72/2 = 76) - pill-height/2 (~24) */
    left: auto;
    right: calc(50vw - 220px);
    width: max-content;
    max-width: calc(100vw - 32px);
    margin-left: auto;
    margin-right: 0;
  }

  .brand-float {
    left: calc(50vw - 220px) !important;
    right: auto !important;
  }

  /* Scrolled: brand-float weg (geen dubbele logo), in-pill logo neemt over,
     pill wordt GECENTREERD (zoals desktop) i.p.v. rechts-geankerd */
  body.is-scrolled .nav-pill {
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    gap: 16px;
  }
  body.is-scrolled .nav-pill .brand-in-pill {
    display: inline-flex !important;
    padding-right: 8px;
  }
  body.is-scrolled .brand-float { display: none !important; }
}
@media (min-width: 1024px) and (max-width: 1351px) {
  .nav-pill {
    max-width: 840px;
    transform: translateX(16px);
  }
  .nav-pill .navlink { padding: 7px 6px; font-size: 11px; }
  .nav-pill .navlinks { gap: 1px; }
}
@media (min-width: 1352px) {
  .nav-pill {
    max-width: 940px;
    transform: translateX(30px);
  }
  .nav-pill .navlink { padding: 7px 9px; font-size: 12.5px; }
  .nav-pill .navlinks { gap: 2px; }
}

/* Mobiel/tablet — pill plakt bovenin, geen shift */
@media (max-width: 1023px) {
  .nav-pill       { top: 40px; }
  .nav-pill.scrolled { top: 14px; }
}

@media (max-width: 640px) {
  .nav-pill          { top: 16px; left: 8px; right: 16px; }
  .nav-pill.scrolled { top: 10px; }
}
.nav-pill.scrolled .navlink { color: rgba(245, 239, 230, .78); }
.nav-pill.scrolled .navlink:hover { color: var(--cream); background: rgba(255,255,255,.06); }
.nav-pill.scrolled .btn-book { background: var(--honey); color: var(--ink); }
.nav-pill.scrolled .btn-book:hover { background: var(--honey-soft); }
.nav-pill.scrolled .nav-lang { color: rgba(245, 239, 230, .55); }
.nav-pill.scrolled .brand-logo { filter: invert(1) brightness(1.08); }

.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  transition: filter .25s ease;
}
@media (max-width: 640px) {
  .brand-logo { height: 44px; }
}
/* Het footerlogo stond op 140px en overstemde de kolommen ernaast. De height in
   de HTML (50) wordt hier bewust overruled, vandaar dat de maat in CSS staat. */
.brand-logo--inverted {
  filter: invert(1) brightness(1.08);
  height: 88px;
}

/* ----- Floating brand — één logo dat van hero naar pill glijdt ----- */
.brand-float {
  display: none;
  position: fixed;
  top: 40px;
  left: 80px;                                   /* 1024+ default */
  z-index: 60;
  line-height: 0;
  transform-origin: top left;                   /* scale pinned aan top-left */
  transform: translate(0, 0) scale(1);
  will-change: transform, filter;
  filter:
    invert(1) brightness(1.1)
    drop-shadow(0 10px 28px rgba(10, 6, 3, .6))
    drop-shadow(0 2px 4px rgba(10, 6, 3, .5));
  transition:
    transform .6s cubic-bezier(.2, .7, .2, 1),
    filter    .5s ease;
}
.brand-float .brand-logo--hero { height: 88px; display: block; }

/* ====================================================================
   BRAND-FLOAT · fluide positie met één formule voor 1024+
   ---
   Hero left = max(
     clamp(32, 14.5vw-117, 80),    ← tablet-range groeit 32→80 (1024→1352)
     calc(50vw - 596)              ← desktop: centered-grid positie
   )
   Bij 1352 vallen beide samen op 80px; daarboven neemt desktop over.

   Scrolled translateX = (30 - hero_left) → logo eindigt ALTIJD op 30px
   absoluut, ongeacht viewport. Geen iPad Air/mini verschil meer.
   ==================================================================== */
@media (min-width: 768px) {
  .brand-float {
    display: block;
    top: 40px;
    left: max(
      clamp(32px, calc(14.5vw - 117px), 80px),
      calc(50vw - 596px)
    );
  }
  .brand-float .brand-logo--hero { height: 72px; }

  body.is-scrolled .brand-float {
    transform:
      translate(
        calc(
          max(30px, calc(50vw - 666px))   /* target-x: volgt pill-links op desktop */
          -
          max(
            clamp(32px, calc(14.5vw - 117px), 80px),
            calc(50vw - 596px)
          )
        ),
        -22px
      )
      scale(.68);
    filter: invert(1) brightness(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-float { transition: none; animation: none; }
}
.navlink {
  position: relative;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 12.5px; font-weight: 500;
  color: var(--ink-soft);
  transition: color .25s ease, background .25s ease;
  white-space: nowrap;
}
.navlink::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--honey);
  opacity: 0;
  transform: translate(-50%, 4px) scale(.6);
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1);
}

/* --- Hero (cream pill) states --- */
.navlink:hover {
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .16);
}
.navlink:hover::after {
  opacity: .7;
  transform: translate(-50%, 0) scale(1);
}
.navlink:focus-visible {
  outline: 2px solid var(--honey);
  outline-offset: 2px;
}

.navlink.is-active {
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .22);
  font-weight: 600;
}
.navlink.is-active::after {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}

/* --- Scrolled (dark pill) states --- */
.nav-pill.scrolled .navlink { color: rgba(245, 239, 230, .78); }
.nav-pill.scrolled .navlink:hover {
  color: var(--cream);
  background: rgba(245, 239, 230, .08);
}
.nav-pill.scrolled .navlink:hover::after {
  background: var(--honey-soft);
  opacity: .85;
}
.nav-pill.scrolled .navlink.is-active {
  color: var(--honey-soft);
  background: rgba(228, 179, 99, .12);
  font-weight: 600;
}
.nav-pill.scrolled .navlink.is-active::after {
  background: var(--honey);
  opacity: 1;
}

.btn-book {
  background: var(--bordeaux); color: var(--cream);
  padding: 10px 18px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s, transform .2s;
}
.btn-book:hover { background: var(--bordeaux-deep); transform: translateY(-1px); }
.btn-book .arrow { transition: transform .25s; }
.btn-book:hover .arrow { transform: translate(2px, -2px); }

/* ================= HERO =================
   Elke pagina met een fotohero gebruikt exact dezelfde bouwstenen. Alleen de
   foto verschilt per pagina, de maatvoering niet:

     .hero         de kaart met de achtergrondfoto
     .hero-shell   de kolom erbinnen; bepaalt hoe ver de titel van boven staat
     .hero-panel   het tekstblok; op mobiel een leesbaar paneel over de foto
     .hero-title / .hero-lede / .hero-actions / .hero-meta   de inhoud

   Pagina-eigen hero-classes (wijn-hero, alcohol-hero, meeting-hero, ...)
   regelen uitsluitend nog achtergrond en scrim. Zodra ze aan maatvoering gaan
   zitten, loopt de site weer uiteen. */
.hero {
  position: relative;
  min-height: calc(100svh - 40px);
  color: var(--cream);
  overflow: hidden;
  background: #2e1a0f;
  box-shadow:
    0 40px 80px -40px rgba(30, 20, 10, .45),
    0 10px 30px -15px rgba(30, 20, 10, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}

/* De inhoud staat optisch in het midden van de hero: de bovenmarge houdt
   rekening met de zwevende navigatie, de ondermarge met de slider- en
   scrollknoppen. Daarbinnen centreert de kolom, zodat er onder de tekst
   niet ineens een gat valt als een pagina een kortere kop heeft. */
.hero-shell {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* safe center: past de inhoud niet, dan schuift ze niet onder de vaste
     navigatie maar blijft ze netjes onder de bovenmarge staan. Browsers die
     het trefwoord niet kennen, negeren deze regel en houden 'center'. */
  justify-content: safe center;
  width: 100%;
  max-width: calc(var(--shell-max) + var(--section-px) * 2);
  margin-inline: auto;
  min-height: calc(100svh - 40px);
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
  padding-inline: var(--section-px);
}

.hero-panel { max-width: 720px; }

/* Vanaf tablet krijgt het tekstblok een vaste minimumhoogte. Daardoor begint
   de kop op elke pagina op dezelfde hoogte, ook als de ene hero een kortere
   kop of intro heeft dan de andere, terwijl het blok als geheel gecentreerd
   blijft staan. Op mobiel geldt dit niet: daar is het blok een zichtbaar
   paneel en zou een minimumhoogte een leeg vlak opleveren. */
@media (min-width: 768px) {
  .hero-panel { min-height: 480px; }
  /* De hero met de reserveringswizard vult zichzelf al; daar zou een
     minimumhoogte het formulier alleen maar naar beneden duwen. */
  .hero-shell--center .hero-panel { min-height: 0; }
}
.hero-panel--center { max-width: 760px; margin-inline: auto; text-align: center; }
.hero-panel--center .hero-lede { margin-inline: auto; }

/* Hero met een kaart eronder (de reserveringswizard op /vergaderen): smallere
   kolom, alles gecentreerd. De titel blijft op dezelfde hoogte staan. */
.hero-shell--center { max-width: calc(900px + var(--section-px) * 2); }

.hero-title {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.04; letter-spacing: -.02em;
  text-wrap: balance;
  margin: 0;
}
.hero-title em { font-style: italic; color: var(--honey-soft); font-weight: 400; }

.hero-lede {
  margin-top: 20px;
  max-width: 560px;
  font-size: var(--fs-lede);
  line-height: 1.62;
  color: rgba(245, 239, 230, .88);
}
/* Tweede, kortere regel onder de titel (home-slide "Wijnen") */
.hero-lede--sub {
  margin-top: 14px;
  font-size: calc(var(--fs-lede) - 2px);
  color: rgba(245, 239, 230, .72);
}
.hero-lede--sub + .hero-lede { margin-top: 12px; }

.hero-actions {
  margin-top: 28px;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px;
}

/* Feitenstrip onder de knoppen. Twee vormen, dezelfde regel eromheen:
   kolommen met een waarde (2004 / 7 hectare) of losse kenmerken. */
.hero-meta {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid rgba(245, 239, 230, .18);
  display: flex; flex-wrap: wrap;
  gap: 18px 36px;
  width: fit-content; max-width: 100%;
}
.hero-panel--center .hero-meta { margin-inline: auto; justify-content: center; }
.hero-meta > div { display: flex; flex-direction: column; gap: 6px; }
.hero-meta > span {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(245, 239, 230, .76);
}
.hero-meta > span::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--honey); box-shadow: 0 0 0 3px rgba(228, 179, 99, .12);
}

/* Lage schermen: dezelfde verhoudingen, minder lucht. De hero mag niet
   scrollen voordat de bezoeker iets van de pagina heeft gezien. */
@media (min-width: 768px) and (max-height: 900px) {
  :root { --hero-pt: 148px; --hero-pb: 88px; }
}
@media (min-width: 768px) and (max-height: 760px) {
  :root { --hero-pt: 126px; --hero-pb: 72px; }
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 1;
}
.hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.05);
  transition: transform 10s ease-out;
}
.hero-slide.is-active .hero-bg {
  transform: scale(1);              /* langzame "Ken Burns" zoom tijdens actieve slide */
}

/* Per-slide bg-afbeelding */
.hero-slide[data-slide="welkom"]     .hero-bg { background-image: url("../images/hero/hero_slide_1.jpg"); }
.hero-slide[data-slide="vergaderen"] .hero-bg { background-image: url("../images/hero/hero_slide_2.jpg"); }
.hero-slide[data-slide="wijn"]       .hero-bg { background-image: url("../images/hero/hero_slide_3.jpg"); }

/* Leesbaarheidslaag — donker links/onder, licht rechtsboven */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(105deg, rgba(20, 14, 10, .78) 0%, rgba(20, 14, 10, .5) 40%, rgba(20, 14, 10, .15) 75%, transparent 100%),
    linear-gradient(180deg, rgba(20, 14, 10, .35) 0%, transparent 25%, transparent 55%, rgba(20, 14, 10, .55) 100%);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--honey-soft);
  padding: 8px 14px;
  border: 1px solid rgba(228, 179, 99, .35);
  border-radius: 999px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 4px rgba(228, 179, 99, .2);
  animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(228, 179, 99, .2); }
  50%      { box-shadow: 0 0 0 7px rgba(228, 179, 99, .08); }
}

/* Knoppen: primair en secundair delen hoogte, radius en typografie. De
   ghost-variant heeft een rand, dus zijn padding is 1px krapper; met
   box-sizing: border-box komen beide op exact dezelfde hoogte uit. */
.btn-primary,
.btn-ghost {
  min-height: var(--btn-h);
  /* Verticale padding blijft nodig: een label dat over twee regels loopt mag
     niet tegen de rand van de knop komen. */
  padding: 13px 24px;
  border-radius: 999px;
  font-size: 14.5px;
  line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  text-align: center;
}
.btn-primary {
  background: var(--honey); color: var(--ink);
  font-weight: 600;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 10px 24px -10px rgba(228, 179, 99, .7);
}
.btn-primary:hover { background: var(--honey-soft); transform: translateY(-1px); }

.btn-ghost {
  color: var(--cream);
  font-weight: 500;
  border: 1px solid rgba(245, 239, 230, .45);
  background: rgba(245, 239, 230, .04);
  box-shadow: inset 0 0 0 1px rgba(245, 239, 230, .06);
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-ghost:hover {
  background: rgba(245, 239, 230, .12);
  border-color: rgba(245, 239, 230, .7);
  transform: translateY(-1px);
}

.meta-k { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: rgba(245, 239, 230, .5); }
.meta-v { font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }

.strip-card {
  background:
    linear-gradient(160deg, #e8d2a3 0%, #d9bc82 100%);
  border: 1px solid rgba(139, 90, 43, .25);
  border-radius: 18px; padding: 20px 22px;
  color: var(--ink);
  box-shadow:
    0 14px 28px -16px rgba(30, 20, 10, .45),
    inset 0 1px 0 rgba(255, 255, 255, .4);
}
.strip-k { font-family: 'Fraunces', serif; font-size: 40px; line-height: 1; color: var(--bordeaux); font-weight: 500; letter-spacing: -.01em; }
.strip-v { font-size: 12.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }

/* ----- Trust whisper-strip ----- */
.trust-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin-top: 22px;
  font-size: 12.5px;
  color: rgba(245, 239, 230, .72);
  letter-spacing: .01em;
}
.trust-stars {
  color: var(--honey);
  letter-spacing: 2px;
  font-size: 13px;
  line-height: 1;
}
.trust-strip b { font-weight: 500; }
.trust-dot {
  display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(245, 239, 230, .3);
}

/* ----- Hosts signature ----- */
.hosts-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px dashed rgba(245, 239, 230, .18);
  max-width: 440px;
}
.hosts-stack { display: flex; }
.hosts-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Fraunces', serif;
  font-size: 14px; font-weight: 500;
  color: var(--cream);
  border: 2px solid #2e1a0f;
  margin-left: -12px;
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .4);
}
.hosts-avatar:first-child { margin-left: 0; }
.hosts-avatar.a-frank { background: linear-gradient(135deg, #6b2034, #3d0f1c); }
.hosts-avatar.a-merel { background: linear-gradient(135deg, #9c6838, #5a3d2a); }
.hosts-text {
  font-size: 12.5px;
  color: rgba(245, 239, 230, .68);
  line-height: 1.45;
}
.hosts-text b {
  display: block;
  color: var(--cream);
  font-family: 'Fraunces', serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -.005em;
  margin-bottom: 2px;
}

/* ----- Staggered reveal — triggert per slide als ie actief wordt ----- */
.hero-stagger > * {
  opacity: 0;
  transform: translateY(16px);
}
.hero-slide.is-active .hero-stagger > * {
  animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
.hero-slide.is-active .hero-stagger > *:nth-child(1) { animation-delay: .15s; }
.hero-slide.is-active .hero-stagger > *:nth-child(2) { animation-delay: .30s; }
.hero-slide.is-active .hero-stagger > *:nth-child(3) { animation-delay: .45s; }
.hero-slide.is-active .hero-stagger > *:nth-child(4) { animation-delay: .60s; }
.hero-slide.is-active .hero-stagger > *:nth-child(5) { animation-delay: .75s; }
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stagger > * { animation: none; opacity: 1; transform: none; }
  .hero-slide .hero-bg { transition: none; transform: none; }
}

/* ================= HERO SLIDER CONTROLS — editorial ================= */
.hero-slider-ctrl {
  position: absolute;
  left: 40px;                    /* mobile: aligned met px-6 + mx-4 */
  bottom: 34px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
}
@media (min-width: 768px) {
  .hero-slider-ctrl { left: 64px; }          /* md:px-12 */
}
@media (min-width: 1024px) {
  .hero-slider-ctrl { left: 80px; }          /* lg:px-16 */
}
@media (min-width: 1352px) {
  .hero-slider-ctrl { left: calc(50vw - 596px); }  /* centered max-w-1320 content */
}

/* Counter — Fraunces */
.hero-sc-counter {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Fraunces', serif;
  font-weight: 400;
  letter-spacing: -.01em;
}
.hero-sc-current {
  font-size: 32px;
  color: #fff;
  font-feature-settings: "tnum";           /* tabular digits zodat 01→02 niet "springt" */
}
.hero-sc-sep {
  font-size: 18px;
  color: rgba(255, 255, 255, .35);
  padding: 0 2px;
}
.hero-sc-total {
  font-size: 16px;
  color: rgba(255, 255, 255, .55);
  font-feature-settings: "tnum";
}

/* Dunne progress-bars */
.hero-sc-progress {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-sc-bar {
  position: relative;
  display: block;
  width: 40px;
  height: 1.5px;
  padding: 0;
  border: none;
  background: rgba(255, 255, 255, .25);
  overflow: hidden;
  cursor: pointer;
  transition: width .55s cubic-bezier(.2, .7, .2, 1), background .3s ease;
}
.hero-sc-bar:hover { background: rgba(255, 255, 255, .45); }
.hero-sc-bar.is-active {
  width: 80px;
  background: rgba(255, 255, 255, .22);
}
.hero-sc-bar > span {
  position: absolute;
  inset: 0;
  background: var(--honey);                /* #e4b363 honey accent */
  transform-origin: left;
  transform: scaleX(0);
}
.hero-sc-bar.is-active > span {
  animation: heroProgress var(--slide-duration, 8s) linear forwards;
}
.hero-slider-ctrl.is-paused .hero-sc-bar.is-active > span {
  animation-play-state: paused;
}
@keyframes heroProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Minimal nav-arrows — geen cirkel */
.hero-sc-nav {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-sc-btn {
  background: none;
  border: none;
  padding: 6px 2px;
  color: rgba(255, 255, 255, .6);
  cursor: pointer;
  line-height: 0;
  transition: color .25s ease, transform .25s ease;
}
.hero-sc-btn:hover {
  color: var(--honey);
  transform: translateX(1px);
}
.hero-sc-btn:first-child:hover { transform: translateX(-2px); }
.hero-sc-btn:last-child:hover  { transform: translateX(2px); }

@media (max-width: 640px) {
  .hero-slider-ctrl {
    bottom: 24px;
    gap: 16px;
  }
  .hero-sc-current { font-size: 26px; }
  .hero-sc-sep    { font-size: 15px; }
  .hero-sc-total  { font-size: 14px; }
  .hero-sc-bar         { width: 28px; }
  .hero-sc-bar.is-active { width: 48px; }
  .hero-sc-nav    { gap: 12px; }
}

/* Scroll hint — muis-symbool met vallend puntje */
.scroll-cue {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  color: rgba(255, 255, 255, .92);
  font-size: 11px; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  z-index: 5;
  pointer-events: none;
}
.scroll-cue-mouse {
  position: relative;
  width: 26px; height: 44px;
  border: 1.5px solid rgba(255, 255, 255, .75);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.scroll-cue-mouse::before {
  content: "";
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 8px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, .7);
  transform: translateX(-50%);
  animation: scrollDotFall 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
@keyframes scrollDotFall {
  0%      { transform: translate(-50%, 0);    opacity: 0; }
  15%     { opacity: 1; }
  60%     { transform: translate(-50%, 20px); opacity: 0; }
  100%    { transform: translate(-50%, 20px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-mouse::before { animation: none; }
}

/* ================= SECTION BASE ================= */
.sec-eyebrow {
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--bordeaux);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; font-weight: 500;
}
.sec-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--bordeaux); }

/* Sectiekop. Eén maat voor de hele site: op 60px werden lange koppen als
   "Beleef het domein: tours, proeverijen & meer" een blok van drie regels dat
   het scherm overnam. De schaal zit nu in --fs-section, en pagina's zetten
   geen eigen font-size meer op .sec-title. */
.sec-title {
  font-family: 'Fraunces', serif; font-weight: 400;
  font-size: var(--fs-section); line-height: 1.08; letter-spacing: -.02em;
  max-width: 20ch; text-wrap: balance; color: var(--ink);
}
.sec-title em { font-style: italic; color: var(--bordeaux); }
.sec-lede { max-width: 440px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); }

/* De koppen onder het sectieniveau staan bij hun eigen component; ze halen
   hun maat uit --fs-block (blokkop) of --fs-card (kaartkop). */

/* ================= OVER ONS — editorial card-overlay =================
   Foto zit links-onder, cream card zweeft over de rechterbovenhoek.
   De rechter- en onderrand van de foto faden naar de cream-kleur van de card,
   zodat de overgang naadloos voelt. */
.over-stage {
  position: relative;
  display: flex;
  flex-direction: column;
}

@media (min-width: 1024px) {
  .over-stage {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    align-items: start;
  }
  .over-stage > .over-visual,
  .over-stage > .over-card {
    grid-column: 1;
    grid-row: 1;
  }
}

.over-visual {
  position: relative;
  border-radius: 32px;
  overflow: hidden;
  aspect-ratio: 4/5;
  /* Scherpe foto — alleen een lichte donkere vignet onderaan zodat
     de witte "28 jaar"-stempel leesbaar blijft */
  background-image:
    linear-gradient(180deg, transparent 55%, rgba(20, 12, 6, .45) 100%),
    url("../images/foto_section_2.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  box-shadow: 0 30px 50px -30px rgba(30, 20, 10, .5);
}
@media (min-width: 1024px) {
  .over-visual {
    width: 48%;
    justify-self: start;
    margin-top: 0;
    margin-left: 4%;  /* van de linkerrand gehaald, richting midden */
    z-index: 1;
  }
}
@media (min-width: 1280px) {
  .over-visual { width: 46%; margin-left: 6%; }
}

/* Docentenblok op /educatie: zelfde opbouw als "over ons" op de homepage,
   andere foto. Vervang alleen het bestand zodra er een nieuwe portretfoto
   met beide docenten is. */
.over-visual--docenten {
  background-image:
    linear-gradient(180deg, transparent 50%, rgba(20, 12, 6, .55) 100%),
    url("../images/educatie/docent-met-glas.jpg");
  background-position: center, center 22%;
}
.over-visual-cap {
  position: absolute; left: 32px; right: 32px; bottom: 30px;
  display: flex; flex-direction: column; gap: 4px;
  z-index: 2;
}
.over-visual-cap-k {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 500; color: var(--cream);
  text-shadow: 0 1px 6px rgba(20, 12, 6, .5);
}
.over-visual-cap-v {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(250, 246, 238, .78);
  text-shadow: 0 1px 4px rgba(20, 12, 6, .5);
}

.over-visual .stamp {
  position: absolute; top: 24px; left: 24px; right: 24px;
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; letter-spacing: .1em; color: rgba(250, 246, 238, .95);
  text-shadow: 0 1px 3px rgba(20, 12, 6, .55);
  z-index: 2;
}
.over-visual .year {
  position: absolute; bottom: 32px; left: 32px;
  font-family: 'Fraunces', serif; font-size: 84px; font-weight: 400;
  line-height: .9; color: var(--cream); font-style: italic; letter-spacing: -.02em;
  z-index: 2;
}
.over-visual .year small {
  display: block; font-family: 'Inter', sans-serif; font-style: normal;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(250, 246, 238, .7); font-weight: 500; margin-top: 14px;
}

/* Card: slank cream-wit paneel met strakke, gedefinieerde edges.
   Subtiele zachte schaduw zorgt voor diepte tov de scherpe foto. */
.over-card {
  position: relative;
  background: var(--cream);
  border-radius: 32px;
  padding: 36px 28px;
  margin-top: -48px;
  z-index: 2;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
}
@media (min-width: 1024px) {
  .over-card {
    width: 42%;
    justify-self: end;
    align-self: start;
    margin-top: 90px;
    margin-right: 4%;          /* van de rechterrand gehaald, richting midden */
    padding: 48px 44px;
  }
}
@media (min-width: 1280px) {
  .over-card {
    width: 40%;
    margin-right: 6%;
    padding: 52px;
  }
}

/* Binnen de card: compactere sec-title, strakke linker-uitlijning */
.over-card .sec-title {
  margin-bottom: 22px;
  max-width: 100%;
}

.over-lede {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16.5px; line-height: 1.65;
  color: var(--ink);
  font-weight: 500;
  margin: 0 0 24px;
}

.over-quote {
  position: relative;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 2.1vw, 28px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--honey);
  padding: 22px 0 22px 20px;
  margin: 8px 0 24px;
  border-left: 3px solid var(--honey);
  text-wrap: pretty;
}
.over-quote-mark {
  font-family: 'Fraunces', Georgia, serif;
  font-style: normal;
  font-size: 1.2em;
  line-height: 1;
  color: var(--honey-soft);
  vertical-align: -0.06em;
}
.over-quote-mark--end { margin-left: 2px; }

.over-p {
  font-size: 15.5px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.over-p:last-of-type { margin-bottom: 0; }

.over-signature-block {
  display: flex; align-items: flex-end; gap: 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.over-signature {
  font-family: 'Parisienne', 'Dancing Script', cursive;
  font-weight: 400;
  font-size: 46px;
  line-height: 1;
  color: var(--bordeaux);
  letter-spacing: -0.01em;
  transform: translateY(4px);
}
.over-signature-sub {
  font-size: 12px; line-height: 1.45;
  color: var(--muted);
  padding-bottom: 4px;
}
.over-signature-sub b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  margin-bottom: 2px;
}

/* ================= TOUR ================= */
.tour-section {
  background: linear-gradient(180deg, #2d3a2a 0%, #1e2a1d 100%);
  color: var(--cream);
}
.tour-section .sec-eyebrow { color: var(--honey-soft); }
.tour-section .sec-eyebrow::before { background: var(--honey-soft); }
.tour-section .sec-title { color: var(--cream); }
.tour-section .sec-title em { color: var(--honey-soft); }
.tour-section .sec-lede { color: rgba(245, 239, 230, .72); }

.stop {
  background: rgba(245, 239, 230, .04);
  border: 1px solid rgba(245, 239, 230, .1);
  border-radius: 22px; padding: 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
  transition: transform .3s ease, background .3s, border-color .3s;
  position: relative; overflow: hidden;
}
.stop:hover {
  background: rgba(245, 239, 230, .07);
  transform: translateY(-4px);
  border-color: rgba(228, 179, 99, .35);
}
.stop-num {
  font-family: 'Fraunces', serif; font-size: 13px; color: var(--honey-soft);
  letter-spacing: .1em; font-weight: 500;
  display: flex; align-items: center; gap: 10px;
}
.stop-num::after { content: ""; height: 1px; flex: 1; background: rgba(245, 239, 230, .15); }
.stop-title {
  font-family: 'Fraunces', serif; font-size: 24px; font-weight: 500;
  line-height: 1.1; letter-spacing: -.01em; margin-top: 8px;
}
.stop-desc { font-size: 13.5px; color: rgba(245, 239, 230, .7); line-height: 1.55; text-wrap: pretty; }
.stop-time {
  margin-top: auto; padding-top: 16px;
  border-top: 1px solid rgba(245, 239, 230, .1);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(245, 239, 230, .45);
}
.stop-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(228, 179, 99, .12);
  border: 1px solid rgba(228, 179, 99, .25);
  display: grid; place-items: center; color: var(--honey-soft);
}

/* Kopje boven een productblok, gebruikt op /wijn en /alcoholvrij */
.product-eyebrow {
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.product-eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--bordeaux);
}
/* ================= GALLERY ================= */
.slider {
  position: relative; overflow: hidden; border-radius: 24px;
  background: var(--ink);
}
.slider-track { display: flex; transition: transform .6s cubic-bezier(.4, 0, .2, 1); }
.slide { flex: 0 0 100%; height: 540px; position: relative; overflow: hidden; }
.slide .img { position: absolute; inset: 0; }

.slide .img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.slide-1 .img {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .15) 0%, rgba(20, 12, 6, .55) 100%),
    url("../images/oogst/tros-knippen.jpg");
}
.slide-2 .img {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .25) 0%, rgba(20, 12, 6, .6) 100%),
    url("../images/oogst/pluk-wagen.jpg");
}
.slide-3 .img {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .15) 0%, rgba(20, 12, 6, .55) 100%),
    url("../images/oogst/most-uit-de-pers.jpg");
}
.slide-4 .img {
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .2) 0%, rgba(20, 12, 6, .6) 100%),
    url("../images/gallery/middagbijons_2.jpg");
}

.slide-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: end; justify-content: space-between;
  padding: 40px 40px 108px; color: var(--cream);
  background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55) 100%);
}
@media (max-width: 640px) {
  .slide-overlay { padding: 28px 28px 96px; }
}
.slide-eyebrow {
  font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--honey-soft); margin-bottom: 12px;
}
.slide-title {
  font-family: 'Fraunces', serif; font-size: 42px; line-height: 1;
  font-weight: 400; letter-spacing: -.02em; text-wrap: balance;
}
.slide-title em { font-style: italic; color: var(--honey-soft); }

.s-btn {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(250, 246, 238, .12);
  border: 1px solid rgba(250, 246, 238, .25);
  color: var(--cream);
  display: grid; place-items: center;
  transition: background .2s, transform .2s;
  backdrop-filter: blur(6px);
}
.s-btn:hover { background: rgba(250, 246, 238, .22); transform: scale(1.05); }
.dot {
  width: 24px; height: 3px; background: rgba(250, 246, 238, .3);
  border-radius: 2px; transition: background .25s, width .25s;
  cursor: pointer;
}
.dot.active { background: var(--honey); width: 40px; }

/* ================= REVIEWS — editorial, island cards ================= */
.reviews-head {
  display: flex; flex-wrap: wrap; align-items: end;
  justify-content: space-between; gap: 48px;
  margin-bottom: 72px;
}
.reviews-head-left { flex: 1 1 520px; min-width: 0; }

.reviews-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-section);
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  max-width: 820px;
  text-wrap: balance;
}
/* Override: "langer" krijgt honey-kleur binnen de reviews-titel */
.reviews-title em {
  font-style: italic;
  color: var(--honey);
}

.reviews-rating {
  display: flex; align-items: center; gap: 22px;
  flex-shrink: 0;
}
.reviews-rating-score {
  display: flex; align-items: center; gap: 14px;
  padding-right: 22px;
  border-right: 1px solid rgba(139, 90, 43, .2);
}
.reviews-rating-star {
  width: 68px; height: 68px;
  fill: var(--honey);
  filter: drop-shadow(0 6px 14px rgba(228, 179, 99, .35));
}
.reviews-rating-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 64px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.reviews-rating-meta {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 220px;
}
.reviews-rating-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.reviews-rating-sources {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  font-weight: 500;
  letter-spacing: 0.01em;
}

@media (max-width: 767px) {
  .reviews-head { margin-bottom: 44px; gap: 28px; }
  .reviews-rating { gap: 16px; }
  .reviews-rating-score { padding-right: 16px; gap: 10px; }
  .reviews-rating-star { width: 52px; height: 52px; }
  .reviews-rating-num { font-size: 48px; }
}

/* Recensiekaart. De strook eromheen staat verderop bij .reviews-track. */
.review {
  /* Bg fractie lichter dan sectie (#ede3d1 cream-warm) → paper #faf6ee */
  background: var(--paper);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 34px 30px;
  display: flex; flex-direction: column; gap: 18px;
  min-height: 280px;
  box-shadow: 0 8px 24px -18px rgba(30, 20, 10, .18);
  transition: transform .3s ease, box-shadow .3s ease;
}
.review:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(30, 20, 10, .22);
}

.stars { display: flex; gap: 3px; color: var(--honey); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }

.rev-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px; line-height: 1.45;
  color: var(--ink); text-wrap: pretty; font-weight: 400;
  flex: 1;
}

.review-foot {
  display: flex; align-items: center; gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 90, 43, .12);
}
.avatar {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px; color: var(--cream); font-weight: 500;
  flex-shrink: 0;
}
.review-who { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.review-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.review-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--muted);
}
.review-source {
  display: inline-flex; align-items: center; gap: 5px;
  font-weight: 500;
  color: var(--ink-soft);
}
.review-source svg {
  color: var(--walnut);
}
.review-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: rgba(139, 90, 43, .4);
  flex-shrink: 0;
}
.review-date {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* Roulerende recensiestrook.
   Dezelfde scroll-snap-mechaniek als de evenementenstrook op de homepage:
   swipen op mobiel en de pijlen op desktop delen daardoor één gedrag, en de
   kaartbreedte blijft een kwestie van CSS in plaats van gemeten pixels. */
.reviews-strip { position: relative; }
.reviews-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Symmetrische verticale ruimte, anders kapt de overflow de hover-schaduw
     van een kaart af en staan de zijpijlen niet op het kaartmidden. */
  padding: 28px 4px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.reviews-track::-webkit-scrollbar { display: none; }
.reviews-track > .review {
  flex: 0 0 auto;
  width: min(360px, 82vw);
  scroll-snap-align: start;
}
@media (min-width: 1024px) {
  .reviews-track > .review { width: calc((1280px - 40px) / 3); }
}
.reviews-track .rev-text { font-size: 17px; line-height: 1.5; }

/* Sterren met halve punten: een lichte rij eronder en een gevulde rij erover
   die op een percentage wordt afgekapt. Zo klopt 4,5 zonder een los
   half-ster-icoon en zonder afronding naar boven.
   align-self is nodig omdat de kaart een kolom-flexbox is: zonder dat rekt de
   balk over de volle kaartbreedte en slaat het percentage nergens meer op. */
.rev-stars {
  position: relative;
  display: block;
  width: max-content;
  align-self: flex-start;
  line-height: 0;
}
.rev-stars-row { display: flex; gap: 3px; }
.rev-stars-row svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.rev-stars-row--empty { color: rgba(139, 90, 43, .22); }
.rev-stars-row--filled {
  position: absolute; top: 0; left: 0; height: 100%;
  color: var(--honey);
  overflow: hidden;
}
.rev-avatar { background: var(--bordeaux); }

/* ================= BOOKING ================= */
/* Groen in plaats van bruin op verzoek van de opdrachtgever: het vergaderblok
   moest zich onderscheiden van de bruine hero en footer. */
.booking-wrap {
  border-radius: 28px; overflow: hidden;
  background:
    radial-gradient(600px 300px at 20% 0%, rgba(228, 179, 99, .22), transparent 60%),
    linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 55%, var(--forest-soft) 100%);
  color: var(--cream);
  display: grid; grid-template-columns: 1fr 1fr; min-height: 540px;
}
.book-left {
  padding: 64px 56px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
}
.book-left h3 {
  font-family: 'Fraunces', serif; font-size: var(--fs-block);
  font-weight: 400; line-height: 1; letter-spacing: -.02em; text-wrap: balance;
}
.book-left h3 em { font-style: italic; color: var(--honey-soft); }
.bbullet { display: flex; align-items: center; gap: 14px; font-size: 14px; color: rgba(245, 239, 230, .85); }
.bbullet::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--honey); flex-shrink: 0; }.fbox {
  background: rgba(245, 239, 230, .06);
  border: 1px solid rgba(245, 239, 230, .14);
  border-radius: 12px; padding: 13px 16px;
  color: var(--cream); font-size: 14px; font-family: inherit;
  transition: border-color .2s, background .2s;
  cursor: pointer; width: 100%;
}
.fbox:hover { border-color: rgba(228, 179, 99, .4); background: rgba(245, 239, 230, .08); }
.fbox:focus { outline: none; border-color: var(--honey); }
.fbox option { background: var(--ink); color: var(--cream); }.date-chip.active { background: var(--honey); color: var(--ink); border-color: var(--honey); }.date-num { font-family: 'Fraunces', serif; font-size: 20px; font-weight: 500; line-height: 1; }
.date-chip.active .date-day { opacity: .75; color: var(--ink); }
/* Rechterhelft van het vergaderblok op de homepage. Hier stond het
   boekformulier; nu een beeld met een verwijzing naar /vergaderen, waar de
   aanvraag in één keer compleet wordt opgenomen. */
.book-visual {
  position: relative;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  padding: 40px;
  border-left: 1px solid rgba(245, 239, 230, .08);
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .15) 0%, rgba(20, 12, 6, .68) 100%),
    url("../images/gallery/middagbijons_3.jpg");
  background-size: cover;
  background-position: center;
}
.book-visual-card {
  background: rgba(20, 12, 6, .55);
  border: 1px solid rgba(245, 239, 230, .16);
  border-radius: 20px;
  padding: 26px 26px 24px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 420px;
}
.book-visual-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--honey-soft);
  margin-bottom: 10px;
}
.book-visual-text {
  font-size: 15px; line-height: 1.6;
  color: rgba(245, 239, 230, .86);
  margin: 0 0 20px;
}
.book-visual-cta {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--honey); color: var(--ink);
  padding: 13px 22px; border-radius: 999px;
  font-weight: 600; font-size: 14.5px;
  text-decoration: none;
  transition: background .2s, transform .2s, gap .2s;
}
.book-visual-cta:hover { background: var(--honey-soft); transform: translateY(-1px); gap: 13px; }

/* ================= LOCATIE — Google Maps embed ================= */
.map-box {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  min-height: 440px;
  background: var(--cream-warm);
  border: 1px solid rgba(139, 90, 43, .12);
  box-shadow:
    0 20px 40px -24px rgba(30, 20, 10, .2),
    0 6px 14px -10px rgba(30, 20, 10, .1);
}
.map-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}
.map-open {
  position: absolute;
  bottom: 18px; left: 18px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(26, 20, 16, .88);
  color: var(--cream);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 8px 20px -10px rgba(20, 12, 6, .45);
  transition: background .2s, transform .2s, gap .2s;
}
.map-open:hover {
  background: var(--bordeaux);
  transform: translateY(-1px);
  gap: 10px;
}

.loc-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 24px;
  padding: 26px 28px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .3),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}
.loc-k {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
/* De contactlijst zit direct onder zo'n kop en brengt zijn eigen ruimte mee. */
.loc-k + .contact-people { margin-top: 4px; }
.loc-k::before { content: ""; width: 20px; height: 1px; background: var(--muted); }
.loc-v {
  font-family: 'Fraunces', serif; font-size: 22px; font-weight: 500;
  line-height: 1.3; letter-spacing: -.01em;
}
.loc-v small {
  display: block; font-family: 'Inter', sans-serif; font-size: 14px;
  font-weight: 400; color: var(--ink-soft); margin-top: 4px; letter-spacing: 0;
}
.hr-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  margin: 0 -12px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 14px;
  border-radius: 12px;
  transition: background .25s ease;
}
.hr-row:last-child { border-bottom: none; }
.hr-row b {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  display: inline-flex; align-items: center;
  gap: 10px;
}
.hr-row span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.hr-row.closed span { color: var(--bordeaux); font-style: italic; }

/* Vandaag-highlight: zachte honey tint + pulserende dot + badge */
.hr-row.today {
  background: linear-gradient(90deg, rgba(228, 179, 99, .18) 0%, rgba(228, 179, 99, .06) 100%);
  border-bottom-color: transparent;
  border-bottom-style: solid;
}
.hr-row.today + .hr-row { border-top: 1px dashed var(--line-soft); margin-top: -1px; }
.hr-row.today b {
  color: var(--ink);
  font-weight: 600;
}
.hr-row.today b::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 0 rgba(228, 179, 99, .7);
  animation: todayPulse 2.2s ease-out infinite;
}
.hr-row.today span {
  color: var(--bordeaux);
  font-weight: 600;
}

.hr-today-badge {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .35);
  padding: 2px 8px;
  border-radius: 999px;
  line-height: 1;
  margin-left: 2px;
}

@keyframes todayPulse {
  0%   { box-shadow: 0 0 0 0 rgba(228, 179, 99, .7); }
  70%  { box-shadow: 0 0 0 10px rgba(228, 179, 99, 0); }
  100% { box-shadow: 0 0 0 0 rgba(228, 179, 99, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hr-row.today b::before { animation: none; }
}

/* --- Locatie op telefoon ---
   De contactkaart bevat lange, onbreekbare strings (de e-mailadressen). Grid-
   items hebben standaard min-width:auto, dus die strings duwden de kolom naar
   ~379px terwijl er maar 335px is. De section heeft overflow:hidden, waardoor
   de rechterkant van kaarten, kaartje en openingstijden werd afgesneden. */
#locatie .grid > * { min-width: 0; }
.loc-v { overflow-wrap: anywhere; }

@media (max-width: 640px) {
  /* Hoogte van de map staat al in het 767px-blok (min-height: 280px). */
  .map-box { border-radius: 20px; }
  .map-open { bottom: 12px; left: 12px; padding: 9px 14px; font-size: 12px; }

  .loc-card { padding: 22px 20px; border-radius: 20px; }
  .loc-k { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 12px; }
  .loc-v { font-size: 19px; }
  .loc-v small { font-size: 13.5px; }

  .hr-row { padding: 9px 10px; margin: 0 -10px; font-size: 13.5px; gap: 12px; }
  .hr-row b { gap: 8px; min-width: 0; }
  .hr-row span { white-space: nowrap; }
}

/* ================= FOOTER ================= */
.foot-col a {
  display: block; padding: 5px 0; font-size: 13.5px;
  color: rgba(245, 239, 230, .7); transition: color .2s;
}
.foot-col a:hover { color: var(--honey); }

/* ================= RESPONSIVE ================= */
@media (max-width: 1024px) {
  .proev-wrap { grid-template-columns: 1fr; }
  .booking-wrap { grid-template-columns: 1fr; }
  .book-left { padding: 48px 32px; }
  .book-visual { border-left: none; border-top: 1px solid rgba(245, 239, 230, .08); padding: 32px; min-height: 300px; }
}

@media (max-width: 1024px) {
  .hero-meta { gap: 16px 28px; }
  .scroll-cue { display: none; }
}

@media (max-width: 768px) {
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(20, 14, 10, .45) 0%, rgba(20, 14, 10, .35) 35%, rgba(20, 14, 10, .75) 100%);
  }
  .trust-strip { font-size: 12px; }
  .slide { height: 440px; }
  .slide-title { font-size: 30px; }
  .proev-visual { min-height: 360px; padding: 32px; }
  .proev-glass { width: 220px; height: 320px; right: -60px; }
}


/* Regel in het winkelmandje-overzicht op /cart */
.cart-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  align-items: center;
  gap: 12px;
}

/* ================= COOKIE BANNER — Bottom island (glassmorphism) =================
   Zwevend midden-onderaan als elegante island-card. Sterke blur zodat de
   scroll-cue eronder subtiel zichtbaar blijft (diepte ipv blokkade). */
.cookie-consent {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 16px);
  z-index: 90;                     /* allerhoogste laag */
  max-width: calc(100vw - 24px);

  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 10px 22px;
  border-radius: 32px;

  background: rgba(245, 239, 230, .7);
  border: 1px solid rgba(228, 179, 99, .28);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  box-shadow: 0 10px 28px -14px rgba(30, 20, 10, .18);

  opacity: 0;
  pointer-events: none;
  transition:
    opacity  .45s cubic-bezier(.2, .7, .2, 1),
    transform .55s cubic-bezier(.2, .7, .2, 1);
}
.cookie-consent.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* Scrolled: zelfde donker-thema transitie als .nav-pill.scrolled */
body.is-scrolled .cookie-consent {
  background: rgba(26, 20, 16, .82);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .45);
}
body.is-scrolled .cookie-consent .cookie-icon { color: var(--honey-soft); }
body.is-scrolled .cookie-consent .cookie-message { color: var(--cream); }
body.is-scrolled .cookie-consent .cookie-link { color: rgba(245, 239, 230, .78); }
body.is-scrolled .cookie-consent .cookie-link:hover { color: var(--cream); }
body.is-scrolled .cookie-consent .cookie-accept:hover { box-shadow: 0 6px 18px -6px rgba(228, 179, 99, .7); }
.cookie-consent {
  transition:
    background   .4s ease,
    border-color .4s ease,
    color        .4s ease,
    box-shadow   .4s ease,
    opacity      .45s cubic-bezier(.2, .7, .2, 1),
    transform    .55s cubic-bezier(.2, .7, .2, 1);
}
.cookie-consent .cookie-icon,
.cookie-consent .cookie-message,
.cookie-consent .cookie-link {
  transition: color .4s ease;
}

.cookie-consent .cookie-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--walnut);
  flex-shrink: 0;
}
.cookie-consent .cookie-icon svg { display: block; }

.cookie-consent .cookie-message {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.005em;
  white-space: nowrap;
}

.cookie-consent .cookie-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--bordeaux);
  text-decoration: none;
  padding: 6px 4px;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s;
  white-space: nowrap;
}
.cookie-consent .cookie-link:hover { color: var(--bordeaux-deep); text-decoration: underline; text-underline-offset: 3px; }

.cookie-consent .cookie-accept {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  margin-left: 2px;
  border-radius: 999px;
  border: 0;
  background: var(--honey);
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  white-space: nowrap;
}
.cookie-consent .cookie-accept:hover {
  background: var(--honey-soft);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -6px rgba(228, 179, 99, .5);
}
.cookie-consent .cookie-accept svg { color: var(--bordeaux); }

@media (max-width: 767px) {
  /* Cookie banner mobile — Floating Card, royale 2-rij layout. */
  .cookie-consent {
    left: 50% !important;
    right: auto !important;
    bottom: 20px !important;
    max-width: min(340px, calc(100vw - 24px)) !important;
    width: 100% !important;

    display: grid !important;
    grid-template-columns: 24px 1fr auto !important;
    grid-template-rows: auto auto !important;
    column-gap: 12px !important;
    row-gap: 18px !important;
    align-items: start !important;

    padding: 22px 22px 20px !important;
    border-radius: 28px !important;

    background: rgba(245, 239, 230, .88) !important;
    border: 1px solid rgba(228, 179, 99, .3) !important;
    backdrop-filter: blur(14px) saturate(160%) !important;
    -webkit-backdrop-filter: blur(14px) saturate(160%) !important;
    box-shadow:
      0 18px 40px -16px rgba(228, 179, 99, .4),
      0 10px 24px -12px rgba(30, 20, 10, .18) !important;

    gap: initial !important;
    transform: translate(-50%, 20px);
  }
  .cookie-consent.show { transform: translate(-50%, 0); }

  /* Rij 1: cookie-icoontje linksboven */
  .cookie-consent .cookie-icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 24px !important; height: 24px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--walnut);
    display: grid; place-items: center;
    margin-top: 1px;
  }
  .cookie-consent .cookie-icon svg { width: 18px; height: 18px; }

  /* Rij 1: tekst spant naast icon */
  .cookie-consent .cookie-message {
    grid-column: 2 / -1 !important;
    grid-row: 1 !important;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    color: var(--ink);
    font-weight: 500;
    white-space: normal !important;
    flex: initial !important;
    min-width: 0;
  }

  /* Rij 2: Weigeren → subtiele tekst-link */
  .cookie-consent #rejectCookies {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    align-self: center !important;
    padding: 10px 4px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink-soft);
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    cursor: pointer;
    flex: initial !important;
    transition: color .2s;
    margin: 0 !important;
  }
  .cookie-consent #rejectCookies:hover {
    color: var(--bordeaux);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  /* Rij 2: Akkoord → prominente honey pill rechts */
  .cookie-consent .cookie-accept {
    grid-column: 3 !important;
    grid-row: 2 !important;
    justify-self: end !important;
    align-self: center !important;
    padding: 11px 20px !important;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600;
    flex: initial !important;
    box-shadow: 0 6px 16px -6px rgba(228, 179, 99, .6);
  }
  .cookie-consent .cookie-accept svg { display: none; }

  /* Negeer de globale is-scrolled dark variant op mobile — blijft altijd light */
  body.is-scrolled .cookie-consent {
    background: rgba(245, 239, 230, .85);
    border-color: rgba(228, 179, 99, .28);
    color: var(--ink);
  }
  body.is-scrolled .cookie-consent .cookie-icon { color: var(--walnut); }
  body.is-scrolled .cookie-consent .cookie-message { color: var(--ink); }
  body.is-scrolled .cookie-consent #rejectCookies { color: var(--ink-soft); }
}

/* ================= CART PAGE — boutique island layout ================= */
.cart-page {
  background: var(--cream-warm);   /* warmer vlak → cards steken duidelijk af */
  padding: var(--page-head-pt) var(--section-px) var(--page-head-pb);
  min-height: 100vh;
}

.cart-page-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.cart-page-head {
  margin-bottom: 40px;
}
.cart-page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

/* Grid layout */
.cart-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .cart-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 32px;
    align-items: start;
  }
}

/* Shared Island card */
.cart-items-card,
.cart-summary-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .3),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}

/* Items card */
.cart-items-card {
  padding: 28px;
}
@media (min-width: 1024px) { .cart-items-card { padding: 36px; } }

.cart-items-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.cart-items-head-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.cart-items-head-count {
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.cart-items { list-style: none; padding: 0; margin: 0; }
.cart-row {
  display: grid;
  grid-template-columns: 80px 1fr auto auto;
  align-items: center;
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(139, 90, 43, .1);
}
.cart-row:last-child { border-bottom: 0; padding-bottom: 8px; }

@media (max-width: 640px) {
  .cart-row {
    grid-template-columns: 64px 1fr;
    grid-template-areas:
      "thumb body"
      "thumb qty"
      "total total";
    gap: 8px 14px;
    padding: 20px 0;
  }
  .cart-row-thumb { grid-area: thumb; }
  .cart-row-body { grid-area: body; }
  .cart-qty { grid-area: qty; justify-self: start; margin-top: 4px; }
  .cart-row-total { grid-area: total; justify-self: end; }
}

.cart-row-thumb {
  width: 80px; height: 80px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream-warm);
}
.cart-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) {
  .cart-row-thumb { width: 64px; height: 64px; border-radius: 14px; }
}

.cart-row-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cart-row-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 19px;
  line-height: 1.2;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
  transition: color .2s;
}
.cart-row-name:hover { color: var(--bordeaux); }
.cart-row-price {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* Quantity stepper */
.cart-qty {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px;
  border: 1px solid rgba(139, 90, 43, .24);
  border-radius: 999px;
  background: rgba(250, 246, 238, .5);
}
.cart-qty-btn {
  width: 32px; height: 32px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  color: var(--honey);
  cursor: pointer;
  transition: background .2s, color .2s, transform .15s;
}
.cart-qty-btn:hover:not(:disabled) {
  background: rgba(228, 179, 99, .18);
  transform: scale(1.06);
}
.cart-qty-btn:disabled {
  color: rgba(139, 90, 43, .3);
  cursor: not-allowed;
}
.cart-qty-value {
  min-width: 24px;
  text-align: center;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13.5px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Line total + remove */
.cart-row-total {
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  text-align: right;
  min-width: 90px;
}
.cart-row-total > span:first-child {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cart-row-remove {
  background: transparent;
  border: 0;
  padding: 4px;
  color: var(--walnut);
  cursor: pointer;
  display: inline-flex; align-items: center;
  border-radius: 999px;
  transition: color .2s, background .2s, transform .15s;
}
.cart-row-remove:hover {
  color: var(--bordeaux-deep);
  background: rgba(26, 20, 16, .04);
  transform: translateY(-1px);
}

/* Items card foot */
.cart-items-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 22px;
  margin-top: 8px;
  border-top: 1px solid rgba(139, 90, 43, .14);
  gap: 16px;
  flex-wrap: wrap;
}
.cart-continue {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.cart-continue:hover { color: var(--bordeaux-deep); gap: 10px; }
.cart-clear {
  background: transparent;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
  padding: 6px 2px;
  transition: color .2s;
}
.cart-clear:hover { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; }

/* Summary card */
.cart-summary-card {
  padding: 28px;
  position: sticky;
  top: 106px;
}
@media (min-width: 1024px) { .cart-summary-card { padding: 36px; } }

.cart-summary-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}

.cart-summary-rows {
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.cart-summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0;
}
.cart-summary-row dt { font-weight: 400; }
.cart-summary-row dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  font-weight: 500;
}

.cart-summary-note {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(228, 179, 99, .14);
  border-radius: 12px;
  font-size: 12px;
  color: var(--walnut);
}
.cart-summary-note b { color: var(--bordeaux); font-weight: 600; }

.cart-summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 20px;
  margin-top: 20px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.cart-summary-total-label {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.cart-summary-total-value {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.cart-checkout-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 22px;
  padding: 16px 22px;
  border-radius: 999px;
  background: var(--honey);
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 8px 20px -10px rgba(228, 179, 99, .6);
}
.cart-checkout-btn:hover {
  background: var(--honey-soft);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(228, 179, 99, .7);
}
.cart-checkout-btn svg { transition: transform .2s; }
.cart-checkout-btn:hover svg { transform: translateX(3px); }

.cart-summary-trust {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 90, 43, .1);
}
.cart-trust-item {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px;
  color: var(--muted);
}
.cart-trust-item svg { color: var(--walnut); flex-shrink: 0; }

/* Empty state */
.cart-empty {
  background: var(--cream);
  border-radius: 32px;
  padding: 80px 40px;
  text-align: center;
  box-shadow: 0 20px 50px -30px rgba(30, 20, 10, .18);
}
.cart-empty-icon {
  width: 72px; height: 72px;
  border-radius: 999px;
  margin: 0 auto 20px;
  display: grid; place-items: center;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
}
.cart-empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-block);
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.cart-empty-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.cart-empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--bordeaux);
  color: var(--cream);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.cart-empty-cta:hover { background: var(--bordeaux-deep); transform: translateY(-1px); }

/* ================= CHECKOUT PAGE — boutique form ================= */
.checkout-page {
  background: var(--cream-warm);   /* warmer vlak → cards steken duidelijk af */
  padding: var(--page-head-pt) var(--section-px) var(--page-head-pb);
  min-height: 100vh;
}

.checkout-page-inner {
  max-width: 1280px;
  margin: 0 auto;
}

.checkout-page-head { margin-bottom: 36px; }
.checkout-page-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}

.checkout-alert {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px;
  margin-bottom: 24px;
  border-radius: 16px;
  background: rgba(178, 34, 34, .08);
  border: 1px solid rgba(178, 34, 34, .22);
  color: #8a1b1b;
  font-size: 13.5px;
}
.checkout-alert svg { flex-shrink: 0; }

/* Grid */
.checkout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 1024px) {
  .checkout-grid {
    grid-template-columns: minmax(0, 1.7fr) minmax(320px, 1fr);
    gap: 32px;
    align-items: start;
  }
}

.checkout-main {
  display: flex; flex-direction: column;
  gap: 20px;
}

/* Form cards (island style) */
.checkout-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 28px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .3),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}
@media (min-width: 1024px) { .checkout-card { padding: 36px 40px; } }

.checkout-card-head {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.checkout-step-num {
  display: inline-grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
}
.checkout-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

/* Form fields */
.checkout-fields {
  display: grid; gap: 16px;
  grid-template-columns: 1fr;
}
.checkout-fields--2col {
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .checkout-fields--2col { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.field {
  display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.field--full { grid-column: 1 / -1; }

.field-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.field-label em {
  font-style: normal;
  color: var(--bordeaux);
  margin-left: 2px;
}

.field-input {
  width: 100%;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(139, 90, 43, .18);
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.4;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.field-input::placeholder { color: rgba(139, 90, 43, .4); }
.field-input:hover { border-color: rgba(139, 90, 43, .32); }
.field-input:focus {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 4px rgba(228, 179, 99, .16);
  background: #fffdf9;
}
.field-input.is-invalid {
  border-color: #c94444;
  background: #fffaf9;
}

.field-textarea {
  resize: vertical;
  min-height: 150px;
}

/* Select met custom chevron */
.field-select {
  position: relative;
}
.field-select select.field-input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background: #ffffff;
  cursor: pointer;
}
.field-select-chevron {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--walnut);
  pointer-events: none;
}

.field-error {
  font-size: 12px;
  color: #c94444;
  margin-top: -2px;
}

/* Back link */
.checkout-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px;
  padding: 6px 2px;
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color .2s, gap .2s;
  align-self: flex-start;
}
.checkout-back svg { transition: transform .2s; }
.checkout-back:hover { color: var(--bordeaux-deep); gap: 10px; }
.checkout-back:hover svg { transform: translateX(-2px); }

/* Summary card */
.checkout-summary-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 28px;
  position: sticky;
  top: 106px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .3),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}
@media (min-width: 1024px) { .checkout-summary-card { padding: 36px; } }

.checkout-summary-items {
  list-style: none; padding: 0;
  margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.checkout-summary-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-soft);
}
.checkout-summary-item-qty {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.checkout-summary-item-name {
  color: var(--ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}
.checkout-summary-item-total {
  color: var(--ink);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.checkout-summary-rows {
  margin-bottom: 4px;
}

.checkout-submit-btn {
  margin-top: 20px;
  width: 100%;
}

/* Trust icons */
.checkout-trust {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 90, 43, .1);
}
.checkout-trust-icons {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 10px 14px;
}
.checkout-trust-ideal {
  display: inline-flex; align-items: center;
  padding: 5px 9px;
  background: #CC0066;
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 5px;
}
.checkout-trust-lock {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--walnut);
  font-size: 11.5px;
  font-weight: 500;
}
.checkout-trust-lock svg { color: var(--walnut); }
.checkout-trust-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  color: var(--muted);
  line-height: 1.45;
}

/* ================= CART CONFIRM MODAL ================= */
.cart-modal {
  position: fixed; inset: 0;
  z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
}
.cart-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 12, 6, .55);
  backdrop-filter: blur(8px) saturate(130%);
  -webkit-backdrop-filter: blur(8px) saturate(130%);
}
.cart-modal-panel {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 38px 36px 32px;
  width: min(440px, 100%);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, .5),
    0 12px 30px -10px rgba(0, 0, 0, .2);
  text-align: center;
}
@media (max-width: 540px) {
  .cart-modal-panel { padding: 32px 24px 26px; border-radius: 26px; }
}

/* Enter animation */
.cart-modal-enter { transition: opacity .28s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1); }
.cart-modal-enter-start { opacity: 0; transform: translateY(12px) scale(.97); }
.cart-modal-enter-end { opacity: 1; transform: translateY(0) scale(1); }

.cart-modal-icon {
  display: grid; place-items: center;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
}
.cart-modal-icon--danger {
  background: rgba(178, 34, 34, .1);
  color: #9a2424;
}

.cart-modal-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.cart-modal-message {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 26px;
  text-wrap: pretty;
}
.cart-modal-message b {
  color: var(--ink);
  font-weight: 600;
}

.cart-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.cart-modal-cancel,
.cart-modal-confirm {
  flex: 1 1 140px;
  padding: 13px 22px;
  border-radius: 999px;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s, box-shadow .2s;
}

.cart-modal-cancel {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid rgba(26, 20, 16, .16);
}
.cart-modal-cancel:hover {
  background: rgba(26, 20, 16, .04);
  color: var(--ink);
  border-color: rgba(26, 20, 16, .28);
}

.cart-modal-confirm {
  background: var(--bordeaux);
  color: var(--cream);
  box-shadow: 0 8px 20px -10px rgba(61, 43, 31, .6);
}
.cart-modal-confirm:hover {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px -8px rgba(61, 43, 31, .7);
}

/* ================= MOBILE NAV: HAMBURGER ================= */
.nav-hamburger {
  display: none;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(26, 20, 16, .05);
  border: 1px solid rgba(26, 20, 16, .08);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  transition: background .2s, color .2s, border-color .2s;
}
.nav-hamburger span {
  display: block;
  width: 16px; height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, opacity .25s ease;
}
.nav-hamburger:hover { background: rgba(26, 20, 16, .1); }

@media (max-width: 1023px) {
  .nav-hamburger { display: inline-flex; }
}
body.is-scrolled .nav-hamburger {
  background: rgba(245, 239, 230, .08);
  border-color: rgba(245, 239, 230, .12);
  color: var(--cream);
}
body.is-scrolled .nav-hamburger:hover {
  background: rgba(245, 239, 230, .18);
}


/* ================= OFFCANVAS MENU ================= */
.offcanvas-overlay {
  position: fixed; inset: 0;
  z-index: 110;
  background: rgba(20, 12, 6, .55);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
}
.offcanvas-overlay-enter { transition: opacity .4s cubic-bezier(.2, .7, .2, 1); }
.offcanvas-overlay-leave { transition: opacity .35s cubic-bezier(.2, .7, .2, 1); }
.offcanvas-overlay-start { opacity: 0; }
.offcanvas-overlay-end   { opacity: 1; }

.offcanvas-menu {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 120;
  width: min(420px, 92vw);
  background: var(--cream);
  box-shadow: -24px 0 60px -20px rgba(30, 20, 10, .35);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .55s cubic-bezier(.2, .7, .2, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.offcanvas-menu.is-open { transform: translateX(0); }

/* Decoratief vlak links in de offcanvas — honey line accent */
.offcanvas-menu::before {
  content: "";
  position: absolute;
  top: 120px; bottom: 120px; left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent 0%, rgba(228, 179, 99, .35) 50%, transparent 100%);
  pointer-events: none;
}

.offcanvas-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px 20px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.offcanvas-logo {
  height: 52px; width: auto;
  display: block;
}
.offcanvas-close {
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(26, 20, 16, .14);
  background: transparent;
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .25s, color .25s, transform .3s, border-color .25s;
}
.offcanvas-close:hover {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
  transform: rotate(90deg);
}

.offcanvas-body {
  flex: 1;
  padding: 24px 24px 12px;
  display: flex; flex-direction: column;
}

.offcanvas-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  margin: 10px 0 18px;
}
.offcanvas-eyebrow + .offcanvas-eyebrow,
.offcanvas-nav + .offcanvas-eyebrow {
  margin-top: 32px;
}
.offcanvas-eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: var(--walnut);
}

/* Navigation links */
.offcanvas-nav {
  display: flex; flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
.offcanvas-nav a {
  position: relative;
  display: flex; align-items: baseline;
  padding: 8px 0 8px 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 26px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  transition: color .25s ease, padding-left .3s cubic-bezier(.2, .7, .2, 1);
}
.offcanvas-nav a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 18px; height: 1.5px;
  background: var(--honey);
  transform: translateY(-50%) scaleX(0);
  transform-origin: left center;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), width .3s cubic-bezier(.2, .7, .2, 1);
}
.offcanvas-nav a:hover,
.offcanvas-nav a:focus-visible,
.offcanvas-nav a.is-active {
  color: var(--bordeaux);
  padding-left: 30px;
  outline: none;
}
.offcanvas-nav a:hover::before,
.offcanvas-nav a:focus-visible::before,
.offcanvas-nav a.is-active::before {
  transform: translateY(-50%) scaleX(1);
}
.offcanvas-nav a.is-active {
  font-weight: 500;
}

/* Staggered entry animation when menu opens */
.offcanvas-menu.is-open .offcanvas-nav a {
  animation: offcanvas-link-in .5s cubic-bezier(.2, .7, .2, 1) both;
}
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(1) { animation-delay: .08s; }
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(2) { animation-delay: .12s; }
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(3) { animation-delay: .16s; }
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(4) { animation-delay: .20s; }
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(5) { animation-delay: .24s; }
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(6) { animation-delay: .28s; }
.offcanvas-menu.is-open .offcanvas-nav a:nth-child(7) { animation-delay: .32s; }

@keyframes offcanvas-link-in {
  0%   { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Contact block */
.offcanvas-contact {
  display: flex; flex-direction: column; gap: 4px;
}
.offcanvas-contact a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-decoration: none;
  transition: color .2s, gap .2s;
}
.offcanvas-contact a svg {
  color: var(--walnut);
  flex-shrink: 0;
}
.offcanvas-contact a:hover { color: var(--bordeaux); gap: 14px; }

/* Foot with CTA */
.offcanvas-foot {
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(139, 90, 43, .14);
  background: var(--cream);
}
.offcanvas-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 16px 22px;
  border-radius: 999px;
  background: var(--honey);
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 8px 22px -10px rgba(228, 179, 99, .55);
}
.offcanvas-cta:hover {
  background: var(--honey-soft);
  transform: translateY(-1px);
  box-shadow: 0 12px 28px -8px rgba(228, 179, 99, .7);
}
.offcanvas-cta svg { transition: transform .25s; }
.offcanvas-cta:hover svg { transform: translateX(3px); }

/* ================= MOBILE/TABLET RESPONSIVE POLISH — HOME PAGE ================= */

@media (max-width: 767px) {
  /* Hero compacter */
  .hero {
    min-height: calc(100svh - 24px);
    border-radius: 22px;
  }

  /* Hero-shell volgt dezelfde krappere kaartmarge als de hero zelf. Padding
     en koptypografie komen uit de tokens; hier staat bewust geen font-size
     of sectiepadding meer, want dat liep per pagina uiteen. */
  .hero-shell { min-height: calc(100svh - 24px); }

  /* Tour-section ronde hoeken iets kleiner + minder margin */
  .tour-section { margin-left: 16px; margin-right: 16px; border-radius: 22px; }

  /* Booking split card: stack */
  .booking-wrap { grid-template-columns: 1fr !important; }
  .book-left, .book-visual { padding: 28px !important; }

  /* Gallery slider kleiner */
  .slider { border-radius: 22px; }

  /* Locatie map stack */
  .map-box { min-height: 280px; }
}

@media (max-width: 640px) {
  /* Over card padding minder */
  .over-card { padding: 28px !important; border-radius: 24px !important; }
  .over-visual { margin-left: 0 !important; border-radius: 24px !important; }

  /* Footer compact. Het merkblok stond hier gecentreerd boven de kolommen; dat
     gaf twee leesranden in dezelfde footer en is vervangen door de regels bij
     "FOOTER · MOBIEL" onderaan dit bestand, die alles links uitlijnen. */
  footer .foot-col { text-align: left; }
}

/* ================= OFFCANVAS — mobile compact ================= */
@media (max-width: 767px) {
  .offcanvas-head { padding: 18px 22px 16px; }
  .offcanvas-logo { height: 46px; }
  .offcanvas-close { width: 40px; height: 40px; }

  .offcanvas-body { padding: 18px 24px 10px; }

  .offcanvas-eyebrow { margin: 8px 0 12px; font-size: 10.5px; }
  .offcanvas-nav + .offcanvas-eyebrow,
  .offcanvas-eyebrow + .offcanvas-eyebrow { margin-top: 24px; }

  .offcanvas-nav a {
    font-size: 23px;
    padding: 6px 0;
    letter-spacing: -0.018em;
  }
  .offcanvas-nav a:hover,
  .offcanvas-nav a:focus-visible { padding-left: 26px; }
  .offcanvas-nav a::before { width: 16px; }

  .offcanvas-contact a { padding: 7px 0; font-size: 13px; }

  .offcanvas-foot { padding: 16px 24px 22px; }
  .offcanvas-cta { padding: 14px 20px; font-size: 14px; }
}

@media (max-width: 380px) {
  .offcanvas-nav a { font-size: 21px; padding: 5px 0; }
}

/* =========================================================================
   MOBILE HERO — Island Design revision (≤767px)
   Dark glassmorphism card zweeft boven full-bleed wijngaard-foto.
   Twee losse floating pills in de nav, minimalistische bottom frame.
   ========================================================================= */
@media (max-width: 767px) {

  /* --- NAV gedrag matcht desktop ---
     Hero (unscrolled) = logo los linksboven + losse rechter pill.
     Scrolled = unified donkere pill (logo + cart + hamburger + Reserveren). */

  /* Hero state: wit logo los linksboven */
  .brand-float {
    display: block !important;
    top: 22px;
    left: 22px;
    filter:
      invert(1) brightness(1.1)
      drop-shadow(0 6px 14px rgba(20, 12, 6, .5))
      drop-shadow(0 2px 3px rgba(20, 12, 6, .4));
    transition: opacity .4s ease;
  }
  /* Even hoog als de ronde knoppenpil rechts (46px), zodat logo en pil op
     mobiel op één lijn staan in plaats van dat het logo eroverheen torent. */
  .brand-float .brand-logo--hero { height: 46px; width: auto; }

  /* Scrolled: brand-float verdwijnt, in-pill logo neemt over */
  body.is-scrolled .brand-float {
    display: none !important;
    transform: none;
  }

  /* Rechter pill uitlijnen op zelfde hoogte als logo-midden + iets naar links */
  .nav-pill { top: 34px !important; right: 28px !important; }
  body.is-scrolled .nav-pill { top: 14px !important; right: 16px !important; }

  /* Nav-pill hero-state: GEEN achtergrond → alleen rechter cluster zichtbaar */
  .nav-pill {
    background: transparent !important;
    border: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .nav-pill .brand-in-pill { display: none; }

  /* Rechter cluster → eigen cream pill */
  .nav-pill .nav-right {
    padding: 4px !important;
    background: rgba(250, 246, 238, .75);
    border: 1px solid var(--line-soft);
    border-radius: 999px;
    backdrop-filter: blur(14px) saturate(150%);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    box-shadow: 0 10px 28px -14px rgba(20, 12, 6, .4);
    gap: 3px !important;
  }

  /* Scrolled: unified donkere pill (logo verschijnt in-pill) */
  body.is-scrolled .nav-pill {
    background: rgba(26, 20, 16, .88) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(12px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(12px) saturate(150%) !important;
    box-shadow: 0 10px 30px -14px rgba(20, 12, 6, .55) !important;
    padding: 4px 5px 4px 8px !important;
  }
  body.is-scrolled .nav-pill .brand-in-pill {
    display: inline-flex;
    background: transparent;
    border: 0;
    padding: 0 6px 0 4px;
    gap: 10px;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.is-scrolled .nav-pill .brand-in-pill .brand-logo {
    height: 46px;
    width: auto;
    filter: invert(1) brightness(1.08);
  }
  body.is-scrolled .nav-pill .nav-right {
    background: transparent;
    border: 0;
    padding: 0 !important;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Cart + hamburger: ink op hero-pil, cream op scrolled */
  .nav-hamburger {
    width: 34px !important;
    height: 34px !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--ink) !important;
    transition: color .4s ease, background .2s;
  }
  .nav-hamburger:hover {
    background: rgba(26, 20, 16, .06) !important;
  }
  body.is-scrolled .nav-hamburger {
    color: var(--cream) !important;
  }
  body.is-scrolled .nav-hamburger:hover {
    background: rgba(245, 239, 230, .1) !important;
  }
  /* Reserveren-button: zichtbaar in scrolled unified pill op elk mobiel formaat */
  .nav-pill .btn-book {
    display: none;
    padding: 6px 10px;
    margin-left: 2px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    gap: 0;
    white-space: nowrap;
  }
  .nav-pill .btn-book .arrow { display: none; }
  .nav-pill .btn-book .btn-book-label { display: inline; }
  body.is-scrolled .nav-pill .btn-book { display: inline-flex; }

  /* Hele smalle devices (<360px, klassieke oude telefoons): label inkorten */
  @media (max-width: 359px) {
    body.is-scrolled .nav-pill .btn-book { padding: 6px 9px; font-size: 11px; }
  }

  /* --- HERO: past in één oogopslag in de viewport (svh = visible viewport) --- */
  .hero {
    min-height: calc(100svh - 24px);
    border-radius: 24px;
  }

  /* Centreer content, verklein scrim zodat foto meer naar voren komt */
  .hero-scrim {
    background:
      linear-gradient(180deg, rgba(20, 14, 10, .45) 0%, rgba(20, 14, 10, .2) 35%, rgba(20, 14, 10, .35) 65%, rgba(20, 14, 10, .55) 100%);
  }

  /* De hero-kolom houdt op mobiel een krappere zijmarge aan dan de rest van
     de pagina: het paneel eronder heeft zelf al 24px binnenruimte. */
  .hero-shell { padding-inline: 16px; }

  /* Content → leesbaar paneel over de foto. Elke hero krijgt dit paneel,
     zodat de tekst op mobiel overal even goed leesbaar is. */
  .hero-panel {
    max-width: 100% !important;
    padding: 28px 24px 26px !important;
    background: rgba(46, 26, 15, .78);
    border: 1px solid rgba(228, 179, 99, .22);
    border-radius: 32px;
    backdrop-filter: blur(15px) saturate(140%);
    -webkit-backdrop-filter: blur(15px) saturate(140%);
    box-shadow:
      0 30px 80px -20px rgba(20, 12, 6, .7),
      0 0 60px -10px rgba(228, 179, 99, .22),
      inset 0 0 0 1px rgba(228, 179, 99, .04);
  }

  /* Trust-strip krijgt iets meer contrast op het donkere paneel */
  .hero-panel .trust-strip {
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 11.5px;
    color: rgba(245, 239, 230, .72);
  }
  .hero-panel .trust-strip b { color: var(--honey-soft); }

  /* De regelafbrekingen in de koppen zijn voor brede schermen bedoeld */
  .hero-panel .hero-title { color: var(--cream); }
  .hero-panel .hero-title br { display: none; }

  .hero-panel .hero-lede { color: rgba(245, 239, 230, .84); max-width: 100%; }

  /* Knoppen gestapeld en even breed, zodat ze één blok vormen */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin-top: 22px;
  }
  .hero-actions .btn-primary,
  .hero-actions .btn-ghost { width: 100%; }
  .hero-actions .btn-primary svg,
  .hero-actions .btn-ghost svg { display: none; }
  .hero-panel .btn-ghost {
    background: transparent;
    color: var(--cream);
    border-color: rgba(245, 239, 230, .35);
  }
  .hero-panel .btn-ghost:hover {
    background: rgba(245, 239, 230, .08);
    border-color: rgba(245, 239, 230, .6);
  }

  /* Feitenstrip: weg op mobiel, het paneel wordt anders te druk */
  .hero-meta { display: none; }

  /* --- BOTTOM FRAME: slider indicator + scroll cue → minimalist, screen edges --- */
  .hero-slider-ctrl {
    left: 20px !important;
    bottom: 20px !important;
    gap: 14px !important;
  }
  .hero-sc-counter { font-size: 12px !important; }
  .hero-sc-progress { gap: 4px !important; }
  .hero-sc-bar {
    width: 18px !important;
    height: 2px !important;
  }
  .hero-sc-nav { display: none !important; }  /* prev/next buttons weg op mobile */

  /* Scroll-cue minimaal, rechtsonder */
  .scroll-cue {
    right: 20px !important;
    left: auto !important;
    bottom: 20px !important;
    transform: none !important;
    font-size: 10px !important;
    letter-spacing: 0.18em !important;
    color: rgba(245, 239, 230, .75) !important;
  }
  .scroll-cue-mouse { display: none; }

  /* Op mobile hero → brand-float los linksboven (zichtbaar).
     Op scrolled verdwijnt hij via de body.is-scrolled .brand-float rule hierboven. */
  .nav-pill .nav-right { margin-left: auto; }
}

/* ================= OVER ONS · decoratieve druiven + bladeren ================= */
.over-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--walnut);
  opacity: 0;
  transition: opacity .6s ease .2s;
}
/* Alleen op tablet+ tonen (desktop focus) */
@media (min-width: 1024px) {
  .over-deco { opacity: 1; }
}
@media (max-width: 1023px) {
  .over-deco { display: none; }
}

/* Druiventros linksboven — deels uit beeld naar links */
.over-deco--grapes {
  top: 40px;
  left: -140px;
  width: 380px;
  height: 460px;
  color: var(--walnut);
  opacity: .14;
  transform: rotate(-12deg);
  filter: drop-shadow(0 20px 30px rgba(61, 43, 31, .15));
}

/* Bladeren/ranken rechtsonder — bleedt vanaf buiten de sectie naar binnen */
.over-deco--leaves {
  bottom: -80px;
  right: -200px;
  width: 760px;
  height: 660px;
  color: var(--forest);
  opacity: .16;
  transform: rotate(8deg);
  filter: drop-shadow(0 24px 40px rgba(45, 58, 42, .18));
}

/* Extra zwaarder bleeding op brede schermen */
@media (min-width: 1440px) {
  .over-deco--leaves {
    right: -240px;
    width: 860px;
    height: 740px;
  }
}

/* ================= LOCATIE · decoratieve wijnfles + wijnglas ================= */
.loc-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease .2s;
}
@media (min-width: 1024px) {
  .loc-deco { opacity: 1; }
}
@media (max-width: 1023px) {
  .loc-deco { display: none; }
}

/* Wijnfles — linksboven, kantelt naar rechts */
.loc-deco--bottle {
  top: 60px;
  left: -100px;
  width: 260px;
  height: 540px;
  color: var(--bordeaux);
  opacity: .1;
  transform: rotate(14deg);
  filter: drop-shadow(0 20px 30px rgba(61, 43, 31, .15));
}

/* Wijnglas — rechtsonder, bleedt naar rechts uit beeld */
.loc-deco--glass {
  bottom: -60px;
  right: -90px;
  width: 340px;
  height: 460px;
  color: var(--walnut);
  opacity: .12;
  transform: rotate(8deg);
  filter: drop-shadow(0 24px 40px rgba(139, 90, 43, .2));
}

/* Extra scaling op breed scherm */
@media (min-width: 1440px) {
  .loc-deco--bottle { left: -120px; width: 300px; height: 620px; }
  .loc-deco--glass  { right: -120px; width: 400px; height: 540px; }
}

/* ================= CART & CHECKOUT · botanische achtergrond-decoraties ================= */
.cart-page,
.checkout-page {
  position: relative;
  overflow: hidden;
}
.cart-page-inner,
.checkout-page-inner {
  position: relative;
  z-index: 1;
}

.page-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease .2s;
}
@media (min-width: 1024px) {
  .page-deco { opacity: 1; }
}
@media (max-width: 1023px) {
  .page-deco { display: none; }
}

/* ----- /cart ----- */

/* Olijftak rechtsboven — komt uit de rechterrand gekanteld binnen */
.page-deco--olive {
  top: 100px;
  right: -80px;
  width: 420px;
  height: 110px;
  color: var(--forest);
  opacity: .12;
  transform: rotate(22deg);
  filter: drop-shadow(0 12px 20px rgba(45, 58, 42, .15));
}

/* Tarweaar linksonder — rechtop staand, half uit beeld */
.page-deco--wheat {
  bottom: -60px;
  left: -30px;
  width: 140px;
  height: 480px;
  color: var(--oak);
  opacity: .14;
  transform: rotate(-8deg);
  filter: drop-shadow(0 16px 24px rgba(139, 90, 43, .18));
}

/* ----- /checkout ----- */

/* Olijftak linksboven — gespiegeld tov cart */
.page-deco--olive-left {
  top: 110px;
  left: -80px;
  width: 380px;
  height: 100px;
  color: var(--forest);
  opacity: .12;
  transform: rotate(-20deg) scaleX(-1);
  filter: drop-shadow(0 12px 20px rgba(45, 58, 42, .15));
}

/* Perentak rechtsonder — bleedt buiten de pagina */
.page-deco--pear {
  bottom: -40px;
  right: -70px;
  width: 300px;
  height: 420px;
  color: var(--walnut);
  opacity: .13;
  transform: rotate(12deg);
  filter: drop-shadow(0 18px 28px rgba(139, 90, 43, .18));
}

/* Extra forser op breedbeeld */
@media (min-width: 1440px) {
  .page-deco--olive      { right: -100px; width: 480px; height: 130px; }
  .page-deco--wheat      { left: -40px;   width: 160px; height: 540px; }
  .page-deco--olive-left { left: -100px;  width: 440px; height: 120px; }
  .page-deco--pear       { right: -90px;  width: 340px; height: 480px; }
}

/* ================= PAGE WATERMARK — signature met muis-spotlight ================= */
.page-watermark {
  position: absolute;
  left: 0; right: 0;
  bottom: 20px;
  z-index: 0;
  pointer-events: none;

  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(48px, 9vw, 140px);
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 0.12em;
  user-select: none;

  /* Base: zachte bordeaux wash — spotlight blijft subtiel transparent */
  background:
    radial-gradient(
      circle 320px at var(--mx, 50%) var(--my, 50%),
      rgba(61, 43, 31, .16) 0%,
      rgba(61, 43, 31, .1) 30%,
      rgba(61, 43, 31, .04) 80%
    );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  transition: background-position .15s ease-out;
}
@media (max-width: 1023px) {
  .page-watermark {
    font-size: clamp(40px, 11vw, 100px);
    bottom: 16px;
  }
}
@media (max-width: 640px) {
  .page-watermark {
    font-size: 44px;
    bottom: 14px;
  }
}
@media (hover: none) {
  /* Touch devices: statische subtiele wash, geen spotlight */
  .page-watermark {
    background: none;
    -webkit-text-fill-color: rgba(61, 43, 31, .05);
    color: rgba(61, 43, 31, .05);
  }
}

/* =========================================================================
   VERGADEREN PAGE — hero booking + arrangementen + catering + contact
   ========================================================================= */

/* ----- Hero ----- */
.meeting-hero {
  position: relative;
  color: var(--cream);
  overflow: hidden;
  background: #2e1a0f;
  box-shadow:
    0 40px 80px -40px rgba(30, 20, 10, .45),
    0 10px 30px -15px rgba(30, 20, 10, .25),
    inset 0 0 0 1px rgba(255, 255, 255, .04);
}
.meeting-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(120deg, rgba(20, 12, 6, .82) 0%, rgba(20, 12, 6, .55) 50%, rgba(20, 12, 6, .3) 100%),
    url("../images/hero/hero_bg_2.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.05);
}
.meeting-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 30% 50%, rgba(20, 12, 6, .5), transparent 75%),
    linear-gradient(180deg, rgba(20, 12, 6, .3) 0%, transparent 30%, transparent 60%, rgba(20, 12, 6, .5) 100%);
}

/* Wizard-kaart die binnen de hero leeft — extra depth + bevel tegen de wijngaard-bg */
.meeting-reserveer-card--in-hero {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .14);
  border-radius: 28px;
  padding: 22px 18px 26px;
  box-shadow:
    0 50px 100px -40px rgba(10, 6, 3, .6),
    0 20px 40px -18px rgba(10, 6, 3, .35);
  text-align: left;
}
@media (min-width: 640px)  { .meeting-reserveer-card--in-hero { padding: 32px 28px 36px; border-radius: 32px; } }
@media (min-width: 1024px) { .meeting-reserveer-card--in-hero { padding: 40px 44px 44px; } }

/* ----- Booking wizard section (voorheen in de hero) ----- */
.meeting-reserveer {
  background: var(--cream-warm);
  position: relative;
  overflow: hidden;
}
.meeting-reserveer > div { position: relative; z-index: 1; }
.meeting-reserveer-head {
  text-align: center;
  margin-bottom: 36px;
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.meeting-reserveer-head .sec-eyebrow {
  justify-content: center;
  display: inline-flex;
}
.meeting-reserveer-lede {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.meeting-reserveer-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .12);
  border-radius: 28px;
  padding: 24px 20px 28px;
  box-shadow:
    0 40px 90px -40px rgba(30, 20, 10, .4),
    0 12px 28px -16px rgba(30, 20, 10, .18);
  scroll-margin-top: 80px;
}
@media (min-width: 640px)  { .meeting-reserveer-card { padding: 32px 28px 36px; border-radius: 32px; } }
@media (min-width: 1024px) { .meeting-reserveer-card { padding: 44px 48px 48px; } }

/* Booking card (hero right) — constrained width, rechts uitgelijnd */
.meeting-booking {
  width: 100%;
  max-width: 440px;
  margin-left: auto;
  background: rgba(245, 239, 230, .96);
  border-radius: 28px;
  padding: 28px;
  box-shadow:
    0 40px 80px -30px rgba(10, 6, 3, .55),
    0 10px 28px -10px rgba(10, 6, 3, .25);
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(228, 179, 99, .25);
}
@media (min-width: 1024px) {
  .meeting-booking { padding: 32px; }
}

.meeting-booking-head {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.meeting-booking-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.meeting-booking-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}

.meeting-booking-field { margin-bottom: 18px; }
.meeting-booking-field:last-of-type { margin-bottom: 12px; }

.meeting-booking-label {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 500;
}
.meeting-booking-hint {
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bordeaux);
  font-weight: 500;
}

/* Screenreader-only helper */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Date toolbar (maand label + week nav) */
.meeting-dates-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  min-height: 28px;
}
.meeting-dates-month {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-soft);
  text-transform: capitalize;
  transition: color .2s;
}
.meeting-dates-nav {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
.meeting-dates-nav button {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, .16);
  background: #fff;
  color: var(--walnut);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .15s, box-shadow .2s;
}
.meeting-dates-nav button:hover:not(:disabled) {
  border-color: var(--honey);
  color: var(--bordeaux);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(228, 179, 99, .4);
}
.meeting-dates-nav button:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.meeting-dates-nav button:disabled {
  opacity: .35;
  cursor: not-allowed;
}

/* Date scroller */
.meeting-dates {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 2px 6px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 90, 43, .25) transparent;
  scroll-behavior: smooth;
}
.meeting-dates::-webkit-scrollbar { height: 4px; }
.meeting-dates::-webkit-scrollbar-track { background: transparent; }
.meeting-dates::-webkit-scrollbar-thumb { background: rgba(139, 90, 43, .25); border-radius: 10px; }

.meeting-date {
  flex-shrink: 0;
  scroll-snap-align: start;
  min-width: 56px;
  min-height: 64px;
  padding: 10px 6px 12px;
  border-radius: 14px;
  border: 1px solid rgba(139, 90, 43, .14);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: background .2s, border-color .2s, transform .18s, color .2s, box-shadow .2s;
  position: relative;
}
.meeting-date:hover:not(:disabled) {
  border-color: var(--honey);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(228, 179, 99, .5);
}
.meeting-date:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .38);
  z-index: 2;
}
.meeting-date.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(61, 43, 31, .55);
}
.meeting-date.is-selected:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .55), 0 8px 20px -10px rgba(61, 43, 31, .55);
}
.meeting-date.is-disabled,
.meeting-date:disabled {
  opacity: .32;
  cursor: not-allowed;
}
/* Subtiele markering voor eerste van de maand — geeft visueel ritme bij scrollen */
.meeting-date.is-first-of-month:not(.is-selected)::before {
  content: '';
  position: absolute;
  top: 6px; right: 6px;
  width: 4px; height: 4px;
  border-radius: 999px;
  background: var(--honey);
  opacity: .65;
}
@media (prefers-reduced-motion: reduce) {
  .meeting-date,
  .meeting-dates-nav button { transition: none; }
  .meeting-date:hover:not(:disabled) { transform: none; }
  .meeting-dates { scroll-behavior: auto; }
}
.meeting-date-day {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.meeting-date.is-selected .meeting-date-day,
.meeting-date.is-selected .meeting-date-month { color: rgba(245, 239, 230, .7); }
.meeting-date-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.meeting-date-month {
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

/* Custom arrangement dropdown */
.meeting-select {
  position: relative;
}
.meeting-select-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 1px solid rgba(139, 90, 43, .18);
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.meeting-select-btn:hover { border-color: rgba(139, 90, 43, .32); }
.meeting-select-btn:focus-visible,
.meeting-select-btn.is-open {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 4px rgba(228, 179, 99, .18);
}
.meeting-select-value {
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meeting-select-chev {
  color: var(--walnut);
  flex-shrink: 0;
  transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.meeting-select-btn.is-open .meeting-select-chev { transform: rotate(180deg); }

.meeting-select-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid rgba(139, 90, 43, .18);
  border-radius: 14px;
  padding: 6px;
  box-shadow:
    0 20px 40px -16px rgba(30, 20, 10, .25),
    0 8px 20px -8px rgba(30, 20, 10, .12);
  display: flex; flex-direction: column;
  gap: 2px;
}
.meeting-select-enter { transition: opacity .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
.meeting-select-enter-start { opacity: 0; transform: translateY(-6px); }
.meeting-select-enter-end { opacity: 1; transform: translateY(0); }

.meeting-select-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  background: transparent;
  border: 0;
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.meeting-select-option:hover { background: rgba(228, 179, 99, .14); }
.meeting-select-option.is-selected {
  background: rgba(228, 179, 99, .22);
  color: var(--bordeaux);
  font-weight: 600;
}
.meeting-select-check {
  color: var(--bordeaux);
  flex-shrink: 0;
}

.meeting-stepper {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(139, 90, 43, .18);
  border-radius: 999px;
}
.meeting-stepper button {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 0; background: transparent;
  color: var(--honey);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.meeting-stepper button:hover:not(:disabled) {
  background: rgba(228, 179, 99, .16);
  transform: scale(1.05);
}
.meeting-stepper button:disabled {
  color: rgba(139, 90, 43, .3);
  cursor: not-allowed;
}
.meeting-stepper-value {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 15px;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.meeting-booking-note {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  line-height: 1.4;
}

.meeting-booking-submit {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 22px;
  background: var(--honey);
  color: var(--bordeaux);
  border: 0;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 10px 22px -10px rgba(228, 179, 99, .55);
  margin-top: 4px;
}
.meeting-booking-submit:hover {
  background: var(--honey-soft);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(228, 179, 99, .7);
}
.meeting-booking-submit svg { transition: transform .2s; }
.meeting-booking-submit:hover svg { transform: translateX(3px); }

.meeting-booking-fineprint {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  margin-top: 12px;
  letter-spacing: 0.02em;
}

/* ----- Intro ----- */
.meeting-intro { background: var(--paper); }
.meeting-intro-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .meeting-intro-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
  }
}
.meeting-intro-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 36px 32px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
@media (min-width: 1024px) {
  .meeting-intro-card { padding: 48px 44px; }
}
.meeting-intro-p {
  font-size: 15.5px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
/* Uitgelichte regel in de introductiekaart: privé evenementen en
   bedrijfsuitjes, kopij van de opdrachtgever. Bewust apart van de
   kenmerkenlijst eronder, want het is een aanbod en geen faciliteit. */
.meeting-highlight {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 26px;
  padding: 18px 20px;
  border-radius: 16px;
  background: rgba(228, 179, 99, .14);
  border: 1px solid rgba(228, 179, 99, .4);
}
.meeting-highlight svg { color: var(--walnut); flex-shrink: 0; margin-top: 2px; }
.meeting-highlight strong {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px; font-weight: 500;
  color: var(--bordeaux-deep);
  margin-bottom: 3px;
}
.meeting-highlight span {
  font-size: 14px; line-height: 1.5;
  color: var(--ink-soft);
}

.meeting-intro-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.meeting-intro-features > div {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.meeting-intro-features svg { color: var(--walnut); flex-shrink: 0; }

.meeting-intro-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 30px 60px -30px rgba(30, 20, 10, .35);
  margin: 0;
}
.meeting-intro-visual-img {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .1) 0%, rgba(20, 12, 6, .4) 100%),
    url("../images/sections/section_2_vergaderen.jpg");
  background-size: cover;
  background-position: center;
}
.meeting-intro-visual-cap {
  position: absolute; bottom: 24px; left: 24px; right: 24px;
  display: flex; flex-direction: column; gap: 3px;
  color: var(--cream);
}
.meeting-intro-visual-k {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.meeting-intro-visual-v {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .7);
}

/* ----- Arrangementen ----- */
.meeting-arrangementen { background: var(--cream-warm); }
.meeting-arr-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .meeting-arr-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .meeting-arr-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.meeting-arr-card {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 28px;
  padding: 30px 28px 28px;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow:
    0 16px 40px -24px rgba(30, 20, 10, .2),
    0 6px 14px -10px rgba(30, 20, 10, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.meeting-arr-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 24px 50px -24px rgba(30, 20, 10, .3),
    0 10px 22px -8px rgba(30, 20, 10, .15);
}
.meeting-arr-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.meeting-arr-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.meeting-arr-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.meeting-arr-list {
  list-style: none; padding: 0; margin: 8px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(139, 90, 43, .12);
}
.meeting-arr-list li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 13px; line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.meeting-arr-list li::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--honey);
  flex-shrink: 0;
  margin-top: 7px;
}

.meeting-arr-card--featured {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow:
    0 24px 60px -24px rgba(61, 43, 31, .6),
    inset 0 0 0 1px rgba(228, 179, 99, .16);
}
.meeting-arr-card--featured .meeting-arr-num { color: var(--honey-soft); }
.meeting-arr-card--featured .meeting-arr-title { color: var(--cream); }
.meeting-arr-card--featured .meeting-arr-desc { color: rgba(245, 239, 230, .82); }
.meeting-arr-card--featured .meeting-arr-list { border-top-color: rgba(245, 239, 230, .12); }
.meeting-arr-card--featured .meeting-arr-list li { color: var(--cream); }
.meeting-arr-card--featured .meeting-arr-list li::before { background: var(--honey); }

.meeting-arr-badge {
  position: absolute;
  top: -10px; right: 22px;
  background: var(--honey);
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 6px 14px -4px rgba(228, 179, 99, .55);
}

.meeting-arr-card--ghost {
  background: transparent;
  border: 1.5px dashed rgba(139, 90, 43, .35);
  box-shadow: none;
}
.meeting-arr-card--ghost:hover {
  background: rgba(228, 179, 99, .08);
  border-color: var(--honey);
  transform: translateY(-4px);
}
.meeting-arr-ghost-icon {
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(228, 179, 99, .2);
  color: var(--bordeaux);
  display: grid; place-items: center;
}
.meeting-arr-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bordeaux);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  margin-top: auto;
  transition: gap .2s, color .2s;
}
.meeting-arr-link:hover { gap: 10px; color: var(--bordeaux-deep); }

/* ----- Catering ----- */
.meeting-catering { background: var(--paper); }
.meeting-catering-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .meeting-catering-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: stretch;
  }
}
.meeting-catering-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 32px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 30px 60px -30px rgba(30, 20, 10, .35);
}
.meeting-catering-img {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .08) 0%, rgba(20, 12, 6, .3) 100%),
    url("../images/gallery/middagbijons_2.jpg");
  background-size: cover;
  background-position: center;
}
.meeting-catering-tag {
  position: absolute;
  top: 24px; left: 24px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(245, 239, 230, .88);
  color: var(--bordeaux);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px -4px rgba(30, 20, 10, .25);
}

.meeting-catering-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 36px 32px;
  align-self: center;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
@media (min-width: 1024px) {
  .meeting-catering-card { padding: 48px 44px; }
}
.meeting-catering-p {
  font-size: 15.5px; line-height: 1.7;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.meeting-catering-badges {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 24px;
}
.meeting-catering-badges span {
  padding: 7px 14px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* ----- Meer doen ----- */
.meeting-more { background: var(--cream-warm); }
.meeting-more-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .meeting-more-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .meeting-more-grid { grid-template-columns: repeat(4, 1fr); } }

.meeting-more-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 24px;
  padding: 24px 22px;
  display: flex; flex-direction: column; gap: 10px;
  transition: transform .3s ease, box-shadow .3s ease;
}
.meeting-more-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -16px rgba(30, 20, 10, .2);
}
.meeting-more-card svg {
  color: var(--honey);
  padding: 10px;
  background: rgba(228, 179, 99, .14);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
}
.meeting-more-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.meeting-more-card p {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ----- Waarom kiezen (donker vlak) ----- */
.meeting-why { background: var(--paper); }
.meeting-why-card {
  background:
    radial-gradient(500px 400px at 20% 0%, rgba(228, 179, 99, .22), transparent 60%),
    linear-gradient(160deg, #1a100a 0%, #3d2b1f 60%, #5a3d2a 100%);
  color: var(--cream);
  border-radius: 32px;
  padding: 44px 36px;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  box-shadow: 0 30px 60px -30px rgba(10, 6, 3, .5);
}
@media (min-width: 1024px) {
  .meeting-why-card {
    grid-template-columns: 1fr 1.4fr;
    padding: 64px 56px;
    gap: 72px;
    align-items: center;
  }
}
/* Em-woord "karakter" → honey op de donkere card (ipv bordeaux) */
.meeting-why-card .sec-title em { color: var(--honey-soft); }

.meeting-why-list {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .meeting-why-list { grid-template-columns: 1fr 1fr; gap: 32px 28px; } }
.meeting-why-item {
  display: flex; gap: 14px; align-items: flex-start;
}
.meeting-why-icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: rgba(228, 179, 99, .14);
  color: var(--honey);
  display: grid; place-items: center;
  margin-top: 2px;
}
.meeting-why-item h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 5px;
}
.meeting-why-item p {
  font-size: 13.5px; line-height: 1.55;
  color: rgba(245, 239, 230, .72);
  margin: 0;
}

/* ----- Contact Arina ----- */
.meeting-contact { background: var(--cream-warm); }
.meeting-contact-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 40px 32px;
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .3),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}
@media (min-width: 768px) {
  .meeting-contact-card {
    grid-template-columns: auto 1fr;
    padding: 52px 52px;
    gap: 44px;
  }
}
.meeting-contact-avatar {
  width: clamp(96px, 13vw, 144px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  justify-self: center;
}
.meeting-contact-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 14px 18px rgba(61, 43, 31, .18));
}
.meeting-contact-p {
  font-size: 15.5px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 14px 0 22px;
  max-width: 560px;
}
.meeting-contact-actions {
  display: flex; flex-wrap: wrap;
  align-items: center; gap: 16px;
}
.meeting-contact-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px;
  background: var(--bordeaux);
  color: var(--cream);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
  transition: background .2s, transform .2s, box-shadow .2s;
}
.meeting-contact-cta:hover {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(61, 43, 31, .7);
}

/* Tweede route naast de wizard: een aanvraag per mail. De kaart eromheen is
   crème, dus deze variant tekent zich af met een bordeaux rand. */
.meeting-contact-cta--ghost {
  background: transparent;
  color: var(--bordeaux);
  border: 1px solid rgba(90, 26, 43, .3);
  box-shadow: none;
}
.meeting-contact-cta--ghost:hover {
  background: rgba(90, 26, 43, .06);
  border-color: rgba(90, 26, 43, .55);
  color: var(--bordeaux-deep);
}
.meeting-contact-alt {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: gap .2s, color .2s;
}
.meeting-contact-alt:hover { gap: 10px; color: var(--bordeaux-deep); }

/* ----- Mobile responsive refinements -----
   Hero-maatvoering en sectiepadding komen uit de tokens; hier staan alleen
   nog aanpassingen die echt aan deze pagina hangen. */
@media (max-width: 767px) {
  .meeting-hero {
    min-height: calc(100svh - 24px);
    border-radius: 24px;
  }
  .meeting-booking { padding: 22px; border-radius: 24px; }
  .meeting-booking-title { font-size: 19px; }
  .meeting-why-card { padding: 36px 28px; }
  .meeting-contact-card { padding: 34px 24px; }
  .meeting-contact-avatar { width: 104px; }
  .meeting-intro-features { grid-template-columns: 1fr; }
}

/* =========================================================================
   ALCOHOLVRIJ PAGE
   ========================================================================= */

/* ----- Hero ----- */
.alcohol-hero {
  position: relative;
  color: var(--cream);
  overflow: hidden;
  background: #2e1a0f;
  box-shadow:
    0 40px 80px -40px rgba(30, 20, 10, .45),
    0 10px 30px -15px rgba(30, 20, 10, .25);
}
.alcohol-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(120deg, rgba(20, 12, 6, .75) 0%, rgba(20, 12, 6, .45) 55%, rgba(20, 12, 6, .25) 100%),
    url("../images/hero/alcoholvrij_firma_bruis.jpg");
  background-size: cover;
  background-position: center;
}
.alcohol-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(70% 90% at 20% 40%, rgba(20, 12, 6, .45), transparent 75%),
    linear-gradient(180deg, rgba(20, 12, 6, .32) 0%, transparent 30%, transparent 55%, rgba(20, 12, 6, .55) 100%);
}

/* ----- Intro ----- */
.alcohol-intro { background: var(--paper); }

/* Tweede tussenkop binnen de introductiekaart: de aangeleverde tekst bestaat
   uit twee blokken onder één sectiekop. */
.alcohol-intro-subtitle {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 21px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--bordeaux-deep);
  margin: 28px 0 0;
}
.alcohol-intro-cta { margin-top: 28px; }
.alcohol-intro-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .alcohol-intro-grid {
    grid-template-columns: 1.15fr 1fr;
    gap: 56px;
    align-items: center;
  }
}
.alcohol-intro-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 36px 32px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
@media (min-width: 1024px) { .alcohol-intro-card { padding: 48px 44px; } }

.alcohol-intro-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 32px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 30px 60px -30px rgba(30, 20, 10, .35);
}
.alcohol-intro-visual-img {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .05) 0%, rgba(20, 12, 6, .4) 100%),
    url("../images/wijnen/wijn_betuwsebruis.jpg");
  background-size: cover;
  background-position: center;
}
.alcohol-intro-visual-cap {
  position: absolute; bottom: 24px; left: 24px;
  display: flex; flex-direction: column; gap: 3px;
  color: var(--cream);
}
.alcohol-intro-visual-k {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 20px;
  font-weight: 500;
}
.alcohol-intro-visual-v {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .75);
}

/* ----- Betuwse Bruis: twee flessen ----- */
.alcohol-bruis { background: var(--cream-warm); }
.alcohol-bottles-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .alcohol-bottles-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}

.alcohol-bottle-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 40px 32px 36px;
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 24px;
  align-items: center;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
  transition: transform .3s ease, box-shadow .3s ease;
}
.alcohol-bottle-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 32px 70px -28px rgba(30, 20, 10, .32),
    0 12px 24px -10px rgba(30, 20, 10, .15);
}
@media (max-width: 640px) {
  .alcohol-bottle-card { grid-template-columns: 54px 1fr; padding: 28px 22px; gap: 16px; }
}

/* Vrijstaande productfoto's met transparante achtergrond; de slagschaduw zet
   ze op de crème kaart neer zonder dat er een vlak omheen hoeft.
   Begrensd op hoogte en niet op breedte: een fles is smal en hoog, dus op
   volle kolombreedte stak hij boven en onder de kaart uit. */
/* De hoogte staat in pixels op de foto zelf, niet als percentage van de
   houder. Met `height: 100%` klopte het zolang de foto nog laadde, maar zodra
   hij binnen was viel de hoogte terug op de natuurlijke 900 pixels en stak de
   fles ver buiten de kaart. Eén variabele per breekpunt houdt de maat op één
   plek. Ook geen max-width: die klemt de breedte van een vervangen element en
   duwt de hoogte dan alsnog mee. */
.alcohol-bottle-photo {
  --fles-hoogte: 170px;
  display: grid;
  place-items: center;
  height: var(--fles-hoogte);
}
.alcohol-bottle-photo img {
  display: block;
  height: var(--fles-hoogte);
  width: auto;
  filter: drop-shadow(0 14px 20px rgba(30, 20, 10, .28));
}
@media (max-width: 640px) {
  .alcohol-bottle-photo { --fles-hoogte: 130px; }
}

.alcohol-bottle-body { min-width: 0; }
.alcohol-bottle-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--honey);
  font-weight: 600;
  margin-bottom: 8px;
}
.alcohol-bottle-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.alcohol-bottle-title em { color: var(--bordeaux); font-style: italic; }
.alcohol-bottle-desc {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.alcohol-bottle-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 14px;
}
.alcohol-bottle-tags span {
  padding: 5px 10px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ----- Botanicals (HopHout/VeldFlora/Verjus) ----- */
.alcohol-botanicals { background: var(--paper); }
.alcohol-botanicals-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .alcohol-botanicals-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

/* De fles staat boven de tekst in plaats van een lijnicoon. Vaste hoogte,
   zodat de drie kaarten hun titels op dezelfde lijn houden. */
/* De fles staat op een eigen vlak bovenin de kaart in plaats van los in de
   witruimte te zweven. Het vlak loopt door tot de kaartrand, vandaar de
   negatieve marges: die zijn precies de horizontale padding van de kaart.

   De hoogte staat in pixels op de foto zelf en niet als percentage van de
   houder. Met `height: 100%` klopte het zolang de foto nog laadde, maar zodra
   hij binnen was viel de hoogte terug op de natuurlijke 900 pixels en stak de
   fles ver buiten de kaart. */
.alcohol-bot-card { padding-top: 0; overflow: hidden; }
.alcohol-bot-card .alcohol-bot-photo {
  --fles-hoogte: 190px;
  display: grid;
  place-items: center;
  margin: 0 -28px 6px;
  padding: 28px 0 24px;
  background:
    radial-gradient(120% 85% at 50% 12%, rgba(228, 179, 99, .22), transparent 70%),
    linear-gradient(180deg, var(--cream-warm) 0%, var(--cream) 100%);
  border-bottom: 1px solid rgba(139, 90, 43, .1);
}
.alcohol-bot-card .alcohol-bot-photo img {
  display: block;
  height: var(--fles-hoogte);
  width: auto;
  filter: drop-shadow(0 16px 22px rgba(30, 20, 10, .3));
}
@media (max-width: 767px) {
  .alcohol-bot-card .alcohol-bot-photo {
    --fles-hoogte: 165px;
    margin: 0 -28px 6px;
    padding: 24px 0 20px;
  }
}

/* ----- Featured product (pakket) ----- */
.alcohol-featured { background: var(--cream-warm); }
.alcohol-package-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow:
    0 32px 80px -28px rgba(30, 20, 10, .35),
    0 12px 24px -10px rgba(30, 20, 10, .15);
}
@media (min-width: 1024px) {
  .alcohol-package-card { grid-template-columns: 1.1fr 1fr; }
}

.alcohol-package-visual {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  min-height: 280px;
}
@media (min-width: 1024px) { .alcohol-package-visual { aspect-ratio: auto; min-height: 100%; } }
.alcohol-package-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.alcohol-package-badge {
  position: absolute;
  top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(245, 239, 230, .92);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -6px rgba(30, 20, 10, .3);
}
.alcohol-package-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 10px rgba(228, 179, 99, .7);
}
.alcohol-package-badge-k {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.alcohol-package-badge-v {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--bordeaux);
  line-height: 1;
}

.alcohol-package-body {
  padding: 36px 32px;
  display: flex; flex-direction: column; gap: 24px;
}
@media (min-width: 1024px) { .alcohol-package-body { padding: 52px 48px; } }

.alcohol-package-body .product-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 600;
  margin-bottom: 12px;
  display: inline-block;
}

.alcohol-package-desc {
  font-size: 15.5px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}
.alcohol-package-list {
  list-style: none; padding: 0;
  margin: 0;
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 20px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.alcohol-package-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px; line-height: 1.45;
  color: var(--ink);
  font-weight: 500;
}
.alcohol-package-list li svg {
  width: 24px; height: 24px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(228, 179, 99, .22);
  color: var(--bordeaux);
  flex-shrink: 0;
}

.alcohol-package-footer {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.alcohol-package-price { display: flex; flex-direction: column; gap: 2px; }
.alcohol-package-price-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.alcohol-package-price-value {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--bordeaux);
  letter-spacing: -0.02em;
}
.alcohol-package-price-value small {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0;
}
.alcohol-package-price-strike {
  font-size: 13px;
  color: var(--muted);
  text-decoration: line-through;
  margin-top: 4px;
}
.alcohol-package-cta {
  background: var(--honey) !important;
  color: var(--bordeaux) !important;
  border: 0;
  cursor: pointer;
  padding: 14px 22px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 22px -10px rgba(228, 179, 99, .55);
}
.alcohol-package-cta:hover { background: var(--honey-soft) !important; }

/* ----- Linge lijn mini cards ----- */
.alcohol-linge { background: var(--paper); }
.alcohol-story-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; }
.alcohol-story-copy { max-width: 590px; }
.alcohol-story-visual { position: relative; min-height: 360px; margin: 0; overflow: hidden; border-radius: 26px; background: var(--cream-warm); box-shadow: 0 22px 50px rgba(46,26,15,.13); }
.alcohol-story-visual img { width: 100%; height: 100%; min-height: 360px; object-fit: cover; display: block; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.alcohol-story-visual:hover img { transform: scale(1.025); }
.alcohol-story-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, rgba(18,10,5,.48) 100%); }
.alcohol-story-visual figcaption { position: absolute; z-index: 1; right: 1.25rem; bottom: 1.1rem; left: 1.25rem; color: var(--cream); font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.alcohol-story-cta { display: inline-flex; margin-top: 1.75rem; }
@media (min-width: 900px) {
  .alcohol-story-split { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); gap: clamp(3rem, 6vw, 6rem); }
  .alcohol-story-split--reverse { grid-template-columns: minmax(0, .88fr) minmax(420px, 1.12fr); }
  .alcohol-story-visual { min-height: 500px; }
  .alcohol-story-split--reverse .alcohol-story-visual { min-height: 430px; }
  .alcohol-story-visual img { min-height: inherit; }
}
@media (max-width: 899px) { .alcohol-story-visual { order: 2; } }
.alcohol-linge-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .alcohol-linge-grid { grid-template-columns: repeat(3, 1fr); } }

.alcohol-linge-card {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 24px;
  padding: 26px 24px;
  display: flex; flex-direction: column; gap: 12px;
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.alcohol-linge-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px -18px rgba(30, 20, 10, .25);
}
.alcohol-linge-swatch {
  width: 100%; height: 80px;
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}
.alcohol-linge-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.alcohol-linge-card p {
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

/* ----- Bestellen & ophalen ----- */
.alcohol-order { background: var(--cream-warm); }
.alcohol-order-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .alcohol-order-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }

.alcohol-order-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 28px;
  padding: 34px 28px 30px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow:
    0 20px 50px -30px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
.alcohol-order-icon {
  width: 50px; height: 50px;
  border-radius: 16px;
  background: rgba(228, 179, 99, .2);
  color: var(--bordeaux);
  display: grid; place-items: center;
}
.alcohol-order-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.alcohol-order-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.alcohol-order-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.alcohol-order-list li {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(139, 90, 43, .14);
  font-size: 13.5px;
}
.alcohol-order-list li:last-child { border-bottom: 0; }
.alcohol-order-list b { font-family: 'Fraunces', serif; font-weight: 500; color: var(--ink); }
.alcohol-order-list span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.alcohol-order-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bordeaux);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  margin-top: auto;
  transition: gap .2s, color .2s;
}
.alcohol-order-link:hover { gap: 10px; color: var(--bordeaux-deep); }

/* ----- Contact CTA ----- */
.alcohol-contact-cta { background: var(--paper); }
/* Em-woord → honey op de donkere card (anders valt bordeaux weg) */
.alcohol-contact-card .sec-title em { color: var(--honey-soft); }
/* Donkergroen in plaats van bruin, op verzoek van de opdrachtgever. Dezelfde
   kleuren als het vergaderblok op de homepage en de uitnodiging op
   /onze-filosofie, zodat alle afsluitende blokken op de site één kleur spreken.
   Dit blok staat op /wijn, /alcoholvrij, /educatie en /culinair. */
.alcohol-contact-card {
  background:
    radial-gradient(500px 400px at 20% 0%, rgba(228, 179, 99, .22), transparent 60%),
    linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 55%, var(--forest-soft) 100%);
  color: var(--cream);
  border-radius: 32px;
  padding: 42px 32px;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow: 0 30px 60px -30px rgba(10, 6, 3, .5);
}
@media (min-width: 1024px) {
  .alcohol-contact-card {
    grid-template-columns: 1.3fr 1fr;
    padding: 56px 52px;
    gap: 48px;
  }
}
.alcohol-contact-p {
  font-size: 14.5px; line-height: 1.6;
  color: rgba(245, 239, 230, .78);
  margin: 14px 0 0;
  max-width: 480px;
}
.alcohol-contact-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
}
/* Telefoonnummer en mailadres stonden als knoplabel te groot naast de kop. */
.alcohol-contact-btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 19px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s, color .2s;
}
.alcohol-contact-btn--primary {
  background: var(--honey);
  color: var(--bordeaux);
  box-shadow: 0 10px 22px -10px rgba(228, 179, 99, .55);
}
.alcohol-contact-btn--primary:hover {
  background: var(--honey-soft);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(228, 179, 99, .7);
}
.alcohol-contact-btn--ghost {
  background: transparent;
  color: var(--cream);
  border: 1px solid rgba(245, 239, 230, .3);
}
.alcohol-contact-btn--ghost:hover {
  background: rgba(245, 239, 230, .08);
  border-color: rgba(245, 239, 230, .55);
}

/* ----- Mobile refinements ----- */
@media (max-width: 767px) {
  .alcohol-hero { min-height: calc(100svh - 24px); border-radius: 24px; }
  .alcohol-package-body { padding: 28px 22px; gap: 18px; }
  .alcohol-package-price-value { font-size: 30px; }
  .alcohol-bottle-title { font-size: 22px; }
  .alcohol-contact-card { padding: 32px 24px; }
}

/* =========================================================================
   CONTACT PAGE
   ========================================================================= */
.contact-page {
  position: relative;
  overflow: hidden;
  background: var(--cream-warm);
  padding: var(--page-head-pt) var(--section-px) var(--page-head-pb);
  min-height: 100vh;
}

.contact-page-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* Head */
.contact-head {
  max-width: 760px;
  margin-bottom: 40px;
}
.contact-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.contact-title em { color: var(--bordeaux); font-style: italic; }
.contact-lede {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 580px;
}

/* Quick contact row (3 cards) */
.contact-quick {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin-bottom: 32px;
}
@media (min-width: 768px) { .contact-quick { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.contact-quick-card {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 22px;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  box-shadow:
    0 14px 32px -22px rgba(30, 20, 10, .2),
    0 4px 10px -6px rgba(30, 20, 10, .08);
  transition: transform .25s ease, box-shadow .25s ease, border-color .2s;
}
.contact-quick-card:hover {
  transform: translateY(-3px);
  border-color: rgba(228, 179, 99, .45);
  box-shadow:
    0 20px 40px -20px rgba(30, 20, 10, .28),
    0 8px 16px -6px rgba(30, 20, 10, .14);
}
.contact-quick-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: rgba(228, 179, 99, .2);
  color: var(--bordeaux);
  display: grid; place-items: center;
}
.contact-quick-body {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
  flex: 1;
}
.contact-quick-k {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.contact-quick-v {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-quick-arrow {
  color: var(--walnut);
  transition: transform .2s;
  flex-shrink: 0;
}
.contact-quick-card:hover .contact-quick-arrow { transform: translate(2px, -2px); color: var(--bordeaux); }

/* Grid: form + side */
.contact-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .contact-grid {
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
    gap: 32px;
    align-items: stretch;
  }
}

/* Side column */
.contact-side {
  display: flex; flex-direction: column; gap: 18px;
}
.contact-side-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 24px;
  padding: 28px;
  box-shadow:
    0 20px 50px -30px rgba(30, 20, 10, .22),
    0 6px 14px -10px rgba(30, 20, 10, .1);
}
@media (min-width: 1024px) { .contact-side-card { padding: 32px; } }

.contact-side-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 4px 0 10px;
}
.contact-side-p {
  font-size: 13.5px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.contact-side-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bordeaux);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  transition: gap .2s, color .2s;
}
.contact-side-link:hover { gap: 10px; color: var(--bordeaux-deep); }

/* Donker contactpaneel op de contactpagina */
.contact-side-card--dark {
  background:
    radial-gradient(400px 300px at 0% 0%, rgba(228, 179, 99, .22), transparent 60%),
    linear-gradient(160deg, #1a100a 0%, #3d2b1f 60%, #5a3d2a 100%);
  color: var(--cream);
  border-color: transparent;
}
.contact-side-card--dark .sec-eyebrow { color: var(--honey-soft); }
.contact-side-card--dark .sec-eyebrow::before { background: var(--honey-soft); }
.contact-side-card--dark .contact-side-title { color: var(--cream); }
.contact-side-card--dark .contact-side-p { color: rgba(245, 239, 230, .72); }

/* ----- Contactlijst -----
   Dezelfde rijen op de homepage en de contactpagina: pictogram, het nummer of
   adres, en daaronder wie je spreekt. Losse pillen in wisselende breedtes
   maakten dit blok eerder onrustig; vaste rijen lijnen wél uit. */
.contact-people {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}
.contact-person {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 10px;
  margin-inline: -10px;
  border-top: 1px solid var(--cp-line);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease;
}
.contact-people li:first-child .contact-person { border-top: 0; }
.contact-person:hover { background: var(--cp-hover); }
.contact-person-icon {
  width: 38px; height: 38px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--cp-icon-bg);
  color: var(--cp-icon);
}
.contact-person-label {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--cp-label);
  overflow-wrap: anywhere;
}
.contact-person-role {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--cp-role);
}
.contact-person-arrow { color: var(--cp-role); flex-shrink: 0; }

.contact-people--light {
  --cp-line: rgba(26, 20, 16, .1);
  --cp-hover: rgba(228, 179, 99, .12);
  --cp-icon-bg: rgba(228, 179, 99, .2);
  --cp-icon: var(--bordeaux);
  --cp-label: var(--ink);
  --cp-role: var(--muted);
}
.contact-people--dark {
  --cp-line: rgba(245, 239, 230, .14);
  --cp-hover: rgba(245, 239, 230, .07);
  --cp-icon-bg: rgba(228, 179, 99, .16);
  --cp-icon: var(--honey);
  --cp-label: var(--cream);
  --cp-role: rgba(245, 239, 230, .62);
}

@media (max-width: 420px) {
  .contact-person { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
  .contact-person-icon { width: 34px; height: 34px; }
  .contact-person-arrow { display: none; }
  .contact-person-label { font-size: 16px; }
}

/* Kaart in de linkerkolom. Hij loopt door tot onderaan de kolom, zodat hij
   even hoog eindigt als de stapel kaarten ernaast. */
.contact-map-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.contact-map-box {
  position: relative;
  flex: 1 1 auto;
  border-radius: 32px;
  overflow: hidden;
  min-height: 440px;
  background: var(--cream-warm);
  border: 1px solid rgba(139, 90, 43, .1);
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .25),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}
.contact-map-note {
  margin: 0;
  padding-left: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
}

/* Mobile refinements */
@media (max-width: 767px) {
  .contact-head { margin-bottom: 28px; }
  .contact-quick-card { padding: 16px 18px; }
  .contact-quick-icon { width: 42px; height: 42px; }
  .contact-quick-v { font-size: 14px; }
  .contact-side-card { padding: 24px 22px; }
  .contact-map-box { min-height: 340px; }
}

/* =========================================================================
   WIJN PAGE
   ========================================================================= */

/* ----- Hero ----- */
.wijn-hero {
  position: relative;
  color: var(--cream);
  overflow: hidden;
  background: #2e1a0f;
  box-shadow:
    0 40px 80px -40px rgba(30, 20, 10, .45),
    0 10px 30px -15px rgba(30, 20, 10, .25);
}
.wijn-hero-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(120deg, rgba(20, 12, 6, .82) 0%, rgba(20, 12, 6, .5) 55%, rgba(20, 12, 6, .25) 100%),
    url("../images/hero/wijn_hero.jpg");
  background-size: cover;
  background-position: center;
  filter: saturate(1.08);
}
.wijn-hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(65% 85% at 20% 50%, rgba(20, 12, 6, .5), transparent 75%),
    linear-gradient(180deg, rgba(20, 12, 6, .32) 0%, transparent 30%, transparent 60%, rgba(20, 12, 6, .55) 100%);
}
/* ----- Intro ----- */
.wijn-intro { background: var(--paper); }
.wijn-intro-grid {
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .wijn-intro-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
    align-items: center;
  }
}

.wijn-intro-visual {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 32px;
  overflow: hidden;
  margin: 0;
  box-shadow: 0 30px 60px -30px rgba(30, 20, 10, .35);
}
.wijn-intro-visual-img {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, rgba(20, 12, 6, .05) 0%, rgba(20, 12, 6, .4) 100%),
    url("../images/oogst/kist-op-de-kar.jpg");
  background-size: cover;
  background-position: center;
}
.wijn-intro-visual-cap {
  position: absolute; bottom: 24px; left: 24px;
  display: flex; flex-direction: column; gap: 3px;
  color: var(--cream);
}
.wijn-intro-visual-k {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 20px; font-weight: 500;
}
.wijn-intro-visual-v {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 239, 230, .75);
}

.wijn-intro-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 36px 32px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
@media (min-width: 1024px) { .wijn-intro-card { padding: 48px 44px; } }

.wijn-intro-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.wijn-intro-highlights > div {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.wijn-intro-highlights svg { color: var(--walnut); flex-shrink: 0; }

@media (max-width: 640px) {
  .wijn-intro-highlights { grid-template-columns: 1fr; }
}

/* ----- Assortiment grid ----- */
.wijn-assortiment { background: var(--cream-warm); }

/* Ruimte onder de kop en rond de melding staat hier en niet als Tailwind-klasse
   in de view: tailwind.min.css is een vooraf gebouwd bestand, dus een klasse die
   daar niet in zit (mb-10 bijvoorbeeld) levert stilzwijgend geen marge op. */
.wijn-assortiment-head { margin-bottom: 44px; }

/* Rechterkolom van de assortimentskop: de inleiding met daaronder de
   doorverwijzing naar de alcoholvrije lijn. */
.wijn-assortiment-aside {
  flex: 1 1 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.wijn-assortiment-aside .sec-lede { margin: 0; }

/* Tijdelijke melding zolang niet alle productinformatie op de pagina staat. */
.wijn-assortiment-note {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 48px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--paper);
  border: 1px solid rgba(228, 179, 99, .45);
  box-shadow: 0 8px 24px -20px rgba(30, 20, 10, .3);
}
.wijn-assortiment-note svg { color: var(--walnut); flex-shrink: 0; margin-top: 2px; }
.wijn-assortiment-note p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 68ch;
}
@media (max-width: 767px) {
  .wijn-assortiment-head { margin-bottom: 32px; }
  .wijn-assortiment-note {
    gap: 13px;
    margin-bottom: 36px;
    padding: 18px 20px;
  }
  .wijn-assortiment-note p { font-size: 14.5px; }
}
.wijn-assortiment-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;   /* centreert de laatste (incomplete) rij */
  gap: 20px;
}
.wijn-assortiment-grid > .wijn-bottle { flex: 0 1 100%; }
@media (min-width: 640px)  { .wijn-assortiment-grid > .wijn-bottle { flex-basis: calc((100% - 20px) / 2); } }
@media (min-width: 1024px) {
  .wijn-assortiment-grid { gap: 24px; }
  .wijn-assortiment-grid > .wijn-bottle { flex-basis: calc((100% - 3 * 24px) / 4); }
}

.wijn-bottle {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 24px;
  padding: 22px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow:
    0 16px 40px -24px rgba(30, 20, 10, .2),
    0 6px 14px -10px rgba(30, 20, 10, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.wijn-bottle:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 50px -24px rgba(30, 20, 10, .3),
    0 10px 22px -8px rgba(30, 20, 10, .15);
}
.wijn-bottle-swatch {
  position: relative;
  display: block;
  height: 280px;
  border-radius: 16px;
  background-color: #ece2d1;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(139, 90, 43, .08);
}
.wijn-bottle-badge {
  position: absolute;
  top: 10px; right: 10px;
  padding: 3px 8px;
  background: rgba(245, 239, 230, .92);
  color: var(--bordeaux);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  backdrop-filter: blur(4px);
}
.wijn-bottle-kind {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--honey);
  font-weight: 600;
  margin-bottom: 6px;
}
.wijn-bottle h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 8px;
}
.wijn-bottle p {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.wijn-bottle-link { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; color: var(--oak); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-decoration: none; }
.wijn-bottle-link:hover { color: var(--bordeaux-deep); text-decoration: underline; text-underline-offset: 3px; }

/* De knop "Vraag productfiche" hangt onderaan de tegel, ook bij een tegel
   zonder omschrijving. Zonder dit schuift hij bij een lege tegel omhoog tot
   vlak onder de titel, terwijl de tegels ernaast even hoog blijven. */
.wijn-bottle-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.wijn-bottle-link {
  margin-top: auto;      /* duwt de knop naar de onderkant */
  padding-top: 1rem;     /* houdt de tussenruimte die margin-top eerst gaf */
  align-self: flex-start; /* knop blijft zo breed als zijn tekst */
}

/* ----- Proefbox featured ----- */
.wijn-proefbox { background: var(--paper); }
.wijn-proefbox-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow:
    0 32px 80px -28px rgba(30, 20, 10, .35),
    0 12px 24px -10px rgba(30, 20, 10, .15);
}
@media (min-width: 1024px) {
  .wijn-proefbox-card { grid-template-columns: 1.1fr 1fr; }
}

.wijn-proefbox-visual {
  position: relative;
  aspect-ratio: 4/3;
  min-height: 300px;
  overflow: hidden;
}
@media (min-width: 1024px) { .wijn-proefbox-visual { aspect-ratio: auto; min-height: 100%; } }
.wijn-proefbox-visual img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wijn-proefbox-badge {
  position: absolute;
  top: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(245, 239, 230, .92);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 6px 18px -6px rgba(30, 20, 10, .3);
}
.wijn-proefbox-badge-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 10px rgba(228, 179, 99, .7);
}
.wijn-proefbox-badge-k {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.wijn-proefbox-badge-v {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--bordeaux);
  line-height: 1;
}
.wijn-proefbox-medal {
  position: absolute;
  bottom: 20px; left: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  background: var(--honey);
  color: var(--bordeaux);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -6px rgba(228, 179, 99, .6);
}

.wijn-proefbox-body {
  padding: 34px 28px;
  display: flex; flex-direction: column; gap: 22px;
}
@media (min-width: 1024px) { .wijn-proefbox-body { padding: 48px 44px; } }

.wijn-proefbox-body .product-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 600;
  margin-bottom: 12px;
  display: inline-block;
}
.wijn-proefbox-desc {
  font-size: 15.5px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

.wijn-proefbox-list {
  padding: 18px 20px;
  background: rgba(228, 179, 99, .1);
  border-radius: 18px;
  border: 1px solid rgba(228, 179, 99, .22);
}
.wijn-proefbox-list-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 600;
  margin-bottom: 10px;
}
.wijn-proefbox-list ul {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
@media (min-width: 640px) { .wijn-proefbox-list ul { grid-template-columns: 1fr 1fr; gap: 8px 16px; } }
.wijn-proefbox-list li {
  display: flex; align-items: center; gap: 10px;
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
}
.wijn-proefbox-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(139, 90, 43, .25);
}

.wijn-proefbox-footer {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.wijn-proefbox-price { display: flex; flex-direction: column; gap: 2px; }
.wijn-proefbox-price-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.wijn-proefbox-price-value {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 38px;
  line-height: 1;
  color: var(--bordeaux);
  letter-spacing: -0.02em;
}
.wijn-proefbox-price-value small {
  font-size: 18px;
  font-weight: 400;
}
.wijn-proefbox-cta {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  background: var(--bordeaux);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.wijn-proefbox-cta:hover {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(61, 43, 31, .7);
}
.wijn-proefbox-cta svg { transition: transform .2s; }
.wijn-proefbox-cta:hover svg { transform: translate(2px, -2px); }

/* ----- Order (hergebruik alcohol patroon, lichtere variant) ----- */
.wijn-order { background: var(--cream-warm); }
.wijn-order-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .wijn-order-grid { grid-template-columns: 1fr 1fr; gap: 28px; } }

.wijn-order-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 28px;
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 20px;
  box-shadow:
    0 20px 50px -30px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
.wijn-order-icon {
  width: 50px; height: 50px;
  border-radius: 16px;
  background: rgba(228, 179, 99, .2);
  color: var(--bordeaux);
  display: grid; place-items: center;
}
.wijn-order-body {
  display: flex; flex-direction: column; gap: 12px;
  flex: 1;
}
.wijn-order-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.wijn-order-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.wijn-order-list {
  list-style: none; padding: 0; margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.wijn-order-list li {
  display: flex; justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(139, 90, 43, .14);
  font-size: 13.5px;
}
.wijn-order-list li:last-child { border-bottom: 0; }
.wijn-order-list b { font-family: 'Fraunces', serif; font-weight: 500; color: var(--ink); }
.wijn-order-list span { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.wijn-order-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bordeaux);
  font-weight: 600;
  font-size: 13.5px;
  text-decoration: none;
  margin-top: auto;
  transition: gap .2s, color .2s;
}
.wijn-order-link:hover { gap: 10px; color: var(--bordeaux-deep); }

/* ----- Verkooppunten ----- */
.wijn-retail { background: var(--paper); }
.wijn-retail-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 40px 32px;
  display: grid;
  gap: 32px;
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .22),
    0 8px 18px -10px rgba(30, 20, 10, .1);
}
@media (min-width: 1024px) {
  .wijn-retail-card {
    grid-template-columns: 1.2fr 1fr;
    padding: 56px 52px;
    gap: 56px;
  }
}

.wijn-retail-p {
  font-size: 15px; line-height: 1.65;
  color: var(--ink-soft);
  margin: 16px 0 22px;
  max-width: 520px;
}
.wijn-retail-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--bordeaux);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: gap .2s, color .2s;
}
.wijn-retail-link:hover { gap: 10px; color: var(--bordeaux-deep); }

.wijn-retail-right {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wijn-retail-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
.wijn-retail-chip svg { color: var(--walnut); }

/* ----- Mobile refinements ----- */
@media (max-width: 767px) {
  .wijn-hero { min-height: calc(100svh - 24px); border-radius: 24px; }
  .wijn-proefbox-body { padding: 28px 22px; gap: 18px; }
  .wijn-proefbox-price-value { font-size: 32px; }
  .wijn-retail-card { padding: 32px 24px; }
  .wijn-order-card { padding: 26px 22px; }
  .wijn-bottle { padding: 18px; }
  .wijn-bottle-swatch { height: 240px; }
}

/* =========================================================================
   AGENDA PAGE
   ========================================================================= */

.agenda-page {
  position: relative;
  overflow: hidden;
  background: var(--cream-warm);
  padding: var(--page-head-pt) var(--section-px) var(--page-head-pb);
  min-height: 100vh;
}

.agenda-page-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ----- Head ----- */
.agenda-head {
  max-width: 760px;
  margin-bottom: 40px;
}
.agenda-head-top { margin-bottom: 18px; }
.agenda-today-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 14px;
  background: var(--cream);
  border: 1px solid rgba(228, 179, 99, .35);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  box-shadow: 0 6px 14px -8px rgba(30, 20, 10, .15);
}
.agenda-today-pill > span:first-child + span {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--bordeaux);
  font-size: 10.5px;
}
.agenda-today-pill b {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  color: var(--ink);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.agenda-today-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 0 rgba(228, 179, 99, .7);
  animation: todayPulse 2.2s ease-out infinite;
}

.agenda-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
}
.agenda-title em { color: var(--bordeaux); font-style: italic; }
.agenda-lede {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 600px;
}

/* ----- Main grid ----- */
.agenda-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr);
  margin-bottom: 64px;
}
.agenda-calendar-card,
.agenda-side { min-width: 0; }
@media (min-width: 1024px) {
  .agenda-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 1fr);
    gap: 28px;
    align-items: start;
  }
}

/* ----- Calendar card ----- */
.agenda-calendar-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 32px;
  padding: 28px 24px;
  box-shadow:
    0 24px 60px -28px rgba(30, 20, 10, .3),
    0 8px 18px -10px rgba(30, 20, 10, .14);
}
@media (min-width: 768px) { .agenda-calendar-card { padding: 36px 32px; } }

.agenda-cal-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.agenda-cal-month {
  display: flex; flex-direction: column; gap: 4px;
}
.agenda-cal-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}
.agenda-cal-month h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-transform: capitalize;
}

.agenda-cal-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 4px;
  background: rgba(139, 90, 43, .06);
  border-radius: 999px;
}
.agenda-cal-btn {
  width: 34px; height: 34px;
  border-radius: 999px;
  border: 0; background: transparent;
  color: var(--bordeaux);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.agenda-cal-btn:hover { background: rgba(228, 179, 99, .2); transform: scale(1.04); }
.agenda-cal-btn:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .35);
}
.agenda-cal-today {
  padding: 8px 14px;
  border-radius: 999px;
  border: 0; background: var(--bordeaux);
  color: var(--cream);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background .2s, transform .2s;
}
.agenda-cal-today:hover { background: var(--bordeaux-deep); transform: translateY(-1px); }
.agenda-cal-today:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .45);
}

.agenda-cal-dows {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 10px;
}
.agenda-cal-dows span {
  text-align: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 0;
}

.agenda-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.agenda-day {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, transform .15s, color .2s;
}
.agenda-day:hover:not(.is-out) {
  background: rgba(228, 179, 99, .14);
  transform: translateY(-1px);
}
.agenda-day:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .38);
  z-index: 2;
}
.agenda-day.is-today:focus-visible {
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .6), 0 6px 16px -8px rgba(61, 43, 31, .55);
}
.agenda-day.is-out {
  color: rgba(26, 20, 16, .28);
  cursor: pointer;
  opacity: .5;
}
.agenda-day.is-out:hover { background: rgba(228, 179, 99, .08); }
.agenda-day.has-events .agenda-day-num {
  font-weight: 600;
}
.agenda-day.is-today {
  color: var(--cream);
  background: var(--bordeaux);
  box-shadow: 0 6px 16px -8px rgba(61, 43, 31, .55);
}
.agenda-day.is-today:hover { background: var(--bordeaux-deep); }
.agenda-day.is-selected:not(.is-today) {
  border-color: var(--honey);
  background: rgba(228, 179, 99, .18);
}
.agenda-day.is-selected.is-today { outline: 2px solid var(--honey); outline-offset: 2px; }

.agenda-day-num { line-height: 1; font-variant-numeric: tabular-nums; }

.agenda-day-dots {
  display: flex;
  gap: 3px;
  height: 6px;
}
.agenda-day-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--walnut);
}
.agenda-day.is-today .agenda-day-dot { background: var(--honey-soft); }
.agenda-day.is-selected:not(.is-today) .agenda-day-dot { background: var(--bordeaux); }

/* Cat colors */
.is-cat-proeverij { --cat-color: #e4b363; }
.is-cat-concert   { --cat-color: #5a1a2b; }
.is-cat-workshop  { --cat-color: #2d3a2a; }
.is-cat-tour      { --cat-color: #8b5a2b; }
.is-cat-feest     { --cat-color: #c4573b; }

.agenda-day-dot.is-cat-proeverij { background: #e4b363; }
.agenda-day-dot.is-cat-concert   { background: #5a1a2b; }
.agenda-day-dot.is-cat-workshop  { background: #2d3a2a; }
.agenda-day-dot.is-cat-tour      { background: #8b5a2b; }
.agenda-day-dot.is-cat-feest     { background: #c4573b; }

/* ----- Filter chips (tevens legenda) ----- */
.agenda-cal-filters {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px 0 18px;
  border-bottom: 1px solid rgba(139, 90, 43, .08);
  margin-bottom: 14px;
}
.agenda-cal-filter {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, .18);
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.agenda-cal-filter:hover {
  border-color: var(--honey);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(228, 179, 99, .4);
}
.agenda-cal-filter:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.agenda-cal-filter.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}
.agenda-cal-filter.is-active:hover { background: var(--bordeaux); }
.agenda-cal-filter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.agenda-cal-filter--all {
  background: transparent;
  border-color: rgba(139, 90, 43, .28);
  padding-left: 12px;
}
.agenda-cal-filter--all svg {
  color: var(--honey);
  flex-shrink: 0;
}
.agenda-cal-filter--all.is-active {
  background: var(--bordeaux);
  color: var(--cream);
}
.agenda-cal-filter--all.is-active svg { color: var(--honey-soft); }

/* Subtiele keyboard-hint onder kalender */
.agenda-cal-hint {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(139, 90, 43, .1);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: 4px;
  flex-wrap: wrap;
}
.agenda-cal-hint kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px;
  padding: 1px 5px;
  background: #fff;
  border: 1px solid rgba(139, 90, 43, .22);
  border-radius: 4px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: var(--walnut);
  box-shadow: 0 1px 0 rgba(139, 90, 43, .14);
}
@media (max-width: 640px) {
  .agenda-cal-hint { display: none; }
}

/* ----- Side / selected day ----- */
.agenda-side { position: sticky; top: 106px; }
@media (max-width: 1023px) { .agenda-side { position: static; } }

.agenda-side-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 28px;
  padding: 28px 24px;
  box-shadow:
    0 20px 50px -30px rgba(30, 20, 10, .25),
    0 8px 18px -10px rgba(30, 20, 10, .12);
}
@media (min-width: 768px) { .agenda-side-card { padding: 32px 28px; } }

.agenda-side-head {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(139, 90, 43, .14);
}
.agenda-side-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordeaux);
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}
.agenda-side-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-transform: capitalize;
}

.agenda-side-empty {
  padding: 24px 10px;
  text-align: center;
  color: var(--muted);
}
.agenda-side-empty svg { color: rgba(139, 90, 43, .32); display: block; margin: 0 auto 14px; }
.agenda-side-empty p {
  font-size: 14px;
  color: var(--ink-soft);
  margin: 0 0 10px;
}
.agenda-side-empty-link {
  font-size: 12.5px;
  color: var(--bordeaux);
  text-decoration: none;
  font-weight: 500;
}
.agenda-side-empty-link:hover { text-decoration: underline; text-underline-offset: 3px; }

.agenda-side-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 16px;
}
.agenda-side-event {
  position: relative;
  padding: 18px 20px 18px 24px;
  background: rgba(228, 179, 99, .08);
  border: 1px solid rgba(228, 179, 99, .22);
  border-radius: 18px;
  overflow: hidden;
}
.agenda-side-event::before {
  content: "";
  position: absolute;
  left: 0; top: 14px; bottom: 14px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--cat-color, var(--honey));
}

.agenda-side-event-time {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-bottom: 6px;
  font-weight: 500;
}
.agenda-side-event-cat {
  padding: 3px 8px;
  background: var(--cat-color, var(--honey));
  color: var(--cream);
  border-radius: 999px;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.agenda-side-event.is-cat-proeverij .agenda-side-event-cat { color: var(--ink); }

.agenda-side-event-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0 0 6px;
}
.agenda-side-event-desc {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 14px;
}
.agenda-side-event-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.agenda-side-event-status {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.agenda-side-event-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  background: var(--bordeaux);
  color: var(--cream);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.agenda-side-event-cta:hover { background: var(--bordeaux-deep); transform: translateY(-1px); }
.agenda-side-event-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .4);
}

.agenda-side-event-actions {
  display: flex; align-items: center; gap: 8px;
}
.agenda-side-event-ics {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 11px;
  background: transparent;
  border: 1px solid rgba(139, 90, 43, .22);
  color: var(--walnut);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
}
.agenda-side-event-ics:hover {
  border-color: var(--honey);
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .12);
  transform: translateY(-1px);
}
.agenda-side-event-ics:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.agenda-side-event-ics svg { flex-shrink: 0; }

.agenda-upcoming-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
  padding: 24px 20px;
  background: rgba(228, 179, 99, .06);
  border: 1px dashed rgba(228, 179, 99, .3);
  border-radius: 16px;
  text-align: center;
}

/* ----- Global reduced-motion respect voor de agenda ----- */
@media (prefers-reduced-motion: reduce) {
  .agenda-day,
  .agenda-cal-filter,
  .agenda-side-event-cta,
  .agenda-side-event-ics,
  .agenda-cal-btn,
  .agenda-cal-today { transition: none; }
  .agenda-day:hover:not(.is-out),
  .agenda-cal-filter:hover,
  .agenda-side-event-cta:hover,
  .agenda-side-event-ics:hover,
  .agenda-upcoming-card:hover { transform: none; }
}

/* ----- Upcoming events grid ----- */
/* Blok binnen dezelfde pagina, gescheiden door een lijn: iets minder ruimte
   dan tussen twee losse secties, maar wel uit hetzelfde ritme. */
.agenda-upcoming {
  padding-top: calc(var(--section-py) * .72);
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.agenda-upcoming-head {
  margin-bottom: 32px;
}
.agenda-upcoming-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .agenda-upcoming-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .agenda-upcoming-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }

.agenda-upcoming-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 18px;
  padding: 22px;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 22px;
  box-shadow:
    0 16px 40px -24px rgba(30, 20, 10, .18),
    0 4px 10px -6px rgba(30, 20, 10, .08);
  transition: transform .3s ease, box-shadow .3s ease;
}
.agenda-upcoming-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 50px -24px rgba(30, 20, 10, .28),
    0 8px 18px -8px rgba(30, 20, 10, .14);
}

.agenda-upcoming-date {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  padding: 10px 0;
  background: var(--cat-color, var(--honey));
  color: var(--cream);
  border-radius: 16px;
  min-height: 92px;
}
.agenda-upcoming-card.is-cat-proeverij .agenda-upcoming-date { color: var(--ink); }
.agenda-upcoming-dow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 4px;
}
.agenda-upcoming-day {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.agenda-upcoming-month {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 4px;
}

.agenda-upcoming-body { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.agenda-upcoming-cat {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cat-color, var(--honey));
  font-weight: 700;
}
.agenda-upcoming-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.agenda-upcoming-desc {
  font-size: 13px; line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}
.agenda-upcoming-meta {
  display: flex; flex-wrap: wrap; gap: 10px 14px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid rgba(139, 90, 43, .12);
}
.agenda-upcoming-meta > span {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}
.agenda-upcoming-meta svg { color: var(--walnut); }

/* ----- CTA ----- */
/* Blok binnen dezelfde pagina: zelfde ritme als .agenda-upcoming. */
.agenda-cta-wrap { margin-top: calc(var(--section-py) * .72); }
.agenda-cta-card {
  background:
    radial-gradient(500px 400px at 20% 0%, rgba(228, 179, 99, .22), transparent 60%),
    linear-gradient(160deg, #1a100a 0%, #3d2b1f 60%, #5a3d2a 100%);
  color: var(--cream);
  border-radius: 32px;
  padding: 44px 32px;
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
  align-items: center;
  box-shadow: 0 30px 60px -30px rgba(10, 6, 3, .5);
}
.agenda-cta-card .sec-title em { color: var(--honey-soft); }
@media (min-width: 1024px) {
  .agenda-cta-card {
    grid-template-columns: 1.4fr 1fr;
    padding: 56px 52px;
    gap: 48px;
  }
}
.agenda-cta-p {
  font-size: 14.5px; line-height: 1.6;
  color: rgba(245, 239, 230, .78);
  margin: 14px 0 0;
  max-width: 520px;
}
.agenda-cta-actions {
  display: flex; flex-wrap: wrap; gap: 12px;
}

/* ----- Mobile refinements ----- */
@media (max-width: 767px) {
  .agenda-head { margin-bottom: 28px; }
  .agenda-calendar-card { padding: 22px 16px; border-radius: 24px; }
  .agenda-cal-head { padding-bottom: 16px; margin-bottom: 16px; }
  .agenda-cal-month h2 { font-size: 22px; }
  .agenda-day { font-size: 13px; border-radius: 10px; }
  .agenda-day-dot { width: 4px; height: 4px; }
  .agenda-cal-dows span { font-size: 9.5px; }
  .agenda-side-card { padding: 22px 18px; border-radius: 22px; }
  .agenda-side-title { font-size: 19px; }
  .agenda-side-event { padding: 14px 14px 14px 18px; }
  .agenda-side-event-foot {
    flex-wrap: wrap;
    row-gap: 10px;
    align-items: stretch;
  }
  .agenda-side-event-status { flex-basis: 100%; }
  .agenda-side-event-actions { width: 100%; justify-content: flex-end; }
  .agenda-upcoming-card {
    grid-template-columns: 64px 1fr;
    padding: 16px;
    gap: 14px;
  }
  .agenda-upcoming-date { min-height: 78px; }
  .agenda-upcoming-day { font-size: 26px; }
  .agenda-cta-card { padding: 32px 24px; }
}

/* =========================================================================
   RESERVEER PAGE — Multi-step wizard
   ========================================================================= */

.reserveer-page {
  position: relative;
  background: var(--cream-warm);
  min-height: 100vh;
  overflow: hidden;
}

/* ----- HERO ----- */
.reserveer-hero {
  position: relative;
  padding: 132px 24px 48px;
  text-align: center;
  overflow: hidden;
}
@media (min-width: 768px) { .reserveer-hero { padding: 152px 48px 64px; } }
@media (min-width: 1024px) { .reserveer-hero { padding: 172px 64px 80px; } }

.reserveer-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(228, 179, 99, .22), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(90, 26, 43, .12), transparent 60%);
  pointer-events: none;
}

.reserveer-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
}

.reserveer-hero-deco {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(480px, 80%);
  color: var(--honey);
  opacity: .4;
  pointer-events: none;
}

.reserveer-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: var(--cream);
  border: 1px solid rgba(228, 179, 99, .35);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordeaux);
  box-shadow: 0 6px 14px -8px rgba(30, 20, 10, .15);
  margin-bottom: 22px;
}
.reserveer-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 0 rgba(228, 179, 99, .7);
  animation: todayPulse 2.2s ease-out infinite;
}

.reserveer-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0 0 24px;
}
.reserveer-title em {
  color: var(--bordeaux);
  font-style: italic;
  font-weight: 400;
}

.reserveer-lede {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 600px;
  margin: 0 auto;
}

/* ----- WIZARD WRAPPER ----- */
.reserveer-wizard-wrap {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 16px 16px 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
}
@media (min-width: 768px)  { .reserveer-wizard-wrap { padding: 24px 32px 96px; } }
@media (min-width: 1024px) { .reserveer-wizard-wrap { padding: 32px 48px 120px; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } }
@media (min-width: 1280px) { .reserveer-wizard-wrap { padding: 40px 64px 120px; grid-template-columns: minmax(0, 1fr) 360px; gap: 40px; } }

.reserveer-wizard {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .12);
  border-radius: 28px;
  padding: 24px 20px 32px;
  box-shadow:
    0 36px 80px -40px rgba(30, 20, 10, .35),
    0 8px 24px -16px rgba(30, 20, 10, .14);
  min-width: 0;
}
@media (min-width: 768px)  { .reserveer-wizard { padding: 36px 36px 44px; border-radius: 32px; } }
@media (min-width: 1024px) { .reserveer-wizard { padding: 44px 48px 48px; } }

/* ----- STEP INDICATOR ----- */
.reserveer-steps {
  position: relative;
  margin-bottom: 32px;
}
.reserveer-steps-list {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  list-style: none;
  margin: 0; padding: 0;
  position: relative;
  z-index: 2;
}
.reserveer-step-item { flex: 1; min-width: 0; }

.reserveer-step-btn {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: 100%;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  color: var(--muted);
  transition: color .2s;
}
.reserveer-step-btn:disabled { cursor: not-allowed; }
.reserveer-step-item.is-navigable .reserveer-step-btn:hover { color: var(--ink-soft); }
.reserveer-step-item.is-active .reserveer-step-btn,
.reserveer-step-item.is-complete .reserveer-step-btn { color: var(--bordeaux); }

.reserveer-step-num {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--cream);
  border: 1.5px solid rgba(139, 90, 43, .2);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  transition: all .25s cubic-bezier(.2, .7, .2, 1);
}
.reserveer-step-item.is-active .reserveer-step-num {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(228, 179, 99, .28), 0 8px 20px -10px rgba(61, 43, 31, .55);
  transform: scale(1.06);
}
.reserveer-step-item.is-complete .reserveer-step-num {
  background: var(--honey);
  color: var(--bordeaux);
  border-color: transparent;
}

.reserveer-step-btn:focus-visible {
  outline: none;
}
.reserveer-step-btn:focus-visible .reserveer-step-num {
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .45);
}

.reserveer-step-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .reserveer-step-label { font-size: 9.5px; letter-spacing: 0.06em; }
  .reserveer-step-num   { width: 30px; height: 30px; font-size: 13px; }
}

.reserveer-steps-progress {
  position: absolute;
  top: 18px;
  left: 18px; right: 18px;
  height: 2px;
  background: rgba(139, 90, 43, .14);
  border-radius: 999px;
  z-index: 1;
  overflow: hidden;
}
@media (max-width: 520px) { .reserveer-steps-progress { top: 15px; } }
.reserveer-steps-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--honey), var(--bordeaux));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}

/* ----- STEP HEAD ----- */
.reserveer-step-head {
  margin-bottom: 28px;
  text-align: left;
}
.reserveer-step-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.reserveer-step-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
  text-wrap: balance;
}
.reserveer-step-title em { color: var(--bordeaux); font-style: italic; }
.reserveer-step-lede {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 560px;
}

/* ----- STEP TRANSITIONS ----- */
.reserveer-enter { transition: opacity .35s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.reserveer-enter-start { opacity: 0; transform: translateY(12px); }
.reserveer-enter-end   { opacity: 1; transform: translateY(0); }

/* ======== STAP 1 — ACTIVITEITEN ======== */
.reserveer-activities {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 560px) { .reserveer-activities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.reserveer-activity {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 18px 18px 16px;
  background: #fff;
  border: 1.5px solid rgba(139, 90, 43, .14);
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
  min-height: 88px;
  transition: border-color .2s, background .2s, transform .18s, box-shadow .2s;
  color: var(--ink);
}
.reserveer-activity:hover {
  border-color: var(--honey);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -18px rgba(30, 20, 10, .28);
}
.reserveer-activity:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.reserveer-activity.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 18px 32px -16px rgba(61, 43, 31, .5);
}

.reserveer-activity-icon {
  display: grid; place-items: center;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.reserveer-activity.is-selected .reserveer-activity-icon {
  background: rgba(245, 239, 230, .14);
  color: var(--honey);
}

.reserveer-activity-body {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.reserveer-activity-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.reserveer-activity-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
}
.reserveer-activity.is-selected .reserveer-activity-desc { color: rgba(245, 239, 230, .72); }

.reserveer-activity-check {
  width: 26px; height: 26px;
  border-radius: 999px;
  border: 1.5px solid rgba(139, 90, 43, .22);
  display: grid; place-items: center;
  color: transparent;
  transition: all .2s;
  flex-shrink: 0;
}
.reserveer-activity.is-selected .reserveer-activity-check {
  background: var(--honey);
  border-color: transparent;
  color: var(--bordeaux);
}

/* ======== STAP 2 — DATUM + TIJD ======== */
.reserveer-fieldset {
  border: 0; padding: 0; margin: 0 0 24px;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}
.reserveer-fieldset--times { margin-bottom: 8px; }
.reserveer-fieldset legend {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 12px;
  padding: 0;
}
.reserveer-hint {
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--bordeaux);
  font-weight: 500;
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
}

/* Calendar head (maand label + nav) */
.reserveer-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.reserveer-cal-month {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  text-transform: capitalize;
}
.reserveer-cal-nav {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.reserveer-cal-nav button {
  width: 32px; height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, .16);
  background: #fff;
  color: var(--walnut);
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s, transform .15s, box-shadow .2s;
}
.reserveer-cal-nav button:hover:not(:disabled) {
  border-color: var(--honey);
  color: var(--bordeaux);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(228, 179, 99, .4);
}
.reserveer-cal-nav button:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.reserveer-cal-nav button:disabled { opacity: .3; cursor: not-allowed; }

.reserveer-cal-today {
  width: auto !important;
  padding: 0 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Dow headers */
.reserveer-cal-dows {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  margin: 0 auto 8px;
  max-width: 460px;
}
.reserveer-cal-dows span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
  padding: 4px 0;
}

/* Date grid (maand view: 7 kolommen vast, compact) */
.reserveer-dates {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
  padding: 2px;
  max-width: 460px;
  margin: 0 auto;
}
@media (max-width: 479px) {
  .reserveer-cal-dows,
  .reserveer-dates { gap: 4px; max-width: 100%; }
}

.reserveer-date {
  aspect-ratio: 1;
  min-height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(139, 90, 43, .14);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .2s, border-color .2s, transform .18s, color .2s, box-shadow .2s;
  position: relative;
}
.reserveer-date:hover:not(:disabled) {
  border-color: var(--honey);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px -4px rgba(228, 179, 99, .5);
}
.reserveer-date:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .38);
  z-index: 2;
}
.reserveer-date.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(61, 43, 31, .55);
}
.reserveer-date.is-today:not(.is-selected) {
  border-color: var(--honey);
  color: var(--bordeaux);
  font-weight: 700;
}
.reserveer-date.is-today:not(.is-selected)::after {
  content: '';
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--honey);
}
.reserveer-date.is-out {
  color: rgba(26, 20, 16, .28);
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.reserveer-date.is-out:hover { transform: none; box-shadow: none; border-color: transparent; }
.reserveer-date.is-disabled,
.reserveer-date:disabled { cursor: not-allowed; }
.reserveer-date.is-disabled:not(.is-out) {
  opacity: .4;
  background: rgba(139, 90, 43, .04);
}

.reserveer-date-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Time slots */
.reserveer-time-groups {
  display: grid; gap: 18px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .reserveer-time-groups { grid-template-columns: repeat(3, 1fr); } }

.reserveer-time-group-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.reserveer-time-slots {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.reserveer-time {
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(139, 90, 43, .16);
  background: #fff;
  color: var(--ink);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
}
.reserveer-time:hover {
  border-color: var(--honey);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(228, 179, 99, .4);
}
.reserveer-time:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.reserveer-time.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(61, 43, 31, .55);
}

/* ======== STAP 3 — GEZELSCHAP ======== */
.reserveer-guests {
  display: flex; flex-direction: column; align-items: center;
  gap: 24px;
  padding: 12px 0 8px;
}
.reserveer-guests-stepper {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid rgba(139, 90, 43, .16);
  border-radius: 999px;
  box-shadow: 0 10px 24px -14px rgba(30, 20, 10, .2);
}
.reserveer-guests-stepper button {
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 0;
  background: rgba(228, 179, 99, .14);
  color: var(--bordeaux);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, transform .15s, color .2s;
}
.reserveer-guests-stepper button:hover:not(:disabled) {
  background: var(--honey);
  color: var(--bordeaux);
  transform: scale(1.06);
}
.reserveer-guests-stepper button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .45);
}
.reserveer-guests-stepper button:disabled {
  color: rgba(139, 90, 43, .3);
  cursor: not-allowed;
}
.reserveer-guests-value {
  display: flex; flex-direction: column; align-items: center;
  min-width: 120px;
  padding: 0 6px;
}
.reserveer-guests-num {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
}
.reserveer-guests-word {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 4px;
}

.reserveer-guests-quick {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center;
}
.reserveer-chip {
  min-width: 48px;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(139, 90, 43, .18);
  background: #fff;
  color: var(--ink);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all .2s;
}
.reserveer-chip:hover {
  border-color: var(--honey);
  transform: translateY(-1px);
}
.reserveer-chip:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.reserveer-chip.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
}

.reserveer-guests-note {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: rgba(228, 179, 99, .18);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--bordeaux);
  font-weight: 500;
}

/* ======== STAP 4 — CONTACT ======== */
.reserveer-review {
  padding: 18px 20px;
  background: rgba(228, 179, 99, .1);
  border: 1px dashed rgba(228, 179, 99, .5);
  border-radius: 18px;
  margin-bottom: 24px;
}
.reserveer-review-eyebrow {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 10px;
}
.reserveer-review-list {
  display: grid; gap: 8px;
  grid-template-columns: 1fr;
  margin: 0; padding: 0;
}
@media (min-width: 480px) { .reserveer-review-list { grid-template-columns: repeat(2, 1fr); gap: 10px 16px; } }
.reserveer-review-list > div {
  display: flex; flex-direction: column; gap: 2px;
}
.reserveer-review-list dt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.reserveer-review-list dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.reserveer-form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .reserveer-form-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }

.reserveer-field {
  display: flex; flex-direction: column; gap: 6px;
  min-width: 0;
}
.reserveer-field--full { grid-column: 1 / -1; }
.reserveer-field label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.reserveer-field label span { color: var(--bordeaux); }

.reserveer-field input,
.reserveer-field textarea {
  width: 100%;
  padding: 13px 16px;
  background: #fff;
  border: 1.5px solid rgba(139, 90, 43, .16);
  border-radius: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
  min-height: 48px;
}
.reserveer-field textarea { min-height: 120px; resize: vertical; }
.reserveer-field input::placeholder,
.reserveer-field textarea::placeholder { color: rgba(139, 90, 43, .45); }
.reserveer-field input:hover,
.reserveer-field textarea:hover { border-color: rgba(139, 90, 43, .32); }
.reserveer-field input:focus-visible,
.reserveer-field textarea:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 4px rgba(228, 179, 99, .2);
}

/* ======== WIZARD NAVIGATION ======== */
.reserveer-nav {
  display: flex; align-items: center; gap: 12px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(139, 90, 43, .12);
}
.reserveer-nav-spacer { flex: 1; }

.reserveer-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 0;
  transition: all .2s;
  min-height: 46px;
  text-decoration: none;
  white-space: nowrap;
}
.reserveer-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .45);
}

.reserveer-btn--primary {
  background: var(--bordeaux);
  color: var(--cream);
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.reserveer-btn--primary:hover:not(:disabled) {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(61, 43, 31, .7);
}
.reserveer-btn--primary svg { transition: transform .2s; }
.reserveer-btn--primary:hover:not(:disabled) svg { transform: translateX(3px); }
.reserveer-btn--primary:disabled {
  background: rgba(139, 90, 43, .22);
  color: rgba(245, 239, 230, .55);
  box-shadow: none;
  cursor: not-allowed;
}

.reserveer-btn--submit {
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-deep));
  padding: 15px 26px;
  font-size: 14.5px;
}
.reserveer-btn--submit:not(:disabled) {
  box-shadow: 0 14px 32px -10px rgba(228, 179, 99, .5), 0 6px 18px -8px rgba(61, 43, 31, .5);
}
.reserveer-btn--submit:disabled { background: rgba(139, 90, 43, .22); }

.reserveer-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid rgba(139, 90, 43, .18);
}
.reserveer-btn--ghost:hover:not(:disabled) {
  border-color: var(--honey);
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .08);
}
.reserveer-btn--ghost:disabled { opacity: .4; cursor: not-allowed; }
.reserveer-btn--ghost svg { transition: transform .2s; }
.reserveer-btn--ghost:hover:not(:disabled) svg { transform: translateX(-3px); }

/* ======== SUMMARY (desktop rail) ======== */
.reserveer-summary {
  position: sticky;
  top: 100px;
  align-self: start;
  display: none;
}
@media (min-width: 1024px) { .reserveer-summary { display: block; } }

.reserveer-summary-card {
  background: var(--cream);
  border: 1px solid rgba(228, 179, 99, .32);
  border-radius: 24px;
  padding: 28px 26px;
  box-shadow:
    0 24px 50px -28px rgba(30, 20, 10, .28),
    0 4px 14px -6px rgba(30, 20, 10, .1);
}
.reserveer-summary-head { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(139, 90, 43, .14); }
.reserveer-summary-eyebrow {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 6px;
}
.reserveer-summary-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.reserveer-summary-list {
  display: grid; gap: 14px;
  margin: 0 0 18px;
}
.reserveer-summary-list > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(139, 90, 43, .12);
  opacity: .55;
  transition: opacity .3s;
}
.reserveer-summary-list > div:last-child { border-bottom: 0; }
.reserveer-summary-list > div.is-filled { opacity: 1; }
.reserveer-summary-list dt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.reserveer-summary-list dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: right;
  max-width: 60%;
}
.reserveer-summary-fineprint {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid rgba(139, 90, 43, .1);
}

/* ======== SUCCESS STATE ======== */
.reserveer-success {
  text-align: center;
  padding: 20px 12px 12px;
}
.reserveer-success-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  border-radius: 999px;
  background: rgba(228, 179, 99, .2);
  color: var(--bordeaux);
  margin: 0 auto 22px;
  animation: successPop .5s cubic-bezier(.25, .9, .3, 1.5);
}
@keyframes successPop {
  0%   { transform: scale(0.6); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
.reserveer-success-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-block);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 10px 0 14px;
}
.reserveer-success-title span { color: var(--bordeaux); font-style: italic; }
.reserveer-success-p {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 520px;
  margin: 0 auto 26px;
}
.reserveer-success-summary {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
  max-width: 440px;
  margin: 0 auto 32px;
  padding: 20px 22px;
  background: rgba(228, 179, 99, .1);
  border: 1px dashed rgba(228, 179, 99, .4);
  border-radius: 18px;
  text-align: left;
}
@media (min-width: 480px) { .reserveer-success-summary { grid-template-columns: repeat(2, 1fr); gap: 12px 20px; } }
.reserveer-success-summary > div { display: flex; flex-direction: column; gap: 2px; }
.reserveer-success-summary span {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.reserveer-success-summary b {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 14.5px;
  color: var(--ink);
}
.reserveer-success-actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}

/* ======== MOTION & RESPONSIVE TWEAKS ======== */
@media (prefers-reduced-motion: reduce) {
  .reserveer-activity,
  .reserveer-date,
  .reserveer-time,
  .reserveer-chip,
  .reserveer-btn,
  .reserveer-step-num,
  .reserveer-steps-progress-bar,
  .reserveer-enter { transition: none; }
  .reserveer-activity:hover,
  .reserveer-date:hover:not(:disabled),
  .reserveer-time:hover,
  .reserveer-chip:hover,
  .reserveer-btn:hover { transform: none; }
  .reserveer-success-icon { animation: none; }
}

@media (max-width: 767px) {
  .reserveer-wizard { padding: 20px 16px 24px; }
  .reserveer-step-head { margin-bottom: 22px; }
  .reserveer-nav {
    position: sticky;
    bottom: 10px;
    margin-top: 28px;
    padding: 12px;
    background: rgba(245, 239, 230, .96);
    border: 1px solid rgba(139, 90, 43, .14);
    border-radius: 999px;
    box-shadow: 0 10px 30px -10px rgba(30, 20, 10, .35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
  }
  .reserveer-btn { padding: 12px 18px; font-size: 13.5px; }
  .reserveer-btn--primary svg,
  .reserveer-btn--ghost svg { display: inline-flex; }
  .reserveer-activity { min-height: 76px; padding: 14px; gap: 14px; }
  .reserveer-activity-icon { width: 42px; height: 42px; }
  .reserveer-activity-title { font-size: 15.5px; }
  .reserveer-activity-desc { font-size: 12px; }
  .reserveer-guests-value { min-width: 96px; }
  .reserveer-guests-num { font-size: 40px; }
}

/* =========================================================================
   EVENEMENTEN PAGE
   ========================================================================= */

.evenementen-page {
  position: relative;
  overflow: hidden;
  background: var(--cream-warm);
  padding: var(--page-head-pt) var(--section-px) var(--page-head-pb);
  min-height: 100vh;
}

.evenementen-inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin: 0 auto;
}

/* ----- Hero ----- */
.evenementen-head {
  max-width: 820px;
  margin-bottom: 40px;
}
.evenementen-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: var(--cream);
  border: 1px solid rgba(228, 179, 99, .35);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordeaux);
  box-shadow: 0 6px 14px -8px rgba(30, 20, 10, .15);
  margin-bottom: 18px;
}
.evenementen-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 0 rgba(228, 179, 99, .7);
  animation: todayPulse 2.2s ease-out infinite;
}
.evenementen-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.evenementen-title em { color: var(--bordeaux); font-style: italic; }
.evenementen-lede {
  font-size: 16px; line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 20px;
  max-width: 600px;
}

/* ----- Filters ----- */
.evenementen-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 18px 0 28px;
  margin-bottom: 36px;
  border-bottom: 1px solid rgba(139, 90, 43, .12);
}
.evenementen-filter {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, .18);
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .2s, background .2s, color .2s, transform .15s, box-shadow .2s;
}
.evenementen-filter:hover {
  border-color: var(--honey);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px -4px rgba(228, 179, 99, .4);
}
.evenementen-filter:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .32);
}
.evenementen-filter.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: transparent;
}
.evenementen-filter.is-active:hover { background: var(--bordeaux); }
.evenementen-filter-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.evenementen-filter--all svg { color: var(--honey); }
.evenementen-filter--all.is-active svg { color: var(--honey-soft); }

/* ----- Grid ----- */
.evenementen-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .evenementen-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; } }
@media (min-width: 1024px) { .evenementen-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } }

/* ----- Card ----- */
.evenementen-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  box-shadow:
    0 16px 40px -24px rgba(30, 20, 10, .2),
    0 4px 10px -6px rgba(30, 20, 10, .08);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s;
}
.evenementen-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 26px 56px -24px rgba(30, 20, 10, .32),
    0 10px 22px -10px rgba(30, 20, 10, .14);
}
.evenementen-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
  height: 100%;
}
.evenementen-card-link:focus-visible {
  outline: none;
}
.evenementen-card-link:focus-visible + * ,
.evenementen-card:has(.evenementen-card-link:focus-visible) {
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .55),
              0 26px 56px -24px rgba(30, 20, 10, .32);
}

.evenementen-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, rgba(228, 179, 99, .18), rgba(90, 26, 43, .1));
  overflow: hidden;
}
.evenementen-card-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.evenementen-card:hover .evenementen-card-media img { transform: scale(1.04); }
.evenementen-card-media-fallback {
  position: relative;
  width: 100%; height: 100%;
  background:
    radial-gradient(70% 60% at 30% 30%, rgba(228, 179, 99, .22), transparent 70%),
    radial-gradient(60% 50% at 75% 80%, rgba(90, 26, 43, .18), transparent 70%),
    linear-gradient(135deg, rgba(228, 179, 99, .2), rgba(90, 26, 43, .14));
  overflow: hidden;
}
/* Verberg het generieke wijnglas-icoontje uit de view */
.evenementen-card-media-fallback > svg { display: none; }
/* Gebruik het domein-logo als nette placeholder */
.evenementen-card-media-fallback::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/theme/images/logo/logo.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(50%, 130px) auto;
  opacity: .48;
  filter: drop-shadow(0 8px 18px rgba(10, 6, 3, .25));
  transition: opacity .35s, transform .4s cubic-bezier(.2, .7, .2, 1);
}
.evenementen-card:hover .evenementen-card-media-fallback::after {
  opacity: .7;
  transform: scale(1.05);
}

/* ----- Live category-filter (theme JS) ----- */
.evenementen-card.is-filtered-out { display: none; }
.evenementen-card.is-filter-appearing {
  animation: evenementenFilterFadeIn .4s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes evenementenFilterFadeIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
.evenementen-empty--inline {
  margin-top: 24px;
  padding: 36px 24px;
}
@media (prefers-reduced-motion: reduce) {
  .evenementen-card.is-filter-appearing { animation: none; }
}

.evenementen-card-cat {
  position: absolute;
  left: 14px; bottom: 14px;
  display: inline-flex; align-items: center;
  padding: 5px 11px 5px 13px;
  background: rgba(245, 239, 230, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  border-left: 3px solid var(--cat-color, var(--honey));
}

.evenementen-card-featured {
  position: absolute;
  top: 14px; right: 14px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px 5px 8px;
  background: var(--honey);
  color: var(--bordeaux);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(228, 179, 99, .7);
}
.evenementen-card-featured svg { flex-shrink: 0; }

.evenementen-card-body {
  padding: 22px 22px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.evenementen-card-date {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--walnut);
  letter-spacing: 0.01em;
  flex-wrap: wrap;
}
.evenementen-card-date svg { color: var(--honey); flex-shrink: 0; }
.evenementen-card-date-sep { color: rgba(139, 90, 43, .4); padding: 0 2px; }

.evenementen-card-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--walnut);
  letter-spacing: 0.01em;
}
.evenementen-card-meta > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.evenementen-card-meta svg { color: var(--honey); flex-shrink: 0; }

.evenementen-card-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 4px 0 0;
}

.evenementen-card-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 2px 0 0;
  text-wrap: balance;
  transition: color .2s;
}
.evenementen-card:hover .evenementen-card-title { color: var(--bordeaux); }

.evenementen-card-loc {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin: 0;
}
.evenementen-card-loc svg { color: var(--walnut); flex-shrink: 0; }

.evenementen-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(139, 90, 43, .12);
}
.evenementen-card-price {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.015em;
  color: var(--bordeaux);
}
.evenementen-card-price.is-free {
  color: #2d6a4f;
}
.evenementen-card-price.is-muted {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  font-style: italic;
}
.evenementen-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(228, 179, 99, .16);
  color: var(--bordeaux);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  transition: background .2s, transform .2s;
}
.evenementen-card:hover .evenementen-card-cta {
  background: var(--bordeaux);
  color: var(--cream);
}
.evenementen-card:hover .evenementen-card-cta svg { transform: translate(2px, -2px); }
.evenementen-card-cta svg { transition: transform .2s; }

/* ----- Pagination ----- */
.evenementen-pagination {
  margin-top: 40px;
  display: flex; justify-content: center;
}
.evenementen-pagination nav {
  display: flex; align-items: center; gap: 4px;
}
.evenementen-pagination svg { width: 14px; height: 14px; }
.evenementen-pagination a,
.evenementen-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 38px; height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, .16);
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: all .2s;
}
.evenementen-pagination a:hover {
  border-color: var(--honey);
  color: var(--bordeaux);
}
.evenementen-pagination .active span,
.evenementen-pagination [aria-current="page"] span {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
}
.evenementen-pagination .disabled span {
  opacity: .35;
  cursor: not-allowed;
}

/* ----- Empty state ----- */
.evenementen-empty {
  text-align: center;
  padding: 56px 24px;
  background: var(--cream);
  border: 1px dashed rgba(228, 179, 99, .5);
  border-radius: 24px;
}
.evenementen-empty-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: rgba(228, 179, 99, .18);
  color: var(--bordeaux);
}
.evenementen-empty-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-block);
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 12px;
}
.evenementen-empty-p {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 480px;
  margin: 0 auto 24px;
}
.evenementen-empty-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.evenementen-empty-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: all .2s;
}
.evenementen-empty-btn--primary {
  background: var(--bordeaux);
  color: var(--cream);
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.evenementen-empty-btn--primary:hover {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
}
.evenementen-empty-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid rgba(139, 90, 43, .2);
}
.evenementen-empty-btn--ghost:hover {
  border-color: var(--honey);
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .08);
}

/* ----- Motion & mobile ----- */
@media (prefers-reduced-motion: reduce) {
  .evenementen-card,
  .evenementen-filter,
  .evenementen-empty-btn,
  .evenementen-card-media img,
  .evenementen-card-cta { transition: none; }
  .evenementen-card:hover,
  .evenementen-filter:hover,
  .evenementen-empty-btn:hover { transform: none; }
  .evenementen-card:hover .evenementen-card-media img { transform: none; }
}
@media (max-width: 767px) {
  .evenementen-card-body { padding: 18px 18px 20px; }
  .evenementen-card-title { font-size: 18px; }
}

/* =========================================================================
   ACTIVITY SHOW PAGE
   ========================================================================= */
.activity-show { background: var(--cream-warm); min-height: 100vh; padding-bottom: 96px; }

.activity-hero {
  position: relative;
  min-height: 420px;
  padding: 132px 24px 56px;
  overflow: hidden;
  color: var(--cream);
  background: var(--bordeaux);
}
@media (min-width: 768px)  { .activity-hero { padding: 152px 48px 72px; min-height: 480px; } }
@media (min-width: 1024px) { .activity-hero { padding: 172px 64px 88px; min-height: 520px; } }

.activity-hero-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(.95);
}
.activity-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(30, 20, 10, .5) 0%, rgba(61, 43, 31, .85) 100%);
}
.activity-hero-inner {
  position: relative; z-index: 1;
  max-width: 860px;
  margin: 0 auto;
}
.activity-crumb {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: rgba(245, 239, 230, .7);
  margin-bottom: 18px;
  letter-spacing: 0.04em;
}
.activity-crumb a {
  color: inherit;
  text-decoration: none;
  transition: color .2s;
}
.activity-crumb a:hover { color: var(--honey); }
.activity-crumb span { color: rgba(245, 239, 230, .4); }

.activity-hero-cat {
  display: inline-flex; align-items: center;
  padding: 5px 12px 5px 14px;
  background: rgba(245, 239, 230, .16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cream);
  border-left: 3px solid var(--cat-color, var(--honey));
  margin-bottom: 18px;
}
.activity-hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--cream);
  text-wrap: balance;
  margin: 0;
}
.activity-hero-lede {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(245, 239, 230, .88);
  margin-top: 18px;
  max-width: 620px;
}

.activity-body {
  max-width: 1200px;
  margin: -48px auto 0;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}
@media (min-width: 768px) { .activity-body { padding: 0 48px; } }

.activity-body-grid {
  display: grid; gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .activity-body-grid { grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
}

.activity-content {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 24px;
  padding: 32px 28px;
  box-shadow: 0 20px 50px -30px rgba(30, 20, 10, .25);
  min-width: 0;
}
@media (min-width: 768px) { .activity-content { padding: 44px 40px; } }

.activity-description {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.activity-description h2, .activity-description h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-weight: 500;
  margin-top: 1.6em;
}
.activity-description h2 { font-size: 24px; }
.activity-description h3 { font-size: 19px; }
.activity-description p { margin: 0 0 1em; color: var(--ink-soft); }
.activity-description ul, .activity-description ol {
  margin: 0 0 1em 1.25em;
  color: var(--ink-soft);
}
.activity-description li { margin-bottom: .4em; }
.activity-description a {
  color: var(--bordeaux);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.activity-description img { border-radius: 14px; margin: 1em 0; }

.activity-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 36px;
}
@media (min-width: 640px) { .activity-gallery { grid-template-columns: repeat(2, 1fr); } }
.activity-gallery-item {
  margin: 0;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: rgba(228, 179, 99, .1);
}
.activity-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Sidebar */
.activity-side { position: sticky; top: 96px; }
@media (max-width: 1023px) { .activity-side { position: static; } }
.activity-side-card {
  background: var(--cream);
  border: 1px solid rgba(228, 179, 99, .32);
  border-radius: 24px;
  padding: 28px 26px;
  box-shadow: 0 24px 50px -28px rgba(30, 20, 10, .28);
}
.activity-side-head { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(139, 90, 43, .14); }
.activity-side-eyebrow {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--bordeaux);
  margin-bottom: 6px;
}
.activity-side-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
}
.activity-side-list {
  display: grid; gap: 14px;
  margin: 0 0 22px;
}
.activity-side-list > div {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(139, 90, 43, .14);
}
.activity-side-list > div:last-child { border-bottom: 0; }
.activity-side-list dt {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.activity-side-list dt svg { color: var(--honey); flex-shrink: 0; }
.activity-side-list dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: right;
}

.activity-side-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: var(--bordeaux);
  color: var(--cream);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: background .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.activity-side-cta:hover {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
}
.activity-side-cta svg { transition: transform .2s; }
.activity-side-cta:hover svg { transform: translateX(3px); }
.activity-side-cta:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .5), 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.activity-side-fineprint {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  margin: 12px 0 0;
  line-height: 1.5;
}

.activity-related { margin-top: 80px; padding: 0 24px; }
@media (min-width: 768px) { .activity-related { padding: 0 48px; } }
.activity-related-inner { max-width: 1200px; margin: 0 auto; }
.activity-related-head { margin-bottom: 28px; }

/* =========================================================================
   RESERVERINGEN MODULE PAGES (/reserveren, /vergaderen, /bevestiging)
   ========================================================================= */

.reserveringen-page {
  position: relative;
  background: var(--cream-warm);
  min-height: 100vh;
  padding: var(--page-head-pt) var(--section-px) var(--page-head-pb);
  overflow: hidden;
}

.reserveringen-inner {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
}
.reserveringen-inner--narrow { max-width: 640px; }

.reserveringen-head {
  max-width: 760px;
  margin-bottom: 40px;
}
.reserveringen-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px;
  background: var(--cream);
  border: 1px solid rgba(228, 179, 99, .35);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bordeaux);
  box-shadow: 0 6px 14px -8px rgba(30, 20, 10, .15);
  margin-bottom: 18px;
}
.reserveringen-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 0 rgba(228, 179, 99, .7);
  animation: todayPulse 2.2s ease-out infinite;
}
.reserveringen-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 16px;
  text-wrap: balance;
}
.reserveringen-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 580px;
  margin: 0;
}

.reserveringen-preselect {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 20px;
  padding: 9px 14px;
  background: rgba(228, 179, 99, .18);
  border: 1px solid rgba(228, 179, 99, .4);
  color: var(--bordeaux);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
}
.reserveringen-preselect svg { color: var(--bordeaux); flex-shrink: 0; }
.reserveringen-preselect strong { font-weight: 700; }

.reserveringen-card {
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 28px;
  padding: 24px 20px;
  box-shadow:
    0 36px 80px -40px rgba(30, 20, 10, .35),
    0 8px 24px -16px rgba(30, 20, 10, .14);
}
@media (min-width: 768px)  { .reserveringen-card { padding: 36px; border-radius: 32px; } }
@media (min-width: 1024px) { .reserveringen-card { padding: 44px 48px; } }

/* De calendar-component kan Tailwind-classes gebruiken; zorg dat primary kleur
   matches met het thema. */
.reserveringen-card .bg-primary,
.reserveringen-card [class*="bg-primary"] { background-color: var(--bordeaux) !important; }
.reserveringen-card .text-primary,
.reserveringen-card [class*="text-primary"] { color: var(--bordeaux) !important; }

/* ----- Confirmation ----- */
.reserveringen-confirm {
  text-align: center;
  padding: 48px 28px;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .1);
  border-radius: 28px;
  box-shadow:
    0 36px 80px -40px rgba(30, 20, 10, .35),
    0 8px 24px -16px rgba(30, 20, 10, .14);
}
@media (min-width: 768px) { .reserveringen-confirm { padding: 56px 44px; } }

.reserveringen-confirm-icon {
  display: grid; place-items: center;
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: rgba(45, 106, 79, .14);
  color: #2d6a4f;
  animation: successPop .5s cubic-bezier(.25, .9, .3, 1.5);
}
.reserveringen-confirm-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: var(--fs-block);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 8px 0 14px;
}
.reserveringen-confirm-title span { color: var(--bordeaux); font-style: italic; }
.reserveringen-confirm-lede {
  font-size: 15px; line-height: 1.6;
  color: var(--ink-soft);
  max-width: 460px;
  margin: 0 auto 28px;
}
.reserveringen-confirm-list {
  display: grid; gap: 0;
  margin: 0 0 24px;
  padding: 20px 22px;
  background: rgba(228, 179, 99, .1);
  border: 1px dashed rgba(228, 179, 99, .4);
  border-radius: 18px;
  text-align: left;
}
.reserveringen-confirm-list > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px dashed rgba(139, 90, 43, .14);
}
.reserveringen-confirm-list > div:last-child { border-bottom: 0; }
.reserveringen-confirm-list dt {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.reserveringen-confirm-list dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: right;
}
.reserveringen-confirm-list dd.is-mono {
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 13px;
}
.reserveringen-confirm-list dd.is-total { color: var(--bordeaux); font-size: 17px; }

.reserveringen-confirm-fineprint {
  font-size: 13px;
  color: var(--ink-soft);
  margin: 0 0 28px;
}
.reserveringen-confirm-fineprint strong { color: var(--ink); }

.reserveringen-confirm-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}

/* =========================================================================
   RESV WIDGET — Reserveringen booking component (wine theme)
   ========================================================================= */

.resv-widget {
  display: flex; flex-direction: column;
  gap: 0;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
}
.resv-widget [x-cloak] { display: none !important; }

.resv-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 36px 24px;
  background: rgba(228, 179, 99, .08);
  border: 1px dashed rgba(228, 179, 99, .4);
  border-radius: 18px;
  color: var(--muted);
  text-align: center;
  font-size: 14px;
}
.resv-empty svg { color: rgba(139, 90, 43, .4); }

.resv-section {
  padding: 18px 4px;
  border-bottom: 1px solid rgba(139, 90, 43, .12);
}
.resv-section:first-child { padding-top: 4px; }
.resv-section:last-child { border-bottom: 0; padding-bottom: 4px; }

.resv-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px;
}

.resv-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.resv-label span { color: var(--bordeaux); }
.resv-section-head .resv-label { margin-bottom: 0; }

.resv-hint {
  font-size: 11.5px;
  color: var(--muted);
  font-style: italic;
}
.resv-hint--selected {
  color: var(--bordeaux);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 12.5px;
}

/* ----- Type chips ----- */
.resv-type-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.resv-type {
  padding: 8px 14px;
  border-radius: 999px;
  border: 1.5px solid rgba(139, 90, 43, .18);
  background: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all .2s;
}
.resv-type:hover { border-color: var(--honey); transform: translateY(-1px); }
.resv-type.is-active {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
}
.resv-type-desc {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* ----- Date scroller ----- */
.resv-dates-wrap {
  position: relative;
}
.resv-dates-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid rgba(139, 90, 43, .18);
  background: #fff;
  color: var(--walnut);
  display: grid; place-items: center;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 4px 10px -4px rgba(30, 20, 10, .2);
}
.resv-dates-nav:hover {
  border-color: var(--honey);
  color: var(--bordeaux);
}
.resv-dates-nav:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .3);
}
.resv-dates-nav--prev { left: -14px; }
.resv-dates-nav--next { right: -14px; }

.resv-dates {
  display: flex; gap: 6px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 90, 43, .25) transparent;
  padding: 2px 14px 10px;
  scroll-snap-type: x mandatory;
}
.resv-dates::-webkit-scrollbar { height: 4px; }
.resv-dates::-webkit-scrollbar-track { background: transparent; }
.resv-dates::-webkit-scrollbar-thumb { background: rgba(139, 90, 43, .25); border-radius: 10px; }

.resv-dates-empty {
  padding: 16px 20px;
  font-size: 12.5px;
  color: var(--muted);
  font-style: italic;
}

.resv-date {
  flex-shrink: 0;
  scroll-snap-align: start;
  min-width: 62px;
  min-height: 74px;
  padding: 10px 6px 12px;
  border-radius: 12px;
  border: 1.5px solid rgba(139, 90, 43, .14);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  transition: all .2s;
  position: relative;
  font-family: 'Inter', system-ui, sans-serif;
}
.resv-date:hover:not(:disabled) {
  border-color: var(--honey);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px -6px rgba(228, 179, 99, .5);
}
.resv-date:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .38);
  z-index: 2;
}
.resv-date.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 8px 20px -10px rgba(61, 43, 31, .55);
}
/* Status-varianten */
.resv-date.is-partial:not(.is-selected) {
  border-color: rgba(228, 179, 99, .6);
  background: rgba(228, 179, 99, .06);
}
.resv-date.is-full:not(.is-selected),
.resv-date.is-blocked:not(.is-selected),
.resv-date.is-closed:not(.is-selected),
.resv-date.is-past:not(.is-selected) {
  opacity: .35;
  cursor: not-allowed;
  background: rgba(139, 90, 43, .04);
  border-color: transparent;
}
.resv-date.is-full:not(.is-selected):hover,
.resv-date.is-blocked:not(.is-selected):hover,
.resv-date.is-closed:not(.is-selected):hover,
.resv-date.is-past:not(.is-selected):hover {
  transform: none;
  box-shadow: none;
}
.resv-date:disabled { cursor: not-allowed; }

.resv-date-day {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.resv-date.is-selected .resv-date-day,
.resv-date.is-selected .resv-date-month { color: rgba(245, 239, 230, .72); }
.resv-date-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
}
.resv-date-month {
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}
.resv-date-badge {
  position: absolute;
  top: 6px; right: 6px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--honey);
  box-shadow: 0 0 0 2px #fff;
}

.resv-legend {
  display: flex; flex-wrap: wrap; gap: 10px 16px;
  margin-top: 6px;
  padding: 0 4px;
  font-size: 10.5px;
  color: var(--muted);
  font-family: 'Inter', system-ui, sans-serif;
}
.resv-legend > span {
  display: inline-flex; align-items: center; gap: 5px;
}
.resv-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.resv-legend-dot--empty   { background: #fff; border: 1.5px solid rgba(139, 90, 43, .4); }
.resv-legend-dot--partial { background: var(--honey); }
.resv-legend-dot--full    { background: rgba(139, 90, 43, .25); }
.resv-legend-dot--closed  { background: rgba(139, 90, 43, .12); }

/* ----- Slots ----- */
.resv-slots {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.resv-slot {
  padding: 11px 14px;
  border-radius: 12px;
  border: 1.5px solid rgba(139, 90, 43, .16);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: all .2s;
  display: flex; flex-direction: column; gap: 2px;
}
.resv-slot:hover:not(:disabled) { border-color: var(--honey); transform: translateY(-1px); }
.resv-slot:focus-visible { outline: none; border-color: var(--honey); box-shadow: 0 0 0 3px rgba(228, 179, 99, .3); }
.resv-slot.is-selected {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 8px 18px -8px rgba(61, 43, 31, .55);
}
.resv-slot.is-unavailable,
.resv-slot:disabled {
  opacity: .4;
  cursor: not-allowed;
  background: rgba(139, 90, 43, .04);
}
.resv-slot-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.resv-slot-meta {
  font-size: 11px;
  color: var(--muted);
}
.resv-slot.is-selected .resv-slot-meta { color: rgba(245, 239, 230, .72); }

/* ----- Arrangements ----- */
.resv-arrangements {
  display: grid; gap: 8px;
}
.resv-arr {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px solid rgba(139, 90, 43, .14);
  background: #fff;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.resv-arr:hover { border-color: var(--honey); }
.resv-arr:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(228, 179, 99, .32); border-color: var(--honey); }
.resv-arr.is-selected {
  background: rgba(228, 179, 99, .12);
  border-color: var(--honey);
}
.resv-arr-indicator {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(139, 90, 43, .25);
  background: #fff;
  transition: all .2s;
  position: relative;
  flex-shrink: 0;
}
.resv-arr.is-selected .resv-arr-indicator {
  border-color: var(--bordeaux);
  background: var(--bordeaux);
  box-shadow: inset 0 0 0 3px #fff;
}
.resv-arr-body { min-width: 0; }
.resv-arr-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.resv-arr-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.resv-arr-badge {
  padding: 2px 7px;
  background: var(--honey);
  color: var(--bordeaux);
  border-radius: 999px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.resv-arr-desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.resv-arr-price {
  display: flex; flex-direction: column; align-items: flex-end;
  text-align: right;
  white-space: nowrap;
}
.resv-arr-price-main {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  color: var(--bordeaux);
}
.resv-arr-price-sub {
  font-size: 11px;
  color: var(--muted);
}

/* ----- Form ----- */
.resv-section--form {
  display: flex; flex-direction: column; gap: 14px;
}
.resv-form-grid {
  display: grid; gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 480px) { .resv-form-grid { grid-template-columns: 1fr 1fr; } }

.resv-field {
  display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.resv-field .resv-label { margin-bottom: 0; }

.resv-input {
  width: 100%;
  padding: 11px 14px;
  background: #fff;
  border: 1.5px solid rgba(139, 90, 43, .16);
  border-radius: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
  transition: all .2s;
  min-height: 42px;
}
.resv-input::placeholder { color: rgba(139, 90, 43, .45); }
.resv-input:hover { border-color: rgba(139, 90, 43, .32); }
.resv-input:focus-visible {
  outline: none;
  border-color: var(--honey);
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .22);
}
.resv-textarea { min-height: 80px; resize: vertical; }

.resv-total {
  padding: 10px 14px;
  background: rgba(228, 179, 99, .16);
  border-radius: 10px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  color: var(--bordeaux);
  letter-spacing: -0.015em;
  min-height: 42px;
  display: flex; align-items: center;
}

.resv-error {
  padding: 10px 14px;
  background: rgba(196, 87, 59, .08);
  border: 1px solid rgba(196, 87, 59, .3);
  border-radius: 10px;
  color: #c4573b;
  font-size: 13px;
}

.resv-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: var(--bordeaux);
  color: var(--cream);
  border: 0;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all .2s;
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
  min-height: 48px;
}
.resv-submit:hover:not(:disabled) {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(61, 43, 31, .7);
}
.resv-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .5), 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.resv-submit:disabled { opacity: .55; cursor: not-allowed; }
.resv-submit svg { transition: transform .2s; }
.resv-submit:hover:not(:disabled) svg { transform: translateX(3px); }

.resv-fineprint {
  font-size: 11.5px;
  color: var(--muted);
  text-align: center;
  margin: 22px 0 0;
  padding-top: 18px;
  border-top: 1px dashed rgba(139, 90, 43, .14);
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .resv-type, .resv-date, .resv-slot, .resv-arr,
  .resv-dates-nav, .resv-submit, .resv-input { transition: none; }
  .resv-date:hover:not(:disabled),
  .resv-slot:hover:not(:disabled),
  .resv-submit:hover:not(:disabled) { transform: none; }
}

/* =========================================================================
   RESV WIZARD — step indicator, pane transitions, totals, payment
   ========================================================================= */

.resv-wizard {
  display: flex;
  flex-direction: column;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  min-height: 560px;
}
@media (min-width: 640px)  { .resv-wizard { min-height: 600px; } }
@media (min-width: 1024px) { .resv-wizard { min-height: 640px; } }
.resv-wizard [x-cloak] { display: none !important; }
.resv-wizard > .resv-pane { flex: 1 1 auto; }
.resv-wizard > .resv-nav { margin-top: auto; }

/* ----- Step indicator ----- */
.resv-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 24px;
  padding-bottom: 4px;
}
.resv-step {
  flex: 1;
  min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: transparent;
  border: 0; padding: 0;
  cursor: pointer;
  color: var(--muted);
  transition: color .2s;
  position: relative;
  z-index: 2;
}
.resv-step:disabled { cursor: not-allowed; }
.resv-step.is-reachable:hover:not(.is-active) { color: var(--ink-soft); }
.resv-step.is-active,
.resv-step.is-complete { color: var(--bordeaux); }

.resv-step-num {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--cream);
  border: 1.5px solid rgba(139, 90, 43, .22);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  transition: all .25s cubic-bezier(.2, .7, .2, 1);
}
.resv-step.is-active .resv-step-num {
  background: var(--bordeaux);
  color: var(--cream);
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(228, 179, 99, .26), 0 8px 18px -10px rgba(61, 43, 31, .5);
  transform: scale(1.06);
}
.resv-step.is-complete .resv-step-num {
  background: var(--honey);
  color: var(--bordeaux);
  border-color: transparent;
}
.resv-step:focus-visible { outline: none; }
.resv-step:focus-visible .resv-step-num {
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .5);
}

.resv-step-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.2;
}
@media (max-width: 520px) {
  .resv-step-label { font-size: 9px; letter-spacing: 0.04em; }
  .resv-step-num   { width: 30px; height: 30px; font-size: 13px; }
}

.resv-steps-progress {
  position: absolute;
  top: 17px;
  left: 17px; right: 17px;
  height: 2px;
  background: rgba(139, 90, 43, .14);
  border-radius: 999px;
  z-index: 1;
  overflow: hidden;
}
@media (max-width: 520px) { .resv-steps-progress { top: 15px; } }
.resv-steps-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--honey), var(--bordeaux));
  border-radius: 999px;
  transition: width .45s cubic-bezier(.2, .7, .2, 1);
}

/* ----- Pane transitions ----- */
.resv-pane { min-height: 320px; }
.resv-enter { transition: opacity .3s ease, transform .35s cubic-bezier(.2, .7, .2, 1); }
.resv-enter-start { opacity: 0; transform: translateY(10px); }
.resv-enter-end { opacity: 1; transform: translateY(0); }

/* ----- Stepper (personen) ----- */
.resv-stepper {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 8px 12px;
  background: #fff;
  border: 1.5px solid rgba(139, 90, 43, .16);
  border-radius: 999px;
  box-shadow: 0 8px 20px -12px rgba(30, 20, 10, .18);
}
.resv-stepper button {
  width: 40px; height: 40px;
  border-radius: 999px;
  border: 0;
  background: rgba(228, 179, 99, .14);
  color: var(--bordeaux);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background .2s, transform .15s;
}
.resv-stepper button:hover:not(:disabled) {
  background: var(--honey);
  transform: scale(1.06);
}
.resv-stepper button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .45);
}
.resv-stepper button:disabled {
  color: rgba(139, 90, 43, .3);
  cursor: not-allowed;
}
.resv-stepper-value {
  display: flex; flex-direction: column; align-items: center;
  min-width: 110px;
}
.resv-stepper-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--bordeaux);
  font-variant-numeric: tabular-nums;
}
.resv-stepper-word {
  margin-top: 2px;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.resv-stepper-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  color: var(--muted);
}

/* ----- Form grid (stap 3) ----- */
.resv-field--full { grid-column: 1 / -1; }
.resv-field-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 4px;
  display: block;
}
.resv-field-label span { color: var(--bordeaux); }

/* ----- Arrangement tweaks voor stap 1 ----- */
.resv-arr-includes {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 8px;
}
.resv-arr-includes li {
  font-size: 11px;
  color: var(--ink-soft);
  padding-left: 14px;
  position: relative;
}
.resv-arr-includes li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--honey);
}
.resv-arr-meta {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ----- Review (stap 4) ----- */
.resv-review {
  background: rgba(228, 179, 99, .08);
  border: 1px dashed rgba(228, 179, 99, .45);
  border-radius: 18px;
  padding: 18px 22px;
}
.resv-review-list {
  display: grid; gap: 0;
  margin: 0; padding: 0;
}
.resv-review-list > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px dashed rgba(139, 90, 43, .18);
}
.resv-review-list > div:last-child { border-bottom: 0; }
.resv-review-list dt {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  flex-shrink: 0;
}
.resv-review-list dt svg { color: var(--honey); flex-shrink: 0; }
.resv-review-list dd {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-align: right;
}

/* ----- Totals ----- */
.resv-section--totals {
  display: flex; flex-direction: column; gap: 14px;
}
.resv-totals {
  background: linear-gradient(135deg, var(--bordeaux) 0%, var(--bordeaux-deep) 100%);
  color: var(--cream);
  border-radius: 18px;
  padding: 18px 22px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 16px 32px -18px rgba(61, 43, 31, .55);
}
.resv-totals-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
}
.resv-totals-row span em {
  font-style: normal;
  font-size: 11px;
  opacity: .7;
  margin-left: 4px;
}
.resv-totals-main {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
}
.resv-totals-row--deposit {
  padding-top: 10px;
  border-top: 1px dashed rgba(245, 239, 230, .22);
  font-weight: 600;
}
.resv-totals-deposit {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--honey);
  letter-spacing: -0.02em;
}
.resv-totals-row--rest {
  font-size: 12px;
  opacity: .7;
}

.resv-payment-info {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: rgba(228, 179, 99, .1);
  border: 1px solid rgba(228, 179, 99, .3);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-soft);
  line-height: 1.4;
}
.resv-payment-info svg { color: var(--bordeaux); flex-shrink: 0; }

/* ----- Nav bar ----- */
.resv-nav {
  display: flex; align-items: center; gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(139, 90, 43, .14);
}
.resv-nav-spacer { flex: 1; }

.resv-nav-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: all .2s;
  min-height: 44px;
  white-space: nowrap;
}
.resv-nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(228, 179, 99, .45);
}
.resv-nav-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border: 1.5px solid rgba(139, 90, 43, .18);
}
.resv-nav-btn--ghost:hover:not(:disabled) {
  border-color: var(--honey);
  color: var(--bordeaux);
  background: rgba(228, 179, 99, .08);
}
.resv-nav-btn--ghost svg { transition: transform .2s; }
.resv-nav-btn--ghost:hover:not(:disabled) svg { transform: translateX(-3px); }

.resv-nav-btn--primary {
  background: var(--bordeaux);
  color: var(--cream);
  box-shadow: 0 10px 22px -10px rgba(61, 43, 31, .55);
}
.resv-nav-btn--primary:hover:not(:disabled) {
  background: var(--bordeaux-deep);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -8px rgba(61, 43, 31, .7);
}
.resv-nav-btn--primary svg { transition: transform .2s; }
.resv-nav-btn--primary:hover:not(:disabled) svg { transform: translateX(3px); }
.resv-nav-btn--primary:disabled {
  background: rgba(139, 90, 43, .24);
  color: rgba(245, 239, 230, .6);
  box-shadow: none;
  cursor: not-allowed;
}

.resv-nav-btn--pay {
  background: linear-gradient(135deg, var(--bordeaux), var(--bordeaux-deep));
  color: var(--cream);
  padding: 14px 24px;
  font-size: 14px;
  box-shadow: 0 14px 30px -10px rgba(228, 179, 99, .4), 0 6px 16px -8px rgba(61, 43, 31, .5);
  position: relative;
}
.resv-nav-btn--pay::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--honey), var(--bordeaux));
  z-index: -1;
  opacity: 0;
  transition: opacity .3s;
}
.resv-nav-btn--pay:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 38px -10px rgba(228, 179, 99, .55), 0 8px 20px -8px rgba(61, 43, 31, .55);
}
.resv-nav-btn--pay:hover:not(:disabled)::before { opacity: 1; }
.resv-nav-btn--pay:disabled {
  background: rgba(139, 90, 43, .24);
  color: rgba(245, 239, 230, .6);
  box-shadow: none;
  cursor: not-allowed;
}
.resv-nav-btn--pay svg { transition: transform .2s; }
.resv-nav-btn--pay:hover:not(:disabled) svg { transform: translateX(3px); }

/* Mobiel: sticky bottom nav */
@media (max-width: 640px) {
  .resv-nav {
    position: sticky;
    bottom: 8px;
    margin-top: 20px;
    padding: 10px;
    background: rgba(245, 239, 230, .96);
    border: 1px solid rgba(139, 90, 43, .14);
    border-top: 1px solid rgba(139, 90, 43, .14);
    border-radius: 999px;
    box-shadow: 0 10px 30px -10px rgba(30, 20, 10, .3);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    z-index: 10;
  }
  .resv-nav-btn { padding: 11px 14px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .resv-enter, .resv-step-num, .resv-steps-progress-bar,
  .resv-nav-btn, .resv-stepper button { transition: none; }
  .resv-step.is-active .resv-step-num { transform: none; }
}

/* ====================================================================
   HERO · portrait tablet (tall viewports)
   ---
   Op staand tablet blijft hero volledig (100vh-40) zodat sectie 2 niet
   zichtbaar is onder de fold. We centreren alleen de content VERTICAAL
   binnen de hero zodat het hoofd-blok op de ooghoogte landt i.p.v.
   bovenaan vastgeplakt.
   ==================================================================== */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
  :root { --hero-pt: 150px; --hero-pb: 120px; }
}

/* ====================================================================
   BACK TO TOP — druiventros boven een honey-cirkel met pijl
   ==================================================================== */
.to-top {
  /* De zichtbare knop is de cirkel; die zit --to-top-pad binnen de container,
     want de blaadjes steken links en boven uit. Door die afstand van de inset
     af te trekken staat de cirkel even ver van de rand als de Tebi-knop links,
     en op precies dezelfde hoogte. */
  --to-top-pad: 14px;
  position: fixed;
  right: calc(var(--fab-inset) - var(--to-top-pad));
  bottom: calc(var(--fab-inset) - var(--to-top-pad));
  width: 110px;
  height: 110px;
  z-index: 60;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s ease, transform .35s ease;
  pointer-events: none;
}
.to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.to-top__leaves {
  position: absolute;
  bottom: 7px;
  left: -10px;
  width: 70px;
  height: auto;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  opacity: .9;
  filter: drop-shadow(0 4px 8px rgba(10, 6, 3, .35));
  transition: transform .4s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.to-top__circle {
  position: absolute;
  bottom: 14px;
  right: 14px;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--honey);
  border: 2px solid var(--honey);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(10, 6, 3, .35), inset 0 1px 0 rgba(255,255,255,.06);
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
  z-index: 1;
}
.to-top:hover .to-top__leaves {
  transform: rotate(-93deg) translate(0, -1px);
  opacity: 1;
}
.to-top:hover .to-top__circle {
  transform: translateY(-2px);
  background: var(--ink-soft);
  border-color: var(--honey-soft);
}
.to-top:focus-visible {
  outline: none;
}
.to-top:focus-visible .to-top__circle {
  outline: 2px solid var(--honey);
  outline-offset: 3px;
}
@media (max-width: 640px) {
  .to-top { --to-top-pad: 12px; width: 96px; height: 96px; }
  .to-top__circle { width: 48px; height: 48px; bottom: 12px; right: 12px; }
  .to-top__leaves { width: 60px; bottom: 6px; left: -8px; }
}

/* ----- Tebi-reserveringswidget -----
   De widget plaatst zichzelf rechtsonder; daar staat onze naar-boven-knop.
   We zetten hem daarom links, op dezelfde hoogte. Tebi schrijft zijn positie
   inline, vandaar !important. Zodra de widget opengaat op een smal scherm
   zet Tebi 'width: 100%' en gaat hij schermvullend; die stand laten we met
   rust, anders steekt hij aan de rechterkant buiten beeld. */
#tebi_rs_01:not([style*="width: 100%"]) {
  left: calc(var(--fab-inset) + env(safe-area-inset-left, 0px)) !important;
  right: auto !important;
  bottom: calc(var(--fab-inset) + env(safe-area-inset-bottom, 0px)) !important;
}
@media (prefers-reduced-motion: reduce) {
  .to-top,
  .to-top__grape,
  .to-top__circle { transition: opacity .15s ease; }
}

/* ============================================
   THEMED SCROLLBAR — wijndomein bordeaux + honey
   Globale, dunne scrollbar die past bij de site-stijl.
   ============================================ */

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 90, 43, 0.35) transparent;
}

/* Webkit / Chromium */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(139, 90, 43, 0.35);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background-color 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(228, 179, 99, 0.7);
  background-clip: content-box;
}

::-webkit-scrollbar-corner {
  background: transparent;
}


/* =========================================================
   Interieur-pagina's: Bezoek / Educatie / Culinair / Onze filosofie
   Eigen classes — onafhankelijk van de statische tailwind.min.css,
   zodat hero's netjes onder de nav vallen en de layout klopt.
   ========================================================= */
/* De inhoudelijke pagina's (educatie, culinair, filosofie) gebruiken dezelfde
   fotohero als home, wijn en alcoholvrij. Alleen de foto is pagina-eigen; de
   maatvoering komt uit .hero / .hero-shell / .hero-panel. */
.wd-photo-hero { position: relative; isolation: isolate; background: var(--ink); }
.wd-photo-hero-bg,
.wd-photo-hero-scrim { position: absolute; inset: 0; }
.wd-photo-hero-bg { z-index: -2; background-position: center; background-size: cover; transform: scale(1.015); }
.wd-photo-hero-scrim { z-index: -1; background: linear-gradient(180deg, rgba(18,10,5,.68) 0%, rgba(18,10,5,.57) 42%, rgba(18,10,5,.84) 100%), radial-gradient(circle at 50% 45%, rgba(18,10,5,.08) 0%, rgba(18,10,5,.3) 72%); }
.wd-photo-hero--educatie .wd-photo-hero-bg { background-image: url('../images/oogst/tros-in-de-rank.jpg'); background-position: center 55%; }
.wd-photo-hero--culinair .wd-photo-hero-bg { background-image: url('../images/culinair/gerecht-met-witte-wijn.jpg'); background-position: center 55%; }
.wd-photo-hero--filosofie .wd-photo-hero-bg { background-image: url('../images/oogst/wijngaard-pad.jpg'); background-position: center 58%; }
.wd-photo-hero .hero-title { text-shadow: 0 3px 24px rgba(10,6,3,.35); }


.wd-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 600px) { .wd-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .wd-grid--3 { grid-template-columns: 1fr 1fr 1fr; } .wd-grid--4 { grid-template-columns: repeat(4, 1fr); } }

/* De evenementkaart is gebouwd voor de horizontale strook op de homepage en
   heeft daar een vaste breedte en scroll-snap. In een raster moet hij die
   juist loslaten en de kolom vullen. */
.wd-grid--ev > .ev-card {
  width: auto;
  max-width: none;
  flex: initial;
  scroll-snap-align: none;
}

.wd-card { display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(46,26,15,.10); border-radius: 20px; padding: 1.75rem; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.wd-card:hover { transform: translateY(-4px); border-color: rgba(228,179,99,.6); box-shadow: 0 14px 30px rgba(46,26,15,.10); }
.wd-card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; color: var(--bordeaux-deep); margin: 0; }
.wd-card-meta { margin: .5rem 0 0; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--oak); }
.wd-card-text { margin: .75rem 0 0; flex: 1; font-size: 14.5px; line-height: 1.6; color: #5a3d2a; }
.wd-card-link { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: .45rem; font-size: 14px; font-weight: 600; color: var(--bordeaux-deep); text-decoration: none; }
.wd-card-link:hover { color: #8b5a2b; }
.wd-card-link svg { transition: transform .15s ease; }
.wd-card-link:hover svg { transform: translate(2px,-2px); }


.wd-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #8b5a2b; display: inline-flex; align-items: center; gap: .6rem; }
.wd-eyebrow::before { content: ""; width: 28px; height: 1px; background: rgba(139,90,43,.5); }
.wd-prose-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: var(--fs-block); line-height: 1.15; color: var(--bordeaux-deep); margin: .5rem 0 0; }
.wd-prose-title em { color: #8b5a2b; font-style: italic; }
.wd-figure { margin: 0; }
.wd-figure img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 18px 40px -24px rgba(46,26,15,.45); }
.wd-figure figcaption { margin: .85rem 0 0; font-size: 13.5px; line-height: 1.55; color: rgba(90,61,42,.8); }

/* Filosofie, educatie en culinair zijn later gebouwd dan home, wijn en
   alcoholvrij en kregen daardoor een smalle gecentreerde tekstkolom. Deze
   bouwstenen trekken ze naar hetzelfde editorial ritme als de rest van de
   site: volle sectiebreedte, een kop naast de tekst in plaats van erboven,
   en dezelfde koptypografie (.sec-title) als de andere pagina's. */
.wd-editorial { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 980px) {
  .wd-editorial { grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 5rem; align-items: start; }
  /* De kop loopt mee zolang de bijbehorende tekst in beeld is. */
  .wd-editorial-head { position: sticky; top: 130px; }
}
.wd-editorial-body > p { margin: 0; font-size: 16.5px; line-height: 1.75; color: var(--ink-soft); }
.wd-editorial-body > p + p { margin-top: 1.15rem; }
.wd-editorial-body > .wd-figure { margin-top: 2rem; }
/* In een halve kolom is de volle sectiekop te groot; de bovengrens zakt mee. */
.wd-editorial .sec-title,
.wd-split .sec-title { max-width: 100%; }
.wd-split .hl-text:first-of-type { margin-top: 1.4rem; }

/* Beeld en tekst naast elkaar, zoals de uitgelichte blokken op home. Eigen
   klasse omdat de verhouding hier rustiger mag: meer ruimte voor de tekst. */
/* Beeld naast tekst. Gebruikt op /culinair, /educatie en /onze-filosofie.

   Het vak volgt de verhouding van de foto zelf, niet andersom. Stond eerder op
   een vaste 4:3 terwijl de meeste foto's 3:2 zijn: dan snijdt `cover` er een
   rand af, en bij een gerecht op een bord zie je dat meteen. Wijkt een foto af,
   zet dan `--beeld-ratio` in de style van dat ene element.

   De beeldkolom is bewust breder dan de tekstkolom, zodat de foto het blok
   draagt en de hoogtes dicht bij elkaar liggen. Onder 980px staan ze gewoon
   onder elkaar. */
.wd-split { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 980px) {
  .wd-split { grid-template-columns: 1.15fr .85fr; gap: 3.5rem; }
  .wd-split--rev .wd-split-media { order: 2; }
}
.wd-split-media {
  position: relative;
  aspect-ratio: var(--beeld-ratio, 3 / 2);
  border-radius: 28px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--cream-warm);
  box-shadow:
    0 34px 64px -34px rgba(46, 26, 15, .55),
    0 10px 22px -16px rgba(46, 26, 15, .3);
}
/* Dunne lichte binnenrand: houdt de foto van de crème achtergrond gescheiden
   zonder er een harde lijn omheen te leggen. */
.wd-split-media::before {
  content: "";
  position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(245, 239, 230, .18);
}
.wd-split-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(30, 20, 12, 0) 42%, rgba(30, 20, 12, .5) 78%, rgba(30, 20, 12, .78) 100%);
}
.wd-split-cap {
  position: absolute; z-index: 2;
  left: 1.75rem; right: 1.75rem; bottom: 1.6rem;
  color: rgba(245, 239, 230, .92);
  font-size: 13px; line-height: 1.5; letter-spacing: .01em;
  text-wrap: pretty;
  text-shadow: 0 1px 8px rgba(20, 12, 6, .55);
}
/* Streepje boven het bijschrift, hetzelfde accent als de sectie-eyebrows. */
.wd-split-cap::before {
  content: "";
  display: block;
  width: 26px; height: 1px;
  background: var(--honey);
  margin-bottom: 10px;
}
@media (max-width: 640px) {
  .wd-split-cap { left: 1.25rem; right: 1.25rem; bottom: 1.2rem; font-size: 12.5px; }
}


/* Educatie: de vijf stappen uit het contentdocument. */
.education-steps { background: var(--cream-warm); padding-block: var(--section-py); padding-inline: var(--section-px); }
.education-steps-inner { max-width: 1120px; margin: 0 auto; }
.education-steps-head { text-align: center; margin-bottom: 2rem; }
.education-steps-head .wd-eyebrow { justify-content: center; }
.education-steps-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.education-step { position: relative; display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; border: 1px solid rgba(90,61,42,.13); border-radius: 20px; background: var(--paper); color: var(--bordeaux-deep); box-shadow: 0 10px 24px rgba(46,26,15,.05); font-family: 'Fraunces', Georgia, serif; font-size: 19px; }
.education-step svg { width: 34px; height: 34px; color: var(--oak); }
.education-step-number { position: absolute; top: .8rem; left: .9rem; font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .14em; color: rgba(90,61,42,.55); }
@media (max-width: 820px) { .education-steps-grid { grid-template-columns: repeat(2, 1fr); } .education-step:last-child { grid-column: 1 / -1; } }
@media (max-width: 460px) { .education-steps-grid { grid-template-columns: 1fr; } .education-step:last-child { grid-column: auto; } .education-step { min-height: 118px; } }

/* Cursusaanbod nog een keer, compact, vlak boven de inschrijf-CTA op
   /educatie. Geen tweede kaartenraster: alleen wat je nodig hebt om te kiezen,
   anders leest de pagina twee keer hetzelfde.

   De ruimte onder de kop staat hier en niet als Tailwind-klasse in de view:
   tailwind.min.css is een vooraf gebouwd bestand, dus een klasse die daar niet
   in zit (mb-10 bijvoorbeeld) levert stilzwijgend geen marge op. */
.edu-recap-head { margin-bottom: 48px; }
@media (max-width: 767px) { .edu-recap-head { margin-bottom: 36px; } }

.edu-recap {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .edu-recap { grid-template-columns: 1fr 1fr; gap: 14px; } }
.edu-recap-item a {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px 16px;
  padding: 20px 24px;
  border-radius: 18px;
  background: var(--cream);
  border: 1px solid rgba(139, 90, 43, .12);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.edu-recap-item a:hover {
  border-color: rgba(228, 179, 99, .7);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(30, 20, 10, .35);
}
.edu-recap-naam {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--bordeaux-deep);
  line-height: 1.25;
}
.edu-recap-meta {
  grid-column: 1;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--walnut);
}
.edu-recap-pijl {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: var(--oak);
  transition: transform .2s ease;
}
.edu-recap-item a:hover .edu-recap-pijl { transform: translate(3px, -3px); }

/* Afsluitende uitnodiging. Groen en niet bordeaux, op verzoek van de
   opdrachtgever: hetzelfde donkergroen als het vergaderblok op de homepage,
   zodat de twee uitnodigende vlakken op de site dezelfde kleur spreken. */
.wd-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.75rem;
  background:
    radial-gradient(620px 320px at 12% 0%, rgba(228, 179, 99, .22), transparent 62%),
    linear-gradient(160deg, var(--forest-deep) 0%, var(--forest) 55%, var(--forest-soft) 100%);
  color: var(--cream);
  border-radius: 28px;
  padding: 2.5rem 2rem;
  margin-top: 3rem;
}
@media (min-width: 900px) {
  .wd-cta { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; padding: 3rem 3.25rem; }
}
.wd-cta-body { max-width: 640px; }
.wd-cta-eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--honey-soft);
  margin-bottom: 12px;
}
.wd-cta-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
}
.wd-cta-title em { font-style: italic; color: var(--honey-soft); }
.wd-cta-text { margin: 1rem 0 0; font-size: 15.5px; line-height: 1.6; color: rgba(245, 239, 230, .78); }
.wd-cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; flex-shrink: 0; }

/* =========================================================================
   HOMEPAGE — uitgelichte evenementen (carrousel) + educatie/culinair blokken
   Toegevoegd n.a.v. klant-voorstel (Dylan). Zelfde editorial stijl; eigen
   classes zodat geen Tailwind-build nodig is.
   ========================================================================= */

/* ---- Uitgelicht: horizontaal scrollbare evenementen-carrousel ---- */
.ev-strip { position: relative; }
.ev-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Ruime symmetrische verticale padding zodat de kaart-schaduw NIET wordt afgekapt
     (overflow-x:auto dwingt overflow-y ook naar auto). Symmetrisch, dus pijl-centrering
     (top:50%) blijft exact op het kaartmidden. Kop-/knop-marges eromheen compenseren
     de extra hoogte (zie mb-2 op de kop en mt-10 op de knop). */
  padding: 48px 4px;
  margin: 0 -4px;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  scrollbar-width: none;          /* Firefox: verberg scrollbalk */
  -ms-overflow-style: none;
}
.ev-track::-webkit-scrollbar { display: none; }   /* WebKit: verberg scrollbalk */
.ev-track.is-dragging { cursor: grabbing; scroll-behavior: auto; scroll-snap-type: none; }
.ev-track.is-dragging a { pointer-events: none; }
.ev-card {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: min(360px, 82vw);
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid rgba(46,26,15,.10);
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none; color: inherit;
  box-shadow: 0 4px 14px rgba(46,26,15,.05);   /* subtiele rustschaduw */
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (min-width: 900px) { .ev-card { width: calc((1280px - 3rem) / 3); max-width: 400px; } }
.ev-card:hover { transform: translateY(-4px); border-color: rgba(228,179,99,.6); box-shadow: 0 14px 30px rgba(46,26,15,.13); }
.ev-card-img { position: relative; aspect-ratio: 3 / 2; background-size: cover; background-position: center; background-color: var(--cream-warm); }
.ev-card-cat {
  position: absolute; top: .8rem; left: .8rem;
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; background: var(--cat, #c4573b);
  padding: .3rem .6rem; border-radius: 999px;
}
.ev-card-body { display: flex; flex-direction: column; gap: .5rem; padding: 1.35rem 1.35rem 1.45rem; flex: 1; }
.ev-card-date { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--oak); }
.ev-card-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 20px; line-height: 1.2; color: var(--bordeaux-deep); margin: 0; }
.ev-card-text { font-size: 14px; line-height: 1.55; color: var(--ink-soft); margin: 0; flex: 1; }
.ev-card-foot { display: flex; align-items: center; justify-content: space-between; margin-top: .6rem; }
.ev-card-price { font-size: 14px; font-weight: 600; color: var(--bordeaux); }
.ev-card-arrow { display: inline-flex; color: var(--oak); transition: transform .15s ease; }
.ev-card:hover .ev-card-arrow { transform: translate(3px,-3px); }

/* Zij-pijlen: schuiven per kaart door, verdwijnen aan begin/eind */
.ev-arrow {
  /* Verticaal exact op het midden van de KAART. Kaarten zijn even hoog (flex-stretch)
     en de track heeft symmetrische verticale padding, dus top:50% == kaartmidden.
     Pixel-perfect op elk scherm, geen JS-meting nodig. */
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 10;   /* altijd boven de (hover-)kaartschaduw */
  width: 52px; height: 52px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--bordeaux); color: var(--cream);
  border: 1px solid rgba(245,239,230,.15);
  box-shadow: 0 12px 28px rgba(46,26,15,.30);
  cursor: pointer;
  transition: transform .15s ease, opacity .2s ease, background .15s ease, visibility .2s;
}
.ev-arrow:hover { background: var(--bordeaux-deep); transform: translateY(-50%) scale(1.07); }
.ev-arrow:active { transform: translateY(-50%) scale(.96); }
/* -26px = halve knopbreedte: cirkel-midden valt exact op de kaartrand (half erover) */
.ev-arrow--prev { left: -26px; }
.ev-arrow--next { right: -26px; }
.ev-arrow[disabled] { opacity: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 640px) {
  .ev-arrow { width: 44px; height: 44px; }
  .ev-arrow--prev { left: -22px; }   /* halve knopbreedte (44/2) */
  .ev-arrow--next { right: -22px; }
}

/* ---- Educatie / Culinair uitgelichte blokken (media + tekst) ---- */
.hl-row { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; }
@media (min-width: 900px) {
  .hl-row { grid-template-columns: 1.05fr .95fr; gap: 3.5rem; }
  .hl-row--rev .hl-media { order: 2; }
}
.hl-media {
  position: relative; aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--cream-warm);
  box-shadow: 0 20px 50px rgba(46,26,15,.14);
}
.hl-media::after { content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(30,20,12,0) 45%, rgba(30,20,12,.45)); }
.hl-media-tag {
  position: absolute; z-index: 2; left: 1.2rem; bottom: 1.1rem;
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--cream);
}
.hl-title { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: var(--fs-block); line-height: 1.15; color: var(--bordeaux-deep); margin: .5rem 0 0; }
.hl-title em { color: var(--oak); font-style: italic; }
.hl-text { margin: 1.1rem 0 0; font-size: 16px; line-height: 1.7; color: var(--ink-soft); }
.hl-actions { margin-top: 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; }

/* ================= WINKELWAGEN · BEVESTIGING =================
   De bestelknop wisselde alleen kort van label naar "Bezig...", waardoor
   bezoekers niet doorhadden dat er iets gebeurd was. Twee signalen nu:
   de knop bevestigt zichzelf, en een melding zegt waar het product heen ging
   met een directe link naar het mandje.

   Positie en vormtaal volgen bewust de cookiebanner: onderaan gecentreerd,
   dezelfde crème-pil met blur, en dezelfde opkomst van 16px omhoog. Die plek
   is op deze site al de vaste plaats voor een tijdelijke melding. */

.cart-toast {
  position: fixed;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  /* Net onder de cookiebanner (90), ruim boven de knop naar boven (60). */
  z-index: 88;
  width: max-content;
  max-width: calc(100vw - 24px);

  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: .85rem 1.1rem;

  border-radius: 22px;
  background: rgba(245, 239, 230, .82);
  border: 1px solid rgba(228, 179, 99, .28);
  backdrop-filter: blur(15px) saturate(150%);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  box-shadow: 0 16px 38px -16px rgba(30, 20, 10, .34);
  color: var(--ink);

  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 16px);
  /* Verdwijnen mag sneller dan verschijnen: dat voelt reactiever.
     visibility schakelt pas na de fade, anders knipt de melding weg. */
  transition:
    opacity    .15s ease-in,
    transform  .15s ease-in,
    visibility 0s linear .15s;
}

.cart-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity    .22s cubic-bezier(.16, 1, .3, 1),
    transform  .22s cubic-bezier(.16, 1, .3, 1),
    visibility 0s;
}

/* Op smalle schermen vult de melding vrijwel de hele breedte en botst ze met de
   twee zwevende knoppen onderin: de knop naar boven (tot 112px boven de onderrand)
   en de Tebi-reserveerknop (tot 64px, en met z-index 10011 zou die er bovenop
   liggen). Gemeten op 390x844. Vandaar dat de melding daar hoger staat; op
   desktop is de ruimte tussen beide knoppen breed genoeg. */
@media (max-width: 767px) {
  .cart-toast { bottom: calc(124px + env(safe-area-inset-bottom, 0px)); }
}

/* Staat de cookiebanner nog in beeld, dan schuift de melding erboven in plaats
   van eroverheen. Werkt alleen omdat de banner in de layout vóór de melding
   staat; een zustercombinator kijkt uitsluitend vooruit. */
#cookieConsent.show ~ .cart-toast {
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
}

@media (max-width: 767px) {
  #cookieConsent.show ~ .cart-toast { bottom: calc(198px + env(safe-area-inset-bottom, 0px)); }
}

@media (min-width: 1024px) {
  .cart-toast { max-width: 460px; }
}

.cart-toast-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--forest-soft);
  color: var(--cream);
}

.cart-toast.is-error .cart-toast-icon { background: var(--danger); }

.cart-toast-body { flex: 1 1 auto; min-width: 0; }

.cart-toast-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.cart-toast-detail {
  margin: .15rem 0 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-soft);
}

.cart-toast-link {
  display: inline-block;
  margin-top: .45rem;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--oak);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .2s ease;
}

.cart-toast-link:hover { color: var(--bordeaux); }

.cart-toast-close {
  flex: 0 0 auto;
  /* Visueel klein, maar het raakvlak haalt de 44px-eis. */
  width: 44px;
  height: 44px;
  margin: -.7rem -.8rem -.7rem 0;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: color .2s ease, background .2s ease;
}

.cart-toast-close:hover {
  color: var(--ink);
  background: rgba(26, 20, 16, .06);
}

/* Bevestiging op de knop zelf. Werkt over de drie bestaande knopstijlen heen,
   vandaar het data-attribuut: dat wint van .btn-primary zonder !important. */
[data-cart-button].is-added {
  background: var(--forest-soft);
  border-color: var(--forest-soft);
  color: var(--cream);
  box-shadow: 0 10px 24px -10px rgba(58, 76, 59, .7);
}

[data-cart-button][disabled] { cursor: progress; }

@media (prefers-reduced-motion: no-preference) {
  [data-cart-button].is-added { animation: cart-added-pop .3s cubic-bezier(.16, 1, .3, 1); }
}

@keyframes cart-added-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  /* Alleen de beweging weghalen. De translate blijft nodig, die centreert. */
  .cart-toast,
  .cart-toast.is-visible {
    transform: translate(-50%, 0);
    transition: opacity .01ms linear, visibility .01ms linear;
  }
}

/* ================= FOOTER · MERKKOLOM =================
   De markup vroeg met lg:text-left en lg:mx-0 om links uitlijnen vanaf 1024px,
   maar die twee utilities zitten niet in de meegeleverde tailwind.min.css.
   Daardoor won text-center overal en stond de tekst gecentreerd onder een logo
   dat links stond. Vandaar hier, in de eigen stylesheet.

   Links op elk formaat, zodat het merkblok dezelfde leesrand houdt als de
   kolommen ernaast en eronder. */
.foot-brand { text-align: left; }

.foot-tagline {
  max-width: 320px;
  margin-inline: 0;
}

/* Onderste regel: drie vakken van gelijke breedte. Daardoor staat de tractor
   precies in het midden van de footer, los van hoe lang de teksten links en
   rechts zijn. Op smalle schermen onder elkaar en gecentreerd. */
.foot-bottom {
  display: grid;
  gap: 1rem;
  justify-items: center;
  text-align: center;
}

@media (min-width: 768px) {
  .foot-bottom {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: left;
  }
  .foot-bottom > :first-child { justify-self: start; }
  .foot-bottom > :last-child  { justify-self: end; text-align: right; }
}

/* De tractor is sfeer, geen inhoud: ingetogen van dekking zodat hij de
   gegevens ernaast niet overstemt. */
.foot-tractor {
  display: block;
  width: 62px;
  opacity: .55;
}

.foot-tractor img {
  display: block;
  width: 100%;
  height: auto;
}

/* ================= FOOTER · MOBIEL =================
   Twee dingen liepen mis op een telefoon.

   1. De credits verdwenen onder de zwevende knoppen. Die bezetten de onderste
      112px van het scherm (de knop naar boven vanaf y=732 op 390x844, de
      Tebi-knop vanaf y=780). De footer had maar 22px onderruimte, dus wie
      helemaal naar beneden scrolde kreeg de regel met ModernWeb.nl niet te
      lezen. Gemeten op 390x844 en 360x740.
   2. Het merkblok stond gecentreerd terwijl de kolommen eronder links stonden.
      Dat leverde twee verschillende leesranden op in dezelfde footer.

   De selector is .site-footer en niet footer: het mobiele menu heeft een eigen
   footer-element en dat mag hier niets van meekrijgen. */
@media (max-width: 767px) {
  .site-footer {
    padding-bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  }

  /* De onderste regel als geheel gecentreerd: copyright, tractor en credits
     onder elkaar in het midden. */
  .site-footer .foot-bottom { text-align: center; justify-items: center; }
  .site-footer .foot-tractor { margin-inline: auto; }

  /* Twee kolommen naast elkaar in plaats van alles onder elkaar; zo hoefde je
     niet meer een half scherm door de footer te scrollen.

     Het merkblok en de contactkolom pakken de volle breedte: de een vanwege het
     logo, de ander vanwege de e-mailadressen. welkom@betuwswijndomein.nl is op
     13.5px ongeveer 170px breed en past dus niet in een halve kolom van 159px.
     Bezoek en Domein hebben korte regels en staan wel naast elkaar. */
  .site-footer .foot-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.75rem 1.25rem;
  }

  .site-footer .foot-grid > :first-child,
  .site-footer .foot-grid > :last-child {
    grid-column: 1 / -1;
  }

  /* Kolomtitels wat dichter op hun lijst, anders valt het verband weg zodra er
     twee lijsten naast elkaar staan. */
  .site-footer .foot-col h5 { margin-bottom: .75rem; }
  .site-footer .foot-col a { padding: 4px 0; line-height: 1.35; }
}

/* ================= KLANTILLUSTRATIE · CULINAIR =================
   De transparante pentekening sluit aan op het lokale, seizoensgebonden menu.
   Lage dekking en een zachte rand houden tekst en fotografie dominant. */
.customer-botanical-deco {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: clamp(-150px, -7vw, -70px);
  width: clamp(340px, 35vw, 560px);
  height: auto;
  opacity: .055;
  filter: blur(.25px);
  mix-blend-mode: multiply;
  transform: translateY(-50%) rotate(3deg);
  pointer-events: none;
  user-select: none;
}

/* Vervangt de oude inline SVG-ornamenten in Over ons en Locatie. */
.over-deco > svg,
.loc-deco > svg,
.page-deco > svg,
.reserveer-hero-deco > svg {
  display: none;
}

.over-deco .customer-deco-art,
.loc-deco .customer-deco-art,
.page-deco .customer-deco-art,
.reserveer-hero-deco .customer-deco-art {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .62;
  filter: blur(.2px);
  mix-blend-mode: multiply;
}

.over-deco--grapes .customer-deco-art {
  transform: rotate(-9deg);
}

.over-deco--leaves .customer-deco-art {
  transform: rotate(13deg) scale(1.08);
}

.loc-deco--bottle .customer-deco-art {
  transform: rotate(-8deg) scale(1.05);
}

.loc-deco--glass .customer-deco-art {
  transform: rotate(12deg) scaleX(-1);
}

/* Dezelfde rustige lijnvoering op de interieurpagina's. De modifier bepaalt
   alleen uitsnede en richting; dekking blijft overal ondergeschikt aan inhoud. */
.page-deco .customer-deco-art {
  opacity: .5;
}

.page-deco--olive,
.page-deco--olive-left {
  width: clamp(300px, 31vw, 470px);
  height: clamp(360px, 42vw, 610px);
}

.page-deco--olive .customer-deco-art {
  transform: rotate(28deg);
}

.page-deco--olive-left .customer-deco-art {
  transform: rotate(-24deg) scaleX(-1);
}

.page-deco--wheat .customer-deco-art {
  transform: rotate(-8deg);
}

.page-deco--pear .customer-deco-art {
  transform: rotate(9deg);
}

.reserveer-hero-deco .customer-deco-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .075;
  filter: blur(.2px);
  mix-blend-mode: multiply;
  transform: rotate(18deg);
}

@media (max-width: 767px) {
  .customer-botanical-deco {
    top: auto;
    right: -125px;
    bottom: -100px;
    width: 360px;
    opacity: .04;
  }
}