/* =====================================================================
   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.

   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, USP)
    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;

  --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;

  --r-xs:   6px;
  --r-sm:  10px;
  --r-md:  14px;
  --r-lg:  20px;
  --r-pill: 999px;

  --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;
}

/* ---------------------------------------------------------------
   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: 16px;
  line-height: 1.6;
  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; }
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]: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: 29px; line-height: 1.2;
  color: var(--navy); margin: 0;
}
.bsw-h2 {
  font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.28;
  color: var(--navy); margin: 0;
}
.bsw-h2--band { font-size: 29px; line-height: 1.2; color: var(--white); }
.bsw-h3 {
  font-family: var(--font-head); font-weight: 600; font-size: 18px;
  color: var(--navy); margin: 0;
}
.bsw-hero-title {
  font-family: var(--font-head); font-weight: 700; font-size: 40px; line-height: 1.15;
  letter-spacing: -0.015em; color: var(--white); margin: 0;
}
.bsw-kicker {
  font-size: 12px; font-weight: 700; line-height: 1.2;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2);
}
.bsw-lead { font-size: 15px; color: var(--text-2); max-width: 680px; margin: 8px 0 0; }
.bsw-small { font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.bsw-secondary { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.bsw-mono { font-family: var(--font-mono); font-size: 13px; font-weight: 500; line-height: 1.4; }
.bsw-muted { color: var(--text-muted); }
.bsw-price {
  font-family: var(--font-head); font-weight: 700; font-size: 22px; line-height: 1.1;
  color: var(--navy);
}
.bsw-price--lg { font-size: 26px; }
.bsw-price--pdp { font-size: 34px; }
.bsw-price__unit { font-family: var(--font-body); font-weight: 400; font-size: 13px; color: var(--text-muted); }
.bsw-prose { max-width: 680px; }
.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: 20px var(--bsw-gutter) 64px; }
.bsw-section { padding: 64px var(--bsw-gutter); }
.bsw-band {
  background: var(--navy); color: var(--cream); border-radius: var(--r-lg); padding: 32px;
}
.bsw-band--full { border-radius: 0; padding: 56px var(--bsw-gutter); }
.bsw-band a { color: var(--cream); }
.bsw-band a:hover { color: var(--yellow); }


/* Rasters die de pagina-bouwers hergebruiken */
.bsw-grid-parts { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.bsw-grid-sets  { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 16px; }
.bsw-grid-cats  { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 16px; }

/* ---------------------------------------------------------------
   4  Knoppen
   --------------------------------------------------------------- */
.bsw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: 15px; line-height: 1;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 160ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
}
.bsw-btn:hover { background: var(--yellow-2); color: var(--navy); text-decoration: none; }
.bsw-btn svg { flex: none; }

.bsw-btn--lg { height: 52px; min-height: 52px; padding: 0 24px; font-size: 16px; }
.bsw-btn--sm { height: 40px; min-height: 40px; padding: 0 18px; font-size: 14px; }
.bsw-btn--44 { height: 44px; min-height: 44px; padding: 0 16px; font-size: 14px; }
.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: 6px;
  padding: 0 8px; height: auto; border: 0; background: transparent;
  color: var(--navy); font-family: var(--font-body); font-weight: 700; font-size: 14px;
  text-decoration: underline; cursor: pointer;
}
.bsw-btn-text:hover { color: var(--navy-2); }
.bsw-btn-text--muted { color: var(--text-2); font-size: 13px; font-weight: 400; }

.bsw-iconbtn {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border: 0; border-radius: 12px; 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: 8px; font-size: 13px; color: var(--text-2); }

/* ---------------------------------------------------------------
   6  Stepper
   --------------------------------------------------------------- */
.bsw-stepper { display: flex; align-items: center; }
.bsw-stepper__btn {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center;
  border: 0; background: var(--white); color: var(--navy);
  font-size: 18px; line-height: 1; 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: 14px; font-weight: 500; 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: 44px; }
.bsw-stepper--card .bsw-stepper__btn:last-child { border-radius: 0 0 13px 0; }

/* Variant in lijstrijen, per set en bulk */
.bsw-stepper--line {
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); height: 48px; 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: 44px; }

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

/* ---------------------------------------------------------------
   7  Pillen, badges, labels
   --------------------------------------------------------------- */
