/* =====================================================================
   shop-home.css, alleen wat de homepage extra nodig heeft.

   Laadt NA shop.css. Alle knoppen, kaarten, stalen, pillen en rasters
   komen uit shop.css; hier staan uitsluitend de secties die alleen op
   de homepage voorkomen. Geen eigen kleuren en geen losse px-maten:
   alles via de tokens uit blok 1 van shop.css (--fs-*, --lh-*, --sp-*,
   --h-ctl-*, --sec-gap, --kop-gap).

   Volgorde:
     0  Container en uitlijning
     1  Hero
     2  Drieluik "Zo vind je jouw onderdeel"
     3  Sectiekop-rij
     4  Bladeren op kleur
     5  Categorietegel
     6  Navy band "Mist er iets uit je set?"
     7  Waarom hier en niet bij BrickLink
     8  Beoordelingen
     9  Over ons
    10  Veelgestelde vragen
    11  Sets uit de winkel
    12  Responsief
   ===================================================================== */

/* ---------------------------------------------------------------
   0  Container en uitlijning
   ---------------------------------------------------------------
   Eén linkerrand op de hele pagina. De header, de navigatie en de
   footer gebruiken .bsw-container (max-width 1400px + 24px goot), dus
   hun inhoud begint op 1440px bij x=44. Alles hieronder rekent naar
   diezelfde rand toe:

   .bsw-wrap  staat in een sectie zonder eigen goot en draagt hem zelf.
   .bsw-section__inner staat binnen de goot van .bsw-section, dus is
              zijn max-width de container min twee keer die goot.
   --------------------------------------------------------------- */
.bsw-wrap {
  max-width: var(--bsw-container);
  margin: 0 auto;
  padding: 0 var(--bsw-gutter);
}
.bsw-section__inner {
  max-width: calc(var(--bsw-container) - 2 * var(--bsw-gutter));
  margin: 0 auto;
}

/* ---------------------------------------------------------------
   1  Hero
   --------------------------------------------------------------- */
.bsw-hero {
  position: relative;
  background-color: var(--navy-deep);
  overflow: hidden;
  z-index: 1;
}
.bsw-hero__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Twee lagen: eerst het navy verloop dat de tekst leesbaar houdt,
   daarna een warme amber gloed rechtsboven. */
.bsw-hero__veil {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(15,26,54,0.94) 0%,
    rgba(15,26,54,0.86) 42%,
    rgba(27,42,78,0.55) 75%,
    rgba(27,42,78,0.42) 100%);
}
.bsw-hero__glow {
  position: absolute; inset: 0;
  background: radial-gradient(90% 120% at 80% 20%,
    rgba(255,184,28,0.22) 0%, rgba(255,184,28,0) 55%);
}
.bsw-hero__inner {
  position: relative;
  max-width: var(--bsw-container);
  margin: 0 auto;
  /* Onderaan extra ruimte: het drieluik schuift met --sp-7 over de hero
     heen, dus wat je ziet is --sp-9 min --sp-7. */
  padding: var(--sp-9) var(--bsw-gutter) var(--sp-9);
}
.bsw-hero__block { max-width: 680px; }
.bsw-hero__lead {
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--white);
  margin: var(--sp-4) 0 0; max-width: 32em; text-wrap: pretty;
}
.bsw-hero__actions {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5); flex-wrap: wrap;
}
.bsw-hero__rating {
  display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
  margin-top: var(--sp-5);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--white);
}
.bsw-hero__stars { display: flex; gap: var(--sp-1); flex: none; line-height: 0; }
.bsw-hero__rating a { color: var(--white); text-decoration: underline; }
.bsw-hero__rating a:hover { color: var(--yellow); }
.bsw-hero__place {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-5);
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: rgba(255,255,255,0.85);
}
.bsw-hero__place svg { flex: none; }

/* ---------------------------------------------------------------
   2  Drieluik, schuift met de onderkant over de hero heen
   --------------------------------------------------------------- */
