/* Raamwerk: breedte, kop, navigatie, voet. */

.wrap {
  width: min(var(--bsv-wrap), calc(100% - (var(--bsv-gutter) * 2)));
  margin-inline: auto;
}

.site-main { padding-top: var(--bsv-space-5); }

.block { margin-bottom: var(--bsv-space-5); }

.block-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--bsv-space-4);
  margin-bottom: var(--bsv-space-3);
  flex-wrap: wrap;
}

.block-head h2 { font-size: var(--bsv-fs-lg); }
.block-head p { margin: 3px 0 0; font-size: var(--bsv-fs-sm); color: var(--bsv-muted); }

.show-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: var(--bsv-touch);
  padding: 8px 15px;
  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;
  white-space: normal;
  max-width: 100%;
  overflow-wrap: anywhere;
}

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

/* --- Servicebalk --------------------------------------------------------- */

.topbar {
  background: var(--bsv-black);
  color: #ddd;
  font-size: 12.5px;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 30px;
  white-space: nowrap;
  overflow: hidden;
}

/* Eén voordeel, niet twee: een strook die je opzij moet vegen om de rest te
   zien is een schuifgebied, en dat moet dan ook met een toetsenbord te
   bedienen zijn. Een extra tabstop bovenaan elke pagina is die tweede regel
   tekst niet waard. */

/* De punten krimpen niet mee: een punt dat krimpt schuift met zijn tekst
   over de buurman heen (gezien op 1000 px met het Kiyoh-cijfer erbij). Wat
   niet past wordt afgeknipt, en de derde belofte komt pas vanaf 1101 px. */
.topbar__usps { display: flex; gap: var(--bsv-space-3); min-width: 0; overflow: hidden; list-style: none; }
.topbar__usps li:nth-child(n+2) { display: none; }
.topbar__usps li { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 6px 0; }
.topbar__usps b { color: #fff; font-weight: 600; }
.topbar svg { color: var(--bsv-yellow); flex: 0 0 auto; }

/* --- Cijfer met sterren ---------------------------------------------------
 * Twee lagen sterren op elkaar: de onderste in gedempt wit, de bovenste in
 * geel en afgeknipt op het percentage. Zo klopt ook een 9,4 met de sterren
 * die je ziet, in plaats van dat er naar een heel getal afgerond wordt.
 */

.topbar__usps .topbar__rating { min-width: 0; max-width: 100%; flex-wrap: wrap; white-space: normal; gap: var(--bsv-space-2); padding-right: var(--bsv-space-2); }
.topbar__rating-count::before { content: "\00B7"; margin: 0 4px; }
.topbar__rating a { text-decoration: underline; }

/* Op smalle telefoons krijgt de bron voorrang boven het aantal reviews. */
@media (width <= 480px) {
  .topbar__rating-count { display: none; }
}

.topbar__stars {
  position: relative;
  flex: 0 0 auto;
  line-height: 0;
}

/* .topbar svg zet alles in de balk op geel; de lege laag moet daar onderuit. */
.topbar .topbar__stars-leeg { color: rgb(255 255 255 / 28%); }

.topbar__stars-vol {
  position: absolute;
  inset: 0;
  width: var(--bsv-stars-vulling, 0%);
  overflow: hidden;
}

/* De svg in de bovenste laag mag niet meekrimpen met het venstertje dat hem
   afknipt; dan zou hij schalen in plaats van afgeknipt worden. */
.topbar__stars-vol svg { max-width: none; color: var(--bsv-yellow); }

.topbar__links { display: none; gap: 18px; list-style: none; }
.topbar__links a { display: inline-flex; align-items: center; min-height: var(--bsv-touch); padding: 0; }
.topbar__links a:hover { color: #fff; }

/* --- Kop ----------------------------------------------------------------- */

/* De kop blijft in beeld. Zoeken en de winkelwagen zijn de twee dingen waar
   je tijdens het bladeren naar teruggrijpt; daarvoor eerst helemaal naar boven
   scrollen kostte op mobiel de meeste tijd. De offset houdt rekening met de
   beheerbalk van WordPress, die bovenaan vastzit zodra je ingelogd bent. */
.mast {
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0);
  z-index: 50;
  background: var(--bsv-black);
}

/* Op een telefoon is de kop één rij van 48 pixels: menuknop, zoekknop, logo,
   winkelwagen. De zoekbalk zit achter die knop en klapt eronder uit; mijn
   account en de verlanglijst staan in het menupaneel. Hij liep anders uit tot
   vier rijen, ruim een vijfde van het scherm voordat je iets van de winkel zag.

   De rij heeft een vaste hoogte, want --bsv-mast-h rekent ermee: de kop plakt
   bovenaan en de filterbalk op het overzicht moet eronder blijven. */
:root { --bsv-mast-h: 64px; }

.mast__row {
  display: grid;
  grid-template:
    "menu zoek logo actions" 48px
    "search search search search" auto
    / auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 var(--bsv-space-1);
  min-height: 0;
  padding: 8px 0;
}

.logo { flex: 0 0 auto; min-width: 0; grid-area: logo; }
.logo:hover { text-decoration: none; }

.logo__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  padding: 4px 8px;
  background: var(--bsv-surface);
  border-radius: var(--bsv-radius);
  overflow: hidden;
}

