/* =============================================================================
   BRAND.CSS — Tuincentrum WaaS
   Gedeeld merkprofiel — single source of truth voor alle visuele styling
   Vereist: shared/css/base.css geladen VOOR dit bestand

   ┌─────────────────────────────────────────────────────────────────────────┐
   │  KLANT-AANPASSING — dit zijn de tokens die je per klant aanpast:        │
   │                                                                         │
   │  Kleuren (sectie 1, :root):                                             │
   │    --color-primary          Hoofdkleur (buttons, links, accenten)       │
   │    --color-primary-dark     Donkere hover-staat van de hoofdkleur       │
   │    --color-primary-light    Lichte tint voor achtergronden & hover      │
   │    --color-accent-orange    Accentkleur (sterren, badges, highlights)   │
   │    --color-bg               Pagina-achtergrond                          │
   │    --color-bg-white         Kaart-achtergrond (puur wit)                │
   │    --color-bg-green-light   Alternatieve sectie-achtergrond             │
   │    --color-text             Hoofdtekstkleur                             │
   │    --color-text-muted       Subtekst, bijschriften                      │
   │                                                                         │
   │  Typografie (sectie 1, :root):                                          │
   │    --font-heading           Koptekst lettertype (serif aanbevolen)      │
   │    --font-body              Bodytekst lettertype                        │
   │    Vergeet ook de Google Fonts <link> in homepage.html te updaten!      │
   │                                                                         │
   │  Kaarten / borders (sectie 1, :root):                                   │
   │    --radius-card            Hoekafronding voor kaarten                  │
   │    --radius-btn             Hoekafronding voor knoppen                  │
   │    --radius-badge           Hoekafronding voor badges / labels          │
   │    --radius-icon            Hoekafronding voor icoonvakjes              │
   │    --shadow-card            Standaard kaartschaduw                      │
   │    --shadow-card-hover      Kaartschaduw bij hover                      │
   │    --shadow-header          Schaduw onder de navigatiebalk              │
   │                                                                         │
   │  Layout (sectie 1, :root):                                              │
   │    --section-padding        Verticale witruimte rondom secties          │
   │    --header-height          Hoogte van de sticky navigatiebalk          │
   │    --transition             CSS-transitie voor hover-effecten           │
   │    --transition-img         CSS-transitie voor afbeelding-zoom          │
   └─────────────────────────────────────────────────────────────────────────┘

   INHOUDSOPGAVE
   1.  Design tokens
   2.  Body & pagina-animatie
   3.  Header & navigatie
   4.  Hamburger menu (mobiel overlay)
   5.  KPI-balk
   6.  Buttons (btn--primary, btn--secondary)
   7.  Feature-blocks (kaart-stijl, niet het grid)
   8.  Category-card (kaart-stijl, niet het grid)
   9.  Nieuws-kaart (kaart-stijl, niet het grid)
   10. Seizoen shared content-stijl
   11. Reviews sectie (volledig — layout is identiek in alle varianten)
   12. Merken sectie
   13. Contact sectie
   14. Footer
   15. Workshops — kaart-stijl & modal (gedeeld)
   16. Responsive — Header & hamburger (≤1023px)
   17. Responsive — Shared tablet (768–1023px)
   18. Responsive — Shared mobiel (<768px)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. DESIGN TOKENS
   Variant-a kleuren als visuele baseline. Varianten overschrijven ALLEEN
   layout-tokens in hun eigen :root-blok — nooit kleur- of font-tokens.
   ----------------------------------------------------------------------------- */
:root {
  /* Kleurenpalet — Tuincentrum Goessens (aangeleverd 23-07-2026)
     Donkergroen + lichtgroen op overwegend wit; contenttekst lichtgrijs. */
  --color-primary:          #00853e;   /* donkergroen — knoppen, links, accenten */
  --color-primary-dark:     #00622e;   /* afgeleid: hover en donkere panelen */
  --color-primary-light:    #e4f3ea;   /* afgeleid: lichte tint voor iconen/achtergronden */
  --color-accent-orange:    #6db43f;   /* accent = LICHTGROEN (tokennaam is historisch) */
  --color-bg:               #f7faf8;   /* pagina-achtergrond: vrijwel wit, vleugje groen */
  --color-bg-white:         #ffffff;
  --color-bg-green-light:   #eef6e6;   /* afgeleid van het lichtgroen */
  --color-text:             #2b2b2b;   /* koppen en nadruk — donker neutraal */
  --color-text-muted:       #949494;   /* contenttekst (aangeleverd lichtgrijs) */

  /* Typografie — Poppins voor alles; koppen onderscheiden zich door gewicht */
  --font-heading:           'Poppins', sans-serif;
  --font-body:              'Poppins', sans-serif;

  /* Border radius */
  --radius-card:            12px;
  --radius-btn:             8px;
  --radius-badge:           6px;
  --radius-icon:            8px;

  /* Schaduwen */
  --shadow-card:            5px 5px 25px rgba(0, 0, 0, 0.10);
  --shadow-card-hover:      8px 8px 35px rgba(0, 0, 0, 0.16);
  --shadow-header:          0 2px 20px rgba(0, 60, 28, 0.08);

  /* Layout */
  --section-padding:        90px 0;
  --header-height:          80px;

  /* Transitie */
  --transition:             transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  --transition-img:         transform 0.4s ease;
}


/* -----------------------------------------------------------------------------
   2. BODY & PAGINA-ANIMATIE
   ----------------------------------------------------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

@media (prefers-reduced-motion: no-preference) {
  body {
    animation: fadeIn 0.35s ease both;
  }
}


/* -----------------------------------------------------------------------------
   3. HEADER & NAVIGATIE
   ----------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 300;
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-header);
  height: var(--header-height);
  display: flex;
  align-items: center;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.site-header--scrolled {
  box-shadow: 0 2px 24px rgba(0, 60, 28, 0.14), 0 1px 0 rgba(0, 133, 62, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
}

/* Logo */
.site-header__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.site-header__logo img {
  height: 42px;
  width: auto;
}

/* Navigatie */
.site-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.site-nav__link {
  display: block;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
  border-radius: var(--radius-badge);
  transition: var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* Header CTA */
.site-header__cta {
  flex-shrink: 0;
}


/* -----------------------------------------------------------------------------
   4. HAMBURGER MENU — ICOON + OPEN-TOESTAND
   ----------------------------------------------------------------------------- */

/* Knop zelf — verborgen op desktop, zichtbaar via responsive sectie 16 */
.site-header__menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  gap: 5px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
  transition: var(--transition);
}

.site-header__menu-toggle:hover {
  background-color: var(--color-primary-light);
}

/* Drie lijntjes */
.site-header__menu-icon,
.site-header__menu-icon::before,
.site-header__menu-icon::after {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: 2px;
  transition: var(--transition);
}

.site-header__menu-icon {
  position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
  content: '';
  position: absolute;
  left: 0;
}

.site-header__menu-icon::before { top: -7px; }
.site-header__menu-icon::after  { top:  7px; }

