/* De productpagina: galerij, samenvatting, voedingswaarden, beoordelingen.
 *
 * 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.
 */

/* Productpagina ------------------------------------------------------------ */

/* De afstand tussen galerij en koopblok is een kolomafstand en niets anders.
   Stond hier `gap`, dan gold diezelfde 64 px ook tussen de blokken eronder, en
   die dragen hun eigen marge al. Samen werd dat 88 tot 96 px waar het ontwerp
   32 voorschrijft, en dat is precies de brede witte band die docs/design-
   reference.md §2 verbiedt. De rijafstand blijft dus nul: elk blok hieronder
   bepaalt zijn eigen marge. */

/* Onder 860 px is de pagina geen raster maar een stapel. `align-items:
   stretch` hoort daarbij: met `start` krimpt elk blok tot zijn eigen inhoud en
   werd de galerij 180 bij 180 op een scherm van 375. */
.single-product div.product {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--bsv-space-4);
}

.single-product .woocommerce-product-gallery {
  grid-column: 1;
  order: 2;
  padding: var(--bsv-space-3);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  float: none;
  width: auto;
  min-width: 0;
}

/* De strook. Eén afbeelding per keer in beeld, horizontaal te schuiven met de
   vinger, de muis of het toetsenbord. Geen carrousel, alleen overflow. */
.single-product .bsv-gallery__stage {
  display: flex;
  gap: var(--bsv-space-4);
  margin: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* Geen schuifbalk onder de foto: je veegt, of je kiest een miniatuur. */
.single-product .bsv-gallery__stage::-webkit-scrollbar { display: none; }

.single-product .bsv-gallery__slide {
  position: relative;
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

/*
 * Het hele beeld opent de vergroting. Tot september 2026 stond er een knop
 * "Bekijk groter" op elke foto; die ging over het product heen en voegde niets
 * toe aan wat de cursor al zegt. De knop is er nog, onzichtbaar over het beeld,
 * zodat het ook met het toetsenbord werkt en een schermlezer hem noemt.
 */
.bsv-gallery__zoom {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.bsv-gallery__zoom:focus-visible {
  outline: 3px solid var(--bsv-focus);
  outline-offset: -4px;
}

.bsv-gallery-dialog {
  width: min(94vw, 1040px);
  height: min(92vh, 900px);
  padding: 0;
  border: 0;
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
}

.bsv-gallery-dialog::backdrop { background: rgb(0 0 0 / 72%); }

.bsv-gallery-dialog__bar,
.bsv-gallery-dialog__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bsv-space-3);
  padding: var(--bsv-space-3);
}

.bsv-gallery-dialog__bar { border-bottom: 1px solid var(--bsv-line-soft); }
.bsv-gallery-dialog__bar span { color: var(--bsv-muted); font-size: var(--bsv-fs-sm); font-weight: 700; }

.bsv-gallery-dialog button {
  min-height: var(--bsv-touch);
  padding: 8px 16px;
  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;
  cursor: pointer;
}

.bsv-gallery-dialog__bar button { min-width: var(--bsv-touch); padding: 4px 12px; font-size: 28px; line-height: 1; }

.bsv-gallery-dialog__image {
  display: grid;
  place-items: center;
  height: calc(100% - 130px);
  padding: var(--bsv-space-4);
  overflow: hidden;
}

.bsv-gallery-dialog__image img:not([src]) { display: none; }

.bsv-gallery-dialog__image img { width: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.bsv-gallery-dialog__controls { justify-content: center; border-top: 1px solid var(--bsv-line-soft); }

.single-product .woocommerce-product-gallery__image {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  min-height: 0;
}

.single-product .woocommerce-product-gallery__image-frame {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.single-product .woocommerce-product-gallery__image img {
  width: auto;
  max-width: 100%;
  max-height: min(620px, 68vw);
  margin: auto;
  object-fit: contain;
}

/* Miniaturen: een rij eronder, niet een kolom ernaast. Zonder schuifbalk, net
   als de productrijen; de rij schuift met wiel of veeg, en main.js schuift de
   strook mee zodat de miniatuur van de foto in beeld altijd te zien is. */
.bsv-gallery__thumbs {
  display: flex;
  gap: var(--bsv-space-2);
  margin: var(--bsv-space-3) 0 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.bsv-gallery__thumbs::-webkit-scrollbar { display: none; }

.bsv-gallery__thumb {
  display: grid;
  place-items: center;
  width: 66px;
  height: 66px;
  padding: 3px;
  border: 2px solid var(--bsv-line);
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-surface);
}

.bsv-gallery__thumb--card { color: var(--bsv-muted); }
.bsv-gallery__thumb--card[aria-current="true"] { color: var(--bsv-ink); }

.bsv-gallery__thumb:hover { border-color: var(--bsv-line-hover); }

.bsv-gallery__thumb[aria-current="true"] { border-color: var(--bsv-ink); }

.bsv-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* --- Etiketkaart in de galerij ------------------------------------------- */

/* Het laatste beeld in de strook is geen foto maar onze eigen gegevens; zie
   inc/etiketkaart.php. Hij heeft dezelfde maat als een foto, zodat het schuiven
   en het uitlijnen van scroll-snap niet halverwege blijft hangen. */
.bsv-gallery__slide--card { display: flex; align-items: center; padding: 4px; }

.label-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: clamp(16px, 4vw, 24px);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
  background: var(--bsv-bg);
  font-size: var(--bsv-fs-sm);
  max-height: 100%;
  overflow-y: auto;
}

.label-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--bsv-space-2);
  margin: 0;
}

.label-card__head b { font-size: var(--bsv-fs-md); color: var(--bsv-ink); }
.label-card__head span { color: var(--bsv-muted); }
.label-card__label { margin: 0; color: var(--bsv-muted); font-size: var(--bsv-fs-xs); }

.label-card__values { margin: 0; font-variant-numeric: tabular-nums; }

.label-card__values div {
  display: flex;
  justify-content: space-between;
  gap: var(--bsv-space-2);
  padding: 5px 0;
  border-bottom: 1px solid var(--bsv-line-soft);
}

.label-card__values div:last-child { border-bottom: 0; }
.label-card__values dt { color: var(--bsv-body); }
.label-card__values dd { margin: 0; color: var(--bsv-ink); font-weight: 650; }
.label-card__allergens { margin: 0; color: var(--bsv-body); }
.label-card__allergens b { color: var(--bsv-ink); }
.label-card__allergens--may { color: var(--bsv-muted); }

