/* ============================================================================
   Many Hands — ontwerpsysteem
   ----------------------------------------------------------------------------
   Herbouwd 27-07-2026. Vervangt het crème/goud/nachtblauw-systeem volledig.

   Richting: helder en strak, met een warme editorial-inslag.
   Palet: bosgroen als dragende merkkleur, koel papier als basis, klei als
   enige signaalkleur. Bewust NIET het beige+goud+espresso-palet dat elke
   wellness-webshop gebruikt.

   Vormtaal (één schaal, overal hetzelfde toegepast):
     6px   chips en kleine labels
     10px  invoervelden
     14px  knoppen, kaarten, oppervlakken
     20px  beeld, panelen, grote blokken
     999px alleen echt ronde elementen (badge, ronde icoonknop)

   Motion: alles onder 300ms, ease-out bij binnenkomen, nooit ease-in.
   Alles boven een kleurwissel valt terug onder prefers-reduced-motion.
============================================================================ */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Zelf gehost (geen Google-requests, geen IP-doorgifte). Schibsted Grotesk is
   getekend voor een krantenuitgever: editorial DNA in een schreefloze letter,
   precies de warmte die we willen zonder de serif-cliché van elke webshop.
   Newsreader draagt uitsluitend de lange gidsartikelen, waar echt gelezen
   wordt. Beide variabel: één bestand dekt de hele gewichtsas.                */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/schibsted-latin-f25c0b73.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/schibsted-latin-ext-cf22582e.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-latin-662a6e2a.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-latin-ext-5ca53eda.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/newsreader-italic-latin-0e959a34.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────────── */

:root {
  /* Bewust vastgezet op licht (besluit gebruiker 27-07-2026). De donkere
     variant is eruit gehaald in plaats van uitgeschakeld: een half onderhouden
     tweede thema levert alleen maar contrastfouten op die niemand ziet. */
  color-scheme: light;

  --font-sans: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;

  --paper: #f5f7f3;
  --paper-2: #eaeee7;
  --surface: #ffffff;
  --surface-media: #ffffff;

  --ink: #101a14;
  --ink-2: #47554d;
  --ink-3: #5e6c64;

  --line: #d8dfd6;
  --line-2: #c3cdc0;

  --brand: #1e5638;
  --brand-hover: #17472e;
  --brand-text: #1e5638;
  --brand-deep: #0e2a1c;
  --brand-soft: #e1ebe2;
  --brand-ink: #ffffff;

  --signal: #a83c22;
  --signal-soft: #f7e9e4;

  --shadow-sm: 0 1px 2px rgba(16, 26, 20, 0.05);
  --shadow-md: 0 4px 16px -6px rgba(16, 26, 20, 0.13);
  --shadow-lg: 0 24px 60px -28px rgba(16, 26, 20, 0.3);

  --r-chip: 6px;
  --r-input: 10px;
  --r-ui: 14px;
  --r-panel: 20px;
  --r-round: 999px;

  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --section-y: clamp(56px, 7vw, 112px);

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 160ms;
  --t-ui: 200ms;
  --t-panel: 380ms;

  --header-h: 68px;
}

/* ── Reset en basis ──────────────────────────────────────────────────────── */

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

* {
  margin: 0;
}

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100dvh;
}

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

img {
  height: auto;
}

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

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

:focus-visible {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
  border-radius: 3px;
}

::selection {
  background: var(--brand-soft);
  color: var(--ink);
}

hr {
  border: 0;
  border-top: 1px solid var(--line);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--surface);
  color: var(--ink);
  padding: 10px 16px;
  border-radius: var(--r-ui);
  box-shadow: var(--shadow-md);
  transition: top var(--t-ui) var(--ease-out);
}
.skip:focus {
  top: 12px;
}

/* ── Typografie ──────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.14;
  text-wrap: balance;
}

/* Bovengrens bewust op 3.6rem: bij 4rem liep de hero-kop op een breed scherm
   over drie regels, en drie regels is altijd een fout in de lettergrootte,
   nooit in de tekst. */
.display {
  font-size: clamp(2.3rem, 1.55rem + 3.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  font-weight: 600;
}

h1 {
  font-size: clamp(1.95rem, 1.35rem + 2.4vw, 3.1rem);
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem);
}
h3 {
  font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem);
}

p {
  text-wrap: pretty;
}

.lead {
  font-size: clamp(1.06rem, 1rem + 0.35vw, 1.22rem);
  color: var(--ink-2);
  max-width: 58ch;
}

.muted {
  color: var(--ink-2);
}
.tiny {
  font-size: 0.8125rem;
  color: var(--ink-3);
  line-height: 1.5;
}
.small {
  font-size: 0.9rem;
}
.measure {
  max-width: 65ch;
}

/* Het kleine bovenschrift. Bewust schaars: maximaal één per drie secties,
   anders krijgt elke sectie dezelfde sjabloon-cadans. */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-text);
}

/* ── Layout ──────────────────────────────────────────────────────────────── */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap--narrow {
  max-width: 760px;
}
.wrap--mid {
  max-width: 960px;
}