.logo__mark img { height: 26px; width: auto; max-width: min(140px, 100%); object-fit: contain; }

/* Een eigen logo brengt zijn eigen achtergrond mee. Het witte plaatje eronder
   is er voor de tekstterugval; met een afbeelding zou je er een witte rand
   omheen zien. Zijn eigen hoogte krijgt het pas als er ruimte is: op een
   telefoon is het vak een vaste 38 px, met of zonder eigen logo. */
.logo__mark--image {
  background: transparent;
  border-radius: 0;
}
.logo__text { font-weight: 800; color: var(--bsv-ink); font-size: var(--bsv-fs-md); }

/* Het vak eromheen draagt de breedte. Op mobiel is dit ook wat open- en
   dichtklapt, en dan moet het formulier zelf de volle breedte kunnen vullen. */
.mast__search {
  flex: 1;
  min-width: 0;
  max-width: none;
  grid-area: search;
}

/* Zonder JavaScript blijft de zoekbalk staan waar hij stond: onder de rij,
   altijd zichtbaar. Met JavaScript zit hij achter de knop. */
.bsv-js .mast__search { display: none; }
.bsv-js .mast__search.is-open { display: block; padding-top: var(--bsv-space-2); }

/* De hoogte kwam uit de padding van het veld en bleef op 43 steken; de knop
   ernaast rekte mee. Dat is onder de 44 die de ontwerpregel vraagt. min-height
   in plaats van height, zodat de balk mee kan groeien als de tekst groter
   wordt. Dit geldt op elke breedte; op mobiel stond hier eerst een eigen
   height, die knipte de inhoud af zodra de tekst vergroot werd. */
.searchbar {
  display: flex;
  width: 100%;
  min-height: var(--bsv-touch);
  background: var(--bsv-surface);
  border-radius: var(--bsv-radius-pill);
  overflow: hidden;
}

/* Dezelfde zoekbalk in de pagina zelf (searchform.php, onder meer op de 404).
   Op een lichte achtergrond heeft hij een rand nodig om als veld te lezen. */
.searchbar--page {
  max-width: 560px;
  margin-block: var(--bsv-space-4);
  border: 1px solid var(--bsv-muted);
}

/* De pilvorm zit op .searchbar, dus het veld zelf heeft geen rand. Hier stond
   outline: none; dat won van de globale :focus-visible en liet het zoekveld
   zonder zichtbare focus achter. De ring staat naar binnen, want de pil snijdt
   met overflow: hidden alles af wat erbuiten valt. */
.searchbar input {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: 10px 16px;
  font-size: var(--bsv-fs-base);
  color: var(--bsv-ink);
  background: transparent;
}

.searchbar input:focus-visible {
  outline: 3px solid var(--bsv-yellow);
  box-shadow: inset 0 0 0 1px var(--bsv-ink);
  outline-offset: -4px;
  border-radius: var(--bsv-radius-pill) 0 0 var(--bsv-radius-pill);
}

