/* ==========================================================================
 * SAMA MATCHA — sm-cart.css  (PAKIET H: koszyk i kasa)
 *
 * Wariant sklepu: KLASYCZNY (shortcode). Markup tabel generuje Blocksy
 * (`themes/blocksy/woocommerce/cart/cart.php`), dlatego celujemy w jego klasy:
 * `.ct-woocommerce-cart-form`, `.ct-order-review`, `.product-mobile-actions`,
 * `.quantity[data-type="type-2"]`.
 *
 * Miejsce w kaskadzie: po `sama-free-shipping`, przed `sm-base` (priorytet 99).
 *
 * Pola formularzy przestawiamy PRZEZ ZMIENNE Blocksy
 * (`--theme-form-field-*`), a nie przez nadpisywanie właściwości — dzięki temu
 * nie licytujemy się specyficznością i nie potrzebujemy `!important`.
 *
 * Doktryna elewacji: kontrast tła ALBO hairline ALBO cień, nigdy dwa naraz.
 * W spoczynku nic nie rzuca cienia — cień zostaje wyłącznie dla paska
 * przypiętego u dołu ekranu, bo tam jest jedyną informacją o tym, że warstwa
 * leży NAD treścią.
 * ========================================================================== */

/* ══════════════════════════════════════════════════════════════════
 * 1) WSPÓLNE — nagłówki, tabele, przyciski
 * ══════════════════════════════════════════════════════════════════ */

body.woocommerce-cart .woocommerce,
body.woocommerce-checkout .woocommerce {
  /* Pola: jedna wysokość (>= 44 px celu dotykowego), hairline, bez wypełnienia. */
  --theme-form-field-height: 48px;
  --theme-form-field-border-width: 1px;
  --theme-form-field-border-initial-color: var(--c-line);
  --theme-form-field-border-focus-color: var(--c-moss);
  --theme-form-field-border-radius: var(--r-sm);
  --theme-form-text-initial-color: var(--c-text);
}

/* „Podsumowanie koszyka” / „Twoje zamówienie” / „Dane rozliczeniowe”.
   h2 dziedziczy serif z sm-base; h3 zostaje sansem 600 — tu tylko skala
   i rytm, żeby nagłówki nie krzyczały głośniej niż kwoty. */
body.woocommerce-cart .cart_totals > h2,
body.woocommerce-checkout .ct-order-review > h3,
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3 {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-h3);
  letter-spacing: 0;
}
body.woocommerce-cart .cart_totals > h2 {
  font-size: var(--fs-h2);
}

/* Główki tabel — overline, nie nagłówek. Kolumna z kwotą do prawej. */
body.woocommerce-cart .shop_table thead th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th {
  padding-block: var(--sp-2);
  border-bottom: var(--line);
  font: 600 var(--fs-overline) / 1 var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-muted);
}
body.woocommerce-cart .shop_table thead th.product-subtotal,
body.woocommerce-checkout .woocommerce-checkout-review-order-table thead th.product-total {
  text-align: right;
}

/* Kwoty: cyfry o równej szerokości, żeby kolumna nie drgała przy przeliczeniu. */
body.woocommerce-cart .amount,
body.woocommerce-checkout .amount {
  font-variant-numeric: tabular-nums;
}

/* Przyciski Woo bez klas .sm-btn (koszyk renderuje je z szablonu, więc
   nie ma gdzie dopiąć klasy filtrem) — te same tokeny, ten sam kształt.
   Selektor z `.woocommerce` i elementem `a` jest celowo długi: reguła Blocksy
   `.woocommerce a.button` ma swoistość 0,2,1 i jest wczytywana PO tym arkuszu,
   więc przy równej swoistości wygrywałaby kolejnością.
   PROMIENIA NIE USTAWIAMY: kształt przycisków w całym serwisie trzyma
   `sama-refactor.css` (`border-radius: 2px !important`, sekcja „KSZTAŁT
   PRZYCISKÓW”). Wymuszanie tu pigułki rozjechałoby koszyk z kartą produktu
   i wymagałoby kolejnego `!important`. */
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin: var(--sp-4) 0 0;
  padding-inline: var(--sp-4);
  border: 1px solid transparent;
  background: var(--c-forest);
  font: 500 var(--fs-small) / 1 var(--font-sans);
  color: var(--c-paper);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  --theme-button-text-transform: none;
  --theme-button-letter-spacing: 0;
  transition: background-color var(--t-fast) var(--ease);
}
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:hover,
body.woocommerce-cart .woocommerce .wc-proceed-to-checkout a.checkout-button:active {
  background: var(--c-ink);
  color: var(--c-paper);
}

/* Drugorzędne akcje koszyka (kupon, „Zaktualizuj koszyk”) — kontur, nie plama. */
body.woocommerce-cart .woocommerce-cart-form .actions .button {
  min-height: 44px; /* cel dotykowy */
  padding-inline: var(--sp-3);
  border: var(--line);
  border-radius: var(--r-full);
  background: transparent;
  font: 500 var(--fs-caption) / 1 var(--font-sans);
  color: var(--c-text);
  transition:
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
body.woocommerce-cart .woocommerce-cart-form .actions .button:hover:not([disabled]) {
  border-color: var(--c-moss);
  background: var(--c-cream);
  color: var(--c-text);
}
body.woocommerce-cart .woocommerce-cart-form .actions .button[disabled] {
  opacity: 0.4;
}

/* Gdy JS przejmie zapisywanie ilości (patrz `sm-cart.js`, sekcja 4), przycisk
   „Zaktualizuj koszyk” jest już tylko wyłączonym kikutem — myli, bo sugeruje,
   że coś jest niezapisane. Klasę dokłada JS, więc bez JS przycisk zostaje
   widoczny i dalej jest jedyną drogą do zapisania ilości. Pole kuponu z tego
   wiersza zniknęło, więc przy auto-zapisie chowamy cały wiersz `.actions`. */
body.sm-cart-autoupdate .woocommerce-cart-form .actions {
  display: none;
}

/* ══════════════════════════════════════════════════════════════════
 * 2) KOSZYK — pozycja
 * ══════════════════════════════════════════════════════════════════ */

/* Tabela pozycji: same hairline'y, zero ramki wokół. */
body.woocommerce-cart .woocommerce-cart-form .shop_table {
  border: 0;
  border-collapse: collapse;
}
body.woocommerce-cart .woocommerce-cart-form .cart_item > td {
  padding-block: var(--sp-3);
  border-bottom: var(--line);
  vertical-align: middle;
}
body.woocommerce-cart .woocommerce-cart-form .cart_item > td.product-subtotal {
  text-align: right;
  font-weight: 500;
}

/* Miniatura 4:5.
 * Plik: `sm_cart` (264×330), srcset włączony — wszystkie klatki 4:5.
 * Kadr trzyma `.ct-media-container`. Blocksy opakowuje <img> w
 * `<div style="width:100%;height:auto">` — znika przez `display: contents`.
 * <img> ma width i height 100%, więc inline `aspect-ratio` z
 * `blocksy_generate_ratio` nie licytuje się ze swoistością. */
body.woocommerce-cart .cart_item td.product-thumbnail {
  width: calc(var(--sm-cart-thumb-lg) + var(--sp-3));
  padding-right: var(--sp-3);
}
body.woocommerce-cart .cart_item td.product-thumbnail .ct-media-container {
  display: block;
  overflow: hidden;
  width: var(--sm-cart-thumb-lg);
  aspect-ratio: 4 / 5;
  border-radius: var(--r-sm);
  background: var(--c-cream);
}
body.woocommerce-cart .cart_item td.product-thumbnail .ct-media-container > div {
  display: contents;
}
body.woocommerce-cart .cart_item td.product-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Nazwa + wybrany format + cena jednostkowa */
body.woocommerce-cart .cart_item td.product-name > a {
  display: block;
  font-weight: 500;
  color: var(--c-text);
  text-decoration: none;
}
body.woocommerce-cart .cart_item td.product-name > a:hover {
  color: var(--c-moss);
}

/* Format: linia wyciszona, mniejsza, pod nazwą. Ten sam wygląd w koszyku,
   mini-koszyku i podsumowaniu na kasie (jeden filtr PHP). */
.sm-cart-item__format {
  display: block;
  margin-top: var(--sp-1);
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-muted);
}
/* Blocksy trzyma tu `ct-hidden-sm ct-hidden-md` z `display: none !important`
   na wąskich ekranach. Nie licytujemy — chowamy na desktopie, a przy ilości
   > 1 sztukę pokazuje `.sm-cart-item__sztuka` (bez klas ukrywających). */
body.woocommerce-cart .cart_item td.product-name > p.price {
  display: none;
}
.sm-cart-item__sztuka {
  display: block;
  margin-top: var(--sp-1);
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-muted);
}

