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

@media (max-width: 1100px) {
    body.has-mobile-bottom-navigation {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .mobile-bottom-navigation {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1500;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-height: 68px;
        padding: 7px 10px calc(7px + env(safe-area-inset-bottom));
        background: white;
        border-top: 1px solid rgba(246, 247, 246, .14);
        box-shadow: 0 -8px 24px rgba(18, 21, 27, .16);
    }

    .mobile-bottom-navigation__link {
        display: flex;
        min-width: 0;
        min-height: 54px;
        align-items: center;
        justify-content: center;
        gap: 4px;
        border-radius: 10px;
        color: black;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        transition: background-color .2s ease, color .2s ease, transform .2s ease;
    }

    .mobile-bottom-navigation__link svg {
        width: 21px;
        height: 21px;
        flex: 0 0 auto;
    }

    .mobile-bottom-navigation__link:hover,
    .mobile-bottom-navigation__link:focus-visible {
        color: #FFE4DA;
        outline: none;
    }

    .mobile-bottom-navigation__link.is-active {
        background: #B86B4B;
        color: #fff;
        box-shadow: 0 5px 14px rgba(184, 107, 75, .28);
    }

    .mobile-bottom-navigation__link:active {
        transform: translateY(1px);
    }
}

@media (min-width: 1101px) {
    body.has-mobile-bottom-navigation {
        padding-bottom: 0;
    }
}