/* ============================================================
   420market.pl — motyw „market420" v0.1.0 (Fala 1)
   Stylowanie BLOKÓW WooCommerce (koszyk, zamówienie, mini-koszyk)
   pod wygląd makiet prototyp/koszyk.html i prototyp/zamowienie.html.
   Motyw NIE podmienia bloków — tylko je ubiera. Selektory po klasach
   wc-block-components-* (bez :nth-child); w warstwie WYGLĄDU trzymamy
   specyficzność na 1-2 klasach, w warstwie UKŁADU (sekcja 1 i cross-sell)
   świadomie schodzimy niżej w drzewo (kontener bloku + klasa elementu),
   bo tylko tak przebijamy reguły rdzenia bez !important — powód opisany
   przy sekcji 1.
   !important wyłącznie tam, gdzie trzeba przebić style rdzenia bloków
   ALBO arkusz wtyczki (InPost PL) o równej/wyższej specyficzności
   — zawsze przyciski, zawsze z komentarzem DLACZEGO przy regule.
   Tokeny (--zielen, --akcent, --linia…) przychodzą z motyw.css (zależność).
   ============================================================ */

/* ------------------------------------------------------------
   1. WSPÓLNY UKŁAD KOSZYKA I ZAMÓWIENIA: dwie kolumny
      (treść + podsumowanie 360 px), jak .uklad-zakupy z makiety.

      DLACZEGO FLEX, A NIE GRID: rdzeń bloków układa te ekrany flexem
      (.wc-block-components-sidebar-layout{display:flex;flex-wrap:wrap})
      i pod ten flex ma napisane własne reguły dla klas .is-large/.is-small
      oraz odstępy dzieci. Zostajemy przy flexie i sterujemy tylko
      szerokościami kolumn — nie walczymy z rdzeniem, a to, czego nie
      nadpisujemy, dalej działa po ich stronie. Grid wchodzi tam, gdzie
      naprawdę jest potrzebny (siatka cross-sellu, sekcja 3b).

      DLACZEGO TAK DŁUGIE SELEKTORY: wc-blocks.css bywa wczytany PO naszym
      arkuszu — zmierzone na żywym sklepie 19.08, nasza reguła
      .wc-block-components-sidebar-layout{display:grid} przegrywała przy
      równej specyficzności i kontener zostawał flexem rdzenia. Dokładamy
      więc kontener bloku (.wp-block-woocommerce-cart / -checkout) i klasę
      elementu: 0,4,0 przeciw 0,3,0 rdzenia. Dzięki temu układ trzyma się
      niezależnie od kolejności arkuszy i bez ani jednego !important.

      SZEROKOŚĆ KONTENERA, NIE OKNA: bloki dopisują .is-large/.is-medium/
      .is-small/.is-mobile wg szerokości SWOJEGO kontenera, więc układ
      wiążemy z tymi klasami. Media query na końcu sekcji zostaje jako
      bezpiecznik na wypadek, gdyby skrypt bloków nie zdążył ich nadać.
   ------------------------------------------------------------ */

/* baza dla każdego układu z paskiem bocznym (także innych bloków Woo) */
.wc-block-components-sidebar-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:26px}
.wc-block-components-main{width:auto;max-width:none;min-width:0;padding:0}
.wc-block-components-sidebar{width:auto;margin:0}

/* kontener koszyka i zamówienia — ten sam flex, ale specyficznością nie do przebicia */
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout,
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout{display:flex;flex-wrap:wrap;align-items:flex-start;gap:26px;margin-top:10px}

/* pierwszym dzieckiem bywa DIV bez klasy (obszar komunikatów) — musi zostać
   na całą szerokość, inaczej wchodzi w wiersz jako trzecia kolumna i rozbija układ */
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>div:not([class]),
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>.wc-block-components-notices,
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>div:not([class]),
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>.wc-block-components-notices{flex:0 0 100%;width:100%;max-width:100%;padding:0}
/* pusty obszar komunikatów chowamy, żeby nie zostawiał po sobie odstępu (gap) */
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>div:not([class]):empty,
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>div:not([class]):empty{display:none}

/* kolumna główna: bierze resztę szerokości; min-width:0 pozwala jej się kurczyć
   (bez tego długie nazwy produktów rozpychają wiersz i wypychają podsumowanie) */
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>.wc-block-cart__main,
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>.wc-block-checkout__main{flex:1 1 420px;min-width:0;width:auto;max-width:none;margin:0;padding:0;align-self:flex-start}

/* wygląd karty podsumowania trzymamy też w regule o niskiej specyficzności:
   gdyby markup bloków się zmienił i selektor układu niżej nie trafił, karta
   dalej wygląda jak w makiecie (straci tylko dwukolumnowość) */
.wc-block-cart__sidebar,.wc-block-checkout__sidebar{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:20px}

/* kolumna podsumowania: 360 px i karta jak .podsumowanie z makiety.
   align-self:flex-start zamiast polegania na align-items kontenera — bez tego
   flex rozciąga kolumnę na pełną wysokość wiersza i sticky nie ma się gdzie ruszyć.

   ARYTMETYKA ZAWIJANIA (audyt N4: przed rundą 1 było 754+406=1160 = dokładnie
   szerokość kontenera, więc podsumowanie spadało pod listę — koszyk y=968,
   zamówienie y=2295). Kontener: .srodek/#primary max-width 1200 − 2×20 padding
   = 1160 px treści. O zawijaniu decyduje SUMA PODSTAW (flex-basis), nie rozmiar
   po rozdaniu wolnej przestrzeni:
     420 (main) + 26 (gap) + 360 (sidebar) = 806 ≤ 1160  → jeden wiersz ✓
   Limit z zadania: podstawa main musi być < 1160 − 360 − 26 = 774; mamy 420 ✓.
   Po rozdaniu wolnych 354 px (grow tylko na main): 774 + 26 + 360 = 1160 ✓.
   Kontener średni (.is-medium, 700–1023 px): 300 + 26 + 320 = 646 ≤ 700 ✓.

   BOX-SIZING: padding 20 px i ramka 1 px MIESZCZĄ SIĘ w 360 px, bo motyw.css
   ustawia *{box-sizing:border-box}. Powtarzamy to tu jawnie — arkusze bloków
   i wtyczek potrafią przestawić box-sizing na wybranych węzłach, a wtedy karta
   urosłaby do 402 px i zjadła cały zapas wiersza.
   MIN-WIDTH:0: bez tego pasek boczny ma min-width:auto (rozmiar min-content),
   więc jedna długa nazwa produktu w podsumowaniu potrafi rozepchnąć kolumnę
   powyżej 360 px i mimo poprawnej arytmetyki znów zawinąć układ. */
.wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>.wc-block-checkout__sidebar{flex:0 0 360px;width:360px;max-width:100%;min-width:0;box-sizing:border-box;margin:0;padding:20px;background:#fff;border:1px solid var(--linia);border-radius:var(--r);position:sticky;top:130px;align-self:flex-start}

/* średni kontener: dwie kolumny zostają, ale podsumowanie węższe, a baza
   kolumny głównej mniejsza — inaczej suma baz (420+360+26) przekracza
   szerokość kontenera i flex zawija podsumowanie pod treść */
.wp-block-woocommerce-cart .wc-block-cart.is-medium>.wc-block-cart__main,
.wp-block-woocommerce-checkout .wc-block-checkout.is-medium>.wc-block-checkout__main{flex-basis:300px}
.wp-block-woocommerce-cart .wc-block-cart.is-medium>.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout.is-medium>.wc-block-checkout__sidebar{flex-basis:320px;width:320px}

/* wąski kontener (.is-small/.is-mobile) — jedna kolumna, podsumowanie statyczne */
.wp-block-woocommerce-cart .wc-block-cart.is-small>.wc-block-cart__main,
.wp-block-woocommerce-cart .wc-block-cart.is-mobile>.wc-block-cart__main,
.wp-block-woocommerce-checkout .wc-block-checkout.is-small>.wc-block-checkout__main,
.wp-block-woocommerce-checkout .wc-block-checkout.is-mobile>.wc-block-checkout__main{flex:1 1 100%;width:100%}
.wp-block-woocommerce-cart .wc-block-cart.is-small>.wc-block-cart__sidebar,
.wp-block-woocommerce-cart .wc-block-cart.is-mobile>.wc-block-cart__sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout.is-small>.wc-block-checkout__sidebar,
.wp-block-woocommerce-checkout .wc-block-checkout.is-mobile>.wc-block-checkout__sidebar{flex:1 1 100%;width:100%;position:static}

/* bezpiecznik okna (jak @media(max-width:980px) w makiecie): te same selektory
   co reguły bazowe, więc przy równej specyficzności wygrywa późniejsza reguła */
@media(max-width:980px){
  .wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>.wc-block-cart__main,
  .wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>.wc-block-checkout__main{flex:1 1 100%;width:100%}
  .wp-block-woocommerce-cart .wc-block-cart.wc-block-components-sidebar-layout>.wc-block-cart__sidebar,
  .wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>.wc-block-checkout__sidebar{flex:1 1 100%;width:100%;position:static}
}

/* ------------------------------------------------------------
   2. PRZYCISKI BLOKÓW (wzór .btn z design systemu)
   ------------------------------------------------------------ */
/* baza: pigułka, bez cienia */
.wc-block-components-button:not(.is-link){border-radius:999px;font-weight:700;font-size:15px;padding:13px 26px;border:0;box-shadow:none;text-decoration:none;transition:background .15s}

/* przycisk główny — „Przechodzę do kasy" w koszyku i „Kupuję i płacę" w zamówieniu
   (wzór .btn--glowny). !important: rdzeń bloków maluje tło przyciskiem
   .wc-block-components-button:not(.is-link) i przy scalaniu CSS przez optymalizator
   kolejność arkuszy nie jest gwarantowana. */
.wc-block-cart__submit-button,.wc-block-components-checkout-place-order-button{width:100%;background:var(--akcent)!important;color:#123330!important}
.wc-block-cart__submit-button:hover,.wc-block-components-checkout-place-order-button:hover{background:var(--akcent-2)!important;color:#123330!important}
/* „Kupuję i płacę" na pełną szerokość, większy (wzór .kup-final .btn) */
.wc-block-components-checkout-place-order-button{font-size:16.5px;padding:15px 26px}
/* rdzeń układa wiersz akcji poziomo (link powrotu obok przycisku) — u nas
   przycisk idzie na pełną szerokość, a link powrotu pod niego. W DOM link jest
   PIERWSZY, więc kolumnę odwracamy zamiast przestawiać elementy. */
.wp-block-woocommerce-checkout .wc-block-checkout__actions_row{display:flex;flex-direction:column-reverse;align-items:stretch;gap:10px;margin-top:14px}
/* kontener przycisku w koszyku: pełna szerokość karty podsumowania.
   Wariantu przyklejonego do dołu ekranu (--sticky, telefony) nie dotykamy —
   tam padding rdzenia odsuwa przycisk od krawędzi. */
.wp-block-woocommerce-cart .wc-block-cart__submit{width:100%}
.wp-block-woocommerce-cart .wc-block-cart__submit-container:not(.wc-block-cart__submit-container--sticky){padding:0;margin-top:14px}

/* powrót do koszyka pod przyciskiem finalnym (wzór .powrot) */
.wc-block-components-checkout-return-to-cart-button{font-size:13px;color:var(--tusz-2);box-shadow:none}
.wc-block-components-checkout-return-to-cart-button:hover{color:var(--tusz)}

/* ------------------------------------------------------------
   3. KOSZYK (.wp-block-woocommerce-cart) — karty pozycji
   ------------------------------------------------------------ */
/* tabela pozycji jako karta (wzór .koszyk-pozycje) */
.wp-block-woocommerce-cart table.wc-block-cart-items{background:#fff;border:1px solid var(--linia);border-radius:var(--r);border-collapse:separate;border-spacing:0;overflow:hidden;width:100%}
.wp-block-woocommerce-cart .wc-block-cart-items__header{display:none}
.wc-block-cart-items td{border-top:0;border-bottom:1px solid var(--linia);padding:16px 8px;vertical-align:middle}
.wc-block-cart-items tr:last-child td{border-bottom:0}
.wc-block-cart-items .wc-block-cart-item__image{width:88px;padding-left:16px}
.wc-block-cart-item__image img{background:var(--tlo-2);border-radius:var(--r-s);padding:6px;aspect-ratio:1;object-fit:contain}
.wc-block-cart-item__total{padding-right:16px;font-weight:800;font-size:16px;white-space:nowrap;text-align:right}

/* nazwa, metadane, „Usuń" (wzór .pozycja__info) */
/* overflow-wrap: para do min-width:0 na kolumnach. Skoro kolumny wolno ścisnąć,
   długie nazwy (np. „Storz-Bickel-Volcano-Hybrid-Onyx") muszą umieć się złamać,
   inaczej zamiast zawiniętego układu dostajemy tekst wychodzący poza kartę. */
.wc-block-components-product-name{font-weight:600;color:var(--tusz);font-size:14.5px;line-height:1.35;text-decoration:none;overflow-wrap:anywhere}
.wc-block-components-product-name:hover{color:var(--zielen)}
.wc-block-components-product-metadata{font-size:12.5px;color:var(--tusz-2)}
.wc-block-cart-item__remove-link{font-size:13px;color:var(--tusz-2);text-decoration:underline;cursor:pointer;border:0;background:none;padding:0}
.wc-block-cart-item__remove-link:hover{color:var(--blad)}

/* ceny pozycji: przekreślona regularna + aktualna w tealu (wzór .prod__cena);
   informacja „Oszczędzasz X zł" zostaje wtyczkowo-blokowa */
.wc-block-components-product-price del{color:var(--tusz-2);font-weight:500;font-size:.85em}
.wc-block-components-product-price ins{color:var(--akcent-tekst);text-decoration:none;font-weight:700}
.wc-block-components-sale-badge{background:var(--tusz);color:#5adfd4;border:0;border-radius:999px;font-size:11.5px;font-weight:700;padding:3px 10px;text-transform:none;letter-spacing:.02em}

/* stepper ilości −/+ (wzór .stepper); rdzeń rysuje ramkę przez ::after — gasimy ją */
.wc-block-components-quantity-selector{display:inline-flex;align-items:center;border:1.5px solid var(--linia);border-radius:999px;background:#fff;margin:8px 0 0;width:auto}
.wc-block-components-quantity-selector::after{display:none}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button{width:34px;height:34px;min-width:34px;border:0;background:none;font-size:17px;line-height:1;cursor:pointer;color:var(--tusz);opacity:1;border-radius:50%}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__button:hover{background:var(--tlo-2);box-shadow:none}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input{min-width:28px;width:36px;border:0;background:none;text-align:center;font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
.wc-block-components-quantity-selector .wc-block-components-quantity-selector__input:focus{box-shadow:none;outline:none}

/* ------------------------------------------------------------
   3b. CROSS-SELL W KOSZYKU („Klienci dodają do tego") — wzór
       .koszyk-crosssell + .siatka-prod--3 z makiety: 3 kafle w rzędzie
       w kolumnie głównej, 2 przy wąskim kontenerze.

       Obsługujemy DWA markupy, bo zależą od wersji i ustawień sklepu:
       blokowy (.wc-block-cart__cross-sells + kafle wc-block-cart-cross-sells-product)
       i klasyczny szablon Woo (.cross-sells ul.products li.prod).

       ⚠ Arkusz woocommerce-layout.css nadaje kaflom
       `.woocommerce ul.products li.product{width:22.05%;float:left}` (0,3,2)
       — na żywym sklepie ściskało to kafle do ~22% komórki. Zerujemy to
       selektorami z kontenerem koszyka (0,4,2), bez !important.

       ⚠ DRUGA kolizja, tym razem z WŁASNYM arkuszem (znaleziona 19.08):
       siatka listingu z motyw.css
       `:is(.woocommerce,.woocommerce-page) ul.products.products:not(.karuzela__tor)`
       ma (0,4,1) i wymusza repeat(4,1fr). Na stronie koszyka body ma klasę
       `woocommerce`, więc gdy cross-sell wyrenderuje się markupem klasycznym
       (ul.products), dostawał 4 kolumny zamiast zaplanowanych 3. Dlatego reguły
       siatki cross-sellu celujące w ul.products mają powtórzoną klasę .products
       i :not(.karuzela__tor) — (0,5,1), czyli wygrywają niezależnie od kolejności
       arkuszy i bez !important. Kafle blokowe tego nie potrzebują (nie są
       ul.products), ale zostają w tej samej liście selektorów dla czytelności.
   ------------------------------------------------------------ */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells,.woocommerce .cross-sells{margin-top:28px}
.wp-block-woocommerce-cart .wc-block-cart__cross-sells>h2,.woocommerce .cross-sells>h2{font-size:20px;margin-bottom:14px}

/* siatka kafli — grid, bo pływające szerokości procentowe Woo są tu źródłem
   problemu, a nie rozwiązaniem. Reguła obejmuje kontener zewnętrzny (gdy kafle
   leżą w nim wprost) i możliwe wrappery listy w różnych wersjach bloków. */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells-product-list,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .wc-block-grid__products,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells ul.products.products:not(.karuzela__tor),
.woocommerce .cross-sells ul.products.products:not(.karuzela__tor){display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;padding:0}
/* tytuł i wewnętrzna lista na całą szerokość siatki zewnętrznej */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells>h2,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells>.wc-block-cart__cross-sells-title,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells>.wc-block-cart__cross-sells-product-list,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells>.wc-block-grid__products,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells>ul.products{grid-column:1/-1}

/* kafel ściskany regułą Woo (width:22.05%;float:left) — wraca do pełnej
   szerokości komórki siatki; wygląd samej karty .prod zostaje z motyw.css */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells ul.products li.product,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells ul.products li.prod,
.woocommerce .cross-sells ul.products li.product,
.woocommerce .cross-sells ul.products li.prod{float:none;clear:none;width:auto;max-width:none;margin:0}

/* kafel blokowy jako karta .prod z makiety */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .wc-block-cart-cross-sells-product,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .cross-sells-product{display:flex;flex-direction:column;background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:14px;margin:0;width:auto}
/* obrazek kwadratowy i wpisany w kadr — bez tego kafle mają różne wysokości.
   Tylko kafle blokowe: kafle klasyczne (li.prod) mają własne .prod__foto w motyw.css */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .wc-block-cart-cross-sells-product img,
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .cross-sells-product img{width:100%;aspect-ratio:1;object-fit:contain;margin-bottom:10px}
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .wc-block-cart-cross-sells-product__product-title{font-size:14.5px;font-weight:600;color:var(--tusz);line-height:1.35}
.wp-block-woocommerce-cart .wc-block-cart__cross-sells .wc-block-cart-cross-sells-product__price{margin-top:auto;padding-top:8px;font-size:17px;font-weight:800}
/* „Do koszyka" jak .btn--drugi .btn--maly na pełną szerokość kafla */
.wp-block-woocommerce-cart .wc-block-cart__cross-sells button{width:100%;margin-top:10px;background:var(--zielen);color:#fff;border:0;border-radius:999px;font-weight:700;font-size:13.5px;padding:8px 16px;cursor:pointer;transition:background .15s}
.wp-block-woocommerce-cart .wc-block-cart__cross-sells button:hover{background:var(--zielen-2);color:#fff}

/* wąski kontener koszyka → 2 kafle w rzędzie (jak .siatka-prod--3 w makiecie) */
.wp-block-woocommerce-cart .is-small .wc-block-cart__cross-sells,
.wp-block-woocommerce-cart .is-mobile .wc-block-cart__cross-sells,
.wp-block-woocommerce-cart .is-small .wc-block-cart__cross-sells-product-list,
.wp-block-woocommerce-cart .is-mobile .wc-block-cart__cross-sells-product-list,
.wp-block-woocommerce-cart .is-small .wc-block-cart__cross-sells ul.products.products:not(.karuzela__tor),
.wp-block-woocommerce-cart .is-mobile .wc-block-cart__cross-sells ul.products.products:not(.karuzela__tor){grid-template-columns:repeat(2,1fr)}

/* bezpiecznik okna — te same wartości co przy wąskim kontenerze */
@media(max-width:640px){
  .wp-block-woocommerce-cart .wc-block-cart__cross-sells,
  .wp-block-woocommerce-cart .wc-block-cart__cross-sells-product-list,
  .wp-block-woocommerce-cart .wc-block-cart__cross-sells .wc-block-grid__products,
  .wp-block-woocommerce-cart .wc-block-cart__cross-sells ul.products.products:not(.karuzela__tor),
  .woocommerce .cross-sells ul.products.products:not(.karuzela__tor){grid-template-columns:repeat(2,1fr)}
}

/* ------------------------------------------------------------
   4. PODSUMOWANIE / SUMY (koszyk i zamówienie)
   ------------------------------------------------------------ */
/* rzędy sum (wzór .podsumowanie__rzad) */
.wc-block-components-totals-item{font-size:14.5px;padding:5px 0;color:var(--tusz-2)}
.wc-block-components-totals-item__value{color:var(--tusz);font-weight:700;white-space:nowrap}
.wc-block-components-totals-item__description{font-size:12.5px;color:var(--tusz-2)}
/* „Razem" (wzór .podsumowanie__suma) */
.wc-block-components-totals-footer-item{border-top:1px solid var(--linia);margin-top:8px;padding-top:12px}
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value{font-size:22px;font-weight:700}
/* separatory rdzenia między sekcjami podsumowania — subtelniej */
.wc-block-components-totals-wrapper{border-top:1px solid var(--linia);padding:8px 0}
.wc-block-components-totals-wrapper:first-child{border-top:0}

/* kupon (wzór .kod-rabatowy): odnośnik + pole z przyciskiem */
.wc-block-components-totals-coupon-link{color:var(--akcent-tekst);font-weight:600;font-size:14px}
.wc-block-components-totals-coupon-link:hover{color:var(--tusz)}
.wc-block-components-totals-coupon .wc-block-components-text-input input{border-radius:999px}
/* przycisk „Zastosuj" jak .btn--drugi .btn--maly; !important jak przy przyciskach wyżej */
.wc-block-components-totals-coupon__button{background:var(--zielen)!important;color:#fff!important;border-radius:999px;font-weight:700;font-size:13.5px;padding:8px 16px}
.wc-block-components-totals-coupon__button:hover{background:var(--zielen-2)!important}

/* pozycje zamówienia w podsumowaniu checkoutu (wzór .podsumowanie__pozycja) */
.wc-block-components-order-summary-item{font-size:13.5px;padding:8px 0 12px;border-bottom:1px solid var(--linia)}
.wc-block-components-order-summary-item:last-child{border-bottom:0}
.wc-block-components-order-summary-item__image img{background:var(--tlo-2);border-radius:var(--r-s);object-fit:contain}
.wc-block-components-order-summary-item__quantity{background:var(--zielen);border:0;color:#fff;font-weight:700}
.wc-block-components-order-summary-item__total-price{font-weight:700;white-space:nowrap}

/* ------------------------------------------------------------
   5. ZAMÓWIENIE (.wp-block-woocommerce-checkout) — formularz
   ------------------------------------------------------------ */
/* sekcje formularza jako karty (wzór .form-sekcja) */
.wc-block-components-checkout-step{background:#fff;border:1px solid var(--linia);border-radius:var(--r);padding:20px;margin-bottom:16px}
.wc-block-components-checkout-step__title{font-size:18px;font-weight:700;margin-bottom:4px}
.wc-block-components-checkout-step__description{color:var(--tusz-2);font-size:13.5px;margin-bottom:14px}
.wc-block-components-checkout-step__content{padding:0}

/* pola tekstowe (wzór .pole): ramka --linia, focus --zielen, bez niebieskiej obwódki rdzenia */
.wc-block-components-text-input input{border:1.5px solid var(--linia);border-radius:var(--r-s);font-size:15px;background:#fff;color:var(--tusz)}
.wc-block-components-text-input input:focus{outline:none;border-color:var(--zielen);box-shadow:0 0 0 2px var(--zielen-tlo)}
.wc-block-components-text-input label{color:var(--tusz-2)}
.wc-block-components-text-input.has-error input{border-color:var(--blad)}
.wc-block-components-validation-error p{color:var(--blad);font-size:12.5px}
/* selecty i comboboksy (kraj/województwo) w tym samym rysunku */
.wc-block-components-select select,.wc-block-components-combobox input{border:1.5px solid var(--linia);border-radius:var(--r-s);background:#fff;color:var(--tusz)}
.wc-block-components-select select:focus,.wc-block-components-combobox input:focus{outline:none;border-color:var(--zielen);box-shadow:0 0 0 2px var(--zielen-tlo)}

/* radio-karty dostawy i płatności (wzór .platnosci__karta / .dostawa__karta):
   obrys aktywnej --zielen + tło --zielen-tlo przez :has(:checked) */
.wc-block-components-radio-control__option{border:2px solid var(--linia);border-radius:var(--r);background:#fff;margin-bottom:10px;padding:14px 16px 14px 48px;transition:border-color .15s,background .15s;cursor:pointer}
.wc-block-components-radio-control__option:has(input:checked){border-color:var(--zielen);background:var(--zielen-tlo)}
.wc-block-components-radio-control__option:last-child{margin-bottom:0}
/* wariant akordeonowy (metody płatności z treścią rozwijaną) */
.wc-block-components-radio-control-accordion-option{border:2px solid var(--linia);border-radius:var(--r);background:#fff;margin-bottom:10px;overflow:hidden;transition:border-color .15s,background .15s}
.wc-block-components-radio-control-accordion-option:has(input:checked){border-color:var(--zielen);background:var(--zielen-tlo)}
.wc-block-components-radio-control-accordion-option .wc-block-components-radio-control__option{border:0;margin:0;background:none}
.wc-block-components-radio-control-accordion-content{padding:0 16px 14px;font-size:13.5px;color:var(--tusz-2)}
/* rdzeń rysuje kreski między opcjami — gasimy, karty mają własne ramki */
.wc-block-components-radio-control__option::before,.wc-block-components-radio-control__option::after{border:0}
/* kółko radio w kolorze marki */
.wc-block-components-radio-control__input{width:18px;height:18px;border:2px solid var(--linia)}
.wc-block-components-radio-control__input:checked{border-color:var(--zielen)}
.wc-block-components-radio-control__input:checked::before{background:var(--zielen)}
/* etykieta opcji: nazwa pogrubiona, opis drobny, cena po prawej pogrubiona */
.wc-block-components-radio-control__label{font-size:14.5px;font-weight:600}
.wc-block-components-radio-control__description{font-size:12.5px;color:var(--tusz-2)}
.wc-block-components-radio-control__secondary-label{font-weight:700;white-space:nowrap}
.wc-block-components-radio-control__secondary-description{font-size:12.5px;color:var(--tusz-2)}

/* pakiety dostawy: tytuł pakietu dyskretnie */
.wc-block-components-shipping-rates-control__package{border:0;padding:0}
.wc-block-components-shipping-rates-control .wc-block-components-panel__button{font-weight:600}

/* checkboxy (zgody, „utwórz konto") — w kolorze marki, DOMYŚLNIE ODZNACZONE
   (stanów zaznaczenia motyw nie dotyka, to sprawa bloków/ustawień) */
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]{border:1.5px solid var(--linia);border-radius:4px;width:18px;height:18px}
.wc-block-components-checkbox .wc-block-components-checkbox__input[type=checkbox]:checked{background:var(--zielen);border-color:var(--zielen)}
.wc-block-components-checkbox .wc-block-components-checkbox__mark{fill:#fff}
.wc-block-components-checkbox__label{font-size:14px;line-height:1.45}

/* ------------------------------------------------------------
   5b. WYBÓR PACZKOMATU — wtyczka InPost PL (audyt N5)

   CO BYŁO ZŁE: na żywym checkoucie przycisk miał tło rgb(252,201,5) (żółć
   InPostu) i BIAŁY tekst — kontrast ok. 1,7:1, napis „Wybierz punkt odbioru"
   praktycznie niewidoczny. To nie kosmetyka: przy dostawie do Paczkomatu ten
   przycisk jest krokiem OBOWIĄZKOWYM, bez niego zamówienia nie da się złożyć.
   Biały tekst nie pochodzi od wtyczki (InPost maluje na żółtym ciemny napis),
   tylko od `.woocommerce button.button.alt{color:#fff}` z woocommerce.css —
   czyli dwa arkusze pomalowały ten sam przycisk połowicznie.

   REALNY DOM (zmierzony 20.08 na żywym sklepie):
     <button id="easypack_block_type_geowidget" class="button alt easypack_show_geowidget">
     rodzic: div.wc-block-components-checkout-step__content
     w fieldset#shipping-option.wc-block-checkout__shipping-option
   Selektor z rundy 1 (`[class*=inpost]`) NIE łapał tego przycisku — nazwy
   wtyczki idą od „easypack", nie od „inpost". Zostawiamy stare warianty jako
   zapas na inne wersje wtyczki i dokładamy trafione.

   DLACZEGO .btn--drugi, A NIE .btn--obrys: przycisk siedzi na białej karcie
   sekcji dostawy, więc wariant obrysowy (biały + ciemna ramka) byłby prawie
   niewidoczny na tle karty i czytałby się jako akcja opcjonalna. To krok
   wymagany, a jednocześnie NIE jest finałem zakupu — teal (--akcent) rezerwujemy
   dla „Kupuję i płacę", żeby na jednym ekranie nie było dwóch przycisków
   o tej samej sile. .btn--drugi (ciemne #262624 marki + biały tekst) to dokładnie
   ta rola w design systemie: mocno widoczny, ale nie konkuruje z finałem.
   KONTRAST: #ffffff na #262624 = 15,2:1 (WCAG AA dla tekstu wymaga 4,5:1) ✓.

   SPECYFICZNOŚĆ: identyfikator `#easypack_block_type_geowidget` daje (1,0,0)
   i bije zarówno `.woocommerce button.button.alt` (0,3,1), jak i każdą regułę
   klasową wtyczki — niezależnie od kolejności arkuszy (WP Rocket scala CSS
   i tej kolejności nie gwarantuje).
   !important TYLKO na `background` i `color`: nie wiemy, czy arkusz wtyczki nie
   maluje żółtego tła z !important (przy równej mocy wygrywa wtedy specyficzność,
   a nasza jest wyższa). Reszta deklaracji idzie bez !important. Jedyny
   przypadek, którego to nie przebije, to styl inline na przycisku — wtedy
   trzeba spisać atrybut style z DOM-u i wrócić do tej reguły.
   Modal z mapą (Geowidget) zostaje wtyczkowy — nie dotykamy.
   ------------------------------------------------------------ */
#easypack_block_type_geowidget,
.wp-block-woocommerce-checkout button.easypack_show_geowidget,
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option button[class*="easypack"],
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option button[id*="easypack"],
.wp-block-woocommerce-checkout button[class*="inpost"],
.wp-block-woocommerce-checkout button[id*="inpost"],
.wc-block-components-shipping-rates-control button[class*="parcel"]{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;background:var(--zielen)!important;color:#fff!important;border:0;border-radius:999px;font-weight:700;font-size:15px;line-height:1.2;padding:13px 26px;margin-top:4px;cursor:pointer;text-decoration:none;text-shadow:none;box-shadow:none;transition:background .15s}
#easypack_block_type_geowidget:hover,
.wp-block-woocommerce-checkout button.easypack_show_geowidget:hover,
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option button[class*="easypack"]:hover,
.wp-block-woocommerce-checkout .wc-block-checkout__shipping-option button[id*="easypack"]:hover,
.wp-block-woocommerce-checkout button[class*="inpost"]:hover,
.wp-block-woocommerce-checkout button[id*="inpost"]:hover,
.wc-block-components-shipping-rates-control button[class*="parcel"]:hover{background:var(--zielen-2)!important;color:#fff!important}
/* obwódka focusu w kolorze akcentu — ciemny przycisk zjada domyślny czarny ring */
#easypack_block_type_geowidget:focus-visible,
.wp-block-woocommerce-checkout button.easypack_show_geowidget:focus-visible{outline:2px solid var(--akcent);outline-offset:2px}

/* rządek wybranego punktu (wzór .geowidget__punkt z prototyp/zamowienie.html:
   biała karta z ramką --linia, adres z lewej, przycisk zmiany z prawej).

   ⚠ CELOWO WĄSKO, PO FRAZIE „selected/chosen point", A NIE PO „easypack"+„point":
   ten drugi wzorzec łapie także kontener mapy (np. easypack-geowidget-points)
   i nałożyłby display:flex na widżet z mapą, czyli zepsułby działający element.
   Lepiej nie trafić w rządek (zostanie surowy, ale czytelny) niż rozłożyć mapę.
   :not(button) — żeby reguła karty nie złapała przypadkiem samego przycisku.
   Jeśli po wyborze punktu rządek na żywym sklepie zostanie bez ramki, spisać
   jego klasę z DOM-u i dopisać ją tutaj wprost. */
.wp-block-woocommerce-checkout [class*="selected-point"]:not(button),
.wp-block-woocommerce-checkout [class*="selected_point"]:not(button),
.wp-block-woocommerce-checkout [class*="chosen-point"]:not(button),
.wp-block-woocommerce-checkout [class*="chosen_point"]:not(button),
.wp-block-woocommerce-checkout [id*="selected-point"]:not(button),
.wp-block-woocommerce-checkout [id*="selected_point"]:not(button){display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px;padding:12px 16px;background:#fff;border:1px solid var(--linia);border-radius:var(--r);font-size:14px;line-height:1.45;color:var(--tusz)}
/* „Zmień punkt" w tym rządku — wzór .btn--obrys .btn--maly (biały + ciemny obrys,
   kontrast tekstu #262624 na #fff = 15,2:1). Tu obrys jest właściwy, bo punkt
   jest już wybrany: to akcja poprawki, nie krok wymagany.
   Selektory zawierają identyfikator przycisku, bo muszą przebić regułę wyżej:
   (1,0,0) z !important przegrywa tylko z !important o wyższej specyficzności,
   stąd (1,2,0) i te same dwie deklaracje oznaczone !important. */
.wp-block-woocommerce-checkout [class*="selected-point"] button#easypack_block_type_geowidget,
.wp-block-woocommerce-checkout [class*="selected_point"] button#easypack_block_type_geowidget,
.wp-block-woocommerce-checkout [id*="selected-point"] button#easypack_block_type_geowidget,
.wp-block-woocommerce-checkout [id*="selected_point"] button#easypack_block_type_geowidget,
.wp-block-woocommerce-checkout [class*="selected-point"] button[class*="easypack"],
.wp-block-woocommerce-checkout [class*="selected_point"] button[class*="easypack"],
.wp-block-woocommerce-checkout [id*="selected-point"] button[class*="easypack"],
.wp-block-woocommerce-checkout [id*="selected_point"] button[class*="easypack"]{margin:0 0 0 auto;padding:8px 16px;font-size:13.5px;background:#fff!important;color:var(--zielen)!important;border:2px solid var(--zielen)}
.wp-block-woocommerce-checkout [class*="selected-point"] button#easypack_block_type_geowidget:hover,
.wp-block-woocommerce-checkout [class*="selected_point"] button#easypack_block_type_geowidget:hover,
.wp-block-woocommerce-checkout [id*="selected-point"] button#easypack_block_type_geowidget:hover,
.wp-block-woocommerce-checkout [id*="selected_point"] button#easypack_block_type_geowidget:hover,
.wp-block-woocommerce-checkout [class*="selected-point"] button[class*="easypack"]:hover,
.wp-block-woocommerce-checkout [class*="selected_point"] button[class*="easypack"]:hover,
.wp-block-woocommerce-checkout [id*="selected-point"] button[class*="easypack"]:hover,
.wp-block-woocommerce-checkout [id*="selected_point"] button[class*="easypack"]:hover{background:var(--tlo-2)!important;color:var(--zielen)!important}

/* nota pod przyciskiem finalnym (polityka/regulamin — standard bloków: notka z linkiem) */
.wc-block-components-checkout-policies,.wc-block-checkout__terms{font-size:12.5px;color:var(--tusz-2);text-align:center}
.wc-block-checkout__terms a{color:var(--akcent-tekst)}

/* ------------------------------------------------------------
   6. MINI-KOSZYK (blok Woo Mini-Cart) — drawer jak w makiecie
      prototyp/koszyk.html (partial DRAWER-KOSZYK): panel z prawej,
      overlay, lista pozycji z miniaturami, stopka z sumą i dwoma przyciskami.

   🔴 RUNDA 4 (P6/P12) — DLACZEGO PANEL POKAZYWAŁ „SAMO X"
   Rdzeń (wc-blocks: mini-cart.css, spisane z żywego sklepu 20.08) ustawia panel
   tak, że NIE STOI on tam, gdzie widać, tylko jest wciągany do kadru zmienną:
     .wc-block-components-drawer{position:fixed;top:0;right:0;left:100%;
       height:100%;width:var(--drawer-width);
       transform:translateX(max(-100%,var(--neg-drawer-width)))}
   `left:100%` sadza panel POZA prawą krawędzią ekranu, a wraca on dopiero
   transformacją policzoną z `--drawer-width` / `--neg-drawer-width`. Tych
   zmiennych nie definiuje ŻADEN arkusz rdzenia (sprawdzone: w mini-cart.css
   występują wyłącznie jako `var(...)`) — nadaje je stylem inline skrypt bloku.
   Gdy skryptu jeszcze nie było (WP Rocket odracza JS do pierwszej interakcji)
   albo gdy inna wersja bloku nadaje je gdzie indziej, `var()` bez wartości
   zapasowej unieważnia CAŁE deklaracje: transform → none, width → auto.
   Element `position:fixed` z `left:100%` i `right:0` przy `width:auto` ma
   szerokość ZERO, więc z panelu zostaje pasek zerowej szerokości przy prawej
   krawędzi okna. Widać z niego tylko przycisk zamknięcia, bo rdzeń wyjmuje go
   z układu: `.wc-block-components-drawer__close{position:absolute!important;
   right:12px;top:12px}`. Dokładnie to zgłosił Paweł: „pojawia się tylko X".
   (Wrażenie, że „koszyk działa tylko na stronie głównej", bierze się z tego
   samego: drawer wszędzie otwiera się tak samo — i wszędzie tak samo znika.)

   NAPRAWA: geometrię panelu opisujemy SAMI i bez zmiennych rdzenia
   (`right:0; left:auto; transform:none`), więc wygląd nie zależy od tego, czy
   i kiedy wykona się skrypt bloku. Animację wjazdu podmieniamy na własne
   klatki — inaczej `slidein` rdzenia (też liczony ze zmiennych) wywoziłby
   panel z kadru w trakcie otwierania.

   🔑 SPECYFICZNOŚĆ: PODWOJONA KLASA ZAMIAST !important
   Arkusz `wc-blocks-style-mini-cart` wchodzi do kolejki dopiero, gdy blok się
   renderuje — a nasz mini-koszyk renderuje się w header.php, czyli PO wp_head.
   Jego CSS potrafi więc trafić do stopki, ZA bloki.css, i przy równej
   specyficzności wygrywać. Dlatego reguły panelu piszemy z powtórzoną klasą
   (`.wc-block-components-drawer.wc-block-components-drawer` = 0,2,0 przeciw
   0,1,0 rdzenia) — ten sam chwyt, co przy siatce cross-sellu w sekcji 3b.
   Tam, gdzie rdzeń celuje selektorem 4-klasowym (układ pozycji przy .is-mobile),
   podwajamy klasę wiersza i schodzimy na 0,5,1. !important zostaje wyłącznie
   przy przyciskach stopki, bo tam rdzeń maluje tło i cień własnym !important.

   ⚠ .is-mobile TO NIE TELEFON
   Blok dokleja .is-mobile/.is-small/.is-medium/.is-large wg szerokości SWOJEGO
   kontenera, a nasz mini-koszyk siedzi w wąskim <span class="m420-minikoszyk">
   w nagłówku — na oknie 1280 px drawer i tak dostaje .is-mobile. Dlatego ŻADNA
   reguła układu nie może wisieć na tych klasach: szerokością panelu steruje
   media query OKNA, a układ pozycji nadpisujemy tak, by wyglądał identycznie
   przy .is-mobile, .is-large i bez żadnej z nich.
   ------------------------------------------------------------ */
/* przycisk w nagłówku: licznik sztuk jak .ikona--koszyk .licznik */
.wc-block-mini-cart__button{color:var(--tusz);cursor:pointer}
/* tekst CIEMNY na akcencie: biel dawała 2,03:1, poniżej progu WCAG AA;
   #123330 na #00CDBF to 6,72:1 — ten sam duet, co .btn--glowny i przycisk
   „Do kasy" niżej. Bliźniacza reguła: .ikona--koszyk .licznik w motyw.css. */
.wc-block-mini-cart__badge{background:var(--akcent);color:#123330;border:0;font-size:11px;font-weight:700;min-width:17px;height:17px;border-radius:9px}
.wc-block-mini-cart__quantity-badge{position:relative}

/* 6a. OVERLAY (wzór .drawer__tlo) — rdzeń daje rgba(95,95,95,.35), makieta
   ciemniejsze przyciemnienie. Podwojona klasa, bo rdzeń ma tę samą (0,1,0). */
.wc-block-components-drawer__screen-overlay.wc-block-components-drawer__screen-overlay{background:rgba(10,14,11,.55);z-index:9999}

/* 6b. STOS: drawer renderuje się WEWNĄTRZ nagłówka (blok siedzi w header.php),
   a .naglowek ma position:sticky + z-index:50, czyli tworzy własny kontekst
   układania — cała jego zawartość maluje się z wartością 50, także panel
   o z-index:10000. Pasek „Do koszyka" na karcie produktu stał na 70, więc
   przykrywał dół drawera: przyciski „Przejdź do kasy" i „Zobacz koszyk".

   🔴 RUNDA 5 — NAPRAWA STRUKTURALNA JEST GDZIE INDZIEJ. Do 0.1.2 jedynym
   zabezpieczeniem były dwie reguły niżej, wiszące na klasie stanu `drawer-open`
   nadawanej przez BLOK WooCommerce. To cudza nazwa klasy: gdyby wydanie wtyczki
   ją zmieniło, oba warianty selektora chybiłyby naraz i po cichu — a objaw
   wróciłby dopiero na karcie produktu, po przewinięciu poniżej buyboksu,
   z otwartym mini-koszykiem.
   Dlatego pasek zjechał na z-index:45, czyli POD nagłówek (assets/css/motyw.css,
   blok „sticky Do koszyka"). Pasek stoi przy dolnej krawędzi okna, nagłówek
   przy górnej — geometrycznie nie mają jak się zasłonić, więc zależność jest
   trwała i nie ma czego pilnować.

   Reguły niżej zostają jako druga siatka bezpieczeństwa (podnoszą nagłówek
   ponad WSZYSTKO, co wtyczki potrafią wstawić między 50 a 9999, gdy drawer
   jest otwarty). Gdy klasa `drawer-open` nie pojawi się w DOM, nic się nie
   dzieje — naprawa nie zależy już od nich. */
.drawer-open .naglowek,
.naglowek:has(.drawer-open){z-index:9999}

/* 6c. PANEL (wzór .drawer z prototyp/styl.css) — pełna geometria po naszej
   stronie: prawa krawędź, pełna wysokość, białe tło, cień, bez ramki rdzenia. */
@keyframes m420-drawer-wjazd{from{transform:translateX(100%)}to{transform:translateX(0)}}
.wc-block-components-drawer.wc-block-components-drawer{position:fixed;top:0;right:0;bottom:0;left:auto;width:min(420px,100%);max-width:100%;height:auto;transform:none;display:flex;flex-direction:column;overflow:hidden;background:#fff;border-left:0;box-shadow:-8px 0 30px rgba(21,26,23,.18);color:var(--tusz);z-index:10000}
/* wjazd z prawej: własne klatki zamiast `slidein` rdzenia (tamten animuje
   transform do wartości ze zmiennych, więc przy naszej geometrii wywoziłby
   panel poza ekran). 0,3,0 — pewnie przebija regułę rdzenia (0,2,0). */
.wc-block-components-drawer__screen-overlay--with-slide-in .wc-block-components-drawer.wc-block-components-drawer{animation-duration:.3s;animation-name:m420-drawer-wjazd}
/* zjazd: rdzeń przy zamykaniu daje transform:translateX(0) (u niego = poza
   ekran, u nas = na miejscu), więc mówimy wprost, dokąd panel ma odjechać;
   samo przejście .3s zostaje z rdzenia (--with-slide-out) */
.wc-block-components-drawer__screen-overlay--is-hidden .wc-block-components-drawer.wc-block-components-drawer{transform:translateX(100%)}
/* pasek administracyjny WP (Paweł ogląda sklep zalogowany): panel zaczyna się
   pod nim. Rdzeń załatwia to na .__content (0,2,0) — my na panelu, a tamtą
   regułę zerujemy niżej, żeby wysokości nie odejmować dwa razy. */
.admin-bar .wc-block-components-drawer.wc-block-components-drawer{top:var(--wp-admin--admin-bar--height,32px)}
/* krótkie okno — parytet z regułą rdzenia @media(max-height:500px):
   przewijamy cały panel, bo stopka i lista nie mieszczą się obok siebie */
@media screen and (max-height:500px){
  .wc-block-components-drawer.wc-block-components-drawer{overflow-y:auto}
}
/* wąskie OKNO (nie klasa .is-mobile bloku!) → panel na pełną szerokość,
   jak @media(max-width:640px){.drawer{width:100%}} w makiecie */
@media(max-width:560px){
  .wc-block-components-drawer.wc-block-components-drawer{width:100%}
}

/* 6d. ŁAŃCUCH WYSOKOŚCI WNĘTRZA — kolumna flex od panelu aż do listy pozycji.
   Rdzeń buduje ten łańcuch na height:100%, który pęka, gdy którykolwiek
   szczebel straci definiowaną wysokość (a pęka po cichu: treść zjeżdża poza
   panel albo znika). Kolumna flex + min-height:0 trzyma się sama.
   :not([hidden]) OBOWIĄZKOWO — blok chowa nieaktywny wariant (pusty/pełny
   koszyk) atrybutem [hidden], a reguła `.klasa[hidden]{display:none}` rdzenia
   ma tę samą specyficzność co nasza; bez :not() pokazalibyśmy oba naraz. */
.wc-block-components-drawer .wc-block-components-drawer__content.wc-block-components-drawer__content{flex:1 1 auto;min-height:0;height:auto;margin-top:0;display:flex;flex-direction:column;position:relative;padding:0}
.wc-block-components-drawer .wc-block-mini-cart__template-part.wc-block-mini-cart__template-part,
.wc-block-components-drawer .wp-block-woocommerce-mini-cart-contents.wp-block-woocommerce-mini-cart-contents{flex:1 1 auto;min-height:0;height:auto;display:flex;flex-direction:column;justify-content:flex-start;background:#fff;padding:0}
.wc-block-components-drawer .wp-block-woocommerce-filled-mini-cart-contents-block:not([hidden]),
.wc-block-components-drawer .wp-block-woocommerce-empty-mini-cart-contents-block:not([hidden]){flex:1 1 auto;min-height:0;height:auto;max-height:none;display:flex;flex-direction:column;justify-content:flex-start}

/* 6e. NAGŁÓWEK PANELU (wzór .drawer__naglowek): tytuł + krzyżyk.
   Rdzeń robi z tytułu wielki napis 2em z ujemnym marginesem dolnym i maską
   gradientową (miał przenikać pod listę) — u nas to zwykły pasek z kreską.
   padding-right 56px zostawia miejsce na krzyżyk, który rdzeń trzyma
   position:absolute w rogu treści. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title.wc-block-mini-cart__title{flex:none;display:flex;align-items:baseline;gap:6px;margin:0;padding:16px 56px 16px 18px;font-size:17px;font-weight:700;line-height:1.3;color:var(--tusz);background:#fff;border-bottom:1px solid var(--linia);-webkit-mask-image:none;mask-image:none}
/* zabezpieczenie na wersje bloku, w których tę samą klasę nosi i opakowanie,
   i nagłówek w środku — wtedy pasek i kreska rysowałyby się dwa razy */
.wc-block-mini-cart__drawer .wc-block-mini-cart__title .wc-block-mini-cart__title{padding:0;border:0;background:none;font-size:inherit}
/* krzyżyk: koloru NIE ustawiamy (rdzeń wymusza color:inherit!important) —
   dziedziczy --tusz z panelu, ustawionego w 6c. Reszta bez !important.
   ⚠ ARYTMETYKA: rdzeń daje przyciskowi padding:1em i margin:-1em, więc pudełko
   przesuwa się o 16 px w górę i w prawo względem podanych top/right. Zmierzone
   w przeglądarce: przy top:13/right:14 pudełko wystawało 2 px poza panel,
   a znak siedział 7 px nad środkiem paska tytułu. 19/16 wyrównuje jedno i drugie
   (pudełko 46×46 kończy się dokładnie na krawędzi panelu, znak w osi paska). */
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close{top:19px;right:16px;opacity:.75;border-radius:999px;z-index:3;cursor:pointer}
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:hover{opacity:1}
.wc-block-mini-cart__drawer .wc-block-components-button.wc-block-components-drawer__close:focus-visible{outline:2px solid var(--zielen);outline-offset:-2px}

/* 6f. LISTA POZYCJI (wzór .drawer__pozycje / .drawer__pozycja) — jedyny obszar,
   który się przewija. Nagłówek tabeli chowamy zawsze (rdzeń chowa go tylko
   przy .is-mobile, a my chcemy ten sam obraz w każdym wariancie). */
.wc-block-mini-cart__drawer .wc-block-mini-cart__items{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;padding:2px 18px 0}
.wc-block-mini-cart__drawer table.wc-block-cart-items{width:100%;margin:0;border-collapse:separate;border-spacing:0}
.wc-block-mini-cart__drawer .wc-block-cart-items__header{display:none}
/* WIERSZ: siatka 64 px / treść / cena — niezależnie od tego, czy blok dołoży
   .is-mobile (rdzeń robi wtedy `grid-template-columns:80px 132px`, czyli tor
   szeroki na 212 px w panelu szerokim na 420 px), czy zostawi układ tabelaryczny.
   Podwojona klasa wiersza daje 0,5,1 przeciw 0,4,1 rdzenia — wygrywamy bez
   względu na kolejność arkuszy. Separator rysujemy sami, więc gasimy ::after,
   którym rdzeń rozdziela wiersze (inaczej kreska byłaby podwójna). */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;column-gap:12px;row-gap:6px;align-items:start;padding:14px 0;border-bottom:1px solid var(--linia)}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row:last-child{border-bottom:0}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row::after{content:none;display:none}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__image{grid-column:1;grid-row:1;width:auto;padding:0}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__product{grid-column:2;grid-row:1;min-width:0;padding:0;justify-self:stretch}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__total{grid-column:3;grid-row:1;padding:0;justify-self:end;text-align:right;white-space:nowrap;font-size:15px;font-weight:800}
/* niektóre wersje bloku wystawiają ilość osobną komórką — schodzi wtedy pod
   nazwę, na całą szerokość poza miniaturą, zamiast rozbijać kolumny */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__quantity{grid-column:2/-1;grid-row:2;padding:0;vertical-align:baseline}
/* „Usuń" pokazujemy ZAWSZE (rdzeń chowa je przy .is-mobile, czyli u nas
   zawsze — a bez tego jedynym sposobem na usunięcie pozycji jest wejście
   na stronę koszyka). Wygląd odnośnika bierze się z sekcji 3. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__remove-link{display:inline-block;margin-top:4px;font-size:12.5px}
/* miniatura: kwadrat, wpisana w kadr, na jasnym tle (wzór .drawer__pozycja img).
   Selektor musi przebić regułę rdzenia
   `table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__image img{width:100%}`
   (0,3,2) — bez tego obraz bierze 100% komórki i zostaje pionowy, czyli ta sama
   wada, co B3/P8 na listingu. Podwojona klasa wiersza daje 0,5,2. */
/* :not([hidden]) jest tu OBOWIAZKOWE. WooCommerce trzyma w komorce ze zdjeciem
   DWA warianty naraz - obrazek w linku i obrazek goly - i przelacza je atrybutem
   hidden przez Interactivity API. Kazda nasza regula ustawiajaca display na tych
   elementach odslania ten, ktory mial zostac schowany, bo styl autora bije
   wbudowane [hidden]{display:none}. Objaw: dwie miniatury na kazdej pozycji
   koszyka (zgloszone 26.08). */
.wc-block-mini-cart__drawer .wc-block-cart-item__image>a:not([hidden]){display:block}
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__image img:not([hidden]){width:64px;height:64px;max-width:64px;object-fit:contain;background:var(--tlo-2);border-radius:var(--r-s);padding:4px;margin:0;display:block}
.wc-block-mini-cart__drawer .wc-block-components-product-name{font-size:14px;line-height:1.35}
.wc-block-mini-cart__drawer .wc-block-components-product-metadata{font-size:12px;margin-top:2px}

/* 6g. STOPKA (wzór .drawer__stopka): suma + dwa przyciski jeden pod drugim.
   sticky bottom — bezpiecznik na wypadek, gdyby łańcuch z 6d gdzieś pękł. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer{flex:none;position:sticky;bottom:0;background:#fff;border-top:1px solid var(--linia);padding:14px 18px;display:flex;flex-direction:column;gap:10px;margin:0}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-components-totals-item.wc-block-mini-cart__footer-subtotal{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14.5px;font-weight:600;margin:0;padding:0}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-subtotal .wc-block-components-totals-item__value{font-size:18px;font-weight:700;white-space:nowrap}
/* rdzeń układa przyciski w RZĄD (kolumnę robi dopiero poniżej 480 px okna) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions{display:flex;flex-direction:column;gap:8px;margin:0}
/* w kolumnie flex-grow rdzenia rozciągałby przyciski na wysokość — zdejmujemy
   go i dajemy pełną szerokość (0,4,0 przeciw 0,3,0 rdzenia) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wp-block-woocommerce-mini-cart-cart-button-block,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wp-block-woocommerce-mini-cart-checkout-button-block,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions .wp-block-button{display:flex;flex:none;width:100%;margin:0}
/* KOLEJNOŚĆ przez `order`, nie przez column-reverse: w szablonie bloku „Zobacz
   koszyk" bywa przed „Przejdź do kasy", a makieta chce kasy na górze. Sterując
   klasą, a nie pozycją w DOM, nie zależymy od wersji szablonu. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wp-block-woocommerce-mini-cart-checkout-button-block,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-checkout{order:1}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wp-block-woocommerce-mini-cart-cart-button-block,
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-actions .wc-block-mini-cart__footer-cart{order:2}
/* „Przejdź do kasy" jak .btn--glowny (akcent + ciemny tekst, 6,72:1).
   !important jak przy przyciskach w sekcji 2 — rdzeń maluje tło i cień
   własnymi regułami o wyższej specyficzności (m.in. .is-style-outline).
   DWA SELEKTORY NA PRZYCISK, bo arkusz rdzenia zna tylko opakowania
   (.wp-block-woocommerce-mini-cart-*-button-block), a klasy
   .wc-block-mini-cart__footer-checkout/-cart siedzą w markupie bloku i bywają
   inne w innych wersjach: jeden selektor łapie odnośnik po jego własnej klasie,
   drugi — przycisk w środku opakowania. */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-checkout-button-block .wc-block-components-button{display:inline-flex;align-items:center;justify-content:center;width:100%;background:var(--akcent)!important;color:#123330!important;border:0!important;border-radius:999px;font-weight:700;font-size:15px;line-height:1.2;padding:13px 26px;box-shadow:none!important;text-decoration:none}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-checkout:hover,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-checkout-button-block .wc-block-components-button:hover{background:var(--akcent-2)!important;color:#123330!important}
/* „Zobacz koszyk" jak .btn--obrys; box-shadow!important gasi obrys rysowany
   przez rdzeń cieniem wewnętrznym (.is-style-outline{box-shadow:inset 0 0 0 1px}) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-cart-button-block .wc-block-components-button{display:inline-flex;align-items:center;justify-content:center;width:100%;background:#fff!important;color:var(--zielen)!important;border:2px solid var(--zielen)!important;border-radius:999px;font-weight:700;font-size:15px;line-height:1.2;padding:11px 26px;box-shadow:none!important;text-decoration:none}
.wc-block-mini-cart__drawer .wc-block-mini-cart__footer-cart:hover,
.wc-block-mini-cart__drawer .wp-block-woocommerce-mini-cart-cart-button-block .wc-block-components-button:hover{background:var(--tlo-2)!important;color:var(--zielen)!important}

/* 6h. PUSTY KOSZYK w drawerze — komunikat na środku + przycisk obrysowy
   (rdzeń daje mu czarne tło na hover, stąd własna reguła stanu) */
.wc-block-mini-cart__drawer .wc-block-mini-cart__empty-cart-wrapper.wc-block-mini-cart__empty-cart-wrapper{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:28px 18px;text-align:center;color:var(--tusz-2)}
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a{display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--zielen);border-radius:999px;background:#fff;color:var(--zielen);font-weight:700;font-size:14.5px;padding:11px 22px;text-decoration:none}
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:hover,
.wc-block-mini-cart__drawer .wc-block-mini-cart__shopping-button a:focus{background:var(--zielen);border-color:var(--zielen);color:#fff}

/* ------------------------------------------------------------
   7. DROBIAZGI WSPÓLNE
   ------------------------------------------------------------ */
/* powiadomienia bloków (np. „dodano do koszyka") w design systemie */
.wc-block-components-notice-banner{border-radius:var(--r-s);font-size:14.5px}
.wc-block-components-notice-banner.is-success{border-color:#b8e6c4;background:#effaf1}
.wc-block-components-notice-banner.is-error{border-color:#f2c4c4;background:#fdf2f2}
.wc-block-components-notice-banner.is-info{border-color:#b8ede8;background:var(--zielen-tlo)}

/* nagłówki wewnętrzne bloków (np. „Podsumowanie zamówienia") */
.wc-block-components-title{font-size:18px;font-weight:700}

/* ładowanie/szkielety bloków — nie migają obcym kolorem */
.wc-block-components-spinner{color:var(--akcent-2)}


/* ==========================================================================
 * Mini-koszyk: bez powtorzonego opisu (26.08)
 * ========================================================================== */

/* WooCommerce wrzuca do wiersza koszyka KROTKI OPIS produktu, a nasze opisy
   zaczynaja sie od pogrubionej nazwy - w efekcie klient widzial te sama nazwe
   dwa razy pod rzad, a pod nia akapit marketingowy w waskim panelu. W koszyku
   klient juz wie, co dodal; potrzebuje nazwy, ceny i sztuk.

   Chowamy WYLACZNIE __description. Element obok,
   .wc-block-components-product-details, niesie wybrane warianty (kolor, rozmiar)
   i musi zostac - bez niego klient nie odrozni dwoch pozycji tego samego
   produktu. */
/* 🔴 OPIS PRODUKTU ZNIKA ZE WSZYSTKICH TRZECH WIDOKOW koszyka: wysuwanego
   panelu, strony koszyka i podsumowania zamowienia (dyspozycja Pawla 26.08).
   WooCommerce wstawia tam krotki opis produktu, a nasze opisy zaczynaja sie od
   pogrubionej nazwy — klient widzial te sama nazwe dwa razy pod rzad, a pod nia
   akapit marketingowy. W koszyku klient juz wie, co dodal.

   ⚠ Chowamy caly `.wc-block-components-product-metadata`, ale NIE
   `.wc-block-components-product-details` — ten drugi niesie wybrane warianty
   (kolor, rozmiar) i bez niego nie da sie odroznic dwoch pozycji tego samego
   produktu. */
/* ⚠ PODWOJONA KLASA, i to nie jest ozdobnik. Pojedyncza `.wc-block-…-metadata`
   ma specyficznosc (0,1,0) i PRZEGRYWA z regula rdzenia blokow, ktora ustawia
   temu elementowi `display:flex`. Sprawdzone pomiarem na zywym sklepie:
   przy pojedynczej klasie element zostawal widoczny (display:flex, 31 px
   wysokosci), przy podwojonej znika. Zasada motywu: podnosimy specyficznosc
   powtorzona klasa, nigdy !important. */
.wc-block-components-product-metadata.wc-block-components-product-metadata{display:none}

/* Regula zweryfikowana na zywym sklepie 26.08. Dwie poprzedzajace ja poprawki
   (:not([hidden]) przy regulach obrazka i linku) usuwaja PRZYCZYNE, ta zamyka
   sprawe od strony skutku - i to ona zostala sprawdzona pomiarem.

   Dlaczego az taki dlugi selektor: regula ustawiajaca obrazkom display:block
   ma specyficznosc (0,5,2), bo licytuje sie ze stylami rdzenia blokow. Krotsza
   regula z [hidden] ma (0,2,1) i PRZEGRYWA - sprawdzone, obrazek dalej byl
   widoczny. Musimy wejsc na ten sam poziom i dolozyc atrybut.

   Zero !important: przy rownej mocy rozstrzyga specyficznosc, a nasza jest
   wyzsza o jeden atrybut. */
.wc-block-mini-cart__drawer table.wc-block-cart-items .wc-block-cart-items__row.wc-block-cart-items__row .wc-block-cart-item__image img[hidden]{display:none}
.wc-block-mini-cart__drawer .wc-block-cart-item__image>a[hidden]{display:none}


/* ==========================================================================
 * Podsumowanie zamowienia: nazwa produktu ma sie miescic (26.08)
 * ==========================================================================
 *
 * 🔴 OBJAW: przy produkcie z przecena nazwa lamala sie po JEDNYM ZNAKU
 * („Fenix / Titanium / PRO+ – / waporyz / ator do…"). Zmierzone na zywo:
 * kontener 284 px, z czego kolumna z cena zajmowala 138 px, a na nazwe
 * zostawalo 61 px.
 *
 * 🔑 PRZYCZYNA: odznaka „Oszczedzasz X zl" siedzi w kolumnie ceny i ma
 * `white-space:nowrap`. Nie da sie jej zlamac, wiec rozpycha swoja kolumne,
 * a opis dostaje resztki. Bez przeceny odznaki nie ma i wszystko wyglada
 * normalnie — dlatego usterka pokazywala sie tylko czesci klientow.
 *
 * ROZWIAZANIE: cena i odznaka schodza do WLASNEGO WIERSZA pod opisem
 * (`flex:1 0 100%`), rozsuniete na boki. Nazwa dostaje wtedy cala szerokosc
 * obok miniatury — zmierzone 248 px zamiast 61.
 *
 * ⚠ Nie idziemy droga `max-width` na kolumnie ceny: przy dluzszej kwocie albo
 * innym jezyku odznaka znow rozepchnie kolumne, tylko mniej. Wiersz wlasny
 * jest odporny na tresc. */
.wc-block-components-order-summary-item{flex-wrap:wrap}
.wc-block-components-order-summary-item__image{flex:0 0 auto}
/* 🔴 `flex:1 1 0`, NIE `1 1 auto` — i to jest cala poprawka.
   Przy `auto` baza opisu to szerokosc jego TRESCI. Dluga nazwa produktu robila
   ja szersza niz miejsce obok miniatury, wiec przy wlaczonym zawijaniu opis
   ZESKAKIWAL do nastepnego wiersza i miniatura zostawala sama u gory. Baza 0
   kaze mu sie KURCZYC zamiast zawijac: miniatura i opis zostaja w jednym
   wierszu, a zawija sie tylko to, co ma zawinac — wiersz z cena.
   Zmierzone po poprawce: miniatura x0, opis x48 w tym samym wierszu,
   cena wlasny wiersz nizej; wysokosc pozycji 171 px zamiast 245. */
.wc-block-components-order-summary-item__description{flex:1 1 0;min-width:0}
.wc-block-components-order-summary-item__total-price{flex:1 0 100%;text-align:left;margin-top:4px;
  display:flex;align-items:baseline;justify-content:space-between;gap:8px}


/* --- Podsumowanie zamowienia: bez powtorzonej ceny -------------------------
   W waskim podsumowaniu cena stala DWA RAZY pod soba: raz jako cena jednostkowa
   („319,00 zl  279,00 zl") i zaraz nizej jako kwota pozycji („279,00 zl").
   Przy jednej sztuce to ta sama liczba dwa razy.

   ⚠ Zostawiamy odznake „Oszczedzasz X zl" — niesie informacje, ktorej nie ma
   nigdzie indziej, i to ona jest tu argumentem sprzedazowym.

   ⚠ Regula celuje WYLACZNIE w podsumowanie zamowienia. Na stronie koszyka ta
   sama kwota stoi we WLASNEJ KOLUMNIE i przy ilosci wiekszej niz jedna pokazuje
   co innego niz cena jednostkowa — tam zostaje. */
.wc-block-components-order-summary-item .wc-block-cart-item__total-price-and-sale-badge-wrapper>.price{display:none}
.wc-block-components-order-summary-item__total-price{justify-content:flex-start}

/* ==========================================================================
 * RUNDA 14 (29.08) — cross-selle koszyka i podsumowanie zamowienia
 * ========================================================================== */

/* --- Cross-selle w koszyku: NOWE nazwy klas -------------------------------
 * WooCommerce przemianowal blok. Nasze reguly z sekcji 3b celuja w
 * `.wc-block-cart__cross-sells` i `…__cross-sells-product-list` — tych klas
 * na stronie JUZ NIE MA, wiec cala siatka byla martwa i kafle szly jeden pod
 * drugim na pelna szerokosc (606 px wysokosci sztuka). Dzis rdzen renderuje:
 *
 *   div.wp-block-woocommerce-cart-cross-sells-block
 *     h2.wp-block-heading
 *     div                        ← bezklasowy kontener listy
 *       div.cross-sells-product  ← kafel (ma juz wlasny przycisk „Dodaj do koszyka")
 *
 * Stare selektory zostawiamy — starsze wydania Woo nadal ich uzywaja.
 *
 * ⚠ Kafel dostaje position:relative z tego samego powodu co kafel FBT na karcie
 * produktu: `<span class="screen-reader-text">` z ceny ma position:absolute bez
 * `left` i bez bloku zawierajacego ucieka poza przewijany tor, rozpychajac strone.
 * Na koszyku dawalo to 24 px poziomego przewijania. */
.wp-block-woocommerce-cart-cross-sells-block>div{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
/* 🔴 SPECYFICZNOSC (0,4,0) — NIE MNIEJ.
 * Rdzen Woo ustawia kafel tak (cart.css):
 *   .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block
 *   .cross-sells-product{box-sizing:content-box;display:inline-block;
 *                        padding-right:5%;width:30%}
 * czyli (0,3,0) — a `cart.css` laduje sie PO `bloki.css` (sprawdzone na zywo),
 * wiec przy remisie wygrywa rdzen. Nasza wczesniejsza wersja miala rowniez
 * (0,3,0) i przegrywala: kafel zostawal przy `width:30%` LICZONYM OD KOLUMNY
 * siatki, czyli 30% z 249 px = 75 px. Nazwa produktu lamala sie po jednym
 * slowie na wiersz, a przycisk „Dodaj do koszyka" robil sie kolem 105×102 px.
 *
 * Dlatego powtarzamy TAKZE klase `.wp-block-woocommerce-cart` — (0,4,0) bije
 * rdzen niezaleznie od kolejnosci arkuszy. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product.cross-sells-product{
  position:relative;box-sizing:border-box;display:block;
  width:auto;min-width:0;max-width:none;
  padding:0;margin:0;text-align:left}
/* Przycisk na pelna szerokosc kafla — inaczej pigulka z motywu przy waskim
   kaflu zwija sie w kolo. */
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button{
  display:block;width:100%;margin-top:10px}
.wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product .wp-block-button :is(a,button){
  display:flex;align-items:center;justify-content:center;width:100%;box-sizing:border-box;
  padding:10px 14px;font-size:14px;line-height:1.25;text-align:center}
.wp-block-woocommerce-cart-cross-sells-block .cross-sells-product img{max-width:100%;height:auto}

/* Tabela pozycji koszyka rozpychala strone o 30 px: przy `table-layout:auto`
   szerokosc kolumn wyznacza najdluzsze slowo w nazwie produktu, a rdzen nie ma
   na to zadnego ogranicznika. Ustalony uklad tnie kolumny proporcjonalnie. */
.wc-block-cart-items{table-layout:fixed;width:100%;max-width:100%}

/* Telefon: tor przewijany palcem zamiast trzech ekranow scrollowania w dol.
   Koszyk ma prowadzic do platnosci, a nie zapraszac do dalszych zakupow —
   kafle sa wezsze niz ekran, wiec kolejny wystaje zza krawedzi i widac,
   ze da sie przewinac, ale nie zajmuja calego widoku. */
@media(max-width:820px){
  .wp-block-woocommerce-cart-cross-sells-block>div{
    display:flex;overflow-x:auto;gap:12px;padding-bottom:6px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  .wp-block-woocommerce-cart .wp-block-woocommerce-cart-cross-sells-block .cross-sells-product.cross-sells-product{
    flex:0 0 58%;width:auto;max-width:200px;scroll-snap-align:start}
}

/* --- Podsumowanie zamowienia: rozwijanie na waskim ekranie -----------------
 * 🔴 BLAD RDZENIA, NIE MOTYWU — sprawdzone: to samo dzieje sie na martfury.
 *
 * Rdzen chowa tresc podsumowania czystym CSS-em:
 *   @container (max-width: 699px) { …__content { display:none } }
 *   …__content.is-open { display:block }
 * a `is-open` przelacza REACT — ale handler wpina TYLKO wtedy, gdy jego wlasny
 * pomiar szerokosci (useContainerWidthContext) zwroci isMedium/isSmall/isMobile:
 *   const u = (isMedium||isSmall||isMobile) ? {role:'button', onClick…} : {};
 * Na tym sklepie ten pomiar nie dochodzi do skutku — blok nie dostaje ZADNEJ
 * klasy rozmiaru (ani is-large, ani is-mobile), a `div` tytulu nie ma w propsach
 * Reacta nic poza className i children. Efekt: CSS chowa tresc, a klikac nie ma
 * czego. Na komputerze problemu nie widac, bo tam kontener > 699 px.
 * (W konsoli leci przy tym `ReferenceError: sprintf is not defined` — takze na
 * starym motywie; to osobna, wczesniejsza usterka witryny.)
 *
 * Obejscie: klasa na <body> (Reactowi nic do niej, wiec przetrwa przerysowanie)
 * plus nasluch w motyw.js. Celowo NIE dopisujemy `is-open` do samych elementow
 * bloku — React nadpisuje ich className przy kazdej zmianie koszyka. */
body.m420-podsumowanie-otwarte .wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__content{display:block}
body.m420-podsumowanie-otwarte .wp-block-woocommerce-checkout-order-summary-block
  .wc-block-components-checkout-order-summary__title-icon{transform:rotate(180deg)}
.wp-block-woocommerce-checkout-order-summary-block .wc-block-components-checkout-order-summary__title-icon{
  transition:transform .18s ease}

/* --- Metody wysylki i platnosci: JEDNA ramka, nie dwie --------------------
 * Rdzen Woo, gdy jakas opcja jest zaznaczona, dokleja wariant „highlight-checked"
 * i rysuje TRZY rzeczy naraz (assets/client/blocks/checkout.css):
 *
 *   .…--highlight-checked:after            → ramka wokol CALEJ grupy, radius 4 px
 *   .…--highlight-checked label.…--checked-option-highlighted
 *                                          → box-shadow:inset 0 0 0 1.5px, radius 4 px
 *   .…--highlight-checked .…__option:after → wlosowa kreska miedzy pozycjami
 *
 * Efekt na ekranie: kazda pozycja ma juz nasza szara ramke 14 px, a na to nachodzi
 * pudelko o mniejszym zaokragleniu — raz wokol wybranej opcji, raz wokol calej
 * listy. Przy dwoch listach (wysylka i platnosc) daje to dwa zbedne prostokaty.
 *
 * ⚠ Specyficznosc: selektory rdzenia maja (0,2,1). Powtarzamy nazwe klasy grupy,
 * zeby wejsc na (0,3,1) — samo dopisanie reguly nizej w pliku NIE wystarczy,
 * bo checkout.css potrafi zaladowac sie po arkuszu motywu.
 *
 * Wybor nadal widac: nasza regula `:has(input:checked)` (wyzej w tym pliku) daje
 * zielona ramke i pastelowe tlo, w tym samym zaokragleniu co reszta listy. */
/* Odstepy miedzy opcjami WYSYLKI takie same jak miedzy metodami PLATNOSCI.
 * Metody platnosci to `div.…-accordion-option` i nasze `margin-bottom:10px`
 * dziala na nich bez przeszkod. Opcje wysylki to `label.…__option`, a rdzen
 * zeruje im margines regula `.wc-block-components-radio-control
 * .wc-block-components-radio-control__option{margin:0}` — specyficznosc (0,2,0)
 * bije nasza (0,1,0), wiec kafle wysylki stykaly sie bokami, a platnosci nie.
 *
 * Powtarzamy klase kontenera, zeby wejsc na (0,3,0), i celujemy w DZIECKO
 * BEZPOSREDNIE: etykieta schowana w srodku akordeonu platnosci ma zostac bez
 * marginesu, inaczej kazda metoda platnosci urosłaby o 10 px od wewnatrz. */
.wc-block-components-radio-control.wc-block-components-radio-control>.wc-block-components-radio-control__option{
  margin-bottom:10px}

/* Przyklejone podsumowanie na KASIE ma inny odstęp niż reszta sklepu.
 * `top:130px` (wyżej w tym pliku) pasuje do pełnego nagłówka: pasek promocyjny
 * + rząd z logo i wyszukiwarką + pasek kategorii. Na stronie zamówienia nagłówek
 * jest okrojony do samego wyśrodkowanego logo (inc/kasa.php) i ma około 70 px,
 * więc podsumowanie zatrzymywało się 60 px za nisko — nad nim wisiała pusta
 * biała przestrzeń przez całą długość przewijania. */
.m420-kasa .wp-block-woocommerce-checkout .wc-block-checkout.wc-block-components-sidebar-layout>.wc-block-checkout__sidebar{
  top:88px}

.wc-block-components-radio-control.wc-block-components-radio-control--highlight-checked::after{
  content:none}
.wc-block-components-radio-control.wc-block-components-radio-control--highlight-checked
  label.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control.wc-block-components-radio-control--highlight-checked
  div.wc-block-components-radio-control-accordion-option--checked-option-highlighted{
  box-shadow:none;border-radius:var(--r);border-color:var(--zielen);background:var(--zielen-tlo)}
.wc-block-components-radio-control.wc-block-components-radio-control--highlight-checked
  .wc-block-components-radio-control__option::after,
.wc-block-components-radio-control.wc-block-components-radio-control--highlight-checked
  div.wc-block-components-radio-control-accordion-option::after{
  content:none}

/* --- Cross-selle koszyka: nagłówek wielkosci tytulu strony -----------------
 * Rdzen daje temu naglowkowi klase `has-large-font-size` z presetow WordPressa,
 * czyli wiekszy stopien niz sam tytul „Koszyk". Na telefonie wygladalo to jak
 * nowa sekcja strony, a nie dopisek pod lista zakupow. */
.wp-block-woocommerce-cart-cross-sells-block>h2.wp-block-heading,
.wp-block-woocommerce-cart-cross-sells-block>h2{
  /* ⚠ !important nie z lenistwa: WordPress wypisuje presety stopnia pisma jako
     `.has-large-font-size{font-size:var(--wp--preset--font-size--large)!important}`
     w globalnych stylach. Bez tego samego priorytetu regula nie ma jak wygrac,
     bez wzgledu na specyficznosc. Wartosc IDENTYCZNA z h1 strony (motyw.css:49),
     zeby „Moze Cie zainteresowac" bylo dokladnie tej samej wielkosci co „Koszyk". */
  font-size:clamp(26px,4vw,38px)!important;line-height:1.25;letter-spacing:-.02em;margin:0 0 14px}