/* Onderdelen. Namen volgen de sjablonen in template-parts/. */

/* --- Knoppen ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: var(--bsv-touch);
  padding: 13px 24px;
  border: 0;
  border-radius: var(--bsv-radius-pill);
  font-size: var(--bsv-fs-base);
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.btn:hover { text-decoration: none; }
.btn--primary { background: var(--bsv-yellow); color: var(--bsv-black); }
.btn--primary:hover { background: var(--bsv-yellow-dark); }
.btn--dark { background: var(--bsv-ink); color: #fff; }
.btn--dark:hover { background: #000; }
.btn--ghost { background: var(--bsv-surface); color: var(--bsv-ink); border: 1px solid var(--bsv-line); }
.btn--ghost:hover { border-color: var(--bsv-line-hover); }
.btn--sm { min-height: 40px; padding: 10px 18px; font-size: 14px; }

/* --- Labels en chips ----------------------------------------------------- */

.tag {
  display: inline-block;
  padding: 4px 9px;
  border-radius: var(--bsv-radius-sm);
  font-size: var(--bsv-fs-xs);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.02em;
}

.tag--red { background: var(--bsv-sale); color: #fff; }
.tag--yellow { background: var(--bsv-yellow); color: var(--bsv-black); }
.tag--dark { background: var(--bsv-ink); color: #fff; }

.spec-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.chip {
  padding: 3px 7px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-bg);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.chip--kcal { background: var(--bsv-highlight); }

.chip--diet {
  display: inline-flex;
  align-items: center;
  gap: var(--bsv-space-1);
}

.chip--diet svg {
  flex-shrink: 0;
}

.diet-badge {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
}

.diet-badge--veg { background: var(--bsv-diet-veg); }
.diet-badge--vegan { background: var(--bsv-diet-vegan); }
.diet-badge--gf { background: var(--bsv-diet-gf); }
.diet-badge--lf { background: var(--bsv-diet-lf); }
.diet-badge--protein { background: var(--bsv-diet-protein); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 12px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  font-size: 12.5px;
  font-weight: 600;
}

/* De randen waren 1,6:1 en 1,3:1, terwijl het vlak nauwelijks van de achtergrond
   verschilt en de rand dus de begrenzing van het onderdeel is: WCAG 1.4.11 vraagt
   3:1. Dit is de allergenenpil op de productpagina, de pil die er het meest toe
   doet. Nu op dezelfde tokens als .pill--warn-soft, die er in woocommerce-product.css
   al goed op stond. */
.pill--warn {
  border-color: var(--bsv-warning-line);
  background: var(--bsv-warning-soft);
  color: var(--bsv-warning-strong);
}

.pill--ok {
  border-color: var(--bsv-success-line);
  background: var(--bsv-success-soft);
  color: var(--bsv-success-strong);
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--bsv-touch);
  padding: 9px 16px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  font-size: 14px;
  font-weight: 600;
}

.filter-chip:hover { border-color: var(--bsv-line-hover); text-decoration: none; }

/* Het icoon staat een tint terug, zodat het opschrift het werk blijft doen.
   Hier stond eerder een gekleurd bolletje per chip: acht hexcodes in het
   sjabloon en acht tinten in één rij, allebei in strijd met §2 van
   docs/design-reference.md. Eén lijnicoon van 1,8 px zegt hetzelfde zonder
   een kleurcode die nergens verklaard wordt. */
.filter-chip__icon { flex: 0 0 auto; color: var(--bsv-muted); }
.filter-chip:hover .filter-chip__icon { color: var(--bsv-ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }

/* De telling achter een ingang: "Gasbranders 15". Een tint terug, zodat het
   opschrift het werk doet en het getal de verwachting zet. */
.filter-chip__count { color: var(--bsv-muted); font-weight: 500; font-variant-numeric: tabular-nums; }

/* --- Prijs --------------------------------------------------------------- */

.price {
  display: inline-flex;
  align-items: flex-start;
  color: var(--bsv-ink);
  font-weight: 800;
  letter-spacing: -0.02em;
}

.price__int { font-size: 21px; line-height: 0.95; }

/* De centen staan als superscript tegen de bovenkant van de euro's, met de
   voet op de helft van de hoogte van het grote getal. */
.price__cts { font-size: 12px; margin-top: -1px; margin-left: 1px; }

.price-was { font-size: 12.5px; color: var(--bsv-muted); }
.price-was del { text-decoration: line-through; }

/* Staat er een doorgestreepte prijs boven, dan is dit een aanbieding en krijgt
   het bedrag dezelfde kleur als het kortingslabel op de foto. Het rood haalt
   8:1 op wit; de doorgestreepte prijs erboven maakt de betekenis duidelijk
   voor wie de kleur niet ziet. */
.price-was + .price { color: var(--bsv-sale); }

/* "vanaf" bij een product met varianten die niet allemaal hetzelfde kosten.
   Uitgelijnd op de onderkant van de euro's, want op de bovenkant zou het woord
   boven het bedrag zweven. */
.price__from {
  align-self: flex-end;
  margin-right: 4px;
  padding-bottom: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--bsv-muted);
}

/* Wat WooCommerce zelf over de prijs zegt als wij er geen getal van kunnen
   maken, bijvoorbeeld "Gratis". */
.price--plain { font-size: 15px; font-weight: 700; color: var(--bsv-ink); }

/* Wettelijk verplichte referentieprijs bij een aanbieding. */
.price-reference { margin: 4px 0 0; font-size: var(--bsv-fs-sm); color: var(--bsv-muted); }

.unit-price { margin: 6px 0 2px; font-size: var(--bsv-fs-sm); color: var(--bsv-muted); }
.unit-price strong { color: var(--bsv-ink); }

/* Op de kaart hoort de eenheidsprijs bij de prijs, dus strak eronder en
   kleiner dan de rest van de kaart.

   Zonder afbreken paste "€ 7,22 per 100 gram" niet in de 88 px die de kaart hem
   geeft en werd hij afgekapt tot "per 100 gra". De prijs per eenheid is een
   verplichte vermelding; half tonen kan niet. Twee regels is lelijker dan één,
   maar wel volledig. */
.unit-price--card {
  margin: 1px 0 0;
  font-size: 11.5px;
  line-height: 1.25;
}

/* --- Productkaart -------------------------------------------------------- */

/* Een bovengrens op de kolom, niet 1fr: een rij van drie kaarten hoort drie
   kaarten breed te zijn en niet uitgerekt tot de volle 1264 pixels. Bij acht
   kaarten raakt dit niets, want dan staan ze toch al op hun minimum en schuift
   de rij. */

/* `position: relative` is hier geen opmaak maar noodzaak. Een kaart bevat
   `.screen-reader-text`, en dat is `position: absolute` zonder links of boven.
   Zonder anker hier is het lichaam van de pagina zijn houvast, en dan valt zo'n
   span buiten deze rij: hij telt mee voor de breedte van de pagina in plaats van
   voor die van de rij. Bij acht kaarten schuift de hele winkel dan honderden
   pixels opzij, op een telefoon het ergst. Het ankert ook de vlaggen en de
   verlanglijstknop op de kaart. */
.lane {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(190px, 240px);
  gap: var(--bsv-space-3);
  overflow-x: auto;
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

/* Geen schuifbalk onder de rij: met een muis zijn er de pijltjes, op een
   telefoon veeg je. De binnenruimte onderaan blijft, voor de schaduw van een
   aangewezen kaart. */
.lane::-webkit-scrollbar { display: none; }
.lane > * { scroll-snap-align: start; }

/* --- Pijltjes bij een schuifrij ------------------------------------------ */

/* Het kader om een rij die zijwaarts schuift. main.js hangt er twee ronde
   pijltjes in, over de linker- en de rechterrand, zoals ah.nl dat doet. Ze
   staan alleen op een scherm met een muis: op een telefoon veeg je, en daar
   zouden ze de eerste en de laatste kaart voor een deel bedekken. De isolatie
   is nodig, anders steken ze door de plakkende kop heen zodra de rij
   eronderdoor schuift. */
.rail {
  position: relative;
  isolation: isolate;
}

.rail__arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: grid;
  place-items: center;
  width: var(--bsv-touch);
  height: var(--bsv-touch);
  border: 1px solid var(--bsv-line);
  border-radius: 50%;
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  box-shadow: var(--bsv-shadow-hover);
  cursor: pointer;
  transform: translateY(-50%);
}

.rail__arrow--prev { left: 6px; }
.rail__arrow--next { right: 6px; }

.rail__arrow:hover {
  border-color: var(--bsv-line-hover);
  background: var(--bsv-bg);
}

@media (hover: none) {
  .rail__arrow { display: none; }
}

.product-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bsv-surface);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
}

