/**
 * WooCommerce Filters by WPBarry - 前端样式
 */

/* 强制重置 WooCommerce 默认的产品列表样式 */
.woocommerce .woofilters-custom-products ul.products li.product,
.woocommerce-page .woofilters-custom-products ul.products li.product,
.woofilters-custom-products.woocommerce ul.products li.product,
.woofilters-custom-products.woocommerce-page ul.products li.product {
    /* 重置 WooCommerce 默认的浮动布局 */
    float: none !important;
    width: auto !important;
    /* 重置默认margin，但保留被 Elementor 控制的可能性 */
    margin: 0; /* 不使用 !important，允许 Elementor 控件覆盖 */
    padding: 0; /* 不使用 !important，允许 Elementor 控件覆盖 */
    position: relative !important;
    /* 确保使用 Grid 布局而不是浮动 */
    display: block !important;
    box-sizing: border-box !important;
    /* 确保不超出Grid容器 */
    max-width: 100% !important;
    min-width: 0 !important;
    /* 清除可能的继承样式 */
    text-align: inherit !important;
}

/* 在所有屏幕尺寸下都重置 WooCommerce 的响应式样式 */
@media (min-width: 768px) {
    .woocommerce .woofilters-custom-products ul.products li.product,
    .woocommerce-page .woofilters-custom-products ul.products li.product,
    .woofilters-custom-products.woocommerce ul.products li.product,
    .woofilters-custom-products.woocommerce-page ul.products li.product {
        float: none !important;
        width: auto !important;
        margin: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (min-width: 1024px) {
    .woocommerce .woofilters-custom-products ul.products li.product,
    .woocommerce-page .woofilters-custom-products ul.products li.product,
    .woofilters-custom-products.woocommerce ul.products li.product,
    .woofilters-custom-products.woocommerce-page ul.products li.product {
        float: none !important;
        width: auto !important;
        margin: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* 自定义产品小组件的列布局 - 使用gap和calc实现精确控制 */
.woofilters-custom-products {
    width: 100%;
    box-sizing: border-box;
    /* 移除overflow: hidden，避免最后一列被隐藏 */
    /* 强制重置所有可能的继承样式 */
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* 彻底重置产品列表容器的所有可能干扰因素 */
.woofilters-custom-products *,
.woofilters-custom-products *::before,
.woofilters-custom-products *::after {
    /* 重置所有伪元素，除了我们明确需要的 */
    box-sizing: border-box;
}

.woofilters-custom-products ul.products li.product,
.woofilters-custom-products ul.products li.product::before,
.woofilters-custom-products ul.products li.product::after {
    /* 强制清除li产品项目的所有伪元素和边距 */
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
}

/* 旧的flexbox样式已移除，使用Grid布局 */

/* Grid布局不需要固定的列数样式，完全由grid-template-columns控制 */

/* 旧的flexbox li样式已移除，使用Grid布局中的对应规则 */

/* 清除所有可能影响产品列表的伪元素 */
.woofilters-custom-products ul.products li.product::before,
.woofilters-custom-products ul.products li.product::after {
    content: none !important;
    display: none !important;
}

/* 特别确保第一个产品项目的对齐 - 不强制重置margin，保留Elementor控件控制 */
.woofilters-custom-products ul.products li.product:first-child {
    /* margin不强制重置，由Elementor控件控制 */
    text-align: inherit;
}

.woofilters-custom-products ul.products li.product:first-child::before,
.woofilters-custom-products ul.products li.product:first-child::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* 重置WooCommerce默认样式，使用CSS Grid布局 */
.woocommerce.woofilters-custom-products ul.products,
.woofilters-custom-products.woocommerce ul.products {
    display: grid !important;
    /* 移除强制列数设置，完全由Elementor控制 */
    gap: 20px !important; /* 默认间距，由Elementor控制 */
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    /* 确保Grid容器不超出父容器 */
    max-width: 100% !important;
    min-width: 0 !important;
}

.woofilters-custom-products.woocommerce ul.products li.product {
    /* Grid项目基础样式 */
    /* margin和padding不强制重置，由Elementor控件控制 */
    box-sizing: border-box !important;
    text-align: center !important; /* 产品内容居中 */
    /* 重置可能的浮动或定位 */
    float: none !important;
    position: relative !important;
    /* Grid项目自动填充，确保不超出容器 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* 确保内容不溢出 */
    overflow: hidden;
}

/* Elementor控件使用高优先级选择器 */
/* Elementor动态样式将在这里生成 */

/* 产品列表Grid基础布局（作为后备） */
.woocommerce.woofilters-custom-products ul.products.elementor-grid,
.woofilters-custom-products.woocommerce ul.products.elementor-grid {
    /* 默认使用单列布局作为后备，实际列数由Elementor控件控制 */
    grid-template-columns: repeat(1, 1fr) !important;
}

/* 保留旧的columns类名支持（兼容性） */
.woocommerce.woofilters-custom-products ul.products.columns-1,
.woofilters-custom-products.woocommerce ul.products.columns-1 {
    grid-template-columns: repeat(1, 1fr) !important;
}

.woocommerce.woofilters-custom-products ul.products.columns-2,
.woofilters-custom-products.woocommerce ul.products.columns-2 {
    grid-template-columns: repeat(2, 1fr) !important;
}

.woocommerce.woofilters-custom-products ul.products.columns-3,
.woofilters-custom-products.woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

.woocommerce.woofilters-custom-products ul.products.columns-4,
.woofilters-custom-products.woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr) !important;
}

.woocommerce.woofilters-custom-products ul.products.columns-5,
.woofilters-custom-products.woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(5, 1fr) !important;
}

.woocommerce.woofilters-custom-products ul.products.columns-6,
.woofilters-custom-products.woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(6, 1fr) !important;
}



/* Grid布局优化 - 简化设置，确保容器宽度正确 */
.woocommerce.woofilters-custom-products ul.products,
.woofilters-custom-products.woocommerce ul.products {
    /* 简化Grid布局设置 */
    grid-auto-flow: row !important;
    grid-auto-rows: max-content !important; /* 使用max-content确保行高准确 */
    /* 确保内容不超出容器 */
    max-width: 100% !important;
    overflow: visible !important;
}

/* 清除可能的干扰元素 */
.woocommerce.woofilters-custom-products ul.products::before,
.woocommerce.woofilters-custom-products ul.products::after,
.woofilters-custom-products.woocommerce ul.products::before,
.woofilters-custom-products.woocommerce ul.products::after {
    display: none !important;
    content: none !important;
}

/* 清除WooCommerce可能的伪元素干扰 */
.woocommerce.woofilters-custom-products ul.products li.product::before,
.woocommerce.woofilters-custom-products ul.products li.product::after,
.woofilters-custom-products.woocommerce ul.products li.product::before,
.woofilters-custom-products.woocommerce ul.products li.product::after {
    content: none !important;
    display: none !important;
}

/* 重置第一个产品的位置和伪元素，但保留margin可被Elementor控制 */
.woocommerce.woofilters-custom-products ul.products li.product:first-child,
.woofilters-custom-products.woocommerce ul.products li.product:first-child {
    /* 只重置不影响Elementor控件的属性 */
    text-indent: 0 !important;
    /* margin不强制重置，由Elementor控件控制 */
}

.woocommerce.woofilters-custom-products ul.products li.product:first-child::before,
.woocommerce.woofilters-custom-products ul.products li.product:first-child::after,
.woofilters-custom-products.woocommerce ul.products li.product:first-child::before,
.woofilters-custom-products.woocommerce ul.products li.product:first-child::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    /* margin和padding不强制重置，保留可被Elementor控制 */
}

/* 确保产品卡片内容充分利用可用空间 - 排除绝对定位的促销标签 */
.woofilters-custom-products ul.products li.product > *:not(.product-badge) {
    width: 100%;
    box-sizing: border-box;
}

.woofilters-custom-products ul.products li.product .product-image,
.woofilters-custom-products ul.products li.product .product-image img {
    width: 100%;
    display: block;
    box-sizing: border-box;
}

/* 移除旧的Flexbox响应式样式，使用Grid响应式 */

