.sv-mega-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: var(--sv-z-mega);
  padding-top: 0;
}

.sv-mega-panel[hidden] {
  display: none !important;
}

.sv-mega-panel__inner {
  background: var(--sv-color-surface);
  border-bottom: 1px solid var(--sv-border);
  box-shadow: var(--sv-shadow-soft);
  padding: var(--sv-space-5) var(--sv-gutter);
}

/* Desktop only: position mega relative to the full header inner width.
   Never set .sv-site-header__nav { position: relative } below the drawer
   breakpoint — that previously kept the nav in document flow (~580px header). */
@media (min-width: 1366px) {
  .sv-site-header {
    position: sticky;
  }

  .sv-site-header__inner {
    position: relative;
  }

  .sv-site-header__nav {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    max-height: none;
    overflow: visible;
  }

  .sv-mega-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
  }
}

.sv-mega-panel__heading {
  display: inline-block;
  margin-bottom: var(--sv-space-3);
  font-family: var(--sv-font-serif);
  font-size: 1.25rem;
  color: var(--sv-color-charcoal);
  text-decoration: none;
}

.sv-mega-panel__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: var(--sv-space-2) var(--sv-space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.sv-mega-panel__link {
  color: var(--sv-color-ink-soft);
  text-decoration: none;
  font-size: 0.95rem;
}

.sv-mega-panel__link:hover,
.sv-mega-panel__link:focus-visible {
  color: var(--sv-color-gold);
}

@media (min-width: 1366px) {
  .sv-mega-panel__link {
    line-height: 1.35;
    overflow-wrap: break-word;
  }
}