/* =============================================================================
   fotografie-presets.nl — Main Stylesheet
   Mobile-first, licht thema Ivoor, Playfair Display + Inter
   ============================================================================= */

/* 1. Lokale fonts (self-hosted, geen FOUT van externe CDN)
   ============================================================================= */

/* Playfair Display — italic 400 & 700 (variable) */
@font-face {
  font-family: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/pd-italic-latin-ext.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: 'Playfair Display';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/pd-italic-latin.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;
}

/* Playfair Display — normal 700 */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/pd-700-latin-ext.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: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/pd-700-latin.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;
}

/* Outfit — 400/600/700 (variable, admin gebruik) */
@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/outfit-latin-ext.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: 'Outfit';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/outfit-latin.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;
}

/* Inter — 300/400/600 (variable) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-latin-ext.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: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('/fonts/inter-latin.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;
}

/* 2. Custom properties
   ============================================================================= */
:root {
  /* Brand colors — Ivoor licht thema */
  --kleur-bg:            #FEFCF7;
  --kleur-surface:       #F5F0E8;
  --kleur-terracotta:    #B89648;  /* goud — secundaire acties */
  --kleur-petrol:        #8A6D2E;  /* goud (licht thema, WCAG AA als tekst); donker thema overschrijft naar #B89648 */
  --kleur-goud:          #8A6D2E;
  --kleur-cta:           #5B4B8A;  /* aubergine — hoofd-CTA (abonnement), complement van goud */
  --kleur-cta-hover:     #4A3D73;
  --kleur-tekst:         #141210;
  --kleur-tekst-zacht:   #6D6560;

  /* Knoppen */
  --knop-primair-bg:      #B89648;
  --knop-primair-tekst:   #1A1208;
  --knop-secundair-bg:    #F5F0E8;
  --knop-secundair-tekst: #141210;

  /* Typografie */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* Aliassen voor achterwaartse compatibiliteit met bestaande CSS */
  --bg:        var(--kleur-bg);
  --card:      var(--kleur-surface);
  --accent:    #8A6D2E;
  --blue:      #B89648;
  --text:      var(--kleur-tekst);
  --muted:     var(--kleur-tekst-zacht);
  --border:    rgba(20,18,16,0.10);
  --danger:    #C0392B;
  --success:   #2E7D50;
  --warning:   #B35E1E;
  --card-hover: #EAE4D8;

  /* Spacing scale — 0.25rem steps */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;

  /* Tekstgroottes */
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* Borders & radii */
  --radius:    6px;
  --radius-lg: 12px;
  --radius-xl: 18px;

  /* Schaduwen */
  --shadow-sm: 0 1px 3px rgba(20,18,16,0.06);
  --shadow:    0 4px 12px rgba(20,18,16,0.09);
  --shadow-lg: 0 8px 32px rgba(20,18,16,0.14);

  /* Transitions */
  --transition: 200ms ease;
}

/* Donker thema — geactiveerd via data-thema="donker" op <body> */
[data-thema="donker"] {
  --kleur-bg:            #161210;
  --kleur-surface:       #231D17;
  --kleur-tekst:         #F5EDE6;
  --kleur-tekst-zacht:   #B5A99E;

  --knop-primair-bg:      #B89648;
  --knop-primair-tekst:   #1A1208;
  --knop-secundair-bg:    #2A2620;
  --knop-secundair-tekst: #E8E2D8;

  --bg:        var(--kleur-bg);
  --card:      var(--kleur-surface);
  --accent:    #B89648;
  /* Donker thema: helder goud blijft leesbaar op donkere achtergrond */
  --kleur-petrol: #B89648;
  --kleur-goud:   #B89648;
  --text:      var(--kleur-tekst);
  --muted:     var(--kleur-tekst-zacht);
  --border:    rgba(255,255,255,0.10);
  --card-hover: #2E261E;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.4);
  --shadow:    0 4px 12px rgba(0,0,0,0.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.7);
}

/* 3. CSS Reset
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Sticky footer: main vult de ruimte zodat de footer (margin-top:auto)
   netjes naar onderen zakt op korte pagina's i.p.v. tegen de content te plakken. */
main {
  flex: 1 0 auto;
  padding-bottom: var(--space-8);
}

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

a {
  color: var(--kleur-petrol);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--kleur-terracotta);
}

[data-thema="donker"] a {
  color: var(--kleur-terracotta);
}

[data-thema="donker"] a:hover {
  color: var(--kleur-tekst);
}

ul,
ol {
  list-style: none;
}

button {
  cursor: pointer;
  font-family: inherit;
  border: none;
  background: none;
}

input,
textarea,
select {
  font-family: inherit;
  font-size: inherit;
}

table {
  border-collapse: collapse;
  width: 100%;
}

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

/* 4. Typography
   ============================================================================= */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  line-height: 1.15;
  color: var(--kleur-tekst);
}

h5, h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  color: var(--kleur-tekst);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); font-weight: 400; font-style: normal; }
h4 { font-size: var(--text-lg); font-weight: 400; font-style: normal; }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

.label-caps {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}

p {
  color: var(--text);
  line-height: 1.7;
}

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

strong {
  font-weight: 700;
}

em {
  font-style: italic;
}

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

/* 5. Layout — container and grid
   ============================================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.grid-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.flex {
  display: flex;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-center {
  align-items: center;
}

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

.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); }

/* Section spacing helper */
.section {
  padding-block: 5rem;
}

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

.section--lg {
  padding-block: 7rem;
}

/* 6. Header
   ============================================================================= */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--bg);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-3);
}

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

.header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
}

.header__logo-text {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.header__logo-text span {
  color: var(--accent);
}

.header__logo-image {
  height: 32px;
  width: auto;
}

.header__nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.header__nav-link {
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.header__nav-link:hover,
.header__nav-link--active {
  color: var(--text);
}

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

.header__lang-switcher {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.header__lang-btn {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  text-decoration: none;
}

.header__lang-btn:hover,
.header__lang-btn--active {
  color: var(--text);
  background-color: var(--card);
}

.header__search-link {
  color: var(--muted);
  display: flex;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  text-decoration: none;
}

.header__search-link:hover {
  color: var(--text);
  background-color: var(--card);
}

.header__search-link svg {
  width: 18px;
  height: 18px;
}

.header__menu-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--text);
  border-radius: var(--radius);
  transition: background-color var(--transition);
}

.header__menu-btn:hover {
  background-color: var(--card);
}

/* 7. Hero section
   ============================================================================= */
.hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  background-color: var(--kleur-surface);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.35;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(253, 248, 245, 0.3) 0%,
    rgba(240, 224, 214, 0.55) 60%,
    rgba(240, 224, 214, 0.90) 100%
  );
}

[data-thema="donker"] .hero__overlay {
  background: linear-gradient(
    to bottom,
    rgba(22, 18, 16, 0.3) 0%,
    rgba(22, 18, 16, 0.65) 60%,
    rgba(22, 18, 16, 0.95) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  padding-block: var(--space-16);
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.hero__inner {
  position: relative;
  z-index: 1;
  padding-block: var(--space-16);
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.hero__title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: 300;
  font-style: italic;
  line-height: 1.1;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-4);
}

.hero__title span {
  color: var(--kleur-petrol);
}

[data-thema="donker"] .hero__title span {
  color: var(--kleur-terracotta);
}

.hero__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--space-8);
  line-height: 1.75;
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* 8. Pack card
   ============================================================================= */
.pack-card {
  position: relative;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.pack-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: #3a3a3a;
}

.pack-card__image-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #111;
}

.pack-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.pack-card:hover .pack-card__image {
  transform: scale(1.04);
}

.pack-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background-color: var(--accent);
  color: #0d0d0d;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  z-index: 1;
}
.pack-card__badge--premium {
  background-color: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
}
.pack-card__badge--gratis {
  background-color: var(--success);
  color: #fff;
}
.pack-card__price--premium {
  font-size: var(--text-sm);
  color: var(--primary);
  font-weight: 600;
}
.badge--premium {
  display: inline-block;
  background-color: var(--primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius);
}
.premium-pack-cta {
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.premium-pack-cta__label {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.premium-pack-cta__desc {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--muted);
}

.pack-card__body {
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

.pack-card__name {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}

.pack-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
  flex: 1;
}

.pack-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.pack-card__count {
  font-size: var(--text-sm);
  color: var(--muted);
}

.pack-card__price {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--accent);
}

.pack-card__price--free {
  color: var(--success);
}

/* 9. Preset card
   ============================================================================= */
.preset-card {
  position: relative;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--transition),
    box-shadow var(--transition),
    border-color var(--transition);
  display: flex;
  flex-direction: column;
}

.preset-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: #3a3a3a;
}

.preset-card__image-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: #111;
}

.preset-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.preset-card:hover .preset-card__image {
  transform: scale(1.04);
}

.preset-card__cat {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  background-color: rgba(13,13,13,0.8);
  color: var(--text);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
}

.preset-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
}

.preset-card__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text);
}

.preset-card__desc {
  font-size: var(--text-sm);
  color: var(--muted);
  flex: 1;
  line-height: 1.5;
}

.preset-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-3);
}

.preset-card__price {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--accent);
}

.preset-card__buy {
  font-size: var(--text-sm);
  font-weight: 600;
  background-color: var(--accent);
  color: #0d0d0d;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  transition: background-color var(--transition), transform var(--transition);
  text-decoration: none;
  display: inline-block;
}

.preset-card__buy:hover {
  background-color: #ffc14d;
  color: #0d0d0d;
  transform: translateY(-1px);
}

/* 10. Subscription comparison
    ============================================================================= */
.abonnementen-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  align-items: stretch;
}

.abo-kolom {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  transition: border-color var(--transition);
}

.abo-kolom--aanbevolen {
  border-color: var(--kleur-cta);
  position: relative;
}

.abo-kolom__badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  background-color: var(--kleur-cta);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  font-family: var(--font-body);
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius);
  white-space: nowrap;
}

.abo-kolom__name,
.abo-kolom__naam {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-3xl);
  color: var(--text);
  margin: 0;
}

.abo-kolom__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.abo-kolom__price,
.abo-kolom__prijs {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.abo-kolom__bedrag-wrap {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.abo-kolom__bedrag {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--accent);
  line-height: 1;
}

.abo-kolom__periode {
  font-size: var(--text-sm);
  color: var(--muted);
}

.abo-kolom__subprijs {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

.abo-kolom__subprijs .abo-kolom__besparing {
  color: var(--success);
  font-weight: 600;
}

.abo-kolom__jaar {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

.abo-kolom__desc {
  font-size: var(--text-sm);
  color: var(--muted);
}

.abo-kolom__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
}

.abo-kolom__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text);
}

.abo-kolom__features li::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  min-width: 16px;
  background-color: var(--success);
  border-radius: 50%;
  margin-top: 2px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.abo-kolom__features li.unavailable {
  color: var(--muted);
}

.abo-kolom__features li.unavailable::before {
  background-color: var(--border);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M3 3l6 6M9 3l-6 6' stroke='%23888' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

.abo-kolom__cta {
  margin-top: var(--space-2);
}

.abo-kolom__herroeping {
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  margin-top: var(--space-3);
  margin-bottom: 0;
}

.abo-gratis-nudge {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-6);
}

.abo-gratis-nudge a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn--block {
  display: block;
  width: 100%;
  text-align: center;
}

/* 11. Before/after tester
    ============================================================================= */
.tester {
  width: 100%;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background-color: #111;
  border: 1px solid var(--border);
}

.tester__upload {
  padding: var(--space-10) var(--space-4);
  text-align: center;
}
.tester__upload-link {
  display: inline-block;
  cursor: pointer;
  color: var(--kleur-goud);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tester__upload-link:hover { color: #fff; }

.tester__canvas-wrap {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  user-select: none;
}

.tester__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tester__canvas--after {
  clip-path: inset(0 0 0 50%);
}

.tester__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 2;
}

.tester__handle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background-color: #fff;
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.tester__slider {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.tester__watermark {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  background-color: rgba(13,13,13,0.7);
  color: var(--muted);
  font-size: 0.65rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  backdrop-filter: blur(4px);
  pointer-events: none;
  z-index: 5;
  letter-spacing: 0.04em;
}

.tester__labels {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border);
}

.tester__label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
}

/* 12. Admin layout
    ============================================================================= */
.admin-layout {
  display: flex;
  min-height: 100vh;
}

.admin-sidebar {
  width: 220px;
  min-width: 220px;
  background-color: var(--card);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) 0;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  z-index: 50;
}

.admin-sidebar__logo {
  padding: 0 var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.admin-sidebar__logo-text {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text);
}

