/* ==========================================================================
   Da's Brabants — design system
   --------------------------------------------------------------------------
   One stylesheet for every page. Page builders only add small page-specific
   files in /css/pages/. Component reference with copy-paste HTML:
   docs/frontend.md

    1. Tokens               12. Chips, swatches, sizes, quantity stepper
    2. Reset                13. Breadcrumbs
    3. Base & typography    14. Notices, error summary, toasts
    4. Layout               15. Tables, accordion, progress
    5. Brand motif (bont)   16. Hero, USPs, category tiles, page header
    6. Icons                17. Stamp, dialect, quote
    7. Header & navigation  18. Cards, steps, totals, line items, stats
    8. Footer               19. Empty state, spinner, skeleton
    9. Buttons & links      20. Prose (long-form text)
   10. Forms                21. Utilities
   11. Badges, tags, price  22. Motion, print
       Product card & grid
   ========================================================================== */


/* 1. Tokens
   ========================================================================== */

:root {
  /* Brand colours — uit het logo (drukbestanden/LEESMIJ): Brabants rood #DA0914, crème #F6F0E6. */
  --rood: #DA0914;          /* logo red: flag pattern, surfaces, headings (5.2:1 on white, 4.6:1 on crème) */
  --rood-actie: #DA0914;    /* buttons, links, prices, small red text (white on it 5.2:1) */
  --rood-hover: #B00710;    /* hover/active of actions */
  --rood-diep: #86070E;     /* footer, dark sections (white/crème text ≥ 9:1) */
  --rood-zacht: #FDEEEB;    /* light tint: image wells, notices (red text on it 4.6:1) */
  --creme: #F6F0E6;         /* logo crème: page background */
  --wit: #FFFFFF;           /* cards */
  --inkt: #221C1C;          /* body text (14.8:1 on crème) */
  --grijs: #655B5B;         /* muted text (5.8:1 on crème, 6.6:1 on white) */
  --lijn: #EADCD3;          /* decorative borders & dividers */
  --lijn-sterk: #8C7B75;    /* borders of form controls (3.6:1 on crème, 4.0:1 on white) */
  --goud: #F2B233;          /* accent: badges, stars, focus on dark — never text on white */
  --zwart: #1A1414;         /* heraldic black */
  --succes: #1F7A45;        /* success text/icons */
  --succes-zacht: #EAF6EF;
  --waarschuwing: #7A5A12;  /* warning/demo text (on --goud-zacht) */
  --goud-zacht: #FFF4DB;
  --info: #2B4C7E;
  --info-zacht: #EAF0F8;

  /* Signature motif: the red-white "Brabants bont" chequer of the flag. */
  --bont-gradient: repeating-conic-gradient(var(--rood) 0 25%, var(--wit) 0 50%);
  --bont: var(--bont-gradient) 0 0 / 24px 24px;

  /* Typography — system fonts only (no external requests). */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;                                   /* 13px */
  --fs-sm: 0.875rem;                                    /* 14px */
  --fs-base: 1rem;                                      /* 16px */
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17 → 20px */
  --fs-h4: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);  /* 17 → 19px */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);      /* 20 → 24px */
  --fs-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);    /* 26 → 40px */
  --fs-h1: clamp(2rem, 1.45rem + 2.6vw, 3.375rem);      /* 32 → 54px */
  --fs-display: clamp(2.5rem, 1.5rem + 4.8vw, 5rem);    /* 40 → 80px */

  --lh-tight: 1.08;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --tracking-tight: -0.02em;

  /* Spacing scale (4px base). */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-space: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* Shape. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05), 0 2px 8px rgb(134 7 14 / 0.05);
  --shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 8px 24px rgb(134 7 14 / 0.08);
  --shadow-lg: 0 2px 4px rgb(0 0 0 / 0.06), 0 18px 40px rgb(134 7 14 / 0.14);

  /* Layout. */
  --container: 1200px;
  --gutter: 16px;
  --header-h: 64px;
  --tap: 44px;              /* minimum touch target */

  /* Focus & motion. */
  --focus-ring: var(--inkt);
  --focus-width: 3px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur: 0.18s;

  /* Z-index scale. */
  --z-header: 50;
  --z-toast: 100;
  --z-skip: 200;

  color-scheme: light;
}

@media (min-width: 640px) {
  :root { --gutter: 24px; }
}

@media (min-width: 960px) {
  :root { --header-h: 76px; }
}


/* 2. Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  min-height: 100vh;
  min-height: 100dvh;
}

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

img {
  height: auto;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

p,
h1,
h2,
h3,
h4,
h5,
h6,
li,
dd,
dt {
  overflow-wrap: break-word;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}

fieldset {
  border: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

table {
  border-collapse: collapse;
}

[hidden] {
  display: none !important;
}

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}


/* 3. Base & typography
   ========================================================================== */

body {
  background: var(--creme);
  color: var(--inkt);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgb(218 9 20 / 0.15);
  overflow-x: clip; /* guard against accidental horizontal scroll (320px) */
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--inkt);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 900; letter-spacing: -0.03em; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 900; }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.2; }
h4, .h4 { font-size: var(--fs-h4); line-height: var(--lh-snug); letter-spacing: -0.01em; }

.display {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.035em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--rood-actie);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  transition: color var(--dur) var(--ease), text-decoration-color var(--dur) var(--ease);
}

a:hover {
  color: var(--rood-hover);
}

strong,
b {
  font-weight: 750;
}

small {
  font-size: var(--fs-sm);
}

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

::selection {
  background: var(--rood);
  color: var(--wit);
}

/* Focus: always visible for keyboard users, never for mouse clicks. */
:focus {
  outline: none;
}

:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* Programmatic focus targets (main, headings, error summary) need no ring. */
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

main:focus {
  outline: none;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rood-actie);
}

/* Tiny chequer square before the eyebrow text. */
.eyebrow::before {
  content: "";
  inline-size: 0.95em;
  block-size: 0.95em;
  flex: none;
  border-radius: 2px;
  background: var(--bont-gradient) 0 0 / 0.95em 0.95em;
  box-shadow: 0 0 0 1px var(--rood);
}

.eyebrow--plain::before { display: none; }

.lead {
  font-size: var(--fs-lg);
  line-height: 1.55;
  color: var(--grijs);
  max-width: 60ch;
}

.muted { color: var(--grijs); }
.small { font-size: var(--fs-sm); }
.xsmall { font-size: var(--fs-xs); }


/* 4. Layout
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow { --container: 760px; }
.container--wide { --container: 1320px; }

.section {
  padding-block: var(--section-space);
}

.section--tight { padding-block: calc(var(--section-space) * 0.6); }
.section--flush-top { padding-top: 0; }
.section--wit { background: var(--wit); }
.section--zacht { background: var(--rood-zacht); }

.section--rood {
  background: var(--rood);
  color: var(--wit);
}

.section--diep {
  background: var(--rood-diep);
  color: var(--wit);
}

/* Contexts: text/focus colours on red and dark backgrounds. */
.on-rood,
.section--rood,
.hero {
  --focus-ring: var(--wit);
  color: var(--wit);
}

.on-dark,
.section--diep {
  --focus-ring: var(--goud);
  color: var(--wit);
}

:is(.on-rood, .section--rood, .on-dark, .section--diep) :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) {
  color: inherit;
}

:is(.on-rood, .section--rood, .on-dark, .section--diep, .hero) a:not(.btn) {
  color: inherit;
}

:is(.on-rood, .section--rood, .on-dark, .section--diep) :is(.lead, .muted) {
  color: inherit;
}

:is(.on-rood, .section--rood, .on-dark, .section--diep) .eyebrow {
  color: inherit;
}

/* Section heading row: title left, "alles bekijken" link right. */
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
  margin-bottom: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}

.section-head > :first-child {
  display: grid;
  gap: var(--space-2);
}

.section-head p:not(.eyebrow) {
  color: var(--grijs);
  max-width: 55ch;
}

.section-title {
  font-size: var(--fs-h2);
}

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

/* Horizontal group that wraps. */
.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap, var(--space-3));
}

.cluster--between { justify-content: space-between; }
.cluster--center { justify-content: center; }

/* Responsive grids. Mobile = 1 column unless stated. */
.grid {
  display: grid;
  gap: var(--grid-gap, clamp(1rem, 0.75rem + 1vw, 1.5rem));
}

.grid--auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--grid-min, 240px)), 1fr)); }