.searchbar input::placeholder { color: #757575; }

/* De knop krimpt niet mee. Deed hij dat wel, dan werd hij op een smal scherm
   door de pil afgeknipt of schoof zijn opschrift over de plaatshouder heen; het
   invoerveld ernaast heeft min-width: 0 en geeft dus als eerste ruimte prijs. */
.searchbar button {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: var(--bsv-touch);
  border: 0;
  padding: 0 14px;
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  font-weight: 600;
  cursor: pointer;
}

.searchbar button:hover { background: var(--bsv-yellow-dark); }

.mast__actions { display: flex; align-items: center; gap: var(--bsv-space-1); margin-left: 0; grid-area: actions; }

/* Mijn account en de verlanglijst staan onderin het menupaneel, met teller en
   al. Ze hier herhalen kost de breedte die het logo nodig heeft: op een scherm
   van 360 pixels bleef er anders zeventig pixel logo over. */
.mast__action {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  padding: 10px;
  border-radius: var(--bsv-radius-pill);
  color: #fff;
  font-size: 13.5px;
}

.mast__action:hover { background: rgb(255 255 255 / 14%); text-decoration: none; }

.cart-button {
  display: flex;
  align-items: center;
  gap: 9px;
  position: relative;
  justify-content: center;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  padding: 0;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  font-weight: 700;
}

.cart-button:hover { background: var(--bsv-yellow-dark); text-decoration: none; }

.cart-button__label { display: none; white-space: nowrap; }

.cart-button > svg { flex-shrink: 0; }

.cart-button__total { display: none; white-space: nowrap; }

.cart-button__count {
  background: var(--bsv-black);
  color: var(--bsv-yellow);
  border-radius: var(--bsv-radius-pill);
  padding: 2px 8px;
  font-size: var(--bsv-fs-xs);
  position: absolute;
  top: 1px;
  right: 1px;
  box-shadow: 0 0 0 2px var(--bsv-yellow);
}

.wishlist-count {
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  border-radius: var(--bsv-radius-pill);
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
}

/* De naam van de knop blijft in de toegankelijkheidsboom staan, alleen het
   beeld wordt smaller. Geldt op de telefoon én op het tussenformaat, want daar
   is het dezelfde afweging: het opschrift zegt niets wat het icoon niet al
   zegt, en het kost de breedte die de zoekbalk nodig heeft. */
.mast__menu-label,
.mast__action-label,
.searchbar__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* --- Hoofdnavigatie ------------------------------------------------------ */

/* Zonder JavaScript blijft de balk staan en plakt hij onder de mast. Met
   JavaScript is hij op een smal scherm weg en hoeft er niets te plakken. */
.nav-main {
  position: static;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-mast-h));
  z-index: 45;
  background: var(--bsv-surface);
  border-bottom: 1px solid var(--bsv-line);
}