.admin-sidebar__logo-text span {
  color: var(--accent);
}

.admin-sidebar__section {
  padding: var(--space-2) var(--space-4) var(--space-1);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  font-weight: 600;
}

.admin-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-3);
}

.admin-sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

.admin-sidebar__link:hover {
  color: var(--text);
  background-color: var(--bg);
}

.admin-sidebar__link--active {
  color: var(--text);
  background-color: var(--bg);
}

.admin-sidebar__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-main {
  flex: 1;
  margin-left: 220px;
  padding: var(--space-8);
  min-width: 0;
}

.admin-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.admin-topbar__title {
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* 13. Form elements
    ============================================================================= */
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.form-group + .form-group {
  margin-top: var(--space-4);
}

label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
}

label .required {
  color: var(--danger);
  margin-left: 2px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select {
  width: 100%;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text);
  font-size: var(--text-base);
  padding: var(--space-3) var(--space-4);
  transition: border-color var(--transition), outline-color var(--transition);
  outline: 2px solid transparent;
  outline-offset: 2px;
  -webkit-appearance: none;
  appearance: none;
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="password"]::placeholder,
input[type="search"]::placeholder,
textarea::placeholder {
  color: var(--muted);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.4;
}

.form-error {
  font-size: var(--text-sm);
  color: var(--danger);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* 14. Buttons
    ============================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 0;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition),
    color var(--transition),
    transform var(--transition),
    box-shadow var(--transition);
  white-space: nowrap;
  line-height: 1;
}

.btn:focus-visible {
  outline: 2px solid var(--kleur-goud);
  outline-offset: 3px;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Primaire actie = aubergine (sitewide). Goud is verplaatst naar .btn--goud
   (promo/secundair), zodat er nog maar één kleur "hoofdknop" betekent. */
.btn--primary {
  background-color: var(--kleur-cta);
  color: #fff;
}

.btn--primary:hover:not(:disabled) {
  background-color: var(--kleur-cta-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

[data-thema="donker"] .btn--primary {
  color: #fff;
}

/* Goud als promo/secundair-accent (bv. "Pack van de maand"). */
.btn--goud {
  background-color: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
}
.btn--goud:hover:not(:disabled) {
  background-color: #9E8238;
  color: var(--knop-primair-tekst);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
[data-thema="donker"] .btn--goud,
[data-thema="donker"] .btn--goud:hover:not(:disabled) {
  color: var(--knop-primair-tekst);
}

/* Nav CTA-knop in donker thema: override de globale a-kleur (goud-op-goud = onleesbaar) */
[data-thema="donker"] .site-nav__link--cta {
  color: var(--knop-primair-tekst);
}
[data-thema="donker"] .site-nav__link--cta:hover {
  color: var(--knop-primair-tekst);
}

[data-thema="donker"] .btn--secondary {
  color: var(--knop-secundair-tekst);
  border-color: rgba(232,226,216,0.3);
}

[data-thema="donker"] .btn--primary:hover:not(:disabled) {
  background-color: var(--kleur-cta-hover);
  color: #fff;
}

/* Hoofd-CTA (abonnement): afwijkende aubergine zodat de conversie-actie opvalt
   tussen de goudkleurige knoppen. Complement van goud, gelijk in beide thema's. */
.btn--cta {
  background-color: var(--kleur-cta);
  color: #fff;
}
.btn--cta:hover:not(:disabled) {
  background-color: var(--kleur-cta-hover);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}
[data-thema="donker"] .btn--cta,
[data-thema="donker"] .btn--cta:hover:not(:disabled) {
  color: #fff;
}

.btn--secondary {
  background-color: var(--knop-secundair-bg);
  color: var(--knop-secundair-tekst);
  border: 1.5px solid rgba(20,18,16,0.4);
}

.btn--secondary:hover:not(:disabled) {
  background-color: #EAE4D8;
  color: var(--knop-secundair-tekst);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

[data-thema="donker"] .btn--secondary:hover:not(:disabled) {
  background-color: #2A2620;
  color: var(--knop-secundair-tekst);
}

.btn--danger {
  background-color: var(--danger);
  color: #fff;
}

.btn--danger:hover:not(:disabled) {
  filter: brightness(0.9);
  color: #fff;
  transform: translateY(-1px);
}

.btn--ghost {
  background-color: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--text);
  background-color: var(--card);
}

.btn--sm {
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-4);
}

.btn--lg {
  font-size: var(--text-lg);
  padding: var(--space-4) var(--space-8);
}

.btn--full {
  width: 100%;
}

.btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.btn--sm svg {
  width: 14px;
  height: 14px;
}

/* 15. Promo banner
    ============================================================================= */
.promo-banner {
  background: var(--petrol, #27729a);
  color: #fff;
  text-align: center;
  padding: .6rem 1rem;
  font-size: var(--text-sm);
}

.promo-banner__text {
  margin: 0;
  line-height: 1.4;
}

.promo-banner__link {
  color: #fff;
  font-weight: 600;
  text-decoration: underline;
  margin-left: .4rem;
  white-space: nowrap;
}

.promo-banner__link:hover {
  opacity: .85;
}

/* 16. Cookie banner
    ============================================================================= */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background-color: #111;
  border-top: 1px solid var(--border);
  padding: var(--space-4);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.5);
}

.cookie-banner__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.cookie-banner__text {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--accent);
}

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

/* 16. Tables
    ============================================================================= */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  background-color: #111;
  color: var(--muted);
  font-weight: 700;
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--border);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  color: var(--text);
  vertical-align: middle;
}

.table tbody tr:nth-child(even) td {
  background-color: rgba(255,255,255,0.02);
}

.table tbody tr:hover td {
  background-color: rgba(255,255,255,0.04);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.table-wrap .table th:first-child { border-radius: var(--radius) 0 0 0; }
.table-wrap .table th:last-child  { border-radius: 0 var(--radius) 0 0; }

/* 17. Utility classes
    ============================================================================= */
.text-muted  { color: var(--muted); }
.text-accent { color: var(--accent); }
.text-sm     { font-size: var(--text-sm); }
.text-lg     { font-size: var(--text-lg); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.font-bold   { font-weight: 700; }
.font-semi   { font-weight: 600; }

/* Margin utilities */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

/* Screen-reader only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  line-height: 1;
  white-space: nowrap;
}

.badge--accent {
  background-color: rgba(245, 166, 35, 0.15);
  color: var(--accent);
  border: 1px solid rgba(245, 166, 35, 0.3);
}

.badge--cat {
  color: var(--blue);
  padding-left: 0;
  padding-right: 0;
}

.badge--new {
  background-color: rgba(77, 217, 143, 0.15);
  color: var(--success);
  border: 1px solid rgba(77, 217, 143, 0.3);
}

.badge--danger {
  background-color: rgba(217, 74, 74, 0.15);
  color: var(--danger);
  border: 1px solid rgba(217, 74, 74, 0.3);
}

/* 18. Status dot
    ============================================================================= */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-dot--green  { background-color: var(--success); box-shadow: 0 0 6px rgba(77,217,143,0.5); }
.status-dot--red    { background-color: var(--danger);  box-shadow: 0 0 6px rgba(217,74,74,0.5); }
.status-dot--orange { background-color: var(--accent);  box-shadow: 0 0 6px rgba(245,166,35,0.5); }
.status-dot--muted  { background-color: var(--muted); }

.status-indicator {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
}

/* 19. Admin stat boxes
    ============================================================================= */
.stat-boxes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.stat-box {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: border-color var(--transition);
}

.stat-box:hover {
  border-color: #3a3a3a;
}

.stat-box__number {
  font-size: var(--text-4xl);
  font-weight: 700;
  color: var(--text);
  line-height: 1;
}

.stat-box__label {
  font-size: var(--text-sm);
  color: var(--muted);
  font-weight: 600;
}

.stat-box__change {
  font-size: var(--text-sm);
  font-weight: 600;
}

.stat-box__change--up   { color: var(--success); }
.stat-box__change--down { color: var(--danger); }

.stat-box--accent {
  border-color: rgba(245, 166, 35, 0.3);
}

.stat-box--accent .stat-box__number {
  color: var(--accent);
}

/* 20. Tabs for NL/EN admin forms
    ============================================================================= */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
}

.tab-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--muted);
  padding: var(--space-3) var(--space-5);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -1px;
  letter-spacing: 0.02em;
}

.tab-btn:hover {
  color: var(--text);
}

.tab-btn--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tab-panel {
  display: none;
}

.tab-panel--active {
  display: block;
}

/* 21. Steps — "Hoe het werkt"
    ============================================================================= */
.steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}

.step__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  background-color: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
  font-size: var(--text-lg);
  font-weight: 700;
  border-radius: 50%;
  line-height: 1;
  font-family: var(--font-body);
}

.step__body {
  padding-top: var(--space-2);
}

.step__title {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-2);
}

.step__desc {
  font-size: var(--text-base);
  color: var(--muted);
  line-height: 1.6;
}

/* 22. Breadcrumb
    ============================================================================= */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-6);
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb__link {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
}

.breadcrumb__link:hover {
  color: var(--text);
}

.breadcrumb__sep {
  color: var(--border);
  font-size: 0.75rem;
}

.breadcrumb__current {
  color: var(--text);
}

/* Consistente witruimte boven de breadcrumb op overzichtspagina's,
   gelijk aan de detailpagina's (die var(--space-6) gebruiken). */
.page-header {
  padding-top: var(--space-6);
}

/* 23. Footer
    ============================================================================= */
.footer {
  background-color: #141210;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--space-12) var(--space-8);
  margin-top: 3em;
}

.footer__top {
  margin-bottom: var(--space-10);
}

.footer__intro {
  margin-bottom: var(--space-10);
}

.footer__brand-block {
  margin-top: var(--space-6);
}

@media (min-width: 900px) {
  .footer__top {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--space-12);
    align-items: start;
  }
  .footer__intro {
    margin-bottom: 0;
  }
}

.footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.footer__brand-col {
  max-width: 300px;
}

.footer__logo {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  display: inline-block;
  margin-bottom: var(--space-3);
}

.footer__logo span {
  color: var(--accent);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.5;
}

.footer__col-title {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-4);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__link {
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
  line-height: 1.4;
}

.footer__link:hover {
  color: var(--text);
}

.footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

.footer__copy {
  font-size: var(--text-sm);
  color: var(--muted);
}

.footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.footer__legal-link {
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
}

.footer__legal-link:hover {
  color: var(--text);
}

/* 24. Notification / Alert
    ============================================================================= */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius);
  border-left: 3px solid;
  font-size: var(--text-sm);
}

.alert--info {
  background-color: rgba(74, 144, 217, 0.1);
  border-color: var(--blue);
  color: #8ab8e8;
}

.alert--success {
  background-color: rgba(77, 217, 143, 0.1);
  border-color: var(--success);
  color: #7edba7;
}

.alert--warning {
  background-color: rgba(245, 166, 35, 0.1);
  border-color: var(--accent);
  color: #f0bd6e;
}

.alert--danger {
  background-color: rgba(217, 74, 74, 0.1);
  border-color: var(--danger);
  color: #e58a8a;
}

/* 25. Section heading block
    ============================================================================= */
.section-head {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: var(--space-10);
}

.section-head__title {
  font-size: var(--text-3xl);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

.section-head__sub {
  font-size: var(--text-lg);
  color: var(--muted);
  line-height: 1.6;
}

/* 26. Pagination
    ============================================================================= */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-8);
}

.pagination__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  background-color: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}

.pagination__btn:hover {
  background-color: #222;
  color: var(--text);
  border-color: #444;
}

.pagination__btn--active {
  background-color: var(--accent);
  color: #0d0d0d;
  border-color: var(--accent);
}

.pagination__btn--active:hover {
  background-color: #ffc14d;
  color: #0d0d0d;
  border-color: #ffc14d;
}

/* 27. Category filter bar
    ============================================================================= */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.filter-btn {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted);
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}

.filter-btn:hover {
  color: var(--text);
  border-color: #444;
}

.filter-btn--active {
  background-color: var(--accent);
  color: #0d0d0d;
  border-color: var(--accent);
}

/* 28. Loading states
    ============================================================================= */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--card) 25%,
    #222 50%,
    var(--card) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-load 1.4s ease infinite;
  border-radius: var(--radius);
}

