/*
Theme Name: Net-klik
Theme URI: http://net-klik.pl
Author: Antigravity
Author URI: http://net-klik.pl
Description: Ekskluzywny, minimalistyczny motyw WooCommerce 'Net-klik' w stylu Apple.
Version: 1.2
Text Domain: net-klik
*/

body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* 
 * BESTSELLERS CAROUSEL (Mobile) 
 * Forces WooCommerce unordered list to behave as a horizontal scrollable strip 
*/
.bestsellers-carousel ul.products {
    display: flex !important;
    /* Force flex over grid */
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 1rem;
    padding-bottom: 2rem;
    /* Space for shadow/scroll */
}

.bestsellers-carousel ul.products::-webkit-scrollbar {
    display: none;
}

.bestsellers-carousel ul.products li.product {
    flex: 0 0 75vw;
    /* 75% width on mobile */
    scroll-snap-align: center;
    float: none;
    width: 75vw;
    margin: 0;
    text-align: center;
}

/* Desktop: Restore Grid for Carousel */
@media (min-width: 768px) {
    .bestsellers-carousel ul.products {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr);
        /* 3 columns as asked */
        gap: 2rem;
        flex-wrap: wrap !important;
        overflow-x: visible;
    }

    .bestsellers-carousel ul.products li.product {
        flex: auto;
        width: auto;
    }
}

/* Minimalist Product Styling inside Carousel */
.bestsellers-carousel ul.products li.product img {
    border-radius: 1.5rem;
    margin-bottom: 1.5rem;
    transition: transform 0.5s ease;
    mix-blend-mode: multiply;
    width: 100%;
}

.bestsellers-carousel ul.products li.product:hover img {
    transform: scale(1.03);
}

.bestsellers-carousel ul.products li.product .woocommerce-loop-product__title {
    font-size: 1rem;
    font-weight: 500;
    color: #1d1d1f;
    padding: 0;
}

.bestsellers-carousel ul.products li.product .price {
    font-size: 0.875rem;
    color: #6e6e73;
    font-weight: 600;
}


/* ZALANDO CUSTOM LOOP STYLES */
/* 1. Siatka 5 kolumn Desktop / 2 Mobile */
.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px !important;
    list-style: none !important;
    padding: 0 !important;
}

@media (max-width: 768px) {
    .products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* 2. Obraz 1:1 i dopasowanie */
.card-img-container {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background: #f2f2f2;
    position: relative !important;
    /* Added for badge positioning */
}

.card-img-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Wypełnia kafel bez zniekształceń */
}

/* 3. Tekst bezpośrednio pod zdjęciem */
.custom-zalando-card a {
    text-decoration: none !important;
    color: black !important;
}

.card-text-container {
    padding: 5px 0 !important;
}

.card-title {
    font-size: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
}

.card-price {
    font-weight: bold !important;
    font-size: 14px !important;
    margin-top: 2px !important;
}


/* -------------------------------------------------------------
 * ZALANDO CLEAN GRID ARCHITECTURE
 * ------------------------------------------------------------- */

/* 1. GRID LAYOUT SYSTEM */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    /* DESKTOP: 5 COLUMNS */
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
}

@media (max-width: 1024px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
        /* TABLET: 3 COLUMNS */
    }
}

@media (max-width: 768px) {

    .woocommerce ul.products,
    .woocommerce-page ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        /* MOBILE: 2 COLUMNS */
        gap: 12px !important;
    }
}

/* 2. RESET LIST ITEM STYLES */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    background: transparent !important;
}

/* 3. ENSURE NO GHOST SPACING */
.woocommerce ul.products li.product img {
    margin: 0 !important;
    display: block !important;
}


/* SALE BADGE STYLES - WHITE & BLACK */
.sale-badge {
    /* RESET KOLORÓW */
    background-color: #ffffff !important;
    color: #000000 !important;

    /* RAMKA I ZAOKRĄGLENIE */
    border: 1px solid #000000 !important;
    border-radius: 6px !important;
    /* Lekkie zaokrąglenie */

    /* POZYCJA I ROZMIAR */
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    padding: 2px 10px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    z-index: 99 !important;
    box-shadow: none !important;
}

