/* De laag-spacing die het framework op 12-09-2026 losliet (commit f22ad7e13a, "Maak layer
   spacing CMS-first"). Deze site leunde erop: op 19 van de 20 pagina's kwam de padding van
   elke .layer__inner uit shell.css en nergens uit het CMS. Zonder deze regels plakt na een
   framework-bump alle content tegen de schermrand en klapt de hero verticaal dicht.

   Bewust IN @layer framework en niet ongelaagd: dan staat hij op exact dezelfde plek in de
   rangorde als voorheen, dus site-CSS hieronder en CMS-opmaak winnen er nog steeds van.
   Ongelaagd zou hij juist van allebei winnen en daarmee de CMS-instelbaarheid slopen die
   die framework-wijziging nu net beoogde. Zet een redacteur de padding in het CMS, dan
   overschrijft dat deze waarde gewoon. */
@layer framework {
  .layer__inner{ max-width:var(--max); margin:0 auto; padding:2.5rem 1.5rem; }
  .hero .layer__inner, .hero__content{ max-width:var(--max); margin:0 auto; padding:4.5rem 1.5rem; }
  .hero--image .layer__inner, .hero--image .hero__content{ padding:7rem 1.5rem; }
  .layer--columns .layer__columns{ column-gap:var(--cols-gx, 2rem); row-gap:var(--cols-gy, 2rem); }
  @media (min-width: 761px) {
    .layer--columns .layer__columns{
      column-gap:var(--cols-gx-d, var(--cols-gx, 2rem));
      row-gap:var(--cols-gy-d, var(--cols-gy, 2rem));
    }
  }
  .media-album{ gap:var(--media-album-gap, 4px); }
}

/* Content boven de sectie-achtergrond (framework mist algemene .layer__sc-z-index; alleen hero heeft 'm). */
.layer__sc{ position:relative; z-index:1; }