.section {
  padding-block: var(--section-y);
}
.section--tight {
  padding-block: clamp(36px, 4.5vw, 64px);
}
.section--tint {
  background: var(--paper-2);
}
.section--deep {
  background: var(--brand-deep);
  color: #eef3ee;
}
.section--deep .muted,
.section--deep .lead {
  color: #b6c6ba;
}
.section--deep .eyebrow {
  color: #8ed2a9;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: clamp(28px, 3.5vw, 48px);
  max-width: 60ch;
}
/* Kop links, doorklik rechts. Onder 640px klapt de link onder de kop, want
   naast elkaar wordt de kop dan te smal om nog te kloppen. */
.section-head--row {
  flex-direction: row;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
}
@media (max-width: 640px) {
  .section-head--row {
    flex-direction: column;
    align-items: flex-start;
  }
}

.grid {
  display: grid;
  gap: clamp(16px, 2vw, 28px);
}
.grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 900px) {
  .grid--3,
  .grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 560px) {
  .grid--2,
  .grid--3,
  .grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.row--between {
  justify-content: space-between;
}

.stack > * + * {
  margin-top: 16px;
}
.stack-lg > * + * {
  margin-top: 28px;
}

/* ── Iconen ──────────────────────────────────────────────────────────────── */

.ico {
  width: 1em;
  height: 1em;
  flex: none;
}
.ico-lg {
  width: 22px;
  height: 22px;
  flex: none;
}

.stars {
  display: inline-flex;
  gap: 2px;
  color: var(--brand-text);
  font-size: 15px;
  line-height: 1;
}
.stars .is-empty {
  color: var(--line-2);
}

/* Bewijsregel: sterren met het aantal beoordelingen ernaast. In de hero en
   bij de prijs op de productpagina; bewust groter dan .tiny, want sterren mét
   aantal is het sterkste losse vertrouwenssignaal en mag niet als voetnoot
   ogen. */
.proof-row {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.875rem;
  color: var(--ink-2);
}
.proof-row .stars {
  font-size: 16px;
}
.proof-row > .ico {
  font-size: 16px;
}
.proof-row b {
  color: var(--ink);
}
.proof-row a {
  color: inherit;
}

/* ── Knoppen ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border-radius: var(--r-ui);
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: -0.008em;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  transition: transform var(--t-press) var(--ease-out),
    background-color var(--t-ui) ease, border-color var(--t-ui) ease,
    color var(--t-ui) ease;
}
.btn:active {
  transform: scale(0.97);
}

.btn--primary {
  background: var(--brand);
  color: var(--brand-ink);
  box-shadow: var(--shadow-sm);
}
.btn--ghost {
  border-color: var(--line-2);
  color: var(--ink);
  background: transparent;
}
.btn--quiet {
  color: var(--ink-2);
  padding-inline: 8px;
}
.btn--onDeep {
  background: #f3f7f3;
  color: #0e2a1c;
}
.btn--lg {
  padding: 16px 28px;
  font-size: 1.04rem;
}
.btn--sm {
  padding: 9px 15px;
  font-size: 0.88rem;
}
.btn--full {
  width: 100%;
}
.btn[disabled],
.btn[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover {
    background: var(--brand-hover);
  }
  .btn--ghost:hover {
    border-color: var(--ink);
  }
  .btn--quiet:hover {
    color: var(--ink);
  }
  .btn--onDeep:hover {
    background: #ffffff;
  }
}

/* Ronde icoonknop: het enige element dat de volledig ronde vorm gebruikt. */
.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: var(--r-round);
  color: var(--ink);
  position: relative;
  transition: background-color var(--t-ui) ease,
    transform var(--t-press) var(--ease-out);
}
.icon-btn .ico {
  font-size: 21px;
}
.icon-btn:active {
  transform: scale(0.94);
}
@media (hover: hover) and (pointer: fine) {
  .icon-btn:hover {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
  }
}

/* ── Chips ───────────────────────────────────────────────────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px;
  border-radius: var(--r-chip);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--paper-2);
  color: var(--ink-2);
  white-space: nowrap;
}
.chip--brand {
  background: var(--brand-soft);
  color: var(--brand-text);
}
.chip--signal {
  background: var(--signal-soft);
  color: var(--signal);
}
.chip--line {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-2);
}

/* ── Aankondigingsbalk ───────────────────────────────────────────────────── */

.announce {
  background: var(--brand-deep);
  color: #d7e5da;
  font-size: 0.82rem;
  text-align: center;
  padding: 9px var(--gutter);
}
.announce b {
  color: #ffffff;
  font-weight: 600;
}

/* ── Header ──────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-ui) ease;
}
.site-header[data-stuck='true'] {
  border-bottom-color: var(--line);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header {
    background: var(--paper);
  }
}

.header-in {
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: 20px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  flex: none;
}
.logo-mark {
  width: 27px;
  height: 27px;
  color: var(--brand-text);
}
.logo-word {
  font-size: 1.14rem;
  font-weight: 600;
  letter-spacing: -0.028em;
}

.nav {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-inline: auto;
}
.nav a {
  padding: 8px 13px;
  border-radius: var(--r-input);
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  transition: color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.nav a[aria-current='page'] {
  color: var(--ink);
  background: var(--paper-2);
}
@media (hover: hover) and (pointer: fine) {
  .nav a:hover {
    color: var(--ink);
  }
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}

.cart-badge {
  position: absolute;
  top: 3px;
  right: 3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-round);
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 0.68rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  line-height: 1;
}
/* Zonder deze regel wint display:grid van het hidden-attribuut en staat er een
   badge met "0" op een lege winkelwagen. */
