/* =====================================================================
   shop-checkout.css — koop- en accountschermen (channel bsw-bricks)

   Laadt NA shop.css en gebruikt de tokens daaruit. Dekt:
     mandje, afrekenen, account, bestellingen, inloggen, registreren.

   Het ontwerp beschrijft deze schermen niet, dus de designtaal is hier
   consequent doorgetrokken: cream prijskaart, amber uitsluitend voor de
   primaire actie, navy tekst, dezelfde radii, schaduwen en knophoogtes.

   Maatvoering: elke maat komt uit blok 1 van shop.css. Tekstgrootte via
   --fs-*, ruimte via --sp-*, regelhoogte via --lh-*, hoogte van knoppen
   en velden via --h-ctl-*. Losse px staan hier alleen nog voor maten die
   geen token hebben: de breedte van een tabelkolom, een duimnagel of een
   randdikte.

   Breedte: .bsw-ck-page draait mee op --bsw-container, net als de header,
   de navigatie, het kruimelpad en de footer. Daarmee ligt de linkerrand
   van de H1 op dezelfde lijn als het logo erboven.

   Volgorde:
      1  Paginakaders en koppen
      2  Twee kolommen: inhoud plus samenvatting
      3  Samenvattingskaart (cream)
      4  Mandjetabel
      5  Verzendbalk (gratis verzending)
      6  Formulier
      7  Verzendkeuze en kortingscode
      8  Bestellingen: tabel, statuspil, detail
      9  Account: kaarten en snelkoppelingen
     10  Inloggen en registreren
     11  Leeg scherm en meldingen
     12  Smalle footer op het afrekenscherm
     13  Responsief
     14  prefers-reduced-motion
   ===================================================================== */

/* ---------------------------------------------------------------
   1  Paginakaders en koppen
   --------------------------------------------------------------- */
.bsw-ck-page {
  max-width: var(--bsw-container); margin: 0 auto;
  padding: var(--sp-5) var(--bsw-gutter) var(--sp-8);
}
.bsw-ck-page--narrow { max-width: 940px; }
.bsw-ck-page--auth   { max-width: 520px; }

.bsw-ck-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; margin: 0 0 var(--sp-5);
}
.bsw-ck-head__text { min-width: 0; }
.bsw-ck-head .bsw-page-title { margin: 0; }
.bsw-ck-head__sub {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
}
.bsw-ck-head__side { flex: none; display: flex; align-items: center; gap: var(--sp-3); }

/* Terugverwijzing boven een detailpagina */
.bsw-ck-back {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-num); font-weight: 700;
  color: var(--text-2); margin: 0 0 var(--sp-3);
}
.bsw-ck-back:hover { color: var(--navy); text-decoration: none; }
.bsw-ck-back svg { flex: none; stroke: currentColor; }

/* Blokkop. Dezelfde maat als .bsw-h3, zodat er één paneelkop bestaat. */
.bsw-ck-h3 {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-head);
  color: var(--navy); margin: 0 0 var(--sp-3);
}
.bsw-ck-h3 svg { vertical-align: -3px; stroke: currentColor; fill: none; }
.bsw-ck-h3--spaced { margin-top: var(--sp-6); }

/* ---------------------------------------------------------------
   2  Twee kolommen: inhoud plus samenvatting
   --------------------------------------------------------------- */
.bsw-ck-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--sp-6); align-items: start;
}
.bsw-ck-main { min-width: 0; }
.bsw-ck-main > .bsw-ck-block + .bsw-ck-block { margin-top: var(--sp-5); }

/* Wit paneel voor een blok formuliervelden */
.bsw-ck-block {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: var(--sp-5);
}
.bsw-ck-block--flat { box-shadow: none; }

/* Het afrekenformulier krijgt een eigen kolombreedte. Zonder die grens
   wordt een veld voor één straat bijna duizend pixels breed zodra het
   scherm dat toelaat; met een grens binnen het paneel blijft er een leeg
   vlak in het paneel staan. Dus stopt het paneel zelf op 700px en staat
   de samenvatting tegen de rechterrand van de container. */
.bsw-ck-form.bsw-ck-grid {
  grid-template-columns: minmax(0, 700px) 360px;
  justify-content: space-between;
}

/* ---------------------------------------------------------------
   3  Samenvattingskaart (cream)
   --------------------------------------------------------------- */
