/** Shopify CDN: Minification failed

Line 250:0 Unexpected "}"
Line 276:0 Unexpected "}"
Line 309:0 Unexpected "}"
Line 336:0 Unexpected "}"
Line 408:0 Unexpected "}"
Line 418:0 Unexpected "}"
Line 447:0 Unexpected "}"
Line 489:0 Unexpected "}"
Line 547:0 Unexpected "}"

**/
/* ===================== Zymbyo – Navigation (Motion theme) ===================== */
/* ------- DESKTOP (≥ 992px) ------- */
@media (min-width: 992px) {
  /* Let dropdowns render outside and stack correctly */
  [data-section-type="header"] details.site-nav__details { overflow: visible !important; }

  /* Base positioning for level 2 and 3 panels */
  [data-section-type="header"] ul.site-nav__dropdown,
  [data-section-type="header"] ul.site-nav__deep-dropdown {
    position: absolute !important;
    z-index: 9999 !important;
  }

  /* Keep menus visible while hovering OR when <details> is open */
  [data-section-type="header"] .site-nav__expanded-item:hover > details.site-nav__details > ul.site-nav__dropdown,
  [data-section-type="header"] details.site-nav__details[open] > ul.site-nav__dropdown,
  [data-section-type="header"] .site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  [data-section-type="header"] details.site-nav__details[open] > ul.site-nav__deep-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }

  /* Hover bridges so the flyout never collapses while you cross the gap */
  [data-section-type="header"] ul.site-nav__dropdown { 
    margin-top: 0 !important; 
    overflow: visible !important; 
  }
  [data-section-type="header"] ul.site-nav__dropdown::after {
    content: ""; position: absolute; top: 0; right: -18px; width: 18px; height: 100%;
    background: transparent; pointer-events: auto; z-index: 10000;
  }
  [data-section-type="header"] ul.site-nav__deep-dropdown::before {
    content: ""; position: absolute; top: 0; left: -18px; width: 18px; height: 100%;
    background: transparent; pointer-events: auto;
  }
  [data-section-type="header"] .site-nav__deep-dropdown-trigger { position: relative !important; }

  /* Neutralize Motion wrappers so our glass shows */
  .header__dropdown, .mega-menu, .mega-menu__panel, .header-dropdown, .motion-fade,
  [data-header-overlay="true"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    transition: none !important;
  }

  /* Panels – unified glass look */
  [data-section-type="header"] ul.site-nav__dropdown,
  [data-section-type="header"] ul.site-nav__deep-dropdown {
    background-image: linear-gradient(145deg,rgba(255,255,255,.85) 0%,rgba(245,245,255,.70) 60%,rgba(255,255,255,.65) 100%) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    backdrop-filter: blur(14px) !important;
    border: 1px solid rgba(0,0,0,.06) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
    overflow: hidden !important;
    transition: opacity .2s ease, transform .2s ease !important;
  }

  /* Position of level-3 flyout */
  [data-section-type="header"] ul.site-nav__deep-dropdown { 
    top: 0 !important; left: 100% !important; margin-left: 8px !important; 
  }

  /* Links inside panels */
  [data-section-type="header"] ul.site-nav__dropdown a,
  [data-section-type="header"] ul.site-nav__deep-dropdown a {
    color: #111 !important; font-weight: 500 !important; padding: 10px 18px !important; background: transparent !important;
  }
  /* Slightly tighter third-level spacing */
  [data-section-type="header"] ul.site-nav__deep-dropdown a {
    padding: 8px 18px !important; line-height: 1.2 !important;
  }

  /* ====== BLUE HOVER (panels) ====== */
  [data-section-type="header"] .site-nav__dropdown-link--second-level:hover,
  [data-section-type="header"] summary.site-nav__dropdown-link--second-level:hover,
  [data-section-type="header"] summary.site-nav__dropdown-link--has-children:hover,
  [data-section-type="header"] ul.site-nav__dropdown a:hover,
  [data-section-type="header"] ul.site-nav__deep-dropdown a:hover,
  [data-section-type="header"] .site-nav__deep-dropdown-trigger > details[open] > summary.site-nav__dropdown-link--second-level,
  [data-section-type="header"] .site-nav__deep-dropdown-trigger > details[open] > summary.site-nav__dropdown-link--has-children {
    background-image: linear-gradient(90deg, rgba(0,191,255,.18) 0%, rgba(138,43,226,.18) 100%) !important;
    color: #1e8ac3 !important;
    box-shadow: inset 0 0 12px rgba(30,138,195,.25) !important;
    border-radius: 8px !important;
  }

  /* ====== TOP-LEVEL TAB rounding + tint on hover/open ====== */
  .site-nav__expanded-item > details.site-nav__details > summary.site-nav__link {
    border-radius: 12px !important; transition: background .2s ease !important;
  }
  .site-nav__expanded-item:hover > details.site-nav__details > summary.site-nav__link,
  .site-nav__expanded-item > details[open] > summary.site-nav__link {
    background: rgba(255,255,255,.15) !important;
    -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important;
  }

  /* Header stability (no jump when menus open) */
  .site-nav__expanded-item { position: relative !important; }
  .header-layout { align-items: center !important; }
  .site-header, .header-layout { min-height: 82px !important; }
}

