/* =========================================================
   APELDOORNSE HORREN: base.css
   Design system + globale stijlen + componenten
   ========================================================= */

:root {
  /* Kleuren */
  --color-bg: #F3EDDF;
  --color-bg-alt: #FFFFFF;
  --color-bg-dark: #112F44;
  --color-primary: #112F44;
  --color-primary-hover: #0C2233;
  --color-accent-light: #E4ECF1;
  --color-border: #DDD6C8;
  --color-text: #112F44;
  --color-text-muted: #546877;
  --color-text-inverse: #F3EDDF;
  --color-white: #FFFFFF;
  --color-error: #C0392B;
  --color-success: #2C6B3F;
  --color-star: #F0B429;
  --color-whatsapp: #178540;

  /* Hoogte van de announcement-bar en de header, live gemeten door header.js
     zodat de vast-gepositioneerde header er altijd exact op aansluit, op elk
     schermformaat, en de pagina-inhoud precies genoeg ruimte krijgt om niet
     onder de balken weg te vallen. Deze waarden zijn alleen de fallback vóór
     het eerste meetmoment (voorkomt een sprongetje bij het laden). */
  --announcement-h: 40px;
  --header-h: 111px;

  /* Meescrollende productfoto (zie PRODUCT CONFIGURATOR verderop).
     --pdp-sticky-top volgt de werkelijke hoogte van de announcement-bar en de header
     (header.js meet die en schrijft ze naar :root), plus 20px lucht. Zo blijft de foto
     altijd net onder de balken hangen, ook als die balken op een ander scherm hoger of
     lager uitvallen; een vast getal zou daar scheef gaan lopen.
     --pdp-thumbs-h is de ruimte die de thumbnailstrip eronder nodig heeft:
     12px marge + 72px hoog + 4px padding, afgerond met wat lucht. */
  --pdp-sticky-top: calc(var(--announcement-h) + var(--header-h) + 20px);
  --pdp-thumbs-h: 104px;

  /* Typografie */
  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-base: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 22px;
  --font-size-2xl: 30px;
  --font-size-3xl: 42px;
  --font-size-4xl: 58px;
  --font-size-5xl: 72px;
  --line-height-tight: 1.15;
  --line-height-base: 1.6;
  --letter-spacing-wide: 0.12em;
  --letter-spacing-wider: 0.18em;

  /* Spacing (8px grid) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  /* --space-7 ontbrak, terwijl zes regels hem wel gebruikten. Een var() die nergens naar
     verwijst maakt de hele declaratie ongeldig, dus die regels kregen stilzwijgend géén
     ruimte: de montageservice-pagina, de review-sectie en twee blokken op "over ons"
     plakten daardoor tegen wat eronder stond. */
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-16: 128px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 4px rgba(17,47,68,0.06);
  --shadow-md: 0 4px 16px rgba(17,47,68,0.10);
  --shadow-lg: 0 8px 40px rgba(17,47,68,0.14);

  /* Container */
  --container-max: 1280px;
  --container-padding: 24px;
}

@media (min-width: 768px) {
  :root { --container-padding: 48px; }
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Geen overflow-declaratie op body: elke niet-"visible" waarde hier (ook
     "clip") kan door de browser naar de hele viewport doorgezet worden
     ("overflow propagation" van body naar html), wat de paginascroll
     blokkeert of position: sticky breekt - empirisch bevestigd op deze
     site (overflow-y: clip maakte de hele pagina onscrolbaar). Blijft dit
     een probleem voor het off-canvas winkelwagenpaneel/mobiel menu, dan is
     de juiste fix overflow-x op een wrapper ONDER body, nooit op body/html
     zelf. */
}
/* Waarom de header en announcement-bar "position: fixed" zijn (en niet
   "sticky"): Shopify's Online Store 2.0 rendert elke sectie uit een section
   group ({% sections 'header-group' %}) in zijn eigen <div id="shopify-
   section-...">, die precies zo hoog is als de sectie-inhoud zelf (dus maar
   ~40px/~111px). Een "position: sticky"-element kan nooit verder blijven
   plakken dan de hoogte van zijn eigen ouderelement toestaat - zodra je
   verder scrollt dan die (piepkleine) ouder hoog is, scrollt het element
   gewoon mee weg. Dit is correct, gedocumenteerd CSS-gedrag, geen bug, maar
   het maakt "sticky" hier onbruikbaar zolang Shopify die wrapper-div
   genereert (die kunnen we niet via Liquid aanpassen). "position: fixed"
   positioneert relatief aan de viewport en heeft dit probleem niet. Omdat
   fixed-elementen uit de normale documentflow vallen, compenseren we de
   ruimte die ze anders zouden innemen met padding-top op #main-content
   (zie verderop), gebaseerd op --announcement-h + --header-h. */
#main-content { padding-top: calc(var(--announcement-h) + var(--header-h)); }
/* Header op tablet is 84px + 1px rand, op telefoon 78px + 1px rand. Staat hier vast zodat de pagina niet
   verspringt zodra header.js de echte hoogte meet (belangrijk nu base.css niet meer blokkeert). */
@media (max-width: 1023px) { :root { --header-h: 85px; } }
@media (max-width: 599px) { :root { --header-h: 79px; } }

img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

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

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

/* Utility */
.section-title {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: var(--line-height-tight);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 200ms ease;
  min-height: 44px;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--light {
  background: var(--color-text-inverse);
  color: var(--color-primary);
  border-color: var(--color-text-inverse);
}
.btn--light:hover { background: transparent; color: var(--color-text-inverse); }
.btn--ghost {
  background: transparent;
  color: var(--color-text-inverse);
  border-color: rgba(243,237,223,0.4);
}
.btn--ghost:hover { border-color: rgba(243,237,223,1); }
.btn--block { width: 100%; }
.btn:disabled, .btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.announcement-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 101;
  background: var(--color-bg-dark);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  min-height: 40px;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.announcement-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  padding: 8px var(--container-padding);
}
.announcement-bar__rotator { position: relative; width: 100%; height: 1.5em; }
.announcement-bar__slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; line-height: 1.4;
  opacity: 0; transform: translateY(70%);
  transition: opacity 450ms ease, transform 450ms ease;
  pointer-events: none; white-space: nowrap;
}
.announcement-bar__slide.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* Generiek inline-icoon dat met de tekst meeschaalt */
.ico { width: 1.05em; height: 1.05em; vertical-align: -0.15em; flex-shrink: 0; }
@media (max-width: 700px) {
  .announcement-bar__slide { font-size: var(--font-size-xs); }
}
@media (prefers-reduced-motion: reduce) {
  .announcement-bar__slide { transition: none; transform: none; }
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  position: fixed;
  top: var(--announcement-h);
  left: 0;
  right: 0;
  z-index: 100;
  /* Exact afgestemd op de beige achtergrond van het logo (#F2ECDE / #F1EBDD / #F2ECDF)
     zodat het logo-vlak naadloos in de header wegvalt */
  background: #F2ECDE;
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow 200ms ease;
}
.header.scrolled { box-shadow: var(--shadow-md); }
.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 110px;
}
.header__logo { display: flex; align-items: center; }
/* Op desktop volgt het logo de instelling "Logo-grootte" (variabele uit sections/header.liquid); op tablet en
   telefoon bepalen de media queries hieronder de grootte, passend bij de lagere header. */
.header__logo img { max-height: var(--logo-h, 90px); width: auto; }
.header__logo-text {
  font-family: var(--font-heading);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
}

.nav { display: flex; align-items: center; gap: var(--space-4); }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-primary);
  padding: 44px 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease, border-color 150ms ease;
}
.nav__item:hover > .nav__link { color: var(--color-text-muted); border-bottom-color: var(--color-primary); }
.nav__caret { width: 10px; height: 10px; transition: transform 150ms ease; }
.nav__item:hover .nav__caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
}
.nav__item:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown__link {
  display: block;
  padding: 10px 20px;
  font-size: 14px;
  color: var(--color-text);
  transition: background 120ms ease, color 120ms ease;
}
.dropdown__link:hover { background: var(--color-accent-light); color: var(--color-primary); }

.header__actions { display: flex; align-items: center; gap: 20px; }
.header__icon-btn {
  position: relative;
  color: var(--color-primary);
  display: flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
.header__icon-btn svg { width: 22px; height: 22px; }
.cart-badge {
  position: absolute;
  top: 4px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 600;
  border-radius: var(--radius-full);
  display: none;
  align-items: center;
  justify-content: center;
}
.cart-badge.is-visible { display: flex; }
.header__tooltip {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  white-space: nowrap;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-xs);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  opacity: 0; visibility: hidden;
  transition: opacity 150ms;
  pointer-events: none;
}
.header__icon-btn:hover .header__tooltip { opacity: 1; visibility: visible; }
.header__hamburger { display: none; }

@media (max-width: 1023px) {
  .header__inner { height: 84px; }
  .header__logo img { max-height: 68px; }
  .nav { display: none; }
  .header__hamburger {
    display: flex;
    width: 44px; height: 44px;
    align-items: center; justify-content: center;
    color: var(--color-primary);
  }
  .header__hamburger svg { width: 26px; height: 26px; color: var(--color-primary); }
  .header__tooltip { display: none; }
}

/* Telefoon: iets lagere header, logo blijft leesbaar */
@media (max-width: 599px) {
  .header__inner { height: 78px; }
  .header__logo img { max-height: 60px; }
}

