/*
 * Stijl van patroon 4 (SIT-T423): stalen, tegels, kaarten en segmentknoppen, de pagina-kop
 * en de chips. Overgezet uit de wireframe "Productfilter patronen" (sectie 4) bij Epic
 * SIT-E021, met de klassen die inc/weergave.php echt uitvoert (`tpf-*`). Alles onder de
 * naamruimte `.tp-filter`, zodat dit nooit met een klasse van het thema of van een andere
 * plugin botst; de eigen CSS-variabelen heten daarom ook `--tpf-*`, niet de kale
 * `--accent`/`--ink` van de wireframe.
 *
 * Geen lange streepjes in commentaar (site-stijlregels): alleen het gewone koppelteken.
 * Toegankelijkheid: zichtbare focusrand op elk klikbaar element (onderdeel van SIT-T425),
 * tabular-nums op elke telling zodat cijfers niet springen als ze wisselen.
 */

.tp-filter {
  --tpf-ink: #17201f;
  --tpf-muted: #5f6a68;
  /* SIT-T472: tekstkleur van een gedimde ("uit") optie. Vervangt de vlakke
     opacity:0.35/0.4 die hier tot en met versie 0.5.0 stond: die verlaagde het EFFECTIEVE
     contrast van de tekst mee (opacity dimt de hele laag, tekst inbegrepen), tot 1,6 a
     2,5:1 tegen een witte achtergrond, ver onder de WCAG AA-eis van 4,5:1 voor gewone
     tekst (axe-core: color-contrast, serious, op alle vier merken, alleen op 1280 pixels
     waar patroon 4 draait, SIT-F072). #66706e geeft 5,11:1 op wit en 4,86:1 op
     --tpf-surface-2, met marge boven de eis; de niet-tekstuele onderdelen (het kleurbolletje,
     de kaartrand/-vlak) mogen wel gewoon dimmen, die vallen niet onder deze regel.
   */
  --tpf-dimmed: #66706e;
  --tpf-line: #dcd8ce;
  --tpf-line-2: #ece9e1;
  --tpf-surface: #ffffff;
  --tpf-surface-2: #faf9f6;
  --tpf-accent: #0e5a63;
  --tpf-accent-ink: #0a434a;
  --tpf-accent-soft: #e2eeef;
  /* SIT-T472: het tweede, aparte color-contrast-restje na de --tpf-dimmed-fix hierboven.
     --tpf-hot/--tpf-ok waren niet gedimd (geen opacity), maar hun tekst tegen hun eigen
     "soft" achtergrond haalde de eis nooit: 3,74:1 (hot op hot-soft) en 4,33:1 (ok op
     ok-soft), allebei onder de 4,5:1 die axe-core zelf meldt. Alleen op de pagina-kop
     ("Eigen pagina"/"Filterpagina"-badge, tp_filter_weergave_paginakop_titel() in
     inc/weergave.php), dus altijd precies twee nodes per pagina, op elk merk. Donkerder
     gemaakt tot 5,6:1 (hot) en 7,2:1 (ok), dezelfde tint, ruim boven de eis; de "soft"
     achtergronden blijven ongewijzigd. */
  --tpf-hot: #963a1a;
  --tpf-hot-soft: #f8e6de;
  --tpf-ok: #1f5836;
  --tpf-ok-soft: #e3f1e8;
  color: var(--tpf-ink);
  font-size: 14px;
  line-height: 1.5;
}

.tp-filter * {
  box-sizing: border-box;
}

.tp-filter a {
  color: inherit;
  text-decoration: none;
}

.tp-filter :focus-visible {
  outline: 2px solid var(--tpf-accent);
  outline-offset: 2px;
}

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

/* -- Facetblok: kop plus inhoud, herbruikt door elke weergavesoort ---------------------- */

.tp-filter .tpf-facet {
  display: grid;
  gap: 8px;
  margin-bottom: 20px;
}

.tp-filter .tpf-facet h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tpf-muted);
}

.tp-filter .tpf-telling,
.tp-filter .tpf-liter {
  font-variant-numeric: tabular-nums;
}

/* -- Kleur als stalen (onderdeel 2) ------------------------------------------------------ */

.tp-filter .tpf-stalen {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tp-filter .tpf-staal {
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 68px;
  text-align: center;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--tpf-muted);
}

