/**
 * Mobile Overflow Fix
 * Prevents horizontal scrolling on mobile devices
 */

/* Prevent horizontal overflow on all devices */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    position: relative !important;
}

/* Fix all containers */
#page,
#content,
.site-content,
.container,
.site-main {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Fix full-width sections */
section,
.hero-section,
.modern-categories,
.featured-products,
.products-by-category {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    /* Prevent any element from causing horizontal scroll */
    * {
        max-width: 100vw !important;
    }
    
    /* Fix header */
    .site-header,
    .main-header,
    .european-contact-bar {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Fix navigation */
    .main-navigation {
        max-width: 100vw !important;
    }
    
    /* Fix hero section */
    .hero-section {
        width: 100% !important;
        margin-left: 0 !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Fix category grid */
    .modern-categories-grid {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix product grids */
    .products-grid,
    .products-row,
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }
    
    /* Fix full-width sections on mobile */
    .featured-products,
    .products-by-category,
    .modern-categories {
        width: 100% !important;
        margin-left: 0 !important;
        padding: 40px 15px !important;
    }
    
    /* Fix containers */
    .container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }
    
    /* Fix images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }
    
    /* Fix tables */
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
    
    /* Fix forms */
    input,
    select,
    textarea,
    button {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Fix WooCommerce elements */
    .woocommerce,
    .woocommerce-page {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    /* Fix cart table */
    .woocommerce table.cart {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
    
    /* Fix checkout */
    .woocommerce-checkout {
        max-width: 100% !important;
        padding: 0 15px !important;
    }
    
    /* Fix product cards */
    .product-card-wrapper {
        max-width: 100% !important;
        margin: 0 !important;
    }
    
    /* Fix language switcher */
    .bca-lang-switcher {
        right: 10px !important;
        bottom: 10px !important;
    }
    
    /* Fix any calc() that might cause overflow */
    [style*="calc"] {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* Fix negative margins */
    * {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Allow only vertical scrolling */
    body {
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Tablet fixes */
@media (min-width: 769px) and (max-width: 1024px) {
    .modern-categories-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .products-grid,
    .products-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}