/* ============================================================
   KOSZYK + MOJE KONTO - nowy wyglad
   Ladowane na is_cart() i is_account_page() (patrz bm-newlayout.php).
   Oba widoki renderuje ten sam szablon Oxygena (Default Page Banner 383),
   dlatego jeden arkusz obsluguje je razem.

   Uklad zostaje Oxygenowy - przestylowujemy na miejscu, tak jak karte
   produktu. Komponenty pochodza z WooCommerce, wiec celujemy w jego klasy.

   UWAGA NA WAGI: universal.css Oxygena ma tu mocne selektory, m.in.
     .woocommerce-cart .cart-collaterals .cart_totals table th   (0,4,2)
   i laduje sie PO tym arkuszu. Tam, gdzie to konieczne, dokladamy klas,
   zeby przebic - bez uciekania sie do !important.
   Autor: claude, 2026-08-19.
   ============================================================ */

body.woocommerce-cart,
body.woocommerce-account,
body.woocommerce-checkout {
    --navy:       #0B2240;
    --navy-2:     #12325C;
    --red:        #DB0632;
    --ink:        #171A1E;
    --muted:      #3F4750;
    --paper:      #FCFAF6;
    --cream:      #F5F1E9;
    --sand:       #EAE3D6;
    --line:       rgba(11, 34, 64, .13);
    --line-soft:  rgba(11, 34, 64, .07);
    /* cienie: tokeny '--shadow-*' sa na ':root' w 'bm-newhome.css' */
    --ease:       cubic-bezier(.22, 1, .36, 1);
    --brush:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 40' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 0 H170 Q184 4 168 8 Q186 13 170 17 Q188 21 169 25 Q185 29 167 33 Q182 36 172 40 H0 Z'/%3E%3Cellipse fill='white' cx='191' cy='6' rx='4.2' ry='2.4'/%3E%3Cellipse fill='white' cx='195' cy='19' rx='2.8' ry='1.7'/%3E%3Cellipse fill='white' cx='190' cy='31' rx='3.4' ry='2.1'/%3E%3Cellipse fill='white' cx='197.5' cy='26' rx='1.6' ry='1.1'/%3E%3Cellipse fill='white' cx='196' cy='11' rx='1.4' ry='1'/%3E%3C/svg%3E");
    --serif:      "Playfair Display", Georgia, "Times New Roman", serif;
    --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 1. Naglowki stron ------------------------------ */
body.woocommerce-cart .entry-title,
body.woocommerce-account .entry-title,
body.woocommerce-cart h1,
body.woocommerce-account h1 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
    letter-spacing: -.01em;
}

/* ---------- 2. Tabela koszyka ------------------------------ */
/* UWAGA (2026-08-20): te reguly powstaly, gdy koszyk byl TABELA. Po przejsciu
   na uklad kartowy (sekcja B nizej) zaczely malowac ramki i kremowe tla na
   komorkach pozycji - stad obwodki wokol miniatury i ceny. Zawezamy je wiec
   do '.cart_totals', czyli jedynej tabeli, ktora nadal jest tabela. */
body.woocommerce-cart .woocommerce .cart_totals table.shop_table {
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
}

/* Naglowki kolumn - wersaliki, jak nadtytuly w makiecie.
   Oxygen ma '.woocommerce table.shop_table th' (0,2,2), wiec dokladamy body. */
body.woocommerce-cart .woocommerce .cart_totals table.shop_table th {
    background: transparent;
    color: var(--navy);
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line-soft);
    padding: 16px 14px;
}

body.woocommerce-cart .woocommerce .cart_totals table.shop_table td {
    vertical-align: middle;
}

/* Miniatura: BEZ tla i bez ramki - zdjecia produktow sa na przezroczystym
   PNG i wlasne tlo tylko je brudzilo. Rozmiar ustawia sekcja B. */

body.woocommerce-cart .woocommerce table.cart td.product-name a {
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy);
    text-decoration: none;
}

body.woocommerce-cart .woocommerce table.cart td.product-name a:hover {
    color: var(--red);
}

body.woocommerce-cart .woocommerce-Price-amount {
    font-family: var(--sans);
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

/* Krzyzyk usuwania - dyskretny, czerwony dopiero pod kursorem. */
body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove {
    color: var(--muted);
    background: transparent;
    font-size: 1.3rem;
    line-height: 1;
}

body.woocommerce-cart .woocommerce table.cart td.product-remove a.remove:hover {
    color: var(--red);
    background: transparent;
}

/* ---------- 3. Pola liczbowe i tekstowe -------------------- */
body.woocommerce-cart .quantity:not(.bmx-qty) input.qty,
body.woocommerce-cart .coupon input[type="text"],
body.woocommerce-account input[type="text"],
body.woocommerce-account input[type="email"],
body.woocommerce-account input[type="password"],
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select {
    box-sizing: border-box;
    font-family: var(--sans);
    font-size: .92rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 12px 16px;
    -webkit-appearance: none;
    appearance: none;
}

body.woocommerce-cart .quantity input.qty {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

body.woocommerce-cart .quantity input.qty:focus,
body.woocommerce-cart .coupon input[type="text"]:focus,
body.woocommerce-account input:focus {
    outline: 0;
    background: #fff;
    border-color: var(--navy-2);
}

body.woocommerce-account label {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
}

/* ---------- 4. Przyciski ----------------------------------- */
body.woocommerce-cart .woocommerce .button,
body.woocommerce-account .woocommerce .button,
body.woocommerce-account .woocommerce button.button {
    font-family: var(--sans);
    font-size: .69rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 14px 26px;
    background: transparent;
    color: var(--navy);
    border: 1px solid var(--line);
    -webkit-appearance: none;
    appearance: none;
    transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}

body.woocommerce-cart .woocommerce .button:hover,
body.woocommerce-account .woocommerce .button:hover,
body.woocommerce-account .woocommerce button.button:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* Przycisk glowny - "Przejdz do kasy" i logowanie. Wzorzec .bmx-btn
   z makiety razem z efektem pociagniecia pedzla. */
body.woocommerce-cart .woocommerce a.checkout-button,
body.woocommerce-account .woocommerce button[name="login"] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-size: .735rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 16px 34px;
    text-decoration: none;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

body.woocommerce-cart .woocommerce a.checkout-button::after,
body.woocommerce-account .woocommerce button[name="login"]::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1),
                border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

body.woocommerce-cart .woocommerce a.checkout-button:hover,
body.woocommerce-account .woocommerce button[name="login"]:hover {
    background: var(--red);
    border-color: var(--navy);
    color: #fff;
    transform: translateY(-2px);
}

body.woocommerce-cart .woocommerce a.checkout-button:hover::after,
body.woocommerce-account .woocommerce button[name="login"]:hover::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {

    body.woocommerce-cart .woocommerce a.checkout-button::after,
    body.woocommerce-account .woocommerce button[name="login"]::after {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255, 255, 255, .022) 0 2px, rgba(255, 255, 255, 0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);
                mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;
                mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;
                mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }

    body.woocommerce-cart .woocommerce a.checkout-button:hover::after,
    body.woocommerce-account .woocommerce button[name="login"]:hover::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;
                mask-position: 0% center;
    }
}

/* ---------- 5. Podsumowanie koszyka ------------------------
   Oxygen ma tu '.woocommerce-cart .cart-collaterals .cart_totals table th'
   o wadze (0,4,2) - dokladamy '.woocommerce', zeby uzyskac (0,4,3). */
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: 22px 24px;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals h2 {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: var(--navy);
    margin-bottom: 14px;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table th,
body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table td {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 13px 0;
    font-family: var(--sans);
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ink);
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals table th {
    color: var(--muted);
    font-weight: 500;
}

body.woocommerce-cart .woocommerce .cart-collaterals .cart_totals .order-total td {
    border-bottom: 0;
    font-size: 1.1rem;
}

/* ---------- 6. Moje konto - nawigacja ----------------------
   Widok zalogowany ostylowany na standardowych klasach WooCommerce.
   Stan wylogowany (formularz logowania) sprawdzony na zywo. */
body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 12px 16px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .8rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--cream);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--navy);
    color: #fff;
}