@media (min-width: 640px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Two columns from 960px (e.g. product page, checkout). */
.split {
  display: grid;
  gap: clamp(1.5rem, 1rem + 3vw, 4rem);
  align-items: start;
}

@media (min-width: 960px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--wide-left { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .split--wide-right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}

.sticky {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
}


/* 5. Brand motif — "Brabants bont"
   ========================================================================== */

/* Full chequer surface. */
.bont {
  background: var(--bont);
}

/* Thin chequer band (above the footer). Two rows of 6px squares. */
.bont-rand {
  display: block;
  block-size: 12px;
  background: var(--bont-gradient) 0 0 / 12px 12px;
}

.bont-rand--dik {
  block-size: 24px;
  background-size: 24px 24px;
}


/* 6. Icons — CSS mask icons; colour = currentColor.
   <span class="icon icon--truck" aria-hidden="true"></span>
   ========================================================================== */

.icon {
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  vertical-align: -0.25em;
  background-color: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.icon--sm { inline-size: 1em; block-size: 1em; vertical-align: -0.125em; }
.icon--lg { inline-size: 1.75em; block-size: 1.75em; }
.icon--xl { inline-size: 2.5em; block-size: 2.5em; }

.icon--bag { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 12.1a1 1 0 0 1-1 .9H7.2a1 1 0 0 1-1-.9z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E"); }
.icon--menu { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.icon--close { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.icon--search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); }
.icon--arrow-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.icon--arrow-left { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.icon--chevron-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.icon--chevron-right { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E"); }
.icon--plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.icon--minus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E"); }
.icon--check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); }
.icon--check-circle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E"); }
.icon--info { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E"); }
.icon--alert { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 2.6 18a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4M12 17v.5'/%3E%3C/svg%3E"); }
.icon--truck { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h12v10H2zM14 9h4l3 3.5V15h-7z'/%3E%3Ccircle cx='6.5' cy='17.8' r='2'/%3E%3Ccircle cx='17.5' cy='17.8' r='2'/%3E%3C/svg%3E"); }
.icon--clock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
.icon--return { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7L4 8.5'/%3E%3Cpath d='M4 4v4.5h4.5'/%3E%3C/svg%3E"); }
.icon--refresh { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.4-5.7L20 8.5'/%3E%3Cpath d='M20 4v4.5h-4.5'/%3E%3C/svg%3E"); }
.icon--heart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-7.5-10.2A4.3 4.3 0 0 1 12 7.2a4.3 4.3 0 0 1 7.5 2.6C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E"); }
.icon--mail { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3.5 7 8.5 6 8.5-6'/%3E%3C/svg%3E"); }
.icon--phone { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6.5' y='2.5' width='11' height='19' rx='2.5'/%3E%3Cpath d='M10.5 18h3'/%3E%3C/svg%3E"); }
.icon--map-pin { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.1-7-11.2a7 7 0 0 1 14 0C19 14.9 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.8' r='2.5'/%3E%3C/svg%3E"); }
.icon--star { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='black' d='m12 3 2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L12 16.8l-5.4 2.9 1.1-6.1-4.5-4.2 6.1-.8z'/%3E%3C/svg%3E"); }
.icon--leaf { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8.3 5.6-14 15-14 0 9.4-5.7 15-14 15z'/%3E%3Cpath d='M5 19c3-4 6-6.5 9.5-8.5'/%3E%3C/svg%3E"); }
.icon--gift { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12v8h14v-8M12 8v12'/%3E%3Cpath d='M12 8S10.5 3.5 8 4.2C6 4.8 6.8 8 12 8zM12 8s1.5-4.5 4-3.8C18 4.8 17.2 8 12 8z'/%3E%3C/svg%3E"); }
.icon--tag { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.2V4.5a1 1 0 0 1 1-1h7.7l8.3 8.3a1.5 1.5 0 0 1 0 2.1l-6.1 6.1a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.3'/%3E%3C/svg%3E"); }
.icon--trash { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M10 11v6M14 11v6M6 7l1 12.1a1 1 0 0 0 1 .9h8a1 1 0 0 0 1-.9L18 7M9 7V4.5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1V7'/%3E%3C/svg%3E"); }
.icon--package { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 8.5 4.5v9L12 21l-8.5-4.5v-9z'/%3E%3Cpath d='m3.5 7.5 8.5 4.5 8.5-4.5M12 12v9M7.8 5.2l8.5 4.6'/%3E%3C/svg%3E"); }
.icon--smile { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 14.5s1.5 2 4 2 4-2 4-2'/%3E%3Cpath d='M9 9.5v.5M15 9.5v.5'/%3E%3C/svg%3E"); }
.icon--lock { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V7.5a4 4 0 0 1 8 0V11'/%3E%3C/svg%3E"); }
.icon--card { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5' width='19' height='14' rx='2'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E"); }
.icon--chat { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 11.5a8 8 0 0 1-11.7 7.1L3.5 20.5l1.8-5A8 8 0 1 1 20.5 11.5z'/%3E%3C/svg%3E"); }
.icon--ruler { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='8' width='19' height='8' rx='1.5'/%3E%3Cpath d='M6.5 8v3M10 8v4M13.5 8v3M17 8v4'/%3E%3C/svg%3E"); }
.icon--copy { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='11.5' height='11.5' rx='2'/%3E%3Cpath d='M15 9V5a1.5 1.5 0 0 0-1.5-1.5h-8A1.5 1.5 0 0 0 4 5v8A1.5 1.5 0 0 0 5.5 14.5H9'/%3E%3C/svg%3E"); }
.icon--mug { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h12v6.5a5 5 0 0 1-5 5H9a5 5 0 0 1-5-5z'/%3E%3Cpath d='M16 10h1.5a2.5 2.5 0 0 1 0 5H16M8 2.5v2.5M12 2.5v2.5'/%3E%3C/svg%3E"); }
.icon--hoodie { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5a3 3 0 0 1 6 0l4 2.5 2 12.5-3 .5-1-7v7.5H7V13l-1 7-3-.5 2-12.5z'/%3E%3Cpath d='M9 4.5c0 3 6 3 6 0M9.5 16h5'/%3E%3C/svg%3E"); }
.icon--sparkle { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath fill='black' d='M12 2.5c.6 4.8 2.7 6.9 7.5 7.5-4.8.6-6.9 2.7-7.5 7.5-.6-4.8-2.7-6.9-7.5-7.5 4.8-.6 6.9-2.7 7.5-7.5z'/%3E%3Cpath d='M19 16.5v4M17 18.5h4'/%3E%3C/svg%3E"); }
.icon--home { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 11 8.5-7 8.5 7'/%3E%3Cpath d='M5.5 9.5V20h13V9.5'/%3E%3Cpath d='M10 20v-5.5h4V20'/%3E%3C/svg%3E"); }
.icon--external { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9'/%3E%3Cpath d='M18 14v4.5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 4 18.5v-11A1.5 1.5 0 0 1 5.5 6H10'/%3E%3C/svg%3E"); }
.icon--eye { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.icon--book { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4.5A1.5 1.5 0 0 1 5.5 3H20v18H5.5A1.5 1.5 0 0 1 4 19.5z'/%3E%3Cpath d='M4 17.5A1.5 1.5 0 0 1 5.5 16H20M8 7h8'/%3E%3C/svg%3E"); }


/* 7. Header & navigation
   ========================================================================== */

.skip-link {
  position: absolute;
  z-index: var(--z-skip);
  top: var(--space-2);
  left: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--inkt);
  color: var(--wit);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--dur) var(--ease);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--wit);
  outline: var(--focus-width) solid var(--goud);
  outline-offset: 2px;
}

/* Announcement bar (scrolls away; only the main bar is sticky). */
.announcement {
  background: var(--rood-diep);
  color: var(--wit);
  font-size: var(--fs-xs);
  font-weight: 650;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

.announcement__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.25rem 0.9rem;
  padding-block: 0.5rem;
  text-align: center;
}

.announcement__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}

.announcement__item .icon {
  color: var(--goud);
}

.announcement__sep {
  display: none;
  color: var(--goud);
}

@media (min-width: 640px) {
  .announcement { font-size: var(--fs-sm); }
  .announcement__sep { display: inline; }
}

/* Sticky main bar. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: rgb(255 255 255 / 0.96);
  border-bottom: 1px solid var(--lijn);
  transition: box-shadow var(--dur) var(--ease);
}

@supports (backdrop-filter: blur(8px)) {
  .site-header {
    background: rgb(255 255 255 / 0.88);
    backdrop-filter: saturate(1.4) blur(12px);
  }
}

.site-header.is-scrolled {
  box-shadow: 0 6px 20px rgb(134 7 14 / 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--header-h);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap); /* 44px hit area around the 28–36px wordmark */
  margin-inline-end: auto;
  border-radius: var(--radius-sm);
  flex: none;
}

/* Phones/tablets: compact wordmark (449 × 64), sized by height so it leaves
   room for the menu and cart buttons. From 960px the <picture> swaps in the
   lockup with subtitle "Echt Brabants spul" (449 × 100). */
.site-logo picture {
  display: block;
  line-height: 0;
}

.site-logo img {
  inline-size: auto;
  block-size: 28px;
}

@media (min-width: 400px) {
  .site-logo img { block-size: 30px; }
}

@media (min-width: 640px) {
  .site-logo img { block-size: 36px; }
}

@media (min-width: 960px) {
  .site-logo img { block-size: 58px; }
}

@media (min-width: 1200px) {
  .site-logo img { block-size: 66px; }
}

/* Hamburger (mobile). */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--tap);
  min-inline-size: var(--tap);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--inkt);
  font-weight: 700;
  font-size: var(--fs-sm);
}

.nav-toggle:hover {
  background: var(--rood-zacht);
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  inline-size: 20px;
  block-size: 2.5px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -6.5px; }
.nav-toggle__bars::after { top: 6.5px; }

.nav-toggle[aria-expanded="true"] .nav-toggle__bars { background-color: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: translateY(6.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 379px) {
  .nav-toggle__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Primary navigation: dropdown panel on mobile, inline row on desktop. */
.site-nav {
  display: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  max-block-size: calc(100dvh - var(--header-h));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
  box-shadow: 0 18px 30px rgb(134 7 14 / 0.12);
}

.site-header[data-nav-open] .site-nav {
  display: block;
  animation: bb-drop 0.2s var(--ease);
}

.site-nav__list {
  list-style: none;
  padding: var(--space-2) var(--gutter) var(--space-4);
  margin: 0;
}

.site-nav__list li + li {
  border-top: 1px solid var(--lijn);
}

.site-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 52px;
  padding-inline: var(--space-2);
  color: var(--inkt);
  font-size: 1.0625rem;
  font-weight: 750;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.site-nav__link::after {
  content: "";
  inline-size: 1.1em;
  block-size: 1.1em;
  background: currentColor;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
  opacity: 0.45;
}

.site-nav__link:hover,
.site-nav__link[aria-current] {
  color: var(--rood-actie);
}

.site-nav__link[aria-current]::before {
  content: "";
  inline-size: 10px;
  block-size: 10px;
  margin-inline-end: var(--space-2);
  border-radius: 2px;
  background: var(--bont-gradient) 0 0 / 10px 10px;
  box-shadow: 0 0 0 1px var(--rood);
  order: -1;
}

.site-nav__link[aria-current] {
  justify-content: flex-start;
}

.site-nav__link[aria-current]::after {
  margin-inline-start: auto;
}

@media (min-width: 960px) {
  .nav-toggle {
    display: none;
  }

  .site-nav,
  .site-header[data-nav-open] .site-nav {
    display: block;
    position: static;
    max-block-size: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
    animation: none;
    margin-inline: auto;
  }

  .site-nav__list {
    display: flex;
    align-items: center;
    gap: 0.125rem;
    padding: 0;
  }

  .site-nav__list li + li {
    border: 0;
  }

  .site-nav__extra {
    display: none;
  }

  .site-nav__link,
  .site-nav__link[aria-current] {
    position: relative;
    justify-content: center;
    min-block-size: var(--tap);
    padding-inline: 0.8rem;
    font-size: 0.9688rem;
    font-weight: 700;
  }

  .site-nav__link::after {
    display: none;
  }

  /* Underline bar that grows on hover; chequered when current. */
  .site-nav__link::before,
  .site-nav__link[aria-current]::before {
    content: "";
    display: block;
    position: absolute;
    left: 0.8rem;
    right: 0.8rem;
    bottom: 4px;
    block-size: 3px;
    margin: 0;
    border-radius: 2px;
    background: var(--rood-actie);
    box-shadow: none;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s var(--ease);
  }

  .site-nav__link:hover::before {
    transform: scaleX(1);
  }

  .site-nav__link[aria-current]::before {
    block-size: 6px;
    bottom: 2px;
    background: var(--bont-gradient) 0 0 / 6px 6px;
    transform: scaleX(1);
  }
}

/* Cart link with count badge: round 44px button on mobile, pill with label on wide screens. */
.cart-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  inline-size: var(--tap);
  block-size: var(--tap);
  border-radius: var(--radius-pill);
  background: var(--rood-zacht);
  color: var(--rood-actie);
  font-weight: 800;
  font-size: var(--fs-sm);
  text-decoration: none;
  flex: none;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

@media (max-width: 359px) {
  .site-logo img { block-size: 24px; }
}

.cart-link:hover {
  background: var(--rood-actie);
  color: var(--wit);
}

.cart-link .icon {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}

.cart-link__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cart-link__count {
  position: absolute;
  top: -4px;
  right: -6px;
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.375rem;
  block-size: 1.375rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--rood-actie);
  color: var(--wit);
  box-shadow: 0 0 0 2px var(--wit);
  font-size: 0.75rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 1080px) {
  .cart-link {
    inline-size: auto;
    padding-inline: 1rem 0.75rem;
  }

  .cart-link__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }

  .cart-link__count {
    position: static;
    min-inline-size: 1.5rem;
    block-size: 1.5rem;
    box-shadow: none;
    font-size: 0.8125rem;
  }
}

.cart-link:hover .cart-link__count {
  background: var(--wit);
  color: var(--rood-actie);
}

.cart-link__count[data-count="0"] {
  display: none;
}

.cart-link__count.is-bumped {
  animation: bb-bump 0.45s var(--ease-bounce);
}


/* 8. Footer
   ========================================================================== */

.site-footer {
  --focus-ring: var(--goud);
  background: var(--rood-diep);
  color: rgb(255 255 255 / 0.88);
  font-size: 0.9375rem;
  -webkit-font-smoothing: antialiased;
}

.site-footer a {
  color: var(--wit);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--goud);
  text-decoration: underline;
}

.site-footer__grid {
  display: grid;
  gap: var(--space-6) var(--space-5);
  padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--space-6);
}

@media (min-width: 960px) {
  .site-footer__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.6fr) minmax(0, 1.15fr);
  }
}

.site-footer__logo {
  display: inline-block;
  border-radius: var(--radius-sm);
}

/* A definite width (not a % of the inline-block link) so the lazy logo keeps its
   space before it has loaded, instead of collapsing to 0×0 and shifting the footer. */
.site-footer__logo img {
  inline-size: 320px;
  max-inline-size: 100%;
  block-size: auto;
}

.site-footer__tagline {
  margin-top: var(--space-4);
  max-width: 34ch;
}

.site-footer__signoff {
  margin-top: var(--space-5);
  /* Sized to fit the brand column (~216px at 960px) so "Houdoe!" stays on one line. */
  font-size: clamp(2.75rem, 0.75rem + 4vw, 4.5rem);
  white-space: nowrap;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--wit);
}

.site-footer__signoff span {
  color: var(--goud);
}

.site-footer__nav {
  display: grid;
  gap: var(--space-6) var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
}

.site-footer__title {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.08em; /* "KLANTENSERVICE" must fit the ~131px column at 960px */
  text-transform: uppercase;
  color: var(--goud);
}

.site-footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 0.125rem;
}

.site-footer__list a {
  display: inline-flex;
  align-items: center;
  min-block-size: 36px;
}

@media (pointer: coarse) {
  .site-footer__list a { min-block-size: var(--tap); }
}

.site-footer address {
  font-style: normal;
  display: grid;
  gap: var(--space-2);
}

.site-footer address > * {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  overflow-wrap: anywhere;
}

.site-footer address .icon {
  margin-top: 0.15em;
  color: var(--goud);
}

.site-footer__meta {
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.78);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.16);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 0.78);
}

/* Payment method text badges. */
.pay-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
}

.pay-badge {
  display: inline-flex;
  align-items: center;
  min-block-size: 30px;
  padding: 0 0.7rem;
  border-radius: 6px;
  background: var(--wit);
  color: var(--inkt);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.2);
}


/* 9. Buttons & links
   ========================================================================== */

.btn {
  --btn-bg: var(--rood-actie);
  --btn-fg: var(--wit);
  --btn-border: var(--btn-bg);
  --btn-bg-hover: var(--rood-hover);
  --btn-fg-hover: var(--btn-fg);
  --btn-border-hover: var(--btn-bg-hover);
  --btn-shadow: 0 1px 0 rgb(255 255 255 / 0.22) inset, 0 8px 18px -8px rgb(218 9 20 / 0.6);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-block-size: 48px;
  padding: 0.7rem 1.5rem;
  border: 2px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 750;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-wrap: balance;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.btn:hover {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  color: var(--btn-fg-hover);
}

.btn:active:not(:disabled, [aria-disabled="true"]) {
  transform: translateY(1px) scale(0.99);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.btn[aria-busy="true"] {
  opacity: 0.85;
  cursor: progress;
}

.btn .icon {
  inline-size: 1.2em;
  block-size: 1.2em;
}

.btn--primary { /* = default .btn look; explicit class for readability */ }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--rood-actie);
  --btn-border: var(--rood-actie);
  --btn-bg-hover: var(--rood-zacht);
  --btn-fg-hover: var(--rood-hover);
  --btn-border-hover: var(--rood-hover);
  --btn-shadow: none;
}

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--inkt);
  --btn-border: transparent;
  --btn-bg-hover: rgb(34 28 28 / 0.06);
  --btn-fg-hover: var(--inkt);
  --btn-border-hover: transparent;
  --btn-shadow: none;
}

.btn--dark {
  --btn-bg: var(--inkt);
  --btn-fg: var(--wit);
  --btn-bg-hover: #000;
  --btn-shadow: 0 8px 18px -10px rgb(0 0 0 / 0.6);
}

/* For red/dark backgrounds. */
.btn--light {
  --btn-bg: var(--wit);
  --btn-fg: var(--rood-actie);
  --btn-bg-hover: var(--creme);
  --btn-fg-hover: var(--rood-hover);
  --btn-shadow: 0 10px 22px -10px rgb(60 0 8 / 0.55);
}

.btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--wit);
  --btn-border: var(--wit);
  --btn-bg-hover: rgb(255 255 255 / 0.14);
  --btn-border-hover: var(--wit);
  --btn-shadow: none;
}

/* Looks like a text link, behaves like a button. */
.btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--rood-actie);
  --btn-border: transparent;
  --btn-bg-hover: transparent;
  --btn-fg-hover: var(--rood-hover);
  --btn-border-hover: transparent;
  --btn-shadow: none;
  min-block-size: var(--tap);
  padding-inline: 0.25rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

.btn--sm {
  min-block-size: var(--tap);
  padding: 0.45rem 1rem;
  font-size: var(--fs-sm);
}

.btn--lg {
  min-block-size: 56px;
  padding: 0.85rem 1.9rem;
  font-size: 1.1875rem; /* 19px bold = WCAG "large text" */
}

.btn--block {
  display: flex;
  inline-size: 100%;
}

/* Square/round icon-only button: add a visually-hidden label or aria-label. */
.btn--icon {
  min-inline-size: var(--tap);
  min-block-size: var(--tap);
  padding: 0;
  inline-size: var(--tap);
}

.btn__spinner,
.btn .spinner {
  inline-size: 1.05em;
  block-size: 1.05em;
}

/* Text link with arrow, e.g. "Alles bekijken →". */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-block-size: var(--tap);
  font-weight: 750;
  color: var(--rood-actie);
  text-decoration: none;
}

.link-arrow .icon {
  transition: transform var(--dur) var(--ease);
}

.link-arrow:hover {
  text-decoration: underline;
}

.link-arrow:hover .icon {
  transform: translateX(3px);
}

.link-muted {
  color: var(--grijs);
}

.link-muted:hover {
  color: var(--rood-actie);
}


/* 10. Forms
   ========================================================================== */

.form {
  display: grid;
  gap: var(--space-5);
}

.field {
  display: grid;
  gap: 0.4rem;
  align-content: start;
}

/* Side-by-side fields from 480px. Set --cols inline or use modifiers. */
.form-row {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 480px) {
  .form-row { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
  .form-row--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .form-row--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}

/* Numbered form section (checkout): <fieldset class="form-section"> */
.form-section {
  display: grid;
  gap: var(--space-4);
}

.form-section__title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-1);
  font-size: var(--fs-h3);
  font-weight: 850;
  letter-spacing: var(--tracking-tight);
  line-height: 1.2;
}

.step-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--rood-actie);
  color: var(--wit);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0;
}

.label {
  display: block;
  font-weight: 700;
  font-size: 0.9688rem;
  line-height: 1.35;
  color: var(--inkt);
}

.label__optional {
  font-weight: 500;
  color: var(--grijs);
}

.hint {
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--grijs);
}

/* Text inputs, selects, textareas (class or inside .field). */
:where(.input, .select, .textarea),
:where(.field) :where(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="range"], [type="color"], [type="file"]), select, textarea) {
  display: block;
  inline-size: 100%;
  min-block-size: 48px;
  padding: 0.7rem 0.9rem;
  border: 2px solid var(--lijn-sterk);
  border-radius: var(--radius-md);
  background: var(--wit);
  color: var(--inkt);
  font-size: 1rem; /* ≥16px prevents zoom on iOS */
  line-height: 1.35;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

:where(.input, .select, .textarea):hover,
:where(.field) :where(input, select, textarea):hover {
  border-color: var(--grijs);
}

:where(.input, .select, .textarea):focus,
:where(.field) :where(input, select, textarea):focus {
  border-color: var(--rood-actie);
  box-shadow: 0 0 0 4px rgb(218 9 20 / 0.16);
  outline: none;
}

:where(.input, .select, .textarea):focus-visible,
:where(.field) :where(input, select, textarea):focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

::placeholder {
  color: #8A7F7B;
  opacity: 1;
}

:where(.input, .select, .textarea)[aria-invalid="true"],
:where(.field) :where(input, select, textarea)[aria-invalid="true"] {
  border-color: var(--rood-actie);
  background: #FFF7F8;
}

:where(.input, .select, .textarea):disabled,
:where(.field) :where(input, select, textarea):disabled {
  background: #F5EEE9;
  color: var(--grijs);
  cursor: not-allowed;
}

.textarea,
.field textarea {
  min-block-size: 7.5rem;
  resize: vertical;
}

.select,
.field select {
  appearance: none;
  padding-inline-end: 2.75rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221C1C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.15rem;
  cursor: pointer;
}

.input--sm,
.select--sm {
  min-block-size: var(--tap);
  padding-block: 0.5rem;
}

/* Search box with leading icon: <div class="search"><span class="icon icon--search"></span><input class="input"></div> */
.search {
  position: relative;
}

.search > .icon {
  position: absolute;
  inset-inline-start: 0.95rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--grijs);
  pointer-events: none;
}