.bsw-ck-sum {
  position: sticky; top: var(--sp-9); align-self: start;
  background: var(--cream); border: 1px solid var(--cream-3);
  border-radius: var(--r-md); padding: var(--sp-5); box-shadow: var(--sh-1);
}
.bsw-ck-sum__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-head);
  color: var(--navy); margin: 0 0 var(--sp-3);
}
.bsw-ck-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); font-size: var(--fs-sm); line-height: var(--lh-body);
  color: var(--navy); padding: var(--sp-1) 0;
}
.bsw-ck-row > span:last-child { flex: none; white-space: nowrap; font-weight: 700; }
.bsw-ck-row--quiet { color: var(--text-2); font-size: var(--fs-cap); }
.bsw-ck-row--quiet > span:last-child { font-weight: 400; }
.bsw-ck-row--line { color: var(--text-2); font-size: var(--fs-cap); padding: var(--sp-1) 0; }
.bsw-ck-row--line > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bsw-ck-row--line > span:last-child { font-weight: 400; }
.bsw-ck-row--saving { color: var(--success); }
.bsw-ck-row--saving > span:last-child { color: var(--success); }
.bsw-ck-row--total {
  border-top: 1px solid var(--cream-3); margin-top: var(--sp-3); padding-top: var(--sp-4);
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-num); color: var(--navy);
}
.bsw-ck-row--total > span:last-child {
  font-family: var(--font-head); font-size: var(--fs-price); line-height: var(--lh-num);
}
.bsw-ck-hr { border: 0; border-top: 1px solid var(--cream-3); margin: var(--sp-3) 0; }
.bsw-ck-note {
  font-size: var(--fs-micro); line-height: var(--lh-head);
  color: var(--text-2); margin: 0 0 var(--sp-2);
}
.bsw-ck-sum .bsw-btn { margin-top: var(--sp-4); }
.bsw-ck-pay {
  font-size: var(--fs-micro); line-height: var(--lh-head); color: var(--text-2);
  margin: var(--sp-3) 0 0; text-align: center;
}
.bsw-ck-pay svg { vertical-align: -2px; stroke: currentColor; fill: none; }
.bsw-ck-reviews { margin-top: var(--sp-4); text-align: center; }

/* ---------------------------------------------------------------
   4  Mandjetabel
   De rijen houden .bb-cart-table en data-cart-listing, want de live
   voorraadcontrole in bsw-bricks.js hangt daaraan en schrijft in de
   tweede cel. Alleen de opmaak is nieuw.
   --------------------------------------------------------------- */
.bb-cart-table.bsw-ck-table {
  width: 100%; border-collapse: collapse;
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); overflow: hidden; box-shadow: var(--sh-1);
}
.bb-cart-table.bsw-ck-table th {
  text-align: left; padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-micro); line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  background: var(--off); border-bottom: 1px solid var(--gray-line);
}
.bb-cart-table.bsw-ck-table td {
  padding: var(--sp-4); border-bottom: 1px solid var(--gray-2); vertical-align: middle;
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--navy);
}
.bb-cart-table.bsw-ck-table tbody tr:last-child td { border-bottom: 0; }
.bb-cart-table.bsw-ck-table th.bsw-ck-right,
.bb-cart-table.bsw-ck-table td.bsw-ck-right { text-align: right; }

/* Kolombreedtes horen bij de tabel, niet bij de rij in het sjabloon */
.bb-cart-table.bsw-ck-table td.bsw-ck-td--img  { width: 84px; }
.bb-cart-table.bsw-ck-table td.bsw-ck-td--qty  { width: 110px; }
.bb-cart-table.bsw-ck-table td.bsw-ck-td--acts { width: 110px; }

.bsw-ck-thumb {
  width: 68px; height: 68px; border-radius: var(--r-sm); background: var(--off);
  border: 1px solid var(--gray-line); display: flex; align-items: center;
  justify-content: center; padding: var(--sp-1);
}
.bb-cart-table.bsw-ck-table .bsw-ck-thumb img {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; background: transparent; border-radius: 0; padding: 0;
}
.bsw-ck-thumb__none {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--text-muted);
}

