/* =====================================================================
   BSW-Bricks, pagina-eigen CSS voor "Onderdelen uit een set"
   Hoort bij themes/bsw-bricks/page-set.php.
   Tokens, knoppen, stalen, steppers en de dekkingsbalk komen uit shop.css.
   Hier staat alleen wat uniek is voor deze pagina.

   Maatvoering: elke lettermaat, regelhoogte, ruimte en radius verwijst
   naar een token uit blok 1 van shop.css. Losse px staan hier alleen nog
   voor de vaste afmeting van een component (miniatuur, schakelaar), nooit
   voor typografie of ruimte.

   Breekpunten: 1100, 900 en 640. Meer heeft deze pagina niet nodig.
   ===================================================================== */

/* ---------------------------------------------------------------
   1  Kopblok: invoer links, cream-kaart rechts
   --------------------------------------------------------------- */
.sp-head {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sp-6); align-items: start;
}
/* De inleidende zin draait op .bsw-lead uit shop.css (maat, regelhoogte en
   de leesbreedte van 32em). Hier staat alleen de afstand naar het formulier. */
.sp-head__intro { margin: var(--sp-2) 0 var(--sp-5); }
.sp-head__form { display: flex; gap: var(--sp-3); max-width: 520px; }
.sp-head__form .bsw-input { flex: 1; min-width: 0; }
.sp-head__form .bsw-btn { flex: none; }
.sp-head__examples {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--text-muted);
}
.sp-head__examples a { font-family: var(--font-mono); font-weight: 500; }
.sp-head__back { margin: var(--sp-5) 0 0; }
.sp-aside p {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
}

/* ---------------------------------------------------------------
   2  Dekkingsblok
   --------------------------------------------------------------- */
.sp-cov {
  margin-top: var(--sp-6); background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-1);
}
.sp-cov__top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap;
}
.sp-cov__ident { display: flex; align-items: flex-start; gap: var(--sp-4); min-width: 0; }
.sp-cov__thumb {
  width: 64px; height: 64px; flex: none; background: var(--off); border: 1px solid var(--gray-line);
  border-radius: var(--r-sm); padding: var(--sp-2); object-fit: contain; display: block;
}
.sp-cov__titles { min-width: 0; }
.sp-cov__titlerow { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.sp-cov__setno {
  font-family: var(--font-mono); font-size: var(--fs-body); font-weight: 500;
  line-height: var(--lh-head); color: var(--text-2);
}
.sp-cov__name {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h2); line-height: var(--lh-head); margin: 0;
}
.sp-cov__year {
  font-family: var(--font-mono); font-size: var(--fs-sm);
  line-height: var(--lh-head); color: var(--text-muted);
}
.sp-cov__theme {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted);
}
.sp-cov__buy { flex: none; text-align: right; }
.sp-cov__total {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-price-lg); line-height: var(--lh-num); color: var(--navy);
}
.sp-cov__pieces {
  font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-1);
}
.sp-cov__buy .bsw-btn { margin-top: var(--sp-3); }
.sp-cov__line { margin: var(--sp-5) 0 0; }
.sp-cov__bar { margin-top: var(--sp-2); }
/* De zin die het verschil uitlegt tussen wat er ligt en wat de knop
   toevoegt. Volle breedte, want hij hoort bij het hele blok. */
.sp-cov__diff {
  margin: var(--sp-3) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--gray-2);
  font-size: var(--fs-cap); line-height: var(--lh-body); color: var(--text-muted);
  max-width: 32em;
}

/* ---------------------------------------------------------------
   3  Kop boven de lijst plus de schakelaar "alleen op voorraad"
   --------------------------------------------------------------- */
.sp-listhead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin: var(--sp-6) 0 var(--sp-4);
}
.sp-listhead__left { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; min-width: 0; }
.sp-listhead__note {
  font-size: var(--fs-sm); line-height: var(--lh-head); color: var(--text-muted);
}