.search > .input,
.search > input {
  padding-inline-start: 2.75rem;
}

input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Input + button in one row (newsletter, search), wraps on narrow screens. */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.inline-form > :is(.input, .search, input) {
  flex: 1 1 14rem;
  min-inline-size: 0;
}

.inline-form > .btn {
  flex: 1 0 auto;
}

@media (min-width: 480px) {
  .inline-form > .btn { flex-grow: 0; }
}

/* Inline field error (link it with aria-describedby). */
.field-error {
  display: flex;
  align-items: flex-start;
  gap: 0.4em;
  color: var(--rood-actie);
  font-size: var(--fs-sm);
  font-weight: 650;
  line-height: 1.4;
}

.field-error::before {
  content: "";
  flex: none;
  inline-size: 1.15em;
  block-size: 1.15em;
  margin-top: 0.05em;
  background: currentColor;
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}

.field-error:empty {
  display: none;
}

/* Error summary at top of a form: focus it after a failed submit. */
.error-summary {
  padding: var(--space-4) var(--space-5);
  border: 3px solid var(--rood-actie);
  border-radius: var(--radius-md);
  background: var(--wit);
}

.error-summary:focus-visible,
.error-summary:focus {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 3px;
}

.error-summary__title {
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-h4);
  font-weight: 800;
  color: var(--rood-actie);
}

