body {
    color: #333333;
    -webkit-font-smoothing: antialiased;
}

/* Header transition behavior */
#main-header {
    transition: background-color 0.3s ease, backdrop-filter 0.3s ease, color 0.3s ease;
}

/* Style dla headera przezroczystego/półprzezroczystego na samej górze strony */
#main-header.is-top {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #1a1a1a;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#main-header.is-top a, 
#main-header.is-top button {
    color: #1a1a1a;
}

#main-header.is-top a:hover, 
#main-header.is-top button:hover {
    color: #666666;
}

/* Brak inwersji logo - tło jest jasne i czytelne */
#main-header.is-top img.logo {
    /*height: 4rem;*/
}

/* Style dla headera po przewinięciu (lub na podstronach) */
#main-header.is-scrolled {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: #1a1a1a;
    border-bottom: none;
}

#main-header.is-scrolled a, 
#main-header.is-scrolled button {
    color: #1a1a1a;
}

#main-header.is-scrolled a:hover, 
#main-header.is-scrolled button:hover {
    color: #666666;
}

#main-header.is-scrolled img.logo {
    /*height: 2rem;*/
}

/* Wyjątek na stronach bez hero image, by zawsze był w trybie is-scrolled */
body.page-sklep #main-header,
body.page-uslugi #main-header,
body.page-hurtownia #main-header,
body.page-szczegoly #main-header {
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    color: #1a1a1a;
    border-bottom: none;
}
body.page-sklep #main-header img.logo,
body.page-uslugi #main-header img.logo,
body.page-hurtownia #main-header img.logo,
body.page-szczegoly #main-header img.logo {
    filter: none;
    height: 4rem; /* h-16 */
}
body.page-sklep #main-header a, 
body.page-sklep #main-header button,
body.page-uslugi #main-header a, 
body.page-uslugi #main-header button,
body.page-hurtownia #main-header a, 
body.page-hurtownia #main-header button,
body.page-szczegoly #main-header a, 
body.page-szczegoly #main-header button {
    color: #1a1a1a;
}
body.page-sklep #main-header a:hover, 
body.page-sklep #main-header button:hover,
body.page-uslugi #main-header a:hover, 
body.page-uslugi #main-header button:hover,
body.page-hurtownia #main-header a:hover, 
body.page-hurtownia #main-header button:hover,
body.page-szczegoly #main-header a:hover, 
body.page-szczegoly #main-header button:hover {
    color: #666666;
}

/* --- GŁÓWNY KONTEINER KOSZYKA --- */
.page-id-8 .woocommerce {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* --- TABELA KOSZYKA --- */
.page-id-8 table.shop_table {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    overflow: hidden;
    width: 100%;
    margin-bottom: 30px;
}

.page-id-8 table.shop_table th {
    background-color: #f9f9f9;
    padding: 15px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #e1e1e1;
}

.page-id-8 table.shop_table td {
    padding: 20px;
    vertical-align: middle;
    border-bottom: 1px solid #eee;
}

/* Obrazek produktu */
.page-id-8 .product-thumbnail img {
    width: 80px;
    height: auto;
    border-radius: 4px;
}

/* Nazwa produktu */
.page-id-8 .product-name a {
    color: #222;
    text-decoration: none;
    font-weight: 500;
}

/* Ilość (input) */
.page-id-8 .qty {
    width: 60px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* --- SEKCJA AKCJI (KUPONY / AKTUALIZACJA) --- */
.page-id-8 .actions {
    padding: 20px !important;
    background: #fcfcfc;
}

.page-id-8 .coupon {
    float: left;
}

.page-id-8 .button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

.page-id-8 .button:hover {
    background-color: #555;
}

/* --- PODSUMOWANIE KOSZYKA (CART TOTALS) --- */
.page-id-8 .cart-collaterals {
    display: flex;
    justify-content: flex-end;
}

.page-id-8 .cart_totals {
    width: 100%;
    max-width: 400px;
    background: #f9f9f9;
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.page-id-8 .cart_totals h2 {
    font-size: 20px;
    margin-top: 0;
    margin-bottom: 20px;
}

.page-id-8 .cart_totals table {
    width: 100%;
}

.page-id-8 .cart_totals th, 
.page-id-8 .cart_totals td {
    padding: 10px 0;
}

/* Przycisk do kasy */
.page-id-8 .wc-proceed-to-checkout a.checkout-button {
    display: block;
    text-align: center;
    background-color: #333; /* Przykładowy kolor sukcesu */
    color: white;
    padding: 15px;
    text-decoration: none;
    font-weight: bold;
    border-radius: 4px;
    margin-top: 20px;
}

/* --- RESPONSYWNOŚĆ (MOBILE) --- */
@media (max-width: 768px) {
    .page-id-8 table.shop_table thead {
        display: none; /* Ukryj nagłówki na telefonie */
    }
    
    .page-id-8 table.shop_table td {
        display: block;
        text-align: right;
        border-bottom: none;
    }
    
    .page-id-8 table.shop_table td::before {
        content: attr(data-title);
        float: left;
        font-weight: bold;
    }
}

/* --- KASA (CHECKOUT PAGE) --- */
.page-id-9 #customer_details {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    margin-bottom: 40px;
}

.page-id-9 #customer_details .col-1,
.page-id-9 #customer_details .col-2 {
    flex: 1 1 400px; /* Responsywne kolumny */
}

/* Stylizacja pól formularza */
.page-id-9 form .form-row {
    margin-bottom: 15px;
}

.page-id-9 form label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 14px;
}

