/* =========================================================================
   Fresh — design system
   One stylesheet. Colour tokens come from includes/theme-colors.twig
   (--brand, --accent, --ink, --surface, --surface-alt, --text, --on-brand,
   --icon, and derived --on-ink/--heading/--muted/--border/…). This file owns
   every non-colour token plus the reset, layout and components.
   No !important.
   ========================================================================= */

@layer reset, base, layout, components, utilities;

/* ── Design tokens (non-colour) ──────────────────────────────────────── */
:root {
  --container: 1200px;
  --container-narrow: 820px;
  --pad-x: clamp(1rem, 4vw, 2.5rem);
  --section-y: clamp(3rem, 7vw, 6rem);
  --gap: clamp(1rem, 2.5vw, 2rem);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --shadow: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .06);
  --shadow-lg: 0 18px 40px rgba(16, 24, 40, .16);

  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, Cambria, "Times New Roman", serif;
  /* --font-head is set per-tenant in includes/theme-colors.twig (serif|sans);
     this var() fallback keeps headings elegant if that include is missing. */

  --fs-body: clamp(1rem, .97rem + .15vw, 1.075rem);
  --fs-h1: clamp(2.2rem, 1.6rem + 3vw, 4rem);
  --fs-h2: clamp(1.7rem, 1.35rem + 1.7vw, 2.6rem);
  --fs-h3: clamp(1.2rem, 1.08rem + .6vw, 1.5rem);
  --lh-body: 1.65;
  --lh-head: 1.15;

  --header-h: 84px;
  --transition: 200ms ease;
}

/* ── Reset ───────────────────────────────────────────────────────────── */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
  /* Sticky-footer shell: the body is a full-height flex column so the footer always
     sits at the bottom (and counts toward the height) even on short pages; <main>
     grows to fill the gap instead of leaving whitespace below the footer. */
  body { min-height: 100vh; display: flex; flex-direction: column; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
  main { flex: 1 0 auto; }
  img, picture, svg, video { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; }
  a { color: inherit; text-decoration: none; }
  ul, ol { list-style: none; padding: 0; }
  table { border-collapse: collapse; width: 100%; }
  :where(h1, h2, h3, h4) { line-height: var(--lh-head); text-wrap: balance; }
  :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

/* ── Base ────────────────────────────────────────────────────────────── */
@layer base {
  body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    color: var(--text);
    background: var(--surface);
  }
  h1, h2, h3, h4 { font-family: var(--font-head, var(--font-serif)); color: var(--heading); font-weight: 700; letter-spacing: -.015em; }
  h1 { font-size: var(--fs-h1); }
  h2 { font-size: var(--fs-h2); }
  h3 { font-size: var(--fs-h3); }
  p { max-width: 68ch; }
  a { color: var(--brand); transition: color var(--transition); }
  a:hover { color: var(--brand-hover); }
  strong { font-weight: 700; }
  hr { border: 0; border-top: 1px solid var(--border); margin: 1.5rem 0; }
  ::selection { background: var(--brand); color: var(--on-brand); }
  .no-scroll { overflow: hidden; }
}

