/* Keep every mobile bottom-navigation option fully visible on narrow screens. */
@media (max-width: 1199px) {
    .navigation--list {
        box-sizing: border-box !important;
        right: auto !important;
        bottom: max(10px, env(safe-area-inset-bottom, 0px)) !important;
        left: 50% !important;
        width: calc(100vw - 24px) !important;
        max-width: 520px !important;
        margin: 0 !important;
        padding: 8px max(6px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)) !important;
        overflow: visible !important;
        transform: translateX(-50%) !important;
    }

    .navigation--list .navigation__content {
        display: grid !important;
        width: 100% !important;
        max-width: 480px !important;
        min-height: 62px !important;
        margin: 0 auto !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 2px !important;
        align-items: end !important;
    }

    .navigation--list .navigation__item {
        box-sizing: border-box !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 58px !important;
        padding: 5px 1px 3px !important;
        overflow: visible !important;
        gap: 4px !important;
    }

    .navigation--list .navigation__item i {
        flex: 0 0 auto !important;
        font-size: clamp(19px, 6vw, 23px) !important;
    }

    .navigation--list .navigation__item span {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 1.2em !important;
        overflow: visible !important;
        color: inherit !important;
        font-size: clamp(9px, 2.8vw, 12px) !important;
        font-weight: 500 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        text-overflow: clip !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .navigation--list .navigation__item--home {
        width: 66px !important;
        height: 66px !important;
        margin: -22px auto 0 !important;
        border-width: 6px !important;
        transform: translateY(-4px) !important;
    }

    .navigation--list .navigation__item--home span {
        max-width: 48px !important;
        color: #ffffff !important;
        font-size: 10px !important;
        white-space: nowrap !important;
    }

    .navigation--list .navigation__item--cart .navigation__cart-badge {
        max-width: 100% !important;
    }
}

@media (max-width: 359px) {
    .navigation--list .navigation__item span {
        font-size: 9px !important;
    }

    .navigation--list .navigation__item--home {
        width: min(62px, calc((100vw - 36px) / 5)) !important;
        height: min(62px, calc((100vw - 36px) / 5)) !important;
        border-width: 5px !important;
    }

    .navigation--list .navigation__item--home span {
        font-size: 9px !important;
    }
}