body.woocommerce-account .woocommerce-MyAccount-content {
    font-family: var(--sans);
    font-size: .93rem;
    line-height: 1.7;
    color: var(--ink);
}

/* Formularz logowania jako karta. */
body.woocommerce-account .woocommerce-form-login {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(22px, 3vw, 34px);
}

/* ---------- 7. Komunikaty ---------------------------------- */
body.woocommerce-cart .woocommerce-message,
body.woocommerce-cart .woocommerce-info,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-account .woocommerce-message,
body.woocommerce-account .woocommerce-info,
body.woocommerce-account .woocommerce-error {
    font-family: var(--sans);
    font-size: .9rem;
    border-radius: var(--r);
    border-top-color: var(--red);
    background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-cart .woocommerce a.checkout-button::after,
    body.woocommerce-account .woocommerce button[name="login"]::after { transition-duration: .001ms; }
}

/* ============================================================
   8. ZAMOWIENIE (CHECKOUT)
   Renderuje go ten sam szablon Oxygena co koszyk i moje konto (383) -
   ustalone przez odczyt sufiksow identyfikatorow przy niepustym koszyku
   (przy pustym adres przekierowuje i szablonu nie widac).
   ============================================================ */

body.woocommerce-checkout .entry-title,
body.woocommerce-checkout h1,
body.woocommerce-checkout h3 {
    font-family: var(--serif);
    font-weight: 500;
    color: var(--navy);
    letter-spacing: -.01em;
}

body.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
}

body.woocommerce-checkout .form-row .required {
    color: var(--red);
    text-decoration: none;
}

body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
    outline: 0;
    background: #fff;
    border-color: var(--navy-2);
}

/* Pole uwag do zamowienia jest wieloliniowe - pigulka by je zdeformowala. */
body.woocommerce-checkout .form-row textarea {
    border-radius: var(--r);
    min-height: 110px;
    padding: 14px 16px;
}

/* 'textarea.input-text' - bez tej klasy regula WooCommerce '.woocommerce form .form-row
   .input-text' byla silniejsza i pole uwag mialo ciemna ramke zamiast naszej
   (poprawione 2026-09-24). */
body.woocommerce-checkout .form-row textarea.input-text {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r);
}

body.woocommerce-checkout .form-row textarea.input-text:focus {
    background: #fff;
    border-color: var(--navy-2);
}

/* ---------- Podsumowanie zamowienia ------------------------ */
body.woocommerce-checkout #order_review,
body.woocommerce-checkout .woocommerce-checkout-review-order {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    padding: clamp(18px, 2.4vw, 28px);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table {
    border: 0;
    width: 100%;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    padding: 13px 0;
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--ink);
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table th {
    color: var(--muted);
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total td,
body.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot .order-total th {
    border-bottom: 0;
    font-size: 1.1rem;
    color: var(--navy);
    font-weight: 600;
}

/* ---------- Metody dostawy i platnosci --------------------- */
body.woocommerce-checkout ul#shipping_method,
body.woocommerce-checkout ul.wc_payment_methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

body.woocommerce-checkout ul.wc_payment_methods li {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    padding: 14px 16px;
}

body.woocommerce-checkout ul.wc_payment_methods li label,
body.woocommerce-checkout ul#shipping_method li label {
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
}

body.woocommerce-checkout .payment_box {
    background: #fff;
    border-radius: var(--r-s);
    font-size: .86rem;
    color: var(--muted);
}

/* ---------- Przycisk "Kupuje i place" ----------------------
   Wzorzec .bmx-btn z makiety, razem z efektem pociagniecia pedzla. */
body.woocommerce-checkout #place_order,
body.woocommerce-checkout button.alt#place_order {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-size: .755rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: 18px 34px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

body.woocommerce-checkout #place_order::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1),
                border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

body.woocommerce-checkout #place_order:hover {
    border-color: var(--navy);
    color: #fff;
    transform: translateY(-2px);
}

body.woocommerce-checkout #place_order:hover::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {

    body.woocommerce-checkout #place_order::after {
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255, 255, 255, .022) 0 2px, rgba(255, 255, 255, 0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);
                mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;
                mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;
                mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }

    body.woocommerce-checkout #place_order:hover::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;
                mask-position: 0% center;
    }
}

body.woocommerce-checkout .woocommerce-message,
body.woocommerce-checkout .woocommerce-info,
body.woocommerce-checkout .woocommerce-error {
    font-family: var(--sans);
    font-size: .9rem;
    border-radius: var(--r);
    border-top-color: var(--red);
    background: var(--paper);
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-checkout #place_order::after { transition-duration: .001ms; }
}

/* ============================================================
   9. POPRAWKI PO PRZEGLADZIE (2026-08-20)
   ============================================================ */

/* Pole kuponu w koszyku bylo za waskie - WooCommerce daje mu waska
   szerokosc bazowa. Rozciagamy je i pozwalamy sie kurczyc na malych
   ekranach (min-width:0 chroni przed wypchnieciem przycisku). */
body.woocommerce-cart .woocommerce .coupon input[type="text"],
body.woocommerce-cart .woocommerce .coupon #coupon_code {
    width: 100%;
    min-width: 0;
    max-width: 320px;
    flex: 1 1 220px;
}

body.woocommerce-cart .woocommerce .actions .coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Pasek "Masz kupon? Kliknij tutaj" na checkoucie - ukrywamy na zyczenie.
   Samo pole kuponu zostaje dostepne w koszyku. */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    display: none;
}

/* Naglowek "Wyslac na inny adres?" - mniejszy, zeby nie konkurowal
   z naglowkami sekcji formularza. */
body.woocommerce-checkout .woocommerce-shipping-fields h3#ship-to-different-address,
body.woocommerce-checkout h3#ship-to-different-address,
body.woocommerce-checkout #ship-to-different-address,
body.woocommerce-checkout #ship-to-different-address label,
body.woocommerce-checkout #ship-to-different-address span {
    font-size: 12px;
}

/* Blok platnosci mial fioletowawe tlo rgba(129,110,153,.14) prosto
   z woocommerce.css. Selektor zrodlowy '.woocommerce-checkout #payment'
   ma wage (1,1,0) - dokladamy 'body', zeby uzyskac (1,1,1). */
body.woocommerce-checkout #payment,
body.woocommerce-cart #payment {
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
}

body.woocommerce-checkout #payment div.form-row,
body.woocommerce-checkout #payment ul.payment_methods {
    background: transparent;
    border-color: var(--line-soft);
}

/* ---------- Ramka opisu metody platnosci -------------------
   WooCommerce daje '.payment_box' fioletowawe tlo #dcd7e2, a jego ::before
   to strzalka rysowana obramowaniem 'border: 1em solid #dcd7e2' (widoczna
   jest tylko dolna krawedz - pozostale sa przezroczyste).
   Selektory zrodlowe zawieraja ID:
     .woocommerce-checkout #payment div.payment_box          (1,2,1)
     .woocommerce-checkout #payment div.payment_box::before  (1,2,2)
   Dokladamy 'body', zeby uzyskac (1,2,2) i (1,2,3).
   Ramka zamiast samego bialego tla - inaczej blok zlalby sie z otoczeniem. */
body.woocommerce-checkout #payment div.payment_box,
body.woocommerce-cart #payment div.payment_box {
    background-color: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    color: var(--ink);
}

body.woocommerce-checkout #payment div.payment_box::before,
body.woocommerce-cart #payment div.payment_box::before {
    border-bottom-color: #fff;
}