@keyframes skeleton-load {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* 29. Responsive breakpoints
    ============================================================================= */

/* 768px — tablet */
@media (min-width: 768px) {
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }

  .container {
    padding-inline: var(--space-6);
  }

  .grid-2 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  .hero__title {
    font-size: var(--text-4xl);
  }

  .hero__sub {
    font-size: var(--text-xl);
  }

  .abonnementen-grid {
    flex-direction: row;
    align-items: stretch;
  }

  .abo-kolom {
    flex: 1;
  }

  .stat-boxes {
    grid-template-columns: repeat(4, 1fr);
  }

  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .steps {
    max-width: 600px;
  }

  .form-row {
    grid-template-columns: 1fr 1fr;
  }
}

/* 1024px — desktop */
@media (min-width: 1024px) {
  h1 { font-size: var(--text-5xl); }
  h2 { font-size: var(--text-4xl); }

  .container {
    padding-inline: var(--space-8);
  }

  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .header__nav {
    display: flex;
  }

  .header__menu-btn {
    display: none;
  }

  .hero {
    min-height: 80vh;
  }

  .hero__title {
    font-size: var(--text-5xl);
  }

  .section-head__title {
    font-size: var(--text-4xl);
  }

  .footer__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
  }
}

/* 30. Print
    ============================================================================= */
@media print {
  .header,
  .site-header,
  .footer,
  .cookie-banner,
  .admin-sidebar,
  .btn {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }

  .admin-main {
    margin-left: 0;
    padding: 0;
  }
}

/* 31. Site header (base.twig klassen)
    ============================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--kleur-bg);
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-3);
}

[data-thema="donker"] .site-header {
  background-color: var(--kleur-surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo:hover .site-header__logo-text {
  color: var(--kleur-goud);
}

.site-header__logo:hover {
  opacity: 0.85;
}

.site-header__logo-img {
  height: 36px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.site-header__logo-text {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-style: italic;
  font-weight: 600;
  color: var(--kleur-tekst);
  letter-spacing: 0.02em;
  white-space: nowrap;
  margin-left: var(--space-3);
  line-height: 1.2;
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.site-nav__link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color var(--transition);
}

.site-nav__link:hover {
  color: var(--kleur-tekst);
}

.site-nav__link--cta {
  background-color: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
  padding: 8px 18px;
  border-radius: 0;
}

.site-nav__link--cta:hover {
  filter: brightness(0.9);
  color: var(--knop-primair-tekst);
}

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

.site-header__search {
  color: var(--kleur-tekst-zacht);
  display: flex;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  text-decoration: none;
}

.site-header__search:hover {
  color: var(--kleur-tekst);
  background-color: var(--kleur-surface);
}

.site-header__cart {
  color: var(--kleur-tekst-zacht);
  display: flex;
  align-items: center;
  position: relative;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  text-decoration: none;
}
.site-header__cart:hover {
  color: var(--kleur-tekst);
  background-color: var(--kleur-surface);
}
.cart-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--knop-primair-bg, #B89648);
  color: var(--knop-primair-tekst, #1A1208);
  font-size: 10px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  pointer-events: none;
}

/* Theme toggle knop in header */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kleur-goud);
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  width: 36px;
  height: 36px;
}
.theme-toggle:hover {
  color: var(--kleur-tekst);
  background-color: var(--kleur-surface);
}

/* Toon maan in licht thema, zon in donker thema */
.theme-toggle__sun  { display: none; }
.theme-toggle__moon { display: block; }

[data-thema="donker"] .theme-toggle__sun  { display: block; }
[data-thema="donker"] .theme-toggle__moon { display: none; }

/* Toast */
.cart-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--kleur-tekst, #111);
  color: #fff;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 14px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  z-index: 9999;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.cart-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cart-toast__link {
  color: var(--kleur-accent, #b89a5a);
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
}
.cart-toast__link:hover { text-decoration: underline; }

.lang-switch {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
}

.lang-switch__link {
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  padding: 2px 4px;
  border-radius: 3px;
  text-decoration: none;
  transition: color var(--transition);
}

.lang-switch__link:hover,
.lang-switch__link--active {
  color: var(--kleur-tekst);
}

.lang-switch__sep {
  color: var(--border);
}

@media (min-width: 768px) {
  .site-nav {
    display: flex;
  }
}

/* 32. Section-varianten
    ============================================================================= */
.section--surface {
  background-color: var(--kleur-surface);
}

.section--dark,
[data-thema="donker"] .section--dark-invert {
  background-color: var(--kleur-tekst);
  color: var(--kleur-bg);
}

.section--dark .section__title,
.section--dark > .container > h2,
.section--dark > .container > h3,
.section--dark > .container > p {
  color: var(--kleur-bg);
}

/* Prevent section--dark text cascade from entering card components */
.section--dark .upsell-banner,
.section--dark .upsell-banner h2,
.section--dark .upsell-banner h3 {
  color: var(--kleur-tekst);
}
.section--dark .upsell-banner p {
  color: var(--kleur-tekst-zacht);
}
.section--dark .abo-kolom h2,
.section--dark .abo-kolom p {
  color: inherit;
}

/* Format-cards inside dark section */
.section--dark .format-card {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
}
.section--dark .format-card h3,
.section--dark .format-card p {
  color: var(--kleur-bg);
}

.section--dark .step__number {
  background-color: var(--kleur-terracotta);
  color: #000;
}

.section__title {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-8);
  text-align: center;
}

.section__cta {
  text-align: center;
  margin-top: var(--space-8);
}

/* 33. Pack card — licht thema
    ============================================================================= */
.pack-card {
  display: flex;
  flex-direction: column;
  background-color: var(--kleur-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--kleur-tekst);
  transition: transform var(--transition), box-shadow var(--transition);
}

.pack-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  color: var(--kleur-tekst);
}

.pack-card__img-wrap {
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--kleur-surface);
}

.pack-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.pack-card:hover .pack-card__img-wrap img {
  transform: scale(1.04);
}

.pack-card__img-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pack-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.pack-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 400;
  font-style: italic;
  color: var(--kleur-tekst);
  line-height: 1.2;
}

.pack-card__desc {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
  flex: 1;
}

.pack-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-2);
}

.pack-card__count {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
}

.pack-card__price {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kleur-tekst);
}

/* 34. Preset card — licht thema
    ============================================================================= */
.preset-card {
  display: flex;
  flex-direction: column;
  background-color: var(--kleur-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--kleur-tekst);
  transition: transform var(--transition), box-shadow var(--transition);
}

.preset-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  color: var(--kleur-tekst);
}

.preset-card__img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--kleur-surface);
  cursor: pointer;
}
.preset-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius);
  z-index: 1;
  background-color: rgba(20, 18, 16, 0.82);
  color: #fff;
}
.preset-card__badge--gratis {
  background-color: var(--success);
  color: #fff;
}

.preset-card__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease;
}

.preset-card:hover .preset-card__img-wrap img {
  transform: scale(1.04);
}

.preset-card__img-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

.preset-card__body {
  padding: var(--space-5);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.preset-card__name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 400;
  font-style: italic;
  color: var(--kleur-tekst);
  line-height: 1.2;
}

.preset-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: var(--space-3);
}

.preset-card__price {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
}

/* 35. Upsell banner
    ============================================================================= */
.upsell-banner {
  background-color: var(--kleur-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.upsell-banner__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-2);
}

.upsell-banner__text {
  color: var(--kleur-tekst-zacht);
  font-size: var(--text-base);
  line-height: 1.7;
}

.upsell-banner__features {
  list-style: none;
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.upsell-banner__features li {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  padding-left: var(--space-5);
  position: relative;
}

.upsell-banner__features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--kleur-petrol);
  font-weight: 700;
}

.upsell-banner__cta {
  display: flex;
  align-items: flex-start;
}

@media (min-width: 768px) {
  .upsell-banner {
    flex-direction: row;
    align-items: center;
    padding: var(--space-10) var(--space-8);
  }

  .upsell-banner__content {
    flex: 1;
  }

  .upsell-banner__cta {
    flex-shrink: 0;
    align-items: center;
  }
}

/* 36. Footer
    ============================================================================= */
.footer {
  background-color: #141210;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-block: var(--space-12) var(--space-8);
  margin-top: auto;
  --kleur-tekst:        #FEFCF7;
  --kleur-tekst-zacht:  rgba(254,252,247,0.50);
  --text: #FEFCF7;
  --muted: rgba(254,252,247,0.50);
  --border: rgba(255,255,255,0.08);
}

.footer__brand {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-style: italic;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-2);
}

.footer__tagline {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
}

.footer__heading {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--space-4);
  font-style: normal;
}

.footer__links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.footer__links a {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
  transition: color var(--transition);
}

.footer__links a:hover {
  color: var(--kleur-tekst);
}

.footer__lang-switch {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer__bottom {
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  margin-top: var(--space-8);
}

.footer__bottom p {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
}

/* Footer: "Gemaakt met"-credit (affiliate), rechts in de onderbalk */
.footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

@media (min-width: 700px) {
  .footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }
  .footer__made-with {
    text-align: right;
    max-width: 380px;
  }
}

.footer__made-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.footer__made-label {
  display: block;
  margin-bottom: var(--space-2);
}

.footer__made-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst);
  margin-bottom: 2px;
  transition: color var(--transition);
}

.footer__made-link:hover .footer__made-name {
  color: var(--kleur-goud, var(--kleur-tekst-zacht));
}

.footer__made-desc {
  display: block;
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
}

.footer__made-affiliate {
  text-decoration: underline;
}

/* Footer: zelfpromotie — social-iconen (Volgen) */
.footer__social {
  margin-top: var(--space-6);
}

.footer__social-icons {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.footer__social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px;
  color: var(--kleur-tekst-zacht);
  transition: color var(--transition), border-color var(--transition);
}

.footer__social-icon:hover {
  color: var(--kleur-tekst);
  border-color: rgba(255,255,255,0.25);
}

.footer__social-text {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
  max-width: 240px;
}

/* Footer: 3-banen herindeling (nieuwsbriefbalk, kolommen, onderbalk) */
.footer {
  padding-block-start: 0;
}

.footer__newsletter-band {
  background: #211d18;
}

.footer__newsletter-inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-8);
}

.footer__newsletter-text {
  flex: 1 1 300px;
  max-width: 460px;
}

.footer__newsletter-heading {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--kleur-tekst);
  margin-bottom: var(--space-1);
}

.footer__newsletter-desc {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
}

.newsletter-form--compact {
  flex: 1 1 320px;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}

.newsletter-form--compact .newsletter-form__row {
  flex: 1 1 140px;
  margin: 0;
}

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

.footer__newsletter-band .newsletter-form__input {
  height: 100%;
  background: #f4f1ea;
  color: #141210;
  border-color: rgba(255, 255, 255, 0.14);
}

.footer__newsletter-band .newsletter-form__input::placeholder {
  color: rgba(20, 18, 16, 0.45);
}

.newsletter-form--compact .newsletter-form__btn {
  width: auto;
  flex: 0 0 auto;
  white-space: nowrap;
}

.newsletter-form--compact .newsletter-form__feedback {
  flex-basis: 100%;
  margin: var(--space-1) 0 0;
}

.footer__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  padding-block: var(--space-10);
}

@media (min-width: 600px) {
  .footer__cols {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .footer__cols {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: var(--space-6);
  }
}

.footer__brand-col {
  max-width: 320px;
}

/* 37. Before/after slider
    ============================================================================= */
.before-after {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  aspect-ratio: 16/9;
  background-color: var(--kleur-surface);
}

.before-after__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.before-after__img--after {
  clip-path: inset(0 50% 0 0);
  transition: clip-path 0ms;
}

.before-after__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background-color: #fff;
  box-shadow: 0 0 6px rgba(0,0,0,0.4);
  pointer-events: none;
}

.before-after__grip {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 36px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.before-after__grip svg {
  width: 18px;
  height: 18px;
  color: #333;
}

.before-after__label {
  position: absolute;
  top: var(--space-3);
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background-color: rgba(0,0,0,0.45);
  padding: 3px 10px;
  border-radius: 3px;
  pointer-events: none;
}

.before-after__label--before {
  left: var(--space-3);
}

.before-after__label--after {
  right: var(--space-3);
}

/* 38. Scene-knoppen (preset-detail before/after switcher)
    ============================================================================= */
.scene-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  justify-content: center;
}

/* "Zie het effect"-sectie consistent gecentreerd (titel + tabs, net als de slider) */
#tester-section .section__title { text-align: center; }

.scene-btn {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--kleur-tekst-zacht);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.scene-btn:hover {
  border-color: var(--knop-primair-bg);
  color: var(--kleur-tekst);
}

.scene-btn--active {
  background: var(--knop-primair-bg);
  border-color: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
}

/* 39. Stijlquiz
    ============================================================================= */
