/* ==========================================================================
   componenten.css  -  knoppen, chips, kruimelpad, kaarten, let-op-blok
   Volgt de fakro.pl-taal: pill-knoppen, 10px kaarten, 1px randen, geen schaduw.
   ========================================================================== */

/* --- knop: pill, groen, licht indrukken bij klik ------------------- */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ruimte-1);
  padding: 0.75rem 2rem;                 /* 12 / 32 */
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: inherit;
  font-weight: var(--gew-medium);
  font-size: var(--tekst-sm);
  line-height: 1.5;
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--overgang), border-color var(--overgang),
              color var(--overgang), transform var(--overgang);
}
@media (min-width: 1024px) { .knop { font-size: var(--tekst-basis); } }
.knop:hover { text-decoration: none; }
.knop:active { transform: scale(.95); }
.knop:disabled { opacity: .5; cursor: not-allowed; }

.knop--primair { background: var(--groen); color: var(--accent-contrast); }
.knop--primair:hover { background: var(--groen-hover); }

.knop--secundair {
  background: transparent;
  color: var(--inkt);
  border-color: var(--grijs-lijn-sterk);
}
.knop--secundair:hover { background: var(--inkt); color: #fff; border-color: transparent; }

.knop--wit { background: #fff; color: var(--inkt); }
.knop--wit:hover { background: #E8E8E8; }

.knop--breed { width: 100%; }
@media (min-width: 640px) { .knop--breed { width: auto; } }

/* --- chip / filterknop -------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--ruimte-1);
  padding: 0.375rem 1.5rem;              /* 6 / 24 */
  border: 1px solid var(--grijs-lijn-sterk);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--inkt);
  font: inherit;
  font-size: var(--tekst-sm);
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang), border-color var(--overgang);
}
.chip:hover { background: var(--inkt); color: #fff; }
.chip[aria-pressed="true"] { background: var(--inkt); color: #fff; border-color: transparent; }

/* --- kruimelpad: kleine pill-links, chevron, hover-onderstreping -- */
.kruimelpad {
  font-size: var(--tekst-xs);
  font-weight: var(--gew-medium);
  padding-block: var(--ruimte-1);
}
.kruimelpad ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
  margin: 0;
  padding: 0;
}
.kruimelpad a { color: var(--inkt); }
.kruimelpad a:hover { text-decoration: underline; }
.kruimelpad li { display: inline-flex; align-items: center; gap: 0.375rem; }
.kruimelpad li::after { content: "›"; color: var(--grijs-gedempt); }
.kruimelpad li:last-child::after { content: none; }
.kruimelpad [aria-current="page"] { color: var(--grijs-gedempt); }

/* --- kaart: 10px, 1px rand, geen schaduw, beeldzoom bij hover ---- */
.kaart {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak-2);
  overflow: hidden;
}
.kaart__beeld {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vlak);
}
/* de productfoto's uit het artikelbestand zijn vrijstaand op wit. Met cover
   sneed een vierkante foto boven en onder af, precies waar het raam zit.
   Daarom contain op een witte achtergrond: het hele product blijft zichtbaar.
   De padding houdt het product van de tegelrand af. */
.kaart__beeld:has(img) { background: #fff; }
/* de <picture> om de <img> is standaard inline. Zonder deze regel meet de
   img zijn 100% aan de picture af in plaats van aan het beeldvak. */
.kaart__beeld picture,
.product-kop__beeld picture { display: block; width: 100%; height: 100%; }
.kaart__beeld img {
  width: 100%; height: 100%;
  object-fit: contain;
  padding: var(--ruimte-1);
  transition: transform var(--overgang-lang);
}
.kaart:hover .kaart__beeld img { transform: scale(1.05); }
.kaart__body { padding: var(--ruimte-3); display: flex; flex-direction: column; gap: var(--ruimte-1); }
.kaart__body h3 { margin: 0; font-size: var(--tekst-md); }
.kaart__body p { margin: 0; font-size: var(--tekst-sm); color: var(--grijs-gedempt); }
.kaart__body .knop { margin-top: var(--ruimte-1); align-self: flex-start; }

.kaart-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ruimte-2);
}

/* categoriekaart met volledige brochure-cover: kaart volgt de hoogte van
   het beeld, geen 4:3-uitsnede. Tijdelijk beeld, "voor het idee". */
.kaart--cover .kaart__beeld { aspect-ratio: auto; }
.kaart--cover .kaart__beeld img { height: auto; object-fit: contain; display: block; }
.kaart--cover[aria-disabled="true"] { opacity: 0.85; }

/* --- vaste vier kolommen op de categoriepagina ------------------
   Finn 2026-09-30: elke productgroep houdt de breedte van vier kaarten aan,
   ook als er maar een product in zit. auto-fit rekte een losse kaart op
   tot de volle breedte. Op smallere schermen twee, op de telefoon een. */
.kaart-rij--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .kaart-rij--vier { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .kaart-rij--vier { grid-template-columns: 1fr; } }

/* --- let-op-blok (disclaimer): rustig, amber-accent ------------- */
.let-op {
  border-left: 3px solid var(--let-op);
  background: var(--let-op-vlak);
  padding: var(--ruimte-2) var(--ruimte-3);
  border-radius: var(--radius);
  font-size: var(--tekst-sm);
  color: var(--inkt-zacht);
}
.let-op strong { color: var(--let-op); font-weight: var(--gew-semibold); }

/* --- productpagina-kop: intro plus beeld ----------------------- */
/* minmax(0, 1fr) en hyphens: lange titels als "Renovatieplatdakramen" en
   "Elektrische bedieningssystemen" pasten op een telefoon niet in de
   kopletter. De kolom rekte dan op tot de breedte van dat ene woord, de foto
   (100% breed) rekte mee en de hele pagina schoof opzij (2026-10-20). */
.product-kop h1 { hyphens: auto; overflow-wrap: break-word; }
.product-kop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ruimte-3);
  align-items: start;
  margin-block: var(--ruimte-3) var(--ruimte-4);
}
@media (min-width: 768px) {
  .product-kop { grid-template-columns: 1fr minmax(220px, 300px); gap: var(--ruimte-4); }
}
.product-kop__meta { display: flex; flex-wrap: wrap; gap: var(--ruimte-1); margin-top: var(--ruimte-2); }
.product-kop__beeld {
  display: block;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
.product-kop__beeld img { width: 100%; height: 100%; object-fit: cover; }
/* Zonder foto is 4:3 op een telefoon een grijs vlak van bijna 270px, pal
   boven de prijzen. Met een echte foto is die ruimte het waard, zonder foto
   niet. Negen producten wachten nog op beeld, zie het archief. */
@media (max-width: 760px) {
  .product-kop__beeld.beeld-plaatshouder { aspect-ratio: 16 / 5; }
}

/* grijze plaatshouder in WordPress-stijl zolang er geen foto gekoppeld is */
.beeld-plaatshouder {
  background:
    #e9eaeb
    center / 44px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.6'/%3E%3Cpath d='M21 15l-5-5L5 21'/%3E%3C/svg%3E");
}
.badge {
  display: inline-flex; align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--groen-tint);
  color: var(--groen-hover);
  font-size: var(--tekst-xs);
  font-weight: var(--gew-semibold);
}
/* klikbare badge: springt naar de rij van dat producttype in de prijstabel
   verderop. hover/focus donkerder groen, active een lichte scale-tik, zodat
   meteen voelbaar is dat dit een link is en geen etiket. */