/* Pola i teksty zastepcze wewnatrz ramki mialy kolory z tej samej
   fioletowej rodziny (#c2bacd, #b5abc2) - dostrajamy do palety makiety. */
body.woocommerce-checkout #payment div.payment_box input.input-text,
body.woocommerce-checkout #payment div.payment_box select {
    border-color: var(--line);
    border-top-color: var(--line);
}

body.woocommerce-checkout #payment div.payment_box ::placeholder {
    color: var(--muted);
}


/* ============================================================
   2026-08-20 - PRZEBUDOWA UKLADU (koszyk + zamowienie)
   Dopisane na koncu arkusza celowo: przy remisie wagi wygrywa to, co
   pozniej, wiec ta warstwa nadpisuje wczesniejsze reguly bez podbijania
   selektorow. Wczesniejszych sekcji NIE ruszamy - siedza w nich poprawki
   wywalczone osobno (biale tlo '#payment', strzalka '.payment_box::before',
   szerokosc pola kuponu), ktore nadal obowiazuja.

   Znacznikow WooCommerce nie dotykamy w ogole - zaden szablon nie jest
   nadpisywany, wiec bramki platnosci, wysylka i WPML dzialaja jak dotad.
   ============================================================ */

/* ---------- A. Dwie kolumny w koszyku -----------------------
   'div.woocommerce' zawiera po kolei: komunikaty, formularz koszyka
   i '.cart-collaterals' z podsumowaniem. Domyslnie leca jedno pod drugim,
   przez co suma do zaplaty ladowala daleko pod lista pozycji. */
body.woocommerce-cart .woocommerce {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 342px;
    gap: clamp(20px, 2.4vw, 36px);
    align-items: start;
}

body.woocommerce-cart .woocommerce-notices-wrapper,
body.woocommerce-cart .cross-sells {
    grid-column: 1 / -1;
}

@media (max-width: 940px) {
    body.woocommerce-cart .woocommerce { grid-template-columns: 1fr; }
}

/* ---------- B. Pozycje koszyka jako wiersze-karty -----------
   Tabele rozkladamy na siatke. Naglowek tabeli chowamy - przy ukladzie
   kartowym etykiety kolumn nie maja juz do czego sie odnosic, a WooCommerce
   i tak podaje je w atrybutach 'data-title'. */
body.woocommerce-cart .woocommerce-cart-form { margin: 0; }

body.woocommerce-cart table.cart,
body.woocommerce-cart table.cart tbody {
    display: block;
    width: 100%;
    border: 0;
    background: transparent;
}

body.woocommerce-cart table.cart thead { display: none; }

body.woocommerce-cart tr.cart_item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto;
    grid-template-areas:
        "foto nazwa   usun"
        "foto ilosc   suma";
    gap: 6px 16px;
    align-items: center;
    margin-bottom: 12px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
}

body.woocommerce-cart tr.cart_item td {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
}

body.woocommerce-cart td.product-thumbnail { grid-area: foto; }
body.woocommerce-cart td.product-name      { grid-area: nazwa; }
body.woocommerce-cart td.product-remove    { grid-area: usun; justify-self: end; }
body.woocommerce-cart td.product-quantity  { grid-area: ilosc; }
body.woocommerce-cart td.product-subtotal  { grid-area: suma; justify-self: end; }

/* ETYKIETY 'data-title' - GLOWNA PRZYCZYNA ROZJAZDU NA TELEFONIE.
   ============================================================
   Zgloszenie klientki 2026-09-17, uwaga 7: pozycja koszyka na telefonie
   "rozjechana". Zmierzone przy 390 px: kolumna z nazwa miala 27 px
   szerokosci (jedno slowo na wiersz, 438 px wysokosci), a kwota
   ladowala na polu ilosci.

   Przyczyna nie jest w naszej siatce, tylko w arkuszu WooCommerce:
     woocommerce.css, @media (max-width:768px)
       .woocommerce table.shop_table_responsive tr td::before
         { content: attr(data-title) ": "; float: left; font-weight: 700 }
   Kazda komorka dostawala doklejony napis ("Produkt:", "Ilosc:",
   "Kwota:"). Etykieta w komorce z kwota ma 125 px, a kolumna "suma"
   jest w siatce na 'auto' - wiec zjadala cala szerokosc, ktora zostala
   po zdjeciu, i na nazwe zostawalo 27 px.

   W ukladzie kartowym te etykiety sa zbedne: naglowek tabeli chowamy
   wlasnie dlatego, ze kazda pozycja czyta sie sama. Gasimy je '!important',
   bo regula WooCommerce ma wieksza wage - (0,2,4) kontra nasze (0,2,3).
   ============================================================ */
body.woocommerce-cart tr.cart_item td::before {
    display: none !important;
    content: none !important;
}

/* Ta sama regula WooCommerce wyrownuje na telefonie kazda komorke
   do PRAWEJ ('text-align:right !important'), przez co nazwa produktu
   i lista wariantow uciekaly od zdjecia. W ukladzie kartowym tresc
   ma isc do lewej; kwote wyrownujemy osobno, nizej.
   Waga: (0,4,4) z '!important' kontra (0,2,3) z '!important'. */
body.woocommerce-cart .woocommerce table.cart tr.cart_item td {
    text-align: left !important;
}

/* Cena jednostkowa jest juz w sumie pozycji - w ukladzie kartowym
   dublowalaby informacje.

   POPRAWKA 2026-09-01: ta regula NIE DZIALALA. Kilka wierszy wyzej stoi
   'body.woocommerce-cart tr.cart_item td { display:block }' o wadze (0,2,2),
   a ukrycie mialo (0,2,1) - czyli o jeden element mniej. Przy nizszej wadze
   nie ma znaczenia, ze regula jest pozniej: komorka wracala jako 'block'
   i cena pokazywala sie DWA RAZY, w 'product-price' i 'product-subtotal'
   (dla ilosci 1 obie kwoty sa identyczne - sprawdzone: 273.00 zl i 273.00 zl).

   Wyrownujemy wage do (0,3,2), dokladajac 'tr.cart_item' do sciezki. */
body.woocommerce-cart tr.cart_item td.product-price {
    display: none;
}

/* Naglowek kolumny "Cena" w tabeli - bez komorek nie ma czego opisywac.
   W ukladzie kartowym caly wiersz naglowka i tak jest ukryty, ale zapisujemy
   to wprost, zeby zmiana ukladu nie odslonila samotnej etykiety. */
body.woocommerce-cart table.cart thead th.product-price {
    display: none;
}

/* Miniatura: zdjecia produktow maja ok. 200 px, wiec ramka ma stala
   wielkosc, a obrazek siedzi w niej naturalnie (bez rozciagania). */
body.woocommerce-cart td.product-thumbnail {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Zadnych obwodek na komorkach pozycji - w ukladzie kartowym ramke ma
   caly wiersz, a nie kazda komorka z osobna. */
body.woocommerce-cart .woocommerce table.cart td.product-thumbnail,
body.woocommerce-cart .woocommerce table.cart td.product-price,
body.woocommerce-cart .woocommerce table.cart td.product-name,
body.woocommerce-cart .woocommerce table.cart td.product-quantity,
body.woocommerce-cart .woocommerce table.cart td.product-subtotal,
body.woocommerce-cart .woocommerce table.cart td.product-remove {
    border: 0;
    background: transparent;
}

body.woocommerce-cart .woocommerce table.cart td.product-thumbnail img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

body.woocommerce-cart td.product-name a {
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--navy);
    text-decoration: none;
}

body.woocommerce-cart td.product-name a:hover { color: var(--red); }

