/* =====================================================================
   shop.css — designsysteem Bouwsteenwinkel.shop (channel bsw-bricks)

   Laadt NA styles.css. styles.css blijft staan als vangnet voor pagina's
   die nog niet herbouwd zijn; alles met het voorvoegsel bsw- hoort bij
   het nieuwe ontwerp.

   Blok 1 is de maatvoering: kleur, typografie, ruimte, radius, schaduw en
   de vaste hoogtes van knoppen en velden. Elk ander blok in dit bestand,
   en elk paginabestand ernaast, hoort daarnaar te verwijzen in plaats van
   een eigen px-waarde neer te zetten.

   Volgorde:
     1  Tokens
     2  Basis en typografie
     3  Layout en container
     4  Knoppen
     5  Kleurstaal
     6  Stepper
     7  Pillen, badges, labels
     8  Onderdeelkaart en setkaart
     9  Facetten en filters
    10  Dekkingsbalk
    11  Eigen dropdown
    12  Toast
    13  Tabellen
    14  Formuliervelden
    15  Header (servicebalk, hoofdbalk, navigatie, megamenu)
    16  Footer
    17  Overschrijvingen op de oude klassen die JS nodig heeft
    18  Responsief
    19  prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------
   1  Tokens
   --------------------------------------------------------------- */
:root {
  /* De oude stylesheet laadt nog mee als vangnet voor pagina's die nog niet
     herbouwd zijn. Haar variabelen wijzen naar het oude LEGO-geel; hier
     leggen we ze om, zodat een bb-klasse nooit ongemerkt #FFD500 binnenhaalt. */
  --bb-yellow: #FFB81C;
  --bb-yellow-dark: #F5AC0F;
  --bb-ink: #1B2A4E;
  --bb-ink-2: #4A5475;
  --bb-muted: #6C7589;
  --bb-line: #E5E7EB;
  --bb-accent: #B73327;
  --bb-success: #2F8C46;
  /* De oude schaduwen waren zwart getint; de trap hieronder is navy en
     heeft een negatieve spread. Eén trap voor het hele kanaal. */
  --bb-shadow: var(--sh-1);
  --bb-shadow-card: var(--sh-2);

  --navy:        #1B2A4E;
  --navy-2:      #243760;
  --navy-3:      #36487A;
  --navy-deep:   #0F1A36;
  --navy-ink:    #0A1226;

  --yellow:      #FFB81C;
  --yellow-2:    #F5AC0F;
  --yellow-soft: #FFE9A8;

  --cream:       #FFF8E1;
  --cream-2:     #FBEFC4;
  --cream-3:     #F4E5B5;

  --white:       #FFFFFF;
  --off:         #FBFAF7;
  --gray-line:   #E5E7EB;
  --gray-2:      #EFEFF2;
  --gray-3:      #DCDFE5;
  --gray-soft:   #F5F5F7;

  --text:        #1B2A4E;
  --text-2:      #4A5475;
  /* --text-muted haalt 4.5:1 op cream, off en gray-soft, dus ook onder 16px. */
  --text-muted:  #5F677A;
  /* Placeholdertekst is tekst en moet 4.5:1 halen: apart token. */
  --text-placeholder: #666E82;
  /* --text-subtle is alleen voor niet-informatieve versiering, nooit voor
     tekst die iets zegt: hij haalt 4.5:1 nergens. */
  --text-subtle: #9098AB;

  --success:     #26733A;
  --success-2:   #1C5C2E;
  --success-bg:  #EAF4EC;
  --warn:        #8A6600;
  --danger:      #B73327;

  /* Eén radius-reeks. De oude stylesheet had een tweede (--bb-radius 8px);
     die wijst hier naar --r-sm, zodat een bb-klasse geen elfde waarde meer
     de pagina in brengt. */
  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-pill: 999px;
  --bb-radius: var(--r-sm);
  --bb-radius-pill: var(--r-pill);
  /* De kaart heeft een rand van 1px, dus de binnenhoek is 1px kleiner dan
     de buitenhoek. Uitgerekend in plaats van 13px overgetypt. */
  --r-md-inner: calc(var(--r-md) - 1px);

  --sh-1:    0 1px 0 rgba(27,42,78,0.04), 0 1px 2px rgba(27,42,78,0.04);
  --sh-2:    0 8px 20px -12px rgba(27,42,78,0.18);
  --sh-3:    0 24px 40px -20px rgba(27,42,78,0.25);
  --sh-deep: 0 32px 60px -28px rgba(15,26,54,0.5);
  --sh-lift: 0 4px 8px -2px rgba(27,42,78,0.08), 0 12px 28px -6px rgba(27,42,78,0.18);
  --sh-seg:  0 1px 2px rgba(27,42,78,0.12);

  --font-head: 'Rubik', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-body: 'Nunito', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --bsw-container: 1400px;
  --bsw-gutter: 24px;

  /* -------------------------------------------------------------
     Typografische schaal
     -------------------------------------------------------------
     Acht maten, één per rol. Elk component verwijst hiernaar en zet
     zelf geen losse px meer. Mobiel schaalt mee door de drie
     displaymaten in één media query om te zetten (onderaan dit
     bestand, blok 18), niet per component. */
  --fs-hero:  48px;   /* hero-kop */
  --fs-h1:    34px;   /* paginakop */
  --fs-h2:    26px;   /* sectiekop */
  --fs-h3:    18px;   /* blok- en paneelkop */
  --fs-body:  16px;   /* lopende tekst, navigatie */
  --fs-sm:    14px;   /* secundaire tekst, tabelcel */
  --fs-cap:   13px;   /* bijschrift, onderdeelnummer, voorraadregel */
  --fs-micro: 12px;   /* kicker, telling, label in kapitalen */

  --fs-price:    22px;  /* prijs op een kaart */
  --fs-price-lg: 26px;  /* prijs in een prijskaart */
  --fs-price-xl: 34px;  /* prijs op de productpagina */

  --fs-btn:    15px;  /* elke knop, van kaart tot blok */
  --fs-btn-lg: 16px;  /* de ene hoofdknop van een pagina */

  /* Drie regelhoogtes, gekoppeld aan de rol. Elk element dat vroeger op
     `normal` bleef staan krijgt er nu expliciet een. */
  --lh-body: 1.6;    /* lopende tekst */
  --lh-head: 1.35;   /* sectiekop, blokkop, kaarttitel */
  --lh-num:  1.1;    /* hero, paginakop, prijzen, tellers, knoplabels */

  /* -------------------------------------------------------------
     Ruimteschaal van 4
     -------------------------------------------------------------
     Alles wat ruimte maakt komt hieruit: gap, padding, margin.
     Waarden buiten deze reeks (2, 6, 10, 14, 18) horen er niet meer
     bij te komen. */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* Verticaal ritme. --sec-gap is de afstand tussen twee secties (elke
     sectie draagt de helft), --kop-gap de afstand van een sectiekop naar
     zijn inhoud. Beide overal gelijk, met of zonder inleidende zin. */
  --sec-gap: var(--sp-9);
  --kop-gap: var(--sp-5);

  /* -------------------------------------------------------------
     Vaste hoogtes: knoppen en invoervelden delen dezelfde reeks
     ------------------------------------------------------------- */
  --h-ctl-lg: 52px;   /* hoofdknop van een pagina, groot invoerveld */
  --h-ctl:    48px;   /* knop of veld in een blok */
  --h-ctl-44: 44px;   /* knop in een rij, tabel of op een kaart */
  --h-ctl-sm: 40px;   /* compacte knop, eigen dropdown */
  --h-ctl-xs: 36px;   /* alleen in de filterkolom */
}

/* ---------------------------------------------------------------
   2  Basis en typografie
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--off);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--navy-2); text-decoration: underline; }
input, button, select, textarea { font-family: inherit; }
/* Eén focusring voor alles wat de toets bereikt, navy, ook op <summary> en
   op elementen die hier niet met naam genoemd staan. :where() houdt de
   specificiteit op nul, dus een component kan hem gericht overschrijven
   (de zoekvelden doen dat met een negatieve offset). */
