/** Shopify CDN: Minification failed

Line 420:88 Unexpected "*"
Line 422:84 Unterminated string token

**/
/* ============================================================
   KADOWIJN — design system
   Bron: Kadowijn merkboek editie 02 (2026) + digitaal handboek
   ============================================================ */

:root{
  /* kleuren (merkboek 07 / handboek 02) */
  --nacht: #221817;
  --room: #F2EBE1;
  --travertijn: #E1CEC9;
  --noten: #8A4A28;
  --noten-donker: #713b1f;
  --rook: #6B625E;
  --rand: #C8C1B9;
  --fout: #9B2C1E;
  --goed: #4A6B3A;
  --wit: #FFFFFF;

  /* typografie */
  --font-heading: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --display-size: 48px; --display-lh: 56px;
  --h1-size: 36px; --h1-lh: 44px;
  --h2-size: 28px; --h2-lh: 36px;
  --h3-size: 20px; --h3-lh: 28px;
  --label-size: 14px; --label-lh: 20px;
  --body-lg-size: 18px; --body-lg-lh: 28px;
  --body-size: 16px; --body-lh: 26px;
  --small-size: 14px; --small-lh: 22px;
  --micro-size: 12px; --micro-lh: 18px;

  /* ruimte */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radius-card: 10px;
  --radius-control: 6px;
  --container-max: 1280px;
  --container-pad: 24px;

  --shadow-float: 0 12px 32px rgba(34,24,23,0.14);
  color-scheme: light;
}

*, *::before, *::after{ box-sizing: border-box; }
/* Voorkomt dat de hele pagina zijwaarts kan bewegen/scrollen op mobiel, wat er
   ook binnenin een sectie gebeurt. Een container die zelf bewust horizontaal
   scrollt (overflow-x:auto, zoals de wijnen-carousel en de gelegenheden-tegels
   hieronder) blijft gewoon werken — dit blokkeert alleen de buitenste pagina. */
html{ -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body{
  margin: 0;
  background: rgb(var(--color-background));
  color: rgb(var(--color-foreground));
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}
img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea{ font: inherit; color: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,p{ margin: 0; }

h1,h2,h3, .heading{
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-wrap: balance;
}
h1{ font-size: var(--h1-size); line-height: var(--h1-lh); }
h2{ font-size: var(--h2-size); line-height: var(--h2-lh); }
h3{ font-size: var(--h3-size); line-height: var(--h3-lh); }
.display{ font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.04em;
  font-size: var(--display-size); line-height: var(--display-lh); text-wrap: balance; }
.label{ font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.04em;
  font-size: var(--label-size); line-height: var(--label-lh); }
.body-lg{ font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.small{ font-size: var(--small-size); line-height: var(--small-lh); color: rgb(var(--color-text-secondary)); }
.micro{ font-size: var(--micro-size); line-height: var(--micro-lh); color: rgb(var(--color-text-secondary)); }
p, .body-copy{ max-width: 70ch; }

:focus{ outline: none; }
:focus-visible{
  outline: 2px solid rgb(var(--color-link));
  outline-offset: 2px;
  border-radius: 4px;
}

.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.section{ padding-block: var(--sp-8); }
@media (max-width: 1023px){ .section{ padding-block: var(--sp-7); } }

.section-head{ max-width: 640px; margin-bottom: var(--sp-6); }
.section-head .eyebrow{ color: rgb(var(--color-link)); display: block; margin-bottom: var(--sp-2); }
.section-head p{ color: rgb(var(--color-text-secondary)); margin-top: var(--sp-3); }

/* ---------- knoppen ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: 48px; padding-inline: var(--sp-5);
  border-radius: var(--radius-control);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--label-size);
  letter-spacing: 0.02em;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
  white-space: nowrap;
}
.btn-primary{ background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); }
.btn-primary:hover{ background: var(--noten-donker); }
.btn-primary:disabled{ background: rgb(var(--color-border)); color: rgb(var(--color-text-secondary)); cursor: not-allowed; }
.btn-secondary{ background: transparent; color: rgb(var(--color-foreground)); border: 1px solid rgb(var(--color-border)); }
.btn-secondary:hover{ border-color: rgb(var(--color-link)); color: rgb(var(--color-link)); }
.btn-on-dark{ background: var(--room); color: var(--nacht); border: 1px solid var(--room); }
.btn-on-dark:hover{ background: var(--travertijn); }
.btn-block{ width: 100%; }
.btn-sm{ height: 36px; padding-inline: var(--sp-4); font-size: var(--micro-size); }

/* ---------- velden ---------- */
.field{ display: flex; flex-direction: column; gap: var(--sp-2); }
.field label{ font-family: var(--font-heading); font-weight: 600; font-size: var(--label-size); }
.field input[type="text"], .field textarea{
  height: 48px; padding-inline: var(--sp-4);
  border: 1px solid var(--rand); border-radius: var(--radius-control);
  background: var(--wit); color: var(--nacht);
}
.field textarea{ height: auto; padding-block: var(--sp-3); min-height: 88px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder{ color: var(--rook); }
.field input:focus-visible, .field textarea:focus-visible{ border-color: var(--noten); }
.field .hint{ font-size: var(--small-size); color: rgb(var(--color-text-secondary)); }
.field.is-error input, .field.is-error textarea{ border-color: var(--fout); }
.field .error-msg{ display:none; font-size: var(--small-size); color: var(--fout); }
.field.is-error .hint{ display: none; }
.field.is-error .error-msg{ display: block; }
/* Verwijdert alleen op dit ene configurator-tekstveld de extra site-brede
   focus-ring: zowel de outline-ring uit regel 83-87 hierboven, als de losse
   box-shadow-gloed die de basisthema-stylesheet (base.css) via zijn eigen
   :focus-visible-regel met --focused-base-box-shadow toevoegt. Beide liggen
   bovenop de eigen veldrand (border: 1px solid var(--rand), hierboven) en
   ogen dan samen als een dubbele/ongewenste rand. De eigen veldrand +
   focuskleur (var(--noten), hierboven) blijven gewoon staan. Bewust gescopet
   tot #custom-text-input, zodat andere velden op de site hun standaard
   focus-ring (outline + box-shadow) behouden. */
#custom-text-input:focus-visible{ outline: none; box-shadow: none; }
/* Er bleek nog een DERDE bron van dezelfde ongewenste rand: Dawn's basisthema
   (base.css) heeft een generieke component-stijl ".field::before, .field::after"
   die een decoratieve rand/schaduw rondom een heel invoerveld tekent (inclusief
   label en hint), en die extra opvalt zodra het veld focus krijgt. Onze eigen
   configurator gebruikt toevallig dezelfde class "field" (zie hierboven,
   .field{ display:flex; ... }) voor een heel ander, eigen doel, waardoor Dawn's
   regel er ongewenst overheen viel. Dawn lost dit voor zijn eigen uitzonderingen
   op dezelfde manier op (zie ".share-button__fallback .field::after{ content:none }"
   elders in base.css) — dezelfde aanpak toegepast, maar dan gescopet tot
   #custom-text-field, zodat Dawn's eigen velden elders op de site ongemoeid
   blijven. */
#custom-text-field::before,
#custom-text-field::after{ content: none; }
/* Dezelfde Dawn ".field::before/::after"-rand kwam ook tevoorschijn op het
   "Wat mag erop komen?"-veld van de handgeschreven kaart (Stap 4), dat
   toevallig dezelfde class "field" gebruikt. Zelfde gerichte oplossing,
   nu gescopet tot #handwritten-card-field, zodat verder niets verandert. */
#handwritten-card-field::before,
#handwritten-card-field::after{ content: none; }
#handwritten-msg-input:focus-visible{ outline: none; box-shadow: none; }

/* ---------- cards ---------- */
.card{
  background: var(--wit); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-card);
  padding: var(--sp-5);
}

.usp-strip{
  background: rgb(var(--color-background)); color: rgb(var(--color-foreground));
  position: sticky; top: 0; z-index: 45;
  border-bottom: 1px solid rgb(var(--color-border));
}
.usp-strip-track{
  max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad);
  height: 36px; position: relative; overflow: hidden;
}
.usp-strip-list{ position: relative; height: 100%; }
.usp-strip-item{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--usp-item-gap-desktop, 6px);
  opacity: 0; transition: opacity .6s ease; white-space: nowrap;
  font-family: var(--font-heading); font-weight: 600; font-size: var(--usp-text-size-desktop, var(--micro-size)); letter-spacing: 0.02em;
}
.usp-strip-item.is-active{ opacity: 1; }
.usp-strip-item svg{ width: 14px; height: 14px; flex: none; color: rgb(var(--color-link)); }
@media (max-width: 479px){
  .usp-strip-item{ font-size: var(--usp-text-size-mobile, 11px); gap: var(--usp-item-gap-mobile, 5px); white-space: normal; text-align: center; padding-inline: var(--sp-6); }
}

/* ---------- header ---------- */
.site-header{
  background: rgb(var(--color-background)); border-bottom: 1px solid rgb(var(--color-border));
  position: sticky; top: 36px; z-index: 40;
}
.header-not-sticky{ position: static; top: auto; }
.site-header .container{ padding-inline: var(--header-padding-desktop, var(--container-pad)); }
@media (max-width: 1023px){
  .site-header .container{ padding-inline: var(--header-padding-mobile, var(--container-pad)); }
}
.header-row{
  position: relative;
  display: flex; align-items: stretch; justify-content: space-between;
  height: var(--header-height-desktop, 88px); gap: var(--sp-5);
}
.header-row nav{ display: flex; }
.wordmark{
  font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: 0.04em;
  color: rgb(var(--color-foreground));
  display: flex; align-items: center;
}
.wordmark img{ width: var(--header-logo-width-desktop, 100px); height: auto; display: block; }
@media (max-width: 1023px){
  .wordmark img{ width: var(--header-logo-width-mobile, 100px); }
}
.main-nav{ display: flex; align-items: stretch; gap: var(--header-menu-gap, var(--sp-6)); height: 100%; }
.main-nav > li{ position: static; display: flex; align-items: center; height: 100%; }
.nav-link{
  font-family: var(--font-heading); font-weight: 600; font-size: var(--header-menu-text-size, var(--label-size));
  padding-block: var(--sp-3); display: inline-flex; align-items: center; gap: 6px;
  border-bottom: 2px solid transparent;
}
.nav-link:hover, .nav-link[aria-expanded="true"]{ color: rgb(var(--color-link)); }
.nav-link.is-active{ border-color: rgb(var(--color-link)); }
.nav-link .chev{ width: 10px; height: 10px; transition: transform .15s ease; }
.nav-link[aria-expanded="true"] .chev{ transform: rotate(180deg); }

.header-actions{ display: flex; align-items: center; gap: var(--header-icon-gap, var(--sp-4)); }
.icon-btn{ position: relative; width: var(--header-icon-size, 40px); height: var(--header-icon-size, 40px); display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; }
.icon-btn:hover{ background: var(--room); }
.icon-btn svg{ width: calc(var(--header-icon-size, 40px) * 0.5); height: calc(var(--header-icon-size, 40px) * 0.5); }
.cart-count{
  position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding-inline: 3px;
  background: rgb(var(--color-button)); color: rgb(var(--color-button-text)); border-radius: 999px;
  font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.cart-count[hidden]{ display: none; }

.mega{
  position: absolute; top: calc(100% + 1px); left: 50%; transform: translateX(-50%) translateY(-8px);
  background: rgb(var(--color-background)); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-card);
  box-shadow: var(--shadow-float); overflow: hidden;
  width: min(1060px, calc(100vw - 48px));
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
}
.mega[data-open="true"]{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

.mega-cols{ display: grid; grid-template-columns: 1fr 1fr 1fr 1.15fr; }
.mega-col{ padding: var(--sp-6) var(--sp-5); }
.mega-col + .mega-col{ border-left: 1px solid rgb(var(--color-border)); }
.mega-col-title{ display: block; color: rgb(var(--color-text-secondary)); margin-bottom: var(--sp-4); }
.mega-col ul{ display: flex; flex-direction: column; gap: var(--sp-1); }
.mega-col a{ font-size: var(--body-size); padding-block: 7px; display: flex; align-items: center; gap: var(--sp-3); }
.mega-col a:hover{ color: rgb(var(--color-link)); }
.mega-col .mega-item{ font-size: var(--body-size); padding-block: 7px; color: rgb(var(--color-text-secondary)); display: block; }
.mega-col .mega-item a{ display: inline; padding-block: 0; color: inherit; text-decoration: none; }
.mega-col .mega-all{ margin-top: var(--sp-2); font-family: var(--font-heading); font-weight: 600; font-size: var(--label-size); color: rgb(var(--color-link)); }
.mega-thumb{ width: 30px; height: 30px; border-radius: 4px; overflow: hidden; flex: none; background: var(--nacht); }
.mega-thumb img{ width: 100%; height: 100%; object-fit: cover; }

.mega-feature{
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100%; padding: var(--sp-6) var(--sp-5); color: var(--room); overflow: hidden;
}
.mega-feature img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-feature::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(34,24,23,.88) 0%, rgba(34,24,23,.35) 60%, rgba(34,24,23,.1) 100%);
}
.mega-feature-body{ position: relative; z-index: 1; }
.mega-feature-body .label{ color: var(--travertijn); }
.mega-feature-body h4{ color: var(--room); margin: var(--sp-2) 0 var(--sp-4); }

.mega-occasions{ display: grid; grid-template-columns: 0.85fr 1.15fr; min-height: 380px; }
.mega-occ-visual{ position: relative; overflow: hidden; }
.mega-occ-visual img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mega-occ-visual::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(34,24,23,.8) 0%, rgba(34,24,23,.45) 55%, rgba(34,24,23,.15) 100%);
}
.mega-occ-visual-body{ position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--sp-6); }
.mega-occ-visual-body .label{ color: var(--travertijn); }
.mega-occ-visual-body h4{ color: var(--room); margin-top: var(--sp-2); max-width: 22ch; }
.mega-occ-list{ padding: var(--sp-6); display: flex; flex-direction: column; }
.mega-occ-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
.mega-occ-grid span, .mega-occ-grid a{
  font-family: var(--font-heading); font-weight: 600; font-size: var(--body-size);
  padding-block: var(--sp-3); border-bottom: 1px solid rgb(var(--color-border)); color: rgb(var(--color-foreground));
}
.mega-occ-cta{ margin-top: var(--sp-5); font-family: var(--font-heading); font-weight: 600; font-size: var(--label-size); color: rgb(var(--color-link)); align-self: flex-start; }
.mega-occ-cta:hover{ color: var(--noten-donker); }

