/* =====================================================================
   Design tokens van de publieke website — O'Gelato huisstijl.
   Warme crème achtergrond, donkere espresso-bruin, karamel/goud accent.
   Alle secties lezen uitsluitend deze variabelen, zodat het uiterlijk op
   één plek gestuurd wordt.
   ===================================================================== */
:root {
  /* Exacte kleuren uit de originele O'Gelato-site (opgehaalde HTML-export). */
  --color-primary: #5a2d0c;
  --color-primary-contrast: #fdfaf6;
  --color-secondary: #6b5a45;
  --color-accent: #c89b6d;
  --color-background: #fdfaf6;
  --color-surface: #f5e9d8;
  --color-cream: #f5e9d8;
  --color-espresso: #5a2d0c;
  --color-espresso-dark: #3d1e08;
  --color-caramel: #c89b6d;
  --color-gold: #c89b6d;
  --color-text: #5a2d0c;
  --color-muted: #8a7a68;
  --color-border: rgba(200, 155, 109, .25);
  --color-error: #b42318;
  --color-success: #2f7a4d;

  --font-site: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;

  /* --- Typografische schaal -----------------------------------------
     Bewust ver uit elkaar: een hero hoort niet hetzelfde gewicht te
     hebben als een productnaam. Van groot naar klein. */
  --fs-display: clamp(3.25rem, 9vw, 9.5rem);   /* hero */
  --fs-h1: clamp(2.5rem, 6vw, 6rem);           /* sectietitel */
  --fs-h2: clamp(1.9rem, 3.6vw, 3.25rem);
  --fs-h3: clamp(1.3rem, 2vw, 1.85rem);        /* productnaam */
  --fs-lead: clamp(1.05rem, 1.3vw, 1.35rem);   /* inleiding */
  --fs-body: 1.0625rem;
  --fs-small: .925rem;
  --fs-label: .72rem;                           /* getrackt kapitaal */

  --tracking-label: .2em;
  --leading-display: .92;
  --leading-tight: 1.05;

  /* --- Ruimte -------------------------------------------------------
     Eén schaal voor de hele site. Secties ademen; ze plakken niet meer
     tegen elkaar. */
  --space-3xs: .375rem;
  --space-2xs: .625rem;
  --space-xs: 1rem;
  --space-sm: 1.5rem;
  --space-md: 2.25rem;
  --space-lg: 3.5rem;
  --space-xl: 5rem;
  --space-2xl: 7.5rem;
  --space-3xl: 10rem;
  --space-4xl: 14rem;

  /* Verticaal ritme per sectiesoort. */
  --section-tight: clamp(3rem, 6vw, var(--space-xl));
  --section-y: clamp(4.5rem, 9vw, var(--space-2xl));
  --section-airy: clamp(6rem, 12vw, var(--space-3xl));
  --section-vast: clamp(7rem, 16vw, var(--space-4xl));

  --radius-site: 14px;
  --radius-button: 999px;
  --container: 82.5rem;      /* 1320px */
  --container-narrow: 60rem;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);

  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-site);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Basisformaat voor de inline iconen: even groot als de tekst ernaast. */
.og-icon { width: 1em; height: 1em; flex: none; }

a { color: inherit; }

h1, h2, h3, h4 { font-family: var(--font-heading); margin: 0; line-height: 1.15; text-wrap: balance; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }

/* --- 12-koloms raster ------------------------------------------------
   Voor asymmetrische composities: niet alles 50/50 of gecentreerd.
   Let op: we zetten alleen grid-column-END (span N), nooit de shorthand
   `grid-column: span N`. Die shorthand vult namelijk de START in, waardoor
   een losse `.start-6` de span zou overschrijven en de kolom naar 1 zou
   krimpen. Zo blijven `.col-*` en `.start-*` vrij combineerbaar. */
.grid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-sm) var(--gutter); }
.col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-12 { grid-column-end: span 12; }
@media (min-width: 62rem) {
  .col-3 { grid-column-end: span 3; }
  .col-4 { grid-column-end: span 4; }
  .col-5 { grid-column-end: span 5; }
  .col-6 { grid-column-end: span 6; }
  .col-7 { grid-column-end: span 7; }
  .col-8 { grid-column-end: span 8; }
  .col-9 { grid-column-end: span 9; }
  .start-2 { grid-column-start: 2; }
  .start-4 { grid-column-start: 4; }
  .start-5 { grid-column-start: 5; }
  .start-6 { grid-column-start: 6; }
  .start-7 { grid-column-start: 7; }
  .start-8 { grid-column-start: 8; }
}

/* --- Typografische bouwstenen --------------------------------------- */
.t-display {
  font-family: var(--font-heading); font-size: var(--fs-display);
  line-height: var(--leading-display); font-weight: 500; letter-spacing: -.02em;
}
.t-h1 {
  font-family: var(--font-heading); font-size: var(--fs-h1);
  line-height: var(--leading-tight); font-weight: 500; letter-spacing: -.015em;
}
.t-label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label);
  text-transform: uppercase; color: var(--color-caramel); margin: 0;
}
.t-lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--color-muted); }
.t-italic { font-style: italic; color: var(--color-caramel); }

/* Fijne scheidingslijn in plaats van nóg een kaartrand. */
.rule { height: 1px; background: var(--color-border); border: 0; margin: 0; }

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link:focus {
  left: 1rem; top: 1rem; width: auto; height: auto; z-index: 100;
  background: var(--color-background); color: var(--color-text);
  padding: .75rem 1rem; border: 1px solid var(--color-border);
}

/* --- Knoppen --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.75rem; font-size: .8rem; font-weight: 600; font-family: inherit;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: var(--radius-button); border: 1px solid transparent; cursor: pointer;
  text-decoration: none; transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--color-espresso); color: var(--color-primary-contrast); }
.btn-primary:hover { opacity: .92; }
.btn-secondary { border-color: var(--color-espresso); color: var(--color-espresso); background: transparent; }
.btn-secondary:hover { background: var(--color-espresso); color: var(--color-primary-contrast); }
.btn-text { padding: 0; text-decoration: underline; text-underline-offset: .3em; background: none; color: var(--color-espresso); text-transform: none; letter-spacing: normal; font-weight: 500; }
.btn-text:hover { opacity: .75; }
.btn-caramel { background: var(--color-caramel); color: var(--color-espresso-dark); }
.btn-caramel:hover { opacity: .92; }

/* --- Header ---------------------------------------------------------
   Op pagina's met een hero start de balk transparant óver het beeld en
   krijgt hij pas bij scrollen een achtergrond. Zo domineert de foto. */
