/* ==========================================================================
   Avantius — themastylesheet
   Geschreven tegen de klassenamen uit bronnen/dom-structuur-avantius.md.
   Alles wat nieuw is heeft de prefix av-. Nooit blg blc blt blp blb bls bld
   bli blm blsx, en geen elementselectors of descendant-selectors die het
   categorie-content-veld kunnen binnendringen.

   Volgorde: 1 tokens · 2 fonts · 3 basis · 4 header · 5 navigatie · 6 USP's
   7 homepage · 8 productgrid · 9 categorie · 10 filters · 11 zoeken
   12 productpagina · 13 winkelwagen · 14 mini-wagen en vensters · 15 footer
   16 knoppen · 17 textpage · 18 toegankelijkheid
   ========================================================================== */

/* 1 — TOKENS ============================================================== */

:root {
  --av-green:        #1f3d3a;
  --av-green-link:   #274f4b;
  --av-text:         #54615d;
  --av-text-soft:    #5c6864;
  --av-stock:        #3d7050;
  --av-accent:       #a04f33;
  --av-accent-dark:  #8f4225;
  --av-star:         #8f6414;   /* 5,08 op #fdfbf7 — haalt AA zelfstandig, zie Reactie 23 */
  --av-on-green:     #d8e2de;

  --av-bg:           #fdfbf7;
  --av-sand:         #f6f2ea;
  --av-mint:         #eef1ee;
  --av-cream:        #f9f6f0;
  --av-line:         #eae3d8;
  --av-line-strong:  #ded7ca;

  --av-serif: 'Instrument Serif', Georgia, serif;
  --av-sans:  'DM Sans', 'DM Sans Fallback', system-ui, sans-serif;

  --av-pad:   32px;   /* horizontale marge desktop */
  --av-pad-m: 16px;   /* horizontale marge mobiel  */
}

/* Geen achtergrondvlak donkerder dan #e4e4e4. Komt er toch een donkerder
   paneel, gebruik --av-accent-dark voor accenttekst daarop. */

/* 2 — FONTS =============================================================== */

@font-face {
  font-family: 'Instrument Serif';
  src: url('instrument-serif-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('dm-sans-latin.woff2') format('woff2-variations');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  size-adjust: 96.5%; ascent-override: 92%; descent-override: 24%; line-gap-override: 0%;
}

/* 3 — BASIS =============================================================== */
/* Alleen body en de eigen wrappers. Geen regels op img, div, a of *. */

*, *::before, *::after { box-sizing: border-box; }

body {
  background: var(--av-bg);
  font: 400 15px/1.65 var(--av-sans);
  color: var(--av-text);
  text-wrap: pretty;
}

h1, .page-title, .category-title { font: 400 32px/1.14 var(--av-serif); color: var(--av-green); margin: 0 0 12px; }
h2 { font: 400 26px/1.18 var(--av-serif); color: var(--av-green); margin: 0 0 10px; }
h3 { font: 400 21px/1.25 var(--av-serif); color: var(--av-green); margin: 0 0 8px; }
h4 { font: 400 18px/1.3  var(--av-serif); color: var(--av-green); margin: 0 0 8px; }
h5 { font: 700 14px/1.4  var(--av-sans);  color: var(--av-green); margin: 0 0 6px; }

@media (max-width: 767px) {
  body { font-size: 14px; }
  h1, .page-title, .category-title { font-size: 26px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
}

.av-label {                       /* overtitel boven een sectie */
  display: block;
  font: 400 11px/1 var(--av-sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--av-accent);
}
.av-muted { color: var(--av-text-soft); }

/* 4 — HEADER ============================================================== */

#header-holder { background: var(--av-bg); border-bottom: 1px solid var(--av-line); }

#header-content {
  display: flex; align-items: center; gap: 26px;
  height: 82px; box-sizing: border-box;   /* vast — CLS */
}
/* flex-basis: auto is nódig: style.css pint .header-left op `flex: 0 0 85px`
   en `.logo { max-width: 100% }` knijpt het logo dan tot 65 px — verhouding
   2,0 in plaats van 4,39. `flex-shrink: 0` alleen zet geen basis en verliest.
   Melding Claude Code, 31 juli. */
#header-content .header-left  { flex: 0 0 auto; }
#header-content .header-center{ flex: 1; min-width: 0; }
#header-content .header-right { flex-shrink: 0; display: flex; align-items: center; gap: 22px; }

#header-content .header-left img { display: block; width: 140px; height: 32px; }

/* notificatiebalk bovenaan */
.notification-bar, #notification {
  height: 38px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 36px;
  background: var(--av-green); color: var(--av-on-green);
  font: 400 12.5px/1 var(--av-sans);
}
#notification { position: fixed; top: 0; left: 0; right: 0; z-index: 90; }

/* zoekveld — was hidden-sm hidden-xs hidden-xxs, zie Handoff §7.1 */
.search.av-search { flex: 1; position: relative; }
.av-search .searchbox {
  width: 100%; height: 48px; box-sizing: border-box;
  border: 2px solid var(--av-green); background: #fff;
  padding: 0 96px 0 44px;
  font: 400 15.5px/1 var(--av-sans); color: var(--av-green);
}
.av-search .searchbox::placeholder { color: var(--av-text-soft); }
.av-search .av-search-icon {
  position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--av-green); pointer-events: none;
}
.av-search .av-search-submit {
  position: absolute; right: 2px; top: 2px; bottom: 2px;
  padding: 0 26px; border: 0;
  background: var(--av-green); color: var(--av-bg);
  font: 400 14px/1 var(--av-sans); letter-spacing: .02em; cursor: pointer;
}

/* suggestielaag — overlay, duwt niets omlaag */
.searchcontent {
  /* width: auto is nódig: style.css zet hier `width: 400px`, en met een
     expliciete width negeert de browser `right`. Melding Claude Code, 31 juli. */
  position: absolute; z-index: 60; left: 0; right: 0; width: auto; top: calc(100% + 6px);
  background: #fff; border: 1px solid var(--av-line-strong);
  box-shadow: 0 24px 60px rgba(31,61,58,.18);
  padding: 18px 20px;
}
.searchcontent .noresults {        /* naam en nesting ongewijzigd — briefing 3.2 */
  display: block; padding: 14px 0;
  font: 400 14px/1.5 var(--av-sans); color: var(--av-text);
}
.searchcontent .av-suggest-group + .av-suggest-group { border-top: 1px solid var(--av-line); margin-top: 12px; padding-top: 12px; }
.searchcontent .av-suggest-head {
  font: 400 11px/1 var(--av-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--av-text-soft); margin-bottom: 8px;
}
.searchcontent .av-suggest-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  padding: 8px 0; color: var(--av-green);
}
.searchcontent .av-suggest-row img { width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--av-line); }
.searchcontent .av-suggest-row .av-price { font: 700 16px/1 var(--av-sans); color: var(--av-green); }

/* De productsuggesties komen uit global.js en hebben een eigen vorm
   (.searchresults > ul > li met .result-col, h4, .price, en .more).
   Die vorm blijft; hij wordt hier opgemaakt zodat hij naast onze
   .av-suggest-group niet uit de toon valt. Besluit 31 juli, optie A. */
.searchcontent .searchresults ul { list-style: none; margin: 0; padding: 0; }
/* De <a> zit bínnen de tweede .result-col, niet om de rij heen — het raster
   hoort dus op de li. Melding Claude Code, 31 juli. */
.searchcontent .searchresults li {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 16px; align-items: center;
  border-bottom: 1px solid var(--av-line); padding: 8px 0;
}
.searchcontent .searchresults li:last-child { border-bottom: 0; }
.searchcontent .searchresults li a { color: var(--av-green); text-decoration: none; }
.searchcontent .searchresults li a:hover { color: var(--av-accent); }
.searchcontent .searchresults .result-col { min-width: 0; }
.searchcontent .searchresults .result-col:first-child { width: 64px; }
.searchcontent .searchresults .result-col img {
  width: 64px; height: 64px; object-fit: cover; border: 1px solid var(--av-line); display: block;
}
.searchcontent .searchresults h4 {
  margin: 0; font: 400 14.5px/1.4 var(--av-sans); color: var(--av-green); text-wrap: pretty;
}
/* De `li` moet erin: style.css heeft `.searchcontent .searchresults li .price`
   met #999 (contrast 2,85) en dat is specifieker. Melding Claude Code, 31 juli. */
.searchcontent .searchresults li .price { font: 700 16px/1 var(--av-sans); color: var(--av-green); }
.searchcontent .more {
  border-top: 1px solid var(--av-line); margin-top: 12px; padding-top: 12px;
  font: 400 13.5px/1 var(--av-sans);
}
.searchcontent .more a { color: var(--av-green-link); text-decoration: underline; }
.searchcontent .more span { color: var(--av-text-soft); }

/* style.css zet margin-right: 25px op elke .header-link, ook de laatste — dat
   komt bovenop onze gap en kost 141 px. Melding Claude Code, 31 juli. */
