/* =====================================================================
   BSW-Bricks — Toypro-stijl design tokens & components
   ===================================================================== */

/* De kleur-, radius- en lettertokens die hier stonden waren een tweede,
   tegenstrijdig systeem: LEGO-geel #FFD500, rood als accent, bijna-zwart
   als tekstkleur en een font-family 'Inter' die nergens geladen wordt.
   shop.css legde ze al om, dus hier stonden ze alleen nog in de weg.
   Wat overblijft zijn de twee vlakken en de twee schaduwen die de oude
   .bb-componenten nog gebruiken; de kleuren, --bb-radius en --bb-radius-pill
   komen nu uit de tokens van shop.css. */
:root {
  --bb-bg: #FFFFFF;
  --bb-bg-2: #FAFAFA;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; color: var(--bb-ink); background: var(--bb-bg); }
/* De focusring staat in shop.css, één keer, in navy. De regel die hier
   stond zette hem op amber en won op <summary>, want die staat niet in
   de opsomming van shop.css. Amber op wit haalt 4,5:1 niet. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: 0; left: 0; transform: translateY(-100%); background: var(--bb-yellow); color: var(--bb-ink); padding: 8px 16px; z-index: 10000; text-decoration: none; font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
body { margin: 0; }
body { line-height: 1.55; }
a { color: var(--bb-ink); text-decoration: none; }
a:hover { color: var(--bb-accent); }
img { max-width: 100%; height: auto; display: block; }

/* ---------- Header ----------
   De oude header (.bb-header, .bb-header-top, .bb-header-inner, .bb-logo,
   .bb-locale-switcher, .bb-account-link) en de oude gele navigatiebalk
   (.bb-nav) staan in geen enkele template van dit thema meer: die rollen
   zijn .bsw-svc, .bsw-hdr en .bsw-nav geworden. De regels zijn weg; van de
   weesmaten 42px, 36px, 28px en 24px kwam de helft hiervandaan.
   Wat blijft staan is .bb-search en .bb-cart-link: die klassen dragen de
   haken voor de autocomplete en de mandje-teller in bsw-bricks.js. */
.bb-search { position: relative; }
.bb-search input { width: 100%; padding: 12px 48px 12px 16px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 15px; outline: none; transition: border-color 0.15s; }
.bb-search input:focus { border-color: var(--bb-yellow-dark); }
.bb-search button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: var(--bb-yellow); color: var(--bb-ink); padding: 8px 14px; border-radius: var(--bb-radius); font-weight: 700; cursor: pointer; }
.bb-search button:hover { background: var(--bb-yellow-dark); }
.bb-cart-link { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-weight: 600; }
.bb-cart-link .count { background: var(--bb-accent); color: #fff; padding: 1px 8px; border-radius: var(--bb-radius-pill); font-size: 12px; font-weight: 700; }

/* De oude hero (.bb-hero) en het drieluik (.bb-3step) staan evenmin nog in
   een template: het drieluik op de homepage is .bsw-steps geworden. Daar
   kwamen de 42px- en 36px-koppen vandaan. Weg.
   De zoekbalk staat onder 900px al op order 3 (shop.css, blok 18), dus de
   media query die dat hier onder 700px nog eens deed is ook weg. */

/* ---------- Search autocomplete ----------
   Deze klassen komen niet uit een template maar uit bsw-bricks.js: de
   suggestielijst wordt daar opgebouwd (regel 141 en verder). Ze blijven
   dus staan; shop.css zet er alleen kleur en radius overheen. */
.bb-suggest { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); box-shadow: var(--bb-shadow-card); margin-top: 6px; max-height: 480px; overflow: auto; display: none; z-index: 1000; }
.bb-suggest-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--bb-line); text-decoration: none; color: var(--bb-ink); }
.bb-suggest-item:hover { background: var(--bb-bg-2); }
.bb-suggest-item img { width: 40px; height: 40px; object-fit: contain; background: var(--bb-bg-2); border-radius: 4px; padding: 4px; flex: 0 0 40px; }
.bb-suggest-text { flex: 1; min-width: 0; }
.bb-suggest-no { font-family: ui-monospace, monospace; font-size: 11px; color: var(--bb-muted); }
.bb-suggest-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bb-suggest-price { font-weight: 700; font-size: 13px; color: var(--bb-ink); flex: 0 0 auto; }
.bb-suggest-all { display: block; padding: 10px 14px; text-align: center; font-weight: 700; font-size: 13px; background: var(--bb-yellow); color: var(--bb-ink); }