.bsw-ck-item__name {
  font-weight: 700; font-size: var(--fs-body); line-height: var(--lh-head); color: var(--navy);
}
.bsw-ck-item__no {
  font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 500;
  line-height: var(--lh-num); color: var(--text-muted); margin-top: var(--sp-1);
}
.bsw-ck-item__meta {
  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); flex-wrap: wrap;
}
.bsw-ck-item__warn {
  display: inline-flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head); font-weight: 700; color: var(--danger);
}
.bsw-ck-item__warn svg { flex: none; stroke: currentColor; }
.bb-cart-table.bsw-ck-table td .bsw-ck-linetotal {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-num); color: var(--navy);
}

/* Aantalveld in de mandjerij */
.bsw-ck-qty {
  width: 78px; height: var(--h-ctl-44); padding: 0 var(--sp-3); text-align: center;
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--white); font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-btn); line-height: var(--lh-num); color: var(--navy); outline: none;
}
.bsw-ck-qty:focus { border-color: var(--navy); }

/* Rijacties: hart en kruis, altijd minstens 44x44 */
.bsw-ck-rowacts { display: flex; align-items: center; gap: var(--sp-1); justify-content: flex-end; }
.bsw-ck-rowacts form { display: inline; margin: 0; }
.bsw-ck-actbtn {
  width: var(--h-ctl-44); height: var(--h-ctl-44);
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-sm); background: transparent;
  /* Ook een knop zonder tekst krijgt een maat: zonder deze regel valt hij
     terug op de 13,33px van de browser en dat is een negende tekstmaat. */
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-num);
  color: var(--text-2); cursor: pointer; transition: background 160ms ease-out, color 160ms ease-out;
}
.bsw-ck-actbtn:hover { background: var(--gray-soft); color: var(--navy); }
.bsw-ck-actbtn svg { stroke: currentColor; fill: none; }
.bsw-ck-actbtn--danger:hover { background: #FBEDEB; color: var(--danger); }

.bsw-ck-below {
  margin-top: var(--sp-4); display: flex; flex-wrap: wrap;
  gap: var(--sp-3); align-items: center;
}

/* ---------------------------------------------------------------
   5  Verzendbalk (gratis verzending)
   --------------------------------------------------------------- */
.bsw-ck-ship { margin: var(--sp-3) 0 var(--sp-2); }
.bsw-ck-ship__label {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-cap); line-height: var(--lh-head); font-weight: 700;
  color: var(--navy); margin: 0 0 var(--sp-2);
}
.bsw-ck-ship__label svg { flex: none; stroke: currentColor; fill: none; }
.bsw-ck-ship__label.is-free { color: var(--success); }
.bsw-ck-ship__track { height: 10px; border-radius: var(--r-pill); background: var(--cream-3); overflow: hidden; }
.bsw-ck-ship__fill  { height: 100%; border-radius: var(--r-pill); background: var(--yellow); transition: width 200ms ease-out; }
.bsw-ck-ship__fill.is-free { background: var(--success); }

/* ---------------------------------------------------------------
   6  Formulier
   De oude .bb-form-row blijft naast de nieuwe klassen bestaan voor
   schermen die nog niet herbouwd zijn; hier wint de nieuwe opmaak.
   --------------------------------------------------------------- */
.bsw-ck-form .bsw-field { margin-bottom: var(--sp-4); }
.bsw-ck-form .bsw-field:last-child { margin-bottom: 0; }
.bsw-ck-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.bsw-ck-grid2--wide { grid-template-columns: 2fr 1fr 1fr; }
.bsw-ck-span2 { grid-column: 1 / -1; }

.bsw-ck-form .bsw-label {
  display: block; font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-micro); line-height: var(--lh-num);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
  margin: 0 0 var(--sp-2);
}
.bsw-ck-form .bsw-input,
.bsw-ck-form .bsw-select,
.bsw-ck-form .bsw-textarea {
  width: 100%; border: 1.5px solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--white); font-family: var(--font-body); font-size: var(--fs-btn);
  color: var(--navy); outline: none; transition: border-color 160ms ease-out;
}
.bsw-ck-form .bsw-input,
.bsw-ck-form .bsw-select { height: var(--h-ctl); padding: 0 var(--sp-4); }
.bsw-ck-form .bsw-textarea {
  min-height: var(--sp-9); padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh-body); resize: vertical;
}
.bsw-ck-form .bsw-input:focus,
.bsw-ck-form .bsw-select:focus,
.bsw-ck-form .bsw-textarea:focus { border-color: var(--navy); }
.bsw-ck-form select.bsw-select {
  appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231B2A4E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center;
}
.bsw-ck-hint {
  font-size: var(--fs-micro); line-height: var(--lh-head);
  color: var(--text-2); margin: var(--sp-2) 0 0;
}

