/**
 * WooCommerce 商品多列网格布局系统
 * 
 * 支持 columns-3、4、5...n 等多列显示模式
 * 提供响应式设计和统一的商品间距控制
 * 
 * @package HelloElementorChild
 * @since 1.0.0
 */

/* ==========================================================================
   基础网格容器样式
   ========================================================================== */

/**
 * 商品列表容器基础样式
 * 使用 CSS Grid 布局系统实现灵活的多列显示
 */
.woocommerce ul.products {
    display: grid;
    grid-gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    box-sizing: border-box;
}

/**
 * 商品项基础样式
 * 确保每个商品项都有统一的布局和间距
 */
.woocommerce ul.products li.product {
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    min-height: 300px;
    position: relative;
}

/* ==========================================================================
   多列布局系统 - 支持 3-8 列
   ========================================================================== */

/**
 * 3列布局
 * 适用于大屏幕显示，提供宽松的商品展示空间
 */
.woocommerce ul.products.columns-3 {
    grid-template-columns: repeat(3, 1fr);
}

/**
 * 4列布局（默认）
 * 平衡显示密度和商品展示效果
 */
.woocommerce ul.products.columns-4 {
    grid-template-columns: repeat(4, 1fr);
}

/**
 * 5列布局
 * 适用于商品较多的情况，提高页面利用率
 */
.woocommerce ul.products.columns-5 {
    grid-template-columns: repeat(5, 1fr);
}

/**
 * 6列布局
 * 高密度显示，适用于小商品或缩略图展示
 */
.woocommerce ul.products.columns-6 {
    grid-template-columns: repeat(6, 1fr);
}

/**
 * 7列布局
 * 超高密度显示
 */
.woocommerce ul.products.columns-7 {
    grid-template-columns: repeat(7, 1fr);
}

/**
 * 8列布局
 * 最大密度显示
 */
.woocommerce ul.products.columns-8 {
    grid-template-columns: repeat(8, 1fr);
}

/* ==========================================================================
   商品项内容布局优化
   ========================================================================== */

/**
 * 商品图片容器
 * 确保图片在不同列数下都能保持合适的比例
 */
.woocommerce ul.products li.product .woocommerce-loop-product__link {
    display: block;
    text-decoration: none;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/**
 * 商品图片样式
 * 使用 object-fit 确保图片不变形
 */
.woocommerce ul.products li.product img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/**
 * 商品信息区域
 * 包含标题、价格等信息的统一布局
 */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2.woocommerce-loop-product__title,
.woocommerce ul.products li.product h3 {
    font-size: 14px;
    line-height: 1.4;
    margin: 10px 0 5px 0;
    padding: 0;
    color: #fff;
    text-align: center;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/**
 * 商品价格样式
 * 统一的价格显示格式
 */
.woocommerce ul.products li.product .price {
    text-align: center;
    margin: 5px 0 10px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

/* ==========================================================================
   响应式断点设计
   ========================================================================== */

/**
 * 超大屏幕 (1400px+)
 * 保持设定列数，增加最大宽度限制
 */
@media (min-width: 1400px) {
    .woocommerce ul.products {
        max-width: 1320px;
        margin: 0 auto;
        grid-gap: 25px;
    }
    
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
    .woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
    .woocommerce ul.products.columns-7 { grid-template-columns: repeat(7, 1fr); }
    .woocommerce ul.products.columns-8 { grid-template-columns: repeat(8, 1fr); }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    .woocommerce ul.products li.product h3 {
        font-size: 15px;
    }
}

/**
 * 大屏幕 (1200px - 1399px)
 * 保持设定列数
 */
@media (max-width: 1399px) and (min-width: 1200px) {
    .woocommerce ul.products {
        grid-gap: 25px;
    }
    
    .woocommerce ul.products.columns-3 { grid-template-columns: repeat(3, 1fr); }
    .woocommerce ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); }
    .woocommerce ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
    .woocommerce ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); }
    .woocommerce ul.products.columns-7 { grid-template-columns: repeat(6, 1fr); }
    .woocommerce ul.products.columns-8 { grid-template-columns: repeat(6, 1fr); }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    .woocommerce ul.products li.product h3 {
        font-size: 15px;
    }
}

/**
 * 中大屏幕 (992px - 1199px)
 * 适当减少列数
 */
@media (max-width: 1199px) and (min-width: 992px) {
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce ul.products.columns-8 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .woocommerce ul.products.columns-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .woocommerce ul.products {
        grid-gap: 22px;
    }
}

/**
 * 中等屏幕 (768px - 991px)
 * 进一步减少列数
 */
@media (max-width: 991px) and (min-width: 768px) {
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce ul.products.columns-8 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .woocommerce ul.products.columns-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .woocommerce ul.products {
        grid-gap: 20px;
    }
    
    .woocommerce ul.products li.product {
        min-width: 200px;
    }
}

/**
 * 小屏幕 (576px - 767px)
 * 两列显示
 */
@media (max-width: 767px) {
    .woocommerce ul.products.columns-3,
    .woocommerce ul.products.columns-4,
    .woocommerce ul.products.columns-5,
    .woocommerce ul.products.columns-6,
    .woocommerce ul.products.columns-7,
    .woocommerce ul.products.columns-8 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .woocommerce ul.products {
        grid-gap: 15px;
    }
    
    .woocommerce ul.products li.product {
        min-width: 160px;
    }
    
    .woocommerce ul.products li.product img {
        height: auto;
        max-height: 200px;
    }
    
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product h2.woocommerce-loop-product__title,
    .woocommerce ul.products li.product h3 {
        font-size: 13px;
    }
}

/* ==========================================================================
   商品间距和对齐优化
   ========================================================================== */

/**
 * 统一的商品内边距
 * 确保所有商品项都有一致的内部间距
 */
.woocommerce ul.products li.product {
    padding: 10px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/**
 * 商品悬停效果
 * 提供视觉反馈
 */
.woocommerce ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

/**
 * 防止商品项内容溢出
 * 确保在窄列中内容不会被挤压
 */
.woocommerce ul.products li.product * {
    box-sizing: border-box;
    max-width: 100%;
}

/* ==========================================================================
   兼容性和覆盖样式
   ========================================================================== */

/**
 * 覆盖主题默认的浮动布局
 * 确保网格布局正常工作
 */
.woocommerce ul.products li.product {
    float: none !important;
    width: auto !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/**
 * 清除可能的冲突样式
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
    display: none;
}

/**
 * 确保在不同主题下的兼容性
 */
.woocommerce ul.products {
    clear: both;
    overflow: hidden;
}