.site-header {
  background: var(--color-cream); position: sticky; top: 0; z-index: 40;
  transition: background-color .35s var(--ease-out), box-shadow .35s var(--ease-out), backdrop-filter .35s;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 5rem; gap: 1rem; transition: height .35s var(--ease-out);
}
body.has-hero .site-header { background: transparent; position: fixed; left: 0; right: 0; }
body.has-hero .site-header .site-nav a,
body.has-hero .site-header .site-nav__dropdown-toggle,
body.has-hero .site-header .nav-toggle { color: #fff; }
body.has-hero .site-header .site-header__wordmark { color: #fff; }
body.has-hero .site-header .btn-order { background: rgba(253,250,246,.94); color: var(--color-espresso-dark); }
body.has-hero .site-header.is-stuck { background: rgba(245,233,216,.92); backdrop-filter: blur(14px); box-shadow: 0 1px 0 var(--color-border); }
body.has-hero .site-header.is-stuck .site-nav a,
body.has-hero .site-header.is-stuck .site-nav__dropdown-toggle,
body.has-hero .site-header.is-stuck .nav-toggle,
body.has-hero .site-header.is-stuck .site-header__wordmark { color: var(--color-espresso); }
body.has-hero .site-header.is-stuck .btn-order { background: var(--color-espresso); color: var(--color-primary-contrast); }
.site-header.is-stuck .site-header__inner { height: 4.25rem; }
body:not(.has-hero) .site-header.is-stuck { box-shadow: 0 1px 0 var(--color-border); }
.site-header__logo { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.site-header__logo img { max-height: 2.5rem; width: auto; }
.site-header__wordmark { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-heading); font-style: italic; font-weight: 600; font-size: 1.4rem; color: var(--color-espresso); letter-spacing: -.01em; }
.site-header__wordmark .drop { width: .7rem; height: .9rem; border-radius: 50% 50% 50% 0; background: var(--color-caramel); transform: rotate(45deg); display: inline-block; }

.site-nav { display: none; align-items: center; gap: 1.9rem; margin-right: 1.75rem; }
.site-nav a { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; color: var(--color-espresso); padding: .35rem 0; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-caramel); }

.site-nav__dropdown { position: relative; }
.site-nav__dropdown-toggle {
  display: inline-flex; align-items: center; gap: .35rem; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-espresso); padding: .35rem 0;
}
.site-nav__dropdown-toggle svg { transition: transform .15s ease; }
.site-nav__dropdown.is-open .site-nav__dropdown-toggle svg { transform: rotate(180deg); }
.site-nav__dropdown-menu {
  display: none; position: absolute; top: calc(100% + .75rem); left: 50%; transform: translateX(-50%);
  min-width: 11rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(42, 31, 22, .12); padding: .5rem; z-index: 50;
}
.site-nav__dropdown.is-open .site-nav__dropdown-menu { display: block; }
.site-nav__dropdown-menu a { display: block; padding: .6rem .75rem; border-radius: 8px; font-size: .85rem; font-weight: 500; text-transform: none; letter-spacing: normal; }
.site-nav__dropdown-menu a:hover { background: var(--color-surface); color: var(--color-espresso); }

.btn-order {
  display: none; align-items: center; justify-content: center; text-decoration: none;
  background: var(--color-espresso); color: var(--color-primary-contrast);
  padding: .75rem 1.5rem; border-radius: var(--radius-button);
  font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  transition: opacity .15s ease;
}
.btn-order:hover { opacity: .9; }

.nav-toggle {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  width: 2.75rem; height: 2.75rem; margin-right: -.5rem;
  background: none; border: 0; cursor: pointer; color: var(--color-espresso);
}
.nav-toggle__bar { display: block; width: 1.4rem; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobiel menu: volledig scherm, met gefaseerde animatie per link. */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 55; background: var(--color-cream);
  overflow-y: auto;
}
.mobile-nav.is-open { display: block; }
.mobile-nav__panel { min-height: 100%; padding: 6.5rem 1.5rem 3rem; display: flex; flex-direction: column; }
.mobile-nav__primary { list-style: none; margin: 0 0 1.5rem; padding: 0; display: flex; flex-direction: column; }
.mobile-nav__primary a { display: block; padding: .85rem 0; font-family: var(--font-heading); font-size: 1.9rem; font-weight: 600; text-decoration: none; color: var(--color-espresso-dark); border-bottom: 1px solid var(--color-border); }
.mobile-nav__label { margin: .5rem 0 .75rem; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--color-muted); }
.mobile-nav__secondary { list-style: none; margin: 0 0 2rem; padding: 0; display: flex; flex-direction: column; gap: .25rem; }
.mobile-nav__secondary a { display: block; padding: .6rem 0; font-size: 1.05rem; font-weight: 500; text-decoration: none; color: var(--color-espresso); }
.mobile-nav__cta { margin-top: auto; text-align: center; }
.mobile-nav.is-open .mobile-nav__primary li,
.mobile-nav.is-open .mobile-nav__label,
.mobile-nav.is-open .mobile-nav__secondary li,
.mobile-nav.is-open .mobile-nav__cta {
  animation: mobile-nav-item-in .35s ease both;
  animation-delay: calc(var(--i, 0) * 40ms + 60ms);
}
@keyframes mobile-nav-item-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
body.mobile-nav-open { overflow: hidden; }
/* Het menu lag over de header heen, dus over de knop waarmee je het weer
   sluit. Op een telefoon kon je het menu wél openen maar niet meer dicht
   doen (er is geen Escape-toets). De header moet er dus bovenop liggen; de
   knop wordt daar al een kruisje via aria-expanded. */
/* Het menupaneel is nu een broer van de header (zie layout.php), dus een
   hogere z-index op de header zelf doet wél wat je verwacht: de balk met de
   sluitknop komt boven het paneel te liggen. Ook de backdrop-filter moet uit
   zolang het menu open staat: een filter maakt van de header het referentie-
   kader voor alles wat `position: fixed` is, en dat was precies de fout die
   het menu na scrollen liet mislukken. */
body.mobile-nav-open .site-header {
  background: transparent; box-shadow: none; z-index: 60;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
body.mobile-nav-open .site-header .nav-toggle,
body.mobile-nav-open .site-header .site-header__wordmark { color: var(--color-espresso-dark); }
body.mobile-nav-open .site-header__logo-img { filter: none; }

@media (min-width: 62rem) {
  .site-header__inner { height: 5.5rem; }
  .site-nav { display: flex; }
  .btn-order { display: inline-flex; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none !important; }
}

/* --- Secties: vier ritmes, niet één ------------------------------- */
.section { padding: var(--section-y) 0; }
.section--tight { padding: var(--section-tight) 0; }
.section--airy { padding: var(--section-airy) 0; }
.section--vast { padding: var(--section-vast) 0; }
.section--surface { background: var(--color-surface); }
.section--dark { background: var(--color-espresso-dark); color: var(--color-primary-contrast); }
.section--dark .og-heading, .section--dark .t-h1 { color: var(--color-primary-contrast); }
.section--dark .og-subtext, .section--dark .t-lead { color: rgba(253, 250, 246, .72); }
.section--dark .og-eyebrow, .section--dark .t-label { color: var(--color-gold); }
/* Twee secties met dezelfde achtergrond onder elkaar tellen hun padding op
   tot een gat van 300px+. Dat leest niet als ritme maar als een fout. De
   onderruimte van de vorige sectie is dan al de hele tussenruimte. */
.section--airy:not(.section--surface):not(.section--dark)
  + .section--airy:not(.section--surface):not(.section--dark),
.section--vast:not(.section--surface):not(.section--dark)
  + .section--vast:not(.section--surface):not(.section--dark) { padding-top: 0; }

.section__head { max-width: 42rem; margin-bottom: 2.5rem; }
.section__head.is-center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 600; letter-spacing: -.01em; }
.section__intro { margin: .75rem 0 0; font-size: 1.1rem; color: var(--color-muted); }

/* Hero van de CMS-pagina's (over ons, contact, b2b, …): dezelfde
   typografische schaal en hetzelfde ritme als de rest van de site. */