/* ------- MOBILE (≤ 991px) – one consistent font size ------- */
@media (max-width: 991px) {
  #NavDrawer { --z-mobile-size: 15px; --z-mobile-lh: 1.35; }

  #NavDrawer, #NavDrawer *, #NavDrawer a, #NavDrawer summary,
  #NavDrawer .link, #NavDrawer .site-nav__link,
  #NavDrawer .site-nav__dropdown-link, #NavDrawer .mobile-nav__link,
  #NavDrawer .menu-drawer__menu a, #NavDrawer .menu-drawer__menu summary {
    font-size: var(--z-mobile-size) !important;
    line-height: var(--z-mobile-lh) !important;
    font-weight: 500 !important;
  }

  #NavDrawer [class*="heading"], #NavDrawer .h1, #NavDrawer .h2, #NavDrawer .h3, #NavDrawer .title {
    font-size: var(--z-mobile-size) !important; line-height: var(--z-mobile-lh) !important; font-weight: 600 !important; margin: 0 !important;
  }

  #NavDrawer li a, #NavDrawer li summary { padding-top: 10px !important; padding-bottom: 10px !important; }

  /* ensure details-driven submenus show/hide without Motion’s animations interfering */
  #NavDrawer details > ul, #NavDrawer details > .menu-drawer__submenu, #NavDrawer details > .submenu { display: none !important; }
  #NavDrawer details[open] > ul, #NavDrawer details[open] > .menu-drawer__submenu, #NavDrawer details[open] > .submenu { display: block !important; }

  #NavDrawer summary { cursor: pointer; pointer-events: auto !important; }
  #NavDrawer [style*="opacity"], #NavDrawer [style*="visibility"] { opacity: 1 !important; visibility: visible !important; }
}

