/*
Theme Name: demotuinwinkel
Theme URI: https://bluect.nl
Author: BlueCT
Author URI: https://bluect.nl
Description: Classic PHP theme voor Vondel Tuingereedschap (conceptvoorbeeld), een webshop in kwaliteitstuingereedschap. Layout in PHP, content in SCF, commerce in WooCommerce.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: demotuinwinkel
*/

/* Concept: "Werkbank". Gereedschapsstaal en aarde: een donker mosgroen-zwarte
   basis, warm ivoor als werkvlak, roestbruin koper als enige actiekleur en
   olijfgroen voor seizoen- en categorieaccenten. De vormentaal is vierkant en
   hairline: bijna geen radius (2px), dunne lijnen als maatvoering, en als
   handtekening een klein massief koperen vierkant dat linksboven bij elke
   kop en rechtsonder bij elk beeld uit de rand steekt, plus een koperen vlak
   dat bij de primaire knop van links inschuift. Typografie: Space Grotesk
   (technisch, eigenzinnig) tegenover IBM Plex Sans (nuchter, leesbaar). */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
  /* palette (contrast doorgerekend: wit op koper 7.77:1, wit op olijf 7.19:1,
     inkt op ivoor 12.64:1, ivoor op donker 13.9:1) */
  --color-dominant: #2A2E1F;
  --ink: #2A2E1F;
  --ink-soft: #55584A;
  --bg: #F6F4ED;
  --surface: #FFFFFF;
  --surface-2: #EBE7DA;
  --line: #D8D2C0;
  --line-strong: #B9B29A;
  --accent: #7A4522;
  --accent-text: #6B3B1D;
  --accent-on-dark: #E8A87C;
  --olive: #4F5D23;
  --olive-tint: #E4E7D5;
  --dark: #2A2E1F;
  --dark-2: #1F2217;
  --on-dark: #F6F4ED;
  --on-dark-soft: #C9C7B4;

  /* buttons: one source of truth, herbruikt door WooCommerce en Forminator */
  --btn-fill: #7A4522;
  --btn-label: #FFFFFF;
  --btn-fill-hover: #5F3419;

  /* type */
  --font-display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --step--1: clamp(0.875rem, 0.84rem + 0.15vw, 0.95rem);
  --step-0: clamp(1.0625rem, 1.03rem + 0.2vw, 1.125rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.75rem);
  --step-3: clamp(1.65rem, 1.4rem + 1.2vw, 2.25rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.9vw, 3rem);
  --step-5: clamp(2.1rem, 1.6rem + 3vw, 4.25rem);

  /* space */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4.5rem;
  --space-8: 7rem;

  /* shape: vierkant + hairline */
  --radius: 2px;
  --square: 12px;
  --border: 1px solid var(--line);
  --container: 1280px;
  --measure: 760px;
  --header-h: 76px;
}


/* ==========================================================================
   2. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  overflow-x: hidden;
  max-width: 100%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  max-width: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* inline icons blijven op dezelfde regel als hun tekst */
a > svg, button > svg, p svg, li > a svg, span > svg, .icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.02em;
}
h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-3); overflow-wrap: break-word; }
ul, ol { margin: 0 0 var(--space-3); padding-left: 1.25rem; }

a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

::selection { background: var(--accent); color: #FFFFFF; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.screen-reader-text, .visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1200;
  background: var(--dark);
  color: var(--on-dark);
  padding: 0.9rem 1.25rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  color: var(--on-dark);
}


/* ==========================================================================
   3. LAYOUT
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 5vw, 2rem);
}

.container--narrow { max-width: 940px; }

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--surface { background: var(--surface-2); }
.section--paper { background: var(--surface); }
.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--on-dark); }
.section--dark p { color: var(--on-dark); }
.section--dark .eyebrow { color: var(--accent-on-dark); }
.section--dark a:not(.btn) { color: var(--accent-on-dark); }

/* long-form leeskolom: gecentreerd in de box, tekst links uitgelijnd */
.prose--longform {
  max-width: var(--measure);
  margin-inline: auto;
  text-align: left;
}

.stack > * + * { margin-top: var(--space-3); }
.section-actions { margin-top: var(--space-5); }

.lead {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}
.section--dark .lead { color: var(--on-dark); }


/* ---- section headings: handtekening = klein koperen vierkant ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin: 0 0 var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 10px;
  height: 10px;
  background: var(--accent);
  flex: none;
}
.section--dark .eyebrow::before { background: var(--accent-on-dark); }

.section-head { max-width: 62ch; margin-bottom: var(--space-6); }
.section-head--wide { max-width: none; }


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
#place_order,
.forminator-button,
.forminator-custom-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 52px;
  padding: 0.9rem 1.6rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: background-color .25s ease, color .25s ease, transform .2s ease;
}

.btn--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit,
.single_add_to_cart_button,
#place_order,
.forminator-button,
.forminator-custom-form button[type="submit"] {
  background-color: var(--btn-fill);
  color: var(--btn-label);
}

/* handtekening-interactie: koperblok schuift van links in, label blijft boven */
.btn--primary::before,
.single_add_to_cart_button::before,
#place_order::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--btn-fill-hover);
  transform: translateX(-100%);
  transition: transform .3s ease;
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before,
.single_add_to_cart_button:hover::before,
#place_order:hover::before { transform: translateX(0); }