/* Mobile menu */
.mobile-overlay {
  position: fixed; inset: 0;
  background: rgba(17,47,68,0.5);
  opacity: 0; visibility: hidden;
  transition: opacity 280ms ease;
  z-index: 150;
}
.mobile-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-menu {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 85vw; max-width: 360px;
  background: var(--color-bg);
  z-index: 160;
  transform: translateX(-100%);
  transition: transform 280ms cubic-bezier(0.25,0.46,0.45,0.94);
  overflow-y: auto;
  padding: var(--space-3);
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-3); }
.mobile-menu__logo { max-height: 64px; width: auto; }
.mobile-menu__close { width: 44px; height: 44px; display:flex; align-items:center; justify-content:center; font-size: 26px; color: var(--color-primary); }
.mobile-nav__item { border-bottom: 1px solid var(--color-border); }
.mobile-nav__link {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%;
  padding: 16px 4px;
  font-size: 18px;
  color: var(--color-primary);
  text-align: left;
}
.mobile-nav__sub { display: none; padding-bottom: 8px; }
.mobile-nav__item.is-open .mobile-nav__sub { display: block; }
.mobile-nav__item.is-open .mobile-nav__plus { transform: rotate(45deg); }
.mobile-nav__plus { transition: transform 200ms ease; font-size: 22px; line-height: 1; color: var(--color-text-muted); }
.mobile-nav__sublink { display: block; padding: 10px 16px; font-size: 15px; color: var(--color-text-muted); }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background: var(--color-bg-dark);
  min-height: 92vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.04;
  pointer-events: none;
}
.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 60% 40%;
  align-items: center;
  gap: var(--space-8);
  width: 100%;
}
.hero__content { padding: var(--space-10) 0; max-width: 620px; }
.hero__eyebrow {
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-wider);
  text-transform: uppercase;
  color: var(--color-text-inverse);
  opacity: 0.65;
  margin-bottom: 20px;
}
.hero__title {
  font-family: var(--font-heading);
  font-size: clamp(36px, 6vw, 68px);
  font-weight: 600;
  color: var(--color-text-inverse);
  line-height: 1.1;
  margin-bottom: var(--space-3);
}
.hero__text {
  font-size: 17px;
  color: var(--color-text-inverse);
  opacity: 0.8;
  max-width: 480px;
  line-height: 1.65;
  margin-bottom: var(--space-5);
}
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hero__visual {
  background: rgba(243,237,223,0.08);
  border: 1px solid rgba(243,237,223,0.15);
  border-radius: var(--radius-lg);
  height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 16px;
  color: rgba(243,237,223,0.3);
  overflow: hidden;
}
.hero__visual img { width: 100%; height: 100%; object-fit: cover; }
.hero__scroll {
  position: absolute;
  bottom: var(--space-3);
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
.hero__scroll span {
  font-size: var(--font-size-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-inverse);
  opacity: 0.5;
}
.hero__scroll-line {
  width: 2px; height: 32px;
  margin: 8px auto 0;
  background: var(--color-text-inverse);
  opacity: 0.5;
  animation: scrollPulse 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollPulse { 0%,100%{transform:scaleY(0.4);opacity:0.2;} 50%{transform:scaleY(1);opacity:0.6;} }

/* Hero entrance animatie */
.anim-in { opacity: 0; transform: translateY(20px); animation: fadeUp 600ms cubic-bezier(0.25,0.46,0.45,0.94) forwards; }
.anim-in.d1 { animation-delay: 0ms; }
.anim-in.d2 { animation-delay: 150ms; }
.anim-in.d3 { animation-delay: 300ms; }
.anim-in.d4 { animation-delay: 450ms; }
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1023px) {
  .hero { min-height: 60vh; }
  .hero__inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .hero__visual { display: block; height: 280px; border-radius: var(--radius-lg); overflow: hidden; margin-top: 0; }
  .hero__content { padding: var(--space-8) 0 0; max-width: 100%; }
  /* Snelheid op mobiel: geen ruisfilter (feTurbulence, onzichtbaar bij 4% dekking maar zwaar om te
     tekenen op trage telefoons) en geen invliegende hero-tekst (die begon onzichtbaar en vertraagde
     de eerste indruk met zo'n 1 seconde). Op desktop blijft beide zoals het was. */
  .hero::before { display: none; }
  .anim-in { opacity: 1; transform: none; animation: none; }
}
@media (max-width: 480px) {
  .hero { min-height: 0; }
  .hero__content { padding: var(--space-6) 0 0; }
  .hero__ctas .btn { width: 100%; }
}

/* =========================================================
   USP BAR
   ========================================================= */
.usp-bar { background: var(--color-white); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 28px 0; }
.usp-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.usp {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  border-right: 1px solid var(--color-border);
}
.usp:last-child { border-right: none; }
.usp__icon { color: var(--color-primary); flex-shrink: 0; }
.usp__icon svg { width: 26px; height: 26px; animation: iconFloat 3.2s ease-in-out infinite; }
.usp:nth-child(2) .usp__icon svg { animation-delay: .4s; }
.usp:nth-child(3) .usp__icon svg { animation-delay: .8s; }
.usp:nth-child(4) .usp__icon svg { animation-delay: 1.2s; }
.usp:hover .usp__icon svg { animation-duration: 1.4s; }
@keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.usp__title { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.usp__sub { font-size: 13px; color: var(--color-text-muted); }
@media (max-width: 900px) {
  .usp-bar__grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); }
  .usp:nth-child(2n) { border-right: none; }
  .usp:nth-child(-n+2) { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
}
@media (max-width: 540px) {
  .usp-bar__grid { grid-template-columns: 1fr; }
  .usp { border-right: none; }
  .usp:nth-child(-n+3) { padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border); }
}

/* =========================================================
   CATEGORY GRID
   ========================================================= */
.category { background: var(--color-bg); padding: var(--space-10) 0; }
.category__head { text-align: center; margin-bottom: 56px; }
.category__title { font-family: var(--font-heading); font-size: clamp(30px, 4.5vw, 46px); font-weight: 600; color: var(--color-primary); margin-bottom: 12px; }
.category__sub { font-size: 16px; color: var(--color-text-muted); }
.category__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.product-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform 250ms ease, box-shadow 250ms ease;
  display: flex;
  flex-direction: column;
}
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card__img {
  aspect-ratio: 4/3;
  background: var(--color-bg-dark);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-heading);
  font-size: 18px;
  overflow: hidden;
}
.product-card__img img { width: 100%; height: 100%; object-fit: cover; }
.product-card__body { padding: 28px; display: flex; flex-direction: column; flex: 1; }
.badge-price {
  align-self: flex-start;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 16px;
}
.product-card__title { font-family: var(--font-heading); font-size: 26px; font-weight: 600; color: var(--color-primary); margin-bottom: 10px; }
.product-card__desc { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-3); flex: 1; }
.arrow-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--color-primary);
}
.arrow-link span { transition: transform 200ms ease; }
.arrow-link:hover span { transform: translateX(4px); }
@media (max-width: 980px) { .category__grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .category__head { margin-bottom: var(--space-5); } }
@media (max-width: 560px) { .category__grid { grid-template-columns: 1fr; } }

/* =========================================================
   HOW IT WORKS
   ========================================================= */
/* ===== VOORDELEN GRID ===== */
.voordelen { padding: var(--space-10) 0; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.voordelen__title { font-family: var(--font-heading); font-size: clamp(26px, 4vw, 40px); font-weight: 600; color: var(--color-primary); text-align: center; margin-bottom: var(--space-8); }
.voordelen__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.voordeel { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); transition: box-shadow .2s, transform .2s; }
.voordeel:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.voordeel__icon { width: 48px; height: 48px; background: var(--color-primary); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.voordeel__icon svg { width: 22px; height: 22px; stroke: var(--color-text-inverse); }
.voordeel__title { font-family: var(--font-heading); font-size: 21px; font-weight: 700; color: var(--color-primary); }
.voordeel__text { font-size: 15px; color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 900px) { .voordelen__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .voordelen__grid { grid-template-columns: 1fr; } }

.how { background: var(--color-bg-dark); padding: var(--space-10) 0; color: var(--color-text-inverse); }
.how__title { font-family: var(--font-heading); font-size: clamp(30px, 4.5vw, 46px); font-weight: 600; text-align: center; margin-bottom: 56px; }
.how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); position: relative; }
.how__grid::before {
  content: ""; position: absolute; top: 98px; left: 12%; right: 12%;
  border-top: 1px dashed rgba(243,237,223,0.2);
}
.step { text-align: center; position: relative; }
.step__num { font-family: var(--font-heading); font-size: 64px; font-weight: 700; opacity: 0.2; line-height: 1; margin-bottom: 6px; }
.step__icon {
  width: 56px; height: 56px; margin: 0 auto;
  border: 1px solid rgba(243,237,223,0.3);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-dark);
  position: relative; z-index: 1;
  transition: transform 200ms ease, border-color 200ms ease;
}
.step:hover .step__icon { transform: scale(1.08); border-color: rgba(243,237,223,0.6); }
.step__icon svg { width: 28px; height: 28px; color: var(--color-text-inverse); animation: iconFloat 3.6s ease-in-out infinite; }
.step:nth-child(2) .step__icon svg { animation-delay: .5s; }
.step:nth-child(3) .step__icon svg { animation-delay: 1s; }
.step:nth-child(4) .step__icon svg { animation-delay: 1.5s; }
.step__title { font-size: 15px; font-weight: 600; margin-top: 16px; }
.step__text { font-size: 13px; color: rgba(243,237,223,0.7); line-height: 1.6; margin-top: 8px; }
@media (max-width: 900px) {
  .how__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
  .how__grid::before { display: none; }
  .how__title { margin-bottom: var(--space-5); }
}
@media (max-width: 560px) {
  .how__grid { grid-template-columns: 1fr; }
}

/* =========================================================
   TRUST SECTION
   ========================================================= */