/* Kruisje-animatie wanneer menu open is */
.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon {
  background-color: transparent;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::before {
  transform: rotate(45deg);
  top: 0;
}

.site-header__menu-toggle[aria-expanded="true"] .site-header__menu-icon::after {
  transform: rotate(-45deg);
  top: 0;
}


/* -----------------------------------------------------------------------------
   5. KPI-BALK — donkergroen, scrollt soepel weg
   ----------------------------------------------------------------------------- */
.kpi-bar {
  position: relative;
  z-index: 400;
  background-color: var(--color-primary-dark);
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
  overflow: hidden;
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.38s ease;
}

/* Sierrand onderkant */
.kpi-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 20%,
    rgba(249, 133, 31, 0.4)  50%,
    rgba(255, 255, 255, 0.15) 80%,
    transparent 100%
  );
}

/* Verborgen toestand — JS voegt class toe bij scrollen */
.kpi-bar--hidden {
  /* De balk staat in de documentstroom en scrolt vanzelf uit beeld. De oude
     translateY-verstopanimatie schoof tijdens de overgang zichtbaar over de
     sticky header heen (logo half bedekt), op elke schermbreedte. De klasse
     blijft bestaan voor het schaduw-effect op de header (--scrolled). */
  pointer-events: none;
}

.kpi-bar__inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--container-pad-x);
}

/* Lijst van KPI-items */
.kpi-bar__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 46px;
}

/* Individueel item */
.kpi-bar__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 1.75rem;
  position: relative;
  white-space: nowrap;
}

/* Verticale scheidingslijn tussen items */
.kpi-bar__item + .kpi-bar__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 25%;
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

/* Icoon */
.kpi-bar__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.kpi-bar__icon img {
  width: 16px;
  height: 16px;
  filter: brightness(0) invert(1) opacity(0.75);
  display: block;
}

/* Tekst */
.kpi-bar__text {
  font-family: var(--font-body);
  font-size: 0.775rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.82);
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.kpi-bar__text strong {
  font-weight: 600;
  color: #f9c784;
}


/* -----------------------------------------------------------------------------
   6. KNOPPEN
   Structurele .btn-basis zit in base.css — dit zijn de visuele lagen.
   ----------------------------------------------------------------------------- */

/* Primaire knop: gevuld groen */
.btn--primary {
  background-color: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
  border-radius: var(--radius-btn);
  padding: 0.8125rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 133, 62, 0.35);
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Secundaire knop: outline wit — standaard voor donkere achtergronden (hero).
   Contextregels hieronder zorgen voor groen outline op lichte achtergronden. */
.btn--secondary {
  background-color: transparent;
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-btn);
  padding: 0.8125rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
}

.btn--secondary:active {
  transform: translateY(0);
}

/* Secundaire knop op lichte achtergrond */
.nieuws__footer .btn--secondary,
.contact .btn--secondary,
.workshops__footer .btn--secondary {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.nieuws__footer .btn--secondary:hover,
.contact .btn--secondary:hover,
.workshops__footer .btn--secondary:hover {
  background-color: var(--color-primary);
  color: #ffffff;
}


/* -----------------------------------------------------------------------------
   7. FEATURE-BLOCKS — kaart-visuele stijl
   Het grid (.features__list) is variant-specifiek en staat in variant-x.css
   ----------------------------------------------------------------------------- */
.features {
  background-color: var(--color-bg-green-light);
  padding: var(--section-padding);
}

.feature-block {
  min-width: 0;   /* 1fr-kolommen echt gelijk: lange woorden als "Kwaliteitsplanten" mogen de kolom niet oprekken */
  background-color: var(--color-bg-white);
  border-radius: var(--radius-card);
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Klikbare feature-block: zet de link in de titel; de hele kaart wordt klikbaar
   (stretched link via ::after). Geen extra markup of losse "lees meer"-link nodig. */
.feature-block {
  position: relative;
}
.feature-block__title a {
  color: inherit;
  text-decoration: none;
}
.feature-block__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.feature-block:hover .feature-block__title a,
.feature-block:focus-within .feature-block__title a {
  color: var(--color-primary);
}
.feature-block__title a:focus-visible {
  outline: none;
}
.feature-block__title a:focus-visible::after {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-card);
}

.feature-block:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-card-hover);
}

.feature-block__icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-primary);
  border-radius: var(--radius-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-block__icon img {
  width: 32px;
  height: 32px;
  filter: brightness(0) invert(1);
}

.feature-block__title {
  overflow-wrap: break-word;
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.feature-block__text {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: none;
}


/* -----------------------------------------------------------------------------
   8. CATEGORY-CARD — kaart-visuele stijl
   Het grid (.categories__grid) is variant-specifiek en staat in variant-x.css
   ----------------------------------------------------------------------------- */
.categories {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.category-card {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background-color: var(--color-bg-white);
  transition: var(--transition);
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.category-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.category-card__image-wrap {
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.category-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-img);
}

.category-card:hover .category-card__image {
  transform: scale(1.05);
}

.category-card__body {
  background-color: var(--color-bg-white);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.category-card__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.3;
}

.category-card__cta {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-primary);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: var(--transition);
}

.category-card__cta::after {
  content: '\2192';
  font-size: 1rem;
  transition: var(--transition);
}

.category-card:hover .category-card__cta::after {
  transform: translateX(4px);
}


/* -----------------------------------------------------------------------------
   9. NIEUWS-KAART — kaart-visuele stijl
   Het grid (.nieuws__grid) is variant-specifiek en staat in variant-x.css
   ----------------------------------------------------------------------------- */
.nieuws {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.nieuws-kaart {
  border-radius: var(--radius-card);
  overflow: hidden;
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.nieuws-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.nieuws-kaart__article {
  height: 100%;
}

.nieuws-kaart__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.nieuws-kaart__image-wrap {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  flex-shrink: 0;
}

.nieuws-kaart__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-img);
}

.nieuws-kaart:hover .nieuws-kaart__image {
  transform: scale(1.05);
}

.nieuws-kaart__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  flex: 1;
}

.nieuws-kaart__datum {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nieuws-kaart__title {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.35;
}

.nieuws-kaart__excerpt {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--color-text-muted);
  line-height: 1.65;
  flex: 1;
  max-width: none;
}

.nieuws-kaart__cta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 0.5rem;
  transition: var(--transition);
}

.nieuws-kaart__cta::after {
  content: '\2192';
  font-size: 1rem;
  transition: var(--transition);
}

.nieuws-kaart:hover .nieuws-kaart__cta::after {
  transform: translateX(4px);
}

.nieuws__footer {
  text-align: center;
}


/* -----------------------------------------------------------------------------
   10. SEIZOEN — gedeelde content-styling
   Layout (grid-structuur) is variant-specifiek en staat in variant-x.css
   ----------------------------------------------------------------------------- */
.seizoen__label {
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.4rem 1rem;
  border-radius: var(--radius-badge);
  text-transform: uppercase;
  align-self: flex-start;
}

.seizoen__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.seizoen__text {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: none;
}

