/* public/assets/test/css/partials/header-v2.css */
/* CLEAN: Desktop V2 + Mobile header/backheader/tabbar (deduped) */

/* =========================
   Vars
   ========================= */
:root{
    /* Desktop header v2 */
    --hv2-h: 80px;
    --hv2-pad-x: 40px;
    --hv2-blur: 28px;

    --hv2-bg-0: rgba(255,255,255,.92);
    --hv2-bg-1: rgba(255,255,255,.82);
    --hv2-bg-2: rgba(255,255,255,.62);
    --hv2-bg-3: rgba(255,255,255,.00);

    --hv2-fade-h: 18px;

    --hv2-border: rgba(255,255,255,.42);
    --hv2-shadow: 0 12px 36px rgba(0,0,0,.10);

    --hv2-text: rgba(17,24,39,.86);
    --hv2-muted: rgba(17,24,39,.62);

    --hv2-search-w: 360px;

    --hv2-dd-w: 327px;
    --hv2-dd-pad: 10px;
    --hv2-dd-radius: 20px;

    --hv2-item-h: 52px;
    --hv2-item-gap: 10px;
    --hv2-item-radius: 16px;

    --hv2-icon: 32px;
    --hv2-icon-radius: 10px;

    --hv2-item-font: 14px;
    --hv2-pill-radius: 6px;

    /* Mobile nav system */
    --fm-mb-backbar-h: 52px;
    --fm-mb-tabbar-h: 62px;
}

@media (max-width: 1280px){
    :root{ --hv2-search-w: 300px; --hv2-pad-x: 28px; }
}
@media (max-width: 1100px){
    :root{ --hv2-search-w: 260px; --hv2-pad-x: 22px; }
}

/* =========================
   Page offset (desktop fixed header)
   ========================= */
@media (min-width: 769px){
    #page_main{ padding-top: var(--hv2-h); }
}

/* =========================
   Desktop Header V2 (#site_header_v2)
   ========================= */
.fm-header-v2{
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--hv2-h);
    z-index: 99999;
    pointer-events: auto;
}
.fm-header-v2, .fm-header-v2 *{ box-sizing: border-box; }

.fm-header-v2::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
        180deg,
        var(--hv2-bg-0) 0%,
        var(--hv2-bg-1) 44%,
        var(--hv2-bg-2) 86%,
        var(--hv2-bg-3) 100%
    );
    border-bottom: 1px solid var(--hv2-border);
    box-shadow: var(--hv2-shadow);

    backdrop-filter: blur(var(--hv2-blur)) saturate(1.15);
    -webkit-backdrop-filter: blur(var(--hv2-blur)) saturate(1.15);
    pointer-events:none;
}

.fm-header-v2::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top: 100%;
    height: var(--hv2-fade-h);
    background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 100%);
    pointer-events:none;
}

.fm-header-v2 .hv2-bar{
    position: relative;
    z-index: 1;

    height: var(--hv2-h);
    width: 100%;
    padding: 0 var(--hv2-pad-x);

    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto minmax(420px, 1fr);
    align-items: center;
    column-gap: 18px;
}

/* Left (logo) */
.fm-header-v2 .hv2-left{ justify-self: start; display:flex; align-items:center; }
.fm-header-v2 .hv2-logo{ display:flex; align-items:center; text-decoration:none; }
.fm-header-v2 .hv2-logo img{ height: 50px; width:auto; display:block; }

/* Center nav */
.fm-header-v2 .hv2-nav{
    justify-self: center;
    display:flex;
    align-items:center;
    gap: 28px;
    white-space: nowrap;
}
.fm-header-v2 .hv2-nav-item{
    display:inline-flex;
    align-items:center;
    gap: 6px;

    text-decoration:none;
    color: var(--hv2-text);

    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;

    padding: 10px 6px;
    border-radius: 10px;
}
.fm-header-v2 .hv2-nav-item:hover{
    background: rgba(255,255,255,.20);
    color: rgba(17,24,39,1);
}
.fm-header-v2 .hv2-ico{ display:block; color: var(--hv2-muted); }

/* Right */
.fm-header-v2 .hv2-right{
    justify-self: end;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap: 12px;
    min-width: 420px;
}

/* LC */
.fm-header-v2 .hv2-lc{
    display:inline-flex;
    align-items:center;
    gap: 8px;

    border: 0;
    background: transparent;
    cursor: pointer;

    padding: 10px 10px;
    border-radius: 12px;

    color: var(--hv2-text);
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 140%;
}
.fm-header-v2 .hv2-lc:hover{ background: rgba(255,255,255,.20); }