:where(*):focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }

.bsw-h1, .bsw-page-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h1); line-height: var(--lh-num);
  color: var(--navy); margin: 0;
}
.bsw-h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h2); line-height: var(--lh-head);
  color: var(--navy); margin: 0;
}
.bsw-h2--band { font-size: var(--fs-h1); line-height: var(--lh-num); color: var(--white); }
.bsw-h3 {
  font-family: var(--font-head); font-weight: 600;
  font-size: var(--fs-h3); line-height: var(--lh-head);
  color: var(--navy); margin: 0;
}
.bsw-hero-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-hero); line-height: var(--lh-num);
  letter-spacing: -0.015em; color: var(--white); margin: 0;
}
.bsw-kicker {
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
/* Leesregels nooit breder dan 32em: dat is ongeveer 70 tekens en het
   schaalt mee met de lettermaat, waar een vaste 680px dat niet doet. */
.bsw-lead {
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2);
  max-width: 32em; margin: var(--sp-2) 0 0;
}
.bsw-small { font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted); }
.bsw-secondary { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); }
.bsw-mono {
  font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500;
  line-height: var(--lh-head);
}
.bsw-muted { color: var(--text-muted); }
.bsw-price {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-price); line-height: var(--lh-num);
  color: var(--navy);
}
.bsw-price--lg { font-size: var(--fs-price-lg); }
.bsw-price--pdp { font-size: var(--fs-price-xl); }
.bsw-price__unit {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-cap); line-height: var(--lh-num); color: var(--text-muted);
}
/* "vanaf" bij een onderdeel dat in meer kleuren ligt: de getoonde prijs is
   de laagste van die kleuren, niet de prijs van alles wat er ligt. */
.bsw-price__from {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--fs-cap); line-height: var(--lh-num); color: var(--text-muted);
  margin-right: 2px;
}
.bsw-prose { max-width: 32em; line-height: var(--lh-body); }
.bsw-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;
}

/* ---------------------------------------------------------------
   3  Layout en container
   --------------------------------------------------------------- */
.bsw-container {
  max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter);
}
.bsw-page {
  max-width: var(--bsw-container); margin: 0 auto;
  padding: var(--sp-5) var(--bsw-gutter) var(--sp-8);
}
/* Elke sectie draagt de helft van --sec-gap, dus tussen twee secties zit
   altijd precies --sec-gap. Losse margin-top's erbovenop horen weg. */
.bsw-section { padding: calc(var(--sec-gap) / 2) var(--bsw-gutter); }
.bsw-band {
  background: var(--navy); color: var(--cream); border-radius: var(--r-lg); padding: var(--sp-6);
}
.bsw-band--full { border-radius: 0; padding: var(--sp-7) var(--bsw-gutter); }
.bsw-band a { color: var(--cream); }
.bsw-band a:hover { color: var(--yellow); }


/* Rasters die de pagina-bouwers hergebruiken.
   auto-fill met een ondergrens van 240px: de kaart wordt nooit smaller
   dan de actiebalk nodig heeft ("In mandje" naast een stepper van 123px
   houdt dan 117px over en past op één regel), en het aantal kolommen
   loopt met het venster mee in plaats van in één stap van vijf naar
   drie te springen. */
.bsw-grid-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.bsw-grid-sets  { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--sp-4); }
.bsw-grid-cats  { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: var(--sp-4); }

/* ---------------------------------------------------------------
   4  Knoppen
   --------------------------------------------------------------- */
/* Eén lettermaat voor elke knop (--fs-btn 15px), behalve de ene hoofdknop
   van een pagina. Alleen de hoogte verschilt, en die hangt aan de rol:
   52 hoofdknop, 48 knop in een blok, 44 knop in een rij of op een kaart,
   40 compact (filterkolom, eigen dropdown). */
.bsw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  height: var(--h-ctl); min-height: var(--h-ctl); padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn); line-height: var(--lh-num);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
}
/* Een knop mag nooit breder worden dan de kolom waar hij in staat.
   white-space: nowrap hierboven houdt korte labels netjes op een regel, maar
   maakte van "Zet 1.665 ontbrekende op mijn zoeklijst" een knop van 356
   pixels in een kolom van 288: op een telefoon van 320 liep de tekst buiten
   beeld. Vanaf hier krijgt een lange knoptekst gewoon twee regels. */
.bsw-btn { max-width: 100%; }
@media (max-width: 480px) {
  .bsw-btn {
    white-space: normal; overflow-wrap: break-word;
    height: auto; min-height: var(--h-ctl);
    padding-top: var(--sp-2); padding-bottom: var(--sp-2);
    text-align: center;
  }
}
.bsw-btn:hover { background: var(--yellow-2); color: var(--navy); text-decoration: none; }
.bsw-btn svg { flex: none; }

.bsw-btn--lg { height: var(--h-ctl-lg); min-height: var(--h-ctl-lg); padding: 0 var(--sp-6); font-size: var(--fs-btn-lg); }
.bsw-btn--sm { height: var(--h-ctl-sm); min-height: var(--h-ctl-sm); padding: 0 var(--sp-4); }
.bsw-btn--44 { height: var(--h-ctl-44); min-height: var(--h-ctl-44); padding: 0 var(--sp-4); }
.bsw-btn--block { width: 100%; }

.bsw-btn--secondary {
  background: var(--white); color: var(--navy); border: 1.5px solid var(--navy);
}
.bsw-btn--secondary:hover { background: var(--cream); color: var(--navy); }

.bsw-btn--on-navy { background: var(--white); color: var(--navy); }
.bsw-btn--on-navy:hover { background: var(--cream); color: var(--navy); }

.bsw-btn--on-hero {
  background: rgba(255,255,255,0.10); color: var(--white); border: 1.5px solid var(--white);
}
.bsw-btn--on-hero:hover { background: rgba(255,255,255,0.20); color: var(--white); }

.bsw-btn--quiet {
  background: var(--gray-2); color: var(--text-2);
}
.bsw-btn--quiet:hover { background: var(--gray-3); color: var(--text-2); }

.bsw-btn[disabled], .bsw-btn.is-disabled {
  background: var(--gray-2); color: var(--text-2); cursor: not-allowed; border-color: var(--gray-3);
}
.bsw-btn[disabled]:hover, .bsw-btn.is-disabled:hover { background: var(--gray-2); }

.bsw-btn-text {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-2); height: auto; border: 0; background: transparent;
  color: var(--navy); font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-sm); line-height: var(--lh-body);
  text-decoration: underline; cursor: pointer;
}
.bsw-btn-text:hover { color: var(--navy-2); }
.bsw-btn-text--muted { color: var(--text-2); font-size: var(--fs-cap); font-weight: 400; }

.bsw-iconbtn {
  width: var(--h-ctl); height: var(--h-ctl); flex: none; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: transparent; color: var(--navy);
  cursor: pointer; transition: background 160ms ease-out;
}
.bsw-iconbtn:hover { background: var(--gray-soft); color: var(--navy); text-decoration: none; }

/* ---------------------------------------------------------------
   5  Kleurstaal
   --------------------------------------------------------------- */
.bsw-swatch {
  display: inline-block; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(27,42,78,0.18);
  background-color: var(--gray-2);
}
.bsw-swatch--14 { width: 14px; height: 14px; }
.bsw-swatch--18 { width: 18px; height: 18px; }
.bsw-swatch--22 { width: 22px; height: 22px; }
.bsw-swatch--32 { width: 32px; height: 32px; }
.bsw-swatch--40 { width: 40px; height: 40px; }
.bsw-swatch--64 { width: 64px; height: 64px; }

/* Transparant: witte ondergrond met een diagonale streep over de kleur.
   De kleur zelf komt uit --swatch, die je inline meegeeft. */