.seizoen__highlights {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.seizoen__highlight {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.seizoen__highlight::before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  min-width: 20px;
  background-color: var(--color-primary-light);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23295640'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 13px;
  background-repeat: no-repeat;
  background-position: center;
}

.seizoen__media {
  position: relative;   /* anker voor de kortingsbadge */
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* Kortingsbadge — bewust in HTML/CSS i.p.v. ingebrand in de foto:
   zo pas je het percentage aan zonder nieuwe foto, blijft hij scherp op elk
   scherm en werkt hij bij elk seizoensbeeld. De tekst ernaast noemt de korting
   al, daarom staat de badge op aria-hidden (geen dubbele voorlezing). */
.seizoen__korting {
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  z-index: 2;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--color-accent-orange);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-8deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  border: 3px solid rgba(255, 255, 255, 0.9);
}

.seizoen__korting strong {
  font-family: var(--font-heading);
  font-size: 1.65rem;
  font-weight: 700;
}

.seizoen__korting span {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-top: 0.15rem;
}

.seizoen__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
  transition: var(--transition-img);
}

.seizoen__media:hover .seizoen__image {
  transform: scale(1.03);
}

.seizoen__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}


/* -----------------------------------------------------------------------------
   11. REVIEWS — volledig (layout is identiek in alle drie varianten)
   ----------------------------------------------------------------------------- */
.reviews {
  background-color: var(--color-primary);
  padding: var(--section-padding);
}

.reviews .section-header__title {
  color: #ffffff;
}

.reviews .section-header__subtitle {
  color: rgba(255, 255, 255, 0.75);
}

.reviews__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.review-kaart__article {
  background-color: var(--color-bg-green-light);
  border-radius: var(--radius-card);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100%;
  transition: var(--transition);
}

.review-kaart__article:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.review-kaart__sterren {
  display: flex;
  gap: 0.25rem;
}

.review-kaart__ster {
  font-size: 1.25rem;
  color: var(--color-accent-orange);
  line-height: 1;
}

.review-kaart__ster--leeg {
  color: #c8d8cc;
}

.review-kaart__tekst {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.7;
  flex: 1;
}

.review-kaart__tekst p {
  max-width: none;
}

.review-kaart__auteur {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 133, 62, 0.15);
}

.review-kaart__naam {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text);
}

.review-kaart__locatie {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--color-text-muted);
}


/* -----------------------------------------------------------------------------
   12. MERKEN
   ----------------------------------------------------------------------------- */
.merken {
  background-color: var(--color-bg-white);
  padding: var(--section-padding);
}

/* -----------------------------------------------------------------------------
   MERKENSLIDER — CSS-only logo-marquee
   Naadloze oneindige loop, pauzeert bij hover, valt bij prefers-reduced-motion
   terug op een scrollbare rij. De track bevat twee IDENTIEKE sets en schuift
   precies één set naar links (-100% / --set-count). Meer of andere logo's?
   Pas beide sets identiek aan en houd --set-count gelijk aan het aantal sets.
   ----------------------------------------------------------------------------- */
@keyframes merken-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% / var(--set-count, 2))); }
}

.merken__slider {
  overflow: hidden;
  /* Zachte fade aan beide randen */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.merken__slider:hover .merken__track {
  animation-play-state: paused;
}

.merken__track {
  display: flex;
  width: max-content;
  animation: merken-scroll 32s linear infinite;   /* snelheid: hoger = trager */
}

.merken__set {
  display: flex;
  gap: 1.25rem;
  padding-inline-end: 1.25rem;   /* zelfde ruimte op de naad als tussen de kaarten */
}

.merk-kaart {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  min-height: 110px;
  padding: 1rem 1.5rem;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-card);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.merk-kaart:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-card-hover);
}

.merk-kaart__logo {
  max-width: 150px;
  max-height: 90px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(100%);
  opacity: 0.7;
  transition: filter 0.25s ease, opacity 0.25s ease;
}

.merk-kaart:hover .merk-kaart__logo {
  filter: grayscale(0%);
  opacity: 1;
}

/* Toegankelijkheid: geen beweging bij voorkeur -> scrollbaar i.p.v. animatie */
@media (prefers-reduced-motion: reduce) {
  .merken__track { animation: none; }
  .merken__slider {
    overflow-x: auto;
    -webkit-mask-image: none;
            mask-image: none;
    scrollbar-width: none;
  }
  .merken__slider::-webkit-scrollbar { display: none; }
}

@media (max-width: 479px) {
}


/* -----------------------------------------------------------------------------
   13. CONTACT & OPENINGSTIJDEN
   ----------------------------------------------------------------------------- */
.contact {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.contact__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.contact__kaart {
  background-color: var(--color-bg-white);
  border-radius: var(--radius-card);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  height: 100%;
}

.contact__kaart-titel {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--color-primary-light);
}

/* Openingstijden tabel */
.openingstijden {
  width: 100%;
  border-collapse: collapse;
}

.openingstijden__rij {
  transition: background-color 0.2s ease;
}

.openingstijden__rij:nth-child(even) {
  background-color: var(--color-primary-light);
}

.openingstijden__rij:hover {
  background-color: var(--color-bg-green-light);
}

.openingstijden__dag,
.openingstijden__tijd {
  padding: 0.625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text);
  vertical-align: middle;
}

.openingstijden__dag {
  font-weight: 500;
  width: 48%;
  text-align: left;
}

.openingstijden__tijd {
  font-weight: 400;
  color: var(--color-text-muted);
  text-align: right;
  white-space: nowrap;
}

/* Contactgegevens */
.contact__adres {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Ruimte tussen de contactgegevens en de knop (knop = directe child van de kaart) */
.contact__kaart > .btn {
  margin-top: 1.5rem;
}

.contact__gegevens-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.contact__gegeven {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.contact__gegeven-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.contact__gegeven-waarde {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--color-text);
}

.contact__link {
  color: var(--color-primary);
  font-weight: 500;
  transition: var(--transition);
}

.contact__link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Google Maps iframe */
.contact__kaart--kaart {
  padding: 1.5rem;
}

.contact__maps-wrap {
  border-radius: 10px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.contact__maps {
  width: 100%;
  height: 280px;
  border: 0;
  display: block;
}


/* -----------------------------------------------------------------------------
   14. FOOTER
   ----------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-primary-dark);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 3rem;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Merk / logo kolom */
.site-footer__merk {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.site-footer__logo img { height: 46px; width: auto; background: #ffffff;
  padding: 7px 13px; border-radius: 8px; }

.site-footer__tagline {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.65;
  max-width: 28ch;
}

/* Social links */
.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.site-footer__social-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  padding: 0.375rem 0.875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  transition: var(--transition);
}

.site-footer__social-link:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.4);
  background-color: rgba(255, 255, 255, 0.08);
}

/* Nav kolommen */
.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.site-footer__nav-titel {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.45);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.25rem;
}

.site-footer__nav-lijst {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.site-footer__nav-link {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.7);
  transition: var(--transition);
}

.site-footer__nav-link:hover {
  color: #ffffff;
  padding-left: 4px;
}

/* Footer bodem */
.site-footer__bodem {
  background-color: rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.site-footer__bodem-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  flex-wrap: wrap;
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  max-width: none;
}

.site-footer__juridisch {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.site-footer__juridisch-link {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.4);
  transition: var(--transition);
}

.site-footer__juridisch-link:hover {
  color: rgba(255, 255, 255, 0.75);
}


