/* Koppeling tussen WooCommerce en onze onderdelen: overzicht, kaart, meldingen.
 * Laadt overal waar WooCommerce actief is.
 *
 * Afgesplitst van woocommerce.css: dat bestand laadde in zijn geheel op elke
 * pagina, ook waar geen enkele regel ervan gebruikt werd. Zie inc/assets.php
 * voor de voorwaarde waaronder dit bestand binnenkomt.
 */

.woocommerce-notices-wrapper { margin-bottom: var(--bsv-space-4); }

/*
 * Meldingen. WooCommerce zet de knop als inline element middenin de zin; met
 * verticale padding legt die zich dan over de tekst heen, en bij afbreken
 * krijg je twee losse pillen. Daarom is de melding hier een flexcontainer en
 * de knop een blok dat op smalle schermen zijn eigen regel krijgt.
 *
 * De gekleurde streep aan de linkerkant is weg. Een gekleurd balkje tegen wit
 * is precies het generieke meldingspatroon dat docs/design-reference.md
 * verbiedt; een egaal getint vlak met een rand hoort bij de rest van de winkel.
 */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--bsv-space-2) var(--bsv-space-4);
  margin: 0 0 var(--bsv-space-4);
  padding: 14px 18px;
  border: 1px solid var(--bsv-info);
  border-radius: var(--bsv-radius);
  background: var(--bsv-info-soft);
  color: var(--bsv-ink);
  list-style: none;
  font-size: 14.5px;
}

.woocommerce-message {
  border-color: var(--bsv-success);
  background: var(--bsv-success-soft);
}

.woocommerce-error {
  border-color: var(--bsv-error);
  background: var(--bsv-error-soft);
}

/* WooCommerce geeft bevestigingen automatisch focus voor voorleessoftware.
   Het statusvlak heeft al een rand; alleen de bedienbare link krijgt een
   toetsenbordomlijning. De focus en aankondiging blijven behouden. */
.woocommerce-message[tabindex="-1"]:focus,
.woocommerce-info[tabindex="-1"]:focus,
.woocommerce-error[tabindex="-1"]:focus,
.woocommerce-notices-wrapper[tabindex="-1"]:focus {
  outline: none;
  box-shadow: none;
}

/* De tekst neemt de ruimte, de knop schuift naar rechts en wijkt uit naar een
   eigen regel zodra er geen 150 px meer over is. */
.woocommerce-message > .button,
.woocommerce-info > .button,
.woocommerce-error > .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1 0 100%;
  min-height: var(--bsv-touch);
  margin-left: 0;
  white-space: nowrap;
}

@media (width >= 561px) {
  .woocommerce-message > .button,
  .woocommerce-info > .button,
  .woocommerce-error > .button {
    flex: 0 0 auto;
    margin-left: auto;
  }
}

/* Overzicht ---------------------------------------------------------------- */

.shop-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-6);
  align-items: start;
}

/* Zonder filterblok krijgen de producten de volle breedte. */
.shop-layout--full { grid-template-columns: minmax(0, 1fr); }

.shop-results { min-width: 0; }

.post-type-archive-product .page-title,
.tax-product_cat .page-title { margin-bottom: var(--bsv-space-4); }

/* --- Vergelijkingstabel op de merkpagina ----------------------------------
   Boven de lijst, want dit is de vraag waarmee iemand op een merkpagina komt.
   Zie inc/merk-vergelijking.php en docs/merkpagina-seo.md.

   Hoekig, niet afgerond: docs/design-reference.md paragraaf 2 zegt knoppen rond
   en tabellen hoekig. */

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

/* De tabel schuift op een smal scherm. Het venster heeft tabindex, want anders
   is er geen manier om er met een toetsenbord doorheen te komen. */
.brand-compare__scroll {
  overflow-x: auto;
  border: 1px solid var(--bsv-line);
  background: var(--bsv-surface);
}

.brand-compare__scroll:focus-visible {
  outline: 3px solid var(--bsv-focus);
  outline-offset: 2px;
}

