/* ============================================================
 * product.css —— 产品详情（20 页共用）
 * 源：05-原型/single-wall.html
 * 目标模板：single-zz_product.php
 * 本文件 = 该族独有规则（公共外壳见 _base.css）
 * 自动生成，请勿手改
 * ============================================================ */

:root{--blue:#1565C0;--blue-darker:#0A3D8F;--red:#E0301E;--paper:#f5f6f8;--white:#fff;--line:#dde2e8;--text:#222;--muted:#555}
body{font-family:Georgia,serif;background:var(--paper);color:var(--text);line-height:1.7;font-size:16px}
.container{max-width:1100px;margin:0 auto;padding:0 24px}
h1,h2,h3{font-family:Arial,sans-serif;font-weight:700}
.nav-item.on>a{color:var(--blue);font-weight:700}
.dropdown .dd-cur{background:var(--paper);font-weight:700}
.breadcrumb{padding:14px 0;font-size:12px;color:#888;font-family:Arial,sans-serif}
.breadcrumb a{color:#888;text-decoration:none}
.hero{background:var(--white);padding:36px 0 40px;border-bottom:1px solid var(--line)}
.hero-inner{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}
.hero h1{font-size:clamp(1.6rem,3.5vw,2.4rem);color:var(--blue-darker);line-height:1.2;margin-bottom:10px}
.hero-sub{font-size:15px;color:var(--text);max-width:520px;margin-bottom:18px}
.spec-table{border-collapse:collapse;font-size:13px;font-family:Arial,sans-serif;margin-bottom:20px}
.spec-table th{text-align:left;color:#444;font-weight:400;padding:7px 12px;background:#f0f2f5;border:1px solid #cbd5e0;width:170px}
.spec-table td{color:var(--text);font-weight:700;padding:7px 12px;border:1px solid #cbd5e0;background:var(--white)}
.hero-link{color:var(--blue-darker);text-decoration:underline;font-size:15px}
.hero-img{background:var(--paper);border-radius:6px;overflow:hidden;height:280px}
.hero-img img{width:100%;height:100%;object-fit:cover;display:block}
.section{padding:48px 0}
.sec-title{font-family:Arial,sans-serif;font-size:22px;color:var(--blue-darker);margin-bottom:24px;font-weight:700}
.overview{background:var(--white)}
.overview-text{max-width:800px;font-size:15px;margin-bottom:20px}
.adv-list{list-style:none;max-width:800px}
.adv-list li{padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.adv-list li:last-child{border-bottom:none}
.adv-list b{font-family:Arial,sans-serif;color:var(--blue-darker)}
.table-wrap{overflow-x:auto;margin-bottom:8px;border-radius:6px;border:1px solid var(--line);background:var(--white)}
table{width:100%;border-collapse:collapse;font-size:13px;font-family:Arial,sans-serif}
th{background:var(--blue-darker);color:#fff;padding:10px 14px;text-align:left;font-size:12px;font-weight:700;border:1px solid #3a5a94}
td{padding:9px 14px;border:1px solid #cbd5e0;background:var(--white)}
tr:nth-child(even) td{background:#f8fafd}
.table-note{font-size:12px;color:var(--muted);margin-top:6px}
.table-note a{color:var(--blue-darker);text-decoration:underline}
.apps{background:var(--paper)}
.app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.app-card{background:var(--white);border:1px solid var(--line);border-radius:6px;padding:20px}
.app-card h3{font-size:15px;margin-bottom:6px;color:var(--blue-darker)}
.app-card p{font-size:13px;color:var(--muted);line-height:1.6}
.standards{background:var(--white)}
.std-list{list-style:none}
.std-list li{padding:12px 0;border-bottom:1px solid var(--line);display:flex;gap:16px;align-items:baseline}
.std-list li:last-child{border-bottom:none}
.std-code{font-family:Arial,sans-serif;font-weight:700;font-size:15px;color:var(--blue);min-width:140px}
.std-desc{font-size:13px;color:#444}
.faq{background:var(--paper)}
.faq-item{background:var(--white);border:1px solid var(--line);margin-bottom:8px;border-radius:6px;overflow:hidden}
.faq-item summary{padding:14px 18px;cursor:pointer;font-family:Arial,sans-serif;font-size:14px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;color:var(--blue-darker)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:20px;color:var(--red);font-weight:300}
.faq-item[open] summary::after{content:'−'}
.faq-item .faq-body{padding:0 18px 14px;font-size:13px;color:#444;line-height:1.7}
.faq-cta{margin-top:16px;font-size:15px}
.faq-cta a{color:var(--blue-darker);text-decoration:underline}
.related{background:var(--white)}
.rel-block{margin-bottom:32px}
.rel-block:last-child{margin-bottom:0}
.rel-block h3{font-size:16px;color:var(--blue-darker);margin-bottom:14px}
.rel-arts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-art{border:1px solid var(--line);border-radius:6px;padding:16px;text-decoration:none;display:block}
.rel-art:hover{background:var(--paper)}
.rel-art h4{font-family:Arial,sans-serif;font-size:14px;color:var(--blue-darker);margin-bottom:4px}
.rel-art p{font-size:12px;color:var(--muted);line-height:1.5}
.rel-prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rel-card{border:1px solid var(--line);border-radius:6px;overflow:hidden;text-decoration:none;display:block}
.rel-card:hover{box-shadow:0 4px 16px rgba(21,101,192,.1)}
.rel-img{height:110px;overflow:hidden}
.rel-img img{width:100%;height:100%;object-fit:cover;display:block}
.rel-body{padding:12px 14px}
.rel-body h4{font-family:Arial,sans-serif;font-size:14px;color:var(--blue-darker);margin-bottom:2px}
.rel-body p{font-size:12px;color:var(--muted)}
.cta-band{background:var(--blue-darker);padding:36px 0;text-align:center}
.cta-band p{color:#c5cae9;font-size:14px;margin:0 0 16px;font-family:Arial,sans-serif}
.cta-btn{display:inline-block;background:var(--red);color:#fff;font-family:Arial,sans-serif;font-weight:700;font-size:15px;padding:12px 32px;text-decoration:none;border-radius:4px}
.zz-footer{background:#0D47A1;border-top:3px solid var(--red);color:#b3d1f2;padding:48px 0 20px;font-family:Arial,sans-serif}
@media(max-width:768px){
.hero-inner{grid-template-columns:1fr}
.app-grid,.rel-arts,.rel-prods{grid-template-columns:1fr}
.hdr nav{display:none}
.burger{display:block}
.m-nav.open{display:block}
.foot-grid{grid-template-columns:1fr 1fr;gap:24px}
.foot-brand{grid-column:1/-1}
table{font-size:11px}
th,td{padding:7px 9px}
}