/* Search (pc) */
.fm-header-v2 .hv2-search{ position: relative; display:flex; align-items:center; }
.fm-header-v2 .hv2-search-iconbtn{
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background: rgba(255,255,255,.78);
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;
    padding: 0;
}
.fm-header-v2 .hv2-search-iconbtn:hover{ background: rgba(255,255,255,.90); }

.fm-header-v2 .hv2-search-bar{
    display:none;
    align-items:center;
    gap: 10px;

    height: 40px;
    width: var(--hv2-search-w);

    padding: 0 12px;
    border-radius: 20px;

    background: rgba(0, 0, 0, 0.10);
    border: 1px solid rgba(255,255,255,.22);

    backdrop-filter: blur(27.6px);
    -webkit-backdrop-filter: blur(27.6px);
}
.fm-header-v2 .hv2-search-input{
    width: 100%;
    border: 0;
    outline: none;
    background: transparent;

    color: #FFF;
    font-family: "Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14px;
}
.fm-header-v2 .hv2-search-input::placeholder{ color: rgba(255,255,255,.78); }

.fm-header-v2 .hv2-search.is-open .hv2-search-iconbtn{ display:none; }
.fm-header-v2 .hv2-search.is-open .hv2-search-bar{ display:flex; }

/* Disable browser search X */
.fm-header-v2 .hv2-search-input::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }
.fm-header-v2 .hv2-search-input::-webkit-search-decoration{ -webkit-appearance:none; }
.fm-header-v2 .hv2-search-input::-ms-clear{ display:none; width:0; height:0; }
.fm-header-v2 .hv2-search-input::-ms-reveal{ display:none; width:0; height:0; }

/* =========================
   PC: hv2 user avatar + dropdown
   ========================= */
@media (min-width: 769px){
    .fm-header-v2 .hv2-user{ position: relative; display:inline-flex; align-items:center; }
    .fm-header-v2 .hv2-user-btn{ border:0; background:transparent; padding:0; cursor:pointer; border-radius:999px; }

    .fm-header-v2 .hv2-avatar{
        width:36px; height:36px; border-radius:999px;
        display:flex; align-items:center; justify-content:center;
        background:#9ca3af; color:#0b1220; font-weight:800; font-size:16px;
        overflow:hidden;
        box-shadow: 0 0 0 5px rgba(255,255,255,.92), 0 14px 30px rgba(15,23,42,.16);
        transition: transform 120ms ease, box-shadow 140ms ease;
    }
    .fm-header-v2 .hv2-user-btn:hover .hv2-avatar{
        transform: translateY(-1px);
        box-shadow: 0 0 0 5px rgba(255,255,255,.95), 0 18px 42px rgba(15,23,42,.18);
    }
    .fm-header-v2 .hv2-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }

    .fm-header-v2 .hv2-user-pop{
        position:absolute;
        top: calc(100% + 12px);
        right:0;
        width:240px;
        padding:10px;
        border-radius:18px;
        background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.72) 100%);
        border:1px solid rgba(255,255,255,.55);
        box-shadow: 0 18px 46px rgba(0,0,0,.18);
        backdrop-filter: blur(22px) saturate(1.1);
        -webkit-backdrop-filter: blur(22px) saturate(1.1);
        display:none;
        z-index:999999;
    }
    .fm-header-v2 .hv2-user.is-open .hv2-user-pop{ display:block; }

    .fm-header-v2 .hv2-user-item{
        width:100%; height:46px;
        display:flex; align-items:center;
        padding:0 12px;
        border-radius:14px;
        font-family:"Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
        font-size:14px; font-weight:600;
        color: rgba(17,24,39,.92);
        text-decoration:none;
        border:1px solid rgba(17,24,39,.06);
        background: rgba(255,255,255,.72);
        cursor:pointer;
        transition: transform 120ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
    }
    .fm-header-v2 .hv2-user-item + .hv2-user-item{ margin-top:8px; }
    .fm-header-v2 .hv2-user-item:hover{
        background: rgba(255,255,255,.90);
        border-color: rgba(37,99,235,.18);
        box-shadow: 0 10px 22px rgba(37,99,235,.12);
        transform: translateY(-1px);
    }
    .fm-header-v2 .hv2-user-item--danger{
        color:#b91c1c;
        background: rgba(254,242,242,.88);
        border-color: rgba(248,113,113,.28);
    }
}

/* =========================
   PC Home Transparent Header (Desktop V2)
   ========================= */