body.woocommerce-cart td.product-subtotal {
    font-family: var(--sans);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

/* Usuniecie pozycji - okragly przycisk zamiast golego krzyzyka. */
/* WooCommerce ma w 'woocommerce.css' '.woocommerce a.remove { color: red
   !important }' - stad krzyzyk byl ceglasty (rgb(170,0,0)), obcy palecie.
   Nasza barwa tez musi byc '!important'. */
body.woocommerce-cart td.product-remove a.remove {
    color: var(--muted) !important;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: #fff;
    font-size: 17px;
    line-height: 1;
    color: var(--muted);
    text-decoration: none;
    transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}

body.woocommerce-cart td.product-remove a.remove:hover {
    color: #fff !important;
    background: var(--red);
    border-color: var(--red);
}

/* ---------- C. Wiersz akcji (kupon) -------------------------
   ============================================================
   DLACZEGO SELEKTORY SA TU TAK DLUGIE:
   WooCommerce trzyma ten wiersz na floatach i wyrownaniu do prawej:
     woocommerce-layout.css
       .woocommerce table.cart td.actions            { text-align: right }   (0,3,2)
       .woocommerce table.cart td.actions .coupon    { float: left }         (0,4,2)
       .woocommerce table.cart td.actions .input-text{ width: 80px }         (0,4,2)
     woocommerce.css
       ... td.actions .coupon .input-text { float:left; padding:6px; margin:0 4px 0 0 }
   To 'text-align:right' wypychalo przyciski w prawo i przesuwalo ich napisy,
   a 'float' na kuponie wypadal z naszej siatki. Krotsze selektory
   ('body.woocommerce-cart td.actions' = (0,2,2)) przegrywaly z nimi.
   Dokladamy '.woocommerce table.cart' i wychodzimy na (0,4,3).
   ============================================================ */
body.woocommerce-cart .woocommerce table.cart tr:has(td.actions) { display: block; }

body.woocommerce-cart .woocommerce table.cart td.actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
}

@media (max-width: 560px) {
    body.woocommerce-cart .woocommerce table.cart td.actions { grid-template-columns: 1fr; }


}

/* Waska karta pozycji: zdjecie mniejsze, ciasniejsze odstepy, a kwota
   schodzi pod ilosc. Przy 390 px na wiersz "ilosc + kwota" zostaje
   ok. 170 px, a samo pole ilosci ze strzalkami ma 126 px - obok siebie
   by sie nie zmiescily. */
@media (max-width: 560px) {
    body.woocommerce-cart tr.cart_item {
        grid-template-columns: 72px minmax(0, 1fr) auto;
        grid-template-areas:
            "foto nazwa nazwa"
            "foto ilosc usun"
            "suma suma  suma";
        gap: 10px 12px;
        align-items: start;
        padding: 14px;
    }

    body.woocommerce-cart td.product-thumbnail { width: 72px; height: 72px; }

    body.woocommerce-cart td.product-remove { align-self: center; }

    body.woocommerce-cart .woocommerce table.cart tr.cart_item td.product-subtotal {
        justify-self: stretch;
        padding-top: 10px;
        border-top: 1px solid var(--line-soft);
        text-align: right !important;
    }
}

/* Kupon: caly wiersz, pole rozciagniete, przycisk tuz przy nim. */
body.woocommerce-cart .woocommerce table.cart td.actions .coupon {
    grid-column: 1 / -1;
    float: none;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
}

body.woocommerce-cart .woocommerce table.cart td.actions .coupon label {
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--navy);
}

body.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text {
    float: none;
    flex: 1 1 auto;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    height: 46px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: var(--sans);
    font-size: .9rem;
    color: var(--navy);
}

body.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text:focus {
    outline: 0;
    border-color: var(--navy);
}

/* Wszystkie przyciski wiersza: bez floatow, napis zawsze na srodku.
   'inline-flex' + 'justify-content:center' dziala tylko wtedy, gdy nie
   nadpisze go 'display:block' z arkusza malych ekranow - stad ta sama
   dlugosc selektora rowniez tutaj. */
body.woocommerce-cart .woocommerce table.cart td.actions .coupon button,
body.woocommerce-cart .woocommerce table.cart td.actions > button,
body.woocommerce-cart .woocommerce table.cart td.actions > a.button {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Wysokosc budujemy PADDINGIEM, nie 'min-height'.
       Przy 'min-height' napis siadal przy gornej krawedzi, gdy cokolwiek
       nadpisalo 'display' na blokowy - wtedy 'align-items' przestaje
       cokolwiek znaczyc, a pionowego paddingu nie bylo (mielismy '0 22px').
       Symetryczny padding centruje tekst niezaleznie od typu wyswietlania. */
    margin: 0 !important;
    padding: 15px 24px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: .69rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
}

/* "Wykorzystaj kupon" - trzyma swoja szerokosc obok pola. */
body.woocommerce-cart .woocommerce table.cart td.actions .coupon button {
    flex: 0 0 auto;
    width: auto;
}

/* "Zaktualizuj koszyk" i "Kontynuuj zakupy" - dwie rowne kolumny pod kuponem. */
body.woocommerce-cart .woocommerce table.cart td.actions > button,
body.woocommerce-cart .woocommerce table.cart td.actions > a.button {
    width: 100%;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* WLASNE WCIECIE TABELI KOSZYKA - NA TELEFONIE ZBEDNE.
   Zgloszenie 2026-09-17: "na koszyku tez odstep pierwszej sekcji top
   jest za duzy". Sekcja zeszla do 40 px ('layout.css'), ale nad karta
   zostawalo 60. Reszta pochodzila z 'universal.css' Oxygena:
   '.woocommerce form.woocommerce-cart-form { padding: 20px }'.
   Te same 20 px zwezaly tez karte z obu stron - przy 390 px stala
   40 px od krawedzi zamiast 20. Na telefonie zdejmujemy je w calosci.
   ------------------------------------------------------------- */
@media (max-width: 560px) {
    body.woocommerce-cart .woocommerce form.woocommerce-cart-form,
    body.woocommerce-cart .woocommerce table.cart { padding: 0; }
}

/* POLE KUPONU NAD PRZYCISKIEM - NA KONCU SEKCJI, NIE W JEJ SRODKU.
   Ta regula musi stac PO regulach '.coupon' powyzej: maja identyczna
   wage, wiec decyduje kolejnosc. Wpisana wczesniej (w bloku
   '@media (max-width:560px)' przy siatce 'td.actions') przegrywala
   z 'flex-wrap:nowrap' i 'flex:1 1 auto' i nic nie zmieniala.
   ------------------------------------------------------------- */
@media (max-width: 560px) {
    /* POLE KUPONU NAD PRZYCISKIEM.
       Zgloszenie 2026-09-17: "na mobile pole wpisywania kuponu powinno
       byc nad buttonem, bo teraz go praktycznie nie widac - button
       zajmuje wiekszosc miejsca na szerokosc".

       Zmierzone przy 390 px: w rzedzie zostawalo na pole 44 px przy
       przycisku 202 px. Trzy rzeczy obok siebie (etykieta, pole,
       przycisk) nie mieszcza sie na telefonie - ukladamy je w kolumnie. */
    body.woocommerce-cart .woocommerce table.cart td.actions .coupon {
        flex-wrap: wrap;
        gap: 12px;
    }

    body.woocommerce-cart .woocommerce table.cart td.actions .coupon label,
    body.woocommerce-cart .woocommerce table.cart td.actions .coupon .input-text,
    body.woocommerce-cart .woocommerce table.cart td.actions .coupon button {
        flex: 1 0 100%;
        width: 100%;
        max-width: none;
    }
}

/* ---------- D. Podsumowanie - przyklejona karta ------------- */
body.woocommerce-cart .cart-collaterals {
    display: block;
    width: auto;
    margin: 0;
}

body.woocommerce-cart .cart_totals {
    position: sticky;
    top: 96px;
    width: auto !important;
    float: none !important;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-s);
}