.btn--primary:hover,
.btn--primary:focus-visible { color: var(--btn-label); }

.btn--secondary {
  background-color: var(--dark);
  color: var(--on-dark);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  background-color: var(--dark-2);
  color: var(--on-dark);
}

.btn--outline,
.woocommerce a.button:not(.alt),
.woocommerce button.button:not(.alt),
.woocommerce input.button:not(.alt) {
  background-color: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
}
.btn--outline:hover, .btn--outline:focus-visible,
.woocommerce a.button:not(.alt):hover,
.woocommerce button.button:not(.alt):hover {
  background-color: var(--ink);
  color: var(--bg);
}

/* op donkere vlakken keert de outline om */
.section--dark .btn--outline,
.cta-band .btn--outline,
.site-footer .btn--outline {
  color: var(--on-dark);
  border-color: var(--on-dark);
}
.section--dark .btn--outline:hover,
.cta-band .btn--outline:hover,
.site-footer .btn--outline:hover {
  background-color: var(--on-dark);
  color: var(--ink);
}

/* linkkleur-regels mogen nooit een knoplabel overschrijven */
.site-footer .btn--primary,
.cta-band .btn--primary,
.section--dark .btn--primary { color: var(--btn-label); }

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

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

.btn-note {
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.section--dark .btn-note, .cta-band .btn-note { color: var(--on-dark-soft); }

/* tekstlink met pijl */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 600;
  font-family: var(--font-body);
  text-decoration: none;
  color: var(--accent-text);
  border-bottom: 2px solid var(--line-strong);
}
.arrow-link:hover { color: var(--ink); border-bottom-color: var(--accent); }
.arrow-link svg { transition: transform .2s ease; }
.arrow-link:hover svg { transform: translateX(3px); }
.section--dark .arrow-link { color: var(--accent-on-dark); border-bottom-color: rgba(246, 244, 237, .35); }


/* ==========================================================================
   5. HEADER + NAV
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
body.nav-open .site-header { z-index: 1000; }

.header-inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: var(--header-h);
  padding-block: 0.75rem;
}

.brand {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-height: 44px;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
}
.brand:hover { color: var(--accent-text); }
.brand-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  white-space: nowrap;
}
.brand-slogan {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  line-height: 1.2;
}
.brand-logo { height: clamp(34px, 4vw, 48px); width: auto; max-width: 220px; object-fit: contain; }

.primary-nav { display: flex; align-items: center; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu li { position: relative; }
.nav-menu a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.15rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.nav-menu a:hover,
.nav-menu .current-menu-item > a,
.nav-menu .current_page_item > a {
  color: var(--accent-text);
  border-bottom-color: var(--accent);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.65rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  background: var(--surface);
}
.header-cart:hover { border-color: var(--accent); color: var(--accent-text); }
.header-cart__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--accent);
  color: #FFFFFF;
  border-radius: 11px;
}
.header-cart__count[hidden] { display: none !important; }

.header-cta .cta-label-short { display: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { border-color: var(--accent); }
.nav-close { display: none; }
.nav-overlay { display: none; }

.nav-drawer-extra { display: none; }


/* ==========================================================================
   6. DEMO BAND (permanent, niet wegklikbaar)
   ========================================================================== */
.demo-band {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.demo-band__text {
  margin: 0;
  padding-block: 0.65rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
}
.demo-band__text a {
  color: var(--accent-text);
  font-weight: 600;
  text-underline-offset: 2px;
}
.demo-band__text a:hover { color: var(--ink); }


/* ==========================================================================
   7. HERO (split-asymmetrisch)
   ========================================================================== */
.hero {
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(2.5rem, 7vw, 5.5rem);
  min-height: 70vh;
}
.hero__content { max-width: 34rem; }
.hero h1 { margin-bottom: var(--space-4); }
.hero__intro {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: var(--space-5);
}
.hero__cta { margin-bottom: var(--space-5); }

.hero__usps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  padding-top: var(--space-4);
}
.hero__usps li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink);
  white-space: normal;
}
.hero__usps svg { color: var(--olive); margin-top: 2px; }

.hero__media { position: relative; }
.hero__media img {
  width: 100%;
  height: clamp(320px, 46vw, 560px);
  object-fit: cover;
  border-radius: var(--radius);
}
/* handtekening: massief koperen vierkant dat rechtsonder uit het beeld steekt */
.hero__media::after {
  content: "";
  position: absolute;
  right: calc(var(--square) * -0.5);
  bottom: calc(var(--square) * -0.5);
  width: calc(var(--square) * 3);
  height: calc(var(--square) * 3);
  background: var(--accent);
  z-index: 1;
}
.hero__media--empty {
  min-height: 320px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}