@media (min-width: 769px){
    .fm-header-v2.hv2-home,
    body.is-home .fm-header-v2{
        --hv2-bg-0: rgba(255,255,255,.05);
        --hv2-bg-1: rgba(255,255,255,.03);
        --hv2-bg-2: rgba(255,255,255,.012);
        --hv2-bg-3: rgba(255,255,255,.00);
        --hv2-border: rgba(255,255,255,.10);
        --hv2-shadow: 0 8px 22px rgba(0,0,0,.06);
        --hv2-blur: 14px;
    }
    .fm-header-v2.hv2-home::after,
    body.is-home .fm-header-v2::after{
        background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
    }
}

/* =========================
   Visibility policy
   ========================= */
#site_header_v2{ display:none; }
#site_header{ display:none; }
#mobile_back_header{ display:none; }
#mobile_tabbar{ display:none; }

@media (min-width: 769px){
    #site_header_v2{ display:block; }
    #site_header, #mobile_back_header, #mobile_tabbar{ display:none !important; }
}
@media (max-width: 768px){
    #site_header_v2{ display:none !important; }
    #site_header{ display:block; }
    body.mb-use-backheader #mobile_back_header{ display:flex; }
    body.mb-use-backheader #site_header{ display:none !important; }
    body.mb-has-tabbar #mobile_tabbar{ display:flex; }
}

/* ===================================================================
   Mobile: TabBar / BackHeader
   =================================================================== */
@media (max-width: 768px){
    body.mb-has-tabbar{
        padding-bottom: calc(var(--fm-mb-tabbar-h) + env(safe-area-inset-bottom));
    }
    #mobile_tabbar{
        position: fixed;
        left:0; right:0; bottom:0;
        height: calc(var(--fm-mb-tabbar-h) + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background:#fff;
        border-top:1px solid rgba(15,23,42,.10);
        box-shadow: 0 -8px 24px rgba(15,23,42,.10);
        z-index: 999;
        align-items:center;
        justify-content:space-around;
    }

    body.mb-use-backheader{
        padding-top: calc(var(--fm-mb-backbar-h) + env(safe-area-inset-top));
    }
    #mobile_back_header{
        position: fixed;
        left:0; right:0; top:0;
        height: calc(var(--fm-mb-backbar-h) + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        background:#fff;
        border-bottom:1px solid rgba(15,23,42,.10);
        z-index: 1000;
        align-items:center;
        justify-content:center;
    }

    #mobile_back_header .mbh-left,
    #mobile_back_header .mbh-right{
        position:absolute;
        top: env(safe-area-inset-top);
        height: var(--fm-mb-backbar-h);
        display:flex;
        align-items:center;
    }
    #mobile_back_header .mbh-left{ left:6px; }
    #mobile_back_header .mbh-right{ right:6px; min-width:44px; gap:8px; justify-content:flex-end; }

    #mobile_back_header .mbh-back{
        width:44px; height:44px;
        display:flex; align-items:center; justify-content:center;
        border-radius:12px;
        color:#0f172a;
        text-decoration:none;
        -webkit-tap-highlight-color: transparent;
    }
    #mobile_back_header .mbh-back:active{ background: rgba(15,23,42,.06); }

    #mobile_back_header .mbh-title{
        max-width:72%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        display:flex; align-items:center; justify-content:center;
    }
    #mobile_back_header .mbh-logo{ height:33px; width:auto; display:block; object-fit:contain; }

    /* back header lc-mini icon-only */
    #mobile_back_header .lc-mini{
        width:44px; height:44px; padding:0;
        border:0;
        background:transparent;
        box-shadow:none;
        border-radius:12px;
        display:inline-flex; align-items:center; justify-content:center;
        cursor:pointer;
        -webkit-tap-highlight-color: transparent;
    }
    #mobile_back_header .lc-mini:active{ background: rgba(15,23,42,.06); }
    #mobile_back_header .lc-mini svg{ width:24px; height:24px; display:block; }
}

/* ===================================================================
   Mobile: V1 header scope (#site_header)
   =================================================================== */
#site_header a{ text-decoration:none; }
#site_header .fm-ico{ width:20px; height:20px; display:block; color: currentColor; }