/* `.product-mobile-actions` jest widoczne poniżej lg (Blocksy `ct-hidden-lg`).
   Znak „×" stał między licznikiem a ceną jednostkową; teraz po prawej jest
   kwota wiersza, więc mnożenie kłamałoby. */
@media (max-width: 999.98px) {
  body.woocommerce-cart .ct-product-multiply-symbol {
    display: none;
  }
}

/* Cena jednostkowa w podsumowaniu zamówienia (kasa, ilość > 1). */
.sm-cart-item__unit {
  display: block;
  margin-top: var(--sp-1);
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-muted);
}

/* Licznik ilości Blocksy (`[data-type="type-2"]`) liczy CAŁĄ geometrię z dwóch
 * zmiennych: `--quantity-height` i `--quantity-width`. Strzałki są
 * pozycjonowane absolutnie, a `padding-inline` pola wynika z wysokości —
 * dlatego wolno ruszać tylko te zmienne. Ustawianie wymiarów samym strzałkom
 * albo szerokości pola rozwala kontrolkę: pole traci wewnętrzny margines,
 * a cyfra wychodzi poza widok.
 *
 * Wysokość 48 px daje cel dotykowy całej kontrolki; same strzałki mają wtedy
 * 48/1.8 ≈ 27 px, czyli powyżej minimum 24 px z WCAG 2.5.8 (AA). Wartość
 * pozostaje edytowalna z klawiatury, więc strzałki nie są jedyną drogą. */
body.woocommerce-cart .cart_item .quantity {
  --quantity-height: 48px;
  --quantity-width: 116px;
}
@media (max-width: 767.98px) {
  body.woocommerce-cart .cart_item .product-mobile-actions .quantity {
    /* Blocksy zjeżdża tu do 38 px — poniżej celu dotykowego. */
    --quantity-height: 44px;
    --quantity-width: 104px;
  }
}

/* Usunięcie: link tekstowy, nie czerwony przycisk i nie ikona kosza.
   Etykietę „Usuń” wstawia filtr PHP (`woocommerce_cart_item_remove_link`),
   więc string zostaje w PHP, a nie w `content`. Dostępna nazwa linku to
   nadal aria-label Blocksy („Usuń <produkt> z koszyka”). */
body.woocommerce-cart .cart_item .remove {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 0;
  background: none;
  font: 400 var(--fs-caption) / 1 var(--font-sans);
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: color var(--t-fast) var(--ease);
}
body.woocommerce-cart .cart_item .remove:hover,
body.woocommerce-cart .cart_item .remove:focus-visible {
  background: none;
  color: var(--c-text);
}
body.woocommerce-cart .cart_item td.product-remove {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════
 * 3) KUPON NA KASIE (PAKIET N4)
 *
 * Zwinięcie zależy od `sm-kupon--js` (dokłada JS). Bez JS panel jest
 * widoczny nad formularzem kasy — POST `apply_coupon` działa bez skryptu.
 * Animacja jak pola firmowe: `grid-template-rows 0fr → 1fr`.
 * ══════════════════════════════════════════════════════════════════ */

body.woocommerce-cart .woocommerce-cart-form .actions {
  padding-block: var(--sp-3);
  border-bottom: 0;
}

.sm-kasa-kupon-slot {
  width: 100%;
  margin: 0 0 var(--sp-3);
}
.sm-kasa-kupon .sm-sr-only,
.sm-koszyk-kupon .sm-sr-only,
.sm-kasa-razem .sm-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.sm-kupon__toggle {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  font: 400 var(--fs-small) / 1 var(--font-sans);
  color: var(--c-moss);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.sm-kasa-kupon.sm-kupon--js .sm-kupon__toggle,
.sm-koszyk-kupon.sm-kupon--js .sm-kupon__toggle {
  display: inline-flex;
}
.sm-kupon__toggle:hover {
  color: var(--c-ink);
}
.sm-kasa-kupon.sm-kupon--otwarte .sm-kupon__toggle,
.sm-koszyk-kupon.sm-kupon--otwarte .sm-kupon__toggle {
  color: var(--c-text);
}

body.woocommerce-checkout .sm-kasa-kupon.sm-kupon--js .sm-kupon__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
}
body.woocommerce-checkout .sm-kasa-kupon.sm-kupon--js.sm-kupon--otwarte .sm-kupon__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
body.woocommerce-checkout .sm-kasa-kupon.sm-kupon--js .sm-kupon__wewnatrz {
  min-height: 0;
  overflow: hidden;
}
body.woocommerce-checkout .sm-kasa-kupon.sm-kupon--js.sm-kupon--anim .sm-kupon__panel {
  transition:
    grid-template-rows var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
}

body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  margin: var(--sp-2) 0 0;
  border-bottom: 0;
}
body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .form-row {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  flex: 1 1 12rem;
}
body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .form-row-last {
  flex: 0 0 auto;
}
body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon label:not(.sm-sr-only) {
  display: block;
  margin-bottom: var(--sp-1);
  font: 500 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-text);
}
body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .button {
  min-height: 48px;
  padding-inline: var(--sp-3);
  border: var(--line);
  border-radius: var(--r-full);
  background: transparent;
  font: 500 var(--fs-caption) / 1 var(--font-sans);
  color: var(--c-text);
  text-transform: none;
  transition:
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .button:hover {
  border-color: var(--c-moss);
  background: var(--c-cream);
  color: var(--c-text);
}
body.woocommerce-checkout .sm-kasa-kupon .coupon-error-notice,
body.woocommerce-checkout .sm-kasa-kupon .woocommerce-error {
  display: block;
  width: 100%;
  margin: var(--sp-2) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-moss);
  list-style: none;
}
body.woocommerce-checkout .sm-kasa-kupon .woocommerce-message,
body.woocommerce-checkout .sm-kasa-kupon .woocommerce-info {
  margin: var(--sp-2) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-muted);
}
body.woocommerce-checkout .sm-kasa-kupon .woocommerce-message::before,
body.woocommerce-checkout .sm-kasa-kupon .woocommerce-info::before,
body.woocommerce-checkout .sm-kasa-kupon .woocommerce-error::before {
  content: none;
}
body.woocommerce-checkout #coupon_code.has-error {
  border-color: var(--c-moss);
}

/* ══════════════════════════════════════════════════════════════════
 * 3b) KUPON W KOSZYKU
 *
 * Ten sam rytm i stany co kupon kasy / przełącznik firmy: zwinięcie
 * tylko przy `sm-kupon--js`. Bez JS panel zostaje odsłonięty.
 * Formularz jest samodzielny (poza `form.woocommerce-cart-form`).
 * ══════════════════════════════════════════════════════════════════ */

body.woocommerce-cart .sm-koszyk-kupon.sm-kupon--js .sm-kupon__panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
}
body.woocommerce-cart .sm-koszyk-kupon.sm-kupon--js.sm-kupon--otwarte .sm-kupon__panel {
  grid-template-rows: 1fr;
  opacity: 1;
}
body.woocommerce-cart .sm-koszyk-kupon.sm-kupon--js .sm-kupon__wewnatrz {
  min-height: 0;
  overflow: hidden;
}
body.woocommerce-cart .sm-koszyk-kupon.sm-kupon--js.sm-kupon--anim .sm-kupon__panel {
  transition:
    grid-template-rows var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease);
}

body.woocommerce-cart .sm-koszyk-kupon form.woocommerce-form-coupon {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: flex-end;
  margin: var(--sp-2) 0 0;
  border-bottom: 0;
}
body.woocommerce-cart .sm-koszyk-kupon form.woocommerce-form-coupon .form-row {
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  flex: 1 1 12rem;
}
body.woocommerce-cart .sm-koszyk-kupon form.woocommerce-form-coupon .form-row-last {
  flex: 0 0 auto;
}
body.woocommerce-cart .sm-koszyk-kupon form.woocommerce-form-coupon label:not(.sm-sr-only) {
  display: block;
  margin-bottom: var(--sp-1);
  font: 500 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-text);
}
/* Ten sam kształt co „Wykorzystaj kupon” na kasie: kontur, nie .sm-btn
   (globalny radius 2 px rozjechałby się z kasą). */
