/*
Theme Name:   Storefront Child
Theme URI:    https://woocommerce.com/storefront/
Description:  Child theme dla Storefront – uproszczony i zoptymalizowany
Author:       kaszkietersi.pl
Template:     storefront
Version:      1.3.0
Text Domain:  storefront-child
*/

/* =====================================================
   ZMIENNE GLOBALNE
   ===================================================== */
:root {
    /* Kolory */
    --dark: #35332F;
    --light: #E5E4E2;
    --accent-bg: #575d51;
    --accent-red: #ff5757;
    --accent-red-dark: #e04e4e;
    --accent-red-light: #ff9a9a;
    --accent-green: #3d9c72;

    /* Typografia */
    --font-body: "Baskerville", Georgia, serif;
    --font-heading: "Playfair Display", Georgia, serif;
    --font-menu: "Lato", -apple-system, BlinkMacSystemFont, sans-serif;
    --wp--preset--font-size--normal: 1.25rem;
    --line-height: 1.618;

    /* Layout */
    --border-radius: 3px;
    --btn-padding: 10px 20px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

    /* WooCommerce Blocks */
    --wc-components-color-input-background: var(--light);
    --wc-components-color-text: var(--dark);
    --wc-components-color-border: var(--dark);
    --wc-components-color-background: var(--light);
    --wc-components-color-foreground: var(--dark);
}

/* =====================================================
   PODSTAWA
   ===================================================== */
body {
    background-color: var(--dark);
    color: var(--light);
    font-family: var(--font-body);
}

strong,
b {
    font-weight: 700;
}

/* =====================================================
   TYPOGRAFIA – NAGŁÓWKI
   ===================================================== */
h1, h2, h3, h4, h5, h6,
.entry-title,
.entry-title a,
.page-title,
.woocommerce-products-header__title {
    color: var(--light);
}

/* =====================================================
   HEADER
   ===================================================== */
.site-header {
    background-color: var(--light);
}

/* Logo / tytuł strony */
.site-title,
.site-title a {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--dark);
    text-decoration: none;
    white-space: nowrap; /* Zapobiega łamaniu nazwy w środku */
}

.site-title.beta {
    font-size: inherit;
}

/* =====================================================
   MENU – NAWIGACJA
   ===================================================== */
.main-navigation a,
.menu-toggle {
    font-family: var(--font-menu);
    font-weight: 400;
    font-size: 1.2rem;
    color: var(--dark);
    transition: color var(--transition-normal), opacity var(--transition-normal);
}

.main-navigation a:hover,
.menu-toggle:hover {
    opacity: 0.7;
}

/* Mobile menu toggle – domyślnie ukryty */
button.menu-toggle,
#site-navigation-menu-toggle {
    display: none;
}

/* Animacje menu */
.menu-toggle,
.menu-toggle:before,
.menu-toggle:after,
.main-navigation,
.main-navigation ul {
    transition: all var(--transition-fast);
}

/* =====================================================
   TREŚĆ STRONY
   ===================================================== */
.site-content,
.content-area,
.entry-content,
.entry-summary,
.page-content {
    background-color: var(--dark);
    color: var(--light);
}

.site-content a {
    color: var(--light);
}

.site-content a:hover {
    opacity: 0.8;
}

/* Większy tekst w treści */
.entry-content p,
.page-content p,
.wp-block-paragraph {
    font-size: 1.25rem;
}

/* =====================================================
   LISTY
   ===================================================== */
ul, ol, li {
    color: var(--light);
}

/* Latest Posts - kafelki */
.wp-block-latest-posts li {
    background-color: var(--accent-bg);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

/* =====================================================
   FORMULARZE
   ===================================================== */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    background-color: var(--light);
    color: var(--dark);
    border: 1px solid var(--light);
}

input:focus,
textarea:focus,
select:focus {
    outline: 2px solid var(--light);
}

/* Kontrastowe labele w WooCommerce Blocks */
.wc-block-components-address-form .wc-block-components-text-input label,
.wc-block-components-address-form .wc-blocks-components-select__label,
.wc-block-components-totals-coupon__input label {
    color: var(--dark) !important;
}

/* =====================================================
   PRZYCISKI – STANDARDOWE (wykluczamy CTA)
   ===================================================== */
.woocommerce :is(.button, button, input[type="submit"], a.button):not(.single_add_to_cart_button):not(.checkout-button):not([class*="wc-block-cart__submit"]) {
    background-color: var(--light) !important;
    color: var(--dark) !important;
    border: 1px solid var(--dark) !important;
    border-radius: var(--border-radius);
    padding: var(--btn-padding);
    font-weight: 400;
    transition: all var(--transition-normal);
}