/* ==========================================================================
   8. CARDS + GRIDS
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--space-4);
}
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  height: 100%;
}
.card h2, .card h3 { font-size: var(--step-1); }
.card p { color: var(--ink-soft); }
.card p:last-child { margin-bottom: 0; }

.card--media { padding: 0; overflow: hidden; }
.card--media .card__body { padding: var(--space-4); flex: 1; display: flex; flex-direction: column; }
.card__media { position: relative; background: var(--surface-2); }
.card__media img {
  width: 100%;
  height: 220px;
  object-fit: cover;
}
.card--link { transition: transform .2s ease, border-color .2s ease; }
.card--link:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.card--link a.stretched {
  display: flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  color: inherit;
}
.card--link a.stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.card__meta {
  margin-top: auto;
  padding-top: var(--space-3);
  font-weight: 600;
  color: var(--accent-text);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* contactlijst op licht vlak */
.contact-list { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.contact-list li { border-bottom: 1px solid var(--line); }
.contact-list a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.contact-list a:hover { color: var(--accent-text); }
.contact-list svg { color: var(--accent); flex: none; }

/* genummerde stappen: oversized index */
.steps {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: var(--space-4);
  border-top: 2px solid var(--ink);
}
.step__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.step h3 { font-size: var(--step-1); }
.step p { color: var(--ink-soft); margin-bottom: 0; }
.section--dark .step { border-top-color: var(--on-dark); }
.section--dark .step p { color: var(--on-dark-soft); }
.section--dark .step__num { color: var(--accent-on-dark); }

/* usp / feit-strip */
.factstrip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.fact { display: flex; gap: 0.75rem; align-items: flex-start; }
.fact svg { color: var(--olive); margin-top: 3px; }
.fact strong { display: block; font-family: var(--font-display); }
.fact span { font-size: var(--step--1); color: var(--ink-soft); }

/* chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: var(--font-body);
  background: var(--olive);
  color: #FFFFFF;
  border-radius: var(--radius);
}
.chip--accent { background: var(--accent); color: #FFFFFF; }

/* split-blok met beeld */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__media { position: relative; }
.split__media img {
  width: 100%;
  height: clamp(280px, 34vw, 460px);
  object-fit: cover;
  border-radius: var(--radius);
}
.split__media::after {
  content: "";
  position: absolute;
  right: calc(var(--square) * -0.5);
  bottom: calc(var(--square) * -0.5);
  width: calc(var(--square) * 2.5);
  height: calc(var(--square) * 2.5);
  background: var(--accent);
}
.checklist { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.checklist li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line);
}
.checklist svg { color: var(--accent); margin-top: 4px; }
.section--dark .checklist li { border-bottom-color: rgba(246, 244, 237, .2); }
.section--dark .checklist svg { color: var(--accent-on-dark); }

/* statement band met beeld */
.statement {
  position: relative;
  background: var(--dark);
  color: var(--on-dark);
  overflow: hidden;
}
.statement__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-block: clamp(3rem, 7vw, 5.5rem);
}
.statement__media img {
  width: 100%;
  height: clamp(260px, 30vw, 420px);
  object-fit: cover;
  border-radius: var(--radius);
}

/* FAQ */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 56px;
  padding: 1rem 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq .faq__answer { padding-bottom: 1.25rem; max-width: 68ch; color: var(--ink-soft); }

/* CTA-band onderaan elke pagina */
.cta-band {
  background: var(--dark);
  color: var(--on-dark);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cta-band h2 { color: var(--on-dark); max-width: 20ch; }
.cta-band p { color: var(--on-dark); max-width: 56ch; }
.cta-band .eyebrow { color: var(--accent-on-dark); }
.cta-band__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.cta-band__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
}

/* prijs-/aanbiedingsanker */
.offerbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  background: var(--olive);
  color: #FFFFFF;
  padding: 1rem clamp(1rem, 5vw, 2rem);
}
.offerbar strong { font-family: var(--font-display); font-size: var(--step-1); }
.offerbar span { font-size: var(--step--1); }
.offerbar .container { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; }


/* ==========================================================================
   9. PROSE (long-form)
   ========================================================================== */
