/* === MOBILE BURGER === */
.mobile-burger {
    display: none;
}

@media (max-width: 990px) {
    /* === HEADER MOBILE === */
    .desktop-header {
        display: none !important;
    }

    .mobile-header {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: 62px;
        padding: 0 10px;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        position: relative;
        z-index: 100;
        width: 100vw;
        max-width: 100vw;
        gap: 18px;
    }

    .header-inner.mobile-header .logo {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        margin: 0;
        min-width: 0;
        flex-shrink: 1;
    }

    .header-inner.mobile-header .logo img {
        max-width: 120px;
        height: 40px;
        display: block;
    }

    .header-inner.mobile-header .cart-link {
        margin-left: 0;
        display: flex;
        align-items: center;
        gap: 4px;
        min-width: 80px;
        max-width: 100px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex-shrink: 0;
    }

    .header-inner.mobile-header .cart-amount {
        font-size: 15px;
        font-weight: 700;
        display: inline-block;
        width: 90px;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* === MOBILE BURGER BUTTON === */
    .mobile-burger {
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 38px;
        height: 38px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1301;
    }

    .mobile-burger span {
        width: 28px;
        height: 4px;
        background: #232323;
        border-radius: 2px;
        transition: all .3s;
        display: block;
    }

    /* === MOBILE NAVIGATION === */
    .nav-mobile {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: #fff;
        z-index: 1300;
        display: none;
        flex-direction: column;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s;
        max-height: 100vh;
        overflow-y: auto;
    }

    .nav-mobile.open {
        display: flex !important;
        opacity: 1;
        pointer-events: auto;
    }

    /* === MOBILE MENU HEADER === */
    .mobile-menu-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
        padding: 0 18px;
        border-bottom: 1px solid #e0e0e0;
        font-size: 21px;
        font-weight: bold;
    }

    .mobile-menu-title {
        font-size: 21px;
        font-weight: bold;
        color: #232323;
        letter-spacing: 0.04em;
    }

    .mobile-close {
        font-size: 36px;
        background: none;
        border: none;
        cursor: pointer;
        color: #232323;
        padding: 0 10px;
        line-height: 1;
        height: 38px;
    }

    /* === MOBILE MENU STRUCTURE === */
    .mobile-menu,
    .mobile-menu ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu li {
        padding: 0;
        margin: 0;
        border-bottom: 1px solid #f0f0f0;
    }

    /* === MOBILE MENU LINKS === */
    .mobile-menu li > a,
    .mobile-menu .menu-link-wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        color: #232323;
        font-size: 17px;
        text-decoration: none;
        background: none;
        width: 100%;
        box-sizing: border-box;
        transition: color .2s, background-color .2s;
        border-radius: 4px;
    }

    .mobile-menu li > a:hover,
    .mobile-menu .menu-link-wrapper:hover {
        color: #2a3392;
        background-color: #fbfbfb;
    }

    .mobile-menu .menu-link-wrapper:hover a {
        color: #2a3392;
    }

    /* NESTED LINK */
    .mobile-menu .menu-link-wrapper a {
        flex: 1;
        color: inherit;
        text-decoration: none;
    }

    /* === SUBMENU TOGGLE === */
    .mobile-menu .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-left: 12px;
        transition: transform 0.25s;
    }

    .mobile-menu .submenu-toggle svg {
        width: 18px;
        height: 18px;
        stroke: #222;
    }

    .mobile-menu li.open > .menu-link-wrapper .submenu-toggle svg {
        transform: rotate(90deg);
        stroke: #2a3392;
    }

    /* === SUB-MENU === */
    .mobile-menu ul.sub-menu {
        display: none;
        padding-left: 20px;
        margin: 0;
    }

    .mobile-menu li.menu-item-has-children.open > ul.sub-menu {
        display: block;
        animation: fadeIn 0.2s;
    }

    .mobile-menu ul.sub-menu li {
        padding: 10px 0;
    }

    /* === SUB-MENU LEVEL 3 (zgodność z desktop) === */
    .mobile-menu ul.sub-menu ul.sub-menu li > a,
    .mobile-menu ul.sub-menu ul.sub-menu .menu-link-wrapper {
        padding-left: 25px;
    }

    /* === UKRYJ DESKTOP MENU === */
    .main-menu,
    .header-nav,
    .nav-main {
        display: none !important;
    }
}