.menu-toggle{ display: none; }
.mobile-panel{
  position: fixed; inset: 0; background: rgb(var(--color-background)); z-index: 60;
  transform: translateX(100%); transition: transform .2s ease;
  overflow-y: auto;
}
.mobile-panel[data-open="true"]{ transform: translateX(0); }
.mobile-panel-head{ display:flex; align-items:center; justify-content:space-between; padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid rgb(var(--color-border)); }
.mobile-panel-body{ padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.mobile-link{ font-family: var(--font-heading); font-weight: 600; font-size: 18px; padding-block: var(--sp-3); border-bottom: 1px solid rgb(var(--color-border)); }
.mobile-sub{ padding-left: var(--sp-4); display:none; flex-direction:column; }
.mobile-sub a, .mobile-sub span{ font-size: var(--body-size); padding-block: var(--sp-2); color: rgb(var(--color-text-secondary)); }

/* ---------- Mobiel menu: "Wijncadeaus" en "Gelegenheden" als uitklapbare rijen ----------
   Klantverzoek (met screenshots van Savantalux als voorbeeld): op mobiel stonden alle
   gelegenheden-links (Verjaardag, Huwelijk, Geboorte, ...) en de 3 wijncadeau-formaten altijd
   plat onder elkaar uitgeklapt, wat "druk" oogt. Zelfde uitklap-patroon als de bestaande
   .faq-item/.faq-q (sections/infopagina's) en .std-text-toggle (configurator): een knop met
   chevron die een paneel in-/uitklapt via het data-open-attribuut op de omliggende
   .mobile-accordion-item. .mobile-sub (hierboven) staat nu standaard op display:none en wordt
   alleen getoond zodra de bijbehorende .mobile-accordion-item open staat. Of de rijen bij het
   openen van het menu standaard open of dicht staan is instelbaar in de Theme Editor
   (sectie-instelling "mobile_accordion_default_open", standaard uit = dicht) en bepaalt de
   initiële data-open/aria-expanded-waarde die vanuit Liquid wordt meegegeven (zie
   sections/kadowijn-header.liquid), zodat de juiste staat al bij het eerste renderen klopt
   (geen flits van open naar dicht). De klik-logica staat in assets/kadowijn-nav.js
   (initMobileAccordion), naar hetzelfde patroon als assets/kadowijn-faq.js. */
.mobile-accordion-item[data-open="true"] .mobile-sub{ display: flex; }
.mobile-accordion-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  background: none; border: none; border-bottom: 1px solid rgb(var(--color-border));
  padding-block: var(--sp-3); margin: 0;
  font-family: var(--font-heading); font-weight: 600; font-size: 18px; color: rgb(var(--color-foreground));
  text-align: left; cursor: pointer;
}
.mobile-accordion-trigger .chev{ width: 10px; height: 10px; flex: none; color: rgb(var(--color-text-secondary)); transition: transform .15s ease; }
.mobile-accordion-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* ---------- Header mobiel: hamburgermenu links, logo gecentreerd, account/zoeken/cart rechts ----------
   Klantverzoek (met screenshot van Savantalux als voorbeeld): op mobiel stond het logo links en
   stonden alle iconen (incl. hamburgermenu) samen rechts. Gewenst is een 3-koloms indeling zoals
   bij Savantalux: hamburgermenu uiterst links, logo in het midden, account/zoeken/cart rechts.
   .header-row wordt op mobiel (<1024px) een CSS Grid met 3 kolommen: de buitenste kolommen zijn
   flexibel, de middelste kolom is precies zo breed als het logo.
   De knop .menu-toggle staat in de Liquid-markup nu als eerste kind van .header-row
   (vóór het logo) i.p.v. binnen .header-actions, zodat hij als apart grid-item in de eerste
   kolom valt; op desktop blijft hij gewoon display:none (ongewijzigd, zie regel hierboven) en
   heeft deze verplaatsing in de brontekst geen enkel visueel effect. De lege <nav>-wrapper
   (waarvan de inhoud .main-nav al display:none had op mobiel) wordt nu ook zelf volledig
   verborgen, anders zou hij als een vierde, leeg grid-item meetellen en de 3-koloms-indeling
   verstoren.
   Herzien n.a.v. klantfeedback (met screenshot): het logo stond in de praktijk NIET echt
   gecentreerd, maar duidelijk naar links verschoven. Oorzaak: met gewoon "1fr auto 1fr" krijgt
   elke buitenste kolom standaard een automatische ondergrens die minstens zo breed is als de
   eigen inhoud (de hamburgerknop links is maar 1 icoon/40px, de icoongroep rechts is 3 iconen
   + tussenruimte/~150px) — op een smal telefoonscherm past dat samen met het logo niet meer
   naast elkaar, en dan wordt de layout breder dan het scherm, waardoor het logo niet meer
   precies in het midden van het zíchtbare scherm staat.
   Oplossing, met twee onderdelen:
   1) "minmax(0,1fr)" i.p.v. kale "1fr" voor de buitenste kolommen: hiermee mogen beide kolommen
      altijd precies even breed worden (geen automatische minimumbreedte meer op basis van hun
      inhoud), zodat het logo in het midden hoe dan ook altijd echt gecentreerd staat t.o.v. de
      volledige breedte, wat er links/rechts ook in staat.
   2) Om te voorkomen dat de 3 rechtse iconen daardoor over elkaar heen zouden vallen, worden ze
      op mobiel kleiner en dichter op elkaar gezet (klantverzoek: "dan maar de icoontjes kleiner
      en of dichter bij elkaar") — alleen de iconen in .header-actions (zoeken/account/winkelwagen),
      niet de hamburgerknop zelf, die links evenveel ruimte houdt als voorheen. */
@media (max-width: 1023px){
  .header-row{
    height: var(--header-height-mobile, 72px);
    display: grid;
    grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
    align-items: center;
    gap: var(--sp-2);
  }
  .header-row nav{ display: none; }
  .main-nav{ display: none; }
  .menu-toggle{ display: inline-flex; justify-self: start; }
  .wordmark{ justify-self: center; }
  .header-actions{ justify-self: end; gap: 4px; }
  .header-actions .icon-btn{ width: 32px; height: 32px; }
  .header-actions .icon-btn svg{ width: 16px; height: 16px; }
}

.hero{ position: relative; min-height: 640px; display: flex; align-items: flex-end; overflow: hidden; }
.hero-media{ position: absolute; inset: 0; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; }
.hero-scrim{
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(34,24,23,.85) 0%, rgba(34,24,23,.58) 36%, rgba(34,24,23,.06) 66%),
    linear-gradient(0deg, rgba(34,24,23,.55) 0%, rgba(34,24,23,0) 42%);
}
.hero-inner{ position: relative; z-index: 1; width: 100%; padding-block: var(--sp-9) var(--sp-8); }
.hero-copy{ max-width: 540px; }
/* Titel-/tekstkleur en per-apparaat zichtbaarheid (klantverzoek) zijn instelbaar via de
   Theme Editor (sections/kadowijn-hero.liquid zet --hero-title-color/--hero-text-color en de
   data-show-desktop/data-show-mobile-attributen als inline stijl/attributen op .hero-copy resp.
   de h1/p/a zelf). De var(...)-fallback hier reproduceert exact de oude, hardgecodeerde kleuren
   (var(--room) / rgba(242,235,225,.88)) zodra er nog geen eigen instelling gekozen is. */
.hero-copy .display{ color: var(--hero-title-color, var(--room)); margin-bottom: var(--sp-3); }
.hero-copy p{ color: var(--hero-text-color, rgba(242,235,225,.88)); margin-top: 0; margin-bottom: var(--sp-6); }
.hero-copy .btn{ margin-top: 0; }
/* Achtergrond-/tekstkleur van de hero-knop, apart instelbaar voor desktop en mobiel
   (klantverzoek). sections/kadowijn-hero.liquid zet de --hero-btn-bg-*/--hero-btn-text-*
   custom properties alleen als er daadwerkelijk een kleur gekozen is (zie de uitleg daar);
   staat zo'n property niet in de inline style, dan valt var(...) netjes terug op de
   bestaande standaardknopkleur hieronder (.btn-primary, rgb(var(--color-button))/
   rgb(var(--color-button-text))) — het uiterlijk blijft dus exact hetzelfde tot de merchant
   zelf een kleur kiest. Op mobiel (<768px) valt de mobiele kleur eerst terug op de
   desktop-kleur (als die wél gekozen is) voordat hij bij de standaardkleur uitkomt, zodat één
   kleur instellen voor "overal" genoeg is. */
.hero-copy .btn-primary{
  background: var(--hero-btn-bg-desktop, rgb(var(--color-button)));
  color: var(--hero-btn-text-desktop, rgb(var(--color-button-text)));
}
@media (max-width: 767px){
  .hero-copy .btn-primary{
    background: var(--hero-btn-bg-mobile, var(--hero-btn-bg-desktop, rgb(var(--color-button))));
    color: var(--hero-btn-text-mobile, var(--hero-btn-text-desktop, rgb(var(--color-button-text))));
  }
}
/* Titel/tekst/knop in de hero elk apart aan- of uitzetten voor desktop en mobiel (klantverzoek).
   Zelfde breakpoint (767px) als de bestaande hero-tekstgrootte-instellingen hierboven, zodat
   "mobiel" overal in deze sectie dezelfde grens aanhoudt. !important is nodig om de eigen
   display-waarde van elk element (flex bij de knop, block bij titel/tekst) te kunnen overschrijven
   vanuit één generieke regel. */
@media (min-width: 768px){
  .hero-copy [data-show-desktop="false"]{ display: none !important; }
}
@media (max-width: 767px){
  .hero-copy [data-show-mobile="false"]{ display: none !important; }
}
@media (max-width: 1023px){
  .hero{ min-height: 560px; }
  .hero-inner{ padding-block: var(--sp-7); }
}
@media (max-width: 479px){
  .hero{ min-height: 480px; }
  .hero-copy{ max-width: 100%; }
}

.occasion-list{
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid rgb(var(--color-border)); border-left: 1px solid rgb(var(--color-border));
}
.occasion-tile{
  border-right: 1px solid rgb(var(--color-border)); border-bottom: 1px solid rgb(var(--color-border));
  min-height: 148px; padding: var(--sp-5) var(--sp-4); min-width: 0;
  display: flex; align-items: flex-end; transition: background-color .15s ease;
}
.occasion-tile span{ overflow-wrap: break-word; }
.occasion-tile:hover{ background: var(--wit); }
.occasion-tile span{ font-family: var(--font-heading); font-weight: 600; font-size: var(--h3-size); line-height: var(--h3-lh); }
/* Mobiel/tablet (<1024px): horizontaal doorscrollend "carrousel" i.p.v. een
   grid dat alle tegels onder elkaar stapelt. Het aantal gelijktijdig zichtbare
   kolommen en rijen is instelbaar in de Theme Editor (secties "Mobiele
   weergave" → --occ-mobile-cols / --occ-mobile-rows, als CSS-variabelen op de
   sectie gezet). grid-auto-flow:column vult eerst een kolom (het ingestelde
   aantal rijen) voordat de volgende kolom begint, dus de tegels lopen in
   leesvolgorde door naar rechts. grid-auto-columns bepaalt de breedte van elke
   kolom zodat precies het ingestelde aantal past in de beschikbare breedte;
   max(170px, …) voorkomt dat tegels te smal worden (en dus weer scheef/
   overlappend, of — zoals bij een eerdere, te lage waarde van 140px bleek —
   dat de langste titel, "Gefeliciteerd", niet meer op één regel past en
   lelijk middenin het woord afbreekt; 170px is gemeten op de daadwerkelijke
   tekstbreedte van die titel plus de tegel-padding, met wat marge) als
   iemand een hoog aantal kolommen kiest op een smal scherm — dan zijn er
   gewoonweg iets minder dan het ingestelde aantal tegelijk zichtbaar, in
   plaats van dat de rij weer buiten de pagina valt. overflow-x:auto hier
   is bewust lokaal (alleen deze lijst scrollt opzij) — zie ook de algemene
   html/body overflow-x:hidden hierboven, die voorkomt dat de HELE pagina ooit
   zijwaarts kan bewegen. */
@media (max-width: 1023px){
  .occasion-list{
    display: grid; grid-template-columns: none;
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--occ-mobile-rows, 2), 1fr);
    grid-auto-columns: max(170px, calc(100% / var(--occ-mobile-cols, 2)));
    overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
    /* Geen zichtbare scrollbalk meer: op uitdrukkelijk verzoek van de klant
       wordt het doorscrollen nu alleen nog aangegeven met de pijltjesknoppen
       hieronder (.occasion-carousel-nav), niet met een slider/scrollbalk.
       Vegen op een touchscreen blijft gewoon werken, alleen de visuele
       scrollbalk zelf wordt verborgen. */
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .occasion-list::-webkit-scrollbar{ display: none; }
  .occasion-tile{ scroll-snap-align: start; }
}
@media (max-width: 479px){ .occasion-tile{ min-height: 120px; } }

/* ---------- Homepage: gelegenheden-carrousel breekt uit de containerrand (mobiel/tablet) ----------
   Klantfeedback: op een telefoon werd de 2e kolom van de carrousel net afgesneden door de
   rand van het scherm. Oorzaak: .occasion-list staat binnen .container, die links/rechts
   24px padding heeft (--container-pad); op een telefoon van 375px breed blijft daardoor maar
   327px over, terwijl 2 kolommen van elk minimaal 170px (zie grid-auto-columns hierboven,
   bedoeld om "Gefeliciteerd" niet lelijk te laten afbreken) samen 340px nodig hebben — 13px
   meer dan er binnen de container-padding past, dus de 2e tegel viel net over de schermrand.
   Oplossing: alleen de carrousel zelf (niet de titel/tekst erboven) breekt uit die
   containerpadding, met negatieve zijmarges zodat hij de volle schermbreedte krijgt om in te
   scrollen. Bij de standaardinstelling (2 kolommen × 170px = 340px) past dat ruim op elk
   gangbaar telefoonscherm (vanaf zo'n 360px breed), zonder dat de tegel nog wordt afgesneden.
   Bij een handmatig hoger aantal kolommen blijft het bestaande, bewuste gedrag gewoon gelden:
   dan past er gewoon iets minder dan het ingestelde aantal tegelijk in beeld (zie de uitleg
   hierboven bij .occasion-list), in plaats van dat er weer een scherprand afgesneden wordt. */
@media (max-width: 1023px){
  .occasion-carousel-wrap{ margin-inline: calc(-1 * var(--container-pad)); }
}

/* ---------- Homepage: pijltjesknoppen onder de gelegenheden-carrousel (mobiel/tablet) ----------
   Vervangt de native scrollbalk/slider-indicator door expliciete vorige/volgende-knoppen,
   op uitdrukkelijk verzoek van de klant. Zelfde visuele opzet als de bestaande
   .wine-carousel-btn (cirkel, witte achtergrond, rand, schaduw), maar als eigen, losse
   klasse (.occasion-carousel-btn) zodat niets aan de bestaande wijnen-carrousel wijzigt.
   Kleur: standaard al het merkbruin (rgb(var(--color-link)), hetzelfde bruin als de rest
   van de site), in plaats van zwart-met-bruin-op-hover zoals bij .wine-carousel-btn — dit
   is een expliciet verzoek van de klant ("dezelfde kleur als de pijltjes... dus die soort
   van bruin"). Onder de lijst geplaatst (niet links/rechts overlappend op de tegels, zoals
   bij de wijnen-carrousel) omdat de tegels zelf tot de randen van de container lopen. */
.occasion-carousel-wrap{ position: relative; }
.occasion-carousel-nav{
  display: none;
  align-items: center; justify-content: center; gap: var(--sp-3);
  margin-top: var(--sp-4);
}
.occasion-carousel-btn{
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--wit); border: 1px solid rgb(var(--color-border)); box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center; color: rgb(var(--color-link));
  transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.occasion-carousel-btn:hover{ border-color: rgb(var(--color-link)); color: var(--noten-donker); }
.occasion-carousel-btn svg{ width: 16px; height: 16px; }
.occasion-carousel-btn[disabled]{ opacity: .3; pointer-events: none; cursor: default; }
@media (max-width: 1023px){ .occasion-carousel-nav{ display: flex; } }

.story-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.story-step{ display: flex; flex-direction: column; gap: var(--sp-4); }
.story-photo{ border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3/4; }
.story-photo img{ width: 100%; height: 100%; object-fit: cover; }
.story-num{ color: rgb(var(--color-link)); }
@media (max-width: 767px){ .story-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px){ .story-grid{ grid-template-columns: 1fr; } }

.placeholder-block{
  background: var(--travertijn); border-radius: var(--radius-card);
  display: flex; align-items: center; justify-content: center;
  color: var(--nacht); font-family: var(--font-heading); font-weight: 600; font-size: var(--small-size);
  letter-spacing: 0.02em; text-align: center; padding: var(--sp-4);
}

.format-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); align-items: stretch; }
.format-card{ display: flex; flex-direction: column; gap: var(--sp-4); height: 100%; }
.format-photo{ border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/5; }
.format-photo img{ width: 100%; height: 100%; object-fit: cover; }
.format-card p{ color: rgb(var(--color-text-secondary)); margin-bottom: 0; }
.format-card .btn{ margin-top: auto; align-self: flex-start; }
@media (max-width: 767px){ .format-grid{ grid-template-columns: 1fr; } }

/* ---------- Collectiepagina "Wijncadeaus": afbeelding-weergave (Theme Editor) ----------
   Gescopet tot #collection-boxes-main, zodat de bestaande .format-photo elders (indien
   ooit hergebruikt) niet wordt geraakt. Standaardwaarden (ratio 80% = 4:5, grootte 100%)
   reproduceren exact het huidige uiterlijk. */
#collection-boxes-main .format-photo{
  aspect-ratio: var(--cb-photo-ratio, 4/5);
  width: var(--cb-photo-size, 100%);
  margin-inline: auto;
}
#collection-boxes-main[data-photo-ratio="original"] .format-photo{ aspect-ratio: auto; }
#collection-boxes-main[data-photo-ratio="original"] .format-photo img{ height: auto; object-fit: contain; }

.wine-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.wine-card{ display: block; }
.wine-photo{
  border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 3/4; margin-bottom: var(--sp-3);
  /* Geen geforceerde achtergrondkleur meer: de merchant gebruikt nu vrijgestelde PNG's met
     eigen transparantie, en die transparantie moet de achtergrond van de sectie laten
     doorschijnen in plaats van een vaste kleur hier in de container. */
}
.wine-photo img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.wine-card:hover .wine-photo img{ transform: scale(1.03); }
.wine-card h3{ margin-bottom: 2px; }
.wine-card .taste{ color: rgb(var(--color-text-secondary)); font-size: var(--small-size); }
.wine-card:hover h3{ color: rgb(var(--color-link)); }
@media (max-width: 1023px){ .wine-grid{ grid-template-columns: repeat(2, 1fr); } }

/* ---------- Homepage: wijnkaart-tekst gecentreerd onder de fles ----------
   Gescopet tot #home-wine-grid (alleen de homepage-carousel van sectie
   kadowijn-wijnen-carousel), zodat de wijncollectiepagina
   (#collection-wijnen-main) en de wine-picker-carousel in de configurator
   ongewijzigd links uitgelijnd blijven. text-align is overervend, dus dit
   centreert zowel de naam (h3) als het smaakprofiel (.taste) onder de foto,
   zonder de foto zelf te beïnvloeden. */
#home-wine-grid .wine-card{ text-align: center; }

/* ---------- Collectiepagina "Wijnen": afbeelding-weergave (Theme Editor) ----------
   Gescopet tot #collection-wijnen-main, zodat de bestaande .wine-photo op de homepage,
   de configurator-carousel en de wine-picker (.wine-grid.wine-carousel e.d.) ongewijzigd
   blijven. Standaardwaarden (ratio 75% = 3:4, grootte 100%) reproduceren exact het huidige
   uiterlijk. */