.woocommerce :is(.button, button, input[type="submit"], a.button):not(.single_add_to_cart_button):not(.checkout-button):not([class*="wc-block-cart__submit"]):hover {
    background-color: var(--dark) !important;
    color: var(--light) !important;
    border-color: var(--light) !important;
    transform: translateY(-2px);
}

.woocommerce :is(.button, button, input[type="submit"]):not(.single_add_to_cart_button):focus {
    outline: 2px solid var(--dark);
    outline-offset: 2px;
}

/* =====================================================
   PRZYCISKI – CZERWONE (AKCJE GŁÓWNE)
   ===================================================== */
.single_add_to_cart_button.button,
.wc-block-components-checkout-place-order-button,
[class*="wc-block-cart__submit-button"],
#inp_pl_close_modal_button {
    background: var(--accent-red) !important;
    color: #fff !important;
    border: 1px solid var(--accent-red) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--btn-padding) !important;
    font-family: var(--font-menu) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: var(--line-height);
    cursor: pointer;
    transition: all var(--transition-normal) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: inline-block;
    text-align: center;
    box-sizing: border-box;
    transform: none !important;
    overflow: hidden !important;
}

/* Przycisk paczkomatu InPost - nadpisanie stylów pluginu */
button.easypack_show_geowidget,
button#easypack_block_type_geowidget,
#easypack_block_type_geowidget.easypack_show_geowidget {
    background: var(--accent-red) !important;
    color: #fff !important;
    border: 1px solid var(--accent-red) !important;
    border-radius: var(--border-radius) !important;
    padding: var(--btn-padding) !important;
    font-family: var(--font-menu) !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: var(--line-height) !important;
    cursor: pointer !important;
    transition: all var(--transition-normal) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transform: none !important;
    overflow: hidden !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: none !important;
}

/* Fix dla wewnętrznego tekstu i kontenera przycisków */
.wc-block-components-button__text {
    background-color: transparent !important;
    color: inherit !important;
}

.wc-block-cart__submit-container {
    background-color: transparent !important;
    padding: 0 !important;
}

/* Hover/Focus/Active dla czerwonych przycisków */
.single_add_to_cart_button.button:not(:disabled):not(.disabled):not(.wc-variation-selection-needed):hover,
.single_add_to_cart_button.button:not(:disabled):not(.disabled):not(.wc-variation-selection-needed):focus,
.single_add_to_cart_button.button:not(:disabled):not(.disabled):not(.wc-variation-selection-needed):active,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-components-checkout-place-order-button:focus,
.wc-block-components-checkout-place-order-button:active,
[class*="wc-block-cart__submit-button"]:hover,
[class*="wc-block-cart__submit-button"]:focus,
[class*="wc-block-cart__submit-button"]:active,
#inp_pl_close_modal_button:hover,
#inp_pl_close_modal_button:focus,
#inp_pl_close_modal_button:active {
    background: var(--accent-red-dark) !important;
    border-color: var(--accent-red-dark) !important;
    color: #fff !important;
    transform: scale(1.03) !important;
}

/* Hover dla przycisku InPost - nadpisanie stylów pluginu */
button.easypack_show_geowidget:hover,
button.easypack_show_geowidget:focus,
button.easypack_show_geowidget:active,
button#easypack_block_type_geowidget:hover,
button#easypack_block_type_geowidget:focus,
button#easypack_block_type_geowidget:active,
#easypack_block_type_geowidget.easypack_show_geowidget:hover,
#easypack_block_type_geowidget.easypack_show_geowidget:focus,
#easypack_block_type_geowidget.easypack_show_geowidget:active {
    background: var(--accent-red-dark) !important;
    border-color: var(--accent-red-dark) !important;
    color: #fff !important;
    transform: scale(1.03) !important;
    box-shadow: none !important;
}

/* Disabled state - brak efektu hover */
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.single_add_to_cart_button.button.wc-variation-selection-needed {
    cursor: not-allowed !important;
    opacity: 0.6;
}

.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.single_add_to_cart_button.button.wc-variation-selection-needed:hover,
.wc-block-components-checkout-place-order-button:disabled:hover,
.wc-block-cart__submit-button:disabled:hover {
    background: var(--accent-red) !important;
    border-color: var(--accent-red) !important;
    color: #fff !important;
    transform: none !important;
    cursor: not-allowed !important;
}