.tp-filter .tpf-staal i {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tpf-k, #ccc);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.08),
    inset -6px -6px 12px rgba(0, 0, 0, 0.18),
    inset 6px 6px 12px rgba(255, 255, 255, 0.35);
}

.tp-filter .tpf-staal[aria-pressed="true"] i {
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px var(--tpf-accent),
    inset -6px -6px 12px rgba(0, 0, 0, 0.18);
}

.tp-filter .tpf-staal[aria-pressed="true"] {
  color: var(--tpf-ink);
}

.tp-filter .tpf-staal.uit {
  color: var(--tpf-dimmed);
}

.tp-filter .tpf-staal.uit i {
  opacity: 0.5;
}

/* -- Kraanmodel en vorm als tegels (onderdeel 3, 4) -------------------------------------- */

.tp-filter .tpf-tegels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}

.tp-filter .tpf-tegel {
  display: grid;
  gap: 4px;
  justify-items: center;
  padding: 10px;
  border: 1px solid var(--tpf-line);
  border-radius: 10px;
  background: var(--tpf-surface);
  font-weight: 600;
  font-size: 12.5px;
  text-align: center;
  position: relative;
}

/* De kraanfoto op een modeltegel. Verhouding 1,4 staand zoals in de wireframe, en de foto
   wordt binnen dat vlak geschaald (`contain`) zodat een hoge kraan nooit wordt afgesneden.
   De foto's staan op wit, dus het vlak eromheen ook. */
.tp-filter .tpf-beeld {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.4;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
}

.tp-filter .tpf-beeld img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.tp-filter .tpf-tegel small {
  font-weight: 500;
  color: var(--tpf-muted);
  font-size: 11px;
}

.tp-filter .tpf-tegel[aria-pressed="true"] {
  border-color: var(--tpf-accent);
  background: var(--tpf-accent-soft);
}

.tp-filter .tpf-tegel.uit {
  color: var(--tpf-dimmed);
  border-color: var(--tpf-line-2);
  background: var(--tpf-surface-2);
}

/* **Een uitgeschakelde optie ziet er ook uit als een foto die niet meedoet** (23 september
   2026, opdrachtgever). Tot dan vervaagde alleen de tekst en het kleurvierkantje; de foto
   op een tegel of kaart bleef even helder als die van een keuze die wél kan, waardoor het
   verschil pas opviel als je de telling las. `aria-disabled` in plaats van de klasse als
   haakje: die staat op precies de opties die niet aanklikbaar zijn
   (tp_filter_weergave_optie_omhulsel()), en de cursor hoort dat ook te zeggen. */
.tp-filter .tpf-tegel.uit img,
.tp-filter .tpf-kaart.uit img,
.tp-filter [aria-disabled="true"] img {
  opacity: 0.4;
  filter: grayscale(0.55);
}

.tp-filter [aria-disabled="true"] {
  cursor: default;
}

/* "niet beschikbaar" in plaats van "0" (24 september 2026, opdrachtgever). In een kleurstaal
   van 68 pixels breekt dat over twee regels; kleiner en met een strakke regelafstand blijft
   de rij stalen daardoor even hoog, in plaats van dat juist de uitgeschakelde kleur de
   hoogste wordt. */
.tp-filter [aria-disabled="true"] .tpf-telling {
  font-size: 9.5px;
  line-height: 1.15;
  display: block;
}

.tp-filter .tpf-hier {
  background: var(--tpf-surface-2);
  border-style: dashed;
}

.tp-filter .tpf-hier::before {
  content: "Je bent hier";
  position: absolute;
  top: -8px;
  right: 8px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--tpf-accent);
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
}

/* -- Reservoir als kaarten (onderdeel 5) ------------------------------------------------- */

.tp-filter .tpf-reservoirs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* Met reservoirbeeld: een smalle beeldkolom links, de tekst rechts. Zo blijft de kaart even
   hoog als voorheen en staat het beeld naast de liters in plaats van erboven. */
.tp-filter .tpf-kaart {
  display: grid;
  grid-template-columns: 54px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  text-align: left;
  padding: 12px;
  border: 1px solid var(--tpf-line);
  border-radius: 10px;
  background: var(--tpf-surface);
  position: relative;
}

/* Zonder beeld: gewoon één kolom, net als vóór deze toevoeging. */
.tp-filter .tpf-kaart:not(:has(.tpf-beeld-reservoir)) {
  grid-template-columns: 1fr;
}