.hero { padding: var(--section-airy) 0 var(--section-y); }
/* De sectie erna zou zijn eigen bovenruimte erbovenop stapelen. */
.hero + .section, .hero + .section--airy { padding-top: 0; }
.hero__grid { display: grid; gap: 2.5rem; align-items: center; }
.hero__body { max-width: 46rem; }
.hero__body.is-center { margin: 0 auto; text-align: center; }
.hero__eyebrow { margin: 0 0 var(--space-sm); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-caramel); }
.hero__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--leading-tight); font-weight: 500; letter-spacing: -.02em; }
.hero__title em { font-style: italic; color: var(--color-caramel); }
.hero__text { margin: var(--space-md) 0 0; font-size: var(--fs-lead); line-height: 1.65; color: var(--color-muted); }
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: var(--space-lg); }
.hero__body.is-center .hero__actions { justify-content: center; }
.hero__media img { width: 100%; border-radius: var(--radius-site); }
@media (min-width: 62rem) {
  .hero { padding: 6rem 0; }
  .hero__grid.has-media { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
}

/* Rijke tekst */
.rich-text { font-size: 1.05rem; line-height: 1.7; }
.rich-text > * + * { margin-top: 1.15rem; }
.rich-text h2 { font-size: 1.5rem; font-weight: 600; }
.rich-text h3 { font-size: 1.25rem; font-weight: 600; }
.rich-text h4 { font-size: 1.1rem; font-weight: 600; }
.rich-text p { margin: 0; }
.rich-text ul, .rich-text ol { margin: 0; padding-left: 1.4rem; }
.rich-text li + li { margin-top: .4rem; }
.rich-text a { text-decoration: underline; text-underline-offset: .2em; }
.rich-text a:hover { opacity: .75; }

.prose-narrow { max-width: 38rem; }
.prose-normal { max-width: 46rem; }
.prose-wide { max-width: 60rem; }
.is-center { margin-left: auto; margin-right: auto; text-align: center; }

/* Tekst + afbeelding */
.text-image { display: grid; gap: 2.5rem; align-items: center; }
.text-image__media img { width: 100%; border-radius: var(--radius-site); }
@media (min-width: 62rem) {
  .text-image { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .text-image--left .text-image__body { order: 2; }
  .text-image--left .text-image__media { order: 1; }
}

/* Afbeelding */
.figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--radius-site); }
.figure--full img { border-radius: 0; }
.figure figcaption { margin-top: .75rem; font-size: .9rem; color: var(--color-muted); }

/* Kaarten */
.cards { display: grid; gap: 2rem; list-style: none; margin: 0; padding: 0; }
.card { display: flex; flex-direction: column; }
.card__media { margin-bottom: 1.25rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-site); background: var(--color-surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title { font-size: 1.2rem; font-weight: 600; }
.card__text { margin: .5rem 0 0; color: var(--color-muted); white-space: pre-line; flex: 1; }
.card__link { margin-top: 1rem; }
@media (min-width: 40rem) {
  .cards--2, .cards--3, .cards--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62rem) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Galerij */
.gallery { display: grid; gap: 1rem; list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(2, 1fr); }
.gallery figure { margin: 0; }
.gallery__media { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-site); background: var(--color-surface); }
.gallery__media img { width: 100%; height: 100%; object-fit: cover; }
.gallery figcaption { margin-top: .5rem; font-size: .875rem; color: var(--color-muted); }
@media (min-width: 62rem) {
  .gallery--3 { grid-template-columns: repeat(3, 1fr); }
  .gallery--4 { grid-template-columns: repeat(4, 1fr); }
}

/* Reviews */
.testimonials { display: grid; gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.testimonial { display: flex; flex-direction: column; height: 100%; margin: 0; padding: 1.75rem; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-site); }
.testimonial blockquote { margin: 0; flex: 1; font-size: 1.05rem; line-height: 1.6; }
.testimonial figcaption { margin-top: 1.25rem; font-size: .9rem; color: var(--color-muted); }
.testimonial figcaption strong { color: var(--color-text); }
@media (min-width: 48rem) { .testimonials { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .testimonials { grid-template-columns: repeat(3, 1fr); } }

/* Veelgestelde vragen */
.faq { max-width: 46rem; border-top: 1px solid var(--color-border); }
.faq details { border-bottom: 1px solid var(--color-border); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  padding: 1.15rem 0; font-size: 1.1rem; font-weight: 500; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--color-muted); transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__answer { padding: 0 0 1.25rem; color: var(--color-muted); }

/* Call-to-action */
.cta { padding: 3.5rem 1.5rem; text-align: center; border-radius: var(--radius-site); background: var(--color-surface); }
.cta--accent { background: var(--color-accent); color: var(--color-primary-contrast); }
.cta__title { font-size: clamp(1.6rem, 4vw, 2.25rem); font-weight: 600; }
.cta__text { max-width: 40rem; margin: 1rem auto 0; font-size: 1.1rem; color: var(--color-muted); }
.cta--accent .cta__text { color: inherit; opacity: .9; }
.cta__action { margin-top: 2rem; }
.cta--accent .btn-secondary { border-color: currentColor; color: inherit; }
.cta--accent .btn-secondary:hover { background: var(--color-primary-contrast); color: var(--color-accent); }

/* Contact */
.contact-grid { display: grid; gap: 3rem; }
@media (min-width: 62rem) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.contact-details { font-style: normal; line-height: 1.9; }
.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; }
.contact-hours { margin-top: 2rem; }
.contact-hours h3 { font-size: 1.15rem; font-weight: 600; margin-bottom: .75rem; }
.contact-hours dl { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1.5rem; margin: 0; max-width: 22rem; }
.contact-hours dt { font-weight: 500; }
.contact-hours dd { margin: 0; text-align: right; color: var(--color-muted); }
.contact-map { margin-top: 3rem; border: 1px solid var(--color-border); border-radius: var(--radius-site); overflow: hidden; }
.contact-map iframe { display: block; width: 100%; height: 20rem; border: 0; }

/* Formulier */
.form { display: flex; flex-direction: column; gap: 1rem; }
.form__row { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field label { font-size: .9rem; font-weight: 500; }
.field input, .field textarea {
  width: 100%; padding: .8rem .9rem; font: inherit; font-size: 1rem;
  color: var(--color-text); background: var(--color-background);
  border: 1px solid var(--color-border); border-radius: var(--radius-site);
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .08); }
.field textarea { min-height: 9rem; resize: vertical; }
.field__error { font-size: .85rem; color: var(--color-error); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.notice { padding: 1rem 1.15rem; border-radius: var(--radius-site); border: 1px solid var(--color-border); }
.notice--ok { border-color: var(--color-success); background: rgba(6, 118, 71, .06); }
.notice--error { border-color: var(--color-error); background: rgba(180, 35, 24, .06); }
.notice strong { display: block; }

/* Footer */
.site-footer { border-top: 1px solid var(--color-border); background: var(--color-cream); margin-top: auto; }
.footer-location { display: flex; align-items: flex-start; gap: .5rem; color: var(--color-muted); font-size: .95rem; line-height: 1.5; }
.footer-location svg { flex: none; margin-top: .2rem; color: var(--color-caramel); }
.open-status { display: inline-flex; align-items: center; gap: .5rem; margin: 1rem 0 0; font-size: .9rem; font-weight: 600; }
.open-status .dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--color-success); }
.open-status.is-closed .dot { background: var(--color-error); }
.open-status.is-closed { color: var(--color-muted); }
.open-status.is-open { color: var(--color-success); }
/* Grote merkfooter: statement eerst, dan pas de kolommen. */
.site-footer__statement {
  font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h1);
  line-height: var(--leading-tight); letter-spacing: -.02em;
  color: var(--color-espresso-dark); margin: 0 0 var(--space-xl); max-width: 18ch;
}
.site-footer__statement em { font-style: italic; color: var(--color-caramel); }
/* De ademruimte hoort bóven de merkregel, niet eronder: anders staat er een
   gat van 250px tussen de zin en de kolommen die erbij horen. */