.error-summary__title::before {
  content: "";
  flex: none;
  inline-size: 1.3em;
  block-size: 1.3em;
  background: currentColor;
  -webkit-mask: var(--icon-alert) center / contain no-repeat;
  mask: var(--icon-alert) center / contain no-repeat;
}

.error-summary__list {
  margin-top: var(--space-2);
  padding-inline-start: 1.25rem;
  display: grid;
  gap: 0.25rem;
}

.error-summary__list a {
  font-weight: 650;
}

/* Custom checkbox & radio (native inputs, restyled). */
.check,
.radio {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-block-size: var(--tap);
  padding-block: 0.6rem;
  line-height: 1.45;
  cursor: pointer;
}

.check input,
.radio input,
.radio-card__input {
  appearance: none;
  flex: none;
  inline-size: 1.375rem;
  block-size: 1.375rem;
  margin: 0;
  margin-top: 0.05rem;
  border: 2px solid var(--lijn-sterk);
  background: var(--wit) center / 80% no-repeat;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.check input {
  border-radius: 6px;
}

.radio input,
.radio-card__input {
  border-radius: 50%;
}

.check input:hover,
.radio input:hover,
.radio-card__input:hover {
  border-color: var(--rood-actie);
}

.check input:checked {
  border-color: var(--rood-actie);
  background-color: var(--rood-actie);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.radio input:checked,
.radio-card__input:checked {
  border-color: var(--rood-actie);
  background: var(--rood-actie);
  box-shadow: inset 0 0 0 4px var(--wit);
}

.check input:focus-visible,
.radio input:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.check input[aria-invalid="true"] {
  border-color: var(--rood-actie);
}

/* Radio cards (payment methods, shipping options). */
.radio-cards {
  display: grid;
  gap: var(--space-3);
}

@media (min-width: 480px) {
  .radio-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.radio-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-block-size: 60px;
  padding: 0.85rem 1rem;
  border: 2px solid var(--lijn);
  border-radius: var(--radius-md);
  background: var(--wit);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.radio-card:hover {
  border-color: var(--lijn-sterk);
}

.radio-card:has(.radio-card__input:checked) {
  border-color: var(--rood-actie);
  background: var(--rood-zacht);
  box-shadow: 0 6px 16px -10px rgb(218 9 20 / 0.6);
}

.radio-card:has(.radio-card__input:focus-visible) {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.radio-card__body {
  display: grid;
  gap: 0.1rem;
  flex: 1;
  min-inline-size: 0;
}

.radio-card__title {
  font-weight: 750;
  line-height: 1.3;
}

.radio-card__desc {
  font-size: var(--fs-sm);
  color: var(--grijs);
  line-height: 1.4;
}

.radio-card__aside {
  flex: none;
  font-weight: 750;
  font-size: var(--fs-sm);
}

/* Short text-mark for a payment method inside a radio card. */
.pay-mark {
  display: inline-grid;
  place-items: center;
  flex: none;
  min-inline-size: 3.25rem;
  block-size: 2rem;
  padding: 0 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--lijn);
  background: var(--wit);
  color: var(--inkt);
  font-size: 0.75rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}


/* 11. Badges, tags, price
   ========================================================================== */

/* Sticker badge: slightly rotated, like a sticker slapped on the product. */
.badge {
  --badge-bg: var(--goud);
  --badge-fg: var(--inkt);
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3rem 0.7rem 0.32rem;
  border-radius: 7px;
  background: var(--badge-bg);
  color: var(--badge-fg);
  font-size: 0.75rem;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(-3deg);
  box-shadow: 0 0 0 2.5px var(--wit), 0 4px 10px -2px rgb(60 0 8 / 0.28);
}

.badge--bestseller {
  --badge-bg: var(--goud);
  --badge-fg: var(--inkt);
}

.badge--nieuw {
  --badge-bg: var(--rood-actie);
  --badge-fg: var(--wit);
}

.badge--sale,
.badge--korting {
  --badge-bg: var(--inkt);
  --badge-fg: var(--wit);
}

.badge--straight { transform: none; }
.badge--lg { font-size: 0.875rem; padding: 0.4rem 0.9rem; }

/* Neutral status/label pill (admin order status, "Op voorraad"). */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.2rem 0.65rem;
  border-radius: var(--radius-pill);
  background: #F3EAE4;
  color: var(--inkt);
  font-size: var(--fs-xs);
  font-weight: 750;
  line-height: 1.4;
  white-space: nowrap;
}

.tag--success { background: var(--succes-zacht); color: var(--succes); }
.tag--warning { background: var(--goud-zacht); color: var(--waarschuwing); }
.tag--danger { background: var(--rood-zacht); color: var(--rood-actie); }
.tag--info { background: var(--info-zacht); color: var(--info); }
.tag--dark { background: var(--inkt); color: var(--wit); }

.tag::before {
  content: "";
  inline-size: 0.45rem;
  block-size: 0.45rem;
  border-radius: 50%;
  background: currentColor;
}

.tag--plain::before { display: none; }

.price {
  font-weight: 800;
  color: var(--rood-actie);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.price--lg {
  font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
}

.price--old {
  font-weight: 600;
  color: var(--grijs);
  text-decoration: line-through;
}

.price--free {
  color: var(--succes);
}


/* Product card & grid
   -------------------------------------------------------------------------- */

/* Output of productImage(): the product photo (<img>). */
.product-image {
  display: block;
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
}

img.product-image {
  object-fit: cover;
}

/* No photo to show (an old order line of a product that is no longer sold): a quiet, empty box. */
.product-image--empty {
  background: var(--rood-zacht);
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

@media (min-width: 640px) {
  .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
}

@media (min-width: 960px) {
  .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
  .product-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.product-card {
  position: relative;
  display: flex;
  flex-direction: column;
  block-size: 100%;
  border-radius: var(--radius);
  background: var(--wit);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .product-card:hover .product-card__media > .product-image {
    transform: scale(1.045) rotate(-1deg);
  }
}

.product-card__media {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6EF 100%);
}

.product-card__media > .product-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 0.45s var(--ease);
}

.product-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 2;
  pointer-events: none;
}

/* Narrow 2-column grid (320–374px): smaller badge, so it covers less of the photo. */
@media (max-width: 374.98px) {
  .product-card__badge {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.22rem 0.5rem 0.24rem;
    font-size: 0.625rem;
  }
}

.product-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 0.25rem;
  padding: 0.75rem 0.85rem 0.95rem;
}

@media (min-width: 640px) {
  .product-card__body { padding: 0.95rem 1.1rem 1.15rem; }
}

.product-card__title {
  font-size: 0.9688rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

@media (min-width: 640px) {
  .product-card__title { font-size: 1.0625rem; }
}

/* Stretched link: the whole card is clickable, the title is the link text. */
.product-card__link {
  color: var(--inkt);
  text-decoration: none;
}

.product-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius);
}

