/* ==========================================================================
   BERKEL GIN - Website V3.0, WordPress/Elementor-versie
   Gegenereerd door wp/maak-pakket.py uit site/css/style.css. Niet met de hand
   bewerken: wijzig de bron en draai het script opnieuw.
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Open Sans Var";
  src: url("/wp-content/berkel/fonts/open-sans-300-800.woff2") format("woff2");
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/wp-content/berkel/fonts/bricolage-grotesque-200-800.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  src: url("/wp-content/berkel/fonts/fira-sans-extra-condensed-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fira Sans Extra Condensed";
  src: url("/wp-content/berkel/fonts/fira-sans-extra-condensed-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Retro Signature";
  src: url("/wp-content/berkel/fonts/RetroSignature.woff2") format("woff2"),
       url("/wp-content/berkel/fonts/RetroSignature.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Berkel Poppins";
  src: url("/wp-content/berkel/fonts/Poppins-ExtraLightItalic.woff2") format("woff2"),
       url("/wp-content/berkel/fonts/Poppins-ExtraLightItalic.ttf") format("truetype");
  font-weight: 275;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --cream: #faf7f1;
  --cream-2: #fff4da;
  --ink: #1d1d1d;
  --ink-2: #171717;
  --ink-3: #0d0d0d;
  --gold: #d0b56a;
  --gold-2: #cdb168;
  --gold-3: #c5a36b;
  --gold-dark: #a67c43;
  --gold-deep: #7b541b;
  --gold-light: #dec789;
  --gold-border: #e9dcbc;
  --cucumber: #93cebd;
  --rose: #dfa5b1;
  --orange: #ff7300;

  --grad-gold: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-2) 51%, var(--gold-dark) 100%);
  --grad-gold-btn: linear-gradient(90deg, #d0b56a 0%, #c5a36b 50%, #d0b56a 100%);
  --grad-sparkle: linear-gradient(90deg, var(--gold) 0%, var(--gold-deep) 100%);

  --font-sans: "Open Sans Var", "Open Sans", Arial, sans-serif;
  --font-script: "Retro Signature", cursive;
  --font-brico: "Bricolage Grotesque", var(--font-sans);
  --font-fira: "Fira Sans Extra Condensed", var(--font-sans);
  --font-poppins: "Berkel Poppins", var(--font-sans);

  --header-h: 100px;
  --container: 1188px;
}

/* ---------- Reset / base (WordPress-versie) ----------
   body-font, kleur en achtergrond komen uit de Elementor-kit. Alles hieronder
   dat vroeger op html/body/img/a stond, is gescoped op .berkel: de klasse die
   elke root-container van de nieuwe pagina's en de header/footer dragen. Zo
   raakt deze CSS geen andere Elementor-content (Nix18-popup, 404). */
