/* QuestSystem — KOSZYK (#2c) i CHECKOUT (#2d) + mini-koszyk.
   Szablony zostają domyślne (koszyk: klasyczny shortcode Woo w stronie
   Elementora; checkout: WooCommerce Blocks). Ten plik zmienia WYŁĄCZNIE wygląd.

   BEZPIECZEŃSTWO BRAMKI PŁATNOŚCI — czytaj przed edycją:
   1. Zero `display:none` na polach, radiach, checkboxach, przyciskach,
      notice'ach i overlayach płatności. Wygaszamy tylko dekoracyjne
      pseudo-elementy Woo (hairline ::after), bo dublują nasze ramki 3px.
   2. Zero `transform` / `filter` / `contain` / `will-change` na KONTENERACH
      checkoutu (main, sidebar, step, payment-method) — tworzą containing block
      i rozbijają `position:fixed` w modalach PayU/Przelewy24/Stripe.
   3. Zero `position:fixed` w tej sekcji (brak sticky CTA na checkoucie —
      pasek fixed potrafi przykryć overlay bramki). Sticky tylko sidebar.
   4. `.wc-block-components-notices__snackbar` — nie ruszamy position/z-index/
      bottom/left/display; wyłącznie ramka wewnętrznego bannera.
   5. Checkbox zgód: Woo Blocks rysuje własny `<svg class="…checkbox__mark">`.
      Malujemy tylko pudełko inputa i `fill` znacznika — żadnych background-image
      z fajką, inaczej byłyby dwa ptaszki.

   UWAGA O KASKADZIE (dług do spłacenia poza tym plikiem): reguły w @layer mają
   niższe pierwszeństwo niż reguły BEZ warstwy. Arkusze WooCommerce
   (`woocommerce-general`, `wc-blocks-style`) są bezwarstwowe, więc przy remisie
   wygrywają niezależnie od specyficzności. Właściwe lekarstwo to owinięcie CSS
   wtyczek w warstwę po stronie PHP (filtr na `style_loader_tag` →
   `@layer vendor { @import … }`), a nie !important tutaj. Selektory poniżej są
   celowo równie lub bardziej specyficzne niż oryginały Woo, żeby zadziałały
   od razu po takim owinięciu. */

