/* ==========================================================================
   Frezzo, main.css
   Romige basis met Anton als display en Gabarito als tekst. Anton sluit
   aan bij het blokkige woordmerk; Gabarito houdt zich eronder rustig,
   zodat de koppen en de kleurvlakken het werk doen.
   Alleen wit, roze en oranje: geen bruin, geen grijs. De donkere kleur
   is diep bessenroze, zodat ook de zware vlakken in het palet blijven.
   --------------------------------------------------------------------------
   0. Tokens          5. Buttons          9. Smakenkaart    14. FAQ
   1. Reset & base    6. Sectiekop       10. Kaarten        15. Formulieren
   2. Layout          7. Hero            11. Prijzen        16. Footer
   3. Header / nav    8. Beeld / ph      12. Locaties       17. Minder beweging
   4. Typografie                                            18. Responsive
   ========================================================================== */

/* 0. FONTS ──────────────────────────────────────────────────────────────── */
/* Zelf gehost in plaats van via Google Fonts: geen twee extra servers voor
   de eerste tekst. Alleen de Latijnse set (met é, ë en €) en alleen de
   gewichten die de site gebruikt. Gabarito is variabel: één bestand voor
   400 t/m 700. head.php preloadt Anton en Gabarito.
   Gabarito heeft een lagere x-hoogte (0,488 em) dan Poppins had (0,548 em);
   size-adjust trekt dat recht, zodat de bestaande fontgroottes blijven kloppen. */