#collection-wijnen-main .wine-photo{
  aspect-ratio: var(--cw-photo-ratio, 3/4);
  width: var(--cw-photo-size, 100%);
  margin-inline: auto;
}
#collection-wijnen-main[data-photo-ratio="original"] .wine-photo{ aspect-ratio: auto; }
#collection-wijnen-main[data-photo-ratio="original"] .wine-photo img{ height: auto; object-fit: contain; }

/* Wijncollectiepagina: zelfde centrering van wijnnaam/smaakprofiel onder de fles als op de
   homepage (zie #home-wine-grid hierboven), hier gescopet tot #collection-wijnen-main zodat
   de configurator-wine-picker (.wine-grid.wine-carousel) ongewijzigd links uitgelijnd blijft. */
#collection-wijnen-main .wine-card{ text-align: center; }

/* Productconfiguratorpagina ("Stel je Kadowijn samen"): de wijnencarrousel onderaan die
   pagina gebruikt dezelfde .wine-card-markup, met een eigen id (#product-wine-grid) zodat
   dit los van de homepage en de wijncollectiepagina gescopet kan worden. Zelfde centrering
   van wijnnaam/smaakprofiel als hierboven. Dit is de derde en laatste plek in de theme waar
   .wine-card wordt gebruikt (geverifieerd: alle overige secties bevatten geen .wine-card). */
#product-wine-grid .wine-card{ text-align: center; }

.wine-grid.wine-carousel{
  display: flex; flex-wrap: nowrap; gap: var(--sp-5);
  overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  scrollbar-width: none; -ms-overflow-style: none;
  padding-bottom: 2px;
}
.wine-grid.wine-carousel::-webkit-scrollbar{ display: none; }
.wine-grid.wine-carousel .wine-card{
  flex: 0 0 calc((100% - 3 * var(--sp-5)) / 4);
  min-width: 200px; scroll-snap-align: start;
}
@media (max-width: 1023px){
  .wine-grid.wine-carousel{ gap: var(--sp-4); }
  .wine-grid.wine-carousel .wine-card{
    flex: 0 0 calc((100% - var(--sp-4)) / 2);
    min-width: 150px;
  }
}

.wine-carousel-wrap{ position: relative; }
.wine-carousel-btn{
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  background: var(--wit); border: 1px solid rgb(var(--color-border)); box-shadow: var(--shadow-float);
  display: flex; align-items: center; justify-content: center; color: var(--nacht);
  z-index: 2; transition: opacity .15s ease, border-color .15s ease, color .15s ease;
}
.wine-carousel-btn:hover{ border-color: rgb(var(--color-link)); color: rgb(var(--color-link)); }
.wine-carousel-btn svg{ width: 16px; height: 16px; }
.wine-carousel-prev{ left: -20px; }
.wine-carousel-next{ right: -20px; }
.wine-carousel-btn[disabled]{ opacity: .3; pointer-events: none; cursor: default; }
@media (max-width: 1023px){ .wine-carousel-btn{ display: none; } }

a.wine-grid-more{
  display: block; text-align: right; margin-top: var(--sp-6);
  /* Zelfde merkbruin als .link-more (bv. "Terug naar alle wijnen" op de wijnpagina's).
     Zonder deze regel erft de link de gewone (donkere) tekstkleur via de basis "a{ color:
     inherit }"-regel bovenaan dit bestand, in plaats van de link-kleur. */
  color: rgb(var(--color-link));
}
a.wine-grid-more:hover{ color: var(--noten-donker); }
@media (max-width: 767px){
  a.wine-grid-more{ text-align: right; margin-top: var(--sp-5); }
}

.wine-detail-grid{ display: grid; grid-template-columns: 5fr 7fr; gap: var(--sp-8); align-items: center; }
.wine-detail-photo{ border-radius: var(--radius-card); overflow: hidden; aspect-ratio: var(--wd-photo-ratio, 3/4); }
.wine-detail-photo img{ width: 100%; height: 100%; object-fit: cover; }
.wine-detail-photo[data-photo-ratio="original"] img{ height: auto; object-fit: contain; }
.wine-detail-body .eyebrow{ display: block; margin-bottom: var(--sp-2); }
.wine-detail-body h1{ margin-bottom: var(--sp-3); }
.wine-detail-body .taste{ display: block; color: rgb(var(--color-text-secondary)); margin-bottom: var(--sp-5); font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.wine-detail-body .body-lg{ color: rgb(var(--color-foreground)); margin-bottom: var(--sp-6); }
.wine-detail-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-5); }
@media (max-width: 1023px){ .wine-detail-grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }

.text-page-inner{ max-width: 720px; margin-inline: auto; }
.text-page-inner .eyebrow{ display: block; margin-bottom: var(--sp-2); }
.text-page-inner h1{ margin-bottom: var(--sp-4); }
.text-page-inner .intro{ color: rgb(var(--color-text-secondary)); margin-bottom: var(--sp-7); }
.text-page-inner .body-block + .body-block{ margin-top: var(--sp-5); }
/* Klantfeedback: linkjes in lopende tekst (bv. een verwijzing naar een telefoonnummer, e-mailadres
   of andere pagina in de tekst van een beleidspagina of de contactpagina) stonden gewoon zwart/grijs
   in plaats van herkenbaar merkbruin, zoals het linkje in de trust-strip (".trust-strip-text a")
   dat al wel bruin was. Bewust alleen hier, binnen de tekstinhoud zelf (.text-page-inner, dus ook
   .policy-body erin), en NIET als algemene regel op alle "a"-elementen: een eerdere, bredere versie
   van deze regel kleurde per ongeluk ook de hoofdnavigatie (Wijnen/Over ons/Zakelijke geschenken)
   en het winkelwagen-icoon mee, die moeten gewoon zwart blijven. */
.text-page-inner a{ color: rgb(var(--color-link)); }
.text-page-inner a:hover{ color: var(--noten-donker); }
.about-photo{ border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 16/9; margin-bottom: var(--sp-7); background: var(--travertijn); }
.about-photo img{ width: 100%; height: 100%; object-fit: cover; }
.faq-list{ display: flex; flex-direction: column; gap: var(--sp-2); max-width: 720px; margin-inline: auto; }
.faq-item{ border-bottom: 1px solid rgb(var(--color-border)); }
.faq-q{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4); font-family: var(--font-heading); font-weight: 600; font-size: var(--body-size);
  text-align: left;
}
.faq-q .chev{ width: 10px; height: 10px; flex: none; color: rgb(var(--color-text-secondary)); transition: transform .15s ease; }
.faq-q[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.faq-a{ display: none; padding-bottom: var(--sp-4); color: rgb(var(--color-text-secondary)); max-width: 62ch; }
.faq-item[data-open="true"] .faq-a{ display: block; }
/* Linkjes in FAQ-antwoorden (bv. een WhatsApp- of mailto-link, zie de info-tekst bij het
   "Antwoord"-veld in het schema) in hetzelfde merkbruin als elders in de teksten op de site. */
.faq-a a{ color: rgb(var(--color-link)); }
.faq-a a:hover{ color: var(--noten-donker); }

.site-footer{ background: rgb(var(--color-background)); color: rgb(var(--color-foreground)); padding-block: var(--sp-8) var(--sp-6); }
.footer-grid{
  display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--sp-6);
  padding-bottom: var(--sp-7); border-bottom: 1px solid rgba(var(--color-foreground),0.14);
}
.footer-col h3{ color: rgb(var(--color-foreground)); font-size: var(--label-size); margin-bottom: var(--sp-3); }
.footer-col ul{ display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col a{ color: rgba(var(--color-foreground),0.7); font-size: var(--small-size); }
.footer-col a:hover{ color: rgb(var(--color-foreground)); }
.footer-brand .wordmark{ color: rgb(var(--color-foreground)); }
.footer-brand p{ color: rgba(var(--color-foreground),0.6); margin-top: var(--sp-3); max-width: 32ch; }
/* Klantverzoek (okt. 2026): partnerlogo (bijv. Marc Kroon Wijn) onder het Kadowijn-logo en de
   tagline in de footer — subtiel/klein, want dit is een samenwerking, geen gelijkwaardig tweede
   merk. Grootte EN de ruimte erboven zijn nu zelf instelbaar (Theme Editor: Footer > Merk / logo
   > "Partnerlogo — grootte desktop/mobiel" / "Partnerlogo — ruimte boven"); die instellingen
   worden in sections/kadowijn-footer.liquid als --footer-partner-logo-size-desktop/-mobile en
   --footer-partner-logo-gap-top inline op dit element gezet (zelfde patroon als .wordmark img
   hierboven voor het hoofdlogo). Op mobiel (<=479px) staat het logo, klantverzoek, los van de
   rest van de kolom (die links uitgelijnd blijft) gecentreerd.
   margin-bottom (vast, niet instelbaar): klantfeedback — op mobiel staat .footer-grid op dit
   breakpoint bewust op "gap: 0" (zie de uitleg daarbij hieronder, voor de dunne lijnen tussen de
   accordion-rijen "Wijncadeaus"/"Wijnen"/"Service"), waardoor het logo zonder deze regel direct
   tegen de eerste accordion-rij (en zijn lijntje erboven) aan zou komen te staan. Deze marge
   geeft die ademruimte terug, specifiek voor het logo — de rest van het merkblok (tekst/tagline)
   had dit probleem niet, dus hoeft niet aangepast. */
.footer-partner-logo{
  display: block;
  width: var(--footer-partner-logo-size-desktop, 64px);
  max-width: 100%;
  height: auto;
  margin-top: var(--footer-partner-logo-gap-top, 8px);
  margin-bottom: var(--sp-5);
  opacity: 0.85;
}
@media (max-width: 479px){
  .footer-partner-logo{
    width: var(--footer-partner-logo-size-mobile, 56px);
    margin-inline: auto;
  }
}
.footer-bottom{ padding-top: var(--sp-5); display: flex; justify-content: space-between; color: rgba(var(--color-foreground),0.55); font-size: var(--micro-size); }
/* Footer-kolommen "Wijncadeaus"/"Wijnen"/"Service" (Gelegenheden is op klantverzoek uit de
   footer gehaald, blijft wel in de header staan): op desktop/tablet is de
   .footer-col-trigger-knop puur decoratief (ziet eruit als de oude kale <h3>, niet klikbaar) en
   staat .footer-col-body altijd volledig open — zo blijft dat uiterlijk exact hetzelfde als
   voorheen. Pas binnen @media (max-width: 479px) hieronder wordt dit een echte in-/uitklapbare
   accordion per kolom (klantverzoek), met de beginstand per kolom ingesteld via het
   default_open_mobile-blockinstelling (zie {% schema %}) en bediend door initFooterAccordion()
   in assets/kadowijn-nav.js — zelfde data-open/aria-expanded-patroon als de mobiele
   hoofdmenu-accordion (.mobile-accordion-item/-trigger). */
.footer-col-trigger{
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%; background: none; border: none; padding: 0; margin: 0 0 var(--sp-3) 0;
  font: inherit; color: inherit; text-align: inherit; cursor: default; pointer-events: none;
}
.footer-col-trigger h3{ margin-bottom: 0; }
.footer-col-trigger .chev{ display: none; width: 10px; height: 10px; flex: none; color: rgb(var(--color-text-secondary)); transition: transform .15s ease; }
.footer-col-body{ overflow: visible; max-height: none; }
@media (max-width: 1023px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .footer-brand{ grid-column: 1 / -1; }
}
@media (max-width: 479px){
  .footer-grid{ grid-template-columns: 1fr; }
  .footer-bottom{ flex-direction: column; gap: var(--sp-2); }

  /* Herzien n.a.v. klantfeedback: NIET meer rechts uitgelijnd — terug naar gewoon links
     uitgelijnd (de standaard tekstrichting), net als de rest van de site. De kolomkoppen
     ("Wijncadeaus", "Gelegenheden", "Wijnen", "Service") worden op telefoon een compacte,
     links uitgelijnde accordion-lijst met een dunne lijn tussen elke rij en weinig
     verticale ruimte — zelfde "kort op elkaar, met streepjes ertussen"-opzet als het
     aangeleverde voorbeeld (Business Information / Policies / Information / ...). Elke
     rij krijgt zijn label links en de chevron rechts (justify-content: space-between,
     i.p.v. de vorige flex-end) en een dunne lijn erboven (border-top); de eerste rij
     (direct onder het logo/tagline-blok) krijgt ook zo'n lijn, als scheiding met het
     merkblok erboven.
     Nogmaals herzien n.a.v. klantfeedback (2 ronden later): de rijen stonden nog te ver uit
     elkaar vergeleken met het aangeleverde voorbeeld — padding-block gaat van --sp-3 (12px)
     naar --sp-2 (8px) zodat de rijen net zo kort op elkaar staan. Ook de dunne lijn en de
     pijltjes zijn nu het merkbruin (rgb(var(--color-link)), hetzelfde bruin als bv. de
     pijltjesknoppen onder de gelegenheden-carrousel hierboven) in plaats van het neutrale
     grijsbruin van rgba(var(--color-foreground),0.14)/var(--color-text-secondary), op
     uitdrukkelijk verzoek ("maak die lijnen en pijltjes bruin zoals overal op de pagina").
     Derde ronde klantfeedback (screenshot): de padding-fix hierboven alleen was niet genoeg,
     omdat .footer-grid (de basisregel, zie hoger in dit bestand) een vaste "gap: var(--sp-6)"
     (32px) heeft tussen de grid-items — op desktop/tablet is dat de ruimte TUSSEN de kolommen
     naast elkaar, maar op telefoon staat elke kolom nu als eigen rij onder elkaar (zie
     grid-template-columns: 1fr hierboven), dus die 32px gap bleef als een grote, onbedoelde
     verticale sprong tussen elke accordion-rij staan — veel groter dan de krappe 8px padding
     hierboven, en dus de eigenlijke reden dat de rijen nog steeds niet op elkaar leken te staan
     zoals in het voorbeeld. Daarnaast zorgde die 32px lege ruimte er visueel voor dat de
     label+pijltje van elke rij bovenin een te hoog "vakje" leken te staan i.p.v. precies
     ertussenin. Opgelost door de grid-gap op dit ene breakpoint naar 0 te zetten: de dunne
     lijnen (border-top, hierboven) nemen de visuele scheiding tussen rijen nu volledig over,
     en elke rij is daardoor precies zo hoog als zijn eigen label+padding — waardoor label en
     pijltje (align-items:center op .footer-col-trigger, zie basisregel) vanzelf precies in het
     midden van dat kleinere, kloppende vakje komen te staan. */
  .footer-grid{ gap: 0; }
  .footer-col-trigger{
    cursor: pointer; pointer-events: auto;
    justify-content: space-between;
    padding-block: var(--sp-2);
    margin: 0;
    border-top: 1px solid rgba(var(--color-link),0.45);
  }
  .footer-col-trigger .chev{ display: block; color: rgb(var(--color-link)); }
  .footer-col[data-open="true"] .footer-col-trigger .chev{ transform: rotate(180deg); }
  .footer-col-body{ overflow: hidden; max-height: 0; transition: max-height .2s ease; }
  .footer-col[data-open="true"] .footer-col-body{ max-height: 600px; padding-bottom: var(--sp-2); }
}

.product-page{ padding-block: var(--sp-7); }
.product-grid{ display: grid; grid-template-columns: 6fr 5fr; gap: var(--sp-7); align-items: start; }
@media (max-width: 1023px){ .product-grid{ grid-template-columns: 1fr; gap: var(--sp-6); } }

@media (max-width: 767px){
  .product-page{ padding-block: var(--sp-5); }
  .product-grid{ gap: var(--sp-4); }
  .gallery-main{ margin-bottom: var(--sp-1); }
  .configurator-head{ margin-bottom: var(--sp-3); }
  .configurator-head h1{ font-size: 23px; line-height: 29px; }
  .configurator-head .price-from{ font-size: var(--small-size); }
  .config-step{ padding-block: var(--sp-3); }
  .step-title h3{ font-size: 15px; line-height: 22px; }
}

.gallery-main{ border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/5; margin-bottom: var(--sp-3); background: var(--travertijn); }
.gallery-main img{ width: 100%; height: 100%; object-fit: cover; }
/* Voorkomt dat bij binnenkomst via een gelegenheid-link (?occasion=...)
   heel even de verkeerde (standaard) foto zichtbaar is voordat het
   script (assets/kadowijn-configurator.js, renderGalleryPreview) de
   juiste gelegenheidfoto heeft ingesteld. De hoofdfoto start onzichtbaar
   en wordt pas getoond zodra dat script de juiste foto heeft gekozen.
   Zonder JavaScript (zeldzaam, en de configurator werkt dan toch niet)
   zorgt de <noscript>-regel in de sectie dat de foto gewoon zichtbaar is. */
.gallery-main img#gallery-main-img{ transition: opacity .15s ease; }
.gallery-main img#gallery-main-img.is-gallery-loading{ opacity: 0; }
.gallery-thumbs{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.gallery-thumb{ border-radius: var(--radius-control); overflow: hidden; aspect-ratio: 1/1; border: 1px solid rgb(var(--color-border)); cursor: pointer; background: var(--travertijn); }
.gallery-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb[aria-current="true"]{ border-color: rgb(var(--color-link)); border-width: 2px; }

.about-kadowijn{ background: var(--wit); border-top: 1px solid rgb(var(--color-border)); border-bottom: 1px solid rgb(var(--color-border)); }
.about-kadowijn-inner{ max-width: 680px; margin-inline: auto; text-align: center; }
.about-kadowijn-inner .eyebrow{ display: block; margin-bottom: var(--sp-2); }
.about-kadowijn-inner h2{ margin-bottom: var(--sp-4); }
.about-kadowijn-inner p{ color: var(--rook); margin-inline: auto; }
.link-more{
  display: inline-block; margin-top: var(--sp-5);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--label-size); color: rgb(var(--color-link));
}
.link-more:hover{ color: var(--noten-donker); }

.mood-photo{ width: 100%; aspect-ratio: 21/9; overflow: hidden; }
.mood-photo img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 767px){ .mood-photo{ aspect-ratio: 4/3; } }