.bsw-swatch.is-trans {
  background-color: #FFFFFF;
  background-image:
    linear-gradient(135deg, transparent 44%, rgba(27,42,78,0.35) 44%, rgba(27,42,78,0.35) 56%, transparent 56%),
    linear-gradient(var(--swatch, rgba(200,200,200,0.55)), var(--swatch, rgba(200,200,200,0.55)));
}
.bsw-swatch.is-chrome {
  background-image: linear-gradient(135deg,#E8ECF0,#9BA6B2 45%,#F4F7FA 70%,#8892A0);
}
.bsw-swatch.is-pearl {
  background-image: linear-gradient(135deg,#E9E2D2,#BFB49B 50%,#F2ECE0);
}
.bsw-swatch.is-glow {
  background-color: #D6F5C8;
  box-shadow: inset 0 0 0 1px rgba(27,42,78,0.18), 0 0 8px 2px rgba(190,245,160,0.75);
}

button.bsw-swatch, .bsw-swatch-btn {
  border: 0; padding: 0; cursor: pointer;
}
.bsw-swatch.is-selected, .bsw-swatch-btn.is-selected {
  box-shadow: inset 0 0 0 1px rgba(27,42,78,0.18), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--yellow);
}
.bsw-swatch.is-glow.is-selected {
  box-shadow: inset 0 0 0 1px rgba(27,42,78,0.18), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--yellow), 0 0 8px 6px rgba(190,245,160,0.6);
}

/* Staal met naam ernaast; kleur is nooit de enige drager. */
.bsw-colorline {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2);
}

/* ---------------------------------------------------------------
   6  Stepper
   --------------------------------------------------------------- */
.bsw-stepper { display: flex; align-items: center; }
.bsw-stepper__btn {
  width: var(--h-ctl-44); height: var(--h-ctl-44); flex: none; display: grid; place-items: center;
  border: 0; padding: 0; background: var(--white); color: var(--navy);
  font-size: var(--fs-h3); line-height: var(--lh-num); cursor: pointer;
  transition: background 160ms ease-out;
}
.bsw-stepper__btn:hover { background: var(--gray-soft); }
.bsw-stepper__btn[disabled] { color: var(--text-subtle); cursor: not-allowed; }
.bsw-stepper__val {
  min-width: 28px; text-align: center;
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  line-height: var(--lh-num); color: var(--navy);
  border: 0; background: transparent; padding: 0;
}

/* Variant in de actiebalk van een kaart */
.bsw-stepper--card { border-left: 1px solid var(--gray-2); height: var(--h-ctl-44); }
.bsw-stepper--card .bsw-stepper__btn:last-child { border-radius: 0 0 var(--r-md-inner) 0; }

/* Variant in lijstrijen, per set en bulk */
.bsw-stepper--line {
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm);
  height: var(--h-ctl); background: var(--white);
  overflow: hidden;
}
.bsw-stepper--line .bsw-stepper__btn { height: 100%; background: transparent; }
.bsw-stepper--line .bsw-stepper__val { min-width: 32px; }
.bsw-stepper--line.bsw-stepper--44 { height: var(--h-ctl-44); }

/* Variant op de productpagina */
.bsw-stepper--pdp {
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm);
  height: var(--h-ctl-lg); background: var(--white);
  overflow: hidden;
}
.bsw-stepper--pdp .bsw-stepper__btn {
  width: var(--h-ctl); height: 100%; background: transparent; font-size: var(--fs-h3);
}
.bsw-stepper--pdp .bsw-stepper__val { min-width: 36px; font-size: var(--fs-body); }

/* ---------------------------------------------------------------
   7  Pillen, badges, labels
   --------------------------------------------------------------- */
.bsw-no {
  display: inline-grid; place-items: center; height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); background: var(--white); border: 1px solid var(--gray-line);
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  line-height: var(--lh-num); color: var(--navy);
}
.bsw-tag-used {
  display: inline-grid; place-items: center; height: 22px; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); background: var(--gray-2);
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num); color: var(--text-2);
}
.bsw-count {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--gray-soft);
  font-family: var(--font-mono); font-size: var(--fs-micro);
  line-height: var(--lh-num); color: var(--text-muted);
}
.bsw-chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--sp-6); padding: 0 var(--sp-2) 0 var(--sp-3);
  border: 1px solid var(--cream-3); border-radius: var(--r-pill); background: var(--cream);
  font-size: var(--fs-cap); font-weight: 700; line-height: var(--lh-num); color: var(--navy);
  text-decoration: none;
}
.bsw-chip:hover { text-decoration: none; background: var(--cream-2); color: var(--navy); }
.bsw-chip__x {
  display: grid; place-items: center; width: 18px; height: 18px;
  border: 0; background: transparent; color: var(--navy); cursor: pointer; padding: 0;
}
.bsw-status {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: 26px; padding: 0 var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
}
.bsw-status--found { color: var(--success); background: var(--success-bg); }
.bsw-status--alt   { color: var(--warn);    background: var(--cream); }
.bsw-status--none  { color: var(--text-muted); background: var(--gray-soft); }
.bsw-badge-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-size: var(--fs-cap); font-weight: 700; line-height: var(--lh-num);
}
/* Eén component voor "Nog 2 op voorraad", op de kaart en in de tabel op
   de productpagina. Nooit een tweede maat voor dezelfde zin. */
.bsw-stock {
  font-size: var(--fs-cap); font-weight: 700; line-height: var(--lh-head);
  color: var(--success);
}
.bsw-stock--low { color: var(--danger); }
.bsw-stock--out { color: var(--text-muted); }

/* ---------------------------------------------------------------
   8  Onderdeelkaart en setkaart
   --------------------------------------------------------------- */
.bsw-card {
  display: flex; flex-direction: column; background: var(--white);
  border: 1px solid var(--gray-line); border-radius: var(--r-md); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out;
}
.bsw-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-lift);
  border-color: var(--gray-3);
}
.bsw-card__media {
  /* Wit vlak: de productfoto's staan zelf al op wit, dus een gebroken-witte
     bak eromheen leest als een tweede kader binnen de kaart. */
  position: relative; background: var(--white);
  border-radius: var(--r-md-inner) var(--r-md-inner) 0 0; border-bottom: 1px solid var(--gray-2);
}
.bsw-card__img {
  /* Smalle, gelijke marge rondom en de foto zo groot mogelijk daarbinnen.
     Eén waarde, ook in een schuivende strook: de kaart hoort overal
     dezelfde te zijn. */
  position: relative; aspect-ratio: 1; padding: var(--sp-2);
  display: grid; place-items: center;
}
.bsw-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bsw-card__no {
  position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2;
  display: flex; align-items: center; gap: var(--sp-2);
}
.bsw-card__fav {
  position: absolute; top: var(--sp-1); right: var(--sp-1); z-index: 2;
  width: var(--h-ctl-44); height: var(--h-ctl-44); display: grid; place-items: center;
  border: 0; padding: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer;
  font-size: var(--fs-sm); line-height: var(--lh-num);
}
/* Het formulier eromheen is alleen de drager van de POST; de knop zelf ligt
   absoluut in het beeldvlak, dus het formulier neemt geen ruimte in. */
.bsw-card__favform { margin: 0; padding: 0; border: 0; }
.bsw-card__fav:hover { background: var(--gray-soft); }
.bsw-card__fav svg { width: 20px; height: 20px; stroke: var(--navy); stroke-width: 1.5; fill: none; }
.bsw-card__fav.is-fav svg { fill: var(--yellow); }
.bsw-card__body {
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2);
}
.bsw-card__title {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 700;
  line-height: var(--lh-head); color: var(--navy);
  cursor: pointer;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bsw-card__title:hover { text-decoration: underline; color: var(--navy); }
.bsw-card__price { display: flex; align-items: baseline; gap: var(--sp-2); }
/* De rand van 1px zit boven de knop, niet erin: zo haalt de knop zelf
   de 44px die het tikdoel vraagt. */
.bsw-card__actions {
  margin-top: auto; display: flex; min-height: var(--h-ctl-44);
  border-top: 1px solid var(--gray-2);
}
.bsw-card__buy {
  flex: 1; min-height: var(--h-ctl-44); border: 0; padding: 0;
  border-radius: 0 0 0 var(--r-md-inner);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn); line-height: var(--lh-num); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  transition: background 160ms ease-out;
}
.bsw-card__buy:hover { background: var(--yellow-2); color: var(--navy); text-decoration: none; }
.bsw-card__buy--full { border-radius: 0 0 var(--r-md-inner) var(--r-md-inner); }
.bsw-card__buy--out {
  background: var(--gray-2); color: var(--text-2);
  border-radius: 0 0 var(--r-md-inner) var(--r-md-inner);
}
.bsw-card__buy--out:hover { background: var(--gray-3); color: var(--text-2); }
.bsw-card.is-soldout { filter: saturate(0.6); }