/* ---------- Catalog ---------- */
.bb-wrap { max-width: 1280px; margin: 0 auto; padding: 24px; }
/* Mobiel: minder side-padding zodat content meer breedte krijgt. */
@media (max-width: 600px) {
  .bb-wrap { padding: 14px; }
}
.bb-page-head { margin: 24px 0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.bb-page-head h1 { font-size: 28px; font-weight: 800; margin: 0; }
.bb-page-head .meta { color: var(--bb-muted); font-size: 14px; }

.bb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; }
.bb-card { background: var(--bb-bg); border: 1px solid var(--bb-line); border-radius: var(--bb-radius); overflow: hidden; transition: transform 0.15s, box-shadow 0.15s; }
.bb-card:hover { transform: translateY(-2px); box-shadow: var(--bb-shadow-card); }
.bb-card-img { position: relative; aspect-ratio: 1; background: var(--bb-bg-2); display: flex; align-items: center; justify-content: center; padding: 12px; }
.bb-card-img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.bb-card-price { position: absolute; top: 8px; right: 8px; background: var(--bb-yellow); color: var(--bb-ink); padding: 4px 10px; border-radius: var(--bb-radius-pill); font-weight: 700; font-size: 13px; }
.bb-card-body { padding: 12px; }
.bb-card-no { font-size: 11px; color: var(--bb-muted); font-family: ui-monospace, monospace; }
.bb-card-name { font-size: 13px; font-weight: 600; margin: 4px 0; line-height: 1.4; min-height: 36px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bb-card-meta { font-size: 11px; color: var(--bb-muted); margin-top: 4px; }

/* Favoriet-knop op category-card */
.bb-card-wrap {
  position: relative;
  display: block;             /* anders rendert inline-flow met afgekapte border */
  background: var(--bb-bg);
  border: 1px solid var(--bb-line);
  border-radius: var(--bb-radius);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
.bb-card-wrap:hover { transform: translateY(-2px); box-shadow: var(--bb-shadow-card); }
.bb-card-wrap .bb-card { border: 0; border-radius: 0; transition: none; }
.bb-card-wrap .bb-card:hover { transform: none; box-shadow: none; }
.bb-fav-btn {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--bb-line);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--bb-muted);
  transition: color .15s, background .15s, transform .15s;
  z-index: 2;
}
.bb-fav-btn:hover { color: #e11d48; transform: scale(1.08); }
.bb-fav-btn.is-fav { color: #e11d48; background: rgba(255, 228, 230, 0.95); }
.bb-fav-btn.is-fav svg { fill: currentColor; }

/* ---------- PDP ---------- */
.bb-pdp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; margin: 32px 0; }
.bb-pdp-img { background: var(--bb-bg-2); border-radius: var(--bb-radius); padding: 40px; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; }
.bb-pdp-img img { max-width: 100%; max-height: 400px; object-fit: contain; }
.bb-pdp-info { min-width: 0; }
.bb-pdp-info h1 { font-size: 28px; margin: 0 0 8px; word-break: break-word; }
.bb-pdp-info .item-no { font-family: ui-monospace, monospace; color: var(--bb-muted); font-size: 13px; }

.bb-pdp-listings { margin-top: 24px; overflow-x: auto; }
.bb-pdp-listings table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bb-pdp-listings th { text-align: left; padding: 10px; border-bottom: 1px solid var(--bb-line); font-size: 11px; text-transform: uppercase; color: var(--bb-muted); }
.bb-pdp-listings td { padding: 10px; border-bottom: 1px solid var(--bb-line); vertical-align: middle; }
.bb-color-swatch { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; margin-right: 8px; border: 1px solid rgba(0,0,0,0.1); }
.bb-add-btn { background: var(--bb-yellow); border: 0; padding: 8px 14px; border-radius: var(--bb-radius); font-weight: 700; cursor: pointer; font-size: 13px; }
.bb-add-btn:hover { background: var(--bb-yellow-dark); }
.bb-add-btn:disabled { background: var(--bb-line); cursor: not-allowed; color: var(--bb-muted); }

/* ---------- Image lightbox ---------- */
.bb-pdp-img { cursor: zoom-in; position: relative; transition: background 0.2s; }
.bb-pdp-listings tbody tr { cursor: pointer; transition: background 0.12s; }
.bb-pdp-listings tbody tr:hover { background: rgba(255,213,0,0.08); }
.bb-pdp-listings tbody tr.is-selected { background: rgba(255,213,0,0.18); border-left: 3px solid var(--bb-yellow-dark); }
.bb-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; }
.bb-lightbox.is-open { display: flex; }
.bb-lightbox img { max-width: 90vw; max-height: 90vh; object-fit: contain; }
.bb-lightbox-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 36px; background: none; border: 0; cursor: pointer; line-height: 1; }