.cart-badge[hidden] {
  display: none;
}

.menu-toggle {
  display: none;
}

@media (max-width: 940px) {
  .nav {
    display: none;
  }
  .menu-toggle {
    display: inline-grid;
  }
  .header-actions {
    margin-inline-start: auto;
  }
}

/* Mobiel menu: een vol paneel, geen kruimelig uitklapmenu. */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  padding: 0 var(--gutter) 32px;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--t-ui) var(--ease-out),
    visibility 0s linear var(--t-ui);
}
.mobile-nav[data-open='true'] {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.mobile-nav__head {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-nav__list {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  border-top: 1px solid var(--line);
}
.mobile-nav__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 2px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  font-size: 1.12rem;
  font-weight: 500;
}
.mobile-nav__list .ico {
  color: var(--ink-3);
  font-size: 18px;
}

/* ── Beeld ───────────────────────────────────────────────────────────────── */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  background: var(--surface-media);
}
.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.media--square {
  aspect-ratio: 1 / 1;
}
.media--portrait {
  aspect-ratio: 4 / 5;
}
.media--wide {
  aspect-ratio: 16 / 10;
}

figure {
  margin: 0;
}
figcaption {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--ink-3);
}

/* ── Productkaart ────────────────────────────────────────────────────────── */

.p-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.p-card__media {
  position: relative;
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface-media);
  aspect-ratio: 1 / 1;
}
.p-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .p-card:hover .p-card__media img {
    transform: scale(1.035);
  }
}
.p-card__flag {
  position: absolute;
  top: 12px;
  left: 12px;
}
.p-card__body {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.p-card__name {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.014em;
}
.p-card__sub {
  font-size: 0.9rem;
  color: var(--ink-2);
  line-height: 1.45;
  flex: 1;
}
.p-card__foot {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 6px;
}
.p-card__price {
  font-weight: 600;
  font-size: 1.02rem;
}

/* ── Categoriekaart ─────────────────────────────────────────────────────── */

.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 300px;
  padding: 24px;
  border-radius: var(--r-panel);
  overflow: hidden;
  text-decoration: none;
  color: #ffffff;
  isolation: isolate;
}
.cat-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 600ms var(--ease-out);
}
.cat-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(8, 18, 12, 0.05) 0%,
    rgba(8, 18, 12, 0.52) 62%,
    rgba(8, 18, 12, 0.8) 100%
  );
}
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover img {
    transform: scale(1.05);
  }
}
.cat-card h3 {
  font-size: 1.5rem;
  letter-spacing: -0.026em;
}
.cat-card p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  margin-top: 4px;
  max-width: 30ch;
}
.cat-card__go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 0.92rem;
}
.cat-card__go .ico {
  transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .cat-card:hover .cat-card__go .ico {
    transform: translateX(3px);
  }
}

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  padding-block: clamp(24px, 3.5vw, 48px) clamp(44px, 6vw, 84px);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.hero__copy .lead {
  max-width: 44ch;
}
.hero__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.hero__media {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface-media);
  aspect-ratio: 5 / 4;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Collage in plaats van één hero-foto. De collectie is het onderwerp van de
   homepage, dus drie producten naast elkaar zegt meer dan één uitvergroot
   product. Alle drie de vlakken delen dezelfde radius en drager. */
.hero__collage {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 12px;
}
.hero__collage-main,
.hero__collage-side img {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface-media);
}
.hero__collage-main {
  aspect-ratio: 4 / 5;
}
.hero__collage-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__collage-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  min-height: 0;
}
.hero__collage-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 860px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .hero__media {
    aspect-ratio: 4 / 3;
    order: -1;
  }
  .hero__collage {
    order: -1;
  }
  .hero__collage-main {
    aspect-ratio: 1 / 1;
  }
}

/* ── Vertrouwensrij ─────────────────────────────────────────────────────── */