/* Setkaart: de conditiepil steekt buiten de kaart uit, dus geen overflow:hidden */
.bsw-setcard { overflow: visible; position: relative; }
.bsw-setcard .bsw-card__media { overflow: hidden; }
.bsw-setcard__badge {
  position: absolute; top: -11px; right: -9px; z-index: 4;
  height: 28px; padding: 0 var(--sp-3); display: flex; align-items: center; gap: var(--sp-2);
  border-radius: var(--r-pill); border: 2px solid var(--white);
  box-shadow: 0 8px 20px -12px rgba(27,42,78,0.35);
  color: var(--white); font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
}
.bsw-setcard__badge--new  { background: var(--success-2); }
.bsw-setcard__badge--used { background: var(--navy); }
.bsw-setcard .bsw-card__fav { top: auto; bottom: var(--sp-1); right: var(--sp-1); }

/* ---------------------------------------------------------------
   9  Facetten en filters
   --------------------------------------------------------------- */
.bsw-facets { display: block; }
.bsw-facet { border-top: 1px solid var(--gray-line); padding-top: var(--sp-4); }
.bsw-facet + .bsw-facet { margin-top: var(--sp-4); }
.bsw-facet__head {
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); margin: 0 0 var(--sp-2);
}
.bsw-facet__head--roomy { margin-bottom: var(--sp-3); }
.bsw-facet__body { display: flex; flex-direction: column; }

.bsw-check {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: var(--h-ctl-xs);
  border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer;
  color: var(--navy); text-decoration: none;
}
.bsw-check:hover { text-decoration: none; color: var(--navy); }
.bsw-check__box {
  width: 18px; height: 18px; flex: none; border-radius: var(--r-xs);
  border: 1.5px solid var(--gray-3); background: var(--white);
  display: grid; place-items: center;
}
.bsw-check__box svg { display: none; width: 12px; height: 12px; stroke: var(--yellow); stroke-width: 2.5; }
.bsw-check.is-on .bsw-check__box { border: 0; background: var(--navy); }
.bsw-check.is-on .bsw-check__box svg { display: block; }
.bsw-check__label { flex: 1; font-size: var(--fs-sm); line-height: var(--lh-head); color: var(--navy); }
.bsw-check.is-empty { color: var(--text-subtle); pointer-events: none; }
.bsw-check.is-empty .bsw-check__label { color: var(--text-subtle); }

.bsw-bucket {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  width: 100%; min-height: var(--h-ctl-xs); padding: 0 var(--sp-2);
  border: 0; border-radius: var(--r-xs);
  background: transparent; font-size: var(--fs-sm); line-height: var(--lh-head); color: var(--navy);
  text-align: left; cursor: pointer; text-decoration: none;
}
.bsw-bucket:hover { background: var(--gray-soft); text-decoration: none; color: var(--navy); }
.bsw-bucket.is-active { background: var(--cream); font-weight: 700; }
.bsw-bucket.is-empty { color: var(--text-subtle); pointer-events: none; }

.bsw-seg {
  display: flex; gap: var(--sp-1); padding: var(--sp-1);
  background: var(--gray-soft); border-radius: var(--r-sm);
}
/* De binnenhoek is de buitenhoek min de padding van de bak: 10 - 4 = 6. */
.bsw-seg__btn {
  flex: 1; height: var(--h-ctl-xs); border: 0; padding: 0 var(--sp-2);
  border-radius: var(--r-xs); background: transparent;
  font-size: var(--fs-sm); line-height: var(--lh-num); color: var(--navy); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  text-decoration: none;
}
.bsw-seg__btn:hover { text-decoration: none; color: var(--navy); }
.bsw-seg__btn.is-active { background: var(--white); font-weight: 700; box-shadow: var(--sh-seg); }

.bsw-switch {
  width: 44px; height: 26px; flex: none; border-radius: var(--r-pill); border: 0; padding: 3px;
  display: flex; justify-content: flex-start; align-items: center;
  background: var(--gray-3); cursor: pointer;
  transition: background .18s ease-out;
}
.bsw-switch.is-on { justify-content: flex-end; background: var(--success); }
.bsw-switch__knob { width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--white); }
.bsw-switch-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); min-height: var(--h-ctl-xs);
}

.bsw-facet-search {
  display: flex; align-items: center; height: var(--h-ctl-xs);
  border: 1px solid var(--gray-line); border-radius: var(--r-xs); background: var(--off);
  padding: 0 var(--sp-3); margin-bottom: var(--sp-2);
}
.bsw-facet-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--navy);
  outline: none; padding: 0;
}
/* De outline: none hierboven zou ook in de focus-toestand winnen van de
   globale regel, want hij staat later in het bestand. Daarom een eigen
   focusregel. De offset is negatief omdat de bak overflow: hidden heeft. */
.bsw-facet-search input::placeholder { color: var(--text-placeholder); opacity: 1; }
.bsw-facet-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,78,0.10); }
.bsw-facet-search input:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.bsw-filter-search {
  display: flex; align-items: center; height: var(--h-ctl-44);
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--off);
  overflow: hidden;
}
.bsw-filter-search svg {
  flex: none; width: 18px; height: 18px; stroke: var(--text-muted);
  margin: 0 var(--sp-2) 0 var(--sp-3);
}
.bsw-filter-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-size: var(--fs-btn); line-height: var(--lh-body); color: var(--navy);
  outline: none; padding: 0 var(--sp-3) 0 0;
}
.bsw-filter-search input::placeholder { color: var(--text-placeholder); opacity: 1; }
.bsw-filter-search:focus-within { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,78,0.10); }
.bsw-filter-search input:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

.bsw-swatch-grid { display: flex; flex-wrap: wrap; gap: var(--sp-1); }

/* Een staal is 32px, maar het tikdoel moet 44px halen. Daarom zit het staal
   in een cel van 44x44; het raster ziet er daardoor niet anders uit. */
.bsw-swatch-cell {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: var(--h-ctl-44); height: var(--h-ctl-44); border-radius: var(--r-sm);
  text-decoration: none;
  transition: background 160ms ease-out;
}
.bsw-swatch-cell:hover { background: var(--gray-soft); text-decoration: none; }
.bsw-swatch-cell.is-selected { background: var(--cream); }
/* Naam en telling staan er altijd, maar in de vaste filterkolom leest de
   bezoeker ze in de regel onder het raster (en de schermlezer hier). */
.bsw-swatch-cell__name, .bsw-swatch-cell__n {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bsw-swatch-readout {
  min-height: 20px; margin: 0 0 var(--sp-3);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2);
}

/* ---------------------------------------------------------------
   10  Dekkingsbalk
   --------------------------------------------------------------- */
.bsw-cov__line {
  font-size: var(--fs-body); font-weight: 700; line-height: var(--lh-head);
  color: var(--success); margin: 0 0 var(--sp-2);
}
.bsw-cov__track { height: var(--sp-3); border-radius: var(--r-pill); background: var(--gray-2); overflow: hidden; }
.bsw-cov__fill { height: 100%; background: var(--success); border-radius: var(--r-pill); }
.bsw-cov__fill--alt { background: var(--yellow); }
.bsw-cov__labels {
  display: flex; justify-content: space-between; gap: var(--sp-4); margin-top: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted);
}
.bsw-cov__legend {
  display: flex; gap: var(--sp-5); margin-top: var(--sp-3);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2); flex-wrap: wrap;
}
.bsw-cov__legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.bsw-dot { width: 10px; height: 10px; border-radius: var(--r-pill); flex: none; background: var(--gray-3); }
.bsw-dot--ok   { background: var(--success); }
.bsw-dot--alt  { background: var(--yellow); }
.bsw-dot--none { background: var(--gray-3); }