/* Loading state */
.single_add_to_cart_button.button.loading,
.wc-block-components-checkout-place-order-button.is-busy,
.wc-block-cart__submit-button.is-busy {
    opacity: 0.7;
    cursor: wait;
}

/* =====================================================
   WOOCOMMERCE – LISTA PRODUKTÓW
   ===================================================== */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    border-radius: 4px;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
    color: var(--light);
}

.woocommerce ul.products li.product .price {
    color: var(--light);
    font-weight: 700;
}

/* Nazwa produktu i cena – styl jak menu */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    font-family: var(--font-menu);
    font-weight: 400;
    font-size: 1.2rem;
    text-transform: none;
    letter-spacing: normal;
}

/* Ukrycie przycisków w loopie produktów */
.woocommerce ul.products li.product.product-type-variable > a.button.product_type_variable,
.woocommerce ul.products li.product.outofstock.product-type-simple > a.button.product_type_simple {
    display: none !important;
}

/* Wrapper miniaturki produktu */
.product-thumbnail-wrapper {
    position: relative;
    display: inline-block;
}

/* Ribbon "Wkrótce" dla produktów outofstock */
.product-thumbnail-wrapper.outofstock-ribbon {
    overflow: hidden;
}

/* Przyciemnienie zdjęcia niedostępnego produktu */
.product-thumbnail-wrapper.outofstock-ribbon img {
    filter: brightness(0.5);
    transition: filter var(--transition-normal);
}

.product-thumbnail-wrapper.outofstock-ribbon::before {
    content: "Premiera wkrótce";
    position: absolute;
    top: 45px;
    left: -50px;
    width: 200px;
    padding: 6px 0;
    background: var(--accent-bg);
    color: var(--light);
    font-family: var(--font-menu);
    font-size: clamp(0.55rem, 1.8vw, 0.7rem);
    font-weight: 700;
    text-align: center;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    transform: rotate(-45deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    z-index: 10;
}

/* =====================================================
   WOOCOMMERCE – PRODUKTY ZMIENNE
   ===================================================== */
.woocommerce .variations select {
    background-color: var(--light);
    color: var(--dark);
    border: 1px solid var(--dark);
}

.woocommerce .reset_variations {
    display: none;
}

/* =====================================================
   WOOCOMMERCE – KOSZYK
   ===================================================== */
   
/* USUŃ linie separatorów między opcjami płatności */
.wc-block-components-radio-control-accordion-option:after {
    display: none !important;
}

/* USUŃ linie separatorów między opcjami wysyłki */
.wc-block-components-radio-control__option:after {
    display: none !important;
}

/* USUŃ ramkę wokół kontenera z opcjami - ODZNACZONE */
.wc-block-components-radio-control--highlight-checked:after {
    display: none !important;
}

/* =====================================================
   WOOCOMMERCE – KOMUNIKATY
   ===================================================== */
.woocommerce-message {
    background-color: var(--accent-green) !important;
}

.woocommerce-noreviews {
    background-color: var(--accent-bg) !important;
}

/* =====================================================
   WOOCOMMERCE – PODSUMOWANIE ZAMÓWIENIA (CHECKOUT)
   ===================================================== */
.wp-block-woocommerce-checkout-order-summary-block,
.wp-block-woocommerce-checkout-order-summary-block *,
.wc-block-components-totals-wrapper,
.wc-block-components-totals-item,
.wc-block-components-order-summary,
.wc-block-components-order-summary-item {
    border-color: var(--accent-bg) !important;
}

.wc-block-components-totals-wrapper.slot-wrapper {
    display: none !important;
}

/* Tabela koszyka - border */
.wc-block-cart-items,
.wc-block-cart-items th,
.wc-block-cart-items td {
    border-color: var(--accent-bg) !important;
}

/* Podsumowanie koszyka - border */
.wp-block-woocommerce-cart-order-summary-block,
.wp-block-woocommerce-cart-order-summary-block *,
.wp-block-woocommerce-cart-order-summary-totals-block,
.wp-block-woocommerce-cart-order-summary-totals-block *,
.wc-block-checkout__terms {
    border-color: var(--accent-bg) !important;
}

/* =====================================================
   PLUGIN INPOST – STYLE
   ===================================================== */
#easypack_selected_point_data {
    background: var(--light) !important;
    color: var(--dark) !important;
    padding: 10px !important;
    border: 2px solid var(--accent-bg) !important;
    border-radius: var(--border-radius) !important;
}