a.badge--klikbaar {
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--overgang), color var(--overgang), transform var(--overgang);
}
a.badge--klikbaar:hover,
a.badge--klikbaar:focus-visible {
  background: var(--groen-hover);
  color: #fff;
  text-decoration: none;
}
a.badge--klikbaar:active { transform: scale(0.94); }

/* --- prijs-sectie (een per sub-tabel) ------------------------- */
.prijs-blok { margin-block: var(--ruimte-5); }
.prijs-blok:first-of-type { margin-top: var(--ruimte-4); }
.prijs-blok__kop {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-3);
}
.prijs-blok__kop h2, .prijs-blok__kop h3 { margin: 0; }

/* maatkiezer boven de tabel, links uitgelijnd, geen kader of grijs vlak
   (Finns verzoek 2026-09-08: uit de grijze balk halen en links neerzetten). */
.prijs-kiezer {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--ruimte-3);
}
.prijs-kiezer label { font-size: var(--tekst-xs); font-weight: var(--gew-semibold); white-space: nowrap; }

.prijs-kiezer select {
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak-2);
  font: inherit; font-size: var(--tekst-sm);
  color: var(--inkt);
}

/* --- bedieningsbalk boven de prijstabel ------------------------------
   Finns keuze 2026-09-09: "net zoals bij andere webshops een filter
   systeem", met twee weergaven van dezelfde data. Tabel om maten naast
   elkaar te vergelijken, lijst om één artikelnummer terug te vinden. */
.prijs-bediening { margin-bottom: var(--ruimte-3); }
.prijs-bediening__boven {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-2);
}
.prijs-bediening__boven .prijs-kiezer { margin-bottom: 0; margin-left: auto; }

.weergave-schakelaar {
  display: inline-flex;
  border: 1px solid var(--grijs-lijn);
  border-radius: 999px;
  background: var(--vlak-2);
  padding: 2px;
}
.weergave-knop {
  border: 0; background: transparent; cursor: pointer;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font: inherit; font-size: var(--tekst-xs); font-weight: var(--gew-medium);
  color: var(--grijs-gedempt);
}
.weergave-knop[aria-pressed="true"] { background: var(--groen); color: #fff; }
.weergave-knop:active { transform: scale(0.96); }

.prijs-zoek { flex: 1 1 16rem; min-width: 0; }
.prijs-zoek__veld {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak-2);
  font: inherit; font-size: var(--tekst-sm);
  color: var(--inkt);
}

.filterrij {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.filterrij__label {
  font-size: var(--tekst-xs); font-weight: var(--gew-medium);
  color: var(--grijs-gedempt);
  width: 5.5rem; flex: none;
}
.filterrij__chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.filterrij .chip { padding: 0.25rem 0.7rem; font-size: var(--tekst-xs); }

.filter-telling {
  margin: 0.2rem 0 0;
  font-size: var(--tekst-xs);
  color: var(--grijs-gedempt);
}

/* --- lijstweergave ---------------------------------------------------
   Een regel per artikelnummer, sorteerbaar. JS bouwt hem uit de tabel op,
   dus de prijzen staan maar één keer in de HTML. */
.lijst-omhulsel { display: none; }
.prijs-blok[data-modus="lijst"] .lijst-omhulsel { display: block; }
/* de hele productgroep weg, niet alleen de tabel: sinds de groepen 1 lijst
   delen (2026-09-22) zouden hun koppen anders leeg boven die ene lijst blijven
   staan, en staan de losse artikelen er dubbel (ook in de lijst). */
.prijs-blok[data-modus="lijst"] .prijs-groep { display: none; }
.prijs-blok[data-modus="lijst"] .prijs-kiezer { display: none; }

table.lijst-tabel {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  overflow: hidden;
}
.lijst-tabel th, .lijst-tabel td {
  padding: 0.45rem 0.6rem;
  text-align: left;
  font-size: var(--tekst-xs);
  border-bottom: 1px solid var(--grijs-kop-lijn);
}
.lijst-tabel thead th {
  background: var(--vlak);
  font-size: var(--tekst-2xs);
  font-weight: var(--gew-semibold);
  position: sticky; top: 0; z-index: 2;
}
.lijst-tabel th.is-sorteerbaar { cursor: pointer; user-select: none; }
.lijst-tabel th.is-sorteerbaar:hover { color: var(--groen-link); }
.lijst-tabel th.is-sorteerbaar::after { content: ""; }
.lijst-tabel th[data-richting="op"]::after { content: " \2191"; }
.lijst-tabel th[data-richting="neer"]::after { content: " \2193"; }
.lijst-tabel td.cel-artnr { font-weight: var(--gew-medium); color: var(--inkt); }
.lijst-tabel td.cel-excl { color: var(--grijs-gedempt); }
.lijst-tabel td.cel-incl { font-weight: var(--gew-semibold); }
.lijst-tabel tbody tr:hover td { background: var(--groen-tint); }
/* kopieerknop rechts in elke lijstregel */
.lijst-tabel .cel-kopieer { width: 2.5rem; text-align: right; padding-right: 0.4rem; }
.kopieer-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  padding: 0; border: 0; border-radius: var(--radius);
  background: transparent; color: var(--grijs-gedempt);
  cursor: pointer;
}
.kopieer-knop:hover { color: var(--groen-link); background: var(--vlak); }
.kopieer-knop:focus-visible { outline: 2px solid var(--groen-link); outline-offset: 1px; }
.kopieer-knop.is-gekopieerd { color: var(--groen); }
/* op een telefoon was de lijst al net breder dan het scherm; met de
   kopieerkolom erbij schoof de hele pagina opzij. Krappere cellen, en wat
   dan nog niet past scrollt binnen de lijst, niet de pagina. */
@media (max-width: 640px) {
  .prijs-blok[data-modus="lijst"] .lijst-omhulsel { overflow-x: auto; }
  .lijst-tabel th, .lijst-tabel td { padding: 0.45rem 0.25rem; }
  .lijst-tabel td.cel-product { hyphens: auto; overflow-wrap: anywhere; }
  .lijst-tabel .cel-kopieer { width: 2rem; padding: 0; }
}
.lijst-leeg { padding: var(--ruimte-3); color: var(--grijs-gedempt); font-size: var(--tekst-sm); }

/* een rij die door een filter of de zoekterm afvalt */
.prijs-tabel tbody tr.is-verborgen, .artikel-tabel tbody tr.is-verborgen { display: none; }

/* de matrix. -webkit-overflow-scrolling: touch geeft op oudere iOS-Safari
   het inerte "vinger erop, vlot vegen"-gevoel; moderne browsers scrollen
   een overflow-container sowieso al soepel. */
