/* =========================================================
   VantoShops Header + Mega Menu Professional Fix
   - Antom-like flat topbar/header rhythm
   - Full-width hover mega menu
   - Smaller logo, bolder navigation, pointer cursor
========================================================= */
:root{
  --vp-blue:#006cff;
  --vp-blue-2:#0a86ff;
  --vp-navy:#061337;
  --vp-text:#0f172a;
  --vp-muted:#64748b;
  --vp-border:#e6edf6;
  --vp-soft:#f6f9ff;
}
.vp-site-shell{position:sticky;top:0;z-index:1000;background:#fff;font-family:var(--font-sans,"PingFang SC","Microsoft YaHei",sans-serif)}
.vp-topbar{height:34px;background:linear-gradient(90deg,#0646d8 0%,#1434a5 46%,#081b68 100%);color:#fff;overflow:hidden}
.vp-topbar-inner{height:34px;max-width:1680px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:13px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.vp-topbar-dot{width:7px;height:7px;border-radius:999px;background:#5bd0ff;box-shadow:0 0 18px rgba(91,208,255,.8);display:inline-flex;flex:none}
.vp-topbar a{color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.55);line-height:1.1;cursor:pointer}
.vp-header{height:72px;background:rgba(255,255,255,.96);border-bottom:1px solid rgba(226,232,240,.95);box-shadow:0 1px 0 rgba(15,23,42,.02);backdrop-filter:blur(16px)}
.vp-header-inner{height:72px;max-width:1680px;margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.vp-brand{display:inline-flex;align-items:center;flex:none;cursor:pointer;text-decoration:none}
.vp-logo{height:25px;width:auto;display:block;object-fit:contain}
.vp-nav{display:flex;align-items:center;gap:2px;height:72px;margin-left:auto;margin-right:auto}
.vp-nav-item{height:72px;display:flex;align-items:center;position:static}
.vp-nav-link{height:72px;display:inline-flex;align-items:center;gap:6px;padding:0 16px;border:0;background:transparent;color:#233044;font-size:15px;font-weight:700;line-height:1;cursor:pointer;transition:color .16s ease,background-color .16s ease}
.vp-nav-link svg{width:13px;height:13px;transition:transform .18s ease;color:#3d4b63}
.vp-nav-item:hover .vp-nav-link,.vp-nav-item:focus-within .vp-nav-link{color:var(--vp-blue);background:rgba(0,108,255,.04)}
.vp-nav-item:hover .vp-nav-link svg,.vp-nav-item:focus-within .vp-nav-link svg{transform:rotate(180deg);color:var(--vp-blue)}
.vp-actions{display:flex;align-items:center;gap:18px;flex:none}
.vp-login{font-size:14px;font-weight:700;color:#233044;text-decoration:none;cursor:pointer}
.vp-login:hover{color:var(--vp-blue)}
.vp-primary{display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 22px;border-radius:999px;background:#050b1f;color:#fff!important;font-size:14px;font-weight:800;text-decoration:none;box-shadow:0 8px 22px rgba(5,11,31,.12);transition:transform .16s ease,background-color .16s ease;cursor:pointer}
.vp-primary:hover{background:#006cff;transform:translateY(-1px)}
.vp-mega-panel{position:fixed;left:0;right:0;top:106px;z-index:999;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility .16s ease;background:#fff;border-top:1px solid var(--vp-border);border-bottom:1px solid var(--vp-border);box-shadow:0 28px 70px rgba(15,23,42,.13)}
.vp-nav-item:hover .vp-mega-panel,.vp-nav-item:focus-within .vp-mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.vp-mega-inner{max-width:1120px;margin:0 auto;padding:28px 32px 30px;display:grid;grid-template-columns:240px 1fr;gap:44px;min-height:252px}
.vp-mega-aside{display:flex;flex-direction:column;gap:14px}
.vp-mega-kicker{font-size:20px;font-weight:800;color:#0f172a;letter-spacing:-.02em}
.vp-mega-desc{font-size:14px;line-height:1.8;color:#64748b;max-width:220px}
.vp-mega-card{margin-top:12px;border-radius:4px;background:#f5f7fb;padding:18px 18px 18px 20px;text-decoration:none;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;color:#0f172a;transition:background .16s ease,transform .16s ease;cursor:pointer}
.vp-mega-card:hover{background:#edf4ff;transform:translateY(-1px)}
.vp-mega-card strong{display:block;font-size:15px;font-weight:800;color:#172033}
.vp-mega-card span{display:block;margin-top:8px;font-size:13px;line-height:1.6;color:#64748b}
.vp-mega-card i{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:2px;background:#0b43cc;color:#fff;font-style:normal;font-size:18px;font-weight:700;flex:none}
.vp-mega-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 56px}
.vp-menu-col-title{margin-bottom:14px;font-size:15px;font-weight:800;color:#0f172a;letter-spacing:.01em}
.vp-menu-link{display:block;margin-top:14px;text-decoration:none;cursor:pointer}
.vp-menu-link b{display:block;color:#1643b8;font-size:15px;font-weight:800;line-height:1.25;transition:color .15s ease}
.vp-menu-link span{display:block;margin-top:6px;color:#64748b;font-size:13px;line-height:1.55}
.vp-menu-link:hover b{color:#006cff}
.vp-menu-link:hover span{color:#475569}
.vp-mobile-btn{display:none;align-items:center;justify-content:center;width:42px;height:42px;border-radius:12px;border:1px solid #e2e8f0;background:#fff;color:#0f172a;cursor:pointer}
.vp-mobile-menu{display:none;border-top:1px solid #e2e8f0;background:#fff;padding:18px 24px 24px;box-shadow:0 18px 45px rgba(15,23,42,.08)}
.vp-mobile-menu a{display:block;padding:12px 0;border-bottom:1px solid #eef2f7;color:#0f172a;text-decoration:none;font-size:15px;font-weight:700}
.vp-mobile-menu .vp-mobile-actions{display:flex;gap:10px;margin-top:16px}
.vp-mobile-menu .vp-mobile-actions a{flex:1;border:1px solid #e2e8f0;border-radius:999px;text-align:center;padding:11px 16px}
.vp-mobile-menu .vp-mobile-actions a:last-child{background:#050b1f;color:#fff;border-color:#050b1f}
@media (max-width:1023px){
  .vp-topbar-inner{justify-content:flex-start;padding:0 20px;font-size:12px;overflow:hidden;text-overflow:ellipsis}
  .vp-header{height:64px}.vp-header-inner{height:64px;padding:0 20px}.vp-logo{height:24px}.vp-nav,.vp-actions{display:none}.vp-mobile-btn{display:flex}.vp-mega-panel{display:none}.vp-mobile-menu.is-open{display:block}
}
@media (min-width:1024px) and (max-width:1280px){
  .vp-header-inner{padding:0 28px}.vp-nav-link{padding:0 12px;font-size:14px}.vp-mega-inner{max-width:1060px}.vp-mega-grid{gap:24px 36px}
}
/* overwrite legacy header rules from previous build */
.mega-panel{display:none!important}.nav-item{position:static!important}


/* =========================================================
   VantoShops Mega Menu Hover Stability Patch v2
   目标：鼠标滑过导航立即显示；移动到菜单区域不自动消失；导航与菜单无空隙。
========================================================= */
@media (min-width:1024px){
  .vp-header{height:70px!important;}
  .vp-header-inner{height:70px!important;}
  .vp-logo{height:22px!important;}
  .vp-nav{height:70px!important;}
  .vp-nav-item{height:70px!important;}
  .vp-nav-link{height:70px!important;font-weight:800!important;cursor:pointer!important;user-select:none;}
  .vp-nav-link *, .vp-menu-link, .vp-mega-card, .vp-login, .vp-primary{cursor:pointer!important;}

  /* 34px 顶部条 + 70px 导航条 = 104px；向上压 1px，避免中间出现 1px 缝隙 */
  .vp-mega-panel{
    top:103px!important;
    transform:translateY(0)!important;
    transition:opacity .12s ease, visibility .12s ease!important;
    z-index:1200!important;
  }

  /* 菜单向上提供一块透明桥接区域，鼠标从导航移动到菜单时不会断开 hover */
  .vp-mega-panel::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-14px;
    height:14px;
    background:transparent;
    pointer-events:auto;
  }

  .vp-nav-item:hover > .vp-mega-panel,
  .vp-nav-item:focus-within > .vp-mega-panel,
  .vp-nav-item.is-mega-open > .vp-mega-panel{
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:translateY(0)!important;
  }

  .vp-nav-item.is-mega-open > .vp-nav-link{
    color:var(--vp-blue)!important;
    background:rgba(0,108,255,.045)!important;
  }
  .vp-nav-item.is-mega-open > .vp-nav-link svg{
    transform:rotate(180deg)!important;
    color:var(--vp-blue)!important;
  }

  .vp-mega-inner{
    padding-top:22px!important;
    padding-bottom:26px!important;
  }
}
@media (max-width:1023px){
  .vp-logo{height:22px!important;}
}