*, *::before, *::after { box-sizing: border-box; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
html, body { overflow-x: clip; } /* voorkomt horizontale scrollbalken door brede script-regels */
.berkel {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
/* element-resets op (0,0,1) via :where, zodat componentklassen als .blik-tab (rand, lettertype)
   en .btn-gold (kleur) er gewoon overheen gaan, net als in de statische site */
:where(.berkel) img { max-width: 100%; height: auto; }
.berkel [class*="__media"] img, .berkel [class*="__visual"] img, .berkel .serve-foto,
.berkel .socials__grid img, .berkel .botanicals__stage img, .berkel .botanicals__strip img,
.berkel .familie__foto, .berkel .recipe-hero > img, .berkel .hero__watermark,
.berkel .story__badge img, .site-header img, .site-footer img { display: block; }
:where(.berkel) a { color: inherit; text-decoration: none; }
:where(.berkel) h1, :where(.berkel) h2, :where(.berkel) h3, :where(.berkel) h4, :where(.berkel) p { margin: 0; }
:where(.berkel) button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
/* Elementor zet zelf marges op headings en tekst; onze koppen willen dat niet */
.berkel .elementor-widget-heading .elementor-heading-title { margin: 0; }
.berkel .elementor-widget-text-editor p:last-child { margin-bottom: 0; }


.container {
  width: min(var(--container), calc(100% - 48px));
  margin-inline: auto;
}

/* ---------- Typografie ---------- */
.h-mega {
  font-weight: 800;
  font-size: clamp(3rem, 8.66vw, 7.79rem);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.h-section {
  font-weight: 800;
  font-size: clamp(2.4rem, 6.8vw, 6.14rem);
  line-height: 1;
  text-transform: uppercase;
}
.h-story {
  font-weight: 800;
  font-size: clamp(2rem, 4.85vw, 4.36rem);
  line-height: 0.92;
  text-transform: uppercase;
}
.script {
  font-family: var(--font-script);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.02em;
  text-transform: none; /* nooit kapitalen erven van een kop */
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.script--sparkle { background: var(--grad-sparkle); -webkit-background-clip: text; background-clip: text; }
.script--white { background: none; color: #fff; }

.eyebrow {
  font-weight: 700;
  font-size: 13.4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}
.lead { font-weight: 300; font-size: 16px; }

/* ---------- Knoppen ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  height: 44px;
  padding: 0 26px;
  font-family: var(--font-sans);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 13.4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: filter .2s ease, background-color .2s ease, color .2s ease;
}
.btn-gold { background: var(--grad-gold-btn); color: var(--ink); }
.btn-gold:hover { filter: brightness(1.07); }
.btn-outline-light { border: 1px solid #fff; color: rgba(255,255,255,.92); }
.btn-outline-light:hover { background: rgba(255,255,255,.08); }
.btn-outline-gold { border: 1px solid var(--gold); background: rgba(208,181,106,.1); color: rgba(255,255,255,.92); }
.btn-outline-gold:hover { background: rgba(208,181,106,.2); }
.btn-outline-dark { border: 1px solid var(--ink); color: var(--ink); }
.btn-outline-dark:hover { background: var(--ink); color: var(--cream); }
.btn:active { filter: brightness(.95); transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.linklet {
  font-stretch: 75%;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: underline;
  text-underline-offset: 3px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.linklet::after { content: "\2192"; text-decoration: none; }
.linklet--light { color: rgba(255,255,255,.6); }
.linklet--light:hover { color: rgba(255,255,255,.9); }
.linklet--dark { color: rgba(29,29,29,.7); }
.linklet--dark:hover { color: var(--ink); }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink-3);
  border-bottom: 0.5px solid var(--gold-dark);
  height: var(--header-h);
}
.site-header__inner {
  height: 100%;
  width: min(1330px, calc(100% - 40px));
  margin-inline: auto;
  display: grid;
  /* logo links, menu rechts (stond eerst gesplitst rond het logo) */
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 24px;
}
.site-header__nav { display: flex; gap: clamp(18px, 2.6vw, 44px); align-items: center; justify-content: flex-end; }
.site-header__nav a {
  font-stretch: 75%;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--gold-3);
  text-transform: uppercase;
  transition: color .15s ease;
}
.site-header__nav a:hover, .site-header__nav a[aria-current="page"] { color: var(--gold-light); }
.site-header__logo img { height: 60px; width: auto; }
.site-header__contact {
  border: 0.5px solid #fff;
  box-shadow: 0.5px 0.5px 0 0 var(--gold-light);
  padding: 6px 15px;
}
.site-header__contact:hover { background: rgba(255,255,255,.06); }
.site-header__burger { display: none; }

/* mobiel menu */
@media (max-width: 900px) {
  :root { --header-h: 72px; }
  .site-header__inner { grid-template-columns: auto 1fr; }
  .site-header__logo { order: 0; }
  .site-header__logo img { height: 44px; }
  .site-header__nav { display: none; }
  .site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    order: 2;
    /* stond hiervoor uitgerekt over de hele 1fr-kolom (184 px breed), waardoor
       hij kliks wegving van wat ernaast staat. Nu een net tikdoel van 44x44. */
    justify-self: end;
    width: 44px;
    height: 44px;
    padding: 0;
  }
  .site-header__burger span { width: 24px; height: 2px; background: var(--gold-3); transition: transform .2s ease, opacity .2s ease; }
  .site-header.is-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .site-header.is-open .site-header__burger span:nth-child(2) { opacity: 0; }
  .site-header.is-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-header__mobilenav {
    display: none;
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background: var(--ink-3);
    border-bottom: 0.5px solid var(--gold-dark);
    padding: 18px 24px 28px;
    z-index: 99;
  }
  .site-header.is-open + .site-header__mobilenav, .site-header__mobilenav.is-open { display: block; }
  .site-header__mobilenav a {
    display: block;
    padding: 13px 0;
    font-stretch: 75%;
    font-weight: 700;
    font-size: 17px;
    letter-spacing: 0.05em;
    color: var(--gold-3);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(208,181,106,.15);
  }
}
@media (min-width: 901px) { .site-header__mobilenav { display: none !important; } }

/* ---------- Hero (donker) ---------- */
.hero {
  position: relative;
  background: radial-gradient(120% 90% at 50% 55%, #362f1d 0%, #1d1d1d 78%);
  color: #fff;
  overflow: hidden;
}
.hero--teal { background: radial-gradient(130% 100% at 28% 54%, #314942 0%, #27332f 50%, #1d1d1d 100%); transition: background .4s ease; }
.hero--teal[data-active-flavor="rose"] { background: radial-gradient(130% 100% at 28% 54%, #4a3339 0%, #33272b 50%, #1d1d1d 100%); }
.hero--teal[data-active-flavor="orange"] { background: radial-gradient(130% 100% at 28% 54%, #4a3721 0%, #332a1f 50%, #1d1d1d 100%); }
.hero__watermark {
  position: absolute;
  top: 42px;
  left: 50%;
  transform: translateX(-50%);
  width: min(844px, 80vw);
  opacity: .05;
  pointer-events: none;
}

/* ---------- Art-deco kader ---------- */
.deco-section { padding: clamp(40px, 6vw, 96px) 0; background: var(--cream); }
.deco-frame {
  position: relative;
  border: 24px solid transparent;
  border-image: url("/wp-content/berkel/img/deco-kader.svg") 100 / clamp(28px, 5vw, 70px) stretch;
  padding: clamp(24px, 6vw, 90px) clamp(18px, 6vw, 90px);
}

/* ---------- Story-blok (Home / De fles / Ons verhaal) ---------- */
.story {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  gap: clamp(20px, 3.4vw, 48px);
  align-items: center;
}
.story__title { position: relative; margin-top: 14px; color: var(--ink); }
.story__script {
  /* schaalt mee met de KOLOM, niet met het venster, zodat hij nooit afkapt */
  font-size: min(clamp(2.4rem, 6.4vw, 5.6rem), 19cqw);
  display: block;
  width: max-content;
  max-width: 100%;
  /* Links gelijk met de kop. Stond ingesprongen, waardoor de script-regel
     bij een kop die afbreekt tegen de laatste letters aan kroop. */
  margin: -0.26em 0 0;
  white-space: nowrap;
  position: relative;
  z-index: 2;
}
.story__text { margin: clamp(18px, 2.6vw, 34px) 0 30px; max-width: 556px; }
/* verhaal in meerdere alinea's: de negatieve topmarge vouwt met de vaste
   30px-ondermarge samen tot 16px tussenruimte */
.story__text + .story__text { margin-top: -14px; }
.story__media { justify-self: center; }
.story__media img {
  width: min(291px, 70vw);
  aspect-ratio: 291 / 487;
  object-fit: cover;
  border-radius: 999px;
}
.story__media--square img { border-radius: 0; aspect-ratio: auto; }
@media (max-width: 820px) {
  .story { grid-template-columns: 1fr; }
  .story__media { order: -1; }
  .story__media img { width: min(240px, 60vw); }
  /* Alleen het blok met de 3D-fles (op De fles) moet de kolom vullen. De cel
     stond op justify-self: center en kromp dan naar zijn inhoud, waardoor een
     kind met width: 100% op nul uitkwam. De twee blokken met een gewone foto
     laten we ongemoeid, die stonden goed. */
  .story__media--square { justify-self: stretch; text-align: center; }
}

/* ---------- Socials strip ---------- */
.socials { background: var(--cream); padding: clamp(48px, 7vw, 100px) 0 clamp(56px, 8vw, 110px); overflow: hidden; }
.socials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(10px, 1.6vw, 24px);
}
.socials__grid a { overflow: hidden; }
.socials__grid img {
  width: 100%;
  aspect-ratio: 389 / 508;
  object-fit: cover;
  transition: transform .5s ease;
}
.socials__grid a:hover img { transform: scale(1.04); }
.socials__caption { text-align: center; margin-top: clamp(24px, 4vw, 44px); position: relative; }
.socials__caption .h-section { color: #1c1c1c; }
.socials__caption .script {
  font-size: clamp(3rem, 8.66vw, 7.79rem);
  display: block;
  margin-top: -0.52em;
  position: relative;
  z-index: 2;
}

/* ---------- Footer ---------- */
/* padding-top = halve badge-hoogte, badge top = 0:
   zo ligt het hart van de cirkel exact op de bovenrand van het footerpaneel */
.site-footer { position: relative; padding-top: 130px; background: var(--cream); }
.site-footer__panel { background: var(--ink-2); color: #fff; padding: 90px 0 26px; position: relative; }
.site-footer__badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #23201a 0%, var(--ink-3) 72%);
  display: grid;
  place-items: center;
  z-index: 2;
}
.site-footer__badge img { width: 66%; height: auto; }
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: start;
}
.site-footer h3 {
  font-family: var(--font-brico);
  font-weight: 800;
  font-size: 32px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-variation-settings: "opsz" 96;
  margin-bottom: 22px;
}
.site-footer__col { font-family: var(--font-fira); font-weight: 500; font-size: 18px; line-height: 25px; }
.site-footer__col--right { text-align: right; }
.site-footer__col--right h3 { text-align: right; }
.site-footer__col a { display: block; margin-bottom: 17px; transition: color .15s ease; }
.site-footer__col a:hover { color: var(--gold-2); }
.site-footer__address { margin-bottom: 20px; text-transform: uppercase; }
.site-footer__mail { display: inline-block; margin: 0 0 24px; text-transform: uppercase; }
.site-footer__mail:hover { color: var(--gold-2); }
.site-footer__social { display: flex; gap: 18px; align-items: center; }
.site-footer__social img { height: 30px; width: auto; }
.site-footer__center { width: 260px; padding-top: 150px; text-align: center; }
.site-footer__center img { width: 210px; margin: 0 auto; }
.site-footer__iwsc { width: 150px; margin-top: 40px; }
.site-footer__bottom {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: clamp(30px, 6vw, 90px); /* vier items sinds de Brighttown-credit: kleinere tussenruimte, anders breekt de rij op 1440 */
  flex-wrap: wrap;
  font-family: var(--font-poppins);
  font-weight: 275;
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,.9);
}
.site-footer__bottom a:hover { color: var(--gold-2); }
/* ---------- Mobiel: tikdoelen op 44 px ----------
   De richtlijn is 44 bij 44 px. Deze links en knoppen haalden dat niet: de
   footerlinks waren 25 px hoog, de socials 30 bij 37 en de linklets 17 tot 31.
   De extra ruimte komt uit padding en gaat er weer af bij de marge, zodat het
   beeld hetzelfde blijft en alleen het aanraakvlak groeit. */
@media (max-width: 820px) {
  .site-footer__col a { padding: 10px 0; margin-bottom: 0; }
  .site-footer__mail { padding: 10px 0; margin-bottom: 14px; }
  .site-footer__social { gap: 4px; }   /* 44px-vak + 4px gap = zelfde beeld */
  .site-footer__social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }
  .site-footer__bottom { margin-top: 30px; }
  .site-footer__bottom a { display: inline-block; padding: 10px 0; }
  /* alleen de echte links, niet de spans in de productkaarten: die kaart is
     zelf al helemaal klikbaar */
  a.linklet { min-height: 44px; }
  .recipe-card__link { padding-top: 8px; }
}

@media (max-width: 820px) {
  .site-footer { padding-top: 90px; }
  .site-footer__badge { top: 0; width: 180px; height: 180px; }
  .site-footer__panel { padding-top: 110px; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 34px; }
  .site-footer__center { display: none; }
  .site-footer__col--right, .site-footer__col--right h3 { text-align: left; }
  .site-footer__iwsc { margin-top: 26px; }
}

/* ---------- Home: hero ----------
   Gelaagde compositie zoals het design: groot watermerk achterin,
   grote gedraaide fles in het midden, titel + script er overheen. */
.hero-home { text-align: center; padding: 0 0 clamp(36px, 4vw, 64px); min-height: clamp(660px, calc(66vw + 42px), 997px); display: flex; flex-direction: column; justify-content: flex-end; }
.hero-home .hero__watermark { top: clamp(60px, 9vw, 130px); width: min(844px, 66vw); opacity: .05; }
.hero-home::after {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: min(900px, 72vw);
  aspect-ratio: 1.25;
  background: radial-gradient(closest-side, rgba(208,181,106,.20), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero-home__bottle {
  position: absolute;
  top: clamp(4px, 1vw, 14px);
  left: 50%;
  height: clamp(430px, 51vw, 734px);
  width: auto;
  max-width: none;
  transform: translateX(-50%) rotate(30deg);
  transform-origin: 50% 42%;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  z-index: 1;
}
.hero-home__title { position: relative; z-index: 2; }
.hero-home__title .h-mega { text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.hero-home__script {
  font-size: clamp(3rem, 8.66vw, 7.79rem);
  display: block;
  margin-top: -0.48em;
  position: relative;
  z-index: 3;
}
.hero-home__cta { position: relative; z-index: 3; display: flex; justify-content: center; gap: 14px; margin-top: clamp(20px, 2.6vw, 38px); flex-wrap: wrap; }
.hero-home__cta { align-items: center; }
.hero-home__cta-link { position: relative; z-index: 3; display: inline-flex; align-items: center; min-height: 40px; margin-top: 2px; }

/* Home-hero op telefoons: de kop op een regel houden (breekt hij, dan valt
   het schrift eroverheen), knoppen gestapeld op volle breedte, en de hero
   hoog genoeg zodat de fles boven de tekst eindigt. */
@media (max-width: 600px) {
  .hero-home { min-height: 620px; }
  .hero-home__title .h-mega { font-size: clamp(2.1rem, 11vw, 3rem); }
  .hero-home__script { font-size: clamp(2.3rem, 12.5vw, 3.2rem); margin-top: -.16em; }
  .hero-home__cta { flex-direction: column; align-items: center; gap: 12px; }
  .hero-home__cta .btn { width: min(100%, 320px); height: 50px; font-size: 14px; }
  .hero-home__cta-link { min-height: 48px; }
}

/* ---------- Home: 3 manieren ---------- */
.ways { background: var(--ink-2); color: #fff; padding: clamp(48px, 6vw, 90px) 0 clamp(60px, 7vw, 110px); }
.ways__heading { text-align: center; margin-bottom: clamp(30px, 4.4vw, 64px); }
.ways__heading .script { font-size: clamp(3rem, 8.66vw, 7.79rem); display: block; margin-top: -0.5em; position: relative; z-index: 2; }
.ways__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 302px));
  justify-content: center;
  gap: clamp(18px, 3vw, 42px);
}
.way-card { display: flex; flex-direction: column; border: 0.5px solid var(--gold); transition: transform .3s ease, box-shadow .3s ease; }
.way-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.35); }
.way-card__visual {
  height: 299px;
  display: block; /* geen grid: anders resolveert height:100% op de img niet */
  overflow: hidden;
  position: relative;
}
.way-card__visual--fles { background: radial-gradient(circle at 50% 50%, rgba(208,181,106,.28) 0%, rgba(29,29,29,0) 72%); }
.way-card__visual--blik { background: radial-gradient(circle at 50% 50%, rgba(147,206,189,.30) 0%, rgba(29,29,29,0) 72%); }
.way-card__visual--cocktail { background: radial-gradient(circle at 50% 50%, rgba(208,181,106,.24) 0%, rgba(29,29,29,0) 72%); }
/* Producten schalen altijd volledig binnen de kaart: de afbeelding vult het
   vlak en object-fit:contain bepaalt de schaal. Padding geeft de marge,
   ruimer bij de gedraaide fles zodat de hoeken vrij blijven. */
.way-card__visual img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.way-card__visual--fles { padding: 15% 22%; }
.way-card__visual--fles img { transform: rotate(24deg); }
.way-card__visual--blik { padding: 9% 26%; }
.way-card__visual--blik img { transform: rotate(-7deg); }
.way-card__visual--cocktail { padding: 10% 20%; }
.way-card__body {
  border-top: 0.5px solid var(--gold);
  background: rgba(208,181,106,.02);
  padding: 20px 24px 16px;
  min-height: 130px;
  display: flex;
  flex-direction: column;
}
.way-card__kicker { font-size: 10px; font-weight: 400; letter-spacing: .1em; color: var(--gold-2); text-transform: uppercase; }
.way-card__title { font-weight: 800; font-size: 36px; line-height: 1.2; text-transform: uppercase; display: flex; align-items: baseline; gap: 8px; }
/* langere kaarttitels (Botanicals with bubbels) een maat kleiner, anders
   breken ze naar drie regels */
.way-card__title--lang { font-size: 26px; }
.way-card__title .script { font-size: 46px; line-height: .8; text-transform: none; }
.story { position: relative; }
.story > div:first-child { min-width: 0; container-type: inline-size; }
.way-card__sub { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.6); text-transform: uppercase; }
.way-card__link { margin-top: auto; align-self: flex-end; padding-top: 12px; }
.way-card__dots { display: flex; gap: 5px; margin: 6px 0 2px; }
.way-card__dots span { width: 15px; height: 15px; border-radius: 50%; }
@media (max-width: 900px) {
  .ways__grid { grid-template-columns: minmax(0, 340px); }
}

/* ---------- Gin in Blik: hero ---------- */
.hero-blik { padding: clamp(28px, 4vw, 66px) 0 clamp(40px, 5vw, 80px); }
/* de balk loopt over de volle breedte van de sectie en staat daardoor
   gecentreerd, in lijn met het paneel eronder. Stond eerder op
   max-width 1035px binnen een container van 1188px, waardoor hij
   153 px links van het midden hing. */
.hero-blik__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; margin-inline: auto; }
.blik-tab {
  border: 0.3px solid var(--gold);
  background: rgba(208,181,106,.02);
  height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  transition: background .2s ease;
}
.blik-tab__merk { font-stretch: 78%; letter-spacing: .04em; }
.blik-tab .script { font-family: var(--font-script); font-size: 36px; line-height: .8; margin-top: -4px; position: relative; z-index: 1; text-transform: none; background: none; color: currentColor; -webkit-background-clip: initial; background-clip: initial; }
.blik-tab[aria-selected="true"][data-flavor="cucumber"] { background: rgba(147,206,189,.2); }
.blik-tab[aria-selected="true"][data-flavor="rose"] { background: rgba(223,165,177,.2); }
.blik-tab[aria-selected="true"][data-flavor="orange"] { background: rgba(255,115,0,.15); }
.blik-tab[data-flavor="cucumber"] .script { color: var(--cucumber); }
.blik-tab[data-flavor="rose"] .script { color: var(--rose); }
.blik-tab[data-flavor="orange"] .script { color: var(--orange); }

.hero-blik__panel {
  display: grid;
  grid-template-columns: minmax(0, 420px) 1fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  margin-top: clamp(28px, 4vw, 50px);
}
.hero-blik__can { justify-self: center; position: relative; }
.hero-blik__can::before {
  content: "";
  position: absolute;
  inset: -10% -34%;
  background: radial-gradient(closest-side, rgba(147,206,189,.24), transparent 72%);
  z-index: 0;
  transition: background .4s ease;
}
[data-active-flavor="rose"] .hero-blik__can::before { background: radial-gradient(closest-side, rgba(223,165,177,.26), transparent 72%); }
[data-active-flavor="orange"] .hero-blik__can::before { background: radial-gradient(closest-side, rgba(255,115,0,.18), transparent 72%); }
.hero-blik__can img { max-height: 516px; width: auto; transform: rotate(-2.94deg); filter: drop-shadow(0 26px 50px rgba(0,0,0,.5)); position: relative; z-index: 1; }
.hero-blik__eyebrow { font-weight: 700; font-size: 11.3px; letter-spacing: .1em; color: var(--gold-2); text-transform: uppercase; }
.hero-blik__title {
  font-weight: 800;
  /* Botanicals with bubbles is veel langer dan Berkel Sparkle: een paar
     maten kleiner, anders loopt de kop uit de kolom */
  font-size: clamp(1.9rem, 3.3vw, 3rem);
  line-height: 1;
  text-transform: uppercase;
}
.hero-blik__title .script {
  font-family: var(--font-script);
  font-size: clamp(3.6rem, 7.4vw, 6.4rem);
  line-height: .8;
  text-transform: none;
  /* de smaak valt bewust een klein stukje over BERKEL SPARKLE heen */
  display: block;
  margin: -.18em 0 0 .5em;
  position: relative;
  z-index: 2;
}
.hero-blik__desc { margin-top: 22px; max-width: 477px; font-weight: 700; font-size: 14px; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero-blik__specs {
  margin-top: 34px;
  border-top: 0.3px solid var(--gold);
  border-bottom: 0.3px solid var(--gold);
  padding: 18px 0;
  display: flex;
  gap: clamp(22px, 4vw, 56px);
  flex-wrap: wrap;
}
.spec__value { font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.32rem); line-height: 1; }
.spec__label { font-weight: 600; font-size: 10.4px; letter-spacing: .06em; color: var(--gold-2); text-transform: uppercase; }
/* op de donkere blikken-hero lichter goud, anders vallen "Calorieen" en "Alcohol" weg (feedback 22 september 2026) */
.hero-blik__specs .spec__label { color: var(--gold-light); }
.hero-blik__garnish { margin-top: 26px; }
.hero-blik__garnish-label { font-weight: 300; font-size: 8px; letter-spacing: .14em; color: rgba(255,255,255,.8); text-transform: uppercase; }
.hero-blik__garnish-tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.garnish-tag {
  border: 0.3px solid var(--cucumber);
  background: rgba(147,206,189,.05);
  height: 24px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  font-weight: 800;
  font-size: 10.4px;
  letter-spacing: .04em;
  color: rgba(255,255,255,.8);
  text-transform: uppercase;
}
[data-active-flavor="rose"] .garnish-tag { border-color: var(--rose); background: rgba(223,165,177,.07); }
[data-active-flavor="orange"] .garnish-tag { border-color: var(--orange); background: rgba(255,115,0,.07); }
@media (max-width: 860px) {
  /* de smaakblokken blijven naast elkaar (verzoek), alleen compacter:
     merkje boven, smaak in schrift eronder */
  /* de langere merknaam mag naar twee regels: hoogte meegeven ipv vastzetten */
  .blik-tab { height: auto; min-height: 58px; font-size: 9px; gap: 0; padding: 6px 3px 8px; flex-direction: column; justify-content: center; }
  .blik-tab .script { font-size: 27px; line-height: .8; margin-top: -2px; position: relative; z-index: 1; }
  .hero-blik__panel { grid-template-columns: 1fr; }
  .hero-blik__can img { max-height: 380px; }
}

/* ---------- Serveer-secties (Gin in Blik) ---------- */
.serve { padding: clamp(40px, 6vw, 90px) 0 0; }
.serve__heading { text-align: center; }
/* gecentreerd, dus geen inspringing links meer onder de kop */
.serve__heading .script { font-size: clamp(3rem, 8.66vw, 7.79rem); display: block; margin: -0.48em 0 0; position: relative; z-index: 2; }
.serve-row {
  display: grid;
  grid-template-columns: 1fr minmax(0, 560px);
  gap: clamp(24px, 5vw, 80px);
  align-items: center;
  padding: clamp(36px, 6vw, 90px) 0;
}
.serve-row--flip { grid-template-columns: minmax(0, 560px) 1fr; }
.serve-row--flip .serve-row__title { text-align: right; }
.serve-row--flip .serve-row__text { margin-left: auto; text-align: right; }
.serve-row__title { line-height: .9; }
.serve-row__title .big {
  font-weight: 800;
  /* sinds de afbreking na "with" past een grotere maat weer in de kolom */
  font-size: clamp(1.8rem, 3.8vw, 3.4rem);
  text-transform: uppercase;
  display: block;
}
.serve-row__title .script {
  font-family: var(--font-script);
  font-size: clamp(5rem, 13vw, 11.9rem);
  line-height: .9;
  display: block;
  margin: -0.42em 0 0 clamp(6px, 2vw, 30px);
  position: relative;
  z-index: 2;
}
.serve-row--cucumber .serve-row__title { color: var(--cucumber); }
.serve-row--rose .serve-row__title { color: var(--rose); }
.serve-row--orange .serve-row__title { color: var(--orange); }
.serve-row__text { margin-top: clamp(16px, 3vw, 40px); font-weight: 300; font-size: clamp(17px, 1.66vw, 24px); max-width: 477px; color: var(--ink-2); }
.serve-row__media img { width: 100%; aspect-ratio: 660 / 950; object-fit: cover; }

/* Serveerfoto per smaak. De foto ligt als kaart in het midden, het blik staat
   er in 3D voor. De accentkleur komt uit --smaak, die per rij gezet wordt,
   zodat gloed en kader altijd bij de smaak horen. */
.serve-row--cucumber { --smaak: 147, 206, 189; }
.serve-row--rose     { --smaak: 223, 165, 177; }
.serve-row--orange   { --smaak: 255, 115, 0; }

.serve-row__media {
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, rgba(var(--smaak), .24), transparent 70%);
}
.serve-row__media .serve-foto {
  position: relative;
  width: calc(100% - 22px);
  margin: 11px;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 26px 56px rgba(23,23,23,.30);
  outline: 1px solid rgba(var(--smaak), .75);
  outline-offset: 9px;
}
@media (max-width: 900px) {
  .serve-row__media .serve-foto { outline-offset: 6px; }
}
@media (max-width: 860px) {
  .serve-row, .serve-row--flip { grid-template-columns: 1fr; }
  .serve-row__media { order: -1; }
}

/* Mobiel: de drie serveringen als gelijke kaarten (verzoek). Foto boven,
   titel en tekst eronder, allemaal hetzelfde kader; de om-en-om-uitlijning
   van desktop gaat hier uit. */
@media (max-width: 720px) {
  .serve-row,
  .serve-row--flip {
    display: flex;
    flex-direction: column;
    /* de desktopregel zet align-items center; in de kolom zou dat de foto
       tot zijn (nog niet geladen) inhoud laten krimpen */
    align-items: stretch;
    gap: 0;
    padding: 0;
    margin: 18px 0;
    border: 0.6px solid rgba(208,181,106,.7);
    background: #fff;
    overflow: hidden;
  }
  /* block in plaats van grid: dan heeft de lui-ladende foto ook VOOR het
     laden zijn 4:3-vlak en verspringt de kaart niet */
  .serve-row__media { order: -1; background: none; display: block; }
  .serve-row__media .serve-foto { display: block; position: static; width: 100%; margin: 0; aspect-ratio: 4 / 3; height: auto; outline: none; box-shadow: none; border-radius: 0; }
  .serve-row > div:not(.serve-row__media) { padding: 16px 18px 20px; }
  .serve-row--flip .serve-row__title,
  .serve-row--flip .serve-row__text { text-align: left; margin-left: 0; }
  .serve-row__title .big { font-size: 1.5rem; display: inline-block; }
  .serve-row__title .script { font-size: 2.6rem; display: inline-block; margin: 0 0 0 10px; vertical-align: -2px; }
  .serve-row__text { margin-top: 10px; font-size: 14px; }
}

/* ---------- Recepten ---------- */
.hero-recepten { text-align: center; padding: clamp(60px, 10vw, 150px) 0 clamp(80px, 14vw, 240px); }
.hero-recepten__kicker { font-weight: 700; font-size: clamp(15px, 1.7vw, 24.5px); letter-spacing: .1em; color: var(--gold); text-transform: uppercase; }
.hero-recepten__title { margin-top: 10px; white-space: nowrap; font-size: clamp(2.4rem, 8.4vw, 7.56rem); }
.hero-recepten .script { font-size: clamp(3rem, 8.66vw, 7.79rem); display: block; margin-top: -0.5em; position: relative; z-index: 2; }

.recipes { padding: clamp(40px, 5vw, 80px) 0 0; }
.recipe-feature {
  display: grid;
  grid-template-columns: 583fr 597fr;
  border: 1.08px solid var(--gold);
  background: #fff;
}
.recipe-feature__media { position: relative; min-height: 320px; }
.recipe-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.recipe-feature__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 6%, rgba(0,0,0,0) 61%);
}
.recipe-feature__caption { position: absolute; left: 28px; bottom: 22px; z-index: 2; color: #fff; }
.recipe-feature__body { padding: clamp(22px, 3vw, 42px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 44px); }
.recipe-feature__title { font-weight: 800; font-size: clamp(2rem, 3.6vw, 3.24rem); text-transform: uppercase; color: #151515; }

.recipe-kicker { font-weight: 800; font-size: 17.7px; letter-spacing: .2em; color: var(--gold); text-transform: uppercase; }
.recipe-name { font-weight: 800; font-size: clamp(2.4rem, 4.5vw, 4.05rem); line-height: 1; text-transform: uppercase; }

.ingredients { margin-top: clamp(18px, 2.4vw, 34px); }
.ingredients__label, .method__label {
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.ingredients table { width: 100%; border-collapse: collapse; }
.ingredients td { border-top: 0.54px solid rgba(208,181,106,.55); padding: 9px 0; font-size: 13px; letter-spacing: .05em; }
.ingredients tr:last-child td { border-bottom: 0.54px solid rgba(208,181,106,.55); }
.ingredients td:first-child { width: 64px; font-weight: 800; color: var(--gold); }
.ingredients td:last-child { font-weight: 300; color: var(--ink-3); }
.method { margin-top: clamp(16px, 2vw, 26px); }
.method p { font-weight: 300; font-size: 10.2px; letter-spacing: .05em; color: var(--ink-3); max-width: 540px; }
.recipe-desc { font-weight: 300; font-size: 10.2px; letter-spacing: .05em; color: var(--ink-3); margin-top: 12px; max-width: 490px; }

.recipe-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(18px, 2.6vw, 38px);
  margin-top: clamp(28px, 4vw, 58px);
}
.recipe-card { background: #fff; border: 0.6px solid rgba(208,181,106,.7); display: flex; flex-direction: column; transition: transform .3s ease, box-shadow .3s ease; }
.recipe-card:hover { transform: translateY(-5px); box-shadow: 0 16px 34px rgba(23,23,23,.12); }
.recipe-card__media { position: relative; aspect-ratio: 583 / 260; overflow: hidden; }
.recipe-card__media img { width: 100%; height: 100%; object-fit: cover; }
.recipe-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.8) 8%, rgba(0,0,0,0) 60%);
}
.recipe-card__caption { position: absolute; left: 22px; bottom: 14px; z-index: 2; color: #fff; }
.recipe-card__caption .recipe-kicker { font-size: 12px; }
.recipe-card__caption .recipe-name { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.recipe-card__body { padding: 18px 22px 16px; display: flex; flex-direction: column; flex: 1; }
.recipe-card__link { margin-top: auto; align-self: flex-end; padding-top: 14px; letter-spacing: .12em; }
@media (max-width: 820px) {
  .recipe-feature { grid-template-columns: 1fr; }
  /* twee kolommen kaarten (verzoek); de ingredientenlijst verhuist naar de
     detailpagina, in een halve kolom is een tabel niet leesbaar */
  .recipe-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .recipe-card .ingredients { display: none; }
  .recipe-card__body { padding: 10px 12px 12px; }
  .recipe-card__link { align-self: flex-start; padding-top: 4px; }
  .recipe-card__caption .recipe-name { font-size: 19px; }
  .recipe-card__caption .recipe-kicker { font-size: 11px; letter-spacing: .12em; }
}

/* ---------- Recept detail ---------- */
.recipe-hero { position: relative; height: min(56vw, 620px); min-height: 320px; overflow: hidden; }
.recipe-hero img { width: 100%; height: 100%; object-fit: cover; }
.recipe-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.82) 4%, rgba(0,0,0,0) 55%); }
.recipe-hero__caption { position: absolute; left: 0; right: 0; bottom: 34px; z-index: 2; color: #fff; }
.recipe-detail { padding: clamp(36px, 6vw, 80px) 0; }
.recipe-detail__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(26px, 5vw, 70px); align-items: start; }
.recipe-detail__grid .ingredients td { font-size: 13px; }
.recipe-detail__grid .method p, .recipe-detail__grid .recipe-desc { font-size: 14px; }
.recipe-detail__media img { width: 100%; aspect-ratio: 662 / 870; object-fit: cover; }
@media (max-width: 820px) { .recipe-detail__grid { grid-template-columns: 1fr; } }

