/* ---------------------------------------------------------------------
   全系列产品参数总表
   背景：27 款产品的规格参数原先只存在于 window.HCD_PRODUCT_DATA（JS 对象），
        进灯箱才渲染成 DOM。GPTBot / Bytespider / PerplexityBot 不执行 JS，
        实测产品页「型材壁厚 / 抗风压 / 隔热条 / PA66」静态命中 0 处。
        这里把同一份 products.json 的 specs 直出静态 HTML，与灯箱同源。
   版式：参数用 <dl> + 两列 grid（dt/dd 在 grid 里自动成行，省掉每行包裹 div，
        全站 27 款 × 平均 8 条参数，省下来的是实打实的页面体积）。
   --------------------------------------------------------------------- */
.specsheet-note{max-width:78ch;margin:0 0 var(--space-8);font-size:14px;line-height:1.85;color:var(--gray-600)}
.specsheet-cat{margin-top:var(--space-8)}
.specsheet-cat-name{display:flex;align-items:baseline;gap:10px;font-size:18px;font-weight:700;color:var(--navy-900);margin:0 0 var(--space-4);padding-bottom:10px;border-bottom:2px solid var(--blue-600)}
.specsheet-cat-count{font-size:13px;font-weight:400;color:var(--gray-500)}
.specsheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(380px,1fr));gap:var(--space-4)}
.spec-card{border:1px solid var(--gray-300);border-radius:var(--radius-lg);background:var(--cream-100);padding:var(--space-5)}
.spec-card-title{font-size:16px;font-weight:700;color:var(--navy-900);margin:0 0 4px;line-height:1.5}
.spec-card-sub{display:block;font-size:13px;line-height:1.65;color:var(--gray-500);margin:0 0 12px}
.spec-card-list{display:grid;grid-template-columns:88px 1fr;margin:0;padding:0}
.spec-card-list dt{padding:5px 0;border-top:1px solid var(--gray-200);font-size:13px;font-weight:400;color:var(--gray-500);white-space:nowrap}
.spec-card-list dd{margin:0;padding:5px 0 5px 10px;border-top:1px solid var(--gray-200);font-size:13px;line-height:1.6;color:var(--navy-900)}
.spec-card-list dt:first-of-type,.spec-card-list dd:first-of-type{border-top:0}
/* 2026-09-23：卡片改 <details>（移动端折叠；桌面由脚本保持全展开）。
   基线只做两件「去 UA 默认」的事 —— 版式规则一律放在下面的移动 media，桌面零影响。 */
.spec-card > summary{list-style:none}
.spec-card > summary::-webkit-details-marker{display:none}
@media (max-width:640px){.specsheet-grid{grid-template-columns:1fr}.spec-card-list{grid-template-columns:80px 1fr}}
/* 平板档（768–1023）用 2 列：卡宽下限 380→320，否则 704px 可用宽只排得下 1 列。
   断点 600→640（600 不在既定三档 767/1023/1024 内）。
   ⚠️ 只改 768–1023，不动 ≤767 与 ≥1024 的既有列数。 */
@media (min-width:768px) and (max-width:1023px){.specsheet-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}}
/* 移动端产品卡折叠：27 张全展开约 15 屏；2 列方案已实测翻车（单卡 448→854px、整段反增）。
   ⚠️ 折叠态卡片须清掉自身 padding（--space-5=20px），否则每张多 40px。 */
/*续：折叠断点 767 → 1023。平板档（768–1023）原本 27 张卡**全展开**，
/* 折叠断点 767→1023：平板档原本 27 张卡全展开（段高约 10.8 屏）。
   ⚠️ build_spec_accordion_script() 的 matchMedia 断点必须与本行严格同步，
      否则会出现「CSS 折叠了但 JS 又把卡全展开」的自相矛盾态。 */
      否则会出现「CSS 折叠了但 JS 又把卡全展开」的自相矛盾态。 */
@media (max-width:1023px){
  details.spec-card{padding:0;overflow:hidden}
  details.spec-card > summary{
    position:relative;cursor:pointer;
    padding:var(--space-4) var(--space-12) var(--space-4) var(--space-5);
  }
  details.spec-card > summary > .spec-card-sub{margin-bottom:0}
  /* 右侧展开箭头（与 shared.css 的 details.faq-item 同规格：9px + 2px 描边） */
  details.spec-card > summary::after{
    content:"";position:absolute;right:var(--space-5);top:50%;
    width:9px;height:9px;
    border-right:2px solid var(--gray-400);
    border-bottom:2px solid var(--gray-400);
    transform:translateY(-50%) rotate(45deg);
    transition:transform .2s;
  }
  details.spec-card[open] > summary::after{transform:translateY(-50%) rotate(-135deg)}
  details.spec-card > summary:focus-visible{outline:2px solid var(--blue-600);outline-offset:-2px}
  details.spec-card .spec-card-list{padding:0 var(--space-5) var(--space-5)}
}