.prose--longform > *:first-child { margin-top: 0; }
.prose--longform h2 {
  font-size: var(--step-3);
  margin-top: var(--space-6);
}
.prose--longform h3 {
  font-size: var(--step-2);
  margin-top: var(--space-5);
}
.prose--longform h4, .prose--longform h5, .prose--longform h6 {
  margin-top: var(--space-4);
  font-size: var(--step-1);
}
.prose--longform p { margin-bottom: var(--space-4); }
.prose--longform ul, .prose--longform ol { margin: 0 0 var(--space-4); padding-left: 0; list-style: none; }
.prose--longform ul > li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.6rem;
}
.prose--longform ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  background: var(--accent);
}
.prose--longform ol { counter-reset: prosecount; }
.prose--longform ol > li {
  position: relative;
  padding-left: 2.1rem;
  margin-bottom: 0.6rem;
  counter-increment: prosecount;
}
.prose--longform ol > li::before {
  content: counter(prosecount) ".";
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--accent-text);
}
.prose--longform ul ul, .prose--longform ol ol, .prose--longform ul ol, .prose--longform ol ul {
  margin: 0.5rem 0 0.5rem 1.1rem;
}
.prose--longform ul ul > li::before {
  background: transparent;
  border: 2px solid var(--accent);
  width: 8px;
  height: 8px;
}
.prose--longform ol ol > li { padding-left: 2.1rem; }
.prose--longform ol ol > li::before { content: counter(prosecount, lower-alpha) ")"; }
.prose--longform blockquote {
  margin: var(--space-5) 0;
  padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
}
.prose--longform blockquote p:last-child { margin-bottom: 0; }
.prose--longform img, .prose--longform figure img { border-radius: var(--radius); }
.prose--longform figure { margin: var(--space-5) 0; }
.prose--longform figcaption { font-size: var(--step--1); color: var(--ink-soft); margin-top: 0.5rem; }
.prose--longform hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-6) 0; }
.prose--longform code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.9em;
  background: var(--surface-2);
  padding: 0.1em 0.35em;
  border-radius: var(--radius);
}
.prose--longform strong { font-weight: 600; }
.prose--longform a { font-weight: 500; }

.table-scroll { overflow-x: auto; margin: var(--space-4) 0; }
.prose--longform table, .table-scroll table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--step--1);
}
.prose--longform th, .table-scroll th {
  font-family: var(--font-display);
  text-align: left;
  padding: 0.7rem 0.75rem;
  border-bottom: 2px solid var(--ink);
  overflow-wrap: anywhere;
}
.prose--longform td, .table-scroll td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  word-break: break-word;
}


/* ==========================================================================
   10. PAGE HEADERS + ARTICLES
   ========================================================================== */
.page-head {
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.page-head h1 { font-size: var(--step-4); max-width: 22ch; }
.page-head .lead { margin-top: var(--space-3); }

.post-card { display: flex; flex-direction: column; }
.post-card time { font-size: var(--step--1); color: var(--ink-soft); }

.entry-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
}
.entry-featured img {
  width: 100%;
  height: clamp(240px, 34vw, 460px);
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-5);
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}
.woocommerce-pagination ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: var(--space-6) 0 0;
  padding: 0;
  list-style: none;
}
.woocommerce-pagination li { display: block; }
.pagination .page-numbers,
.woocommerce-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  min-height: 46px;
  padding: 0 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination a.page-numbers:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}


/* ==========================================================================
   11. FORMS (Forminator + WooCommerce, alles op themetokens)
   ========================================================================== */
.form-status {
  font-size: var(--step--1);
  color: var(--accent-text);
}
.form-status:empty { display: none; }

.form-note {
  border-left: 3px solid var(--olive);
  background: var(--olive-tint);
  color: var(--ink);
  padding: 0.85rem 1rem;
  margin-bottom: var(--space-3);
  font-size: var(--step--1);
}
.form-promise {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.form-placeholder {
  border: 1px dashed var(--line-strong);
  background: var(--surface-2);
  padding: var(--space-4);
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.forminator-custom-form label,
.forminator-custom-form .forminator-label,
.woocommerce form .form-row label,
.woocommerce-account form label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--ink);
  margin-bottom: 0.35rem;
}

.forminator-custom-form input[type="text"],
.forminator-custom-form input[type="email"],
.forminator-custom-form input[type="tel"],
.forminator-custom-form input[type="url"],
.forminator-custom-form input[type="number"],
.forminator-custom-form input[type="password"],
.forminator-custom-form textarea,
.forminator-custom-form select,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-account input.input-text,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select {
  width: 100%;
  min-height: 52px;
  padding: 0.75rem 0.9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.forminator-custom-form textarea,
.woocommerce textarea { min-height: 140px; }

.forminator-custom-form input:focus,
.forminator-custom-form textarea:focus,
.forminator-custom-form select:focus,
.woocommerce input:focus,
.woocommerce textarea:focus,
.woocommerce select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(122, 69, 34, .18);
}

.forminator-custom-form .forminator-row { margin-bottom: var(--space-3); }

/* select2 (WooCommerce landenveld) op themetokens */
.select2-container--default .select2-selection--single {
  min-height: 52px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 50px;
  color: var(--ink);
  font-family: var(--font-body);
  padding-left: 0.9rem;
}
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px; }
.select2-dropdown {
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-body);
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--accent);
  color: #FFFFFF;
}


/* ==========================================================================
   12. WOOCOMMERCE
   ========================================================================== */
.woocommerce .woocommerce-breadcrumb { display: none; }