.brand-compare__table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: var(--bsv-fs-sm);
}

.brand-compare__table :is(th, td) {
  padding: 10px var(--bsv-space-3);
  border-bottom: 1px solid var(--bsv-line-soft);
  text-align: left;
  vertical-align: top;
}

.brand-compare__table thead th {
  border-bottom: 1px solid var(--bsv-line);
  background: var(--bsv-bg);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-compare__table tbody tr:last-child :is(th, td) { border-bottom: 0; }

@media (width <= 760px) {
  .brand-compare__scroll { overflow: visible; border: 0; background: transparent; }
  .brand-compare__table { display: block; min-width: 0; }

  .brand-compare__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  .brand-compare__table :is(tbody, tr, th, td) { display: block; width: 100%; }

  .brand-compare__table tr {
    margin-bottom: var(--bsv-space-3);
    border: 1px solid var(--bsv-line);
    background: var(--bsv-surface);
  }

  .brand-compare__table tbody th {
    padding: 11px var(--bsv-space-3);
    border-bottom: 1px solid var(--bsv-line);
    background: var(--bsv-bg);
  }

  .brand-compare__table tbody td {
    display: flex;
    justify-content: space-between;
    gap: var(--bsv-space-3);
    padding: 9px var(--bsv-space-3);
    text-align: right;
  }

  .brand-compare__table tbody td::before {
    content: attr(data-label);
    color: var(--bsv-muted);
    font-size: var(--bsv-fs-xs);
    font-weight: 650;
    text-align: left;
  }
}
.brand-compare__table tbody th { color: var(--bsv-ink); font-weight: 700; }
.brand-compare__table tbody th a { color: inherit; }

/* Cijfers onder elkaar leesbaar houden: gelijke breedte per cijfer, en rechts
   uitgelijnd zodat je de grootte aan de lengte ziet. */
.brand-compare__table .num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* De kolom waar het om gaat. */
.brand-compare__table .num--nadruk { color: var(--bsv-ink); font-weight: 700; }

.brand-compare__uitleg {
  margin: var(--bsv-space-2) 0 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

/* --- Merkpagina -----------------------------------------------------------
   Het logo, de naam en een korte tekst bij elkaar in één kop. Zie
   design/merkpagina-mockup.html en inc/merken.php. Op een telefoon staat de
   plaat boven de tekst; vanaf 561 px past hij ernaast. */

.brandhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-4);
  align-items: start;
  margin-bottom: var(--bsv-space-5);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

/* Zonder logo is er niets naast te zetten, dus één kolom. De omlijsting blijft
   wel staan: liet je hem weg, dan sprong de titel 216 px opzij zodra je van een
   merk mét logo naar een merk zónder ging, en dat is de helft van de merken.
   Zonder deze regel hield het raster bovendien een lege tweede kolom over. */
.brandhead--zonder-logo { grid-template-columns: minmax(0, 1fr); }

/* Een merkplaat, geen vierkant: de meeste merklogo's zijn woordmerken met een
   liggende verhouding en die verzuipen in een vierkant vlak. De maat staat
   vast, zodat de tekst ernaast niet verspringt terwijl het logo binnenkomt. */
.brandmark {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  width: 148px;
  height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

/* Nogal wat merken voeren een donkere site en leveren alleen een wit
   woordmerk. Dat is het echte logo, dus we gooien het niet weg; de plaat gaat
   eromheen mee. Het bestand heet dan `<slug>-wit`; zie inc/merken.php. */
.brandmark--donker {
  border-color: var(--bsv-ink);
  background: var(--bsv-ink);
}

/* min-width: 0 is hier niet overbodig. Een afbeelding in een raster krijgt
   min-width: auto, en dat is bij een plaatje zijn eigen breedte: het logo van
   Trek 'n Eat is 795 px en liep zonder deze regel buiten de plaat. */
.brandmark img {
  width: auto;
  min-width: 0;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.brandhead__tekst { min-width: 0; }

.brandkicker {
  margin: 0 0 3px;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.brandhead .page-title { margin-bottom: var(--bsv-space-2); }

.brandintro {
  max-width: 72ch;
  color: var(--bsv-body);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.brandintro p { margin: 0; }
.brandintro p + p { margin-top: 9px; }

@media (width >= 561px) {
  .brandhead {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--bsv-space-5);
    padding: var(--bsv-space-5);
  }

  .brandmark { width: 168px; height: 72px; padding: 12px 14px; }
}

.archive-intro {
  max-width: 70ch;
  margin: 0 0 var(--bsv-space-6);
  color: var(--bsv-body);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.post-type-archive-product .page-title + .shop-layout,
.tax-product_cat .page-title + .shop-layout { margin-top: var(--bsv-space-5); }

/* Ingekort vanaf de eerste weergave, alleen met JavaScript (anders is er geen
   knop om hem open te klappen). Dit zette main.js na het tekenen, en dan
   verschoof de pagina. */
.bsv-js .archive-intro:not(.is-expanded) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bsv-js .archive-intro-toggle { display: inline-flex; align-items: center; }

/* De subcategorieën bovenaan een categoriepagina, vóór de filters en de
   producten. Het rooster is .cat-grid uit components.css (3, 5 en 8 kolommen);
   de filterchips voor een categorie zonder subcategorieën staan eronder. */
.subcats { margin: 0 0 var(--bsv-space-6); }

.subcats__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bsv-space-3);
  margin-bottom: var(--bsv-space-3);
}

.subcats__head h2,
.subcats__head p { margin: 0; }
.subcats__head h2 { font-size: clamp(20px, 2.2vw, 26px); }
.subcats__head p { color: var(--bsv-muted); font-size: var(--bsv-fs-sm); }
.subcats .cat-grid + .subcats__chips { margin-top: var(--bsv-space-4); }

.subcats__more { margin-top: var(--bsv-space-3); }

.subcats__more > summary {
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  padding: 9px 16px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  font-weight: 750;
  cursor: pointer;
}
.subcats__more > summary::-webkit-details-marker { display: none; }
.subcats__more > summary::after { content: "+"; margin-left: 8px; font-size: 18px; }
.subcats__more[open] > summary::after { content: "−"; }
.subcats__more > .cat-grid { margin-top: var(--bsv-space-3); }

.shop-products-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bsv-space-3);
  margin: var(--bsv-space-6) 0 var(--bsv-space-3);
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + 88px);
}
.shop-products-head h2 { margin: 0; font-size: clamp(22px, 2.4vw, 30px); }
.shop-products-head p { margin: 0; color: var(--bsv-muted); font-size: var(--bsv-fs-sm); font-weight: 700; }