.prijs-tabel-omhulsel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
}
table.prijs-tabel {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
/* zo compact als het oude fakroprijzen.nl (Finns verzoek 2026-09-08, met
   die site als expliciete referentie, tot en met de exacte maten): een
   koprij op 10px, prijzen op 12px, minimale padding. white-space: nowrap
   hieronder houdt elke prijscel op zijn eigen inhoudsbreedte; past een
   tabel met heel veel kolommen (zoldertrappen, tot een kleine 20) alsnog
   niet op één schermbreedte, dan scrollt .prijs-tabel-omhulsel vanzelf
   horizontaal, dat is de bedoeling en geen fout. */
.prijs-tabel th, .prijs-tabel td {
  padding: 0.2rem 0.35rem;
  text-align: right;
  white-space: nowrap;
  line-height: 1.3;
  border-bottom: 1px solid var(--grijs-kop-lijn);
}
/* twee koppen boven elkaar (code/art.nr, dan afmeting), allebei sticky.
   de tweede rij moet onder de eerste blijven "hangen" i.p.v. eroverheen: de
   top-waarde is de gerenderde hoogte van rij 1 (padding + regelhoogte bij
   tekst-2xs). bij een andere padding of tekstgrootte hier opnieuw
   uitrekenen (gemeten met een headless render, niet uit het hoofd geschat). */
.prijs-tabel thead tr:first-child th {
  position: sticky; top: 0; z-index: 2;
  background: var(--vlak);
  font-size: var(--tekst-2xs);
  font-weight: var(--gew-semibold);
  border-bottom: 1px solid var(--grijs-kop-lijn);
}
/* de tweede koprij, alleen als hij er is. Sommige zonwering-tabellen hebben
   geen maatcodes en dan bouwt de generator maar een koprij; met tr:last-child
   pakte die lone rij deze regel en plakte hij op 1.25rem in plaats van boven. */
.prijs-tabel thead tr:first-child + tr th {
  position: sticky; top: 1.25rem; z-index: 2;
  background: var(--vlak);
  font-size: var(--tekst-2xs);
  font-weight: var(--gew-normaal);
  color: var(--grijs-gedempt);
  border-bottom: 1px solid var(--grijs-lijn);
}
/* prijsrijen: excl. gedempt, incl. donker en halfvet (net als voorheen in
   de gestapelde cel, nu als twee losse rijen). de naamcel (rowspan="2",
   alleen in de excl-rij aanwezig) staat verticaal gecentreerd over beide. */
.prijs-tabel .prijs-rij-excl td { font-size: 0.75rem; color: var(--grijs-gedempt); }
.prijs-tabel .prijs-rij-incl td { font-size: 0.75rem; font-weight: var(--gew-semibold); color: var(--inkt); }
/* binnen een productblok geen streep: artikelnummer, excl. en incl. horen
   bij elkaar en moeten als een blok lezen */
.prijs-tabel .prijs-rij-artnr td, .prijs-tabel .prijs-rij-artnr th,
.prijs-tabel .prijs-rij-excl td, .prijs-tabel .prijs-rij-excl th { border-bottom: none; }
/* Tussen twee producten een dunne lijn, geen witregel meer (Finns melding
   2026-09-09: "je gebruikt heel veel witregels in de horizontale lijnen").
   De grijze artikelnummer-band markeert nu het begin van elk blok, dus de
   5px witregel was dubbelop en kostte alleen hoogte. De standaardrand van
   de cel (1px) doet het werk, hier alleen expliciet gezet voor de
   rowspan-naamcel, die de rand van de laatste rij anders niet meekrijgt. */
.prijs-tabel tbody tr:not(.prijs-rij-incl) th.rijkop { border-bottom: 1px solid var(--grijs-kop-lijn); }
/* de typenaam (bijv. "FTU-V U30 AUMX") mag over twee regels lopen, dat
   houdt die kolom smal, net als "AMZ Komfort I" / "7016" in de referentie.
   de kolommen ernaast blijven wel op één regel (nowrap hierboven), dat
   zijn alleen getallen. vertical-align: middle centreert de naam tussen
   de excl- en incl-regel die hij samen overspant (rowspan="2").
   z-index 1: zonder dit schuiven de kolommen ernaast (die alleen top-sticky
   zijn, geen left) er bij horizontaal scrollen overheen i.p.v. eronder, ook
   al staat position:sticky er al op, browsers stapelen sticky-elementen
   anders standaard gewoon op DOM-volgorde. */
/* De naamkolom is standaard smal (6rem) en wordt alleen breder gezet waar
   dat gratis is, dus waar de tabel daarna nog steeds zonder horizontaal
   scrollen past. prijstabel.js meet dat bij het laden, bij een
   venstermaat-wijziging en na het filteren. Zonder JS blijft hij smal, dat is
   nooit slechter dan de situatie hiervoor. */
.prijs-tabel-omhulsel.is-brede-naamkolom { --rijkop-b: var(--rijkop-breed); }

.prijs-tabel th.rijkop, .prijs-tabel td.rijkop {
  position: sticky; left: 0; z-index: 1;
  text-align: left;
  vertical-align: middle;
  white-space: normal;
  /* vast, niet alleen een maximum: de labelkolom ernaast plakt op
     left: var(--rijkop-b) en moet precies aansluiten */
  width: var(--rijkop-b);
  min-width: var(--rijkop-b);
  max-width: var(--rijkop-b);
  font-size: var(--tekst-xs);
  background: var(--vlak-2);
  font-weight: var(--gew-medium);
  border-right: 1px solid var(--grijs-lijn);
}
/* kleurgroep onder de typecode. Zonwering staat per kleur in de prijslijst;
   kleuren met dezelfde prijs zijn samengevoegd tot een prijsgroep en de
   codes staan als fijndruk onder het type (Finns keuze: type groot,
   kleurcodes klein eronder). */
.rijkop__sub {
  display: block;
  margin-top: 0.1rem;
  font-size: var(--tekst-2xs);
  font-weight: var(--gew-normaal);
  line-height: 1.2;
  color: var(--grijs-gedempt);
}
/* FAKRO's eigen kleurgroep ("Kleurgroep I") boven de codes, sinds
   2026-09-23: een maat groter en donkerder dan de codes, zodat je eerst de
   groep ziet en dan pas de fijndruk. */
.rijkop__sub--groep {
  font-size: var(--tekst-xs);
  color: inherit;
}

/* de linkerbovenhoek is zowel top- als left-sticky (twee keer, twee rijen):
   moet boven zowel de andere kopcellen (z-index 2) als de gewone linker
   kolom (z-index 1) uit blijven steken. */
/* tweede vaste kolom: per rij het woord dat erbij hoort (Art.nr, Excl.,
   Incl.). Finns keuze 2026-09-09: links moet net zo duidelijk staan wat je
   ziet als bovenaan "Afmeting" staat. Plakt links naast de naamkolom, dus
   ook bij horizontaal scrollen blijft het label bij zijn eigen bedrag. */
.prijs-tabel th.rijlabel {
  position: sticky; left: var(--rijkop-b); z-index: 1;
  width: var(--rijlabel-b);
  min-width: var(--rijlabel-b);
  max-width: var(--rijlabel-b);
  text-align: left;
  white-space: nowrap;
  font-size: var(--tekst-2xs);
  font-weight: var(--gew-normaal);
  color: var(--grijs-gedempt);
  background: var(--vlak-2);
  border-right: 1px solid var(--grijs-lijn);
}
.prijs-tabel .prijs-rij-incl th.rijlabel { color: var(--inkt); font-weight: var(--gew-medium); }
.prijs-tabel tbody tr.tr-even th.rijlabel { background: var(--vlak); }
.prijs-tabel thead th.rijlabel { z-index: 3; background: var(--vlak); }
/* de labelkolom sluit het blok af met dezelfde dunne lijn als de rest */
.prijs-tabel .prijs-rij-incl th.rijlabel { border-bottom: 1px solid var(--grijs-kop-lijn); }

.prijs-tabel thead th.rijkop { white-space: nowrap; max-width: none; z-index: 3; font-size: var(--tekst-2xs); }
.prijs-tabel tbody tr.tr-even td { background: var(--vlak); }
.prijs-tabel tbody tr.tr-even td.rijkop { background: var(--vlak); }
.prijs-tabel col.is-gekozen,
.prijs-tabel th.is-gekozen,
.prijs-tabel td.is-gekozen { background: var(--groen-tint) !important; }
.prijs-tabel th.is-gekozen { box-shadow: inset 0 -2px 0 var(--groen); }

/* horizontale keuzebalk: klik op de productnaam links (rijkop--kiesbaar) en
   de hele productregel (excl- plus incl-rij) kleurt groen, tegenhanger van
   de verticale maatkiezer. één tegelijk, nog eens klikken zet 'm uit
   (prijstabel.js). box-shadow markeert de linkerkant zoals de kolomkop
   onderaan gemarkeerd wordt. */
.rijkop--kiesbaar { cursor: pointer; }
.prijs-tabel th.rijkop--kiesbaar:hover { background: var(--groen-tint); }
.prijs-tabel tr.is-productgekozen td,
.prijs-tabel tr.is-productgekozen th.rijkop { background: var(--groen-tint) !important; }
.prijs-tabel tr.is-productgekozen th.rijkop { box-shadow: inset 2px 0 0 var(--groen); }
/* kruispunt van gekozen rij en gekozen kolom: één tint donkerder, zodat in
   één oogopslag te zien is welk product bij welke prijs hoort. */
.prijs-tabel tr.is-productgekozen td.is-gekozen { background: var(--groen-tint-2) !important; }

/* losse artikelen kennen geen kolommen, dus daar is de regel zelf het product.
   Zelfde groene aanlijning als in de kruistabel, zodat kiezen en doorspringen
   vanuit de zoek er op elke productpagina hetzelfde uitziet. */
.artikel-tabel th.rijkop--kiesbaar:hover { background: var(--groen-tint); }
.artikel-tabel tbody tr.is-productgekozen th,
.artikel-tabel tbody tr.is-productgekozen td { background: var(--groen-tint) !important; }
.artikel-tabel tbody tr.is-productgekozen th[scope="row"] { box-shadow: inset 2px 0 0 var(--groen); }

/* aankomst na een klik op een producttype-badge: dezelfde groene tint als
   is-gekozen, zodat de gesprongen rij meteen opvalt. scroll-margin-top houdt
   de sticky header uit de weg van de rij waar naartoe gesprongen wordt. het
   anker-id staat alleen op de excl-rij; "+ tr" pakt de incl-rij mee, die
   volgt in de HTML altijd direct erna. */
.prijs-tabel tbody tr[id] { scroll-margin-top: calc(var(--kop-hoogte) + var(--ruimte-2)); }
/* het anker-id staat op de eerste rij van het productblok, en dat is de
   artikelnummer-rij als die er is. De volgende een of twee rijen horen bij
   hetzelfde product en kleuren mee. */
.prijs-tabel tbody tr:target th.rijkop,
.prijs-tabel tbody tr:target td,
.prijs-tabel tbody tr:target + tr td,
.prijs-tabel tbody tr:target.prijs-rij-artnr + tr + tr td { background: var(--groen-tint) !important; }

/* eerste regel per product: het artikelnummer van die maat, als fijndruk
   boven de twee bedragen (Finns keuze 2026-09-09: eerst zien welk artikel
   het is, dan de prijs). Het artikelnummer hoort bij een vakje en niet bij
   een rij: een rij LWK heeft veertien maten en dus veertien nummers, dus in
   de koprij kan het niet staan, daar zou een nummer boven alle producten in
   die kolom hangen. De naamcel overspant daarom drie rijen in plaats van
   twee. padding-bottom 0 plakt het nummer aan de prijs eronder. */
.prijs-tabel .prijs-rij-artnr td {
  font-size: 0.6875rem;
  font-weight: var(--gew-medium);
  color: var(--inkt-zacht);
  letter-spacing: .03em;
  padding-bottom: 0.1rem;
  line-height: 1.15;
}
/* Finns melding 2026-09-09: het nummer "valt een beetje weg in de prijs".
   Het staat nu op een eigen lichte band over de volle regel, met donkerder
   en halfvette cijfers. Zo leest de artikelnummer-regel als de kopregel van
   zijn productblok in plaats van als een derde bedrag. De band overschrijft
   bewust ook de zebra-kleur (tr-even), anders verdwijnt hij op de even
   blokken. */
.prijs-tabel .prijs-rij-artnr td,
.prijs-tabel .prijs-rij-artnr th.rijlabel,
.prijs-tabel tbody tr.tr-even.prijs-rij-artnr td {
  background: var(--grijs-kop-lijn);
}
.prijs-tabel .prijs-rij-artnr th.rijlabel {
  color: var(--inkt-zacht);
  font-weight: var(--gew-medium);
}

/* Staat er precies een product in de tabel, dan hoort het artikelnummer bij
   de kolom en niet bij een vakje: dan gaat het als derde koprij onder
   Afmeting staan, net zoals de maatcode bij dakramen (Finns verzoek
   2026-09-09: "doe het alleen daar waar het klopt"). Deze regel komt na de
   koprij-regels hierboven en wint dus bij gelijke specificiteit. */
.prijs-tabel thead tr.koprij-artnr th {
  position: sticky; top: 1.25rem; z-index: 2;
  background: var(--vlak);
  font-size: 0.6875rem;
  font-weight: var(--gew-medium);
  color: var(--inkt-zacht);
  letter-spacing: .03em;
  border-bottom: 1px solid var(--grijs-lijn);
}
/* is er ook een maatcode-rij, dan is dit de derde rij en zakt de sticky-top
   een regelhoogte verder. Komt vandaag nergens voor (alleen zoldertrappen
   heeft artikelnummers en die heeft geen maatcode-rij), staat er zodat een
   nieuwe categorie niet stilletjes scheef gaat plakken. */
.prijs-tabel thead tr:first-child + tr + tr.koprij-artnr th { top: 2.5rem; }

/* deeltabellen per typeserie. Zoldertrappen delen lang niet allemaal
   dezelfde maten: in een enkele brede tabel stond houten ladder op 23 rijen
   x 81 kolommen met 81 prijzen. Per serie (LWK, LWL, LMF) een eigen smalle
   tabel met een kopje erboven, dan is elke tabel bijna vol en past hij
   zonder horizontaal scrollen. */
.prijs-sectie + .prijs-sectie { margin-top: var(--ruimte-4); }

/* productgroepen (bijv. Daktoetredingsluik, Dakluik met trap, Toebehoren)
   delen sinds 2026-09-22 1 zoekbalk en maatkiezer in hetzelfde prijs-blok, in
   plaats van elk hun eigen exemplaar. Dezelfde afstand ertussen als toen ze
   nog losse prijs-blokken waren. */
.prijs-groep + .prijs-groep { margin-top: var(--ruimte-5); }
.prijs-sectie__kop {
  margin: 0 0 var(--ruimte-2);
  font-size: var(--tekst-sm);
  font-weight: var(--gew-semibold);
  letter-spacing: .01em;
}

/* losse artikelen: een serie met maar een afmeting is geen kruistabel maar
   een los product. Die komen in een platte lijst met het artikelnummer
   erbij, een regel per artikel. Bij toebehoren en molenaarstrap is dat
   vrijwel de hele pagina. */
.artikel-blok { margin-block: var(--ruimte-5); }
.artikel-blok > h2, .artikel-blok > h3 { margin: 0 0 var(--ruimte-2); }
table.artikel-tabel {
  border-collapse: collapse;
  width: 100%;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
}
.artikel-tabel th, .artikel-tabel td {
  padding: 0.35rem 0.5rem;
  text-align: right;
  border-bottom: 1px solid var(--grijs-kop-lijn);
  white-space: nowrap;
}
.artikel-tabel thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--vlak);
  font-size: var(--tekst-2xs);
  font-weight: var(--gew-semibold);
}
.artikel-tabel tbody th[scope="row"] {
  text-align: left;
  font-weight: var(--gew-medium);
  white-space: normal;
  min-width: 10rem;
}
.artikel-tabel thead th:first-child { text-align: left; }
.artikel-tabel .cel-maat, .artikel-tabel .cel-artnr { color: var(--grijs-gedempt); }
.artikel-tabel .cel-excl { color: var(--grijs-gedempt); }
.artikel-tabel .cel-incl { font-weight: var(--gew-semibold); color: var(--inkt); }
/* excl. en incl. onder elkaar in een cel, net als in de grote tabellen */
.artikel-tabel .cel-prijs .cel-excl, .artikel-tabel .cel-prijs .cel-incl { display: block; }
.artikel-tabel tbody tr:nth-child(even) th,
.artikel-tabel tbody tr:nth-child(even) td { background: var(--vlak); }
/* de markering van een gekozen los artikel staat bij de keuzebalk hierboven
   (.artikel-tabel tr.is-productgekozen), zodat kiezen met de muis en
   doorspringen vanuit de zoek dezelfde opmaak delen */