/* -----------------------------------------------------------------------------
   15. WORKSHOPS — kaart-stijl & modal (gedeeld patroon)
   Variant-specifieke layout (grid vs lijst vs featured) staat in variant-x.css
   ----------------------------------------------------------------------------- */
.workshops {
  background-color: var(--color-bg-white);
  padding: var(--section-padding);
}

/* 3-koloms grid — default (variant-a); varianten kunnen dit overschrijven */
.workshops__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Workshop-kaart */
.workshop-kaart {
  background-color: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-primary-light);
  transition: var(--transition);
  overflow: hidden;
}

.workshop-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.workshop-kaart.is-past {
  opacity: 0.52;
  filter: grayscale(0.45);
}

.workshop-kaart.is-past .workshop-kaart__cta {
  pointer-events: none;
  color: var(--color-text-muted);
}

.workshop-kaart__article {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Datum-badge */
.workshop-kaart__date-badge {
  background-color: var(--color-primary);
  color: #ffffff;
  width: 80px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  flex-shrink: 0;
  padding: 0.625rem 0.5rem;
}

.workshop-kaart__month {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  opacity: 0.85;
}

.workshop-kaart__day {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}

.workshop-kaart__year {
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  opacity: 0.75;
}

/* Kaart inhoud */
.workshop-kaart__body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.workshop-kaart__title {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.25;
}

.workshop-kaart__desc {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-width: none;
}

.workshop-kaart__cta {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: auto;
  transition: var(--transition);
  text-align: left;
}

.workshop-kaart__cta:hover {
  color: var(--color-primary-dark);
  gap: 0.625rem;
}

.workshops__footer {
  text-align: center;
}


/* WORKSHOPS MODAL — gedeeld patroon */
.workshops-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workshops-modal[hidden] {
  display: none;
}

.workshops-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.workshops-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: 2.5rem;
  width: 90%;
  max-width: 560px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 60, 28, 0.25);
}

.workshops-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: var(--color-primary-light);
  border: none;
  border-radius: 50%;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.workshops-modal__close:hover {
  background: var(--color-primary);
  color: #ffffff;
}

.workshops-modal__header {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  padding-right: 2.5rem;
}

.workshops-modal__date-badge {
  background-color: var(--color-primary);
  color: #ffffff;
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-badge);
  padding: 0.5rem;
}

.workshops-modal__date-badge .modal-date__month {
  font-family: var(--font-body);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
  line-height: 1;
}

.workshops-modal__date-badge .modal-date__day {
  font-family: var(--font-heading);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1;
  margin: 0.1rem 0;
}

.workshops-modal__date-badge .modal-date__year {
  font-family: var(--font-body);
  font-size: 0.625rem;
  opacity: 0.7;
  line-height: 1;
}

.workshops-modal__title {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: 0.375rem;
}

.workshops-modal__meta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: none;
}

.workshops-modal__description {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: 1.5rem;
  max-width: none;
}

.workshops-modal__includes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding: 1.25rem;
  background: var(--color-primary-light);
  border-radius: var(--radius-badge);
}

.workshops-modal__includes li {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  max-width: none;
}

.workshops-modal__includes li::before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  min-width: 18px;
  background-color: var(--color-primary);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

.workshops-modal__info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.workshops-modal__info-grid div {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.workshops-modal__info-grid strong {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
}

.workshops-modal__info-grid span {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
  max-width: none;
}

.workshops-modal__back {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  transition: var(--transition);
}

.workshops-modal__back:hover {
  color: var(--color-primary-dark);
}

.workshops-modal__form-title {
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 1.5rem;
}

.workshops-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.workshops-modal__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.workshops-modal__field label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.workshops-modal__field input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: #ffffff;
  transition: border-color 0.2s ease;
}

.workshops-modal__field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.workshops-modal__field input::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.workshops-modal__confirm {
  text-align: center;
  padding: 1rem 0;
}

.workshops-modal__confirm-icon {
  width: 64px;
  height: 64px;
  background-color: var(--color-primary);
  color: #ffffff;
  border-radius: 50%;
  font-size: 2rem;
  line-height: 64px;
  margin: 0 auto 1.5rem;
}

.workshops-modal__confirm h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.workshops-modal__confirm p {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 1.75rem;
  max-width: none;
}


/* -----------------------------------------------------------------------------
   16. RESPONSIVE — HEADER & HAMBURGER (≤1023px)
   ----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .site-header__menu-toggle {
    display: flex;
  }

  .site-header__cta {
    display: none;
  }

  .site-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background-color: var(--color-bg-white);
    padding: 1.5rem var(--container-pad-x) 2rem;
    box-shadow: 0 8px 32px rgba(0, 60, 28, 0.12);
    transform: translateY(-10px);
    opacity: 0;
    pointer-events: none;
    transition: var(--transition);
    z-index: 200;
    /* Menu mag nooit buiten beeld vallen: begrens tot de resterende schermhoogte
       en maak hem scrollbaar (nodig zodra het assortiment-mega uitklapt).
       dvh houdt rekening met de adresbalk op mobiel; vh is de fallback. */
    max-height: calc(100vh - var(--header-height));
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .site-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
  }

  .site-nav__link {
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }
}


/* -----------------------------------------------------------------------------
   17. RESPONSIVE — TABLET (768px – 1023px)
   ----------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1023px) {

  :root {
    --section-padding: 70px 0;
  }

  /* Reviews: 2-koloms */
  .reviews__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .reviews__list .review-kaart:last-child {
    grid-column: 1 / -1;
    max-width: 560px;
    margin-inline: auto;
    width: 100%;
  }

  /* Contact: 2-koloms + 1 breed */
  .contact__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact__kaart--kaart {
    grid-column: 1 / -1;
  }

  /* Footer: 2-koloms */
  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .site-footer__merk {
    grid-column: 1 / -1;
  }

  /* KPI: 2-koloms */
  .kpi-bar__list {
    flex-wrap: wrap;
    height: auto;
    padding: 6px 0;
    gap: 2px 0;
  }

  .kpi-bar__item {
    width: 50%;
    justify-content: center;
    padding: 5px 1rem;
  }

  .kpi-bar__item:nth-child(2n+1)::before {
    display: none;
  }

  /* Workshops: 2-koloms */
  .workshops__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .workshops__grid .workshop-kaart:last-child {
    grid-column: 1 / -1;
    max-width: 480px;
    margin-inline: auto;
    width: 100%;
  }
}