/* --- notices --- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
.woocommerce-notices-wrapper .woocommerce-message {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--step--1);
  border-radius: var(--radius);
}
.woocommerce-error { border-left-color: var(--accent); }
.woocommerce-message a.button,
.woocommerce-info a.button { margin-left: 0.75rem; }

/* --- shop / archive --- */
.shop-head { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.shop-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.shop-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.shop-filter a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.shop-filter a:hover, .shop-filter .is-active a {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.woocommerce-result-count { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }

.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.woocommerce ul.products li.product,
ul.products li.product {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0 0 0.25rem;
  text-decoration: none;
  color: var(--ink);
}
.woocommerce ul.products li.product img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  margin: 0 0 var(--space-3);
  background: var(--surface-2);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  padding: 0 var(--space-4);
}
.woocommerce ul.products li.product .price {
  padding: 0 var(--space-4);
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--accent-text);
}
.woocommerce ul.products li.product .price del { color: var(--ink-soft); font-size: 0.85em; margin-right: 0.4rem; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product .product-excerpt {
  padding: 0 var(--space-4);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 var(--space-3);
}
.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.added_to_cart {
  margin: auto var(--space-4) var(--space-4);
  min-height: 48px;
}
.woocommerce ul.products li.product a.added_to_cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 0.7rem 1.2rem;
  border-radius: var(--radius);
}
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  margin: 0;
  padding: 0.35rem 0.7rem;
  background: var(--accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  border-radius: 0;
  line-height: 1.3;
}
.shop-tax-note { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 var(--space-4); }

/* categoriekaarten in de winkel */
.woocommerce ul.products li.product-category a { padding: 0; }
.woocommerce ul.products li.product-category h2 { padding: var(--space-4); }

/* --- single product --- */
.woocommerce div.product {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.woocommerce div.product > .woocommerce-product-gallery { grid-column: 1; grid-row: 1; }
.woocommerce div.product > .summary { grid-column: 2; grid-row: 1; }
.woocommerce div.product > .woocommerce-tabs,
.woocommerce div.product > .related,
.woocommerce div.product > .upsells,
.woocommerce div.product > .product-demo-note { grid-column: 1 / -1; }
.woocommerce div.product .woocommerce-product-gallery { position: relative; }
/* WooCommerce zet inline opacity:0 op de galerij en heft die met JS weer op.
   Blijft dat script weg, dan zou het productbeeld onzichtbaar zijn. */
.woocommerce div.product .woocommerce-product-gallery { opacity: 1 !important; }
.woocommerce div.product .woocommerce-product-gallery__image img { width: 100%; }
.woocommerce div.product .flex-viewport { max-width: 100%; }
.woocommerce div.product .woocommerce-product-gallery__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
}
.woocommerce div.product .woocommerce-product-gallery img { border-radius: var(--radius); }
.woocommerce div.product .woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce div.product .flex-control-thumbs {
  display: flex;
  gap: 0.6rem;
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
}
.woocommerce div.product .flex-control-thumbs li { width: 84px; }
.woocommerce div.product .flex-control-thumbs img { border: 1px solid var(--line); cursor: pointer; }

.woocommerce div.product .product_title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-3);
  overflow-wrap: anywhere;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.25rem;
}
.woocommerce div.product p.price del { color: var(--ink-soft); font-size: 0.7em; margin-right: 0.5rem; }
.woocommerce div.product p.price ins { text-decoration: none; color: var(--accent-text); }
.price-tax-note {
  display: block;
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 400;
  color: var(--ink-soft);
  letter-spacing: 0;
}
.woocommerce div.product .woocommerce-product-details__short-description {
  color: var(--ink-soft);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}

.woocommerce div.product form.cart { margin-bottom: var(--space-4); }
.woocommerce div.product form.cart .variations {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-3);
}
.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
  display: block;
  text-align: left;
  padding: 0 0 0.4rem;
  border: 0;
}
.woocommerce div.product form.cart .variations label {
  font-weight: 600;
  font-size: var(--step--1);
}
.woocommerce div.product form.cart .reset_variations {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--step--1);
}
.woocommerce div.product form.cart .quantity { margin-right: 0.75rem; }
.woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto; }
.woocommerce div.product form.cart div.quantity,
.woocommerce div.product form.cart .single_add_to_cart_button { vertical-align: top; }
.woocommerce div.product form.cart { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; }
.woocommerce div.product form.cart .variations,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart .woocommerce-variation { width: 100%; }
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart {
  display: flex;
  gap: 0.75rem;
  align-items: stretch;
}
.woocommerce .woocommerce-variation-price { margin-bottom: 0.75rem; }

/* aantalstepper: echte knoppen van 44px */
.quantity { display: inline-flex; align-items: stretch; }
.quantity input.qty {
  width: 62px;
  min-height: 52px;
  text-align: center;
  font-size: 1rem;
  font-family: var(--font-body);
  border: 1.5px solid var(--line-strong);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  -moz-appearance: textfield;
}
.quantity input.qty::-webkit-outer-spin-button,
.quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-step {
  width: 46px;
  min-width: 44px;
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1.25rem;
  font-family: var(--font-body);
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.qty-step:hover { background: var(--surface-2); border-color: var(--accent); }

/* USP-rij onder de add-to-cart, alleen echte intakedata */
.product-usps {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
}
.product-usps li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.4rem 0;
  font-size: var(--step--1);
}
.product-usps svg { color: var(--olive); margin-top: 3px; }
.product-payments { font-size: var(--step--1); color: var(--ink-soft); }

