/* =====================================================================
   shop-parts.css — het onderdelenoverzicht (page-parts.php)
   =====================================================================
   Pagina-eigen laag bovenop shop.css. Alle tokens, knoppen, kaarten,
   stalen, facetrijen, steppers en de eigen dropdown komen uit shop.css;
   hier staat alleen wat van dit scherm zelf is: de tweekolomsopbouw, de
   resultatenbalk, de lijstweergave, de paginering en het onderpaneel
   waarin de filterkolom onder 900px verandert.

   Maatvoering: dit bestand zet geen losse px meer neer voor ruimte,
   lettermaat, regelhoogte, radius of besturingshoogte. Alles verwijst
   naar de tokens uit blok 1 van shop.css:
     ruimte      --sp-1 .. --sp-9   (4, 8, 12, 16, 24, 32, 48, 64, 96)
     lettermaat  --fs-*             (acht maten, plus prijs en knop)
     regelhoogte --lh-body 1.6, --lh-head 1.35, --lh-num 1.1
     radius      --r-xs .. --r-lg, --r-md-inner
     hoogte      --h-ctl-xs .. --h-ctl-lg
   Wat hier nog een getal is, is een componentmaat (kolombreedte,
   pictogram, stepper) en geen ruimte.

   Breekpunten: 1100, 900, 640 en 390, dezelfde vier als shop.css.

   Klassenafspraak: alles begint met .bsw-pl- (parts listing).
   ===================================================================== */

/* ---------------------------------------------------------------
   1  Kruimelpad
   --------------------------------------------------------------- */
.bsw-pl-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-bottom: var(--sp-3);
}
.bsw-pl-crumbs a { color: var(--text-muted); text-decoration: underline; text-underline-offset: 2px; }
.bsw-pl-crumbs a:hover { color: var(--navy); }
.bsw-pl-crumbs strong { color: var(--navy); font-weight: 700; }

/* ---------------------------------------------------------------
   2  Hoofdraster: filterkolom + resultaten
   --------------------------------------------------------------- */
.bsw-pl-grid {
  display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: var(--sp-6);
  align-items: start;
}
.bsw-pl-main { min-width: 0; }

/* De filterkolom is boven 900px een sticky kaart. De hoofdbalk van de
   header is 92px en plakt bovenaan, vandaar 108px. */
.bsw-pl-aside {
  position: sticky; top: 108px;
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.bsw-pl-aside__scroll { padding: var(--sp-4); }
.bsw-pl-aside form { margin: 0; }

/* Kop en voet horen bij het onderpaneel en zijn op de desktop niet nodig. */
.bsw-pl-sheet-head, .bsw-pl-sheet-foot { display: none; }
.bsw-pl-scrim { display: none; }
.bsw-pl-filterbtn { display: none; }

/* Zoeken binnen de resultaten staat los boven de facetten. */
.bsw-pl-innerq { margin-bottom: var(--sp-4); }
.bsw-pl-innerq .bsw-btn { display: none; }

/* Het eerste facetblok heeft geen streep nodig, de zoekbalk scheidt al. */
.bsw-pl-facets .bsw-facet:first-child { border-top: 0; padding-top: 0; }

.bsw-pl-note {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-micro); line-height: var(--lh-body); color: var(--text-muted);
}
/* Twee noten met een vaste plek: het groepslabel boven een staalraster en
   de regel "Alle kleuren" boven het eerste raster. Stonden als inline
   stijl in de PHP. */
.bsw-pl-note--groep { margin: 0 0 var(--sp-2); }
/* Elke kleurgroep is een blok: staalraster plus wat lucht eronder.
   Stond als inline stijl op het raster zelf. */
.bb-color-group + .bb-color-group { margin-top: var(--sp-3); }
.bb-color-group .bsw-swatch-grid { margin-bottom: var(--sp-3); }
.bsw-pl-note--boven { margin: 0 0 var(--sp-3); }
.bsw-pl-more {
  margin-top: var(--sp-2); align-self: flex-start;
  border: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: var(--fs-cap); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.bsw-pl-more:hover { color: var(--navy-2); }
.bsw-pl-cat.is-hidden { display: none; }

/* Prijs: eigen bereik onder de emmers. */
.bsw-pl-price { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); }
.bsw-pl-price input {
  width: 100%; min-width: 0; height: var(--h-ctl-xs);
  border: 1px solid var(--gray-3); border-radius: var(--r-xs); background: var(--white);
  padding: 0 var(--sp-3);
  font-family: inherit; font-size: var(--fs-cap); line-height: var(--lh-num);
  color: var(--navy); outline: none;
}
.bsw-pl-price input:focus { border-color: var(--navy); }
.bsw-pl-price span {
  flex: none; font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted);
}
.bsw-pl-price .bsw-pl-apply {
  flex: none; height: var(--h-ctl-xs); padding: 0 var(--sp-3);
  border: 1.5px solid var(--navy); border-radius: var(--r-xs); background: var(--white);
  font-family: inherit; font-size: var(--fs-cap); line-height: var(--lh-num);
  font-weight: 700; color: var(--navy); cursor: pointer;
  transition: background 160ms ease-out;
}
.bsw-pl-price .bsw-pl-apply:hover { background: var(--cream); }