@media (max-width: 768px){
    #site_header #global_nav{ display:none !important; }

    /* default (non-home): white bar */
    #site_header #main_nav{
        background:#fff;
        border-bottom:1px solid rgba(229,231,235,0.90);
        box-shadow: 0 10px 22px rgba(15,23,42,0.06);
    }

    #site_header #main_nav .inner.container{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding-left:10px !important;
        padding-right:10px !important;
    }

    #site_header #main_nav .inner{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        flex-wrap:nowrap !important;
        height:56px !important;
        padding:0 !important;
        gap:12px !important;
        position:relative !important;
    }

    #site_header #main_nav .main-left{ width:auto !important; flex:0 0 auto !important; margin-left:0 !important; }
    #site_header #main_nav #nav_logo{ position:static !important; transform:none !important; }
    #site_header #main_nav #nav_zone{ display:none !important; }

    #site_header #main_nav .menu{
        width:auto !important;
        flex:0 0 auto !important;
        min-width:0 !important;
        justify-content:flex-end !important;
        align-items:center !important;
        gap:10px !important;
    }
    #site_header #main_nav .menu > .search{ display:none !important; }

    #site_header #main_nav .menu-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:10px !important;
        margin-left:0 !important;
    }

    /* icon-only buttons */
    #site_header .icon-btn.m-search-btn,
    #site_header .lc-mini{
        width:40px !important;
        height:40px !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
        box-shadow:none !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:12px !important;
        cursor:pointer !important;
        -webkit-tap-highlight-color: transparent;
        color:#111827 !important;
    }
    #site_header .icon-btn.m-search-btn:active,
    #site_header .lc-mini:active{ background: rgba(15,23,42,0.06) !important; }

    #site_header .icon-btn.m-search-btn svg,
    #site_header .lc-mini svg{
        width:22px !important;
        height:22px !important;
        display:block !important;
    }

    /* search panel */
    #site_header #m_search_panel{
        position:absolute !important;
        left:10px !important;
        right:10px !important;
        top:56px !important;
        display:none !important;
        z-index:80 !important;
    }
    #site_header #m_search_panel.is-open{ display:block !important; }

    #site_header #m_search_panel .cpt-search{
        width:100% !important;
        height:40px !important;
        padding:0 10px 0 14px !important;
        border-radius:14px !important;
        background:#fff !important;
        border:1px solid rgba(229,231,235,0.95) !important;
        box-shadow:0 16px 30px rgba(15,23,42,0.10) !important;
    }

    /* logo size */
    #site_header #main_nav #nav_logo a{
        display:inline-flex !important;
        align-items:center !important;
        height:100% !important;
        padding:0 !important;
        line-height:1 !important;
    }
    #site_header #main_nav #nav_logo img,
    #site_header #main_nav #nav_logo img.fm-logo-img{
        height:48px !important;
        width:auto !important;
        display:block !important;
        object-fit:contain !important;
        max-width:260px !important;
    }
}

/* ===================================================================
   ✅ FINAL OVERRIDE: Mobile Home header transparent overlay (NO white line)
   命中：#site_header.fm-mh-home （你现在就是 is-xmas fm-mh-home）
   =================================================================== */
@media (max-width: 768px){

    html #site_header.fm-mh-home,
    html #site_header.is-xmas.fm-mh-home{
        position: absolute !important;
        top:0; left:0; right:0;
        z-index: 999999 !important;
        background: transparent !important;
        border:0 !important;
        box-shadow:none !important;
        padding-top: 0 !important; /* safe-area 交给 inner */
    }

    html #site_header.fm-mh-home #main_nav,
    html #site_header.is-xmas.fm-mh-home #main_nav{
        background: transparent !important;
        border:0 !important;
        border-bottom:0 !important;
        box-shadow:none !important;
    }

    html #site_header.fm-mh-home #main_nav .inner,
    html #site_header.fm-mh-home #main_nav .inner.container,
    html #site_header.is-xmas.fm-mh-home #main_nav .inner,
    html #site_header.is-xmas.fm-mh-home #main_nav .inner.container{
        background: transparent !important;
        border:0 !important;
        border-bottom:0 !important;
        box-shadow:none !important;

        height: calc(56px + env(safe-area-inset-top)) !important;
        padding-top: env(safe-area-inset-top) !important;
    }

    /* 杀掉潜在伪元素分割线（有些主题用 ::after 做 1px 线） */
    html #site_header.fm-mh-home #main_nav::before,
    html #site_header.fm-mh-home #main_nav::after,
    html #site_header.fm-mh-home #main_nav .inner::before,
    html #site_header.fm-mh-home #main_nav .inner::after{
        content:none !important;
        display:none !important;
    }

    /* 可读性（你想更干净可删） */
    html #site_header.fm-mh-home #nav_logo img,
    html #site_header.fm-mh-home .menu-actions svg{
        filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
    }

    /* 下滑变“实底”时可用（你用 JS 给 #site_header 加 .is-solid 即可） */
    /*html #site_header.fm-mh-home.is-solid #main_nav{
        background: rgba(255,255,255,.78) !important;
        border-bottom: 1px solid rgba(255,255,255,.55) !important;
        box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
        backdrop-filter: blur(12px) saturate(1.15) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.15) !important;
    }
*/
    html #site_header.fm-mh-home.is-solid #main_nav,
    html #site_header.is-xmas.fm-mh-home.is-solid #main_nav{
        background: rgba(255,255,255,.50) !important; /* ✅ 50% 白色 */
        border-bottom: 1px solid rgba(255,255,255,.28) !important;
        box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
        backdrop-filter: blur(12px) saturate(1.12) !important;
        -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
    }
}
/* =========================
   PC V2: guest CTA (Sign Up pill) + search icon size
   ========================= */