.trust { background: var(--color-bg); padding: var(--space-10) 0; }
.trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.trust__title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--color-primary); margin-bottom: 12px; }
.trust__sub { font-size: 16px; color: var(--color-text-muted); margin-bottom: var(--space-4); }
.trust__list { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.trust__item { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--color-primary); }
.check-circle {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
}
.check-circle svg { width: 14px; height: 14px; color: var(--color-text-inverse); }
.review-card { position: relative; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-2); }
.review-google { position: absolute; top: 20px; right: 20px; width: 22px; height: 22px; line-height: 0; color: var(--color-primary); }
.review-google svg { width: 100%; height: 100%; display: block; }
.review-stars { display: flex; gap: 2px; margin-bottom: 12px; }
.review-stars svg { width: 16px; height: 16px; color: var(--color-star); }
.review-quote { font-family: var(--font-heading); font-size: 18px; font-style: italic; color: var(--color-primary); line-height: 1.5; margin-bottom: 12px; }
.review-name { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.review-date { font-size: 12px; color: var(--color-text-muted); }

/* Review slider */
.review-slider { align-self: center; width: 100%; min-width: 0; }
.review-slider__viewport { overflow: hidden; min-width: 0; }
.review-slider__track { display: flex; transition: transform 450ms cubic-bezier(0.25,0.46,0.45,0.94); align-items: stretch; }
.review-slider__slide { flex: 0 0 100%; min-width: 100%; display: flex; }
.review-slider__slide .review-card { margin-bottom: 0; width: 100%; }
.review-slider__controls { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.review-slider__dots { display: flex; gap: 8px; }
.review-slider__dot { width: 24px; height: 24px; padding: 0; background: none; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.review-slider__dot::after { content: ''; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--color-border); transition: background 150ms ease, transform 150ms ease; }
.review-slider__dot.is-active::after { background: var(--color-primary); transform: scale(1.35); }

@media (prefers-reduced-motion: reduce) {
  .usp__icon svg, .step__icon svg, .hero__scroll-line { animation: none !important; }
  .anim-in { animation: none !important; opacity: 1; transform: none; }
}
@media (max-width: 900px) { .trust__grid { grid-template-columns: 1fr; gap: var(--space-6); } }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--color-bg-dark); color: var(--color-text-inverse); padding: 64px 0 32px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); }
.footer__brand-logo { font-family: var(--font-heading); font-size: 20px; color: var(--color-text-inverse); margin-bottom: 16px; }
.footer__brand-img { display: inline-block; max-height: 72px; width: auto; border-radius: var(--radius-sm); }
.footer__brand-text { font-size: 13px; color: rgba(243,237,223,0.65); line-height: 1.6; }
.footer__social { display: flex; gap: 14px; margin-top: var(--space-3); }
.footer__social a { color: rgba(243,237,223,0.6); transition: color 150ms; }
.footer__social a:hover { color: rgba(243,237,223,1); }
.footer__social svg { width: 20px; height: 20px; }
.footer__col-title { font-size: 12px; letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; color: rgba(243,237,223,0.6); margin-bottom: 16px; }
.footer__links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer__links a { font-size: 14px; color: rgba(243,237,223,0.8); transition: color 150ms; }
.footer__links a:hover { color: rgba(243,237,223,1); }
.footer__contact-item { font-size: 14px; color: rgba(243,237,223,0.8); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.footer__wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-whatsapp); color: #fff;
  font-size: 14px; font-weight: 600;
  padding: 12px 20px; border-radius: var(--radius-full);
  margin-top: var(--space-2);
  transition: background 150ms;
}
.footer__wa:hover { background: #1da851; }
.footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  border-top: 1px solid rgba(243,237,223,0.15);
  padding-top: 24px; margin-top: 48px;
}
.footer__bottom, .footer__bottom a { font-size: 12px; color: rgba(243,237,223,0.6); }
.footer__bottom a:hover { color: rgba(243,237,223,0.8); }
.footer__pay { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-5); } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } .footer__bottom { flex-direction: column; align-items: flex-start; } }

/* =========================================================
   FLOATING WHATSAPP
   ========================================================= */
.wa-float {
  position: fixed; bottom: 20px; right: 20px;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  display: flex; align-items: center; justify-content: center;
  z-index: 150;
  box-shadow: var(--shadow-md);
}
.wa-float svg { width: 56px; height: 56px; }

/* =========================================================
   PRODUCT CONFIGURATOR
   ========================================================= */
.pdp { padding: var(--space-8) 0; background: var(--color-bg); }
/* Bewust GEEN grid-template-areas / grid-area: op sommige embeds (Shopify-preview)
   werd de naam-gebaseerde plaatsing niet betrouwbaar opgelost, waardoor .pdp__desc
   over de sticky gallery-foto heen viel i.p.v. eronder. Alles hieronder gebruikt
   daarom uitsluitend expliciete rij/kolomnummers - ondubbelzinnig, geen matching op
   naam nodig, kan dus niet meer misgaan. */
.pdp__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-rows: auto auto; gap: var(--space-6); align-items: start; }
.pdp__grid > .gallery-stick { grid-column: 1; grid-row: 1; }
.pdp__grid > .pdp__info { grid-column: 2; grid-row: 1; }
.pdp__grid > .pdp__desc { grid-column: 1 / -1; grid-row: 2; margin-top: var(--space-2); }
.pdp__head { margin-bottom: var(--space-5); }
.pdp__crumbs { font-size: 13px; color: var(--color-text-muted); margin-bottom: 12px; }
.pdp__crumbs a:hover { color: var(--color-primary); }
.pdp__title { font-family: var(--font-heading); font-size: clamp(30px, 4.5vw, 42px); font-weight: 600; color: var(--color-primary); line-height: 1.1; margin-bottom: 12px; }
.pdp__intro { font-size: 16px; color: var(--color-text-muted); max-width: 560px; margin-bottom: var(--space-2); }

/* Media-gallery (links) - blijft in beeld staan naast de (groeiende) opties/prijskolom.
   .gallery-stick vult de volledige hoogte van de grid-rij (align-self: stretch), zodat
   het "stick"-bereik van .gallery daar exact ophoudt - vlak vóór de productbeschrijving-rij
   begint. Zonder deze wrapper strekt de sticky-context zich uit over de hele grid
   (inclusief de beschrijving-rij), waardoor de foto's over de tekst heen bleven hangen. */
@media (min-width: 1024px) {
  .gallery-stick { align-self: stretch; }
  .gallery { position: sticky; top: var(--pdp-sticky-top); }
  /* De foto mag nooit hoger worden dan het zichtbare deel van het scherm. Zonder deze
     begrenzing valt de onderkant van de galerij (de thumbnails) onder de schermrand
     zodra de foto blijft plakken - op een 1366x768-laptop is dat zo'n 150px - en kan de
     bezoeker daar niet meer bij, want een plakkend element scrollt per definitie niet
     mee. Op een ruim scherm verandert er niets; op een kleiner scherm wordt de foto wat
     minder hoog en snijdt object-fit: cover hem netjes bij. */
  .gallery__stage { max-height: calc(100vh - var(--pdp-sticky-top) - var(--pdp-thumbs-h)); }
}
.gallery__stage { position: relative; aspect-ratio: 1/1; background: var(--color-bg-dark); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.gallery__item { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 250ms ease; }
.gallery__item.is-active { opacity: 1; visibility: visible; }
.gallery__item img, .gallery__item video, .gallery__item iframe { width: 100%; height: 100%; object-fit: cover; border: 0; }
/* Productvideo's (vaak staand): volledig in beeld op een donkere achtergrond i.p.v. bijgesneden. */
.gallery__item[data-type="video"] video { object-fit: contain; background: #000; }
.gallery__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: rgba(243,237,223,0.45); font-family: var(--font-heading); font-size: 18px; }
.gallery__ph--video { background: radial-gradient(circle at 50% 42%, #28485c, #142f3f); color: rgba(243,237,223,0.6); }
.gallery__play { width: 64px; height: 64px; border-radius: var(--radius-full); background: rgba(243,237,223,0.12); border: 2px solid rgba(243,237,223,0.5); display: flex; align-items: center; justify-content: center; }
.gallery__play svg { width: 26px; height: 26px; color: var(--color-text-inverse); }
.gallery__thumbs { display: flex; gap: 10px; margin-top: 12px; overflow-x: auto; padding-bottom: 4px; }
.gallery__thumb { flex: 0 0 auto; width: 72px; height: 72px; border-radius: var(--radius-md); overflow: hidden; border: 2px solid var(--color-border); background: var(--color-bg-dark); cursor: pointer; padding: 0; transition: border-color 150ms ease; }
.gallery__thumb.is-active { border-color: var(--color-primary); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; font-size: 11px; color: rgba(243,237,223,0.6); }
.gallery__thumb-ph svg { width: 13px; height: 13px; }
.gallery__thumb--video .gallery__thumb-ph { background: radial-gradient(circle at 50% 42%, #28485c, #142f3f); }

/* Lightbox: klik op de hoofdfoto voor een vergrote weergave. */
.gallery__item[data-type="image"] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: rgba(10,16,20,0.92); padding: var(--space-5); opacity: 0; visibility: hidden; transition: opacity 200ms ease; }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__img { max-width: min(92vw, 1100px); max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-md); cursor: zoom-out; }
.lightbox__close { position: absolute; top: var(--space-4); right: var(--space-4); width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(243,237,223,0.12); border: 2px solid rgba(243,237,223,0.5); display: flex; align-items: center; justify-content: center; color: var(--color-text-inverse); cursor: pointer; }
.lightbox__close svg { width: 20px; height: 20px; }
@media (max-width: 640px) {
  .lightbox__close { top: var(--space-3); right: var(--space-3); }
}
/* USP-strip (rechts, onder de titel) */
.pdp__usps { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: var(--space-3) 0 var(--space-5); padding: var(--space-3) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.pdp__usp { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--color-primary); }
.pdp__usp svg { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }

.config__progress-meta { font-size: 12px; color: var(--color-text-muted); letter-spacing: 0.06em; margin-bottom: 8px; }
.config__progress { height: 3px; background: var(--color-border); border-radius: var(--radius-full); overflow: hidden; margin-bottom: var(--space-5); }
.config__progress-bar { height: 100%; width: 0%; background: var(--color-primary); transition: width 300ms ease; }

.config__step { margin-bottom: var(--space-3); }
.config__step-title { font-size: 16px; font-weight: 600; color: var(--color-primary); margin-bottom: 10px; }
.config__step-title-row { position: relative; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.config__step-title-row .config__step-title { margin-bottom: 0; }
.info-wrap { position: relative; display: inline-flex; }
.info-badge {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-text-muted);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-size: 12px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.info-badge:hover, .info-badge[aria-expanded="true"] { border-color: var(--color-primary); color: var(--color-primary); }
.info-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 10px);
  left: 0;
  width: 320px;
  max-width: min(360px, calc(100vw - 48px));
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 12px 32px rgba(17, 47, 68, 0.16);
  padding: 16px;
  font-size: 13px; line-height: 1.5; color: var(--color-primary);
}
.info-panel::before {
  content: '';
  position: absolute;
  top: -6px; left: 14px;
  width: 12px; height: 12px;
  background: var(--color-white);
  border-left: 1px solid var(--color-border);
  border-top: 1px solid var(--color-border);
  transform: rotate(45deg);
}
.info-panel p { margin: 0 0 8px 0; }
.info-panel p:last-child { margin-bottom: 0; }
.info-panel__todo { font-style: italic; color: var(--color-text-muted); }
.info-panel img { display: block; max-width: 100%; border-radius: var(--radius-sm, 4px); }
.info-panel__photos { display: flex; gap: 10px; margin-top: 10px; }
.info-panel__photo { flex: 1; min-width: 0; text-align: center; }
.info-panel__photo img { width: 100%; }
.info-panel__photo span { display: block; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--color-primary); }
.field__hint { font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.radio-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.radio-cards--2 { grid-template-columns: 1fr 1fr; }
.radio-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  min-height: 44px;
}
.radio-card:hover { border-color: var(--color-text-muted); }
.radio-card input { position: absolute; opacity: 0; pointer-events: none; }
.radio-card.is-selected { border-color: var(--color-primary); background: var(--color-accent-light); }
.radio-card__icon { flex-shrink: 0; color: var(--color-primary); display: flex; }
.radio-card__icon svg { width: 22px; height: 22px; }
.radio-card__foto { flex-shrink: 0; width: 48px; height: 40px; object-fit: contain; border-radius: var(--radius-sm, 4px); }
.radio-card__foto--staand { width: 28px; height: 48px; }
.radio-card__foto--hor { width: 48px; height: 48px; }
.radio-card > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.radio-card__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--color-primary); }
.radio-card__sub { display: block; margin-top: 3px; font-size: 12px; line-height: 1.35; color: var(--color-text-muted); }
.radio-card__badge { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-success); }