/* ---------------------------------------------------------------
   11  Eigen dropdown, nooit een native select
   --------------------------------------------------------------- */
.bsw-dd { position: relative; display: inline-block; }
.bsw-dd__btn {
  height: var(--h-ctl-sm); padding: 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-3);
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--white);
  font-size: var(--fs-btn); line-height: var(--lh-num); font-weight: 700;
  color: var(--navy); cursor: pointer;
}
.bsw-dd__btn svg { flex: none; width: 16px; height: 16px; stroke: var(--navy); stroke-width: 2; }
.bsw-dd__panel {
  position: absolute; top: calc(var(--h-ctl-sm) + var(--sp-2)); right: 0; z-index: 30; min-width: 220px;
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-sm);
  overflow: hidden; box-shadow: var(--sh-3); display: none;
}
.bsw-dd.is-open .bsw-dd__panel { display: block; }
.bsw-dd.is-open .bsw-dd__btn svg { transform: rotate(180deg); }
.bsw-dd__opt {
  display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-head);
  color: var(--navy); background: var(--white);
  text-decoration: none;
}
.bsw-dd__opt:hover { background: var(--gray-soft); text-decoration: none; color: var(--navy); }
.bsw-dd__opt.is-active { background: var(--cream); font-weight: 700; }

/* ---------------------------------------------------------------
   12  Toast
   --------------------------------------------------------------- */
.bsw-toast {
  position: fixed; left: 50%; bottom: var(--sp-5); transform: translateX(-50%) translateY(12px);
  z-index: 80; background: var(--navy); color: var(--cream);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-body); font-weight: 600;
  box-shadow: var(--sh-3); max-width: min(90vw, 520px);
  opacity: 0; transition: opacity .18s ease-out, transform .18s ease-out;
}
.bsw-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.bsw-toast.is-error { background: var(--danger); color: #FFFFFF; }

/* De bestaande toast uit bsw-bricks.js injecteert zijn eigen <style> in de head.
   Die staat later in de cascade, dus hier hogere specificiteit. */
body .bswbb-toast {
  background: var(--navy); color: var(--cream);
  padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-body); font-weight: 600;
  box-shadow: var(--sh-3);
}
body .bswbb-toast.is-error { background: var(--danger); color: #FFFFFF; }

/* ---------------------------------------------------------------
   13  Tabellen
   --------------------------------------------------------------- */
.bsw-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bsw-table {
  width: 100%; border-collapse: collapse; background: var(--white);
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--navy);
}
.bsw-table th {
  text-align: left; background: var(--off);
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); padding: var(--sp-3); border-bottom: 1px solid var(--gray-line);
  white-space: nowrap;
}
.bsw-table td { padding: var(--sp-3); border-bottom: 1px solid var(--gray-2); vertical-align: middle; }
.bsw-table tbody tr:hover { background: var(--off); }
.bsw-table td.bsw-num, .bsw-table th.bsw-num {
  text-align: right; font-family: var(--font-mono); font-size: var(--fs-cap); font-weight: 500;
}
.bsw-table--card {
  border: 1px solid var(--gray-line); border-radius: var(--r-md); overflow: hidden;
}
/* Specificatietabel op de productpagina: elke waarde is een link */
.bsw-spec { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-body); }
.bsw-spec th {
  text-align: left; font-weight: 400; color: var(--text-muted); font-size: var(--fs-cap);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0; border-bottom: 1px solid var(--gray-2);
  width: 42%; vertical-align: top;
}
.bsw-spec td { padding: var(--sp-3) 0; border-bottom: 1px solid var(--gray-2); color: var(--navy); }
.bsw-spec td a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------
   14  Formuliervelden
   --------------------------------------------------------------- */
.bsw-label {
  display: block; font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: var(--sp-2);
}
/* Vangnet tegen inklappende velden en knoppen: staat een veld in een
   kolom-flexcontainer, dan maakt flex: 1 de flex-basis 0 en krimpt het
   naar zijn inhoud. min-height houdt het tikdoel altijd overeind. */
/* Invoervelden delen de hoogtereeks van de knoppen: 52 groot, 48 basis,
   44 compact. Zo staat een veld naast een knop altijd op dezelfde lijn. */
.bsw-input, .bsw-textarea, .bsw-select {
  width: 100%; height: var(--h-ctl); min-height: var(--h-ctl); padding: 0 var(--sp-4);
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--white);
  font-family: var(--font-body); font-size: var(--fs-btn); line-height: var(--lh-body);
  color: var(--navy); outline: none;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.bsw-input::placeholder, .bsw-textarea::placeholder { color: var(--text-placeholder); }
.bsw-input:focus, .bsw-textarea:focus, .bsw-select:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,42,78,0.10);
}
.bsw-textarea {
  height: auto; min-height: 160px; padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh-body); resize: vertical;
}
.bsw-input--lg { height: var(--h-ctl-lg); min-height: var(--h-ctl-lg); font-size: var(--fs-btn-lg); }
.bsw-input--44 { height: var(--h-ctl-44); min-height: var(--h-ctl-44); }
.bsw-input--mono { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; }
.bsw-input.is-error, .bsw-textarea.is-error { border-color: var(--danger); }
.bsw-field { margin-bottom: var(--sp-4); }
.bsw-field__hint {
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-2);
}
.bsw-field__error {
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--danger); font-weight: 700; margin-top: var(--sp-2);
}
.bsw-inputrow { display: flex; align-items: center; gap: var(--sp-2); }
.bsw-inputrow .bsw-input { flex: 1; min-width: 0; }
.bsw-inputrow .bsw-btn { flex: none; }

/* Meldingen */
.bsw-note {
  border: 1px solid var(--gray-line); border-radius: var(--r-md); background: var(--white);
  padding: var(--sp-4); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
}
.bsw-note--ok   { border-color: #BFE0C7; background: var(--success-bg); color: var(--success); }
.bsw-note--warn { border-color: var(--cream-3); background: var(--cream); color: var(--navy); }
.bsw-note--err  { border-color: #E8C0BB; background: #FBEDEB; color: var(--danger); }
.bsw-panel {
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md);
  padding: var(--sp-5);
}
.bsw-panel--cream { background: var(--cream); border-color: var(--cream-3); }

/* ---------------------------------------------------------------
   15  Header
   --------------------------------------------------------------- */
/* 15.1 Servicebalk */
.bsw-svc {
  position: relative; z-index: 41;
  background: var(--navy-deep); color: var(--cream);
  font-size: var(--fs-cap); line-height: var(--lh-num);
}
.bsw-svc__inner {
  max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter); height: 38px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
}
.bsw-svc__claim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsw-svc__right { flex: none; display: flex; align-items: center; gap: var(--sp-5); }
.bsw-svc a { color: var(--cream); white-space: nowrap; }
.bsw-svc a:hover { color: var(--yellow); }
.bsw-svc__tel { font-weight: 700; }
.bsw-lang { display: flex; align-items: center; gap: var(--sp-1); }
.bsw-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 var(--sp-1); border-radius: var(--r-xs);
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num); text-transform: uppercase;
  color: rgba(255,248,225,0.65); text-decoration: none;
}
.bsw-lang a:hover { color: var(--cream); background: rgba(255,255,255,0.08); text-decoration: none; }
.bsw-lang a.is-active { color: var(--navy); background: var(--yellow); }

