/* ==========================================================================
   NOZILI DESIGN SYSTEM
   style.css — foundation + standard components
   ==========================================================================
   Layout of this file:
     0. Font faces (local @font-face)
     1. Design tokens (CSS custom properties)
     2. Reset & base
     3. Typography
     4. Layout helpers (container, stack, cluster, grid)
     5. Components
        5.1  Buttons
        5.2  Forms
        5.3  Cards
        5.4  Badges & Tags
        5.5  Alerts
        5.6  Navigation & Breadcrumbs
        5.7  Tabs
        5.8  Accordion
        5.9  Tables
        5.10 Pagination
        5.11 Modal / Dialog
        5.12 Tooltip
        5.13 Avatar
        5.14 Progress & Loader
        5.15 Divider
        5.16 Opening hours
        5.17 Hero
        5.18 Tile grid
        5.19 Image banner
        5.20 Subnav (page-level category tabs)
        5.21 Product mosaic
        5.22 Link arrow (shared CTA primitive)
        5.23 Feature grid
        5.24 Filter bar + filter modal
        5.25 Logo strip
        5.26 Instagram strip
        5.27 Split row
        5.28 USP grid
        5.29 Site footer
        5.32 Surface (.section--dark)
        5.33 Timeline
        5.34 Legal page
     6. Stylesheet page (showcase layout)
     7. Pages
        7.1 Product page
        7.2 Category page
   ========================================================================== */

/* ==========================================================================
   0. FONT FACES
   --------------------------------------------------------------------------
   Sukhumvit Set — single Bold weight, mapped across full weight range so
   every weight token renders the actual Bold file (no faux-bolding).
   Used for headings & buttons.

   Tasman — Light / LightItalic / Regular. Light is the default body weight.
   ========================================================================== */
@font-face {
    font-family: 'Sukhumvit Set';
    src: url('fonts/SukhumvitSet-Bold.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tasman';
    src: url('fonts/Tasman-Light.woff') format('woff'),
         url('fonts/Tasman-Light.ttf')  format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Tasman';
    src: url('fonts/Tasman-LightItalic.woff') format('woff'),
         url('fonts/Tasman-LightItalic.ttf')  format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Tasman';
    src: url('fonts/Tasman-Regular.woff') format('woff'),
         url('fonts/Tasman-Regular.ttf')  format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
    /* ----- Color: Nozili brand foundation ----- */
    --color-bg:           #F1EBDE;   /* primary background — warm cream */
    --color-bg-alt:       #544800;   /* alternate dark background — deep olive */
    --color-surface:      #FFFFFF;   /* cards, inputs */
    --color-surface-alt:  #E8DFC8;   /* subtle panels on cream */
    --color-border:       #D9CFB6;
    --color-border-strong:#B8AB87;

    --color-text:         #544800;   /* primary text — brand dark */
    --color-text-muted:   #7A6E3A;   /* secondary text */
    --color-text-subtle:  #A8997A;   /* tertiary / placeholders */
    --color-text-invert:  #F1EBDE;   /* text on dark brand bg */
    --color-on-image:     #FFFFFF;   /* text/logo over photography (transparent navbar) */
    --color-border-on-image: rgba(255, 255, 255, 0.12);  /* hairline borders op donkere/foto bg */

    /* ----- Color: Nozili accent (brand green) ----- */
    --color-accent:       #739248;
    --color-accent-hover: #5C7A38;
    --color-accent-soft:  #DCE5C9;
    --color-accent-text:  #FFFFFF;

    /* ----- Color: semantic ----- */
    --color-info:         #4A6B8A;
    --color-info-soft:    #E2EAF2;
    --color-success:      #4F7A5A;
    --color-success-soft: #DEEAE0;
    --color-warning:      #B8862A;
    --color-warning-soft: #F4E8C9;
    --color-danger:       #A8463C;
    --color-danger-soft:  #F1DAD6;

    /* ----- Typography -----
       Display (Sukhumvit Set): headings + buttons. One Bold file, mapped across
       all weights via @font-face range — so any weight token renders the file.
       Body (Tasman): serif text — Light is the default, Regular for emphasis. */
    --font-display: 'Sukhumvit Set', 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif;
    --font-body:    'Tasman', Georgia, 'Times New Roman', Cambria, serif;
    --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

    /* Type scale (1.250 — major third) */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.875rem;   /* 14 */
    --text-base: 1rem;       /* 16 */
    --text-md:   1.125rem;   /* 18 */
    --text-lg:   1.25rem;    /* 20 */
    --text-xl:   1.5rem;     /* 24 */
    --text-2xl:  1.875rem;   /* 30 */
    --text-3xl:  2.5rem;     /* 40 */
    --text-4xl:  3.25rem;    /* 52 */
    --text-5xl:  4rem;       /* 64 */

    --leading-display: 1.05;  /* display-1/2 + hero titles — tighter for impact */
    --leading-tight:   1.15;
    --leading-snug:    1.3;
    --leading-base:    1.55;
    --leading-loose:   1.75;

    /* Body has 300 (Light) + 400 (Regular) only. Display (Sukhumvit) is always
       rendered as Bold regardless of declared weight. */
    --weight-regular: 300;  /* Tasman Light — default body */
    --weight-medium:  400;  /* Tasman Regular — emphasis */
    --weight-semi:    400;  /* same — no heavier body weight available */
    --weight-bold:    700;  /* Sukhumvit (display only) */

    /* Letter spacing */
    --tracking-tight:  -0.02em;
    --tracking-normal:  0;
    --tracking-wide:    0.04em;
    --tracking-caps:    0.12em;

    /* ----- Spacing scale (4px base) ----- */
    --space-0:  0;
    --space-1:  0.25rem;     /* 4  */
    --space-2:  0.5rem;      /* 8  */
    --space-3:  0.75rem;     /* 12 */
    --space-4:  1rem;        /* 16 */
    --space-5:  1.5rem;      /* 24 */
    --space-6:  2rem;        /* 32 */
    --space-7:  3rem;        /* 48 */
    --space-8:  4rem;        /* 64 */
    --space-9:  6rem;        /* 96 */

    /* ----- Radius ----- */
    --radius-xs:   2px;
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   22px;
    --radius-full: 9999px;

    /* ----- Image overlays -----
       Used to keep light copy legible on top of photography.
       The "soft" and "dark" variants are warm-olive — derived from the same
       olive base as the shadows. "Light" is a neutral grey wash — used by
       the hero via [data-overlay="light"]. */
    --color-overlay-soft:  rgba(84, 72, 0, 0.18);
    --color-overlay-dark:  rgba(84, 72, 0, 0.60);
    --color-overlay-light: rgba(0,  0,  0, 0.15);

    /* ----- Shadows (warm olive, soft) ----- */
    --shadow-xs: 0 1px 2px rgba(84, 72, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(84, 72, 0, 0.06), 0 1px 2px rgba(84, 72, 0, 0.05);
    --shadow-md: 0 6px 14px rgba(84, 72, 0, 0.08), 0 2px 4px rgba(84, 72, 0, 0.05);
    --shadow-lg: 0 14px 32px rgba(84, 72, 0, 0.10), 0 4px 8px rgba(84, 72, 0, 0.05);
    --shadow-xl: 0 28px 60px rgba(84, 72, 0, 0.14), 0 8px 16px rgba(84, 72, 0, 0.07);

    /* ----- Motion ----- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --duration-fast:   120ms;
    --duration-base:   200ms;
    --duration-slow:   320ms;

    /* ----- Layout ----- */
    --container-sm: 640px;
    --container-md: 880px;
    --container-lg: 1120px;
    --container-xl: 1320px;
    --header-h:    72px;     /* site-header height (desktop) — transparent navbar pulls hero up by this. Overridden op mobile (zie @media in 5.6). */

    /* ----- Image ratios -----
       Eén bron-van-waarheid voor alle product- en categorie-images.
       Gebruik var(--ratio-portrait) op .tile, .card__media,
       .product-page__gallery-item en .product-page__related-image. */
    --ratio-portrait: 2 / 3;

    /* ----- Focus ring ----- */
    --focus-ring: 0 0 0 3px rgba(115, 146, 72, 0.35);
}

/* ==========================================================================
   2. RESET & BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

strong, b { font-weight: var(--weight-medium); }

img, svg, video { max-width: 100%; display: block; }

button, input, select, textarea {
    font: inherit;
    color: inherit;
}

a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--color-accent-hover); }

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

::selection { background: var(--color-accent-soft); color: var(--color-text); }

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */
.display-1, .display-2, h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-regular);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0 0 var(--space-4);
}

.display-1 { font-size: var(--text-5xl); line-height: var(--leading-display); }
.display-2 { font-size: var(--text-4xl); line-height: var(--leading-display); }

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); letter-spacing: 0; }
h5 { font-size: var(--text-md); letter-spacing: 0; }
h6 {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}

p { margin: 0 0 var(--space-4); }

.lead {
    font-size: var(--text-md);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
}

.small, small { font-size: var(--text-sm); }
.muted { color: var(--color-text-muted); }
.subtle { color: var(--color-text-subtle); }

.eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

blockquote {
    margin: 0 0 var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text);
}
blockquote cite {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-style: normal;
    color: var(--color-text-muted);
}

ul, ol { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
li + li { margin-top: var(--space-1); }

code, kbd, samp {
    font-family: var(--font-mono);
    font-size: 0.92em;
    background: var(--color-surface-alt);
    padding: 0.12em 0.4em;
    border-radius: var(--radius-xs);
}
kbd {
    border: 1px solid var(--color-border);
    box-shadow: 0 1px 0 var(--color-border-strong);
}

pre {
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--color-text);
    color: var(--color-text-invert);
    border-radius: var(--radius-md);
    overflow-x: auto;
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}
pre code { background: transparent; padding: 0; color: inherit; }

hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-6) 0;
}

/* ==========================================================================
   4. LAYOUT HELPERS
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.stack > * + * { margin-top: var(--space-4); }
.stack-sm > * + * { margin-top: var(--space-2); }
.stack-lg > * + * { margin-top: var(--space-6); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

.grid-2 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grid-4 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.1 BUTTONS
   -------------------------------------------------------------------------- */
.btn {
    --btn-bg: var(--color-accent);
    --btn-bg-hover: var(--color-accent-hover);
    --btn-color: var(--color-accent-text);
    --btn-border: transparent;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.7rem 1.25rem;
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: var(--weight-bold);
    line-height: 1;
    letter-spacing: 0.02em;
    color: var(--btn-color);
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    transition:
        background var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        transform var(--duration-fast) var(--ease-out);
    user-select: none;
    white-space: nowrap;
}
.btn:hover {
    background: var(--btn-bg-hover);
    color: var(--btn-color);          /* lock — anders pakt <a>:hover de accent-hover kleur */
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn--secondary {
    --btn-bg: var(--color-surface);
    --btn-bg-hover: var(--color-text);          /* invert op hover: bg wordt olijf */
    --btn-color: var(--color-text);
    --btn-border: var(--color-border-strong);
}
/* Hover-invert voor secondary: tekst wordt --btn-bg (wit), border matcht
   de nieuwe bg zodat 'ie niet als beige randje over olijf valt. */
.btn--secondary:hover {
    color: var(--btn-bg);
    border-color: var(--color-text);
}
.btn--ghost {
    --btn-bg: transparent;
    --btn-bg-hover: var(--color-surface-alt);
    --btn-color: var(--color-text);
    --btn-border: transparent;
}
.btn--danger {
    --btn-bg: var(--color-danger);
    --btn-bg-hover: #8E3A32;
    --btn-color: #fff;
}
.btn--link {
    --btn-bg: transparent;
    --btn-bg-hover: transparent;
    --btn-color: var(--color-accent);
    --btn-border: transparent;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
}
.btn--link:hover { color: var(--color-accent-hover); }

.btn--sm { padding: 0.5rem 0.9rem; font-size: var(--text-xs); }
.btn--lg { padding: 0.95rem 1.6rem; font-size: var(--text-base); }
.btn--block { width: 100%; }
.btn--icon { padding: 0.6rem; aspect-ratio: 1; }

.btn-group {
    display: inline-flex;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
}
.btn-group .btn {
    border-radius: 0;
    border-right-width: 0;
}
.btn-group .btn:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.btn-group .btn:last-child  { border-radius: 0 var(--radius-md) var(--radius-md) 0; border-right-width: 1px; }

/* --------------------------------------------------------------------------
   5.2 FORMS
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field + .field { margin-top: var(--space-4); }

.label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.label .required { color: var(--color-danger); margin-left: 2px; }

.help-text { font-size: var(--text-xs); color: var(--color-text-muted); }
.error-text { font-size: var(--text-xs); color: var(--color-danger); }

.input, .textarea, .select {
    width: 100%;
    padding: 0.7rem 0.9rem;
    font-size: var(--text-sm);
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-subtle); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-text-muted); }
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    cursor: not-allowed;
}
.input.is-error, .textarea.is-error, .select.is-error {
    border-color: var(--color-danger);
}
.input.is-error:focus, .textarea.is-error:focus {
    box-shadow: 0 0 0 3px rgba(168, 70, 60, 0.2);
}

.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-base); }

.select {
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%236B6658' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.9rem center;
    padding-right: 2.5rem;
}

.input-group {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input-group:focus-within {
    border-color: var(--color-accent);
    box-shadow: var(--focus-ring);
}
.input-group .input {
    border: none;
    border-radius: 0;
    background: transparent;
}
.input-group .input:focus { box-shadow: none; }
.input-group__addon {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-right: 1px solid var(--color-border);
}
.input-group__addon:last-child { border-right: none; border-left: 1px solid var(--color-border); }

/* Checkbox / Radio */
.choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    font-size: var(--text-sm);
    user-select: none;
}
.choice input[type="checkbox"],
.choice input[type="radio"] {
    appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    background: var(--color-surface);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    display: inline-grid;
    place-content: center;
    cursor: pointer;
    transition: background var(--duration-fast), border-color var(--duration-fast);
}
.choice input[type="radio"] { border-radius: var(--radius-full); }
.choice input:hover { border-color: var(--color-text-muted); }
.choice input:checked {
    background: var(--color-accent);
    border-color: var(--color-accent);
}
.choice input[type="checkbox"]:checked::after {
    content: "";
    width: 10px; height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}
.choice input[type="radio"]:checked::after {
    content: "";
    width: 8px; height: 8px;
    background: #fff;
    border-radius: var(--radius-full);
}
.choice input:focus-visible { box-shadow: var(--focus-ring); }

