/*
Theme Name: Literkownia Montessori
Theme URI: https://literkownia.pl
Author: Ty
Description: Motyw Montessori Premium z obsługą WooCommerce i Tailwind CSS.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
*/


/* 1. GŁÓWNY KONTENER - UKŁAD GRID */
.woocommerce div.product {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobilnie: 1 kolumna */
    gap: 3rem;
    position: relative;
    /* Żeby badge się nie zgubił */
}

@media (min-width: 768px) {
    .woocommerce div.product {
        grid-template-columns: 1fr 1fr;
        /* Desktop: 2 równe kolumny */
        align-items: start;
    }
}

/* 2. LEWA STRONA - ZDJĘCIA I GALERIA */
.woocommerce div.product div.images {
    position: relative;
    /* Ważne dla badge'a */
    margin-bottom: 0;
}

.woocommerce div.product div.images img {
    border-radius: 1rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

/* Stylizacja miniaturek galerii pod spodem */
.woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
}

.woocommerce-product-gallery .flex-control-thumbs li {
    width: 20%;
    cursor: pointer;
}

.woocommerce-product-gallery .flex-control-thumbs img {
    opacity: 0.6;
    border-radius: 8px;
}

.woocommerce-product-gallery .flex-control-thumbs img:hover,
.woocommerce-product-gallery .flex-control-thumbs .flex-active {
    opacity: 1;
    border: 2px solid #2C3E50;
}

/* 3. BADGE "PROMOCJA" - NAŁOŻONY NA ZDJĘCIE */
.woocommerce span.onsale {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 20;
    /* Musi być nad zdjęciem */
    background-color: #e8363c;
    /* Twój accent color */
    color: white;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 8px 16px;
    border-radius: 50px;
    /* Pigułka */
    box-shadow: 0 4px 10px rgba(232, 54, 60, 0.4);
    min-height: auto;
    min-width: auto;
    line-height: normal;
}

/* 4. PRAWA STRONA - OPIS I ZAKUPY */
.woocommerce div.product div.summary {
    display: flex;
    flex-direction: column;
    padding-top: 10px;
}

/* Tytuł */
.woocommerce div.product .product_title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    line-height: 1.1;
    color: #2C3E50;
    margin: 0 0 1rem 0;
}

/* Cena */
.woocommerce div.product p.price {
    font-family: 'Inter', sans-serif;
    font-size: 1.75rem;
    color: #27ae60;
    font-weight: 700;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.woocommerce div.product p.price del {
    color: #9ca3af;
    font-size: 1.1rem;
    font-weight: 400;
    opacity: 0.7;
}

.woocommerce div.product p.price ins {
    text-decoration: none;
    background: transparent;
}

/* Opis krótki */
.woocommerce-product-details__short-description {
    font-family: 'Inter', sans-serif;
    color: #4b5563;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

/* Przycisk i Ilość */
.woocommerce div.product form.cart {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.woocommerce .quantity .input-text {
    width: 70px;
    padding: 14px;
    border: 2px solid #e5e7eb;
    border-radius: 50px;
    text-align: center;
    font-weight: 600;
    color: #2C3E50;
    background: #fff;
    font-size: 1.1rem;
}

.woocommerce button.button.alt {
    background-color: #2C3E50;
    color: white;
    padding: 16px 40px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    flex-grow: 1;
    /* Rozciągnij przycisk */
    max-width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.woocommerce button.button.alt:hover {
    background-color: #1a252f;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(44, 62, 80, 0.2);
}

/* Meta dane (Kategorie) */
.product_meta {
    border-top: 1px solid #f3f4f6;
    padding-top: 1.5rem;
    font-size: 0.9rem;
    color: #9ca3af;
}

.product_meta span {
    display: block;
    margin-bottom: 5px;
}

.product_meta a {
    color: #2C3E50;
    font-weight: 600;
    text-decoration: none;
}

/* 5. DOLNE ZAKŁADKI (Pełna szerokość pod spodem) */
.woocommerce-tabs {
    grid-column: 1 / -1;
    /* Rozciągnij na całą szerokość grida */
    margin-top: 4rem;
}

.woocommerce-tabs ul.tabs {
    padding: 0;
    margin: 0 0 2rem;
    list-style: none;
    display: flex;
    border-bottom: 2px solid #f3f4f6;
}

.woocommerce-tabs ul.tabs li {
    margin-right: 2rem;
}

.woocommerce-tabs ul.tabs li a {
    text-decoration: none;
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    color: #9ca3af;
    padding-bottom: 1rem;
    display: block;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}

.woocommerce-tabs ul.tabs li.active a {
    color: #2C3E50;
    border-bottom-color: #e8363c;
}

/* Produkty powiązane */
.related.products {
    grid-column: 1 / -1;
    margin-top: 3rem;
}

/* ==========================================================================
   SEKCJA PODOBNE PRODUKTY (RELATED PRODUCTS)
   ========================================================================== */

/* 1. KONTENER SEKCJI */
.related.products {
    margin-top: 5rem;
    padding-top: 3rem;
    border-top: 1px solid #f3f4f6;
    /* Delikatna linia oddzielająca od góry */
}

/* Nagłówek "Podobne produkty" */
.related.products>h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2C3E50;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

/* 2. SIATKA PRODUKTÓW (GRID) */
.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobilnie: 1 kolumna */
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
        /* Tablet: 2 kolumny */
    }
}

@media (min-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr);
        /* Desktop: 4 kolumny */
    }
}

/* 3. KARTA POJEDYNCZEGO PRODUKTU */
.related.products ul.products li.product {
    background: #ffffff;
    border-radius: 1rem;
    /* Zaokrąglenie karty */
    padding: 1rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    /* Delikatny cień */
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    /* Żeby przycisk był zawsze na dole */
    position: relative;
    /* Ważne dla badge'a */
    text-align: center;
    overflow: hidden;
}

/* Efekt Hover na kartę */
.related.products ul.products li.product:hover {
    transform: translateY(-5px);
    /* Uniesienie */
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.1);
    /* Mocniejszy cień */
    border-color: #e5e7eb;
}

/* 4. ZDJĘCIE PRODUKTU */
.related.products ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    /* Wymuszenie kwadratu */
    object-fit: cover;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
}

/* 5. BADGE "PROMOCJA" (Mały na karcie) */
.related.products ul.products li.product .onsale {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background-color: #e8363c;
    /* Czerwony */
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 6. TYTUŁ PRODUKTU */
.related.products ul.products li.product h2.woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #2C3E50;
    margin: 0.5rem 0;
    line-height: 1.3;
    padding: 0;
    font-weight: 600;
}

/* 7. GWIAZDKI (OCENA) */
.related.products .star-rating {
    margin: 0 auto 0.5rem auto;
    font-size: 0.85rem;
    color: #D4AF37;
    /* Złoty */
}

/* 8. CENA */
.related.products ul.products li.product .price {
    font-family: 'Inter', sans-serif;
    color: #27ae60;
    /* Zielony */
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    display: block;
}

.related.products ul.products li.product .price del {
    color: #9ca3af;
    /* Szary dla starej ceny */
    font-size: 0.9rem;
    font-weight: 400;
    margin-right: 5px;
    opacity: 0.7;
    display: inline-block;
}

.related.products ul.products li.product .price ins {
    text-decoration: none;
    background: transparent;
}

/* 9. PRZYCISK "DODAJ DO KOSZYKA" */
.related.products ul.products li.product .button {
    margin-top: auto;
    /* Wypycha przycisk na sam dół karty */
    display: inline-block;
    background-color: #f3f4f6;
    /* Jasne tło domyślnie */
    color: #2C3E50;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 20px;
    border-radius: 99px;
    text-decoration: none;
    transition: all 0.2s;
}

.related.products ul.products li.product .button:hover {
    background-color: #2C3E50;
    /* Granat po najechaniu */
    color: white;
}

/* ==========================================================================
   NAPRAWA GALERII (Lupa i Klikanie)
   ========================================================================== */