.label-card__more {
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* De koopgegevens komen uit hun eigen doos zodat prijs en titel bovenaan
   kunnen staan en de rest onder de galerij. */
.single-product .summary > .onsale,
.single-product .summary > .brand-line,
.single-product .summary > .product_title,
.single-product .summary > .rating-line,
.single-product .summary > .price,
.single-product .summary > .unit-price { order: 1; }

.single-product .summary > .brand-line { margin-bottom: -12px; }
.single-product .summary > .product_title { margin-bottom: -8px; }
.single-product .summary > .rating-line { margin-bottom: -10px; }

.single-product .summary > :not(.onsale, .brand-line, .product_title, .rating-line, .price, .unit-price) { order: 3; }

.single-product .summary {
  display: contents;
  grid-column: 1;
  min-width: 0;
  float: none;
  width: auto;
  margin: 0;
}

/* De koopzone vormt het duidelijke eindpunt van de informatiekolom. */
.single-product .summary form.cart,
.bsv-buybox {
  margin: var(--bsv-space-3) 0 0;
  padding: 20px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  box-shadow: 0 12px 30px rgb(26 35 29 / 8%);
}

.single-product .summary form.cart { padding: var(--bsv-space-3); }

/* Op een telefoon hoort de prijs bij de beslissing en de bestelknop, niet een
   volledig scherm hoger boven de galerij. Variabele producten tonen hem daarom
   bovenaan hun bestelkaart. Op bredere schermen blijft de prijs bij de titel. */
.single-product .product-type-variable .summary > .price,
.single-product .product-type-variable .summary > .unit-price { display: none; }

.bsv-cart__price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bsv-space-2);
  margin-bottom: var(--bsv-space-4);
  color: var(--bsv-ink);
  font-size: clamp(26px, 8vw, 34px);
  font-weight: 750;
  line-height: 1.15;
}

.bsv-cart__price .unit-price {
  flex-basis: 100%;
  font-size: var(--bsv-fs-sm);
  font-weight: 400;
}

/* Bij uiteenlopende variantprijzen zet WooCommerce na de keuze het exacte
   bedrag in het formulier. Dat bedrag vervangt dan de vooraf getoonde vork. */
.bsv-cart:has(.woocommerce-variation-price:not(:empty)) .bsv-cart__price { display: none; }

/* Het aanbiedingslabel staat boven de merknaam; .tag geeft het de vorm van de
   labels op de productkaart, zodat het overal hetzelfde ding is. align-self
   houdt het klein: op mobiel is de samenvatting display: contents en zouden de
   kinderen anders de volle breedte pakken. */
.single-product .summary > .onsale {
  place-self: flex-start start;
  width: fit-content;
  margin: 0 0 var(--bsv-space-2);
}

.single-product .product_title { font-size: 24px; margin: 4px 0 8px; }

.single-product .summary > .price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--bsv-space-2);

  /* De negatieve ondermarge hoort bij de stapeling op een smal scherm: prijs
     en titel kruipen daar naar elkaar toe. Vanaf 861 px staat hij op nul. */
  margin: var(--bsv-space-3) 0 -12px;
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 750;
  line-height: 1.15;
  color: var(--bsv-ink);
}

/*
 * WooCommerce zet de oude en de nieuwe prijs als <del> en <ins> pal achter
 * elkaar, zonder ruimte. Zonder deze regels lees je "€ 7,59€ 6,07", met de
 * nieuwe prijs onderstreept omdat een <ins> dat standaard is.
 */
.single-product .summary > .price del {
  font-size: 0.62em;
  font-weight: 700;
  color: var(--bsv-muted);
  text-decoration: line-through;
}

.single-product .summary > .price ins {
  background: none;
  color: var(--bsv-sale);
  text-decoration: none;
}

.brand-line { margin: 0; font-size: var(--bsv-fs-sm); }
.brand-line a { color: var(--bsv-ink); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; }
.brand-line a:hover { color: var(--bsv-ink); text-decoration: underline; text-underline-offset: 3px; }

.legal-name { margin: 4px 0 12px; font-size: 15px; line-height: 1.45; color: var(--bsv-muted); }

.rating-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 14px; font-size: 13.5px; color: var(--bsv-muted); }
.rating-line a { text-decoration: underline; text-underline-offset: 2px; }

.key-specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  overflow: hidden;
}

.key-specs div { padding: 12px; border-right: 1px solid var(--bsv-line-soft); border-bottom: 1px solid var(--bsv-line-soft); }
.key-specs div:nth-child(2n) { border-right: 0; }
.key-specs div:nth-last-child(-n+2) { border-bottom: 0; }
.key-specs div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
.key-specs b { display: block; font-size: var(--bsv-fs-md); color: var(--bsv-ink); }
.key-specs small { font-size: var(--bsv-fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--bsv-muted); }

.diet-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--bsv-space-4); }

.bsv-buybox__status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.bsv-buybox__status::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bsv-success);
  box-shadow: 0 0 0 4px rgb(29 111 66 / 12%);
}

.bsv-buybox__status .stock { margin: 0; }
.bsv-buybox__status > span { padding-left: 8px; border-left: 1px solid var(--bsv-line); }

/* Aantalkiezer ------------------------------------------------------------- */

.qty-stepper {
  display: flex;
  align-items: center;
  height: 52px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-pill);
  flex: 0 0 auto;
}

.qty-stepper__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 52px;
  border: 0;
  background: transparent;
  border-radius: var(--bsv-radius-pill);
  color: var(--bsv-ink);
  cursor: pointer;
}

.qty-stepper__btn:hover { background: var(--bsv-bg); }

.qty-stepper input {
  width: 40px;
  height: 44px;
  border: 0;
  background: transparent;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--bsv-ink);
  -moz-appearance: textfield;
}

.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bsv-cart__row { display: flex; flex-direction: column; gap: 10px; }
.bsv-cart__row .single_add_to_cart_button { flex: 1; width: 100%; min-height: 52px; }
.bsv-cart__row .qty-stepper { align-self: stretch; justify-content: space-between; }

/* Variantkeuze ------------------------------------------------------------- */

.bsv-variations { display: grid; gap: var(--bsv-space-3); margin-bottom: var(--bsv-space-4); }

.bsv-variations__label {
  display: block;
  margin-bottom: var(--bsv-space-2);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
}

.bsv-variations__value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--bsv-space-3); }