.nav-main__list {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: var(--bsv-nav-h);
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-main__list::-webkit-scrollbar { display: none; }
.nav-main__list > li { display: flex; align-items: center; }

.nav-main__list a {
  display: block;
  white-space: nowrap;
  padding: 11px 14px;
  border-radius: var(--bsv-radius-pill);
  color: var(--bsv-ink);
  font-size: 14.5px;
  font-weight: 600;
}

.nav-main__list a:hover { background: var(--bsv-bg); text-decoration: none; }
.nav-main__list .current-menu-item > a { background: var(--bsv-ink); color: #fff; }

/* --- Uitklapmenu ---------------------------------------------------------
 * Een menupunt met subcategorieën krijgt van main.js een eigen knop naast de
 * link. Niet op aanwijzen alleen: hoverinhoud moet volgens WCAG 1.4.13 ook
 * weg te krijgen zijn zonder de muis te verplaatsen, en de link zelf moet
 * gewoon naar de categoriepagina kunnen blijven gaan. Zonder JavaScript staat
 * de sublijst er open bij; dat is de terugval.
 */

.nav-sub-toggle,
.mobile-menu__expand {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  border: 0;
  border-radius: var(--bsv-radius-pill);
  background: transparent;
  color: var(--bsv-body);
  cursor: pointer;
}

/* Een menupunt met een knop erachter houdt rechts minder ruimte: de knop is
   al 44 px breed en de twee samen duwden Kennisbank anders naar een tweede
   regel op 1320 px. De link zelf blijft 44 px hoog en 14 px links. */
.nav-main__list > .menu-item-has-children > a { padding-right: 6px; }

/* De knop blijft een zelfstandig doel van 44 px. Ook een kleine negatieve
   marge is hier onveilig: die laat het klikvlak over de categorielink vallen,
   waardoor een klik op de laatste letters onverwacht het megamenu opent. */
.nav-sub-toggle { margin-left: 0; }

.nav-sub-toggle:hover,
.mobile-menu__expand:hover { background: var(--bsv-bg); color: var(--bsv-ink); }

.nav-sub-toggle svg,
.mobile-menu__expand svg { transition: transform 0.15s ease; }

.nav-sub-toggle[aria-expanded="true"] svg,
.mobile-menu__expand[aria-expanded="true"] svg { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .nav-sub-toggle svg,
  .mobile-menu__expand svg { transition: none; }
}

/* De balk schuift horizontaal zolang hij de navigatie zelf is: dat is de
   terugval zonder JavaScript op een smal scherm. Zodra er ruimte is mag hij
   niet meer schuiven, want overflow knipt een uitklapmenu af. */
@media (width >= 901px) {
  /* Nooit over twee regels: tussen 901 en ruwweg 1190 px pasten de acht
     menupunten niet en viel Kennisbank eronder. De balk schuift daar
     zijwaarts, net als op een telefoon. Het uitklappaneel hangt aan .wrap en
     niet aan deze lijst, dus het schuifkader knipt het niet af. */
  .nav-main__list { flex-wrap: nowrap; }
}

/* Tussen 901 en 1100 px passen de acht menupunten nooit; het laatste loopt
   uit in een vervaging, zodat je ziet dat de balk verder schuift. Daarboven
   past alles en is de vervaging weg. */
@media (width >= 901px) and (width <= 1100px) {
  .nav-main__list {
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }
}

/* main.js staat onderaan de pagina en zet pas dan het hidden-attribuut op
   elke sublijst. Tot die tijd stonden alle tien panelen open over de pagina,
   op een lange pagina een paar seconden lang. Met .bsv-js (gezet in de head)
   is een sublijst dus dicht tot main.js er een knop naast heeft gezet; vanaf
   dan regelt het hidden-attribuut het. Zonder JavaScript blijft alles open. */
.bsv-js .nav-main__list li > .sub-menu:not(.nav-sub-toggle + .sub-menu) { display: none; }

@media (width >= 901px) {
  /* Het paneel hangt aan de balk, niet aan het menupunt. Hing het aan het
     menupunt, dan liep een breed paneel onder Accessoires rechts het scherm
     uit, en een rechts uitgelijnd paneel onder Merken links het scherm uit
     zodra de balk over twee regels valt (tussen 901 en ruwweg 1190 px). Een
     band over de volle breedte past altijd, en dertien subcategorieën staan
     er als chips op twee regels in plaats van als een lijst van 500 px. */
  .nav-main .wrap { position: relative; }
  .nav-main__list > li { position: static; }

  .nav-main__list .sub-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    z-index: 5;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px 24px;
    padding: 20px 22px 24px;
    list-style: none;
    background: var(--bsv-surface);
    border: 1px solid var(--bsv-line);
    border-top: 0;
    border-radius: 0 0 var(--bsv-radius-lg) var(--bsv-radius-lg);
    box-shadow: 0 18px 48px rgb(0 0 0 / 14%);
  }

  .nav-main__list .sub-menu a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--bsv-touch);
    padding: 9px 34px 9px 12px;
    border: 0;
    border-radius: var(--bsv-radius-sm);
    font-size: 14px;
    font-weight: 600;
    white-space: normal;
  }

  .nav-main__list .sub-menu a::after {
    position: absolute;
    top: 50%;
    right: 12px;
    content: "→";
    color: var(--bsv-muted);
    font-weight: 700;
    transform: translateY(-50%);
  }

  .nav-main__list .sub-menu a:hover,
  .nav-main__list .sub-menu a:focus-visible { background: #f0f3f1; color: var(--bsv-ink); }

  .nav-main__list .sub-menu a:hover::after,
  .nav-main__list .sub-menu a:focus-visible::after { color: var(--bsv-ink); transform: translate(3px, -50%); }

  .nav-main__list .sub-menu .current-menu-item > a { background: var(--bsv-bg); color: var(--bsv-ink); }

  /* Merken zijn een alfabetische index, geen productcategorieën. De compactere
     typografie laat alle actieve merken zien zonder een lange verticale lijst. */
  .nav-main__list > .bsv-menu-overview--brands > .sub-menu {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px 18px;
    padding-block: 18px 22px;
  }

  .nav-main__list .bsv-menu-overview--brands .sub-menu a {
    min-height: 38px;
    font-size: 13px;
  }

  /* Kennisbankonderwerpen zijn inhoudelijke routes. Meer ruimte en een
     rustige kaartachtergrond onderscheiden ze van assortimentlinks. */
  .nav-main__list > .bsv-menu-overview--knowledge > .sub-menu {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px 16px;
    padding: 24px 26px 28px;
  }

  .nav-main__list .bsv-menu-overview--knowledge .sub-menu a {
    min-height: 58px;
    padding-left: 18px;
    border-left: 4px solid var(--bsv-yellow);
    background: var(--bsv-bg);
    font-size: 15px;
    font-weight: 700;
  }

  /* Maaltijden hebben twee soorten keuzes: vaste categorieën en verfijningen.
     Op desktop staan die in een echt megamenu, zodat een dieetfilter niet als
     gelijkwaardige productcategorie wordt gelezen. */
  .nav-main__list > .bsv-menu-mega > .sub-menu {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr 1fr;
    grid-auto-flow: dense;
    align-items: start;
    gap: 4px 32px;
    padding: 26px 28px 30px;
    background:
      linear-gradient(90deg, transparent calc(36.5% - 1px), var(--bsv-line-soft) 36.5%, transparent calc(36.5% + 1px)),
      linear-gradient(90deg, transparent calc(65.5% - 1px), var(--bsv-line-soft) 65.5%, transparent calc(65.5% + 1px)),
      var(--bsv-surface);
  }

  .bsv-menu-mega .bsv-menu-kind { min-width: 0; }
  .bsv-menu-mega .bsv-menu-kind--meal-type { grid-column: 1; }
  .bsv-menu-mega .bsv-menu-kind--diet { grid-column: 2; }
  .bsv-menu-mega .bsv-menu-kind--practical { grid-column: 3; }

  .bsv-menu-mega .bsv-menu-kind--group-start::before {
    display: block;
    margin: 0 10px 10px;
    color: var(--bsv-ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.01em;
  }

  .bsv-menu-mega .bsv-menu-kind--meal-type.bsv-menu-kind--group-start::before { content: "Kies je maaltijd"; }
  .bsv-menu-mega .bsv-menu-kind--diet.bsv-menu-kind--group-start::before { content: "Dieetwensen"; }
  .bsv-menu-mega .bsv-menu-kind--practical.bsv-menu-kind--group-start::before { content: "Snel kiezen"; }

  .nav-main__list .bsv-menu-mega .sub-menu a {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 42px;
    padding: 9px 34px 9px 12px;
    border: 0;
    border-radius: var(--bsv-radius-sm);
    white-space: normal;
  }

  .nav-main__list .bsv-menu-mega .sub-menu a::after {
    position: absolute;
    top: 50%;
    right: 12px;
    content: "→";
    color: var(--bsv-muted);
    font-weight: 700;
    transform: translateY(-50%);
  }

  .nav-main__list .bsv-menu-mega .bsv-menu-kind--meal-type > a {
    min-height: 48px;
    padding-left: 16px;
    background: var(--bsv-bg);
    color: var(--bsv-ink);
    font-size: 15px;
    font-weight: 750;
  }

  .nav-main__list .bsv-menu-mega .bsv-menu-kind--meal-type > a::before {
    width: 7px;
    height: 7px;
    margin-right: 11px;
    border-radius: 50%;
    background: var(--bsv-yellow);
    content: "";
  }

  .nav-main__list .bsv-menu-mega .bsv-menu-kind--diet > a,
  .nav-main__list .bsv-menu-mega .bsv-menu-kind--practical > a {
    color: var(--bsv-body);
    font-size: 14px;
    font-weight: 600;
  }

  .nav-main__list .bsv-menu-mega .sub-menu a:hover,
  .nav-main__list .bsv-menu-mega .sub-menu a:focus-visible {
    border: 0;
    background: #f0f3f1;
    color: var(--bsv-ink);
  }

  .nav-main__list .bsv-menu-mega .sub-menu a:hover::after,
  .nav-main__list .bsv-menu-mega .sub-menu a:focus-visible::after { color: var(--bsv-ink); transform: translate(3px, -50%); }
}

/* --- Mobiel menu ---------------------------------------------------------
 * De schuivende balk hierboven blijft de navigatie zonder JavaScript. De
 * kleine head-snippet in header.php zet .bsv-js vóór de eerste paint: dan
 * verschijnt de menuknop en verdwijnt de balk op smalle schermen, zodat er
 * niet twee navigaties naast elkaar staan en de kop niet achteraf verspringt.
 */

.mast__menu {
  display: none;
  align-items: center;
  gap: 7px;
  min-height: var(--bsv-touch);
  min-width: var(--bsv-touch);
  grid-area: menu;
  width: var(--bsv-touch);
  padding: 0;
  border: 0;
  border-radius: var(--bsv-radius-pill);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.mast__menu:hover { background: rgb(255 255 255 / 12%); }

/* Met JavaScript is de menuknop de navigatie en verdwijnt de categoriebalk.
   Zonder JavaScript blijft die balk staan; dat is de terugval. Zodra de balk
   weg is, is de kop alleen nog de mast. */
.bsv-js .mast__menu { display: inline-flex; }
.bsv-js .nav-main { display: none; }
.bsv-js { --bsv-header-h: var(--bsv-mast-h); }

/* Alleen op een telefoon, en alleen met JavaScript. Zonder allebei staat de
   zoekbalk er uitgeklapt bij en zou deze knop nergens naar wijzen. */
.mast__search-toggle {
  display: none;
  place-items: center;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  border: 0;
  border-radius: var(--bsv-radius-pill);
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.bsv-js .mast__search-toggle { display: grid; grid-area: zoek; }

.mast__search-toggle:hover,
.mast__search-toggle[aria-expanded="true"] { background: rgb(255 255 255 / 14%); }

.mobile-menu {
  position: fixed;
  z-index: 60;
  inset: 0;
}

.mobile-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(8 10 8 / 55%);
}

.mobile-menu__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(20rem, 88vw);
  height: 100%;
  overflow-y: auto;
  background: var(--bsv-surface);
  box-shadow: 4px 0 24px rgb(0 0 0 / 18%);
}

.mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bsv-space-3);
  padding: var(--bsv-space-3) var(--bsv-space-4);
  border-bottom: 1px solid var(--bsv-line);
}

