/* ============================================================
   Category mega menu — works inside nav AND when portaled to body
   ============================================================ */

.header-nav-megamenu,
body > .header-nav-megamenu--portaled,
body > .header-nav-dropdown.header-nav-megamenu {
  box-sizing: border-box !important;
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
  white-space: normal !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #dbe6f5 !important;
  border-radius: 0 0 16px 16px !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18) !important;
  z-index: 10050 !important;
}

body > .header-nav-megamenu--portaled {
  position: fixed !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body > .header-nav-megamenu--portaled.is-mega-open,
.header-nav-megamenu.is-mega-open {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Left category rail */
.header-nav-megamenu__sidebar,
body > .header-nav-megamenu--portaled .header-nav-megamenu__sidebar {
  flex: 0 0 280px !important;
  width: 280px !important;
  max-width: 280px !important;
  min-width: 220px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 2px !important;
  padding: 12px 10px !important;
  margin: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  background: #f7fafd !important;
  border-right: 1px solid #e4edf7 !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

.header-nav-megamenu__cat,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat {
  all: unset !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  line-height: 1.35 !important;
  color: #33475f !important;
  -webkit-text-fill-color: #33475f !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  background: transparent !important;
}

.header-nav-megamenu__cat span,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
}

.header-nav-megamenu__cat i,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat i {
  font-size: 0.68rem !important;
  color: #9db4cc !important;
  -webkit-text-fill-color: #9db4cc !important;
  flex: 0 0 auto !important;
}

.header-nav-megamenu__cat:hover,
.header-nav-megamenu__cat.is-active,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat:hover,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat.is-active {
  background: #e3f1fd !important;
  color: #1185df !important;
  -webkit-text-fill-color: #1185df !important;
}

.header-nav-megamenu__cat:hover i,
.header-nav-megamenu__cat.is-active i,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat:hover i,
body > .header-nav-megamenu--portaled .header-nav-megamenu__cat.is-active i {
  color: #1185df !important;
  -webkit-text-fill-color: #1185df !important;
}

/* Right submenu panel */
.header-nav-megamenu__panel,
body > .header-nav-megamenu--portaled .header-nav-megamenu__panel {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: block !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  padding: 18px 24px 22px !important;
  margin: 0 !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
  white-space: normal !important;
}

.header-nav-megamenu__head,
body > .header-nav-megamenu--portaled .header-nav-megamenu__head {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding-bottom: 12px !important;
  margin-bottom: 14px !important;
  border-bottom: 2px solid #e8f1fa !important;
}

.header-nav-megamenu__head-title,
body > .header-nav-megamenu--portaled .header-nav-megamenu__head-title {
  display: inline-block !important;
  font-size: 1.02rem !important;
  font-weight: 800 !important;
  color: #16325f !important;
  -webkit-text-fill-color: #16325f !important;
  text-transform: uppercase !important;
}

.header-nav-megamenu__viewall,
body > .header-nav-megamenu--portaled .header-nav-megamenu__viewall {
  display: inline-block !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: #1185df !important;
  -webkit-text-fill-color: #1185df !important;
  text-decoration: none !important;
}

.header-nav-megamenu__viewall:hover,
body > .header-nav-megamenu--portaled .header-nav-megamenu__viewall:hover {
  text-decoration: underline !important;
}

.header-nav-megamenu__grid,
body > .header-nav-megamenu--portaled .header-nav-megamenu__grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px 28px !important;
  width: 100% !important;
}

.header-nav-megamenu__group,
body > .header-nav-megamenu--portaled .header-nav-megamenu__group {
  min-width: 0 !important;
  display: block !important;
}

.header-nav-megamenu__group-title,
body > .header-nav-megamenu--portaled .header-nav-megamenu__group-title {
  display: block !important;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: #17325f !important;
  -webkit-text-fill-color: #17325f !important;
  text-decoration: none !important;
  margin-bottom: 8px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid #edf3fa !important;
}

.header-nav-megamenu__group-title:hover,
body > .header-nav-megamenu--portaled .header-nav-megamenu__group-title:hover {
  color: #1185df !important;
  -webkit-text-fill-color: #1185df !important;
}

.header-nav-megamenu__link,
body > .header-nav-megamenu--portaled .header-nav-megamenu__link {
  display: block !important;
  padding: 4px 0 !important;
  font-size: 0.86rem !important;
  font-weight: 500 !important;
  color: #5a6f88 !important;
  -webkit-text-fill-color: #5a6f88 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.header-nav-megamenu__link:hover,
body > .header-nav-megamenu--portaled .header-nav-megamenu__link:hover {
  color: #1185df !important;
  -webkit-text-fill-color: #1185df !important;
}

/* Prevent generic dropdown item rules from flattening mega menu */
.header-nav-megamenu .header-nav-dropdown-item,
body > .header-nav-megamenu--portaled .header-nav-dropdown-item {
  display: none !important;
}

@media (max-width: 1250px) {
  .header-nav-megamenu__grid,
  body > .header-nav-megamenu--portaled .header-nav-megamenu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .header-nav-megamenu__sidebar,
  body > .header-nav-megamenu--portaled .header-nav-megamenu__sidebar {
    flex: 0 0 240px !important;
    width: 240px !important;
    max-width: 240px !important;
  }
}

@media (max-width: 991.98px) {
  body > .header-nav-megamenu--portaled.is-mega-open,
  .header-nav-megamenu.is-mega-open {
    flex-direction: column !important;
  }

  .header-nav-megamenu__sidebar,
  body > .header-nav-megamenu--portaled .header-nav-megamenu__sidebar {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    max-height: 34vh !important;
    border-right: none !important;
    border-bottom: 1px solid #e4edf7 !important;
  }

  .header-nav-megamenu__panel,
  body > .header-nav-megamenu--portaled .header-nav-megamenu__panel {
    max-height: 36vh !important;
    padding: 14px 16px 16px !important;
  }

  .header-nav-megamenu__grid,
  body > .header-nav-megamenu--portaled .header-nav-megamenu__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }
}