/* Zonder JavaScript blijft dit de keuze; hij moet dus te bedienen zijn. */
.bsv-variations select {
  min-height: var(--bsv-touch);
  flex: 1 1 200px;
  max-width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-base);
  font-family: inherit;
}

.bsv-variations .reset_variations {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  text-decoration: underline;
}

/* Met JavaScript worden het blokjes; de select blijft de bron van waarheid. */
.bsv-variations__select--replaced { display: none; }

.bsv-variations__chips { display: flex; flex-wrap: wrap; gap: var(--bsv-space-2); }

.bsv-chip__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bsv-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--bsv-touch);
  min-width: var(--bsv-touch);
  padding: 10px 18px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-base);
  font-weight: 650;
  cursor: pointer;
}

.bsv-chip:hover { border-color: var(--bsv-line-hover); }

.bsv-chip__input:checked + .bsv-chip {
  border-color: var(--bsv-ink);
  box-shadow: inset 0 0 0 1px var(--bsv-ink);
}

/* De focusomranding hoort bij het blokje, niet bij het weggestopte keuzerondje. */
.bsv-chip__input:focus-visible + .bsv-chip {
  outline: 3px solid var(--bsv-focus);
  outline-offset: 2px;
}

.bsv-chip__input:disabled + .bsv-chip {
  border-style: dashed;
  color: var(--bsv-muted);
  cursor: not-allowed;
  text-decoration: line-through;
}

.woocommerce-variation-price { margin-bottom: var(--bsv-space-3); }

.bsv-cart .woocommerce-variation-price .price {
  font-size: clamp(26px, 8vw, 34px);
  line-height: 1.15;
}

.woocommerce-variation-availability .stock { margin: 0 0 var(--bsv-space-3); }

/* Zolang er niets gekozen is, blijft de knop onbruikbaar; dat moet je zien.
   Geen doorzichtigheid: dan zakt het contrast van de tekst mee. */
.woocommerce button.single_add_to_cart_button.disabled,
.woocommerce button.single_add_to_cart_button.wc-variation-selection-needed,
button.single_add_to_cart_button.disabled,
button.single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--bsv-line-soft);
  color: var(--bsv-muted);
  cursor: not-allowed;
}

.buy-assurances {
  display: grid;
  gap: 8px;
  margin: 12px 4px 0;
  padding: 0;
  list-style: none;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.buy-assurances a,
.buy-assurances a:hover,
.buy-assurances a:focus,
.buy-assurances a:active,
.buy-assurances a:visited {
  color: inherit;
  text-decoration: none;
}

.buy-assurances a:hover { color: var(--bsv-ink); }

.buy-assurances a:focus-visible {
  outline: 2px solid var(--bsv-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

.buy-assurances li {
  position: relative;
  padding-left: 24px;
}

.buy-assurances li::before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 5px;
  width: 6px;
  height: 11px;
  border: solid var(--bsv-success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.product-wishlist {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--bsv-touch);
  margin-top: var(--bsv-space-2);
  padding: 8px 2px;
  border: 0;
  background: transparent;
  color: var(--bsv-muted);
  font: inherit;
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

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

.stock.in-stock { color: var(--bsv-success); font-weight: 600; font-size: 13.5px; }
.stock.out-of-stock { color: var(--bsv-error); font-weight: 600; font-size: 13.5px; }

/* Tabbladen als uitklappers ------------------------------------------------ */

.product-accordions {
  grid-column: 1 / -1;
  margin-top: var(--bsv-space-5);
  padding: 22px;
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.woocommerce-product-attributes { width: 100%; border-collapse: collapse; font-size: 14px; }

.woocommerce-product-attributes th,
.woocommerce-product-attributes td { padding: 9px 10px; border-bottom: 1px solid var(--bsv-line-soft); text-align: left; }
.woocommerce-product-attributes th { color: var(--bsv-muted); font-weight: 500; }
.woocommerce-product-attributes td { color: var(--bsv-ink); font-weight: 600; }

/* De sectie heeft al een <h2>Beoordelingen; reviews.php van WooCommerce zet
   daar een tweede kop met dezelfde tekst bovenop. display:none haalt hem ook
   uit de toegankelijkheidsboom, dus de dubbele kop verdwijnt echt. */
.product-reviews .woocommerce-Reviews-title { display: none; }

/* Verwante producten ------------------------------------------------------- */

.related.products,
.upsells.products { grid-column: 1 / -1; margin-top: var(--bsv-space-6); }

.related.products h2,
.upsells.products h2 { font-size: var(--bsv-fs-lg); margin-bottom: var(--bsv-space-3); }

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

/* Vanaf hier is er ruimte voor twee kolommen naast elkaar en valt de stapeling
   hierboven weg. */

@media (width >= 861px) {
  .single-product div.product {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
    flex-direction: row;
    align-items: start;
    gap: 0 clamp(28px, 5vw, 64px);
  }

  .single-product .summary { display: block; grid-column: 2; }
  .single-product .woocommerce-product-gallery { order: 0; }

  .single-product .product-type-variable .summary > .price { display: flex; }
  .single-product .product-type-variable .summary > .unit-price { display: block; }

  .bsv-cart__price { display: none; }

  .single-product .summary > .onsale,
  .single-product .summary > .brand-line,
  .single-product .summary > .product_title,
  .single-product .summary > .rating-line,
  .single-product .summary > .price,
  .single-product .summary > .unit-price { order: 0; }

  .single-product .summary > .brand-line,
  .single-product .summary > .product_title,
  .single-product .summary > .rating-line,
  .single-product .summary > .price { margin-bottom: 0; }

  .single-product .summary > :not(.onsale, .brand-line, .product_title, .rating-line, .price, .unit-price) { order: 0; }

  .single-product .product_title { font-size: var(--bsv-fs-xl); }

  /* Drie kolommen in plaats van twee, dus een andere rand valt weg. De
     volgorde telt: 3n en n+4 moeten ná 2n en -n+2 staan, anders houdt elke
     zesde cel zijn rand. */
  .key-specs { grid-template-columns: repeat(3, 1fr); }
  .key-specs div:nth-child(2n) { border-right: 1px solid var(--bsv-line-soft); }
  .key-specs div:nth-last-child(-n+2) { border-bottom: 1px solid var(--bsv-line-soft); }
  .key-specs div:last-child:nth-child(odd) { grid-column: auto; border-right: 1px solid var(--bsv-line-soft); }
  .key-specs div:nth-child(3n) { border-right: 0; }
  .key-specs div:nth-child(n+4) { border-bottom: 0; }

  /* De laatste cel is hierboven vrijgemaakt van de tweekolomsregel. Staat hij
     toevallig in de derde kolom, dan hoort zijn rand alsnog weg. */
  .key-specs div:nth-child(3n):last-child { border-right: 0; }
}

@media (width >= 481px) {
  .single-product .woocommerce-product-gallery { padding: var(--bsv-space-4); }
  .single-product .summary form.cart { padding: 20px; }

  .bsv-cart__row { flex-direction: row; }
  .bsv-cart__row .qty-stepper { align-self: auto; justify-content: normal; }
  .bsv-cart__row .single_add_to_cart_button { width: auto; }
}

/* --- Onderkant van de productpagina ------------------------------------- */

/* De productkolommen vormen een grid; zonder deze regel belandt de
   omschrijving als derde kolom naast de galerij in plaats van eronder. De
   volgorde hoort bij de stapeling op een smal scherm: alles onder de galerij
   en onder de koopzone. */
.product-section,
.product-jump,
.product-preparation,
.product-info-grid,
.product-nutrition,
.product-reviews,
.product-legal-info,
.single-product .related,
.single-product .up-sells,
.single-product div.product > .bsv-variant-section {
  grid-column: 1 / -1;
  order: 4;
}

/* Deze twee leunden op de rijafstand van het raster en hadden zelf geen marge.
   Nu die nul is, staat hun eigen afstand hier. */
.single-product .related,
.single-product .up-sells {
  margin-top: var(--bsv-space-4);
}

.product-section { margin-top: var(--bsv-space-4); }

.product-preparation {
  margin-top: var(--bsv-space-4);
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.product-preparation__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--bsv-space-4);
  margin-bottom: var(--bsv-space-4);
}

.product-preparation__head .product-section__title { margin-bottom: 4px; }
.product-preparation__head p { margin: 0; color: var(--bsv-muted); }

.product-preparation__time {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-yellow);
  color: var(--bsv-black);
  font-size: var(--bsv-fs-md);
}

.product-preparation__single { margin: 0; }

.product-preparation__steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-3);
  list-style: none;
}

.product-preparation__steps li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: var(--bsv-space-3);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
}