/* ── Layout ──────────────────────────────────────────────────────────── */
@layer layout {
  .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
  .container--narrow { max-width: var(--container-narrow); }
  .section { padding-block: var(--section-y); }
  .section--alt { background: var(--surface-alt); }
  .section--ink { background: var(--ink); color: var(--on-ink); }
  .section--ink :where(h1, h2, h3, h4) { color: var(--on-ink); }
  /* Reorder-safe seams: the builder lets any section order happen, so touching
     same-colour bands get a hairline to avoid merging into one flat block. */
  .section--alt + .section--alt { border-top: 1px solid var(--border); }
  .section--ink + .section--ink { border-top: 1px solid color-mix(in srgb, var(--on-ink) 14%, transparent); }
  .callout + .callout { border-top: 1px solid color-mix(in srgb, var(--on-ink) 14%, transparent); }

  .grid { display: grid; gap: var(--gap); }
  .grid--auto { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
  .grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
  .grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
  .grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
  /* Centred wrap — full rows lay out 3-up like grid--3, but an incomplete last
     row is centred instead of left-aligned (CSS grid can't centre orphan items).
     No flex-grow, so orphans keep their column width. Breakpoints mirror the
     auto-fit ~280px min above. */
  .grid--center { display: flex; flex-wrap: wrap; justify-content: center; }
  .grid--center > * { flex: 0 1 100%; }
  @media (min-width: 600px) {
    .grid--center > * { flex-basis: calc((100% - var(--gap)) / 2); }
  }
  @media (min-width: 900px) {
    .grid--center > * { flex-basis: calc((100% - 2 * var(--gap)) / 3); }
    /* compact (catalog aanbiedingen) actually goes 4-up here — grid--4 alone is
       inert under grid--center's flex, so drive the basis explicitly. */
    .grid--4.grid--center > * { flex-basis: calc((100% - 3 * var(--gap)) / 4); }
  }
  .stack > * + * { margin-top: 1rem; }
  /* Extra lucht vóór kop-secties in prose (bijv. de privacyverklaring), zodat de
     secties duidelijk uit elkaar staan i.p.v. één dichte tekstblok. */
  .stack > h2 { margin-top: 2.25rem; }
  .stack > h3 { margin-top: 1.75rem; }
  .stack > :first-child { margin-top: 0; }
  .split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
  @media (min-width: 860px) { .split { grid-template-columns: 1fr 1fr; } }
}

/* ── Section heading ─────────────────────────────────────────────────── */
@layer components {
  .sec-head { max-width: 60ch; margin-inline: auto; }
  .sec-head--center { text-align: center; }
  .sec-head__eyebrow {
    display: inline-flex; align-items: center; gap: .6rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .2em;
    text-transform: uppercase; color: var(--accent); margin-bottom: .7rem;
  }
  /* Decorative flanking rules on centred eyebrows */
  .sec-head--center .sec-head__eyebrow::before,
  .sec-head--center .sec-head__eyebrow::after {
    content: ""; width: 1.75rem; height: 2px; border-radius: 2px;
    background: color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .sec-head p { max-width: none; color: var(--muted); margin-top: .75rem; }
  .sec-head--center p { margin-inline: auto; }
  .section--ink .sec-head p { color: color-mix(in srgb, var(--on-ink) 78%, transparent); }

  /* ── Buttons ───────────────────────────────────────────────────────── */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    padding: .8rem 1.5rem; border-radius: var(--radius-sm); font-weight: 700;
    line-height: 1; border: 2px solid transparent; text-align: center;
    transition: transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .btn .icon { width: 1.1em; height: 1.1em; }
  .btn:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0); }
  .btn--primary { background: var(--brand); color: var(--on-brand); border-color: var(--brand); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--brand) 60%, transparent); }
  .btn--primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
  .btn--secondary { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
  .btn--secondary:hover { background: transparent; color: var(--ink); }
  .btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
  .btn--ghost:hover { background: currentColor; }
  /* Light outline for use over dark imagery (hero / callout) */
  .btn--outline { background: color-mix(in srgb, #fff 12%, transparent); color: #fff; border-color: color-mix(in srgb, #fff 65%, transparent); backdrop-filter: blur(2px); }
  .btn--outline:hover { background: #fff; color: var(--ink); border-color: #fff; }
  .btn--lg { padding: 1rem 1.9rem; font-size: 1.05rem; }
  .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; }
  .sec-head--center + .btn-row, .callout__inner .btn-row { justify-content: center; }

  /* ── Coloured icon holder ──────────────────────────────────────────── */
  .icon-badge {
    display: grid; place-items: center; flex: 0 0 auto;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--icon-bg); color: var(--icon);
  }
  .icon-badge .icon { width: 1.6rem; height: 1.6rem; }

  /* ── Header / navigation ───────────────────────────────────────────── */
  .site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--ink); color: var(--on-ink);
    transition: box-shadow var(--transition), background var(--transition);
  }
  .site-header.is-stuck { box-shadow: var(--shadow); }
  .site-header--brand { background: var(--brand); color: var(--on-brand); }
  .site-header--light { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--border); }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1.5rem; min-height: var(--header-h);
  }
  .site-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.25rem; letter-spacing: .02em; color: inherit; text-transform: uppercase; }
  .site-logo img { height: 44px; width: auto; }

  .nav { display: flex; align-items: center; gap: 1.75rem; }
  .nav__list { display: flex; align-items: center; gap: 1.5rem; }
  .nav__item { position: relative; }
  .nav__link { font-weight: 600; color: inherit; padding: .4rem 0; position: relative; }
  .nav__link::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
    background: currentColor; transition: right var(--transition); opacity: .85;
  }
  .nav__link:hover::after, .nav__item.is-current > .nav__link::after { right: 0; }
  .nav__item .nav__submenu {
    position: absolute; top: 100%; left: 0; min-width: 200px;
    background: var(--surface); color: var(--text); border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg); padding: .5rem; display: none; z-index: 10;
  }
  .nav__item:hover .nav__submenu { display: block; }
  .nav__submenu a { display: block; padding: .55rem .75rem; border-radius: 6px; color: var(--text); font-weight: 500; }
  .nav__submenu a:hover { background: var(--surface-alt); color: var(--brand); }

  .nav-toggle, .nav-close, .nav__sub-toggle { display: none; }
  .nav-toggle .icon, .nav-close .icon { width: 1.9rem; height: 1.9rem; }
  .header-badge { margin-left: .25rem; }

  /* Open/closed badge. The label keeps the header's own text colour (readable on
     dark, brand and light headers alike); only the DOT carries the status colour,
     so contrast never depends on the header background. */
  .open-badge {
    display: inline-flex; align-items: center; gap: .45rem;
    font-size: .82rem; font-weight: 600; padding: .3rem .75rem; border-radius: 999px;
    background: color-mix(in srgb, currentColor 18%, transparent);
  }
  .open-badge::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--badge-dot, currentColor); box-shadow: 0 0 0 3px color-mix(in srgb, var(--badge-dot, currentColor) 30%, transparent); }
  .open-badge.is-open { --badge-dot: #22c55e; }
  .open-badge.is-closed { --badge-dot: #f59e0b; }

  /* ── Mobile navigation ─────────────────────────────────────────────── */
  @media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }
    .nav {
      position: fixed; inset: 0 0 0 auto; width: min(320px, 82vw);
      flex-direction: column; align-items: stretch; gap: 0;
      background: var(--ink); color: var(--on-ink); padding: 1.5rem;
      transform: translateX(100%); transition: transform 280ms ease; z-index: 60;
      overflow-y: auto;
    }
    .nav-close { display: inline-flex; align-self: flex-end; color: inherit; }
    .nav__list { flex-direction: column; align-items: stretch; gap: 0; margin-top: 1rem; }
    .nav__item { border-bottom: 1px solid color-mix(in srgb, var(--on-ink) 15%, transparent); }
    .nav__link { display: block; padding: .9rem 0; }
    .nav__link::after { display: none; }
    .nav__submenu { position: static; display: none; box-shadow: none; background: transparent; color: inherit; padding-left: 1rem; }
    .nav__item.is-open .nav__submenu { display: block; }
    .nav__submenu a { color: inherit; }
    .nav__item.has-sub { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .nav__item.has-sub > .nav__link { flex: 1; }
    .nav__sub-toggle { display: inline-flex; padding: .5rem; color: inherit; }
    .nav__sub-toggle .icon { width: 1.3rem; height: 1.3rem; transition: transform var(--transition); }
    .nav__item.is-open .nav__sub-toggle .icon { transform: rotate(180deg); }
    .nav__item.has-sub .nav__submenu { flex-basis: 100%; }
    .nav-backdrop {
      position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 55;
      opacity: 0; visibility: hidden; transition: opacity var(--transition);
    }
    body.nav-open .nav { transform: translateX(0); }
    body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
  }

  /* ── Hero / banner ─────────────────────────────────────────────────── */
  .hero { position: relative; display: grid; place-items: center; min-height: clamp(460px, 68vh, 720px); overflow: hidden; text-align: center; color: #fff; }
  .hero__media { position: absolute; inset: 0; background-size: cover; background-position: center; z-index: 0; transform: scale(1.06); animation: hero-drift 22s ease-in-out infinite alternate; }
  @keyframes hero-drift { to { transform: scale(1.14) translateY(-1.5%); } }
  .hero__media::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(120% 80% at 50% 0%, transparent 40%, color-mix(in srgb, var(--ink) 55%, rgba(0,0,0,.5)) 100%),
      linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,.34) 45%, color-mix(in srgb, var(--ink) 82%, rgba(0,0,0,.7)) 100%);
  }
  .hero__content { position: relative; z-index: 1; padding: 3.5rem var(--pad-x); max-width: 920px; }
  .hero__eyebrow {
    display: inline-flex; align-items: center; gap: .55rem; margin-bottom: 1.1rem;
    font-size: .8rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    color: #fff; padding: .45rem 1.1rem; border-radius: 999px;
    background: color-mix(in srgb, #fff 14%, transparent);
    border: 1px solid color-mix(in srgb, #fff 30%, transparent); backdrop-filter: blur(3px);
  }
  .hero__eyebrow .icon { color: var(--accent); }
  .hero__content h1 { color: #fff; font-size: clamp(2.4rem, 1.6rem + 3.4vw, 4.4rem); text-shadow: 0 2px 30px rgba(0,0,0,.4); }
  .hero__sub { font-size: clamp(1.05rem, 1rem + .5vw, 1.35rem); margin: 1.25rem auto 2rem; color: rgba(255,255,255,.94); text-shadow: 0 1px 12px rgba(0,0,0,.45); }
  .hero__sub p { max-width: 60ch; margin-inline: auto; }
  /* Scroll-hint arrow — shared by the hero and inner-page banners. Needs a
     position:relative ancestor (both .hero and .page-header have one). */
  .scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; transform: translateX(-50%); z-index: 1; display: grid; place-items: center; color: #fff; opacity: .85; animation: hero-bob 2s ease-in-out infinite; }
  .scroll-cue:hover { opacity: 1; }
  .scroll-cue .icon { width: 1.7rem; height: 1.7rem; }
  /* When the overlapping trust-bar covers the hero bottom, sit clear above it (overlap is max 3.5rem). */
  .scroll-cue--raised { bottom: clamp(3.75rem, 6vw, 4.75rem); }
  @keyframes hero-bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
  /* No photo → a themed gradient banner (brand-tinted ink) instead of a flat
     colour or placeholder, with extra floating motifs made a touch more visible. */
  .hero--themed {
    background:
      radial-gradient(100% 75% at 50% -10%, color-mix(in srgb, var(--brand) 26%, var(--ink)) 0%, transparent 60%),
      linear-gradient(160deg, color-mix(in srgb, var(--ink) 92%, #000) 0%, var(--ink) 55%, color-mix(in srgb, var(--brand) 14%, var(--ink)) 100%);
  }
  .hero--themed .motif, .page-header--themed .motif { opacity: .11; }

  /* ── Page header (inner-page banner) ───────────────────────────────── */
  .page-header { position: relative; overflow: hidden; background: var(--ink); color: #fff; text-align: center; padding-block: clamp(2.5rem, 6vw, 5rem); background-size: cover; background-position: center; }
  .page-header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0,0,0,.4), rgba(0,0,0,.62)); }
  .page-header > .container { position: relative; z-index: 1; }
  .page-header h1 { color: #fff; }
  .page-header__sub { margin-top: .75rem; color: rgba(255,255,255,.9); }
  .page-header__sub p { max-width: none; margin-inline: auto; }
  /* No photo → themed gradient + motifs; drop the dark scrim (nothing to scrim). */
  .page-header--themed {
    background:
      radial-gradient(90% 90% at 50% -20%, color-mix(in srgb, var(--brand) 22%, var(--ink)) 0%, transparent 62%),
      linear-gradient(160deg, color-mix(in srgb, var(--ink) 92%, #000) 0%, var(--ink) 60%, color-mix(in srgb, var(--brand) 12%, var(--ink)) 100%);
  }
  .page-header--themed::before { display: none; }

  /* ── Feature list ("waarom wij") ───────────────────────────────────── */
  .feature { display: flex; gap: 1.25rem; align-items: flex-start; }
  .feature h3 { margin-bottom: .4rem; }
  .feature p { color: var(--muted); }
  .section--ink .feature p { color: color-mix(in srgb, var(--on-ink) 78%, transparent); }

  /* ── Callout band (phone CTA) ──────────────────────────────────────── */
  .callout { position: relative; overflow: hidden; text-align: center; color: #fff; padding-block: clamp(3rem, 6vw, 5rem); background: var(--ink); background-size: cover; background-position: center; }
  .callout::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.55); }
  .callout__inner { position: relative; display: grid; gap: 1.5rem; justify-items: center; }
  .callout h2 { color: #fff; }
  .callout__sub { color: rgba(255,255,255,.9); max-width: 60ch; margin-inline: auto; }
  .callout__sub p { max-width: none; }

  /* ── USP / trust bar ───────────────────────────────────────────────── */
  .usp-bar { position: relative; z-index: 2; padding-block: var(--section-y); }
  .usp-bar__inner {
    background: var(--surface); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); padding: clamp(1.25rem, 3vw, 2rem);
    display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  }
  /* Lift the bar so it laps onto the hero — but ONLY when it directly follows the
     hero (which emits the #content-start marker). In the free-zone builder the USP
     bar can be placed anywhere; as the first section its negative margin would pull
     it up under the sticky header, so it stays neutral unless a hero precedes it. */
  .usp-bar--overlap { margin-top: 0; }
  /* When it laps onto the hero, extend the hero's dark surface behind the whole bar
     so the floating card sits on ONE consistent backdrop — otherwise the dark→light
     seam beside the card (hero above, page below) cuts across it. The transition to
     the light page then happens cleanly below the bar. Only in the hero-adjacent
     position; anywhere else the bar stays transparent (card floats on the page). */
  #content-start + .usp-bar { background: var(--ink); padding-top: 0; padding-bottom: clamp(1.25rem, 3vw, 2rem); }
  #content-start + .usp-bar .usp-bar--overlap { margin-top: clamp(-3.5rem, -5vw, -2.5rem); }
  .usp {
    display: flex; gap: .9rem; align-items: center; padding: .35rem .5rem;
    text-align: left;
  }
  .usp + .usp { border-left: 1px solid var(--border); padding-left: 1.4rem; }
  @media (max-width: 640px) { .usp + .usp { border-left: 0; padding-left: .5rem; } }
  .usp__icon { display: grid; place-items: center; flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); }
  .usp__icon .icon { width: 1.5rem; height: 1.5rem; }
  .usp__title { font-weight: 700; color: var(--heading); font-size: 1rem; line-height: 1.25; }
  .usp__text { color: var(--muted); font-size: .88rem; }

  /* ── Specialty / service cards ─────────────────────────────────────── */
  .service-card {
    position: relative; background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 1.9rem 1.6rem; height: 100%;
    display: flex; flex-direction: column; gap: .65rem;
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
  }
  .service-card::before {
    content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
    background: linear-gradient(90deg, var(--brand), var(--accent));
    border-radius: var(--radius) var(--radius) 0 0; transform: scaleX(0); transform-origin: left;
    transition: transform 320ms ease;
  }
  .service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
  .service-card:hover::before { transform: scaleX(1); }
  .service-card__icon { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: var(--radius-sm); background: var(--brand-soft); color: var(--brand); margin-bottom: .3rem; }
  .service-card__icon .icon { width: 1.7rem; height: 1.7rem; }
  .service-card h3 { font-size: 1.2rem; }
  .service-card p { color: var(--muted); font-size: .95rem; }
  .service-card__link { margin-top: auto; font-weight: 700; color: var(--brand); display: inline-flex; align-items: center; gap: .35rem; padding-top: .4rem; }
  .service-card__link .icon { transition: transform var(--transition); }
  .service-card:hover .service-card__link .icon { transform: translateX(3px); }

  /* ── Stats band ────────────────────────────────────────────────────── */
  .stats { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); text-align: center; }
  .stat__value { font-family: var(--font-head, var(--font-serif)); font-size: clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem); font-weight: 700; line-height: 1; color: var(--accent); letter-spacing: -.02em; }
  .section--ink .stat__value { color: color-mix(in srgb, var(--accent) 70%, #fff); }
  .stat__label { margin-top: .5rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; color: var(--muted); }
  .section--ink .stat__label { color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
  .stat + .stat { position: relative; }
  @media (min-width: 720px) { .stat:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * clamp(.75rem, 2vw, 1.25rem)); top: 50%; transform: translateY(-50%); height: 3rem; width: 1px; background: var(--border); } .section--ink .stat:not(:last-child)::after { background: color-mix(in srgb, var(--on-ink) 18%, transparent); } }

  /* ── Testimonials / quotes ─────────────────────────────────────────── */
  .quote-card {
    position: relative; background: var(--surface); border-radius: var(--radius);
    padding: 2.4rem 1.8rem 1.6rem; box-shadow: var(--shadow-sm); height: 100%;
    display: flex; flex-direction: column; gap: 1rem; border: 1px solid var(--border);
  }
  .quote-card__mark { position: absolute; top: 1rem; left: 1.4rem; color: var(--accent); opacity: .25; }
  .quote-card__mark .icon { width: 2.4rem; height: 2.4rem; }
  .quote-card__stars { display: inline-flex; gap: .15rem; color: #f5a623; }
  .quote-card__stars .icon { width: 1.05rem; height: 1.05rem; }
  .quote-card__text { position: relative; font-size: 1.05rem; color: var(--heading); font-style: italic; }
  .quote-card__text p { max-width: none; }
  .quote-card__author { margin-top: auto; display: flex; align-items: center; gap: .8rem; }
  .quote-card__avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; overflow: hidden; flex: 0 0 auto; }
  .quote-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .quote-card__name { font-weight: 700; color: var(--heading); font-style: normal; line-height: 1.2; }
  .quote-card__role { font-size: .85rem; color: var(--muted); font-style: normal; }

  /* ── Weekly special band ───────────────────────────────────────────── */
  .special { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); border-radius: var(--radius-lg); }
  .special__grid { display: grid; gap: 0; align-items: stretch; }
  @media (min-width: 780px) { .special__grid { grid-template-columns: 1.1fr 1fr; } }
  .special__media { position: relative; min-height: 260px; background-size: cover; background-position: center; }
  .special__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 55%, var(--ink) 100%); }
  @media (max-width: 779px) { .special__media::after { background: linear-gradient(180deg, transparent 55%, var(--ink) 100%); } }
  .special__body { padding: clamp(1.8rem, 4vw, 3rem); display: flex; flex-direction: column; gap: 1rem; justify-content: center; }
  .special__body h2 { color: var(--on-ink); }
  .special__tag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem;
    background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: .82rem;
    letter-spacing: .08em; text-transform: uppercase; padding: .4rem .9rem; border-radius: 999px;
  }
  .special__price { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
  .special__price-now { font-family: var(--font-head, var(--font-serif)); font-size: clamp(2rem, 1.5rem + 2vw, 3rem); font-weight: 700; color: color-mix(in srgb, var(--accent) 70%, #fff); line-height: 1; }
  .special__price-was { text-decoration: line-through; opacity: .6; font-size: 1.1rem; }
  .special__body p { color: color-mix(in srgb, var(--on-ink) 82%, transparent); }
  .special__body p { max-width: 52ch; }

  /* Homepage specials band — grid of product-discount cards (light) */
  .special-card { padding: 0; overflow: hidden; background: var(--surface); border: 1px solid var(--border); display: flex; flex-direction: column; }
  .special-card__media { position: relative; aspect-ratio: 4 / 3; background-size: cover; background-position: center; }
  .special-card__badge {
    position: absolute; top: .7rem; left: .7rem; z-index: 1;
    background: var(--accent); color: var(--on-brand);
    font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .3rem .6rem; border-radius: 999px; box-shadow: var(--shadow-sm);
  }
  .special-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
  .special-card__badge--inline { position: static; display: inline-block; box-shadow: none; white-space: normal; max-width: 100%; line-height: 1.25; }
  .special-card__body { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
  .special-card__title { font-family: var(--font-head, var(--font-serif)); font-size: 1.2rem; font-weight: 700; color: var(--heading); }
  .special-card__name { color: var(--muted); font-size: .9rem; margin-top: -.25rem; }
  .special-card__text { color: var(--muted); font-size: .95rem; }
  .special-card .special__price { margin-top: auto; }
  .special-card .special__price-now { color: var(--accent); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
  .special-card .special__price-was { color: var(--muted); opacity: .8; }
  .special-card__unit { font-size: .8rem; font-weight: 600; color: var(--muted); }
  /* Compact variant — the catalog band: same card, a touch smaller than home. */
  .special-card--compact .special-card__media { aspect-ratio: 16 / 10; }
  .special-card--compact .special-card__body { padding: 1rem 1.1rem; gap: .4rem; }
  .special-card--compact .special-card__title { font-size: 1.05rem; }
  .special-card--compact .special__price-now { font-size: clamp(1.25rem, 1rem + .8vw, 1.6rem); }

  /* ── Split reverse (image/text swap on desktop) ────────────────────── */
  @media (min-width: 860px) { .split--reverse > :first-child { order: 2; } }

  /* ── Timeline / milestones ─────────────────────────────────────────── */
  .timeline { position: relative; max-width: 760px; margin-inline: auto; display: grid; gap: 2rem; }
  .timeline::before { content: ""; position: absolute; left: 11px; top: .5rem; bottom: .5rem; width: 2px; background: var(--border); }
  .timeline__item { position: relative; padding-left: 3rem; }
  .timeline__item::before { content: ""; position: absolute; left: 4px; top: .3rem; width: 16px; height: 16px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
  .timeline__year { font-family: var(--font-head, var(--font-serif)); font-weight: 700; color: var(--accent); font-size: 1.15rem; letter-spacing: .01em; }
  .timeline__title { font-size: 1.15rem; margin: .1rem 0 .35rem; color: var(--heading); font-weight: 700; }
  .timeline__text { color: var(--muted); }
  .timeline__text p { max-width: none; }

  /* ── Pull-quote (big brand statement) ──────────────────────────────── */
  .pull-quote { max-width: 900px; margin-inline: auto; text-align: center; }
  .pull-quote__mark { color: var(--accent); opacity: .55; }
  .pull-quote__mark .icon { width: 3rem; height: 3rem; }
  .pull-quote blockquote { font-family: var(--font-head, var(--font-serif)); font-size: clamp(1.4rem, 1.1rem + 1.4vw, 2.1rem); line-height: 1.35; font-style: italic; margin: 1rem 0 1.25rem; }
  .section--ink .pull-quote blockquote { color: var(--on-ink); }
  .pull-quote blockquote p { max-width: none; margin-inline: auto; }
  .pull-quote__author { font-weight: 700; font-style: normal; letter-spacing: .02em; }
  .section--ink .pull-quote__author { color: color-mix(in srgb, var(--on-ink) 85%, transparent); }
  .pull-quote__role { font-weight: 500; color: var(--muted); }
  .section--ink .pull-quote__role { color: color-mix(in srgb, var(--on-ink) 65%, transparent); }

  /* ── Media frame ───────────────────────────────────────────────────── */
  .media-frame { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); }
  .media-frame img { width: 100%; height: 100%; object-fit: cover; }
  /* "Waarom ons" split: bound the image to a card so it doesn't grow to its
     natural height and dominate the row — keeps it vertically centred next to
     the feature list instead of hugging the top. */
  .media-frame--why { align-self: center; aspect-ratio: 4 / 3; }

  /* ── Cards (unified: product / catalog / overview) ─────────────────── */
  .card {
    background: var(--surface-alt); border-radius: var(--radius);
    padding: 1.25rem 1.4rem; box-shadow: var(--shadow-sm);
    transition: transform var(--transition), box-shadow var(--transition);
    display: flex; flex-direction: column; gap: .5rem; height: 100%;
  }
  .card__title { font-size: 1.1rem; font-weight: 700; color: var(--heading); }
  .card__desc { color: var(--muted); font-size: .95rem; }
  .card__price { margin-top: auto; font-weight: 800; color: var(--accent); font-size: 1.05rem; }
  .card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow); }

  .card-media { padding: 0; overflow: hidden; }
  .card-media__img { aspect-ratio: 16 / 10; overflow: hidden; }
  .card-media__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
  .card-media:hover .card-media__img img { transform: scale(1.05); }
  .card-media__body { padding: 1.25rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; }
  .card-media__date { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .85rem; }
  .card-media__date .icon { width: 1em; height: 1em; opacity: .8; }

  /* Team card */
  .team-card { align-items: center; }
  .team-card__photo { width: 150px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; margin: 0 auto .5rem; box-shadow: var(--shadow-sm); }
  .team-card__photo img { width: 100%; height: 100%; object-fit: cover; }

  /* Product card (image + price tag) */
  .product-card { background: var(--surface); border: 1px solid var(--border); }
  .product-card .card-media__img { aspect-ratio: 4 / 3; position: relative; }
  .product-card__tag {
    position: absolute; top: .7rem; right: .7rem; z-index: 1;
    background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: .95rem;
    padding: .35rem .7rem; border-radius: 999px; box-shadow: var(--shadow-sm);
  }
  .product-card .card__price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .4rem; }
  .product-card__unit { font-size: .8rem; font-weight: 600; color: var(--muted); }

  /* Discount ("Aanbieding") — badge + struck was-price */
  .product-card__badge {
    position: absolute; top: .7rem; left: .7rem; z-index: 1;
    background: var(--accent); color: var(--on-brand);
    font-weight: 800; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
    padding: .3rem .6rem; border-radius: 999px; box-shadow: var(--shadow-sm);
  }
  .product-card__badge--inline {
    position: static; display: inline-block;
    box-shadow: none; white-space: normal; max-width: 100%; line-height: 1.25;
  }
  .product-card__head { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
  .product-card__tag-was,
  .card__price-was {
    font-size: .82rem; font-weight: 600; color: var(--muted); text-decoration: line-through;
  }
  .product-card__tag { display: inline-flex; align-items: baseline; gap: .35rem; }
  .product-card__tag .product-card__tag-was { color: var(--on-brand); opacity: .75; }

  /* ── Catalog (native <details> accordion) ──────────────────────────── */
  .catalog { display: grid; gap: 1rem; }
  .catalog__cat { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
  .catalog__cat > summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 1.1rem 1.4rem; background: var(--ink); color: var(--on-ink);
    font-weight: 700; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em;
  }
  .catalog__cat > summary::-webkit-details-marker { display: none; }
  .catalog__cat > summary .icon { width: 1.3rem; height: 1.3rem; transition: transform var(--transition); }
  .catalog__cat[open] > summary .icon { transform: rotate(180deg); }
  .catalog__panel { padding: 1.4rem; background: var(--surface); }
  .catalog__panel .grid { --gap: 1rem; }

  /* ── Contact info cards + opening hours ────────────────────────────── */
  .info-card { background: var(--surface-alt); border-radius: var(--radius); padding: 1.6rem; display: flex; gap: 1.1rem; align-items: flex-start; box-shadow: var(--shadow-sm); }
  .info-card h3 { font-size: 1.1rem; margin-bottom: .25rem; }
  .info-card a { color: var(--text); }
  .info-card a:hover { color: var(--brand); }

  .oh { width: 100%; }
  .oh td { padding: .35rem 0; vertical-align: top; }
  .oh__day { font-weight: 600; padding-right: 1.5rem; white-space: nowrap; }
  .oh__time { text-align: right; }

  /* Contact page — two-column info + form, plus a full-width location map. */
  .contact-split { align-items: start; }
  .contact-single { max-width: 620px; margin-inline: auto; }
  .contact-lines { display: flex; flex-direction: column; gap: .75rem; margin-top: 1.75rem; }
  .contact-line { display: flex; gap: 1rem; align-items: center; padding: .9rem 1.1rem; border-radius: var(--radius); background: var(--surface-alt); color: var(--text); transition: transform .2s ease, box-shadow .2s ease; }
  .contact-line:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--text); }
  .contact-line strong { color: var(--heading); }
  .contact-panel { background: var(--surface-alt); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); box-shadow: var(--shadow-sm); }
  .contact-panel h3 { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; }
  .contact-map { line-height: 0; }
  .contact-map iframe { width: 100%; height: clamp(300px, 42vw, 460px); border: 0; display: block; filter: grayscale(.15); }
  .map-heading { line-height: 1.2; margin: 2rem 0 1rem; }
  /* Consent placeholder shown until the visitor accepts cookies (the map iframe is
     injected client-side by cookie-consent.twig). Same footprint as the iframe. */
  .map-consent { line-height: normal; display: flex; align-items: center; justify-content: center; min-height: clamp(300px, 42vw, 460px); padding: 1.5rem; background: var(--surface-alt); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
  .map-consent__inner { max-width: 30rem; text-align: center; }
  .map-consent__inner p { margin: 0 0 1rem; color: var(--muted); }

  /* Friendly empty state (e.g. an overview page with no items yet). */
  .empty-state { max-width: 520px; margin: 0 auto; text-align: center; padding: clamp(2.5rem, 6vw, 4rem) 1.5rem; }
  .empty-state__icon { display: inline-grid; place-items: center; width: 4rem; height: 4rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent); margin-bottom: 1.25rem; }
  .empty-state__icon .icon { width: 2rem; height: 2rem; }
  .empty-state h3 { font-size: 1.5rem; margin-bottom: .5rem; }
  .empty-state p { color: var(--muted); }
  .oh tr.is-today { color: var(--brand); font-weight: 700; }

  .oh-exception {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: 1rem 1.2rem; border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger) 12%, var(--surface));
    border-left: 4px solid var(--danger); color: var(--heading);
  }
  .oh-exception .icon { color: var(--danger); flex: 0 0 auto; margin-top: .1rem; }
  .oh-exception__date { font-weight: 700; }

  /* ── Forms ─────────────────────────────────────────────────────────── */
  .form { display: grid; gap: 1.1rem; }
  .field { display: grid; gap: .4rem; }
  .field label { font-weight: 600; font-size: .92rem; color: var(--heading); }
  .field input, .field textarea, .field select {
    width: 100%; padding: .8rem 1rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--border); background: var(--surface); color: var(--text);
    transition: border-color var(--transition), box-shadow var(--transition);
  }
  .field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent);
  }
  .field textarea { min-height: 140px; resize: vertical; }
  .field--wide { grid-column: 1 / -1; }
  .form__grid { display: grid; gap: 1.1rem; }
  @media (min-width: 620px) { .form__grid { grid-template-columns: 1fr 1fr; } }
  /* Honeypot — visually removed but NOT display:none (bots detect that). */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .form-status { padding: .9rem 1.2rem; border-radius: var(--radius-sm); font-weight: 600; }
  .form-status--ok { background: color-mix(in srgb, var(--success) 15%, var(--surface)); color: #15803d; }
  .form-status--error { background: color-mix(in srgb, var(--danger) 15%, var(--surface)); color: #b91c1c; }

  /* ── Gallery + lightbox ────────────────────────────────────────────── */
  .gallery { --gap: .75rem; }
  .gallery__item { position: relative; border-radius: var(--radius); overflow: hidden; aspect-ratio: 1; }
  .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
  .gallery__item:hover img { transform: scale(1.06); }
  .gallery__zoom {
    position: absolute; inset: 0; display: grid; place-items: center; color: #fff;
    background: rgba(0,0,0,.4); opacity: 0; transition: opacity var(--transition);
  }
  .gallery__item:hover .gallery__zoom { opacity: 1; }
  .lightbox {
    position: fixed; inset: 0; z-index: 200; display: none; place-items: center;
    background: rgba(0,0,0,.9); padding: 2rem;
  }
  .lightbox.is-open { display: grid; }
  .lightbox__img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius); }
  .lightbox__close { position: absolute; top: 1.2rem; right: 1.6rem; color: #fff; font-size: 2.5rem; line-height: 1; }

  /* ── Footer ────────────────────────────────────────────────────────── */
  .site-footer { position: relative; overflow: hidden; background: var(--ink); color: var(--on-ink); padding-block: clamp(2.5rem, 5vw, 4rem) 0; }
  .site-footer > .container { position: relative; z-index: 1; }
  .site-footer a { color: var(--on-ink); }
  .site-footer a:hover { color: color-mix(in srgb, var(--on-ink) 70%, var(--brand)); }
  .site-footer h3 { color: var(--on-ink); font-size: 1.15rem; margin-bottom: 1rem; }
  .footer-grid { display: grid; gap: 2.5rem; }
  @media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
  .footer-contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
  .footer-contact .icon { flex: 0 0 auto; margin-top: .2rem; opacity: .8; }
  .footer-links li { margin-bottom: .5rem; }
  .footer-social { display: flex; gap: .6rem; }
  .footer-social a, .footer-social__btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 0; padding: 0; color: inherit; cursor: pointer; background: color-mix(in srgb, var(--on-ink) 12%, transparent); }
  .footer-social a:hover, .footer-social__btn:hover { background: var(--brand); color: var(--on-brand); }
  .footer-social .icon { width: 1.15rem; height: 1.15rem; }
  .footer-bottom { margin-top: 2.5rem; padding-block: 1.5rem; border-top: 1px solid color-mix(in srgb, var(--on-ink) 15%, transparent); text-align: center; font-size: .88rem; color: color-mix(in srgb, var(--on-ink) 72%, transparent); }
  .footer-bottom a { text-decoration: underline; }

  /* ── Site notice ───────────────────────────────────────────────────── */
  .site-notice { background: var(--ink); color: var(--on-ink); font-size: .95rem; }
  .site-notice__inner { display: flex; align-items: center; gap: 1rem; padding: .7rem 0; }
  .site-notice__text { flex: 1; }
  .site-notice__cta { font-weight: 700; text-decoration: underline; white-space: nowrap; }
  .site-notice__close { margin-left: auto; font-size: 1.5rem; line-height: 1; color: inherit; opacity: .7; }
  .site-notice__close:hover { opacity: 1; }
  .site-notice--warning { background: #b45309; color: #fff; }
  .site-notice--closure { background: var(--danger); color: #fff; }

  /* ── Cookie banner ─────────────────────────────────────────────────── */
  .cookie-banner {
    position: fixed; inset: auto 0 0 0; z-index: 150; background: var(--ink); color: var(--on-ink);
    padding: 1rem var(--pad-x); box-shadow: 0 -4px 20px rgba(0,0,0,.2);
  }
  .cookie-banner__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; max-width: var(--container); margin-inline: auto; }
  .cookie-banner p { max-width: 70ch; margin: 0; color: inherit; }
  .cookie-banner__actions { display: flex; gap: .6rem; }

  /* ── Preloader ─────────────────────────────────────────────────────── */
  .fresh-loader { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--surface); transition: opacity 400ms ease, visibility 400ms ease; }
  .fresh-loader.is-done { opacity: 0; visibility: hidden; }
  .fresh-loader__spinner { width: 48px; height: 48px; border: 4px solid var(--surface-alt); border-top-color: var(--brand); border-radius: 50%; animation: fresh-spin .8s linear infinite; }
  @keyframes fresh-spin { to { transform: rotate(360deg); } }

  /* ── Back to top ───────────────────────────────────────────────────── */
  .back-to-top {
    position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80;
    width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
    background: var(--brand); color: var(--on-brand); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--transition);
  }
  .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
  .back-to-top .icon { width: 1.4rem; height: 1.4rem; }
}

