/* ═══════════════════════════════════════════════════════════════
   NEUROSHROOM — SITE.CSS
   Brain Health & Focus · neuroshroom.nl
   Versie 1.0 · 2026
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. DESIGN TOKENS — KLEUR
───────────────────────────────────────── */
:root {
  /* Groenen */
  --ns-forest:        #1E4A0D;   /* primaire merkkleur */
  --ns-forest-mid:    #2D6B1A;   /* hover / accenten */
  --ns-leaf:          #5A9E2A;   /* iconen, labels */
  --ns-leaf-light:    #8DC64A;   /* decoratieve accenten */

  /* Ambers */
  --ns-amber:         #C47520;   /* secundaire accentkleur */
  --ns-amber-warm:    #D4883A;   /* hover amber */
  --ns-amber-glow:    rgba(196,117,32,.15);

  /* Neutraal */
  --ns-cream:         #F5EDD8;   /* achtergrond secties */
  --ns-cream-dark:    #E8D9B8;   /* randen, dividers */
  --ns-bark:          #7A5230;   /* subtext */
  --ns-soil:          #3B2510;   /* donkere tekst op licht */
  --ns-white:         #FDFAF4;   /* page background */
  --ns-black:         #100D08;   /* body tekst */

  /* Semantisch */
  --ns-text:          var(--ns-black);
  --ns-text-muted:    var(--ns-bark);
  --ns-bg:            var(--ns-white);
  --ns-bg-alt:        var(--ns-cream);
  --ns-border:        var(--ns-cream-dark);
  --ns-primary:       var(--ns-forest);
  --ns-primary-hover: var(--ns-forest-mid);
  --ns-accent:        var(--ns-amber);
  --ns-accent-hover:  var(--ns-amber-warm);
}

/* ─────────────────────────────────────────
   2. DESIGN TOKENS — TYPOGRAFIE
───────────────────────────────────────── */
:root {
  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif:   'DM Serif Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   22px;
  --text-xl:   clamp(28px, 3.5vw, 40px);
  --text-2xl:  clamp(36px, 4.5vw, 54px);
  --text-3xl:  clamp(48px, 6vw, 80px);
  --text-hero: clamp(52px, 7vw, 96px);
}

/* ─────────────────────────────────────────
   3. DESIGN TOKENS — SPACING & LAYOUT
───────────────────────────────────────── */
:root {
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   80px;
  --space-10:  100px;
  --space-11:  128px;

  --container:       1280px;
  --container-tight: 900px;
  --container-wide:  1440px;

  --gutter:          clamp(20px, 5vw, 80px);
  --section-py:      clamp(60px, 8vw, 120px);
}

/* ─────────────────────────────────────────
   4. DESIGN TOKENS — EFFECTEN
───────────────────────────────────────── */
:root {
  --radius-sm:  8px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-xl:  40px;
  --radius-pill: 9999px;

  --shadow-sm:  0 2px 8px rgba(30,74,13,.08);
  --shadow-md:  0 6px 24px rgba(30,74,13,.12);
  --shadow-lg:  0 16px 48px rgba(30,74,13,.16);
  --shadow-xl:  0 32px 80px rgba(30,74,13,.20);

  --glow-green: 0 0 40px rgba(90,158,42,.35);
  --glow-amber: 0 0 40px rgba(196,117,32,.30);

  --transition: 0.28s cubic-bezier(.4,0,.2,1);
  --transition-slow: 0.5s cubic-bezier(.4,0,.2,1);
}

/* ─────────────────────────────────────────
   5. RESET & BASE
───────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ns-text);
  background: var(--ns-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: var(--ns-primary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover { color: var(--ns-primary-hover); }

ul, ol { list-style: none; }

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

/* ─────────────────────────────────────────
   6. LAYOUT — CONTAINER & GRID
───────────────────────────────────────── */
.ns-container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.ns-container--tight {
  max-width: var(--container-tight);
}

.ns-container--wide {
  max-width: var(--container-wide);
}

.ns-section {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  overflow-x: hidden;
}

.ns-section--cream {
  background: var(--ns-cream);
}

.ns-section--forest {
  background: var(--ns-forest);
  color: var(--ns-cream);
}

.ns-section--dark {
  background: var(--ns-soil);
  color: var(--ns-cream);
}

.ns-grid {
  display: grid;
  gap: var(--space-6);
}

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

.ns-grid--auto {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

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

.ns-flex--col { flex-direction: column; }
.ns-flex--center { justify-content: center; }
.ns-flex--between { justify-content: space-between; }
.ns-flex--wrap { flex-wrap: wrap; }

/* ─────────────────────────────────────────
   7. TYPOGRAFIE — HEADINGS & BODY
───────────────────────────────────────── */
.ns-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ns-leaf);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.ns-eyebrow::before,
.ns-eyebrow::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--ns-leaf);
  flex-shrink: 0;
}

/* Wanneer niet centered: alleen de lijn achter de tekst */
.ns-eyebrow:not([style*="center"])::before {
  display: none;
}

.ns-eyebrow--amber { color: var(--ns-amber); }
.ns-eyebrow--amber::before,
.ns-eyebrow--amber::after { background: var(--ns-amber); }

.ns-eyebrow--light { color: var(--ns-leaf-light); }
.ns-eyebrow--light::before,
.ns-eyebrow--light::after { background: var(--ns-leaf-light); }

.ns-h1 {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--ns-forest);
}

.ns-h2 {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ns-forest);
}

.ns-h3 {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ns-forest);
}

.ns-h4 {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ns-forest);
}

.ns-h1 em, .ns-h2 em, .ns-h3 em {
  color: var(--ns-amber);
  font-style: italic;
}

.ns-h1--light, .ns-h2--light, .ns-h3--light {
  color: var(--ns-cream);
}

.ns-lead {
  font-size: var(--text-md);
  line-height: 1.7;
  color: var(--ns-bark);
  max-width: 60ch;
}

.ns-lead--light { color: rgba(245,237,216,.75); }

.ns-body { font-size: var(--text-base); color: var(--ns-bark); }

.ns-caption {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  opacity: .75;
}

/* ─────────────────────────────────────────
   8. COMPONENT — BUTTONS
───────────────────────────────────────── */
.ns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 14px 32px;
  border-radius: var(--radius-pill);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.ns-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.12);
  opacity: 0;
  transition: opacity var(--transition);
}
.ns-btn:hover::before { opacity: 1; }

/* Primary */
.ns-btn--primary {
  background: var(--ns-forest);
  color: var(--ns-cream);
  border-color: var(--ns-forest);
  box-shadow: 0 4px 20px rgba(30,74,13,.3);
}
.ns-btn--primary:hover {
  background: var(--ns-forest-mid);
  border-color: var(--ns-forest-mid);
  box-shadow: 0 6px 28px rgba(30,74,13,.45);
  transform: translateY(-1px);
  color: var(--ns-cream);
}

/* Secondary */
.ns-btn--secondary {
  background: transparent;
  color: var(--ns-forest);
  border-color: var(--ns-forest);
}
.ns-btn--secondary:hover {
  background: var(--ns-forest);
  color: var(--ns-cream);
}

/* Amber */
.ns-btn--amber {
  background: var(--ns-amber);
  color: #fff;
  border-color: var(--ns-amber);
  box-shadow: 0 4px 20px rgba(196,117,32,.35);
}
.ns-btn--amber:hover {
  background: var(--ns-amber-warm);
  border-color: var(--ns-amber-warm);
  transform: translateY(-1px);
  color: #fff;
}

/* Ghost on dark */
.ns-btn--ghost {
  background: rgba(253,250,244,.1);
  color: var(--ns-cream);
  border-color: rgba(253,250,244,.3);
  backdrop-filter: blur(8px);
}
.ns-btn--ghost:hover {
  background: rgba(253,250,244,.2);
  color: var(--ns-cream);
}

/* Sizes */
.ns-btn--lg {
  font-size: var(--text-md);
  padding: 18px 44px;
}
.ns-btn--sm {
  font-size: var(--text-sm);
  padding: 10px 22px;
}

/* ─────────────────────────────────────────
   9. COMPONENT — HEADER / NAV
   ID-selector geeft specificiteit (1,0,0) —
   wint van Hello Elementor zonder !important
───────────────────────────────────────── */

/* Wrapper */
#ns-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  height: 72px;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
#ns-header.scrolled {
  background: rgba(253,250,244,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 24px rgba(30,74,13,.10);
}
/* Bovenaan: transparant op alle pagina's (niet alleen home) */
#ns-header:not(.scrolled) { background: transparent; }

/* Inner flex */
#ns-header .ns-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  gap: 24px;
}

/* Logo */
#ns-header .ns-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
#ns-header .ns-logo__img {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: contain;
  border: 2px solid rgba(90,158,42,.3);
  display: block;
  transition: border-color .25s;
}
#ns-header .ns-logo:hover .ns-logo__img { border-color: var(--ns-leaf); }
#ns-header .ns-logo__text {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ns-forest);
  line-height: 1;
  white-space: nowrap;
}
#ns-header .ns-logo__text em { color: var(--ns-amber); font-style: normal; }
/* Transparante header: licht logo (leesbaar op donkere hero / secties) */
#ns-header:not(.scrolled) .ns-logo__text { color: var(--ns-cream); }

/* Desktop nav */
#ns-header .ns-nav {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;
}
#ns-header .ns-nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  margin: 0; padding: 0;
}
#ns-header .ns-nav li { position: relative; margin: 0; padding: 0; }
#ns-header .ns-nav a {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--ns-bark);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  position: relative;
  transition: color .25s;
  white-space: nowrap;
  background: none;
}
#ns-header .ns-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  border-radius: 2px;
  background: var(--ns-forest);
  transition: width .25s;
}
#ns-header .ns-nav a:hover,
#ns-header .ns-nav a.active { color: var(--ns-forest); }
#ns-header .ns-nav a:hover::after,
#ns-header .ns-nav a.active::after { width: 100%; }
/* Transparant: lichte links */
#ns-header:not(.scrolled) .ns-nav a { color: rgba(245,237,216,.92); }
#ns-header:not(.scrolled) .ns-nav a:hover,
#ns-header:not(.scrolled) .ns-nav a.active { color: #fff; }
#ns-header:not(.scrolled) .ns-nav a::after { background: var(--ns-leaf-light); }
/* Na scroll: weer donkere navigatie op witte balk */
#ns-header.scrolled .ns-nav a { color: var(--ns-bark); }
#ns-header.scrolled .ns-nav a:hover,
#ns-header.scrolled .ns-nav a.active { color: var(--ns-forest); }
#ns-header.scrolled .ns-nav a::after { background: var(--ns-forest); }
#ns-header.scrolled .ns-logo__text { color: var(--ns-forest); }

.ns-nav__chevron { width: 12px; height: 12px; transition: transform .2s; flex-shrink: 0; }
#ns-header .ns-nav li:hover .ns-nav__chevron { transform: rotate(180deg); }

/* Dropdown */
#ns-header .ns-nav .sub-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-radius: 16px;
  padding: 8px;
  min-width: 200px;
  list-style: none;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  z-index: 100;
  display: block;
}
#ns-header .ns-nav li:hover .sub-menu {
  opacity: 1; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
#ns-header .ns-nav .sub-menu li { border: none; }
#ns-header .ns-nav .sub-menu a {
  font-size: 13px; color: var(--ns-bark);
  padding: 10px 14px; border-radius: 10px; display: block;
}
#ns-header .ns-nav .sub-menu a::after { display: none; }
#ns-header .ns-nav .sub-menu a:hover { background: var(--ns-cream); color: var(--ns-forest); }

/* Rechts blok */
#ns-header .ns-header__right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}

/* Cart knop */
#ns-header .ns-cart-btn {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ns-cream);
  border: 1px solid var(--ns-cream-dark);
  color: var(--ns-forest);
  text-decoration: none;
  transition: all .25s;
  flex-shrink: 0;
}
#ns-header .ns-cart-btn:hover {
  background: var(--ns-forest); color: var(--ns-cream); transform: scale(1.06);
}
#ns-header:not(.scrolled) .ns-cart-btn {
  background: rgba(245,237,216,.12);
  border-color: rgba(245,237,216,.3);
  color: var(--ns-cream);
}
#ns-header.scrolled .ns-cart-btn {
  background: var(--ns-cream);
  border-color: var(--ns-cream-dark);
  color: var(--ns-forest);
}
#ns-header .ns-cart-btn svg { display: block; width: 20px; height: 20px; }
#ns-header .ns-cart-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 3px;
  border-radius: 9999px;
  background: var(--ns-amber); color: #fff;
  font-size: 10px; font-weight: 700; font-family: var(--font-body);
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--ns-white); line-height: 1;
}
#ns-header .ns-cart-count:empty { display: none; }

/* CTA knop */
#ns-header .ns-header-cta {
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600;
  color: var(--ns-cream);
  background: var(--ns-forest);
  border: 2px solid var(--ns-forest);
  border-radius: var(--radius-pill);
  padding: 10px 22px;
  text-decoration: none; white-space: nowrap;
  transition: background .25s;
  display: inline-flex; align-items: center; line-height: 1.2;
}
#ns-header .ns-header-cta:hover {
  background: var(--ns-forest-mid); border-color: var(--ns-forest-mid); color: var(--ns-cream);
}
#ns-header:not(.scrolled) .ns-header-cta {
  background: var(--ns-amber);
  border-color: var(--ns-amber);
  color: #fff;
}
#ns-header.scrolled .ns-header-cta {
  color: var(--ns-cream);
  background: var(--ns-forest);
  border-color: var(--ns-forest);
}
#ns-header.scrolled .ns-header-cta:hover {
  background: var(--ns-forest-mid);
  border-color: var(--ns-forest-mid);
  color: var(--ns-cream);
}

/* Hamburger */
#ns-hamburger {
  display: none;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px; width: 44px; height: 44px;
  background: var(--ns-cream);
  border: 1px solid var(--ns-cream-dark);
  border-radius: 50%;
  cursor: pointer;
  transition: background .25s, border-color .25s;
  flex-shrink: 0; padding: 0;
  appearance: none; -webkit-appearance: none;
}
#ns-hamburger span {
  display: block; width: 18px; height: 2px;
  background: var(--ns-forest); border-radius: 2px;
  transition: all .3s cubic-bezier(.4,0,.2,1);
  transform-origin: center;
}
#ns-hamburger:hover,
#ns-hamburger.is-open { background: var(--ns-forest); border-color: var(--ns-forest); }
#ns-hamburger:hover span,
#ns-hamburger.is-open span { background: var(--ns-cream); }
#ns-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#ns-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#ns-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
#ns-header:not(.scrolled) #ns-hamburger {
  background: rgba(245,237,216,.12); border-color: rgba(245,237,216,.3);
}
#ns-header:not(.scrolled) #ns-hamburger span { background: var(--ns-cream); }
#ns-header.scrolled #ns-hamburger {
  background: var(--ns-cream);
  border-color: var(--ns-cream-dark);
}
#ns-header.scrolled #ns-hamburger span { background: var(--ns-forest); }

/* Winkel / afrekenen: lichte achtergrond bovenaan — geen “hero”-tekst op wit */
body.woocommerce-cart #ns-header:not(.scrolled),
body.woocommerce-checkout #ns-header:not(.scrolled),
body.woocommerce-account #ns-header:not(.scrolled) {
  background: rgba(253,250,244,.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px rgba(30,74,13,.08);
}
body.woocommerce-cart #ns-header:not(.scrolled) .ns-logo__text,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-logo__text,
body.woocommerce-account #ns-header:not(.scrolled) .ns-logo__text { color: var(--ns-forest); }
body.woocommerce-cart #ns-header:not(.scrolled) .ns-nav a,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-nav a,
body.woocommerce-account #ns-header:not(.scrolled) .ns-nav a { color: var(--ns-bark); }
body.woocommerce-cart #ns-header:not(.scrolled) .ns-nav a:hover,
body.woocommerce-cart #ns-header:not(.scrolled) .ns-nav a.active,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-nav a:hover,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-nav a.active,
body.woocommerce-account #ns-header:not(.scrolled) .ns-nav a:hover,
body.woocommerce-account #ns-header:not(.scrolled) .ns-nav a.active { color: var(--ns-forest); }
body.woocommerce-cart #ns-header:not(.scrolled) .ns-nav a::after,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-nav a::after,
body.woocommerce-account #ns-header:not(.scrolled) .ns-nav a::after { background: var(--ns-forest); }
body.woocommerce-cart #ns-header:not(.scrolled) .ns-cart-btn,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-cart-btn,
body.woocommerce-account #ns-header:not(.scrolled) .ns-cart-btn {
  background: var(--ns-cream);
  border-color: var(--ns-cream-dark);
  color: var(--ns-forest);
}
body.woocommerce-cart #ns-header:not(.scrolled) .ns-header-cta,
body.woocommerce-checkout #ns-header:not(.scrolled) .ns-header-cta,
body.woocommerce-account #ns-header:not(.scrolled) .ns-header-cta {
  background: var(--ns-forest);
  border-color: var(--ns-forest);
  color: var(--ns-cream);
}
body.woocommerce-cart #ns-header:not(.scrolled) #ns-hamburger,
body.woocommerce-checkout #ns-header:not(.scrolled) #ns-hamburger,
body.woocommerce-account #ns-header:not(.scrolled) #ns-hamburger {
  background: var(--ns-cream);
  border-color: var(--ns-cream-dark);
}
body.woocommerce-cart #ns-header:not(.scrolled) #ns-hamburger span,
body.woocommerce-checkout #ns-header:not(.scrolled) #ns-hamburger span,
body.woocommerce-account #ns-header:not(.scrolled) #ns-hamburger span { background: var(--ns-forest); }

/* Mobile slide-in nav — standaard verborgen */
#ns-mobile-nav {
  display: none;
  position: fixed;
  top: 0; right: 0; bottom: 0; left: auto;
  width: min(340px, 90vw);
  background: var(--ns-white);
  z-index: 9998;
  padding: 88px 28px 40px;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 48px rgba(30,74,13,.18);
  transform: translateX(100%);
  transition: transform .38s cubic-bezier(.4,0,.2,1);
}
#ns-mobile-nav.is-open {
  display: flex;
  transform: translateX(0);
}
#ns-mobile-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
}
#ns-mobile-nav > nav > ul > li {
  border-bottom: 1px solid var(--ns-cream-dark); margin: 0; padding: 0;
}
#ns-mobile-nav a {
  display: block; padding: 16px 4px;
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  color: var(--ns-forest); text-decoration: none; transition: color .2s; background: none;
}
#ns-mobile-nav a:hover { color: var(--ns-amber); }
#ns-mobile-nav .sub-menu {
  background: var(--ns-cream); border-radius: 12px;
  padding: 6px 12px; margin-bottom: 8px;
  position: static; opacity: 1; transform: none;
  pointer-events: auto; box-shadow: none; border: none; display: block;
}
#ns-mobile-nav .sub-menu li { border: none; }
#ns-mobile-nav .sub-menu a {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  color: var(--ns-bark); padding: 10px 8px;
}
#ns-mobile-nav .ns-mobile-nav__btns {
  margin-top: auto; padding-top: 28px;
  display: flex; flex-direction: column; gap: 12px;
}
#ns-mobile-nav .ns-mobile-nav__btns a {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 24px; border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  text-decoration: none; border: 2px solid transparent;
  transition: all .25s; line-height: 1.2;
}
#ns-mobile-nav .btn-cart {
  background: transparent; border-color: var(--ns-forest); color: var(--ns-forest);
}
#ns-mobile-nav .btn-cart:hover { background: var(--ns-forest); color: var(--ns-cream); }
#ns-mobile-nav .btn-shop {
  background: var(--ns-amber); border-color: var(--ns-amber); color: #fff;
}
#ns-mobile-nav .btn-shop:hover { background: var(--ns-amber-warm); border-color: var(--ns-amber-warm); }

/* Backdrop */
#ns-backdrop {
  display: none; position: fixed; inset: 0;
  background: rgba(16,13,8,.5); backdrop-filter: blur(4px); z-index: 9997;
}
#ns-backdrop.is-open { display: block; }

/* Responsive breakpoints header */
@media (max-width: 1024px) { #ns-header .ns-header-cta { display: none; } }
@media (max-width: 768px)  { #ns-header .ns-nav { display: none; } #ns-hamburger { display: flex; } }
@media (max-width: 480px)  { #ns-header .ns-logo__text { font-size: 18px; } #ns-header .ns-header__inner { padding: 0 16px; } }

/* ─────────────────────────────────────────
   10. COMPONENT — HERO
───────────────────────────────────────── */
.ns-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px; /* header offset */
}

.ns-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.ns-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.ns-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, rgba(16,13,8,.72) 0%, rgba(30,74,13,.45) 50%, rgba(16,13,8,.15) 100%);
}

.ns-hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-11) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.ns-hero__content {}

.ns-hero__eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ns-leaf-light);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.ns-hero__eyebrow::after {
  content: '';
  width: 48px;
  height: 1px;
  background: var(--ns-leaf-light);
}

.ns-hero__title {
  font-family: var(--font-display);
  font-size: var(--text-hero);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -.025em;
  color: var(--ns-cream);
  margin-bottom: var(--space-5);
}

.ns-hero__title em {
  color: var(--ns-amber-warm);
  font-style: italic;
  display: block;
}

.ns-hero__sub {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.2vw, 26px);
  font-weight: 400;
  font-style: italic;
  color: var(--ns-leaf-light);
  margin-bottom: var(--space-4);
}

.ns-hero__lead {
  font-size: var(--text-md);
  line-height: 1.7;
  color: rgba(245,237,216,.8);
  max-width: 48ch;
  margin-bottom: var(--space-7);
}

.ns-hero__actions {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-7);
}

.ns-hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.ns-hero__trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: rgba(245,237,216,.7);
  font-weight: 500;
}

.ns-hero__trust-item svg,
.ns-hero__trust-item .icon {
  color: var(--ns-leaf-light);
  font-size: 16px;
}

.ns-hero__visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.ns-hero__product {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,.5)) drop-shadow(0 0 40px rgba(90,158,42,.3));
  animation: ns-float 6s ease-in-out infinite;
  max-width: 480px;
  width: 100%;
}

@keyframes ns-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.ns-hero__badges {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ns-hero__badges--right {
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
}

.ns-hero__badge {
  background: rgba(253,250,244,.92);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ns-forest);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  animation: ns-badge-in 0.6s ease both;
}

.ns-hero__badge:nth-child(1) { animation-delay: 0.8s; }
.ns-hero__badge:nth-child(2) { animation-delay: 1.0s; }
.ns-hero__badge:nth-child(3) { animation-delay: 1.2s; }

/* Hero product: groter, naar rechts/beneden laten doorlopen (geen “kader”) */
@media (min-width: 1025px) {
  .ns-hero__inner {
    padding-right: 0;
  }

  .ns-hero__visual {
    align-self: end;
    justify-content: flex-end;
    align-items: flex-end;
    /* Uitbreken tot viewport-rand als container gecentreerd is */
    margin-right: calc(-1 * max(0px, (100vw - min(100vw, var(--container))) / 2));
    margin-bottom: calc(-1 * var(--space-8));
    min-width: 0;
  }

  .ns-hero__product {
    max-width: none;
    width: min(900px, 56vw);
    height: auto;
    object-fit: contain;
    object-position: right bottom;
    /* iets minder “los” van de hoek */
    transform-origin: right bottom;
  }

  .ns-hero__badges--right {
    right: max(12px, 4vw);
    top: 42%;
  }
}

@keyframes ns-badge-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ─────────────────────────────────────────
   11. COMPONENT — USP BAR
───────────────────────────────────────── */
.ns-uspbar {
  background: var(--ns-forest);
  padding: var(--space-5) var(--gutter);
}

.ns-uspbar__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 5vw, 80px);
  flex-wrap: wrap;
}

.ns-uspbar__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--ns-cream);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
}

.ns-uspbar__icon {
  color: var(--ns-leaf-light);
  font-size: 18px;
  flex-shrink: 0;
}

.ns-uspbar__divider {
  width: 1px;
  height: 24px;
  background: rgba(245,237,216,.2);
  flex-shrink: 0;
}

/* ─────────────────────────────────────────
   12. COMPONENT — INGREDIENT CARD
───────────────────────────────────────── */
.ns-ingredient-card {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-lg);
  padding: 36px var(--space-6);
  text-align: center;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.ns-ingredient-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ns-leaf), var(--ns-amber));
  opacity: 0;
  transition: opacity var(--transition);
}

.ns-ingredient-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--ns-leaf);
}

.ns-ingredient-card:hover::before { opacity: 1; }

.ns-ingredient-card__icon {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--ns-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-size: 30px;
  border: 1px solid var(--ns-cream-dark);
  transition: border-color var(--transition), background var(--transition);
}

.ns-ingredient-card:hover .ns-ingredient-card__icon {
  background: rgba(90,158,42,.1);
  border-color: var(--ns-leaf);
}

.ns-ingredient-card__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: var(--space-2);
}

.ns-ingredient-card__latin {
  font-size: var(--text-xs);
  color: var(--ns-leaf);
  letter-spacing: .1em;
  font-style: italic;
  margin-bottom: var(--space-4);
  text-transform: uppercase;
}

.ns-ingredient-card__desc {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}

.ns-ingredient-card__tag {
  display: inline-block;
  background: var(--ns-cream);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ns-forest);
  letter-spacing: .05em;
}

/* ─────────────────────────────────────────
   13. COMPONENT — BENEFIT ROW
───────────────────────────────────────── */
.ns-benefit-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