/* Straat en plaats die de postcode-lookup heeft ingevuld. Ze blijven
   gewoon meeposten; alleen typen is even uit tot de klant zegt dat het
   niet klopt. */
.bsw-ck-form .bsw-input.is-gevuld { background: var(--off); color: var(--text-2); }
.bsw-ck-adr {
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-cap); line-height: var(--lh-head); color: var(--text-2);
}
.bsw-ck-adr[hidden] { display: none; }
.bsw-ck-adr__icon { display: inline-flex; color: var(--success); }
.bsw-ck-adr__icon svg { stroke: currentColor; fill: none; }
.bsw-ck-adr__text { color: var(--text-2); }
.bsw-ck-adr__edit {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-cap); font-weight: 700;
  color: var(--navy); text-decoration: underline; text-underline-offset: 2px;
}
.bsw-ck-adr__edit:hover { color: var(--navy-2); }

/* Uitklap voor zakelijke gegevens en kortingscode */
.bsw-ck-more { margin: var(--sp-1) 0 var(--sp-3); }
.bsw-ck-more > summary {
  display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  font-size: var(--fs-sm); line-height: var(--lh-num); font-weight: 700; color: var(--navy);
  padding: var(--sp-2) 0; list-style: none;
}
.bsw-ck-more > summary::-webkit-details-marker { display: none; }
.bsw-ck-more > summary svg { flex: none; stroke: currentColor; transition: transform 160ms ease-out; }
.bsw-ck-more[open] > summary svg { transform: rotate(180deg); }
.bsw-ck-more__body { padding-top: var(--sp-2); }

/* ---------------------------------------------------------------
   7  Verzendkeuze en kortingscode
   --------------------------------------------------------------- */
.bsw-ck-opt {
  display: flex; align-items: flex-start; gap: var(--sp-3); cursor: pointer;
  padding: var(--sp-3) var(--sp-4); border: 1.5px solid var(--gray-3); border-radius: var(--r-sm);
  background: var(--white); margin-bottom: var(--sp-3);
  transition: border-color 160ms ease-out, background 160ms ease-out;
}
.bsw-ck-opt:last-child { margin-bottom: 0; }
.bsw-ck-opt:hover { border-color: var(--navy-3); }
.bsw-ck-opt:has(input:checked) { border-color: var(--yellow); background: var(--cream); }
.bsw-ck-opt input[type="radio"] {
  flex: none; width: 20px; height: 20px; margin: var(--sp-1) 0 0;
  accent-color: var(--navy); cursor: pointer;
}
.bsw-ck-opt__text { flex: 1; min-width: 0; }
.bsw-ck-opt__name {
  display: block; font-weight: 700; font-size: var(--fs-body);
  line-height: var(--lh-head); color: var(--navy);
}
.bsw-ck-opt__note {
  display: block; font-size: var(--fs-cap); line-height: var(--lh-head);
  color: var(--text-2); margin-top: var(--sp-1);
}
.bsw-ck-opt__price {
  flex: none; font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-head); color: var(--navy); white-space: nowrap;
}

.bsw-ck-voucher { display: flex; gap: var(--sp-2); margin-top: var(--sp-2); }
.bsw-ck-voucher input {
  flex: 1; min-width: 0; height: var(--h-ctl-44); padding: 0 var(--sp-3);
  border: 1.5px solid var(--gray-3); border-radius: var(--r-sm); background: var(--white);
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-sm); color: var(--navy);
  text-transform: uppercase; outline: none;
}
.bsw-ck-voucher input:focus { border-color: var(--navy); }
.bsw-ck-voucher .bsw-btn { flex: none; margin-top: 0; }
.bsw-ck-voucher-tag { display: inline-flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.bsw-ck-voucher-tag svg { flex: none; stroke: currentColor; }
.bsw-ck-voucher-tag code {
  font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap);
  overflow-wrap: anywhere; color: inherit;
}
.bsw-ck-voucher-tag form { display: inline; margin: 0; }
.bsw-ck-voucher-x {
  width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--text-2); cursor: pointer;
  font-family: var(--font-body); font-size: var(--fs-sm); line-height: var(--lh-num);
}
.bsw-ck-voucher-x:hover { background: rgba(27,42,78,0.08); color: var(--navy); }
.bsw-ck-voucher-x svg { stroke: currentColor; fill: none; }

