/* ============================================================
   我们的产品页样式（绿色系工业风，与全站一致）
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* ---------- Hero 大图 ---------- */
.pd-hero {
    position: relative;
    background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 26px),
        linear-gradient(135deg, #0F3D2E 0%, #166534 55%, #1E7A4E 100%);
    padding: 78px 0 72px;
    color: #fff;
    overflow: hidden;
}
.pd-hero::after {
    content: '';
    position: absolute;
    right: -120px;
    top: -120px;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 42px solid rgba(255,255,255,.06);
}
.pd-hero::before {
    content: '';
    position: absolute;
    left: -90px;
    bottom: -140px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    border: 30px solid rgba(255,255,255,.05);
}
.pd-hero .util-container { position: relative; z-index: 1; }
.pd-badge {
    display: inline-block;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.35);
    border-radius: 999px;
    padding: 5px 16px;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 14px;
}
.pd-hero h1 { font-size: 36px; margin: 0 0 10px; letter-spacing: 1px; }
.pd-hero p { margin: 0; font-size: 15px; opacity: .9; }

/* ---------- 通用区块 ---------- */
.pd-section { padding: 56px 0; }
/* 区块底色按区块显式指定：以前用 .pd-section:nth-child(even) 交替，
   但增删任意一个 section 就会让后面所有区块的底色整体错位，新增「品牌授权证书」时就踩到了 */