.product-preparation__steps li > span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bsv-ink);
  color: var(--bsv-surface);
  font-weight: 700;
}

.product-preparation__steps p {
  align-self: center;
  margin: 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
  white-space: pre-line;
}

.product-jump {
  display: block;
  align-items: center;
  gap: var(--bsv-space-3);
  margin-top: var(--bsv-space-4);
  margin-inline: calc(-1 * var(--bsv-space-1));
  padding: 10px 0 10px var(--bsv-space-2);
  overflow: hidden;
  border: 1px solid var(--bsv-line);
  border-right: 0;
  border-left: 0;
  border-radius: 0;
  background: var(--bsv-surface);
}

.product-jump__label {
  display: block;
  margin: 0 8px 4px;
  flex: 0 0 auto;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product-jump ul {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0 var(--bsv-space-3) 0 0;
  overflow-x: auto;
  scrollbar-width: none;
  list-style: none;
}

.product-jump ul::-webkit-scrollbar { display: none; }
.product-jump li { flex: 0 0 auto; }

.product-jump a {
  display: inline-flex;
  align-items: center;
  min-height: var(--bsv-touch);
  padding: 8px 12px;
  border-radius: var(--bsv-radius-pill);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-sm);
  font-weight: 650;
}

.product-jump a:hover { background: var(--bsv-bg); text-decoration: none; }

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

.product-section--aside-only .product-section__grid { grid-template-columns: minmax(0, 1fr); }

.product-section__title {
  font-size: var(--bsv-fs-lg);
  margin: 0 0 var(--bsv-space-3);
}

.product-section__body {
  max-width: 68ch;
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}
.product-section__body p { margin: 0 0 var(--bsv-space-3); }

.product-section__aside {
  background: var(--bsv-surface);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-lg);
  padding: var(--bsv-space-4);
}

.product-section__aside .accordion:first-of-type { border-top: 0; }

/* --- Voedingswaarden ----------------------------------------------------- */

.product-nutrition {
  margin-top: var(--bsv-space-4);
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.product-food-info,
.product-legal-info {
  margin-top: var(--bsv-space-5);
  padding: var(--bsv-space-6);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.product-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-4);
  margin-top: var(--bsv-space-4);
  align-items: start;
}

.product-info-grid > .product-food-info { margin-top: 0; height: 100%; }
.product-info-grid > :only-child { grid-column: 1 / -1; }

/* Productinformatie gebruikt bij food en non-food hetzelfde informatievak.
   .product is een grid met twee kolommen; zonder grid-column zou de kaart in de
   eerste kolom blijven staan, halfbreed onder de beoordelingen. */
.product-legal-info,
.product-section.product-non-food {
  grid-column: 1 / -1;
  padding: clamp(20px, 4vw, 36px);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  overflow-wrap: anywhere;
}

.product-non-food > h2 {
  margin: 0 0 var(--bsv-space-3);
  font-size: var(--bsv-fs-lg);
}

.product-non-food > :last-child { margin-bottom: 0; }

.product-food-info h3 {
  margin: 0 0 var(--bsv-space-2);
  font-size: var(--bsv-fs-md);
}

.product-food-info__ingredients p,
.product-food-info__allergens p {
  margin: 0;
}

.product-food-info__note {
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.product-food-info__allergens {
  margin-top: var(--bsv-space-4);
  padding: clamp(16px, 3vw, 22px);
  border: 1px solid var(--bsv-warning-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-warning-soft);
}

.product-food-info__allergen-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--bsv-space-3);
}

.product-food-info__allergen-heading h3 { margin: 0; }

.product-food-info__allergen-icon {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bsv-warning);
  color: #fff;
  font-size: var(--bsv-fs-sm);
  font-weight: 800;
}

.product-food-info__allergen-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 12px 0;
  border-top: 1px solid rgb(138 90 0 / 22%);
}

.product-food-info__allergen-row strong { color: var(--bsv-warning-strong); }

.product-food-info__allergen-chips {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--bsv-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-allergen-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid var(--bsv-warning-line);
  border-radius: var(--bsv-radius-pill);
  color: var(--bsv-warning-strong);
  font-size: var(--bsv-fs-sm);
  font-weight: 750;
  line-height: 1.2;
}

