/*
 * Electrical Xpress — XStore All Departments row-aligned flyout fix
 * XStore parent CSS makes top-level mega-menu items position:static and their
 * dropdowns top:0, which anchors every right panel to the top of the entire
 * Departments menu. For this menu we intentionally make each top-level item
 * the containing block, so its flyout starts beside the hovered row.
 */
@media (min-width: 993px) {
  .et_b_header-menu .secondary-menu-wrapper .menu > li.item-design-mega-menu,
  .et_b_header-menu .secondary-menu-wrapper .menu > li.item-design-dropdown,
  .et_b_header-menu .secondary-menu-wrapper .menu > li.menu-item-has-children {
    position: relative !important;
  }

  .et_b_header-menu .secondary-menu-wrapper .menu > li.menu-item-has-children > .nav-sublist-dropdown {
    top: 0 !important;
    left: 100% !important;
    right: auto !important;
    margin-left: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
  }

  /* Keep the flyout itself usable if its content is taller than the screen. */
  .et_b_header-menu .secondary-menu-wrapper .menu > li.menu-item-has-children > .nav-sublist-dropdown {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Do not let a wide flyout create a page-level horizontal scrollbar. */
  .et_b_header-menu .secondary-menu-wrapper .menu > li.menu-item-has-children > .nav-sublist-dropdown {
    max-width: calc(100vw - 18rem - 24px);
  }
}