.mobile-menu__title { font-size: var(--bsv-fs-md); font-weight: 750; }

.mobile-menu__close {
  display: grid;
  place-items: center;
  min-width: var(--bsv-touch);
  min-height: var(--bsv-touch);
  border: 0;
  border-radius: var(--bsv-radius-pill);
  background: transparent;
  color: var(--bsv-ink);
  cursor: pointer;
}

.mobile-menu__close:hover { background: var(--bsv-bg); }

.mobile-menu__list,
.mobile-menu__service { list-style: none; margin: 0; padding: 0; }

.mobile-menu__list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid var(--bsv-line-soft);
}

.mobile-menu__list > li > a { flex: 1; min-width: 0; }
.mobile-menu__expand { margin-right: var(--bsv-space-2); }

.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: var(--bsv-touch);
  padding: 12px var(--bsv-space-4);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-base);
  font-weight: 650;
}

.mobile-menu__list a:hover { background: var(--bsv-bg); text-decoration: none; }
.mobile-menu__list .current-menu-item > a { background: var(--bsv-bg); font-weight: 800; }

.mobile-menu__list .sub-menu { flex-basis: 100%; list-style: none; margin: 0; padding: 0 0 var(--bsv-space-2); }

.mobile-menu__list .sub-menu a {
  min-height: 40px;
  padding: 9px var(--bsv-space-4) 9px var(--bsv-space-6);
  color: var(--bsv-body);
  font-size: var(--bsv-fs-sm);
  font-weight: 600;
}