.configurator-head{ margin-bottom: calc(var(--sp-5) - 4px); }
.configurator-head h1{ margin-bottom: 2px; }
.configurator-head .price-from{ color: rgb(var(--color-text-secondary)); }

.config-step{ padding-block: calc(var(--sp-5) - 4px); border-top: 1px solid rgb(var(--color-border)); }
.configurator > .config-step:first-of-type{ border-top: none; padding-top: 0; }
.step-title{ display: flex; align-items: center; gap: var(--sp-3); margin-bottom: calc(var(--sp-4) - 2px); }
.step-num{
  width: 24px; height: 24px; border-radius: 999px; background: var(--nacht); color: var(--room);
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading);
  font-weight: 600; font-size: 12px; flex: none;
}
.step-title h3{ font-size: var(--body-lg-size); line-height: var(--body-lg-lh); }
.step-title-price{ color: rgb(var(--color-text-secondary)); font-weight: 400; }

.size-options{ display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
.size-option{
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control); padding: var(--sp-3);
  text-align: center; display: flex; flex-direction: column; gap: 2px;
}
.size-option:hover{ border-color: rgb(var(--color-link)); }
.size-option[aria-pressed="true"]{ border-color: rgb(var(--color-link)); border-width: 2px; background: rgba(138,74,40,0.05); }
.size-option .n{ font-family: var(--font-heading); font-weight: 600; font-size: var(--body-size); }
.size-option .p{ font-size: var(--micro-size); color: rgb(var(--color-text-secondary)); }
.wine-rows{ display: flex; flex-direction: column; gap: var(--sp-3); }
.wine-row{ border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control); overflow: hidden; }
.wine-row-head{
  display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); width: 100%; text-align: left;
}
.wine-row-thumb{ width: 40px; height: 40px; border-radius: var(--radius-control); overflow:hidden; flex: none; }
.wine-row-thumb img{ width: 100%; height: 100%; object-fit: cover; }
.wine-row-info{ flex: 1; min-width: 0; }
.wine-row-info .name{ display: block; font-family: var(--font-heading); font-weight: 600; font-size: var(--body-size); }
.wine-row-info .taste{ display: block; margin-top: 2px; font-size: var(--micro-size); color: rgb(var(--color-text-secondary)); }
.wine-row-info .placeholder-label{ font-size: var(--body-size); color: rgb(var(--color-text-secondary)); }
.wine-row-price{ font-size: var(--small-size); color: rgb(var(--color-text-secondary)); flex: none; }
.wine-row-chev{ width: 16px; height: 16px; flex: none; transition: transform .15s ease; color: rgb(var(--color-text-secondary)); }
.wine-row[data-open="true"] .wine-row-chev{ transform: rotate(180deg); }
.wine-row[data-open="true"] .wine-row-head{ border-bottom: 1px solid rgb(var(--color-border)); }
.wine-row-panel{ display: none; padding: var(--sp-2); }
.wine-row[data-open="true"] .wine-row-panel{ display: block; }
.wine-choice{
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; padding: var(--sp-2); border-radius: var(--radius-control);
  text-align: left;
}
.wine-choice:hover{ background: var(--room); }
.wine-choice .swatch{ width: 32px; height: 32px; border-radius: 6px; flex: none; overflow: hidden; }
.wine-choice .swatch img{ width: 100%; height: 100%; object-fit: cover; }
.wine-choice .name{ font-family: var(--font-heading); font-weight: 600; font-size: var(--small-size); }
.wine-choice .taste{ font-size: var(--micro-size); color: var(--rook); }
.wine-choice .price{ margin-left: auto; font-size: var(--small-size); color: var(--rook); }
.wine-choice[aria-pressed="true"]{ background: rgba(138,74,40,0.08); }

.text-mode-tabs{ display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.text-mode-tab{
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control); padding: var(--sp-2) var(--sp-4);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--micro-size);
}
.text-mode-tab[aria-selected="true"]{ background: var(--nacht); color: var(--room); border-color: var(--nacht); }

.std-text-toggle{
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3);
  font-family: var(--font-heading); font-weight: 600; font-size: var(--body-size);
  text-align: left;
}
.std-text-toggle:hover{ border-color: rgb(var(--color-link)); }
.std-text-toggle .chev{ width: 10px; height: 10px; flex: none; color: rgb(var(--color-text-secondary)); transition: transform .15s ease; }
.std-text-toggle[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.standard-texts{ display: flex; flex-wrap: wrap; gap: var(--sp-2); padding-bottom: var(--sp-2); }
.standard-texts[hidden]{ display: none; }
.standard-text-btn{
  border: 1px solid rgb(var(--color-border)); border-radius: 999px; padding: var(--sp-2) var(--sp-4);
  font-size: var(--small-size);
}
.standard-text-btn:hover{ border-color: rgb(var(--color-link)); }
.standard-text-btn[aria-pressed="true"]{ background: var(--noten); color: var(--room); border-color: var(--noten); }
.char-counter{ font-variant-numeric: tabular-nums; }
.field-row-top{ display: flex; align-items: baseline; justify-content: space-between; }

.preview-caption{ display: block; margin-top: var(--sp-4); margin-bottom: var(--sp-3); }
.preview-wrap{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-4) 0; background: var(--room); border-radius: var(--radius-card); border: 1px solid rgb(var(--color-border)); }
.box-preview{
  background: var(--nacht); border-radius: 4px; position: relative;
  box-shadow: 0 18px 40px rgba(34,24,23,0.25);
  transition: width .2s ease, height .2s ease;
}
/* box-text staat nu op een vaste positie (top: 15%) gemeten vanaf de bovenkant van de doos, in plaats van
   verticaal gecentreerd. Dit is gekalibreerd op een echte productfoto van de dozen (door de klant aangeleverd):
   op de echte doos begint de tekst op ongeveer 15% van de hoogte, ruim boven het logo-gebied. Omdat "top" bij
   een absoluut gepositioneerd element altijd tegen de HOOGTE van de eigen doos (.box-preview, position:relative)
   berekend wordt — anders dan bij padding, dat altijd tegen de breedte rekent — geeft dit voor elk formaat
   (met zijn eigen vaste hoogte, zie de data-size-regels hieronder) automatisch dezelfde relatieve starthoogte,
   zonder dat er per formaat een aparte waarde nodig is. */
/* Klantfeedback (okt. 2026, screenshot): bij de 1-fles-doos brak lange tekst ("Fijne
   feestdagen") lelijk af MIDDEN IN een woord ("Fijne feestdage" / "n" op een eigen regel).
   Oorzaak was "word-break: break-word" hieronder — dat forceert zo'n afbreking zodra een
   los woord niet meer past. De klant wil nooit een afbreking binnen een woord: nu
   "word-break: normal" (alleen nog afbreken tussen woorden, op spaties), gecombineerd met
   assets/kadowijn-configurator.js (fitBoxPreviewText): die verkleint het lettertype van de
   previewtekst stap voor stap totdat de tekst, heel, binnen 2 regels past — voor elk
   formaat (1/2/3 flessen). */
.box-preview .box-text{
  position: absolute; top: 15%; left: 0; right: 0;
  color: var(--room); font-family: var(--font-heading); font-weight: 600;
  letter-spacing: 0.04em; text-align: center;
  box-sizing: border-box;
  padding-left: 10%; padding-right: 10%;
  overflow-wrap: normal; word-break: normal;
}
.box-preview .box-mark{
  position: absolute; bottom: var(--sp-3); left: 0; right: 0; text-align: center;
  color: var(--room); font-family: var(--font-heading); font-weight: 600; font-size: 10px; letter-spacing: 0.04em; opacity: 0.85;
}
.box-preview[data-size="1"]{ width: 72px; height: 264px; }
.box-preview[data-size="1"] .box-text{ font-size: 11px; line-height: 1.3; }
.box-preview[data-size="1"] .box-mark{ font-size: 8px; }
.box-preview[data-size="2"]{ width: 170px; height: 224px; }
.box-preview[data-size="2"] .box-text{ font-size: 15px; line-height: 1.32; }
.box-preview[data-size="3"]{ width: 220px; height: 224px; }
.box-preview[data-size="3"] .box-text{ font-size: 16px; line-height: 1.32; }
.box-preview .box-text:empty::before{ content: attr(data-placeholder); opacity: 0.45; }

.card-toggle-row{ display: flex; align-items: flex-start; gap: var(--sp-3); }
.switch{ position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--rand); flex: none; margin-top: 2px; }
.switch::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:999px; background: var(--wit); transition: transform .15s ease; }
.switch[aria-checked="true"]{ background: var(--noten); }
.switch[aria-checked="true"]::after{ transform: translateX(18px); }
.card-note{ font-size: var(--small-size); color: rgb(var(--color-text-secondary)); margin-top: 2px; }
.card-price-note{ font-size: var(--micro-size); color: rgb(var(--color-text-secondary)); }
.handwritten-msg{ margin-top: var(--sp-4); }

.price-row{ display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-3); }
.price-row .total{ font-family: var(--font-heading); font-weight: 600; font-size: var(--h2-size); }
.price-row .sub{ color: var(--rook); font-size: var(--small-size); }
.config-summary{
  margin-top: calc(var(--sp-5) - 4px);
  background: var(--wit); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-card);
  padding: var(--sp-5); box-shadow: var(--shadow-float);
}
.config-summary > .total{
  display: block; font-family: var(--font-heading); font-weight: 600;
  font-size: var(--h1-size); line-height: var(--h1-lh); margin-bottom: var(--sp-4);
}
.config-summary .select-hint{ margin-top: var(--sp-2); margin-bottom: 0; }
.select-hint{ font-size: var(--small-size); color: var(--fout); margin-top: var(--sp-2); display:none; }
.select-hint.is-visible{ display: block; }
.reassurance{ display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-5); justify-content: center; }
.reassurance span{ font-size: var(--micro-size); color: rgb(var(--color-text-secondary)); display: inline-flex; align-items: center; gap: 6px; }
.reassurance svg{ width: 14px; height: 14px; color: rgb(var(--color-link)); }

/* Info-uitklapvakken (Contact / Verzending & retour) onder de ATC-knop.
   Zelfde uitklap-patroon als de bestaande .faq-item/.faq-q op de infopagina's
   en dezelfde chevron als .std-text-toggle — geen nieuwe stijl, geen
   Dawn-look, geen zware shadow. Typografie en spacing per blok komen uit
   losse Theme Editor-instellingen (--acc-* custom properties, per blok
   ingesteld via inline style, zelfde patroon als --cfg-* hierboven). */
.info-accordion{ margin-top: var(--sp-5); border-top: 1px solid rgb(var(--color-border)); }
.info-accordion-item{
  border-bottom: 1px solid rgb(var(--color-border));
  padding-top: var(--acc-spacing-top, 0px); padding-bottom: var(--acc-spacing-bottom, 0px);
}
.info-accordion-trigger{
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding-block: var(--sp-4);
  font-family: var(--font-heading); font-weight: 600;
  font-size: var(--acc-title-size-desktop, 15px); line-height: 1.4;
  text-align: left; color: rgb(var(--color-foreground));
}
.info-accordion-trigger .chev{ width: 10px; height: 10px; flex: none; color: rgb(var(--color-text-secondary)); transition: transform .15s ease; }
.info-accordion-trigger[aria-expanded="true"] .chev{ transform: rotate(180deg); }
.info-accordion-panel{ display: none; padding-bottom: var(--sp-4); }
.info-accordion-item[data-open="true"] .info-accordion-panel{ display: block; }
.info-accordion-body{ color: rgb(var(--color-text-secondary)); font-size: var(--acc-content-size-desktop, 14px); line-height: 1.6; max-width: 62ch; }
.info-accordion-body p{ margin: 0; }
.info-accordion-body p + p{ margin-top: var(--sp-2); }
/* Linkjes in deze accordion-tekst (bv. de WhatsApp- en e-mail-links bij "Contact" op de
   productpagina) in hetzelfde merkbruin als elders in de teksten op de site. */
.info-accordion-body a{ color: rgb(var(--color-link)); }
.info-accordion-body a:hover{ color: var(--noten-donker); }
@media (max-width: 767px){
  .info-accordion-trigger{ font-size: var(--acc-title-size-mobile, 15px); }
  .info-accordion-body{ font-size: var(--acc-content-size-mobile, 14px); }
}

.cart-overlay{ position: fixed; inset: 0; background: rgba(34,24,23,0.4); z-index: 70; opacity: 0; visibility: hidden; transition: opacity .2s ease; }
.cart-overlay[data-open="true"]{ opacity: 1; visibility: visible; }
.cart-drawer{
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: rgb(var(--color-background)); z-index: 71; box-shadow: var(--shadow-float);
  transform: translateX(100%); transition: transform .25s ease;
  display: flex; flex-direction: column;
}
.cart-drawer[data-open="true"]{ transform: translateX(0); }
.cart-head{ display: flex; align-items: center; justify-content: space-between; padding: var(--sp-5); border-bottom: 1px solid rgb(var(--color-border)); }
.cart-body{ flex: 1; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.cart-empty{ color: rgb(var(--color-text-secondary)); text-align: center; padding-block: var(--sp-7); }
.cart-item{ display: flex; gap: var(--sp-4); border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-card); padding: var(--sp-4); }
/* Geen geforceerde donkere achtergrondkleur meer achter de productfoto in de winkelwagen-drawer:
   zelfde reden als bij .wine-photo hierboven — de merchant gebruikt vrijgestelde PNG's met eigen
   transparantie, die anders tegen een hard zwart vlak (var(--nacht)) kwam te staan i.p.v. tegen de
   achtergrond van de drawer zelf (.cart-drawer, die gewoon rgb(var(--color-background)) gebruikt). */
.cart-item-thumb{ width: 56px; height: 80px; border-radius: 6px; flex: none; overflow: hidden; }
.cart-item-thumb img{ width: 100%; height: 100%; object-fit: cover; }
/* Winkelwagen-kaartje toont de doos, niet de losse wijnflessen (klantverzoek,
   na een eerdere tussenstap met een collage van flesfoto's: bij 3 flessen
   paste dat niet meer netjes in dit kleine vakje). assets/kadowijn-cart-
   drawer.js zet nu gewoon de doosfoto (klein bij 1 fles, dezelfde grote doos
   bij 2 en 3 flessen — zie DATA.boxAfbeeldingen in
   sections/kadowijn-product-configurator.liquid en de verborgen eigenschap
   _BoxImg in assets/kadowijn-configurator.js) als het ene <img> in dit
   vakje, dus hiervoor is geen aparte CSS-regel meer nodig dan hierboven. */