/* BEZ warstwy @layer — świadomie. Arkusze WooCommerce, CookieYes i Elementora
   są bezwarstwowe, a reguła bez warstwy zawsze bije regułę w warstwie, choćby
   ta była bardziej specyficzna. Ten plik musi wygrywać z CSS wtyczek, więc gra
   na tym samym poziomie: o remisie decyduje kolejność wczytania, a nasze arkusze
   są spięte zależnościami i drukowane po wtyczkach (priorytet 20). */
  /* =========================================================================
     A. KOSZYK — klasyczny shortcode [woocommerce_cart] (ekran #2c)
     ========================================================================= */

  /* ---------- A.1 Układ ---------- */

  /* wpautop owija shortcode w <p>; po auto-zamknięciu tagu zostaje pusty akapit. */
  .woocommerce p:empty,
  .woocommerce + p:empty { display: none; }

  /* `.woocommrece-cart-content` — literówka jest w realnym szablonie motywu,
     nie w naszym kodzie. To jedyny wspólny rodzic formularza i podsumowania. */
  .woocommrece-cart-content { margin-block-start: 20px; }
  .woocommerce-cart-form { margin: 0; min-width: 0; }
  .cart-collaterals { min-width: 0; }

  /* Pasek darmowej dostawy renderuje się wewnątrz formularza
     (hook `woocommerce_before_cart_table`) — zostaje nad listą pozycji. */
  .woocommerce-cart-form > .qs-freeship { margin-block-end: 20px; }

  /* Etykiety czytane wyłącznie przez czytniki (label kuponu, label ilości).
     Definiujemy sami, bo nie polegamy na arkuszach spoza motywu. */
  .woocommerce .screen-reader-text {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }

  @media (min-width: 992px) {
    .woocommrece-cart-content {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 380px;
      gap: 28px;
      align-items: start;
    }
    /* Dzieci przychodzą z float/szerokością treści — bez tego formularz kurczy
       się do ~270px, a podsumowanie wychodzi poza kolumnę. */
    .woocommrece-cart-content > .woocommerce-cart-form,
    .woocommrece-cart-content > .cart-collaterals {
      width: 100%;
      max-width: none;
      min-width: 0;
      float: none;
    }
    /* Cross-sell renderuje się w `.cart-collaterals`; w kolumnie 380px byłby
       ściśnięty, więc przy jego obecności wracamy do jednej kolumny. */
    .woocommrece-cart-content:has(.cross-sells) { display: block; }
    .woocommrece-cart-content:has(.cross-sells) .cart_totals {
      max-width: 460px;
      margin-inline-start: auto;
    }
  }

  /* ---------- A.2 Lista pozycji: jeden blok w ramce 3px ---------- */

  .shop_table.woocommerce-cart-form__contents {
    width: 100%;
    margin: 0;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
  }

  /* Do 991px tabela pracuje w trybie kart, a rolę nagłówków przejmują etykiety
     `data-title` (patrz A.11). Od 992px `<thead>` wraca — nie chowamy go na
     stałe, bo to jedyne powiązanie kolumn z wartościami dla czytników. */
  .shop_table.woocommerce-cart-form__contents thead { display: none; }

  .shop_table.woocommerce-cart-form__contents tbody tr {
    border: 0;
    border-top: var(--qs-border) solid var(--qs-ink);
  }
  .shop_table.woocommerce-cart-form__contents tbody tr:first-child { border-top: 0; }

  .shop_table.woocommerce-cart-form__contents tbody td {
    border: 0;
    padding: 16px 14px;
    vertical-align: middle;
    background: var(--qs-surface);
  }

  /* ---------- A.3 Miniatura 96px w ramce ----------
     Obrazy w tabeli mają STAŁĄ szerokość i wysokość w px, więc `height:100%`
     na <img> odnosi się do jawnie wymiarowanego rodzica — wzorzec .qs-media
     (pozycjonowanie absolutne) nie jest tu potrzebny. */
  .shop_table.woocommerce-cart-form__contents td.product-thumbnail a,
  .shop_table.woocommerce-cart-form__contents td.product-thumbnail > img {
    display: block;
    box-sizing: border-box;
    width: 96px;
    height: 96px;
    padding: 5px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    object-fit: contain;
  }
  .shop_table.woocommerce-cart-form__contents td.product-thumbnail a > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* ---------- A.4 Nazwa, wariant, status, usuwanie ---------- */

  .shop_table.woocommerce-cart-form__contents td.product-name > a {
    display: block;
    font-weight: 800;
    font-size: 17px;
    line-height: 1.25;
    color: var(--qs-ink);
  }
  .shop_table.woocommerce-cart-form__contents td.product-name > a:hover { color: var(--qs-accent-text); }

  .shop_table.woocommerce-cart-form__contents td.product-name dl.variation,
  .shop_table.woocommerce-cart-form__contents td.product-name .backorder_notification {
    margin: 6px 0 0;
    font-family: var(--qs-mono);
    font-size: 11.5px;
    line-height: 1.5;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .shop_table.woocommerce-cart-form__contents td.product-name dl.variation dt,
  .shop_table.woocommerce-cart-form__contents td.product-name dl.variation dd {
    display: inline;
    margin: 0;
    font-weight: 400;
    color: var(--qs-muted);
  }
  .shop_table.woocommerce-cart-form__contents td.product-name dl.variation dd p { display: inline; margin: 0; }
  /* każdy wariant od nowej linii, bez pustego wiersza między parami */
  .shop_table.woocommerce-cart-form__contents td.product-name dl.variation dd::after {
    content: "";
    display: block;
  }

  .shop_table.woocommerce-cart-form__contents .product-remove { margin-block-start: 8px; }
  .shop_table.woocommerce-cart-form__contents .product-remove a.remove {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 2px 0;
    background: none;
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qs-danger);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .shop_table.woocommerce-cart-form__contents .product-remove a.remove:hover {
    background: none;
    color: var(--qs-ink);
  }

  /* ---------- A.5 Kwoty w foncie display ---------- */

  .shop_table.woocommerce-cart-form__contents td.product-price .woocommerce-Price-amount,
  .shop_table.woocommerce-cart-form__contents td.product-subtotal .woocommerce-Price-amount {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--qs-ink);
  }
  .shop_table.woocommerce-cart-form__contents td.product-price ins,
  .shop_table.woocommerce-cart-form__contents td.product-subtotal ins {
    background: none;
    text-decoration: none;
  }
  .shop_table.woocommerce-cart-form__contents td.product-price del,
  .shop_table.woocommerce-cart-form__contents td.product-subtotal del {
    display: inline-block;
    margin-block-start: 2px;
  }
  .shop_table.woocommerce-cart-form__contents td.product-price del .woocommerce-Price-amount,
  .shop_table.woocommerce-cart-form__contents td.product-subtotal del .woocommerce-Price-amount {
    font-family: var(--qs-sans);
    font-size: 13px;
    color: var(--qs-muted);
  }
  .shop_table.woocommerce-cart-form__contents .ecomus-price-saved,
  .shop_table.woocommerce-cart-form__contents .em-price-unit,
  .shop_table.woocommerce-cart-form__contents .tax_label {
    display: block;
    margin-block-start: 4px;
    font-family: var(--qs-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .shop_table.woocommerce-cart-form__contents .ecomus-price-saved { color: var(--qs-success-text); }

  /* ---------- A.6 Stepper ilości ---------- */

  .woocommerce-cart .quantity {
    display: inline-flex;
    align-items: stretch;
    background: var(--qs-surface);
  }
  .woocommerce-cart .quantity input.qty {
    box-sizing: border-box;
    width: 68px;
    min-width: 68px;
    min-height: 46px;
    padding: 8px 6px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 15px;
    text-align: center;
    color: var(--qs-ink);
    appearance: textfield;
    -moz-appearance: textfield;
  }
  /* strzałki spinnera nie pasują do płaskiego steppera */
  .woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
  .woocommerce-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
  }
  .woocommerce-cart .quantity input.qty:focus {
    outline: none;
    border-color: var(--qs-accent-text);
    background: var(--qs-tint);
  }
  /* samo tło tint (#FEF3E8 vs biel = 1.06:1) nie jest widocznym wskaźnikiem
     fokusu (WCAG 2.4.7 / 1.4.11) — ring rysujemy jako inset (5.0:1). */
  .woocommerce-cart .quantity input.qty:focus-visible {
    box-shadow: inset 0 0 0 var(--qs-border) var(--qs-accent-text);
  }

  /* Segmenty − / + (jeśli szablon je renderuje) dzielą krawędź z inputem. */
  .woocommerce-cart .quantity .ecomus-qty-button,
  .woocommerce-cart .quantity .decrease,
  .woocommerce-cart .quantity .increase {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 44px;
    min-height: 46px;
    padding: 0;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    color: var(--qs-ink);
    cursor: pointer;
  }
  .woocommerce-cart .quantity .ecomus-qty-button::before { content: none; }   /* okrągły „hover pill" motywu */
  .woocommerce-cart .quantity .ecomus-qty-button:hover { background: var(--qs-tint); }
  .woocommerce-cart .quantity .decrease { margin-inline-end: calc(var(--qs-border) * -1); }
  .woocommerce-cart .quantity .increase { margin-inline-start: calc(var(--qs-border) * -1); }

  .shop_table.woocommerce-cart-form__contents .ecomus-product-quantity__text {
    display: block;
    margin-block-start: 6px;
    font-family: var(--qs-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--qs-muted);
  }

  /* ---------- A.7 Wiersz akcji: kupon + „Zaktualizuj koszyk" ---------- */

  .shop_table.woocommerce-cart-form__contents td.actions {
    padding: 18px 14px;
    border-top: var(--qs-border) solid var(--qs-ink);
    background: var(--qs-bg);
  }
  .shop_table.woocommerce-cart-form__contents td.actions .coupon {
    display: flex;
    align-items: stretch;
    max-width: 420px;
    margin-block-end: 14px;
  }
  /* Kupon: input w stylu .qs-field (klasy nie dodamy — to markup Woo). */
  .shop_table.woocommerce-cart-form__contents td.actions #coupon_code {
    flex: 1 1 auto;
    box-sizing: border-box;
    min-width: 0;
    min-height: 46px;
    padding: 11px 14px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-mono);
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .shop_table.woocommerce-cart-form__contents td.actions #coupon_code::placeholder { color: var(--qs-muted); }
  .shop_table.woocommerce-cart-form__contents td.actions #coupon_code:focus {
    outline: none;
    border-color: var(--qs-accent-text);
    box-shadow: inset 0 0 0 1px var(--qs-accent-text);
  }
  .shop_table.woocommerce-cart-form__contents td.actions .coupon .button {
    flex: none;
    min-height: 46px;
    /* wspólna krawędź 3px z inputem zamiast dwóch stykających się ramek */
    margin-inline-start: calc(var(--qs-border) * -1);
    padding: 12px 20px;
    background: var(--qs-ink);
    color: var(--qs-bg);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color .12s, color .12s;
  }
  .shop_table.woocommerce-cart-form__contents td.actions .coupon .button:hover {
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
  }

  /* „Zaktualizuj koszyk" — wariant outline */
  .shop_table.woocommerce-cart-form__contents td.actions button[name="update_cart"],
  .shop_table.woocommerce-cart-form__contents td.actions .em-button-update-cart {
    min-height: 46px;
    padding: 12px 22px;
    background: var(--qs-surface);
    color: var(--qs-ink);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color .12s, color .12s;
  }
  .shop_table.woocommerce-cart-form__contents td.actions button[name="update_cart"]:hover,
  .shop_table.woocommerce-cart-form__contents td.actions .em-button-update-cart:hover {
    background: var(--qs-ink);
    color: var(--qs-bg);
  }
  .shop_table.woocommerce-cart-form__contents td.actions button[name="update_cart"][disabled],
  .shop_table.woocommerce-cart-form__contents td.actions .em-button-update-cart.disabled {
    opacity: .35;
    box-shadow: none;
  }
  /* Przy opcji „update_cart_page_auto" szablon rodzica (ecomus/woocommerce/cart/
     cart.php) dokleja przyciskowi klasę `hidden`, a `.hidden{display:none}` żyje
     WYŁĄCZNIE w arkuszu rodzica, który zdejmujemy w qs_dequeue_parent_assets().
     Bez tej reguły „Zaktualizuj koszyk" pokazuje się mimo auto-aktualizacji.
     Selektor celowo wąski — żadnej globalnej `.hidden` w motywie nie tworzymy. */
  .shop_table.woocommerce-cart-form__contents td.actions .button.hidden,
  .shop_table.woocommerce-cart-form__contents td.actions .em-button-update-cart.hidden { display: none; }
  /* efekt „shine" motywu nadrzędnego nie pasuje do płaskiego stylu */
  .woocommerce-cart-form .button::after,
  .cart_totals .button::after { content: none; }

  /* „← Kontynuuj zakupy" — link renderowany z hooka, z tłem w atrybucie style="".
     !important tylko po to, żeby przebić styl inline (jedyny wyjątek w pliku). */
  .woocommerce-cart-form > div > a.button {
    display: inline-block;
    min-height: 46px;
    padding: 13px 22px;
    background: var(--qs-ink) !important;
    color: var(--qs-bg);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .woocommerce-cart-form > div > a.button:hover {
    background: var(--qs-accent-text) !important;
    color: var(--qs-on-accent);
  }

  /* Uwagi do zamówienia */
  .woocommerce-cart-form .notes { margin-block-start: 22px; }
  .woocommerce-cart-form .notes label {
    display: block;
    margin-block-end: 8px;
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .woocommerce-cart-form .notes textarea {
    width: 100%;
    padding: 11px 14px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-size: 15px;
    color: var(--qs-ink);
  }
  .woocommerce-cart-form .notes textarea:focus {
    outline: none;
    border-color: var(--qs-accent-text);
  }

  /* ---------- A.8 Podsumowanie koszyka ---------- */

  .cart_totals {
    margin: 24px 0 0;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
  }
  .cart_totals > h2 {
    margin: 0;
    padding: 18px 20px;
    border-bottom: var(--qs-border) solid var(--qs-ink);
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .cart_totals table.shop_table {
    width: 100%;
    margin: 0;
    border: 0;
  }
  .cart_totals table.shop_table th,
  .cart_totals table.shop_table td {
    border: 0;
    padding: 13px 20px;
    vertical-align: top;
  }
  .cart_totals table.shop_table th {
    width: 46%;
    text-align: left;
    font-family: var(--qs-sans);
    font-weight: 700;
    font-size: 14.5px;
    color: var(--qs-body);
  }
  .cart_totals table.shop_table td { text-align: right; }

  .cart_totals tr.cart-subtotal th, .cart_totals tr.cart-subtotal td,
  .cart_totals tr.cart-discount th, .cart_totals tr.cart-discount td,
  .cart_totals tr.fee th, .cart_totals tr.fee td,
  .cart_totals tr.tax-total th, .cart_totals tr.tax-total td,
  .cart_totals tr.tax-rate th, .cart_totals tr.tax-rate td {
    border-bottom: var(--qs-border) solid var(--qs-line);
  }
  .cart_totals tr.cart-subtotal td .woocommerce-Price-amount,
  .cart_totals tr.cart-discount td .woocommerce-Price-amount,
  .cart_totals tr.fee td .woocommerce-Price-amount,
  .cart_totals tr.tax-total td .woocommerce-Price-amount,
  .cart_totals tr.tax-rate td .woocommerce-Price-amount {
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 15px;
    color: var(--qs-ink);
  }
  .cart_totals tr.cart-discount td .woocommerce-Price-amount { color: var(--qs-success-text); }

  /* Suma „Razem z VAT" */
  .cart_totals tr.order-total th,
  .cart_totals tr.order-total td {
    padding-block: 16px 6px;
    border-top: var(--qs-border) solid var(--qs-ink);
    vertical-align: baseline;
  }
  .cart_totals tr.order-total th {
    font-weight: 800;
    font-size: 16px;
    color: var(--qs-ink);
  }
  .cart_totals tr.order-total td strong { font-weight: 400; }
  .cart_totals tr.order-total td .woocommerce-Price-amount {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--qs-ink);
  }
  .cart_totals tr.order-total small.includes_tax {
    display: block;
    margin-block-start: 6px;
    font-family: var(--qs-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .cart_totals tr.order-total small.includes_tax .woocommerce-Price-amount {
    font-family: inherit;
    font-size: 11px;
    color: inherit;
  }

  /* CTA „Przejdź do kasy" — pełna szerokość, akcent */
  .cart_totals .wc-proceed-to-checkout {
    margin: 0;
    padding: 6px 20px 22px;
  }
  .cart_totals .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    min-height: 56px;
    padding: 16px;
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .12s, color .12s;
  }
  .cart_totals .wc-proceed-to-checkout a.checkout-button:hover {
    background: var(--qs-ink);
    color: var(--qs-bg);
  }

  /* ---------- A.9 Metody wysyłki jako lista kafli ---------- */

  /* Wiersz wysyłki dostaje pełną szerokość panelu — w układzie th|td lista
     kafli dusiłaby się w ~200px. `<th>` zostaje (jest nagłówkiem wiersza),
     a dubel z <h3 class="shipping-title"> chowamy. */
  .cart_totals tr.woocommerce-shipping-totals {
    display: block;
    border-bottom: var(--qs-border) solid var(--qs-line);
  }
  .cart_totals tr.woocommerce-shipping-totals th,
  .cart_totals tr.woocommerce-shipping-totals td {
    display: block;
    width: auto;
    text-align: left;
  }
  .cart_totals tr.woocommerce-shipping-totals th { padding-block: 14px 0; }
  .cart_totals tr.woocommerce-shipping-totals td { padding-block: 10px 14px; }
  .cart_totals .shipping-title { display: none; }   /* dubluje <th> tego samego wiersza */

  .woocommerce-shipping-methods {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .woocommerce-shipping-methods li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 12px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-line);
    border-radius: var(--qs-radius);
    transition: border-color .12s, background-color .12s;
  }
  .woocommerce-shipping-methods li:hover { border-color: var(--qs-ink); }
  .woocommerce-shipping-methods li:has(input.shipping_method:checked) {
    background: var(--qs-tint);
    border-color: var(--qs-ink);
    box-shadow: var(--qs-shadow-sm);
  }

  /* Kwadratowe radio: wypełnienie akcentowe rysujemy jako inset ring, nie
     pseudo-elementem — na natywnym <input> ::before bywa pomijane. */
  .woocommerce-shipping-methods li input.shipping_method {
    flex: none;
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    cursor: pointer;
  }
  .woocommerce-shipping-methods li input.shipping_method:checked {
    background: var(--qs-accent-text);
    box-shadow: inset 0 0 0 var(--qs-border) var(--qs-surface);
  }
  .woocommerce-shipping-methods li input.shipping_method:focus-visible {
    outline: var(--qs-border) solid var(--qs-accent-text);
    outline-offset: 2px;
  }

  .woocommerce-shipping-methods li label {
    flex: 1;
    margin: 0;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1.35;
    color: var(--qs-ink);
    cursor: pointer;
  }
  .woocommerce-shipping-methods li input.shipping_method:checked + label { font-weight: 800; }
  .woocommerce-shipping-methods li label .woocommerce-Price-amount {
    font-family: var(--qs-sans);
    font-weight: 800;
    color: var(--qs-ink);
  }
  /* „Bezpłatnie": kwota nie jest renderowana przy koszcie 0 — łapiemy oba
     przypadki. Zieleń typograficzna (--qs-success-text = 5.4:1 na bieli). */
  .woocommerce-shipping-methods li:not(:has(.woocommerce-Price-amount)) label,
  .woocommerce-shipping-methods li input.shipping_method[value*="free_shipping"] + label,
  .woocommerce-shipping-methods li input.shipping_method[value*="free_shipping"] + label .woocommerce-Price-amount {
    color: var(--qs-success-text);
    font-weight: 800;
  }

  .woocommerce-shipping-destination {
    margin: 12px 0 0;
    font-family: var(--qs-mono);
    font-size: 11px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .woocommerce-shipping-destination strong { font-weight: 400; color: var(--qs-ink); }

  /* Kalkulator wysyłki */
  .woocommerce-shipping-calculator { margin-block-start: 12px; }
  .woocommerce-shipping-calculator a.shipping-calculator-button {
    display: inline-block;
    min-height: 24px;
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qs-accent-text);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .woocommerce-shipping-calculator a.shipping-calculator-button:hover { color: var(--qs-ink); }
  .woocommerce-shipping-calculator .form-row { margin: 0 0 10px; padding: 0; }
  .woocommerce-shipping-calculator label {
    display: block;
    margin-block-end: 6px;
    font-family: var(--qs-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .woocommerce-shipping-calculator input.input-text,
  .woocommerce-shipping-calculator select {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-size: 14.5px;
    color: var(--qs-ink);
  }
  .woocommerce-shipping-calculator input.input-text:focus,
  .woocommerce-shipping-calculator select:focus {
    outline: none;
    border-color: var(--qs-accent-text);
  }
  .woocommerce-shipping-calculator .button {
    min-height: 46px;
    padding: 12px 20px;
    background: var(--qs-bg);
    color: var(--qs-ink);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
    font-weight: 800;
    font-size: 13.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .woocommerce-shipping-calculator .button:hover { background: var(--qs-ink); color: var(--qs-bg); }

  /* ---------- A.10 Cross-sell i pusty koszyk ---------- */

  .cart-collaterals .cross-sells { margin-block-start: 30px; }
  .cart-collaterals .cross-sells > h2 {
    margin: 0 0 16px;
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--qs-ink);
  }

  .woocommerce .em-cart-text-empty,
  .woocommerce p.cart-empty,
  .woocommerce .wc-empty-cart-message {
    margin: 26px 0 0;
    padding: 44px 28px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    text-align: center;
    color: var(--qs-ink);
  }
  .woocommerce .em-cart-text-empty h5 {
    margin: 0 0 12px;
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 34px;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .woocommerce .em-cart-text-empty p { margin: 0; font-size: 15.5px; color: var(--qs-body); }
  .woocommerce .return-to-shop {
    margin: 22px 0 40px;
    padding: 0;
    text-align: center;
  }
  .woocommerce .return-to-shop a.button {
    display: inline-block;
    min-height: 46px;
    padding: 14px 26px;
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .woocommerce .return-to-shop a.button:hover { background: var(--qs-ink); color: var(--qs-bg); }

  /* ---------- A.11 Do 991px: wiersze tabeli jako karty ----------
     Motyw nie wczytuje `woocommerce-smallscreen.css`, więc etykiety kolumn
     rysujemy sami z atrybutu `data-title`. Etykieta i treść ZAWSZE do lewej.
     Granica 991px pokrywa się z granicą układu dwukolumnowego — poniżej niej
     podsumowanie i tak stoi pod listą, więc tabela nigdy nie zostaje bez
     nagłówków ani bez etykiet. */
  @media (max-width: 991px) {
    .woocommrece-cart-content { margin-block-start: 16px; }

    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item {
      display: grid;
      grid-template-columns: 76px minmax(0, 1fr);
      grid-template-areas:
        "thumb name"
        "thumb price"
        "qty   total";
      gap: 12px 14px;
      padding: 14px;
      align-items: center;
    }
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td {
      display: block;
      width: auto;
      min-width: 0;
      padding: 0;
      text-align: left;
    }
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-thumbnail { grid-area: thumb; align-self: start; }
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-name     { grid-area: name;  align-self: end; }
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-price    { grid-area: price; align-self: start; }
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-quantity { grid-area: qty; }
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-subtotal { grid-area: total; }

    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-price::before,
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-quantity::before,
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-subtotal::before {
      content: attr(data-title);
      display: block;
      margin-block-end: 5px;
      font-family: var(--qs-mono);
      font-size: 10px;
      letter-spacing: .05em;
      text-transform: uppercase;
      text-align: left;
      color: var(--qs-muted);
    }
    /* nazwa i miniatura mówią same za siebie */
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-name::before,
    .shop_table.woocommerce-cart-form__contents tbody tr.cart_item td.product-thumbnail::before,
    .shop_table.woocommerce-cart-form__contents tbody td.actions::before { content: none; }

    .shop_table.woocommerce-cart-form__contents td.product-thumbnail a,
    .shop_table.woocommerce-cart-form__contents td.product-thumbnail > img { width: 76px; height: 76px; padding: 4px; }
    .shop_table.woocommerce-cart-form__contents td.product-name > a { font-size: 15.5px; }
    .shop_table.woocommerce-cart-form__contents td.product-price .woocommerce-Price-amount { font-size: 18px; }
    .shop_table.woocommerce-cart-form__contents td.product-subtotal .woocommerce-Price-amount { font-size: 22px; }

    .shop_table.woocommerce-cart-form__contents td.actions { display: block; padding: 14px; }
    .cart_totals { margin-block-start: 26px; box-shadow: var(--qs-shadow-md); }
  }

  /* ---------- A.12 Telefon (≤767px): kontrolki na pełną szerokość ---------- */
  @media (max-width: 767px) {
    .shop_table.woocommerce-cart-form__contents td.actions .coupon { flex-wrap: wrap; max-width: none; }
    .shop_table.woocommerce-cart-form__contents td.actions #coupon_code { flex: 1 1 100%; }
    .shop_table.woocommerce-cart-form__contents td.actions .coupon .button {
      flex: 1 1 100%;
      /* przy zawinięciu przycisk siada POD inputem — wspólna krawędź w pionie */
      margin: calc(var(--qs-border) * -1) 0 0;
    }
    .shop_table.woocommerce-cart-form__contents td.actions button[name="update_cart"],
    .shop_table.woocommerce-cart-form__contents td.actions .em-button-update-cart { width: 100%; }
    .woocommerce-cart-form > div > a.button { display: block; width: 100%; text-align: center; }

    .cart_totals > h2 { font-size: 23px; padding: 16px; }
    .cart_totals table.shop_table th,
    .cart_totals table.shop_table td { padding: 11px 16px; }
    .cart_totals tr.woocommerce-shipping-totals th { padding-block: 12px 0; }
    .cart_totals tr.order-total th { font-size: 15px; }
    .cart_totals tr.order-total td .woocommerce-Price-amount { font-size: 26px; }
    .cart_totals .wc-proceed-to-checkout { padding: 6px 16px 18px; }
    .cart_totals .wc-proceed-to-checkout a.checkout-button { font-size: 15px; padding: 14px 16px; }

    .woocommerce .em-cart-text-empty,
    .woocommerce p.cart-empty,
    .woocommerce .wc-empty-cart-message { padding: 30px 18px; box-shadow: var(--qs-shadow-md); }
    .woocommerce .em-cart-text-empty h5 { font-size: 27px; }
    .woocommerce .return-to-shop a.button { display: block; width: 100%; }
  }

  /* Desktop: wraca nagłówek kolumn i stałe proporcje — bez `table-layout:fixed`
     nazwa produktu łamie się na kilka linii obok szerokich kolumn kwotowych. */
  @media (min-width: 992px) {
    .shop_table.woocommerce-cart-form__contents thead { display: table-header-group; }
    .shop_table.woocommerce-cart-form__contents thead tr { border-bottom: var(--qs-border) solid var(--qs-ink); }
    .shop_table.woocommerce-cart-form__contents thead th {
      padding: 12px 14px;
      background: var(--qs-bg);
      border: 0;
      font-family: var(--qs-mono);
      font-weight: 400;
      font-size: 11px;
      letter-spacing: .04em;
      text-transform: uppercase;
      text-align: left;
      color: var(--qs-muted);
    }
    .shop_table.woocommerce-cart-form__contents thead th.product-subtotal { text-align: right; }

    /* `table-layout: fixed` czyta szerokości z PIERWSZEGO wiersza, czyli z
       `<thead>` — dlatego wymiary siedzą na `th`, a `td` tylko je powtarza. */
    .shop_table.woocommerce-cart-form__contents { table-layout: fixed; }
    .shop_table.woocommerce-cart-form__contents th.product-thumbnail,
    .shop_table.woocommerce-cart-form__contents td.product-thumbnail { width: 126px; }
    .shop_table.woocommerce-cart-form__contents th.product-name,
    .shop_table.woocommerce-cart-form__contents td.product-name     { width: auto; }
    .shop_table.woocommerce-cart-form__contents th.product-price,
    .shop_table.woocommerce-cart-form__contents td.product-price    { width: 118px; }
    .shop_table.woocommerce-cart-form__contents th.product-quantity,
    .shop_table.woocommerce-cart-form__contents td.product-quantity { width: 176px; }
    .shop_table.woocommerce-cart-form__contents th.product-subtotal,
    .shop_table.woocommerce-cart-form__contents td.product-subtotal { width: 132px; }
    .shop_table.woocommerce-cart-form__contents td.product-subtotal { text-align: right; }
  }

  /* =========================================================================
     B. CHECKOUT — WooCommerce Blocks (ekran #2d)
     Selektory celowo bez `display:none`; kolejność i widoczność kontrolek
     zostaje taka, jaką wyrenderował React.
     ========================================================================= */

  .wp-block-woocommerce-checkout,
  .wc-block-checkout {
    font-family: var(--qs-sans);
    color: var(--qs-ink);
  }

  /* ---------- B.1 Layout: main + sidebar ---------- */

  /* Mobile-first: kolumna, podsumowanie POD formularzem. Kolejność wymuszamy
     jawnie, bo Woo odwraca layout regułą
     `:has(> :last-child.wp-block-woocommerce-checkout-fields-block)`. */
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main {
    box-sizing: border-box;
    order: 1;
    width: 100%;
    padding-right: 0;
  }
  .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
    box-sizing: border-box;
    order: 2;
    width: 100%;
    margin-block-start: 20px;
    padding: 18px 16px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
  }

  @media (min-width: 992px) {
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout {
      flex-direction: row;
      align-items: flex-start;   /* warunek działania sticky w kontenerze flex */
    }
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__main {
      width: 65%;
      padding-right: 28px;
    }
    .wp-block-woocommerce-checkout .wc-block-components-sidebar-layout .wc-block-checkout__sidebar {
      width: 35%;
      margin-block-start: 0;
      padding: 22px 24px;
      box-shadow: var(--qs-shadow);
      position: sticky;
      top: 24px;
      align-self: flex-start;    /* bez tego flex rozciąga item i sticky nie łapie */
    }
    /* Woo ma własny wariant `.is-sticky` bez wartości `top` — uzupełniamy. */
    .wp-block-woocommerce-checkout .wc-block-checkout__sidebar.is-sticky { top: 24px; }
  }

  /* ---------- B.2 Kroki jako panele ---------- */

  .wc-block-components-form .wc-block-components-checkout-step,
  .wp-block-woocommerce-checkout .wc-block-components-checkout-step {
    box-sizing: border-box;
    margin: 0 0 20px;
    padding: 20px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
  }

  /* Dekoracyjne hairline'y Woo (1px + box-shadow ±50vw) dublują nasze ramki
     3px i wychodzą na całą szerokość viewportu — gasimy same pseudo-elementy. */
  .wc-block-components-form .wc-block-components-checkout-step::after { content: none; }
  .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__container::after { content: none; }

  .wc-block-components-checkout-step__heading {
    margin: 0 0 6px;
    align-items: baseline;
  }
  .wc-block-components-checkout-step__title,
  .wc-block-components-checkout-step .wc-block-components-title {
    margin: 0 12px 0 0;
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .wc-block-components-checkout-step__description {
    margin: 0 0 16px;
    font-family: var(--qs-mono);
    font-size: 11.5px;
    line-height: 1.45;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .wc-block-components-checkout-step__content {
    font-size: 14.5px;
    color: var(--qs-body);
  }

  /* Numer kroku: Woo wiesza cyfrę absolutnie na `left:-24px` względem tytułu —
     w panelu z paddingiem 20px trafiałaby dokładnie w ramkę. */
  .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number { padding-left: 52px; }
  .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
    font-family: var(--qs-display);
    color: var(--qs-accent-text);
    left: -28px;
  }

  /* ---------- B.3 Pola tekstowe + etykieta pływająca ----------
     Mechanika Woo: label jest pozycjonowany absolutnie i przy `.is-active`
     jedzie do `top:0` ze `scale(.75)`. U nas podniesiona etykieta wchodzi
     w NACIĘCIE górnej ramki, więc dostaje białe tło i poziomy padding.
     Wypisujemy WSZYSTKIE typy inputów (number/password też!), bo reguła Woo
     ma selektor typu `.form .text-input input[type]` — pominięty typ dostałby
     ramkę 1.5px i pole „skakałoby" o 1.5px przy wejściu w focus. */
  .wc-block-components-text-input.wc-block-components-text-input input[type="text"],
  .wc-block-components-text-input.wc-block-components-text-input input[type="email"],
  .wc-block-components-text-input.wc-block-components-text-input input[type="tel"],
  .wc-block-components-text-input.wc-block-components-text-input input[type="url"],
  .wc-block-components-text-input.wc-block-components-text-input input[type="number"],
  .wc-block-components-text-input.wc-block-components-text-input input[type="password"] {
    box-sizing: border-box;
    padding: 0 14px;            /* pion: tekst centruje się w stałej wysokości */
    background-color: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--qs-ink);
  }
  /* Woo zmienia padding w stanie aktywnym (0,4,1) — nasz (0,4,2) wygrywa. */
  .wc-block-components-text-input.is-active input[type="text"],
  .wc-block-components-text-input.is-active input[type="email"],
  .wc-block-components-text-input.is-active input[type="tel"],
  .wc-block-components-text-input.is-active input[type="url"],
  .wc-block-components-text-input.is-active input[type="number"],
  .wc-block-components-text-input.is-active input[type="password"] {
    padding: 0 14px;
  }
  .wc-block-components-text-input input:focus,
  .wc-block-components-text-input.wc-block-components-text-input input[type="text"]:focus,
  .wc-block-components-text-input.wc-block-components-text-input input[type="email"]:focus,
  .wc-block-components-text-input.wc-block-components-text-input input[type="tel"]:focus,
  .wc-block-components-text-input.wc-block-components-text-input input[type="url"]:focus,
  .wc-block-components-text-input.wc-block-components-text-input input[type="number"]:focus,
  .wc-block-components-text-input.wc-block-components-text-input input[type="password"]:focus {
    outline: none;
    background-color: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-accent-text);
    color: var(--qs-ink);
  }

  .wc-block-components-text-input label {
    left: 14px;
    z-index: 1;
    font-family: var(--qs-sans);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--qs-muted);
  }
  /* translateY(-31%) = połowa wysokości po scale(.75) — środek etykiety trafia
     w oś linii 3px, więc nacięcie wygląda na celowe. */
  .wc-block-components-text-input.is-active label,
  .wc-block-components-text-input input:-webkit-autofill + label {
    top: 0;
    left: 10px;
    padding: 0 5px;
    background: var(--qs-surface);
    transform: translateY(-31%) scale(.75);
    transform-origin: top left;
    font-family: var(--qs-mono);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .wc-block-components-text-input.is-active input:focus + label,
  .wc-block-components-text-input.is-active input:focus ~ label { color: var(--qs-accent-text); }

  /* Autofill Chrome maluje pole na kremowo i psuje nacięcie etykiety. */
  .wc-block-components-text-input input:-webkit-autofill {
    -webkit-box-shadow: inset 0 0 0 100px var(--qs-surface);   /* Safari czyta tylko wariant prefiksowany */
    box-shadow: inset 0 0 0 100px var(--qs-surface);
    -webkit-text-fill-color: var(--qs-ink);
  }

  /* Selecty */
  .wc-blocks-components-select .wc-blocks-components-select__container {
    background: var(--qs-surface);
    border-radius: var(--qs-radius);
  }
  .wc-blocks-components-select .wc-blocks-components-select__select {
    padding: 0 34px 0 14px;      /* miejsce na strzałkę */
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--qs-ink);
  }
  .wc-blocks-components-select .wc-blocks-components-select__select:focus {
    outline: none;
    border: var(--qs-border) solid var(--qs-accent-text);
  }
  /* Etykieta selecta jest zawsze podniesiona — to samo nacięcie co w inpucie. */
  .wc-blocks-components-select .wc-blocks-components-select__label {
    top: 0;
    left: 10px;
    z-index: 1;
    padding: 0 5px;
    background: var(--qs-surface);
    transform: translateY(-30%) scale(.75);
    transform-origin: top left;
    font-family: var(--qs-mono);
    font-weight: 400;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }

  /* Textarea (uwagi do zamówienia) */
  .wc-block-checkout__add-note textarea,
  .wc-block-components-textarea {
    box-sizing: border-box;
    width: 100%;
    padding: 11px 14px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-size: 14.5px;
    color: var(--qs-ink);
  }
  .wc-block-checkout__add-note textarea:focus,
  .wc-block-components-textarea:focus {
    outline: none;
    border-color: var(--qs-accent-text);
  }

  /* Błędy walidacji */
  .wc-block-components-text-input.has-error input,
  .wc-block-components-text-input.has-error input:focus,
  .has-error .wc-blocks-components-select .wc-blocks-components-select__select {
    border-color: var(--qs-danger);
    box-shadow: none;
  }
  .wc-block-components-validation-error {
    margin-block-start: 5px;
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qs-danger);
  }

  /* ---------- B.4 Checkboxy zgód ----------
     Woo rysuje własny znacznik <svg class="wc-block-components-checkbox__mark">.
     Malujemy pudełko i `fill` tego SVG — bez dodatkowej fajki w tle. */
  .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
    box-sizing: border-box;
    width: 1.375em;
    height: 1.375em;
    min-width: 1.375em;
    min-height: 1.375em;
    background-color: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
  }
  .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked { background: var(--qs-accent-text); }
  .wc-block-components-checkbox .wc-block-components-checkbox__mark {
    fill: var(--qs-surface);
    margin-top: .15em;
    margin-left: .12em;
  }
  .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:focus {
    outline: var(--qs-border) solid var(--qs-accent-text);
    outline-offset: 2px;
  }
  .wc-block-components-checkbox .wc-block-components-checkbox__label {
    font-size: 14px;
    color: var(--qs-body);
  }
  .wc-block-checkout__terms {
    font-size: 13.5px;
    color: var(--qs-body);
  }
  .wc-block-checkout__terms a,
  .wc-block-components-checkbox__label a {
    font-weight: 700;
    color: var(--qs-accent-text);
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ---------- B.5 Kafle wysyłki i płatności (radio) ---------- */

  .wc-block-components-radio-control .wc-block-components-radio-control__option {
    box-sizing: border-box;
    margin-block-end: 12px;
    padding-block: 14px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-line);
    border-radius: var(--qs-radius);
    box-shadow: none;
    transition: border-color .12s, background-color .12s;
  }
  .wc-block-components-radio-control .wc-block-components-radio-control__option:last-child { margin-block-end: 0; }
  .wc-block-components-radio-control .wc-block-components-radio-control__option:hover {
    border-color: var(--qs-ink);
    background: var(--qs-tint);
  }
  /* Wybrany: Woo ma `box-shadow: inset 0 0 0 1.5px currentColor` (0,2,1) —
     nasz selektor (0,3,1) bije go bez !important. */
  .wc-block-components-radio-control .wc-block-components-radio-control__option-checked,
  .wc-block-components-radio-control .wc-block-components-radio-control__option--checked-option-highlighted,
  .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked,
  .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option--checked-option-highlighted {
    background: var(--qs-tint);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
  }
  /* Wariant akordeonowy: ramka należy do wrappera, wnętrze bez ramki. */
  .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option {
    box-sizing: border-box;
    margin-block-end: 12px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-line);
    border-radius: var(--qs-radius);
  }
  .wc-block-components-radio-control .wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option {
    margin-block-end: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  /* hairline-separatory Woo dublują nasze ramki 3px */
  .wc-block-components-radio-control .wc-block-components-radio-control__option::after,
  .wc-block-components-radio-control div.wc-block-components-radio-control-accordion-option::after { content: none; }

  /* Kwadratowy radio 18px z wypełnieniem akcentowym.
     Woo trzyma go absolutnie (left:16px; top:50%) i sam rysuje `::before`. */
  .wc-block-components-radio-control .wc-block-components-radio-control__input {
    box-sizing: border-box;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    appearance: none;
    -webkit-appearance: none;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
  }
  .wc-block-components-radio-control .wc-block-components-radio-control__input:checked { border: var(--qs-border) solid var(--qs-ink); }
  .wc-block-components-radio-control .wc-block-components-radio-control__input:checked::before {
    width: 8px;
    height: 8px;
    min-width: 8px;
    min-height: 8px;
    background: var(--qs-accent-text);
    border-radius: var(--qs-radius);
  }
  .wc-block-components-radio-control .wc-block-components-radio-control__input:focus {
    outline: var(--qs-border) solid var(--qs-accent-text);
    outline-offset: 2px;
  }

  .wc-block-components-radio-control__label,
  .wc-block-components-payment-method-label {
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 14.5px;
    color: var(--qs-ink);
  }
  .wc-block-components-radio-control__secondary-label,
  .wc-block-components-radio-control__description,
  .wc-block-components-radio-control__secondary-description {
    font-family: var(--qs-mono);
    font-size: 11.5px;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .wc-block-components-radio-control__label-group {
    align-items: baseline;
    gap: 10px;
  }
  .wc-block-checkout__shipping-option .wc-block-components-formatted-money-amount {
    font-weight: 800;
    color: var(--qs-ink);
  }
  .wc-block-checkout__shipping-option--free {
    font-family: var(--qs-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    color: var(--qs-success-text);
  }

  /* Karta zapisanego adresu (widok „edytuj") */
  .wc-block-components-address-card {
    padding: 14px 16px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-line);
    border-radius: var(--qs-radius);
  }
  .wc-block-components-address-card__edit {
    font-family: var(--qs-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    color: var(--qs-accent-text);
  }

  /* ---------- B.6 Podsumowanie zamówienia ---------- */

  .wc-block-components-checkout-order-summary__title,
  .wc-block-checkout__sidebar .wc-block-components-panel > h2 .wc-block-components-panel__button {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 20px;
    line-height: 1.1;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-ink);
  }

  .wc-block-components-order-summary .wc-block-components-order-summary-item { padding-block: 14px; }
  /* miniatura 52px = drobny element → ramka 2px (tokeny: 3px dla dużych bloków) */
  .wc-block-components-order-summary .wc-block-components-order-summary-item__image > img {
    box-sizing: border-box;
    background: var(--qs-surface);
    border: 2px solid var(--qs-ink);
    border-radius: var(--qs-radius);
  }
  /* badge ilości — kwadrat, ink, mono (transform tylko na drobiazgu, nie na kontenerze) */
  .wc-block-components-order-summary .wc-block-components-order-summary-item__quantity {
    background: var(--qs-ink);
    border: 2px solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: 0 0 0 2px var(--qs-surface);
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 11px;
    color: var(--qs-bg);
  }
  .wc-block-components-product-name {
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1.25;
    color: var(--qs-ink);
  }
  .wc-block-components-product-metadata,
  .wc-block-components-product-details,
  .wc-block-components-product-metadata__description {
    font-family: var(--qs-mono);
    font-size: 11px;
    line-height: 1.5;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .wc-block-components-order-summary-item__total-price,
  .wc-block-components-product-price {
    font-weight: 800;
    font-size: 14.5px;
    color: var(--qs-ink);
  }

  /* Sekcje sum — twarde kreski 3px zamiast hairline'ów Woo */
  .wc-block-checkout__sidebar .wc-block-components-totals-wrapper {
    padding-block: 16px;
    border-top: var(--qs-border) solid var(--qs-ink);
  }
  .wc-block-checkout__sidebar .wc-block-components-totals-wrapper:first-child {
    padding-block-start: 0;
    border-top: 0;
  }
  .wc-block-components-totals-item {
    align-items: baseline;
    padding-block: 3px;
  }
  .wc-block-components-totals-item__label {
    font-family: var(--qs-mono);
    font-size: 11.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .wc-block-components-totals-item__value {
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 14.5px;
    color: var(--qs-ink);
  }
  .wc-block-components-totals-discount .wc-block-components-totals-item__value { color: var(--qs-success-text); }

  .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 28px;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--qs-ink);
  }
  .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-tax,
  .wc-block-components-totals-footer-item .wc-block-components-totals-footer-item-shipping {
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--qs-muted);
  }

  /* Panele rozwijane */
  .wc-block-components-panel__button {
    padding-block: 12px;
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .wc-block-components-panel__button:hover { color: var(--qs-accent-text); }
  .wc-block-components-panel__button-icon { fill: var(--qs-accent-text); }

  /* Kupon */
  .wc-block-components-totals-coupon .wc-block-components-panel__button {
    font-family: var(--qs-mono);
    font-weight: 400;
    font-size: 11.5px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--qs-muted);
  }
  .wc-block-components-totals-coupon__form { gap: 10px; }
  .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button {
    background: var(--qs-surface);
    color: var(--qs-ink);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-sm);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .wc-block-components-totals-coupon__form .wc-block-components-totals-coupon__button:hover {
    background: var(--qs-ink);
    color: var(--qs-bg);
  }
  .wc-block-components-chip {
    background: var(--qs-tint);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-mono);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--qs-ink);
  }

  /* ---------- B.7 Akcje: „Zamawiam i płacę" ---------- */

  /* Woo (bezwarstwowo, checkout.css):
       `.wc-block-checkout__actions .wc-block-checkout__actions_row` (0,2,0) → align-items:center
       `… .wc-block-components-checkout-place-order-button` (0,3,0) → width:50%; padding:1em
     Klasa ratunkowa `--full-width` nie wchodzi, dopóki widoczny jest link powrotu
     do koszyka (a jest). Dlatego powtarzamy PEŁNE ścieżki Woo — przy równej
     specyficzności rozstrzyga kolejność, a nasz arkusz drukuje się później. */
  .wc-block-checkout__actions .wc-block-checkout__actions_row {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
  .wc-block-components-button.wc-block-components-checkout-place-order-button {
    width: 100%;
    min-height: 56px;
    padding: 16px;
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow);
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: .02em;
    text-transform: uppercase;
    transition: background-color .12s, color .12s;
  }
  .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:hover,
  .wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
    background: var(--qs-ink);
    color: var(--qs-bg);
  }
  /* Woo podmienia box-shadow na :focus (niebieski ring) i kasuje twardy cień —
     przywracamy cień, widoczność fokusu zapewnia outline (WCAG 2.4.7). */
  .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus,
  .wc-block-components-button.wc-block-components-checkout-place-order-button:focus {
    box-shadow: var(--qs-shadow);
    outline: var(--qs-border) solid var(--qs-accent-text);
    outline-offset: 3px;
  }
  .wc-block-components-checkout-place-order-button .wc-block-components-button__text {
    font-weight: 800;
    text-transform: uppercase;
  }
  /* Stan „loading" zostaje nietknięty — Woo chowa tekst i pokazuje spinner. */

  .wc-block-components-checkout-return-to-cart-button {
    align-self: center;
    background: none;
    border: 0;
    box-shadow: none;
    font-family: var(--qs-mono);
    font-size: 11.5px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--qs-muted);
    /* padding-left Woo zostaje — pod nim siedzi strzałka SVG */
  }
  .wc-block-components-checkout-return-to-cart-button:hover { color: var(--qs-accent-text); }

  /* ---------- B.8 Komunikaty ----------
     Snackbar (position:fixed) — nie dotykamy pozycji, z-index ani display;
     wyłącznie ramka i typografia wewnętrznego bannera. */
  .wc-block-components-notices .wc-block-components-notice-banner,
  .wc-block-components-notice-banner {
    background-color: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    font-weight: 600;
    font-size: 14px;
    color: var(--qs-ink);
  }
  .wc-block-components-notice-banner.is-error { border-color: var(--qs-danger); color: var(--qs-danger); }
  .wc-block-components-notice-banner.is-success { border-color: var(--qs-success); color: var(--qs-ink); }
  .wc-block-components-notice-banner.is-info,
  .wc-block-components-notice-banner.is-warning {
    border-color: var(--qs-ink);
    background-color: var(--qs-tint);
  }
  .wc-block-components-notice-banner__summary {
    font-family: var(--qs-sans);
    font-weight: 800;
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }

  /* ---------- B.9 Checkout: drobne korekty mobilne ----------
     Świadomie BEZ sticky/fixed CTA — pasek fixed potrafi przykryć overlay bramki. */
  @media (max-width: 767px) {
    .wc-block-components-form .wc-block-components-checkout-step,
    .wp-block-woocommerce-checkout .wc-block-components-checkout-step {
      margin-block-end: 16px;
      padding: 18px 16px;
    }
    /* na mobile Woo wstawia numer kroku inline (position:static) */
    .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number { padding-left: 16px; }

    .wc-block-components-checkout-step__title,
    .wc-block-components-checkout-order-summary__title { font-size: 18px; }
    .wc-block-components-totals-footer-item .wc-block-components-totals-item__value { font-size: 26px; }

    .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button,
    .wc-block-components-button.wc-block-components-checkout-place-order-button {
      box-shadow: var(--qs-shadow-md);
      font-size: 16px;
    }
    .wc-block-checkout__actions .wc-block-checkout__actions_row .wc-block-components-checkout-place-order-button:focus,
    .wc-block-components-button.wc-block-components-checkout-place-order-button:focus { box-shadow: var(--qs-shadow-md); }
  }

  /* =========================================================================
     C. MINI-KOSZYK WYSUWANY (#cart-panel / .woocommerce-mini-cart)
     Sam panel (pozycjonowanie, otwieranie) należy do szablonu i JS — tutaj
     wyłącznie skóra: ramki, typografia, kwoty, przyciski. Reguły pozycji
     świadomie pominięte, żeby nie ukryć panelu, którego nie kontrolujemy.
     ========================================================================= */

  #cart-panel .panel__container {
    background: var(--qs-bg);
    border-left: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-family: var(--qs-sans);
    color: var(--qs-ink);
  }
  #cart-panel .panel__header {
    margin: 0;
    padding-block-end: 14px;
    border-bottom: var(--qs-border) solid var(--qs-ink);
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 24px;
    line-height: 1.08;
    letter-spacing: .01em;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  #cart-panel .panel__button-close {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    color: var(--qs-ink);
  }
  #cart-panel .panel__button-close:hover { background: var(--qs-ink); color: var(--qs-bg); }
  #cart-panel .button::after { content: none; }   /* efekt „shine" motywu nadrzędnego */

  .woocommerce-mini-cart { padding: 0; margin: 0; list-style: none; }
  .woocommerce-mini-cart .woocommerce-mini-cart-item {
    display: flex;
    gap: 14px;
    margin: 12px 0 0;
    padding: 14px;
    background: var(--qs-surface);
    border: 0;
    border-top: var(--qs-border) solid var(--qs-ink);
  }
  .woocommerce-mini-cart .woocommerce-mini-cart-item:first-child { margin-block-start: 0; }
  .woocommerce-mini-cart .woocommerce-mini-cart-item__thumbnail { flex: none; }
  /* miniatura o stałych wymiarach — brak zależności od procentowej wysokości */
  .woocommerce-mini-cart .woocommerce-mini-cart-item__thumbnail img {
    box-sizing: border-box;
    width: 80px;
    height: 80px;
    padding: 4px;
    object-fit: contain;
    background: var(--qs-surface);
    border: 2px solid var(--qs-ink);
    border-radius: var(--qs-radius);
  }
  .woocommerce-mini-cart .woocommerce-mini-cart-item__summary { flex: 1; min-width: 0; padding-left: 0; }
  .woocommerce-mini-cart .woocommerce-mini-cart-item__name a {
    font-weight: 800;
    font-size: 14.5px;
    line-height: 1.25;
    color: var(--qs-ink);
  }
  .woocommerce-mini-cart .woocommerce-mini-cart-item__name a:hover { color: var(--qs-accent-text); }
  .woocommerce-mini-cart .woocommerce-mini-cart-item .variation,
  .woocommerce-mini-cart .woocommerce-mini-cart-item .ecomus-product-offer {
    font-family: var(--qs-mono);
    font-size: 11px;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--qs-muted);
  }
  .woocommerce-mini-cart .woocommerce-mini-cart-item .woocommerce-Price-amount {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 18px;
    letter-spacing: .01em;
    color: var(--qs-ink);
  }
  .woocommerce-mini-cart .woocommerce-mini-cart-item input.qty {
    width: 56px;
    min-width: 56px;
    min-height: 44px;
    font-size: 14px;
  }
  .woocommerce-mini-cart a.remove_from_cart_button {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    background: none;
    font-family: var(--qs-mono);
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--qs-danger);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .woocommerce-mini-cart a.remove_from_cart_button:hover { background: none; color: var(--qs-ink); }

  .widget_shopping_cart_footer {
    margin-block-start: 16px;
    padding-block-start: 16px;
    border-top: var(--qs-border) solid var(--qs-ink);
  }
  .woocommerce-mini-cart__total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 15px;
  }
  .woocommerce-mini-cart__total strong {
    font-weight: 800;
    font-size: 15px;
    color: var(--qs-ink);
  }
  .woocommerce-mini-cart__total .woocommerce-Price-amount {
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1;
    letter-spacing: .01em;
    color: var(--qs-ink);
  }
  .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; }
  .woocommerce-mini-cart__buttons a.button {
    display: block;
    min-height: 48px;
    padding: 14px 18px;
    background: var(--qs-surface);
    color: var(--qs-ink);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
    text-align: center;
    text-transform: uppercase;
    transition: background-color .12s, color .12s;
  }
  .woocommerce-mini-cart__buttons a.button:hover { background: var(--qs-ink); color: var(--qs-bg); }
  .woocommerce-mini-cart__buttons a.button.checkout {
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
    box-shadow: var(--qs-shadow-md);
  }
  .woocommerce-mini-cart__buttons a.button.checkout:hover { background: var(--qs-ink); color: var(--qs-bg); }

  .woocommerce-mini-cart__empty-message {
    padding: 34px 20px;
    background: var(--qs-surface);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    text-align: center;
  }
  .woocommerce-mini-cart__empty-message h4 {
    margin: 0 0 10px;
    font-family: var(--qs-display);
    font-weight: 400;
    font-size: 26px;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--qs-ink);
  }
  .woocommerce-mini-cart__empty-message p { margin: 0 0 18px; font-size: 14.5px; color: var(--qs-body); }
  .woocommerce-mini-cart__empty-message .em-button {
    display: inline-block;
    min-height: 46px;
    padding: 13px 22px;
    background: var(--qs-accent-text);
    color: var(--qs-on-accent);
    border: var(--qs-border) solid var(--qs-ink);
    border-radius: var(--qs-radius);
    box-shadow: var(--qs-shadow-md);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
    text-transform: uppercase;
  }
  .woocommerce-mini-cart__empty-message .em-button:hover { background: var(--qs-ink); color: var(--qs-bg); }

  @media (max-width: 767px) {
    #cart-panel .panel__container {
      border-left: 0;
      border-top: var(--qs-border) solid var(--qs-ink);
    }
  }

  /* Redukcja ruchu */
  @media (prefers-reduced-motion: reduce) {
    .woocommerce-shipping-methods li,
    .wc-block-components-radio-control .wc-block-components-radio-control__option,
    .wc-block-components-checkout-place-order-button,
    .cart_totals .wc-proceed-to-checkout a.checkout-button,
    .woocommerce-mini-cart__buttons a.button { transition: none; }
  }