.ns-benefit-row--reverse .ns-benefit-row__visual {
  order: 2;
}
.ns-benefit-row--reverse .ns-benefit-row__content {
  order: 1;
}

.ns-benefit-row__visual {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ns-benefit-row__visual--portrait {
  aspect-ratio: 2 / 3;
  max-height: min(92vh, 820px);
}

.ns-benefit-row__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

.ns-benefit-row__visual--portrait img {
  object-position: 48% 22%;
}

@media (max-width: 1024px) {
  .ns-benefit-row__visual--portrait img {
    object-position: center 28%;
  }
}

.ns-benefit-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin-top: var(--space-6);
}

.ns-benefit-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.ns-benefit-item__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(90,158,42,.1);
  border: 1px solid rgba(90,158,42,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: var(--ns-leaf);
}

.ns-benefit-item__text strong {
  display: block;
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}

.ns-benefit-item__text span {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  line-height: 1.6;
}

/* ─────────────────────────────────────────
   14. COMPONENT — PRODUCT CARD / SHOP
───────────────────────────────────────── */
.ns-product-card {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all var(--transition);
}

.ns-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
  border-color: var(--ns-leaf);
}

.ns-product-card__img {
  position: relative;
  background: var(--ns-cream);
  padding: var(--space-6);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 280px;
}

.ns-product-card__img img {
  max-height: 240px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(var(--shadow-md));
  transition: transform var(--transition-slow);
}

.ns-product-card:hover .ns-product-card__img img {
  transform: scale(1.04);
}

.ns-product-card__badge {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  background: var(--ns-forest);
  color: var(--ns-cream);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
}

.ns-product-card__badge--amber {
  background: var(--ns-amber);
}

.ns-product-card__body {
  padding: var(--space-6);
}

.ns-product-card__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: var(--space-2);
}

.ns-product-card__desc {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  line-height: 1.65;
  margin-bottom: var(--space-5);
}

.ns-product-card__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}

.ns-pill {
  background: var(--ns-cream);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-pill);
  padding: 4px 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ns-forest);
  letter-spacing: .04em;
}

.ns-pill--leaf {
  background: rgba(90,158,42,.08);
  border-color: rgba(90,158,42,.2);
  color: var(--ns-leaf);
}

.ns-product-card__price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
}

.ns-price {
  font-family: var(--font-display);
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  color: var(--ns-forest);
  line-height: 1;
}

.ns-price__sub {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--ns-bark);
  font-family: var(--font-body);
}

.ns-price--original {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ns-bark);
  text-decoration: line-through;
}

.ns-price--savings {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--ns-leaf);
}

.ns-stars {
  color: var(--ns-amber);
  font-size: 14px;
  letter-spacing: .05em;
}

.ns-stars__count {
  font-size: var(--text-xs);
  color: var(--ns-bark);
  margin-left: var(--space-1);
  font-weight: 500;
}

/* ─────────────────────────────────────────
   15. COMPONENT — TESTIMONIALS
───────────────────────────────────────── */
.ns-testimonial {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-lg);
  border-left: 3px solid var(--ns-forest);
  padding: var(--space-6);
  position: relative;
  transition: all var(--transition);
}

.ns-testimonial:hover {
  border-left-color: var(--ns-amber);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ns-testimonial::before {
  content: '"';
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  color: var(--ns-cream-dark);
  font-weight: 800;
}

.ns-testimonial__stars {
  color: var(--ns-amber);
  font-size: 16px;
  margin-bottom: var(--space-4);
  letter-spacing: .1em;
}

.ns-testimonial__text {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ns-black);
  margin-bottom: var(--space-5);
  font-style: italic;
  position: relative;
  z-index: 1;
}

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

.ns-testimonial__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--ns-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  overflow: hidden;
}

.ns-testimonial__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ns-testimonial__name {
  font-weight: 700;
  color: var(--ns-forest);
  font-size: var(--text-sm);
}

.ns-testimonial__role {
  font-size: var(--text-xs);
  color: var(--ns-bark);
}

/* ─────────────────────────────────────────
   16. COMPONENT — HOW IT WORKS / STEPS
───────────────────────────────────────── */
.ns-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  position: relative;
}

.ns-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: calc(16.66% + 20px);
  right: calc(16.66% + 20px);
  height: 1px;
  background: linear-gradient(90deg, var(--ns-leaf), var(--ns-amber), var(--ns-leaf));
  z-index: 0;
}

.ns-step {
  text-align: center;
  position: relative;
  z-index: 1;
}

.ns-step__number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ns-white);
  border: 2px solid var(--ns-forest);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-4);
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ns-forest);
  transition: all var(--transition);
}

.ns-step:hover .ns-step__number {
  background: var(--ns-forest);
  color: var(--ns-cream);
}

.ns-step__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: var(--space-3);
}

.ns-step__desc {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  line-height: 1.7;
  max-width: 26ch;
  margin: 0 auto;
}

/* ─────────────────────────────────────────
   17. COMPONENT — CTA BLOCK
───────────────────────────────────────── */
.ns-cta-block {
  background: var(--ns-forest);
  border-radius: var(--radius-xl);
  padding: clamp(48px, 7vw, 96px) var(--gutter);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.ns-cta-block::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 80% at 20% 50%, rgba(90,158,42,.20) 0%, transparent 60%),
    radial-gradient(ellipse 50% 70% at 80% 30%, rgba(196,117,32,.15) 0%, transparent 60%);
  pointer-events: none;
}

.ns-cta-block__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}

.ns-cta-block__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--ns-cream);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

.ns-cta-block__title em {
  color: var(--ns-amber-warm);
  font-style: italic;
}

.ns-cta-block__lead {
  font-size: var(--text-md);
  color: rgba(245,237,216,.75);
  line-height: 1.7;
  margin-bottom: var(--space-7);
}

.ns-cta-block__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.ns-cta-block__guarantee {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: rgba(245,237,216,.65);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  letter-spacing: .02em;
}

/* ─────────────────────────────────────────
   18. COMPONENT — TRUST BADGES
───────────────────────────────────────── */
.ns-trust-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-5) var(--space-8);
}

.ns-trust-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.ns-trust-item__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(90,158,42,.08);
  border: 1px solid rgba(90,158,42,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--ns-leaf);
}

.ns-trust-item__label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ns-forest);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.ns-trust-item__sub {
  font-size: 11px;
  color: var(--ns-bark);
}

/* ─────────────────────────────────────────
   19. COMPONENT — STATS / NUMBERS
───────────────────────────────────────── */
.ns-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
}

.ns-stat {
  text-align: center;
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(245,237,216,.1);
}

.ns-stat__number {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 50px);
  font-weight: 800;
  color: var(--ns-amber-warm);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.ns-stat__label {
  font-size: var(--text-xs);
  color: rgba(245,237,216,.65);
  font-weight: 500;
  line-height: 1.4;
}

/* ─────────────────────────────────────────
   20. COMPONENT — FAQ ACCORDION
───────────────────────────────────────── */
.ns-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: min(800px, 100%);
  width: 100%;
  margin: 0 auto;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.ns-accordion__item {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
}

.ns-accordion__item.open {
  border-color: var(--ns-leaf);
}

.ns-accordion__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
  padding: var(--space-5) var(--space-6);
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}
.ns-accordion__trigger:focus {
  outline: none;
  box-shadow: none;
  background: none;
}
.ns-accordion__trigger:focus-visible {
  outline: 2px solid var(--ns-leaf);
  outline-offset: -2px;
}

.ns-accordion__question {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ns-forest);
  line-height: 1.4;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.ns-accordion__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ns-cream);
  border: 1px solid var(--ns-border);
  color: var(--ns-forest);
  font-size: 16px;
  transition: all var(--transition);
}

.ns-accordion__item.open .ns-accordion__chevron {
  background: var(--ns-forest);
  color: var(--ns-cream);
  transform: rotate(180deg);
}

.ns-accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.ns-accordion__item.open .ns-accordion__body {
  max-height: 400px;
}

.ns-accordion__answer {
  padding: 0 var(--space-6) var(--space-5);
  font-size: var(--text-base);
  color: var(--ns-bark);
  line-height: 1.7;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
}

.ns-accordion__trigger:hover {
  background: rgba(245, 237, 216, 0.45);
}

.ns-accordion__trigger:hover .ns-accordion__question {
  color: var(--ns-forest-mid);
}

.ns-accordion__trigger:hover .ns-accordion__chevron {
  background: var(--ns-cream-dark);
  border-color: var(--ns-leaf-light);
}

/* ─────────────────────────────────────────
   20b. ELEMENTOR — ACCORDION / FAQ (klassiek + nested)
   Overrides globale Elementor-kleuren (hover/active) met NeuroShroom-tokens.
───────────────────────────────────────── */

/* Klassieke Accordion-widget */
.elementor-widget-accordion .elementor-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.elementor-widget-accordion .elementor-accordion-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--ns-border) !important;
  overflow: hidden;
  background: var(--ns-white);
  transition: border-color var(--transition), box-shadow var(--transition);
}

.elementor-widget-accordion .elementor-accordion-item:hover {
  border-color: var(--ns-cream-dark) !important;
}

.elementor-widget-accordion .elementor-tab-title {
  padding: var(--space-5) var(--space-6) !important;
  transition: background-color var(--transition), color var(--transition);
}

.elementor-widget-accordion .elementor-accordion-item:hover .elementor-tab-title:not(.elementor-active) {
  background-color: var(--ns-cream) !important;
}

.elementor-widget-accordion .elementor-tab-title .elementor-accordion-title,
.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon {
  color: var(--ns-forest) !important;
}

.elementor-widget-accordion .elementor-tab-title .elementor-accordion-icon svg {
  fill: var(--ns-forest) !important;
}

.elementor-widget-accordion .elementor-accordion-item:hover .elementor-tab-title:not(.elementor-active) .elementor-accordion-title,
.elementor-widget-accordion .elementor-accordion-item:hover .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon,
.elementor-widget-accordion .elementor-accordion-item:hover .elementor-tab-title:not(.elementor-active) .elementor-accordion-icon svg {
  color: var(--ns-forest-mid) !important;
  fill: var(--ns-forest-mid) !important;
}

.elementor-widget-accordion .elementor-tab-title.elementor-active {
  background-color: var(--ns-white) !important;
  border-block-end-color: var(--ns-border) !important;
}

.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-title,
.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon {
  color: var(--ns-forest) !important;
}

.elementor-widget-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon svg {
  fill: var(--ns-forest) !important;
}

.elementor-widget-accordion .elementor-tab-content {
  padding: 0 var(--space-6) var(--space-5) !important;
  color: var(--ns-bark) !important;
  border-block-start: 1px solid var(--ns-border) !important;
}

/* Toggle-widget (zelfde titelstructuur als accordion) */
.elementor-widget-toggle .elementor-toggle-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--ns-border) !important;
  overflow: hidden;
  margin-bottom: var(--space-3);
  background: var(--ns-white);
}

.elementor-widget-toggle .elementor-tab-title {
  padding: var(--space-5) var(--space-6) !important;
  transition: background-color var(--transition), color var(--transition);
}

.elementor-widget-toggle .elementor-toggle-item:hover .elementor-tab-title:not(.elementor-active) {
  background-color: var(--ns-cream) !important;
}

.elementor-widget-toggle .elementor-tab-title .elementor-toggle-icon,
.elementor-widget-toggle .elementor-tab-title .elementor-toggle-title,
.elementor-widget-toggle .elementor-tab-title a.elementor-toggle-title {
  color: var(--ns-forest) !important;
}

.elementor-widget-toggle .elementor-tab-title .elementor-toggle-icon svg {
  fill: var(--ns-forest) !important;
}

.elementor-widget-toggle .elementor-toggle-item:hover .elementor-tab-title:not(.elementor-active) a.elementor-toggle-title {
  color: var(--ns-forest-mid) !important;
}

.elementor-widget-toggle .elementor-tab-title.elementor-active a,
.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon {
  color: var(--ns-forest) !important;
}

.elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon svg {
  fill: var(--ns-forest) !important;
}

/* Nested Accordion (details/summary) — Elementor gebruikt --n-accordion-title-icon-order; grid voorkomt afgesneden tekst + icon altijd rechts */
.elementor-widget-n-accordion {
  --n-accordion-title-icon-order: initial !important;
  /* Vermindert kans dat Site Kit / Elementor accent (roze) als achtergrond op summary landt */
  --e-global-color-accent: var(--ns-cream-dark) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}
.elementor-widget-n-accordion .e-n-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 100%;
  min-width: 0;
}
.elementor-widget-n-accordion .e-n-accordion-item {
  border-radius: var(--radius-md);
  border: 1px solid var(--ns-border);
  overflow: hidden;
  background: var(--ns-white);
  max-width: 100%;
  min-width: 0;
}
.elementor-widget-n-accordion .e-n-accordion-item-title {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal !important;
  flex-wrap: unset !important;
  color: var(--ns-forest);
  background-color: var(--ns-white) !important;
  background-image: none !important;
}
.elementor-widget-n-accordion .e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}
/* Tekstblok altijd kolom 1, breedte krimpen zodat woorden breken */
.elementor-widget-n-accordion .e-n-accordion-item-title-header {
  grid-column: 1;
  min-width: 0 !important;
  max-width: 100%;
}
.elementor-widget-n-accordion .e-n-accordion-item-title-text {
  color: inherit !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-wrap: break-word !important;
  word-break: break-word !important;
  hyphens: auto;
}
.elementor-widget-n-accordion .e-n-accordion-item-title > .e-n-accordion-item-title-text {
  grid-column: 1;
  min-width: 0 !important;
}
/* Icoon / SVG altijd kolom 2 (niet links door order:-1) */
.elementor-widget-n-accordion .e-n-accordion-item-title > :not(.e-n-accordion-item-title-header):not(.e-n-accordion-item-title-text) {
  grid-column: 2;
  justify-self: end;
  align-self: start;
  flex-shrink: 0;
}
.elementor-widget-n-accordion .e-n-accordion-item-title svg {
  fill: currentColor !important;
  color: var(--ns-forest);
}
.elementor-widget-n-accordion .e-n-accordion-item:hover > .e-n-accordion-item-title,
.elementor-widget-n-accordion .e-n-accordion-item:focus-within > .e-n-accordion-item-title {
  background-color: var(--ns-cream) !important;
  background-image: none !important;
  color: var(--ns-forest) !important;
}
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
  background-color: var(--ns-white) !important;
  background-image: none !important;
  color: var(--ns-forest) !important;
  border-bottom: 1px solid var(--ns-border);
}
.elementor-widget-n-accordion .e-n-accordion-item[open]:hover > .e-n-accordion-item-title {
  background-color: var(--ns-cream) !important;
  background-image: none !important;
}

/* ── Elementor FAQ: focus / “focus blijft” na klik — geen theme accent (roze) ──
   Klik op summary/tab geeft :focus; :focus-within blijft tot ergens anders geklikt wordt.
   Hello/Elementor zet vaak global accent op :focus → overschrijven met merkkleuren. */
.elementor-widget-accordion .elementor-tab-title:focus,
.elementor-widget-accordion .elementor-tab-title:focus-visible,
.elementor-widget-accordion .elementor-tab-title:focus:not(:hover) {
  background-color: var(--ns-cream) !important;
  background-image: none !important;
  outline: none !important;
  box-shadow: none !important;
}
.elementor-widget-accordion .elementor-tab-title.elementor-active:focus,
.elementor-widget-accordion .elementor-tab-title.elementor-active:focus-visible {
  background-color: var(--ns-white) !important;
}
.elementor-widget-accordion .elementor-tab-title:focus .elementor-accordion-title,
.elementor-widget-accordion .elementor-tab-title:focus .elementor-accordion-icon,
.elementor-widget-accordion .elementor-tab-title:focus .elementor-accordion-icon svg {
  color: var(--ns-forest) !important;
  fill: var(--ns-forest) !important;
}

.elementor-widget-n-accordion .e-n-accordion-item-title:focus,
.elementor-widget-n-accordion .e-n-accordion-item-title:focus-visible,
.elementor-widget-n-accordion .e-n-accordion-item-title:active {
  background-color: var(--ns-cream) !important;
  background-image: none !important;
  color: var(--ns-forest) !important;
  outline: 2px solid transparent !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title:focus,
.elementor-widget-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title:focus-visible {
  background-color: var(--ns-white) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--ns-border);
}

/* Klassieke accordion: breedte + wrap (nested gebruikt grid hierboven) */
.elementor-widget-accordion {
  max-width: 100%;
  min-width: 0;
}
.elementor-widget-accordion .elementor-accordion {
  max-width: 100%;
  min-width: 0;
}
.elementor-widget-accordion .elementor-tab-title {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  white-space: normal !important;
  flex-wrap: wrap;
}
.elementor-widget-accordion .elementor-accordion-title {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
  min-width: 0;
  max-width: 100%;
}
.elementor-widget-accordion .elementor-tab-content,
.elementor-widget-n-accordion .e-n-accordion-item-content {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-wrap: anywhere;
  word-wrap: break-word;
  word-break: break-word;
}

@media (max-width: 768px) {
  .elementor-widget-n-accordion .elementor-widget-container {
    padding-left: var(--gutter) !important;
    padding-right: var(--gutter) !important;
    box-sizing: border-box;
    max-width: 100vw;
  }
  .elementor-widget-accordion .elementor-tab-title,
  .elementor-widget-n-accordion .e-n-accordion-item-title {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }
  .elementor-widget-accordion .elementor-tab-content,
  .elementor-widget-n-accordion .e-n-accordion-item-content {
    padding-left: var(--space-4) !important;
    padding-right: var(--space-4) !important;
  }
  .ns-accordion__trigger {
    padding: var(--space-4) var(--space-4);
  }
  .ns-accordion__answer {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ─────────────────────────────────────────
   21. COMPONENT — FOOTER
───────────────────────────────────────── */
.ns-footer {
  background: var(--ns-soil);
  color: var(--ns-cream);
  padding-top: var(--space-10);
}

/* WC-pagina’s: footer staat vaak in een smalle content-/Elementor-wrapper — achtergrond wél over volle viewportbreedte */
body.woocommerce-page .ns-footer {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

.ns-footer__main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-8);
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: var(--space-8);
}

.ns-footer__brand {}

.ns-footer__logo {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 800;
  color: var(--ns-cream);
  margin-bottom: var(--space-4);
  display: block;
}
.ns-footer__logo span { color: var(--ns-amber-warm); }

.ns-footer__tagline {
  font-size: var(--text-sm);
  color: rgba(245,237,216,.6);
  line-height: 1.7;
  margin-bottom: var(--space-5);
  max-width: 30ch;
}

.ns-footer__social {
  display: flex;
  gap: var(--space-3);
}

.ns-footer__social-link {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: rgba(245,237,216,.08);
  border: 1px solid rgba(245,237,216,.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(245,237,216,.7);
  transition: all var(--transition);
  text-decoration: none;
}
.ns-footer__social-link:hover {
  background: var(--ns-leaf);
  border-color: var(--ns-leaf);
  color: var(--ns-cream);
}

.ns-footer__social-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.ns-footer__col-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ns-leaf-light);
  margin-bottom: var(--space-5);
}

.ns-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ns-footer__links li {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* wp_nav_menu: zelfde wit + spacing als handmatige links (theme overschrijft vaak .menu a) */
.ns-footer .ns-footer__links a,
.ns-footer ul.ns-footer__links a {
  font-size: var(--text-sm);
  color: rgba(245,237,216,.92) !important;
  text-decoration: none;
  transition: color var(--transition);
  display: inline-block;
}
.ns-footer .ns-footer__links a:hover,
.ns-footer ul.ns-footer__links a:hover {
  color: var(--ns-cream) !important;
}
.ns-footer__link {
  font-size: var(--text-sm);
  color: rgba(245,237,216,.92);
  text-decoration: none;
  transition: color var(--transition);
}
.ns-footer__link:hover { color: var(--ns-cream); }

.ns-footer__bottom {
  border-top: 1px solid rgba(245,237,216,.08);
  padding: var(--space-5) var(--gutter);
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ns-footer__copy {
  font-size: var(--text-xs);
  color: rgba(245,237,216,.4);
}

.ns-footer__legal {
  display: flex;
  gap: var(--space-5);
}

.ns-footer__legal a {
  font-size: var(--text-xs);
  color: rgba(245,237,216,.4);
  text-decoration: none;
  transition: color var(--transition);
}
.ns-footer__legal a:hover { color: rgba(245,237,216,.8); }

/* ─────────────────────────────────────────
   22. COMPONENT — DIVIDERS
───────────────────────────────────────── */
.ns-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ns-cream-dark), transparent);
}

.ns-divider--forest {
  background: linear-gradient(90deg, transparent, rgba(90,158,42,.3), transparent);
}

/* ─────────────────────────────────────────
   23. COMPONENT — WOOCOMMERCE OVERRIDES
───────────────────────────────────────── */
.woocommerce .button,
.woocommerce button.button {
  background: var(--ns-forest) !important;
  color: var(--ns-cream) !important;
  border-radius: var(--radius-pill) !important;
  font-family: var(--font-body) !important;
  font-weight: 600 !important;
  padding: 14px 32px !important;
  border: none !important;
  transition: all var(--transition) !important;
}

.woocommerce .button:hover,
.woocommerce button.button:hover {
  background: var(--ns-forest-mid) !important;
  color: var(--ns-cream) !important;
}

.woocommerce .button.alt,
.woocommerce button.button.alt {
  background: var(--ns-amber) !important;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  font-family: var(--font-body);
  color: var(--ns-bark);
  font-weight: 600;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  color: var(--ns-forest);
}

.woocommerce-message,
.woocommerce-info {
  border-top-color: var(--ns-forest) !important;
}

/* ─────────────────────────────────────────
   24. UTILITIES
───────────────────────────────────────── */
.ns-text-center { text-align: center; }
.ns-text-left   { text-align: left; }
.ns-mt-2  { margin-top: var(--space-2); }
.ns-mt-4  { margin-top: var(--space-4); }
.ns-mt-6  { margin-top: var(--space-6); }
.ns-mt-8  { margin-top: var(--space-8); }
.ns-mb-2  { margin-bottom: var(--space-2); }
.ns-mb-4  { margin-bottom: var(--space-4); }
.ns-mb-6  { margin-bottom: var(--space-6); }
.ns-mb-8  { margin-bottom: var(--space-8); }

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

/* ─────────────────────────────────────────
   25. ANIMATIES
───────────────────────────────────────── */
@keyframes ns-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes ns-scale-in {
  from { opacity: 0; transform: scale(.95); }
  to   { opacity: 1; transform: scale(1); }
}

.ns-animate-fade-up {
  animation: ns-fade-up 0.6s ease both;
}

.ns-animate-fade-in {
  animation: ns-fade-in 0.6s ease both;
}

.ns-delay-1 { animation-delay: 0.1s; }
.ns-delay-2 { animation-delay: 0.2s; }
.ns-delay-3 { animation-delay: 0.3s; }
.ns-delay-4 { animation-delay: 0.4s; }
.ns-delay-5 { animation-delay: 0.5s; }

/* ─────────────────────────────────────────
   26. RESPONSIVE
───────────────────────────────────────── */
@media (max-width: 1024px) {
  .ns-grid--4    { grid-template-columns: repeat(2, 1fr); }
  .ns-hero__inner { grid-template-columns: 1fr; gap: var(--space-6); }
  .ns-hero__visual { display: none; }
  .ns-footer__main { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .ns-benefit-row { grid-template-columns: 1fr; gap: var(--space-6); }
  .ns-benefit-row--reverse .ns-benefit-row__visual,
  .ns-benefit-row--reverse .ns-benefit-row__content { order: unset; }
  .ns-stats { grid-template-columns: repeat(2, 1fr); }
  .ns-steps::before { display: none; }
}

@media (max-width: 768px) {
  :root {
    --gutter: 20px;
    --section-py: 60px;
  }

  .ns-grid--2,
  .ns-grid--3    { grid-template-columns: 1fr; }
  .ns-nav        { display: none; }
  .ns-nav.open   { display: flex; flex-direction: column; position: fixed; inset: 72px 0 0; background: var(--ns-white); padding: var(--space-7) var(--gutter); gap: var(--space-5); z-index: 99; }
  .ns-nav-toggle { display: flex; }
  .ns-header__cta { display: none; }
  .ns-steps      { grid-template-columns: 1fr; }
  .ns-footer__main { grid-template-columns: 1fr; }
  .ns-stats      { grid-template-columns: 1fr 1fr; }
  .ns-uspbar__divider { display: none; }
  .ns-hero__actions { flex-direction: column; align-items: flex-start; }
  .ns-cta-block__actions { flex-direction: column; align-items: center; }
  .ns-footer__bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .ns-stats { grid-template-columns: 1fr; }
  .ns-grid--4 { grid-template-columns: 1fr; }
  .ns-btn--lg { padding: 15px 28px; font-size: var(--text-base); }
}

/* ─────────────────────────────────────────
   27. PRINT
───────────────────────────────────────── */


/* ═══════════════════════════════════════════════
   WOOCOMMERCE — SHOP PAGINA
   archive-product.php
═══════════════════════════════════════════════ */

/* ── Shop hero (achtergrondfoto + overlay — archive shop) ── */
.ns-shop-hero {
  position: relative;
  padding: 120px var(--gutter) 72px;
  padding-top: max(120px, calc(72px + var(--space-9)));
  overflow: hidden;
  text-align: center;
  background: var(--ns-forest);
}

.ns-shop-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ns-shop-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 48%;
}

.ns-shop-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(16, 13, 8, 0.88) 0%, rgba(30, 74, 13, 0.62) 48%, rgba(16, 13, 8, 0.45) 100%),
    radial-gradient(ellipse 90% 80% at 75% 40%, rgba(196, 117, 32, 0.14) 0%, transparent 55%);
}