.pd-cats    { background: #F6F8F6; }
.pd-brands  { background: transparent; }
.pd-quality { background: #F6F8F6; }
.pd-cta     { background: #F6F8F6; }
.pd-sec-title {
    font-size: 26px;
    font-weight: 800;
    color: #111827;
    text-align: center;
    margin: 0 0 8px;
}
.pd-sec-title::after {
    content: '';
    display: block;
    width: 44px;
    height: 3px;
    border-radius: 2px;
    background: #D97706;
    margin: 12px auto 0;
}
.pd-sec-sub {
    text-align: center;
    font-size: 14px;
    color: #6B7280;
    margin: 0 0 36px;
}

/* ---------- 产品分类（与首页同一套结构与样式） ----------
   类名、结构、配色均直接沿用首页 public/static/index/style1/css/style.css 的 .i1-cat-*，
   图标为 /static/about/image/*.svg 线条图经 CSS mask 渲染：
   形状来自行内变量 --ico，颜色来自 --cat-color（由模板末尾的脚本随机注入，不注入则回退品牌深绿）。
   两处如需改样式必须同步，否则首页与产品页会出现不一致。 */
.i1-cat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.i1-cat-card {
    display: block;
    text-align: center;
    background: #F7FBF8;
    border: 1px solid #E3E6EA;
    border-radius: 10px;
    padding: 30px 16px 26px;
    text-decoration: none;
    transition: all .18s;
}
.i1-cat-card:hover {
    border-color: #166534;
    background: #fff;
    box-shadow: 0 8px 24px rgba(22,101,52,.12);
    transform: translateY(-4px);
}
.i1-cat-ico {
    display: block;
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    background-color: var(--cat-color, #166534);
    -webkit-mask: var(--ico) no-repeat center / contain;
    mask: var(--ico) no-repeat center / contain;
    transition: transform .18s;
}
.i1-cat-card:hover .i1-cat-ico { transform: scale(1.1); }
.i1-cat-card strong { display: block; font-size: 16px; font-weight: 800; color: #14532D; }
.i1-cat-card small { display: block; font-size: 12px; color: #888; margin-top: 6px; line-height: 1.5; }

/* ---------- 品牌授权证书（两张并排一行：证书图在上、说明在下，点图放大看原图） ---------- */
.pd-certs { background: #F1F7F3; }
/* 证书只有一张占一行时左右留白太多、整块很空，所以两张一行（≤768 回到一列） */
.pd-cert-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}
.pd-cert-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #E3E6EA;
    border-radius: 12px;
    padding: 24px 22px 20px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pd-cert-item:hover {
    transform: translateY(-3px);
    border-color: #1E7A4E;
    box-shadow: 0 10px 24px rgba(15, 61, 46, .1);
}
/* 缩略图用 service_thumb() 生成的 480px 图（宽 240px 展示仍够清晰），zoom-in 光标提示可放大，底部提示条 hover/键盘聚焦时出现 */
.pd-cert-shot {
    position: relative;
    display: block;
    width: min(240px, 100%);
    padding: 0;
    border: 1px solid #E3E6EA;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
    cursor: zoom-in;
}
.pd-cert-shot img { display: block; width: 100%; height: auto; }
.pd-cert-zoom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 6px 0;
    font-size: 12px;
    text-align: center;
    color: #fff;
    background: rgba(15, 61, 46, .75);
    opacity: 0;
    transition: opacity .18s;
}
.pd-cert-shot:hover .pd-cert-zoom,
.pd-cert-shot:focus-visible .pd-cert-zoom { opacity: 1; }
.pd-cert-name { display: block; font-size: 17px; font-weight: 800; color: #14532D; margin-bottom: 6px; }
/* 文字区占满卡宽并撑到卡片底部，让两张证书的元信息行对齐（两张图高度差 9px、说明行数可能不同） */
.pd-cert-info { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }
.pd-cert-scope { font-size: 14px; line-height: 1.8; color: #4B5563; margin: 0 0 12px; }
.pd-cert-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: auto; font-size: 12.5px; color: #6B7280; }
.pd-cert-meta i { font-style: normal; font-weight: 700; color: #1E7A4E; margin-right: 5px; }

/* 放大查看层：默认不显示、加 .on 才出现（不用 hidden 属性，避免与 display 规则打架）；原图只在打开时才加载 */
.pd-lb { position: fixed; inset: 0; z-index: 9000; display: none; }
.pd-lb.on { display: block; }
.pd-lb-mask { position: absolute; inset: 0; background: rgba(8, 17, 13, .82); }
.pd-lb-fig {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    margin: 0;
    padding: 26px 20px;
    cursor: zoom-out;
}
.pd-lb-img {
    max-width: min(92vw, 760px);
    max-height: calc(100vh - 150px);
    width: auto;
    height: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
}
.pd-lb-cap { text-align: center; color: #fff; font-size: 13px; line-height: 1.7; }
.pd-lb-cap b { display: block; font-size: 16px; margin-bottom: 4px; }
.pd-lb-close {
    position: absolute;
    top: 16px;
    right: 20px;
    z-index: 1;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}
.pd-lb-close:hover { background: rgba(255, 255, 255, .32); }

/* ---------- 合作品牌（日本 / 欧美两组，共 32 个，数据见 Products::brands()） ---------- */
.pd-brand-groups { display: flex; flex-direction: column; gap: 30px; }
.pd-brand-group-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #14532D;
    text-align: center;
    margin: 0 0 14px;
}
/* 每行仍为 7 个（与改造前的 grid 一致，卡片尺寸不变），
   改用 flex 是为了让不满行的卡片居中（32 个品牌两组末尾都会剩几个，左对齐会留出缺角） */
.pd-brand-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.pd-brand-card {
    flex: 0 1 calc((100% - 14px * 6) / 7);
    min-width: 0;
    background: #fff;
    border: 1px solid #E8ECEF;
    border-radius: 10px;
    padding: 22px 10px 16px;
    text-align: center;
    transition: transform .2s, box-shadow .2s;
}
.pd-brand-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(15, 61, 46, .1);
}
.pd-brand-logo {
    display: block;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--bc);
    overflow-wrap: anywhere;   /* LINK-BELT / NADELLA 这类长名在窄屏下可换行，不探出卡片 */
}
.pd-brand-tag {
    display: inline-block;
    margin-top: 8px;
    font-size: 11px;
    color: #6B7280;
    background: #F3F4F6;
    border-radius: 999px;
    padding: 2px 10px;
}

/* ---------- 品质保障 ---------- */
.pd-quality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.pd-quality-card {
    background: #fff;
    border: 1px solid #E8ECEF;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pd-quality-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(15, 61, 46, .1);
    border-color: #1E7A4E;
}
.pd-quality-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #E9F3EC;
    font-size: 24px;
    margin-bottom: 16px;
}
.pd-quality-card h3 { font-size: 16px; font-weight: 800; color: #111827; margin: 0 0 8px; }
.pd-quality-card p { font-size: 13px; line-height: 1.7; color: #6B7280; margin: 0; }

/* ---------- 数据统计（与首页同一套结构与样式） ----------
   类名、结构、配色直接沿用首页 public/static/index/style1/css/style.css 的 .i1-stats-*（顶部浅色版），
   首页容器 .i1-container 与本页 .util-container 尺寸一致（max-width:1180px / padding:0 20px），所以容器用 util-container。
   两处如需改样式必须同步，否则首页与产品页的数据统计会不一致。 */
.i1-stats-top { background: #EAF6F0; }
.i1-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding-top: 34px;
    padding-bottom: 34px;
    text-align: center;
    gap: 16px;
}
.i1-stat strong { display: block; font-size: 32px; font-weight: 800; color: #166534; }
.i1-stat span { font-size: 14px; color: #555; }

/* ---------- 行动引导 ---------- */
.pd-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #fff;
    border: 1px solid #E8ECEF;
    border-radius: 14px;
    padding: 34px 40px;
}
.pd-cta h2 { font-size: 20px; font-weight: 800; color: #111827; margin: 0 0 8px; }
.pd-cta p { font-size: 14px; color: #6B7280; margin: 0; }
.pd-cta-btns { display: flex; gap: 12px; flex-shrink: 0; }
.pd-btn {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity .2s, transform .2s;
}
.pd-btn:hover { opacity: .9; transform: translateY(-1px); }
.pd-btn-primary { background: #1E7A4E; color: #fff; }
.pd-btn-ghost {
    background: transparent;
    color: #1E7A4E;
    border: 1px solid #1E7A4E;
}

/* ---------- 响应式 ---------- */
@media (max-width: 1024px) {
    .i1-cat-grid, .i1-stats-grid, .pd-quality-grid { grid-template-columns: repeat(2, 1fr); }
    .pd-brand-card { flex-basis: calc((100% - 14px * 3) / 4); } /* 品牌墙→每行 4 个 */
}
@media (max-width: 768px) {
    .pd-hero { padding: 48px 0 44px; }
    .pd-hero h1 { font-size: 28px; }
    .pd-section { padding: 40px 0; }
    .pd-cta-inner { flex-direction: column; text-align: center; padding: 28px 20px; }
    .pd-brand-groups { gap: 22px; }
    /* 证书：一行两张改为竖排单列（卡片内部本来就是上图下文，无需再改） */
    .pd-cert-list { grid-template-columns: 1fr; }
    .pd-cert-item { gap: 12px; padding: 20px 18px 18px; }
    .pd-cert-shot { width: 200px; }
    .pd-lb-img { max-height: calc(100vh - 170px); }
}
@media (max-width: 560px) {
    .i1-cat-grid, .pd-quality-grid { grid-template-columns: 1fr; }
    .pd-brand-card { flex-basis: calc((100% - 14px * 2) / 3); } /* 品牌墙→每行 3 个 */
}