/* 响应式设计 - 由Elementor响应式控件管理 */
@media (max-width: 768px) {
    .woocommerce.woofilters-custom-products ul.products,
    .woofilters-custom-products.woocommerce ul.products {
        gap: 15px !important;
    }
    
    /* 仅作为后备，实际由Elementor控件控制 */
    .woocommerce.woofilters-custom-products ul.products:not([style*="grid-template-columns"]),
    .woofilters-custom-products.woocommerce ul.products:not([style*="grid-template-columns"]) {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .woocommerce.woofilters-custom-products ul.products,
    .woofilters-custom-products.woocommerce ul.products {
        gap: 10px !important;
    }
    
    /* 仅作为后备，实际由Elementor控件控制 */
    .woocommerce.woofilters-custom-products ul.products:not([style*="grid-template-columns"]),
    .woofilters-custom-products.woocommerce ul.products:not([style*="grid-template-columns"]) {
        grid-template-columns: repeat(1, 1fr) !important;
    }
    
    /* 极小屏幕页脚额外保护 */
    .site-footer,
    #footer,
    .footer {
        position: relative !important;
        z-index: 999 !important;
        margin-top: 40px !important;
        clear: both !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 极小屏幕Grid行高优化 */
    .woofilters-custom-products .products,
    .woocommerce.woofilters-custom-products .products,
    .woofilters-custom-products.woocommerce .products {
        /* 极小屏幕使用更精确的Grid行高 */
        grid-auto-rows: max-content !important;
        /* 确保Grid容器有合适的最小高度 */
        min-height: 150px !important;
    }
    
    /* 极小屏幕Elementor widget容器高度修复 */
    .elementor-widget-woofilters_products .elementor-widget-container,
    .elementor-widget-wc-products .elementor-widget-container {
        /* 极小屏幕确保容器高度正确 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除高度限制 */
        contain: none !important;
        isolation: auto !important;
    }
    
    /* 极小屏幕Elementor Grid系统高度修复 */
    .elementor-widget-woofilters_products .elementor-grid,
    .elementor-widget-wc-products .elementor-grid,
    .woofilters-custom-products .elementor-grid,
    .woocommerce.woofilters-custom-products .elementor-grid {
        /* 极小屏幕强制重置Elementor Grid的高度计算 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 确保Grid容器高度正确 */
        display: grid !important;
        grid-auto-rows: max-content !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保Grid不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 极小屏幕产品项目高度修复 */
    .elementor-widget-woofilters_products .elementor-grid .product,
    .elementor-widget-wc-products .elementor-grid .product,
    .woofilters-custom-products .elementor-grid .product,
    .woocommerce.woofilters-custom-products .elementor-grid .product {
        /* 极小屏幕确保产品项目高度正确 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保产品项目不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* 当前过滤信息样式 */
.woofilters-current-filters {
    margin-bottom: 20px;
    padding: 10px 15px;
    background: #f8f9fa;
    border-left: 4px solid #007cba;
    border-radius: 3px;
}

.woofilters-current-filters p {
    margin: 0;
    font-size: 14px;
}

/* 过滤器容器包装器 */
.woo-filters-wrapper {
    width: 100%;
    clear: both;
    /* margin-bottom 由Elementor样式控件控制，不硬编码 */
}

/* 过滤器容器 - 移除默认样式，让Elementor控制 */
.woo-filters-container {
    position: relative;
    z-index: 1;
    /* 背景、边框、内边距等样式由Elementor样式控件控制 */
}

/* 移除强制产品网格设置，让WooCommerce和Elementor自然处理 */
/* 这些样式已被移除以避免影响产品布局设置 */

/* 移除可能影响插件产品图片的全局规则 */
/* .woocommerce ul.products li.product img,
.elementor-widget-wc-products ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
} */

/* 移除可能导致冲突的样式 */
.woo-filters-container * {
    box-sizing: border-box;
}

/* 确保过滤器不影响产品布局 */
.woo-filters-container + .elementor-widget-wc-products,
.woo-filters-container + .woocommerce {
    margin-top: 0 !important;
    clear: both;
}

/* 移除响应式布局强制调整，让主题和WooCommerce处理 */

/* 过滤器组 */
.filter-group {
    margin-bottom: 25px;
}

.filter-group:last-child {
    margin-bottom: 0;
}

/* 过滤器标题 */
.filter-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 15px 0;
    padding: 0;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 8px;
}

/* 过滤器项目容器 */
.filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 过滤器项目 */
.filter-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.filter-item:last-child {
    margin-bottom: 0;
}

.filter-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
    /* 移除固定字体大小和颜色，由Elementor控件完全控制 */
    color: #555;
    margin: 0;
    padding: 0;
    line-height: 1.4;
    /* 移除过渡效果，避免悬停时的视觉变化 */
}

/* 移除标签悬停颜色变化，保持一致的视觉效果 */

/* 勾选框基础样式 - 低优先级，可被Elementor覆盖 */
.woo-filters-container .filter-item input[type="checkbox"],
.woo-filters-container .filter-item input[type="radio"] {
    margin-right: 8px;
    margin-top: 0;
    margin-bottom: 0;
    cursor: pointer;
    flex-shrink: 0;
    /* 默认样式，可被Elementor控件覆盖 */
    width: 16px !important;
    height: 16px !important;
    border: 1px solid #ddd !important;
    border-radius: 3px !important;
    background-color: #ffffff !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}

/* 勾选框选中状态样式 - 低优先级默认样式，可被Elementor覆盖 */
.woo-filters-container .filter-item input[type="checkbox"]:checked::before {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #ffffff; /* 默认白色，可被Elementor控件覆盖 */
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    z-index: 1;
}

.woo-filters-container .filter-item input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #ffffff; /* 默认白色，可被Elementor控件覆盖 */
    z-index: 1;
}

/* 确保伪元素正确显示 */
.woo-filters-container .filter-item input[type="checkbox"]:checked,
.woo-filters-container .filter-item input[type="radio"]:checked {
    position: relative;
}

/* 当Elementor样式应用时，这些默认样式会被覆盖 */

.filter-item span {
    flex: 1;
}

/* 下拉菜单样式 */
.filter-item select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    color: #555;
}

.filter-item select:focus {
    outline: none;
    /* 移除默认蓝色聚焦样式 */
}

/* 加载状态 */
.woo-filters-container.loading {
    opacity: 0.6;
    pointer-events: none;
}

.woo-filters-container.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #0073aa;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .woo-filters-container {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    .filter-title {
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .filter-item label {
        /* 移除固定字体大小，由Elementor控件完全控制 */
        /* font-size: 13px; */
    }
    
    .filter-group {
        margin-bottom: 20px;
    }
}

/* 产品列表更新动画 */
.products-updating {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.products-updated {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* ========== 页脚定位修复 ========== */

/* 确保页面主体有正确的布局结构 */
body {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 确保主要内容区域可以扩展 */
.site-main,
.content-area,
.main-content,
.page-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* 页脚基础样式 - 确保页脚始终在底部 */
.site-footer,
#footer,
.footer,
.page-footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
}

/* 防止产品列表容器影响页脚定位 */
.woofilters-custom-products,
.woocommerce.woofilters-custom-products,
.woofilters-custom-products.woocommerce {
    position: relative;
    z-index: 1;
    /* 确保容器不会溢出影响页面布局 */
    contain: layout style;
    /* 防止内容溢出影响其他元素 */
    overflow: visible;
}

/* 产品列表容器的最大高度限制 */
.woofilters-custom-products ul.products,
.woocommerce.woofilters-custom-products ul.products,
.woofilters-custom-products.woocommerce ul.products {
    /* 移除可能导致布局问题的max-height */
    max-height: none !important;
    /* 确保内容可以正常流动 */
    overflow: visible !important;
    /* 防止内容影响父级容器 */
    contain: layout;
}

/* 确保产品卡片不会影响页面布局 */
.woofilters-custom-products .product,
.woofilters-custom-products li.product {
    position: relative;
    z-index: 1;
    /* 确保产品卡片不会浮动影响布局 */
    float: none !important;
    /* 防止产品卡片内容影响页面流 */
    contain: layout style;
}

/* 页面布局修正 - 确保页脚始终可见 - 限定在产品区域 */
html.woofilters-active-page {
    height: 100%;
}

/* 已移除全局 body > .site 等样式，避免影响菜单布局 */

/* 主要内容区域样式 - 限定在产品区域，避免影响菜单 */
.woofilters-custom-products .site-content,
.woofilters-custom-products .content-area,
.elementor-widget-woofilters_products .site-content,
.elementor-widget-woofilters_products .content-area {
    flex: 1;
    position: relative;
    z-index: 1;
}

/* 页脚样式增强 */
#footer,
.site-footer,
.footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
    width: 100%;
    /* 确保页脚在所有设备上都可见 */
    display: block !important;
    visibility: visible !important;
}

/* WordPress主题兼容性 */
.elementor-page .site-footer,
.elementor-page #footer {
    position: relative;
    z-index: 10;
    margin-top: 0;
    clear: both;
}

/* 防止Elementor布局问题 - 限定在产品区域 */
.woofilters-custom-products .elementor-section-wrap,
.elementor-widget-woofilters_products .elementor-section-wrap,
.elementor-widget-wc-products .elementor-section-wrap {
    position: relative;
    z-index: 1;
}

/* 产品列表在Elementor中的布局修正 */
.elementor .woofilters-custom-products,
.elementor .woocommerce.woofilters-custom-products {
    position: relative;
    z-index: 1;
    /* 确保Elementor容器不会影响页脚 */
    contain: layout style;
}

/* 响应式页脚定位 */
@media (max-width: 768px) {
    body {
        padding-bottom: 0;
    }

    .site-footer,
    #footer,
    .footer {
        position: relative;
        margin-top: 20px;
        z-index: 10;
    }
    
    /* 移动端产品列表布局修复 - 防止与页脚重叠 */
    .woofilters-custom-products,
    .woocommerce.woofilters-custom-products,
    .woofilters-custom-products.woocommerce {
        /* 移除可能影响页脚定位的contain属性 */
        contain: none !important;
        /* 确保产品列表不会影响页脚 */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        /* 确保产品列表容器不会创建新的层叠上下文 */
        isolation: auto !important;
        /* 防止transform影响页脚定位 */
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 移动端Elementor widget容器高度修复 */
    .elementor-widget-woofilters_products .elementor-widget-container,
    .elementor-widget-wc-products .elementor-widget-container {
        /* 确保Elementor容器高度正确计算 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保容器不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
    }
    
    /* 移动端产品网格容器布局修复 */
    .woofilters-custom-products .products,
    .woocommerce.woofilters-custom-products .products,
    .woofilters-custom-products.woocommerce .products {
        /* 确保产品网格不会影响页脚 */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        /* 移除可能影响布局的transform */
        transform: none !important;
        -webkit-transform: none !important;
        /* 确保内容正常流动 */
        position: static !important;
        /* 移动端使用固定的Grid行高，确保高度计算准确 */
        grid-auto-rows: max-content !important;
        /* 确保Grid容器有最小高度，防止高度计算错误 */
        min-height: 200px !important;
    }
    
    /* 移动端产品项目布局修复 */
    .woofilters-custom-products .product,
    .woofilters-custom-products li.product {
        /* 确保产品项目不会影响页脚 */
        margin-bottom: 0 !important;
        /* 防止产品项目创建新的层叠上下文 */
        isolation: auto !important;
        /* 确保产品项目不会浮动影响布局 */
        float: none !important;
        position: relative !important;
    }
    
    /* 移动端页脚强制保护 - 确保页脚始终可见且不被重叠 */
    .site-footer,
    #footer,
    .footer,
    .elementor-section[data-element_type="footer"],
    .elementor-widget[data-widget_type="footer"] {
        position: relative !important;
        z-index: 999 !important;
        margin-top: 30px !important;
        clear: both !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        /* 确保页脚不会被产品列表覆盖 */
        background: inherit !important;
        /* 防止页脚被其他元素影响 */
        isolation: auto !important;
        contain: none !important;
    }
    
    /* 移动端页面容器布局修复 - 限定在产品筛选区域 */
    .woofilters-custom-products .site-main,
    .woofilters-custom-products .content-area,
    .woofilters-custom-products .page-content,
    .elementor-widget-woofilters_products .elementor-section-wrap,
    .elementor-widget-wc-products .elementor-section-wrap {
        /* 确保页面容器不会影响页脚定位 */
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        /* 防止容器创建新的层叠上下文 */
        isolation: auto !important;
        contain: none !important;
    }
    
    /* 移动端Elementor widget元素高度修复 */
    .elementor-widget-woofilters_products,
    .elementor-widget-wc-products {
        /* 确保Elementor widget元素高度正确 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保widget不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 移动端Elementor Grid系统高度修复 */
    .elementor-widget-woofilters_products .elementor-grid,
    .elementor-widget-wc-products .elementor-grid,
    .woofilters-custom-products .elementor-grid,
    .woocommerce.woofilters-custom-products .elementor-grid {
        /* 强制重置Elementor Grid的高度计算 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 确保Grid容器高度正确 */
        display: grid !important;
        grid-auto-rows: max-content !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保Grid不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 移动端产品项目高度修复 */
    .elementor-widget-woofilters_products .elementor-grid .product,
    .elementor-widget-wc-products .elementor-grid .product,
    .woofilters-custom-products .elementor-grid .product,
    .woocommerce.woofilters-custom-products .elementor-grid .product {
        /* 确保产品项目高度正确 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保产品项目不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* 防止弹窗影响页脚定位 - 已移除重复定义 */

/* 全局Elementor Grid高度修复 - 解决移动端产品列表与页脚重叠问题 */
@media (max-width: 768px) {
    /* 强制修复Elementor Grid系统的高度计算问题 - 移除通配符选择器避免影响菜单 */
    .elementor-widget-woofilters_products,
    .elementor-widget-wc-products,
    .woofilters-custom-products,
    .woocommerce.woofilters-custom-products {
        /* 强制重置可能影响高度计算的属性 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除布局隔离属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保元素不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
    
    /* 特别针对Grid容器 */
    .elementor-widget-woofilters_products .elementor-grid,
    .elementor-widget-wc-products .elementor-grid,
    .woofilters-custom-products .elementor-grid,
    .woocommerce.woofilters-custom-products .elementor-grid,
    .elementor-widget-woofilters_products ul.products,
    .elementor-widget-wc-products ul.products,
    .woofilters-custom-products ul.products,
    .woocommerce.woofilters-custom-products ul.products {
        /* 强制Grid容器使用正确的高度计算 */
        display: grid !important;
        grid-auto-rows: max-content !important;
        /* 确保Grid容器高度正确 */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        /* 移除可能影响高度计算的属性 */
        contain: none !important;
        isolation: auto !important;
        /* 确保Grid不会影响页脚定位 */
        position: relative !important;
        z-index: 1 !important;
        /* 确保内容正常流动 */
        overflow: visible !important;
        /* 移除可能的高度限制 */
        transform: none !important;
        -webkit-transform: none !important;
    }
}

/* 加载状态下的布局保护 */
.products-updating,
.woo-filters-container.loading {
    position: relative;
    z-index: 1;
    /* 防止加载状态影响页面布局 */
    contain: layout;
}

/* ========== 额外的页脚定位保护 ========== */

/* 确保产品列表不会创建新的层叠上下文影响页脚 */
.woofilters-custom-products,
.elementor-widget-woofilters_products,
.elementor-widget-wc-products {
    /* 防止产品列表创建新的层叠上下文 */
    isolation: auto;
    /* 确保内容不会溢出容器边界 */
    contain: layout style;
    /* 防止transform影响页脚定位 */
    transform: none !important;
    -webkit-transform: none !important;
}

/* 产品网格容器的布局保护 */
.woofilters-custom-products .products,
.woocommerce.woofilters-custom-products .products,
.woofilters-custom-products.woocommerce .products {
    /* 移除可能导致布局问题的CSS属性 */
    transform: none !important;
    -webkit-transform: none !important;
    /* 确保内容正常流动 */
    position: static !important;
    /* 防止内容影响页脚 */
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 防止无限滚动或懒加载影响页脚 */
.woofilters-custom-products .product:last-child,
.woofilters-custom-products li.product:last-child {
    /* 确保最后一个产品项目不会影响页脚定位 */
    margin-bottom: 0 !important;
    /* 防止margin collapse问题 */
    clear: both;
}

/* 页面容器布局保护 */
.elementor-container,
.elementor-section-wrap,
.site-main .elementor,
.page-content .elementor {
    position: relative;
    z-index: 1;
    /* 确保Elementor容器不会影响页脚 */
    contain: layout style;
}

/* 特别处理WordPress默认主题 */
.theme-twentytwentyone .site-footer,
.theme-twentytwentytwo .site-footer,
.theme-twentytwentythree .site-footer,
.theme-twentytwentyfour .site-footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
    width: 100%;
}

/* 防止插件冲突影响页脚 */
.plugin-conflict-protection .woofilters-custom-products {
    /* 如果与其他插件有冲突时的保护措施 */
    position: relative !important;
    z-index: 1 !important;
    contain: layout style !important;
    isolation: auto !important;
}

/* 确保页脚在所有情况下都可见 */
#footer::after,
.site-footer::after,
.footer::after {
    content: '';
    display: table;
    clear: both;
}

/* ========== 主题兼容性增强 ========== */

/* 针对常见WordPress主题的页脚定位修复 */
.ast-container .site-footer,
.ast-container #footer,
.ast-container .footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
}

/* GeneratePress主题兼容性 */
.generatepress .site-footer,
.generatepress #footer {
    position: relative;
    z-index: 10;
    margin-top: 0;
    clear: both;
}

/* OceanWP主题兼容性 */
.oceanwp .site-footer,
.oceanwp #footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
}

/* Astra主题兼容性 */
.ast-theme-transparent-header .site-footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
}

/* Divi主题兼容性 */
.et_pb_footer {
    position: relative !important;
    z-index: 10 !important;
    margin-top: auto !important;
    clear: both !important;
}

/* Avada主题兼容性 */
.fusion-footer {
    position: relative !important;
    z-index: 10 !important;
    margin-top: auto !important;
    clear: both !important;
}

/* 针对页面构建器的页脚处理 */
.page-id-has-footer .site-footer,
.page-id-has-footer #footer {
    position: relative;
    z-index: 10;
    margin-top: auto;
    clear: both;
}

/* 确保产品列表在所有主题下都不会影响页脚 */
.theme-woocommerce .woofilters-custom-products,
.theme-storefront .woofilters-custom-products,
.theme-woodmart .woofilters-custom-products,
.theme-flatsome .woofilters-custom-products {
    /* 针对电商主题的特殊处理 */
    position: relative;
    z-index: 1;
    contain: layout style;
    isolation: auto;
}

/* 最后的保护措施 - 确保页脚始终可见 */
body:not(.elementor-editor-active) .site-footer,
body:not(.elementor-editor-active) #footer,
body:not(.elementor-editor-active) .footer {
    /* 在非Elementor编辑器模式下，确保页脚可见 */
    position: relative !important;
    z-index: 10 !important;
    margin-top: auto !important;
    clear: both !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 无产品提示 */
.woocommerce-info {
    background: #f7f7f7;
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
    text-align: center;
    color: #666;
    font-style: italic;
}

/* 过滤器计数 */
.filter-count {
    font-size: 12px;
    color: #999;
    margin-left: 5px;
}

/* 移除勾选状态的蓝色样式 */

/* 新的折叠功能样式 */
.filter-group.collapsible .filter-title.collapsible-title {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    user-select: none;
    transition: color 0.15s ease-out; /* 更快的响应时间 */
}

.filter-group.collapsible .filter-title.collapsible-title:hover {
    opacity: 0.8;
}

.filter-group.collapsible .collapse-icon {
    display: inline-flex;
    align-items: center;
    transition: transform 0.2s ease-out; /* 更快的动画时间和更平滑的缓动 */
    margin-left: 8px;
}

.filter-group.collapsible.collapsed .collapse-icon {
    transform: rotate(-90deg);
}

.filter-group.collapsible .filter-options {
    overflow: hidden;
}

.filter-group.collapsible:not(.collapsed) .filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group.collapsible.collapsed .filter-options {
    display: none;
}

/* 自定义滚动条 */
.filter-options::-webkit-scrollbar {
    width: 6px;
}

.filter-options::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.filter-options::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.filter-options::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* 移除悬停背景效果，避免高度变化 */

/* 移除默认阴影效果，让Elementor样式控件控制 */

/* 重置产品li元素的默认hover阴影效果 - 但允许Elementor控件覆盖 */
.woocommerce ul.products li.product:hover,
.elementor-widget-wc-products ul.products li.product:hover,
.woofilters-custom-products ul.products li.product:hover,
.woocommerce.woofilters-custom-products ul.products li.product:hover,
.woofilters-custom-products.woocommerce ul.products li.product:hover {
    /* 只重置可能影响布局的transform和transition */
    /* box-shadow、border、background等由Elementor控件完全控制，不重置 */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    /* 移除可能的transition效果，让Elementor控件管理 */
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* 进一步重置 - 针对可能的主题和WooCommerce默认样式，但保留Elementor控件权限 */
body .woocommerce ul.products li.product:hover,
body .elementor-widget-wc-products ul.products li.product:hover,
body .woofilters-custom-products ul.products li.product:hover,
body .woocommerce.woofilters-custom-products ul.products li.product:hover,
body .woofilters-custom-products.woocommerce ul.products li.product:hover,
/* 针对可能的WordPress主题样式 */
body.woocommerce ul.products li.product:hover,
body .woocommerce-page ul.products li.product:hover,
/* 针对Elementor环境 */
.elementor .elementor-element .woocommerce ul.products li.product:hover,
.elementor .elementor-element .elementor-widget-wc-products ul.products li.product:hover,
.elementor .elementor-element .woofilters-custom-products ul.products li.product:hover {
    /* 只重置可能影响布局的属性 */
    /* box-shadow、border、background等由Elementor控件完全控制，不重置 */
    /* 移除可能的缩放效果 */
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    /* 移除transition效果，让Elementor控件管理 */
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* 特别针对自定义产品组件的重置 - 默认状态下不显示任何阴影 */
/* 注意：只对.product类应用，不影响li.product的Elementor控件 */
.woofilters-custom-products .product:not(li) {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* 默认情况下的hover状态也不显示阴影 - 只有在Elementor中启用才显示 */
/* 注意：只对.product类应用，不影响li.product的Elementor控件 */
.woofilters-custom-products .product:hover:not(li) {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    -ms-box-shadow: none !important;
    -o-box-shadow: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    -ms-transform: none !important;
    -o-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
}

/* 移除所有可能导致产品变小的CSS规则 */
/* 这些规则已被注释掉以避免影响产品卡片大小 */

/*
.woo-filters-updated .woocommerce ul.products.elementor-grid li.product {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
}

.woo-filters-updated .woocommerce ul.products.elementor-grid.columns-3 li.product {
    flex-basis: calc(33.333% - 20px);
    max-width: calc(33.333% - 20px);
}

.woo-filters-updated .woocommerce ul.products.elementor-grid.columns-4 li.product {
    flex-basis: calc(25% - 20px);
    max-width: calc(25% - 20px);
}

.woo-filters-updated .woocommerce ul.products.elementor-grid.columns-2 li.product {
    flex-basis: calc(50% - 20px);
    max-width: calc(50% - 20px);
}

.woo-filters-updated .woocommerce ul.products.elementor-grid li.product img {
    width: 100%;
    height: auto;
    max-width: 100%;
}
*/

/* 产品更新时的过渡效果 */
.woocommerce ul.products.elementor-grid {
    transition: opacity 0.3s ease;
}

.products-updating .woocommerce ul.products.elementor-grid {
    opacity: 0.7;
}

/* 移除移动端强制响应式调整 */

/* URL参数方式下的加载状态 */
.woo-filters-container.loading {
    position: relative;
}

.woo-filters-container.loading::after {
    content: '正在加载...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 1000;
}

/* 移除勾选状态的多余样式指示器和边框 */

/* 移除标题状态指示的蓝色 */

/* 过滤器容器状态指示 */
/* 移除更新方式指示边框 */

.woo-filters-container[data-update-method="ajax"] {
    border-left: 3px solid #28a745;
}

/* 加载动画 */
@keyframes wooFiltersPulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.woo-filters-container.loading .filter-item {
    animation: wooFiltersPulse 1.5s infinite;
}

/* AJAX加载遮罩 */
.woofilters-loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.woofilters-loading.show {
    display: flex;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #0073aa;
    border-radius: 50%;
    animation: woofilters-spin 1s linear infinite;
    margin-bottom: 15px;
}

@keyframes woofilters-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.woofilters-loading p {
    color: white;
    font-size: 16px;
    margin: 0;
    text-align: center;
}

/* 结果计数样式 */
.woofilters-results-count {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px 12px;
    margin-top: 15px;
    font-size: 14px;
    color: #666;
    text-align: center;
}

/* 产品列表渐入动画 */
.products {
    animation: woofilters-fadeIn 0.3s ease-in;
}

@keyframes woofilters-fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 移除过滤器状态指示边框 */

/* 确保AJAX更新后产品卡片保持正确尺寸 */
.elementor-widget-wc-products ul.products li.product,
.woocommerce ul.products li.product {
    box-sizing: border-box !important;
}

/* 防止AJAX更新破坏Elementor网格 */
.elementor-widget-wc-products ul.products.elementor-grid li.product {
    margin-bottom: 20px !important;
}

/* 确保产品图片不被压缩 */
/* 移除强制的图片样式设置，允许Elementor控件控制 */
.elementor-widget-wc-products ul.products li.product img,
.woocommerce ul.products li.product img {
    /* width, height, object-fit 由Elementor控件控制 */
    display: block;
}

/* 
 * 移除所有强制产品网格样式
 * 让WooCommerce和Elementor的原始设置正常工作
 * 插件不再干预产品列表的布局设置
 */

/* 当前筛选条件显示 */
.woofilters-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.woofilters-active-filters:empty {
    display: none;
}

.active-filter-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.active-filter-item.clear-all-filters {
    order: -1; /* 确保"清除所有"按钮在第一位 */
}

.remove-filter-link,
.clear-all-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 20px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    line-height: 1.2;
    vertical-align: middle;
    transition: all 0.3s ease;
}

.remove-filter-link:hover,
.clear-all-link:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
    color: #212529;
    text-decoration: none;
}

.clear-all-link {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #fff;
    font-weight: 500;
}

.clear-all-link:hover {
    background-color: #c82333;
    border-color: #bd2130;
    color: #fff;
}

.filter-text {
    font-size: inherit;
    line-height: 1.2;
    display: inline-flex;
    align-items: center;
}

.remove-icon {
    font-size: 16px;
    font-weight: bold;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
}

.remove-filter-link:hover .remove-icon,
.clear-all-link:hover .remove-icon {
    opacity: 1;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .woofilters-active-filters {
        gap: 6px;
    }
    
    .remove-filter-link,
    .clear-all-link {
        padding: 5px 10px;
        font-size: 13px;
        gap: 4px;
        line-height: 1.2;
    }
    
    .remove-icon {
        font-size: 14px;
        width: 14px;
        height: 14px;
    }
}

/* 自定义产品列表元素样式 */
.woofilters-custom-products ul.products li.product {
    position: relative;
    /* 保留其他基础样式，让Elementor控件控制margin、padding、box-shadow等 */
}

.woofilters-custom-products .product-image {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    width: 100%;
}

/* 自动比例模式：不固定容器高度，让object-fit效果更明显 */
.woofilters-custom-products .product-image:not([data-aspect-ratio]) {
    min-height: 180px;
    max-height: 280px;
    height: auto;
}

.woofilters-custom-products .product-image img {
    /* 固定样式：图片比例不变，100%填充父级容器，中心居中，接受边缘剪裁 */
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
    display: block;
    object-fit: cover !important;
    object-position: center !important;
}

/* 只对没有设置aspect-ratio的图片应用自动高度 */
.woofilters-custom-products .product-image:not([data-aspect-ratio]) img {
    height: auto !important;
    /* 在自动比例模式下，为不同object-fit值提供更明显的视觉效果 */
    min-height: 150px;
    max-height: 300px;
}

/* 图片比例控制 - 基于data属性 */
.woofilters-custom-products .product-image[data-aspect-ratio="1:1"] {
    aspect-ratio: 1;
}

.woofilters-custom-products .product-image[data-aspect-ratio="4:3"] {
    aspect-ratio: 4/3;
}

.woofilters-custom-products .product-image[data-aspect-ratio="16:9"] {
    aspect-ratio: 16/9;
}

.woofilters-custom-products .product-image[data-aspect-ratio="3:4"] {
    aspect-ratio: 3/4;
}

/* 有比例设置的图片容器 - 强制覆盖默认样式 */
.woofilters-custom-products .product-image[data-aspect-ratio] {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    /* aspect-ratio 已经在上面具体设置了 */
    /* 确保容器有明确的尺寸，使object-fit正常工作 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.woofilters-custom-products .product-image[data-aspect-ratio] a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    text-decoration: none !important;
    /* 不使用flex布局，让图片自然填充 */
}

.woofilters-custom-products .product-image[data-aspect-ratio] img {
    /* 固定样式：图片比例不变，100%填充父级容器，中心居中，接受边缘剪裁 */
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    min-width: 100%;
    min-height: 100%;
}



/* 图片悬停效果 */
.woofilters-custom-products .product-image.hover-zoom:hover img {
    transform: scale(1.1);
}

.woofilters-custom-products .product-image.hover-fade:hover img {
    opacity: 0.8;
}

.woofilters-custom-products .product-image.hover-slide:hover img {
    transform: translateY(-5px);
}

/* 固定图片样式：比例不变，100%填充父级容器，中心居中，接受边缘剪裁 */
body .elementor .elementor-element .woofilters-custom-products .product-image img,
body .woocommerce .woofilters-custom-products .product-image img,
body .woofilters-custom-products .product-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none;
    min-width: 100%;
    min-height: 100%;
    /* 保留圆角设置 - 不覆盖border-radius */
}

/* 确保容器正确设置，圆角由Elementor控件统一管理 */
body .elementor .elementor-element .woofilters-custom-products .product-image[data-aspect-ratio],
body .woocommerce .woofilters-custom-products .product-image[data-aspect-ratio],
body .woofilters-custom-products .product-image[data-aspect-ratio] {
    position: relative !important;
    width: 100% !important;
    /* overflow和border-radius由Elementor控件管理 */
}

/* 确保链接正确设置 */
body .elementor .elementor-element .woofilters-custom-products .product-image[data-aspect-ratio] a,
body .woocommerce .woofilters-custom-products .product-image[data-aspect-ratio] a,
body .woofilters-custom-products .product-image[data-aspect-ratio] a {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    text-decoration: none !important;
    /* 不使用flex布局，让图片自然填充 */
}

/* 有宽高比的图片悬停效果 - 保持比例控制和圆角设置 */
.woofilters-custom-products .product-image[data-aspect-ratio].hover-zoom:hover img {
    transform: scale(1.1) !important;
    /* 保留圆角设置 - 不覆盖border-radius */
}

.woofilters-custom-products .product-image[data-aspect-ratio].hover-fade:hover img {
    opacity: 0.8 !important;
    /* 保留圆角设置 - 不覆盖border-radius */
}

.woofilters-custom-products .product-image[data-aspect-ratio].hover-slide:hover img {
    transform: translateY(-5px) !important;
    /* 保留圆角设置 - 不覆盖border-radius */
}

/* 确保Elementor圆角控件设置能够正常工作 - 移除可能干扰的高优先级选择器 */
/* 这里不再设置高优先级的图片样式，避免覆盖Elementor的动态CSS */

/* ========== 分类过滤器图片显示样式 ========== */

/* 分类网格布局 */
.category-grid,
.attribute-grid {
    display: grid;
    /* 默认间距，由Elementor控件覆盖 */
    gap: 10px;
    margin-top: 10px;
    /* 强化容器约束 - 确保网格不超出父容器 */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* 等高设置 - 让所有网格项目具有相同高度 */
    grid-auto-rows: 1fr;
    align-items: stretch;
    /* 防止内容溢出 */
    overflow: hidden;
    /* 确保网格容器在父级内 */
    contain: layout style;
}

/* 强制所有分类容器使用border-box，确保内边距不会增加总宽度 */
.category-grid .category-image-container,
.category-grid .category-image-text-container,
.category-grid .category-image-wrapper,
.category-grid .filter-item .category-image-container,
.category-grid .filter-item .category-image-text-container,
.category-grid .filter-item .category-image-wrapper,

/* 为attribute-grid添加相同的样式 */
.attribute-grid .filter-item {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* 桌面版列数（默认） */
.category-grid-1,
.attribute-grid-1 { grid-template-columns: repeat(1, 1fr) !important; }

.category-grid-2,
.attribute-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }

.category-grid-3,
.attribute-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }

.category-grid-4,
.attribute-grid-4 { grid-template-columns: repeat(4, 1fr) !important; }

.category-grid-5,
.attribute-grid-5 { grid-template-columns: repeat(5, 1fr) !important; }

.category-grid-6,
.attribute-grid-6 { grid-template-columns: repeat(6, 1fr) !important; }

/* 响应式列数控制 - 使用CSS自定义属性（新方法） */
.category-grid[style*="--columns-desktop"][class*="category-grid-"],
.attribute-grid[style*="--columns-desktop"][class*="attribute-grid-"] {
    /* 默认桌面版列数 */
    grid-template-columns: repeat(var(--columns-desktop, 3), 1fr) !important;
}

/* 如果只有部分变量设置，确保其他变量有合理的默认值 */
.category-grid[style*="--columns-desktop"]:not([style*="--columns-tablet"]),
.attribute-grid[style*="--columns-desktop"]:not([style*="--columns-tablet"]) {
    --columns-tablet: var(--columns-desktop);
}

.category-grid[style*="--columns-tablet"]:not([style*="--columns-mobile"]),
.attribute-grid[style*="--columns-tablet"]:not([style*="--columns-mobile"]) {
    --columns-mobile: var(--columns-tablet);
}

/* 响应式断点 - 传统类名支持（兼容性） */
@media (max-width: 1024px) {
    /* CSS自定义属性响应式 - 最高优先级 */
    .category-grid[style*="--columns-tablet"][class*="category-grid-"],
    .attribute-grid[style*="--columns-tablet"][class*="attribute-grid-"] {
        grid-template-columns: repeat(var(--columns-tablet, 2), 1fr) !important;
    }

    /* 传统类名响应式支持 - 只对没有CSS变量的元素生效 */
    .category-grid:not([style*="--columns-tablet"]).category-grid-4,
    .category-grid:not([style*="--columns-tablet"]).category-grid-5,
    .category-grid:not([style*="--columns-tablet"]).category-grid-6,
    .attribute-grid:not([style*="--columns-tablet"]).attribute-grid-4,
    .attribute-grid:not([style*="--columns-tablet"]).attribute-grid-5,
    .attribute-grid:not([style*="--columns-tablet"]).attribute-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important; /* 平板最多3列 */
    }

    .category-grid:not([style*="--columns-tablet"]).category-grid-3,
    .attribute-grid:not([style*="--columns-tablet"]).attribute-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important; /* 3列变2列 */
    }

    .category-grid:not([style*="--columns-tablet"]).category-grid-2,
    .attribute-grid:not([style*="--columns-tablet"]).attribute-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important; /* 2列保持2列 */
    }

    .category-grid:not([style*="--columns-tablet"]).category-grid-1,
    .attribute-grid:not([style*="--columns-tablet"]).attribute-grid-1 {
        grid-template-columns: repeat(1, 1fr) !important; /* 1列保持1列 */
    }
}

