/* Minimal commerce skin */
html {
  box-sizing: border-box;
  font-size: 16px;
}

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

body.bn-standalone-theme {
  background: var(--bn-page);
  color: var(--bn-ink);
  font-family: var(--bn-font);
  font-size: 16px;
  letter-spacing: 0;
  line-height: 1.5;
  margin: 0;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}

body.bn-standalone-theme a {
  color: inherit;
  text-decoration: none;
}

body.bn-standalone-theme img {
  display: block;
  height: auto;
  max-width: 100%;
}

body.bn-standalone-theme button,
body.bn-standalone-theme input,
body.bn-standalone-theme select,
body.bn-standalone-theme textarea {
  font: inherit;
  letter-spacing: 0;
}

.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.screen-reader-text:focus {
  background: #fff;
  border: 1px solid var(--bn-line);
  clip: auto;
  height: auto;
  left: 12px;
  padding: 10px 14px;
  top: 12px;
  width: auto;
  z-index: var(--bn-z-toast);
}

.bn-container,
.col-full {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--bn-container) !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
  width: 100% !important;
}

.bn-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.bn-site-content {
  background: #fff;
  flex: 1;
}

.bn-eyebrow {
  color: var(--bn-accent-text);
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.2;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.bn-button,
.button,
button.button,
input.button,
.wp-element-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--bn-radius);
  cursor: pointer;
  display: inline-flex;
  font-size: 14px;
  font-weight: var(--bn-btn-weight);
  justify-content: center;
  min-height: 46px;
  padding: 0 20px;
  text-align: center;
  text-decoration: none !important;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.bn-button--dark,
.button.alt,
button.button.alt {
  background: var(--bn-ink) !important;
  border-color: var(--bn-ink) !important;
  color: #fff !important;
}

.bn-button--dark:hover,
.button.alt:hover,
button.button.alt:hover {
  background: #000 !important;
  border-color: #000 !important;
  color: #fff !important;
}

.bn-button--light {
  background: #fff;
  border-color: var(--bn-line);
  color: var(--bn-ink);
}

.bn-button--light:hover {
  border-color: var(--bn-ink);
}

/* Header */
.bn-site-promo {
  background: var(--bn-ink);
  color: #fff;
}

.bn-site-promo .bn-container {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 32px;
}

.bn-site-promo a {
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
}

.bn-site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--bn-line);
  position: sticky;
  top: 0;
  z-index: var(--bn-z-sticky);
}

.bn-site-header__utility {
  align-items: center;
  border-bottom: 1px solid var(--bn-line);
  display: flex;
  justify-content: space-between;
  min-height: 34px;
}

.bn-menu-link,
.bn-utility-nav a {
  color: var(--bn-muted);
  font-size: 12px;
  font-weight: 700;
}

.bn-utility-nav {
  align-items: center;
  display: flex;
  gap: 20px;
}

.bn-site-header__main {
  align-items: center;
  display: grid;
  gap: 20px;
  grid-template-columns: 230px minmax(280px, 1fr) auto;
  min-height: 78px;
}

.bn-logo {
  align-items: center;
  display: inline-flex;
  gap: 10px;
  min-width: 0;
}

.bn-logo__mark {
  align-items: center;
  background: var(--bn-accent-text);
  border-radius: var(--bn-radius);
  color: #fff;
  display: inline-flex;
  font-size: 24px;
  font-weight: 900;
  height: 40px;
  justify-content: center;
  line-height: 1;
  width: 40px;
}

.bn-logo__text {
  color: var(--bn-accent-text);
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.bn-search-form {
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: flex;
  min-height: 48px;
  overflow: hidden;
}

.bn-search-form input[type="search"] {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bn-ink) !important;
  flex: 1 1 auto;
  font-size: 14px !important;
  font-weight: 600;
  min-width: 0;
  outline: none;
  padding: 0 16px !important;
}

.bn-search-form button {
  background: var(--bn-ink) !important;
  border: 0 !important;
  color: #fff !important;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: var(--bn-btn-weight);
  min-width: 94px;
  padding: 0 18px !important;
}

.bn-header-actions {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.bn-header-actions a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  white-space: nowrap;
}

.bn-header-actions .bn-cart-link {
  background: var(--bn-accent-text);
  border-color: var(--bn-accent-text);
  color: #fff;
  gap: 8px;
}

.bn-cart-link span {
  align-items: center;
  background: #fff;
  border-radius: var(--bn-radius-pill);
  color: var(--bn-accent-text);
  display: inline-flex;
  font-size: 11px;
  height: 22px;
  justify-content: center;
  min-width: 22px;
  padding: 0 6px;
}

.bn-category-rail {
  align-items: center;
  display: flex;
  gap: 22px;
  min-height: 52px;
  overflow-x: auto;
  scrollbar-width: none;
}

.bn-category-rail::-webkit-scrollbar {
  display: none;
}

.bn-category-rail a {
  color: var(--bn-text);
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  padding: 16px 0;
}

.bn-category-rail a:hover {
  color: var(--bn-accent-text);
}

/* Home */
.bn-home-main {
  background: #fff;
}