/* mobiel: nog compacter, minder verticaal scrollen. min-width houdt elke
   kolom op een leesbare breedte (voorkomt dat cellen tegen elkaar
   dichtgeknepen worden), .prijs-tabel-omhulsel vangt het verschil op met
   overflow-x: auto, dus vegen naar rechts voor de rest van de kolommen. */
@media (max-width: 768px) {
  table.prijs-tabel { min-width: max-content; }
  .prijs-tabel th, .prijs-tabel td {
    padding: 0.2rem 0.3rem;
    line-height: 1.25;
  }
  /* op een telefoon scrollt vrijwel elke prijstabel toch horizontaal, dus
     hier nooit verbreden: vaste smalle waarden, los van --rijkop-breed */
  .prijs-tabel th.rijkop, .prijs-tabel td.rijkop {
    width: 5rem; min-width: 5rem; max-width: 5rem;
  }
  .prijs-tabel th.rijlabel {
    left: 5rem; width: 2.3rem; min-width: 2.3rem; max-width: 2.3rem;
  }
}

/* mobiele "kies je maat"-lijst, alleen zichtbaar na keuze op smal scherm */

@media (max-width: 640px) {
  .prijs-blok { margin-block: var(--ruimte-4); }
  .prijs-kiezer { align-items: stretch; }
  /* een lange optie ("front 118, dak 118 (78-134-78 cm) ...", dakramen/lux)
     maakte de kiezer anders breder dan het scherm */
  .prijs-bediening__boven .prijs-kiezer { flex: 1 1 100%; min-width: 0; }
  .prijs-kiezer select { flex: 1 1 auto; min-width: 0; max-width: 100%; }
}