/* color swatches */
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch {
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  flex: 0 0 auto;
  cursor: pointer;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 5px 12px 5px 5px;
  background: var(--color-white);
  transition: border-color 150ms ease, background 150ms ease;
}
.swatch:hover { border-color: var(--color-text-muted); }
.swatch input { position: absolute; opacity: 0; pointer-events: none; }
.swatch__bol {
  width: 20px; height: 20px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(17,47,68,0.18);
  flex-shrink: 0;
  transition: box-shadow 150ms ease;
}
.swatch.is-selected { border-color: var(--color-primary); background: var(--color-accent-light); }
.swatch.is-selected .swatch__bol { box-shadow: 0 0 0 2px var(--color-white), 0 0 0 3px var(--color-primary); }
.swatch__name { font-size: 12.5px; font-weight: 600; color: var(--color-primary); white-space: nowrap; }
@media (max-width: 480px) { .swatch { flex: 1 1 calc(50% - 8px); white-space: normal; } .swatch__name { white-space: normal; } }
.swatch-link { display: inline-block; margin-top: 12px; font-size: 13px; color: var(--color-primary); text-decoration: underline; }

/* sub-options (smart curtain) */
.subopt { display: none; margin-top: 12px; gap: 20px; }
.subopt.is-visible { display: flex; }
.radio-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-primary); cursor: pointer; }

/* inputs */
.dims { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--color-primary); margin-bottom: 8px; }
.field__wrap { position: relative; }
.field input {
  width: 100%;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 44px 14px 16px;
  font-size: 16px;
  color: var(--color-primary);
  transition: border-color 150ms, box-shadow 150ms;
}
.field input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(17,47,68,0.1); }
.field__suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--color-text-muted); }
.field.has-error input { border-color: var(--color-error); }
.field__error { display: none; font-size: 12px; color: var(--color-error); margin-top: 6px; }
.field.has-error .field__error { display: block; }
.field__hint { display: block; font-size: 12px; color: var(--color-text-muted); margin-top: 6px; }
.measure-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 13px; color: var(--color-primary); cursor: pointer; }
.measure-link:hover { text-decoration: underline; }
/* Product met meetvideo: de link wordt een duidelijke knop met afspeelicoon, zodat de klant weet dat er een video opent. */
.measure-link--video { gap: 8px; margin-top: 12px; padding: 4px 12px 4px 4px; border: 1.5px solid var(--color-primary); border-radius: var(--radius-full); background: var(--color-white); font-size: 13px; font-weight: 600; line-height: 1.2; transition: background 150ms, color 150ms; }
.measure-link--video:hover { background: var(--color-primary); color: var(--color-text-inverse); text-decoration: none; }
.measure-link__play { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--color-primary); color: var(--color-text-inverse); display: inline-flex; align-items: center; justify-content: center; transition: background 150ms, color 150ms; }
.measure-link__play svg { width: 9px; height: 9px; margin-left: 1px; fill: currentColor; }
.measure-link--video:hover .measure-link__play { background: var(--color-text-inverse); color: var(--color-primary); }
.measure-link--uitleg .measure-link__play svg { width: 13px; height: 13px; margin-left: 0; fill: none; }

/* Price panel */
.price-panel {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-md);
}
.price-panel__name { font-family: var(--font-heading); font-size: 22px; font-weight: 600; color: var(--color-primary); margin-bottom: var(--space-3); }
.price-summary { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-3); }
.price-summary__row { display: flex; justify-content: space-between; font-size: 13px; }
.price-summary__label { color: var(--color-text-muted); }
.price-summary__value { color: var(--color-primary); font-weight: 500; }
.divider { height: 1px; background: var(--color-border); margin: var(--space-3) 0; }
.price-label { font-size: 13px; color: var(--color-text-muted); }
.price-amount { font-family: var(--font-heading); font-size: 42px; font-weight: 700; color: var(--color-primary); line-height: 1.1; }
.price-amount.flash { animation: priceFlash 200ms ease; }
@keyframes priceFlash { 0%{transform:scale(1);} 50%{transform:scale(1.05); color: var(--color-success);} 100%{transform:scale(1);} }
.price-vat { font-size: 12px; color: var(--color-text-muted); }
.price-note { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 12px; color: var(--color-text-muted); margin-top: 12px; }
.price-note__item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.price-wa { display: block; text-align: center; font-size: 13px; color: var(--color-primary); margin-top: 16px; }
.price-wa:hover { text-decoration: underline; }
.price-error { display: none; font-size: 13px; color: var(--color-error); background: rgba(192,57,43,0.08); padding: 12px; border-radius: var(--radius-md); margin-bottom: 16px; }
.price-error.is-visible { display: block; }

@media (max-width: 1023px) {
  .pdp__grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .pdp__grid > .gallery-stick { grid-column: 1; grid-row: 1; }
  .pdp__grid > .pdp__info { grid-column: 1; grid-row: 2; }
  .pdp__grid > .pdp__desc { grid-column: 1; grid-row: 3; }
  .gallery { position: static; }
  .price-panel { position: static; box-shadow: none; border: none; padding: 0; background: transparent; }
  .price-panel .divider:first-of-type { display: none; }
  /* De in-flow bestelknop blijft op mobiel gewoon op zijn plek (zoals desktop). */
  .mobile-pricebar {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--color-white);
    border-top: 1px solid var(--color-border);
    padding: 12px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    z-index: 90;
    box-shadow: 0 -4px 16px rgba(17,47,68,0.08);
    transform: translateY(110%);
    transition: transform 260ms ease;
    will-change: transform;
  }
  .mobile-pricebar.is-visible { transform: translateY(0); }
  .mobile-pricebar__price { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--color-primary); }
  .mobile-pricebar .btn { padding: 14px 24px; }
  .pdp { padding-bottom: 90px; }
}
.mobile-pricebar { display: none; }
@media (max-width: 1023px) { .mobile-pricebar { display: flex; } }