@font-face { font-family: 'Anton';    font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/anton-400.woff2') format('woff2'); }
@font-face { font-family: 'Gabarito'; font-style: normal; font-weight: 400 700; font-display: swap; size-adjust: 112.3%; src: url('../fonts/gabarito.woff2') format('woff2'); }

/* Arial op de maat van Anton en Gabarito, voor de paar honderd ms tot het
   echte font er is. Zo verspringt de tekst niet als het font binnenkomt.
   Gemeten met fontTools op Nederlandse tekst (Anton in hoofdletters). */
@font-face {
    font-family: 'Anton fallback'; src: local('Arial');
    size-adjust: 70.91%; ascent-override: 165.88%; descent-override: 46.41%; line-gap-override: 0%;
}
@font-face {
    font-family: 'Gabarito fallback'; font-weight: 400; src: local('Arial');
    size-adjust: 111.27%; ascent-override: 94.87%; descent-override: 26.24%; line-gap-override: 0%;
}
@font-face {
    font-family: 'Gabarito fallback'; font-weight: 600 700; src: local('Arial Bold'), local('Arial-BoldMT');
    size-adjust: 105.76%; ascent-override: 99.81%; descent-override: 27.61%; line-gap-override: 0%;
}

/* 0. TOKENS ─────────────────────────────────────────────────────────────── */
:root {
    --pink:       #e6007e;
    --pink-2:     #c00069;   /* hover op roze                        */
    --pink-tint:  rgba(230, 0, 126, .10);
    --orange:     #e84522;
    --orange-2:   #c8360f;
    /* Lichtere roze en oranje, alleen voor tekst op donker (de smakenband). */
    --pink-lt:    #ff4fae;
    --orange-lt:  #ff8a5c;

    /* Vier lichte grondtonen, als de bakken in de vitrine. Ze wisselen
       elkaar per sectie af, zodat de pagina kleur houdt zonder dat er
       een tweede felle kleur bij moet. */
    --white:      #ffffff;   /* room                                 */
    --cream:      #fff8f0;   /* vanille, de paginabodem              */
    --blush:      #ffe9f3;   /* aardbei                              */
    --peach:      #ffe9de;   /* mango                                */

    /* De donkere kleur is diep bessenroze, geen bruin. */
    --ink:        #4a0430;
    --ink-2:      #33001f;

    --text:       #4a0430;
    --muted:      rgba(74, 4, 48, .68);
    --muted-2:    rgba(74, 4, 48, .48);
    --line:       rgba(74, 4, 48, .14);
    --line-soft:  rgba(74, 4, 48, .07);

    /* Merkgradient: oranje gloed over roze. --grad-hero is het rustigst,
       --grad-cta het felst, zodat de afsluiter het meeste trekt. */
    --grad-hero:  radial-gradient(95% 130% at 88% 12%, var(--orange), transparent 58%), var(--pink);
    --grad-band:  radial-gradient(110% 150% at 0% 100%, var(--orange), transparent 60%), var(--pink);
    --grad-cta:   radial-gradient(120% 160% at 100% 0%, var(--orange), transparent 62%), var(--pink);
    --grad-card:  radial-gradient(130% 150% at 110% 0%, var(--orange), transparent 70%), var(--pink);
    --grad-berry: linear-gradient(150deg, #8a0a54 0%, var(--ink) 100%);
    /* Food op locatie: het spiegelbeeld van --grad-card, roze gloed over
       oranje. Zo zijn ijs en food in één oogopslag uit elkaar te houden. */
    --grad-food:  radial-gradient(90% 120% at 110% 0%, rgba(230, 0, 126, .6), transparent 66%), var(--orange);

    --font-display: 'Anton', 'Anton fallback', sans-serif;
    --font-text:    'Gabarito', 'Gabarito fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --shell:      1520px;
    --gutter:     clamp(1.25rem, 5vw, 4.5rem);
    --section:    clamp(4.5rem, 9vw, 8rem);

    /* Bewust strak: knoppen, labels en kaarten hebben een lichte ronding,
       geen pilvorm. Alleen iconen en bolletjes blijven rond. */
    --radius-sm:  6px;
    --radius:     8px;
    --radius-lg:  12px;

    --ease:       cubic-bezier(.22, 1, .36, 1);
    --ease-pop:   cubic-bezier(.34, 1.56, .64, 1);

    --header-h:   72px;
    --demobar-h:  0px;
}

/* 1. RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    font-family: var(--font-text);
    /* Anton bestaat alleen in één gewicht en heeft geen cursief. Zonder
       dit tekent de browser die zelf na, en dan worden de letters vet
       uitgesmeerd of scheefgetrokken. */
    font-synthesis: none;
    background: var(--cream);
    color: var(--text);
    font-size: 1rem;
    line-height: 1.68;
    letter-spacing: -0.005em;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
/* Mobiele browsers negeren overflow-x op body voor de viewport: iets dat
   uitsteekt (zoals de schuine smakenband) maakt de pagina dan toch breder
   dan het scherm. Clip op main houdt het binnen, en laat sticky heel. */
main { overflow-x: clip; }

/* Auteur-display (grid/flex) wint anders van [hidden] uit de UA-stylesheet. */
[hidden] { display: none !important; }

img, svg, video { display: block; max-width: 100%; }
.ico { flex: none; }
a { color: inherit; text-decoration: none; }
a[href^="tel:"] { white-space: nowrap; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
::selection { background: var(--pink); color: #fff; }

:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }

.skip-link {
    position: fixed; top: -60px; left: 1rem; z-index: 300;
    background: var(--pink); color: #fff;
    padding: .7rem 1.2rem; border-radius: var(--radius-sm); font-weight: 700;
    transition: top .25s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* Demobalk, alleen zichtbaar zolang DEMO aanstaat in config.php */
.has-demobar { --demobar-h: 40px; }
.demobar {
    position: fixed; inset: 0 0 auto 0; z-index: 150;
    min-height: var(--demobar-h);
    background: var(--ink); color: rgba(255, 255, 255, .78);
    font-size: .78rem;
}
.demobar__inner { display: flex; align-items: center; gap: .9rem; min-height: var(--demobar-h); padding-block: .35rem; }
.demobar__tag {
    flex: none;
    background: var(--pink); color: #fff;
    font-weight: 700; font-size: .64rem; letter-spacing: .18em; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: var(--radius-sm);
}
.demobar p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demobar a { flex: none; color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 2. LAYOUT ─────────────────────────────────────────────────────────────── */
.shell {
    width: 100%; max-width: var(--shell);
    margin-inline: auto; padding-inline: var(--gutter);
}
.shell--narrow { max-width: 760px; }
.shell--mid    { max-width: 1120px; }

.section { padding-block: var(--section); }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }

/* Wit vlak, tilt een sectie op zodat een lange romige reeks niet dichtloopt. */
.section--raised { background: var(--white); }
/* Pasteltinten van dezelfde twee kleuren, voor ritme tussen de felle banen. */
.section--blush { background: var(--blush); }
.section--peach { background: var(--peach); }
/* Volle merkbaan. Zelfde gradient als de hero, gespiegeld. */
.section--brand { background: var(--grad-band); color: #fff; }
.section--brand .lede { color: rgba(255, 255, 255, .86); }
/* Op de gekleurde baan zijn de bruine randen en tekst onleesbaar. */
.section--brand .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.section--brand .btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
.section--brand .btn--ghost { color: #fff; }
/* Dezelfde volle baan in de foodkleur, voor food op locatie. */
.section--food { background: var(--grad-food); }
.section--food .btn--white { color: var(--orange); }

/* Ankersprongen vrijhouden van de vaste header. */
:where(main, section, h2, h3, .loc)[id] { scroll-margin-top: calc(var(--header-h) + var(--demobar-h) + 20px); }

/* 3. HEADER / NAV ───────────────────────────────────────────────────────── */
.masthead {
    position: fixed; inset: var(--demobar-h) 0 auto 0; z-index: 100;
    border-bottom: 1px solid transparent;
    transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.masthead.is-stuck {
    background: rgba(255, 248, 240, .92);
    backdrop-filter: blur(14px) saturate(1.15);
    -webkit-backdrop-filter: blur(14px) saturate(1.15);
    border-bottom-color: var(--line-soft);
}
.masthead__inner { display: flex; align-items: center; gap: 1.6rem; height: var(--header-h); }

.brand { display: flex; align-items: baseline; gap: .45rem; }
.brand__mark {
    display: block; color: var(--pink);
    transition: color .3s var(--ease);
}
.brand__mark svg { display: block; width: auto; height: 1.6rem; }
.brand__sub {
    font-size: .66rem; font-weight: 700; letter-spacing: .24em;
    text-transform: uppercase; color: var(--muted-2);
}

.nav { display: flex; align-items: center; gap: .1rem; margin-left: auto; }
.nav__link {
    position: relative; white-space: nowrap;
    font-size: .94rem; font-weight: 600;
    color: var(--muted); padding: .6rem .75rem;
    transition: color .3s var(--ease);
}
.nav__link::after {
    content: ''; position: absolute; left: .75rem; right: .75rem; bottom: .3rem;
    height: 2px; background: var(--pink); border-radius: 2px;
    transform: scaleX(0); transform-origin: left;
    transition: transform .35s var(--ease);
}
.nav__link:hover, .nav__link.is-active { color: var(--text); }
.nav__link.is-active::after { transform: scaleX(1); }

.masthead__cta { margin-left: .4rem; }

/* Boven de roze hero staat de header op een gekleurd vlak: daar moet alles
   wit worden. Zodra hij vastplakt (.is-stuck) krijgt hij zijn romige
   achtergrond terug en gelden de gewone kleuren weer. */
.on-hero .masthead:not(.is-stuck) .brand__mark { color: #fff; }
.on-hero .masthead:not(.is-stuck) .brand__sub  { color: rgba(255, 255, 255, .6); }
.on-hero .masthead:not(.is-stuck) .nav__link   { color: rgba(255, 255, 255, .78); }
.on-hero .masthead:not(.is-stuck) .nav__link:hover,
.on-hero .masthead:not(.is-stuck) .nav__link.is-active { color: #fff; }
.on-hero .masthead:not(.is-stuck) .nav__link::after { background: #fff; }
.on-hero .masthead:not(.is-stuck) .masthead__cta { background: var(--ink); color: #fff; }
.on-hero .masthead:not(.is-stuck) .masthead__cta:hover { background: var(--ink-2); }
.on-hero .masthead:not(.is-stuck) .burger span { background: #fff; }

/* Dropdowns (Aanbod, Locaties) */
.nav__item { position: relative; display: flex; align-items: center; }
.nav__item--menu > .nav__link { display: inline-flex; align-items: center; gap: .35rem; }
.nav__chev { transition: transform .3s var(--ease); }
.nav__item--menu:hover .nav__chev,
.nav__item--menu:focus-within .nav__chev { transform: rotate(180deg); }
.nav__menu {
    position: absolute; top: 100%; left: -.4rem;
    min-width: 280px; padding: .6rem;
    background: var(--white); border-radius: var(--radius-lg);
    box-shadow: 0 14px 36px rgba(74, 4, 48, .14);
    display: grid; gap: .1rem;
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    z-index: 60;
}
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__menu-link { display: grid; gap: .15rem; padding: .7rem .85rem; border-radius: var(--radius); transition: background .25s var(--ease); }
.nav__menu-link:hover { background: var(--cream); }
.nav__menu-title { font-size: .95rem; font-weight: 700; }
.nav__menu-sub { font-size: .84rem; color: var(--muted); }
.nav__menu-link:hover .nav__menu-title { color: var(--pink); }
.nav__menu-all {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .85rem; margin-top: .2rem;
    font-size: .88rem; font-weight: 700; color: var(--pink);
    border-top: 1px solid var(--line-soft);
}
.nav__menu-all svg { transition: transform .3s var(--ease); }
.nav__menu-all:hover svg { transform: translateX(3px); }

/* Menu met groepen naast elkaar (IJs | Food). Gecentreerd onder het item,
   zodat de brede variant niet buiten beeld valt. Food krijgt de tweede
   kleur, net als op de pagina's zelf. */
.nav__menu--cols {
    grid-template-columns: repeat(2, minmax(250px, 1fr)); gap: .1rem .6rem;
    min-width: 560px; left: 50%; translate: -50% 0;
}
.nav__menu--cols .nav__menu-all { grid-column: 1 / -1; }
.nav__group { display: grid; gap: .1rem; align-content: start; }
.nav__group-title {
    display: inline-flex; align-items: center; gap: .4rem; justify-self: start;
    padding: .7rem .85rem .3rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--pink); transition: color .25s var(--ease);
}
.nav__group-title svg { transition: transform .3s var(--ease); }
a.nav__group-title:hover svg { transform: translateX(3px); }
.nav__menu--cols .nav__group + .nav__group .nav__group-title { color: var(--orange); }

/* Burger: drie streepjes, de onderste korter. Bij openen schuiven ze eerst
   naar het midden en draaien dan pas tot een kruis; bij sluiten andersom.
   Dat volgordeverschil zit in de losse translate/rotate-transities. */
.burger { display: none; width: 44px; height: 44px; margin-left: auto; margin-right: -8px; position: relative; }
.burger span {
    position: absolute; left: 11px; right: 11px; top: 21px; height: 2px; border-radius: 2px;
    background: var(--text);
    transition: rotate .3s var(--ease), translate .3s var(--ease) .18s,
                opacity .2s .18s, right .35s var(--ease), background .3s;
}
.burger span:nth-child(1) { translate: 0 -7px; }
.burger span:nth-child(3) { translate: 0 7px; right: 19px; }
/* Alleen met een echte muis: op een telefoon blijft :hover na een tik
   hangen, en dan is de korte streep na het sluiten ineens volle breedte. */
@media (hover: hover) and (pointer: fine) {
    .burger:hover span:nth-child(3) { right: 11px; }
}

.burger[aria-expanded="true"] span {
    translate: 0 0;
    transition: translate .25s var(--ease), rotate .5s var(--ease-pop) .2s,
                opacity .15s, right .3s var(--ease), background .3s;
}
.burger[aria-expanded="true"] span:nth-child(1) { rotate: 45deg; }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { rotate: -45deg; right: 11px; }

/* Zolang het menu open is ligt de header bovenop het roze vlak, zonder eigen
   achtergrond, en worden logo en burger wit. */
.menu-open .masthead { z-index: 210; }
.menu-open .masthead.is-stuck { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.menu-open .masthead .brand__mark { color: #fff; }
.menu-open .masthead .burger span { background: #fff; }

/* Mobiel menu: schermvullend roze, groeit als cirkel uit de burger. */
.drawer {
    --origin: calc(100% - var(--gutter) - 14px) calc(var(--demobar-h) + var(--header-h) / 2);
    position: fixed; inset: 0; z-index: 200;
    background: var(--grad-hero);
    color: #fff;
    overflow-y: auto; overscroll-behavior: contain;
    padding: calc(var(--demobar-h) + var(--header-h) + 1.2rem) var(--gutter) 2.5rem;
    clip-path: circle(0 at var(--origin));
    visibility: hidden;
    transition: clip-path .55s cubic-bezier(.65, 0, .35, 1), visibility 0s .55s;
}
.drawer.is-open {
    clip-path: circle(150% at var(--origin));
    visibility: visible;
    transition: clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
/* Volle breedte, zodat de pijltjes op één lijn staan met het kruisje. */
.drawer__nav { display: flex; flex-direction: column; }

/* Elk item schuift na het vorige omhoog, zonder doorveren; --i zet main.js.
   Bij sluiten verdwijnt alles tegelijk en snel, dan krimpt de cirkel
   eroverheen. */
.drawer__nav > * {
    opacity: 0; translate: 0 28px;
    transition: opacity .2s var(--ease), translate .2s var(--ease);
}
.drawer.is-open .drawer__nav > * {
    opacity: 1; translate: 0 0;
    transition: opacity .45s var(--ease) calc(.22s + var(--i, 0) * 55ms),
                translate .6s var(--ease) calc(.22s + var(--i, 0) * 55ms);
}

.drawer__link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.05rem 0;
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 8vw, 2.5rem);
    line-height: 1.05; text-transform: uppercase; letter-spacing: .01em;
    border-bottom: 1px solid rgba(255, 255, 255, .22);
}
/* Geen verschuiving bij hover: op een telefoon blijft die na een tik staan. */

/* Uitklapbaar item: de kop is een knop met een pijltje dat omdraait.
   Het paneel groeit via grid-rows, zodat de hoogte niet vooraf bekend
   hoeft te zijn. De streep loopt onder het paneel door. */
.drawer__item { border-bottom: 1px solid rgba(255, 255, 255, .22); }
.drawer__item > .drawer__link { border-bottom: 0; }
.drawer__toggle { width: 100%; text-align: left; color: #fff; }
/* Even breed als het kruisje (17px getekend, 2px lijn) en met hetzelfde
   midden: 14px van de rand, net als de burger met zijn -8px marge. */
.drawer__chev { flex: none; margin-right: -3px; color: rgba(255, 255, 255, .7); transition: rotate .35s var(--ease), color .25s; }
.drawer__toggle:hover .drawer__chev { color: #fff; }
.drawer__toggle[aria-expanded="true"] .drawer__chev { rotate: 180deg; }
.drawer__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.drawer__toggle[aria-expanded="true"] + .drawer__panel { grid-template-rows: 1fr; }
/* Geen padding op het paneel zelf: die blijft ook dichtgeklapt zichtbaar.
   De marge van het laatste kind valt binnen de overflow en klapt mee in. */
.drawer__panel > div { overflow: hidden; min-height: 0; }
.drawer__panel-in > :last-child { margin-bottom: 1.2rem; }

.drawer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.drawer__col, .drawer__list { display: grid; align-content: start; }
.drawer__col-title {
    justify-self: start; padding-bottom: .3rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: rgba(255, 255, 255, .85); transition: color .25s;
}
a.drawer__col-title:hover { color: #fff; }
.drawer__sublink {
    padding: .55rem 0;
    color: rgba(255, 255, 255, .9); font-weight: 600; line-height: 1.35;
    transition: color .25s;
}
.drawer__sublink:hover { color: #fff; }
.drawer__all {
    display: inline-block; margin-top: .7rem;
    font-size: .84rem; font-weight: 700; color: #fff;
    text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 4px;
    transition: text-decoration-color .25s;
}
.drawer__all:hover { text-decoration-color: #fff; }
.drawer__cta { margin-top: 2rem; }

/* 4. TYPOGRAFIE ─────────────────────────────────────────────────────────── */
.display {
    font-family: var(--font-display);
    font-weight: 400; line-height: 1.04;
    letter-spacing: .015em; text-transform: uppercase;
    text-wrap: balance;
}
/* Hoe groter de kop, hoe minder extra letterafstand hij nodig heeft. */
.display--xl { font-size: clamp(3rem, 8.4vw, 6.4rem); line-height: 1.03; letter-spacing: .008em; }
.display--lg { font-size: clamp(2.2rem, 5vw, 4rem);    line-height: 1.03; letter-spacing: .014em; }
.display--md { font-size: clamp(1.8rem, 3.4vw, 2.7rem); line-height: 1.06; letter-spacing: .02em; }
/* Anton kent geen cursief, nadruk zit in de kleur. */
.display em, .accent { font-style: normal; color: var(--pink); }
.section--brand .display em, .hero .display em { color: var(--ink); }

/* Kleine kop voor een blok zonder grote kop (prijzen, zijkaarten). Geen
   eyebrows boven grote koppen: de kop zegt het zelf. */
.subhead { font-size: 1rem; font-weight: 700; line-height: 1.3; color: var(--text); }

.lede {
    font-size: clamp(1.02rem, 1.5vw, 1.2rem);
    line-height: 1.7; color: var(--muted);
    max-width: 48ch;
}
.muted { color: var(--muted); }
.link, .prose a { color: var(--pink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; transition: color .3s var(--ease); }
.link:hover, .prose a:hover { color: var(--orange); }
.prose > :first-child { margin-top: 0; }
.prose p { color: var(--muted); }
.prose p + p { margin-top: 1.1rem; }
.prose h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.1; letter-spacing: .022em; text-transform: uppercase; margin: 3rem 0 1.1rem; }
.prose h3 { font-size: 1.15rem; font-weight: 700; margin: 2.2rem 0 .6rem; }
.prose ul { margin: 1rem 0 1rem 1.2rem; }
.prose li { color: var(--muted); list-style: disc; margin-bottom: .4rem; }

/* 5. BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .55rem;
    font-size: .82rem; font-weight: 700; letter-spacing: .03em;
    padding: .85rem 1.5rem; border-radius: var(--radius-sm);
    white-space: nowrap;
    transition: transform .25s var(--ease), color .3s var(--ease), background .3s var(--ease), border-color .3s;
}
.btn svg { width: 16px; height: 16px; }

.btn--solid { background: var(--pink); color: #fff; }
.btn--solid:hover { background: var(--pink-2); }
.btn--ink   { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-2); }
.btn--line  { border: 2px solid var(--line); color: var(--text); padding-block: calc(.85rem - 2px); }
.btn--line:hover { border-color: var(--text); }
.btn--white { background: #fff; color: var(--orange); }
.btn--white:hover { background: var(--cream); }

.btn--solid:hover, .btn--line:hover, .btn--ink:hover, .btn--white:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .08s; }

.btn--ghost { color: var(--pink); padding-inline: .4rem; }
.btn--ghost:hover { color: var(--orange); }
.btn--block { width: 100%; justify-content: center; }
.btn--lg { padding: 1.05rem 2rem; font-size: .88rem; }
.btn--line.btn--lg { padding-block: calc(1.05rem - 2px); }

.actions { display: flex; flex-wrap: wrap; gap: .9rem; align-items: center; }

/* 6. SECTIEKOP ──────────────────────────────────────────────────────────── */
.s-head { max-width: 640px; }
.s-head .display { margin-bottom: 1.5rem; }
.s-head--split { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2rem; max-width: none; }
.s-head--center { max-width: 700px; margin-inline: auto; text-align: center; }
.s-head--center .lede { margin-inline: auto; }

/* 7. HERO ───────────────────────────────────────────────────────────────── */
.hero {
    position: relative;
    background: var(--grad-hero);
    color: #fff;
    padding-top: calc(var(--header-h) + var(--demobar-h) + clamp(3rem, 8vh, 5.5rem));
    padding-bottom: clamp(3.5rem, 8vh, 6rem);
    overflow: hidden; isolation: isolate;
}

.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero__title { color: #fff; margin-bottom: 1.8rem; }
.hero__lede { color: rgba(255, 255, 255, .88); font-size: clamp(1.05rem, 1.6vw, 1.24rem); margin-bottom: 2rem; max-width: 40ch; }
.hero .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.hero .btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
/* Recht kader, één ronding: het beeld hoeft niet mee te doen aan de
   vorm, de kleur en de kop dragen de hero al. Vierkant, zodat het hele
   bakje met wafel in beeld staat (de foto is staand). */
.hero__media {
    position: relative; aspect-ratio: 1 / 1;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .12);
    box-shadow: 0 26px 60px rgba(74, 4, 48, .22);
}
.hero__media > * { border-radius: inherit; overflow: hidden; }
.hero__media img, .hero__media .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

.hero__meta {
    display: flex; flex-wrap: wrap; gap: .9rem 2rem; align-items: center;
    margin-top: 2.4rem; padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .8); font-size: .88rem;
}
.hero__meta strong { color: #fff; font-weight: 700; }

/* Statusbadge: "vandaag open" met een gekleurd bolletje. Het staat stil:
   de status verandert niet terwijl je kijkt, dus hoeft hij niet te kloppen. */
.badge {
    display: inline-flex; align-items: center; gap: .55rem;
    background: rgba(255, 255, 255, .18); color: #fff;
    padding: .45rem 1rem; border-radius: var(--radius-sm);
    font-size: .8rem; font-weight: 700;
}
.badge::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7fff9c; }
.badge--closed::before { background: #ffd27f; }
/* Compacte variant voor op een lichte kaart. */
.badge--sm {
    background: var(--pink-tint); color: var(--pink);
    padding: .3rem .75rem; font-size: .72rem; margin-bottom: .9rem;
}
.badge--sm.badge--closed { background: rgba(232, 69, 34, .12); color: var(--orange); }

/* Kop van een binnenpagina */
.phero {
    padding-top: calc(var(--header-h) + var(--demobar-h) + clamp(2.5rem, 6vw, 4.5rem));
    padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
/* De kop van een binnenpagina. Hier stond tien keer dezelfde inline marge,
   waardoor de ruimte per pagina uit de pas ging lopen. */
.phero__title { margin: 0 0 1.6rem; }
/* Het kruimelpad staat in de HTML (schermlezers) en als BreadcrumbList in de
   JSON-LD (Google), maar niet in beeld: boven de kop was het alleen ruis. */
.breadcrumbs {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* 8. BEELD / PLACEHOLDER ────────────────────────────────────────────────── */
.media { position: relative; overflow: hidden; background: var(--white); border-radius: var(--radius-lg); }
.media > img, .media > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--4x3  { aspect-ratio: 4 / 3; }
.media--3x2  { aspect-ratio: 3 / 2; }
.media--1x1  { aspect-ratio: 1 / 1; }
.media--16x9 { aspect-ratio: 16 / 9; }
/* Staande foto in een liggend vak: het onderwerp zit onderin, niet in het midden. */
.img-low { object-position: 50% 78%; }

/* Nette terugval zolang de foto's van Frezzo nog niet binnen zijn. */
.ph {
    display: grid; place-items: center; width: 100%; height: 100%;
    position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(74, 4, 48, .035) 0 2px, transparent 2px 10px),
        linear-gradient(150deg, var(--blush) 0%, var(--peach) 100%);
    color: rgba(74, 4, 48, .2);
}
.ph__mark {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem);
    letter-spacing: .08em; color: rgba(74, 4, 48, .16);
}
.ph__label {
    position: absolute; bottom: 1rem; left: 0; right: 0; text-align: center;
    font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
    color: rgba(74, 4, 48, .34);
}
.ph__brief {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center; gap: .45rem;
    max-width: min(36ch, 84%); text-align: center;
    font-size: .88rem; line-height: 1.5; color: rgba(74, 4, 48, .6);
    padding: 1rem 1.2rem;
    border: 2px dashed rgba(74, 4, 48, .16); border-radius: var(--radius);
    background: rgba(255, 255, 255, .5);
}
.ph__brief-k { font-size: .62rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
/* Het merkteken zou over de briefing vallen, dus stapt hij opzij. */
.ph:has(.ph__brief) .ph__mark { position: absolute; top: .8rem; left: 1rem; font-size: 1.1rem; }
@media (max-width: 640px) { .ph__brief { font-size: .78rem; padding: .7rem .9rem; } }

/* 9. SMAKENKAART ────────────────────────────────────────────────────────── */
/* Chip: dient als sprongknop bovenaan een pagina én als filterknop boven
   de kaart. Dezelfde vorm, zodat de twee rijen bij elkaar horen. */
.chip {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1.05rem; border-radius: var(--radius-sm);
    background: var(--white); border: 1px solid var(--line);
    font-size: .84rem; font-weight: 700; color: var(--text);
    transition: background .25s, border-color .25s, color .25s;
}
.chip:hover { border-color: var(--pink); color: var(--pink); }
.chip[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: #fff; }
.chip__n { font-size: .72rem; color: var(--muted-2); }
.chip[aria-pressed="true"] .chip__n { color: rgba(255, 255, 255, .72); }

.jumpnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }

.filters { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: 1.4rem; }
.filters__count { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--muted-2); }

/* Smakenkaart: knoppen, telling en zoekveld op één rij, het zoekveld rechts. */
.menu-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; margin-bottom: 1.4rem; }
.menu-tools .filters { margin-bottom: 0; }
.menu-tools .filters__count { order: 2; margin-left: 0; }
.menu-search { order: 3; margin-left: auto; position: relative; display: flex; align-items: center; width: min(100%, 260px); }
.menu-search svg { position: absolute; left: .9rem; color: var(--muted-2); pointer-events: none; }
.menu-search input {
    width: 100%; padding: .55rem 1rem .55rem 2.5rem;
    background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm);
    font-size: .88rem; transition: border-color .25s;
}
.menu-search input::placeholder { color: var(--muted-2); }
.menu-search input:focus { outline: none; border-color: var(--pink); }
.menu-empty {
    margin-bottom: 1rem; padding: 1.3rem 1.4rem;
    border: 1px dashed var(--line); border-radius: var(--radius);
    color: var(--muted); font-weight: 600;
}

/* De vitrine zelf. Auto-fill in plaats van een vast aantal kolommen: de
   kaart groeit mee als er smaken bij komen, en krimpt bij het filteren. */
.flavours { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: .8rem; }
/* Een kaartje is een bak uit de vitrine: bovenin de naam, roze voor melkijs
   (roomijs en yoghurt) en oranje voor sorbet, daaronder wit met soort,
   omschrijving en allergenen. Geen hover: het kaartje is geen link. */
.flavour {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius); overflow: hidden;
}
.section--raised .flavour { background: var(--cream); }
.flavour__n {
    padding: 1.1rem 1.25rem 1rem;
    background: var(--pink); color: #fff;
    font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.12; letter-spacing: .025em; text-transform: uppercase;
}
/* --orange-2 en niet --orange: wit op --orange haalt AA net niet. */
.flavour[data-kind="sorbet"] .flavour__n { background: var(--orange-2); }
/* Ruimte voor het tabje "Altijd" in de hoek. */
.flavour[data-vast] .flavour__n { padding-right: 4.6rem; }
.flavour__b { display: flex; flex-direction: column; flex: 1; padding: .9rem 1.25rem 1.05rem; }
.flavour__d { color: var(--muted); font-size: .9rem; line-height: 1.55; margin-bottom: .9rem; }
.flavour__m { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; order: -1; margin-bottom: .6rem; }
/* Soortlabel in de kleur van de bak: roze voor room, oranje voor sorbet,
   bes voor yoghurt. Zo zie je de drie soorten zonder te lezen. */
.flavour__k { padding: .22rem .62rem; border-radius: var(--radius-sm); font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.flavour__k--roomijs { background: var(--pink-tint); color: var(--pink); }
.flavour__k--sorbet  { background: rgba(232, 69, 34, .12); color: var(--orange); }
.flavour__k--yoghurt { background: rgba(74, 4, 48, .08); color: var(--ink); }
/* "Altijd" als tabje in de hoek, op de gekleurde kop. Bessenroze, zodat het
   loskomt van zowel de roze als de oranje kop. */
.flavour { position: relative; }
.flavour__k--vast {
    position: absolute; top: 0; right: 0;
    padding: .34rem .7rem; border-radius: 0 0 0 var(--radius-sm);
    background: var(--ink); color: #fff;
}
.flavour__s { font-size: .72rem; font-weight: 700; color: var(--muted-2); }

/* Allergenen als tekst onderaan, achter een lijn; margin-top: auto duwt
   ze naar de onderkant, zodat ze in elk kaartje op dezelfde plek staan. */
.flavour__at {
    margin-top: auto; padding-top: .75rem; border-top: 1px solid var(--line-soft);
    font-size: .82rem; line-height: 1.5; color: var(--muted);
}
.flavour__at strong { font-weight: 700; color: var(--text); }

.menu-foot {
    display: flex; gap: .7rem; align-items: flex-start;
    margin-top: 1.6rem; max-width: 74ch;
    color: var(--muted); font-size: .9rem; line-height: 1.6;
}
.menu-foot .ico { color: var(--pink); margin-top: .22rem; }

/* 10. KAARTEN ───────────────────────────────────────────────────────────── */
/* Gekleurde kaarten, het motief uit het oorspronkelijke ontwerp. */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .8rem;
    padding: clamp(1.8rem, 2.6vw, 2.4rem);
    border-radius: var(--radius-lg); color: #fff;
    position: relative; overflow: hidden; isolation: isolate;
}
/* Icoon als watermerk in de hoek rechtsonder, deels van de kaart af. In een
   smalle kaart schuift de knop er deels overheen; dat mag, het icoon ligt
   eronder en is zo licht dat tekst en knop goed leesbaar blijven. */
.card__bg {
    position: absolute; right: -1.4rem; bottom: -1.4rem; z-index: -1;
    width: 130px; height: auto;
    color: #fff; opacity: .16; transform: rotate(-10deg);
    pointer-events: none;
}
.card--pink   { background: var(--grad-card); }
.card--orange { background: var(--orange); }
.card--berry  { background: var(--grad-berry); }
.card__icon {
    width: 46px; height: 46px; margin-bottom: .3rem;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .3);
    color: #fff;
}
.card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.65rem; line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; }
.card p { color: rgba(255, 255, 255, .84); font-size: .95rem; flex: 1; }
/* De hele kaart is de link, maar de knop onderaan maakt duidelijk waar
   je naartoe gaat. Wit op de kaartkleur, zodat hij eruit springt. */
.card__cta {
    display: inline-flex; align-items: center; gap: .55rem;
    margin-top: .6rem; padding: .8rem 1.3rem;
    background: #fff; border-radius: var(--radius-sm);
    font-size: .88rem; font-weight: 700;
}
.card--pink .card__cta   { color: var(--pink); }
.card--orange .card__cta { color: var(--orange); }
.card--berry .card__cta  { color: var(--ink); }

/* Neutrale kenmerkenkaarten */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem; }
/* Vast raster voor een even aantal kaarten, zodat er geen losse achteraan blijft. */
.feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .feature-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feature-grid--3 { grid-template-columns: 1fr; } }
.feature {
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: clamp(1.4rem, 2.4vw, 2rem);
    transition: border-color .3s;
}
.feature:hover { border-color: var(--pink); }
.section--raised .feature { background: var(--cream); }
.feature h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.14; letter-spacing: .025em; text-transform: uppercase; margin-bottom: .7rem; }
.feature p { color: var(--muted); font-size: .95rem; }

/* Tweekolommen-intro */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.split--wide-media { grid-template-columns: 1.1fr 1fr; }
/* Beeld rechts in plaats van links, voor afwisseling in een reeks. */
@media (min-width: 861px) { .split--flip > :first-child { order: 2; } }

/* Stappen. Een nummer alleen waar de volgorde telt (/ijstaarten), en dan
   gewoon 1, 2, 3. */
.steps { display: grid; gap: .2rem; counter-reset: step; }
.step { display: flex; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--line-soft); }
.step:last-child { border-bottom: 0; }
.step__num {
    counter-increment: step; flex: none;
    width: 38px; height: 38px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pink-tint); color: var(--pink);
    font-family: var(--font-display); font-weight: 400; font-size: 1.05rem;
}
.step__num::before { content: counter(step); }
.step h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .25rem; }
.step p { color: var(--muted); font-size: .95rem; }

/* Smaaklabels */
.tags { display: flex; flex-wrap: wrap; gap: .55rem; }
.tag {
    background: var(--pink-tint); color: var(--pink);
    padding: .45rem 1rem; border-radius: var(--radius-sm);
    font-size: .84rem; font-weight: 700;
    transition: background .25s, transform .25s var(--ease-pop);
}
.tag:hover { background: var(--pink); color: #fff; transform: scale(1.05); }
.section--brand .tag { background: rgba(255, 255, 255, .2); color: #fff; }
.section--brand .tag:hover { background: rgba(255, 255, 255, .34); }

/* Vier kerngetallen in één strook, met de gradient tussen de cellen door. */
.statstrip {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border: 1px solid rgba(255, 255, 255, .24); border-radius: var(--radius);
    overflow: hidden;
}
.statstrip > div { padding: 1.1rem 1.3rem; border-right: 1px solid rgba(255, 255, 255, .24); }
.statstrip > div:last-child { border-right: 0; }
.statstrip__v { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: #fff; }
.statstrip__k { font-size: .72rem; font-weight: 700; color: rgba(255, 255, 255, .72); margin-top: .3rem; }

/* 11. PRIJZEN ───────────────────────────────────────────────────────────── */
.pricecards { display: flex; flex-direction: column; gap: .8rem; }
.pricecards--row { flex-direction: row; flex-wrap: wrap; }
.pricecards--row > .pricecard { flex: 1 1 220px; }
.pricecard {
    display: flex; justify-content: space-between; align-items: center; gap: 1.2rem;
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius); padding: 1.2rem 1.5rem;
    transition: border-color .3s, transform .3s var(--ease);
}
.pricecard:hover { border-color: var(--pink); transform: translateX(4px); }
.section--brand .pricecard { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .24); color: #fff; }
.section--brand .pricecard:hover { border-color: #fff; background: rgba(255, 255, 255, .2); }
.pricecard__name { font-weight: 700; }
.pricecard__sub { font-size: .84rem; color: var(--muted); margin-top: .15rem; }
.section--brand .pricecard__sub { color: rgba(255, 255, 255, .74); }
.pricecard__amount { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; text-align: right; white-space: nowrap; }
.pricecard__amount--sm { font-size: 1rem; font-family: var(--font-text); font-weight: 700; }
.pricecard__unit { font-size: .72rem; color: var(--muted); text-align: right; margin-top: .2rem; }
.section--brand .pricecard__unit { color: rgba(255, 255, 255, .7); }

/* Specificatieblok op een kar-pagina */
.specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line-soft); border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.spec { background: var(--white); padding: 1.2rem 1.3rem; }
.spec__k { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.spec__v { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.18; letter-spacing: .025em; text-transform: uppercase; margin-top: .4rem; }
.spec__v--sm { font-family: var(--font-text); font-size: 1rem; font-weight: 700; text-transform: none; }

/* Aanvinklijst van wat er inbegrepen zit */
.checklist { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem 1.6rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; color: var(--muted); }
.checklist li::before {
    content: ''; flex: none;
    width: 22px; height: 22px; margin-top: .25rem;
    border-radius: 50%;
    background-color: var(--pink-tint);
    /* Vinkje als SVG, niet als teken uit een font: dan valt hij overal
       hetzelfde uit en volgt hij de huisstijlkleur. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6007e' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
}

/* 12. LOCATIES ──────────────────────────────────────────────────────────── */
.loc {
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.6rem, 2.5vw, 2.2rem);
    transition: transform .35s var(--ease-pop), border-color .3s;
}
.loc:hover { transform: translateY(-5px); border-color: var(--pink); }
.section--raised .loc { background: var(--cream); }
.section--blush .loc, .section--peach .loc { background: var(--white); }
.section--blush .feature, .section--peach .feature { background: var(--white); }
.section--blush .formcard, .section--peach .formcard { background: var(--white); }
.loc__name { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.12; letter-spacing: .02em; text-transform: uppercase; }
.loc__addr { color: var(--muted); font-size: .92rem; margin-top: .3rem; }
.loc__time { font-family: var(--font-display); font-weight: 400; font-size: 2rem; color: var(--pink); margin-top: 1.1rem; line-height: 1; }
.loc__days { font-size: .84rem; color: var(--muted-2); margin-top: .25rem; }
.loc__note { color: var(--muted); font-size: .92rem; margin-top: 1rem; }
/* Seizoenstijden passen niet in één regel, die krijgen een eigen lijstje. */
.loc__hours { display: grid; gap: .35rem; margin-top: 1rem; }
.loc__hours .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.loc__hours .row span:first-child { color: var(--muted); }
.loc__hours .row span:last-child { font-weight: 700; }
.loc__badge {
    display: inline-block; margin-top: 1.2rem;
    background: var(--pink-tint); color: var(--pink);
    padding: .3rem .85rem; border-radius: var(--radius-sm);
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
}

/* 14. FAQ ───────────────────────────────────────────────────────────────── */
.faq { border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
    width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1.5rem;
    padding: 1.3rem 0; text-align: left;
    font-size: 1.05rem; font-weight: 700;
    transition: color .3s;
}
.faq__q:hover { color: var(--pink); }
/* Hetzelfde pijltje als in het mobiele menu: omlaag is dicht, omhoog is open. */
.faq__icon { flex: none; color: var(--pink); transition: rotate .35s var(--ease); }
.faq__q[aria-expanded="true"] .faq__icon { rotate: 180deg; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .45s var(--ease); }
.faq__a p { color: var(--muted); padding-bottom: 1.3rem; max-width: 62ch; }

/* 15. FORMULIEREN ───────────────────────────────────────────────────────── */
.formcard {
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.6rem);
}
.section--raised .formcard { background: var(--cream); }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; min-width: 0; }
.field label { font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.field input, .field textarea, .field select {
    background: var(--cream); border: 2px solid var(--line-soft); border-radius: var(--radius);
    padding: .8rem 1rem; width: 100%;
    transition: border-color .3s, background .3s;
}
.section--raised .field input,
.section--raised .field textarea,
.section--raised .field select { background: var(--white); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--pink); }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
/* Eigen pijl in plaats van die van de browser, met lucht aan de rechterkant. */
.field select {
    appearance: none; -webkit-appearance: none; cursor: pointer;
    padding-right: 2.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6007e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
}
/* Een lege datum leest als placeholder, niet als ingevuld. */
.field input[type="date"]:invalid { color: var(--muted-2); }
/* Safari op iOS geeft een datumveld een eigen minimale breedte en negeert
   dan width: 100%; zonder eigen opmaak steekt hij buiten het formulier.
   De hoogte moet dan wel vast, anders klapt een leeg veld in. */
.field input[type="date"] {
    -webkit-appearance: none; appearance: none;
    display: block; min-width: 0; min-height: calc(1.68em + 1.6rem + 4px);
}
.field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.field .opt { font-weight: 600; letter-spacing: 0; color: var(--muted-2); }

/* Kop boven het formulier en genummerde blokken erin. */
.formcard__head { margin-bottom: 1.6rem; }
.formcard__head .display { margin-top: .6rem; }
.fstep { counter-increment: fstep; display: flex; align-items: center; gap: .7rem; margin: 1.8rem 0 1rem; font-size: 1rem; font-weight: 700; }
.fstep::before {
    content: counter(fstep); flex: none;
    width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--pink); color: #fff;
    font-family: var(--font-display); font-weight: 400; font-size: .95rem;
}
form:has(.fstep) { counter-reset: fstep; }
form > .fstep:first-of-type { margin-top: 0; }

/* Keuzekaartjes: een radio die eruitziet als een kaart. */
.picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .6rem; margin-bottom: 1rem; border: 0; }
.pick { position: relative; cursor: pointer; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
    display: flex; flex-direction: column; gap: .15rem; height: 100%;
    padding: .85rem 1rem .85rem 2.6rem;
    background: var(--cream); border: 2px solid var(--line-soft); border-radius: var(--radius);
    transition: border-color .25s, background .25s;
}
.pick span::before {
    content: ''; position: absolute; left: 1rem; top: 1.05rem;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid var(--line); background: var(--white);
    transition: border-color .25s, box-shadow .25s;
}
.pick:has(.pick__tag) span::before { top: 2.45rem; }
.pick strong { font-size: .92rem; line-height: 1.3; }
.pick small { font-size: .78rem; color: var(--muted); line-height: 1.35; }
.pick:hover span { border-color: rgba(230, 0, 126, .4); }
.pick input:checked + span { border-color: var(--pink); background: var(--pink-tint); }
.pick input:checked + span::before { border-color: var(--pink); box-shadow: inset 0 0 0 3px var(--white); background: var(--pink); }
.pick input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 2px; }
/* Label boven een aanrader in de keuzes, zoals de IJstruck. Het rondje
   zakt mee, zodat het naast de naam blijft staan en niet naast het label. */
.pick__tag {
    align-self: flex-start; margin-bottom: .3rem;
    padding: .1rem .45rem; border-radius: var(--radius-sm);
    background: var(--pink); color: #fff;
    font-size: .62rem; font-style: normal; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.form-note { font-size: .82rem; color: var(--muted-2); margin-top: .9rem; }
.form-msg { margin-top: 1rem; padding: .9rem 1.2rem; border-radius: var(--radius); font-size: .92rem; font-weight: 700; display: none; }
.form-msg.is-visible { display: block; }
.form-msg--ok  { background: rgba(46, 160, 90, .12); color: #1f7a45; border: 1px solid rgba(46, 160, 90, .3); }
.form-msg--err { background: var(--pink-tint); color: var(--pink-2); border: 1px solid rgba(230, 0, 126, .3); }

/* Contactlijst */
.contact-list { display: grid; gap: .1rem; }
.contact-list li { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 0; border-bottom: 1px solid var(--line-soft); }
.contact-list li:first-child { padding-top: 0; }
.contact-list svg { flex: none; width: 20px; height: 20px; color: var(--pink); margin-top: .4rem; }
.contact-list li > div { display: grid; gap: .2rem; min-width: 0; }
.contact-list .k { font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.contact-list .v, .contact-list li > div a { font-size: 1.02rem; font-weight: 700; overflow-wrap: anywhere; transition: color .3s var(--ease); }
.contact-list a:hover { color: var(--pink); }

/* Contact: de salons en Frezzo Events als twee duidelijke blokken. */
.contact-side { display: grid; gap: 1.1rem; }
.reach {
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
}
.reach__lead { color: var(--muted); margin-top: .7rem; }
.reach__list { margin-top: 1.2rem; border-top: 1px solid var(--line-soft); }
.reach__list li {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    padding: 1.05rem 0; border-bottom: 1px solid var(--line-soft);
}
.reach__list li:last-child { border-bottom: 0; padding-bottom: 0; }
.reach__list li > div { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
/* Anton zit optisch laag in zijn regel; het label zakt mee. */
.reach__list .badge--sm { margin-top: .2rem; }
.reach__name {
    font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; line-height: 1.1;
    letter-spacing: .015em; text-transform: uppercase; transition: color .25s var(--ease);
}
.reach__name:hover { color: var(--pink); }
.reach__phone {
    display: inline-flex; align-items: center; gap: .5rem;
    font-weight: 700; color: var(--pink); white-space: nowrap;
}
.reach__phone:hover { color: var(--pink-2); }

/* Roze belkaart: Frezzo Events op contact en naast de offerte. */
.callcard {
    display: flex; flex-direction: column; align-items: flex-start;
    background: var(--grad-card); color: #fff;
    border-radius: var(--radius-lg); padding: clamp(1.6rem, 3vw, 2.4rem);
}
.callcard__title {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.9rem, 3vw, 2.5rem); line-height: 1.02; letter-spacing: .015em;
}
.callcard__phone {
    display: inline-flex; align-items: center; gap: .7rem; margin-top: 1.3rem;
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.6vw, 2.1rem); line-height: 1;
    transition: opacity .25s;
}
.callcard__phone:hover { opacity: .85; }
.callcard__links { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.1rem; }
.callcard__links a {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .9rem; font-weight: 600; color: rgba(255, 255, 255, .9);
    overflow-wrap: anywhere; transition: color .25s;
}
.callcard__links a:hover { color: #fff; text-decoration: underline; }
.callcard .btn--white { margin-top: 1.5rem; color: var(--pink); }
.callcard--food { background: var(--grad-food); }
/* Offerte: twee nummers onder elkaar, ijs en food, elk met een label. */
.callcard__line { align-self: stretch; margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.callcard__line .callcard__phone { margin-top: .35rem; }
.callcard__k { display: block; font-size: .68rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.callcard--food .btn--white { color: var(--orange); }

/* IJstaarten: de stappen en de belkaart naast een foto die meeloopt tot
   onderaan, zodat de kolommen even lang zijn. */
.taart { align-items: stretch; }
@media (min-width: 861px) {
    .taart__side { display: flex; }
    .taart__side .media { flex: 1; aspect-ratio: auto; min-height: 22rem; }
}
.taart__steps { margin-top: 1.4rem; }
.taart__call { margin-top: 1rem; }
.taart__call .callcard__title { font-size: clamp(1.6rem, 2.4vw, 2rem); }

/* Offerte: de zijkolom loopt mee met het lange formulier. */
.quote { align-items: start; }
.quote__side { display: grid; gap: 1.1rem; }
/* Formulier rechts, net als op contact. Op mobiel staat het wel bovenaan:
   hier kom je voor de aanvraag, de belkaart is het alternatief. */
@media (max-width: 860px) { .quote__form { order: -1; } }
@media (min-width: 861px) {
    .quote__side { position: sticky; top: calc(var(--header-h) + var(--demobar-h) + 1.5rem); }
}

/* Juridische pagina's: tekst links, een smalle kolom met verwijzingen rechts. */
.legal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.legal__body { max-width: 72ch; }
.legal__aside { display: grid; gap: 1rem; }
@media (min-width: 861px) {
    .legal__aside { position: sticky; top: calc(var(--header-h) + var(--demobar-h) + 1.5rem); }
}
.legal__card {
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: 1.4rem 1.5rem;
}
.legal__link {
    display: inline-block; margin-top: .6rem;
    font-weight: 700; color: var(--pink); overflow-wrap: anywhere;
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em;
}
.legal__link:hover { color: var(--pink-2); }
/* Zolang Frezzo de tekst nog niet heeft aangeleverd. */
.legal__pending {
    background: var(--white); border: 1px solid var(--line-soft); border-top: 4px solid var(--orange);
    border-radius: var(--radius-lg); padding: clamp(1.8rem, 4vw, 3rem);
}
.legal__pending .display { margin: 1.2rem 0 1rem; }
.legal__pending p { color: var(--muted); max-width: 56ch; }
.legal__pending p + p { margin-top: .7rem; }
.legal__flag {
    display: inline-flex; align-items: center; gap: .45rem;
    background: rgba(232, 69, 34, .12); color: var(--orange);
    padding: .35rem .85rem; border-radius: var(--radius-sm);
    font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* Veelgestelde vragen: de kop van een blok blijft staan naast de lijst. */
@media (min-width: 861px) {
    .faqblock__head { position: sticky; top: calc(var(--header-h) + var(--demobar-h) + 1.5rem); }
}

/* Werken bij: twee kaarten naast elkaar, en de vacaturelijst. */
.cards--two { grid-template-columns: repeat(2, 1fr); }
.jobs { display: grid; gap: .8rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.job {
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    background: var(--cream); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.4rem, 2.6vw, 2.2rem);
    transition: border-color .3s;
}
.job:hover { border-color: var(--pink); }
.job__where { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.job__title {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.5rem, 2.4vw, 1.9rem); line-height: 1.1; letter-spacing: .015em; margin-top: .35rem;
}
.job__summary { color: var(--muted); margin-top: .3rem; }
.job .btn { flex: none; }
.jobs-empty {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    background: var(--cream); border: 2px dashed rgba(230, 0, 126, .25);
    border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
}
.jobs-empty .card__icon { background: var(--pink-tint); border-color: transparent; color: var(--pink); margin: 0; }
.jobs-empty h3 { font-size: 1.1rem; font-weight: 700; }
.jobs-empty p { color: var(--muted); margin-top: .3rem; max-width: 60ch; }
.jobs-empty .btn { justify-content: center; }

/* CTA-band */
.cta-band {
    display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
    padding: clamp(2rem, 4.5vw, 3.5rem);
    border-radius: var(--radius-lg);
    background: var(--grad-cta);
    color: #fff;
}
.cta-band h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.2vw, 2.6rem); line-height: 1.08; letter-spacing: .022em; text-transform: uppercase; max-width: 18ch; }
.cta-band .lede { color: rgba(255, 255, 255, .88); margin-top: 1.2rem; max-width: 44ch; }
/* Op het roze vlak keert de hiërarchie om: wit is nu het opvallendst. */
.cta-band .btn--solid { background: #fff; color: var(--pink); }
.cta-band .btn--solid:hover { background: var(--cream); }
.cta-band .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.cta-band .btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }

/* 16. FOOTER ────────────────────────────────────────────────────────────── */
.footer {
    position: relative; overflow: hidden;
    background: var(--grad-hero); color: rgba(255, 255, 255, .85);
    padding-bottom: 2rem;
}
/* De gesmolten rand: de crème pagina loopt in druppels de roze footer in.
   Het masker is een tegel die zich herhaalt, zodat de druppels op elke
   breedte hun vorm houden. */
.footer__drip {
    height: 96px;
    background: var(--cream);
    -webkit-mask: var(--drip) repeat-x top left / 480px 96px;
            mask: var(--drip) repeat-x top left / 480px 96px;
    --drip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 480 96' fill='%23fff'%3E%3Crect width='480' height='18'/%3E%3Cpath d='M11 18Q20 18 20 26V63A9 9 0 0 0 38 63V26Q38 18 47 18Z'/%3E%3Cpath d='M65 18Q70 18 70 26V29A5 5 0 0 0 80 29V26Q80 18 85 18Z'/%3E%3Cpath d='M109 18Q118 18 118 26V78A12 12 0 0 0 142 78V26Q142 18 151 18Z'/%3E%3Cpath d='M183 18Q190 18 190 26V39A7 7 0 0 0 204 39V26Q204 18 211 18Z'/%3E%3Cpath d='M237 18Q246 18 246 26V54A10 10 0 0 0 266 54V26Q266 18 275 18Z'/%3E%3Cpath d='M295.5 18Q300 18 300 26V25.5A4.5 4.5 0 0 0 309 25.5V26Q309 18 313.5 18Z'/%3E%3Cpath d='M339 18Q348 18 348 26V69A13 13 0 0 0 374 69V26Q374 18 383 18Z'/%3E%3Cpath d='M412 18Q420 18 420 26V44A8 8 0 0 0 436 44V26Q436 18 444 18Z'/%3E%3Ccircle cx='75' cy='48' r='4.5'/%3E%3Ccircle cx='304.5' cy='42' r='4'/%3E%3Ccircle cx='197' cy='62' r='5'/%3E%3Ccircle cx='428' cy='70' r='4.5'/%3E%3C/svg%3E");
}
.footer__top {
    display: grid; grid-template-columns: 1fr auto; gap: clamp(2.4rem, 6vw, 5rem); align-items: end;
    padding-top: clamp(2.4rem, 5vw, 4rem);
}
.footer__title {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: .98; letter-spacing: .01em;
    color: #fff; margin-top: .9rem;
}
.footer__title em { font-style: normal; color: var(--ink); }
.footer__tag { margin-top: 1.2rem; color: rgba(255, 255, 255, .82); font-size: .95rem; max-width: 36ch; }

.footer__cols { display: grid; grid-template-columns: repeat(4, max-content); gap: 2rem clamp(2rem, 4vw, 4rem); }
.footer__col { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.footer__col h3 { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .75); margin-bottom: .4rem; }
.footer__col a { font-size: .96rem; color: rgba(255, 255, 255, .9); transition: color .25s; }
.footer__col a:hover { color: #fff; }

/* Onderin: de kleine lettertjes en de credit. */
.footer__base {
    display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1.2rem 2rem;
    margin-top: clamp(2.4rem, 5vw, 3.4rem); padding-top: clamp(1.6rem, 3vw, 2rem);
    border-top: 1px solid rgba(255, 255, 255, .3);
}
.footer__fine {
    display: flex; flex-wrap: wrap; gap: .4rem 1.6rem;
    font-size: .8rem; line-height: 1.5; color: rgba(255, 255, 255, .85);
}
.footer__kvk { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; }
.footer__kvk li span + span { margin-left: .3rem; font-variant-numeric: tabular-nums; }
.footer__credit { font-size: .8rem; color: rgba(255, 255, 255, .85); }
.footer__credit:hover { color: #fff; }


@media (max-width: 1100px) {
    .footer__top { grid-template-columns: 1fr; align-items: start; }
    .footer__cols { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .footer__drip { height: 64px; -webkit-mask-size: 320px 64px; mask-size: 320px 64px; }
    .footer__cols { grid-template-columns: 1fr 1fr; gap: 2rem 1.4rem; }
    .footer__base { flex-direction: column; align-items: stretch; gap: 1.6rem; }
    .footer__fine { flex-direction: column; gap: .9rem; }
    /* Naam links, nummer rechts: leest als een lijstje in plaats van losse regels. */
    .footer__kvk { flex-direction: column; gap: .35rem; }
    .footer__kvk li { display: flex; justify-content: space-between; gap: 1rem; }
    .footer__kvk li span + span { margin-left: 0; color: rgba(255, 255, 255, .72); }
    .footer__credit { padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, .3); }
}

/* 16b. VESTIGINGEN, FOOD, WINTERLIJST ───────────────────────────────────── */
/* Alleen voor schermlezers: labels die zichtbaar al uit de kolomkop blijken. */
.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;
}

a.loc__name { display: block; transition: color .25s var(--ease); }
a.loc__name:hover { color: var(--pink); }
.loc__order { margin-top: 1.1rem; font-size: .88rem; color: var(--muted); }

/* Een feature die doorlinkt, met een onderstreepte link onderaan. */
a.feature { display: block; }
.feature__go {
    display: inline-block; margin-top: 1.1rem;
    font-size: .84rem; font-weight: 700; color: var(--pink);
    text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em;
}
a.feature:hover .feature__go { color: var(--pink-2); }

/* Frezzo Events als losse kop op /locaties: geen adres, wel contact. */
.events-loc {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: center;
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 3rem);
}
.events-loc .display { margin: 1rem 0 1.2rem; }
.events-loc > .actions { justify-content: flex-end; }
/* Homepage: de traktatiebox met foto links, tekst en knop rechts. */
.events-loc--treat { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.events-loc--treat .display { margin-top: 0; }

/* Frezzo Events: de keuze tussen ijs (roze) en food (oranje). Twee even
   grote vlakken; de knoppen staan altijd onderaan, ook als de ene lijst
   langer is dan de andere. */
.takken { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.tak {
    display: flex; flex-direction: column;
    padding: clamp(1.8rem, 3.4vw, 3rem);
    border-radius: var(--radius-lg); color: #fff;
}
.tak--ijs  { background: var(--grad-card); }
.tak--food { background: var(--grad-food); }
.tak--mix  { background: var(--grad-berry); }
.tak--mix .btn--white { color: var(--ink); }
/* De donkere accentkleur valt weg op bes; daar wordt de nadruk lichtroze. */
.tak--mix .tak__title em { color: #ff8fc8; }
.tak__title {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(2.2rem, 4.2vw, 3.4rem); line-height: 1.02; letter-spacing: .012em;
}
.tak__title em { font-style: normal; color: var(--ink); }
.tak__lead { color: rgba(255, 255, 255, .88); margin-top: 1rem; max-width: 44ch; }
.tak__list { margin-top: 1.6rem; border-top: 1px solid rgba(255, 255, 255, .3); }
.tak__list a {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .72rem 0; border-bottom: 1px solid rgba(255, 255, 255, .3);
    transition: padding-left .4s var(--ease);
}
@media (hover: hover) and (pointer: fine) { .tak__list a:hover { padding-left: .5rem; } }
.tak__name { font-weight: 700; }
.tak__list--plain li { padding: .72rem 0; border-bottom: 1px solid rgba(255, 255, 255, .3); }
.tak__sub { font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .78); text-align: right; white-space: nowrap; }
.tak__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: auto; padding-top: 1.8rem; }
.tak--ijs .btn--white { color: var(--pink); }
.tak .btn--line { border-color: rgba(255, 255, 255, .55); color: #fff; }
.tak .btn--line:hover { border-color: #fff; background: rgba(255, 255, 255, .14); }
/* Vanaf-prijs onder de naam van een kar op /frezzo-events/ijs. */
.spotlight__price { font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 1.8rem); line-height: 1.1; color: var(--pink); margin-bottom: .8rem; }

/* Vinklijst op een gekleurde baan: wit in plaats van roze. */
.checklist--light li { color: rgba(255, 255, 255, .92); font-weight: 600; }
.checklist--light li::before {
    background-color: rgba(255, 255, 255, .22);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E");
}

/* Drie korte beloftes, groot (Food + IJs). */
.bigpoints { display: grid; gap: .2rem; align-self: center; }
.bigpoints li {
    padding: 1rem 0; border-bottom: 2px solid var(--line-soft);
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.6rem, 3vw, 2.3rem); line-height: 1.05; letter-spacing: .015em;
}

/* Vanaf-prijzen in de afsluitende band van Frezzo Events. */
.pricestrip { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.pricestrip li { padding: .45rem .9rem; border-radius: var(--radius-sm); background: rgba(255, 255, 255, .18); font-size: .9rem; }

.tak__contact { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin-top: 1.3rem; }
.tak__contact a {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .9);
    overflow-wrap: anywhere;
}
.tak__contact a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Foodmenu's: per menu een kaart met de prijs rechtsboven, de onderdelen
   als labels en onderaan het minimum en de aanvraagknop. */
.fmenus { display: grid; gap: 1.1rem; }
.fmenu {
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); padding: clamp(1.6rem, 3.2vw, 2.8rem);
    scroll-margin-top: calc(var(--header-h) + var(--demobar-h) + 20px);
}
.fmenu__head {
    display: grid; grid-template-columns: 1fr auto; gap: 1.2rem 3rem; align-items: start;
    padding-bottom: 1.6rem; border-bottom: 2px solid var(--line-soft);
}
.fmenu__title {
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: .018em;
}
.fmenu__lead { color: var(--muted); margin-top: .8rem; max-width: 60ch; }
.fmenu__price { text-align: right; }
.fmenu__amount { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.2rem); line-height: 1; color: var(--orange); }
.fmenu__unit { font-size: .9rem; font-weight: 700; color: var(--muted); }
.fmenu__note { font-size: .84rem; color: var(--muted); margin-top: .5rem; }
.fmenu__lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.6rem 2.4rem; padding-block: 1.6rem; }
.fmenu__list h3, .fmenu__list h4 { font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); margin-bottom: .75rem; }
.fmenu__list ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.fmenu__list li { background: var(--cream); border-radius: var(--radius-sm); padding: .35rem .7rem; font-size: .86rem; font-weight: 600; line-height: 1.4; }
.fmenu__foot {
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.2rem 2rem;
    padding-top: 1.4rem; border-top: 1px solid var(--line-soft);
}
.fmenu__facts { display: grid; gap: .5rem; }
.fmenu__facts p { display: flex; gap: .6rem; align-items: flex-start; max-width: 64ch; font-size: .92rem; color: var(--muted); }
.fmenu__facts .ico { color: var(--orange); margin-top: .2rem; }

/* Over ons: drie korte blokken naast elkaar, elk met een roze streep erboven. */
.story { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); }
.story__item { border-top: 3px solid var(--pink); padding-top: 1.4rem; }
.story__item h2 {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 1.9rem);
    line-height: 1.1; letter-spacing: .02em; text-transform: uppercase; margin-bottom: .8rem;
}
.story__item p { color: var(--muted); }

/* Hoofdacties van een vestiging: bellen en route, even breed. */
.loc__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin-top: 1.4rem; }
.loc__actions .btn { justify-content: center; padding-inline: 1rem; }
.loc__social { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem; margin-top: 1.1rem; }
.loc__social a {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .86rem; font-weight: 600; color: var(--muted);
    transition: color .25s var(--ease);
}
.loc__social a:hover { color: var(--pink); }
.loc__social svg { color: var(--pink); }

/* Afwijkende tijden (feestdagen, vakantie): in de tweede kleur, zodat het
   opvalt naast de vaste tijden. */
.loc__days.is-special { color: var(--orange); font-weight: 700; }
.loc__special {
    margin-top: 1.1rem; padding: .9rem 1rem; display: grid; gap: .35rem;
    background: rgba(232, 69, 34, .08); border-radius: var(--radius);
}
.loc__special-k, .venue__special {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--orange);
}
.loc__special .row { display: flex; justify-content: space-between; gap: 1rem; font-size: .88rem; }
.loc__special .row span:first-child { color: var(--muted); }
.loc__special .row em { font-style: normal; color: var(--muted-2); }
.loc__special .row span:last-child { font-weight: 700; white-space: nowrap; }
.venue__special { margin-top: .6rem; text-transform: none; letter-spacing: 0; font-size: .82rem; }

/* Extra's van een vestiging (lunch, winterlijst) onder in de infokaart. */
.loc__extras { margin-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.loc__extras a {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .9rem 0; border-bottom: 1px solid var(--line-soft);
    font-size: .88rem; color: var(--muted);
}
.loc__extras li:last-child a { border-bottom: 0; padding-bottom: 0; }
.loc__extras strong { display: block; color: var(--text); font-size: .95rem; }
.loc__extras svg { flex: none; color: var(--pink); transition: transform .3s var(--ease); }
.loc__extras a:hover svg { transform: translateX(3px); }
.loc__extras a:hover strong { color: var(--pink); }

/* Vestigingskaart met foto, op de homepage, /locaties en onder een
   vestigingspagina: de gevel, vandaag open of niet, en twee knoppen.
   Het getal van vandaag is het grootste, daar komen de meeste mensen voor. */
.venues { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.venues--two { grid-template-columns: repeat(2, 1fr); margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.venue {
    display: flex; flex-direction: column;
    background: var(--white); border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg); overflow: hidden;
    transition: border-color .3s;
}
.venue:hover { border-color: var(--pink); }
.venue__media { display: block; aspect-ratio: 16 / 10; border-radius: 0; }
.venues--two .venue__media { aspect-ratio: 16 / 7; }
.venue__body { display: flex; flex-direction: column; align-items: flex-start; flex: 1; padding: clamp(1.4rem, 2.4vw, 2rem); }
.venue .badge--sm { margin-bottom: .9rem; }
.venue__name {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.4rem);
    line-height: 1.05; letter-spacing: .015em; text-transform: uppercase;
}
.venue__name a { transition: color .25s var(--ease); }
.venue__name a:hover { color: var(--pink); }
.venue__addr { color: var(--muted); font-size: .92rem; margin-top: .2rem; }
.venue__today {
    display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    align-self: stretch; margin-top: 1.2rem; padding-top: 1rem;
    border-top: 1px solid var(--line-soft);
}
.venue__k { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted-2); }
.venue__time { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; line-height: 1; color: var(--pink); white-space: nowrap; }
/* Knoppen altijd onderaan, ook als een kaart een regel extra heeft. */
.venue__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-self: stretch; margin-top: auto; padding-top: 1.3rem; }
.venue__actions .btn { justify-content: center; padding-inline: 1rem; }

/* Smakenband op de homepage: de vitrine als lopende strook, licht schuin
   over de naad tussen twee secties. main heeft overflow-x: clip, dus de
   extra breedte voor de schuine hoeken geeft geen horizontale scroll.
   Met de muis erop staat hij stil (en bij minder beweging, zie 17). */
.ticker {
    position: relative; z-index: 2;
    width: 106%; margin: -1.6rem 0 -1.6rem -3%;
    padding-block: clamp(.9rem, 1.6vw, 1.3rem);
    background: var(--grad-berry); overflow: hidden;
    transform: rotate(-1.6deg);
}
.ticker__track { display: flex; width: max-content; animation: ticker 55s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item {
    display: inline-flex; align-items: center;
    font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1; letter-spacing: .03em;
    color: var(--cream); white-space: nowrap;
}
.ticker__item:nth-child(3n+2) { color: var(--pink-lt); }
.ticker__item:nth-child(3n)   { color: var(--orange-lt); }
/* Een stip tussen de smaken, in de kleur van de smaak ervoor. */
.ticker__item::after {
    content: ''; width: .32em; height: .32em; margin-inline: .9em;
    border-radius: 50%; background: currentColor; opacity: .4;
}
@keyframes ticker { to { transform: translateX(-50%); } }

/* Het aantal smaken groot naast de ambachttekst. */
.vitrine__count { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.vitrine__n {
    font-family: var(--font-display); font-weight: 400; font-size: clamp(7rem, 17vw, 13rem);
    line-height: .85; color: var(--pink); font-variant-numeric: tabular-nums;
}
.vitrine__k { margin-top: .9rem; font-size: 1.1rem; font-weight: 700; }


/* Lunchkaart */
.foodmenu { padding-block: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--line-soft); }
.foodmenu:first-child { border-top: 0; padding-top: 0; }
.foodmenu__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; }
.foodmenu__sizes, .foodmenu__list--sizes .dish__p { display: grid; grid-template-columns: repeat(3, 4.4rem); text-align: right; }
.foodmenu__sizes { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.foodmenu__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(2rem, 5vw, 4rem); }
.foodmenu__list--sizes { grid-template-columns: 1fr; }
.dish {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.4rem;
    padding: .85rem 0; border-bottom: 1px solid var(--line-soft);
}
.dish__n { font-size: 1rem; font-weight: 700; line-height: 1.35; }
.dish__d { font-size: .88rem; color: var(--muted); line-height: 1.5; margin-top: .15rem; }
.dish__p { flex: none; font-weight: 700; white-space: nowrap; }
.dish__size { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Winteraanbod: een kleine webwinkel. Productkaarten links, het mandje
   rechts; op mobiel een balk onderin die naar het mandje springt. */
.order { display: grid; grid-template-columns: 1.6fr 1fr; gap: clamp(1.6rem, 4vw, 3.5rem); align-items: start; margin-top: 1.4rem; }
.order__group { border: 0; padding: 0; margin: 0 0 clamp(2.4rem, 5vw, 3.4rem); min-width: 0; }
.order__title { display: block; margin-bottom: .4rem; }
.order__note { color: var(--muted); font-size: .92rem; }
.shop {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: .8rem; margin-top: 1rem;
}
.shopitem {
    background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem .5rem;
    transition: border-color .25s;
}
.shopitem:has(.is-picked) { border-color: var(--pink); }
.shopitem__n { font-size: 1.05rem; font-weight: 700; line-height: 1.3; margin-bottom: .3rem; }
.product {
    display: flex; align-items: center; justify-content: space-between; gap: .8rem;
    padding: .55rem 0; border-top: 1px solid var(--line-soft);
}
.shopitem__vars > .product:first-child { border-top: 0; }
.product__label { display: grid; cursor: pointer; line-height: 1.35; }
.product__u { font-size: .88rem; color: var(--muted); }
.product__p { font-weight: 700; white-space: nowrap; }
.qty {
    flex: none; display: inline-flex; align-items: center;
    background: var(--cream); border: 2px solid var(--line-soft); border-radius: var(--radius);
    transition: border-color .25s, background .25s;
}
.qty:focus-within, .product.is-picked .qty { border-color: var(--pink); background: var(--white); }
.qty__in, .qty__n {
    width: 2.4rem; padding: .35rem 0; text-align: center; font-weight: 700;
    border: 0; background: transparent; -moz-appearance: textfield; appearance: textfield;
}
.qty__in:focus { outline: none; }
.qty__in::-webkit-outer-spin-button, .qty__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty__btn {
    width: 2.4rem; height: 2.4rem; border-radius: var(--radius-sm);
    font-size: 1.2rem; font-weight: 700; line-height: 1; color: var(--pink);
    transition: background .2s;
}
.qty__btn:hover { background: var(--pink-tint); }
.qty--sm { justify-self: start; background: var(--white); }
.qty--sm .qty__n { width: 1.8rem; font-size: .9rem; }
.qty--sm .qty__btn { width: 2rem; height: 2rem; font-size: 1.05rem; }

.order__side { display: grid; gap: 1.6rem; min-width: 0; }
.order__card { scroll-margin-top: calc(var(--header-h) + var(--demobar-h) + 1rem); }
.cart__title {
    display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem;
    font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; line-height: 1.1;
    letter-spacing: .02em; text-transform: uppercase;
}
.cart__count {
    min-width: 1.7rem; height: 1.7rem; padding: 0 .45rem; display: inline-grid; place-items: center;
    border-radius: var(--radius-sm); background: var(--pink); color: #fff;
    font-family: var(--font-text); font-size: .85rem; font-weight: 700; letter-spacing: 0;
}
.cart__step { font-size: 1rem; font-weight: 700; margin-bottom: .9rem; }
.order__lines { display: grid; }
.cartline {
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .5rem 1rem;
    padding: .7rem 0; border-bottom: 1px solid var(--line-soft);
}
.cartline__n { grid-column: 1 / -1; font-size: .92rem; font-weight: 600; line-height: 1.35; }
.cartline__p { font-weight: 700; white-space: nowrap; text-align: right; }
.order__empty { color: var(--muted); font-size: .92rem; padding: .3rem 0 .8rem; }
/* Testschakelaar Aan/Uit, alleen zolang WINTER['test'] aanstaat. */
.testswitch {
    display: inline-flex; align-items: center; gap: .3rem; margin-bottom: 1rem;
    padding: .3rem; border: 2px dashed var(--line); border-radius: var(--radius);
    font-size: .88rem; font-weight: 700;
}
.testswitch__l { padding: 0 .6rem; color: var(--muted); }
.testswitch__o { padding: .4rem .9rem; border-radius: var(--radius-sm); color: var(--pink); }
.testswitch__o:hover { background: var(--pink-tint); }
.testswitch__o.is-on { background: var(--pink); color: #fff; }
.cart__fields { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Buiten het seizoen: alles staat er, maar uitgeschakeld. De producten en
   prijzen blijven goed leesbaar; alleen wat je niet kunt bedienen wordt
   lichter. Het mandje zegt vanaf wanneer je kunt bestellen. */
.order__empty--closed {
    padding: .9rem 1rem; margin-bottom: .6rem; border-radius: var(--radius);
    background: var(--blush); color: var(--text); font-weight: 600;
}
.order--closed .qty, .order--closed .order__total, .order--closed .cart__fields { opacity: .45; }
.order--closed .qty__btn:hover { background: none; }
.order--closed :disabled { cursor: not-allowed; }
.order--closed .cart__fields .btn--solid, .order--closed .cart__fields .btn--solid:hover {
    background: var(--ink); transform: none;
}
.order__total {
    display: flex; justify-content: space-between; align-items: baseline;
    margin: .4rem 0 2rem; padding-top: .9rem;
    font-weight: 700;
}
.order__total strong { font-family: var(--font-display); font-weight: 400; font-size: 1.8rem; color: var(--pink); }
.form-msg--warn { background: rgba(232, 69, 34, .1); color: var(--orange-2); border: 1px solid rgba(232, 69, 34, .3); }
.order__loc { padding: 1.3rem 1.4rem; }
.order__loc + .order__loc { margin-top: .8rem; }
.order__loc .loc__name { font-size: 1.25rem; }
.order__loc:hover { transform: none; }

.cartbar {
    position: fixed; left: .8rem; right: .8rem; bottom: .8rem; z-index: 110;
    display: flex; align-items: center; gap: .8rem;
    padding: .85rem 1.1rem; border-radius: var(--radius-lg);
    background: var(--pink); color: #fff; font-weight: 700;
    box-shadow: 0 14px 34px rgba(74, 4, 48, .3);
}
.cartbar__n {
    min-width: 1.8rem; height: 1.8rem; padding: 0 .45rem; display: grid; place-items: center;
    border-radius: var(--radius-sm); background: #fff; color: var(--pink); font-size: .88rem;
}
.cartbar__t { flex: 1; }
.cartbar__sum { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: .02em; }
@media (min-width: 861px) { .cartbar { display: none !important; } }

/* Pop-up voor het winteraanbod: een kaartje in de hoek, geen overlay. */
.winterpop {
    position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 120;
    width: min(340px, calc(100vw - 2.4rem));
    padding: 1.5rem 1.5rem 1.4rem;
    /* Bessenrood, niet roze: zo valt hij ook op boven de roze hero. */
    background: var(--grad-berry); color: #fff;
    border-radius: var(--radius-lg);
    box-shadow: 0 26px 60px rgba(74, 4, 48, .35);
    opacity: 0; transform: translateY(24px);
    transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.winterpop.is-in { opacity: 1; transform: none; }
.winterpop__close {
    position: absolute; top: .7rem; right: .7rem;
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; color: #fff; background: rgba(255, 255, 255, .16);
    transition: background .25s;
}
.winterpop__close:hover { background: rgba(255, 255, 255, .3); }
.winterpop__t { font-family: var(--font-display); font-size: 1.55rem; line-height: 1.08; letter-spacing: .02em; text-transform: uppercase; margin: .5rem 2rem .6rem 0; }
.winterpop__d { font-size: .9rem; color: rgba(255, 255, 255, .88); line-height: 1.5; margin-bottom: 1.1rem; }
.winterpop .btn--solid { background: #fff; color: var(--pink); }
.winterpop .btn--solid:hover { background: var(--cream); }

@media (min-width: 861px) {
    /* De zijkolom blijft in beeld tijdens het kiezen. Hij is hoger dan het
       scherm, dus scrollt hij binnen zijn eigen hoogte. */
    .order__side {
        position: sticky; top: calc(var(--header-h) + var(--demobar-h) + 1rem);
        max-height: calc(100vh - var(--header-h) - var(--demobar-h) - 2rem);
        overflow-y: auto; overscroll-behavior: contain;
        padding-right: .3rem;
    }
}

/* 17. MINDER BEWEGING ───────────────────────────────────────────────────── */
/* Geen scroll-reveal: alles staat er meteen, zodat niemand op tekst hoeft te
   wachten en niets onzichtbaar blijft als een script hapert. */
@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
    .ticker__track { animation: none; }
    .drawer, .drawer.is-open, .drawer__nav > *, .drawer.is-open .drawer__nav > *, .burger span { transition-delay: 0s !important; }
}

/* 18. RESPONSIVE ────────────────────────────────────────────────────────── */
/* Onder deze breedte passen de zeven menu-items niet meer naast logo en
   boekknop; dan neemt de burger het over. Houd main.js hiermee gelijk. */
@media (max-width: 1199px) {
    .nav { display: none; }
    .burger { display: block; margin-left: 0; }
    /* De boekknop blijft ook op mobiel naast de burger staan. */
    .masthead__inner { gap: 1.1rem; }
    .masthead__cta { margin-left: auto; padding: .7rem 1.15rem; font-size: .78rem; }
    .menu-open .masthead__cta { opacity: 0; visibility: hidden; }
    .burger { flex-shrink: 0; }
}
@media (max-width: 1040px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__media { width: 100%; max-width: 32rem; }
    .cards { grid-template-columns: 1fr 1fr; }
}

/* Op de smalste telefoons past "Boek Frezzo Events" net niet naast logo en burger. */
@media (max-width: 380px) {
    .masthead__inner { gap: .75rem; }
    .masthead__cta { padding: .6rem .85rem; font-size: .72rem; letter-spacing: .01em; }
}

@media (max-width: 860px) {
    .split, .split--wide-media { grid-template-columns: 1fr; }
    .statstrip { grid-template-columns: 1fr 1fr; }
    .statstrip > div:nth-child(2) { border-right: 0; }
    .statstrip > div:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .24); }
    .cta-band { grid-template-columns: 1fr; }
    .s-head--split { grid-template-columns: 1fr; align-items: start; }
    .demobar p { white-space: normal; font-size: .72rem; line-height: 1.3; }
}

@media (max-width: 640px) {
    /* Hoger dan je zou denken: logo, boekknop en burger krijgen zo lucht
       boven en onder, en de knop plakt niet tegen de rand van de balk. */
    :root { --header-h: 76px; }
    .has-demobar { --demobar-h: 56px; }
    .demobar__inner { padding-block: .5rem; }
    .demobar a { display: none; }
    .pricecards--row { flex-direction: column; }
    .filters__count { margin-left: 0; width: 100%; }
    /* Onder elkaar geeft de rij-gap plus de veldmarge dubbele witruimte. */
    .field-row { grid-template-columns: 1fr; gap: 0; }
    /* Salons: nummer altijd onder de naam, zodat de drie rijen gelijk lopen. */
    .reach__list li { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .actions .btn { width: 100%; justify-content: center; }
}

/* Responsief voor de nieuwe onderdelen, na de algemene breekpunten. */
@media (max-width: 1040px) {
    .venues { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
    .takken { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
    .events-loc, .order, .takken { grid-template-columns: 1fr; }
    .events-loc > .actions { justify-content: flex-start; }
    .legal { grid-template-columns: 1fr; }
    .job { flex-direction: column; align-items: flex-start; }
    .jobs-empty { grid-template-columns: 1fr; }
    .foodmenu__list { grid-template-columns: 1fr; }
    .story { grid-template-columns: 1fr; }
    .vitrine__count { align-items: flex-start; text-align: left; }
}
@media (max-width: 640px) {
    /* Witruimte: op een telefoon juist wat meer lucht tussen de blokken,
       zodat elke sectie op zichzelf staat. */
    :root { --section: 5rem; }
    .section--tight { padding-block: 3.75rem; }
    .split { gap: 2.8rem; }
    .hero { padding-bottom: 4rem; }
    .s-head--split { gap: .4rem; }
    .s-head--split > .btn--ghost { justify-self: start; padding-inline: 0; }
    .cards { grid-template-columns: 1fr; gap: 1rem; }
    .venue__media, .venues--two .venue__media { aspect-ratio: 2 / 1; }
    .venue__body { padding: 1.4rem; }
    .venue__name { font-size: 1.7rem; }
    .venue__time { font-size: 1.5rem; }
    /* Smakenkaart: twee kolommen kleine kaartjes. Van boven naar beneden:
       soort (en "altijd" ernaast), naam, omschrijving, en onderaan achter een lijn
       de allergenen, zodat die in elk kaartje op dezelfde plek staan. */
    .flavours { grid-template-columns: 1fr 1fr; gap: .6rem; }
    .flavour__n { padding: .85rem .95rem .8rem; font-size: 1.05rem; overflow-wrap: anywhere; }
    .flavour[data-vast] .flavour__n { padding-right: 3.4rem; }
    .flavour__b { padding: .75rem .95rem .9rem; }
    .flavour__m { margin: 0 0 .55rem; gap: .3rem .45rem; }
    .flavour__k { padding: .2rem .5rem; font-size: .6rem; }
    .flavour__d { flex: none; margin-bottom: .8rem; font-size: .8rem; line-height: 1.5; }
    .flavour__at { padding-top: .65rem; font-size: .76rem; line-height: 1.45; }
    /* Zoekveld los boven de kaart, de knoppen als één veegbare rij die
       onder de header blijft hangen. 16px in het veld, anders zoomt iOS in. */
    .menu-tools { display: contents; }
    .menu-search { width: 100%; margin: 0 0 .7rem; }
    .menu-search input { padding-block: .75rem; font-size: 1rem; }
    .menu-tools .filters__count { display: none; }
    .menu-tools .filters {
        position: sticky; top: calc(var(--header-h) + var(--demobar-h)); z-index: 5;
        flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
        margin: 0 calc(var(--gutter) * -1) .9rem; padding: .6rem var(--gutter);
        background: var(--cream); box-shadow: 0 1px 0 var(--line-soft);
    }
    .menu-tools .filters::-webkit-scrollbar { display: none; }
    .menu-tools .chip { flex: none; }
    /* Prijskaarten onder elkaar: geen flex-basis als hoogte. */
    .pricecards--row > .pricecard { flex-basis: auto; }
    /* Lunch met formaten: prijzen op een eigen regel, met het formaat erbij. */
    .foodmenu__head .foodmenu__sizes { display: none; }
    .foodmenu__list--sizes .dish { flex-direction: column; align-items: stretch; gap: .6rem; }
    .foodmenu__list--sizes .dish__p { grid-template-columns: repeat(3, 1fr); gap: .4rem; text-align: left; font-size: .92rem; }
    .foodmenu__list--sizes .dish__p > span { background: var(--white); border-radius: var(--radius-sm); padding: .4rem .6rem; }
    .foodmenu__list--sizes .dish__size { position: static; width: auto; height: auto; clip: auto; display: block; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
    /* Specificaties in twee kolommen; een oneven laatste vult de rij. */
    .specs { grid-template-columns: 1fr 1fr; }
    .specs > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .chip { padding: .45rem .8rem; font-size: .8rem; }
    .jumpnav { gap: .4rem; margin-top: 1.6rem; }
    .formcard { padding: 1.4rem 1.2rem; }
    .events-loc { padding: 1.8rem 1.6rem; gap: 1.6rem; }
    /* Foodmenu: prijs onder de kop, knop over de hele breedte. */
    .fmenu { padding: 1.5rem 1.3rem; }
    .fmenu__head { grid-template-columns: 1fr; }
    .fmenu__price { text-align: left; }
    .fmenu__foot .btn { width: 100%; justify-content: center; }
    .tak { padding: 1.7rem 1.4rem; }
    .tak__actions .btn { flex: 1 1 100%; justify-content: center; }
    /* Winteraanbod: compactere kaarten, en ruimte onderin voor de mandjesbalk. */
    .order { padding-bottom: 4.5rem; }
    .shop { gap: .5rem; }
    .shopitem { padding: .8rem 1rem .25rem; }
    .shopitem__n { margin-bottom: 0; }
    .winterpop { left: .8rem; right: .8rem; bottom: .8rem; width: auto; }
}

/* Het hoektabje "Altijd" iets kleiner in de smalle kaartjes op een telefoon. */
@media (max-width: 640px) {
    .flavour__k--vast { padding: .3rem .55rem; font-size: .56rem; }
}