@media (max-width: 940px) {
    body.woocommerce-cart .cart_totals { position: static; }
}

body.woocommerce-cart .cart_totals > h2 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 500;
    color: var(--navy);
}

body.woocommerce-cart .cart_totals table,
body.woocommerce-cart .cart_totals table tbody { width: 100%; border: 0; }

body.woocommerce-cart .cart_totals th,
body.woocommerce-cart .cart_totals td {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--sans);
    font-size: .9rem;
    vertical-align: top;
}

body.woocommerce-cart .cart_totals th {
    font-weight: 400;
    color: var(--muted);
    text-align: left;
}

body.woocommerce-cart .cart_totals td {
    text-align: right;
    color: var(--navy);
    font-variant-numeric: tabular-nums;
}

/* Wiersz sumy - bez linii pod spodem.
   Wczesniejsza sekcja arkusza ma '.woocommerce .cart_totals table.shop_table th'
   z 'border-bottom' i waga (0,4,3), wiec krotszy selektor (0,3,3) przegrywal
   i kreska zostawala. Dokladamy '.woocommerce table.shop_table' -> (0,5,4). */
body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total th,
body.woocommerce-cart .woocommerce .cart_totals table.shop_table tr.order-total td {
    border-bottom: 0;
    padding-top: 14px;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--navy);
}

body.woocommerce-cart .wc-proceed-to-checkout { padding: 16px 0 0; }

/* ---------- E. Zamowienie: dwie kolumny --------------------- */
/* Oxygen (Global Styles -> WooCommerce) rysuje "pudelko" - ramke 1px, gorna 3px
   czarna, tlo, padding 20px i cien - m.in. na '.woocommerce .col2-set' i
   '.woocommerce table.shop_table'. Nowy wyglad ma na kasie wlasne karty, wiec
   pudelko Oxygena dawalo "ramke w ramce" (poprawione 2026-09-24). */
body.woocommerce-checkout #customer_details,
body.woocommerce-checkout #order_review table.shop_table {
    border: 0;
    border-radius: 0;
    background: none;
    padding: 0;
    box-shadow: none;
}

/* Pozycje w podsumowaniu: nazwa do lewej, cena do prawej, wariant jako drobny opis.
   Ogolna regula '#order_review td { text-align: right }' spychala nazwe produktu
   na srodek, a warianty (Baza, Pojemnosc) lamaly sie w waskiej kolumnie. */
body.woocommerce-checkout #order_review th.product-total { text-align: right; }

body.woocommerce-checkout #order_review td.product-name {
    text-align: left;
    line-height: 1.45;
}

body.woocommerce-checkout #order_review td.product-total {
    vertical-align: top;
    white-space: nowrap;
}

body.woocommerce-checkout #order_review td.product-name .product-quantity {
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
}

body.woocommerce-checkout #order_review td.product-name dl.variation {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 6px;
    margin: 6px 0 0;
    font-size: .8rem;
    color: var(--muted);
    text-align: left;
}

body.woocommerce-checkout #order_review td.product-name dl.variation dt,
body.woocommerce-checkout #order_review td.product-name dl.variation dd {
    float: none;
    clear: none;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

body.woocommerce-checkout #order_review td.product-name dl.variation p { margin: 0; }

body.woocommerce-checkout form.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    /* Wiersze: 1 - komunikaty (gdy ich nie ma: 0 px), 2 - naglowek "Twoje zamowienie",
       3 - podsumowanie. Formularz po lewej obejmuje wiersze 2-3, wiec jego wysokosc
       trafia do ostatniego wiersza ('1fr') i nie rozpycha wiersza z naglowkiem.
       Wczesniej formularz siedzial tylko w wierszu 1, przez co podsumowanie spadalo
       POD formularz (poprawione 2026-09-24). */
    grid-template-rows: auto auto 1fr;
    column-gap: clamp(20px, 2.6vw, 40px);
    row-gap: 0;
    align-items: start;
}

/* Komunikaty walidacji WooCommerce wstawia JS-em na poczatek formularza -
   zawsze na cala szerokosc, nad obiema kolumnami. */
body.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 18px;
}

/* <wc-order-attribution-inputs> to tylko kontener ukrytych pol (atrybucja zamowien
   WooCommerce). Jako element siatki zajmowal komorke i przesuwal uklad. Ukrycie
   nie wplywa na wysylke pol - przegladarka wysyla je niezaleznie od wygladu. */
body.woocommerce-checkout form.checkout > wc-order-attribution-inputs { display: none; }

@media (max-width: 1000px) {
    body.woocommerce-checkout form.checkout { grid-template-columns: 1fr; grid-template-rows: none; }
}

/* Oxygen daje formularzowi '.checkout { padding: 32px }' - na telefonie zjadalo to
   64 px szerokosci i pola robily sie ciasne. */
@media (max-width: 600px) {
    body.woocommerce-checkout form.checkout { padding: 0; }
}

body.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 2 / span 2;
    display: grid;
    gap: 18px;
}

body.woocommerce-checkout #customer_details .col-1,
body.woocommerce-checkout #customer_details .col-2 {
    width: auto;
    float: none;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
}

body.woocommerce-checkout #customer_details h3,
body.woocommerce-checkout #order_review_heading {
    margin: 0 0 16px;
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 500;
    color: var(--navy);
}

body.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 2; margin-bottom: 12px; }

body.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 3;
    position: sticky;
    top: 96px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-s);
}

@media (max-width: 1000px) {
    body.woocommerce-checkout #customer_details,
    body.woocommerce-checkout #order_review_heading,
    body.woocommerce-checkout #order_review { grid-column: 1; grid-row: auto; position: static; }
    body.woocommerce-checkout #customer_details { margin-bottom: 28px; }
}

/* Pola formularza - jeden wzorzec dla calego checkoutu. */
body.woocommerce-checkout .form-row {
    margin: 0 0 14px;
    padding: 0;
}

body.woocommerce-checkout .form-row label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--navy);
}

body.woocommerce-checkout .form-row .required { color: var(--red); }

body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row textarea,
body.woocommerce-checkout .form-row select,
body.woocommerce-checkout .select2-container .select2-selection {
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: #fff;
    font-family: var(--sans);
    font-size: .93rem;
    color: var(--navy);
}

body.woocommerce-checkout .form-row textarea { min-height: 96px; }

body.woocommerce-checkout .form-row input.input-text:focus,
body.woocommerce-checkout .form-row textarea:focus,
body.woocommerce-checkout .form-row select:focus {
    outline: none;
    border-color: var(--navy);
}

/* Podsumowanie zamowienia w prawej kolumnie. */
body.woocommerce-checkout #order_review table.shop_table,
body.woocommerce-checkout #order_review table.shop_table tbody,
body.woocommerce-checkout #order_review table.shop_table tfoot { width: 100%; border: 0; }

body.woocommerce-checkout #order_review th,
body.woocommerce-checkout #order_review td {
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    font-family: var(--sans);
    font-size: .9rem;
}

body.woocommerce-checkout #order_review th { font-weight: 400; color: var(--muted); text-align: left; }
body.woocommerce-checkout #order_review td { text-align: right; color: var(--navy); font-variant-numeric: tabular-nums; }

body.woocommerce-checkout #order_review tr.order-total th,
body.woocommerce-checkout #order_review tr.order-total td {
    border-bottom: 0;
    font-size: 1.12rem;
    font-weight: 600;
    color: var(--navy);
}

/* Metody platnosci jako lista kart. */
body.woocommerce-checkout ul.payment_methods {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    border: 0;
    display: grid;
    gap: 8px;
}

body.woocommerce-checkout ul.payment_methods > li {
    padding: 13px 15px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: #fff;
}

body.woocommerce-checkout ul.payment_methods > li:has(input:checked) {
    border-color: var(--red);
    background: var(--paper);
}