/* Switch */
.switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
    font-size: var(--text-sm);
    user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
    width: 40px; height: 22px;
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--duration-base) var(--ease-out);
}
.switch__track::after {
    content: "";
    position: absolute;
    top: 2px; left: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-out);
}
.switch input:checked + .switch__track { background: var(--color-accent); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   5.3 CARDS
   -------------------------------------------------------------------------- */
.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--duration-base) var(--ease-out), transform var(--duration-base) var(--ease-out);
}
.card--hover:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card__media {
    margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
    aspect-ratio: var(--ratio-portrait);
    background: var(--color-surface-alt);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__title { margin-bottom: var(--space-1); font-size: var(--text-lg); }
.card__meta { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: var(--space-2); }
.card__body { color: var(--color-text-muted); font-size: var(--text-sm); }
.card__footer {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    display: flex; justify-content: space-between; align-items: center;
}

/* --------------------------------------------------------------------------
   5.4 BADGES & TAGS
   -------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2rem 0.55rem;
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    letter-spacing: 0.02em;
    color: var(--color-text);
    background: var(--color-surface-alt);
    border-radius: var(--radius-full);
    line-height: 1.4;
}
.badge--accent  { background: var(--color-accent-soft);  color: var(--color-accent-hover); }
.badge--info    { background: var(--color-info-soft);    color: var(--color-info); }
.badge--success { background: var(--color-success-soft); color: var(--color-success); }
.badge--warning { background: var(--color-warning-soft); color: var(--color-warning); }
.badge--danger  { background: var(--color-danger-soft);  color: var(--color-danger); }
.badge--solid   { background: var(--color-text); color: var(--color-text-invert); }
.badge--dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: var(--radius-full);
    background: currentColor;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: 0.3rem 0.7rem;
    font-size: var(--text-xs);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
}
.tag__close {
    border: 0; background: transparent; cursor: pointer;
    color: var(--color-text-muted);
    padding: 0; line-height: 1;
}
.tag__close:hover { color: var(--color-text); }

/* --------------------------------------------------------------------------
   5.5 ALERTS
   -------------------------------------------------------------------------- */
.alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-text-muted);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--text-sm);
}
.alert__icon { flex: 0 0 auto; font-weight: var(--weight-bold); }
.alert__title { font-weight: var(--weight-semi); margin-bottom: var(--space-1); }
.alert__body { color: var(--color-text-muted); }

.alert--info    { background: var(--color-info-soft);    border-left-color: var(--color-info); }
.alert--success { background: var(--color-success-soft); border-left-color: var(--color-success); }
.alert--warning { background: var(--color-warning-soft); border-left-color: var(--color-warning); }
.alert--danger  { background: var(--color-danger-soft);  border-left-color: var(--color-danger); }

/* --------------------------------------------------------------------------
   5.6 NAVIGATION & BREADCRUMBS

   .navbar — sticky site-header met twee thema-varianten:
     data-theme="solid"       → crème achtergrond, olijf tekst (default)
     data-theme="transparent" → geen achtergrond, witte tekst/logo (over hero-foto)

   Scroll-state: .is-scrolled forceert de solid look (zelfde crème bg). De
   solid bg loopt via .navbar::before (absolute + opacity) zodat alleen opacity
   geanimeerd wordt — geen layout-shift bij scroll.

   Mobile override: data-theme-mobile="solid|transparent" overschrijft
   data-theme onder 768px (Shopify-pattern voor desktop/mobile split).
   -------------------------------------------------------------------------- */
.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    color: var(--color-text);
    transition: color var(--duration-base) var(--ease-out);
}
.navbar::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--color-bg);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    pointer-events: none;
    z-index: -1;
}
.navbar__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-4) var(--space-5);
    max-width: var(--container-xl);
    margin: 0 auto;
    position: relative;
}
.navbar__brand {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: inherit;
    text-decoration: none;
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    transition: color var(--duration-base) var(--ease-out);
}
.navbar__menu {
    display: flex;
    gap: var(--space-5);
    list-style: none;
    margin: 0; padding: 0;
}
/* Reset globale `li + li { margin-top }`: in een horizontale flex-row vertaalt
   die margin zich via align-items:stretch naar 4px lagere baseline op items 2+. */
.navbar__menu li,
.navbar__mobile-menu-list li { margin: 0; }
.navbar__menu a {
    position: relative;
    color: inherit;
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    padding: var(--space-2) 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.navbar__menu a:hover { opacity: 0.7; }
/* Active underline als absolute pseudo: blijft buiten de line-box → geen
   layout-shift t.o.v. niet-actieve items (text-decoration: underline rekt
   de line-box wel uit, vandaar deze aanpak). */
.navbar__menu a::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    bottom: 2px;
    height: 1.5px;
    background: currentColor;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.navbar__menu a.is-active::after { opacity: 1; }
.navbar__actions {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    justify-self: end;
}

/* ----- Icon-buttons (cart, hamburger) ----- */
.navbar__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
}
.navbar__icon-btn:hover { opacity: 0.7; }
.navbar__icon-btn svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
}

/* Hamburger: desktop hidden, mobile visible. 3 spans → kruis bij is-menu-open. */
.navbar__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
}
.navbar__hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition:
        transform var(--duration-base) var(--ease-out),
        opacity var(--duration-base) var(--ease-out);
}
.navbar.is-menu-open .navbar__hamburger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.navbar.is-menu-open .navbar__hamburger span:nth-child(2) { opacity: 0; }
.navbar.is-menu-open .navbar__hamburger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Mobile-menu overlay: slide-in van links, full-screen.
   padding-top houdt rekening met de header-hoogte (--header-h) zodat de eerste
   link direct onder de header begint. Bij is-open: visibility + transform. */
.navbar__mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--space-3)) var(--space-5) var(--space-5);
    transform: translateX(-100%);
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0s linear var(--duration-slow);
    visibility: hidden;
}
.navbar__mobile-menu.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0s linear 0s;
}
.navbar__mobile-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.navbar__mobile-menu-list a {
    display: block;
    padding: var(--space-5) 0;
    color: inherit;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    letter-spacing: var(--tracking-tight);
    border-bottom: 1px solid var(--color-border);
}
.navbar__mobile-menu-list a:hover { opacity: 0.7; }
.navbar__mobile-menu-cta {
    margin-top: auto;
    padding-top: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.navbar__mobile-menu-cta .btn { width: 100%; }

/* ----- Variant: solid (default) — crème bg, olijf tekst ----- */
.navbar[data-theme="solid"]            { color: var(--color-text); }
.navbar[data-theme="solid"]::before    { opacity: 1; }

/* ----- Variant: transparent — witte tekst over foto -----
   Negative margin trekt de volgende sibling (hero) omhoog met --header-h,
   zodat de hero op y=0 begint en de transparante navbar er als overlay
   overheen ligt (sticky blijft sticky → geen position-swap = geen jank). */
.navbar[data-theme="transparent"]         { color: var(--color-on-image); margin-bottom: calc(-1 * var(--header-h)); }
.navbar[data-theme="transparent"]::before { opacity: 0; }

/* ----- Scroll-state: forceer solid look ongeacht thema ----- */
.navbar.is-scrolled         { color: var(--color-text); }
.navbar.is-scrolled::before { opacity: 1; }

/* ----- Menu-open state: navbar leesbaar boven crème overlay ----- */
.navbar.is-menu-open         { color: var(--color-text); }
.navbar.is-menu-open::before { opacity: 1; }

/* ----- Ghost-button leesbaar op transparent navbar -----
   Ghost heeft default donkere tekst (--color-text), onleesbaar op foto. Bij
   solid/is-scrolled/is-menu-open zit de navbar weer op crème → daar is de
   default ghost-kleur prima. Daarom alleen overriden in de "transparent en
   echt zichtbaar als zodanig" state. */
.navbar[data-theme="transparent"]:not(.is-scrolled):not(.is-menu-open) .btn--ghost {
    --btn-color: var(--color-on-image);
}

/* ----- Mobile override (data-theme-mobile) + mobile layout -----
   Onder 768px wint data-theme-mobile (behalve in scroll-state), én de navbar
   herorganiseert zich naar [hamburger | logo | cart]. Desktop nav, Inloggen
   en Mijn Account schuiven naar het mobile-menu overlay. --header-h wordt
   teruggedraaid naar 64 — op mobile is werkelijke navbar 40px icon + 2×12px
   padding = 64px (vs desktop 72px met space-4 padding). */
@media (max-width: 767px) {
    :root { --header-h: 64px; }

    .navbar[data-theme-mobile="solid"]:not(.is-scrolled)         { color: var(--color-text); }
    .navbar[data-theme-mobile="solid"]:not(.is-scrolled)::before { opacity: 1; }

    .navbar[data-theme-mobile="transparent"]:not(.is-scrolled)         { color: var(--color-on-image); }
    .navbar[data-theme-mobile="transparent"]:not(.is-scrolled)::before { opacity: 0; }
    .navbar[data-theme-mobile="transparent"]                           { margin-bottom: calc(-1 * var(--header-h)); }

    /* Tri-column grid: hamburger | logo | cart. 12px verticale padding →
       40px icon + 24px = 64px → blijft gelijk aan --header-h. */
    .navbar__inner {
        display: grid;
        grid-template-columns: 40px 1fr 40px;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-4);
    }
    .navbar__hamburger        { display: flex; justify-self: start; }
    .navbar__brand            { justify-self: center; }
    .navbar__menu             { display: none; }
    .navbar__actions          { justify-self: end; gap: 0; }
    .navbar__actions .btn     { display: none; }
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0; padding: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.breadcrumbs li { margin: 0; }
.breadcrumbs li + li::before {
    content: "/";
    margin-right: var(--space-2);
    color: var(--color-text-subtle);
}
.breadcrumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
}
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--weight-medium); }

/* --------------------------------------------------------------------------
   5.7 TABS
   -------------------------------------------------------------------------- */
.tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--color-border);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}
.tabs__item {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    border: 0; background: transparent;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.tabs__item:hover { color: var(--color-text); }
.tabs__item.is-active {
    color: var(--color-text);
    border-bottom-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   5.8 ACCORDION
   -------------------------------------------------------------------------- */
/* .accordion: geen top-border, en het laatste item heeft ook geen border-bottom.
   Items zorgen zelf voor de scheiding via border-bottom; het laatste item sluit
   dus zonder lijn af zodat de accordion niet dubbel-onderstreept wordt wanneer
   er een ander geblokkeerd component (bv. .product-page__related met eigen
   border-top) op volgt. */
.accordion__item { border-bottom: 1px solid var(--color-border); }
.accordion__item:last-child { border-bottom: 0; }
.accordion__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-size: var(--text-md);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.accordion__trigger::after {
    content: "+";
    display: inline-block;
    font-size: var(--text-xl);
    font-weight: var(--weight-regular);
    color: var(--color-text-muted);
    transition: transform var(--duration-base) var(--ease-out);
}
.accordion__item[open] .accordion__trigger::after { transform: rotate(45deg); }
.accordion__panel {
    padding: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}
@starting-style {
    .accordion__item[open] .accordion__panel {
        opacity: 0;
        transform: translateY(-4px);
    }
}

/* --------------------------------------------------------------------------
   5.9 TABLES
   -------------------------------------------------------------------------- */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
    background: var(--color-surface);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.table th, .table td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}
.table th {
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: var(--color-surface-alt);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--color-surface-alt); }

/* --------------------------------------------------------------------------
   5.10 PAGINATION
   -------------------------------------------------------------------------- */
.pagination {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0; padding: 0;
}
.pagination a, .pagination button {
    display: inline-flex;
    align-items: center; justify-content: center;
    min-width: 36px; height: 36px;
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
}
.pagination a:hover { background: var(--color-surface-alt); }
.pagination .is-active {
    background: var(--color-text);
    color: var(--color-text-invert);
}
/* Hover op active item — brand-groen ipv het cream-on-cream conflict dat
   .pagination a:hover anders zou veroorzaken (zelfde-of-hogere specificity
   door :hover) en wat de tekst onleesbaar zou maken. */
.pagination .is-active:hover {
    background: var(--color-accent);
    color: var(--color-accent-text);
}
.pagination .is-disabled { color: var(--color-text-subtle); pointer-events: none; }

/* --------------------------------------------------------------------------
   5.11 MODAL / DIALOG
   -------------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(40, 34, 0, 0.55);
    display: grid;
    place-items: center;
    padding: var(--space-5);
    z-index: 50;
}
.modal {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 480px;
    padding: var(--space-6);
    box-shadow: var(--shadow-xl);
}
.modal__title { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.modal__body { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
}

/* Static modal demo (no backdrop, inline showcase) */
.modal--static {
    margin: 0;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   5.12 TOOLTIP
   -------------------------------------------------------------------------- */
.tooltip-wrap {
    position: relative;
    display: inline-block;
}
.tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-3);
    background: var(--color-text);
    color: var(--color-text-invert);
    font-size: var(--text-xs);
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}
.tooltip::after {
    content: "";
    position: absolute;
    top: 100%; left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--color-text);
}

/* --------------------------------------------------------------------------
   5.13 AVATAR
   -------------------------------------------------------------------------- */
.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-weight: var(--weight-semi);
    font-size: var(--text-sm);
    overflow: hidden;
    flex: 0 0 auto;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 28px; height: 28px; font-size: var(--text-xs); }
.avatar--lg { width: 56px; height: 56px; font-size: var(--text-md); }
.avatar--xl { width: 80px; height: 80px; font-size: var(--text-lg); }

.avatar-group { display: inline-flex; }
.avatar-group .avatar {
    border: 2px solid var(--color-bg);
    margin-left: -10px;
}
.avatar-group .avatar:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   5.14 PROGRESS & LOADER
   -------------------------------------------------------------------------- */
.progress {
    width: 100%;
    height: 8px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-full);
    overflow: hidden;
}
.progress__bar {
    height: 100%;
    background: var(--color-accent);
    border-radius: inherit;
    transition: width var(--duration-slow) var(--ease-out);
}

.spinner {
    width: 24px; height: 24px;
    border: 2.5px solid var(--color-border);
    border-top-color: var(--color-accent);
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-surface-alt) 0%,
        #EBE7DD 50%,
        var(--color-surface-alt) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton--text { height: 0.8em; }
.skeleton--title { height: 1.4em; width: 60%; }
.skeleton--block { height: 120px; }
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --------------------------------------------------------------------------
   5.15 DIVIDER
   -------------------------------------------------------------------------- */
.divider {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}
.divider--labeled {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    margin: var(--space-6) 0;
}
.divider--labeled::before,
.divider--labeled::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border);
}

/* --------------------------------------------------------------------------
   5.16 OPENING HOURS
   --------------------------------------------------------------------------
   Two-column day/time list. The .hours__row uses `display: contents` so the
   spans become direct grid items — keeps the times right-aligned regardless
   of day-name length. Mark today's row with .is-today.
   -------------------------------------------------------------------------- */
.hours {
    font-size: var(--text-sm);
    color: var(--color-text);
}
.hours__title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text);
}
.hours__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-1);
}
.hours__list > li + li { margin-top: 0; }
.hours__row { display: contents; }
.hours__day,
.hours__time {
    color: var(--color-text-muted);
    line-height: var(--leading-snug);
}
.hours__time {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.hours__row.is-today .hours__day,
.hours__row.is-today .hours__time {
    color: var(--color-text);
    font-weight: var(--weight-medium);
}
.hours__note {
    margin: var(--space-3) 0 0;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

.hours--card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}

/* --------------------------------------------------------------------------
   5.17 HERO
   --------------------------------------------------------------------------
   Full-bleed homepage hero. Layered structure (within isolation context):
     .hero__media  z:-2  → background <img>, object-fit: cover (LCP + SEO)
     .hero::after  z:-1  → optional tint overlay, only rendered when
                           [data-overlay] is present on .hero (see below)
     .hero__inner  z:auto → copy column, pushed to bottom via margin-top:auto

   Title sits in display territory: clamp from --text-3xl (h1) → --text-5xl
   (display-1) so the heading is always hero-sized, never body-heading sized.
   max-width is on the title itself (ch resolves against the title's font-size)
   so the line-length stays typographic regardless of viewport.

   Overlay toggle — add data-overlay to .hero to layer a tint over the photo:
     <no attribute>          → no overlay (image as-is)
     data-overlay="light"    → neutral light-grey wash (--color-overlay-light)
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 100vh;                /* fallback */
    min-height: 100svh;               /* avoids iOS Safari address-bar jump */
    background: var(--color-text);    /* olive fallback if image fails */
    color: var(--color-on-image);
    overflow: hidden;
    isolation: isolate;
}
.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay layer — only exists when [data-overlay] is set, so the default
   hero stays a single-layer photo. Variant rule below picks the tint. */