/* ---------------------------------------------------------------
   8  Bestellingen: tabel, statuspil, detail
   --------------------------------------------------------------- */
.bsw-ck-orders { width: 100%; border-collapse: collapse; background: var(--white); }
.bsw-ck-orders-wrap {
  border: 1px solid var(--gray-line); border-radius: var(--r-md);
  overflow: hidden; box-shadow: var(--sh-1);
}
.bsw-ck-orders-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bsw-ck-orders th {
  text-align: left; padding: var(--sp-3) var(--sp-4); white-space: nowrap;
  font-family: var(--font-body); font-weight: 700;
  font-size: var(--fs-micro); line-height: var(--lh-num);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted);
  background: var(--off); border-bottom: 1px solid var(--gray-line);
}
.bsw-ck-orders td {
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--gray-2);
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--navy); vertical-align: middle;
}
.bsw-ck-orders tbody tr:last-child td { border-bottom: 0; }
.bsw-ck-orders tbody tr:hover { background: var(--off); }
.bsw-ck-orders .bsw-ck-right { text-align: right; }
.bsw-ck-orders__id { font-family: var(--font-mono); font-weight: 500; font-size: var(--fs-cap); }
.bsw-ck-orders__amount {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-body); line-height: var(--lh-num); white-space: nowrap;
}
.bsw-ck-orders__acts { display: flex; gap: var(--sp-2); justify-content: flex-end; align-items: center; white-space: nowrap; }
.bsw-ck-orders__acts form { display: inline; margin: 0; }

.bsw-ck-pill {
  display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill); font-size: var(--fs-cap); line-height: var(--lh-num);
  font-weight: 700; white-space: nowrap;
  background: var(--gray-soft); color: var(--text-2);
}
.bsw-ck-pill::before { content: ""; width: 8px; height: 8px; border-radius: var(--r-pill); background: currentColor; flex: none; }
.bsw-ck-pill--wait { background: var(--cream); color: #8A6400; }
.bsw-ck-pill--ok   { background: var(--success-bg); color: var(--success-2); }
.bsw-ck-pill--move { background: #E7EDF7; color: var(--navy-3); }
.bsw-ck-pill--stop { background: #FBEDEB; color: var(--danger); }

.bsw-ck-detailgrid {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--sp-6); align-items: start;
}

/* ---------------------------------------------------------------
   9  Account: kaarten en snelkoppelingen
   --------------------------------------------------------------- */
.bsw-ck-acct {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-5); align-items: start;
}
.bsw-ck-acct__col { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.bsw-ck-card {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1); padding: var(--sp-5);
}
.bsw-ck-card__head {
  display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-4);
}
.bsw-ck-card__head svg { flex: none; stroke: var(--navy); fill: none; }
.bsw-ck-card__title {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-head); color: var(--navy); margin: 0;
}
.bsw-ck-card .bsw-btn { margin-top: var(--sp-4); }

