/* ==========================================================================
   产品列表 —— 网格布局 + 逐一浮现（错峰入场）
   说明：
   1. 仅作用于 .pg-section 容器内部，不会影响其他语言/模板沿用 product.css 的旧写法；
   2. 卡片不再绝对定位，布局交给 CSS Grid，JS 只负责「进入视口时逐个显示」；
   3. 全部动效走 opacity / transform，浏览器可走合成层，无 scroll 重排。
   ========================================================================== */

.pg-section {
    --pg-brand: var(--backcolor, #004f91);
    --pg-line: #e9eef5;
    --pg-ink: #0f172a;
    --pg-gray: #64748b;
    --pg-radius: 5px;
    --d:20ms;

    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
}

/* 覆盖 product.css 的 .container 阴影/裁切，避免大列表被裁切与额外合成开销 */
.pg-section .pg-wrap {


    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.tab {
    padding: 1.5rem 2rem;
    font-size: 1rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.3s ease;
    position: relative;
}

.tab.active {
    color: var(--textcolor);
    font-weight: 600;
    font-size: 1.2em;
}
/* 选项卡导航样式 */
.tabs {

    border-bottom: 1px solid #e5e7eb;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;            /* 关键：允许换行 */
    gap: 8px;                   /* 换行后的间距 */

}

.tabs::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 */
}


/* 选项卡下划线动画 */
.tab-underline {
    position: absolute;
    bottom: 0;
    height: 3px;
    background-color: var(--textcolor);
    transition: all 0.3s ease;
    border-radius: 3px 3px 0 0;
}

/* 内容区域样式 */
.content {
    padding: 2rem 0;
}

.tab-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.tab-content.active {
    display: block;
    height: 100%;
}


/* ------------------------------ 标题 ---------------------------------- */
.pg-section .pg-head {
    margin: 0;
    padding: 0 0 clamp(14px, 2vw, 22px);
    text-align: left;
}



/* ------------------------------ 选项卡 -------------------------------- */
.pg-section .pg-tabs {
    gap: 4px;
    border-bottom: 1px solid var(--pg-line);
}

.pg-section .pg-tabs .tab {
    padding: 1.1rem 1.35rem;
    border-radius: 10px 10px 0 0;
    font-size: .95rem;
    font-weight: 500;
    transition: color .2s ease, background-color .2s ease;
}

.pg-section .pg-tabs .tab:hover {
    color: var(--pg-brand);
    background: rgba(0, 79, 145, .06);
}

.pg-section .pg-tabs .tab.active {
    font-size: 1rem;
    font-weight: 700;

}

.pg-section .pg-tabs .tab-underline {
    height: 3px;
    border-radius: 3px 3px 0 0;
    background-color: var(--pg-brand);
    transition: width .25s ease, left .25s ease;
}


/* ------------------------------ 网格 ---------------------------------- */
.pg-section .pg-grid {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: clamp(16px, 1.6vw, 24px);
    height: auto;
    perspective: none;
    justify-content: stretch;
}

/* ------------------------------ 卡片 ---------------------------------- */
.pg-section .pg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    overflow: hidden;
    border: 1px solid var(--pg-line);
    border-radius: var(--pg-radius);
    background: #fff;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .05);
    text-decoration: none;

    /* 逐一浮现：初始隐藏态 */
    opacity: 0;
    transform: translateY(22px);
    transition:
            opacity .45s ease,
            transform .5s cubic-bezier(.22, 1, .36, 1),
            box-shadow .3s ease,
            border-color .3s ease;
    transition-delay: var(--d, 0ms);

    /* 长列表：屏幕外的卡片跳过渲染，大幅降低首屏开销 */
    content-visibility: auto;
    contain-intrinsic-size: 280px 300px;
}

.pg-section .pg-card.in {
    opacity: 1;
    transform: none;
}

.pg-section .pg-card.in:hover {
    transform: translateY(-6px);
    border-color: rgba(0, 79, 145, .28);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .12);
    transition-delay: 0ms;
}

/* 图片区 */
.pg-section .pg-card .card-bg {
    position: relative;
    top: auto;
    left: auto;
    display: flex;
    align-items: center;
    justify-content: center;

    height: 210px;
    padding: 18px;
    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #f2f6fb 62%, #e7eef6 100%);
}

.pg-section .pg-card .card_product-img {
    width: auto;
    max-width: 88%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    border-radius: 6px;
    z-index: 1;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.pg-section .pg-card.in:hover .card_product-img {
    transform: scale(1.07);
}

/* 文字区 */
.pg-section .pg-card .card-content {
    position: relative;
    bottom: auto;
    height: auto;
    display: block;
    padding: 14px 16px 16px;
    border-top: 1px solid var(--pg-line);
    background: #fff;
}

.pg-section .pg-card .table-view {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
}

.pg-section .pg-card .left-column {
    min-width: 0;
}

.pg-section .pg-card .left-column p {
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: left;
    color: var(--pg-ink);
}

.pg-section .pg-card .right-column {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 79, 145, .08);
    font-size: 12px;
    color: var(--pg-brand);
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.pg-section .pg-card.in:hover .right-column {
    background: var(--pg-brand);
    color: #fff;
    transform: translateX(2px);
}

/* ------------------------------ 响应式 -------------------------------- */
@media (max-width: 768px) {
    .pg-section .pg-grid {

        width: 100%;
    }
    .content{
        padding: 0!important;
    }
    .pg-section .pg-card{
        margin-top: 10px;
    }

    .pg-section .pg-card .card-bg {
       width: 100%;

    }

    .pg-section .pg-card .card-content {
        padding: 10px 12px 12px;
    }

    .pg-section .pg-card .left-column p {
        font-size: .85rem;
    }
    .pg-section .pg-tabs .tab{
        padding: 10px;
    }
    .tabs{
       display: block;
    }


}

/* 尊重系统的"减少动态效果"设置 */
@media (prefers-reduced-motion: reduce) {
    .pg-section .pg-card {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}