/* ============================================================
   C-Parts  /  gedeelde stylesheet
   Palet: donkergroen op gebroken wit. Toon: bewijs, geen alarm.

   Typografie: DINish, een open herwerking van DIN 1451, de letter die het
   Deutsches Institut fuer Normung in 1931 vastlegde voor verkeersborden,
   technische tekeningen en machineplaatjes. Voor een bedrijf dat op normen
   verkoopt is de letter zelf een norm. Voor codes en maten Atkinson
   Hyperlegible Mono, ontworpen door het Braille Institute om lijkende tekens
   uit elkaar te trekken (1 tegen l tegen I, 8 tegen B), wat bij UN 3480 en
   4H2/Y13/S geen smaakkwestie is maar leesbaarheid.
   Beide zelf gehost, dus geen verzoek naar fonts.gstatic.com.
   ============================================================ */

@font-face {
  font-family: "DINish";
  src: url("fonts/DINish-var.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-stretch: 75% 125%;
  font-style: oblique 0deg 12deg;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("fonts/AtkinsonMono-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Atkinson Mono";
  src: url("fonts/AtkinsonMono-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F, U+2020, U+20A0-20AB, U+2113;
}

:root {
  --paper: #F4F5F3;
  --white: #FFFFFF;
  --ink: #0C1113;
  --ink-2: #4B565B;
  --ink-3: #8C979B;
  --rule: #D9DDDA;
  --rule-2: #E9ECEA;
  --dark: #0A1B14;
  --dark-2: #11271B;
  --green: #05713A;
  --green-lit: #4FB87C;

  --pad: clamp(20px, 4.6vw, 76px);
  --f: "DINish", "Roboto Condensed", "Segoe UI", Helvetica, Arial, sans-serif;
  --m: "Atkinson Mono", ui-monospace, Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.005em; text-wrap: balance; }
/* Zonder dit erven koppen de regelafstand 1.5 van de body, wat bij een grote
   kop een gat tussen de regels geeft. */
h1, h2 { font-stretch: 88%; line-height: 1.08; }
h3, h4 { line-height: 1.25; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--green-lit); outline-offset: 3px; }

/* Kleine mono-labels. Nooit met een stip ervoor, dat leest als sjabloon. */
.m {
  font-family: var(--f);
  font-stretch: 78%;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Alleen echte codes, maten en normnummers krijgen de mono. */
.code, code {
  font-family: var(--m);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.bleed { padding-inline: var(--pad); }
.wrap { max-width: 1400px; margin-inline: auto; }
.narrow { max-width: 980px; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green); color: #fff; padding: 12px 20px;
}
.skip:focus { left: 0; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  background: var(--green); color: #fff;
  font-family: inherit; font-weight: 600; font-size: 15px;
  border: 1px solid var(--green); border-radius: 2px;
  transition: background .15s, color .15s, border-color .15s;
}
.btn:hover { background: var(--green-lit); border-color: var(--green-lit); color: var(--dark); }
.btn.ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.btn.ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }
.btn.line { background: transparent; color: var(--green); border-color: var(--rule); }
.btn.line:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* ================= REVEAL ================= */

.js .up { opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1); }
.js .up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .up { opacity: 1; transform: none; transition: none; } }

/* ================= UTILITY BAR ================= */

.util { background: var(--dark); color: #fff; position: relative; z-index: 60; }
.util .row { display: flex; align-items: center; gap: 20px; height: 60px; }
.brand { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; display: inline-flex; align-items: center; gap: 9px; color: #fff; flex: none; }
.brand .mark { width: 19px; height: 19px; color: var(--green-lit); flex: none; }
.brand-logo { height: 34px; width: auto; display: block; }

.nav-links { display: flex; align-items: center; justify-content: center; gap: 26px; }
.nav-links a { font-size: 14px; color: rgba(255,255,255,.8); white-space: nowrap; transition: color .15s; }
.nav-links a:hover, .nav-links a:focus-visible { color: #fff; }

/* Vanaf 1081px staat de balk op een grid zodat de navigatie echt in het
   midden centreert, ongeacht hoe breed het logo of de zoekbalk zijn. */
@media (min-width: 1081px) {
  .util .row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; column-gap: 24px; }
}

.util .search { position: relative; flex: none; width: 200px; }
.util .search input {
  width: 100%; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14); border-radius: 3px;
  padding: 8px 12px; font-family: inherit; font-size: 13px; color: #fff;
}
.util .search input::placeholder { color: rgba(255,255,255,.45); }
.util .search input:focus { outline: none; border-color: var(--green-lit); background: rgba(255,255,255,.12); }
.search-close { display: none; }

.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 80;
  background: var(--dark-2); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 6px; max-height: 60vh; overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.search-results a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 6px; color: #fff; transition: background .15s;
}
.search-results a:hover, .search-results a:focus-visible { background: rgba(255,255,255,.08); }
.search-results a b { font-weight: 600; font-size: 14px; }
.search-results a span { font-size: 12px; color: rgba(255,255,255,.55); white-space: nowrap; }
.search-empty { padding: 10px 12px; font-size: 13.5px; color: rgba(255,255,255,.55); }