@media (max-width: 767px) {
    /* CSS自定义属性响应式 - 最高优先级 */
    .category-grid[style*="--columns-mobile"][class*="category-grid-"],
    .attribute-grid[style*="--columns-mobile"][class*="attribute-grid-"] {
        grid-template-columns: repeat(var(--columns-mobile, 1), 1fr) !important;
    }

    /* 传统类名响应式支持 - 只对没有CSS变量的元素生效 */
    .category-grid:not([style*="--columns-mobile"]).category-grid-3,
    .category-grid:not([style*="--columns-mobile"]).category-grid-4,
    .category-grid:not([style*="--columns-mobile"]).category-grid-5,
    .category-grid:not([style*="--columns-mobile"]).category-grid-6,
    .attribute-grid:not([style*="--columns-mobile"]).attribute-grid-3,
    .attribute-grid:not([style*="--columns-mobile"]).attribute-grid-4,
    .attribute-grid:not([style*="--columns-mobile"]).attribute-grid-5,
    .attribute-grid:not([style*="--columns-mobile"]).attribute-grid-6 {
        grid-template-columns: repeat(1, 1fr) !important; /* 多列变单列 */
    }

    .category-grid:not([style*="--columns-mobile"]).category-grid-2,
    .attribute-grid:not([style*="--columns-mobile"]).attribute-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important; /* 2列保持2列 */
    }
}