.product-card:hover { border-color: var(--bsv-line-hover); box-shadow: var(--bsv-shadow-hover); }

.product-card__media { position: relative; padding: 10px 10px 0; }

.product-card__thumb {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  border-radius: var(--bsv-radius); 
  overflow: hidden;
  background: var(--bsv-surface);
}

.product-card__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.product-card__flags {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.wishlist-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--bsv-line);
  border-radius: 50%;
  background: var(--bsv-surface);
  color: var(--bsv-muted);
  cursor: pointer;
}

/* Het ronde vlak blijft 34 px, want zo hoort de kaart eruit te zien, maar het
   klikvlak moet 44 bij 44 zijn. Een pseudo-element telt mee voor het treffen van
   de knop zonder iets aan het beeld te veranderen. Dit was de enige knop op de
   productkaart die onder de ondergrens uit CLAUDE.md zat. */
.wishlist-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--bsv-touch);
  height: var(--bsv-touch);
  transform: translate(-50%, -50%);
}

.wishlist-toggle:hover { color: var(--bsv-sale); border-color: var(--bsv-sale); }
.wishlist-toggle[aria-pressed="true"] { color: var(--bsv-sale); border-color: var(--bsv-sale); }
.wishlist-toggle[aria-pressed="true"] svg { fill: currentcolor; }