/* Voorraad: geen schakelaar, want het overzicht toont per definitie
   alleen wat op voorraad ligt. Een vaste regel liegt niet. */
.bsw-pl-fact { display: flex; align-items: flex-start; gap: var(--sp-3); }
.bsw-pl-fact svg { flex: none; width: 18px; height: 18px; stroke: var(--success); stroke-width: 2; fill: none; }
.bsw-pl-fact strong {
  display: block; font-size: var(--fs-sm); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy);
}
.bsw-pl-fact span {
  display: block; font-size: var(--fs-micro); line-height: var(--lh-body);
  color: var(--text-muted); margin-top: var(--sp-1);
}

/* ---------------------------------------------------------------
   3  Kop, pillen en resultatenbalk
   --------------------------------------------------------------- */
.bsw-pl-lead {
  margin: var(--sp-3) 0 var(--sp-4);
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-2); max-width: 680px;
}
.bsw-pl-pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.bsw-pl-clear {
  border: 0; background: transparent; padding: 0 var(--sp-2);
  font-family: inherit; font-size: var(--fs-cap); line-height: var(--lh-head);
  font-weight: 700; color: var(--text-2);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.bsw-pl-clear:hover { color: var(--navy); }

.bsw-pl-bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap;
  padding-bottom: var(--sp-4); border-bottom: 1px solid var(--gray-line); margin-bottom: var(--sp-4);
}
.bsw-pl-bar__count { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.bsw-pl-bar__n {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-num); color: var(--navy);
}
.bsw-pl-bar__note { font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted); }
.bsw-pl-bar__tools { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.bsw-pl-bar__label { font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted); }
.bsw-pl-view { display: flex; gap: var(--sp-1); padding: var(--sp-1); background: var(--gray-soft); border-radius: var(--r-sm); }
.bsw-pl-view a {
  width: var(--h-ctl-sm); height: var(--h-ctl-sm); display: grid; place-items: center;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--navy);
  text-decoration: none;
}
.bsw-pl-view a:hover { text-decoration: none; color: var(--navy); }
.bsw-pl-view a.is-active { background: var(--white); box-shadow: var(--sh-seg); }
.bsw-pl-view svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; }

/* Sorteren zonder JavaScript: een gewone lijst met links. */
/* Het label in de sorteerknop is een span, zodat het op een smal scherm
   kan afkappen in plaats van de hele knop breder te maken. */
.bsw-pl-bar__tools .bsw-dd__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bsw-pl-nojs-sort { display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-cap); line-height: var(--lh-head); }

/* ---------------------------------------------------------------
   4  Setnummer herkend
   ---------------------------------------------------------------
   Wie 42143 in het zoekveld typt, zoekt de set en niet een onderdeel dat
   zo heet. Deze regel staat boven de resultaten en wijst door naar de
   setpagina, waar wel een volledige onderdelenlijst met voorraad staat. */
.bsw-pl-sethint {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border: 1px solid var(--cream-3); border-radius: var(--r-md); background: var(--cream);
}
.bsw-pl-sethint__ico { flex: none; display: grid; place-items: center; }
.bsw-pl-sethint__ico svg { stroke: var(--navy); fill: none; }
.bsw-pl-sethint__tekst { margin: 0; flex: 1 1 240px; min-width: 0; }
.bsw-pl-sethint__tekst strong {
  display: block; font-size: var(--fs-body); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy);
}
.bsw-pl-sethint__tekst span {
  display: block; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
}

/* ---------------------------------------------------------------
   5  Lege staat
   ---------------------------------------------------------------
   Geen muur maar een kruispunt: drie wegen die de winkel echt heeft. */