.cart-item-info{ flex: 1; min-width: 0; }
.cart-item-info .title{ font-family: var(--font-heading); font-weight: 600; font-size: var(--small-size); }
.cart-item-info .meta{ font-size: var(--micro-size); color: rgb(var(--color-text-secondary)); margin-top: 2px; }
.cart-item-info .price{ font-family: var(--font-heading); font-weight: 600; margin-top: var(--sp-2); }
.cart-item-actions{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-top: var(--sp-2); }
.cart-item-actions button{ font-size: var(--micro-size); color: rgb(var(--color-text-secondary)); text-decoration: underline; }
.cart-item-actions button:hover{ color: var(--fout); }
.cart-qty{ display: flex; align-items: center; gap: var(--sp-2); }
.cart-qty-btn{
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgb(var(--color-border)); border-radius: var(--radius-control);
  font-size: var(--micro-size); color: rgb(var(--color-foreground)); text-decoration: none;
}
.cart-qty-btn:hover{ border-color: rgb(var(--color-link)); color: rgb(var(--color-link)); }
.cart-qty-val{ min-width: 18px; text-align: center; font-size: var(--micro-size); color: rgb(var(--color-foreground)); font-variant-numeric: tabular-nums; }
.cart-foot{ border-top: 1px solid rgb(var(--color-border)); padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.cart-foot .price-row{ margin-bottom: 0; }
.cart-toast{
  position: fixed; bottom: var(--sp-6); left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--nacht); color: var(--room); padding: var(--sp-3) var(--sp-5); border-radius: var(--radius-control);
  font-size: var(--small-size); z-index: 80; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease;
  box-shadow: var(--shadow-float);
}
.cart-toast[data-open="true"]{ opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

@media (max-width: 479px){
  .cart-drawer{ width: 100%; max-width: 100%; }
}

.text-page-inner h3{ margin: var(--sp-6) 0 var(--sp-2); }
.text-page-inner .checklist{ margin: var(--sp-3) 0 var(--sp-6); padding-left: 1.2em; color: rgb(var(--color-text-secondary)); }
.text-page-inner .checklist li{ margin-bottom: var(--sp-2); }
.wine-detail-body h3{ margin: var(--sp-6) 0 var(--sp-2); }
.wine-detail-body .body-block + .body-block{ margin-top: var(--sp-4); }
.wine-detail-body .producer-line{ display: block; margin-bottom: var(--sp-3); }
.wine-detail-divider{ border-top: 1px solid rgb(var(--color-border)); margin: var(--sp-6) 0; }
.cava-note{ display: block; font-size: var(--micro-size); color: rgb(var(--color-link)); margin-top: 2px; }
.faq-category{ margin-top: var(--sp-7); }
.faq-category:first-child{ margin-top: 0; }
.faq-category-title{ display: block; margin-bottom: var(--sp-3); }
/* ================================================================
   Typografie-instellingen (Phase D) — toegevoegd, defaults = huidige
   hardcoded waarden. Elke regel staat na de bestaande basisregels
   in dit bestand, zodat de cascade zonder !important goed valt.
   ================================================================ */

/* ---------- Homepage: Hero ---------- */
.hero-copy .display{
  font-size: var(--hero-title-size-desktop, 48px);
  line-height: calc(var(--hero-title-size-desktop, 48px) * 1.1667);
}
.hero-copy p{
  font-size: var(--hero-text-size-desktop, 18px);
  line-height: calc(var(--hero-text-size-desktop, 18px) * 1.5556);
}
.hero-copy .btn{
  font-size: var(--hero-btn-size-desktop, 14px);
}
@media (max-width: 767px){
  .hero-copy .display{
    font-size: var(--hero-title-size-mobile, 48px);
    line-height: calc(var(--hero-title-size-mobile, 48px) * 1.1667);
  }
  .hero-copy p{
    font-size: var(--hero-text-size-mobile, 18px);
    line-height: calc(var(--hero-text-size-mobile, 18px) * 1.5556);
  }
  .hero-copy .btn{
    font-size: var(--hero-btn-size-mobile, 14px);
  }
}

/* ---------- Homepage: sectiekoppen (Gelegenheden/Hoe het werkt/Formaten/Wijnen) ---------- */
.occasion-heading{
  font-size: var(--occasion-heading-size-desktop, 28px);
  line-height: calc(var(--occasion-heading-size-desktop, 28px) * 1.2857);
}
.story-heading{
  font-size: var(--story-heading-size-desktop, 28px);
  line-height: calc(var(--story-heading-size-desktop, 28px) * 1.2857);
}
.format-heading{
  font-size: var(--format-heading-size-desktop, 28px);
  line-height: calc(var(--format-heading-size-desktop, 28px) * 1.2857);
}
.wine-heading{
  font-size: var(--wine-heading-size-desktop, 28px);
  line-height: calc(var(--wine-heading-size-desktop, 28px) * 1.2857);
}
@media (max-width: 767px){
  .occasion-heading{ font-size: var(--occasion-heading-size-mobile, 28px); line-height: calc(var(--occasion-heading-size-mobile, 28px) * 1.2857); }
  .story-heading{ font-size: var(--story-heading-size-mobile, 28px); line-height: calc(var(--story-heading-size-mobile, 28px) * 1.2857); }
  .format-heading{ font-size: var(--format-heading-size-mobile, 28px); line-height: calc(var(--format-heading-size-mobile, 28px) * 1.2857); }
  .wine-heading{ font-size: var(--wine-heading-size-mobile, 28px); line-height: calc(var(--wine-heading-size-mobile, 28px) * 1.2857); }
}

/* ---------- Homepage: Gelegenheid-blokken ---------- */
.occasion-tile span{
  font-size: var(--occasion-label-size-desktop, 20px);
  line-height: calc(var(--occasion-label-size-desktop, 20px) * 1.4);
}
@media (max-width: 767px){
  .occasion-tile span{ font-size: var(--occasion-label-size-mobile, 20px); line-height: calc(var(--occasion-label-size-mobile, 20px) * 1.4); }
}

/* ---------- Homepage: Story-stappen ---------- */
.story-step .story-num{
  font-size: var(--story-num-size-desktop, 14px);
  line-height: calc(var(--story-num-size-desktop, 14px) * 1.4286);
}
.story-step h3{
  font-size: var(--story-title-size-desktop, 20px);
  line-height: calc(var(--story-title-size-desktop, 20px) * 1.4);
}
.story-step .small{
  font-size: var(--story-text-size-desktop, 14px);
  line-height: calc(var(--story-text-size-desktop, 14px) * 1.5714);
}
@media (max-width: 767px){
  .story-step .story-num{ font-size: var(--story-num-size-mobile, 14px); line-height: calc(var(--story-num-size-mobile, 14px) * 1.4286); }
  .story-step h3{ font-size: var(--story-title-size-mobile, 20px); line-height: calc(var(--story-title-size-mobile, 20px) * 1.4); }
  .story-step .small{ font-size: var(--story-text-size-mobile, 14px); line-height: calc(var(--story-text-size-mobile, 14px) * 1.5714); }
}

/* ---------- Homepage: Format-kaarten ---------- */
.format-card h3{
  font-size: var(--format-title-size-desktop, 20px);
  line-height: calc(var(--format-title-size-desktop, 20px) * 1.4);
}
.format-card p{
  font-size: var(--format-text-size-desktop, 16px);
  line-height: calc(var(--format-text-size-desktop, 16px) * 1.625);
}
.format-card .btn{
  font-size: var(--format-btn-size-desktop, 14px);
}
@media (max-width: 767px){
  .format-card h3{ font-size: var(--format-title-size-mobile, 20px); line-height: calc(var(--format-title-size-mobile, 20px) * 1.4); }
  .format-card p{ font-size: var(--format-text-size-mobile, 16px); line-height: calc(var(--format-text-size-mobile, 16px) * 1.625); }
  .format-card .btn{ font-size: var(--format-btn-size-mobile, 14px); }
}

/* ---------- Homepage: Wijn-kaarten (Wijnen-sectie) ---------- */
.wine-grid h3{
  font-size: var(--wine-card-name-size-desktop, 20px);
  line-height: calc(var(--wine-card-name-size-desktop, 20px) * 1.4);
}
.wine-grid .taste{
  font-size: var(--wine-card-taste-size-desktop, 14px);
  line-height: calc(var(--wine-card-taste-size-desktop, 14px) * 1.5714);
}
@media (max-width: 767px){
  .wine-grid h3{ font-size: var(--wine-card-name-size-mobile, 20px); line-height: calc(var(--wine-card-name-size-mobile, 20px) * 1.4); }
  .wine-grid .taste{ font-size: var(--wine-card-taste-size-mobile, 14px); line-height: calc(var(--wine-card-taste-size-mobile, 14px) * 1.5714); }
}

/* ---------- Wine detail: typografie ---------- */
.wine-detail-body .eyebrow{
  font-size: var(--wd-eyebrow-size-desktop, 14px);
  line-height: calc(var(--wd-eyebrow-size-desktop, 14px) * 1.4286);
}
.wine-detail-body h1{
  font-size: var(--wd-title-size-desktop, 36px);
  line-height: calc(var(--wd-title-size-desktop, 36px) * 1.2222);
}
.wine-detail-body .producer-line{
  font-size: var(--wd-producer-size-desktop, 12px);
  line-height: calc(var(--wd-producer-size-desktop, 12px) * 1.5);
}
.wine-detail-body .taste{
  font-size: var(--wd-taste-size-desktop, 18px);
  line-height: calc(var(--wd-taste-size-desktop, 18px) * 1.5556);
}
.wine-detail-body h3{
  font-size: var(--wd-heading-size-desktop, 20px);
  line-height: calc(var(--wd-heading-size-desktop, 20px) * 1.4);
}
.wine-detail-body .body-block{
  font-size: var(--wd-body-size-desktop, 16px);
  line-height: calc(var(--wd-body-size-desktop, 16px) * 1.625);
}
.wine-detail-actions .wd-cta{
  font-size: var(--wd-cta-size-desktop, 14px);
}
.wine-detail-actions .link-more{
  font-size: var(--wd-back-size-desktop, 14px);
  /* .link-more heeft elders (onder .about-kadowijn-inner) bewust margin-top voor
     afstand tot de alinea erboven. Hier staat de link naast de CTA-knop in een
     flex-rij met align-items:center; die margin-top duwde de link dan net iets
     uit het midden t.o.v. de knop. Alleen in deze context op 0 gezet, zodat de
     flex-centrering de link precies naast de knop uitlijnt. */
  margin-top: 0;
}
@media (max-width: 767px){
  .wine-detail-body .eyebrow{ font-size: var(--wd-eyebrow-size-mobile, 14px); line-height: calc(var(--wd-eyebrow-size-mobile, 14px) * 1.4286); }
  .wine-detail-body h1{ font-size: var(--wd-title-size-mobile, 36px); line-height: calc(var(--wd-title-size-mobile, 36px) * 1.2222); }
  .wine-detail-body .producer-line{ font-size: var(--wd-producer-size-mobile, 12px); line-height: calc(var(--wd-producer-size-mobile, 12px) * 1.5); }
  .wine-detail-body .taste{ font-size: var(--wd-taste-size-mobile, 18px); line-height: calc(var(--wd-taste-size-mobile, 18px) * 1.5556); }
  .wine-detail-body h3{ font-size: var(--wd-heading-size-mobile, 20px); line-height: calc(var(--wd-heading-size-mobile, 20px) * 1.4); }
  .wine-detail-body .body-block{ font-size: var(--wd-body-size-mobile, 16px); line-height: calc(var(--wd-body-size-mobile, 16px) * 1.625); }
  .wine-detail-actions .wd-cta{ font-size: var(--wd-cta-size-mobile, 14px); }
  .wine-detail-actions .link-more{ font-size: var(--wd-back-size-mobile, 14px); }
}

/* ---------- Wine detail: afbeelding-verhouding (Fase E, balans t.o.v. tekstkolom) ---------- */
@media (min-width: 1024px){
  .wine-detail-grid{
    grid-template-columns: var(--wd-photo-fr, 5fr) var(--wd-text-fr, 7fr);
    max-width: var(--wd-row-max, 1280px);
  }
}
@media (max-width: 1023px){
  .wine-detail-photo{ aspect-ratio: var(--wd-photo-ratio-mobile, 3 / calc(4 * var(--wd-photo-mobile-factor, 1))); }
}

/* ---------- Footer: typografie ---------- */
.site-footer .footer-brand p{
  font-size: var(--footer-brand-size-desktop, 16px);
  line-height: calc(var(--footer-brand-size-desktop, 16px) * 1.5714);
}
.site-footer .footer-col h3{
  font-size: var(--footer-title-size-desktop, 14px);
  line-height: calc(var(--footer-title-size-desktop, 14px) * 1.4286);
}
.site-footer .footer-col a{
  font-size: var(--footer-link-size-desktop, 14px);
  line-height: calc(var(--footer-link-size-desktop, 14px) * 1.4286);
}
.site-footer .footer-bottom{
  font-size: var(--footer-small-size-desktop, 12px);
  line-height: calc(var(--footer-small-size-desktop, 12px) * 1.5);
}
@media (max-width: 767px){
  /* Op klantverzoek: de tagline onder het logo ("Een fles, zorgvuldig gekozen. Met de hand
     ingepakt in Waalwijk.") blijft op pc/tablet gewoon staan, maar verdwijnt op mobiel (telefoon).
     visibility:hidden i.p.v. display:none, zodat de regel zelf onzichtbaar wordt maar de ruimte
     die hij innam (zijn hoogte + margin-top) blijft staan — de kolom erna schuift dus niet omhoog
     en het geheel blijft er netjes uitzien, op klantverzoek. */
  .site-footer .footer-brand p{ font-size: var(--footer-brand-size-mobile, 16px); line-height: calc(var(--footer-brand-size-mobile, 16px) * 1.5714); visibility: hidden; }
  .site-footer .footer-col h3{ font-size: var(--footer-title-size-mobile, 14px); line-height: calc(var(--footer-title-size-mobile, 14px) * 1.4286); }
  .site-footer .footer-col a{ font-size: var(--footer-link-size-mobile, 14px); line-height: calc(var(--footer-link-size-mobile, 14px) * 1.4286); }
  .site-footer .footer-bottom{ font-size: var(--footer-small-size-mobile, 12px); line-height: calc(var(--footer-small-size-mobile, 12px) * 1.5); }
}

/* ---------- Product configurator: typografie ---------- */
.configurator-head h1{
  font-size: var(--cfg-title-size-desktop, 36px);
  line-height: calc(var(--cfg-title-size-desktop, 36px) * 1.2222);
}
.configurator-head .price-from{
  font-size: var(--cfg-subtitle-size-desktop, 14px);
  line-height: calc(var(--cfg-subtitle-size-desktop, 14px) * 1.5714);
}
.step-title h3{
  font-size: var(--cfg-step-heading-size-desktop, 18px);
  line-height: calc(var(--cfg-step-heading-size-desktop, 18px) * 1.5556);
}
.size-option .n{
  font-size: var(--cfg-size-label-size-desktop, 16px);
  line-height: calc(var(--cfg-size-label-size-desktop, 16px) * 1.625);
}
.size-option .p{
  font-size: var(--cfg-size-price-size-desktop, 12px);
  line-height: calc(var(--cfg-size-price-size-desktop, 12px) * 1.5);
}
.wine-row-info .name{
  font-size: var(--cfg-wine-row-name-size-desktop, 16px);
  line-height: calc(var(--cfg-wine-row-name-size-desktop, 16px) * 1.625);
}
.wine-row-info .taste, .wine-choice .taste{
  font-size: var(--cfg-wine-taste-size-desktop, 12px);
  line-height: calc(var(--cfg-wine-taste-size-desktop, 12px) * 1.5);
}
.wine-choice .name{
  font-size: var(--cfg-wine-choice-name-size-desktop, 14px);
  line-height: calc(var(--cfg-wine-choice-name-size-desktop, 14px) * 1.5714);
}
.wine-choice .price{
  font-size: var(--cfg-wine-choice-price-size-desktop, 14px);
  line-height: calc(var(--cfg-wine-choice-price-size-desktop, 14px) * 1.5714);
}
.field label{
  font-size: var(--cfg-field-label-size-desktop, 14px);
  line-height: calc(var(--cfg-field-label-size-desktop, 14px) * 1.4286);
}
.field .hint{
  font-size: var(--cfg-hint-size-desktop, 14px);
  line-height: calc(var(--cfg-hint-size-desktop, 14px) * 1.5714);
}
.card-toggle-row .body-copy{
  font-size: var(--cfg-card-desc-size-desktop, 16px);
  line-height: calc(var(--cfg-card-desc-size-desktop, 16px) * 1.625);
}
.card-price-note{
  font-size: var(--cfg-card-note-size-desktop, 12px);
  line-height: calc(var(--cfg-card-note-size-desktop, 12px) * 1.5);
}
.config-summary > .total{
  font-size: var(--cfg-total-size-desktop, 36px);
  line-height: calc(var(--cfg-total-size-desktop, 36px) * 1.2222);
}
#add-to-cart{
  font-size: var(--cfg-cta-size-desktop, 14px);
}
.select-hint{
  font-size: var(--cfg-validation-size-desktop, 14px);
  line-height: calc(var(--cfg-validation-size-desktop, 14px) * 1.5714);
}
.reassurance span{
  font-size: var(--cfg-trust-badge-size-desktop, 12px);
  line-height: calc(var(--cfg-trust-badge-size-desktop, 12px) * 1.5);
}
#box-content-section h2{
  font-size: var(--cfg-box-title-size-desktop, 28px);
  line-height: calc(var(--cfg-box-title-size-desktop, 28px) * 1.2857);
}
#box-content-section .intro{
  font-size: var(--cfg-box-intro-size-desktop, 18px);
  line-height: calc(var(--cfg-box-intro-size-desktop, 18px) * 1.5556);
}
#box-content-section h3{
  font-size: var(--cfg-box-subheading-size-desktop, 20px);
  line-height: calc(var(--cfg-box-subheading-size-desktop, 20px) * 1.4);
}
#box-content-section .checklist, #box-content-section .body-block{
  font-size: var(--cfg-box-body-size-desktop, 16px);
  line-height: calc(var(--cfg-box-body-size-desktop, 16px) * 1.625);
}
.about-kadowijn-inner h2{
  font-size: var(--cfg-about-heading-size-desktop, 28px);
  line-height: calc(var(--cfg-about-heading-size-desktop, 28px) * 1.2857);
}
.about-kadowijn-inner .body-lg{
  font-size: var(--cfg-about-text-size-desktop, 18px);
  line-height: calc(var(--cfg-about-text-size-desktop, 18px) * 1.5556);
}
.configurator-wine-heading{
  font-size: var(--cfg-wine-carousel-heading-size-desktop, 28px);
  line-height: calc(var(--cfg-wine-carousel-heading-size-desktop, 28px) * 1.2857);
}
@media (max-width: 767px){
  .configurator-head h1{ font-size: var(--cfg-title-size-mobile, 23px); line-height: calc(var(--cfg-title-size-mobile, 23px) * 1.2222); }
  .configurator-head .price-from{ font-size: var(--cfg-subtitle-size-mobile, 14px); line-height: calc(var(--cfg-subtitle-size-mobile, 14px) * 1.5714); }
  .step-title h3{ font-size: var(--cfg-step-heading-size-mobile, 15px); line-height: calc(var(--cfg-step-heading-size-mobile, 15px) * 1.5556); }
  .size-option .n{ font-size: var(--cfg-size-label-size-mobile, 16px); line-height: calc(var(--cfg-size-label-size-mobile, 16px) * 1.625); }
  .size-option .p{ font-size: var(--cfg-size-price-size-mobile, 12px); line-height: calc(var(--cfg-size-price-size-mobile, 12px) * 1.5); }
  .wine-row-info .name{ font-size: var(--cfg-wine-row-name-size-mobile, 16px); line-height: calc(var(--cfg-wine-row-name-size-mobile, 16px) * 1.625); }
  .wine-row-info .taste, .wine-choice .taste{ font-size: var(--cfg-wine-taste-size-mobile, 12px); line-height: calc(var(--cfg-wine-taste-size-mobile, 12px) * 1.5); }
  .wine-choice .name{ font-size: var(--cfg-wine-choice-name-size-mobile, 14px); line-height: calc(var(--cfg-wine-choice-name-size-mobile, 14px) * 1.5714); }
  .wine-choice .price{ font-size: var(--cfg-wine-choice-price-size-mobile, 14px); line-height: calc(var(--cfg-wine-choice-price-size-mobile, 14px) * 1.5714); }
  .field label{ font-size: var(--cfg-field-label-size-mobile, 14px); line-height: calc(var(--cfg-field-label-size-mobile, 14px) * 1.4286); }
  .field .hint{ font-size: var(--cfg-hint-size-mobile, 14px); line-height: calc(var(--cfg-hint-size-mobile, 14px) * 1.5714); }
  .card-toggle-row .body-copy{ font-size: var(--cfg-card-desc-size-mobile, 16px); line-height: calc(var(--cfg-card-desc-size-mobile, 16px) * 1.625); }
  .card-price-note{ font-size: var(--cfg-card-note-size-mobile, 12px); line-height: calc(var(--cfg-card-note-size-mobile, 12px) * 1.5); }
  .config-summary > .total{ font-size: var(--cfg-total-size-mobile, 36px); line-height: calc(var(--cfg-total-size-mobile, 36px) * 1.2222); }
  #add-to-cart{ font-size: var(--cfg-cta-size-mobile, 14px); }
  .select-hint{ font-size: var(--cfg-validation-size-mobile, 14px); line-height: calc(var(--cfg-validation-size-mobile, 14px) * 1.5714); }
  .reassurance span{ font-size: var(--cfg-trust-badge-size-mobile, 12px); line-height: calc(var(--cfg-trust-badge-size-mobile, 12px) * 1.5); }
  #box-content-section h2{ font-size: var(--cfg-box-title-size-mobile, 28px); line-height: calc(var(--cfg-box-title-size-mobile, 28px) * 1.2857); }
  #box-content-section .intro{ font-size: var(--cfg-box-intro-size-mobile, 18px); line-height: calc(var(--cfg-box-intro-size-mobile, 18px) * 1.5556); }
  #box-content-section h3{ font-size: var(--cfg-box-subheading-size-mobile, 20px); line-height: calc(var(--cfg-box-subheading-size-mobile, 20px) * 1.4); }
  #box-content-section .checklist, #box-content-section .body-block{ font-size: var(--cfg-box-body-size-mobile, 16px); line-height: calc(var(--cfg-box-body-size-mobile, 16px) * 1.625); }
  .about-kadowijn-inner h2{ font-size: var(--cfg-about-heading-size-mobile, 28px); line-height: calc(var(--cfg-about-heading-size-mobile, 28px) * 1.2857); }
  .about-kadowijn-inner .body-lg{ font-size: var(--cfg-about-text-size-mobile, 18px); line-height: calc(var(--cfg-about-text-size-mobile, 18px) * 1.5556); }
  .configurator-wine-heading{ font-size: var(--cfg-wine-carousel-heading-size-mobile, 28px); line-height: calc(var(--cfg-wine-carousel-heading-size-mobile, 28px) * 1.2857); }
}