/* === ANIMACJA ROZWIJANIA === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* === RESPONSYWNOŚĆ DODATKOWA === */
@media (max-width: 900px) {

    /* ========================================
       1. BREADCRUMBS - NAPRAWIONE PRZEZ PHP (functions.php)
       Pierwszy element breadcrumbs jest usuwany przez filtr woocommerce_get_breadcrumb
       ======================================== */


    /* ========================================
       2. GALERIA PRODUKTU - WYCENTROWANIE
       ======================================== */

    /* Wycentruj całą sekcję galerii */
    body.single-product .product-page-container .product-gallery-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 0;
        margin: 0 auto;
    }

    /* Wycentruj główne zdjęcie */
    body.single-product .product-page-container .product-gallery-section .product-gallery-main {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    body.single-product .product-page-container .product-gallery-section .product-gallery-main a {
        display: flex;
        justify-content: center;
        margin: 0 auto;
    }

    body.single-product .product-page-container .product-gallery-section .product-gallery-main img {
        margin: 0 auto;
        display: block;
    }

    /* Wycentruj slider miniaturek */
    body.single-product .product-page-container .product-gallery-section .product-gallery-thumbnails-slider {
        margin: 0 auto;
        display: flex;
        justify-content: center;
    }

    body.single-product .product-page-container .product-gallery-section .thumbs-viewport {
        margin: 0 auto;
    }


    /* ========================================
       3. SEKCJA PRODUKTU - PADDING 15px (jak stopka)
       ======================================== */

    /* Cała sekcja informacji o produkcie */
    body.single-product .product-page-container .product-info-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Dla pewności - każdy element osobno z padding: 0 */
    body.single-product .product-page-container .product-info-section .product_title,
    body.single-product .product-page-container .product-info-section .product-price,
    body.single-product .product-page-container .product-info-section .woocommerce-product-rating,
    body.single-product .product-page-container .product-info-section .product-short-description,
    body.single-product .product-page-container .product-info-section .product_meta,
    body.single-product .product-page-container .product-info-section form.cart,
    body.single-product .product-page-container .product-info-section .variations,
    body.single-product .product-page-container .product-info-section .woocommerce-variation-description {
        padding-left: 0;
        padding-right: 0;
    }


    /* ========================================
       4. KATALOG TKANIN - PRZYCISK TOP 10
       ======================================== */

    /* Kontener akcji - zmień na kolumnę */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 0;
        align-items: stretch;
    }

    /* Lewy i prawy kontener na całą szerokość */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions-left,
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Wszystkie przyciski na całą szerokość */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-filter-apply,
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-filter-clear,
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-top10-button {
        width: 100%;
        max-width: 100%;
        text-align: center;
        padding: 12px 20px;
        box-sizing: border-box;
        margin: 0;
        display: block;
    }

    /* Żółty przycisk TOP 10 - upewnij się że jest w obrysie */
    body .tkaniny-archive-wrapper .tkaniny-archive-filters .tkaniny-filters-inner .tkaniny-filter-actions .tkaniny-top10-button {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }


    /* ========================================
       5. INNE STYLE (istniejące)
       ======================================== */

    .category-desc-wrap {
        padding-bottom: 100px;
        padding-left: 0;
        padding-right: 0;
    }

    .term-description {
        font-size: 15px;
        line-height: 1.7;
        margin-bottom: 0;
    }

    .term-description.is-open,
    .term-description.show {
        margin-bottom: 100px;
    }

    .term-description__btn {
        margin-bottom: 0;
    }

    .shop-products {
        padding-bottom: 40px;
    }

    .footer-outer,
    .footer-widgets-bg,
    .footer-bottom {
        padding-bottom: 0;
    }
}

@media (max-width: 600px) {
    .header-inner.mobile-header .logo img {
        max-width: 100px;
        height: auto;
    }
}