.product-allergen-chip--contains {
  border-color: var(--bsv-warning);
  background: var(--bsv-warning-mark);
}

.product-allergen-chip--traces {
  border-style: dashed;
  background: var(--bsv-surface);
}

.product-allergen-chip__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.product-allergen-chip__icon svg { width: 18px; height: 18px; }

.product-food-info__allergen-clear,
.product-food-info__allergen-unknown { margin: 0; }

.product-food-info__allergen-clear { color: var(--bsv-success); font-weight: 700; }

.product-food-info__allergen-unknown { color: var(--bsv-warning); }

.product-allergen-status {
  display: inline-flex;
  align-items: center;
  gap: var(--bsv-space-2);
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid currentcolor;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-surface);
  font-size: var(--bsv-fs-sm);
  font-weight: 700;
  line-height: 1.3;
}

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

/* Stond verspreid over drie regels: `margin: 0` in een groep, kleur en
   tekengrootte in een tweede, en 120 regels verderop alsnog een margin-top die
   de eerste ongedaan maakte. Wie de marge wilde aanpassen zocht op de verkeerde
   plek. Nu bij elkaar. */
.product-food-info__label-check {
  margin: var(--bsv-space-4) 0 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.product-legal-info__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-4) var(--bsv-space-6);
  margin: 0;
}

.product-legal-info__list div {
  padding-top: var(--bsv-space-3);
  border-top: 1px solid var(--bsv-line-soft);
}

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

.product-legal-info__list dd {
  margin: var(--bsv-space-1) 0 0;
}

.product-nutrition__head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--bsv-space-4);
  margin-bottom: var(--bsv-space-4);
}

.product-nutrition__head .product-section__title { margin-bottom: 4px; }
.product-nutrition__head p { margin: 0; color: var(--bsv-muted); }

.product-nutrition__portion {
  flex: 0 0 auto;
  text-align: right;
}

.product-nutrition__portion strong,
.product-nutrition__portion span { display: block; }

.product-nutrition__portion strong { color: var(--bsv-ink); font-size: var(--bsv-fs-lg); }
.product-nutrition__portion span { font-size: var(--bsv-fs-xs); }

/* `position: relative` om dezelfde reden als bij `.lane` en `.rate-scroll`: de
   tabel hierin is minstens 480 pixels breed, en zodra er iets in staat dat
   `position: absolute` is -- `.screen-reader-text` is dat -- ontsnapt het aan
   deze overflow en telt het mee voor de breedte van de pagina. Er staat nu niets
   van dat soort in, maar het anker hoort bij het schuifgebied en niet bij wat er
   toevallig in staat. */
.product-nutrition__table-wrap {
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
}

.nutrition-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.nutrition-table th,
.nutrition-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--bsv-line-soft);
  text-align: right;
}

.nutrition-table th:first-child { text-align: left; }
.nutrition-table thead th { background: var(--bsv-bg); font-size: var(--bsv-fs-xs); }
.nutrition-table tbody th { font-weight: 650; }
.nutrition-table tbody tr:last-child > * { border-bottom: 0; }
.nutrition-table__sub th { padding-left: 30px; color: var(--bsv-muted); font-weight: 400; }

/* Op smalle schermen blijft het een tabel. Eerder werd elke voedingsstof hier
   een los kaartje met het kolomlabel erin herhaald: 746 pixels voor vier
   regels, en het leek niet meer op het etiket waar klanten het mee vergelijken.
   Drie kolommen passen op 320 pixels zodra de minimumbreedte weg is; alleen
   de energie loopt dan over twee regels, en dat mag. */
@media (width <= 760px) {
  .nutrition-table { min-width: 0; font-size: var(--bsv-fs-sm); }

  .nutrition-table th,
  .nutrition-table td { padding: 9px 10px; }

  .nutrition-table__sub th { padding-left: 22px; }
}

/* --- Lees meer ----------------------------------------------------------- */

/* Twee lappen tekst op de productpagina zijn lang en worden zelden helemaal
   gelezen: de beschrijving van de fabrikant en de rij productgegevens (EAN,
   nettohoeveelheid, bewaren, exploitant). Op een telefoon duwen ze samen ruim
   een scherm aan beoordelingen en vergelijkbare producten naar beneden. Ze
   staan er nog wel, één tik verderop.

   Alleen op een smal scherm, en alleen met JavaScript: zonder JavaScript doet
   de knop niets, dus dan blijft alles gewoon openstaan. */
@media (width <= 860px) {
  .bsv-js .product-section__body.is-clamped,
  .bsv-js .product-legal-info__list.is-clamped {
    max-height: 11.5em;
    overflow: hidden;

    /* Afgesneden regels aan de onderkant laten zien dat er meer is. Zonder dit
       lijkt de tekst netjes af te lopen en is de knop een raadsel. */
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  }

  /* Staat er een link in de ingeklapte tekst, dan mag Tab hem niet in het
     verborgen deel laten landen. */
  .bsv-js .product-section__body.is-clamped:has(:focus-visible),
  .bsv-js .product-legal-info__list.is-clamped:has(:focus-visible) {
    max-height: none;
    mask-image: none;
  }

  .readmore {
    display: inline-flex;
    align-items: center;
    min-height: var(--bsv-touch);
    margin-top: var(--bsv-space-2);
    padding: 0;
    border: 0;
    background: none;
    color: var(--bsv-ink);
    font: inherit;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
}

/* Breed scherm, of geen JavaScript: niets ingeklapt, dus ook geen knop. */
@media (width >= 861px) {
  .readmore { display: none; }
}

html:not(.bsv-js) .readmore { display: none; }

/* --- Beoordelingen ------------------------------------------------------- */

.product-reviews {
  margin-top: var(--bsv-space-4);
  padding-top: var(--bsv-space-5);
  border-top: 1px solid var(--bsv-line);
}

/* Onder 860 px is de pagina geen raster maar een flexstapel met 16 px ertussen,
   en die 16 telt bij de marge hierboven op. Vandaar hier 16 en niet 24 of 32:
   samen komt elk blok weer op de 32 px van het ontwerp uit.

   Dit blok staat met opzet ná de marges hierboven en niet bij de andere
   regels voor smalle schermen. Daar stond het eerst, en daar deed het niets:
   `.product-section` weegt even zwaar als `.product-section` binnen een
   mediaquery, dus won de regel die later in het bestand staat. */
@media (width >= 861px) {
  .product-jump,
  .product-section,
  .product-preparation,
  .product-nutrition,
  .product-info-grid,
  .product-reviews,
  .single-product .related,
  .single-product .up-sells,
  .single-product div.product > .bsv-variant-section { order: 0; }

  .product-jump,
  .product-section,
  .product-reviews,
  .single-product .related,
  .single-product .up-sells { margin-top: var(--bsv-space-6); }

  .product-preparation,
  .product-nutrition,
  .product-info-grid { margin-top: var(--bsv-space-5); }
}

.product-reviews__head {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--bsv-space-4);
  margin-bottom: var(--bsv-space-4);
}