.site-footer__lead { padding-top: var(--section-airy); }
.site-footer__grid { display: grid; gap: var(--space-lg); padding-block: 0 var(--space-xl); }
@media (min-width: 48rem) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .site-footer__grid { grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr; gap: var(--space-lg); } }
.site-footer h2 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; margin-bottom: 1.15rem; color: var(--color-espresso); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.site-footer a { text-decoration: none; color: var(--color-muted); }
/* Losse tekstlinks in de footer waren 19px hoog: te klein om te tikken. */
.site-footer nav a, .site-footer li a { display: inline-flex; align-items: center; min-height: 2.5rem; }
.site-footer a:hover { color: var(--color-espresso); }
.site-footer__brand p { margin: .75rem 0 0; color: var(--color-muted); font-size: .95rem; }
.site-footer__brand img { max-height: 2.5rem; width: auto; }
.site-footer__bottom { border-top: 1px solid var(--color-border); }
.site-footer__bottom-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding-block: 1.25rem; font-size: .85rem; color: var(--color-muted); }
@media (min-width: 40rem) { .site-footer__bottom-inner { flex-direction: row; justify-content: space-between; } }
/* `.site-footer ul` (0,1,1) hierboven zet alle lijsten in de voettekst onder
   elkaar en won het van `.socials` (0,1,0). De icoontjes stonden daardoor als
   een verticaal kolommetje in de rechterhoek. Zelfde gewicht teruggeven, dan
   staan ze weer naast elkaar. */
.site-footer .socials { flex-direction: row; }
.socials { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.socials a { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; color: var(--color-text); }
.socials a:hover { opacity: .7; }
.socials svg { width: 1.25rem; height: 1.25rem; }

/* Voorvertoning */
.preview-bar { position: sticky; top: 0; z-index: 60; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; padding: .6rem 1.25rem; background: #fbbf24; color: #422006; font-size: .9rem; }
.preview-bar a { color: inherit; }

/* 404 */
.error-page { padding: 6rem 0; }
.error-page p.code { font-size: .8rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 .75rem; }
.error-page h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 600; }
.error-page p.lead { margin: 1rem 0 2rem; font-size: 1.15rem; color: var(--color-muted); max-width: 32rem; }

.page-body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* =====================================================================
   O'Gelato — bestemmingsroutes (homepage + menu). Alle nieuwe blokken
   hieronder horen bij site/views/site/ogelato/*.
   ===================================================================== */

/* Decoratieve foto-plekhouders: waar de klant later eigen foto's kan
   plaatsen. Bewust géén stockfoto's — een warme, merkkleurige gradient. */
.ph-photo {
  position: relative; overflow: hidden; background: linear-gradient(135deg, #4a3320 0%, #6b4a2c 50%, #c98f42 100%);
  display: flex; align-items: center; justify-content: center;
}
.ph-photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 25% 20%, rgba(255,255,255,.16), transparent 55%); }
.ph-photo svg { position: relative; z-index: 1; width: 30%; max-width: 96px; opacity: .32; color: #fff; }
.ph-photo--soft { background: linear-gradient(135deg, var(--color-cream) 0%, #e9d3ae 100%); }
.ph-photo--soft svg { color: var(--color-espresso); opacity: .22; }

/* Zelfde stijl, maar zónder flex-centrering — voor tegels met eigen
   (links uitgelijnde) tekst erbovenop, plus een klein hoek-icoon. */
.ph-bg { position: relative; overflow: hidden; background: linear-gradient(135deg, #4a3320 0%, #6b4a2c 50%, #c98f42 100%); }
.ph-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(255,255,255,.18), transparent 55%); }
.ph-bg--soft { background: linear-gradient(150deg, var(--color-surface) 0%, var(--color-cream) 100%); }
.ph-bg__icon { position: absolute; right: 1.1rem; bottom: 1.1rem; width: 2.75rem; height: 2.75rem; opacity: .3; color: #fff; z-index: 0; }
.ph-bg--soft .ph-bg__icon { color: var(--color-espresso); opacity: .18; }

/* Merk-ticker (marquee) */
.marquee { overflow: hidden; background: var(--color-espresso-dark); padding: .9rem 0; }
.marquee__track { display: flex; width: max-content; gap: 2.5rem; animation: og-marquee 32s linear infinite; }
.marquee__item { display: inline-flex; align-items: center; gap: 2.5rem; white-space: nowrap; font-family: var(--font-heading); font-style: italic; font-size: 1.05rem; color: rgba(250, 243, 232, .55); }
@keyframes og-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Hero (homepage): filmisch, vult het scherm, typografie ís de compositie */
.og-hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; color: #fff; }
.og-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,8,.28) 0%, rgba(20,13,8,.22) 38%, rgba(16,9,4,.82) 100%); }
.og-hero__find {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; padding: .95rem 0;
  color: rgba(255,255,255,.8); text-decoration: none;
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.35); transition: color .2s, border-color .2s;
}
.og-hero__find:hover { color: #fff; border-color: #fff; }
.og-hero__find svg { width: 1rem; height: 1rem; }
/* Alleen padding-bottom zetten: de shorthand zou de zijmarge van .container
   overschrijven, waardoor de hero-tekst tegen de schermrand plakt. */
.og-hero__content { position: relative; z-index: 1; width: 100%; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.og-hero__eyebrow {
  margin: 0 0 var(--space-sm); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase; opacity: .8;
}
.og-hero__title {
  font-family: var(--font-heading); font-style: italic; font-weight: 500;
  font-size: var(--fs-display); line-height: var(--leading-display);
  letter-spacing: -.025em; margin: 0; max-width: 14ch;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
/* Titel, tekst, knoppen en cijfers vormen samen één blok onderaan beeld. */
.og-hero__meta {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--space-md); margin-top: var(--space-lg);
  padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,.22);
}
.og-hero__lead { max-width: 34ch; margin: 0; font-size: var(--fs-lead); line-height: 1.55; opacity: .9; }
.og-hero__lead a { color: var(--color-gold); text-decoration: none; }
.og-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.og-hero__actions .btn-primary { background: rgba(253,250,246,.96); color: var(--color-espresso-dark); }
.og-hero__actions .btn-secondary { border-color: rgba(255,255,255,.5); color: #fff; }
.og-hero__actions .btn-secondary:hover { background: #fff; color: var(--color-espresso-dark); }
.og-hero__stats { display: flex; gap: clamp(1.5rem, 5vw, 4rem); }
.og-hero__stat strong { display: block; font-family: var(--font-heading); font-size: clamp(1.5rem, 2.6vw, 2.25rem); font-weight: 500; line-height: 1; }
.og-hero__stat span { display: block; margin-top: .4rem; font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
@media (min-width: 62rem) {
  .og-hero__meta { flex-wrap: nowrap; align-items: center; }
  .og-hero__lead { flex: 0 1 26rem; }
}
@media (min-width: 48rem) { .og-hero { min-height: 46rem; } }

.og-reveal { opacity: 0; animation: og-reveal-in .6s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
@keyframes og-reveal-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.og-hero__scroll-cue { position: absolute; left: 50%; bottom: 1.5rem; transform: translateX(-50%); color: rgba(255,255,255,.7); width: 1.5rem; animation: og-scroll-cue 1.8s ease-in-out infinite; z-index: 1; }
@keyframes og-scroll-cue { 0%, 100% { transform: translate(-50%, 0); opacity: .5; } 50% { transform: translate(-50%, 8px); opacity: 1; } }

/* Homepage categorie-ontdekking: 1 grote + 3 kleinere kaarten (editorial). */
.home-menu-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.home-menu-grid__side { display: grid; gap: 1.25rem; grid-template-columns: repeat(3, 1fr); }
.home-menu-card--feature { min-height: 20rem; }
.home-menu-card__label { display: block; }
.home-menu-card__hint { position: relative; z-index: 1; display: block; margin-top: .35rem; font-size: .85rem; font-weight: 500; opacity: .85; }
@media (min-width: 48rem) {
  .home-menu-grid { grid-template-columns: 1.3fr 1fr; align-items: stretch; }
  .home-menu-grid__side { grid-template-columns: 1fr; }
}
@media (max-width: 30rem) { .home-menu-grid__side { grid-template-columns: repeat(3, 1fr); } .home-menu-grid__side .home-menu-card { min-height: 8rem; padding: .85rem; } }

/* Scroll-reveal (subtiel). Het attribuut wordt alleen door JS gezet, dus
   zonder JS blijft alles gewoon zichtbaar. Bij reduced-motion zetten we de
   startstaat helemaal uit: dan mag niets ooit onzichtbaar blijven hangen. */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; }
}

/* Sectiekop (herbruikt in menu + homepage) */
.og-section-head { max-width: 40rem; margin: 0 auto var(--space-xl); text-align: center; }
.og-section-head--left { margin-left: 0; margin-right: 0; text-align: left; }
.og-eyebrow { margin: 0 0 var(--space-xs); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-caramel); }
.og-heading { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-h1); line-height: var(--leading-tight); letter-spacing: -.015em; color: var(--color-espresso-dark); margin: 0; }
.og-heading em, .og-heading i { font-style: italic; color: var(--color-caramel); }
.og-subtext { margin: var(--space-sm) 0 0; color: var(--color-muted); font-size: var(--fs-lead); line-height: 1.6; }

/* Menutabs: op mobiel horizontaal scrollbaar (geen wrap), zodat de actieve
   categorie altijd in één rij duidelijk te zien en te kiezen is. */
.menu-tabs { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: .6rem; padding-block: 1.5rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.menu-tabs::-webkit-scrollbar { display: none; }
.menu-tabs a {
  display: inline-flex; align-items: center; flex: none; scroll-snap-align: start; padding: .65rem 1.4rem; border-radius: var(--radius-button);
  border: 1px solid var(--color-border); font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; color: var(--color-espresso); background: var(--color-background); transition: background-color .15s ease, color .15s ease;
}
@media (min-width: 48rem) { .menu-tabs { flex-wrap: wrap; overflow-x: visible; } }
.menu-tabs a:hover { border-color: var(--color-espresso); }
.menu-tabs a.is-active { background: var(--color-espresso); border-color: var(--color-espresso); color: var(--color-primary-contrast); }
/* De vaste header ligt over deze kortere hero's heen; vang dat op. */
/* De vaste header ligt over deze hero's heen. De menu-hero lijnt onderaan uit
   en heeft alleen ruimte nodig; de smaken-hero begint bovenaan en moet de
   volledige sectie-ademruimte ónder de header krijgen. */
body.has-hero .menu-hero { padding-top: 5rem; }
body.has-hero .smaken-hero { padding-top: calc(var(--section-airy) + 5rem); }
.menu-hero { position: relative; min-height: clamp(26rem, 68vh, 40rem); display: flex; align-items: flex-end; color: #fff; }
.menu-hero__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,13,8,.92) 0%, rgba(20,13,8,.55) 65%, rgba(20,13,8,.25) 100%); }
.menu-hero__content { position: relative; z-index: 1; padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.menu-hero__eyebrow { margin: 0 0 var(--space-sm); font-size: var(--fs-label); font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .8; }
.menu-hero__title { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-display); line-height: var(--leading-display); letter-spacing: -.02em; margin: 0; }
.menu-hero__title em { font-style: italic; color: var(--color-gold); }
.menu-tabs-bar { border-bottom: 1px solid var(--color-border); background: var(--color-background); }