.page-id-9 form .input-text,
.page-id-9 form select {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}

/* Sekcja podsumowania zamówienia */
.page-id-9 #order_review {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.page-id-9 table.shop_table {
    width: 100%;
    margin-bottom: 20px;
}

.page-id-9 table.shop_table td {
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

/* Przycisk "Kupuję i płacę" */
.page-id-9 #place_order {
    display: block;
    width: 100%;
    padding: 18px;
    background-color: #222; /* Dopasowane do estetyki */
    color: #fff;
    font-size: 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.3s;
}

.page-id-9 #place_order:hover {
    background-color: #000;
}

/* --- STRONA PODZIĘKOWANIA (ID 9) --- */
.page-id-9 .woocommerce-order {
    max-width: 800px;
    margin: 40px auto;
    padding: 40px;
    text-align: center;
    border: 1px solid #eee;
    border-radius: 8px;
}

/* Komunikat o otrzymaniu zamówienia */
.page-id-9 .woocommerce-thankyou-order-received {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    margin-bottom: 30px;
}

/* Lista ze szczegółami (Numer zamówienia, data itp.) */
.page-id-9 ul.order_details {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 4px;
    margin-bottom: 40px;
}

.page-id-9 ul.order_details li {
    font-size: 14px;
    font-weight: 500;
}

/* Tabela z produktami na stronie podziękowania */
.page-id-9 table.order_details {
    width: 100%;
    border-collapse: collapse;
}

.page-id-9 table.order_details th,
.page-id-9 table.order_details td {
    padding: 15px;
    border-bottom: 1px solid #eee;
    text-align: left;
}

/* .woocommerce-notices-wrapper {
} */

.woocommerce-message {
    padding: 20px;
    background-color: #f4f4f4;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart-empty.woocommerce-info {
    display: block;
    line-height: 30px;
    margin-bottom: 30px;
}

.checkout-button, .wc-forward {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}

dl.variation {
    font-size: 11px;
}

.checkout h3 {
    font-size: 1.7rem;
    margin-bottom: 30px;
}

.woocommerce-checkout-review-order table th {
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* Kontener główny metod płatności */
.woocommerce-checkout-payment ul.payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 20px 0 !important;
}

/* Pojedyncza metoda płatności jako kafelek */
.woocommerce-checkout-payment ul.payment_methods li.wc_payment_method {
    margin-bottom: 12px;
    border: 2px solid #e4e4e4;
    border-radius: 8px;
    padding: 15px 20px;
    background-color: #fff;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    position: relative;
}

/* Efekt najechania myszką */
.woocommerce-checkout-payment ul.payment_methods li.wc_payment_method:hover {
    border-color: #adadad;
}

/* Wygląd kafelka, gdy dana metoda jest ZAZNACZONA */
.woocommerce-checkout-payment ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked) {
    border-color: #111111; /* Kolor dopasowany do Twojego czarnego przycisku */
    background-color: #fafafa;
}