.product-card__body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
  padding: 12px;
}

.product-card .spec-chips--fixed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  min-height: 72px;
}

/* Afbreken in plaats van afkappen. Op een telefoon stond er "Gewicht nog niet
   be…" en zelfs "612 kcal per port…": de klant zag niet wat er stond. */
.product-card .spec-chips--fixed .chip {
  overflow-wrap: anywhere;
  white-space: normal;
}

.product-card .chip--missing {
  border-color: transparent;
  background: transparent;
  color: var(--bsv-muted);
  font-style: italic;
}

.product-card__brand {
  font-size: var(--bsv-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--bsv-muted);
}

.product-card__title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.product-card__title a:hover { text-decoration: underline; }

.product-card__rating {
  display: block;
  width: fit-content;
  margin: 0;
  color: var(--bsv-muted);
  font-size: 12px;
}

.product-card__rating:hover { color: var(--bsv-ink); text-decoration: underline; text-underline-offset: 2px; }
.stars { color: var(--bsv-star); letter-spacing: 1px; }

.product-card__stock { margin: 0; font-size: var(--bsv-fs-xs); font-weight: 500; }
.product-card__stock.is-in-stock { color: var(--bsv-success); }
.product-card__stock.is-out { color: var(--bsv-muted); }

.product-card__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.product-card__prices { min-width: 0; }

/* --- Kop van de startpagina ---------------------------------------------- */

.promo { display: grid; grid-template-columns: 1fr; gap: 14px; }

.promo__main,
.promo__card,
.wide-promo,
.scene-tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--bsv-radius-lg);
}

.promo__bg,
.scene-tile img,
.wide-promo img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.promo__main > .promo__bg { object-position: 68% center; }
.promo__card > .promo__bg { object-position: center; }

.promo__scrim,
.scene-tile__scrim { position: absolute; inset: 0; z-index: -1; }

.promo__main { display: flex; align-items: center; min-height: 0; padding: 26px; }

.promo__main .promo__scrim {
  /* Het verloop is donker aan één kant, waar de tekst op een breed scherm
     staat. Op een telefoon groeit de tekst daaruit weg en komt de kop op het
     lichtste deel van de foto. Een vlakke waas van 72% houdt witte tekst boven
     8:1, ook op een volledig witte foto. */
  background: rgb(8 10 8 / 72%);
}

