/* =========================================
   MOBILE LAYOUT / OVERFLOW FIX
   ========================================= */

html {
    overflow-x: hidden;
}

body {
    margin: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =========================================
   MEDIA
   ========================================= */

img,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

video,
iframe {
    display: block;
}

/* =========================================
   MAIN CONTAINERS
   ========================================= */

.container,
.header,
.nav,
.hero,
.section,
.footer,
.footer-mini {
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================
   ROW / GRID / FLEX
   ========================================= */

.row,
.grid,
.flex,
.products-grid,
.product-list {
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .row,
    .grid,
    .flex,
    .products-grid,
    .product-list {
        width: 100%;
        max-width: 100%;
    }

    img,
    video,
    iframe {
        max-width: 100%;
    }

    /* Prevent long text from creating overflow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a,
    span {
        overflow-wrap: break-word;
    }

    /* =====================================
       MOBILE NAVBAR BUTTON
       ===================================== */

    .navbar__mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent;
        box-sizing: border-box;
        flex-shrink: 0;
        cursor: pointer;
    }

    .navbar__hamburger {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 20px;
        gap: 4px;
    }

    .navbar__hamburger span {
        display: block;
        width: 24px;
        height: 2px;
        flex-shrink: 0;
        background: currentColor;
        border-radius: 2px;
    }

    /* =====================================
       PRODUCT GRID
       ===================================== */

    .products-grid {
        display: grid;
        width: 100%;
        max-width: 100%;
    }

    /* =====================================
       FULL WIDTH ELEMENTS
       ===================================== */

    .hero,
    .banner,
    .full-width {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* =====================================
       FORM ELEMENTS
       ===================================== */

    input,
    textarea,
    select,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 480px) {

    .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .navbar__mobile-toggle {
        width: 42px;
        height: 42px;
    }

    .navbar__hamburger {
        width: 22px;
    }

    .navbar__hamburger span {
        width: 22px;
    }
}

/* =========================================
   WHATSAPP BUTTON
   ========================================= */

.whatsapp-float {
    position: fixed;
    right: 15px;
    bottom: 15px;
    z-index: 9999;
}

@media (max-width: 768px) {

    .whatsapp-float {
        right: 12px;
        bottom: 75px;
    }
}

@media (max-width: 480px) {

    .whatsapp-float {
        right: 10px;
        bottom: 70px;
    }
}