/* 15.2 Hoofdbalk */
.bsw-hdr {
  position: sticky; top: 0; z-index: 41;
  background: var(--white); border-bottom: 1px solid var(--gray-line);
}
.bsw-hdr__inner {
  max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter); height: 92px;
  display: flex; align-items: center; gap: var(--sp-6);
}
.bsw-logo {
  display: flex; align-items: baseline; gap: 0; flex: none;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-h2);
  line-height: var(--lh-num);
  letter-spacing: -0.015em; text-decoration: none; white-space: nowrap; color: var(--navy);
}
.bsw-logo:hover { text-decoration: none; color: var(--navy); }
.bsw-logo__shop { color: var(--yellow); }

.bsw-search {
  flex: 1; min-width: 0; position: relative;
  display: flex; align-items: center; height: 56px;
  border: 2px solid var(--navy); border-radius: var(--r-md); background: var(--white);
  box-shadow: 0 1px 0 rgba(27,42,78,0.04), 0 8px 20px -12px rgba(27,42,78,0.18);
}
.bsw-search__ico {
  flex: none; width: 22px; height: 22px; margin: 0 var(--sp-3) 0 var(--sp-4);
  stroke: var(--navy); stroke-width: 1.8; fill: none;
}
.bsw-search__input {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; font-family: var(--font-body);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--navy); padding: 0; outline: none;
}
.bsw-search__input::placeholder { color: var(--text-placeholder); }
/* Het veld zelf krijgt geen omlijning (outline: none hierboven), want dan
   zou er een rechthoek binnen de afgeronde balk verschijnen. In plaats
   daarvan licht de balk zelf op. Zonder dit had het zoekveld helemaal geen
   zichtbare focus: wie met Tab door de pagina liep, zag niet waar hij was,
   terwijl dit het eerste veld van elke pagina is. */
.bsw-search:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--yellow-soft),
              0 1px 0 rgba(27,42,78,0.04), 0 8px 20px -12px rgba(27,42,78,0.18);
}
.bsw-search__cam {
  width: var(--h-ctl); height: var(--h-ctl); flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--navy);
  border-right: 1px solid var(--gray-line); margin-right: var(--sp-2); border-radius: var(--r-sm);
  cursor: pointer; transition: background 160ms ease-out;
}
.bsw-search__cam:hover { background: var(--gray-soft); color: var(--navy); text-decoration: none; }
.bsw-search__btn {
  height: var(--h-ctl); flex: none; margin-right: var(--sp-1); padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-sm); background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn-lg); line-height: var(--lh-num); cursor: pointer;
  transition: background 160ms ease-out;
}
.bsw-search__btn:hover { background: var(--yellow-2); }

.bsw-hdr__tools { display: flex; align-items: center; gap: var(--sp-1); flex: none; }
.bsw-hdr__tools .bsw-iconbtn { position: relative; }
.bsw-hdr__tools .bsw-iconbtn svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.bsw-iconbtn__dot {
  position: absolute; top: var(--sp-1); right: 2px;
  min-width: 18px; height: 18px; padding: 0 var(--sp-1); border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-size: var(--fs-micro); font-weight: 700; line-height: 18px; text-align: center;
}
.bsw-cart {
  height: var(--h-ctl); padding: 0 var(--sp-4); display: flex; align-items: center; gap: var(--sp-3);
  border: 2px solid var(--yellow); background: rgba(255,184,28,0.10);
  border-radius: var(--r-sm); color: var(--navy);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn); line-height: var(--lh-num); text-decoration: none;
  transition: background 160ms ease-out;
}
.bsw-cart:hover { background: rgba(255,184,28,0.22); color: var(--navy); text-decoration: none; }
.bsw-cart svg { flex: none; width: 22px; height: 22px; stroke: var(--navy); fill: none; stroke-width: 1.5; }
.bsw-cart .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 24px; height: 24px; padding: 0 var(--sp-2); border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-size: var(--fs-cap); font-weight: 700; line-height: var(--lh-num);
}
.bsw-cart__label { white-space: nowrap; }

/* 15.3 Navigatiebalk */
.bsw-nav {
  position: relative; background: var(--cream);
  border-top: 1px solid var(--cream-3); border-bottom: 1px solid var(--gray-line);
}
.bsw-nav__inner {
  max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter); height: 52px;
  display: flex; align-items: stretch; gap: var(--sp-2);
}
.bsw-nav__item {
  height: 100%; padding: 0 var(--sp-4); border: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-body); line-height: var(--lh-num); font-weight: 600;
  background: transparent; color: var(--navy);
  border-bottom: 3px solid transparent; text-decoration: none;
}
.bsw-nav__item:hover { text-decoration: none; color: var(--navy); }
.bsw-nav__item svg { flex: none; width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.bsw-nav__item.is-active { font-weight: 700; border-bottom-color: var(--yellow); }
.bsw-nav__item.is-open {
  font-weight: 700; border-bottom-color: var(--yellow); background: var(--white);
}
.bsw-nav__spacer { margin-left: auto; }

/* 15.4 Megamenu */
.bsw-mega {
  position: absolute; left: 0; right: 0; top: 52px; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--gray-line);
  box-shadow: var(--sh-3); display: none;
}
.bsw-mega.is-open { display: block; }
.bsw-mega__grid {
  max-width: var(--bsw-container); margin: 0 auto; padding: var(--sp-5);
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-2) var(--sp-5);
}
.bsw-mega__row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  min-height: var(--h-ctl-sm); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-xs);
  background: transparent;
  text-align: left; cursor: pointer; text-decoration: none; color: var(--navy);
}
.bsw-mega__row:hover { background: var(--cream); text-decoration: none; color: var(--navy); }
.bsw-mega__label { font-size: var(--fs-body); line-height: var(--lh-head); color: var(--navy); }
.bsw-mega__count {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-num);
  color: var(--text-muted); flex: none;
}

.bsw-mega__grid--more {
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: var(--sp-6);
}
.bsw-mega__links {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-2) var(--sp-5);
  align-content: start;
}
.bsw-mega__block {
  display: block; padding: var(--sp-3); border-radius: var(--r-xs);
  text-decoration: none; color: var(--navy);
}
.bsw-mega__block:hover { background: var(--cream); text-decoration: none; color: var(--navy); }
.bsw-mega__block strong {
  display: block; font-size: var(--fs-body); line-height: var(--lh-head); font-weight: 700;
}
.bsw-mega__note {
  display: block; font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-1);
}
.bsw-mega__card {
  background: var(--cream); border: 1px solid var(--cream-3); border-radius: var(--r-md);
  padding: var(--sp-5);
  align-self: start;
}
.bsw-mega__card-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-3); }
.bsw-mega__card-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  text-decoration: none; color: var(--navy);
}
.bsw-mega__card-link:hover { text-decoration: none; color: var(--navy-2); }
.bsw-mega__card-link strong { font-size: var(--fs-sm); line-height: var(--lh-head); font-weight: 700; }
.bsw-mega__card-link span {
  font-size: var(--fs-micro); line-height: var(--lh-num); color: var(--text-muted); flex: none;
}

/* 15.5 De USP-strook uit de handoff staat in geen enkele template van dit
   thema: gemeten hoogte 0px op elke breedte. De zeven regels die hem
   opmaakten stonden hier zonder iets te doen en zijn weg. Komt de strook
   er alsnog, dan hoort hij bij de header in header.php en krijgt hij een
   eigen blok terug. */

/* Skip-link in de nieuwe kleuren */
.skip-link {
  background: var(--yellow); color: var(--navy); font-weight: 700;
}

/* Aankondigingsbalk boven de header */
.bsw-announce {
  text-align: center; padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-cap); line-height: var(--lh-head); font-weight: 700; color: var(--navy);
}
.bsw-announce a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------
   16  Footer
   --------------------------------------------------------------- */