.woocommerce div.product .product_meta {
  font-size: var(--step--1);
  color: var(--ink-soft);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.woocommerce div.product .product_meta > span { display: block; margin-bottom: 0.2rem; }

.woocommerce div.product .woocommerce-tabs { margin-top: var(--space-7); }
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0 0 0.75rem;
  border-bottom: 1px solid var(--line);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}
.woocommerce div.product .woocommerce-tabs .panel { max-width: var(--measure); }
.woocommerce div.product .woocommerce-tabs h2 { font-size: var(--step-2); }

.related.products, .upsells.products { margin-top: var(--space-7); }
.related.products > h2, .upsells.products > h2 { font-size: var(--step-3); margin-bottom: var(--space-5); }

/* --- cart --- */
.shop_table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--space-5);
  font-size: var(--step-0);
}
.shop_table th {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 0.75rem;
  border-bottom: 2px solid var(--ink);
}
.shop_table td {
  padding: 1rem 0.75rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  overflow-wrap: anywhere;
}
.shop_table .product-thumbnail img { width: 84px; height: 84px; object-fit: cover; }
.shop_table .product-name a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.shop_table .product-name a:hover { color: var(--accent-text); }
.woocommerce a.remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
}
.woocommerce a.remove:hover { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }

.cart-layout {
  display: grid;
  grid-template-columns: 1.5fr 0.9fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.cart_totals {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  position: sticky;
  top: calc(var(--header-h) + 1rem);
}
.cart_totals h2 { font-size: var(--step-2); }
.cart_totals table { width: 100%; border-collapse: collapse; }
.cart_totals th, .cart_totals td {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--step-0);
}
.cart_totals th { font-weight: 600; font-family: var(--font-body); }
.cart_totals td { text-align: right; }
.cart_totals .order-total th, .cart_totals .order-total td {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  border-bottom: 0;
  padding-top: 1rem;
}
.cart_totals .wc-proceed-to-checkout { margin-top: var(--space-4); }
.cart_totals .checkout-button { width: 100%; }
.woocommerce-shipping-destination, .woocommerce-shipping-methods { font-size: var(--step--1); }
.woocommerce-shipping-methods { list-style: none; margin: 0; padding: 0; }
.shipping-progress {
  margin-top: var(--space-3);
  font-size: var(--step--1);
  color: var(--ink);
}
.shipping-progress__bar {
  height: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin-top: 0.4rem;
}
.shipping-progress__fill { height: 100%; background: var(--olive); }

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 0.75rem;
}
.coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.coupon label { margin: 0; }
.coupon input#coupon_code { max-width: 220px; }

/* --- demo-melding bij het ordertotaal --- */
.shop-demo-notice {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  background: var(--surface-2);
  color: var(--ink);
  padding: 0.9rem 1rem;
  margin-bottom: var(--space-4);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.5;
  border-radius: var(--radius);
}

/* --- checkout --- */
.checkout-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.checkout-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.checkout-panel + .checkout-panel { margin-top: var(--space-4); }
.checkout-panel h2, .checkout-panel h3 { font-size: var(--step-2); }
#order_review { position: sticky; top: calc(var(--header-h) + 1rem); }
.woocommerce form .form-row { margin-bottom: var(--space-3); }
.woocommerce form .form-row-first, .woocommerce form .form-row-last { width: 100%; }
.woocommerce .col2-set { display: grid; gap: var(--space-4); }
.woocommerce-billing-fields__field-wrapper { display: grid; gap: var(--space-3); }
.woocommerce form .form-row .required { color: var(--accent-text); text-decoration: none; }
.woocommerce form .form-row-postcode-house { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; }
.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  font-size: var(--step--1);
}
.woocommerce-checkout-review-order-table td { text-align: right; }
.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
}
#payment ul.payment_methods {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: var(--space-3) 0 0;
  border-top: 1px solid var(--line);
}
#payment ul.payment_methods li { margin-bottom: 0.5rem; }
#payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-weight: 600;
}
#payment .payment_box {
  background: var(--surface-2);
  padding: 0.85rem 1rem;
  font-size: var(--step--1);
  border-radius: var(--radius);
}
#payment .woocommerce-terms-and-conditions-wrapper { font-size: var(--step--1); }
#place_order { width: 100%; margin-top: var(--space-3); }
.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  font-weight: 500;
}
.woocommerce-form__label-for-checkbox input { width: 22px; height: 22px; }
.woocommerce-form-coupon-toggle .woocommerce-info { font-size: var(--step--1); }
.showcoupon,
.woocommerce-LostPassword a,
.woocommerce-privacy-policy-link,
.woocommerce-terms-and-conditions-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* --- account + bedankt --- */
.woocommerce-account .woocommerce { display: block; }
.woocommerce-account .u-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.woocommerce-account form.login,
.woocommerce-account form.register {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.woocommerce-account .woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: var(--step--1);
}
.woocommerce-order .woocommerce-order-overview {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin: 0 0 var(--space-5);
  padding: 0;
}
.woocommerce-order .woocommerce-order-overview li {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--space-3);
  font-size: var(--step--1);
}
.woocommerce-order .woocommerce-order-overview li strong { display: block; font-family: var(--font-display); font-size: var(--step-1); }
.thankyou-next {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--olive);
  padding: var(--space-4);
  margin-bottom: var(--space-5);
}
.thankyou-next h2 { font-size: var(--step-2); }
.thankyou-next ul { list-style: none; padding: 0; margin: 0; }
.thankyou-next li { padding: 0.35rem 0; display: flex; gap: 0.6rem; align-items: flex-start; }
.thankyou-next svg { color: var(--olive); margin-top: 4px; }