.hero[data-overlay]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.hero[data-overlay="light"]::after {
    background: var(--color-overlay-light);
}
.hero__inner {
    position: relative;
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5);
    display: flex;
    flex-direction: column;
    min-height: inherit;
}
.hero__copy {
    margin-top: auto;
}
.hero__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-on-image);
    margin: 0 0 var(--space-5);
    max-width: 20ch;
    text-wrap: balance;
}
/* Hero CTA visual styling lives in 5.22 .link-arrow (shared CTA primitive).
   Markup: <a class="link-arrow">…</a> — geen .hero__cta class meer nodig. */

@media (max-width: 720px) {
    .hero {
        min-height: 80svh;
    }
    .hero__inner {
        padding: var(--space-7) var(--space-5);
    }
    .hero__title {
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   5.18 TILE GRID
   --------------------------------------------------------------------------
   Section component: heading + 3-tile strip of image cards.
   Used for category sliders ("Voor elk moment iets bijzonders": Trouwen,
   Rouwen, Zakelijk). Desktop = 3-column grid; mobile = horizontal scroll
   with scroll-snap (the "slider" UX).

   Each .tile is a full-card <a>: whole tile is clickable, single tab-stop,
   no ::after-link trick. Background image is set via the --tile-image CSS
   custom property — default falls back to the grey placeholder so the layout
   reads even before real photography is hooked up. Per-tile override:
     <a class="tile" style="--tile-image: url('img/categories/trouwen.webp')">

   No rounded corners by design — sharp edges are part of the visual
   language for this section. CTA = .link-arrow (5.22) — onderstreepte
   link met pijl-SVG, gedeeld met hero, image-banner en feature-card.
   .tile__cta zorgt enkel voor positionering (absolute bottom).

   CTA-positie toggle — data-align op .tile-grid stuurt alle tile-CTA's
   tegelijk (default = bottom-left):
     <section class="tile-grid">                       → bottom-left
     <section class="tile-grid" data-align="center">   → bottom-center
     <section class="tile-grid" data-align="right">    → bottom-right
   -------------------------------------------------------------------------- */
.tile-grid {
    padding: var(--space-9) 0 var(--space-8);
    background: var(--color-bg);
}
/* Contextual exception — als logo-strip direct op tile-grid volgt, valt
   de bottom-padding van tile-grid weg. Logo-strip's eigen vertical padding
   neemt de spacing dan over (geen dubbele lucht). */
.tile-grid:has(+ .logo-strip) {
    padding-bottom: 0;
}
.tile-grid__header {
    max-width: var(--container-xl);
    margin: 0 auto var(--space-7);
    padding: 0 var(--space-5);
}
.tile-grid__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}
.tile-grid__strip {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.tile-grid__strip > li { margin: 0; }

.tile {
    display: block;
    position: relative;
    aspect-ratio: var(--ratio-portrait);
    overflow: hidden;
    border-radius: 0;                 /* explicit — sharp corners by design */
    background-color: var(--color-surface-alt);
    background-image: var(--tile-image, url('img/blankimage_430x.webp'));
    background-size: cover;
    background-position: center;
    color: var(--color-on-image);
    text-decoration: none;
    isolation: isolate;
}
.tile:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: 0;                 /* override global :focus-visible radius */
}

/* Content variant — solid olive bg, h2 bottom-anchored, géén image en géén
   CTA. Voor "intro-tile" patronen waar tile 1 in de grid als label voor
   tiles 2/3 fungeert (i.p.v. een aparte .tile-grid__header erboven).
   Niet klikbaar — markup is <div class="tile tile--content">. */
.tile--content {
    background-image: none;
    background-color: var(--color-text);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: var(--space-6);
}
.tile__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-2xl);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-on-image);
    margin: 0;
    text-wrap: balance;
}

/* .tile__cta zorgt nu alléén voor positionering binnen de tile.
   Visuele styling (font, underline, gap, hover, svg-sizing) komt uit
   .link-arrow (5.22). Hover-trigger op .tile:hover staat ook daar.
   Markup: <span class="tile__cta link-arrow">…</span> */
.tile__cta {
    position: absolute;
    left:   var(--space-5);
    bottom: var(--space-5);
}

/* CTA alignment — data-align op .tile-grid stuurt waar de CTA hangt binnen
   ELKE tile in die grid. Default (geen attribuut) = bottom-left.
     data-align="center" → CTA gecentreerd onderin, gap-grow spreidt symmetrisch
     data-align="right"  → CTA in de bottom-right hoek, gap-grow vanaf rechts
   Bewust grid-level (één attribuut → alle tiles in sync). Per-tile override
   kunnen we later toevoegen als dat ooit nodig is. */
.tile-grid[data-align="center"] .tile__cta {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
}
.tile-grid[data-align="right"] .tile__cta {
    left: auto;
    right: var(--space-5);
}

/* Tablet — tighter gap so 3 tiles fit comfortably */
@media (min-width: 721px) and (max-width: 1024px) {
    .tile-grid__strip { gap: var(--space-4); }
    .tile__cta {
        left:   var(--space-4);
        bottom: var(--space-4);
    }
    .tile-grid[data-align="right"] .tile__cta {
        left: auto;
        right: var(--space-4);
    }
}

/* Mobile — horizontal scroll-snap slider */
@media (max-width: 720px) {
    .tile-grid {
        padding: var(--space-7) 0 var(--space-6);
    }
    .tile-grid__header {
        margin-bottom: var(--space-5);
    }
    .tile-grid__strip {
        display: flex;
        gap: var(--space-3);
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--space-5);
        padding: 0 var(--space-5) var(--space-4);
        -webkit-overflow-scrolling: touch;
    }
    .tile-grid__strip > li {
        flex: 0 0 85%;
        scroll-snap-align: start;
    }
    .tile__cta {
        left:   var(--space-4);
        bottom: var(--space-4);
    }
    .tile-grid[data-align="right"] .tile__cta {
        left: auto;
        right: var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   5.19 IMAGE BANNER
   --------------------------------------------------------------------------
   Full-bleed image banner — brand-voice break tussen content-secties.
   Verschilt van .hero in 3 dingen: padding-based hoogte (géén 100svh),
   centered content (géén bottom-left), en bevat een body-paragraaf onder
   de title. Verschilt van .tile-grid in dat het één enkele sectie is
   i.p.v. een grid van tiles.

   Anatomie (binnen isolation context):
     .image-banner__media   z:-2  → background <img>, object-fit: cover
     .image-banner::after   z:-1  → optionele tint, alleen bij [data-overlay]
     .image-banner__inner   z:auto → centered content blok, max --container-md

   Title scale = .tile-grid__title (clamp --text-2xl → --text-4xl) zodat
   secondary section-headings visueel met elkaar rhymen. Body in Tasman
   Regular (--weight-medium) — een tikje zwaarder dan default Light, voor
   warmere brand-toon op foto. CTA = .link-arrow (5.22) — gedeeld met
   hero, tile en feature-card.

   Overlay toggle (zelfde API als .hero):
     <no attribute>          → no overlay
     data-overlay="light"    → neutrale grijs-wash (--color-overlay-light)

   Layout variants — data-layout op .image-banner:
     <no attribute>          → centered + padding-based + container-md (default)
     data-layout="feature"   → full-width content + bottom-anchored + 100svh
                               (hero-style positionering, voor closing/spotlight
                                secties). Zie blok onderaan deze sectie.
   -------------------------------------------------------------------------- */
.image-banner {
    position: relative;
    padding: var(--space-9) 0;
    background: var(--color-text);        /* olive fallback if image fails */
    color: var(--color-on-image);
    overflow: hidden;
    isolation: isolate;
}
.image-banner__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.image-banner__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Overlay layer — alleen aanwezig wanneer [data-overlay] gezet is */
.image-banner[data-overlay]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.image-banner[data-overlay="light"]::after {
    background: var(--color-overlay-light);
}

.image-banner__inner {
    position: relative;
    max-width: var(--container-md);
    margin: 0 auto;
    padding: 0 var(--space-5);
    text-align: center;
}
.image-banner__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-on-image);
    margin: 0 0 var(--space-5);
    text-wrap: balance;
}
.image-banner__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);    /* Tasman Regular — warmer dan Light */
    font-size: clamp(var(--text-base), 1.4vw, var(--text-md));
    line-height: var(--leading-base);
    color: var(--color-on-image);
    margin: 0 auto var(--space-6);
    max-width: 56ch;                      /* readable line-length */
    text-wrap: balance;
    opacity: 0.92;                        /* subtle softening — hierarchy onder title */
}
/* Image-banner CTA visual styling lives in 5.22 .link-arrow (shared
   CTA primitive). Markup: <a class="link-arrow">…</a> — geen
   .image-banner__cta class meer nodig. */

/* ----- Feature variant ---------------------------------------------------
   data-layout="feature" — content blok full-width + bottom-anchored, hero-
   like 100svh hoogte. Voor closing-CTA / spotlight secties onderaan een
   pagina. Default centered variant blijft volledig ongewijzigd.

   <section class="image-banner" data-layout="feature">
       <div class="image-banner__inner">
           <h2 class="image-banner__title">…</h2>
           <a class="link-arrow">…</a>
       </div>
   </section>

   Verschillen met default:
     - Section is flex column met min-height 100svh i.p.v. padding-based
     - Inner is full-width (max-width:none) en margin-top:auto naar bottom
     - Title scale matched .hero__title (clamp --text-3xl → --text-5xl)
     - Tekst-align left
     - Géén __media-tag op de live instance = solid olive fallback
       (zoals het screenshot). Wel media inserten kan: dezelfde markup
       als default image-banner.
   ------------------------------------------------------------------------- */
.image-banner[data-layout="feature"] {
    min-height: 100vh;                /* fallback */
    min-height: 100svh;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.image-banner[data-layout="feature"] .image-banner__inner {
    max-width: var(--container-xl);   /* container-bound, niet edge-to-edge */
    width: 100%;
    margin: auto auto 0;              /* top:auto pusht naar bottom, horizontal center */
    padding: var(--space-8) var(--space-5);
    text-align: left;
}
.image-banner[data-layout="feature"] .image-banner__title {
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    max-width: none;
}
.image-banner[data-layout="feature"] .image-banner__body {
    margin-left: 0;
    margin-right: 0;
    max-width: 40ch;
}

@media (max-width: 720px) {
    .image-banner {
        padding: var(--space-8) 0;
    }
    .image-banner[data-layout="feature"] {
        min-height: 80svh;
    }
    .image-banner[data-layout="feature"] .image-banner__inner {
        padding: var(--space-7) var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   5.20 SUBNAV (page-level category tabs)
   --------------------------------------------------------------------------
   Horizontal sub-navigation gebruikt op categorie-pagina's onder de hoofd-
   navbar. Visueel familie van .tabs (dunne border-bottom, accent-onderlijn
   bij active) maar dan pagina-niveau, gecentreerd, met italic body-tekst
   in plaats van display medium — past beter bij de editoriale uitstraling
   van een category-listing.

   Bewust geen aparte container — wrap de <ul.subnav> zelf in een container
   in de markup (of laat 'm full-bleed). Border-bottom loopt mee met de
   ouder-breedte zodat 'ie aansluit op de pagina-flow.
   -------------------------------------------------------------------------- */
.subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-5) var(--space-6);
    list-style: none;
    margin: 0;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}
.subnav li { margin: 0; }
.subnav a {
    color: var(--color-text-muted);
    text-decoration: none;
    font-family: var(--font-body);
    font-style: italic;
    font-weight: var(--weight-regular);
    font-size: var(--text-sm);
    padding: var(--space-2) 0;
    transition: color var(--duration-fast) var(--ease-out);
}
.subnav a:hover { color: var(--color-text); }
.subnav a.is-active {
    color: var(--color-accent);
}

@media (max-width: 720px) {
    .subnav {
        gap: var(--space-3) var(--space-4);
        padding: var(--space-3) var(--space-4);
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }
    .subnav::-webkit-scrollbar { display: none; }
    .subnav a { white-space: nowrap; }
    /* Mobile-only: active item krijgt onderlijn dicht bij text — bij
       horizontal scroll is alleen color-change te subtiel als visuele cue.
       Op desktop is de groene color genoeg om active te markeren. */
    .subnav a.is-active {
        text-decoration: underline;
        text-decoration-color: currentColor;
        text-underline-offset: 3px;
        text-decoration-thickness: 1.5px;
    }
}

/* --------------------------------------------------------------------------
   5.21 PRODUCT MOSAIC
   --------------------------------------------------------------------------
   Raster van product-cards voor categorie-overzichten. Visueel verwant aan
   .tile (image-bg via --card-image, sharp corners, color-on-image tekst)
   maar met een alternerend rij-ritme:

     Desktop: 6-col grid. Default span 2 → 3 cards per rij. Elk 4e-5e item
              in de cyclus krijgt span 3 → 2 cards per rij. Cyclus van 5
              cards = 3-rij + 2-rij. Resultaat: editorial-style afwisseling.
     Mobile:  2-col grid. Elk 3e item in cyclus van 3 krijgt span 2 (full
              width), de 1e en 2e zijn half-width. Cyclus = 2-rij + 1-rij.

   Container-width = --container-xl (zelfde als product-page), met
   side-padding en gap tussen cards — bewust géén full-bleed mosaic.
   Cards behouden --ratio-portrait, dus rijen-van-2 worden visueel hoog
   en rijen-van-3 visueel laag — daar zit het ritme.

   Tekst rechts-onder uitgelijnd: merk · naam · prijs. Subtiele
   gradient-overlay aan onderkant voor leesbaarheid op willekeurige fotos.
   -------------------------------------------------------------------------- */
.product-mosaic {
    list-style: none;
    margin: 0 auto;
    padding: 0 var(--space-5);
    max-width: var(--container-xl);
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-4);
}
/* Grid-spans zitten op de <li>: dat zijn de directe children van het
   grid, niet de <a class="product-mosaic__card"> erbinnen. Default = span 2
   van 6 kolommen → 3-col rij. Cyclus van 5: items 4-5 = span 3 → 2-col rij. */
.product-mosaic > li {
    margin: 0;
    grid-column: span 2;
}
.product-mosaic > li:nth-child(5n+4),
.product-mosaic > li:nth-child(5n+5) {
    grid-column: span 3;
}

.product-mosaic__card {
    position: relative;
    display: block;
    aspect-ratio: var(--ratio-portrait);
    overflow: hidden;
    background-color: var(--color-text);
    background-image: var(--card-image, url('img/blankimage_430x.webp'));
    background-size: cover;
    background-position: center;
    color: var(--color-on-image);
    text-decoration: none;
    isolation: isolate;
}

/* Bottom-gradient voor leestbare overlay-text op willekeurige product-fotos */
.product-mosaic__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 55%,
        rgba(0, 0, 0, 0.45) 100%
    );
    pointer-events: none;
    z-index: 0;
    transition: opacity var(--duration-base) var(--ease-out);
}
.product-mosaic__card:hover::after { opacity: 0.75; }

.product-mosaic__card:focus-visible {
    box-shadow: var(--focus-ring);
    outline: none;
    border-radius: 0;
}