body.woocommerce-cart .sm-koszyk-kupon form.woocommerce-form-coupon .button {
  min-height: 48px;
  padding-inline: var(--sp-3);
  border: var(--line);
  border-radius: var(--r-full);
  background: transparent;
  font: 500 var(--fs-caption) / 1 var(--font-sans);
  color: var(--c-text);
  text-transform: none;
  transition:
    border-color var(--t-fast) var(--ease),
    background-color var(--t-fast) var(--ease);
}
body.woocommerce-cart .sm-koszyk-kupon form.woocommerce-form-coupon .button:hover {
  border-color: var(--c-moss);
  background: var(--c-cream);
  color: var(--c-text);
}
body.woocommerce-cart .sm-koszyk-kupon .coupon-error-notice,
body.woocommerce-cart .sm-koszyk-kupon .woocommerce-error {
  display: block;
  width: 100%;
  margin: var(--sp-2) 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-moss);
  list-style: none;
}
body.woocommerce-cart .sm-koszyk-kupon #sm-koszyk-kupon-kod.has-error {
  border-color: var(--c-moss);
}

/* ══════════════════════════════════════════════════════════════════
 * 4) KOSZYK — podsumowanie (sticky na desktopie)
 * ══════════════════════════════════════════════════════════════════ */

/* Blocksy daje temu boksowi ramkę 2 px (`--cart-totals-border`). Hairline
   wystarcza: karta stoi na białym tle, więc ma dostać JEDNĄ warstwę elewacji. */
body.woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
  --cart-totals-border: var(--line);
  --cart-totals-padding: var(--sp-4);
}
body.woocommerce-cart .cart_totals .shop_table,
body.woocommerce-cart .cart_totals .shop_table td,
body.woocommerce-cart .cart_totals .shop_table th {
  border: 0;
}
body.woocommerce-cart .cart_totals .shop_table :is(tr.cart-subtotal, tr.woocommerce-shipping-totals) :is(th, td) {
  padding-block: var(--sp-2);
  font-weight: 400;
}
body.woocommerce-cart .cart_totals .shop_table tr.order-total :is(th, td) {
  padding-top: var(--sp-3);
  border-top: var(--line);
  font-size: var(--fs-body);
}
body.woocommerce-cart .cart_totals .shop_table tr.order-total td {
  text-align: right;
}
body.woocommerce-cart .cart_totals .shop_table tr.cart-subtotal td,
body.woocommerce-cart .cart_totals .shop_table tr.cart-subtotal th {
  color: var(--c-muted);
}
body.woocommerce-cart .cart_totals .shop_table tr.cart-subtotal td {
  text-align: right;
}
body.woocommerce-cart .cart_totals .ct-shipping-heading {
  font: 600 var(--fs-overline) / 1 var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-2);
}
body.woocommerce-cart .cart_totals #shipping_method li label,
body.woocommerce-checkout #shipping_method li label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-small);
}
body.woocommerce-cart .woocommerce-shipping-destination,
body.woocommerce-cart .shipping-calculator-button {
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

/* PAKIET N4 — koszyk bez wyboru dostawy. Liczenie zostaje (pasek progu),
   chowamy wyłącznie UI metod, kalkulatora i wiersza „Łącznie", który po
   ukryciu darmowej dostawy kłamałby jako suma końcowa. */
body.woocommerce-cart .cart_totals #shipping_method,
body.woocommerce-cart .cart_totals .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals .shipping-calculator-button,
body.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
body.woocommerce-cart .cart_totals .ct-shipping-heading,
body.woocommerce-cart .cart_totals tr.woocommerce-shipping-totals,
body.woocommerce-cart .cart_totals tr.shipping,
body.woocommerce-cart .cart_totals tr.order-total,
body.woocommerce-cart .cart_totals tr.alsendo-connect-checkout-locker-point {
  display: none;
}
body.woocommerce-cart .cart_totals tr.sm-koszyk-wysylka td {
  padding-top: var(--sp-2);
  border: 0;
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-muted);
  text-align: left;
}

/* Discount row look. Order is DOM order from cart-totals.php
   (coupons before subtotal) — table roles stay table roles. */