.tp-filter .tpf-beeld-reservoir {
  grid-row: 1 / span 4;
  aspect-ratio: 1 / 1.3;
  border-radius: 6px;
}

.tp-filter .tpf-kaart b {
  font-size: 14px;
}

.tp-filter .tpf-kaart .tpf-liter {
  font-size: 26px;
  font-weight: 600;
  color: var(--tpf-accent);
  line-height: 1;
}

.tp-filter .tpf-kaart .tpf-liter small {
  font-size: 11px;
  font-weight: 600;
  color: var(--tpf-muted);
  letter-spacing: 0.04em;
}

.tp-filter .tpf-kaart .tpf-uitleg {
  font-size: 11.5px;
  color: var(--tpf-muted);
}

.tp-filter .tpf-kaart[aria-pressed="true"] {
  border-color: var(--tpf-accent);
  background: var(--tpf-accent-soft);
}

.tp-filter .tpf-kaart.uit {
  color: var(--tpf-dimmed);
  border-color: var(--tpf-line-2);
  background: var(--tpf-surface-2);
}

/* -- Koeling en prijs als segmentknoppen (onderdeel 6) ----------------------------------- */

/* Losse knoppen, geen aaneengesloten balk: in een zijbalk van rond de 250 pixels brak zo'n
   balk midden in een knop af, en dan leest het geheel als één veld in plaats van als vier
   keuzes. Hetzelfde raster als de reservoirkaarten erboven, zodat een prijsknop even breed
   is als een kaart en de kolommen onder elkaar uitlijnen (opdrachtgever, 21 september
   2026). */
.tp-filter .tpf-segment {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}

/* SIT-T437: koeling en prijs zijn nooit padfacetten en renderen sinds die feature als
   `<button>` in een eigen `<form>` (tp_filter_weergave_knop_in_formulier()), niet meer als
   `<a href>`; `display: contents` laat de knop verder gewoon meelopen in de flex-rij
   hierboven, zonder dat het formulier zelf een eigen doos wordt. */
.tp-filter .tpf-segment form {
  display: contents;
}

/* Een segmentknop zonder resultaat is een echte `disabled` knop in een `<span>` in plaats
   van een formulier (tp_filter_weergave_segmentknop()); die span moet net zo meelopen als
   het formulier hierboven, anders staat hij als eigen doos in het raster. */
.tp-filter .tpf-segment .tpf-segmentform.uit {
  display: contents;
}

.tp-filter .tpf-segment button[disabled] {
  color: var(--tpf-dimmed);
  border-color: var(--tpf-line-2);
  background: var(--tpf-surface-2);
  cursor: default;
}

.tp-filter .tpf-segment a,
.tp-filter .tpf-segment button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1px;
  width: 100%;
  padding: 9px 12px;
  font-weight: 600;
  font-size: 13px;
  font-family: inherit;
  color: var(--tpf-ink);
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
}

.tp-filter .tpf-segment a:hover,
.tp-filter .tpf-segment button:hover {
  border-color: var(--tpf-accent);
}

.tp-filter .tpf-segment a[aria-pressed="true"],
.tp-filter .tpf-segment button[aria-pressed="true"] {
  background: var(--tpf-accent);
  color: #fff;
}

.tp-filter .tpf-segment .tpf-telling {
  display: block;
  font-size: 10.5px;
  opacity: 0.7;
}

/* -- Legenda ------------------------------------------------------------------------------ */

.tp-filter .tpf-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 12px;
  color: var(--tpf-muted);
  align-items: center;
  margin-top: 8px;
}

.tp-filter .tpf-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
}

.tp-filter .tpf-badge.tpf-hub {
  background: var(--tpf-ok-soft);
  color: var(--tpf-ok);
}

.tp-filter .tpf-badge.tpf-filter {
  background: var(--tpf-hot-soft);
  color: var(--tpf-hot);
}

/* -- Pagina-kop (onderdeel 1, 7, 8) ------------------------------------------------------- */