.product-mosaic__info {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    text-align: right;
    z-index: 1;
    line-height: var(--leading-snug);
}
.product-mosaic__brand,
.product-mosaic__name,
.product-mosaic__price {
    display: block;
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-on-image);
}
.product-mosaic__brand {
    font-weight: var(--weight-regular);
    font-size: var(--text-sm);
}
.product-mosaic__name {
    font-weight: var(--weight-medium);
    font-size: var(--text-base);
    margin-top: 2px;
}
.product-mosaic__price {
    font-style: italic;
    font-size: var(--text-sm);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* Tablet — iets minder padding op de info-overlay */
@media (max-width: 1024px) {
    .product-mosaic__info {
        right: var(--space-4);
        bottom: var(--space-4);
    }
}

/* Mobile — 2-col grid met alternerend 2-rij (span 1 elk) + 1-rij (span 2).
   Cyclus van 3 cards: items 1-2 = half, item 3 = full. Reset desktop spans. */
@media (max-width: 720px) {
    .product-mosaic {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
        padding: 0 var(--space-4);
    }
    .product-mosaic > li,
    .product-mosaic > li:nth-child(5n+4),
    .product-mosaic > li:nth-child(5n+5) {
        grid-column: span 1;
    }
    .product-mosaic > li:nth-child(3n+3) {
        grid-column: span 2;
    }
    .product-mosaic__info {
        right: var(--space-3);
        bottom: var(--space-3);
    }
    .product-mosaic__brand,
    .product-mosaic__price {
        font-size: var(--text-xs);
    }
    .product-mosaic__name {
        font-size: var(--text-sm);
    }
}

/* --------------------------------------------------------------------------
   5.22 LINK ARROW
   --------------------------------------------------------------------------
   Shared CTA primitive — onderstreepte inline-flex link met SVG-pijl. Op
   hover/focus groeit de gap subtiel én verandert de kleur naar accent-soft.
   Gebruikt door .hero, .tile (in .tile__cta wrapper voor positionering),
   .image-banner en .feature-card.

   Kleur via inherit — elke parent context (hero/tile/banner/feature-card
   heeft color: --color-on-image gezet, dus link-arrow erft wit). Voor
   toekomstig gebruik op cream bg erft 'm automatisch de tekstkleur van
   die parent.

   Parent-hover triggers: wanneer een container (zoals .tile of .feature-card)
   als geheel klikbaar is, willen we dat hover op de hele card de link-arrow
   activeert. Lijst van parents staat in de grouped :hover/:focus-visible
   selector — voeg toe wanneer een nieuwe klikbare container dit patroon
   gebruikt.
   -------------------------------------------------------------------------- */
.link-arrow {
    --link-arrow-hover: var(--color-accent-soft);   /* default — voor on-image use (wit→pale) */
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-base);
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
    transition:
        gap var(--duration-base) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}
.link-arrow svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}
/* On cream bg moet hover juist donkerder gaan (olijf→accent-hover), niet
   lichter. Override via --link-arrow-hover voor de contexten die op cream
   leven. Bij nieuwe cream-context: voeg parent toe aan deze selector-groep. */
.split-row__content .link-arrow,
.instagram-strip__intro .link-arrow {
    --link-arrow-hover: var(--color-accent-hover);
}
.link-arrow:hover,
.link-arrow:focus-visible,
.tile:hover .link-arrow,
.tile:focus-visible .link-arrow,
.feature-card:hover .link-arrow,
.feature-card:focus-visible .link-arrow {
    color: var(--link-arrow-hover);
    gap: var(--space-3);
}

/* --------------------------------------------------------------------------
   5.23 FEATURE GRID
   --------------------------------------------------------------------------
   Editorial 3-card grid voor content-rijke feature-blokken. Verschilt van
   .tile-grid (image-tegels met overlay-CTA, mobile = slider) en van
   .product-mosaic (product-listing met prijzen, masonry-ritme).

   Anatomie:
     .feature-grid              section wrapper + padding + bg
     .feature-grid__header      optioneel — section heading boven de grid
     .feature-grid__title       uppercase display, scale = tile-grid title
     .feature-grid__strip       3-col grid → 1-col stacked mobile
     .feature-card              <a> wrapper, hele card klikbaar
     .feature-card__title       h3, uppercase display, bottom-anchored
     .feature-card__body        optioneel, Tasman Regular, max 32ch
     (.link-arrow voor CTA)     hergebruik shared primitive

   Card-states (3 varianten in dezelfde container):
     1. Solid (geen image)    → olive bg, cream text
     2. Image                 → bg-foto via --feature-image custom property
     3. Image + body          → idem + paragraph onder titel

   API:
     <a class="feature-card">                                 — solid
     <a class="feature-card" style="--feature-image: url(…)">  — image
     <a class="feature-card" data-overlay="light"
        style="--feature-image: url(…)">                       — image + tint

   Content bottom-anchored: flex column met justify-content: flex-end —
   title/body/cta zakken naar onder, ruimte boven ademruimte. Padding
   --space-6 rondom voor adem.

   Mobile (≤720): grid wordt 1-kolom (stacked, géén horizontale slider).
   Aspect-ratio 3/4 blijft consistent met tile-grid voor visueel ritme.
   -------------------------------------------------------------------------- */
.feature-grid {
    padding: var(--space-9) 0 var(--space-8);
    background: var(--color-bg);
}
.feature-grid__header {
    max-width: var(--container-xl);
    margin: 0 auto var(--space-7);
    padding: 0 var(--space-5);
}
.feature-grid__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}
.feature-grid__strip {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.feature-grid__strip > li { margin: 0; }

.feature-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    aspect-ratio: 3 / 4;
    padding: var(--space-6);
    overflow: hidden;
    background-color: var(--color-text);                /* olive solid bg */
    background-image: var(--feature-image, none);
    background-size: cover;
    background-position: center;
    color: var(--color-on-image);
    text-decoration: none;
    isolation: isolate;
}
.feature-card:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: 0;
    outline: none;
}

/* Overlay layer — alleen wanneer [data-overlay] gezet is */
.feature-card[data-overlay]::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.feature-card[data-overlay="light"]::after {
    background: var(--color-overlay-light);
}

.feature-card__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);                /* h3 — past binnen de smalle desktop card */
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-on-image);
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}
.feature-card__body {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    color: var(--color-on-image);
    margin: 0 0 var(--space-4);
    max-width: 32ch;
    opacity: 0.92;
}

/* Tablet — tighter gap */
@media (min-width: 721px) and (max-width: 1024px) {
    .feature-grid__strip { gap: var(--space-4); }
    .feature-card { padding: var(--space-5); }
}

/* Mobile — single column stacked (geen slider) */
@media (max-width: 720px) {
    .feature-grid {
        padding: var(--space-7) 0 var(--space-6);
    }
    .feature-grid__header {
        margin-bottom: var(--space-5);
    }
    .feature-grid__strip {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .feature-card { padding: var(--space-5); }
    .feature-card__title {
        font-size: var(--text-2xl);            /* groter op mobile — cards zijn full-width */
    }
}

/* --------------------------------------------------------------------------
   5.24 FILTER BAR + FILTER MODAL
   --------------------------------------------------------------------------
   Collapsible filter & sort bar boven het product-grid. Default state op
   zowel desktop als mobile is COLLAPSED: alleen één 'Sorteren & filters'-
   knop rechts uitgelijnd (met count-badge bij actieve filters).

   DESKTOP (>=721px):
     Collapsed (default):                    Expanded (na klik toggle):
     ┌───────────────────────────┐           ┌─────────────────────────────┐
     │     ☰ Sorteren & filters 2│           │ Sorteren ▾ │ Prijs ▾ ...  × │
     ├───────────────────────────┤           ├─────────────────────────────┤
     │ ⊗ Glas  ⊗ < €25 …         │           │ ⊗ Glas  ⊗ < €25  Wis alles │
     └───────────────────────────┘           └─────────────────────────────┘
       (klik toggle → expand)                  (klik × → collapse)

   MOBILE (<=720px): toggle blijft zichtbaar; klik opent .filter-modal
   full-screen (slide-in van rechts). De inline-row wordt nooit zichtbaar
   op mobile — de modal vervangt 'm.

   State via data-expanded op .filter-bar. JS controleert breakpoint en
   doet ofwel inline-toggle (desktop) of modal-open (mobile).

   Triggers = plain-text buttons (Tasman Regular) met chevron-svg.
   Active chips (.tag), .choice, .accordion (modal) — alle hergebruikt.
   Container = --container-xl, side-padding = --space-5 (matches mosaic).
   -------------------------------------------------------------------------- */
.filter-bar {
    max-width: var(--container-xl);
    margin: 0 auto var(--space-5);
    padding: 0 var(--space-5);
}
.filter-bar__inner {
    display: flex;
    flex-direction: column;
    /* Borders alleen zichtbaar in expanded state (zie media query verderop).
       Collapsed = alleen toggle (+ optioneel chips) — geen omsluitende lijnen
       zodat de page-flow rustig blijft. */
}

/* ----- Toggle button — default visible, rechts uitgelijnd -----
   Toont in collapsed state op zowel desktop als mobile. Klik-gedrag
   varieert per breakpoint (zie JS): desktop = expand inline row,
   mobile = open .filter-modal. */
.filter-bar__toggle {
    display: inline-flex;
    align-self: flex-end;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 0;
    padding: var(--space-3) 0;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}
.filter-bar__toggle:hover { color: var(--color-accent); }
.filter-bar__toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}
.filter-bar__toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--space-1);
    background: var(--color-accent);
    color: var(--color-accent-text);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    line-height: 1;
}
.filter-bar__toggle-count[data-count="0"] { display: none; }

/* ----- Inline row — hidden default, zichtbaar bij data-expanded op desktop ----- */
.filter-bar__row {
    display: none;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-3) 0;
    flex-wrap: wrap;
}
.filter-bar__sort,
.filter-bar__filters {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}
.filter-bar__divider {
    width: 1px;
    align-self: stretch;
    background: var(--color-border);
}

/* ----- Close button — rechts in expanded row, sluit terug naar collapsed ----- */
.filter-bar__close {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
}
.filter-bar__close:hover { color: var(--color-accent); }
.filter-bar__close svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
}

/* ----- Trigger button (plain text + chevron) ----- */
.filter-bar__dropdown {
    position: relative;
}
.filter-bar__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: none;
    border: 0;
    padding: var(--space-1) 0;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-sm);
    color: var(--color-text);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.filter-bar__trigger:hover { color: var(--color-accent); }
.filter-bar__trigger-label {
    color: var(--color-text-muted);
}
.filter-bar__trigger-value {
    color: var(--color-text);
    margin-left: 2px;
}
.filter-bar__trigger-count {
    color: var(--color-text-subtle);
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
}
.filter-bar__trigger-chevron {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: transform var(--duration-fast) var(--ease-out);
}
.filter-bar__dropdown[data-open="true"] .filter-bar__trigger {
    color: var(--color-accent);
}
.filter-bar__dropdown[data-open="true"] .filter-bar__trigger-chevron {
    transform: rotate(180deg);
}

/* ----- Panel (dropdown content) ----- */
.filter-bar__panel {
    position: absolute;
    top: calc(100% + var(--space-3));
    left: 0;
    z-index: 20;
    min-width: 240px;
    padding: var(--space-3) var(--space-4) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: none;
}
/* Right-align variant — laatste dropdown ('Meer') opent naar links toe
   zodat 'ie niet buiten de container valt op smalle desktops. */
.filter-bar__panel--right { left: auto; right: 0; }
.filter-bar__dropdown[data-open="true"] .filter-bar__panel {
    display: block;
}

/* Panel-groups: meerdere filter-secties stapelen binnen 1 panel
   (gebruikt door 'Meer'-dropdown voor Hoogte/Merk/Stijl). */
.filter-bar__panel-group + .filter-bar__panel-group {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}
.filter-bar__panel-title {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
}

/* .choice override binnen panel — full-row tappable, count rechts */
.filter-bar__panel .choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-1) 0;
    font-size: var(--text-sm);
}
.filter-bar__count {
    margin-left: auto;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

/* Color-dot — kleine cirkel naast checkbox in kleur-filter */
.filter-bar__color {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    border: 1px solid var(--color-border);
    background: var(--filter-color, transparent);
    flex: 0 0 auto;
}

/* ----- Active filter chips row -----
   Border-top alleen in expanded state — in collapsed state staat de chip-row
   onder de losse toggle-knop, dan voegt een separator-lijntje niets toe. */
.filter-bar__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0;
}
.filter-bar__active[hidden] { display: none; }
.filter-bar__clear {
    margin-left: auto;
    background: none;
    border: 0;
    padding: var(--space-1) 0;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.filter-bar__clear:hover { color: var(--color-accent); }

/* ----- Desktop expanded state (>=721px alleen) -----
   Wissel collapsed → expanded door data-expanded="true" op .filter-bar.
   Op mobile is deze regel niet actief — daar blijft de toggle altijd
   zichtbaar en opent JS de modal in plaats van de inline row. */
@media (min-width: 721px) {
    .filter-bar[data-expanded="true"] .filter-bar__toggle { display: none; }
    .filter-bar[data-expanded="true"] .filter-bar__row    { display: flex; }
    /* Borders alleen zichtbaar wanneer de bar daadwerkelijk geopend is —
       omsluit de hele bar + scheidt de chip-row van de filter-row. */
    .filter-bar[data-expanded="true"] .filter-bar__inner {
        border-top: 1px solid var(--color-border);
        border-bottom: 1px solid var(--color-border);
    }
    .filter-bar[data-expanded="true"] .filter-bar__active {
        border-top: 1px solid var(--color-border);
    }
}

/* ----- Mobile (≤720px) -----
   Toggle blijft default zichtbaar (zit al in basis-CSS). Inline row en
   panels nooit zichtbaar — daarvoor wordt .filter-modal gebruikt. */
@media (max-width: 720px) {
    .filter-bar { padding: 0 var(--space-4); }
    .filter-bar__row { display: none !important; }
    .filter-bar__panel { display: none !important; }
    .filter-bar__active { padding: var(--space-2) 0; }
}

/* ==========================================================================
   FILTER MODAL (mobile full-screen filter UI)
   ==========================================================================
   Slide-in van rechts (.navbar__mobile-menu slidet van links — visuele
   balans: nav = links, filters = rechts). Sticky header + footer, scrollable
   body met sort-section bovenaan en filter-accordion daaronder.
   Op desktop (>720px) volledig hidden — daar gebruikt filter-bar inline
   dropdowns. */
.filter-modal {
    position: fixed;
    inset: 0;
    z-index: 99;
    background: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0s linear var(--duration-slow);
    visibility: hidden;
}
.filter-modal.is-open {
    transform: translateX(0);
    visibility: visible;
    transition:
        transform var(--duration-slow) var(--ease-out),
        visibility 0s linear 0s;
}
.filter-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}
.filter-modal__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    margin: 0;
    color: var(--color-text);
    letter-spacing: 0;
}
.filter-modal__close {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-text);
    cursor: pointer;
}
.filter-modal__close svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    fill: none;
}
.filter-modal__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-4);
}
.filter-modal__body .accordion { border-top: 0; }
.filter-modal__body .choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}
.filter-modal__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    flex-shrink: 0;
}
.filter-modal__footer .btn--link {
    flex: 0 0 auto;
    padding: 0;
}
.filter-modal__footer .btn:not(.btn--link) {
    flex: 1;
}

/* Desktop guard — modal nooit zichtbaar boven 720px breakpoint */
@media (min-width: 721px) {
    .filter-modal { display: none; }
}