/* =========================================================
   MODAL
   ========================================================= */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(17,47,68,0.6);
  backdrop-filter: blur(2px);
  display: none; align-items: center; justify-content: center;
  z-index: 300; padding: 20px;
}
.modal-overlay.is-open { display: flex; }
.modal {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  max-width: 560px; width: 100%;
  /* Zonder dit schuift een hoge afbeelding (zoals de meetposters) het kruisje
     boven de viewport uit: flex-centering laat een te grote child gewoon
     doorlopen in plaats van hem te clippen. Kruisje en titel blijven daarom
     buiten de scrollende .modal__body staan, zodat ze altijd bereikbaar zijn. */
  max-height: 90vh;
  display: flex; flex-direction: column;
  padding: var(--space-5);
  position: relative;
  animation: modalIn 200ms ease;
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal__close { position: absolute; top: 16px; right: 16px; font-size: 26px; color: var(--color-text-muted); width: 36px; height: 36px; flex: 0 0 auto; }
.modal__title { font-family: var(--font-heading); font-size: 28px; font-weight: 600; color: var(--color-primary); margin-bottom: 16px; flex: 0 0 auto; }
.modal__body { overflow-y: auto; }
.modal__img { background: var(--color-accent-light); border-radius: var(--radius-md); padding: 40px; text-align: center; color: var(--color-text-muted); margin-bottom: 16px; font-size: 14px; }
.modal__media { border-radius: var(--radius-md); overflow: hidden; margin-bottom: 16px; }
.modal__media--embed { position: relative; padding-top: 56.25%; }
.modal__media--embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Eigen uitlegvideo in het meethulp-venster: volle breedte, anders valt hij op zijn eigen afmeting buiten het venster. */
.modal__media video { display: block; width: 100%; height: auto; background: #000; }
.modal__text { font-size: 14px; color: var(--color-text); line-height: 1.7; margin-bottom: 20px; }

/* =========================================================
   CART DRAWER
   ========================================================= */
.cart-overlay { position: fixed; inset: 0; background: rgba(17,47,68,0.4); opacity: 0; visibility: hidden; transition: opacity 300ms ease; z-index: 200; }
.cart-overlay.is-open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 420px; max-width: 100vw;
  background: var(--color-white);
  z-index: 210;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.25,0.46,0.45,0.94), visibility 0s linear 300ms;
  /* Dicht: niet focusbaar en niet bereikbaar voor schermlezers (anders faalt aria-hidden). */
  visibility: hidden;
  display: flex; flex-direction: column;
}
.cart-drawer.is-open { transform: translateX(0); visibility: visible; transition-delay: 0s; }
.cart-drawer__head { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3); border-bottom: 1px solid var(--color-border); }
.cart-drawer__title { font-family: var(--font-heading); font-size: 24px; color: var(--color-primary); }
.cart-drawer__close { font-size: 26px; color: var(--color-text-muted); width: 44px; height: 44px; }
.cart-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--space-3); }
.cart-item { display: flex; gap: 14px; padding: 20px 0; border-bottom: 1px solid var(--color-border); }
.cart-item__img { width: 64px; height: 64px; flex-shrink: 0; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.cart-item__img--ph { background: var(--color-accent-light); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); }
.cart-item__img--ph svg { width: 26px; height: 26px; opacity: 0.6; }
.cart-item__img.is-broken { background: var(--color-accent-light); }
.cart-item__info { flex: 1; min-width: 0; }
.cart-item__name { font-size: 14px; font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.cart-item__prop { font-size: 12px; color: var(--color-text-muted); }
.cart-item__foot { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.cart-item__price { font-size: 16px; font-weight: 600; color: var(--color-primary); }
.cart-item__remove { font-size: 12px; color: var(--color-text-muted); }
.cart-item__remove:hover { color: var(--color-error); }
.cart-empty { text-align: center; padding: var(--space-10) var(--space-3); }
.cart-empty svg { width: 48px; height: 48px; color: var(--color-border); margin: 0 auto 16px; }
.cart-empty__title { font-family: var(--font-heading); font-size: 20px; color: var(--color-primary); margin-bottom: 12px; }
.cart-drawer__foot { border-top: 1px solid var(--color-border); padding: var(--space-3); }
.cart-subtotal { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.cart-subtotal strong { font-weight: 600; }
.cart-shipnote { font-size: 12px; color: var(--color-text-muted); margin-bottom: 16px; }

/* =========================================================
   PRODUCT ACCORDION
   ========================================================= */
.accordion { background: var(--color-bg); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.accordion__inner { max-width: 800px; margin: 0 auto; }
.acc-item { border-bottom: 1px solid var(--color-border); }
.acc-head { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; text-align: left; font-size: 15px; font-weight: 600; color: var(--color-primary); }
.acc-icon { font-size: 22px; transition: transform 200ms ease; color: var(--color-text-muted); }
.acc-item.is-open .acc-icon { transform: rotate(45deg); }
.acc-body { max-height: 0; overflow: hidden; transition: max-height 250ms ease; }
.acc-body__inner { padding: 0 0 16px; font-size: 14px; color: var(--color-text-muted); line-height: 1.7; }
.acc-body__inner a { color: var(--color-primary); font-weight: 600; }
/* Meetvideo in het antwoord op "Hoe meet ik op?". De vaste 16:9-verhouding houdt de hoogte stabiel voordat de video geladen is,
   anders knipt de ingeklapte accordeon (max-height uit scrollHeight) de video af. */
.acc-video { margin: 4px 0 8px; max-width: 560px; border-radius: var(--radius-md); overflow: hidden; }
.acc-video video { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; background: #000; object-fit: contain; }

/* =========================================================
   GENERIC PAGE / FORMS (offerte, contact)
   ========================================================= */
.page-section { padding: var(--space-10) 0; background: var(--color-bg); }
.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); align-items: start; }
.lead-title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--color-primary); margin-bottom: 16px; }
.lead-text { font-size: 16px; color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); }
.form-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); }
.form-group { margin-bottom: var(--space-3); }
.form-group label { display: block; font-size: 14px; font-weight: 600; color: var(--color-primary); margin-bottom: 8px; }
.form-group .hint { font-weight: 400; color: var(--color-text-muted); font-size: 12px; }
.form-control {
  width: 100%; border: 2px solid var(--color-border); border-radius: var(--radius-md);
  padding: 14px 16px; font-size: 16px; color: var(--color-primary); background: var(--color-white);
  transition: border-color 150ms, box-shadow 150ms;
}
.form-control:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(17,47,68,0.1); }
textarea.form-control { resize: vertical; min-height: 90px; }
.success-banner { display: none; background: var(--color-success); color: #fff; padding: 14px 18px; border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: 14px; }
.success-banner.is-visible { display: block; }
.form-error { background: rgba(192,57,43,0.08); color: var(--color-error); padding: 12px 16px; border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: 14px; }
.form-error[hidden] { display: none; }

/* Locatie-SEO (pSEO-pilot): zie sections/locatie-seo.liquid voor de opbouw en de
   toelichting waarom hier nergens een vast bedrag in de tekst staat. */
.locatie-seo__inner { max-width: 760px; }
.locatie-seo__eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 8px; }
.locatie-seo__hook { font-family: var(--font-heading); font-style: italic; font-size: 20px; color: var(--color-primary); margin-bottom: 14px; }
.locatie-seo__title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--color-primary); margin-bottom: 12px; }
.locatie-seo__promise { font-weight: 700; color: var(--color-primary); font-size: 17px; margin-bottom: 16px; }
.locatie-seo__intro { font-size: 16px; color: var(--color-text); line-height: 1.7; margin-bottom: var(--space-3); }
.locatie-seo__proof { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: var(--space-4); text-decoration: none; color: var(--color-primary); border-bottom: 1px solid var(--color-border); padding-bottom: var(--space-3); width: 100%; }
.locatie-seo__stars { color: var(--color-star); letter-spacing: 1px; }
.locatie-seo__proof-link { font-size: 13px; color: var(--color-text-muted); text-decoration: underline; }
.locatie-seo__products-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-primary); margin-bottom: 12px; }
.locatie-seo__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: var(--space-3); }
.locatie-seo__opt { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 14px 16px; background: var(--color-bg-alt); }
.locatie-seo__opt strong { font-size: 14.5px; color: var(--color-primary); }
.locatie-seo__opt span { font-size: 12.5px; color: var(--color-text-muted); }
.locatie-seo__price { font-weight: 700; color: var(--color-primary) !important; }
.locatie-seo__note, .locatie-seo__faq { padding: 14px 16px; background: var(--color-bg-alt); border: 1px dashed var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); font-size: 14.5px; }
.locatie-seo__faq-q { font-weight: 700; color: var(--color-primary); margin-bottom: 4px; }
.locatie-seo__kennis { margin-bottom: var(--space-3); }
.locatie-seo__kennis-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.locatie-seo__kennis-list a { font-size: 14.5px; color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.locatie-seo__kennis-list a:hover { text-decoration-thickness: 2px; }
.locatie-seo__cta { margin-top: var(--space-3); }
.locatie-seo__trust { font-size: 13px; color: var(--color-text-muted); margin-top: 10px; }
@media (max-width: 767px) {
  .locatie-seo__grid { grid-template-columns: 1fr; }
}
.postcode-status { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; }
.postcode-status:empty { display: none; }
.postcode-status--checking { color: var(--color-text-muted); }
.postcode-status--ok { color: var(--color-success); font-weight: 600; }
.postcode-status--far { color: var(--color-error); font-weight: 600; }
.postcode-status--error { color: var(--color-text-muted); }
.montage-opt-block { margin-bottom: var(--space-2); }
.montage-opt-row { display: flex; align-items: flex-start; gap: 8px; }
.montage-opt-row .info-wrap { margin-top: 2px; }
.montage-opt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 4px; font-weight: 600; color: var(--color-primary); cursor: pointer; }
.montage-opt input { width: 16px; height: 16px; accent-color: var(--color-primary); }
.montage-opt__price { font-weight: 400; color: var(--color-text-muted); font-size: 13px; }
.montage-opt__postcode { margin-top: 10px; max-width: 240px; }
.montage-opt__postcode[hidden] { display: none; }
@media (max-width: 900px) { .split-grid { grid-template-columns: 1fr; gap: var(--space-6); } .dims { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .radio-cards, .radio-cards--2 { grid-template-columns: 1fr; } }

/* =========================================================
   MOBIELE VERFIJNING (telefoon)
   Compactere verticale ritmes + ademruimte op kleine schermen.
   ========================================================= */
@media (max-width: 640px) {
  .category,
  .how,
  .trust,
  .page-section { padding: var(--space-8) 0; }
  .pdp { padding-top: var(--space-5); }
  .category__head { margin-bottom: var(--space-4); }
  .how__title { margin-bottom: var(--space-4); }
  .form-card { padding: var(--space-3); }
  .product-card__body { padding: 20px; }
}

/* Smalle telefoons: minder zijwaartse padding zodat content niet inklemt */
@media (max-width: 400px) {
  :root { --container-padding: 18px; }
  .btn { padding: 14px 22px; }
  .announcement-bar__text { font-size: 10px; letter-spacing: 0.04em; }
}

/* =========================================================
   TRUST-BADGES (onder de koopknop op de PDP)
   ========================================================= */
.trust-badges { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.trust-badges__pay { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-bottom: var(--space-3); }
.pay-logo { height: 30px; padding: 4px 8px; background: #fff; border: 1px solid var(--color-border); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); }
.pay-logo svg { height: 100%; width: auto; display: block; }
.trust-badges__list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.trust-badge { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 500; color: var(--color-primary); }
.trust-badge svg { width: 18px; height: 18px; color: var(--color-primary); flex-shrink: 0; }

/* =========================================================
   VOOR / NA VERGELIJKING (before-after slider)
   ========================================================= */
.compare-section { background: var(--color-bg-alt); padding: var(--space-10) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.compare__head { text-align: center; margin-bottom: var(--space-6); }
.compare__title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--color-primary); margin-bottom: 12px; }
.compare__sub { font-size: 16px; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; }
.compare { position: relative; max-width: 880px; margin: 0 auto; aspect-ratio: 16/10; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); user-select: none; touch-action: pan-y; }
.compare__pane { position: absolute; inset: 0; overflow: hidden; }
.compare__pane img { width: 100%; height: 100%; object-fit: cover; }
.compare__after { clip-path: inset(0 0 0 50%); }
.compare__ph { position: absolute; inset: 0; display: flex; align-items: center; font-family: var(--font-heading); font-size: clamp(15px, 2.4vw, 22px); text-align: center; }
.compare__ph--before { justify-content: flex-start; padding-left: 7%; background: radial-gradient(circle at 30% 35%, #28485c, #142f3f); color: rgba(243,237,223,0.55); }
.compare__ph--after { justify-content: flex-end; padding-right: 7%; background: #1c3a4c; color: rgba(243,237,223,0.7); }
.compare__ph--after::after { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(243,237,223,0.06) 4px 5px), repeating-linear-gradient(90deg, transparent 0 4px, rgba(243,237,223,0.06) 4px 5px); pointer-events: none; }
.compare__ph span { position: relative; z-index: 1; }
.compare__label { position: absolute; bottom: 16px; z-index: 3; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #fff; background: rgba(17,47,68,0.72); padding: 6px 12px; border-radius: var(--radius-full); }
.compare__before .compare__label { left: 16px; }
.compare__after .compare__label { right: 16px; }
.compare__divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); z-index: 3; pointer-events: none; }
.compare__handle { position: absolute; top: 50%; left: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); background: #fff; border-radius: var(--radius-full); box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; color: var(--color-primary); z-index: 4; pointer-events: none; }
.compare__handle svg { width: 22px; height: 22px; }
.compare__range { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; background: transparent; cursor: ew-resize; z-index: 5; }
.compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 46px; height: 46px; border-radius: 50%; cursor: ew-resize; }
.compare__range::-moz-range-thumb { width: 46px; height: 46px; border: none; border-radius: 50%; background: transparent; cursor: ew-resize; }

/* =========================================================
   ANDERE PRODUCTEN (onderaan de productpagina's)
   ========================================================= */
.cross-sell { background: var(--color-bg); padding: var(--space-6) 0 var(--space-10); }
.cross-sell__title { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 32px); font-weight: 600; color: var(--color-primary); margin-bottom: 6px; }
.cross-sell__sub { font-size: 14px; color: var(--color-text-muted); margin-bottom: var(--space-4); }

