.site-mobile-navbar {
    display: none;
}

@media screen and (max-width: 768px) {
    body.solardev-bottom-menu {
        padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
    }

    .site-mobile-navbar {
        position: fixed;
        inset-inline: 20px;
        inset-block-end: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 999999;
        display: block;
    }

    .site-mobile-navbar .site-mobile-navbar-inner {
        position: relative;
        min-block-size: 60px;
        padding: 6px;
        overflow: visible;
        border: 1px solid rgba(214, 174, 105, .36);
        border-radius: 22px;
        color: rgba(238, 245, 255, .72);
        background: rgba(5, 11, 24, .96);
        box-shadow:
            0 16px 38px rgba(0, 0, 0, .3),
            inset 0 1px 0 rgba(255, 255, 255, .06);
        isolation: isolate;
    }

    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: center;
        gap: 5px;
        min-block-size: 48px;
        margin: 0;
        padding: 0;
        direction: rtl;
        list-style: none;
    }

    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li {
        display: block;
        min-inline-size: 0;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li > * {
        position: relative;
        display: flex;
        inline-size: 100%;
        min-inline-size: 0;
        min-block-size: 48px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        margin: 0;
        padding: 4px 2px;
        border: 0;
        border-radius: 15px;
        color: rgba(238, 245, 255, .72);
        background: transparent;
        cursor: pointer;
        font: inherit;
        font-size: 10px;
        font-weight: 750;
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
    }

    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li svg {
        inline-size: 22px;
        block-size: 22px;
        flex: 0 0 22px;
        color: currentColor;
    }

    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li a > span:not(.mobile-nav-cart-count) {
        position: relative;
        color: currentColor;
        font-size: 10px;
        font-weight: 750;
        line-height: 1.2;
        white-space: nowrap;
    }

    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li a.active,
    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li a.is-active,
    .site-mobile-navbar .site-mobile-navbar-inner .site-nav .site-menu li a:hover {
        color: #f2d496;
        background: linear-gradient(180deg, rgba(214, 174, 105, .13), rgba(214, 174, 105, .045));
        box-shadow: inset 0 0 0 1px rgba(214, 174, 105, .18);
    }

    span.mobile-nav-cart-count {
        position: absolute;
        inset-block-start: 2px;
        inset-inline-start: calc(50% + 4px);
        z-index: 2;
        display: grid;
        min-inline-size: 15px;
        block-size: 15px;
        padding: 0 3px;
        place-items: center;
        border-radius: 999px;
        color: #10151f;
        background: #d6ae69;
        font-size: 8px;
        font-weight: 900;
        line-height: 1;
        box-shadow: 0 0 0 2px rgba(5, 11, 24, .96);
    }

    span.mobile-nav-cart-count.is-empty {
        display: none;
    }
}