.trust-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 32px);
}
.trust {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}
.trust .ico-lg {
  color: var(--brand-text);
  margin-top: 2px;
}
.trust b {
  display: block;
  font-size: 0.94rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.trust span {
  font-size: 0.85rem;
  color: var(--ink-2);
  line-height: 1.45;
}
@media (max-width: 860px) {
  .trust-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .trust-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Productpagina ──────────────────────────────────────────────────────── */

.pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding-block: clamp(16px, 2.5vw, 32px) var(--section-y);
}

.gallery__main {
  border-radius: var(--r-panel);
  overflow: hidden;
  background: var(--surface-media);
  aspect-ratio: 1 / 1;
}
/* <picture> is alleen een omhulsel en heeft zelf geen afmeting. Zonder deze
   regel valt de height:100% van de <img> erbinnen terug op auto en werkt
   object-fit niet meer. Toegevoegd bij de overstap naar WebP-varianten. */
.gallery__main picture,
.media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.gallery__main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumbs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.gallery__thumb {
  border-radius: var(--r-input);
  overflow: hidden;
  background: var(--surface-media);
  aspect-ratio: 1 / 1;
  border: 1.5px solid transparent;
  padding: 0;
  transition: border-color var(--t-ui) ease,
    transform var(--t-press) var(--ease-out);
}
.gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery__thumb[aria-selected='true'] {
  border-color: var(--brand);
}
.gallery__thumb:active {
  transform: scale(0.96);
}

.pdp__buy {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.price {
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.price__now {
  font-size: 1.72rem;
  font-weight: 600;
  letter-spacing: -0.028em;
}
.price__unit {
  font-size: 0.88rem;
  color: var(--ink-3);
}
/* Doorstreepprijs. Bewust kleiner en grijs: de geldende prijs moet het
   zwaarste wegen, de referentieprijs is bijzaak. */
.price__was {
  font-size: 1.05rem;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
/* De pakketkiezer toont de doorstreep en bespaarchip alleen bij het pack met
   een vergelijkingsprijs; display op .chip wint anders van het hidden-attribuut. */
.price__was[hidden],
.price .chip[hidden] {
  display: none;
}
.p-card__was {
  margin-left: 7px;
  font-size: 0.86rem;
  font-weight: 400;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Pakketkiezer. Radiogroep, geen knoppen: toetsenbord en schermlezer krijgen
   daardoor gratis het juiste gedrag. */
.packs {
  display: grid;
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 0;
}
.pack {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease,
    transform var(--t-press) var(--ease-out);
}
.pack:active {
  transform: scale(0.99);
}
.pack input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pack__dot {
  width: 19px;
  height: 19px;
  border-radius: var(--r-round);
  border: 1.5px solid var(--line-2);
  flex: none;
  display: grid;
  place-items: center;
  transition: border-color var(--t-ui) ease;
}
.pack__dot::after {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: var(--r-round);
  background: var(--brand);
  transform: scale(0.4);
  opacity: 0;
  transition: transform var(--t-ui) var(--ease-out), opacity var(--t-ui) ease;
}
.pack__body {
  flex: 1;
  min-width: 0;
}
.pack__name {
  font-weight: 600;
  font-size: 0.97rem;
}
.pack__note {
  font-size: 0.84rem;
  color: var(--ink-2);
}
.pack__price {
  text-align: right;
  flex: none;
}
.pack__price b {
  display: block;
  font-weight: 600;
}
.pack__price span {
  font-size: 0.8rem;
  color: var(--ink-3);
}
/* Label op de voordeeltegel, half over de bovenrand zoals .p-card__flag. */
.pack__flag {
  position: absolute;
  top: -10px;
  right: 12px;
}
.pack:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
}
.pack:has(input:checked) .pack__dot {
  border-color: var(--brand);
}
.pack:has(input:checked) .pack__dot::after {
  transform: scale(1);
  opacity: 1;
}
.pack:has(input:focus-visible) {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

.usp-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 10px;
}
.usp {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.94rem;
  color: var(--ink-2);
}
.usp .ico {
  color: var(--brand-text);
  font-size: 17px;
  margin-top: 3px;
  flex: none;
}

/* Specificaties als kaarten. Bewust geen rijtabel met een streep onder elke
   regel: dat is de standaard die niemand leest. */
.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}
.spec {
  padding: 18px;
  border-radius: var(--r-ui);
  background: var(--surface);
  border: 1px solid var(--line);
}
.spec b {
  display: block;
  font-size: 1.24rem;
  font-weight: 600;
  letter-spacing: -0.022em;
}
.spec span {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-2);
  margin-top: 3px;
}

@media (max-width: 900px) {
  .pdp {
    grid-template-columns: minmax(0, 1fr);
  }
  .pdp__buy {
    position: static;
  }
}

/* ── Accordeon ──────────────────────────────────────────────────────────── */

.acc {
  border-top: 1px solid var(--line);
}
.acc__item {
  border-bottom: 1px solid var(--line);
}
.acc__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 2px;
  text-align: left;
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.acc__btn .ico {
  color: var(--ink-3);
  font-size: 18px;
  flex: none;
  transition: transform var(--t-ui) var(--ease-out);
}
.acc__item[data-open='true'] .acc__btn .ico {
  transform: rotate(180deg);
}
/* grid-template-rows animeert wél soepel tussen 0fr en 1fr, in tegenstelling
   tot height:auto. Zo hoeven we geen hoogte in JS te meten. */
.acc__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-ui) var(--ease-out);
}
.acc__item[data-open='true'] .acc__panel {
  grid-template-rows: 1fr;
}
.acc__panel > div {
  overflow: hidden;
}
.acc__panel p {
  color: var(--ink-2);
  padding-bottom: 19px;
  max-width: 68ch;
}

/* ── Formulieren ────────────────────────────────────────────────────────── */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field > label {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-2);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-input);
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--t-ui) ease, box-shadow var(--t-ui) ease;
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--ink-3);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.field .hint {
  font-size: 0.8rem;
  color: var(--ink-3);
}
.field .err {
  font-size: 0.82rem;
  color: var(--signal);
  font-weight: 500;
}
.field[data-invalid='true'] input,
.field[data-invalid='true'] select {
  border-color: var(--signal);
}

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 560px) {
  .field-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.checkbox {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--ink-2);
  cursor: pointer;
}
.checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--brand);
  flex: none;
}

/* ── Regels en aantallen ────────────────────────────────────────────────── */