.header-right .header-link { margin-right: 0; }
.header-right a { color: #3d4f4b; font: 400 13.5px/1 var(--av-sans); }
.header-right a.cart.header-link { font-weight: 700; color: var(--av-green); display: flex; align-items: center; gap: 8px; }
.av-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; border-radius: 99px;
  background: var(--av-accent); color: #fff; font: 700 11px/1 var(--av-sans);
}

@media (max-width: 767px) {
  #header-content { height: auto; min-height: 54px; flex-wrap: wrap; row-gap: 12px; padding-bottom: 12px; }
  #header-content .header-left img { width: 96px; height: 22px; }
  /* order/flex-basis horen op het fléxitem: .header-center is het directe kind
     van #header-content, niet het zoekveld zelf. Melding Claude Code, 31 juli. */
  #header-content .header-center { order: 3; flex-basis: 100%; max-width: none; }
  .search.av-search { width: 100%; }
  /* De knop is 77 px breed en staat 2 px van de rand, dus hij bedekt 79 px:
     padding-right moet 80 zijn, niet minder. Gemeten door Claude Code, 31 juli.
     De placeholder is daarom ingekort tot "Zoek op product of merk" (±152 px);
     335 − 80 − 38 laat 217 px. */
  #header-content .header-left img { width: 96px; height: 22px; }
  .av-search .searchbox { height: 46px; font-size: 14px; padding: 0 80px 0 38px; }
  .av-search .av-search-icon { left: 12px; width: 17px; height: 17px; }
  .av-search .av-search-submit { padding: 0 16px; font-size: 13px; }
  .notification-bar, #notification { height: 30px; font-size: 11.5px; gap: 0; }
}

/* 5 — NAVIGATIE =========================================================== */

.subheader-holder { border-bottom: 1px solid var(--av-line); }

/* .subheader is bij Nova één flexrij met `nowrap` over nav, links en USP's.
   Zonder deze drie regels staat de USP-strook náást de navigatie: op desktop
   458 px voor vier vakken, dus 87 px tekst per vak — vier regels in een vak van
   51 px. Op de testshop onzichtbaar met Nova's demotekst, op de live winkel
   meteen. Geldt op élke breedte. Melding Claude Code, 31 juli. */
.subheader { flex-wrap: wrap; }
.subheader-nav { flex: 0 0 100%; }
.subheader-usps { flex: 0 0 100%; }
.subheader-nav {
  display: flex; align-items: stretch; gap: 24px;
  height: 56px; box-sizing: border-box;     /* vast — CLS */
  font: 400 13.5px/1 var(--av-sans); letter-spacing: .02em;
}
.subheader-nav > * { display: flex; align-items: center; color: #2f4642; }
.categories-button.main {
  display: flex; align-items: center; gap: 10px; padding: 0 16px;
  background: var(--av-green); color: var(--av-bg); cursor: pointer;
}
.categories-button.main .av-bars { display: flex; flex-direction: column; gap: 3px; }
.categories-button.main .av-bars i { display: block; width: 13px; height: 1.6px; background: var(--av-bg); }
/* Eigen klasse, géén .nav-main-holder: die is bij Nova een verborgen,
   absoluut gepositioneerd uitklapmenu (visibility: hidden, position: absolute)
   dat aan dezelfde klik hangt. Melding Claude Code, 31 juli — die erfenis
   willen we niet, dus de rij is van ons. */
.av-nav-row { display: flex; align-items: stretch; gap: 24px; }
.av-nav-row a { display: flex; align-items: center; color: #2f4642; }
.av-nav-row .av-sale { color: var(--av-accent); }

/* paneel met alle categorieën — overlay, twee panelen
   Herzien na de categorieboom van 30 juli: 13 zichtbare topcategorieën,
   waarvan Woonaccessoires er 23 heeft en Sfeer Thema's 17. Die passen niet
   in een kolommenraster. Dus: vaste rail links, inhoud rechts.
   Geen JavaScript — verborgen radio's schakelen. Vaste hoogte, dus geen CLS. */

.av-cat-panel {
  position: absolute; z-index: 70; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--av-line-strong);
  box-shadow: 0 30px 70px rgba(31,61,58,.2);
  height: 436px; box-sizing: border-box; overflow: hidden;
  display: none;
}
/* Openen zonder eigen JavaScript: global.js zet `.active` op de knop, en het
   paneel is zijn volgende broer. Melding Claude Code, 31 juli — daarmee is er
   geen extra handler nodig en verdwijnt het `hidden`-attribuut uit de markup. */
.categories-button.main.active ~ .av-cat-panel { display: block; }

/* Het aantal topcategorieën ligt NIET in de CSS vast: elke rij is een
   .av-cat-item met daarin zijn eigen radio, label en paneel, dus de schakeling
   loopt via broerselectors binnen dat item. Een categorie erbij is één
   .av-cat-item erbij — geen regel in de stylesheet. */
.av-cat-rail {
  width: 264px; height: 100%; box-sizing: border-box;
  border-right: 1px solid var(--av-line); background: var(--av-bg);
  overflow-y: auto; padding: 12px 0;
}
.av-cat-item input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.av-cat-item label {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  height: 40px; box-sizing: border-box; padding: 0 22px;
  font: 400 14px/1 var(--av-sans); color: #2f4642; cursor: pointer;
}
.av-cat-item label .av-arrow { color: #7d8783; }
.av-cat-rail .av-rail-split { margin: 10px 22px; border-top: 1px solid var(--av-line); }
/* Een ingang zonder subcategorieën is een gewone link, geen paneelschakelaar. */
.av-cat-item .av-cat-link {
  display: flex; align-items: center; height: 40px; padding: 0 22px;
  font: 400 14px/1 var(--av-sans); color: #2f4642;
}

.av-cat-item input:checked + label {
  background: #fff; color: var(--av-green); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--av-accent);
}
.av-cat-item label:focus-within { outline: 2px solid var(--av-green); outline-offset: -2px; }

.av-cat-pane {
  position: absolute; left: 264px; top: 0; right: 0; bottom: 0;
  padding: 24px 30px 28px; box-sizing: border-box; overflow-y: auto;
  display: none;
}
.av-cat-item input:checked ~ .av-cat-pane { display: block; }
.av-cat-pane .av-pane-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  border-bottom: 1px solid var(--av-line); padding-bottom: 12px; margin-bottom: 16px;
}
.av-cat-pane .av-pane-head strong { font: 400 24px/1.15 var(--av-serif); color: var(--av-green); }
.av-cat-pane .av-pane-head a { font: 400 13px/1 var(--av-sans); color: var(--av-accent); white-space: nowrap; }
.av-cat-pane .av-pane-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 28px; }
.av-cat-pane .av-pane-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 32px; font: 400 13.5px/1.4 var(--av-sans); color: #3d4f4b;
}
.av-cat-pane .av-pane-list a .av-sub { color: var(--av-text-soft); font-size: 11.5px; }

@media (max-width: 991px) {
  /* Op mobiel géén absolute rail met absolute panelen: dan valt het paneel uit
     de stroom (hoogte zakt naar de padding) én knipt de horizontale scroller de
     panelen af. Melding Claude Code, 31 juli.

     In plaats daarvan: .av-cat-item wordt `display: contents`, zodat label én
     paneel directe flex-kinderen van de rail zijn. De chips wrappen op rijen en
     het gekozen paneel zakt met `order` en `flex-basis: 100%` onder ze allemaal.
     Alles blijft in de stroom, dus niets wordt geknipt en de hoogte volgt de
     inhoud. De broerselectors werken ongewijzigd — die kijken naar de DOM. */
  .av-cat-panel {
    height: auto; max-height: 82vh; overflow-y: auto; padding-top: 0;
    -webkit-overflow-scrolling: touch;
  }
  .av-cat-rail {
    position: static; width: auto; height: auto; overflow: visible;
    border-right: 0; background: var(--av-bg);
    display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px;
  }
  .av-cat-item { display: contents; }
  .av-cat-item label,
  .av-cat-item .av-cat-link {
    height: 38px; padding: 0 14px; white-space: nowrap;
    border: 1px solid var(--av-line-strong); background: #fff;
  }
  .av-cat-item input:checked + label { box-shadow: none; background: var(--av-green); color: var(--av-bg); }
  .av-cat-item label .av-arrow, .av-cat-rail .av-rail-split { display: none; }
  .av-cat-pane {
    position: static; order: 99; flex-basis: 100%;
    padding: 16px 2px 6px; max-height: none; overflow: visible;
  }
  .av-cat-pane .av-pane-list { grid-template-columns: 1fr; }
}

/* 6 — USP-STROOK ========================================================== */
/* Slider eruit: vier vakken in een grid met vaste hoogte. CLS-verdachte 1. */

.subheader-usps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  height: 52px; box-sizing: border-box;
  background: var(--av-line); border-bottom: 1px solid var(--av-line);
}
/* De holder verdwijnt uit de rasterrekening, zodat zijn vier vakken zélf de
   grid-items worden. Specificiteit (0,2,0) is nódig: `.subheader-usps > *`
   hieronder is even specifiek en zou anders winnen op volgorde — en dan wordt
   de holder één item met vier vakken erin geperst. Melding Claude Code, 31 juli. */