@media (min-width: 769px){

  /* 让放大镜按钮也变成 46px（对齐你设计图） */
  .fm-header-v2 .hv2-search-iconbtn{
    width:46px;
    height:46px;
    border-radius:999px;
    border:1.5px solid rgba(15,23,42,.65);
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* ✅ 未登录按钮：display:flex; height:46px; padding:0 24px; align-items:center; */
  .fm-header-v2 .hv2-auth-btn{
    display:flex;
    height:46px;
    padding:0 24px;
    align-items:center;
    justify-content:center;

    border-radius:999px;
    border:1.5px solid rgba(15,23,42,.65);
    background: rgba(255,255,255,.35);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    color: rgba(17,24,39,.92);
    font-family:"Plus Jakarta Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size:13px;
    font-weight:600;
    letter-spacing:.2px;
    white-space:nowrap;

    cursor:pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .fm-header-v2 .hv2-auth-btn:hover,
  .fm-header-v2 .hv2-search-iconbtn:hover{
    background: rgba(255,255,255,.55);
  }

  .fm-header-v2 .hv2-auth-btn:active,
  .fm-header-v2 .hv2-search-iconbtn:active{
    transform: translateY(1px);
  }

  .fm-header-v2 .hv2-auth-btn:focus-visible,
  .fm-header-v2 .hv2-search-iconbtn:focus-visible{
    outline: 2px solid rgba(37,99,235,.35);
    outline-offset: 2px;
  }

  /* 首页透明头时，底色更轻一点（避免太白块） */
  .fm-header-v2.hv2-home .hv2-auth-btn,
  body.is-home .fm-header-v2 .hv2-auth-btn,
  .fm-header-v2.hv2-home .hv2-search-iconbtn,
  body.is-home .fm-header-v2 .hv2-search-iconbtn{
    background: rgba(255,255,255,.18);
  }
}

/* =========================
   ✅ PC: Search Suggest dropdown (restore)
   依赖 JS 渲染的类：hv2-suggest / hv2-sg-*
   ========================= */
@media (min-width: 769px){

  /* 让下拉相对 hv2-search 定位 */
  .fm-header-v2 .hv2-search{ position: relative; }

  /* （可选但建议）让打开后的搜索框更接近你图里的白色输入条 */
  .fm-header-v2 .hv2-search-bar{
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 10px 22px rgba(15,23,42,.10);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
  }
  .fm-header-v2 .hv2-search-input{
    color: rgba(15,23,42,.92);
  }
  .fm-header-v2 .hv2-search-input::placeholder{
    color: rgba(15,23,42,.45);
  }
  .fm-header-v2 .hv2-ico-white{ color: rgba(15,23,42,.70); }

  .fm-header-v2 .hv2-search-close{
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    border-radius: 10px;
    background: transparent;
    cursor: pointer;
    color: rgba(15,23,42,.78);
    font-weight: 900;
    line-height: 32px;
  }
  .fm-header-v2 .hv2-search-close:hover{
    background: rgba(15,23,42,.06);
  }

  /* 下拉容器 */
  .fm-header-v2 .hv2-suggest{
    position: absolute;
    top: calc(100% + 10px); /* ✅ 你的图里是 10 */
    left: 0;
    width: 100%;                 /* ✅ 自动跟随搜索框宽度 */
    min-width: var(--hv2-dd-w);  /* ✅ 兜底 327 */
    max-width: 92vw;

    padding: var(--hv2-dd-pad);  /* ✅ 10 */
    border-radius: var(--hv2-dd-radius); /* ✅ 20 */

    /* ✅ 玻璃质感：下面有图时会“透出图片色” */
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.58);
    box-shadow: 0 18px 46px rgba(0,0,0,.18);
    backdrop-filter: blur(22px) saturate(1.12);
    -webkit-backdrop-filter: blur(22px) saturate(1.12);

    display: none;
    z-index: 999999;
    pointer-events: auto;
  }
  .fm-header-v2 .hv2-suggest.is-show{ display: block; }

  .fm-header-v2 .hv2-suggest-inner{
    display: flex;
    flex-direction: column;
    gap: var(--hv2-item-gap); /* ✅ 10 */
  }

  /* 单条 */
  .fm-header-v2 .hv2-sg-item{
    position: relative;
    overflow: hidden;

    height: var(--hv2-item-h); /* ✅ 52 */
    border-radius: var(--hv2-item-radius); /* ✅ 16 */
    padding: 0 14px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    text-decoration: none;
    color: rgba(15,23,42,.92);

    /* ✅ item 也做半透明，形成你说的“图片效果” */
    background: rgba(255,255,255,.34);
    border: 1px solid rgba(255,255,255,.36);

    transition: transform 120ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
  }

  /* ✅ 轻微左暗右亮的层（更接近你截图的层次） */
  .fm-header-v2 .hv2-sg-item::before{
    content:"";
    position:absolute;
    inset:0;
    background: linear-gradient(
      90deg,
      rgba(15,23,42,.18) 0%,
      rgba(15,23,42,.06) 56%,
      rgba(255,255,255,.00) 100%
    );
    opacity: .55;
    pointer-events:none;
  }

  .fm-header-v2 .hv2-sg-item > *{ position: relative; z-index: 1; }

  .fm-header-v2 .hv2-sg-item:hover{
    background: rgba(255,255,255,.46);
    border-color: rgba(37,99,235,.18);
    box-shadow: 0 10px 22px rgba(37,99,235,.12);
    transform: translateY(-1px);
  }

  /* 左侧：icon + 标题 */
  .fm-header-v2 .hv2-sg-left{
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
  }

  .fm-header-v2 .hv2-sg-cover{
    width: var(--hv2-icon);       /* ✅ 32 */
    height: var(--hv2-icon);
    border-radius: var(--hv2-icon-radius); /* ✅ 10 */
    object-fit: cover;
    flex: 0 0 auto;

    background: rgba(15,23,42,.10);
    box-shadow: 0 10px 20px rgba(0,0,0,.12);
  }

  /* icon 缺省（JS 用 span 占位） */
  .fm-header-v2 span.hv2-sg-cover{
    display: inline-block;
  }

  .fm-header-v2 .hv2-sg-title{
    font-size: var(--hv2-item-font); /* ✅ 14 */
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }

  /* 右侧折扣胶囊（你图里 -22% 那种） */
  .fm-header-v2 .hv2-sg-discount{
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 34px;
    padding: 0 12px;
    border-radius: 12px;

    background: #FCD34D; /* 需要更“品牌橙”就改成 #ff5a1f */
    color: rgba(15,23,42,.92);

    font-weight: 800;
    font-size: 14px;
    letter-spacing: .2px;

    box-shadow: 0 10px 18px rgba(0,0,0,.12);
    flex: 0 0 auto;
  }

  .fm-header-v2 .hv2-sg-empty{
    height: 46px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 14px;
    background: rgba(255,255,255,.30);
    border: 1px solid rgba(255,255,255,.34);
    color: rgba(15,23,42,.62);
    font-size: 13px;
    font-weight: 600;
  }
}
/* =========================================================
   HV2 — Ultra Transparent Glass (NO gray fill, NO borders)
   Append at END of header-v2.css
   ========================================================= */
@media (min-width: 769px){

  .fm-header-v2{
    /* 玻璃“几乎透明”的关键：0.001~0.01
       0 = 很多浏览器不渲染 backdrop-filter */
    --hv2-glass-a: .001;        /* 默认：几乎 0 底色 */
    --hv2-glass-a-hover: .01;   /* hover：仍然非常透 */
    --hv2-glass-blur: 16px;

    --hv2-glass-shadow: 0 18px 48px rgba(0,0,0,.18);
    --hv2-glass-shadow-hover: 0 22px 60px rgba(0,0,0,.22);
  }

  /* 首页（更暗背景）可稍微提升透明强度，不会发灰 */
  .fm-header-v2.hv2-home,
  body.is-home .fm-header-v2{
    --hv2-glass-a: .001;
    --hv2-glass-a-hover: .012;
    --hv2-glass-shadow: 0 18px 54px rgba(0,0,0,.22);
    --hv2-glass-shadow-hover: 0 24px 70px rgba(0,0,0,.26);
  }

  /* =========================
     Search icon button: “无底色”玻璃
     ========================= */
  .fm-header-v2 .hv2-search-iconbtn{
    border: 0 !important;
    outline: none !important;

    /* 关键：近似透明的背景用于触发 blur */
    background: rgba(255,255,255,var(--hv2-glass-a)) !important;

    box-shadow: var(--hv2-glass-shadow) !important;

    backdrop-filter: blur(var(--hv2-glass-blur)) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(var(--hv2-glass-blur)) saturate(1.25) !important;

    transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
  }
  .fm-header-v2 .hv2-search-iconbtn:hover{
    background: rgba(255,255,255,var(--hv2-glass-a-hover)) !important;
    box-shadow: var(--hv2-glass-shadow-hover) !important;
    transform: translateY(-1px);
  }
  .fm-header-v2 .hv2-search-iconbtn:active{ transform: translateY(0); }

  /* =========================
     Search expanded bar: 无边框 + 超透玻璃
     ========================= */
  .fm-header-v2 .hv2-search-bar{
    border: 0 !important;
    outline: none !important;

    background: rgba(255,255,255,var(--hv2-glass-a)) !important;
    box-shadow: var(--hv2-glass-shadow) !important;

    backdrop-filter: blur(calc(var(--hv2-glass-blur) + 8px)) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(calc(var(--hv2-glass-blur) + 8px)) saturate(1.25) !important;

    transition: box-shadow .18s ease, background .18s ease;
  }
  .fm-header-v2 .hv2-search.is-open .hv2-search-bar:hover{
    background: rgba(255,255,255,var(--hv2-glass-a-hover)) !important;
    box-shadow: var(--hv2-glass-shadow-hover) !important;
  }

  /* 输入文字：给你“透明控件”的可读性（首页白字，非首页深字） */
  .fm-header-v2 .hv2-search-input{ color: rgba(11,18,32,.90) !important; }
  .fm-header-v2 .hv2-search-input::placeholder{ color: rgba(11,18,32,.48) !important; }

  .fm-header-v2.hv2-home .hv2-search-input,
  body.is-home .fm-header-v2 .hv2-search-input{ color: rgba(255,255,255,.92) !important; }
  .fm-header-v2.hv2-home .hv2-search-input::placeholder,
  body.is-home .fm-header-v2 .hv2-search-input::placeholder{ color: rgba(255,255,255,.70) !important; }

  /* 关闭按钮也无底色 */
  .fm-header-v2 .hv2-search-close{
    border: 0 !important;
    background: transparent !important;
  }

  /* =========================
     User: 去掉白圈 + 按钮外壳超透明
     ========================= */
  .fm-header-v2 .hv2-user-btn{
    border: 0 !important;
    outline: none !important;

    width: 46px !important;
    height: 46px !important;
    border-radius: 999px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    background: rgba(255,255,255,var(--hv2-glass-a)) !important;
    box-shadow: var(--hv2-glass-shadow) !important;

    backdrop-filter: blur(var(--hv2-glass-blur)) saturate(1.25) !important;
    -webkit-backdrop-filter: blur(var(--hv2-glass-blur)) saturate(1.25) !important;

    transition: transform .14s ease, box-shadow .18s ease, background .18s ease;
  }
  .fm-header-v2 .hv2-user-btn:hover{
    background: rgba(255,255,255,var(--hv2-glass-a-hover)) !important;
    box-shadow: var(--hv2-glass-shadow-hover) !important;
    transform: translateY(-1px);
  }

  /* ✅ 关键：你现在的“白色边框”其实是这里的 box-shadow 画出来的 */
  .fm-header-v2 .hv2-avatar{
    box-shadow: none !important;  /* kill the white ring */
    border: 0 !important;

    width: 34px !important;
    height: 34px !important;

    overflow: hidden;
    border-radius: 999px;

    /* 头像内容本身不再做“灰底”，避免你说的发灰 */
    background: transparent !important;
  }

  /* dropdown（顺手也别发灰：超透 + 无边框） */
  .fm-header-v2 .hv2-user-pop{
    border: 0 !important;
    background: rgba(255,255,255,.06) !important; /* 依然极透，但让 blur 生效 */
    box-shadow: 0 26px 70px rgba(0,0,0,.26) !important;

    backdrop-filter: blur(22px) saturate(1.15) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.15) !important;
  }

  .fm-header-v2 .hv2-user-item{
    border: 0 !important;
    background: rgba(255,255,255,.04) !important; /* 超透，避免灰块 */
  }
  .fm-header-v2 .hv2-user-item:hover{
    background: rgba(255,255,255,.08) !important;
  }

  /* focus 专业一点（不靠边框） */
  .fm-header-v2 .hv2-search-iconbtn:focus-visible,
  .fm-header-v2 .hv2-user-btn:focus-visible{
    outline: 2px solid rgba(37,99,235,.28) !important;
    outline-offset: 3px !important;
  }
}