.archive-intro > :last-child,
.archive-seo > :last-child { margin-bottom: 0; }

.archive-intro-toggle {
  display: none;
  min-height: var(--bsv-touch);
  margin: calc(-1 * var(--bsv-space-5)) 0 var(--bsv-space-5);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--bsv-ink);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* Houd de compacte filterbediening bereikbaar onder de vaste winkelkop. */
.shop-mobile-controls {
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + 8px);
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--bsv-space-2);
  margin: 0 0 var(--bsv-space-3);
  padding: var(--bsv-space-2);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 5px 15px rgb(0 0 0 / 6%);
  backdrop-filter: blur(8px);
}

@media (width <= 620px) {
  .subcats__head { display: block; }
  .subcats__head p { margin-top: 4px; }
}

.shop-mobile-controls a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bsv-space-2);
  min-height: var(--bsv-touch);
  padding: 8px 14px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  font: inherit;
  font-weight: 750;
  text-decoration: none;
  cursor: pointer;
}

/* Geel hoort bij Filter, de primaire actie. Staat alleen Sorteren er, dan
   is die niet ineens primair. */
.shop-mobile-controls:not(.shop-mobile-controls--sort-only) a:first-child { background: var(--bsv-yellow); border-color: var(--bsv-yellow); }

/* Na de basisregel, anders wint de tweekolomsindeling hierboven. */
.shop-mobile-controls--sort-only { grid-template-columns: minmax(0, 1fr); }

