/*
 * V2 移动端头部（所有引用 header_v2 的页面）
 * Figma：2190:2859（页顶）、2196:2（白底）、2203:331（搜索）、2198:31（菜单）
 * 尺寸单位见 mobile/css/base.css：头部组件用 var(--mu-ui)，左右边距与内容区共用 var(--m-gutter)
 */
@media (max-width: 47.99rem), (max-width: 79.99rem) and (hover: none) and (pointer: coarse) {
    /* PC 头部与占位在移动端不渲染 */
    .sep-header,
    .tops-hes {
        display: none !important;
    }

    html .v2-m-header.v2-m-only,
    html .v2-m-header-spacer.v2-m-only {
        display: block !important;
    }

    /* 占位：提示条 40 + 头部条 60；首页头部条叠在 Hero 上，只占提示条高度 */
    .v2-m-header-spacer {
        height: calc(var(--m-topbar-h) + var(--m-header-h));
    }
    body.is-transparent-header .v2-m-header-spacer {
        height: var(--m-topbar-h);
    }

    .v2-m-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        transform: translateY(0);
        transition: transform 0.3s ease;
    }
    /* 滚动后或面板展开时，提示条上移收起，仅保留头部条 */
    .v2-m-header.is-scrolled,
    .v2-m-header.is-open {
        transform: translateY(calc(-1 * var(--m-topbar-h)));
    }
    /* 与 PC 一致：向下滑隐藏整栏，向上滑复现；面板打开时不隐藏 */
    .v2-m-header.is-nav-hidden {
        transform: translateY(calc(-1 * (var(--m-topbar-h) + var(--m-header-h))));
        pointer-events: none;
    }
    .v2-m-header.is-open.is-nav-hidden {
        transform: translateY(calc(-1 * var(--m-topbar-h)));
        pointer-events: auto;
    }

    .v2-m-header *,
    .v2-m-header *::before,
    .v2-m-header *::after {
        box-sizing: border-box;
    }
    /* 元素重置用 :where 降到最低优先级，避免覆盖下方组件样式 */
    :where(.v2-m-header) button {
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        font: inherit;
        color: inherit;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    :where(.v2-m-header) ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* ---------- 提示条 2209:18 ---------- */
    .v2-m-topbar {
        display: flex;
        align-items: center;
        height: var(--m-topbar-h);
        padding: 0 var(--m-gutter);
        background: #e7f5ff;
    }
    /* 严格等比下各宽度均为单行；切到旧方案（字号下限）时窄屏最多两行 */
    .v2-m-topbar-text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin: 0;
        overflow: hidden;
        font-family: 'Gotham-Book', sans-serif;
        font-size: max(var(--m-fs-small), calc(12 * var(--mu-ui)));
        line-height: calc(14 / 12);
        color: #323232;
    }
    /* 旧站全局 a 为固定 16px，需继承提示条字号 */
    .v2-m-topbar-text a {
        font-size: inherit;
        line-height: inherit;
        font-family: 'Gotham-Bold', sans-serif;
        background: linear-gradient(90deg, #007aff 0%, #cf89ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        text-decoration: underline;
        text-decoration-color: #7f82ff;
        text-underline-offset: calc(2 * var(--mu-ui));
    }

    /* ---------- 头部条 ---------- */
    .v2-m-bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: var(--m-header-h);
        padding: 0 var(--m-gutter);
        background: #fff;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
    }
    .v2-m-header.is-scrolled:not(.is-open) .v2-m-bar {
        box-shadow: 0 calc(2 * var(--mu-ui)) calc(6 * var(--mu-ui)) rgba(29, 44, 62, 0.1);
    }
    /* 首页页顶：头部条透明，叠在 Hero 渐变上 */
    body.is-transparent-header .v2-m-header:not(.is-scrolled):not(.is-open) .v2-m-bar {
        background: transparent;
    }
    /* 面板展开：头部条底部 1px 分隔线 */
    .v2-m-header.is-open .v2-m-bar::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: #d6d6d6;
    }

    .v2-m-logo {
        display: block;
        flex-shrink: 0;
    }
    .v2-m-logo img {
        display: block;
        width: calc(148 * var(--mu-ui));
        height: calc(40 * var(--mu-ui));
    }

    .v2-m-actions {
        display: flex;
        align-items: center;
        gap: calc(30 * var(--mu-ui));
    }
    .v2-m-search-btn,
    .v2-m-menu-btn {
        position: relative;
        display: block;
        flex-shrink: 0;
        width: calc(22 * var(--mu-ui));
        height: calc(22 * var(--mu-ui));
    }
    /* 触摸热区扩到 44 */
    .v2-m-search-btn::before,
    .v2-m-menu-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }
    /*
     * 搜索：盒仍 22 与汉堡对齐；图标用 20 并略下移。
     * SVG 圆心偏上、铺满 22 时圆圈比三条线「高且重」，光学不居中。
     */
    .v2-m-search-btn {
        background: url(/uploads/image/v2/home-m/m-search.svg) 50% calc(50% + 1 * var(--mu-ui)) / calc(20 * var(--mu-ui)) no-repeat;
    }
    .v2-m-header.is-search-open .v2-m-search-btn {
        background-image: url(/uploads/image/v2/home-m/m-search-active.svg);
    }

    /*
     * 汉堡：与搜索同一套 --mu-ui 缩放（勿用 100vw/680px 的 --m-scale）。
     * 桌面缩窄窗口时部分引擎算不出无单位 scale，transform 失效会一直 22px，显得比搜索大。
     */
    .v2-m-menu-btn {
        background: none;
    }
    .v2-m-menu-icon {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
    .v2-m-menu-btn span {
        position: absolute;
        left: 0;
        width: 100%;
        height: calc(2 * var(--mu-ui));
        border-radius: calc(1 * var(--mu-ui));
        background: #323232;
        transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
    }
    .v2-m-menu-btn span:nth-child(1) {
        top: calc(2 * var(--mu-ui));
    }
    .v2-m-menu-btn span:nth-child(2) {
        top: calc(10 * var(--mu-ui));
    }
    .v2-m-menu-btn span:nth-child(3) {
        top: calc(18 * var(--mu-ui));
    }
    .v2-m-header.is-menu-open .v2-m-menu-btn span:nth-child(1) {
        top: calc(10 * var(--mu-ui));
        transform: rotate(43deg);
    }
    .v2-m-header.is-menu-open .v2-m-menu-btn span:nth-child(2) {
        opacity: 0;
    }
    .v2-m-header.is-menu-open .v2-m-menu-btn span:nth-child(3) {
        top: calc(10 * var(--mu-ui));
        transform: rotate(-43deg);
    }

    /* ---------- 搜索面板 2203:331 ---------- */
    .v2-m-search-panel,
    .v2-m-menu-panel {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        visibility: hidden;
        opacity: 0;
        transform: translateY(calc(-8 * var(--mu-ui)));
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
    }
    .v2-m-header.is-search-open .v2-m-search-panel,
    .v2-m-header.is-menu-open .v2-m-menu-panel {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
    }
    .v2-m-search-panel {
        padding: calc(30 * var(--mu-ui)) var(--m-gutter);
        box-shadow: 0 calc(6 * var(--mu-ui)) calc(12 * var(--mu-ui)) rgba(29, 44, 62, 0.08);
    }
    .v2-m-search-form {
        display: flex;
        margin: 0;
    }
    .v2-m-search-input {
        flex: 1;
        min-width: 0;
        /* 设计稿 2203:331：框高 46、字号 16 Medium，严格等比，不做字号触底放大 */
        height: max(var(--m-field-min-h), calc(46 * var(--mu-ui)));
        margin: 0;
        padding: 0 calc(12 * var(--mu-ui)) 0 calc(20 * var(--mu-ui));
        border: 0;
        border-radius: calc(6 * var(--mu-ui)) 0 0 calc(6 * var(--mu-ui));
        outline: none;
        background: #f5f5f7;
        -webkit-appearance: none;
        appearance: none;
        /* 设计稿 Gotham Medium：用专用字重文件，勿再加 font-weight 以免合成加粗 */
        font-family: 'Gotham-Medium', sans-serif;
        font-weight: normal;
        font-size: calc(16 * var(--mu-ui));
        line-height: normal;
        color: #323232;
    }
    .v2-m-search-input::placeholder {
        font-family: 'Gotham-Medium', sans-serif;
        font-weight: normal;
        font-size: calc(16 * var(--mu-ui));
        color: #8f9fb1;
        opacity: 1;
    }
    .v2-m-search-input::-webkit-input-placeholder {
        font-family: 'Gotham-Medium', sans-serif;
        font-weight: normal;
        font-size: calc(16 * var(--mu-ui));
        color: #8f9fb1;
    }
    .v2-m-search-input::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }
    .v2-m-search-submit {
        flex: 0 0 calc(56 * var(--mu-ui));
        height: max(var(--m-field-min-h), calc(46 * var(--mu-ui)));
        border-radius: 0 calc(6 * var(--mu-ui)) calc(6 * var(--mu-ui)) 0;
    }
    .v2-m-header .v2-m-search-submit {
        background: #008cff url(/uploads/image/v2/home-m/m-search-submit.svg) center / calc(22.69 * var(--mu-ui)) no-repeat;
    }
    .v2-m-header .v2-m-search-submit:active {
        background-color: #0067bb;
    }

    /* ---------- 菜单面板 2198:31 ---------- */
    /* 高度随展开内容撑开，超出视口时面板内滚动 */
    .v2-m-menu-panel {
        max-height: calc(100vh - var(--m-header-h));
        max-height: calc(100dvh - var(--m-header-h));
        padding: calc(10 * var(--mu-ui)) 0 calc(20 * var(--mu-ui));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .v2-m-nav-l1,
    .v2-m-nav-l2,
    .v2-m-nav-l3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        text-align: left;
        text-decoration: none;
        color: #323232;
        -webkit-tap-highlight-color: transparent;
    }
    .v2-m-nav-l1 {
        min-height: calc(52 * var(--mu-ui));
        padding: 0 var(--m-gutter);
        font-family: 'Gotham-Bold', sans-serif;
        /* 验收：导航字相对设计稿 16 累计 +4 → 20 */
        font-size: max(var(--m-fs-ui), calc(20 * var(--mu-ui)));
        line-height: calc(24 / 20);
        text-transform: uppercase;
    }
    .v2-m-nav-l2 {
        /* border-box 下 padding 吃进 min-height，行高直接加大才撑开；48 略大，收至 42 */
        min-height: calc(42 * var(--mu-ui));
        padding: 0 var(--m-gutter) 0 calc(var(--m-gutter) + 20 * var(--mu-ui));
        font-family: 'Gotham-Medium', sans-serif;
        font-size: max(var(--m-fs-ui), calc(20 * var(--mu-ui)));
        line-height: calc(24 / 20);
    }
    .v2-m-nav-l3 {
        min-height: calc(36 * var(--mu-ui));
        padding: 0 var(--m-gutter) 0 calc(var(--m-gutter) + 20 * var(--mu-ui));
        font-family: 'Gotham-Book', sans-serif;
        font-size: max(var(--m-fs-ui), calc(20 * var(--mu-ui)));
        line-height: calc(24 / 20);
    }
    /* 二级项之间再拉开；margin 不受 border-box 影响 */
    .v2-m-nav-l2-item + .v2-m-nav-l2-item {
        margin-top: calc(4 * var(--mu-ui));
    }
    /* 折叠项的留白放在首尾 li 上，grid 收起到 0 时不残留内边距 */
    .v2-m-nav-l2-list > li:last-child {
        padding-bottom: calc(20 * var(--mu-ui));
    }
    .v2-m-nav-l3-list {
        background: #f5f5f7;
    }
    .v2-m-nav-l3-list > li + li {
        margin-top: calc(2 * var(--mu-ui));
    }
    .v2-m-nav-l3-list > li:first-child {
        padding-top: calc(15 * var(--mu-ui));
    }
    .v2-m-nav-l3-list > li:last-child {
        padding-bottom: calc(15 * var(--mu-ui));
    }
    .v2-m-nav a.is-current,
    .v2-m-nav a:active {
        color: #008cff;
    }

    /* 箭头：收起为灰色向右，展开为深色向下（同一图形旋转） */
    .v2-m-nav-arrow {
        flex-shrink: 0;
        width: calc(11 * var(--mu-ui));
        height: calc(7 * var(--mu-ui));
        margin-left: calc(12 * var(--mu-ui));
        background: url(/uploads/image/v2/home-m/m-arrow-gray.svg) center / contain no-repeat;
        transform: rotate(90deg);
        transition: transform 0.3s ease;
    }
    .is-open > .v2-m-nav-toggle > .v2-m-nav-arrow {
        background-image: url(/uploads/image/v2/home-m/m-arrow-dark.svg);
        transform: rotate(180deg);
    }

    /* 手风琴：grid 0fr → 1fr 实现高度过渡 */
    .v2-m-nav-sub {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows 0.3s ease, margin-top 0.3s ease;
    }
    /* 一级→二级略留空；二级→三级灰底区间隔 */
    .is-open > .v2-m-nav-l1 + .v2-m-nav-sub {
        margin-top: calc(4 * var(--mu-ui));
    }
    .is-open > .v2-m-nav-l2 + .v2-m-nav-sub {
        margin-top: calc(8 * var(--mu-ui));
    }
    .v2-m-nav-sub > * {
        min-height: 0;
        overflow: hidden;
        visibility: hidden;
        transition: visibility 0s linear 0.3s;
    }
    .is-open > .v2-m-nav-sub {
        grid-template-rows: 1fr;
    }
    .is-open > .v2-m-nav-sub > * {
        visibility: visible;
        transition: visibility 0s;
    }
}