body.woocommerce-checkout ul.payment_methods > li label {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-family: var(--sans);
    font-size: .92rem;
    font-weight: 500;
    color: var(--navy);
    cursor: pointer;
}

body.woocommerce-checkout ul.payment_methods input[type="radio"] {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--red);
}

/* ---------- F. Przyciski glowne ----------------------------
   Ten sam komponent co w sklepie i na karcie produktu. Oba sa elementami
   <a> lub <button>, wiec maska pedzla dziala. */
body.woocommerce-cart a.checkout-button,
body.woocommerce-checkout #place_order {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 54px;
    padding: 0 28px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    background-color: var(--red);
    background-image: none;
    font-family: var(--sans);
    font-size: .735rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

body.woocommerce-cart a.checkout-button::after,
body.woocommerce-checkout #place_order::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    bottom: -2px;
    height: 210%;
    z-index: -1;
    background: var(--navy);
    border-radius: 48% 52% 0 0 / 16% 20% 0 0;
    transform: translateY(102%) rotate(-2deg);
    transition: transform .95s cubic-bezier(.62, .02, .3, 1), border-radius .95s cubic-bezier(.62, .02, .3, 1);
}

body.woocommerce-cart a.checkout-button:hover,
body.woocommerce-checkout #place_order:hover {
    transform: translateY(-2px);
    border-color: var(--navy);
    background-color: var(--red);
    color: #fff;
}

body.woocommerce-cart a.checkout-button:hover::after,
body.woocommerce-checkout #place_order:hover::after {
    transform: translateY(0) rotate(0deg);
    border-radius: 0;
}

@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
    body.woocommerce-cart a.checkout-button::after,
    body.woocommerce-checkout #place_order::after {
        left: 0; right: 0; top: 0; bottom: 0;
        height: auto;
        border-radius: 0;
        transform: none;
        background:
            repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, rgba(255,255,255,0) 2px 11px),
            var(--navy);
        -webkit-mask-image: var(--brush);        mask-image: var(--brush);
        -webkit-mask-size: 300% 100%;            mask-size: 300% 100%;
        -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
        -webkit-mask-position: 100% center;      mask-position: 100% center;
        transition: -webkit-mask-position 1.05s cubic-bezier(.42, .03, .25, 1),
                            mask-position 1.05s cubic-bezier(.42, .03, .25, 1);
    }
    body.woocommerce-cart a.checkout-button:hover::after,
    body.woocommerce-checkout #place_order:hover::after {
        transform: none;
        border-radius: 0;
        -webkit-mask-position: 0% center;        mask-position: 0% center;
    }
}

/* ---------- G. Pusty koszyk -------------------------------- */
body.woocommerce-cart .cart-empty {
    margin: 0 0 18px;
    padding: 0;
    font-family: var(--serif);
    font-size: 1.3rem;
    color: var(--navy);
    text-align: center;
}

/* WooCommerce dokleja tu ikone przez ':before' (znak z wlasnego kroju
   ikonowego). Na naszej wysrodkowanej karcie wisiala z boku tekstu jako
   pojedynczy, obcy znak - chowamy ja. */
body.woocommerce-cart .cart-empty.woocommerce-info::before,
body.woocommerce-cart .cart-empty::before {
    display: none;
    content: none;
}

body.woocommerce-cart .wc-empty-cart-message + .return-to-shop,
body.woocommerce-cart .return-to-shop {
    text-align: center;
}

body.woocommerce-cart .woocommerce:has(.cart-empty) {
    display: block;
    max-width: 620px;
    margin: 0 auto;
    padding: clamp(34px, 5vw, 60px) 26px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    body.woocommerce-cart *,
    body.woocommerce-checkout * { transition: none !important; }
}


/* ============================================================
   2026-08-20 - MOJE KONTO: EKRAN LOGOWANIA I WIDOK ZALOGOWANY
   Dopisane na koncu arkusza - przy remisie wagi wygrywa to, co pozniej.
   Znacznikow WooCommerce nie ruszamy; naglowek i stopke ekranu logowania
   dokleja konto.js.
   ============================================================ */

/* ---------- 1. Ekran logowania ----------------------------- */
body.woocommerce-account .bmx-konto-logowanie {
    max-width: 470px;
    margin: 0 auto;
    padding: clamp(26px, 3vw, 40px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-l);
}

.bmx-konto-hero { margin-bottom: 24px; text-align: center; }

.bmx-konto-hero__e {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--sans);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--red);
}

.bmx-konto-hero__h {
    margin: 0;
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    line-height: 1.14;
    letter-spacing: -.015em;
    color: var(--navy);
}

.bmx-konto-hero__h em { font-style: italic; color: var(--red); }

.bmx-konto-hero__l {
    margin: 14px auto 0;
    max-width: 40ch;
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--muted);
}

body.woocommerce-account form.woocommerce-form-login {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
}

body.woocommerce-account form.woocommerce-form-login .form-row { margin: 0 0 14px; padding: 0; }

body.woocommerce-account form.woocommerce-form-login label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
}

body.woocommerce-account form.woocommerce-form-login input.input-text {
    box-sizing: border-box;
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    font-family: var(--sans);
    font-size: .95rem;
    color: var(--navy);
}

body.woocommerce-account form.woocommerce-form-login input.input-text:focus {
    outline: none;
    background: #fff;
    border-color: var(--navy);
}

/* "Zapamietaj mnie" - etykieta przy polu wyboru nie jest nadtytulem,
   wiec cofamy jej wersaliki z reguly wyzej. */
body.woocommerce-account form.woocommerce-form-login label.woocommerce-form__label-for-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 14px;
    font-size: .85rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--muted);
    cursor: pointer;
}

body.woocommerce-account form.woocommerce-form-login input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--red);
}

/* Przycisk logowania - komponent makiety z hoverem "z pedzla".
   To <button>, wiec maska dziala (input jej nie ma). */
body.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 0 26px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    background-image: none;
    font-family: var(--sans);
    font-size: .73rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #fff;
    cursor: pointer;
    transition: color .45s var(--ease), border-color .45s var(--ease), transform .45s var(--ease);
}

body.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        repeating-linear-gradient(112deg, rgba(255,255,255,.022) 0 2px, rgba(255,255,255,0) 2px 11px),
        var(--navy);
    -webkit-mask-image: var(--brush);        mask-image: var(--brush);
    -webkit-mask-size: 300% 100%;            mask-size: 300% 100%;
    -webkit-mask-repeat: no-repeat;          mask-repeat: no-repeat;
    -webkit-mask-position: 100% center;      mask-position: 100% center;
    transition: -webkit-mask-position 1.05s cubic-bezier(.42,.03,.25,1),
                        mask-position 1.05s cubic-bezier(.42,.03,.25,1);
}

body.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit:hover {
    transform: translateY(-2px);
    border-color: var(--navy);
    color: #fff;
}

body.woocommerce-account form.woocommerce-form-login button.woocommerce-form-login__submit:hover::after {
    -webkit-mask-position: 0% center;        mask-position: 0% center;
}

body.woocommerce-account .woocommerce-LostPassword {
    margin: 16px 0 0;
    text-align: center;
    font-family: var(--sans);
    font-size: .82rem;
}

body.woocommerce-account .woocommerce-LostPassword a {
    color: var(--muted);
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

body.woocommerce-account .woocommerce-LostPassword a:hover {
    color: var(--red);
    border-bottom-color: currentColor;
}

.bmx-konto-stopka {
    margin: 18px 0 0;
    padding-top: 18px;
    border-top: 1px solid var(--line-soft);
    text-align: center;
    font-family: var(--sans);
    font-size: .85rem;
    font-weight: 400;
    color: var(--muted);
}

.bmx-konto-stopka a {
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--line);
}