/* 1. Ukryj domyślną, brzydką lupę WooCommerce */
.woocommerce-product-gallery__trigger {
    display: none !important;
}

/* 2. Naprawa klikalności zdjęcia głównego */
.woocommerce-product-gallery .woocommerce-product-gallery__image {
    cursor: zoom-in;
    /* Zmienia kursor na lupkę po najechaniu */
    position: relative;
    overflow: hidden;
    border-radius: 1rem;
    /* Zaokrąglenie głównego zdjęcia */
}

/* 3. Efekt po najechaniu na główne zdjęcie */
.woocommerce-product-gallery .woocommerce-product-gallery__image img {
    transition: transform 0.5s ease;
    width: 100%;
    height: auto;
    display: block;
}

/* Delikatne powiększenie zdjęcia przy hoverze (zamiast starego zooma) */
.woocommerce-product-gallery .woocommerce-product-gallery__image:hover img {
    transform: scale(1.05);
}

/* Ukrycie starego kontenera lupy, żeby nie blokował kliknięć */
.woocommerce-product-gallery .zoomImg {
    cursor: pointer !important;
}


/* ==========================================================================
   SEKCJA PODOBNE PRODUKTY (Pełne Ostylowanie Premium)
   ========================================================================== */

/* 1. Kontener i Tytuł */
.related.products {
    margin-top: 6rem;
    padding-top: 3rem;
    border-top: 1px solid #f3f4f6;
}

.related.products>h2 {
    font-family: 'Playfair Display', serif;
    font-size: 2.5rem;
    color: #2C3E50;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 700;
}

/* 2. Grid Produktów (Równe kafelki) */
.related.products ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 640px) {
    .related.products ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .related.products ul.products {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 3. Wygląd Pojedynczej Karty */
.related.products ul.products li.product {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 1rem;
    /* Zaokrąglenie */
    padding: 1.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    margin-bottom: 0;
    /* Reset marginesów Woo */
}

.related.products ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #e5e7eb;
}

/* 4. Link i Zdjęcie */
.related.products ul.products li.product a.woocommerce-loop-product__link {
    text-decoration: none;
    display: block;
    margin-bottom: 1rem;
}

.related.products ul.products li.product img {
    width: 100%;
    height: 250px;
    /* Stała wysokość zdjęcia */
    object-fit: contain;
    /* Żeby nie ucinało produktu */
    margin-bottom: 1rem;
    transition: transform 0.3s;
}

.related.products ul.products li.product:hover img {
    transform: scale(1.05);
}

/* 5. Badge "Promocja" */
.related.products .onsale {
    position: absolute;
    top: 15px;
    right: 15px;
    /* Prawy górny róg */
    left: auto;
    margin: 0;
    background-color: #e8363c;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 99px;
    z-index: 10;
    min-height: auto;
    line-height: normal;
}

/* 6. Tytuł i Gwiazdki */
.related.products .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #2C3E50;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.related.products .star-rating {
    font-size: 0.8rem;
    color: #D4AF37;
    /* Złoty */
    margin-bottom: 0.5rem;
}

/* 7. Cena */
.related.products .price {
    font-family: 'Inter', sans-serif;
    color: #27ae60;
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 1.5rem;
}

.related.products .price del {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 400;
    margin-right: 8px;
    opacity: 0.7;
}

.related.products .price ins {
    text-decoration: none;
    background: transparent;
}

/* 8. Przycisk Dodaj do Koszyka */
.related.products .button {
    margin-top: auto;
    width: 100%;
    text-align: center;
    background-color: #f3f4f6;
    color: #2C3E50;
    font-weight: 600;
    padding: 12px;
    border-radius: 99px;
    transition: all 0.2s;
}

.related.products .button:hover {
    background-color: #2C3E50;
    color: white;
}

/* ==========================================================================
   KOSZYK (PREMIUM LAYOUT: LEWA TABELA + PRAWE PODSUMOWANIE)
   ========================================================================== */

/* 1. UKŁAD GŁÓWNY (DESKTOP) */
@media (min-width: 1024px) {

    /* WAŻNE: Dodano .woocommerce-cart, żeby nie psuło body */
    .woocommerce-cart .woocommerce {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        max-width: 100%;
    }

    /* Lewa kolumna: Formularz z tabelą */
    .woocommerce-cart .woocommerce-cart-form {
        flex: 1 1 65%;
        width: 65%;
    }

    /* Prawa kolumna: Podsumowanie */
    .woocommerce-cart .cart-collaterals {
        flex: 1 1 35%;
        width: 35%;
        margin-top: 0 !important;
    }
}

/* 2. STYLIZACJA KARTY "TABELA PRODUKTÓW" (LEWA) */
.woocommerce-cart-form {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    /* Cień premium */
    border: 1px solid #f3f4f6;
    margin-bottom: 2rem;
}

/* ==========================================================================
   POPRAWKA TABELI KOSZYKA (Szerokości kolumn)
   ========================================================================== */

/* 1. Ustawienie sztywnych szerokości, żeby tabela nie "pływała" */
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border: none;
    table-layout: fixed;
    /* WAŻNE: To wymusza posłuszeństwo kolumn */
}

/* --- KOLUMNA 1: USUWANIE (X) --- */
/* Musi być wąska, tylko na przycisk */
table.shop_table th.product-remove,
table.shop_table td.product-remove {
    width: 40px;
    /* Sztywna szerokość */
    text-align: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

table.shop_table td.product-remove .remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: #ef4444;
    text-decoration: none;
    font-weight: bold;
    margin: 0 auto;
    /* Wyśrodkowanie kółka */
    transition: all 0.2s;
    font-size: 1.2rem;
    line-height: 1;
}

table.shop_table td.product-remove .remove:hover {
    background-color: #ef4444;
    color: white;
}

/* --- KOLUMNA 2: ZDJĘCIE --- */
/* Też sztywna szerokość, żeby było blisko iksa */
table.shop_table th.product-thumbnail,
table.shop_table td.product-thumbnail {
    width: 90px;
    /* Sztywna szerokość */
    text-align: center;
    padding: 1.5rem 0;
    border-bottom: 1px solid #f3f4f6;
}

table.shop_table td.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
    /* Wyśrodkowanie zdjęcia */
}

/* --- KOLUMNA 3: NAZWA PRODUKTU --- */
/* Ta kolumna dostaje całą resztę miejsca */
table.shop_table th.product-name,
table.shop_table td.product-name {
    width: auto;
    /* Reszta miejsca */
    text-align: left;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid #f3f4f6;
}

table.shop_table td.product-name a {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2C3E50;
    text-decoration: none;
    display: block;
    line-height: 1.2;
}

/* --- POZOSTAŁE KOLUMNY (Cena, Ilość, Kwota) --- */
table.shop_table th.product-price,
table.shop_table td.product-price,
table.shop_table th.product-quantity,
table.shop_table td.product-quantity,
table.shop_table th.product-subtotal,
table.shop_table td.product-subtotal {
    width: 15%;
    /* Procentowy podział reszty */
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

/* Nagłówki ogólne */
table.shop_table thead th {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    font-weight: 600;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

/* Input Ilości */
table.shop_table td.product-quantity .quantity .input-text {
    width: 50px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    color: #2C3E50;
    font-weight: 600;
    margin: 0 auto;
}

/* Elementy tabeli (Produkt, Cena, Ilość) */
td.product-name a {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2C3E50;
    text-decoration: none;
}

td.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
    margin-right: 1rem;
}

/* Ikonka usuwania */
td.product-remove .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: #ef4444;
    text-decoration: none;
    font-weight: bold;
    transition: all 0.2s;
}

td.product-remove .remove:hover {
    background-color: #ef4444;
    color: white;
}

/* Input ilości */
td.product-quantity .quantity .input-text {
    width: 50px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    color: #2C3E50;
    font-weight: 600;
}

/* 3. DOLNA BELKA TABELI (KUPONY) */
td.actions {
    padding-top: 2rem !important;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
}

.coupon {
    display: flex;
    gap: 10px;
}