/* Gelato-featurekaarten (Gelato / Liter IJs / Sorbet IJs) */
.feature-cards { display: grid; gap: var(--space-md); grid-template-columns: 1fr; }
.feature-card { position: relative; border-radius: var(--radius-site); overflow: hidden; min-height: 22rem; display: flex; align-items: flex-end; padding: var(--space-lg); color: #fff; }
.feature-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,8,0) 45%, rgba(20,13,8,.72) 100%); z-index: 0; }
.feature-card__badge { position: absolute; top: var(--space-md); left: var(--space-md); background: rgba(253,250,246,.94); color: var(--color-espresso); font-size: var(--fs-label); font-weight: 700; letter-spacing: .05em; padding: .4rem .85rem; border-radius: var(--radius-button); z-index: 1; }
.feature-card__label { position: relative; z-index: 1; font-family: var(--font-heading); font-size: var(--fs-h2); font-weight: 500; }
/* Middelste kaart iets hoger: breekt de rij van drie gelijke blokken. */
@media (min-width: 48rem) {
  .feature-cards { grid-template-columns: repeat(3, 1fr); align-items: start; gap: var(--gutter); }
  .feature-cards > :nth-child(2) { margin-top: var(--space-xl); }
}

/* Populaire smaken / flavor cards */
.flavor-hint { text-align: center; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-muted); margin: 0 0 1.25rem; }
.flavor-grid { display: grid; gap: var(--space-lg) var(--space-md); grid-template-columns: repeat(2, 1fr); list-style: none; margin: 0; padding: 0; }
/* Geen kaartranden: de smaakkleur zelf is het vlak, de naam eronder. */
.flavor-card { display: block; text-decoration: none; color: inherit; }
.flavor-card__swatch { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border-radius: var(--radius-site); overflow: hidden; transition: transform .4s var(--ease-out); }
.flavor-card:hover .flavor-card__swatch { transform: translateY(-6px); }
/* Zonder foto: de beginletter groot in het kleurvlak. Geen namaak-bol. */
.flavor-card__initial {
  font-family: var(--font-heading); font-style: italic; font-weight: 500;
  font-size: clamp(2.5rem, 6vw, 4rem); line-height: 1; opacity: .55;
  transition: transform .4s var(--ease-out), opacity .4s var(--ease-out);
}
.flavor-card:hover .flavor-card__initial { transform: scale(1.06); opacity: .75; }
.flavor-card__body { display: block; padding: var(--space-sm) 0 0; }
.flavor-card__name { display: block; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--color-espresso-dark); }
.flavor-card__desc { display: block; margin: var(--space-3xs) 0 0; font-size: var(--fs-small); color: var(--color-muted); }
/* De platte variant (menu-overzicht) houdt de kleur als klein rondje. */
.flavor-card--flat .flavor-card__body { padding-top: 0; }
.flavor-card__dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-bottom: .5rem; }
@media (min-width: 40rem) { .flavor-grid { grid-template-columns: repeat(3, 1fr); } }
/* --6 staat in een 7-koloms kolom: drie naast elkaar is daar het maximum. */
@media (min-width: 62rem) { .flavor-grid--all { grid-template-columns: repeat(4, 1fr); gap: var(--space-xl) var(--gutter); } }