body.woocommerce-cart .cart_totals .shop_table tr.cart-discount :is(th, td) {
  padding-block: var(--sp-2);
  font-weight: 400;
  color: var(--c-text);
}
body.woocommerce-cart .cart_totals .shop_table tr.cart-discount td {
  text-align: right;
}
body.woocommerce-cart .cart_totals .shop_table tr.cart-discount .woocommerce-remove-coupon {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-inline-start: var(--sp-2);
  font: 400 var(--fs-caption) / 1 var(--font-sans);
  color: var(--c-muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
body.woocommerce-cart .cart_totals .shop_table tr.cart-discount .woocommerce-remove-coupon:hover,
body.woocommerce-cart .cart_totals .shop_table tr.cart-discount .woocommerce-remove-coupon:focus-visible {
  color: var(--c-text);
}

/* Kupon nad CTA; hairline jak zgoda regulaminu na kasie. */
body.woocommerce-cart .cart_totals .sm-koszyk-kupon {
  margin: 0;
  padding-bottom: var(--sp-4);
  border-bottom: var(--line);
}
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout {
  margin-top: var(--sp-3);
  padding: 0;
}

/* Pasek progu w podsumowaniu: karta już nosi hairline, więc pasek zostaje
   bez własnej ramki i bez tła — inaczej mamy dwie elewacje w jednym boksie. */
body.woocommerce-cart .cart_totals .sama-free-shipping,
body.woocommerce-checkout .ct-order-review .sama-free-shipping {
  margin: 0 0 var(--sp-3);
  padding: 0 0 var(--sp-3);
  border: 0;
  border-bottom: var(--line);
  border-radius: 0;
  background: transparent;
}

@media (min-width: 1000px) {
  body.woocommerce-cart .ct-woocommerce-cart-form .cart_totals {
    position: sticky;
    top: calc(var(--header-h) + var(--sp-3));
    align-self: start;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * 5) KOSZYK — pasek przypięty u dołu (mobile)
 * ══════════════════════════════════════════════════════════════════ */

.sm-cart-bar {
  display: none;
}

@media (max-width: 999.98px) {
  .sm-cart-bar {
    position: fixed;
    z-index: 100;
    inset: auto 0 0 0;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--c-paper);
    border-top: var(--line);
    /* Jedyny cień w tym arkuszu: warstwa leży NAD treścią i bez cienia
       czyta się jak wklejony w stronę kawałek tabeli. */
    box-shadow: var(--shadow-lift);
    transform: translateY(100%);
    transition: transform var(--t-base) var(--ease);
  }
  .sm-cart-bar.is-visible {
    transform: translateY(0);
  }
  .sm-cart-bar__sum {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 0 0 auto;
  }
  .sm-cart-bar__label {
    font: 600 var(--fs-overline) / 1 var(--font-sans);
    letter-spacing: var(--ls-caps);
    text-transform: uppercase;
    color: var(--c-muted);
  }
  .sm-cart-bar__total {
    font: 500 var(--fs-body) / 1 var(--font-sans);
    font-variant-numeric: tabular-nums;
    color: var(--c-text);
  }
  body.woocommerce-cart .sm-cart-bar__cta {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding-left: var(--sp-3);
    padding-right: var(--sp-3);
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
  }
  /* Wysokość paska (z safe-area) wpisuje sm-cart.js na <html> — nie tokenem. */
  html {
    scroll-padding-bottom: var(--sm-cart-bar-space, 0px);
  }
  body.sm-has-cart-bar {
    padding-bottom: var(--sm-cart-bar-space, 0px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sm-cart-bar {
    transition: none;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * 6) KOSZYK PUSTY — stan celowy, nie awaria
 * ══════════════════════════════════════════════════════════════════ */

/* `wc_empty_cart_message` renderuje komunikat jako banner `.woocommerce-info`
   (szare tło + ikona). Jedno zdanie nie potrzebuje bannera ani ikony. */
body.woocommerce-cart .woocommerce .wc-empty-cart-message {
  padding-top: var(--sp-4);
}
body.woocommerce-cart .woocommerce .cart-empty {
  margin: 0 0 var(--sp-4);
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--c-text);
  text-align: left;
}
body.woocommerce-cart .woocommerce .cart-empty::before {
  content: none;
}
/* Zapas u dołu, żeby jedno zdanie i przycisk nie wisiały nad pustym ekranem.
   Bez ilustracji i bez rekomendacji — sam stan i jedno wyjście. */
body.woocommerce-cart .sm-cart-empty__action {
  margin: 0 0 var(--sp-5);
}
/* Blocksy stroi `.woocommerce a.button` (swoistość 0,2,1) i wygrywa z .sm-btn
   z sm-base — dlatego wymiary trzeba tu powtórzyć wyżej w hierarchii.
   Promień zostaje globalny (2 px, sama-refactor.css). */
body.woocommerce-cart .woocommerce .sm-cart-empty__action a.sm-btn {
  display: inline-flex;
  height: 48px;
  padding-inline: var(--sp-4);
}

/* „Cofnij?” w komunikacie po usunięciu pozycji. Woo renderuje to jako `<a>`,
   które łapie globalny wygląd przycisku — czarna pigułka obok szarego bannera
   jest jedynym miejscem w koszyku z obcym kolorem. Sprowadzamy do linku
   tekstowego, tak jak „Usuń” w wierszu pozycji. */
body.woocommerce-cart .woocommerce .woocommerce-message a.restore-item {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font: 500 var(--fs-caption) / 1.2 var(--font-sans);
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-transform: none;
  letter-spacing: normal;
}
body.woocommerce-cart .woocommerce .woocommerce-message a.restore-item:hover {
  color: var(--c-forest);
  background: transparent;
}

/* ══════════════════════════════════════════════════════════════════
 * 7) KASA
 * ══════════════════════════════════════════════════════════════════ */

/* Etykiety zawsze widoczne (Woo daje je natywnie) — tu tylko rytm i skala.
   Gwiazdka „*” zostaje, bo to jedyny znacznik wymagalności. */
body.woocommerce-checkout .woocommerce form .form-row {
  margin: 0 0 var(--sp-3);
  padding: 0;
}
body.woocommerce-checkout .woocommerce form .form-row label {
  display: block;
  margin-bottom: var(--sp-1);
  font: 500 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-text);
}
body.woocommerce-checkout .woocommerce form .form-row label .optional {
  font-weight: 400;
  color: var(--c-muted);
}
body.woocommerce-checkout .woocommerce form .form-row .required {
  color: var(--c-moss);
  text-decoration: none;
}

/* Pola: hairline, bez wypełnienia, bez cienia w spoczynku. Wysokość i kolory
   idą ze zmiennych ustawionych w sekcji 1. */
body.woocommerce-checkout .woocommerce form .form-row :is(input.input-text, textarea, select) {
  width: 100%;
  box-shadow: none;
}
body.woocommerce-checkout .woocommerce form .form-row textarea {
  --theme-form-field-height: auto;
  min-height: calc(var(--sp-5) + var(--sp-3));
  padding-block: var(--sp-2);
}

/* Błąd walidacji PRZY POLU. Dwa selektory, jeden wygląd:
   `p.checkout-inline-error-message` wstawia sam WooCommerce (ścieżka podstawowa),
   `span.sm-field-error` dokłada `sm-cart.js` tylko dla pól, których natywny
   mechanizm nie objął. */
.sm-field-error,
body.woocommerce-checkout .woocommerce form .form-row p.checkout-inline-error-message {
  display: block;
  margin: var(--sp-1) 0 0;
  padding: 0;
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-error);
}

/* Baner zbiorczy Woo — tło z tokenu, bez hairline i bez cienia (doktryna).
   Tekst --c-error na 10% mix z --c-paper: kontrast > 4.5:1. */
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error,
body.woocommerce-checkout ul.woocommerce-error {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border: 0;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--c-error) 10%, var(--c-paper));
  color: var(--c-error);
  box-shadow: none;
  list-style: none;
}
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error::before,
body.woocommerce-checkout ul.woocommerce-error::before {
  content: none;
}
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error li,
body.woocommerce-checkout ul.woocommerce-error li {
  color: var(--c-error);
}
body.woocommerce-checkout .woocommerce-NoticeGroup .woocommerce-error a,
body.woocommerce-checkout ul.woocommerce-error a {
  color: var(--c-error);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Sticky header nie może przykryć pola, do którego przewijamy po błędzie.
   `scroll-padding` na scrollporcie (html) jest pewniejszy niż sam margin
   na celu — Woo i tak woła `scroll_to_notices()` na `html, body`. */
html:has(body.woocommerce-checkout) {
  scroll-padding-top: calc(var(--header-h) + var(--sp-3));
}
body.woocommerce-checkout .form-row,
body.woocommerce-checkout #terms,
body.woocommerce-checkout #alsendo_geowidget_show_map_classic_checkout,
body.woocommerce-checkout #shipping_method li,
body.woocommerce-checkout .sm-punkt {
  scroll-margin-top: calc(var(--header-h) + var(--sp-3));
}
body.woocommerce-checkout .woocommerce form .form-row.woocommerce-invalid :is(input.input-text, textarea, select) {
  --theme-form-field-border-initial-color: var(--c-moss);
  --theme-form-field-border-width: 2px;
}

/* Podsumowanie zamówienia — hairline zamiast ramki 2 px, jak w koszyku. */
body.woocommerce-checkout .ct-order-review {
  --order-review-border: var(--line);
  --order-review-padding: var(--sp-4);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table {
  border: 0;
  border-collapse: collapse;
  width: 100%;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table :is(td, th) {
  border: 0;
  padding-block: var(--sp-2);
}
/* Pusty wiersz Alsendo. Wtyczka zawsze wstawia <tr> po dostawie; na pierwszym
 * renderze td jest puste (przycisk mapy wychodzi dopiero w AJAX-ie), a przy
 * metodzie bez punktu przycisk zostaje z klasą alsendo-hidden. :empty na <tr>
 * nie zadziała — dzieci (puste th/td albo ukryte inputy) tam są. Chowamy
 * wiersz, gdy nie ma WIDOCZNEGO przycisku wyboru punktu. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.alsendo-connect-checkout-locker-point:not(:has(.alsendo_geowidget_show_map_classic_checkout:not(.alsendo-hidden))) {
  display: none;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.alsendo-connect-checkout-locker-point > th:empty {
  display: none;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item :is(td, th) {
  padding-block: var(--sp-3);
  border-bottom: var(--line);
  vertical-align: top;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table td.product-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table .product-quantity {
  font-weight: 400;
  color: var(--c-muted);
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-subtotal :is(th, td) {
  color: var(--c-muted);
  font-weight: 400;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total,
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.cart-discount {
  display: none;
}
body.woocommerce-checkout .woocommerce-checkout-review-order-table tfoot tr.order-total :is(th, td) {
  padding-top: var(--sp-3);
  border-top: var(--line);
  font-size: var(--fs-body);
}
body.woocommerce-checkout .ct-shipping-heading {
  font: 600 var(--fs-overline) / 1 var(--font-sans);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* Płatność: bez ramek i bez tła. Przy jednej metodzie radio jest ukryte
   przez Woo, więc etykieta ma czytać się jak fakt, nie jak wybór. */
body.woocommerce-checkout #payment {
  border: 0;
  border-radius: 0;
  background: transparent;
}
body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) 0 0;
  border-top: var(--line);
  border-bottom: 0;
  list-style: none;
}
/* Doktryna elewacji: opis metody płatności leży już na `--c-cream`, więc sam
   wiersz z radiem nie może dostawać drugiej ramki. */
body.woocommerce-checkout #payment ul.payment_methods li {
  padding: 0;
  border: 0;
  background: transparent;
}
body.woocommerce-checkout #payment ul.payment_methods li label {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
  font: 500 var(--fs-small) / 1.4 var(--font-sans);
  color: var(--c-text);
}
body.woocommerce-checkout #payment div.payment_box {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  background: var(--c-cream);
  font-size: var(--fs-caption);
  color: var(--c-text);
}
body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-checkout #payment div.payment_box::after {
  content: none;
}
body.woocommerce-checkout #payment div.payment_box p:last-child {
  margin-bottom: 0;
}

/* Zgoda na regulamin — pod podsumowaniem kwot. Hairline daje `.sm-kasa-razem`,
 * więc wrapper zgody nie dokłada drugiej linii. */
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 var(--sp-3);
  padding-top: 0;
  border-top: 0;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper > :empty,