#coupon_code {
    padding: 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    font-size: 0.9rem;
    width: 150px;
}

button[name="apply_coupon"],
button[name="update_cart"] {
    padding: 10px 20px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    border: none;
    transition: 0.2s;
}

button[name="apply_coupon"] {
    background: white;
    border: 1px solid #2C3E50;
    color: #2C3E50;
}

button[name="apply_coupon"]:hover {
    background: #f3f4f6;
}

button[name="update_cart"] {
    background: #f3f4f6;
    color: #6b7280;
    margin-left: auto;
    /* Pycha na prawo */
}

button[name="update_cart"]:hover {
    background: #e5e7eb;
    color: #374151;
}

/* 4. STYLIZACJA KARTY "PODSUMOWANIE" (PRAWA) */
.cart-collaterals .cart_totals {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    /* Taki sam cień jak tabela */
    border: 1px solid #f3f4f6;
    width: 100%;
}

.cart_totals h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #2C3E50;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 1rem;
}

.cart_totals table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.cart_totals table th {
    text-align: left;
    padding: 1rem 0;
    color: #6b7280;
    font-weight: 500;
}

.cart_totals table td {
    text-align: right;
    padding: 1rem 0;
    color: #2C3E50;
    font-weight: 700;
}

.cart_totals table tr.order-total th,
.cart_totals table tr.order-total td {
    border-top: 2px solid #f3f4f6;
    padding-top: 1.5rem;
    font-size: 1.2rem;
    color: #2C3E50;
}

.cart_totals table tr.order-total td strong {
    color: #27ae60;
    /* Zielony */
}

/* Przycisk Płatności */
.wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #27ae60;
    color: white;
    padding: 15px;
    border-radius: 99px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.2);
}

.wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #219150;
    transform: translateY(-2px);
    box-shadow: 0 10px 15px rgba(39, 174, 96, 0.3);
}

/* 5. RESPONSIVE (MOBILE) */
@media (max-width: 1023px) {
    .woocommerce {
        flex-direction: column;
    }

    .woocommerce-cart-form,
    .cart-collaterals {
        width: 100%;
        flex: none;
    }

    /* Ukrywanie zbędnych kolumn na mobile */
    .product-price,
    .product-thumbnail {
        display: none;
    }

    /* Kupony na mobile */
    td.actions {
        flex-direction: column;
    }

    .coupon {
        width: 100%;
        justify-content: space-between;
    }

    #coupon_code {
        width: 60%;
    }

    button[name="apply_coupon"] {
        width: 35%;
    }

    button[name="update_cart"] {
        width: 100%;
        margin-left: 0;
    }
}


/* ==========================================================================
   POWIADOMIENIA WOOCOMMERCE (Naprawa układu + Styl)
   ========================================================================== */

/* 1. NAPRAWA UKŁADU (Żeby komunikat był nad kolumnami) */
.woocommerce {
    /* Pozwalamy elementom zawijać się do nowej linii */
    flex-wrap: wrap;
}

.woocommerce-notices-wrapper {
    /* Wymuszamy 100% szerokości dla paska powiadomień */
    width: 100%;
    flex: 0 0 100%;
    margin-bottom: 2rem;
}

/* 2. STYLIZACJA KOMUNIKATU "SUKCES" (Zielony) */
.woocommerce-message {
    background-color: #f0fdf4;
    /* Bardzo jasna zieleń */
    color: #15803d;
    /* Ciemna zieleń tekst */
    border-top: 3px solid #27ae60;
    /* Twój brandowy zielony */
    padding: 1rem 1.5rem;
    border-radius: 8px;
    /* Zaokrąglenie */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Rozsuwa tekst i link "Cofnij" */
    position: relative;
}

/* Ikona "ptaszka" przed komunikatem (opcjonalne, dodaje smaczku) */
.woocommerce-message::before {
    content: '\2713';
    /* Unicode checkmark */
    font-weight: bold;
    margin-right: 10px;
    background-color: #27ae60;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* Link "Cofnij?" */
.woocommerce-message .restore-item {
    color: #15803d;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    transition: opacity 0.2s;
    margin-left: 1rem;
}

.woocommerce-message .restore-item:hover {
    opacity: 0.7;
}

/* 3. STYLIZACJA KOMUNIKATU "BŁĄD" (Czerwony - np. błędny kupon) */
.woocommerce-error {
    list-style: none;
    /* Usuwa kropki listy */
    margin: 0 0 2rem 0;
    padding: 1rem 1.5rem;
    background-color: #fef2f2;
    /* Jasny czerwień */
    color: #b91c1c;
    /* Ciemny czerwień tekst */
    border-top: 3px solid #ef4444;
    /* Czerwony brand */
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.woocommerce-error li {
    display: flex;
    align-items: center;
}

.woocommerce-error li::before {
    content: '!';
    font-weight: bold;
    margin-right: 10px;
    background-color: #ef4444;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

/* 4. STYLIZACJA KOMUNIKATU "INFO" (Niebieski) */
.woocommerce-info {
    background-color: #eff6ff;
    color: #1d4ed8;
    border-top: 3px solid #3b82f6;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    margin-bottom: 2rem;
    display: flex;
    align-items: center;
}

.woocommerce-info::before {
    content: 'i';
    font-weight: bold;
    margin-right: 10px;
    background-color: #3b82f6;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: serif;
    font-style: italic;
}


/* ==========================================================================
   CHECKOUT (PREMIUM LAYOUT)
   ========================================================================== */


/* 1. UKŁAD GŁÓWNY (DESKTOP) */
@media (min-width: 1024px) {

    /* WAŻNE: Celujemy w formularz (form.checkout), a nie w całą stronę */
    form.woocommerce-checkout {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;
        align-items: flex-start;
    }

    /* Lewa kolumna: Formularz Danych */
    #customer_details {
        flex: 1 1 60%;
        width: 60%;
        max-width: 60%;
    }

    /* Prawa kolumna: Zamówienie i Płatność */
    #order_review_heading,
    #order_review {
        flex: 1 1 35%;
        width: 35%;
        max-width: 35%;
    }

    /* Układ elementów */
    #order_review_heading {
        margin-top: 0 !important;
        order: 1;
    }

    #order_review {
        order: 2;
    }

    #customer_details {
        order: 0;
    }
}

/* 2. LEWA STRONA: FORMULARZ DANYCH */
#customer_details {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
}

#customer_details h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    color: #2C3E50;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f3f4f6;
}

/* Pola formularza */
.woocommerce-billing-fields__field-wrapper,
.woocommerce-shipping-fields__field-wrapper,
.woocommerce-additional-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

/* Pełna szerokość dla niektórych pól */
p.form-row-wide,
p#billing_email_field,
p#billing_phone_field,
p.notes {
    grid-column: 1 / -1;
}

p.form-row {
    margin-bottom: 0;
    /* Reset marginesu Woo */
}

/* Etykiety */
.woocommerce form .form-row label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #374151;
    font-size: 0.9rem;
}

/* Inputy */
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 1rem;
    color: #111827;
    background-color: #f9fafb;
    transition: all 0.2s;
}

.woocommerce form .form-row .input-text:focus {
    border-color: #2C3E50;
    background-color: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* Select2 (Wybór kraju) - Nadpisanie stylów wtyczki */
.select2-container .select2-selection--single {
    height: 48px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    background-color: #f9fafb !important;
    display: flex !important;
    align-items: center !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 46px !important;
}

/* 3. PRAWA STRONA: PODSUMOWANIE I PŁATNOŚĆ */
#order_review_heading {
    display: none;
    /* Ukrywamy ten nagłówek, bo dodamy własny wewnątrz karty */
}

#order_review {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 100px;
    /* Przyklejenie podczas przewijania */
}

/* Dodajemy własny nagłówek "Twoje zamówienie" */
#order_review::before {
    content: 'Twoje zamówienie';
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #2C3E50;
    margin-bottom: 1.5rem;
    font-weight: 700;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 1rem;
}