.stijlquiz {
  background-color: var(--kleur-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  max-width: 640px;
  margin-inline: auto;
}

.stijlquiz__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-2);
  text-align: center;
}

.stijlquiz__sub {
  text-align: center;
  color: var(--kleur-tekst-zacht);
  font-size: var(--text-sm);
  margin-bottom: var(--space-8);
}

.stijlquiz__stap {
  display: none;
}

.stijlquiz__stap--actief {
  display: block;
}

.stijlquiz__vraag {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-4);
  text-align: center;
}

.stijlquiz__opties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}

.stijlquiz__optie {
  background-color: var(--kleur-bg);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-3);
  cursor: pointer;
  text-align: center;
  transition: border-color var(--transition), background-color var(--transition);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst);
}

.stijlquiz__optie:hover {
  border-color: var(--kleur-petrol);
}

.stijlquiz__optie--gekozen {
  border-color: var(--kleur-petrol);
  background-color: rgba(30, 96, 112, 0.07);
}

.stijlquiz__voortgang {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.stijlquiz__stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--border);
  transition: background-color var(--transition);
}

.stijlquiz__stip--actief {
  background-color: var(--kleur-petrol);
}

.stijlquiz__stip--klaar {
  background-color: var(--kleur-terracotta);
}

.stijlquiz__resultaat {
  display: none;
  text-align: center;
}

.stijlquiz__resultaat--zichtbaar {
  display: block;
}

.stijlquiz__resultaat-titel {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 300;
  font-style: italic;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-2);
}

.stijlquiz__resultaat-tekst {
  color: var(--kleur-tekst-zacht);
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}

.stijlquiz__opnieuw {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  cursor: pointer;
  text-decoration: underline;
  margin-top: var(--space-4);
  display: block;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .stijlquiz {
    padding: var(--space-10) var(--space-8);
  }
}

/* ── FAQ ───────────────────────────────────────────────────────────────────── */
.faq__item {
  border-bottom: 1px solid var(--border);
  padding-block: var(--space-4);
}

.faq__item:first-of-type {
  border-top: 1px solid var(--border);
}

.faq__vraag {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kleur-tekst);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
}

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

.faq__vraag::after {
  content: '+';
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--kleur-tekst-zacht);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__vraag::after {
  transform: rotate(45deg);
}

.faq__antwoord {
  margin-top: var(--space-3);
  color: var(--kleur-tekst-zacht);
  font-size: var(--text-sm);
  line-height: 1.7;
  max-width: 56ch;
}

.faq-grid {
  display: block;
}

@media (min-width: 768px) {
  .faq-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-12);
  }

  .faq-grid .faq__item:nth-child(1),
  .faq-grid .faq__item:nth-child(2) {
    border-top: 1px solid var(--border);
  }

  .faq-grid .faq__item:first-of-type {
    border-top: 1px solid var(--border);
  }
}

/* ─── Paginering ──────────────────────────────────────────────────────────── */
.paginering {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}

.paginering__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--kleur-tekst);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.paginering__link:hover {
  background: var(--kleur-surface);
  border-color: var(--kleur-petrol);
  color: var(--kleur-petrol);
}

.paginering__link--disabled {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

.paginering__info {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  min-width: 5rem;
  text-align: center;
}

/* ─── Zoekformulier ────────────────────────────────────────────────────────── */
.zoek-form__inner {
  display: flex;
  gap: var(--space-2);
  max-width: 640px;
}

.zoek-form--inline .zoek-form__inner {
  max-width: 480px;
}

.zoek-form__input {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-body);
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  outline: none;
  transition: border-color 0.15s;
}

.zoek-form__input:focus {
  border-color: var(--kleur-petrol);
}

/* ─── Zoekresultaten ───────────────────────────────────────────────────────── */
.zoek-resultaten__geen {
  color: var(--kleur-tekst-zacht);
  font-size: var(--text-base);
}

.zoek-sectie__titel {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.zoek-sectie__count {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  font-family: var(--font-body);
  font-weight: 400;
}

.artikel-lijst {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.artikel-lijst__link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-decoration: none;
  padding: var(--space-4);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}

.artikel-lijst__link:hover {
  border-color: var(--kleur-petrol);
}

.artikel-lijst__img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: var(--radius-sm);
}

.artikel-lijst__tekst {
  min-width: 0;
}

.artikel-body__hero {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0 var(--space-6);
}

.artikel-lijst__titel {
  font-size: var(--text-base);
  font-family: var(--font-heading);
  color: var(--kleur-tekst);
  margin-bottom: var(--space-1);
}

.artikel-lijst__desc {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
}

/* =============================================================================
   Artikel layout — 2-koloms met sidebar
   ============================================================================= */

.artikel-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-10);
  align-items: start;
  margin-top: var(--space-8);
}

@media (max-width: 900px) {
  .artikel-layout {
    grid-template-columns: 1fr;
  }
  .artikel-sidebar {
    order: -1;
  }
}

.artikel-body__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: var(--kleur-tekst);
}

.artikel-body__datum {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--space-6);
}

.artikel-body__content.prose {
  line-height: 1.8;
  color: var(--kleur-tekst);
}

.artikel-body__content.prose h2 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  margin: var(--space-10) 0 var(--space-3);
}

.artikel-body__content.prose h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  margin: var(--space-8) 0 var(--space-2);
}

.artikel-body__content.prose p {
  margin-bottom: var(--space-4);
}

.artikel-body__content.prose ul,
.artikel-body__content.prose ol {
  margin: var(--space-4) 0 var(--space-4) var(--space-6);
  list-style: revert;
  list-style-type: decimal;
}

.artikel-body__content.prose li {
  margin-bottom: var(--space-2);
}

.artikel-body__content.prose a {
  color: var(--kleur-petrol);
  text-decoration: underline;
}

.artikel-body__content.prose code {
  background: var(--kleur-surface);
  padding: 0.1em 0.4em;
  border-radius: 3px;
  font-size: 0.88em;
}

/* ── Sidebar blocks ── */

.artikel-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  position: sticky;
  top: var(--space-8);
  padding-bottom: var(--space-12);
}

.sidebar-block {
  background: var(--kleur-surface);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.sidebar-block__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-3);
}

.sidebar-block__title--small {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kleur-tekst-zacht);
}

.sidebar-block__text {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
  margin-bottom: var(--space-4);
}

.sidebar-block__meer {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--kleur-petrol);
  text-decoration: none;
}

.sidebar-block__meer:hover {
  text-decoration: underline;
}

/* Preset-miniaturen in sidebar */
.sidebar-presets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.sidebar-presets__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--kleur-tekst);
}

.sidebar-presets__img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.sidebar-presets__naam {
  font-size: var(--text-sm);
  line-height: 1.3;
}

/* Nieuwsbrief in sidebar */
.sidebar-block--nieuwsbrief {
  background: var(--kleur-petrol);
  color: #fff;
}

.sidebar-block--nieuwsbrief .sidebar-block__title {
  color: #fff;
}

.sidebar-block--nieuwsbrief .sidebar-block__text {
  color: rgba(255,255,255,0.82);
}

.nieuwsbrief-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.nieuwsbrief-form .form-control--sm {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.75rem;
  font-size: var(--text-sm);
}

.nieuwsbrief-form .form-control--sm::placeholder {
  color: rgba(255,255,255,0.6);
}

.nieuwsbrief-form .btn--primary {
  background: #fff;
  color: var(--kleur-petrol);
}

.nieuwsbrief-form__feedback {
  font-size: var(--text-sm);
  min-height: 1.2em;
}

/* Sidebar advertenties */
.sidebar-block--ads {
  background: var(--kleur-bg);
  border: 1px solid var(--border);
}

.sidebar-ad {
  display: block;
  text-decoration: none;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  border: 1px solid var(--border);
  background: var(--kleur-surface);
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

.sidebar-ad:hover {
  border-color: var(--kleur-petrol);
  background: var(--card-hover);
}

.sidebar-ad:last-child {
  margin-bottom: 0;
}

.sidebar-ad__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--kleur-terracotta);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
  margin-bottom: var(--space-1);
}

.sidebar-ad__titel {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-1);
}

.sidebar-ad__desc {
  display: block;
  font-size: 12px;
  color: var(--kleur-tekst-zacht);
  line-height: 1.4;
}

/* ─── Preset detail pagina ─────────────────────────────────────────────────── */
.preset-hero {
  padding-top: var(--space-8);
  padding-bottom: var(--space-10);
}

.preset-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .preset-hero__grid {
    grid-template-columns: 1.1fr 1fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.preset-hero__img {
  width: 100%;
  border-radius: var(--radius-xl);
  display: block;
  aspect-ratio: 3/2;
  object-fit: cover;
}

.preset-hero__img-placeholder {
  width: 100%;
  aspect-ratio: 3/2;
  border-radius: var(--radius-xl);
  background-color: var(--card);
}

.preset-hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.preset-hero__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-4xl);
  color: var(--kleur-tekst);
  line-height: 1.15;
  margin: 0;
}

.preset-hero__desc {
  color: var(--kleur-tekst-zacht);
  line-height: 1.7;
  font-size: var(--text-base);
  margin: 0;
}

.preset-hero__pack {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

.preset-hero__pack a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
}

.preset-hero__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}

.price--big {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: 600;
  color: var(--kleur-tekst);
  line-height: 1;
}

.price__vat {
  font-size: var(--text-sm);
  color: var(--muted);
}

.preset-hero__inclusions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.preset-hero__inclusions li {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.preset-hero__inclusions li::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  background-color: var(--kleur-petrol);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* Checkout form binnen hero */
.checkout-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.checkout-coupon {
  margin-bottom: var(--space-4);
}
.checkout-coupon__toggle {
  font-size: 13px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.checkout-coupon__toggle::-webkit-details-marker { display: none; }
.checkout-coupon__toggle::before {
  content: '+ ';
}
details[open] .checkout-coupon__toggle::before {
  content: '− ';
}
.checkout-coupon__body {
  margin-top: var(--space-2);
}
.checkout-coupon__body .form-input {
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.checkout-form__herroeping {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  line-height: 1.5;
}

.checkout-form__herroeping input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin-top: 1px;
  accent-color: var(--kleur-petrol);
  cursor: pointer;
}

.checkout-cta-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.checkout-cta-wrap .btn--primary {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Gratis pack download form */
.pack-hero__gratis-label {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--success);
  margin-bottom: var(--space-4);
}

.gratis-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 400px;
}

.gratis-form__veld {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.gratis-form__veld label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
}

.gratis-form__input {
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--kleur-tekst);
  font-size: var(--text-base);
  font-family: inherit;
  transition: border-color var(--transition);
}

.gratis-form__input:focus {
  outline: none;
  border-color: var(--accent);
}

.gratis-form__privacynoot {
  font-size: var(--text-xs);
  color: var(--muted);
  margin: 0;
}

/* Trust badges */
.trust-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--space-4);
  border-top: 1px solid var(--border);
  padding-top: var(--space-3);
}

.trust-row__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

.trust-row__item svg {
  color: var(--kleur-petrol);
  flex-shrink: 0;
}

.preset-hero__abo-alt {
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: center;
  margin: 0;
}

.preset-hero__abo-alt a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Tester verbeterd */
.tester__preview-default {
  position: relative;
  aspect-ratio: 3/2;
  overflow: hidden;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: #111;
}

.tester__preview-default img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9;
}

.tester__preview-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(0,0,0,0.35);
  color: #fff;
}

.tester__preview-overlay p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.85);
  text-align: center;
  margin: 0;
  max-width: 200px;
}

/* Admin login redesign */
.admin-body--login {
  background: #101820;
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(39,114,154,0.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(212,136,106,0.10) 0%, transparent 50%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-login {
  width: 100%;
  padding: var(--space-6);
}

.admin-login__card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(20px);
  border-radius: var(--radius-xl);
  padding: var(--space-10) var(--space-8);
  max-width: 400px;
  margin: 0 auto;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

.admin-login__logo {
  text-align: center;
  margin-bottom: var(--space-8);
}

.admin-login__logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--kleur-petrol);
  border-radius: 14px;
  margin-bottom: var(--space-3);
}

.admin-login__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: var(--text-2xl);
  color: #fff;
  text-align: center;
  margin: 0 0 var(--space-1);
}

.admin-login__sub {
  color: rgba(255,255,255,0.45);
  font-size: var(--text-sm);
  text-align: center;
  margin: 0;
}

.admin-login__form {
  margin-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-login__form .form-label {
  color: rgba(255,255,255,0.7);
  font-size: var(--text-sm);
  font-weight: 600;
}

.admin-login__form .form-input {
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.12);
  color: #fff;
}

.admin-login__form .form-input::placeholder {
  color: rgba(255,255,255,0.3);
}