/* ---------- Ons verhaal hero ---------- */
.hero-verhaal { text-align: center; padding: clamp(90px, 13vw, 190px) 0 clamp(60px, 9vw, 130px); min-height: clamp(520px, 66vw, 950px); display: flex; flex-direction: column; justify-content: center; }
.hero-verhaal__eyebrow { font-weight: 700; font-size: clamp(14px, 1.6vw, 22px); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-2); }
.hero-verhaal .h-mega { font-size: clamp(4.2rem, 8.66vw, 7.79rem); } /* ondergrens omhoog: op telefoons 67 px in plaats van 48 */
.hero-verhaal .script { font-size: clamp(3.6rem, 8.66vw, 7.79rem); display: block; margin-top: -0.42em; position: relative; z-index: 2; }
.hero-verhaal__intro { margin: clamp(70px, 12vw, 190px) auto 0; max-width: 420px; font-weight: 300; font-size: 14px; color: rgba(255,255,255,.85); }

/* ---------- Familie sectie ---------- */
.familie { position: relative; padding: clamp(40px, 7vw, 110px) 0 clamp(30px, 5vw, 70px); overflow: hidden; }
.familie__word {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translateX(-50%);
  font-weight: 800;
  font-size: clamp(6rem, 24vw, 22rem);
  line-height: 1;
  color: rgba(208, 181, 106, .16);
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}
/* De slinger loopt van rand tot rand en schuift horizontaal door. Het touw
   staat links en rechts op dezelfde hoogte (rij 177 tot 190 van 651), dus de
   strook tegelt naadloos en de lus is niet te zien. Het aantal kopieen wordt
   in js aangevuld tot het spoor breder is dan het scherm plus een kopie. */