/* --------------------------------------------------------------------------
   5.25 LOGO STRIP
   --------------------------------------------------------------------------
   Headless 1-rij marquee — scrollende partner/brand logos (of placeholder
   labels tot er echte logos zijn). Vertaling van wireframe 02b-brands.

   Mechaniek:
     .logo-strip            section wrapper + bg + padding
     .logo-strip__viewport  container-bound + overflow:hidden + mask-fade
                            aan beide randen. Hover-target voor pauze.
     .logo-strip__track     flex-row, width:max-content, infinite scroll.
                            6 unieke items × 2 duplicaten = naadloze loop.
     .logo-strip__item      single logo slot, fixed height
     .logo-strip__name      tekst-label (placeholder voor echte logo-img)

   Animatie: translateX(-50%) → 0 over --logo-strip-duration (default 40s).
   Duration override per-instance via inline style of cascading custom prop.

   A11y:
     - Tweede set heeft aria-hidden zodat SR maar 6 items telt
     - prefers-reduced-motion: animation: none
     - role="list" op de <ul> tegen list-stripping in Safari

   Mask hex (#000) is een mask-operator, geen design-color — de alpha is
   wat telt voor de fade. Bewust hex i.p.v. token want geen kleur-keuze.
   -------------------------------------------------------------------------- */
.logo-strip {
    padding: var(--space-6) 0;
    background: var(--color-bg);
}
.logo-strip__viewport {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.logo-strip__track {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-7);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: logo-strip-scroll var(--logo-strip-duration, 40s) linear infinite;
}
.logo-strip__viewport:hover .logo-strip__track {
    animation-play-state: paused;
}
.logo-strip__item {
    flex: 0 0 auto;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
.logo-strip__name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--color-text-muted);
    white-space: nowrap;
}

@keyframes logo-strip-scroll {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

@media (max-width: 720px) {
    .logo-strip {
        padding: var(--space-5) 0;
    }
    .logo-strip__viewport {
        padding: 0 var(--space-4);
    }
    .logo-strip__track {
        gap: var(--space-6);
    }
    .logo-strip__item {
        height: 48px;
    }
    .logo-strip__name {
        font-size: var(--text-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-strip__track {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   5.26 INSTAGRAM STRIP
   --------------------------------------------------------------------------
   Container-bound Instagram-feed marquee — heading + link bovenaan, daaronder
   een naadloze scrollende rij van 4:5 portret-tiles.

   Aspect-ratio: 4 / 5 — Instagram's grid-default sinds januari 2025
   (vóór die tijd was 't 1:1). Modern, vertical, matches huidige Nozili-posts.

   Marquee-math: 6 unique + 6 duplicates in track. Translation per cycle =
   -6 × (tile-size + gap) zodat exact één unieke set verschuift. Bij fixed
   tile-width werkt deze precieze rekening; bij variable widths (zoals
   logo-strip met tekst) gebruiken we -50% als approximatie.

   A11y: duplicates aria-hidden + tabindex -1, prefers-reduced-motion stopt
   animatie volledig.

   Per-instance overrides:
     --instagram-strip-duration  (default 40s)  → snelheid
     --ig-image                  per .instagram-strip__item → bg-image
   -------------------------------------------------------------------------- */
.instagram-strip {
    padding: var(--space-8) 0;
    background: var(--color-bg);
}
.instagram-strip__intro {
    max-width: var(--container-xl);
    margin: 0 auto var(--space-6);
    padding: 0 var(--space-5);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-5);
    flex-wrap: wrap;
}
.instagram-strip__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
    max-width: 22ch;
    text-wrap: balance;
}

.instagram-strip__viewport {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.instagram-strip__track {
    --ig-tile-size: clamp(140px, 14vw, 220px);
    --ig-tile-gap: var(--space-3);
    display: flex;
    gap: var(--ig-tile-gap);
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: instagram-strip-scroll var(--instagram-strip-duration, 40s) linear infinite;
}
.instagram-strip__viewport:hover .instagram-strip__track {
    animation-play-state: paused;
}
.instagram-strip__item {
    flex: 0 0 auto;
    width: var(--ig-tile-size);
    aspect-ratio: 4 / 5;
    background-color: var(--color-surface-alt);
    background-image: var(--ig-image, url('img/blankimage_430x.webp'));
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: block;
    text-decoration: none;
    margin: 0;
}
.instagram-strip__item:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: 0;
    outline: none;
}

@keyframes instagram-strip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-6 * (var(--ig-tile-size) + var(--ig-tile-gap)))); }
}

@media (max-width: 720px) {
    .instagram-strip {
        padding: var(--space-7) 0;
    }
    .instagram-strip__intro {
        padding: 0 var(--space-4);
        margin-bottom: var(--space-5);
    }
    .instagram-strip__viewport {
        padding: 0 var(--space-4);
    }
    .instagram-strip__track {
        --ig-tile-size: clamp(120px, 26vw, 180px);
        --ig-tile-gap: var(--space-2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .instagram-strip__track {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   5.27 SPLIT ROW
   --------------------------------------------------------------------------
   2-kolom feature-row — beeld + tekst naast elkaar. Vertaling van het
   .split-patroon uit Olijfmannen's image-text-row.liquid sectie.

   Anatomie:
     .split-row                  section wrapper + padding + bg
     .split-row__inner           container + flex row (50/50), gap tussen cols
     .split-row__media           image kolom (aspect-ratio 4/5)
     .split-row__content         text kolom — flex column met gap voor
                                 title/body/cta-stacking
     .split-row__title           h2, uppercase display, kleinere scale dan
                                 andere section-titles (past binnen halve kolom)
     .split-row__body            Tasman Regular, muted color voor hierarchie
     (.link-arrow voor CTA)

   API — image-positie via data-attribute:
     <section class="split-row">                     image links (default)
     <section class="split-row" data-image="right">  image rechts

   Mobile pattern (≤720): kolommen stapelen verticaal. Image krijgt
   ALTIJD order: -1 zodat 'ie bovenaan staat — ongeacht desktop-positie.
   Olijfmannen's truc voor consistent leesgedrag op smal scherm.

   Scale-keuze: title clamp(--text-xl, 3vw, --text-3xl) = 24–40px. Lager
   dan tile-grid/image-banner titles (52–64) omdat de heading binnen een
   halve kolom wraps — kleinere scale leest beter in die context.
   -------------------------------------------------------------------------- */
.split-row {
    padding: var(--space-9) 0;
    background: var(--color-bg);
}
/* Contextual exception — twee opeenvolgende split-rows hoeven niet 192px
   witruimte tussen elkaar. Bottom-padding van de eerste valt weg, de top-
   padding van de tweede neemt de spacing alleen voor zich. */
.split-row:has(+ .split-row) {
    padding-bottom: 0;
}
.split-row__inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-8);
}
.split-row[data-image="right"] .split-row__inner {
    flex-direction: row-reverse;
}
.split-row__media,
.split-row__content {
    flex: 1;
    min-width: 0;
}
.split-row__media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.split-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.split-row__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}
.split-row__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
    text-wrap: balance;
}
.split-row__body {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-md);
    line-height: var(--leading-base);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 40ch;
}

/* Mobile — stack vertical, image always on top via order: -1.
   Beide variants (default én data-image="right") collapsen naar dezelfde
   column-direction zodat de order: -1 truc consistent werkt. */
@media (max-width: 720px) {
    .split-row {
        padding: var(--space-7) 0;
    }
    .split-row__inner,
    .split-row[data-image="right"] .split-row__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-6);
    }
    .split-row__media {
        order: -1;
        aspect-ratio: 4 / 5;
    }
}

/* --------------------------------------------------------------------------
   5.27a SPLIT ROW — SPREAD VARIANT
   --------------------------------------------------------------------------
   Variant op .split-row voor editorial categorie-rijen waar de content
   meer adem mag hebben dan in de homepage-locatierij. Verschillen t.o.v.
   de default split-row:
     - .split-row__content verdeelt verticaal space-between: kop boven,
       footer-cluster (body + link) onderaan
     - .split-row__title schaalt groter (clamp 2xl → 5xl) zodat 'ie de
       halve kolom echt vult — past bij categorie-koppen
     - .split-row__footer stapelt body + link, met link rechts-uitgelijnd
       voor een bottom-right editorial CTA

   Markup:
     <section class="split-row" data-layout="spread">
         <div class="split-row__inner">
             <div class="split-row__media"><img …></div>
             <div class="split-row__content">
                 <h2 class="split-row__title">…</h2>
                 <div class="split-row__footer">
                     <p class="split-row__body">…</p>
                     <a class="link-arrow" href="#">…</a>
                 </div>
             </div>
         </div>
     </section>

   Combineerbaar met data-image="right" voor image-rechts mirror.
   -------------------------------------------------------------------------- */
.split-row[data-layout="spread"] .split-row__inner {
    align-items: stretch;
}
.split-row[data-layout="spread"] .split-row__content {
    justify-content: space-between;
    align-items: stretch;
    padding: var(--space-3) 0;
}
.split-row[data-layout="spread"] .split-row__title {
    font-size: clamp(var(--text-2xl), 5vw, var(--text-5xl));
}
.split-row__footer {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.split-row__footer .split-row__body {
    margin: 0;
    max-width: 50ch;
}
.split-row__footer .link-arrow {
    align-self: flex-end;
}

@media (max-width: 720px) {
    .split-row[data-layout="spread"] .split-row__content {
        padding: 0;
        gap: var(--space-5);
    }
    .split-row__footer {
        gap: var(--space-4);
    }
}

/* --------------------------------------------------------------------------
   5.27b SPLIT ROW — TEXT/TEXT VARIANT
   --------------------------------------------------------------------------
   Variant op .split-row voor twee gelijkwaardige content-kolommen zonder
   beeld. Gebruikt voor contact (form + FAQ naast elkaar) en andere
   editorial sections waar twee tekstblokken in dialoog staan.

   Verschillen t.o.v. default split-row:
     - Geen __media element; twee __col kolommen vervangen __media + __content
     - .split-row__col is een flex-column met gap voor heading + body-stacking
     - align-items: stretch zodat beide kolommen even hoog zijn (form en FAQ
       hebben verschillende natuurlijke hoogtes; stretch geeft een symmetrisch
       blok)
     - Mobile stack: kolommen stapelen in document-order (geen order: -1 hack
       — er is geen image die bovenaan moet)

   Markup:
     <section class="split-row" data-layout="text">
         <div class="split-row__inner">
             <div class="split-row__col">…links…</div>
             <div class="split-row__col">…rechts…</div>
         </div>
     </section>
   -------------------------------------------------------------------------- */
.split-row[data-layout="text"] .split-row__inner {
    align-items: stretch;
}
.split-row[data-layout="text"] .split-row__col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (max-width: 720px) {
    .split-row[data-layout="text"] .split-row__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-7);
    }
}

/* --------------------------------------------------------------------------
   5.27c SPLIT ROW — COL MODIFIERS (card, sticky)
   --------------------------------------------------------------------------
   Modifiers op .split-row__col voor gebruik binnen data-layout="text".
   Niet bedoeld voor de default media+content variant.

   --card    Maakt een kolom visueel een omrand surface-blok (witte bg,
             subtiele crème-border, ruime padding, radius). Goed voor
             formulieren die zich willen onderscheiden van de pagina-
             achtergrond — geeft het "een formulier"-affordance.

   --sticky  Houdt een kolom vast tijdens scrollen op desktop (≥721px).
             Top-offset gebruikt --header-h zodat de sticky-kolom onder
             de transparent/solid navbar plakt, niet eronder schuift.
             align-self: flex-start is essentieel — zonder dat blijft de
             col stretched (door .split-row[data-layout="text"]'s
             align-items: stretch) en heeft sticky geen ruimte om te
             werken. Op mobile (≤720px) automatisch uitgeschakeld want
             de cols stapelen verticaal.

   Markup:
     <div class="split-row__col split-row__col--card">…form…</div>
     <div class="split-row__col split-row__col--sticky">…faq…</div>
   -------------------------------------------------------------------------- */
.split-row__col--card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

@media (min-width: 721px) {
    .split-row__col--sticky {
        position: sticky;
        top: calc(var(--header-h) + var(--space-5));
        align-self: flex-start;
    }
}

@media (max-width: 720px) {
    .split-row__col--card {
        padding: var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   5.28 USP GRID
   --------------------------------------------------------------------------
   "Trust-bar" / promise-strip — 3-kolom centered grid met korte tekst-items
   (geen image, geen icon). Voor near-footer USPs zoals "Gratis verzenden",
   "Retourneren", "Veilig betalen". Vertaling van Olijfmannen's
   promise-section pattern, in Nozili-toon.

   Anatomie:
     .usp-grid               section wrapper + padding + bg + top-border
     .usp-grid__strip        container-bound 3-col grid, center-aligned
     .usp-grid__item         text-only column, flex-column met gap
     .usp-grid__title        h3, uppercase display, --text-lg
     .usp-grid__body         Tasman body, muted, max-width 24ch

   Mobile (≤720): stack naar 1 kolom voor leesbaarheid.
   -------------------------------------------------------------------------- */
.usp-grid {
    padding: var(--space-7) 0;
    background: var(--color-bg);
}
.usp-grid__strip {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
}
.usp-grid__strip > li { margin: 0; }
.usp-grid__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    text-align: center;
}
.usp-grid__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-text);
    margin: 0;
}
.usp-grid__body {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-base);
    line-height: var(--leading-base);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 24ch;
    text-wrap: balance;
}

@media (max-width: 720px) {
    .usp-grid {
        padding: var(--space-6) 0;
    }
    .usp-grid__strip {
        grid-template-columns: 1fr;
        gap: var(--space-5);
    }
}

/* --------------------------------------------------------------------------
   5.29 SITE FOOTER
   --------------------------------------------------------------------------
   Page-bottom footer met 5 even-brede info-kolommen op desktop:
     1. Brand        — woordmerk + tagline (algemene informatie)
     2. Navigatie    — pagina-links
     3. Categorieën  — populaire sub-categorieën uit het assortiment
     4. Arnhem       — vestiging Arnhem: adres + tel + openingstijden
     5. De Steeg     — vestiging De Steeg: adres + tel + openingstijden

   Donkere look — --color-bg-alt achtergrond met cream/white tekst — sluit
   de pagina visueel af. Onder de kolommen een dunne legal-strip (border-top)
   met copyright + links naar voorwaarden, privacy, KVK.

   Kleurschaal — scoped op de footer-root als CSS-vars zodat headings/body/
   muted niveaus consistent zijn én later 1-op-1 te tweaken zonder elke
   selector aan te raken:
     --footer-heading → wit prominent      (kolomtitels, brand)
     --footer-text    → cream lopend       (links, adressen, tijden)
     --footer-muted   → cream 65%          (copyright, legal-links)
     --footer-rule    → witte hairline 12% (scheidingslijn naar onderbalk)

   Responsive ladder:
     >=1120  : 5 even kolommen
     721–1119 : 2 kolommen — brand spant rij 1 over beide kolommen
     <=720   : 1 kolom, alles onder elkaar

   Compacte openingstijden: in plaats van de 7-regel .hours-component
   gebruiken we hier samengevoegde dag-ranges (Di-Wo-Do-Vr 09:00-17:00)
   als plain <p> — past beter in een smalle 5e-kolom en voorkomt dat de
   footer onnodig hoog wordt.
   -------------------------------------------------------------------------- */
.site-footer {
    --footer-heading: var(--color-on-image);
    --footer-text:    var(--color-text-invert);
    --footer-muted:   rgba(241, 235, 222, 0.65);
    --footer-rule:    var(--color-border-on-image);

    background: var(--color-bg-alt);
    color: var(--footer-text);
    padding: var(--space-8) 0 0;
}
.site-footer__inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
}
.site-footer__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-6);
    padding-bottom: var(--space-8);
}