/* -----------------------------------------------------------------------------
   18. RESPONSIVE — MOBIEL (<768px)
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {

  :root {
    --section-padding:  56px 0;
    --header-height:    64px;
  }

  /* KPI: op mobiel één belofte tegelijk, rouleert automatisch met een
     fade/schuif-animatie. Puur CSS (keyframes onderaan dit bestand), zodat
     het op elke pagina werkt zonder extra script. */
  .kpi-bar__list {
    position: relative;
    display: block;
    height: 42px;
  }

  .kpi-bar__item {
    position: absolute;
    inset: 0;
    justify-content: center;
    padding: 0 1rem;
    opacity: 0;
    animation: kpi-wissel 16s linear infinite;
  }

  /* Geen scheidingsstreepje op mobiel: de items liggen hier over elkaar en
     tonen één voor één, dus het verticale lijntje links hoort er niet. */
  .kpi-bar__item::before {
    display: none;
  }

  .kpi-bar__item:nth-child(2) { animation-delay: 4s; }
  .kpi-bar__item:nth-child(3) { animation-delay: 8s; }
  .kpi-bar__item:nth-child(4) { animation-delay: 12s; }

  /* Kortingsbadge: compacter op mobiel */
  .seizoen__korting {
    width: 76px;
    height: 76px;
    top: 0.85rem;
    right: 0.85rem;
  }

  .seizoen__korting strong {
    font-size: 1.35rem;
  }

  /* Reviews: 1-koloms */
  .reviews__list {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Category card body */
  .category-card__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  /* Nieuws: geen grid-regel hier — .nieuws__grid is variant-specifiek (zie §9)
     en elke variant-x.css laadt later, dus een override hier heeft geen effect. */

  /* Contact: 1-koloms */
  .contact__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Footer: 1-koloms */
  .site-footer__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .site-footer__bodem-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }

  .site-footer__juridisch {
    justify-content: center;
  }

  /* Section header kleine aanpassing */
  .section-header {
    margin-bottom: 2rem;
  }

  /* Workshops: 1-koloms */
  .workshops__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .workshops-modal__panel {
    padding: 1.75rem 1.25rem;
  }

  .workshops-modal__info-grid {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------------------------
   19. INNER-PAGE PRIMITIVES — gedeelde bouwstenen voor subpagina's
   page-hero · breadcrumb · contactformulier · bezoek-blok · verhaal · team
   Variant-signatuur (cursieve koppen, gouden ornament, panelen) komt in
   variant-x.css; dit is de neutrale baseline die alle varianten erven.
   ----------------------------------------------------------------------------- */

/* 19.1 PAGE-HERO — compacte paginakop (kleiner dan de homepage-hero) */
.page-hero {
  background-color: var(--color-bg-green-light);
  border-bottom: 1px solid rgba(0, 133, 62, 0.10);
  padding: clamp(2.25rem, 5vw, 3.75rem) 0;
}

.page-hero__content {
  max-width: 720px;
}

.page-hero__title {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.15;
}

.page-hero__subtitle {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 60ch;
  margin-top: 0.875rem;
}

/* 19.2 BREADCRUMB — kruimelpad */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-muted);
}

/* Home als huisje-icoon — inline SVG erft de linkkleur via currentColor */
.breadcrumb__home {
  display: inline-flex;
  align-items: center;
}

.breadcrumb__home svg {
  width: 16px;
  height: 16px;
  display: block;
}

.breadcrumb a {
  color: var(--color-text-muted);
  transition: color 0.2s ease;
}

.breadcrumb a:hover {
  color: var(--color-primary);
}

.breadcrumb [aria-current="page"] {
  color: var(--color-primary);
  font-weight: 600;
}

.breadcrumb__sep {
  opacity: 0.5;
  user-select: none;
}

/* 19.3 CONTACTFORMULIER — sectie + grid + formulier */
.contactform {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.contactform__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  background-color: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2.25rem;
}

.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.125rem;
}

.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.contact-form__field--vol {
  grid-column: 1 / -1;
}

.contact-form__field label {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
}

.contact-form__field input,
.contact-form__field textarea,
.contact-form__field select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text);
  background: #ffffff;
  transition: border-color 0.2s ease;
}

/* Select: eigen chevron (SVG, donker neutraal) op hetzelfde kader als een input */
.contact-form__field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23112a1e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 1rem center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.contact-form__field select::-ms-expand { display: none; }

/* Uitklaplijst in merkstijl — progressive enhancement voor browsers met
   'customizable select' (Chromium/Edge 135+). Andere browsers tonen de
   systeemlijst en negeren dit blok. */
@supports (appearance: base-select) {
  .contact-form__field select,
  .contact-form__field select::picker(select) {
    appearance: base-select;
  }
  .contact-form__field select {
    background-image: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 1rem;
  }
  .contact-form__field select::picker-icon {
    content: '';
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-left: .75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23112a1e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: rotate 0.2s ease;
  }
  .contact-form__field select:open::picker-icon {
    rotate: 180deg;
  }
  .contact-form__field select::picker(select) {
    margin-top: 0.35rem;
    padding: 0.35rem;
    border: 2px solid var(--color-primary-light);
    border-radius: var(--radius-btn);
    background: #ffffff;
    box-shadow: var(--shadow-card-hover);
    max-height: 320px;
    overflow-y: auto;
  }
  .contact-form__field option {
    padding: 0.55rem 0.8rem;
    border-radius: 6px;
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
  }
  .contact-form__field option::checkmark {
    display: none;
  }
  .contact-form__field option:hover,
  .contact-form__field option:focus-visible {
    background: var(--color-primary-light);
    color: var(--color-primary);
    outline: none;
  }
  .contact-form__field option:checked {
    background: var(--color-primary);
    color: #ffffff;
  }
}

.contact-form__field textarea {
  resize: vertical;
  min-height: 140px;
}

.contact-form__field input:focus,
.contact-form__field textarea:focus,
.contact-form__field select:focus {
  outline: none;
  border-color: var(--color-primary);
}

.contact-form__field input[aria-invalid="true"],
.contact-form__field textarea[aria-invalid="true"] {
  border-color: #c0392b;
}

.contact-form__field input::placeholder,
.contact-form__field textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.contact-form__submit {
  align-self: flex-start;
}

/* Bevestigingsmelding na verzenden */
.contact-form__confirm {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  background-color: var(--color-primary-light);
  border-radius: var(--radius-badge);
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: var(--color-text);
}

.contact-form__confirm[hidden] {
  display: none;
}

.contact-form__confirm-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background-color: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
}

/* Aside naast het formulier (hergebruikt .contact__kaart-stijl) */
.contactform__aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* 19.4 BEZOEK — openingstijden + kaart als 2-koloms blok */
.bezoek {
  background-color: var(--color-bg-white);
  padding: var(--section-padding);
}

.bezoek__grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 1.5rem;
  align-items: start;
}

/* 19.5 VERHAAL — tekst + beeld blok (Over ons), hergebruikt seizoen-ritme */
.verhaal {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.verhaal__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.verhaal__media {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.verhaal__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  display: block;
}

.verhaal__content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.verhaal__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-primary);
}

.verhaal__title {
  font-family: var(--font-heading);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
}

.verhaal__text {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: none;
}

/* 19.6 TEAM — medewerkerskaarten */
.team {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.team__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.team-kaart {
  background-color: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: var(--transition);
}

.team-kaart:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}

.team-kaart__image-wrap {
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

/* Initialen-avatar als placeholder (geen teamfoto's beschikbaar) */
.team-kaart__image-wrap--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.team-kaart__initialen {
  font-family: var(--font-heading);
  font-size: 2.75rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.02em;
}

.team-kaart__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: var(--transition-img);
}

.team-kaart:hover .team-kaart__image {
  transform: scale(1.05);
}

.team-kaart__body {
  padding: 1.25rem 1.5rem 1.5rem;
  text-align: center;
}

.team-kaart__naam {
  font-family: var(--font-heading);
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text);
}

.team-kaart__rol {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-top: 0.2rem;
}