.familie__slinger {
  position: relative;
  z-index: 1;
  width: 100%;
  overflow: hidden;
}
.familie__spoor {
  display: flex;
  width: max-content;
  will-change: transform;
  /* Uit de scroll-anchoring houden. Chrome kiest een element in beeld als
     ankerpunt en corrigeert je scrollpositie als dat element verschuift. Bij
     een strook die elke frame opschuift betekent dat: de pagina scrolt uit
     zichzelf mee. Hiermee slaat de browser deze subboom over. */
  overflow-anchor: none;
}
img.familie__foto {
  display: block;
  flex: none;
  height: clamp(300px, 64vh, 620px);
  width: auto;
  user-select: none;
  -webkit-user-drag: none;
}
@media (max-width: 720px) {
  img.familie__foto { height: clamp(220px, 44vh, 360px); }
}

/* ---------- De fles: hero ----------
   Stond eerst als inline stijl in build.py. Dat kon een media query niet
   overschrijven, waardoor de kolom "auto 1fr" op een telefoon bleef staan:
   de 3D-fles pakte de eerste kolom en de kop werd tot een restje platgedrukt
   en viel buiten beeld. Nu staat de stapeling hier, achter een breakpoint. */
.hero-fles { padding: clamp(40px, 6vw, 80px) 0; }
.hero-fles__inner {
  /* de hero is sinds ronde 4 tekst-zonder-fles: alles gecentreerd */
  text-align: center;
}
.hero-fles__title {
  white-space: nowrap;
  font-size: clamp(2.4rem, 7.3vw, 6.6rem);
}
.hero-fles__script {
  display: block;
  font-size: clamp(3.4rem, 6.4vw, 5.8rem);
  margin: -0.42em 0 0;
  position: relative;
  z-index: 2;
}
/* Tussen 821 en 1100 px past de kop niet naast de fles. De fles neemt daar een
   vaste 420 px, en omdat de kop op nowrap staat kan de 1fr-kolom niet krimpen:
   de kop duwde tot 20 px het scherm af. Zelfde bug als op de telefoon, alleen
   in een ander bereik. Hier lossen we hem op met een container query, net als
   bij .story__script: de kop schaalt dan mee met zijn eigen kolom in plaats van
   met het venster. Boven 1100 px verandert er niets, daar paste hij al. */
