/* 复用品牌故事页样式，并增加产品卡片、筛选、分页样式 */
:root {
    --deep-gray: #1A1A1F;
    --pearl-white: #F8F9FA;
    --tech-blue: #2E86AB;
    --silver-blue: #5DADEC;
    --text-dark: #333;
    --text-light: #E0E0E0;
    --text-muted: #888;
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.08);
    --shadow-md: 0 10px 40px rgba(0,0,0,0.12);
    --transition: all 0.3s ease;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Roboto','Noto Sans SC',sans-serif; background: var(--pearl-white); color: var(--text-dark); line-height:1.6; }
.container { max-width:1280px; margin:0 auto; padding:0 24px; }
.row { display:flex; flex-wrap:wrap; margin:0 -15px; }
.col-4 { flex:0 0 33.333%; max-width:33.333%; padding:0 15px; }
@media (max-width:992px) { .col-4 { flex:0 0 50%; max-width:50%; } }
@media (max-width:768px) { .col-4 { flex:0 0 100%; max-width:100%; } }
section { padding: 70px 0; }
.section-header { text-align: center; margin-bottom: 64px; }
.section-label { font-size:13px; color:var(--silver-blue); letter-spacing:3px; text-transform:uppercase; }
.section-title { font-size:36px; font-weight:700; margin-top:16px; }
.bg-dark { background: var(--deep-gray); color: var(--text-light); }
.bg-dark .section-title { color:white; }
.product-card { background: white; border-radius: 12px; overflow: hidden; transition: var(--transition); margin-bottom: 30px; box-shadow: var(--shadow-sm); }
.product-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.product-img { background: #f0f2f5; text-align: center; position: relative; aspect-ratio:1; }
.product-img img { width:100%;  transition: transform 0.3s; }
.product-badge { position: absolute; top:16px; left:16px; background: var(--silver-blue); color:white; padding:4px 12px; border-radius:30px; font-size:12px; }
.product-info { padding: 24px; text-align: center; }
.product-cat { color: var(--tech-blue); font-size:12px; font-weight:600; text-transform:uppercase; }
.product-info h3 { margin:10px 0 8px; font-size:20px; }
.product-info p { font-size:14px; color: var(--text-muted); }
.btn-outline { border:1px solid var(--silver-blue); color:var(--silver-blue); background:transparent; padding:8px 20px; border-radius:4px; text-decoration:none; display:inline-block; transition:0.2s; }
.btn-outline:hover { background:var(--silver-blue); color:white; }
.filter-bar { display: flex; justify-content: center; gap: 16px; margin-bottom: 48px; flex-wrap: wrap; }
.filter-btn { background: white; border: 1px solid #e0e0e0; padding: 8px 24px; border-radius: 40px; cursor: pointer; transition: 0.2s; font-size:14px; }
.filter-btn.active { background: var(--silver-blue); border-color: var(--silver-blue); color: white; }
.pagination { display: flex; justify-content: center; gap: 12px; margin-top: 48px; flex-wrap: wrap; }
.page-btn { background: white; border: 1px solid #ddd; padding: 8px 16px; border-radius: 4px; cursor: pointer; transition: 0.2s; }
.page-btn.active { background: var(--silver-blue); border-color: var(--silver-blue); color: white; }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
/* 导航栏、页脚、悬浮按钮样式已统一收敛到 common.css，此处不再重复定义 */
.text-center { text-align:center;}
/*////补充样式20260519*/
.a-no-style{all: unset; /* 清除所有默认样式 */cursor: pointer;/* 可选：保留手型光标 */}
.pagination li {
    margin: 0 5px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    list-style: none;
}
.pagination li a {
    border-radius: 4px;
    color: #6e6e6e;
    background: #fff;
    padding: 12px 16px;
    border: 1px solid #DCDCDC;
    display: block;
    text-decoration: none;
}
.pagination li a:hover {
    background: #5CABE9;
    color: #fff;
    border: 1px solid #5CABE9;
}

/* ========== 产品列表页 Banner 背景图移动端自适应 ========== */
/* PC 端保持原图高度 750px，让图片下方完整显示 */
.bg-dark.banner-bg {
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    width: 100%;
    height: 750px !important; /* 与 list_banner.htm 内联 height:750px 一致 */
    display: block;
}

/* 平板及以下：按图片原始比例(1920x750)自适应高度，cover 保证填满无留白 */
@media (max-width: 992px) {
    .bg-dark.banner-bg {
        height: auto !important;
        -webkit-aspect-ratio: 1920 / 750;
        aspect-ratio: 1920 / 750;
    }
}

/* iOS Safari < 15 不支持 aspect-ratio 时，用 padding-top 按比例撑高（750/1920≈39.06%） */
@supports not (aspect-ratio: 1 / 1) {
    @media (max-width: 992px) {
        .bg-dark.banner-bg {
            height: 0 !important;
            padding-top: 39.06%;
            display: block;
        }
    }
}