/* ----- Brand-kolom ----- */
.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.site-footer__brand-mark {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    color: var(--footer-heading);
    text-decoration: none;
}
/* Blokkeer de globale a:hover (groen) — logo blijft wit zonder underline. */
.site-footer__brand-mark:hover {
    color: var(--footer-heading);
    text-decoration: none;
}
.site-footer__brand-sub {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    color: var(--footer-heading);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
/* Sterren forceren we naar een system-font zodat het glyph altijd rendert —
   Sukhumvit Set heeft geen ★ glyph in de Bold-cut. */
.site-footer__stars {
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 0.85em;
    letter-spacing: 0.1em;
    color: var(--footer-heading);
}
.site-footer__brand-tagline {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-base);
    color: var(--footer-text);
    margin: var(--space-3) 0 0;
    max-width: 28ch;
}

/* ----- Generieke info-kolom ----- */
.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.site-footer__heading {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--footer-heading);
    margin: 0;
}

/* ----- Link-lijst (Navigatie, Categorieën) ----- */
.site-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* Reset globale `li + li { margin-top }` — flex-gap doet hier het werk. */
.site-footer__list > li { margin: 0; }
.site-footer__link {
    color: var(--footer-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    transition: color var(--duration-fast) var(--ease-out);
}
/* Expliciete kleur + underline op hover — anders pakt de globale a:hover
   (var(--color-accent-hover), groen) het over omdat die specifieker is dan
   de default-rule op .site-footer__link. */
.site-footer__link:hover {
    color: var(--footer-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----- Vestiging-blokken (adres + tel + tijden) -----
   .site-footer__address gebruikt <address> in HTML — semantisch correct
   voor contact-info. font-style: normal want browsers zetten <address>
   default cursief. */
.site-footer__address {
    font-style: normal;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--footer-text);
    margin: 0;
}
.site-footer__phone {
    color: var(--footer-text);
    text-decoration: none;
    font-family: var(--font-body);
    font-size: var(--text-base);
    align-self: flex-start;
    transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__phone:hover {
    color: var(--footer-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.site-footer__hours {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-snug);
    color: var(--footer-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ----- Onderbalk (legal / copyright) ----- */
.site-footer__bottom {
    border-top: 1px solid var(--footer-rule);
    padding: var(--space-5) 0;
}
.site-footer__bottom-inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    flex-wrap: wrap;
    font-size: var(--text-sm);
    color: var(--footer-muted);
}
.site-footer__copy {
    margin: 0;
}
.site-footer__legal {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
}
.site-footer__legal > li { margin: 0; }
.site-footer__legal a {
    color: var(--footer-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
}
.site-footer__legal a:hover {
    color: var(--footer-heading);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ----- Scoped .hours overrides -----
   Voor het geval iemand toch de volledige .hours-component wil hergebruiken
   binnen de footer (bv. uitgebreide weergave per dag): kleur omklappen naar
   het invert-palet zonder modifier-klasse op .hours zelf. */
.site-footer .hours,
.site-footer .hours__title,
.site-footer .hours__day,
.site-footer .hours__time { color: var(--footer-text); }
.site-footer .hours__row.is-today .hours__day,
.site-footer .hours__row.is-today .hours__time { color: var(--footer-heading); }
.site-footer .hours__note { color: var(--footer-muted); }

/* ----- Responsive ladder ----- */
@media (max-width: 1119px) {
    .site-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-7) var(--space-6);
    }
    /* Brand spant rij 1 over beide kolommen voor adempauze. */
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
    .site-footer { padding-top: var(--space-7); }
    .site-footer__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        padding-bottom: var(--space-7);
    }
    .site-footer__brand { grid-column: auto; }
    .site-footer__bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .site-footer__legal { gap: var(--space-4); }
}

/* ==========================================================================
   5.32  SURFACE — .section--dark
   --------------------------------------------------------------------------
   Generieke donkere sectie-utility. Zelfde olijf-palet als .site-footer,
   maar als losse section-wrapper zodat een page-hero of content-band volledig
   in donker getoond kan worden zonder elk component te modificeren.

   Scoped vars (analoog aan .site-footer):
     --on-dark-heading → wit       — titels
     --on-dark-text    → cream     — lopende tekst, default-links
     --on-dark-muted   → cream 65% — meta / secundaire info
     --on-dark-rule    → wit 12%   — hairlines / scheidingen

   Componenten die hun default-kleur uit eigen var(--color-…) tokens halen
   krijgen onderaan een scoped invert-override. Zo blijft het component
   buiten de donkere sectie volledig ongemoeid; alleen IN .section--dark
   kantelt de kleur om.
   ========================================================================== */
.section--dark {
    --on-dark-heading: var(--color-on-image);
    --on-dark-text:    var(--color-text-invert);
    --on-dark-muted:   rgba(241, 235, 222, 0.65);
    --on-dark-rule:    var(--color-border-on-image);

    background: var(--color-bg-alt);
    color: var(--on-dark-text);
}

/* Headings inverten naar wit. Behalve wanneer een component-modifier
   z'n eigen kleur expliciet zet (zoals .category-page__title) — dat
   regelen we onderaan met een scoped override. */
.section--dark :is(h1, h2, h3, h4, h5, h6) { color: var(--on-dark-heading); }

/* Default link-kleur inverteren; hover lift naar wit, identiek aan footer-
   conventie. Selector blijft op kale anchors (zonder klasse) zodat geknerfde
   components (buttons, link-arrow, navbar-links) hun eigen styling houden. */
.section--dark a:not([class])         { color: var(--on-dark-text); text-decoration-color: var(--on-dark-rule); }
.section--dark a:not([class]):hover   { color: var(--on-dark-heading); }

/* ----- Component-scoped invert-overrides -----
   Category-page header hergebruikt als hero op donker. Titel valt onder
   de generieke heading-regel hierboven (wit). Intros + intro-links
   kantelen om naar cream zodat ze leesbaar zijn. */
.section--dark .category-page__intro        { color: var(--on-dark-text); }
.section--dark .category-page__intro a      { color: var(--on-dark-text); text-decoration-color: var(--on-dark-rule); }
.section--dark .category-page__intro a:hover{ color: var(--on-dark-heading); }


/* ==========================================================================
   5.33  TIMELINE (.timeline)
   --------------------------------------------------------------------------
   Verticale mijlpaal-lijst. Per rij: groot jaartal naast lopende tekst, met
   een mediablok aan de andere kant dat bij scroll in-glijdt via een drie-
   laags transform-stack (wrapper / space / container / image). De stack
   creëert een organisch ontvouw-effect: container schuift van boven in,
   image schuift van onder in, en de "space"-laag bumpt het geheel licht
   omhoog tot zijn eindpositie. JS (inline in over-ons.html) animeert de
   transforms tijdens scroll; CSS bevat alleen de initiële stand én de
   reduced-motion fallback.

   Zonder JS én zonder reduced-motion zou de timeline leeg blijven (alle
   lagen offscreen). Daarom valt de JS terug op direct-eindstand zetten
   wanneer prefers-reduced-motion actief is.
   ========================================================================== */
.timeline {
    display: flex;
    flex-direction: column;
    gap: var(--space-9);
    /* Top-padding bewust 0: wrapping section (.over-ons__timeline of
       een eigen sectie in stylesheet.html) verzorgt de bovenste adem-
       ruimte; .timeline hoeft 'm niet te verdubbelen. Bottom blijft
       staan zodat de component zelf-afsluit als 'ie ergens los wordt
       gebruikt. */
    padding: 0 0 var(--space-7);
}

.timeline__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
    align-items: center;
    max-width: var(--container-xl);
    width: 100%;
    margin: 0 auto;
    padding: 0 var(--space-5);
}

/* Desktop: jaar+tekst links, media rechts. Reverse-modifier flipt de
   media naar links voor visuele afwisseling tussen rijen. */
@media (min-width: 900px) {
    .timeline__row {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
        gap: var(--space-8);
    }
    .timeline__row--reverse .timeline__copy  { order: 2; }
    .timeline__row--reverse .timeline__media { order: 1; }
}

.timeline__copy {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}

.timeline__year {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(5rem, 14vw, 14.25rem);
    line-height: 0.9;
    letter-spacing: var(--tracking-tight);
    color: var(--on-dark-heading, var(--color-text));
    margin: 0;
}

.timeline__text {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-md);
    line-height: var(--leading-base);
    color: var(--on-dark-text, var(--color-text));
    max-width: 42ch;
    margin: 0;
}

.timeline__caption {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--on-dark-muted, var(--color-text-muted));
    margin: 0;
}

/* ----- Media-stack — drie genest getransformeerde lagen ----- */
.timeline__media {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;       /* clipt de space-laag */
}

.timeline__media-space {
    height: 100%;
    width: 100%;
    transform: translateY(35%);
    will-change: transform;
}

.timeline__media-container {
    height: 100%;
    width: 100%;
    overflow: hidden;       /* clipt de image-laag ⇒ slide-reveal */
    transform: translateY(-100%);
    will-change: transform;
}

.timeline__media-image {
    display: block;
    height: 100%;
    width: 100%;
    object-fit: cover;
    transform: translateY(100%);
    will-change: transform;
}

/* Placeholder-tegels: voor de showcase + initiële demo gebruiken we
   gekleurde token-vlakken i.p.v. echte foto's. Erven dezelfde dimensies
   en transform-positie als .timeline__media-image. */
.timeline__media-image--placeholder              { background: var(--color-accent); }
.timeline__media-image--placeholder.is-soft      { background: var(--color-accent-soft); }
.timeline__media-image--placeholder.is-cream     { background: var(--color-text-invert); }
.timeline__media-image--placeholder.is-muted     { background: var(--color-text-muted); }

/* Reduced-motion: zet alle drie de lagen direct op hun eindstand zodat
   de timeline meteen volledig zichtbaar is. */
@media (prefers-reduced-motion: reduce) {
    .timeline__media-space,
    .timeline__media-container,
    .timeline__media-image { transform: none !important; }
}

/* Mobile: vereenvoudig naar gestapelde kaarten met een kortere media-
   verhouding zodat de unfold zichtbaar blijft zonder een dichtgespoten
   scherm. Jaartal-clamp doet het meeste werk al via vw. */
@media (max-width: 720px) {
    .timeline {
        gap: var(--space-7);
        padding: var(--space-6) 0;
    }
    .timeline__row {
        gap: var(--space-4);
        padding: 0 var(--space-4);
    }
    .timeline__year { line-height: 0.95; }
    .timeline__text { font-size: var(--text-base); }
    .timeline__media { aspect-ratio: 3 / 2; }
}


/* ==========================================================================
   5.34  LEGAL PAGE (.legal-page)
   --------------------------------------------------------------------------
   Renderer voor juridische pagina's (algemene voorwaarden, privacybeleid,
   cookies, etc.). Patroon overgenomen van Olijfmannen's legal-page section,
   maar opgebouwd uit Nozili-tokens — accent-groen i.p.v. teal.

   Opbouw:
     .legal-page                — wrapper
       .legal-page__header      — compacte gecentreerde kop (titel + meta)
       .legal-page__layout      — 2-koloms grid (240px TOC + 1fr body)
         .legal-page__toc       — sticky aside, verbergt onder 960px
         .legal-page__body      — article met max-width 65ch leeskolom

   De TOC wordt client-side opgebouwd uit de <h2>'s in .legal-page__body
   (zie inline script in voorwaarden.html). Server-side staat de layout
   default op .legal-page__layout--single zodat het zónder JS een nette
   één-koloms leespagina is. Het script promoveert naar 2-koloms zodra er
   kopjes zijn gevonden — content-agnostisch, géén id's nodig in de bron.

   Scroll-spy markeert via IntersectionObserver de zichtbare H2 in de TOC
   als .is-active — accent-groen, linker border, zachte accent-soft band.
   ========================================================================== */
.legal-page {
    background: var(--color-bg);
}

/* ----- Header — compacte gecentreerde band ----- */
.legal-page__header {
    max-width: var(--container-md);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-6);
    text-align: center;
}

.legal-page__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-3xl), 5vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
}

.legal-page__meta {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: var(--space-3) 0 0;
}

/* ----- Body layout — 2-koloms grid ----- */
.legal-page__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: var(--space-7);
    align-items: start;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-5) var(--space-9);
}

/* No-JS / no-H2-fallback: één leeskolom, gecentreerd. JS schakelt deze
   modifier weg zodra de TOC opgebouwd is. */
.legal-page__layout--single {
    grid-template-columns: 1fr;
    max-width: var(--container-md);
}
.legal-page__layout--single .legal-page__toc { display: none; }
.legal-page__layout--single .legal-page__body { max-width: none; margin: 0 auto; }

/* ----- TOC — sticky aside ----- */
.legal-page__toc {
    position: sticky;
    top: calc(var(--header-h) + var(--space-5));
    align-self: start;
}

.legal-page__toc-title {
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-2);
    padding: 0 var(--space-3);
}

.legal-page__toc-list {
    display: flex;
    flex-direction: column;
}

.legal-page__toc-link {
    display: block;
    padding: var(--space-2) var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    color: var(--color-text-muted);
    text-decoration: none;
    border-left: 3px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    transition:
        color var(--duration-base) var(--ease-out),
        background-color var(--duration-base) var(--ease-out),
        border-color var(--duration-base) var(--ease-out);
}
.legal-page__toc-link:hover {
    color: var(--color-text);
    background: var(--color-surface-alt);
}
.legal-page__toc-link.is-active {
    color: var(--color-accent);
    font-weight: var(--weight-medium);
    border-left-color: var(--color-accent);
    background: var(--color-accent-soft);
}
.legal-page__toc-link:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* ----- Body — article met leeskolom-breedte ----- */
.legal-page__body {
    max-width: 65ch;
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-base);
    line-height: var(--leading-loose);
    color: var(--color-text);
}

.legal-page__body > :first-child { margin-top: 0; }
.legal-page__body > :last-child  { margin-bottom: 0; }

.legal-page__body h2 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-xl);
    line-height: var(--leading-tight);
    color: var(--color-text);
    margin: var(--space-7) 0 var(--space-3);
    scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.legal-page__body h3 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-md);
    line-height: var(--leading-snug);
    color: var(--color-text);
    margin: var(--space-5) 0 var(--space-2);
    scroll-margin-top: calc(var(--header-h) + var(--space-5));
}

.legal-page__body p {
    margin: 0 0 var(--space-4);
}

.legal-page__body ul,
.legal-page__body ol {
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}
.legal-page__body ul { list-style: disc; }
.legal-page__body ol { list-style: decimal; }
.legal-page__body li {
    margin-bottom: var(--space-2);
}
.legal-page__body li::marker { color: var(--color-text-subtle); }

.legal-page__body strong { font-weight: var(--weight-medium); color: var(--color-text); }
.legal-page__body em     { font-style: italic; }

.legal-page__body a {
    color: var(--color-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: opacity var(--duration-base) var(--ease-out);
}
.legal-page__body a:hover { opacity: 0.7; }
.legal-page__body a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}

/* Definitielijst — voor bv. een KvK/adres-blok onderin de algemene
   voorwaarden. Optioneel; rendert mooi zonder extra wrapper. */
.legal-page__body dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.legal-page__body dt { font-weight: var(--weight-medium); color: var(--color-text); }
.legal-page__body dd { margin: 0; color: var(--color-text-muted); }

.legal-page__body blockquote {
    margin: var(--space-5) 0;
    padding: var(--space-4) var(--space-5);
    border-left: 3px solid var(--color-accent);
    background: var(--color-surface-alt);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-muted);
    font-style: italic;
}