/* --- uitleg-blokjes -------------------------------------------- */
.uitleg { border: 1px solid var(--grijs-lijn); border-radius: var(--radius); margin-block: var(--ruimte-2); }
.uitleg summary {
  cursor: pointer; padding: var(--ruimte-2) var(--ruimte-3);
  font-weight: var(--gew-semibold); font-size: var(--tekst-basis);
  list-style: none;
}
.uitleg summary::-webkit-details-marker { display: none; }
.uitleg summary::before { content: "+ "; color: var(--groen); font-weight: var(--gew-semibold); }
.uitleg[open] summary::before { content: "– "; }
.uitleg__body { padding: 0 var(--ruimte-3) var(--ruimte-3); font-size: var(--tekst-sm); color: var(--inkt-zacht); }
.uitleg__body dl { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.35rem var(--ruimte-2); }
@media (max-width: 480px) { .uitleg__body dl { grid-template-columns: minmax(0, 1fr); } }
.uitleg__body dt { font-weight: var(--gew-semibold); color: var(--inkt); }
.uitleg__body dd { margin: 0; }
.uitleg__body dd p { margin: 0.35rem 0 0; }
/* glastabel in het uitlegblok, schuift op een telefoon binnen zijn eigen vak */
.uitleg__body dd:has(.uitleg__tabel) { overflow-x: auto; }
.uitleg__tabel { border-collapse: collapse; font-size: var(--tekst-xs); margin-top: 0.15rem; }
.uitleg__tabel th, .uitleg__tabel td { text-align: left; padding: 0.2rem 0.75rem 0.2rem 0; border-bottom: 1px solid var(--grijs-lijn); vertical-align: top; }
.uitleg__tabel thead th { color: var(--inkt); font-weight: var(--gew-semibold); }
.uitleg__tabel tbody th { color: var(--inkt); font-weight: var(--gew-semibold); white-space: nowrap; }

/* --- info-strook onderaan de productpagina: bestellen en offerte.
   Bewust klein en rustig, links in de tekst in plaats van knoppen
   (Finn, 2026-11-02). Twee kolommen, op smal scherm onder elkaar. --- */
.info-strook {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ruimte-2) var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak);
  margin-block: var(--ruimte-4);
  font-size: var(--tekst-xs); color: var(--inkt-zacht);
}
.info-strook strong { display: block; color: var(--inkt); font-weight: var(--gew-semibold); margin-bottom: 0.15rem; }
.info-strook p { margin: 0; text-wrap: pretty; }
.info-strook a { color: var(--groen-link); overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .info-strook { grid-template-columns: minmax(0, 1fr); }
}

/* --- sticky prijzenbalk onderin: altijd zichtbaar wat excl./incl. betekent,
   op elke productpagina. Vervangt de losse legenda die eerst boven elke
   prijstabel stond, dat was dubbelop naast deze balk. body:has() geeft de
   pagina evenveel padding-bottom als de balk hoog is, anders verdwijnt het
   laatste stukje content (info-strook) erachter. ------------------------- */
