/* ==========================================================================
   Delevo — redesign 2026-10-18 ("Jouw dag. Jouw smaak.")
   Laadt na style.css op alle informatiepagina's (niet in /app).
   Deel 1 = merk (kleur, type, knoppen, header, footer) voor alle pagina's.
   Deel 2 = homepage (prefix hx-), mobile-first.
   Bewegingstaal: knoppen 180 ms, inhoud 480 ms, hero eigen timing. Alleen transform + opacity.
   ========================================================================== */

:root {
  --hx-paper: #FBF8F2;
  --hx-white: #FFFFFF;
  --hx-sand: #F3EEE4;
  --hx-sand-2: #E9E1D2;
  --hx-mint: #EBF7F1;
  --hx-mint-2: #D3F0E3;
  --hx-green: #1FA06B;      /* officieel Delevo-groen (= logo): ringen, vlakken, accenten, grote tekst */
  --hx-green-btn: #198056;  /* zelfde tint, één stap dieper: wit erop = 4,9:1 */
  --hx-green-ink: #156B47;  /* groene tekst op licht = 6,1:1 */
  --hx-ink: #17221C;
  --hx-ink-2: #56625B;
  --hx-line: #E3DACA;
  --hx-tomato: #C2502F;
  --hx-serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --hx-sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hx-ease: cubic-bezier(.22, .8, .24, 1);
  --hx-out: cubic-bezier(.16, 1, .3, 1);
  --hx-fast: 180ms;
  --hx-mid: 480ms;
  --hx-max: 1240px;
  --hx-gut: clamp(16px, 5vw, 56px);
  --hx-head: 64px;

  /* style.css gebruikt deze: zelfde merk, warmer papier */
  --dv-green: var(--hx-green-btn);
  --dv-green-dark: var(--hx-green-ink);
  --dv-green-light: var(--hx-mint);
  --dv-bg: var(--hx-sand);
  --dv-ink: var(--hx-ink);
  --dv-ink-2: var(--hx-ink-2);
  --dv-line: var(--hx-line);
}
[lang="ar"] {
  --hx-serif: 'IBM Plex Sans Arabic', 'Fraunces', Georgia, serif;
  --hx-sans: 'IBM Plex Sans Arabic', 'Manrope', system-ui, sans-serif;
  --dv-font: var(--hx-sans);
}

body { background: var(--hx-paper); color: var(--hx-ink); }
.dv-sec--bg { background: var(--hx-sand); }

/* koppen: editoriaal */
h1, .dv-h2, .dv-page-hero h1 {
  font-family: var(--hx-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
[lang="ar"] h1, [lang="ar"] .dv-h2 { font-weight: 600; letter-spacing: 0; line-height: 1.25; }

/* knoppen (alle pagina's) */
.dv-btn { border-radius: 999px; transition: background-color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease), transform var(--hx-fast) var(--hx-ease); }
.dv-btn--primary { background: var(--hx-green-btn); border-color: var(--hx-green-btn); }
.dv-btn--primary:hover { background: var(--hx-green-ink); border-color: var(--hx-green-ink); }
.dv-btn--ghost { border-color: var(--hx-line); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, .dv-btn:focus-visible {
  outline: 2px solid var(--hx-green-ink);
  outline-offset: 3px;
}

/* ---------- header ---------- */
.dv-head { background: var(--hx-paper); border-bottom: 1px solid transparent; transition: border-color var(--hx-mid) var(--hx-ease), background-color var(--hx-mid) var(--hx-ease); }
.dv-head.is-scrolled { border-bottom-color: var(--hx-line); }
.dv-head-in { max-width: var(--hx-max); padding: 0 var(--hx-gut); height: var(--hx-head); }
.dv-head-spacer { height: var(--hx-head); }
.dv-logo { display: inline-flex; align-items: center; min-height: 44px; }
.dv-logo img { height: 34px; }
.dv-nav a { font-size: 15px; font-weight: 600; color: var(--hx-ink); border-bottom: 1px solid transparent; transition: border-color var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease); }
.dv-nav a:hover, .dv-nav a.is-active { border-bottom-color: var(--hx-ink); }
.dv-head-cta { min-height: 44px; }
.dv-lang-btn { min-height: 44px; }
@media (max-width: 900px) {
  :root { --hx-head: 60px; }
  .dv-head-in, .dv-head-spacer { height: var(--hx-head); }
  .dv-nav {
    inset: var(--hx-head) 0 0 0;
    background: var(--hx-paper);
    padding: 12px var(--hx-gut) calc(28px + env(safe-area-inset-bottom));
  }
  .dv-nav a {
    font-family: var(--hx-serif);
    font-weight: 400;
    font-size: 28px;
    letter-spacing: -0.01em;
    padding: 14px 0;
    border-bottom: 1px solid var(--hx-line);
  }
  [lang="ar"] .dv-nav a { font-weight: 600; font-size: 24px; }
  .dv-nav.is-open a { animation: hxNavIn 420ms var(--hx-out) both; }
  .dv-nav.is-open a:nth-child(2) { animation-delay: 30ms; }
  .dv-nav.is-open a:nth-child(3) { animation-delay: 60ms; }
  .dv-nav.is-open a:nth-child(4) { animation-delay: 90ms; }
  .dv-nav.is-open a:nth-child(5) { animation-delay: 120ms; }
  .dv-nav.is-open a:nth-child(6) { animation-delay: 150ms; }
  .dv-nav.is-open a:nth-child(7) { animation-delay: 180ms; }
  .dv-head-cta { min-height: 44px; }
  .dv-burger { width: 44px; height: 44px; }
}
@keyframes hxNavIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.dv-nav-langs { display: none; }
@media (max-width: 900px) {
  .dv-nav .dv-nav-langs { display: flex; gap: 8px; padding-top: 18px; }
  .dv-nav .dv-nav-langs a { font: 700 14px/1 var(--hx-sans); min-width: 48px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--hx-line); border-radius: 999px; padding: 0 12px; animation: none; }
  .dv-nav .dv-nav-langs a[aria-current] { background: var(--hx-ink); color: var(--hx-paper); border-color: var(--hx-ink); }
}
/* zeer smal (200% tekstgrootte op een telefoon): taal zit dan in het menu */
@media (max-width: 300px) {
  .dv-head .dv-lang { display: none; }
  .dv-head-in { gap: 8px; }
  .dv-logo img { height: 26px; }
}

/* ---------- footer ---------- */
.dv-foot { background: var(--hx-sand); border-top: 0; }
.dv-foot-col a { font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.dv-foot-col a:hover { color: var(--hx-green-ink); }

@media (prefers-reduced-motion: reduce) {
  .dv-nav.is-open a { animation: none; }
}

/* ==========================================================================
   Deel 2 — homepage
   ========================================================================== */

.hx-home .dv-head-spacer { background: var(--hx-paper); }
.hx-wrap { max-width: var(--hx-max); margin: 0 auto; padding: 0 var(--hx-gut); }
.hx-sec { padding: clamp(72px, 11vw, 148px) 0; scroll-margin-top: var(--hx-head); }
#gerechten, #hoe-het-werkt, #jouw-week, #prijzen, #bezorging, #veelgesteld, #app, #wie { scroll-margin-top: var(--hx-head); }

.hx-ico { width: 20px; height: 20px; flex: none; }
[dir="rtl"] .hx-btn .hx-ico, [dir="rtl"] .hx-cue svg { transform: scaleX(-1); }
[dir="rtl"] .hx-cue svg { transform: none; }

.hx-kicker {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 12px/1.2 var(--hx-sans);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--hx-green-ink);
  margin: 0 0 18px;
}
.hx-kicker::before { content: ''; width: 22px; height: 1px; background: currentColor; }
[lang="ar"] .hx-kicker { letter-spacing: 0; font-size: 14px; }

