/* ==========================================================================
   顶部导航样式（电商三层布局·浅蓝大气版）— 由 header.htm 自动加载
   结构：顶部小条 topbar / logo+搜索主行 header-main / 主导航 nav
   ========================================================================== */

.header{display:block; height:170px;}
.header-condition{display:block; position:fixed; left:0; top:0; right:0; z-index:88888; background:#fff; transition:.3s;}
.header.on .header-condition{box-shadow:0 6px 20px rgba(11,37,69,.08);}

/* 公共内层宽度 */
.topbar-inner,.header-main-inner,.main-nav-inner{max-width:1400px; margin:0 auto; padding:0 28px;}
@media(max-width:1199px){.topbar-inner,.header-main-inner,.main-nav-inner{padding:0 18px;}}
@media(max-width:767px){.topbar-inner,.header-main-inner,.main-nav-inner{padding:0 10px;}}
@media(min-width:1600px){.topbar-inner,.header-main-inner,.main-nav-inner{max-width:1580px;}}

/* ---------- 顶部电商小条 ---------- */
.topbar{background:#0b2545; line-height:32px; font-size:12px;}
.topbar *{color:rgba(255,255,255,.82);}
.topbar-inner{display:flex; align-items:center; justify-content:space-between; height:32px;}
.topbar-left{color:rgba(255,255,255,.92);}
.topbar-right a{color:rgba(255,255,255,.82); margin:0 6px; transition:.3s;}
.topbar-right a:hover{color:#fff;}
.topbar-right i{font-style:normal; color:rgba(255,255,255,.4);}

/* ---------- logo + 搜索主行 ---------- */
.header-main{background:#fff; border-bottom:1px solid #eef4fb;}
.header-main-inner{display:flex; align-items:center; gap:20px; height:82px;}
.header-logo{flex-shrink:0;}
.header-logo a{display:block; line-height:34px;}
.header-logo img.pc{display:inline-block; vertical-align:middle; max-width:250px; max-height:56px;}
.header-logo img.mobile{display:none;}

.search-zone{display:flex; align-items:center; gap:14px; flex:1; min-width:0;}
.search-box{flex-shrink:0; width:340px;}
.hot-search{flex:1; min-width:0; font-size:12px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hot-search a{color:#3498db; margin:0 5px; transition:.3s;}
.hot-search a:hover{color:#0066cc;}
.search-box form{display:flex; background:#fff; border:2px solid #0066cc; border-radius:32px; overflow:hidden; box-shadow:0 6px 18px rgba(0,102,204,.12);}
.search-box input{flex:1; min-width:0; border:none; height:40px; padding:0 16px; font-size:14px; background:#fff; border-radius:32px 0 0 32px;}
.search-box button{width:78px; border:none; background:linear-gradient(135deg,#0066cc,#3498db); color:#fff; font-size:14px; letter-spacing:1px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:5px; transition:.3s;}
.search-box button:hover{background:linear-gradient(135deg,#0052a3,#0066cc);}

.header-tools{flex-shrink:0; display:flex; align-items:center; gap:14px; margin-left:auto;}
.header-tel{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; padding-left:16px; border-left:1px solid #e5ecf5;}
.header-tel i{color:#0066cc; font-size:24px;}
.header-tel .tel-label{font-size:17px; font-weight:bold; color:#0b2545; letter-spacing:1px;}
.header-tel b{font-size:22px; color:#0066cc; font-weight:bold; letter-spacing:1px;}

.header-navicon{display:none;}
.navicon-icon>a{display:block; width:40px; height:40px; line-height:40px; text-align:center; border-radius:10px; color:#0066cc; font-size:24px;}
.navicon-icon>a:hover{background:#eaf3ff;}

/* ---------- 主导航 ---------- */
nav{background:#fff; box-shadow:0 2px 10px rgba(11,37,69,.06);}
.main-nav-inner{position:relative;}
nav ul{display:flex; justify-content:space-between; align-items:stretch;}
nav ul>li{position:static; flex:1; display:flex; align-items:stretch;}
nav ul>li>a{flex:1; display:flex; align-items:center; justify-content:center; position:relative; font-size:16px; color:#333; white-space:nowrap; line-height:56px; transition:.3s;}
nav ul>li>a:before{position:absolute; left:50%; bottom:0; height:3px; width:0; content:''; background:#0066cc; transform:translateX(-50%); transition:.3s;}
nav ul>li:hover>a{color:#0066cc;}
nav ul>li:hover>a:before{width:100%;}
nav ul>li>a.on{font-weight:bold; color:#0066cc;}
nav ul>li>a.on:before{width:100%;}
nav ul>li>a .fa-angle-down{margin-left:5px; transition:transform .3s;}
nav ul>li:hover>a .fa-angle-down{transform:rotate(180deg);}

/* 传统下拉（无子栏目兜底 + 手机端手风琴） */
nav ul>li ul.submenu{position:absolute; display:none; top:100%; left:0; min-width:180px; line-height:40px; padding:10px 0; background:#fff; border:1px solid #e5ecf5; box-shadow:0 12px 30px rgba(11,37,69,.12); border-radius:0 0 8px 8px;}
nav ul>li ul.submenu>li{display:block;}
nav ul>li ul.submenu>li>a{display:block; padding:0 20px; font-size:14px; color:#333;}
nav ul>li ul.submenu>li>a:hover{background:#f5f9ff; color:#0066cc; padding-left:26px;}
nav li:hover>ul.submenu{display:block;}

/* ---------- Mega 下拉（带栏目图） ---------- */
nav ul>li.has-submenu{position:static;}
.mega-menu{position:absolute; left:0; right:0; top:100%; background:#fff; border-top:1px solid #eef4fb; box-shadow:0 18px 44px rgba(11,37,69,.14); z-index:9999; opacity:0; visibility:hidden; transform:translateY(18px); transition:all .35s ease;}
nav ul>li.has-submenu:hover .mega-menu{opacity:1; visibility:visible; transform:translateY(0);}
.mega-container{max-width:1400px; margin:0 auto; padding:32px 28px 36px; display:flex; gap:36px; align-items:stretch;}
.mega-grid{flex:1; display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.mega-card{display:flex; align-items:flex-start; gap:14px; padding:16px; border:1px solid #eef4fb; border-radius:10px; background:#fff; transition:all .3s ease; position:relative; overflow:hidden;}
.mega-card:before{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg,#0066cc,#3498db); transform:scaleY(0); transition:.3s;}
.mega-card:hover{transform:translateY(-4px); border-color:#b8d4f0; box-shadow:0 10px 26px rgba(0,102,204,.12);}
.mega-card:hover:before{transform:scaleY(1);}
.mega-card-img{flex-shrink:0; width:92px; height:68px; border-radius:8px; overflow:hidden; background:linear-gradient(135deg,#eaf3ff,#f5f9ff); display:flex; align-items:center; justify-content:center; position:relative;}
.mega-card-img i{position:absolute; font-size:30px; color:#0066cc;}
.mega-card-img img{position:relative; z-index:1; width:100%; height:100%; object-fit:cover; display:block;}
.mega-card-body{flex:1; min-width:0;}
.mega-card-body b{display:block; font-size:15px; color:#0b2545; font-weight:bold; transition:color .3s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mega-card:hover .mega-card-body b{color:#0066cc;}
.mega-card-body i{display:block; font-style:normal; font-size:12px; color:#999; line-height:1.5; margin-top:4px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mega-side{flex-shrink:0; width:300px; border-radius:12px; overflow:hidden; position:relative; background:linear-gradient(135deg,#0b2545,#0066cc); color:#fff; display:flex; flex-direction:column;}
.mega-side-img{flex:1; min-height:120px; overflow:hidden; position:relative;}
.mega-side-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s;}
.mega-side:hover .mega-side-img img{transform:scale(1.06);}
.mega-side-img:after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 30%,rgba(11,37,69,.72));}
.mega-side-body{position:absolute; left:0; right:0; bottom:0; padding:20px 22px;}
.mega-side-body h3{margin:0; font-size:19px; color:#fff; font-weight:bold;}
.mega-side-body p{font-size:12px; color:rgba(255,255,255,.85); line-height:1.6; margin-top:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.mega-side-body a{display:inline-flex; align-items:center; gap:6px; margin-top:12px; color:#fff; font-size:13px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.4); border-radius:20px; padding:6px 16px; transition:.3s;}
.mega-side-body a i{transition:.3s;}
.mega-side-body a:hover{background:#fff; color:#0066cc;}
.mega-side-body a:hover i{transform:translateX(4px);}

/* ---------- 响应式 ---------- */
@media(max-width:991px){
  .header{height:auto;}
  .header-condition{position:static;}
  .topbar{display:none;}
  .header-main-inner{flex-wrap:wrap; gap:12px; height:auto; padding-top:12px; padding-bottom:12px;}
  .header-tools{display:none;}
  .header-navicon{display:block;}
  .header-logo img.pc{max-width:200px; max-height:52px;}
  .search-zone{flex:1 1 100%; order:3; max-width:none; flex-wrap:wrap;}
  .search-box{width:100%;}
  .hot-search{flex:1 1 100%; white-space:normal;}
  .search-box form{width:100%;}
  .header-logo{order:1;}
  .header-navicon{order:2; margin-left:auto;}
  nav{display:none; background:#fff;}
  .header.nav nav{display:block;}
  .main-nav-inner{padding:0;}
  nav ul{flex-direction:column; align-items:stretch; padding:12px 0;}
  nav ul>li{position:relative; display:block;}
  nav ul>li>a{display:block; padding:13px 20px; font-size:15px; color:#0b2545; line-height:normal; border-bottom:1px solid #f2f6fc;}
  nav ul>li>a:before{display:none;}
  nav ul>li>a.on{color:#0066cc; font-weight:bold;}
  .mega-menu{display:none !important;}
  nav ul>li ul.submenu{position:static; display:none; box-shadow:none; border:none; padding:0 0 6px 16px; background:#f7fbff;}
  nav ul>li ul.submenu>li>a{display:block; padding:10px 20px; color:#333;}
  nav ul>li.has-submenu.active ul.submenu{display:block;}
  nav ul>li.has-submenu>a .fa-angle-down{float:right; line-height:inherit; transition:transform .3s;}
  nav ul>li.has-submenu.active>a .fa-angle-down{transform:rotate(180deg);}
}
@media(min-width:992px) and (max-width:1200px){
  .header-main-inner{gap:14px;}
  .header-logo img.pc{max-width:200px; max-height:50px;}
  .search-zone{flex:0 1 380px; max-width:380px; min-width:280px;}
  .hot-search{font-size:11px;}
  .header-tools{display:none;}
}
@media(max-width:767px){
  .header-logo img.pc{display:none;}
  .header-logo img.mobile{display:block; max-width:150px; max-height:46px; vertical-align:middle;}
  .search-box input{height:42px; font-size:14px;}
  .search-box button{width:92px; font-size:14px; letter-spacing:1px;}
  .hot-search{font-size:11px; white-space:normal;}
}

/* 主导航清单样式兜底 */
nav ul{list-style:none; margin:0; padding:0;}