/*!
Theme Name: Kadence
Theme URI: https://www.liquidweb.com/software/kadence/
Author: Kadence WP
Author URI: https://www.liquidweb.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Version: 1.5.2
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence
Requires at least: 6.3
Tested up to: 6.9.1
Tags: translation-ready, accessibility-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce
Requires PHP: 7.4

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share
what you've learned with others.
*/


/* ============================================================
   单产品页样式 - CPT: products
   样式说明：
   - 主图 800x800px，1:1，边框 1px solid #0c8e4f，圆角 12px
   - 细节图边框 1px solid #0c8e4f，选中后 2px
   - 右栏边框 1px solid #0c8e4f，圆角 12px，背景 #fafbf5，内边距 15px
   - 左右两列间距 100px
   ============================================================ */

/* ===== 单产品页 ===== */
.product-single-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* 顶部 banner */
.product-banner {
    width: 100%;
    margin-bottom: 40px;
    border-radius: 12px;
    overflow: hidden;
}
.product-banner-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* 左右两栏容器：列间距 100px */
.product-content-wrapper {
    width: 100%;
}
.product-two-column {
    display: flex;
    gap: 100px;               /* 左主图列 与 右描述列的间距 100px */
    align-items: stretch;   /* 强制两列等高（默认就是 stretch，显式写出更明确） */
}

/* 左栏 / 右栏：等宽两列 */
.product-left-column,
.product-right-column {
    flex: 1 1 50%;
    min-width: 0;
}

/* 右列：自身变成弹性列，让内部元素可填满高度 */
.product-right-column {
    display: flex;
    flex-direction: column;
    border: 1px solid #0c8e4f;
    border-radius: 12px;
    background-color: #fafbf5;
    padding: 15px;
}

/* 描述区域：自动撑满剩余垂直空间 */
.product-description {
    flex: 1;
}


/* ========== 主图区域 ========== */
.product-main-image {
    width: 800px;             /* 固定 800px 宽 */
    max-width: 100%;          /* 小屏自适应 */
    margin: 0 auto 20px;
}
.product-main-image .main-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;      /* 强制 1:1，避免切换图片时布局跳动 */
    object-fit: cover;
    border: 1px solid #0c8e4f;
    border-radius: 12px;
    display: block;
    transition: opacity .25s ease;
}

/* ========== 5张细节图画廊 ========== */
.product-detail-gallery {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.product-detail-gallery .detail-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 0;
    border: 1px solid #0c8e4f;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    overflow: hidden;
    transition: border-width .15s ease, opacity .25s ease;
}
.product-detail-gallery .detail-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* 选中态：线框变 2px */
.product-detail-gallery .detail-thumb.is-active {
    border: 2px solid #0c8e4f;
}

/* ========== 右栏：标题 + 描述 ========== */
.product-right-column {
    /* 边框 + 圆角 + 背景 + 内边距 15px */
    border: 1px solid #0c8e4f;
    border-radius: 12px;
    background-color: #fafbf5;
    padding: 15px;
    align-self: flex-start;
}
.product-title {
    font-size: 30px;
    line-height: 1.3;
    margin: 0 0 18px;
    color: #1a1a1a;
}
.product-description {
    font-size: 16px;
    line-height: 1.85;
    color: #444;
}
.product-description p {
    margin: 0 0 1em;
}

/* ========== 细节图切换主图（JS）时的淡入动画 ========== */
.product-main-image .main-image.is-swapping {
    opacity: 0;
}

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
    .product-two-column {
        gap: 40px;            /* 中等屏幕缩小列间距 */
    }
    .product-main-image {
        width: 100%;
    }
}
@media (max-width: 768px) {
    .product-two-column {
        flex-direction: column;
        gap: 30px;
    }
    .product-detail-gallery {
        grid-template-columns: repeat(5, 1fr);
    }
    .product-title {
        font-size: 26px;
    }
}
@media (max-width: 480px) {
    .product-detail-gallery {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
    }
}











/* ============================================================
   产品归档页样式 - CPT: products / 分类法: productsypes
   把本文件全部内容追加到子主题 style.css 末尾即可
   ============================================================ */

/* 让归档页走全宽布局（Kadence 容器适配，按需启用） */
body.post-type-archive-products,
body.tax-productsypes {
    /* 如需全宽可在此覆盖 Kadence 容器宽度 */
}
/* 引入 Roboto 字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* ========== 顶部 Banner（保持之前的设置） ========== */
.product-archive-banner {
    max-width: 1290px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 100px;
}
.product-archive-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* ========== 两列布局 ========== */
.product-archive-wrap {
    display: grid;
    grid-template-columns: 280px 1fr; /* 左侧稍宽以适应内边距 */
    gap: 48px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 64px;
}