.subheader-usps > .usps-slider-holder { display: contents; }

/* Beide niveaus, want met `display: contents` is een vak geen DOM-kind van
   .subheader-usps maar wél een grid-item. */
.subheader-usps > *,
.subheader-usps .usp-block {
  background: var(--av-sand);
  display: flex; align-items: center; justify-content: center; gap: 9px;
  font: 400 13px/1 var(--av-sans); color: #3d4f4b;
}
.subheader-usps .av-dot { width: 6px; height: 6px; border-radius: 99px; background: var(--av-stock); }

@media (max-width: 991px) {
  /* De subheader blijft op mobiel staan, maar dan alleen de categorieënknop:
     die is daar de hele categorienavigatie en vervangt #mobilenav. De rij
     topcategorieën valt weg — die past niet en zoeken is de hoofdnavigatie.

     .subheader is bij Nova een flexrij met `nowrap`: zonder de drie regels
     hieronder staat de knop náást de USP-strook en houdt die er 129 px van
     over. Melding Claude Code, 31 juli. */
  .subheader { flex-wrap: wrap; }
  .subheader-nav { flex: 0 0 100%; }
  .subheader-usps { flex: 0 0 100%; }
  .subheader-nav .av-nav-row { display: none; }
  .subheader-nav .categories-button.main { width: 100%; justify-content: center; }

  /* NIET AANZETTEN voordat §1.4 (#av-cat-panel) in de template staat:
     #mobilenav is tot dat moment de énige categorienavigatie op mobiel.
     Claude Code zet deze regel aan bij het plaatsen van het paneel.
     #mobilenav { display: none !important; } */

  .subheader-usps { grid-template-columns: repeat(2, 1fr); height: 84px; }
  .subheader-usps > *,
  .subheader-usps .usp-block { font-size: 12px; text-align: center; padding: 0 10px; }
}

/* 7 — HOMEPAGE ============================================================ */

.av-home { display: grid; grid-template-columns: 252px 1fr; }

/* categoriekolom links — server-side gerenderd, vaste regelhoogte */
.av-cat-column { border-right: 1px solid var(--av-line); padding: 18px 0 24px; }
.av-cat-column .av-col-title {
  padding: 0 22px 12px;
  font: 400 11px/1 var(--av-sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--av-text-soft);
}
.av-cat-column li {
  height: 42px; box-sizing: border-box;      /* vast — CLS */
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 22px; border-bottom: 1px solid #f4efe6;
  font: 400 14px/1 var(--av-sans);
}
.av-cat-column li a { color: #2f4642; }
.av-cat-column li .av-count { font-size: 11.5px; color: var(--av-text-soft); }
.av-cat-column .av-all {
  display: flex; align-items: center; justify-content: space-between;
  height: 52px; box-sizing: border-box; margin: 16px 22px 0; padding: 0 14px;
  background: var(--av-mint); color: var(--av-green);
  font: 700 13.5px/1 var(--av-sans);
}
.av-cat-column .av-hint { margin: 14px 22px 0; font: 400 12.5px/1.55 var(--av-sans); color: var(--av-text-soft); }

/* hero */
/* style.css zet `float: left; width: 33.33%` op .banners-home-block: in ons
   grid telt de float niet mee maar de breedte wél (hero werd 336 i.p.v. 1008 px).
   Melding Claude Code, 2 augustus. */
.av-home-main > .banners-home-block { width: 100%; float: none; }

.av-hero { position: relative; height: 420px; display: flex; align-items: center; padding: 0 48px; }
.av-hero img { position: absolute; inset: 0; width: 100%; height: 420px; object-fit: cover; object-position: right center; }
.av-hero .av-hero-card {
  position: relative; max-width: 400px;
  background: rgba(253,251,247,.9); padding: 32px;
  display: flex; flex-direction: column; gap: 13px;
}
.av-hero h2 { font: 400 40px/1.08 var(--av-serif); margin: 0; }

/* banners-home-block: vaste hoogte, geen slider die de pagina duwt */
.av-home-main > .banners-home-block { height: 420px; box-sizing: border-box; overflow: hidden; }

/* categorietegels — doorklikmap versus eindcategorie */
.av-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 0 var(--av-pad); }
.av-tile { position: relative; height: 214px; box-sizing: border-box; display: flex; align-items: flex-end; padding: 14px; overflow: hidden; }
.av-tile img { position: absolute; inset: 0; width: 100%; height: 214px; object-fit: cover; }
.av-tile .av-tile-label {
  position: relative; background: var(--av-bg); padding: 9px 14px;
  font: 400 18px/1.2 var(--av-serif); color: var(--av-green);
}
.av-tile--map {                     /* category.type == 'index' */
  border: 1px solid var(--av-line-strong); background: var(--av-sand);
  padding: 16px; display: flex; flex-direction: column; gap: 9px; align-items: stretch;
}
.av-tile--map strong { font: 700 15px/1.3 var(--av-sans); color: var(--av-green); }
.av-tile--map a { font: 400 13px/1.3 var(--av-sans); color: var(--av-text); }
.av-tile .av-tile-subs { position: relative; display: block; margin-top: 4px; font: 400 11.5px/1.4 var(--av-sans); color: var(--av-text); }
.av-tile--map .av-more { margin-top: auto; font: 700 12.5px/1 var(--av-sans); color: var(--av-accent); }

/* sectiekop: titel links, doorlink rechts */
.av-sec-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  padding: 46px var(--av-pad) 16px;
}
/* Niet scopen op .av-sec-head: av-eyebrow staat ook in de herokaart, het
   uitgelichte blok en de winkelbeoordeling, en die renderden als kale
   15px-tekst (melding Claude Code, 2 augustus). */
.av-eyebrow {
  display: block; font: 400 11px/1 var(--av-sans); letter-spacing: .2em;
  text-transform: uppercase; color: var(--av-accent);
}
.av-sec-head .av-eyebrow { margin-bottom: 8px; }
.av-sec-head h2 { margin: 0; }
.av-link { font: 400 13.5px/1 var(--av-sans); color: var(--av-green-link); border-bottom: 1px solid var(--av-accent); padding-bottom: 3px; white-space: nowrap; }

/* productrij op de homepage — zelfde kaart als de categoriepagina */
.av-row-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 0 var(--av-pad); }
/* De rij hergebruikt products.rain, en die kaarten dragen col-md-3-wrappers.
   Scoped op .av-row-products, dus raakt geen bl*-grid. Melding Claude Code, 2 augustus. */
.av-row-products > [class*="col-"] { width: auto; padding: 0; float: none; }

/* uitgelicht blok en magazine */
.av-feature { display: grid; grid-template-columns: 1fr 1fr; background: var(--av-mint); margin-top: 48px; }
.av-feature .av-feature-body { padding: 52px 48px; display: flex; flex-direction: column; gap: 16px; justify-content: center; }
.av-feature img { width: 100%; height: 340px; object-fit: cover; display: block; }
/* Zonder deze regel rekt de link op tot kolombreedte (flexitem) en loopt de
   onderstreping over de hele kolom. Melding Claude Code, 2 augustus — tweede keer;
   hij stond in Reactie 24 wel in de tekst maar niet in het bestand. */
.av-feature .av-feature-body .av-link { align-self: flex-start; }

.av-magazine { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 48px var(--av-pad) 0; }
.av-magazine img { width: 100%; height: 170px; object-fit: cover; display: block; }
.av-magazine time { font: 400 11.5px/1 var(--av-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--av-text-soft); }

/* Winkelbeoordeling — homepage, boven de nieuwsbriefstrook (besluit 2 augustus).
   De widgethouder heeft een váste maat: 400×288, de gemeten afmeting van de
   WebwinkelKeur ballon-middelgroot. Het element wordt door een extern script
   gevuld; zonder reservering duwt het bij het laden de nieuwsbrief eronder weg.
   Zand als vlak, zodat de sectie zich losmaakt van het magazine erboven en de
   donkergroene strook eronder. */
.av-shopreviews {
  background: var(--av-sand); padding: 36px var(--av-pad);
  display: grid; grid-template-columns: 1fr auto; gap: 36px; align-items: center;
}
.av-shopreviews-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.av-shopreviews-body h2 { margin: 0; }
.av-shopreviews-body p  { margin: 0; max-width: 52ch; text-wrap: pretty; }
/* De WebwinkelKeur-ballon is 96×48 — hermeten mét shadow-controle, 2 augustus.
   Het spoor is `auto`, niet een vaste kolom: bij deze maat zou een brede kolom
   een gat zijn. De houder houdt wél een harde min-hoogte, want het element
   wordt door een extern script gevuld. Rendert er ooit een rijker blok
   (badges/reviews), dan is dit de plek — dan gaat het spoor naar de gemeten
   breedte en de min-hoogte mee. */