/* ── Utilities ───────────────────────────────────────────────────────── */
@layer utilities {
  .icon { width: 1em; height: 1em; display: inline-block; vertical-align: middle; }
  .icon--lg { width: 1.6rem; height: 1.6rem; }
  .text-center { text-align: center; }
  .muted { color: var(--muted); }
  .lead { font-size: clamp(1.1rem, 1.02rem + .4vw, 1.3rem); color: var(--muted); }
  .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

  /* Scroll reveal (optional per-item stagger via inline `--rd`) */
  [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; transition-delay: var(--rd, 0s); }
  [data-reveal].is-visible { opacity: 1; transform: none; }

  /* Section-builder preview: a script-less sandboxed iframe (body.is-preview), so JS
     never adds .is-visible or removes the preloader. Show reveal content immediately
     and hide any leftover blocker so the preview shows the section, not a spinner. */
  .is-preview [data-reveal] { opacity: 1; transform: none; transition: none; }
  .is-preview [data-preloader] { display: none; }
}

/* ── Branche sfeer-illustraties (motifs) ─────────────────────────────────
   Faint, slowly floating line-art scattered behind the footer + a few
   homepage bands. Markup from includes/motifs.twig; the set swaps with
   ThemeSettings.branche. Motifs inherit currentColor so they read light on
   dark surfaces and dark on light ones. Purely decorative (aria-hidden,
   pointer-events:none). Motion stops under prefers-reduced-motion. */