.hx-h2 {
  font-family: var(--hx-serif);
  font-weight: 400;
  font-size: clamp(36px, 5.4vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
[lang="ar"] .hx-h2 { font-weight: 600; line-height: 1.25; letter-spacing: 0; font-size: clamp(32px, 4.6vw, 60px); }
.hx-sub { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--hx-ink-2); max-width: 36em; margin: 0; text-wrap: pretty; }
.hx-note, .hx-fine { font-size: 14px; line-height: 1.55; color: var(--hx-ink-2); margin: 18px 0 0; max-width: 46em; }
.hx-head { margin-bottom: clamp(36px, 5vw, 64px); }
.hx-head--split { display: grid; gap: 20px; align-items: end; }
@media (min-width: 900px) { .hx-head--split { grid-template-columns: 1.1fr .9fr; gap: 64px; } }

/* knoppen */
.hx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 24px;
  border-radius: 999px; border: 1px solid transparent;
  font: 700 15px/1 var(--hx-sans);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease), transform var(--hx-fast) var(--hx-ease);
  -webkit-tap-highlight-color: transparent;
}
.hx-btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; }
.hx-btn--sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.hx-btn--block { width: 100%; }
.hx-btn--primary { background: var(--hx-green-btn); color: #fff; }
.hx-btn--primary:hover { background: var(--hx-green-ink); }
.hx-btn--primary .hx-ico { transition: transform var(--hx-fast) var(--hx-ease); }
.hx-btn--primary:hover .hx-ico { transform: translateX(3px); }
[dir="rtl"] .hx-btn--primary:hover .hx-ico { transform: scaleX(-1) translateX(3px); }
.hx-btn--ghost { background: transparent; color: var(--hx-ink); border-color: var(--hx-ink); }
.hx-btn--ghost:hover { background: var(--hx-ink); color: var(--hx-paper); }
.hx-btn:active { transform: scale(.98); }
.hx-btn[disabled] { opacity: .55; cursor: default; }
.hx-btn:focus-visible { outline: 2px solid var(--hx-green-ink); outline-offset: 3px; }
.hx-textlink {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 700; color: var(--hx-ink);
  background: linear-gradient(currentColor, currentColor) 0 calc(50% + .75em) / 100% 1px no-repeat;
  transition: background-size var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease);
}
.hx-textlink:hover { color: var(--hx-green-ink); background-size: 40% 1px; }
.hx-textbtn { background: none; border: 0; padding: 0 4px; min-height: 44px; font: 700 14px/1 var(--hx-sans); color: var(--hx-ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.hx-textbtn:hover { color: var(--hx-ink); }
.hx-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1px solid var(--hx-line); border-radius: 999px; font: 600 12px/1 var(--hx-sans); color: var(--hx-ink-2); background: var(--hx-paper); }

/* onthullen bij scrollen (alleen met JS + beweging) */
.hx-motion .hx-rv { opacity: 0; transform: translateY(18px); transition: opacity 650ms var(--hx-out), transform 650ms var(--hx-out); }
.hx-motion .hx-rv.is-in { opacity: 1; transform: none; }

/* één kolom op mobiel mag nooit breder worden dan het scherm (invoervelden, lange woorden) */
.hx-gal, .hx-how-grid, .hx-wk-panel, .hx-plan, .hx-area-grid, .hx-acc-grid, .hx-faq-grid, .hx-head--split, .hx-who-list { grid-template-columns: minmax(0, 1fr); }
.hx-pc input { width: 100%; }

/* ---------------------------------------------------------------- HERO */
.hx-hero { position: relative; overflow: clip; padding: 8px 0 56px; }
.hx-hero-grid { display: flex; flex-direction: column; gap: 8px; }
.hx-scene { order: -1; position: relative; width: min(100%, 46svh, 520px); margin: 0 auto; }
.hx-scene-in { position: relative; aspect-ratio: 1; }
.hx-layer { position: absolute; will-change: transform; }
.hx-layer--dial { inset: 0; }
.hx-layer--dial svg, .hx-dial { width: 100%; height: 100%; display: block; overflow: visible; }
.hx-layer--bowl { inset: 15%; }
.hx-layer--bowl picture, .hx-layer--bowl img { display: block; width: 100%; height: 100%; }
.hx-layer--shadow {
  inset: 13%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(70, 52, 30, .30), rgba(70, 52, 30, .12) 60%, transparent 100%);
  transform: translate(4%, 6%) scale(1.04);
}
.hx-sat { position: absolute; width: 25%; will-change: transform; z-index: 2; }
.hx-sat-img, .hx-sat-img img { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 14px rgba(60, 44, 25, .18)); }
.hx-sat--1 { top: 2%; left: -1%; }
.hx-sat--2 { top: 7%; right: -2%; }
.hx-sat--3 { bottom: 4%; right: 0; }
.hx-sat--4 { bottom: 12%; left: -3%; }
.hx-sat-tag {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  white-space: nowrap; padding: 4px 8px;
  background: var(--hx-paper); border: 1px solid var(--hx-line); border-radius: 999px;
  font: 600 11px/1.1 var(--hx-sans); color: var(--hx-ink-2);
}
.hx-sat-tag b { color: var(--hx-ink); font-weight: 800; }
.hx-caption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px; margin: 10px 0 0; font: 600 11px/1 var(--hx-sans); color: var(--hx-ink-2); }
.hx-caption > span:last-child { letter-spacing: .08em; text-transform: uppercase; }
.hx-legend { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--hx-ink); }
.hx-legend i { display: inline-block; width: 14px; height: 4px; border-radius: 2px; background: var(--hx-green); }
.hx-legend i.hx-legend-d { background: var(--hx-green-ink); margin-inline-start: 8px; }
.hx-dial-lab { display: none; }
@media (min-width: 900px) {
  .hx-caption { position: absolute; inset-inline-end: 0; bottom: -4px; margin: 0; }
  .hx-legend { display: none; }
  .hx-dial-lab { display: inline; }
}
[lang="ar"] .hx-caption { letter-spacing: 0; font-size: 12px; }