#easypack_selected_point_data span,
#easypack_selected_point_data div {
    color: var(--dark) !important;
}

#inpost_pl_checkout_validation_modal div[style*="margin: 20px 0px"] {
    color: var(--dark);
}

#inp_pl_close_modal_cross {
    color: var(--dark) !important;
}

/* =====================================================
   UKRYCIA ELEMENTÓW
   ===================================================== */
/* Sekcja "Kupuj według marki" */
.storefront-product-section.storefront-woocommerce-brands {
    display: none !important;
}

/* Nagłówek strony głównej */
.home .entry-header {
    display: none;
}

/* Sortowanie i licznik produktów */
.woocommerce-page .storefront-sorting {
    display: none !important;
}

/* SKU produktów */
.woocommerce span.sku_wrapper {
    display: none !important;
}

/* Ukryj tytuły widgetów w stopce na desktop */
span.gamma.widget-title {
    display: none;
}

/* =====================================================
   STRONA GŁÓWNA – WYRÓWNANIE MARGINESÓW
   ===================================================== */
.home .site-main .page > .col-full,
.home .site-main .entry-content,
.home .wp-block-columns {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

/* =====================================================
   STOPKA
   ===================================================== */
.site-footer {
    background-color: var(--light);
    color: var(--dark);
}

.site-footer a {
    color: var(--dark);
}

.site-footer a:hover {
    opacity: 0.7;
}

/* Padding stopki */
.footer-widgets {
    padding-top: 2em;
    padding-bottom: 1em;
}

/* Lepsze odstępy dla widgetów */
.footer-widgets .widget {
    margin-bottom: 1em;
}

/* =====================================================
   MEDIA QUERIES – DESKTOP (min-width: 768px)
   ===================================================== */
@media (min-width: 768px) {
    .site-title.beta {
        font-size: 2.8rem;
    }

    /* Stopka - szerokości kolumn */
    .footer-widgets.col-4 .block.footer-widget-1 {
        width: 30% !important;
    }

    .footer-widgets.col-4 :is(.block.footer-widget-2, .block.footer-widget-3) {
        width: 15% !important;
    }

    .footer-widgets.col-4 .block.footer-widget-4 {
        width: 40% !important;
        float: right !important;
        margin-right: 0 !important;
    }
}

/* =====================================================
   MEDIA QUERIES – MOBILE (max-width: 767px)
   ===================================================== */
@media (max-width: 767px) {
    /* Tytuł strony */
    .site-title.beta {
        font-size: 1.4rem;
    }

    /* Menu */
    .main-navigation a,
    .menu-toggle {
        font-size: 1rem;
    }

    /* Natychmiastowe zamykanie menu mobilnego */
    .handheld-navigation,
    .nav-menu,
    .main-navigation div.menu>ul:not(.nav-menu) {
        transition: all ease 0.05s !important;
    }

    .main-navigation:not(.toggled) :is(.handheld-navigation, .nav-menu, div.menu>ul:not(.nav-menu)) {
        transition: none !important;
    }

    /* Pokaż menu toggle */
    button.menu-toggle,
    #site-navigation-menu-toggle {
        display: inline-block !important;
        -webkit-appearance: none;
        appearance: none;
        box-sizing: border-box;
        position: relative;
        float: right;
        margin: 0;
        padding: 0.618em 0.875em 0.618em 2.618em;
        min-height: 44px;
        max-width: 120px;
        font-family: var(--font-menu);
        font-weight: 400;
        font-size: 0.875em;
        line-height: var(--line-height);
        text-align: left;
        text-transform: none;
        text-decoration: none;
        cursor: pointer;
        background-color: var(--light) !important;
        color: var(--dark) !important;
        border: 2px solid var(--dark) !important;
        border-radius: 2px;
        box-shadow: none;
        outline: none;
        transition: opacity var(--transition-fast),
                    transform var(--transition-fast),
                    background-color var(--transition-normal),
                    color var(--transition-normal);
    }

    /* Hover/Focus – stabilne */
    :is(button.menu-toggle, #site-navigation-menu-toggle):is(:hover, :focus, :active) {
        background-color: var(--light) !important;
        color: var(--dark) !important;
        border: 2px solid var(--dark) !important;
        outline: none;
        box-shadow: none;
        transform: none;
    }

    /* Accessibility */
    :is(button.menu-toggle, #site-navigation-menu-toggle):focus-visible {
        outline: 2px dashed var(--dark);
        outline-offset: 2px;
    }

    /* Produkty */
    .woocommerce ul.products li.product {
        margin-bottom: 20px;
    }

    /* Latest Posts */
    .wp-block-latest-posts {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        width: 100% !important;
        padding-left: 1rem;
        padding-right: 1rem;
        box-sizing: border-box;
    }

    .wp-block-latest-posts li {
        width: 100% !important;
        margin-bottom: 0;
    }

    /* Pokaż opis strony i tytuły widgetów */
    .site-branding .site-description {
        display: block !important;
        margin-bottom: 0 !important;
    }

    span.gamma.widget-title {
        display: block;
    }

    /* Wyśrodkuj div z ikonami social media w stopce */
    .footer-widgets .block.footer-widget-3 {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .social-icons-footer {
        /* Ikony wewnątrz pozostają wyrównane do lewej (flex-start) */
    }
}

/* =====================================================
   MEDIA QUERIES – BARDZO MAŁE EKRANY (max-width: 384px)
   ===================================================== */
@media (max-width: 384px) {
    /* Zmniejsz nazwę strony aby zmieściła się w jednej linii */
    .site-title.beta {
        font-size: 1.1rem;
        letter-spacing: 0;
    }
}

/* =====================================================
   WOOCOMMERCE BLOCKS – POLA FORMULARZA
   ===================================================== */

/* Wrapper bez tła */
.wc-block-components-text-input,
.wc-block-components-text-input.is-active,
.wc-block-components-text-input.is-filled {
    background: transparent !important;
}

/* Wszystkie pola formularzy */
.wc-block-components-text-input__input,
.wc-block-components-form :is(
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    textarea,
    select
),
#wc-block-components-totals-coupon__input-coupon {
    background: var(--light) !important;
    color: var(--dark) !important;
    border: 1px solid var(--dark) !important;
    box-shadow: none !important;
}

