.elementor-472 .elementor-element.elementor-element-258c63d{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-472 .elementor-element.elementor-element-4adb716{--display:flex;}.elementor-472 .elementor-element.elementor-element-bab8042{--spacer-size:4px;}.elementor-472 .elementor-element.elementor-element-5d46199{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-472 .elementor-element.elementor-element-6d40c1f{width:100%;max-width:100%;}.elementor-472 .elementor-element.elementor-element-6d40c1f.elementor-element{--align-self:center;}.elementor-472 .elementor-element.elementor-element-3b9d9af{--display:flex;}.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products ul.products li.product{text-align:left;}.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:25px;}.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products .attachment-woocommerce_thumbnail{border-style:none;}.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products ul.products li.product .woocommerce-loop-product__title, .elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products ul.products li.product .woocommerce-loop-category__title{letter-spacing:0.4px;word-spacing:4px;}.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products ul.products li.product span.onsale{display:block;}@media(max-width:1024px){.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}@media(max-width:767px){.elementor-472 .elementor-element.elementor-element-827697e.elementor-wc-products  ul.products{grid-column-gap:20px;grid-row-gap:40px;}}/* Start custom CSS for html, class: .elementor-element-6d40c1f *//* =========================================
   1. 基础重置 (Reset)
   ========================================= */
.product-categories, 
.product-categories ul, 
.product-categories li {
    margin: 0; 
    padding: 0; 
    list-style: none !important; 
    box-sizing: border-box;
}

/* =========================================
   2. 电脑端布局 (Desktop Layout) - 含高级分割线
   ========================================= */
/* 主容器：居中 + 底部细灰线 */
.product-categories {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    background: transparent !important;
    
    /* 【核心】这里是那条贯穿整行的高级灰线 */
    border-bottom: 1px solid #E5E5E5 !important;
    
    /* 调整下边距：线与下方产品的距离 */
    margin: 5px 0 35px 0 !important; 
    
    /* 确保内部元素紧贴底部 */
    padding-bottom: 0 !important; 
}

/* 第一级菜单：横向排列 */
.product-categories > .category-list {
    display: flex !important;
    gap: 60px; /* 菜单间距 */
    align-items: center !important;
    
    /* 【视觉魔法】让蓝色的悬浮线正好压在灰线上 */
    margin-bottom: -1px !important; 
}

/* 电脑端隐藏手机下拉框 */
.product-categories select {
    display: none !important;
}

/* =========================================
   3. 样式美化 (字体、颜色、动画)
   ========================================= */
.product-categories .category-item { 
    position: relative; 
    padding-bottom: 10px; /* 给下划线留出空间 */
}

.product-categories .parent-link { 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-weight: 600; 
    color: #555; 
    text-decoration: none; 
    cursor: pointer; 
    font-size: 16px; 
    white-space: nowrap; 
}

/* 悬浮变色 */
.product-categories .category-item:hover .parent-link { 
    color: #005fcc; 
}

/* 蓝色下划线动画 */
.product-categories .category-item::after { 
    content: ''; 
    position: absolute; 
    bottom: 0; 
    left: 50%; 
    transform: translateX(-50%); 
    width: 0; 
    height: 3px; /* 蓝线厚度 */
    background-color: #005fcc; 
    transition: width 0.3s ease; 
}

/* 鼠标移上去，蓝线展开 */
.product-categories .category-item:hover::after { 
    width: 100%; 
}

/* 小箭头旋转 */
.product-categories .icon-toggle { 
    width: 12px; 
    transition: transform 0.3s; 
    color: #bbb; 
}
.product-categories .category-item:hover .icon-toggle { 
    transform: rotate(180deg); 
    color: #005fcc; 
}

/* =========================================
   4. 子菜单 (Sub-menu) - 下拉悬浮框
   ========================================= */
.product-categories .sub-category-list { 
    display: block !important;
    position: absolute; 
    top: 100%; /* 在父级正下方 */
    left: 50%; 
    transform: translateX(-50%) translateY(10px); 
    min-width: 180px; 
    background: #fff; 
    border: 1px solid #eee; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
    opacity: 0; 
    visibility: hidden; 
    z-index: 99; 
    transition: 0.2s; 
    text-align: center; 
    border-radius: 6px; 
    padding: 5px 0;
}

/* 显示子菜单 */
.product-categories .category-item:hover .sub-category-list { 
    opacity: 1; 
    visibility: visible; 
    transform: translateX(-50%) translateY(0); 
}

.product-categories .sub-category-list li {
    display: block !important;
    width: 100%;
}

.product-categories .sub-category-list li a { 
    display: block; 
    padding: 12px 10px; 
    color: #666; 
    text-decoration: none; 
    font-size: 14px; 
}

.product-categories .sub-category-list li a:hover { 
    background: #f5f9ff; 
    color: #005fcc; 
}

/* =========================================
   5. 手机端适配 (Mobile Optimization)
   ========================================= */
@media (max-width: 768px) {
    /* 1. 隐藏电脑版菜单 */
    .product-categories ul,
    .product-categories .category-list,
    .product-categories .desktop-only {
        display: none !important; 
    }

    /* 2. 显示手机下拉框 */
    .product-categories select,
    .product-categories .mobile-only {
        display: block !important;
        width: 100% !important;
        padding: 12px 15px;
        border: 1px solid #ddd;
        border-radius: 8px;
        background-color: #fff;
        font-size: 16px;
        color: #222; 
        font-weight: 500;
        
        /* 自定义下拉箭头 */
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 15px center;
    }

    /* 3. 手机容器调整 */
    .product-categories {
        display: block !important;
        width: auto !important;
        margin: 15px 20px !important;
        border-bottom: none !important; /* 手机端不需要那条灰线，保持简洁 */
    }
}/* End custom CSS */