.admin-login__form .form-input:focus {
  background: rgba(255,255,255,0.10);
  border-color: var(--kleur-petrol);
  outline-color: var(--kleur-petrol);
}

.admin-login__form .alert--error {
  background: rgba(192,57,43,0.15);
  border-color: rgba(192,57,43,0.3);
  color: #ff7f7f;
}

.admin-login__submit {
  margin-top: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  font-weight: 700;
}

/* A11y: focus outlines consistent */
:focus-visible {
  outline: 2px solid var(--kleur-petrol);
  outline-offset: 2px;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kleur-petrol);
  outline-offset: 3px;
}

/* Admin nav — aliases voor template klassen (.admin-nav__*)
   ============================================================================= */
.admin-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding-inline: var(--space-3);
}

.admin-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  border-radius: var(--radius);
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}

.admin-nav__link:hover,
.admin-nav__link--active {
  color: var(--text);
  background-color: var(--bg);
}

.admin-nav__link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.admin-nav__link--sub {
  padding-left: var(--space-10);
  font-size: var(--text-sm);
  font-weight: 400;
  opacity: 0.75;
}

.admin-nav__divider {
  height: 1px;
  background: var(--border);
  margin: var(--space-3) var(--space-3);
}

.admin-nav__link--logout {
  color: var(--danger);
}

.admin-nav__link--logout:hover {
  background-color: rgba(192, 57, 43, 0.08);
  color: var(--danger);
}

/* Admin header + content — aliases */
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border);
}

.admin-header__title {
  font-size: var(--text-2xl);
  font-weight: 700;
}

/* Prose: begrens tekstbreedte (~65 karakters per regel) */
.prose {
  max-width: 68ch;
  margin-inline: auto;
}

.page-header__intro {
  max-width: 60ch;
}

/* Billing toggle (abonnementen pagina) */
.billing-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--kleur-surface);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin-inline: auto;
  margin-bottom: var(--space-8);
}

.billing-toggle__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: 999px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
  white-space: nowrap;
}

.billing-toggle__btn--active {
  background: var(--kleur-petrol);
  color: #fff;
}

.billing-toggle__btn--active .billing-toggle__badge {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.billing-toggle__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--kleur-petrol);
  color: #fff;
  padding: 2px 6px;
  border-radius: 999px;
}

.abo-kolom__jaar-info {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-1);
  min-height: 1.4em;
}

.abo-kolom__besparing {
  color: var(--success);
  font-weight: 600;
}


/* Checkout abonnement pagina
   ============================================================================= */
.checkout-abo {
  max-width: 960px;
  margin-inline: auto;
  padding-block: var(--space-10);
}

.checkout-abo__grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-10);
  align-items: start;
}

@media (max-width: 720px) {
  .checkout-abo__grid {
    grid-template-columns: 1fr;
  }
}

.checkout-abo__plan-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 2px solid var(--kleur-goud);
  border-radius: 2px;
  padding: var(--space-6);
  position: sticky;
  top: var(--space-8);
}

.checkout-abo__plan-naam {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-style: italic;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-4);
}

.checkout-abo__prijs {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
  margin-bottom: var(--space-1);
}

.checkout-abo__prijs-bedrag {
  font-size: var(--text-3xl);
  font-weight: 600;
  color: var(--kleur-petrol);
}

.checkout-abo__prijs-unit {
  font-size: var(--text-sm);
  color: var(--muted);
}

.checkout-abo__periode-info {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-bottom: var(--space-5);
}

.checkout-abo__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-5) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.checkout-abo__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text);
}

.checkout-abo__features svg {
  color: var(--kleur-petrol);
  flex-shrink: 0;
  margin-top: 2px;
}

.checkout-abo__wijzig {
  font-size: var(--text-sm);
  color: var(--muted);
  text-decoration: underline;
}

.checkout-abo__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-style: italic;
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-6);
}

.checkout-abo__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.checkout-abo__samenvatting {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: var(--space-4) var(--space-5);
}

.checkout-abo__samenvatting-rij {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--muted);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-3);
}

.checkout-abo__samenvatting-totaal {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-base);
  color: var(--text);
}

.checkout-abo__mandaat-tekst {
  font-size: var(--text-sm);
  color: var(--muted);
  line-height: 1.6;
}

.checkout-abo__submit {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-abo__veilig {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--muted);
  text-align: center;
  justify-content: center;
}

footer { margin-top: 2em; }

/* =============================================================================
   Ivoor editorial componenten
   ============================================================================= */

/* Hero editorial — geen bg-afbeelding, typografie-gedreven */
.hero-editorial {
  padding-block: var(--space-16) var(--space-12);
  background-color: var(--kleur-bg);
  border-bottom: 1px solid var(--border);
}

.hero-editorial__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kleur-goud);
  margin-bottom: var(--space-5);
}

.hero-editorial__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--kleur-tekst);
  margin-bottom: var(--space-6);
  max-width: 18ch;
}

.hero-editorial__sub {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 300;
  line-height: 1.65;
  color: var(--kleur-tekst-zacht);
  max-width: 54ch;
  margin-bottom: var(--space-8);
}

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

.hero-editorial__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.stat-item__number {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-3xl);
  font-weight: 400;
  color: var(--kleur-tekst);
  line-height: 1;
  display: block;
}

.stat-item__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--kleur-tekst-zacht);
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
  display: block;
}

/* Stijlquiz teaser balk */
.quiz-teaser {
  background-color: var(--kleur-surface);
  border-block: 1px solid var(--border);
  padding-block: var(--space-10);
}

.quiz-teaser__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  justify-content: space-between;
}

.quiz-teaser__lead {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.quiz-teaser__icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--kleur-cta);
  color: #fff;
}

.quiz-teaser__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--kleur-goud);
}

.quiz-teaser__text {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  font-weight: 400;
  color: var(--kleur-tekst);
}

/* Editorial split — alternerende 52/48 rijen */
.editorial-split {
  display: grid;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--border);
}

.editorial-split__image {
  aspect-ratio: 4/3;
  overflow: hidden;
  background-color: var(--kleur-surface);
}

.editorial-split__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.editorial-split:hover .editorial-split__image img {
  transform: scale(1.03);
}

.editorial-split__body {
  padding: var(--space-10) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.editorial-split__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--kleur-goud);
  margin-bottom: var(--space-3);
}

.editorial-split__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--kleur-tekst);
  line-height: 1.2;
  margin-bottom: var(--space-4);
}

.editorial-split__desc {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 300;
  line-height: 1.7;
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--space-6);
}

.editorial-split__meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
}

.editorial-split__price {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--kleur-tekst);
}

@media (min-width: 768px) {
  .editorial-split {
    grid-template-columns: 52% 48%;
  }

  .editorial-split--reverse {
    grid-template-columns: 48% 52%;
  }

  .editorial-split--reverse .editorial-split__image {
    order: 2;
  }

  .editorial-split--reverse .editorial-split__body {
    order: 1;
    padding: var(--space-12) var(--space-12) var(--space-12) var(--space-10);
  }

  .editorial-split__body {
    padding: var(--space-12) var(--space-10) var(--space-12) var(--space-12);
  }

  .editorial-split__image {
    aspect-ratio: auto;
    min-height: 420px;
  }
}

/* Index-blok — genummerde lijst */
.index-blok {
  border-top: 1px solid var(--border);
}

.index-blok__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.index-blok__titel {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--kleur-tekst);
}

.index-blok__item {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: background-color var(--transition);
}

.index-blok__item:hover {
  background-color: var(--kleur-surface);
}

.index-blok__nummer {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--kleur-tekst-zacht);
  text-align: right;
}

.index-blok__thumb {
  width: 56px;
  height: 42px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.index-blok__thumb-placeholder {
  width: 56px;
  height: 42px;
  background-color: var(--kleur-surface);
  flex-shrink: 0;
}

.index-blok__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.index-blok__naam {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 400;
  color: var(--kleur-tekst);
  line-height: 1.3;
}

.index-blok__tags {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 300;
  color: var(--kleur-tekst-zacht);
}

.index-blok__prijs {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-lg);
  color: var(--kleur-tekst);
  white-space: nowrap;
}

/* Sectie-scheidingslijn */
.sectie-lijn {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
}

/* ── Checkout return pagina ─────────────────────────────────────────────── */
.checkout-return {
  max-width: 540px;
  margin: 4rem auto;
  padding: 0 1rem;
  text-align: center;
}

.checkout-return__icon {
  margin: 0 auto 1.5rem;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.checkout-return__icon--success {
  background: #f0faf5;
  color: #2e7d57;
}

.checkout-return__icon--pending {
  background: #fdf8ed;
  color: #92660a;
}

.checkout-return__icon--error {
  background: #fdf2f2;
  color: #b42318;
}

.checkout-return__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 400;
  margin: 0 0 1rem;
}

.checkout-return__title--success { color: #2e7d57; }
.checkout-return__title--error   { color: #b42318; }

.checkout-return__item-name {
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
  margin: 0 0 1.5rem;
}

.checkout-return__text {
  color: var(--kleur-tekst-zacht);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}

.checkout-return__steps {
  text-align: left;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 2rem;
}

.checkout-return__step {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--border);
}

.checkout-return__step:last-child { border-bottom: none; }

.checkout-return__step--done {
  background: #f9fdf9;
}

.checkout-return__step--pending {
  background: var(--kleur-achtergrond);
}

.checkout-return__step-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2e7d57;
  color: #fff;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.checkout-return__step--pending .checkout-return__step-icon {
  background: var(--kleur-accent);
}

.checkout-return__step strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst);
}

.checkout-return__step-sub {
  font-size: .75rem;
  color: var(--kleur-tekst-zacht);
}

.checkout-return__actions {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0 0 1.5rem;
}

.checkout-return__actions .btn--large {
  padding: .9rem 2rem;
  font-size: var(--text-base);
}

.checkout-return__more {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
}

.checkout-return__more a {
  color: var(--kleur-accent);
  text-decoration: none;
}

.checkout-return__more a:hover { text-decoration: underline; }

/* =============================================================================
   Juridisch / tekst-pagina's — prose-stijlen
   ============================================================================= */

.juridisch-layout {
  margin-top: var(--space-8);
  margin-bottom: var(--space-16);
}

.juridisch-body__title {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: var(--space-2);
  color: var(--kleur-tekst);
}

.juridisch-body__datum {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  margin-bottom: var(--space-8);
}

/* Begrens leeskolom: ~15-18 woorden per regel */
.juridisch-body__content {
  max-width: 70ch;
}

/* Koppen: zelfde lettertype als lopende tekst, maar vet en iets groter */
.juridisch-body__content h2,
.juridisch-body__content h3,
.juridisch-body__content h4,
.juridisch-body__content h5,
.juridisch-body__content h6 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: 1.3;
  color: var(--kleur-tekst);
  margin-top: var(--space-10);
  margin-bottom: var(--space-3);
}

.juridisch-body__content h2 { font-size: 1.15rem; }
.juridisch-body__content h3 { font-size: 1.05rem; }
.juridisch-body__content h4,
.juridisch-body__content h5,
.juridisch-body__content h6 { font-size: 1rem; }

/* Eerste kop mag geen grote top-margin hebben */
.juridisch-body__content > h2:first-child,
.juridisch-body__content > h3:first-child {
  margin-top: 0;
}

.juridisch-body__content p {
  line-height: 1.8;
  margin-bottom: var(--space-4);
  color: var(--kleur-tekst);
}

.juridisch-body__content ul,
.juridisch-body__content ol {
  margin: var(--space-2) 0 var(--space-5) var(--space-6);
  line-height: 1.8;
}

.juridisch-body__content li {
  margin-bottom: var(--space-2);
}

.juridisch-body__content a {
  color: var(--kleur-petrol);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.juridisch-body__content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0 var(--space-6);
  font-size: var(--text-sm);
}

.juridisch-body__content th,
.juridisch-body__content td {
  text-align: left;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--kleur-rand);
  vertical-align: top;
}

.juridisch-body__content th {
  background: var(--kleur-surface);
  font-weight: 600;
  white-space: nowrap;
}

.juridisch-body__content .juridisch-formulier {
  background: var(--kleur-surface);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin: var(--space-4) 0 var(--space-6);
  font-size: var(--text-sm);
  line-height: 1.8;
}

/* =============================================================================
   Herroepingsformulier
   ============================================================================= */

.herroeping-form-sectie {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--kleur-rand);
}

.herroeping-form-sectie h2 {
  font-family: var(--font-body);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: var(--space-3);
  color: var(--kleur-tekst);
}