.bsw-ck-links { display: flex; flex-direction: column; gap: var(--sp-2); }
.bsw-ck-link {
  display: flex; align-items: center; gap: var(--sp-3); min-height: var(--h-ctl-lg);
  padding: var(--sp-3) var(--sp-4); border: 1px solid var(--gray-line); border-radius: var(--r-sm);
  background: var(--white); font-size: var(--fs-body); line-height: var(--lh-head);
  font-weight: 700; color: var(--navy);
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.bsw-ck-link:hover { background: var(--cream); border-color: var(--cream-3); color: var(--navy); text-decoration: none; }
.bsw-ck-link svg { flex: none; stroke: var(--navy); fill: none; }
.bsw-ck-link__arrow { margin-left: auto; stroke: var(--text-muted) !important; }

/* Het cream vlak met de naam van de klant bovenaan het account */
.bsw-ck-hello { display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.bsw-ck-hello__ring {
  flex: none; width: var(--h-ctl-lg); height: var(--h-ctl-lg); border-radius: var(--r-pill);
  background: var(--cream); border: 1px solid var(--cream-3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-num); color: var(--navy);
}

/* ---------------------------------------------------------------
   10  Inloggen en registreren
   --------------------------------------------------------------- */
.bsw-auth { max-width: 480px; margin: 0 auto; }
.bsw-auth--wide { max-width: 560px; }
.bsw-auth__head { text-align: center; margin: var(--sp-2) 0 var(--sp-5); }
.bsw-auth__head .bsw-page-title { margin: 0; }
.bsw-auth__sub {
  margin: var(--sp-3) auto 0; font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-2); max-width: 420px;
}
.bsw-auth__card {
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); box-shadow: var(--sh-2); padding: var(--sp-5);
}
.bsw-auth__card .bsw-btn { margin-top: var(--sp-2); }
.bsw-auth__foot {
  text-align: center; margin: var(--sp-4) 0 0;
  font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-2);
}
.bsw-auth__foot a { font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.bsw-auth__legal {
  font-size: var(--fs-micro); line-height: var(--lh-body);
  color: var(--text-2); margin: var(--sp-4) 0 0;
}
.bsw-auth__legal a { text-decoration: underline; text-underline-offset: 2px; }
.bsw-auth__usps {
  list-style: none; margin: var(--sp-5) 0 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.bsw-auth__usps li {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--text-2);
}
.bsw-auth__usps svg { flex: none; margin-top: 2px; stroke: var(--success); fill: none; }

/* De Turnstile-widget krijgt lucht, ongeacht wat het script inschiet */
.bsw-auth__card .cf-turnstile,
.bsw-ck-form .cf-turnstile { margin: var(--sp-1) 0 var(--sp-4); }

/* ---------------------------------------------------------------
   11  Leeg scherm en meldingen

   Een lege staat is één zin en één knop. Het paneel mag de kolom vullen,
   de inhoud staat in een kolom van 480px in het midden: anders breekt een
   regel van 74 tekens op 420px af en blijft de rest van het paneel wit.
   --------------------------------------------------------------- */
.bsw-ck-empty {
  text-align: center; padding: var(--sp-7) var(--sp-5);
  background: var(--white); border: 1px solid var(--gray-line);
  border-radius: var(--r-md); box-shadow: var(--sh-1);
}
.bsw-ck-empty > * { max-width: 480px; margin-left: auto; margin-right: auto; }
.bsw-ck-empty svg { stroke: var(--text-subtle); fill: none; margin: 0 auto var(--sp-4); display: block; }
.bsw-ck-empty h2 {
  font-family: var(--font-head); font-weight: 700;
  font-size: var(--fs-h2); line-height: var(--lh-head);
  color: var(--navy); margin: 0 auto var(--sp-2);
}
.bsw-ck-empty p {
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-2); margin: 0 auto var(--sp-5);
}
.bsw-ck-empty .bsw-btn { max-width: none; }

.bsw-ck-alert {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  border: 1px solid var(--gray-line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm); line-height: var(--lh-body);
}
.bsw-ck-alert svg { flex: none; margin-top: 2px; stroke: currentColor; fill: none; }
.bsw-ck-alert strong { display: block; font-size: var(--fs-body); line-height: var(--lh-head); }
.bsw-ck-alert p  { margin: var(--sp-1) 0 0; }
.bsw-ck-alert ul { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); }
.bsw-ck-alert li { margin: 2px 0; }
.bsw-ck-alert li strong { display: inline; font-size: inherit; }
.bsw-ck-alert--err  { border-color: #E8C0BB; background: #FBEDEB; color: var(--danger); }
.bsw-ck-alert--ok   { border-color: #BFE0C7; background: var(--success-bg); color: var(--success-2); }
.bsw-ck-alert--warn { border-color: var(--cream-3); background: var(--cream); color: var(--navy); }
.bsw-ck-alert__body { min-width: 0; }
.bsw-ck-alert__body .bsw-btn { margin-top: var(--sp-3); }
.bsw-ck-alert a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ---------------------------------------------------------------
   12  Smalle footer op het afrekenscherm

   Onder het afrekenformulier hoort geen tweede winkel. De volle footer
   telt 58 links plus een nieuwsbriefformulier met een tweede e-mailveld,
   precies terwijl de klant zijn adres invult. Op dit ene scherm blijft
   alleen de kolom staan die er hoort: telefoon, adres, KvK, btw en de
   betaalmethodes, met daaronder de vaste slotbalk met de voorwaarden.

   Dit gaat via .bsw-ck-page--lean op de afrekenpagina zelf. De footer is
   één gedeeld bestand en blijft dat; zodra footer.php een eigen smalle
   variant krijgt, kan dit blok weg.
   --------------------------------------------------------------- */
body:has(.bsw-ck-page--lean) .bsw-ft__b1 { display: none; }
body:has(.bsw-ck-page--lean) .bsw-ft__b2 {
  grid-template-columns: minmax(0, 520px);
  padding-top: var(--sp-6);
}
body:has(.bsw-ck-page--lean) .bsw-ft__b2 > .bsw-ft__col:nth-child(-n+3) { display: none; }

/* ---------------------------------------------------------------
   13  Responsief

   Vier breekpunten, dezelfde als in shop.css: 1100, 900, 640 en 390.
   --------------------------------------------------------------- */
@media (max-width: 1100px) {
  /* De samenvatting wordt smaller vóór ze onder de inhoud schuift, zodat
     de mandjetabel in de band 901 tot 1100 niet wordt platgedrukt. */
  .bsw-ck-grid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); }
  .bsw-ck-form.bsw-ck-grid { grid-template-columns: minmax(0, 1fr) 320px; }
  .bsw-ck-detailgrid { grid-template-columns: minmax(0, 1fr) 320px; gap: var(--sp-5); }
}