/* PRICE STYLING (Desktop Default) */
.card-price {
    margin-top: 4px !important;
    display: flex !important;
    flex-direction: row !important;
    /* Na desktopie obok siebie */
    align-items: baseline !important;
    gap: 8px !important;
}

/* Stara cena (Regularna) */
.card-price del,
.card-price del .woocommerce-Price-amount {
    color: #999999 !important;
    /* Lekko wyszarzona */
    text-decoration: line-through !important;
    /* Przekreślona */
    font-size: 0.9em !important;
    font-weight: normal !important;
}

/* Nowa cena (Promocyjna) */
.card-price ins,
.card-price ins .woocommerce-Price-amount {
    color: #000000 !important;
    text-decoration: none !important;
    font-weight: bold !important;
}

/* RESPONSIVE OVERRIDES */
@media (max-width: 768px) {

    /* Mobile Badge */
    .sale-badge {
        top: 6px !important;
        left: 6px !important;
        padding: 1px 6px !important;
        font-size: 8px !important;
        border-radius: 4px !important;
    }

    /* Mobile Price Stacking */
    .card-price {
        flex-direction: column !important;
        gap: 0px !important;
        align-items: flex-start !important;
    }
}

/* SWIPER NAVIGATION ARROWS (Gray/Minimalist) */
.swiper-button-next,
.swiper-button-prev {
    color: #333333 !important;
    /* Ciemnoszary grot */
    background-color: #f2f2f2 !important;
    /* Bardzo jasny szary podkład */
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    border: 1px solid #e0e0e0 !important;
    transition: all 0.3s ease !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 16px !important;
    font-weight: bold !important;
}

/* Hover Effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background-color: #e0e0e0 !important;
    color: #000000 !important;
    border-color: #cccccc !important;
}

/* Positioning */
.swiper-button-next {
    right: -10px !important;
}

.swiper-button-prev {
    left: -10px !important;
}

/* Hide on Mobile */
@media (max-width: 1023px) {

    .swiper-button-next,
    .swiper-button-prev {
        display: none !important;
    }
}

/* NEWSLETTER SECTION (Zalando Style) */
.newsletter-section {
    padding: 60px 20px !important;
    background-color: #f2f2f2 !important;
    text-align: center !important;
    margin-top: 50px !important;
    /* Separation from previous section */
}

.newsletter-title {
    font-size: 24px !important;
    font-weight: bold !important;
    letter-spacing: 2px !important;
    margin-bottom: 10px !important;
    text-transform: uppercase !important;
    color: #1d1d1f !important;
}

.newsletter-form {
    display: flex !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
}

.newsletter-input {
    padding: 12px 20px !important;
    width: 300px !important;
    max-width: 400px !important;
    border: 1px solid #cccccc !important;
    /* Lighter border */
    border-radius: 4px !important;
    /* Matches button */
    outline: none !important;
    background: #fff !important;
    color: #000 !important;
}

.newsletter-input::placeholder {
    color: #999 !important;
}

.newsletter-submit {
    background-color: #2c2c2c !important;
    /* Graphite */
    color: #ffffff !important;
    border: none !important;
    padding: 15px 40px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
    font-size: 14px !important;
}

.newsletter-submit:hover {
    background-color: #444444 !important;
    /* Lighter graphite */
}