body.woocommerce-checkout #payment .woocommerce-privacy-policy-text:empty {
  display: none;
}
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout .woocommerce-privacy-policy-text {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--c-muted);
}
body.woocommerce-checkout .woocommerce-privacy-policy-text a {
  color: var(--c-moss);
}
body.woocommerce-checkout .form-row.validate-required > label.woocommerce-form__label-checkbox,
body.woocommerce-checkout .woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  min-height: 44px;
  font: 400 var(--fs-small) / 1.5 var(--font-sans);
  color: var(--c-text);
}
/* PAKIET J · 1 — etykieta zgody.
 *
 * Szablon Woo `checkout/terms.php` wypisuje w etykiecie TRZY węzły:
 * `<input>`, `<span class="…checkbox-text">`, `&nbsp;` i `<abbr class="required">*</abbr>`.
 * Przy `display: flex` (reguła wyżej, dla pozostałych checkboxów Woo) gwiazdka
 * staje się osobnym kaflem i przy dwuliniowej treści ucieka nad tekst, a `&nbsp;`
 * dodaje czwarty, pusty kafel. Dlatego tu wracamy do układu blokowego: treść
 * z dwoma linkami i gwiazdką płynie jak zdanie, a kwadrat wypada z przepływu.
 *
 * Cel dotykowy: klika się CAŁA etykieta (natywne wiązanie label↔input, bez JS),
 * a jej wysokość to 12 + wiersz + 12 ≥ 44 px. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label.woocommerce-form__label-for-checkbox {
  display: block;
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: 12px 0 12px 32px;
  font: 400 var(--fs-small) / var(--lh-body) var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
body.woocommerce-checkout
  .woocommerce-terms-and-conditions-wrapper
  label.woocommerce-form__label-for-checkbox
  input.woocommerce-form__input-checkbox {
  position: absolute;
  inset-inline-start: 0;
  /* Wyrównanie do pierwszego wiersza, nie do środka bloku — przy zawijaniu
     treści kwadrat zostaje przy słowie „Akceptuję”. */
  top: 13px;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--c-forest);
  flex: none;
}
/* Gwiazdka: ten sam kolor co treść, bez dekoracji `abbr` z przeglądarki. */
body.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper abbr.required {
  border: 0;
  text-decoration: none;
  color: var(--c-text);
  cursor: inherit;
}
body.woocommerce-checkout .woocommerce-terms-and-conditions-checkbox-text a {
  color: var(--c-moss);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
/* Reguła dla wklejonej w kasę kopii regulaminu została usunięta w pakiecie J
   razem z samą kopią (`wc_terms_and_conditions_page_content` odhaczone
   w `inc/cart-checkout.php` — regulamin otwiera się w nowej karcie). */

/* CTA: klasy .sm-btn dokłada filtr `woocommerce_order_button_html`. Tło i pełną
   szerokość domykamy przez `#place_order` (id wygrywa z regułą Blocksy dla
   `button.alt` bez `!important`); promień zostaje globalny — 2 px. */
body.woocommerce-checkout #payment .form-row.place-order {
  margin: 0;
  padding: 0;
}
body.woocommerce-checkout #place_order {
  width: 100%;
  min-height: 48px;
  margin-top: var(--sp-2);
  background: var(--c-forest);
  color: var(--c-paper);
}
body.woocommerce-checkout #place_order:hover,
body.woocommerce-checkout #place_order:active {
  background: var(--c-ink);
  color: var(--c-paper);
}

/* Logowanie na kasie jest zwinięte przez Woo; zostaje wyciszone,
   żeby nie konkurowało z formularzem zamówienia. */
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}
body.woocommerce-checkout .woocommerce-form-login-toggle .woocommerce-info::before,
body.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info::before {
  content: none;
}

/* ══════════════════════════════════════════════════════════════════
 * 8) MOBILE — pełna szerokość, brak poziomego scrolla
 * ══════════════════════════════════════════════════════════════════ */

@media (max-width: 767.98px) {
  /* Woo/Blocksy układa pola w dwie kolumny (`form-row-first/last`);
     na 390 px dwie kolumny znaczą pola po ~160 px. */
  body.woocommerce-checkout .woocommerce form :is(.form-row-first, .form-row-last, .form-row-wide) {
    float: none;
    width: 100%;
    margin-inline: 0;
  }

  /* Poniżej 1000 px Blocksy ukrywa komórki `product-quantity/subtotal/remove`
   * i przenosi te akcje do `.product-mobile-actions` w komórce nazwy.
   * PAKIET N4: miniatura 56 px (zmierzone % szerokości wiersza na 390 px
   * w tools/pakietN4-shots.mjs). Dwa rzędy w komórce nazwy: góra nazwa,
   * dół licznik + kwota + Usuń. Cele 44 px już są na ilości i „Usuń”. */
  body.woocommerce-cart .cart_item td.product-thumbnail {
    width: calc(var(--sm-cart-thumb) + var(--sp-3));
    padding-right: var(--sp-3);
  }
  body.woocommerce-cart .cart_item td.product-thumbnail .ct-media-container {
    width: var(--sm-cart-thumb);
  }
  body.woocommerce-cart .product-mobile-actions {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    width: 100%;
    margin-top: var(--sp-2);
  }

  /* Kupon wyszedł z koszyka — gap siatki zostaje rytmem między tabelą a kartą. */
  body.woocommerce-cart .ct-woocommerce-cart-form {
    gap: var(--sp-4);
  }
  body.woocommerce-cart .woocommerce-cart-form .actions {
    padding-bottom: 0;
  }
  body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon {
    flex-direction: column;
    align-items: stretch;
  }
  body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .form-row,
  body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .form-row-last {
    flex: 1 1 auto;
    width: 100%;
  }
  body.woocommerce-checkout .sm-kasa-kupon form.checkout_coupon .button {
    width: 100%;
  }
}

/* ══════════════════════════════════════════════════════════════════
 * 9) KASA — PAKIET N
 *
 * Cztery rzeczy: przełącznik „Zakup na firmę", karty wyboru (dostawa
 * i płatność), miniatura w podsumowaniu, paleta panelu ING.
 *
 * Wzorzec karty wyboru jest ŚWIADOMIE ten sam co `.sm-format` na karcie
 * produktu (sm-product.css): hairline między wierszami, kółko radio jako
 * nośnik stanu, nazwa po lewej i kwota po prawej, zaznaczony wiersz na
 * `--c-cream` z WYGASZONYM hairline'em. Zlecenie prosiło o „obramowanie
 * + delikatne tło" — doktryna elewacji mówi: tło ALBO hairline, nigdy dwa
 * naraz, więc zaznaczenie niesie tło, a hairline schodzi na przezroczysty.
 * Stan jest czytelny bez koloru, bo kropka radia zostaje.
 * ══════════════════════════════════════════════════════════════════ */

/* ── 9a) PRZEŁĄCZNIK „ZAKUP NA FIRMĘ" ─────────────────────────────
 * Zwinięcie zależy od klasy, którą dokłada JS (`sm-firma--js`). Bez JS reguła
 * nie ma na czym zadziałać i pola zostają widoczne — to jedyny bezpieczny
 * kierunek, bo serwer wymaga ich wyłącznie przy włączonym przełączniku.
 *
 * Animacja: `grid-template-rows: 0fr → 1fr` plus opacity. `height: auto`
 * nie interpoluje, więc go nie ruszamy. JS owija dzieci w `.sm-firma__wewnatrz`
 * (wymóg 0fr: jedno dziecko z `overflow: hidden`). `grid-auto-rows: 0fr`
 * chowa też komunikat błędu, gdyby Woo dokleił go obok wrappera.
 * Klasa `sm-firma--anim` wchodzi dopiero po pierwszej klatce, żeby start
 * strony nie animował zwinięcia. */
body.woocommerce-checkout form.checkout.sm-firma--js .sm-firma__pole {
  display: grid;
  grid-template-rows: 0fr;
  grid-auto-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  margin-bottom: 0;
}
body.woocommerce-checkout form.checkout.sm-firma--js.sm-firma--otwarte .sm-firma__pole {
  grid-template-rows: 1fr;
  grid-auto-rows: auto;
  opacity: 1;
  margin-bottom: var(--sp-3);
}
body.woocommerce-checkout form.checkout.sm-firma--js .sm-firma__pole > * {
  min-height: 0;
}
body.woocommerce-checkout form.checkout.sm-firma--js .sm-firma__wewnatrz {
  overflow: hidden;
}
/* Clearfix Woo (`.form-row::before/::after { display: table }`) staje się
 * dodatkowym trackiem siatki i kradnie `1fr` — animowałby pusty ::before,
 * a treść skakałaby w rzędzie `auto`. */
body.woocommerce-checkout form.checkout.sm-firma--js .sm-firma__pole::before,
body.woocommerce-checkout form.checkout.sm-firma--js .sm-firma__pole::after {
  content: none;
}
body.woocommerce-checkout form.checkout.sm-firma--js.sm-firma--anim .sm-firma__pole {
  transition:
    grid-template-rows var(--t-base) var(--ease),
    opacity var(--t-base) var(--ease),
    margin-bottom var(--t-base) var(--ease);
}

/* Wiersz przełącznika: hairline u góry oddziela dane osobowe od danych firmy.
   Jedna linia, bez tła i bez ramki — to nadal ten sam formularz. */
body.woocommerce-checkout .woocommerce form #billing_na_firme_field {
  margin: 0 0 var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--line);
}
body.woocommerce-checkout .woocommerce form #billing_na_firme_field label.checkbox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 44px;
  margin: 0;
  font: 500 var(--fs-small) / 1.4 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
body.woocommerce-checkout .woocommerce form #billing_na_firme_field input.input-checkbox {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  /* Kwadrat z fajką: stan czyta się kształtem, nie samym kolorem.
     --c-forest na --c-paper to 12,4:1, więc kontrast kontrolki nie jest
     problemem nawet przy wymaganym minimum 3:1. */
  accent-color: var(--c-forest);
}