.av-shopreviews-widget { min-width: 96px; min-height: 48px; }

/* nieuwsbrief */
.av-newsletter { background: var(--av-green); padding: 44px var(--av-pad); display: flex; align-items: center; justify-content: space-between; gap: 44px; }
.av-newsletter h2 { color: var(--av-bg); }
.av-newsletter p  { color: #adbfba; margin: 0; }
.av-newsletter form { display: flex; gap: 10px; flex: 0 1 520px; }
.av-newsletter input[type="email"] { flex: 1; min-width: 0; height: 50px; border: 0; padding: 0 16px; font: 400 14px/1 var(--av-sans); }

@media (max-width: 991px) {
  .av-home { grid-template-columns: 1fr; }
  .av-cat-column { display: none; }            /* mobiel: paneel via de menuknop */
  /* style.css zet `float: left; width: 33.33%` op .banners-home-block: in ons
   grid telt de float niet mee maar de breedte wél (hero werd 336 i.p.v. 1008 px).
   Melding Claude Code, 2 augustus. */
.av-home-main > .banners-home-block { width: 100%; float: none; }

.av-hero { height: 360px; padding: 0; align-items: flex-end; }
  .av-hero img { height: 360px; object-position: 52% 74%; }
  .av-hero .av-hero-card { max-width: none; width: 100%; margin: var(--av-pad-m); padding: 14px 16px; }
  .av-hero h2 { font-size: 26px; }
  .av-tiles, .av-magazine { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--av-pad-m); }
  .av-tile { height: 132px; padding: 10px; }
  .av-tile img { height: 132px; }
  .av-tile .av-tile-label { font-size: 15px; padding: 7px 11px; }
  .av-sec-head { padding: 30px var(--av-pad-m) 12px; }
  .av-row-products { grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 var(--av-pad-m); }
  .av-feature { grid-template-columns: 1fr; }
  .av-feature .av-feature-body { padding: 28px var(--av-pad-m); }
  .av-newsletter { flex-direction: column; align-items: stretch; gap: 14px; padding: 24px var(--av-pad-m); }
  .av-shopreviews { grid-template-columns: 1fr; gap: 18px; padding: 28px var(--av-pad-m); }
}

/* 8 — PRODUCTGRID EN -KAART =============================================== */

.collection-products-row.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.collection-products-row.product-grid > [class*="col-"] { width: auto; float: none; padding: 0; }
.collection-products-row .cf { display: none; }        /* Bootstrap-clearfixes niet meer nodig */

.product-block-holder { background: #fff; border: 1px solid var(--av-line); height: 100%; }
.product-block { display: flex; flex-direction: column; height: 100%; text-align: left; }

.product-block-image { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.product-block-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Tweede foto bij muis-over. Wordt door global.js gevuld uit hetzelfde
   JSON-verzoek, dus hij kost niets bij het laden. Geen transitie op mobiel —
   daar is geen hover en blijft hij onzichtbaar. */
.product-block-image .himage {
  position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.product-block-image .himage img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-block-holder:hover .product-block-image .himage { opacity: 1; }
@media (hover: none) { .product-block-image .himage { display: none; } }

.product-block .brand {
  font: 400 11px/1 var(--av-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--av-text-soft); padding: 14px 14px 0;
}
/* De titel zit in een kop (h2/h3, afhankelijk van de context) met daarin de
   link. Beide selectors, zodat het werkt met én zonder kop. */
.product-block h2, .product-block h3, .product-block h4 { margin: 0; }
.product-block h2 a.title, .product-block h3 a.title, .product-block h4 a.title,
.product-block a.title {
  display: block; padding: 7px 14px 0; min-height: 38px;
  font: 700 13.5px/1.4 var(--av-sans); color: var(--av-green);
}
.product-block-desc { padding: 7px 14px 0; }

/* VERVALLEN op de kaart (besluit 31 juli): binnen de grid-lus bestaat er geen
   voorraadveld — global.js vult dit element pas bij mouseenter, en op mobiel
   nooit. Ruimte reserveren voor iets dat 61% van de bezoekers niet ziet is
   verkeerd, dus de div gaat uit de markup. De regel blijft staan voor het
   geval het veld ooit server-side beschikbaar komt; zonder element doet hij
   niets. Zie Reactie 22 §1. */
.product-block-stock {
  display: block; padding: 0 14px; margin-top: auto;
  min-height: 0;
  font: 400 12.5px/1.4 var(--av-sans); color: var(--av-stock);
  text-wrap: pretty;
}
.product-block-stock--out { color: var(--av-accent); }

.product-block-price {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 4px 14px 14px;
  font: 700 17px/1 var(--av-sans); color: var(--av-green);
}
.product-block-price .av-old { font: 400 13px/1 var(--av-sans); color: var(--av-text-soft); text-decoration: line-through; }

/* Sterren — alleen renderen als het product een score heeft.
   Het cijfer is de scóre ("4,5"), niet het aantal reviews: dat aantal bestaat
   niet in de grid-lus (gemeten door Claude Code, 1 augustus). De sterrenkleur
   haalt daarom zelfstandig AA — 5,08 op #fdfbf7, 4,57 op het donkerste
   tekstvlak — zodat hij ook zonder cijfer ernaast door de norm komt. */
.av-stars {
  display: flex; align-items: center; gap: 7px;
  padding: 0 14px; font: 400 12.5px/1 var(--av-sans); color: var(--av-star);
}
.av-stars .av-stars-icons { display: inline-flex; gap: 1px; }
.av-stars .av-stars-score { font-weight: 700; color: var(--av-green); }
.av-stars .av-stars-count { color: var(--av-text-soft); }

/* label en snelkoppelingen op de afbeelding */
.product-label.highlight-bg {
  position: absolute; top: 10px; left: 10px; transform: none;   /* niet gedraaid */
  background: var(--av-accent); color: #fff;
  padding: 4px 9px; font: 700 10.5px/1 var(--av-sans);
}
.product-block-quick {
  position: absolute; right: 10px; bottom: 10px;
  background: rgba(255,255,255,.94); border: 1px solid #e4ddd0;
  padding: 7px 11px; font: 700 11.5px/1 var(--av-sans); color: var(--av-green-link);
}
.product-block-quick.wishlist { display: none; }   /* buiten de kaart, in de snelweergave */
/* .compare is geschrapt (besluit 31 juli) — die knop hoort niet meer in de markup */

@media (max-width: 767px) {
  .collection-products-row.product-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-block h2 a.title, .product-block h3 a.title, .product-block h4 a.title,
  .product-block a.title { font-size: 13px; }
  .product-block-stock { font-size: 11.5px; }
  .product-block-price { font-size: 16px; }
}

/* 9 — CATEGORIEPAGINA ===================================================== */

#collection-container.collection { padding-bottom: 26px; }
.cat-top-holder { display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.cat-top-right h1 { margin: 0; }
.cat-top-left p { max-width: 660px; font: 400 14.5px/1.6 var(--av-sans); color: var(--av-text); }

/* de container draagt op categoriepagina's al de sorteerder — niet leeg aannemen */
.custom-filters-holder { display: flex; flex-direction: column; gap: 12px; padding: 14px 0 0; }
.custom-filters-holder > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

form#sort_filters.filters-top { display: flex; align-items: center; gap: 10px; margin: 0; }
form#sort_filters label { font: 400 13px/1 var(--av-sans); color: var(--av-text); }
form#sort_filters select {
  height: 44px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--av-line-strong); background: #fff;
  font: 400 13.5px/1 var(--av-sans); color: var(--av-green);
}

.custom-filters-selected { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid var(--av-line); padding-top: 11px; }
.custom-filters-selected a, .av-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--av-mint); padding: 8px 12px;
  font: 400 12.5px/1 var(--av-sans); color: var(--av-green);
}
.custom-filters-selected .av-clear { background: none; padding: 8px 0; color: var(--av-accent); }

/* categorietegels op een index-pagina */
.container.catalog .category { padding: 0; }
.container.catalog .category a { display: block; }

/* paginering */
.collection-pagination { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 8px; }
.collection-pagination .items { font: 400 13px/1 var(--av-sans); color: var(--av-text); }
.collection-pagination .paginate ul { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.collection-pagination .paginate li a {
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; box-sizing: border-box; padding: 0 12px;
  border: 1px solid var(--av-line-strong); background: #fff;
  font: 400 13.5px/1 var(--av-sans); color: #2f4642;
}
.collection-pagination .paginate li.number.active a,
.collection-pagination .paginate li a.highlight-bg { background: var(--av-green); border-color: var(--av-green); color: var(--av-bg); font-weight: 700; }

/* 10 — FILTER-FLYOUT ====================================================== */
/* Bestaande fancy-box herstyled. Overlay, dus geen CLS. */

.filter-toggle.av-filter-toggle {
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; box-sizing: border-box; padding: 0 18px;
  background: var(--av-green); color: var(--av-bg);
  font: 400 13.5px/1 var(--av-sans); letter-spacing: .02em; cursor: pointer;
}
.av-filter-toggle .av-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; border-radius: 99px;
  background: var(--av-accent); color: #fff; font: 700 10.5px/1 var(--av-sans);
}