.product-reviews__head .product-section__title { margin-bottom: 4px; }
.product-reviews__intro { margin: 0; color: var(--bsv-muted); }
.product-reviews__write { flex: 0 0 auto; align-self: flex-start; }

.product-reviews--empty {
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.product-reviews--empty .product-reviews__head { margin-bottom: var(--bsv-space-3); }
.product-reviews--empty .woocommerce-noreviews { display: none; }

.review-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-3);
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
  margin-bottom: var(--bsv-space-5);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.review-summary--compact {
  grid-template-columns: minmax(0, 1fr);
  max-width: 360px;
}

.review-summary__average {
  font-size: 44px;
  font-weight: 700;
  line-height: 1;
  margin: 0;
  color: var(--bsv-ink);
}

.review-summary__stars { margin: var(--bsv-space-1) 0 0; line-height: 0; }

/* Dezelfde sterren als op de homepage, uit bsv_the_review_stars(). De sterren
   van WooCommerce hebben een lettertype nodig dat dit thema niet laadt; zonder
   dat stond hun verborgen zin ("Gewaardeerd 5 op 5 ...") gewoon in beeld.
   Geldt ook voor de sterren per review, uit single-product/review-rating.php. */
.product-reviews .review-score__stars { display: inline-flex; gap: 2px; }
.product-reviews .review-score__star { display: inline-block; }
.product-reviews .review-score__star-stop--filled { stop-color: var(--bsv-star); }
.product-reviews .review-score__star-stop--empty { stop-color: var(--bsv-line); }
.product-reviews__list .review-rating { margin: 0 0 var(--bsv-space-1); line-height: 0; }
.review-summary__count { margin: var(--bsv-space-1) 0 0; font-size: var(--bsv-fs-xs); color: var(--bsv-muted); }

.review-summary__bars,
.review-summary__bars li { list-style: none; margin: 0; padding: 0; }

.review-summary__bars { display: grid; gap: 2px; }

.review-summary__bar {
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr) 28px;
  gap: var(--bsv-space-2);
  align-items: center;
  min-height: var(--bsv-touch);
  padding: 4px var(--bsv-space-2);
  border-radius: var(--bsv-radius-sm);
  font-size: var(--bsv-fs-xs);
  color: var(--bsv-muted);
  text-decoration: none;
}

.review-summary__bar:hover { background: var(--bsv-bg); color: var(--bsv-ink); }

.review-summary__track {
  background: var(--bsv-line-soft);
  border-radius: var(--bsv-radius-pill);
  height: 8px;
  overflow: hidden;
}

.review-summary__fill {
  display: block;
  height: 100%;
  background: var(--bsv-yellow-dark);
  border-radius: var(--bsv-radius-pill);
}

.review-summary__n { text-align: right; font-variant-numeric: tabular-nums; }

.product-reviews__policy {
  max-width: 72ch;
  margin: 0 0 var(--bsv-space-4);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-sm);
}

.product-reviews__policy > summary { width: fit-content; cursor: pointer; font-weight: 700; }

.product-reviews__policy > div {
  max-width: 70ch;
  margin-top: var(--bsv-space-2);
  padding: var(--bsv-space-3) var(--bsv-space-4);
  border-left: 3px solid var(--bsv-line);
  background: var(--bsv-bg);
}

.product-reviews__policy p {
  margin: 0 0 4px;
  max-width: 70ch;
}

.product-reviews__policy p:last-child { margin-bottom: 0; }

/* Een overgenomen beoordeling zegt dat zelf, anders lijkt hij van hier. */
.review-origin {
  margin: 0 0 var(--bsv-space-1);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
}

.review-filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-3);
  align-items: end;
  margin: 0 0 var(--bsv-space-5);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
  background: var(--bsv-bg);
}

.review-filters label,
.review-context-form label {
  display: grid;
  gap: 6px;
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-xs);
  font-weight: 700;
}

.review-filters select,
.review-context-form select,
.review-context-form input[type="file"] {
  width: 100%;
  min-height: var(--bsv-touch);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-surface);
  color: var(--bsv-body);
  font: inherit;
}

.review-filters select,
.review-context-form select { padding: 8px 34px 8px 10px; }

.review-filters > a {
  min-height: var(--bsv-touch);
  display: inline-flex;
  align-items: center;
}

.product-reviews__list #reviews { margin: 0; }
.product-reviews__list .woocommerce-Reviews-title { display: none; }

.product-reviews__list .commentlist {
  display: grid;
  gap: var(--bsv-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.product-reviews__list .commentlist > li { margin: 0; }

.product-reviews__list .comment_container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-3);
  padding: clamp(18px, 3vw, 26px);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
}

.product-reviews__list .avatar {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.product-reviews__list .comment-text {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}


/* Het beoordelingsformulier van WooCommerce vervangt de <select> door
   sterlinks. Die erfden een te lichte kleur en haalden 4,5:1 niet. */
.comment-form p.stars a { color: var(--bsv-star); }

.product-reviews__list .meta {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
}

.product-reviews__list .woocommerce-review__author { color: var(--bsv-ink); }

.product-reviews__list .woocommerce-review__verified {
  padding: 2px 7px;
  border-radius: var(--bsv-radius-pill);
  background: var(--bsv-success-soft);
  color: var(--bsv-success);
  font-style: normal;
  font-weight: 700;
}

.product-reviews__list .description > :last-child { margin-bottom: 0; }

.product-reviews__list [id="review_form_wrapper"] {
  display: none;
  margin-top: var(--bsv-space-5);
  padding: clamp(20px, 3vw, 32px);
  border-radius: var(--bsv-radius-lg);
  background: var(--bsv-surface);
  border: 1px solid var(--bsv-line);
}

.product-reviews__list [id="review_form_wrapper"]:target,
.product-reviews__list [id="review_form_wrapper"].is-visible { display: block; }

.product-reviews__list .comment-reply-title {
  display: block;
  margin-bottom: var(--bsv-space-2);
  font-size: var(--bsv-fs-lg);
  font-weight: 700;
}

.product-reviews__list .comment-form-rating label { display: block; margin-bottom: 6px; }
.product-reviews__list .comment-form-comment textarea { min-height: 140px; }

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

.review-context-form legend {
  padding: 0 6px;
  color: var(--bsv-ink);
  font-weight: 700;
}

.review-context-form__intro {
  margin: 0 0 var(--bsv-space-3);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
}

.review-context-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--bsv-space-3);
}

