/* ==========================================================================
   Product menu → hierarchical cascading flyout (desktop), 2026-09-05
   Flatsome renders deep menus as flat expanded columns; this converts the
   Product tree into nested hover flyouts. Scoped to #menu-item-130 so every
   other menu is untouched, and to desktop so the mobile menu is untouched.
   ========================================================================== */
@media (min-width: 850px) {

  /* let flyouts escape the dropdown box instead of being clipped */
  .header-nav #menu-item-130 .nav-dropdown,
  .header-nav #menu-item-130 .nav-column,
  .header-nav #menu-item-130 li { overflow: visible !important; }

  /* first dropdown under Product = a simple vertical list */
  .header-nav #menu-item-130 > ul.nav-dropdown { min-width: 240px; }

  /* every item in the Product tree stacks vertically, full width */
  .header-nav #menu-item-130 ul.nav-dropdown > li,
  .header-nav #menu-item-130 ul.nav-column > li,
  .header-nav #menu-item-130 li.nav-dropdown-col {
    display: block !important;
    float: none !important;
    width: 100% !important;
    position: relative !important;
    margin: 0 !important;
  }

  /* turn the "column heading" look into normal clickable links */
  .header-nav #menu-item-130 li.nav-dropdown-col > a,
  .header-nav #menu-item-130 ul.nav-column > li > a {
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    padding: 9px 30px 9px 18px !important;
    border-bottom: 1px solid #f1f1f1;
    white-space: nowrap;
  }

  /* caret on any item that has a submenu */
  .header-nav #menu-item-130 li.menu-item-has-children > a {
    position: relative;
  }
  .header-nav #menu-item-130 li.menu-item-has-children > a::after {
    content: "\203A";                 /* › */
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    font-size: 17px; line-height: 1;
    opacity: .55;
  }

  /* nested submenus become hidden right-side flyouts */
  .header-nav #menu-item-130 li.menu-item-has-children > ul.nav-column {
    position: absolute !important;
    left: 100% !important;
    top: 0 !important;
    min-width: 240px !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
    border-radius: 0 4px 4px 4px;
    visibility: hidden;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
    z-index: 1000;
  }

  /* reveal a level on hover of its parent item */
  .header-nav #menu-item-130 li.menu-item-has-children:hover > ul.nav-column {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* hover highlight for every row */
  .header-nav #menu-item-130 ul li > a:hover {
    background: #f4f5fb !important;
    color: #2a378a !important;
  }
}