.bsw-pl-empty {
  border: 1px dashed var(--gray-3); border-radius: var(--r-md); padding: var(--sp-7) var(--sp-5);
  text-align: center; background: var(--white);
}
.bsw-pl-empty__kop {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-h3); line-height: var(--lh-head); font-weight: 700; color: var(--navy);
}
.bsw-pl-empty__sub {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm); line-height: var(--lh-body); font-weight: 400; color: var(--text-2);
}
.bsw-pl-uitwegen {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3);
  text-align: left; margin: 0 auto; max-width: 840px;
}
.bsw-pl-uitweg {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--gray-line); border-radius: var(--r-sm); background: var(--off);
  color: var(--navy); text-decoration: none;
  transition: box-shadow .18s ease-out, border-color .18s ease-out;
}
.bsw-pl-uitweg:hover { text-decoration: none; color: var(--navy); border-color: var(--gray-3); box-shadow: var(--sh-lift); }
.bsw-pl-uitweg__ico {
  display: grid; place-items: center;
  width: var(--h-ctl-xs); height: var(--h-ctl-xs);
  border-radius: var(--r-xs); background: var(--cream);
}
.bsw-pl-uitweg__ico svg { stroke: var(--navy); fill: none; }
.bsw-pl-uitweg strong { font-size: var(--fs-sm); line-height: var(--lh-head); font-weight: 700; }
.bsw-pl-uitweg__sub { font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--text-2); }
.bsw-pl-empty__wis {
  margin: var(--sp-5) 0 0;
  font-size: var(--fs-cap); line-height: var(--lh-head); font-weight: 700;
}
.bsw-pl-empty__wis a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------
   6  Kaarten in het raster
   --------------------------------------------------------------- */
/* De beeldlink erft de rasterindeling van .bsw-card__img, dus hier geen
   display-regel: die zou het centreren van de foto ongedaan maken. */
.bsw-pl-cardlink { text-decoration: none; color: inherit; }
.bsw-pl-cardlink:hover { text-decoration: none; color: inherit; }
.bsw-stepper__val[data-pl-qty] { width: 40px; text-align: center; }
.bsw-stepper--card .bsw-stepper__val[data-pl-qty] { width: 34px; }
.bsw-pl-cardtitle { text-decoration: none; }
.bsw-pl-cardtitle:hover { text-decoration: underline; color: var(--navy); }
.bsw-pl-colors { font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted); }
/* De titel op de kaart is een h3; de kop houdt geen eigen marge. */
.bsw-pl-h3 { margin: 0; }

/* ---------------------------------------------------------------
   7  Lijstweergave
   --------------------------------------------------------------- */
.bsw-pl-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.bsw-pl-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 260px; gap: var(--sp-4);
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); padding: var(--sp-4); box-shadow: var(--sh-1);
  transition: box-shadow .18s ease-out, border-color .18s ease-out;
}
.bsw-pl-row:hover { box-shadow: var(--sh-lift); border-color: var(--gray-3); }
.bsw-pl-row__media {
  position: relative; aspect-ratio: 1; background: var(--off);
  border-radius: var(--r-sm); padding: var(--sp-3); display: grid; place-items: center;
}
.bsw-pl-row__media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bsw-pl-row__mid { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.bsw-pl-row__kicker {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  font-size: var(--fs-micro); line-height: var(--lh-head);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted);
}
.bsw-pl-row__title {
  font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-head);
  color: var(--navy); text-decoration: none; margin: 0;
}
.bsw-pl-row__title a { color: var(--navy); text-decoration: none; }
.bsw-pl-row__title a:hover { text-decoration: underline; }
.bsw-pl-row__ids {
  font-family: var(--font-mono); font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2);
}
/* De kleurregel in een lijstrij is een maat groter dan op de kaart. */
.bsw-pl-row__mid .bsw-colorline { font-size: var(--fs-sm); }
.bsw-pl-row__desc {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2); max-width: 560px;
}
.bsw-pl-row__buy {
  border-left: 1px solid var(--gray-2); padding-left: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.bsw-pl-row__ship { font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2); }
.bsw-pl-row__act { display: flex; align-items: center; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.bsw-pl-row__act .bsw-btn { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------
   8  Paginering
   --------------------------------------------------------------- */
.bsw-pl-pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-6) 0 0;
}
.bsw-pl-pager a, .bsw-pl-pager span {
  min-width: var(--h-ctl-44); height: var(--h-ctl-44); padding: 0 var(--sp-3);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--white);
  font-size: var(--fs-sm); line-height: var(--lh-num); font-weight: 700;
  color: var(--navy); text-decoration: none;
}
.bsw-pl-pager a:hover { background: var(--cream); text-decoration: none; color: var(--navy); }
.bsw-pl-pager a.is-active { background: var(--navy); border-color: var(--navy); color: var(--white); }
.bsw-pl-pager span.is-gap { border: 0; background: transparent; min-width: var(--sp-5); padding: 0; color: var(--text-muted); }