.bsw-steps {
  position: relative; z-index: 3;
  max-width: var(--bsw-container); margin: 0 auto;
  padding: 0 var(--bsw-gutter);
  transform: translateY(calc(-1 * var(--sp-7)));
}
.bsw-steps__panel {
  background-color: var(--navy);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--sh-deep);
}
.bsw-steps__kop { color: var(--white); margin: 0 0 var(--kop-gap); }
.bsw-steps__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5);
}
.bsw-steps__col { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; }
.bsw-steps__col .bsw-h3 { color: var(--white); }
/* De middelste kolom staat tussen twee lijnen. */
.bsw-steps__col--mid {
  padding: 0 var(--sp-5);
  border-left: 1px solid var(--navy-3);
  border-right: 1px solid var(--navy-3);
}
.bsw-steps__head { display: flex; align-items: center; gap: var(--sp-3); }
.bsw-steps__num {
  width: var(--sp-6); height: var(--sp-6); flex: none;
  border-radius: var(--r-pill);
  background: var(--yellow); color: var(--navy);
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-num);
  display: grid; place-items: center;
}
.bsw-steps__note {
  margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--cream-3); max-width: 32em;
}
.bsw-steps__form { display: flex; gap: var(--sp-2); margin-top: auto; }
.bsw-steps__input {
  flex: 1; min-width: 0; height: var(--h-ctl);
  border: 0; border-radius: var(--r-sm); padding: 0 var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 500;
  line-height: var(--lh-num);
  color: var(--navy); background: var(--white); outline: none;
}
.bsw-steps__input::placeholder { color: var(--text-placeholder); }
/* Een knop zonder eigen font-size valt terug op 13,33px, de
   browserstandaard. Ook een icoonknop krijgt daarom een maat. */
.bsw-steps__go {
  width: var(--h-ctl); height: var(--h-ctl); flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: var(--yellow);
  color: var(--navy); cursor: pointer;
  font-size: var(--fs-btn); line-height: var(--lh-num);
  transition: background 160ms ease-out;
}
.bsw-steps__go:hover { background: var(--yellow-2); }
.bsw-steps__scan { margin-top: auto; }

/* ---------------------------------------------------------------
   3  Sectiekop-rij: titel links, knop rechts
   --------------------------------------------------------------- */
.bsw-sechead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-5); margin-bottom: var(--kop-gap);
}
/* 32em is ongeveer 70 tekens en schaalt mee met de lettermaat, waar een
   vaste 680px dat niet doet. */
.bsw-sechead__sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--text-muted); max-width: 32em;
}
.bsw-sechead .bsw-btn { flex: none; }

/* De <h3> om de kaarttitel draagt zelf geen maat: zonder dit valt hij op
   de browserstandaard van 18,72px terug, een maat die in de schaal niet
   bestaat. De titel zelf staat in .bsw-card__title. */
.bsw-card__h { margin: 0; font: inherit; }

/* Het aantal in de actiebalk is een <input>. Zonder breedte neemt die de
   standaard van twintig tekens, duwt hij de koopknop plat en breekt
   "In mandje" over twee regels. shop-parts.css doet hetzelfde op de
   catalogus; die stylesheet laadt hier niet mee. */
.bsw-card__actions .bsw-stepper__val { width: var(--sp-6); text-align: center; }

/* De kaart in een schuivende rij is 240px breed, precies zo breed als in
   het raster op /nl/onderdelen. Een maat kleiner is daar dus niet nodig,
   en het draait de rangorde om: op een rij van vijf las de prijs als kop
   en de naam als bijschrift, terwijl de naam de klik draagt. Terug naar
   de kaartmaten uit blok 8 van shop.css, met de sectiekop (26px) er een
   stap boven. */
.bsw-strook__spoor .bsw-card__title { font-size: var(--fs-body); }
.bsw-strook__spoor .bsw-card .bsw-price { font-size: var(--fs-price); }
.bsw-strook__spoor .bsw-card .bsw-price small,
.bsw-strook__spoor .bsw-card .bsw-price .bsw-unit { font-size: var(--fs-cap); }
.bsw-strook__spoor .bsw-card .bsw-stock { font-size: var(--fs-cap); }
.bsw-strook__spoor .bsw-card .bsw-colorline { font-size: var(--fs-cap); }

.bsw-section--white {
  background: var(--white);
  border-top: 1px solid var(--gray-line);
  border-bottom: 1px solid var(--gray-line);
}

/* De schuivende rij loopt bewust door tot de rand van het venster, maar
   begint op dezelfde linkerrand als de kop erboven. 50% is de halve
   breedte van de sectie, dus dit is precies de rekensom die een
   gecentreerde container ook maakt: geen 100vw, want die telt de
   schuifbalk mee en loopt dan een paar px uit de pas. */
/* Elke sectie draagt de helft van --sec-gap, dus tussen twee secties zit
   precies --sec-gap. shop.css legt op twee opvolgende rijen nog een losse
   marge, waardoor die twee 8px verder uit elkaar staan dan de rest van de
   pagina. .bsw-rij komt alleen op de homepage voor, dus hier weg. */