.shop-mobile-controls a span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  min-width: 23px;
  height: 23px;
  padding: 0 6px;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-black);
  color: var(--bsv-surface);
  font-size: var(--bsv-fs-xs);
}

.shop-filters {
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + 88px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.shop-filters > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--bsv-touch);
  padding: var(--bsv-space-3) var(--bsv-space-4);
  font-weight: 750;
  cursor: pointer;
}

.shop-filters > summary::-webkit-details-marker,
.shop-filter-group > summary::-webkit-details-marker { display: none; }

.shop-filters > summary::after,
.shop-filter-group > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: var(--bsv-space-3);
  border-right: 2px solid currentcolor;
  border-bottom: 2px solid currentcolor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 160ms ease;
}

.shop-filters[open] > summary::after,
.shop-filter-group[open] > summary::after {
  transform: rotate(225deg) translate(-2px, -2px);
}

.shop-filters__count {
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 26px;
  padding: 0 7px;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-black);
  color: var(--bsv-surface);
  font-size: var(--bsv-fs-xs);
  margin-left: auto;
}

/* Geef de toelichting dezelfde binnenruimte als de filteropties. */
.shop-filters__hint {
  margin: 0;
  padding: var(--bsv-space-3) var(--bsv-space-4) var(--bsv-space-4);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  line-height: 1.6;
}

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

.shop-filters__form.is-loading {
  opacity: 0.65;
  pointer-events: none;
}

.shop-filter-group {
  border-bottom: 1px solid var(--bsv-line-soft);
}

.shop-filter-group > summary {
  display: flex;
  align-items: center;
  min-height: var(--bsv-touch);
  padding: 0;
  color: var(--bsv-ink);
  font-weight: 700;
  cursor: pointer;
}

.shop-filter-group > summary::after { margin-left: auto; }

.shop-filters fieldset {
  min-width: 0;
  margin: 0;
  padding: var(--bsv-space-4) 0;
  border: 0;
  border-bottom: 0;
}

.shop-filters legend,
.shop-filters fieldset > label {
  overflow-wrap: anywhere;
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  gap: var(--bsv-space-2);
  min-height: var(--bsv-touch);
  cursor: pointer;
}

.shop-filters fieldset > label:has(input:disabled) {
  color: var(--bsv-muted);
  cursor: not-allowed;
  opacity: 0.65;
}

.shop-filter-option__count {
  min-width: 25px;
  margin-left: auto;
  padding: 2px 6px;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-bg);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
  line-height: 1.4;
  text-align: center;
}

.shop-filters input[type="checkbox"] {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  accent-color: var(--bsv-black);
}

.shop-filters__help {
  margin: 0 0 var(--bsv-space-2);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
}

.shop-filters__actions {
  display: grid;
  gap: var(--bsv-space-2);
  padding-top: var(--bsv-space-4);
  text-align: center;
}


.shop-filters__actions a {
  display: grid;
  place-items: center;
  min-height: var(--bsv-touch);
}

.shop-active-filters {
  display: flex;
  align-items: flex-start;
  flex-flow: column wrap;
  gap: var(--bsv-space-2);
  margin-bottom: var(--bsv-space-3);
}

.shop-active-filters__label {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
}

/* Ankert de `.screen-reader-text` in elke chip binnen deze rij; zie de
   toelichting bij `.lane` in components.css. */
.shop-active-filters__chips {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  width: 100%;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: none;
}

.shop-active-filters__chips::-webkit-scrollbar { display: none; }

.shop-active-filter {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 7px;
  min-height: var(--bsv-touch);
  padding: 6px 13px;
  border: 1px solid var(--bsv-black);
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
}

.shop-active-filter:hover {
  background: var(--bsv-bg);
  text-decoration: none;
}

.shop-active-filter > [aria-hidden="true"] { font-size: 18px; line-height: 1; }

.shop-active-filters__clear {
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  margin-left: 0;
  padding: 8px;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
  text-decoration: underline;
}