/* ========== 左侧分类列表 ========== */
.product-cat-sidebar {
    border: 1px solid #0c8e4f;
    border-radius: 12px;
    padding-bottom: 150px; /* 下方内边距 150px */
    background: transparent;
    align-self: start;
    position: sticky;
    top: 40px;
}

.product-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.product-cat-list .cat-item {
    margin: 0 30px 30px; /* 上下间距 30px，左右外间距 30px */
    border: 1px solid #0c8e4f;
    border-radius: 30px;
    background-color: #c6eace;
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    padding: 12px 20px; /* 内部左右内边距可自行调整，原要求左右外间距 70px 已用 margin 实现 */
    transition: all 0.2s;
}

.product-cat-list .cat-item:last-child {
    margin-bottom: 0; /* 最后一项去掉下边距 */
}

.product-cat-list .cat-item a {
    display: block;
    color: #333;
    text-decoration: none;
    font-weight: 400;
    text-align: center; /* 分类文字居中（可选） */
}

.product-cat-list .cat-item.active {
    background-color: #a8dba8; /* 选中态稍深，可自行调整 */
    border-color: #0c8e4f;
    background: transparent !important;  /* 背景透明 */
    border-color: #0c8e4f;              /* 保持绿色边框 */
    /* 如有必要可微调文字颜色 */
    color: #333;
}

.product-cat-list .cat-item a:hover {
    color: #000;
}

/* 隐藏分类标题（如果不需要） */
.cat-sidebar-title {
    display: block;              /* 确保标题显示（覆盖之前的隐藏） */
    font-family: 'Roboto', sans-serif;
    font-size: 25px;
    text-align: center;          /* 居中 */
    margin-top: 25px;
    margin-bottom: 25px;
    color: #333;                 /* 可根据需要调整颜色 */
}

/* ========== 右侧产品网格 ========== */
.product-grid-area {
    min-width: 0;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    transition: opacity 0.2s;
}

.product-grid.loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ========== 产品卡片（主背景透明） ========== */
.product-card {
    background: transparent; /* 显示网站背景色 */
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ========== 产品主图 ========== */
.product-card .product-thumb {
    border: 1px solid #0c8e4f;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
}

.product-card .product-thumb img {
    width: 100%;
    height: 100%;; /* 可根据需要调整 */
    object-fit: cover;
    display: block;
}

/* ========== 产品标题 ========== */
.product-card .product-title {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    color: #1a5a46;
    text-align: center;
    margin: 12px 0 8px;
    line-height: 1.4;
}

/* ========== Discover More 按钮 ========== */
.product-card .discover-more {
    display: block;
    width: 100%; /* 宽度与图片宽度一致 */
    border: 1px solid #0c8e4f;
    border-radius: 12px;
    background-color: #c6eace;
    color: #333;
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
    box-sizing: border-box;
    transition: background 0.2s, color 0.2s;
    margin-top: 0; /* 与标题紧贴 */
}

.product-card .discover-more:hover {
    background-color: #a8dba8;
    color: #000;
}

/* ==========产品归档网格调整，使按钮同一行，添加flexbox弹性布局 ========== */
/* 1. 让产品卡片变为纵向弹性容器，并占满父网格的高度（Grid默认align-items: stretch会让同列卡片等高） */
.product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0; /* 确保卡片内边距不会干扰计算 */
}

/* 2. 让标题区域自动填充剩余空间，把按钮挤到底部 */
.product-card .product-title {
    margin-bottom: 0; /* 移除标题下方多余间距 */
    flex-grow: 1;    /* 占据可用空间[1](@ref) */
    padding-bottom: 12px; /* 与按钮保持一点间距 */
}

/* 3. 将按钮推到卡片最底部 */
.product-card .discover-more {
    margin-top: auto;
    width: 100%; /* 保持与图片同宽 */
    /* 其他原有样式（背景色、边框等）保持不变 */
}

/* 补充：确保产品主图容器不会被压缩 */
.product-card .product-thumb {
    flex-shrink: 0;
}










/* ========== 分页（保持原有） ========== */
.product-pagination {
    grid-column: 1 / -1;
    text-align: center;
    margin-top: 36px;
}
.product-pagination .page-numbers {
    display: inline-block;
    padding: 6px 13px;
    margin: 0 4px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
}
.product-pagination .page-numbers.current {
    background: #0c8e4f;
    color: #fff;
    border-color: #0c8e4f;
}

.no-products {
    grid-column: 1 / -1;
    text-align: center;
    color: #888;
}

/* ========== 响应式 ========== */
@media (max-width: 1024px) {
    .product-archive-wrap {
        grid-template-columns: 1fr;
    }
    .product-cat-sidebar {
        position: static;
        padding-bottom: 40px; /* 移动端减少内边距 */
    }
    .product-cat-list .cat-item {
        margin-left: 0;
        margin-right: 0;
    }
    .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .product-grid {
        grid-template-columns: 1fr;
    }
}