/* Op mobiel zijn de echte maaltijdtypen de snelste en kortste route. De
   volledige filters staan op de categoriepagina; zolang nog geen maaltijdtype
   is ingericht blijven de bestaande filters zichtbaar als veilige terugval. */
.mobile-menu__list .bsv-menu-mega--has-meal-types .bsv-menu-kind--diet,
.mobile-menu__list .bsv-menu-mega--has-meal-types .bsv-menu-kind--practical { display: none; }

/* Op mobiel blijft Merken een korte ingang; de bovenliggende link opent het
   volledige alfabetische merkenoverzicht. */
.mobile-menu__list .bsv-menu-overview--brands .sub-menu > li:nth-child(n + 9) { display: none; }

.mobile-menu__foot {
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: var(--bsv-space-4);
  border-top: 1px solid var(--bsv-line);
  background: var(--bsv-bg);
}

.mobile-menu__foot a,
.mobile-menu__service a {
  display: flex;
  align-items: center;
  gap: var(--bsv-space-2);
  min-height: var(--bsv-touch);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-sm);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Vanaf hier is er ruimte voor de categoriebalk en verdwijnt de menuknop. */

@media (width >= 901px) {
  .bsv-js .mast__menu { display: none; }
  .bsv-js .nav-main { display: block; }
  .bsv-js { --bsv-header-h: calc(var(--bsv-mast-h) + var(--bsv-nav-h)); }
  .nav-main { position: sticky; }
}

/* --- Kruimelpad ---------------------------------------------------------- */

.crumb { padding: 14px 0; font-size: 13.5px; color: var(--bsv-muted); }
.crumb ol { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; list-style: none; }
.crumb li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; display: flex; gap: 6px; align-items: center; }
.crumb li + li::before { content: "\203A"; color: var(--bsv-muted); }
.crumb a { display: inline-flex; align-items: center; min-height: var(--bsv-touch); text-decoration: underline; text-underline-offset: 2px; }
.crumb a:hover { color: var(--bsv-ink); }
.crumb [aria-current="page"] { font-weight: 700; color: var(--bsv-ink); }

/* Het pad van WooCommerce staat al binnen .wrap van het winkelsjabloon. Het
   generieke pad uit inc/kruimelpad.php staat in header.php, dus buiten main,
   en neemt zijn eigen wrap mee. Zonder deze regel plakt het tegen de rand. */
.crumb > .wrap { width: min(1264px, calc(100% - 32px)); margin-inline: auto; }

/* Op een smal scherm liep het pad van een product over twee regels, met een
   los pijltje voor aan de tweede regel. Dat kostte 122 pixels boven de foto.
   Hier blijft alleen de stap terug over: "‹ Hoofdmaaltijden", zoals ah.nl het
   doet. Het volledige pad staat nog in de broncode en in BreadcrumbList. */
@media (width <= 860px) {
  .single-product .crumb { padding: 4px 0; }
  .single-product .crumb li:not(:nth-last-child(2)) { display: none; }
  .single-product .crumb li:nth-last-child(2)::before { content: "\2039" / ""; }
}

/* --- Voet ---------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--bsv-line);
  margin-top: var(--bsv-space-6);
  padding: var(--bsv-space-7) 0 0;
  background: var(--bsv-bg);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--bsv-space-4);
  padding-bottom: var(--bsv-space-6);
}

.site-footer h2 { font-size: var(--bsv-fs-base); margin-bottom: var(--bsv-space-3); }
.footer-menu { list-style: none; }

/* --- Rubrieken in de voet ------------------------------------------------
 * Op een telefoon staan hier vier lijsten onder elkaar: ruim drie schermen aan
 * links, voorbij de plek waar iemand nog scrollt. Ze zitten nu in een
 * uitklapblok, zoals de kop van een rubriek in de app van een grote winkel.
 * Breed scherm: alles open en de kop is weer een gewone kop. Het script zet de
 * stand, zie assets/js/main.js. */