/* ---------- Cart / Checkout ---------- */
.bb-cart-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; margin: 32px 0; }
.bb-cart-table { width: 100%; border-collapse: collapse; }
.bb-cart-table th { text-align: left; padding: 12px; font-size: 11px; text-transform: uppercase; color: var(--bb-muted); border-bottom: 1px solid var(--bb-line); }
.bb-cart-table td { padding: 14px 12px; border-bottom: 1px solid var(--bb-line); vertical-align: middle; }
.bb-cart-table img { width: 60px; height: 60px; object-fit: contain; background: var(--bb-bg-2); border-radius: 4px; padding: 4px; }
.bb-cart-summary { background: var(--bb-bg-2); border: 1px solid var(--bb-line); border-radius: var(--bb-radius); padding: 24px; height: fit-content; position: sticky; top: 100px; }
.bb-cart-summary-row { display: flex; justify-content: space-between; margin: 8px 0; font-size: 14px; }
.bb-cart-summary-total { font-size: 20px; font-weight: 800; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--bb-line); }
.bb-btn-primary { display: block; width: 100%; padding: 14px; background: var(--bb-ink); color: #fff; text-align: center; border-radius: var(--bb-radius); font-weight: 700; border: 0; cursor: pointer; font-size: 15px; }
.bb-btn-primary:hover { background: var(--bb-ink-2); }
.bb-btn-ghost { display: inline-block; padding: 10px 16px; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); font-weight: 600; }

.bb-empty { text-align: center; padding: 80px 24px; color: var(--bb-muted); }
.bb-empty h2 { color: var(--bb-ink); font-size: 24px; margin: 16px 0 8px; }

.bb-form-row { margin: 12px 0; }
.bb-form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--bb-ink-2); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.bb-form-row input, .bb-form-row select { width: 100%; padding: 10px 12px; border: 1px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 14px; outline: none; }
.bb-form-row input:focus, .bb-form-row select:focus { border-color: var(--bb-yellow-dark); }
.bb-form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 800px) {
  .bb-pdp, .bb-cart-grid { grid-template-columns: 1fr; }
  .bb-cart-summary { position: static; }
}

/* ---------- Mobile bottom-nav ---------- */
.bb-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--bb-line); z-index: 100; padding: 8px 0 max(8px, env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(0,0,0,0.06); }
.bb-bottom-nav-inner { display: flex; justify-content: space-around; align-items: center; max-width: 600px; margin: 0 auto; }
.bb-bottom-nav a { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 12px; font-size: var(--fs-micro); font-weight: 600; color: var(--bb-ink-2); text-decoration: none; min-width: 56px; position: relative; }
/* Op 320px telden vijf items met 12px zijpadding op tot 339px en scrolde
   de hele site zijwaarts. Smallere padding en min-width:0 halen dat weg;
   het tikdoel blijft ruim 44px hoog. */