/* GEEN inset/display op de houder: Nova parkeert de lade zelf op `right: -550px`
   en schuift hem in met een animatie. `inset: 0` trok hem permanent in beeld en
   botste met die animatie. De dimlaag hangt daarom aan Nova's eigen
   html.fancy-active. Melding Claude Code, 2 augustus. */
.fancy-box.fancy-filters-holder { z-index: 80; }

/* De dimlaag hangt aan Nova's eigen html.fancy-active en staat als eigen laag
   ónder de lades — zo raakt hij geen enkele houder en botst hij niet met de
   animatie. Hij zegt niet wélke lade open is, maar dat hoeft ook niet: er kan
   er maar één tegelijk open staan. */
html.fancy-active::after {
  content: ""; position: fixed; inset: 0; z-index: 79;
  background: rgba(31,61,58,.34); pointer-events: none;
}
.fancy-filters.collection {
  position: absolute; right: 0; top: 0; bottom: 0; width: 420px; max-width: 100%;
  background: var(--av-bg); overflow-y: auto; padding: 24px;
}
.fancy-filters .x.small { float: right; font: 400 20px/1 var(--av-sans); color: var(--av-text-soft); cursor: pointer; }
.fancy-filters h4 { margin-bottom: 18px; }

.custom_filter_form .filter-holder { display: flex; flex-direction: column; gap: 16px; }
.custom-filter-col { display: flex; flex-direction: column; gap: 16px; }
.price-filter-block, .custom-filter-block { border-top: 1px solid var(--av-line); padding-top: 16px; }
.price-filter-block h5, .custom-filter-block h5 {
  font: 400 11px/1 var(--av-sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--av-text-soft); margin-bottom: 11px;
}
.sidebar-filter-slider .collection-filter-price { height: 4px; background: #e4ddd0; position: relative; margin: 12px 0; }
.price-filter-range { display: flex; align-items: center; justify-content: space-between; font: 400 13px/1 var(--av-sans); color: var(--av-text); }
.price-filter-range .min, .price-filter-range .max { border: 1px solid var(--av-line-strong); background: #fff; padding: 9px 12px; }

ul.filter-values { list-style: none; margin: 0; padding: 0; }
ul.filter-values li { display: flex; align-items: center; gap: 11px; height: 38px; font: 400 13.5px/1 var(--av-sans); color: var(--av-green); }
input.fancy-radio { width: 17px; height: 17px; accent-color: var(--av-green); flex-shrink: 0; }

.av-filter-actions { display: flex; gap: 10px; border-top: 1px solid var(--av-line); padding-top: 16px; margin-top: 16px; }

@media (max-width: 767px) {
  .fancy-filters.collection { width: 100%; }
  .custom-filters-holder > div:first-child { flex-direction: column; align-items: stretch; gap: 9px; }
  .av-filter-toggle, form#sort_filters select { height: 46px; }
  form#sort_filters { flex: 1; }
  form#sort_filters select { width: 100%; }
  .av-mobile-actions { display: flex; gap: 9px; }
  .av-mobile-actions > * { flex: 1; justify-content: center; }
}

/* 11 — ZOEKRESULTATEN ===================================================== */

#collection-container h1.page-title { margin-bottom: 14px; }

/* categoriechips uit de zoekindex — eigen klasse, zodat ze losstaan van
   .custom-filters-selected (gekozen filterwaarden) op een categoriepagina */
.av-search-categories { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; border-top: 1px solid var(--av-line); padding-top: 11px; }
.av-search-categories .av-chips-label { font: 400 12.5px/1 var(--av-sans); color: var(--av-text-soft); }

/* nul resultaten op de resultatenpagina — ándere klasse dan .searchcontent .noresults */
.av-search-empty { background: var(--av-bg); border: 1px solid var(--av-line-strong); padding: 26px; max-width: 560px; }
.av-search-empty .av-didyoumean { background: var(--av-mint); padding: 15px; margin: 14px 0; font: 400 14px/1.5 var(--av-sans); color: var(--av-text); }
.av-search-empty .av-terms { display: flex; flex-wrap: wrap; gap: 7px; }
.av-search-empty .av-terms a { background: #f2efe8; padding: 8px 12px; font: 400 13px/1 var(--av-sans); color: #3d4f4b; }
.av-search-empty .av-help { border-top: 1px solid var(--av-line); padding-top: 14px; margin-top: 16px; }

/* 12 — PRODUCTPAGINA ====================================================== */

.container.productpage .product-title h1 { margin: 0 0 8px; font-size: 36px; }
/* RAAMWERK — herzien 2 augustus, en opnieuw op 2 augustus tegen de gemeten DOM.

   Twee keer misgegaan, twee verschillende lagen. Eerst zette ik het grid op
   .content-box (daar zit een div.row tussen). Daarna op een col-laag die niet
   bestaat: .productpage-left en -right dragen de col-klassen zélf, ze zitten
   er niet in. De juiste laag is de row.

   Drie kinderen, geen twee: er staat een aparte thumbs-kolom vóór
   productpage-left, alleen zichtbaar boven 992 px.

   Het thumbs-spoor krijgt een VASTE breedte, geen auto. Met auto meet de
   browser de inhoud, en die inhoud is een swiper die zich oprekt — gemeten
   634 px in plaats van 107. Een miniatuur is 76 px plus 2×1 px rand = 78;
   met 5 px lucht is 88 px het spoor, en de col-padding gaat eraf.

   :has(> .productpage-left) wijst de laag aan op inhoud in plaats van op
   klassenaam, zodat hij blijft kloppen als Nova de col-* hernoemt. */
.container.productpage .content-box { padding: 18px 0 32px; }
.container.productpage .content-box > .row:has(> .productpage-left) {
  display: grid; grid-template-columns: 88px 1.1fr 1fr; gap: 36px;
  margin-left: 0; margin-right: 0;
}
/* De drie kolommen dragen Bootstrap-padding en style.css-floats. Allebei weg:
   het grid regelt de tussenruimte met gap. min-width:0 zodat een breed kind
   (de swiper) zijn spoor niet oprekt. */
.container.productpage .content-box > .row:has(> .productpage-left) > * {
  float: none; width: auto; min-width: 0; padding-left: 0; padding-right: 0;
}
/* Bootstraps .row draagt een clearfix op ::before/::after. In een grid zijn
   pseudo-elementen zélf grid-items, dus die ::before pakte spoor 1 en schoof
   alles op. Uitzetten. Melding Claude Code, 2 augustus.
   Geldt voor élk grid dat op een Bootstrap-.row komt te staan. */
.container.productpage .content-box > .row:has(> .productpage-left)::before,
.container.productpage .content-box > .row:has(> .productpage-left)::after { display: none; }

.thumbs-holder { display: flex; flex-direction: column; gap: 10px; }
.thumbs-holder img { width: 76px; height: 76px; object-fit: cover; border: 1px solid var(--av-line); display: block; }
.thumbs-holder .active img { border: 2px solid var(--av-green); }
/* De thumbs-strip is bij Nova ook een swiper. Begrenzen, anders duwt hij
   alsnog tegen het spoor aan. */
.thumbs-holder .swiper-container, .thumbs-holder .swiper-wrapper { max-width: 78px; }

/* GALERIJ — optie C, 2 augustus. Nova's swiper-DOM blijft staan: het wisselen van
   foto's, de pijlen en jquery-zoom blijven werken en wij schrijven geen JS. Alleen
   de éérste dia wordt een echt beeld met fetchpriority (zie markup/06 §6.2), zodat
   het LCP-element niet achter een lazy data-src wegvalt.

   De aspect-ratio staat op de houder, niet op de img: de swiper vervangt het
   beeldelement, de houder blijft. Zo reserveert de ruimte zich ook als de swiper
   nog niet geïnitialiseerd is — dat is de CLS-winst. */
.productpage-left .av-main-image,
.productpage-left .swiper-productimage.product-image {
  flex: 1; min-width: 0; overflow: hidden; aspect-ratio: 4 / 5; background: var(--av-sand);
}
.productpage-left .av-main-image img,
.productpage-left .swiper-productimage.product-image img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* De pijlen van de hoofdbeeld-swiper in onze vormtaal. */
.productpage-left .swiper-button-next,
.productpage-left .swiper-button-prev {
  width: 40px; height: 40px; background: rgba(253,251,247,.94);
  border: 1px solid var(--av-line); color: var(--av-green); margin-top: -20px;
}

.productpage-right { display: flex; flex-direction: column; gap: 15px; }

/* prijs, voorraad en verzendtermijn bij elkaar, als gewone tekst — Merchant Center 6.12 */
.offer-holder { background: var(--av-mint); padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.offer-holder .av-price { font: 700 34px/1 var(--av-sans); color: var(--av-green); }
.offer-holder .av-price-old { font: 400 16px/1 var(--av-sans); color: var(--av-text-soft); text-decoration: line-through; margin-left: 12px; }
.offer-holder .av-vat { font: 400 13px/1 var(--av-sans); color: var(--av-text); }
.offer-holder .av-instock { display: flex; align-items: center; gap: 9px; font: 700 14px/1.4 var(--av-sans); color: #2f6b4a; }
.offer-holder .av-instock .av-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--av-stock); }

/* verzendregel: min-height op de langste variant, nooit afkappen */
.av-shipping-line {
  display: flex; align-items: flex-start; gap: 9px;
  min-height: 40px;
  font: 700 14px/1.4 var(--av-sans); color: var(--av-green); text-wrap: pretty;
}
.av-shipping-line svg { flex-shrink: 0; margin-top: 1px; color: var(--av-stock); }
.av-shipping-note { font: 400 13.5px/1.5 var(--av-sans); color: var(--av-text); text-wrap: pretty; }

/* keuzevelden — zichtbaar label, in het template gekoppeld met for/id */
#product_configure_form .av-field { display: flex; flex-direction: column; gap: 8px; }
#product_configure_form label {
  font: 700 12px/1 var(--av-sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--av-text-soft);
}
#product_configure_form select {
  height: 48px; box-sizing: border-box; padding: 0 14px;
  border: 1px solid var(--av-line-strong); background: #fff;
  font: 400 14px/1 var(--av-sans); color: var(--av-green);
}
.av-swatches { display: flex; gap: 8px; }
.av-swatches label { width: 40px; height: 40px; display: block; cursor: pointer; }
.av-swatches input:checked + span { outline: 2px solid var(--av-green); outline-offset: 0; }

/* aantal + toevoegen */
.av-buy { display: flex; gap: 11px; }
.av-qty {
  display: flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  border: 1px solid #d5cdbf; background: #fff; height: 52px; box-sizing: border-box;
}
.av-qty .qtyminus, .av-qty .qtyadd {
  width: 40px; height: 100%; display: flex; align-items: center; justify-content: center;
  font: 400 17px/1 var(--av-sans); color: var(--av-text); cursor: pointer;
}
.av-qty input.quantity {
  width: 40px; height: 100%; border: 0; border-left: 1px solid var(--av-line); border-right: 1px solid var(--av-line);
  text-align: center; font: 700 14px/1 var(--av-sans); color: var(--av-green);
}

/* tabs */
.av-tabs { border-top: 1px solid var(--av-line); display: flex; gap: 0; }
.av-tabs a { padding: 16px 22px; font: 400 14px/1 var(--av-sans); color: var(--av-text); }
.av-tabs a.active, .av-tabs a:focus { color: var(--av-green); font-weight: 700; border-bottom: 2px solid var(--av-green); }
#information.product-info, #specifications.embed-specs-holder, #reviews-panel { padding: 24px 0 32px; }

/* reviews in de pagina — alleen renderen bij reviews */
.av-reviews { background: var(--av-sand); padding: 26px var(--av-pad) 32px; display: grid; grid-template-columns: 1fr 300px; gap: 36px; }
.av-review { background: #fff; border: 1px solid var(--av-line); padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.av-review h3 { font: 700 14.5px/1.4 var(--av-sans); margin: 0; }
.av-review .av-author { font: 400 12.5px/1 var(--av-sans); color: var(--av-text-soft); margin-top: auto; }
.av-rating-bar { display: flex; align-items: center; gap: 10px; }
.av-rating-bar .av-track { flex: 1; height: 6px; background: #e4ddd0; position: relative; }
.av-rating-bar .av-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--av-star); }

.av-product-usps { display: flex; flex-wrap: wrap; gap: 20px; border-top: 1px solid var(--av-line); padding-top: 13px; font: 400 13px/1.5 var(--av-sans); color: var(--av-text); }
.av-score { display: flex; align-items: baseline; gap: 11px; margin: 10px 0 14px; }
.av-score strong { font: 700 40px/1 var(--av-sans); color: var(--av-green); }
.av-score span { font: 400 13px/1 var(--av-sans); color: var(--av-text); }

/* Gereserveerde plek voor de WebwinkelKeur-widget.
   De ballon-klein rendert 48 px hoog (gemeten Claude Code, 2 augustus); de
   oude reservering van 120/150 liet 72–100 px lucht staan. 56 px geeft 8 px
   speling voor het geval de widget ooit een regel bijkrijgt — groeit hij
   verder, dan schuift er iets en dat is precies wat de reservering moet
   voorkomen, dus liever iets ruim dan te krap. */
.av-widget-slot { width: 260px; height: 56px; box-sizing: border-box; }
.av-widget-slot--footer { width: 200px; height: 56px; }

/* De h4-koppen "Informatie"/"Specificaties" in de panelen zijn op mobiel de
   accordeonkop van Nova en moeten daar blijven; op desktop staan ze dubbelop
   met het tabblad erboven (melding Claude Code, 2 augustus). */
@media (min-width: 992px) {
  .product-info > h4,
  .embed-specs-holder > h4 { display: none; }
}

/* Sticky koopbalk — alleen mobiel.
   Het element bestaat op elke breedte; support.js zet `visible`/`mobile-visible`
   zodra de koopknop uit beeld raakt, óók op desktop. De basisregel mag dus geen
   `display: flex` zetten — anders staat de balk permanent in beeld (melding
   Claude Code, 2 augustus). `top: auto` neutraliseert style.css' `top: 70px`,
   dat de balk als desktop-tópbalk behandelt. */
.addtocart-sticky {
  display: none;
  position: fixed; left: 0; right: 0; top: auto; bottom: 0; z-index: 70;
  height: 72px; box-sizing: border-box;
  background: rgba(253,251,247,.97); border-top: 1px solid var(--av-line);
  align-items: center; gap: 10px; padding: 12px var(--av-pad-m);
}
/* De prijs in de balk staat buiten .offer-holder en heeft dus een eigen maat
   nodig; de knop ernaast krimpt niet mee. */
.addtocart-sticky > div { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.addtocart-sticky .av-price { font: 700 18px/1 var(--av-sans); color: var(--av-green); }
.addtocart-sticky .av-shipping-short {
  font: 400 12px/1.35 var(--av-sans); color: var(--av-text-soft);
  min-height: 0; text-wrap: pretty;
}
.addtocart-sticky .button { flex-shrink: 0; }
@media (min-width: 992px) {
  /* support.js zet mobile-visible ook op desktop — daar hoort de balk niet. */
  .addtocart-sticky,
  .addtocart-sticky.visible,
  .addtocart-sticky.mobile-visible { display: none !important; }
}

@media (max-width: 991px) {
  /* Onder 992 px verbergt Nova de thumbs-kolom zelf (hidden-sm/xs/xxs), dus
     het grid heeft daar twee kinderen: beeld en koopkolom, onder elkaar.
     Navigeren gaat op die maat met vegen en de swiper-stippen — dat is op een
     telefoon het gebaar dat mensen verwachten, en het scheelt een rij
     miniaturen van 88 px boven de vouw. */
  .container.productpage .content-box > .row:has(> .productpage-left) { grid-template-columns: 1fr; gap: 18px; }
  /* De verschijn-poort. `!important` omdat style.css `.mobile-visible` zelf op
     `block !important` zet — tweede uitzondering in dit bestand, met reden. */
  .addtocart-sticky.visible,
  .addtocart-sticky.mobile-visible { display: flex !important; }
  .container.productpage .product-title h1 { font-size: 26px; }
  .av-reviews { grid-template-columns: 1fr; padding: 20px var(--av-pad-m); }
  .offer-holder .av-price { font-size: 27px; }
  .av-tabs { flex-direction: column; }
  /* Nova's h4-koppen in de panelen zijn hier de accordeonkop — die blijven. */
  .av-tabs a { display: flex; justify-content: space-between; border-bottom: 1px solid #f4efe6; }
  body.productpage { padding-bottom: 72px; }     /* ruimte voor de sticky balk */
}

/* 13 — WINKELWAGEN ======================================================== */

.container.cart-custom h1 { margin-bottom: 18px; }

table.cart-products { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--av-line); }
table.cart-products th { background: var(--av-sand); font: 700 10px/1 var(--av-sans); letter-spacing: .1em; color: #4a5450; padding: 12px 16px; text-align: left; }
table.cart-products td { padding: 16px; border-bottom: 1px solid #f4efe6; vertical-align: middle; }
/* style.css pint de beeldcel op 100 px via .cart-custom .cart-products .image
   (0,3,0) — een kaal td.image-recept verliest daarvan. Melding Claude Code,
   2 augustus. */
.cart-custom table.cart-products td.image { width: 128px; padding: 16px; }
table.cart-products td.image img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--av-line); display: block; }
table.cart-products td.product .brand-txt { font: 400 11px/1 var(--av-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--av-text-soft); }
table.cart-products td.product h5 { margin: 5px 0 0; font: 700 14.5px/1.4 var(--av-sans); }
table.cart-products td.price { font: 400 14px/1 var(--av-sans); color: var(--av-text); }
table.cart-products td.price-total { font: 700 17px/1 var(--av-sans); color: var(--av-green); text-align: right; }
table.cart-products td.remove .x { color: var(--av-text-soft); cursor: pointer; }

.av-cart-empty { background: var(--av-bg); border: 1px solid var(--av-line-strong); padding: 26px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.av-cart-empty p { margin: 0; font: 400 14.5px/1.6 var(--av-sans); color: var(--av-text); }
table.cart-products td.product .av-variant { font: 400 12.5px/1 var(--av-sans); color: var(--av-text-soft); margin-top: 5px; }
table.cart-products td.product .av-stock-line { font: 400 12.5px/1.4 var(--av-sans); color: var(--av-stock); margin-top: 5px; }

.qty.qty-small {
  display: flex; align-items: center; flex-shrink: 0; white-space: nowrap;
  border: 1px solid #d5cdbf; background: #fff; width: 118px; height: 44px; box-sizing: border-box;
}
.qty.qty-small .qtyminus, .qty.qty-small .qtyadd {
  width: 38px; height: 100%; display: flex; align-items: center; justify-content: center;
  font: 400 17px/1 var(--av-sans); color: var(--av-text); cursor: pointer;
}
.qty.qty-small input.quantity.qty-fast {
  flex: 1; width: 100%; min-width: 0; border: 0; border-left: 1px solid var(--av-line); border-right: 1px solid var(--av-line);
  text-align: center; font: 700 14px/1 var(--av-sans); color: var(--av-green);
}

/* heet grijs, wordt zand — nooit onder #e4e4e4 */
.grey-block.cart-totals { background: var(--av-sand); border: 1px solid var(--av-line); padding: 20px; }
.grey-block.cart-totals table.totals { width: 100%; }
.grey-block.cart-totals table.totals td { padding: 5px 0; font: 400 14px/1 var(--av-sans); color: var(--av-text); }
.grey-block.cart-totals table.totals tr.no-border td { border-top: 1px solid var(--av-line-strong); padding-top: 11px; font: 700 20px/1 var(--av-sans); color: var(--av-green); }

/* gratis-verzendbalk — valt weg zonder gat als er geen drempel staat */
.freeshipping-bar { background: var(--av-mint); border: 1px solid #dbe3df; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.freeshipping-bar:empty { display: none; }
.freeshipping-bar .icon { color: var(--av-stock); }
.freeshipping-bar span { font: 700 13.5px/1.45 var(--av-sans); color: var(--av-green); }
.freeshipping-bar .av-progress { height: 6px; background: #d6ded8; position: relative; }
.freeshipping-bar .av-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--av-stock); display: block; }
.freeshipping-bar .av-suggestion { font: 400 12.5px/1.55 var(--av-sans); color: var(--av-text); }

a.cart-coupon, a.cart-shipping { display: inline-block; font: 400 13px/1 var(--av-sans); color: var(--av-green-link); }

/* heet gray-bg, wordt wit */
form#gui-form-discount.gray-bg { background: #fff; border: 1px solid var(--av-line); padding: 16px; }
form#gui-form-discount .input-group { display: flex; gap: 8px; }
form#gui-form-discount input.textfield {
  flex: 1; min-width: 0; height: 44px; box-sizing: border-box; padding: 0 13px;
  border: 1px solid var(--av-line-strong); font: 400 13.5px/1 var(--av-sans);
}

.payment-icons-holder { display: flex; flex-wrap: wrap; gap: 7px; }
.payment-icons { border: 1px solid var(--av-line); background: #fff; padding: 7px 11px; }

@media (max-width: 767px) {
  table.cart-products, table.cart-products tbody, table.cart-products tr, table.cart-products td { display: block; width: 100%; box-sizing: border-box; }
  table.cart-products thead { display: none; }
  table.cart-products tr { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #f4efe6; }
  table.cart-products td { border: 0; padding: 0; }
  table.cart-products td.image { grid-row: span 4; }
  table.cart-products td.image img { width: 76px; height: 76px; }
  .cart-custom table.cart-products td.image { width: auto; padding: 0; }

.qty.qty-small { height: 40px; width: 108px; }
}

/* 14 — MINI-WAGEN EN VENSTERS ============================================= */

/* Zelfde als de filterlade: houder ongemoeid, Nova doet het schuiven. */
.fancy-box.fancy-cart-holder { z-index: 80; }
.fancy-cart {
  position: absolute; right: 0; top: 0; bottom: 0; width: 400px; max-width: 100%;
  background: var(--av-bg); overflow-y: auto; padding: 20px;
}
.fancy-cart .x.small { float: right; font: 400 19px/1 var(--av-sans); color: var(--av-text-soft); cursor: pointer; }
.fancy-cart .contents { display: flex; flex-direction: column; gap: 14px; }
.fancy-cart .av-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 11px; align-items: center; }
.fancy-cart .av-line img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--av-line); }
.fancy-cart .av-line-title, .cart-popup-recent .av-line-title { font: 700 13px/1.4 var(--av-sans); color: var(--av-green); }
.fancy-cart .av-line-meta { font: 400 12px/1 var(--av-sans); color: var(--av-text-soft); margin-top: 3px; }
.fancy-cart .av-line-total, .cart-popup-recent .av-line-total { font: 700 13.5px/1 var(--av-sans); color: var(--av-green); white-space: nowrap; }
.cart-popup-recent .av-line { display: grid; grid-template-columns: 56px 1fr auto; gap: 11px; align-items: center; margin-bottom: 10px; }
.cart-popup-recent .av-line img { width: 56px; height: 56px; object-fit: cover; border: 1px solid var(--av-line); }

.fancy-cart .av-sum { display: flex; justify-content: space-between; border-top: 1px solid var(--av-line); padding-top: 11px; font: 700 17px/1 var(--av-sans); color: var(--av-green); }

/* Géén `display`: style.css sluit af met `display: none` en onze `flex` won
   daarvan — het venster stond op elke pagina open. global.js zet zelf een
   inline `display: flex`, dus de centrering hieronder werkt zodra het opent.
   Melding Claude Code, 2 augustus. */
.cart-popup-holder { position: fixed;z-index: 320; inset: 0; background: rgba(31,61,58,.34); align-items: center; justify-content: center; }
.cart-popup.rounded.body-bg { background: var(--av-bg); width: 560px; max-width: calc(100% - 32px); padding: 20px; }
.cart-popup .x.body-bg { float: right; font: 400 19px/1 var(--av-sans); color: var(--av-text-soft); cursor: pointer; }
.cart-popup .message-bar.success, .cart-popup .message-bar-mobile-success {
  background: var(--av-mint); padding: 12px 14px; display: flex; align-items: center; gap: 10px;
  font: 700 13.5px/1.4 var(--av-sans); color: var(--av-green);
}
.cart-popup .message-bar .icon { color: var(--av-stock); }
.cart-popup .current-product { display: grid; grid-template-columns: 76px 1fr; gap: 12px; align-items: center; margin-top: 14px; }
.cart-popup .current-product .image img { width: 76px; height: 76px; object-fit: cover; border: 1px solid var(--av-line); }
.cart-popup .current-product .title { font: 700 13.5px/1.4 var(--av-sans); color: var(--av-green); }
.cart-popup .current-product .variant-title { font: 400 12px/1 var(--av-sans); color: var(--av-text-soft); }
.cart-popup .current-product .price { font: 700 15px/1 var(--av-sans); color: var(--av-green); }
/* Wrap als vangnet: past het paar niet naast elkaar (lange labels uit
   Lightspeed, smal venster), dan stapelen ze in plaats van te breken. */
.cart-popup .proceed { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.cart-popup .proceed .button { flex: 1 1 auto; min-width: 0; }
.cart-popup-recent { border-top: 1px solid var(--av-line); padding-top: 12px; }
.cart-popup-recent .sum .total { font: 700 15px/1 var(--av-sans); color: var(--av-green); }

/* snelweergave */
/* Géén `display: flex` — dat won van `display: none` uit style.css en legde een
   onzichtbare laag over de hele site die alle kliks opving. De centrering loopt
   via Nova's eigen .quickshop-inner (table-cell). Melding Claude Code, 2 augustus. */
.quickshop-holder { position: fixed; z-index: 320; inset: 0; background: rgba(31,61,58,.34); }
.quickshop-inner { text-align: center; }
.quickshop-modal { background: var(--av-bg); width: 760px; max-width: calc(100% - 32px); margin: 0 auto; text-align: left; display: grid; grid-template-columns: 1fr 1fr; }
.quickshop-modal .av-media img { width: 100%; height: 100%; min-height: 340px; object-fit: cover; display: block; }
.quickshop-modal .av-body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }

@media (max-width: 767px) {
  .quickshop-modal { grid-template-columns: 1fr; }
  .quickshop-modal .av-media img { min-height: 220px; }
  .fancy-cart { width: 100%; }
}

/* 15 — FOOTER ============================================================= */

.av-footer { background: var(--av-sand); padding: 44px var(--av-pad); display: grid; grid-template-columns: 1.3fr 1fr 1fr 200px; gap: 30px; }
.av-footer img.av-logo { width: 105px; height: 24px; display: block; }
.av-footer h4 { font: 700 11.5px/1 var(--av-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--av-green); margin-bottom: 8px; }
.av-footer a, .av-footer p { font: 400 13px/1.7 var(--av-sans); color: var(--av-text); }

.av-footer-bottom {
  background: var(--av-sand); border-top: 1px solid var(--av-line);
  padding: 16px var(--av-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.av-footer-bottom .av-legal { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font: 400 12.5px/1.6 var(--av-sans); color: var(--av-text); }
.av-footer-bottom .av-legal a { font: 400 12.5px/1.6 var(--av-sans); color: var(--av-text); }

@media (max-width: 767px) {
  .av-footer { grid-template-columns: 1fr 1fr; padding: 28px var(--av-pad-m); gap: 20px; }
  .av-footer-bottom { padding: 14px var(--av-pad-m); }
}

/* 16 — KNOPPEN ============================================================ */

.button, a.button, button.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; box-sizing: border-box; padding: 0 24px; border: 0;
  background: var(--av-green); color: var(--av-bg);
  font: 700 14px/1 var(--av-sans); letter-spacing: .02em; cursor: pointer;
  /* Een knoplabel breekt nooit af: bij een vaste hoogte valt gebroken tekst
     uit het vlak. In een flex-rij mag de knop ook niet onder zijn
     inhoudsbreedte krimpen. Melding Claude Code, 31 juli. */
  white-space: nowrap; flex-shrink: 0; text-decoration: none;
}
.button:hover { background: #163330; color: var(--av-bg); }
.button.lined, .button.inverted {
  background: #fff; color: var(--av-green); border: 1px solid #cbc3b5;
}
.button.lined:hover, .button.inverted:hover { background: var(--av-sand); color: var(--av-green); }
.button.button-large { height: 52px; font-size: 15px; }
.button.full-width { width: 100%; }
.highlight-bg { background: var(--av-accent); color: #fff; }

a { color: var(--av-green-link); text-decoration: none; }
a:hover { color: var(--av-accent); }

/* Links in lopende tekst houden een onderstreping: kleur alleen is een zwak
   onderscheid voor kleurenblinde bezoekers. Navigatie, kaarten en knoppen niet
   — daar is de vorm het signaal. */
.product-info a, .textpage-content a, .av-magazine p a, .av-feature-body p a,
.av-search-empty .av-help a, .av-footer p a {
  text-decoration: underline; text-underline-offset: .18em;
  text-decoration-thickness: 1px; text-decoration-color: #a8b3af;
}
.product-info a:hover, .textpage-content a:hover, .av-magazine p a:hover,
.av-feature-body p a:hover, .av-search-empty .av-help a:hover, .av-footer p a:hover {
  text-decoration-color: currentColor;
}

/* 17 — TEXTPAGE =========================================================== */
/* Categorie-content-veld: volle breedte waar ons productgrid staat.
   Onderscheidt op de aanwezigheid van .blg, dus gewone tekstpagina's houden
   hun servicekolom. Valt :has() weg, dan is het gedrag de huidige situatie. */

.textpage-sidebar:has(.blg) > .col-md-3 { display: none; }
.textpage-sidebar:has(.blg) > .col-md-9 { width: 100%; }

/* _homepage blijft staan waar Lightspeed hem rendert — alleen opmaak.
   Geen enkele selector gaat de container in. */
.container.blogs > .row > .col-md-12.content {
  background: var(--av-cream);
  padding: 26px var(--av-pad);
  min-height: 300px;
  max-width: none; width: 100%;
}

/* Mobiel zoeken (correctie Claude Code, 31 juli): het thema heeft een
   vergrootglas #mobilesearch dat via global.js een tweede formulier injecteert
   zonder .searchbox en zonder .searchcontent. Het veld staat in dit ontwerp
   altijd open, dus die schakelaar is dubbel werk én een tweede zoekveld. */
/* !important is hier nódig: #mobilesearch draagt visible-xxs/xs/sm, en de
   .visible-*-regels uit de Bootstrap-subset zetten display met !important —
   dat wint van elke specificiteit. Melding Claude Code, 31 juli. */
#mobilesearch, .mobilesearchform { display: none !important; }

/* 17b — ICONEN =========================================================== */
/* Sprite avantius-icons.svg. Één maat, currentColor, dus ze erven de kleur van
   hun context. Vaste width/height — een icoon zonder maat is een CLS-bron. */

.av-icon { width: 18px; height: 18px; flex-shrink: 0; display: inline-block; vertical-align: -.18em; }
.av-icon--sm { width: 15px; height: 15px; }
.av-icon--lg { width: 22px; height: 22px; }
.av-stars .av-icon { width: 14px; height: 14px; color: var(--av-star); vertical-align: -.14em; }
.av-shipping-line .av-icon { width: 19px; height: 19px; color: var(--av-stock); margin-top: 1px; }
.subheader-usps .av-icon { color: var(--av-stock); }

.av-icon--spin { animation: av-spin .9s linear infinite; }
@keyframes av-spin { to { transform: rotate(360deg); } }

/* 18 — TOEGANKELIJKHEID =================================================== */

:focus-visible { outline: 2px solid var(--av-green); outline-offset: 2px; }
.av-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}/* Correctie livegang 2 aug: de losse homepage-banden (uitgelicht, magazine,
   winkelbeoordeling, nieuwsbrief) stonden op volle paginabreedte; ze horen
   de containerbreedte (1290px) te volgen, gecentreerd. Claude Code. */
.body-content > .av-feature,
.body-content > .av-sec-head,
.body-content > .av-magazine,
.body-content > .av-shopreviews,
.body-content > .av-newsletter {
  max-width: 1290px;
  margin-left: auto;
  margin-right: auto;
}/* Correctie livegang 2 aug: footerinhoud lijnt op brede schermen uit met de
   1290px-kolom; de band zelf blijft de volle breedte. Onder de 1291px verandert
   er niets (dan geldt de gewone 40px-marge). Claude Code. */
@media (min-width: 1291px) {
  .av-footer,
  .av-footer-bottom {
    padding-left: calc((100% - 1290px) / 2 + 40px);
    padding-right: calc((100% - 1290px) / 2 + 40px);
  }
}/* Correctie livegang 2 aug: het categorieënpaneel ankerde aan de pagina i.p.v.
   aan de navigatiebalk en werd daardoor beeldvullend (1905px i.p.v. 1260px).
   Dit anker beperkt het tot de balkbreedte. Claude Code. */
nav.subheader-nav { position: relative; }
/* Correctie livegang 2 aug: Nova's formulierregel .fancy-radio + label
   (margin-left: -25px) greep ook de labels in de categorierail, waardoor de
   tekst links buiten het paneel viel. Claude Code. */
.av-cat-rail label { margin-left: 0; }
/* Correctie livegang 2 aug: (1) de schakel-radio's in de categorierail kregen
   Nova's fancy-radio-opmaak en werden zichtbaar als bolletjes — ze horen
   onzichtbaar te zijn (het label is de knop); (2) 13 categorieën hebben 565px
   nodig, dus het paneel groeit mee i.p.v. een schuifbalk te tonen. Claude Code. */
@media (min-width: 992px) {
  .av-cat-rail input.fancy-radio { display: none; }
  .av-cat-rail label::before,
  .av-cat-rail label::after { display: none; }
  .av-cat-panel { height: auto; min-height: 436px; }
}/* ===== Correctiebundel livegang 2 aug, ronde 2 — Claude Code =====
   1. Labels op categorietegels: de site-brede kopregel maakte ze donkergroen
      op foto's — wit hoort daar (Nova's eigen donkere waas ligt eronder).
   2. Kleine homepage-banners: zelfde fout; wit mét schaduw zodat het op
      lichte én donkere beelden leesbaar is. De hero blijft ongemoeid.
   3. Nieuwsbriefformulier mobiel: flex-basis 520px was een bréédte in de
      rij-indeling maar werd een hóógte in de mobiele kolom (680px-band).
   4. Uitgelicht-beeld mobiel: 340px vierkant is te dominant → 200px. */
.category .img-holder h4 { color: #fff; }
.banners-home-block.small .title { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.55); }
@media (max-width: 991px) {
  .av-newsletter form { flex-basis: auto; }
  .av-feature img { height: 200px; }
}/* Tegel-labels groter en beter leesbaar (verzoek Peter, 2 aug). Claude Code. */
.category .img-holder h4 {
  font-size: 24px;
  line-height: 1.2;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}/* Correctie 2 aug: de USP-strook had vast 4 kolommen terwijl er 3 teksten
   zijn — het lege vierde vak verdwijnt en de teksten verdelen de breedte.
   Werkt ook vanzelf als er ooit een 4e USP bij komt. Claude Code. */
@media (min-width: 992px) {
  .subheader-usps { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}