/* ===================== Recharge widget (unchanged) ===================== */
.rc-subscription-details__shipping,
.recharge-subscription__shipping,
.recharge-cart__shipping-text { display: none !important; }
/* === Zymbyo: FORCE BLUE HOVER ON DROPDOWNS (Desktop) === */
@media (min-width: 992px) {
  /* 2nd-level items */
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown li > a:hover,
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown li > summary.site-nav__dropdown-link--second-level:hover,
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown li > summary.site-nav__dropdown-link--has-children:hover,

  /* Neutralize Motion’s own hover overlays if present */
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown li > a:hover::after,
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown li > a:hover::after,
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown li > summary:hover::after {
    background: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
  /* The flyout itself (hidden by default, sits to the right) */
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    margin-left: 8px !important;
    display: none;                 /* show via rules below */
    z-index: 10000 !important;
    pointer-events: auto !important;
  }

  /* Show the flyout when:
     - the 2nd-level item is hovered
     - its <details> is open/hovered
     - OR the flyout itself is hovered (so it doesn't vanish while crossing) */
  .header-wrapper [data-section-type="header"]
  .site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  .header-wrapper [data-section-type="header"]
  .site-nav__deep-dropdown-trigger > details.site-nav__details:hover > ul.site-nav__deep-dropdown,
  .header-wrapper [data-section-type="header"]
  ul.site-nav__deep-dropdown:hover,
  .header-wrapper [data-section-type="header"]
  .site-nav__deep-dropdown-trigger > details.site-nav__details[open] > ul.site-nav__deep-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  /* Don’t clip the flyout & add tiny “bridges” to prevent flicker */
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown {
    position: relative !important;
    overflow: visible !important;
  }
  .header-wrapper [data-section-type="header"] .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;           /* bridge width */
    width: 16px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -16px;            /* matching bridge on flyout */
    width: 16px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
}

  /* Place flyout to the right, hide by default (so we control show state) */
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown{
    position:absolute !important;
    top:0 !important; left:100% !important; margin-left:8px !important;
    z-index:10000 !important;
    display:none !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important;
  }

  /* Don’t clip the flyout */
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown{
    overflow:visible !important;
  }

  /* Show the flyout while hovering the trigger OR the flyout itself */
  .header-wrapper [data-section-type="header"] .site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown:hover{
    display:block !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; transform:none !important;
  }


  /* Kill Motion’s fade/slide that can keep it “invisible” */
  .header-wrapper .motion-fade,
  .header-wrapper [data-section-type="header"] .motion-fade{
    opacity:1 !important; transform:none !important; transition:none !important; visibility:visible !important;
  }
}

  /* ✅ Re-show when ANY part of the 2nd-level <li> is hovered (robust),
     OR when the flyout itself is hovered,
     OR when our JS adds .z-flyout-open to the trigger. */
  .header-wrapper .site-nav__deep-dropdown-trigger:has(:hover)
    > details.site-nav__details > ul.site-nav__deep-dropdown,
  .header-wrapper ul.site-nav__deep-dropdown:hover,
  .header-wrapper .site-nav__deep-dropdown-trigger.z-flyout-open
    > details.site-nav__details > ul.site-nav__deep-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Bridges: remove hover gap */
  .header-wrapper .site-nav__deep-dropdown-trigger::after {
    content: ""; position: absolute; top: 0; right: -18px; width: 18px; height: 100%;
    background: transparent; pointer-events: auto;
  }
  .header-wrapper ul.site-nav__deep-dropdown::before {
    content: ""; position: absolute; top: 0; left: -18px; width: 18px; height: 100%;
    background: transparent; pointer-events: auto;
  }
}

  /* Slight overlap so the flyout tucks under L2 by 12px = no gap */
  .header-wrapper ul.site-nav__deep-dropdown {
    position: absolute;
    top: 0;
    left: calc(100% - 12px); /* overlap back under L2 */
    margin-left: 0;          /* we replaced the old +8px with overlap */
    z-index: 10000;
    display: none;
  }

  /* Bigger “bridges” on both sides (28px) */
  .header-wrapper .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -28px;
    width: 28px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
  .header-wrapper ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -28px;
    width: 28px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
}
  /* Big “bridges” both sides (32px) to catch diagonal moves */
  .header-wrapper .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -32px;
    width: 32px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
  .header-wrapper ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -32px;
    width: 32px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }

  /* Give the L2 summary a bit more right padding so the caret area isn't a dead zone */
  .header-wrapper .site-nav__deep-dropdown-trigger > details > summary {
    padding-right: 28px;
  }
}
/* Zymbyo — desktop flyout: visible when trigger is hovered, JS-hold, or flyout hovered */
@media (min-width: 992px) {
  .header-wrapper .site-nav__deep-dropdown-trigger { position: relative; }
  .header-wrapper ul.site-nav__dropdown { overflow: visible !important; }

  /* Make the flyout show whenever its owner's <details> is open, or hovered */
  .header-wrapper .site-nav__deep-dropdown-trigger > details[open] > ul.site-nav__deep-dropdown,
  .header-wrapper .site-nav__deep-dropdown-trigger:hover > details > ul.site-nav__deep-dropdown,
  .header-wrapper ul.site-nav__deep-dropdown:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* Flyout placement with a slight overlap so there’s no gap to fall through */
  .header-wrapper ul.site-nav__deep-dropdown {
    position: absolute;
    top: 0;
    left: calc(100% - 16px); /* overlap back under level-2 by 16px */
    margin-left: 0;
    z-index: 10000;
    display: none;
  }

  /* Wide “bridges” both sides to catch diagonal moves */
  .header-wrapper .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -28px;
    width: 28px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
  .header-wrapper ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -28px;
    width: 28px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }

  /* Ensure Motion’s wrappers don’t block pointer events */
  .header-wrapper .motion-fade { pointer-events: auto !important; }
}
  .header-wrapper ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -28px;          /* <- mirror the same width */
    width: 28px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }

  /* Safety: if you're hovering anywhere inside the 2nd-level DROPDOWN,
     keep the current flyout visible so it can't collapse mid-flight. */
  .header-wrapper .site-nav__dropdown:hover .site-nav__deep-dropdown {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
}

  /* Kill Motion’s fade/slide so there’s no flicker during the handoff */
  .header-wrapper .motion-fade,
  .header-wrapper [data-section-type="header"] .motion-fade {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    visibility: visible !important;
  }
}

  /* Wide “bridges” both sides to catch diagonal mouse movement */
  .header-wrapper [data-section-type="header"] .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute; top: 0; right: -28px; width: 28px; height: 100%;
    background: transparent; pointer-events: auto; z-index: 10021;
  }
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute; top: 0; left: -28px; width: 28px; height: 100%;
    background: transparent; pointer-events: auto; z-index: 10021;
  }

  /* While any flyout is hovered, keep its L2 dropdown alive */
  .header-wrapper [data-section-type="header"]
  ul.site-nav__dropdown:has(ul.site-nav__deep-dropdown:hover),
  .header-wrapper [data-section-type="header"]
  ul.site-nav__dropdown:has(.site-nav__deep-dropdown-trigger:hover) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Defuse Motion’s fade/slide so a visible panel is also clickable */
  .header-wrapper .motion-fade {
    opacity: 1 !important; transform: none !important; transition: none !important;
    pointer-events: auto !important; visibility: visible !important;
  }
}
  /* L2 must not clip; it’s the positioning context */
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown {
    position: relative !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }
  .header-wrapper [data-section-type="header"] .site-nav__deep-dropdown-trigger {
    position: relative !important;
  }
  /* Wide “bridges” so the cursor can’t fall through the seam */
  .header-wrapper [data-section-type="header"] .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute; top: 0; right: -28px; width: 28px; height: 100%;
    background: transparent; pointer-events: auto; z-index: 10021;
  }
  .header-wrapper [data-section-type="header"] ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute; top: 0; left: -28px; width: 28px; height: 100%;
    background: transparent; pointer-events: auto; z-index: 10021;
  }

  /* Keep L2 alive while any of its flyouts are hovered (needs :has) */
  .header-wrapper [data-section-type="header"]
  ul.site-nav__dropdown:has(ul.site-nav__deep-dropdown:hover),
  .header-wrapper [data-section-type="header"]
  ul.site-nav__dropdown:has(.site-nav__deep-dropdown-trigger:hover) {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Fallback for older browsers (keeps L2 open while mouse is anywhere in it) */
  .header-wrapper [data-section-type="header"] ul.site-nav__dropdown:hover .site-nav__deep-dropdown {
    display: block !important;
  }

  /* Neutralize Motion fades so a visible panel is clickable immediately */
  .header-wrapper .motion-fade {
    opacity: 1 !important; transform: none !important; transition: none !important;
    pointer-events: auto !important; visibility: visible !important;
  }
}
/* === Zymbyo: fix header jump (desktop) — keep row height constant === */
@media (min-width: 992px) {
  /* Fix the header row height and vertical centering */
  .site-header,
  .header-layout { 
    min-height: 82px !important;      /* pick your steady height */
  }
  .header-layout { 
    display: flex !important;
    align-items: center !important;
  }

  /* Make each top-level nav item a positioning context */
  .site-nav__expanded-item { 
    position: relative !important; 
  }

  /* Take ALL dropdown panels out of the document flow */
  .header-wrapper .header__dropdown,
  .header-wrapper ul.site-nav__dropdown,
  .header-wrapper ul.site-nav__deep-dropdown,
  .header-wrapper .mega-menu,
  .header-wrapper .mega-menu__panel,
  .header-wrapper .header-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;  /* sits just below the header row */
    left: 0 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Don't let the L2 container clip flyouts */
  .header-wrapper ul.site-nav__dropdown {
    overflow: visible !important;
  }
}
  /* Bridges to prevent flicker */
  .header-wrapper .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -24px;
    width: 24px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
  .header-wrapper ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -24px;
    width: 24px;
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
}
/* ===================== Zymbyo – Desktop 3-Level Nav Fix (drop-in) ===================== */
@media (min-width: 992px) {

  /* 1) Ensure dropdowns aren’t clipped and stack correctly */
  [data-section-type="header"] nav,
  [data-section-type="header"] .header__submenu,
  [data-section-type="header"] ul.site-nav__dropdown,
  [data-section-type="header"] ul.site-nav__deep-dropdown {
    overflow: visible !important;
    z-index: 9999 !important;
  }

  /* 2) The level-2 owner of a level-3 menu must be positioning context */
  [data-section-type="header"] .site-nav__deep-dropdown-trigger {
    position: relative !important;
  }

  /* 3) Default state: keep level-3 hidden and absolutely positioned to the right */
  [data-section-type="header"] ul.site-nav__deep-dropdown {
    position: absolute !important;
    top: 0 !important;          /* align tops */
    left: 100% !important;      /* fly out to the RIGHT */
    display: none !important;   /* hidden by default */
    white-space: nowrap !important;
    min-width: 220px;
  }

  /* 4) Show level-3 when hovering the level-2 trigger OR the panel itself */
  [data-section-type="header"] .site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  [data-section-type="header"] .site-nav__deep-dropdown:hover {
    display: block !important;
  }

  /* 5) Make sure level-2 panel itself stays open while you move the mouse inside it */
  [data-section-type="header"] .site-nav__expanded-item:hover > details.site-nav__details > ul.site-nav__dropdown,
  [data-section-type="header"] ul.site-nav__dropdown:hover {
    display: block !important;
  }

  /* 6) Small invisible “hover bridge” so you don’t have to race the cursor from L2 → L3 */
  [data-section-type="header"] .site-nav__deep-dropdown-trigger {
    /* this element gets an invisible extension on its right edge */
  }
  [data-section-type="header"] .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;      /* extends 12px to the right of the trigger */
    width: 12px;
    height: 100%;
    /* no background so it’s invisible; it just preserves :hover during the mouse move */
  }

  /* 7) Optional: make the level-3 panel itself a safe target (no accidental gaps) */
  [data-section-type="header"] ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;       /* little buffer back toward the trigger */
    width: 12px;
    height: 100%;
  }

  /* 8) Basic link layout inside flyouts so nothing wraps weirdly */
  [data-section-type="header"] ul.site-nav__deep-dropdown a,
  [data-section-type="header"] ul.site-nav__dropdown a {
    display: block !important;
    white-space: nowrap !important;
  }
}
/* === Zymbyo | Desktop 3-Level Fix (exact Motion markup) === */
@media (min-width: 992px) {

  /* prevent clipping and give stacking space */
  .site-nav__dropdown,
  .site-nav__deep-dropdown {
    overflow: visible !important;
    z-index: 9999 !important;
  }

  /* make level-2 trigger a positioning anchor */
  .site-nav__deep-dropdown-trigger {
    position: relative !important;
  }

  /* position the level-3 list to the right */
  .site-nav__deep-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;
    display: none !important;
    min-width: 220px;
    white-space: nowrap !important;
  }

  /* show level-3 when hovering over the trigger or the panel */
  .site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  .site-nav__deep-dropdown:hover {
    display: block !important;
  }

  /* keep the level-2 dropdown open when hovered */
  .site-nav__expanded-item:hover > details.site-nav__details > ul.site-nav__dropdown,
  .site-nav__dropdown:hover {
    display: block !important;
  }

  /* invisible hover bridge between L2 → L3 */
  .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;
    width: 12px;
    height: 100%;
  }

  /* buffer back toward trigger so moving across doesn't flicker */
  .site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;
    width: 12px;
    height: 100%;
  }
}
/* ===== Zymbyo | Desktop emergency fix: make level-3 show + fly right, keep L2 open ===== */
@media (min-width: 992px) {

  /* 0) Prevent clipping */
  .site-nav__dropdown,
  .site-nav__deep-dropdown { overflow: visible !important; z-index: 9999 !important; }

  /* 1) The L2 owner becomes the positioning anchor */
  .site-nav__deep-dropdown-trigger { position: relative !important; }

  /* 2) Place level-3 to the RIGHT of the L2 item */
  .site-nav__deep-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;     /* <-- fly out to the RIGHT */
    min-width: 220px;
    white-space: nowrap !important;
    display: none !important;  /* hidden until hover/open */
  }

  /* 3) SHOW level-3 when:
        - the parent <details> is open (theme toggles this),
        - the L2 summary is hovered,
        - OR the L3 panel itself is hovered */
  .site-nav__deep-dropdown-trigger > details.site-nav__details[open] > ul.site-nav__deep-dropdown,
  .site-nav__deep-dropdown-trigger > details.site-nav__details > summary:hover + ul.site-nav__deep-dropdown,
  .site-nav__deep-dropdown:hover {
    display: block !important;
  }

  /* 4) Keep the L2 dropdown itself open while you’re inside it */
  .site-nav__expanded-item:hover > details.site-nav__details > ul.site-nav__dropdown,
  .site-nav__details[open] > ul.site-nav__dropdown,
  ul.site-nav__dropdown:hover {
    display: block !important;
  }

  /* 5) Tiny invisible “hover bridge” so you don’t have to race from L2 → L3 */
  .site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    right: -12px;              /* extend trigger hover 12px to the right */
    width: 12px;
    height: 100%;
  }
  .site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: 0;
    left: -12px;               /* extend the panel 12px back toward trigger */
    width: 12px;
    height: 100%;
  }
  [data-section-type="header"] .site-nav__deep-dropdown { display: none !important; }
}
/* ===== Zymbyo | Desktop: force level-3 to show and fly out right ===== */
@media (min-width: 992px) {

  /* 0) Prevent clipping */
  [data-section-type="header"] ul.site-nav__dropdown,
  [data-section-type="header"] ul.site-nav__deep-dropdown {
    overflow: visible !important;
    z-index: 10000 !important;
  }

  /* 1) The L2 owner is the positioning anchor */
  [data-section-type="header"] li.site-nav__deep-dropdown-trigger {
    position: relative !important;
  }

  /* 2) Define the L3 panel’s *baseline* (exists, but hidden) */
  [data-section-type="header"] li.site-nav__deep-dropdown-trigger
    > details.site-nav__details > ul.site-nav__deep-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: 100% !important;           /* fly out to the RIGHT */
    min-width: 240px;
    white-space: nowrap !important;

    /* be explicit so we beat any theme hiding */
    display: block !important;       /* we will hide via visibility instead */
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 120ms ease;
  }

  /* 3) SHOW L3 when details opens OR while hovering trigger/panel */
  [data-section-type="header"] li.site-nav__deep-dropdown-trigger
    > details.site-nav__details[open] > ul.site-nav__deep-dropdown,
  [data-section-type="header"] li.site-nav__deep-dropdown-trigger
    > details.site-nav__details > summary:hover + ul.site-nav__deep-dropdown,
  [data-section-type="header"] ul.site-nav__deep-dropdown:hover {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* 4) Keep level-2 open while you’re inside it (no “race the mouse”) */
  [data-section-type="header"] .site-nav__expanded-item:hover
    > details.site-nav__details > ul.site-nav__dropdown,
  [data-section-type="header"] .site-nav__details[open]
    > ul.site-nav__dropdown,
  [data-section-type="header"] ul.site-nav__dropdown:hover {
    display: block !important;
  }

  /* 5) Tiny invisible hover bridge L2 → L3 */
  [data-section-type="header"] li.site-nav__deep-dropdown-trigger::after {
    content: ""; position: absolute; top: 0; right: -12px; width: 12px; height: 100%;
  }
  [data-section-type="header"] ul.site-nav__deep-dropdown::before {
    content: ""; position: absolute; top: 0; left: -12px; width: 12px; height: 100%;
  }
}
/* Zymbyo – L3 hover bridge only (desktop) */
@media (min-width: 992px) {
  /* extend L2 trigger’s hover area to the right */
  li.site-nav__deep-dropdown-trigger {
    position: relative !important; /* anchor for the bridge */
  }
  li.site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: -8px;                               /* cover rounded corners gap */
    right: -24px;                            /* was 12px → make it 24px */
    width: 24px;
    height: calc(100% + 16px);               /* slightly taller than the item */
  }

  /* extend L3 panel’s hover area back toward L2 */
  ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: -8px;
    left: -24px;                             /* was 12px → make it 24px */
    width: 24px;
    height: calc(100% + 16px);
  }

  /* keep L2 open while you're anywhere inside L2 or L3 */
  ul.site-nav__dropdown:hover,
  li.site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__dropdown,
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
  }
}
/* --- L3 hover bridge to prevent disappearing while moving mouse --- */
@media (min-width: 992px) {
  /* Add invisible hover area between L2 and L3 */
  li.site-nav__deep-dropdown-trigger > details.site-nav__details {
    position: relative;
  }

  /* This creates the 'bridge' on the right side of L2 item */
  li.site-nav__deep-dropdown-trigger > details.site-nav__details > summary::after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px; /* distance to L3 panel */
    width: 20px;
    height: 100%;
    background: transparent;
  }

  /* Ensure L3 also keeps itself open when hovered */
  ul.site-nav__deep-dropdown {
    pointer-events: auto;
  }
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* === Keep Level 2 open while moving toward Level 3 (hover bridge) === */
@media (min-width: 992px) {
  /* Target any L2 item that has a Level 3 dropdown */
  li.site-nav__deep-dropdown-trigger {
    position: relative;
  }

  /* Create a 30px wide invisible hover area to the right of L2 */
  li.site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%; /* Directly beside L2 */
    width: 30px; /* <--- Increase this if needed */
    height: 100%;
    background: transparent;
    z-index: 10;
  }

  /* Make sure Level 3 stays open when hovered */
  ul.site-nav__deep-dropdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 20;
  }

  /* Keep Level 2 <details> open when hovering L2 or L3 */
  li.site-nav__deep-dropdown-trigger:hover > details,
  li.site-nav__deep-dropdown-trigger > details:hover,
  li.site-nav__deep-dropdown-trigger > details[open] > ul.site-nav__deep-dropdown,
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}
/* === Smooth L2 → L3 transition (no flicker, no disappearance) === */
@media (min-width: 992px) {

  /* Keep the <details> element open while hovering its child elements */
  li.site-nav__deep-dropdown-trigger:hover > details[open] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Make sure Level 3 stays visible when hovered OR when mouse is moving toward it */
  .site-nav__deep-dropdown,
  li.site-nav__deep-dropdown-trigger:hover .site-nav__deep-dropdown,
  .site-nav__deep-dropdown:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Expand clickable area from L2 toward L3 to prevent flickering */
  li.site-nav__deep-dropdown-trigger {
    position: relative;
  }
  li.site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 40px; /* Increase if still flickers */
    height: 100%;
    background: transparent;
    pointer-events: auto;
  }
}
/* === FINAL FIX: Reliable bridge from L2 to L3 (no flicker, slow-move friendly) === */
@media (min-width: 992px) {

  /* Keep <details> open while user is hovering OR moving toward L3 */
  li.site-nav__deep-dropdown-trigger > details[open] {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Keep Level 3 always visible when details is open OR being hovered */
  li.site-nav__deep-dropdown-trigger > details[open] > ul.site-nav__deep-dropdown,
  li.site-nav__deep-dropdown-trigger > details:hover > ul.site-nav__deep-dropdown,
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Widen the invisible "hover bridge" between L2 and L3 */
  li.site-nav__deep-dropdown-trigger {
    position: relative;
  }
  li.site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: -10px;      /* allow for slight upward movement */
    left: 100%;
    width: 60px;     /* increased from 30 → 40 → now 60px */
    height: calc(100% + 20px); /* covers small up/down motion */
    background: transparent;
    pointer-events: auto;
  }
}
/* Desktop nav: wider bridge + 200ms hold support */
@media (min-width: 992px) {
  /* widen the invisible bridge on the L2 side */
  li.site-nav__deep-dropdown-trigger { position: relative; }
  li.site-nav__deep-dropdown-trigger > details.site-nav__details > summary { position: relative; }

  /* bridge from L2 toward L3 */
  li.site-nav__deep-dropdown-trigger > details.site-nav__details > summary::after {
    content: "";
    position: absolute;
    top: -20px;                       /* extra vertical forgiveness */
    right: -48px;                     /* bridge width */
    width: 48px;
    height: calc(100% + 40px);
  }

  /* matching buffer on the L3 side back toward L2 */
  li.site-nav__deep-dropdown-trigger > details.site-nav__details > ul.site-nav__deep-dropdown {
    position: absolute;               /* you already have this; keep it */
  }
  li.site-nav__deep-dropdown-trigger > details.site-nav__details > ul.site-nav__deep-dropdown::before {
    content: "";
    position: absolute;
    top: -20px;
    left: -48px;                      /* mirror the bridge width */
    width: 48px;
    height: calc(100% + 40px);
  }

  /* keep L3 visible while on L2, on the bridge, or on L3 */
  li.site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  li.site-nav__deep-dropdown-trigger > details.site-nav__details[open] > ul.site-nav__deep-dropdown,
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* when JS adds .hold for 200ms, keep it open even if hover blips */
  li.site-nav__deep-dropdown-trigger.hold > details.site-nav__details > ul.site-nav__deep-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}
