/* ============================================
   MOBILE FIXES - TYLKO DLA FULLSIZE STRONY PRODUKTU
   NIE WPŁYWA NA MODAL!
   ============================================ */

/* Globalne style dla całej strony - ale tylko gdy NIE ma otwartego modala */
body:not(.modal-open) {
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    overflow-x: hidden;
}

/* Fix dla wszystkich głównych sekcji strony (NIE modalnych) */
@media (max-width: 768px) {
    /* Tylko dla głównych sekcji content (nie modali) */
    body > section,
    main > section,
    #app-container > section {
        overflow-x: hidden;
        max-width: 100%;
    }
    
    /* Kontener max-w-7xl TYLKO poza modalami */
    body:not(.modal-open) .max-w-7xl {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        overflow-x: hidden;
    }
    
    /* Grid na stronie produktu - TYLKO fullsize, nie modal */
    section:not(#product-modal *) .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Boxy produktu - TYLKO poza modalem */
    section:not(#product-modal *) .bg-white.rounded-2xl {
        max-width: 100% !important;
        overflow-x: hidden;
        word-wrap: break-word;
    }
    
    /* Thumbnails galerii - TYLKO fullsize */
    section:not(#product-modal *) .flex.space-x-3.mt-6.overflow-x-auto,
    section:not(#product-modal *) .flex.space-x-2.mt-4.overflow-x-auto {
        max-width: 100%;
        scrollbar-width: thin;
        scrollbar-color: rgba(34, 197, 94, 0.3) transparent;
    }
    
    /* Oferty - TYLKO fullsize */
    section:not(#product-modal *) #offers-section .group.flex.items-center {
        max-width: 100% !important;
        flex-wrap: wrap;
    }
    
    /* Akcje - TYLKO fullsize */
    section:not(#product-modal *) .flex.flex-wrap.items-center.justify-evenly {
        max-width: 100% !important;
        justify-content: center !important;
    }
    
    /* Breadcrumb - TYLKO fullsize */
    section:not(#product-modal *) nav[aria-label='Breadcrumb'] ol {
        max-width: 100%;
        flex-wrap: wrap;
    }
    
    /* Teksty w boxach - TYLKO fullsize, NIE galeria */
    section:not(#product-modal *) .bg-white.rounded-2xl h1,
    section:not(#product-modal *) .bg-white.rounded-2xl h2,
    section:not(#product-modal *) .bg-white.rounded-2xl h3,
    section:not(#product-modal *) .bg-white.rounded-2xl p {
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-width: 100%;
    }
}

/* Bardzo małe ekrany - iPhone SE - TYLKO fullsize */
@media (max-width: 480px) {
    body:not(.modal-open) .max-w-7xl {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    section:not(#product-modal *) .bg-white.rounded-2xl {
        padding: 1rem !important;
    }
    
    section.pt-24 {
        padding-top: 5rem !important;
    }
    
    section .space-y-6 > * + * {
        margin-top: 1rem !important;
    }
}

/* WYŁĄCZENIE tych styli dla modala - upewnij się że modal działa normalnie */
#product-modal *,
#product-modal-content * {
    /* Modal używa swoich własnych styli z css/styles.css */
    /* Nie nadpisuj ich tutaj! */
}