/* Tabela podsumowania */
table.woocommerce-checkout-review-order-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
    padding: 1rem 0;
    border-bottom: 1px solid #f3f4f6;
}

table.woocommerce-checkout-review-order-table th {
    text-align: left;
    color: #6b7280;
    font-weight: 500;
}

table.woocommerce-checkout-review-order-table td {
    text-align: right;
    font-weight: 600;
    color: #2C3E50;
}

/* Produkt w tabeli */
table.woocommerce-checkout-review-order-table .product-name {
    color: #374151;
    font-size: 0.95rem;
}

table.woocommerce-checkout-review-order-table .product-quantity {
    color: #9ca3af;
    font-weight: 400;
}

/* Wiersz ŁĄCZNIE (Total) */
table.woocommerce-checkout-review-order-table tr.order-total th,
table.woocommerce-checkout-review-order-table tr.order-total td {
    border-top: 2px solid #e5e7eb;
    border-bottom: none;
    padding-top: 1.5rem;
    font-size: 1.25rem;
    color: #2C3E50;
}

table.woocommerce-checkout-review-order-table tr.order-total td strong {
    color: #27ae60;
}

/* 4. SEKCJA PŁATNOŚCI */
#payment {
    background: #f9fafb;
    border-radius: 1rem;
    padding: 1.5rem;
}

ul.wc_payment_methods {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    border-bottom: 1px solid #e5e7eb;
}

ul.wc_payment_methods li {
    margin-bottom: 1rem;
}

/* Komunikat o braku metod płatności */
.woocommerce-info {
    border-top-color: #3b82f6;
    background-color: #eff6ff;
    color: #1e40af;
    padding: 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
}

/* Przycisk KUPUJĘ I PŁACĘ */
#place_order {
    display: block;
    width: 100%;
    background-color: #27ae60;
    color: white;
    font-size: 1.1rem;
    font-weight: 700;
    padding: 16px;
    border-radius: 99px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(39, 174, 96, 0.3);
    margin-top: 1rem;
}

#place_order:hover {
    background-color: #16a34a;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(39, 174, 96, 0.4);
}

/* Polityka prywatności */
.woocommerce-privacy-policy-text {
    font-size: 0.85rem;
    color: #6b7280;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* 5. GÓRNY PASEK Z KUPONEM (Toggle) */
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: white;
    border: 1px solid #e5e7eb;
    border-top: 3px solid #2C3E50;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    color: #374151;
    margin-bottom: 2rem;
}

.woocommerce-form-coupon-toggle a {
    color: #2C3E50;
    font-weight: 700;
}

/* Formularz kuponu (jak się rozwinie) */
form.checkout_coupon {
    background: white;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

form.checkout_coupon p {
    margin: 0;
}

form.checkout_coupon .input-text {
    width: 250px;
}

/* 6. RESPONSYWNOŚĆ (MOBILE) */
@media (max-width: 1023px) {
    .woocommerce-checkout {
        flex-direction: column;
    }

    .woocommerce-checkout #customer_details,
    .woocommerce-checkout #order_review {
        width: 100%;
        max-width: 100%;
        flex: none;
    }

    .woocommerce-billing-fields__field-wrapper {
        grid-template-columns: 1fr;
        /* Jedna kolumna na telefonie */
    }
}

/* ==========================================================================
   POPRAWKI CHECKOUT (Kupon + Tabela)
   ========================================================================== */

/* 1. OBNIŻENIE PASKA KUPONU */
.woocommerce-form-coupon-toggle {
    margin-top: 2rem;
    /* Odstęp od góry strony */
    margin-bottom: 2rem;
    /* Odstęp od formularza danych */
    width: 100%;
}

/* Opcjonalnie: ograniczenie szerokości paska kuponu, żeby pasował do lewej kolumny */
@media (min-width: 1024px) {
    .woocommerce-form-coupon-toggle {
        width: 60%;
        /* Taka sama szerokość jak kolumna z danymi */
    }
}

/* 2. WYRÓWNANIE NAGŁÓWKA "KWOTA" DO PRAWEJ */
table.woocommerce-checkout-review-order-table th.product-total {
    text-align: right !important;
    /* Wymuszenie prawej strony */
}

/* Dodatkowe dopieszczenie nagłówków w tej tabeli */
table.woocommerce-checkout-review-order-table th {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9ca3af;
    /* Szary kolor nagłówków */
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 1rem;
}


/* ==========================================================================
   LISTA PRODUKTÓW (Kategorie, Sklep, Podobne) - UNIWERSALNY STYL
   ========================================================================== */

/* 1. TYTUŁ KATEGORII */
.woocommerce .page-title {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: #2C3E50;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #f3f4f6;
    text-align: left;
}

/* 2. GÓRNA BELKA (Licznik + Sortowanie) */
.woocommerce-result-count {
    float: left;
    margin: 0 0 2rem;
    color: #6b7280;
    font-family: 'Inter', sans-serif;
    padding-top: 10px;
}

.woocommerce-ordering {
    float: right;
    margin-bottom: 2rem;
}

.woocommerce-ordering select {
    padding: 10px 30px 10px 15px;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    color: #374151;
    font-size: 0.9rem;
    background-color: white;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    appearance: none;
    /* Ukrywa domyślną strzałkę */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
}

/* 3. SIATKA PRODUKTÓW (GRID) - Działa wszędzie */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    /* Mobile: 1 kolumna */
    gap: 2rem;
    list-style: none;
    padding: 0;
    margin: 0 0 4rem 0;
    clear: both;
    /* Żeby nie wchodziło na sortowanie */
}

@media (min-width: 640px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        /* Tablet: 2 kolumny */
    }
}

@media (min-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(4, 1fr);
        /* Desktop: 4 kolumny */
    }
}

/* 4. POJEDYNCZA KARTA PRODUKTU */
.woocommerce ul.products li.product {
    background: #ffffff;
    border-radius: 1rem;
    padding: 1.5rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    position: relative;
    text-align: left;
    margin-bottom: 0 !important;
    /* Reset domyślnych marginesów Woo */
    width: 100%;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    border-color: #e5e7eb;
}

/* 5. ZDJĘCIE */
.woocommerce ul.products li.product a.woocommerce-loop-product__link {
    text-decoration: none;
    display: block;
    margin-bottom: 1rem;
}

.woocommerce ul.products li.product img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    margin-bottom: 1rem;
    transition: transform 0.3s;
}

.woocommerce ul.products li.product:hover img {
    transform: scale(1.05);
}

/* 6. BADGE "PROMOCJA" */
.woocommerce ul.products li.product .onsale {
    position: absolute;
    top: 15px;
    right: 15px;
    left: auto;
    margin: 0;
    background-color: #e8363c;
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 99px;
    z-index: 10;
    min-height: auto;
    line-height: normal;
}

/* 7. TYTUŁ PRODUKTU */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: #2C3E50;
    margin-bottom: 0.5rem;
    font-weight: 600;
    line-height: 1.3;
}

/* 8. CENA */
.woocommerce ul.products li.product .price {
    font-family: 'Inter', sans-serif;
    color: #27ae60;
    font-weight: 700;
    font-size: 1.1rem;
    display: block;
    margin-bottom: 1.5rem;
}

.woocommerce ul.products li.product .price del {
    color: #9ca3af;
    font-size: 0.9rem;
    font-weight: 400;
    margin-right: 8px;
    opacity: 0.7;
    display: inline-block;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
    background: transparent;
}

/* 9. PRZYCISK DODAJ DO KOSZYKA */
.woocommerce ul.products li.product .button {
    margin-top: auto;
    width: 100%;
    text-align: center;
    background-color: #f3f4f6;
    color: #2C3E50;
    font-weight: 600;
    padding: 12px;
    border-radius: 99px;
    transition: all 0.2s;
    text-decoration: none;
    display: inline-block;
}

.woocommerce ul.products li.product .button:hover {
    background-color: #2C3E50;
    color: white;
}