/* 19.7 RESPONSIVE — inner-page primitives */
@media (min-width: 768px) and (max-width: 1023px) {
  .team__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .contactform__grid,
  .bezoek__grid,
  .verhaal__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .contact-form {
    padding: 1.5rem;
  }

  .contact-form__row {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 479px) {
  .team__grid {
    grid-template-columns: 1fr;
  }
}


/* 19.8 NIEUWS-OVERZICHT — uniform grid (los van de homepage-masonry van variant B) */
.nieuws-overzicht {
  background-color: var(--color-bg-white);
  padding: var(--section-padding);
}

.nieuws-overzicht__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* 19.9 PAGINATIE */
.paginatie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  list-style: none;
}

.paginatie__link,
.paginatie__huidig {
  min-width: 40px;
  height: 40px;
  padding: 0 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(0, 133, 62, 0.18);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
  transition: var(--transition);
}

.paginatie__link:hover {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.paginatie__huidig {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.paginatie__link[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .nieuws-overzicht__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .nieuws-overzicht__grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}


/* 19.10 ASSORTIMENT-OVERZICHT — uniform categorie-grid (los van de B-carrousel) */
.assortiment-intro {
  background-color: var(--color-bg);
  padding: var(--section-padding);
}

.assortiment-intro__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .assortiment-intro__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .assortiment-intro__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
}

@media (max-width: 479px) {
  .assortiment-intro__grid {
    grid-template-columns: 1fr;
  }
}


/* -----------------------------------------------------------------------------
   20b. COMPACTE DROPDOWN — klein paneel onder een los menu-item
   Zelfde markup en JS als het mega-menu (§20): <li class="site-nav__item
   site-nav__item--mega site-nav__item--compact" data-dropdown> met daarin een
   .site-nav__trigger en een <div class="mega mega--compact"> met precies één
   .mega__kolom (kop + lijst). Gebruik dit voor korte submenu's (Over ons,
   Bloemen, Service …); het volle-breedte mega-menu blijft voor het assortiment.
   Mobiel (≤1023px) toont het schuifmenu de links direct op niveau 1; de kop
   verschijnt als 'alles'-link als hij niet al in de lijst staat, of via
   data-alles="…" op de .mega__kop.
   ----------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  .site-nav__item--compact {
    position: relative;
  }
  .mega--compact {
    left: 0;
    right: auto;
    min-width: 240px;
    border-top: 2px solid var(--color-primary);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }
  .mega--compact .mega__inner {
    max-width: none;
    padding: 1.1rem 1.4rem 1.2rem;
  }
  .mega--compact .mega__grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .mega--compact .mega__kop {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 0.55rem;
  }
  .mega--compact .mega__lijst {
    gap: 0;
  }
  .mega--compact .mega__lijst a {
    display: block;
    padding: 0.4rem 0;
    white-space: nowrap;
  }
}


/* -----------------------------------------------------------------------------
   20. ASSORTIMENT MEGA-MENU — dropdown in de hoofdnavigatie
   Volle-breedte paneel onder de header met categorieën + subcategorieën.
   Opent op hover/focus (desktop) of via klik (touch/keyboard, JS toggelt .is-open).
   ----------------------------------------------------------------------------- */

/* Trigger-knop — gelijke look als .site-nav__link */
.site-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.875rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  letter-spacing: 0.01em;
  line-height: 1;
  background: none;
  border: none;
  border-radius: var(--radius-badge);
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}

.site-nav__item--mega:hover .site-nav__trigger,
.site-nav__item--mega:focus-within .site-nav__trigger,
.site-nav__item--mega.is-open .site-nav__trigger,
.site-nav__trigger[aria-current="page"] {
  color: var(--color-primary);
  background-color: var(--color-primary-light);
}

/* Caret-pijltje */
.site-nav__caret {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.25s ease;
}

.site-nav__item--mega:hover .site-nav__caret,
.site-nav__item--mega:focus-within .site-nav__caret,
.site-nav__item--mega.is-open .site-nav__caret {
  transform: rotate(-135deg) translateY(-1px);
}

/* Volle-breedte paneel — anker is de sticky .site-header */
.mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 320;
  background-color: var(--color-bg-white);
  border-top: 1px solid var(--color-primary-light);
  box-shadow: 0 18px 44px rgba(0, 60, 28, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.site-nav__item--mega:hover > .mega,
.site-nav__item--mega:focus-within > .mega,
.site-nav__item--mega.is-open > .mega {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega__inner {
  padding-top: 2.25rem;
  padding-bottom: 2.25rem;
}

.mega__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem 2.5rem;
}

.mega__kop {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-primary-light);
  transition: color 0.2s ease;
}

.mega__kop:hover {
  color: var(--color-primary);
}

.mega__lijst {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  list-style: none;
}

.mega__lijst a {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  transition: color 0.2s ease, padding-left 0.2s ease;
}

.mega__lijst a:hover {
  color: var(--color-primary);
  padding-left: 4px;
}

.mega__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-primary-light);
}

.mega__foot-tekst {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* RESPONSIVE — binnen het mobiele menu wordt de mega een uitklap-accordeon */
@media (max-width: 1023px) {
  .mega {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-top: none;
    background: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .site-nav__item--mega.is-open > .mega {
    max-height: 2000px;
  }

  .site-nav__trigger {
    width: 100%;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    font-size: 1rem;
  }

  .mega__inner {
    padding: 0.25rem 0 0.75rem 0.75rem;
  }

  .mega__grid {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .mega__foot {
    justify-content: flex-start;
    margin-top: 1.25rem;
    padding-top: 1rem;
  }
}


/* =============================================================================
   21. PRODUCTCATEGORIE-BOUWSTENEN — gedeelde basis
   Voor categorie-*.html, subcategorie-*.html en plant-*.html.
   Dit is de neutrale, gedeelde laag (mechanics + content-stijl). De
   layout-expressie verschilt per variant en staat in variant-x.css:
   A = zachte kaarten met schaduw (sectie 17/18 aldaar, overschrijft dit),
   B = panelen met gedeelde randen en nummering, C = klassiek met top-accent
   en donkere panelen. Zie STYLEGUIDE §8.7.
   ============================================================================= */

/* Sectie-tonen — voor afwisseling in het achtergrondritme.
   Als section.pc-* geschreven (specificiteit 0,1,1) zodat ze ook winnen van
   sectie-achtergronden in variant-x.css, die later in de cascade laden. */
section.pc-wit  { background: var(--color-bg-white); }
section.pc-tint { background: var(--color-bg-green-light); }
section.pc-warm { background: var(--color-bg); }

/* Keuzehulp — drie situatiekaarten */
.pc-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.pc-keuze__kaart { background: var(--color-bg-white); padding: 2rem 1.75rem; }

.pc-keuze__vraag {
  font-family: var(--font-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.6rem;
}

.pc-keuze__tekst { font-size: 0.9rem; line-height: 1.6; color: var(--color-text-muted); margin-bottom: 1rem; max-width: none; }

.pc-keuze__lijst { display: flex; flex-direction: column; gap: 0.45rem; }
.pc-keuze__lijst li { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--color-text); }
.pc-keuze__lijst li::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-accent-orange);
  flex-shrink: 0;
}

/* Kies-op-tegels (standplaats, maat, levensfase, …) */
.pc-plekken { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }

.pc-plek { background: var(--color-bg-white); padding: 1.5rem 1rem; text-align: center; }

.pc-plek__icon {
  width: 48px; height: 48px;
  margin: 0 auto 0.75rem;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.pc-plek__icon img { width: 24px; height: 24px; }

.pc-plek__naam { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.2rem; }
.pc-plek__tekst { font-size: 0.8rem; color: var(--color-text-muted); max-width: none; }

/* Eigenschaps-tag */
.pc-tag {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border-radius: 50px;
  padding: 0.25rem 0.65rem;
}
.pc-item__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }

/* FAQ — <details> met hoogte-animatie (JS zet de hoogte; zonder JS werkt het gewoon) */
.pc-faq { max-width: 820px; margin-inline: auto; display: flex; flex-direction: column; gap: 0.75rem; }

.pc-faq details { background: var(--color-bg-white); overflow: hidden; }

.pc-faq summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3.5rem 1.15rem 1.5rem;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
  transition: color 0.25s ease;
}
.pc-faq summary::-webkit-details-marker { display: none; }
.pc-faq summary:hover { color: var(--color-primary); }

