/* Shared visual system for home and inner-page product mega menus.
   Their positioning remains context-specific; their presentation is shared. */
.home-page #electricalSubmenu,
.inner-page #mainNav .category-nav-mega {
  --mega-surface: #fffdf8;
  --mega-card: #f7f9fb;
  --mega-card-border: rgba(190, 145, 65, 0.28);
  --mega-line: rgba(190, 145, 65, 0.24);
  --mega-ink: #102a43;
  --mega-muted: #637286;
  --mega-gold: #b18a35;
  --mega-gold-bright: var(--industrial-yellow);
  --mega-shadow: 0 14px 34px rgba(16, 42, 67, 0.14);
}

@media (min-width: 992px) {
  .inner-page #mainNav .category-nav-mega {
    position: fixed;
    top: 163px;
    right: max(18px, calc((100vw - var(--container-wide-max)) / 2));
    left: max(18px, calc((100vw - var(--container-wide-max)) / 2));
    width: auto;
    transform: none;
  }
}

.home-page .electrical-category-heading > span,
.inner-page #mainNav .electrical-category-heading > span {
  display: grid;
  place-items: center;
}

.home-page .electrical-category-heading > span > i::before,
.inner-page #mainNav .electrical-category-heading > span > i::before {
  display: block;
  line-height: 1;
  vertical-align: 0;
}

.home-page #electricalSubmenu,
.inner-page #mainNav .category-nav-mega {
  isolation: isolate;
  border: 1px solid var(--mega-card-border) !important;
  border-top: 3px solid var(--mega-gold-bright) !important;
  border-radius: 0 0 18px 10px !important;
  background: var(--mega-surface) !important;
  box-shadow: var(--mega-shadow) !important;
  color: var(--mega-ink) !important;
  font-size: 13px !important;
}

/* Let the home category panel overlap the hero gutter and meet the navbar rule. */
@media (min-width: 992px) {
  .home-page #electricalSubmenu {
    top: -11px;
  }
}

.home-page #electricalSubmenu::before,
.home-page #electricalSubmenu::after,
.inner-page #mainNav .category-nav-mega::before,
.inner-page #mainNav .category-nav-mega::after {
  position: absolute;
  z-index: -1;
  border: 1px solid rgba(190, 145, 65, 0.1);
  border-radius: 43% 57% 60% 40% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 45% 45%, rgba(246, 197, 21, 0.08), transparent 70%);
  content: "";
  pointer-events: none;
}

.home-page #electricalSubmenu::before,
.inner-page #mainNav .category-nav-mega::before {
  top: 14px;
  left: 14px;
  width: 120px;
  height: 120px;
}

.home-page #electricalSubmenu::after,
.inner-page #mainNav .category-nav-mega::after {
  right: 14px;
  bottom: 14px;
  width: 64px;
  height: 64px;
}

.home-page #electricalSubmenu,
.inner-page #mainNav .category-nav-mega,
.home-page .electrical-category-menu,
.inner-page #mainNav .category-mega-sidebar,
.home-page .electrical-submenu-column,
.inner-page #mainNav .category-mega-group {
  font-family: var(--font-body, "Vazirmatn", Tahoma, sans-serif) !important;
  font-synthesis: none;
}

.home-page .electrical-category-menu,
.inner-page #mainNav .category-mega-sidebar {
  border-color: #e8dfce !important;
  border-radius: 12px !important;
  background: #fffdf8 !important;
  box-shadow: 0 6px 16px rgba(67, 52, 25, 0.06) !important;
  color: var(--mega-ink) !important;
  font-size: 13px !important;
}

.home-page .electrical-category-menu > button,
.inner-page #mainNav .category-mega-sidebar > button {
  min-height: 43px !important;
  padding-inline: 10px !important;
  border-color: #ece7dd !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--mega-ink) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  box-shadow: none;
}

.home-page .electrical-category-menu > button > i:first-child,
.inner-page #mainNav .category-mega-sidebar > button > i:first-child {
  color: var(--mega-gold) !important;
}

.home-page .electrical-category-menu > button > i:last-child,
.inner-page #mainNav .category-mega-sidebar > button > i:last-child {
  color: #9aa4aa !important;
}

.home-page .electrical-category-menu > button:is(:hover, :focus-visible, .active, [aria-expanded="true"]),
.inner-page #mainNav .category-mega-sidebar > button:is(:hover, :focus-visible, .active) {
  border-color: rgba(190, 145, 65, 0.28) !important;
  background: #fff6d9 !important;
  color: var(--mega-ink) !important;
  box-shadow: inset -3px 0 var(--mega-gold-bright) !important;
}