.prijzen-balk {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 80;
  background: var(--vlak-2);
  border-top: 1px solid var(--grijs-lijn);
  box-shadow: 0 -2px 8px rgba(0, 30, 12, .08);
}
.prijzen-balk__in {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 0.25rem var(--ruimte-2);
  padding-block: 0.45rem;
  font-size: var(--tekst-xs);
}
.prijzen-balk__titel { font-weight: var(--gew-semibold); color: var(--inkt); white-space: nowrap; }
/* excl. boven, incl. eronder, los van hoe de tabel zelf de bedragen toont */
.prijzen-balk__regel { display: flex; flex-direction: column; line-height: 1.3; }
.prijzen-balk__excl { color: var(--grijs-gedempt); }
.prijzen-balk__incl { font-weight: var(--gew-semibold); color: var(--inkt); }
body:has(.prijzen-balk) { padding-bottom: 3.25rem; }
@media (max-width: 480px) {
  .prijzen-balk__in { align-items: flex-start; }
  body:has(.prijzen-balk) { padding-bottom: 3.5rem; }
}

/* --- zoek in de header --------------------------------------- */
.kop-zoek {
  position: relative;
  flex: 1 1 260px;
  max-width: 420px;
  order: 3;
}
@media (min-width: 900px) { .kop-zoek { order: 0; } }
.kop-zoek input {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak-2);
  font: inherit;
  font-size: var(--tekst-sm);
  color: var(--inkt);
}
.kop-zoek input::placeholder { color: var(--grijs-gedempt); }
.kop-zoek input:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }

/* Onder 900px een eigen rij: order 3 zet hem achter logo en menu, en met
   flex-basis 100% breekt hij af naar de volgende regel. Zie ook de wrap op
   .site-kop__balk in base.css. */
@media (max-width: 899px) {
  .kop-zoek { flex: 1 0 100%; max-width: none; }
  .kop-zoek input { padding: 0.45rem 0.8rem 0.45rem 2.1rem; }
  /* vergrootglas in het veld, zodat je op een telefoon meteen ziet wat het is */
  .kop-zoek::before {
    content: "";
    position: absolute;
    left: 0.75rem; top: 50%;
    width: 1rem; height: 1rem;
    margin-top: -0.5rem;
    pointer-events: none;
    background: var(--grijs-gedempt);
    -webkit-mask: var(--icoon-zoek) center / contain no-repeat;
    mask: var(--icoon-zoek) center / contain no-repeat;
  }
}
.kop-zoek__resultaten {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 60;
  margin: 0; padding: 0.35rem;
  list-style: none;
  background: var(--vlak-2);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 30, 12, .12);
}
.kop-zoek__resultaten a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--inkt);
}
.kop-zoek__resultaten a:hover,
.kop-zoek__resultaten a.is-actief { background: var(--groen-tint); text-decoration: none; }
.zoek-naam { font-weight: var(--gew-medium); font-size: var(--tekst-sm); }
.zoek-meta { font-size: var(--tekst-xs); color: var(--grijs-gedempt); }
.kop-zoek__leeg { padding: 0.6rem 0.65rem; font-size: var(--tekst-sm); color: var(--grijs-gedempt); }
.kop-zoek__meer { border-top: 1px solid var(--grijs-kop-lijn); margin-top: 0.25rem; padding-top: 0.25rem; }
.kop-zoek__meer a { display: block; padding: 0.5rem 0.65rem; font-size: var(--tekst-sm); font-weight: var(--gew-medium); color: var(--groen-link); }

/* --- live search: los overlay-component (live-search.js) -----
   Zelfde visuele taal als .kop-zoek, eigen naamruimte omdat dit een apart
   herbruikbaar blok is. Hoge z-index, moet boven onderliggende content
   kunnen zweven, ook boven een sticky element (bijv. de header). */
.live-search { position: relative; }
.live-search__invoer {
  width: 100%;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak-2);
  font: inherit;
  font-size: var(--tekst-sm);
  color: var(--inkt);
}
.live-search__invoer::placeholder { color: var(--grijs-gedempt); }
.live-search__invoer:focus-visible { outline: 2px solid var(--groen); outline-offset: 1px; }
.live-search__resultaten {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: 110;
  margin: 0; padding: 0.35rem;
  list-style: none;
  max-height: 22rem;
  overflow-y: auto;
  background: var(--vlak-2);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 30, 12, .12);
}
.live-search__resultaten a {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0.5rem 0.65rem;
  border-radius: 6px;
  color: var(--inkt);
}
.live-search__resultaten a:hover,
.live-search__resultaten a:focus-visible { background: var(--groen-tint); text-decoration: none; }
.live-search__naam { font-weight: var(--gew-medium); font-size: var(--tekst-sm); }
.live-search__meta { font-size: var(--tekst-xs); color: var(--grijs-gedempt); }
.live-search__leeg { padding: 0.6rem 0.65rem; font-size: var(--tekst-sm); color: var(--grijs-gedempt); }

/* --- aparte zoekresultatenpagina ---------------------------- */
.zoek-resultaten-pagina { margin-block: var(--ruimte-3); }
.zoek-treffers { list-style: none; margin: var(--ruimte-3) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.zoek-treffer {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--ruimte-2) var(--ruimte-3);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  color: var(--inkt);
}
.zoek-treffer:hover { border-color: var(--groen); text-decoration: none; background: var(--groen-tint); }
.zoek-treffer .zoek-naam { font-size: var(--tekst-basis); }
.zoek-geen { padding: var(--ruimte-3); border: 1px solid var(--grijs-lijn); border-radius: var(--radius); color: var(--inkt-zacht); font-size: var(--tekst-sm); }
.zoek-geen strong { color: var(--inkt); }

/* --- hero op de home -------------------------------------------
   De H1 stond kaal in <main> en plakte daardoor onder de headerbalk.
   Dit blok geeft de kop ademruimte en een duidelijke volgorde:
   boventitel (wie publiceert dit en per wanneer), H1, lead. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);   /* feitenkaart weg sinds 2026-11-02 (Finn) */
  gap: var(--ruimte-3) var(--ruimte-4);
  align-items: start;
  padding-block: var(--ruimte-4) var(--ruimte-3);
}
/* boventitel: klein en groen, staat boven de H1 en draagt de peildatum.
   Geen kop-element, dus de koppenstructuur van de pagina blijft H1 > H2. */
.hero__boven {
  display: block;
  margin-bottom: 0.6rem;
  color: var(--groen-link);
  font-size: var(--tekst-sm);
  font-weight: var(--gew-semibold);
  letter-spacing: 0.01em;
}
.hero h1 {
  margin-bottom: var(--ruimte-2);
  max-width: 26ch;                /* kop valt netjes op twee regels */
}
/* lead: iets groter dan de gewone alinea, want dit is de passage die
   Google en AI-antwoorden overnemen. 1.0625rem (17px) zit net boven
   --tekst-basis, genoeg verschil zonder dat het een subkop wordt. */
.hero__lead {
  max-width: 68ch;
  margin-bottom: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--inkt);
}

