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

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

/* ---------------------------------------------------------------
   1  Kruimelpad
   --------------------------------------------------------------- */
.bsw-pl-crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  font-size: 13px; color: var(--text-muted); margin-bottom: 12px;
}
.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: 32px;
  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: 20px; }
.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: 20px; }
.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: 12px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.bsw-pl-note a { text-decoration: underline; text-underline-offset: 2px; }
.bsw-pl-more {
  margin-top: 6px; align-self: flex-start;
  border: 0; background: transparent; padding: 0;
  font-family: inherit; font-size: 13px; 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: 8px; margin-top: 10px; }
.bsw-pl-price input {
  width: 100%; min-width: 0; height: 36px;
  border: 1px solid var(--gray-3); border-radius: 8px; background: var(--white);
  padding: 0 10px; font-family: inherit; font-size: 13px; color: var(--navy); outline: none;
}
.bsw-pl-price input:focus { border-color: var(--navy); }
.bsw-pl-price span { flex: none; font-size: 13px; color: var(--text-muted); }
.bsw-pl-price .bsw-pl-apply {
  flex: none; height: 36px; padding: 0 12px;
  border: 1.5px solid var(--navy); border-radius: 8px; background: var(--white);
  font-family: inherit; font-size: 13px; 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: 10px; }
.bsw-pl-fact svg { flex: none; width: 18px; height: 18px; stroke: var(--success); stroke-width: 2; fill: none; margin-top: 2px; }
.bsw-pl-fact strong { display: block; font-size: 14px; font-weight: 700; color: var(--navy); }
.bsw-pl-fact span { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ---------------------------------------------------------------
   3  Kop, pillen en resultatenbalk
   --------------------------------------------------------------- */
.bsw-pl-lead { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--text-2); max-width: 680px; }
.bsw-pl-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.bsw-pl-clear {
  height: 32px; border: 0; background: transparent; padding: 0 8px;
  font-family: inherit; font-size: 13px; 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: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px; border-bottom: 1px solid var(--gray-line); margin-bottom: 20px;
}
.bsw-pl-bar__count { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; min-width: 0; }
.bsw-pl-bar__n { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--navy); }
.bsw-pl-bar__note { font-size: 13px; color: var(--text-muted); }
.bsw-pl-bar__tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bsw-pl-bar__label { font-size: 13px; color: var(--text-muted); }
.bsw-pl-view { display: flex; gap: 4px; padding: 4px; background: var(--gray-soft); border-radius: var(--r-sm); }
.bsw-pl-view a {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; border-radius: 7px; 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. */
.bsw-pl-nojs-sort { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; }

/* ---------------------------------------------------------------
   4  Lege staat
   --------------------------------------------------------------- */
.bsw-pl-empty {
  border: 1px dashed var(--gray-3); border-radius: var(--r-md); padding: 48px 24px;
  text-align: center; background: var(--white);
}
.bsw-pl-empty p { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--navy); }
.bsw-pl-empty p + p { margin: 0 0 20px; font-size: 14px; font-weight: 400; color: var(--text-2); }

/* ---------------------------------------------------------------
   5  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: 13px; color: var(--text-muted); }

/* ---------------------------------------------------------------
   6  Lijstweergave
   --------------------------------------------------------------- */
.bsw-pl-list { display: flex; flex-direction: column; gap: 12px; }
.bsw-pl-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr) 260px; gap: 20px;
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); padding: 16px; 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: 12px; 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: 6px; min-width: 0; }
.bsw-pl-row__kicker {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 12px; 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: 18px; font-weight: 700; line-height: 1.35;
  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: 13px; color: var(--text-2); }
.bsw-pl-row__desc { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-2); max-width: 560px; }
.bsw-pl-row__buy {
  border-left: 1px solid var(--gray-2); padding-left: 20px;
  display: flex; flex-direction: column; gap: 8px;
}
.bsw-pl-row__ship { font-size: 13px; color: var(--text-2); }
.bsw-pl-row__act { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.bsw-pl-row__act .bsw-btn { flex: 1; min-width: 0; }

/* ---------------------------------------------------------------
   7  Paginering
   --------------------------------------------------------------- */
.bsw-pl-pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px;
  margin: 32px 0 0;
}
.bsw-pl-pager a, .bsw-pl-pager span {
  min-width: 44px; height: 44px; padding: 0 12px;
  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: 14px; 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: 20px; padding: 0; color: var(--text-muted); }

/* ---------------------------------------------------------------
   8  Responsief
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .bsw-pl-grid { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; }
  .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: 12px;
    flex: none; padding: 12px 12px 12px 20px; border-bottom: 1px solid var(--gray-line);
  }
  .bsw-pl-sheet-head strong { font-family: var(--font-head); font-weight: 700; font-size: 18px; }
  .bsw-pl-sheet-foot {
    display: flex; align-items: center; gap: 12px;
    flex: none; padding: 12px 20px; border-top: 1px solid var(--gray-line); background: var(--white);
    padding-bottom: max(12px, 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: 44px; }
  .bsw-pl-aside .bsw-seg { padding: 4px; }
  .bsw-pl-aside .bsw-seg__btn { height: 44px; min-height: 44px; }
  /* 46px buitenmaat, want de rand van 1px telt mee: het veld zelf haalt dan 44px. */
  .bsw-pl-aside .bsw-facet-search { height: 46px; }
  .bsw-pl-aside .bsw-pl-price input,
  .bsw-pl-aside .bsw-pl-price .bsw-pl-apply { height: 44px; min-height: 44px; }
  .bsw-pl-aside .bsw-pl-more {
    min-height: 44px; 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: 44px; line-height: 44px;
  }

  /* 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: 8px; }
  .bsw-pl-aside .bsw-swatch-cell {
    display: flex; width: 100%; height: auto; min-height: 44px;
    justify-content: flex-start; gap: 10px; padding: 0 8px;
  }
  .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: 15px; 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: 12px; 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: 12px; }
  .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: 12px; }
}

@media (max-width: 640px) {
  .bsw-pl-bar { gap: 12px; }
  .bsw-pl-bar__tools { width: 100%; }
  .bsw-pl-bar__label { display: none; }   /* de knop zegt zelf waarop gesorteerd is */
  .bsw-pl-bar__tools .bsw-dd { flex: 1 0 170px; min-width: 0; }  /* wipt naar een eigen regel als hij niet past */
  .bsw-pl-bar__tools .bsw-dd__btn { width: 100%; justify-content: space-between; }
  .bsw-pl-bar__tools .bsw-dd__panel { left: 0; right: auto; }
  .bsw-pl-empty { padding: 32px 16px; }

  /* 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: 44px; border-radius: 0 0 13px 13px; }
  .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. */