.product-card__link:hover {
  color: var(--rood-actie);
}

.product-card__link:focus-visible {
  outline: none;
}

.product-card__link:focus-visible::after {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 3px;
}

.product-card__meaning {
  font-size: var(--fs-sm);
  font-style: italic;
  line-height: 1.4;
  color: var(--grijs);
}

.product-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.5rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.product-card__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.45rem;
  font-size: 1.0625rem;
}

.product-card__price .price--old {
  font-size: var(--fs-sm);
}

.product-card__colors {
  display: inline-flex;
  gap: 3px;
}

.color-dot {
  inline-size: 0.8rem;
  block-size: 0.8rem;
  border-radius: 50%;
  background: var(--swatch, var(--lijn));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
}

/*
 * Pickable colours (public/js/card-colors.js): each dot is a 24 × 24 button
 * (WCAG 2.2 target size) that draws the same small dot. The group sits above
 * the stretched link (z-index 1), so a click on a dot never opens the product.
 */
.product-card__colors--pick {
  position: relative;
  z-index: 2;
  align-items: center;
  gap: 0;
  margin-inline: -5px; /* the dots, not their invisible targets, line up with the text */
}

.card-swatch {
  display: inline-grid;
  place-items: center;
  inline-size: 24px;
  block-size: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.card-swatch::before {
  content: "";
  inline-size: 14px;
  block-size: 14px;
  border-radius: 50%;
  background: var(--swatch, var(--lijn));
  /* ~4:1 edge on white, so the dot of a white hoodie stays visible on the white card */
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.5);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.card-swatch[aria-pressed="true"]::before {
  box-shadow: inset 0 0 0 1.5px rgb(0 0 0 / 0.5), 0 0 0 2px var(--wit), 0 0 0 3.5px var(--inkt);
}

.card-swatch:focus-visible {
  outline: var(--focus-width) solid var(--inkt); /* the card is always white, also in dark sections */
  outline-offset: -1px;
}

@media (hover: hover) and (pointer: fine) {
  .card-swatch:hover::before {
    transform: scale(1.2);
  }
}

/*
 * Without JavaScript the dots do nothing: a click falls through to the card
 * link, and the buttons leave the tab order and the accessibility tree
 * (visibility: hidden) while the dots themselves stay visible. The
 * "Verkrijgbaar in N kleuren" text still names the colours for screen readers.
 */
html:not(.js) .product-card__colors--pick,
html:not(.js) .card-swatch {
  pointer-events: none;
}

html:not(.js) .product-card__colors--pick {
  visibility: hidden;
}

html:not(.js) .card-swatch::before {
  visibility: visible;
}

/* Name of the colour on the photo, after someone points at or picks a dot. */
.product-card__color-name {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  z-index: 2;
  padding: 0.15rem 0.55rem 0.2rem;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.94);
  box-shadow: var(--shadow-sm);
  color: var(--inkt);
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

.product-card--soldout .product-card__media {
  filter: grayscale(0.7);
  opacity: 0.75;
}



/* 12. Chips, swatches, sizes, quantity stepper
   ========================================================================== */

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

/* Horizontally scrollable on small screens (no page overflow). */
.chips--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  padding: 0.25rem var(--gutter);
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.chips--scroll::-webkit-scrollbar { display: none; }
.chips--scroll > * { flex: none; scroll-snap-align: start; }

@media (min-width: 960px) {
  .chips--scroll { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-block-size: var(--tap);
  padding: 0.45rem 1.05rem;
  border: 2px solid var(--lijn);
  border-radius: var(--radius-pill);
  background: var(--wit);
  color: var(--inkt);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.chip:hover {
  border-color: var(--rood-actie);
  color: var(--rood-actie);
}

.chip[aria-pressed="true"],
.chip[aria-current="true"],
.chip[aria-current="page"],
.chip.is-active {
  border-color: var(--rood-actie);
  background: var(--rood-actie);
  color: var(--wit);
}

.chip__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--rood-zacht);
  color: var(--rood-actie);
  font-size: var(--fs-xs);
  font-weight: 800;
}

.chip[aria-pressed="true"] .chip__count,
.chip[aria-current] .chip__count,
.chip.is-active .chip__count {
  background: rgb(255 255 255 / 0.2);
  color: var(--wit);
}

/* Group label shared by swatches & sizes (<legend>). */
.option-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem var(--space-3);
  inline-size: 100%;
  margin-bottom: var(--space-2);
  font-weight: 700;
}

.option-legend__value {
  font-weight: 500;
  color: var(--grijs);
}

.option-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Colour swatch = visually hidden radio + coloured dot (44px target). */
.swatch {
  position: relative;
  display: inline-grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  cursor: pointer;
}

.swatch__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.swatch__dot {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 50%;
  background: var(--swatch, var(--lijn));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  pointer-events: none;
}

.swatch:hover .swatch__dot {
  transform: scale(1.06);
}

.swatch__input:checked + .swatch__dot {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18), 0 0 0 3px var(--wit), 0 0 0 5px var(--inkt);
}

.swatch__input:focus-visible + .swatch__dot {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 7px;
}

/*
 * Windows high contrast (forced colours) drops backgrounds and box-shadows,
 * which would hide every dot and the chosen one. Keep the real colour of the
 * dot and draw edge and chosen ring in system colours.
 */
@media (forced-colors: active) {
  .card-swatch::before,
  .swatch__dot {
    forced-color-adjust: none;
    box-shadow: inset 0 0 0 1.5px CanvasText;
  }

  .card-swatch[aria-pressed="true"]::before {
    box-shadow: inset 0 0 0 1.5px CanvasText, 0 0 0 2px Canvas, 0 0 0 4px Highlight;
  }

  .swatch__input:checked + .swatch__dot {
    box-shadow: inset 0 0 0 1.5px CanvasText, 0 0 0 3px Canvas, 0 0 0 5px Highlight;
  }
}

/* Size buttons = visually hidden radio + box. */
.size {
  position: relative;
  display: inline-flex;
}

.size__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.size__label {
  display: inline-grid;
  place-items: center;
  min-inline-size: 3.25rem;
  min-block-size: 48px;
  padding: 0 0.85rem;
  border: 2px solid var(--lijn-sterk);
  border-radius: var(--radius-md);
  background: var(--wit);
  color: var(--inkt);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.size:hover .size__label {
  border-color: var(--inkt);
}

.size__input:checked + .size__label {
  border-color: var(--inkt);
  background: var(--inkt);
  color: var(--wit);
}

.size__input:focus-visible + .size__label {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 2px;
}

.size__input:disabled + .size__label {
  border-style: dashed;
  color: var(--grijs);
  text-decoration: line-through;
  cursor: not-allowed;
}

.is-invalid .size__label,
.is-invalid .swatch__dot {
  border-color: var(--rood-actie);
}

.is-invalid .size__input:not(:checked) + .size__label {
  background: #FFF7F8;
}

/* Quantity stepper. Add data-stepper to get +/− behaviour from app.js. */
.qty {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--lijn-sterk);
  border-radius: var(--radius-pill);
  background: var(--wit);
  overflow: hidden;
}

.qty:focus-within {
  border-color: var(--inkt);
}

.qty__btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--tap);
  min-block-size: var(--tap);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--inkt);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.qty__btn:hover {
  background: var(--rood-zacht);
  color: var(--rood-actie);
}