/* PUSTA kontrolka musi być widoczna. Blocksy rysuje niezaznaczony checkbox
 * i niezaznaczone radio hairline'em w kolorze linii (#EFEDE5 na bieli — około
 * 1,17:1), czyli kontrolka praktycznie nie istnieje, dopóki się jej nie kliknie.
 * Stan zaznaczony jest pełnym zielonym kwadratem, więc różnica kształtu jest
 * wyraźna — brakowało tylko punktu wyjścia.
 *
 * Nie walczymy o swoistość, tylko podmieniamy ZMIENNĄ, z której Blocksy bierze
 * ten kolor. Powód jest konkretny: lista selektorów Blocksy zawiera
 * `#ship-to-different-address-checkbox`, więc dla TEGO jednego pola reguła ma
 * swoistość ID i przebiłaby każdy zapis oparty na klasach — jedyną alternatywą
 * byłby `!important` albo dopisywanie kolejnych ID do naszego selektora.
 * Zmienna działa też szerzej: te same deklaracje Blocksy obsługują radia
 * dostawy i płatności, więc jednym wierszem dostają widoczną granicę wszystkie
 * kontrolki wyboru w kasie.
 *
 * `--c-muted` (#667066) na bieli daje 5,15:1 (zmierzone), z zapasem nad
 * wymaganym 3:1 dla granic kontrolek (WCAG 1.4.11). Zakres: wyłącznie kasa. */
body.woocommerce-checkout {
  --theme-form-selection-field-initial-color: var(--c-muted);
}

/* ── 9b) KARTY DOSTAWY ────────────────────────────────────────────
 * Etykietę składa filtr `woocommerce_cart_shipping_method_full_label`
 * (inc/kasa.php) na dwa spany. Cena po prawej stronie WIERSZA, nie
 * przyklejona do nazwy. */
/* Nagłówek grupy („PRZESYŁKA") stoi w komórce kwot, więc dziedziczył wyrównanie
   do prawej i wisiał nad listą po przeciwnej stronie niż „Produkty" i „Łącznie".
   Trzy etykiety tej samej rangi mają startować z jednej linii. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table .ct-shipping-heading {
  margin-bottom: var(--sp-2);
  text-align: left;
}
body.woocommerce-checkout #shipping_method {
  display: flex;
  flex-direction: column;
  margin: 0 calc(var(--sp-2) * -1);
  padding: 0;
  border-top: var(--line);
  list-style: none;
  /* Lista siedzi w komórce kwot, a tę Woo wyrównuje do prawej — bez tego
     zapisu druga linia dłuższej nazwy („Paczkomat InPost – Odbiór w punkcie"
     na 390 px) uciekała pod prawą krawędź. Zlecenie mówi wprost: wyrównanie
     do lewej. */
  text-align: left;
}
body.woocommerce-checkout #shipping_method li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  padding: 0 var(--sp-2);
  border-bottom: var(--line);
  transition: background-color var(--t-fast) var(--ease);
}
body.woocommerce-checkout #shipping_method li input.shipping_method {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-forest);
}
/* Cel dotykowy to CAŁY wiersz, nie krążek: etykieta rozpycha się na resztę
   szerokości, a wiązanie label↔input jest natywne, więc działa bez JS. */
body.woocommerce-checkout #shipping_method li label {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding-block: var(--sp-2);
  font: 400 var(--fs-small) / 1.35 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
body.woocommerce-checkout #shipping_method li:last-child {
  border-bottom: 0;
}
body.woocommerce-checkout #shipping_method li:has(input:checked) {
  background: var(--c-cream);
  border-bottom-color: transparent;
}
body.woocommerce-checkout #shipping_method li:hover:not(:has(input:checked)) {
  background: var(--c-cream);
}
body.woocommerce-checkout #shipping_method li label:focus-visible,
body.woocommerce-checkout #shipping_method li input:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 1px;
}
/* Nazwa zabiera całą wolną szerokość i ZAWIJA SIĘ W SWOJEJ KOLUMNIE, zamiast
   zrzucać kwotę do drugiego wiersza. Dzięki temu układ „nazwa po lewej, kwota
   po prawej" trzyma się na każdej szerokości i nie potrzebuje wariantu
   mobilnego. */
.sm-metoda__nazwa {
  flex: 1 1 auto;
  min-width: 0;
}
.sm-metoda__cena {
  flex: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sm-metoda__cena--gratis {
  color: var(--c-muted);
  font-variant-numeric: normal;
}
/* Punkt odbioru — przeniesiony JS-em do zaznaczonej karty. */
body.woocommerce-checkout #shipping_method li .sm-punkt {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-2);
  padding-inline-start: calc(18px + var(--sp-2));
}
body.woocommerce-checkout #shipping_method li .sm-punkt[hidden] {
  display: none;
}
body.woocommerce-checkout #shipping_method li .sm-punkt__dane {
  margin: 0;
  font: 400 var(--fs-caption) / 1.45 var(--font-sans);
  color: var(--c-text);
}
body.woocommerce-checkout #shipping_method li .sm-punkt__dane[hidden] {
  display: none;
}
body.woocommerce-checkout #shipping_method li .sm-punkt__nazwa {
  display: block;
  font-weight: 600;
}
body.woocommerce-checkout #shipping_method li .sm-punkt__adres {
  display: block;
  color: var(--c-muted);
}
body.woocommerce-checkout #shipping_method li .sm-punkt .sm-field-error {
  margin: 0;
}
/* Alsendo trzyma własny blok z inline #249b20 — chowamy go, pokazujemy .sm-punkt__dane. */
body.woocommerce-checkout #alsendo-selected-parcel-machine,
body.woocommerce-checkout .alsendo_after_rate_description {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
/* Przycisk mapy: ID bije `.button.alt` wtyczki bez !important. Akcja wtórna. */
body.woocommerce-checkout #alsendo_geowidget_show_map_classic_checkout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin: 0;
  padding: 0 var(--sp-3);
  border: var(--line);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--c-text);
  font: 500 var(--fs-caption) / 1 var(--font-sans);
  text-transform: none;
  cursor: pointer;
  box-shadow: none;
}
body.woocommerce-checkout #alsendo_geowidget_show_map_classic_checkout:hover {
  border-color: var(--c-moss);
  background: var(--c-paper);
  color: var(--c-text);
}

/* Podsumowanie kwot nad regulaminem: hairline nad i pod, bez tła, bez cienia. */
body.woocommerce-checkout .sm-kasa-razem {
  margin: 0 0 var(--sp-3);
  padding: var(--sp-3) 0;
  border-top: var(--line);
  border-bottom: var(--line);
  background: transparent;
  box-shadow: none;
}
body.woocommerce-checkout .sm-kasa-razem__tabela {
  width: 100%;
  border: 0;
  border-collapse: collapse;
}
body.woocommerce-checkout .sm-kasa-razem__tabela :is(th, td) {
  padding: var(--sp-2) 0;
  border: 0;
  font: 400 var(--fs-small) / 1.4 var(--font-sans);
  color: var(--c-text);
  vertical-align: top;
}
body.woocommerce-checkout .sm-kasa-razem__tabela th {
  font-weight: 400;
  text-align: left;
  padding-inline-end: var(--sp-3);
}
body.woocommerce-checkout .sm-kasa-razem__tabela td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
body.woocommerce-checkout .sm-kasa-razem__wiersz--razem :is(th, td) {
  font-weight: 600;
  color: var(--c-ink);
}
body.woocommerce-checkout .sm-kasa-razem__wiersz--razem .includes_tax {
  display: block;
  font-weight: 400;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}
body.woocommerce-checkout .sm-kasa-razem .woocommerce-remove-coupon {
  font-size: var(--fs-caption);
  font-weight: 400;
  color: var(--c-moss);
}

.sm-metoda__cena .tax_label {
  color: var(--c-muted);
}

/* ── 9c) KARTY PŁATNOŚCI ──────────────────────────────────────────
 * Ten sam wzorzec co dostawa. Opis metody (`.payment_box`) zostaje w środku
 * karty, więc TRACI własne tło — na `--c-cream` karty byłby drugą warstwą
 * tego samego koloru, czyli niewidoczną ramką wokół niczego. */
