/* Neumorphic submenu (desktop flyouts + mobile drawer).
   Selectors are prefixed with "html body.genetics-body" so they win over the
   html[data-theme="light"] overrides in theme-toggle.css. */

html body.genetics-body {
  --neu-raise-lg:
    14px 14px 32px var(--neu-shadow-dark, rgba(0, 0, 0, 0.72)),
    -14px -14px 32px var(--neu-shadow-light, rgba(255, 255, 255, 0.05));
  --neu-raise-md:
    6px 6px 14px var(--neu-shadow-dark, rgba(0, 0, 0, 0.72)),
    -6px -6px 14px var(--neu-shadow-light, rgba(255, 255, 255, 0.05));
  --neu-raise-sm:
    3px 3px 8px var(--neu-shadow-dark, rgba(0, 0, 0, 0.72)),
    -3px -3px 8px var(--neu-shadow-light, rgba(255, 255, 255, 0.05));
  --neu-press-md:
    inset 5px 5px 12px var(--neu-inner-dark, rgba(0, 0, 0, 0.65)),
    inset -5px -5px 12px var(--neu-inner-light, rgba(255, 255, 255, 0.045));
  --neu-press-sm:
    inset 3px 3px 7px var(--neu-inner-dark, rgba(0, 0, 0, 0.65)),
    inset -3px -3px 7px var(--neu-inner-light, rgba(255, 255, 255, 0.045));
}

/* ── Desktop: trigger ── */
html body.genetics-body .nav-dropdown.is-open > .nav-flyout-trigger,
html body.genetics-body .nav-dropdown:focus-within > .nav-flyout-trigger {
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
  color: var(--cyan, #00E5FF) !important;
}

/* ── Desktop: panel ── */
html body.genetics-body .nav-products-panel,
html body.genetics-body .nav-flyout-panel {
  padding: 1.15rem;
  border: none;
  border-radius: 26px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-lg);
}

/* Services list */
html body.genetics-body .nav-services-list {
  display: grid;
  gap: 0.55rem;
}

html body.genetics-body .nav-services-list a {
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-sm);
  color: var(--text-primary, #fff) !important;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

html body.genetics-body .nav-services-list a:hover,
html body.genetics-body .nav-services-list a:focus-visible {
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
  color: var(--cyan, #00E5FF) !important;
}

/* Group cards */
html body.genetics-body .nav-products-grid {
  gap: 1rem;
}

html body.genetics-body .nav-products-card {
  padding: 0.9rem;
  border: none;
  border-radius: 20px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-md);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

html body.genetics-body .nav-products-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--neu-raise-lg);
}

html body.genetics-body .nav-products-icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  padding: 4px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
  color: var(--cyan, #00E5FF);
}

html body.genetics-body .nav-products-icon img {
  border-radius: 12px;
}

html body.genetics-body .nav-products-copy strong {
  color: var(--text-primary, #fff);
}

html body.genetics-body .nav-products-main:hover strong {
  color: var(--cyan, #00E5FF) !important;
}

/* Subgroup chips */
html body.genetics-body .nav-products-children {
  gap: 0.5rem;
  margin-top: 0.85rem;
}

html body.genetics-body .nav-products-children a {
  padding: 0.32rem 0.8rem;
  border: none;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-sm);
  color: var(--text-secondary, #e2e8f0) !important;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

html body.genetics-body .nav-products-children a:hover,
html body.genetics-body .nav-products-children a:focus-visible {
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
  color: var(--cyan, #00E5FF) !important;
}

/* "View all" button */
html body.genetics-body .nav-products-all,
html body.genetics-body .nav-flyout-all {
  margin-top: 1.1rem;
  padding: 0.65rem 1rem;
  border: none;
  border-radius: 14px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-sm);
  color: var(--text-secondary, #e2e8f0) !important;
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

html body.genetics-body .nav-products-all:hover,
html body.genetics-body .nav-flyout-all:hover {
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
  color: var(--cyan, #00E5FF) !important;
}

/* ── Mobile drawer ── */
html body.genetics-body .nav-mobile-drawer {
  background: var(--neu-surface, #0b1224);
}

html body.genetics-body .nav-mobile-head,
html body.genetics-body .nav-mobile-search,
html body.genetics-body .nav-mobile-footer {
  border-color: transparent;
}

html body.genetics-body .nav-mobile-close {
  border: none;
  border-radius: 12px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-sm);
}

html body.genetics-body .nav-mobile-close:hover {
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
}

html body.genetics-body .nav-mobile-search input {
  border: none;
  border-radius: 14px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-sm);
}

html body.genetics-body .nav-mobile-links {
  padding: 0.75rem 1.1rem;
}

html body.genetics-body .nav-mobile-links > li {
  margin-bottom: 0.7rem;
}

html body.genetics-body .nav-mobile-links > li > a,
html body.genetics-body .nav-mobile-accordion-btn {
  padding: 0.75rem 1rem;
  border: none;
  border-radius: 16px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-sm);
  transition: box-shadow 0.2s ease, color 0.2s ease;
}

html body.genetics-body .nav-mobile-links > li > a:active,
html body.genetics-body .nav-mobile-accordion-btn[aria-expanded="true"] {
  box-shadow: var(--neu-press-sm);
  color: var(--cyan, #00E5FF) !important;
}

html body.genetics-body .nav-mobile-sub {
  margin-top: 0.6rem;
  padding: 0.5rem 0.75rem;
  border-radius: 16px;
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-press-md);
}

html body.genetics-body .nav-mobile-sub a {
  padding: 0.5rem 0.35rem;
  border-radius: 10px;
}

html body.genetics-body .nav-mobile-product-icon {
  background: var(--neu-surface, #0b1224);
  box-shadow: var(--neu-raise-sm);
  color: var(--cyan, #00E5FF);
}