/* Carrousel-achtig: schuift horizontaal (klik op een pijl, of swipen op
   mobiel), maar beweegt nooit uit zichzelf - geen autoplay/interval, in
   tegenstelling tot de reviewslider elders op de site. */
.cross-sell__carousel { position: relative; }
.cross-sell__grid {
  display: flex;
  gap: var(--space-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.cross-sell__grid::-webkit-scrollbar { display: none; }
.cross-sell__grid .product-card { flex: 0 0 260px; scroll-snap-align: start; }
.cross-sell__arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-white); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm); color: var(--color-primary);
  z-index: 2; transition: opacity 150ms, box-shadow 150ms;
}
.cross-sell__arrow svg { width: 18px; height: 18px; }
.cross-sell__arrow:hover { box-shadow: var(--shadow-md); }
.cross-sell__arrow--prev { left: -8px; }
.cross-sell__arrow--next { right: -8px; }
.cross-sell__arrow[disabled] { opacity: 0.35; cursor: default; pointer-events: none; }
@media (max-width: 640px) {
  /* Op smalle schermen vallen de pijlen anders over de kaarten heen; ruimte
     ervoor maken zodat de eerste/laatste kaart niet erachter verdwijnt. */
  .cross-sell__grid { padding: 0 36px; scroll-padding: 0 36px; }
  .cross-sell__arrow--prev { left: 0; }
  .cross-sell__arrow--next { right: 0; }
}

/* =========================================================
   GOOGLE-REVIEWS (aggregaat + geverifieerde reviews)
   ========================================================= */
.reviews-aggregate { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.reviews-aggregate__g { width: 30px; height: 30px; flex-shrink: 0; }
.reviews-aggregate__score { font-family: var(--font-heading); font-size: 36px; font-weight: 700; color: var(--color-primary); line-height: 1; }
.reviews-aggregate__col { display: flex; flex-direction: column; gap: 3px; }
.reviews-aggregate__stars { color: var(--color-star); font-size: 15px; letter-spacing: 2px; }
.reviews-aggregate__meta { font-size: 12px; color: var(--color-text-muted); }
.reviews-aggregate__link { font-size: 13px; font-weight: 600; color: var(--color-primary); text-decoration: underline; }
.reviews-aggregate__link:hover { color: var(--color-primary-hover); }
.review-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding-right: 30px; }
.review-avatar { width: 42px; height: 42px; border-radius: var(--radius-full); background: var(--color-accent-light); color: var(--color-primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.review-card__meta { min-width: 0; }
.review-verified { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--color-text-muted); margin-top: 2px; }
.review-verified svg { width: 13px; height: 13px; }

/* =========================================================
   SHOPPABLE SFEERFOTO (hotspots)
   ========================================================= */
.hotspots-section { background: var(--color-bg-alt); padding: var(--space-10) 0; border-top: 1px solid var(--color-border); }
.hotspots__head { text-align: center; margin-bottom: var(--space-6); }
.hotspots__title { font-family: var(--font-heading); font-size: clamp(28px, 4vw, 40px); font-weight: 600; color: var(--color-primary); margin-bottom: 12px; }
.hotspots__sub { font-size: 16px; color: var(--color-text-muted); max-width: 560px; margin: 0 auto; }
.hotspots { position: relative; max-width: 1000px; margin: 0 auto; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.hotspots__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hotspot { position: absolute; transform: translate(-50%, -50%); z-index: 2; }
.hotspot__dot { display: block; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-white); box-shadow: var(--shadow-md); position: relative; cursor: pointer; }
.hotspot__dot::before { content: "+"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-primary); font-size: 20px; line-height: 1; }
.hotspot__dot::after { content: ""; position: absolute; inset: -6px; border-radius: var(--radius-full); border: 2px solid rgba(255,255,255,0.65); animation: hotspotPulse 2.2s ease-out infinite; }
@keyframes hotspotPulse { 0% { transform: scale(0.75); opacity: 0.85; } 100% { transform: scale(1.7); opacity: 0; } }
.hotspot__card { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(6px); width: 210px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 16px; text-align: left; opacity: 0; visibility: hidden; transition: opacity 180ms ease, transform 180ms ease; z-index: 3; }
.hotspot.is-open .hotspot__card { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.hotspot__card::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 7px solid transparent; border-top-color: var(--color-white); }
.hotspot__name { display: block; font-size: 14px; font-weight: 600; color: var(--color-primary); }
.hotspot__price { display: block; font-size: 13px; color: var(--color-text-muted); margin: 2px 0 10px; }
.hotspot__link { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--color-primary); }
.hotspot__link span { transition: transform 200ms ease; }
.hotspot__link:hover span { transform: translateX(4px); }
/* Alle touch-apparaten (mobiel én tablet, tot desktop-breakpoint 1024px):
   de popup-kaart wordt op deze breedtes afgekapt door de overflow van de
   fotocontainer. Daarom tonen we hem als vaste kaart onderin het scherm. */
@media (max-width: 1023px) {
  /* Grotere raakvlakken voor touch */
  .hotspot__dot { width: 40px; height: 40px; }
  .hotspot__dot::before { font-size: 26px; }
  /* Transform weghalen zodat de fixed-kaart t.o.v. het scherm positioneert
     (niet t.o.v. de hotspot); punt centreren via negatieve marges. */
  .hotspot { transform: none; margin-left: -20px; margin-top: -20px; }
  /* Kaart als vaste kaart linksonder, met ruimte rechts voor de WhatsApp-knop
     zodat beide zichtbaar blijven zonder overlap. Fixed = nooit afgekapt. */
  .hotspot__card {
    position: fixed;
    left: 16px; right: 88px; bottom: 20px; top: auto;
    width: auto; max-width: 360px; margin: 0;
    transform: translateY(24px); padding: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.28);
    z-index: 140;
  }
  .hotspot.is-open .hotspot__card { transform: translateY(0); }
  .hotspot__card::after { display: none; }
  .hotspot__name { font-size: 16px; }
  .hotspot__price { font-size: 14px; }
  .hotspot__link { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .hotspot__dot::after { animation: none !important; } }

/* ===== PDP conversie-uitbreidingen ===== */
/* Branding-eyebrow + subtitel + social proof */
.pdp__brand { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 10px; }
.pdp__subtitle { font-size: 16px; color: var(--color-text-muted); line-height: 1.5; margin: -4px 0 14px; }
.pdp__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 4px; }
.pdp__rating { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.pdp__stars { color: var(--color-star); font-size: 15px; letter-spacing: 2px; }
.pdp__rating-text { font-size: 13px; color: var(--color-primary); }
.pdp__rating:hover .pdp__rating-text { text-decoration: underline; }
.pdp__social { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--color-success); font-weight: 600; }
.pdp__social svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Reveal-panel: verschijnt zodra de maten kloppen */
.config__reveal { border-top: 1px dashed var(--color-border); padding-top: var(--space-3); margin-bottom: var(--space-3); }
.config__reveal:not([hidden]) { animation: revealIn 320ms ease; }
@keyframes revealIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.config__reveal-hint { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--color-success); margin-bottom: var(--space-3); }
.config__reveal-hint svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Kozijn-in-plaats-van-op-uitzondering bij de maatstap: bewust géén kader of
   nadruk, alleen de zeldzame klant die dit nodig heeft leest het - dezelfde
   lichte toon als .measure-link ernaast, zonder ermee te concurreren. */
.kozijn-note { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--color-text-muted); }
.kozijn-note a { color: var(--color-primary); text-decoration: underline; }

/* Offerte-only producten (plissé, slim gordijn): contactvelden onderin de configurator,
   waar bij de andere producten de prijs en de bestelknop staan. Visueel afgezet met een
   eigen kaartje, zodat de klant ziet dat dit de laatste stap is. */
.config__step--offerte { margin-top: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft, rgba(17,47,68,0.03)); }
/* Zelfde inschuifbeweging als bij het vrijgeven van de opties, zodat zichtbaar is dat er
   een nieuwe stap bij komt zodra alle keuzes gemaakt zijn. */
.config__step--offerte:not([hidden]) { animation: revealIn 320ms ease; }
.config__offerte-intro { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin-bottom: var(--space-3); }
/* Staat er nog een keuze open, dan komt hier welke. Bewust in dezelfde gestippelde stijl als
   de andere "let hier even op"-blokken op de site, zodat het opvalt zonder als fout te lezen. */
