/* 树形结构二级菜单样式 */

/* 主菜单容器样式 */
.main-menu {
    position: relative;
}

/* 主菜单项样式 */
.main-menu > ul > li {
    position: relative;
    display: inline-block;
    margin-right: 15px;
}

/* 移除父主题中的箭头指示器 */
li.menu-item-has-children:after,
#main-menu ul li.menu-item-has-children:after {
    content: none !important;
    display: none !important;
}

/* 二级菜单容器样式 - 关键修复 */
.main-menu > ul > li > ul.sub-menu,
#main-menu ul.children, 
#main-menu ul.sub-menu,
.menu-box ul.sub-menu,
.menu-box ul.children,
nav ul.sub-menu,
nav ul.children {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    min-width: 240px !important;
    background-color: #ffffff !important;
    border: 4px solid #cf0 !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    padding: 10px 0 !important;
    z-index: 999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(10px) !important;
    transition: all 0.3s ease !important;
    border-radius: 0 0 4px 4px !important;
    display: none !important;
}

/* 显示二级菜单 */
.main-menu > ul > li:hover > ul.sub-menu,
#main-menu ul li:hover > ul.children,
#main-menu ul li:hover > ul.sub-menu,
.menu-box ul li:hover > ul.sub-menu,
.menu-box ul li:hover > ul.children,
nav ul li:hover > ul.sub-menu,
nav ul li:hover > ul.children {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    display: block !important;
}

/* 二级菜单项样式 - 确保垂直排列 */
.main-menu ul.sub-menu > li,
#main-menu ul.children > li,
#main-menu ul.sub-menu > li,
.menu-box ul.sub-menu > li,
.menu-box ul.children > li,
nav ul.sub-menu > li,
nav ul.children > li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
    float: none !important;
    position: relative !important;
}

.main-menu ul.sub-menu > li:last-child,
#main-menu ul.children > li:last-child,
#main-menu ul.sub-menu > li:last-child {
    border-bottom: none;
}

/* 二级菜单链接样式 */
.main-menu ul.sub-menu > li > a,
#main-menu ul.children > li > a,
#main-menu ul.sub-menu > li > a,
.menu-box ul.sub-menu > li > a,
.menu-box ul.children > li > a,
nav ul.sub-menu > li > a,
nav ul.children > li > a {
    display: block !important;
    padding: 10px 20px !important;
    color: #000000 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
    text-transform: uppercase !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
    font-weight: normal !important;
    position: relative !important;
    white-space: nowrap !important;
    background-color: #ffffff !important;
}

/* 三级菜单容器样式 - 修改为固定位置 */
.main-menu > ul > li > ul.sub-menu > li > ul.sub-menu,
#main-menu > ul > li > ul.children > li > ul.children,
#main-menu > ul > li > ul.sub-menu > li > ul.sub-menu,
.menu-box > ul > li > ul.sub-menu > li > ul.sub-menu,
.menu-box > ul > li > ul.children > li > ul.children,
nav > ul > li > ul.sub-menu > li > ul.sub-menu,
nav > ul > li > ul.children > li > ul.children {
    position: fixed !important;
    top: 0 !important;
    left: 230px !important; /* 与二级菜单宽度一致 */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid #cf0 !important;
    background-color: #ffffff !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    display: none !important;
    width: 240px !important; /* 与二级菜单宽度一致 */
    min-width: 240px !important;
    z-index: 1000 !important;
}