body.woocommerce-checkout #payment ul.payment_methods {
  margin: 0 calc(var(--sp-2) * -1) 0;
  padding: 0;
  border-top: var(--line);
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-2);
  border-bottom: var(--line);
  transition: background-color var(--t-fast) var(--ease);
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > input.input-radio {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--c-forest);
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label {
  display: flex;
  flex: 1 1 auto;
  /* Blocksy daje tej etykiecie `flex-wrap: wrap` (zmierzone sondą), więc dłuższa
     nazwa kanału („BLIK, karty, szybkie przelewy") zrzucała logo bramki do
     drugiej linii i rozstrajała cały wiersz. Zawijanie wyłączamy: nazwa ma się
     łamać W SWOJEJ kolumnie, logo zostaje przy prawej krawędzi. `.payment_box`
     jest RODZEŃSTWEM etykiety, nie jej dzieckiem, więc nic tu nie traci
     możliwości zawinięcia. */
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding-block: var(--sp-2);
  font: 400 var(--fs-small) / 1.35 var(--font-sans);
  color: var(--c-text);
  cursor: pointer;
}
/* Logo bramki: stała wysokość, żeby cztery różne pliki nie skakały w kolumnie. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > label img {
  flex: none;
  width: auto;
  max-width: 84px;
  max-height: 22px;
  margin: 0;
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:last-child {
  border-bottom: 0;
}
/* Tło idzie ZA radiem bramki (`name="payment_method"`), nie za dowolnym
 * `input:checked` w wierszu. Panel BLIK-a ING zostawia w `.payment_box`
 * ukryte radio `ingpay-selected-channel`, które zostaje zaznaczone po
 * wyborze Kart — stary `:has(input:checked)` malował wtedy dwa wiersze. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:has(> input[name="payment_method"]:checked) {
  background: var(--c-cream);
}
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method:hover:not(:has(> input[name="payment_method"]:checked)) {
  background: var(--c-cream);
}
/* Panel opisu należy do ZAZNACZONEJ karty: wspólne tło (cream z <li>)
 * i wcięcie pod etykietą (szerokość radia + szczelina). Bez przezroczystego
 * hairline'u na zaznaczeniu — zdejmowanie dolnej kreski sprawiało, że
 * kolejne metody wyglądały jak dzieci rozwiniętego BLIK-a. Hairline zostaje
 * separatorem listy, cream osobno niesie stan wyboru. */
body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method > div.payment_box {
  flex: 1 1 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 0 0 var(--sp-2) calc(18px + var(--sp-2));
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: var(--fs-caption);
  color: var(--c-muted);
}

/* ── 9d) PANEL ING — nasza paleta, ICH treść ──────────────────────
 * `plugins/ingpay/assets/css/ingpay-gateway.css` maluje panel na pomarańcz
 * ING (#ff6200). Panel jest server-side HTML-em, nie iframem, więc da się go
 * ostylować bez ingerencji we wtyczkę. Treść klauzuli o regulaminie ING
 * zostaje NIETKNIĘTA (wymóg banku) — zmieniamy wyłącznie typografię i kolor.
 *
 * Podkreślenie odnośników wtyczka wyłącza z `!important`, a w spoczynku
 * ma zostać nośnik inny niż sam kolor. Zamiast licytować się `!important`
 * (licznik ma nie rosnąć) dajemy `border-bottom` — to nie `text-decoration`,
 * więc reguła wtyczki go nie dotyczy. Na `:hover` wtyczka dokłada własne
 * podkreślenie, dlatego wtedy nasz border gaśnie: w obu stanach dokładnie
 * jedna linia. */
body.woocommerce-checkout .ingpay-regulations {
  margin-top: var(--sp-2);
  font: 400 var(--fs-caption) / var(--lh-body) var(--font-sans);
  color: var(--c-muted);
}
body.woocommerce-checkout .ingpay-regulations a {
  border-bottom: 1px solid currentColor;
  color: var(--c-moss);
}
body.woocommerce-checkout .ingpay-regulations a:hover,
body.woocommerce-checkout .ingpay-regulations a:focus-visible {
  border-bottom-color: transparent;
  color: var(--c-ink);
}
/* Pole kodu BLIK — renderowane, gdy w panelu bramki włączona jest opcja
   „Wyświetl pole na stronie zamówienia" (dziś: wyłączona). */
body.woocommerce-checkout .ingpay-blik-code-container input {
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
body.woocommerce-checkout .ingpay-blik-code-container input:focus {
  border-color: var(--c-moss);
}
/* Wybór kanału płatności. Geometrię (83×50 px) wtyczka trzyma na `!important`
   i tego nie ruszamy — tylko kolor obwódki stanu. */
body.woocommerce-checkout .ingpay-payment-method-container .ingpay-channels li label {
  border-color: var(--c-line);
}
body.woocommerce-checkout .ingpay-payment-method-container .ingpay-channels li label.ingpay-active,
body.woocommerce-checkout .ingpay-payment-method-container .ingpay-channels li label.ingpay-c-active:hover {
  border-color: var(--c-ink);
}

/* Jedyny kanał nie jest wyborem. Przy BLIK-u wtyczka rysuje listę kanałów
 * z jedną pozycją — ramka z logo BLIK-a, bez tekstu, pod wierszem, w którym to
 * samo logo już stoi. Klikanie w nią nic nie zmienia, bo jest zaznaczona z góry
 * (`ingpay-active` w payment_method_list.php).
 *
 * Chowamy WYŁĄCZNIE pozycję samotną (`:only-child`) — listy z wieloma kanałami
 * (np. banki w PBL) zostają, bo tam wybór istnieje. `display: none` nie rusza
 * ani zaznaczenia, ani klas: walidacja wtyczki sprawdza obecność klasy
 * `ingpay-active` (assets/js/ingpay-gateway.js: validate_channels), a jQuery
 * serializuje ukryte pola razem z resztą formularza. */
body.woocommerce-checkout .ingpay-payment-method-container .ingpay-channels li:only-child {
  display: none;
}

/* ── 9e) MINIATURA W PODSUMOWANIU ─────────────────────────────────
 * Miniatura wypada z przepływu, a komórka dostaje wyściółkę na jej szerokość.
 * Dlaczego nie flex/grid na komórce: `review-order.php` dokłada za nazwą
 * `&nbsp;` i `<strong class="product-quantity">`, których nie da się objąć
 * filtrem. Każdy układ oparty na rodzeństwie rozpadłby się na tych węzłach —
 * pozycja absolutna jest odporna na to, ile ich będzie. */
body.woocommerce-checkout .woocommerce-checkout-review-order-table tr.cart_item td.product-name {
  position: relative;
  padding-left: calc(var(--sm-cart-thumb) + var(--sp-3));
}
.sm-podsum__thumb {
  position: absolute;
  inset-inline-start: 0;
  top: var(--sp-3);
  overflow: hidden;
  width: var(--sm-cart-thumb);
  height: calc(var(--sm-cart-thumb) * 5 / 4);
  border-radius: var(--r-sm);
  background: var(--c-cream);
}
/* Blocksy opakowuje obrazek w `<div style="width:100%;height:auto">` (lazy load,
 * `data-mm-observed`) — ale robi to WYŁĄCZNIE we fragmentach z
 * `wc-ajax=update_order_review`, nie przy pierwszym renderowaniu strony. Bez tej
 * reguły miniatura wchodziła jako 56×70, a po pierwszej zmianie metody dostawy
 * kurczyła się do 56×56, bo `height: 100%` liczyło się od opakowania o wysokości
 * auto. Ten sam chwyt co w koszyku (sekcja 2): opakowanie znika z układu przez
 * `display: contents`, więc `<img>` mierzy się od kafla 4:5, a inline `height`
 * przestaje mieć do czego się odnosić — bez licytacji swoistości. */
.sm-podsum__thumb > div {
  display: contents;
}
.sm-podsum__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 9f) RZĄD ZAUFANIA POD CTA ────────────────────────────────────
 * Trzy fakty z konfiguracji sklepu, nie trzy odznaki. Bez ikon: pod
 * przyciskiem „Kupuję i płacę" ma zostać cisza, a nie druga warstwa grafiki. */
.sm-kasa-fakty {
  display: flex;
  flex-wrap: wrap;
  margin: var(--sp-3) 0 0;
  padding: 0;
  list-style: none;
  font: 400 var(--fs-caption) / 1.5 var(--font-sans);
  color: var(--c-muted);
}
.sm-kasa-fakty__item + .sm-kasa-fakty__item::before {
  content: "·";
  margin: 0 var(--sp-2);
  speak: never;
}

/* ── 9g) LINKI PRAWNE POD KASĄ ────────────────────────────────────
 * Adresy buduje PHP; strona bez publikacji nie dostaje pozycji. */
