/* Nova Biolabs — one shared site header (replaces the per-page navs).
   Every rule is namespaced .nb-* and scoped under header.nb-header so the many
   per-page stylesheets (.topbar, .nav, .nav-links, a:hover ...) cannot leak in. */

header.nb-header {
  position: sticky; top: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  box-sizing: border-box; width: 100%; height: 72px; margin: 0; padding: 0 clamp(20px, 3.4vw, 48px);
  background: rgba(8, 18, 32, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 0; border-bottom: 1px solid rgba(63, 208, 230, 0.16);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  view-transition-name: nova-nav;
}
header.nb-header.scrolled { background: rgba(4, 11, 21, 0.94); border-bottom-color: rgba(63, 208, 230, 0.26); box-shadow: 0 10px 34px rgba(0, 0, 0, 0.35); }

header.nb-header.nb-pinned { position: fixed; top: 0; left: 0; right: 0; }
header.nb-header a, header.nb-header button { font-family: inherit; }
header.nb-header a { text-decoration: none; }
header.nb-header a:hover { text-decoration: none; }

header.nb-header .nb-brand { display: flex; align-items: center; flex: none; }
header.nb-header .nb-brand img { display: block; height: 62px; width: auto; transition: transform 0.25s ease; }
header.nb-header .nb-brand:hover img { transform: scale(1.05); }

header.nb-header .nb-links { display: flex; align-items: center; gap: clamp(14px, 1.9vw, 30px); margin: 0 auto 0 8px; }
header.nb-header .nb-links > a, header.nb-header .nb-drop > button {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, 0.72); transition: color 0.2s;
}
header.nb-header .nb-links > a::after, header.nb-header .nb-drop > button::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #3FD0E6, #7B4DFF); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease;
}
header.nb-header .nb-links > a:hover, header.nb-header .nb-drop > button:hover, header.nb-header .nb-drop:focus-within > button { color: #fff; }
header.nb-header .nb-links > a:hover::after, header.nb-header .nb-drop > button:hover::after { transform: scaleX(1); }
header.nb-header .nb-links > a.nb-active, header.nb-header .nb-drop.nb-active > button { color: #3FD0E6; }
header.nb-header .nb-links > a.nb-active::after, header.nb-header .nb-drop.nb-active > button::after { transform: scaleX(1); }
header.nb-header .nb-drop > button svg { transition: transform 0.2s; }
header.nb-header .nb-drop.open > button svg { transform: rotate(180deg); }

header.nb-header .nb-drop { position: relative; }
header.nb-header .nb-menu {
  position: absolute; top: calc(100% + 10px); left: -18px; min-width: 190px; padding: 8px;
  background: rgba(8, 18, 32, 0.98); border: 1px solid rgba(63, 208, 230, 0.22); border-radius: 14px;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s;
}
header.nb-header .nb-drop.open .nb-menu,
header.nb-header .nb-drop:hover .nb-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.2s; }
header.nb-header .nb-menu::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px; } /* hover bridge */
header.nb-header .nb-menu a {
  display: block; padding: 10px 14px; border-radius: 9px; white-space: nowrap;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: rgba(255, 255, 255, 0.78);
}
header.nb-header .nb-menu a:hover { background: rgba(63, 208, 230, 0.12); color: #3FD0E6; }

header.nb-header .nb-right { display: flex; align-items: center; gap: 22px; flex: none; }
header.nb-header .nb-login { font-size: 12.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; color: #8E86FF; transition: color 0.2s; }
header.nb-header .nb-login:hover { color: #fff; }
header.nb-header .nb-cart {
  display: inline-flex; align-items: center; gap: 0; padding: 10px 20px; border-radius: 50px;
  border: 1.5px solid rgba(63, 208, 230, 0.55); background: rgba(63, 208, 230, 0.06);
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase; white-space: nowrap; color: #3FD0E6;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
header.nb-header .nb-cart:hover { background: #3FD0E6; color: #04121C; border-color: #3FD0E6; }
header.nb-header .nb-cart svg { flex: none; margin-right: 9px; }

header.nb-header .nb-burger { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
header.nb-header .nb-burger span { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 2px; background: #fff; transition: transform 0.3s, opacity 0.2s, top 0.3s; }
header.nb-header .nb-burger span:nth-child(1) { top: 15px; }
header.nb-header .nb-burger span:nth-child(2) { top: 21px; }
header.nb-header .nb-burger span:nth-child(3) { top: 27px; }
header.nb-header .nb-burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
header.nb-header .nb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
header.nb-header .nb-burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* full-screen menu for phones / small tablets */
.nb-mobile {
  position: fixed; inset: 0; z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px;
  padding: 90px 24px 40px; overflow-y: auto;
  background: radial-gradient(700px 420px at 80% 0%, rgba(123, 77, 255, 0.22), transparent 65%), rgba(3, 9, 18, 0.995);
  opacity: 0; visibility: hidden; overscroll-behavior: contain; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* nb-mobile-fit: centred + scrollable clips the top items once the menu is taller than the screen (Home became unreachable).
   Auto margins keep it centred when it fits and scrollable from the top when it does not. */
.nb-mobile { justify-content: flex-start; }
.nb-mobile > :first-child { margin-top: auto; }
.nb-mobile > :last-child { margin-bottom: auto; }
@media (max-height: 900px) {
  .nb-mobile { padding: 78px 24px 24px; gap: 0; }
  .nb-mobile a { padding: 7px 20px; font-size: 19px; }
  .nb-mobile .nb-m-sub { padding: 4px 20px; font-size: 14px; }
  .nb-mobile .nb-m-login { margin-top: 8px; }
  .nb-mobile .nb-m-cart { margin-top: 8px; padding: 12px 34px; }
  .nb-mobile .nb-m-social { margin-top: 14px; padding-top: 12px; }
}
.nb-mobile.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.nb-mobile a {
  display: block; padding: 11px 20px; text-align: center; text-decoration: none;
  font-size: 22px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
  opacity: 0; transform: translateY(14px); transition: opacity 0.4s ease, transform 0.4s ease, color 0.2s;
}
.nb-mobile.open a { opacity: 1; transform: none; }
.nb-mobile.open a:nth-child(2) { transition-delay: 0.04s; } .nb-mobile.open a:nth-child(3) { transition-delay: 0.08s; }
.nb-mobile.open a:nth-child(4) { transition-delay: 0.12s; } .nb-mobile.open a:nth-child(5) { transition-delay: 0.16s; }
.nb-mobile.open a:nth-child(6) { transition-delay: 0.2s; } .nb-mobile.open a:nth-child(7) { transition-delay: 0.24s; }
.nb-mobile.open a:nth-child(n+8) { transition-delay: 0.28s; }
.nb-mobile a:hover, .nb-mobile a.nb-active { color: #3FD0E6; }
.nb-mobile .nb-m-sub { font-size: 15px; font-weight: 600; letter-spacing: 1.3px; color: rgba(255, 255, 255, 0.62); padding: 8px 20px; }
.nb-mobile .nb-m-login { color: #8E86FF; font-size: 15px; margin-top: 12px; }
.nb-mobile .nb-m-cart { margin-top: 12px; padding: 14px 36px; border-radius: 50px; background: #3FD0E6; color: #04121C; font-size: 15px; }
.nb-mobile .nb-m-cart:hover { color: #04121C; filter: brightness(1.08); }
body.nb-lock { overflow: hidden; }

/* Two extra top-level tabs (Calculator, Nova Guide) need a little more room: tighten spacing on mid-size
   screens and switch to the mobile menu earlier so the cart button never spills off the right edge. */
@media (min-width: 1181px) and (max-width: 1500px) {
  header.nb-header .nb-links { gap: clamp(10px, 1vw, 16px); }
  header.nb-header .nb-links > a, header.nb-header .nb-drop > button { font-size: 11.5px; letter-spacing: 0.8px; }
  header.nb-header .nb-login { font-size: 11.5px; letter-spacing: 0.8px; }
  header.nb-header .nb-right { gap: 12px; }
}
@media (max-width: 1180px) {
  header.nb-header .nb-links, header.nb-header .nb-login { display: none; }
  header.nb-header .nb-right { margin-left: auto; gap: 8px; }
  header.nb-header .nb-burger { display: block; }
  header.nb-header { height: 64px; }
  header.nb-header .nb-brand img { height: 52px; }
  header.nb-header .nb-cart { padding: 8px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  header.nb-header, header.nb-header * , .nb-mobile, .nb-mobile a { transition: none !important; }
}

/* Phones: the floating WhatsApp button is smaller and tucked into the corner so it
   stops covering carousels, order bars and buttons. It is hard-coded (with inline
   styles) on each page, hence the attribute selector and !important. */
@media (max-width: 640px) {
  a[aria-label="Chat on WhatsApp"] { width: 46px !important; height: 46px !important; left: 12px !important; bottom: 14px !important; }
  a[aria-label="Chat on WhatsApp"] svg, a[aria-label="Chat on WhatsApp"] img { width: 23px !important; height: 23px !important; }
}

/* "New" highlight for the Nova Guide tab: its own colour (amber) plus a bold pulsing badge. This is a
   launch banner, not a per-visitor state, so it stays on for everyone (including people who already signed up)
   until it's manually removed once the guide has been out for a while. */
header.nb-header .nb-links > a.nb-new, header.nb-header .nb-links > a.nb-new.nb-active { color: #FFC24D; font-weight: 800; font-size: 14.5px; }
header.nb-header .nb-links > a.nb-new:hover { color: #FFD98A; }
header.nb-header .nb-links > a.nb-new::after { background: linear-gradient(90deg, #FFC24D, #FF7A59); }
.nb-badge { display: inline-flex; align-items: center; margin-left: 3px; padding: 4px 9px 3px; border-radius: 20px; font-size: 10.5px; font-weight: 900; letter-spacing: 1px; line-height: 1; text-transform: uppercase; color: #1B1204; background: linear-gradient(90deg, #FFC24D, #FF8A5C); transform-origin: center; will-change: transform; animation: nbBadgePulse 1.6s ease-in-out infinite; }
@keyframes nbBadgePulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,194,77,0.0), 0 0 8px 1px rgba(255,194,77,0.4); } 50% { transform: scale(1.22); box-shadow: 0 0 0 7px rgba(255,194,77,0.22), 0 0 22px 6px rgba(255,138,92,0.85); } }
@keyframes nbTabGlow { 0%, 100% { text-shadow: 0 0 0 rgba(255,194,77,0); } 50% { text-shadow: 0 0 16px rgba(255,194,77,0.85), 0 0 3px rgba(255,217,138,0.9); } }
header.nb-header .nb-links > a.nb-new, .nb-mobile a.nb-new { animation: nbTabGlow 1.6s ease-in-out infinite; }
.nb-mobile a.nb-new, .nb-mobile a.nb-new.nb-active { color: #FFC24D; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 23px; }
.nb-mobile a.nb-new .nb-badge { font-size: 13px !important; padding: 5px 11px 4px !important; }
@media (prefers-reduced-motion: reduce) { .nb-badge, header.nb-header .nb-links > a.nb-new, .nb-mobile a.nb-new { animation: none; } }