/* 10. GWIAZDKI */
.woocommerce ul.products li.product .star-rating {
    margin: 0 0 0.5rem 0;
    font-size: 0.8rem;
    color: #D4AF37;
}

/* Paginacja (stronicowanie na dole) */
.woocommerce-pagination {
    text-align: center;
    margin-top: 2rem;
}

.woocommerce-pagination ul {
    display: inline-flex;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style: none;
}

.woocommerce-pagination ul li {
    border-right: 1px solid #e5e7eb;
}

.woocommerce-pagination ul li:last-child {
    border-right: none;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: #374151;
}

.woocommerce-pagination ul li span.current {
    background-color: #2C3E50;
    color: white;
}

/* ==========================================================================
   BLOG POST (TYPOGRAFIA PREMIUM)
   ========================================================================== */

/* 1. GŁÓWNY TEKST */
.prose-content {
    font-family: 'Inter', sans-serif;
    color: #4b5563;
    /* Ciemny szary, nie czarny (lżejszy dla oka) */
    font-size: 1.125rem;
    /* 18px - idealne do czytania */
    line-height: 1.8;
    /* Duży odstęp między liniami */
    max-width: 65ch;
    /* Optymalna długość linii (65 znaków) */
    margin: 0 auto;
    /* Wyśrodkowanie tekstu */
}

/* Odstępy między akapitami */
.prose-content p {
    margin-bottom: 2rem;
}

/* 2. NAGŁÓWKI W TEKŚCIE (H2, H3...) */
.prose-content h2,
.prose-content h3,
.prose-content h4 {
    font-family: 'Playfair Display', serif;
    color: #2C3E50;
    font-weight: 700;
    margin-top: 3.5rem;
    /* Duży odstęp od góry */
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.prose-content h2 {
    font-size: 2.25rem;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 1rem;
}

.prose-content h3 {
    font-size: 1.75rem;
}

.prose-content h4 {
    font-size: 1.5rem;
}

/* 3. CYTATY (BLOCKQUOTE) */
.prose-content blockquote {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-style: italic;
    color: #2C3E50;
    border-left: 4px solid #e8363c;
    /* Czerwony akcent */
    margin: 3rem 0;
    padding: 1rem 0 1rem 2rem;
    background: #f9f9f9;
}

/* 4. LISTY */
.prose-content ul,
.prose-content ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.prose-content ul li {
    list-style-type: disc;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    marker: #e8363c;
    /* Kolor kropki */
}

.prose-content ol li {
    list-style-type: decimal;
    margin-bottom: 0.5rem;
    padding-left: 0.5rem;
    color: #2C3E50;
    font-weight: 600;
}

.prose-content ol li span {
    /* Reset wagi dla tekstu */
    font-weight: 400;
    color: #4b5563;
}

/* 5. LINKI W TEKŚCIE */
.prose-content a {
    color: #2C3E50;
    text-decoration: underline;
    text-decoration-color: #e8363c;
    text-decoration-thickness: 2px;
    font-weight: 600;
    transition: all 0.2s;
}

.prose-content a:hover {
    color: #e8363c;
    background-color: #fff1f2;
}

/* 6. ZDJĘCIA W TREŚCI */
.prose-content img {
    border-radius: 1rem;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
    margin: 3rem auto;
    width: 100%;
    height: auto;
}

.prose-content figcaption {
    text-align: center;
    font-size: 0.875rem;
    color: #9ca3af;
    margin-top: -2rem;
    margin-bottom: 3rem;
    font-style: italic;
}

/* 7. DROP CAP (Pierwsza litera duża - opcjonalne, efekt wow) */
.prose-content>p:first-of-type::first-letter {
    float: left;
    font-size: 4rem;
    line-height: 0.8;
    font-weight: 700;
    font-family: 'Playfair Display', serif;
    color: #2C3E50;
    margin-right: 1rem;
    margin-top: 0.2rem;
}

/* ==========================================================================
   STYLIZACJA SIDEBARA I WIDŻETÓW
   ========================================================================== */

/* 1. OGÓLNE PUDEŁKO WIDŻETU */
.widget {
    /* Style są już w functions.php (klasy Tailwind), tu doprecyzowanie */
    word-wrap: break-word;
}

/* 2. LISTY (np. Kategorie, Ostatnie wpisy) */
.widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.widget ul li {
    padding: 10px 0;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.widget ul li a {
    text-decoration: none;
    color: #4b5563;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: color 0.2s;
}

.widget ul li a:hover {
    color: #e8363c;
    /* Czerwony akcent */
    padding-left: 5px;
    /* Lekki ruch w prawo */
}

/* 3. WIDŻET WYSZUKIWARKI */
.wp-block-search__button-outside,
.wp-block-search__button-inside {
    margin-bottom: 0;
}

.wp-block-search__input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    background: #f9fafb;
}

.wp-block-search__button {
    background-color: #2C3E50;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    width: 100%;
    /* Przycisk na całą szerokość */
}

.wp-block-search__button:hover {
    background-color: #1f2937;
}

/* 4. WIDŻET "PRODUKTY" (Jeśli dodasz listę produktów do sidebara) */
.product_list_widget li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.product_list_widget li img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 0;
    /* Reset */
}

.product_list_widget li a {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1rem;
    color: #2C3E50;
    display: block;
}

.product_list_widget li .amount {
    color: #27ae60;
    font-weight: 700;
    font-size: 0.9rem;
}

/* 5. TAG CLOUD (Chmura tagów) */
.tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tagcloud a {
    background: #f3f4f6;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem !important;
    /* Wymuszamy mały rozmiar */
    color: #4b5563;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.tagcloud a:hover {
    background: #2C3E50;
    color: white;
}

/* ==========================================================================
   BLOG LIST (STRONA GŁÓWNA BLOGA)
   ========================================================================== */

/* 1. KARTA WPISU */
.blog-card {
    /* Style bazowe są w klasach Tailwind (index.php), 
       tutaj dodajemy specyficzne zachowania */
}

/* Ograniczenie liczby linii w zajawce (line-clamp) */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 2. PAGINACJA (Numery stron 1, 2, 3...) */
.blog-pagination .nav-links {
    display: inline-flex;
    background: white;
    padding: 5px;
    border-radius: 50px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.blog-pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #4b5563;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    font-size: 0.9rem;
    margin: 0 2px;
}

.blog-pagination .page-numbers:hover {
    background-color: #f3f4f6;
    color: #2C3E50;
}

.blog-pagination .page-numbers.current {
    background-color: #2C3E50;
    /* Granat */
    color: white;
    box-shadow: 0 4px 6px rgba(44, 62, 80, 0.2);
}

.blog-pagination .page-numbers.prev,
.blog-pagination .page-numbers.next {
    font-size: 1.2rem;
}
/* =========================================
   LITERKOWNIA - NAPRAWA UKŁADU PRODUKTU
   ========================================= */

/* 1. KONTENER FORMULARZA - WYMUSZENIE PIONU */
form.variations_form {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important; /* Odstęp między sekcjami */
}

/* 2. TABELA WARIANTÓW (RODZAJ) - ROZBIJAMY JĄ */
table.variations {
    display: block !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    border: none !important;
}

table.variations tbody, 
table.variations tr, 
table.variations th, 
table.variations td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Etykieta "Rodzaj" */
table.variations th.label {
    margin-bottom: 8px !important;
    color: #2C3E50;
    font-family: 'Playfair Display', serif;
    font-size: 20px !important;
    font-weight: 700 !important;
    text-transform: none !important; /* Żeby nie było wielkimi literami jeśli nie chcesz */
}

/* Pole wyboru (Select) */
table.variations select {
    width: 100% !important;
    height: 55px !important; /* Wysoki, wygodny */
    padding: 0 15px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    color: #333 !important;
    background-color: #fff !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
    cursor: pointer;
}

table.variations select:focus {
    border-color: #27ae60 !important;
    outline: none !important;
}

/* Link "Wyczyść" */
a.reset_variations {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: #e8363c !important;
    text-decoration: underline;
}