.qty__btn[aria-disabled="true"] {
  color: var(--lijn-sterk);
  background: transparent;
  cursor: not-allowed;
}

.qty__btn:focus-visible {
  outline-offset: -3px;
  border-radius: var(--radius-pill);
}

.qty__input {
  inline-size: 3ch;
  min-inline-size: 2.75rem;
  border: 0;
  padding: 0;
  background: transparent;
  text-align: center;
  font-weight: 800;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  appearance: textfield;
  -moz-appearance: textfield;
}

.qty__input::-webkit-outer-spin-button,
.qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.qty__input:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.qty--lg .qty__btn { inline-size: 52px; min-block-size: 52px; }


/* 13. Breadcrumbs
   ========================================================================== */

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.15rem;
  list-style: none;
  padding: 0;
  font-size: var(--fs-sm);
  color: var(--grijs);
}

.breadcrumbs li {
  display: inline-flex;
  align-items: center;
}

.breadcrumbs li + li::before {
  content: "";
  inline-size: 1em;
  block-size: 1em;
  margin-inline: 0.2rem;
  background: currentColor;
  opacity: 0.6;
  -webkit-mask: var(--icon-chevron) center / contain no-repeat;
  mask: var(--icon-chevron) center / contain no-repeat;
}

.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-block-size: 32px;
  color: var(--grijs);
  text-decoration: none;
}

@media (pointer: coarse) {
  .breadcrumbs a { min-block-size: var(--tap); }
}

.breadcrumbs a:hover {
  color: var(--rood-actie);
  text-decoration: underline;
}

.breadcrumbs [aria-current] {
  color: var(--inkt);
  font-weight: 650;
}


/* 14. Notices, toasts
   ========================================================================== */

.notice {
  --notice-accent: var(--inkt);
  --icon: var(--icon-info);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-md);
  background: var(--wit);
  color: var(--inkt);
  line-height: 1.5;
}

.notice::before {
  content: "";
  flex: none;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  margin-top: 0.08rem;
  background: var(--notice-accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.notice--plain::before { display: none; }

.notice__body {
  display: grid;
  gap: 0.2rem;
  flex: 1;
  min-inline-size: 0;
}

.notice__title {
  font-weight: 800;
}

.notice--info {
  --notice-accent: var(--info);
  border-color: #C9D6EA;
  background: var(--info-zacht);
}

.notice--success {
  --notice-accent: var(--succes);
  --icon: var(--icon-check-circle);
  border-color: #BFE3CD;
  background: var(--succes-zacht);
}

.notice--error {
  --notice-accent: var(--rood-actie);
  --icon: var(--icon-alert);
  border-color: #F5C2C7;
  background: var(--rood-zacht);
}

.notice--demo {
  --notice-accent: var(--waarschuwing);
  --icon: var(--icon-sparkle);
  border: 2px dashed var(--goud);
  background: var(--goud-zacht);
}

.notice--demo .notice__title {
  color: var(--waarschuwing);
}

/* Toasts (created by toast() in app.js). */
.toast-region {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline: var(--space-3);
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
  pointer-events: none;
}

@media (min-width: 640px) {
  .toast-region {
    inset-inline: auto var(--space-5);
    bottom: var(--space-5);
    inline-size: min(420px, calc(100vw - 2 * var(--space-5)));
  }
}

.toast {
  --toast-accent: #F7C66A;
  --icon: var(--icon-info);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  padding: 0.8rem 0.6rem 0.8rem 1rem;
  border-radius: 14px;
  background: var(--inkt);
  color: var(--wit);
  box-shadow: 0 18px 40px -10px rgb(20 0 4 / 0.45);
  pointer-events: auto;
  -webkit-font-smoothing: antialiased;
  animation: bb-toast-in 0.32s var(--ease-bounce);
  border-inline-start: 6px solid var(--toast-accent);
}

.toast.is-leaving {
  animation: bb-toast-out 0.22s var(--ease) forwards;
}

.toast::before {
  content: "";
  flex: none;
  inline-size: 1.4rem;
  block-size: 1.4rem;
  background: var(--toast-accent);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}

.toast--success {
  --toast-accent: #6EE7A0;
  --icon: var(--icon-check-circle);
}

.toast--error {
  --toast-accent: #FF8A93;
  --icon: var(--icon-alert);
}

.toast__message {
  flex: 1 1 10rem;
  min-inline-size: 0;
  font-weight: 650;
  line-height: 1.4;
}

.toast__action {
  display: inline-flex;
  align-items: center;
  min-block-size: 40px;
  padding: 0 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--wit);
  color: var(--rood-actie);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

.toast__action:hover {
  background: var(--goud);
  color: var(--inkt);
}

.toast__close {
  display: inline-grid;
  place-items: center;
  inline-size: 40px;
  block-size: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgb(255 255 255 / 0.75);
}

.toast__close:hover {
  background: rgb(255 255 255 / 0.12);
  color: var(--wit);
}

.toast :focus-visible {
  outline-color: var(--goud);
}

/* Chat launcher: the button bottom right that opens the automatic assistant
   (views/partials/footer.html). The panel itself is styled in /css/chat.css,
   which app.js only loads when the chat is opened. */
.chat-launcher {
  position: fixed;
  z-index: 90;                          /* above the header, below toasts */
  inset-inline-end: max(var(--space-3), env(safe-area-inset-right));
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-inline-size: 3.25rem;
  min-block-size: 3.25rem;
  padding: 0.75rem;
  border: 2px solid var(--wit);
  border-radius: var(--radius-pill);
  background: var(--rood-actie);
  color: var(--wit);
  font-weight: 750;
  line-height: 1;
  text-decoration: none;
  box-shadow: var(--shadow-lg);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

.chat-launcher:hover {
  background: var(--rood-hover);
  color: var(--wit);
}

.chat-launcher .icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

/* Phones: a round button with only the icon (the label stays for screen readers). */
.chat-launcher__label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Phones: step aside while a button of the page is underneath (app.js), and while the panel is open. */
.chat-launcher.is-tucked:not(:focus-visible) {
  opacity: 0;
  pointer-events: none;
  transform: translateX(120%);
}

.chat-launcher[aria-expanded="true"] {
  display: none;
}

@media (min-width: 640px) {
  .chat-launcher {
    inset-inline-end: var(--space-5);
    bottom: var(--space-5);
    padding: 0.8rem 1.15rem;
  }

  .chat-launcher__label {
    position: static;
    inline-size: auto;
    block-size: auto;
    overflow: visible;
    clip-path: none;
  }
}


/* 15. Tables, accordion, progress
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--lijn);
  border-radius: var(--radius-md);
  background: var(--wit);
  -webkit-overflow-scrolling: touch;
}

.table {
  inline-size: 100%;
  border-collapse: collapse;
  background: var(--wit);
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}

.table caption {
  padding: 0.85rem 1rem 0.5rem;
  text-align: start;
  font-weight: 800;
  caption-side: top;
}

.table th,
.table td {
  padding: 0.75rem 1rem;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--lijn);
}

.table thead th {
  background: var(--rood-zacht);
  color: var(--inkt);
  font-size: var(--fs-sm);
  font-weight: 800;
  white-space: nowrap;
  border-bottom: 2px solid #F3C9CE;
}

.table tbody th {
  font-weight: 750;
}

.table tbody tr:last-child > * {
  border-bottom: 0;
}

.table--striped tbody tr:nth-child(even) {
  background: #FFFBF7;
}

.table--hover tbody tr:hover {
  background: #FFF6F0;
}

.table--compact th,
.table--compact td {
  padding: 0.5rem 0.75rem;
}

.table .num {
  text-align: end;
  white-space: nowrap;
}

/* Accordion built on native <details>. */
.accordion {
  border-top: 1px solid var(--lijn);
}

.accordion__item {
  border-bottom: 1px solid var(--lijn);
}

.accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 60px;
  padding: 0.85rem 0.25rem;
  font-weight: 750;
  font-size: 1.0625rem;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.accordion__summary::-webkit-details-marker {
  display: none;
}

.accordion__summary::after {
  content: "";
  flex: none;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--rood-zacht) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23DA0914' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center / 1.05rem no-repeat;
  transition: transform 0.25s var(--ease), background-color var(--dur) var(--ease);
}

.accordion__summary:hover {
  color: var(--rood-actie);
}

.accordion__summary:focus-visible {
  outline-offset: 0;
  border-radius: var(--radius-sm);
}

.accordion__item[open] > .accordion__summary {
  color: var(--rood-actie);
}

.accordion__item[open] > .accordion__summary::after {
  transform: rotate(45deg);
  background-color: #FAD6DA;
}

.accordion__content {
  padding: 0 0.25rem 1.25rem;
  color: var(--inkt);
  max-width: 70ch;
}

.accordion__content > * + * {
  margin-top: 0.75em;
}

.accordion__item[open] > .accordion__content {
  animation: bb-fade-in 0.25s var(--ease);
}

/* Progress bar (free shipping). */
.progress {
  position: relative;
  block-size: 12px;
  border-radius: var(--radius-pill);
  background: #F1E4DC;
  overflow: hidden;
}

.progress__fill {
  display: block;
  block-size: 100%;
  inline-size: var(--value, 0%);
  max-inline-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--rood-actie), var(--rood));
  transition: inline-size 0.5s var(--ease);
}

/* Goal reached: the bar turns "Brabants bont". */
.progress.is-complete .progress__fill {
  background: var(--bont-gradient) 0 0 / 12px 12px;
  box-shadow: inset 0 0 0 1px var(--rood);
}

.progress-label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 650;
}