.tp-filter.tpf-paginakop {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.tp-filter .tpf-kruimelpad {
  font-size: 12px;
  color: var(--tpf-muted);
}

.tp-filter .tpf-kruimelpad a {
  color: var(--tpf-accent);
}

/* Referentie: wireframe "Productfilter patronen" gebruikt "›" tussen kruimelpad-stappen. */
.tp-filter .tpf-kruimelpad span::after {
  content: "\203A";
  margin-left: 6px;
  opacity: 0.5;
}

.tp-filter .tpf-kruimelpad span:last-child::after {
  content: "";
}

.tp-filter.tpf-paginakop h1 {
  margin: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}

.tp-filter .tpf-gefilterd {
  font-weight: 500;
  color: var(--tpf-muted);
}

.tp-filter .tpf-intro {
  margin: 0;
  max-width: 70ch;
  color: var(--tpf-muted);
  font-size: 15px;
}

.tp-filter .tpf-resultaatkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* -- Chips (onderdeel 7) ------------------------------------------------------------------ */

.tp-filter .tpf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tp-filter .tpf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px 5px 10px;
  border-radius: 999px;
  background: var(--tpf-accent-soft);
  color: var(--tpf-accent-ink);
  font-size: 12px;
  font-weight: 700;
}

.tp-filter .tpf-chip:hover {
  background: #d2e4e6;
}

.tp-filter .tpf-chip.tpf-wis {
  background: transparent;
  color: var(--tpf-muted);
  text-decoration: underline;
}

/* -- Sortering (onderdeel 8) --------------------------------------------------------------- */

.tp-filter .tpf-sorteer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--tpf-muted);
}

.tp-filter .tpf-sorteer select {
  font: 600 13px inherit;
  padding: 7px 10px;
  border: 1px solid var(--tpf-line);
  border-radius: 8px;
  background: #fff;
  color: var(--tpf-ink);
}

/* Zonder JavaScript blijft de knop nodig (SIT-T424, onderdeel 10); met JavaScript stuurt
   assets/tp-filter.js het formulier al bij het wisselen van de keuzelijst, en verbergt de
   knop dan (klasse "tpf-js-actief" op de form, gezet door dat scriptje). */
.tp-filter .tpf-sorteer.tpf-js-actief button {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Kleinere breedtes: geen horizontale scroll op 1024 en 768 pixels (SIT-T425) --------- */

@media (max-width: 1024px) {
  .tp-filter .tpf-tegels,
  .tp-filter .tpf-reservoirs {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-filter * {
    transition: none !important;
  }
}

/*
 * SIT-T422: sjabloon 17874 had een eigen Elementor-kop (widget 5c80859, `header_size=h1`) en
 * de WooCommerce-archiefomschrijving (widget e563173) in container 47a8f38, samen precies wat
 * [tp_filter_paginakop] ook toont. Van 20 tot 25 september 2026 stond hier
 * `.elementor-element-47a8f38 { display: none }`.
 *
 * **Die regel is weg, en de container ook.** Verbergen is geen verwijderen: gemeten op live
 * op 25 september stonden er twee <h1>-elementen in de HTML en de inleiding drie keer, want
 * de verborgen kop bleef gewoon staan (0 bij 0 pixels, witte tekst). Op verzoek van de
 * opdrachtgever is de container uit het sjabloon gehaald
 * (`scripts/tp_filter_dubbele_h1.py`). Daarvoor moest [tp_filter_paginakop] eerst ook zonder
 * filtercontext een kop tonen, want op `/floww/` en `/hotspot-titanium/` was die Elementor-kop
 * juist de enige titel; zie tp_filter_weergave_kale_paginakop() in inc/weergave.php.
 *
 * De kale kop hieronder heeft alleen wat ruimte nodig: de rest van .tpf-paginakop geldt al.
 */
.tp-filter.tpf-kaal {
  margin-bottom: 1.25rem;
}

/*
 * -- Mobiel onderpaneel, patroon 5 (SIT-T423/SIT-F068) -----------------------------------
 *
 * Onder 700 pixels vervangt dit blok de zijbalk (.tp-filter-widget, de aside van
 * templates/zijbalk.php): een vaste onderbalk met "Filter" en "Sorteer", en twee panelen
 * (.tpf-blad) die dezelfde tpf-staal/tpf-tegel/tpf-kaart/tpf-segment-opmaak hergebruiken
 * als hierboven, nu in een <label><input> in plaats van een <a>.
 *
 * Twee lagen, met opzet:
 * 1. Basis (geen klasse "tpf-mobiel-js" op de wikkel): .tpf-blad is een gewoon, altijd
 *    zichtbaar formulier in de normale documentstroom, onder de productlijst. De
 *    onderbalk-knoppen zijn dan gewone ankers (href="#tpf-blad-filter" enzovoort) die de
 *    browser er zelf naartoe laat springen. Dit is de "Klaar als"-eis "zonder JavaScript
 *    is het paneel een altijd zichtbaar formulier onder de lijst" (onderdeel 4).
 * 2. Verbeterd (assets/tp-filter.js zet de klasse "tpf-mobiel-js" op de wikkel): .tpf-blad
 *    wordt een vast onderpaneel dat van onderen omhoog schuift, met een sluier erachter.
 */

.tpf-mobiel {
  display: none;
}

@media (max-width: 699px) {
  .tp-filter-widget {
    display: none;
  }
  .tpf-mobiel {
    display: block;
  }
}

.tpf-mobiel .tpf-onderbalk {
  display: flex;
  gap: 8px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
}

.tpf-mobiel .tpf-knop {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  font: 700 14px inherit;
  color: var(--tpf-ink);
  background: var(--tpf-surface);
  border: 1px solid var(--tpf-line);
  border-radius: 12px;
  text-align: center;
}

.tpf-mobiel .tpf-knop-primair {
  color: #fff;
  background: var(--tpf-accent);
  border-color: var(--tpf-accent);
}

.tpf-mobiel .tpf-sluier {
  display: none;
}

.tpf-mobiel .tpf-blad {
  position: static;
  transform: none;
  border: 1px solid var(--tpf-line);
  border-radius: 14px;
  background: var(--tpf-surface);
  margin-top: 16px;
  max-height: none;
  display: grid;
  gap: 0;
}

.tpf-mobiel .tpf-greep {
  display: none;
}

.tpf-mobiel .tpf-blad header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--tpf-line-2);
}