@media (min-width: 992px){
  li.site-nav__deep-dropdown-trigger > details.site-nav__details { position: relative !important; }
}
/* === Full vertical + horizontal hover zone for perfect L2 → L3 transition === */
@media (min-width: 992px) {
  /* Step 1: Make sure Level 2 <li> can host our hover bridge */
  li.site-nav__deep-dropdown-trigger {
    position: relative !important;
  }

  /* Step 2: Create a vertical + horizontal invisible hover area */
  li.site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: -20px;           /* allows slight upward movements */
    left: 100%;           /* starts at right edge of Level 2 */
    width: 100px;         /* extend horizontally toward Level 3 (was 80px) */
    height: calc(100% + 200px);  /* extend downward to cover lower transitions */
    background: transparent;
    pointer-events: auto;
    z-index: 5;
  }

  /* Step 3: Keep L3 visible while cursor is on L2, on the bridge, or on L3 */
  li.site-nav__deep-dropdown-trigger:hover > details > ul.site-nav__deep-dropdown,
  li.site-nav__deep-dropdown-trigger > details[open] > ul.site-nav__deep-dropdown,
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Step 4: Keep Level 2 dropdown itself open while inside children */
  ul.site-nav__dropdown:hover,
  li.site-nav__deep-dropdown-trigger:hover > details > ul.site-nav__dropdown,
  li.site-nav__deep-dropdown-trigger > details[open] > ul.site-nav__dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}