.bsw-ft {
  position: relative;
  background-color: var(--navy-deep);
  background-image:
    linear-gradient(180deg, rgba(15,26,54,0.90) 0%, rgba(15,26,54,0.95) 55%, rgba(10,18,38,0.98) 100%),
    url('/themes/bsw-bricks/img/shop/magazijn-bussum.png');
  background-size: cover, cover;
  background-position: center, center 35%;
  background-repeat: no-repeat, no-repeat;
  color: var(--cream);
  margin-top: var(--sp-8);
}
.bsw-ft > * { position: relative; }
.bsw-ft a { color: var(--white); text-decoration: none; }
.bsw-ft a:hover { color: var(--yellow); text-decoration: underline; }

.bsw-ft__b1 {
  max-width: var(--bsw-container); margin: 0 auto; padding: var(--sp-7) var(--bsw-gutter) 0;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6);
}
.bsw-ft__b2 {
  max-width: var(--bsw-container); margin: 0 auto; padding: var(--sp-7) var(--bsw-gutter) var(--sp-6);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-6);
}
.bsw-ft__col { display: flex; flex-direction: column; gap: var(--sp-3); }
.bsw-ft__col a { font-size: var(--fs-sm); line-height: var(--lh-head); }
.bsw-ft__head {
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); border-bottom: 2px solid var(--yellow); padding-bottom: var(--sp-2);
  align-self: flex-start; margin: 0;
}
.bsw-ft__logo {
  display: flex; align-items: baseline; gap: 0;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-price); line-height: var(--lh-num); color: var(--white);
  text-decoration: none;
}
.bsw-ft__logo:hover { text-decoration: none; color: var(--white); }
.bsw-ft__logo span { color: var(--yellow); }
.bsw-ft__kicker {
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yellow); margin-top: var(--sp-1);
}
.bsw-ft__intro {
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--white);
  max-width: 32em; margin: var(--sp-4) 0 0;
}
.bsw-ft__rent {
  display: block; margin-top: var(--sp-5); max-width: 340px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,184,28,0.45);
  border-radius: var(--r-md); padding: var(--sp-4); text-decoration: none;
  transition: background 160ms ease-out;
}
.bsw-ft__rent:hover { background: rgba(255,255,255,0.10); text-decoration: none; color: var(--white); }
.bsw-ft__rent-kicker {
  font-size: var(--fs-micro); font-weight: 700; line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow);
}
.bsw-ft__rent-title {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-head);
  color: var(--white); margin-top: var(--sp-2);
}
.bsw-ft__rent p {
  font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--white); margin: var(--sp-2) 0 0;
}
.bsw-ft__rent-cta {
  display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-head); font-weight: 700; color: var(--yellow);
}
.bsw-ft__rent-cta svg { width: 16px; height: 16px; stroke: var(--yellow); stroke-width: 2; fill: none; }
.bsw-ft__cats { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-5); }
.bsw-ft__tel {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-num); color: var(--white);
}
.bsw-ft__hours { font-size: var(--fs-cap); line-height: var(--lh-head); color: rgba(255,255,255,0.75); }
.bsw-ft__addr { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--white); }
.bsw-ft__reg {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-head);
  color: rgba(255,255,255,0.7);
}
.bsw-ft__pay { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-2); }
.bsw-ft__pay img {
  height: 30px; width: 45px; display: block; border-radius: var(--r-xs); background: #FFFFFF;
  object-fit: contain; padding: 2px;
}
.bsw-ft__bottom { max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter) var(--sp-7); }
.bsw-ft__bottom-inner {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: var(--sp-5);
  display: flex; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-micro); line-height: var(--lh-body); color: rgba(255,255,255,0.85);
}
/* 32em telt mee met de lettermaat: bij 12px is dat 384px en ongeveer 68
   tekens, waar een vaste 640px er 114 opleverde. */
.bsw-ft__legal { max-width: 32em; }
.bsw-ft__legal-links { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* Nieuwsbrief in de footer, de bestaande .bb-nl-form blijft de haak voor JS */
.bsw-ft .bb-nl-form { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin: var(--sp-3) 0 0; }
.bsw-ft .bb-nl-form input[type="email"] {
  flex: 1; min-width: 180px; height: var(--h-ctl-44); padding: 0 var(--sp-4);
  border: 1px solid rgba(255,255,255,0.25); border-radius: var(--r-sm);
  background: rgba(255,255,255,0.08); color: var(--white);
  font-family: var(--font-body); font-size: var(--fs-btn); line-height: var(--lh-body); outline: none;
}
.bsw-ft .bb-nl-form input[type="email"]::placeholder { color: rgba(255,255,255,0.55); }
.bsw-ft .bb-nl-form input[type="email"]:focus { border-color: var(--yellow); }
.bsw-ft .bb-nl-form button {
  flex: none; height: var(--h-ctl-44); padding: 0 var(--sp-4); border: 0; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn); line-height: var(--lh-num); cursor: pointer;
  transition: background 160ms ease-out;
}
.bsw-ft .bb-nl-form button:hover { background: var(--yellow-2); }
.bsw-ft #bb-nl-msg {
  margin-top: var(--sp-2); font-size: var(--fs-micro); line-height: var(--lh-body);
  color: rgba(255,255,255,0.75);
}

/* Mobiele onderbalk blijft bestaan, in de nieuwe kleuren */
.bb-bottom-nav { background: var(--white); border-top: 1px solid var(--gray-line); }
.bb-bottom-nav a { color: var(--text-2); font-family: var(--font-body); }
.bb-bottom-nav a.is-active { color: var(--navy); font-weight: 700; }
.bb-bottom-nav .icon svg { stroke: currentColor; fill: none; stroke-width: 1.5; }
.bb-bottom-nav .badge { background: var(--yellow); color: var(--navy); }
/* Het label is de toegankelijke naam van de knop, dus het blijft staan. */
.bb-bottom-nav a > span:not(.icon):not(.badge) {
  font-size: var(--fs-micro); line-height: var(--lh-num);
}

/* Bij 320px kneep styles.css de zijpadding terug naar 4px en min-width naar
   0; elk item werd daardoor 35,7px breed. Nu houdt elk item 44px en wordt de
   rest van de ruimte verdeeld, zonder dat de balk breder wordt dan het
   scherm: de labels blijven op één regel en tellen samen op tot circa 270px. */
@media (max-width: 390px) {
  .bb-bottom-nav-inner { justify-content: space-between; padding: 0 var(--sp-1); }
  .bb-bottom-nav a { min-width: var(--h-ctl-44); padding: var(--sp-2) var(--sp-1); }
  .bb-bottom-nav a > span:not(.icon):not(.badge) { white-space: nowrap; }
}

/* ---------------------------------------------------------------
   17  Overschrijvingen op de oude klassen die het JS nodig heeft
   --------------------------------------------------------------- */
/* De zoekvorm draagt zowel .bb-search (haak voor de autocomplete in
   bsw-bricks.js) als .bsw-search. De oude regels in styles.css moeten
   hier wijken; de dropdown hangt aan search.parentNode, dus de vorm
   houdt position:relative. */
.bsw-search.bb-search { position: relative; }
.bsw-search.bb-search input[type="search"] {
  width: auto; padding: 0; border: 0; border-radius: 0; background: transparent;
  font-size: var(--fs-body); box-shadow: none;
}
/* Alleen het veld zelf blijft kaal; de balk eromheen toont de focus
   (zie .bsw-search:focus-within hierboven). */
.bsw-search.bb-search input[type="search"]:focus { border: 0; box-shadow: none; outline: none; }
/* styles.css zet .bb-search button op amber #FFD500 met padding 8px 14px en
   positie absoluut. Die selector is specifieker dan .bsw-search__btn, dus de
   nieuwe waarden staan hier met de klasse van de vorm ervoor. */
.bsw-search.bb-search button {
  position: static; transform: none; top: auto; right: auto;
}
.bsw-search.bb-search .bsw-search__btn {
  height: var(--h-ctl); flex: none; margin-right: var(--sp-1); padding: 0 var(--sp-5);
  border: 0; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn-lg); line-height: var(--lh-num);
}
.bsw-search.bb-search .bsw-search__btn:hover { background: var(--yellow-2); }
.bsw-search.bb-search .bsw-search__cam { background: transparent; }
.bsw-search.bb-search .bsw-search__cam:hover { background: var(--gray-soft); }