.line {
  display: flex;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.line__media {
  width: 74px;
  height: 74px;
  border-radius: var(--r-input);
  overflow: hidden;
  background: var(--surface-media);
  flex: none;
}
.line__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.line__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.line__name {
  font-weight: 600;
  font-size: 0.96rem;
  letter-spacing: -0.012em;
}
.line__price {
  font-weight: 600;
  white-space: nowrap;
}

.qty {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--line);
  border-radius: var(--r-input);
  overflow: hidden;
  align-self: flex-start;
}
.qty__btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink-2);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease;
}
.qty__btn .ico {
  font-size: 15px;
}
@media (hover: hover) and (pointer: fine) {
  .qty__btn:hover {
    background: var(--paper-2);
    color: var(--ink);
  }
}
.qty__val {
  min-width: 30px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Cart-drawer ────────────────────────────────────────────────────────── */

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 95;
  background: rgba(8, 18, 12, 0.42);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t-panel) var(--ease-drawer),
    visibility 0s linear var(--t-panel);
}
.drawer-backdrop[data-open='true'] {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 96;
  width: min(420px, 100%);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-lg);
  /* Percentage in translate is relatief aan de eigen breedte: werkt dus
     ongeacht hoe breed het paneel op dit scherm uitvalt. */
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-panel) var(--ease-drawer),
    visibility 0s linear var(--t-panel);
}
.drawer[data-open='true'] {
  transform: translateX(0);
  visibility: visible;
  transition-delay: 0s;
}
.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}
.drawer__head h2 {
  font-size: 1.06rem;
}
.drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0 18px;
  overscroll-behavior: contain;
}
.drawer__foot {
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 12px;
}
/* Staat het vertrouwensblok eronder, dan verhuist de safe-area-marge daarheen. */
.drawer__foot:not(:last-child) {
  padding-bottom: 14px;
}

/* Vertrouwensblok onderin de lade: betaallogo's plus drie vaste zekerheden uit
   trust_points(). Server-side gerenderd; app.js toont hem alleen bij een
   gevulde winkelwagen. */
.drawer__trust {
  padding: 12px 18px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
}
.trust-lines {
  list-style: none;
  display: grid;
  gap: 6px;
}
.trust-lines li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.trust-lines .ico {
  color: var(--brand);
  flex: none;
}

/* Merkbreed bewijspunt bovenin het vertrouwensblok van de lade. */
.drawer__proof {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.drawer__proof .stars {
  font-size: 13px;
}
.drawer__proof b {
  color: var(--ink-2);
}

/* Betaallogo's, in de lade en in de footer. De afbeeldingen komen uit Mollie
   zelf (mollie_active_methods), dus er staat nooit een merk dat op dat moment
   niet actief is. */
.paylogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.paylogo-img {
  height: 24px;
  width: auto;
  border-radius: 4px;
}
.paylogo {
  font-size: 0.78rem;
  color: var(--ink-3);
}

/* Rustige tekstlink onder de checkout-knop. */
.drawer__cartlink {
  justify-self: center;
  font-size: 0.85rem;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Compacte score naast de productnaam in de lade. */
.line__rating {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--ink-2);
  align-self: flex-start;
}
.line__rating .ico {
  color: var(--brand-text);
  font-size: 12px;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.92rem;
  color: var(--ink-2);
}
.sum-row--total {
  font-size: 1.06rem;
  font-weight: 600;
  color: var(--ink);
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.sum-row--save {
  color: var(--brand-text);
  font-weight: 500;
}

.ship-bar {
  height: 5px;
  border-radius: var(--r-round);
  background: var(--line);
  overflow: hidden;
}
.ship-bar > i {
  display: block;
  height: 100%;
  background: var(--brand);
  border-radius: inherit;
  transition: width 420ms var(--ease-out);
}

/* Suggestie onder de verzendbalk: zet hier één product bij en de verzending is
   gratis. Bewust rustiger dan een productkaart, want het is een zetje en geen
   tweede etalage. */
.upsell {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--paper-2);
}
.upsell__media {
  width: 48px;
  height: 48px;
  border-radius: var(--r-chip);
  overflow: hidden;
  background: var(--surface-media);
  flex: none;
}
.upsell__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.upsell__body {
  flex: 1;
  min-width: 0;
}
.upsell__name {
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upsell .btn {
  flex: none;
}

/* ── Winkelwagenpagina en kassa ─────────────────────────────────────────── */

.cart-layout,
.co-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: start;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  padding: clamp(18px, 2.2vw, 26px);
}
.panel--sticky {
  position: sticky;
  top: calc(var(--header-h) + 20px);
}
@media (max-width: 900px) {
  .cart-layout,
  .co-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .panel--sticky {
    position: static;
  }
}

.pay-methods {
  display: grid;
  gap: 10px;
}
.pay-method {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.pay-method input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pay-method img {
  height: 24px;
  width: auto;
}
.pay-method span {
  font-weight: 500;
  font-size: 0.95rem;
}
.pay-method:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
}
.pay-method:has(input:focus-visible) {
  outline: 2px solid var(--brand-text);
  outline-offset: 2px;
}

/* Order-bump: hoort erbij te ogen, niet te schreeuwen. */
.bump {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 15px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-ui);
  background: var(--paper-2);
  cursor: pointer;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.bump:has(input:checked) {
  border-style: solid;
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 60%, var(--paper-2));
}
.bump img {
  width: 54px;
  height: 54px;
  border-radius: var(--r-input);
  object-fit: cover;
  background: var(--surface-media);
  flex: none;
}

/* ── Sticky koopbalk (mobiel) ───────────────────────────────────────────── */