.hx-dial { direction: ltr; }
.hx-dial-ring { fill: none; stroke: var(--hx-ink); stroke-opacity: .16; stroke-width: 1; }
.hx-dial-ticks line { stroke: var(--hx-ink); stroke-linecap: round; }
.hx-tk-s { stroke-opacity: .14; stroke-width: 1; }
.hx-tk-m { stroke-opacity: .32; stroke-width: 1.2; }
.hx-tk-M { stroke-opacity: .7; stroke-width: 1.6; }
.hx-dial-win { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hx-dial-win--l { stroke: var(--hx-green); }
.hx-dial-win--d { stroke: var(--hx-green-ink); }
.hx-dial-num { font: 600 13px var(--hx-sans); fill: var(--hx-ink-2); text-anchor: middle; }
.hx-dial-lab { font: 700 15px var(--hx-sans); fill: var(--hx-ink); letter-spacing: .01em; }
.hx-dial-time { font-weight: 600; fill: var(--hx-ink-2); }

.hx-hero-copy { position: relative; z-index: 3; }
.hx-h1 {
  font-family: var(--hx-serif);
  font-weight: 400;
  font-size: clamp(40px, 11.5vw, 58px);
  line-height: .98;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}
.hx-h1 em { font-style: italic; color: var(--hx-green); }
[lang="ar"] .hx-h1 { font-weight: 700; letter-spacing: 0; line-height: 1.2; font-size: clamp(42px, 12vw, 62px); }
[lang="ar"] .hx-h1 em { font-style: normal; }
.hx-l { display: block; overflow: hidden; padding: 0 .12em .1em 0; margin-bottom: -.1em; }
@media (min-width: 900px) { .hx-l { white-space: nowrap; } }
.hx-l > * { display: inline-block; }
.hx-lead { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--hx-ink-2); max-width: 23em; margin: 0 0 26px; text-wrap: pretty; }
.hx-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 14px; }
.hx-hero-meals { margin-bottom: 18px; }
@media (max-width: 520px) { .hx-hero-actions .hx-btn { flex: 1 1 100%; } }
.hx-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hx-ticks li { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--hx-ink-2); }
.hx-ticks .hx-ico { width: 18px; height: 18px; color: var(--hx-green); }
.hx-cue { display: none; }

@media (min-width: 900px) {
  .hx-hero { padding: 0 0 40px; }
  .hx-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 11fr) minmax(0, 13fr);
    align-items: center;
    gap: clamp(40px, 5vw, 80px);
    min-height: min(calc(100svh - var(--hx-head) - 40px), 820px);
  }
  .hx-scene { order: 0; width: 100%; max-width: 720px; margin: 0; margin-inline-start: auto; }
  .hx-h1 { font-size: clamp(50px, 4.7vw, 70px); margin-bottom: 24px; }
  [lang="ar"] .hx-h1 { font-size: clamp(52px, 5vw, 80px); }
  .hx-sat-tag { font-size: 12px; padding: 5px 10px; }
  .hx-cue {
    display: inline-flex; align-items: center; gap: 10px;
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
    min-height: 44px; font: 600 13px var(--hx-sans); color: var(--hx-ink-2);
  }
  .hx-cue svg { width: 18px; height: 18px; }
  .hx-cue:hover { color: var(--hx-ink); }
}
@media (min-width: 900px) and (max-height: 760px) { .hx-cue { display: none; } }