.util .actions { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.util .tel { font-size: 13.5px; color: rgba(255,255,255,.8); display: flex; align-items: center; gap: 7px; }
.util .tel svg { width: 14px; height: 14px; color: var(--green-lit); }

.lang-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; height: 30px; padding-inline: 6px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.75);
  transition: border-color .15s, color .15s, background .15s;
}
.lang-toggle:hover, .lang-toggle:focus-visible { color: #fff; border-color: var(--green-lit); background: rgba(79,184,124,.12); }

.search-toggle {
  display: none; width: 34px; height: 34px; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px; flex: none;
  background: transparent; cursor: pointer; color: rgba(255,255,255,.8);
}
.search-toggle svg { width: 16px; height: 16px; }

.cart-toggle {
  position: relative; display: grid; place-items: center;
  width: 34px; height: 34px; flex: none;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px;
  color: rgba(255,255,255,.8); transition: border-color .15s, color .15s, background .15s;
}
.cart-toggle:hover, .cart-toggle:focus-visible { color: #fff; border-color: var(--green-lit); background: rgba(79,184,124,.12); }
.cart-toggle svg { width: 16px; height: 16px; }
.cart-badge {
  position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding-inline: 3px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--green-lit); color: var(--dark); font-size: 10.5px; font-weight: 700; line-height: 1;
}

.cta-btn {
  position: relative; display: inline-flex; align-items: center;
  padding: 9px 18px; background: var(--green); color: #fff; font-size: 13.5px; font-weight: 600;
  border-radius: 3px; border: 1px solid var(--green); transition: background .15s, border-color .15s, color .15s;
}
.cta-btn:hover { background: var(--green-lit); border-color: var(--green-lit); color: var(--dark); }
.cta-btn .ring {
  position: absolute; inset: 0; border-radius: 3px; border: 1.5px solid var(--green-lit);
  opacity: 0; pointer-events: none; animation: cta-ping 2.6s ease-out infinite;
}
@keyframes cta-ping { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(1.22); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cta-btn .ring { animation: none; opacity: 0; } }

.menu { position: relative; display: none; }
.util .grid-ico {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.16); border-radius: 3px; flex: none;
  background: transparent; cursor: pointer; transition: border-color .15s, background .15s;
}
.util .grid-ico svg { width: 15px; height: 15px; color: rgba(255,255,255,.8); }
.util .grid-ico[aria-expanded="true"] { border-color: var(--green-lit); background: rgba(79,184,124,.12); }

.menu-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 80;
  background: var(--dark-2); border: 1px solid rgba(255,255,255,.14); border-radius: 10px;
  padding: 8px; min-width: 210px; box-shadow: 0 16px 40px rgba(0,0,0,.4);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.menu.open .menu-panel { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.menu-panel a { padding: 10px 14px; border-radius: 6px; font-size: 14px; color: rgba(255,255,255,.82); transition: background .15s, color .15s; }
.menu-panel a:hover, .menu-panel a:focus-visible { background: rgba(255,255,255,.08); color: #fff; }
.menu-panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.12); margin: 6px 8px; }

@media (max-width: 1080px) { .nav-links { display: none; } .menu { display: block; } }
@media (max-width: 620px) { .util .tel { display: none; } }

/* Op telefoonbreedte is de zoekbalk zelf verborgen (zie .util .search hierboven);
   het loepje opent hem dan als overlay over de hele balk. */
@media (max-width: 760px) {
  .cta-btn { display: none; }
  .search-toggle { display: grid; }
  .util .search { display: none; }
  .util.search-open .search {
    display: flex; align-items: center; gap: 8px;
    position: absolute; inset: 0; z-index: 90; width: auto; max-width: none;
    padding-inline: var(--pad); background: var(--dark);
  }
  .util.search-open .search-results { top: calc(100% + 1px); border-radius: 0 0 10px 10px; }
  .util.search-open .search-close { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: transparent; border: 0; color: rgba(255,255,255,.7); }
}

/* ================= HERO, SCHERMVULLEND ================= */

.hero {
  position: relative; display: flex; flex-direction: column;
  min-height: calc(100svh - 60px); overflow: hidden; background: var(--dark);
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg .bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 45%;
}
.hero .scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(6,17,12,.46) 0%, rgba(6,17,12,.37) 26%, rgba(6,17,12,.18) 54%, rgba(6,17,12,.03) 80%),
    linear-gradient(to top, rgba(6,17,12,.40) 0%, rgba(6,17,12,0) 42%);
}
.hero-body { position: relative; z-index: 2; flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding-block: clamp(56px, 10vh, 120px); }
.hero-inner { max-width: 1500px; color: #fff; }
.hero .eyebrow { color: var(--green-lit); margin-bottom: 20px; display: block; }
.hero h1 {
  font-size: clamp(2.6rem, 5.7vw, 5.0rem); line-height: 1.02; letter-spacing: -0.02em;
  color: #fff; white-space: nowrap; margin-inline: auto;
  opacity: 0; transform: translateY(16px);
  animation: heroTitleIn .8s cubic-bezier(.2,.7,.3,1) .15s forwards;
}
@keyframes heroTitleIn { to { opacity: 1; transform: none; } }
.hero h1 .hl { position: relative; display: inline-block; }
.hero h1 .hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.08em; height: 3px;
  background: var(--green-lit); border-radius: 2px;
  transform: scaleX(0); transform-origin: left;
  animation: heroUnderline .7s cubic-bezier(.2,.7,.3,1) .95s forwards;
}
@keyframes heroUnderline { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero h1 { opacity: 1; transform: none; animation: none; }
  .hero h1 .hl::after { transform: scaleX(1); animation: none; }
}
.hero p { margin-top: 24px; font-size: clamp(1.1rem, 1.5vw, 1.32rem); color: rgba(255,255,255,.84); max-width: 64ch; margin-inline: auto; }
.hero .cta-row { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* De tweesplitsing thuis/zakelijk zit vast onderaan de hero, zodat beide
   doelgroepen hun route zien zonder te scrollen. */
.split { position: relative; z-index: 2; border-top: 1px solid rgba(255,255,255,.16); background: rgba(6,17,12,.42); backdrop-filter: blur(6px); }
.split-row { display: grid; grid-template-columns: 1fr 1fr; }
.split-row a {
  position: relative; z-index: 0;
  display: flex; align-items: center; gap: 18px;
  padding: 24px 0; color: #fff;
}
.split-row a:first-child { padding-right: var(--pad); border-right: 1px solid rgba(255,255,255,.16); }
.split-row a:last-child { padding-left: clamp(20px, 3vw, 44px); }
/* De hover-vlak loopt met -100vw/+100vw door tot de schermrand; .hero
   heeft overflow:hidden en knipt het precies af bij de viewport-rand. */
.split-row a::before {
  content: ""; position: absolute; z-index: -1; inset-block: 0;
  background: rgba(79,184,124,.12); opacity: 0; transition: opacity .18s;
}
.split-row a:first-child::before { left: -100vw; right: 0; }
.split-row a:last-child::before { left: 0; right: -100vw; }
.split-row a:hover::before, .split-row a:focus-visible::before { opacity: 1; }
.split-row .ico { width: 40px; height: 40px; flex: none; color: var(--green-lit); }
.split-row .ico svg { width: 100%; height: 100%; }
.split-row b { display: block; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.02em; }
.split-row span { display: block; font-size: .9rem; color: rgba(255,255,255,.66); margin-top: 3px; }
@media (max-width: 760px) {
  .split-row { grid-template-columns: 1fr; }
  .split-row a:first-child { padding-right: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
  .split-row a:last-child { padding-left: 0; }
  .split-row a { padding: 18px 0; }
  .hero .cta-row { margin-top: 26px; }
  .hero h1 { white-space: normal; }
  .hero-bg .bg { object-position: 78% 45%; }
}

/* ================= MERKENBALK ================= */

.brand-bar {
  background: var(--dark); padding: 26px 0; overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08);
}
.brand-track { display: flex; width: max-content; align-items: center; gap: clamp(64px, 9vw, 140px); animation: brand-scroll 52s linear infinite; }
/* Alle merken zijn witte SVG's, zodat de balk één thema houdt in plaats van
   een rij losse gekleurde plaatjes op witte tegels. */
.brand-track img { display: block; width: auto; opacity: .72; transition: opacity .2s; flex: none; }
.brand-track img:hover { opacity: 1; }
.brand-track img.wide { height: 22px; }
.brand-track img.tall { height: 42px; }
@keyframes brand-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; } }