.flavor-cta { margin-top: var(--space-xl); }

/* --- Smaken-ontdekpagina --------------------------------------------- */
.smaken-hero { background: var(--color-espresso-dark); color: #fff; padding: var(--section-airy) 0; }
.smaken-hero .grid12 { align-items: end; }
.smaken-hero__aside { padding-bottom: .35rem; }
.smaken-hero .og-eyebrow { color: var(--color-gold); }
.smaken-hero .og-subtext { color: rgba(253,250,246,.72); max-width: 40ch; }
.smaken-hero__back { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: rgba(253,250,246,.65); text-decoration: none; margin-bottom: var(--space-lg); }
.smaken-hero__back:hover { color: #fff; }
.smaken-hero__title { font-family: var(--font-heading); font-weight: 500; font-size: var(--fs-display); line-height: var(--leading-display); letter-spacing: -.02em; color: #fff; margin: 0; max-width: 12ch; }
.smaken-hero__title em { font-style: italic; color: var(--color-gold); }

/* De zoekbalk plakt onder de header: bij 31 smaken wil je 'm altijd bij de hand. */
.smaken-searchbar { position: sticky; top: 4.25rem; z-index: 20; background: var(--color-background); border-bottom: 1px solid var(--color-border); padding: var(--space-sm) 0; }
.smaken-search { display: flex; align-items: center; gap: var(--space-sm); position: relative; }
.smaken-search__field { position: relative; flex: 1 1 auto; }
.smaken-search input {
  width: 100%; padding: .9rem 1.25rem .9rem 3rem; border-radius: var(--radius-button); border: 1px solid var(--color-border);
  background: var(--color-surface); font: inherit; font-size: var(--fs-body); color: var(--color-espresso-dark);
}
.smaken-search input:focus { outline: none; border-color: var(--color-caramel); background: var(--color-background); }
.smaken-search svg { position: absolute; left: 1.15rem; top: 50%; transform: translateY(-50%); color: var(--color-muted); pointer-events: none; }
.smaken-search__count { flex: none; font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.smaken-empty { display: none; padding: var(--space-2xl) 0; color: var(--color-muted); font-size: var(--fs-lead); }
.smaken-empty.is-visible { display: block; }
@media (max-width: 34rem) { .smaken-search__count { display: none; } }

/* --- Menukaart (wafels, pannekoeken, delicatessen, koffie) -------------
   Van deze gerechten bestaan geen foto's. In plaats van een gekleurd vak
   met een icoontje — precies wat een echte foto níét is — zetten we ze
   typografisch neer, zoals op een menukaart. */
.menu-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.menu-list__item {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: var(--space-2xs) var(--space-md);
  padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border);
  cursor: pointer; transition: padding-left .25s var(--ease-out);
}
.menu-list__item:hover, .menu-list__item:focus-visible { padding-left: var(--space-sm); outline: none; }
.menu-list__item:focus-visible .menu-list__name { text-decoration: underline; text-underline-offset: .3em; }
.menu-list__name { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--leading-tight); font-weight: 500; color: var(--color-espresso-dark); margin: 0; }
.menu-list__badge { justify-self: end; }
.menu-list__desc { grid-column: 1 / -1; margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--fs-body); line-height: 1.65; max-width: 56ch; }
@media (min-width: 62rem) { .menu-list__intro { position: sticky; top: 9rem; align-self: start; } }

/* Coffee-kaarten met badge */

/* Badges */
.badge { display: inline-flex; align-items: center; padding: .3rem .7rem; border-radius: var(--radius-button); font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--color-surface); color: var(--color-espresso); margin-bottom: .5rem; }
.badge--signature { background: var(--color-espresso); color: #fff; }
.badge--nieuw { background: var(--color-caramel); color: #fff; }
.badge--warm { background: #d97a3f; color: #fff; }
.badge--dessert { background: #7a5fa6; color: #fff; }
.badge--klassiek { background: var(--color-surface); color: var(--color-espresso); }
.badge--bestseller { background: #5b6b3f; color: #fff; }
.badge--fanfavourite { background: #c96b7a; color: #fff; }
.badge--seizoen { background: #b13a3a; color: #fff; }
.badge--exclusief { background: var(--color-gold); color: var(--color-espresso-dark); }

/* --- Maand special: campagneblok over de volle breedte ---------------- */
.month-special { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--space-xl); }
.month-special__eyebrow { margin: 0; font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-gold); }
.month-special__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--leading-tight); font-weight: 500; margin: var(--space-sm) 0 0; color: #fff; }
.month-special__title em { font-style: italic; color: var(--color-gold); }
.month-special__desc { margin: var(--space-md) 0 0; color: rgba(253,250,246,.78); font-size: var(--fs-lead); line-height: 1.65; max-width: 34ch; }
.month-special__rating { display: flex; align-items: center; gap: .5rem; margin: var(--space-md) 0 0; color: var(--color-gold); font-size: var(--fs-small); }
.month-special__rating .stars { letter-spacing: .1em; }
.month-special__cta { margin-top: var(--space-lg); align-self: flex-start; }
.month-special__media { position: relative; overflow: hidden; border-radius: var(--radius-site); aspect-ratio: 4 / 5; background: rgba(253,250,246,.06); }
@media (min-width: 62rem) {
  .month-special { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); }
  .month-special__media { aspect-ratio: 1; }
}

/* --- Horizontale carousel: alleen nog op smalle schermen -------------- */
.carousel-nav { display: flex; gap: .5rem; }
.carousel-nav button {
  width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--color-border); background: transparent;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--color-espresso);
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out);
}
.carousel-nav button:hover { background: var(--color-espresso); color: #fff; border-color: var(--color-espresso); }
.carousel-track { display: flex; gap: var(--space-md); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; scrollbar-width: none; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; flex: none; }

/* --- Shop: producten groot, niet als kaartenmuur ---------------------- */
.shop-feature__intro { margin-bottom: var(--space-xl); }
.shop-feature__note { margin: var(--space-md) 0 0; color: var(--color-muted); font-size: var(--fs-small); max-width: 30ch; }
.seller-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--gutter); }
.seller-card { display: flex; flex-direction: column; background: none; border: 0; }
.seller-card__media {
  position: relative; aspect-ratio: 4 / 5; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-site); overflow: hidden; transition: transform .5s var(--ease-out);
}
.seller-card:hover .seller-card__media { transform: translateY(-6px); }
.seller-card__badge { position: absolute; top: var(--space-sm); left: var(--space-sm); z-index: 1; white-space: nowrap; }
/* De kaarten in het raster zijn even hoog, maar de prijsregel hing onder de
   naam. Een naam van twee regels duwde prijs en Bestel-knop dus 35 pixels
   lager dan bij de buren: acht knoppen op vier verschillende hoogtes. Met
   `flex: 1` vult de tekst de hele kaart en met `margin-top: auto` zakt de
   prijsregel altijd naar de onderrand. Nu staan ze op één lijn. */
