/* ===================================
   MOBILE OVERFLOW FIX
   Fix white space on right side
   =================================== */

/* Prevent horizontal overflow globally */
* {
    max-width: 100%;
}

html, body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
}

/* Fix container overflow */
.container,
.header,
.nav,
.hero,
.section,
.footer,
.footer-mini {
    max-width: 100vw;
    overflow-x: hidden;
}

/* Fix specific elements that might cause overflow */
img,
video,
iframe {
    max-width: 100%;
    height: auto;
}

/* Fix rows and grids */
.row,
.grid,
.flex {
    max-width: 100%;
}

/* Mobile specific fixes */
@media (max-width: 768px) {
    body {
        overflow-x: hidden !important;
    }
    
    /* Fix any full-width sections */
    .hero,
    .banner,
    .full-width {
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
        padding-left: 20px;
        padding-right: 20px;
    }
    
    /* Ensure all containers fit */
    .container {
        padding-left: 15px;
        padding-right: 15px;
        width: 100%;
    }
    
    /* Fix product grids */
    .products-grid,
    .product-list {
        width: 100%;
        overflow-x: hidden;
    }
    
    /* Fix images */
    img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
}

/* Fix WhatsApp button positioning */
.whatsapp-float {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;
}

@media (max-width: 480px) {
    .whatsapp-float {
        right: 10px;
        bottom: 10px;
    }
}