.progress-label .icon {
  color: var(--rood-actie);
}


/* 16. Hero, USPs, category tiles, page header
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--rood);
  color: var(--wit);
  --focus-ring: var(--wit);
}

/* Soft chequer "sun" behind the media. */
.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inline-size: min(110vw, 820px);
  aspect-ratio: 1;
  right: -22%;
  top: 50%;
  translate: 0 -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 255 255 / 0.13) 0 25%, transparent 0 50%) 0 0 / 72px 72px;
  -webkit-mask: radial-gradient(closest-side, #000 45%, transparent 100%);
  mask: radial-gradient(closest-side, #000 45%, transparent 100%);
}

/* Flag edge along the bottom. */
.hero::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  block-size: 12px;
  background: var(--bont-gradient) 0 0 / 12px 12px;
}

.hero__inner {
  display: grid;
  gap: var(--space-6);
  align-items: center;
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem) clamp(3rem, 2rem + 5vw, 6.5rem);
}

@media (min-width: 960px) {
  .hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}

.hero__content {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
}

.hero .eyebrow {
  color: var(--wit);
}

.hero .eyebrow::before {
  box-shadow: 0 0 0 1.5px var(--wit);
}

.hero__title {
  font-size: var(--fs-display);
  font-weight: 900;
  line-height: 0.98;
  letter-spacing: -0.04em;
  color: var(--wit);
  text-wrap: balance;
}

/* White "sticker" highlight inside the headline. */
.hero__accent {
  display: inline-block;
  margin-top: 0.08em;
  padding: 0.02em 0.22em 0.08em;
  border-radius: 0.14em;
  background: var(--wit);
  color: var(--rood-actie);
  transform: rotate(-2.5deg);
  box-shadow: 0 0.12em 0 rgb(134 7 14 / 0.35);
}

/* White on #DA0914 is 5.2:1, compliant for all text sizes. */
.hero__lead {
  max-width: 36ch;
  font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  font-weight: 700;
  line-height: 1.45;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.hero__media {
  position: relative;
  justify-self: center;
  inline-size: min(100%, 480px);
}

.hero__plate {
  border-radius: 50%;
  background: var(--wit);
  box-shadow: 0 30px 60px -20px rgb(60 0 8 / 0.5), 0 0 0 10px rgb(255 255 255 / 0.18);
}

.hero__plate > .product-image {
  inline-size: 100%;
  block-size: auto;
}

/* Stamp/badge slapped on the hero plate: <span class="stamp hero__sticker">De minde nie!</span> */
.hero .hero__sticker {
  position: absolute;
  top: 6%;
  left: -2%;
  background: var(--wit);
  color: var(--rood-actie);
  font-size: clamp(1.125rem, 0.9rem + 1vw, 1.5rem);
  transform: rotate(-8deg);
  box-shadow: inset 0 0 0 2px var(--wit), inset 0 0 0 3.5px currentColor, 0 14px 26px -12px rgb(60 0 8 / 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__plate { animation: bb-float 6s ease-in-out infinite; }
}

/* USP row. */
.usps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

@media (min-width: 960px) {
  .usps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
}

.usp {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  background: var(--wit);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

@media (min-width: 640px) {
  .usp { padding: var(--space-4); font-size: 0.9375rem; }
}

.usp__icon {
  display: inline-grid;
  place-items: center;
  flex: none;
  inline-size: 44px;
  block-size: 44px;
  border-radius: 50%;
  background: var(--rood-zacht);
  color: var(--rood-actie);
}

.usp__icon .icon {
  inline-size: 1.4rem;
  block-size: 1.4rem;
}

.usp strong {
  display: block;
  font-weight: 800;
}

.usp span {
  color: var(--grijs);
}

/* Category tiles (stretched link on the title). */
.category-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  list-style: none;
  padding: 0;
}

@media (min-width: 960px) {
  .category-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
}

.category-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--wit);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (hover: hover) {
  .category-tile:hover {
    transform: translateY(-4px) rotate(-0.4deg);
    box-shadow: var(--shadow-lg);
  }

  .category-tile:hover .category-tile__media > .product-image {
    transform: scale(1.06);
  }
}

.category-tile__media {
  aspect-ratio: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #FFF6EF 100%);
}

.category-tile__media > .product-image {
  inline-size: 100%;
  block-size: 100%;
  transition: transform 0.45s var(--ease);
}

.category-tile__body {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem 1rem;
}

.category-tile__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--fs-h4);
  font-weight: 850;
}

.category-tile__link {
  color: var(--inkt);
  text-decoration: none;
}

.category-tile__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.category-tile__link:focus-visible {
  outline: none;
}

.category-tile__link:focus-visible::after {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: 3px;
}

.category-tile__title .icon {
  color: var(--rood-actie);
  transition: transform var(--dur) var(--ease);
}

.category-tile:hover .category-tile__title .icon {
  transform: translateX(4px);
}

.category-tile__text {
  font-size: var(--fs-sm);
  color: var(--grijs);
  line-height: 1.4;
}

/* Inner page header (title band at the top of <main>). */
.page-header {
  position: relative;
  padding-block: clamp(1.75rem, 1.25rem + 2.5vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.75rem);
  border-bottom: 1px solid var(--lijn);
  overflow: hidden;
}

.page-header .container {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.page-header .breadcrumbs {
  margin-bottom: var(--space-1);
}

.page-title {
  font-size: var(--fs-h1);
  font-weight: 900;
  max-width: 22ch;
}

/* Chequered sticker in the corner (decorative, desktop only). */
@media (min-width: 960px) {
  .page-header::after {
    content: "";
    position: absolute;
    right: max(var(--gutter), calc((100vw - var(--container)) / 2));
    top: 50%;
    inline-size: 88px;
    block-size: 88px;
    border-radius: 18px;
    background: var(--bont-gradient) 0 0 / 22px 22px;
    box-shadow: 0 0 0 5px var(--wit), var(--shadow);
    transform: translateY(-50%) rotate(8deg);
  }

  .page-header--plain::after { display: none; }
}


/* 17. Stamp, dialect, quote
   ========================================================================== */

/* Rubber-stamp label for dialect "print" texts. */
.stamp {
  display: inline-block;
  padding: 0.35em 0.75em 0.4em;
  border: 3px solid currentColor;
  border-radius: 0.4em;
  color: var(--rood-actie);
  box-shadow: inset 0 0 0 2px var(--stamp-gap, var(--creme)), inset 0 0 0 3.5px currentColor;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.01em;
  transform: rotate(-4deg);
  text-wrap: balance;
}

.stamp--lg {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.5rem);
  border-width: 4px;
}

.stamp--light {
  --stamp-gap: var(--rood);
  color: var(--wit);
}

.stamp--on-white {
  --stamp-gap: var(--wit);
}

.stamp--straight {
  transform: none;
}

/* Inline dialect word/phrase: <q class="dialect">Houdoe</q> */
.dialect {
  font-weight: 800;
  color: var(--rood-actie);
  quotes: "\201C" "\201D" "\2018" "\2019";
}

/* Big quote with chequered edge. */
.quote {
  position: relative;
  padding: var(--space-2) 0 var(--space-2) calc(12px + var(--space-5));
  font-size: var(--fs-h3);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.quote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  inline-size: 12px;
  border-radius: 3px;
  background: var(--bont-gradient) 0 0 / 12px 12px;
}

.quote cite,
.quote footer {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  font-style: normal;
  font-weight: 600;
  color: var(--grijs);
}


/* 18. Cards, steps, totals, line items, stats
   ========================================================================== */

.card {
  padding: clamp(1.1rem, 0.9rem + 1vw, 1.75rem);
  border-radius: var(--radius);
  background: var(--wit);
  box-shadow: var(--shadow);
}

.card--flat {
  box-shadow: none;
  border: 1px solid var(--lijn);
}

.card--tint {
  box-shadow: none;
  background: var(--rood-zacht);
}

.card--bont-top {
  position: relative;
  overflow: hidden;
  padding-top: calc(clamp(1.1rem, 0.9rem + 1vw, 1.75rem) + 12px);
}

.card--bont-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 12px;
  background: var(--bont-gradient) 0 0 / 12px 12px;
}

.card__title {
  font-size: var(--fs-h4);
  font-weight: 850;
  margin-bottom: var(--space-3);
}

/* Numbered steps ("Wat gebeurt er nu?"). */
.steps {
  display: grid;
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  counter-reset: step;
}

@media (min-width: 640px) {
  .steps--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.15rem var(--space-3);
  align-items: start;
  counter-increment: step;
}

.step::before {
  content: counter(step);
  grid-row: span 2;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: 50%;
  background: var(--rood-actie);
  color: var(--wit);
  font-weight: 900;
  font-size: 1.125rem;
  box-shadow: 0 0 0 4px var(--rood-zacht);
}

.step__title {
  font-size: var(--fs-h4);
  font-weight: 800;
  line-height: 1.3;
  padding-top: 0.45rem;
}

.step__text {
  color: var(--grijs);
  font-size: 0.9375rem;
}

/* Order totals: <dl class="totals"><div class="totals__row"><dt/><dd/></div>… */
.totals {
  display: grid;
  gap: 0.55rem;
  font-variant-numeric: tabular-nums;
}

.totals__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
}

.totals__row dt {
  color: var(--grijs);
}

.totals__row dd {
  margin: 0;
  font-weight: 700;
  text-align: end;
  white-space: nowrap;
}

.totals__row--discount dd {
  color: var(--succes);
}