/* =========================================================================
   D. NADPISANIA O WYŻSZEJ WADZE — czytaj, zanim coś tu zmienisz
   -------------------------------------------------------------------------
   Pomiar na żywym checkoucie: nasz arkusz jest w dokumencie na pozycji 36,
   a `wc-blocks-style`, `wc-blocks-style-checkout` i `wc-blocks-packages-style`
   na 49-51. WooCommerce rejestruje style bloków przy renderowaniu, więc
   ładują się PO motywie — a wtedy przy równej specyficzności wygrywa Woo.
   Reguły w sekcjach A-C remisowały: pola tekstowe (0,3,1) vs (0,3,1),
   select (0,2,0) vs (0,2,0), checkbox (0,2,1) vs (0,2,1) — i przegrywały.

   Poniższe selektory podwajają klasę kontenera bloku kasy, więc mają wagę
   wyższą, a nie równą. To działa niezależnie od kolejności wczytania, czyli
   przetrwa też zmianę sposobu rejestracji stylów po stronie WooCommerce.
   Nie używamy !important, bo wtedy nie dałoby się nadpisać tego z zewnątrz.
   ========================================================================= */

.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="text"],
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="email"],
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="tel"],
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="url"],
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="number"],
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input[type="password"],
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select {
  border: var(--qs-border) solid var(--qs-ink);
  border-radius: var(--qs-radius);
  background-color: var(--qs-surface);
  color: var(--qs-ink);
  font-family: var(--qs-sans);
  font-weight: 600;
  font-size: 14.5px;
}