/* Give the home-page category rail a clearer, warmer card rhythm. */
@media (min-width: 992px) {
  .inner-page #mainNav .category-nav-mega {
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 8px;
    padding: 8px;
  }

  .inner-page #mainNav .category-mega-content {
    padding: 10px;
  }

  .home-page .electrical-category-menu,
  .inner-page #mainNav .category-mega-sidebar {
    padding: 10px !important;
    gap: 5px;
    border: 1px solid #e7dcc8 !important;
    border-radius: 16px !important;
    background:
      radial-gradient(circle at 100% 0, rgba(238, 197, 91, 0.13), transparent 32%),
      linear-gradient(180deg, #fffefa 0%, #fbf8f1 100%) !important;
    box-shadow: 0 12px 30px rgba(67, 52, 25, 0.09) !important;
  }

  .home-page .electrical-category-heading,
  .inner-page #mainNav .electrical-category-heading {
    min-height: 46px;
    margin: 0 1px 3px;
    padding-inline: 8px;
    justify-content: flex-start;
    direction: rtl;
    text-align: right;
    border-bottom: 1px solid #eee5d5;
    color: #19344e;
    font-size: 14px;
    letter-spacing: -0.15px;
  }

  .home-page .electrical-category-heading > span,
  .inner-page #mainNav .electrical-category-heading > span {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 29px;
    padding: 0;
    place-items: center;
    border-color: #f0d78b;
    border-radius: 9px;
    background: linear-gradient(145deg, #fff8df, #f9e9ae);
    color: #896514;
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.9);
  }

  .home-page .electrical-category-menu > button,
  .inner-page #mainNav .category-mega-sidebar > button {
    min-height: 37px !important;
    padding: 0 8px !important;
    grid-template-columns: 28px minmax(0, 1fr) 12px !important;
    gap: 8px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    color: #344a5e !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    transition:
      background-color 160ms ease,
      border-color 160ms ease,
      box-shadow 160ms ease,
      transform 160ms ease;
  }

  .home-page .electrical-category-menu > button > i:first-child,
  .inner-page #mainNav .category-mega-sidebar > button > i:first-child {
    width: 27px;
    height: 27px;
    border: 1px solid #f2e2b6;
    border-radius: 9px;
    background: #fff8e4;
    color: #a77c20 !important;
    font-size: 14px;
  }

  .home-page .electrical-category-menu > button > i:last-child,
  .inner-page #mainNav .category-mega-sidebar > button > i:last-child {
    color: #a9b1b4 !important;
    font-size: 9px;
  }

  .home-page .electrical-category-menu > button:is(:hover, :focus-visible, .active, [aria-expanded="true"]),
  .inner-page #mainNav .category-mega-sidebar > button:is(:hover, :focus-visible, .active) {
    border-color: #eee0bd !important;
    background: linear-gradient(100deg, #fffdf8, #fff5d9) !important;
    color: #173651 !important;
    box-shadow: inset -3px 0 #e8bd24, 0 3px 9px rgba(91, 68, 23, 0.06) !important;
    transform: translateX(-2px);
  }

  .home-page .electrical-category-menu > button:is(:hover, :focus-visible, .active, [aria-expanded="true"]) > i:first-child,
  .inner-page #mainNav .category-mega-sidebar > button:is(:hover, :focus-visible, .active) > i:first-child {
    border-color: #e8cf83;
    background: #ffefb7;
    color: #805b0d !important;
  }
}

.home-page .electrical-submenu-column,
.inner-page #mainNav .category-mega-group {
  position: relative !important;
  isolation: isolate;
  display: flex !important;
  min-width: 0;
  min-height: 0;
  padding: 12px 11px !important;
  flex-direction: column;
  gap: 5px !important;
  overflow: hidden !important;
  border: 1px solid var(--mega-card-border) !important;
  border-radius: 18px 10px 18px 10px !important;
  background: var(--mega-card) !important;
  box-shadow: 0 6px 16px rgba(67, 52, 25, 0.06) !important;
  color: var(--mega-ink) !important;
  font-size: 13px !important;
}

.home-page .electrical-submenu-column::before,
.inner-page #mainNav .category-mega-group::before {
  position: absolute;
  z-index: -1;
  top: -36px;
  left: -32px;
  width: 108px;
  height: 108px;
  border: 1px solid rgba(190, 145, 65, 0.1);
  border-radius: 42% 58% 60% 40% / 55% 42% 58% 45%;
  background: radial-gradient(circle at 45% 45%, rgba(246, 197, 21, 0.08), transparent 70%);
  content: "";
  pointer-events: none;
}

.home-page .electrical-submenu-column > .category-mega-title,
.inner-page #mainNav .category-mega-group > .category-mega-title {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 36px;
  min-width: 0;
  margin: 0 0 3px !important;
  padding: 0 5px 8px !important;
  align-items: center;
  border: 0 !important;
  border-bottom: 1px solid var(--mega-line) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--mega-ink) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1.5;
}

.home-page .electrical-submenu-column > a:not(.category-mega-title),
.inner-page #mainNav .category-mega-group > a:not(.category-mega-title) {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 34px !important;
  padding: 5px 8px !important;
  align-items: center;
  border: 1px solid rgba(190, 145, 65, 0.12) !important;
  border-radius: 8px 13px 8px 13px !important;
  background: rgba(255, 252, 245, 0.88) !important;
  color: #526579 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.6;
  overflow-wrap: anywhere;
  text-decoration: none;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}

