/*
 * Echelon Hosting global storefront navigation treatment.
 * FleetCart core remains untouched.
 */
/* All Categories trigger */
.category-nav {
  /*
   * First-level category panel.
   * Keep the surface white while visually tying it to Echelon.
   */
}

.category-nav .category-nav-inner {
  background: #3B1344;
}

.category-nav .category-dropdown-wrap {
  background: #fff;
  border: 1px solid rgba(59, 19, 68, 0.22);
  border-top: 3px solid #3B1344;
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(59, 19, 68, 0.16), 0 3px 8px rgba(0, 0, 0, 0.06);
}

.category-nav .category-dropdown-wrap .category-dropdown:before {
  border-bottom-color: rgba(59, 19, 68, 0.22);
}

.category-nav .category-dropdown-wrap .category-dropdown:after {
  border-bottom-color: #fff;
}

/* First-level category rows */
.vertical-megamenu > li > .menu-item {
  color: #3B1344;
  font-weight: 500;
  transition: color 150ms ease, background-color 150ms ease;
}

.vertical-megamenu > li > .menu-item:after {
  top: 11px;
  height: 22px;
  width: 4px;
  background: #B59410;
}

.ltr .vertical-megamenu > li > .menu-item:after {
  border-radius: 0 4px 4px 0;
}

.rtl .vertical-megamenu > li > .menu-item:after {
  border-radius: 4px 0 0 4px;
}

.vertical-megamenu > li > .menu-item > .menu-item-icon,
.vertical-megamenu > li > .menu-item > i {
  color: rgba(59, 19, 68, 0.68);
}

.vertical-megamenu > li:hover > .menu-item {
  color: #3B1344;
}

.ltr .vertical-megamenu > li:hover > .menu-item {
  background: linear-gradient(90deg, rgba(181, 148, 16, 0.07) 0%, rgba(59, 19, 68, 0.055) 100%);
}

.rtl .vertical-megamenu > li:hover > .menu-item {
  background: linear-gradient(-90deg, rgba(181, 148, 16, 0.07) 0%, rgba(59, 19, 68, 0.055) 100%);
}

.vertical-megamenu > li:hover > .menu-item > .menu-item-icon,
.vertical-megamenu > li:hover > .menu-item > i {
  color: #3B1344;
}

/*
 * Second- and deeper-level flyouts.
 * White panels with a slightly stronger Echelon treatment
 * so Branded Merchandise -> Caps / Mugs reads clearly.
 */
.vertical-megamenu.mega-menu .dropdown > .sub-menu,
.horizontal-megamenu.mega-menu .dropdown > .sub-menu {
  background: #fff;
  border: 1px solid rgba(59, 19, 68, 0.22);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(59, 19, 68, 0.16), 0 4px 10px rgba(0, 0, 0, 0.06);
}

.ltr .vertical-megamenu.mega-menu .dropdown > .sub-menu,
.ltr .horizontal-megamenu.mega-menu .dropdown > .sub-menu {
  border-left: 3px solid #3B1344;
}

.rtl .vertical-megamenu.mega-menu .dropdown > .sub-menu,
.rtl .horizontal-megamenu.mega-menu .dropdown > .sub-menu {
  border-right: 3px solid #3B1344;
}

.vertical-megamenu.mega-menu .fluid-menu > .fluid-menu-wrap,
.horizontal-megamenu.mega-menu .fluid-menu > .fluid-menu-wrap {
  background: #fff;
  border: 1px solid rgba(59, 19, 68, 0.22);
  border-top: 3px solid #3B1344;
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(59, 19, 68, 0.16), 0 4px 10px rgba(0, 0, 0, 0.06);
}

/* Sub-menu links */
.vertical-megamenu .sub-menu .menu-item,
.vertical-megamenu .sub-menu a,
.horizontal-megamenu .sub-menu .menu-item,
.horizontal-megamenu .sub-menu a {
  transition: color 150ms ease, background-color 150ms ease;
}

.vertical-megamenu .sub-menu li:hover > .menu-item,
.vertical-megamenu .sub-menu li:hover > a,
.horizontal-megamenu .sub-menu li:hover > .menu-item,
.horizontal-megamenu .sub-menu li:hover > a {
  color: #3B1344;
  background: rgba(59, 19, 68, 0.06);
}