.promo__content { max-width: 100%; }
.promo__content h2 { font-size: 25px; color: #fff; letter-spacing: -0.025em; line-height: 1.08; }
.promo__content p { color: #e6e6e6; font-size: var(--bsv-fs-md); margin: 12px 0 22px; }

.promo__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 11px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-sale);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.promo__side { display: grid; grid-template-columns: 1fr; gap: 14px; }

.promo__card { display: flex; align-items: flex-end; min-height: 163px; padding: 22px; }
.promo__card:hover { text-decoration: none; }

.promo__card .promo__scrim {
  background: rgb(8 10 8 / 72%);
}
.promo__card-body b { display: block; color: #fff; font-size: 19px; }
.promo__card-body small { display: block; color: #dcdcdc; font-size: 13.5px; margin: 4px 0 12px; }
.promo__link { display: inline-flex; align-items: center; gap: 6px; color: var(--bsv-yellow); font-weight: 700; font-size: 14px; }

/* --- Voordelenbalk ------------------------------------------------------- */

.usp-bar {
  display: grid;
  grid-template-columns: 1fr;
  list-style: none;
  background: var(--bsv-surface);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
}

.usp {
  display: flex;
  border-right: 0;
  border-bottom: 1px solid var(--bsv-line-soft);
}

.usp:last-child { border-right: 0; border-bottom: 0; }

/* De belofte is een link, en de hele tegel is het klikvlak: vulling en
   uitlijning horen daarom hier en niet op de li. Zonder 'url' staat er een div
   met precies dezelfde vorm, zodat de balk niet verspringt. */
.usp__body {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 44px;
  padding: 16px 20px;
  color: inherit;
}

.usp__text { min-width: 0; }

/* De hele tegel onderstrepen bij aanwijzen leest als één lange link; alleen de
   kop onderstrepen wijst aan waar je heen gaat. Zelfde keuze als op de
   productkaart. */
.usp__body:hover { text-decoration: none; }
a.usp__body:hover b { text-decoration: underline; }

.usp__icon {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
}
.usp b { display: block; font-size: 13.5px; color: var(--bsv-ink); }
.usp small { font-size: 12.5px; color: var(--bsv-muted); }

/* --- Categorieën --------------------------------------------------------- */

.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.cat-tile {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  text-align: center;
}

.cat-tile:hover { border-color: var(--bsv-line-hover); box-shadow: var(--bsv-shadow-hover); text-decoration: none; }

.cat-tile__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
  margin-bottom: 8px;
  border-radius: var(--bsv-radius-sm);
  overflow: hidden;
  background: var(--bsv-surface);
}

.cat-tile__image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

/* De pagina staat op nl-NL, dus `hyphens` breekt op lettergrepen mét koppelteken.
   `overflow-wrap` blijft als vangnet staan voor een naam waar geen woordenboek
   raad mee weet; zonder een van beide duwt "Gevriesdroogde" de kolom breder dan
   het scherm.

   Met het prefix erbij, want onvoorafgegaan werkt `hyphens` pas vanaf Safari 17
   (september 2023). Op iOS 16 en ouder gebeurde er zonder dat prefix niets, en
   dan schuift de pagina op een telefoon weer opzij -- precies het apparaat
   waarvoor deze regel er staat. tests/reflow.mjs draait op Chromium en ziet dat
   verschil niet. */
.cat-tile b {
  display: block;
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  font-size: 13px;
  color: var(--bsv-ink);
  line-height: 1.25;
}
.cat-tile small { overflow-wrap: anywhere; font-size: var(--bsv-fs-xs); color: var(--bsv-muted); }

.scene-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.scene-tile { display: flex; align-items: flex-end; min-height: 190px; padding: 18px; }
.scene-tile:hover { text-decoration: none; }

.scene-tile__scrim {
  background: linear-gradient(0deg, rgb(8 10 8 / 88%) 0%, rgb(8 10 8 / 35%) 60%, rgb(8 10 8 / 5%) 100%);
}
.scene-tile__body b { display: block; color: #fff; font-size: 19px; }
.scene-tile__body small { color: #d8d8d8; font-size: 12.5px; }

/* --- Brede promotievlakken ----------------------------------------------- */

.wide-promos { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* Zonder gratis verzending valt het linkervlak weg en blijft er één over. Die
   mag de hele breedte hebben in plaats van halverwege op te houden. */
.wide-promos--single { grid-template-columns: 1fr; }
.wide-promo { display: flex; align-items: center; min-height: 210px; padding: 30px; background: linear-gradient(135deg, var(--bsv-forest), var(--bsv-forest-2)); }

.wide-promo .promo__scrim {
  background: linear-gradient(90deg, rgb(8 10 8 / 90%) 0%, rgb(8 10 8 / 72%) 48%, rgb(8 10 8 / 20%) 100%);
}
.wide-promo__body h3 { color: #fff; font-size: 23px; max-width: 16ch; }
.wide-promo__body p { color: #dedede; max-width: 36ch; margin: 9px 0 18px; font-size: 14.5px; }

.wide-promo__art {
  position: absolute;
  right: 20px;
  bottom: -12px;
  z-index: -1;
  color: var(--bsv-yellow);
  opacity: 0.2;
  stroke: currentcolor;
  stroke-width: 2.4;
}

/* --- Merken -------------------------------------------------------------- */

.brand-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.brand-tile {
  display: grid;
  place-items: center;
  height: 74px;
  padding: 8px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  text-align: center;
}

.brand-tile:hover { border-color: var(--bsv-line-hover); text-decoration: none; }
.brand-tile img { width: auto; height: auto; max-width: 80%; max-height: 52px; object-fit: contain; }

/* Zelfde verhaal als bij .brandmark--donker op de merkpagina. */
.brand-tile__logo--wit {
  padding: 6px 8px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-ink);
}

.brand-tile__name { font-size: 12px; font-weight: 700; color: #4f4f4f; line-height: 1.2; }

/* --- Artikelen ----------------------------------------------------------- */

.article-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.article-card {
  overflow: hidden;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

.article-card:hover { border-color: var(--bsv-line-hover); box-shadow: var(--bsv-shadow-hover); }
.article-card__link { display: block; }
.article-card__link:hover { text-decoration: none; }

/* isolation is hier niet cosmetisch. placeholder-art.js zet de getekende
   illustratie op z-index -2, zodat hij achter de tekst in een promotievlak
   valt. Zonder een eigen stackingcontext zakt hij hier door de witte
   achtergrond van .article-card heen en zie je een leeg vlak: de SVG staat er
   wel, maar erachter. */
.article-card__image {
  display: block;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--bsv-bg);
}
.article-card__image img { width: 100%; height: 100%; object-fit: cover; }
.article-card__body { display: block; padding: 14px; }
.article-card__kicker { display: block; font-size: var(--bsv-fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--bsv-muted); }
.article-card__title { display: block; margin: 7px 0 6px; font-size: 15.5px; font-weight: 700; color: var(--bsv-ink); line-height: 1.3; }
.article-card__meta { font-size: 12.5px; color: var(--bsv-muted); }

/* --- Service ------------------------------------------------------------- */

.service-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.service-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.service-tile b { font-size: var(--bsv-fs-base); color: var(--bsv-ink); }
.service-tile small { font-size: var(--bsv-fs-sm); color: var(--bsv-muted); }
.service-tile__link { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 8px; font-size: 13.5px; font-weight: 700; color: var(--bsv-ink); }

.service-tile__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  border-radius: 50%;
  background: var(--bsv-highlight);
  color: var(--bsv-highlight-ink);
}

/* --- Uitklapbare secties ------------------------------------------------- */

.accordion { border-top: 1px solid var(--bsv-line-soft); }

.accordion summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--bsv-touch);
  padding: 14px 0;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--bsv-ink);
  cursor: pointer;
  list-style: none;
}

.accordion summary::-webkit-details-marker { display: none; }

.accordion summary::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-right: 4px;
  border-right: 2px solid var(--bsv-ink);
  border-bottom: 2px solid var(--bsv-ink);
  transform: rotate(45deg);
}

.accordion[open] summary::after { transform: rotate(-135deg); }

.accordion__body {
  padding-bottom: var(--bsv-space-4);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

/* --- Vaste bestelbalk ---------------------------------------------------- */

.sticky-atc {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  padding: 10px 0;
  background: var(--bsv-black);
  color: #fff;
  box-shadow: var(--bsv-shadow-bar);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.2s, visibility 0s 0.2s;
}

/* Verborgen is ook onbereikbaar voor Tab; anders gaat de focus naar een knop
   die buiten beeld staat. */
.sticky-atc.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.2s;
}

/* Wat met Tab gefocust wordt, schuift niet onder de balk. */
html:has(.sticky-atc.is-visible) { scroll-padding-bottom: calc(var(--bsv-atc-h, 84px) + 12px); }

/* De balk blijft staan tot onder aan de pagina, ook over de voet heen. Daarom
   houdt de pagina onderaan evenveel ruimte vrij als de balk hoog is: zonder dat
   liggen de onderste links van de voet eronder en zijn ze niet te raken. De
   ruimte staat er ook voordat de balk verschijnt; dat scheelt een sprong in de
   voet halverwege het scrollen. */
body:has(.sticky-atc) { padding-bottom: calc(var(--bsv-atc-h, 84px) + 12px); }

.sticky-atc .wrap { display: flex; align-items: center; gap: 14px; }
.sticky-atc__text { display: none; flex: 1; min-width: 0; }
.sticky-atc__text b { display: block; font-size: 13.5px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-atc__text small { color: #c9c9c9; font-size: 12px; }
.sticky-atc__price { font-size: 20px; font-weight: 800; white-space: nowrap; }

/* Het opschrift van de knop: kort op een telefoon, voluit zodra het past. Zie
   template-parts/global/sticky-add-to-cart.php. */
.sticky-atc__label--lang { display: none; }

@media (width >= 601px) {
  .sticky-atc__label--kort { display: none; }
  .sticky-atc__label--lang { display: inline; }
}
.sticky-atc .btn { flex: 1; min-width: 0; }

/* Aantal, prijs en knop in één rij. De kiezer krijgt een vaste breedte zodat de
   knop niet verspringt zodra het aantal tweecijferig wordt. */
.sticky-atc__form { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; }
.sticky-atc__form .qty-stepper { flex: 0 0 auto; height: 48px; background: #fff; }
.sticky-atc__form .qty-stepper__btn { width: 40px; height: 48px; }
.sticky-atc__form .qty-stepper input.qty { width: 30px; }
.sticky-atc__form .btn { flex: 1; min-width: 0; }

/* .block-head staat in layout.css met een ruimere maat. Op een telefoon mag de
   kop van een blok minder gewicht hebben en de knop eronder vallen. */
.block-head { align-items: flex-start; }
.block-head h2 { font-size: 19px; }

/* --- Aanpassing aan schermbreedte ---------------------------------------- */

/* De basis hierboven is de telefoon. Hieronder komt er in twee stappen ruimte
   bij; oplopend, want een later blok wint zodra ze allebei gelden. */

@media (width >= 761px) {
  .cat-grid,
  .brand-row { grid-template-columns: repeat(5, 1fr); }

  .article-grid,
  .service-grid { grid-template-columns: repeat(2, 1fr); }

  .wide-promos { grid-template-columns: 1fr 1fr; }

  /* Ná de regel hierboven: één brede promo blijft één kolom. */
  .wide-promos--single { grid-template-columns: 1fr; }
  .promo__side { grid-template-columns: 1fr 1fr; }
  .promo__content { max-width: 70%; }
  .promo__content h2 { font-size: 34px; }
  .promo__main { min-height: 340px; padding: 40px; }
  .promo__main > .promo__bg { object-position: 62% center; }

  .promo__main .promo__scrim {
    background: linear-gradient(90deg, rgb(8 10 8 / 92%) 0%, rgb(8 10 8 / 78%) 42%, rgb(8 10 8 / 15%) 78%, rgb(8 10 8 / 0%) 100%);
  }

  .promo__card .promo__scrim {
    background: linear-gradient(0deg, rgb(8 10 8 / 90%) 0%, rgb(8 10 8 / 45%) 55%, rgb(8 10 8 / 12%) 100%);
  }

  .usp-bar,
  .scene-grid { grid-template-columns: 1fr 1fr; }

  .usp { border-right: 1px solid var(--bsv-line-soft); border-bottom: 0; }
  .usp:nth-child(2) { border-right: 0; }
  .usp:nth-child(-n+2) { border-bottom: 1px solid var(--bsv-line-soft); }

  .lane { grid-auto-columns: minmax(210px, 260px); }
  .price__int { font-size: 27px; }
  .price__cts { font-size: 14px; margin-top: -2px; }
  .block-head { align-items: flex-end; }
  .block-head h2 { font-size: var(--bsv-fs-lg); }
  .sticky-atc__text { display: inline; }
  .sticky-atc .btn { flex: 0 0 auto; min-width: 190px; }
}

@media (width >= 1101px) {
  .cat-grid { grid-template-columns: repeat(8, 1fr); }
  .brand-row { grid-template-columns: repeat(10, 1fr); }

  .article-grid,
  .service-grid { grid-template-columns: repeat(4, 1fr); }

  .promo { grid-template-columns: 2fr 1fr; }
  .promo__side { grid-template-columns: none; }
  .promo__content { max-width: 52%; }

  .usp-bar,
  .scene-grid { grid-template-columns: repeat(4, 1fr); }

  .usp:nth-child(2) { border-right: 1px solid var(--bsv-line-soft); }
  .usp:nth-child(-n+2) { border-bottom: 0; }
  .usp:last-child { border-right: 0; }
}

/* De link naar de wettelijke garantie staat in de voet van elke pagina. De rest
   van die pagina staat in paginas.css. */
.guarantee-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Meldingen boven een formulier. Kleur doet hier niet het werk alleen: er
   staat altijd een kop of een zin bij die hetzelfde zegt.
--------------------------------------------------------------------------- */

.notice {
  margin: 0 0 var(--bsv-space-5);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

.notice > :first-child { margin-top: 0; }
.notice > :last-child { margin-bottom: 0; }
.notice h2, .notice h3 { margin-top: 0; margin-bottom: var(--bsv-space-2); font-size: var(--bsv-fs-md); }
.notice ul { margin: 0; padding-inline-start: 1.5em; }

.notice--success { border-color: var(--bsv-success); background: var(--bsv-success-soft); }
.notice--error { border-color: var(--bsv-error); background: var(--bsv-error-soft); }
.notice--info { border-color: var(--bsv-info); background: var(--bsv-info-soft); }
.notice__warn { color: var(--bsv-warning-strong); }

/* ---------------------------------------------------------------------------
   De formulieren van het thema zelf: herroepen en de offerteaanvraag. Ze zien
   eruit als de formulieren van WooCommerce, want een klant hoort niet te
   merken welk stuk software het scherm tekent.
--------------------------------------------------------------------------- */

.bsv-form { max-width: 46rem; margin-bottom: var(--bsv-space-6); }
.bsv-form__row { margin-bottom: var(--bsv-space-4); }

.bsv-form label,
.bsv-form legend {
  display: block;
  margin-bottom: 5px;
  color: var(--bsv-ink);
  font-size: 13.5px;
  font-weight: 600;
}

.bsv-form input[type="text"],
.bsv-form input[type="email"],
.bsv-form input[type="tel"],
.bsv-form input[type="date"],
.bsv-form input[type="number"],
.bsv-form select,
.bsv-form textarea {
  width: 100%;
  min-height: var(--bsv-touch);
  padding: 11px 14px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-body);
  font-family: inherit;
  font-size: var(--bsv-fs-base);
}

.bsv-form textarea { min-height: 96px; resize: vertical; }

.bsv-form input[aria-invalid="true"],
.bsv-form textarea[aria-invalid="true"] { border-color: var(--bsv-error); border-width: 2px; }

.bsv-form__hint {
  margin: 5px 0 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.bsv-form__error {
  margin: 5px 0 0;
  color: var(--bsv-error);
  font-size: var(--bsv-fs-sm);
  font-weight: 600;
}

.bsv-form__fieldset {
  padding: 0;
  border: 0;
}

.bsv-form__choice {
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: var(--bsv-touch);
  margin-bottom: 0;
  font-weight: 400;
}

.bsv-form__choice input { width: 20px; height: 20px; accent-color: var(--bsv-ink); }

.bsv-form__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-4);
}

/* ---------------------------------------------------------------------------
   Herroepen. De knop staat in de voet van elke pagina; dat is een eis, geen
   ontwerpkeuze. Zie inc/herroeping.php.
--------------------------------------------------------------------------- */

.withdrawal-link {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.withdrawal-cta {
  display: grid;
  justify-items: start;
  gap: var(--bsv-space-2);
  margin-bottom: var(--bsv-space-5);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-bg);
}

.withdrawal-cta small { color: var(--bsv-muted); }

.withdrawal__address {
  margin: 0 0 var(--bsv-space-4);
  font-style: normal;
  line-height: 1.6;
}

.model-form {
  margin-bottom: var(--bsv-space-5);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

.model-form ul { margin: var(--bsv-space-3) 0; padding-inline-start: 1.5em; }
.model-form li { margin-bottom: 10px; }

/* Paginering onder een lijst: het productoverzicht van WooCommerce en de lijst
   die het thema zelf afdrukt op de kennisbank, het weblog en de zoekpagina.
   Eén opmaak voor allebei, want het is voor de bezoeker hetzelfde ding. Het
   thema levert die lijst via template-parts/pagination.php, dat
   `paginate_links()` op `type => list` zet; zonder dat komen er losse spans
   binnen die hier niets raken.

   Klikdoelen zijn minstens 44 bij 44, zie docs/toegankelijkheid.md. */

.woocommerce-pagination,
.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--bsv-space-3);
  clear: both;
  margin: var(--bsv-space-6) 0 0;
}

.woocommerce-pagination ul.page-numbers,
.pagination ul.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--bsv-space-2);
  margin: 0;
  padding: var(--bsv-space-2);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  list-style: none;
}

.woocommerce-pagination ul.page-numbers > li,
.pagination ul.page-numbers > li {
  margin: 0;
  border: 0;
}

.woocommerce-pagination ul.page-numbers a,
.woocommerce-pagination ul.page-numbers span,
.pagination ul.page-numbers a,
.pagination ul.page-numbers span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  padding: 0 var(--bsv-space-3);
  border: 1px solid transparent;
  border-radius: var(--bsv-radius);
  color: var(--bsv-ink);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}