/* ================= INFORMATIESECTIE ================= */

.info { background: var(--paper); padding-block: clamp(70px, 10vh, 130px); }
.info-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 520px); gap: clamp(28px, 5vw, 64px); align-items: end; }
.info-lede { max-width: 760px; }
.info-lede .m { color: var(--green); display: block; margin-bottom: 18px; }
.info-lede h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; }
.info-lede p { margin-top: 22px; font-size: clamp(1.05rem, 1.4vw, 1.22rem); line-height: 1.62; color: var(--ink-2); }
.info-lede p + p { margin-top: 15px; }
.info-lede strong { color: var(--ink); font-weight: 600; }
.info-shot-wrap { position: relative; align-self: end; aspect-ratio: 16 / 9; }
.info-shot-wrap::before {
  content: ""; position: absolute; top: -14px; right: -14px; width: 100%; height: 100%;
  background: var(--green); z-index: 0;
}
.info-shot { position: absolute; inset: 0; z-index: 1; margin: 0; background: var(--white); border: 1px solid var(--rule); overflow: hidden; }
.info-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.info-shot-swap img { position: absolute; inset: 0; animation: infoShotSwap 9s ease-in-out infinite; }
.info-shot-swap img:nth-child(2) { animation-delay: -4.5s; }
@keyframes infoShotSwap {
  0%, 44% { opacity: 1; }
  50%, 94% { opacity: 0; }
  100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .info-shot-swap img { animation: none; opacity: 1; }
  .info-shot-swap img:nth-child(2) { opacity: 0; }
}
@media (max-width: 980px) {
  .info-top { grid-template-columns: 1fr; }
  .info-shot-wrap { width: min(100%, 520px); height: auto; aspect-ratio: 16 / 9; }
}

/* Drie momenten van een accu-incident. Geen genummerde stappen, maar een
   tijdlijn: dat is wat het assortiment werkelijk beschrijft. */