/* ---------------------------------------------------------------
   9  Responsief
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bsw-pl-grid { grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-5); }
  .bsw-pl-row { grid-template-columns: 120px minmax(0, 1fr) 220px; }
}

@media (max-width: 900px) {
  .bsw-pl-grid { grid-template-columns: minmax(0, 1fr); }

  /* De filterkolom wordt een onderpaneel. Zelfde DOM, andere plek. */
  /* De mobiele onderbalk (.bb-bottom-nav) staat op z-index 100 en plakt
     onderaan. Het paneel is modaal, dus het gaat erboven en de balk stapt
     opzij zolang het open staat. */
  body.bsw-pl-open .bb-bottom-nav { display: none; }

  .bsw-pl-aside {
    position: fixed; inset: auto 0 0 0; z-index: 101;
    top: auto; max-height: 85vh;
    display: flex; flex-direction: column;
    border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0;
    box-shadow: 0 -24px 40px -20px rgba(27,42,78,0.25);
    transform: translateY(101%); visibility: hidden;
    transition: transform .18s ease-out, visibility .18s ease-out;
  }
  body.bsw-pl-open .bsw-pl-aside { transform: none; visibility: visible; }
  .bsw-pl-aside__scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .bsw-pl-sheet-head {
    display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
    flex: none; padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--gray-line);
  }
  .bsw-pl-sheet-head strong {
    font-family: var(--font-head); font-weight: 700;
    font-size: var(--fs-h3); line-height: var(--lh-head);
  }
  .bsw-pl-sheet-foot {
    display: flex; align-items: center; gap: var(--sp-3);
    flex: none; padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--gray-line); background: var(--white);
    padding-bottom: max(var(--sp-3), env(safe-area-inset-bottom));
  }
  .bsw-pl-sheet-foot .bsw-btn { flex: 1; }

  .bsw-pl-scrim {
    display: block; position: fixed; inset: 0; z-index: 100;
    background: rgba(15,26,54,0.45); border: 0; padding: 0; margin: 0;
    opacity: 0; visibility: hidden; transition: opacity .18s ease-out, visibility .18s ease-out;
  }
  body.bsw-pl-open .bsw-pl-scrim { opacity: 1; visibility: visible; }

  .bsw-pl-filterbtn { display: inline-flex; }

  /* --------------------------------------------------------------
     Zodra de filterkolom een aanraakpaneel wordt, is de vinger het
     invoerapparaat. Elke facetregel, segmentknop, prijsveld en
     tekstknop krijgt daarom 44px raakruimte. De inhoud van de regels
     verandert niet, alleen de ruimte eromheen.
     -------------------------------------------------------------- */
  .bsw-pl-aside .bsw-check,
  .bsw-pl-aside .bsw-bucket { min-height: var(--h-ctl-44); }
  .bsw-pl-aside .bsw-seg { padding: var(--sp-1); }
  .bsw-pl-aside .bsw-seg__btn { height: var(--h-ctl-44); min-height: var(--h-ctl-44); }
  /* 2px erbij, want de rand van 1px telt aan beide kanten mee: het veld
     zelf haalt dan 44px. */
  .bsw-pl-aside .bsw-facet-search { height: calc(var(--h-ctl-44) + 2px); }
  .bsw-pl-aside .bsw-pl-price input,
  .bsw-pl-aside .bsw-pl-price .bsw-pl-apply { height: var(--h-ctl-44); min-height: var(--h-ctl-44); }
  .bsw-pl-aside .bsw-pl-more {
    min-height: var(--h-ctl-44); display: inline-flex; align-items: center; margin-top: 0;
  }
  /* De tekstlinks in de noten eronder ("Alle 143 kleuren") zijn ook doelen. */
  .bsw-pl-aside .bsw-pl-note a {
    display: inline-block; min-height: var(--h-ctl-44); line-height: var(--h-ctl-44);
  }

  /* Kleurstalen worden regels: staal, naam en telling naast elkaar. Op een
     aanraakscherm bestaat geen hover, dus kleur mag daar niet de enige
     drager van de informatie zijn. */
  .bsw-pl-aside .bsw-swatch-grid { display: block; margin-bottom: var(--sp-2); }
  .bsw-pl-aside .bsw-swatch-cell {
    display: flex; width: 100%; height: auto; min-height: var(--h-ctl-44);
    justify-content: flex-start; gap: var(--sp-3); padding: 0 var(--sp-2);
  }
  .bsw-pl-aside .bsw-swatch-cell__name,
  .bsw-pl-aside .bsw-swatch-cell__n {
    position: static; width: auto; height: auto; margin: 0; padding: 0;
    overflow: visible; clip: auto; white-space: normal;
  }
  .bsw-pl-aside .bsw-swatch-cell__name {
    font-size: var(--fs-btn); line-height: var(--lh-head); color: var(--navy);
  }
  .bsw-pl-aside .bsw-swatch-cell__n {
    margin-left: auto; flex: none; white-space: nowrap;
    font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-num);
    color: var(--text-muted);
  }
  /* De leesregel onder het raster hoort bij de muis, niet bij de vinger. */
  .bsw-pl-aside .bsw-swatch-readout { display: none; }

  .bsw-pl-row { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .bsw-pl-row__media { max-width: 160px; }
  .bsw-pl-row__buy { border-left: 0; padding-left: 0; border-top: 1px solid var(--gray-2); padding-top: var(--sp-3); }

  .bsw-pl-uitwegen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  /* --------------------------------------------------------------
     Het eerste scherm van de catalogus
     --------------------------------------------------------------
     Op 390 bij 844 kostte de kop met inleiding, telling, filterknop,
     sorteerknop en weergaveknoppen samen ruim 330px, zodat de eerste
     kaart pas rond 640px begon en meteen door de vaste onderbalk werd
     afgesneden: geen enkel volledig product op het eerste scherm.
     Hier gaat de inleiding een maat kleiner en staan telling en
     gereedschap elk op één regel in plaats van drie.
     -------------------------------------------------------------- */
  .bsw-pl-crumbs { margin-bottom: var(--sp-2); }
  .bsw-pl-lead { margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-sm); }
  .bsw-pl-pills { margin-bottom: var(--sp-3); }

  .bsw-pl-bar { gap: var(--sp-2); padding-bottom: var(--sp-3); margin-bottom: var(--sp-3); }
  .bsw-pl-bar__tools { width: 100%; flex-wrap: nowrap; gap: var(--sp-2); }
  .bsw-pl-bar__label { display: none; }   /* de knop zegt zelf waarop gesorteerd is */
  /* flex-basis 0 in plaats van 170px: met een vaste basis paste de rij niet
     en wipte de sorteerknop naar een eigen regel. */
  .bsw-pl-bar__tools .bsw-dd { flex: 1 1 0; min-width: 0; }
  /* Minder zijruimte in de twee knoppen: op 390px is er 358px te verdelen
     over filterknop, sorteerknop en weergaveschakelaar. Met de gewone
     zijruimte van 16px paste "Meeste voorraad" er 21px naast en kapte het
     label af tot "Meeste vo...". De hoogte blijft 44px, dus het tikdoel
     verandert niet. */
  .bsw-pl-bar__tools .bsw-pl-filterbtn { padding: 0 var(--sp-2); }
  .bsw-pl-bar__tools .bsw-dd__btn { width: 100%; justify-content: space-between; gap: var(--sp-2); padding: 0 var(--sp-2); }
  .bsw-pl-bar__tools .bsw-dd__panel { left: 0; right: auto; }
  .bsw-pl-bar__tools .bsw-pl-filterbtn { flex: none; }
  .bsw-pl-bar__tools .bsw-pl-view { flex: none; }

  .bsw-pl-empty { padding: var(--sp-6) var(--sp-4); }
  .bsw-pl-uitwegen { grid-template-columns: minmax(0, 1fr); }
  .bsw-pl-sethint { gap: var(--sp-2); padding: var(--sp-3); }
  .bsw-pl-sethint .bsw-btn { width: 100%; }

  /* Twee kaarten naast elkaar laten geen ruimte voor knop plus stepper op
     één regel. De stepper gaat er dan boven, allebei over de volle breedte,
     en de tikdoelen blijven 44px. */
  .bsw-card__actions { height: auto; flex-direction: column-reverse; }
  /* flex: none is nodig: in een kolom-flexcontainer maakt de flex: 1 uit
     shop.css de flex-basis 0 en krimpt de knop tot 22px. */
  .bsw-card__buy {
    flex: none; width: 100%; height: var(--h-ctl-44);
    border-radius: 0 0 var(--r-md-inner) var(--r-md-inner);
  }
  .bsw-card .bsw-stepper--card {
    width: 100%; border-left: 0; border-bottom: 1px solid var(--gray-2);
    justify-content: space-between;
  }
  .bsw-card .bsw-stepper--card .bsw-stepper__btn:last-child { border-radius: 0; }
}

/* Het paneel schuift; met reduced motion staat het er meteen. De inhoud
   blijft in beide gevallen zichtbaar, want alleen transform en opacity
   bewegen mee. */