/* Focus */
.wc-block-components-text-input__input:focus,
.wc-block-components-form :is(input, textarea, select):focus {
    background: var(--light) !important;
    border-color: var(--dark) !important;
    outline: 2px solid var(--light) !important;
    outline-offset: 0;
}

/* Floating label */
.wc-block-components-text-input__label {
    color: var(--dark) !important;
}

/* =====================================================
   FIX: USUNIĘCIE JASNEJ RAMKI HOVER DLA CHECKBOX I RADIO
   ===================================================== */

/* Checkbox i Radio - brak outline/border przy hover i focus */
input[type="checkbox"]:hover,
input[type="checkbox"]:focus,
input[type="radio"]:hover,
input[type="radio"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--dark) !important;
}

/* =====================================================
   TPAY – DOPASOWANIE STYLÓW DO KOSZYKA
   ===================================================== */

/* Tekst w sekcji płatności */
.wc-block-components-radio-control-accordion-content p,
.tpay-accept-conditions,
.tpay-accept-conditions p,
.agreement_text_scroller {
    font-family: var(--font-body) !important;
    color: var(--light) !important;
    font-size: inherit !important;
    line-height: var(--line-height) !important;
    font-weight: 400 !important;
}

.wc-block-components-radio-control-accordion-content p {
    margin: 0 0 1em 0 !important;
}

.wc-block-components-radio-control-accordion-content p:last-child {
    margin-bottom: 0 !important;
}

.tpay-accept-conditions {
    margin-top: 1em !important;
}

/* Linki w warunkach Tpay */
.tpay-accept-conditions a {
    color: var(--light) !important;
    text-decoration: underline !important;
    transition: opacity var(--transition-normal) !important;
}

.tpay-accept-conditions a:hover {
    opacity: 0.8 !important;
}

/* =====================================================
   TPAY – LOGO OBOK NAZWY PŁATNOŚCI
   ===================================================== */

/* Logo Tpay - wyświetl obok tekstu z odpowiednim odstępem */
img.tpay-inline {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 0.75em !important; /* Zwiększony odstęp od tekstu */
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important;
    max-height: 1.5em !important;
    width: auto !important;
}

/* Kontener z nazwą płatności */
.wc-block-components-radio-control__label span {
    display: inline !important;
    white-space: nowrap !important; /* Zapobiega łamaniu */
}

/* =====================================================
   TPAY – ROZJAŚNIENIE CIEMNEGO LOGO
   ===================================================== */

/* Rozjaśnij ciemne logo Tpay na jasnym tle */
img[src*="tpay.svg"],
img[src*="tpay-woocommerce/views/img/"] {
    filter: brightness(0) invert(1) !important;
    /* brightness(0) = zmienia na czarne, invert(1) = odwraca na białe */
}