/* dag in de ring: drie momenten (impressiefoto's) in een rond venster, de wijzer loopt mee naar het tijdvak */
.hx-layer--bowl { inset: 10.5%; }
.hx-day-chip {
  position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); z-index: 2;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 9px 16px 9px 14px; border-radius: 999px; background: var(--hx-paper); border: 1px solid var(--hx-line);
  box-shadow: 0 10px 28px rgba(23, 34, 28, .14);
  font: 600 13px/1 var(--hx-sans); color: var(--hx-ink-2);
}
.hx-day-chip b { color: var(--hx-ink); font-weight: 800; font-variant-numeric: tabular-nums; display: inline-block; transition: opacity 260ms var(--hx-ease), transform 260ms var(--hx-ease); }
.hx-day-chip b.is-swap { opacity: 0; transform: translateY(6px); }
.hx-day-chip i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--hx-green); flex: none; }
.hx-motion .hx-day-chip i::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--hx-green); opacity: 0; animation: hxPulse 2.4s var(--hx-ease) infinite; }
.hx-motion .hx-day-chip { animation: hxChipIn 700ms var(--hx-out) both 900ms; }
.hx-settled .hx-day-chip { animation: none !important; }
@keyframes hxChipIn { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes hxPulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
@media (max-width: 400px) { .hx-day-chip { font-size: 12px; padding: 7px 12px 7px 10px; } }
@media (min-width: 900px) { .hx-day-chip { font-size: 14px; padding: 11px 18px 11px 16px; } }
.hx-day { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: var(--hx-sand); isolation: isolate; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.hx-day-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.07); transition: opacity 900ms var(--hx-ease), transform 1800ms var(--hx-out); }
.hx-day-shot.is-on { opacity: 1; transform: none; }
.hx-day-pic, .hx-day-pic img { display: block; width: 100%; height: 100%; }
.hx-day-pic img { object-fit: cover; }
.hx-hand { --a: 187.5deg; transform: rotate(var(--a)); transition: transform 1100ms var(--hx-out); }
.hx-hand-l { stroke: var(--hx-tomato); stroke-width: 2; stroke-linecap: round; }
.hx-hand-d { fill: var(--hx-tomato); stroke: var(--hx-paper); stroke-width: 3; }
.hx-day-nav { display: flex; gap: 6px; justify-content: center; margin-top: 14px; position: relative; z-index: 3; }
.hx-day-btn {
  flex: 1 1 0; min-width: 0; max-width: 190px; min-height: 48px; padding: 6px 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  border: 1px solid var(--hx-line); border-radius: 999px; background: var(--hx-paper); color: var(--hx-ink); cursor: pointer;
  font: 700 12px/1.15 var(--hx-sans); text-align: center;
  transition: background-color var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease);
}
.hx-day-btn small { font-weight: 600; font-size: 11px; color: var(--hx-ink-2); }
.hx-day-btn[aria-pressed="true"] { background: var(--hx-ink); border-color: var(--hx-ink); color: var(--hx-paper); }
.hx-day-btn[aria-pressed="true"] small { color: #C6EEDB; }
@media (hover: hover) { .hx-day-btn:not([aria-pressed="true"]):hover { border-color: var(--hx-ink); } }
html:not(.hx-js) .hx-day-nav { display: none; }
@media (max-width: 899px) { .hx-js .hx-legend { display: none; } .hx-day-nav { margin-top: 8px; } .hx-caption { margin-top: 6px; justify-content: flex-end; } }
@media (min-width: 900px) {
  .hx-caption { position: static; margin-top: 10px; justify-content: flex-end; }
  .hx-day-btn { font-size: 13px; }
  .hx-day-nav { margin-top: 46px; }
}
@media (prefers-reduced-motion: reduce) { .hx-day-shot, .hx-hand { transition: none; } }


/* hero-titel: drie korte regels rollen om de beurt in beeld (vaste hoogte, geen sprong) */
.hx-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.hx-rot, .hx-rot-i { display: block; }
.hx-rot-i .hx-l { white-space: nowrap; }  /* elke zin op één regel; home.js past de maat aan de kolom aan */
.hx-motion .hx-rot { display: grid; }
.hx-motion .hx-rot-i { grid-area: 1 / 1; }
.hx-motion .hx-rot-i .hx-w { transform: translateY(112%); transition: transform 450ms var(--hx-out); }
.hx-motion .hx-rot-i.is-on .hx-w { transform: none; }
.hx-motion .hx-rot-i.is-out .hx-w { transform: translateY(-112%); transition-duration: 380ms; }
.hx-motion .hx-rot-i.no-tr .hx-w { transition: none; }
/* zonder beweging: de drie regels compact onder elkaar */
html:not(.hx-motion) .hx-rot { font-size: .62em; line-height: 1.1; }

/* intro */
.hx-motion .hx-intro { animation: hxUp 480ms var(--hx-out) both; animation-delay: calc(var(--d, 0) * 70ms + 40ms); }
.hx-motion .hx-l > .hx-intro { animation-name: hxLine; animation-duration: 560ms; }
.hx-motion .hx-layer--shadow { animation: hxFade 1200ms var(--hx-out) both 200ms; }
.hx-motion .hx-dial-win { stroke-dashoffset: 1; animation: hxDraw 1100ms var(--hx-out) forwards 650ms; }
.hx-motion .hx-dial-win--d { animation-delay: 800ms; }
.hx-motion .hx-dial-ticks, .hx-motion .hx-dial-num, .hx-motion .hx-dial-lab { animation: hxFade 900ms var(--hx-ease) both 350ms; }
.hx-motion .hx-sat > * { animation: hxPop 900ms var(--hx-out) both; }
.hx-motion .hx-sat--1 > * { animation-delay: 420ms; }
.hx-motion .hx-sat--2 > * { animation-delay: 500ms; }
.hx-motion .hx-sat--3 > * { animation-delay: 580ms; }
.hx-motion .hx-sat--4 > * { animation-delay: 660ms; }
.hx-motion .hx-sat-tag { animation: hxFade 600ms var(--hx-ease) both 1000ms !important; }

/* vangnet: na 2,4 s altijd de eindtoestand, ook als de animatietijdlijn stilstaat */
.hx-settled .hx-intro, .hx-settled .hx-layer--bowl > .hx-day, .hx-settled .hx-layer--shadow, .hx-settled .hx-dial-ticks,
.hx-settled .hx-dial-num, .hx-settled .hx-dial-lab, .hx-settled .hx-sat > *, .hx-settled .hx-sat-tag { animation: none !important; }
.hx-settled .hx-dial-win { animation: none !important; stroke-dashoffset: 0; }

@keyframes hxUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hxLine { from { transform: translateY(105%); } to { transform: none; } }
@keyframes hxSettle { from { transform: translateY(-2%) scale(1.06); } to { transform: none; } }
@keyframes hxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hxPop { from { opacity: 0; transform: scale(.72) translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes hxDraw { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- ONTDEKKEN */
.hx-menu { padding-top: clamp(56px, 8vw, 120px); }
.hx-gal { display: grid; gap: 28px; }
.hx-gal-stage { margin: 0; }
.hx-gal-frame { position: relative; aspect-ratio: 1; background: var(--hx-sand); border-radius: 6px; overflow: hidden; }
.hx-gal-shot { position: absolute; inset: 0; opacity: 0; transition: opacity 560ms var(--hx-ease), transform 760ms var(--hx-out); transform: scale(1.035); }
.hx-gal-shot.is-on { opacity: 1; transform: none; }
.hx-gal-shot img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; }
.hx-gal[data-mode="live"] .hx-gal-shot img { mix-blend-mode: normal; }
.hx-gal-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; min-height: 32px; }
.hx-gal-capname { font: 400 clamp(20px, 2vw, 26px)/1.2 var(--hx-serif); }
[lang="ar"] .hx-gal-capname { font-weight: 600; }
.hx-tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; border-bottom: 1px solid var(--hx-line); margin-bottom: 8px; }
.hx-tabs button {
  position: relative; min-height: 48px; padding: 0; background: none; border: 0; cursor: pointer;
  font: 700 15px/1 var(--hx-sans); color: var(--hx-ink-2);
  transition: color var(--hx-fast) var(--hx-ease);
}
.hx-tabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--hx-ink); transform: scaleX(0); transition: transform 320ms var(--hx-out); }
.hx-tabs button[aria-selected="true"] { color: var(--hx-ink); }
.hx-tabs button[aria-selected="true"]::after { transform: none; }
.hx-tabs button:hover { color: var(--hx-ink); }
.hx-gal-list ol { list-style: none; margin: 0; padding: 0; }
.hx-js .hx-gal-lists { display: grid; }
.hx-js .hx-gal-list { grid-area: 1 / 1; transition: opacity 360ms var(--hx-ease), visibility 0s linear 360ms; }
.hx-js .hx-gal-list:not(.is-on) { opacity: 0; visibility: hidden; }
.hx-js .hx-gal-list.is-on { transition-delay: 0s; }
.hx-gal-item {
  width: 100%; display: grid; grid-template-columns: 34px 1fr; grid-template-areas: 'n name' 'n sub';
  align-items: baseline; column-gap: 8px; text-align: start;
  padding: 14px 0; min-height: 56px; background: none; border: 0; border-bottom: 1px solid var(--hx-line);
  cursor: pointer; color: var(--hx-ink);
}
.hx-gal-n { grid-area: n; font: 600 12px var(--hx-sans); color: var(--hx-ink-2); font-variant-numeric: tabular-nums; }
.hx-gal-name { grid-area: name; font: 400 clamp(21px, 2vw, 27px)/1.2 var(--hx-serif); transition: color var(--hx-fast) var(--hx-ease), transform 320ms var(--hx-out); }
[lang="ar"] .hx-gal-name { font-weight: 500; }
.hx-gal-sub { grid-area: sub; font-size: 13px; color: var(--hx-ink-2); margin-top: 4px; }
.hx-gal-item[aria-pressed="true"] .hx-gal-name { color: var(--hx-green-ink); }
.hx-gal-item[aria-pressed="true"] .hx-gal-n { color: var(--hx-green-ink); }
@media (hover: hover) { .hx-gal-item:hover .hx-gal-name { transform: translateX(6px); } [dir="rtl"] .hx-gal-item:hover .hx-gal-name { transform: translateX(-6px); } }
.hx-gal-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 22px; }
.hx-badge-halal { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2; }
@media (max-width: 899px) {
  /* mobiel: foto blijft in beeld terwijl je door de lijst tikt */
  .hx-gal-stage { position: sticky; top: var(--hx-head); z-index: 2; background: var(--hx-paper); padding: 8px 0 10px; margin-top: -8px; }
  .hx-gal-frame { aspect-ratio: auto; height: min(42svh, 75vw); }
  .hx-gal-cap { margin-top: 8px; }
}
@media (min-width: 900px) {
  .hx-gal { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
  .hx-gal-side { padding-top: 4px; }
}


/* ---------------------------------------------------------------- BORDENPARADE (scroll beweegt de rijen) */
.hx-parade { margin-top: clamp(56px, 8vw, 104px); overflow-x: clip; direction: ltr; }
[dir="rtl"] .hx-parade .hx-wrap { direction: rtl; }
.hx-parade-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 clamp(14px, 2vw, 24px); font: 400 clamp(22px, 2.2vw, 30px)/1.2 var(--hx-serif); }
[lang="ar"] .hx-parade-h { font-weight: 600; }
.hx-parade-row { background: var(--hx-paper); list-style: none; margin: 0; padding: 0 var(--hx-gut); display: flex; gap: clamp(10px, 1.6vw, 22px); width: max-content; direction: ltr; will-change: transform; }
.hx-parade-row + .hx-parade-row { margin-top: clamp(6px, 1vw, 14px); }
.hx-plate {
  display: flex; flex-direction: column; align-items: center; gap: 2px; width: clamp(132px, 15vw, 210px);
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--hx-ink);
  -webkit-tap-highlight-color: transparent;
}
.hx-plate img { width: 100%; height: auto; aspect-ratio: 1; display: block; mix-blend-mode: multiply; filter: brightness(1.05) contrast(1.03); transition: transform 520ms var(--hx-out); }
.hx-plate-name { font: 600 13px/1.3 var(--hx-sans); color: var(--hx-ink-2); text-align: center; unicode-bidi: plaintext; max-width: 100%; transition: color var(--hx-fast) var(--hx-ease); padding: 0 4px; }
@media (hover: hover) {
  .hx-plate:hover img { transform: translateY(-6px) rotate(-4deg) scale(1.04); }
  .hx-plate:hover .hx-plate-name { color: var(--hx-ink); }
}
.hx-plate:active img { transform: scale(.96); }
.hx-plate:focus-visible { outline: 2px solid var(--hx-green-ink); outline-offset: 2px; border-radius: 6px; }
.hx-plate.is-picked .hx-plate-name { color: var(--hx-green-ink); }
/* zonder beweging (of zonder JS): rijen worden een rustig raster dat gewoon meeloopt */
html:not(.hx-motion) .hx-parade-row { width: auto; flex-wrap: wrap; justify-content: center; max-width: var(--hx-max); margin-inline: auto; }
@media (max-width: 380px) { html:not(.hx-motion) .hx-plate { width: calc(50% - 8px); } }