@media (max-width: 768px) {
  .ns-shop-hero__bg img {
    object-position: center 42%;
  }
}

.ns-shop-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin-inline: auto;
}

.ns-shop-hero__eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ns-leaf-light);
  margin-bottom: 20px;
}

.ns-shop-hero__title {
  font-family: var(--font-display);
  font-size: clamp(42px, 6vw, 72px);
  font-weight: 800;
  line-height: 1.05;
  color: var(--ns-cream);
  margin-bottom: 16px;
  letter-spacing: -.02em;
}
.ns-shop-hero__title em { color: var(--ns-amber); font-style: italic; }

.ns-shop-hero__sub {
  font-size: 15px;
  color: var(--ns-leaf-light);
  margin-bottom: 28px;
  line-height: 1.6;
}

.ns-shop-hero__trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 500;
}

.ns-shop-hero__trust span {
  color: var(--ns-cream);
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

.ns-shop-hero__trust-sep {
  display: none; /* not needed with pill design */
}

/* ── Social proof bar (nieuw) ──────────────────── */
.ns-shop-proof {
  background: var(--ns-cream);
  border-bottom: 1px solid var(--ns-cream-dark);
  padding: 14px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.ns-shop-proof__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ns-soil);
}

.ns-shop-proof__num {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--ns-forest);
  line-height: 1;
}

.ns-shop-proof__stars {
  color: var(--ns-amber);
  font-size: 14px;
  letter-spacing: -1px;
}

.ns-shop-proof__sep {
  width: 1px;
  height: 28px;
  background: var(--ns-cream-dark);
  flex-shrink: 0;
}

.ns-shop-proof__live {
  color: var(--ns-amber);
  font-weight: 600;
  font-size: 13px;
}

/* ── Toolbar ────────────────────────────────── */
.ns-shop-toolbar {
  border-bottom: 1px solid var(--ns-cream-dark);
  border-top: 1px solid var(--ns-cream-dark);
  padding: 14px var(--gutter);
  position: sticky;
  top: 72px;
  z-index: 50;
  backdrop-filter: blur(8px);
  background: rgba(253,250,244,.92);
}

.ns-shop-toolbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.ns-shop-toolbar__count {
  font-size: 13px;
  color: var(--ns-bark);
  margin: 0;
}
.ns-shop-toolbar__count strong {
  color: var(--ns-forest);
  font-weight: 700;
}

.ns-shop-toolbar__right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* WooCommerce ordering select override */
.ns-shop-toolbar .woocommerce-ordering {
  margin: 0;
  padding: 0;
}
.ns-shop-toolbar .woocommerce-ordering select,
.woocommerce-ordering select {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--ns-forest);
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-md);
  padding: 8px 36px 8px 14px;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='2 4 6 8 10 4' stroke='%237A5230' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
  transition: border-color .2s;
}
.woocommerce-ordering select:focus {
  outline: none;
  border-color: var(--ns-forest);
}

/* ── Product grid ────────────────────────────── */
.ns-shop-grid-section {
  padding: 56px 0 80px;
}

/* Shop: producten in vaste kolommen van links naar rechts (geen Elementor-centrering) */
.ns-shop-grid-section .woocommerce ul.products,
.ns-shop-grid-section ul.products,
#ns-shop-main .woocommerce ul.products,
#ns-shop-main ul.products {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-flow: row !important;
  justify-content: start !important;
  justify-items: stretch !important;
  align-items: start !important;
  direction: ltr !important;
  gap: 28px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* ── Product card ─────────────────────────────── */
.ns-pcard {
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ns-pcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 56px rgba(30,74,13,.13);
  border-color: rgba(90,158,42,.35);
}

/* Bestseller: amber border accent */
.ns-pcard--featured {
  border-color: var(--ns-amber);
  border-width: 2px;
}

/* Afbeelding */
.ns-pcard__img-wrap {
  position: relative;
  display: block;
  background: var(--ns-cream);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}

.ns-pcard__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
  transition: transform .5s ease;
  display: block;
}
.ns-pcard:hover .ns-pcard__img { transform: scale(1.05); }

/* Overlay */
.ns-pcard__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,74,13,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s ease;
}
.ns-pcard:hover .ns-pcard__overlay { opacity: 1; }

.ns-pcard__overlay-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ns-cream);
  border: 2px solid rgba(245,237,216,.6);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  backdrop-filter: blur(4px);
}

/* Badges */
.ns-pcard__badges {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.ns-pcard__badge {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  line-height: 1;
}
.ns-pcard__badge--featured {
  background: var(--ns-forest);
  color: var(--ns-cream);
}
.ns-pcard__badge--sale {
  background: var(--ns-amber);
  color: #fff;
}
.ns-pcard__badge--new {
  background: var(--ns-leaf);
  color: #fff;
}

/* Body */
.ns-pcard__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 8px;
}

/* Tags */
.ns-pcard__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ns-pcard__tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ns-leaf);
  background: rgba(90,158,42,.08);
  border: 1px solid rgba(90,158,42,.2);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}

/* Naam */
.ns-pcard__name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.ns-pcard__name a {
  color: var(--ns-forest);
  text-decoration: none;
  transition: color .2s;
}
.ns-pcard__name a:hover { color: var(--ns-amber); }

/* Korte beschrijving */
.ns-pcard__desc {
  font-size: 13px;
  color: var(--ns-bark);
  line-height: 1.65;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Sterren */
.ns-pcard__stars {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 2px 0;
}
.ns-star { font-size: 13px; line-height: 1; }
.ns-star--full  { color: var(--ns-amber); }
.ns-star--empty { color: var(--ns-cream-dark); }
.ns-pcard__review-count {
  font-size: 11px;
  color: var(--ns-bark);
  margin-left: 4px;
  font-weight: 500;
}

/* Footer: prijs + knop */
.ns-pcard__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--ns-cream-dark);
}

.ns-pcard__price {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--ns-forest);
  line-height: 1;
}

/* WC price ins/del */
.ns-pcard__price ins {
  text-decoration: none;
  color: var(--ns-forest);
}
.ns-pcard__price del {
  font-size: 14px;
  color: var(--ns-bark);
  font-weight: 400;
  opacity: .6;
}

/* Knop */
.ns-pcard__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  color: var(--ns-cream);
  background: var(--ns-forest);
  border: none;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .25s, transform .2s;
  flex-shrink: 0;
}
.ns-pcard__btn:hover {
  background: var(--ns-forest-mid);
  color: var(--ns-cream);
  transform: translateX(2px);
}
.ns-pcard__btn.loading {
  opacity: .7;
  pointer-events: none;
}
.ns-pcard__btn.added {
  background: var(--ns-leaf);
}

/* ── Paginering ─────────────────────────────── */
.ns-shop-pagination {
  margin-top: 56px;
  display: flex;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul,
.woocommerce-pagination ul {
  display: flex !important;
  gap: 8px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ns-bark) !important;
  background: var(--ns-white) !important;
  border: 1px solid var(--ns-cream-dark) !important;
  text-decoration: none !important;
  transition: all .22s !important;
}
.woocommerce-pagination ul li a:hover {
  background: var(--ns-forest) !important;
  color: var(--ns-cream) !important;
  border-color: var(--ns-forest) !important;
}
.woocommerce-pagination ul li span.current {
  background: var(--ns-forest) !important;
  color: var(--ns-cream) !important;
  border-color: var(--ns-forest) !important;
}

/* ── Leeg state ─────────────────────────────── */
.ns-shop-empty {
  text-align: center;
  padding: 80px var(--gutter);
  max-width: 480px;
  margin: 0 auto;
}
.ns-shop-empty__icon {
  font-size: 72px;
  margin-bottom: 24px;
  line-height: 1;
}
.ns-shop-empty__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: 12px;
}
.ns-shop-empty__text {
  font-size: 15px;
  color: var(--ns-bark);
  line-height: 1.7;
  margin-bottom: 28px;
}

/* ── Benefits strip (nieuw — donkere balk) ───── */
.ns-shop-benefits {
  background: var(--ns-forest);
  padding: 40px var(--gutter);
}
.ns-shop-benefits__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--container);
  margin: 0 auto;
}
.ns-shop-benefits__item {
  padding: 0 24px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.ns-shop-benefits__item:last-child { border-right: none; }
.ns-shop-benefits__icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}
.ns-shop-benefits__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ns-cream);
  margin: 0 0 4px;
}
.ns-shop-benefits__sub {
  font-size: 12px;
  color: var(--ns-leaf-light);
  margin: 0;
}

/* ── Educatie strip (nieuw) ───────────────────── */
.ns-shop-edu {
  background: var(--ns-cream);
  padding: clamp(48px, 7vw, 80px) var(--gutter);
}
.ns-shop-edu__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  max-width: var(--container);
  margin: 0 auto;
}
.ns-shop-edu__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ns-leaf);
  margin: 0 0 12px;
}
.ns-shop-edu__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 700;
  color: var(--ns-forest);
  margin: 0 0 14px;
  line-height: 1.2;
  letter-spacing: -.01em;
}
.ns-shop-edu__text {
  font-size: 14px;
  color: var(--ns-bark);
  line-height: 1.75;
  margin: 0 0 24px;
}
.ns-shop-edu__facts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ns-shop-edu__fact {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: var(--ns-white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  border: 1px solid var(--ns-cream-dark);
}
.ns-shop-edu__fact-icon {
  font-size: 20px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}
.ns-shop-edu__fact-title {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: 3px;
}
.ns-shop-edu__fact-sub {
  font-size: 12px;
  color: var(--ns-bark);
  line-height: 1.5;
}

/* ── Reviews sectie (nieuw) ───────────────────── */
.ns-shop-reviews {
  padding: clamp(48px, 7vw, 80px) var(--gutter);
  background: var(--ns-white);
}
.ns-shop-reviews__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  color: var(--ns-forest);
  text-align: center;
  margin: 0 0 32px;
}
.ns-shop-reviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: var(--container);
  margin: 0 auto;
}
.ns-shop-review {
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-left: 3px solid var(--ns-forest);
  border-radius: var(--radius-md);
  padding: 22px;
  position: relative;
  transition: border-left-color var(--transition), box-shadow var(--transition);
}
.ns-shop-review:hover {
  border-left-color: var(--ns-amber);
  box-shadow: var(--shadow-md);
}
.ns-shop-review::before {
  content: '"';
  position: absolute;
  top: 12px; right: 18px;
  font-family: var(--font-display);
  font-size: 64px;
  line-height: 1;
  color: var(--ns-cream-dark);
  font-weight: 800;
}
.ns-shop-review__stars {
  color: var(--ns-amber);
  font-size: 14px;
  margin-bottom: 10px;
  letter-spacing: .05em;
}
.ns-shop-review__text {
  font-size: 14px;
  color: var(--ns-black);
  line-height: 1.7;
  margin: 0 0 14px;
  font-style: italic;
  position: relative;
  z-index: 1;
}
.ns-shop-review__author {
  font-size: 12px;
  font-weight: 700;
  color: var(--ns-bark);
}
.ns-shop-review__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  background: rgba(90,158,42,.08);
  color: var(--ns-leaf);
  border: 1px solid rgba(90,158,42,.2);
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── USP strip ──────────────────────────────── */
.ns-shop-usp {
  background: var(--ns-forest);
  padding: 36px var(--gutter);
}
.ns-shop-usp__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 60px);
  flex-wrap: wrap;
}
.ns-shop-usp__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.ns-shop-usp__icon {
  font-size: 24px;
  margin-bottom: 4px;
}
.ns-shop-usp__item strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ns-cream);
  letter-spacing: .03em;
}
.ns-shop-usp__item span {
  font-size: 11px;
  color: rgba(245,237,216,.6);
}
.ns-shop-usp__sep {
  width: 1px;
  height: 44px;
  background: rgba(245,237,216,.15);
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .ns-shop-grid-section .woocommerce ul.products,
  .ns-shop-grid-section ul.products,
  #ns-shop-main .woocommerce ul.products,
  #ns-shop-main ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    justify-content: start !important;
  }
  .ns-shop-benefits__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ns-shop-benefits__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 0 24px; }
  .ns-shop-benefits__item:nth-child(2n) { border-bottom: none; }
  .ns-shop-edu__inner { grid-template-columns: 1fr; gap: 32px; }
  .ns-shop-reviews__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .ns-shop-grid-section .woocommerce ul.products,
  .ns-shop-grid-section ul.products,
  #ns-shop-main .woocommerce ul.products,
  #ns-shop-main ul.products {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-content: start !important;
    gap: 20px !important;
  }
  .ns-shop-toolbar { top: 0; }
  .ns-shop-usp__sep { display: none; }
  .ns-shop-hero { padding: 100px var(--gutter) 48px; }
  .ns-shop-proof { gap: 16px; }
  .ns-shop-proof__sep { display: none; }
  .ns-shop-benefits__grid { grid-template-columns: 1fr; }
  .ns-shop-benefits__item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.1); padding: 0 0 24px; }
  .ns-shop-benefits__item:last-child { border-bottom: none; }
  .ns-shop-reviews__grid { grid-template-columns: 1fr; }
}


/* ═══════════════════════════════════════════════
   WOOCOMMERCE — SINGLE PRODUCT
   single-product.php
═══════════════════════════════════════════════ */

/* ── Breadcrumb ────────────────────────────── */
.ns-breadcrumb {
  padding: 88px var(--gutter) 0;
  background: var(--ns-cream);
}
.ns-breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ns-bark);
  flex-wrap: wrap;
}
.ns-breadcrumb a {
  color: var(--ns-bark);
  text-decoration: none;
  transition: color .2s;
}
.ns-breadcrumb a:hover { color: var(--ns-forest); }
.ns-breadcrumb span[aria-current] { color: var(--ns-forest); font-weight: 600; }

/* ── Single layout ──────────────────────────── */
.ns-single {
  background: var(--ns-cream);
  padding: 40px 0 72px;
}
.ns-single__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

/* ── Gallery ─────────────────────────────────── */
.ns-gallery { position: sticky; top: 96px; }

.ns-gallery__main {
  position: relative;
  background: var(--ns-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--ns-cream-dark);
  aspect-ratio: 1 / 1;
  margin-bottom: 14px;
}
.ns-gallery__main-img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: 32px;
  display: block;
  transition: opacity .18s ease;
}

.ns-gallery__sale-badge {
  position: absolute;
  top: 16px; left: 16px;
  background: var(--ns-amber);
  color: #fff;
  font-size: 13px; font-weight: 800;
  border-radius: var(--radius-pill);
  padding: 5px 14px;
}
.ns-gallery__stock-badge {
  position: absolute;
  top: 16px; right: 16px;
  background: rgba(16,13,8,.55);
  color: var(--ns-cream);
  font-size: 11px; font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 5px 12px;
}

.ns-gallery__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.ns-gallery__thumb {
  width: 80px; height: 80px;
  border-radius: var(--radius-md);
  border: 2px solid var(--ns-cream-dark);
  background: var(--ns-white);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
  padding: 0;
  flex-shrink: 0;
}
.ns-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.ns-gallery__thumb:hover { border-color: var(--ns-leaf); }
.ns-gallery__thumb.is-active { border-color: var(--ns-forest); }

.ns-gallery__trust {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  flex-wrap: wrap;
}
.ns-gallery__trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ns-bark);
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}

/* ── Product info ───────────────────────────── */
.ns-pinfo { padding-top: 8px; }

.ns-pinfo__tags {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.ns-pinfo__tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ns-leaf);
  background: rgba(90,158,42,.08);
  border: 1px solid rgba(90,158,42,.2);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

.ns-pinfo__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: var(--ns-forest);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 16px;
}

.ns-pinfo__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  margin-bottom: 24px;
}
.ns-pinfo__stars { display: flex; gap: 2px; }
.ns-pinfo__rating-score {
  font-size: 14px; font-weight: 700; color: var(--ns-forest);
}
.ns-pinfo__rating-count {
  font-size: 13px; color: var(--ns-bark); text-decoration: underline;
}

.ns-pinfo__price-block {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 20px;
}
.ns-pinfo__price {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 40px);
  font-weight: 800;
  color: var(--ns-forest);
  line-height: 1;
}
.ns-pinfo__price ins { text-decoration: none; color: var(--ns-forest); }
.ns-pinfo__price del {
  font-size: 20px; color: var(--ns-bark);
  font-weight: 400; font-family: var(--font-body); opacity: .6;
}
.ns-pinfo__savings {
  background: rgba(90,158,42,.1);
  border: 1px solid rgba(90,158,42,.25);
  color: var(--ns-leaf);
  font-size: 12px; font-weight: 700;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  white-space: nowrap;
}

.ns-pinfo__short-desc {
  font-size: 15px;
  color: var(--ns-bark);
  line-height: 1.75;
  margin-bottom: 20px;
  border-left: 3px solid var(--ns-leaf);
  padding-left: 16px;
}
.ns-pinfo__short-desc p { margin: 0; }

.ns-pinfo__ingredients {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.ns-pinfo__ing {
  font-size: 12px; font-weight: 600;
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  color: var(--ns-bark);
}

/* Voorraad */
.ns-pinfo__stock {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600;
  margin-bottom: 24px;
}
.ns-pinfo__stock-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.ns-pinfo__stock.in-stock  { color: var(--ns-leaf); }
.ns-pinfo__stock.in-stock .ns-pinfo__stock-dot  { background: var(--ns-leaf); box-shadow: 0 0 0 3px rgba(90,158,42,.2); }
.ns-pinfo__stock.out-stock { color: var(--ns-bark); }
.ns-pinfo__stock.out-stock .ns-pinfo__stock-dot { background: var(--ns-bark); }

/* Cart */
.ns-pinfo__cart {
  display: flex; gap: 12px; align-items: stretch;
  margin-bottom: 14px;
}

/* Quantity stepper */
.ns-qty {
  display: flex; align-items: center;
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-pill);
  background: var(--ns-white);
  overflow: hidden;
  flex-shrink: 0;
}
.ns-qty__btn {
  width: 44px; height: 52px;
  background: none; border: none;
  font-size: 18px; font-weight: 600;
  color: var(--ns-forest);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ns-qty__btn:hover { background: var(--ns-cream); }
.ns-qty__input {
  width: 48px; height: 52px;
  border: none; border-left: 1px solid var(--ns-cream-dark); border-right: 1px solid var(--ns-cream-dark);
  text-align: center;
  font-family: var(--font-body); font-size: 16px; font-weight: 700;
  color: var(--ns-forest); background: var(--ns-white);
  -moz-appearance: textfield;
}
.ns-qty__input::-webkit-outer-spin-button,
.ns-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Add to cart knop */
.ns-pinfo__add-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 700;
  color: var(--ns-cream);
  background: var(--ns-forest);
  border: 2px solid var(--ns-forest);
  border-radius: var(--radius-pill);
  padding: 0 32px;
  height: 52px;
  cursor: pointer;
  transition: background .25s, transform .2s;
  white-space: nowrap;
}
.ns-pinfo__add-btn:hover  { background: var(--ns-forest-mid); border-color: var(--ns-forest-mid); }
.ns-pinfo__add-btn.loading { opacity: .7; pointer-events: none; }
.ns-pinfo__add-btn.added  { background: var(--ns-leaf); border-color: var(--ns-leaf); }

.ns-pinfo__direct-checkout {
  display: block;
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: var(--ns-amber);
  text-decoration: none;
  margin-bottom: 28px;
  transition: color .2s;
}
.ns-pinfo__direct-checkout:hover { color: var(--ns-amber-warm); }

/* Garanties */
.ns-pinfo__guarantees {
  display: flex; flex-direction: column; gap: 10px;
  background: var(--ns-white);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 16px;
}
.ns-pinfo__guarantee-item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 13px; color: var(--ns-bark); line-height: 1.5;
}
.ns-pinfo__guarantee-item span:first-child { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.ns-pinfo__guarantee-item strong { color: var(--ns-forest); }

.ns-pinfo__sku { font-size: 11px; color: var(--ns-bark); opacity: .6; }
.ns-pinfo__sku span { font-family: monospace; }

/* ── Tabs ─────────────────────────────────────── */
.ns-tabs-section { padding-top: 0; }

.ns-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--ns-cream-dark);
  margin-bottom: 40px;
  overflow-x: auto;
}
.ns-tab {
  font-family: var(--font-body);
  font-size: 15px; font-weight: 600;
  color: var(--ns-bark);
  background: none; border: none;
  padding: 14px 28px;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color .2s;
  display: flex; align-items: center; gap: 8px;
}
.ns-tab::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 2px;
  background: var(--ns-forest);
  transform: scaleX(0);
  transition: transform .25s;
}
.ns-tab:hover { color: var(--ns-forest); }
.ns-tab.is-active { color: var(--ns-forest); }
.ns-tab.is-active::after { transform: scaleX(1); }

.ns-tab__count {
  background: var(--ns-forest); color: var(--ns-cream);
  font-size: 10px; font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}

.ns-tab-panel { display: none; }
.ns-tab-panel.is-active { display: block; }

/* Wysiwyg content */
.ns-wysiwyg { max-width: 720px; }
.ns-wysiwyg p { font-size: 15px; color: var(--ns-bark); line-height: 1.8; margin-bottom: 16px; }
.ns-wysiwyg h2, .ns-wysiwyg h3 { font-family: var(--font-display); color: var(--ns-forest); margin: 28px 0 12px; }
.ns-wysiwyg ul { list-style: none; padding: 0; margin-bottom: 16px; }
.ns-wysiwyg ul li { padding-left: 20px; position: relative; color: var(--ns-bark); font-size: 15px; line-height: 1.7; margin-bottom: 8px; }
.ns-wysiwyg ul li::before { content: '✓'; position: absolute; left: 0; color: var(--ns-leaf); font-weight: 700; }

/* Gebruik stappen */
.ns-usage-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
  margin-bottom: 28px;
}
.ns-usage-step {
  background: var(--ns-cream);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-md);
  padding: 24px;
}
.ns-usage-step__num {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 800;
  color: var(--ns-amber); line-height: 1;
  margin-bottom: 12px;
}
.ns-usage-step h4 { font-size: 15px; font-weight: 700; color: var(--ns-forest); margin-bottom: 8px; }
.ns-usage-step p  { font-size: 13px; color: var(--ns-bark); line-height: 1.65; margin: 0; }

.ns-usage-note {
  background: rgba(196,117,32,.08);
  border: 1px solid rgba(196,117,32,.2);
  border-radius: var(--radius-md);
  padding: 16px 20px;
  font-size: 13px; color: var(--ns-bark); line-height: 1.6;
}
.ns-usage-note strong { color: var(--ns-amber); }

/* Review samenvatting */
.ns-review-summary {
  display: flex; align-items: center; gap: 24px;
  background: var(--ns-cream);
  border: 1px solid var(--ns-cream-dark);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 32px;
}
.ns-review-summary__number {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 800;
  color: var(--ns-forest); line-height: 1;
}
.ns-review-summary__stars { display: flex; gap: 4px; margin: 6px 0; }
.ns-review-summary__label { font-size: 13px; color: var(--ns-bark); }

/* Gerelateerd */
.ns-related__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}

/* ── Responsive single ──────────────────────── */
@media (max-width: 1024px) {
  .ns-single__layout { grid-template-columns: 1fr; gap: 40px; }
  .ns-gallery { position: static; }
  .ns-usage-grid { grid-template-columns: 1fr; }
  .ns-related__grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 640px) {
  .ns-pinfo__cart { flex-direction: column; }
  .ns-qty { width: 100%; justify-content: space-between; }
  .ns-tabs { gap: 0; }
  .ns-tab { padding: 12px 16px; font-size: 14px; }
  .ns-related__grid { grid-template-columns: 1fr; }
  .ns-gallery__thumbs { gap: 8px; }
  .ns-gallery__thumb { width: 64px; height: 64px; }
}


/* ═══════════════════════════════════════════════
 WOOCOMMERCE — CART PAGINA
 woocommerce/cart/cart.php
═══════════════════════════════════════════════ */

.ns-cart-page {
padding: 100px 0 80px;
min-height: 70vh;
}

.ns-cart-page__header {
margin-bottom: 40px;
}
.ns-cart-page__title {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
color: var(--ns-forest);
line-height: 1.1;
letter-spacing: -.02em;
}

/* ── Leeg state ─────────────────────────────── */
.ns-cart-empty {
text-align: center;
padding: 60px var(--gutter) 80px;
max-width: 480px;
margin: 0 auto;
}
.ns-cart-empty__icon { font-size: 72px; margin-bottom: 24px; line-height: 1; }
.ns-cart-empty__title {
font-family: var(--font-display);
font-size: 28px; font-weight: 700;
color: var(--ns-forest); margin-bottom: 12px;
}
.ns-cart-empty__text {
font-size: 15px; color: var(--ns-bark);
line-height: 1.7; margin-bottom: 28px;
}

/* ── Layout: 2 kolommen ─────────────────────── */
.ns-cart-layout {
display: grid;
grid-template-columns: 1fr 360px;
gap: 32px;
align-items: start;
}

/* ── Kolomkoppen ────────────────────────────── */
.ns-cart-head {
display: grid;
grid-template-columns: 1fr 100px 130px 100px 36px;
gap: 16px;
padding: 0 0 12px;
border-bottom: 2px solid var(--ns-cream-dark);
margin-bottom: 4px;
}
.ns-cart-head span {
font-size: 11px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ns-bark);
}
.ns-cart-head__price,
.ns-cart-head__qty,
.ns-cart-head__total { text-align: center; }