/* ---------- Collectie: Wijncadeaus-overzicht (boxen) ---------- */
#collection-boxes-main .section-head .eyebrow{
  font-size: var(--cb-eyebrow-size-desktop, 14px);
  line-height: calc(var(--cb-eyebrow-size-desktop, 14px) * 1.4286);
}
#collection-boxes-main .section-head h2{
  font-size: var(--cb-heading-size-desktop, 28px);
  line-height: calc(var(--cb-heading-size-desktop, 28px) * 1.2857);
}
#collection-boxes-main .section-head p{
  font-size: var(--cb-intro-size-desktop, 16px);
  line-height: calc(var(--cb-intro-size-desktop, 16px) * 1.625);
}
#collection-boxes-main .format-card h3{
  font-size: var(--cb-card-title-size-desktop, 20px);
  line-height: calc(var(--cb-card-title-size-desktop, 20px) * 1.4);
}
#collection-boxes-main .format-card p{
  font-size: var(--cb-card-price-size-desktop, 16px);
  line-height: calc(var(--cb-card-price-size-desktop, 16px) * 1.625);
}
#collection-boxes-main .format-card .btn{
  font-size: var(--cb-button-size-desktop, 14px);
}
@media (max-width: 767px){
  #collection-boxes-main .section-head .eyebrow{ font-size: var(--cb-eyebrow-size-mobile, 14px); line-height: calc(var(--cb-eyebrow-size-mobile, 14px) * 1.4286); }
  #collection-boxes-main .section-head h2{ font-size: var(--cb-heading-size-mobile, 28px); line-height: calc(var(--cb-heading-size-mobile, 28px) * 1.2857); }
  #collection-boxes-main .section-head p{ font-size: var(--cb-intro-size-mobile, 16px); line-height: calc(var(--cb-intro-size-mobile, 16px) * 1.625); }
  #collection-boxes-main .format-card h3{ font-size: var(--cb-card-title-size-mobile, 20px); line-height: calc(var(--cb-card-title-size-mobile, 20px) * 1.4); }
  #collection-boxes-main .format-card p{ font-size: var(--cb-card-price-size-mobile, 16px); line-height: calc(var(--cb-card-price-size-mobile, 16px) * 1.625); }
  #collection-boxes-main .format-card .btn{ font-size: var(--cb-button-size-mobile, 14px); }
}

/* ---------- Collectie: Wijnen-overzicht ---------- */
#collection-wijnen-main .section-head .eyebrow{
  font-size: var(--cw-eyebrow-size-desktop, 14px);
  line-height: calc(var(--cw-eyebrow-size-desktop, 14px) * 1.4286);
}
#collection-wijnen-main .section-head h2{
  font-size: var(--cw-heading-size-desktop, 28px);
  line-height: calc(var(--cw-heading-size-desktop, 28px) * 1.2857);
}
#collection-wijnen-main .section-head p{
  font-size: var(--cw-intro-size-desktop, 16px);
  line-height: calc(var(--cw-intro-size-desktop, 16px) * 1.625);
}
#collection-wijnen-main .wine-grid h3{
  font-size: var(--cw-name-size-desktop, 20px);
  line-height: calc(var(--cw-name-size-desktop, 20px) * 1.4);
}
#collection-wijnen-main .wine-grid .taste{
  font-size: var(--cw-taste-size-desktop, 14px);
  line-height: calc(var(--cw-taste-size-desktop, 14px) * 1.5714);
}
@media (max-width: 767px){
  #collection-wijnen-main .section-head .eyebrow{ font-size: var(--cw-eyebrow-size-mobile, 14px); line-height: calc(var(--cw-eyebrow-size-mobile, 14px) * 1.4286); }
  #collection-wijnen-main .section-head h2{ font-size: var(--cw-heading-size-mobile, 28px); line-height: calc(var(--cw-heading-size-mobile, 28px) * 1.2857); }
  #collection-wijnen-main .section-head p{ font-size: var(--cw-intro-size-mobile, 16px); line-height: calc(var(--cw-intro-size-mobile, 16px) * 1.625); }
  #collection-wijnen-main .wine-grid h3{ font-size: var(--cw-name-size-mobile, 20px); line-height: calc(var(--cw-name-size-mobile, 20px) * 1.4); }
  #collection-wijnen-main .wine-grid .taste{ font-size: var(--cw-taste-size-mobile, 14px); line-height: calc(var(--cw-taste-size-mobile, 14px) * 1.5714); }
}

/* ---------- Servicepagina's (Verzending/Retour/Contact): typografie ---------- */
.tp-main .eyebrow{
  font-size: var(--tp-eyebrow-size-desktop, 14px);
  line-height: calc(var(--tp-eyebrow-size-desktop, 14px) * 1.4286);
}
.tp-main h1{
  font-size: var(--tp-title-size-desktop, 36px);
  line-height: calc(var(--tp-title-size-desktop, 36px) * 1.2222);
}
.tp-main .body-block{
  font-size: var(--tp-body-size-desktop, 16px);
  line-height: calc(var(--tp-body-size-desktop, 16px) * 1.625);
}
@media (max-width: 767px){
  .tp-main .eyebrow{ font-size: var(--tp-eyebrow-size-mobile, 14px); line-height: calc(var(--tp-eyebrow-size-mobile, 14px) * 1.4286); }
  .tp-main h1{ font-size: var(--tp-title-size-mobile, 36px); line-height: calc(var(--tp-title-size-mobile, 36px) * 1.2222); }
  .tp-main .body-block{ font-size: var(--tp-body-size-mobile, 16px); line-height: calc(var(--tp-body-size-mobile, 16px) * 1.625); }
}

/* ---------- Over ons: typografie ---------- */
.ao-main .eyebrow{
  font-size: var(--ao-eyebrow-size-desktop, 14px);
  line-height: calc(var(--ao-eyebrow-size-desktop, 14px) * 1.4286);
}
.ao-main h1{
  font-size: var(--ao-title-size-desktop, 36px);
  line-height: calc(var(--ao-title-size-desktop, 36px) * 1.2222);
}
.ao-main .intro{
  font-size: var(--ao-intro-size-desktop, 18px);
  line-height: calc(var(--ao-intro-size-desktop, 18px) * 1.5556);
}
.ao-main .body-block{
  font-size: var(--ao-body-size-desktop, 16px);
  line-height: calc(var(--ao-body-size-desktop, 16px) * 1.625);
}
@media (max-width: 767px){
  .ao-main .eyebrow{ font-size: var(--ao-eyebrow-size-mobile, 14px); line-height: calc(var(--ao-eyebrow-size-mobile, 14px) * 1.4286); }
  .ao-main h1{ font-size: var(--ao-title-size-mobile, 36px); line-height: calc(var(--ao-title-size-mobile, 36px) * 1.2222); }
  .ao-main .intro{ font-size: var(--ao-intro-size-mobile, 18px); line-height: calc(var(--ao-intro-size-mobile, 18px) * 1.5556); }
  .ao-main .body-block{ font-size: var(--ao-body-size-mobile, 16px); line-height: calc(var(--ao-body-size-mobile, 16px) * 1.625); }
}

/* ---------- FAQ: typografie ---------- */
.faq-main .eyebrow{
  font-size: var(--faq-eyebrow-size-desktop, 14px);
  line-height: calc(var(--faq-eyebrow-size-desktop, 14px) * 1.4286);
}
.faq-main h1{
  font-size: var(--faq-title-size-desktop, 36px);
  line-height: calc(var(--faq-title-size-desktop, 36px) * 1.2222);
}
.faq-main .faq-category-title{
  font-size: var(--faq-category-size-desktop, 20px);
  line-height: calc(var(--faq-category-size-desktop, 20px) * 1.4);
}
.faq-main .faq-q{
  font-size: var(--faq-question-size-desktop, 16px);
  line-height: calc(var(--faq-question-size-desktop, 16px) * 1.625);
}
.faq-main .faq-a{
  font-size: var(--faq-answer-size-desktop, 16px);
  line-height: calc(var(--faq-answer-size-desktop, 16px) * 1.625);
}
@media (max-width: 767px){
  .faq-main .eyebrow{ font-size: var(--faq-eyebrow-size-mobile, 14px); line-height: calc(var(--faq-eyebrow-size-mobile, 14px) * 1.4286); }
  .faq-main h1{ font-size: var(--faq-title-size-mobile, 36px); line-height: calc(var(--faq-title-size-mobile, 36px) * 1.2222); }
  .faq-main .faq-category-title{ font-size: var(--faq-category-size-mobile, 20px); line-height: calc(var(--faq-category-size-mobile, 20px) * 1.4); }
  .faq-main .faq-q{ font-size: var(--faq-question-size-mobile, 16px); line-height: calc(var(--faq-question-size-mobile, 16px) * 1.625); }
  .faq-main .faq-a{ font-size: var(--faq-answer-size-mobile, 16px); line-height: calc(var(--faq-answer-size-mobile, 16px) * 1.625); }
}

/* ---------- Winkelwagen-drawer: typografie ---------- */
.cart-drawer .cart-head h3{
  font-size: var(--cart-title-size-desktop, 20px);
  line-height: calc(var(--cart-title-size-desktop, 20px) * 1.4);
}
.cart-drawer .cart-item-info .title{
  font-size: var(--cart-item-name-size-desktop, 14px);
  line-height: calc(var(--cart-item-name-size-desktop, 14px) * 1.5714);
}
.cart-drawer .cart-item-info .meta{
  font-size: var(--cart-item-meta-size-desktop, 12px);
  line-height: calc(var(--cart-item-meta-size-desktop, 12px) * 1.5);
}
.cart-drawer .cart-item-info .price{
  font-size: var(--cart-item-price-size-desktop, 16px);
  line-height: calc(var(--cart-item-price-size-desktop, 16px) * 1.625);
}
.cart-drawer .cart-empty{
  font-size: var(--cart-empty-size-desktop, 16px);
  line-height: calc(var(--cart-empty-size-desktop, 16px) * 1.625);
}
.cart-drawer .total-label{
  font-size: var(--cart-total-label-size-desktop, 16px);
  line-height: calc(var(--cart-total-label-size-desktop, 16px) * 1.625);
}
.cart-drawer .price-row .total{
  font-size: var(--cart-total-amount-size-desktop, 28px);
  line-height: calc(var(--cart-total-amount-size-desktop, 28px) * 1.2857);
}
#cart-checkout{
  font-size: var(--cart-cta-size-desktop, 14px);
}
@media (max-width: 767px){
  .cart-drawer .cart-head h3{ font-size: var(--cart-title-size-mobile, 20px); line-height: calc(var(--cart-title-size-mobile, 20px) * 1.4); }
  .cart-drawer .cart-item-info .title{ font-size: var(--cart-item-name-size-mobile, 14px); line-height: calc(var(--cart-item-name-size-mobile, 14px) * 1.5714); }
  .cart-drawer .cart-item-info .meta{ font-size: var(--cart-item-meta-size-mobile, 12px); line-height: calc(var(--cart-item-meta-size-mobile, 12px) * 1.5); }
  .cart-drawer .cart-item-info .price{ font-size: var(--cart-item-price-size-mobile, 16px); line-height: calc(var(--cart-item-price-size-mobile, 16px) * 1.625); }
  .cart-drawer .cart-empty{ font-size: var(--cart-empty-size-mobile, 16px); line-height: calc(var(--cart-empty-size-mobile, 16px) * 1.625); }
  .cart-drawer .total-label{ font-size: var(--cart-total-label-size-mobile, 16px); line-height: calc(var(--cart-total-label-size-mobile, 16px) * 1.625); }
  .cart-drawer .price-row .total{ font-size: var(--cart-total-amount-size-mobile, 28px); line-height: calc(var(--cart-total-amount-size-mobile, 28px) * 1.2857); }
  #cart-checkout{ font-size: var(--cart-cta-size-mobile, 14px); }
}