ul.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr));
  gap: var(--bsv-space-3);
  list-style: none;
  margin: 0 0 var(--bsv-space-5);
  padding: 0;
}

ul.products::before,
ul.products::after { content: none; }

/* `min-width: 0` haalt de ondergrens weg die een rastercel vanzelf krijgt: die
   staat op de inhoud en niet op de kolom, waardoor een kaart op een smal scherm
   weigert te krimpen en het hele overzicht opzij duwt. */
ul.products > li { display: flex; min-width: 0; margin: 0; width: auto; float: none; }
ul.products > li > .product-card { flex: 1 1 auto; }

.shop-toolbar {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--bsv-space-3);
  min-height: 54px;
  margin-bottom: var(--bsv-space-4);
  padding: var(--bsv-space-3);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
  background: var(--bsv-bg);
}

.woocommerce-result-count {
  float: none;
  margin: 0;
  color: var(--bsv-muted);
  font-size: 13.5px;
}

.woocommerce-ordering {
  display: flex;
  float: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--bsv-space-2);
  margin: 0;
}

.woocommerce-ordering label {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  font-weight: 650;
}

.woocommerce-ordering select {
  min-width: 0;
  max-width: 210px;
  min-height: var(--bsv-touch);
  padding: 9px 14px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  font-size: 14px;
}

/* Zodra JavaScript de sortering zelf verstuurt, is de knop overbodig. Hij
   verdwijnt uit beeld maar blijft in de toetsenbordvolgorde staan, want daar
   versturen we bewust niet vanzelf. Bij focus komt hij terug. */
