/*
 * WooCommerce Product List Image Optimization
 * 优化产品列表封面图显示：3:2 宽高比，aspect-fill 裁切
 */

/* 产品图片外层容器 */
.woocommerce ul.products li.product .bpgPhoto,
.woocommerce-page ul.products li.product .bpgPhoto {
    position: relative;
    width: 100%;
    margin: 0 0 10px 0;  /* 图片底部间距 10px */
    padding: 0;
}

/* 产品图片容器 - 使用 aspect-ratio 实现 3:2 比例 */
.woocommerce ul.products li.product .bpgPhoto .boldPhotoBox,
.woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox {
    position: relative;
    width: 100% !important;
    aspect-ratio: 3 / 2;
    overflow: hidden !important;
    display: block !important;
    background-color: #f5f5f5;
    line-height: 0;
}

/* 产品图片内层容器 */
.woocommerce ul.products li.product .bpgPhoto .boldPhotoBox .bpbItem,
.woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox .bpbItem {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
}

/* 产品图片 - 使用 object-fit: cover 实现 aspect-fill 效果 */
.woocommerce ul.products li.product .bpgPhoto .boldPhotoBox img,
.woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox img,
.woocommerce ul.products li.product .bpgPhoto img,
.woocommerce-page ul.products li.product .bpgPhoto img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    line-height: 0;
}

/* 产品链接 */
.woocommerce ul.products li.product .bpgPhoto > a,
.woocommerce-page ul.products li.product .bpgPhoto > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
}

/* Sale 标签定位调整 */
.woocommerce ul.products li.product .onsale,
.woocommerce-page ul.products li.product .onsale {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 10;
    margin: 0;
}

.woocommerce span.onsale {
    z-index: 10;
}

/* 响应式优化 - 移动端 */
@media (max-width: 768px) {
    .woocommerce ul.products li.product .bpgPhoto .boldPhotoBox,
    .woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox {
        aspect-ratio: 3 / 2;
    }
}

/* 兼容旧版浏览器 - 不支持 aspect-ratio 时使用 padding-top 方案 */
@supports not (aspect-ratio: 3 / 2) {
    .woocommerce ul.products li.product .bpgPhoto .boldPhotoBox,
    .woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 66.67%; /* 2/3 = 66.67% for 3:2 ratio */
        overflow: hidden;
    }

    .woocommerce ul.products li.product .bpgPhoto .boldPhotoBox .bpbItem,
    .woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox .bpbItem {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .woocommerce ul.products li.product .bpgPhoto .boldPhotoBox img,
    .woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
}

/* 图片悬停效果 */
.woocommerce ul.products li.product .bpgPhoto .boldPhotoBox img,
.woocommerce-page ul.products li.product .bpgPhoto .boldPhotoBox img {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.woocommerce ul.products li.product .bpgPhoto:hover .boldPhotoBox img,
.woocommerce-page ul.products li.product .bpgPhoto:hover .boldPhotoBox img {
    transform: scale(1.05);
}

/* 确保产品列表项不会溢出 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    overflow: visible;
}

/* Caption 面板定位 */
.woocommerce ul.products li.product .bpgPhoto .captionPane,
.woocommerce-page ul.products li.product .bpgPhoto .captionPane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 6;
}

/* 隐藏产品列表中的分类信息 */
.woocommerce ul.products li.product .btArticleCategories,
.woocommerce-page ul.products li.product .btArticleCategories,
.woocommerce ul.products li.product .btArticleCategory,
.woocommerce-page ul.products li.product .btArticleCategory {
    display: none !important;
}

/* 隐藏产品列表中的 Super Title (包含分类) */
.woocommerce ul.products li.product .header .btSuperTitle,
.woocommerce-page ul.products li.product .header .btSuperTitle {
    display: none !important;
}

/* 调整产品标题和内容区域的间距 */
.woocommerce ul.products li.product .header,
.woocommerce-page ul.products li.product .header {
    margin-top: 0;  /* 移除标题区域额外的间距 */
}

.woocommerce ul.products li.product h3,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce-page ul.products li.product h3,
.woocommerce-page ul.products li.product .woocommerce-loop-product__title {
    margin-top: 0;
    padding-top: 0;
}