@media (max-width: 768px){

  /* 首页：滚动后 header 本体改成 fixed，吸顶 */
  html #site_header.fm-mh-home.is-solid,
  html #site_header.is-xmas.fm-mh-home.is-solid{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  /* 首页：滚动后 main_nav 变成 50% 白底 */
  html #site_header.fm-mh-home.is-solid #main_nav,
  html #site_header.is-xmas.fm-mh-home.is-solid #main_nav,
  html #site_header.fm-mh-home #main_nav.is-solid,
  html #site_header.is-xmas.fm-mh-home #main_nav.is-solid{
    background: rgba(255,255,255,.50) !important;
    border-bottom: 1px solid rgba(255,255,255,.28) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;
    backdrop-filter: blur(12px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(12px) saturate(1.12) !important;
  }
}



/* =========================================================
   Hero header pages: let header overlay hero section
   ========================================================= */
@media (min-width: 769px){
  body.has-hero-header #page_main{
    padding-top: 0 !important;
  }
}



/* =========================================================
   Game Detail Hero Header
   - PC: logo -> back button + taller bar
   - Mobile: logo -> back button + taller bar
   ========================================================= */

/* =========================
   PC
   ========================= */
@media (min-width: 769px){

  /* 详情页主内容顶部同步一点，不然 header 高了会显得挤 */
  body.has-hero-header-detail #page_main{
    padding-top: 92px !important;
  }

  .fm-header-v2.hv2-detail{
    height: 92px;
  }

  .fm-header-v2.hv2-detail .hv2-bar{
    height: 92px;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .fm-header-v2.hv2-detail .hv2-backbtn{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    height: 46px;
    padding: 0 16px 0 14px;
    border-radius: 999px;

    text-decoration: none;
    color: rgba(255,255,255,.94);

    background: rgba(255,255,255,.10);
    box-shadow: 0 16px 40px rgba(0,0,0,.18);

    backdrop-filter: blur(14px) saturate(1.18);
    -webkit-backdrop-filter: blur(14px) saturate(1.18);
  }

  .fm-header-v2.hv2-detail .hv2-backbtn:hover{
    background: rgba(255,255,255,.16);
  }

  .fm-header-v2.hv2-detail .hv2-backbtn__ic{
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
  }

  .fm-header-v2.hv2-detail .hv2-backbtn__txt{
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .1px;
  }
}