/* ---------------------------------------------------------------- ZO WERKT HET */
.hx-how { background: var(--hx-sand); }
.hx-how-grid { display: grid; gap: 0; }
.hx-how-stage { display: none; }
.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 40px; }
.hx-step { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.hx-step-fig { width: min(260px, 72%); margin-inline: auto; }
.hx-step-n { display: block; font: 600 12px var(--hx-sans); letter-spacing: .14em; color: var(--hx-green-ink); margin-bottom: 8px; }
.hx-step h3 { font: 400 clamp(24px, 2.4vw, 34px)/1.15 var(--hx-serif); margin: 0 0 10px; }
[lang="ar"] .hx-step h3 { font-weight: 600; }
.hx-step p { margin: 0; color: var(--hx-ink-2); line-height: 1.6; max-width: 30em; }
.hx-how-pay { margin: 44px 0 0; padding-top: 22px; border-top: 1px solid var(--hx-line); color: var(--hx-ink-2); max-width: 40em; line-height: 1.6; }
.hx-how-pay b { color: var(--hx-ink); }

.hx-day { fill: var(--hx-paper); stroke: var(--hx-ink); stroke-opacity: .35; stroke-width: 1.5; }
.hx-day.is-on { fill: var(--hx-green); stroke: var(--hx-green); stroke-opacity: 1; }
.hx-day-lab { font: 700 15px var(--hx-sans); fill: var(--hx-ink-2); text-anchor: middle; }
.hx-day-lab.is-on { fill: var(--hx-ink); }
.hx-step-fig { margin-block: 0; text-align: center; }
.hx-how-phone { display: block; width: 100%; height: auto; border-radius: clamp(24px, 3vw, 38px); border: 6px solid #14231D; background: #F7F9F8; box-shadow: 0 22px 50px rgba(20, 35, 29, .18); }
.hx-step-fig figcaption { margin-top: 10px; font-weight: 700; font-size: 14px; color: var(--hx-ink-2); }

@media (min-width: 900px) {
  .hx-how-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 7vw, 120px); }
  .hx-how-stage { display: block; }
  .hx-how-sticky { position: sticky; top: calc(var(--hx-head) + 4vh); aspect-ratio: 600 / 1304; width: min(340px, 100%, calc((100vh - var(--hx-head) - 10vh) * 600 / 1304)); margin-inline: auto; }
  .hx-how-fig { position: absolute; inset: 0; opacity: 0; transform: translateY(18px) scale(.97); transition: opacity 520ms var(--hx-ease), transform 760ms var(--hx-out); }
  .hx-how-fig .hx-how-phone { width: 100%; height: 100%; object-fit: cover; }
  .hx-how-sticky[data-active="1"] .hx-how-fig[data-for="1"],
  .hx-how-sticky[data-active="2"] .hx-how-fig[data-for="2"],
  .hx-how-sticky[data-active="3"] .hx-how-fig[data-for="3"] { opacity: 1; transform: none; }
  .hx-steps { gap: 0; }
  .hx-step { grid-template-columns: 1fr; min-height: 52vh; align-content: center; }
  .hx-step-fig { display: none; }
  .hx-step h3 { font-size: clamp(30px, 3vw, 44px); }
  .hx-js .hx-step .hx-step-txt { opacity: .32; transition: opacity 480ms var(--hx-ease); }
  .hx-js .hx-step.is-active .hx-step-txt { opacity: 1; }
  .hx-how-main .hx-head { margin-bottom: 0; }
}