.seller-card__body { padding: var(--space-md) 0 0; display: flex; flex-direction: column; gap: var(--space-3xs); flex: 1; }
.seller-card__name { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; color: var(--color-espresso-dark); margin: 0; }
.seller-card__variant { margin: 0; font-size: var(--fs-small); color: var(--color-muted); }
.seller-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; padding-top: var(--space-sm); border-top: 1px solid var(--color-border); }
.seller-card__price { font-family: var(--font-heading); font-weight: 500; font-size: 1.15rem; color: var(--color-espresso-dark); white-space: nowrap; }
.seller-card__buy {
  color: var(--color-espresso); text-decoration: none; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  /* Genoeg hoogte om met een duim te raken; de streep blijft de onderrand. */
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 0 2px;
  box-shadow: inset 0 -1px 0 currentColor;
}
.seller-card__buy:hover { color: var(--color-caramel); }
@media (min-width: 48rem) { .seller-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 62rem) { .shop-feature__intro { position: sticky; top: 9rem; align-self: start; margin-bottom: 0; } }

/* --- Winkels: genummerde index, geen kaartjes ------------------------- */
.location-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.location-row {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline;
  gap: var(--space-2xs) var(--space-md); padding: var(--space-lg) 0; border-bottom: 1px solid var(--color-border);
}
.location-row__index { font-family: var(--font-heading); font-size: var(--fs-small); color: var(--color-caramel); font-variant-numeric: tabular-nums; }
.location-row__name { font-family: var(--font-heading); font-size: var(--fs-h2); line-height: var(--leading-tight); font-weight: 500; color: var(--color-espresso-dark); margin: 0; }
.location-row__label { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-caramel); margin-bottom: var(--space-3xs); }
.location-row__address { display: flex; align-items: center; gap: .4rem; margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--fs-body); }
.location-row__link {
  grid-column: 2; justify-self: start; margin-top: var(--space-2xs); display: inline-flex; align-items: center; gap: .4rem;
  color: var(--color-espresso); text-decoration: none; font-size: var(--fs-label); font-weight: 700;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  min-height: 2.75rem; padding-bottom: 2px; box-shadow: inset 0 -1px 0 currentColor;
}
.location-row__link:hover { color: var(--color-caramel); }
.location-row--soon { color: var(--color-muted); }
.location-row--soon .location-row__name { color: var(--color-muted); font-style: italic; }
@media (min-width: 62rem) {
  .location-row { grid-template-columns: 3rem minmax(0, 22rem) 1fr auto; align-items: center; gap: var(--space-lg); padding: var(--space-xl) 0; }
  .location-row__body { display: contents; }
  .location-row__address { margin: 0; }
  .location-row__link { grid-column: auto; margin-top: 0; justify-self: end; }
}

/* --- Instagram: asymmetrisch mozaïek, geen rij postzegels ------------- */
.insta-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.insta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }
.insta-grid__item { aspect-ratio: 1; border-radius: var(--radius-site); overflow: hidden; }
@media (min-width: 48rem) {
  .insta-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: var(--space-sm); }
  /* Eerste tegel dubbel zo groot: breekt het rasterritme bewust. */
  .insta-grid__item:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
}

/* --- Menu-categorieën (homepage): 1 grote + 3 kleinere ---------------- */
.home-menu-card { position: relative; min-height: 14rem; border-radius: var(--radius-site); overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--space-md); color: #fff; text-decoration: none; }
.home-menu-card__label { position: relative; z-index: 1; font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 500; }
.home-menu-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,13,8,0) 40%, rgba(20,13,8,.7) 100%); z-index: 0; }
.home-menu-card__img { transition: transform .7s var(--ease-out); }
.home-menu-card:hover .home-menu-card__img { transform: scale(1.05); }

/* --- Cultuur / vacature: twee editorial splits, geen dubbele kaart ---- */
.culture-split { display: grid; grid-template-columns: 1fr; gap: var(--space-lg) var(--gutter); align-items: center; }
.culture-split + .culture-split { margin-top: var(--section-y); }
.culture-split__media { position: relative; overflow: hidden; border-radius: var(--radius-site); aspect-ratio: 4 / 3; background: var(--color-cream); }
.culture-split__title { font-family: var(--font-heading); font-size: var(--fs-h1); line-height: var(--leading-tight); font-weight: 500; color: var(--color-espresso-dark); margin: var(--space-sm) 0 0; }
.culture-split__title em { font-style: italic; color: var(--color-caramel); }
.culture-split__text { margin: var(--space-md) 0 0; color: var(--color-muted); font-size: var(--fs-lead); line-height: 1.65; max-width: 42ch; }
.culture-split__body .btn { margin-top: var(--space-lg); }
@media (min-width: 62rem) {
  .culture-split { grid-template-columns: repeat(12, 1fr); }
  .culture-split__media { grid-column: 1 / span 7; aspect-ratio: 16 / 11; }
  .culture-split__body { grid-column: 9 / span 4; }
  /* Tweede split spiegelt: tekst links, beeld rechts. */
  .culture-split--reverse .culture-split__media { grid-column: 6 / span 7; grid-row: 1; }
  .culture-split--reverse .culture-split__body { grid-column: 1 / span 4; grid-row: 1; }
}

/* Manifest (waarden): geen vier kaartjes, maar een genummerde verklaring
   met grote Romeinse cijfers en veel wit. */
.manifesto__head { max-width: 46rem; margin-bottom: var(--space-xl); }
.manifesto__list { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.manifesto__item {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  gap: var(--space-sm) var(--space-md);
  padding: var(--space-md) 0; border-top: 1px solid var(--color-border);
}
.manifesto__item:last-child { border-bottom: 1px solid var(--color-border); }
.manifesto__numeral {
  font-family: var(--font-heading); font-style: italic; font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 4rem); line-height: .9; color: var(--color-caramel);
  min-width: 2.5ch;
}
.manifesto__title { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 500; color: var(--color-espresso-dark); margin: 0; }
.manifesto__text { margin: var(--space-2xs) 0 0; color: var(--color-muted); font-size: var(--fs-body); line-height: 1.65; max-width: 46ch; }
@media (min-width: 62rem) {
  .manifesto__item { grid-template-columns: 6rem 22rem 1fr; align-items: baseline; gap: var(--space-lg); padding: var(--space-lg) 0; }
  .manifesto__body { display: contents; }
  .manifesto__text { margin-top: 0; }
}

/* Grote gelato-sectie: donker, asymmetrisch, typografie draagt het blok. */
.gelato-feature__title { margin: var(--space-sm) 0 0; }
.gelato-feature__text { margin: var(--space-md) 0 0; max-width: 34ch; }
.gelato-feature__cta { margin-top: var(--space-lg); }
.flavor-strip { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(253,250,246,.16); }
.flavor-strip__item {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: .3rem .85rem;
  padding: var(--space-sm) 0; border-bottom: 1px solid rgba(253,250,246,.16);
  text-decoration: none; transition: padding-left .25s var(--ease-out);
}
.flavor-strip__item:hover { padding-left: var(--space-sm); }
.flavor-strip__dot { width: .6rem; height: .6rem; border-radius: 50%; }
.flavor-strip__name { font-family: var(--font-heading); font-size: var(--fs-h3); font-weight: 500; color: #fff; }
.flavor-strip__sub { grid-column: 2; font-size: var(--fs-small); color: rgba(253,250,246,.6); }
@media (min-width: 62rem) {
  .flavor-strip__item { grid-template-columns: auto 1fr auto; }
  .flavor-strip__sub { grid-column: auto; text-align: right; }
  .gelato-feature__intro { position: sticky; top: 8rem; align-self: start; }
}

/* Sectie-inleiding en -afsluiting (links uitgelijnd, niet alles gecentreerd). */
.section-intro { max-width: 40rem; margin-bottom: var(--space-xl); }
.section-outro { margin: var(--space-xl) 0 0; }

/* Milkshake-selector */
.milkshake-cta { max-width: 32rem; margin: 0 auto; border-radius: var(--radius-site); overflow: hidden; position: relative; min-height: 22rem; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.75rem; color: #fff; }
.milkshake-cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,13,8,.85) 10%, rgba(20,13,8,.15) 100%); z-index: 0; }
.milkshake-cta > * { position: relative; z-index: 1; }
.milkshake-cta .badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; }
.milkshake-cta h3 { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; margin: 0; }
.milkshake-cta p { margin: .5rem 0 0; opacity: .85; }
.milkshake-cta .btn { margin-top: 1.25rem; align-self: flex-start; }