/* Autocomplete in de nieuwe stijl */
.bb-suggest {
  top: calc(100% + var(--sp-2)); border: 1px solid var(--gray-line); border-radius: var(--r-md);
  box-shadow: var(--sh-3); background: var(--white); overflow: hidden; z-index: 60;
}
.bb-suggest-item { border-bottom: 1px solid var(--gray-2); color: var(--navy); }
.bb-suggest-item:hover { background: var(--cream); }
.bb-suggest-no {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-num);
  color: var(--text-muted);
}
.bb-suggest-name {
  font-size: var(--fs-sm); line-height: var(--lh-head); font-weight: 700; color: var(--navy);
}
.bb-suggest-price {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-sm); line-height: var(--lh-num); color: var(--navy);
}
.bb-suggest-all { background: var(--yellow); color: var(--navy); font-weight: 700; }

/* De cart-knop draagt .bb-cart-link (haak voor updateCartBadge) plus .bsw-cart. */
.bsw-cart.bb-cart-link { border: 2px solid var(--yellow); padding: 0 var(--sp-4); font-weight: 700; }
.bsw-cart.bb-cart-link .count {
  background: var(--yellow); color: var(--navy); padding: 0 var(--sp-2); font-size: var(--fs-cap);
}

/* ---------------------------------------------------------------
   18  Responsief
   --------------------------------------------------------------- */
/* Vier breekpunten, meer niet: 1100 (raster en megamenu), 900 (header
   klapt om, displaymaten schakelen), 640 (goot, twee kolommen),
   390 (de smalste telefoon). De rasters .bsw-grid-parts en .bsw-grid-sets
   staan op auto-fill, dus die hebben boven 640px geen breekpunt nodig. */
@media (max-width: 1100px) {
  .bsw-hdr__inner { gap: var(--sp-4); }
  .bsw-search__btn { padding: 0 var(--sp-4); }
  .bsw-mega__grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bsw-mega__grid--more { grid-template-columns: minmax(0,1fr); }
  .bsw-mega__links { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsw-grid-cats  { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bsw-ft__b2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  /* De drie displaymaten schakelen hier één keer om. Componenten zetten
     zelf geen mobiele lettermaat meer. */
  :root {
    --fs-hero: 32px;
    --fs-h1:   26px;
    --fs-h2:   22px;
  }
  .bsw-svc__inner { gap: var(--sp-3); }
  .bsw-svc__mail { display: none; }
  .bsw-hdr__inner { height: auto; padding: var(--sp-3) var(--bsw-gutter); flex-wrap: wrap; }
  .bsw-search { order: 3; flex-basis: 100%; height: var(--h-ctl-lg); }
  .bsw-search__btn { padding: 0 var(--sp-4); }
  .bsw-hdr__tools { margin-left: auto; }
  .bsw-cart__label { display: none; }
  /* De balk schuift zijwaarts; het verlopende masker rechts laat zien dat
     er nog items achter de rand staan. */
  .bsw-nav__inner {
    overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .bsw-nav__inner::-webkit-scrollbar { display: none; }
  .bsw-mega { position: static; box-shadow: none; }
  .bsw-mega__grid { grid-template-columns: repeat(2, minmax(0,1fr)); padding: var(--sp-4); }
  .bsw-grid-cats  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bsw-ft__b1 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsw-ft__b2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  :root { --bsw-gutter: var(--sp-4); --sec-gap: var(--sp-8); }
  .bsw-page { padding: var(--sp-4) var(--bsw-gutter) var(--sp-7); }
  .bsw-band { padding: var(--sp-5); }
  .bsw-grid-parts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
  .bsw-grid-sets  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
  .bsw-grid-cats  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-3); }
  .bsw-mega__grid { grid-template-columns: minmax(0,1fr); }
  .bsw-ft__b1, .bsw-ft__b2 { grid-template-columns: minmax(0,1fr); }
  .bsw-ft__bottom-inner { flex-direction: column; }
  /* De camera blijft juist op een telefoon staan.
     Hij stond hier verborgen om ruimte te maken in de zoekbalk, maar "ik heb
     alleen het steentje in mijn hand" is vrijwel altijd een telefoonsituatie:
     dit is de ingang die op een klein scherm het meeste waard is. De ruimte
     komt nu van de knop Zoeken, die op een telefoon niets toevoegt: het
     toetsenbord heeft er zelf een, en het vergrootglas links in de balk zegt
     al waar je bent. */
  .bsw-search__btn { display: none; }
  .bsw-search__cam {
    width: var(--h-ctl-44); height: var(--h-ctl-44);
    border-right: 0; border-left: 1px solid var(--gray-line);
    margin-right: var(--sp-1);
  }
  /* Op een telefoon van 390px was het logo 272px breed en braken de
     icoonknoppen naar een tweede regel, met een lege linkerhelft. Een
     kleiner logo en één icoonknop minder houden de bovenste regel heel.
     De verlanglijst blijft bereikbaar: die staat als "Lijsten" in de
     vaste onderbalk. */
  .bsw-logo { font-size: var(--fs-h3); }
  .bsw-hdr__tools .bsw-iconbtn:first-child { display: none; }
}

/* De mobiele onderbalk verschijnt onder 700px (styles.css). De hoofd-
   navigatie blijft daar staan, dus geen extra ruimte weghalen. */

/* ---------------------------------------------------------------
   19  Beweging: alle animatie is versiering, nooit betekenis
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------
   Strook: één rij kaarten die zijwaarts schuift
   ---------------------------------------------------------------
   De rij loopt bewust door tot de rand van het venster, zodat je aan
   de half zichtbare kaart ziet dat er meer staat. Scroll-snap houdt
   de kaarten netjes uitgelijnd; de rij is met het toetsenbord te
   bereiken (tabindex op de container) zodat pijltjes ook werken. */
.bsw-strook {
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; padding: var(--sp-1) 0 var(--sp-4);
}
.bsw-strook:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.bsw-strook__spoor {
  display: grid; grid-auto-flow: column; grid-auto-columns: 240px; gap: var(--sp-4);
  padding: 0 max(var(--sp-5), calc((100vw - 1400px) / 2));
  align-items: stretch;
}
.bsw-strook__spoor > * { scroll-snap-align: start; }
.bsw-strook::-webkit-scrollbar { height: var(--sp-2); }
.bsw-strook::-webkit-scrollbar-thumb { background: var(--gray-3); border-radius: var(--r-pill); }
.bsw-strook::-webkit-scrollbar-track { background: transparent; }
.bsw-rij + .bsw-rij { margin-top: var(--sp-2); }

/* Kaartteksten in een schuivende strook een maat kleiner: daar staan de
   kaarten dicht op elkaar en telt rust zwaarder dan grootte.
   Deze vijf regels stonden hier zonder .bsw-strook__spoor ervoor. Met
   gelijke specificiteit won de laatste, dus elke kaart op de hele site
   kreeg de kleine maat, ook in het raster op /nl/onderdelen. Nu geldt de
   verkleining alleen waar de rij echt schuift. */
.bsw-strook__spoor .bsw-card__title { font-size: var(--fs-sm); }
.bsw-strook__spoor .bsw-card .bsw-price { font-size: var(--fs-h3); }
.bsw-strook__spoor .bsw-card .bsw-price small,
.bsw-strook__spoor .bsw-card .bsw-price .bsw-unit { font-size: var(--fs-micro); }
.bsw-strook__spoor .bsw-card .bsw-stock { font-size: var(--fs-micro); }
.bsw-strook__spoor .bsw-card .bsw-colorline { font-size: var(--fs-micro); }

@media (max-width: 640px) {
  .bsw-strook__spoor { grid-auto-columns: 78vw; padding: 0 var(--bsw-gutter); }
}

/* Map-icoon bij een categoriesuggestie in de zoekbalk. */
.bb-suggest-caticon {
  width: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); flex: 0 0 40px;
}