.mobile-bottom-menu {
    display: none;
}
/* =========================================================
   MOBILE BOTTOM MENU
========================================================= */

@media (max-width: 767px) {

    .mobile-bottom-menu {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 5px 8px;
        background: #00000080;
        backdrop-filter: blur(10px);
        z-index: 9999;
    }


    /* -----------------------------------------
       EACH MENU ITEM
    ----------------------------------------- */

    .mobile-bottom-menu .mobile-menu-item {
        flex: 1;
        height: 58px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 2px;
        border: 0;
        background: transparent;
        color: #777;
        text-decoration: none;
        font-family: inherit;
        font-size: 10px;
        font-weight: 600;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }


    /* -----------------------------------------
       ICON
    ----------------------------------------- */

    .mobile-bottom-menu
    .mobile-menu-item > i {
        font-size: 19px;
        line-height: 1;
        color: #fff;
        transition: 0.2s ease;
    }


    /* -----------------------------------------
       TEXT
    ----------------------------------------- */

    .mobile-bottom-menu
    .mobile-menu-item span:not(.mobile-cart-icon) {
        font-size: 10px;
        line-height: 1.2;
        color: #fff;
    }


    /* -----------------------------------------
       ACTIVE MENU
    ----------------------------------------- */

    .mobile-bottom-menu
    .mobile-menu-item.active {
        color: #ff3b00;
    }

    .mobile-bottom-menu
    .mobile-menu-item.active > i {
        color: #ff3b00;
        transform: translateY(-1px);
    }

    .mobile-bottom-menu
    .mobile-menu-item.active
    span:not(.mobile-cart-icon) {
        color: #ff3b00;
    }


    /* -----------------------------------------
       CART ICON WRAPPER
    ----------------------------------------- */

    .mobile-cart-icon {
        position: relative;
        width: 25px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .mobile-cart-icon i {
        font-size: 19px;
        line-height: 1;
        color: #fff;
    }


    /* -----------------------------------------
       CART COUNT
    ----------------------------------------- */

    .mobile-cart-icon b {
        position: absolute;
        top: -8px;
        right: -9px;
        min-width: 17px;
        height: 17px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 4px;
        border-radius: 50%;
        background: #ff3b18;
        color: #ffffff;
        font-size: 9px;
        font-weight: 700;
        line-height: 17px;
        box-sizing: border-box;
    }


    /* -----------------------------------------
       CART BUTTON
    ----------------------------------------- */

    .mobile-bottom-menu
    .mobile-cart-menu {

        outline: none;

        appearance: none;
        -webkit-appearance: none;
    }

    .mobile-bottom-menu
    .mobile-cart-menu:active {

        transform: scale(0.96);
    }


    /* -----------------------------------------
       SAFE AREA - MOBILE
    ----------------------------------------- */

    @supports (padding-bottom: env(safe-area-inset-bottom)) {

        .mobile-bottom-menu {

            height: calc(68px + env(safe-area-inset-bottom));

            padding-bottom:
                calc(5px + env(safe-area-inset-bottom));
        }
    }


    /* -----------------------------------------
       PAGE SPACE
       Prevent bottom menu covering products
    ----------------------------------------- */

    body {

        padding-bottom: 68px;
    }

    /* ==========================
    MOBILE MENU ACTIVE
    ========================== */

    .mobile-bottom-menu 
    .mobile-menu-item {

        color: #777;

    }


    .mobile-bottom-menu 
    .mobile-menu-item i {

        color: #777;

    }


    /* ACTIVE */

    .mobile-bottom-menu 
    .mobile-menu-item.active {

        color: #ff3b00;

    }


    .mobile-bottom-menu 
    .mobile-menu-item.active i {

        color: #ff3b00;

    }


    .mobile-bottom-menu 
    .mobile-menu-item.active span {

    color: #ff3b00;

}

}


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

@media (max-width: 380px) {

    .mobile-bottom-menu {

        height: 64px;

        padding-left: 5px;
        padding-right: 5px;
    }

    .mobile-bottom-menu
    .mobile-menu-item {

        height: 55px;

        font-size: 9px;
    }

    .mobile-bottom-menu
    .mobile-menu-item > i {

        font-size: 18px;
    }

    .mobile-bottom-menu
    .mobile-menu-item span:not(.mobile-cart-icon) {

        font-size: 9px;
    }

}