/* ---- Meldingsbalk (server-side, App\TopBar) ---- */
:root{ --svs-topbar-h:40px; --paper:#F6F7FB; --paper-2:#EEF0F8; --fg:var(--theme-color-5,#5B5870); }
.site-topbar{ position:fixed; top:0; left:0; right:0; z-index:55; height:var(--svs-topbar-h);
  background:var(--theme-color-2,#2BE89B); display:flex; align-items:center; transition:transform .35s ease; }
.site-topbar.svs-hide{ transform:translateY(-100%); }
.site-topbar__inner{ max-width:var(--max); margin:0 auto; padding:0 28px; width:100%;
  display:flex; justify-content:space-between; align-items:center; gap:.75rem; }
.site-topbar__items{ display:flex; gap:1.9rem; flex-wrap:wrap; }
.site-topbar__item{ font-family:var(--font-body,'Montserrat',sans-serif); font-size:.8rem; font-weight:500;
  color:var(--theme-color-9,#1C0647); display:inline-flex; align-items:center; }
.site-topbar__item::before{ content:"\2713"; color:#0A6B43; font-weight:800; margin-right:.45rem; }
.site-topbar__link{ font-family:var(--font-body,'Montserrat',sans-serif); font-size:.8rem; font-weight:600;
  color:var(--theme-color-9,#1C0647); white-space:nowrap; text-decoration:none; }
.site-topbar__link::after{ content:" \2192"; }
body:not(.svs-has-hero){ padding-top:var(--svs-topbar-h); }
@media(max-width:760px){ .site-topbar{ display:none; } body:not(.svs-has-hero){ padding-top:0; } }

/* Stroom voor Straks - site-eigen OPMAAK (concept-look).
   Content komt uit het CMS; dit is alleen opmaak. Uniform per type (geen id/slug-selectors),
   kleuren via de thema-tokens. Effecten staan in custom.js. */


/* =========================================================
   NAV over de hero (alleen op pagina's met een hero)
   ========================================================= */
body.svs-has-hero .site-header{
  position:fixed; top:var(--svs-topbar-h); left:0; right:0; z-index:50;
  background:transparent; border-bottom:none; box-shadow:none;
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease;
}
body.svs-has-hero .site-header.svs-scrolled{ top:0;
  background:rgba(28,6,71,.96); box-shadow:0 8px 30px rgba(0,0,0,.25); backdrop-filter:blur(8px);
}
body.svs-has-hero .site-nav a{ color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.45); }
body.svs-has-hero .site-header.svs-scrolled .site-nav a{ text-shadow:none; }
body.svs-has-hero .site-nav a:hover{ color:var(--theme-color-2,#2BE89B); }
body.svs-has-hero .site-logo__img{ filter:drop-shadow(0 8px 20px rgba(0,0,0,.5)) drop-shadow(0 0 16px rgba(43,232,155,.35)); }

/* =========================================================
   HERO — overlays (titel + intro-kaart + Techniko-badge), elk gepositioneerd.
   Content komt uit overlay_media-items (CMS); het classes-veld is de hook.
   SVS laadt de framework-hero-CSS niet, dus positionering + look staan hier.
   ========================================================= */
body.svs-has-hero .hero{ width:100%; max-width:100%; min-width:0; min-height:100vh; height:100vh; position:relative; overflow:hidden; }
/* De skelet-content-laag de hele hero laten vullen, zodat de absolute overlays hun top/bottom
   t.o.v. de volledige hero verankeren (anders klapt .layer__sc qua hoogte dicht). */
body.svs-has-hero .hero .layer__sc{ position:absolute; inset:0; z-index:1; }
body.svs-has-hero .hero .layer__inner{ position:static; height:100%; }
/* De concept-hero gebruikt een vaste foto op viewportniveau. Beperk de hero daarnaast
   expliciet tot de beschikbare breedte, zodat de beeldverhouding niet als min-width
   naar de hele pagina doorlekt. */
body.svs-has-hero main{ width:100%; min-width:0; }
body.svs-has-hero footer{ position:relative; z-index:3; }
/* Footer sluit direct aan op de content en volgt het donkere ontwerp-paneel. */
body.svs-has-hero .site-footer{
  margin-top:0; background:var(--theme-color-1,#150A3A); color:#BDB5D6;
}
body.svs-has-hero .site-footer__address,
body.svs-has-hero .site-footer__links a,
body.svs-has-hero .site-footer__credit,
body.svs-has-hero .site-footer__credit a{ color:#BDB5D6; }
body.svs-has-hero .site-footer__col-title{ color:#fff; }
body.svs-has-hero .site-footer__credit{ border-top:1px solid rgba(255,255,255,.12); }
@media(min-width:641px){
  body.svs-has-hero .site-footer__credit-inner{
    display:flex; align-items:center; gap:1rem;
  }
  body.svs-has-hero .site-footer__copyright{
    order:1; margin-right:auto; text-align:left;
  }
  body.svs-has-hero .site-footer__credit-group{
    order:2; display:flex; align-items:center; justify-content:flex-end;
  }
  body.svs-has-hero .site-footer__credit-link{
    order:3; flex:0 0 auto;
  }
}

body.svs-has-hero .site-footer__links a:hover,
body.svs-has-hero .site-footer__credit a:hover{ color:var(--theme-color-2,#2BE89B); }

/* Vaste positie voor de door het CMS gegenereerde signed hero-afbeelding. */
body.svs-has-hero .hero__background{ position:fixed; inset:0; width:100vw; max-width:100vw; height:100vh; z-index:0; overflow:hidden; }
body.svs-has-hero .hero__background img{ display:block; width:100%; max-width:none; height:100%; object-fit:cover; }
body.svs-has-hero main > .layer:not(.hero){ position:relative; z-index:2; }
/* De vaste hero-foto mag niet door transparante contentlagen heen zichtbaar blijven. */
body.svs-has-hero main > .layer:not(.hero):not(.layer--cta):not(.layer--usps){ background:var(--bg,#fff); }
/* Leesbaarheidslaag over de hero-foto: de nav is wit en staat zonder balk op het beeld, dus
   zonder deze gradient valt 'ie weg zodra de foto daar licht is. De verdeling komt uit het
   ontwerp: donker aan de bovenrand, op 18% al bijna weg, op 32% helemaal. Zo verandert er niets
   aan hoe de foto zelf oogt.
   De scrim MOET op `.hero__background` staan, niet op `.layer__bg` of `.hero::before`. Die twee
   liggen op `z-index:auto` in de hero, terwijl de foto in `.layer__sc` (`z-index:1`) zit: een
   gradient daarbuiten wordt door het beeld overschilderd en is dus onzichtbaar. Dat was hier tot
   19-08-2026 het geval - de regels stonden er, maar hebben nooit iets gedaan. */
body.svs-has-hero .hero__background::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(16,5,46,.46) 0%, rgba(16,5,46,.10) 18%, rgba(16,5,46,0) 32%),
             linear-gradient(0deg, rgba(16,5,46,.68) 0%, rgba(16,5,46,0) 40%);
}
/* De overlay-laag: een gecentreerde max-width laag over de hele hero. */
.hero__overlays{ position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:1220px; padding:0 40px; z-index:2; pointer-events:none; }
.hero__overlay{ position:absolute; pointer-events:auto; }

/* Titel — links, boven het midden. */
.hero-headline{ left:40px; top:17vh; max-width:800px; }
.hero-headline .hero__title{ font-size:clamp(3rem,7.4vw,6.1rem); color:#fff; font-weight:800;
  line-height:1.02; letter-spacing:-.02em; margin:0;
  text-shadow:0 22px 50px rgba(6,2,20,.62), 0 8px 26px rgba(6,2,20,.4); }
/* Bracket-accent: [accent:...] → mint highlight (geen mark-standaardgeel). */
.hero__title .mark--accent{ background:none; color:var(--theme-color-2,#2BE89B); }

/* Intro-kaart — links-onder: solide indigo kaart met eyebrow, lead en CTA's. */
.intro-card{ left:40px; bottom:7vh; max-width:600px;
  background:rgba(28,6,71,.80); border-radius:24px; padding:1.9rem 2rem;
  box-shadow:0 30px 64px rgba(16,5,46,.5); }
.intro-card .hero__eyebrow{ color:var(--theme-color-2,#2BE89B); font-weight:600; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase; margin:0 0 1rem; }
.intro-card .hero__subtitle{ color:rgba(255,255,255,.92); font-weight:300;
  font-size:clamp(1rem,1.4vw,1.14rem); line-height:1.6; margin:0 0 1.5rem; }
.intro-card .hero__cta{ display:flex; flex-wrap:wrap; gap:.8rem; }
/* NIEUW-pill: het text-veld (editor-HTML) draagt een klikbare <a> tussen lead en CTA's. */
.intro-card .hero__body{ margin:.1rem 0 1.4rem; }
.intro-card .hero__body a{ display:inline-flex; align-items:center; gap:.55rem; width:fit-content;
  padding:.4rem .95rem .4rem .45rem; border-radius:100px; color:#fff; text-decoration:none;
  background:#3a7cff; box-shadow:0 10px 24px rgba(58,124,255,.4);
  font-family:var(--font-body,'Montserrat',sans-serif); font-weight:600; font-size:.82rem;
  transition:box-shadow .18s ease, transform .18s ease; }
.intro-card .hero__body a:hover{ transform:translateY(-2px); box-shadow:0 14px 30px rgba(58,124,255,.5); }
.intro-card .hero__body a::after{ content:"\2192"; color:#fff; font-weight:700; }
.intro-card .hero__body a mark{ background:rgba(255,255,255,.25); color:#fff;
  font-size:.63rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  padding:.18rem .5rem; border-radius:5px; }

/* CTA-knoppen. */
.layer--hero .btn{
  display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-body,'Montserrat',sans-serif);
  font-weight:600; font-size:.92rem; padding:.85rem 1.5rem; border-radius:100px; border:2px solid transparent;
  text-decoration:none; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.layer--hero .btn:first-child{ background:var(--theme-color-2,#2BE89B); color:var(--theme-color-9,#1C0647); box-shadow:0 10px 24px rgba(43,232,155,.35); }
.layer--hero .btn:first-child:hover{ transform:translateY(-2px); box-shadow:0 16px 34px rgba(43,232,155,.45); }
.layer--hero .btn:last-child:not(:first-child){ background:transparent; color:var(--theme-color-2,#2BE89B); border-color:var(--theme-color-2,#2BE89B); }
.layer--hero .btn:last-child:not(:first-child):hover{ background:var(--theme-color-2,#2BE89B); color:var(--theme-color-9,#1C0647); transform:translateY(-2px); }
.intro-card .hero__cta .btn::after{ content:"\2192"; font-weight:700; }

/* Techniko-badge — rechts-onder: ronde stempel. */
.hero-stamp{ right:40px; bottom:9vh; width:132px; height:132px; border-radius:50%;
  background:var(--theme-color-9,#1C0647); border:3px solid var(--theme-color-2,#2BE89B);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  box-shadow:0 16px 40px rgba(6,2,20,.45); padding:.6rem; }
.hero-stamp .hero__eyebrow{ order:-1; color:var(--theme-color-2,#2BE89B); font-size:.58rem; font-weight:600; width:85px;
  letter-spacing:.1em; text-transform:uppercase; margin:2px 0 0; }
.hero-stamp .hero__body{ color:rgba(255,255,255,.72); font-size:.5rem; font-weight:600;
  letter-spacing:.07em; text-transform:uppercase; margin:.18rem 0 0; line-height:1.35; }
.hero-stamp .hero__body strong{ display:block; font-family:var(--base-font,'Roboto Slab',serif);
  font-size:1.3rem; color:#fff; font-weight:700; letter-spacing:-.01em; text-transform:none; margin-bottom:.15rem; }

/* =========================================================
   KAART-SECTIES (Waarom / testimonials / wat-als)
   Chrome (rand/radius/schaduw) = uniform; ACHTERGROND + TEKSTKLEUR = per laag via
   het CMS-design (design_cards → design_item_content op .card__body, design_item_title/_text).
   De witte kaart is hier alleen de DEFAULT; een donkere sectie zet z'n eigen bg per laag.
   ========================================================= */
.layer-cards .card__inner--no-media{
  background:transparent; border:1px solid rgba(45,10,110,.10); border-radius:18px; overflow:hidden;
  box-shadow:0 6px 24px rgba(45,10,110,.06);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height:100%; display:flex; flex-direction:column;
}
.layer-cards .card__inner--no-media:hover{
  transform:translateY(-4px); box-shadow:0 22px 48px rgba(45,10,110,.14); border-color:var(--theme-color-2,#2BE89B);
}
/* Carrouselkaarten behouden hun hoverbeweging en box-shadow binnen de clipping-viewport. */
.layer-cards .carousel__viewport{
  padding-block:4px 3rem;
  margin-block:-4px -3rem;
}
.layer-cards .card__body{ padding:1.7rem; flex:1 1 auto; display:flex; flex-direction:column; gap:.5rem; }
.layer-cards .card__title{ color:var(--theme-color-4,#2D0A6E); font-size:1.15rem; margin-bottom:.35rem; }
.layer-cards .card__text{ color:var(--theme-color-5,#5B5870); line-height:1.6; font-size:.96rem; }
.layer-cards__grid{ gap:1.6rem; }
.layer-cards__header{ margin-bottom:2.2rem; }
.layer-cards__title{ color:var(--theme-color-4,#2D0A6E); }
.layer-cards .carousel:has(.carousel__controls[data-position="1"]){padding-bottom:4.25rem;}
.layer-cards .carousel__controls[data-position="1"]{inset:auto 0 .75rem auto;width:auto;justify-content:flex-end;gap:.5rem;padding:0;}
.layer-cards .carousel__controls[data-position="1"] .carousel__buttons{display:flex;gap:.5rem;}
.layer-cards .carousel__dots{gap:.65rem;padding:1.25rem 0 0;}
.layer-cards .carousel__dot{background:rgba(45,10,110,.22);}
.layer-cards .carousel__dot--selected{background:var(--theme-color-2,#2BE89B);}

/* ---- USP-strip donker ---- */
.layer--usps{--usp-icon-size:30px;}
.layer--usps{ background:var(--theme-color-9,#1C0647); }
.layer--usps .usps__item,
.layer--usps .usps__body{ padding:0; background:transparent !important; border:none !important; box-shadow:none !important; }
.layer--usps .usps__title{ color:#fff; }
.layer--usps .ds-usps-title{ color:#fff; text-align:center; }
/* Vertrouwensstrook: dezelfde maatvoering als het concept-ontwerp. */
.layer--usps:has(.ds-usps-title){
  background:#EEF0F8;
  padding:3rem 0;
  border-top:1px solid rgba(45,10,110,.10);
  border-bottom:1px solid rgba(45,10,110,.10);
}
.layer--usps:has(.ds-usps-title) .layer__inner{ padding-block:0; }
.layer--usps:has(.ds-usps-title) .ds-usps-title{
  margin:0;
  color:#5B5870;
  font-family:var(--font-body,Montserrat,sans-serif);
  font-size:.8rem;
  font-weight:600;
  letter-spacing:.2em;
  line-height:1.2;
  text-transform:uppercase;
}
.layer--usps:has(.ds-usps-title) .usps{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2.6rem;
  width:100%;
}
.layer--usps:has(.ds-usps-title) .usps__item{
  flex:0 0 auto;
  font-family:var(--font-body,Montserrat,sans-serif);
  font-size:.98rem;
  font-weight:600;
  color:#5B5870;
}
.layer--usps:has(.ds-usps-title) .usps__title{
  margin:0;
  font:inherit;
  color:inherit;
}
.layer--usps:has(.ds-usps-title) .usps__body{ padding:0; }
.layer--usps:has(.ds-usps-title) .usps__item:hover{ color:#5B5870; }
@media(max-width:760px){
  .layer--usps:has(.ds-usps-title) .usps{ gap:1.4rem 2rem; }
}

.layer--usps .usps__text{ color:rgba(255,255,255,.62); }
.layer--usps .usps__text{font-size:.9rem;}
.layer--text mark{background:linear-gradient(180deg,transparent 58%,rgba(43,232,155,.55) 58%);padding:0 .12em;font-weight:700;}
.layer--text .mark--accent{background:none;color:var(--theme-color-2);padding:0;font-weight:inherit;}
.layer--usps svg{ stroke:var(--theme-color-2,#2BE89B); }
/* USP-iconen (usp_N_image → .usps__img): klein, mint, links van de tekst. */
.layer--usps .usps__img{ width:var(--usp-icon-size); height:var(--usp-icon-size); flex:0 0 auto; object-fit:contain; }
.layer--usps .usps__item{ display:flex; align-items:center; gap:1rem; text-align:left; }

/* =========================================================
   TEKST + BEELD (layer_text met media)
   De grid-layout (--ti-cols, gap, verticale uitlijning) komt bewust NIET meer van hier --
   dat dubbelde een framework-regel (layer-text.css) en won ervan omdat deze site.css
   ongelaagd is (wint van @layer framework, los van specificiteit). Daardoor landde een
   framework-verbetering aan die grid nooit op deze site. Weggehaald op verzoek van
   framework (03-09-2026); alleen nog site-eigen toevoegingen die het framework niet doet. */
/* Richtext: lucht rond subtitels (h2/h3) op alle .prose-blokken (kennisbank e.d.). */
.prose h2, .prose h3{ margin-bottom:.85rem; }
.prose h2:not(:first-child), .prose h3:not(:first-child){ margin-top:1.9rem; }
/* Tekst-met-beeld: iets ruimere alineaspacing. */
.layer--text-image .prose p + p{ margin-top:1.2rem; }

/* =========================================================
   MODULAIRE CONFIGURATOR (proof-of-concept, custom.js)
   ========================================================= */
.svs-module-config .product-detail__addon-label{ font-weight:600; }
.svs-module-config > .product-detail__addon-select,
.svs-module-config > .select-display,
.svs-qty-config > .product-detail__qty-select,
.svs-qty-config > .select-display{ display:none !important; }
.svs-qty .svs-config__row{ margin-top:.2rem; }
.svs-config{ margin-top:.5rem; }
.svs-config__row{ display:flex; align-items:center; gap:.6rem; }
.svs-config__btn{ width:34px; height:34px; border-radius:9px; border:1.5px solid var(--theme-color-2,#2BE89B);
  background:transparent; color:var(--theme-color-4,#2D0A6E); font-size:1.25rem; font-weight:700; cursor:pointer;
  line-height:1; display:flex; align-items:center; justify-content:center; transition:background .15s ease, color .15s ease; }
.svs-config__btn:hover{ background:var(--theme-color-2,#2BE89B); color:var(--theme-color-9,#1C0647); }
.svs-config__count{ min-width:1.8rem; text-align:center; font-weight:800; font-size:1.1rem; color:var(--theme-color-4,#2D0A6E); }
.svs-config__hint{ font-size:.8rem; color:#6b6880; }
.svs-config__cap{ margin-top:.55rem; padding:.5rem .8rem; border-radius:10px; background:rgba(43,232,155,.1);
  border:1px solid rgba(43,232,155,.28); font-size:.9rem; color:#3a3a4a; display:inline-block; }
.svs-config__cap strong{ color:var(--theme-color-4,#2D0A6E); font-size:1.02rem; }
.svs-config__cap span{ color:#6b6880; }
.svs-total{ margin-top:1rem; padding-top:.9rem; border-top:1px solid #e5e3ec; font-size:1rem; color:#3a3a4a; }
.svs-total__parts{ color:#6b6880; }
.svs-total strong{ font-size:1.35rem; color:var(--theme-color-4,#2D0A6E); font-family:"Roboto Slab",Georgia,serif; }

/* =========================================================
   HERO MOBIEL — overlays stapelen i.p.v. absoluut (desktop-posities
   botsten op smal scherm: de Techniko-badge overlapte de CTA's).
   ========================================================= */
@media (max-width:760px){
  body.svs-has-hero .hero{ height:auto; min-height:100svh; }
  body.svs-has-hero .hero .layer__sc{ position:relative; inset:auto; height:auto; }
  .hero__overlays{ position:relative; left:auto; top:auto; bottom:auto; transform:none; width:100%;
    display:flex; flex-direction:column; align-items:stretch; gap:1.3rem; padding:7rem 1.15rem 2.6rem; }
  .hero__overlay{ position:relative; inset:auto; left:auto; right:auto; top:auto; bottom:auto;
    max-width:none; width:auto; }
  .hero-headline{ order:1; }
  .hero-headline .hero__title{ font-size:clamp(2.3rem,10.5vw,3.4rem); line-height:1.04; }
  .intro-card{ order:2; }
  .hero-stamp{ order:3; align-self:center; width:120px; height:120px; }
}

/* ENUM-TIMELINE */
/* =========================================================
   TEKST + OPSOMMINGEN. Twee weergaven, gescheiden via de native
   data-format-haak die het framework op .enumerations zet:
     data-format="1" -> genummerde alternerende TIMELINE (/waarom-wij)
     data-format="2" -> concept-GRID op donkere band (home)
   Nummer via CSS-counter (label is intern), typografie deels via
   de design-slots. Geen id-/slug-selectors.
   ========================================================= */
.enumeration__label{ display:none; }  /* intern label; rendert al niet meer, dit is vangnet */

/* ---- data-format="1": alternerende genummerde timeline ---- */
.enumerations[data-format="1"]{ counter-reset:enum; position:relative; max-width:940px; margin:2.6rem auto 0; }
.enumerations[data-format="1"]::before{ content:""; position:absolute; top:.4rem; bottom:1.4rem; left:50%;
  width:2px; transform:translateX(-50%);
  background:linear-gradient(var(--theme-color-2,#2BE89B), rgba(43,232,155,.2)); }
.enumerations[data-format="1"] .enumeration{ counter-increment:enum; position:relative; box-sizing:border-box;
  width:50%; padding-bottom:2.4rem; }
.enumerations[data-format="1"] .enumeration:nth-child(odd){ left:0; padding-right:3rem; padding-left:.5rem; text-align:right; }
.enumerations[data-format="1"] .enumeration:nth-child(even){ left:50%; padding-left:3rem; padding-right:.5rem; text-align:left; }
.enumerations[data-format="1"] .enumeration::before{ content:counter(enum,decimal-leading-zero);
  position:absolute; top:-.3rem; width:2.9rem; height:2.9rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:"Roboto Slab",Georgia,serif; font-size:1rem; font-weight:700;
  color:var(--theme-color-9,#1C0647); background:var(--theme-color-2,#2BE89B);
  box-shadow:0 0 0 6px #fff, 0 4px 14px rgba(43,232,155,.4); }
.enumerations[data-format="1"] .enumeration:nth-child(odd)::before{ right:-1.45rem; }
.enumerations[data-format="1"] .enumeration:nth-child(even)::before{ left:-1.45rem; }
.enumerations[data-format="1"] .enumeration__title{ margin:.15rem 0 .5rem; }
.enumerations[data-format="1"] .enumeration__text{ margin:0; }

@media (max-width:760px){
  .enumerations[data-format="1"]{ margin-top:1.6rem; }
  .enumerations[data-format="1"]::before{ left:1.2rem; }
  .enumerations[data-format="1"] .enumeration,
  .enumerations[data-format="1"] .enumeration:nth-child(odd),
  .enumerations[data-format="1"] .enumeration:nth-child(even){ width:100%; left:0; text-align:left; padding:0 0 1.9rem 3.4rem; }
  .enumerations[data-format="1"] .enumeration::before,
  .enumerations[data-format="1"] .enumeration:nth-child(odd)::before,
  .enumerations[data-format="1"] .enumeration:nth-child(even)::before{ left:0; right:auto; top:-.15rem;
    width:2.4rem; height:2.4rem; font-size:.88rem; box-shadow:0 0 0 5px #fff, 0 4px 12px rgba(43,232,155,.4); }
}

/* ---- data-format="2": concept-GRID op donkere band (home) ---- */
/* De band (gradient wit -> mint -> indigo) op de laag die zo'n grid bevat. */
.layer--text:has(.enumerations[data-format="2"]){
  background:linear-gradient(180deg,#fff 0%, var(--theme-color-2,#2BE89B) 13%, #1FA89A 36%, var(--theme-color-9,#1C0647) 82%); }
.layer--text:has(.enumerations[data-format="2"]) .eyebrow{ color:#0c6b50; }
.layer--text:has(.enumerations[data-format="2"]) .heading{ color:var(--theme-color-4,#2D0A6E); }
.layer--text:has(.enumerations[data-format="2"]) .prose{ color:rgba(255,255,255,.82); }

.enumerations[data-format="2"]{ counter-reset:enum; display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.6rem; max-width:1120px; margin:2.6rem auto 0; }
.enumerations[data-format="2"] .enumeration{ counter-increment:enum; position:relative; display:flex; flex-direction:column; align-items:stretch; box-sizing:border-box;
  background:rgba(10,6,35,.26); border:1px solid rgba(255,255,255,.12); border-radius:18px;
  padding:2rem 1.9rem; overflow:hidden; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
  transition:transform .25s ease, border-color .25s ease; }
.enumerations[data-format="2"] .enumeration:hover{ transform:translateY(-3px); border-color:rgba(43,232,155,.4); }
.enumerations[data-format="2"] .enumeration::after{ content:counter(enum,decimal-leading-zero);
  position:absolute; top:1.2rem; right:1.4rem; font-family:"Roboto Slab",Georgia,serif;
  font-size:2.6rem; font-weight:800; color:rgba(43,232,155,.16); line-height:1; pointer-events:none; }
.enumerations[data-format="2"] .enumeration__media{ width:48px; height:48px; flex:0 0 48px; align-self:flex-start; border-radius:12px;
  background:rgba(43,232,155,.14); border:1px solid rgba(43,232,155,.32);
  display:flex; align-items:center; justify-content:center; margin-bottom:1.2rem; }
.enumerations[data-format="2"] .enumeration__media img{ width:22px; height:22px; }
.enumerations[data-format="2"] .enumeration__title{ color:#fff; font-family:"Roboto Slab",Georgia,serif;
  font-size:1.16rem; margin:.1rem 0 .55rem; padding-right:2.4rem; }
.enumerations[data-format="2"] .enumeration__text{ color:rgba(255,255,255,.74); font-size:.95rem;
  line-height:1.62; margin:0; }

@media (max-width:960px){
  .enumerations[data-format="2"]{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .enumerations[data-format="2"]{ grid-template-columns:1fr; }
}

/* NAV-DROPDOWN */
/* =========================================================
   HOOFDMENU + submenu's. Content komt uit de MenuBuilder
   (mainmenuitem -> menu_column -> menuitem met subtitel), gerenderd
   door de gedeelde framework-partial (partials/site-nav.php) met de
   canonieke .site-nav__*-klassen. Opmaak = het concept-ontwerp:
   donker paneel (--ink), titel + muted subtitel per item, mint-hover.
   Desktop = hover-paneel, mobiel = statisch ingesprongen in de overlay.
   ========================================================= */
.site-nav__list{ list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.site-nav__item{ display:flex; align-items:center; }
.site-nav__item--has-dropdown{ position:relative; }
.site-nav__item--has-dropdown > .site-nav__link{ display:inline-flex; align-items:center; cursor:pointer; }
/* Caret als ▾-glyph (concept), niet als rotated-border. */
.site-nav__item--has-dropdown > .site-nav__link::after{ content:"\25be"; font-size:.7em; margin-left:.35rem;
  opacity:.7; transition:opacity .18s ease; }
.site-nav__item--has-dropdown:hover > .site-nav__link::after{ opacity:.95; }

.site-nav__dropdown{ position:absolute; top:100%; left:-1rem; margin-top:.5rem; min-width:248px;
  /* Kleur 9 uit het palet (#1C0647) en niet --ink: --ink is themakleur 1 (#150A3A), en dat is
     een andere paarstint. Hier stond `var(--ink,#1C0647)` - de fallback was de bedoelde kleur,
     maar page.php zet --ink altijd, dus die fallback kwam nooit aan bod en het paneel liep uit
     de pas met het ontwerp. */
  background:var(--theme-color-9,#1C0647); border:1px solid rgba(255,255,255,.12); border-radius:16px;
  box-shadow:0 22px 50px rgba(0,0,0,.45); padding:.5rem; z-index:70;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s; }
/* onzichtbare brug zodat de muis van parent naar paneel niet door de gap valt */
.site-nav__dropdown::before{ content:""; position:absolute; top:-.6rem; left:0; right:0; height:.6rem; }
.site-nav__item--has-dropdown:hover > .site-nav__dropdown,
.site-nav__item--has-dropdown:focus-within > .site-nav__dropdown{ opacity:1; visibility:visible; transform:translateY(0); }

/* De partial nest kolommen; SVS gebruikt EEN kolom zonder zichtbare kop. */
.site-nav__dropdown .site-nav__columns,
.site-nav__dropdown .site-nav__column{ display:block; }
.site-nav__dropdown .site-nav__column-header{ display:none; }
.site-nav__dropdown .site-nav__column-list{ list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:.05rem; }
.site-nav__dropdown .site-nav__dropdown-item{ display:block; }

/* Item = titel (wit-85%) + muted subtitel (wit-50%), mint-getinte hover. */
.site-nav .site-nav__dropdown .site-nav__dropdown-link{ display:block; padding:.6rem 1rem; border-radius:10px;
  text-shadow:none; white-space:nowrap;
  /* Deze links dragen sinds de gedeelde header-partial TWEE klassenamen: `site-nav__dropdown-link`
     (deze regels) en `mb__item-link` (critical.css). Die laatste tekent een lichte pil met een rand
     en een pijltje - een ontwerp voor een WIT paneel. Op ons donkere paneel gaf dat witte tekst op
     een bijna-witte pil: onleesbaar. We zetten die drie hier uit; het concept toont platte tekst. */
  background:transparent; border:0; }
.site-nav__dropdown .site-nav__dropdown-link::after{ content:none; }
.site-nav__dropdown .site-nav__item-title{ display:block; font-size:.92rem; font-weight:400; line-height:1.3;
  color:rgba(255,255,255,.85); }
.site-nav__dropdown .site-nav__item-subtitle{ display:block; font-size:.78rem; line-height:1.3; margin-top:.1rem;
  color:rgba(255,255,255,.5); }
.site-nav__dropdown .site-nav__dropdown-link:hover{ background:rgba(43,232,155,.12); }
.site-nav__dropdown .site-nav__dropdown-link:hover .site-nav__item-title{ color:#fff; }

@media (max-width:767px){
  /* Mobiele overlay: submenu statisch/ingesprongen; geen donker paneel (erft de overlay-bg). */
  .site-nav__list{ flex-direction:column; align-items:stretch; gap:0; width:100%; }
  .site-nav__item{ display:block; width:100%; }
  .site-nav__item--has-dropdown{ display:block; width:100%; }
  .site-nav__item--has-dropdown > .site-nav__link{ display:flex; justify-content:space-between; width:100%; }
  .site-nav__item--has-dropdown > .site-nav__link::after{ margin-left:auto; }
  .site-nav__dropdown{ position:static; opacity:1; visibility:visible; transform:none;
    margin:0; min-width:0; border:0; border-radius:0; box-shadow:none; padding:.1rem 0 .3rem .9rem;
    background:transparent; }
  .site-nav__dropdown::before{ display:none; }
  .site-nav .site-nav__dropdown .site-nav__dropdown-link{ padding:.5rem .25rem; }
  .site-nav__dropdown .site-nav__item-title{ font-size:.95rem; color:rgba(255,255,255,.9); }
  .site-nav__dropdown .site-nav__item-subtitle{ font-size:.8rem; color:rgba(255,255,255,.55); }
  /* Scheidingslijnen tussen top-items (framework a:last-child raakt met <ul><li> elke link). */
  .site-nav__list > .site-nav__item{ border-bottom:1px solid var(--line,rgba(0,0,0,.08)); }
  .site-nav__list > .site-nav__item:last-child{ border-bottom:0; }
}

/* HEADER-ACTIES (zoek + winkelmand) — concept icon-buttons, adaptief aan de header-achtergrond. */
.site-header__inner{ justify-content:flex-start; }
.site-logo{ margin-right:auto; }
.site-header__actions{ display:flex; align-items:center; gap:.6rem; }
.icon-btn{ width:42px; height:42px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; text-decoration:none; padding:0; color:var(--ink,#1C0647);
  background:rgba(28,6,71,.06); border:1px solid var(--line,rgba(45,10,110,.12));
  transition:background .2s, border-color .2s, color .2s; }
.icon-btn svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.icon-btn:hover{ background:rgba(43,232,155,.2); border-color:var(--theme-color-2,#2BE89B); }
.cart-btn{ position:relative; }
.cart-badge{ position:absolute; top:-5px; right:-5px; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.66rem; font-weight:700;
  background:var(--theme-color-2,#2BE89B); color:var(--ink,#1C0647); }
/* Boven de hero (witte nav): witte iconen op transparant-wit, zoals de concept-header. */
body.svs-has-hero .icon-btn{ color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); }
body.svs-has-hero .icon-btn:hover{ background:rgba(43,232,155,.2); border-color:var(--theme-color-2,#2BE89B); }
@media (max-width:767px){ .site-header__actions{ display:none; } }

/* CAROUSEL-RESPONSIVE */
/* =========================================================
   Carousel op smalle schermen: minder slides naast elkaar.
   Het framework heeft hiervoor al @container-breakpoints, maar
   de peek-variant (--layout-peek) heeft hogere specificiteit en
   overrulet ze -> mobiel bleef 3-op-een-rij. Interim-override met
   .carousel-prefix (hogere specificiteit) tot de framework-fix er
   is. Stabiele class/attr-hooks, geen id/slug.
   ========================================================= */
@container (max-width: 40rem){
  .carousel .carousel__container[data-layout-cols] .carousel__slide{ flex-basis:50%; }
  .carousel .carousel__container[style*="--layout-peek"][data-layout-cols] .carousel__slide{
    flex-basis:calc((100% - var(--layout-peek,0%)) / 2); }
}
@container (max-width: 26rem){
  .carousel .carousel__container[data-layout-cols] .carousel__slide{ flex-basis:90%; }
  .carousel .carousel__container[style*="--layout-peek"][data-layout-cols] .carousel__slide{
    flex-basis:calc(100% - var(--layout-peek,0%)); }
}
/* TEXT-IMAGE TYPOGRAFIE - afgestemd op het homepage-ontwerp.
   Eyebrow/titel dragen bewust GEEN eigen font-size meer (F718): die weken af van de
   gewone tekst-lagen (16px/24px, browser-default via .ds-eyebrow/.ds-title zonder eigen
   font-size) zonder dat daar een CMS-instelling voor was -- twee koppen op dezelfde
   pagina die verschillend groot zijn, niet corrigeerbaar door de redacteur. */
.layer--text-image .eyebrow{ margin-bottom:1.2rem; }
.layer--text-image .heading{ line-height:1.1; margin-bottom:1.4rem; }
.layer--text-image .prose{ font-size:1.1rem; line-height:1.6; }
@media (max-width:760px){ .layer--text-image .prose{ font-size:1rem; } }

/* Homepage-hero-achtige uitzondering (laag 119, "Waar wij in geloven"): dit blok is bewust
   het grote, home-ontwerp-specifieke kop-type -- niet de site-brede text_image-stijl, en
   dus gescoped op de laag-id in plaats van .layer--text-image (die trof ook /over-ons, F718). */
#layer-119 .eyebrow{ font-size:1.1rem; }
#layer-119 .heading{ font-size:clamp(2rem,4.2vw,3.2rem); }
@media (max-width:760px){ #layer-119 .heading{ font-size:clamp(1.8rem,8vw,2.4rem); } }

.layer--text-image .prose p:last-child strong{ font-weight:600; color:var(--theme-color-4,#2D0A6E); }

/* CARDS-HEADER TYPOGRAFIE - afgestemd op het homepage-ontwerp. */
.layer-cards__eyebrow{ font-size:.8rem; margin-bottom:1rem; }
.layer-cards__title{ font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.1; margin-bottom:1.4rem; }

/* TRUST-KOLOMMEN - titel en kolommen vormen één CMS-sectie. */
.layer--usps:has(.ds-usps-title){ padding-bottom:0; border-bottom:0; }
.layer--columns:has(mark){ background:#EEF0F8; padding:0 0 3rem; border-bottom:1px solid rgba(45,10,110,.10); }
.layer--columns:has(mark) .layer__inner{ padding-block:0; }
.layer--columns:has(mark) .layer__columns{ display:flex; justify-content:center; align-items:center; gap:2.6rem; width:100%; }
.layer--columns:has(mark) .layer__col{ flex:1 1 0; font-family:var(--font-body,"Montserrat",sans-serif); font-size:.98rem; font-weight:600; line-height:1.4; color:#5B5870; text-align:center; }
.layer--columns:has(mark) .ds-column-text{ margin:0; padding:0; color:inherit; font:inherit; }
.layer--columns:has(mark) .ds-column-text p{ margin:0; }
.layer--columns:has(mark) .ds-column-text mark{ background:none; color:#14C97E; padding:0; }
@media(max-width:760px){ .layer--columns:has(mark) .layer__columns{ gap:1.4rem 2rem; flex-wrap:wrap; } }
/* Trustband: de framework-achtergrondlaag volgt dezelfde trustkleur. */
.layer--usps:has(.ds-usps-title) .layer__bg,
.layer--columns:has(mark) .layer__bg{ background:#EEF0F8; }
/* Trustband: ook de interne wrappers dekken de vaste hero-achtergrond af. */
.layer--columns:has(mark) .layer__sc{ background-color:#EEF0F8; }
/* USP-strip (rekenvoorbeelden): geen donkere binnenband; lichte sectie-bg loopt full-bleed door. */
.layer--usps:has(.ds-usps-title) .layer__sc{ background-color:transparent; }
/* Eén kolommenlaag: titelrij boven de vier inhoudskolommen. */
.layer--columns:has(mark){ padding:3rem 0; }
.layer--columns:has(mark) .layer__col:first-child{ flex:0 0 100%; max-width:100%; text-align:center; }
.layer--columns:has(mark) .layer__col:first-child .ds-column-text .card__title{ margin:0 0 1.3rem; color:#5B5870; font-family:var(--font-body,"Montserrat",sans-serif); font-size:.8rem; font-weight:600; letter-spacing:.2em; line-height:1.2; text-transform:uppercase; }
/* De CMS-titelkolom volgt het kleine trust-label uit het ontwerp. */
.layer--columns:has(mark) .layer__col:first-child .ds-column-title{ margin:0 0 1.3rem; color:#5B5870; font-family:var(--font-body,"Montserrat",sans-serif); font-size:.8rem; font-weight:600; letter-spacing:.2em; line-height:1.2; text-transform:uppercase; }
/* Trustrijen dichter bij elkaar zetten. */
.layer--columns:has(mark) .layer__columns{ column-gap:2.6rem; row-gap:.8rem; }
.layer--columns:has(mark) .layer__col:first-child .ds-column-title{ margin-bottom:.4rem; }
/* ---- Opsommingen op donkere ontwerpband ----
   De variant wordt semantisch bepaald door het CMS-format, niet via een laag-id. */
.layer--text:has(.enumerations[data-format="2"]) {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(ellipse at 82% 30%, rgba(43,232,155,.14), transparent 52%),
    var(--theme-color-9, #1C0647);
  color: #fff;
  padding-block: 200px;
}
.layer--text:has(.enumerations[data-format="2"])::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 200px;
  background: linear-gradient(
    180deg,
    #FFFFFF 0%,
    #2BE89B 24%,
    #1FA89A 52%,
    var(--theme-color-9, #1C0647) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.layer--text:has(.enumerations[data-format="2"])::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 200px;
  background: linear-gradient(
    0deg,
    #FFFFFF 0%,
    #2BE89B 24%,
    #1FA89A 52%,
    var(--theme-color-9, #1C0647) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.layer--text:has(.enumerations[data-format="2"]) .layer__sc {
  position: relative;
  z-index: 1;
}


.layer--text:has(.enumerations[data-format="2"]) .eyebrow,
.layer--text:has(.enumerations[data-format="2"]) .ds-eyebrow {
  color: rgba(255,255,255,.72);
}
.layer--text:has(.enumerations[data-format="2"]) .heading,
.layer--text:has(.enumerations[data-format="2"]) .ds-title {
  color: #fff;
}
.layer--text:has(.enumerations[data-format="2"]) .prose,
.layer--text:has(.enumerations[data-format="2"]) .ds-text {
  color: rgba(255,255,255,.72);
}
.layer--text:has(.enumerations[data-format="2"]) .mark--accent {
  color: var(--mint, #2BE89B);
}

.layer--text:has(.enumerations[data-format="2"]) .eyebrow,
.layer--text:has(.enumerations[data-format="2"]) .ds-eyebrow {
  margin: .9rem 0 1rem;
  font-family: var(--font-body, Montserrat, sans-serif);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.2;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.layer--text:has(.enumerations[data-format="2"]) .heading,
.layer--text:has(.enumerations[data-format="2"]) .ds-title {
  color: #fff;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  line-height: 1.1;
}
.layer--text:has(.enumerations[data-format="2"]) .prose > p:first-child {
  margin-top: .9rem;
  font-size: 1.08rem;
  color: rgba(255,255,255,.72);
}


/* Afhaalpunt: informatie en kaart */
.layer--columns:has(.pickup-steps) {
  background: radial-gradient(ellipse at 82% 24%, rgba(255,255,255,.72), transparent 48%), #f1f0fa;
}
.layer--columns:has(.pickup-steps) .ds-eyebrow {
  color: #77738a;
}
.layer--columns:has(.pickup-steps) .ds-column-title,
.layer--columns:has(.pickup-steps) .ds-columns-title {
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  line-height: 1.12;
}



/* Productoverzicht: compacte knophoogte volgens ontwerp. */
.card--product .product-card__detail{margin-block:1em}
.product-card__intro{ color:var(--theme-color-5,#5B5870); }
.product-overview__grid .product-card__intro{display:none}
.product-card__price{ color:var(--theme-color-4,#2D0A6E); font-family:var(--theme-font-2,'Roboto Slab'),serif; font-size:1.5rem; }
.product-detail__price-now{ color:var(--theme-color-4,#2D0A6E); }
.product-card__detail,
.product-detail__add{ color:var(--theme-color-9,#1C0647); font-family:var(--theme-font-1,'Montserrat'),sans-serif; font-weight:600; font-size:.84rem; }
.product-detail__add{ font-size:1rem; }
.product-detail__total{ padding-inline:.5rem; }

/* Specs-blokje pixel-perfect naar ontwerp (concept-homepage.html .prod-specs/.sl/.sv) --
   alleen op de homepage (svs-home-products), de listingpagina heeft nog geen ontwerp. */
.svs-home-products .product-card__specs,
.layer--product-overview .product-card__specs{ background:var(--paper); border-radius:14px; padding:1rem 1.1rem; gap:.7rem 1rem; }
.svs-home-products .product-card__spec-label,
.layer--product-overview .product-card__spec-label{ font-family:var(--theme-font-1,'Montserrat'),sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.06em; color:var(--theme-color-5,#5B5870); }
.svs-home-products .product-card__spec-value,
.layer--product-overview .product-card__spec-value{ font-family:var(--theme-font-2,'Roboto Slab'),serif; font-size:1rem; font-weight:700; color:var(--theme-color-4,#2D0A6E); margin-top:.1rem; }

/* Homepage-productkaarten (laag 162, classes=svs-home-products): foto strak tegen de rand
   i.p.v. de standaard --ws-space-2-marge, en 22px i.p.v. de standaard --ws-radius (12px) --
   zelfde behandeling als de merken-kaarten (803). Alleen deze laag, niet de webshop-
   overzichtpagina (dezelfde .product-card-component, andere context/laag). */
.svs-home-products .card--product{ border-radius:0; overflow:visible; }
.svs-home-products .card__content{ border-radius:22px; overflow:hidden; }
.svs-home-products .product-card__media,
.layer--product-overview .product-card__media{ margin:0; border-radius:22px 22px 0 0; }
.layer--product-overview .product-card{ border-radius:22px; overflow:hidden; }
.svs-home-products .product-card__media img,
.svs-home-products .product-card__image,
.layer--product-overview .product-card__media img,
.layer--product-overview .product-card__image{ border-radius:0; object-fit:contain; background:#fff; }

/* Paginabreedte: --max stond op 72rem (1152px), Ronny wil 1280px. .layer__inner's eigen
   padding (1.5rem/kant) blijft de marge leveren, dus geen aparte width:95%-wrapper nodig.
   Wint van de inline CMS-tokens-<style> (beide @layer site, site.css laadt later = bron-
   volgorde-winst bij gelijke specificiteit). */
:root{ --max:80rem; }

/* Filter-facetten (Zoeken/Merk/Prijs/Status/...) stonden zonder ruimte onder elkaar --
   .product-overview__filter-toggle > *:not(summary){display:block} (punt 775, desktop)
   overschreef het eigen display:flex van .product-overview__filter-form, en gap werkt niet
   op een block-container. Platform-breed componentgedrag, gemeld als Flow-punt; hier lokaal
   hersteld tot dat is opgepakt. */
.product-overview__filter{ background:var(--paper); border-radius:16px; padding:1.35rem 1.35rem 1.5rem; }
.product-overview__filter-title{ font-family:var(--theme-font-2,'Roboto Slab'),serif; font-size:1.15rem; color:var(--theme-color-9,#1C0647); cursor:pointer; }
.product-overview__filter-form{ display:flex; flex-direction:column; gap:var(--ws-space-3,.75rem); margin-top:1rem; }
.product-overview__facet{ padding-bottom:1rem; border-bottom:1px solid color-mix(in srgb, var(--theme-color-4,#2D0A6E) 12%, transparent); }
.product-overview__facet:last-of-type{ border-bottom:0; padding-bottom:0; }
.product-overview__facet legend{ font-family:var(--theme-font-1,'Montserrat'),sans-serif; font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--theme-color-5,#5B5870); margin-bottom:.6rem; }
.product-overview__facet-list label{ color:var(--theme-color-9,#1C0647); }
.product-overview__facet-list input[type="checkbox"]{ accent-color:var(--theme-color-2,#2BE89B); width:1.05rem; height:1.05rem; }
.product-overview__facet-list .facet-count{ background:#fff; border-radius:999px; padding:.05rem .55rem; font-weight:600; }
.product-overview__search,
.product-overview__price-input,
select.product-overview__select{ background:#fff; }
.product-overview__search:focus,
.product-overview__price-input:focus-within,
select.product-overview__select:focus{ border-color:var(--theme-color-2,#2BE89B); box-shadow:0 0 0 3px color-mix(in srgb, var(--theme-color-2,#2BE89B) 25%, transparent); }
.product-overview__filter-clear{ color:var(--theme-color-5,#5B5870); text-decoration:none; }
.product-overview__filter-clear:hover{ text-decoration:underline; }

/* Productoverzicht: de verzamelknop staat gecentreerd onder de kaarten. */
.layer--cards:has(.product-card) .layer-cards__actions{display:flex;justify-content:center}
.layer--cards:has(.product-card) .layer-cards__button{display:inline-flex;align-items:center;margin-block:1em}

/* Energieopslag: drie compacte USP-cards naast elkaar. */
.layer--usps:has(.ds-usps-title) .usps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;width:100%;}
.layer--usps:has(.ds-usps-title) .usps__item{display:block;min-width:0;padding:1.35rem 1.25rem;background:#fff !important;border:1px solid rgba(45,10,110,.12) !important;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.07) !important;color:#5B5870;text-align:left;}
.layer--usps:has(.ds-usps-title) .usps__body{padding:0;background:transparent !important;}
.layer--usps:has(.ds-usps-title) .usps__title{margin:0 0 .45rem;color:#2D0A6E;font-size:1.05rem;font-weight:600;}
.layer--usps:has(.ds-usps-title) .usps__text{margin:0;color:#5B5870;font-size:.9rem;line-height:1.55;}
@media(max-width:760px){.layer--usps:has(.ds-usps-title) .usps{grid-template-columns:1fr;gap:.9rem;}}

/* USP-cards: ruimere verticale maatvoering en subtiel accent. */
.layer--usps:has(.ds-usps-title){padding-block:3.75rem;}
.layer--usps:has(.ds-usps-title) .usps__item{padding-block:1.75rem;padding-inline:1.5rem;border-top:3px solid var(--theme-color-2,#2BE89B) !important;transition:transform .2s ease,box-shadow .2s ease;}
.layer--usps:has(.ds-usps-title) .usps__item:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(0,0,0,.11) !important;}
@media(max-width:760px){.layer--usps:has(.ds-usps-title){padding-block:2.75rem;}.layer--usps:has(.ds-usps-title) .usps__item{padding-block:1.35rem;}}

/* USP-cards: transparante variant zonder accentkleur. */
.layer--usps:has(.ds-usps-title) .usps__item{background:transparent !important;border:0 !important;border-top:0 !important;box-shadow:none !important;}
.layer--usps:has(.ds-usps-title) .usps__item:hover{transform:none;box-shadow:none !important;}

/* Adviesformulier: alle velden onder elkaar (was 2 kolommen, gaf een scheve indeling
   doordat de Naam-compositie zelf al 2 rijen inneemt). */
.layer--text-form .layer-text-form__form form{display:grid;grid-template-columns:1fr;gap:.9rem;}
.layer--text-form .layer-text-form__form form .form-actions{margin-top:0;justify-self:end;}
@media(max-width:600px){.layer--text-form .layer-text-form__form form .form-actions{justify-self:stretch;}}

/* Knopkleur komt uit de CMS-stijlslot design_form__submit (item 7) -- geen hardcoded
   kleur hier meer nodig voor het gewone adviesformulier (contact, laag 13).
   Twee .layer--text-form-formulieren delen deze markup maar horen NIET dezelfde kleur:
   het adviesformulier bij de rekentool (laag 628) hoort bij die pagina's blauwe CTA-stijl,
   losstaand van de CMS-standaardkleur. Vandaar een laag-ID-scope i.p.v. de gedeelde klasse. */
#layer-628 .layer-text-form__form form .form-actions .btn{background:var(--theme-color-4,#2D0A6E);color:#fff;}
#layer-628 .layer-text-form__form form .form-actions .btn:hover{background:color-mix(in srgb,var(--theme-color-4,#2D0A6E) 85%,#000);color:#fff;}


/* Productdetail voelde opgepropt: alle blokken (titel, prijs, uitvoeringen, tekst, specs,
   module-configurator, koopwidget) stonden op precies dezelfde krappe afstand (--ws-space-3).
   Meer lucht vóór de grote overgangen, en de specs + koopwidget als eigen visueel blok
   i.p.v. dat alles even zwaar oogt. */
.product-detail__content > .product-variants{ margin-top:var(--ws-space-6,2.5rem); }
.product-detail__content > .product-detail__text{ margin-top:var(--ws-space-5,1.5rem); }
.product-detail__content > .product-specs-wrap{
  margin-top:var(--ws-space-4,1rem);
  background:var(--paper);
  border-radius:var(--ws-radius,12px);
  padding:.55rem 1.1rem;
}
.product-detail__content > .product-specs-wrap .product-specs__label,
.product-detail__content > .product-specs-wrap .product-specs__value{
  padding-top:.5rem;
  padding-bottom:.5rem;
}
.product-detail__content > .product-detail__add-row{
  margin-top:var(--ws-space-6,2.5rem);
  background:var(--paper);
  border-radius:var(--ws-radius,12px);
  padding:1.25rem 1.4rem;
  max-width:none;
}
.svs-module-config{
  margin-top:var(--ws-space-4,1rem);
  padding-top:var(--ws-space-4,1rem);
  border-top:1px solid rgba(0,0,0,.08);
}

/* Afbeelding blijft in beeld terwijl de (langere) tekstkolom scrollt, i.p.v. leeg wit
   onder de foto zodra de koopwidget verder naar beneden staat dan de afbeelding hoog is. */
@media (min-width:64.0625rem){
  .product-detail__gallery{ position:sticky; top:1.5rem; }
}

/* Titel/prijs-hiërarchie op mobiel (designronde, 06-09-2026): de globale .ds-title-clamp
   (24-48px) zakt onder 768px terug naar zijn ondergrens van 24px -- gelijk aan de prijs
   (32px, groter zelfs), dus je las eerst het bedrag en pas daarna wat je koopt. Alleen HIER
   overschreven (niet de kale .ds-title/.ds-price, dat zou site-breed bleeden): titel omhoog,
   prijs omlaag, zodat het contrast weer klopt zonder de per-type-stijlslot uit te breiden
   met een font-size-veld dat 'ie nu niet heeft. .ds-price bestaat pas na framework-PR #477;
   deze regel is tot dan onschadelijk inert.
   Basis: DESIGNER-agent-review, ratio bewust ruim boven 1:1 (was 1.14:1 bij een eerdere poging). */
@media (max-width:47.9375rem){
  .product-detail__title.ds-title{ font-size:31px; }
  .product-detail__price-now.ds-price{ font-size:24px; }
}





/* Rekentool (svs-calculator) links uitlijnen met de sectie-inhoud i.p.v. gecentreerd (Age, 2026-09-03) */
.layer--markup .svs-calculator{ margin-left:0; margin-right:auto; }


/* Rekentool intro-typografie gelijk aan over-ons (.ds-*) (Age, 2026-09-03) */
.layer--markup .svs-calculator__intro .eyebrow{ font-size:1rem; font-weight:600; letter-spacing:0.2em; }
.layer--markup .svs-calculator__intro h1{ font-family:var(--theme-font-2,"Roboto Slab",Georgia,serif); font-size:clamp(2rem,4.6vw,3rem); font-weight:700; line-height:1.1; color:var(--theme-color-4,#2D0A6E); }
.layer--markup .svs-calculator__intro p{ font-size:1rem; font-weight:300; line-height:1.6; }


/* Punt 744.3: apparaatrij van de rekentool overflowt tussen 601-768px -- de eigen CSS van de
   markup-laag (item 429) heeft alleen een 2-koloms-fallback onder 600px, en de omliggende grid
   stackt pas onder 760px; in dat gat past de vaste 4-koloms-rij (1fr 7rem 7rem 2rem) niet meer
   en het verwijderkruisje viel van het scherm. Zelfde 2-koloms-fallback, nu tot 768px. */
@media(max-width:768px){
  .layer--markup .svs-calculator__device{ grid-template-columns:1fr 1fr 2rem; }
  .layer--markup .svs-calculator__device label:first-child{ grid-column:1/-1; }
}


/* USP-strip typografie/achtergrond gelijk aan over-ons/site-stijl (Age 2026-09-03) */
.layer--usps:has(.ds-usps-title){ background:#F6F7FB; }
.layer--usps:has(.ds-usps-title) .ds-usps-title{ color:var(--theme-color-3,#14C97E); font-size:1rem; letter-spacing:0.2em; font-weight:600; }
.layer--usps:has(.ds-usps-title) .usps__title{ font-family:var(--theme-font-2,"Roboto Slab",Georgia,serif); font-weight:700; font-size:1.2rem; color:var(--theme-color-4,#2D0A6E); }
.layer--usps:has(.ds-usps-title) .usps__text{ font-weight:300; font-size:1rem; line-height:1.6; color:var(--theme-color-5,#5B5870); }
.layer--usps:has(.ds-usps-title){ --usp-icon-size:40px; }
.layer--usps:has(.ds-usps-title) .usps__item{ align-items:flex-start; }


/* USP-strip: icoon-grootte forceren (SVG's zonder intrinsieke maat) + bg naar sitegrijs (Age 2026-09-03) */
.layer--usps:has(.ds-usps-title) .layer__bg{ background:#F6F7FB; }
.layer--usps .usp__icon{ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:0 0 auto; }
.layer--usps .usp__icon img{ width:44px; height:44px; object-fit:contain; display:block; }

/* Geen witte strook tussen laatste laag en (donkere) footer op alle pagina's (niet enkel hero). */
.site-footer{ margin-top:0; }

/* Meer witruimte boven de afsluitende CTA (transitie content -> CTA ~2x). */
.layer--cta{ margin-top:2.75rem; }
@media (max-width:760px){ .layer--cta{ margin-top:1.75rem; } }


/* === Mobiele header (SvS): witte, licht-doorschijnende balk, kleiner logo, iconen rechts === */
@media (max-width:760px){
  .site-header{ background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid rgba(45,10,110,.08); }
  body.svs-has-hero .site-header,
  body.svs-has-hero .site-header.svs-scrolled{ position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(255,255,255,.9); box-shadow:0 4px 18px rgba(0,0,0,.06); }
  .site-header__inner{ align-items:center; gap:.4rem; flex-wrap:nowrap; }
  .site-logo{ margin-right:auto; min-width:0; flex:0 1 auto; }
  .site-header .site-logo .site-logo__img{ height:24px; width:auto; max-width:150px; }
  body.svs-has-hero .site-logo__img{ filter:none; }
  /* zoeken + winkelmand terug in de balk, rechts (waren verborgen op mobiel) */
  .site-header__actions{ display:flex; order:5; gap:.4rem; }
  .site-nav-toggle{ order:6; width:42px; height:42px; border-radius:12px; background:rgba(45,10,110,.06); border:1px solid rgba(45,10,110,.10); color:#2D0A6E; }
  .site-nav-toggle__bars, .site-nav-toggle__bars::before, .site-nav-toggle__bars::after{ background:#2D0A6E; }
  .site-header__actions .icon-btn,
  body.svs-has-hero .site-header__actions .icon-btn{ color:#2D0A6E; background:rgba(45,10,110,.06); border:1px solid rgba(45,10,110,.10); }
  .site-header__actions .icon-btn svg{ stroke:#2D0A6E; }
}


/* === Product-omschrijving: alinea-spacing + opsommingen (zoals bron-pagina) === */

.product-detail__text p{ margin:0 0 1em; }
.product-detail__text p:last-child{ margin-bottom:0; }
.product-detail__text ul, .product-detail__text ol{ margin:.2em 0 1.2em 1.2em; padding:0; }
.product-detail__text li{ margin:.25em 0; }
.prose ul, .product-detail__text ul{ list-style:none; padding-left:0; margin-left:0; }
.prose ul li, .product-detail__text ul li{ position:relative; padding-left:1.3rem; }
.prose ul li::before,
.product-detail__text ul li::before {
    content: "";
    position: absolute;
    left: .2rem;
    top: .85em;
    transform: translateY(-50%);
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 .26rem color-mix(in srgb, var(--accent) 20%, transparent);
}
.product-detail__text h3, .product-detail__text h4{ margin:1.4em 0 .45rem; font-family:var(--theme-font-2,"Roboto Slab",Georgia,serif); }

/* === Specificatietabel op de detailpagina: blauwpaarsige kaart, zoals de specs-blokjes elders === */



/* === Product-hoofdfoto: hele foto tonen (niet bijsnijden) === */
.gallery__main-img{ object-fit:contain; background:#fff; }
.gallery__main{ background:#fff; }

/* === Realtime filteren: zachte laadstatus i.p.v. knipperende vervanging === */
.product-overview__body.is-loading{ opacity:.55; transition:opacity .15s ease; pointer-events:none; }

/* Homepage merken-kaarten (laag 803): vaste 4:3-fotoverhouding + gelijke kaarthoogte in een rij.
   De CMS-schaalinstelling zet de crop-dimensies server-side wel goed, maar zonder deze regel
   bepaalt de natuurlijke beeldhoogte de kaarthoogte, en die liep per foto uiteen. */
.svs-brand-cards .card{ display:flex; flex-direction:column; }
.svs-brand-cards .carousel__controls{ display:none; }
.svs-brand-cards .layer-cards__actions{ display:flex; justify-content:center; text-align:center; }
.svs-brand-cards .card__title{ font-size:1.4rem; }
.svs-brand-cards .card__content{ display:flex; flex-direction:column; height:100%; background:#fff; border-radius:22px; box-shadow:0 3px 2px rgba(21,10,58,.08); overflow:hidden; border:1px solid transparent; transition:border-color .15s ease; }
.svs-brand-cards .card:hover .card__content{ border-color:var(--theme-color-3,#14C97E); }

/* Merkvergelijking (laag "svs-brand-cards", homepage) -- omgezet van tabel-formaat (4) naar
   icoon-formaat (3), zodat Capaciteit/Vermogen een eigen icoontje kunnen dragen (batterij/
   bliksem) en de 3 losse kenmerken een gedeeld vinkje-icoon. Boven blijft de 2-koloms indeling
   voor Capaciteit/Vermogen; de kenmerken-rijen (vanaf de 3e) breken daaruit naar volle breedte
   en vormen zo een simpel lijstje onder de twee kerncijfers, in hetzelfde paneel. */
.svs-brand-cards .enumerations[data-format="3"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .6rem .9rem;
  background: var(--paper-2);
  border-radius: 14px;
  padding: .9rem 1rem;
  margin-block-start: .75rem;
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration__media {
  flex: 0 0 22px;
  width: 22px;
  color: var(--theme-color-3,#14C97E);
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(n+3) {
  grid-column: 1 / -1;
  /* Bij een tweeregelige tekst centreerde de basis-regel (align-items:center) het vinkje
     verticaal over beide regels. Uitlijnen op de eerste regel oogt rustiger. */
  align-items: flex-start;
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(3) {
  margin-block-start: .5rem;
}

/* Deze laag toont 4 kaarten naast elkaar zonder scrollen (number_of_slides=4). Het framework
   heeft al een tussenstap die 5/6 kolommen bij een smaller scherm naar 3 terugbrengt
   (public/modules/carousel.css, @container 60rem), maar "4" staat niet in dat lijstje -- dus
   die bleef tot 40rem gewoon op 4 staan en de kaarten knepen dicht. Zelfde tussenstap, nu ook
   voor 4. */
@container (max-width: 60rem) {
  .svs-brand-cards .carousel__container[data-layout-cols="4"] { --carousel-cols: 2; }
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(n+3) .enumeration__media {
  margin-top: .15em;
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(n+3) .enumeration__media {
  flex-basis: 16px;
  width: 16px;
  /* Het framework zet hier standaard align-self:center op (format 3), dus align-items op de
     rij alleen raakt dit icoon niet -- expliciet overschrijven. */
  align-self: flex-start;
}
/* Capaciteit/Vermogen gebruiken hetzelfde gedeelde vinkje-icoon (enumeration_media op de
   kaart) als de 3 kenmerken eronder -- geen eigen media per rij nodig. Voor déze twee rijen
   willen we het icoon niet tonen, dus verbergen we het hier via CSS i.p.v. het veld leeg te
   laten (dat zou ook de kenmerken-rijen raken, want die delen dezelfde instelling). */
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(-n+2) .enumeration__media {
  display: none;
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(-n+2) .enumeration__subtitle {
  white-space: nowrap;
  /* "2,88-8,64 kWh" (Zendure) is de langste waarde; op smallere kolombreedtes past die niet
     op 1rem -- clamp schaalt 'm terug tot hij past, zonder de kortere waarden te raken. */
  font-size: clamp(.8rem, 6.5cqw, 1rem);
}
.svs-brand-cards .enumerations[data-format="3"] {
  container-type: inline-size;
}
.svs-brand-cards .enumerations[data-format="3"] .enumeration:nth-child(n+3) .enumeration__subtitle {
  font-family: var(--theme-font-1,'Montserrat'),sans-serif;
  font-size: .85rem;
  font-weight: 500;
  color: var(--theme-color-9,#1C0647);
  margin-top: 0;
}
.svs-brand-cards .enumeration__title{ font-family:var(--theme-font-1,'Montserrat'),sans-serif; font-size:.66rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--theme-color-5,#5B5870); }
.svs-brand-cards .enumeration__subtitle{ font-family:var(--theme-font-2,'Roboto Slab'),serif; font-size:1rem; font-weight:700; color:var(--theme-color-4,#2D0A6E); margin-top:.1rem; }
.svs-brand-cards .card__cta{ display:inline-block; background:var(--theme-color-2,#2BE89B); color:var(--theme-color-9,#1C0647); font-family:var(--theme-font-1,'Montserrat'),sans-serif; font-weight:600; font-size:.84rem; border-radius:100px; padding:.6rem 1.2rem; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.svs-brand-cards .card:hover .card__cta{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(43,232,155,.4); }
.svs-brand-cards .card__media{ aspect-ratio:4/3; overflow:hidden; }
.svs-brand-cards .card__photo{ width:100%; height:100%; object-fit:cover; }
.svs-brand-cards .card__body{ flex:1; display:flex; flex-direction:column; }
.svs-brand-cards .card__cta{ margin-top:auto; }



/* AZ-home-card-fill (2026-09-10): home-productkaarten — vierkante productfoto's volledig uitvullen, geen witte balken links/rechts. */
.svs-home-products .product-card__media img,
.svs-home-products .product-card__image{ aspect-ratio:1 / 1; object-fit:contain; }


/* AZ-testimonials-equal-height (2026-09-10): testimonial-kaarten in de carousel gelijke hoogte. */
.svs-testimonials .carousel__container{ align-items:stretch; }
.svs-testimonials .card.carousel__slide{ display:flex; }
.svs-testimonials .card__content,
.svs-testimonials .card__inner{ height:100%; width:100%; }


/* AZ-watals-dark (ss03, 2026-09-10): donkere "Wat als straks"-sectie (V2) - witte titel + mint eyebrow. */
.svs-watals-dark .ds-title,
.svs-watals-dark .layer-cards__title{ color:#FFFFFF; }
.svs-watals-dark .ds-subtitle,
.svs-watals-dark .layer-cards__subtitle{ color:var(--theme-color-2,#2BE89B); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; font-weight:700; font-family:'Montserrat',sans-serif; }


/* AZ-watals-bg (ss03 2026-09-10): zonnepanelen-achtergrondfoto + donkere overlay voor leesbaarheid. */
.svs-watals-dark .ds-title, .svs-watals-dark .layer-cards__title{ text-shadow:0 2px 16px rgba(10,4,30,.55); }
.svs-watals-dark .ds-subtitle, .svs-watals-dark .layer-cards__subtitle{ text-shadow:0 1px 8px rgba(10,4,30,.5); }


/* AZ-watals-bg2 (ss03, 2026-09-10): achtergrondfoto als data-URI (Firefox-proof, wint van @layer) + eyebrow-element groen. */
.svs-watals-dark .ds-eyebrow,
.svs-watals-dark .layer-cards__eyebrow{ color:var(--theme-color-2,#2BE89B); text-transform:uppercase; letter-spacing:.14em; font-size:.82rem; font-weight:700; font-family:'Montserrat',sans-serif; text-shadow:0 1px 8px rgba(10,4,30,.5); }




/* AZ-watals-parallax-mobile (2026-09-10): op mobiel fixed uitzetten (daar werkt background-attachment:fixed niet betrouwbaar). */
@media (max-width: 767px){ .svs-watals-dark .layer__bg{ background-attachment: scroll; } }


/* svs-watals-cards (2026-09-16, Ronny): schets ontwerp/concept-homepage.html -- de 3 kaarten
   stonden als kale tekst rechtstreeks op de achtergrondfoto (weinig contrast). Nu witte,
   afgeronde kaarten met schaduw, zoals .wat-card in de schets. */
/* De kaart-box hoort op .card__content, niet op .card of .card__inner -- zelfde plek als
   .svs-brand-cards .card__content elders in dit bestand. .card (het <article>) is de grid-cel,
   .card__inner/.card__link is de flex-kolom + klikvlak; nog een box op .card zelf gaf twee
   elementen die allebei "de kaart" probeerden te zijn (dubbel-op). */
.svs-watals-dark .card__content{
  background:#fff;
  border:1px solid rgba(45,10,110,.10);
  border-radius:18px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.svs-watals-dark .card:hover .card__content{
  transform:translateY(-4px);
  box-shadow:0 18px 40px rgba(45,10,110,.1);
  border-color:var(--theme-color-2,#2BE89B);
}
.svs-watals-dark .card__body{
  padding:2rem;
}
.svs-watals-dark .card__title{
  font-size:1.12rem;
  color:var(--theme-color-4,#2D0A6E);
  margin-bottom:.8rem;
  line-height:1.3;
}
.svs-watals-dark .card__text{
  font-size:.96rem;
  color:var(--theme-color-5,#5B5870);
  margin-bottom:1rem;
}
.svs-watals-dark .card__cta{
  display:inline-block;
  background:none;
  padding:0;
  border-radius:0;
  color:var(--theme-color-2,#14C97E);
  font-family:var(--theme-font-1,'Montserrat'),sans-serif;
  font-weight:600;
  font-size:.88rem;
  transition:color .18s ease;
}
.svs-watals-dark .card__cta::after{
  content:'\2192';
  margin-left:.35em;
  display:inline-block;
  transition:transform .18s ease;
}
.svs-watals-dark .card:hover .card__cta{ color:var(--theme-color-4,#2D0A6E); }
.svs-watals-dark .card:hover .card__cta::after{ transform:translateX(3px); }


/* Verberg geneste productintro; alleen de buitenste intro blijft zichtbaar. */
.product-card__intro .product-card__intro{display:none}

/* Product-specificaties alleen op de productdetailpagina tonen. */
.layer--product-overview .product-card__specs{display:none}

/* Gekozen filteroptie duidelijk markeren. */
.layer--product-overview .product-overview__facet-list label:has(input:checked){ background:color-mix(in srgb,var(--theme-color-3,#1FA89A) 12%,#fff); border-radius:.5rem; }

/* Product-specificaties verbergen op SVS. */
.product-specs-wrap{display:none}
.product-detail__total{display:flex;align-items:center;justify-content:space-between;gap:1rem}

/* Fabrikant- en veiligheidsinformatie als zelfstandig kaartblok. */
.product-safety-info{margin:2rem 0 0;padding:1.5rem;background:#fafafa;border:1px solid #6b7280;border-radius:1rem}
.product-safety-info__toggle{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:-.25rem 0 1rem;color:var(--theme-color-1,#17324D);font-size:1.1rem;font-weight:700;cursor:pointer;list-style:none}.product-safety-info__toggle::-webkit-details-marker{display:none}.product-safety-info__toggle::after{content:'›';color:var(--theme-color-3,#1FA89A);font-size:1.6rem;line-height:1;transform:rotate(90deg);transition:transform .2s ease}.product-safety-info:not([open]) .product-safety-info__toggle{margin-bottom:-.25rem}.product-safety-info:not([open]) .product-safety-info__toggle::after{transform:rotate(0deg)}
.product-safety-info__list{display:grid;grid-template-columns:minmax(10rem,.35fr) 1fr;gap:.5rem 1rem;margin:0}
.product-safety-info__list dt{font-weight:700;color:var(--theme-color-1,#17324D)}
.product-safety-info__list dd{margin:0;white-space:pre-line}
@media (max-width:600px){.product-safety-info__list{display:block}.product-safety-info__list dt{margin-top:.75rem}.product-safety-info__list dt:first-child{margin-top:0}}


/* AZ-hamburger-dunner (2026-09-10): hamburger-icoon als 3 dunne navy lijntjes i.p.v. dik navy blok. */
.site-nav-toggle__bars{ background:transparent; }
.site-nav-toggle__bars > span{ background:#2D0A6E; height:2px; }



/* AZ-mobiel-header-hero (2026-09-10): 3 mobiele fixes. */
@media (max-width: 767px){
  .site-header .site-logo__img--compact{ height:36px !important; width:auto !important; max-width:none !important; }
  .site-nav-toggle{ margin-left:8px; }
}


/* AZ-kb-reversed-vcenter (2026-09-15): tekst verticaal centreren t.o.v. de foto in image-links (reversed) text_image-lagen (o.a. kennisbank 'Waar begin je?'). */
.layer--text-image.is-reversed .layer-text__grid{ align-items:center; }


/* AZ-kb-sectietitels (2026-09-15): richtext-sectietitels (kennisbank) in de stijl van 'Titel kleinere versie' (683): theme-color-4 / theme-font-2 / bold / 20->32px fluid / lh 1.1. */
.svs-sectietitel{
  color: var(--theme-color-4);
  font-family: var(--theme-font-2);
  font-weight: bold;
  line-height: 1.1;
  font-size: clamp(20px, calc(20px + 12 * (100vw - 768px) / 512), 32px);
  margin-bottom: 1rem;
}


/* Merk-overlay (AccuMate e.a.): framework rendert .media-overlay zonder positionering; site-hook zet 'm full-cover over de kaartfoto */
.card__media{position:relative;}
.card__media .media-overlay{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;pointer-events:none;}


/* AZ-merken-logostrip (2026-09-15): merken-logostrip op de home (tussen hero en 'Nu opslaan'). 4 logo's op gelijke hoogte, transparant, gecentreerd. Logo's worden later evt. lichter gemaakt. */
.svs-merken-strip .layer__cards-grid{ grid-template-columns: repeat(4, 1fr); align-items: center; gap: 2.5rem; }
.svs-merken-strip .card{ background: transparent; box-shadow: none; border: 0; }
.svs-merken-strip .card__content{ padding: 0; }
.svs-merken-strip .card__media{ aspect-ratio: auto; }
.svs-merken-strip .card__media, .svs-merken-strip .media__viewport{ position: static; height: auto; }
.svs-merken-strip .card__media img{ position: static; height: 72px; width: auto; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; }
@media (max-width: 767px){
  .svs-merken-strip .layer__cards-grid{ grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
  .svs-merken-strip .card__media img{ height: 52px; }
}


/* AZ-merken-logobreedte (2026-09-15): logogroep gecentreerd binnen max 960px zodat de logo's dichter bij elkaar staan. */
.svs-merken-strip .layer__cards-grid{ max-width: 960px; margin-inline: auto; }


/* AZ-merken-logofix (2026-09-15): logo's niet afbreken (overflow zichtbaar) + 32% opacity. Uitlijning/grootte zit in de SVG's zelf (gedeeld canvas), geen per-logo CSS meer. */
.svs-merken-strip .card,
.svs-merken-strip .card__content,
.svs-merken-strip .card__media,
.svs-merken-strip .media__viewport{ overflow: visible; }
.svs-merken-strip .card__media img{ opacity: 0.32; }

/* Vergelijk-knop als subtiel icoon i.p.v. een dikke knop op de kaart (Ronny, 2026-09-15):
   prototype op SVS vóór dit een framework-module wordt, dus bewust site-CSS die de bestaande
   .product-card__compare-knop (uit het framework, public/modules/product-filter.js)
   herstyled -- geen nieuwe knop, geen eigen state, alleen presentatie. */
.product-card { position: relative; }
.product-card .product-card__compare {
  position: absolute;
  top: .6rem;
  right: .6rem;
  z-index: 2;
  display: block;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line, #e5e5e5);
  background: rgba(255,255,255,.92);
  color: var(--theme-color-4, #2D0A6E);
  cursor: pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
  /* Tekst blijft voor screenreaders, verdwijnt visueel achter het icoon hieronder. */
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}
.product-card .product-card__compare::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><line x1="12" y1="3" x2="12" y2="21"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h3"/><path d="M16 3h3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-3"/><line x1="12" y1="3" x2="12" y2="21"/></svg>') center / contain no-repeat;
}
.product-card .product-card__compare:hover,
.product-card .product-card__compare[aria-pressed="true"] {
  background: var(--theme-color-2, #2BE89B);
  border-color: var(--theme-color-2, #2BE89B);
  color: var(--theme-color-9, #1C0647);
  box-shadow: 0 3px 10px rgba(0,0,0,.12);
}

/* Zwevende balk: pas zichtbaar vanaf 2 geselecteerde producten (svs-compare.js zet de klasse
   .svs-compare-tray--visible). Verschijnt onderin i.p.v. dat de kaart zelf drukker wordt. */
.svs-compare-tray {
  position: fixed;
  left: 50%;
  bottom: 1.2rem;
  transform: translateX(-50%) translateY(120%);
  opacity: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--theme-color-9, #1C0647);
  color: #fff;
  border-radius: 100px;
  padding: .7rem .8rem .7rem 1.2rem;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  font-family: var(--theme-font-1, 'Montserrat'), sans-serif;
  font-size: .88rem;
  transition: transform .2s ease, opacity .2s ease;
  pointer-events: none;
}
.svs-compare-tray--visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.svs-compare-tray__count { font-weight: 600; white-space: nowrap; }
.svs-compare-tray__view,
.svs-compare-tray__clear {
  border: 0;
  border-radius: 100px;
  padding: .5rem 1rem;
  font-family: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.svs-compare-tray__view {
  background: var(--theme-color-2, #2BE89B);
  color: var(--theme-color-9, #1C0647);
  text-decoration: none;
  display: inline-block;
}
.svs-compare-tray__clear {
  background: transparent;
  color: rgba(255,255,255,.75);
}
.svs-compare-tray__clear:hover { color: #fff; }
@media (max-width: 480px) {
  .svs-compare-tray { left: 1rem; right: 1rem; transform: translateY(120%); }
  .svs-compare-tray--visible { transform: translateY(0); }
}

/* Vergelijk-tabel (/vergelijk en de layer_compare-laag in het algemeen), Ronny 2026-09-15:
   LayerCompare is een self-contained framework-laag zonder .layer__inner-wrapper en dus zonder
   basisopmaak (bewust -- iedere site stylet 'm zelf). Hieronder de eerste, volledige styling. */
.layer__compare {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2.75rem 1.5rem 5rem;
}
.compare__title {
  font-family: var(--theme-font-2, 'Roboto Slab'), Georgia, serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--theme-color-9, #1C0647);
  margin: 0 0 .5rem;
}
.compare__subtitle {
  color: var(--theme-color-5, #5B5870);
  margin: 0 0 1.75rem;
  font-size: 1.02rem;
  max-width: 42rem;
}
.compare__empty {
  max-width: 30rem;
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
  color: var(--theme-color-5, #5B5870);
  font-size: 1.05rem;
  background: rgba(43,232,155,.06);
  border: 1px dashed rgba(45,10,110,.18);
  border-radius: 18px;
}
.compare__wrap { position: relative; }
.compare__scroll {
  overflow-x: auto;
  border-radius: 20px;
  border: 1px solid rgba(45,10,110,.10);
  box-shadow: 0 16px 40px rgba(45,10,110,.10);
  /* Scroll-snap (Ronny 2026-09-15, "misschien een carousel"): blijft een tabel -- dus echt
     naast-elkaar vergelijken blijft mogelijk -- maar elke productkolom "klikt" vast tijdens het
     scrollen, en de gradient hieronder laat zien of er nog meer te zien is (klassieke
     CSS-only-scrollschaduwen-truc: de witte laag beweegt MEE met de inhoud (local), de schaduw
     blijft VAST aan de rand (scroll), dus hij verdwijnt vanzelf aan het einde). */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)) 0 0,
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    linear-gradient(to right, rgba(45,10,110,.16), rgba(45,10,110,0)) 0 0,
    linear-gradient(to left, rgba(45,10,110,.16), rgba(45,10,110,0)) 100% 0;
  background-repeat: no-repeat;
  background-color: #fff;
  background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
table.compare {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .92rem;
}
table.compare thead th:not(.compare__corner),
table.compare tbody td { scroll-snap-align: start; }
.compare__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(45,10,110,.14);
  background: #fff;
  color: var(--theme-color-9, #1C0647);
  box-shadow: 0 10px 24px rgba(45,10,110,.16);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .15s ease, transform .15s ease;
}
.compare__arrow:hover { background: var(--theme-color-2, #2BE89B); border-color: var(--theme-color-2, #2BE89B); }
.compare__arrow[disabled] { opacity: 0; pointer-events: none; }
.compare__arrow--prev { left: -18px; }
.compare__arrow--next { right: -18px; }
.compare__arrow svg { width: 18px; height: 18px; }
@media (max-width: 640px) {
  .compare__arrow { display: none; }
}
table.compare th,
table.compare td {
  padding: .9rem 1.4rem;
  text-align: left;
  border-bottom: 1px solid rgba(45,10,110,.08);
}
table.compare tbody tr:last-child th,
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare thead th {
  background: var(--theme-color-9, #1C0647);
  color: #fff;
  font-family: var(--theme-font-2, 'Roboto Slab'), Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  white-space: normal;
  vertical-align: bottom;
}
table.compare .compare__col--highlight { background: var(--theme-color-4, #2D0A6E); }
table.compare .compare__feature {
  font-weight: 600;
  color: var(--theme-color-9, #1C0647);
  /* Ondoorzichtig -- anders schemert de tekst van de kolom eronder door zodra je scrolt
     (Ronny, 2026-09-15: "tekst loopt over elkaar heen" bij 4 producten). */
  background: #eefbf5;
  white-space: normal;
  position: sticky;
  left: 0;
  z-index: 1;
  box-shadow: 2px 0 6px rgba(45,10,110,.06);
}
table.compare thead .compare__corner {
  position: sticky;
  left: 0;
  z-index: 2;
}
table.compare tbody tr:nth-child(even) .compare__feature { background: #dcf7ea; }
table.compare .compare__cell { color: var(--theme-color-1, #150A3A); white-space: nowrap; }
table.compare .compare__cell--missing { color: var(--theme-color-5, #5B5870); font-style: italic; }
table.compare .compare__cell--yes .compare__mark { color: var(--theme-color-3, #14C97E); }
table.compare .compare__cell--no .compare__mark { color: rgba(45,10,110,.3); }
/* .compare__scroll rondt zelf af, maar overflow-x:auto laat de rechte tabelhoeken erdoorheen
   priemen -- de hoek-cellen zelf krijgen daarom dezelfde radius mee. */
table.compare thead tr:first-child th:first-child { border-top-left-radius: 20px; }
table.compare thead tr:first-child th:last-child { border-top-right-radius: 20px; }
table.compare tbody tr:last-child :first-child { border-bottom-left-radius: 20px; }
table.compare tbody tr:last-child :last-child { border-bottom-right-radius: 20px; }
table.compare .compare__cell--image { text-align: center; }
.compare__photo {
  width: 84px;
  height: 84px;
  object-fit: contain;
  border-radius: 12px;
  background: #f6f7fb;
  padding: 6px;
}
@media (max-width: 640px) {
  .layer__compare { padding-top: 2rem; }
  /* Mobiel (Ronny 2026-09-15: "niet erg mobile friendly"): de sticky kenmerken-kolom nam de
     helft van een smal scherm in beslag, waardoor er van de eerste productkolom bijna niets
     overbleef. Kleinere kolom + minder padding + kleinere foto geeft meer ruimte aan de
     productdata zelf; table.compare's min-width blijft bewust bestaan (garandeert altijd
     leesbare kolommen, dus horizontaal scrollen), maar wordt smaller. */
  table.compare { min-width: 26rem; font-size: .84rem; }
  table.compare th,
  table.compare td { padding: .6rem .75rem; }
  table.compare .compare__feature,
  table.compare .compare__corner {
    max-width: 6rem;
    /* "Artikelnummer" is 1 lang woord zonder natuurlijk breekpunt -- zonder dit respecteert de
       browser de max-width niet (een woord krimpt nooit vanzelf) en loopt de tekst het volgende
       kolom in (Ronny 2026-09-15: zag er als "ArtikelnummerFOXESS-P100" uit). */
    overflow-wrap: break-word;
  }
  .compare__photo { width: 56px; height: 56px; }
  .compare__scroll { background-size: 24px 100%, 24px 100%, 10px 100%, 10px 100%; }
}