@media (max-width: 360px) {
  .bb-bottom-nav a { padding: 6px 4px; min-width: 0; }
  .bb-bottom-nav-inner { justify-content: space-between; }
}
.bb-bottom-nav a.is-active { color: var(--bb-accent); }
.bb-bottom-nav .icon { font-size: 22px; line-height: 1; }
.bb-bottom-nav .badge { position: absolute; top: 4px; right: 8px; background: var(--bb-accent); color: #fff; border-radius: 999px; padding: 1px 6px; font-size: var(--fs-micro); font-weight: 700; }
@media (max-width: 700px) {
  .bb-bottom-nav { display: block; }
  body { padding-bottom: 64px; }
}

/* Staging-switcher (devops bar) niet overlappen — bb-bottom-nav iets hoger */
#bsw-staging-bar { bottom: 0 !important; }
@media (max-width: 700px) {
  .bb-bottom-nav { bottom: 50px; } /* maak ruimte voor staging-bar (max 50px hoog) */
  body { padding-bottom: 120px; }
}

/* ---------- Footer ----------
   De oude footer (.bb-footer) is vervangen door .bsw-ft in shop.css en
   staat in geen template van dit thema meer. De regels zijn weg; de 28px
   en 24px die hier rondzwierven zijn daarmee ook verdwenen. */

/* ---------------------------------------------------------------
   Zoeklijsten (wanted lists)
   --------------------------------------------------------------- */
.bb-wl-intro { max-width: 760px; color: var(--bb-ink-2); line-height: 1.6; }
.bb-wl-flash { padding: 12px 16px; border-radius: var(--bb-radius); margin: 16px 0; background: var(--bb-bg-2); border: 1px solid var(--bb-line); font-size: 14px; }
.bb-wl-flash-ok { background: #E8F8F3; border-color: #B9E8DA; color: #05614A; }
.bb-wl-flash-warn { background: #FFF6E0; border-color: #F2DFA8; color: #6B4E00; }

.bb-wl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 16px; margin: 24px 0; }
.bb-wl-card { display: block; padding: 18px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); text-decoration: none; color: inherit; background: var(--bb-bg); transition: border-color .15s, box-shadow .15s; }
.bb-wl-card:hover { border-color: var(--bb-yellow); box-shadow: var(--bb-shadow-card); }
.bb-wl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bb-wl-card-head h2 { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-head); }
.bb-wl-heart { width: 18px; height: 18px; color: var(--bb-accent); flex: none; }
.bb-wl-card-meta { margin-top: 6px; font-size: 13px; color: var(--bb-muted); }
.bb-wl-card-cov { margin-top: 6px; font-size: 13px; font-weight: 600; }

.bb-wl-bar { height: 8px; border-radius: var(--bb-radius-pill); background: var(--bb-line); overflow: hidden; margin-top: 10px; }
.bb-wl-bar > span { display: block; height: 100%; background: var(--bb-success); }
.bb-wl-bar-lg { height: 12px; margin-top: 12px; }

.bb-wl-summary { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding: 20px; border: 2px solid var(--bb-ink); border-radius: var(--bb-radius); margin: 20px 0 24px; }
.bb-wl-summary-main { flex: 1 1 280px; }
.bb-wl-summary-main strong { font-size: 20px; }
.bb-wl-summary-sub { margin-top: 8px; font-size: 13px; color: var(--bb-ink-2); }
.bb-wl-summary-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.bb-wl-notify { display: flex; gap: 8px; align-items: center; }
.bb-wl-notify input[type="email"] { padding: 10px 12px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 14px; }