@media (max-width: 1080px) {
  .hero h1 { max-width: 30ch; }
}
@media (max-width: 760px) {
  .hero { padding-block: var(--ruimte-2); gap: var(--ruimte-2); }
  /* 40px kop is op een telefoon vier regels en duwt alles onder de vouw.
     Met clamp schaalt hij mee met het scherm: 32px op een ruime telefoon,
     kleiner op een smalle. Alleen hier, niet via het token --tekst-2xl, want
     dat voedt h1 op de hele site. */
  .hero h1 { max-width: none; font-size: clamp(1.6rem, 6.5vw, 2rem); }
  .hero__boven { margin-bottom: 0.4rem; font-size: var(--tekst-xs); }
  .hero__lead { font-size: var(--tekst-basis); line-height: 1.55; }
}

/* --- productzoeker: visuele 3-stappen -------------------------
   Correctie 2026-09-07: staat voortaan UITSLUITEND op de home. De
   sticky/compacte variant voor categoriepagina's (.productzoeker--compact)
   is bewust verwijderd, categoriepagina's beginnen nu direct met de
   prijstabellen, zonder groene sectie erboven. */
.productzoeker {
  border: none;
  border-radius: var(--radius-groot);
  /* effen FAKRO-groen, in lijn met de stijl van fakro.pl (geen limoen-verloop). */
  background: var(--groen);
  color: #fff;
}
.productzoeker--groot {
  /* compacter gezet: boven en onder evenveel lucht als links en rechts.
     De tekstgroottes en de stappenbalk blijven ongemoeid, de winst komt
     uit de witruimte, niet uit de leesbaarheid. */
  padding: var(--ruimte-3);
  margin-block: var(--ruimte-3);
}
/* --- home: categorieblok onder de productzoeker ----------------
   Finn 2026-09-30: meer ademruimte tussen het groene zoekblok en de drie
   categorieen. De lucht komt alleen onder het zoekblok, zodat de zoekbalk
   op dezelfde hoogte in beeld blijft. Op de telefoon iets minder. */
.home-categorieen { margin-top: var(--ruimte-5); }
.home-categorieen h2 { margin-bottom: var(--ruimte-3); }
@media (max-width: 760px) { .home-categorieen { margin-top: 2.5rem; } }

.pz-kop { font-weight: var(--gew-semibold); font-size: var(--tekst-md); margin: 0 0 0.75rem; }

/* zoekveld bovenin */
.pz-zoek { position: relative; margin-bottom: var(--ruimte-2); }
.pz-zoek__label { display: block; font-size: var(--tekst-sm); font-weight: var(--gew-medium); margin-bottom: 0.35rem; }
.pz-zoek__invoer {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--radius);
  background: var(--vlak-2);
  font: inherit; font-size: var(--tekst-sm); color: var(--inkt);
}
.pz-zoek__resultaten {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20;
  list-style: none; margin: 0; padding: 0.35rem;
  background: var(--vlak-2); border: 1px solid var(--grijs-lijn); border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 30, 12, .12);
}
.pz-zoek__resultaten a { display: flex; flex-direction: column; gap: 2px; padding: 0.5rem 0.6rem; border-radius: 6px; color: var(--inkt); }
.pz-zoek__resultaten a:hover { background: var(--groen-tint); text-decoration: none; }

/* stappen-samenvatting: vier duidelijke statussen, in een oogopslag te lezen.
     .is-neutraal alles nog open, direct na het laden: geen enkele stap
                  visueel geactiveerd, ook stap 1 niet. Zelfde stille
                  uiterlijk als is-te-doen, aparte naam omdat het een ander
                  moment is (nog niets gekozen vs. een stap die nog komt).
     .is-te-doen  nog te doen, laagste nadruk: doorzichtig met stippelrand
     .is-actief   huidige stap, hoogste nadruk: massief wit, donkergroene tekst
     .is-klaar    afgerond: half wit vlak, volle witte rand, vinkje, klikbaar */
.pz-balk {
  /* grid met auto-flow column: de stappen vullen samen altijd de volle breedte
     van het groene vlak, of het er nu drie of vier zijn. minmax(0, 1fr) is
     essentieel, een kale 1fr laat een lange keuzenaam de kolom oprekken en
     dan worden de stappen ongelijk. */
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--ruimte-2);
  list-style: none; margin: 0 0 var(--ruimte-2); padding: 0;
}
.pz-balk__stap {
  display: flex; align-items: center; gap: 0.75rem;
  min-width: 0;                   /* laat een lang woord de kolom niet oprekken */
  padding: 0.85rem 1.1rem;
  border: 2px solid rgba(255, 255, 255, .45);
  border-radius: var(--radius-groot);
  background: transparent;
  transition: background var(--overgang), border-color var(--overgang), box-shadow var(--overgang);
}
.pz-balk__nr {
  flex: none;
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .3);
  color: #fff;
  font-size: var(--tekst-basis); font-weight: var(--gew-semibold);
}
.pz-balk__label { display: flex; flex-direction: column; gap: 2px; min-width: 0; line-height: 1.3; }
.pz-balk__soort { font-size: var(--tekst-sm); color: rgba(255, 255, 255, .9); }
.pz-balk__keuze {
  font-size: var(--tekst-basis); font-weight: var(--gew-semibold); color: #fff;
  overflow-wrap: anywhere;        /* lange productnaam breekt af, rekt de kolom niet op */
}

/* 0. neutraal: startpunt op de home, voor er iets gekozen is */
.pz-balk__stap.is-neutraal { border-style: dashed; }
.pz-balk__stap.is-neutraal .pz-balk__keuze { color: rgba(255, 255, 255, .85); font-weight: var(--gew-normaal); }

/* 1. nog te doen */
.pz-balk__stap.is-te-doen { border-style: dashed; }
.pz-balk__stap.is-te-doen .pz-balk__keuze { color: rgba(255, 255, 255, .85); font-weight: var(--gew-normaal); }