.sm-kasa-linki {
  margin-top: var(--sp-4);
  padding-top: var(--sp-3);
  border-top: var(--line);
}
.sm-kasa-linki__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.woocommerce-checkout .sm-kasa-linki__item a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: var(--fs-caption);
  color: var(--c-muted);
  text-decoration: none;
}
body.woocommerce-checkout .sm-kasa-linki__item a:hover,
body.woocommerce-checkout .sm-kasa-linki__item a:focus-visible {
  color: var(--c-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* ── 9h) ŁAGODNA PODPOWIEDŹ (numer domu) ──────────────────────────
 * Nie jest błędem, więc nie wygląda jak błąd: ten sam stopień co komunikat
 * walidacji, ale kolor wyciszony i bez zmiany ramki pola. */
.sm-podpowiedz {
  display: block;
  margin: var(--sp-1) 0 0;
  padding: 0;
  font: 400 var(--fs-caption) / 1.4 var(--font-sans);
  color: var(--c-muted);
}

/* ── 9i) POLE HASŁA NA KASIE ──────────────────────────────────────
 * Woo dokleja `button.show-password-input` w `woocommerce.js`. Blocksy
 * maluje oko maską TYLKO na form.login / .register / .edit-account /
 * .lost_reset_password — kasa to `form.checkout`, więc zostawał nagi
 * przycisk UA (szary kwadrat `buttonface`) w przepływie: opakowanie
 * `span.password-input` jest `display: inline` i 44×44 spadało POD pole.
 * To nie jest ikona menedżera haseł ani rozszerzenia — to nasz (Woo)
 * przycisk bez pozycjonowania. Bez JS przycisku nie ma, pole zostaje
 * `type=password`. */
body.woocommerce-checkout .woocommerce-account-fields [class*="password-input"] {
  position: relative;
  display: block;
}
body.woocommerce-checkout .woocommerce-account-fields [class*="password-input"] .show-password-input {
  position: absolute;
  inset-inline-end: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--c-muted);
  background-image: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.9,11.6C23.7,11.2,19.5,3,12,3S0.3,11.2,0.1,11.6c-0.1,0.3-0.1,0.6,0,0.9C0.3,12.8,4.5,21,12,21s11.7-8.2,11.9-8.6 C24,12.2,24,11.8,23.9,11.6zM12,19c-5.4,0-8.9-5.4-9.9-7c0.9-1.6,4.5-7,9.9-7c5.4,0,8.9,5.4,9.9,7C20.9,13.6,17.4,19,12,19zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8zM12,14c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,13.1,13.1,14,12,14z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M23.9,11.6C23.7,11.2,19.5,3,12,3S0.3,11.2,0.1,11.6c-0.1,0.3-0.1,0.6,0,0.9C0.3,12.8,4.5,21,12,21s11.7-8.2,11.9-8.6 C24,12.2,24,11.8,23.9,11.6zM12,19c-5.4,0-8.9-5.4-9.9-7c0.9-1.6,4.5-7,9.9-7c5.4,0,8.9,5.4,9.9,7C20.9,13.6,17.4,19,12,19zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8zM12,14c-1.1,0-2-0.9-2-2c0-1.1,0.9-2,2-2c1.1,0,2,0.9,2,2C14,13.1,13.1,14,12,14z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: 14px 14px;
  mask-size: 14px 14px;
}
body.woocommerce-checkout .woocommerce-account-fields [class*="password-input"] input[type="text"] ~ .show-password-input,
body.woocommerce-checkout .woocommerce-account-fields [class*="password-input"] .show-password-input.display-password {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.9,5.2C13.3,5.1,12.6,5,12,5c-5.4,0-8.9,5.4-9.9,7c0.5,0.9,1.1,1.8,1.8,2.5C4.3,15,4.2,15.6,3.8,16 c-0.2,0.2-0.4,0.2-0.6,0.2c-0.3,0-0.6-0.1-0.8-0.4c-0.9-1-1.6-2.2-2.3-3.4c-0.2-0.3-0.2-0.6,0-0.9C0.3,11.2,4.5,3,12,3c0.8,0,1.6,0.1,2.3,0.3c0.5,0.1,0.9,0.7,0.7,1.2C14.9,5,14.4,5.3,13.9,5.2z M0.3,22.3l22-22c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L19.4,6c1.8,1.6,3.3,3.4,4.5,5.5c0.2,0.3,0.2,0.6,0,0.9C23.7,12.8,19.5,21,12,21c-2.1,0-4.1-0.6-5.8-1.8l-4.5,4.5C1.5,23.9,1.3,24,1,24s-0.5-0.1-0.7-0.3C-0.1,23.3-0.1,22.7,0.3,22.3zM14,11.4L11.4,14c0.2,0.1,0.4,0.1,0.6,0.1c0.5,0,1-0.2,1.4-0.5c0.4-0.4,0.6-0.9,0.6-1.4C14.1,11.9,14,11.7,14,11.4zM12,19c5.4,0,8.9-5.4,9.9-7c-1-1.8-2.3-3.3-3.9-4.6L15.5,10c0.4,0.7,0.6,1.5,0.6,2.3c0,1.1-0.5,2.1-1.3,2.8c-0.7,0.7-1.7,1.1-2.7,1.1c0,0-0.1,0-0.1,0c-0.7,0-1.4-0.3-2-0.6l-2.3,2.3C9,18.6,10.5,19,12,19z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.9,5.2C13.3,5.1,12.6,5,12,5c-5.4,0-8.9,5.4-9.9,7c0.5,0.9,1.1,1.8,1.8,2.5C4.3,15,4.2,15.6,3.8,16 c-0.2,0.2-0.4,0.2-0.6,0.2c-0.3,0-0.6-0.1-0.8-0.4c-0.9-1-1.6-2.2-2.3-3.4c-0.2-0.3-0.2-0.6,0-0.9C0.3,11.2,4.5,3,12,3c0.8,0,1.6,0.1,2.3,0.3c0.5,0.1,0.9,0.7,0.7,1.2C14.9,5,14.4,5.3,13.9,5.2z M0.3,22.3l22-22c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4L19.4,6c1.8,1.6,3.3,3.4,4.5,5.5c0.2,0.3,0.2,0.6,0,0.9C23.7,12.8,19.5,21,12,21c-2.1,0-4.1-0.6-5.8-1.8l-4.5,4.5C1.5,23.9,1.3,24,1,24s-0.5-0.1-0.7-0.3C-0.1,23.3-0.1,22.7,0.3,22.3zM14,11.4L11.4,14c0.2,0.1,0.4,0.1,0.6,0.1c0.5,0,1-0.2,1.4-0.5c0.4-0.4,0.6-0.9,0.6-1.4C14.1,11.9,14,11.7,14,11.4zM12,19c5.4,0,8.9-5.4,9.9-7c-1-1.8-2.3-3.3-3.9-4.6L15.5,10c0.4,0.7,0.6,1.5,0.6,2.3c0,1.1-0.5,2.1-1.3,2.8c-0.7,0.7-1.7,1.1-2.7,1.1c0,0-0.1,0-0.1,0c-0.7,0-1.4-0.3-2-0.6l-2.3,2.3C9,18.6,10.5,19,12,19z'/%3E%3C/svg%3E");
}
/* Woo layout (gdyby kiedyś wrócił do kaskady) rysuje oko na ::before —
   przy masce na samym przycisku byłoby podwójne. */
body.woocommerce-checkout .woocommerce-account-fields [class*="password-input"] .show-password-input::before {
  content: none;
}
body.woocommerce-checkout .woocommerce-account-fields [class*="password-input"] input::-ms-reveal {
  display: none;
}
body.woocommerce-checkout .woocommerce-account-fields,
body.woocommerce-checkout .woocommerce-account-fields .create-account {
  margin: 0;
  padding: 0;
}

/* ── 9j) ODSTĘP KOLUMNY WYSYŁKI ───────────────────────────────────
 * Blocksy twardo daje `#customer_details .col-2 { margin-top: 40px }`
 * — surowy piksel, większy niż rytm pól (`--sp-3`). Wiersze formularza
 * już mają `margin-bottom: var(--sp-3)`, więc zdejmujemy ten zapas;
 * przerwa między hasłem a „Wysłać na inny adres?" wraca do tokenu. */
body.woocommerce-checkout #customer_details .col-2 {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  body.woocommerce-checkout #shipping_method li,
  body.woocommerce-checkout #payment ul.payment_methods > li.wc_payment_method,
  body.woocommerce-checkout form.checkout.sm-firma--js.sm-firma--anim .sm-firma__pole,
  body.woocommerce-checkout .sm-kasa-kupon.sm-kupon--js.sm-kupon--anim .sm-kupon__panel {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  /* Na wąskim ekranie zostają dwie kolumny, tylko ciaśniej. Wcześniej stało tu
     `flex-wrap: wrap` i kwota schodziła pod nazwę — wyglądało to jak druga,
     osobna informacja, a dłuższa nazwa dodatkowo łamała się do prawej krawędzi.
     Zawijanie przeniesione do samej nazwy (sekcja 9b). */
  body.woocommerce-checkout #shipping_method li label {
    gap: var(--sp-2);
  }
}