.config__wachtrij { margin-top: var(--space-4); padding: 12px 16px; border: 1px dashed var(--color-border); border-radius: var(--radius-md); font-size: 14px; line-height: 1.5; color: var(--color-text-muted); }
.config__offerte-note { font-size: 12px; color: var(--color-text-muted); text-align: center; margin-top: 10px; }
.price-offerte { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin-top: 6px; }

/* Van/voor-prijsankering */
.price-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-anchor { display: inline-flex; align-items: center; gap: 8px; }
.price-advies { font-size: 18px; color: var(--color-text-muted); text-decoration: line-through; }
.price-save { font-size: 12px; font-weight: 700; color: var(--color-white); background: var(--color-error); padding: 2px 8px; border-radius: var(--radius-full); }

/* Levertijd-urgentie */
.urgency { margin-top: 14px; padding: 12px 14px; background: var(--color-accent-light); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: 8px; }
.urgency > div { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--color-primary); }
.urgency svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-primary); }
.urgency strong { font-weight: 700; }
.urgency [data-countdown] { font-variant-numeric: tabular-nums; }

/* Reviewsectie op de PDP */
.pdp-reviews { padding: var(--space-7) 0; background: var(--color-bg); border-top: 1px solid var(--color-border); }
.pdp-reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.pdp-reviews .review-card { margin-bottom: 0; }
@media (max-width: 860px) { .pdp-reviews__grid { grid-template-columns: 1fr; } }

/* Productomschrijving onder de foto */
.pdp__desc { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
.pdp__desc-title { font-family: var(--font-heading); font-size: clamp(24px, 3vw, 30px); font-weight: 600; color: var(--color-primary); line-height: 1.15; margin-bottom: var(--space-3); }
.pdp__desc-lead { font-size: 15px; color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--space-4); }
.pdp__desc-list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: var(--space-5); }
.pdp__desc-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; color: var(--color-primary); line-height: 1.5; }
.pdp__desc-list strong { font-weight: 600; }
.pdp__desc-check { flex-shrink: 0; width: 22px; height: 22px; border-radius: var(--radius-full); background: rgba(44,107,63,0.12); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pdp__desc-check svg { width: 13px; height: 13px; color: var(--color-success); }
.pdp__desc-features { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pdp__feature { display: flex; align-items: flex-start; gap: 14px; padding: 16px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-md); }
.pdp__feature-ico { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-accent-light); display: flex; align-items: center; justify-content: center; }
.pdp__feature-ico svg { width: 20px; height: 20px; color: var(--color-primary); }
.pdp__feature-title { font-size: 15px; font-weight: 600; color: var(--color-primary); margin-bottom: 3px; }
.pdp__feature-text { font-size: 13px; color: var(--color-text-muted); line-height: 1.55; }
/* Op volle breedte (mobiel/tablet, grid nog niet in 2 kolommen) 3 kaarten naast elkaar. */
@media (min-width: 600px) and (max-width: 899px) { .pdp__desc-features { grid-template-columns: repeat(3, 1fr); } .pdp__feature { flex-direction: column; } }

/* "Waarom klanten kiezen voor..." sectie */
.why { padding: var(--space-8) 0; background: var(--color-bg-alt); border-top: 1px solid var(--color-border); }
.why__title { font-family: var(--font-heading); font-size: clamp(26px, 3.5vw, 36px); font-weight: 600; color: var(--color-primary); text-align: center; line-height: 1.15; }
.why__sub { text-align: center; font-size: 15px; color: var(--color-text-muted); margin: 10px 0 var(--space-6); }
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4) var(--space-5); }
.why__item { display: flex; align-items: flex-start; gap: 14px; }
.why__plus { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-inverse); font-size: 20px; font-weight: 400; line-height: 30px; text-align: center; }
.why__item-title { font-size: 16px; font-weight: 600; color: var(--color-primary); margin-bottom: 4px; }
.why__item-text { font-size: 14px; color: var(--color-text-muted); line-height: 1.55; }
@media (max-width: 900px) { .why__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .why__grid { grid-template-columns: 1fr; gap: var(--space-4); } }

/* Trust-regel direct onder de bestelknop (risico-omkering) */
.cta-trust { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: rgba(44,107,63,0.08); border-radius: var(--radius-md); font-size: 13px; line-height: 1.45; color: var(--color-primary); }
.cta-trust svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-success); margin-top: 1px; }
.cta-trust strong { font-weight: 600; }

/* Expert-contactblok bij de CTA */
.expert { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-white); }
.expert__avatar { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-accent-light); display: flex; align-items: center; justify-content: center; }
.expert__avatar svg { width: 24px; height: 24px; color: var(--color-primary); }
.expert__body { display: flex; flex-direction: column; }
.expert__title { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.expert__text { font-size: 13px; color: var(--color-text-muted); margin-bottom: 10px; line-height: 1.45; }
.expert__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.expert__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius-full); font-size: 13px; font-weight: 600; text-decoration: none; transition: opacity 150ms ease; }
.expert__btn svg { width: 15px; height: 15px; }
.expert__btn:hover { opacity: 0.88; }
.expert__btn--wa { background: var(--color-whatsapp); color: #fff; }
.expert__btn--call { background: var(--color-primary); color: var(--color-text-inverse); }

/* Prijs-teaser bovenaan: maakt direct duidelijk dat het product te bestellen is */
.pdp__teaser { margin: var(--space-4) 0 var(--space-5); padding: var(--space-4); background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.pdp__teaser-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.pdp__teaser-label { font-size: 13px; color: var(--color-text-muted); }
.pdp__teaser-amount { font-family: var(--font-heading); font-size: 34px; font-weight: 700; color: var(--color-primary); line-height: 1; }
.pdp__teaser-advies { font-size: 16px; color: var(--color-text-muted); text-decoration: line-through; }
.pdp__teaser-save { font-size: 12px; font-weight: 700; color: #fff; background: var(--color-error); padding: 2px 8px; border-radius: var(--radius-full); }
.pdp__teaser-note { font-size: 13px; color: var(--color-text-muted); margin: 8px 0 14px; }
.pdp__teaser-btn { text-decoration: none; }
#configureer { scroll-margin-top: calc(120px + var(--announcement-h)); }

/* Betaalmethode-logo's (officiële SVG's) */
.pay-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 12px; }
.pay-ico { height: 24px; width: auto; display: block; border-radius: 4px; }
.footer__pay .pay-ico { height: 22px; }

/* Betaal-logo's in de winkelwagen */
.pay-row--cart { justify-content: center; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border); }

/* Live leverancier-configurator: checkbox_group-velden (bv. extra opties), zelfde
   boxed uitstraling als .radio-card zodat de layout consistent oogt. */
.checkbox-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.checkbox-card {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  background: var(--color-white);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
  min-height: 44px;
}
.checkbox-card:hover { border-color: var(--color-text-muted); }
.checkbox-card input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox-card.is-selected { border-color: var(--color-primary); background: var(--color-accent-light); }
.checkbox-card__icon { flex-shrink: 0; color: var(--color-primary); display: flex; }
.checkbox-card__icon svg { width: 22px; height: 22px; }
.checkbox-card__name { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--color-primary); }
@media (max-width: 480px) { .checkbox-cards { grid-template-columns: 1fr; } }

/* =========================================================
   SHOPIFY STANDAARDPAGINA'S (cart, zoeken, account, blog, 404)
   ========================================================= */