.woocommerce-pagination ul.page-numbers a:hover,
.pagination ul.page-numbers a:hover {
  border-color: var(--bsv-line);
  background: var(--bsv-bg);
}

.woocommerce-pagination ul.page-numbers .current,
.pagination ul.page-numbers .current {
  border-color: var(--bsv-black);
  background: var(--bsv-black);
  color: var(--bsv-surface);
}

.woocommerce-pagination ul.page-numbers .prev,
.woocommerce-pagination ul.page-numbers .next,
.pagination ul.page-numbers .prev,
.pagination ul.page-numbers .next {
  min-width: auto;
  padding-inline: var(--bsv-space-4);
  background: var(--bsv-yellow);
  color: var(--bsv-black);
}

.woocommerce-pagination ul.page-numbers .prev:hover,
.woocommerce-pagination ul.page-numbers .next:hover,
.pagination ul.page-numbers .prev:hover,
.pagination ul.page-numbers .next:hover {
  border-color: var(--bsv-yellow-dark);
  background: var(--bsv-yellow-dark);
}

.woocommerce-pagination ul.page-numbers .dots,
.pagination ul.page-numbers .dots {
  min-width: 28px;
  padding-inline: 0;
  color: var(--bsv-muted);
}

/* "Pagina 2 van 3" onder de nummers. Een rij losse cijfers zegt niet waar je
   bent, en op een telefoon zie je maar een deel van die rij. */
.pagination__state {
  width: 100%;
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  text-align: center;
}

/* Consistente feedback zonder layoutverschuiving. */
.btn:active { filter: brightness(0.92); }
.shop-filters__hint { color: var(--bsv-muted); font-size: var(--bsv-fs-sm); }