/* --- mini-cart (widget) --- */
.widget_shopping_cart_content .cart_list {
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
}
.widget_shopping_cart_content .cart_list li {
  display: flex;
  gap: 0.75rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}
.widget_shopping_cart_content .cart_list img { width: 56px; height: 56px; object-fit: cover; }
.widget_shopping_cart_content .total { font-family: var(--font-display); font-weight: 700; }
.widget_shopping_cart_content .buttons { display: flex; flex-direction: column; gap: 0.5rem; }

/* --- sticky add-to-cart (mobiel) --- */
.sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem clamp(0.75rem, 4vw, 1.25rem);
  padding-bottom: calc(0.6rem + env(safe-area-inset-bottom));
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  transform: translateY(110%);
  transition: transform .25s ease;
}
.sticky-atc[hidden] { display: none !important; }
.sticky-atc.is-visible { transform: translateY(0); }
.sticky-atc__info { min-width: 0; flex: 1 1 auto; }
.sticky-atc__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sticky-atc__price { display: block; font-size: var(--step--1); color: var(--ink-soft); }
.sticky-atc__btn { flex: 0 0 auto; min-height: 48px; padding-inline: 1.1rem; }


/* ==========================================================================
   13. FOOTER
   ========================================================================== */
.site-footer {
  background: var(--dark-2);
  color: var(--on-dark);
  padding-block: clamp(3rem, 6vw, 4.5rem) var(--space-5);
  border-top: 4px solid var(--accent);
}
.site-footer a { color: var(--on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--accent-on-dark); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid rgba(246, 244, 237, .18);
}
.footer-brand .brand-wordmark { color: var(--on-dark); font-size: 1.3rem; }
.footer-brand p { color: var(--on-dark-soft); font-size: var(--step--1); max-width: 34ch; }
.footer-col h3 {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-on-dark);
  margin-bottom: var(--space-2);
}
.footer-list { list-style: none; margin: 0; padding: 0; }
.footer-list li { border-bottom: 1px solid rgba(246, 244, 237, .1); }
.footer-list a, .footer-list span {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 44px;
  font-size: var(--step--1);
  color: var(--on-dark);
}
.footer-list svg { color: var(--accent-on-dark); flex: none; }
.footer-note { color: var(--on-dark-soft); font-size: var(--step--1); }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-4);
  font-size: 0.8125rem;
  color: var(--on-dark-soft);
}
.footer-bottom p { margin: 0; }
.footer-bottom a { color: var(--on-dark-soft); }
.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 0.8125rem;
}


/* ==========================================================================
   14. ENTRANCE ANIMATIONS
   ========================================================================== */
/* entrance-animations: .anim-in is visible by default; only JS may dim it */
.anim-in { opacity: 1; transform: none; }
.anim-pending {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease-out, transform .45s ease-out;
}
.anim-pending.anim-done { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .anim-pending { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ==========================================================================
   15. RESPONSIVE
   ========================================================================== */
@media (max-width: 1100px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-band__grid { grid-template-columns: 1fr; }
  .checkout-layout { grid-template-columns: 1fr; }
  #order_review { position: static; }
}

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 86%);
    height: 100dvh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--dark);
    color: var(--on-dark);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem 1.25rem calc(2rem + env(safe-area-inset-bottom));
    display: none;
    z-index: 1001;
  }
  body.nav-open .primary-nav { display: flex; animation: nav-slide-in .28s ease; }
  @keyframes nav-slide-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
  @media (prefers-reduced-motion: reduce) { body.nav-open .primary-nav { animation: none; } }

  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-end;
    width: 46px;
    height: 46px;
    min-width: 44px;
    min-height: 44px;
    margin-bottom: 0.5rem;
    background: transparent;
    border: 1px solid rgba(246, 244, 237, .35);
    border-radius: var(--radius);
    color: var(--on-dark);
    cursor: pointer;
    padding: 0;
  }

  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu li { border-bottom: 1px solid rgba(246, 244, 237, .15); }
  .primary-nav .nav-menu a {
    display: flex;
    min-height: 54px;
    padding: 0.5rem 0;
    color: var(--on-dark);
    font-size: 1.05rem;
    border-bottom: 0;
  }
  .primary-nav .nav-menu a:hover,
  .primary-nav .nav-menu .current-menu-item > a { color: var(--accent-on-dark); }

  .nav-drawer-extra {
    display: block;
    margin-top: var(--space-4);
  }
  .nav-drawer-extra .btn { width: 100%; }
  .nav-drawer-extra .footer-list a { color: var(--on-dark); }

  .nav-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 990;
    background: rgba(31, 34, 23, .55);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
  }
  body.nav-open .nav-overlay { opacity: 1; visibility: visible; }
  body.nav-open { overflow: hidden; }

  .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .hero__media { order: -1; }
  .split, .statement__grid { grid-template-columns: 1fr; }
  .split--reverse .split__media { order: 0; }
  .woocommerce div.product { grid-template-columns: 1fr; }
  .woocommerce div.product > .woocommerce-product-gallery,
  .woocommerce div.product > .summary { grid-column: 1; grid-row: auto; }
  .cart-layout { grid-template-columns: 1fr; }
  .cart_totals { position: static; }
  .steps { grid-template-columns: 1fr; gap: var(--space-4); }
  .woocommerce ul.products, ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky-atc { display: flex; }
}