/* 显示三级菜单 */
.main-menu > ul > li > ul.sub-menu > li:hover > ul.sub-menu,
#main-menu > ul > li > ul.children > li:hover > ul.children,
#main-menu > ul > li > ul.sub-menu > li:hover > ul.sub-menu,
.menu-box > ul > li > ul.sub-menu > li:hover > ul.sub-menu,
.menu-box > ul > li > ul.children > li:hover > ul.children,
nav > ul > li > ul.sub-menu > li:hover > ul.sub-menu,
nav > ul > li > ul.children > li:hover > ul.children {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* 三级菜单项样式 */
.main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li > a,
#main-menu > ul > li > ul.children > li > ul.children > li > a,
#main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li > a,
.menu-box > ul > li > ul.sub-menu > li > ul.sub-menu > li > a,
.menu-box > ul > li > ul.children > li > ul.children > li > a,
nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > a,
nav > ul > li > ul.children > li > ul.children > li > a {
    padding: 10px 20px !important;
    font-size: 13px !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: normal !important;
    position: relative !important;
}

/* 移除三级菜单项前的树形标记 */
.main-menu ul.sub-menu ul.sub-menu > li > a:before {
    content: none !important;
}

/* 为有子菜单的二级菜单项添加右箭头指示器 */
.main-menu > ul > li > ul.sub-menu > li.menu-item-has-children > a:after,
#main-menu > ul > li > ul.children > li.menu-item-has-children > a:after,
#main-menu > ul > li > ul.sub-menu > li.menu-item-has-children > a:after,
.menu-box > ul > li > ul.sub-menu > li.menu-item-has-children > a:after,
.menu-box > ul > li > ul.children > li.menu-item-has-children > a:after,
nav > ul > li > ul.sub-menu > li.menu-item-has-children > a:after,
nav > ul > li > ul.children > li.menu-item-has-children > a:after {
    content: "\f105" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #000000 !important;
}

/* 菜单项悬停效果 */
.main-menu ul.sub-menu li a:hover,
.main-menu ul.sub-menu li.current-menu-item > a,
#main-menu ul.children li a:hover,
#main-menu ul.children li.current-menu-item > a,
#main-menu ul.sub-menu li a:hover,
#main-menu ul.sub-menu li.current-menu-item > a,
.menu-box ul.sub-menu li a:hover,
.menu-box ul.sub-menu li.current-menu-item > a,
.menu-box ul.children li a:hover,
.menu-box ul.children li.current-menu-item > a,
nav ul.sub-menu li a:hover,
nav ul.sub-menu li.current-menu-item > a,
nav ul.children li a:hover,
nav ul.children li.current-menu-item > a {
    color: #CCFF00 !important;
    background-color: transparent !important;
}

/* 特别修复POWERS和FLAVOURS菜单并排显示的问题 */
.main-menu > ul > li.menu-item-has-children {
    position: relative;
}

/* 确保每个顶级菜单项的子菜单独立显示 */
.main-menu > ul > li#menu-item-powers > ul.sub-menu,
.main-menu > ul > li#menu-item-flavours > ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: auto;
    min-width: 240px;
    max-width: 300px;
    display: none;
    border: 4px solid #cf0 !important;
}

.main-menu > ul > li#menu-item-powers:hover > ul.sub-menu,
.main-menu > ul > li#menu-item-flavours:hover > ul.sub-menu {
    display: block;
}

/* 移动端样式 */
@media (max-width: 991px) {
    .main-menu ul.sub-menu {
        position: static;
        display: none;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border-top: none;
        background-color: rgba(0, 0, 0, 0.1);
        padding: 0;
        border: 4px solid #cf0 !important;
    }
    
    .main-menu ul.sub-menu ul.sub-menu {
        position: static !important;
        display: none !important;
        width: 100% !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        background-color: rgba(0, 0, 0, 0.2) !important;
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }
    
    .main-menu ul.sub-menu > li.menu-item-has-children > a:after {
        content: "\f107" !important;
        right: 20px !important;
    }
    
    .main-menu ul.sub-menu li.menu-item-has-children.active > a:after {
        transform: translateY(-50%) rotate(180deg) !important;
    }
    
    .main-menu ul.sub-menu ul.sub-menu > li > a {
        padding-left: 45px !important;
    }
    
    .main-menu ul.sub-menu ul.sub-menu > li > a:before {
        content: "" !important;
        position: absolute !important;
        left: 30px !important;
        top: 50% !important;
        width: 6px !important;
        height: 1px !important;
        background-color: rgba(255, 255, 255, 0.4) !important;
        transform: translateY(-50%) !important;
    }
    
    .main-menu ul.sub-menu li a {
        padding-left: 30px;
    }
    
    .main-menu ul.sub-menu li a:hover,
    .main-menu ul.sub-menu li.current-menu-item a {
        padding-left: 35px;
    }
    
    .main-menu ul.sub-menu ul.sub-menu li a {
        padding-left: 45px;
    }
    
    .main-menu ul.sub-menu ul.sub-menu li a:before {
        left: 30px;
    }
    
    .main-menu ul.sub-menu ul.sub-menu li a:hover,
    .main-menu ul.sub-menu ul.sub-menu li.current-menu-item a {
        padding-left: 50px;
    }
}