/* =========================
   Mobile
   ========================= */
@media (max-width: 768px){

  /* hero_header 页已经不用 mobile_back_header，这里直接调 site_header */
  body.has-hero-header-detail{
    padding-top: 0 !important;
  }

  html #site_header.fm-mh-detail #main_nav .inner,
  html #site_header.fm-mh-detail #main_nav .inner.container,
  html #site_header.is-xmas.fm-mh-detail #main_nav .inner,
  html #site_header.is-xmas.fm-mh-detail #main_nav .inner.container{
    height: calc(64px + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;
  }

  /* 搜索面板跟着下移 */
  #site_header.fm-mh-detail #m_search_panel{
    top: 64px !important;
  }

  /* 左侧 logo 位改成返回按钮 */
  #site_header.fm-mh-detail #nav_logo .mh-backbtn{
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border-radius: 12px !important;
    background: transparent !important;
    color: #111827 !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent;
  }

  #site_header.fm-mh-detail #nav_logo .mh-backbtn:active{
    background: rgba(15,23,42,.06) !important;
  }

  #site_header.fm-mh-detail #nav_logo .mh-backbtn svg{
    width: 22px !important;
    height: 22px !important;
    display: block !important;
  }

  /* 右侧两个 icon 也顺手跟高度对齐 */
  #site_header.fm-mh-detail .icon-btn.m-search-btn,
  #site_header.fm-mh-detail .lc-mini{
    width: 44px !important;
    height: 44px !important;
  }

  /* 滚动后实底状态也稍微更厚一点 */
  html #site_header.fm-mh-home.fm-mh-detail.is-solid #main_nav,
  html #site_header.is-xmas.fm-mh-home.fm-mh-detail.is-solid #main_nav{
    backdrop-filter: blur(14px) saturate(1.12) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.12) !important;
  }
}