.bsw-no {
  display: inline-grid; place-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-xs); background: var(--white); border: 1px solid var(--gray-line);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--navy);
}
.bsw-tag-used {
  display: inline-grid; place-items: center; height: 22px; padding: 0 8px;
  border-radius: var(--r-xs); background: var(--gray-2);
  font-size: 11px; font-weight: 700; color: var(--text-2);
}
.bsw-count {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; padding: 0 8px; border-radius: var(--r-pill); background: var(--gray-soft);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-muted);
}
.bsw-chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 8px 0 12px;
  border: 1px solid var(--cream-3); border-radius: var(--r-pill); background: var(--cream);
  font-size: 13px; font-weight: 700; 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: 6px;
  height: 26px; padding: 0 10px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 700;
}
.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 7px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.bsw-stock      { font-size: 13px; font-weight: 700; 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: 13px 13px 0 0; border-bottom: 1px solid var(--gray-2);
}
.bsw-card__img {
  /* Smalle, gelijke marge rondom en de foto zo groot mogelijk daarbinnen. */
  position: relative; aspect-ratio: 1; padding: 8px;
  display: grid; place-items: center;
}
.bsw-card__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bsw-card__no {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
}
.bsw-card__fav {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: var(--r-sm); cursor: pointer;
}
/* 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: 14px; display: flex; flex-direction: column; gap: 6px;
}
.bsw-card__title {
  display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 0;
  font-family: var(--font-body); font-size: 16px; font-weight: 700; line-height: 1.35; 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: 6px; }
.bsw-card__actions {
  margin-top: auto; display: flex; height: 44px; border-top: 1px solid var(--gray-2);
}
.bsw-card__buy {
  flex: 1; border: 0; border-radius: 0 0 0 13px;
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  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 13px 13px; }
.bsw-card__buy--out {
  background: var(--gray-2); color: var(--text-2); border-radius: 0 0 13px 13px;
}
.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 12px; display: flex; align-items: center; gap: 6px;
  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: 12px; font-weight: 700;
  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: 2px; right: 2px; }

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

.bsw-check {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px;
  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: 5px;
  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: 14px; 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: 8px;
  width: 100%; min-height: 34px; padding: 0 8px; border: 0; border-radius: 8px;
  background: transparent; font-size: 14px; 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: 4px; padding: 4px; background: var(--gray-soft); border-radius: var(--r-sm);
}
.bsw-seg__btn {
  flex: 1; height: 36px; border: 0; border-radius: 7px; background: transparent;
  font-size: 14px; color: var(--navy); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  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: 12px; min-height: 34px; }

.bsw-facet-search {
  display: flex; align-items: center; height: 36px;
  border: 1px solid var(--gray-line); border-radius: 8px; background: var(--off);
  padding: 0 10px; margin-bottom: 8px;
}
.bsw-facet-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-size: 13px; 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: 44px;
  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 8px 0 12px; }
.bsw-filter-search input {
  flex: 1; min-width: 0; height: 100%; border: 0; background: transparent;
  font-size: 14px; color: var(--navy); outline: none; padding: 0 12px 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: 4px; }

/* 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: 44px; height: 44px; 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 10px; font-size: 13px; color: var(--text-2);
}

/* ---------------------------------------------------------------
   10  Dekkingsbalk
   --------------------------------------------------------------- */
.bsw-cov__line { font-size: 15px; font-weight: 700; color: var(--success); margin: 0 0 8px; }
.bsw-cov__track { height: 12px; 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: 16px; margin-top: 8px;
  font-size: 13px; color: var(--text-muted);
}
.bsw-cov__legend {
  display: flex; gap: 20px; margin-top: 10px; font-size: 13px; color: var(--text-2); flex-wrap: wrap;
}
.bsw-cov__legend span { display: inline-flex; align-items: center; gap: 8px; }
.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: 40px; padding: 0 14px; display: flex; align-items: center; gap: 10px;
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--white);
  font-size: 14px; 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: 46px; 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: 10px 14px; font-size: 14px; 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: 24px; transform: translateX(-50%) translateY(12px);
  z-index: 80; background: var(--navy); color: var(--cream);
  padding: 14px 20px; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14px; 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: 14px 20px; border-radius: var(--r-sm);
  font-family: var(--font-body); font-size: 14px; 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: 14px; color: var(--navy);
}
.bsw-table th {
  text-align: left; background: var(--off);
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2); padding: 10px 12px; border-bottom: 1px solid var(--gray-line);
  white-space: nowrap;
}
.bsw-table td { padding: 12px; 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: 13px; 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: 14px; }
.bsw-spec th {
  text-align: left; font-weight: 400; color: var(--text-muted); font-size: 13px;
  padding: 10px 12px 10px 0; border-bottom: 1px solid var(--gray-2); width: 42%; vertical-align: top;
}
.bsw-spec td { padding: 10px 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: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: 6px;
}
/* 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. */
.bsw-input, .bsw-textarea, .bsw-select {
  width: 100%; height: 48px; min-height: 48px; padding: 0 14px;
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--white);
  font-family: var(--font-body); font-size: 15px; 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: 12px 14px; line-height: 1.6; resize: vertical; }