@media (min-width: 821px) and (max-width: 1100px) {
  .hero-fles__tekst { container-type: inline-size; }
  .hero-fles__title { font-size: min(clamp(2.4rem, 7.3vw, 6.6rem), 14.5cqw); }
  .hero-fles__script { font-size: min(clamp(3.4rem, 6.4vw, 5.8rem), 12cqw); }
}

@media (max-width: 820px) {
  .hero-fles__tekst { width: 100%; }
  /* nowrap eraf, anders kapt de kop alsnog af op smalle schermen. De maat is
     zo gekozen dat "Een verhaal" toch op een regel blijft passen. */
  .hero-fles { padding-top: 28px; }
  .hero-fles__title { white-space: normal; font-size: clamp(2.6rem, 13.5vw, 4.8rem); }
  /* Kop groter dan schrift (op desktop is dat ook zo), en het schrift niet
     langer de kop in getrokken: gecentreerd gestapeld viel "In een fles"
     29 px over "Een verhaal" heen. */
  /* groter, en bewust een klein stukje over de witte kop heen (verzoek);
     de kop blijft de grootste van de twee */
  .hero-fles__script { font-size: clamp(2.6rem, 12.5vw, 4.2rem); margin: -.16em 0 0; }
}

/* Het embleem in het verhaalblok van De fles: zelfde cirkel als de
   footerbadge, alleen groter. Verving op verzoek de derde 3D-fles. */
.story__badge {
  /* breedte volgt de kolom (een vaste px-breedte zou de gridkolom oprekken
     en duwde het verhaalblok 5 px uit beeld); het maximum begrenst desktop */
  width: 100%;
  max-width: min(320px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #23201a 0%, var(--ink-3) 72%);
  display: grid;
  place-items: center;
  margin-inline: auto;
}
.story__badge img { width: 62%; height: auto; }
/* het embleem op De Gin staat op klantverzoek los: geen cirkel, en groter */
.story__badge--los { background: none; border-radius: 0; max-width: min(400px, 84vw); }
.story__badge--los img { width: 100%; }

/* ---------- De fles: botanicals (slider) ----------
   Links een groot rond "podium" met de actieve botanical,
   rechts naam + script en een strak 5-koloms grid met thumbnails.
   Podium, naam en actieve thumbnail wisselen synchroon. */
.botanicals { padding: clamp(46px, 7vw, 100px) 0 clamp(30px, 5vw, 60px); overflow: clip; }
.botanicals__inner {
  display: grid;
  grid-template-columns: minmax(0, .95fr) 1.05fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: center;
}
.botanicals__stage {
  position: relative;
  width: min(100%, 460px);
  aspect-ratio: 1;
  margin-inline: auto;
  border: 1px solid rgba(166,124,67,.55);
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: clamp(28px, 4vw, 56px);
  background: radial-gradient(closest-side, rgba(208,181,106,.10), transparent 78%);
}
.botanicals__stage::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 1.6vw, 18px);
  border: 0.6px solid rgba(166,124,67,.35);
  border-radius: 50%;
  pointer-events: none;
}
/* Twee lagen over elkaar die kruislings vervagen: geen flits bij het wisselen.
   Absoluut gepositioneerd zodat de illustratie de ronde vorm niet oprekt. */
.botanicals__stage img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: auto;
  max-width: 66%;
  max-height: 66%;
  object-fit: contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.botanicals__stage img.is-actief {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .botanicals__stage img { transition-duration: .01ms; }
}
/* op klantverzoek een maat groter dan een gewone wenkbrauwregel; hij
   vervangt ook het oude onderschrift onder de strip */
.botanicals__side .eyebrow { font-size: clamp(14px, 1.7vw, 18px); letter-spacing: .12em; }
.botanicals__name {
  margin: 10px 0 clamp(22px, 3vw, 38px);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.4vw, 4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--ink-3);
  display: block;
  /* vaste hoogte voor naam plus onderschrift, zodat er niets verspringt
     bij het wisselen tussen korte en lange botanical-namen */
  min-height: 2.35em;
}
.botanicals__name .name { display: block; }
.botanicals__name .name { display: inline-block; animation: bot-in .45s ease; }
.botanicals__name .script {
  font-family: var(--font-script);
  font-size: clamp(2.8rem, 4.6vw, 4.2rem);
  display: block;          /* altijd op een eigen regel onder de naam */
  margin: -.16em 0 0 .1em; /* schuift een stukje over de naam heen */
  line-height: 1;
  position: relative;
  z-index: 1;
}
@keyframes bot-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.botanicals__strip {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(10px, 1.4vw, 18px);
  max-width: 520px;
}
/* op een 320-scherm werden de knopjes 43x43; met een kleinere gap halen ze 44 */
@media (max-width: 380px) {
  .botanicals__strip { gap: 8px; }
  .botanicals__strip button { min-width: 44px; min-height: 44px; }
}
.botanicals__strip button {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid rgba(166,124,67,.45);
  border-radius: 50%;
  padding: 14%;
  display: grid;
  place-items: center;
  background: transparent;
  transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.botanicals__strip button img { width: 100%; height: 100%; object-fit: contain; }
.botanicals__strip button:hover { border-color: var(--gold-dark); transform: translateY(-2px); }
.botanicals__strip button.is-active {
  border-color: var(--gold-dark);
  background: rgba(208,181,106,.16);
  box-shadow: 0 8px 20px rgba(166,124,67,.25);
}
@media (max-width: 820px) {
  .botanicals__inner { grid-template-columns: 1fr; }
  .botanicals__stage { width: min(78vw, 340px); }
  .botanicals__strip { max-width: none; }
}

/* ---------- De fles: specs ---------- */
.specs-titel { position: relative; }
.specs-titel__gin {
  display: block;
  font-size: 1.5em;
  line-height: 1;
  margin: -.5em 0 0 1.1em;
  position: relative;
  z-index: 2;
}
.fles-specs { padding: clamp(30px, 5vw, 70px) 0 clamp(50px, 7vw, 100px); }
.fles-specs__inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(26px, 5vw, 80px);
  align-items: center;
}
.fles-specs .hero-blik__specs { border-color: rgba(166,124,67,.5); }
.fles-specs .spec__value { color: var(--ink); }
@media (max-width: 720px) { .fles-specs__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; } .fles-specs .hero-blik__specs { justify-content: center; } }

/* ---------- Contact ---------- */
.contact-section { padding: clamp(30px, 5vw, 60px) 0 clamp(50px, 7vw, 90px); }
.contact-tabs {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 3;
  margin-bottom: -58px;
}
.contact-section .deco-frame { padding-top: clamp(70px, 8vw, 120px); }
.contact-tab {
  width: min(285px, 42vw);
  height: 93px;
  border: 4px solid var(--gold-border);
  background: var(--cream);
  font-weight: 800;
  font-size: clamp(20px, 2.2vw, 31.5px);
  text-transform: uppercase;
  color: var(--ink);
  transition: background .2s ease;
}
.contact-tab[aria-selected="true"] { background: var(--cream-2); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 6vw, 90px);
  align-items: start;
  padding: clamp(30px, 5vw, 70px) clamp(4px, 3vw, 40px) clamp(20px, 4vw, 60px);
}
.contact-grid .h-story { margin-top: 14px; max-width: 460px; }
.contact-grid .lead { margin-top: 26px; max-width: 452px; }
.contact-form label { display: block; margin-bottom: 26px; }
.contact-form .label-text {
  display: block;
  font-family: var(--font-fira);
  font-weight: 400;
  font-size: 17px;
  color: #4a4438;
  margin-bottom: 2px;
}
.contact-form input, .contact-form textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(166,124,67,.6);
  background: transparent;
  padding: 8px 2px 10px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus { border-bottom-color: var(--gold-dark); }
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 300; }
.contact-form .consent input { width: auto; margin-top: 3px; accent-color: var(--gold-dark); }
.contact-form .btn { border-radius: 999px; margin-top: 14px; }
.contact-form .form-status { margin-top: 12px; font-size: 13px; color: var(--gold-deep); min-height: 18px; }
.is-hidden { display: none !important; }
@media (max-width: 820px) {
  .contact-grid { grid-template-columns: 1fr; }
  .contact-tab { height: 68px; }
}

/* 3D-objecten in de productkaarten op de homepage */
.way-card__visual .fles3d--kaart, .way-card__visual .blik3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  display: grid;
  place-items: center;
}
.way-card__visual .fles3d--kaart::before { display: none; }   /* kaart heeft zelf al een gloed */
.way-card__visual .fles3d__viewer,
.way-card__visual .blik3d__viewer {
  width: 100%;
  height: 100%;
  pointer-events: none;                     /* de hele kaart blijft klikbaar */
}
.way-card__visual .blik3d { --blik3d-h: 100%; }

/* ---------- Echte 3D-viewer (model-viewer) ---------- */
model-viewer::part(default-progress-bar) { display: none !important; }