@media (max-width: 900px) {
  .header-cta .cta-label-full { display: none; }
  .header-cta .cta-label-short { display: inline; }
  .header-cta { padding-inline: 1.1rem; }
  .brand-slogan { display: none; }
}

@media (max-width: 720px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .factstrip { grid-template-columns: 1fr; }
  .woocommerce-account .u-columns { grid-template-columns: 1fr; }
  .woocommerce ul.products, ul.products { grid-template-columns: 1fr; }
  .woocommerce ul.products li.product img { height: 220px; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-4); }
  .shop_table thead { display: none; }
  .shop_table, .shop_table tbody, .shop_table tr, .shop_table td { display: block; width: 100%; }
  .shop_table tr {
    border-bottom: 1px solid var(--line);
    padding: 0.75rem 0;
    display: grid;
    grid-template-columns: 84px 1fr;
    gap: 0.25rem 0.85rem;
    align-items: center;
  }
  .shop_table td { border-bottom: 0; padding: 0.2rem 0; grid-column: 2; }
  .shop_table td.product-thumbnail { grid-column: 1; grid-row: 1 / span 4; }
  .shop_table td.product-remove { grid-column: 2; justify-self: end; }
  .shop_table td::before {
    content: attr(data-title) " ";
    font-weight: 600;
    font-size: var(--step--1);
    color: var(--ink-soft);
    margin-right: 0.35rem;
  }
  .shop_table td.product-thumbnail::before, .shop_table td.product-remove::before { content: ""; }
  .cart-actions-row { display: block; }
  .cart-actions-row td.actions { display: block; grid-column: 1 / -1; }
  .cart-actions-row td.actions::before { content: ""; }
  .cart-actions { flex-direction: column; align-items: stretch; }
  .coupon { flex-direction: column; align-items: stretch; }
  .coupon input#coupon_code { max-width: none; }
}

@media (max-width: 599px) {
  .hero__media::after, .split__media::after { display: none; }
  .hero__content { max-width: none; }
  .hero, .hero__grid { text-align: left; }
  .hero__usps { flex-direction: column; gap: 0.4rem; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
  .grid, .steps { align-items: stretch; }
  .woocommerce div.product form.cart { flex-direction: column; align-items: stretch; }
  .woocommerce div.product form.cart .quantity { margin-right: 0; }
  .woocommerce div.product form.cart .woocommerce-variation-add-to-cart { flex-direction: column; }
  .quantity { align-self: flex-start; }
}

@media (max-width: 449px) {
  .header-cta { display: none; }
}
@media (max-width: 980px) {
  .header-inner { min-width: 0; }
  .brand { min-width: 0; flex: 0 1 auto; }
  .brand-wordmark { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .header-actions { flex: 0 0 auto; }
}
@media (max-width: 599px) {
  .brand-slogan { display: none; }
}
/* Woo account chrome: show-password toggle must be a real tap target */
.woocommerce-page button.show-password-input,
button.show-password-input {
  min-width: 44px; min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
}
/* Long-form prose column centers in its box */
.prose--longform { margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card--link:hover, .woocommerce ul.products li.product:hover { transform: none; }
  .btn--primary::before, .single_add_to_cart_button::before, #place_order::before { transition: none; }
}


/* === QA iteration 4 fixes (2026-08-11) === */
/* Woo gallery: uninitialised slider renders slides as a horizontal strip; stack them */
.woocommerce-product-gallery { max-width: 100%; overflow: hidden; }
.woocommerce-product-gallery__wrapper { width: 100% !important; display: grid; gap: 0.5rem; transform: none !important; }
.woocommerce-product-gallery__image { width: 100% !important; }
img.zoomImg { display: none !important; }
/* Product category/tag links: real tap targets */
.product_meta a, .single-product a[rel="tag"], .posted_in a {
  display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.2rem;
}
/* Dark statement section: use on-dark ink tokens (contrast 1.5-1.9 with light-surface tokens) */
.statement .eyebrow, .statement .arrow-link { color: var(--accent-on-dark); }
.statement .lead { color: var(--on-dark); }
.statement .arrow-link:hover { color: var(--on-dark); }
/* Split grid with a single child (no second column): center the column */
.container.split > .anim-in:only-child { grid-column: 1 / -1; max-width: 760px; width: 100%; margin-inline: auto; }