/* ── Productrij ─────────────────────────────── */
.ns-cart-row {
display: grid;
grid-template-columns: 1fr 100px 130px 100px 36px;
gap: 16px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid var(--ns-cream-dark);
transition: background .2s;
}
.ns-cart-row:hover { background: var(--ns-cream); border-radius: var(--radius-md); }

/* Product kolom */
.ns-cart-row__product {
display: flex;
align-items: center;
gap: 16px;
}
.ns-cart-row__img-wrap {
width: 80px; height: 80px;
flex-shrink: 0;
border-radius: var(--radius-md);
overflow: hidden;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
}
.ns-cart-row__img-wrap img {
width: 100%; height: 100%;
object-fit: contain;
padding: 6px;
display: block;
}
.ns-cart-row__meta { display: flex; flex-direction: column; gap: 4px; }
.ns-cart-row__name {
font-family: var(--font-display);
font-size: 15px; font-weight: 700;
color: var(--ns-forest);
text-decoration: none;
transition: color .2s;
line-height: 1.3;
}
.ns-cart-row__name:hover { color: var(--ns-amber); }
.ns-cart-row__sku { font-size: 11px; color: var(--ns-bark); opacity: .6; font-family: monospace; }
.ns-cart-row__mobile-price { display: none; }

/* Prijs/qty/subtotaal kolommen */
.ns-cart-row__price,
.ns-cart-row__subtotal {
text-align: center;
font-family: var(--font-display);
font-size: 16px; font-weight: 700;
color: var(--ns-forest);
}
.ns-cart-row__qty { display: flex; justify-content: center; }

/* Verwijder knop */
.ns-cart-row__remove { display: flex; justify-content: center; }
.ns-cart-row__remove-btn {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
display: flex; align-items: center; justify-content: center;
color: var(--ns-bark);
text-decoration: none;
transition: all .2s;
flex-shrink: 0;
}
.ns-cart-row__remove-btn:hover {
background: #fee2e2;
border-color: #fca5a5;
color: #dc2626;
}

/* ── Qty small variant ──────────────────────── */
.ns-qty--sm .ns-qty__btn { width: 32px; height: 40px; }
.ns-qty--sm .ns-qty__input { width: 40px; height: 40px; font-size: 14px; }
/* Winkelwagen: breder veld voor meercijferige aantallen */
.ns-cart-row .ns-qty--sm .ns-qty__input {
	min-width: 56px;
	width: 56px;
	padding-left: 6px;
	padding-right: 6px;
}

/* Hello Elementor: geen roze/rode focus op aantal (+/− en input) in winkelwagen */
body.woocommerce-cart .ns-cart-form .ns-qty {
	border-color: var(--ns-cream-dark) !important;
	background: var(--ns-white) !important;
	box-shadow: none !important;
}
body.woocommerce-cart .ns-cart-form .ns-qty__btn,
body.woocommerce-cart .ns-cart-form .ns-qty__btn:hover,
body.woocommerce-cart .ns-cart-form .ns-qty__btn:focus,
body.woocommerce-cart .ns-cart-form .ns-qty__btn:focus-visible,
body.woocommerce-cart .ns-cart-form .ns-qty__btn:active {
	-webkit-appearance: none !important;
	appearance: none !important;
	font-family: inherit !important;
	background: transparent !important;
	background-color: transparent !important;
	border: none !important;
	box-shadow: none !important;
	color: var(--ns-forest) !important;
	outline: none !important;
}
body.woocommerce-cart .ns-cart-form .ns-qty__btn:focus-visible {
	outline: 2px solid var(--ns-forest) !important;
	outline-offset: 2px;
}
body.woocommerce-cart .ns-cart-form .ns-qty__btn:hover {
	background: var(--ns-cream) !important;
}
body.woocommerce-cart .ns-cart-form .ns-qty__input.ns-cart-qty,
body.woocommerce-cart .ns-cart-form .ns-qty__input.ns-cart-qty:hover {
	-webkit-appearance: textfield !important;
	-moz-appearance: textfield !important;
	appearance: textfield !important;
	color: var(--ns-forest) !important;
	background: var(--ns-white) !important;
	border: none !important;
	border-left: 1px solid var(--ns-cream-dark) !important;
	border-right: 1px solid var(--ns-cream-dark) !important;
	box-shadow: none !important;
	outline: none !important;
}
body.woocommerce-cart .ns-cart-form .ns-qty__input.ns-cart-qty:focus,
body.woocommerce-cart .ns-cart-form .ns-qty__input.ns-cart-qty:focus-visible {
	border-color: var(--ns-forest) !important;
	border-left-color: var(--ns-cream-dark) !important;
	border-right-color: var(--ns-cream-dark) !important;
	box-shadow: 0 0 0 3px rgba(30, 74, 13, 0.12) !important;
	outline: none !important;
	color: var(--ns-forest) !important;
}

/* ── Cart actions ───────────────────────────── */
.ns-cart-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 0 0;
flex-wrap: wrap;
}

/* Coupon */
.ns-coupon { display: flex; gap: 8px; }
.ns-coupon__input {
font-family: var(--font-body);
font-size: 14px;
color: var(--ns-forest);
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 10px 18px;
width: 200px;
transition: border-color .2s;
outline: none;
}
.ns-coupon__input:focus { border-color: var(--ns-forest); }
.ns-coupon__input::placeholder { color: var(--ns-bark); opacity: .5; }
.ns-coupon__btn {
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: var(--ns-forest);
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 10px 20px;
cursor: pointer;
transition: all .2s;
white-space: nowrap;
}
.ns-coupon__btn:hover { background: var(--ns-cream-dark); }

/* Update knop */
.ns-cart-update-btn {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-body);
font-size: 13px; font-weight: 600;
color: var(--ns-bark);
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 10px 20px;
cursor: pointer;
transition: all .2s;
opacity: .5;
pointer-events: none;
}
.ns-cart-update-btn.is-dirty {
opacity: 1;
pointer-events: auto;
color: var(--ns-forest);
border-color: var(--ns-forest);
}
.ns-cart-update-btn.is-dirty:hover {
background: var(--ns-forest);
color: var(--ns-cream);
}

/* ── Sidebar totalen ─────────────────────────── */
.ns-cart-sidebar { position: sticky; top: 96px; }

.ns-cart-totals {
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: 28px;
}
.ns-cart-totals__title {
font-family: var(--font-display);
font-size: 22px; font-weight: 800;
color: var(--ns-forest);
margin-bottom: 24px;
}

.ns-cart-totals__row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 12px 0;
font-size: 14px;
color: var(--ns-bark);
border-bottom: 1px solid var(--ns-cream-dark);
}
.ns-cart-totals__row:last-of-type { border-bottom: none; }

.ns-cart-totals__row--discount { color: var(--ns-leaf); }
.ns-cart-totals__row--discount em { font-style: normal; font-weight: 700; }
.ns-cart-totals__remove-coupon {
margin-left: 6px; color: var(--ns-bark);
text-decoration: none; font-size: 11px;
opacity: .5; transition: opacity .2s;
}
.ns-cart-totals__remove-coupon:hover { opacity: 1; }

.ns-cart-totals__discount-amount { color: var(--ns-leaf); font-weight: 700; }
.ns-cart-totals__free { color: var(--ns-leaf); font-weight: 700; }

.ns-cart-totals__shipping { font-size: 13px; text-align: right; }
.ns-cart-totals__shipping .woocommerce-shipping-destination { font-weight: 600; color: var(--ns-forest); }

.ns-cart-totals__divider {
height: 1px;
background: var(--ns-cream-dark);
margin: 8px 0;
}

.ns-cart-totals__row--total {
font-family: var(--font-display);
font-size: 20px; font-weight: 800;
color: var(--ns-forest);
border-bottom: none;
padding-top: 16px;
}

/* Checkout knop */
.ns-cart-checkout-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
font-family: var(--font-body);
font-size: 16px; font-weight: 700;
color: var(--ns-cream);
background: var(--ns-forest);
border-radius: var(--radius-pill);
padding: 16px 24px;
text-decoration: none;
margin-top: 20px;
transition: background .25s, transform .2s;
border: none;
cursor: pointer;
}
.ns-cart-checkout-btn:hover {
background: var(--ns-forest-mid);
color: var(--ns-cream);
transform: translateY(-1px);
}

.ns-cart-continue {
display: block;
text-align: center;
font-size: 13px; font-weight: 600;
color: var(--ns-bark);
text-decoration: none;
margin-top: 12px;
transition: color .2s;
}
.ns-cart-continue:hover { color: var(--ns-forest); }

/* Trust items */
.ns-cart-trust {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--ns-cream-dark);
}
.ns-cart-trust__item {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--ns-bark);
line-height: 1.4;
}
.ns-cart-trust__item span { font-size: 14px; flex-shrink: 0; }

/* ── WooCommerce cart notices ───────────────── */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
border-radius: var(--radius-md);
font-family: var(--font-body);
font-size: 14px;
margin-bottom: 16px;
padding: 14px 20px;
}

/* ── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
.ns-cart-layout { grid-template-columns: 1fr; }
.ns-cart-sidebar { position: static; }
}

@media (max-width: 768px) {
.ns-cart-head { display: none; }
.ns-cart-row {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 8px;
  padding: 16px 0;
}
.ns-cart-row__product { grid-column: 1; grid-row: 1; }
.ns-cart-row__qty     { grid-column: 1; grid-row: 2; justify-content: flex-start; }
.ns-cart-row__subtotal { grid-column: 1; grid-row: 3; text-align: left; font-size: 15px; }
.ns-cart-row__remove  { grid-column: 2; grid-row: 1; align-self: start; }
.ns-cart-row__price   { display: none; }
.ns-cart-row__mobile-price {
  display: inline;
  font-size: 13px; color: var(--ns-bark); font-weight: 500;
}
.ns-cart-actions { flex-direction: column; align-items: flex-start; }
.ns-coupon { flex-wrap: wrap; width: 100%; }
.ns-coupon__input { width: 100%; flex: 1; }
.ns-cart-page { padding-top: 90px; }
}

@media print {
  .ns-header, .ns-footer, .ns-cta-block { display: none; }
  body { background: #fff; color: #000; }
}

/* ═══════════════════════════════════════════════
 WOOCOMMERCE — CHECKOUT PAGINA
 woocommerce/checkout/form-checkout.php
═══════════════════════════════════════════════ */

/* ── Pagina wrapper ──────────────────────────── */
.ns-checkout-page {
padding: 100px 0 80px;
min-height: 80vh;
}

/* ── Paginatitel (deelt stijl met .ns-cart-page__title) ── */
.ns-checkout-header { margin-bottom: var(--space-6); }
.ns-checkout-header__title {
font-family: var(--font-display);
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
color: var(--ns-forest);
line-height: 1.1;
letter-spacing: -.02em;
}
.ns-checkout-header__title em { color: var(--ns-amber); font-style: italic; }

/* ── Stappenbalk ─────────────────────────────── */
.ns-checkout-steps {
display: flex;
align-items: center;
margin-bottom: var(--space-8);
}
.ns-checkout-step {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.ns-checkout-step__num {
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 700;
background: var(--ns-cream);
border: 2px solid var(--ns-cream-dark);
color: var(--ns-bark);
transition: all .25s;
}
.ns-checkout-step--done .ns-checkout-step__num  { background: var(--ns-leaf);   border-color: var(--ns-leaf);   color: #fff; }
.ns-checkout-step--active .ns-checkout-step__num { background: var(--ns-forest); border-color: var(--ns-forest); color: var(--ns-cream); box-shadow: var(--shadow-sm); }
.ns-checkout-step__label {
font-size: var(--text-xs); font-weight: 600;
color: var(--ns-bark); letter-spacing: .05em;
}
.ns-checkout-step--active .ns-checkout-step__label { color: var(--ns-forest); }
.ns-checkout-step--done .ns-checkout-step__label   { color: var(--ns-leaf); }
.ns-checkout-step__line {
flex: 1; height: 2px;
background: var(--ns-cream-dark);
margin: 0 var(--space-3) 22px;
}

/* ── Inlog-notice ────────────────────────────── */
.ns-checkout-login-notice {
display: flex; align-items: center; gap: var(--space-3);
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-md);
padding: 14px 20px;
font-size: var(--text-sm); color: var(--ns-bark);
margin-bottom: var(--space-6);
}
.ns-checkout-login-notice__icon { font-size: 20px; }
.ns-checkout-login-toggle {
font-weight: 600; color: var(--ns-forest);
text-decoration: underline; text-underline-offset: 3px;
}

/* ── Layout (zelfde principe als .ns-cart-layout) ── */
.ns-checkout-layout {
display: grid;
grid-template-columns: 1fr 420px;
gap: var(--space-8);
align-items: start;
}

/* ── Velden kolom ────────────────────────────── */
.ns-checkout-fields { display: flex; flex-direction: column; gap: var(--space-6); }

/* ── Sectie kaart ────────────────────────────── */
.ns-checkout-section {
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.ns-checkout-section__head { margin-bottom: var(--space-5); }
.ns-checkout-section__title {
font-family: var(--font-display);
font-size: var(--text-lg); font-weight: 700;
color: var(--ns-forest);
display: flex; align-items: center; gap: var(--space-3);
}
.ns-checkout-section__icon { font-size: 20px; }

/* ── WooCommerce billing/shipping velden grid ──
 Grid op __field-wrapper (WC 3.6+): directe kinderen van .woocommerce-billing-fields
 zijn h3 + wrapper — grid op de oude laag liet half de kaart leeg. */
.ns-checkout-section .woocommerce-billing-fields,
.ns-checkout-section .woocommerce-shipping-fields,
.ns-checkout-section .woocommerce-additional-fields {
display: block;
width: 100%;
}

.ns-checkout-section .woocommerce-billing-fields__field-wrapper,
.ns-checkout-section .woocommerce-shipping-fields__field-wrapper,
.ns-checkout-section .woocommerce-additional-fields__field-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4) var(--space-5);
width: 100%;
}

/* Oudere WC / markup zonder field-wrapper: grid op de ouder */
.ns-checkout-section .woocommerce-billing-fields:not(:has(.woocommerce-billing-fields__field-wrapper)),
.ns-checkout-section .woocommerce-shipping-fields:not(:has(.woocommerce-shipping-fields__field-wrapper)),
.ns-checkout-section .woocommerce-additional-fields:not(:has(.woocommerce-additional-fields__field-wrapper)) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4) var(--space-5);
}

.ns-checkout-section .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ns-checkout-section .woocommerce-shipping-fields__field-wrapper .form-row-wide,
.ns-checkout-section .woocommerce-additional-fields__field-wrapper .form-row-wide,
.ns-checkout-section .woocommerce-billing-fields:not(:has(.woocommerce-billing-fields__field-wrapper)) > .form-row-wide,
.ns-checkout-section .woocommerce-shipping-fields:not(:has(.woocommerce-shipping-fields__field-wrapper)) > .form-row-wide,
.ns-checkout-section .woocommerce-additional-fields:not(:has(.woocommerce-additional-fields__field-wrapper)) > .form-row-wide,
.ns-checkout-section .woocommerce-billing-fields h3,
.ns-checkout-section .woocommerce-shipping-fields h3 { grid-column: 1 / -1; }

/* WC default floats breken CSS grid — reset binnen checkout */
.ns-checkout-section .woocommerce-billing-fields .form-row,
.ns-checkout-section .woocommerce-shipping-fields .form-row,
.ns-checkout-section .woocommerce-additional-fields .form-row {
float: none;
width: 100%;
max-width: none;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}

/* Verberg WC eigen sectiekoppen */
.ns-checkout-section .woocommerce-billing-fields > h3,
.ns-checkout-section .woocommerce-shipping-fields > h3,
.ns-checkout-section .woocommerce-additional-fields > h3 { display: none; }

/* Labels */
.ns-checkout-section .form-row label {
font-size: var(--text-sm); font-weight: 600;
color: var(--ns-forest); display: block; margin-bottom: 6px;
}
.ns-checkout-section .form-row label .required { color: var(--ns-amber); }

/* Input / select / textarea — uniforme stijl */
.ns-checkout-section input[type="text"],
.ns-checkout-section input[type="email"],
.ns-checkout-section input[type="tel"],
.ns-checkout-section input[type="number"],
.ns-checkout-section input[type="password"],
.ns-checkout-section select,
.ns-checkout-section textarea {
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--ns-forest);
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-sm);
padding: 11px 16px;
width: 100%;
transition: border-color .2s, box-shadow .2s;
outline: none;
appearance: none;
-webkit-appearance: none;
}
.ns-checkout-section input:focus,
.ns-checkout-section select:focus,
.ns-checkout-section textarea:focus {
border-color: var(--ns-forest);
box-shadow: 0 0 0 3px rgba(30,74,13,.10);
}
.ns-checkout-section input::placeholder,
.ns-checkout-section textarea::placeholder { color: var(--ns-bark); opacity: .45; }
.ns-checkout-section textarea { resize: vertical; min-height: 100px; }

/* Select pijl */
.ns-checkout-section select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A5230' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
}

/* Validatie */
.ns-checkout-section .form-row.woocommerce-invalid input,
.ns-checkout-section .form-row.woocommerce-invalid select { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.10); }
.ns-checkout-section .form-row.woocommerce-validated input,
.ns-checkout-section .form-row.woocommerce-validated select { border-color: var(--ns-leaf); }

/* Verzend-naar-ander-adres checkbox */
.ns-checkout-section .woocommerce-ship-to-different-address {
display: flex; align-items: center; gap: var(--space-3);
width: 100%;
margin-bottom: var(--space-4);
cursor: pointer; user-select: none;
font-size: var(--text-sm); font-weight: 600; color: var(--ns-forest);
}

/* ── Sidebar ─────────────────────────────────── */
.ns-checkout-sidebar {
position: sticky; top: 96px;
display: flex; flex-direction: column; gap: var(--space-5);
}

/* ── Bestellingsoverzicht ────────────────────── */
.ns-checkout-order-review {
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: var(--space-6);
}

/* Gedeelde sectietitel (ook gebruikt in .ns-checkout-payment) */
.ns-checkout-order-review__title,
.ns-checkout-payment__title {
font-family: var(--font-display);
font-size: var(--text-lg); font-weight: 700;
color: var(--ns-forest);
margin-bottom: var(--space-5);
display: flex; align-items: center; gap: var(--space-3);
}

/* Cart items in sidebar */
.ns-checkout-order-items {
display: flex; flex-direction: column; gap: var(--space-4);
margin-bottom: var(--space-5);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--ns-cream-dark);
}
.ns-co-item {
display: flex; align-items: center; gap: var(--space-4);
}
.ns-co-item__img-wrap {
position: relative; flex-shrink: 0;
width: 64px; height: 64px;
border-radius: var(--radius-md); overflow: hidden;
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
}
.ns-co-item__img-wrap img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.ns-co-item__qty {
position: absolute; top: -6px; right: -6px;
min-width: 20px; height: 20px;
border-radius: var(--radius-pill);
background: var(--ns-forest); color: var(--ns-cream);
font-size: 11px; font-weight: 700;
display: flex; align-items: center; justify-content: center;
padding: 0 4px;
}
.ns-co-item__info { flex: 1; min-width: 0; }
.ns-co-item__name {
font-family: var(--font-display);
font-size: 14px; font-weight: 700;
color: var(--ns-forest); display: block; line-height: 1.3;
}
.ns-co-item__price {
font-family: var(--font-display);
font-size: 15px; font-weight: 700;
color: var(--ns-forest); flex-shrink: 0; white-space: nowrap;
}

/* ── Coupon toggle (uitbreiding op bestaande .ns-coupon) ── */
.ns-checkout-coupon { margin-bottom: var(--space-4); }
.ns-checkout-coupon__toggle {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--text-sm); font-weight: 600;
color: var(--ns-bark); background: none; border: none;
border-radius: var(--radius-sm);
padding: 4px 2px; cursor: pointer; transition: color .2s;
text-decoration: underline; text-underline-offset: 3px;
text-decoration-style: dashed;
}
.ns-checkout-coupon__toggle:hover { color: var(--ns-forest); }
.ns-checkout-coupon__toggle:focus { outline: none; }
.ns-checkout-coupon__toggle:focus-visible {
outline: 2px solid var(--ns-forest);
outline-offset: 2px;
color: var(--ns-forest);
}
.ns-checkout-coupon__form { padding-top: var(--space-3); }

/* Hello Elementor overschrijft button:focus vaak met roze/rood — expliciet terug naar NeuroShroom */
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle,
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:hover,
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:focus,
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:focus-visible,
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:active {
font-family: inherit;
-webkit-appearance: none;
appearance: none;
background: transparent !important;
background-color: transparent !important;
border: none !important;
border-radius: var(--radius-sm);
box-shadow: none !important;
text-shadow: none !important;
filter: none !important;
}
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle {
color: var(--ns-bark) !important;
}
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:hover {
color: var(--ns-forest) !important;
}
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:focus,
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle:focus-visible {
outline: 2px solid var(--ns-forest) !important;
outline-offset: 2px;
color: var(--ns-forest) !important;
}
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle[aria-expanded="true"] {
color: var(--ns-forest) !important;
text-decoration-style: solid;
}
body.woocommerce-checkout form.checkout .ns-checkout-coupon__toggle svg {
stroke: currentColor;
flex-shrink: 0;
}

/* ── Totalen sidebar (vergelijkbaar met .ns-cart-totals__row) ── */
.ns-checkout-totals { padding-top: var(--space-4); }
.ns-checkout-totals__row {
display: flex; justify-content: space-between; align-items: flex-start;
gap: var(--space-3); padding: 10px 0;
font-size: var(--text-sm); color: var(--ns-bark);
border-bottom: 1px solid var(--ns-cream-dark);
}
.ns-checkout-totals__row:last-of-type { border-bottom: none; }
.ns-checkout-totals__row--discount { color: var(--ns-leaf); font-weight: 600; }
.ns-checkout-totals__discount-amount { font-weight: 700; color: var(--ns-leaf); }
.ns-checkout-totals__remove-coupon {
margin-left: 4px; font-size: 11px;
color: var(--ns-bark); opacity: .5; transition: opacity .2s;
}
.ns-checkout-totals__remove-coupon:hover { opacity: 1; }
.ns-checkout-totals__shipping { text-align: right; font-size: 13px; }
.ns-checkout-totals__divider { height: 1px; background: var(--ns-forest); opacity: .15; margin: 4px 0; }
.ns-checkout-totals__row--total {
font-family: var(--font-display);
font-size: 20px; font-weight: 800;
color: var(--ns-forest); padding-top: var(--space-4); border-bottom: none;
}

/* ── Betaalmethoden ──────────────────────────── */
.ns-checkout-payment {
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.ns-payment-methods {
display: flex; flex-direction: column; gap: var(--space-3);
margin-bottom: var(--space-5);
padding: 0; list-style: none;
}
.ns-payment-methods li {
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-md);
padding: 14px 16px;
transition: border-color .2s, background .2s; cursor: pointer;
}
.ns-payment-methods li:has(input:checked) {
border-color: var(--ns-forest);
background: rgba(30,74,13,.04);
}
.ns-payment-methods li label {
display: flex; align-items: center; gap: var(--space-3);
cursor: pointer; font-size: var(--text-sm); font-weight: 600;
color: var(--ns-forest); user-select: none;
}
.ns-payment-methods li label img { height: 24px; width: auto; display: inline-block; vertical-align: middle; }
.ns-payment-methods input[type="radio"] { accent-color: var(--ns-forest); width: 18px; height: 18px; flex-shrink: 0; }
.ns-payment-methods .payment_box { margin-top: var(--space-3); font-size: var(--text-sm); color: var(--ns-bark); }
.ns-payment-no-methods { font-size: var(--text-sm); color: var(--ns-bark); }

/* ── Voorwaarden & bestelknop ─────────────────── */
.ns-checkout-submit .woocommerce-privacy-policy-text,
.ns-checkout-submit .woocommerce-terms-and-conditions-checkbox-text {
font-size: var(--text-sm); color: var(--ns-bark); line-height: 1.6;
}
.ns-checkout-submit .woocommerce-form__input-checkbox {
accent-color: var(--ns-forest);
width: 16px; height: 16px; margin-right: 8px; vertical-align: middle;
}
.ns-checkout-submit .woocommerce-terms-and-conditions-wrapper { margin-bottom: var(--space-4); }

/* Bestelknop — bouwt op .ns-btn--primary stijl */
.ns-checkout-place-order {
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%;
font-family: var(--font-body); font-size: var(--text-md); font-weight: 700;
color: var(--ns-cream); background: var(--ns-forest);
border: none; border-radius: var(--radius-pill);
padding: 18px 28px; cursor: pointer;
transition: background var(--transition), transform .2s, box-shadow var(--transition);
letter-spacing: .01em;
}
.ns-checkout-place-order:hover {
background: var(--ns-forest-mid);
transform: translateY(-2px); box-shadow: var(--shadow-md);
color: var(--ns-cream);
}
.ns-checkout-place-order:active { transform: translateY(0); }