.footer-col > summary { list-style: none; }
.footer-col > summary::-webkit-details-marker { display: none; }
.footer-col > summary h2 { margin: 0; }

@media (width <= 860px) {
  .footer-col {
    border-bottom: 1px solid var(--bsv-line);
  }

  .footer-col > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bsv-space-2);
    min-height: var(--bsv-touch);
    padding: var(--bsv-space-2) 0;
    cursor: pointer;
  }

  /* Het pijltje. Een vierkant van 10 bij 10 met twee zijden, een halve slag
     gedraaid: naar beneden als het dicht is, naar boven als het open staat. */
  .footer-col > summary::after {
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--bsv-muted);
    border-bottom: 2px solid var(--bsv-muted);
    transform: translateY(-3px) rotate(45deg);
  }

  .footer-col[open] > summary::after { transform: translateY(2px) rotate(225deg); }
  .footer-col[open] > :not(summary) { padding-bottom: var(--bsv-space-3); }
}

@media (width >= 861px) {
  .footer-col > summary { cursor: default; }
}
.footer-menu a { display: inline-flex; align-items: center; min-height: var(--bsv-touch); font-size: 13.5px; }

/* Winkelgegevens als vaste contactkolom naast de navigatie. */
.footer-contact {
  display: flex;
  flex-direction: column;
  color: var(--bsv-muted);
  font-size: 13px;
  align-items: flex-start;
  gap: var(--bsv-space-2);
  padding: 0 0 var(--bsv-space-4);
  border: 0;
  min-width: 0;
}

.footer-contact address {
  font-style: normal;
  line-height: var(--bsv-lh-copy);
}

.footer-contact address b {
  color: var(--bsv-ink);
  display: block;
}

.footer-contact address b::after { content: none; }

.footer-contact a {
  min-width: 0;
  color: var(--bsv-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  overflow-wrap: anywhere;
}

/* Keurmerk en beoordelingen. Elke tegel is een link naar de bron, dus geen
   dood label maar een kliktarget van 44 px hoog. Zie inc/keurmerken.php. */
.trust-row {
  padding: var(--bsv-space-4) 0;
  border-top: 1px solid var(--bsv-line);
}

.trust-row--compact {
  padding: var(--bsv-space-3) 0;
  border-top: 0;
}

.trust-row__list {
  display: flex;
  flex-flow: column wrap;
  gap: var(--bsv-space-3);
  list-style: none;
}

.trust-row__list > li {
  min-width: 0;
  flex: 1 1 260px;
}

.trust-badge {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  min-height: var(--bsv-touch);
  padding: 6px 14px 6px 10px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-surface);
  text-decoration: none;
}

.trust-badge:hover { border-color: var(--bsv-ink); }
.trust-badge__icon { display: flex; flex-shrink: 0; align-items: center; color: var(--bsv-forest); }

/* Een merklogo staat op zijn eigen verhouding en mag niet uitgerekt worden. */
.trust-badge__icon img {
  width: auto;
  height: 34px;
  max-width: 116px;
  object-fit: contain;
}

.trust-badge__text {
  min-width: 0;
  overflow-wrap: anywhere;
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.trust-badge__text b { font-size: 13.5px; color: var(--bsv-ink); }
.trust-badge__text small { font-size: 12px; color: var(--bsv-muted); }

/* Betaalmethoden en vervoerders. Geen kaders eromheen: het zijn merken die je
   herkent, en een rand om elk logo maakt er een knoppenbalk van. */
.payment-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bsv-space-3);
  padding: var(--bsv-space-4) 0;
  border-top: 1px solid var(--bsv-line);
}

.payment-row--compact {
  padding: var(--bsv-space-2) 0 var(--bsv-space-3);
  border-top: 0;
}

.payment-row__group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: var(--bsv-space-2) var(--bsv-space-3);
}

.payment-row__title {
  font-size: 12.5px;
  color: var(--bsv-muted);
}

.payment-row__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
}

.payment-row__list img {
  display: block;
  width: auto;
  height: 24px;
  max-width: 84px;
  object-fit: contain;
}

@media (width >= 561px) {
  .trust-row__list { flex-flow: row wrap; }
  .trust-badge { justify-content: normal; }

  .payment-row { gap: var(--bsv-space-3) var(--bsv-space-6); }
  .payment-row__group { width: auto; }
}

