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

@media only screen and (max-width: 768px) {
    body.has-mobile-bottom-nav {
        padding-bottom: calc(86px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-nav {
        align-items: flex-end;
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid rgba(31, 41, 55, .1);
        bottom: 0;
        box-shadow: 0 -8px 24px rgba(15, 23, 42, .12);
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        height: calc(72px + env(safe-area-inset-bottom));
        left: 0;
        padding: 5px max(10px, env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-right));
        position: fixed;
        right: 0;
        z-index: 1100;
    }

    .mobile-bottom-nav-item {
        align-items: center;
        color: #64748b;
        display: flex;
        flex-direction: column;
        font-size: 11px;
        font-weight: 600;
        gap: 3px;
        justify-content: flex-end;
        min-width: 0;
        padding-bottom: 2px;
        text-align: center;
        text-decoration: none;
    }

    .mobile-bottom-nav-item:hover,
    .mobile-bottom-nav-item:focus,
    .mobile-bottom-nav-item.is-active {
        color: var(--mobile-menu-accent);
        text-decoration: none;
    }

    .mobile-bottom-nav-icon {
        align-items: center;
        display: flex;
        font-size: 23px;
        height: 30px;
        justify-content: center;
        width: 44px;
    }

    .mobile-bottom-nav-label {
        display: block;
        line-height: 1.1;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

}