.bsw-input--lg { height: 52px; min-height: 52px; font-size: 16px; }
.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: 16px; }
.bsw-field__hint { font-size: 13px; color: var(--text-muted); margin-top: 6px; }
.bsw-field__error { font-size: 13px; color: var(--danger); font-weight: 700; margin-top: 6px; }
.bsw-inputrow { display: flex; align-items: center; gap: 8px; }
.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: 14px 16px; font-size: 14px; 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: 20px;
}
.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: 13px; line-height: 1.2;
}
.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: 16px;
}
.bsw-svc__claim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bsw-svc__right { flex: none; display: flex; align-items: center; gap: 20px; }
.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: 2px; }
.bsw-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 22px; padding: 0 5px; border-radius: var(--r-xs);
  font-size: 12px; font-weight: 700; 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: 28px;
}
.bsw-logo {
  display: flex; align-items: baseline; gap: 2px; flex: none;
  font-family: var(--font-head); font-weight: 700; font-size: 27px;
  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 10px 0 16px;
  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: 16px;
  color: var(--navy); padding: 0; outline: none;
}
.bsw-search__input::placeholder { color: var(--text-placeholder); }
.bsw-search__cam {
  width: 48px; height: 48px; flex: none; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--navy);
  border-right: 1px solid var(--gray-line); margin-right: 6px; 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: 46px; flex: none; margin-right: 5px; padding: 0 26px;
  border: 0; border-radius: var(--r-sm); background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: 16px; cursor: pointer;
  transition: background 160ms ease-out;
}
.bsw-search__btn:hover { background: var(--yellow-2); }

.bsw-hdr__tools { display: flex; align-items: center; gap: 4px; 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: 4px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.bsw-cart {
  height: 48px; padding: 0 16px; display: flex; align-items: center; gap: 10px;
  border: 2px solid var(--yellow); background: rgba(255,184,28,0.10);
  border-radius: 12px; color: var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: 15px; 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 7px; border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-size: 13px; font-weight: 700; line-height: 1;
}
.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: 6px;
}
.bsw-nav__item {
  height: 100%; padding: 0 18px; border: 0; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; gap: 7px;
  font-size: 16px; 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: 24px;
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px 24px;
}
.bsw-mega__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 40px; padding: 0 10px; border: 0; border-radius: 8px; 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: 15px; color: var(--navy); }
.bsw-mega__count { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); flex: none; }

.bsw-mega__grid--more {
  grid-template-columns: minmax(0,1.6fr) minmax(0,1fr); gap: 32px;
}
.bsw-mega__links {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px 24px;
  align-content: start;
}
.bsw-mega__block {
  display: block; padding: 10px; border-radius: 8px; 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: 15px; font-weight: 700; }
.bsw-mega__note { display: block; font-size: 13px; color: var(--text-muted); margin-top: 2px; }
.bsw-mega__card {
  background: var(--cream); border: 1px solid var(--cream-3); border-radius: var(--r-md); padding: 18px;
  align-self: start;
}
.bsw-mega__card-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bsw-mega__card-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  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: 14px; font-weight: 700; }
.bsw-mega__card-link span { font-size: 12px; color: var(--text-muted); flex: none; }