/* ---------- Homepage: Gelegenheden-tegels met optionele afbeelding (Fase B, herzien) ----------
   Puur additief: zonder afbeelding (de huidige/standaard situatie) verandert er niets aan
   het bestaande tekst-op-lichte-achtergrond uiterlijk van .occasion-tile. position:relative/
   overflow:hidden op .occasion-tile hebben geen zichtbaar effect zolang er geen kind met
   position:absolute in zit.
   Herzien n.a.v. klantfeedback: zodra een blok een eigen afbeelding heeft, IS die afbeelding
   de hele tegel — geen titel/ondertekst/icoon meer eroverheen (de klant gebruikt hier zelf
   al kant-en-klare visuals met eigen tekst erin). object-fit:contain i.p.v. cover, zodat de
   afbeelding nooit bijgesneden wordt.
   Nogmaals herzien n.a.v. klantfeedback: een tegel MET foto kreeg hier eerder standaard een
   eigen, vast vierkant formaat (losgekoppeld van de rijhoogte van het rooster), waardoor hij
   plotseling een ander formaat had dan de lege tegels ernaast en zelfs over de rij eronder
   heen kon vallen. Dat forceren van een eigen vorm gebeurt nu alleen nog als er EXPLICIET voor
   "Vierkant", "Liggend" of "Staand" gekozen wordt bij "Vorm van de tegel" (.ratio-square/
   -landscape/-portrait hieronder). Bij de standaardinstelling "Automatisch" (geen van die
   klassen) blijft een tegel met foto gewoon exact hetzelfde formaat/vorm aanhouden als een
   lege tegel — bepaald door het rooster, niet door de tegel zelf — en de foto past daar dan
   gewoon in (nog steeds zonder bijsnijden, dankzij object-fit:contain hierboven).
   .occasion-tile-content/-icon/-text hieronder in dit bestand (eerder voor de tekst-overlay)
   worden niet meer gerenderd en zijn dus inactief, bewust ongemoeid gelaten. */
.occasion-tile{ position: relative; overflow: hidden; }
.occasion-tile-media{ position: absolute; inset: 0; z-index: 0; }
.occasion-tile-media img{ width: 100%; height: 100%; object-fit: contain; object-position: var(--occ-img-pos, center); }
.occasion-tile.has-media{ display: block; padding: 0; min-height: 0; }
.occasion-tile.has-media .occasion-tile-media{
  position: relative; display: block; width: 100%; overflow: hidden;
  aspect-ratio: var(--occ-img-ratio, auto);
}
.occasion-tile.has-media .occasion-tile-media img{ position: absolute; inset: 0; }
.occasion-tile.has-media.ratio-square .occasion-tile-media{ aspect-ratio: 1 / 1; }
.occasion-tile.has-media.ratio-landscape .occasion-tile-media{ aspect-ratio: 4 / 3; }
.occasion-tile.has-media.ratio-portrait .occasion-tile-media{ aspect-ratio: 3 / 4; }
.occasion-tile-content{ position: relative; z-index: 1; color: var(--room); }
.occasion-tile-icon{ position: relative; z-index: 1; width: 22px; height: 22px; flex: none; margin-right: var(--sp-2); }
.occasion-tile-icon img{ width: 100%; height: 100%; object-fit: contain; }
.occasion-tile-text{
  display: block; margin-top: 2px;
  font-family: var(--font-body); font-weight: 400; letter-spacing: normal;
  font-size: var(--small-size); line-height: var(--small-lh); opacity: .85;
}
/* Tegelvorm bij afbeelding: nogmaals herzien n.a.v. klantfeedback ("als ik een foto erin zet,
   moet die echt de grootte van de foto aanhouden" — foto's zijn hier typisch 1600×1200/4:3).
   "Automatisch" (geen ratio-klasse, de standaardinstelling) laat de tegel nu zelf de
   beeldverhouding van de gekozen foto aanhouden, via --occ-img-ratio (hierboven al gebruikt
   voor --occ-img-pos; hier gezet vanuit Shopify's eigen image.aspect_ratio in de liquid).

   BELANGRIJKE CORRECTIE t.o.v. een eerdere, kortstondige versie van deze regel: de
   beeldverhouding stond eerst rechtstreeks op de tegel (.occasion-tile.has-media) zelf, samen
   met align-self:start en min-height:0 — in de praktijk (getest via de storefront-preview met
   twee verschillend gevormde foto's naast elkaar) bleek dat CSS Grid de hoogte van de rasterrij
   dan NIET liet meegroeien met zo'n hogere tegel: de rij bleef net zo hoog als de kortere buren,
   en de foto-tegel liep er zichtbaar overheen, de volgende rij in — exact hetzelfde "vierkant"-
   euvel als eerder in dit traject, nu gewoon met de eigen fotoverhouding in plaats van een vast
   vierkant. Vandaar nu een andere, betrouwbaardere opzet: de tegel zelf (.occasion-tile.has-
   media, hierboven) is weer een heel gewoon blok-element zonder eigen aspect-ratio of
   align-self-truc; de beeldverhouding staat op het BINNENSTE .occasion-tile-media-element
   (hierboven), als heel normale, aan-de-inhoud-gebonden CSS (aspect-ratio + width:100% op een
   gewoon kind-element). Daardoor bepaalt de intrinsieke hoogte van die ene foto, via het normale
   CSS-doosmodel, gewoon de hoogte van de hele tegel/rij — en dat telt CSS Grid bij het bepalen
   van de rijhoogte wél correct mee, dus geen overlap meer.
   Bijeffect: staan er twee foto's met een heel verschillende verhouding naast elkaar in
   dezelfde rij, dan deelt die rij één gezamenlijke hoogte (bepaald door de hoogste foto) — de
   kortere foto krijgt dan een klein beetje lucht eromheen (nog steeds zonder bijsnijden, dankzij
   object-fit:contain hierboven) in plaats van zelf nog hoger te worden. Bij de meest gangbare
   situatie — één foto in een rij met verder lege tegels (148px) — valt dit in de praktijk nauwelijks
   op: bij deze foto's eigen 4:3-verhouding (1600×1200) komt de berekende hoogte al heel dicht bij
   die 148px uit.
   Vierkant/Liggend/Staand blijven een EXPLICIETE override, nu ook toegepast op het binnenste
   .occasion-tile-media-element (zie hierboven) i.p.v. op de tegel zelf, om dezelfde reden. */

/* ---------- Wijndetailpagina: knop + terug-link naast elkaar i.p.v. onder elkaar (mobiel) ----------
   Klantfeedback (screenshot): op mobiel viel de knop "Stel je Kadowijn samen" en de link
   "← Terug naar alle wijnen" onder elkaar i.p.v. naast elkaar zoals op desktop, en dan ook niet
   gecentreerd maar links uitgelijnd. Gemeten op de live pagina (telefoon van 375px breed): de
   knop (met zijn standaard binnenruimte/tekstgrootte) en de link samen hebben zo'n 400px nodig,
   terwijl er in de tekstkolom maar zo'n 327px beschikbaar is (375px - 2×24px containerpadding) —
   vandaar dat ze altijd naar de volgende regel vielen.
   Oplossing, alleen op mobiel (<768px, dezelfde breakpoint als de bestaande tekstgrootte-
   instellingen elders in dit bestand bij ".wine-detail-actions .wd-cta/.link-more"): de knop en de link
   worden iets kleiner — 12px, dezelfde "micro"-tekstgrootte die elders op de site al gebruikt
   wordt (zie --micro-size bovenaan dit bestand) — en de knop krijgt minder binnenruimte en
   hoogte, met een kleinere tussenruimte. Samen komt dat op zo'n 300px, wat ook op iets smallere
   telefoons (vanaf circa 360px breed) nog naast elkaar past. justify-content:center zorgt dat
   het duo, net als op desktop, gecentreerd blijft staan i.p.v. links uitgelijnd.
   Deze regel staat bewust NA de tekstgrootte-instellingen uit de Theme Editor eerder in dit
   bestand (".wine-detail-actions .wd-cta"/".link-more", bij dezelfde @media-breedte), zodat hij
   die op mobiel overschrijft; op desktop blijven die Theme Editor-instellingen gewoon gelden. */
@media (max-width: 767px){
  .wine-detail-actions{ justify-content: center; gap: 6px; }
  .wine-detail-actions .wd-cta{ height: 40px; padding-inline: 8px; font-size: 12px; }
  .wine-detail-actions .link-more{ font-size: 12px; }
}

/* ---------- Vertrouwensbalk (sections/kadowijn-trust-strip.liquid) ----------
   Klantverzoek: een sectie met korte, geruststellende kolommen (bezorging,
   klantenservice, verzendgebied), geplaatst op de homepage en op de
   productpagina ("Stel je Kadowijn samen"), met alle tekst aanpasbaar via de
   Theme Editor. Zelfde ontwerptaal als de rest van de site (room-achtergrond,
   Nunito-koppen, merkbruin voor links), geen nieuwe stijl of Dawn-look.
   auto-fit laat het aantal kolommen vanzelf meegroeien met het aantal
   toegevoegde blokken, zodat de merchant een kolom kan toevoegen of
   verwijderen zonder dat de layout breekt. */
.trust-strip{ background: var(--room); border-top: 1px solid rgb(var(--color-border)); border-bottom: 1px solid rgb(var(--color-border)); padding-block: var(--sp-7); }
.trust-strip-grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-6); text-align: center; }
.trust-strip-item{ display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.trust-strip-eyebrow{
  display: block; font-family: var(--font-heading); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: rgb(var(--color-link)); font-size: var(--trust-eyebrow-size-desktop, 13px);
}
.trust-strip-heading{
  font-family: var(--font-heading); font-weight: 600; line-height: 1.3; margin: 0;
  color: rgb(var(--color-foreground)); font-size: var(--trust-heading-size-desktop, 24px);
}
.trust-strip-text{ color: rgb(var(--color-text-secondary)); line-height: 1.6; font-size: var(--trust-text-size-desktop, 16px); }
.trust-strip-text p{ margin: 0; }
.trust-strip-text p + p{ margin-top: var(--sp-1); }
.trust-strip-text a{ color: rgb(var(--color-link)); text-decoration: none; }
.trust-strip-text a:hover{ color: var(--noten-donker); }
@media (max-width: 767px){
  .trust-strip{ padding-block: var(--sp-6); }
  .trust-strip-grid{ grid-template-columns: 1fr; gap: var(--sp-5); }
  .trust-strip-eyebrow{ font-size: var(--trust-eyebrow-size-mobile, 13px); }
  .trust-strip-heading{ font-size: var(--trust-heading-size-mobile, 22px); }
  .trust-strip-text{ font-size: var(--trust-text-size-mobile, 16px); }
}

/* ---------- Alinea-afstand in vrije tekst (FAQ-antwoorden, servicepagina's, native
   beleidspagina's zoals Privacybeleid/Retourbeleid/Contactgegevens) ----------
   Klantfeedback: op de nieuwe beleidspagina's (Instellingen > Beleid) stonden de alinea's
   zonder ruimte ertussen, in tegenstelling tot de eigen servicepagina's (Zakelijke
   geschenken, FAQ, enz.), waar elke alinea een los, van ruimte voorzien blok is
   (.body-block + .body-block, elders in dit bestand). Oorzaak: de algemene reset bovenaan
   dit bestand ("h1,h2,h3,p{ margin: 0; }") haalt de standaard bovenruimte van <p> weg (nodig
   voor losse koppen/labels elders op de site), maar liet daardoor ook opeenvolgende <p>'s
   BINNEN één stuk vrije tekst (zoals de inhoud van een native Shopify-beleid, die als één
   blok HTML met meerdere <p>'s wordt aangeleverd) zonder ruimte ertussen staan. Deze regel
   herstelt dat, specifiek voor de tekstvelden waar vrije tekst met meerdere alinea's kan
   voorkomen: .body-copy (servicepagina's), .faq-a (FAQ-antwoorden) en .policy-body (native
   beleidspagina's, zie sections/kadowijn-policy-page.liquid). */
.body-copy p + p,
.faq-a p + p,
.policy-body p + p{
  margin-top: var(--sp-4);
}

/* ---------- Native beleidspagina's (sections/kadowijn-policy-page.liquid) ----------
   Shopify's eigen beleidspagina's (Privacybeleid, Retour- en terugbetalingsbeleid,
   Servicevoorwaarden, Verzendbeleid, Contactgegevens) gebruikten zonder eigen template
   de kale "main-page"-sectie van het basisthema, met maar 28px ruimte boven/onder de tekst
   (padding_top/padding_bottom), in plaats van de 64px (--sp-8) die de rest van de site's
   tekstpagina's via .section krijgt — vandaar dat header en footer daar tegen de tekst aan
   leken te staan. templates/policy.json gebruikt nu dezelfde opzet als de servicepagina's
   (.section, .text-page-inner), zodat alle beleidspagina's dezelfde lucht boven/onder de
   tekst krijgen. .policy-body hergebruikt bewust de bestaande .body-copy-stijl (max-width
   70ch, elders in dit bestand) voor een consistente leesbreedte. */
.policy-body{ margin-top: var(--sp-4); }

/* ---------- Shopify's natieve beleidspagina's op /policies/... (NIET via
   sections/kadowijn-policy-page.liquid) ----------
   Klantfeedback (okt. 2026): op de beleidspagina's zelf (Privacybeleid, Algemene voorwaarden,
   Retour- en terugbetalingsbeleid, Verzendbeleid, Contactgegevens) stond, ondanks de
   .policy-body-regels hierboven, nog steeds geen enkele ruimte: niet tussen header en titel,
   niet tussen titel en tekst, niet tussen tekst en footer, en niet tussen de alinea's
   onderling. Onderzocht via de storefront-preview (rechtstreeks DOM-onderzoek, niet via de
   Theme Editor): deze URL's (/policies/...) worden door Shopify NIET via
   templates/policy.liquid/sections/kadowijn-policy-page.liquid gerenderd — dat bestand bestaat
   wel, maar wordt op deze specifieke route genegeerd. In plaats daarvan gebruikt Shopify zijn
   eigen, vaste wrapper met de klassen .shopify-policy__container/__title/__body en .rte (de
   standaard Dawn-klasse voor rich text). Deze pagina laadt dit stylesheet nog wel gewoon (via
   de header/footer), dus de algemene reset bovenaan dit bestand ("h1,h2,h3,p{ margin: 0; }")
   haalt ook hier, net als bij .policy-body hierboven, alle ruimte weg die Dawn's eigen .rte-
   stijl normaal zou geven. Onderstaande regels herstellen dat specifiek voor deze natieve
   beleidspagina's, met dezelfde maten als de rest van de site (zie .section/.text-page-inner
   hierboven). */
.shopify-policy__container{ padding-block: var(--sp-8); }
.shopify-policy__title{ margin-bottom: var(--sp-4); }
.shopify-policy__body .rte p + p{ margin-top: var(--sp-4); }
@media (max-width: 1023px){
  .shopify-policy__container{ padding-block: var(--sp-7); }
}

/* ---------- Productpagina (configurator): "Dit krijg je"-sectie als twee rijen tekst+foto ----------
   Klantverzoek (met schetsje): de sectie is opgesplitst in twee rijen die elkaar spiegelen —
   rij 1: tekst links, foto-vakje rechts. Rij 2: foto-vakje links, tekst rechts (de knip ligt bij
   "De tekst op de box"). De volgorde links/rechts komt gewoon uit de volgorde van de twee divs in
   de Liquid-markup (sections/kadowijn-product-configurator.liquid), hier niet met order/flex-
   direction omgedraaid.

   Herzien n.a.v. klantfeedback (screenshots, 1e ronde): de eerste versie gebruikte een flexrij met
   align-items:stretch + aspect-ratio:1/1 + width:auto op het foto-vakje, wat een oncontroleerbare
   kringverwijzing gaf (breedte van het vakje hing af van de rijhoogte, die op zijn beurt weer
   afhing van de breedte van de tekstkolom ernaast) en zo een veel te groot, wegschietend vierkant
   opleverde. Vervangen door CSS Grid met twee VASTE kolommen (1fr 1fr) + align-items:stretch,
   zodat de kolombreedtes vooraf vastliggen en het vakje niet meer in breedte kan wegschieten.

   Herzien n.a.v. klantfeedback (screenshots, 2e ronde): ondanks die Grid-opzet bleek de 2e foto
   op desktop alsnog duidelijk hoger dan de tekst ernaast, bijvoorbeeld bij een staande
   (portret)productfoto. Oorzaak: align-items:stretch bepaalt pas de UITEINDELIJKE hoogte van elk
   grid-item, maar de hoogte van de rij zelf wordt eerst berekend uit de eigen, ongestretchte
   inhoudshoogte van alle items in die rij — en een <img> met height:100% zonder een vaste hoogte
   op zijn ouder valt terug op zijn eigen beeldverhouding om zijn hoogte te bepalen. Een hoge,
   smalle foto kon zo zelf een flinke hoogte "inbrengen" in de rijberekening, waardoor de hele rij
   (inclusief de tekstkolom) net zo hoog werd als die foto, in plaats van andersom. Oplossing: de
   foto uit de normale documentstroom halen (position:absolute + inset:0, binnen een
   position:relative-vakje zonder andere inhoud), zodat het foto-vakje zelf NOOIT meer een eigen
   inhoudshoogte inbrengt in de rijberekening. De rijhoogte komt nu uitsluitend uit de tekstkolom,
   en het foto-vakje wordt daarna via align-items:stretch precies zo hoog gemaakt als die tekst —
   ongeacht de eigen verhouding van de gekozen foto (staand, liggend, of geen foto). object-fit:cover
   zorgt dat de foto die hoogte netjes vult zonder vervorming.

   Herzien n.a.v. klantfeedback (2e ronde, mobiel): tekst en foto hebben even geprobeerd naast
   elkaar gestaan op mobiel, net als op desktop ("zelfde op pc alleen dan kleiner"). In de praktijk
   (screenshot) oogde dat op een telefoon niet goed: de titel moest in een smalle halve kolom
   passen en brak lelijk af ("Geschenkbox met" / "twee flessen"), en de foto werd door
   align-items:stretch net zo hoog als die tekstkolom getrokken — dus een smalle, hoge rechthoek
   i.p.v. een nette foto.
   Nieuw, op uitdrukkelijk verzoek van de klant ("de foto moet echt een vierkantje zijn... tekst
   daaronder een vierkante foto dan laatste tekst en dan weer een vierkante foto"): op mobiel staan
   tekst en foto weer onder elkaar (grid-template-columns:1fr), en wordt de VOLGORDE met de
   CSS-eigenschap "order" vast op tekst-dan-foto gezet voor beide rijen — ongeacht de volgorde van
   de twee divs in de broncode (die op desktop bewust gespiegeld is, zie hierboven: rij 2 heeft de
   foto-div eerst, de tekst-div daarna). Zonder deze order-regels zou rij 2 op mobiel dus
   "foto, foto, tekst" opleveren (de foto's van rij 1 en rij 2 na elkaar); met deze regels wordt het
   consequent tekst/foto/tekst/foto, zoals gevraagd. Het foto-vakje krijgt op mobiel weer een eigen
   vaste aspect-ratio van 1/1 (een echt vierkant) met een beperkte, gecentreerde breedte, los van de
   hoogte van de tekst ernaast — de positie:absolute-foto (zie hierboven, voor de desktop-fix)
   werkt hier gewoon binnen mee en vult dat vierkant netjes met object-fit:cover.
   Vierde ronde klantfeedback: foto op mobiel moest iets groter, van clamp(130px, 40vw, 200px)
   naar clamp(165px, 52vw, 240px). */
.box-content-grid{ display: flex; flex-direction: column; gap: var(--sp-8); }
.box-content-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-8);
  align-items: stretch;
}
.box-content-row .box-content-text{ min-width: 0; }
/* Vijfde ronde klantfeedback: foto 1 ("Wat je krijgt") stond vierkant, foto 2 ("De tekst op de
   box") niet. Oorzaak: door "align-items: stretch" op .box-content-row kreeg de foto de hoogte
   van de tekst-kolom ernaast, en die hoogte verschilt per rij — nooit gegarandeerd vierkant.
   Met een eigen "aspect-ratio: 1/1" op het foto-vakje zelf is elke foto nu altijd een vierkant,
   ongeacht hoe lang de tekst ernaast is; "align-self: center" voorkomt dat het vakje door de
   rij nog verticaal uitgerekt wordt. */