/* Responsywność Mobile */
@media (max-width: 768px) {
    .newsletter-form {
        flex-direction: column !important;
        align-items: center !important;
    }

    .newsletter-input {
        width: 100% !important;
        max-width: 300px !important;
    }

    .newsletter-submit {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* MY ACCOUNT REDESIGN (Global Forms & Addresses) */

/* 1. Form Fields (Premium Style) */
.woocommerce-MyAccount-content input.input-text,
.woocommerce-MyAccount-content select,
.woocommerce-MyAccount-content textarea {
    border: 1px solid #ddd !important;
    padding: 12px 15px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    width: 100% !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.woocommerce-MyAccount-content input.input-text:focus,
.woocommerce-MyAccount-content select:focus,
.woocommerce-MyAccount-content textarea:focus {
    border-color: #000000 !important;
    outline: none !important;
}

.woocommerce-MyAccount-content label {
    display: block !important;
    margin-bottom: 5px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    color: #333 !important;
    margin-top: 15px !important;
}

/* 2. Buttons (Graphite Style) */
.woocommerce-MyAccount-content button.button,
.woocommerce-MyAccount-content input.button {
    background-color: #2c2c2c !important;
    color: #fff !important;
    padding: 15px 30px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    border: none !important;
    transition: 0.3s !important;
    font-size: 14px !important;
    margin-top: 20px !important;
}

.woocommerce-MyAccount-content button.button:hover,
.woocommerce-MyAccount-content input.button:hover {
    background-color: #444 !important;
}

/* Mobile Button Width Override */
@media (max-width: 768px) {

    .woocommerce-MyAccount-content button.button,
    .woocommerce-MyAccount-content input.button {
        width: 100% !important;
        display: block !important;
    }
}

/* 3. Address Section (Cards) */
.woocommerce-Address {
    margin-bottom: 30px !important;
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.woocommerce-Address-title h3 {
    font-size: 18px !important;
    text-transform: uppercase !important;
    border-bottom: 1px solid #ddd !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
}

/* Edit Address Link/Button Styling */
.woocommerce-Address .edit {
    display: inline-block;
    margin-top: 10px;
    color: #2c2c2c !important;
    font-weight: 600;
    text-decoration: underline;
    text-transform: uppercase;
    font-size: 12px;
}

/* 4. Account Details Separation */
.woocommerce-EditAccountForm fieldset {
    margin-top: 40px !important;
    border-top: 1px solid #eee !important;
    padding-top: 30px !important;
}

.woocommerce-EditAccountForm fieldset legend {
    font-size: 18px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    color: #1d1d1f !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px !important;
}


/* DESKTOP POLISH (My Account) */
@media (min-width: 769px) {

    /* Kontener treści */
    .woocommerce-MyAccount-content {
        padding-left: 40px !important;
        max-width: 900px !important;
    }

    /* Grupowanie pól w rzędzie */
    .woocommerce-form-row--first,
    .woocommerce-form-row--last {
        float: none !important;
        width: 100% !important;
    }

    /* Nowoczesny Grid dla formularza */
    .woocommerce-EditAccountForm,
    .woocommerce-address-fields__field-wrapper {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px 25px !important;
    }

    /* Pola zajmujące całą szerokość (np. e-mail, ulica, current password) */
    .form-row-wide,
    #account_email_field,
    #password_current_field,
    #password_1_field,
    #password_2_field,
    #order_comments_field {
        grid-column: span 2 !important;
    }

    /* Karty adresowe Side-by-Side */
    .u-columns.col2-set {
        display: flex !important;
        gap: 30px !important;
    }

    .u-column1,
    .u-column2 {
        flex: 1 !important;
        background: #fff !important;
        border: 1px solid #f0f0f0 !important;
        padding: 25px !important;
        border-radius: 8px !important;
        transition: box-shadow 0.3s ease !important;
    }

    .u-column1:hover,
    .u-column2:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    }

    /* Przycisk na desktopie - auto width */
    .woocommerce-MyAccount-content button.button {
        width: auto !important;
        min-width: 200px !important;
    }
}

/* 1. UNIFIKACJA OBU PRZYCISKÓW (Koszyk i Zamówienie) */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-checkout #place_order,
.wc-block-components-checkout-place-order-button {
    /* Odbudowa po unset */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    padding: 18px 20px !important;

    /* Kolory - Jasny Antracyt */
    background-color: #444444 !important;
    background-image: none !important;
    color: #ffffff !important;

    /* Obramowanie i Kształt */
    border: 2px solid #444444 !important;
    /* Ramka w kolorze tła zapobiega przesunięciom */
    border-radius: 4px !important;

    /* Tekst */
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    text-decoration: none !important;

    /* Czyszczenie śmieci z motywu */
    box-shadow: none !important;
    text-shadow: none !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

/* 2. HOVER - IDEALNIE JEDNOLITY CIEMNY GRAFIT */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-checkout #place_order:hover,
.wc-block-components-checkout-place-order-button:hover {
    background-color: #222222 !important;
    /* Ciemny grafit */
    background-image: none !important;
    border-color: #222222 !important;
    /* Ramka zmienia się RAZEM z tłem */
    color: #ffffff !important;
    box-shadow: none !important;
}

/* 3. USUNIĘCIE "DRUGIEGO KOLORU" (Pseudo-elementy) */
.checkout-button::before,
.checkout-button::after,
#place_order::before,
#place_order::after {
    display: none !important;
    content: none !important;
}

/* BLOK KOSZYKA - Stylizacja Przycisku */
/* 1. STYL BAZOWY PRZYCISKU (Jasny Antracyt) */
.wc-block-cart__submit-container a.wc-block-cart__submit-button {
    background-color: #444444 !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 20px !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

/* 2. STYL TEKSTU WEWNĄTRZ (Biały) */
.wc-block-cart__submit-container a.wc-block-cart__submit-button .wc-block-components-button__text {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 16px !important;
}

/* 3. AKCJA NA HOVER (Ciemny Grafit) */
.wc-block-cart__submit-container a.wc-block-cart__submit-button:hover {
    background-color: #222222 !important;
    /* Cały przycisk ciemnieje */
    background-image: none !important;
}

/* Wymuszenie koloru tekstu na hover, żeby nie zniknął */
.wc-block-cart__submit-container a.wc-block-cart__submit-button:hover .wc-block-components-button__text {
    color: #ffffff !important;
}

/* 4. DOPRACOWANIE PODSUMOWANIA (Styl Premium) */
.wc-block-cart__totals-title {
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 20px !important;
    margin-bottom: 20px !important;
}

.wc-block-components-totals-footer-item-tax-value {
    font-weight: 700 !important;
    color: #000 !important;
}

/* BLOK CHECKOUT - Stylizacja Przycisku "Kupuję i płacę" */
/* 1. WYŚRODKOWANIE CAŁEGO PRZYCISKU */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button {
    background-color: #444444 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 18px 20px !important;
    min-height: 60px !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    /* Środek w poziomie */
    align-items: center !important;
    /* Środek w pionie */
    transition: background-color 0.3s ease-in-out !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

/* 2. WYŚRODKOWANIE WEWNĘTRZNEGO KONTENERA TEKSTU */
.wc-block-components-button__text,
.wc-block-components-checkout-place-order-button__text {
    display: flex !important;
    flex-direction: row !important;
    /* Tekst i cena w jednej linii */
    justify-content: center !important;
    /* Kluczowe wyśrodkowanie */
    align-items: center !important;
    width: 100% !important;
    gap: 5px !important;
    /* Odstęp między tekstem, kropką a ceną */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 16px !important;
}

/* 3. USUNIĘCIE EWENTUALNYCH MARGINESÓW WEWNĘTRZNYCH */
.wc-block-components-checkout-place-order-button__price,
.wc-block-components-checkout-place-order-button__separator {
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
}

/* 4. DOPASOWANIE KROPKI (SEPARATORA) */
.wc-block-components-checkout-place-order-button__separator::after {
    content: "•" !important;
    /* Elegancka kropka */
    margin: 0 8px !important;
    opacity: 0.7;
    color: #ffffff !important;
}

/* 5. AKCJA NA HOVER (Ciemny Grafit) */
.wc-block-checkout__actions .wc-block-components-checkout-place-order-button:hover {
    background-color: #222222 !important;
    /* Identyczne ściemnienie jak w koszyku */
    background-image: none !important;
}

/* 6. DODATKOWE POPRAWKI DLA CZYSTOŚCI BLOKU */
.wc-block-checkout__actions {
    margin-top: 30px !important;
}

/* Link "Wróć do koszyka" - styl dyskretny */
.wc-block-components-checkout-return-to-cart-button {
    color: #666 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.wc-block-components-checkout-return-to-cart-button:hover {
    color: #000 !important;
}

/* TŁO STRONY PODZIĘKOWANIA (Dla kontrastu karty) */
body.woocommerce-order-received {
    background-color: #f9f9f9 !important;
}

/* KONTENER GŁÓWNY - Luksusowy Certyfikat */
.wc-block-order-confirmation {
    background: #ffffff !important;
    max-width: 650px !important;
    margin: 80px auto !important;
    padding: 50px !important;
    border-radius: 2px !important;
    /* Ostre, nowoczesne rogi */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05) !important;
    text-align: center !important;
    border: none !important;
    /* Reset obramowania */
}

/* NAGŁÓWEK */
.wc-block-order-confirmation-status__title {
    font-family: serif !important;
    /* Elegancja */
    font-size: 34px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    margin-bottom: 10px !important;
    /* Ikona sukcesu jako znak specjalny w CSS, opcjonalnie */
}

.wc-block-order-confirmation-status__title::before {
    content: "✓";
    display: block;
    font-size: 40px;
    color: #444444;
    /* Dyskretny kolor ikony */
    margin-bottom: 10px;
    font-family: sans-serif;
    font-weight: 300;
}

/* PODSUMOWANIE (DANE ZAMÓWIENIA) */
.wc-block-order-confirmation-summary {
    display: flex !important;
    justify-content: space-around !important;
    border-top: 1px solid #000 !important;
    border-bottom: 1px solid #000 !important;
    padding: 25px 0 !important;
    margin: 40px 0 !important;
    list-style: none !important;
    grid-template-columns: unset !important;
    /* Reset grida */
    gap: unset !important;
}

.wc-block-order-confirmation-summary__item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    border: none !important;
    /* Reset borderów */
}

.wc-block-order-confirmation-summary__title {
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    color: #999 !important;
    margin-bottom: 8px !important;
}

.wc-block-order-confirmation-summary__value {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000 !important;
    margin: 0 !important;
}

/* LISTA PRODUKTÓW (MINIMALIZM) */
.wc-block-order-confirmation-details__table {
    width: 100% !important;
    margin-bottom: 30px !important;
    border-collapse: collapse !important;
}

.wc-block-order-confirmation-details__table td {
    padding: 15px 0 !important;
    border-bottom: 1px dotted #ccc !important;
    text-align: left !important;
}

.wc-block-order-confirmation-details__table th {
    display: none !important;
    /* Usuwamy zbędne nagłówki tabeli */
}

/* TOTAL - GŁÓWNA KWOTA */
.wc-block-order-confirmation-details__total {
    font-size: 22px !important;
    font-weight: 800 !important;
    padding-top: 20px !important;
    color: #000 !important;
    text-align: right !important;
}

/* PRZYCISK POWROTU */
.wc-block-order-confirmation .wp-block-button__link {
    background: #444444 !important;
    border-radius: 0 !important;
    padding: 20px 50px !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-top: 30px !important;
}

/* MOBILE FIX */
@media (max-width: 768px) {
    .wc-block-order-confirmation {
        padding: 30px 20px !important;
        margin: 20px auto !important;
        width: 90% !important;
    }

    .wc-block-order-confirmation-summary {
        flex-direction: column !important;
        gap: 20px !important;
    }
}

/* WYMUSZENIE WIDOCZNOŚCI IKONY FITNESS NA MOBILE (PHOSPHOR STYLE + ALIGNMENT FIX) */
@media (max-width: 991px) {

    /* 1. CAŁKOWITY RESET I WSTRZYKNIĘCIE IKONY SVG (STYL PHOSPHOR) */
    .mobile-menu li[class*="fitness"] a::before,
    .mobile-nav li[class*="fitness"] a::before,
    .mobile-menu li a[href*="fitness"]::before,
    .mobile-menu li a[href*="sport"]::before {
        content: "" !important;
        /* Czyścimy */
        width: 18px !important;
        height: 18px !important;
        display: inline-block !important;
        margin-right: 8px !important;
        /* Strict 8px match for mr-2 */
        /* Ikona Phosphor Dumbbell (Outline/Regular style to match theme) */
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Crect width='256' height='256' fill='none'/%3E%3Cline x1='84' y1='84' x2='172' y2='172' fill='none' stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M106.88,57.57l27.1,27.1a16,16,0,0,1,0,22.63L114.54,126.74a16,16,0,0,1-22.62,0L64.81,99.62a16,16,0,0,1,0-22.63l19.44-19.42A16,16,0,0,1,106.88,57.57Z' fill='none' stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cpath d='M191.19,141.88l19.44,19.44a16,16,0,0,1,0,22.63L183.51,211a16,16,0,0,1-22.62,0l-27.12-27.12a16,16,0,0,1,0-22.63l19.44-19.44a16,16,0,0,1,22.63,0Z' fill='none' stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='125.13' y1='48.71' x2='48.71' y2='125.13' fill='none' stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3Cline x1='207.29' y1='130.87' x2='130.87' y2='207.29' fill='none' stroke='%234B5563' stroke-linecap='round' stroke-linejoin='round' stroke-width='16'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: contain !important;
        vertical-align: middle !important;
        flex-shrink: 0 !important;
        /* Slight vertical adjustment */
        position: relative !important;
        top: -1px !important;
    }

    /* 2. Wyśrodkowanie napisu względem nowej ikony */
    .mobile-menu li[class*="fitness"] a,
    .mobile-menu li a[href*="fitness"],
    .mobile-menu li a[href*="sport"] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        line-height: 1.2 !important;
        /* Standard line-height to fix alignment */
    }

    /* 3. Ukrycie ewentualnych uszkodzonych obrazków ORAZ zduplikowanej ikony z PHP */
    .mobile-menu li[class*="fitness"] a .menu-image,
    .mobile-menu li[class*="fitness"] a img,
    .mobile-menu li[class*="fitness"] a i,
    .mobile-menu li a[href*="fitness"] i,
    .mobile-menu li a[href*="sport"] i {
        display: none !important;
    }
}

/* STYLIZACJA KOLUMNY SOCIAL MEDIA W STOPCE */
.footer-social-column h4 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.footer-social-column ul {
    list-style: none;
    padding: 0;
}

.footer-social-column ul li {
    margin-bottom: 10px;
}

.footer-social-column ul li a {
    color: #666;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}


/* RESPONSIVE MY ORDERS TABLE (Mobile Card Layout) */
@media (max-width: 768px) {
    .woocommerce-account .woocommerce-orders-table {
        display: block !important;
        border: none !important;
    }

    .woocommerce-account .woocommerce-orders-table thead {
        display: none !important;
        /* Hide standard headers */
    }

    .woocommerce-account .woocommerce-orders-table tbody {
        display: block !important;
    }

    /* Each Row becomes a Card */
    .woocommerce-account .woocommerce-orders-table tr {
        display: block !important;
        background: #fff !important;
        border: 1px solid #eee !important;
        border-radius: 8px !important;
        margin-bottom: 20px !important;
        padding: 20px !important;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02) !important;
        position: relative !important;
    }

    /* Cells */
    .woocommerce-account .woocommerce-orders-table td {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        text-align: right !important;
        border: none !important;
        padding: 8px 0 !important;
        font-size: 14px !important;
    }

    /* Pseudo-labels using data-title from WooCommerce */
    .woocommerce-account .woocommerce-orders-table td::before {
        content: attr(data-title) !important;
        font-weight: 700 !important;
        color: #666 !important;
        text-transform: uppercase !important;
        font-size: 11px !important;
        float: left !important;
        text-align: left !important;
        margin-right: 10px !important;
    }

    /* Special styling for "Status" */
    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-status {
        color: #222 !important;
        font-weight: 600 !important;
    }

    /* Make the Button Full Width at the bottom */
    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions {
        display: block !important;
        margin-top: 15px !important;
        padding-top: 15px !important;
        border-top: 1px dashed #eee !important;
        text-align: center !important;
        width: 100% !important;
    }

    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions::before {
        display: none !important;
        /* Hide label for actions row */
    }

    .woocommerce-account .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions .button {
        display: block !important;
        width: 100% !important;
        background: #1d1d1f !important;
        color: #fff !important;
        text-align: center !important;
        padding: 12px !important;
        border-radius: 6px !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        font-weight: 700 !important;
    }
}