/* Existing nav.css owns the logo, grid, type, CTA pills and mobile toggle. */
.site-header { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; }
.site-header * { box-sizing: border-box; }
.site-header summary { list-style: none; cursor: pointer; }
.site-header summary::-webkit-details-marker { display: none; }
.site-header a:focus-visible, .site-header summary:focus-visible { outline: 2px solid #44adfe; outline-offset: 3px; }
.site-mobile-controls { display: none; }
.product-menu { position: relative; }
.product-menu > summary { gap: 6px; white-space: nowrap; }
.product-menu-panel { position: absolute; top: 100%; left: -18px; width: 338px; padding: 8px; border: 1px solid #303030; border-radius: 8px; background: #111; box-shadow: 0 12px 28px #0004; }
.product-menu-panel > a { display: block; padding: 14px 16px; border-radius: 4px; text-decoration: none; color: #fff; }
.product-menu-panel > a:hover { background: #222; }
.product-menu-panel strong { display: block; font-size: 15px; font-weight: 500; }
.product-menu-panel span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.6; color: #999; }
.site-skip { position: fixed; top: -100px; left: 16px; z-index: 2000; background: #fff; color: #000; padding: 10px; }
.site-skip:focus { top: 8px; }
:where(section[id],h2[id],h3[id]) { scroll-margin-top: 80px; }
@media (max-width: 768px) {
  .site-mobile-controls { display: block; justify-self: end; }
  .site-mobile-controls[open] > .mobile-menu { display: flex; }
  .site-header .mobile-menu { max-width: calc(100vw - 24px); max-height: calc(100dvh - 80px); overflow-y: auto; }
  .product-menu-mobile { width: 100%; min-width: 150px; }
  .product-menu-mobile > summary { justify-content: space-between; min-height: 44px; }
  .product-menu-mobile .product-menu-panel { position: static; width: 300px; max-width: calc(100vw - 46px); box-shadow: none; margin-bottom: 10px; padding: 4px; }
  .product-menu-mobile .product-menu-panel a { width: 100%; text-align: left; }
  .site-header .nav-container { column-gap: 10px; }
  .site-header .nav-links { gap: 8px; }
}
@media (max-width: 360px) {
  .site-header .nav-container { padding: 0 10px; column-gap: 6px; }
  .site-header .nav-links { gap: 4px; }
  .site-header .nav-link { font-size: 12px; padding-inline: 2px; }
  .site-header .nav-logo img { height: 30px; }
}

@media (min-width: 361px) and (max-width: 420px) {
  .site-header .nav-links { gap: 4px; }
}