.phases { margin-top: clamp(48px, 7vh, 84px); }
.phase-grid {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border-top: 2px solid var(--ink);
}
.phase-grid::after {
  content: ""; position: absolute; left: 0; right: 0; top: -3px; z-index: 3; height: 4px;
  background: var(--green); transform: scaleX(0); transform-origin: left center;
}
.phase-grid.is-filled::after { animation: timeline-fill 1.6s cubic-bezier(.18,.75,.2,1) forwards; }
@keyframes timeline-fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
.phase {
  padding: 30px 30px 32px 0; border-right: 1px solid var(--rule); position: relative; z-index: 1;
}
.phase:last-child { border-right: 0; }
.phase + .phase { padding-left: 30px; }
.phase::before {
  content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px;
  background: var(--green); border-radius: 50%;
}
.phase + .phase::before { left: 30px; }
.phase .m { color: var(--ink-3); display: block; margin-bottom: 12px; }
.phase h3 { font-size: 1.35rem; letter-spacing: -0.03em; }
.phase p { margin-top: 12px; color: var(--ink-2); font-size: .97rem; line-height: 1.58; }
.phase ul { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.phase li a { font-size: .93rem; color: var(--green); border-bottom: 1px solid rgba(5,113,58,.28); padding-bottom: 1px; }
.phase li a:hover { border-bottom-color: var(--green); }
@media (max-width: 900px) {
  .phase-grid { grid-template-columns: 1fr; border-top: 0; }
  .phase { border-right: 0; border-top: 2px solid var(--ink); padding: 26px 0 30px; }
  .phase + .phase { padding-left: 0; }
  .phase + .phase::before { left: 0; }
}
@media (max-width: 620px) {
  .info { padding-block: 42px; }
  .info-lede h2 { font-size: 1.65rem; }
  .info-lede p { margin-top: 14px; font-size: 1rem; line-height: 1.48; }
  .info-lede p + p { display: none; }
  .phases { margin-top: 28px; }
  .phase-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
  .phase {
    min-width: 0; border-top: 0; border-right: 1px solid var(--rule);
    padding: 18px 10px 0 0;
  }
  .phase:last-child { border-right: 0; }
  .phase + .phase { padding-left: 10px; }
  .phase + .phase::before { left: 10px; }
  .phase h3 { font-size: clamp(.94rem, 4vw, 1.05rem); line-height: 1.14; letter-spacing: -0.02em; }
  .phase p,
  .phase ul { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .phase-grid.is-filled::after { animation: none; transform: scaleX(1); }
}

/* Feitenrij met bron. Getallen, geen bijvoeglijke naamwoorden. */
.facts { margin-top: clamp(48px, 7vh, 84px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.fact { padding-left: 26px; border-left: 1px solid var(--rule); }
.facts > .fact:first-child { padding-left: 0; border-left: 0; }
.fact b { display: block; font-size: clamp(1.7rem, 2.6vw, 2.3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fact span { display: block; margin-top: 9px; font-size: .92rem; color: var(--ink-2); line-height: 1.45; }
.fact cite { display: block; margin-top: 9px; font-family: var(--f); font-stretch: 78%; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); font-style: normal; }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .facts { grid-template-columns: 1fr; gap: 20px; } }

/* ================= CATEGORIETEGELS ================= */

.cats { padding-block: clamp(64px, 9vh, 116px); text-align: center; }
.cats h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); }
.cats .sub { margin: 14px auto 0; max-width: 60ch; color: var(--ink-2); }
.cat-grid { margin-top: clamp(36px, 6vh, 56px); display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: left; }
.cat-card { border: 1px solid var(--rule); background: var(--white); padding: 26px 22px 22px; transition: border-color .15s, transform .15s; }
.cat-card:hover { border-color: var(--green); transform: translateY(-3px); }
.cat-card .thumb { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; background: var(--paper); margin-bottom: 20px; overflow: hidden; }
.cat-card .thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.cat-card .thumb.blueprint { background: var(--dark); padding: 18px; }
.cat-card .thumb.blueprint svg { max-width: 260px; }
.cat-card .bar { width: 32px; height: 3px; background: var(--green); margin-bottom: 14px; }
.cat-card h3 { font-size: 1.08rem; }
.cat-card p { margin-top: 8px; font-size: .92rem; color: var(--ink-2); }
.cat-all {
  position: relative; display: grid; grid-template-columns: minmax(260px, 400px) 1fr;
  align-items: stretch; gap: 0; margin-top: 20px; text-align: left;
  background: var(--white); border: 1px solid var(--rule); overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.cat-all:hover { border-color: var(--green); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(5,113,58,.1); }
.cat-all .thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--paper); }
.cat-all .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-all .copy { min-height: 0; padding: clamp(24px, 3vw, 40px) 84px clamp(24px, 3vw, 40px) clamp(26px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.cat-all .bar { width: 32px; height: 3px; background: var(--green); margin-bottom: 14px; }
.cat-all strong { display: block; font-size: clamp(1.16rem, 1.7vw, 1.38rem); line-height: 1.12; letter-spacing: -0.02em; }
.cat-all .copy > span:last-child { margin-top: 8px; color: var(--ink-2); max-width: 58ch; }
.cat-all-icon {
  position: absolute; right: 22px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; display: grid; place-items: center;
  background: var(--green); color: var(--white);
}
.cat-all-icon svg { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .cat-all { grid-template-columns: 1fr; }
  .cat-all .thumb { height: auto; aspect-ratio: 16 / 9; }
  .cat-all .copy { min-height: 0; padding: 22px 70px 22px 22px; }
  .cat-all-icon { right: 18px; bottom: 22px; top: auto; transform: none; }
}
@media (max-width: 980px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cat-grid { grid-template-columns: 1fr; } }

/* ================= ASSORTIMENT ================= */

.assort { background: var(--white); padding-block: clamp(64px, 9vh, 116px); border-top: 1px solid var(--rule); }
.assort-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vh, 52px); }
.assort-head h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); max-width: 22ch; }
.assort-head .m { color: var(--ink-3); }
.filter-head { margin-bottom: 18px; }
.filterbar {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(26px, 4vh, 40px);
}
.filterbar button {
  appearance: none; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 2px;
  background: var(--white); color: var(--ink-2);
  font-family: inherit; font-weight: 600; font-size: 14px;
  padding: 9px 14px;
  transition: background .15s, border-color .15s, color .15s;
}
.filterbar button:hover { border-color: var(--green); color: var(--green); }
.filterbar button[aria-pressed="true"] { background: var(--green); border-color: var(--green); color: #fff; }
.empty-filter { margin-top: 22px; color: var(--ink-2); }
.empty-filter[hidden] { display: none; }

/* 12 producten in 4 kolommen: drie volle rijen, nooit een halve laatste rij. */
.prod-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (max-width: 980px) { .prod-grid { grid-template-columns: repeat(2, 1fr); } }
.prod-grid + .group-kop { margin-top: clamp(38px, 5vh, 56px); }
.prod-card {
  position: relative; overflow: hidden;
  background: var(--white); padding: 22px; display: flex; flex-direction: column;
  --spot-x: 50%; --spot-y: 50%;
  transition: transform .25s ease, box-shadow .25s ease;
}
.prod-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle 220px at var(--spot-x) var(--spot-y), rgba(5,113,58,.16), transparent 75%);
  opacity: 0; transition: opacity .4s ease;
}
.prod-card:hover::before, .prod-card:focus-within::before { opacity: 1; }
.prod-card:hover, .prod-card:focus-within { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(5,113,58,.14); z-index: 2; }
.prod-card > * { position: relative; z-index: 1; }
.prod-card .thumb { aspect-ratio: 4 / 3; background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; }
.prod-card .thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.prod-card .thumb .plate { font-family: var(--f); font-stretch: 78%; font-weight: 700; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 10px; }
.prod-card .cat { color: var(--green); margin-bottom: 8px; display: block; }
.prod-card h3 { font-size: 1.04rem; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.prod-card .norms { font-family: var(--m); font-size: 10.5px; color: var(--ink-3); letter-spacing: .03em; margin-top: auto; padding-top: 12px; font-variant-numeric: tabular-nums; }
.prod-card .who { display: flex; gap: 6px; margin-top: 10px; }
.prod-card .who span {
  font-family: var(--f); font-stretch: 78%; font-weight: 700; font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  padding: 3px 7px; border: 1px solid var(--rule); color: var(--ink-3); border-radius: 2px;
}
.prod-card .who span.on { border-color: rgba(5,113,58,.35); color: var(--green); }
.prod-card .go {
  position: absolute; right: 18px; bottom: 18px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.prod-card:hover .go, .prod-card:focus-within .go { opacity: 1; transform: translateY(0); }
.prod-card .go svg { width: 15px; height: 15px; }
.prod-card.is-hidden { display: none; }
@media (prefers-reduced-motion: reduce) { .prod-card, .prod-card::before, .prod-card .go { transition: none; } }

/* Onder 520px een compacte specificatielijst in plaats van tegels, zodat het
   duidelijk anders oogt dan de categorietegels erboven. */
@media (max-width: 520px) {
  .prod-grid { grid-template-columns: 1fr; background: var(--white); border: none; gap: 0; }
  .prod-card {
    display: grid; grid-template-columns: 56px 1fr 26px; grid-template-rows: auto auto;
    column-gap: 14px; row-gap: 2px; align-items: center;
    padding: 14px 4px; border-bottom: 1px solid var(--rule);
  }
  /* Elk kind een vaste plek in het grid: in een flexrij duwde een lange titel
     of normcode de pijl buiten de overflow van de kaart. */
  .prod-card .thumb { grid-column: 1; grid-row: 1 / 3; width: 56px; height: 56px; aspect-ratio: auto; margin-bottom: 0; }
  .prod-card .cat, .prod-card .who { display: none; }
  .prod-card h3 { grid-column: 2; grid-row: 1; min-width: 0; font-size: .95rem; margin-bottom: 0; }
  .prod-card .norms { grid-column: 2; grid-row: 2; min-width: 0; padding-top: 0; }
  .prod-card .go {
    grid-column: 3; grid-row: 1 / 3;
    position: static; opacity: 1; transform: none; pointer-events: auto;
    width: 26px; height: 26px;
  }
  .prod-card .go svg { width: 12px; height: 12px; }
  .prod-card:hover, .prod-card:focus-within { transform: none; box-shadow: none; }
}

/* ================= WETGEVING ================= */

.law { background: var(--dark); color: #fff; padding-block: clamp(64px, 9vh, 116px); position: relative; overflow: hidden; }
.law .wedge { position: absolute; left: 0; top: 0; width: clamp(70px, 8vw, 130px); height: clamp(70px, 8vw, 130px); background: var(--green); clip-path: polygon(0 0, 100% 0, 0 100%); opacity: .9; }
.law-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: end; position: relative; }
.law h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); color: #fff; max-width: 25ch; letter-spacing: -0.015em; }
.law p { margin-top: 20px; color: rgba(255,255,255,.72); max-width: 68ch; line-height: 1.6; }
.law-side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.law-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.law-stats div { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.22); }
.law-stats .m { color: rgba(255,255,255,.5); margin-bottom: 8px; display: block; }
.law-stats b { font-size: 1.9rem; font-weight: 600; display: block; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.law-stats b.lit { color: var(--green-lit); }
@media (max-width: 860px) { .law-grid { grid-template-columns: 1fr; } }

/* ================= MAATWERK ================= */

.made { background: var(--paper); padding-block: clamp(64px, 9vh, 116px); }
.made-body { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.made-shot { margin: 0; border: 1px solid var(--rule); background: var(--white); position: relative; }
.blueprint { background: var(--dark); display: flex; align-items: center; justify-content: center; }
.blueprint svg { display: block; width: 100%; height: auto; }
.blueprint .bp-dot { fill: rgba(217,221,218,.16); }
.blueprint .bp-frame { fill: none; stroke: var(--green-lit); stroke-width: 2; }
.blueprint .bp-line { stroke: var(--green-lit); stroke-width: 1; opacity: .5; }
.blueprint .bp-post { stroke: var(--green-lit); stroke-width: 3; }
.blueprint .bp-detail { fill: none; stroke: var(--green-lit); stroke-width: 1.2; opacity: .75; }
.blueprint .bp-dash { fill: none; stroke: var(--green-lit); stroke-width: 2; stroke-dasharray: 6 4; opacity: .85; }
.blueprint .bp-dash-line { stroke: var(--green-lit); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: .7; }
.blueprint .bp-plus { stroke: var(--green-lit); stroke-width: 2; stroke-linecap: round; }
.blueprint .bp-dim { stroke: rgba(244,245,243,.35); stroke-width: 1; }
.blueprint .bp-label { font-family: var(--m); font-size: 10px; letter-spacing: .08em; fill: rgba(244,245,243,.55); }
.blueprint .bp-label-accent { font-family: var(--m); font-size: 10px; letter-spacing: .08em; fill: var(--green-lit); }
.made-shot.blueprint { padding: 28px 20px; min-height: 280px; }
.made-shot.blueprint svg { max-width: 400px; }
.made-note { padding-top: 22px; border-top: 2px solid var(--ink); }
.made-note h2 { font-size: clamp(1.5rem, 2.6vw, 2.2rem); margin-bottom: 20px; }
.made-note p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--ink-2); letter-spacing: -0.005em; }
.made-note p strong { font-weight: 700; color: var(--ink); }
.made-note p + p { margin-top: 16px; }
@media (max-width: 860px) { .made-body { grid-template-columns: 1fr; } }

