/*
Theme Name: 二零二五-依心 子主题
Theme URI: https://www.sky-neon.com/
Description: Twenty Twenty-Five 的依心定制子主题。
Author: 编码助手
Author URI: [您的姓名或公司网站]
Template: twentytwentyfive 
// ⚠️ 重点：这必须与父主题的文件夹名称完全匹配
Version: 1.0.0
*/

/* 在此之下添加您的自定义 CSS 样式 */
/* --- 修复 CSS 盒模型问题：确保 padding 和 border 在元素内部 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* 确保您的主容器也使用 border-box */
.latest-products-container {
    box-sizing: border-box; /* 这是一个安全措施，虽然 * 选择器已经包含了 */
    /* ... 保持您的其他样式不变 ... */
}


/* --- 首页产品列表样式 --- */

/* --- 完整的 产品列表/首页产品区块 样式 (优化整合版) --- */

/* 1. 外部容器和背景 (匹配旧网站的浅色背景和边框) */
.latest-products-container {
    background-color: #F8F8FF;
    border: 1px solid #DEDEDE;
    border-radius: 8px;
    padding: 10px 15px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    margin-bottom: 30px;
}

/* 2. 标题区域样式 (最新产品 /MORE) */
.latest-products-header {
    display: flex;
    justify-content: space-between; /* 两端对齐 */
    align-items: center;
    border-bottom: 1px solid #DEDEDE; /* 分隔线 */
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.latest-products-header h2 {
    font-size: 1.0em;
    font-weight: bold;
    color: #333;
    margin: 0;
    padding: 0;
}

/* 标题前的箭头图标 */
.latest-products-header .icon-arrow::before {
    content: "▼ ";
    color: #007bff;
    font-size: 0.6em;
    margin-right: 5px;
}

.latest-products-header .more-link {
    font-size: 0.6em;
    color: #666;
    text-decoration: none;
}

/* 3. 产品网格容器：使用 Flexbox 实现灵活布局 */
.home-product-grid {
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; /* 统一使用 15px 间距，以便计算四列宽度 */
    list-style: none;
    padding: 0;
    margin: 0; /* 清除旧的 30px 边距，使用容器的 padding */
}

/* 4. 单个产品项样式 */
.home-product-item {
    /* 四列布局 */
    flex: 0 0 calc(25% - 11.25px); /* 计算: (100% / 4) - (15px * 3 / 4) */
    box-sizing: border-box;
    text-align: center;
    background-color: #fff;
    border: 1px solid #E0E0E0; /* 外部边框 */
    border-radius: 4px;
    padding: 10px;
    transition: box-shadow 0.3s ease, transform 0.3s ease; /* 整合悬停过渡 */
}

/* 5. 产品项悬停效果 */
.home-product-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transform: translateY(-3px);
}

/* 6. 图片容器和图片样式 */
/* --- 修正后的产品图片框样式 (强制 1:1 裁剪) --- */
.home-product-item .product-thumb-box {
    /* 移除旧的 padding: 5px; 因为它会干扰 1:1 比例的计算 */
    /* 我们将 padding 放到 img 内部来模拟边框 */
    
    background-color: #fff;
    margin-bottom: 8px;
    
    /* 移除固定高度，启用 1:1 比例计算 */
    height: auto !important; 
    
    /* === 强制 1:1 比例的关键 CSS === */
    width: 100% !important; 
    padding-top: 100% !important; /* 核心：通过 padding-top 制造与宽度相等的空高 */
    position: relative !important;
    overflow: hidden !important; 
    
    /* 保持原来的居中设置，但因为图片绝对定位，这个不再重要 */
    display: block !important; 
}

/* 强制图片覆盖 (实现裁剪) */
.home-product-item .product-thumb-box img {
    /* === 确保图片覆盖 1:1 区域并居中裁剪 === */
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 核心：强制图片覆盖整个容器，并裁剪多余部分 */
    
    /* 模拟原有的 1px 边框和 5px padding */
    border: 1px solid #ccc; 
    padding: 5px; 
    box-sizing: border-box; /* 确保边框和内边距包含在 100% 尺寸内 */
}

.home-product-item img {
    max-width: 100%;
    max-height: 100%; 
    height: auto;
    display: block;
    margin: 0 auto;
    /* 移除 object-fit: contain，如果图片尺寸不一致，此设置能更好地展示在固定框中 */
}

/* 7. 标题链接和文本样式 */
.home-product-item a {
    text-decoration: none;
    color: #333;
    display: block; /* 使整个产品项可点击 */
}

.home-product-item h3 {
    font-size: 0.87em;
    font-weight: normal;
    color: #333;
    margin: 0;
    padding: 5px 0 0;
}

/* --- 响应式设计：调整列数以适应不同屏幕尺寸 --- */

@media (max-width: 1024px) {
    .home-product-item {
        flex: 0 0 calc(33.33% - 10px); /* 三列: (100% / 3) - (15px * 2 / 3) */
    }
}
@media (max-width: 768px) {
    .home-product-item {
        flex: 0 0 calc(50% - 7.5px); /* 两列: (100% / 2) - (15px / 2) */
    }
}
@media (max-width: 480px) {
    .home-product-item {
        flex: 0 0 100%; /* 单列 */
        margin-bottom: 10px; /* 增加底部间距 */
    }
}

/* --- 单个产品详情页样式 (single-custom_product.php) --- */

/* 确保主布局是 Flexbox 或 Columns */
.single-product-page .product-layout {
    display: flex;
    gap: 30px; /* 左右列之间的间距 */
    align-items: flex-start; /* 顶部对齐 */
    margin-bottom: 30px;
}

/* 左侧图片列 */
.product-image-column {
    flex-basis: 35%; /* 占用约 35% 宽度 */
    min-width: 300px; /* 确保最小宽度 */
}

/* 右侧信息列 */
.product-info-column {
    flex-basis: 65%; /* 占用约 65% 宽度 */
}

/* 图片容器样式 */
.product-featured-image img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* 元信息和分类样式 */
.product-meta h2, .product-description h2 {
    font-size: 1.4em;
    border-bottom: 2px solid #eee;
    padding-bottom: 5px;
    margin-bottom: 15px;
    color: #333;
}

.product-meta p {
    font-size: 1em;
    line-height: 1.6;
}

.product-categories {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px dashed #eee;
}

.product-categories .label {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 3px;
    margin-right: 8px;
    font-size: 0.9em;
    color: #666;
}

/* 响应式：在小屏幕上堆叠 */
@media (max-width: 768px) {
    .single-product-page .product-layout {
        flex-direction: column;
        gap: 0;
    }

    .product-image-column, .product-info-column {
        flex-basis: 100%;
        min-width: auto;
    }
}