.bsw-rij + .bsw-rij { margin-top: 0; }
.bsw-rij { padding-left: 0; padding-right: 0; }
.bsw-rij .bsw-strook__spoor {
  padding-left:  max(var(--bsw-gutter), calc(50% - var(--bsw-container) / 2 + var(--bsw-gutter)));
  padding-right: max(var(--bsw-gutter), calc(50% - var(--bsw-container) / 2 + var(--bsw-gutter)));
}
/* Zonder deze regel eet scroll-snap de linkermarge op: de rij snapt de
   eerste kaart tegen de rand van het venster en staat bij het laden al
   44px verschoven. De snapport krijgt dezelfde marge als de rij. */
.bsw-rij .bsw-strook {
  scroll-padding-left: max(var(--bsw-gutter), calc(50% - var(--bsw-container) / 2 + var(--bsw-gutter)));
}

/* ---------------------------------------------------------------
   3b  De doorlopende rij

   De rij had een begin en een eind: je schoof naar rechts, kwam bij de
   laatste kaart en daar hield het op, met een grijze schuifbalk eronder.
   Nu draait hij rond. Vijftien kaarten per soort vormen de lus, de rij
   loopt uit zichzelf rustig door en de kaarten lopen aan beide randen
   door, zodat je ziet dat er meer is.

   De kaarten staan één keer in de HTML; js/shop.js kopieert ze tot de
   lus twee schermbreedtes vult en schuift het spoor met transform. Geen
   scrollbalk meer, geen begin en geen eind.
   --------------------------------------------------------------- */
/* De rij blijft binnen dezelfde kolom als de kop erboven, met wit aan
   weerszijden. Hij liep eerst van vensterrand tot vensterrand, en dan
   staat de kop ingesprongen terwijl de kaarten tegen het glas plakken.
   Nu knipt de rij af op precies de rand van de container, zoals de
   setrij op bouwsteenwinkel.nl. */
.bsw-loop {
  position: relative;
  max-width: var(--bsw-container); margin: 0 auto;
  padding: 0 var(--bsw-gutter);
}
.bsw-loop__venster {
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  padding: var(--sp-1) 0 var(--sp-4);
}
.bsw-loop__venster::-webkit-scrollbar { display: none; }
.bsw-loop__venster:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }
.bsw-loop__spoor {
  display: flex; align-items: stretch; gap: var(--sp-4);
  width: max-content;
}
.bsw-loop__spoor > * { flex: 0 0 240px; width: 240px; }

/* Zodra de lus draait neemt het spoor zelf de verplaatsing over. De
   zijmarge verdwijnt dan: een lus heeft geen begin dat uitgelijnd moet
   worden, en met marge zou er bij elke ronde een gat vallen. */
.bsw-loop.is-lus .bsw-loop__venster { overflow: hidden; }
.bsw-loop.is-lus .bsw-loop__spoor {
  padding: 0; gap: var(--sp-4);
  will-change: transform;
}

/* De randen lopen zacht weg, zodat een half zichtbare kaart niet
   afgesneden lijkt maar uit beeld loopt. Geen mask: een gradient-mask
   maakt in Chrome de kaarten eronder onscherp. Twee overlays doen
   hetzelfde en raken de kaarten niet aan. */
.bsw-loop::before,
.bsw-loop::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: clamp(40px, 5vw, 88px);
  pointer-events: none; z-index: 2;
}
.bsw-loop::before { left: 0;  background: linear-gradient(to right, var(--bsw-loop-bg, var(--off)) var(--bsw-gutter), transparent); }
.bsw-loop::after  { right: 0; background: linear-gradient(to left,  var(--bsw-loop-bg, var(--off)) var(--bsw-gutter), transparent); }
.bsw-section--white .bsw-loop { --bsw-loop-bg: var(--white); }

/* De pijlen staan op de rand van de container, op de hoogte van het
   beeld, net als bij de verhuurwinkel. */