/* 移动端导航菜单样式 */
.mobile-menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-list li {
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.mobile-menu-list li:last-child {
    border-bottom: none;
}

.mobile-menu-list li a {
    display: block;
    padding: 15px 20px;
    color: #ffffff;
    font-size: 16px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.mobile-menu-list li a:hover,
.mobile-menu-list li.current-menu-item > a {
    color: #C4FF00;
    background-color: rgba(255, 255, 255, 0.05);
}

/* 移动端树形菜单样式 */
.mobile-menu-list .sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.2);
    border: 4px solid #cf0 !important;
}

/* 一级子菜单 */
.mobile-menu-list .sub-menu > li > a {
    font-size: 15px;
    padding: 12px 20px 12px 35px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

/* 二级子菜单 */
.mobile-menu-list .sub-menu .sub-menu > li > a {
    font-size: 14px;
    padding: 10px 20px 10px 50px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    position: relative;
}

/* 二级子菜单前的树形标记 */
.mobile-menu-list .sub-menu .sub-menu > li > a:before {
    content: "";
    position: absolute;
    left: 35px;
    top: 50%;
    width: 6px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%);
}

/* 添加箭头图标 */
.submenu-toggle {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    color: #ffffff;
    cursor: pointer;
    padding: 10px;
    z-index: 2;
    font-size: 14px;
}

.submenu-toggle i {
    transition: transform 0.3s ease;
}

.submenu-toggle.active i {
    transform: rotate(180deg);
}

/* 移动导航遮罩层 - 已移除背景色 */
.mobile-nav-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent !important; /* 移除遮罩背景色 */
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.mobile-nav-overlay.active {
    opacity: 0 !important; /* 即使激活也保持透明 */
    visibility: visible;
}

/* 强制清除浮动，防止菜单项并排显示 */
.main-menu ul.sub-menu:after {
    content: "";
    display: table;
    clear: both;
}

/* 额外的修复，确保二级菜单垂直排列 */
.main-menu ul.sub-menu {
    display: block;
    width: auto;
    float: none;
    border: 4px solid #cf0 !important;
}

/* 确保菜单项不会浮动 */
.main-menu ul.sub-menu li {
    float: none !important;
    display: block !important;
    width: 100% !important;
}

/* 特定菜单项样式覆盖 */
.main-menu > ul > li > a,
#main-menu > ul > li > a,
.menu-box > ul > li > a,
nav > ul > li > a {
    color: #ffffff !important;
}

/* 直接针对BESTSELLERS、POWERS和FLAVOURS菜单项 */
#menu-item-bestsellers > ul.sub-menu,
#menu-item-powers > ul.sub-menu,
#menu-item-flavours > ul.sub-menu,
.menu-item-bestsellers > ul.sub-menu,
.menu-item-powers > ul.sub-menu,
.menu-item-flavours > ul.sub-menu,
li:has(> a:contains("BESTSELLERS")) > ul.sub-menu,
li:has(> a:contains("POWERS")) > ul.sub-menu,
li:has(> a:contains("FLAVOURS")) > ul.sub-menu {
    background-color: #ffffff !important;
    border: 4px solid #cf0 !important;
}