.review-context-form__grid p,
.comment-form-bsv-photo { margin: var(--bsv-space-4) 0 0; }
.comment-form-bsv-photo small { display: block; margin-top: 6px; color: var(--bsv-muted); }
.review-context-form input[type="file"] { padding: 7px; }

.review-context {
  display: grid;
  gap: var(--bsv-space-3);
  margin-top: var(--bsv-space-3);
}

.review-context dl {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bsv-space-2);
  margin: 0;
}

.review-context dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 6px 9px;
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-bg);
  font-size: var(--bsv-fs-xs);
}

.review-context dt { font-weight: 700; }
.review-context dd { margin: 0; }
.review-context__photo { margin: 0; }

.review-context__photo img {
  display: block;
  width: min(100%, 360px);
  height: auto;
  border-radius: var(--bsv-radius);
}

.product-reviews__list .children {
  margin: var(--bsv-space-3) 0 0 var(--bsv-space-4);
  padding: 0;
  list-style: none;
}

.product-reviews__list .bsv-review-response .comment_container {
  border-left: 4px solid var(--bsv-yellow-dark);
  background: var(--bsv-bg);
}

.bsv-review-response__label {
  margin: 0 0 var(--bsv-space-2);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-xs);
  font-weight: 700;
}

@media (width >= 1001px) {
  .product-jump { overflow: visible; }
  .product-jump ul { overflow-x: visible; scrollbar-width: auto; }
  .product-jump ul::-webkit-scrollbar { display: block; }
  .product-jump li { flex: 0 1 auto; }
}

@media (width >= 601px) {
  .product-food-info__allergen-row {
    grid-template-columns: minmax(150px, 0.7fr) minmax(0, 1.3fr);
    gap: var(--bsv-space-3);
  }

  .product-jump {
    display: flex;
    margin-inline: 0;
    padding: 12px 16px;
    border-right: 1px solid var(--bsv-line);
    border-left: 1px solid var(--bsv-line);
    border-radius: var(--bsv-radius-pill);
  }

  .product-jump__label { display: inline; margin: 0; }
  .product-jump ul { padding-right: 0; }
  .product-legal-info__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-nutrition__head { align-items: end; }
  .review-summary__bar { grid-template-columns: 74px minmax(0, 1fr) 34px; }

  .product-reviews__list .comment_container { grid-template-columns: 44px minmax(0, 1fr); }
  .product-reviews__list .avatar { display: inline; }

  .review-filters,
  .review-context-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .product-reviews__list .children { margin-left: clamp(24px, 6vw, 70px); }
}

@media (width >= 901px) {
  .product-section__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .product-section--aside-only .product-section__grid { grid-template-columns: minmax(0, 1fr); }
  .product-info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .review-summary {
    grid-template-columns: minmax(150px, 0.35fr) minmax(280px, 1fr);
    gap: var(--bsv-space-5);
  }

  /* Ná de regel hierboven: de compacte variant blijft één kolom. */
  .review-summary--compact { grid-template-columns: minmax(0, 1fr); }

  .product-preparation__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .review-filters { grid-template-columns: repeat(4, minmax(145px, 1fr)) auto; }
  .product-reviews__head { align-items: end; flex-direction: row; }
  .product-reviews__write { align-self: auto; }
}

.product-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--bsv-space-2);
}

.product-facts li {
  position: relative;
  padding-left: 26px;
  line-height: 1.5;
}

.product-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 6px;
  height: 11px;
  border: solid var(--bsv-success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Meerkoopactie: wat de klant moet nemen en tot wanneer, direct bij de prijs.
   Een rand in de actiekleur verbindt het met het label bovenaan. */
.single-product .summary > .meerkoop-uitleg {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--bsv-line-soft);
  border-left: 4px solid var(--bsv-sale);
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-surface);
  font-size: var(--bsv-fs-sm);
  line-height: 1.45;
}

.meerkoop-uitleg__kop { margin: 0 0 2px; color: var(--bsv-sale); }
.meerkoop-uitleg__tekst { margin: 0; color: var(--bsv-ink); }

/* Scanbare hiërarchie voor prijsinformatie, omschrijving en beoordelingen. */
.single-product .summary > .price-reference {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius-sm);
  background: var(--bsv-bg);
  color: var(--bsv-muted);
  font-size: var(--bsv-fs-xs);
  line-height: 1.45;
}

.single-product .summary > .woocommerce-product-details__short-description {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--bsv-line);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-copy);
  line-height: var(--bsv-lh-copy);
}

.single-product .summary > .woocommerce-product-details__short-description > :last-child {
  margin-bottom: 0;
}


.product-section__body h2 {
  margin: var(--bsv-space-5) 0 var(--bsv-space-2);
  font-size: var(--bsv-fs-md);
}

.product-reviews__list .woocommerce-noreviews {
  margin: var(--bsv-space-4) 0 0;
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line-soft);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-muted);
}

/* Accountwaarschuwing bij een product dat opgeslagen allergenen bevat. */
.account-allergen-warning {
  margin-bottom: var(--bsv-space-4);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-warning-line);
  border-radius: var(--bsv-radius-md);
  background: var(--bsv-warning-soft);
  color: var(--bsv-body);
}

.account-allergen-warning strong { color: var(--bsv-ink); }
.account-allergen-warning p { margin: var(--bsv-space-2) 0 0; }
.account-allergen-warning small { display: block; margin-top: var(--bsv-space-2); }

.account-diet-match {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--bsv-space-2);
  margin-bottom: var(--bsv-space-4);
  padding: var(--bsv-space-3) var(--bsv-space-4);
  border: 1px solid var(--bsv-success-line);
  border-radius: var(--bsv-radius-md);
  background: var(--bsv-success-soft);
  color: var(--bsv-success-strong);
}