.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  display: none;
  gap: 12px;
  align-items: center;
  padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform var(--t-panel) var(--ease-drawer);
}
.sticky-buy[data-show='true'] {
  transform: translateY(0);
}
.sticky-buy .btn {
  flex: 1;
}
@media (max-width: 900px) {
  .sticky-buy {
    display: flex;
  }
  body:has(.sticky-buy) {
    padding-bottom: 78px;
  }
}

/* ── Kruimelpad ─────────────────────────────────────────────────────────── */

.crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.84rem;
  color: var(--ink-3);
  padding-block: 18px 4px;
}
.crumbs a {
  text-decoration: none;
  color: var(--ink-3);
  transition: color var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .crumbs a:hover {
    color: var(--ink);
  }
}
.crumbs .ico {
  font-size: 13px;
  opacity: 0.55;
}

/* ── Artikel (gids) ─────────────────────────────────────────────────────── */

.prose {
  font-family: var(--font-serif);
  font-size: 1.16rem;
  line-height: 1.72;
  color: var(--ink);
}
.prose > * + * {
  margin-top: 1.15em;
}
.prose h2 {
  font-family: var(--font-sans);
  font-size: clamp(1.3rem, 1.15rem + 0.7vw, 1.6rem);
  margin-top: 2em;
}
.prose h3 {
  font-family: var(--font-sans);
  margin-top: 1.6em;
}
.prose ul,
.prose ol {
  padding-left: 1.15em;
}
.prose li + li {
  margin-top: 0.4em;
}
.prose a {
  color: var(--brand-text);
  font-weight: 500;
}
.prose blockquote {
  border-left: 2px solid var(--brand);
  padding-left: 1.1em;
  font-style: italic;
  color: var(--ink-2);
}
.prose strong {
  font-weight: 600;
}

/* Inline productverwijzing. Elk artikel wijst naar precies één product; meer
   maakt het een advertentie in plaats van een uitleg. */
.article-cta {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 18px;
  border-radius: var(--r-panel);
  background: var(--paper-2);
  text-decoration: none;
  color: inherit;
  font-family: var(--font-sans);
  transition: background-color var(--t-ui) ease;
}
.article-cta img {
  width: 76px;
  height: 76px;
  border-radius: var(--r-input);
  object-fit: cover;
  background: var(--surface-media);
  flex: none;
}
.article-cta__body {
  flex: 1;
  min-width: 0;
}
.article-cta b {
  display: block;
  font-size: 1rem;
  letter-spacing: -0.014em;
}
.article-cta span {
  font-size: 0.88rem;
  color: var(--ink-2);
}

.art-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}
.art-card__media {
  border-radius: var(--r-panel);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--surface-media);
}
.art-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .art-card:hover .art-card__media img {
    transform: scale(1.035);
  }
}
.art-card h3 {
  font-size: 1.08rem;
}
.art-card p {
  font-size: 0.9rem;
  color: var(--ink-2);
}

/* ── Documentpagina's (juridisch, klantenservice) ───────────────────────────
   Schreefloos, in tegenstelling tot .prose: dit zijn teksten die je doorzoekt,
   geen teksten die je uitleest. Wel dezelfde ruime regelafstand.            */

.doc {
  max-width: 68ch;
}
.doc > * + * {
  margin-top: 1.05em;
}
.doc h2 {
  font-size: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);
  margin-top: 2.2em;
}
.doc h3 {
  margin-top: 1.7em;
}
.doc ul,
.doc ol {
  padding-left: 1.2em;
  color: var(--ink-2);
}
.doc li + li {
  margin-top: 0.4em;
}
.doc p {
  color: var(--ink-2);
}
.doc a {
  color: var(--brand-text);
  font-weight: 500;
}
.doc dt {
  font-weight: 600;
  margin-top: 1.2em;
}
.doc dd {
  margin: 4px 0 0;
  color: var(--ink-2);
}

/* Uitgelicht kader binnen een documentpagina (modelformulier, adresblok). */
.doc-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  padding: 20px 22px;
  font-size: 0.94rem;
}

/* ── Tabellen (alleen waar een tabel echt een tabel is) ─────────────────── */

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.94rem;
  min-width: 480px;
}
table.data th,
table.data td {
  text-align: left;
  padding: 13px 14px;
  vertical-align: top;
}
table.data thead th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-3);
  font-weight: 600;
  border-bottom: 1px solid var(--line-2);
}
table.data tbody tr + tr {
  border-top: 1px solid var(--line);
}
.num {
  font-variant-numeric: tabular-nums;
}

/* ── Lege en meldingsstaten ─────────────────────────────────────────────── */