.woocommerce-ordering--auto .woocommerce-ordering__submit {
  position: absolute;
  width: 1px;
  min-width: 0;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.woocommerce-ordering--auto .woocommerce-ordering__submit:focus {
  position: static;
  width: auto;
  height: auto;
  min-height: 40px;
  padding: 10px 18px;
  margin: 0;
  overflow: visible;
  clip: auto;
  border: 1px solid var(--bsv-line);
}

.archive-seo {
  margin: var(--bsv-space-7) 0 0;
  padding-top: var(--bsv-space-6);
  border-top: 1px solid var(--bsv-line);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.archive-seo > * { max-width: 70ch; }

/* Merktekst onder de producten volgt de volledige breedte van het overzicht. */
.tax-product_brand .archive-seo > * { max-width: none; }
.tax-product_brand .archive-seo { margin-bottom: var(--bsv-space-7); }
.archive-seo h2 { font-size: var(--bsv-fs-lg); }

/* De verdiepende categorietekst en de kennisbankrij beginnen op dezelfde
   linker lijn. De tweede scheidslijn maakt duidelijk dat hier een nieuw,
   redactioneel blok begint zonder de artikelkaarten in een extra kaart te
   verpakken. */
.block--category-knowledge {
  margin-top: var(--bsv-space-7);
  padding-top: var(--bsv-space-6);
  border-top: 1px solid var(--bsv-line);
}

/* De ronde toevoegknop in de kaart. Een link naar ?add-to-cart= die main.js
   zonder herlaad afhandelt; de standen is-loading en is-added komen daarvandaan. */

.add-to-cart-round {
  display: grid;
  place-items: center;
  flex: 0 0 var(--bsv-touch);
  width: var(--bsv-touch);
  height: var(--bsv-touch);
  min-height: var(--bsv-touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  font-size: 0;
  cursor: pointer;
  position: relative;
}

/*
 * De knoptekst van WooCommerce staat op font-size: 0, maar blijft wel een
 * grid-item. Daardoor kreeg het raster twee rijen en zat het plusteken in de
 * bovenste helft in plaats van in het midden. Absoluut plaatsen haalt het uit
 * de rasterindeling; inset met auto-marges centreert het exact.
 */
.add-to-cart-round::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  background: currentcolor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11 5h2v14h-2z'/%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.add-to-cart-round:hover { background: var(--bsv-yellow-dark); }
.add-to-cart-round.is-loading { opacity: 0.6; cursor: progress; }

/* De melding na het toevoegen: onder de kop, rechts, bij de winkelwagenknop
   waarvan het bedrag net is veranderd. Op een telefoon over de volle breedte
   tussen de buitenmarges. Donker als de kop, met de link in het geel. */
.bsv-toast {
  position: fixed;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + var(--bsv-space-3));
  right: var(--bsv-space-4);
  left: var(--bsv-space-4);
  z-index: 55;
  display: flex;
  align-items: center;
  gap: var(--bsv-space-2);
  max-width: 480px;
  margin-left: auto;
  padding: var(--bsv-space-2) var(--bsv-space-2) var(--bsv-space-2) var(--bsv-space-4);
  border: 1px solid var(--bsv-black-2);
  border-radius: var(--bsv-radius);
  background: var(--bsv-black);
  color: var(--bsv-on-black);
  font-size: var(--bsv-fs-sm);
  line-height: 1.4;
}

.bsv-toast__text {
  flex: 1 1 auto;
  margin: 0;
}

.bsv-toast__link {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  min-height: var(--bsv-touch);
  padding: 0 var(--bsv-space-2);
  color: var(--bsv-yellow);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.bsv-toast__link:hover { color: var(--bsv-on-black); }

.bsv-toast__close {
  display: grid;
  flex: 0 0 var(--bsv-touch);
  place-items: center;
  width: var(--bsv-touch);
  height: var(--bsv-touch);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.bsv-toast__close:hover { background: var(--bsv-black-2); }

@media (prefers-reduced-motion: no-preference) {
  .bsv-toast { animation: bsv-toast-in 160ms ease-out; }

  @keyframes bsv-toast-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
  }
}

/* Even een vinkje na het toevoegen. */
.add-to-cart-round.is-added::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2l-4-4 1.4-1.4 2.6 2.6 7.6-7.6 1.4 1.4z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.5 16.2l-4-4 1.4-1.4 2.6 2.6 7.6-7.6 1.4 1.4z'/%3E%3C/svg%3E");
}



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

/* De basis hierboven is de telefoon: twee producten naast elkaar, de
   inleiding ingekort, de balken onder elkaar. Vanaf hier komt er ruimte bij. */

@media (width >= 601px) {
  .bsv-js .archive-intro:not(.is-expanded) {
    display: block;
    overflow: visible;
    -webkit-box-orient: horizontal;
    -webkit-line-clamp: none;
  }

  .bsv-js .archive-intro-toggle { display: none; }

  .shop-active-filters {
    align-items: center;
    flex-flow: row wrap;
  }

  .shop-active-filters__chips {
    position: static;
    flex-wrap: wrap;
    width: auto;
    padding-bottom: 0;
    overflow-x: visible;
    scrollbar-width: auto;
  }

  .shop-active-filters__chips::-webkit-scrollbar { display: block; }
  .shop-active-filter { flex: 0 1 auto; }
  .shop-active-filters__clear { margin-left: auto; }

  .shop-toolbar {
    align-items: center;
    flex-direction: row;
    padding: 6px 8px 6px var(--bsv-space-3);
  }

  .woocommerce-ordering { justify-content: normal; }
  .woocommerce-ordering select { min-width: auto; max-width: none; }
}

@media (width >= 861px) {
  ul.products { grid-template-columns: repeat(3, 1fr); gap: var(--bsv-space-4); }
}

/* Vanaf hier past het filterblok naast de producten en verdwijnt de plakkende
   knoppenbalk. */

@media (width >= 901px) {
  .shop-layout { grid-template-columns: minmax(230px, 270px) minmax(0, 1fr); }
  .shop-layout--full { grid-template-columns: minmax(0, 1fr); }
  .shop-mobile-controls { display: none; }

  .shop-filters-wrap {
    position: sticky;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + 16px);
    min-width: 0;
    max-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px) - var(--bsv-header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
  }

  .shop-filters {
    scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--bsv-header-h) + 16px);
  }
}