.bn-home-hero {
  background: linear-gradient(180deg, #f8f5ef 0%, #fff 100%);
  overflow: hidden;
  padding: 58px 0 66px;
}

.bn-home-hero__grid {
  align-items: center;
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
}

.bn-home-hero__copy h1 {
  color: var(--bn-ink);
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 22px;
  max-width: 650px;
}

.bn-home-hero__copy p {
  color: var(--bn-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.65;
  margin: 0;
  max-width: 570px;
}

.bn-home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.bn-home-hero__stats {
  border-top: 1px solid var(--bn-line);
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 36px 0 0;
  max-width: 560px;
  padding-top: 24px;
}

.bn-home-hero__stats div {
  margin: 0;
}

.bn-home-hero__stats dt {
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  margin: 0 0 6px;
}

.bn-home-hero__stats dd {
  color: var(--bn-muted);
  font-size: 13px;
  font-weight: 700;
  margin: 0;
}

.bn-home-hero__visual {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(0, 1fr) 210px;
}

.bn-home-hero__product,
.bn-home-hero__tile,
.bn-collection-card,
.bn-home-cat,
.bn-plp-collection,
.bn-product-card__image,
.bn-pdp__media .woocommerce-product-gallery__image {
  border-radius: var(--bn-radius);
}

.bn-home-hero__product {
  background: #fff;
  border: 1px solid var(--bn-line);
  display: grid;
  min-height: 520px;
  overflow: hidden;
}

.bn-home-hero__media {
  align-items: center;
  background: var(--bn-soft-2);
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: 44px;
}

.bn-home-hero__media img {
  max-height: 390px;
  object-fit: contain;
  width: auto;
}

.bn-home-hero__product-meta {
  border-top: 1px solid var(--bn-line);
  display: grid;
  gap: 7px;
  padding: 24px;
}

.bn-home-hero__product-meta span {
  color: var(--bn-accent-text);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bn-home-hero__product-meta strong {
  color: var(--bn-ink);
  font-size: 24px;
  font-weight: 900;
  line-height: 1.1;
}

.bn-home-hero__tiles {
  display: grid;
  gap: 18px;
}

.bn-home-hero__tile {
  background: #fff;
  border: 1px solid var(--bn-line);
  display: grid;
  gap: 12px;
  grid-template-rows: 1fr auto;
  min-height: 250px;
  overflow: hidden;
  padding: 18px;
}

.bn-home-hero__tile span {
  align-items: center;
  background: var(--bn-soft);
  border-radius: var(--bn-radius);
  display: flex;
  justify-content: center;
  min-height: 164px;
}

.bn-home-hero__tile img {
  max-height: 145px;
  object-fit: contain;
  width: auto;
}

.bn-home-hero__tile strong {
  color: var(--bn-ink);
  font-size: 17px;
  font-weight: 900;
  line-height: 1.15;
}

.bn-home-service {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: -28px;
  overflow: hidden;
  position: relative;
  z-index: var(--bn-z-base);
}

.bn-home-service div {
  min-width: 0;
  padding: 24px;
}

.bn-home-service div + div {
  border-left: 1px solid var(--bn-line);
}

.bn-home-service strong {
  color: var(--bn-ink);
  display: block;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 5px;
}

.bn-home-service span {
  color: var(--bn-muted);
  display: block;
  font-size: 13px;
  font-weight: 600;
}

.bn-home-section {
  padding-bottom: 66px !important;
  padding-top: 66px !important;
}

.bn-home-section__head {
  align-items: end;
  display: flex;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 30px;
}

.bn-home-section__head h2,
.bn-home-editorial__copy h2 {
  color: var(--bn-ink);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.05;
  margin: 0;
}

.bn-home-section__head p {
  color: var(--bn-muted);
  font-size: 15px;
  font-weight: 600;
  margin: 10px 0 0;
}

.bn-home-section__head a {
  align-items: center;
  background: var(--bn-ink);
  border-radius: var(--bn-radius);
  color: #fff !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  min-height: 42px;
  padding: 0 16px;
  white-space: nowrap;
}

.bn-home-collections__grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bn-collection-card {
  background: #fff;
  border: 1px solid var(--bn-line);
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 450px;
  overflow: hidden;
  position: relative;
}

.bn-collection-card__media {
  align-items: center;
  background: var(--bn-soft-2);
  display: flex;
  justify-content: center;
  min-height: 320px;
  padding: 38px;
}

.bn-collection-card__media img {
  max-height: 300px;
  object-fit: contain;
  transition: transform 220ms ease;
  width: auto;
}

.bn-collection-card__content {
  border-top: 1px solid var(--bn-line);
  display: grid;
  gap: 8px;
  padding: 24px;
}

.bn-collection-card__content span {
  color: var(--bn-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.bn-collection-card__content strong {
  color: var(--bn-ink);
  font-size: 30px;
  font-weight: 900;
  line-height: 1;
}

.bn-collection-card__content em {
  color: var(--bn-accent-text);
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.bn-collection-card:hover .bn-collection-card__media img {
  transform: scale(1.04);
}

.bn-home-cats__grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bn-home-cat {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bn-line);
  display: grid;
  gap: 16px;
  grid-template-columns: 96px 1fr;
  min-height: 128px;
  padding: 14px;
}

.bn-home-cat__image {
  align-items: center;
  background: var(--bn-soft);
  border-radius: var(--bn-radius);
  display: flex;
  height: 96px;
  justify-content: center;
  overflow: hidden;
  width: 96px;
}

.bn-home-cat__image img {
  height: 86%;
  object-fit: contain;
  width: 86%;
}

.bn-home-cat__letter {
  color: var(--bn-accent-text);
  font-size: 30px;
  font-weight: 900;
}

.bn-home-cat__name {
  color: var(--bn-ink);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
}

.bn-home-editorial {
  align-items: center;
  background: var(--bn-soft-2);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.8fr);
  margin-bottom: 70px;
  padding-bottom: 58px !important;
  padding-top: 58px !important;
}

.bn-home-editorial__image {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: flex;
  justify-content: center;
  min-height: 420px;
  padding: 44px;
}

.bn-home-editorial__image img {
  max-height: 360px;
  object-fit: contain;
  width: auto;
}

.bn-home-editorial__copy p {
  color: var(--bn-text);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.65;
  margin: 20px 0 28px;
  max-width: 520px;
}

/* Product archive */
.bn-plp-main {
  padding-bottom: 76px !important;
}

.bn-breadcrumbs {
  align-items: center;
  color: var(--bn-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 600;
  gap: 8px;
  margin-bottom: 18px;
}

.bn-breadcrumbs a:hover {
  color: var(--bn-accent-text);
}

.woocommerce-products-header,
.woocommerce-notices-wrapper:empty {
  display: none;
}

/* Kruimelpad + H1 staan vlak in de container, niet in een kaart (besluit JJ 22 jul 2026).
   De kaart had 30px padding, waardoor de paginatitel op 63px begon terwijl de header-nav,
   de shop-layout en het raster op 32px staan: drie linkerranden op één scherm. Een
   paginakop is geen kaart — hij hoort op de tekstlijn van de rest van de pagina. */
.bn-plp-heading {
  margin: 28px 0 26px;
}

.bn-plp-heading__row {
  align-items: end;
  display: flex;
  gap: 24px;
  justify-content: space-between;
}

.bn-plp-heading h1 {
  color: var(--bn-ink) !important;
  font-size: 46px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  margin: 0 0 8px !important;
}

.bn-plp-heading p {
  color: var(--bn-muted);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.bn-plp-heading__account {
  align-items: center;
  background: var(--bn-ink);
  border-radius: var(--bn-radius);
  color: #fff !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: var(--bn-btn-weight);
  min-height: 42px;
  padding: 0 16px;
}

/* Flex, geen vast kolomgetal: de balk stond op repeat(3, 1fr) terwijl er twee
   spans in de markup zitten — er was dus al een lege derde kolom, en sinds de
   login-belofte alleen nog aan gasten wordt getoond zou dat er twee worden.
   Met flex volgt het aantal kolommen de inhoud, bij 1, 2 of 3 items. */
.bn-plp-service {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: flex;
  gap: 0;
  margin-top: 24px;
  overflow: hidden;
}

.bn-plp-service span {
  align-items: center;
  color: var(--bn-text);
  display: flex;
  flex: 1 1 0;
  font-size: 13px;
  font-weight: 800;
  min-height: 48px;
  min-width: 0;
  padding: 0 18px;
}

.bn-plp-service span + span {
  border-left: 1px solid var(--bn-line);
}

/* auto-fit in plaats van een vaste 6: op /shop/ staan sinds 20 jul alle elf
   top-level categorieën, en met repeat(6) werden dat twee rijen waarvan de tweede
   half leeg. Nu vult het raster zichzelf en klopt het bij zes én bij elf. */
.bn-plp-collections {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin-top: 20px;
}

.bn-plp-collection {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 12px;
  text-align: left;
}

@media (prefers-reduced-motion: no-preference) {
  .bn-plp-collection {
    transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  }

  .bn-plp-collection:hover {
    border-color: transparent;
    box-shadow: var(--bn-shadow-md);
    transform: translateY(-3px);
  }
}

.bn-plp-collection__media {
  align-items: center;
  background: var(--bn-soft);
  border-radius: var(--bn-radius);
  display: flex;
  height: 112px;
  justify-content: center;
  overflow: hidden;
}

.bn-plp-collection__media img {
  height: 92%;
  object-fit: contain;
  width: 92%;
}

.bn-plp-collection__media > span {
  color: var(--bn-accent-text);
  font-size: 28px;
  font-weight: 900;
}

.bn-plp-collection strong {
  color: var(--bn-ink);
  display: -webkit-box;
  font-size: 13px;
  font-weight: 900;
  line-height: 1.2;
  min-height: 32px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bn-plp-collection em {
  color: var(--bn-muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.bn-archive-controls {
  display: grid;
  gap: 14px;
  margin-bottom: 18px;
}

/* ── Motion-laag shop (2 jul 2026): state-motion, geen opacity-gating ── */
@media (prefers-reduced-motion: no-preference) {
  /* Grid-entrance: alleen transform (content blijft altijd zichtbaar);
     .bn-pre-reveal wordt door JS gezet vóór paint en met stagger verwijderd. */
  .bn-shop-layout__products li.product {
    transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition-delay: var(--bn-d, 0ms);
  }

  .bn-shop-layout__products li.product.bn-pre-reveal {
    transform: translateY(18px);
    transition: none;
  }

  /* Tinten-uitklap: zachte landing bij openen */
  .bn-color-tints--open {
    animation: bn-tints-in 0.2s ease-out;
  }

  /* Cart-badge: pop bij (her)insertie via WC-fragment */
  .royh__cart .bn-cart-count {
    animation: bn-badge-pop 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@keyframes bn-tints-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes bn-badge-pop {
  40% {
    transform: scale(1.35);
  }
}

.bn-cat-tabs {
  align-items: center;
  border-bottom: 1px solid var(--bn-line);
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0 0 12px;
}

.bn-cat-tabs--sub {
  border-bottom: 0;
  gap: 8px;
  padding-bottom: 0;
}

.bn-cat-tab {
  color: var(--bn-text) !important;
  display: inline-flex;
  font-size: 13px;
  font-weight: 800;
  min-height: 34px;
  position: relative;
}

.bn-cat-tab:hover,
.bn-cat-tab--active {
  color: var(--bn-ink) !important;
}

.bn-cat-tab--active::after {
  background: var(--bn-ink);
  bottom: -13px;
  content: "";
  height: 2px;
  left: 0;
  position: absolute;
  width: 100%;
}

.bn-cat-tabs--sub .bn-cat-tab {
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  padding: 6px 12px;
}

.bn-cat-tabs--sub .bn-cat-tab--active {
  background: var(--bn-ink);
  border-color: var(--bn-ink);
  color: #fff !important;
}

.bn-cat-tabs--sub .bn-cat-tab::after {
  display: none;
}

.bn-cat-select-wrap {
  display: none;
}

.bn-cat-select {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  color: var(--bn-ink);
  min-height: 44px;
  padding: 0 14px;
  width: 100%;
}

.bn-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bn-filter-chip {
  align-items: center;
  background: var(--bn-ink);
  border: 1px solid var(--bn-ink);
  border-radius: var(--bn-radius);
  color: #fff !important;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
  min-height: 30px;
  padding: 0 12px;
}

.bn-filter-chip--clear {
  background: #fff;
  border-color: var(--bn-line);
  color: var(--bn-muted) !important;
}

.bn-shop-layout {
  align-items: start;
  display: grid;
  gap: 30px;
  grid-template-columns: minmax(220px, 274px) minmax(0, 1fr);
}

.bn-shop-layout > .bn-sidebar--desktop {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.bn-shop-layout > .bn-shop-toolbar,
.bn-shop-layout > .bn-shop-layout__products {
  grid-column: 2;
}

.bn-sidebar--desktop {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  box-shadow: var(--bn-shadow-sm);
  max-height: calc(100vh - 132px);
  overflow-y: auto;
  padding: 18px;
  position: sticky;
  scrollbar-width: thin;
  top: 124px;
}

.bn-sidebar__header {
  color: var(--bn-ink);
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 18px;
}

.bn-sidebar__section,
.bn-filter-sheet__section {
  border-top: 1px solid var(--bn-line);
  padding-top: 16px;
}

.bn-sidebar__section + .bn-sidebar__section,
.bn-filter-sheet__section + .bn-filter-sheet__section {
  margin-top: 16px;
}

.bn-sidebar__label,
.bn-filter-sheet__label {
  color: var(--bn-muted);
  font-size: 12px;
  font-weight: 900;
  margin-bottom: 10px;
  text-transform: uppercase;
}

.bn-option-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.bn-option-btn {
  align-items: center;
  background: #fff;
  border: 1px solid #cfd2da;
  border-radius: var(--bn-radius);
  color: var(--bn-text);
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: var(--bn-btn-weight);
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
}

/* De globale `body.bn-standalone-theme button { font: inherit }`-reset wint qua
   specificiteit van één class; daarom hier expliciet met body-prefix. */
body.bn-standalone-theme .bn-option-btn {
  font-size: 12px;
  font-weight: var(--bn-btn-weight);
}

/* Aantal achter een filteroptie: het drill-down-signaal. Ondergeschikt aan het
   label — mag de leesbaarheid van de optie zelf niet verstoren. */
.bn-option-btn__count {
  color: var(--bn-muted, #8a8f98);
  font-size: 11px;
  font-weight: 600;
  margin-left: -2px;
}

.bn-option-btn--active .bn-option-btn__count {
  color: rgba(255, 255, 255, 0.72);
}

/* Hover ≠ geselecteerd: hover = oranje hint, actief = navy fill */
.bn-option-btn:hover {
  background: rgba(242, 103, 34, 0.07);
  border-color: var(--bn-accent);
  color: var(--bn-ink);
}

.bn-option-btn--active,
.bn-option-btn--active:hover {
  background: var(--bn-ink);
  border-color: var(--bn-ink);
  color: #fff;
}

/* Kleur-swatches: hex komt uit canonical-colors.json via de render-data */
.bn-color-swatch {
  border: 1px solid rgba(26, 35, 64, 0.25);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 14px;
  width: 14px;
}

.bn-color-swatch--multi {
  background: conic-gradient(#f26722, #ffd400, #00854a, #2563eb, #a855f7, #f26722);
}

.bn-color-swatch--transparent {
  background:
    repeating-conic-gradient(#e5e7eb 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
}

/* Kleur-hiërarchie: hoofdkleur ▸ tinten */
/* Het pijltje moet lezen als knop, niet als versiering. Het zat als kaal ▾ tegen het
   label aan ("Goud 59▾") en werd daardoor gemist: Roy zag Donker Goud niet en dacht dat
   die kleur ontbrak (22 jul 2026). Nu een eigen vlakje met scheidingslijn, plus het
   aantal tinten in de aria-label en de tooltip. */
.bn-color-expand {
  align-items: center;
  background: var(--bn-soft-2);
  border-left: 1px solid var(--bn-line);
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  margin-left: 8px;
  margin-right: -8px;
  min-height: 24px;
  min-width: 26px;
  align-self: stretch;
  transition: transform 0.15s ease, background-color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
}

.bn-color-expand:hover {
  background: var(--bn-line);
}

.bn-option-btn--active .bn-color-expand {
  background: rgba(255, 255, 255, 0.18);
  border-left-color: rgba(255, 255, 255, 0.35);
}

.bn-color-expand:focus-visible {
  border-radius: var(--bn-radius);
  outline: 2px solid var(--bn-accent);
  outline-offset: 2px;
}

.bn-color-expand--open {
  transform: rotate(180deg);
}

.bn-color-tints {
  display: none;
  flex-basis: 100%;
  border-left: 2px solid var(--bn-line);
  margin-left: 2px;
  padding: 2px 0 4px 10px;
}

.bn-color-tints--open {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.bn-standalone-theme .bn-color-tints .bn-option-btn {
  font-weight: 600;
}

.bn-sidebar__hint {
  background: var(--bn-soft-2);
  border: 1px dashed var(--bn-line);
  border-radius: var(--bn-radius);
  color: var(--bn-muted);
  padding: 16px;
}

.bn-sidebar__hint strong {
  color: var(--bn-ink);
  display: block;
  font-size: 14px;
  font-weight: 900;
  margin-bottom: 6px;
}

.bn-sidebar__hint span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
}

/* Gast-CTA op de PDP: merk-oranje i.p.v. grijze default-button (mobiele-audit P2) */
body.bn-standalone-theme .bn-guest-cta__btn {
  background: var(--bn-accent-text);
  border: 0;
  border-radius: var(--bn-radius);
  color: #fff;
  display: inline-flex;
  align-items: center;
  font-size: 14px;
  font-weight: var(--bn-btn-weight);
  min-height: 44px;
  padding: 0 18px;
}

body.bn-standalone-theme .bn-guest-cta__btn:hover {
  background: var(--bn-accent-dark);
  color: #fff;
}

/* Desktop "Toon resultaten" (no-JS-fallback; AJAX filtert al on-click) */
.bn-sidebar__submit {
  margin-top: 16px;
}

body.bn-standalone-theme .bn-sidebar__submit-btn {
  background: var(--bn-ink);
  border: 0;
  border-radius: var(--bn-radius);
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  font-weight: var(--bn-btn-weight);
  min-height: 44px;
  width: 100%;
}

body.bn-standalone-theme .bn-sidebar__submit-btn:hover {
  background: var(--bn-accent-text);
}

.bn-filter-toggle {
  align-items: center;
  background: var(--bn-ink);
  border: 0;
  border-radius: var(--bn-radius);
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 13px;
  font-weight: 900;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
}

.bn-filter-toggle__badge {
  align-items: center;
  background: var(--bn-accent-text);
  border-radius: var(--bn-radius-pill);
  color: #fff;
  display: inline-flex;
  font-size: 11px;
  height: 20px;
  justify-content: center;
  min-width: 20px;
  padding: 0 6px;
}

/* Tap-targets in de mobiele filter-drawer: ≥44px (drawer bestaat alleen op
   kleine schermen; buiten de drawer blijft 32px voor muisgebruik). */
body.bn-standalone-theme .bn-filter-sheet .bn-option-btn {
  font-size: 13px;
  min-height: 44px;
  padding: 0 14px;
}

.bn-filter-sheet .bn-color-expand {
  min-height: 36px;
  min-width: 36px;
}

.bn-filter-sheet-overlay,
.bn-filter-sheet {
  display: none;
}

.bn-shop-toolbar {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  box-shadow: var(--bn-shadow-sm);
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr auto;
  margin-bottom: 30px;
  min-height: 62px;
  padding: 10px 12px 10px 18px;
}

.bn-shop-toolbar__count {
  color: var(--bn-text);
  font-size: 13px;
  font-weight: 800;
}

.bn-shop-toolbar__controls {
  align-items: center;
  display: flex;
  gap: 10px;
}

.woocommerce-ordering {
  margin: 0 !important;
}

.orderby,
.bn-shop-toolbar select {
  background: #fff !important;
  border: 1px solid var(--bn-line) !important;
  border-radius: var(--bn-radius) !important;
  color: var(--bn-ink) !important;
  font-size: 13px !important;
  font-weight: 700;
  min-height: 44px !important;
  padding: 0 34px 0 12px !important;
}

.bn-view-switch {
  display: none;
}

/* Product grid and cards */
.woocommerce ul.products,
.woocommerce-page ul.products,
ul.products,
.bn-home-products__grid.products,
.bn-shop-layout__products ul.products {
  clear: none !important;
  display: grid !important;
  gap: 42px 26px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Tabletgat 901-1200px: vier kolommen naast de sidebar knepen de kaarten tot 141px
   (gemeten op 1009px viewport, met horizontale pagina-overflow tot gevolg). De sidebar
   klapt pas op 900px weg, dus daartussen is een 3-koloms tussenstap nodig. */
@media (max-width: 1200px) and (min-width: 901px) {
  .bn-shop-layout__products ul.products {
    gap: 32px 20px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  display: none !important;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
li.product.bn-product-card,
.bn-product-card {
  background: transparent !important;
  border: 0 !important;
  display: grid !important;
  float: none !important;
  /* Tweede rij = het koopblok. Was een VASTE 96px, wat klopte voor de gast-variant
     (alleen "bekijk product"), maar niet voor een ingelogde B2B-klant: daar komen
     eenheidsknoppen, een aantal-stepper én een regeltotaal in datzelfde blok. Dat
     werd samen ~194px, overflow stond op visible, en de laatste kaartrij drukte zijn
     regeltotaal 98px naar buiten — dwars over de paginering heen (gemeten op 1440,
     ingelogd). De 96px blijft als ondergrens zodat de koopblokken over een rij netjes
     op één lijn liggen; auto laat het groeien wanneer er meer in moet. */
  grid-template-rows: auto minmax(96px, auto);
  height: 100%;
  margin: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  width: auto !important;
}

.bn-product-card__link {
  color: inherit !important;
  display: grid !important;
  grid-template-rows: auto 1fr;
  min-width: 0;
}

.bn-product-card__image {
  align-items: center;
  aspect-ratio: 1 / 1.12;
  background: var(--bn-soft);
  border-radius: var(--bn-radius);
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
  overflow: hidden;
  padding: 24px;
  position: relative;
  transition: box-shadow 0.2s ease;
}

.bn-product-card:hover .bn-product-card__image {
  box-shadow: var(--bn-shadow-md);
}

.bn-product-card__image img,
.bn-product-card__img {
  height: 100% !important;
  object-fit: contain;
  transition: transform 220ms ease;
  width: 100% !important;
}

.bn-product-card:hover .bn-product-card__image img {
  transform: scale(1.04);
}

.bn-product-card__badge {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius-pill);
  color: var(--bn-ink);
  font-size: 11px;
  font-weight: 900;
  left: 10px;
  line-height: 1;
  padding: 6px 8px;
  position: absolute;
  top: 10px;
  z-index: var(--bn-z-base);
}

.bn-product-card__quick {
  align-items: center;
  background: var(--bn-ink);
  border-radius: var(--bn-radius);
  bottom: 12px;
  color: #fff;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  justify-content: center;
  left: 50%;
  min-height: 36px;
  min-width: 142px;
  opacity: 0;
  padding: 0 14px;
  pointer-events: none;
  position: absolute;
  transform: translate(-50%, 10px);
  transition: opacity 160ms ease, transform 160ms ease;
  white-space: nowrap;
}

.bn-product-card:hover .bn-product-card__quick {
  opacity: 1;
  transform: translate(-50%, 0);
}

.bn-product-card__info {
  display: grid;
  gap: 5px;
  grid-template-rows: 34px 24px 34px 18px;
  min-height: 125px;
  min-width: 0;
}

.bn-product-card__title {
  align-self: start;
  color: var(--bn-ink) !important;
  display: -webkit-box !important;
  font-size: 15px !important;
  font-weight: var(--bn-btn-weight) !important;
  line-height: 1.14 !important;
  margin: 0 !important;
  min-height: 34px;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bn-product-card__facts {
  align-content: start;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 24px;
}

.bn-product-card__facts span {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius-pill);
  color: var(--bn-text);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  padding: 5px 8px;
}

.bn-product-card__meta {
  align-content: start;
  color: var(--bn-muted);
  display: grid;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
}

.bn-stock {
  color: var(--bn-success) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.bn-stock::before {
  background: currentColor;
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 6px;
  margin-right: 6px;
  width: 6px;
}

.bn-product-card__sku {
  color: var(--bn-muted);
}

.bn-product-card__price {
  align-self: end;
  color: var(--bn-accent-text);
  font-size: 13px;
  font-weight: 900;
  min-height: 20px;
}

.bn-product-card__actions {
  align-self: end;
  display: grid;
  gap: 8px;
  /* Twee VASTE rijen van 40px was de werkelijke oorzaak van de overlappende
     regeltotalen. Voor een gast klopt het (rij 1 = "bekijk product", rij 2 = leeg),
     maar een ingelogde B2B-klant krijgt in rij 2 het hele koopblok: eenheidsknoppen,
     aantal-stepper én regeltotaal, samen 138px in een cel van 40px. Overflow stond op
     visible, dus het regeltotaal viel 98px naar buiten en landde op de paginering —
     gemeten op 1440 ingelogd, zichtbaar op elke categoriepagina.
     Rijen groeien nu mee; min-height houdt de ondergrens zodat de knoppen over een
     kaartrij op één lijn blijven liggen. */
  grid-template-rows: auto auto;
  margin-top: 12px;
  min-height: 88px;
}

.bn-product-card__actions .button,
.bn-product-card__actions .bn-atc,
.bn-product-card__actions a.button.bn-card-view,
.woocommerce ul.products li.product .bn-product-card__actions a.button.bn-card-view {
  background: var(--bn-ink) !important;
  border: 1px solid var(--bn-ink) !important;
  border-radius: var(--bn-radius) !important;
  color: #fff !important;
  display: inline-flex !important;
  font-size: 13px !important;
  /* 700, geen 900: op 13px wit-op-navy liepen de letters van "bekijk product" en
     "Voeg toe" dicht — de tegenstelling licht/donker maakt zware schreefloze tekst
     optisch nóg zwaarder. 700 leest rustiger en blijft duidelijk een knop
     (waarneming JJ 22 jul 2026). */
  font-weight: var(--bn-btn-weight) !important;
  align-items: center !important;
  justify-self: stretch;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 44px !important;
  padding: 0 12px !important;
  text-align: center !important;
  vertical-align: middle !important;
  white-space: nowrap;
  width: 100%;
}

.bn-product-card__actions a.button.bn-card-login,
.woocommerce ul.products li.product .bn-product-card__actions a.button.bn-card-login {
  background: #fff !important;
  border: 1px solid var(--bn-accent) !important;
  color: var(--bn-accent-text) !important;
}

.bn-product-card__actions a.button.bn-card-login:hover {
  background: var(--bn-accent-text) !important;
  color: #fff !important;
}

/* Pagination */
.woocommerce nav.woocommerce-pagination,
nav.woocommerce-pagination {
  align-items: center;
  display: flex;
  justify-content: center;
  margin: 58px 0 10px;
  width: 100%;
}

.woocommerce nav.woocommerce-pagination ul,
nav.woocommerce-pagination ul.page-numbers {
  align-items: center;
  border: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0;
  padding: 0;
}

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

.woocommerce nav.woocommerce-pagination .page-numbers,
nav.woocommerce-pagination .page-numbers {
  align-items: center;
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  color: var(--bn-ink);
  display: inline-flex;
  font-size: 13px;
  font-weight: 900;
  justify-content: center;
  min-height: 42px;
  min-width: 42px;
  padding: 0 13px;
}

.woocommerce nav.woocommerce-pagination .page-numbers.current,
nav.woocommerce-pagination .page-numbers.current {
  background: var(--bn-ink);
  border-color: var(--bn-ink);
  color: #fff;
}

/* Product detail */
.bn-pdp-main {
  padding-bottom: 80px !important;
  padding-top: 34px !important;
}

.bn-pdp {
  display: block !important;
}

.bn-pdp__top {
  align-items: start;
  display: grid;
  gap: 64px;
  grid-template-columns: minmax(0, 1fr) minmax(390px, 440px);
  position: relative;
}

.bn-pdp__media,
.bn-pdp__buybox,
.bn-pdp__information {
  min-width: 0;
}

.bn-pdp__media .bn-product-meta-bar {
  color: var(--bn-muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 13px;
  font-weight: 700;
  gap: 14px;
  margin-bottom: 18px;
}

.bn-pdp__media .woocommerce-product-gallery {
  width: 100% !important;
}

.bn-pdp__media .woocommerce-product-gallery__wrapper {
  margin: 0;
}

.bn-pdp__media .woocommerce-product-gallery__image {
  align-items: center;
  background: var(--bn-soft);
  border: 1px solid var(--bn-line);
  display: flex !important;
  justify-content: center;
  min-height: 700px;
  overflow: hidden;
  padding: 58px;
}

.bn-pdp__media .woocommerce-product-gallery__image a {
  align-items: center;
  display: flex;
  justify-content: center;
  width: 100%;
}

.bn-pdp__media .woocommerce-product-gallery__image img {
  max-height: 620px;
  object-fit: contain;
  width: auto !important;
}

.bn-pdp__media .flex-control-thumbs {
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.bn-pdp__media .flex-control-thumbs li {
  width: 76px !important;
}

.bn-pdp__media .flex-control-thumbs img {
  background: var(--bn-soft);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  cursor: pointer;
  height: 76px;
  object-fit: contain;
  padding: 8px;
  width: 76px;
}

.bn-pdp__media .flex-control-thumbs img.flex-active {
  border-color: var(--bn-accent);
}

.bn-pdp__buybox {
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  max-height: calc(100vh - 36px);
  max-height: calc(100dvh - 36px); /* dvh volgt de zichtbare viewport; met iPad-toolbar viel de
                                      onderkant van de sticky buybox anders achter de balk (F-21).
                                      De vh-regel erboven blijft de fallback voor oud-Safari. */
  overflow-y: auto;
  padding: 34px;
  position: sticky;
  scrollbar-gutter: stable;
  top: 18px;
}

.bn-pdp__badge {
  background: var(--bn-warning);
  border-radius: var(--bn-radius-pill);
  color: var(--bn-ink);
  display: inline-flex;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 18px;
  padding: 5px 9px;
  text-transform: uppercase;
}

.bn-pdp__buybox .product_title {
  color: var(--bn-ink) !important;
  font-size: 42px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
  margin: 0 0 22px !important;
}

.bn-pdp__buybox .price,
.bn-pdp__buybox .price .woocommerce-Price-amount {
  color: var(--bn-accent-text) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

.bn-pdp__buybox .woocommerce-product-details__short-description {
  color: var(--bn-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin: 18px 0 26px;
}

.bn-pdp__buybox form.cart {
  border-top: 1px solid var(--bn-line);
  margin-top: 24px !important;
  padding-top: 24px;
}

/* LET OP — `tr` staat hier bewust NIET in de width-lijst.
   shop-tweaks.php zet op die rij een inline screen-reader-hide (position:absolute,
   width:1px, height:1px, clip) zodra de eigen eenheidsknoppen de variatie-dropdown
   vervangen. Een author-!important verslaat een inline stijl zonder !important, dus
   `width:100% !important` drukte die 1px weg terwijl de rest van de hide bleef staan:
   een absoluut gepositioneerde doos van 423px, onzichtbaar maar volledig meetellend
   voor de overflow. Omdat de rij absoluut staat is zijn containing block de buybox
   (position:sticky) en niet de tabel — vandaar 423px waar de tabel 355px is.
   Gemeten gevolg: 34px overflow in de buybox op 1440, en op 768 was deze rij de enige
   oorzaak van horizontale paginascroll. Voor de ZICHTBARE rij verandert het weglaten
   niets: met width:auto meet die 289px, exact hetzelfde als met width:100%, want een
   block-level element vult zijn containing block al vanzelf. */
.bn-pdp__buybox table.variations tr {
  display: block !important;
}

.bn-pdp__buybox table.variations,
.bn-pdp__buybox table.variations tbody,
.bn-pdp__buybox table.variations th,
.bn-pdp__buybox table.variations td {
  display: block !important;
  width: 100% !important;
}

.bn-pdp__buybox table.variations {
  border: 0 !important;
  margin: 0 0 18px !important;
}

.bn-pdp__buybox table.variations th,
.bn-pdp__buybox table.variations td {
  padding: 0 0 10px !important;
  text-align: left !important;
}

.bn-pdp__buybox table.variations label {
  color: var(--bn-ink);
  font-size: 13px;
  font-weight: 900;
}

.bn-pdp__buybox select,
.bn-pdp__buybox input.qty {
  background: #fff !important;
  border: 1px solid var(--bn-line) !important;
  border-radius: var(--bn-radius) !important;
  color: var(--bn-ink) !important;
  min-height: 48px !important;
}

.bn-pdp__buybox input.qty {
  font-weight: 900;
  text-align: center;
  width: 86px !important;
}

/* Eerste kolom op auto, niet op een vast getal. Die 88px was gemeten op een kale
   qty-input (86px, zie de regel hierboven); shop-tweaks wikkelt daar sindsdien een
   stepper omheen (32 + 86 + 32 + randen = 152px). De kolom groeide niet mee, dus de
   "+" schoof 64px ónder de bestelknop — die is een latere sibling en wint het
   schilderen. Gemeten: 0 van 64 punten op de "+" waren raakbaar, alle 64 gaven de
   bestelknop. Een klant kon op desktop dus geen aantal boven de MOQ kiezen.
   minmax(0,1fr) op de knop zodat die mag krimpen in plaats van de rij te laten
   overlopen (dat gaf de buybox een horizontale scrollbar op 1440). */
.bn-pdp__buybox .woocommerce-variation-add-to-cart,
.bn-pdp__buybox form.cart:not(.variations_form) {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr);
}

.bn-pdp__buybox .quantity {
  margin: 0 !important;
}

.bn-pdp__buybox .single_add_to_cart_button {
  background: var(--bn-ink) !important;
  border: 1px solid var(--bn-ink) !important;
  border-radius: var(--bn-radius) !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: var(--bn-btn-weight) !important;
  min-height: 48px !important;
  opacity: 1 !important;
}

.bn-pdp__buybox .single_add_to_cart_button.disabled,
.bn-pdp__buybox .single_add_to_cart_button:disabled,
.bn-pdp__buybox .single_add_to_cart_button.disabled:hover,
.bn-pdp__buybox .single_add_to_cart_button:disabled:hover {
  background: #e9e4dc !important;
  border-color: #e9e4dc !important;
  color: #706b63 !important;
  cursor: not-allowed !important;
}

.bn-pdp__trust {
  border-top: 1px solid var(--bn-line);
  display: grid;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
}

.bn-pdp__trust span {
  color: var(--bn-text);
  font-size: 13px;
  font-weight: 800;
}

.bn-pdp__trust span::before {
  background: var(--bn-success);
  border-radius: 50%;
  content: "";
  display: inline-block;
  height: 7px;
  margin-right: 8px;
  width: 7px;
}

.bn-pdp__buybox .product_meta {
  border-top: 1px solid var(--bn-line);
  color: var(--bn-muted);
  display: grid;
  font-size: 13px;
  gap: 8px;
  margin-top: 22px;
  padding-top: 16px;
}

.bn-pdp__information {
  border-top: 1px solid var(--bn-line);
  margin-top: 60px !important;
  padding-top: 28px;
}

.bn-pdp__information .woocommerce-tabs ul.tabs {
  align-items: center;
  border: 0 !important;
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0 0 28px !important;
  padding: 0 !important;
}

.bn-pdp__information .woocommerce-tabs ul.tabs::before,
.bn-pdp__information .woocommerce-tabs ul.tabs::after {
  display: none !important;
}

.bn-pdp__information .woocommerce-tabs ul.tabs li {
  background: transparent !important;
  border: 0 !important;
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bn-pdp__information .woocommerce-tabs ul.tabs li::before,
.bn-pdp__information .woocommerce-tabs ul.tabs li::after {
  display: none !important;
}

.bn-pdp__information .woocommerce-tabs ul.tabs li a {
  align-items: center !important;
  background: #fff;
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  box-sizing: border-box;
  color: var(--bn-ink) !important;
  display: inline-flex !important;
  font-size: 14px;
  font-weight: 900;
  height: 42px;
  justify-content: center !important;
  line-height: 1 !important;
  min-height: 42px;
  padding: 0 16px !important;
  text-align: center;
  white-space: nowrap;
}

.bn-pdp__information .woocommerce-tabs ul.tabs li.active a {
  background: var(--bn-ink);
  border-color: var(--bn-ink);
  color: #fff !important;
}

.bn-pdp__information .woocommerce-Tabs-panel {
  color: var(--bn-text);
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 52px;
}

.bn-pdp__information .woocommerce-Tabs-panel > h2,
.related.products > h2,
.upsells.products > h2 {
  color: var(--bn-ink);
  font-size: 26px !important;
  font-weight: 900 !important;
  margin: 0 0 24px !important;
}

.bn-pdp__information table.shop_attributes {
  border: 1px solid var(--bn-line) !important;
  border-collapse: collapse;
  color: var(--bn-text);
  font-size: 14px;
  margin: 0 !important;
  max-width: 760px;
  width: 100%;
}

.bn-pdp__information table.shop_attributes th,
.bn-pdp__information table.shop_attributes td {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--bn-line) !important;
  font-style: normal !important;
  line-height: 1.45;
  padding: 14px 16px !important;
  text-align: left !important;
  vertical-align: middle;
}

.bn-pdp__information table.shop_attributes th {
  color: var(--bn-ink);
  font-weight: 900;
  width: 220px;
}

.bn-pdp__information table.shop_attributes td p {
  margin: 0;
  padding: 0;
}

/* Footer */
.bn-site-footer {
  background: #fff;
  border-top: 1px solid var(--bn-line);
}

.bn-footer-help {
  align-items: center;
  background: var(--bn-ink);
  border-radius: var(--bn-radius);
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin-bottom: 46px;
  margin-top: 58px;
  padding-bottom: 28px !important;
  padding-top: 28px !important;
}

.bn-footer-help h2,
.bn-footer-newsletter h2 {
  font-size: 26px;
  font-weight: 900;
  line-height: 1.1;
  margin: 0 0 8px;
}

.bn-footer-help p,
.bn-footer-newsletter p {
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  margin: 0;
  opacity: 0.75;
}

.bn-footer-help a {
  background: #fff;
  border-radius: var(--bn-radius);
  color: var(--bn-ink) !important;
  font-size: 13px;
  font-weight: 900;
  min-height: 42px;
  padding: 12px 16px;
}

.bn-footer-newsletter {
  align-items: center;
  border-bottom: 1px solid var(--bn-line);
  display: grid;
  gap: 24px;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  padding-bottom: 38px !important;
}

.bn-footer-newsletter form {
  display: flex;
  gap: 8px;
}

.bn-footer-newsletter input {
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  flex: 1 1 auto;
  min-height: 44px;
  min-width: 0;
  padding: 0 14px;
}

.bn-footer-newsletter button {
  background: var(--bn-accent-text);
  border: 1px solid var(--bn-accent-text);
  border-radius: var(--bn-radius);
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--bn-btn-weight);
  min-height: 44px;
  padding: 0 16px;
}

.bn-footer-columns {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: 36px !important;
  padding-top: 36px !important;
}

.bn-footer-columns h3 {
  color: var(--bn-ink);
  font-size: 14px;
  font-weight: 900;
  margin: 0 0 14px;
}

.bn-footer-columns a,
.bn-footer-columns p {
  color: var(--bn-muted);
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.6;
  margin: 0 0 7px;
}

.bn-footer-columns a:hover {
  color: var(--bn-ink);
}

.bn-footer-legal {
  border-top: 1px solid var(--bn-line);
}

.bn-footer-legal .bn-container {
  align-items: center;
  color: var(--bn-muted);
  display: flex;
  font-size: 12px;
  font-weight: 700;
  justify-content: space-between;
  min-height: 44px;
}

/* Nul resultaten. Rustig gebracht: dit is geen fout van de inkoper maar een
   combinatie die niets oplevert, en de uitweg staat ernaast. Navy op de zachte
   tint, dezelfde toon als de tekortmelding in het klantblok. */
.bn-no-results {
  background: var(--bn-soft);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  padding: 28px 24px;
  text-align: left;
}

.bn-no-results__kop {
  color: var(--bn-ink);
  font-size: 17px;
  font-weight: 800;
  margin: 0 0 6px;
}

.bn-no-results__uitleg {
  color: var(--bn-text);
  font-size: 14px;
  margin: 0 0 16px;
  max-width: 52ch;
}

.bn-no-results__wis {
  align-items: center;
  background: var(--bn-ink);
  border-radius: var(--bn-radius);
  color: #fff !important;
  display: inline-flex;
  font-size: 14px;
  font-weight: 700;
  min-height: 44px;
  padding: 0 20px;
}

.bn-no-results__wis:focus-visible {
  outline: 2px solid var(--bn-accent);
  outline-offset: 2px;
}

/* Facetwaarde zonder resultaten binnen de huidige selectie. Niet verbergen maar
   tonen als niet-kiesbaar: de inkoper ziet dan dát de maat bestaat en alleen niet
   in deze combinatie — verbergen zou hem laten denken dat het artikel niet bestaat.
   De count staat er al op (aria-label "Blauw — 16 producten"), dus de data was er;
   alleen werd er niets mee gedaan tot je erop klikte en op een lege pagina belandde. */
.bn-option-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
}

.bn-option-btn[aria-disabled="true"]:hover {
  border-color: var(--bn-line);
}

/* Cookie and autocomplete */
/* Banner in de document-flow, boven de header (render-hook bn_before_header, zie
   shop-tweaks.php). Was een zwevende kaart; die dekte altijd iets af en er bleek geen
   vrije plek te bestaan — gemeten op 1440: gecentreerd dekte hij de "−" van de
   aantal-stepper op de PDP af (16 van 64 punten raakbaar), linksonder dekte hij op de
   categoriepagina "toon meer" volledig af (0 van 36). In de flow duwt hij de pagina
   omlaag en blokkeert hij niets. Geen !important meer nodig: er is geen inline
   positionering meer om te overschrijven. */
#bn-cookie-bar {
  align-items: center;
  background: var(--bn-soft);
  border-bottom: 1px solid var(--bn-line);
  color: var(--bn-ink);
  flex-wrap: wrap;
  font-size: 13px;
  gap: 8px 16px;
  justify-content: space-between;
  padding: 12px 20px;
}

.bn-cookie-bar__acties {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
}

#bn-cookie-bar button {
  background: var(--bn-ink);
  border: 1px solid var(--bn-ink);
  border-radius: var(--bn-radius);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: var(--bn-btn-weight);
  /* 44px: dit is op mobiel een touch-doel, en de knop stond op 33px. */
  min-height: 44px;
  padding: 0 20px;
}

#bn-cookie-bar button:focus-visible,
#bn-cookie-bar a:focus-visible {
  outline: 2px solid var(--bn-accent);
  outline-offset: 2px;
}

/* De balk is hier van donker (#1a1a1a inline in shop-tweaks.php) naar een wit kaartje
   hertekend; de "Meer info"-link hield toen zijn inline color:#ccc en kwam daardoor op
   1,61:1 uit. De inline kleur is uit de PHP gehaald, deze regel geeft hem de juiste. */
#bn-cookie-bar a {
  color: var(--bn-ink) !important;
  text-decoration: underline;
}

.bn-ac-results {
  border-color: var(--bn-line) !important;
  border-radius: var(--bn-radius) !important;
  box-shadow: var(--bn-shadow) !important;
}

/* Mobile filter sheet */
@media (max-width: 900px) {
  .bn-site-header__utility {
    display: none;
  }

  .bn-site-header__main {
    grid-template-columns: 1fr auto;
    padding-bottom: 14px !important;
    padding-top: 14px !important;
  }

  .bn-search-form {
    grid-column: 1 / -1;
    order: 3;
  }

  .bn-header-actions {
    justify-content: end;
  }

  .bn-header-actions a:not(.bn-cart-link) {
    display: none;
  }

  .bn-category-rail {
    gap: 18px;
    min-height: 46px;
  }

  .bn-home-hero {
    padding: 40px 0 54px;
  }

  .bn-home-hero__grid,
  .bn-home-editorial,
  .bn-pdp__top {
    grid-template-columns: 1fr;
  }

  .bn-home-hero__copy h1 {
    font-size: 44px;
  }

  .bn-home-hero__visual {
    grid-template-columns: 1fr;
  }

  .bn-home-hero__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bn-home-service {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bn-home-service div:nth-child(3) {
    border-left: 0;
    border-top: 1px solid var(--bn-line);
  }

  .bn-home-service div:nth-child(4) {
    border-top: 1px solid var(--bn-line);
  }

  .bn-home-collections__grid,
  .bn-home-cats__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bn-shop-layout {
    grid-template-columns: 1fr;
  }

  .bn-shop-layout > .bn-shop-toolbar,
  .bn-shop-layout > .bn-shop-layout__products {
    grid-column: 1;
  }

  .bn-sidebar--desktop {
    display: none !important;
  }

  .bn-filter-toggle {
    display: inline-flex;
    justify-self: start;
  }

  .bn-cat-tabs {
    display: none;
  }

  .bn-cat-select-wrap {
    display: block;
  }

  .bn-shop-toolbar {
    grid-template-columns: 1fr;
  }

  .bn-shop-toolbar__controls {
    justify-content: start;
  }

  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  .bn-home-products__grid.products,
  .bn-shop-layout__products ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .bn-pdp__buybox {
    max-height: none;
    overflow: visible;
    position: static;
  }

  .bn-filter-sheet-overlay {
    background: rgba(17, 17, 17, 0.42);
    inset: 0;
    position: fixed;
    z-index: var(--bn-z-overlay);
  }

  .bn-filter-sheet-overlay--open {
    display: block;
  }

  .bn-filter-sheet {
    background: #fff;
    border-radius: var(--bn-radius) var(--bn-radius) 0 0;
    bottom: 0;
    box-shadow: 0 -20px 50px rgba(17, 17, 17, 0.18);
    display: block;
    left: 0;
    max-height: 86vh;
    max-height: 86dvh; /* met zichtbare iOS-toolbar was 86vh te krap; dvh volgt de echte
                          viewport, vh-regel erboven is de fallback (F-32) */
    overflow-y: auto;
    position: fixed;
    right: 0;
    transform: translateY(100%);
    transition: transform 240ms ease;
    z-index: var(--bn-z-modal);
  }

  .bn-filter-sheet--open {
    transform: translateY(0);
  }

  /* Feedback-widget lag over de "Toon N producten"-knop heen (QA F29). Op body-class i.p.v.
     :has(), dat op Safari <15.4 ongeldig is en de knop dan tóch liet overlappen (F-30). De
     class wordt door de sheet-open/close-JS gezet. */
  body.bn-sheet-open #bn-fb {
    display: none;
  }

  .bn-filter-sheet__handle {
    display: flex;
    justify-content: center;
    padding: 12px 0 4px;
  }

  .bn-filter-sheet__handle::after {
    background: var(--bn-line);
    border-radius: var(--bn-radius-pill);
    content: "";
    height: 4px;
    width: 42px;
  }

  .bn-filter-sheet__header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 8px 22px 18px;
  }

  .bn-filter-sheet__title {
    color: var(--bn-ink);
    font-size: 20px;
    font-weight: 900;
  }

  .bn-filter-sheet__close {
    align-items: center;
    background: var(--bn-soft);
    border: 1px solid var(--bn-line);
    border-radius: 50%;
    color: var(--bn-ink);
    cursor: pointer;
    display: inline-flex;
    font-size: 22px;
    height: 44px;
    justify-content: center;
    width: 44px;
  }

  .bn-filter-sheet__body {
    padding: 0 22px 22px;
  }

  .bn-filter-sheet__submit-bar {
    background: #fff;
    border-top: 1px solid var(--bn-line);
    bottom: 0;
    padding: 16px 22px;
    /* Home-indicator vrijhouden zodat de submitknop bereikbaar blijft */
    padding-bottom: max(16px, env(safe-area-inset-bottom));
    position: sticky;
  }

  .bn-filter-sheet__submit {
    background: var(--bn-ink);
    border: 0;
    border-radius: var(--bn-radius);
    color: #fff;
    cursor: pointer;
    font-weight: 900;
    min-height: 48px;
    width: 100%;
  }

  .bn-footer-newsletter,
  .bn-footer-columns {
    grid-template-columns: 1fr 1fr;
  }
}

/* Basisregel tap-targets: elk bedienbaar element haalt op touch 44px hoogte.
   Dit is de norm, niet iets dat per element opnieuw wordt geregeld — nieuwe
   knoppen erven hem automatisch. Overrides hieronder mogen er niet onder duiken. */
@media (max-width: 768px) {
  button,
  .button,
  input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
  select,
  textarea,
  a.button {
    min-height: 44px;
  }
}

@media (max-width: 640px) {
  .bn-container,
  .col-full {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .bn-site-promo {
    display: none;
  }

  .bn-logo__text {
    font-size: 20px;
  }

  .bn-logo__mark {
    height: 34px;
    width: 34px;
  }

  .bn-header-actions .bn-cart-link {
    min-height: 38px;
    padding: 0 10px;
  }

  .bn-home-hero__copy h1 {
    font-size: 36px;
  }

  .bn-home-hero__copy p {
    font-size: 16px;
  }

  .bn-home-hero__stats {
    grid-template-columns: 1fr;
  }

  .bn-home-hero__product {
    min-height: 360px;
  }

  .bn-home-hero__media {
    min-height: 270px;
    padding: 28px;
  }

  .bn-home-hero__tiles,
  .bn-home-service,
  .bn-home-collections__grid,
  .bn-home-cats__grid,
  .bn-footer-newsletter,
  .bn-footer-columns {
    grid-template-columns: 1fr;
  }

  .bn-home-service div + div,
  .bn-home-service div:nth-child(3),
  .bn-home-service div:nth-child(4) {
    border-left: 0;
    border-top: 1px solid var(--bn-line);
  }

  /* Mobiel: USP-balk en account-knop weg uit de PLP-heading (stond al in de
     header; eerste product moet binnen 1 scherm — mobiele-audit P0). */
  .bn-plp-service,
  .bn-plp-heading__account {
    display: none;
  }

  /* Toolbar compact: de teller staat al onder de H1 ("N artikelen") */
  .bn-shop-toolbar__count {
    display: none;
  }

  .bn-shop-toolbar {
    grid-template-columns: 1fr;
    margin-bottom: 18px;
    min-height: 0;
    padding: 8px 10px;
  }

  .bn-archive-controls {
    gap: 10px;
    margin-bottom: 12px;
  }

  .bn-home-section {
    padding-bottom: 46px !important;
    padding-top: 46px !important;
  }

  .bn-home-section__head {
    align-items: start;
    flex-direction: column;
  }

  .bn-home-section__head h2,
  .bn-home-editorial__copy h2 {
    font-size: 31px;
  }

  .bn-home-cat {
    grid-template-columns: 82px 1fr;
    min-height: 104px;
  }

  .bn-home-cat__image {
    height: 82px;
    width: 82px;
  }

  .bn-home-editorial {
    gap: 28px;
    margin-bottom: 46px;
    padding-bottom: 34px !important;
    padding-top: 34px !important;
  }

  .bn-home-editorial__image {
    min-height: 260px;
    padding: 28px;
  }

  .bn-plp-heading {
    margin-bottom: 16px;
    margin-top: 14px;
    padding: 16px;
  }

  .bn-plp-heading__row {
    align-items: start;
    flex-direction: column;
  }

  .bn-plp-heading h1 {
    font-size: 28px !important;
    margin-bottom: 4px !important;
  }

  /* Mobiel: collectie-kaarten als horizontale swipe-rij (gasfles-patroon) */
  .bn-plp-collections {
    display: flex;
    gap: 12px;
    margin-top: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .bn-plp-collections::-webkit-scrollbar {
    display: none;
  }

  .bn-plp-collection {
    flex: 0 0 42%;
    scroll-snap-align: start;
  }

  .bn-plp-collection__media {
    height: 96px;
  }

  .woocommerce ul.products,
  .woocommerce-page ul.products,
  ul.products,
  .bn-home-products__grid.products,
  .bn-shop-layout__products ul.products {
    gap: 34px 16px !important;
  }

  .bn-product-card__image {
    padding: 18px;
  }

  .bn-product-card__title {
    font-size: 14px !important;
    min-height: 36px;
  }

  .bn-product-card__quick {
    display: none;
  }

  .bn-product-card__actions .button,
  .bn-product-card__actions .bn-atc,
  .bn-product-card__actions a.button.bn-card-view,
  .bn-product-card__actions a.button.bn-card-login {
    font-size: 12px !important;
    min-height: 44px !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .bn-pdp-main {
    padding-top: 24px !important;
  }

  .bn-pdp__media .woocommerce-product-gallery__image {
    min-height: 360px;
    padding: 28px;
  }

  .bn-pdp__media .woocommerce-product-gallery__image img {
    max-height: 320px;
  }

  .bn-pdp__buybox {
    padding: 24px;
  }

  .bn-pdp__buybox .product_title {
    font-size: 31px !important;
  }

  .bn-pdp__buybox .woocommerce-variation-add-to-cart,
  .bn-pdp__buybox form.cart:not(.variations_form) {
    grid-template-columns: 1fr;
  }

  .bn-pdp__buybox input.qty {
    width: 100% !important;
  }

  .bn-pdp__information .woocommerce-tabs ul.tabs {
    flex-wrap: wrap;
  }

  .bn-pdp__information table.shop_attributes th {
    width: 42%;
  }

  .bn-pdp__information table.shop_attributes th,
  .bn-pdp__information table.shop_attributes td {
    font-size: 13px;
    padding: 12px 10px !important;
    word-break: break-word;
  }

  .bn-footer-help {
    align-items: start;
    flex-direction: column;
    gap: 18px;
  }

  .bn-footer-newsletter form {
    flex-direction: column;
  }

  .bn-footer-legal .bn-container {
    align-items: start;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 12px !important;
    padding-top: 12px !important;
  }

  /* De banner staat sinds 19 jul in de flow; 'bottom' deed hier niets meer en is weg,
     net als de !important-vlaggen (er is geen inline positionering meer die wint). */
  #bn-cookie-bar {
    align-items: start;
    flex-direction: column;
    padding: 12px 16px;
  }
}

/* Geblokkeerde afreken-CTA (onder het B2B-minimum). De modifier bestond wel in de PHP
   maar had nul CSS-regels: de knop leek alleen niet-primair doordat WooCommerce's
   standaard grijs toevallig doorkwam. Dat is geen ontwerp maar een toevalstreffer —
   hier expliciet vastgelegd, zodat de staat leesbaar blijft als die standaard wijzigt. */
.bn-checkout-button--blocked,
.woocommerce .bn-checkout-button--blocked {
  background: var(--bn-soft) !important;
  border: 1px solid var(--bn-line) !important;
  color: var(--bn-text) !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* De weg terug onder de geblokkeerde knop. Bewust een gewone tekstlink en geen tweede
   knop: de klant moet één primaire handeling zien (aanvullen), niet twee die om
   aandacht concurreren. 44px hoog zodat het op mobiel een echt raakdoel is. */
.bn-checkout-blocked-verder {
  align-items: center;
  color: var(--bn-text);
  display: flex;
  justify-content: center;
  margin-top: 8px;
  min-height: 44px;
  text-decoration: underline;
}

/* Raakdoelen op de checkout. Gemeten op 390px vóór deze regels: alle acht betaalradio's
   en beide checkboxes waren 13x13 CSS-px, met labels van 23px hoog — tien van de dertien
   bedienbare elementen onder de 44x44 die WCAG 2.5.5 vraagt. De verplichte
   voorwaarden-checkbox, de laatste handeling vóór betalen, was daarvan de kleinste.
   Het vakje zelf gaat naar 20px (groter oogt kinderlijk); het label eromheen levert de
   resterende hoogte, zodat de hele regel raakbaar is en niet alleen het vierkantje. */
.woocommerce-checkout #payment ul.payment_methods li label,
.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  align-items: center;
  display: flex;
  gap: 10px;
  min-height: 44px;
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
.woocommerce-checkout .woocommerce-form__label-for-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  height: 20px;
  margin: 0;
  width: 20px;
}

/* ── PDP-koopblok: eenheidskeuze + regeltotaal ──────────────────────────────
   De keuze verpakt-versus-bulk zat in een dropdown die één optie tegelijk toonde,
   waardoor vergelijken onthouden-en-rekenen werd. Dit is hetzelfde patroon als op
   de productkaart, maar met een eigen namespace: de kaart-handlers zijn gedelegeerd
   op .bn-unit-btn binnen een .bn-card-buy en zouden hier op een blok werken dat ze
   niet kennen. */
.bn-pdp-units {
  display: flex;
  gap: 8px;
  margin: 0 0 14px;
}

.bn-pdp-unit-btn {
  background: var(--bn-page);
  border: 1px solid var(--bn-line);
  border-radius: var(--bn-radius);
  cursor: pointer;
  display: flex;
  flex: 1;
  flex-direction: column;
  font: inherit;
  gap: 2px;
  min-height: 56px;
  justify-content: center;
  padding: 10px 14px;
  text-align: left;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.bn-pdp-unit-btn:hover { border-color: var(--bn-muted); }

.bn-pdp-unit-btn__naam {
  color: var(--bn-ink);
  font-size: 14px;
  font-weight: var(--bn-btn-weight);
}

.bn-pdp-unit-btn__prijs {
  color: var(--bn-muted);
  font-size: 13px;
}

/* Actief: navy vulling, zelfde taal als de primaire knoppen elders. */
.bn-pdp-unit-btn--active {
  background: var(--bn-ink);
  border-color: var(--bn-ink);
}

.bn-pdp-unit-btn--active .bn-pdp-unit-btn__naam,
.bn-pdp-unit-btn--active .bn-pdp-unit-btn__prijs { color: #fff; }

.bn-pdp-total {
  color: var(--bn-text);
  font-size: 14px;
  margin-top: 12px;
}

.bn-pdp-total strong { color: var(--bn-ink); font-size: 16px; }

.bn-pdp-total__korting { color: var(--bn-success); font-weight: 600; }

/* MOQ-melding onder het regeltotaal. Navy op de zachte tint, niet rood: dit is een
   feit over hoe er wordt verpakt, geen fout van de inkoper — dezelfde toon als de
   tekortmelding op de homepage, die om dezelfde reden geen alarmkleur gebruikt. */
.bn-pdp-total__moq {
  background: var(--bn-soft);
  border-radius: var(--bn-radius);
  color: var(--bn-ink);
  display: block;
  font-size: 13px;
  margin-top: 8px;
  padding: 8px 10px;
}

.bn-pdp-total__moq strong { font-size: inherit; }

@media (max-width: 480px) {
  .bn-pdp-units { flex-direction: column; }
}

/* [hidden] is in de UA-stylesheet niets meer dan display:none, en .bn-option-btn zet
   display:inline-flex — die auteursregel wint. Zonder deze regel waren de ingeklapte
   opties wel als hidden gemarkeerd maar bleven ze gewoon ruimte innemen (gemeten:
   KLEUR bleef op y=1571 staan in plaats van omhoog te schuiven). */
.bn-option-btn[hidden] { display: none !important; }

/* ── Facet: "toon meer" voor de lange staart ────────────────────────────────
   Waarden onder de drempel (zie bn_render_option_buttons) staan achter deze knop,
   zodat een facet de facetten eronder niet van het scherm duwt. Bewust een tekstlink
   en geen knopvorm: het is navigatie binnen het facet, geen filterkeuze — anders
   concurreert hij visueel met de optieknoppen ernaast. */
.bn-show-more {
  background: none;
  border: 0;
  color: var(--bn-accent-text);
  cursor: pointer;
  display: inline-block;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  margin-top: 8px;
  min-height: 44px;
  padding: 0;
  text-align: left;
}

.bn-show-more:hover { text-decoration: underline; }

.bn-show-more:focus-visible {
  outline: 2px solid var(--bn-accent);
  outline-offset: 3px;
  border-radius: var(--bn-radius);
}

/* Geen eigen regels voor .woocommerce-terms-and-conditions: gemeten staat dat blok
   al ingeklapt achter de link "algemene voorwaarden" (hoogte 0) en begrenst
   WooCommerce het zelf op max-height 200px met overflow auto. De melding dat de
   volledige AV boven de bestelknop stond, klopte niet — die telde koppen in de DOM,
   niet in beeld. */


/* Fout en mededeling zagen er vrijwel identiek uit: zelfde achtergrond
   rgb(246,245,248) en zelfde tekstkleur rgb(81,81,81), alleen een randkleur van
   3px verschilde. Een fout hoort ook zonder kleurwaarneming te herkennen zijn,
   dus krijgt hij een eigen vlak en zwaardere tekst. */
.woocommerce-error {
  background: #fdf3f3;
  border: 1px solid #e7b4b6;
  border-radius: 8px;
  color: #7f1216;
}
.woocommerce-error li { font-weight: 600; }

/* De "excl. BTW" achter de kaartprijs stond op de browserstandaard voor <small>:
   0.8333em van 13px = 10,83px. Niemand koos dat getal, en het viel als enige buiten
   de schaal (11/12/13/14/15/16). Expliciet op 11px, de stap die er al 36x staat. */
.bn-product-card__price small {
  font-size: 11px;
}

/* ── Formulieren in de winkel ───────────────────────────────────────────────
   De invoervelden droegen WooCommerce' eigen opmaak en niet die van de winkel:
   randkleur rgba(32,7,7,.8) en radius 4px, terwijl de knop op 3px stond en de rest
   van de winkel op 8px.

   Niet met een specifiekere selector opgelost. WooCommerce' eigen regel
   (.woocommerce form .form-row .input-text) is specifieker dan wat een thema
   redelijkerwijs kan schrijven, maar leest zijn waarden uit CSS-variabelen die
   daar precies voor bedoeld zijn. Die zetten is de manier die WooCommerce zelf
   aanwijst — en het werkt meteen op ALLE formulieren: checkout, winkelwagen en
   mijn-account, in plaats van alleen op de pagina die ik toevallig bekeek. */
:root {
  --wc-form-border-color: var(--bn-line, #e5e7eb);
  --wc-form-border-radius: 8px;
  --wc-form-border-width: 1px;
  --wc-form-color-text: var(--bn-ink, #1a2340);
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  font-size: 16px; /* onder 16px zoomt iOS Safari in bij focus en blijft ingezoomd (F-06) */
  min-height: 44px;
  padding: 10px 12px;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  outline: 2px solid var(--bn-accent, #f0703c);
  outline-offset: 1px;
}

.woocommerce-checkout label {
  color: var(--bn-ink, #1a2340);
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
}

/* Zelfde radius als de rest van de winkel; stond op 3px. */
.woocommerce-checkout #place_order {
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  min-height: 52px;
}