/* 顶栏、产品下拉、手机抽屉 */

.site-header { position: fixed; inset: 0 0 auto; z-index: 50; height: var(--header-h); }
.site-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgb(0 0 0 / 0.45), transparent);
  transition: background-color var(--t-fast) var(--ease), backdrop-filter var(--t-fast) var(--ease);
}
.site-header.is-solid::before, .site-header.menu-open::before, .drawer-open .site-header::before {
  background: rgb(10 15 23 / 0.86);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  box-shadow: inset 0 -1px 0 var(--line);
}
.bar {
  height: 100%; width: min(1480px, 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; gap: var(--s-6);
}

.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { height: 26px; width: auto; }
.brand__word { height: 14px; width: auto; }
.brand__cn {
  padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--line-strong);
  font-size: 14px; font-weight: 500; letter-spacing: 0.12em; color: var(--ink-mid);
}

.nav { flex: 1; display: flex; justify-content: center; height: 100%; }
.nav__list { display: flex; height: 100%; gap: clamp(8px, 1.6vw, 28px); }
.nav__item { display: flex; align-items: center; }
.nav__item--drop { position: relative; }
.nav__item--mega { position: static; }           /* 整宽面板相对顶栏定位 */
.nav__link {
  display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0 6px;
  font-size: 15px; color: var(--ink-mid); transition: color var(--t-fast) var(--ease);
}
.nav__link svg { width: 12px; height: 12px; transition: transform var(--t-fast) var(--ease); }
.nav__link:hover, .nav__item.is-open > .nav__link, .nav__link[aria-current="page"] { color: var(--ink-hi); }
.nav__item.is-open > .nav__link svg { transform: rotate(180deg); }

.actions { display: flex; align-items: center; gap: var(--s-5); flex: none; }
.phone { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1 var(--font-display); color: var(--ink-mid); letter-spacing: 0.04em; }
.phone svg { width: 16px; height: 16px; color: var(--brand-hi); }
.phone:hover { color: var(--ink-hi); }

/* 产品下拉：整宽面板，四列 */
.mega, .drop {
  position: absolute; top: 100%; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.nav__item.is-open > .mega, .nav__item.is-open > .drop {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.mega {
  left: 0; right: 0; padding: var(--s-6) 0 var(--s-7);
  background: rgb(14 21 31 / 0.97); box-shadow: 0 1px 0 var(--line) inset, 0 30px 60px -30px rgb(0 0 0 / 0.7);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
}
.mega__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.mega__col { display: grid; align-content: start; gap: var(--s-4); }
.mega__title { font: 500 12px/1 var(--font-display); letter-spacing: 0.16em; color: var(--ink-lo); }
.mega__media {
  aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #2a3647, var(--bg-2) 70%);
  display: grid; place-items: center;
}
.mega__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--ease); }
.mega__media--fit img { width: 78%; height: 82%; object-fit: contain; }
.mega__media--black { background: #000; }
.mega__col:hover .mega__media img { transform: scale(1.04); }
.mega__links { display: grid; gap: 2px; }
.mega__links a { display: grid; gap: 2px; padding: 8px 10px; margin-inline: -10px; border-radius: 8px; }
.mega__links a:hover { background: rgb(255 255 255 / 0.05); }
.mega__links b { font-size: 15px; font-weight: 500; color: var(--ink-hi); }
.mega__links span { font-size: 13px; color: var(--ink-lo); line-height: 1.5; }

.drop {
  left: 50%; translate: -50% 0; min-width: 200px; padding: 8px;
  border-radius: 10px; background: var(--bg-1); box-shadow: var(--shadow-pop);
}
.drop a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 14px; color: var(--ink-mid); }
.drop a:hover { background: rgb(255 255 255 / 0.05); color: var(--ink-hi); }

/* 手机菜单 */
.burger { display: none; width: 40px; height: 40px; margin-right: -8px; position: relative; }
.burger span {
  position: absolute; left: 10px; right: 10px; height: 1.5px; background: var(--ink-hi);
  transition: transform var(--t-fast) var(--ease);
}
.burger span:first-child { top: 15px; }
.burger span:last-child { top: 23px; }
.drawer-open .burger span:first-child { transform: translateY(4px) rotate(45deg); }
.drawer-open .burger span:last-child { transform: translateY(-4px) rotate(-45deg); }

.drawer {
  position: fixed; inset: var(--header-h) 0 0; z-index: 49; overflow-y: auto;
  padding: var(--s-4) var(--gutter) calc(var(--mbar-h) + var(--s-6));
  background: var(--bg-0); opacity: 0; visibility: hidden;
  transition: opacity var(--t-fast) var(--ease), visibility 0s linear var(--t-fast);
}
.drawer-open .drawer { opacity: 1; visibility: visible; transition-delay: 0s; }
.drawer-open { overflow: hidden; }
.drawer > a, .drawer summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 17px; cursor: pointer; list-style: none;
}
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary svg { width: 14px; height: 14px; color: var(--ink-lo); transition: transform var(--t-fast) var(--ease); }
.drawer details[open] summary svg { transform: rotate(180deg); }
.drawer details div { display: grid; padding: 6px 0 14px; border-bottom: 1px solid var(--line); }
.drawer details a { padding: 10px 0 10px 14px; font-size: 15px; color: var(--ink-mid); }

@media (max-width: 1100px) {
  .nav, .phone { display: none; }
  .bar { justify-content: space-between; }
  .burger { display: block; }
}
@media (max-width: 720px) {
  .actions .btn, .brand__cn { display: none; }
}
@media (min-width: 1101px) { .drawer { display: none; } }