.box-content-row .box-content-photo{
  min-width: 0;
  position: relative;
  aspect-ratio: 1/1;
  align-self: center;
  border-radius: var(--radius-card); overflow: hidden; background: var(--travertijn);
}
.box-content-photo img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1023px){
  .box-content-grid{ gap: var(--sp-7); }
  .box-content-row{ gap: var(--sp-6); }
}
@media (max-width: 767px){
  .box-content-grid{ gap: var(--sp-6); }
  .box-content-row{
    grid-template-columns: 1fr;
    gap: var(--sp-4);
  }
  .box-content-row .box-content-text{ order: 1; }
  /* Klantfeedback: op mobiel stond de foto smaller dan de tekst erboven/onder (een beperkte,
     gecentreerde breedte via clamp(...)), terwijl de tekst de volle breedte gebruikt. Nu krijgt
     de foto dezelfde volle breedte als de tekst ("width: 100%"); hij wordt daardoor iets groter,
     maar blijft door "aspect-ratio: 1/1" wel netjes vierkant. */
  .box-content-row .box-content-photo{
    order: 2;
    aspect-ratio: 1/1;
    width: 100%;
  }
}

/* ---------- "Dit krijg je"-sectie: regelafstand tussen eyebrow/titel/tekst/koppen/checklist ----------
   Klantfeedback: alle tekst in deze sectie stond strak op elkaar, zonder enige ruimte tussen de
   eyebrow, de titel, de inleidende alinea, de tussenkopjes ("Wat je krijgt", "De tekst op de
   box", "Het handgeschreven kaartje", "Verzending"), de checklist-items en de losse alinea's
   eronder. Oorzaak: deze sectie gebruikt bewust GEEN .text-page-inner-wrapper (die klasse heeft
   een vaste max-breedte van 720px, onbruikbaar voor deze tweekoloms-indeling) — maar daardoor
   golden de bestaande regelafstand-regels van de servicepagina's (.text-page-inner .eyebrow/h1/
   .intro/h3/.checklist/.body-block, elders in dit bestand) hier niet, en bleef alleen de kale
   reset "h1,h2,h3,p{ margin:0 }" + "ul{ margin:0; padding:0; list-style:none }" bovenaan dit
   bestand over. Onderstaande regels herstellen dezelfde regelafstand als op de servicepagina's,
   nu gescopet tot .box-content-text zodat de rest van de site ongemoeid blijft.
   Zesde ronde klantfeedback: (1) de titel en de vier tussenkopjes moesten allemaal exact
   dezelfde grootte hebben en overal links uitgelijnd en in hetzelfde lettertype staan — dat
   laatste stond al goed (titel/kopjes in --font-heading, lopende tekst in --font-body, nergens
   gecentreerd), maar wordt hier nu expliciet vastgelegd zodat dat ook zo blijft; de afwijkende
   títel-/kopjesgrootte is hersteld via de sectie-instellingen (box_title_size_desktop e.d. staan
   nu op dezelfde waarde als box_subheading_size_desktop). (2) de checklist onder "Wat je krijgt"
   zag eruit als een opsomming maar had geen bullets, doordat de algemene "ul{list-style:none}"
   bovenaan dit bestand ook hier gold; "list-style: disc" herstelt de puntjes. */
.box-content-text{ text-align: left; }
.box-content-text, .box-content-text h2, .box-content-text h3{ font-family: var(--font-heading); }
.box-content-text .intro, .box-content-text .checklist, .box-content-text .body-block{ font-family: var(--font-body); }
.box-content-text .eyebrow{ display: block; margin-bottom: var(--sp-2); }
.box-content-text h2{ margin-bottom: var(--sp-4); }
.box-content-text .intro{ margin-bottom: var(--sp-6); }
.box-content-text h3{ margin: var(--sp-6) 0 var(--sp-2); }
.box-content-text .checklist{ margin: var(--sp-3) 0 var(--sp-6); padding-left: 1.2em; list-style: disc; color: rgb(var(--color-text-secondary)); }
.box-content-text .checklist li{ margin-bottom: var(--sp-2); }
.box-content-text .body-block + .body-block{ margin-top: var(--sp-5); }
/* Linkjes in deze tekst (de WhatsApp- en e-mail-links bij "Zoek je iets bijzonders?") in
   hetzelfde merkbruin als elders in de teksten op de site. */
.box-content-text a{ color: rgb(var(--color-link)); }
.box-content-text a:hover{ color: var(--noten-donker); }
/* Compactere regelafstand op mobiel (tekst staat daar weer op volle breedte, onder/boven een
   eigen vierkante foto, zie .box-content-row hierboven), zodat de hele sectie niet onnodig lang
   wordt op een telefoonscherm. */
@media (max-width: 767px){
  .box-content-text h2{ margin-bottom: var(--sp-3); }
  .box-content-text .intro{ margin-bottom: var(--sp-4); }
  .box-content-text h3{ margin: var(--sp-4) 0 var(--sp-1); }
  .box-content-text .checklist{ margin: var(--sp-2) 0 var(--sp-4); }
  .box-content-text .checklist li{ margin-bottom: var(--sp-1); }
  .box-content-text .body-block + .body-block{ margin-top: var(--sp-3); }
}
/* ---------- contactformulier: velden altijd wit ---------- */
/* De invoervelden van het contactformulier (Dawn "contact-form"-sectie) nemen
   standaard de achtergrondkleur van het gekozen kleurenschema over, en de
   browser kan ingevulde velden (naam/e-mail) bovendien geel/bruin "autofill"-
   kleuren. Hier altijd wit, onafhankelijk van schema of autofill. */
.contact .field__input{
  background-color: var(--wit) !important;
}
.contact .field__input:-webkit-autofill{
  -webkit-text-fill-color: var(--nacht);
  -webkit-box-shadow: 0 0 0 1000px var(--wit) inset;
  box-shadow: 0 0 0 1000px var(--wit) inset;
}

/* ---------- Contactpagina: ruimte tussen tekst en formulier, en even breed maken ----------
   Klantfeedback (okt. 2026): de "Ruimte onder"-instelling van de tekstsectie stond al op 0,
   maar de zichtbare ruimte tussen de tekst en "Stuur ons een bericht" bleef toch groot. Oorzaak:
   Shopify's eigen sectie-wrapper (#shopify-section-...) krijgt via de generieke .section-klasse
   altijd 64px (--sp-8) boven/onder, los van onze eigen instelbare "Ruimte boven/onder"-velden
   (die alleen de tekst/het formulier ZELF padding geven, een laag dieper). Die vaste 64px werd
   dus bovenop de eigen instelling opgeteld en kon niet via de Theme Editor worden weggehaald.
   kadowijn-text-page.liquid en contact-form.liquid zetten die vaste 64px daarom op 0 via hun eigen
   sectie-ID (#shopify-section-...), zodat de eigen
   "Ruimte boven/onder"-schuifjes (0-120px) voortaan de ENIGE en volledig instelbare bron van
   ruimte zijn — bij 0 is de ruimte dus ook echt 0.
   Daarnaast: de formuliervelden gebruikten Dawn's generieke .page-width--narrow-klasse, die op
   kleinere/middelgrote schermen geen vaste breedte heeft (enkel zijpadding), terwijl de tekst
   erboven een vaste leesbreedte van 720px heeft (.text-page-inner). Een eerdere versie van deze
   regel zette daarom max-width op 720px MET padding:0 — maar de tekst erboven staat zelf in
   .container.text-page-inner, en .container geeft altijd 24px zijpadding (--container-pad); dat
   bleef bij .text-page-inner's eigen max-width:720px gewoon van toepassing. Met padding:0 kwamen
   de formuliervelden dus tóch breder/anders te staan dan de tekst (geen 24px marge), en vulden ze
   op mobiel de volle schermbreedte zonder zijruimte. Onderstaande regel geeft het formulier nu
   dezelfde 720px breedte MET dezelfde 24px zijpadding als de tekst erboven, op elke schermbreedte. */
.contact.page-width--narrow{ max-width: 720px; padding-inline: var(--container-pad); }

/* ---------- Generieke pagina's (sections/main-page.liquid, bijv. Zakelijke geschenken) ----------
   Klantfeedback (okt. 2026): op de pagina "Zakelijke geschenken" stond, in tegenstelling tot alle
   andere pagina's, geen ruimte tussen de alinea's. Oorzaak: deze pagina heeft geen eigen Kadowijn-
   sectie (zoals de servicepagina's) maar gebruikt nog Dawn's kale "main-page"-sectie, die de
   paginatekst rechtstreeks uit de Shopify-pagina (Instellingen/Pagina's) toont in een .rte-wrapper.
   De algemene reset bovenaan dit bestand ("h1,h2,h3,p{ margin: 0; }") haalt daar, net als bij de
   native beleidspagina's hierboven, alle ruimte weg die Dawn's .rte-stijl normaal tussen alinea's
   zou geven. Onderstaande regel herstelt dat, met dezelfde maat als de rest van de site. */
.page-width--narrow .rte p + p{ margin-top: var(--sp-4); }

/* ---------- Native beleidspagina's: titel en tekst kleiner op mobiel ----------
   Klantfeedback (okt. 2026): op de beleidspagina's (Privacybeleid, Retour- en terugbetalingsbeleid,
   Servicevoorwaarden, Verzendbeleid) was de titel op mobiel te groot (36px, exact even groot als op
   desktop — geen enkele pagina op de site gebruikt op mobiel dezelfde titelgrootte als op desktop).
   Belangrijk om te weten: deze /policies/...-pagina's lopen NIET via onze eigen sectie
   (sections/kadowijn-policy-page.liquid) en hebben dus GEEN instelbare titel/tekst-grootte in de
   Theme Editor — dat is een vaste Shopify-paginasoort zonder secties, dus daar kan geen schuifje
   voor worden toegevoegd. Onderstaande regels verkleinen titel en tekst specifiek op mobiel/tablet,
   met dezelfde maatvoering als de rest van de site. */
@media (max-width: 767px){
  .shopify-policy__title h1{ font-size: 24px; line-height: 30px; }
  .shopify-policy__body .rte{ font-size: 15px; line-height: 24px; }
}

/* ---------- Leeftijdscheck (18+) ----------
   Klantverzoek (okt. 2026): een niet-sluitbare leeftijdscheck op de hele webshop (snippets/
   kadowijn-age-gate.liquid, gerenderd vanuit layout/theme.liquid, gedrag in assets/
   kadowijn-age-gate.js). .age-gate staat standaard op display:none; het synchrone scriptje vlak
   na <body> in layout/theme.liquid zet data-age-gate-pending op <html> zodra er geen geldig
   cookie staat, en pas dan toont onderstaande regel de overlay — zo nooit een "flits" van de
   site zelf voor nieuwe bezoekers. Kleuren/lettertypen/ruimtematen zijn dezelfde tokens als de
   rest van de site (zie :root hierboven); alleen de hoekafronding van de kaart zelf is iets
   ronder dan --radius-card, voor een wat rustiger/premium uitstraling die bij deze popup past. */
.age-gate{ display: none; }
html[data-age-gate-pending] .age-gate{ display: block; }
/* Klantfeedback (okt. 2026): alleen body op overflow:hidden zetten bleek niet genoeg om scrollen
   altijd te blokkeren (welk element precies "scrollt" verschilt per pagina/browser) en liet ook
   nog klikken op links/knoppen erachter toe. Nu zowel html als body blokkeren, plus de rest van
   de pagina expliciet onklikbaar maken zolang de popup open staat — onafhankelijk van de overlay
   zelf, als extra zekerheid. */
html[data-age-gate-pending]{ overflow: hidden; height: 100%; }
html[data-age-gate-pending] body{ overflow: hidden; }
html[data-age-gate-pending] body > *:not(.age-gate){ pointer-events: none; }
.age-gate-overlay{
  /* Klantverzoek: de achtergrond achter de popup moet volledig zwart zijn, niet getint/
     doorschijnend. */
  /* display:block !important is nodig omdat dit element leeg is (geen eigen inhoud, puur een
     achtergrondvlak): Dawn's basisthema (base.css) heeft een generieke reset-regel
     "a:empty, ul:empty, dl:empty, div:empty, ... { display: none; }" die specifiek lege
     <div>'s verbergt. Die regel (specificiteit 0,1,1 — type + :empty-pseudoklasse) is
     specifieker dan deze class-regel alleen (0,1,0) en zou deze overlay dus alsnog volledig
     onzichtbaar (display:none) maken: zonder deze regel blijft de overlay een 0x0 element en
     is er geen zwarte achtergrond te zien achter de popup. */
  position: fixed; inset: 0; background: #000; z-index: 999998; touch-action: none;
  display: block !important;
}
.age-gate-modal{
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 999999; width: calc(100% - 32px); max-width: 440px; max-height: calc(100vh - 32px);
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  background: var(--room); border-radius: 16px; box-shadow: var(--shadow-float);
  padding: var(--sp-7) var(--sp-6); text-align: center;
}
.age-gate-wordmark{
  font-family: var(--font-heading); font-weight: 600; font-size: 18px; letter-spacing: 0.04em;
  color: rgb(var(--color-text-secondary)); margin: 0 0 var(--sp-4);
}
.age-gate-divider{ border: none; border-top: 1px solid rgb(var(--color-border)); margin: 0 0 var(--sp-5); }
.age-gate-title{
  font-family: var(--font-heading); font-weight: 700; font-size: 28px; line-height: 1.2;
  color: rgb(var(--color-foreground)); margin: 0 0 var(--sp-3);
}
.age-gate-question{
  font-family: var(--font-heading); font-weight: 600; font-size: var(--body-lg-size);
  color: rgb(var(--color-foreground)); margin: 0 0 var(--sp-5);
}
/* Klantfeedback (okt. 2026): naast elkaar ("Nee, ik ben jonger dan 18" / "Ja, ik ben 18 of
   ouder") paste de langere knoptekst niet altijd naast de andere knop binnen de 440px-brede
   popup — .btn gebruikt white-space:nowrap, dus de tekst mocht niet afbreken en de knop werd
   dan breder dan zijn helft van de rij, met een afgeknipte rand als gevolg. Altijd onder elkaar
   (volle breedte) sluit dat uit, ongeacht knoptekst of schermbreedte. */
.age-gate-actions{ display: flex; flex-direction: column; gap: var(--sp-3); }
.age-gate-actions .btn{ width: 100%; }
.age-gate-disclaimer{ font-size: var(--small-size); color: rgb(var(--color-text-secondary)); margin: var(--sp-4) 0 0; }
@media (max-width: 480px){
  .age-gate-modal{ padding: var(--sp-6) var(--sp-5); }
  .age-gate-title{ font-size: 24px; }
}