/* ================= CONTACT / OFFERTE ================= */

.talk { position: relative; overflow: hidden; background: var(--white); border-top: 1px solid var(--rule); padding-block: clamp(64px, 9vh, 116px); }
.talk-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.talk h2 { font-size: clamp(1.9rem, 3.6vw, 3.2rem); max-width: 21ch; }
.talk .contact { text-align: right; }
.talk .contact .m { color: var(--ink-3); margin-bottom: 10px; display: block; }
.talk .contact a.tel { font-size: 1.3rem; font-weight: 600; display: block; }
.talk .contact a.mail { color: var(--ink-2); }
@media (max-width: 700px) { .talk-row { flex-direction: column; align-items: flex-start; } .talk .contact { text-align: left; } }

/* Zwevende normcodes achter de offertesectie. */
.norm-float { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.norm-float span {
  position: absolute; font-family: var(--m); font-weight: 500;
  color: var(--green); opacity: .34;
  letter-spacing: 0.1em; white-space: nowrap;
  animation: norm-drift 14s ease-in-out infinite;
}
/* Drie groentinten door elkaar, zodat het veld diepte houdt in plaats van
   een egale laag te worden. */
.norm-float span:nth-child(3n+2) { color: #2E9A63; opacity: .46; }
.norm-float span:nth-child(3n+3) { color: var(--green-lit); opacity: .60; }
@keyframes norm-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .norm-float span { animation: none; } }
@media (max-width: 700px) { .norm-float { display: none; } }

/* ================= FOOTER ================= */

footer { background: var(--dark); color: rgba(255,255,255,.7); padding: clamp(48px, 7vh, 76px) 0 30px; }
footer .cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-bottom: 44px; }
footer .brand { margin-bottom: 14px; }
footer .cols p { max-width: 42ch; color: rgba(255,255,255,.5); font-size: 14px; }
footer h4 { margin: 0 0 13px; font-family: var(--f); font-stretch: 78%; font-weight: 700; font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,.45); }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
footer li { font-size: 14.5px; color: rgba(255,255,255,.68); }
footer li a { color: inherit; transition: color .15s; }
footer li a:hover { color: #fff; }
footer .base { padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: rgba(255,255,255,.4); font-size: 13px; }
footer .social { display: flex; gap: 14px; }
footer .social a { color: rgba(255,255,255,.5); transition: color .15s; }
footer .social a:hover { color: #fff; }
footer .social svg { width: 18px; height: 18px; display: block; }
@media (max-width: 860px) { footer .cols { grid-template-columns: 1fr 1fr; } }

/* ================= SUBPAGINA HEADER ================= */

.crumbs { background: var(--white); border-bottom: 1px solid var(--rule); }
.crumbs ol { list-style: none; margin: 0; padding: 14px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.crumbs a:hover { color: var(--green); }
.crumbs li::after { content: "/"; margin-left: 8px; color: var(--rule); }
.crumbs li:last-child::after { content: none; }
.crumbs li[aria-current] { color: var(--ink); }

.page-head { background: var(--dark); color: #fff; padding-block: clamp(52px, 8vh, 96px); position: relative; overflow: hidden; }
.page-head .wedge { position: absolute; right: 0; bottom: 0; width: clamp(90px, 12vw, 190px); height: clamp(70px, 9vw, 140px); background: var(--green); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.page-head .m { color: var(--green-lit); display: block; margin-bottom: 18px; }
.page-head h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); color: #fff; max-width: 26ch; line-height: 1.05; }
.page-head p { margin-top: 20px; color: rgba(255,255,255,.78); max-width: 72ch; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; }
.page-head .cta-row { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ================= PRODUCTPAGINA ================= */

.pdp { background: var(--white); padding-block: clamp(40px, 6vh, 72px); }
.pdp-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
.pdp-shot { background: var(--paper); border: 1px solid var(--rule); aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pdp-shot img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; padding: 24px; }
.pdp-shot .plate { font-family: var(--f); font-stretch: 78%; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 0 24px; line-height: 1.7; }
.pdp-intro .m { color: var(--green); display: block; margin-bottom: 14px; }
.pdp-intro h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); line-height: 1.06; }
.pdp-intro .lede { margin-top: 20px; font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.62; color: var(--ink-2); }
.pdp-intro .cta-row { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.pdp-keys { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; gap: 10px; }
.pdp-keys span {
  font-family: var(--m); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule); color: var(--ink-2); padding: 6px 10px; border-radius: 2px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 860px) { .pdp-top { grid-template-columns: 1fr; } }

/* ================= TABBLADEN ================= */

.tabs { background: var(--paper); border-top: 1px solid var(--rule); padding-block: clamp(48px, 7vh, 88px); }
.tablist { display: flex; gap: 0; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tablist::-webkit-scrollbar { display: none; }
.tablist button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink-3); padding: 14px 22px 15px; white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.tablist button:first-child { padding-left: 0; }
.tablist button:hover { color: var(--ink); }
.tablist button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--green); }
.tabpanel { padding-top: clamp(30px, 4vh, 46px); }
.tabpanel[hidden] { display: none; }

.tab-body { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
@media (max-width: 860px) { .tab-body { grid-template-columns: 1fr; } }
.tab-copy h2 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }
.tab-copy p { margin-top: 16px; color: var(--ink-2); line-height: 1.62; font-size: 1.02rem; }
.tab-copy p + p { margin-top: 13px; }
.tab-copy strong { color: var(--ink); font-weight: 600; }
.tab-copy h3 { margin-top: 30px; font-size: 1.08rem; }

.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.ticks li { position: relative; padding-left: 26px; color: var(--ink-2); line-height: 1.55; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 9px; height: 9px; border: 1.5px solid var(--green); border-radius: 50%;
}
.ticks li strong { color: var(--ink); }

/* Specificatietabel: getallen rechts uitgelijnd en op vaste breedte, zodat
   maten onder elkaar leesbaar blijven. */
.spec { width: 100%; border-collapse: collapse; font-size: .96rem; }
.spec caption { text-align: left; font-family: var(--f); font-stretch: 78%; font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-bottom: 12px; }
.spec th, .spec td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.spec th { font-weight: 500; color: var(--ink-2); width: 46%; }
.spec td { color: var(--ink); font-variant-numeric: tabular-nums; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

.norm-list { list-style: none; margin: 0; padding: 0; }
.norm-list li { padding: 16px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: baseline; }
.norm-list li:last-child { border-bottom: 0; }
.norm-list code {
  font-family: var(--m); font-size: 12px; letter-spacing: .06em; color: var(--green);
  font-variant-numeric: tabular-nums; font-weight: 500;
}
.norm-list span { color: var(--ink-2); line-height: 1.55; font-size: .97rem; }
@media (max-width: 620px) { .norm-list li { grid-template-columns: 1fr; gap: 6px; } }

/* Zijpaneel naast de tabbladen */
.aside-card { background: var(--white); border: 1px solid var(--rule); padding: 26px; }
.aside-card .m { color: var(--ink-3); display: block; margin-bottom: 14px; }
.aside-card h3 { font-size: 1.15rem; }
.aside-card p { margin-top: 12px; color: var(--ink-2); font-size: .95rem; line-height: 1.58; }
.aside-card .btn { margin-top: 20px; }
.aside-card + .aside-card { margin-top: 20px; }

.buy-card h3 { font-size: 1.7rem; font-weight: 700; }
.buy-card .buy-note { margin-top: 6px; font-size: .85rem; color: var(--ink-3); }
.buy-card .qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.buy-card .qty-row label { font-size: .93rem; font-weight: 600; color: var(--ink); }
.qty-input {
  width: 64px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: 3px;
  font: inherit; font-size: .95rem; color: var(--ink); text-align: center;
}
.buy-card .add-to-cart { width: 100%; }
.buy-card .cart-link { display: block; margin-top: 12px; text-align: center; font-size: .88rem; color: var(--green); text-decoration: underline; text-underline-offset: 2px; }

/* ================= VERWANTE PRODUCTEN ================= */

.rel { background: var(--white); border-top: 1px solid var(--rule); padding-block: clamp(56px, 8vh, 96px); }
.rel h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); margin-bottom: clamp(28px, 4vh, 42px); }