.totals__row--total {
  margin-top: 0.35rem;
  padding-top: 0.85rem;
  border-top: 2px solid var(--inkt);
  font-size: 1.1875rem;
}

.totals__row--total dt {
  color: var(--inkt);
  font-weight: 850;
}

.totals__row--total dd {
  font-weight: 900;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
}

.totals__note {
  font-size: var(--fs-xs);
  color: var(--grijs);
  text-align: end;
}

/* Cart / order lines. */
.line-items {
  list-style: none;
  padding: 0;
  display: grid;
}

.line-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--lijn);
}

.line-item:first-child {
  padding-top: 0;
}

@media (min-width: 640px) {
  .line-item { grid-template-columns: 104px minmax(0, 1fr) auto; gap: var(--space-2) var(--space-5); }
}

.line-items--compact .line-item {
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: var(--space-3);
  padding-block: var(--space-3);
  align-items: center;
}

.line-item__media {
  position: relative;
  display: block;
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  border: 1px solid var(--lijn);
  background: var(--wit);
  overflow: hidden;
}

.line-item__media > .product-image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Quantity bubble on compact thumbnails (checkout summary). */
.line-item__qty-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.35rem;
  block-size: 1.35rem;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--inkt);
  color: var(--wit);
  font-size: 0.75rem;
  font-weight: 800;
}

.line-item__body {
  display: grid;
  gap: 0.2rem;
  min-inline-size: 0;
}

.line-item__title {
  font-weight: 800;
  line-height: 1.3;
}

.line-item__title a {
  color: var(--inkt);
  text-decoration: none;
}

.line-item__title a:hover {
  color: var(--rood-actie);
  text-decoration: underline;
}

.line-item__meta {
  font-size: var(--fs-sm);
  color: var(--grijs);
}

.line-item__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-top: var(--space-2);
}

.line-item__price {
  display: grid;
  justify-items: end;
  gap: 0.1rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.line-item__unit {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--grijs);
}

.line-item--invalid .line-item__media,
.line-item--invalid .line-item__title {
  opacity: 0.6;
}

.line-item--invalid .line-item__reason {
  color: var(--rood-actie);
  font-size: var(--fs-sm);
  font-weight: 650;
}

/* Small stats row (admin). */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: var(--space-3);
}

.stat {
  display: grid;
  gap: 0.2rem;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--wit);
  box-shadow: var(--shadow-sm);
}

.stat__label {
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--grijs);
}

.stat__value {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2.125rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}


/* 19. Empty state, spinner, skeleton
   ========================================================================== */

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  max-width: 36rem;
  margin-inline: auto;
  padding: clamp(2rem, 1.5rem + 3vw, 4rem) var(--space-4);
  text-align: center;
}

/* Round art with a chequered ring; put an .icon inside. */
.empty-state__art {
  display: grid;
  place-items: center;
  inline-size: 128px;
  block-size: 128px;
  margin-bottom: var(--space-3);
  border: 8px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--rood-zacht), var(--rood-zacht)) padding-box,
    var(--bont-gradient) 0 0 / 16px 16px border-box;
  color: var(--rood-actie);
  transform: rotate(-6deg);
}

.empty-state__art .icon {
  inline-size: 3rem;
  block-size: 3rem;
}

.empty-state__art > svg {
  inline-size: 58%;
  block-size: auto;
}

.empty-state__title {
  font-size: var(--fs-h2);
  font-weight: 900;
}

.empty-state__text {
  color: var(--grijs);
  font-size: var(--fs-lg);
  max-width: 44ch;
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.spinner {
  display: inline-block;
  flex: none;
  inline-size: 1.25em;
  block-size: 1.25em;
  border: 0.18em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: bb-spin 0.7s linear infinite;
  vertical-align: -0.2em;
}

.spinner--lg {
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-width: 4px;
  color: var(--rood-actie);
}

/* Centered loading block: <div class="loading" role="status"><span class="spinner spinner--lg"></span> Laden…</div> */
.loading {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4);
  color: var(--grijs);
  font-weight: 600;
}

.skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background: linear-gradient(100deg, #F4E8E0 30%, #FBF3EE 50%, #F4E8E0 70%) 0 0 / 300% 100%;
  animation: bb-shimmer 1.4s ease-in-out infinite;
}

.skeleton--text {
  block-size: 0.95em;
  margin-block: 0.3em;
  border-radius: 4px;
}

.skeleton--title {
  block-size: 1.3em;
  inline-size: 70%;
}

.skeleton--media {
  aspect-ratio: 1;
  border-radius: 0;
}

.skeleton--circle {
  border-radius: 50%;
}


/* 20. Prose — long-form content (policies, about, FAQ answers)
   ========================================================================== */

.prose {
  max-width: 72ch;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.prose > * + * {
  margin-top: 1em;
}

.prose :is(h2, h3, h4) {
  scroll-margin-top: calc(var(--header-h) + 16px);
}

.prose h2 {
  margin-top: 2.25em;
  font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem);
}

.prose h3 {
  margin-top: 1.75em;
  font-size: var(--fs-h3);
}

.prose h4 {
  margin-top: 1.5em;
}

.prose :is(h2, h3, h4) + * {
  margin-top: 0.6em;
}

.prose > :first-child {
  margin-top: 0;
}

.prose ul,
.prose ol {
  padding-inline-start: 1.4em;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li::marker {
  color: var(--rood-actie);
  font-weight: 800;
}

.prose blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 4px solid var(--rood);
  color: var(--grijs);
  font-style: italic;
}

.prose :is(.table-wrap, .notice, .card) {
  margin-top: 1.5em;
}

.prose code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--rood-zacht);
}

/* Table of contents / anchor list for long pages. */
.toc {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  background: var(--wit);
  border: 1px solid var(--lijn);
}

.toc__title {
  font-size: var(--fs-sm);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--grijs);
  margin-bottom: var(--space-2);
}

.toc ol,
.toc ul {
  display: grid;
  gap: 0.15rem;
  padding-inline-start: 1.2em;
}

.toc a {
  display: inline-block;
  padding-block: 0.3rem;
  font-weight: 650;
}

/* Check list (product details, values). */
.check-list {
  display: grid;
  gap: 0.55rem;
  list-style: none;
  padding: 0;
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  line-height: 1.5;
}

.check-list li::before {
  content: "";
  flex: none;
  inline-size: 1.3em;
  block-size: 1.3em;
  margin-top: 0.1em;
  background: var(--succes);
  -webkit-mask: var(--icon-check-circle) center / contain no-repeat;
  mask: var(--icon-check-circle) center / contain no-repeat;
}

/* Definition list (key/value facts). */
.facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 1.25rem;
}

.facts dt {
  font-weight: 700;
}

.facts dd {
  margin: 0;
  color: var(--grijs);
}


/* 21. Utilities
   ========================================================================== */

.visually-hidden,
.sr-only {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.text-center { text-align: center; }
.text-end { text-align: end; }
.nowrap { white-space: nowrap; }
.w-full { inline-size: 100%; }
.mx-auto { margin-inline: auto; }
.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.mt-6 { margin-top: var(--space-6) !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4) !important; }
.mb-6 { margin-bottom: var(--space-6) !important; }
.text-rood { color: var(--rood-actie); }
.text-succes { color: var(--succes); }
.fw-bold { font-weight: 800; }
.tabular { font-variant-numeric: tabular-nums; }

.divider {
  block-size: 1px;
  border: 0;
  background: var(--lijn);
  margin-block: var(--space-5);
}

/* Shared internals used by components above (icon shortcuts). */
:root {
  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.5'/%3E%3C/svg%3E");
  --icon-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.5'/%3E%3C/svg%3E");
  --icon-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 3 3 5-6'/%3E%3C/svg%3E");
  --icon-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --icon-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5c.6 4.8 2.7 6.9 7.5 7.5-4.8.6-6.9 2.7-7.5 7.5-.6-4.8-2.7-6.9-7.5-7.5 4.8-.6 6.9-2.7 7.5-7.5z'/%3E%3Cpath d='M19 16.5v4M17 18.5h4' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}


/* 22. Motion & print
   ========================================================================== */

@keyframes bb-spin {
  to { transform: rotate(360deg); }
}

@keyframes bb-shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0 0; }
}

@keyframes bb-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}

@keyframes bb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bb-toast-in {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

@keyframes bb-toast-out {
  to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes bb-bump {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@keyframes bb-float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(-1.5deg); }
}

@keyframes bb-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* Respect reduced motion: no movement, but keep essential loading feedback. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .spinner {
    animation: bb-pulse 1.6s ease-in-out infinite !important;
    border-right-color: currentColor;
    opacity: 0.6;
  }

  .skeleton {
    animation: none !important;
  }

  .product-card:hover,
  .category-tile:hover {
    transform: none;
  }

  .product-card:hover .product-card__media > .product-image,
  .category-tile:hover .category-tile__media > .product-image {
    transform: none;
  }
}

@media print {
  *,
  *::before,
  *::after {
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .skip-link,
  .announcement,
  .bont-rand,
  .site-header,
  .site-footer,
  .toast-region,
  .chat-launcher,
  .chat,
  .no-print,
  .btn,
  .qty__btn {
    display: none !important;
  }

  .section,
  .page-header {
    padding-block: 1rem;
  }

  .hero {
    background: none;
    color: #000;
  }

  .hero::before,
  .hero::after,
  .page-header::after {
    display: none;
  }

  .card,
  .product-card,
  .notice {
    border: 1px solid #ccc;
    break-inside: avoid;
  }

  .prose a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }

  h1, h2, h3 {
    break-after: avoid;
  }
}