@media (max-width: 480px) {
    /* 极小屏幕统一单列 - 只对没有CSS变量的元素生效 */
    .category-grid:not([style*="--columns-"]).category-grid-2,
    .category-grid:not([style*="--columns-"]).category-grid-3,
    .category-grid:not([style*="--columns-"]).category-grid-4,
    .category-grid:not([style*="--columns-"]).category-grid-5,
    .category-grid:not([style*="--columns-"]).category-grid-6,
    .attribute-grid:not([style*="--columns-"]).attribute-grid-2,
    .attribute-grid:not([style*="--columns-"]).attribute-grid-3,
    .attribute-grid:not([style*="--columns-"]).attribute-grid-4,
    .attribute-grid:not([style*="--columns-"]).attribute-grid-5,
    .attribute-grid:not([style*="--columns-"]).attribute-grid-6 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* 分类图片项目样式 */
.category-image-item {
    margin: 0 !important;
    background: transparent !important; /* 确保不会继承背景 */
    padding: 0 !important; /* 确保不会继承内边距 */
    width: 100% !important; /* 防止宽度问题 */
    max-width: 100% !important; /* 确保不超出父容器 */
    height: 100% !important; /* 等高支持 */
    min-width: 0 !important; /* 允许缩小 */
    box-sizing: border-box !important;
    /* 等高布局支持 */
    display: flex !important;
    flex-direction: column !important;
    /* 移除边框、圆角、阴影的强制重置，让Elementor控件能够正确控制.category-image-container */
}

.category-image-label {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* 等高支持 */
    cursor: pointer;
    overflow: hidden;
    /* 移除悬停动画效果 */
}

/* 移除悬停动画效果 */
/* .category-image-label:hover {
    transform: translateY(-2px);
} */

/* 基础容器样式 - 仅保留布局必要的样式，其他由Elementor控件控制 */
.category-image-container {
    position: relative;
    /* 强化容器宽度约束 - 防止超出父级，确保内边距包含在总宽度内 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 关键：确保内边距、边框包含在总宽度内 */
    box-sizing: border-box !important;
    /* 等高布局支持 */
    flex-grow: 1;
    flex-shrink: 1; /* 允许收缩以适应容器 */
    /* 动态计算高度，保持宽高比 */
    aspect-ratio: 1;
    /* 优化的高度限制，使用相对单位避免超出问题 */
    min-height: 20px;
    max-height: min(200px, 100%);
    /* 防止间距和内边距导致超出 */
    contain: layout size;
}

/* 删除重复的--grid-columns系统，保持--columns-*系统的一致性 */

/* ========== 产品分类过滤器网格布局 (已废弃) ========== */
.category-filter-grid {
    display: grid;
    gap: 8px;
    width: 100%;
    /* 默认桌面版列数 */
    grid-template-columns: repeat(var(--columns-desktop, 3), 1fr);
    /* 响应式基础设置 */
    box-sizing: border-box;
}

.category-filter-grid-1 { grid-template-columns: repeat(1, 1fr); }
.category-filter-grid-2 { grid-template-columns: repeat(2, 1fr); }
.category-filter-grid-3 { grid-template-columns: repeat(3, 1fr); }
.category-filter-grid-4 { grid-template-columns: repeat(4, 1fr); }
.category-filter-grid-5 { grid-template-columns: repeat(5, 1fr); }
.category-filter-grid-6 { grid-template-columns: repeat(6, 1fr); }

/* 平板端响应式 (≤1024px) */
@media (max-width: 1024px) {
    .category-filter-grid {
        grid-template-columns: repeat(var(--columns-tablet, 2), 1fr) !important;
    }

    .category-filter-grid-4,
    .category-filter-grid-5,
    .category-filter-grid-6 {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .category-filter-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .category-filter-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .category-filter-grid-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* 手机端响应式 (≤767px) */
@media (max-width: 767px) {
    .category-filter-grid {
        grid-template-columns: repeat(var(--columns-mobile, 1), 1fr) !important;
    }

    .category-filter-grid-3,
    .category-filter-grid-4,
    .category-filter-grid-5,
    .category-filter-grid-6 {
        grid-template-columns: repeat(1, 1fr) !important;
    }

    .category-filter-grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .category-filter-grid-1 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* 极小屏幕 (≤480px) */
@media (max-width: 480px) {
    .category-filter-grid-2,
    .category-filter-grid-3,
    .category-filter-grid-4,
    .category-filter-grid-5,
    .category-filter-grid-6 {
        grid-template-columns: repeat(1, 1fr) !important;
    }
}

/* 分类过滤器网格项目样式 */
.category-filter-grid .filter-item {
    width: 100%;
    box-sizing: border-box;
    min-width: 0; /* 防止内容溢出 */
}

/* 确保标签云项目也能适应网格 */
.category-filter-grid .tag-cloud-item {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}

.category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-image-placeholder {
    text-align: center;
    padding: 10px;
    word-break: break-word;
}

/* 分类图片+文本项目样式 */
.category-image-text-item {
    margin: 0 !important;
    background: transparent !important; /* 确保不会继承背景 */
    padding: 0 !important; /* 确保不会继承内边距 */
    width: 100% !important; /* 防止宽度问题 */
    max-width: 100% !important; /* 确保不超出父容器 */
    height: 100% !important; /* 等高支持 */
    min-width: 0 !important; /* 允许缩小 */
    box-sizing: border-box !important;
    /* 等高布局支持 */
    display: flex !important;
    flex-direction: column !important;
    /* 移除边框、圆角、阴影的强制重置，让Elementor控件能够正确控制.category-image-text-container */
}

.category-image-text-label {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important; /* 等高支持 */
    cursor: pointer;
    overflow: hidden;
    /* 移除悬停动画效果 */
    text-align: center;
}

/* 移除悬停动画效果 */
/* .category-image-text-label:hover {
    transform: translateY(-2px);
} */

.category-image-text-container {
    /* 所有样式由Elementor控件控制 */
    /* 移除边框、圆角、阴影的强制重置，让Elementor控件能够正确控制样式 */
    /* 不再强制重置，让Elementor选择器具有完全控制权 */
    /* 强化容器宽度约束 - 防止超出父级，确保内边距包含在总宽度内 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    /* 关键：确保内边距、边框包含在总宽度内 */
    box-sizing: border-box !important;
    /* 等高布局支持 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 图片和文本间的均匀分布 */
    /* 防止间距和内边距导致超出 */
    contain: layout;
}

.category-image-wrapper {
    /* 强化容器宽度约束 - 防止超出父级，确保内边距包含在总宽度内 */
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* 关键：确保内边距、边框包含在总宽度内 */
    box-sizing: border-box !important;
    /* 等高布局中的图片区域支持 */
    flex-shrink: 0; /* 防止图片区域被压缩 */
    /* 动态计算高度，保持宽高比 */
    aspect-ratio: 1;
    /* 优化的高度限制，使用相对单位避免超出问题 */
    min-height: 20px;
    max-height: min(200px, 100%);
    /* 防止间距和内边距导致超出 */
    contain: layout size;
}

.category-image-wrapper .category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.category-image-wrapper .category-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.category-text {
    line-height: 1.3;
    word-break: break-word;
    /* 移除固定字体大小和颜色，由Elementor控件完全控制 */
    margin-top: 8px;
    /* 等高布局中的文本区域支持 */
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* 为分类图片标题添加专门的类名，避免与其他label冲突 */
.category-title {
    /* 基础样式由Elementor控件完全控制 */
    display: block;
    word-break: break-word;
    /* 等高布局支持 */
    text-align: center;
    line-height: 1.3;
}

/* 移除了强制重置规则，让Elementor控件完全控制分类图片样式 */

/* 移除了超强优先级重置规则，让Elementor控件完全控制样式 */

/* 隐藏原始复选框/单选框 */
.category-image-item input[type="checkbox"],
.category-image-item input[type="radio"],
.category-image-text-item input[type="checkbox"],
.category-image-text-item input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    clip: rect(0, 0, 0, 0) !important;
}

/* 选中状态样式 - 由Elementor控件控制 */

/* 移除强制响应式覆盖，让Elementor响应式控件完全控制列数 */
/* 原来的强制覆盖已移除，现在由Elementor控件管理所有断点的列数设置 */

.woofilters-custom-products .product-category {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 5px;
}

.woofilters-custom-products .product-category a {
    text-decoration: none;
    color: inherit;
}

.woofilters-custom-products .product-category a:hover {
    text-decoration: underline;
}

/* 移除重复的product-badge样式定义，避免与促销标签Elementor控件冲突 */
/* 此样式已在下方的 "========== 促销标签样式 ==========" 区域中统一定义 */

.woofilters-custom-products .product-title {
    padding: 10px 0;
    margin: 0;
    line-height: 1.4;
}

.woofilters-custom-products .product-title a {
    text-decoration: none;
    color: inherit;
}

.woofilters-custom-products .product-title a:hover {
    text-decoration: underline;
}

.woofilters-custom-products .product-rating {
    margin: 8px 0;
}

.woofilters-custom-products .product-rating .star-rating {
    font-size: 14px;
}

.woofilters-custom-products .product-price {
    margin: 10px 0;
    font-weight: bold;
}

.woofilters-custom-products .product-price del {
    opacity: 0.6;
    margin-right: 5px;
}

.woofilters-custom-products .product-excerpt {
    font-size: 14px;
    line-height: 1.5;
    margin: 8px 0;
    color: #666;
}

.woofilters-custom-products .product-stock {
    margin: 8px 0;
    font-size: 12px;
}

.woofilters-custom-products .product-stock .in-stock {
    color: #4caf50;
}

.woofilters-custom-products .product-stock .low-stock {
    color: #ff9800;
}

.woofilters-custom-products .product-stock .out-of-stock {
    color: #f44336;
}

.woofilters-custom-products .product-stock .on-backorder {
    color: #2196f3;
}

.woofilters-custom-products .product-button-wrapper {
    margin-top: 10px;
}

.woofilters-custom-products .product-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    background: #2196f3;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
}

.woofilters-custom-products .product-button:hover {
    background: #1976d2;
    color: white;
    text-decoration: none;
}

.woofilters-custom-products .product-button.disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
}

.woofilters-custom-products .product-button.disabled:hover {
    background: #ccc;
    color: #666;
}

/* 按钮图标样式 */
.woofilters-custom-products .product-button .cart-icon {
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

/* Font Awesome 图标 (i标签) */
.woofilters-custom-products .product-button .cart-icon i {
    font-size: inherit;
    line-height: 1;
}

/* Elementor SVG 图标 */
.woofilters-custom-products .product-button .cart-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
}

.woofilters-custom-products .product-button .cart-icon .e-font-icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.woofilters-custom-products .product-button .cart-text {
    font-size: inherit;
    line-height: 1;
}

/* 仅图标按钮样式 */
.woofilters-custom-products .product-button.button-style-icon_only {
    padding: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.woofilters-custom-products .product-button.button-style-icon_only .cart-icon {
    font-size: 18px;
}

.woofilters-custom-products .product-button.button-style-icon_only .cart-icon i {
    font-size: 18px;
}

.woofilters-custom-products .product-button.button-style-icon_only .cart-icon svg {
    width: 18px;
    height: 18px;
}

/* 图标+文字按钮样式 */
.woofilters-custom-products .product-button.button-style-icon_text {
    gap: 8px;
}

.woofilters-custom-products .product-button.button-style-icon_text .cart-icon {
    font-size: 14px;
}

.woofilters-custom-products .product-button.button-style-icon_text .cart-icon i {
    font-size: 14px;
}

.woofilters-custom-products .product-button.button-style-icon_text .cart-icon svg {
    width: 14px;
    height: 14px;
}

/* ========== 第二阶段：高级布局样式 ========== */

/* 覆盖布局样式 */
.woofilters-custom-products .product.layout-overlay {
    position: relative;
}

.woofilters-custom-products .product.layout-overlay .product-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.woofilters-custom-products .product.layout-overlay .product-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woofilters-custom-products .product.layout-overlay .product-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 20px 15px 15px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.woofilters-custom-products .product.layout-overlay:hover .product-overlay {
    transform: translateY(0);
}

.woofilters-custom-products .product.layout-overlay .product-overlay .product-button {
    background: rgba(255,255,255,0.9);
    color: #333;
    border: none;
}

.woofilters-custom-products .product.layout-overlay .product-overlay .product-button:hover {
    background: #fff;
}

.woofilters-custom-products .product.layout-overlay .product-content {
    padding: 15px 5px 5px;
}

/* 横向布局样式 */
.woofilters-custom-products .product.layout-side {
    display: flex;
    align-items: flex-start;
    text-align: left;
    gap: 15px;
}

.woofilters-custom-products .product.layout-side .product-image-container {
    flex: 0 0 120px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woofilters-custom-products .product.layout-side .product-image {
    margin-bottom: 0;
}

.woofilters-custom-products .product.layout-side .product-image img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
}

.woofilters-custom-products .product.layout-side .product-content {
    flex: 1;
    padding: 5px 0;
}

.woofilters-custom-products .product.layout-side .product-title {
    padding: 0 0 8px 0;
    margin: 0;
    font-size: 16px;
}

.woofilters-custom-products .product.layout-side .product-rating {
    margin: 5px 0;
}

.woofilters-custom-products .product.layout-side .product-price {
    margin: 8px 0;
    font-size: 18px;
}

.woofilters-custom-products .product.layout-side .product-excerpt {
    margin: 8px 0;
    font-size: 13px;
    color: #666;
}

.woofilters-custom-products .product.layout-side .product-button-wrapper {
    margin-top: 12px;
}

/* 极简布局样式 */
.woofilters-custom-products .product.layout-minimal {
    text-align: center;
}

.woofilters-custom-products .product.layout-minimal .product-image-container {
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.woofilters-custom-products .product.layout-minimal .product-image img {
    border-radius: 6px;
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}

.woofilters-custom-products .product.layout-minimal .product-content {
    padding: 5px;
}

.woofilters-custom-products .product.layout-minimal .product-title {
    padding: 0 0 8px 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

.woofilters-custom-products .product.layout-minimal .product-price {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

/* 隐藏极简布局中不需要的元素 */
.woofilters-custom-products .product.layout-minimal .product-rating,
.woofilters-custom-products .product.layout-minimal .product-excerpt,
.woofilters-custom-products .product.layout-minimal .product-stock,
.woofilters-custom-products .product.layout-minimal .product-category,
.woofilters-custom-products .product.layout-minimal .product-button-wrapper {
    display: none;
}

/* 默认布局样式优化 - 移除默认hover效果，由Elementor控件控制 */
.woofilters-custom-products .product.layout-default {
    text-align: center;
    /* 移除默认的transition和hover效果，让用户在Elementor中自定义 */
}

/* 通用的图片容器样式 */
.woofilters-custom-products .product-image-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ========== 促销标签样式 ========== */

/* 重置WooCommerce默认的促销标签样式 - 使用极高优先级 */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale,
body.woocommerce ul.products li.product .onsale,
body.woocommerce-page ul.products li.product .onsale,
/* 额外的高优先级选择器 */
.woofilters-custom-products.woocommerce ul.products li.product .onsale,
.woocommerce.woofilters-custom-products ul.products li.product .onsale,
body .woofilters-custom-products ul.products li.product .onsale {
    /* 重置WooCommerce默认样式 */
    top: auto !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
    min-width: auto !important;
    min-height: auto !important;
    transform: none !important;
    border-radius: 0 !important;
    /* 让我们的样式控制 */
    position: absolute !important;
}

/* 基础标签样式 - 使用超高优先级选择器确保不受其他规则影响，但不设置默认样式 */
body .woofilters-custom-products ul.products li.product .product-badge,
.woofilters-custom-products.woocommerce ul.products li.product .product-badge,
.woocommerce.woofilters-custom-products ul.products li.product .product-badge {
    position: absolute !important;
    z-index: 10 !important;
    /* 明确指定宽度和高度为auto，不受通用规则影响 */
    width: auto !important;
    height: auto !important;
    /* 基础显示样式 */
    display: inline-block !important;
    /* 确保不被拉伸或变形 */
    flex: none !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    /* 确保不被其他规则影响 */
    box-sizing: content-box !important;
    margin: 0 !important;
    /* 移除默认样式，完全由Elementor控件控制 */
}

/* 标签位置 - 使用超高优先级选择器 */
body .woofilters-custom-products ul.products li.product .product-badge.badge-top-left,
.woofilters-custom-products.woocommerce ul.products li.product .product-badge.badge-top-left,
.woocommerce.woofilters-custom-products ul.products li.product .product-badge.badge-top-left {
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    bottom: auto !important;
}

body .woofilters-custom-products ul.products li.product .product-badge.badge-top-right,
.woofilters-custom-products.woocommerce ul.products li.product .product-badge.badge-top-right,
.woocommerce.woofilters-custom-products ul.products li.product .product-badge.badge-top-right {
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    bottom: auto !important;
}

body .woofilters-custom-products ul.products li.product .product-badge.badge-bottom-left,
.woofilters-custom-products.woocommerce ul.products li.product .product-badge.badge-bottom-left,
.woocommerce.woofilters-custom-products ul.products li.product .product-badge.badge-bottom-left {
    bottom: 10px !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
}

body .woofilters-custom-products ul.products li.product .product-badge.badge-bottom-right,
.woofilters-custom-products.woocommerce ul.products li.product .product-badge.badge-bottom-right,
.woocommerce.woofilters-custom-products ul.products li.product .product-badge.badge-bottom-right {
    bottom: 10px !important;
    right: 10px !important;
    left: auto !important;
    top: auto !important;
}

/* 确保标签在图片容器内正确位置 */
.woofilters-custom-products .product-image {
    position: relative;
    overflow: hidden;
}

/* 兼容旧的onsale类名 - 使用超高优先级选择器，但不覆盖位置设置 */
body .woofilters-custom-products ul.products li.product .product-badge.onsale,
.woofilters-custom-products.woocommerce ul.products li.product .product-badge.onsale,
.woocommerce.woofilters-custom-products ul.products li.product .product-badge.onsale {
    /* 继承上面的基础样式，确保不受WooCommerce默认样式影响 */
    position: absolute !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    /* 移除了覆盖位置设置的auto样式，让位置类名（badge-top-left、badge-top-right等）能够正确控制 */
}

/* 高级样式由Elementor控件管理 */

/* 标签形状 */
.woofilters-custom-products .product-badge.badge-rectangle {
    border-radius: 3px;
    padding: 4px 8px;
}

.woofilters-custom-products .product-badge.badge-circle {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    text-align: center;
    line-height: 1;
}

.woofilters-custom-products .product-badge.badge-rounded {
    border-radius: 20px;
    padding: 4px 12px;
}

.woofilters-custom-products .product-badge.badge-ribbon {
    position: relative;
    padding: 4px 12px 4px 8px;
    margin-right: 8px;
}

.woofilters-custom-products .product-badge.badge-ribbon::after {
    content: '';
    position: absolute;
    right: -8px;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 8px;
    border-color: transparent transparent transparent inherit;
}

/* ========== 高级评分样式 ========== */

.woofilters-custom-products .product-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.woofilters-custom-products .product-rating .star-rating {
    font-size: 14px;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.woofilters-custom-products .product-rating .rating-text {
    font-size: 12px;
    color: #666;
    margin-left: 4px;
}

/* ========== 手机端弹窗样式 ========== */

/* 过滤器包装器基础样式 */
.woo-filters-wrapper {
    width: 100%;
    position: relative;
}

/* 弹窗模式样式 - Flexbox布局 */
.woo-filters-wrapper.mobile-modal-mode .woo-filters-container {
    position: fixed !important;
    top: 20px !important; /* 从顶部20px开始 */
    bottom: 20px !important; /* 到底部20px结束 */
    left: 50% !important;
    transform: translateX(-50%) !important; /* 只水平居中 */
    width: 90% !important;
    max-width: 400px !important;
    /* 强制占满可用空间，不管内容多少 */
    height: calc(100vh - 40px) !important; /* 屏幕高度减去上下边距 */
    min-height: calc(100vh - 40px) !important; /* 最小高度也一样 */
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    z-index: 10001 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column !important;
    /* 确保Flexbox布局正确工作 */
    overflow: hidden !important; /* 防止内容溢出 */
}

/* 弹窗打开时的背景锁定 */
body.mobile-filter-modal-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}

/* 弹窗内容区域 */
.woo-filters-wrapper.mobile-modal-mode .mobile-filter-content {
    position: relative !important;
    z-index: 10001 !important;
}

/* 弹窗头部样式 - 固定在顶部 */
.woo-filters-wrapper.mobile-modal-mode .mobile-filter-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid #eee !important;
    background: #f8f9fa !important;
    border-radius: 8px 8px 0 0 !important;
    flex-shrink: 0 !important; /* 头部不缩小 */
    flex-grow: 0 !important; /* 头部不增长 */
    order: -1 !important; /* 确保头部在最前面 */
    position: relative;
    z-index: 12 !important;
}

.woo-filters-wrapper.mobile-modal-mode .mobile-filter-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin: 0 !important;
}

.woo-filters-wrapper.mobile-modal-mode .mobile-filter-close {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    color: #666 !important;
    cursor: pointer !important;
    padding: 5px !important;
    line-height: 1 !important;
}

.woo-filters-wrapper.mobile-modal-mode .mobile-filter-close:hover {
    color: #333 !important;
}

/* 弹窗尾部样式 - 移除硬编码样式，让Elementor控制 */

/* 手机端过滤按钮包装器 - 强制唯一性 */
.mobile-filter-trigger-wrapper {
    display: none;
    width: 100%;
    /* 当显示时使用flex布局 */
    justify-content: flex-start; /* 默认左对齐 */
}

/* 强制确保只有一个按钮包装器显示 */
.mobile-filter-trigger-wrapper:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* 页面加载时设置筛选器为可见状态，避免闪烁问题 */
.woo-filters-container {
    opacity: 1;
    visibility: visible;
    display: block;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 移动端默认状态：隐藏筛选器，显示按钮 */
@media (max-width: 767px) {
    .woo-filters-container {
        opacity: 0 !important;
        visibility: hidden !important;
        display: none !important;
    }

    .mobile-filter-trigger-wrapper {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* 在Elementor编辑器中，始终显示组件内容 */
body.elementor-editor-active .woo-filters-container,
body.elementor-editor-preview .woo-filters-container,
.elementor-editor .woo-filters-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* 当JavaScript检测完成后处理显示状态（前台） */
.woo-filters-container.show-desktop-filters,
.woo-filters-container.hide-desktop-filters {
    opacity: 1;
    visibility: visible;
    display: block;
}

/* 确保移动端按钮在页面加载时也是隐藏的 */

/* 当JavaScript检测完成后显示移动端按钮 */
.woo-filters-wrapper.show-mobile-trigger .mobile-filter-trigger-wrapper,
.woo-filters-wrapper.show-tablet-trigger .mobile-filter-trigger-wrapper {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* 按钮位置控制 - 使用最高优先级 */
.woo-filters-wrapper .mobile-filter-trigger-wrapper.mobile-filter-button-left {
    text-align: left !important;
    justify-content: flex-start !important;
}

.woo-filters-wrapper .mobile-filter-trigger-wrapper.mobile-filter-button-center {
    text-align: center !important;
    justify-content: center !important;
}

.woo-filters-wrapper .mobile-filter-trigger-wrapper.mobile-filter-button-right {
    text-align: right !important;
    justify-content: flex-end !important;
}

/* 确保按钮包装器可以正确应用位置控制 */
/* 移动端按钮包装器样式 - 已合并到上面的定义中 */

/* 过滤按钮样式 - 强制唯一性 */
.mobile-filter-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #007cba;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    /* 移除默认动画和阴影 - 通过Elementor控件控制 */
    /* transition: all 0.3s ease; */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
    position: relative;
    overflow: hidden;
    pointer-events: auto !important;
    z-index: 1000;
    /* 确保垂直对齐 */
    vertical-align: middle;
    /* 移除可能影响位置控制的margin */
    margin: 0 !important;
}

/* 强制确保只有一个按钮显示 */
.mobile-filter-trigger:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* 强制确保只有一个组件显示 - 针对Elementor重复渲染问题 */
.woo-filters-wrapper:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
}

/* 更强力的修复 - 使用更高特异性的选择器 */
body .woo-filters-wrapper:not(:first-child),
.elementor-widget-container .woo-filters-wrapper:not(:first-child),
.elementor-element .woo-filters-wrapper:not(:first-child) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
}

/* 终极修复 - 针对所有可能的重复组件 */
.woo-filters-wrapper:nth-child(n+2),
.woo-filters-wrapper + .woo-filters-wrapper,
.woo-filters-wrapper ~ .woo-filters-wrapper {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    z-index: -9999 !important;
    pointer-events: none !important;
    user-select: none !important;
}

/* 防止重复组件移动和重叠的CSS */
.woo-filters-wrapper {
    transition: none !important;
    animation: none !important;
}

/* 确保重复组件立即隐藏，防止视觉上的移动 */
.woo-filters-wrapper:not(:first-child) * {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.mobile-filter-trigger:hover {
    background: #005a87;
    /* 移除悬停动画效果 - 通过Elementor控件控制 */
    /* transform: translateY(-1px); */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); */
}

.mobile-filter-trigger:active {
    /* 移除点击动画效果 - 保持静止状态 */
    /* transform: translateY(0); */
    /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
}

.mobile-filter-trigger .filter-icon {
    font-size: 16px;
    line-height: 1;
    /* 确保图标垂直居中对齐 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    /* 防止图标影响整体对齐 */
    flex-shrink: 0;
    /* 确保图标内容正确显示 */
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 兼容旧的Font Awesome图标处理 */
.mobile-filter-trigger .filter-icon i {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* 调试样式 - 确保图标可见 */
.mobile-filter-trigger .filter-icon {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.mobile-filter-trigger .filter-icon i {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: inherit !important;
    background: transparent !important;
}

/* SVG图标样式 - 使用Elementor标准样式 */
.mobile-filter-trigger .filter-icon svg.e-font-icon-svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 确保SVG图标正确显示 */
.mobile-filter-trigger .filter-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: middle;
    display: inline-block;
    line-height: 1;
}

/* Font Awesome图标样式 */
.mobile-filter-trigger .filter-icon i {
    font-size: inherit;
    line-height: inherit;
    vertical-align: middle;
    margin: 0;
    padding: 0;
}

/* 防止WordPress emoji系统转换Unicode字符 */
.mobile-filter-trigger .filter-icon {
    /* 禁用WordPress的emoji转换 */
    text-decoration: none;
}

.mobile-filter-trigger .filter-text {
    font-size: inherit !important;
    line-height: 1.2 !important;
    /* 确保文字垂直居中对齐 */
    vertical-align: middle !important;
    /* 防止文字换行影响对齐 */
    white-space: nowrap !important;
    /* 覆盖通用样式 */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* 防止文字影响整体对齐 */
    flex-shrink: 0 !important;
}

/* 遮罩层 */
.mobile-filter-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

/* 弹窗容器 - 已移除重复定义 */

/* 弹窗激活状态 - 已移除重复定义 */

/* 移动端弹窗激活状态 - 新架构 */
.mobile-modal-active {
    position: fixed !important;
    bottom: 0 !important;
    left: 50% !important; /* 居中显示 */
    transform: translateX(-50%) translateY(0) !important; /* 水平居中 */
    background: transparent !important; /* 移除默认背景，由Elementor控制 */
    border-radius: 15px 15px 0 0 !important;
    /* 移除默认尺寸，由Elementor控件控制 */
    /* width 和 height 将由Elementor的CSS动态设置 */
    z-index: 999999 !important; /* 确保在遮罩层和Elementor编辑器之上 */
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important; /* 确保可以接收点击事件 */
    /* 移除默认的padding和margin，由Elementor控制 */
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    /* 默认尺寸，如果Elementor控件未设置 */
    width: 350px !important;
    height: 400px !important;
}

/* 遮罩层样式 */
.mobile-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999998; /* 设置在弹窗之下，但高于Elementor编辑器 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    pointer-events: auto;
}

/* 移除旧的伪元素遮罩 */
.mobile-modal-active::before {
    display: none;
}

/* 移动设备响应式调整 */
@media (max-width: 480px) {
    .mobile-modal-active {
        left: 10px !important;
        right: 10px !important;
        width: auto !important;
        transform: translateX(0) translateY(0) !important;
    }
}

/* 平板设备响应式调整 */
@media (min-width: 481px) and (max-width: 768px) {
    .mobile-modal-active {
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        transform: translateX(0) translateY(0) !important;
    }
}

/* 确保弹窗内容可以正常点击 */
.mobile-modal-active * {
    pointer-events: auto !important;
    position: relative;
    z-index: 11 !important;
}

/* Elementor编辑器特殊处理 - 确保弹窗在编辑器之上 */
.elementor-editor-active .mobile-modal-active {
    z-index: 9999999 !important;
}

.elementor-editor-active .mobile-modal-overlay {
    z-index: 9999998 !important;
}

/* 弹窗头部 - 默认隐藏，只在弹窗模式下显示正确的头部 */
.mobile-filter-header {
    display: none !important;
}

/* 隐藏任何动态添加的modal头部（防止重复） */
.mobile-modal-header {
    display: none !important;
}

/* 弹窗头部样式已在前面定义，这里不再重复 */

.mobile-filter-title, .mobile-modal-header h3 {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    /* 移除硬编码的颜色，由Elementor控制 */
}

.mobile-filter-close, .mobile-modal-close {
    background: none !important;
    border: none !important;
    font-size: 24px !important;
    cursor: pointer !important;
    padding: 0 !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s ease !important;
    /* 移除硬编码的颜色，由Elementor控制 */
}

.mobile-filter-close:hover, .mobile-modal-close:hover {
    color: #666;
}

/* 弹窗内容区域 - 可滚动区域 */
.mobile-filter-content {
    flex: 1 !important; /* 占用剩余空间 */
    overflow-y: auto !important; /* 垂直滚动 */
    overflow-x: hidden !important; /* 隐藏水平滚动 */
    /* padding: 0 20px !important; */ /* 左右padding - 通过Elementor控件控制 */
    position: relative !important;
    z-index: 11 !important; /* 确保内容在遮罩层之上 */
    min-height: 0 !important; /* 允许缩小 */
    /* 确保内容区域能够正确显示滚动条 */
    -webkit-overflow-scrolling: touch !important; /* iOS平滑滚动 */
    /* 确保内容区域可以正确滚动 */
    max-height: none !important; /* 移除最大高度限制 */
    order: 1 !important; /* 确保内容在中间 */
}

/* 弹窗模式下的内容区域特殊处理 */
.woo-filters-wrapper.mobile-modal-mode .mobile-filter-content {
    /* padding: 20px !important; */ /* 四边padding - 通过Elementor控件控制 */
    /* 确保滚动行为正常 */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #ccc transparent; /* Firefox */
    /* 确保内容区域在中间 */
    order: 1 !important;
}

/* Webkit浏览器滚动条样式 */
.woo-filters-wrapper.mobile-modal-mode .mobile-filter-content::-webkit-scrollbar {
    width: 6px;
}

.woo-filters-wrapper.mobile-modal-mode .mobile-filter-content::-webkit-scrollbar-track {
    background: transparent;
}

.woo-filters-wrapper.mobile-modal-mode .mobile-filter-content::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.woo-filters-wrapper.mobile-modal-mode .mobile-filter-content::-webkit-scrollbar-thumb:hover {
    background: #999;
}

/* 弹窗内的过滤器样式调整 */
.mobile-filter-content .filter-group {
    margin-bottom: 25px;
    position: relative;
    z-index: 1000001; /* 确保过滤器组在内容之上 */
}

/* 确保弹窗内的所有交互元素都可以正常点击 */
.mobile-modal-active input[type="checkbox"],
.mobile-modal-active input[type="radio"],
.mobile-modal-active select,
.mobile-modal-active button,
.mobile-modal-active label {
    pointer-events: auto !important;
    position: relative;
    z-index: 14 !important;
    cursor: pointer;
}

/* 确保弹窗内的链接和按钮可以正常点击 */
.mobile-modal-active a,
.mobile-modal-active .filter-item,
.mobile-modal-active .category-image-container {
    pointer-events: auto !important;
    position: relative;
    z-index: 14 !important;
}

.mobile-filter-content .filter-title {
    font-size: 16px;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-filter-content .filter-item {
    margin-bottom: 12px;
}

.mobile-filter-content .filter-item label {
    font-size: 14px;
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    z-index: 1000002; /* 确保标签在过滤器组之上 */
    cursor: pointer;
}

/* 分类网格在弹窗中的样式调整 */
.mobile-filter-content .category-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
}

.mobile-filter-content .category-image-container {
    aspect-ratio: 1;
    min-height: 60px;
    max-height: 80px;
}

/* 弹窗底部按钮区域 - 默认隐藏，只在弹窗模式下显示正确的尾部 */
.mobile-filter-footer {
    display: none !important;
}

/* 隐藏任何动态添加的modal尾部（防止重复） */
.mobile-modal-footer {
    display: none !important;
}

/* 只在移动端弹窗模式下显示Elementor添加的尾部 - 固定在底部 */
.woo-filters-wrapper.mobile-modal-mode .mobile-filter-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
    flex-shrink: 0 !important; /* 脚部不缩小，固定在底部 */
    flex-grow: 0 !important; /* 不增长 */
    position: relative;
    z-index: 13 !important; /* 确保底部按钮在最上层 */
    padding: 15px 20px !important; /* 脚部padding */
    border-top: 1px solid #eee !important; /* 分隔线 */
    background: inherit !important; /* 继承背景色 */
    border-radius: 0 0 8px 8px !important; /* 底部圆角 */
    /* 确保footer不会被内容覆盖 */
    order: 999 !important; /* 确保footer在最后 */
}

.mobile-filter-apply,
.mobile-filter-cancel {
    flex: 1 !important;
    padding: 12px !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.mobile-filter-apply {
    /* 移除硬编码的背景和颜色，由Elementor控制 */
}

.mobile-filter-cancel {
    /* 移除硬编码的背景和颜色，由Elementor控制 */
}

.mobile-filter-apply:hover {
    /* 移除硬编码的hover效果，由Elementor控制 */
}

.mobile-filter-cancel:hover {
    /* 移除硬编码的hover效果，由Elementor控制 */
}

/* 手机端弹窗按钮默认隐藏 - 已移除重复定义 */

/* 移动端触发器显示规则 - 已移除重复的按钮样式定义 */

/* PC端过滤器显示规则 */
.woo-filters-container.show-desktop-filters .filter-group {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: relative !important;
}

/* 移动端过滤器隐藏规则 */
.woo-filters-container.hide-desktop-filters {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 折叠状态下的内容隐藏 - 重要：确保折叠功能正常工作 */
.woo-filters-container .filter-group.collapsed .filter-options {
    display: none !important;
}

/* 响应式断点规则 */
@media (min-width: 769px) {
    /* PC端：显示过滤器，隐藏弹窗按钮 */
    .woo-filters-wrapper .mobile-filter-trigger-wrapper {
        display: none !important;
    }

    .woo-filters-container.hide-desktop-filters {
        display: block !important;
    }
}

/* 平板端触发器显示规则 */
.woo-filters-wrapper.show-tablet-trigger .mobile-filter-trigger-wrapper {
    display: block !important;
    position: relative;
    z-index: 10;
    opacity: 1 !important;
    visibility: visible !important;
}

@media (max-width: 768px) {
    /* 移动端：隐藏过滤器，显示弹窗按钮 */
    .woo-filters-wrapper.show-mobile-trigger .mobile-filter-trigger-wrapper {
        display: block !important;
    }

    .woo-filters-container.show-desktop-filters {
        display: none !important;
    }
}

/* 标签云样式 */
.tag-cloud-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.tag-cloud-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    border: 1px solid #ddd;
    background-color: #f8f9fa;
    color: #666;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: normal;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
}

.tag-cloud-item:hover,
.tag-cloud-item:focus {
    background-color: #e9ecef;
    color: #333;
    border-color: #adb5bd;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
}

.tag-cloud-item.selected {
    background-color: #007cba;
    color: #fff;
    border-color: #007cba;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
}

.tag-cloud-item.selected:hover,
.tag-cloud-item.selected:focus {
    background-color: #0056b3;
    border-color: #0056b3;
    outline: none;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
}

.tag-cloud-item input[type="checkbox"],
.tag-cloud-item input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tag-cloud-item span {
    display: inline-block;
    vertical-align: middle;
    line-height: 1.2;
}

/* 标签云响应式设计 */
@media (max-width: 768px) {
    .tag-cloud-container {
        gap: 6px;
    }

    .tag-cloud-item {
        padding: 6px 10px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .tag-cloud-container {
        gap: 4px;
    }

    .tag-cloud-item {
        padding: 4px 8px;
        font-size: 12px;
    }
}

/* 分页样式 */
.woofilters-pagination {
    margin: 30px 0;
    text-align: center;
}

.woofilters-pagination .page-numbers-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.woofilters-pagination .page-numbers {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 2px;
    background-color: #f8f9fa;
    color: #333;
    text-decoration: none;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    transition: all 0.3s ease;
    font-size: 14px;
    line-height: 1.4;
}

.woofilters-pagination .page-numbers:hover {
    background-color: #e9ecef;
    color: #333;
    text-decoration: none;
}

.woofilters-pagination .page-numbers.current {
    background-color: #007cba;
    color: #fff;
    border-color: #007cba;
}

.woofilters-pagination .page-numbers.dots {
    background: none;
    border: none;
    color: #6c757d;
    cursor: default;
}

.woofilters-pagination .page-numbers.prev,
.woofilters-pagination .page-numbers.next {
    font-weight: 500;
}

.woofilters-pagination .page-numbers.info {
    background: none;
    border: none;
    color: #6c757d;
    font-style: italic;
    margin: 0 10px;
}

/* 加载更多按钮样式 */
.woofilters-pagination .load-more-wrapper {
    margin-top: 20px;
}

.woofilters-pagination .load-more-button {
    background-color: #007cba;
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.woofilters-pagination .load-more-button:hover {
    background-color: #005a87;
    color: #fff;
}

.woofilters-pagination .load-more-button:disabled {
    background-color: #6c757d;
    cursor: not-allowed;
}

.woofilters-pagination .loading-spinner {
    display: none;
    font-size: 12px;
}

/* 无限滚动样式 */
.woofilters-pagination .infinite-scroll-trigger {
    margin-top: 20px;
    padding: 20px;
}

.woofilters-pagination .loading-indicator {
    display: none;
    text-align: center;
    color: #6c757d;
    font-style: italic;
    padding: 20px;
}

.woofilters-pagination .loading-indicator:before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid #6c757d;
    border-radius: 50%;
    border-top-color: transparent;
    animation: spin 1s linear infinite;
    margin-right: 8px;
    vertical-align: middle;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* 响应式分页 */
@media (max-width: 768px) {
    .woofilters-pagination .page-numbers {
        padding: 6px 10px;
        font-size: 13px;
        margin: 0 1px;
    }
    
    .woofilters-pagination .page-numbers.prev,
    .woofilters-pagination .page-numbers.next {
        padding: 6px 8px;
    }
    
    .woofilters-pagination .page-numbers.info {
        display: block;
        width: 100%;
        margin: 10px 0;
    }
}

@media (max-width: 480px) {
    .woofilters-pagination .page-numbers-wrapper {
        justify-content: center;
    }
    
    .woofilters-pagination .page-numbers {
        padding: 5px 8px;
        font-size: 12px;
    }
    
    .woofilters-pagination .page-numbers.dots {
        display: none;
    }
}