/* 3. OPIS WARIANTU (Ten zielony box z tekstem) */
.single_variation_wrap .woocommerce-variation-description {
    order: 2 !important; /* Wymuszamy, by był DRUGI */
    background: #ecfdf5 !important;
    border: 1px solid #27ae60 !important;
    border-left: 5px solid #27ae60 !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    display: block !important; /* Żeby się na pewno pokazał */
}

.single_variation_wrap .woocommerce-variation-description p {
    margin: 0 !important;
    color: #064e3b !important; /* Ciemna zieleń tekstu */
    font-size: 15px !important;
}

/* Cena wariantu (jeśli się pojawia) */
.single_variation_wrap .woocommerce-variation-price {
    margin-bottom: 15px !important;
    font-size: 22px !important;
    color: #27ae60 !important;
    font-weight: bold !important;
}

/* 4. SEKCYJNY KOSZYK (ILOŚĆ + PRZYCISK) NA DOLE */
.woocommerce-variation-add-to-cart {
    order: 3 !important; /* Wymuszamy, by był TRZECI (na dole) */
    display: flex !important;
    flex-wrap: nowrap !important; /* Zawsze w jednej linii */
    gap: 15px !important;
    align-items: stretch !important;
    margin-top: 0 !important;
}

/* Pole Ilości */
.woocommerce-variation-add-to-cart .quantity {
    width: 90px !important;
    min-width: 90px !important;
    margin: 0 !important;
}

.woocommerce-variation-add-to-cart .quantity input.qty {
    height: 55px !important;
    width: 100% !important;
    border-radius: 50px !important;
    border: 2px solid #e5e7eb !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #2C3E50 !important;
    padding: 0 !important;
}

/* Przycisk "Dodaj do koszyka" */
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    flex-grow: 1 !important; /* Zajmij całe dostępne miejsce */
    height: 55px !important;
    border-radius: 50px !important;
    background-color: #27ae60 !important; /* Twój zielony */
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    transition: background 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
}

.woocommerce-variation-add-to-cart .single_add_to_cart_button:hover {
    background-color: #219150 !important; /* Ciemniejszy po najechaniu */
    transform: translateY(-2px);
}

/* MOBILKI - DOSTOSOWANIE */
@media (max-width: 480px) {
    /* Na bardzo małych ekranach przycisk może być pod ilością, jeśli wolisz, 
       ale ten kod zostawia je w jednej linii, co jest wygodniejsze kciukiem */
    .woocommerce-variation-add-to-cart .quantity {
        width: 70px !important;
        min-width: 70px !important;
    }
}



/* =========================================
   LITERKOWNIA - FIX GŁÓWNEGO KONTENERA
   ========================================= */

@media (max-width: 768px) {
    /* Celujemy w ten konkretny element z klasami, które podałeś */
    .bg-white.rounded-2xl.shadow-xl.p-6.md\:p-12.overflow-hidden {
        padding-left: 10px !important;  /* Zmniejszamy odstęp z lewej do 10px */
        padding-right: 10px !important; /* Zmniejszamy odstęp z prawej do 10px */
        padding-top: 20px !important;
        padding-bottom: 20px !important;
        width: 100% !important;
        border-radius: 0 !important; /* Opcjonalnie: usuwamy zaokrąglenia na mobile, żeby zyskać miejsce */
        overflow: visible !important; /* Pozwalamy treści oddychać */
    }

    /* Dodatkowe zabezpieczenie dla Twojego opisu wewnątrz */
    .literkownia-product {
        width: 100% !important;
        padding: 0 !important; /* Opis już nie dodaje swoich odstępów */
        margin: 0 !important;
    }
}

/* ==========================================================================
   KOSZYK (PREMIUM LAYOUT: DESKTOP + MOBILE FIX)
   ========================================================================== */

/* 1. UKŁAD GŁÓWNY (DESKTOP) */
@media (min-width: 1024px) {
    .woocommerce-cart .woocommerce { 
        display: flex;
        gap: 2rem;
        align-items: flex-start;
        max-width: 100%;
    }

    .woocommerce-cart .woocommerce-cart-form {
        flex: 1 1 65%;
        width: 65%;
    }

    .woocommerce-cart .cart-collaterals {
        flex: 1 1 35%;
        width: 35%;
        margin-top: 0 !important;
    }
}

/* 2. KARTA GŁÓWNA KOSZYKA */
.woocommerce-cart-form {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    margin-bottom: 2rem;
}

/* 3. TABELA PRODUKTÓW (BAZA) */
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
    border: none;
    table-layout: fixed;
}

/* --- KOLUMNY (DESKTOP) --- */
table.shop_table th {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 600;
    padding-bottom: 1.5rem;
    border-bottom: 2px solid #f3f4f6;
    text-align: left;
}

table.shop_table td {
    border-bottom: 1px solid #f3f4f6;
    padding: 1.5rem 0;
    vertical-align: middle;
}

/* Specyficzne kolumny */
.product-remove { width: 40px; text-align: center; }
.product-thumbnail { width: 90px; text-align: center; }
.product-name { width: auto; padding-left: 1rem; }
.product-price, .product-quantity, .product-subtotal { width: 15%; text-align: center; }

/* Wygląd elementów w tabeli */
.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

.product-name a {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2C3E50;
    text-decoration: none;
    line-height: 1.3;
    display: block;
}

.product-remove .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: #ef4444;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
}

/* Input ilości */
.quantity .input-text {
    width: 50px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    color: #2C3E50;
    font-weight: 600;
    margin: 0 auto;
}


/* 4. BELKA AKCJI (KUPONY) - DESKTOP */
td.actions {
    padding-top: 2rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.coupon {
    display: flex;
    gap: 10px;
    flex: 1;
}

#coupon_code {
    flex: 1;
    padding: 12px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    min-width: 150px;
}

button[name="apply_coupon"], 
button[name="update_cart"] {
    padding: 12px 24px;
    border-radius: 99px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    border: 1px solid transparent;
}

button[name="apply_coupon"] {
    background: white;
    border-color: #2C3E50;
    color: #2C3E50;
}

button[name="update_cart"] {
    background: #f3f4f6;
    color: #374151;
    margin-left: auto;
}


/* ==========================================================================
   5. WERSJA MOBILNA (FIX) - TUTAJ DZIEJE SIĘ MAGIA
   ========================================================================== */