@layer components {
  /* Any section that hosts a motif-field must clip + establish stacking. */
  .motif-host { position: relative; overflow: hidden; }
  .motif-host > .container { position: relative; z-index: 1; }

  .motif-field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  .motif-wrap {
    position: absolute; width: var(--ms, 8rem); color: inherit; will-change: transform;
    /* `backwards` so that during animation-delay the motif already holds its
       start rotation (keyframe 0%) instead of snapping from rotate(0) — the
       stagger of delays otherwise reads as a few jerky "ticks" right after load. */
    animation: motif-float 16s ease-in-out infinite backwards;
  }
  .motif { width: 100%; height: auto; opacity: .07; }
  /* Image-mask motifs (slagerij): the detailed v1 meat drawings recoloured to
     currentColor via a mask, so they tint light-on-dark / dark-on-light like
     the inline-SVG ones. Square box, drawing contained + centred. */
  .motif--img {
    display: block; width: 100%; aspect-ratio: 1; background: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
  }
  .motif--steak   { -webkit-mask-image: url(../img/motifs/steak.webp);   mask-image: url(../img/motifs/steak.webp); }
  .motif--ham     { -webkit-mask-image: url(../img/motifs/ham.webp);     mask-image: url(../img/motifs/ham.webp); }
  .motif--worst   { -webkit-mask-image: url(../img/motifs/worst.webp);   mask-image: url(../img/motifs/worst.webp); }
  .motif--kip     { -webkit-mask-image: url(../img/motifs/kip.webp);     mask-image: url(../img/motifs/kip.webp); }
  .motif--kotelet { -webkit-mask-image: url(../img/motifs/kotelet.webp); mask-image: url(../img/motifs/kotelet.webp); }
  .motif--salami  { -webkit-mask-image: url(../img/motifs/salami.webp);  mask-image: url(../img/motifs/salami.webp); }

  @keyframes motif-float {
    0%, 100% { transform: translateY(0) rotate(var(--mr, 0deg)); }
    50%      { transform: translateY(-16px) rotate(calc(var(--mr, 0deg) + 5deg)); }
  }

  /* Position presets (referenced from includes/motifs.twig layouts) */
  .m-tl { top: 8%;  left: 4%; }
  .m-tr { top: 12%; right: 5%; }
  .m-bl { bottom: 12%; left: 5%; }
  .m-br { bottom: 8%;  right: 4%; }
  .m-l  { top: 22%; left: 3%; }
  .m-r  { top: 30%; right: 3%; }
  .m-bc { bottom: 3%; left: 46%; }
  /* Full-hero scatter (hero-full): three per side, but the two sides sit at
     different heights and the mid ones are inset, so they don't line up in
     two columns and have enough vertical gap not to overlap. */
  .m-s1 { top: 5%;  left: 2.5%; }
  .m-s2 { top: 40%; left: 8%; }
  .m-s3 { bottom: 5%; left: 3%; }
  .m-s4 { top: 9%;  right: 3%; }
  .m-s5 { top: 42%; right: 8.5%; }
  .m-s6 { bottom: 6%; right: 2.5%; }
  /* Inner-page banner is short — one motif per side, roughly centred. */
  .m-hl { top: 15%; left: 3%; }
  .m-hr { top: 12%; right: 3%; }

  /* On the narrowest screens the side motifs crowd the content — drop the
     inset mid ones and shrink the rest. */
  @media (max-width: 640px) {
    .motif-wrap { width: calc(var(--ms, 8rem) * .7); }
    .m-r, .m-l, .m-s2, .m-s5 { display: none; }
  }
}

