/* Koszyk i zamowienie */

.woocommerce-checkout .fr-main,
.woocommerce-cart .fr-main{padding-block:32px 72px}

/* Przelacznik prywatnie kontra firma */
.fr-typ{margin-bottom:28px}
.fr-typ > label{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fr-typ .woocommerce-input-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
/* Radio schowane wizualnie, ale nadal klikalne przez etykiete i nadal
   w kolejnosci tabulacji. Samo position:absolute bez clip zostawialo je
   na wierzchu, gdzie przykrywalo etykiete i przechwytywalo klikniecia. */
.fr-typ input[type="radio"]{position:absolute;width:1px;height:1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fr-typ label.radio{display:flex;align-items:center;gap:10px;margin:0;padding:18px 20px;
  border:1px solid var(--line);background:var(--ivory);cursor:pointer;
  font-size:17px;font-weight:700}
.fr-typ input[type="radio"]:checked + label.radio{border:2px solid var(--ink);background:var(--tint)}
.fr-typ input[type="radio"]:focus-visible + label.radio{outline:2px solid var(--ink);outline-offset:2px}

/* Ostrzezenie o NIP-ie, ktorego nie da sie dopisac pozniej */
.fr-checkout__nip-uwaga{margin:0 0 24px;padding:16px 20px;background:var(--tint);
  border-left:3px solid var(--ink);font-size:16px;line-height:1.65}
.fr-checkout__info{margin:0 0 18px;padding:14px 18px;background:var(--stone);
  font-size:16px;line-height:1.6}

/* Pola */
.woocommerce-checkout .form-row{margin-bottom:18px}
.woocommerce-checkout label{display:block;font-size:15px;font-weight:700;margin-bottom:7px}
.woocommerce-checkout .input-text,
.woocommerce-checkout select{width:100%;padding:14px;border:1px solid var(--line);
  background:#fff;font-family:var(--f-body);font-size:17px;color:var(--ink)}
.woocommerce-checkout .input-text:focus-visible,
.woocommerce-checkout select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.woocommerce-checkout .required{color:#8A3A2B;text-decoration:none}
.fr-firma[hidden]{display:none}
/* Podswietlenie pierwszego nowego pola po rozwinieciu (zamowienie.js).
   Sama nakladka, gasnie przez opacity; pole zostaje nietkniete. */
.fr-podswietl{position:absolute;pointer-events:none;background:var(--tint);mix-blend-mode:multiply;z-index:1}

/* Pobieranie danych po NIP */
.fr-nip-pobierz{margin-top:10px;height:44px;padding-inline:18px;background:var(--ivory);
  border:1px solid var(--ink);font-family:var(--f-body);font-size:15px;font-weight:700;cursor:pointer}
.fr-nip-pobierz[disabled]{opacity:.5;cursor:progress}
.fr-nip-status{display:block;margin-top:8px;font-size:14px;color:var(--muted)}

/* Uklad strony zamowienia */
.woocommerce-checkout .fr-zamowienie__uklad{display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:64px;align-items:start}
.woocommerce-checkout h3{margin:0 0 18px;font-family:var(--f-display);font-size:27px;font-weight:500}
#order_review{position:sticky;top:24px;background:var(--tint);padding:28px}
#order_review table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:16px}
#order_review th,#order_review td{text-align:left;padding:10px 0;border-bottom:1px solid var(--line)}
#order_review td{text-align:right}
#order_review .order-total .amount{font-family:var(--f-display);font-size:27px}
#place_order{width:100%;height:64px;background:var(--ink);color:var(--ivory);border:0;
  font-family:var(--f-body);font-size:18px;font-weight:700;cursor:pointer}
#place_order{transition:transform 160ms var(--fr-ease-out)}
@media (prefers-reduced-motion:no-preference){ #place_order:active:not(:disabled){transform:scale(.97)} }
.woocommerce-checkout-payment ul{list-style:none;margin:0 0 20px;padding:0}
.woocommerce-checkout-payment li{padding:14px 0;border-bottom:1px solid var(--line)}

/* Koszyk */
/* ============================== KOSZYK ==============================
   Uklad dwukolumnowy: pozycje z lewej, podsumowanie z prawej i przyklejone.
   Podsumowanie pod tabela oznaczalo, ze przy trzech fartuchach przycisk
   „Przejdz do platnosci" stal pod zgieciem, a pasek darmowej dostawy
   razem z nim.

   NIE NADPISUJEMY cart.php. Tabela zostaje tabela WooCommerce, bo
   wc-cart.js po zmianie ilosci podmienia zawartosc form.woocommerce-cart-form
   i div.cart_totals na to, co odesle serwer. Wlasny szablon musialby
   trzymac te same klasy, nazwy pol i przyciski, a kazda pomylka konczy
   sie koszykiem, ktory przestaje sie przeliczac bez jednego bledu
   w logu. Caly wyglad robimy arkuszem. */

.woocommerce-cart .fr-proza > .woocommerce{display:grid;
  grid-template-columns:minmax(0,1fr) 360px;gap:0 56px;align-items:start}
.woocommerce-cart .woocommerce-notices-wrapper{grid-column:1 / -1}
.woocommerce-cart .woocommerce-cart-form{grid-column:1;grid-row:2}
.woocommerce-cart .cart-collaterals{grid-column:2;grid-row:2;position:sticky;top:20px}

/* Najpierw zdejmujemy chrom WooCommerce: ramka wokol tabeli,
   zaokraglone rogi i kreski nad komorkami. Motyw nie ma zaokraglen
   nigdzie indziej, a szara kreska rgba(0,0,0,.1) nie jest kolorem
   z palety. Regula WooCommerce ma dwie klasy i dwa elementy, wiec
   krotszy selektor po prostu przegrywal i nikt tego nie widzial
   inaczej niz jako „jakos tak inaczej wyglada”. */
.woocommerce-cart .woocommerce table.shop_table,
.woocommerce-checkout .woocommerce table.shop_table{border:0;border-radius:0;
  border-collapse:collapse}
.woocommerce-cart .woocommerce table.shop_table td,
.woocommerce-cart .woocommerce table.shop_table th,
.woocommerce-checkout .woocommerce table.shop_table td,
.woocommerce-checkout .woocommerce table.shop_table th{border-top:0}

/* Pozycje koszyka */
.woocommerce-cart .woocommerce-cart-form table.shop_table{width:100%;border-collapse:collapse;font-size:16px}
.woocommerce-cart .woocommerce-cart-form thead th{text-align:left;padding:0 10px 12px;
  border-bottom:2px solid var(--ink);font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.woocommerce-cart .woocommerce-cart-form thead th.product-price,
.woocommerce-cart .woocommerce-cart-form thead th.product-subtotal{text-align:right}
.woocommerce-cart .woocommerce-cart-form tbody td{padding:22px 10px;border-bottom:1px solid var(--line);
  vertical-align:middle}
.woocommerce-cart .woocommerce-cart-form td.product-remove{padding-left:0;width:34px}
.woocommerce-cart .woocommerce-cart-form td.product-thumbnail{width:104px}
.woocommerce-cart .woocommerce-cart-form td.product-thumbnail img{width:88px;height:auto;display:block}
.woocommerce-cart .woocommerce-cart-form td.product-name a{font-family:var(--f-display);font-size:19px;
  text-decoration:none;line-height:1.3}
.woocommerce-cart .woocommerce-cart-form td.product-name a:hover{text-decoration:underline}
/* Personalizacja i warianty: to sa dopiski pod nazwa, nie druga nazwa. */
.woocommerce-cart .woocommerce-cart-form td.product-name .variation,
.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation{margin:8px 0 0;font-size:14px;
  line-height:1.5;color:var(--muted)}
/* Pytania personalizacji: pytanie i odpowiedz w jednym wierszu.
   WooCommerce floatuje dt w lewo i zostawia dd jako inline, wiec trzy
   pytania staly jedno pod drugim po lewej, a trzy odpowiedzi ladowaly
   OBOK SIEBIE w jednej linii. Na ekranie czytalo sie to jako jedno
   pytanie i „Nie Nie Nie”. Zmierzone: dt na y 408, 471, 513, a wszystkie
   trzy dd na y 451. Float trzeba skasowac, bo sam display:inline
   przegrywa z nim w kaskadzie. */
.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation{display:grid;
  grid-template-columns:auto 1fr;gap:2px 8px}
.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dt{float:none;display:block;
  margin:0;font-weight:400;color:var(--muted)}
.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dd{float:none;display:block;
  margin:0;color:var(--ink)}
.woocommerce-cart .woocommerce-cart-form td.product-name dl.variation dd p{display:block;margin:0}
.woocommerce-cart .woocommerce-cart-form td.product-price,
.woocommerce-cart .woocommerce-cart-form td.product-subtotal{text-align:right;white-space:nowrap}
.woocommerce-cart .woocommerce-cart-form td.product-subtotal{font-weight:700;padding-right:0}
.woocommerce-cart .woocommerce-cart-form td.product-quantity{width:104px}
.woocommerce-cart .woocommerce-cart-form .quantity input.qty{width:76px;height:46px;padding:0 6px;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink);
  font-family:inherit;font-size:16px;text-align:center}

/* Krzyzyk usuwania. Duzy obszar klikalny, bo na telefonie sasiaduje
   z polem ilosci i pomylka kosztuje cala pozycje.

   WYJASNIENIE DO !important: WooCommerce ustawia temu linkowi
   „color: red !important” we wlasnym arkuszu woocommerce-general,
   ktorego motyw nie zdejmuje, bo siedza w nim style komunikatow
   i formularzy. Zadna specyficznosc tego nie przebije. Czerwien
   AA0000 nie jest kolorem z palety i obok zlota wyglada jak blad
   strony, a nie jak przycisk. Zostaje zamiar: spokojny krzyzyk,
   ktory dopiero pod kursorem mowi „to kasuje” (kontrast 5,83
   na kamieniu). */
.woocommerce-cart .woocommerce-cart-form a.remove{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;color:var(--muted) !important;font-size:22px;line-height:1;
  text-decoration:none}
.woocommerce-cart .woocommerce-cart-form a.remove:hover,
.woocommerce-cart .woocommerce-cart-form a.remove:focus-visible{background:var(--stone);color:#8A3A2B !important}

/* Kupon i przeliczenie */
.woocommerce-cart .woocommerce-cart-form td.actions{display:flex;flex-wrap:wrap;gap:12px;
  justify-content:space-between;align-items:center;padding:24px 0 0;border-bottom:0}
.woocommerce-cart .woocommerce-cart-form .coupon{display:flex;flex-wrap:wrap;gap:10px}
.woocommerce-cart .woocommerce-cart-form .coupon #coupon_code{height:48px;min-width:190px;padding:0 14px;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink);
  font-family:inherit;font-size:16px}
.woocommerce-cart .woocommerce-cart-form td.actions .button{height:48px;padding-inline:20px;
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.woocommerce-cart .woocommerce-cart-form td.actions .button:hover{background:var(--ink);color:var(--ivory)}
/* WooCommerce wylacza „Zaktualizuj koszyk", dopoki ilosc sie nie zmieni.
   Bez tej reguly przycisk wyglada na zwykly i klikniecie nic nie robi. */
.woocommerce-cart .woocommerce-cart-form td.actions .button[disabled]{opacity:.4;cursor:default;
  border-color:var(--line);color:var(--muted)}
.woocommerce-cart .woocommerce-cart-form td.actions .button[disabled]:hover{background:transparent;color:var(--muted)}

/* Powrot do sklepu */
.fr-koszyk__powrot{margin:22px 0 0;font-size:16px}

/* Polecane pod koszykiem (cross-sells): zawsze dwa kafelki w rzedzie.
   Na komputerze stoja w waskiej kolumnie obok podsumowania, gdzie cztery
   kolumny ze sklepu daja kafelki po kilkadziesiat pikseli. */
.woocommerce-cart .cross-sells{margin-top:32px}
.woocommerce-cart .cross-sells > h2{margin:0 0 16px;font-family:var(--f-display);font-size:23px;font-weight:500}
.woocommerce-cart .cross-sells ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 14px;margin-bottom:0}
/* Clearfix z woocommerce-general w siatce zajmowal pierwsza komorke
   i kafelki stawaly schodkami. */
.woocommerce-cart .cross-sells ul.products::before,
.woocommerce-cart .cross-sells ul.products::after{content:none;display:none}
.woocommerce-cart .cross-sells .fr-card__title{font-size:16px}

/* Polo z tym samym logo, pod tabela koszyka */
.woocommerce-cart .fr-dopelnij{display:grid;grid-template-columns:120px 1fr;gap:20px;
  align-items:start;margin:28px 0 0;padding:22px;background:var(--tint);border:1px solid var(--line)}
.woocommerce-cart .fr-dopelnij__obraz img{display:block;width:120px;height:120px;object-fit:cover}
.woocommerce-cart .fr-dopelnij__nad{margin:0 0 6px;font-size:12px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.woocommerce-cart .fr-dopelnij__tytul{margin:0 0 8px;font-family:var(--f-display);font-size:23px;font-weight:500}
.woocommerce-cart .fr-dopelnij p{margin:0 0 8px;font-size:15px;line-height:1.55}
.woocommerce-cart .fr-dopelnij__cena{font-weight:600}
.woocommerce-cart .fr-dopelnij__uwaga{color:var(--muted)}
.woocommerce-cart .fr-dopelnij a.fr-dopelnij__btn{grid-column:2;justify-self:start;margin-top:-6px;
  height:48px;padding:0 22px;white-space:nowrap}
@media (max-width:600px){
  .woocommerce-cart .fr-dopelnij{grid-template-columns:84px 1fr;gap:14px;padding:16px}
  .woocommerce-cart .fr-dopelnij__obraz img{width:84px;height:84px}
  .woocommerce-cart .fr-dopelnij a.fr-dopelnij__btn{grid-column:1 / -1;justify-self:stretch;margin-top:0}
}

/* Podsumowanie */
.woocommerce-cart .cart_totals{background:var(--tint);padding:28px;margin:0}
.woocommerce-cart .cart_totals h2{margin:0 0 18px;font-size:24px}
.woocommerce-cart .cart_totals table{width:100%;border-collapse:collapse;font-size:16px}
.woocommerce-cart .cart_totals th{width:38%;text-align:left;padding:14px 0;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);vertical-align:top;border-bottom:1px solid var(--line)}
.woocommerce-cart .cart_totals td{text-align:right;padding:14px 0;
  border-bottom:1px solid var(--line)}
.woocommerce-cart .cart_totals tr:last-child th,
.woocommerce-cart .cart_totals tr:last-child td{border-bottom:0}
.woocommerce-cart .cart_totals .order-total td{font-family:var(--f-display);font-size:22px}
/* Metody wysylki to lista wyboru, a nie liczba, wiec czyta sie je z lewej. */
.woocommerce-cart .cart_totals ul#shipping_method{list-style:none;margin:0;padding:0;text-align:left}
.woocommerce-cart .cart_totals ul#shipping_method li{margin:0 0 8px;font-size:15px;line-height:1.4}
.woocommerce-cart .cart_totals ul#shipping_method li:last-child{margin-bottom:0}
.woocommerce-cart .cart_totals .woocommerce-shipping-destination{margin:10px 0 0;
  text-align:left;font-size:14px;color:var(--muted)}
.woocommerce-cart .cart_totals .shipping-calculator-button{font-size:14px}
.woocommerce-cart .wc-proceed-to-checkout{margin-top:22px}
/* Trzy klasy w selektorze, bo tyle ma regula WooCommerce
   (.woocommerce a.button.alt), ktora inaczej wygrywa i maluje
   NAJWAZNIEJSZY przycisk w sklepie na firmowy fiolet #7F54B3.
   Przycisk dzialal, wygladal jak przycisk, tylko nie byl nasz.
   Zlapane pomiarem 24.09.2026, bo na zrzucie ekranu fiolet obok
   zlota wyglada po prostu jak decyzja projektowa. */
.woocommerce-cart a.checkout-button.button.alt{display:inline-flex;align-items:center;
  justify-content:center;width:100%;height:64px;background:var(--ink);color:var(--ivory);
  text-decoration:none;font-size:18px;font-weight:700;border:0}
.woocommerce-cart a.checkout-button.button.alt:hover{background:var(--muted);color:var(--ivory)}

/* Kupon na stronie zamowienia.
   Ten sam przycisk co w koszyku. Bez tego wjezdza domyslny szary
   guzik WooCommerce (tlo #E9E6ED, tekst #515151), ktory nie jest ani
   naszym przyciskiem glownym, ani obrysowym. Formularz jest domyslnie
   zwiniety, wiec nikt tego nie widzi, dopoki nie ma kuponu w reku.
   Zlapane pomiarem 24.09.2026. */
.woocommerce-checkout .woocommerce-form-coupon-toggle{margin:0 0 20px}
.woocommerce-checkout .checkout_coupon{display:flex;flex-wrap:wrap;gap:10px;
  align-items:center;margin:0 0 24px;padding:0;border:0}
.woocommerce-checkout .checkout_coupon p{margin:0;width:auto;float:none}
.woocommerce-checkout .checkout_coupon input[type="text"]{height:48px;min-width:190px;
  padding:0 14px;border:1px solid var(--line);background:var(--ivory);color:var(--ink);
  font-family:inherit;font-size:16px}
.woocommerce-checkout .checkout_coupon .button{height:48px;padding-inline:20px;
  background:transparent;border:1px solid var(--ink);color:var(--ink);
  font-family:inherit;font-size:15px;font-weight:600;cursor:pointer}
.woocommerce-checkout .checkout_coupon .button:hover{background:var(--ink);color:var(--ivory)}

/* Pusty koszyk */
.fr-koszyk-pusty{max-width:52ch;padding-block:20px 8px}
.fr-koszyk-pusty__title{margin:0 0 14px;font-family:var(--f-display);font-size:34px;
  font-weight:500;letter-spacing:-.02em}
.fr-koszyk-pusty p{margin:0 0 24px;font-size:18px;line-height:1.7;color:var(--muted)}
.fr-koszyk-pusty__akcje{display:flex;flex-wrap:wrap;gap:14px}

/* Ile brakuje do darmowej dostawy.
   Stoi NAD podsumowaniem, a nie pod przyciskiem zakupu: po zdaniu
   „Przejdz do platnosci” nikt juz nie wraca po drugi fartuch.
   Wypelnienie idzie zlotem, bo zloto w tym motywie jest od linii
   i wypelnien, nigdy od tekstu. Liczbe niesie zdanie nad paskiem,
   a nie sam pasek, wiec dziala takze przy wylaczonych kolorach. */
.fr-darmowa{margin:0 0 22px;padding:16px 18px;background:var(--ivory);
  border:1px solid var(--line)}
.fr-darmowa__tekst{margin:0 0 10px;font-size:16px;line-height:1.5;color:var(--muted)}
.fr-darmowa__tekst strong{color:var(--ink)}
.fr-darmowa__tor{height:6px;background:var(--stone);overflow:hidden}
.fr-darmowa__pasek{display:block;height:100%;background:var(--gold)}
.fr-darmowa--osiagnieta{border-color:var(--gold)}
.fr-darmowa--osiagnieta .fr-darmowa__pasek{background:var(--gold-tekst)}

/* Na zamowieniu pasek siedzi w podsumowaniu po prawej, wiec ma wezszy
   margines i mniejszy tekst. */
#order_review .fr-darmowa{margin-bottom:16px;padding:13px 15px}
#order_review .fr-darmowa__tekst{font-size:15px}

/* Komunikaty koszyka i zamowienia.
   Selektor ma dwie klasy, bo tyle ma regula WooCommerce
   (.woocommerce .woocommerce-info). Przy krotszym selektorze komunikat
   dostawal niebieska kreske u gory i ikone z wlasnego fontu WooCommerce,
   ktorego motyw nie wczytuje, wiec w miejscu ikony stal prostokat
   z kodem znaku. */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error{margin:0 0 24px;padding:16px 20px;
  background:var(--tint);border:0;border-left:3px solid var(--ink);
  font-size:16px;line-height:1.6;list-style:none}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before{content:none}
.woocommerce .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-error{background:#F6E7E4;
  border-left-color:#8A3A2B;color:#5B2418}
/* „Cofnij?” obok komunikatu o usunieciu pozycji. */
.woocommerce .woocommerce-message .button,
.woocommerce-notices-wrapper .woocommerce-message .button{background:transparent;
  border:0;padding:0;color:var(--ink);font-family:inherit;font-size:16px;font-weight:700;
  text-decoration:underline;cursor:pointer}

@media (max-width:900px){
  .woocommerce-checkout .fr-zamowienie__uklad{grid-template-columns:1fr;gap:34px}
  #order_review{position:static;padding:20px}
  .fr-typ .woocommerce-input-wrapper{grid-template-columns:1fr}
  /* Koszyk na telefonie: jedna kolumna strony i pozycje jako kafelki.
     Szesc kolumn nie miesci sie na 375 px, a WooCommerce nie pomoze:
     jego wlasny arkusz na male ekrany jest w motywie wylaczony,
     bo ustawial siatke produktow po swojemu. Etykiety biora sie
     z data-title, ktore WooCommerce wpisuje do kazdej komorki. */
  .woocommerce-cart .fr-proza > .woocommerce{grid-template-columns:1fr;gap:34px}
  /* min-width:0, bo element siatki ma domyslnie `min-width:auto`,
     czyli nie da sie go zwezic ponizej wlasnej minimalnej szerokosci
     tresci. Tabela koszyka ma te minimalna szerokosc okolo 440 px,
     wiec formularz wystawal poza kolumne i strona przewijala sie
     w bok. Zmierzone przy oknie 375 px: kolumna 335, formularz 440. */
  .woocommerce-cart .woocommerce-cart-form,
  .woocommerce-cart .cart-collaterals{grid-column:1;grid-row:auto;position:static;min-width:0}
  .woocommerce-cart .woocommerce-cart-form table.shop_table,
  .woocommerce-cart .woocommerce-cart-form tbody tr.cart_item,
  .woocommerce-cart .cart_totals table{min-width:0;max-width:100%}

  .woocommerce-cart .woocommerce-cart-form thead{position:absolute;left:-9999px}
  .woocommerce-cart .woocommerce-cart-form table.shop_table,
  .woocommerce-cart .woocommerce-cart-form tbody,
  .woocommerce-cart .woocommerce-cart-form tbody tr,
  .woocommerce-cart .woocommerce-cart-form tbody td{display:block;width:auto}
  /* Kafelkiem staje sie WYLACZNIE wiersz pozycji. Ostatni wiersz tabeli
     to kupon i przeliczenie w jednej komorce na szesc kolumn; wpuszczony
     do tej samej siatki ladowal w kolumnie miniatury i przyciski mialy
     osiemdziesiat cztery piksele szerokosci. */
  .woocommerce-cart .woocommerce-cart-form tbody tr.cart_item{position:relative;display:grid;
    grid-template-columns:84px minmax(0,1fr);gap:6px 16px;
    padding:20px 0;border-bottom:1px solid var(--line)}
  .woocommerce-cart .woocommerce-cart-form tbody td{padding:0;border:0}
  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail{grid-row:1 / span 4;width:auto}
  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail img{width:84px}
  .woocommerce-cart .woocommerce-cart-form td.product-remove{position:absolute;top:16px;right:0;width:auto}
  .woocommerce-cart .woocommerce-cart-form td.product-price,
  .woocommerce-cart .woocommerce-cart-form td.product-subtotal,
  .woocommerce-cart .woocommerce-cart-form td.product-quantity{text-align:left;width:auto}
  .woocommerce-cart .woocommerce-cart-form td.product-name{padding-right:40px}
  .woocommerce-cart .woocommerce-cart-form td[data-title]::before{content:attr(data-title) ": ";
    font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted)}
  .woocommerce-cart .woocommerce-cart-form td.product-name::before{content:none}
  .woocommerce-cart .woocommerce-cart-form td.actions{padding-top:20px}
  /* grid-template-columns podane wprost, bo komorka tabeli jako
     pojemnik siatki liczy kolumne „auto” jako max-content: przyciski
     mialy 231 px zamiast pelnych 336 i stały nierowno. */
  .woocommerce-cart .woocommerce-cart-form td.actions{display:grid;gap:12px;
    grid-template-columns:minmax(0,1fr)}
  .woocommerce-cart .woocommerce-cart-form .coupon{display:grid;gap:10px;width:100%;
    grid-template-columns:minmax(0,1fr)}
  .woocommerce-cart .woocommerce-cart-form .coupon #coupon_code{min-width:0;width:100%}
  .woocommerce-cart .woocommerce-cart-form td.actions .button{width:100%}
}

/* Darmowa dostawa pokazana jako zerowa cena przewoznikow.
   WooCommerce doklada trzecia metode „Darmowa dostawa”, a dwie
   prawdziwe zostawia z cenami, wiec klientka wybiera miedzy cena
   a sposobem dostawy. Chowamy darmowa, a przewoznikom pokazujemy
   stara cene przekreslona obok zera. */
.fr-wysylka__stara{text-decoration:line-through;color:var(--muted);margin-inline-start:4px}
.fr-wysylka__teraz{font-weight:700;color:var(--ink)}

/* ---------------------------------------------------------------
   Koszyk: szerokosci kolumn, wysylka i kupon.
   Zlapane pomiarem 28.09.2026 przy oknie 1265 px, po uwadze
   Mariusza, ze pytania personalizacji lamia sie na trzy linijki.
   --------------------------------------------------------------- */

/* USTERKA: kolumna z nazwa miala 151 px, a kolumna z krzyzykiem 231.
   Tabela z ukladem automatycznym traktuje `width` na komorce jako
   sugestie, nie jako wymiar: nazwa sie zawijala, wiec algorytm uznal
   ja za waska i oddal miejsce sasiadom. Komorka z `width:100%` bierze
   cala reszte, a pozostale zostaja przy swoich wymiarach. */
@media (min-width:901px){
  .woocommerce-cart .woocommerce-cart-form td.product-name,
  .woocommerce-cart .woocommerce-cart-form th.product-name{width:100%}
  .woocommerce-cart .woocommerce-cart-form td.product-remove{width:34px;min-width:34px}
  .woocommerce-cart .woocommerce-cart-form td.product-thumbnail{width:104px;min-width:104px}
  .woocommerce-cart .woocommerce-cart-form td.product-quantity{width:104px;min-width:104px}
}

/* Pytanie i odpowiedz: pytanie tyle, ile potrzebuje, reszta na
   odpowiedz. Bez tego kolumna „auto” zwezala sie razem z komorka.

   TYLKO OD 901 PX. `max-content` nie pozwala kolumnie sie zwezic, wiec
   na telefonie najdluzsze pytanie („Dodac zawieszke z grawerem?”, 204
   px) rozpychalo kafelek poza ekran. Nizej wracamy do `auto 1fr`,
   czyli pytanie moze sie zawinac. */
@media (min-width:901px){
  .woocommerce-cart .woocommerce-cart-form td.product-name dl.variation{
    grid-template-columns:max-content auto;gap:2px 10px}
}

/* Podsumowanie: troche szerzej, bo mieszcza sie w nim dwie ceny obok
   siebie, przekreslona i zerowa.

   TYLKO OD 901 PX. Ta regula stoi w pliku ZA media query, ktore nizej
   zwija koszyk do jednej kolumny, wiec bez wlasnego media query
   wygrywala z nia i na telefonie siatka zostawala dwukolumnowa:
   zmierzone „0px 390px”, czyli kolumna z pozycjami zwinieta do zera.
   Ta sama pulapka co przy ikonie koszyka w naglowku. */
@media (min-width:901px){
  .woocommerce-cart .fr-proza > .woocommerce{grid-template-columns:minmax(0,1fr) 390px;gap:0 40px}
}

/* Podsumowanie przestaje byc tabela.

   Wysylka potrzebuje calej szerokosci, zeby „InPost Kurier: 19,99 zl
   0 zl” zmiescilo sie w jednej linijce. Samo `display:block` na jej
   komorkach nie wystarczylo: komorki wypadaja wtedy z modelu tabeli,
   ale ich tresc nadal ustawia MINIMUM pierwszej kolumny. Zmierzone:
   kolumna z etykieta 268 px, kolumna z kwota 115, razem 383 przy
   334 px miejsca, wiec kwoty wychodzily poza bezowy panel o 50 px.

   Wiersze robimy wiec zwyklymi pasami: etykieta z lewej, kwota
   z prawej, a wiersz wysylki na cala szerokosc. Zaden wiersz nie
   narzuca juz szerokosci innemu. */
.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals tbody{display:block;width:100%;max-width:100%}
.woocommerce-cart .cart_totals tr{display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;width:100%}
.woocommerce-cart .cart_totals th,
.woocommerce-cart .cart_totals td{display:block;width:auto;min-width:0}
.woocommerce-cart .cart_totals td{text-align:right}
.woocommerce-cart .cart_totals tr.shipping{display:block}
.woocommerce-cart .cart_totals .shipping th,
.woocommerce-cart .cart_totals .shipping td{text-align:left}
.woocommerce-cart .cart_totals .shipping th{padding-bottom:6px}
.woocommerce-cart .cart_totals .shipping td{padding-top:0}
.woocommerce-cart .cart_totals #shipping_method li{display:flex;align-items:baseline;gap:6px;
  white-space:nowrap}
.woocommerce-cart .cart_totals #shipping_method li label{white-space:nowrap}

/* Kupon nad podsumowaniem. Ten z tabeli chowamy, bo wypisujemy wlasny
   w podsumowaniu (patrz inc/darmowa-dostawa.php). */
.woocommerce-cart .woocommerce-cart-form .actions .coupon{display:none}
.fr-kupon{margin:0 0 22px}
.fr-kupon__label{display:block;font-size:13px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.fr-kupon__rzad{display:flex;gap:8px}
.fr-kupon__pole{flex:1 1 auto;min-width:0;height:48px;padding:0 14px;font-size:15px;
  border:1px solid var(--line);background:#fff;color:var(--ink)}
.fr-kupon__pole:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.fr-kupon button.fr-kupon__btn{flex:0 0 auto;height:48px;padding-inline:20px;background:transparent;
  border:1px solid var(--ink);border-radius:0;font-family:var(--f-body);font-size:15px;
  font-weight:700;color:var(--ink);cursor:pointer}
.fr-kupon button.fr-kupon__btn:hover{background:var(--ink);color:var(--ivory)}

@media (max-width:900px){
  .woocommerce-cart .cart_totals #shipping_method li{white-space:normal}
}

/* Uklad tabeli na sztywno. Sam `width` na komorce to w ukladzie
   automatycznym tylko sugestia: kolumna z krzyzykiem miala 119 px,
   bo naglowek „USUN” wymuszal swoja szerokosc, a nazwa produktu
   dostawala to, co zostalo. Przy ukladzie sztywnym szerokosci sa
   deklaracja, a nie propozycja.

   TYLKO OD 901 PX. Nizej kazda pozycja jest kafelkiem, a nie wierszem
   tabeli, i te same szerokosci kolumn (razem 434 px) rozpychaly
   strone poza ekran: przy oknie 375 px tresc miala 432 px i pojawialo
   sie poziome przewijanie. Zlapane pomiarem. */
@media (min-width:901px){
  .woocommerce-cart .woocommerce-cart-form table.shop_table{table-layout:fixed}
  .woocommerce-cart .woocommerce-cart-form th.product-remove{width:34px}
  .woocommerce-cart .woocommerce-cart-form th.product-thumbnail{width:104px}
  .woocommerce-cart .woocommerce-cart-form th.product-name{width:auto}
  .woocommerce-cart .woocommerce-cart-form th.product-price{width:96px}
  .woocommerce-cart .woocommerce-cart-form th.product-quantity{width:104px}
  .woocommerce-cart .woocommerce-cart-form th.product-subtotal{width:96px}
}

/* Naglowki kolumny z krzyzykiem i z miniatura zostaja dla czytnika
   ekranu, ale nie zajmuja miejsca: „USUN” i „MINIATURA” nad pustymi
   komorkami niczego widzacej klientce nie mowia, a rozpychaly tabele. */
.woocommerce-cart .woocommerce-cart-form th.product-remove,
.woocommerce-cart .woocommerce-cart-form th.product-thumbnail{font-size:0;letter-spacing:0}

/* Po przeniesieniu kuponu w wierszu „actions” zostal sam przycisk
   aktualizacji, ktory bez sasiada zwezil sie do dwoch linijek. */
.woocommerce-cart .woocommerce-cart-form .actions button[name="update_cart"]{white-space:nowrap;
  width:auto;min-width:200px}

/* ===== Zamowienie otrzymane =====
   05.10.2026 Mariusz: „trochę brzydko wygląda ta strona”. WooCommerce
   robi z podsumowania pasek drobnych wersalikow z kreskowanymi
   przegrodkami, adresy wsadza w ramki z wcieciem po ikonie z fontu,
   ktorego motyw nie laduje, a etykiety opcji produktu plywaja.
   Kazda regula ma klase strony z przodu, bo woocommerce.css wygrywa
   z gola klasa (.woocommerce ul.order_details li). */
.woocommerce-order-received .woocommerce-order{max-width:880px;margin:0 auto}
.woocommerce-order-received .woocommerce-thankyou-order-received{
  font-family:var(--f-display);font-size:clamp(20px,3vw,26px);line-height:1.3;
  margin:0 0 24px;color:var(--ink)}

/* Podsumowanie jako kafelki. Flex z zawijaniem, a nie siatka: piec
   kafelkow w siatce czterokolumnowej zostawialo pusta szara dziure,
   a tu ostatni rzad zawsze sie wypelnia. Clearfix z woocommerce.css
   bylby pustym kafelkiem, wiec go wylaczamy. */
.woocommerce-order-received .woocommerce ul.order_details{
  display:flex;flex-wrap:wrap;gap:1px;
  margin:0 0 28px;padding:0;list-style:none;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
.woocommerce-order-received .woocommerce ul.order_details::before,
.woocommerce-order-received .woocommerce ul.order_details::after{content:none}
.woocommerce-order-received .woocommerce ul.order_details li{
  flex:1 1 130px;float:none;margin:0;padding:14px 16px;border:0;background:var(--ivory);
  text-transform:none;font-size:13px;line-height:1.35;color:var(--muted);min-width:0}
.woocommerce-order-received .woocommerce ul.order_details li strong{
  display:block;margin-top:4px;font-size:16px;color:var(--ink);overflow-wrap:anywhere}
.woocommerce-order-received .woocommerce ul.order_details li.email{flex-basis:230px}

/* Ramka „Co dalej” (inc/podziekowanie.php). */
.woocommerce-order-received .fr-co-dalej{
  margin:0 0 36px;padding:22px 24px;background:var(--tint);border-radius:10px;
  border-left:3px solid var(--gold)}
.woocommerce-order-received .fr-co-dalej h2{margin:0 0 12px;font-size:22px}
.woocommerce-order-received .fr-co-dalej ol{counter-reset:krok;list-style:none;margin:0;padding:0}
.woocommerce-order-received .fr-co-dalej ol li{
  counter-increment:krok;position:relative;padding:0 0 0 38px;margin:0 0 12px;line-height:1.5}
.woocommerce-order-received .fr-co-dalej ol li:last-child{margin-bottom:0}
.woocommerce-order-received .fr-co-dalej ol li::before{
  content:counter(krok);position:absolute;left:0;top:-1px;width:26px;height:26px;
  border-radius:50%;background:var(--ivory);border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--gold-tekst)}
.woocommerce-order-received .fr-co-dalej p{margin:0 0 12px}
.woocommerce-order-received .fr-co-dalej ul{margin:12px 0 0;padding:0;list-style:none}
.woocommerce-order-received .fr-co-dalej--czeka{background:var(--warn-bg);border-left-color:var(--warn)}

/* Tabela szczegolow. */
.woocommerce-order-received .woocommerce table.shop_table{
  border:1px solid var(--line);border-radius:10px;border-collapse:separate;border-spacing:0;
  margin:0 0 36px;width:100%}
.woocommerce-order-received .woocommerce table.shop_table th,
.woocommerce-order-received .woocommerce table.shop_table td{
  padding:12px 16px;border-top:1px solid var(--line);vertical-align:top;text-align:left}
.woocommerce-order-received .woocommerce table.shop_table thead th{
  border-top:0;font-size:13px;font-weight:700;color:var(--muted);text-transform:none}
.woocommerce-order-received .woocommerce table.shop_table .product-total,
.woocommerce-order-received .woocommerce table.shop_table tfoot td{text-align:right;white-space:nowrap}
.woocommerce-order-received .woocommerce table.shop_table tfoot th{font-weight:400;color:var(--muted)}
.woocommerce-order-received .woocommerce table.shop_table tfoot tr:last-of-type th,
.woocommerce-order-received .woocommerce table.shop_table tfoot tr:last-of-type td{font-weight:700;color:var(--ink);font-size:17px}
/* Wysylka z paczkomatem to kilka linijek, nie jedna kwota. */
.woocommerce-order-received .woocommerce table.shop_table tfoot td{white-space:normal}
.woocommerce-order-received .woocommerce table.shop_table tfoot .ep-chosen-parcel-machine{
  background:var(--stone) !important;font-weight:700;padding:2px 8px !important;display:inline-block;margin:2px 0}
.woocommerce-order-received .woocommerce table.shop_table tfoot .italic{color:var(--muted);font-size:14px}
.woocommerce-order-received .product-name a{color:var(--ink);font-weight:700;text-decoration:none}
.woocommerce-order-received .product-name a:hover{text-decoration:underline}
.woocommerce-order-received .product-quantity{font-weight:400;color:var(--muted);white-space:nowrap}
.woocommerce-order-received .woocommerce td.product-name .wc-item-meta{margin:6px 0 0;padding:0;list-style:none;font-size:14px;color:var(--muted)}
.woocommerce-order-received .woocommerce td.product-name .wc-item-meta li{margin:2px 0}
.woocommerce-order-received .woocommerce td.product-name .wc-item-meta .wc-item-meta-label{float:none;margin:0 4px 0 0;font-weight:400;clear:none}
.woocommerce-order-received .woocommerce td.product-name .wc-item-meta p{display:inline;margin:0;color:var(--ink)}

/* „Działania: Zwrot” zaraz po zakupie straszy. Zwrot jest w Moim koncie
   i na stronie Zwroty. Nowsze przegladarki: caly wiersz znika. */
.woocommerce-order-received .woocommerce table.shop_table.order_details tfoot tr:has(.order-actions--heading){display:none}

/* Adresy jako karty obok siebie. */
.woocommerce-order-received .woocommerce .woocommerce-columns--addresses{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0}
.woocommerce-order-received .woocommerce .woocommerce-columns--addresses::before,
.woocommerce-order-received .woocommerce .woocommerce-columns--addresses::after{content:none}
.woocommerce-order-received .woocommerce .woocommerce-columns--addresses .woocommerce-column{
  float:none;width:auto;max-width:none;margin:0;padding:0}
.woocommerce-order-received .woocommerce-column__title{font-size:20px;margin:0 0 10px}
.woocommerce-order-received .woocommerce .woocommerce-customer-details address{
  border:1px solid var(--line);border-radius:10px;padding:16px 18px;font-style:normal;line-height:1.6;
  background:var(--ivory);margin:0}
.woocommerce-order-received .woocommerce .woocommerce-customer-details address p{margin:0;padding:0}
.woocommerce-order-received .woocommerce .woocommerce-customer-details .woocommerce-customer-details--phone,
.woocommerce-order-received .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email{
  padding-left:0;margin-top:8px;color:var(--muted);overflow-wrap:anywhere}
.woocommerce-order-received .woocommerce .woocommerce-customer-details .woocommerce-customer-details--email{margin-top:0}
.woocommerce-order-received .woocommerce .woocommerce-customer-details--phone::before,
.woocommerce-order-received .woocommerce .woocommerce-customer-details--email::before{content:none}
@media (max-width:600px){
  .woocommerce-order-received .woocommerce .woocommerce-columns--addresses{grid-template-columns:1fr}
  .woocommerce-order-received .woocommerce ul.order_details li{padding:12px 14px}
  .woocommerce-order-received .fr-co-dalej{padding:18px 16px}
  .woocommerce-order-received .woocommerce table.shop_table th,
  .woocommerce-order-received .woocommerce table.shop_table td{padding:10px 12px}
  /* Na telefonie tabela jako bloki. W ukladzie tabeli kolumna kwot dzielila
     szerokosc z podsumowaniem: albo sciskala nazwy produktow, albo
     paczkomat lamal sie po jednym slowie. Kazdy wiersz to teraz rzad
     flex: etykieta po lewej, wartosc po prawej. */
  .woocommerce-order-received .woocommerce table.shop_table.order_details,
  .woocommerce-order-received .woocommerce table.shop_table.order_details thead,
  .woocommerce-order-received .woocommerce table.shop_table.order_details tbody,
  .woocommerce-order-received .woocommerce table.shop_table.order_details tfoot{display:block}
  .woocommerce-order-received .woocommerce table.shop_table.order_details tr{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--line)}
  .woocommerce-order-received .woocommerce table.shop_table.order_details thead tr{border-top:0}
  .woocommerce-order-received .woocommerce table.shop_table.order_details th,
  .woocommerce-order-received .woocommerce table.shop_table.order_details td{display:block;border-top:0}
  .woocommerce-order-received .woocommerce table.shop_table.order_details td.product-name{flex:1;min-width:0}
  .woocommerce-order-received .woocommerce table.shop_table.order_details td.product-total{flex:none}
  .woocommerce-order-received .woocommerce table.shop_table.order_details tfoot th{flex:none}
  .woocommerce-order-received .woocommerce table.shop_table.order_details tfoot td{flex:1;min-width:0}
}
/* Zgoda na maila o opinie (inc/opinie-zgoda.php) */
.woocommerce-checkout p.cr-customer-consent{margin:18px 0 14px;padding:16px 18px;background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--gold,#A89968)}
.woocommerce-checkout p.cr-customer-consent label{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;cursor:pointer}
.woocommerce-checkout p.cr-customer-consent input{flex:none;width:20px;height:20px;margin-top:1px;accent-color:var(--ink)}
.fr-zgoda{margin:32px 0;padding:26px 28px;background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--gold,#A89968);max-width:760px}
.fr-zgoda__tytul{margin:0 0 8px;font-family:var(--f-display);font-size:24px;line-height:1.25}
.fr-zgoda__tekst{margin:0 0 18px;font-size:16px;line-height:1.6}
.fr-zgoda__form{margin:0}
.fr-zgoda__male{margin:14px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.fr-zgoda--ok .fr-zgoda__tytul{margin:0;font-size:20px}