/* Shared navigation for the original HAOLON product pages. */
nav .nav-inner { gap: 22px; }
.nav-inner .logo { flex: 0 0 auto; white-space: nowrap; }
.nav-inner .nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); margin: 0; padding: 0; }
.nav-inner .nav-links a { font-size: 11px; letter-spacing: .065em; white-space: nowrap; }
.nav-inner .nav-cta { flex: 0 0 auto; white-space: nowrap; }
.nav-inner .video-nav-mobile { display: none; }
.nav-inner .mobile-menu-btn { display: none; }
.nav-inner a:focus-visible, .nav-inner button:focus-visible { outline: 3px solid #3b82f6; outline-offset: 4px; }

@media (max-width: 1024px) {
  body > nav { position: relative; padding: 14px 0; background: #fff; border-bottom: 1px solid #e2e8f0; }
  body > nav.js-navigation { position: fixed; padding: 14px 0; }
  nav .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding-left: 24px; padding-right: 24px; }
  .nav-inner .logo { grid-column: 1; grid-row: 1; }
  .nav-inner .nav-cta { display: block; grid-column: 2; grid-row: 1; }
  .nav-inner a.nav-cta, .nav-inner .nav-cta > a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 10px 16px !important; font-size: 10px !important; line-height: 1.2; }
  .nav-inner .nav-links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0 22px; padding: 8px 0 0; }
  .nav-inner .nav-links a { display: block; padding: 12px 0; }
  .nav-inner .video-nav-mobile { display: none; }
  .js-navigation .nav-inner { grid-template-columns: minmax(0, 1fr) auto 42px; }
  .js-navigation .nav-inner .mobile-menu-btn { display: inline-flex; grid-column: 3; grid-row: 1; width: 42px; height: 42px; align-items: center; justify-content: center; padding: 9px; border: 1px solid #dce3ed; border-radius: 8px; background: #fff; color: #0a192f; cursor: pointer; }
  .js-navigation .mobile-menu-btn svg { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
  .js-navigation .mobile-menu-btn[aria-expanded="true"] { background: #eff6ff; border-color: #1e40af; }
  .js-navigation .nav-inner .nav-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 0 24px; padding: 12px 0 2px; border-top: 1px solid #e2e8f0; }
  .js-navigation .nav-inner .nav-links[hidden] { display: none; }
  .js-navigation .nav-links a { padding: 13px 0; font-size: 12px; }
  .js-navigation.menu-open { background: #fff; box-shadow: 0 12px 22px rgba(15, 23, 42, .07); }
}

@media (max-width: 400px) {
  nav .nav-inner { padding-left: 16px; padding-right: 16px; gap: 10px; }
  .nav-inner .logo { font-size: 18px; letter-spacing: 2px; }
  .nav-inner a.nav-cta, .nav-inner .nav-cta > a { padding: 10px 12px !important; letter-spacing: .02em; }
  .js-navigation .nav-inner .nav-links { gap: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-inner a, .nav-inner button { transition: none; }
}