/* ===========================================
   Header — 移动端响应式样式
   断点：≤ 992px
   抽屉 UI：手风琴一级 · Collections 二级分组 · CTA 吸底
=========================================== */
@media (max-width: 992px) {

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        background: var(--color-surface);
        z-index: 1000;
    }

    :root {
        --header-offset: var(--header-height-nav);
    }

    .mobile-nav-overlay,
    .mobile-nav-drawer {
        display: block;
    }

    .header-top {
        display: none;
    }

    .header-nav {
        background: var(--color-surface) !important;
        border-color: var(--color-border) !important;
        box-shadow: 0 2px 12px rgba(51, 51, 51, 0.07) !important;
    }

    .header-brand {
        color: var(--color-primary) !important;
    }

    .header-brand-logo {
        height: 40px;
        max-width: min(180px, 52vw);
        filter: none;
    }

    .header-brand-mark {
        border-color: rgba(var(--color-accent-rgb), 0.45) !important;
    }

    .header-brand-tagline {
        color: var(--color-text-muted) !important;
    }

    .header-menu-link {
        color: var(--color-text) !important;
    }

    .header-menu-link:hover,
    .header-menu-link.is-active {
        color: var(--color-accent) !important;
        background: rgba(var(--color-accent-rgb), 0.14) !important;
    }

    .header-cta {
        background: var(--color-accent) !important;
        border-color: var(--color-accent) !important;
        color: #fff !important;
    }

    .header-cta:hover {
        background: var(--color-accent-hover) !important;
        border-color: var(--color-accent-hover) !important;
    }

    .header-mobile-toggle {
        display: flex;
        border-color: var(--color-border) !important;
    }

    .header-mobile-toggle span {
        background: var(--color-primary) !important;
        transition:
            transform 0.3s ease,
            opacity   0.3s ease,
            background 0.4s ease;
    }

    .header-mobile-toggle.is-active span:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
    }

    .header-mobile-toggle.is-active span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }

    .header-mobile-toggle.is-active span:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
    }

    .header-menu {
        display: none !important;
    }

    /*
     * 遮罩 / 抽屉：须压过 sticky 面包屑（.page-mobile-breadcrumb z:500）。
     * 打开时再抬高 .site-header、压低次顶栏，避免真机 sticky 盖在抽屉上。
     */
    .mobile-nav-overlay {
        position: fixed;
        inset: 0;
        top: var(--header-offset);
        z-index: 1100;
        background: rgba(51, 51, 51, 0.45);
        opacity: 0;
        visibility: hidden;
        transition:
            opacity    0.35s ease,
            visibility 0.35s ease;
    }

    .mobile-nav-overlay.is-visible {
        opacity: 1;
        visibility: visible;
    }

    /* ── 抽屉主体 ───────────────────────────────────────── */
    .mobile-nav-drawer {
        position: fixed;
        top: var(--header-offset);
        left: 0;
        z-index: 1101;
        width: min(320px, 86vw);
        height: calc(100dvh - var(--header-offset));
        background: var(--color-surface);
        border-right: 1px solid var(--color-border);
        box-shadow: 4px 0 28px rgba(51, 51, 51, 0.14);
        transform: translateX(-105%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .mobile-nav-drawer.is-open {
        transform: translateX(0);
    }

    body.is-mobile-nav-open .site-header {
        z-index: 1200;
    }

    body.is-mobile-nav-open .page-mobile-breadcrumb,
    body.is-mobile-nav-open .page-breadcrumb-bar {
        z-index: 1;
        pointer-events: none;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
        padding: 0;
    }

    .mobile-nav-list {
        list-style: none;
        margin: 0;
        padding: 8px 0 16px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        flex: 1 1 auto;
    }

    .mobile-nav-item {
        border-bottom: 1px solid var(--color-border);
    }

    .mobile-nav-item:first-child {
        border-top: 1px solid var(--color-border);
    }

    .mobile-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 52px;
        padding: 14px 20px;
        font-family: var(--font-sans);
        font-size: 15px;
        font-weight: 600;
        color: var(--color-text);
        text-align: left;
        text-decoration: none;
        background: transparent;
        border: none;
        cursor: pointer;
        transition: color var(--transition), background var(--transition);
    }

    .mobile-nav-link:hover,
    .mobile-nav-link.is-active,
    .mobile-nav-toggle:hover {
        color: var(--color-accent);
        background: rgba(var(--color-accent-rgb), 0.08);
    }

    .mobile-nav-link.is-active {
        box-shadow: inset 3px 0 0 var(--color-accent);
    }

    .mobile-nav-chevron {
        flex-shrink: 0;
        color: var(--color-text-muted);
        transition: transform 0.28s ease;
    }

    .mobile-nav-chevron--sm {
        width: 14px;
        height: 14px;
    }

    .mobile-nav-item.is-sub-open > .mobile-nav-row .mobile-nav-chevron,
    .mobile-nav-sub-group.is-group-open > .mobile-nav-group-toggle .mobile-nav-chevron {
        transform: rotate(90deg);
    }

    /* 一级展开：max-height 手风琴 */
    .mobile-nav-sub {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background: var(--color-bg);
        transition: max-height 0.32s ease;
    }

    .mobile-nav-item.is-sub-open > .mobile-nav-sub {
        max-height: 2000px;
    }

    .mobile-nav-sub > li {
        border-top: 1px solid var(--color-border);
    }

    .mobile-nav-sub a {
        display: block;
        padding: 13px 20px 13px 28px;
        font-size: 14px;
        font-weight: 500;
        color: var(--color-text-muted);
        text-decoration: none;
        transition: color var(--transition), background var(--transition);
    }

    .mobile-nav-sub a:hover {
        color: var(--color-accent);
        background: rgba(var(--color-accent-rgb), 0.06);
    }

    .mobile-nav-sub .mobile-nav-view-all {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        font-weight: 600;
        color: var(--color-accent);
    }

    .mobile-nav-arrow {
        flex-shrink: 0;
        color: currentColor;
    }

    /* ── Collections 二级分组 ───────────────────────────── */
    .mobile-nav-sub-group {
        border-top: 1px solid var(--color-border);
    }

    .mobile-nav-group-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
        padding: 10px 20px 10px 28px;
        font-family: var(--font-sans);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--color-accent);
        text-align: left;
        background: transparent;
        border: none;
        cursor: pointer;
    }

    .mobile-nav-sub-nested {
        list-style: none;
        margin: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        background: #f3f2f0;
        transition: max-height 0.3s ease;
    }

    .mobile-nav-sub-group.is-group-open > .mobile-nav-sub-nested {
        max-height: 1200px;
    }

    .mobile-nav-sub-nested a {
        padding-left: 40px;
        font-size: 13.5px;
    }

    /* ── CTA 吸底 ───────────────────────────────────────── */
    .mobile-nav-footer {
        flex-shrink: 0;
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        box-shadow: 0 -6px 16px rgba(51, 51, 51, 0.06);
    }

    .mobile-nav-cta {
        display: flex;
        width: 100%;
        justify-content: center;
        min-height: 46px;
        margin: 0;
        text-align: center;
    }

    body.is-mobile-nav-open {
        overflow: hidden;
    }
}