/* 2. huidige stap: massief wit vlak met een zachte witte ring eromheen */
.pz-balk__stap.is-actief {
  background: #fff; border-color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}
.pz-balk__stap.is-actief .pz-balk__nr { background: var(--groen); color: #fff; }
.pz-balk__stap.is-actief .pz-balk__soort { color: var(--groen-link); font-weight: var(--gew-medium); }
.pz-balk__stap.is-actief .pz-balk__keuze { color: var(--groen-diep); }

/* 3. afgerond: klikbaar om terug te springen */
.pz-balk__stap.is-klaar {
  cursor: pointer;
  background: rgba(255, 255, 255, .2);
  border-color: #fff;
}
.pz-balk__stap.is-klaar .pz-balk__nr { background: #fff; color: var(--groen-hover); }
.pz-balk__stap.is-klaar:hover { background: rgba(255, 255, 255, .32); }

/* smal scherm: vier blokken naast elkaar worden onleesbaar smal, dus onder
   elkaar. Elke stap wordt dan een compacte regel: soort links, keuze rechts,
   in plaats van twee regels onder elkaar. Dat scheelt ongeveer een derde van
   de hoogte van het groene blok, zonder dat er iets wegvalt. */
@media (max-width: 760px) {
  .productzoeker--groot { padding: var(--ruimte-2); margin-block: var(--ruimte-2); }
  .pz-kop { font-size: var(--tekst-basis); margin-bottom: 0.5rem; }
  .pz-zoek { margin-bottom: var(--ruimte-1); }
  .pz-balk { grid-auto-flow: row; grid-auto-columns: auto; gap: 0.4rem; margin-bottom: var(--ruimte-2); }
  .pz-balk__stap {
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    border-width: 1px;
    border-radius: var(--radius);
  }
  .pz-balk__nr { width: 1.6rem; height: 1.6rem; font-size: var(--tekst-xs); }
  .pz-balk__label {
    flex: 1;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ruimte-1);
  }
  .pz-balk__soort { font-size: var(--tekst-xs); flex: none; }
  .pz-balk__keuze { font-size: var(--tekst-sm); text-align: right; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* de globale focusring is groen, dat verdwijnt in het groene paneel */
.productzoeker :focus-visible { outline-color: #fff; }

.pz-vraag { font-weight: var(--gew-semibold); font-size: var(--tekst-md); margin: 0 0 0.75rem; }

/* uniforme tegelrij: vast aantal kolommen, alle tegels exact even groot.
   minmax(0, 1fr) is essentieel. Een kale 1fr is minmax(auto, 1fr) en die auto
   laat een lange tekst de kolom oprekken, waardoor tegels ongelijk worden. */
.pz-tegels {
  --pz-kolommen: 3;
  --pz-regels: 2;                 /* max. regels onderschrift */
  display: grid;
  grid-template-columns: repeat(var(--pz-kolommen), minmax(0, 1fr));
  grid-auto-rows: 1fr;            /* alle rijen even hoog */
  align-items: stretch;           /* tegels vullen hun cel volledig */
  gap: var(--ruimte-2);
  width: 100%;
}
@media (max-width: 900px) { .pz-tegels { --pz-kolommen: 2; } }
@media (max-width: 600px) { .pz-tegels { --pz-kolommen: 1; --pz-regels: 3; } }
.pz-tegel {
  /* gecentreerd en zonder icoon: naam en onderschrift staan als blok midden in
     de tegel, horizontaal en verticaal. justify-content doet het verticale werk,
     daarom heeft het onderschrift geen margin-top:auto meer. */
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.3rem;
  width: 100%; height: 100%;      /* vult de gridcel */
  min-width: 0; min-height: 0;    /* laat een lang woord de kolom niet oprekken */
  padding: var(--ruimte-2);
  border: 1px solid var(--grijs-lijn);
  border-radius: var(--radius);
  background: var(--vlak-2);
  color: var(--inkt);
  font: inherit; text-align: center; cursor: pointer;
  transition: border-color var(--overgang), background-color var(--overgang);
}
.pz-tegel:hover { border-color: var(--groen); background: var(--groen-tint); }
/* 1.125rem (18px) zit tussen --tekst-basis (16) en --tekst-md (22) in. Die 22
   was te groot voor een tegelnaam, vandaar hier een losse waarde. */
.pz-tegel__titel { font-weight: var(--gew-semibold); font-size: 1.125rem; }
.pz-tegel__onder {
  font-size: var(--tekst-sm); color: var(--grijs-gedempt);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--pz-regels); line-clamp: var(--pz-regels);
  overflow: hidden;
}
/* Call-to-action, alleen op de laatste stap. Tom gaf terug dat de losse knop
   onder de tegels niet opviel. Hij staat nu op elke producttegel zelf, zodat
   zichtbaar is dat een klik de zoeker verlaat en naar de prijstabel springt. */
.pz-tegel__cta {
  margin-top: 0.15rem;
  font-size: var(--tekst-sm);
  font-weight: var(--gew-semibold);
  color: var(--groen);
}
.pz-tegel:hover .pz-tegel__cta { text-decoration: underline; }

/* smal scherm: de keuzetegels onder elkaar waren elk ruim 100px hoog, samen
   meer dan een derde van het groene blok. Minder padding en een kleinere titel
   halen daar ongeveer 130px af, zonder dat een tegel te klein wordt om aan te
   tikken. Staat hier en niet in het blok hierboven: deze regels moeten na de
   basisregels komen, anders wint de basisregel op gelijke specificiteit. */
@media (max-width: 760px) {
  .pz-vraag { font-size: var(--tekst-basis); margin-bottom: 0.5rem; }
  .pz-tegels { gap: 0.5rem; grid-auto-rows: auto; }
  .pz-tegel { flex-direction: row; justify-content: space-between; gap: var(--ruimte-2);
    padding: 0.65rem var(--ruimte-2); text-align: left; }
  .pz-tegel__titel { font-size: var(--tekst-basis); }
  .pz-tegel__onder { font-size: var(--tekst-xs); flex: none; }
  /* op smal staat de tegel in een rij; de cta krijgt een eigen regel eronder,
     anders verdringen titel, typecodes en cta elkaar op een telefoon. */
  .pz-tegel { flex-wrap: wrap; }
  .pz-tegel__cta { font-size: var(--tekst-xs); flex-basis: 100%; text-align: left; }
}

.pz-terug {
  border: 0; background: none; padding: 0; margin-bottom: var(--ruimte-2);
  color: #fff; font: inherit; font-size: var(--tekst-sm); cursor: pointer;
}
.pz-terug:hover { text-decoration: underline; }

/* de primaire knop is groen, en het paneel is dat ook: binnen de zoeker
   viel hij daardoor weg tegen de achtergrond. Hier wit met groene tekst. */
.productzoeker .knop--primair {
  background: #fff;
  color: var(--groen-diep);
  font-weight: var(--gew-semibold);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.productzoeker .knop--primair:hover { background: var(--groen-tint); color: var(--groen-diep); }

/* --- spring-nav: pill-links naar de productgroepen ----------- */
.spring-nav {
  display: flex; flex-wrap: wrap; gap: 0.375rem;
  margin-block: var(--ruimte-3);
}
.spring-nav a {
  padding: 0.375rem 1rem;
  border: 1px solid var(--grijs-lijn-sterk);
  border-radius: var(--radius-pill);
  font-size: var(--tekst-sm);
  color: var(--inkt);
}
.spring-nav a:hover { background: var(--inkt); color: #fff; text-decoration: none; }

/* --- compacte kaart voor het categorie-overzicht ------------ */
.kaart-rij--compact { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.kaart--compact {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-2);
  padding: var(--ruimte-2) var(--ruimte-3);
}
.kaart--compact .kaart__titel { display: block; font-weight: var(--gew-medium); }
.kaart--compact:hover { border-color: var(--groen); text-decoration: none; }
.kaart--compact::after {
  content: "›";
  color: var(--grijs-gedempt);
  transition: transform var(--overgang);
}
.kaart--compact:hover::after { transform: translateX(2px); color: var(--groen); }

.kaart__titel { font-weight: var(--gew-semibold); }

/* --- categorie-thema: zet --accent om -------------------------- */
[data-categorie="dakramen"]      { --accent: var(--accent-dakramen); }
[data-categorie="zonwering"]     { --accent: var(--accent-zonwering); }
[data-categorie="zoldertrappen"] { --accent: var(--accent-zoldertrappen); }

/* focus zichtbaar houden overal */
:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; border-radius: 2px; }