/* ================= FAQ ================= */

.faq { background: var(--paper); padding-block: clamp(64px, 9vh, 116px); }
.faq h2 { font-size: clamp(1.7rem, 2.8vw, 2.5rem); margin-bottom: clamp(30px, 4vh, 46px); max-width: 26ch; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-of-type { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
  font-size: clamp(1.02rem, 1.3vw, 1.15rem); font-weight: 600; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 2px;
  background: var(--green); transform: translateY(-50%);
}
.faq summary::before {
  content: ""; position: absolute; right: 11px; top: 50%; width: 2px; height: 12px;
  background: var(--green); transform: translateY(-50%); transition: opacity .2s, transform .2s;
}
.faq details[open] summary::before { opacity: 0; transform: translateY(-50%) rotate(90deg); }
.faq details p { padding: 0 0 22px; color: var(--ink-2); line-height: 1.62; max-width: 88ch; }
.faq details p + p { padding-top: 0; margin-top: -8px; padding-bottom: 22px; }

/* ================= CATEGORIEPAGINA ================= */

.cat-card .count { display: block; margin-top: 16px; color: var(--ink-3); }
.cat-card:hover .count { color: var(--green); }

.group-kop { font-size: clamp(1.15rem, 1.8vw, 1.45rem); margin: clamp(30px, 4vh, 44px) 0 18px; }
.assort .group-kop:first-of-type { margin-top: 0; }

.catlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.catlinks a {
  display: inline-flex; align-items: center;
  border: 1px solid var(--rule); padding: 12px 20px; border-radius: 2px;
  font-weight: 600; font-size: .98rem;
  transition: border-color .15s, color .15s, background .15s;
}
.catlinks a:hover { border-color: var(--green); color: var(--green); background: var(--paper); }

/* ================= OFFERTEFORMULIER ================= */

.formsec { background: var(--paper); padding-block: clamp(48px, 7vh, 90px); }
.form-body { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(32px, 5vw, 68px); align-items: start; }
@media (max-width: 900px) { .form-body { grid-template-columns: 1fr; } }

.quote { background: var(--white); border: 1px solid var(--rule); padding: clamp(24px, 3.4vw, 40px); }
.quote fieldset { border: 0; margin: 0; padding: 0; }
.quote fieldset + fieldset { margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--rule-2); }
.quote legend {
  padding: 0; margin-bottom: 18px;
  font-family: var(--f); font-stretch: 78%; font-weight: 700;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}