.account-diet-match a { color: inherit; font-weight: 700; }

/* Video's gebruiken dezelfde schuifstrook, zonder foto-vergrotingsknop. */
.single-product .bsv-gallery__slide video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}

/* Eenvoudig reviewformulier, ook zonder WooCommerce-iconfont of JavaScript. */

.bsv-review-form { display: grid; gap: 18px; max-width: 780px; }
.bsv-review-form > * { min-width: 0; margin: 0; }
.bsv-review-form [hidden] { display: none !important; }

.bsv-review-form label,
.bsv-review-form legend { display: block; margin-bottom: 8px; font-weight: 700; }
.bsv-review-form small { display: block; margin-top: 6px; color: var(--bsv-muted); font-size: var(--bsv-fs-xs); }

.bsv-review-form :is(input[type="text"], input[type="email"], textarea) {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px;
  border: 1px solid var(--bsv-input-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
  color: var(--bsv-ink);
  font: inherit;
}

.bsv-review-form textarea { resize: vertical; }
.review-product { display: flex; align-items: center; gap: 16px; font-weight: 600; }
.review-product img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.review-product span { overflow-wrap: anywhere; }
.review-rating { border: 0; padding: 0; min-width: 0; }
.review-rating__stars { display: flex; width: fit-content; gap: 2px; }
.bsv-review-form .review-rating__star { position: relative; width: 44px; height: 48px; margin: 0; cursor: pointer; }
.review-rating__star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.review-rating__star svg { display: block; width: 44px; height: 44px; fill: none; stroke: #936100; stroke-width: 1.5; pointer-events: none; }

.review-rating__star.is-filled svg,
.review-rating:not(.is-enhanced) .review-rating__star:has(input:checked) svg,
.review-rating:not(.is-enhanced) .review-rating__star:has(~ .review-rating__star input:checked) svg { fill: var(--bsv-yellow); }
.review-rating__star:has(input:focus-visible) { outline: 3px solid var(--bsv-focus); outline-offset: 2px; border-radius: 4px; }
.review-rating__hint { display: block; min-height: 24px; font-size: var(--bsv-fs-sm); color: var(--bsv-muted); }
.review-upload__zone { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 16px; border: 1px dashed var(--bsv-input-line); border-radius: var(--bsv-radius); background: var(--bsv-bg); }
.review-upload__zone svg { width: 28px; height: 28px; fill: none; stroke: currentcolor; stroke-width: 1.8; }
.review-upload__zone input { flex: 1 1 200px; width: 100%; min-width: 0; max-width: 100%; font: inherit; }
.review-upload__zone input::file-selector-button { min-height: 44px; padding: 8px 16px; margin-right: 12px; border: 1px solid var(--bsv-input-line); border-radius: var(--bsv-radius); background: var(--bsv-surface); color: var(--bsv-ink); font: inherit; cursor: pointer; }
.review-upload__previews { display: flex; flex-wrap: wrap; gap: 12px; }
.review-upload__previews figure { width: 128px; margin: 12px 0 0; }
.review-upload__previews img { width: 128px; height: 96px; object-fit: cover; border-radius: var(--bsv-radius); }
.review-upload__previews figcaption { overflow-wrap: anywhere; font-size: var(--bsv-fs-xs); }
.review-upload__previews button { min-height: 44px; text-decoration: underline; font: inherit; cursor: pointer; }
.review-form-help { color: var(--bsv-muted); font-size: var(--bsv-fs-xs); }
.review-form-status { padding: 16px; border: 1px solid var(--bsv-line); border-radius: var(--bsv-radius); }

.review-form-status.is-error,
.review-field-error { color: var(--bsv-error); }
.review-field-error { margin: 6px 0 0; font-size: var(--bsv-fs-sm); }
.bsv-review-form [aria-invalid="true"] { border-color: var(--bsv-error); }
.review-form-status.is-success { background: var(--bsv-success-soft); color: var(--bsv-success); }
.bsv-review-form .form-submit { text-align: right; }
.bsv-review-form .submit { min-height: 48px; max-width: 100%; white-space: normal; }
.bsv-review-form .submit:disabled { opacity: 0.65; cursor: wait; }
.review-title { margin: 8px 0; }

@media (width <= 480px) {
  .product-reviews__list [id="review_form_wrapper"] { padding: 16px; }
  .bsv-review-form .submit { width: 100%; }
}

.review-upload__pick { display: none; }
.bsv-review-form.is-enhanced .review-upload__pick { display: inline; font-weight: 600; }
.bsv-review-form.is-enhanced .review-upload__zone { position: relative; min-height: 72px; justify-content: center; }
.bsv-review-form.is-enhanced .review-upload__zone input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.review-upload__zone:focus-within { outline: 3px solid var(--bsv-focus); outline-offset: 3px; }
.bsv-review-form legend { max-width: 100%; overflow-wrap: anywhere; }

/* Beschikbare alternatieven bij een uitverkocht product. */
.single-product .bsv-stock-alternatives {
  margin-top: var(--bsv-space-5);
  padding: var(--bsv-space-4);
  border: 1px solid var(--bsv-line);
  border-radius: var(--bsv-radius);
  background: var(--bsv-surface);
}

.single-product .bsv-stock-alternatives h2 {
  margin: 0 0 var(--bsv-space-3);
  color: var(--bsv-ink);
  font-size: var(--bsv-fs-md);
  line-height: 1.4;
}

.single-product .bsv-stock-alternatives ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-product .bsv-stock-alternatives li + li {
  border-top: 1px solid var(--bsv-line-soft);
}

.single-product .bsv-stock-alternatives a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bsv-space-3);
  min-height: 44px;
  padding: var(--bsv-space-3) var(--bsv-space-2);
  border-radius: var(--bsv-radius-sm);
  color: var(--bsv-body);
  font-size: var(--bsv-fs-base);
  font-weight: 600;
  line-height: 1.5;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.single-product .bsv-stock-alternatives a::after {
  content: "";
  flex: 0 0 7px;
  width: 7px;
  height: 7px;
  margin-right: var(--bsv-space-1);
  border: solid currentcolor;
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(-45deg);
}

.single-product .bsv-stock-alternatives a:hover {
  background: var(--bsv-bg);
  color: var(--bsv-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.single-product .bsv-stock-alternatives a:focus-visible {
  outline: 3px solid var(--bsv-focus);
  outline-offset: 2px;
}