/* Style layer: warm (Monte-inspired lunchroom). Colors from palettes.css.
   Two tones only: solid block field + on-block tone, cream paper below the hero.
   Page is one grid (main) so shared blocks can be re-ordered without touching
   the template: hero block > peeking wide photo card > caps intro + pill CTA >
   full-bleed rule > split (stacked category cards | illustration + caps text) > menu.
   Only 2px rules/borders and hard offset shadows. Every rule scoped to warm. */

:root[data-style="warm"]{
  /* colors only from palettes.css tokens; style wins over the tenant theme (theme-override is :root only) */
  --brand-blue:var(--pal-block);
  --brand-blue-soft:var(--pal-surface);
  --w-black:var(--pal-block);      /* solid field (hero, reviews, footer, today row) */
  --w-gold:var(--pal-on-block);    /* text/lines on the field */
  --w-acc:var(--pal-accent);       /* the one tone on cream: borders, rules, shadows */
  --w-gold-line:var(--w-acc);
  --w-gold-text:var(--pal-accent-ink);
  --paper:var(--pal-bg);
  --paper-2:var(--pal-bg);
  --ink:var(--pal-ink);
  --ink-soft:var(--pal-ink-soft);
  --line:var(--pal-line);
  --w-b:2px solid var(--ink);
  --w-shadow:3px 3px 0 var(--ink);
  --w-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --w-gut:16px;
  --w-sec:76px;
  --w-ill:60vw;              /* hero illustration incl. orbit ring */
  --w-orb:-10%;              /* orbit ring grows past the illustration box */
  --w-lab:calc(var(--w-ill) * .56 + 24px); /* label row under the ring (mobile) */
  --w-peek:20px;
  --w-ill-scale:1.3;         /* line drawing fills the ring (image has wide margins) */             /* stack fan room right of the split card */
}
@media(min-width:800px){:root[data-style="warm"]{--w-gut:40px;--w-sec:140px;--w-ill:22vw;--w-orb:-19%;--w-peek:0px;--w-ill-scale:1.55}}
:root[data-style="warm"]{scroll-padding-top:var(--w-bar)}
:root[data-style="warm"] body{background:var(--paper);color:var(--ink);overflow-x:clip}
:root[data-style="warm"] :focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ---------- caps voice ---------- */
:root[data-style="warm"] .btn,
:root[data-style="warm"] .top nav a,
:root[data-style="warm"] .top .btn-primary,
:root[data-style="warm"] .hero-status-bar,
:root[data-style="warm"] .hero-kicker,
:root[data-style="warm"] .hero-route,
:root[data-style="warm"] .chip,
:root[data-style="warm"] .cat-nav a,
:root[data-style="warm"] .cc-card h3{font-family:"Inter",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.12em;font-weight:500}

/* ---------- top bar: fixed, transparent over the hero, paper + hairline once past it ----------
   Menukaart | wordmark | phone + search. --w-bar-fg flips on-block -> ink with .is-solid (premium.js). */
