/**
 * WooCommerce横向弹出菜单样式
 * 优化版本 - 自动方向调整和多列布局
 */

/* 主菜单容器样式 */
body .main-navigation {
    position: relative;
    background-color: #f5f5f5;
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
}

/* 主菜单项样式 */
body .main-navigation ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

body .main-navigation ul.menu > li {
    position: relative;
}

body .main-navigation ul.menu > li > a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

body .main-navigation ul.menu > li:hover > a {
    background-color: #ebebeb;
}

/* 产品分类菜单项样式 */
body .main-navigation .product-menu-item > a {
    display: flex;
    align-items: center;
    color: #c20026 !important; /* 红色与网站主题匹配 */
}

/* 多列菜单布局 */
body .main-navigation .multi-column-menu {
    display: flex !important;
    flex-wrap: wrap !important;
    width: auto !important;
    min-width: 700px !important; /* 根据需要调整宽度 */
    padding: 10px !important;
}

body .main-navigation .multi-column-menu > li.category-header {
    width: 100% !important;
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid #ddd !important;
    margin-bottom: 10px !important;
    padding: 5px 10px !important;
}

body .main-navigation .multi-column-menu > li.column-wrapper {
    width: 33.33% !important; /* 3列布局 */
    padding: 0 10px !important;
    box-sizing: border-box !important;
    border-right: 1px dotted #eee !important;
}

body .main-navigation .multi-column-menu > li.column-wrapper:last-child {
    border-right: none !important;
}

body .main-navigation .column-content {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* 一级子菜单 - 产品分类 */
body .main-navigation .product-categories-menu {
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    background-color: white !important;
    border: 1px solid #ddd !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    min-width: 220px !important;
    padding: 5px 0 !important;
    display: none !important;
    z-index: 999 !important;
}

body .main-navigation .menu-item-has-children:hover > .product-categories-menu,
body .main-navigation .menu-item-has-children:hover > .sub-menu {
    display: block !important;
}

body .main-navigation .column-content > li {
    position: relative !important;
}

body .main-navigation .column-content > li > a {
    display: block !important;
    padding: 8px 15px !important;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 14px !important;
    transition: background-color 0.2s ease !important;
    white-space: nowrap !important;
    border-bottom: 1px solid #f5f5f5 !important;
}

body .main-navigation .column-content > li:hover > a {
    background-color: #f9f9f9 !important;
    color: #c20026 !important; /* 鼠标悬停时变为红色 */
}

/* 二级子菜单 - 子分类 */
body .main-navigation .product-subcategories-menu {
    position: absolute !important;
    right: auto !important; /* 默认不设置右侧位置 */
    left: 100% !important; /* 默认向右展开 */
    top: 0 !important;
    background-color: white !important;
    border: 1px solid #ddd !important;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1) !important;
    min-width: 220px !important;
    padding: 5px 0 !important;
    display: none !important;
    z-index: 1000 !important;
}

/* 方向自动调整 - 向左展开的子菜单 */
body .main-navigation .direction-left {
    left: auto !important;
    right: 100% !important;
    box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.1) !important;
}

/* 箭头指示器 - 适应方向 */
body .main-navigation .menu-item-has-children > a:after {
    content: "›" !important;
    margin-left: 5px !important;
    font-size: 16px !important;
    color: #777 !important;
    display: inline-block !important;
}

body .main-navigation .product-menu-item > a:after {
    transform: rotate(90deg) !important;
    margin-left: 5px !important;
}

body .main-navigation .direction-left .menu-item-has-children > a:after {
    content: "‹" !important; /* 左箭头 */
    margin-right: 5px !important;
    margin-left: 0 !important;
}

/* 在主菜单中加入滚动条，防止一级菜单太多 */
body .main-navigation .multi-column-menu {
    max-height: 80vh !important; /* 最大高度为视窗高度的80% */
    overflow-y: auto !important;
}

/* 高亮当前菜单项 */
body .main-navigation .column-content li.current-menu-item > a,
body .main-navigation .product-subcategories-menu li.current-menu-item > a {
    background-color: #f9f9f9 !important;
    color: #c20026 !important;
    font-weight: bold !important;
}

/* 响应式设计 */
@media (max-width: 992px) {
    body .main-navigation .multi-column-menu {
        min-width: 90vw !important; /* 在平板上占据90%视窗宽度 */
    }
    
    body .main-navigation .multi-column-menu > li.column-wrapper {
        width: 50% !important; /* 平板上改为2列 */
    }
}

@media (max-width: 768px) {
    body .main-navigation ul.menu {
        flex-direction: column !important;
    }
    
    body .main-navigation .product-categories-menu,
    body .main-navigation .product-subcategories-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: auto !important;
        display: none !important;
        flex-direction: column !important;
        box-shadow: none !important;
        border: none !important;
        padding-left: 15px !important;
        overflow-y: visible !important;
        max-height: none !important;
    }
    
    body .main-navigation .multi-column-menu {
        display: block !important;
        min-width: 100% !important;
    }
    
    body .main-navigation .multi-column-menu > li.column-wrapper {
        width: 100% !important; /* 手机上只有一列 */
        border-right: none !important;
        padding: 0 !important;
    }
    
    body .main-navigation .menu-item-has-children > a:after {
        float: right !important;
    }
    
    /* 移动设备上显示/隐藏子菜单的JavaScript交互 */
    body .main-navigation .menu-item-has-children > a {
        position: relative !important;
    }
    
    body .main-navigation .product-subcategories-menu.active {
        display: block !important;
    }
}