/* =============================================================================
   BRAND.CSS — Life & Garden Oostburg
   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
   Life & Garden Oostburg merkprofiel. Varianten overschrijven ALLEEN
   layout-tokens in hun eigen :root-blok — nooit kleur- of font-tokens.
   ----------------------------------------------------------------------------- */
:root {
  /* Kleurenpalet — Life & Garden Oostburg */
  --color-primary:          #7ab648;
  --color-primary-dark:     #5a8e2f;
  --color-primary-light:    #eef6e4;
  --color-accent-orange:    #f0a500;
  --color-accent-pink:      #df0172;   /* Roze accent — van lifeandgardenoostburg.nl */
  --color-accent-pink-light:#fce6f1;   /* Lichte roze tint voor achtergronden */
  --color-bg:               #f9f9f7;
  --color-bg-white:         #ffffff;
  --color-bg-green-light:   #f2f7ed;
  --color-text:             #3a3a3a;
  --color-text-muted:       #7a7a7a;

  /* Typografie — Playfair Display + Poppins (template standaard) */
  --font-heading:           'Playfair Display', Georgia, serif;
  --font-body:              'Poppins', sans-serif;

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

  /* Schaduwen */
  --shadow-card:            0 2px 12px rgba(60, 100, 40, 0.10);
  --shadow-card-hover:      0 6px 24px rgba(60, 100, 40, 0.18);
  --shadow-header:          0 2px 16px rgba(60, 100, 40, 0.10);

  /* 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(60, 100, 40, 0.16), 0 1px 0 rgba(122, 182, 72, 0.10);
}

.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(240, 165, 0, 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: #ffd97a;
}


/* -----------------------------------------------------------------------------
   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(90, 142, 47, 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;
}

/* Roze actieknop — voor promotionele / seizoens-CTA's */
.btn--actie {
  background-color: var(--color-accent-pink);
  color: #ffffff;
  border-color: var(--color-accent-pink);
  border-radius: var(--radius-btn);
  padding: 0.8125rem 2rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.btn--actie:hover {
  background-color: #b8005e;
  border-color: #b8005e;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(223, 1, 114, 0.35);
}

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


/* -----------------------------------------------------------------------------
   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;
}

.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-accent-pink);
  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-accent-pink);
  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='%235a8e2f'%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-pink);
  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;
}

@media (max-width: 767px) {
  .seizoen__korting {
    width: 76px;
    height: 76px;
    top: 0.85rem;
    right: 0.85rem;
  }

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

.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-pink);
  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(122, 182, 72, 0.18);
}

.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: 40px; width: auto; background: #ffffff;
  padding: 7px 12px; 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(17, 42, 30, 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(17, 42, 30, 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; }

  /* 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(41, 86, 64, 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);
}

.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;
}

/* 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;
}

/* 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;
}

.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(41, 86, 64, 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;
  }
}


/* -----------------------------------------------------------------------------
   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(17, 42, 30, 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;
  }
}

/* -----------------------------------------------------------------------------
   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;
}

/* Header-CTA verbergen tot 1199px: met 6 menu-items (incl. Aanbiedingen) is er
   op smallere desktops geen ruimte voor de knop. Hij is redundant met het
   'Assortiment'-menu-item en blijft zichtbaar vanaf 1200px. */
@media (max-width: 1199px) {
  .site-header__cta { display: none; }
}