.milkshake-selector { display: none; }
.milkshake-selector.is-open { display: grid; }
.milkshake-selector { grid-template-columns: 1fr; gap: 2rem; }
.milkshake-preview { position: relative; border-radius: var(--radius-site); overflow: hidden; min-height: 18rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 1.75rem; color: #fff; background-color: var(--color-caramel); transition: background-color .3s ease; }
.milkshake-preview::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,13,8,.72) 25%, rgba(20,13,8,.15) 100%); }
.milkshake-preview > * { position: relative; z-index: 1; }
.milkshake-preview__badge { position: absolute; top: 1rem; left: 1rem; z-index: 1; }
.milkshake-preview__icon { position: absolute; right: 1.25rem; bottom: 1.25rem; z-index: 1; width: 3rem; height: 3rem; opacity: .4; color: #fff; }
.milkshake-preview h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin: 0; }
.milkshake-preview p { margin: .5rem 0 0; opacity: .85; max-width: 20rem; }
.milkshake-preview .btn { margin-top: 1.25rem; align-self: flex-start; }
.milkshake-picker { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; max-height: 26rem; overflow-y: auto; padding-right: .25rem; }
.milkshake-picker button {
  display: flex; align-items: center; gap: .6rem; padding: .7rem .9rem; border-radius: 12px; border: 1px solid var(--color-border);
  background: var(--color-background); cursor: pointer; text-align: left; font: inherit; font-size: .85rem; color: var(--color-text);
}
.milkshake-picker button .dot { width: .65rem; height: .65rem; border-radius: 50%; flex: none; }
.milkshake-picker button.is-active { border-color: var(--color-caramel); background: var(--color-surface); font-weight: 600; }
.milkshake-back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-muted); background: none; border: 0; cursor: pointer; }
@media (min-width: 55rem) { .milkshake-selector { grid-template-columns: 1.1fr 1fr; align-items: start; } }

/* =====================================================================
   Echte foto's. Elk blok hieronder hoort bij een <img> die door
   app/images.php wordt geplaatst; staat de foto er (nog) niet, dan valt
   het blok terug op de merkkleurige tegel en gelden deze regels niet.
   ===================================================================== */
.og-hero__img,
.menu-hero__img,
.home-menu-card__img,
.culture-card__img,
.month-special__img,
.feature-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; z-index: 0;
}
.og-hero, .menu-hero, .home-menu-card, .culture-card, .feature-card { position: relative; overflow: hidden; }
.month-special__media { position: relative; overflow: hidden; }

/* Zachte inzoom bij hover op klikbare kaarten. */
.home-menu-card__img, .feature-card__img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.home-menu-card:hover .home-menu-card__img,
.feature-card:hover .feature-card__img { transform: scale(1.05); }

/* De bol ijs op een smaakkaart: product-shot, dus niet bijsnijden. */
.flavor-card__photo { width: 62%; height: auto; object-fit: contain; }
.flavor-card:hover .flavor-card__photo { transform: scale(1.08); }
.flavor-card__photo { transition: transform .35s ease; }

/* 1L-pot in de best sellers. */
.seller-card__img { width: 84%; height: 84%; object-fit: contain; margin: auto; }
.seller-card__media { display: flex; align-items: center; justify-content: center; }

.insta-grid__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.insta-grid__item { overflow: hidden; }
.insta-grid__item:hover .insta-grid__img { transform: scale(1.06); }

.site-header__logo-img { max-height: 2.4rem; width: auto; }

/* Product-/smaakdetail: dialoogvenster (desktop) / bottom sheet (mobiel) */
.product-dialog {
  position: fixed; top: auto; bottom: 0; left: 0; right: 0; margin: 0; padding: 0; border: 0; z-index: 100;
  width: 100%; max-width: 100%; max-height: 88vh;
  background: var(--color-background); color: var(--color-text);
  border-radius: 20px 20px 0 0; overflow: hidden; overflow-y: auto;
  animation: product-dialog-in .25s ease;
}
.product-dialog::backdrop { background: rgba(20, 13, 8, .55); backdrop-filter: blur(2px); animation: product-dialog-backdrop-in .25s ease; }
@keyframes product-dialog-in { from { transform: translateY(2rem); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes product-dialog-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
.product-dialog__close {
  position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: rgba(253, 250, 246, .85); color: var(--color-espresso);
}
.product-dialog__media { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; background: var(--color-caramel); color: rgba(255,255,255,.5); transition: background-color .2s ease; }
.product-dialog__media svg { width: 30%; }
.product-dialog__body { padding: 1.75rem; }
.product-dialog__title { font-family: var(--font-heading); font-size: 1.6rem; font-weight: 600; color: var(--color-espresso-dark); margin: .5rem 0 0; }
.product-dialog__meta { margin: .35rem 0 0; font-size: .85rem; color: var(--color-muted); }
.product-dialog__desc { margin: 1rem 0 1.5rem; line-height: 1.65; color: var(--color-muted); }
@media (min-width: 40rem) {
  .product-dialog { position: fixed; top: 50%; left: 50%; right: auto; bottom: auto; transform: translate(-50%, -50%); margin: 0; width: min(34rem, calc(100% - 3rem)); border-radius: 22px; max-height: 85vh; }
  @keyframes product-dialog-in { from { transform: translate(-50%, -46%); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
}
[data-detail-trigger] { cursor: pointer; }

/* Gift Cards */
.giftcard-layout { display: grid; gap: 2.5rem; grid-template-columns: 1fr; align-items: center; max-width: 56rem; margin: 0 auto; }
.giftcard-visual { position: relative; aspect-ratio: 16/10; border-radius: 20px; display: flex; flex-direction: column; justify-content: space-between; padding: 1.75rem; color: #fff; }
.giftcard-visual__brand { font-family: var(--font-heading); font-style: italic; font-size: 1.6rem; font-weight: 600; }
.giftcard-visual__label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; opacity: .85; }
.giftcard-info__intro { color: var(--color-muted); line-height: 1.65; margin: 0 0 1.5rem; }
.giftcard-amounts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.75rem; }
.giftcard-amount { padding: .7rem 1.4rem; border-radius: var(--radius-button); border: 1px solid var(--color-border); background: var(--color-background); font: inherit; font-weight: 600; cursor: pointer; }
.giftcard-amount.is-active { background: var(--color-espresso); border-color: var(--color-espresso); color: #fff; }
.giftcard-note { margin: 1.25rem 0 0; font-size: .88rem; color: var(--color-muted); }
@media (min-width: 48rem) { .giftcard-layout { grid-template-columns: 1.1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}