:root[data-style="warm"]{--w-bar:56px}
@media(min-width:800px){:root[data-style="warm"]{--w-bar:78px}}
:root[data-style="warm"] header.top{--w-bar-fg:var(--w-gold);position:fixed;top:0;left:0;right:0;background:transparent;border:0;box-shadow:0 1px 0 transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transition:background-color .25s ease,box-shadow .25s ease}
:root[data-style="warm"] header.top.is-solid{--w-bar-fg:var(--ink);background:var(--paper);box-shadow:0 1px 0 var(--line)}
:root[data-style="warm"] header.top :is(.brand .name,.brand .name-short,nav a,.btn-primary,.top-search){transition:color .25s ease}
@media(prefers-reduced-motion:reduce){:root[data-style="warm"] header.top,:root[data-style="warm"] header.top *{transition:none}}
:root[data-style="warm"] .top-actions{margin-left:auto}
:root[data-style="warm"] .top-search{display:grid;place-items:center;order:1;width:44px;height:44px;flex:none;margin-right:-10px;padding:0;border:0;border-radius:50%;background:none;color:var(--w-bar-fg);cursor:pointer}
:root[data-style="warm"] .top-search svg{width:20px;height:20px}
:root[data-style="warm"] .top-search-label{display:none}
:root[data-style="warm"] .top .wrap{position:relative;max-width:none;height:var(--w-bar);padding:0 var(--w-gut);gap:4px}
:root[data-style="warm"] .brand{position:absolute;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%)}
:root[data-style="warm"] .brand .mark{display:none}
/* one line always; long names scale down with the viewport to clear Menu | Bel */
:root[data-style="warm"] .brand .name{display:block;white-space:nowrap;text-align:center;color:var(--w-bar-fg);font-family:"Fraunces",Georgia,serif;font-size:clamp(18px,5vw,28px);line-height:1;font-weight:500;letter-spacing:-.01em;text-transform:lowercase}
/* tenant short name (data) wins on small screens */
:root[data-style="warm"] .brand:has(.name-short) .name{display:none}
:root[data-style="warm"] .brand .name-short{display:block;white-space:nowrap;color:var(--w-bar-fg);font-family:"Fraunces",Georgia,serif;font-size:clamp(18px,5vw,28px);line-height:1;font-weight:500;letter-spacing:-.01em;text-transform:lowercase}
:root[data-style="warm"] .top nav{display:flex}
:root[data-style="warm"] .top nav a{color:var(--w-bar-fg);font-size:12px;letter-spacing:.12em;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
:root[data-style="warm"] .top nav a:nth-child(n+2){display:none}
:root[data-style="warm"] .status-pill,
:root[data-style="warm"] [data-open-hours],
:root[data-style="warm"] #topRoute,
:root[data-style="warm"] .top .tel-word,
:root[data-style="warm"] .top .btn-primary svg{display:none!important}
:root[data-style="warm"] .top .tel-num{display:inline;white-space:nowrap;letter-spacing:.06em;font-variant-numeric:tabular-nums}
:root[data-style="warm"] .top .btn-primary{background:none;border:0;box-shadow:none;border-radius:0;color:var(--w-bar-fg);padding:0;min-height:44px;min-width:44px;justify-content:flex-end;font-size:12px;letter-spacing:.12em}
:root[data-style="warm"] .top .btn-primary:hover,:root[data-style="warm"] .top .btn-primary:active{transform:none}
@media(min-width:800px){
  :root[data-style="warm"] .top .wrap{padding:0 39px 0 38px;gap:14px}
  :root[data-style="warm"] .brand .name{font-size:40px;line-height:1;white-space:nowrap}
  :root[data-style="warm"] .brand:has(.name-short) .name{display:block}
  :root[data-style="warm"] .brand .name-short{display:none}
  :root[data-style="warm"] .top nav a,:root[data-style="warm"] .top .btn-primary{font-size:13px;letter-spacing:.12em}
}

/* phone: no room for an absolutely centered wordmark; it takes the flex middle and may wrap to 2 lines */
@media(max-width:799px){
  :root[data-style="warm"] .top nav{order:-1}
  :root[data-style="warm"] .brand{position:static;transform:none;flex:1 1 0;min-width:0;display:flex;justify-content:center}
  :root[data-style="warm"] .brand .name,:root[data-style="warm"] .brand .name-short{white-space:normal;text-wrap:balance;text-align:center;font-size:clamp(15px,4.6vw,22px);line-height:1.05}
  :root[data-style="warm"] .top-actions{margin-left:0}
  :root[data-style="warm"] .top nav a,:root[data-style="warm"] .top .btn-primary{font-size:11px;letter-spacing:.06em}
}

/* ---------- page grid: main owns the order of all blocks ---------- */
:root[data-style="warm"] main{display:grid;grid-template-columns:[full-start] var(--w-gut) [c-start] minmax(0,1fr) [c-end] var(--w-gut) [full-end]}
:root[data-style="warm"] main{overflow-x:clip} /* rotated stack cards and slide-ins never widen the mobile layout viewport */
:root[data-style="warm"] main > *{min-width:0}
:root[data-style="warm"] .hero,
:root[data-style="warm"] .hero > .wrap,
:root[data-style="warm"] .hero-left,
:root[data-style="warm"] .hero-right,
:root[data-style="warm"] .sfeer-pair,
:root[data-style="warm"] .sfeer-pair > .wrap{display:contents}
:root[data-style="warm"] .hero-left > .status-line,
:root[data-style="warm"] .hero-info,
:root[data-style="warm"] .hero-venue-name,
:root[data-style="warm"] .hero-left .acts .btn-line{display:none}
:root[data-style="warm"] .hero-left h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:root[data-style="warm"] #menukaart,
:root[data-style="warm"] #reviews,
:root[data-style="warm"] #tijden{grid-column:full}

/* ---------- 1. hero: full black block ---------- */
:root[data-style="warm"] .hero-media{grid-column:full;grid-row:1;position:relative;display:grid;place-items:center;height:62vh;height:62svh;min-height:460px;max-height:none;margin:0;border-radius:0;background:var(--w-black);overflow:clip}
:root[data-style="warm"] .hero-warm{display:block}
:root[data-style="warm"] .hero-illustration-wrap{width:var(--w-ill);max-width:none;margin:0}
:root[data-style="warm"] .hero-illustration-wrap>svg:first-child{width:100%;height:100%;transform:scale(var(--w-ill-scale));color:var(--w-gold)}
/* inline line art: shapes filled with the field color so front parts mask what is behind them */
:root[data-style="warm"] .hero-illustration-wrap .ill-fill{fill:var(--w-black)}
:root[data-style="warm"] .hero-illustration-wrap svg.orbit-text{inset:var(--w-orb);width:auto;height:auto}
:root[data-style="warm"] .hero-illustration-wrap svg.orbit-text text{fill:var(--w-gold);font-family:"Inter",sans-serif;font-weight:600;font-size:7px;letter-spacing:1.35px;text-transform:uppercase}
/* status left, place right: one row under the ring on mobile, at 50% height on desktop */
:root[data-style="warm"] .hero-status-bar{display:block;position:absolute;left:var(--w-gut);top:50%;transform:translateY(calc(var(--w-lab) - 50%));color:var(--w-gold);font-size:12px;letter-spacing:.04em;line-height:1.2}
:root[data-style="warm"] .hero-status-bar .status-line{color:inherit;font:inherit;letter-spacing:inherit;white-space:nowrap}
:root[data-style="warm"] .hero-status-bar .dot{display:none}
/* right label: full address as route link (replaces the city kicker), wraps, never truncated */
:root[data-style="warm"] .hero-kicker{display:none}
:root[data-style="warm"] .hero-route{display:block;grid-column:c;grid-row:1;align-self:center;justify-self:end;position:relative;z-index:1;transform:translateY(var(--w-lab));max-width:24ch;padding:12px 0;color:var(--w-gold);font-size:12px;font-weight:500;letter-spacing:.04em;line-height:1.3;text-transform:uppercase;text-align:right;text-wrap:balance;text-decoration:none}
:root[data-style="warm"] .hero-route:hover{text-decoration:underline;text-underline-offset:4px}
/* mono aside, the only sentence-case text */
:root[data-style="warm"] .hero-scroll-hint{display:none;position:absolute;left:50%;bottom:84px;transform:translateX(-50%);width:22ch;margin:0;text-align:center;color:var(--w-gold);font-family:var(--w-mono);font-size:13px;line-height:20px;letter-spacing:.02em}
/* <800: status and place stacked + centered, status may wrap (320-430px never overlap) */
@media(max-width:799px){
  :root[data-style="warm"] .hero-status-bar{right:var(--w-gut);transform:translateY(calc(var(--w-lab) - 50% - 14px));text-align:center;text-wrap:balance}
  :root[data-style="warm"] .hero-status-bar .status-line{white-space:normal}
  :root[data-style="warm"] .hero-route{justify-self:center;text-align:center;max-width:none;transform:translateY(calc(var(--w-lab) + 16px))}
}
@media(min-width:800px){
  :root[data-style="warm"] .hero-media{height:72vh;min-height:560px}
  :root[data-style="warm"] .hero-status-bar{inset:0;transform:none;pointer-events:none;font-size:15px}
  :root[data-style="warm"] .hero-status-bar .status-line{position:absolute;left:13%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:22vw;white-space:normal;text-align:center;text-wrap:balance}
  :root[data-style="warm"] .hero-route{grid-column:full;justify-self:start;margin:0 0 0 87%;transform:translateX(-50%);width:max-content;max-width:22vw;text-align:center;font-size:15px}
  :root[data-style="warm"] .hero-scroll-hint{bottom:106px}
}

/* ---------- 2. wide photo card peeking into the hero, two photos cross-fade ---------- */
:root[data-style="warm"] .sfeer-pair__a,
:root[data-style="warm"] .sfeer-pair__b{display:block;grid-column:c;grid-row:2;position:relative;z-index:1;margin:-60px 0 0;aspect-ratio:4/5;border:var(--w-b);border-color:var(--w-gold);border-radius:10px;overflow:hidden;background:var(--w-black);transition:opacity .45s var(--ease)}
:root[data-style="warm"] .sfeer-pair__b{opacity:0;z-index:0}
:root[data-style="warm"] .sfeer-pair.is-swapped .sfeer-pair__b{opacity:1;z-index:2}
:root[data-style="warm"] .sfeer-pair.is-swapped .sfeer-pair__a{opacity:0}
:root[data-style="warm"] .sfeer-pair__a img,
:root[data-style="warm"] .sfeer-pair__b img{width:100%;height:100%;object-fit:cover}
:root[data-style="warm"] .sfeer-nav{display:flex;grid-column:c;grid-row:3;justify-self:end;gap:6px;margin-top:15px}

/* ---------- 3. intro: curved eyebrow, caps statement, one outline pill ---------- */
:root[data-style="warm"] .intro-arc{display:block;grid-column:c;grid-row:4;justify-self:center;width:260px;height:auto;margin-top:var(--w-sec);color:var(--ink)}
:root[data-style="warm"] .intro-arc{overflow:visible}
:root[data-style="warm"] .intro-arc path{d:path("M30,4 Q170,104 310,4")}
:root[data-style="warm"] .intro-arc text{font-family:"Inter",sans-serif;font-size:18px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
:root[data-style="warm"] .hero-left .tagline{grid-column:c;grid-row:5;justify-self:center;max-width:860px;margin:48px 0 0;text-align:center;font-family:"Inter",sans-serif;font-size:26px;line-height:1.08;font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
:root[data-style="warm"] .hero-left .acts{grid-column:c;grid-row:6;display:flex;justify-content:center;margin:36px 0 0;padding:0}
:root[data-style="warm"] .hero-left .acts .btn{width:100%;max-width:320px;min-height:48px}
/* business.intro, when the tenant has one, is the headline; tagline then steps aside */
:root[data-style="warm"] .hero-left .intro-statement{grid-column:c;grid-row:5;justify-self:center;max-width:860px;margin:48px 0 0;text-align:center;font-size:26px;line-height:1.08;font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
:root[data-style="warm"] .hero-left:has(.intro-statement) .tagline{display:none}
@media(min-width:800px){:root[data-style="warm"] .hero-left .intro-statement{font-size:40px;line-height:1.03;margin-top:80px}}
/* 4. full-bleed 2px rule */
:root[data-style="warm"] main::before{content:"";grid-column:full;grid-row:7;height:2px;background:var(--ink);margin-top:80px}

/* ---------- 5. split: card with fanned stack | illustration + caps text ---------- */
:root[data-style="warm"] .cc-grid{grid-column:c;grid-row:8;position:relative;z-index:4;margin-top:var(--w-sec);display:flex;gap:0;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;aspect-ratio:4/5;margin-right:var(--w-peek);border:var(--w-b);border-radius:10px;background:var(--paper)}
:root[data-style="warm"] .cc-grid::-webkit-scrollbar{display:none}
/* three cream cards with a 2px accent outline fanned behind (pseudo boxes of display:contents
   wrappers land in main's grid), rotated 1-3deg like Monte's stack */
:root[data-style="warm"] .hero::before,
:root[data-style="warm"] .hero::after,
:root[data-style="warm"] .hero > .wrap::before{content:"";grid-column:c;grid-row:8;position:relative;margin-right:var(--w-peek);border:var(--w-b);border-radius:10px;transform-origin:0 50%}
:root[data-style="warm"] .hero::before{z-index:3;background:var(--paper) var(--w-stack-1,none) center/cover no-repeat;margin-top:calc(var(--w-sec) + 16px);margin-bottom:16px;transform:translateX(8px) rotate(1deg)}
:root[data-style="warm"] .hero::after{z-index:2;background:var(--paper) var(--w-stack-2,none) center/cover no-repeat;margin-top:calc(var(--w-sec) + 32px);margin-bottom:32px;transform:translateX(14px) rotate(2deg)}
:root[data-style="warm"] .hero > .wrap::before{z-index:1;background:var(--paper) var(--w-stack-3,none) center/cover no-repeat;margin-top:calc(var(--w-sec) + 48px);margin-bottom:48px;transform:translateX(20px) rotate(3deg)}
:root[data-style="warm"] .cc-card{flex:0 0 100%;position:relative;scroll-snap-align:start;padding:0;border-radius:0;background:none;box-shadow:none;transform:none}
:root[data-style="warm"] .cc-card:hover{box-shadow:none;transform:none}
:root[data-style="warm"] .cc-card:has(.cc-media-empty){display:none}
:root[data-style="warm"] .cc-media{aspect-ratio:auto;height:100%;margin:0;border-radius:0}
:root[data-style="warm"] .cc-card h3{position:absolute;left:14px;bottom:14px;padding:9px 16px;border:var(--w-b);border-radius:999px;background:var(--paper);color:var(--ink);font-size:12px;line-height:1.2;box-shadow:var(--w-shadow)}
:root[data-style="warm"] .cc-nav{grid-column:c;grid-row:9;display:flex;justify-content:center;gap:16px;margin:16px var(--w-peek) 0 0}
:root[data-style="warm"] .cc-arrow{position:relative;width:40px;height:40px;border-radius:50%;border:var(--w-b);background:var(--paper);color:var(--ink);display:grid;place-items:center;padding:0;min-height:0;cursor:pointer;box-shadow:var(--w-shadow);transition:transform .18s var(--ease)}
:root[data-style="warm"] .cc-arrow::after{content:"";position:absolute;inset:-4px;border-radius:50%} /* 48px hit area */
:root[data-style="warm"] .cc-arrow svg{width:16px;height:16px;stroke-width:1.5}
:root[data-style="warm"] .cc-arrow:hover{transform:translate(-1px,-1px)}
:root[data-style="warm"] .cc-arrow:active{transform:translate(2px,2px)}
:root[data-style="warm"] .hero-left .hero-address{grid-column:c;grid-row:10;justify-self:center;align-self:center;max-width:440px;margin:40px 0 0;text-align:center;font-size:16px;line-height:20px;font-weight:500;letter-spacing:.01em;text-transform:uppercase;color:var(--ink);text-wrap:balance}
/* line illustration recoloured to --pal-accent on transparent (svg filter #tint-accent in index.html) */
:root[data-style="warm"] .hero-left .hero-address::before{content:"";display:block;width:160px;aspect-ratio:1;margin:0 auto 36px;background:url("../img/illustratie.webp") center/150% no-repeat;
  filter:url(#tint-accent)}
@media(min-width:800px){
  :root[data-style="warm"] main{grid-template-columns:[full-start] minmax(var(--w-gut),1fr) [c-start] minmax(0,556px) minmax(24px,70px) minmax(0,504px) [c-end] minmax(var(--w-gut),1fr) [full-end]}
  :root[data-style="warm"] .sfeer-pair__a,
  :root[data-style="warm"] .sfeer-pair__b{margin-top:-90px;aspect-ratio:1130/600;border-radius:12px}
  :root[data-style="warm"] .intro-arc{width:340px;margin-top:150px}
  :root[data-style="warm"] .hero-left .tagline{max-width:min(860px,15em);font-size:40px;line-height:1.03;margin-top:80px}
  :root[data-style="warm"] .hero-left .acts{margin-top:56px}
  :root[data-style="warm"] .hero-left .acts .btn{width:236px;min-height:45px;height:45px}
  :root[data-style="warm"] main::before{margin-top:133px}
  :root[data-style="warm"] .cc-grid{grid-column:c-start / span 1;aspect-ratio:8/9;border-radius:12px}
  :root[data-style="warm"] .hero::before,
  :root[data-style="warm"] .hero::after,
  :root[data-style="warm"] .hero > .wrap::before{grid-column:c-start / span 1;border-radius:12px}
  :root[data-style="warm"] .hero::before{margin-top:calc(var(--w-sec) + 40px);margin-bottom:40px;transform:translateX(24px) rotate(1deg)}
  :root[data-style="warm"] .hero::after{margin-top:calc(var(--w-sec) + 80px);margin-bottom:80px;transform:translateX(40px) rotate(2deg)}
  :root[data-style="warm"] .hero > .wrap::before{margin-top:calc(var(--w-sec) + 120px);margin-bottom:120px;transform:translateX(52px) rotate(3deg)}
  :root[data-style="warm"] .cc-card h3{left:20px;bottom:20px;font-size:13px}
  :root[data-style="warm"] .cc-nav{grid-column:c-start / span 1;margin-top:16px}
  :root[data-style="warm"] .hero-left .hero-address{grid-column:4 / c-end;grid-row:8;margin:var(--w-sec) 0 0;font-size:20px;line-height:24px}
  :root[data-style="warm"] .hero-left .hero-address::before{width:237px;height:220px;aspect-ratio:auto;margin-bottom:62px}
  :root[data-style="warm"] #menukaart{grid-row:10}
  :root[data-style="warm"] #reviews{grid-row:11}
  :root[data-style="warm"] #tijden{grid-row:12}
}
:root[data-style="warm"] #menukaart{grid-row:11}
:root[data-style="warm"] #reviews{grid-row:12}
:root[data-style="warm"] #tijden{grid-row:13}
@media(min-width:800px){:root[data-style="warm"] #menukaart{grid-row:10}:root[data-style="warm"] #reviews{grid-row:11}:root[data-style="warm"] #tijden{grid-row:12}}

/* ---------- buttons: outline pill in gold, hard offset shadow ---------- */
:root[data-style="warm"] .btn{border-radius:999px;padding:12px 28px;min-height:45px;background:transparent;color:var(--ink);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:13px;font-weight:600}
:root[data-style="warm"] .btn:hover{transform:translate(-1px,-1px)}
:root[data-style="warm"] .btn:active{transform:translate(3px,3px)}
:root[data-style="warm"] .btn-primary,
:root[data-style="warm"] .btn-line{background:transparent;color:var(--ink);border-color:var(--ink)}
/* mobile quick bar: cream + gold outline pills, slides in only once the hero has scrolled away */
:root[data-style="warm"] .sticky-cta{background:var(--paper);border-top:var(--w-b);backdrop-filter:none;-webkit-backdrop-filter:none;gap:14px;padding:12px max(16px,env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
:root[data-style="warm"] .sticky-cta .btn{flex:1 1 0;min-width:0;min-height:44px;padding:10px 12px;box-shadow:3px 3px 0 var(--ink)}
@supports (animation-timeline: scroll()){
  :root[data-style="warm"] .sticky-cta{animation:warm-cta-in linear both;animation-timeline:scroll(root);animation-range:70vh 100vh}
}
@keyframes warm-cta-in{from{transform:translateY(110%)}to{transform:none}}

/* ---------- menu ---------- */
:root[data-style="warm"] #menukaart{padding:var(--w-sec) 0;margin-top:var(--w-sec);border-top:var(--w-b)}
:root[data-style="warm"] #menukaart > .wrap,
:root[data-style="warm"] #tijden > .wrap,
:root[data-style="warm"] #reviews > .wrap,
:root[data-style="warm"] footer > .wrap{max-width:1162px;padding:0 var(--w-gut)}
@media(min-width:800px){
  :root[data-style="warm"] #menukaart > .wrap,:root[data-style="warm"] #tijden > .wrap,
  :root[data-style="warm"] #reviews > .wrap,:root[data-style="warm"] footer > .wrap{padding:0 16px}
}
:root[data-style="warm"] .sec-head{max-width:none;margin-bottom:36px}
:root[data-style="warm"] .sec-head h2{font-family:"Inter",sans-serif;font-size:26px;line-height:1.08;font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink)}
:root[data-style="warm"] #menukaart > .wrap > .sec-head{text-align:center}
@media(min-width:800px){
  :root[data-style="warm"] .sec-head{margin-bottom:56px}
  :root[data-style="warm"] .sec-head h2{font-size:40px;line-height:1.03}
}

:root[data-style="warm"] .menu-tools{gap:12px;margin-bottom:36px}
:root[data-style="warm"] .search{background:transparent;border:var(--w-b);border-radius:999px;padding:0 18px;flex:1 1 220px;min-width:0}
:root[data-style="warm"] .search svg{color:var(--ink)}
:root[data-style="warm"] .search input{color:var(--ink);font-size:16px;min-width:0;text-transform:uppercase;letter-spacing:.06em;font-weight:500}
:root[data-style="warm"] .search input::placeholder{color:var(--ink-soft);opacity:1;text-transform:uppercase}
:root[data-style="warm"] .chips{flex-wrap:wrap}
:root[data-style="warm"] .chip{background:transparent;border:var(--w-b);color:var(--ink);font-size:12px;font-weight:600;padding:8px 16px}
:root[data-style="warm"] .chip[aria-pressed="true"]{background:var(--w-black);color:var(--w-gold);border-color:var(--w-black)}

/* Uitgelicht strip */
:root[data-style="warm"] .pop-wrap{margin:0 0 56px}
:root[data-style="warm"] .pop-wrap .sec-head{margin-bottom:20px;text-align:left}
:root[data-style="warm"] .pop-wrap .sec-head h2{font-size:13px;line-height:1.2;letter-spacing:.12em;font-weight:600;color:var(--w-gold-text)}
:root[data-style="warm"] .pop-row{gap:18px;padding:0 6px 8px 0}
:root[data-style="warm"] .pop-card{flex:0 0 148px}
:root[data-style="warm"] .pop-card .pc-media{display:block;background:var(--paper);border:var(--w-b);border-radius:12px;box-shadow:var(--w-shadow);margin-bottom:12px}
:root[data-style="warm"] .pop-card .pc-name{display:block;font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1.25}
:root[data-style="warm"] .pop-card .pc-price{color:var(--w-gold-text);font-weight:600;font-size:13px}
@media(min-width:800px){:root[data-style="warm"] .pop-card{flex-basis:168px}}
:root[data-style="warm"] .pop-card .pc-media:not(:has(img)),
:root[data-style="warm"] .row .thumb:not(:has(img)){display:none}
/* until a lazy photo paints, the slot shows the gold line illustration, never an empty box */
:root[data-style="warm"] .pop-card .pc-media,
:root[data-style="warm"] .row .thumb{position:relative;overflow:hidden}
:root[data-style="warm"] .pop-card .pc-media::before,
:root[data-style="warm"] .row .thumb::before{content:"";position:absolute;inset:6%;background:url("../img/illustratie.webp") center/135% no-repeat;
  filter:url(#tint-accent)}
:root[data-style="warm"] .pop-card .pc-media img,
:root[data-style="warm"] .row .thumb img{position:relative;z-index:1}
:root[data-style="warm"] .pop-card .pc-media img,
:root[data-style="warm"] .row .thumb img{filter:sepia(.22) saturate(1.08)}

/* sticky category nav */
:root[data-style="warm"] .cat-nav{top:var(--w-bar);background:var(--paper);border-bottom:var(--w-b);margin-bottom:32px;gap:22px;padding:4px 0}
:root[data-style="warm"] .cat-nav a{color:var(--ink-soft);font-size:12px;font-weight:600}
:root[data-style="warm"] .cat-nav a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
:root[data-style="warm"] .cat-section{margin-bottom:40px;scroll-margin-top:62px} /* + root scroll-padding (bar): clears the horizontal cat-nav */
@media(min-width:1024px){
  :root[data-style="warm"] .menu-layout{gap:56px}
  :root[data-style="warm"] .cat-nav{top:calc(var(--w-bar) + 32px);gap:0;border-bottom:0;border-left:var(--w-b);padding:0;margin:0}
  :root[data-style="warm"] .cat-nav a{border-radius:0;padding:10px 18px;margin-left:-2px;border-left:2px solid transparent}
  :root[data-style="warm"] .cat-nav a{color:color-mix(in srgb, var(--ink-soft) 55%, var(--paper));transition:color .2s,background-color .2s,border-color .2s}
  :root[data-style="warm"] .cat-nav a.active{color:var(--pal-on-block,#fff);background:var(--pal-block,var(--ink));box-shadow:none;border-left-color:var(--pal-block,var(--ink))}
  :root[data-style="warm"] .cat-section{scroll-margin-top:32px}
}

/* boards: open on mobile (room for prices), 2px card on desktop */
:root[data-style="warm"] .board{background:transparent;border:0;border-radius:0;padding:0}
:root[data-style="warm"] .board h3{font-family:"Inter",sans-serif;font-size:22px;line-height:1.08;font-weight:600;letter-spacing:-.01em;text-transform:uppercase;color:var(--ink);margin:0 0 20px}
:root[data-style="warm"] .board .note{font-family:var(--w-mono);font-style:normal;font-size:12.5px;color:var(--ink-soft)}
:root[data-style="warm"] .board h4{font-family:"Inter",sans-serif;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--w-gold-text);border-bottom:var(--w-b);padding-bottom:10px;margin-bottom:6px}
:root[data-style="warm"] .row{padding:11px 6px;gap:12px}
:root[data-style="warm"] .row:hover{background:color-mix(in srgb, var(--w-acc) 10%, transparent)}
:root[data-style="warm"] .row .n{font-size:14px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
:root[data-style="warm"] .row .n small{font-family:var(--w-mono);font-style:normal;text-transform:none;letter-spacing:0;font-size:12px;color:var(--ink-soft)}
:root[data-style="warm"] .row .l{display:none}
:root[data-style="warm"] .row .p{color:var(--ink);font-size:14px}
:root[data-style="warm"] .row .p em{color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;font-size:11px}
:root[data-style="warm"] .row .thumb{border:var(--w-b);border-radius:8px;background:var(--paper)}
:root[data-style="warm"] .row .plus{position:relative;width:36px;height:36px;background:var(--paper);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)}
/* 36px visual, 44px hit area (Uber Eats sized touch target) */
:root[data-style="warm"] .row .plus::before{content:"";position:absolute;inset:-6px}
:root[data-style="warm"] .row .plus svg{color:var(--ink);stroke-width:2.25}
:root[data-style="warm"] .tag{background:transparent;border:var(--w-b);border-radius:999px;color:var(--w-gold-text);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:1px 7px}
:root[data-style="warm"] .kids{background:transparent;border:var(--w-b);border-radius:12px;box-shadow:var(--w-shadow);text-transform:uppercase;font-size:14px}
:root[data-style="warm"] .kids h4{font-family:"Inter",sans-serif;font-weight:600;font-size:18px}
:root[data-style="warm"] .no-results{font-family:var(--w-mono);font-style:normal}
@media(min-width:760px){
  :root[data-style="warm"] .board{border:var(--w-b);border-radius:12px;padding:32px 32px 34px;box-shadow:4px 4px 0 var(--ink)}
  :root[data-style="warm"] .row{padding:8px 6px}
  :root[data-style="warm"] .board .group{margin-bottom:22px}
  :root[data-style="warm"] .board h3{font-size:28px}
}

/* ---------- reviews: black block ---------- */
:root[data-style="warm"] #reviews{background:var(--w-black);border:0;padding:var(--w-sec) 0;--ink:var(--w-gold);--ink-soft:var(--w-gold)}
:root[data-style="warm"] .review-card{background:transparent;border:2px solid var(--w-gold);border-radius:12px}
:root[data-style="warm"] .review-card p{font-style:normal;text-transform:uppercase;font-weight:500}
:root[data-style="warm"] .review-card cite{font-family:var(--w-mono)}

/* ---------- hours / contact ---------- */
:root[data-style="warm"] #tijden{border-top:var(--w-b);padding:var(--w-sec) 0}
:root[data-style="warm"] #tijden .sec-head{margin-bottom:24px!important}
:root[data-style="warm"] #tijden p{font-family:var(--w-mono);font-size:13px;color:var(--ink-soft)!important}
:root[data-style="warm"] .tijden{border-top:var(--w-b)}
:root[data-style="warm"] .tijden li{border-bottom:var(--w-b);text-transform:uppercase;letter-spacing:.06em;font-size:14px;font-weight:500}
:root[data-style="warm"] .tijden li.now{background:var(--w-black);color:var(--w-gold);border-radius:999px;padding:12px 18px;margin:2px -10px}
:root[data-style="warm"] .tijden li.now{justify-content:flex-start}
:root[data-style="warm"] .tijden li.now b{margin-left:auto}
:root[data-style="warm"] .tijden li.now span,:root[data-style="warm"] .tijden li.now b{color:var(--w-gold)}
:root[data-style="warm"] .card{background:transparent;border:var(--w-b);border-radius:12px;padding:28px;box-shadow:4px 4px 0 var(--w-gold-line)}
:root[data-style="warm"] .card h3{font-family:"Inter",sans-serif;font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--w-gold-text)}
:root[data-style="warm"] .card p{text-transform:uppercase;font-weight:500;letter-spacing:.02em;color:var(--ink)}
:root[data-style="warm"] .tel{font-family:"Inter",sans-serif;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
:root[data-style="warm"] .map{background:var(--paper);border:var(--w-b);border-radius:12px}
:root[data-style="warm"] .map .pin{background:var(--w-black)}
:root[data-style="warm"] .map span{border:var(--w-b);border-radius:999px;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:600}

/* ---------- footer: black block ---------- */
:root[data-style="warm"] footer{background:var(--w-black);color:var(--w-gold);border:0;padding:56px 0 64px;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:500}
:root[data-style="warm"] footer b{color:var(--w-gold);font-family:"Fraunces",Georgia,serif;text-transform:lowercase;letter-spacing:-.01em;font-size:28px;font-weight:500}

/* ---------- sheets: cream, 2px, hard shadows ---------- */
:root[data-style="warm"] dialog#dish-sheet{background:var(--paper);border-top:var(--w-b);box-shadow:none}
:root[data-style="warm"] dialog#hours-sheet{background:var(--paper);border:var(--w-b);box-shadow:6px 6px 0 var(--w-gold-line)}
:root[data-style="warm"] dialog::backdrop{background:color-mix(in srgb, var(--pal-block) 55%, transparent)}
:root[data-style="warm"] .sheet-body h3{color:var(--ink);font-family:"Inter",sans-serif;font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:-.01em}
:root[data-style="warm"] .sheet-desc{font-family:var(--w-mono);font-style:normal;font-size:13px}
:root[data-style="warm"] .sheet-close{background:var(--paper);border:var(--w-b);color:var(--ink)}
:root[data-style="warm"] .sheet-grabber{background:var(--w-gold-line)}
:root[data-style="warm"] .sheet-media{border:var(--w-b);border-radius:12px}
:root[data-style="warm"] #sheetCall{width:100%}


/* ---------- ordering (cart.js hooks), Uber Eats flow in warm voice:
   one full-width solid CTA per step (add / checkout / place) with price, outline pill
   steppers right of each line, thumb left, "add more" pill under the lines.
   All caps, 2px accent borders, hard offset shadows (no blur). ---------- */
:root[data-style="warm"] .cart-head h3,
:root[data-style="warm"] .cl-name,
:root[data-style="warm"] .cart-sum,
:root[data-style="warm"] .cart-pickup,
:root[data-style="warm"] .field-label,
:root[data-style="warm"] .co-summary h4,
:root[data-style="warm"] .cart-bar,
:root[data-style="warm"] .cart-done h3,
:root[data-style="warm"] .done-facts dt{font-family:"Inter",system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
:root[data-style="warm"] .cart-head h3{color:var(--ink);font-weight:600;font-size:20px;letter-spacing:.02em}
:root[data-style="warm"] .cart-head,
:root[data-style="warm"] .cart-foot{border-color:var(--ink);border-width:2px}
:root[data-style="warm"] .cart-pickup{font-size:12px;color:var(--ink-soft)}
:root[data-style="warm"] .cl-name{font-size:14px;font-weight:600;letter-spacing:.04em}
:root[data-style="warm"] .cl-meta,
:root[data-style="warm"] .field-note{font-family:var(--w-mono);font-size:12.5px}
/* solid accent CTAs: the only filled buttons in warm, each with the hard offset shadow */
:root[data-style="warm"] .add-btn,
:root[data-style="warm"] .cart-cta.btn-primary{background:var(--pal-accent);color:var(--pal-on-accent);border:2px solid var(--pal-accent);box-shadow:4px 4px 0 var(--pal-block-2);min-height:52px;font-size:13px;letter-spacing:.1em;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
:root[data-style="warm"] .add-btn:hover,
:root[data-style="warm"] .cart-cta.btn-primary:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pal-block-2)}
:root[data-style="warm"] .add-btn:active,
:root[data-style="warm"] .cart-cta.btn-primary:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--pal-block-2)}
:root[data-style="warm"] .cart-cta:disabled{opacity:.45;transform:none}
/* stepper: cream outline pill, round buttons, no tan fill */
:root[data-style="warm"] .stepper{border:var(--w-b);background:var(--paper);padding:3px;box-shadow:2px 2px 0 var(--ink)}
:root[data-style="warm"] .step-btn{background:transparent;color:var(--ink)}
:root[data-style="warm"] .step-btn:hover:not(:disabled){background:color-mix(in srgb, var(--ink) 10%, transparent)}
:root[data-style="warm"] .step-qty{font-weight:700;font-family:"Inter",sans-serif}
:root[data-style="warm"] .add-row .stepper{min-height:52px}
:root[data-style="warm"] .field-input{border:var(--w-b);border-radius:12px;background:var(--paper)}
:root[data-style="warm"] .field-label{font-size:12px;font-weight:600;letter-spacing:.1em}
/* cart line: [thumb] name + meta over price, stepper right; 2px accent rule */
:root[data-style="warm"] .cart-line{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"main step" "price step";gap:2px 12px;padding:14px 0;border-bottom:var(--w-b)}
:root[data-style="warm"] .cart-line .cl-main{grid-area:main}
:root[data-style="warm"] .cart-line .cl-price{grid-area:price;justify-self:start;font-weight:600;color:var(--ink-soft)}
:root[data-style="warm"] .cart-line .stepper{grid-area:step;align-self:center;justify-self:end}
:root[data-style="warm"] .cl-thumb{border:var(--w-b);border-radius:10px;background:var(--paper)}
:root[data-style="warm"] .cart-back,
:root[data-style="warm"] .sheet-close{border:var(--w-b);background:var(--paper);color:var(--ink);box-shadow:2px 2px 0 var(--ink)}
/* "meer toevoegen": small outline pill, right under the lines */
:root[data-style="warm"] .cart-addmore{min-height:40px;padding:8px 18px;font-size:12px;box-shadow:3px 3px 0 var(--ink)}
:root[data-style="warm"] .cart-sum{font-size:15px;font-weight:600;padding:4px 0;letter-spacing:.08em}
:root[data-style="warm"] .cart-sum b{font-size:17px;letter-spacing:0}
:root[data-style="warm"] .co-summary,
:root[data-style="warm"] .done-facts{border:var(--w-b);background:transparent;box-shadow:3px 3px 0 var(--ink)}
:root[data-style="warm"] .co-lines li{text-transform:uppercase;letter-spacing:.04em;font-size:13px}
/* dock bar: solid accent pill, cream count chip, hard shadow */
:root[data-style="warm"] .cart-bar{background:var(--pal-accent);color:var(--pal-on-accent);border:2px solid var(--pal-accent);box-shadow:4px 4px 0 var(--pal-block-2);font-size:13px;font-weight:600;letter-spacing:.1em;transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
:root[data-style="warm"] .cart-bar:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--pal-block-2)}
:root[data-style="warm"] .cart-bar-count{background:var(--pal-on-accent);color:var(--pal-accent);letter-spacing:0}
:root[data-style="warm"] .cart-bar-total{letter-spacing:0;font-size:15px}
:root[data-style="warm"] .cart-dock{border-top:var(--w-b);background:var(--paper);padding-right:max(20px,env(safe-area-inset-right))}
@media(min-width:800px){
  :root[data-style="warm"] .cart-dock{border:0;background:none;padding:0}
  :root[data-style="warm"] .cart-bar{box-shadow:5px 5px 0 var(--pal-block-2)}
}
:root[data-style="warm"] dialog#cart-sheet{background:var(--paper);border-top:var(--w-b)}
@media(min-width:1024px){:root[data-style="warm"] dialog#cart-sheet{border-top:0;border-left:var(--w-b);box-shadow:none}}
:root[data-style="warm"] dialog#cart-sheet::backdrop{background:color-mix(in srgb, var(--pal-block) 55%, transparent)}
:root[data-style="warm"] .row .plus.has-qty{background:var(--pal-accent)!important;border-color:var(--pal-accent)!important}
:root[data-style="warm"] .plus-qty{color:var(--pal-on-accent)}
/* Uitgelicht: Uber Eats style round + on the photo, bottom right (decorative: whole card is the button, opens the dish sheet) */
:root[data-style="warm"][data-order="on"] .pop-card .pc-media::after{content:"";position:absolute;right:8px;bottom:8px;z-index:2;width:36px;height:36px;border-radius:50%;border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);
  background:linear-gradient(var(--ink),var(--ink)) center/14px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) center/2px 14px no-repeat,var(--paper);transition:transform .15s var(--ease)}
:root[data-style="warm"][data-order="on"] .pop-card:hover .pc-media::after{transform:scale(1.08)}
:root[data-style="warm"][data-order="on"] .pop-card:active .pc-media::after{transform:scale(.92)}
/* keep the last menu lines and footer clear of the mobile dock */
@media(max-width:1023px){:root[data-style="warm"][data-order="on"].has-cart body{padding-bottom:88px}}
/* >=800: bottom-right like Uber Eats (premium.css), wide enough that the label never truncates, clear of the category rail */
@media(min-width:800px){:root[data-style="warm"] .cart-bar{min-width:340px}:root[data-style="warm"] .cart-bar-label{overflow:visible}}

/* ---------- hero motion: load choreography + scroll-linked parallax / ring turn.
   Individual translate/rotate/scale properties compose with the layout transforms above. ---------- */
@media (prefers-reduced-motion: no-preference){
  :root[data-style="warm"] .brand .name,
  :root[data-style="warm"] .brand .name-short{animation:warm-rise .9s cubic-bezier(.2,.7,.2,1) .1s both}
  /* hero drawing ~1.6s: cone draws, fries drop in one by one, mayo lands, fork pokes in; ring spins in after */
  :root[data-style="warm"] .hero-illustration-wrap .ill-cone{stroke-dasharray:1;animation:warm-draw .55s cubic-bezier(.65,0,.35,1) .1s both}
  :root[data-style="warm"] .hero-illustration-wrap .ill-cone-flap{animation-delay:.3s}
  :root[data-style="warm"] .hero-illustration-wrap .ill-fry{transform-box:fill-box;transform-origin:50% 100%;animation:warm-fry-drop .42s cubic-bezier(.3,.7,.4,1) calc(.45s + var(--i) * 55ms) both}
  :root[data-style="warm"] .hero-illustration-wrap .ill-mayo{transform-box:fill-box;transform-origin:50% 100%;animation:warm-mayo .38s cubic-bezier(.3,.7,.4,1) 1.1s both}
  :root[data-style="warm"] .hero-illustration-wrap .ill-fork{animation:warm-fork .3s cubic-bezier(.3,.7,.4,1) 1.32s both}
  :root[data-style="warm"] .hero-illustration-wrap svg.orbit-text{animation:warm-ring-in 1s cubic-bezier(.2,.7,.2,1) 1.35s both,orbit-spin 40s linear 2.35s infinite}
  :root[data-style="warm"] .hero-status-bar .status-line{animation:warm-slide-l .9s cubic-bezier(.2,.7,.2,1) .7s both}
  :root[data-style="warm"] .hero-route{animation:warm-slide-r .9s cubic-bezier(.2,.7,.2,1) .7s both}
  @supports (animation-timeline: scroll()){
    :root[data-style="warm"] .hero-illustration-wrap>svg:first-child{animation:warm-parallax linear both;animation-timeline:scroll(root);animation-range:0 80vh}
    :root[data-style="warm"] .hero-illustration-wrap svg.orbit-text{animation:warm-ring-in 1s cubic-bezier(.2,.7,.2,1) 1.35s both,orbit-spin 40s linear 2.35s infinite,warm-ring-scroll linear both;animation-timeline:auto,auto,scroll(root);animation-range:normal,normal,0 80vh;animation-composition:replace,replace,add}
  }
}
@keyframes warm-rise{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}
@keyframes warm-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes warm-fry-drop{0%{opacity:0;translate:0 -460px;rotate:-7deg}55%{opacity:1}75%{translate:0 14px;rotate:2deg}100%{opacity:1;translate:0 0;rotate:0deg}}
@keyframes warm-mayo{0%{opacity:0;scale:0}60%{opacity:1;scale:1.12 .86}82%{scale:.96 1.05}100%{opacity:1;scale:1}}
@keyframes warm-fork{0%{opacity:0;translate:0 -120px}70%{opacity:1;translate:0 9px}100%{opacity:1;translate:0 0}}
@keyframes warm-ring-in{from{opacity:0;rotate:-120deg;scale:.86}to{opacity:1;rotate:0deg;scale:1}}
@keyframes warm-ring-scroll{from{rotate:0deg}to{rotate:90deg}}
@keyframes warm-parallax{from{translate:0 0}to{translate:0 22%}}
@keyframes warm-slide-l{from{opacity:0;translate:-28px 0}to{opacity:1;translate:0 0}}
@keyframes warm-slide-r{from{opacity:0;translate:28px 0}to{opacity:1;translate:0 0}}
:root[data-style="warm"] .group-more{border:var(--w-b);box-shadow:2px 2px 0 var(--ink);font-size:12px;letter-spacing:.1em;text-transform:uppercase}