.sp-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  min-height: var(--h-ctl-44);
  font-size: var(--fs-sm); line-height: var(--lh-head); color: var(--navy); cursor: pointer;
}
.sp-toggle input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.sp-toggle__track {
  width: 44px; height: 26px; flex: none; border-radius: var(--r-pill); padding: 3px;
  display: flex; justify-content: flex-start; background: var(--gray-3);
  transition: background .18s ease-out;
}
.sp-toggle__knob {
  width: 20px; height: 20px; border-radius: var(--r-pill); background: var(--white);
  transition: transform .18s ease-out;
}
.sp-toggle input:checked + .sp-toggle__track { background: var(--success); }
.sp-toggle input:checked + .sp-toggle__track .sp-toggle__knob { transform: translateX(18px); }
.sp-toggle input:focus-visible + .sp-toggle__track { outline: 2px solid var(--navy); outline-offset: 2px; }

/* ---------------------------------------------------------------
   4  Onderdelenlijst

   Past de tabel niet, dan schuift hij binnen zijn eigen omhulsel en
   staat er een regel boven die dat vertelt. Die regel hangt niet aan
   een breedte maar aan de vraag of er werkelijk iets buiten beeld
   staat (is-on, gezet in page-set.php), zodat hij nooit "veeg opzij"
   zegt boven een tabel die gewoon past. Onder 640px schuift er niets
   meer: dan wordt elke regel een gestapelde kaart met de kolomkop als
   label ervoor.
   --------------------------------------------------------------- */
.sp-swipe { display: none; }
.sp-swipe.is-on {
  display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-3);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted);
}
.sp-swipe svg {
  flex: none; width: 16px; height: 16px;
  stroke: var(--text-muted); fill: none; stroke-width: 1.5;
}

.sp-tablewrap {
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.sp-tablewrap:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
/* De naamkolom kreeg bij een minimum van 880px maar 100px, waardoor
   "Technic Axle and Pin Connector Perpendicular 3L with Centre Pin Hole"
   over zes regels brak en midden in een woord afknapte. De vijf vaste
   kolommen tellen op tot 652px, plus 80px tussenruimte en 40px celpadding;
   met 200px voor de naam komt de tabel op 972px. */
.sp-grid { min-width: 980px; }
.sp-row {
  display: grid; grid-template-columns: 72px minmax(200px, 1fr) 200px 90px 110px 180px;
  gap: var(--sp-4); align-items: center; padding: var(--sp-3) var(--sp-5);
}
.sp-row--head {
  background: var(--off); border-bottom: 1px solid var(--gray-line);
  font-size: var(--fs-micro); line-height: var(--lh-head);
  font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-2);
}
.sp-row--data { border-bottom: 1px solid var(--gray-2); }
.sp-row--data:last-child { border-bottom: 0; }
.sp-row--data:hover { background: var(--off); }
/* Het label voor de gestapelde kaart. Boven 640px staat de kolomkop al
   in de kop van de tabel, dus daar blijft hij weg. */
.sp-row__label { display: none; }
.sp-row__media {
  aspect-ratio: 1; background: var(--off); border-radius: var(--r-sm); padding: var(--sp-2);
  display: flex; align-items: center; justify-content: center;
}
.sp-row__media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sp-row__name { min-width: 0; }
.sp-row__title {
  font-size: var(--fs-body); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy); text-decoration: none; display: block;
  overflow-wrap: anywhere;
}
.sp-row__title:hover { text-decoration: underline; color: var(--navy); }
.sp-row__no {
  font-family: var(--font-mono); font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-1);
}
.sp-row__color {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-head); color: var(--text-2); min-width: 0;
}
.sp-row__color span:last-child { min-width: 0; overflow-wrap: anywhere; }
.sp-row__need {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-num);
  font-weight: 500;
}
.sp-row__price {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-num);
}
.sp-row__qty { display: flex; align-items: center; gap: var(--sp-3); }
.sp-row__line {
  font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-num);
  font-weight: 500; color: var(--navy); min-width: 62px;
}
.sp-row__note {
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-muted);
}