@media (max-width: 900px) {
  .bsw-ck-grid,
  .bsw-ck-form.bsw-ck-grid,
  .bsw-ck-detailgrid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .bsw-ck-sum { position: static; }
  .bsw-ck-acct { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .bsw-ck-page { padding: var(--sp-4) var(--bsw-gutter) var(--sp-7); }
  .bsw-ck-grid2,
  .bsw-ck-grid2--wide { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bsw-ck-head { align-items: flex-start; }
  .bsw-ck-block { padding: var(--sp-4); }
  .bsw-ck-sum   { padding: var(--sp-4); }
  .bsw-ck-empty { padding: var(--sp-6) var(--sp-4); }

  /* De mandjetabel wordt een kaartlijst; de rij blijft een <tr>, want de
     live voorraadcontrole in het JS zoekt op tr[data-cart-listing]. */
  .bb-cart-table.bsw-ck-table,
  .bb-cart-table.bsw-ck-table tbody,
  .bb-cart-table.bsw-ck-table tr { display: block; }
  .bb-cart-table.bsw-ck-table thead { display: none; }
  .bb-cart-table.bsw-ck-table tr {
    display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: var(--sp-1) var(--sp-4);
    padding: var(--sp-4); border-bottom: 1px solid var(--gray-2);
  }
  .bb-cart-table.bsw-ck-table tbody tr:last-child { border-bottom: 0; }
  .bb-cart-table.bsw-ck-table td { display: block; padding: 0; border: 0; }
  .bb-cart-table.bsw-ck-table td.bsw-ck-td--img,
  .bb-cart-table.bsw-ck-table td.bsw-ck-td--qty,
  .bb-cart-table.bsw-ck-table td.bsw-ck-td--acts { width: auto; }
  .bb-cart-table.bsw-ck-table td:nth-child(1) { grid-row: 1 / span 3; }
  .bb-cart-table.bsw-ck-table td:nth-child(2) { grid-column: 2; }
  .bb-cart-table.bsw-ck-table td:nth-child(3) { grid-column: 2; margin-top: var(--sp-3); }
  .bb-cart-table.bsw-ck-table td:nth-child(4) { grid-column: 2; margin-top: var(--sp-2); text-align: left; }
  .bb-cart-table.bsw-ck-table td:nth-child(5) { grid-column: 2; margin-top: var(--sp-2); }
  .bsw-ck-rowacts { justify-content: flex-start; margin-left: calc(var(--sp-3) * -1); }

  .bsw-ck-orders th, .bsw-ck-orders td { padding: var(--sp-3); }
  .bsw-ck-below .bsw-btn,
  .bsw-ck-below .bsw-btn-text { width: 100%; justify-content: center; }

  body:has(.bsw-ck-page--lean) .bsw-ft__b2 { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
  .bsw-ck-empty { padding: var(--sp-5) var(--sp-3); }
  .bsw-ck-qty { width: 68px; }
}

/* ---------------------------------------------------------------
   14  Beweging: alle animatie is versiering, nooit betekenis
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bsw-ck-ship__fill,
  .bsw-ck-opt,
  .bsw-ck-link,
  .bsw-ck-actbtn,
  .bsw-ck-more > summary svg { transition-duration: 0.01ms !important; }
}