/* Plus die naar een minteken morpht */
.pc-faq summary::before,
.pc-faq summary::after {
  content: '';
  position: absolute;
  right: 1.5rem; top: 50%;
  width: 14px; height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pc-faq summary::before { transform: translateY(-50%); }
.pc-faq summary::after  { transform: translateY(-50%) rotate(90deg); }
.pc-faq details[open] summary::after { transform: translateY(-50%) rotate(0deg); }

.pc-faq__body { overflow: hidden; transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.pc-faq--js .pc-faq__antwoord { opacity: 0; transform: translateY(-6px); transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s; }
.pc-faq--js details[open] .pc-faq__antwoord { opacity: 1; transform: none; }
.pc-faq__antwoord { padding: 0 1.5rem 1.35rem; font-size: 0.9375rem; line-height: 1.75; color: var(--color-text-muted); max-width: none; }

/* Advies-CTA */
.pc-cta { background: var(--color-primary); color: #ffffff; padding: clamp(2.5rem, 5vw, 3.5rem) 0; }
.pc-cta__inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.pc-cta__tekst h2 { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.5vw, 2rem); color: #ffffff; margin-bottom: 0.4rem; }
.pc-cta__tekst p { color: rgba(255, 255, 255, 0.9); font-size: 1rem; max-width: 52ch; }
.pc-cta .btn--wit { background: #ffffff; color: var(--color-primary-dark); border-color: #ffffff; }
.pc-cta .btn--wit:hover { background: var(--color-accent-orange); color: #ffffff; border-color: var(--color-accent-orange); transform: translateY(-2px); }

/* SEO-tekstblok — ingeklapt met fade + "Lees meer" (tekst staat volledig in de HTML) */
.seo-blok { background: var(--color-bg); padding: clamp(2.5rem, 5vw, 3.5rem) 0 clamp(3rem, 6vw, 4rem); border-top: 1px solid rgba(0, 133, 62, 0.15); }
.seo-blok__inhoud { position: relative; max-width: 880px; margin-inline: auto; max-height: 11rem; overflow: hidden; transition: max-height 0.4s ease; }
.seo-blok__inhoud::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 6rem;
  background: linear-gradient(to bottom, rgba(247, 250, 248, 0) 0%, var(--color-bg) 92%);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.seo-blok.is-open .seo-blok__inhoud::after { opacity: 0; }
.seo-blok__inhoud h2 { font-family: var(--font-heading); font-size: clamp(1.35rem, 2.2vw, 1.75rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.85rem; }
.seo-blok__inhoud h3 { font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 700; color: var(--color-text); margin: 1.5rem 0 0.5rem; }
.seo-blok__inhoud p { font-size: 0.9375rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 0.85rem; max-width: none; }
.seo-blok__inhoud a { color: var(--color-primary); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }
.seo-blok__inhoud a:hover { color: var(--color-primary-dark); }
.seo-blok__toggle {
  display: inline-flex; align-items: center; gap: 0.45rem;
  margin: 1.25rem auto 0; padding: 0.6rem 1.4rem;
  background: none;
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-btn);
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  transition: var(--transition);
}
.seo-blok__toggle:hover { background: var(--color-primary); color: #ffffff; }
.seo-blok__toggle::after {
  content: '';
  width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.25s ease;
}
.seo-blok.is-open .seo-blok__toggle::after { transform: rotate(-135deg) translateY(-1px); }
.seo-blok__knopregel { display: flex; justify-content: center; }

@media (max-width: 1023px) {
  .pc-keuze { grid-template-columns: repeat(2, 1fr); }
  .pc-plekken { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .pc-keuze { grid-template-columns: 1fr; }
  .pc-plekken { grid-template-columns: repeat(2, 1fr); }
  .pc-cta__inner { flex-direction: column; align-items: flex-start; }
}


/* --- §21 vervolg: productgrid (subcategoriepagina) en plantkop (productpagina).
       Neutrale basis; expressie per variant in variant-x.css (A: eigen §17/18). --- */

/* Productgrid */
.pc-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

.pc-item { background: var(--color-bg-white); overflow: hidden; transition: var(--transition); }

.pc-item__img { aspect-ratio: 4 / 3; overflow: hidden; }
.pc-item__img img { width: 100%; height: 100%; object-fit: cover; transition: var(--transition-img); }
.pc-item:hover .pc-item__img img { transform: scale(1.05); }

.pc-item__body { padding: 1.35rem 1.5rem 1.6rem; }
.pc-item__naam { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.3rem; }
.pc-item__latijn { display: block; font-size: 0.8rem; font-style: italic; color: var(--color-text-muted); margin-bottom: 0.6rem; }
.pc-item__tekst { font-size: 0.9rem; line-height: 1.6; color: var(--color-text-muted); max-width: none; }

.pc-item__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.pc-item__cta {
  display: inline-flex; align-items: center; gap: 0.4rem;
  margin-top: 1rem;
  font-family: var(--font-body); font-size: 0.875rem; font-weight: 600;
  color: var(--color-primary);
  transition: var(--transition);
}
.pc-item__cta::after { content: '\2192'; transition: var(--transition); }
.pc-item:hover .pc-item__cta::after { transform: translateX(4px); }

/* Plantkop — galerij + kenmerkenlijst */
.pd-kop { padding: var(--section-padding); }

.pd-kop__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: start; }

.pd-kop__media { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.pd-kop__hoofdbeeld,
.pd-kop__thumb { aspect-ratio: 4 / 3; overflow: hidden; }
.pd-kop__hoofdbeeld { grid-column: 1 / -1; }
.pd-kop__hoofdbeeld img,
.pd-kop__thumb img { width: 100%; height: 100%; object-fit: cover; }

.pd-kop__latijn { font-family: var(--font-heading); font-style: italic; font-size: 1.25rem; color: var(--color-text-muted); margin-bottom: 1.1rem; }
.pd-kop__tekst { font-size: 0.95rem; line-height: 1.8; color: var(--color-text-muted); margin-bottom: 1rem; max-width: none; }

.pd-specs { margin: 1.75rem 0 1.5rem; border-top: 1px solid rgba(0, 133, 62, 0.2); }

.pd-spec {
  display: grid;
  grid-template-columns: 32px 8.5rem 1fr;
  align-items: start;
  gap: 0.9rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(0, 133, 62, 0.2);
}

.pd-spec__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--color-primary-light);
  display: flex; align-items: center; justify-content: center;
}
.pd-spec__icon img { width: 17px; height: 17px; }

.pd-spec__label { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.pd-spec__waarde { font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: var(--color-text-muted); }

/* Beeldkolom scrollt mee zolang de kenmerkenlijst ernaast langer is.
   Vereist align-items: start op .pd-kop__inner; alleen op desktop. */
@media (min-width: 1024px) {
  .pd-kop__media {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
  }
}

@media (max-width: 1023px) {
  .pc-items { grid-template-columns: repeat(2, 1fr); }
  .pd-kop__inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 767px) {
  .pc-items { grid-template-columns: 1fr; }
  /* Kenmerken: icoon links over twee rijen, label en waarde eronder elkaar */
  .pd-spec { grid-template-columns: 32px 1fr; row-gap: 0.15rem; }
  .pd-spec__icon { grid-row: 1 / span 2; }
  .pd-spec__label,
  .pd-spec__waarde { grid-column: 2; }
}

/* -----------------------------------------------------------------------------
   KPI-BALK MOBIEL — wisselanimatie (zie responsive sectie hierboven)
   16s cyclus / 4 items = elke 4 seconden de volgende belofte.
   ----------------------------------------------------------------------------- */
@keyframes kpi-wissel {
  0%    { opacity: 0; transform: translateY(8px); }
  2.5%  { opacity: 1; transform: translateY(0); }
  22.5% { opacity: 1; transform: translateY(0); }
  25%   { opacity: 0; transform: translateY(-8px); }
  100%  { opacity: 0; transform: translateY(-8px); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .kpi-bar__item { animation: none; }
  .kpi-bar__item:first-child { opacity: 1; }
}

/* -----------------------------------------------------------------------------
   MOBIEL MENU — schuifpanelen met terugknop (mnav)
   Het menu vult op mobiel het hele scherm (lost ook de overlap met de
   KPI-balk op). Een script per pagina bouwt de panelen op uit de bestaande
   navigatie + het mega-menu: hoofdmenu -> categorieën -> subcategorieën.
   Diepere niveaus schuiven in beeld; 'Terug' schuift terug.
   ----------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* De nav leeft ín de sticky header (stacking context z:300); zolang het menu
     open is tillen we de hele header boven de kpi-balk (z:400) uit. */
  .site-header:has(.site-nav.is-open) {
    z-index: 600;
  }

  /* Volledig scherm, schuift van rechts in */
  .site-nav {
    /* Desktop-nav is een flex-container; als block krijgt de mnav-overlay
       gewoon de volle schermbreedte i.p.v. een gecentreerde content-breedte. */
    display: block;
    top: 0;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    padding: 0;
    /* clip i.p.v. hidden: hidden blijft programmatisch scrollbaar, waardoor de
       browser bij focus op een (nog) buiten beeld staand paneel de hele nav
       opzij scrolde. clip verbiedt elke scroll. */
    overflow: clip;
    z-index: 500;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
  }

  .site-nav.is-open {
    transform: translateX(0);
  }

  /* De originele lijst en het mega-paneel doen op mobiel niet mee */
  .site-nav > .site-nav__list { display: none; }

  .mnav { display: flex; flex-direction: column; height: 100%; }

  /* Bovenste regel: logo + sluiten (altijd zichtbaar) */
  .mnav__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.65rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 60px;
  }

  .mnav__logo { display: inline-flex; align-items: center; }
  .mnav__logo img { height: 42px; width: auto; display: block; }

  /* Tweede regel: terug + niveau-titel (alleen op diepere niveaus) */
  .mnav__top {
    display: flex;
    align-items: center;
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    min-height: 48px;
  }

  .mnav__top[hidden] { display: none; }

  .mnav__spacer { min-width: 72px; }

  .mnav__terug {
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-primary);
    cursor: pointer;
    padding: 0.25rem 0.5rem 0.25rem 0;
    min-width: 72px;
    text-align: left;
  }

  .mnav__titel {
    flex: 1;
    text-align: center;
    font-family: var(--font-body);
    font-weight: 600;
    color: var(--color-text);
  }

  .mnav__sluit {
    background: none;
    border: none;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--color-text);
    cursor: pointer;
    padding: 0.25rem 0 0.25rem 0.5rem;
    min-width: 72px;
    text-align: right;
  }

  .mnav__spoor {
    flex: 1;
    display: flex;
    min-height: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Elk paneel exact één schermbreedte; flex-basis + shrink 0 zodat lange
     menuteksten het spoor nooit kunnen oprekken (dan kloppen de
     verschuivings-percentages niet meer). */
  .mnav__paneel {
    flex: 0 0 100%;
    max-width: 100%;
    min-width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 1.25rem 1.5rem;
  }

  .mnav__paneel ul { list-style: none; margin: 0; padding: 0; }
  .mnav__paneel li { border-bottom: 1px solid rgba(0, 0, 0, 0.06); }

  .mnav__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.95rem 0.25rem;
    background: none;
    border: none;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .mnav__link span[aria-hidden] { color: var(--color-primary); font-size: 1.2rem; }

  .mnav__link--alles { color: var(--color-primary); font-weight: 600; }

  .mnav__voet {
    padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(0, 0, 0, 0.08);
  }

  .mnav__voet .btn { width: 100%; justify-content: center; }

  .site-nav .site-nav__item--mega .mega { display: none; }
}

@media (min-width: 1024px) {
  .mnav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .mnav__spoor { transition: none; }
}

/* Footer social — icoon-varianten (B/C) als ronde knop i.p.v. tekst-pill.
   Variant A gebruikt tekstlinks en houdt de pill; :has(svg) raakt alleen icoonlinks. */
.site-footer__social-link:has(svg) {
  width: 40px;
  height: 40px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.site-footer__social-link svg {
  width: 18px;
  height: 18px;
  display: block;
}


/* -----------------------------------------------------------------------------
   AANBIEDINGEN — overzicht (hergebruikt nieuws-kaart + kortingsbadge)
   ----------------------------------------------------------------------------- */
.nieuws-kaart--aanbieding .nieuws-kaart__image-wrap { position: relative; }

.aanbieding-korting {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 2;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--color-primary-dark);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transform: rotate(-8deg);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  border: 3px solid rgba(255, 255, 255, 0.9);
}
.aanbieding-korting strong { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; }
.aanbieding-korting span { font-family: var(--font-body); font-size: 0.55rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 0.1rem; }

.aanbieding-geldig {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-primary-dark);
  margin-top: 0.5rem;
}

/* Header-CTA verbergen bij 6 nav-items (voorkomt overflow 1024–1199px;
   de CTA is redundant met het Aanbod-menu-item) */
@media (max-width: 1199px) {
  .site-header__cta { display: none; }
}