.footer-bottom {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding: var(--bsv-space-4) 0;
  border-top: 1px solid var(--bsv-line);
  font-size: 12.5px;
  color: var(--bsv-muted);
  justify-content: flex-start;
  column-gap: var(--bsv-space-5);
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  color: var(--bsv-ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.footer-bottom a:hover { text-decoration-thickness: 2px; }

.footer-legal { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; }

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

/* --- Aanpassing aan schermbreedte ----------------------------------------
 * De basis hierboven is de telefoon: de kop als raster van één rij, de
 * opschriften weggeclipt, de voet in één kolom. Hieronder komt daar in drie
 * stappen ruimte bij. De volgorde is oplopend en dat is geen smaak: een later
 * blok wint van een eerder blok zodra ze allebei gelden.
 */

@media (width >= 761px) {
  :root { --bsv-mast-h: 68px; }

  .topbar .wrap { min-height: 36px; }
  .topbar__links { display: flex; }
  .topbar__usps { gap: 22px; }
  .topbar__usps li:nth-child(2) { display: flex; }

  /* Vier dingen naast elkaar in plaats van drie: de menuknop staat er tot
     900 px bij, want daar verdwijnt de categoriebalk. 24 px ertussen is dan
     bijna 100 px die niets doet; die maat komt pas terug vanaf 1001. */
  .mast__row {
    display: flex;
    grid-template: none;
    gap: var(--bsv-space-3);
    min-height: var(--bsv-mast-h);
  }

  .mast__menu { grid-area: auto; width: auto; padding: 8px 12px; }
  .bsv-js .mast__search-toggle { display: none; grid-area: auto; }

  .logo { grid-area: auto; }
  .logo__mark { height: 48px; padding: 6px 12px; }
  .logo__mark img { height: 32px; max-width: min(180px, 100%); }
  .logo__mark--image { height: auto; padding: 0; }
  .logo__mark--image img { height: 36px; max-width: min(200px, 100%); }

  .mast__search { grid-area: auto; max-width: 620px; }
  .bsv-js .mast__search { display: block; }
  .bsv-js .mast__search.is-open { padding-top: 0; }

  .searchbar input { padding: 13px 20px; }

  .mast__actions { grid-area: auto; gap: 4px; margin-left: auto; }
  .mast__action { display: flex; }

  .cart-button {
    position: static;
    justify-content: normal;
    min-width: auto;
    padding: 11px 16px;
  }

  .cart-button__total { display: inline; }

  .cart-button__count {
    position: static;
    top: auto;
    right: auto;
    box-shadow: none;
  }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--bsv-space-6); }
  .block { margin-bottom: var(--bsv-space-6); }
}

/* Vanaf hier passen de opschriften er weer bij en krijgt de kop zijn ruime
   maatvoering terug. Tot 1000 px zegt het opschrift niets wat het icoon niet
   al zegt, en kost het de breedte die de zoekbalk nodig heeft. */

@media (width >= 1001px) {
  .cart-button__label { display: inline; }

  .mast__menu-label,
  .mast__action-label,
  .searchbar__label {
    position: static;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }

  .searchbar button { justify-content: normal; min-width: auto; padding: 0 22px; }

  .mast__row { gap: var(--bsv-space-5); }
  .mast__action { justify-content: normal; min-width: auto; padding: 10px 13px; }
}

@media (width >= 1101px) {
  .topbar__usps li:nth-child(n+3) { display: flex; }

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


.footer-contact h2 { color: var(--bsv-ink); }

.footer-assurance { border-top: 1px solid var(--bsv-line); padding: var(--bsv-space-4) 0; }

.footer-assurance .trust-row,
.footer-assurance .payment-row { margin: 0; padding: var(--bsv-space-2) 0; border: 0; }

.footer-assurance .trust-badge,
.trust-row--inline .trust-badge { background: transparent; border: 0; }

.trust-row--inline .trust-row__list {
  flex-flow: row wrap;
}

.trust-row--inline .trust-badge { padding-inline: 0; }

.trust-row--inline .trust-row__list > li { min-width: 0; }

.cart-assurance { border-top: 0; }

/* Geef elk keurmerk op mobiel een eigen regel. Naast elkaar krompen de
   teksten tot één letter per regel, vooral in de winkelwagenvariant. */
@media (width <= 560px) {
  .trust-row__list,
  .trust-row--inline .trust-row__list {
    flex-direction: column;
  }

  .trust-row__list > li { flex-basis: auto; }

  .trust-badge {
    display: grid;
    grid-template-columns: 100px minmax(0, 1fr);
    gap: var(--bsv-space-3);
    padding-inline: 0;
  }

  .trust-badge__icon img { max-width: 100%; }
  .trust-badge__text { overflow-wrap: normal; }

  .payment-row__group {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (width >= 861px) {
  .footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); gap: var(--bsv-space-5); }
  .footer-assurance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--bsv-space-4); }
  .footer-assurance .trust-row { flex: 1 1 520px; min-width: 0; }
  .footer-col > summary { margin-bottom: var(--bsv-space-3); }
}