/* 桌面端隐藏，仅手机端启用 */
.product-mobile-nav-wrapper {
    display: none;
}

@media (max-width: 959px) {
    .product-mobile-nav-wrapper {
        display: block;
        height: 0;
        overflow: visible;
        pointer-events: none;
    }

    .product-mobile-nav {
        display: flex;
        align-items: stretch;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        z-index: calc(var(--z-index-fixed) - 1);
        width: 100%;
        background-color: #fff;
        border-bottom: 1px solid #e8e8e8;
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
    }

    .product-mobile-nav.is-visible {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .product-mobile-nav__item {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        padding: 10px 4px;
        margin: 0;
        border: none;
        border-bottom: 2px solid transparent;
        background: none;
        font-family: inherit;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
        color: rgba(var(--color-text), 0.7);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.2s ease, border-color 0.2s ease;
    }

    .product-mobile-nav__item.is-active {
        color: rgb(var(--color-button-background));
        border-bottom-color: rgb(var(--color-button-background));
    }
}