/* ---------------------------------------------------------------
   5  Ontbrekende onderdelen
   --------------------------------------------------------------- */
.sp-missing { margin-top: var(--sp-6); }
.sp-missing__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.sp-missing__intro {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-muted);
  max-width: 32em;
}
.sp-missing__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.sp-missing__more { margin: var(--sp-4) 0 0; }
.sp-miss {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  background: var(--white); border: 1px dashed var(--gray-3); border-radius: var(--r-md);
  padding: var(--sp-4);
}
/* display:flex wint van het UA-`[hidden]`, dus expliciet terugzetten. */
.sp-miss[hidden] { display: none; }
.sp-miss__media {
  width: 64px; height: 64px; flex: none; background: var(--off);
  border-radius: var(--r-sm); padding: var(--sp-2);
  display: flex; align-items: center; justify-content: center; filter: saturate(0.6);
}
.sp-miss__media img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.sp-miss__body { flex: 1 1 160px; min-width: 0; }
.sp-miss__title {
  font-size: var(--fs-body); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy); text-decoration: none; display: block;
  overflow-wrap: anywhere;
}
.sp-miss__title:hover { text-decoration: underline; color: var(--navy); }
.sp-miss__meta {
  font-family: var(--font-mono); font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-1);
}
.sp-miss__color {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2); margin-top: var(--sp-1);
}
.sp-miss .bsw-btn { flex: none; }
.sp-miss__done {
  font-size: var(--fs-cap); line-height: var(--lh-head); font-weight: 700; color: var(--success);
}

/* ---------------------------------------------------------------
   6  Minifiguren
   --------------------------------------------------------------- */
.sp-figs { margin-top: var(--sp-6); }
.sp-figs__grid {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--sp-4); margin-top: var(--sp-4);
}
.sp-fig {
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md);
  padding: var(--sp-3); text-align: center;
}
.sp-fig__media {
  position: relative; width: 100%; aspect-ratio: 3 / 4; background: var(--off);
  border-radius: var(--r-sm); overflow: hidden;
}
.sp-fig__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sp-fig__ph {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--sp-2); padding: var(--sp-2); color: var(--text-subtle);
  font-size: var(--fs-micro); line-height: var(--lh-head); text-align: center;
}
.sp-fig__ph svg { width: 40px; height: 40px; stroke: var(--text-subtle); stroke-width: 1.5; fill: none; }
.sp-fig__name {
  font-size: var(--fs-cap); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy); margin-top: var(--sp-2);
}
.sp-fig__meta {
  font-family: var(--font-mono); font-size: var(--fs-micro); line-height: var(--lh-head);
  color: var(--text-muted); margin-top: var(--sp-1);
}

/* ---------------------------------------------------------------
   7  Leegstaat en voet
   --------------------------------------------------------------- */
.sp-empty {
  background: var(--white); border: 1px solid var(--gray-line); border-radius: var(--r-md);
  padding: var(--sp-7) var(--sp-5); text-align: center;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-muted);
}
.sp-foot { margin-top: var(--sp-6); }