.home-page .electrical-submenu-column > a:not(.category-mega-title):is(:hover, :focus-visible),
.inner-page #mainNav .category-mega-group > a:not(.category-mega-title):is(:hover, :focus-visible) {
  border-color: rgba(190, 145, 65, 0.38) !important;
  background: #fff6d9 !important;
  box-shadow: 0 4px 12px rgba(67, 52, 25, 0.08) !important;
  color: var(--mega-ink) !important;
  transform: none !important;
}

.home-page .electrical-submenu-heading,
.inner-page #mainNav .electrical-submenu-heading,
.home-page .electrical-submenu .category-mega-hint,
.inner-page #mainNav .category-mega-panels > .category-mega-hint {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 6px 12px;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--mega-line);
  border-inline-start: 3px solid var(--mega-gold-bright);
  border-radius: 10px;
  background: #f7f3e9;
  color: var(--mega-ink);
  font-size: 13px;
  font-weight: 700;
}

.home-page .electrical-submenu-heading,
.inner-page #mainNav .electrical-submenu-heading {
  display: flex;
}

.home-page .electrical-submenu-heading-copy,
.inner-page #mainNav .electrical-submenu-heading-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 11px;
}

.home-page .electrical-submenu-heading-copy > .electrical-submenu-heading-link,
.inner-page #mainNav .electrical-submenu-heading-copy > .electrical-submenu-heading-link {
  display: inline-flex;
  flex: 0 0 auto;
  color: var(--mega-ink);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.home-page .electrical-submenu-heading-link:is(:hover, :focus-visible),
.inner-page #mainNav .electrical-submenu-heading-link:is(:hover, :focus-visible) {
  color: var(--mega-ink);
  text-decoration: underline;
  text-decoration-color: rgba(16, 42, 67, 0.42);
  text-underline-offset: 3px;
}

.home-page .electrical-submenu-heading-copy > small,
.inner-page #mainNav .electrical-submenu-heading-copy > small {
  overflow: hidden;
  color: var(--mega-muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-page .electrical-submenu-heading-count,
.inner-page #mainNav .electrical-submenu-heading-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  padding: 3px 8px;
  border: 1px solid var(--mega-line);
  border-radius: 999px;
  background: #fffdf8;
  color: #80672f;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.home-page .electrical-submenu-heading-badges,
.inner-page #mainNav .electrical-submenu-heading-badges {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}

.home-page .electrical-submenu-heading-count > i,
.inner-page #mainNav .electrical-submenu-heading-count > i {
  color: var(--mega-gold);
  font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
  .home-page .electrical-submenu-column > a:not(.category-mega-title),
  .inner-page #mainNav .category-mega-group > a:not(.category-mega-title) {
    transition: none;
  }
}

/* Keep the category icon legible against the navy header in its warm active state. */
@media (min-width: 992px) {
  .inner-page #mainNav .navbar-nav > .category-nav-dropdown:is(.show, .is-mega-open) > .nav-link .nav-menu-icon {
    color: #ffd447 !important;
    -webkit-text-fill-color: #ffd447 !important;
    filter: drop-shadow(0 0 4px rgba(246, 197, 21, 0.3));
  }
}

/* Use one shipping-page-matched guide panel on every inner page. */
@media (min-width: 992px) {
  .inner-page #mainNav .quick-links-menu:not(.sales-plan-menu) {
    position: absolute !important;
    top: calc(100% + 16px) !important;
    right: 0 !important;
    left: auto !important;
    display: grid !important;
    width: min(560px, calc(100vw - 32px)) !important;
    padding: 18px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    border: 1px solid var(--mega-card-border) !important;
    border-top: 3px solid var(--mega-gold-bright) !important;
    border-radius: 0 0 20px 20px !important;
    background: linear-gradient(145deg, #fffdf8, #fff 58%, #fbf7ec) !important;
    box-shadow: var(--mega-shadow) !important;
  }

  .inner-page #mainNav .quick-links-group {
    display: grid;
    min-width: 0;
    padding: 12px;
    align-content: start;
    gap: 4px;
    border: 1px solid rgba(16, 42, 67, 0.09);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.82);
  }

  .inner-page #mainNav .quick-links-group h3 {
    margin: 0 0 5px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--mega-line);
    color: var(--mega-ink);
  }

  .inner-page #mainNav .quick-links-group a {
    min-height: 36px;
    padding: 7px 8px;
    border: 1px solid transparent;
    border-radius: 8px 13px 8px 13px;
    color: #526579;
    transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
  }

  .inner-page #mainNav .quick-links-group a:is(:hover, :focus-visible) {
    border-color: rgba(190, 145, 65, 0.2);
    background: #fff6d9;
    color: var(--mega-ink);
  }
}