.bmx-konto-stopka a:hover { color: var(--red); border-bottom-color: currentColor; }


/* ---------- 2. Widok zalogowany ----------------------------
   'div.woocommerce' zawiera nawigacje i tresc jedno pod drugim.
   Ustawiamy je obok siebie: menu w bocznej karcie, tresc w glownej.
   ------------------------------------------------------------ */
body.woocommerce-account:not(.woocommerce-checkout) .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 268px minmax(0, 1fr);
    gap: clamp(18px, 2.2vw, 32px);
    align-items: start;
}

@media (max-width: 860px) {
    body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
        grid-template-columns: 1fr;
    }
}

body.woocommerce-account .woocommerce-notices-wrapper { grid-column: 1 / -1; }

/* Menu konta */
body.woocommerce-account .woocommerce-MyAccount-navigation {
    position: sticky;
    top: 96px;
    width: auto;
    float: none;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: var(--shadow-s);
}

@media (max-width: 860px) {
    body.woocommerce-account .woocommerce-MyAccount-navigation { position: static; }
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    display: block;
    padding: 11px 15px;
    border-radius: var(--r-s);
    font-family: var(--sans);
    font-size: .9rem;
    font-weight: 500;
    color: var(--navy);
    text-decoration: none;
    transition: background .3s var(--ease), color .3s var(--ease);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--paper);
    color: var(--red);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--navy);
    color: #fff;
}

/* Wylogowanie odsuniete od reszty - to dzialanie innego rodzaju. */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 8px !important;
    padding-top: 8px !important;
    border-top: 1px solid var(--line-soft) !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a { color: var(--muted); }

/* Tresc konta */
body.woocommerce-account .woocommerce-MyAccount-content {
    width: auto;
    float: none;
    padding: clamp(20px, 2.4vw, 32px);
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    font-family: var(--sans);
    font-size: .95rem;
    font-weight: 300;
    line-height: 1.7;
    color: var(--ink);
}

body.woocommerce-account .woocommerce-MyAccount-content h2,
body.woocommerce-account .woocommerce-MyAccount-content h3,
body.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-weight: 500;
    font-size: 1.16rem;
    color: var(--navy);
}

body.woocommerce-account .woocommerce-MyAccount-content a { color: var(--red); }

/* Adresy */
body.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
}

@media (max-width: 620px) {
    body.woocommerce-account .woocommerce-Addresses { grid-template-columns: 1fr; }
}

body.woocommerce-account .woocommerce-Address {
    width: auto;
    float: none;
    padding: 18px;
    background: var(--paper);
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
}

body.woocommerce-account .woocommerce-Address-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

body.woocommerce-account .woocommerce-Address-title h3 { margin: 0; }

body.woocommerce-account .woocommerce-Address address {
    margin-top: 10px;
    font-style: normal;
    line-height: 1.7;
    color: var(--muted);
}

/* Formularz danych konta */
body.woocommerce-account .woocommerce-EditAccountForm .form-row { margin: 0 0 14px; padding: 0; }

body.woocommerce-account .woocommerce-EditAccountForm label {
    display: block;
    margin-bottom: 6px;
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--navy);
}

body.woocommerce-account .woocommerce-EditAccountForm input.input-text,
body.woocommerce-account .woocommerce-EditAccountForm input.woocommerce-Input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--line);
    border-radius: var(--r-s);
    background: var(--paper);
    font-family: var(--sans);
    font-size: .93rem;
    color: var(--navy);
}

body.woocommerce-account .woocommerce-EditAccountForm input:focus {
    outline: none;
    background: #fff;
    border-color: var(--navy);
}

body.woocommerce-account .woocommerce-EditAccountForm fieldset {
    margin: 22px 0 0;
    padding: 18px;
    border: 1px solid var(--line-soft);
    border-radius: var(--r-s);
    background: var(--paper);
}

body.woocommerce-account .woocommerce-EditAccountForm legend {
    padding: 0 8px;
    font-family: var(--sans);
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--navy);
}

/* Przyciski w tresci konta (Zapisz, Edytuj, Przegladaj produkty). */
body.woocommerce-account .woocommerce-MyAccount-content .button,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 24px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}

body.woocommerce-account .woocommerce-MyAccount-content .button:hover,
body.woocommerce-account .woocommerce-MyAccount-content button[type="submit"]:hover {
    transform: translateY(-2px);
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* Komunikat "Nie zlozono jeszcze zadnych zamowien" */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0;
    padding: 18px 20px;
    border: 1px solid var(--line-soft);
    border-left: 3px solid var(--navy);
    border-radius: var(--r-s);
    background: var(--paper);
    color: var(--ink);
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-info::before { display: none; content: none; }


/* ============================================================
   2026-08-20 (poprawka) - NAWIGACJA WRACA NAD TRESC
   Poprzednia wersja stawiala menu w bocznej kolumnie o stalej szerokosci.
   Efekt byl odwrotny do zamierzonego: menu zajmowalo tyle miejsca, ze
   wygladalo na glowny element strony, a wlasciwa tresc konta scisnela sie
   obok. Wracamy do ukladu pionowego - tresc na calej szerokosci, a menu
   nad nia jako poziomy pasek pigulek.
   ============================================================ */

body.woocommerce-account .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: block;
}

body.woocommerce-account .woocommerce-MyAccount-navigation {
    position: static;
    width: auto;
    float: none;
    margin: 0 0 18px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

body.woocommerce-account .woocommerce-MyAccount-navigation ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a {
    padding: 10px 18px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

body.woocommerce-account .woocommerce-MyAccount-navigation li a:hover {
    background: var(--paper);
    border-color: var(--navy);
    color: var(--navy);
}

body.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}

/* Wylogowanie - odsuniete odstepem, nie kreska (przy pasku poziomym
   kreska u gory wygladalaby jak przypadkowy element). */
body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    border: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}

body.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout a:hover {
    background: transparent;
    border-color: var(--line);
    color: var(--red);
}

/* Tresc znow jest glownym elementem - pelna szerokosc. */
body.woocommerce-account .woocommerce-MyAccount-content {
    width: auto;
    float: none;
}


/* ============================================================
   2026-08-20 (poprawka 2) - SIATKA DWUKOLUMNOWA NAPRAWDE WYLACZONA
   Poprzednia poprawka ustawiala 'display:block', ale przegrywala waga
   z regula, ktora te siatke wlaczala:
       body.woocommerce-account:not(.woocommerce-checkout) .woocommerce:has(...)  -> (0,4,1)
       body.woocommerce-account .woocommerce:has(...)                             -> (0,3,1)
   Dlatego menu dalej siedzialo w pierwszej kolumnie (pod nim pustka),
   a tresc byla scisnieta w drugiej. Powtarzamy TEN SAM selektor, wiec
   waga jest rowna, a nasza regula jest pozniej - i wygrywa.
   ============================================================ */
body.woocommerce-account:not(.woocommerce-checkout) .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: block;
    grid-template-columns: none;
}

body.woocommerce-account:not(.woocommerce-checkout) .woocommerce-MyAccount-navigation,
body.woocommerce-account:not(.woocommerce-checkout) .woocommerce-MyAccount-content {
    float: none;
    width: auto;
    max-width: none;
}


/* ---------- H. Po zamowieniu: podziekowanie, odrzucona platnosc -------
   Strona "zamowienie przyjete" korzystala ze starych stylow Oxygena: czarne paski
   3 px, pudelka w pudelkach, jasnoniebieskie linki, a przy odrzuconej platnosci
   szare prostokatne przyciski na cala szerokosc. Tu dostaje ten sam jezyk co koszyk
   i kasa: biale karty z cienka ramka, przyciski-pigulki (2026-09-24). */
body.woocommerce-order-received .woocommerce-order {
    display: grid;
    gap: 22px;
    max-width: 1000px;
    margin: 0 auto;
    color: var(--ink);
}