.empty {
  text-align: center;
  padding: clamp(40px, 6vw, 72px) 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.empty .ico-lg {
  width: 30px;
  height: 30px;
  color: var(--ink-3);
}

.note {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--r-ui);
  background: var(--paper-2);
  font-size: 0.9rem;
  color: var(--ink-2);
}
.note .ico {
  font-size: 18px;
  flex: none;
  margin-top: 2px;
  color: var(--ink-3);
}
.note--brand {
  background: var(--brand-soft);
  color: var(--ink);
}
.note--brand .ico {
  color: var(--brand-text);
}
.note--warn {
  background: var(--signal-soft);
  color: var(--ink);
}
.note--warn .ico {
  color: var(--signal);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  background: var(--brand-deep);
  color: #c9d8cd;
  padding-block: clamp(44px, 5vw, 72px) 28px;
  margin-top: clamp(48px, 6vw, 96px);
}
.site-footer a {
  color: #c9d8cd;
  text-decoration: none;
  transition: color var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .site-footer a:hover {
    color: #ffffff;
  }
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
}
.footer-brand .logo-word {
  color: #ffffff;
}
.footer-brand .logo-mark {
  color: #8ed2a9;
}
.footer-brand p {
  margin-top: 12px;
  font-size: 0.9rem;
  max-width: 34ch;
  color: #a4b8aa;
}
.footer-col h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  color: #ffffff;
  margin-bottom: 12px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 9px;
  font-size: 0.9rem;
}
.footer-bottom {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: #9ab0a1;
}
.pay-logos {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pay-logos img {
  height: 22px;
  width: auto;
  border-radius: 4px;
  background: #ffffff;
  padding: 2px 4px;
}
@media (max-width: 820px) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .footer-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Videoblok op de productpagina (zelfde afronding als ander beeld). */
.media--video video {
  display: block;
  width: 100%;
  height: auto;
}

/* Verzendbelofte direct onder de koopknop. */
.buy-note {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.8rem;
  color: var(--ink-3);
}
.buy-note .ico {
  color: var(--brand);
  flex: none;
}

/* ── Koperbeoordelingen: carrousel op de productpagina ───────────────────── */

.testi-nav {
  display: flex;
  gap: 8px;
}
@media (max-width: 640px) {
  /* Op touch veeg je; de pijltjes zouden alleen de kop naar beneden duwen. */
  .testi-nav {
    display: none;
  }
}
.testi-nav__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.testi-nav__btn:hover {
  border-color: var(--brand);
  color: var(--brand-text);
}
.testi-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(300px, 80vw);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 4px 4px 10px;
  /* Scrollbalk verstopt: .testi-progress hieronder neemt die rol over. */
  scrollbar-width: none;
}
.testi-track::-webkit-scrollbar {
  display: none;
}
.testi-progress {
  width: 140px;
  height: 3px;
  margin: 16px auto 0;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.testi-progress__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--brand);
  width: 30%;
}
.testi {
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  overflow: hidden;
}
.testi__img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  background: var(--paper-2);
}
.testi__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;
  padding: 15px 16px 16px;
  flex: 1;
}
.testi__body .stars {
  font-size: 15px;
}
.testi__text {
  font-size: 0.9rem;
  color: var(--ink-2);
  flex: 1;
  /* Eén uitschieter mag de hele rij niet oprekken; alleen de langste
     teksten knippen visueel af, de rest past ruim binnen tien regels. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 10;
  overflow: hidden;
}
.testi__name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-3);
}
.testi--text .testi__text {
  font-size: 1rem;
}

/* ── Klantreviews: kaarten op de productpagina en het formulier op /review ─ */

.review-list {
  display: grid;
  gap: 14px;
}
.review-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  padding: 16px 18px;
}

.review-form {
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--surface);
  padding: 16px 18px;
  display: grid;
  gap: 12px;
}
.review-form legend {
  font-weight: 600;
  padding: 0 4px;
}
.review-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-input);
  background: var(--paper);
  font: inherit;
  color: var(--ink);
  resize: vertical;
  transition: border-color var(--t-ui) ease;
}
.review-form textarea:focus {
  outline: none;
  border-color: var(--brand);
}

.score-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.score-pick__opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.score-pick__opt span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1.5px solid var(--line-2);
  border-radius: var(--r-input);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--t-ui) ease, border-color var(--t-ui) ease,
    color var(--t-ui) ease;
}
.score-pick__opt input:checked + span {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--brand-ink);
}
.score-pick__opt input:focus-visible + span {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Gereserveerde keurmerkplek (config 'trustmark'); rendert pas na aansluiting. */
.trustmark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.trustmark img {
  display: block;
  height: 36px;
  width: auto;
}

/* ── Cookiemelding ──────────────────────────────────────────────────────── */

.consent {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 100;
  max-width: 520px;
  margin-inline: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-lg);
  padding: 18px;
  display: grid;
  gap: 12px;
}
.consent p {
  font-size: 0.88rem;
  color: var(--ink-2);
}
.consent .row {
  gap: 8px;
}
/* Beide keuzes even breed en even groot; "Akkoord" heeft sinds 28-07-2026 wel
   de primaire vulkleur (verzoek gebruiker). Weigeren blijft één even grote
   knop met dezelfde ene klik, dus binnen de leidraad. */
.consent__actions .btn {
  flex: 1 1 0;
  /* Zonder min-width:0 krimpt een flex-item niet onder zijn min-content, en dan
     wordt de knop met het langste label vanzelf de breedste. */
  min-width: 0;
  justify-content: center;
}
/* Stap 2: de categorieën als aanvinkbare rijen. */
.consent__step {
  display: grid;
  gap: 12px;
}
/* display:grid hierboven wint anders van het hidden-attribuut (UA-stylesheet). */
.consent__step[hidden] {
  display: none;
}
.consent__opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  font-size: 0.85rem;
  color: var(--ink-2);
  cursor: pointer;
}
.consent__opt input {
  margin-top: 2px;
  accent-color: var(--brand);
  flex: none;
}
.consent__opt b {
  color: var(--ink);
}