.herroeping-bevestiging {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  background: #e7f4ec;
  border: 1px solid #a3d4b4;
  color: #16794c;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
  font-weight: 500;
}

.herroeping-fout {
  background: #fdecea;
  border: 1px solid #f1c4bd;
  color: #b42318;
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-5) 0;
}

.herroeping-form {
  margin-top: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.herroeping-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .herroeping-form__row { grid-template-columns: 1fr; }
}

.herroeping-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.herroeping-form__label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst);
}

.herroeping-form__label span {
  color: var(--kleur-accent);
}

.herroeping-form__input,
.herroeping-form__textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--kleur-tekst);
  background: #fff;
  transition: border-color 0.15s;
}

.herroeping-form__input:focus,
.herroeping-form__textarea:focus {
  outline: none;
  border-color: var(--kleur-petrol);
  box-shadow: 0 0 0 3px rgba(39,114,154,.12);
}

.herroeping-form__textarea { resize: vertical; }

.herroeping-form__submit {
  align-self: flex-start;
  margin-top: var(--space-2);
}

.herroeping-form__hint {
  font-size: var(--text-xs);
  color: var(--kleur-tekst-zacht);
}

/* =============================================================================
   Bullets en nummering in prose-blokken (overschrijft globale reset)
   ============================================================================= */
.artikel-body__content.prose ul,
.juridisch-body__content ul { list-style-type: disc; }

.artikel-body__content.prose ol,
.juridisch-body__content ol { list-style-type: decimal; }

.artikel-body__content.prose ul ul,
.juridisch-body__content ul ul { list-style-type: square; }

/* =============================================================================
   Detail pagina — pack & preset (2-kolomslayout, proza, accordeon, banners)
   ============================================================================= */

/* ── Detail hero: titel boven de fold, 2-koloms eronder ─────────────────────── */
.detail-page__header {
  padding-top: var(--space-10);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-8);
}

.detail-page__breadcrumb-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.detail-page__h1 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  color: var(--kleur-tekst);
  line-height: 1.1;
  margin: 0;
}

.detail-hero {
  padding-top: var(--space-6);
  padding-bottom: var(--space-10);
}

/* Detail pages: left-align section headings */
.detail-hero ~ .section .section__title,
.detail-hero ~ .section--surface .section__title,
.detail-hero ~ .section--dark .section__title {
  text-align: left;
}

.detail-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 768px) {
  .detail-hero__grid {
    grid-template-columns: 1fr 1.15fr;
    gap: var(--space-10);
    align-items: start;
  }
}

.detail-hero__info {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.detail-hero__image {
  border-radius: var(--radius-xl);
  overflow: hidden;
  position: relative;
}

.detail-hero__image img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.detail-hero__image--pack img {
  aspect-ratio: 16/9;
}

.detail-hero__image--preset img {
  aspect-ratio: 3/2;
}

/* Titel over de hero-afbeelding (film-poster-stijl), met gradient-scrim voor leesbaarheid */
.detail-hero__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--space-8) var(--space-6) var(--space-5);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.32) 48%, rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
}

.detail-hero__caption .detail-hero__title {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(var(--text-2xl), 4.2vw, var(--text-4xl));
  line-height: 1.1;
  color: #fff;
  margin: 0;
  text-shadow: 0 1px 16px rgba(0, 0, 0, 0.45);
}

.detail-hero__caption .detail-hero__eyebrow {
  display: inline-block;
  margin: 0 0 var(--space-2);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

/* Mobiel: beeld met titel bovenaan; desktop: terug naar info-links/beeld-rechts */
.detail-hero__image {
  order: -1;
}

@media (min-width: 768px) {
  .detail-hero__image {
    order: 0;
  }
}

.detail-hero__meta {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-top: var(--space-2);
  line-height: 1.6;
}

.detail-hero__count {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
}

.detail-hero__desc {
  color: var(--kleur-tekst);
  line-height: 1.75;
  font-size: var(--text-base);
  margin: 0;
}

.detail-hero__price-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: var(--space-4) 0;
}

/* ── Proza-blok (lange tekst) ───────────────────────────────────────────────── */
.detail-prose {
  max-width: 72ch;
  color: var(--kleur-tekst-zacht);
  line-height: 1.8;
}

.detail-prose h2 {
  font-family: var(--font-heading);
  font-weight: 300;
  font-style: italic;
  font-size: var(--text-2xl);
  color: var(--kleur-tekst);
  margin: var(--space-8) 0 var(--space-4) 0;
  line-height: 1.2;
}

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

.detail-prose h3 {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--kleur-tekst);
  margin: var(--space-6) 0 var(--space-2) 0;
}

.detail-prose p { margin-bottom: var(--space-4); }
.detail-prose p:last-child { margin-bottom: 0; }

.detail-prose ul {
  margin: var(--space-3) 0 var(--space-4) var(--space-5);
  list-style-type: disc;
}

.detail-prose ul li { margin-bottom: var(--space-1); }

/* ── Technische specs tabel ─────────────────────────────────────────────────── */
.specs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-3);
}

.specs-item {
  background: var(--kleur-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
}

.specs-item__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: var(--space-1);
}

.specs-item__waarde {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kleur-tekst);
}

/* ── "Ook in dit preset pack" banner ────────────────────────────────────────── */
.in-pack-banner {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--radius-xl);
  padding: var(--space-6) var(--space-8);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  flex-wrap: wrap;
}

.in-pack-banner__tekst { display: flex; flex-direction: column; gap: var(--space-1); }

.in-pack-banner__label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
}

.in-pack-banner__naam {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--text-xl);
  color: var(--kleur-tekst);
  margin: 0;
}

.in-pack-banner__desc {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  margin: 0;
}

/* ── Zip-inhoud kaartjes ────────────────────────────────────────────────────── */
.zip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4);
}

.zip-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--kleur-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.zip-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  background: color-mix(in srgb, var(--kleur-petrol) 12%, transparent);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kleur-petrol);
}

.zip-item__body { display: flex; flex-direction: column; gap: 2px; }
.zip-item__ext { font-size: 0.75rem; font-weight: 700; color: var(--kleur-tekst); letter-spacing: 0.05em; }
.zip-item__desc { font-size: var(--text-sm); color: var(--kleur-tekst-zacht); }

/* ── Gerelateerde packs grid ────────────────────────────────────────────────── */
.gerelateerd-packs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}

/* ── Account icon in nav ────────────────────────────────────────────────────── */
.site-header__account {
  color: var(--kleur-tekst-zacht);
  display: flex;
  align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius);
  transition: color var(--transition), background-color var(--transition);
  text-decoration: none;
}
.site-header__account:hover {
  color: var(--kleur-tekst);
  background-color: var(--kleur-surface);
}

/* ── Pack card: abonnement-hint onder koopknop ──────────────────────────────── */
/* Stretched link: hele kaart klikbaar naar detail via de CTA-knop,
   zónder de kaart zelf een <a> te maken (zodat de abo-link geen geneste link is). */
.pack-card__cta {
  width: 100%;
  margin-top: var(--space-3);
}
.pack-card__cta::after,
.preset-card__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.pack-card__abo-hint,
.preset-card__abo-hint {
  position: relative;
  z-index: 2;
  margin: var(--space-3) 0 0;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.pack-card__abo-link,
.preset-card__abo-link {
  color: var(--muted);
  text-decoration: underline;
}
.pack-card__abo-link:hover,
.preset-card__abo-link:hover {
  color: var(--kleur-tekst);
}

/* ── Pack hero: 3-panel preset-image grid ───────────────────────────────────── */
.detail-hero__image--grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  border-radius: var(--radius-xl);
  overflow: hidden;
}
.detail-hero__image--grid img {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  display: block;
}

/* ── Gratis CTA knop ────────────────────────────────────────────────────────── */
.btn--cta-gratis {
  padding: 18px 24px;
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  background: var(--kleur-goud);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--kleur-goud) 40%, transparent);
}
.btn--cta-gratis:hover {
  box-shadow: 0 6px 24px color-mix(in srgb, var(--kleur-goud) 55%, transparent);
  transform: translateY(-1px);
}

/* ── Inline advertentie banner ──────────────────────────────────────────── */
.section--inline-ad { padding: var(--space-8) 0; }
.inline-ad {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--kleur-surface);
  border: 1px solid var(--kleur-rand);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  max-width: 720px;
  margin: 0 auto;
}
.inline-ad:hover {
  border-color: var(--kleur-accent);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--kleur-accent) 12%, transparent);
}
.inline-ad__cover {
  width: 110px;
  flex-shrink: 0;
  border-radius: var(--radius);
  object-fit: cover;
  aspect-ratio: 3/4;
}
.inline-ad__body { display: flex; flex-direction: column; gap: var(--space-2); }
.inline-ad__badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kleur-goud);
  background: color-mix(in srgb, var(--kleur-goud) 12%, transparent);
  padding: 2px 8px;
  border-radius: 99px;
  width: fit-content;
}
.inline-ad__titel { font-size: var(--text-lg); font-weight: 600; margin: 0; color: var(--kleur-tekst); }
.inline-ad__desc { font-size: var(--text-sm); color: var(--kleur-tekst-zacht); margin: 0; }
.inline-ad__cta {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--kleur-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 560px) {
  .inline-ad { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .inline-ad__cover { width: 80px; }
}

/* ===================================================================
   Checkout — minimal layout (winkelmandje / afrekenen)
   Strak, geen afgeronde kaders, sterke hiërarchie. Light + dark.
   =================================================================== */

/* ── Minimal header ─────────────────────────────────────────────── */
.co-header {
  border-bottom: 1px solid var(--border);
  background: var(--kleur-bg);
}
.co-header__inner {
  max-width: 920px;
  margin-inline: auto;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.co-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--kleur-tekst);
}
.co-header__logo-img { display: block; }
.co-header__logo-text {
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
}
.co-header__secure {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  color: var(--kleur-tekst-zacht);
}
.co-header__secure svg { color: #1a8a4a; }

/* ── Minimal footer ─────────────────────────────────────────────── */
.co-foot {
  border-top: 1px solid var(--border);
  margin-top: 64px;
}
.co-foot__inner {
  max-width: 920px;
  margin-inline: auto;
  padding: 22px 24px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  color: var(--kleur-tekst-zacht);
}
.co-foot__pay {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.co-foot__pay svg { color: #1a8a4a; }
.co-foot__links {
  display: inline-flex;
  gap: 18px;
}
.co-foot__links a {
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
}
.co-foot__links a:hover { color: var(--kleur-tekst); text-decoration: underline; }
.co-foot__copy { margin: 0; margin-left: auto; }

/* ── Shell + titel ──────────────────────────────────────────────── */
.co-shell {
  max-width: 920px;
  margin-inline: auto;
  padding: 44px 24px 0;
}
.co-title {
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 32px;
  color: var(--kleur-tekst);
}
.co-block-label {
  margin: 0 0 14px;
  color: var(--kleur-tekst-zacht);
}

/* ── Leeg mandje ────────────────────────────────────────────────── */
.co-empty {
  text-align: center;
  padding: 48px 0 64px;
  color: var(--kleur-tekst-zacht);
}
.co-empty p { margin: 0 0 20px; }

/* ── Twee kolommen ──────────────────────────────────────────────── */
.co-grid {
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.co-col--order { order: 2; }
.co-col--form  { order: 1; }

/* ── Order: regels zonder kader ─────────────────────────────────── */
.co-lines {
  border-top: 1px solid var(--border);
}
.co-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border);
}
.co-line__info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.co-line__naam {
  font-size: 15px;
  font-weight: 600;
  color: var(--kleur-tekst);
}
.co-line__type {
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--kleur-tekst-zacht);
}
.co-line__right { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.co-line__prijs { font-size: 15px; font-weight: 600; color: var(--kleur-tekst); }
.co-line__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  color: var(--kleur-tekst-zacht);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.co-line__remove:hover {
  color: var(--kleur-tekst);
  border-color: var(--border);
  background: var(--kleur-surface);
}

/* ── Totaal ─────────────────────────────────────────────────────── */
.co-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 18px 0 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--kleur-tekst);
}
.co-total__note {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--kleur-tekst-zacht);
}

/* ── USP's ──────────────────────────────────────────────────────── */
.co-usps {
  list-style: none;
  margin: 24px 0 0;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.co-usps li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--kleur-tekst);
}
.co-usps svg { width: 16px; height: 16px; flex-shrink: 0; color: #1a8a4a; }

/* ── Account-balk ───────────────────────────────────────────────── */
.co-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  margin-bottom: 22px;
  background: var(--kleur-surface);
  border-left: 2px solid var(--kleur-goud);
  font-size: 14px;
}
.co-account__email { color: var(--kleur-tekst); font-weight: 500; }
.co-account__logout { font-size: 12px; color: var(--kleur-tekst-zacht); text-decoration: none; }
.co-account__logout:hover { text-decoration: underline; }
.co-login-hint { font-size: 13px; color: var(--kleur-tekst-zacht); margin: 0 0 22px; }
.co-login-hint a { color: var(--kleur-goud); }