.bsw-loop__pijl {
  position: absolute; top: calc(50% - var(--sp-4)); transform: translateY(-50%);
  z-index: 3; display: none; place-items: center;
  width: 48px; height: 48px; padding: 0;
  border: 1px solid var(--gray-line); border-radius: var(--r-pill);
  background: var(--white); color: var(--navy);
  box-shadow: var(--sh-2); cursor: pointer;
  transition: background .16s ease-out, box-shadow .16s ease-out, transform .16s ease-out;
}
.bsw-loop.is-lus .bsw-loop__pijl { display: grid; }
.bsw-loop__pijl:hover { background: var(--cream); box-shadow: var(--sh-lift); }
.bsw-loop__pijl:active { transform: translateY(-50%) scale(.94); }
.bsw-loop__pijl:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.bsw-loop__pijl--links  { left:  0; }
.bsw-loop__pijl--rechts { right: 0; }

@media (max-width: 720px) {
  /* Op een telefoon veeg je met je duim; een pijlknop van 48px legt daar
     alleen maar een kaart onder. */
  .bsw-loop.is-lus .bsw-loop__pijl { display: none; }
  .bsw-loop__spoor > * { flex-basis: 200px; width: 200px; }
}

/* ---------------------------------------------------------------
   4  Bladeren op kleur
   --------------------------------------------------------------- */
.bsw-colors {
  display: grid;
  grid-template-columns: repeat(8, minmax(0,1fr));
  gap: var(--sp-4);
}
.bsw-colors__item {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); padding: var(--sp-4) var(--sp-2);
  border: 1px solid transparent; border-radius: var(--r-md);
  text-decoration: none; color: var(--navy);
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.bsw-colors__item:hover {
  background: var(--cream); border-color: var(--cream-3);
  color: var(--navy); text-decoration: none;
}
.bsw-colors__name { font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-head); }
.bsw-colors__en { font-size: var(--fs-micro); line-height: var(--lh-head); color: var(--text-muted); }
.bsw-colors__n {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  line-height: var(--lh-head); color: var(--text-muted);
}

/* ---------------------------------------------------------------
   5  Categorietegel
   --------------------------------------------------------------- */
.bsw-cat {
  position: relative; display: block; width: 100%; padding: 0;
  border-radius: var(--r-md); overflow: hidden;
  background: var(--cream); border: 1px solid var(--cream-3);
  text-decoration: none; color: var(--navy);
  transition: border-color 160ms ease-out, transform 180ms ease-out, box-shadow 180ms ease-out;
}
.bsw-cat:hover {
  border-color: var(--gray-3); color: var(--navy); text-decoration: none;
  transform: translateY(-2px); box-shadow: var(--sh-lift);
}
/* Het diagonale vlak zit achter het beeld, niet erover. */
.bsw-cat__diag {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 46%, var(--cream-2) 46%);
}
/* De beeldproxy levert altijd een JPEG, dus elke productfoto heeft een witte
   ondergrond. Die maken we bewust: één wit, afgerond vlak per tegel, in
   plaats van een ongelijk wit blokje midden op het crème. */
/* De foto staat absoluut in het vierkant. Zet je hem in de stroom, dan duwt
   een liggend of staand beeld het vlak alsnog scheef en worden de tegels
   ongelijk hoog. */
.bsw-cat__img { position: relative; display: block; aspect-ratio: 1; }
.bsw-cat__img img {
  position: absolute; inset: var(--sp-4);
  width: calc(100% - 2 * var(--sp-4)); height: calc(100% - 2 * var(--sp-4));
  object-fit: contain;
  background: var(--white); border-radius: var(--r-sm);
  box-shadow: 0 1px 2px rgba(27,42,78,0.08);
}
.bsw-cat__label {
  position: relative; display: block;
  padding: 0 var(--sp-4) var(--sp-4); text-align: center;
}
.bsw-cat__name {
  display: block;
  font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-head); color: var(--navy);
}
.bsw-cat__count {
  display: block;
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-1);
}

/* ---------------------------------------------------------------
   6  Navy band "Mist er iets uit je set?"
   --------------------------------------------------------------- */