/* ── Motion: scroll-onthulling ──────────────────────────────────────────────
   Doel is hiërarchie, niet versiering: een sectie meldt zich aan als je hem
   bereikt. Eén keer, kort, en nooit blokkerend voor interactie.             */

[data-reveal] {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}
/* Zonder JS moet alles gewoon zichtbaar zijn. */
.no-js [data-reveal] {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
  /* Kleurwissels mogen blijven: die helpen begrijpen wat er gebeurt en
     veroorzaken geen bewegingsklachten. */
  a,
  .btn,
  .nav a,
  .field input {
    transition-duration: 120ms !important;
  }
}

/* ── Advertorial (/artikel/<slug>) ──────────────────────────────────────── */
/* Artikel dat opbouwt naar één product. Leest als de gids (.prose), koopt als
   de productpagina. De koopbalk onderin is hier op elk formaat zichtbaar en
   bevat de pakketkeuze; op de productpagina blijft .sticky-buy mobiel-only. */

.advertorial .kicker {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: 12px;
}
.advertorial h1 {
  max-width: 21ch;
}
.adv-meta {
  margin-top: 14px;
}

/* Aanbodkaart: koopblok in het artikelritme. */
.adv-offer {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 26px;
  align-items: start;
  padding: 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
}
.adv-offer__media img {
  width: 100%;
  height: auto;
  border-radius: var(--r-ui);
}
.adv-offer__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.adv-offer__body h2 {
  font-size: 1.35rem;
}
@media (max-width: 700px) {
  .adv-offer {
    grid-template-columns: 1fr;
    padding: 18px;
  }
}

/* Koopbalk-variant: ook op desktop zichtbaar, met de pakketkeuze erin. */
.sticky-buy--adv {
  display: flex;
  flex-wrap: wrap;
  row-gap: 10px;
}
/* Ruimte onder de pagina zodat de vaste balk niets bedekt. Mobiel staan de
   pakketpillen boven de knop (twee regels per pil sinds het voordeelbedrag erin
   staat), op desktop passen ze ernaast — vandaar twee waarden. Verandert de
   inhoud van de balk, dan moeten deze mee. */
body:has(.sticky-buy--adv) {
  padding-bottom: 168px;
}
@media (min-width: 901px) {
  body:has(.sticky-buy--adv) {
    padding-bottom: 96px;
  }
}
.sticky-buy--adv .sticky-buy__packs {
  flex-basis: 100%;
}
.sticky-buy--adv .sticky-buy__packs fieldset {
  display: flex;
  gap: 8px;
  border: 0;
  padding: 0;
  margin: 0;
}
.sticky-buy--adv .sticky-buy__row {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
}
.sticky-buy--adv .sticky-buy__row > div:first-child {
  min-width: 0;
}
.sticky-buy--adv .sticky-buy__row .btn {
  flex: 1;
}
.sticky-buy--adv .price__was {
  font-size: 0.85rem;
  margin-left: 7px;
}
@media (min-width: 901px) {
  .sticky-buy--adv > * {
    max-width: 720px;
    margin-inline: auto;
    width: 100%;
  }
}

/* Pakket-pil: compacte radiotegel in de koopbalk. Zelfde patroon als .pack
   (input onzichtbaar, :has kleurt de rand), maar in twee regels: naam boven,
   prijs eronder. Twee regels omdat het voordeelbedrag mee moet — naast naam én
   prijs op één regel past dat op een telefoon niet. */
.sticky-pill {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: var(--r-ui);
  background: var(--surface);
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.3;
  transition: border-color var(--t-ui) ease, background-color var(--t-ui) ease;
}
.sticky-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.sticky-pill__label {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.sticky-pill__line {
  display: flex;
  align-items: center;
  gap: 7px;
  /* Op een zeer smalle telefoon zakt het voordeellabel netjes onder de prijs
     in plaats van de pil uit de balk te duwen. */
  flex-wrap: wrap;
}
.sticky-pill__price {
  color: var(--ink-3);
  white-space: nowrap;
}
/* Voordeelpil: de aanbieding moet uit de balk springen, óók als hij niet gekozen
   is. Klei is de enige signaalkleur in het systeem: het label krijgt die tint en
   de rand een gedempte versie ervan. Groen blijft zo voorbehouden aan "dit
   vakje staat aan", dus voordeel en keuze zijn twee losse signalen. */
.sticky-pill--deal {
  border-color: color-mix(in srgb, var(--signal) 45%, var(--line));
  box-shadow: var(--shadow-sm);
}
.sticky-pill--deal .sticky-pill__price {
  color: var(--ink);
  font-weight: 600;
}
.sticky-pill__save {
  padding: 2px 7px;
  font-size: 0.7rem;
}
.sticky-pill:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand-soft) 55%, var(--surface));
}
.sticky-pill:has(input:checked) .sticky-pill__price {
  color: var(--ink);
}
.sticky-pill:has(input:focus-visible) {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ── Printen (orderbevestiging, herroepingsformulier) ───────────────────── */

@media print {
  .site-header,
  .site-footer,
  .announce,
  .sticky-buy,
  .drawer,
  .drawer-backdrop,
  .consent,
  .skip {
    display: none !important;
  }
  body {
    background: #ffffff;
    color: #000000;
  }
  .panel {
    border: 1px solid #cccccc;
  }
}