@media (max-width: 768px) {
    
    .woocommerce-cart-form {
        padding: 1.5rem; /* Mniejszy padding kontenera */
    }

    /* Reset tabeli - zamiana w blokowe karty */
    table.shop_table, 
    table.shop_table tbody, 
    table.shop_table tr, 
    table.shop_table td {
        display: block;
        width: 100%;
        text-align: left !important; /* Wszystko do lewej */
        padding: 0;
        border: none;
    }

    /* Ukrywamy nagłówki tabeli (Produkt, Cena itd) */
    table.shop_table thead {
        display: none; 
    }

    /* Styl pojedynczego produktu (Karta) */
    table.shop_table tr.cart_item {
        background: white;
        border: 1px solid #f3f4f6;
        border-radius: 12px;
        padding: 1.5rem;
        margin-bottom: 1.5rem;
        position: relative; /* Dla pozycjonowania X */
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02);
    }

    /* Przycisk USUŃ (X) - w prawy górny róg */
    td.product-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        width: auto;
        padding: 0;
        z-index: 10;
    }

    /* Miniaturka */
    td.product-thumbnail {
        width: 100%;
        margin-bottom: 1rem;
        display: flex;
        justify-content: flex-start; /* Do lewej, nie na środek */
    }
    td.product-thumbnail img {
        width: 80px; 
        height: 80px;
        margin: 0; /* Reset marginesu auto */
    }

    /* Nazwa Produktu - Mniejsza czcionka */
    td.product-name {
        width: 100%;
        padding: 0;
        margin-bottom: 0.5rem;
    }
    td.product-name a {
        font-size: 1.2rem; /* Czytelna, ale nie ogromna */
        padding-right: 30px; /* Miejsce na przycisk X */
    }

    /* Cena */
    td.product-price {
        display: none; /* Ukrywamy cenę jednostkową na mobile, zostawiamy sumę */
    }

    /* Ilość i Suma - obok siebie */
    td.product-quantity {
        width: auto;
        display: inline-block;
        margin-right: 1rem;
        margin-bottom: 1rem;
    }
    
    /* Suma (Kwota) */
    td.product-subtotal {
        width: auto;
        display: inline-block;
        font-weight: 700;
        color: #27ae60;
        font-size: 1.1rem;
    }

    /* Input ilości na mobile */
    .quantity .input-text {
        width: 60px;
        height: 40px;
        font-size: 1rem;
        border: 1px solid #d1d5db;
    }

    /* --- NAPRAWA KUPONÓW I PRZYCISKÓW (MOBILE) --- */
    td.actions {
        padding-top: 1rem !important;
        flex-direction: column; /* Jeden pod drugim */
        gap: 1rem;
        border-top: 1px solid #f3f4f6; /* Oddzielenie od produktów */
        margin-top: 1rem;
    }

    .coupon {
        width: 100%;
        flex-direction: column; /* Input nad przyciskiem */
        gap: 10px;
    }

    #coupon_code {
        width: 100% !important; /* Pełna szerokość */
        min-width: 0; /* Reset min-width */
        height: 48px; /* Wygodne pod palec */
    }

    button[name="apply_coupon"] {
        width: 100%; /* Pełna szerokość */
        height: 48px;
        justify-content: center;
    }

    button[name="update_cart"] {
        width: 100%; /* Pełna szerokość */
        margin-left: 0; /* Reset marginesu */
        height: 48px;
        background-color: #2C3E50; /* Ciemniejszy, żeby się wyróżniał */
        color: white;
    }
}


/* 6. STYLIZACJA PODSUMOWANIA (PRAWA KOLUMNA / DÓŁ) */
.cart-collaterals .cart_totals {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    width: 100%;
}

.cart_totals h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #2C3E50;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 1rem;
}

.cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

.cart_totals table th {
    text-align: left;
    padding: 1rem 0;
    color: #6b7280;
    font-weight: 500;
    width: 40%;
    vertical-align: top;
}

.cart_totals table td {
    text-align: right;
    padding: 1rem 0;
    color: #2C3E50;
    font-weight: 600;
}

/* Wiersz ŁĄCZNIE */
.cart_totals table tr.order-total th,
.cart_totals table tr.order-total td {
    border-top: 2px solid #f3f4f6;
    padding-top: 1.5rem;
    font-size: 1.2rem;
    color: #2C3E50;
}
.cart_totals table tr.order-total td strong {
    color: #27ae60;
}

/* Przycisk Płatności */
.wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #27ae60;
    color: white;
    padding: 16px;
    border-radius: 99px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    margin-top: 1rem;
}


/* ==========================================================================
   WYSYŁKA I PŁATNOŚCI (FIX KOŃCOWY)
   ========================================================================== */

/* 1. RESET LIST (Usuwanie kropek raz na zawsze) */
ul#shipping_method,
ul.wc_payment_methods {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

ul#shipping_method li,
ul.wc_payment_methods li {
    list-style-type: none !important;
    margin-left: 0 !important;
}

/* Ukrycie pseudoelementów, jeśli motyw jakieś dodaje */
ul#shipping_method li::before,
ul.wc_payment_methods li::before {
    content: none !important;
    display: none !important;
}

/* 2. STYLIZACJA WYSYŁKI (W tabeli po prawej) */
ul#shipping_method li {
    margin-bottom: 0.8rem;
    display: flex;
    justify-content: flex-end; /* Wyrównanie do prawej (do kwot) */
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    color: #374151;
}

ul#shipping_method input[type="radio"] {
    margin-top: 0;
    accent-color: #2C3E50; /* Kolor kropki */
    cursor: pointer;
}

ul#shipping_method label {
    cursor: pointer;
}



/* ==========================================================================
   FIX BŁĘDÓW CHECKOUT I KUPONÓW (NAPRAWA ROZJEŻDŻANIA SIĘ)
   ========================================================================== */

/* 1. NAPRAWA UKŁADU GŁÓWNEGO (Powiadomienia na 100% szerokości) */
/* To sprawia, że błąd nie jest traktowany jak kolumna, tylko zajmuje cały wiersz */
form.woocommerce-checkout .woocommerce-NoticeGroup,
.woocommerce-notices-wrapper {
    flex: 0 0 100%;
    width: 100%;
    order: -1; /* Wymusza pozycję NA SAMEJ GÓRZE, przed kolumnami */
    margin-bottom: 2rem;
}

/* 2. STYLIZACJA SAMEGO KOMUNIKATU BŁĘDU */
.woocommerce-error {
    background-color: #fef2f2; /* Jasny czerwony */
    border: 1px solid #fee2e2;
    border-top: 3px solid #ef4444; /* Czerwony pasek na górze */
    color: #b91c1c; /* Ciemny czerwony tekst */
    padding: 1.5rem;
    border-radius: 12px; /* Zaokrąglenie jak reszta strony */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    list-style: none !important; /* Usuwamy kropki */
    margin: 0 0 1rem 0 !important;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Usuwamy brzydką ikonkę standardową, jeśli jest */
.woocommerce-error li::before {
    content: none !important; 
}

/* Dodajemy własną ikonkę (wykrzyknik) */
.woocommerce-error li {
    position: relative;
    padding-left: 30px;
    display: flex;
    align-items: center;
}

.woocommerce-error li::after {
    content: '!';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #ef4444;
    color: white;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-weight: bold;
    font-size: 12px;
}

/* 3. NAPRAWA INPUTA KUPONU PRZY BŁĘDZIE */
/* Kiedy kod jest błędny, input dostaje klasę błędu - robimy go czerwonym */
#coupon_code.input-text.has-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
    color: #b91c1c !important;
}

/* Naprawa układu formularza kuponu, gdy pojawi się błąd wewnątrz */
form.checkout_coupon {
    align-items: flex-start !important; /* Żeby błąd nie rozciągał inputa */
}

/* Ukrycie/Stylizacja tekstu błędu pod inputem kuponu (jeśli się pojawia) */
.coupon-error-notice {
    display: block;
    width: 100%;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 5px;
    font-weight: 600;
}

/* ==========================================================================
   KOSZYK - HARD RESET (NAPRAWA UKŁADU)
   ========================================================================== */

/* 1. KONTENER GŁÓWNY */
.woocommerce-cart .woocommerce {
    display: flex;
    flex-wrap: wrap; /* Pozwala zawijać na telefonach */
    gap: 2rem;
    align-items: flex-start;
    max-width: 100%;
}

/* 2. POWIADOMIENIA (Zawsze na górze, cała szerokość) */
.woocommerce-cart .woocommerce-notices-wrapper {
    width: 100%;
    flex: 0 0 100%;
    order: 0; /* Pozycja 0 (najwyżej) */
    margin-bottom: 1rem;
}

/* 3. LEWA KOLUMNA: TABELA PRODUKTÓW */
.woocommerce-cart .woocommerce-cart-form {
    width: 100%; /* Domyślnie (mobile) */
    order: 1; /* Pozycja 1 */
    
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
}

/* 4. PRAWA KOLUMNA: PODSUMOWANIE */
.woocommerce-cart .cart-collaterals {
    width: 100%; /* Domyślnie (mobile) */
    order: 2; /* Pozycja 2 */
    margin-top: 0 !important;
}

.cart-collaterals .cart_totals {
    background: #ffffff;
    padding: 2rem;
    border-radius: 1.5rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border: 1px solid #f3f4f6;
    width: 100%;
}

/* --- UKŁAD DLA KOMPUTERÓW (Powyżej 1024px) --- */
@media (min-width: 1024px) {
    .woocommerce-cart .woocommerce-cart-form {
        width: 60%;      /* Szerokość tabeli */
        flex: 0 0 60%;   /* Sztywna szerokość */
    }

    .woocommerce-cart .cart-collaterals {
        width: 35%;      /* Szerokość podsumowania */
        flex: 0 0 35%;   /* Sztywna szerokość */
        position: sticky;
        top: 120px;      /* Przyklejenie przy przewijaniu */
    }
}