/* ── Trust badges (bouwt op .ns-cart-trust__item patroon) ── */
.ns-checkout-trust {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.ns-checkout-trust__item {
display: flex; align-items: center; gap: 8px;
font-size: 12px; color: var(--ns-bark); line-height: 1.4;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-md);
padding: 10px 12px;
}
.ns-checkout-trust__item span:first-child { font-size: 16px; flex-shrink: 0; }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
.ns-checkout-layout { grid-template-columns: 1fr; }
.ns-checkout-sidebar { position: static; }
}
@media (max-width: 768px) {
.ns-checkout-page { padding-top: 90px; }
.ns-checkout-steps { display: none; }
.ns-checkout-section { padding: var(--space-5); }
.ns-checkout-section .woocommerce-billing-fields__field-wrapper,
.ns-checkout-section .woocommerce-shipping-fields__field-wrapper,
.ns-checkout-section .woocommerce-additional-fields__field-wrapper,
.ns-checkout-section .woocommerce-billing-fields:not(:has(.woocommerce-billing-fields__field-wrapper)),
.ns-checkout-section .woocommerce-shipping-fields:not(:has(.woocommerce-shipping-fields__field-wrapper)),
.ns-checkout-section .woocommerce-additional-fields:not(:has(.woocommerce-additional-fields__field-wrapper)) {
  grid-template-columns: 1fr;
}
.ns-checkout-section .woocommerce-billing-fields__field-wrapper .form-row-wide,
.ns-checkout-section .woocommerce-shipping-fields__field-wrapper .form-row-wide,
.ns-checkout-section .woocommerce-additional-fields__field-wrapper .form-row-wide { grid-column: 1; }
.ns-checkout-trust { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════════════
 OVER ONS PAGINA — page-about.php
 Organisch · Wetenschappelijk · Visueel Storytelling
═══════════════════════════════════════════════════════════ */

/* ── Hero ──────────────────────────────────────────────── */
.ns-about-hero {
position: relative;
min-height: 100vh;
display: flex; align-items: center;
overflow: hidden;
background: var(--ns-forest);
padding-top: 72px;
}

.ns-about-hero__photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.ns-about-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 22%;
}

.ns-about-hero__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(105deg, rgba(16, 13, 8, 0.9) 0%, rgba(30, 74, 13, 0.65) 45%, rgba(16, 13, 8, 0.5) 100%),
    radial-gradient(ellipse 85% 75% at 70% 45%, rgba(196, 117, 32, 0.12) 0%, transparent 55%);
}

@media (max-width: 768px) {
  .ns-about-hero__photo img {
    object-position: center 28%;
  }
}

.ns-about-hero--photo .ns-about-hero__canvas {
  opacity: 0.45;
}

.ns-about-hero__canvas {
position: absolute; inset: 0; z-index: 1;
background:
  radial-gradient(ellipse 90% 70% at 65% 55%, rgba(90,158,42,.20) 0%, transparent 60%),
  radial-gradient(ellipse 50% 80% at 15% 85%, rgba(196,117,32,.13) 0%, transparent 55%),
  radial-gradient(ellipse 60% 50% at 88% 8%,  rgba(45,107,26,.28) 0%, transparent 50%);
}
.ns-about-hero__spore {
position: absolute; border-radius: 50%;
background: rgba(141,198,74,.07);
animation: ns-about-float 9s ease-in-out infinite;
pointer-events: none;
z-index: 2;
}
.ns-about-hero__spore:nth-child(1){ width:380px;height:380px;top:-100px;right:6%;    animation-delay:0s;   }
.ns-about-hero__spore:nth-child(2){ width:200px;height:200px;bottom:10%;left:3%;     animation-delay:-3.5s;}
.ns-about-hero__spore:nth-child(3){ width:90px; height:90px; top:35%; right:22%;    animation-delay:-6s;  }
.ns-about-hero__spore:nth-child(4){ width:260px;height:260px;bottom:-80px;right:32%;animation-delay:-1.8s;}
@keyframes ns-about-float {
0%,100%{ transform:translateY(0) scale(1);    }
50%    { transform:translateY(-28px) scale(1.05); }
}
.ns-about-hero__inner {
position: relative; z-index: 3;
width: 100%; max-width: var(--container);
margin: 0 auto; padding: var(--space-11) var(--gutter);
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-8); align-items: center;
}
.ns-about-hero__content { animation: ns-fadein .9s ease both; }
@keyframes ns-fadein {
from { opacity:0; transform:translateY(32px); }
to   { opacity:1; transform:translateY(0);    }
}
.ns-about-hero__eyebrow {
font-size: var(--text-xs); font-weight: 600;
letter-spacing: .22em; text-transform: uppercase;
color: var(--ns-leaf-light);
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-5);
}
.ns-about-hero__eyebrow::after {
content:''; display:block; width:40px; height:1px; background:var(--ns-leaf-light);
}
.ns-about-hero__title {
font-family: var(--font-display);
font-size: clamp(48px,6.5vw,92px);
font-weight: 800; line-height: .93;
letter-spacing: -.03em; color: var(--ns-cream);
margin-bottom: var(--space-6);
}
.ns-about-hero__title em { display:block; color:var(--ns-amber-warm); font-style:italic; }
.ns-about-hero__lead {
font-size: var(--text-md); line-height: 1.8;
color: rgba(245,237,216,.80); max-width: 48ch;
margin-bottom: var(--space-7);
}
.ns-about-hero__scroll {
display: inline-flex; align-items: center; gap: var(--space-3);
font-size: var(--text-sm); font-weight: 600; letter-spacing:.05em;
color: rgba(245,237,216,.5);
text-decoration: none; transition: color .25s;
}
.ns-about-hero__scroll:hover { color: var(--ns-leaf-light); }
.ns-about-hero__scroll-arrow {
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid rgba(245,237,216,.2);
display: flex; align-items: center; justify-content: center;
animation: ns-bounce 2s ease-in-out infinite;
}
@keyframes ns-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(6px)} }

/* Hero visual: mycelium SVG ring */
.ns-about-hero__visual {
position: relative; display:flex; align-items:center; justify-content:center;
animation: ns-fadein .9s .3s ease both;
}
.ns-about-hero__ring {
width: clamp(280px,35vw,520px); height: clamp(280px,35vw,520px);
position: relative;
}
.ns-about-hero__ring-svg {
width:100%; height:100%;
animation: ns-spin-slow 40s linear infinite;
}
@keyframes ns-spin-slow { to { transform: rotate(360deg); } }
.ns-about-hero__ring-center {
position: absolute; inset: 18%;
background: radial-gradient(circle, rgba(30,74,13,.6) 0%, rgba(16,20,10,.9) 100%);
border-radius: 50%;
display: flex; flex-direction:column; align-items:center; justify-content:center;
gap: 4px;
}
.ns-about-hero__ring-icon { font-size: clamp(48px,6vw,80px); line-height: 1; }
.ns-about-hero__ring-label {
font-family: var(--font-display);
font-size: var(--text-sm); font-weight: 700; letter-spacing:.08em;
color: var(--ns-leaf-light); text-transform: uppercase;
}

/* Floating facts */
.ns-about-hero__fact {
position: absolute;
background: rgba(253,250,244,.10);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(253,250,244,.15);
border-radius: var(--radius-md);
padding: 12px 16px;
animation: ns-fadein .8s ease both;
}
.ns-about-hero__fact:nth-child(1){ top:8%;  left:-12%; animation-delay:.6s; }
.ns-about-hero__fact:nth-child(2){ bottom:12%; right:-8%; animation-delay:.9s; }
.ns-about-hero__fact:nth-child(3){ top:55%; left:-8%; animation-delay:1.1s; }
.ns-about-hero__fact-num {
font-family: var(--font-display);
font-size: 26px; font-weight: 800;
color: var(--ns-amber-warm); line-height: 1;
}
.ns-about-hero__fact-txt {
font-size: 11px; font-weight: 600; letter-spacing:.05em; text-transform:uppercase;
color: rgba(245,237,216,.65); margin-top:2px;
}

/* ── Wat zijn wellness mushrooms — intro ────────────────── */
.ns-about-what {
background: var(--ns-white);
padding: var(--section-py) var(--gutter);
}
.ns-about-what__inner {
max-width: var(--container);
margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-9); align-items: center;
}
.ns-about-what__label {
font-size: var(--text-xs); font-weight: 700;
letter-spacing: .2em; text-transform: uppercase;
color: var(--ns-leaf); margin-bottom: var(--space-4);
}
.ns-about-what__title {
font-family: var(--font-display);
font-size: var(--text-2xl); font-weight: 800;
line-height: 1.08; letter-spacing:-.015em;
color: var(--ns-forest); margin-bottom: var(--space-5);
}
.ns-about-what__title em { color: var(--ns-amber); font-style:italic; }
.ns-about-what__body {
font-size: var(--text-base); line-height: 1.85;
color: var(--ns-bark); margin-bottom: var(--space-6);
}
.ns-about-what__body + .ns-about-what__body { margin-top: -16px; }
.ns-about-what__pillars {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
.ns-about-pillar {
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-md);
padding: var(--space-5);
transition: box-shadow var(--transition), transform var(--transition);
}
.ns-about-pillar:hover {
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.ns-about-pillar__icon { font-size: 28px; margin-bottom: var(--space-3); line-height:1; }
.ns-about-pillar__title {
font-family: var(--font-display);
font-size: 15px; font-weight: 700; color: var(--ns-forest);
margin-bottom: 6px;
}
.ns-about-pillar__text { font-size: var(--text-sm); color: var(--ns-bark); line-height: 1.6; }

/* Visuele grafiek rechterzijde */
.ns-about-what__visual { position:relative; }
.ns-about-compound-card {
background: var(--ns-forest);
border-radius: var(--radius-xl);
padding: var(--space-7);
position: relative; overflow: hidden;
}
.ns-about-compound-card::before {
content:'';
position:absolute; inset:0;
background: radial-gradient(ellipse 80% 60% at 80% 20%, rgba(90,158,42,.25) 0%, transparent 60%);
}
.ns-about-compound-card__title {
font-family: var(--font-display);
font-size: var(--text-lg); font-weight: 700;
color: var(--ns-cream); margin-bottom: var(--space-6);
position: relative; z-index:1;
}
.ns-about-compound-list { display:flex; flex-direction:column; gap:var(--space-4); position:relative;z-index:1; }
.ns-about-compound {
display:flex; flex-direction:column; gap:8px;
}
.ns-about-compound__head {
display:flex; justify-content:space-between; align-items:baseline;
}
.ns-about-compound__name {
font-size: var(--text-sm); font-weight: 700; color: var(--ns-cream);
}
.ns-about-compound__pct {
font-family: var(--font-display);
font-size: var(--text-md); font-weight: 800; color: var(--ns-amber-warm);
}
.ns-about-compound__bar {
height: 6px; background: rgba(255,255,255,.12);
border-radius: var(--radius-pill); overflow: hidden;
}
.ns-about-compound__fill {
height:100%; border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--ns-leaf), var(--ns-leaf-light));
transform: scaleX(0); transform-origin: left;
transition: transform 1.2s cubic-bezier(.4,0,.2,1);
}
.ns-about-compound__fill.is-visible { transform: scaleX(1); }
.ns-about-compound__sub {
font-size: 11px; color: rgba(245,237,216,.45); font-style:italic;
}

/* ── De drie paddestoelen ───────────────────────────────── */
.ns-about-shrooms {
background: var(--ns-cream);
padding: var(--section-py) var(--gutter);
}
.ns-about-shrooms__head {
text-align: center; max-width: 680px;
margin: 0 auto var(--space-9);
}
.ns-about-shrooms__eyebrow {
font-size: var(--text-xs); font-weight: 700;
letter-spacing:.2em; text-transform:uppercase;
color: var(--ns-leaf); margin-bottom: var(--space-4);
}
.ns-about-shrooms__title {
font-family: var(--font-display);
font-size: var(--text-2xl); font-weight: 800;
color: var(--ns-forest); line-height:1.08;
letter-spacing:-.015em;
}
.ns-about-shrooms__title em { color: var(--ns-amber); font-style:italic; }

.ns-about-shrooms__grid {
max-width: var(--container); margin: 0 auto;
display: grid; grid-template-columns: repeat(3,1fr);
gap: var(--space-6);
}

/* Paddestoel kaart */
.ns-shroom-card {
background: var(--ns-white);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--transition), transform var(--transition);
display:flex; flex-direction:column;
}
.ns-shroom-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-6px);
}
.ns-shroom-card__hero {
position:relative; height:220px;
display:flex; align-items:center; justify-content:center;
overflow:hidden;
}
.ns-shroom-card--lionsmane .ns-shroom-card__hero { background: linear-gradient(135deg,#1E4A0D 0%,#2D6B1A 100%); }
.ns-shroom-card--reishi    .ns-shroom-card__hero { background: linear-gradient(135deg,#3B2510 0%,#6B3D1A 100%); }
.ns-shroom-card--cordyceps .ns-shroom-card__hero { background: linear-gradient(135deg,#0D2E4A 0%,#1A4D6B 100%); }

.ns-shroom-card__emoji {
font-size: 80px; line-height:1;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.4));
animation: ns-about-float 6s ease-in-out infinite;
}
.ns-shroom-card:nth-child(2) .ns-shroom-card__emoji { animation-delay: -2s; }
.ns-shroom-card:nth-child(3) .ns-shroom-card__emoji { animation-delay: -4s; }

.ns-shroom-card__badge {
position:absolute; top:16px; right:16px;
background: rgba(255,255,255,.15);
backdrop-filter:blur(8px);
border:1px solid rgba(255,255,255,.2);
border-radius: var(--radius-pill);
padding: 6px 12px;
font-size: 11px; font-weight: 700; letter-spacing:.06em; text-transform:uppercase;
color: #fff;
}

.ns-shroom-card__body { padding: var(--space-6); flex:1; display:flex; flex-direction:column; }
.ns-shroom-card__latin {
font-size: var(--text-xs); font-style:italic;
color: var(--ns-bark); opacity:.6;
margin-bottom: 4px;
}
.ns-shroom-card__name {
font-family: var(--font-display);
font-size: var(--text-xl); font-weight: 800;
color: var(--ns-forest); line-height:1.1;
margin-bottom: var(--space-3);
}
.ns-shroom-card__tagline {
font-size: var(--text-sm); font-weight: 600;
color: var(--ns-amber); margin-bottom: var(--space-4);
}
.ns-shroom-card__desc {
font-size: var(--text-sm); line-height:1.75;
color: var(--ns-bark); margin-bottom: var(--space-5); flex:1;
}

/* Mechanisme pills */
.ns-shroom-card__mechs {
display:flex; flex-wrap:wrap; gap:6px;
margin-bottom: var(--space-5);
}
.ns-shroom-mech {
font-size: 11px; font-weight: 600;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 5px 10px;
color: var(--ns-forest);
}

/* Studie referentie */
.ns-shroom-card__study {
display:flex; align-items:flex-start; gap:10px;
background: var(--ns-cream);
border-radius: var(--radius-md);
padding: 14px;
border-left: 3px solid var(--ns-leaf);
}
.ns-shroom-card__study-icon { font-size: 16px; flex-shrink:0; margin-top:1px; }
.ns-shroom-card__study-text {
font-size: 12px; line-height:1.6;
color: var(--ns-bark);
}
.ns-shroom-card__study-text strong { color: var(--ns-forest); display:block; margin-bottom:2px; }
.ns-shroom-card__study-link {
font-size: 11px; font-weight:700;
color: var(--ns-leaf); text-decoration:none;
display:inline-flex; align-items:center; gap:4px;
margin-top: 6px;
}
.ns-shroom-card__study-link:hover { color: var(--ns-forest); }

/* ── Wetenschap in begrijpbare taal ────────────────────── */
.ns-about-science {
background: var(--ns-forest);
padding: var(--section-py) var(--gutter);
position:relative; overflow:hidden;
}
.ns-about-science::before {
content:'';
position:absolute; inset:0;
background:
  radial-gradient(ellipse 70% 60% at 20% 30%, rgba(90,158,42,.15) 0%, transparent 55%),
  radial-gradient(ellipse 50% 70% at 80% 80%, rgba(196,117,32,.10) 0%, transparent 55%);
}
.ns-about-science__inner {
position:relative; z-index:1;
max-width: var(--container); margin:0 auto;
}
.ns-about-science__head {
text-align:center; max-width:680px;
margin: 0 auto var(--space-9);
}
.ns-about-science__eyebrow {
font-size: var(--text-xs); font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color: var(--ns-leaf-light); margin-bottom: var(--space-4);
}
.ns-about-science__title {
font-family: var(--font-display);
font-size: var(--text-2xl); font-weight:800;
color: var(--ns-cream); line-height:1.08;
}
.ns-about-science__title em { color:var(--ns-amber-warm); font-style:italic; }

/* Instituten grid */
.ns-about-institutes {
display: grid; grid-template-columns: repeat(3,1fr);
gap: var(--space-5);
}
.ns-institute-card {
background: rgba(253,250,244,.07);
border: 1px solid rgba(253,250,244,.12);
border-radius: var(--radius-xl);
padding: var(--space-7);
transition: background var(--transition), border-color var(--transition);
}
.ns-institute-card:hover {
background: rgba(253,250,244,.12);
border-color: rgba(141,198,74,.3);
}
.ns-institute-card__num {
font-family: var(--font-display);
font-size: 56px; font-weight:800; line-height:1;
color: var(--ns-amber-warm);
margin-bottom: var(--space-4);
}
.ns-institute-card__name {
font-family: var(--font-display);
font-size: var(--text-lg); font-weight:700;
color: var(--ns-cream); margin-bottom: var(--space-3);
}
.ns-institute-card__abbr {
font-size: var(--text-xs); font-weight:700;
letter-spacing:.15em; text-transform:uppercase;
color: var(--ns-leaf-light); margin-bottom: var(--space-4);
}
.ns-institute-card__desc {
font-size: var(--text-sm); line-height:1.75;
color: rgba(245,237,216,.65);
margin-bottom: var(--space-5);
}
.ns-institute-card__findings {
display:flex; flex-direction:column; gap:10px;
}
.ns-institute-finding {
display:flex; align-items:flex-start; gap:10px;
font-size: 13px; line-height:1.6;
color: rgba(245,237,216,.75);
}
.ns-institute-finding::before {
content:'✓';
color: var(--ns-leaf-light); font-weight:800;
flex-shrink:0; margin-top:1px;
}

/* ── Experts ────────────────────────────────────────────── */
.ns-about-experts {
background: var(--ns-white);
padding: var(--section-py) var(--gutter);
}
.ns-about-experts__inner { max-width: var(--container); margin:0 auto; }
.ns-about-experts__head {
display:flex; justify-content:space-between; align-items:flex-end;
margin-bottom: var(--space-8); flex-wrap:wrap; gap: var(--space-4);
}
.ns-about-experts__label {
font-size: var(--text-xs); font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color: var(--ns-leaf); margin-bottom: var(--space-3);
}
.ns-about-experts__title {
font-family: var(--font-display);
font-size: var(--text-xl); font-weight:800;
color: var(--ns-forest); line-height:1.1;
}
.ns-about-experts__title em { color:var(--ns-amber); font-style:italic; }

.ns-about-experts__grid {
display:grid; grid-template-columns: repeat(3,1fr);
gap: var(--space-5);
}
.ns-expert-card {
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: var(--space-6);
transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.ns-expert-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-4px);
border-color: var(--ns-leaf);
}
.ns-expert-card__avatar {
width: 64px; height: 64px;
border-radius: 50%;
background: var(--ns-forest);
display:flex; align-items:center; justify-content:center;
font-size: 26px; margin-bottom: var(--space-4);
border: 3px solid var(--ns-cream-dark);
}
.ns-expert-card__name {
font-family: var(--font-display);
font-size: var(--text-md); font-weight:800;
color: var(--ns-forest); margin-bottom:4px;
}
.ns-expert-card__role {
font-size: var(--text-xs); font-weight:600;
letter-spacing:.08em; text-transform:uppercase;
color: var(--ns-leaf); margin-bottom: var(--space-4);
}
.ns-expert-card__bio {
font-size: var(--text-sm); line-height:1.7;
color: var(--ns-bark);
}

/* ── Onze missie ────────────────────────────────────────── */
.ns-about-mission {
background: var(--ns-cream);
padding: var(--section-py) var(--gutter);
}
.ns-about-mission__inner {
max-width: 860px; margin: 0 auto; text-align:center;
}
.ns-about-mission__label {
font-size: var(--text-xs); font-weight:700;
letter-spacing:.2em; text-transform:uppercase;
color: var(--ns-leaf); margin-bottom: var(--space-5);
}
.ns-about-mission__quote {
font-family: var(--font-display);
font-size: clamp(26px,4vw,48px); font-weight:800;
line-height:1.15; letter-spacing:-.02em;
color: var(--ns-forest); margin-bottom: var(--space-6);
}
.ns-about-mission__quote em { color:var(--ns-amber); font-style:italic; }
.ns-about-mission__body {
font-size: var(--text-md); line-height:1.8;
color: var(--ns-bark); max-width:62ch; margin:0 auto var(--space-8);
}

/* Waarden rij */
.ns-about-values {
display:grid; grid-template-columns:repeat(4,1fr);
gap: var(--space-4); text-align:left;
margin-bottom: var(--space-8);
}
.ns-about-value {
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: var(--space-5);
}
.ns-about-value__icon { font-size: 28px; margin-bottom: var(--space-3); line-height:1; }
.ns-about-value__title {
font-family: var(--font-display);
font-size: 15px; font-weight:800;
color: var(--ns-forest); margin-bottom:6px;
}
.ns-about-value__text { font-size:13px; color:var(--ns-bark); line-height:1.6; }

.ns-about-mission__cta { display:flex; gap:var(--space-4); justify-content:center; flex-wrap:wrap; }

/* ── Disclaimer blok ────────────────────────────────────── */
.ns-about-disclaimer {
background: var(--ns-white);
padding: var(--space-9) var(--gutter);
}
.ns-about-disclaimer__inner {
max-width: 860px; margin:0 auto;
background: rgba(196,117,32,.08);
border:1px solid rgba(196,117,32,.20);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-7);
display:flex; gap: var(--space-5); align-items:flex-start;
}
.ns-about-disclaimer__icon { font-size:28px; flex-shrink:0; margin-top:2px; }
.ns-about-disclaimer__text { font-size:var(--text-sm); color:var(--ns-bark); line-height:1.75; }
.ns-about-disclaimer__text strong { color:var(--ns-amber); display:block; font-size:var(--text-base); margin-bottom:6px; }
.ns-about-disclaimer__text a { color:var(--ns-forest); font-weight:600; text-decoration:underline; text-underline-offset:3px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width:1024px) {
.ns-about-hero__inner   { grid-template-columns:1fr; gap:var(--space-8); text-align:center; }
.ns-about-hero__eyebrow { justify-content:center; }
.ns-about-hero__lead    { max-width:100%; }
.ns-about-hero__visual  { order:-1; }
.ns-about-hero__fact:nth-child(1){ left:0; }
.ns-about-hero__fact:nth-child(3){ left:0; }

.ns-about-what__inner       { grid-template-columns:1fr; }
.ns-about-shrooms__grid     { grid-template-columns:1fr 1fr; }
.ns-about-institutes        { grid-template-columns:1fr; }
.ns-about-experts__grid     { grid-template-columns:1fr 1fr; }
.ns-about-values            { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
.ns-about-shrooms__grid   { grid-template-columns:1fr; }
.ns-about-experts__grid   { grid-template-columns:1fr; }
.ns-about-values          { grid-template-columns:1fr 1fr; }
.ns-about-what__pillars   { grid-template-columns:1fr; }
.ns-about-hero__fact      { display:none; }
.ns-about-disclaimer__inner{ flex-direction:column; gap:var(--space-4); }
}
@media (max-width:480px) {
.ns-about-values { grid-template-columns:1fr; }
.ns-about-mission__cta { flex-direction:column; align-items:center; }
}

/* ═══════════════════════════════════════════════════════════
 BLOG PAGINA — page-blog.php
 Toevoegen onderaan site.css
═══════════════════════════════════════════════════════════ */

/* ── 1. HERO ────────────────────────────────────────────── */
.ns-blog-hero {
position: relative;
min-height: 56vh;
display: flex;
align-items: center;
overflow: hidden;
background: var(--ns-forest);
padding-top: 72px;   /* ruimte voor fixed header */
}

.ns-blog-hero__canvas {
position: absolute;
inset: 0;
z-index: 0;
background:
  radial-gradient(ellipse 80% 70% at 70% 60%, rgba(90,158,42,.22) 0%, transparent 60%),
  radial-gradient(ellipse 50% 80% at 10% 90%, rgba(196,117,32,.12) 0%, transparent 55%),
  radial-gradient(ellipse 55% 45% at 90% 5%,  rgba(45,107,26,.30) 0%, transparent 50%);
}

/* Drijvende sporen — geleend patroon van ns-about-hero */
.ns-blog-hero__spore {
position: absolute;
border-radius: 50%;
background: rgba(141,198,74,.07);
animation: ns-blog-float 10s ease-in-out infinite;
pointer-events: none;
}
.ns-blog-hero__spore:nth-child(2) { width: 340px; height: 340px; top: -90px;   right: 5%;    animation-delay: 0s;   }
.ns-blog-hero__spore:nth-child(3) { width: 180px; height: 180px; bottom: 5%;   left: 2%;     animation-delay: -4s;  }
.ns-blog-hero__spore:nth-child(4) { width: 80px;  height: 80px;  top: 40%;     right: 24%;   animation-delay: -7s;  }

@keyframes ns-blog-float {
0%, 100% { transform: translateY(0) scale(1); }
50%       { transform: translateY(-22px) scale(1.04); }
}

.ns-blog-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: var(--space-9) var(--gutter) var(--space-10);
animation: ns-fadein .85s ease both;   /* keyframes al in site.css (over-ons) */
}

.ns-blog-hero__eyebrow {
font-size: var(--text-xs);
font-weight: 600;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--ns-leaf-light);
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.ns-blog-hero__eyebrow::after {
content: '';
display: block;
width: 40px;
height: 1px;
background: var(--ns-leaf-light);
}

.ns-blog-hero__title {
font-family: var(--font-display);
font-size: clamp(42px, 6vw, 80px);
font-weight: 800;
line-height: .95;
letter-spacing: -.03em;
color: var(--ns-cream);
margin-bottom: var(--space-6);
}
.ns-blog-hero__title em {
color: var(--ns-amber-warm);
font-style: italic;
}

.ns-blog-hero__lead {
font-size: var(--text-md);
line-height: 1.8;
color: rgba(245,237,216,.78);
max-width: 58ch;
}

/* ── 2. CATEGORIE FILTER ─────────────────────────────────── */
.ns-blog-filter {
background: var(--ns-white);
border-bottom: 1px solid var(--ns-cream-dark);
position: sticky;
top: 72px;
z-index: 80;
box-shadow: var(--shadow-sm);
}

.ns-blog-filter__inner {
max-width: var(--container);
margin: 0 auto;
padding: var(--space-4) var(--gutter);
display: flex;
align-items: center;
gap: var(--space-5);
overflow-x: auto;
scrollbar-width: none;
}
.ns-blog-filter__inner::-webkit-scrollbar { display: none; }

.ns-blog-filter__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-bark);
flex-shrink: 0;
}