@media (min-width: 992px) {
  /* L2 can host the bridge */
  li.site-nav__deep-dropdown-trigger { position: relative !important; }

  /* Full vertical + horizontal bridge: a bit bigger to catch slow diagonals */
  li.site-nav__deep-dropdown-trigger::after {
    content: "";
    position: absolute;
    top: -40px;              /* was -20px → give more vertical forgiveness */
    left: 100%;
    width: 120px;            /* was 80/100 → 120px feels very forgiving */
    height: 120vh;           /* was 100vh → slightly taller for safety */
    background: transparent;
    pointer-events: auto;    /* keeps :hover alive while crossing */
    z-index: 5;
  }
}
/* === Desktop L3: fly right, no overlap, smooth handoff === */
@media (min-width: 992px) {
  /* Anchor the L2 owner */
  li.site-nav__deep-dropdown-trigger { position: relative !important; }

  /* Never clip the flyouts */
  ul.site-nav__dropdown, ul.site-nav__deep-dropdown { overflow: visible !important; }

  /* Place L3 strictly to the right with a small gap (no visual overlap) */
  li.site-nav__deep-dropdown-trigger > details.site-nav__details > ul.site-nav__deep-dropdown {
    position: absolute !important;
    top: 0 !important;
    left: calc(100% + 20px) !important; /* ← adjust to 16–28px if you want */
    white-space: nowrap !important;
    transform: none !important;
    translate: none !important;
    z-index: 200 !important;
  }

  /* Show L3 while: hovered, details is open, or JS marks .is-open */
  li.site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__deep-dropdown,
  li.site-nav__deep-dropdown-trigger > details.site-nav__details[open] > ul.site-nav__deep-dropdown,
  li.site-nav__deep-dropdown-trigger.is-open > details.site-nav__details > ul.site-nav__deep-dropdown,
  ul.site-nav__deep-dropdown:hover {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Keep the L2 dropdown itself visible during interaction */
  ul.site-nav__dropdown:hover,
  li.site-nav__deep-dropdown-trigger:hover > details.site-nav__details > ul.site-nav__dropdown,
  li.site-nav__deep-dropdown-trigger.is-open > details.site-nav__details > ul.site-nav__dropdown,
  li.site-nav__deep-dropdown-trigger > details.site-nav__details[open] > ul.site-nav__dropdown {
    display: block !important;
  }
}