/* Ostylowanie etykiety (tekstu głównego) */
.woocommerce-checkout-payment ul.payment_methods li.wc_payment_method label {
    font-weight: 600;
    font-size: 16px;
    color: #222;
    cursor: pointer;
    display: inline-block;
    margin-left: 8px;
}

/* Lekkie odsunięcie i zmiana wyglądu inputu radio */
.woocommerce-checkout-payment ul.payment_methods li.wc_payment_method input[type="radio"] {
    margin: 0;
    transform: scale(1.1);
    accent-color: #111111; /* Kolor kropki radio dopasowany do przycisku */
    vertical-align: middle;
}

/* Opis metody płatności (rozwijany tekst po zaznaczeniu) */
.woocommerce-checkout-payment ul.payment_methods li .payment_box {
    background-color: #f7f7f7;
    border-radius: 6px;
    padding: 12px 15px;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #555;
    line-height: 1.5;
}

/* Usunięcie domyślnego trójkącika WooCommerce nad boxem z opisem */
.woocommerce-checkout-payment ul.payment_methods li .payment_box::before {
    display: none !important;
}

.woocommerce-privacy-policy-text {
    margin-bottom: 30px;
}

@media (max-width: 700px) {
    img.logo {
        max-width: 200px;
        max-height: 58px;
    }
    .page-id-9 ul.order_details {
        flex-direction: column;
    }
    h1.text-5xl {
        font-size: 2rem!important;
    }
    .herro p {
        font-size: 13px!important;
    }
    .single_add_to_cart_button {
        padding: 12px 24px;
        width: 100%;
        max-width: unset!important;
    }
}
@media (min-width: 700px) {
    ul.woocommerce-order-overview.woocommerce-thankyou-order-details.order_details li {
        font-size: 8px;
    }
    #main-header img.logo {
        filter: none;
        height: 4rem;
    }
}

/* Dostepnosc: widoczny wskaznik fokusu klawiatury (WCAG 2.4.7) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #1a1a1a;
    outline-offset: 2px;
}

/* Link pomijania nawigacji (WCAG 2.4.1) */
.przejdz-do-tresci {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 20px;
    background: #1a1a1a;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.przejdz-do-tresci:focus {
    left: 0;
}


/* ===== Akordeon w sekcji informacyjnej (details/summary, bez JS) ===== */
.mbl-akordeon__pozycja {
    border-bottom: 1px solid #d1d5db;
}
.mbl-akordeon__naglowek {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 17px 0;
    cursor: pointer;
    list-style: none;
    transition: color .2s ease;
}
/* ukrycie domyslnego trojkata przegladarki */
.mbl-akordeon__naglowek::-webkit-details-marker { display: none; }
.mbl-akordeon__naglowek::marker { content: ''; }

.mbl-akordeon__naglowek h3 {
    margin: 0;
    transition: color .2s ease;
}
.mbl-akordeon__naglowek:hover h3 {
    color: #4b5563;
}
.mbl-akordeon__pozycja:focus-within .mbl-akordeon__naglowek {
    outline: 3px solid #1a1a1a;
    outline-offset: 4px;
}

/* znak plus/minus rysowany CSS-em - spojny z minimalistycznym stylem strony */
.mbl-akordeon__ikona {
    position: relative;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
}
.mbl-akordeon__ikona::before,
.mbl-akordeon__ikona::after {
    content: '';
    position: absolute;
    background: #1a1a1a;
    transition: transform .25s ease, opacity .25s ease;
}
.mbl-akordeon__ikona::before {
    top: 6px; left: 0; width: 14px; height: 2px;
}
.mbl-akordeon__ikona::after {
    top: 0; left: 6px; width: 2px; height: 14px;
}
.mbl-akordeon__pozycja[open] .mbl-akordeon__ikona::after {
    transform: rotate(90deg);
    opacity: 0;
}

.mbl-akordeon__tresc {
    padding: 0 0 20px;
    max-width: 62rem;
}
@media (min-width: 768px) {
    .mbl-akordeon__tresc { padding-right: 42px; }
}

/* delikatne rozwijanie */
.mbl-akordeon__pozycja[open] .mbl-akordeon__tresc {
    animation: mblRozwin .25s ease-out;
}
@keyframes mblRozwin {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}