.ns-blog-filter__pills {
display: flex;
gap: var(--space-2);
flex-wrap: nowrap;
}

.ns-blog-filter__pill {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-bark);
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 7px 16px;
white-space: nowrap;
text-decoration: none;
transition: all var(--transition);
}
.ns-blog-filter__pill:hover {
color: var(--ns-forest);
border-color: var(--ns-leaf);
background: rgba(90,158,42,.08);
}
.ns-blog-filter__pill--active {
background: var(--ns-forest);
color: var(--ns-cream);
border-color: var(--ns-forest);
}
.ns-blog-filter__pill--active:hover {
background: var(--ns-forest-mid);
color: var(--ns-cream);
border-color: var(--ns-forest-mid);
}

.ns-blog-filter__count {
font-size: 11px;
font-weight: 700;
background: rgba(255,255,255,.25);
color: inherit;
border-radius: var(--radius-pill);
padding: 1px 7px;
line-height: 1.5;
}
.ns-blog-filter__pill--active .ns-blog-filter__count {
background: rgba(255,255,255,.20);
}

/* ── 3. FEATURED POST ────────────────────────────────────── */
.ns-blog-featured {
background: var(--ns-white);
padding: var(--space-10) var(--gutter) var(--space-7);
}

.ns-blog-featured__inner {
max-width: var(--container);
margin: 0 auto;
}

.ns-blog-featured__card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-xl);
overflow: hidden;
transition: box-shadow var(--transition);
}
.ns-blog-featured__card:hover {
box-shadow: var(--shadow-lg);
}

/* Afbeelding */
.ns-blog-featured__image-wrap {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 10;
background: var(--ns-forest);
}
.ns-blog-featured__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.ns-blog-featured__card:hover .ns-blog-featured__image {
transform: scale(1.04);
}
.ns-blog-featured__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 72px;
background: linear-gradient(135deg, var(--ns-forest) 0%, var(--ns-forest-mid) 100%);
}

.ns-blog-featured__badge {
position: absolute;
top: var(--space-4);
left: var(--space-4);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-cream);
background: var(--ns-amber);
border-radius: var(--radius-pill);
padding: 5px 14px;
box-shadow: 0 2px 10px rgba(196,117,32,.40);
}

/* Body */
.ns-blog-featured__body {
padding: var(--space-8) var(--space-8) var(--space-8) 0;
display: flex;
flex-direction: column;
gap: var(--space-4);
}

.ns-blog-featured__tag {
display: inline-flex;
align-items: center;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-leaf);
text-decoration: none;
gap: 6px;
transition: color var(--transition);
width: fit-content;
}
.ns-blog-featured__tag::before {
content: '';
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ns-leaf);
flex-shrink: 0;
}
.ns-blog-featured__tag:hover { color: var(--ns-forest); }

.ns-blog-featured__title {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--ns-forest);
}
.ns-blog-featured__title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.ns-blog-featured__title a:hover { color: var(--ns-forest-mid); }

.ns-blog-featured__excerpt {
font-size: var(--text-base);
line-height: 1.75;
color: var(--ns-bark);
}

.ns-blog-featured__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: var(--space-3);
flex-wrap: wrap;
}

.ns-blog-featured__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
color: var(--ns-bark);
}
.ns-blog-featured__meta-author { font-weight: 600; color: var(--ns-soil); }
.ns-blog-featured__meta-dot    { opacity: .4; }

.ns-blog-featured__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: 700;
color: var(--ns-forest);
text-decoration: none;
letter-spacing: .02em;
transition: gap var(--transition), color var(--transition);
}
.ns-blog-featured__link:hover {
gap: 12px;
color: var(--ns-forest-mid);
}

/* ── 4. BLOG GRID ────────────────────────────────────────── */
.ns-blog-articles {
/* inherits ns-section + ns-section--cream padding */
}

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

/* Blog card */
.ns-blog-card {
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.ns-blog-card:hover {
box-shadow: var(--shadow-md);
transform: translateY(-5px);
border-color: var(--ns-leaf);
}

/* Afbeelding */
.ns-blog-card__image-wrap {
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--ns-forest);
flex-shrink: 0;
}
.ns-blog-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.ns-blog-card:hover .ns-blog-card__image {
transform: scale(1.06);
}
.ns-blog-card__image-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 48px;
background: linear-gradient(135deg, var(--ns-forest) 0%, var(--ns-forest-mid) 100%);
}

/* Body */
.ns-blog-card__body {
padding: var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-3);
flex: 1;
}

.ns-blog-card__meta-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}

.ns-blog-card__tag {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-leaf);
text-decoration: none;
transition: color var(--transition);
}
.ns-blog-card__tag:hover { color: var(--ns-forest); }

.ns-blog-card__readtime {
font-size: 11px;
font-weight: 600;
color: var(--ns-bark);
opacity: .65;
white-space: nowrap;
}

.ns-blog-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 800;
line-height: 1.2;
letter-spacing: -.01em;
color: var(--ns-forest);
}
.ns-blog-card__title a {
color: inherit;
text-decoration: none;
transition: color var(--transition);
}
.ns-blog-card__title a:hover { color: var(--ns-forest-mid); }

.ns-blog-card__excerpt {
font-size: var(--text-sm);
line-height: 1.75;
color: var(--ns-bark);
flex: 1;
}

/* Footer: auteur + pijl */
.ns-blog-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--ns-cream-dark);
margin-top: auto;
}

.ns-blog-card__author {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}

.ns-blog-card__avatar {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ns-forest);
color: var(--ns-cream);
font-family: var(--font-display);
font-weight: 800;
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 2px solid var(--ns-cream-dark);
}

.ns-blog-card__author-info {
display: flex;
flex-direction: column;
gap: 1px;
min-width: 0;
}
.ns-blog-card__author-name {
font-size: 12px;
font-weight: 700;
color: var(--ns-soil);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ns-blog-card__date {
font-size: 11px;
color: var(--ns-bark);
opacity: .7;
}

.ns-blog-card__link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
color: var(--ns-forest);
text-decoration: none;
flex-shrink: 0;
transition: all var(--transition);
}
.ns-blog-card__link:hover {
background: var(--ns-forest);
color: var(--ns-cream);
border-color: var(--ns-forest);
transform: translateX(3px);
}

/* ── 5. PAGINERING ───────────────────────────────────────── */
.ns-blog-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
flex-wrap: wrap;
margin-top: var(--space-9);
}

/* WP paginate_links maakt .page-numbers; we hernoemen naar ns-blog-pagination__item in PHP */
.ns-blog-pagination__item,
.ns-blog-pagination a,
.ns-blog-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 14px;
border-radius: var(--radius-pill);
font-size: var(--text-sm);
font-weight: 600;
font-family: var(--font-body);
text-decoration: none;
border: 1px solid var(--ns-cream-dark);
color: var(--ns-bark);
background: var(--ns-white);
transition: all var(--transition);
}

.ns-blog-pagination a:hover {
background: var(--ns-cream);
border-color: var(--ns-leaf);
color: var(--ns-forest);
}

.ns-blog-pagination .current,
.ns-blog-pagination__item.current {
background: var(--ns-forest);
color: var(--ns-cream);
border-color: var(--ns-forest);
}

.ns-blog-pagination .dots {
border: none;
background: none;
color: var(--ns-bark);
min-width: auto;
}

/* ── 6. LEGE STATE ───────────────────────────────────────── */
.ns-blog-empty {
text-align: center;
padding: var(--space-11) var(--gutter);
max-width: 480px;
margin: 0 auto;
}
.ns-blog-empty__icon {
font-size: 72px;
margin-bottom: var(--space-5);
line-height: 1;
}
.ns-blog-empty__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--ns-forest);
margin-bottom: var(--space-4);
}
.ns-blog-empty__text {
font-size: var(--text-base);
line-height: 1.75;
color: var(--ns-bark);
margin-bottom: var(--space-6);
}

/* ── 7. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
.ns-blog-hero__title { font-size: clamp(36px, 5.5vw, 64px); }
.ns-blog-featured__card { grid-template-columns: 1fr; }
.ns-blog-featured__body { padding: var(--space-6); }
.ns-blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
.ns-blog-hero { min-height: 46vh; }
.ns-blog-hero__lead { font-size: var(--text-base); }
.ns-blog-filter { top: 60px; }
.ns-blog-featured { padding-left: 0; padding-right: 0; padding-top: var(--space-8); }
.ns-blog-featured__badge { top: var(--space-3); left: var(--space-3); }
.ns-blog-featured__footer { flex-direction: column; align-items: flex-start; }
.ns-blog-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
.ns-blog-hero__inner { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.ns-blog-filter__label { display: none; }
.ns-blog-pagination__item,
.ns-blog-pagination a,
.ns-blog-pagination span { min-width: 40px; height: 40px; font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════
 SINGLE POST — single.php
 Toevoegen onderaan site.css (na blog-sectie)
═══════════════════════════════════════════════════════════ */

/* ── 1. POST HERO ────────────────────────────────────────── */
.ns-post-hero {
position: relative;
min-height: 52vh;
display: flex;
align-items: flex-end;
overflow: hidden;
background: var(--ns-forest);
padding-top: 72px;
}

.ns-post-hero__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.ns-post-hero__bg img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
}
.ns-post-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
  to bottom,
  rgba(30,74,13,.45) 0%,
  rgba(16,13,8,.82)  100%
);
}
.ns-post-hero__bg--gradient {
background:
  radial-gradient(ellipse 80% 70% at 70% 55%, rgba(90,158,42,.22) 0%, transparent 60%),
  radial-gradient(ellipse 50% 80% at 10% 90%, rgba(196,117,32,.12) 0%, transparent 55%),
  var(--ns-forest);
}

.ns-post-hero__inner {
position: relative;
z-index: 1;
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: var(--space-8) var(--gutter) var(--space-9);
animation: ns-fadein .85s ease both;
}

/* Breadcrumb */
.ns-post-hero__breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
color: rgba(245,237,216,.60);
margin-bottom: var(--space-5);
flex-wrap: wrap;
}
.ns-post-hero__breadcrumb a {
color: rgba(245,237,216,.70);
text-decoration: none;
transition: color var(--transition);
}
.ns-post-hero__breadcrumb a:hover { color: var(--ns-cream); }

/* Categorie tag */
.ns-post-hero__cat {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ns-cream);
background: rgba(196,117,32,.85);
border-radius: var(--radius-pill);
padding: 5px 16px;
text-decoration: none;
margin-bottom: var(--space-5);
transition: background var(--transition);
}
.ns-post-hero__cat:hover { background: var(--ns-amber); color: var(--ns-cream); }

/* Titel */
.ns-post-hero__title {
font-family: var(--font-display);
font-size: clamp(30px, 5vw, 62px);
font-weight: 800;
line-height: 1.05;
letter-spacing: -.025em;
color: var(--ns-cream);
max-width: 22ch;
margin-bottom: var(--space-7);
}
.ns-post-hero__title em { color: var(--ns-amber-warm); font-style: italic; }

/* Meta bar */
.ns-post-hero__meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
flex-wrap: wrap;
}

.ns-post-hero__meta-author {
display: flex;
align-items: center;
gap: 12px;
}

.ns-post-hero__meta-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--ns-forest-mid);
border: 2px solid rgba(141,198,74,.4);
color: var(--ns-cream);
font-family: var(--font-display);
font-weight: 800;
font-size: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.ns-post-hero__meta-info {
display: flex;
flex-direction: column;
gap: 2px;
}
.ns-post-hero__meta-name {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ns-cream);
text-decoration: none;
transition: color var(--transition);
}
.ns-post-hero__meta-name:hover { color: var(--ns-leaf-light); }
.ns-post-hero__meta-details {
font-size: 12px;
color: rgba(245,237,216,.65);
display: flex;
align-items: center;
gap: 6px;
}

/* Share knoppen in hero */
.ns-post-hero__share {
display: flex;
align-items: center;
gap: 8px;
}

.ns-post-share-btn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background: rgba(245,237,216,.12);
border: 1px solid rgba(245,237,216,.20);
color: var(--ns-cream);
text-decoration: none;
cursor: pointer;
transition: all var(--transition);
backdrop-filter: blur(6px);
}
.ns-post-share-btn:hover {
background: rgba(245,237,216,.22);
border-color: rgba(245,237,216,.40);
color: var(--ns-cream);
transform: translateY(-2px);
}
.ns-post-share-btn--copy { border: none; outline: none; }
.ns-post-share-btn--copy:focus-visible {
outline: 2px solid var(--ns-leaf-light);
outline-offset: 2px;
}

/* ── 2. ARTIKEL LAYOUT ───────────────────────────────────── */
.ns-post-layout {
background: var(--ns-white);
padding: var(--space-10) 0;
}

.ns-post-layout__inner {
max-width: var(--container);
margin: 0 auto;
padding: 0 var(--gutter);
display: grid;
grid-template-columns: 1fr 360px;
gap: var(--space-9);
align-items: start;
}

/* ── 3. ARTIKEL CONTENT ──────────────────────────────────── */
.ns-post-article {
min-width: 0; /* Voorkomt overflow bij lange woorden */
}

.ns-post-article__hero-img {
margin-bottom: var(--space-8);
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
}
.ns-post-article__hero-img-el {
width: 100%;
height: 100%;
object-fit: cover;
}

/* ─ Typografie: WP artikel content ──────────────────────── */
.ns-post-content {
font-family: var(--font-body);
font-size: var(--text-md);
line-height: 1.85;
color: var(--ns-text);
max-width: 70ch;
}

.ns-post-content p {
margin-bottom: var(--space-5);
color: var(--ns-bark);
}
.ns-post-content p:last-child { margin-bottom: 0; }

.ns-post-content h2 {
font-family: var(--font-display);
font-size: clamp(22px, 2.8vw, 32px);
font-weight: 800;
line-height: 1.1;
letter-spacing: -.02em;
color: var(--ns-forest);
margin: var(--space-9) 0 var(--space-4);
padding-top: var(--space-6);
border-top: 2px solid var(--ns-cream-dark);
}
.ns-post-content h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }

.ns-post-content h3 {
font-family: var(--font-display);
font-size: clamp(18px, 2.2vw, 24px);
font-weight: 700;
line-height: 1.2;
color: var(--ns-forest);
margin: var(--space-7) 0 var(--space-3);
}

.ns-post-content h4 {
font-family: var(--font-body);
font-size: var(--text-md);
font-weight: 700;
color: var(--ns-forest);
margin: var(--space-6) 0 var(--space-3);
}

.ns-post-content h2 em,
.ns-post-content h3 em { color: var(--ns-amber); font-style: italic; }

.ns-post-content strong { color: var(--ns-soil); font-weight: 700; }
.ns-post-content em     { color: var(--ns-bark); font-style: italic; }

/* Links in content */
.ns-post-content a {
color: var(--ns-forest);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
font-weight: 600;
transition: color var(--transition), text-decoration-color var(--transition);
}
.ns-post-content a:hover { color: var(--ns-forest-mid); }

/* Lijsten */
.ns-post-content ul,
.ns-post-content ol {
margin: var(--space-5) 0;
padding-left: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ns-post-content ul { list-style: none; }
.ns-post-content ul li {
position: relative;
padding-left: var(--space-4);
color: var(--ns-bark);
}
.ns-post-content ul li::before {
content: '';
position: absolute;
left: 0;
top: .65em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--ns-leaf);
flex-shrink: 0;
}
.ns-post-content ol {
list-style: decimal;
padding-left: var(--space-6);
}
.ns-post-content ol li { color: var(--ns-bark); }

/* Blockquote */
.ns-post-content blockquote {
margin: var(--space-7) 0;
padding: var(--space-5) var(--space-6);
background: var(--ns-cream);
border-left: 4px solid var(--ns-amber);
border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.ns-post-content blockquote p {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
line-height: 1.45;
color: var(--ns-forest);
margin-bottom: var(--space-3);
font-style: italic;
}
.ns-post-content blockquote p:last-child { margin-bottom: 0; }
.ns-post-content blockquote cite {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-amber);
font-style: normal;
display: block;
margin-top: var(--space-3);
}

/* Afbeeldingen */
.ns-post-content img {
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
margin: var(--space-6) 0;
width: 100%;
height: auto;
}
.ns-post-content figure {
margin: var(--space-7) 0;
}
.ns-post-content figcaption {
font-size: var(--text-sm);
color: var(--ns-bark);
opacity: .75;
text-align: center;
margin-top: var(--space-2);
font-style: italic;
}

/* Code */
.ns-post-content code {
font-family: 'Fira Code', 'Courier New', monospace;
font-size: 0.88em;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: 5px;
padding: 2px 7px;
color: var(--ns-forest);
}
.ns-post-content pre {
background: var(--ns-soil);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
overflow-x: auto;
margin: var(--space-6) 0;
}
.ns-post-content pre code {
background: none;
border: none;
padding: 0;
color: var(--ns-cream);
font-size: var(--text-sm);
border-radius: 0;
}

/* Tabel */
.ns-post-content table {
width: 100%;
border-collapse: collapse;
margin: var(--space-7) 0;
font-size: var(--text-sm);
}
.ns-post-content th,
.ns-post-content td {
padding: 10px 14px;
text-align: left;
border-bottom: 1px solid var(--ns-cream-dark);
}
.ns-post-content th {
font-weight: 700;
color: var(--ns-forest);
background: var(--ns-cream);
font-size: var(--text-xs);
letter-spacing: .08em;
text-transform: uppercase;
}
.ns-post-content tr:last-child td { border-bottom: none; }
.ns-post-content tr:nth-child(even) td { background: rgba(245,237,216,.35); }

/* Horizontale lijn */
.ns-post-content hr {
border: none;
border-top: 2px solid var(--ns-cream-dark);
margin: var(--space-8) 0;
}

/* Callout box (class toevoegen in editor) */
.ns-post-content .callout,
.ns-post-content .wp-block-info {
background: rgba(90,158,42,.08);
border: 1px solid rgba(90,158,42,.25);
border-left: 4px solid var(--ns-leaf);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
margin: var(--space-6) 0;
font-size: var(--text-base);
color: var(--ns-bark);
}

/* Paginanavigatie (multi-page posts) */
.ns-post-page-links {
display: flex;
align-items: center;
gap: 8px;
margin: var(--space-7) 0;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-bark);
flex-wrap: wrap;
}
.ns-post-page-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
border-radius: var(--radius-pill);
border: 1px solid var(--ns-cream-dark);
background: var(--ns-white);
color: var(--ns-bark);
text-decoration: none;
padding: 0 10px;
transition: all var(--transition);
}
.ns-post-page-link:hover,
.ns-post-page-link.current {
background: var(--ns-forest);
color: var(--ns-cream);
border-color: var(--ns-forest);
}

/* ── 4. POST FOOTER (tags + share) ──────────────────────── */
.ns-post-article__footer {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding-top: var(--space-7);
margin-top: var(--space-7);
border-top: 2px solid var(--ns-cream-dark);
}

/* Tags */
.ns-post-tags {
display: flex;
align-items: center;
gap: var(--space-2);
flex-wrap: wrap;
}
.ns-post-tags__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .7;
}
.ns-post-tags__item {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-forest);
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 4px 13px;
text-decoration: none;
transition: all var(--transition);
}
.ns-post-tags__item:hover {
background: var(--ns-forest);
color: var(--ns-cream);
border-color: var(--ns-forest);
}

/* Share (footer) */
.ns-post-share {
display: flex;
align-items: center;
gap: var(--space-3);
flex-wrap: wrap;
}
.ns-post-share__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .7;
}
.ns-post-share-btn--labeled {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-bark);
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-pill);
padding: 7px 16px;
text-decoration: none;
width: auto;
height: auto;
transition: all var(--transition);
}
.ns-post-share-btn--labeled:hover {
color: var(--ns-forest);
border-color: var(--ns-leaf);
background: rgba(90,158,42,.08);
transform: none;
}

/* ── 5. AUTEUR BIO ───────────────────────────────────────── */
.ns-post-author {
display: flex;
gap: var(--space-5);
align-items: flex-start;
background: var(--ns-cream);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-top: var(--space-7);
}

.ns-post-author__avatar {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--ns-forest);
color: var(--ns-cream);
font-family: var(--font-display);
font-weight: 800;
font-size: 26px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
border: 3px solid var(--ns-cream-dark);
}

.ns-post-author__body {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ns-post-author__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-leaf);
}
.ns-post-author__name {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 800;
color: var(--ns-forest);
text-decoration: none;
transition: color var(--transition);
}
.ns-post-author__name:hover { color: var(--ns-forest-mid); }
.ns-post-author__bio {
font-size: var(--text-sm);
line-height: 1.75;
color: var(--ns-bark);
}

/* ── 6. DISCLAIMER ───────────────────────────────────────── */
.ns-post-disclaimer {
display: flex;
gap: var(--space-4);
align-items: flex-start;
background: rgba(196,117,32,.07);
border: 1px solid rgba(196,117,32,.18);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
margin-top: var(--space-6);
}
.ns-post-disclaimer__icon {
font-size: 22px;
flex-shrink: 0;
margin-top: 1px;
line-height: 1;
}
.ns-post-disclaimer__text {
font-size: var(--text-sm);
line-height: 1.75;
color: var(--ns-bark);
}
.ns-post-disclaimer__text strong {
color: var(--ns-amber);
display: inline;
font-size: inherit;
}

/* ── 7. POST NAVIGATIE ───────────────────────────────────── */
.ns-post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
margin-top: var(--space-7);
}

.ns-post-nav__item {
display: flex;
flex-direction: column;
gap: 6px;
padding: var(--space-5);
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition);
}
.ns-post-nav__item:hover {
border-color: var(--ns-leaf);
box-shadow: var(--shadow-sm);
transform: translateY(-2px);
}
.ns-post-nav__item--next { text-align: right; }

.ns-post-nav__direction {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-leaf);
}
.ns-post-nav__item--next .ns-post-nav__direction { justify-content: flex-end; }
.ns-post-nav__title {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: 700;
color: var(--ns-forest);
line-height: 1.35;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

/* ── 8. SIDEBAR ──────────────────────────────────────────── */
.ns-post-sidebar {
position: relative;
}
.ns-post-sidebar__inner {
display: flex;
flex-direction: column;
gap: var(--space-5);
/* Sticky gedrag via JS — transform gebruiken i.p.v. position:sticky
   zodat het werkt ongeacht parent overflow */
will-change: transform;
}

/* Terug-link */
.ns-post-sidebar__back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-bark);
text-decoration: none;
transition: color var(--transition), gap var(--transition);
}
.ns-post-sidebar__back:hover { color: var(--ns-forest); gap: 12px; }

/* Categorie info */
.ns-post-sidebar__cat {
border-top: 1px solid var(--ns-cream-dark);
padding-top: var(--space-4);
}
.ns-post-sidebar__cat-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .65;
margin-bottom: 6px;
}
.ns-post-sidebar__cat-link {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 700;
color: var(--ns-forest);
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
transition: color var(--transition);
}
.ns-post-sidebar__cat-link:hover { color: var(--ns-forest-mid); }
.ns-post-sidebar__cat-link span {
font-size: var(--text-sm);
font-weight: 400;
color: var(--ns-bark);
font-family: var(--font-body);
}

/* ── 9. PRODUCT WIDGET ───────────────────────────────────── */
.ns-post-product-widget {
background: var(--ns-white);
border: 1px solid var(--ns-cream-dark);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-md);
}

.ns-post-product-widget__img-wrap {
position: relative;
background: linear-gradient(135deg, var(--ns-forest) 0%, var(--ns-forest-mid) 100%);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
overflow: hidden;
}
.ns-post-product-widget__img {
width: 160px;
height: 160px;
object-fit: contain;
position: relative;
z-index: 1;
margin: 0 auto;
filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));
}
.ns-post-product-widget__glow {
position: absolute;
inset: 0;
background:
  radial-gradient(ellipse 70% 60% at 50% 50%, rgba(141,198,74,.20) 0%, transparent 65%),
  radial-gradient(ellipse 50% 50% at 80% 80%, rgba(196,117,32,.15) 0%, transparent 55%);
}