/* ── Velden ─────────────────────────────────────────────────────── */
.co-field { margin-bottom: 16px; }
.co-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--kleur-tekst);
}
.co-req { color: #c0392b; }
.co-optional { font-weight: 400; color: var(--kleur-tekst-zacht); font-size: 12px; }
.co-field input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-size: 15px;
  box-sizing: border-box;
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  transition: border-color .12s, box-shadow .12s;
}
.co-field input:focus {
  outline: none;
  border-color: var(--kleur-goud);
  box-shadow: 0 0 0 3px rgba(184, 150, 72, 0.16);
}
.co-field input::placeholder { color: var(--kleur-tekst-zacht); opacity: .7; }

/* ── Coupon ─────────────────────────────────────────────────────── */
.co-coupon { margin: 4px 0 20px; }

/* ── Consent ────────────────────────────────────────────────────── */
.co-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 22px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--kleur-tekst);
  cursor: pointer;
}
.co-consent span { font-weight: 400; }
.co-consent input {
  margin-top: 2px;
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  accent-color: var(--kleur-goud);
  cursor: pointer;
}

/* ── Betaalknop ─────────────────────────────────────────────────── */
.co-submit {
  width: 100%;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: var(--kleur-goud);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .14s, transform .06s, opacity .14s;
}
.co-submit:hover:not(:disabled) { background: #a5853f; }
.co-submit:active:not(:disabled) { transform: translateY(1px); }
.co-submit:disabled { background: #ded8cc; color: #7a746a; opacity: 1; cursor: not-allowed; }

.co-secure-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  text-align: center;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--kleur-tekst-zacht);
}
.co-secure-line svg { color: #1a8a4a; flex-shrink: 0; }
.co-terms {
  text-align: center;
  margin: 10px 0 0;
  font-size: 12.5px;
  color: var(--kleur-tekst-zacht);
}
.co-terms a { color: var(--kleur-tekst-zacht); text-decoration: underline; }
.co-back { margin: 22px 0 0; font-size: 13px; }
.co-back a { color: var(--kleur-tekst-zacht); text-decoration: none; }
.co-back a:hover { color: var(--kleur-tekst); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .co-grid { grid-template-columns: 1fr; gap: 36px; }
  .co-col--order { order: 1; }
  .co-col--form  { order: 2; }
  .co-title { font-size: 26px; }
  .co-foot__inner { flex-direction: column; align-items: flex-start; }
  .co-foot__copy { margin-left: 0; }
}

/* =============================================================================
   Preset- & categorie-browser (redesign: sidebar + cards)
   ============================================================================= */
.browser {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: var(--space-10);
  align-items: start;
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
}
.browser__toggle { display: none; }

.browser__sidebar { position: sticky; top: calc(63px + var(--space-4)); align-self: start; }
.browser__search { position: relative; margin-bottom: var(--space-6); }
.browser__search input {
  width: 100%;
  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-8);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--kleur-surface);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text);
}
.browser__search-icon {
  position: absolute; left: var(--space-3); top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  color: var(--muted); font-size: 1rem; pointer-events: none;
}

.browser__nav { display: flex; flex-direction: column; gap: 1px; }
.browser__group {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--kleur-goud); font-weight: 600;
  margin: var(--space-5) 0 var(--space-2);
}
.browser__cat {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-left: 2px solid transparent;
  color: var(--text); text-decoration: none; font-size: var(--text-sm);
  transition: background var(--transition), color var(--transition);
}
.browser__cat:hover { background: var(--kleur-surface); }
.browser__cat.is-active {
  color: var(--kleur-goud); font-weight: 600;
  border-left-color: var(--kleur-goud); background: var(--kleur-surface);
}
.browser__cat--all { margin-bottom: var(--space-2); font-weight: 600; }
button.browser__cat { width: 100%; background: none; border: none; border-left: 2px solid transparent; font-family: var(--font-body); cursor: pointer; }
.browser__leeg { color: var(--muted); padding: var(--space-10) 0; text-align: center; }
.browser__count { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.browser__cat.is-active .browser__count { color: var(--kleur-goud); }

.browser__content { min-width: 0; }
.browser__head { margin-bottom: var(--space-6); border-bottom: 1px solid var(--border); padding-bottom: var(--space-5); }
.browser__title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: var(--text-5xl); line-height: 1.05;
  margin: var(--space-3) 0 var(--space-4);
}
.browser__head-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.browser__sub { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.browser__sort { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.browser__sort label { white-space: nowrap; }
.browser__sort select {
  font-family: var(--font-body); font-size: var(--text-sm);
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--kleur-bg); color: var(--text); cursor: pointer;
}

.browser__promo {
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  background: var(--kleur-surface); border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-8);
  text-decoration: none; color: var(--text);
}
.browser__promo-text { font-size: var(--text-sm); }
.browser__promo-cta { color: var(--kleur-goud); font-weight: 600; font-size: var(--text-sm); white-space: nowrap; }

.browser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.pcard {
  display: flex; flex-direction: column;
  background: var(--kleur-bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; transition: transform var(--transition), box-shadow var(--transition);
}
.pcard:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.pcard__media { display: block; position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: #1a1714; cursor: pointer; }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.pcard:hover .pcard__media img { transform: scale(1.03); }
.pcard__tag {
  position: absolute; top: var(--space-3); left: var(--space-3);
  background: rgba(20,18,16,0.82); color: #fff;
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px var(--space-2); border-radius: var(--radius);
}
.pcard__body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.pcard__name { font-family: var(--font-heading); font-weight: 500; font-size: var(--text-xl); margin: 0; }
.pcard__name a { color: var(--text); text-decoration: none; }
.pcard__name a:hover { color: var(--kleur-goud); }
.pcard__sub { color: var(--muted); font-size: var(--text-sm); margin: var(--space-1) 0 var(--space-4); }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: auto; }
.pcard__price { font-weight: 600; font-size: var(--text-base); }
.pcard__actions { display: flex; align-items: center; gap: var(--space-2); }
.pcard__actions .btn { white-space: nowrap; flex-shrink: 0; }
.pcard__save {
  background: none; border: none; padding: var(--space-1);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; line-height: 0;
}
.pcard__save svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.pcard__save:hover { color: var(--text); }
.pcard__save.is-saved { color: var(--kleur-goud); }
.pcard__save.is-saved svg { fill: currentColor; }

@media (max-width: 900px) {
  .browser { grid-template-columns: 1fr; gap: var(--space-4); padding-top: var(--space-5); }
  .browser__toggle {
    display: flex; align-items: center; justify-content: space-between; width: 100%;
    padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--kleur-surface); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
    color: var(--text); cursor: pointer;
  }
  .browser__toggle[aria-expanded="true"] .browser__toggle-chevron { transform: rotate(180deg); }
  .browser__toggle-chevron { transition: transform var(--transition); }
  .browser__sidebar { position: static; max-height: 0; overflow: hidden; transition: max-height 320ms ease; }
  .browser__sidebar.is-open { max-height: 2400px; padding-top: var(--space-4); }
  .browser__title { font-size: var(--text-4xl); }
  .browser-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}
@media (max-width: 560px) {
  .browser-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   Split-hero (homepage): kop + CTA links, interactieve before/after rechts
   ============================================================================= */
.hero-split { padding-block: var(--space-12) var(--space-16); }
.hero-split__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: var(--space-12);
  align-items: center;
}
.hero-split__eyebrow {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--kleur-goud); font-weight: 600; margin: 0 0 var(--space-4);
}
.hero-split__title {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.04;
  margin: 0 0 var(--space-5);
}
.hero-split__sub {
  font-size: var(--text-lg); color: var(--kleur-tekst-zacht);
  line-height: 1.6; margin: 0 0 var(--space-6); max-width: 30em;
}
.hero-split__ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); }
.hero-split__trust { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.hero-split__trust li {
  position: relative; padding-left: var(--space-6);
  font-size: var(--text-sm); color: var(--kleur-tekst-zacht);
}
.hero-split__trust li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--kleur-goud); font-weight: 700;
}
.hero-split__media .before-after {
  box-shadow: 0 24px 60px rgba(20, 18, 16, 0.14);
}
.hero-split__scenes { justify-content: center; margin-top: var(--space-4); margin-bottom: 0; }
.hero-split__caption { text-align: center; font-size: var(--text-sm); color: var(--muted); margin: var(--space-3) 0 0; }
.hero-split__caption a { color: var(--muted); text-decoration: underline; }

@media (max-width: 900px) {
  .hero-split { padding-block: var(--space-8) var(--space-10); }
  .hero-split__grid { grid-template-columns: 1fr; gap: var(--space-8); }
  .hero-split__title { font-size: clamp(2rem, 8vw, 2.8rem); }
  .hero-split__sub { font-size: var(--text-base); }
}
@media (max-width: 560px) {
  .hero-split__ctas .btn { flex: 1 1 auto; text-align: center; }
}

/* =============================================================================
   Prijsanker (homepage, direct onder hero): los kopen vs. abonnement
   ============================================================================= */
.prijsanker { padding-block: var(--space-2) var(--space-8); }
.prijsanker__inner {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4);
  align-items: stretch; max-width: 980px;
}
.prijsanker__optie {
  position: relative; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-6) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-1);
}
.prijsanker__optie--aanbevolen {
  border-color: transparent;
  background: color-mix(in srgb, var(--kleur-cta) 14%, var(--card));
}
.prijsanker__badge {
  position: absolute; top: calc(-1 * var(--space-3)); left: var(--space-6);
  background: var(--kleur-cta-hover); color: #fff;
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 600; padding: var(--space-1) var(--space-3); border-radius: 999px;
}
.prijsanker__label {
  font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--muted); margin: 0 0 var(--space-3); font-weight: 600;
}
.prijsanker__vanaf { font-size: var(--text-sm); color: var(--muted); margin: 0; }
.prijsanker__prijs {
  font-family: var(--font-heading); font-weight: 500;
  font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.05; margin: 0;
}
.prijsanker__sub { font-size: var(--text-sm); color: var(--kleur-tekst-zacht); margin: var(--space-2) 0 0; }
.prijsanker__divider {
  margin-top: auto; border: 0; border-top: 1px solid var(--border);
  width: 100%; padding-top: var(--space-4);
}
.prijsanker__link {
  align-self: flex-start; font-size: var(--text-sm);
  font-weight: 600; color: var(--kleur-tekst); text-decoration: underline;
  text-underline-offset: 3px;
}
.prijsanker__link--sterk { color: var(--kleur-cta); }
.prijsanker__gratis {
  grid-column: 1 / -1; text-align: center; margin: var(--space-1) 0 0;
  font-size: var(--text-sm); color: var(--muted);
}
.prijsanker__gratis a { color: var(--kleur-goud); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
  .prijsanker__inner { grid-template-columns: 1fr; }
  .prijsanker__optie--aanbevolen { order: -1; }
}

/* =============================================================================
   Sticky mini-CTA: verschijnt na de hero, stuurt naar het abonnement
   ============================================================================= */
.sticky-cta {
  position: fixed; left: 50%; bottom: var(--space-4); transform: translate(-50%, 140%);
  z-index: 60; display: flex; align-items: center; gap: var(--space-4);
  background: var(--card); color: var(--kleur-tekst); border: 1px solid var(--border);
  border-radius: 999px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5);
  box-shadow: var(--shadow-lg); opacity: 0;
  transition: transform 280ms ease, opacity 280ms ease;
  max-width: calc(100vw - var(--space-6));
}
.sticky-cta.is-visible { transform: translate(-50%, 0); opacity: 1; }
.sticky-cta__tekst { font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-cta .btn { flex: 0 0 auto; }
@media (max-width: 560px) {
  .sticky-cta { left: var(--space-3); right: var(--space-3); transform: translateY(140%); max-width: none; }
  .sticky-cta.is-visible { transform: translateY(0); }
  .sticky-cta__tekst { display: none; }
  .sticky-cta { justify-content: center; padding: var(--space-2); }
}

/* Zoekpagina: lege staat + suggesties (geen-resultaten + landing zonder zoekterm) */
.zoek-leeg { margin-top: var(--space-6); }
.zoek-leeg__bericht { font-size: var(--text-lg); color: var(--kleur-tekst); margin: 0 0 var(--space-2); }
.zoek-leeg__tip { color: var(--muted); margin: 0 0 var(--space-8); }
.zoek-leeg__blok { margin-bottom: var(--space-10); }
.zoek-leeg__kop {
  font-family: var(--font-heading); font-style: italic; font-weight: 300;
  font-size: var(--text-2xl); margin: 0 0 var(--space-4);
}
.zoek-leeg__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.zoek-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--kleur-tekst); text-decoration: none;
  font-size: var(--text-sm); line-height: 1;
  transition: border-color .15s ease, background-color .15s ease;
}
.zoek-chip:hover { border-color: var(--accent); background: var(--kleur-bg); }
.zoek-chip__count { color: var(--muted); font-size: var(--text-xs); }
.zoek-leeg__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-4); }