/* 15.5 USP-strook */
.bsw-usp { background: var(--off); border-bottom: 1px solid var(--gray-line); }
.bsw-usp__inner {
  max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter); height: 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 13px; color: var(--text-2);
}
.bsw-usp__item { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.bsw-usp__item svg { flex: none; width: 16px; height: 16px; stroke: var(--success); stroke-width: 2; fill: none; }

/* 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: 8px 16px; font-size: 13px; 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: 64px;
}
.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: 56px var(--bsw-gutter) 0;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px;
}
.bsw-ft__b2 {
  max-width: var(--bsw-container); margin: 0 auto; padding: 48px var(--bsw-gutter) 32px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px;
}
.bsw-ft__col { display: flex; flex-direction: column; gap: 10px; }
.bsw-ft__col a { font-size: 14px; }
.bsw-ft__head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--white); border-bottom: 2px solid var(--yellow); padding-bottom: 8px;
  align-self: flex-start; margin: 0;
}
.bsw-ft__logo {
  display: flex; align-items: baseline; gap: 2px;
  font-family: var(--font-head); font-weight: 700; font-size: 22px; 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: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--yellow); margin-top: 4px;
}
.bsw-ft__intro { font-size: 14px; line-height: 1.6; color: var(--white); max-width: 320px; margin: 14px 0 0; }
.bsw-ft__rent {
  display: block; margin-top: 24px; 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: 18px; 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: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--yellow);
}
.bsw-ft__rent-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--white); margin-top: 8px; }
.bsw-ft__rent p { font-size: 13px; line-height: 1.6; color: var(--white); margin: 8px 0 0; }
.bsw-ft__rent-cta {
  display: flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 14px; 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: 10px 24px; }
.bsw-ft__tel { font-family: var(--font-head); font-weight: 700; font-size: 20px; color: var(--white); }
.bsw-ft__hours { font-size: 13px; color: rgba(255,255,255,0.75); }
.bsw-ft__addr { font-size: 14px; line-height: 1.5; color: var(--white); }
.bsw-ft__reg { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.7); }
.bsw-ft__pay { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.bsw-ft__pay img {
  height: 30px; width: 45px; display: block; border-radius: 4px; background: #FFFFFF;
  object-fit: contain; padding: 2px;
}
.bsw-ft__bottom { max-width: var(--bsw-container); margin: 0 auto; padding: 0 var(--bsw-gutter) 40px; }
.bsw-ft__bottom-inner {
  border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px;
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  font-size: 12px; color: rgba(255,255,255,0.85);
}
.bsw-ft__legal { max-width: 640px; }
.bsw-ft__legal-links { display: flex; gap: 20px; 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: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.bsw-ft .bb-nl-form input[type="email"] {
  flex: 1; min-width: 180px; height: 44px; padding: 0 14px;
  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: 14px; 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: 44px; padding: 0 20px; border: 0; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: 14px; 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: 8px; font-size: 12px; 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: 11px; }

/* 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: 360px) {
  .bb-bottom-nav-inner { justify-content: space-between; padding: 0 2px; }
  .bb-bottom-nav a { min-width: 44px; padding: 6px 4px; }
  .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: 16px; box-shadow: none;
}
.bsw-search.bb-search input[type="search"]:focus { border: 0; box-shadow: 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: 46px; flex: none; margin-right: 5px; padding: 0 26px;
  border: 0; border-radius: var(--r-sm);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-body); font-weight: 700; font-size: 16px;
}
.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% + 6px); 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: 12px; color: var(--text-muted); }
.bb-suggest-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.bb-suggest-price { font-family: var(--font-head); font-weight: 700; font-size: 14px; 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 16px; font-weight: 700; }
.bsw-cart.bb-cart-link .count {
  background: var(--yellow); color: var(--navy); padding: 0 7px; font-size: 13px;
}

/* ---------------------------------------------------------------
   18  Responsief
   --------------------------------------------------------------- */
/* Vijf kaarten passen tot ongeveer 1200px; daaronder wordt een kaart te smal
   voor titel en prijs, dus dan vier. */
@media (max-width: 1200px) {
  .bsw-grid-parts { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bsw-grid-sets  { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

@media (max-width: 1100px) {
  .bsw-hdr__inner { gap: 16px; }
  .bsw-logo { font-size: 24px; }
  .bsw-search__btn { padding: 0 18px; }
  .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-parts { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bsw-grid-sets  { grid-template-columns: repeat(3, 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: 980px) {
  .bsw-usp__inner { justify-content: flex-start; gap: 20px; overflow-x: auto; }
  .bsw-usp__inner::-webkit-scrollbar { display: none; }
  .bsw-usp__inner { scrollbar-width: none; }
}

@media (max-width: 900px) {
  .bsw-svc__inner { gap: 12px; }
  .bsw-svc__mail { display: none; }
  .bsw-hdr__inner { height: auto; padding: 12px var(--bsw-gutter); flex-wrap: wrap; }
  .bsw-search { order: 3; flex-basis: 100%; height: 52px; }
  .bsw-search__btn { padding: 0 16px; }
  .bsw-hdr__tools { margin-left: auto; }
  .bsw-cart__label { display: none; }
  .bsw-nav__inner { overflow-x: auto; scrollbar-width: none; }
  .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: 16px; }
  .bsw-grid-parts { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsw-grid-sets  { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .bsw-grid-cats  { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .bsw-hero-title { font-size: 32px; }
  .bsw-h1, .bsw-page-title { font-size: 26px; }
  .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: 16px; }
  .bsw-section { padding: 40px 16px; }
  .bsw-page { padding: 16px 16px 48px; }
  .bsw-band { padding: 24px; }
  .bsw-grid-parts { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .bsw-grid-sets  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .bsw-grid-cats  { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .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; }
  .bsw-search__cam { display: none; }
  .bsw-h2 { font-size: 20px; }
}

/* 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;
  }
}