.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-text-input input:focus,
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-blocks-components-select .wc-blocks-components-select__select:focus {
  outline: 3px solid var(--qs-accent-text);
  outline-offset: 1px;
}

/* Kwadratowe pudełko zgody. Znacznik rysuje Woo własnym <svg>, więc malujemy
   wyłącznie ramkę, tło i kolor wypełnienia — inaczej byłyby dwa ptaszki. */
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"] {
  border: var(--qs-border) solid var(--qs-ink);
  border-radius: var(--qs-radius);
  background-color: var(--qs-surface);
}
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"]:checked {
  background-color: var(--qs-accent-text);
}

/* Kwadratowy znacznik radio. Reguła w sekcji B remisowała z arkuszem Woo
   i przegrywała kolejnością wczytania — radio zostawało okrągłe i 1px. */
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-radio-control__input {
  box-sizing: border-box;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  appearance: none; -webkit-appearance: none;
  background: var(--qs-surface);
  border: var(--qs-border) solid var(--qs-ink);
  border-radius: var(--qs-radius);
}
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-radio-control__input:checked {
  background: var(--qs-accent-text);
  box-shadow: inset 0 0 0 3px var(--qs-surface);
}
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-radio-control__input::before {
  content: none;   /* Woo rysuje własną kropkę ::before — mamy wypełnienie */
}

/* Woo zeruje padding pierwszego kroku regułą z `:first-of-type` (0,3,0). */
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-components-checkout-step {
  padding: 20px;
}
/* 52px robi miejsce na numer kroku — ale tylko tam, gdzie jest na to
   szerokość. Bez media query ta reguła (wyższa waga sekcji D) zabijała
   mobilną korektę 16px i pola kasy zwężały się na telefonie. */
.wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
  padding-left: 16px;
}
@media (min-width: 768px) {
  .wp-block-woocommerce-checkout.wp-block-woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
    padding-left: 52px;
  }
}