/* ── Product-detail page (catalog sub-path) ─────────────────────────────── */
@layer components {
  /* Compact inner banner: the product name + breadcrumb, tighter than the
     full page-header. */
  .page-header--compact { padding-block: clamp(2.5rem, 6vw, 4rem); }
  .page-header--compact h1 { margin-top: .35rem; }

  .breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
    font-size: .85rem; opacity: .85;
  }
  .breadcrumb a { color: inherit; text-decoration: none; }
  .breadcrumb a:hover { text-decoration: underline; }
  .breadcrumb__sep { display: inline-flex; opacity: .5; }
  .breadcrumb__sep svg { width: 1em; height: 1em; }

  .product-detail__grid {
    display: grid; gap: clamp(1.5rem, 4vw, 3rem);
    grid-template-columns: 1fr;
  }
  @media (min-width: 820px) {
    .product-detail__grid { grid-template-columns: 5fr 4fr; align-items: start; }
  }

  .product-detail__main {
    display: block; position: relative; overflow: hidden;
    border-radius: var(--radius, 1rem); background: var(--surface-alt);
    aspect-ratio: 4 / 3;
  }
  .product-detail__main img { width: 100%; height: 100%; object-fit: cover; }
  .product-detail__thumbs {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem;
    margin-top: .6rem;
  }
  .product-detail__thumb {
    display: block; overflow: hidden; border-radius: .6rem;
    aspect-ratio: 1; border: 1px solid var(--border);
  }
  .product-detail__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .product-detail__placeholder {
    display: grid; place-items: center; aspect-ratio: 4 / 3;
    border-radius: var(--radius, 1rem); background: var(--surface-alt);
    color: var(--muted);
  }
  .product-detail__placeholder svg { width: 4rem; height: 4rem; opacity: .4; }

  .product-detail__cat {
    text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
    font-weight: 600; color: var(--brand); margin: 0 0 .35rem;
  }
  .product-detail__name { margin: 0 0 .75rem; }
  .product-detail__price {
    font-family: var(--font-head, var(--font-serif));
    font-size: 1.8rem; font-weight: 700; color: var(--heading);
    margin: .5rem 0 1rem;
  }
  .product-detail__price .card__price-was { font-size: 1.1rem; }
  .product-detail__lead { font-weight: 600; margin: 0 0 1rem; }
  .product-detail__desc { color: var(--text); line-height: 1.7; }
  .product-detail__cta {
    display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem;
  }
}