.tpf-mobiel .tpf-blad header b {
  font-size: 15px;
}

.tpf-mobiel .tpf-stil {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tpf-muted);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 0;
}

.tpf-mobiel .tpf-rol {
  padding: 6px 14px 4px;
  display: grid;
  gap: 16px;
}

.tpf-mobiel .tpf-blad footer {
  display: flex;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--tpf-line-2);
}

.tpf-mobiel .tpf-blad footer .tpf-knop {
  flex: 1;
}

/* Compacte opties: stalen als schuivende rij, tegels drie naast elkaar, kaarten smaller. */
.tpf-mobiel .tpf-stalen {
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: thin;
}

.tpf-mobiel .tpf-staal {
  flex: none;
  width: 60px;
}

.tpf-mobiel .tpf-tegels {
  grid-template-columns: repeat(3, 1fr);
}

.tpf-mobiel .tpf-tegel {
  padding: 8px 6px;
  font-size: 11.5px;
}

.tpf-mobiel .tpf-reservoirs {
  grid-template-columns: 1fr;
}

.tpf-mobiel .tpf-radios {
  gap: 2px;
}

.tpf-mobiel .tpf-optie {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 6px;
  font-size: 14px;
  border-bottom: 1px solid var(--tpf-line-2);
}

.tpf-mobiel .tpf-optie:last-child {
  border-bottom: 0;
}

/* Elk facet-label (staal/tegel/kaart/segment) is nu een <label> om een <input>: dezelfde
   klasse, dezelfde vorm, alleen de invoer zelf is geen visuele stijl waard (de klasse
   ".uit" en "aria-pressed" van patroon 4 bestaan hier niet; een normaal, zichtbaar
   selectievakje/keuzerondje is op een telefoon duidelijker dan een verborgen invoer met
   een eigen "gekozen"-stijl). */
.tpf-mobiel .tpf-staal input,
.tpf-mobiel .tpf-tegel input,
.tpf-mobiel .tpf-kaart input,
.tpf-mobiel .tpf-mobiel-segment input,
.tpf-mobiel .tpf-optie input {
  accent-color: var(--tpf-accent);
  width: 18px;
  height: 18px;
}

.tpf-mobiel .tpf-mobiel-segment {
  display: grid;
  gap: 2px;
}

/* SIT-T471: een facetgroep die al een padsegment van het huidige adres is, staat vast
   (tp_filter_weergave_pad_facetten(), inc/weergave.php): de invoervelden krijgen
   "disabled" zodat "Toon" ze nooit als dubbele querystring meestuurt (de 404 die dit
   oploste). Eigen, milde stijl in plaats van de browserstandaard voor :disabled (die
   sommige besturingssystemen te sterk uitgrijzen): de keuze blijft goed leesbaar, alleen
   de aanwijzer maakt duidelijk dat hij hier niet te wijzigen is. */