.fles3d {
  position: relative;
  width: min(420px, 42vw);
  margin-inline: auto;
}
.fles3d::before {
  content: "";
  position: absolute;
  inset: 16% -26% -2% -26%;
  background: radial-gradient(ellipse at 50% 60%, rgba(208,181,106,.15), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.fles3d__viewer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: min(66vh, 720px);
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  cursor: grab;
}
.fles3d__viewer:active { cursor: grabbing; }
.fles3d__hint {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  z-index: 2;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease;
}
.fles3d.is-aangeraakt .fles3d__hint { opacity: 0; }

/* De fles in het verhaalblok: staat op crème, dus geen gouden gloed eromheen */
.fles3d--story { width: min(470px, 88vw); }
.fles3d--story::before {
  background: radial-gradient(ellipse at 50% 60%, rgba(166,124,67,.10), transparent 68%);
}
.fles3d--story .fles3d__viewer { height: min(78vh, 780px); }

/* De fles in het specsblok: staat ook op creme, dus dezelfde zachte gloed en
   dezelfde belichting als het verhaalblok. Smaller, want hij deelt de rij met
   de specs ernaast. */
.fles3d--specs { width: min(380px, 66vw); }
.fles3d--specs::before {
  background: radial-gradient(ellipse at 50% 60%, rgba(166,124,67,.10), transparent 68%);
}
.fles3d--specs .fles3d__viewer { height: min(72vh, 680px); }

/* De fles in de hero van de homepage: gekanteld, zonder interactie */
.fles3d--homehero {
  position: absolute;
  top: clamp(4px, 1vw, 14px);
  left: 50%;
  translate: -50% 0;
  width: min(520px, 62vw);
  z-index: 1;
  pointer-events: none;   /* de knoppen eronder blijven bereikbaar */
}
.fles3d--homehero::before { inset: 22% -14% 0 -14%; }
.fles3d--homehero .fles3d__viewer {
  height: clamp(430px, 51vw, 734px);
  transform: rotate(24deg);
  transform-origin: 50% 50%;
}

@media (max-width: 820px) {
  .fles3d { width: min(320px, 72vw); }
  .fles3d__viewer { height: min(52vh, 520px); }
  /* Op de fles-pagina staat deze fles binnen .deco-frame, en dat kader kost
     links en rechts samen zo'n 144 px aan rand en padding. Met 80vw werd de
     fles daardoor breder dan zijn eigen kolom: hij stond 42 px uit het midden
     en liep aan de rechterkant het scherm af. Op 100% voegt hij zich naar de
     kolom, waar die ook staat. */
  .fles3d--story { width: min(320px, 100%); }
  .fles3d--story .fles3d__viewer { height: min(48vh, 470px); }
  .fles3d--specs { width: min(300px, 78vw); }
  .fles3d--specs .fles3d__viewer { height: min(50vh, 480px); }
  .fles3d--homehero { width: min(315px, 86vw); top: -14px; }
  .fles3d--homehero .fles3d__viewer { height: clamp(420px, 118vw, 500px); transform: rotate(20deg); }
}

/* Gin in blik: dezelfde draaibare viewer als de fles, maar per smaak.
   De hoogte komt via --blik3d-h mee uit build.py, zodat de hero-blik kleiner
   staat dan de blikken in de smaakblokken. */
.blik3d {
  position: relative;
  width: 100%;
  margin-inline: auto;
}
/* de hero-blik staat in een cel die zich naar de inhoud voegt; model-viewer
   heeft geen eigen breedte, dus die moet hier expliciet staan */
.blik3d--hero { width: min(300px, 76vw); }
.blik3d::before {
  content: "";
  position: absolute;
  inset: -4% -22%;
  background: radial-gradient(closest-side, rgba(208,181,106,.16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.blik3d__viewer {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: var(--blik3d-h, 640px);
  max-height: 72vh;
  background: transparent;
  --poster-color: transparent;
  --progress-bar-color: transparent;
  --progress-bar-height: 0px;
  --progress-mask: transparent;
  cursor: grab;
}
.blik3d__viewer:active { cursor: grabbing; }
.blik3d__hint {
  position: absolute;
  left: 50%;
  bottom: -4px;
  transform: translateX(-50%);
  z-index: 2;
  font-stretch: 75%;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .5s ease;
}
.blik3d.is-aangeraakt .blik3d__hint { opacity: 0; }
@media (max-width: 820px) {
  .blik3d__viewer { height: min(52vh, 460px); }
  .blik3d--hero { width: min(260px, 70vw); }
  /* de hero-blik een slag kleiner: met 460 px viewer stond de kop van de
     pagina op een telefoon volledig onder de vouw (20 procent zichtbaar op
     360, niets op 320) */
  .blik3d--hero .blik3d__viewer { height: min(40vh, 330px); }
}
/* op de kleinste schermen (320 breed, 568 hoog) nog een slag strakker */
@media (max-width: 380px) {
  .blik3d--hero .blik3d__viewer { height: min(36vh, 300px); }
  .hero-blik { padding-top: 14px; }
}

/* ---------- Fles-effecten (3D render) ---------- */
.bottle-fx {
  position: relative;
  width: min(300px, 34vw);
  max-height: 62vh;
  display: flex;
  justify-content: center;
}
.bottle-fx .bottle-fx__img { max-height: 62vh; width: auto; }
.bottle-fx::before {
  content: "";
  position: absolute;
  inset: -10% -42%;
  background: radial-gradient(closest-side, rgba(208,181,106,.26), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.bottle-fx__img {
  position: relative;
  z-index: 1;
  width: 100%;
  filter: drop-shadow(0 36px 64px rgba(0,0,0,.55));
  animation: bottle-bob 7s ease-in-out infinite;
}
.bottle-fx__mirror {
  position: absolute;
  top: 99.5%;
  left: 50%;
  translate: -50% 0;
  max-height: 62vh;
  width: auto;
  transform: scaleY(-1);
  opacity: .20;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 42%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.75), transparent 42%);
  z-index: 0;
  pointer-events: none;
}
@keyframes bottle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-home__bottle {
  animation: bottle-bob-rot 8s ease-in-out infinite;
}
@keyframes bottle-bob-rot {
  0%, 100% { transform: translateX(-50%) rotate(30deg) translateY(0); }
  50% { transform: translateX(-50%) rotate(30deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .bottle-fx__img, .hero-home__bottle { animation: none; }
}

/* ---------- Juridische pagina's ---------- */
.legal { padding: clamp(50px, 7vw, 100px) 0 clamp(50px, 7vw, 90px); }
.legal .container { max-width: 760px; }
.legal__titel { margin: 12px 0 clamp(28px, 4vw, 48px); }
.legal__kop {
  font-weight: 800;
  font-size: clamp(1.1rem, 1.7vw, 1.45rem);
  text-transform: uppercase;
  color: var(--ink);
  margin-top: clamp(26px, 3.4vw, 44px);
}
.legal__tekst { font-weight: 300; margin-top: 10px; }
.legal__tekst p { margin-bottom: 12px; }
.legal__tekst a { color: var(--gold-dark); text-decoration: underline; text-underline-offset: 3px; }
.legal__tekst a:hover { color: var(--ink); }
.site-footer__bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Mobiel: schrift onder de kop ----------
   De script-regels hangen met een negatieve topmarge aan hun kop. Op desktop
   is de kop een regel breed en schuift het schrift in de vrije ruimte; op een
   telefoon breekt de kop en viel het schrift er middenop (gemeten: 127x17 px
   op "is nu een Gin merk", 155x22 op "maakt onze Gin"). Onder de 820 gaat het
   schrift gewoon onder de kop staan, en een maat kleiner dan de kop. */
@media (max-width: 820px) {
  .story__script { font-size: min(clamp(2.6rem, 12vw, 5.6rem), 17cqw); margin-top: .06em; }
  .botanicals__name .script { margin: .06em 0 0 .1em; }
  .socials__caption .script { margin-top: .12em; }
  /* "op 3 manieren" iets groter en iets lager; extra specifiek omdat de
     basisregel verderop in het bestand staat en anders op volgorde wint */
  section.ways .ways__heading .script { font-size: clamp(3.4rem, 15vw, 4rem); margin-top: -.28em; }
}

/* ---------- Mobiel: formulier ----------
   Onder de 16 px zoomt iOS de hele pagina in zodra een veld focus krijgt, en
   zoomt niet vanzelf terug. De checkbox was 13x13; het hele label is nu het
   tikvlak. */
@media (max-width: 820px) {
  .contact-form input, .contact-form textarea { font-size: 16px; padding: 12px 2px; }
  .contact-form .consent { padding: 8px 0; }
  .contact-form .consent input { width: 22px; height: 22px; flex: none; margin-top: 0; }
}

/* ---------- Mobiel: leeskleuren ----------
   De gouden hoeveelheden-kolom ("45 ml") meet 2,0 op wit; dit is echte
   leescontent aan de bar. Alleen op mobiel naar het diepe goud (6,7 op wit),
   desktop blijft het goedgekeurde beeld. */
@media (max-width: 820px) {
  .ingredients td:first-child { color: var(--gold-deep); }
  .fles-specs .spec__label { color: var(--gold-deep); } /* alleen op de creme achtergrond van De fles */
  /* groter tikvlak zonder de regelafstand van de alinea te verstoren:
     de negatieve marge heft de padding in de flow weer op */
  .legal__tekst a { display: inline-block; padding: 8px 0; margin: -8px 0; }
}

/* ---------- Mobiel: leesbare tekstmaten ----------
   Onder de 12 px leest het op een telefoon niet prettig meer, en juist de
   recepttabel is wat mensen aan de bar staan te lezen. Alles hier zit achter
   een media query, dus op desktop verandert er niets.

   Labels met veel letterruimte (.1em en meer) blijven klein: dat is een
   stijlmiddel en geen leestekst. Ondergrens sinds 22 september 2026: 11 px
   voor labels (.recipe-kicker, .ingredients__label, .method__label) en 12 px
   voor de sleep-hints en garnish-labels. */
@media (max-width: 820px) {
  /* leestekst en de recepttabel: minimaal 13 px */
  .ingredients td { font-size: 13px; padding: 9px 0; }
  .ingredients td:first-child { width: 72px; }
  .method p { font-size: 13px; line-height: 1.55; }
  .recipe-desc { font-size: 13px; line-height: 1.55; }

  /* kleine labels zonder noemenswaardige letterruimte */
  .spec__label { font-size: 12px; }
  .garnish-tag { font-size: 12px; }
  .way-card__kicker { font-size: 11px; }
  .way-card__sub { font-size: 13px; }
  .blik-tab { font-size: 13px; }
  /* "Botanicals with bubbles" is te lang voor een derde van het scherm: laten afbreken */
  .blik-tab__merk { white-space: normal; line-height: 1.15; }
  .linklet { font-size: 12px; }

  /* stond op 8 px, dat is op geen enkel scherm te lezen */
  .hero-blik__garnish-label { font-size: 12px; }
}

/* ---------- Reveal-animatie ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Kleine hulpstukken ---------- */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }

/* ---------- Leeftijdscontrole (NIX18) ----------
   Ligt over alles heen (hoogste z-index elders is 100). main.js opent hem
   alleen zolang er geen akkoord in localStorage staat; [hidden] moet
   expliciet winnen van display:grid. */
.agegate {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: rgba(15, 15, 10, .88);
  display: grid;
  place-items: center;
  padding: 20px;
}
.agegate[hidden] { display: none; }
html.agegate-open { overflow: hidden; }
.agegate__card {
  background: var(--cream);
  color: var(--ink-2);
  width: 100%;
  max-width: 480px;
  padding: clamp(30px, 6vw, 48px) clamp(22px, 5vw, 44px);
  text-align: center;
  border: 1px solid rgba(166, 124, 67, .55);
  outline: 0.6px solid rgba(166, 124, 67, .35);
  outline-offset: -10px;
}
.agegate__logo { width: clamp(92px, 22vw, 126px); height: auto; margin: 0 auto; display: block; }
.agegate__titel { font-size: clamp(1.45rem, 4.4vw, 1.9rem); margin-top: 14px; }
.agegate__tekst { margin: 12px auto 24px; font-weight: 300; font-size: 15px; max-width: 40ch; }
.agegate__knoppen { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.agegate__nix {
  margin-top: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
}
/* Officieel NIX18-logo (Trimbos-toolkit, als SVG): wit in de footer, oranje in de pop-up */
/* img.-prefix: even zwaar als Elementors ".elementor img { height:auto }", en later geladen */
img.nix18-logo { display: block; height: 24px; width: auto; flex: none; }
img.nix18-logo--groot { height: 30px; }
.site-footer__nix { display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Mobiele feedback 22 september 2026 ----------
   Staat achteraan, zodat deze regels bij gelijke specificiteit winnen van
   de oudere regels hierboven. */
@media (max-width: 600px) {
  /* Home-hero: het schrift groter en over de witte kop heen, zoals op desktop */
  .hero-home__script { font-size: clamp(3.4rem, 17vw, 4.4rem); margin-top: -.5em; }
  /* receptkaarten in twee kolommen: vierkante foto in plaats van een smalle strook */
  .recipe-card__media { aspect-ratio: 1 / 1; }
}
@media (min-width: 601px) and (max-width: 820px) {
  .recipe-card__media { aspect-ratio: 4 / 3; }
}
@media (max-width: 720px) {
  /* polaroidslinger: twee tot drie foto's tegelijk in beeld (de strook heeft er drie per 1440 px) */
  img.familie__foto { height: clamp(170px, 24vh, 210px); }
  /* img.-voorvoegsel: anders wint Elementors ".elementor img { height: auto }" en staat de strook op 1440 px */
}
/* Botanical-namen nooit afsnijden: de kopgrootte volgt de kolombreedte
   (Engelwortel is de langste, 7,5 em). Oudere browsers zonder cqi houden de clamp. */
.botanicals__side { container-type: inline-size; }
/* terugval voor browsers zonder container queries (iOS 15 en ouder): kleinere kop op telefoons */
@media (max-width: 600px) {
  .botanicals__name { font-size: clamp(1.9rem, 9.5vw, 2.6rem); }
}
.botanicals__name { font-size: min(clamp(2.4rem, 4.4vw, 4rem), 12.5cqi); }
/* laatste vangnet: een naam die toch te lang is breekt af in plaats van buiten beeld te lopen */
.botanicals__name .name { max-width: 100%; overflow-wrap: anywhere; }
/* link onder het uitgelichte recept */
.recipe-feature__link { margin-top: 18px; align-self: flex-start; }

/* Receptkaarten in twee kolommen (telefoons): een gedeelde linkerlijn van 14 px
   voor bijschrift en kaartvoet, een compacte voet met alleen de link (tikdoel 44 px
   blijft), en het bijschrift dat netjes over twee regels mag lopen. */
@media (max-width: 600px) {
  .recipe-card__caption { left: 14px; right: 14px; bottom: 12px; }
  .recipe-card__caption .recipe-kicker { font-size: 11px; letter-spacing: .08em; line-height: 1.3; display: block; margin-bottom: 3px; }
  .recipe-card__caption .recipe-name { font-size: 20px; line-height: 1; }
  .recipe-card__body { padding: 4px 14px 6px; }
  .recipe-card__link { padding-top: 0; margin-top: 0; align-self: flex-start; }
}

/* ==========================================================================
   Elementor-adapter (gegenereerd door wp/maak-pakket.py)
   De typografie-klassen staan op de widget-wrapper; de eigenlijke kop, knop
   of link erft ze hiermee. Knoppen: klasse knop + knop-gold / knop-outline-*.
   ========================================================================== */
/* (0,2,0): even zwaar als de kit-regel .elementor-widget-heading .elementor-heading-title, en later geladen */
.berkel .elementor-heading-title { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; margin: 0; }
.berkel .elementor-heading-title a { color: inherit; text-decoration: inherit; }
/* footerkoppen: de h3-regel van de statische site, nu op de widget-wrapper */
.berkel .site-footer__kop { font-family: var(--font-brico); font-weight: 800; font-size: 32px; letter-spacing: 0.05em; text-transform: uppercase; font-variation-settings: "opsz" 96; margin-bottom: 22px; }
/* Elementor zet .e-con .elementor-widget.elementor-widget { margin-block-end: 0 } (0,3,0); ondermarges
   op widget-wrappers moeten dus even zwaar en later staan */
.berkel .elementor-widget.story__text { margin-bottom: 30px; }
/* meerdere alinea's in een verhaalblok: zelfde afstand als losse .story__text-alinea's in de statische site */
.berkel .elementor-widget.story__text p { margin: 0; }
.berkel .elementor-widget.story__text p + p { margin-top: clamp(18px, 2.6vw, 34px); }
.berkel .elementor-widget.site-footer__kop { margin-bottom: 22px; }
.berkel .elementor-widget.legal__titel { margin-bottom: clamp(28px, 4vw, 48px); }
/* image-widgets in een grid: de link moet een blok zijn, anders krimpt de foto naar nul */
.berkel .socials__grid .elementor-widget-image a, .berkel .way-card__visual .elementor-widget-image a { display: block; width: 100%; }
.berkel .socials__grid .elementor-widget-image img { width: 100%; }
/* image-widgets in een flex-container krimpen naar de intrinsieke maat van de foto (0 zolang hij lui
   laadt); in deze mediakolommen moet de wrapper altijd de kolom vullen */
.berkel .serve-row__media > .elementor-widget-image, .berkel .story__media > .elementor-widget-image,
.berkel .recipe-detail__media > .elementor-widget-image, .berkel .way-card__visual > .elementor-widget-image,
.berkel .socials__grid > .elementor-widget-image, .berkel .story__badge > .elementor-widget-image,
.berkel .site-footer__center > .elementor-widget-image { width: 100%; }
/* boxed secties: zelfde binnenmaat als .container (min(1188px, 100% - 48px)) */
.berkel.e-con-boxed > .e-con-inner { padding-inline: var(--berkel-rand, 24px); max-width: calc(var(--content-width, 1188px) + 2 * var(--berkel-rand, 24px)); }
.berkel .e-con-boxed > .e-con-inner { padding-inline: var(--berkel-rand, 24px); max-width: calc(var(--content-width, 1188px) + 2 * var(--berkel-rand, 24px)); }
/* tikdoel op telefoons: de statische regel a.linklet { min-height: 44px } geldt hier voor de wrapper,
   de link erin erft de hoogte (min-height: inherit hierboven) */
@media (max-width: 820px) { .berkel .linklet.elementor-widget:not(.way-card__link) { min-height: 44px; } }
/* .way-card__link is een span in een kaart die zelf al de link is: geen tikdoel, anders wordt de kaart 25 px hoger dan het ontwerp */
/* absolute bijschriften over foto's: krimpen naar hun inhoud, zoals de statische div */
.berkel .recipe-feature__caption.e-con, .berkel .recipe-card__caption.e-con { --width: auto; width: auto; }
/* spec-blokjes (45% / 700ML / ...) staan naast elkaar: geneste containers krijgen anders 100% breedte */
.berkel .hero-blik__specs > .e-con { --width: auto; width: auto; }
/* ingredientenlijst: het Hello-thema geeft tabellen randen, celranden en zebra-rijen; hier de
   lichte lijst van de statische site, met voorrang op de themaregels */
.berkel .ingredients table { width: 100%; border-collapse: collapse; border: 0; margin: 0; background: transparent; }
.berkel .ingredients tr, .berkel .ingredients tbody, .berkel .ingredients thead { background: transparent; border: 0; }
.berkel .ingredients td { border: 0; border-top: 0.54px solid rgba(208,181,106,.55); background: transparent; text-align: left; vertical-align: baseline; line-height: 1.55; }
.berkel .ingredients tr:last-child td { border-bottom: 0.54px solid rgba(208,181,106,.55); }
.berkel .ingredients td:first-child { width: 64px; font-weight: 800; color: var(--gold); }
.berkel .ingredients td:last-child { font-weight: 300; color: var(--ink-3); }
/* inline stijlen uit de statische HTML, hier als klasse */
.recipes--kort { padding-bottom: clamp(40px, 5vw, 80px); }
.serve__titel { color: #0f0f0a; }
.berkel .recipe-detail__grid .recipe-desc--groot { font-size: 16px; font-weight: 300; }
/* header: het boxed binnenvlak is het grid met logo links en menu rechts */
.site-header { --berkel-rand: 20px; }
.site-header > .e-con-inner { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; height: 100%; }
.site-header__menu .elementor-nav-menu--main .elementor-nav-menu { gap: clamp(18px, 2.6vw, 44px); align-items: center; }
/* tegen trillen bij hover: geen "transition: all" van de menu-plugin, geen laag-wissel van de sticky header */
.site-header__menu .elementor-nav-menu, .site-header__menu .elementor-nav-menu li, .site-header__menu .elementor-nav-menu--main .elementor-item { transition: color .15s ease; transform: none; }
.site-header { transform: translateZ(0); backface-visibility: hidden; }
.site-header__menu .elementor-nav-menu--main .elementor-item { font-family: var(--font-sans); font-stretch: 75%; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; color: var(--gold-3); text-transform: uppercase; padding: 0; transition: color .15s ease; }
.site-header__menu .elementor-nav-menu--main .elementor-item:hover, .site-header__menu .elementor-nav-menu--main .elementor-item.elementor-item-active { color: var(--gold-light); }
.site-header__menu .elementor-nav-menu--main .elementor-nav-menu > li:last-child .elementor-item { border: 0.5px solid #fff; box-shadow: 0.5px 0.5px 0 0 var(--gold-light); padding: 6px 15px; }
.site-header__menu .elementor-nav-menu--main .elementor-nav-menu > li:last-child .elementor-item:hover { background: rgba(255,255,255,.06); }
.site-header__menu .elementor-menu-toggle { color: var(--gold-3); width: 44px; height: 44px; margin-left: auto; background: none; border: 0; }
/* uitgeklapt menu: als paneel onder de header over de volle breedte, zoals de statische site */
.site-header__menu .elementor-nav-menu--dropdown.elementor-nav-menu__container { position: fixed; inset: var(--header-h) 0 auto 0; left: 0 !important; width: auto !important; margin: 0; z-index: 99; background: var(--ink-3); border-bottom: 0.5px solid var(--gold-dark); padding: 0 24px; box-shadow: none; }
.site-header__menu .elementor-nav-menu--dropdown.elementor-nav-menu__container .elementor-nav-menu { padding: 18px 0 28px; }
.site-header__menu .elementor-nav-menu--dropdown .elementor-item { display: block; padding: 13px 0; font-family: var(--font-sans); font-stretch: 75%; font-weight: 700; font-size: 17px; letter-spacing: 0.05em; color: var(--gold-3); text-transform: uppercase; border-bottom: 1px solid rgba(208,181,106,.15); background: none; }
/* de Elementor-kit zet op elke link zijn eigen lettertype (Roboto) en onderstreping; binnen de
   nieuwe site erven links gewoon van hun omgeving, zoals in de statische site. Knoppen uitgezonderd. */
.berkel a:not(.btn):not(.elementor-button) { text-decoration: none; }
/* footer: koppen via wrapper-klasse (de h3-regel geldt al voor de tag) */
.site-footer .site-footer__col .elementor-widget-text-editor p { margin: 0; }
.site-footer__bottom .elementor-widget-text-editor p { margin: 0; }
/* contactformulier (Elementor Pro Form) in de stijl van het statische formulier */
.berkel .contact-form .elementor-field-group { margin-bottom: 0; }
.berkel .contact-form .elementor-field-label { display: block; font-family: var(--font-fira); font-weight: 400; font-size: 17px; color: #4a4438; margin-bottom: 2px; }
.berkel .contact-form .elementor-field-group .elementor-field-textual { width: 100%; border: 0; border-bottom: 1px solid rgba(166,124,67,.6); border-radius: 0; background: transparent; padding: 8px 2px 10px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); outline: none; box-shadow: none; transition: border-color .2s ease; }
.berkel .contact-form .elementor-field-group .elementor-field-textual:focus { border-bottom-color: var(--gold-dark); }
.berkel .contact-form .elementor-field-group textarea.elementor-field-textual { min-height: 110px; resize: vertical; }
.berkel .contact-form.elementor-widget-form .elementor-field-type-submit .elementor-button { border-radius: 999px; margin-top: 14px; }
@media (max-width: 820px) {
  .berkel .contact-form .elementor-field-group .elementor-field-textual { font-size: 16px; padding: 12px 2px; }
  .berkel .contact-form .elementor-field-type-acceptance .elementor-field-subgroup label { padding: 8px 0; align-items: center; }
  .berkel .contact-form .elementor-field-type-acceptance input { width: 22px; height: 22px; flex: none; margin-top: 0; }
}
.berkel .contact-form .elementor-field-type-acceptance .elementor-field-subgroup label { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; font-weight: 300; font-family: var(--font-sans); }
.berkel .contact-form .elementor-field-type-acceptance input { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--gold-dark); }
.berkel .contact-form .elementor-message { margin-top: 12px; font-size: 13px; color: var(--gold-deep); }
.berkel .contact-form .elementor-field-type-submit { margin-top: 0; }
/* B2B-blok op de contactpagina */
.inkoop__tekst { max-width: 760px; }
.inkoop__usps .elementor-icon-list-text { font-weight: 300; font-size: 15px; }
/* Elementor 4 rendert widgets zonder tussenlaag: de kop is een direct kind van de wrapper */
.berkel .script.elementor-widget > .elementor-heading-title,
.berkel .eyebrow.elementor-widget > .elementor-heading-title {
  background: inherit; -webkit-background-clip: text; background-clip: text; color: transparent;
}
.berkel .script.elementor-widget, .berkel .eyebrow.elementor-widget { color: inherit; }
.berkel .script--white.elementor-widget > .elementor-heading-title { background: none; color: #fff; }
.berkel .elementor-widget-text-editor { color: inherit; }
/* de kit zet op elke tekstwidget zijn oude tekstfont (Roboto); binnen de nieuwe site erft de
   tekst het lettertype van zijn sectie (Open Sans, Fira in de footer, Poppins onderin) */
.berkel .elementor-widget-text-editor, .berkel .elementor-widget-text-editor p { font-family: inherit; font-weight: inherit; }
/* linklet als heading-widget met link: de link zelf moet het hele tikvlak van de wrapper vullen */
.berkel .linklet.elementor-widget > .elementor-heading-title,
.berkel .linklet.elementor-widget > .elementor-heading-title > a { display: inline-flex; align-items: center; min-height: inherit; }
/* HTML-widgets met absoluut gepositioneerde lagen (watermerk, hero-fles) moeten
   zich richten op de sectie, niet op de widget-wrapper */
.berkel .elementor-widget-html { position: static; }
.berkel .elementor-widget-text-editor p { margin: 0 0 1em; }
.berkel .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.berkel .elementor-widget-button .elementor-button-wrapper { display: inline-flex; }
.berkel .knop .elementor-button { background: none; border: 0; border-radius: 0; box-shadow: none; line-height: 1; fill: currentColor; }
/* Hello Elementor (style.min.css) kleurt ELKE button:hover/focus roze: color #fff, background #c36.
   Hier neutraliseren en per component de eigen hover-staat terugzetten (specificiteit >= 0,2,1). */
.berkel button:hover, .berkel button:focus, .berkel [type=button]:hover, .berkel [type=button]:focus, .berkel [type=submit]:hover, .berkel [type=submit]:focus { color: inherit; background-color: transparent; }
/* Hello Elementor geeft elke button 3 px afronding; de smaaktabs zijn strak */
.berkel .blik-tab { border-radius: 0; }
.berkel .blik-tab:hover, .berkel .blik-tab:focus { color: #fff; background-color: rgba(208,181,106,.02); }
.berkel .blik-tab[aria-selected="true"][data-flavor="cucumber"]:hover, .berkel .blik-tab[aria-selected="true"][data-flavor="cucumber"]:focus { background-color: rgba(147,206,189,.2); }
.berkel .blik-tab[aria-selected="true"][data-flavor="rose"]:hover, .berkel .blik-tab[aria-selected="true"][data-flavor="rose"]:focus { background-color: rgba(223,165,177,.2); }
.berkel .blik-tab[aria-selected="true"][data-flavor="orange"]:hover, .berkel .blik-tab[aria-selected="true"][data-flavor="orange"]:focus { background-color: rgba(255,115,0,.15); }
.berkel .botanicals__strip button:hover, .berkel .botanicals__strip button:focus { background-color: transparent; }
.berkel .botanicals__strip button.is-active:hover, .berkel .botanicals__strip button.is-active:focus { background-color: rgba(208,181,106,.16); }
.berkel .contact-tab:hover, .berkel .contact-tab:focus { color: var(--ink); background-color: var(--cream); }
.berkel .contact-tab[aria-selected="true"]:hover, .berkel .contact-tab[aria-selected="true"]:focus { background-color: var(--cream-2); }
.berkel .btn-gold:hover, .berkel .btn-gold:focus { color: var(--ink); background-color: transparent; }
.berkel .btn-outline-light:hover, .berkel .btn-outline-light:focus { color: rgba(255,255,255,.92); background-color: rgba(255,255,255,.08); }
.berkel .btn-outline-gold:hover, .berkel .btn-outline-gold:focus { color: rgba(255,255,255,.92); background-color: rgba(208,181,106,.2); }
.berkel .btn-outline-dark:hover, .berkel .btn-outline-dark:focus { color: var(--cream); background-color: var(--ink); }
.berkel .contact-form .elementor-field-type-submit .elementor-button:hover, .berkel .contact-form .elementor-field-type-submit .elementor-button:focus { color: var(--ink); background-color: transparent; }
/* Hello Elementor zet op .site-footer 10 px zijpadding onder 575 px (zelfde klassenaam); de V3-footer loopt tot de rand */
.berkel.site-footer { padding-inline: 0; }
/* de kit zet Roboto op formuliervelden en icoonlijsten; op V3 alles in de eigen fonts */
.berkel .contact-form .elementor-field-type-acceptance input, .berkel .inkoop__usps .elementor-icon-list-text { font-family: var(--font-sans); }
/* op telefoons vullen de hero-knoppen de breedte: dat moet ook de widget-wrapper doen */
@media (max-width: 600px) { .berkel .hero-home__cta .knop { width: min(100%, 320px); } }
.berkel .knop .elementor-button { display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 176px;
  height: 44px;
  padding: 0 26px;
  font-family: var(--font-sans);
  font-stretch: 75%;
  font-weight: 700;
  font-size: 13.4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: filter .2s ease, background-color .2s ease, color .2s ease; }
.berkel .knop-gold .elementor-button { background: var(--grad-gold-btn); color: var(--ink); }
.berkel .knop-gold .elementor-button:hover { filter: brightness(1.07); }
.berkel .knop-outline-light .elementor-button { border: 1px solid #fff; color: rgba(255,255,255,.92); }
.berkel .knop-outline-light .elementor-button:hover { background: rgba(255,255,255,.08); }
.berkel .knop-outline-gold .elementor-button { border: 1px solid var(--gold); background: rgba(208,181,106,.1); color: rgba(255,255,255,.92); }
.berkel .knop-outline-gold .elementor-button:hover { background: rgba(208,181,106,.2); }
.berkel .knop-outline-dark .elementor-button { border: 1px solid var(--ink); color: var(--ink); }
.berkel .knop-outline-dark .elementor-button:hover { background: var(--ink); color: var(--cream); }
.berkel .knop .elementor-button:active { filter: brightness(.95); transform: translateY(1px); }
.berkel .knop .elementor-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 600px) { .berkel .hero-home__cta .knop .elementor-button { width: min(100%, 320px); height: 50px; font-size: 14px; } }
.berkel .contact-form .knop .elementor-button { border-radius: 999px; margin-top: 14px; }