.bb-wl-table td { vertical-align: middle; }
.bb-wl-thumb { width: 72px; }
.bb-wl-thumb img { width: 64px; height: 64px; object-fit: contain; }
.bb-wl-name { font-weight: 600; color: inherit; }
.bb-wl-no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--bb-muted); }
.bb-wl-sub { font-size: 12px; color: var(--bb-ink-2); margin-top: 4px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.bb-wl-qty input { width: 74px; padding: 6px 8px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 14px; }
.bb-wl-have { font-weight: 700; }
.bb-wl-price { text-align: right; white-space: nowrap; }
.bb-wl-x { border: 0; background: none; color: var(--bb-accent); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }

.bb-wl-badge { display: inline-block; padding: 3px 10px; border-radius: var(--bb-radius-pill); font-size: 12px; font-weight: 700; white-space: nowrap; }
.bb-wl-badge-full { background: #E8F8F3; color: #05614A; }
.bb-wl-badge-done { background: #E8F8F3; color: #05614A; }
.bb-wl-badge-partial { background: #FFF6E0; color: #6B4E00; }
.bb-wl-badge-none { background: #FDE8EA; color: #8E1B26; }
.bb-wl-badge-unknown { background: var(--bb-bg-2); color: var(--bb-muted); }
.bb-wl-alerted { display: inline-flex; vertical-align: middle; margin-left: 6px; color: var(--bb-muted); }
.bb-wl-alerted svg { width: 16px; height: 16px; }
.bb-wl-none .bb-wl-thumb img, .bb-wl-unknown .bb-wl-thumb img { opacity: .55; }

.bb-wl-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; margin-top: 32px; }
.bb-wl-panel { padding: 20px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); background: var(--bb-bg-2); }
.bb-wl-panel h3 { margin: 0 0 12px; font-size: 16px; }
.bb-wl-panel label { display: block; font-size: 13px; color: var(--bb-ink-2); margin-bottom: 6px; }
.bb-wl-panel input[type="text"], .bb-wl-panel textarea { width: 100%; padding: 12px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 14px; background: var(--bb-bg); }
.bb-wl-panel textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.bb-wl-panel .bb-btn-primary { margin-top: 12px; max-width: 260px; }
.bb-wl-help { font-size: 13px; color: var(--bb-muted); margin: 0 0 10px; line-height: 1.5; }
.bb-wl-file { margin-top: 10px; font-size: 13px; }
.bb-wl-inline { display: flex; gap: 8px; align-items: center; }
.bb-wl-inline input[type="text"] { flex: 1; }
.bb-wl-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 16px; }
.bb-wl-share { display: block; margin-top: 14px; }
.bb-wl-share input { width: 100%; padding: 10px 12px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bb-wl-danger { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--bb-line); }
.bb-wl-danger button { border: 0; background: none; color: var(--bb-accent); font-size: 13px; cursor: pointer; padding: 0; text-decoration: underline; }
.bb-wl-guest { margin-top: 24px; font-size: 13px; color: var(--bb-muted); }

@media (max-width: 700px) {
  /* flex-basis telt in een kolom als HOOGTE: zonder deze reset bleef het
     samenvattingsblok 280px hoog en stond er een gat onder de balk. */
  .bb-wl-summary { flex-direction: column; align-items: stretch; }
  .bb-wl-summary-main { flex: 0 0 auto; }
  .bb-wl-summary-actions { flex-direction: column; align-items: stretch; }
  .bb-wl-summary-actions form { display: flex; }
  .bb-wl-summary-actions .bb-btn-primary,
  .bb-wl-summary-actions .bb-btn-ghost { width: 100%; max-width: none; }
  .bb-wl-notify { flex-direction: column; align-items: stretch; }
  .bb-wl-notify input[type="email"] { width: 100%; }

  .bb-wl-table thead { display: none; }
  .bb-wl-table tr { display: grid; grid-template-columns: 72px 1fr; gap: 2px 10px; padding: 14px 0; border-bottom: 1px solid var(--bb-line); }
  .bb-wl-table td { border: 0; padding: 2px 0; }
  .bb-wl-thumb { grid-row: span 5; }
  /* De koprij is weg op mobiel, dus zonder label is "7" een raadsel. */
  .bb-wl-table td[data-label]::before { content: attr(data-label) ": "; color: var(--bb-muted); font-size: 12px; font-weight: 400; }
  .bb-wl-price { text-align: left; }
  .bb-wl-qty { display: inline-flex; }
  .bb-wl-table td:last-child { justify-self: start; }
}
.bb-wl-remark { font-size: 12px; color: var(--bb-muted); margin-top: 4px; font-style: italic; }

/* Nieuwsbrief in de footer. Stond als inline display:flex met een input die
   door zijn standaard size niet onder ~170px kon krimpen; op 320px duwde dat
   de knop 12px buiten beeld. */
.bb-nl-form { display: flex; gap: 8px; max-width: 420px; flex-wrap: wrap; }
.bb-nl-form input[type="email"] { flex: 1 1 160px; min-width: 0; padding: 10px 12px; border-radius: var(--bb-radius); border: 0; font-size: 14px; }
.bb-nl-form button { padding: 10px 18px; background: var(--bb-yellow); color: var(--bb-ink); border: 0; border-radius: var(--bb-radius); font-weight: 700; cursor: pointer; }
@media (max-width: 360px) {
  .bb-nl-form input[type="email"], .bb-nl-form button { flex: 1 1 100%; }
}

/* E-mailpoort: zonder adres bestaat een zoeklijst maar in één browser. */
.bb-wl-gate { margin: 24px 0; padding: 24px; border: 2px solid var(--bb-ink); border-radius: var(--bb-radius); background: var(--bb-bg-2); }
.bb-wl-gate h3 { margin: 0 0 8px; font-size: 18px; }
.bb-wl-gate p { margin: 0 0 14px; max-width: 62ch; color: var(--bb-ink-2); font-size: 14px; line-height: 1.55; }
.bb-wl-gate-err { color: var(--bb-accent) !important; font-weight: 600; }
.bb-wl-gate-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bb-wl-gate-row input[type="email"] { flex: 1 1 240px; min-width: 0; padding: 12px 14px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 15px; }
.bb-wl-gate-row .bb-btn-primary { flex: 0 0 auto; min-height: 48px; }
@media (max-width: 480px) { .bb-wl-gate-row .bb-btn-primary { flex: 1 1 100%; } }

/* ---------------------------------------------------------------
   Zoeklijst als werkblad: selecteren, aanpassen, pagineren
   --------------------------------------------------------------- */
.bb-wl-toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 2px solid var(--bb-line); margin-top: 8px; }
.bb-wl-tool-left { display: flex; align-items: center; gap: 14px; }
.bb-wl-tool-right { display: flex; gap: 8px; flex-wrap: wrap; }
.bb-wl-checkall { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.bb-wl-checkall input { width: 18px; height: 18px; }
.bb-wl-count { font-size: 13px; font-weight: 700; color: var(--bb-accent); }
.bb-wl-tool-right input[type="search"], .bb-wl-tool-right select { padding: 9px 12px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 13px; background: #fff; min-height: 40px; }
.bb-wl-tool-right input[type="search"] { min-width: 180px; }

.bb-wl-pick { width: 38px; }
.bb-wl-pick input { width: 18px; height: 18px; cursor: pointer; }
.bb-wl-row.is-picked { background: #FFFBEA; }
.bb-wl-row.is-weg { opacity: .35; }
.bb-wl-table.is-laden { opacity: .5; pointer-events: none; }
.bb-wl-qty-input { width: 74px; padding: 6px 8px; border: 2px solid var(--bb-line); border-radius: var(--bb-radius); font-size: 14px; }
/* .bb-wl-x stond hier woord voor woord voor de tweede keer; de eerste
   staat hierboven bij de tabel en doet al het werk. */

.bb-wl-pager { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 18px; }
.bb-wl-pager-info { font-size: 13px; color: var(--bb-muted); }
.bb-wl-pager-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bb-wl-pager-btns .bb-btn-ghost { padding: 8px 13px; font-size: 13px; min-width: 40px; text-align: center; }
.bb-wl-pager-btns .is-active { border-color: var(--bb-ink); background: var(--bb-ink); color: #fff; }
.bb-wl-pager-btns .is-off { opacity: .35; pointer-events: none; }

/* Twee zwevende balken: één voor de selectie, één voor niet-opgeslagen
   aantallen. Ze staan onder elkaar zodat ze elkaar nooit overlappen. */
.bb-wl-bulk, .bb-wl-save { position: sticky; bottom: 0; z-index: 30; margin-top: 12px; }
/* display:flex hieronder wint anders van het hidden-attribuut, waardoor
   de opslaan-balk na het opslaan zichtbaar bleef staan. */
.bb-wl-bulk[hidden], .bb-wl-save[hidden] { display: none !important; }
.bb-wl-bulk-inner, .bb-wl-save { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--bb-ink); color: #fff; border-radius: var(--bb-radius); box-shadow: var(--bb-shadow-card); }
.bb-wl-bulk-count, .bb-wl-save span { font-weight: 700; font-size: 14px; }
.bb-wl-bulk-acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
/* bb-btn-primary is elders op volle breedte gezet; in deze balk staat
   hij naast de andere knoppen. */
.bb-wl-bulk-acties .bb-btn-primary { width: auto; max-width: none; margin: 0; padding: 10px 18px; }
/* De balk is zwart, dus de primaire knop moet geel worden: zwart op zwart
   leest niet als knop. */
.bb-wl-bulk .bb-btn-primary { background: var(--bb-yellow); color: var(--bb-ink); border-color: var(--bb-yellow); }
.bb-wl-bulk .bb-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,0.4); }
.bb-wl-bulk .bb-btn-ghost:hover { border-color: #fff; }
.bb-wl-bulk-clear { background: none; border: 0; color: rgba(255,255,255,0.7); font-size: 13px; cursor: pointer; text-decoration: underline; }
.bb-wl-save { background: var(--bb-yellow); color: var(--bb-ink); }

.bb-wl-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 200; padding: 12px 20px; background: var(--bb-ink); color: #fff; border-radius: var(--bb-radius-pill); font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; box-shadow: var(--bb-shadow-card); }
.bb-wl-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 700px) {
  .bb-wl-toolbar { flex-direction: column; align-items: stretch; }
  .bb-wl-tool-right { display: grid; grid-template-columns: 1fr 1fr; }
  .bb-wl-tool-right input[type="search"] { grid-column: 1 / -1; min-width: 0; }
  .bb-wl-table tr { grid-template-columns: 34px 64px 1fr; }
  .bb-wl-pick { grid-row: span 5; align-self: start; padding-top: 10px !important; }
  .bb-wl-thumb { grid-row: span 5; }
  /* De site heeft onderaan een vaste navigatiebalk; de selectiebalk gaat
     daarboven staan in plaats van eronder te verdwijnen. */
  .bb-wl-bulk, .bb-wl-save { bottom: 70px; }
  .bb-wl-bulk-inner, .bb-wl-save { flex-direction: column; align-items: stretch; }
  .bb-wl-bulk-inner { gap: 8px; padding: 10px 12px; }
  .bb-wl-bulk-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .bb-wl-bulk-acties .bb-btn-primary, .bb-wl-bulk-acties .bb-btn-ghost { padding: 9px 10px; font-size: 13px; min-height: 42px; }
  .bb-wl-bulk-clear { grid-column: 1 / -1; }
  .bb-wl-toast { left: 12px; right: 12px; bottom: 88px; transform: none; text-align: center; }
  .bb-wl-toast.is-on { transform: none; }
}