/* ----- Mobile TOC — sticky trigger bar + uitklap-sheet -----
   Onder 960px werkt een sticky aside-TOC niet (te smal, knelt content).
   In plaats daarvan een compacte balk onder de navbar die de huidige
   sectie toont, met een sheet die opent op tap. Beide elementen staan
   default verstopt (display:none op desktop); de JS in voorwaarden.html
   bouwt ze pas op zodra er H2-kopjes zijn gevonden. No-JS-veilig:
   zonder JS blijft het een nette enkel-koloms leespagina. */

.legal-page__toc-bar   { display: none; }
.legal-page__toc-sheet { display: none; }

/* ----- Responsive — onder 960px: 1-koloms, desktop-TOC verbergen,
        mobiele TOC-bar + sheet activeren ----- */
@media (max-width: 960px) {
    .legal-page__layout {
        grid-template-columns: 1fr;
        max-width: var(--container-md);
        gap: var(--space-5);
    }
    .legal-page__toc { display: none; }
    .legal-page__body { max-width: none; }

    /* H2/H3 scroll-margin moet ook de sticky bar verrekenen, anders
       verdwijnt het aangeklikte kopje deels onder de bar. 48px = bar-h. */
    .legal-page__body h2,
    .legal-page__body h3 {
        scroll-margin-top: calc(var(--header-h) + 48px + var(--space-3));
    }

    /* ----- Sticky trigger bar -----
       Visible pas zodra je voorbij de page-header bent gescrolled
       (JS toggle .is-stuck). Default translateY(-100%) zodat de
       transitie ingaat op het moment van toggle — en niet meteen
       op page-load over de header heen schuift. */
    .legal-page__toc-bar {
        display: block;
        position: sticky;
        top: var(--header-h);
        z-index: 40;
        background: var(--color-bg);
        border-bottom: 1px solid var(--color-border);
        transform: translateY(-100%);
        transition: transform var(--duration-base) var(--ease-out);
        pointer-events: none;
    }
    .legal-page__toc-bar.is-stuck {
        transform: translateY(0);
        pointer-events: auto;
    }

    .legal-page__toc-bar-button {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        width: 100%;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-5);
        font-family: var(--font-body);
        font-size: var(--text-sm);
        color: var(--color-text);
        cursor: pointer;
        text-align: left;
        min-height: 48px;
    }
    .legal-page__toc-bar-button:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }

    .legal-page__toc-bar-eyebrow {
        font-family: var(--font-display);
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-text-muted);
        flex-shrink: 0;
    }

    .legal-page__toc-bar-divider {
        color: var(--color-text-subtle);
        flex-shrink: 0;
    }

    .legal-page__toc-bar-current {
        font-weight: var(--weight-medium);
        color: var(--color-text);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    .legal-page__toc-bar-icon {
        width: 16px;
        height: 16px;
        flex-shrink: 0;
        color: var(--color-text-muted);
    }

    /* ----- Sheet — fullscreen overlay vanaf onder ----- */
    .legal-page__toc-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0;
        z-index: 60;
        background: var(--color-bg);
        transform: translateY(100%);
        transition: transform var(--duration-slow) var(--ease-out);
        visibility: hidden;
    }
    .legal-page__toc-sheet.is-open {
        transform: translateY(0);
        visibility: visible;
    }

    .legal-page__toc-sheet-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-4) var(--space-5);
        border-bottom: 1px solid var(--color-border);
        flex-shrink: 0;
    }

    .legal-page__toc-sheet-title {
        font-family: var(--font-display);
        font-size: var(--text-xs);
        font-weight: var(--weight-bold);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-text-muted);
        margin: 0;
    }

    .legal-page__toc-sheet-close {
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        border: 0;
        padding: var(--space-2);
        margin: calc(var(--space-2) * -1);
        cursor: pointer;
        color: var(--color-text);
        display: inline-flex;
        border-radius: var(--radius-sm);
    }
    .legal-page__toc-sheet-close:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }
    .legal-page__toc-sheet-close svg {
        width: 22px;
        height: 22px;
    }

    .legal-page__toc-sheet-list {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-3) var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        -webkit-overflow-scrolling: touch;
    }

    /* Sheet-links hergebruiken .legal-page__toc-link styling, maar groter
       voor comfortabele tap-targets (≥44px). */
    .legal-page__toc-sheet-list .legal-page__toc-link {
        font-size: var(--text-base);
        padding: var(--space-3) var(--space-4);
        line-height: var(--leading-snug);
    }
}

@media (max-width: 720px) {
    .legal-page__header {
        padding: var(--space-7) var(--space-4) var(--space-5);
    }
    .legal-page__layout {
        padding: 0 var(--space-4) var(--space-8);
    }
    .legal-page__body h2 { font-size: var(--text-lg); }
}

/* Body scroll-lock terwijl de sheet open is. */
.is-toc-sheet-open { overflow: hidden; }


/* ==========================================================================
   6. STYLESHEET PAGE (showcase layout)
   ========================================================================== */
.docs {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}
.docs__sidebar {
    position: sticky; top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
    padding: var(--space-6) var(--space-5);
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
}
.docs__brand {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    margin-bottom: var(--space-1);
    letter-spacing: var(--tracking-tight);
}
.docs__brand-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    margin-bottom: var(--space-6);
}
.docs__nav {
    list-style: none;
    margin: 0; padding: 0;
    font-size: var(--text-sm);
}
.docs__nav-group {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin: var(--space-5) 0 var(--space-2);
}
.docs__nav a {
    display: block;
    padding: var(--space-1) 0;
    color: var(--color-text-muted);
    text-decoration: none;
}
.docs__nav a:hover { color: var(--color-text); }

.docs__main {
    padding: var(--space-7) var(--space-7);
    max-width: 980px;
}
.docs__section { padding: var(--space-7) 0; border-bottom: 1px solid var(--color-border); }
.docs__section:last-child { border-bottom: none; }
.docs__section-eyebrow {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.docs__section-title {
    font-size: var(--text-3xl);
    font-family: var(--font-display);
    margin-bottom: var(--space-2);
    letter-spacing: var(--tracking-tight);
}
.docs__section-desc {
    font-size: var(--text-md);
    color: var(--color-text-muted);
    max-width: 60ch;
    margin-bottom: var(--space-6);
}

.docs__example {
    padding: var(--space-6);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.docs__example-label {
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-subtle);
    margin-bottom: var(--space-4);
}

/* Nav preview: edge-to-edge wrapper voor navbar-demos. Override sticky → static
   binnen showcase, en plak een (fake) hero-achtergrond onder de transparent demo.
   margin-bottom-reset: de transparent variant doet in productie negative margin
   om over de hero te vallen — in de losse showcase-tegel zou dat de wrapper
   doen instorten, dus daar zetten we 'm uit. */
.docs__nav-preview { padding: 0; overflow: hidden; }
.docs__nav-preview .navbar { position: static; margin-bottom: 0; }
.docs__nav-preview--photo {
    background:
        radial-gradient(circle at 18% 28%, rgba(115, 146, 72, 0.45), transparent 55%),
        radial-gradient(circle at 82% 72%, rgba(232, 223, 200, 0.18), transparent 45%),
        linear-gradient(135deg, #3a3220 0%, #5c4d2e 60%, #6f5e34 100%);
    min-height: 220px;
}
.docs__nav-preview--photo-hero {
    display: flex;
    flex-direction: column;
}
.docs__nav-preview__hero {
    flex: 1;
    padding: var(--space-7) var(--space-5);
    color: var(--color-on-image);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    letter-spacing: var(--tracking-tight);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

/* Swatches for color showcase */
.swatch {
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
}
.swatch__chip { height: 80px; }
.swatch__meta { padding: var(--space-3); font-size: var(--text-xs); }
.swatch__name { font-weight: var(--weight-semi); display: block; margin-bottom: 2px; }
.swatch__value { color: var(--color-text-muted); font-family: var(--font-mono); }

/* Spacing showcase */
.spacing-row { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-2); font-size: var(--text-xs); }
.spacing-row__label { width: 80px; font-family: var(--font-mono); color: var(--color-text-muted); }
.spacing-row__bar { background: var(--color-accent); height: 14px; border-radius: 2px; }
.spacing-row__value { color: var(--color-text-subtle); font-family: var(--font-mono); }

/* Radius showcase */
.radius-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    padding: var(--space-5);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}
.radius-tile__shape {
    width: 100%; height: 60px;
    background: var(--color-accent-soft);
    margin-bottom: var(--space-3);
}

/* Shadow showcase */
.shadow-tile {
    background: var(--color-surface);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-text-muted);
}

/* Responsive */
@media (max-width: 860px) {
    .docs { grid-template-columns: 1fr; }
    .docs__sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--color-border); }
    .docs__main { padding: var(--space-5); }
}

/* ==========================================================================
   7. PAGES
   --------------------------------------------------------------------------
   Page-specifieke layouts. Een page-scope componeert bestaande componenten
   tot de structuur van die pagina. Nieuwe reuse-waardige onderdelen worden
   gepromoveerd naar sectie 5 (Components).
   ========================================================================== */

/* --------------------------------------------------------------------------
   7.1 PRODUCT PAGE
   --------------------------------------------------------------------------
   Layout (desktop >=1025px):
     +--------------------------+------------------+
     |  GALLERY (1.3fr)         |  INFO (1fr)      |
     |  6 foto's, 1-2-1-2, 3:4  |  sticky v-cent.  |
     +--------------------------+------------------+
                  v
              RELATED — 4 kolommen

   Sticky info-kolom: align-items:start op de parent + position:sticky op de
   aside met min-height:100vh + flex-center -> de info-tekst blijft optisch
   verticaal gecentreerd tijdens scrollen.

   Responsive:
     <=1024px: een kolom; sticky valt weg.
     <=720px : gallerij wordt horizontale swipe (scroll-snap), dots eronder.

   Hergebruikt: .navbar, .breadcrumbs, .btn, .btn--secondary, .tag, .avatar.
   -------------------------------------------------------------------------- */
.product-page {
    padding: var(--space-6) 0 var(--space-9);
}

/* Page-scope override: product-pagina lijnt uit met de navbar (--container-xl),
   niet met de standaard --container-lg. Geeft de gallerij meer breedte zonder
   een nieuwe container-variant toe te voegen. */
.product-page > .container {
    max-width: var(--container-xl);
}

.product-page__layout {
    display: grid;
    grid-template-columns: 1.3fr minmax(380px, 1fr);
    gap: var(--space-7);
    align-items: start;       /* kritiek voor sticky info-kolom */
    margin-bottom: var(--space-9);
}

/* ----- Gallery (links, 1-2-1-2, 2:3) -----
   Twee niveaus:
     .product-page__gallery       = positioneer-anker (geen scroll/grid).
                                    Dots-overlay zit hierin maar BUITEN de track,
                                    zodat ze niet meescrollen met de swipe.
     .product-page__gallery-track = de eigenlijke layout: grid op desktop,
                                    horizontale scroll-snap op mobiel.
   -------------------------------------------------------------------------- */
.product-page__gallery {
    position: relative;
    margin: 0;
}
.product-page__gallery-track {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);      /* row en column */
    margin: 0;
}
.product-page__gallery-item {
    position: relative;
    aspect-ratio: var(--ratio-portrait);   /* alle product-images uniforme portrait */
    overflow: hidden;
    background: var(--color-surface-alt);
    margin: 0;                /* reset <figure> UA-margin */
}
.product-page__gallery-item--wide {
    grid-column: 1 / -1;
}
.product-page__gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.product-page__gallery-badge {
    position: absolute;
    top: var(--space-3);
    left: var(--space-3);
    z-index: 1;
}

/* ----- Info-kolom (rechts, sticky, vertical-center) -----
   top = --header-h zodat de kolom onder de sticky navbar plakt tijdens scroll.
   min-height excl. navbar-hoogte zodat content optisch gecentreerd blijft in
   het zichtbare deel van de viewport. */
.product-page__info {
    position: sticky;
    top: var(--header-h);
    align-self: start;
    min-height: calc(100vh - var(--header-h));
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-4);
    padding: var(--space-5) 0;
}

.product-page__price-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: 0;
}
.product-page__price {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-xl), 2.4vw, var(--text-2xl));
    color: var(--color-text);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
}
.product-page__shipping {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* Eyebrow / kicker — kleine accent-tekst direct boven de productnaam.
   Gebruikt op de afhaal-variant om "Alleen in de winkel" te benadrukken. */
.product-page__eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-accent);
    margin: 0;
}

.product-page__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    margin: 0;
}

.product-page__ctas {
    display: flex;
    gap: var(--space-3);
    margin-top: var(--space-2);
}
.product-page__ctas .btn {
    flex: 1;
}

.product-page__tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.product-page__tags li {
    margin: 0;
}

.product-page__description {
    font-size: var(--text-sm);
    line-height: var(--leading-loose);
    color: var(--color-text-muted);
    margin: 0;
    max-width: 56ch;
}
.product-page__description a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: var(--space-1);
    white-space: nowrap;
}
.product-page__description a:hover {
    color: var(--color-accent);
}

/* ----- Story-trigger (alleen product.html, page-scope) -----
   Instagram-style cirkel met productthumbnail + label. Opent een 9:16
   video-modal. Niet opgenomen in stylesheet.html — niet bedoeld als
   herbruikbaar design-system component. */
.product-page__story {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: inherit;
    font: inherit;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    align-self: flex-start;
    border-radius: var(--radius-full);
}
.product-page__story-ring {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: var(--radius-full);
    padding: 3px;
    background: conic-gradient(from 180deg at 50% 50%,
                               var(--color-accent),
                               #c5d99c,
                               var(--color-accent));
    flex: 0 0 60px;
    transition: transform var(--duration-base) var(--ease-out);
    box-sizing: border-box;
}
.product-page__story-ring img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid var(--color-bg);
    background: var(--color-bg);
    display: block;
    box-sizing: border-box;
}
/* Klein play-icoon in de hoek — maakt de "video"-intentie duidelijk
   zonder de thumbnail te bedekken. */
.product-page__story-ring::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    background:
        var(--color-text)
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M8 5v14l11-7z'/></svg>")
        center/12px no-repeat;
    box-shadow: 0 0 0 2px var(--color-bg);
}
.product-page__story:hover .product-page__story-ring,
.product-page__story:focus-visible .product-page__story-ring {
    transform: scale(1.04);
}
.product-page__story:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 4px;
}
.product-page__story-label {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-tight);
    color: var(--color-text);
    line-height: 1.2;
}

/* ----- Story-modal: 9:16 video player -----
   Dark frame zonder padding zodat video edge-to-edge gaat. Close-button
   absolute positioned met blur zodat 'ie leesbaar blijft op elk frame. */
.product-page__story-modal .modal {
    background: var(--color-text);
    padding: 0;
    width: min(90vw, 380px);
    max-width: 380px;
    aspect-ratio: 9 / 16;
    max-height: 90vh;
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.product-page__story-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: var(--color-text);
}
.product-page__story-close {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.18);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    border: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background var(--duration-base) var(--ease-out);
}
.product-page__story-close:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* ----- Locaties (Nozili-vestigingen) -----
   Lijst van 2 winkels. Elke <a> is een volledige klik-rij (hele rij is
   target). Avatar+tekst links, arrow-icon rechts — identiek op desktop en
   mobiel zodat de scan-pattern niet schift. Geen top-border; de scheiding
   vanaf de accordion erboven komt uit de info-kolom gap. */
