/* ============================================================
   Mobile bottom navigation bar (Home / Categories / Account / Cart)
   Hidden on desktop, shown only on small screens.
   ============================================================ */

.wm-bottom-nav {
    display: none;
}

@media screen and (max-width: 768px) {
    .wm-bottom-nav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        background: #fff;
        box-shadow: 0 -4px 16px rgba(17, 63, 138, 0.12);
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .wm-bottom-nav-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 8px 4px 6px 4px;
        color: #6b7a9a;
        text-decoration: none;
        font-size: 11px;
        font-weight: 500;
    }

    .wm-bottom-nav-item i {
        font-size: 18px;
    }

    .wm-bottom-nav-item.active {
        color: #113f8a;
    }

    /* keep page content clear of the fixed bar */
    body {
        padding-bottom: 58px;
    }

    /* prevent any section from causing a horizontal scrollbar on mobile */
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    .main-container-home {
        overflow-x: hidden;
        max-width: 100%;
    }
}