.bsw-setband { background-color: var(--navy); }
.bsw-setband__inner {
  max-width: var(--bsw-container); margin: 0 auto;
  padding: calc(var(--sec-gap) / 2) var(--bsw-gutter);
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.bsw-setband__lead {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--cream-3); max-width: 32em;
}
.bsw-setband__form {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-5); width: 100%; max-width: 560px;
}
.bsw-setband__input {
  flex: 1; min-width: 0; height: var(--h-ctl-lg);
  border: 0; border-radius: var(--r-sm); padding: 0 var(--sp-4);
  font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 500;
  line-height: var(--lh-num);
  color: var(--navy); background: var(--white); outline: none;
}
.bsw-setband__input::placeholder { color: var(--text-placeholder); }
.bsw-setband__btn { flex: none; }
.bsw-setband__pills {
  display: flex; gap: var(--sp-2); margin-top: var(--sp-4); flex-wrap: wrap; justify-content: center;
}
.bsw-setpill {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  height: var(--h-ctl-xs); padding: 0 var(--sp-4);
  border: 1px solid var(--navy-3); border-radius: var(--r-pill);
  background: rgba(255,255,255,0.06); color: var(--cream);
  font-size: var(--fs-cap); line-height: var(--lh-num); text-decoration: none;
  transition: background 160ms ease-out;
}
.bsw-setpill:hover { background: rgba(255,255,255,0.12); color: var(--cream); text-decoration: none; }
.bsw-setpill__nr { font-family: var(--font-mono); font-weight: 500; }
.bsw-setpill__name { color: var(--cream-3); }

/* ---------------------------------------------------------------
   7  Waarom hier en niet bij BrickLink
   --------------------------------------------------------------- */
.bsw-why { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); }
.bsw-why__card {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-1);
}
.bsw-why__card h3 { margin: var(--sp-4) 0 var(--sp-2); }
.bsw-why__card p {
  margin: 0; font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--text-2); max-width: 32em;
}

/* ---------------------------------------------------------------
   8  Beoordelingen
   --------------------------------------------------------------- */
.bsw-rev {
  display: grid; grid-template-columns: 320px minmax(0,1fr);
  gap: var(--sp-7); align-items: start;
}
.bsw-rev__intro {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--text-2); max-width: 32em;
}
.bsw-rev__src {
  margin-top: var(--sp-5); background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--sh-1);
}
.bsw-rev__srchead { display: flex; align-items: center; gap: var(--sp-2); }
.bsw-rev__score { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-3); }
.bsw-rev__stars { display: flex; gap: var(--sp-1); margin-top: var(--sp-2); line-height: 0; }
.bsw-rev__src p {
  margin: var(--sp-3) 0 0; font-size: var(--fs-cap); line-height: var(--lh-body);
  color: var(--text-2); max-width: 32em;
}
.bsw-rev__link {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3);
  font-size: var(--fs-cap); line-height: var(--lh-num); font-weight: 700; color: var(--navy);
}
.bsw-rev__quotes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-4); }
.bsw-rev__quote {
  margin: 0;
  border: 1px solid var(--gray-line); border-radius: var(--r-md);
  padding: var(--sp-5); background: var(--white); min-height: 150px;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--sh-1);
}
.bsw-rev__quote blockquote {
  margin: var(--sp-3) 0 0; font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--text-2); max-width: 32em;
}
.bsw-rev__by {
  margin-top: var(--sp-4); font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted);
}
.bsw-rev__by b { color: var(--navy); }

/* ---------------------------------------------------------------
   9  Over ons: beeld links, verhaal rechts
   ---------------------------------------------------------------
   Deze klassen hadden geen enkele regel, dus het blok viel als kale
   stapel over de volle vensterbreedte uit en de knop liep de linkerrand
   uit. De sectie draagt zelf de helft van --sec-gap, net als
   .bsw-section, en de inhoud hangt aan .bsw-wrap.
   --------------------------------------------------------------- */
.bsw-overons { padding: calc(var(--sec-gap) / 2) 0; }
.bsw-overons__inner {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: var(--sp-7); align-items: center;
}
.bsw-overons__beeld img {
  width: 100%; height: auto;
  border-radius: var(--r-lg); border: 1px solid var(--gray-line);
  box-shadow: var(--sh-2);
}
.bsw-overons__tekst .bsw-h2 { margin: var(--sp-2) 0 0; }
.bsw-overons__tekst p {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-2); max-width: 32em;
}
.bsw-overons__acties { margin-top: var(--sp-5); }

/* ---------------------------------------------------------------
   10  Veelgestelde vragen
   --------------------------------------------------------------- */
.bsw-faq { max-width: 820px; margin: 0 auto; }
.bsw-faq__item { border-bottom: 1px solid var(--gray-line); }
.bsw-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-4) 0; cursor: pointer;
  font-size: var(--fs-body); line-height: var(--lh-head); font-weight: 700; color: var(--navy);
  list-style: none;
}
.bsw-faq__item summary::-webkit-details-marker { display: none; }
.bsw-faq__item summary svg { flex: none; transition: transform 160ms ease-out; }
.bsw-faq__item[open] summary svg { transform: rotate(180deg); }
.bsw-faq__item p {
  margin: 0 0 var(--sp-4); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-2); max-width: 32em;
}