.tpf-mobiel .tpf-groep-vast .tpf-optie,
.tpf-mobiel .tpf-groep-vast label {
  cursor: default;
}

.tpf-mobiel .tpf-groep-vast input:disabled {
  opacity: 0.6;
}

/* -- Verbeterd: onderpaneel dat van onderen omhoog schuift (assets/tp-filter.js zet
   "tpf-mobiel-js" op .tpf-mobiel zodra het scriptje draait) ----------------------------- */

.tpf-mobiel.tpf-mobiel-js .tpf-onderbalk {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: linear-gradient(transparent, var(--tpf-surface) 35%);
}

.tpf-mobiel.tpf-mobiel-js .tpf-sluier {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(23, 32, 31, 0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.tpf-mobiel.tpf-mobiel-js .tpf-sluier.open {
  opacity: 1;
  pointer-events: auto;
}

.tpf-mobiel.tpf-mobiel-js .tpf-blad {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 46;
  margin-top: 0;
  border-radius: 18px 18px 0 0;
  /* iOS Safari: het paneel mag niet meeschuiven met de adresbalk. max-height in dvh (de
     "kleine" dynamische viewporthoogte) houdt het paneel binnen wat er echt zichtbaar is,
     ook als de adresbalk in- of uitklapt; browsers zonder dvh-steun vallen terug op de
     vh-regel ervoor (een cascade, geen @supports-check nodig). */
  max-height: 85vh;
  max-height: 85dvh;
  transform: translateY(105%);
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
}

.tpf-mobiel.tpf-mobiel-js .tpf-blad.open {
  transform: none;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.tpf-mobiel.tpf-mobiel-js .tpf-greep {
  display: block;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--tpf-line);
  margin: 10px auto 0;
}

.tpf-mobiel.tpf-mobiel-js .tpf-rol {
  overflow: auto;
}

/* Terwijl een paneel open staat, scrollt de achterliggende pagina niet mee (assets/tp-filter.js zet deze klasse op <body>). */
body.tpf-geen-scroll {
  overflow: hidden;
}

@media (min-width: 700px) {
  .tpf-mobiel {
    display: none !important;
  }
}

/* -- Het tweede filter in de Astra-zijbalk ------------------------------------------------
   Sjabloon 17874 heeft naast ons filter een `sidebar`-widget die de widgetarea
   `astra-woo-single-sidebar` toont. Daar stond het filter van Filter Everything in, en daar
   staat nog WooCommerce's eigen prijsschuif. Twee prijsfilters onder elkaar, waarvan er één
   niets van onze stand weet.

   **Deze regel was tot 25 september 2026 `.elementor-widget-sidebar { display: none }`, en
   dat was te grof.** Die widgetarea bevat meer dan filters: gemeten op live op
   25 september stonden er vijf dingen in, in deze volgorde: WooCommerce's prijsschuif, het
   FEP-filter, het menu "Informatie", de kop "Reviews van klanten" en de
   NextKitchen-reviewafbeelding. De hele widget verbergen haalde dus ook het menu en de
   reviews van elke categoriepagina, een dag lang, zonder dat iemand daar om had gevraagd.

   Nu alleen de twee filters. Het FEP-filter is op 25 september uit de zijbalk verwijderd
   (`scripts/tp_filter_opruimen.py`); zijn selector blijft hier staan voor de kopie en voor
   een eventuele herinstallatie uit het archief.

   `:has()` kent elke huidige browser; een oude browser die het niet kent toont twee
   prijsfilters onder elkaar, en dat is precies de toestand zonder deze regel. */
body:has(.tp-filter.tpf-zijbalk) .elementor-widget-sidebar .widget_wpc_filters_widget,
body:has(.tp-filter.tpf-zijbalk) .elementor-widget-sidebar .wp-block-woocommerce-product-filters {
  display: none;
}

/* == De tekstblokken van een hubpagina ====================================================
   `hubpaginas.body_html` schrijft de uitgebreide tekst van een hub naar het ACF-veld
   `tp_categorietekst`, en die staat in sjabloon 17874 in de widget `tpcattekst01`. De
   klassen daarin (`tp-hub-as`, `tp-hub-aantal`, `tp-hub-tabel`) kwamen tot 25 september 2026
   in GEEN ENKEL stijlbestand voor: gemeten met een zoekopdracht over de hele repository, nul
   treffers. De asblokken waren dus gewone Astra-bulletlijsten met het aantal als platte
   tekst ernaast, terwijl de artikelpagina kernpunten, een specificatietabel en
   garantieblokken heeft. Dat is het verschil in vormgeving dat de opdrachtgever op
   25 september 2026 meldde.

   **Eigen stijlregels hier en niet in Elementor of het thema.** Besluit van de opdrachtgever
   van diezelfde dag: dan is het terug te draaien met één bestand, net als de rest van deze
   mu-plugin.

   **Eigen variabelen, niet die van het filter.** Deze blokken staan buiten `.tp-filter`, dus
   ze erven de `--tpf-*` niet. Ze staan op `:root` met een eigen voorvoegsel `--tph-`, met
   dezelfde kleuren als het filter zodat de pagina één geheel is.

   Geen JavaScript en geen animatie: dan is er ook niets dat `prefers-reduced-motion` moet
   respecteren, en blijft de tekst staan als dit bestand niet laadt. */

:root {
  --tph-ink: #17201f;
  --tph-muted: #5f6a68;
  --tph-line: #dcd8ce;
  --tph-line-2: #ece9e1;
  --tph-surface-2: #faf9f6;
  --tph-accent: #0e5a63;
  --tph-accent-soft: #e2eeef;
}

/* -- De asblokken: "In welke kleuren", "Welk reservoir hoort erbij" ---------------------- */

ul.tp-hub-as {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: grid;
  /* Twee tot vier kolommen naar breedte, zonder mediaquery: een merkhub heeft zeven kleuren
     en een modelreservoirhub twee, en die moeten er beide goed uitzien. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0.5rem;
}

ul.tp-hub-as > li {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--tph-line);
  border-radius: 10px;
  background: var(--tph-surface-2);
}

ul.tp-hub-as > li > a {
  color: var(--tph-accent);
  font-weight: 600;
  text-decoration: none;
}

ul.tp-hub-as > li > a:hover,
ul.tp-hub-as > li > a:focus-visible {
  text-decoration: underline;
}

.tp-hub-aantal {
  color: var(--tph-muted);
  font-size: 0.8125rem;
  white-space: nowrap;
  /* Cijfers van gelijke breedte, zodat "4 uitvoeringen" en "11 uitvoeringen" onder elkaar
     niet verspringen. Dezelfde regel als bij de tellingen in het filter. */
  font-variant-numeric: tabular-nums;
}

/* -- De veelgestelde vragen -------------------------------------------------------------- */

.tp-hub-faq {
  margin: 0 0 1.5em;
  border-top: 1px solid var(--tph-line-2);
}

.tp-hub-faq > h3.tp-hub-vraag {
  margin: 0;
  padding: 0.9rem 0 0.35rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  color: var(--tph-ink);
}

.tp-hub-faq > p {
  margin: 0 0 0.9rem;
  padding-bottom: 0.9rem;
  color: var(--tph-muted);
  border-bottom: 1px solid var(--tph-line-2);
}

.tp-hub-faq > p:last-child {
  border-bottom: 0;
}

/* -- "Verder kijken": de links naar de hubs ernaast -------------------------------------- */

ul.tp-hub-verder {
  list-style: none;
  margin: 0 0 1.5em;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

ul.tp-hub-verder > li {
  margin: 0;
}

ul.tp-hub-verder > li > a {
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--tph-line);
  border-radius: 999px;
  background: #fff;
  color: var(--tph-accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

ul.tp-hub-verder > li > a:hover,
ul.tp-hub-verder > li > a:focus-visible {
  border-color: var(--tph-accent);
  background: var(--tph-accent-soft);
}

/* -- De tabel bij een merk dat niet meer leverbaar is ------------------------------------ */

table.tp-hub-tabel {
  width: 100%;
  margin: 0 0 1.5em;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

table.tp-hub-tabel td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--tph-line-2);
  vertical-align: top;
}

table.tp-hub-tabel td:first-child {
  color: var(--tph-muted);
}

table.tp-hub-tabel a {
  color: var(--tph-accent);
  text-decoration: none;
}

table.tp-hub-tabel a:hover,
table.tp-hub-tabel a:focus-visible {
  text-decoration: underline;
}