#menu-item-bestsellers > ul.sub-menu > li > a,
#menu-item-powers > ul.sub-menu > li > a,
#menu-item-flavours > ul.sub-menu > li > a,
.menu-item-bestsellers > ul.sub-menu > li > a,
.menu-item-powers > ul.sub-menu > li > a,
.menu-item-flavours > ul.sub-menu > li > a,
li:has(> a:contains("BESTSELLERS")) > ul.sub-menu > li > a,
li:has(> a:contains("POWERS")) > ul.sub-menu > li > a,
li:has(> a:contains("FLAVOURS")) > ul.sub-menu > li > a {
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: normal !important;
}

#menu-item-bestsellers > ul.sub-menu > li > a:hover,
#menu-item-powers > ul.sub-menu > li > a:hover,
#menu-item-flavours > ul.sub-menu > li > a:hover,
.menu-item-bestsellers > ul.sub-menu > li > a:hover,
.menu-item-powers > ul.sub-menu > li > a:hover,
.menu-item-flavours > ul.sub-menu > li > a:hover,
li:has(> a:contains("BESTSELLERS")) > ul.sub-menu > li > a:hover,
li:has(> a:contains("POWERS")) > ul.sub-menu > li > a:hover,
li:has(> a:contains("FLAVOURS")) > ul.sub-menu > li > a:hover {
    color: #CCFF00 !important;
    background-color: transparent !important;
}

/* 直接覆盖菜单样式 */
ul.sub-menu {
    background-color: #ffffff !important;
    border: 4px solid #cf0 !important;
}

ul.sub-menu > li > a {
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: normal !important;
}

ul.sub-menu > li > a:hover {
    color: #CCFF00 !important;
    background-color: transparent !important;
}

/* 四级菜单容器样式 - 与三级菜单类似但位置在右侧 */
.main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu,
#main-menu > ul > li > ul.children > li > ul.children > li > ul.children,
#main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu,
.menu-box > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu,
.menu-box > ul > li > ul.children > li > ul.children > li > ul.children,
nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu,
nav > ul > li > ul.children > li > ul.children > li > ul.children {
    position: fixed !important;
    top: 0 !important;
    left: 470px !important; /* 比三级菜单再右移一个菜单宽度 */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: none !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
    border: 2px solid #cf0 !important;
    background-color: #ffffff !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    display: none !important;
    width: 240px !important; /* 与二级菜单宽度一致 */
    min-width: 240px !important;
    z-index: 1000 !important;
}

/* 显示四级菜单 */
.main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
#main-menu > ul > li > ul.children > li > ul.children > li:hover > ul.children,
#main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
.menu-box > ul > li > ul.sub-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
.menu-box > ul > li > ul.children > li > ul.children > li:hover > ul.children,
nav > ul > li > ul.sub-menu > li > ul.sub-menu > li:hover > ul.sub-menu,
nav > ul > li > ul.children > li > ul.children > li:hover > ul.children {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* 四级菜单项样式 */
.main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a,
#main-menu > ul > li > ul.children > li > ul.children > li > ul.children > li > a,
#main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a,
.menu-box > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a,
.menu-box > ul > li > ul.children > li > ul.children > li > ul.children > li > a,
nav > ul > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a,
nav > ul > li > ul.children > li > ul.children > li > ul.children > li > a {
    padding: 10px 20px !important;
    font-size: 13px !important;
    color: #000000 !important;
    background-color: #ffffff !important;
    font-weight: normal !important;
    position: relative !important;
}

/* 为有子菜单的三级菜单项添加右箭头指示器 */
.main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li.menu-item-has-children > a:after,
#main-menu > ul > li > ul.children > li > ul.children > li.menu-item-has-children > a:after,
#main-menu > ul > li > ul.sub-menu > li > ul.sub-menu > li.menu-item-has-children > a:after,
.menu-box > ul > li > ul.sub-menu > li > ul.sub-menu > li.menu-item-has-children > a:after,
.menu-box > ul > li > ul.children > li > ul.children > li.menu-item-has-children > a:after,
nav > ul > li > ul.sub-menu > li > ul.sub-menu > li.menu-item-has-children > a:after,
nav > ul > li > ul.children > li > ul.children > li.menu-item-has-children > a:after {
    content: "\f105" !important;
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #000000 !important;
}