/* =====================================================
   STRONA POTWIERDZENIA ZAMÓWIENIA - ORDER RECEIVED
   ===================================================== */

/* Kontenery i tabelki - wspólne kolory */
.payment-confirmation-container,
.woocommerce-order-overview li,
.woocommerce-table--order-details,
.woocommerce-order-details table,
.ep-chosen-parcel-machine,
.payment-confirmation-container .underline,
.wc-bacs-bank-details {
    background-color: var(--light) !important;
    color: var(--dark) !important;
}

/* Wszystkie komórki tabelki */
.woocommerce-table--order-details :is(thead, tbody, tfoot) :is(th, td) {
    background-color: var(--light) !important;
    color: var(--dark) !important;
    border-color: var(--accent-bg) !important;
}

/* Linki, ceny, bold w tabelce */
.woocommerce-table--order-details :is(a, .woocommerce-Price-amount, strong),
.wc-bacs-bank-details li {
    color: var(--dark) !important;
}

.woocommerce-table--order-details a {
    text-decoration: underline !important;
}

.woocommerce-table--order-details a:hover {
    opacity: 0.7 !important;
}

/* Ukrycie ząbków */
body.woocommerce-order-received ul.order_details::before,
body.woocommerce-order-received ul.order_details::after {
    display: none;
}

/* Handheld footer bar - widoczne etykiety tekstowe + ikony */
.storefront-handheld-footer-bar ul li > a {
    text-indent: 0 !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    padding: 1em 0;
    text-decoration: none !important;
    font-size: 0.7em;
    font-family: var(--font-menu);
    font-weight: 400;
    line-height: 1.2;
    min-height: 5em;
    text-transform: uppercase;
}

.storefront-handheld-footer-bar ul li > a::before {
    position: static !important;
    transform: none !important;
    font-size: 2.31em !important; /* 1.618 / 0.7 = 2.31 (oryginalny rozmiar) */
    line-height: 1 !important;
    margin: 0 !important;
}

/* Ikona sklepu - budynek */
.storefront-handheld-footer-bar ul li.shop > a::before {
    content: "\f54e"; /* store icon (Font Awesome) */
}

/* Pozycja licznika koszyka */
.storefront-handheld-footer-bar ul li.cart .count {
    position: absolute;
    top: 0.2em;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 1.3em;
}

/* =====================================================
   IKONY SOCIAL MEDIA W STOPCE
   ===================================================== */
.social-icons-footer {
    display: flex;
    gap: 1.5em;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0.5em;
}

.social-icons-footer .social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3em;
    height: 3em;
    background: transparent;
    color: var(--dark);
    border: 2px solid var(--dark);
    border-radius: 50%;
    text-decoration: none;
    transition: all var(--transition-normal);
    font-size: 1.08em; /* 10% mniejsze (było 1.2em) */
}

.social-icons-footer .social-icon i {
    font-size: 1.4em;
    color: var(--dark);
}

/* Hover effects */
.social-icons-footer .social-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Instagram - gradient */
.social-icons-footer .social-icon.instagram:hover {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

/* Facebook - brand color */
.social-icons-footer .social-icon.facebook:hover {
    background: #1877f2;
    color: #fff;
}

/* Disabled state dla placeholder (#) */
.social-icons-footer .social-icon[href="#"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.social-icons-footer .social-icon[href="#"]:hover {
    transform: none;
    box-shadow: none;
    background: var(--dark);
    color: var(--light);
}

/* =====================================================
   OPTYMALIZACJE SPOTLIGHT INSTAGRAM FEED
   ===================================================== */

/* Wymuś odpowiedni rozmiar obrazów */
.sli-feed img,
.sli-layout-grid img,
.spotlight-instagram img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
}

/* Native lazy loading dla wszystkich obrazów Spotlight */
/* .sli-feed img, */
/* .sli-layout-grid img, */
/* .spotlight-instagram img { */
    /* loading: lazy; */
/* } */

/* Optymalizacja layoutu - zapobiega CLS (Cumulative Layout Shift) */
.sli-feed-item,
.sli-layout-grid-item {
    aspect-ratio: 1 / 1; /* Kwadratowe zdjęcia Instagram */
    overflow: hidden;
}

/* Zmniejsz gap między zdjęciami na mobile dla lepszego UX */
@media (max-width: 767px) {
    .sli-layout-grid {
        gap: 0.5em !important;
    }
}