/* ---------------------------------------------------------------- JOUW WEEK */
.hx-sim { display: inline-flex; align-items: center; gap: 8px; margin: 14px 0 0; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--hx-mint); color: var(--hx-green-ink); font: 700 13px/1.2 var(--hx-sans); }
.hx-sim .hx-ico { width: 18px; height: 18px; }
.hx-wk { background: var(--hx-white); border: 1px solid var(--hx-line); border-radius: 8px; padding: clamp(14px, 2.4vw, 28px); }
.hx-wk-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: clamp(16px, 2.4vw, 28px); }
.hx-wk-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 64px; padding: 6px 0; border-radius: 6px; border: 1px solid var(--hx-line);
  background: var(--hx-paper); color: var(--hx-ink); cursor: pointer;
  font: 700 14px/1 var(--hx-sans);
  transition: background-color var(--hx-fast) var(--hx-ease), color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease), transform var(--hx-fast) var(--hx-ease);
}
.hx-wk-day:active { transform: scale(.96); }
.hx-wk-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--hx-ink-2); }
.hx-wk-day.is-on .hx-wk-dot { background: var(--hx-green); border-color: var(--hx-green); }
.hx-wk-day[aria-pressed="true"] { background: var(--hx-ink); border-color: var(--hx-ink); color: var(--hx-paper); }
.hx-wk-day[aria-pressed="true"] .hx-wk-dot { border-color: var(--hx-paper); }
.hx-wk-day[aria-pressed="true"].is-on .hx-wk-dot { background: #7DDAB1; border-color: #7DDAB1; }
@media (hover: hover) { .hx-wk-day:not([aria-pressed="true"]):hover { border-color: var(--hx-ink); } }
.hx-wk-panel { display: grid; gap: 18px; }
.hx-wk-media { position: relative; aspect-ratio: 4 / 3; background: var(--hx-sand); border-radius: 6px; overflow: hidden; }
.hx-wk-shot { position: absolute; inset: 0; opacity: 0; transform: translateX(14px); transition: opacity 420ms var(--hx-ease), transform 520ms var(--hx-out); }
[dir="rtl"] .hx-wk-shot { transform: translateX(-14px); }
.hx-wk-shot.is-on { opacity: 1; transform: none; }
.hx-wk-shot.is-out { opacity: 0; transform: translateX(-14px); }
[dir="rtl"] .hx-wk-shot.is-out { transform: translateX(14px); }
.hx-wk-shot img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.hx-wk-media.is-off .hx-wk-shot img { filter: grayscale(1); opacity: .25; }
.hx-wk-info { display: flex; flex-direction: column; }
.hx-wk-dayname { margin: 0; font: 700 12px/1.2 var(--hx-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--hx-ink-2); }
[lang="ar"] .hx-wk-dayname { letter-spacing: 0; font-size: 14px; }
.hx-wk-state { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--hx-green-ink); }
.hx-wk-dish { margin: 6px 0 18px; font: 400 clamp(26px, 2.6vw, 36px)/1.15 var(--hx-serif); min-height: 1.15em; }
[lang="ar"] .hx-wk-dish { font-weight: 600; }
.hx-wk-slots { border: 0; padding: 0; margin: 0 0 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hx-wk-slots legend { padding: 0; margin-bottom: 8px; font: 700 13px var(--hx-sans); color: var(--hx-ink); }
.hx-slot { position: relative; display: block; cursor: pointer; }
.hx-slot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.hx-slot span {
  display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 52px; padding: 8px 12px;
  border: 1px solid var(--hx-line); border-radius: 6px; font: 700 15px/1.1 var(--hx-sans); direction: ltr; text-align: start;
  transition: border-color var(--hx-fast) var(--hx-ease), background-color var(--hx-fast) var(--hx-ease);
}
[dir="rtl"] .hx-slot span { direction: rtl; }
.hx-slot small { font: 600 11px/1 var(--hx-sans); color: var(--hx-ink-2); letter-spacing: .04em; }
.hx-slot input:checked + span { border-color: var(--hx-green-ink); background: var(--hx-mint); box-shadow: inset 0 0 0 1px var(--hx-green-ink); }
.hx-slot input:focus-visible + span { outline: 2px solid var(--hx-green-ink); outline-offset: 2px; }
.hx-wk-slots[disabled] { opacity: .4; }
.hx-wk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: auto; }
.hx-wk-hint { margin: 12px 0 0; font-size: 13px; color: var(--hx-ink-2); min-height: 1.5em; }
.hx-wk-hint.is-warn { color: var(--hx-tomato); font-weight: 700; }
.hx-wk-foot { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--hx-line); font-size: 14px; color: var(--hx-ink-2); }
.hx-wk-foot span { color: var(--hx-ink); font-weight: 700; }
@media (min-width: 760px) {
  .hx-wk-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
  .hx-wk-media { aspect-ratio: auto; min-height: 360px; }
  .hx-wk-info { min-height: 360px; }
  .hx-wk-dish { min-height: 2.3em; }
}
@media (max-width: 420px) {
  .hx-btn { white-space: normal; text-align: center; line-height: 1.2; max-width: 100%; padding-block: 10px; }
}
@media (max-width: 300px) {
  .hx-kicker { letter-spacing: .04em; }
  .hx-kicker::before { display: none; }
  .hx-h1 { font-size: 40px; }
  .hx-wk-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hx-opts--opt, .hx-opts--len { grid-template-columns: minmax(0, 1fr); }
  .hx-wk-slots { grid-template-columns: minmax(0, 1fr); }
  .hx-pc-row { flex-wrap: wrap; }
  .hx-pc .hx-btn { width: 100%; }
  .hx-sat-tag { display: none; }
  .hx-gal-item { grid-template-columns: 26px minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .hx-wk-days { gap: 4px; }
  .hx-wk-day { font-size: 12px; min-height: 56px; }
}

/* ---------------------------------------------------------------- PAKKETTEN */
.hx-plans { background: var(--hx-paper); }
.hx-plan { display: grid; gap: 28px; position: relative; }
.hx-plan-ctl fieldset { border: 0; margin: 0 0 30px; padding: 0; min-width: 0; }
.hx-plan-ctl legend { display: flex; align-items: baseline; gap: 12px; padding: 0; margin-bottom: 14px; font: 400 clamp(22px, 2vw, 28px)/1.2 var(--hx-serif); }
[lang="ar"] .hx-plan-ctl legend { font-weight: 600; }
.hx-plan-ctl legend span { font: 600 12px var(--hx-sans); color: var(--hx-green-ink); letter-spacing: .1em; }
.hx-opts { display: grid; gap: 8px; }
.hx-opts--opt, .hx-opts--len { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-opt { position: relative; display: block; cursor: pointer; min-width: 0; }
.hx-opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.hx-opt > span {
  display: flex; flex-direction: column; gap: 4px; height: 100%;
  min-height: 56px; padding: 14px 16px; border-radius: 6px; border: 1px solid var(--hx-line); background: var(--hx-white);
  transition: border-color var(--hx-fast) var(--hx-ease), background-color var(--hx-fast) var(--hx-ease), box-shadow var(--hx-fast) var(--hx-ease);
}
.hx-opts--opt .hx-opt > span, .hx-opts--len .hx-opt > span { align-items: center; justify-content: center; text-align: center; padding: 12px 6px; }
.hx-opt b { font: 700 16px/1.2 var(--hx-sans); }
.hx-opt small { font-size: 13px; line-height: 1.4; color: var(--hx-ink-2); }
.hx-opt em { font-style: normal; font: 700 12px/1.2 var(--hx-sans); color: var(--hx-green-ink); }
.hx-opt .hx-ico { width: 22px; height: 22px; color: var(--hx-ink-2); }
.hx-opt input:checked + span { border-color: var(--hx-green-ink); background: var(--hx-mint); box-shadow: inset 0 0 0 1px var(--hx-green-ink); }
.hx-opt input:checked + span .hx-ico { color: var(--hx-green-ink); }
.hx-opt input:focus-visible + span { outline: 2px solid var(--hx-green-ink); outline-offset: 2px; }
@media (hover: hover) { .hx-opt:hover > span { border-color: var(--hx-ink-2); } }
.hx-skel { display: block; height: 56px; border-radius: 6px; background: linear-gradient(90deg, var(--hx-sand) 0%, var(--hx-sand-2) 50%, var(--hx-sand) 100%) 0 0 / 200% 100%; animation: hxShimmer 1.4s linear infinite; }
.hx-skel--lg { height: 64px; width: 70%; }
@keyframes hxShimmer { to { background-position: -200% 0; } }

.hx-plan-sum { background: var(--hx-white); border: 1px solid var(--hx-line); border-radius: 8px; padding: clamp(20px, 3vw, 36px); }
.hx-plan-live { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; font: 700 12px var(--hx-sans); color: var(--hx-green-ink); letter-spacing: .04em; }
.hx-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hx-green); box-shadow: 0 0 0 4px var(--hx-mint); }
.hx-plan-lab { margin: 0; font-size: 14px; color: var(--hx-ink-2); }
.hx-plan-total { margin: 6px 0 18px; font: 400 clamp(48px, 6vw, 72px)/1 var(--hx-serif); letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; min-height: 1em; }
[lang="ar"] .hx-plan-total { font-family: 'Fraunces', Georgia, serif; }
.hx-plan-total .hx-num { display: inline-block; }
.hx-plan-total .hx-num.is-flip { animation: hxUp 420ms var(--hx-out) both; }
.hx-plan-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; margin: 0 0 18px; padding: 16px 0; border-block: 1px solid var(--hx-line); }
.hx-plan-facts div { min-width: 0; }
.hx-plan-facts dt { font-size: 12px; color: var(--hx-ink-2); margin: 0 0 3px; }
.hx-plan-facts dd { margin: 0; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }
.hx-plan-facts dd.is-save { color: var(--hx-green-ink); }
.hx-plan-incl { margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--hx-ink-2); }
.hx-plan-err { grid-column: 1 / -1; padding: 22px; border-radius: 8px; background: #FBEDE7; color: #6E2A17; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.hx-plan-err p { margin: 0; max-width: 40em; }
.hx-plan.is-error .hx-plan-ctl, .hx-plan.is-error .hx-plan-sum { display: none; }
@media (min-width: 960px) {
  .hx-plan { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
  .hx-opts--cat { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hx-plan-sum { position: sticky; top: calc(var(--hx-head) + 24px); }
}

/* ---------------------------------------------------------------- BEZORGGEBIED */
.hx-area { background: var(--hx-mint); overflow: clip; }
.hx-area-grid { display: grid; gap: 36px; align-items: center; }
.hx-area-box { position: relative; isolation: isolate; }
.hx-area-ring { position: absolute; z-index: -1; width: 150%; max-width: 640px; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.hx-area-ring circle { fill: none; stroke: var(--hx-green); stroke-opacity: .28; stroke-width: 1; }
.hx-area-ring circle:nth-child(2) { stroke-dasharray: 2 6; }
.hx-pc { background: var(--hx-white); border-radius: 8px; padding: clamp(18px, 3vw, 28px); border: 1px solid var(--hx-mint-2); }
.hx-pc label { display: block; font: 700 14px var(--hx-sans); margin-bottom: 10px; }
.hx-pc-row { display: flex; gap: 8px; }
.hx-pc input {
  flex: 1; min-width: 0; height: 58px; padding: 0 16px; border-radius: 6px; border: 1px solid var(--hx-line);
  background: var(--hx-paper); color: var(--hx-ink);
  font: 600 22px/1 var(--hx-sans); letter-spacing: .08em; text-transform: uppercase;
  transition: border-color var(--hx-fast) var(--hx-ease);
}
.hx-pc input::placeholder { color: #A39C8E; letter-spacing: .08em; }
.hx-pc input:focus { outline: none; border-color: var(--hx-green-ink); box-shadow: 0 0 0 3px var(--hx-mint-2); }
.hx-pc .hx-btn { min-height: 58px; padding: 0 22px; }
.hx-pc-result { margin-top: 14px; min-height: 0; }
.hx-pc-result:empty { display: none; }
.hx-pc-out { background: var(--hx-white); border-radius: 8px; padding: 18px 20px; border-inline-start: 3px solid var(--hx-green); animation: hxUp 420ms var(--hx-out) both; }
.hx-pc-out.is-no { border-inline-start-color: var(--hx-ink-2); }
.hx-pc-out.is-bad { border-inline-start-color: var(--hx-tomato); }
.hx-pc-out p { margin: 0 0 6px; line-height: 1.5; }
.hx-pc-out b { font-size: 17px; }
.hx-pc-next { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
@media (min-width: 900px) { .hx-area-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); } }

/* ---------------------------------------------------------------- VERTROUWEN */
.hx-who-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 34px; }
.hx-who-list li { border-top: 1px solid var(--hx-ink); padding-top: 18px; }
.hx-who-n { font: 400 15px var(--hx-serif); color: var(--hx-green-ink); }
.hx-who-list h3 { font: 400 clamp(24px, 2.2vw, 30px)/1.2 var(--hx-serif); margin: 10px 0 10px; }
[lang="ar"] .hx-who-list h3 { font-weight: 600; }
.hx-who-list p { margin: 0; color: var(--hx-ink-2); line-height: 1.6; }
@media (min-width: 900px) { .hx-who-list { grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 56px); } }

.hx-acc { background: var(--hx-sand); }
.hx-acc-grid { display: grid; gap: 32px; }
.hx-acc .hx-sub { margin-top: 18px; }
.hx-acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 28px; }
.hx-acc-list { list-style: none; margin: 0; padding: 0; }
.hx-acc-list li { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid var(--hx-line); font-size: 17px; font-weight: 600; }
.hx-acc-list li:first-child { border-top: 1px solid var(--hx-line); }
.hx-acc-list .hx-ico { color: var(--hx-green); margin-top: 2px; }
@media (min-width: 900px) { .hx-acc-grid { grid-template-columns: 1fr 1fr; gap: clamp(48px, 7vw, 120px); align-items: center; } }

.hx-faq-grid { display: grid; gap: 8px; }
.hx-faq-i { border-bottom: 1px solid var(--hx-line); }
.hx-faq-i:first-child { border-top: 1px solid var(--hx-line); }
.hx-faq-i summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
  font: 700 17px/1.4 var(--hx-sans);
}
.hx-faq-i summary::-webkit-details-marker { display: none; }
.hx-faq-i summary i { position: relative; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hx-line); transition: background-color var(--hx-fast) var(--hx-ease), border-color var(--hx-fast) var(--hx-ease); }
.hx-faq-i summary i::before, .hx-faq-i summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: var(--hx-ink); transform: translate(-50%, -50%); transition: transform 320ms var(--hx-out); }
.hx-faq-i summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.hx-faq-i[open] summary i { background: var(--hx-ink); border-color: var(--hx-ink); }
.hx-faq-i[open] summary i::before, .hx-faq-i[open] summary i::after { background: var(--hx-paper); }
.hx-faq-i[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) { .hx-faq-i summary:hover i { border-color: var(--hx-ink); } }
.hx-faq-a p { margin: 0 0 22px; color: var(--hx-ink-2); line-height: 1.65; max-width: 44em; }
.hx-motion .hx-faq-i[open] .hx-faq-a { animation: hxUp 380ms var(--hx-out) both; }
@media (min-width: 900px) { .hx-faq-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 7vw, 120px); } }