/* ---------------------------------------------------------------
   8  Responsief: 1100, 900, 640
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  .sp-head { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .sp-figs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .sp-missing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sp-figs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sp-cov__buy { text-align: left; }
}

@media (max-width: 640px) {
  .sp-cov { padding: var(--sp-4); }
  .sp-cov__thumb { width: 48px; height: 48px; }
  .sp-cov__buy { width: 100%; }
  .sp-cov__buy .bsw-btn { width: 100%; }
  .sp-head__form { flex-wrap: wrap; }
  .sp-head__form .bsw-btn { width: 100%; }
  .sp-missing__grid { grid-template-columns: minmax(0, 1fr); }
  .sp-figs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .sp-miss .bsw-btn { width: 100%; }

  /* Gestapelde kaart in plaats van een tabel die 490px buiten beeld
     steekt. De kolomkop wordt het label boven de waarde; de kop van de
     tabel zelf kan dan weg en er valt niets meer opzij te schuiven. */
  .sp-swipe, .sp-swipe.is-on { display: none; }
  .sp-tablewrap { overflow-x: visible; }
  .sp-grid { min-width: 0; }
  .sp-row--head { display: none; }
  .sp-row--data {
    grid-template-columns: 64px minmax(0, 1fr);
    grid-template-areas:
      "media name"
      "color color"
      "need  price"
      "qty   qty";
    gap: var(--sp-3) var(--sp-4);
    padding: var(--sp-4);
    align-items: start;
  }
  .sp-row__media { grid-area: media; }
  .sp-row__name  { grid-area: name; }
  .sp-row__color { grid-area: color; flex-wrap: wrap; }
  .sp-row__need  { grid-area: need; }
  .sp-row__price { grid-area: price; text-align: right; }
  .sp-row__qty   { grid-area: qty; justify-content: space-between; }
  .sp-row__label {
    display: block;
    font-family: var(--font-body); font-size: var(--fs-micro); line-height: var(--lh-head);
    font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .sp-row__color .sp-row__label { flex: 1 0 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-toggle__track, .sp-toggle__knob { transition: none; }
}

/* ---------------------------------------------------------------
   Adres vragen bij "Houd mij op de hoogte"

   De knop zette het onderdeel op de zoeklijst, maar zonder adres
   weigert de server dat: er valt niets te melden. Die weigering werd
   stil opgevangen. Hier staat het veld dat er sindsdien voor in de
   plaats komt, op de plek van de knop zelf.
   --------------------------------------------------------------- */
.sp-mailrij {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; max-width: 100%;
}
.sp-mailrij__uitleg {
  flex: 1 0 100%; margin: 0;
  font-size: var(--fs-cap); color: var(--text-muted); line-height: var(--lh-body);
}
.sp-mailrij__veld {
  flex: 1 1 200px; min-width: 0;
  height: var(--h-ctl-44); padding: 0 12px;
  border: 1px solid var(--gray-line); border-radius: var(--r-sm);
  font: inherit; font-size: var(--fs-body); color: var(--navy); background: #fff;
}
.sp-mailrij__veld:focus-visible {
  outline: 2px solid var(--navy); outline-offset: 2px;
}
.sp-mailrij__fout {
  flex: 1 0 100%; margin: 0;
  font-size: var(--fs-cap); color: var(--danger);
}

/* ---------------------------------------------------------------
   Zoeken binnen de ontbrekende onderdelen

   Bij een grote set staan hier honderden kaarten. Wie er drie mist,
   hoort niet door de hele lijst te hoeven scrollen.
   --------------------------------------------------------------- */
.sp-missing__zoek {
  display: flex; align-items: center; gap: var(--sp-2);
  height: var(--h-ctl); max-width: 420px; margin: var(--sp-4) 0 var(--sp-3);
  padding: 0 var(--sp-4);
  border: 1px solid var(--gray-line); border-radius: var(--r-sm); background: #fff;
  color: var(--text-muted);
}
.sp-missing__zoek:focus-within {
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--yellow-soft);
}
.sp-missing__zoek svg { flex: none; }
.sp-missing__zoekveld {
  flex: 1; min-width: 0; height: 100%;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: var(--fs-body); color: var(--navy);
}
.sp-missing__telling {
  flex: none; font-size: var(--fs-cap); color: var(--text-muted); white-space: nowrap;
}
.sp-missing__leeg {
  margin: 0 0 var(--sp-4); font-size: var(--fs-body); color: var(--text-muted);
}