.product-page__locations {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.product-page__locations > li { margin: 0; }
.product-page__location {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    text-decoration: none;
    color: inherit;
}
.product-page__location-info {
    flex: 1;
    min-width: 0;
}
.product-page__location-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--color-text);
    margin: 0;
    line-height: 1.2;
    transition: color var(--duration-fast) var(--ease-out);
}
.product-page__location-meta {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    margin: 2px 0 0;
    letter-spacing: 0.02em;
}
.product-page__location-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text);
    stroke: currentColor;
    fill: none;
    transition: transform var(--duration-base) var(--ease-out);
}
.product-page__location:hover .product-page__location-name { color: var(--color-accent); }
.product-page__location:hover .product-page__location-arrow { transform: translateX(4px); }

/* ----- Dots-indicator (alleen mobiel zichtbaar) ----- */
.product-page__dots {
    display: none;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) 0 0;
}
.product-page__dots span {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid var(--color-border-strong);
    display: block;
}
.product-page__dots .is-active {
    background: var(--color-text);
    border-color: var(--color-text);
}

/* ----- Related (4 kolommen, zelfde patroon als category-cards) ----- */
.product-page__related {
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-border);
}
.product-page__related-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.product-page__related-title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
    letter-spacing: var(--tracking-tight);
    margin: 0;
    color: var(--color-text);
}
.product-page__related-link {
    font-size: var(--text-sm);
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.product-page__related-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
}
.product-page__related-grid > li { margin: 0; }
.product-page__related-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-decoration: none;
    color: inherit;
    transition: transform var(--duration-base) var(--ease-out);
}
.product-page__related-item:hover {
    transform: translateY(-2px);
}
.product-page__related-image {
    aspect-ratio: var(--ratio-portrait);   /* gelijk aan gallery */
    background: var(--color-surface-alt);
    overflow: hidden;
    position: relative;
    margin-bottom: var(--space-2);
}
.product-page__related-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}
.product-page__related-item:hover .product-page__related-image img {
    transform: scale(1.04);
}
.product-page__related-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-base);
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
}
.product-page__related-price {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ----- Sticky-CTA balk (onderaan) -----
   Pop-up onderaan zodra de hoofd-CTA uit beeld scrollt. Verschijnt PAS nadat
   de gebruiker de CTA minstens 1x heeft gezien (state-tracking in JS) — anders
   schiet 'ie meteen omhoog op mobiel waar de CTA initieel onder de fold valt.

   - position:fixed; bottom:0 → onderaan viewport
   - Slide-in via transform + visibility-delay (zelfde patroon als mobile menu)
   - safe-area-inset-bottom voor iPhone home-indicator
   - inner-wrapper max-width var(--container-xl) → lijnt uit met navbar
   -------------------------------------------------------------------------- */
.product-page__sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
    padding: var(--space-3) var(--space-5);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    visibility: hidden;
    transition:
        transform var(--duration-base) var(--ease-out),
        visibility 0s linear var(--duration-base);
}
.product-page__sticky-cta.is-visible {
    transform: translateY(0);
    visibility: visible;
    transition:
        transform var(--duration-base) var(--ease-out),
        visibility 0s linear 0s;
}
.product-page__sticky-cta-inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.product-page__sticky-cta-product {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 auto;
    min-width: 0;          /* zodat ellipsis op de naam werkt */
}
.product-page__sticky-cta-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}
.product-page__sticky-cta-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.product-page__sticky-cta-name {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: var(--text-sm);
    color: var(--color-text);
    line-height: 1.2;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-page__sticky-cta-price {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    line-height: 1.2;
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Responsive — product page
   ========================================================================== */

/* <=1024px: een kolom, sticky valt weg, related-grid 2 kolommen. De related
   sectie verliest z'n border-top + grote padding-top omdat de info-kolom al
   open afsluit (geen 2-koloms layout meer die om een scheidingslijn vraagt).
   De h2 fungeert als natuurlijke sectie-marker. */
@media (max-width: 1024px) {
    .product-page__layout {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
    .product-page__info {
        position: static;
        min-height: auto;
        justify-content: flex-start;
        padding: 0;
    }
    .product-page__related {
        padding-top: 0;
        border-top: 0;
    }
    /* Op deze viewports verliest related z'n border-top. Het laatste
       accordion-item krijgt daarom (alleen in product-page context) wel een
       afsluitende border-bottom terug — zodat de info-kolom netjes gesloten
       wordt vóór de related sectie. */
    .product-page__info .accordion__item:last-child {
        border-bottom: 1px solid var(--color-border);
    }
    .product-page__related-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* <=767px: mobiel — gallerij full-bleed horizontale swipe, navbar transparent
   over de eerste foto, dots-overlay als floating pill. Breakpoint = 767px
   zodat hij align't met de navbar-component (data-theme-mobile threshold). */
@media (max-width: 767px) {
    .product-page {
        padding-top: 0;        /* navbar transparent ligt over de eerste foto */
    }
    /* Breadcrumbs: kleiner op mobiel en alleen de laatste 3 items tonen
       (eerste <li> verbergen + bijbehorende '/'-separator weghalen). */
    .product-page__info .breadcrumbs {
        font-size: var(--text-xs);
    }
    .product-page__info .breadcrumbs > li:first-child { display: none; }
    .product-page__info .breadcrumbs > li:nth-child(2)::before { content: none; }

    /* .product-page__gallery blijft anker (position:relative). Scrollen
       gebeurt in de inner track zodat de dots-overlay buiten de scroll-flow
       blijft en niet meeschuift. */
    .product-page__gallery {
        margin: 0 calc(-1 * var(--space-5));
    }
    .product-page__gallery-track {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        gap: 0;
        scrollbar-width: none;
        margin: 0;
        padding: 0;
    }
    .product-page__gallery-track::-webkit-scrollbar { display: none; }
    .product-page__gallery-item {
        flex: 0 0 100%;        /* exact 1 foto per scroll-pagina */
        scroll-snap-align: start;
    }
    .product-page__gallery-item--wide {
        grid-column: auto;     /* reset desktop spanning */
    }
    /* Badge schuift onder de transparant-navbar uit. --header-h dekt de
       navbar-hoogte; --space-2 geeft 8px ademruimte zodat 'ie niet tegen
       de onderrand van het logo plakt. */
    .product-page__gallery-badge {
        top: calc(var(--header-h) + var(--space-2));
    }
    /* Dots-overlay (Olijfmannen-stijl): floating witte pill onderaan de foto.
       Actieve dot is 14px breed (gestreken pil-vorm) i.p.v. cirkel. */
    .product-page__dots {
        display: flex;
        position: absolute;
        bottom: var(--space-3);
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
        background: rgba(255, 255, 255, 0.92);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-full);
        box-shadow: var(--shadow-sm);
        gap: var(--space-1);
        align-items: center;
    }
    .product-page__dots span {
        width: 6px;
        height: 6px;
        background: rgba(84, 72, 0, 0.25);
        border: none;
        transition:
            width var(--duration-base) var(--ease-out),
            background var(--duration-base) var(--ease-out);
    }
    .product-page__dots .is-active {
        width: 14px;
        height: 6px;
        background: var(--color-text);
        border-radius: var(--radius-sm);
    }

    .product-page__title {
        font-size: var(--text-2xl);
    }
    .product-page__ctas {
        flex-direction: column;
    }
    /* Full-bleed horizontal scroll carousel. Edge-padding via margin op
       first/last child (robuuster dan padding op flex-scroll-container, die
       door Safari soms niet bij scroll-start meegerekend wordt). Matcht de
       inset van .tile-grid op mobiel. */
    .product-page__related-grid {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: var(--space-5);
        gap: var(--space-3);
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--space-5));
        padding: 0;
        -webkit-overflow-scrolling: touch;
    }
    .product-page__related-grid::-webkit-scrollbar { display: none; }
    .product-page__related-grid > li {
        flex: 0 0 65%;
        scroll-snap-align: start;
    }
    .product-page__related-grid > li:first-child { margin-left: var(--space-5); }
    .product-page__related-grid > li:last-child  { margin-right: var(--space-5); }
}

/* --------------------------------------------------------------------------
   7.2 CATEGORY PAGE
   --------------------------------------------------------------------------
   Layout (>=721px):
     +-------------------------------------+
     |  .subnav (sub-categorie tabs)       |   onder navbar
     +-------------------------------------+
     |        HEADER (gecentreerd)         |
     |  groene uppercase titel             |
     |  2x intro-paragraaf (centered)      |
     +-------------------------------------+
     |  .filter-bar (sort + filters)       |   container-xl, met chips-row
     +-------------------------------------+
     |  .product-mosaic                    |   alternerend 3-rij / 2-rij
     +-------------------------------------+

   Pages-scope componeert subnav + .category-page__header + .filter-bar +
   mosaic. Header is centered binnen --container-lg; filter-bar en mosaic
   lijnen uit op --container-xl voor een breder grid-veld.

   Hergebruikt: .navbar, .subnav, .filter-bar, .product-mosaic.
   -------------------------------------------------------------------------- */
.category-page {
    padding-bottom: var(--space-9);
}

.category-page__header {
    max-width: var(--container-lg);
    margin: 0 auto;
    padding: var(--space-8) var(--space-5) var(--space-5);
    text-align: center;
}
.category-page__title {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-3xl), 6vw, var(--text-5xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0 0 var(--space-5);
}
.category-page__intro {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-sm);
    line-height: var(--leading-base);
    color: var(--color-text);
    margin: 0 auto var(--space-3);
    max-width: 60ch;
    text-wrap: balance;
}
.category-page__intro:last-child { margin-bottom: 0; }
.category-page__intro a {
    color: var(--color-text);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.category-page__intro a:hover { color: var(--color-accent); }

/* Pagination wrapper — centered onder de mosaic. Geen nieuw component,
   alleen page-scope positionering rond de bestaande .pagination (5.10). */
.category-page__pagination {
    display: flex;
    justify-content: center;
    padding-top: var(--space-8);
}

@media (max-width: 720px) {
    .category-page {
        padding-bottom: var(--space-7);
    }
    .category-page__header {
        padding: var(--space-6) var(--space-4) var(--space-4);
    }
    .category-page__pagination {
        padding-top: var(--space-7);
    }
}

/* --------------------------------------------------------------------------
   7.2 OVER ONS
   --------------------------------------------------------------------------
   Page-scope voor over-ons.html. Pakt de bestaande .category-page__header
   (hero-type met centered titel + intros) en plaatst die in een .section--dark
   wrapper. Daaronder een extra rich-text blok en de .timeline. Pagina-body
   krijgt --color-bg-alt zodat eventuele gaps (navbar-overlay) ook donker zijn
   en er geen cream doorprikt.
   -------------------------------------------------------------------------- */
/* Page-bg state-machine — geïnspireerd op Cameron Knight's "Change background
   colour with GSAP ScrollTrigger" pen (RwRebNY). Elke top-level sectie in
   over-ons.html draagt een data-bgcolor="dark|cream" attribuut. JS onderaan
   over-ons.html scant per frame welke sectie de viewport-midline het laatst
   gepasseerd is en spiegelt die waarde naar body.dataset.bgcolor. Onderstaande
   selectors mappen de semantische waardes terug op bestaande tokens; de
   transition op .over-ons-body verzorgt de GSAP-achtige crossfade.

   Default `.over-ons-body { background: var(--color-bg-alt) }` is fallback
   voor de microseconde vóór de eerste JS-update en voor no-JS. */
.over-ons-body {
    background: var(--color-bg-alt);
    transition: background-color var(--duration-slow) var(--ease-out);
}
.over-ons-body[data-bgcolor="dark"]  { background: var(--color-bg-alt); }
.over-ons-body[data-bgcolor="cream"] { background: var(--color-bg); }

/* Page-scoped surface-overrides: in over-ons.html zijn alle in-page
   secties transparent zodat alleen body.background (gestuurd door de
   data-bgcolor state-machine hierboven) de kleur bepaalt. Anders zou
   .split-row z'n eigen cream-bg painten en zou de body-bg crossfade
   onzichtbaar zijn — het Cameron Knight pen-effect is juist dat de héle
   page meekleurt tijdens de transitie.

   .site-footer behoudt z'n eigen surface — die ligt buiten de state-
   machine en moet altijd dark blijven, ook wanneer body op dat punt nog
   "cream" zou kunnen zijn. */
.over-ons-body .section--dark,
.over-ons-body .split-row {
    background: transparent;
}

/* Hero zit onder een transparante navbar (navbar overlay'd via negative
   margin) ⇒ padding-top = --header-h + adempauze, anders verdwijnt het
   eerste stukje titel onder de sticky navbar. */
.over-ons__hero {
    padding-top: calc(var(--header-h) + var(--space-7));
    padding-bottom: var(--space-6);
}

/* Extra rich-text blok onder de category-page-header. Erft cream-kleur uit
   .section--dark; we beperken alleen breedte + verticale ritme. */
.over-ons__body {
    max-width: var(--container-md);
    margin: var(--space-7) auto 0;
    padding: 0 var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
}
.over-ons__body p {
    font-family: var(--font-body);
    font-weight: var(--weight-regular);
    font-size: var(--text-md);
    line-height: var(--leading-base);
    color: var(--on-dark-text);
    margin: 0;
    max-width: 64ch;
    margin-left: auto;
    margin-right: auto;
    text-wrap: balance;
}

/* Sectie-kop boven de .timeline. Gebruikt dezelfde uppercase-stijl als
   .category-page__title maar in cream. */
.over-ons__timeline-heading {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    text-transform: uppercase;
    color: var(--on-dark-heading);
    margin: 0 auto var(--space-6);
    padding: 0 var(--space-5);
    max-width: var(--container-xl);
    text-align: center;
}

.over-ons__timeline {
    padding-top: var(--space-6);
    padding-bottom: var(--space-9);
}

@media (max-width: 720px) {
    .over-ons__hero {
        padding-top: calc(var(--header-h) + var(--space-5));
        padding-bottom: var(--space-6);
    }
    .over-ons__body {
        margin-top: var(--space-6);
        padding: 0 var(--space-4);
    }
    .over-ons__timeline {
        padding-top: var(--space-7);
        padding-bottom: var(--space-7);
    }
}

/* --------------------------------------------------------------------------
   7.3 WINKELS
   --------------------------------------------------------------------------
   Page-scope voor winkels.html. Comprimeert het ritme tussen secties van
   de standaard --space-9 (96px top+bottom → 192px stacked) naar --space-3
   (12px → 24px stacked). Past beter bij een pagina waar de split-rows en
   tile-grids samen één winkel-verhaal vertellen i.p.v. losse landings­
   secties. Raakt alleen elementen onder .page-winkels — basiscomponenten
   blijven ongewijzigd.
   -------------------------------------------------------------------------- */
.page-winkels .split-row,
.page-winkels .tile-grid,
.page-winkels .instagram-strip {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
/* Main wrapper bevat alleen de header; bottom-padding ruimt het gat tussen
   header en eerste split-row op zodat het in het strakkere ritme past. */
.page-winkels .category-page {
    padding-bottom: var(--space-3);
}

/* --------------------------------------------------------------------------
   7.4 ROUWEN
   --------------------------------------------------------------------------
   Page-scope voor rouwbloemen / zijde-rouwbloemen pagina's. Zelfde compacte
   ritme als .page-winkels — split-rows en tile-grids vertellen samen één
   verhaal (huur-collectie, sfeerbeelden, portfolio) i.p.v. losse landings­
   secties. Geen .instagram-strip override nodig: die sectie komt niet op
   de rouwen-categorie pagina's voor.
   -------------------------------------------------------------------------- */
.page-rouwen .split-row,
.page-rouwen .tile-grid {
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
}
.page-rouwen .category-page {
    padding-bottom: var(--space-3);
}