.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
@media (max-width: 560px) { .fields { grid-template-columns: 1fr; } }
.field { margin: 0; display: flex; flex-direction: column; gap: 7px; }
.field.wide { margin-top: 18px; }
.field label { font-size: .93rem; font-weight: 600; color: var(--ink); }
.field .opt { font-weight: 400; color: var(--ink-3); }
.field abbr { color: var(--green); text-decoration: none; }

.quote input[type="text"], .quote input[type="email"], .quote input[type="tel"],
.quote select, .quote textarea {
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule); border-radius: 2px;
  padding: 11px 13px; width: 100%;
  transition: border-color .15s, background .15s;
}
.quote textarea { resize: vertical; line-height: 1.55; }
.quote input:focus, .quote select:focus, .quote textarea:focus {
  outline: none; border-color: var(--green); background: var(--white);
}
.quote input::placeholder, .quote textarea::placeholder { color: var(--ink-3); }
/* Pas foutkleuren tonen na een verzendpoging. Twee valkuilen zaten in de
   eerdere versie: ":invalid" matcht ook een fieldset die een ongeldig veld
   bevat (vandaar een rode lijn naast de legend), en ":not(:placeholder-shown)"
   is altijd waar bij een veld zonder placeholder, dus lege verplichte velden
   waren meteen rood. */
