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

@media (max-width: 849px) {
    body.pony-design-system { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

    .pony-mobile-nav {
        position: fixed;
        z-index: 9999;
        left: 10px;
        right: 10px;
        bottom: 8px;
        display: block;
        background: rgba(255,255,255,.94);
        border: 1px solid rgba(30,24,18,.08);
        border-radius: 18px;
        box-shadow: 0 10px 35px rgba(0,0,0,.16);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }
    .pony-mobile-nav__menu {
        display: grid;
        grid-template-columns: repeat(5, minmax(0,1fr));
        align-items: end;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 7px 5px calc(7px + env(safe-area-inset-bottom));
    }
    .pony-mobile-nav__menu > li { margin: 0; min-width: 0; }
    .pony-mobile-nav__menu > li > a {
        position: relative;
        display: flex;
        min-height: 51px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        padding: 3px 1px;
        border-radius: 12px;
        color: #685e52;
        font-size: 9.5px;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        white-space: nowrap;
        transition: color var(--pony-transition), background var(--pony-transition), transform var(--pony-transition);
    }
    .pony-mobile-nav__label { display: contents; }
    .pony-mobile-nav__text { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
    .pony-mobile-nav__icon {
        display: block;
        width: 21px;
        height: 21px;
        background: currentColor;
        -webkit-mask-position: center;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
    }
    .pony-mobile-nav__icon--home { -webkit-mask-image: url('../../icons/home.svg'); mask-image: url('../../icons/home.svg'); }
    .pony-mobile-nav__icon--services { -webkit-mask-image: url('../../icons/scissors.svg'); mask-image: url('../../icons/scissors.svg'); }
    .pony-mobile-nav__icon--booking { -webkit-mask-image: url('../../icons/calendar.svg'); mask-image: url('../../icons/calendar.svg'); }
    .pony-mobile-nav__icon--collection { -webkit-mask-image: url('../../icons/collection.svg'); mask-image: url('../../icons/collection.svg'); }
    .pony-mobile-nav__icon--pricing { -webkit-mask-image: url('../../icons/pricing.svg'); mask-image: url('../../icons/pricing.svg'); }
    .pony-mobile-nav__icon--news { -webkit-mask-image: url('../../icons/news.svg'); mask-image: url('../../icons/news.svg'); }
    .pony-mobile-nav__icon--offers { -webkit-mask-image: url('../../icons/gift.svg'); mask-image: url('../../icons/gift.svg'); }
    .pony-mobile-nav__icon--account { -webkit-mask-image: url('../../icons/user.svg'); mask-image: url('../../icons/user.svg'); }

    .pony-mobile-nav__menu > li.current-menu-item > a,
    .pony-mobile-nav__menu > li.current_page_item > a,
    .pony-mobile-nav__menu > li.pony-is-active > a {
        color: #8e681f;
        background: linear-gradient(180deg, rgba(237,211,158,.28), rgba(237,211,158,.08));
    }
    .pony-mobile-nav__menu > li:nth-child(3) > a {
        margin-top: -17px;
        min-height: 61px;
        color: #241b10;
    }
    .pony-mobile-nav__menu > li:nth-child(3) .pony-mobile-nav__icon {
        width: 42px;
        height: 42px;
        padding: 10px;
        border-radius: 50%;
        background-color: #2a2014;
        box-shadow: 0 7px 20px rgba(0,0,0,.22), 0 0 0 5px #fff;
    }
}