/* Critical Mobile Fixes - Load First */

/* MOST IMPORTANT: Prevent horizontal scroll */
@media (max-width: 768px) {
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        padding-top: 0 !important;
    }
    
    /* Hide header top bar on mobile to save space */
    .header-top {
        display: none !important;
    }
    
    /* Every element should respect viewport width */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    /* Specific element fixes */
    .container,
    .header-main .container,
    .header-content,
    .hero-section,
    .site-main,
    section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Header absolute fix */
    .site-header {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        position: relative;
    }
    
    .header-main {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .header-main .container {
        width: 100% !important;
        padding: 0 10px !important;
        overflow-x: hidden !important;
    }
    
    /* Header content grid */
    .header-content {
        display: grid !important;
        grid-template-areas: 
            "menu logo actions"
            "search search search" !important;
        grid-template-columns: 45px 1fr auto !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 0 !important;
    }
    
    .mobile-menu-btn {
        grid-area: menu !important;
        width: 40px !important;
        height: 40px !important;
    }
    
    .logo {
        grid-area: logo !important;
        text-align: center !important;
        overflow: hidden !important;
    }
    
    .header-actions {
        grid-area: actions !important;
        display: flex !important;
        gap: 5px !important;
    }
    
    .search-bar {
        grid-area: search !important;
        width: 100% !important;
    }
    
    /* Search form fix */
    .search-form {
        display: flex !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .search-input {
        flex: 1 !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    .search-btn,
    #voiceSearchBtn {
        flex-shrink: 0 !important;
        width: 45px !important;
        padding: 10px !important;
    }
    
    /* Cart button compact */
    .cart-btn {
        padding: 8px 12px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    .cart-count {
        font-size: 11px !important;
        min-width: 18px !important;
        height: 18px !important;
        padding: 2px 5px !important;
    }
    
    /* Hero section mobile */
    .hero-section {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        padding: 40px 0 !important;
        min-height: 400px !important;
    }
    
    .hero-section .container {
        padding: 0 15px !important;
    }
    
    .hero-content {
        width: 100% !important;
        text-align: center !important;
    }
    
    .hero-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
    
    .hero-subtitle {
        font-size: 16px !important;
        margin-bottom: 15px !important;
    }
    
    .hero-discount {
        font-size: 28px !important;
        padding: 12px 20px !important;
        margin: 15px 0 !important;
        display: inline-block !important;
    }
    
    .hero-cta {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 0 20px !important;
        margin-top: 20px !important;
    }
    
    .hero-cta .btn {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }
    
    /* Products grid mobile */
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 !important;
    }
    
    /* All sections */
    section {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    
    section .container {
        padding: 0 10px !important;
    }
    
    /* Page headers */
    .page-header-banner {
        width: 100vw !important;
        padding: 40px 0 !important;
    }
    
    .page-header-banner .container {
        padding: 0 15px !important;
    }
    
    .page-header-banner h1 {
        font-size: 28px !important;
    }
    
    /* Remove animations that cause overflow */
    .reveal {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    /* Images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 480px) {
    .header-content {
        grid-template-columns: 40px 1fr 60px !important;
    }
    
    .logo-text {
        font-size: 18px !important;
    }
    
    .hero-title {
        font-size: 24px !important;
    }
    
    .hero-discount {
        font-size: 24px !important;
        padding: 10px 18px !important;
    }
    
    .products-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }
}

/* Force all flex containers to wrap */
@media (max-width: 768px) {
    div[style*="display: flex"],
    div[style*="display:flex"] {
        flex-wrap: wrap !important;
    }
    
    /* All grids should be single column unless specified */
    div[style*="grid-template-columns: 2fr"],
    div[style*="grid-template-columns:2fr"] {
        grid-template-columns: 1fr !important;
    }
}