/* ---------------------------------------------------------------- SLOT */
.hx-end { position: relative; overflow: clip; padding: clamp(88px, 13vw, 180px) 0; text-align: center; background: var(--hx-paper); }
.hx-end-in { position: relative; display: flex; flex-direction: column; align-items: center; }
.hx-end .hx-kicker::before { display: none; }
.hx-end-dial { position: absolute; z-index: 0; width: min(760px, 150vw); aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .55; pointer-events: none; }
.hx-end-in > :not(.hx-end-dial) { position: relative; z-index: 1; }
.hx-end-h { font: 400 clamp(46px, 8vw, 112px)/.98 var(--hx-serif); letter-spacing: -0.03em; margin: 0 0 22px; }
.hx-end-h em { color: var(--hx-green); }
[lang="ar"] .hx-end-h { font-weight: 700; letter-spacing: 0; line-height: 1.2; }
[lang="ar"] .hx-end-h em { font-style: normal; }
.hx-end .hx-sub { margin: 0 auto 32px; }

/* ---------------------------------------------------------------- STICKY CTA (mobiel) */
.hx-sticky {
  position: fixed; z-index: 900; left: 0; right: 0; bottom: 0;
  padding: 10px var(--hx-gut) calc(10px + env(safe-area-inset-bottom));
  background: var(--hx-paper); border-top: 1px solid var(--hx-line);
  transform: translateY(110%); transition: transform 380ms var(--hx-out);
}
.hx-sticky.is-on { transform: none; }
.hx-sticky { display: flex; align-items: center; gap: 14px; }
.hx-sticky-plan, .hx-sticky-b { display: none; }
.hx-sticky.is-plan .hx-sticky-plan { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; margin: 0; }
.hx-sticky-plan span { font-size: 12px; color: var(--hx-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-sticky-plan b { font: 400 26px/1 var(--hx-serif); font-variant-numeric: tabular-nums; }
.hx-sticky.is-plan .hx-btn { width: auto; flex: none; }
.hx-sticky.is-plan .hx-sticky-a { display: none; }
.hx-sticky.is-plan .hx-sticky-b { display: inline; }
@media (min-width: 900px) { .hx-sticky { display: none; } }
.hx-home.hx-sticky-on .dv-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* modaal (live gerecht) in de nieuwe stijl */
.hx-home .dv-modal-box { border-radius: 8px; }
.hx-home .dv-modal-name { font-family: var(--hx-serif); font-weight: 400; }

/* ---------------------------------------------------------------- minder beweging */
@media (prefers-reduced-motion: reduce) {
  .hx-gal-shot, .hx-wk-shot, .hx-how-fig, .hx-sticky, .hx-tabs button::after, .hx-skel { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- 200% tekstgrootte (≈ 195 px breed) */
.hx-faq-i summary span { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 300px) {
  .hx-plan .hx-opts--opt, .hx-plan .hx-opts--len, .hx-plan .hx-opts--cat { grid-template-columns: minmax(0, 1fr); }
  .hx-plan-total { font-size: 36px; }
  .hx-plan-facts { grid-template-columns: minmax(0, 1fr); }
  .dv-foot-in { grid-template-columns: minmax(0, 1fr) !important; }
  .dv-foot-col, .dv-foot-brand { min-width: 0; overflow-wrap: anywhere; }
  .hx-pc input { font-size: 18px; }
}
/* nooit horizontaal scrollen: clip (geen scrollcontainer, dus sticky blijft werken) */
.hx-sec, .hx-end { overflow-x: clip; }
.hx-faq-a p, .hx-sub, .hx-note, .hx-fine { overflow-wrap: break-word; }
/* menupagina: impressiefoto's in dezelfde zandtint als de homepage */
.dv-impression-row li { background: var(--hx-sand); border-radius: 6px; overflow: hidden; }
.dv-impression-row img { mix-blend-mode: multiply; }

/* ---------------------------------------------------------------- HERO-FOTO (2026-10-18: grote rechthoek, geen ring, geen labels) */
.hx-scene { order: -1; width: 100%; max-width: none; margin: 0; }
.hx-photo { position: relative; aspect-ratio: 4 / 5; border-radius: 12px; overflow: hidden; background: var(--hx-sand); isolation: isolate; }
.hx-photo .hx-day { position: absolute; inset: 0; border-radius: 0; overflow: hidden; background: none; -webkit-mask-image: none; will-change: transform; transform: scale(1.04); }
.hx-photo .hx-day-shot { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.05); transition: opacity 650ms var(--hx-ease), transform 1600ms var(--hx-out); }
.hx-photo .hx-day-shot.is-on { opacity: 1; transform: none; }
.hx-photo .hx-day-pic, .hx-photo .hx-day-pic img { display: block; width: 100%; height: 100%; }
.hx-photo .hx-day-pic img { object-fit: cover; }
/* zachte verloop boven en onder voor de streepjes en het label */
.hx-photo::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 20, 14, 0) 72%, rgba(10, 20, 14, .26) 100%); }
/* voortgangsstreepjes (zoals stories): tik = dat moment */
.hx-bars { position: absolute; z-index: 2; top: 6px; left: 10px; right: 10px; display: flex; gap: 6px; }
[dir="rtl"] .hx-bar i::after { transform-origin: right center; }
.hx-bar { flex: 1; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: flex; align-items: flex-start; padding-top: 8px; }
.hx-bar i { position: relative; display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .38); overflow: hidden; }
.hx-bar i::after { content: ''; position: absolute; inset: 0; background: #fff; transform: scaleX(0); transform-origin: left center; }
.hx-bar.is-done i::after { transform: none; }
.hx-bar.is-on i::after { transform: none; }
.hx-motion .hx-bars.is-auto .hx-bar.is-on i::after { animation: hxBar var(--hx-bar, 5200ms) linear both; }
@keyframes hxBar { from { transform: scaleX(0); } to { transform: none; } }
.hx-bar:focus-visible { outline: 2px solid #fff; outline-offset: -2px; border-radius: 6px; }
html:not(.hx-js) .hx-bars { display: none; }
/* label "bezorgd tussen …" linksonder op de foto */
.hx-photo .hx-day-chip { left: 14px; right: auto; bottom: 14px; transform: none; z-index: 2; box-shadow: 0 10px 28px rgba(10, 20, 14, .22); border-color: transparent; }
[dir="rtl"] .hx-photo .hx-day-chip { left: auto; right: 14px; }
.hx-motion .hx-photo .hx-day-chip { animation-name: hxUp; }
/* binnenkomst: de foto opent zich vanuit het midden */
.hx-motion .hx-photo { animation: hxReveal 1100ms var(--hx-out) both 60ms; }
.hx-settled .hx-photo { animation: none !important; }
@keyframes hxReveal { from { clip-path: inset(7% 7% 7% 7% round 12px); } to { clip-path: inset(0 0 0 0 round 12px); } }
@media (max-width: 899px) {
  .hx-hero-grid { gap: 20px; }
  .hx-photo { aspect-ratio: 4 / 4.6; }
}
@media (min-width: 900px) {
  .hx-scene { order: 0; display: flex; justify-content: flex-end; }
  .hx-photo { width: min(100%, calc((100svh - var(--hx-head) - 110px) * .8), 600px); }
  .hx-bars { top: 10px; left: 16px; right: 16px; }
  .hx-photo .hx-day-chip { left: 20px; bottom: 20px; }
  [dir="rtl"] .hx-photo .hx-day-chip { right: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hx-photo .hx-day-shot { transition: none; } }

/* text logo (admin → Website texts → logo_text, e.g. "Delevo B.V."): replaces the word-mark image */
.dv-logo-text { display: inline-block; font-family: 'Manrope', 'IBM Plex Sans Arabic', system-ui, sans-serif; font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.02em; color: var(--hx-green, #1FA06B); white-space: nowrap; direction: ltr; unicode-bidi: isolate; }
.dv-foot-brand .dv-logo-text { margin-bottom: 14px; font-size: 24px; }
@media (max-width: 560px) { .dv-logo .dv-logo-text { font-size: 21px; } }

/* Real app screens under "one account" (2026-10-30) */
.hx-shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.5vw, 28px); margin-top: clamp(32px, 5vw, 56px); }
.hx-shot { margin: 0; text-align: center; min-width: 0; }
.hx-shot img { display: block; width: 100%; height: auto; border-radius: clamp(22px, 3vw, 34px); border: 5px solid #14231D; background: #F7F9F8; box-shadow: 0 18px 40px rgba(20, 35, 29, .16); }
.hx-shot figcaption { margin-top: 12px; font-weight: 700; }
@media (max-width: 760px) {
  .hx-shots { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; padding-bottom: 8px; }
  .hx-shot { flex: 0 0 64%; scroll-snap-align: center; }
}