/* ---------------------------------------------------------------
   11  Sets uit de winkel
   ---------------------------------------------------------------
   Eén kaart die helemaal klikbaar is, want er is maar één handeling:
   doorklikken naar de onderdelen van die set.
   --------------------------------------------------------------- */
.bsw-setcard__theme {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2);
}
.bsw-setcard__theme svg { flex: none; }
.bsw-setcard__note { font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2); }
.bsw-setcard__meta { display: flex; align-items: baseline; gap: var(--sp-2); flex-wrap: wrap; }

.bsw-grid-sets .bsw-setcard {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md);
  box-shadow: var(--sh-1); overflow: hidden;
  transition: box-shadow .2s ease-out, transform .2s ease-out, border-color .2s ease-out;
}
.bsw-grid-sets .bsw-setcard:hover {
  box-shadow: var(--sh-lift); border-color: var(--gray-3); transform: translateY(-2px);
}
.bsw-setcard__media {
  position: relative;
  display: grid; place-items: center; aspect-ratio: 1; padding: var(--sp-2);
  background: var(--white); border-bottom: 1px solid var(--gray-2);
}
.bsw-setcard__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bsw-setcard__body {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
}
.bsw-setcard__nr {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  line-height: var(--lh-head); color: var(--text-muted);
}
.bsw-setcard__name {
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-head);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bsw-grid-sets .bsw-setcard__meta { font-size: var(--fs-cap); line-height: var(--lh-head); }
.bsw-setcard__pil {
  position: absolute; top: -10px; right: -8px; z-index: 2;
  padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill);
  font-size: var(--fs-micro); line-height: var(--lh-num); font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; box-shadow: var(--sh-1);
}
.bsw-setcard__pil--new  { background: var(--success); color: var(--white); }
.bsw-setcard__pil--used { background: var(--navy); color: var(--white); }
.bsw-setcard__prijs {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-price); line-height: var(--lh-num); color: var(--navy);
}
.bsw-setcard__stock {
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--success); font-weight: 700;
}

/* ---------------------------------------------------------------
   12  Responsief
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bsw-colors { grid-template-columns: repeat(6, minmax(0,1fr)); }
  .bsw-rev__quotes { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 900px) {
  .bsw-hero__inner { padding: var(--sp-8) var(--bsw-gutter) var(--sp-9); }
  .bsw-steps__grid { grid-template-columns: minmax(0,1fr); }
  .bsw-steps__col--mid {
    padding: var(--sp-5) 0 0; border-left: 0; border-right: 0;
    border-top: 1px solid var(--navy-3);
  }
  /* De derde kolom krijgt dezelfde lijn, anders plakt hij aan de tweede. */
  .bsw-steps__col--last {
    padding-top: var(--sp-5); border-top: 1px solid var(--navy-3);
  }
  .bsw-colors { grid-template-columns: repeat(4, minmax(0,1fr)); }
  .bsw-why { grid-template-columns: minmax(0,1fr); }
  .bsw-overons__inner { grid-template-columns: minmax(0,1fr); gap: var(--sp-5); }
  .bsw-rev { grid-template-columns: minmax(0,1fr); gap: var(--sp-6); }
  .bsw-rev__quotes { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 640px) {
  .bsw-hero__inner { padding: var(--sp-7) var(--bsw-gutter) var(--sp-9); }
  .bsw-steps { transform: translateY(calc(-1 * var(--sp-6))); }
  .bsw-steps__panel { padding: var(--sp-5); }
  .bsw-sechead { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
  .bsw-colors { grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-2); }
  .bsw-colors__item { padding: var(--sp-3) var(--sp-1); }
  /* "Donkerblauwgrijs" past op 390px niet op één regel naast de rand. */
  .bsw-colors__name { font-size: var(--fs-cap); overflow-wrap: anywhere; }
  .bsw-colors__en { overflow-wrap: anywhere; }
  .bsw-setband__form { flex-direction: column; }
  /* flex: none, anders wint de flex-basis 0 van de kolomrichting van de hoogte. */
  .bsw-setband__input { flex: none; width: 100%; }
  .bsw-setband__btn { width: 100%; }
  .bsw-rev__quotes { grid-template-columns: minmax(0,1fr); }
  .bsw-rev { gap: var(--sp-5); }
}

@media (max-width: 380px) {
  .bsw-colors { grid-template-columns: repeat(2, minmax(0,1fr)); }
}