/* Accuservice - header, footer, megamenu, mededelingsbalk, mobiele actiebalk
   en de gedeelde lay-outhelpers uit het ontwerp.

   De paginamarkup houdt de inline-stijlen uit het goedgekeurde ontwerp aan
   (die zijn geldige CSS). Hier staat alleen wat inline niet kan: de
   structurele [data-*]-helpers, de mediaqueries, en de hover-/focusstanden
   die in het ontwerp als niet-werkende style-hover-attributen stonden. */

/* ---- Pictogrammen (SVG-sprite): één stijl, lijnpictogram, tekstkleur ---- */
.acc-ico { display: inline-block; flex: none; vertical-align: -0.15em; width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.acc-ico-zacht { color: var(--kleur-primair); } /* pictogram in de accentkleur naast donkere tekst (contactgegevens) */

/* ---- Structurele helpers (uit het ontwerp, ongewijzigd) ---- */
article { min-width: 0; }
[data-mobiel] { display: none; }
[data-mega-paneel] { display: none; }
[data-mega]:hover > [data-mega-paneel],
[data-mega]:focus-within > [data-mega-paneel] { display: grid; }

[data-clamp2] { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
[data-clamp3] { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

[data-kolommen] { display: grid; gap: 32px; grid-template-columns: 272px minmax(0, 1fr); align-items: start; }
[data-twee]     { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
[data-raster3]  { display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; }
[data-raster4]  { display: grid; gap: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; }
[data-hero]     { display: grid; gap: 36px; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; }

@media (max-width: 1200px) { [data-raster4] { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  [data-mobiel] { display: revert; }
  [data-mobiel="menu"] { display: block; margin-left: auto; }
  [data-desktop] { display: none !important; }
  [data-kolommen], [data-twee], [data-hero] { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  [data-raster3], [data-raster4] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  [data-raster3] { grid-auto-rows: auto; }   /* mobiel: kaarthoogte los, geen lege ruimte in de kaart (ronde 8) */
}
@media (max-width: 640px) { [data-raster4] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Mobiel menu (ronde 8): hamburger + van rechts inschuivend paneel ----
   Het <details>-element werkt zonder JavaScript (tik = open/dicht). De hamburger
   morpht naar een kruis als het open is; dat kruis is de zichtbare sluitknop. */
.acc-mobmenu__knop { list-style: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; box-sizing: border-box; border: 1px solid var(--kleur-veldrand); border-radius: var(--radius); background: #fff; color: var(--kleur-primair); cursor: pointer; position: relative; z-index: 60; }
.acc-mobmenu__knop::-webkit-details-marker { display: none; }
.acc-mobmenu__knop .acc-ico { stroke-width: 2; }
.acc-mobmenu__x { display: none; }
.acc-mobmenu[open] .acc-mobmenu__ham { display: none; }
.acc-mobmenu[open] .acc-mobmenu__x { display: inline-flex; }

/* Overlay en paneel staan dicht op display:none: zo vallen ze buiten alle
   metingen (geen schijnbare overflow) en zijn ze zonder JavaScript gewoon
   bereikbaar (tik hamburger -> [open] -> paneel verschijnt). De inschuif-animatie
   voegt de JavaScript-IIFE in de kop toe (klasse acc-mobmenu--in); zonder
   JavaScript verschijnt het paneel zonder animatie, ook zonder overflow. */
.acc-mobmenu__overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 40; }
.acc-mobmenu__paneel {
  display: none; position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(86vw, 360px);
  background: #fff; z-index: 50; box-shadow: -14px 0 34px rgba(0, 0, 0, .18);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  align-content: start; padding: 14px 18px 28px;
  transform: translateX(100%); transition: transform .25s ease;
}
.acc-mobmenu[open] .acc-mobmenu__overlay { display: block; }
/* [open] zet display én de eindpositie (translateX 0): het paneel staat dus
   altijd op het scherm zodra het open is, ook zonder JavaScript. De inschuif
   komt van de JS-truc in de kop (start op 100%, transitie naar 0). Dicht is het
   display:none, dus het valt buiten elke overflow-meting. */
.acc-mobmenu[open] .acc-mobmenu__paneel { display: grid; transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .acc-mobmenu__paneel { transition: none; } }

.acc-mobmenu__top { display: flex; align-items: center; min-height: 48px; margin-bottom: 6px; }
.acc-mobmenu__top strong { font-family: var(--font-titel); font-size: 20px; font-weight: 600; }
.acc-mobmenu__zoek { display: flex; gap: 8px; margin-bottom: 16px; }
.acc-mobmenu__zoek input { flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; font-size: 17px; font-family: var(--font-body); border: 1px solid var(--kleur-veldrand); border-radius: var(--radius); }
.acc-mobmenu__zoek button { min-width: 48px; min-height: 46px; background: var(--kleur-primair-15); border: 1px solid var(--kleur-primair-40); border-radius: var(--radius); color: var(--kleur-primair); font-family: var(--font-titel); font-weight: 600; cursor: pointer; }
.acc-mobmenu__lijst { list-style: none; margin: 0; padding: 0; display: grid; }
.acc-mobmenu__link { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px; color: #000; text-decoration: none; font-family: var(--font-titel); font-weight: 600; font-size: 18px; border-bottom: 1px solid var(--kleur-rand); border-left: 3px solid transparent; }
.acc-mobmenu__ico { width: 26px; flex: none; display: inline-flex; color: var(--kleur-primair); }
.acc-mobmenu__link:hover { background: var(--kleur-primair-15); }
.acc-mobmenu__link[aria-current] { color: var(--kleur-primair); border-left-color: var(--kleur-accent); background: var(--kleur-primair-15); }

/* ---- Hero (ronde 8): op mobiel minder lucht en knoppen naast elkaar ----
   De sectiepadding en de kolomruimte staan in CSS (niet inline), zodat ze onder
   de 700px kleiner kunnen. Desktop blijft ongewijzigd. */
.acc-hero { padding: 40px 0 44px; }
.acc-hero__col { gap: 22px; }
.acc-hero__bel-kort { display: none; }
@media (max-width: 700px) {
  .acc-hero { padding: 14px 0 20px; }
  .acc-hero__col { gap: 16px; }
  .acc-hero__knoppen { flex-wrap: nowrap !important; gap: 10px; }
  .acc-hero__knop { flex: 1 1 0; min-width: 0; min-height: 46px !important; padding: 12px 10px !important; font-size: 17px !important; white-space: nowrap; }
  .acc-hero__bel-lang { display: none; }
  .acc-hero__bel-kort { display: inline; }
}

/* ---- Categoriepagina mobiel (ronde 8): compacte Filteren/Sorteren-balk met
   bottom sheets. Desktop blijft ongewijzigd (zijbalk + sorteerkeuze in de balk). */
.acc-resultaatbalk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid var(--kleur-rand); border-radius: var(--radius); padding: 12px 16px; font-size: 17px; }
.acc-resultaat-kort { display: none; }
.acc-sheet--sort { display: none; }             /* sorteer-sheet alleen op mobiel */
.acc-sheet__kop { display: flex; align-items: center; gap: 12px; }
.acc-sheet__kop > strong { flex: 1; min-width: 0; }
.acc-sheet__sluit { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; margin: -8px -10px -8px 0; padding: 0; background: none; border: 0; color: var(--kleur-primair); cursor: pointer; }
.acc-sort-optie { display: flex; align-items: center; gap: 12px; min-height: 48px; font-size: 17px; cursor: pointer; border-bottom: 1px solid var(--kleur-rand); }
.acc-sort-optie input { width: 20px; height: 20px; accent-color: var(--kleur-primair); }

@media (max-width: 900px) {
  /* De aside wordt een sticky knoppenbalk: Filteren | Sorteren naast elkaar. */
  .acc-filters { display: flex; gap: 10px; align-items: stretch; position: sticky; top: 0; z-index: 25; background: var(--kleur-achtergrond); padding: 6px 0 12px; margin: 0; }
  .acc-filters > details { flex: 1 1 0; min-width: 0; }
  .acc-sheet--sort { display: block; }
  .acc-sheet__knop { margin-bottom: 0; justify-content: center; gap: 8px; }

  /* De bottom sheet: overlay + van onderen omhoog schuivend paneel. */
  .acc-sheet__overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 60; }
  .acc-sheet__body { position: fixed; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 16px 16px 0 0; z-index: 70; transform: translateY(100%); transition: transform .25s ease; padding: 16px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -12px 30px rgba(0, 0, 0, .2); }
  .acc-sheet[open] .acc-sheet__overlay { display: block; }
  .acc-sheet[open] .acc-sheet__body { transform: translateY(0); }

  /* iOS rekent vh naar de schermhoogte ZONDER de Safari-balken. Daardoor werd
     het paneel hoger dan het zichtbare gebied en verdween de bovenkant ("Filters",
     "Alles wissen", het eerste facet) boven het scherm; alleen tijdens het
     doorrekken was hij even te zien. dvh is wel de zichtbare hoogte. De calc
     houdt bovendien altijd 64px overlay vrij, zodat er ook naast het paneel
     getikt kan worden. */
  @supports (max-height: 100dvh) {
    .acc-sheet__body { max-height: min(80dvh, calc(100dvh - 64px)); }
  }

  /* De kop blijft staan tijdens het scrollen, met de sluitknop erin. */
  .acc-sheet__kop { position: sticky; top: 0; z-index: 3; background: #fff; margin: -16px -18px 0; padding: 14px 18px 10px; border-bottom: 1px solid var(--kleur-rand); }
  .acc-sheet__sluit { display: inline-flex; }

  /* Resultatenregel als platte, kleine regel i.p.v. een omkaderd blok. */
  .acc-resultaatbalk { display: block; border: 0; border-radius: 0; padding: 2px 0 8px; font-size: 15px; color: var(--kleur-tekst-zacht); }
  .acc-resultaat-lang { display: none; }
  .acc-resultaat-sort { display: none !important; }   /* de losse sorteerkeuze verdwijnt op mobiel; sorteren zit in de knop */
  .acc-resultaat-kort { display: inline; }
}
@media (prefers-reduced-motion: reduce) { .acc-sheet__body { transition: none; } }

/* Basiskleur/onderrand van de menu-items in CSS (niet inline), zodat de hover- en
   aria-current-stijlen ze via specificiteit kunnen overschrijven. Inline kleuren
   zouden altijd winnen. */
.acc-navlink               { color: #000; border-bottom: 3px solid transparent; }
.acc-mega-item, .acc-mob-item { color: #000; }
.acc-footerlink            { color: #fff; text-decoration: none; }

/* ---- Hover-/focusstanden (vervangen de style-hover uit het ontwerp) ---- */
.acc-navlink:hover        { color: var(--kleur-primair); border-bottom-color: var(--kleur-accent); }
.acc-mega-item:hover      { background: var(--kleur-primair-15); }
.acc-knop-primair:hover   { background: var(--kleur-primair-donker); color: #fff; }
.acc-knop-wa:hover        { background: #363B49; color: #fff; }
.acc-knop-lijn:hover      { background: var(--kleur-primair-15); }
.acc-knop-lijn-vol:hover  { background: var(--kleur-primair); color: #fff; }
.acc-footerlink:hover     { text-decoration: underline; color: #fff; }

/* ---- Actief menu-item (aria-current="page"): merkkleur + streep, niet kleur
   alleen (kleurenblind-veilig). Hangt aan aria-current, dus het blijft
   gemarkeerd terwijl de muis over een ander item of het megamenu beweegt. ---- */
.acc-navlink[aria-current]   { color: var(--kleur-primair); border-bottom-color: var(--kleur-accent); }
.acc-mega-item[aria-current] { background: var(--kleur-primair-15); color: var(--kleur-primair); box-shadow: inset 3px 0 0 var(--kleur-accent); }
.acc-mob-item[aria-current]  { color: var(--kleur-primair); box-shadow: inset 4px 0 0 var(--kleur-accent); }
/* Witte streep i.p.v. accentrood: accentrood haalt op de blauwe voettekst-
   achtergrond de WCAG 1.4.11-drempel van 3:1 niet. */
.acc-footerlink[aria-current] { color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---- Mededelingsbalk ---- */
.acc-melding { background: var(--kleur-primair-15); border-top: 4px solid var(--kleur-accent); border-bottom: 1px solid var(--kleur-primair-40); }
.acc-melding__in { max-width: 1200px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acc-melding__badge { width: 26px; height: 26px; border-radius: 3px; background: var(--kleur-primair); color: #fff; font-family: var(--font-titel); font-weight: 600; font-size: 18px; display: grid; place-items: center; line-height: 1; flex: none; }
.acc-melding__tekst { font-size: 17px; flex: 1 1 280px; }
.acc-melding__sluit { width: 44px; height: 44px; flex: none; background: transparent; border: 1px solid var(--kleur-primair-40); border-radius: var(--radius); color: var(--kleur-primair); font-size: 18px; cursor: pointer; }
.acc-melding__sluit:hover { background: var(--kleur-wit); }

/* Site-logo (indien ingesteld) op ontwerp-hoogte */
.acc-logo .custom-logo { height: 46px; width: auto; display: block; }

/* ---- Homepage: categorietegels, merkenstrook (CSS-animatie), kaartknop ---- */
.acc-cat-tile:hover { border-color: var(--kleur-primair); box-shadow: 0 6px 20px rgba(60,82,158,.10); }
.acc-maps-knop:hover { background: var(--kleur-primair-15); }

@keyframes merkenloop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[data-loop] { display: flex; width: max-content; animation: merkenloop 45s linear infinite; }
[data-loop]:hover { animation-play-state: paused; }
.acc-merk-tile:hover { background: var(--kleur-primair-15); }
.acc-merk-tile:hover span { opacity: 1 !important; }
@media (prefers-reduced-motion: reduce) { [data-loop] { animation: none; } }

/* ---- Productarchief: kaart, filterpaneel, paginering, broodkruimel ---- */
.acc-prod-card:hover { border-color: var(--kleur-primair-40); box-shadow: 0 6px 20px rgba(60,82,158,.10); }
/* Kaartinhoud mag nooit breder worden dan de kaart zelf. Grid-items hebben
   standaard min-width:auto en dat liet lange producttitels de kaart uit lopen
   (Punt 3). min-width:0 laat ze krimpen, zodat de titel binnen de kaart over
   twee regels afbreekt in plaats van tegen de rand te worden afgekapt. */
.acc-prod-card, .acc-prod-card * { min-width: 0; }
.acc-prijs-op-aanvraag { font-size: 15px; color: var(--kleur-tekst-zacht); }

/* Filterpaneel: op mobiel inklapbaar (details/summary), op desktop altijd open.
   Het paneel wordt met het open-attribuut gerenderd (<details open>). Op desktop
   verbergen we de summary, zodat het paneel niet dicht kan. Zo hangt er geen
   jonge CSS-feature (zoals ::details-content) onder: werkt in elke browser, ook
   een oude, en zonder JavaScript. Op mobiel blijft de summary staan en klapt het
   paneel gewoon in en uit. */
.acc-filter-summary { min-height: 52px; margin-bottom: 14px; padding: 13px 18px; background: #fff; border: 2px solid var(--kleur-primair); border-radius: var(--radius); color: var(--kleur-primair); font-family: var(--font-titel); font-weight: 600; font-size: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; }
.acc-filter-summary::-webkit-details-marker { display: none; }
.acc-filters details[data-filterpaneel][open] .acc-filter-summary span { transform: rotate(180deg); } /* pijltje wijst omhoog als het open staat */
@media (min-width: 901px) {
  .acc-filters .acc-filter-summary { display: none; }
}
/* Filteropties: op mobiel ruime tikdoelen (44px), op desktop compacter (33px) zodat
   Merk, Spanning en Techniek plus de knop op een laptopscherm passen zonder scrollen. */
.acc-filter-optie { min-height: 44px; }
@media (min-width: 901px) { .acc-filter-optie { min-height: 33px; } }
/* WordPress' wpautop verpakt de opties in het filterpaneel in een <p> (en soms
   <br>). display:contents haalt die <p> uit de layout, zodat de opties weer
   directe grid-items van de fieldset zijn en netjes compact stapelen. */
.acc-filters fieldset p { display: contents; }
.acc-filters fieldset br { display: none; }
/* Mobiel: de knop "Toon resultaten" loopt onderin beeld mee zolang het paneel open is,
   boven de vaste mobiele actiebalk, zodat hij altijd bereikbaar is. */
@media (max-width: 900px) {
  .acc-sheet[open] .acc-filter-knop { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -6px 16px rgba(255, 255, 255, .9); }
}

/* Paginering */
.acc-paginering .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--kleur-primair-40); border-radius: var(--radius); color: var(--kleur-primair); text-decoration: none; font-family: var(--font-titel); font-weight: 600; }
.acc-paginering a.page-numbers:hover { background: var(--kleur-primair-15); }
.acc-paginering .page-numbers.current { background: var(--kleur-primair); color: #fff; border-color: var(--kleur-primair); }
.acc-paginering .page-numbers.dots { border: 0; min-width: 0; }

/* ---- Contactformulier (WPForms) in de huisstijl: dezelfde velden, randen en
   knopstijl als de zoekbalk en het filterpaneel. Scoped op .acc-contactformulier
   zodat het alleen het contactblok raakt. De veldregels staan bewust op de
   elementen zelf (input/textarea/select), zodat ze ook blijven werken als de
   plugin haar eigen klassenamen wijzigt; alleen label, knop en foutmelding
   hangen aan WPForms-klassen. ---- */
.acc-contactformulier .wpforms-field { margin-bottom: 16px; padding: 0; }
.acc-contactformulier .wpforms-field-label { font-family: var(--font-titel); font-weight: 600; font-size: 16px; margin-bottom: 6px; display: inline-block; }
.acc-contactformulier .wpforms-required-label { color: var(--kleur-accent); }
.acc-contactformulier .wpforms-field-sublabel, .acc-contactformulier .wpforms-field-description { font-size: 15px; color: var(--kleur-tekst-zacht); }
.acc-contactformulier input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
.acc-contactformulier textarea,
.acc-contactformulier select {
  width: 100%; min-height: 48px; padding: 11px 14px; font-size: 17px; font-family: var(--font-body);
  color: var(--kleur-tekst); background: #fff; border: 1px solid var(--kleur-veldrand);
  border-radius: var(--radius); box-shadow: none; -webkit-appearance: none; appearance: none;
}
.acc-contactformulier select { appearance: auto; -webkit-appearance: auto; }
.acc-contactformulier textarea { min-height: 120px; resize: vertical; }
.acc-contactformulier input:focus, .acc-contactformulier textarea:focus, .acc-contactformulier select:focus {
  outline: none; border-color: var(--kleur-primair); box-shadow: 0 0 0 3px var(--kleur-primair-15);
}
.acc-contactformulier input[type="checkbox"], .acc-contactformulier input[type="radio"] { accent-color: var(--kleur-primair); width: 18px; height: 18px; }
.acc-contactformulier .wpforms-submit, .acc-contactformulier button[type="submit"] {
  min-height: 52px; padding: 14px 26px; background: var(--kleur-primair); color: #fff;
  font-family: var(--font-titel); font-weight: 600; font-size: 18px; border: 0;
  border-radius: var(--radius); cursor: pointer;
}
.acc-contactformulier .wpforms-submit:hover, .acc-contactformulier button[type="submit"]:hover { background: var(--kleur-primair-donker); }
.acc-contactformulier .wpforms-error { color: var(--kleur-accent); font-size: 15px; }
.acc-contactformulier .wpforms-confirmation-container-full { background: var(--kleur-primair-15); border: 1px solid var(--kleur-primair-40); border-radius: var(--radius); padding: 16px 18px; color: var(--kleur-tekst); }

.acc-kruimel a { color: var(--kleur-primair); }
.acc-kruimel { margin-bottom: 14px; } /* lucht tussen broodkruimel en de titel eronder */

/* ---- Tekstpagina's (WXR-import): links uitgelijnd op dezelfde contentrand
   als de kop en het menu, met een leesbare kolombreedte. ---- */
.acc-tekstpagina { max-width: 1200px; margin: 0 auto; padding: 24px 20px 64px; }
.acc-tekstpagina > * { max-width: 760px; }
/* Geen eigen font-size/line-height: de H1 volgt de theme.json-preset (kop-groot,
   46px), zodat er echte hiërarchie is t.o.v. de 32px-H2. Alleen de marge blijft. */
.acc-tekstpagina > .wp-block-post-title { margin: 0 0 24px; }
.acc-tekstpagina .wp-block-post-content > * { margin-top: 0; margin-bottom: 1.1em; }
.acc-tekstpagina .wpseo-breadcrumbs, .acc-tekstpagina .rank-math-breadcrumb { margin-bottom: 14px; font-size: 15px; color: var(--kleur-tekst-zacht); }

/* ---- Brede tekstpagina's (ronde 5): benut de breedte, houd de tekst leesbaar.
   De smalle 760px-kolom hierboven blijft de standaard voor gewone pagina's;
   /faq en de langlees-pagina's krijgen hieronder een bredere opzet. ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* /faq: korte accordeonregels over de volle breedte, antwoordtekst leesbaar. */
.acc-page-faq .acc-tekstpagina > * { max-width: none; }
.acc-page-faq .wp-block-post-content > p { max-width: 74ch; }
.acc-page-faq .wp-block-details p { max-width: 78ch; }

/* Langlees-pagina's: tweekoloms met meescrollende zijkolom (inhoudsopgave of
   contactkaart). De grid-klasse zet de JS zodra de zijkolom is opgebouwd. */
.acc-met-zijkolom { display: grid; grid-template-columns: minmax(0, 1fr) 280px; grid-template-areas: "titel titel" "tekst zij"; column-gap: 46px; row-gap: 4px; align-items: start; }
.acc-met-zijkolom > * { max-width: none; }
.acc-met-zijkolom > .wp-block-post-title { grid-area: titel; }
.acc-met-zijkolom > .wp-block-post-content { grid-area: tekst; }
.acc-met-zijkolom > .wp-block-post-content > * { max-width: 72ch; }   /* leesbare tekstkolom (~72 tekens) */
.acc-zijkolom { grid-area: zij; position: sticky; top: 96px; font-size: 16px; }
.acc-kop-anker { scroll-margin-top: 96px; }                            /* sprong niet onder de plakkende kop */

/* Inhoudsopgave */
.acc-inhoud { border: 1px solid var(--kleur-rand); border-radius: var(--radius); overflow: hidden; }
.acc-inhoud > summary { min-height: 48px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-family: var(--font-titel); font-weight: 600; font-size: 17px; color: var(--kleur-primair); background: var(--kleur-primair-15); list-style: none; }
.acc-inhoud > summary::-webkit-details-marker { display: none; }
.acc-inhoud nav { padding: 8px 6px; }
.acc-inhoud ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.acc-inhoud a { display: block; padding: 7px 12px; border-left: 3px solid transparent; color: var(--kleur-tekst); text-decoration: none; line-height: 1.3; }
.acc-inhoud a:hover { background: var(--kleur-primair-15); border-left-color: var(--kleur-accent); color: var(--kleur-primair); }
.acc-inhoud-sub a { padding-left: 26px; font-size: 15px; color: var(--kleur-tekst-zacht); }

/* Contactkaart in de zijkolom (langlees-pagina zonder inhoudsopgave) */
.acc-zij-cta { border: 1px solid var(--kleur-rand); border-top: 3px solid var(--kleur-primair); border-radius: var(--radius); padding: 20px; display: grid; gap: 12px; }
.acc-zij-cta strong { font-family: var(--font-titel); font-size: 19px; font-weight: 600; }
.acc-zij-cta p { margin: 0; font-size: 16px; color: var(--kleur-tekst-zacht); }
.acc-zij-cta a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 16px; text-decoration: none; font-family: var(--font-titel); font-weight: 600; font-size: 16px; border-radius: var(--radius); }
.acc-zij-cta .acc-knop-primair { background: var(--kleur-primair); color: #fff; }
.acc-zij-cta .acc-knop-wa { background: var(--kleur-secundair); color: #fff; }

@media (max-width: 900px) {
  .acc-met-zijkolom { display: block; }                 /* blokweergave: titel, zijkolom, tekst onder elkaar */
  .acc-zijkolom { position: static; top: auto; margin: 0 0 24px; }
  .acc-page-faq .wp-block-post-content > p, .acc-page-faq .wp-block-details p, .acc-met-zijkolom > .wp-block-post-content > * { max-width: none; }
}

/* ---- Nieuws: lege staat + berichtenlijst ---- */
.acc-lege-staat { border: 1px solid var(--kleur-rand); border-radius: var(--radius); background: var(--kleur-primair-15); padding: 28px 32px; margin-top: 6px; display: grid; gap: 12px; }
.acc-lege-staat h2 { margin: 0; font-family: var(--font-titel); font-size: 24px; line-height: 1.2; }
.acc-lege-staat p { margin: 0; font-size: 17px; }
.acc-nieuws-lijst { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.acc-nieuws-lijst > li { border-bottom: 1px solid var(--kleur-rand); padding: 20px 0; }
.acc-nieuws-lijst .wp-block-post-title { margin: 0 0 4px; font-family: var(--font-titel); font-size: 22px; line-height: 1.2; }
.acc-nieuws-lijst .wp-block-post-title a { color: #000; text-decoration: none; }
.acc-nieuws-lijst .wp-block-post-title a:hover { color: var(--kleur-primair); text-decoration: underline; }

/* ---- FAQ-accordeon (core/details-blok) in de ontwerpstijl, zonder JavaScript ---- */
.wp-block-details { border: 1px solid var(--kleur-rand); border-radius: var(--radius); overflow: hidden; }
.wp-block-details + .wp-block-details { margin-top: 12px; }
.wp-block-details > summary { min-height: 60px; padding: 16px 20px; display: flex; align-items: center; gap: 14px; cursor: pointer; font-family: var(--font-titel); font-size: 20px; font-weight: 600; background: var(--kleur-primair-15); list-style: none; }
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::before { content: "+"; width: 26px; height: 26px; flex: none; border-radius: 3px; background: var(--kleur-primair); color: #fff; font-family: var(--font-titel); font-weight: 600; font-size: 18px; display: grid; place-items: center; line-height: 1; }
.wp-block-details[open] > summary::before { content: "\2013"; }
.wp-block-details > summary ~ * { margin: 0; padding: 0 20px; }
.wp-block-details > summary + * { border-top: 1px solid var(--kleur-rand); padding-top: 18px; }
.wp-block-details > :last-child:not(summary) { padding-bottom: 18px; }

/* ---- WooCommerce standaard productlus (o.a. "Gerelateerde producten") als kaartraster ---- */
.woocommerce ul.products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 20px; list-style: none; margin: 0; padding: 0; }
.woocommerce ul.products::before, .woocommerce ul.products::after { content: none; display: none; }
.woocommerce ul.products > li, .woocommerce ul.products > .acc-prod-card { width: auto; margin: 0; float: none; }
.woocommerce .related.products > h2, .woocommerce .upsells.products > h2 { font-family: var(--font-titel); font-size: 24px; font-weight: 600; margin: 0 0 20px; }
@media (max-width: 900px) { .woocommerce ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .woocommerce ul.products { grid-template-columns: 1fr; } }

/* ---- Zoekresultaten: productfoto links, titel en tekst rechts. Voorheen stond
   er alleen tekst, waardoor een lijst met accu's nauwelijks te scannen was.
   Pagina's zonder uitgelichte afbeelding houden gewoon de volle breedte. */
.acc-zoekresultaat { gap: 18px; align-items: flex-start; padding: 18px 0; border-bottom: 1px solid var(--kleur-rand); }
.acc-zoekresultaat .acc-zoekresultaat__foto { flex: 0 0 auto; width: 96px; margin: 0; }
.acc-zoekresultaat .acc-zoekresultaat__foto img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--kleur-rand); border-radius: var(--radius); display: block; }
.acc-zoekresultaat .acc-zoekresultaat__tekst { flex: 1 1 auto; min-width: 0; }
.acc-zoekresultaat .wp-block-post-title { margin: 0 0 6px; }
.acc-zoekresultaat .wp-block-post-excerpt { margin: 0; }
.acc-zoekresultaat .wp-block-post-excerpt p { margin: 0; }
@media (max-width: 600px) {
  .acc-zoekresultaat { gap: 14px; padding: 14px 0; }
  .acc-zoekresultaat .acc-zoekresultaat__foto,
  .acc-zoekresultaat .acc-zoekresultaat__foto img { width: 72px; }
  .acc-zoekresultaat .acc-zoekresultaat__foto img { height: 72px; }
}

/* ---- Cookiebanner in de huisstijl. Complianz gebruikt standaard zijn eigen
   paars voor de knop "Accepteren", de links en de schuifjes. Dat staat los van
   alles wat er verder op de site gebeurt, dus trekken we het hier gelijk.
   Bewust hier en niet in het "Aangepaste CSS"-veld van Complianz: zo staat alle
   opmaak op een plek en gaat hij mee met het thema. */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept { background-color: var(--kleur-primair); border-color: var(--kleur-primair); color: #fff; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn.cmplz-accept:hover { background-color: var(--kleur-primair-donker); border-color: var(--kleur-primair-donker); }
#cmplz-cookiebanner-container .cmplz-cookiebanner a,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-link { color: var(--kleur-primair); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-consent-checkbox:checked + .cmplz-banner-slider,
#cmplz-cookiebanner-container .cmplz-cookiebanner input:checked + .cmplz-banner-slider { background-color: var(--kleur-primair); }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible { outline: 3px solid var(--kleur-primair); outline-offset: 3px; }