/**
 * Sticky Header Dropdown Fix
 * 修复sticky header状态下二级类目无法弹出的问题
 *
 * 问题根源和解决方案：
 * 1. s.css第3481行设置max-height: 600px，只能显示约15个子类目
 * 2. 之前的修复移除了滚动(overflow: visible)，导致超出viewport的内容无法访问
 * 3. 正确方案: 保持滚动功能，但增大max-height到80vh，确保可以滚动查看所有内容
 * 4. 2025-12-09: nav-sections不在header内，sticky时需要单独固定定位
 * 5. 2025-12-09: 一级dropdown的overflow必须是visible，否则会裁剪二级dropdown
 *
 * 创建时间：2025-12-02
 * 更新时间：2025-12-09 (修复二级dropdown被overflow:auto裁剪的问题)
 */

/* ========================================
   非Sticky Header状态修复
   ======================================== */
/* 关键修复：一级dropdown-inner必须overflow:visible，否则会裁剪掉二级dropdown */
.navigation .navpro-dropdown-level1 > .navpro-dropdown-inner {
    max-height: 80vh !important;
    overflow: visible !important;
}

/* 二级dropdown-inner保持滚动功能，确保可以查看所有30个子类目 */
.navigation .navpro-dropdown-level2 > .navpro-dropdown-inner {
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* 第一层dropdown的hover规则 */
.navigation .navpro-menu > li.parent:hover > .navpro-dropdown,
.navigation .navpro-menu > li.parent > .navpro-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    z-index: 100000 !important;
    transform: none !important;
}

/* 第一层dropdown的所有子元素继承可见性 */
.navigation .navpro-menu > li.parent:hover > .navpro-dropdown *,
.navigation .navpro-menu > li.parent > .navpro-dropdown:hover * {
    visibility: visible !important;
}

/* 第二层dropdown：hover时显示 */
.navigation .navpro-dropdown li.parent:hover > .navpro-dropdown,
.navigation .navpro-dropdown li.parent > .navpro-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    z-index: 100001 !important;
    transform: none !important;
}

/* 第二层dropdown的所有子元素可见 */
.navigation .navpro-dropdown li.parent:hover > .navpro-dropdown *,
.navigation .navpro-dropdown li.parent > .navpro-dropdown:hover * {
    visibility: visible !important;
}

/* 移除transition，确保立即显示 */
.navigation .navpro-dropdown {
    transition: none !important;
}

/* ========================================
   Sticky Header状态修复
   ======================================== */
/* 提高sticky header的z-index，确保dropdown在页面内容之上 */
header.fixed {
    z-index: 99999 !important;
}

/* 关键修复：在sticky状态下，header内的.swissup-navigationpro被隐藏，需要显示 */
header.fixed .swissup-navigationpro {
    display: block !important;
}

header.fixed .swissup-navigationpro .navpro-menu {
    display: flex !important;
}

/* 隐藏nav-sections在sticky模式下，因为header内已有导航 */
header.fixed ~ .nav-sections {
    display: none !important;
}

/* 第一层dropdown：hover时显示 */
header.fixed .navpro-menu > li.parent:hover > .navpro-dropdown,
header.fixed .navpro-menu > li.parent > .navpro-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    z-index: 100000 !important;
    transform: none !important;
}

/* 第一层dropdown的所有子元素继承可见性 */
header.fixed .navpro-menu > li.parent:hover > .navpro-dropdown *,
header.fixed .navpro-menu > li.parent > .navpro-dropdown:hover * {
    visibility: visible !important;
}

/* 关键修复：一级dropdown-inner必须overflow:visible，否则会裁剪掉二级dropdown */
header.fixed .navpro-dropdown-level1 > .navpro-dropdown-inner {
    max-height: 80vh !important;
    overflow: visible !important;
}

/* 二级dropdown-inner保持滚动功能，确保可以查看所有30个子类目 */
header.fixed .navpro-dropdown-level2 > .navpro-dropdown-inner {
    max-height: 80vh !important;
    overflow-y: auto !important;
}

/* 第二层dropdown：hover时显示 */
header.fixed .navpro-dropdown li.parent:hover > .navpro-dropdown,
header.fixed .navpro-dropdown li.parent > .navpro-dropdown:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
    z-index: 100001 !important;
    transform: none !important;
}

/* 第二层dropdown的所有子元素可见 */
header.fixed .navpro-dropdown li.parent:hover > .navpro-dropdown *,
header.fixed .navpro-dropdown li.parent > .navpro-dropdown:hover * {
    visibility: visible !important;
}

/* 移除transition，确保立即显示 */
header.fixed .navpro-dropdown {
    transition: none !important;
}


/* 2026-06-18 mobile sticky header global repair.
   Home/product pages received the .fixed class but relied on position:sticky,
   which scrolled away on mobile. Category pages had a local override; this
   makes the same header behavior global and keeps the mobile drawer usable. */
@media (max-width: 767px) {
  header.page-header.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-height: 51px !important;
    height: 51px !important;
    z-index: 99999 !important;
    background: #fff !important;
    transform: none !important;
    box-shadow: 0 2px 12px rgba(15,23,42,.10) !important;
  }
  header.page-header.fixed .header.content.container {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
    height: 50px !important;
    min-height: 50px !important;
    padding: 5px 5px 0 !important;
    max-width: 1140px !important;
    margin: 0 !important;
  }
  header.page-header.fixed .nav-toggle {
    order: 0 !important;
    flex: 1 1 0% !important;
    align-self: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  header.page-header.fixed #headerLogoWrap {
    order: 0 !important;
    flex: 0 1 auto !important;
    width: 159px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  header.page-header.fixed a.logo {
    width: 159px !important;
    height: 41px !important;
    margin: 0 !important;
    padding: 0 !important;
    top: auto !important;
  }
  header.page-header.fixed a.logo img {
    display: block !important;
    width: 159px !important;
    height: auto !important;
    max-width: 100% !important;
  }
  header.page-header.fixed a.logo:before {
    content: none !important;
    background-image: none !important;
  }
  header.page-header.fixed #mobileHeaderCall {
    order: 0 !important;
    flex: 3 1 0% !important;
    width: 120px !important;
    max-width: none !important;
    justify-content: center !important;
    align-self: center !important;
  }
  header.page-header.fixed .minicart-wrapper {
    order: 5 !important;
    flex: 1 1 0% !important;
    width: 28px !important;
    max-width: 94px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-self: center !important;
  }
  html.nav-open .nav-sections,
  html.nav-open header.fixed ~ .nav-sections {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 86vw !important;
    max-width: 340px !important;
    min-width: 280px !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 100000 !important;
    background: #fff !important;
    box-shadow: 16px 0 36px rgba(15,23,42,.18) !important;
  }
  html.nav-open body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.36);
    z-index: 99999;
    pointer-events: none;
  }
  html.nav-open body .nav-sections { pointer-events: auto !important; }
}