.ns-post-product-widget__body {
padding: var(--space-6);
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.ns-post-product-widget__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ns-leaf);
}
.ns-post-product-widget__name {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 800;
color: var(--ns-forest);
line-height: 1.1;
}
.ns-post-product-widget__desc {
font-size: var(--text-sm);
color: var(--ns-bark);
line-height: 1.55;
}
.ns-post-product-widget__stars {
font-size: var(--text-sm);
color: var(--ns-amber);
font-weight: 700;
display: flex;
align-items: center;
gap: 5px;
}
.ns-post-product-widget__stars span {
color: var(--ns-soil);
font-weight: 700;
}
.ns-post-product-widget__stars em {
color: var(--ns-bark);
font-style: normal;
font-weight: 400;
font-size: 12px;
}
.ns-post-product-widget__price {
display: flex;
align-items: baseline;
gap: 6px;
}
.ns-post-product-widget__price-val {
font-family: var(--font-display);
font-size: clamp(22px, 2.5vw, 28px);
font-weight: 800;
color: var(--ns-forest);
line-height: 1;
}
.ns-post-product-widget__price-sub {
font-size: var(--text-sm);
color: var(--ns-bark);
}
.ns-post-product-widget__guarantee {
font-size: 11px;
color: var(--ns-bark);
text-align: center;
opacity: .75;
}

/* ── 10. GERELATEERDE POSTS ──────────────────────────────── */
.ns-post-related-head {
margin-bottom: var(--space-8);
}

.ns-post-related-cta {
display: flex;
justify-content: center;
margin-top: var(--space-8);
}

/* ── 11. RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 1200px) {
.ns-post-layout__inner { grid-template-columns: 1fr 300px; }
}

@media (max-width: 1024px) {
.ns-post-layout__inner {
  grid-template-columns: 1fr;
  max-width: var(--container-tight);
}
.ns-post-sidebar { order: -1; }  /* Sidebar boven artikel op tablet */
.ns-post-sidebar__inner { transform: none !important; } /* Geen sticky JS op mobiel */
.ns-post-product-widget { max-width: 500px; }
}

@media (max-width: 768px) {
.ns-post-hero { min-height: 44vh; }
.ns-post-hero__title { font-size: clamp(26px, 5.5vw, 46px); }
.ns-post-hero__meta { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.ns-post-hero__share { display: none; } /* share zit ook in footer */
.ns-post-content { font-size: var(--text-base); }
.ns-post-content h2 { font-size: clamp(20px, 4vw, 26px); }
.ns-post-nav { grid-template-columns: 1fr; }
.ns-post-nav__item--next { text-align: left; }
.ns-post-nav__item--next .ns-post-nav__direction { justify-content: flex-start; }
.ns-post-author { flex-direction: column; gap: var(--space-4); }
}

@media (max-width: 480px) {
.ns-post-content blockquote p { font-size: var(--text-base); }
.ns-post-article__footer { gap: var(--space-4); }
.ns-post-share { flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════════
 NEUROSHROOM — WOOCOMMERCE-MYACCOUNT.CSS
 My Account · Dashboard · Bestellingen · Adressen · Inloggen
 Versie 2.0 · 2026
 ═══════════════════════════════════════════════════════════════
 Afhankelijkheid: site.css (design tokens :root)
 Templates: woocommerce/myaccount/*.php
 Enqueue: wp_enqueue_style('ns-myaccount', ...)
 ═══════════════════════════════════════════════════════════════

 INHOUDSOPGAVE
 1.  PAGINA WRAPPER & LAYOUT
 2.  NAVIGATIE
 3.  GEDEELDE SECTION HEADER
 4.  DASHBOARD
 5.  BESTELLINGEN — LIJST
 6.  BESTELLING — DETAIL
 7.  DOWNLOADS
 8.  ADRESSEN — OVERZICHT
 9.  FORMULIER (gedeeld: adres + account)
 10. INLOGGEN / REGISTREREN
 11. BUTTONS (ns-btn)
 12. ORDER STATUS BADGES
 13. NOTICES
 14. WOOCOMMERCE FORM FIELD OVERRIDES
 15. RESPONSIVE
 ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
 1. PAGINA WRAPPER & LAYOUT
───────────────────────────────────────────────────────────────── */

/* Page title verbergen — Hello Elementor */
.woocommerce-account .entry-title,
.woocommerce-account h1.entry-title,
.woocommerce-account .page-title {
display: none;
}

.ns-account-page {
padding-top: clamp(48px, 7vw, 96px);
padding-bottom: clamp(64px, 9vw, 128px);
padding-left: var(--gutter);
padding-right: var(--gutter);
background: var(--ns-bg);
min-height: 65vh;
max-width: 100%;
box-sizing: border-box;
}

/* Elementor / WC: voorkom horizontale scroll op smalle schermen */
body.woocommerce-account .site-main,
body.woocommerce-account .site-content,
body.woocommerce-account .entry-content,
body.woocommerce-account .entry-content > .elementor,
body.woocommerce-account .elementor-widget-wrap,
body.woocommerce-account .elementor-widget-container,
body.woocommerce-account .e-con,
body.woocommerce-account .e-con-inner {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.woocommerce-account .woocommerce-MyAccount-content {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

.ns-account-layout {
display: grid;
grid-template-columns: 260px 1fr;
gap: var(--space-8);
align-items: start;
}

.ns-account-content {
min-width: 0; /* grid bleed voorkomen */
}


/* ─────────────────────────────────────────────────────────────
 2. NAVIGATIE
───────────────────────────────────────────────────────────────── */

.ns-account-nav {
position: sticky;
top: 110px;
}

.ns-account-nav__inner {
/* wrapper uit navigation.php */
}

.ns-account-nav__list {
list-style: none;
margin: 0;
padding: 0;
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-sm);
}

.ns-account-nav__item {
border-bottom: 1px solid var(--ns-border);
}
.ns-account-nav__item:last-child { border-bottom: none; }

.ns-account-nav__link {
display: flex;
align-items: center;
gap: var(--space-3);
padding: 14px var(--space-5);
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-soil);
text-decoration: none;
transition: background var(--transition), color var(--transition);
}

.ns-account-nav__link:hover {
background: var(--ns-cream);
color: var(--ns-forest);
}

.ns-account-nav__icon {
font-size: 16px;
line-height: 1;
flex-shrink: 0;
}

/* Actieve staat — WC voegt is-active toe aan <li> */
.ns-account-nav__item.is-active .ns-account-nav__link,
.ns-account-nav__item.woocommerce-MyAccount-navigation-link--active .ns-account-nav__link {
background: var(--ns-forest);
color: var(--ns-cream);
}
.ns-account-nav__item.is-active .ns-account-nav__link:hover {
background: var(--ns-forest-mid);
}

/* Uitloggen */
.ns-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .ns-account-nav__link {
color: var(--ns-amber);
}
.ns-account-nav__item.woocommerce-MyAccount-navigation-link--customer-logout .ns-account-nav__link:hover {
background: rgba(196,117,32,.07);
color: var(--ns-amber-warm);
}


/* ─────────────────────────────────────────────────────────────
 3. GEDEELDE SECTION HELPERS
───────────────────────────────────────────────────────────────── */

/* Terug-link — gebruikt in order detail & adresformulier */
.ns-order-view__back,
.ns-edit-address__back {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-bark);
text-decoration: none;
margin-bottom: var(--space-6);
transition: color var(--transition), gap var(--transition);
}
.ns-order-view__back:hover,
.ns-edit-address__back:hover {
color: var(--ns-forest);
gap: 12px;
}


/* ─────────────────────────────────────────────────────────────
 4. DASHBOARD
───────────────────────────────────────────────────────────────── */

.ns-dashboard {
display: flex;
flex-direction: column;
gap: var(--space-6);
}

/* Welkomst banner */
.ns-dashboard-welcome {
position: relative;
background: linear-gradient(140deg, var(--ns-forest) 0%, var(--ns-forest-mid) 100%);
border-radius: var(--radius-xl);
padding: var(--space-7) var(--space-8);
overflow: hidden;
color: var(--ns-cream);
}

.ns-dashboard-welcome__glow {
position: absolute;
inset: 0;
background:
  radial-gradient(ellipse 60% 80% at 90% 30%, rgba(141,198,74,.18) 0%, transparent 65%),
  radial-gradient(ellipse 40% 50% at 10% 90%, rgba(196,117,32,.12) 0%, transparent 55%);
pointer-events: none;
}

.ns-dashboard-welcome__eyebrow {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--ns-leaf-light);
margin-bottom: var(--space-3);
position: relative;
}

.ns-dashboard-welcome__title {
font-family: var(--font-display);
font-size: clamp(22px, 3vw, 34px);
font-weight: 800;
line-height: 1.15;
color: var(--ns-cream);
margin-bottom: var(--space-3);
position: relative;
}

.ns-dashboard-welcome__text {
font-size: var(--text-sm);
line-height: 1.7;
color: rgba(245,237,216,.78);
position: relative;
max-width: 52ch;
}

/* Shortcut grid */
.ns-dashboard-shortcuts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}

.ns-dashboard-shortcut {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-5);
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
text-decoration: none;
transition: all var(--transition);
box-shadow: var(--shadow-sm);
}
.ns-dashboard-shortcut:hover {
border-color: var(--ns-leaf);
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}

.ns-dashboard-shortcut__icon {
font-size: 24px;
line-height: 1;
}
.ns-dashboard-shortcut__label {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ns-forest);
}
.ns-dashboard-shortcut__sub {
font-size: var(--text-xs);
color: var(--ns-bark);
line-height: 1.4;
}

/* Laatste bestelling */
.ns-dashboard-lastorder {
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
box-shadow: var(--shadow-sm);
}

.ns-dashboard-lastorder__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-4);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ns-border);
}
.ns-dashboard-lastorder__label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .75;
}
.ns-dashboard-lastorder__link {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ns-forest);
text-decoration: none;
transition: color var(--transition);
}
.ns-dashboard-lastorder__link:hover { color: var(--ns-forest-mid); }

.ns-dashboard-lastorder__row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
}
.ns-dashboard-lastorder__item {
display: flex;
flex-direction: column;
gap: 4px;
}
.ns-dashboard-lastorder__item-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .65;
}
.ns-dashboard-lastorder__item-value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-forest);
}


/* ─────────────────────────────────────────────────────────────
 5. BESTELLINGEN — LIJST
───────────────────────────────────────────────────────────────── */

.ns-orders {
display: flex;
flex-direction: column;
gap: var(--space-6);
}

.ns-orders__header {
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ns-border);
}

/* Lege staat */
.ns-orders-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding: var(--space-9) var(--space-6);
text-align: center;
background: var(--ns-cream);
border-radius: var(--radius-lg);
}
.ns-orders-empty__icon { font-size: 48px; line-height: 1; }
.ns-orders-empty__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--ns-forest);
}
.ns-orders-empty__text {
font-size: var(--text-sm);
color: var(--ns-bark);
max-width: 40ch;
}

/* Tabel */
.ns-orders-table-wrap {
overflow-x: auto;
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}

.ns-orders-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
background: var(--ns-white);
}

.ns-orders-table__th {
padding: var(--space-3) var(--space-5);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-bark);
text-align: left;
border-bottom: 2px solid var(--ns-border);
background: var(--ns-cream);
}

.ns-orders-table__row { border-bottom: 1px solid var(--ns-border); }
.ns-orders-table__row:last-child { border-bottom: none; }
.ns-orders-table__row:hover { background: rgba(245,237,216,.5); }

.ns-orders-table__td {
padding: var(--space-4) var(--space-5);
color: var(--ns-soil);
vertical-align: middle;
}

.ns-orders-table__order-link {
font-weight: 700;
color: var(--ns-forest);
text-decoration: none;
}
.ns-orders-table__order-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}

/* Actieknoppen */
.ns-orders-table__td--actions {
white-space: nowrap;
}

.ns-orders-table__btn {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border: 1.5px solid var(--ns-forest);
color: var(--ns-forest);
border-radius: var(--radius-sm);
text-decoration: none;
cursor: pointer;
background: transparent;
transition: all var(--transition);
margin-right: 4px;
}
.ns-orders-table__btn:hover {
background: var(--ns-forest);
color: var(--ns-cream);
}
.ns-orders-table__btn--pay {
border-color: var(--ns-amber);
color: var(--ns-amber);
}
.ns-orders-table__btn--pay:hover {
background: var(--ns-amber);
color: var(--ns-cream);
}

/* Paginering */
.ns-orders-pagination {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding: var(--space-4) 0;
}
.ns-orders-pagination__info {
font-size: var(--text-sm);
color: var(--ns-bark);
}
.ns-orders-pagination__btn {
font-size: var(--text-sm);
font-weight: 700;
color: var(--ns-forest);
text-decoration: none;
padding: 6px 14px;
border: 1.5px solid var(--ns-border);
border-radius: var(--radius-sm);
transition: all var(--transition);
}
.ns-orders-pagination__btn:hover {
border-color: var(--ns-forest);
background: var(--ns-cream);
}


/* ─────────────────────────────────────────────────────────────
 6. BESTELLING — DETAIL
───────────────────────────────────────────────────────────────── */

.ns-order-view {
display: flex;
flex-direction: column;
gap: var(--space-6);
}

/* Meta balk */
.ns-order-view__meta {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-4);
background: var(--ns-cream);
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
padding: var(--space-5) var(--space-6);
}

.ns-order-view__meta-item {
display: flex;
flex-direction: column;
gap: 4px;
}
.ns-order-view__meta-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .7;
}
.ns-order-view__meta-value {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-forest);
}

/* Secties */
.ns-order-view__section {
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
padding: var(--space-6);
box-shadow: var(--shadow-sm);
}
.ns-order-view__section-title {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .75;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ns-border);
}

/* Producten tabel */
.ns-order-items-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.ns-order-items-table__th {
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ns-bark);
text-align: left;
border-bottom: 2px solid var(--ns-border);
}
.ns-order-items-table__th--total { text-align: right; }

.ns-order-items-table__row { border-bottom: 1px solid var(--ns-border); }
.ns-order-items-table__row:last-child { border-bottom: none; }

.ns-order-items-table__td {
padding: var(--space-4);
vertical-align: middle;
color: var(--ns-soil);
}
.ns-order-items-table__td--total { text-align: right; font-weight: 600; }

.ns-order-items-table__product {
display: flex;
align-items: center;
gap: var(--space-4);
min-width: 0;
}
.ns-order-items-table__img {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: var(--radius-sm);
overflow: hidden;
border: 1px solid var(--ns-border);
}
.ns-order-items-table__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ns-order-items-table__info {
display: flex;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.ns-order-items-table__name {
font-weight: 600;
color: var(--ns-forest);
overflow-wrap: anywhere;
word-break: break-word;
}
.ns-order-items-table__qty {
font-size: var(--text-xs);
color: var(--ns-bark);
}

/* Totaalrijen */
.ns-order-items-table__total-label,
.ns-order-items-table__total-value {
padding: var(--space-3) var(--space-4);
font-size: var(--text-sm);
color: var(--ns-soil);
border-bottom: 1px solid var(--ns-border);
}
.ns-order-items-table__total-value { text-align: right; font-weight: 600; }

/* Eindtotaal */
.ns-order-items-table tr.is-grand-total .ns-order-items-table__total-label,
.ns-order-items-table tr.is-grand-total .ns-order-items-table__total-value {
font-family: var(--font-display);
font-size: var(--text-md);
font-weight: 800;
color: var(--ns-forest);
border-top: 2px solid var(--ns-border);
border-bottom: none;
}

/* Adresblokken in order */
.ns-order-view__addresses {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-5);
}
.ns-order-view__address-card {
background: var(--ns-cream);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
}
.ns-order-view__address-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .7;
margin-bottom: var(--space-3);
}
.ns-order-view__address-text {
font-size: var(--text-sm);
line-height: 1.8;
color: var(--ns-soil);
font-style: normal;
}

/* Aankoop notitie */
.ns-order-view__note {
background: rgba(196,117,32,.07);
border: 1px solid rgba(196,117,32,.18);
border-radius: var(--radius-sm);
padding: var(--space-4) var(--space-5);
}
.ns-order-view__note-label {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ns-amber);
margin-bottom: var(--space-2);
}
.ns-order-view__note-text {
font-size: var(--text-sm);
color: var(--ns-soil);
line-height: 1.7;
}


/* ─────────────────────────────────────────────────────────────
 7. DOWNLOADS
───────────────────────────────────────────────────────────────── */

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

.ns-downloads-empty {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
padding: var(--space-9) var(--space-6);
text-align: center;
background: var(--ns-cream);
border-radius: var(--radius-lg);
}
.ns-downloads-empty__icon { font-size: 48px; line-height: 1; }
.ns-downloads-empty__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--ns-forest);
}
.ns-downloads-empty__text { font-size: var(--text-sm); color: var(--ns-bark); max-width: 40ch; }

.ns-downloads-table-wrap {
overflow-x: auto;
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
}
.ns-downloads-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
background: var(--ns-white);
}
.ns-downloads-table__th {
padding: var(--space-3) var(--space-5);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ns-bark);
text-align: left;
border-bottom: 2px solid var(--ns-border);
background: var(--ns-cream);
}
.ns-downloads-table__row { border-bottom: 1px solid var(--ns-border); }
.ns-downloads-table__row:last-child { border-bottom: none; }
.ns-downloads-table__row:hover { background: rgba(245,237,216,.5); }
.ns-downloads-table__td {
padding: var(--space-4) var(--space-5);
vertical-align: middle;
color: var(--ns-soil);
}
.ns-downloads-table__product { font-weight: 600; color: var(--ns-forest); display: block; }
.ns-downloads-table__product a { color: inherit; text-decoration: none; }
.ns-downloads-table__product a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ns-downloads-table__file { font-size: var(--text-xs); color: var(--ns-bark); margin-top: 2px; display: block; }
.ns-downloads-table__never,
.ns-downloads-table__unlimited {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--radius-pill);
background: rgba(90,158,42,.10);
color: var(--ns-forest-mid);
}
.ns-downloads-table__td--action { text-align: right; }
.ns-downloads-table__btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
background: var(--ns-forest);
color: var(--ns-cream);
border-radius: var(--radius-sm);
text-decoration: none;
transition: background var(--transition);
}
.ns-downloads-table__btn:hover { background: var(--ns-forest-mid); }


/* ─────────────────────────────────────────────────────────────
 8. ADRESSEN — OVERZICHT
───────────────────────────────────────────────────────────────── */

.ns-my-address {
display: flex;
flex-direction: column;
gap: var(--space-5);
}

.ns-my-address__intro {
font-size: var(--text-sm);
color: var(--ns-bark);
line-height: 1.6;
}

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

.ns-address-card {
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-7);
box-shadow: var(--shadow-sm);
transition: border-color var(--transition), box-shadow var(--transition);
}
.ns-address-card:hover {
border-color: var(--ns-leaf);
box-shadow: var(--shadow-md);
}
.ns-address-card--empty {
border-style: dashed;
}

.ns-address-card__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-5);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ns-border);
}

.ns-address-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: 700;
color: var(--ns-forest);
display: flex;
align-items: center;
gap: var(--space-3);
}

.ns-address-card__edit {
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ns-bark);
text-decoration: none;
padding: 4px 10px;
border: 1.5px solid var(--ns-border);
border-radius: var(--radius-sm);
transition: all var(--transition);
}
.ns-address-card__edit:hover {
border-color: var(--ns-forest);
color: var(--ns-forest);
background: var(--ns-cream);
}

.ns-address-card__body { }

.ns-address-card__address {
font-size: var(--text-sm);
line-height: 1.85;
color: var(--ns-soil);
font-style: normal;
}

.ns-address-card__empty-text {
font-size: var(--text-sm);
color: var(--ns-bark);
opacity: .7;
font-style: italic;
}


/* ─────────────────────────────────────────────────────────────
 9. FORMULIER — gedeeld (adres + account)
───────────────────────────────────────────────────────────────── */

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

/* Sectie blok */
.ns-form__section {
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-md);
padding: var(--space-6) var(--space-7);
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: var(--space-4);
margin-bottom: var(--space-4);
}
.ns-form__section-title {
font-family: var(--font-body);
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ns-bark);
opacity: .8;
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--ns-border);
}
.ns-form__section-sub {
font-size: var(--text-sm);
color: var(--ns-bark);
margin-top: calc(-1 * var(--space-2));
}
.ns-form__section--password {
border-color: rgba(196,117,32,.25);
background: rgba(196,117,32,.03);
}

/* Rijen */
.ns-form__row {
display: flex;
gap: var(--space-5);
}
.ns-form__row--two > .ns-form__field { flex: 1; }
.ns-form__row--between {
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}

/* Veld */
.ns-form__field {
display: flex;
flex-direction: column;
gap: var(--space-2);
}

/* Label */
.ns-form__label {
font-size: var(--text-sm);
font-weight: 600;
color: var(--ns-forest);
cursor: pointer;
}
.ns-form__required { color: var(--ns-amber); margin-left: 2px; }

/* Input */
.ns-form__input {
width: 100%;
padding: 11px var(--space-4);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--ns-soil);
background: var(--ns-white);
border: 1.5px solid var(--ns-border);
border-radius: var(--radius-sm);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
appearance: none;
-webkit-appearance: none;
}
.ns-form__input:focus {
border-color: var(--ns-leaf);
box-shadow: 0 0 0 3px rgba(90,158,42,.13);
}
.ns-form__input::placeholder { color: var(--ns-bark); opacity: .5; }
.ns-form__input:invalid:not(:placeholder-shown) {
border-color: #c0392b;
}

/* Input met icoon wrapper */
.ns-form__input-wrap {
position: relative;
}
.ns-form__input-wrap .ns-form__input { padding-right: 44px; }

/* Wachtwoord oog-knop */
.ns-form__pw-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
color: var(--ns-bark);
padding: 4px;
transition: color var(--transition), opacity var(--transition);
display: flex;
align-items: center;
}
.ns-form__pw-toggle:hover { color: var(--ns-forest); }

/* Hint tekst */
.ns-form__hint {
font-size: var(--text-xs);
color: var(--ns-bark);
opacity: .75;
line-height: 1.5;
}

/* Checkbox */
.ns-form__checkbox-label {
display: inline-flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
color: var(--ns-bark);
cursor: pointer;
user-select: none;
}
.ns-form__checkbox {
width: 16px;
height: 16px;
accent-color: var(--ns-forest);
flex-shrink: 0;
cursor: pointer;
}

/* Footer */
.ns-form__footer {
display: flex;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-4);
}

/* Adresformulier — WC genereert .form-row */
.ns-edit-address__form .form-row,
.ns-edit-address__form p {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.ns-edit-address__form .form-row label { font-size: var(--text-sm); font-weight: 600; color: var(--ns-forest); }
.ns-edit-address__form .form-row abbr { text-decoration: none; color: var(--ns-amber); }
.ns-edit-address__form input[type="text"],
.ns-edit-address__form input[type="email"],
.ns-edit-address__form input[type="tel"],
.ns-edit-address__form select,
.ns-edit-address__form textarea {
width: 100%;
padding: 11px var(--space-4);
font-family: var(--font-body);
font-size: var(--text-sm);
color: var(--ns-soil);
background: var(--ns-white);
border: 1.5px solid var(--ns-border);
border-radius: var(--radius-sm);
outline: none;
transition: border-color var(--transition), box-shadow var(--transition);
appearance: none;
-webkit-appearance: none;
}
.ns-edit-address__form input:focus,
.ns-edit-address__form select:focus,
.ns-edit-address__form textarea:focus {
border-color: var(--ns-leaf);
box-shadow: 0 0 0 3px rgba(90,158,42,.13);
}
.ns-edit-address__form select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A5230' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 40px;
cursor: pointer;
}
/* Twee kolommen naast elkaar */
.ns-edit-address__form .form-row-first,
.ns-edit-address__form .form-row-last {
display: inline-flex;
flex-direction: column;
gap: var(--space-2);
width: calc(50% - var(--space-3));
margin-bottom: var(--space-4);
}
.ns-edit-address__form .form-row-first { margin-right: var(--space-3); }
.ns-edit-address__form .form-row-last  { margin-left:  var(--space-3); }
/* Volledige breedte velden */
.ns-edit-address__form .form-row-wide { display: flex; }

.ns-edit-address__header {
margin-bottom: var(--space-5);
}


/* ─────────────────────────────────────────────────────────────
 10. INLOGGEN / REGISTREREN
───────────────────────────────────────────────────────────────── */

.ns-auth {
display: flex;
flex-direction: column;
gap: var(--space-7);
max-width: 100%;
min-width: 0;
box-sizing: border-box;
padding-left: var(--gutter);
padding-right: var(--gutter);
}

.ns-auth__intro {
max-width: 52ch;
}
.ns-auth__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--ns-forest);
margin-top: var(--space-3);
margin-bottom: var(--space-3);
}
.ns-auth__lead {
font-size: var(--text-sm);
color: var(--ns-bark);
line-height: 1.6;
}

.ns-auth__panels {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-7);
align-items: start;
}

/* Panel */
.ns-auth-panel {
background: var(--ns-white);
border: 1px solid var(--ns-border);
border-radius: var(--radius-xl);
padding: var(--space-7) var(--space-8);
box-shadow: var(--shadow-md);
}
.ns-auth-panel__title {
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: 800;
color: var(--ns-forest);
margin-bottom: var(--space-6);
padding-bottom: var(--space-5);
border-bottom: 1px solid var(--ns-border);
}

.ns-auth-panel__lost-pw {
font-size: var(--text-xs);
font-weight: 600;
color: var(--ns-bark);
text-decoration: none;
transition: color var(--transition);
}
.ns-auth-panel__lost-pw:hover { color: var(--ns-forest); text-decoration: underline; text-underline-offset: 3px; }

.ns-auth-panel__autogen-pw {
font-size: var(--text-sm);
color: var(--ns-bark);
background: var(--ns-cream);
border-radius: var(--radius-sm);
padding: var(--space-3) var(--space-4);
line-height: 1.6;
}

