.home-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    display: flex;
    min-height: var(--hp-bottom-nav-height);
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid rgba(223, 212, 195, .72);
    background: rgba(255, 253, 247, .96);
    box-shadow: 0 -10px 28px rgba(27, 29, 24, .08);
    backdrop-filter: blur(16px);
}

.home-bottom-nav__item {
    display: grid;
    flex: 1;
    min-width: 0;
    align-content: center;
    justify-items: center;
    gap: 4px;
    padding: var(--hp-space-2) 2px;
    color: #5F665D;
    font-size: .57rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.home-bottom-nav__item:hover,
.home-bottom-nav__item.is-active {
    color: var(--hp-orange);
    text-decoration: none;
}

.home-nav-icon,
.home-nav-icon svg {
    width: 22px;
    height: 22px;
}

.home-nav-icon {
    overflow: visible;
}

.home-nav-badge {
    position: absolute;
    top: calc(var(--hp-space-1) * -1.25);
    right: calc(var(--hp-space-1) * -1.4);
    display: inline-flex;
    min-width: clamp(19px, 5vw, 24px);
    height: clamp(19px, 5vw, 24px);
    align-items: center;
    justify-content: center;
    padding: 0 var(--hp-space-1);
    border-radius: 999px;
    background: var(--hp-orange);
    color: #FFFDF7;
    font-size: var(--hp-font-xs);
    font-weight: 900;
}

@media (min-width: 421px) {
    .home-bottom-nav {
        border-top-color: var(--hp-line);
        box-shadow: 0 -8px 28px rgba(27, 29, 24, .12);
    }

    .home-bottom-nav__item {
        gap: var(--hp-space-1);
        font-size: var(--hp-font-xs);
        font-weight: 800;
    }

    .home-nav-icon,
    .home-nav-icon svg {
        width: var(--hp-icon-sm);
        height: var(--hp-icon-sm);
    }
}