body.woocommerce-order-received .woocommerce-order > * { margin: 0; }

/* Komunikat glowny: "Dziekujemy..." albo "Niestety..." */
body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-thankyou-order-failed {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--serif);
    font-size: clamp(1.35rem, 2.1vw, 1.8rem);
    font-weight: 500;
    line-height: 1.3;
    color: var(--navy);
}

body.woocommerce-order-received .woocommerce-thankyou-order-received::before,
body.woocommerce-order-received .woocommerce-thankyou-order-failed::before { display: none; }

/* Karty - neutralizujemy "pudelko" Oxygena (ramka 3 px u gory, cien, padding 20 px). */
body.woocommerce-order-received ul.woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-details,
body.woocommerce-order-received .woocommerce-bacs-bank-details,
body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
    margin: 0;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--line-soft);
    border-radius: var(--r);
    box-shadow: none;
}

/* Podsumowanie: numer, data, kwota, platnosc */
body.woocommerce-order-received ul.woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 40px;
    list-style: none;
}

body.woocommerce-order-received ul.woocommerce-order-overview li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--muted);
}

body.woocommerce-order-received ul.woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
}

/* Naglowki sekcji */
body.woocommerce-order-received .woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-column__title,
body.woocommerce-order-received .wc-bacs-bank-details-heading,
body.woocommerce-order-received .woocommerce-bacs-bank-details h2,
body.woocommerce-order-received .woocommerce-bacs-bank-details h3 {
    margin: 0 0 14px;
    font-family: var(--serif);
    font-size: 1.16rem;
    font-weight: 500;
    color: var(--navy);
}

/* Tabela szczegolow */
body.woocommerce-order-received .woocommerce-order-details table.shop_table {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    border-collapse: collapse;
}

body.woocommerce-order-received .woocommerce-order-details table.shop_table th,
body.woocommerce-order-received .woocommerce-order-details table.shop_table td {
    padding: 12px 0;
    border: 0;
    border-bottom: 1px solid var(--line-soft);
    background: none;
    font-family: var(--sans);
    font-size: .92rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    text-align: left;
    vertical-align: top;
    color: var(--navy);
}

body.woocommerce-order-received .woocommerce-order-details table.shop_table thead th,
body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot th {
    color: var(--muted);
}

body.woocommerce-order-received .woocommerce-order-details table.shop_table thead th {
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

body.woocommerce-order-received .woocommerce-order-details table.shop_table .product-total,
body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot td {
    text-align: right;
}

body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot tr:last-child th,
body.woocommerce-order-received .woocommerce-order-details table.shop_table tfoot tr:last-child td {
    border-bottom: 0;
}

body.woocommerce-order-received .woocommerce-order-details td.product-name a {
    color: var(--navy);
    font-weight: 500;
    text-decoration: none;
}

body.woocommerce-order-received .woocommerce-order-details td.product-name a:hover { color: var(--red); }

body.woocommerce-order-received .woocommerce-order-details ul.wc-item-meta {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    font-size: .8rem;
    color: var(--muted);
}

body.woocommerce-order-received .woocommerce-order-details ul.wc-item-meta li { margin: 0; padding: 0; }
body.woocommerce-order-received .woocommerce-order-details ul.wc-item-meta li p { display: inline; margin: 0; }
body.woocommerce-order-received .woocommerce-order-details ul.wc-item-meta .wc-item-meta-label { font-weight: 500; }

/* Adresy: dwie karty obok siebie (na telefonie jedna pod druga) */
body.woocommerce-order-received .woocommerce-customer-details .col2-set {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

body.woocommerce-order-received .woocommerce-customer-details .col2-set::before,
body.woocommerce-order-received .woocommerce-customer-details .col2-set::after { display: none; }

body.woocommerce-order-received .woocommerce-customer-details .woocommerce-column {
    float: none;
    width: auto;
}

body.woocommerce-order-received .woocommerce-customer-details address {
    margin: 0;
    padding: 0;
    border: 0;
    font-style: normal;
    line-height: 1.7;
    color: var(--ink);
}

body.woocommerce-order-received .woocommerce-customer-details address p { margin: 8px 0 0; }

/* Dane do przelewu (platnosc przelewem) */
body.woocommerce-order-received ul.wc-bacs-bank-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 36px;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.woocommerce-order-received ul.wc-bacs-bank-details li {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
}

body.woocommerce-order-received ul.wc-bacs-bank-details li strong {
    display: block;
    margin-top: 6px;
    font-size: .95rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--navy);
}

/* Przyciski "Zaplac" / "Anuluj" / "Moje konto" po odrzuconej platnosci */
body.woocommerce-order-received .woocommerce-thankyou-order-failed-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

body.woocommerce-order-received .woocommerce-order a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: 46px;
    margin: 0;
    padding: 0 28px;
    border: 1px solid var(--red);
    border-radius: 999px;
    background: var(--red);
    color: #fff;
    font-family: var(--sans);
    font-size: .755rem;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: none;
    transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease);
}

body.woocommerce-order-received .woocommerce-order a.button:hover { transform: translateY(-2px); }

body.woocommerce-order-received .woocommerce-order a.button.cancel,
body.woocommerce-order-received .woocommerce-thankyou-order-failed-actions a.button:not(.pay) {
    background: #fff;
    color: var(--navy);
    border-color: var(--line);
}

/* "Dzialania" w tabeli: przyciski obok siebie */
body.woocommerce-order-received .woocommerce-order-details tfoot td a.button { margin: 4px 0 4px 8px; }

/* WooCommerce dokleja do tych list 'clearfix' (::before / ::after). W ukladzie
   flex pseudo-elementy staja sie pustymi polami i odstep 'gap' robil wciecie. */
body.woocommerce-order-received ul.woocommerce-order-overview::before,
body.woocommerce-order-received ul.woocommerce-order-overview::after,
body.woocommerce-order-received ul.wc-bacs-bank-details::before,
body.woocommerce-order-received ul.wc-bacs-bank-details::after { display: none; }

body.woocommerce-order-received .woocommerce-order-details ul.wc-item-meta li p {
    font-size: inherit;
    color: inherit;
}


/* ---------- I. Zgody w kasie: regulamin i zgoda marketingowa ----------
   Etykiety zwyklych pol kasy sa kapitalikami (np. "ADRES EMAIL"). Checkboxy zgod
   to pelne zdania - maja wygladac jak tekst, nie jak naglowek pola. Pola dochodza
   z bm-zgody-kasa.php i z WooCommerce (regulamin) - 2026-09-24. */
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
    margin: 16px 0 0;
    padding: 0;
}

body.woocommerce-checkout #payment .woocommerce-privacy-policy-text p {
    margin: 0 0 12px;
}

body.woocommerce-checkout #payment .form-row.validate-required,
body.woocommerce-checkout #payment .bm-zgoda-marketingowa {
    margin: 0 0 12px;
    padding: 0;
}

body.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-family: var(--sans);
    font-size: .84rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink);
    cursor: pointer;
}

body.woocommerce-checkout #payment label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--red);
    cursor: pointer;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-link {
    color: var(--navy);
    text-decoration: underline;
    text-underline-offset: 3px;
}

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-link:hover { color: var(--red); }

body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper .required {
    color: var(--red);
    text-decoration: none;
    border: 0;
}

/* Brak zaznaczenia regulaminu po probie zamowienia - czerwona ramka pola. */
body.woocommerce-checkout #payment .woocommerce-invalid label.woocommerce-form__label-for-checkbox input[type="checkbox"] {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

/* Gwiazdka z szablonu WooCommerce (osobny element za tekstem) - ukryta; wlasna
   stoi w srodku zdania (bm-zgody-kasa.php). */
body.woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label > abbr.required { display: none; }