/* ==========================================================================
   STYLIZACJA WNĘTRZA
   ========================================================================== */

/* TABELA */
table.shop_table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    border: none;
}

table.shop_table th {
    text-align: left;
    padding-bottom: 1.5rem;
    color: #9ca3af;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 2px solid #f3f4f6;
}

table.shop_table td {
    padding: 1.5rem 0;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

/* Obrazki i Teksty */
.product-thumbnail img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

.product-name a {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #2C3E50;
    text-decoration: none;
    padding-left: 1rem;
    display: block;
}

/* Usuwanie (X) */
.product-remove .remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #fee2e2;
    color: #ef4444 !important;
    text-decoration: none;
    font-weight: bold;
    margin: 0 auto;
}

/* Input Ilości */
.product-quantity .quantity .input-text {
    width: 50px;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-align: center;
    margin: 0 auto;
}

/* --- BELKA KUPONÓW I PRZYCISKÓW (Poprawiona) --- */
td.actions {
    padding-top: 2rem !important;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

/* Grupa kuponu */
.coupon {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto; /* Elastyczna szerokość */
}

#coupon_code {
    padding: 0 20px;
    border: 1px solid #e5e7eb;
    border-radius: 99px;
    font-size: 0.95rem;
    height: 48px; /* Sztywna wysokość */
    width: auto;
    min-width: 150px;
    flex-grow: 1; /* Rozciągnij input */
}

/* Przyciski */
button[name="apply_coupon"], 
button[name="update_cart"] {
    padding: 0 24px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    height: 48px; /* Sztywna wysokość */
    line-height: 48px;
    white-space: nowrap;
    border: 1px solid transparent;
}

button[name="apply_coupon"] {
    background: white;
    border-color: #2C3E50;
    color: #2C3E50;
}

button[name="update_cart"] {
    background: #f3f4f6;
    color: #374151;
    margin-left: auto; /* Pycha do prawej */
}

/* --- PODSUMOWANIE KOSZYKA (Prawa strona) --- */
.cart_totals h2 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: #2C3E50;
    border-bottom: 2px solid #f3f4f6;
    padding-bottom: 1rem;
}

.cart_totals table th {
    text-align: left;
    padding: 1rem 0;
    color: #6b7280;
    font-weight: 500;
    width: 40%;
}

.cart_totals table td {
    text-align: right;
    padding: 1rem 0;
    color: #2C3E50;
    font-weight: 600;
}

/* Przycisk Płatności */
.wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #27ae60;
    color: white;
    padding: 16px;
    border-radius: 99px;
    font-weight: 600;
    text-decoration: none;
    margin-top: 1rem;
}

/* --- FIX DLA STOPKI --- */
footer, .site-footer {
    width: 100%;
    clear: both;
    position: relative;
    z-index: 10;
}

/* --- WERSJA MOBILNA --- */
@media (max-width: 1023px) {
    /* Resetujemy tabelę do kart */
    table.shop_table thead { display: none; }
    
    table.shop_table tr.cart_item {
        display: block;
        border: 1px solid #f3f4f6;
        margin-bottom: 1rem;
        padding: 1rem;
        border-radius: 12px;
        position: relative;
    }
    
    table.shop_table td {
        display: block;
        text-align: left;
        padding: 0.2rem 0;
        border: none;
    }

    /* Ukrywamy zbędne kolumny */
    .product-price { display: none; }
    
    /* Iks w rogu */
    .product-remove {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 10;
    }
    
    /* Kupony jeden pod drugim */
    .coupon {
        flex-direction: column;
        width: 100%;
    }
    #coupon_code, button[name="apply_coupon"], button[name="update_cart"] {
        width: 100%;
        margin: 0;
    }
}

/* ==========================================================================
   SEKCJA OPINII (REVIEWS TAB)
   ========================================================================== */

/* 1. KONTENER GŁÓWNY */
#reviews {
    margin-top: 2rem;
    font-family: 'Inter', sans-serif;
}

/* 2. NAGŁÓWEK "OPINIE" */
#comments h2.woocommerce-Reviews-title {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #2C3E50;
    margin-bottom: 1rem;
    font-weight: 700;
}

/* Komunikat "Brak opinii" */
.woocommerce-noreviews {
    color: #6b7280;
    font-style: italic;
    margin-bottom: 2rem;
}

/* 3. FORMULARZ DODAWANIA OPINII (KARTA) */
#review_form_wrapper {
    margin-top: 2rem;
}

#review_form {
    background-color: #f9fafb; /* Bardzo jasny szary */
    padding: 2rem;
    border-radius: 1.5rem;
    border: 1px solid #f3f4f6;
}

/* Tytuł "Napisz pierwszą opinię..." */
#reply-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #2C3E50;
    display: block;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

/* Etykiety (Labels) */
.comment-form label {
    display: block;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
    font-size: 0.95rem;
}

/* Wymagane gwiazdki (*) */
.required {
    color: #e8363c;
    text-decoration: none;
}

/* 4. SYSTEM GWIAZDEK (STARS) */
p.stars {
    margin-bottom: 1.5rem;
    display: flex;
    gap: 5px;
}

p.stars span {
    display: flex; /* Układa gwiazdki w rzędzie */
}

p.stars a {
    display: inline-block;
    position: relative;
    width: 1.5em; /* Odstęp między gwiazdkami */
    height: 1.5em;
    text-indent: -999em;
    text-decoration: none;
    color: transparent; /* Ukrywa tekst */
}

/* Ikonka gwiazdki */
p.stars a::before {
    content: '\2605'; /* Unicode gwiazdki */
    position: absolute;
    top: 0;
    left: 0;
    width: 1em;
    height: 1em;
    text-indent: 0;
    font-size: 1.5rem;
    color: #d1d5db; /* Szary (nieaktywny) */
    transition: color 0.2s;
}

/* Kolor złoty po najechaniu lub wybraniu */
p.stars:hover a::before,
p.stars.selected a.active::before,
p.stars.selected a.active ~ a::before,
p.stars.selected a::before {
    color: #D4AF37 !important; /* Złoty */
}

/* Naprawa zachowania hover w WooCommerce (gwiazdki przed kursorem też świecą) */
p.stars a:hover ~ a::before {
    color: #d1d5db !important;
}

/* 5. POLE TEKSTOWE (TEXTAREA) */
.comment-form-comment textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #111827;
    background-color: #ffffff;
    min-height: 120px;
    margin-bottom: 1.5rem;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.comment-form-comment textarea:focus {
    border-color: #2C3E50;
    outline: none;
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

/* 6. PRZYCISK WYŚLIJ */
#review_form .form-submit input[type="submit"] {
    background-color: #2C3E50; /* Granat */
    color: white;
    padding: 12px 36px;
    border-radius: 99px; /* Pigułka */
    font-weight: 600;
    font-size: 1rem;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 10px rgba(44, 62, 80, 0.2);
}

#review_form .form-submit input[type="submit"]:hover {
    background-color: #1f2937;
    transform: translateY(-2px);
    box-shadow: 0 8px 15px rgba(44, 62, 80, 0.3);
}

/* Ukrycie brzydkiego selecta, który czasem się pojawia w Woo */
#rating {
    display: none;
}

/* ==========================================================================
   BŁĘDY WALIDACJI PÓL (INLINE)
   ========================================================================== */

.checkout-inline-error-message {
    display: block;
    color: #ef4444 !important; /* Twój czerwony */
    font-size: 0.8rem !important; /* Mniejszy tekst */
    font-weight: 600;
    margin-top: 6px;
    margin-bottom: 0;
    line-height: 1.2;
}

/* Opcjonalnie: Czerwona ramka dla pola z błędem */
.woocommerce-invalid .input-text {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}