.ns-auth-panel__privacy {
font-size: var(--text-xs);
color: var(--ns-bark);
opacity: .75;
line-height: 1.65;
}
.ns-auth-panel__privacy a { color: var(--ns-forest); text-decoration: underline; text-underline-offset: 3px; }

/* Trust strip */
.ns-auth__trust {
display: flex;
gap: var(--space-7);
padding-top: var(--space-5);
border-top: 1px solid var(--ns-border);
}
.ns-auth__trust-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
font-weight: 600;
color: var(--ns-bark);
}


/* ─────────────────────────────────────────────────────────────
 11. BUTTONS (ns-btn)
───────────────────────────────────────────────────────────────── */

.ns-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: 12px var(--space-7);
font-family: var(--font-body);
font-size: var(--text-sm);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: var(--radius-sm);
cursor: pointer;
text-decoration: none;
border: none;
transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.ns-btn:active { transform: translateY(0) !important; }

.ns-btn--primary {
background: var(--ns-forest);
color: var(--ns-cream);
}
.ns-btn--primary:hover {
background: var(--ns-forest-mid);
color: var(--ns-cream);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}

.ns-btn--outline {
background: transparent;
color: var(--ns-forest);
border: 1.5px solid var(--ns-forest);
}
.ns-btn--outline:hover {
background: var(--ns-forest);
color: var(--ns-cream);
}

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

.ns-btn--lg { padding: 15px var(--space-8); font-size: var(--text-base); }


/* ─────────────────────────────────────────────────────────────
 12. ORDER STATUS BADGES
───────────────────────────────────────────────────────────────── */

.ns-order-status {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 10px;
border-radius: var(--radius-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
background: var(--ns-cream);
color: var(--ns-bark);
}

.ns-order-status--completed  { background: rgba(90,158,42,.12);    color: var(--ns-forest-mid); }
.ns-order-status--processing { background: rgba(196,117,32,.12);   color: var(--ns-amber);      }
.ns-order-status--on-hold    { background: rgba(122,82,48,.10);    color: var(--ns-bark);       }
.ns-order-status--pending    { background: rgba(196,117,32,.08);   color: var(--ns-amber);      }
.ns-order-status--cancelled,
.ns-order-status--refunded,
.ns-order-status--failed     { background: rgba(192,57,43,.10);    color: #b82828;              }


/* ─────────────────────────────────────────────────────────────
 13. NOTICES
───────────────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
list-style: none;
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4) var(--space-5);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: 1.65;
margin-bottom: var(--space-5);
}

.woocommerce-message {
background: rgba(90,158,42,.10);
border: 1px solid rgba(90,158,42,.25);
color: var(--ns-forest);
}
.woocommerce-message::before {
content: '✓';
font-weight: 800;
color: var(--ns-leaf);
flex-shrink: 0;
font-size: 16px;
line-height: 1.4;
}

.woocommerce-error {
background: rgba(192,57,43,.08);
border: 1px solid rgba(192,57,43,.20);
color: #a93226;
}
.woocommerce-error::before {
content: '!';
font-weight: 900;
flex-shrink: 0;
font-size: 16px;
line-height: 1.4;
}

.woocommerce-info {
background: rgba(196,117,32,.10);
border: 1px solid rgba(196,117,32,.25);
color: var(--ns-amber);
}
.woocommerce-info::before {
content: 'i';
font-weight: 800;
font-style: italic;
flex-shrink: 0;
font-size: 16px;
line-height: 1.4;
}

/* Button in notice */
.woocommerce-message a.button,
.woocommerce-info a.button {
margin-left: auto;
flex-shrink: 0;
font-size: var(--text-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
padding: 5px 12px;
background: var(--ns-forest);
color: var(--ns-cream);
border-radius: var(--radius-sm);
text-decoration: none;
transition: background var(--transition);
}
.woocommerce-message a.button:hover,
.woocommerce-info a.button:hover {
background: var(--ns-forest-mid);
color: var(--ns-cream);
}


/* ─────────────────────────────────────────────────────────────
 14. WOOCOMMERCE FORM FIELD OVERRIDES
 Nodig voor form-edit-address.php waar WC woocommerce_form_field()
 gebruikt. Hiermee stylen we .form-row zonder template override.
───────────────────────────────────────────────────────────────── */

.woocommerce-account .validate-required.woocommerce-invalid .woocommerce-input-wrapper input,
.woocommerce-account .validate-required.woocommerce-invalid .woocommerce-input-wrapper select {
border-color: #c0392b;
box-shadow: 0 0 0 3px rgba(192,57,43,.12);
}


/* ─────────────────────────────────────────────────────────────
 15. RESPONSIVE
───────────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
.ns-account-layout       { grid-template-columns: 220px 1fr; gap: var(--space-6); }
.ns-dashboard-shortcuts  { grid-template-columns: repeat(2, 1fr); }
.ns-dashboard-lastorder__row { grid-template-columns: repeat(2, 1fr); }
.ns-order-view__meta     { grid-template-columns: repeat(2, 1fr); }
.ns-auth__panels         { gap: var(--space-5); }
.ns-auth-panel           { padding: var(--space-6); }
}

/* Tablet + telefoon: sidebar onder elkaar, nav horizontaal scrollbaar */
@media (max-width: 991px) {
.ns-account-layout {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}
.ns-account-nav { position: static; }
.ns-account-nav__list {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--radius-md);
}
.ns-account-nav__list::-webkit-scrollbar { display: none; }
.ns-account-nav__item {
  border-bottom: none;
  border-right: 1px solid var(--ns-border);
  white-space: nowrap;
  flex-shrink: 0;
}
.ns-account-nav__item:last-child { border-right: none; }
.ns-account-nav__link { padding: 12px var(--space-4); font-size: var(--text-xs); }

.ns-form__section {
  padding: var(--space-5) var(--space-4);
}
.ns-form__row {
  flex-wrap: wrap;
  min-width: 0;
}
.ns-form__row--two { flex-direction: column; }
.ns-form__row--two > .ns-form__field {
  flex: 1 1 100%;
  min-width: 0;
  width: 100%;
}
.ns-edit-address__form .form-row-first,
.ns-edit-address__form .form-row-last {
  width: 100%;
  display: flex;
  margin-left: 0;
  margin-right: 0;
}
}

@media (max-width: 768px) {

.ns-account-page { padding-top: var(--space-7); padding-bottom: var(--space-9); }

/* Dashboard */
.ns-dashboard-welcome { padding: var(--space-6); border-radius: var(--radius-lg); }
.ns-dashboard-shortcuts  { grid-template-columns: repeat(2, 1fr); }
.ns-dashboard-lastorder__row { grid-template-columns: repeat(2, 1fr); }

/* Auth */
.ns-auth__panels         { grid-template-columns: 1fr; }

/* Order meta */
.ns-order-view__meta     { grid-template-columns: repeat(2, 1fr); }
.ns-order-view__addresses { grid-template-columns: 1fr; }

/* Orders tabel → card */
.ns-orders-table-wrap {
  overflow-x: visible;
}
.ns-orders-table,
.ns-orders-table thead,
.ns-orders-table tbody,
.ns-orders-table tr,
.ns-orders-table th,
.ns-orders-table td { display: block; }

.ns-orders-table thead tr { display: none; }

.ns-orders-table__row {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-5);
}

.ns-orders-table__td {
  padding: var(--space-2) 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ns-orders-table__td::before {
  content: attr(data-title);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ns-bark);
  opacity: .65;
}
.ns-orders-table__td--actions {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.ns-orders-table__td--actions::before { display: none; }

/* Downloads tabel → card */
.ns-downloads-table-wrap {
  overflow-x: visible;
}
.ns-downloads-table,
.ns-downloads-table thead,
.ns-downloads-table tbody,
.ns-downloads-table tr,
.ns-downloads-table th,
.ns-downloads-table td { display: block; }

.ns-downloads-table thead tr { display: none; }

.ns-downloads-table__row {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  padding: var(--space-4);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2) var(--space-5);
}

.ns-downloads-table__td {
  padding: var(--space-2) 0;
  border-bottom: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  vertical-align: unset;
}
.ns-downloads-table__td::before {
  content: attr(data-title);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ns-bark);
  opacity: .65;
}
.ns-downloads-table__td--action {
  grid-column: 1 / -1;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2);
  text-align: left;
}
}

@media (max-width: 480px) {
.ns-dashboard-shortcuts { grid-template-columns: 1fr; }
.ns-dashboard-lastorder__row { grid-template-columns: 1fr; }
.ns-order-view__meta { grid-template-columns: 1fr; }
.ns-auth-panel { padding: var(--space-5); }
.ns-auth__trust { flex-direction: column; gap: var(--space-3); }
.ns-orders-table__row { grid-template-columns: 1fr; }
.ns-downloads-table__row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   404 — pagina niet gevonden (consistent met merk + layout)
═══════════════════════════════════════════════════════════════ */

body.error404 #ns-header:not(.scrolled) {
  background: rgba(253, 250, 244, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(30, 74, 13, 0.06);
}

body.error404 #ns-header:not(.scrolled) .ns-logo__text { color: var(--ns-forest); }
body.error404 #ns-header:not(.scrolled) .ns-nav a { color: var(--ns-bark); }
body.error404 #ns-header:not(.scrolled) .ns-nav a:hover,
body.error404 #ns-header:not(.scrolled) .ns-nav a.active { color: var(--ns-forest); }
body.error404 #ns-header:not(.scrolled) .ns-nav a::after { background: var(--ns-forest); }
body.error404 #ns-header:not(.scrolled) .ns-cart-btn,
body.error404 #ns-header:not(.scrolled) .ns-header-cta { color: var(--ns-forest); border-color: rgba(30, 74, 13, 0.2); }
body.error404 #ns-header:not(.scrolled) #ns-hamburger span { background: var(--ns-forest); }

.ns-error-404 {
  position: relative;
  min-height: min(72vh, 880px);
  padding-top: clamp(100px, 14vh, 160px);
  padding-bottom: clamp(64px, 10vw, 120px);
  background: var(--ns-bg);
  overflow: hidden;
}

.ns-error-404__section {
  position: relative;
}

.ns-error-404__section::before {
  content: '';
  position: absolute;
  width: min(520px, 90vw);
  height: min(520px, 90vw);
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141, 198, 74, 0.09) 0%, transparent 68%);
  pointer-events: none;
}

.ns-error-404__inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-2) 0 var(--space-4);
}

.ns-error-404__code {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -52%);
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(5.5rem, 26vw, 12rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ns-forest);
  opacity: 0.07;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.ns-error-404__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.ns-error-404__kicker {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ns-leaf);
  margin-bottom: var(--space-4);
}

.ns-error-404__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4.5vw, var(--text-2xl));
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ns-forest);
  margin-bottom: var(--space-4);
}

.ns-error-404__lead {
  font-size: var(--text-base);
  line-height: 1.65;
  color: var(--ns-bark);
  max-width: 46ch;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--space-6);
}

.ns-error-404__search {
  margin-bottom: var(--space-7);
}

.ns-error-404__search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-3);
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.ns-error-404__search-input {
  flex: 1 1 200px;
  min-width: 0;
  text-align: left;
}

.ns-error-404__search-row .ns-btn--sm {
  flex-shrink: 0;
  padding: 10px 22px;
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
}

.ns-error-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
  align-items: center;
}

@media (max-width: 480px) {
  .ns-error-404__search-row {
    flex-direction: column;
  }
  .ns-error-404__search-row .ns-btn {
    width: 100%;
  }
  .ns-error-404__actions {
    flex-direction: column;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .ns-error-404__actions .ns-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   MUSHROOM COFFEE PAGINA — STIJLEN
   Bouwt volledig op site.css — tokens hergebruikt, geen !important
   ═══════════════════════════════════════════════════════════════ */

/* ── GEDEELD ─────────────────────────────────────────────────── */
.ns-mc-section-header {
  text-align: center;
  margin-bottom: var(--space-9);
}
.ns-mc-section-header__title { margin-top: var(--space-3); }

/* ── HERO ────────────────────────────────────────────────────── */
.ns-mc-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 72px; /* header hoogte */
}

/* Achtergrond */
.ns-mc-hero__bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ns-mc-hero__bg-forest {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--ns-forest) 0%, #0D2A05 60%, #1A3A0A 100%);
}
.ns-mc-hero__bg-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}
.ns-mc-hero__bg-glow--1 {
  width: 600px; height: 600px;
  top: -100px; right: 5%;
  background: radial-gradient(circle, rgba(90,158,42,.22) 0%, transparent 70%);
}
.ns-mc-hero__bg-glow--2 {
  width: 400px; height: 400px;
  bottom: 0; left: 10%;
  background: radial-gradient(circle, rgba(196,117,32,.18) 0%, transparent 70%);
}
.ns-mc-hero__mycelium {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* Inner grid */
.ns-mc-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--space-10) var(--gutter) var(--space-9);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
}

/* Content */
.ns-mc-hero__badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.ns-mc-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(90,158,42,.2);
  border: 1px solid rgba(90,158,42,.4);
  color: var(--ns-leaf-light);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .04em;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
}
.ns-mc-hero__badge--amber {
  background: rgba(196,117,32,.2);
  border-color: rgba(196,117,32,.4);
  color: #F5C87A;
}

.ns-mc-hero__title {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 108px);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.03em;
  color: var(--ns-cream);
  margin-bottom: var(--space-5);
}
.ns-mc-hero__title em {
  color: var(--ns-amber);
  font-style: italic;
  display: block;
}

.ns-mc-hero__tagline {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--ns-leaf-light);
  margin-bottom: var(--space-5);
  line-height: 1.4;
}

.ns-mc-hero__ing-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  flex-wrap: wrap;
}
.ns-mc-hero__ing {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(245,237,216,.8);
  font-size: var(--text-sm);
  font-weight: 500;
}
.ns-mc-hero__ing-icon { font-size: 1.2rem; }
.ns-mc-hero__ing-divider {
  width: 1px; height: 20px;
  background: rgba(245,237,216,.2);
}

.ns-mc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ns-mc-hero__cta {
  box-shadow: 0 8px 32px rgba(196,117,32,.5) !important;
}

.ns-mc-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  color: rgba(245,237,216,.55);
  font-size: var(--text-sm);
}

/* Visual rechts */
.ns-mc-hero__visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 520px;
}

.ns-mc-hero__circle {
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141,198,74,.15) 0%, rgba(30,74,13,.3) 60%, transparent 100%);
  border: 1px solid rgba(141,198,74,.12);
  animation: ns-mc-pulse 6s ease-in-out infinite;
}
@keyframes ns-mc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: .8; }
}

.ns-mc-hero__product-wrap {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 32px 64px rgba(0,0,0,.5));
  animation: ns-mc-float 5s ease-in-out infinite;
}
@keyframes ns-mc-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.ns-mc-hero__product-img {
  width: min(420px, 45vw);
  height: auto;
}

/* Floating stat cards */
.ns-mc-stat {
  position: absolute;
  background: rgba(253,250,244,.1);
  border: 1px solid rgba(253,250,244,.2);
  backdrop-filter: blur(12px);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  text-align: center;
  z-index: 3;
}
.ns-mc-stat--1 { top: 10%; right: -5%; }
.ns-mc-stat--2 { bottom: 25%; right: -8%; }
.ns-mc-stat--3 { top: 35%; left: -5%; }

.ns-mc-stat__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--ns-amber);
  line-height: 1;
}
.ns-mc-stat__lbl {
  display: block;
  font-size: var(--text-xs);
  color: rgba(245,237,216,.65);
  margin-top: 4px;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Scroll indicator */
.ns-mc-hero__scroll {
  position: absolute;
  bottom: var(--space-7);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  color: rgba(245,237,216,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid rgba(245,237,216,.2);
  border-radius: 50%;
  transition: all var(--transition);
  animation: ns-mc-bounce 2.5s ease-in-out infinite;
}
.ns-mc-hero__scroll:hover {
  color: var(--ns-cream);
  border-color: rgba(245,237,216,.5);
}
@keyframes ns-mc-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ── PROBLEEM SECTIE ─────────────────────────────────────────── */
.ns-mc-probleem {
  padding-top: var(--section-py);
  padding-bottom: 0;
}

.ns-mc-problemen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.ns-mc-probleem-item {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ns-mc-probleem-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.ns-mc-probleem-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #C0392B, #E74C3C);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.ns-mc-probleem-item__icon {
  font-size: 2rem;
  margin-bottom: var(--space-4);
}
.ns-mc-probleem-item__titel {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ns-soil);
  margin-bottom: var(--space-3);
}
.ns-mc-probleem-item p {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  line-height: 1.65;
}

.ns-mc-probleem__bridge {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  margin-top: var(--space-9);
  padding-bottom: var(--section-py);
}
.ns-mc-probleem__bridge-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ns-border), transparent);
}
.ns-mc-probleem__bridge-text {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ns-leaf);
  white-space: nowrap;
}

/* ── OPLOSSING ───────────────────────────────────────────────── */
.ns-mc-oplossing {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-9);
  align-items: start;
}

.ns-mc-how-card {
  background: rgba(245,237,216,.08);
  border: 1px solid rgba(245,237,216,.15);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}
.ns-mc-how-card__label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ns-leaf-light);
  margin-bottom: var(--space-6);
}

.ns-mc-how-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.ns-mc-how-step {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
}
.ns-mc-how-step__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 800;
  color: var(--ns-amber);
  line-height: 1;
  flex-shrink: 0;
  width: 48px;
}
.ns-mc-how-step__body strong {
  display: block;
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ns-cream);
  margin-bottom: var(--space-2);
}
.ns-mc-how-step__body p {
  font-size: var(--text-sm);
  color: rgba(245,237,216,.65);
  line-height: 1.65;
  margin: 0;
}

/* ── VERGELIJKINGSTABEL ──────────────────────────────────────── */
.ns-mc-vergelijk-tabel {
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--ns-border);
  box-shadow: var(--shadow-md);
}

.ns-mc-vergelijk-header {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  background: var(--ns-forest);
}
.ns-mc-vergelijk-header__criterium,
.ns-mc-vergelijk-header__optie {
  padding: var(--space-5) var(--space-6);
  color: rgba(245,237,216,.7);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.35;
}
.ns-mc-vergelijk-header__optie--win {
  background: rgba(255,255,255,.08);
  color: var(--ns-cream);
  font-size: var(--text-base);
}
.ns-mc-vergelijk-header__optie--win em {
  color: var(--ns-amber);
  font-style: normal;
  font-size: var(--text-sm);
  font-weight: 700;
  display: block;
}

.ns-mc-vergelijk-rij {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  border-bottom: 1px solid var(--ns-border);
  background: var(--ns-white);
  transition: background var(--transition);
}
.ns-mc-vergelijk-rij:last-child { border-bottom: none; }
.ns-mc-vergelijk-rij:hover { background: var(--ns-cream); }
.ns-mc-vergelijk-rij--win .ns-mc-vergelijk-rij__ns { background: rgba(90,158,42,.06); }

.ns-mc-vergelijk-rij__criterium,
.ns-mc-vergelijk-rij__ns,
.ns-mc-vergelijk-rij__ko {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border-right: 1px solid var(--ns-border);
}
.ns-mc-vergelijk-rij__ko { border-right: none; color: var(--ns-bark); }
.ns-mc-vergelijk-rij__criterium { font-weight: 600; color: var(--ns-soil); }
.ns-mc-vergelijk-rij__ns { font-weight: 600; color: var(--ns-forest); }

.ns-mc-check {
  color: var(--ns-leaf);
  font-weight: 700;
  font-size: 1rem;
  flex-shrink: 0;
}

/* ── INGREDIËNTEN ─────────────────────────────────────────────── */
.ns-mc-ing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.ns-mc-ing-card {
  background: var(--ns-white);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-xl);
  padding: var(--space-7);
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.ns-mc-ing-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* Kleuraccent per paddenstoel */
.ns-mc-ing-card--lions  { border-top: 3px solid var(--ns-amber); }
.ns-mc-ing-card--cordyceps { border-top: 3px solid var(--ns-leaf); }
.ns-mc-ing-card--reishi { border-top: 3px solid #7B68EE; }

/* Subtiele achtergrondkleur */
.ns-mc-ing-card--lions::before  { background: radial-gradient(circle at top right, rgba(196,117,32,.06) 0%, transparent 60%); }
.ns-mc-ing-card--cordyceps::before { background: radial-gradient(circle at top right, rgba(90,158,42,.06) 0%, transparent 60%); }
.ns-mc-ing-card--reishi::before { background: radial-gradient(circle at top right, rgba(123,104,238,.06) 0%, transparent 60%); }
.ns-mc-ing-card::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ns-mc-ing-card__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.ns-mc-ing-card__icon {
  font-size: 2.2rem;
  line-height: 1;
  flex-shrink: 0;
}
.ns-mc-ing-card__naam {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--ns-forest);
  margin-bottom: 2px;
}
.ns-mc-ing-card__latin { color: var(--ns-bark); font-size: var(--text-sm); }
.ns-mc-ing-card__dose {
  margin-left: auto;
  flex-shrink: 0;
  background: var(--ns-cream);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ns-forest);
  padding: 4px 12px;
  letter-spacing: .04em;
}

.ns-mc-ing-card__uitleg {
  font-size: var(--text-sm);
  color: var(--ns-bark);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.ns-mc-ing-card__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4);
  background: var(--ns-cream);
  border-radius: var(--radius-md);
}
.ns-mc-ing-card__stat { text-align: center; }
.ns-mc-ing-card__stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: 800;
  color: var(--ns-forest);
  line-height: 1;
}
.ns-mc-ing-card__stat-lbl {
  display: block;
  font-size: 10px;
  color: var(--ns-bark);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ns-mc-ing-card__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--ns-cream);
  border: 1px solid var(--ns-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ns-forest);
  padding: 5px 14px;
}

/* ── REVIEWS ─────────────────────────────────────────────────── */
.ns-mc-agg-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.ns-mc-agg-rating__stars { color: var(--ns-amber); font-size: var(--text-lg); letter-spacing: 2px; }
.ns-mc-agg-rating__score { font-weight: 700; color: var(--ns-forest); }
.ns-mc-agg-rating__count { color: var(--ns-bark); font-size: var(--text-sm); }

/* ── CTA BLOCK ───────────────────────────────────────────────── */
.ns-mc-cta-block {
  position: relative;
  background: linear-gradient(135deg, var(--ns-forest) 0%, #0D2A05 100%);
  border-radius: var(--radius-xl);
  padding: clamp(var(--space-9), 10vw, var(--space-11));
  text-align: center;
  overflow: hidden;
}

.ns-mc-cta-block__orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.ns-mc-cta-block__orb--1 {
  width: 400px; height: 400px;
  top: -100px; right: -80px;
  background: radial-gradient(circle, rgba(196,117,32,.25) 0%, transparent 70%);
}
.ns-mc-cta-block__orb--2 {
  width: 300px; height: 300px;
  bottom: -80px; left: -40px;
  background: radial-gradient(circle, rgba(90,158,42,.2) 0%, transparent 70%);
}

.ns-mc-cta-block__inner { position: relative; z-index: 1; }

.ns-mc-cta-block__icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: var(--space-5);
  animation: ns-mc-float 5s ease-in-out infinite;
}

.ns-mc-cta-block__title {
  font-family: var(--font-display);
  font-size: clamp(var(--text-xl), 4vw, var(--text-2xl));
  font-weight: 800;
  color: var(--ns-cream);
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: var(--space-5);
}
.ns-mc-cta-block__title em { color: var(--ns-amber); font-style: italic; }

.ns-mc-cta-block__lead {
  color: rgba(245,237,216,.75);
  font-size: var(--text-md);
  max-width: 52ch;
  margin: 0 auto var(--space-8);
  line-height: 1.65;
}

.ns-mc-cta-block__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  margin-bottom: var(--space-6);
}

.ns-mc-cta-primary {
  box-shadow: 0 12px 40px rgba(196,117,32,.55) !important;
  font-size: var(--text-md) !important;
}

.ns-mc-cta-block__guarantees {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  color: rgba(245,237,216,.5);
  font-size: var(--text-sm);
}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ns-mc-hero__inner { grid-template-columns: 1fr; }
  .ns-mc-hero__visual { display: none; }
  .ns-mc-hero__title { font-size: clamp(48px, 10vw, 80px); }
  .ns-mc-hero { min-height: auto; padding-bottom: var(--space-9); }
  .ns-mc-oplossing { grid-template-columns: 1fr; }
  .ns-mc-problemen { grid-template-columns: repeat(2, 1fr); }
  .ns-mc-ing-grid { grid-template-columns: 1fr; }
  .ns-mc-vergelijk-tabel { font-size: var(--text-sm); }
}

@media (max-width: 768px) {
  .ns-mc-problemen { grid-template-columns: 1fr; }
  .ns-mc-hero__actions { flex-direction: column; }
  .ns-mc-hero__actions .ns-btn { width: 100%; justify-content: center; }
  .ns-mc-vergelijk-header,
  .ns-mc-vergelijk-rij {
    grid-template-columns: 1fr 1fr;
  }
  .ns-mc-vergelijk-header__criterium,
  .ns-mc-vergelijk-rij__criterium { display: none; }
  .ns-mc-cta-block__actions { flex-direction: column; align-items: center; }
  .ns-mc-cta-block__actions .ns-btn { width: 100%; max-width: 360px; }
}

@media (max-width: 480px) {
  .ns-mc-ing-card__stats { grid-template-columns: repeat(3, 1fr); gap: var(--space-2); }
  .ns-mc-cta-block__guarantees { flex-direction: column; gap: var(--space-2); }
}