.quote.was-validated input:invalid,
.quote.was-validated select:invalid,
.quote.was-validated textarea:invalid { border-color: #B4443A; background: #FDF5F4; }

.radios { display: flex; gap: 26px; flex-wrap: wrap; }
.radios label, .consent label { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .97rem; }
.radios input, .consent input { margin: 2px 0 0; accent-color: var(--green); width: 17px; height: 17px; flex: none; }
.consent { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--rule-2); color: var(--ink-2); }

.submit { margin-top: 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.submit .note { font-size: .93rem; color: var(--ink-3); }
.submit .note a { color: var(--green); font-weight: 600; }
.formerror { margin-top: 16px; color: #B4443A; font-size: .95rem; font-weight: 600; }
.formerror[hidden] { display: none; }

.form-aside .aside-card:first-child { margin-top: 0; }
.form-aside .ticks { margin-top: 16px; }
.form-aside .ticks li { font-size: .95rem; }

/* Bevestiging na verzenden. Vervangt formulier en zijkolom in het grid. */
.form-done { grid-column: 1 / -1; background: var(--white); border: 1px solid var(--rule); padding: clamp(32px, 5vw, 64px); }
.form-done[hidden] { display: none; }
.form-done .m { color: var(--green); display: block; margin-bottom: 16px; }
.form-done h2 { font-size: clamp(1.6rem, 2.8vw, 2.3rem); }
.form-done p { margin-top: 16px; color: var(--ink-2); max-width: 60ch; line-height: 1.6; }
.form-done p a { color: var(--green); font-weight: 600; }
.form-done .btn { margin-top: 28px; }

/* ---------- winkelwagen ---------- */
.cart-list { background: var(--white); border: 1px solid var(--rule); }
.cart-row {
  display: grid; grid-template-columns: 64px 1fr auto auto auto; align-items: center; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--rule);
}
.cart-row:last-child { border-bottom: 0; }
.cart-thumb { width: 64px; height: 64px; border: 1px solid var(--rule); background: var(--paper); display: block; }
.cart-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cart-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cart-info a { font-weight: 600; color: var(--ink); }
.cart-info a:hover { color: var(--green); }
.cart-unit { font-size: .85rem; color: var(--ink-3); }
.cart-qty { width: 56px; }
.cart-line-total { font-weight: 700; white-space: nowrap; }
.cart-remove {
  width: 30px; height: 30px; display: grid; place-items: center; border-radius: 3px;
  background: transparent; color: var(--ink-3); font-size: 1.2rem; line-height: 1;
}
.cart-remove:hover { color: #B4443A; background: rgba(180,68,58,.08); }
@media (max-width: 620px) {
  .cart-row { grid-template-columns: 52px 1fr; grid-template-areas: "thumb info" "thumb qty" "thumb total"; row-gap: 8px; }
  .cart-thumb { grid-area: thumb; width: 52px; height: 52px; }
  .cart-info { grid-area: info; }
  .cart-qty { grid-area: qty; }
  .cart-line-total { grid-area: total; }
  .cart-remove { position: absolute; margin-left: auto; }
}

.cart-empty { padding: 48px 22px; text-align: center; color: var(--ink-2); }
.cart-empty[hidden] { display: none; }

.cart-totals { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-top: 2px solid var(--ink); }
.cart-totals[hidden] { display: none; }
.cart-totals span:first-child { font-weight: 600; }
.cart-totals .cart-total-amount { font-size: 1.3rem; font-weight: 700; }

.checkout-email { margin-top: 22px; }
.checkout-submit { margin-top: 18px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.checkout-submit .btn[disabled] { opacity: .5; cursor: not-allowed; }
.checkout-note { font-size: .85rem; color: var(--ink-3); }

/* ---------- cookiebanner ---------- */
.cookie-banner {
  position: fixed; inset: auto 0 0 0; z-index: 200;
  background: var(--dark); border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 -8px 24px rgba(0,0,0,.25);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: 1400px; margin-inline: auto; padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.cookie-banner-inner p { margin: 0; color: rgba(255,255,255,.82); font-size: .92rem; max-width: 60ch; }
.cookie-banner-actions { display: flex; gap: 12px; flex: none; }
.cookie-banner-actions .btn.line { color: #fff; border-color: rgba(255,255,255,.3); }
.cookie-banner-actions .btn.line:hover { background: rgba(255,255,255,.1); border-color: #fff; }
@media (max-width: 560px) {
  .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
  .cookie-banner-actions { justify-content: center; }
}

/* ---------- juridische pagina's (voorwaarden, privacy) ---------- */
.legal-body { padding-block: clamp(40px, 6vh, 72px); }
.legal { max-width: 72ch; }
.legal > * + * { margin-top: 15px; }
.legal h2 { margin-top: 38px; font-size: clamp(1.2rem, 1.9vw, 1.45rem); }
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-2); line-height: 1.65; font-size: 1rem; }
.legal ul { padding-left: 22px; color: var(--ink-2); line-height: 1.6; }
.legal ul li + li { margin-top: 6px; }
.legal strong { color: var(--ink); font-weight: 600; }
.legal address { font-style: normal; color: var(--ink-2); line-height: 1.6; }
.legal-updated { color: var(--ink-3); font-size: .88rem; }

/* Links in lopende tekst. Zonder dit erven ze de globale a-regel (kleur van de
   ouder, geen onderstreping) en zijn ze niet als link te herkennen. */
.tab-copy p a, .info-lede p a, .faq details p a, .made-note p a,
.aside-card p a, .form-done p a, .phase p a, .legal p a {
  color: var(--green);
  border-bottom: 1px solid rgba(5,113,58,.32);
  padding-bottom: 1px;
}
.tab-copy p a:hover, .info-lede p a:hover, .faq details p a:hover,
.made-note p a:hover, .aside-card p a:hover, .form-done p a:hover, .phase p a:hover,
.legal p a:hover {
  border-bottom-color: var(--green);
}