/* Nieuwsbrief-inschrijving michielheijmans.com (Squarespace) — minimaal, erft sitevariabelen */
.newsletter-form { max-width: 440px; }
.newsletter-form__heading { font-size: var(--text-lg); margin: 0 0 var(--space-2); }
.newsletter-form__desc { font-size: var(--text-sm); color: var(--muted); line-height: 1.6; margin: 0 0 var(--space-4); }
.newsletter-form__row { margin-bottom: var(--space-3); }
.newsletter-form__label { display: block; font-size: var(--text-sm); margin-bottom: var(--space-1); }
.newsletter-form__input {
  width: 100%; box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--kleur-bg); color: var(--kleur-tekst); font-size: var(--text-base);
}
.newsletter-form__input:focus { outline: none; border-color: var(--accent); }
.newsletter-form__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.newsletter-form__check {
  display: flex; gap: var(--space-2); align-items: flex-start;
  font-size: var(--text-sm); color: var(--muted); line-height: 1.5;
  margin-bottom: var(--space-3); cursor: pointer;
}
.newsletter-form__check input { margin-top: 3px; flex-shrink: 0; }
.newsletter-form__btn { width: 100%; }
.newsletter-form__feedback { font-size: var(--text-sm); margin: var(--space-3) 0 0; min-height: 1.1em; }
.newsletter-form__feedback.is-success { color: var(--accent); }
.newsletter-form__feedback.is-error { color: #c0392b; }
.newsletter-form__optional { color: var(--muted); font-weight: 400; font-size: var(--text-xs); }
.newsletter-form__consent { font-size: var(--text-xs); color: var(--muted); margin: var(--space-2) 0 0; line-height: 1.5; }

/* Exit-intent: 15% korting op een jaarabonnement */
.exit-intent[hidden] { display: none; }
.exit-intent { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.exit-intent__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.55); }
.exit-intent__box {
  position: relative; background: var(--kleur-bg); border-radius: var(--radius-xl);
  max-width: 440px; width: 100%; padding: 40px 32px 28px; text-align: center;
  box-shadow: 0 20px 60px rgba(0,0,0,0.30);
}
.exit-intent__close { position: absolute; top: 10px; right: 14px; background: none; border: none; font-size: 28px; line-height: 1; color: var(--muted); cursor: pointer; }
.exit-intent__eyebrow { text-transform: uppercase; letter-spacing: .08em; font-size: var(--text-xs); color: var(--accent); margin: 0 0 8px; }
.exit-intent__title { font-size: var(--text-2xl); margin: 0 0 12px; line-height: 1.2; }
.exit-intent__text { color: var(--muted); font-size: var(--text-sm); line-height: 1.6; margin: 0 0 18px; }
.exit-intent__code {
  display: inline-block; font-family: var(--font-mono, monospace);
  font-size: var(--text-lg); font-weight: 600; letter-spacing: .12em;
  padding: 10px 22px; border: 1px dashed var(--accent); border-radius: var(--radius);
  margin: 0 0 18px; cursor: pointer; color: var(--kleur-tekst);
}
.exit-intent__code.is-copied::after { content: ' \2713'; color: var(--accent); }
.exit-intent__cta { width: 100%; }
.exit-intent__dismiss { display: block; width: 100%; margin-top: 12px; background: none; border: none; color: var(--muted); font-size: var(--text-sm); cursor: pointer; text-decoration: underline; }
body.exit-intent-open { overflow: hidden; }

/* 33. Mobiele navigatie (hamburger + uitschuifpaneel)
    ============================================================================= */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px 10px;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--kleur-tekst);
  transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-panel {
  display: none;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(82vw, 360px);
  background: var(--kleur-bg);
  border-left: 1px solid var(--border);
  box-shadow: -8px 0 32px rgba(0,0,0,0.18);
  transform: translateX(100%);
  transition: transform var(--transition);
  z-index: 110;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-8) var(--space-6);
  overflow-y: auto;
}
.mobile-panel.is-open { transform: translateX(0); }

.mobile-panel__nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.mobile-panel__link {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--kleur-tekst);
  text-decoration: none;
  padding: var(--space-3) 0;
}
.mobile-panel__link:hover { color: var(--kleur-goud); }
.mobile-panel__link--cta {
  background-color: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
  text-align: center;
  border-radius: 0;
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-5);
}
.mobile-panel__link--cta:hover {
  filter: brightness(0.9);
  color: var(--knop-primair-tekst);
}

.mobile-panel__footer {
  margin-top: auto;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.mobile-panel__util {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--kleur-tekst-zacht);
  text-decoration: none;
}
.mobile-panel__util:hover { color: var(--kleur-tekst); }
.mobile-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.theme-toggle--panel { color: var(--kleur-goud); }

/* Donker thema: globale [data-thema] a-regel niet de paneellinks laten overrulen */
[data-thema="donker"] .mobile-panel__link { color: var(--kleur-tekst); }
[data-thema="donker"] .mobile-panel__link:hover { color: var(--kleur-goud); }
[data-thema="donker"] .mobile-panel__link--cta,
[data-thema="donker"] .mobile-panel__link--cta:hover { color: var(--knop-primair-tekst); }
[data-thema="donker"] .mobile-panel__util { color: var(--kleur-tekst-zacht); }
[data-thema="donker"] .mobile-panel__util:hover { color: var(--kleur-tekst); }

.mobile-panel__backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.40);
  z-index: 105;
}

@media (max-width: 767.98px) {
  .nav-toggle { display: flex; }
  .mobile-panel { display: flex; }
  body.nav-open .mobile-panel__backdrop { display: block; }
  /* Tools-rij op mobiel: alleen zoek + cart; rest verhuist naar het paneel */
  .site-header__tools .theme-toggle:not(.theme-toggle--panel),
  .site-header__tools .site-header__account,
  .site-header__tools > .lang-switch { display: none; }
  /* Comfortabele tap-targets in de header */
  .site-header__search,
  .site-header__cart { padding: var(--space-3); }
}

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

@media (prefers-reduced-motion: reduce) {
  /* Respecteer de systeemvoorkeur sitewide: animaties/transities vrijwel uit,
     geen smooth-scroll. Geldt o.a. voor de sticky-CTA, knoppen en het menu. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body.nav-open { overflow: hidden; }

/* 34. Gecentreerde paginakop (alleen pagina's met gecentreerde body, bv. abonnementen)
    ============================================================================= */
.page-header--center { text-align: center; }
.page-header--center .breadcrumb { justify-content: center; }
.page-header--center .page-header__intro { margin-inline: auto; }

/* 35. Vangnet tegen horizontale overflow op mobiel
    ============================================================================= */
html, body { overflow-x: hidden; }

/* 36. Front-end admin-bar (alleen ingelogde admin; publieke stylesheet, NIET onder .admin-body)
    ============================================================================= */
.admin-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000;
  background: #141210;
  color: #FEFCF7;
  border-top: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.18);
  font-family: var(--font-body);
  font-size: var(--text-sm);
}
.admin-bar__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 8px var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.admin-bar__brand {
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--kleur-goud);
  white-space: nowrap;
}
.admin-bar__stat {
  color: rgba(254,252,247,0.72);
  white-space: nowrap;
}
.admin-bar__stat strong {
  color: #FEFCF7;
  font-weight: 700;
}
.admin-bar__spacer { flex: 1 1 auto; }
.admin-bar__link {
  color: #FEFCF7;
  text-decoration: none;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 0;
  white-space: nowrap;
  transition: background-color var(--transition);
}
.admin-bar__link:hover { background: rgba(255,255,255,0.10); }
.admin-bar__link--edit {
  background: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
  border-color: var(--knop-primair-bg);
}
.admin-bar__link--edit:hover {
  filter: brightness(0.92);
  background: var(--knop-primair-bg);
  color: var(--knop-primair-tekst);
}
/* Ruimte onderaan zodat de vaste balk de footer niet permanent afdekt */
body.has-admin-bar { padding-bottom: 52px; }
@media (max-width: 600px) {
  .admin-bar__inner { gap: var(--space-2) var(--space-3); padding: 6px var(--space-3); }
  .admin-bar__brand { display: none; }
  /* Bar wrapt naar 2 regels op smal scherm → meer ruimte onderaan */
  body.has-admin-bar { padding-bottom: 88px; }
}

/* 37. Skip-link + actieve navigatie (toegankelijkheid)
    ============================================================================= */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  background: var(--kleur-bg);
  color: var(--kleur-tekst);
  border: 1px solid var(--border);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--transition);
}
.skip-link:focus { top: var(--space-3); }

.site-nav__link[aria-current="page"] {
  color: var(--kleur-tekst);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}

/* 38. Betaalmethode-badges + mobiele sticky koop-CTA
    ============================================================================= */
.betaallogos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.betaallogos__label {
  font-size: var(--text-sm);
  color: var(--muted);
  margin-right: var(--space-1);
}
.betaallogos__logo {
  display: block;
  height: 22px;
  width: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 6px;
  box-sizing: content-box;
}
.betaallogos__chip {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--kleur-tekst-zacht);
  white-space: nowrap;
}
.betaallogos__chip--mollie { color: var(--muted); font-weight: 600; }

/* Mobiele sticky-CTA: hergebruikt .sticky-cta maar alleen op smal scherm */
@media (min-width: 768px) {
  .sticky-cta--mobiel { display: none; }
}

/* 39. Abonnementen CRO-overhaul (dagprijs, bezwaren-rij, gratis-blok)
    ============================================================================= */
.abo-kolom__dagprijs {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--kleur-goud);
  margin-top: var(--space-1);
}
.abo-kolom__btwnoot {
  font-size: var(--text-xs);
  color: var(--muted);
  margin-top: 2px;
}

.trust-row--compact {
  flex-wrap: wrap;
  border-top: none;
  padding-top: 0;
  gap: var(--space-3) var(--space-5);
}
.trust-row--compact .trust-row__item {
  font-size: var(--text-sm);
  color: var(--kleur-tekst-zacht);
  font-weight: 500;
}
.trust-row--compact .trust-row__item svg { color: #059669; }

.abo-gratis-blok {
  max-width: 780px;
  margin: var(--space-10) auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
  background: var(--kleur-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-5) var(--space-6);
}
.abo-gratis-blok__titel {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--kleur-tekst);
  margin: 0 0 4px;
}
.abo-gratis-blok__sub {
  font-size: var(--text-sm);
  color: var(--muted);
  margin: 0;
  max-width: 46ch;
}
.abo-gratis-blok__knop { flex-shrink: 0; }
@media (max-width: 560px) {
  .abo-gratis-blok { flex-direction: column; align-items: flex-start; }
  .abo-gratis-blok__knop { width: 100%; text-align: center; }
}

/* Toegankelijkheid: zichtbare toetsenbord-focus op formuliervelden die elders
   outline:none kregen. :focus-visible toont alleen bij toetsenbordnavigatie,
   niet bij muisklik. Staat bewust achteraan zodat het de eerdere regels wint. */
.zoek-form__input:focus-visible,
.gratis-form__input:focus-visible,
.herroeping-form__input:focus-visible,
.herroeping-form__textarea:focus-visible,
.co-field input:focus-visible,
.newsletter-form__input:focus-visible {
  outline: 2px solid var(--kleur-goud, #8A6D2E);
  outline-offset: 2px;
}

/* Winkelmandje: subtiele los→abonnement-upsell onder de bestelsamenvatting */
.co-upsell {
  margin-top: var(--space-5);
  padding: var(--space-4);
  border: 1px solid var(--kleur-rand, var(--border));
  border-radius: var(--radius);
  background: var(--kleur-surface);
}
.co-upsell__title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--kleur-tekst);
}
.co-upsell__text {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--kleur-tekst-zacht);
}
.co-upsell__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--kleur-goud, var(--accent));
  text-decoration: none;
}
.co-upsell__link:hover { text-decoration: underline; }