@media (width >= 1101px) {
  ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* Tabellen, formulierrijen en de algemene WooCommerce-knop. Ze stonden na het
   afsplitsen in woocommerce-product.css, terwijl de tabellen in winkelwagen en
   account horen en de knop overal. De paginering hoorde in dit rijtje thuis en
   staat inmiddels in components.css, want het thema drukt dezelfde lijst af op
   de kennisbank, het weblog en de zoekpagina. */

/* De paginering staat in components.css: hij geldt daar in één keer voor het
   productoverzicht en voor de kennisbank, het weblog en de zoekpagina, die
   dezelfde lijst met paginanummers afdrukken. */

.woocommerce-cart-form table,
.shop_table { width: 100%; border-collapse: collapse; background: var(--bsv-surface); border: 1px solid var(--bsv-line); border-radius: var(--bsv-radius); }

.shop_table th, .shop_table td { padding: 12px 14px; border-bottom: 1px solid var(--bsv-line-soft); text-align: left; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select,
.woocommerce form .form-row textarea {
  width: 100%;
  min-height: var(--bsv-touch);
  padding: 11px 14px;
  border: 1px solid var(--bsv-input-line);
  border-radius: var(--bsv-radius);
  font-size: var(--bsv-fs-base);
}

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

.woocommerce form .form-row .required { color: var(--bsv-error); }

.woocommerce #respond input#submit,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button {
  min-height: var(--bsv-touch);
  padding: 12px 22px;
  border: 0;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  font-weight: 700;
  cursor: pointer;
}

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

/* Laat op kleine schermen de producten eerder zien. */
@media (width <= 760px) {
  .subcats .cat-grid { display: flex; flex-wrap: wrap; gap: 8px; }
  .subcats .cat-tile { flex: 0 1 auto; min-width: 0; padding: 10px 12px; min-height: 44px; }
  .subcats .cat-tile__image { display: none; }
  .subcats .subcats__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 8px; }
  .subcats .subcats__chips .filter-chip { flex: 0 0 auto; white-space: nowrap; }
  .subcats .cat-tile small { display: none; }
}

/* De dieetfilters gebruiken dezelfde lijniconen als de productkaarten. */
.shop-filter-group label > span:has(> svg) {
  display: inline-flex;
  align-items: center;
  gap: var(--bsv-space-1);
}

.shop-filter-group label > span > svg {
  flex-shrink: 0;
}

/* Eén mobiele bediening: filters openen en direct sorteren. */
@media (width <= 900px) {
  .bsv-js .shop-filters > summary { display: none; }

  .bsv-js .shop-filters:not([open]),
  .bsv-js .shop-filters-wrap:has(.shop-filters:not([open])) { display: none; }
  .subcats__chips { display: none; }
  .shop-mobile-controls { padding: 0; border: 0; box-shadow: none; backdrop-filter: none; background: var(--bsv-bg); }
  .shop-mobile-controls [hidden] { display: none; }
  .shop-mobile-controls a { min-height: 48px; }
  .shop-mobile-controls .woocommerce-ordering { min-width: 0; margin: 0; }
  .shop-mobile-controls .woocommerce-ordering label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .shop-mobile-controls .woocommerce-ordering select { width: 100%; min-width: 0; min-height: 48px; padding-inline: 12px 28px; font-size: 14px; background: var(--bsv-surface); }
  .shop-filters__hint { margin: 0; padding-top: 16px; }
  .shop-filter-group > summary, .shop-filters fieldset > label { min-height: 48px; }
  .shop-toolbar { min-height: 0; padding: 0; border: 0; margin-bottom: 12px; }
}

/* Laat op een telefoon eerder producten zien; de volledige intro blijft open te klappen. */
@media (width <= 600px) {
  .bsv-js .archive-intro:not(.is-expanded) { -webkit-line-clamp: 2; }
  .archive-intro { margin-bottom: 4px; }
  .archive-intro-toggle { min-height: 48px; margin: 0 0 16px; }
  .subcats { margin-bottom: 20px; }
  .subcats__head p { display: none; }
}