.skip-link:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; padding: 12px 16px; margin: 0; clip: auto; background: var(--color-primary); color: var(--color-text-inverse); z-index: 9999; border-radius: 6px; }
.rte-wrap { max-width: 820px; }
.rte { font-size: 16px; line-height: 1.75; color: var(--color-text); }
.rte p { margin: 0 0 1em; }
.rte h2, .rte h3, .rte h4 { font-family: var(--font-heading); color: var(--color-primary); margin: 1.4em 0 0.5em; line-height: 1.2; }
.rte h2 { font-size: 30px; } .rte h3 { font-size: 24px; } .rte h4 { font-size: 20px; }
.rte ul, .rte ol { margin: 0 0 1em 1.4em; }
.rte img { max-width: 100%; height: auto; border-radius: 8px; }
.rte a { color: var(--color-primary); text-decoration: underline; }
.rte table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
.rte th, .rte td { border: 1px solid var(--color-border); padding: 10px 12px; text-align: left; }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 40px; }
.pagination__link { display: inline-flex; align-items: center; min-width: 40px; height: 40px; padding: 0 12px; justify-content: center; border: 1px solid var(--color-border); border-radius: 6px; color: var(--color-primary); text-decoration: none; font-size: 14px; }
.pagination__link.is-current { background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary); }
.pagination__ellipsis { border: none; }
.product-card__img { display: block; }
.product-card__placeholder { width: 100%; height: 100%; object-fit: cover; background: var(--color-accent-light); }
.product-card__title a { color: inherit; text-decoration: none; }
.search-form { display: flex; gap: 12px; max-width: 640px; margin-bottom: 32px; }
.search-form .form-control { flex: 1; }
.btn--dark { color: var(--color-primary); border-color: var(--color-primary); }
.btn--dark:hover { background: var(--color-primary); color: var(--color-text-inverse); }
.cart-page__grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr); gap: 32px; align-items: start; }
.cart-page__items { display: flex; flex-direction: column; gap: 16px; }
.cart-line { display: flex; gap: 16px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; }
.cart-line__img { flex: 0 0 100px; }
.cart-line__img img { width: 100px; height: 100px; object-fit: cover; border-radius: 8px; }
.cart-line__info { flex: 1; min-width: 0; }
.cart-line__title { font-weight: 600; color: var(--color-primary); text-decoration: none; display: block; margin-bottom: 6px; }
.cart-line__foot { display: flex; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.cart-line__qty { width: 80px; padding: 10px 12px; }
.cart-page__summary .cart-subtotal { display: flex; justify-content: space-between; margin-bottom: 8px; }
.cart-page__summary .btn { margin-top: 12px; }
.cart-page__empty { text-align: center; padding: 40px 0; }
.account-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.account-grid { align-items: start; }
.account-links { margin-top: 16px; font-size: 14px; }
.account-links a { color: var(--color-primary); }
.table-wrap { overflow-x: auto; }
.account-table { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--color-white); border: 1px solid var(--color-border); border-radius: 12px; }
.account-table th, .account-table td { padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.account-table th { font-weight: 600; color: var(--color-primary); background: var(--color-accent-light); }
.account-table tfoot td { border-bottom: none; }
.account-table a { color: var(--color-primary); }
.address-card { margin-bottom: 24px; }
.address-card summary { cursor: pointer; list-style: none; }
.address-card summary::-webkit-details-marker { display: none; }
.address-card form { margin-top: 20px; }
.address-card .cart-item__remove { margin-top: 12px; }
.article__image { margin: 24px 0 32px; }
.article__image img { width: 100%; height: auto; border-radius: 12px; }
.article__comments { margin-top: 48px; }
.article__comments .review-card { margin-bottom: 16px; }
.about-photos__item { margin: 0; }
.about-photos__item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.success-banner.is-visible { display: block; }
.errors ul, .form-errors ul { margin: 0 0 16px 1.2em; color: var(--color-error); font-size: 14px; }
@media (max-width: 900px) {
  .cart-page__grid, .account-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .search-form { flex-direction: column; }
  .cart-line { flex-direction: column; }
}

/* Custom Liquid-sectie */
.custom-liquid { background: var(--color-bg); }
.custom-liquid--white { background: var(--color-white); }
.custom-liquid--dark { background: var(--color-primary); color: var(--color-text-inverse); }
.custom-liquid--dark a { color: inherit; }
.custom-liquid__full { width: 100%; }
.custom-liquid img, .custom-liquid iframe, .custom-liquid video { max-width: 100%; }

/* Winkelwagenlade: statusregel bij het aanmaken van de Draft Order-bestelling */
.cart-checkout-status { margin-top: 10px; font-size: 13px; text-align: center; color: var(--color-text-muted); }
.cart-checkout-status.is-error { color: var(--color-error); }

/* Standaardsjabloon zonder eigen configurator: duidelijke vervolgstap in plaats van
   een knop die nooit actief wordt. */
.pdp__no-config {
  margin: var(--space-4, 16px) 0 0;
  padding: var(--space-4, 16px);
  border: 1px dashed var(--color-border, #DDD6C8);
  border-radius: var(--radius-md, 10px);
  color: var(--color-text-muted, #546877);
  font-size: 14px;
  line-height: 1.6;
}
.pdp__no-config a { color: var(--color-primary, #112F44); }

/* Montageregel in de winkelwagen: het is een dienst voor de hele bestelling,
   geen product, dus subtiel afgezet van de productregels. */
.cart-item--montage {
  background: var(--color-bg-alt, #F3EDDF);
  border-radius: var(--radius-md, 10px);
}
.cart-item--montage .cart-item__name { font-style: normal; }

/* ---------------------------------------------------------------------------
   Over ons: de about-secties hadden nog geen opmaak. Zonder maat op de SVG's
   rekken die op tot de volle breedte van hun flexcontainer, hetzelfde probleem
   als in de contactsectie. Hieronder staan de secties in de stijl van de rest
   van het thema.
   --------------------------------------------------------------------------- */
.about-hero { padding: var(--space-7) 0 var(--space-6); background: var(--color-bg-alt); }
.about-hero__inner {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--space-6); align-items: center;
}
.about-hero__eyebrow {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.about-hero__title {
  font-family: var(--font-heading); font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15; color: var(--color-primary); margin-bottom: var(--space-3);
}
.about-hero__lead { font-size: 16px; line-height: 1.7; color: var(--color-text-muted); }
.about-hero__img { width: 100%; border-radius: var(--radius-md); }

.about-stats {
  display: flex; flex-wrap: wrap; gap: var(--space-5);
  margin-top: var(--space-5); padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.about-stat__num {
  font-family: var(--font-heading); font-size: 30px; color: var(--color-primary);
}
.about-stat__label { font-size: 13px; color: var(--color-text-muted); }

.about-story { padding: var(--space-7) 0; }
.about-story__inner { max-width: 760px; margin: 0 auto; }
.about-story__title {
  font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px);
  color: var(--color-primary); margin-bottom: var(--space-4);
}
.about-story__body { font-size: 16px; line-height: 1.8; color: var(--color-text-muted); }
.about-story__body p + p { margin-top: var(--space-3); }

.about-values { padding: var(--space-7) 0; background: var(--color-bg-alt); }
.about-values__title {
  font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px);
  color: var(--color-primary); text-align: center; margin-bottom: var(--space-5);
}
.about-values__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4);
}
.about-value {
  background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); padding: var(--space-4);
}
.about-value__ico {
  width: 44px; height: 44px; margin-bottom: var(--space-3);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full); background: var(--color-accent-light);
}
.about-value__ico svg { width: 22px; height: 22px; color: var(--color-primary); }
.about-value__title {
  font-family: var(--font-heading); font-size: 18px;
  color: var(--color-primary); margin-bottom: var(--space-2);
}
.about-value__text { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); }

.about-cta { padding: var(--space-7) 0; background: var(--color-primary); text-align: center; }
.about-cta__title {
  font-family: var(--font-heading); font-size: clamp(24px, 3vw, 34px);
  color: var(--color-text-inverse); margin-bottom: var(--space-2);
}
.about-cta__text { color: rgba(243,237,223,0.8); margin-bottom: var(--space-4); }
.about-cta__btns {
  display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap;
}
.about-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: var(--radius-full);
  font-size: 15px; font-weight: 600; text-decoration: none;
}
.about-cta__btn--wa { background: var(--color-whatsapp); color: #fff; }
.about-cta__btn--ghost {
  border: 1px solid rgba(243,237,223,0.4); color: var(--color-text-inverse);
}
.about-cta__btn svg { flex-shrink: 0; }

@media (max-width: 900px) {
  .about-hero__inner { grid-template-columns: 1fr; }
  .about-values__grid { grid-template-columns: 1fr; }
}

/* Montageservice-pagina */
.montage-page { padding: var(--space-7) 0; }
.montage-page__inner { max-width: 760px; margin: 0 auto; }
.montage-page__eyebrow {
  font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-text-muted); margin-bottom: var(--space-2);
}
.montage-page__title {
  font-family: var(--font-heading); font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15; color: var(--color-primary); margin-bottom: var(--space-3);
}
.montage-page__intro { font-size: 16px; line-height: 1.8; color: var(--color-text-muted); }
/* Drie montagetarieven naast elkaar: het tarief hangt af van de rijafstand
   vanaf Apeldoorn. Op mobiel onder elkaar. */
.montage-page__price {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
  margin: var(--space-5) 0; padding: var(--space-4);
  background: var(--color-accent-light); border-radius: var(--radius-md);
}
@media (max-width: 767px) { .montage-page__price { grid-template-columns: 1fr; } }
/* Zonder deze regel wint de display-waarde hierboven van het hidden-attribuut,
   waardoor de tarieven zichtbaar blijven als de montageservice uit staat. */
.montage-page__price[hidden] { display: none; }
.montage-tarief { display: flex; flex-direction: column; gap: 4px; }
.montage-tarief__zone {
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--color-text-muted);
}
.montage-tarief__amount {
  font-family: var(--font-heading); font-size: 32px; color: var(--color-primary);
}
.montage-tarief--gratis .montage-tarief__amount { color: var(--color-success); }
.montage-tarief__note { font-size: 13px; line-height: 1.6; color: var(--color-text-muted); }
.montage-page__pauze {
  padding: var(--space-4); margin: var(--space-5) 0;
  border-left: 3px solid var(--color-primary);
  background: var(--color-accent-light);
  font-size: 15px; line-height: 1.7; color: var(--color-primary);
}
.montage-page__list { list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.montage-page__item {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 15px; line-height: 1.7; color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}
.montage-page__check {
  border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-4); margin-bottom: var(--space-4);
}
.montage-page__check-title {
  font-family: var(--font-heading); font-size: 20px;
  color: var(--color-primary); margin-bottom: var(--space-2);
}
.montage-page__check-text {
  font-size: 14px; line-height: 1.7; color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.montage-page__field label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--color-primary); margin-bottom: 6px;
}
.montage-page__field .form-control { max-width: 220px; }
.montage-page__note {
  font-size: 14px; line-height: 1.7; color: var(--color-text-muted);
  padding: var(--space-4); border: 1px dashed var(--color-border);
  border-radius: var(--radius-md); margin-bottom: var(--space-5);
}
/* Aanvraagformulier op de montageservice-pagina. Leunt op .form-card voor de kaart zelf,
   hier alleen de ruimte eromheen en de titel die in dit blok wat dichter op de tekst staat
   dan bij de postcodecheck. */
.montage-page__form { margin-bottom: var(--space-5); }
.montage-page__form .montage-page__check-title { margin-bottom: var(--space-2); }
.montage-page__cta {
  display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap;
}
/* Zelfde groene WhatsApp-knop als in de footer, zodat hij naast de donkere hoofdknop
   herkenbaar is als WhatsApp in plaats van als een gewone tekstlink. */
.montage-page__wa {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--color-whatsapp); color: #fff;
  font-size: 15px; font-weight: 600;
  padding: 12px 20px; border-radius: var(--radius-full);
  transition: background 150ms;
}
.montage-page__wa:hover { background: #1da851; }

/* Compacte secties voor overzichtspagina's (bv. Alle producten): minder lege ruimte tussen
   paginatitel en productblokken. Dubbele klasse zodat dit ook de mobiele regel hierboven wint. */
.category.category--intro { padding: var(--space-8) 0 var(--space-2); }
.category.category--intro .category__head { margin-bottom: 0; }
.category.category--compact { padding: var(--space-5) 0; }
.category.category--compact .category__head { margin-bottom: var(--space-4); }
@media (max-width: 640px) {
  .category.category--intro { padding: var(--space-5) 0 var(--space-1); }
  .category.category--compact { padding: var(--space-4) 0; }
  .category.category--compact .category__head { margin-bottom: var(--space-3); }
}