/* ============================================================
   深圳市朗健运动时尚用品有限公司 LJVOGUES — 全站共用样式
   主色 #0F5F53 深青绿｜点缀 #E4708A 暖粉｜工业洁净风
   ============================================================ */

:root{
  --color-primary:#0F5F53;
  --color-primary-dark:#0A4740;
  --color-primary-light:#E8F1EF;
  --color-accent:#E4708A;
  --color-accent-soft:#FCEEF1;
  --color-text:#16211F;
  --color-text-muted:#4A5754;
  --color-text-invert:#FFFFFF;
  --color-bg:#FFFFFF;
  --color-bg-soft:#F3F6F5;
  --color-border:#DCE4E2;
  --color-success:#2E7D5B;
  --color-warning:#C26B2E;
  --color-danger:#B7413C;
  --font-sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",sans-serif;
  --fs-h1:40px; --fs-h2:30px; --fs-h3:22px; --fs-body:16px; --fs-small:14px;
  --lh-tight:1.3; --lh-body:1.75;
  --space-section:88px; --space-block:32px; --space-inline:16px;
  --radius-card:8px; --radius-btn:6px;
  --shadow-card:0 1px 2px rgba(15,95,83,.06);
  --shadow-hover:0 8px 24px rgba(15,95,83,.12);
  --container-max:1200px; --header-h:78px; --transition-base:200ms ease;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--font-sans);font-size:var(--fs-body);line-height:var(--lh-body);
  color:var(--color-text);background:var(--color-bg);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--color-primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0 0 16px;line-height:var(--lh-tight);font-weight:700}
h1{font-size:var(--fs-h1)} h2{font-size:var(--fs-h2)} h3{font-size:var(--fs-h3)}
p{margin:0 0 16px}
ul{margin:0 0 16px;padding-left:20px}
:focus-visible{outline:3px solid var(--color-accent);outline-offset:2px}

.container{max-width:var(--container-max);margin:0 auto;padding:0 24px}
.section{padding:var(--space-section) 0}
.section--soft{background:var(--color-bg-soft)}
.section--primary{background:var(--color-primary);color:var(--color-text-invert)}
.section--primary h2,.section--primary h3{color:var(--color-text-invert)}
/* 2026-10-12 排版修正：标题放开限宽占满整行（760px 限宽导致长标题旁留 400px 空位却折两排）；
   正文段落仍限 760px 保证中文行长约 45 字的可读性；窄屏时 balance 让折行均衡美观 */
.section-head{margin-bottom:40px}
.section-head h2{text-wrap:balance}
.section-head p{color:var(--color-text-muted);font-size:17px;max-width:760px}
.section--primary .section-head p{color:#CFE0DC}
.eyebrow{display:inline-block;font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;
  color:var(--color-accent);text-transform:uppercase;margin-bottom:12px}
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* ---------- 顶部信息条（已下线，2026-10-31）：样式随之移除 ---------- */

/* ---------- 导航 ---------- */
.header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--color-border);backdrop-filter:saturate(1.2) blur(6px)}
/* 头部单独比正文容器宽（1480 vs 1200）：9 个一级栏目 + 2 个 CTA 的实测占位是
   1158px，而旧写法沿用 .container 只有 1152px 可用，1280 视口下就已经溢出 6px
   ——这是"挤"的根因。独立 max-width + 流式侧边距后，1200 视口刚好放得下（余 3px），
   1280 余 81px；≥1280px 再走下面的宽松档（大 logo、宽字距、分隔线、88px 高）。 */
.header__inner{max-width:1480px;padding:0 clamp(16px,1.6vw,48px);
  display:flex;align-items:center;gap:16px;min-height:var(--header-h)}
.brand{display:flex;align-items:center;gap:9px;font-weight:800;font-size:18px;color:var(--color-text);flex:0 0 auto;min-width:0}
.brand:hover{text-decoration:none}
.brand__mark{width:34px;height:34px;border-radius:8px;flex:0 0 auto;
  background:linear-gradient(135deg,var(--color-primary),var(--color-accent));
  display:grid;place-items:center;color:#fff;font-size:13px;font-weight:800;letter-spacing:.02em}
.brand__img{height:34px;width:auto;flex:0 0 auto;display:block}
.nav{margin-left:auto}
.nav__list{display:flex;align-items:center;gap:2px;list-style:none;margin:0;padding:0}
.nav__item{position:relative}
.nav__link{display:block;padding:10px 9px;border-radius:var(--radius-btn);font-weight:600;
  color:var(--color-text);font-size:15px;white-space:nowrap}
.nav__link:hover,.nav__item:hover>.nav__link{background:var(--color-primary-light);color:var(--color-primary-dark);text-decoration:none}
.nav__link[aria-current="page"]{color:var(--color-primary);background:var(--color-primary-light)}
/* max-height + overflow-y：下拉里条目数最多的两组是「产品中心」12 条（展开 549px）、
   「OEM/ODM」7 条（展开 380px）。桌面笔记本常见的 600px 视口高度下，产品中心末两条会
   掉到折线以下点不到（实测 1280×600 时越界 46px）。限高后超长下拉内部可滚动，
   余量用 var(--header-h) + 100px 表达（顶栏 + 页头 + 8px），顶栏高度调整时不必再手改常数。 */
.nav__sub{position:absolute;top:100%;left:0;min-width:236px;margin:0;padding:8px;list-style:none;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-hover);opacity:0;visibility:hidden;transform:translateY(6px);
  max-height:calc(100vh - var(--header-h) - 100px);overflow-y:auto;overscroll-behavior:contain;
  transition:opacity var(--transition-base),transform var(--transition-base),visibility var(--transition-base)}
.nav__item:hover>.nav__sub,.nav__item:focus-within>.nav__sub{opacity:1;visibility:visible;transform:translateY(0)}
.nav__sub a{display:block;padding:9px 12px;border-radius:var(--radius-btn);
  color:var(--color-text);font-size:15px;font-weight:500}
.nav__sub a:hover{background:var(--color-bg-soft);color:var(--color-primary);text-decoration:none}
.header__cta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.header__cta .btn{padding:9px 14px;font-size:14px;white-space:nowrap}
/* 宽松档（≥1280px）：把头部新腾出的空间按比例还给 logo、菜单字距与按钮，而不是只留白。
   为何从 1280 起跳：紧凑档占位固定 1158px（brand 135 + nav 666 + CTA 325 + 两个 16px
   组间距），而内容盒随视口线性增长——1200 视口只有 1162px（余 3px），1240 余 42px，
   1280 起才有能覆盖宽松档增量（约 62px，含分隔线 12~22px 左内边距）的余量。
   实测断点设在 1240 时余量会翻负（−15px，靠 flex 收缩才没露馅），所以定在 1280。
   1200~1279 完全保持原始紧凑值不动，小笔记本不会被挤爆；1280 以上逐项用 clamp()
   流式放大，屏越宽越舒展，到 1480px 容器上限后停止增长（中间不设第二道断点，不会跳变）。
   分隔线同样只在这一档出现——它是"这里有余量"的视觉信号，挤的时候不该占位。
   上限值按实测倒推：1920 下总占位 1351 < 内容盒 1419（余 68px），2560 仍余 43px。 */
@media (min-width:1280px){
  /* 留白也包含纵向：头部由 78px 抬到 88px。main.js 的滚动高亮与抽屉高度都是
     现场读 --header-h 的，所以这一改动会自动带着目录吸附位一起走，无需改 JS。 */
  :root{--header-h:88px}
  .header__inner{gap:clamp(16px,1.1vw,24px);padding:0 clamp(16px,1.6vw,40px)}
  .brand__img{height:clamp(34px,2.8vw,44px)}
  .nav__list{gap:clamp(2px,0.45vw,5px)}
  .nav__link{padding:clamp(10px,0.8vw,13px) clamp(9px,0.7vw,12px)}
  .header__cta{gap:clamp(8px,0.6vw,12px);padding-left:clamp(12px,1.2vw,22px);
    border-left:1px solid var(--color-border)}
  .header__cta .btn{padding:clamp(9px,0.75vw,12px) clamp(14px,1.1vw,18px)}
}
.nav-toggle{display:none;width:44px;height:40px;border:1px solid var(--color-border);background:#fff;
  border-radius:var(--radius-btn);cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;margin:4px auto;background:var(--color-text)}
.nav-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 22px;border-radius:var(--radius-btn);border:1px solid transparent;
  font-size:15px;font-weight:700;line-height:1.4;cursor:pointer;
  transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base),transform var(--transition-base)}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn--primary{background:var(--color-primary);color:#fff}
.btn--primary:hover{background:var(--color-primary-dark);color:#fff}
.btn--accent{background:var(--color-accent);color:#fff}
.btn--accent:hover{background:#D25C79;color:#fff}
.btn--ghost{background:transparent;color:var(--color-primary);border-color:var(--color-primary)}
.btn--ghost:hover{background:var(--color-primary-light)}
.hero .btn--ghost{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(10,16,15,.28);text-shadow:0 1px 8px rgba(10,16,15,.4)}
.hero .btn--ghost:hover{background:rgba(255,255,255,.16)}
.btn--onDark{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.btn--onDark:hover{background:rgba(255,255,255,.12);color:#fff}
/* 首屏这一次按钮落在实景照片上（其余 39 处 .btn--onDark 都在 cta-band 的实心绿底上，
   不改动）。照片过曝高光下纯透明底只有 2.8:1，故本处补一层低透明衬底 + 实心阴影。 */
.hero .btn--onDark{background:rgba(10,16,15,.44);border-color:rgba(255,255,255,.72);
  text-shadow:0 1px 3px rgba(6,20,18,.9),0 0 14px rgba(6,20,18,.6)}
.btn--block{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* 首屏 Banner：工厂车间实景直出（不加任何暗色涂层，也不做提亮滤镜）。
   实测校正（2026-10，1280px 视口，按「每个字形的真实墨迹区」逐像素取值）。
   上一版叠了三道 rgba(10,16,15) 蒙版（横向 .93/.86/.76/.60 ＋ 顶部 .58 ＋ 底部 .5）
   并加 brightness(1.3)；实测照片只有约 14% 面积可见，观感发黑、发闷。同时
   brightness(1.3) 会把照片过曝高光重新削平到纯白（最亮处 rgb(255,255,255)），
   对对比度几乎没有帮助 —— 实测蒙版所需不透明度：1.3 时 0.827、1.0 时 0.757，
   仅差 0.07，却让照片明显发灰。故本轮改为「浅蒙版 ＋ 实心文字阴影」：
     ① 横向蒙版 .93/.86/.76/.60 → .45/.34/.17/0：只保留左侧文字区一层底，
        右侧约 1/4 还原照片原貌；
     ② 顶部竖向 .58 → .33，并在 62% 处归零（H1 位于 y140-290，仍需最浓的一段）；
     ③ 底部由 .5/26% 改为 .88/14%/26% 的收边渐隐，让认证条落在自然暗底上，
        而不是一整块悬浮的色板；
     ④ 去掉 brightness(1.3) saturate(1.05) 滤镜，照片直出；
     ⑤ 承压方式改为实心 text-shadow：H1、副标题、eyebrow 均加双道近黑阴影，
        浅色文字靠阴影在过曝高光区也站得住（副标题的既有做法）。
   1280 实测（取每个元素自身最差像素；文字阴影按 50% 覆盖率保守折算）：
     eyebrow 6.05:1、H1 4.56:1、副标题 6.38:1、次按钮 6.52:1、
     认证条正文 7.43-11.78:1 —— 全部达标；照片可见面积 14% → 64%，
     其中 22% 几乎完全无遮挡。
   eyebrow 由 #F2A0B4 提亮为 #FFC4D2：原色在浅蒙版下对纯白高光只有 4.50:1（刚好
   压线），提亮后同一位置为 6.05:1，留出安全余量。 */
.hero{position:relative;overflow:hidden;isolation:isolate;color:var(--color-text-invert);background:#101413}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(10,16,15,.33) 0%,rgba(10,16,15,.17) 24%,rgba(10,16,15,.04) 46%,rgba(10,16,15,0) 62%),
    linear-gradient(0deg,rgba(10,16,15,.88) 0%,rgba(10,16,15,.42) 14%,rgba(10,16,15,0) 26%),
    linear-gradient(90deg,rgba(10,16,15,.45) 0%,rgba(10,16,15,.34) 46%,rgba(10,16,15,.17) 76%,rgba(10,16,15,0) 100%),
    url("/images/factory-floor.jpg") center/cover no-repeat}
.hero__inner{position:relative;z-index:1;display:block;padding:104px 0 84px;min-height:520px}
.hero__copy{max-width:none}
.hero .eyebrow{color:#FFC4D2;margin-bottom:16px;text-shadow:0 1px 3px rgba(6,20,18,.95),0 0 14px rgba(6,20,18,.8)}
.hero h1{font-size:54px;line-height:1.14;letter-spacing:-.01em;margin-bottom:22px;color:#fff;max-width:none;
  text-shadow:0 1px 3px rgba(6,20,18,.92),0 0 16px rgba(6,20,18,.78)}
/* 副标题：纯文字，与 H1 同一套「实景照片 + 蒙版」观感，不加任何衬板/色块
   （编者 2026-10 要求：白色色块「不好看、破坏整体一致性」）。
   用浅色而不是品牌绿：绿 #0F5F53 明度 L≈0.089，与照片底亮度过近，
   实测无论怎么加蒙版都只有 1.0-1.4:1，物理上不可能达标；浅色加实心 text-shadow
   才能在过曝高光区也保持 ≥4.5:1。 */
.hero__lead{font-size:19px;line-height:1.72;color:#F1FBF8;max-width:880px;
  margin-bottom:30px;text-shadow:0 1px 3px rgba(6,20,18,.95),0 0 16px rgba(6,20,18,.82)}
.hero__cta{margin-bottom:0}
.hero__cta .btn{padding:15px 30px;font-size:16px}
/* 首屏信任徽标条：每项配可识别的认证标识 + 名称 + 编号 */
.hero__trust{position:relative;z-index:1;border-top:1px solid rgba(255,255,255,.18)}
.hero__certs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:0;list-style:none}
.hero__certs li{display:flex;align-items:flex-start;gap:15px;padding:22px 26px;
  border-left:1px solid rgba(255,255,255,.14);margin-top:22px}
.hero__certs li:nth-child(-n+3){margin-top:0}
.hero__certs li:nth-child(3n+1){border-left:0;padding-left:0}
.hero__cert-img{flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  box-shadow:0 4px 14px rgba(4,32,28,.34)}
.hero__cert-txt{display:block;font-size:13px;color:#BFD6D1;line-height:1.5}
.hero__cert-txt strong{display:block;font-size:15px;font-weight:800;color:#fff;margin-bottom:3px}
/* ---------- Banner 承接带：制造能力数据 + 品类直达（属方案 §10.2-3 同一模块） ---------- */
.capband{background:var(--color-bg-soft);border-bottom:1px solid var(--color-border)}
.capband__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:0;padding:44px 0 40px;
  list-style:none}
.capband__stats li{padding:0 30px;border-left:1px solid var(--color-border);margin-bottom:24px}
.capband__stats li:nth-child(3n+1){border-left:0;padding-left:0}
.capband__stats li:nth-last-child(-n+3){margin-bottom:0}
.capband__stats strong{display:block;font-size:38px;line-height:1.1;font-weight:800;
  color:var(--color-primary);letter-spacing:-.02em;margin-bottom:8px}
.capband__stats strong em{font-style:normal;font-size:19px;font-weight:700;color:var(--color-primary);
  margin-left:4px}
.capband__label{display:block;font-size:15px;font-weight:800;color:var(--color-text);margin-bottom:4px}
.capband__desc{display:block;font-size:13px;color:var(--color-text-muted);line-height:1.55}
.capband__cats{border-top:1px solid var(--color-border);padding:20px 0 26px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.capband__cats-label{margin:0;font-size:13px;font-weight:800;letter-spacing:.06em;
  color:var(--color-text-muted);flex:0 0 auto}
.capband__cats ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.capband__cats li a{display:block;background:#fff;border:1px solid var(--color-border);
  border-radius:999px;padding:7px 16px;font-size:13px;font-weight:600;color:var(--color-primary);
  transition:background var(--transition-base),border-color var(--transition-base),color var(--transition-base)}
.capband__cats li a:hover{background:var(--color-primary);border-color:var(--color-primary);
  color:#fff;text-decoration:none}
.ph{position:relative;border-radius:6px;background:
  repeating-linear-gradient(135deg,rgba(255,255,255,.16) 0 10px,rgba(255,255,255,.06) 10px 20px),
  linear-gradient(160deg,rgba(255,255,255,.18),rgba(255,255,255,.04));
  display:grid;place-items:center;text-align:center;color:#EAF3F1;font-size:13px;font-weight:600;padding:16px}
.ph--hero{aspect-ratio:4/3}
.ph--card{aspect-ratio:16/10;background:
  repeating-linear-gradient(135deg,var(--color-primary-light) 0 10px,#fff 10px 20px);
  color:var(--color-text-muted)}

/* ---------- 实拍/示意图（figure + 图注） ----------
   用于已取得真实图片的图位：图注给出结构顺序与「以确认样品/批次检测为准」的口径。 */
.figure{margin:0}
.figure img{width:100%;height:auto;border-radius:var(--radius-card);
  border:1px solid var(--color-border);background:#fff;box-shadow:var(--shadow-card)}
.figure figcaption{margin-top:12px;font-size:13px;line-height:1.7;
  color:var(--color-text-muted)}
/* 网格图墙（首页工厂实拍）：统一 4:3 裁切比 + 卡片化对齐，行间图注底边齐平；
   仅作用域容器内生效，不影响全站其他 .figure 用法 */
.figwall{align-items:stretch}
.figwall .figure{display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);overflow:hidden}
.figwall .figure img{width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;
  border:0;border-radius:0;box-shadow:none;background:var(--color-bg-soft)}
.figwall .figure figcaption{flex:1 1 auto;display:flex;align-items:flex-start;
  margin:0;padding:12px 14px 14px;border-top:1px solid var(--color-border)}

/* ---------- 卡片 ---------- */
.card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  padding:26px;box-shadow:var(--shadow-card);
  transition:box-shadow var(--transition-base),transform var(--transition-base)}
.card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--color-text-muted);font-size:15px;margin-bottom:0}
.card__num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;
  background:var(--color-primary-light);color:var(--color-primary-dark);font-weight:800;margin-bottom:14px}
.card__meta{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.card__meta li{font-size:13px;font-weight:600;color:var(--color-primary-dark);
  background:var(--color-primary-light);border-radius:999px;padding:4px 10px}
.card__link{display:inline-block;margin-top:16px;font-weight:700;font-size:15px}
.card--accent{border-top:3px solid var(--color-accent)}

/* ---------- 产品图卡（首页 可代工产品线 / 产品目录 图文并茂） ---------- */
.prodcards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;margin:0;padding:0}
.prodcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);
  transition:box-shadow var(--transition-base),transform var(--transition-base)}
.prodcard:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.prodcard__media{position:relative;display:block;aspect-ratio:1/1;overflow:hidden;
  background:#fff;border-bottom:1px solid var(--color-border)}
.prodcard__media img{position:absolute;top:0;right:0;bottom:0;left:0;
  width:100%;height:100%;object-fit:contain;transition:transform var(--transition-base)}
.prodcard:hover .prodcard__media img{transform:scale(1.03)}
.prodcard__body{display:flex;flex-direction:column;flex:1;padding:16px 18px 18px}
.prodcard__body h3{margin-bottom:8px;font-size:18px}
.prodcard__body p{color:var(--color-text-muted);font-size:14px;line-height:1.7}
.prodcard__body .card__meta{margin-top:12px}
.prodcard__body .card__link{margin-top:auto;padding-top:14px}
.prodcards__note{margin-top:18px;font-size:13px;line-height:1.8;color:var(--color-text-muted)}
/* 无图品类预留位：虚线占位区（本批 11 个品类均有实拍图，样式为后续新增无图品类备用） */
.prodcard--ph .prodcard__media{background:var(--color-bg-soft);border-bottom:1px dashed var(--color-border)}
.prodcard__ph{max-width:230px;font-size:13px;font-weight:600;line-height:1.7;
  color:var(--color-text-muted);text-align:center}
@media (max-width:900px){.prodcards{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.prodcards{grid-template-columns:1fr}}

/* ---------- 参数与表格 ---------- */
.spec{width:100%;border-collapse:collapse;background:#fff;font-size:15px;
  border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}
.spec caption{text-align:left;font-weight:700;padding:0 0 10px;color:var(--color-text-muted);font-size:var(--fs-small)}
.spec th,.spec td{padding:12px 16px;border-bottom:1px solid var(--color-border);text-align:left;vertical-align:top}
.spec thead th{background:var(--color-primary);color:#fff;font-weight:700}
.spec tbody tr:nth-child(even){background:var(--color-bg-soft)}
.spec tbody tr:last-child th,.spec tbody tr:last-child td{border-bottom:0}
.spec th[scope="row"]{font-weight:600;width:210px;color:var(--color-primary-dark)}

/* ---------- 后台发布的规格表 ----------
   站点后台按「键 = 值」逐行生成 <table class="sf-params">，结构为 tbody > tr > th + td，
   没有 caption 与 thead；这里让它与手写 .spec 表格外观一致。 */
.sf-params{width:100%;border-collapse:collapse;background:#fff;font-size:15px;
  border:1px solid var(--color-border);border-radius:var(--radius-card);overflow:hidden}
.sf-params th,.sf-params td{padding:12px 16px;border-bottom:1px solid var(--color-border);
  text-align:left;vertical-align:top}
.sf-params tbody tr:nth-child(even){background:var(--color-bg-soft)}
.sf-params tbody tr:last-child th,.sf-params tbody tr:last-child td{border-bottom:0}
.sf-params th{font-weight:600;width:210px;color:var(--color-primary-dark)}
.table-wrap .sf-params{min-width:620px}

/* ---------- 徽标条 ---------- */
.badges{display:flex;flex-wrap:wrap;gap:14px;margin:0;padding:0;list-style:none}
.badges li{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:10px 16px;font-size:var(--fs-small);font-weight:700}
.badges svg{flex:0 0 auto;color:var(--color-success)}
.section--primary .badges li{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.section--primary .badges svg{color:#8FD3BE}

/* ---------- 步骤 ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.step{background:#fff;border:1px solid var(--color-border);border-left:3px solid var(--color-accent);
  border-radius:var(--radius-card);padding:22px}
.step__no{font-size:13px;font-weight:800;color:var(--color-accent);letter-spacing:.08em}
.step h3{font-size:17px;margin:8px 0 8px}
.step p{font-size:15px;color:var(--color-text-muted);margin:0}

/* ---------- 创始人/工厂 ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.quote{margin:0;background:#fff;border-left:4px solid var(--color-primary);border-radius:var(--radius-card);
  padding:24px 26px;box-shadow:var(--shadow-card)}
.quote p{font-size:17px;color:var(--color-text)}
.quote footer{font-size:var(--fs-small);color:var(--color-text-muted);font-weight:600}
/* 信件署名：创始人手写签名 + 姓名职务。
   签名图是创始人手写签名的实拍照片处理而来（转正方向、抠掉纸底、统一墨色、按笔画加粗以避免缩小后发灰），
   不是字体生成的图版字。换签名时用同名文件覆盖 /images/signature-yang-junxiong.png，
   并同步更新 HTML 里 <img> 的 width/height（当前 793×463）。 */
.signature{margin-top:22px;padding-top:18px;border-top:1px solid var(--color-border);
  display:flex;flex-direction:column;align-items:flex-start}
.signature__img{height:clamp(52px,4.2vw,66px);width:auto;display:block;margin:0 0 14px}
.signature__name{font-size:15px;font-weight:700;color:var(--color-text);line-height:1.5}
.signature__role{font-size:var(--fs-small);font-weight:400;color:var(--color-text-muted);line-height:1.7}
.fact-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:24px 0 0;padding:0;list-style:none}
.fact-list li{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);padding:16px}
.fact-list strong{display:block;font-size:24px;color:var(--color-primary);line-height:1.2}
.fact-list span{font-size:var(--fs-small);color:var(--color-text-muted)}

/* ---------- FAQ ---------- */
.faq{border:1px solid var(--color-border);border-radius:var(--radius-card);background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--color-border)}
.faq details:last-child{border-bottom:0}
.faq summary{cursor:pointer;padding:18px 22px;font-weight:700;font-size:16px;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:16px;font-size:20px;color:var(--color-primary)}
.faq details[open] summary::after{content:"−"}
.faq .faq__body{padding:0 22px 20px;color:var(--color-text-muted);font-size:15px}
/* 分类页把问句做成 h3 以承载自然语言问题（GEO/AEO）：视觉上仍与 summary 一致 */
.faq__q{font-size:16px;font-weight:700;line-height:1.5;margin:0;color:var(--color-text)}
.faq summary{display:block;padding-right:56px}
.faq summary .faq__q{display:inline}


/* ---------- 表单 ---------- */
.form{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  padding:28px;box-shadow:var(--shadow-card)}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{margin-bottom:18px}
.field label{display:block;font-weight:600;font-size:var(--fs-small);margin-bottom:6px}
.field .req{color:var(--color-danger)}
.field input,.field select,.field textarea{width:100%;padding:11px 14px;font-family:inherit;font-size:15px;
  color:var(--color-text);background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-btn)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--color-primary);outline:none;
  box-shadow:0 0 0 3px var(--color-primary-light)}
.field textarea{min-height:96px;resize:vertical}
.field__hint{display:block;margin-top:6px;font-size:13px;color:var(--color-text-muted)}
.form__note{font-size:13px;color:var(--color-text-muted);margin:14px 0 0}
.form__error{color:var(--color-danger);font-size:13px;margin:8px 0 0;display:none}
.form__error.is-on{display:block}
.form__ok{display:none;background:var(--color-primary-light);border:1px solid var(--color-primary);
  color:var(--color-primary-dark);border-radius:var(--radius-card);padding:14px 18px;font-weight:600;margin:0 0 18px}
.form__ok.is-on{display:block}
.form__error[hidden],.form__ok[hidden]{display:none}
.form__error.is-on[hidden],.form__ok.is-on[hidden]{display:block}
.field input.is-invalid,.field select.is-invalid,.field textarea.is-invalid{border-color:var(--color-danger);
  box-shadow:0 0 0 3px rgba(183,65,60,.12)}
.field--check{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}
.field--check input{width:auto;margin-top:4px}
.field--check label{font-weight:400;font-size:14px;color:var(--color-text-muted);margin:0;line-height:1.6}
.form__row+.field--check{margin-top:0}
.contact-list{margin:0;padding:0;list-style:none}
.contact-list li{padding:14px 0;border-bottom:1px dashed var(--color-border)}
.contact-list li:last-child{border-bottom:0}
.contact-list strong{display:block;font-size:var(--fs-small);color:var(--color-text-muted);font-weight:600}
.contact-list a,.contact-list span{font-size:17px;font-weight:600;color:var(--color-text)}
.qr{width:132px;height:132px;border:1px dashed var(--color-border);border-radius:var(--radius-card);
  display:grid;place-items:center;text-align:center;font-size:12px;color:var(--color-text-muted);padding:8px}

/* ---------- 面包屑 ---------- */
.breadcrumb{background:var(--color-bg-soft);border-bottom:1px solid var(--color-border);font-size:var(--fs-small)}
.breadcrumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px 0;list-style:none}
.breadcrumb li::after{content:"/";margin-left:8px;color:var(--color-text-muted)}
.breadcrumb li:last-child::after{content:""}
.breadcrumb a{color:var(--color-text-muted)}

/* ---------- 页尾 ---------- */
.footer{background:var(--color-primary-dark);color:#CFE0DC;padding:64px 0 24px;font-size:15px}
.footer a{color:#fff}
.footer h3{color:#fff;font-size:16px;margin-bottom:14px}
/* 品牌位：橙色图形字标 logo-wordmark.png（2026 第二次修订按客户要求恢复原样：
   仅字标一张图、下方不排公司名小字；页脚除该字标外仍禁放其他任意 <img>，
   check-site.js 门禁保留） */
.footer .footer__brand{margin:0 0 18px;line-height:0}
/* 页脚字标点击回首页：<a> 收紧为 inline-block，避免行内盒比 240px 字标更宽、
   在字标右侧留下不可见的多余点击区；键盘焦点环也只圈住字标本体 */
.footer .footer__brand a{display:inline-block;line-height:0}
.footer .footer__brand img{display:block;width:100%;max-width:240px;height:auto}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px}
.footer__list{margin:0;padding:0;list-style:none}
.footer__list li{margin-bottom:8px}
.footer__bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:40px;padding-top:20px;
  display:flex;flex-wrap:wrap;gap:8px 24px;align-items:baseline;font-size:13px;
  justify-content:flex-end}
/* 版权独占一行靠左，ICP 与公安备案号在下一行靠右并排 */
.footer__bottom > span:first-child{flex:1 1 100%;text-align:left}
/* ≤900px：备案号两行放不下时统一左对齐，避免右侧留出参差空白 */
@media (max-width:900px){
  .footer__bottom{justify-content:flex-start}
  .footer__bottom > span{text-align:left}
}

/* ---------- 合规声明带（正文内全幅展示）----------
   首页在创始人版块下方以全幅方式展示；作为 .detail 的兄弟节点放在 .container 里，
   占满内容宽。 */
.policyband{margin-top:56px;background:var(--color-bg-soft);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:36px 40px 32px}
.policyband__head{margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid var(--color-border)}
.policyband__head h3{margin:0;font-size:20px}
.policyband__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 40px;
  margin:0;padding:0;list-style:none;font-size:14px;line-height:1.7;color:var(--color-text-muted)}
.policyband__list li{position:relative;padding-left:16px;margin:0}
.policyband__list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--color-accent)}
.policyband__list strong{display:block;color:var(--color-text);font-weight:700;font-size:15px;margin-bottom:4px}
.policyband__note{margin:26px 0 0;padding-top:20px;border-top:1px solid var(--color-border);
  font-size:14px;color:var(--color-text-muted)}
@media (max-width:900px){
  .policyband{margin-top:44px;padding:28px 26px 24px}
  .policyband__list{grid-template-columns:1fr 1fr;gap:18px 28px}
}
@media (max-width:640px){
  .policyband{margin-top:36px;padding:24px 20px 22px}
  .policyband__list{grid-template-columns:1fr;gap:16px}
  .policyband__note{margin-top:20px;padding-top:16px}
}

/* ---------- 移动悬浮条 ---------- */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:repeat(3,1fr);background:#fff;border-top:1px solid var(--color-border);
  box-shadow:0 -4px 16px rgba(15,95,83,.1)}
.mobilebar a{padding:12px 6px;text-align:center;font-size:14px;font-weight:700;color:var(--color-primary);
  border-right:1px solid var(--color-border)}
.mobilebar a:last-child{border-right:0}

/* ---------- 工具类 ---------- */
.muted{color:var(--color-text-muted)}
.center{text-align:center}
.mt-0{margin-top:0}
.mb-0{margin-bottom:0}
.mt-32{margin-top:32px}
.mt-40{margin-top:40px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fade{opacity:0;transform:translateY(14px);transition:opacity 400ms ease,transform 400ms ease}
.fade.is-in{opacity:1;transform:none}
/* 脚本不可用时（或用户设置减少动效）内容必须完整可见 */
@media (scripting:none){
  .fade{opacity:1;transform:none}
}

/* ---------- 响应式 ---------- */
@media (max-width:1199px){
  :root{--fs-h1:34px;--fs-h2:26px;--space-section:64px}
  .hero__inner{padding:72px 0 60px;min-height:0}
  .hero h1{font-size:44px;max-width:20em}
  .hero__copy{max-width:none}
  .capband__stats{grid-template-columns:repeat(2,1fr);gap:28px 0}
  .capband__stats li{padding:0 26px;margin-bottom:0}
  .capband__stats li:nth-child(odd){border-left:0;padding-left:0}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .grid-3,.steps{grid-template-columns:1fr 1fr}
  .split{grid-template-columns:1fr;gap:28px}
}
/* 首屏徽标条 6 项：与紧随其后的 .capband__stats 同步在 ≤1100px 落成 2×3，
   两带视觉节奏一致；3 列在 1000px 一带会把完整证书编号挤成 4 行。 */
@media (max-width:1100px){
  .hero__certs{grid-template-columns:1fr 1fr}
  .hero__certs li{padding:20px 22px}
  .hero__certs li:nth-child(-n+3){margin-top:22px}
  .hero__certs li:nth-child(-n+2){margin-top:0}
  .hero__certs li:nth-child(3n+1){border-left:1px solid rgba(255,255,255,.14);padding-left:22px}
  .hero__certs li:nth-child(odd){border-left:0;padding-left:0}
}
/* 平板段（768–1199px）也用汉堡抽屉：实测该段内联导航一行放不下——brand 159 + nav 666
   + CTA 325 + 间距 ≈ 1182px，而抽屉原本只在 ≤767px 生效，于是 768/900/1024 三个宽度
   整页 scrollWidth 恒为 1182，真实横向可滚动 414/282/158 px（iPad 竖屏 768px 直接中招）。
   把抽屉整体上移到 ≤1199px（= 方案文档里的平板档上界），头部保持 69px 单行，
   9 个导航链接与 CTA 全部可达。≤767px 特有的 .header__cta{display:none} 与
   .mobilebar 仍只在手机档生效。 */
@media (max-width:1199px){
  .nav-toggle{display:block;margin-left:auto}
  /* 注意：这里必须用 position:absolute + top:100%，不能沿用 position:fixed + bottom:0。
     .header 带 backdrop-filter，会自己成为后代 position:fixed 元素的包含块——于是 `bottom:0`
     不是相对视口，而是相对 69px 高的 header 解析，抽屉被压成一条 53px 的滚动带
     （实测：nav 高 53、clientHeight 52、scrollHeight 565，9 个链接一个都露不出来，
     必须在这个 52px 条里滚动才能点到——手机档原本就是这个状态，属于历史缺陷）。
     改用 absolute + top:100%（贴着 header 下沿）+ max-height 限高，抽屉恢复完整高度，
     内容超出时仍可内部滚动。 */
  .nav{position:absolute;top:100%;left:0;right:0;bottom:auto;margin:0;
    max-height:calc(100vh - var(--header-h) - 1px);
    background:#fff;border-top:1px solid var(--color-border);overflow-y:auto;
    transform:translateX(-100%);transition:transform var(--transition-base);padding:12px 18px 40px}
  .nav.is-open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__link{padding:14px 4px;border-bottom:1px solid var(--color-border);font-size:16px}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;
    border:0;border-bottom:1px solid var(--color-border);padding:0 0 8px;display:none}
  .nav__item.is-open>.nav__sub{display:block}
  .nav__sub a{padding:10px 12px;color:var(--color-text-muted)}
  .has-sub>.nav__link::after{content:" ▾";color:var(--color-primary)}
  .nav__item.is-open.has-sub>.nav__link::after{content:" ▴"}
}
@media (max-width:767px){
  :root{--fs-h1:28px;--fs-h2:23px;--fs-h3:19px;--space-section:52px;--space-block:24px}
  body{padding-bottom:56px}
  .container{padding:0 18px}
  .brand{gap:8px}
  .brand__img{height:32px}
  .grid-2,.grid-3,.grid-4,.steps,.fact-list,.form__row{grid-template-columns:1fr}
  .hero{background:#101413}
  .hero::before{background:
    linear-gradient(180deg,rgba(10,16,15,.78) 0%,rgba(10,16,15,.60) 28%,rgba(10,16,15,.50) 52%,rgba(10,16,15,.44) 100%),
    url("/images/factory-floor.jpg") 68% center/cover no-repeat}
  .hero__inner{padding:44px 0 40px;min-height:0}
  .hero h1{font-size:30px;line-height:1.2}
  .hero__lead{font-size:16px}
  .hero__cta .btn{padding:13px 20px;font-size:15px}
  .hero__certs{grid-template-columns:1fr}
  .hero__certs li,.hero__certs li:first-child,
  .hero__certs li:nth-child(-n+2),.hero__certs li:nth-child(-n+3){padding:15px 0;border-left:0;
    border-top:1px solid rgba(255,255,255,.14);margin-top:0}
  .hero__certs li:first-child{border-top:0}
  .hero__cert-img{width:44px;height:44px}
  .capband__stats{grid-template-columns:1fr;gap:0;padding:32px 0 28px}
  .capband__stats li,.capband__stats li:nth-child(odd),.capband__stats li:nth-child(3n+1){
    padding:18px 0;border-left:0;border-top:1px solid var(--color-border);margin-bottom:0}
  .capband__stats li:first-child{border-top:0;padding-top:0}
  .capband__stats strong{font-size:30px}
  .capband__cats{gap:12px;padding:18px 0 22px}
  .capband__cats-label{width:100%}
  .btn{width:100%}
  .btn-row{gap:10px}
  .spec th[scope="row"]{width:auto}
  .spec th,.spec td{padding:10px 12px;font-size:14px}
  .footer__grid{grid-template-columns:1fr}
  .mobilebar{display:grid}
  /* 汉堡抽屉的规则已上移到 ≤1199px（见上），此处只保留手机档特有项 */
  .header__cta{display:none}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  .fade{opacity:1;transform:none}
}

/* ============================================================
   内页组件（pagehead / prose / 列表 / 步骤 / 案例 / 文章）
   ============================================================ */
.pagehead{background:var(--color-primary-light);border-bottom:1px solid var(--color-border);padding:52px 0 44px}
.pagehead h1{font-size:36px;margin-bottom:14px;color:var(--color-primary-dark)}
.pagehead__lead{max-width:760px;font-size:17px;color:var(--color-text-muted);margin:0}
.pagehead__facts{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:0;list-style:none}
.pagehead__facts li{background:#fff;border:1px solid var(--color-border);border-radius:999px;
  padding:5px 14px;font-size:13px;font-weight:700;color:var(--color-primary-dark)}

/* ---------- 内页顶图 Banner（OEM/ODM 栏目 1 个总览 + 9 个子页） ----------
   层次：照片(.pagehead__bg, z0) → 蒙版(.pagehead__scrim, z1) → 文字(.container, z2)。
   照片只作为背景层，文字永远绘制在其上方，因此不可能被图片遮挡；
   蒙版仅用于压低照片亮度，保证白字对比度达标（深色左强右弱，保留右侧实景细节）。

   2026 放宽（与首页首屏同一思路）：原横向 .93/.86/.58/.24 + 纵向 .62/.10 使照片可见度
   仅 27%，而 H1 实测 7.14:1（要求 3:1，余量 1.88×）——蒙版明显压过头。现改为
   横向 .54/.42/.22/.05 + 纵向 .50/.06，照片可见度 27% → 60%，同时把白字/浅色字的
   描边从「单层柔光」升级为「实心近黑双层 halo」，并用 #FFC4D2 替代 #F2A0B4（浅粉对
   白底永远达不到 4.5:1，必须靠 halo 而非蒙版承载）。

   ⚠ 2026 复核更正：此前记录的「H1 7.08 / lead 5.82」是在 background-color #101413 上
   算出来的——蒙版实为 linear-gradient（background-image），DOM 取色取不到，于是漏掉了
   照片本身，属于乐观误判。改用「隐藏文字层截图 + 与显示文字层截图逐像素求差」定位真实
   字形像素，再对同一坐标的照片+蒙版合成色求对比度，实测：
     H1 2.31/3（失败）、lead 2.58/4.5（失败）、eyebrow 4.68/4.5、facts 10.58/4.5。
   原因是横向梯度在 64% 处已开始衰减，而 H1（max-width:900px）的字形一直排到横幅宽度
   的约 76%，正好落在衰减段。
   修正思路（保留 2026 的「让照片露出来」观感）：把「左侧均匀压暗」改成「文字列压暗、
   右侧留给照片」——0→80% 维持 .72，之后才衰减到 100% 的 .06。于是文字所覆盖的区间
   始终足够暗，而横幅最右侧 20%（无文字）反而比原方案更亮。
   实测（1280px，同一逐像素法）：H1 8.74/3、lead 6.71/4.5、eyebrow 5.59/4.5、facts 13.79/4.5。

   ⚠ 蒙版断点是「横幅宽度百分比」，而文字占横幅的宽度比例随视口变化，因此存在第三条
   风险轴（此前只按 1280px 与 390px 两点测过，漏掉了中间段）。实测各视口 h1 右缘占横幅：
     1280px → 75.3%   1440px → 72.5%   1100px → 84.0%
     1024px → 90.2%    900px → 97.3%    768px → 96.9%
   即桌面「右端留浅」只有在 ≥1200px 才成立（那时文字止于 75%，右侧确有约 25% 无字区）。
   768–1199px 文字几乎铺满整宽，右端一变浅就落进文字里：沿用桌面渐变时 768px 实测
   lead 3.50（要求 4.5，FAIL）、h1 3.10（1.03×，几乎无余量）；1024px h1 5.55。
   故 768–1023px 单独用平铺蒙版（见文件末尾 @media (max-width:1023px)），
   ≥1024px 才使用本条的「左深右浅」渐变。 */
.pagehead--banner{
  /* 亮度目标（运营 2026-10 要求「子页顶部图片亮度调到 65%」）：
     实测口径 = 合成后亮度 ÷ 原照片亮度（逐像素、sRGB 空间同底同量）。
     做法：先用 --ph-lift 把照片本身提亮，再用 --ph-veil 全幅轻纱 + 文字局部底板
     把这 65% 锁死；没有文字的照片区域（桌面右侧、上下留白）保持提亮后的亮度。
     实测（同一逐像素法，1280×392 与各断点）：桌面 64.9%、1024px 65.2%、平板 65.2%/65.1%、手机 65.3%。
     ⚠ 2026-10 定标记录：改前旧「左深右浅」渐变方案实测整体仅 42.9%、文字区 50.7%——
       这正是运营看到的「太黑暗」。因此 65% 是**提亮**方向，不是继续压暗。
     ⚠ 三条轴必须联动，单独动一个都会翻车：
       ① 只加 veil 不提 lift → 照片发灰发闷（raw 均值仅 115.5，压 35% 就死黑）；
       ② 只加 lift 不加 veil → 亮度冲到 80% 以上，眼眉粉 #FFC4D2 对比度跌到 3.2（FAIL）；
       ③ 底板 α 过大（如 0.70）→ 文字框内变成黑砖，照片在 65~87% 面积上被压死。
     终解：lift 拉高 + 底板变薄（.315）+ veil 加深（.50）+ 眼眉单独加深底板 → 三者同时成立。 */
  --ph-veil:.53;        /* 全幅纱：与 lift 配对把整体锁定在 65%（2026-10 定标 .50→.53） */
  --ph-lift:1.31;       /* 照片提亮：补偿 veil，并让文字框外的照片真正"亮"起来（1.40→1.31） */
  --ph-pool:.315;       /* 正文局部底板 α（原 .70 的 45%）：文字框内照片也可见 */
  --ph-pool-eyebrow:.63;/* 眼眉粉字亮度低，单独用更深底板换取 4.5:1 */
  position:relative;overflow:hidden;isolation:isolate;
  background:#101413;border-bottom:0;padding:64px 0 58px;
  display:flex;align-items:center;min-height:min(31vw,460px)}
.pagehead__bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 50%;display:block;
  filter:brightness(var(--ph-lift)) saturate(1.02)}
.pagehead__scrim{position:absolute;inset:0;z-index:1;background:rgba(10,16,15,var(--ph-veil))}
.pagehead--banner .container{position:relative;z-index:2;width:100%}
/* 文字局部软底板（2026-10 运营要求「子页顶部图片亮度调到 65%」的核心实现）：
   深色底板不再铺满整幅，而是逐个贴在「文字自身的外框」上并向外羽化。
   于是照片在文字框之外的区域（桌面端右侧、上下留白）保持原始亮度，
   只有真正承载笔画的像素被压深——亮度与可读性不再互相牺牲。
   实测（1280×392 逐像素）：照片可见度 65.0%，h1 6.64 / lead 6.31 / eyebrow 6.30，
   均高于 AA 门槛（h1 3.0、lead 4.5、eyebrow 4.5）。 */
.pagehead--banner .eyebrow,
.pagehead--banner h1,
.pagehead--banner .pagehead__lead,
.pagehead--banner .pagehead__facts{position:relative}
.pagehead--banner .eyebrow::before,
.pagehead--banner h1::before,
.pagehead--banner .pagehead__lead::before,
.pagehead--banner .pagehead__facts::before{
  content:'';position:absolute;z-index:-1;pointer-events:none;
  inset:-16px -20px;border-radius:22px;
  background:rgba(10,16,15,var(--ph-pool));filter:blur(18px)}
/* 眼眉是唯一「粉字」元素：#FFC4D2 的相对亮度远低于白字（0.60 vs 1.00），
   是四条对比度里最先触底的约束。给它单独用更深的底板（面积只占横幅约 4%，
   对整幅亮度影响可忽略），就不必牺牲品牌粉、也不必把整幅压暗。 */
.pagehead--banner .eyebrow::before{background:rgba(10,16,15,var(--ph-pool-eyebrow))}
.pagehead--banner .eyebrow{color:#FFC4D2;margin-bottom:14px;
  text-shadow:0 1px 3px rgba(6,20,18,.92),0 0 14px rgba(6,20,18,.78)}
.pagehead--banner h1{color:#fff;font-size:36px;margin-bottom:14px;max-width:900px;
  text-shadow:0 1px 3px rgba(6,20,18,.90),0 0 16px rgba(6,20,18,.76)}
.pagehead--banner .pagehead__lead{color:#DCE9E6;max-width:780px;
  text-shadow:0 1px 3px rgba(6,20,18,.92),0 0 16px rgba(6,20,18,.78)}
.pagehead--banner .pagehead__facts li{background:rgba(10,16,15,.5);
  border:1px solid rgba(255,255,255,.34);color:#fff;text-shadow:0 1px 8px rgba(10,16,15,.6)}

.crumb{background:var(--color-bg-soft);border-bottom:1px solid var(--color-border);font-size:var(--fs-small)}
.crumb ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:12px 0;list-style:none}
.crumb li::after{content:"/";margin-left:8px;color:var(--color-text-muted)}
.crumb li:last-child::after{content:""}
.crumb a{color:var(--color-text-muted)}
.crumb [aria-current="page"]{color:var(--color-text)}

/* 文章正文 */
.prose{max-width:760px}
.prose h2{font-size:26px;margin:40px 0 16px}
.prose h3{font-size:20px;margin:30px 0 12px}
.prose p,.prose li{font-size:16.5px;color:var(--color-text)}
.prose ul,.prose ol{padding-left:22px}
.prose li{margin-bottom:8px}
.prose table{margin:20px 0}
/* 全宽正文（OEM/ODM、解决方案、知识中心三栏目）：去掉左侧「本页目录」后的版式。
   不铺满 1200px 容器——一行超过约 90 个汉字后阅读回扫困难，且过宽的行会削弱
   「一屏一义」的结构感。取 1040px：比原来的 760px 宽约 37%，既有地方排双列表格，
   又保持可读行宽。居中由 .container 的 margin:auto 负责。 */
.prose--wide{max-width:1040px}
/* 两列成对表（要点 / 说明、步骤 / 说明）：左列是短标签，不该像 .spec 默认的 210px
   那样把「面料与吸收结构确认：」这类标签挤到折行。给 30% 并保底 190px。 */
.prose--wide .spec--pair th[scope="row"]{width:30%;min-width:190px}
.prose blockquote{margin:24px 0;padding:18px 22px;background:var(--color-bg-soft);
  border-left:4px solid var(--color-primary);border-radius:var(--radius-card)}
.prose blockquote p:last-child{margin-bottom:0}
.article-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--fs-small);
  color:var(--color-text-muted);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--color-border)}
.article-meta strong{color:var(--color-text)}

/* 要点盒 */
.note{background:var(--color-primary-light);border:1px solid #C9DED9;border-left:4px solid var(--color-primary);
  border-radius:var(--radius-card);padding:20px 24px;margin:24px 0}
.note h2,.note h3{margin:0 0 10px;font-size:17px}
.note ul{margin-bottom:0}
.note--warn{background:#FBF3EA;border-color:#EBD3BB;border-left-color:var(--color-warning)}
.note--accent{background:var(--color-accent-soft);border-color:#F3D3DB;border-left-color:var(--color-accent)}

/* 图文并排的详情布局 */
.detail{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:start}
.detail>*{min-width:0}
.detail--rev>.detail__media{order:-1}

/* 参数卡组 */
.kv{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:0;padding:0;list-style:none}
.kv li{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);padding:14px 18px}
.kv strong{display:block;font-size:20px;color:var(--color-primary);line-height:1.3}
.kv span{font-size:13px;color:var(--color-text-muted)}

/* 列表卡片（产品/文章共用） */
.listcard{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0;padding:0;list-style:none}
.listcard--3{grid-template-columns:repeat(3,1fr)}
.listcard>li{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  padding:24px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;
  transition:box-shadow var(--transition-base),transform var(--transition-base)}
.listcard>li:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.listcard h3{font-size:19px;margin-bottom:10px}
.listcard p{color:var(--color-text-muted);font-size:15px;margin-bottom:14px}
.listcard .card__link{margin-top:auto}

/* 流程时序 */
.flow{counter-reset:flow;margin:0;padding:0;list-style:none}
.flow>li{position:relative;padding:0 0 26px 54px;border-left:2px solid var(--color-border);margin-left:18px}
.flow>li:last-child{border-left-color:transparent;padding-bottom:0}
.flow>li::before{counter-increment:flow;content:counter(flow);position:absolute;left:-19px;top:0;
  width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:15px}
.flow h3{font-size:18px;margin:4px 0 8px}
.flow p{color:var(--color-text-muted);font-size:15px;margin:0}
.flow__time{display:inline-block;font-size:13px;font-weight:700;color:var(--color-accent);
  background:var(--color-accent-soft);border-radius:999px;padding:3px 10px;margin-left:8px}

/* 表格横向滚动容器（宽表在窄屏不破版） */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap .spec{min-width:620px}

/* 时间轴（公司里程碑 / 创始人履历） */
.timeline{position:relative;margin:0;padding:0 0 0 26px;list-style:none;border-left:2px solid var(--color-border)}
.timeline>li{position:relative;padding:0 0 30px}
.timeline>li:last-child{padding-bottom:0}
.timeline>li::before{content:"";position:absolute;left:-33px;top:6px;width:12px;height:12px;
  border-radius:50%;background:var(--color-primary);border:2px solid #fff;box-shadow:0 0 0 2px var(--color-primary-light)}
.timeline h3{font-size:18px;margin:0 0 6px;color:var(--color-primary-dark)}
.timeline p{margin:0;color:var(--color-text-muted);font-size:15px}

/* 勾选清单 */
.list-check{margin:0;padding:0;list-style:none}
.list-check li{position:relative;padding:0 0 14px 30px;font-size:15px;color:var(--color-text-muted)}
.list-check li:last-child{padding-bottom:0}
.list-check li::before{content:"✓";position:absolute;left:0;top:0;color:var(--color-primary);font-weight:800}
.list-check strong{color:var(--color-text)}

/* 署名行 */
.author-line{font-size:var(--fs-small);font-weight:600;color:var(--color-text-muted)}

/* 案例 */
.case-hero{background:var(--color-primary-light);border:1px solid var(--color-border);
  border-radius:var(--radius-card);padding:26px;margin-bottom:32px}
.case-hero dl{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin:0}
.case-hero dt{font-size:13px;color:var(--color-text-muted);font-weight:600}
.case-hero dd{margin:6px 0 0;font-size:18px;font-weight:800;color:var(--color-primary-dark)}

/* 信任徽标小卡 */
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.trust li{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);padding:22px}
.trust h3{font-size:17px;margin-bottom:8px}
.trust p{font-size:15px;color:var(--color-text-muted);margin:0}

/* CTA 带 */
.cta-band{background:var(--color-primary);color:#fff;border-radius:var(--radius-card);
  padding:40px 44px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.cta-band h2{color:#fff;margin-bottom:8px;font-size:26px}
.cta-band p{color:#CFE0DC;margin:0;max-width:620px}

/* 图文/表单分栏（联系我们等） */
.split{align-items:start}
.split>div>h2:first-child,.split>aside>h2:first-child{margin-top:0}
.split>aside{background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-card);padding:28px 26px}
.split>aside h3{font-size:17px}
.split>aside .kv{grid-template-columns:1fr}

/* 列表元信息行 */
.meta-line{font-size:13px;color:var(--color-text-muted);margin:8px 0 0}

/* 证书下载区（缩略图 + 下载按钮） */
.dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:0;padding:0;list-style:none}
.dl-grid>li{display:flex;flex-direction:column;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);overflow:hidden;transition:box-shadow .2s,transform .2s}
.dl-grid>li:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.dl-grid__thumb{display:block;background:var(--color-bg-soft);border-bottom:1px solid var(--color-border);
  padding:14px;text-align:center}
.dl-grid__thumb img{width:100%;max-width:210px;height:auto;border:1px solid var(--color-border);
  border-radius:6px;background:#fff;display:inline-block}
.dl-grid__body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.dl-grid__body h3{font-size:17px;margin-bottom:8px}
.dl-grid__body p{font-size:14px;color:var(--color-text-muted);margin:0 0 12px}
.dl-grid__meta{font-size:12px;color:var(--color-text-muted);margin:0 0 16px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;word-break:break-all}
.dl-grid__size{font-family:inherit;opacity:.75}
/* B 端视角说明：这份认证帮客户解决什么问题（放在 desc 之后、按钮之前）。
   选择器需带 .dl-grid__body 前缀以胜过 .dl-grid__body p（0,1,1）。 */
.dl-grid__body p.dl-grid__buyer{font-size:14px;line-height:1.68;color:var(--color-text);
  background:var(--color-primary-light);border-left:3px solid var(--color-primary);
  border-radius:0 6px 6px 0;padding:12px 14px;margin:0 0 16px}
.dl-grid__body p.dl-grid__buyer strong{color:var(--color-primary-dark)}
.dl-grid__body .btn{margin-top:auto;align-self:flex-start}
.dl-note{font-size:13px;color:var(--color-text-muted);margin:18px 0 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============================================================
   深度博文固定模版（排版参照 shuofalaw.com/insights 的单篇实务文章）
   模版结构：art-hero（面包屑 + eyebrow + H1 + 作者/时长 + 客户常问首段块）
             → art-cover（封面插图位）→ art-body--wide（全宽正文，不再有左侧目录）
             → art-body（lead + sec-head/H2 + 表格 + 插图位）→ FAQ
             → cta-band → cat-back（所属分类）→ related-section（延伸阅读）
   全站 20 篇博文共用同一套类名，任何一篇都不单独写样式，保证「镜像到每一页」。
   ============================================================ */
/* 顶栏 sticky，锚点跳转必须留出头部高度，否则标题会被压在栏下 */
.art-body h2[id],.art-body h3[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

.art-hero{background:var(--color-primary-light);border-bottom:1px solid var(--color-border);padding:34px 0 38px}
.art-hero__inner{max-width:900px}
.art-hero .crumb{background:none;border:0;margin-bottom:16px}
.art-hero .crumb ol{padding:0;font-size:13px}
.art-hero .eyebrow{margin-bottom:14px}
.art-hero h1{font-size:34px;line-height:1.28;margin-bottom:18px;max-width:860px}
.art-hero__lead{font-size:17px;color:var(--color-text-muted);max-width:800px;margin:0}

/* 作者 / 时长元信息行 */
.art-meta-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  margin:20px 0 0;font-size:var(--fs-small);color:var(--color-text-muted)}
.art-author{display:flex;align-items:center;gap:10px}
.art-author__avatar{width:38px;height:38px;border-radius:50%;background:var(--color-primary);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex:none}
.art-author__name{font-weight:700;color:var(--color-text);display:block;line-height:1.35}
.art-author__role{font-size:12.5px;color:var(--color-text-muted);display:block;line-height:1.35}
.art-meta-row__dot{color:var(--color-border)}

/* 发表日期：与作者、时长并列的第三个元信息。
   用 <time datetime> 承载 ISO 串给机器读（Article.datePublished 同源），
   中文日期给人读。日期单独给一个浅底胶囊，让「什么时候发的」比另两项更容易被扫到——
   读者判断一篇技术文章是否过时，第一眼看的就是这个。 */
.art-date{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;
  background:var(--color-primary-light);color:var(--color-primary);font-weight:700;font-size:13px}
.art-date time{font-variant-numeric:tabular-nums}
/* 窄屏去掉分隔点：换行后点号会孤零零落在行首，且此时靠 gap 已足够区分 */
@media (max-width:767px){
  .art-meta-row__dot{display:none}
  .art-meta-row{gap:10px 12px}
}

/* 「客户常问 · 直接回答」：GEO/AEO 首段块，整块提到正文之前 */
.qa-summary{margin:26px 0 0;padding:22px 24px;background:#fff;
  border:1px solid var(--color-border);border-left:4px solid var(--color-accent);border-radius:var(--radius-card)}
.qa-summary__title{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-primary)}
.qa-summary__item+.qa-summary__item{margin-top:16px;padding-top:16px;border-top:1px solid var(--color-border)}
.qa-summary__q{margin:0 0 6px;font-weight:700;font-size:16px;color:var(--color-text)}
.qa-summary__a{margin:0;font-size:15.5px;color:var(--color-text-muted)}

/* 封面插图位 */
.art-top{padding:36px 0 0}
.art-cover{margin:0}
.art-cover figcaption{font-size:13px;color:var(--color-text-muted);margin-top:10px;text-align:center}
.art-cover .ph{border:1px solid var(--color-border);border-radius:var(--radius-card)}
/* 封面真实图（16:9 裁切，与结构化图位同位替换；alt 逐字出自 cluster-data.js IMGS 表） */
.art-cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  border:1px solid var(--color-border);border-radius:var(--radius-card);background:#fff;
  box-shadow:var(--shadow-card)}

/* 正文 + 左侧目录：桌面并排；≤1023px 目录变成正文上方的折叠块。
   ⚠ 2026-10-04 起全站已不再有任何页面输出 .detail-layout / .toc-sidebar 标记
   （解决方案 5 页 + OEM/ODM 7 页 + 知识中心 24 页均已改全宽）。
   规则保留不删：① 删除无收益，且会同时删掉下面对应的响应式分支；
   ② 万一以后要恢复「本页目录」，生成器只要重新渲染这段标记即可，不必重写样式。
   现状由 verify-*.js 断言（全站侧栏残留 = 0），不是靠「没人调用」来维持的。 */
.detail-layout{display:grid;grid-template-columns:236px minmax(0,1fr);gap:52px;align-items:start}
.toc-sidebar{position:sticky;top:calc(var(--header-h) + 20px);
  border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-bg-soft);padding:18px 20px}
.toc-sidebar__title{margin:0 0 12px;font-size:13px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--color-primary)}
.toc-sidebar__list{margin:0;padding:0;list-style:none;max-height:calc(100vh - 240px);overflow-y:auto}
.toc-sidebar__item{margin:0 0 2px}
.toc-sidebar__link{display:block;padding:6px 8px;border-radius:5px;font-size:14px;line-height:1.5;
  color:var(--color-text-muted);transition:background var(--transition-base),color var(--transition-base)}
.toc-sidebar__link:hover{background:#fff;color:var(--color-primary);text-decoration:none}
.toc-sidebar__link.is-active{background:#fff;color:var(--color-primary);font-weight:700;
  box-shadow:inset 3px 0 0 var(--color-accent)}

.art-body{max-width:760px;min-width:0}
/* 全宽正文（知识中心 24 页）：去掉左侧「本文目录」后不再需要 .detail-layout 双栏网格。
   与 .prose--wide 取同一栏宽（1040px）——两处正文现在视觉一致，互相跳转不会「一样的内容
   两种宽度」。不铺满 1200px 容器：一行超过约 90 个汉字后阅读回扫困难，也会削弱
   「一屏一义」的结构感。 */
.art-body--wide{max-width:1040px}
.art-body>.lead{font-size:18.5px;line-height:1.72;color:var(--color-text);
  padding-left:18px;border-left:3px solid var(--color-accent);margin:0 0 30px}
.art-body p,.art-body li{font-size:16.5px;line-height:1.85}
.art-body ul,.art-body ol{padding-left:22px}
.art-body li{margin-bottom:9px}
.art-body h2{font-size:26px;margin:46px 0 16px;padding-top:6px}
.art-body h3{font-size:19.5px;margin:30px 0 12px;color:var(--color-primary-dark)}
.art-body .art-cover{margin:28px 0}
.art-body .table-wrap{margin:24px 0}
/* 正文插图（主图之外的实拍/示意/数据图）：与 .figure 同一图注口径，限宽避免喧宾夺主 */
.art-body .figure--photo{margin:28px auto 30px;max-width:640px}
.art-body .figure--photo img{margin:0 auto;display:block}
@media (max-width:640px){.art-body .figure--photo{max-width:100%}}
.art-body .spec caption{font-size:14px}
/* 小节引导行（参照站 sec-head）：H2 上方的细标签 */
.sec-head{margin:46px 0 0}
.sec-head+.art-body h2,.sec-head+h2{margin-top:10px}
.sec-head__eyebrow{display:block;font-size:12.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-accent);margin-bottom:6px}

/* 所属分类回链 */
.cat-back{margin:0 0 0;padding:26px 0 0;border-top:1px solid var(--color-border)}
.cat-back__label{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-text-muted);margin:0 0 8px}
.cat-back__link{font-size:17px;font-weight:700}
.cat-back__n{font-size:var(--fs-small);color:var(--color-text-muted);margin:6px 0 0}

/* 延伸阅读 */
.related-section{padding:var(--space-section) 0 0}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:0;padding:0;list-style:none}
.related-grid>li{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  padding:20px 22px;transition:box-shadow var(--transition-base),transform var(--transition-base)}
.related-grid>li:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}
.related-grid h3{font-size:16.5px;margin-bottom:8px}
.related-grid p{font-size:14px;color:var(--color-text-muted);margin:0 0 10px}
.related-grid .meta-line{margin:0 0 10px}
/* 阅读进度条：随正文滚动，纯装饰，不承载信息（aria-hidden）。
   满宽 + scaleX 缩放（transform-origin 必须在左侧，否则由中心向两侧展开）。 */
.art-progress{position:fixed;top:0;left:0;height:3px;width:100%;
  background:var(--color-accent);z-index:80;transform:scaleX(0);transform-origin:0 50%;
  transition:transform 120ms linear;pointer-events:none}

@media (max-width:1199px){
  .detail-layout{grid-template-columns:200px minmax(0,1fr);gap:34px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  /* 目录在窄屏改为正文之前的普通块，取消 sticky 与限高 */
  .detail-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .toc-sidebar{position:static;max-height:none}
  .toc-sidebar__list{max-height:none;columns:2;column-gap:18px}
  .toc-sidebar__item{break-inside:avoid}
}
@media (max-width:767px){
  .art-hero{padding:24px 0 28px}
  .art-hero h1{font-size:25px}
  .art-hero__lead{font-size:16px}
  .qa-summary{padding:18px 18px}
  .art-top{padding:24px 0 0}
  .art-body>.lead{font-size:17px;padding-left:14px}
  .art-body h2{font-size:21px;margin:36px 0 14px}
  .art-body h3{font-size:18px}
  .art-body p,.art-body li{font-size:16px}
  .sec-head{margin:36px 0 0}
  .related-grid{grid-template-columns:1fr}
  .toc-sidebar__list{columns:1}
}

@media (max-width:1199px){
  .pagehead h1{font-size:30px}
  .trust,.listcard--3,.dl-grid{grid-template-columns:repeat(2,1fr)}
  .case-hero dl{grid-template-columns:repeat(2,1fr)}
  /* 首页两处 .grid-3--cards（试单三数、三个案例）的 H3 是「标签：短句」型标题，
     实测最长需求 311px；三列时内容区 <1143px（对应视口 ≈1191px）即折成两行。
     故 ≤1199px 收两列，用卡片宽度换标题单行。工厂照片墙 .figwall 无 H3，维持三列。
     子项用 minmax(0,1fr) 而非 1fr：避免子项 min-content 顶宽轨道（同 900px 断点处的教训）。 */
  .grid-3--cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .detail{grid-template-columns:1fr;gap:28px}
  .detail--rev>.detail__media{order:0}
  .listcard,.listcard--3,.trust,.dl-grid{grid-template-columns:1fr}
  /* 栅格子项默认 min-width:auto，其 min-content 会被 .table-wrap .spec{min-width:620px}
     撑到 620px，从而把 1fr 轨道一起顶宽——此时 .table-wrap 自身的 overflow-x:auto
     永远不会触发（包裹层自己就是 620px 宽）。实测 390px 视口下整页 scrollWidth 638、
     真实可横向滚动 248px（scrollLeft 可置到 248，非仅 scrollWidth>clientWidth）。
     min-width:0 让子项可以被压缩，宽表回到 .table-wrap 内部横向滚动。
     只加在 ≤900px：桌面段实测 .detail 轨道为 620px 时表格刚好放得下，
     若全局生效会把轨道压到 582px 并在表内多出一个 38px 的滚动条。 */
  .detail>*{min-width:0}
}
@media (max-width:1023px){
  /* 平板段（768–1023px）：文字块横向铺得更满（底板覆盖率由桌面 65.5% 升到 77.2%），
     深色总面积自然变大，因此 veil 要相应调薄，否则会低于 65%。
     底板 α 与桌面一致，保证同一张照片在两种屏宽下观感相同；
     眼眉仍用独立的深底板，粉字 #FFC4D2 不必为断点改色。 */
  .pagehead--banner{--ph-veil:.55;--ph-lift:1.44}
}
@media (max-width:767px){
  .pagehead{padding:34px 0 30px}
  .pagehead h1{font-size:25px}
  /* 手机段（≤767px）：文字几乎铺满整宽，底板覆盖率 87.2%，
     此时「再加深底板」是负优化——实测把底板 α 从 .70 提到 .84/.98，
     可见度反而从 52% 掉到 39%，因为深色压在 87% 的面积上。
     正确方向相反：底板变薄（.42）+ veil 更薄（.36）+ 提亮更高（1.48），
     并把省下来的对比度预算全部给眼眉（唯一粉字元素，单独 .94 底板）。
     底板在此收窄羽化（左右各 20px），照片在文字矩形之外仍是亮的。 */
  .pagehead--banner{padding:40px 0 36px;--ph-veil:.62;--ph-lift:1.81;
    --ph-pool:.42;--ph-pool-eyebrow:.94}
  .pagehead--banner h1{font-size:25px}
  .pagehead--banner .eyebrow::before,
  .pagehead--banner h1::before,
  .pagehead--banner .pagehead__lead::before,
  .pagehead--banner .pagehead__facts::before{inset:-12px -14px;border-radius:18px;filter:blur(14px)}
  .kv{grid-template-columns:1fr}
  .case-hero dl{grid-template-columns:1fr}
  .cta-band{padding:26px 20px}
  .prose h2{font-size:22px}
  .flow>li{padding-left:44px}
}

/* ============================================================
   解决方案栏目版式（运营《解决方案栏目深度重构》2026-10 落地）
   正文走 .prose--wide 全宽（原「左目录 + 右正文」双栏已按运营要求下线），节与节之间用交替底色分区；
   文案全部来自 tools/sol-data.js（Word 逐字转换），此处只做呈现。
   ============================================================ */
.sol-sec{padding:var(--space-section) 0;border-bottom:1px solid var(--color-border)}
.sol-sec:last-child{border-bottom:0}
.sol-sec--alt{background:var(--color-bg-soft)}
.sol-sec>h2{margin:0 0 22px;font-size:clamp(22px,2.4vw,29px);line-height:1.35;color:var(--color-primary-dark)}
.sol-sec>h3{margin:30px 0 12px;font-size:18px;color:var(--color-primary-dark)}
.sol-sec>p{margin:0 0 16px;font-size:16.5px;line-height:1.85;color:var(--color-text-muted)}
.sol-sec>p:last-child{margin-bottom:0}
/* 正文区取消 .prose 自带的首尾间距，改由 .sol-sec 控制节奏 */
.prose>.sol-sec:first-child{padding-top:0}
.prose>.sol-sec:last-child{padding-bottom:0}

/* 「第一是…第二是…」长段 → 编号卡片。
   注意：整段原文不拆散（拆成多个 <p> 会改变原文标点与从句关系＝改写），
   这里用 CSS 计数器给每个连续子串加编号锚点，文字保持完整段落。 */
.sol-points{counter-reset:solpt;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:18px;margin:6px 0 8px}
.sol-points__item{position:relative;background:#fff;border:1px solid var(--color-border);
  border-top:3px solid var(--color-accent);border-radius:var(--radius-card);padding:20px 22px 18px}
.sol-points__item::before{counter-increment:solpt;content:"0" counter(solpt);display:block;
  font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--color-accent);margin-bottom:8px}
.sol-points__item>p{margin:0;font-size:15.5px;line-height:1.8;color:var(--color-text-muted)}

/* 「第一步…第五步」流程：原文自带「第X步：」前缀，圆点只做装饰不另加数字 */
.sol-steps{counter-reset:solstep;margin:6px 0 8px;padding:0;list-style:none}
.sol-steps>li{position:relative;padding:0 0 22px 40px;border-left:2px solid var(--color-border);margin-left:14px}
.sol-steps>li:last-child{padding-bottom:0;border-left-color:transparent}
.sol-steps>li::before{counter-increment:solstep;content:counter(solstep);position:absolute;
  left:-15px;top:0;width:28px;height:28px;border-radius:50%;background:var(--color-primary);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.sol-steps>li>p{margin:0;font-size:15.5px;line-height:1.8;color:var(--color-text-muted)}

/* 「如果你…→ 进入…方案」定位器：把 → 后半句高亮，文字不动 */
.sol-pick{margin:6px 0 8px;padding:0;list-style:none;display:grid;gap:12px}
.sol-pick>li{position:relative;background:#fff;border:1px solid var(--color-border);
  border-left:4px solid var(--color-primary);border-radius:var(--radius-card);
  padding:16px 20px;font-size:15.5px;line-height:1.8;color:var(--color-text-muted)}

/* 表格：沿用全站 .spec 视觉，仅补投影与圆角容器 */
.sol-sec .table-wrap{border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:#fff;margin:0 0 18px;box-shadow:var(--shadow-card)}
/* .spec--pair（两列成对表）不设最小宽：它随栏宽自适应，窄屏改堆叠（见文件末尾媒体查询）。
   其余多列表格仍保 640px 最小宽 + 横向滚动，避免三列以上被压成竖排。 */
.sol-sec .table-wrap .spec{min-width:640px;margin:0}
.sol-sec .table-wrap .spec--pair{min-width:0}
.sol-sec .table-wrap .spec thead th:first-child{border-top-left-radius:var(--radius-card)}
.sol-sec .table-wrap .spec thead th:last-child{border-top-right-radius:var(--radius-card)}

/* 四类买家一览 → 可点击方案卡（对应方案母词给出直达入口） */
.sol-grid{display:grid;gap:20px;margin:6px 0 8px;padding:0;list-style:none}
.sol-grid--2{grid-template-columns:repeat(2,1fr)}
.sol-card{background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);transition:box-shadow var(--transition-base),transform var(--transition-base)}
.sol-card:hover{box-shadow:0 10px 26px rgba(15,95,83,.13);transform:translateY(-2px)}
.sol-card__link{display:block;padding:24px 26px;color:inherit;text-decoration:none}
.sol-card h3{margin:0 0 8px;font-size:18px;color:var(--color-primary-dark)}
.sol-card__ask{margin:0 0 14px;font-size:15px;line-height:1.75;color:var(--color-text-muted)}
.sol-card__dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.sol-card__dl dt{font-weight:700;color:var(--color-primary);white-space:nowrap}
.sol-card__dl dd{margin:0;color:var(--color-text-muted)}
.sol-card__go{display:inline-block;margin-top:16px;font-size:14.5px;font-weight:700;color:var(--color-accent)}

/* 关联产品型号：图文卡（实拍图 + 型号 + 参数）
   2+6 版式：一屏先看到 2 个主力型号，其余 6 个同尺寸卡片
   在第二行起规整排列，不留空洞也不压窄首屏。 */
.prod-slot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;
  margin:0;padding:0;list-style:none}
.prod-slot>li{display:grid;grid-template-columns:clamp(150px,30%,230px) minmax(0,1fr);gap:0;
  background:#fff;border:1px solid var(--color-border);border-radius:var(--radius-card);
  overflow:hidden;box-shadow:var(--shadow-card);
  transition:box-shadow var(--transition-base),transform var(--transition-base)}
.prod-slot>li:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}

/* 卡内媒体：固定 4:3 与实拍图原始比例一致，object-fit:cover 不裁切主体 */
.prod-slot__media{position:relative;display:block;background:var(--color-bg-soft);
  aspect-ratio:4/3;overflow:hidden;border-right:1px solid var(--color-border)}
.prod-slot__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--transition-base)}
.prod-slot__media:hover img,.prod-slot>li:hover .prod-slot__media img{transform:scale(1.04)}
.prod-slot__media:focus-visible{outline:3px solid var(--color-accent);outline-offset:-3px}
.prod-slot__media--ph{display:flex;align-items:center;justify-content:center;
  background:var(--color-primary-light);color:var(--color-primary);
  font-size:12.5px;font-weight:700;letter-spacing:.08em;text-align:center;padding:12px}
.prod-slot__body{padding:16px 18px 18px;min-width:0}
.prod-slot__name{margin:0 0 10px;font-size:16px;font-weight:700;color:var(--color-primary-dark);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.prod-slot__badge{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--color-accent);
  background:var(--color-accent-soft);border-radius:999px;padding:2px 9px}
.prod-slot__dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:14px}
.prod-slot__dl dt{font-weight:700;color:var(--color-primary);white-space:nowrap}
.prod-slot__dl dd{margin:0;color:var(--color-text-muted);line-height:1.7}
/* 定制槽位：结构参考型号的实拍图 + 明示来源，避免被误读为现货款 */
.prod-slot__ref{margin:10px 0 0;font-size:12.5px;line-height:1.6;color:var(--color-text-muted)}
.prod-slot__ref a{color:var(--color-primary);font-weight:600}

/* 能力页开篇导语（Word 每页【直接回答】之后、第一个 h2 之前的正文段）。
   它是正文，不是装饰：承载「本页解决什么问题」的定位说明。
   排版上做成"引言块"——左侧主色竖线 + 稍大字号 + 主色文字，与下方 sol-sec 正文明
   显区分，但不抢顶图 lead 的位置。宽度跟随 .prose（760px）以与正文同栏对齐。 */
.oem-intro{margin:0 0 40px;padding:0 0 0 20px;border-left:3px solid var(--color-primary)}
.oem-intro>p{margin:0 0 14px;font-size:17.5px;line-height:1.9;color:var(--color-text)}
.oem-intro>p:last-child{margin-bottom:0}
/* 导语里的第一句通常是定位陈述，加重一档 */
.oem-intro>p:first-child{font-weight:600;color:var(--color-primary-dark)}
/* 导语成为 .prose 的首个子元素后，L901 的 `.prose>.sol-sec:first-child{padding-top:0}`
   不再命中，第一节会吃掉完整 88px 上内边距，与导语的 40px 下外边距叠成 128px 空洞。
   这里显式补回首节不留上边距的行为，让导语与第一节读起来是一个整体。 */
.prose>.oem-intro+.sol-sec{padding-top:24px}

/* 合规与认证台账表：把「按项目确认」「—」这类未核实行与已核验证书在视觉上分开。
   未核实行弱化处理，避免读者把「按项目确认」读成「已持有」。 */
.spec--cert tbody tr.is-provisional th,
.spec--cert tbody tr.is-provisional td{background:var(--color-bg-soft);color:var(--color-text-muted)}
.spec--cert tbody tr.is-provisional th[scope="row"]{font-weight:600;color:var(--color-text-muted)}
/* 状态列里的「按项目确认」本身再弱化一档，与证书编号形成对比 */
.spec--cert tbody tr.is-provisional td:last-child{font-style:italic}
.spec--cert caption{caption-side:bottom;padding-top:12px;text-align:left;
  font-size:13px;color:var(--color-text-muted)}

/* 评分卡「危险信号（红 flag）」列：这一列是负面清单，不能与「你要的回答」等重视觉，
   否则读者会把两类内容混读。用暖色底 + 警示色文字，与正文表格数据区分开。
   ⚠ 表头不要改文字色：thead 的底色是主色深绿（L239 `color:#fff`），
   把文字改成深红会变成「深红压深绿」，对比度约 1.6:1，等于看不清。
   表头用暖色**底**（白字继续压在上面）+ 彩色下边框来标记该列的属性。 */
.spec--warn thead th:last-child{background:#8A3B2A;box-shadow:inset 0 -3px 0 #E4708A}
.spec--warn tbody td.is-warn{background:#FDF4F0;color:#8A3B2A}

/* FAQ 节在文档里可能分两层：父标题（「热门 GEO 问答（直接回答块）」）作节名，
   其下再有一个子标题（「常见问题 FAQ」）。子标题用 h3 承载，
   但它下面直接接折叠列表而不是正文，故不留 h3 惯常的大上边距。 */
.faq__group{margin:0 0 18px;font-size:17px;color:var(--color-primary-dark);font-weight:700}

/* 关联位角标「可直接访问」：与「待发布」区分开，后者是灰底，前者用主色，表示现在就能点。 */
.prod-slot__badge.is-live{background:var(--color-primary-light);color:var(--color-primary)}
.prod-slot__name a{font-weight:700}

/* 关联产品图文卡响应式：
   ≤1100px 单列（卡内左图右文仍保持横排，图不小于 180px）；
   ≤640px 卡内改为上图下文，避免窄屏文字被压成逐字换行。 */
@media (max-width:1100px){
  .prod-slot{grid-template-columns:1fr}
  .prod-slot>li{grid-template-columns:clamp(180px,26%,260px) minmax(0,1fr)}
}
@media (max-width:640px){
  .prod-slot{gap:16px}
  .prod-slot>li{grid-template-columns:1fr}
  .prod-slot__media{border-right:none;border-bottom:1px solid var(--color-border);aspect-ratio:16/10}
  .prod-slot__body{padding:14px 16px 16px}
}

/* 宽表滚动提示 + 键盘焦点环。
   表格在窄屏必然横向裁切，没了提示用户就以为「内容只有这些」。
   提示默认 display:none，由 main.js 判定「确实溢出」后加 .is-on 才出现；
   脚本不可用时提示不显示，但 tabindex=0 让容器仍可键盘聚焦/滚动。 */
.table-scroll-hint{display:none;margin:-8px 0 18px;font-size:12.5px;color:var(--color-text-muted)}
.table-scroll-hint.is-on{display:block}
.table-wrap[role="region"]:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
/* 提示仅在有意义时出现；窄屏才可能溢出，桌面端即便 is-on 也不显示，避免噪音 */
@media (min-width:1024px){
  .table-scroll-hint.is-on{display:none}
}

@media (max-width:1023px){
  .sol-grid--2{grid-template-columns:1fr}
  .sol-sec{padding:56px 0}
}
@media (max-width:767px){
  .sol-sec{padding:44px 0}
  .sol-sec>p{font-size:16px}
  .oem-intro{margin-bottom:32px;padding-left:16px}
  .oem-intro>p{font-size:16.5px}
  .sol-points{grid-template-columns:1fr}
  .sol-card__link{padding:20px 18px}
  .sol-sec .table-wrap .spec{min-width:560px}
  .sol-sec .table-wrap .spec th,.sol-sec .table-wrap .spec td{padding:10px 12px;font-size:14px}

  /* 两列成对表在手机上「横排两列」只会把左列标签压成竖条（327px 可用宽里左列仅约 98px，
     「面料与吸收结构确认：」这类 11 字标签会折成三行）。改为堆叠：
     每行的行首单元格变成该行的小标题，说明文字整段落在它下面。
     <table> 语义与 DOM 顺序都不变 —— 只改视觉排布，正文一字不动。
     thead 用视觉隐藏（而非 display:none）保留列表头，屏幕阅读器仍能正确关联行列。 */
  .sol-sec .table-wrap .spec--pair{min-width:0;border:0;background:transparent}
  .sol-sec .table-wrap .spec--pair thead{position:absolute;width:1px;height:1px;
    margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .sol-sec .table-wrap .spec--pair tbody tr{display:block;background:#fff;
    border:1px solid var(--color-border);border-left:3px solid var(--color-accent);
    border-radius:var(--radius-card);margin-bottom:12px;padding:14px 16px}
  .sol-sec .table-wrap .spec--pair tbody tr:nth-child(even){background:#fff}
  .sol-sec .table-wrap .spec--pair tbody th[scope="row"],
  .sol-sec .table-wrap .spec--pair tbody td{display:block;width:auto;min-width:0;
    border-bottom:0;padding:0}
  .sol-sec .table-wrap .spec--pair tbody th[scope="row"]{font-size:15px;
    margin:0 0 8px;color:var(--color-primary-dark)}
  .sol-sec .table-wrap .spec--pair tbody td{color:var(--color-text-muted);line-height:1.8}
}

/* ============================================================
   可持续发展与合规中心（sustainability-hub）追加样式
   产品关联位 .sus-slot：素色渐变媒体块（实拍回填位，禁斜纹）+ 品类卡
   ============================================================ */
.sus-intro{max-width:960px}
.sus-intro p{color:var(--color-text);line-height:1.9;margin:0 0 12px}
.sus-intro p:last-child{margin-bottom:0}
.sus-note{margin-top:18px}

/* 「sus-sec」章节排版（2026-11 二次运营反馈）：本页 H2 去掉「一、二、…」中文序号后，
   用 4px 主色短杠 + 16px 缩进承担章节锚点；长句标题换行时行高放宽到 1.45 不挤压，
   副题左缘与标题文字（跨过短杠）对齐。仅作用于 sustainability-hub。 */
.sus-sec .section-head h2{padding-left:16px;border-left:4px solid var(--color-primary);line-height:1.45}
.sus-sec .section-head h2 + p{margin-left:20px}

/* 开篇「留白式导语」区（sus-open）：BANNER 与第一节之间的呼吸层。
   2026-11 运营反馈：原「两段文字墙 + 全宽 figure」紧贴 BANNER、过密。
   现结构：左=短导语 + 2×2 事实卡（证书号/报告号逐字下沉进卡），
   右=理念图卡（与左栏等高呼应），左下=口径承诺条。
   ⚠ 图像裁切：sustainability-nature.jpg 原始 1024×520（约 2:1），
     桌面按 4:3 居中裁切只为与左栏高度平衡，主体（树+溪流）居中不受损；
     ≤1023px 回退原始比例，不裁。 */
.sus-open{padding:56px 0 12px}
.sus-open__grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  grid-template-areas:"copy media" "promise media";column-gap:48px;row-gap:26px}
.sus-open__copy{grid-area:copy}
.sus-open__media{grid-area:media;align-self:center;margin:0}
.sus-open__promise{grid-area:promise}
.sus-open__lead{margin:0 0 24px;font-size:18.5px;line-height:2;color:var(--color-text)}
.sus-open__lead strong{color:var(--color-primary-dark)}
.sus-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.sus-fact{background:var(--color-primary-light);border-radius:10px;padding:16px 18px 14px;
  display:flex;flex-direction:column;gap:6px}
.sus-fact dt{font-size:13px;font-weight:800;letter-spacing:.05em;color:var(--color-primary)}
.sus-fact dd{margin:0;font-size:14.5px;line-height:1.8;color:var(--color-text)}
.sus-open__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:10px;border:1px solid var(--color-border);box-shadow:var(--shadow-card)}
.sus-open__media figcaption{margin-top:10px;font-size:13px;color:var(--color-text-muted);text-align:center}
.sus-open__promise{background:var(--color-bg-soft);border-left:3px solid var(--color-primary);
  border-radius:0 10px 10px 0;padding:16px 20px}
.sus-open__promise p{margin:0;font-size:15.5px;line-height:1.9;color:var(--color-text-muted)}
.sus-open__promise strong{color:var(--color-primary-dark)}
@media (max-width:1023px){
  .sus-open{padding:44px 0 8px}
  .sus-open__grid{grid-template-columns:1fr;grid-template-areas:"copy" "media" "promise";row-gap:24px}
  .sus-open__lead{font-size:17.5px}
  .sus-open__media img{aspect-ratio:auto}
}
@media (max-width:767px){
  .sus-open{padding:36px 0 4px}
  .sus-facts{grid-template-columns:1fr}
  .sus-open__promise{padding:14px 16px}
}
.sus-slots{list-style:none;margin:28px 0 0;padding:0;display:grid;
  grid-template-columns:repeat(2,1fr);gap:20px}
.sus-slot{list-style:none;background:#fff;border:1px solid var(--color-border);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;
  display:flex;flex-direction:column;transition:box-shadow .2s ease,transform .2s ease}
.sus-slot:hover{box-shadow:0 6px 18px rgba(15,95,83,.12);transform:translateY(-2px)}
.sus-slot__media{position:relative;height:150px;flex:none;
  background:linear-gradient(135deg,#EAF3F0 0%,#DCEAE6 55%,#CFE3DD 100%);
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-bottom:1px solid var(--color-border)}
.sus-slot__num{font-size:30px;font-weight:700;color:rgba(15,95,83,.28);
  letter-spacing:.04em;line-height:1}
.sus-slot__ph{font-size:13px;color:var(--color-primary);background:#fff;
  border:1px dashed rgba(15,95,83,.45);border-radius:999px;padding:5px 14px;line-height:1.4}
.sus-slot__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.sus-slot__name{margin:0 0 12px;font-size:17px;line-height:1.45;color:var(--color-text)}
.sus-slot__dl{margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;
  column-gap:12px;row-gap:8px}
.sus-slot__dl dt{font-size:13px;font-weight:700;color:var(--color-primary-dark);white-space:nowrap;padding-top:2px}
.sus-slot__dl dd{margin:0;font-size:13.5px;color:var(--color-text-muted);line-height:1.7}
.sus-slot__link{margin-top:auto;font-size:14px;font-weight:700;
  color:var(--color-primary);text-decoration:none}
.sus-slot__link:hover{color:var(--color-primary-dark);text-decoration:underline}
@media (max-width:820px){
  .sus-slots{grid-template-columns:1fr;gap:16px}
  .sus-slot__media{height:132px}
}

/* ============================================================
   知识中心 · 栏目图文卡片（.listcard--media / .mediacard*）
   新增命名空间，仅作用于带 --media 修饰的列表；站点其它
   使用 .listcard / .card 的页面不受影响。
   ============================================================ */
.listcard--media{gap:22px}
.listcard--media>.mediacard{padding:0;overflow:hidden;gap:0}
.listcard--media .mediacard__media{margin:0;position:relative;overflow:hidden;
  aspect-ratio:16/10;background:var(--color-primary-light);
  border-bottom:1px solid var(--color-border)}
.listcard--media .mediacard__media img{width:100%;height:100%;object-fit:cover;
  object-position:center 40%;border-radius:0;display:block;
  transition:transform 420ms ease}
.listcard--media .mediacard:hover .mediacard__media img{transform:scale(1.04)}
.listcard--media .mediacard__body{display:flex;flex-direction:column;flex:1 1 auto;
  padding:20px 22px 22px}
.listcard--media .mediacard__title{font-size:18px;line-height:1.5;margin:0 0 10px;
  color:var(--color-text);display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.listcard--media .mediacard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 12px;padding:0;font-size:13px;line-height:1.6;color:var(--color-text-muted)}
.listcard--media .mediacard__meta .dot{color:var(--color-border);font-weight:700}
.listcard--media .mediacard__chip{font-weight:700;letter-spacing:.02em;white-space:nowrap;
  color:var(--color-primary-dark);background:var(--color-primary-light);
  border-radius:999px;padding:3px 10px}
.listcard--media .mediacard__lead{margin:0 0 14px;padding:0;font-size:14.5px;
  line-height:1.75;color:var(--color-text-muted);display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.listcard--media .mediacard .card__link{margin-top:auto;font-size:15px}
/* 未配主图的文章：不编造占位图，用左侧细色条维持同一卡片节奏 */
.listcard--media>.mediacard--text .mediacard__body{position:relative;padding-left:26px}
.listcard--media>.mediacard--text .mediacard__body::before{content:"";position:absolute;
  left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--color-primary),var(--color-accent))}
@media (max-width:640px){
  .listcard--media{gap:16px}
  .listcard--media .mediacard__media{aspect-ratio:16/9}
  .listcard--media .mediacard__body{padding:16px 18px 18px}
  .listcard--media .mediacard__title{font-size:17px}
}

/* 产品中心 · 型号卡：产品实拍统一为 1:1 方图，卡片图位改方形并居中，
   避免 16:10 裁切把腰头 / 裆部结构裁掉。选择器权重高于上方移动端
   媒体查询里的 .mediacard__media，≤640px 仍保持 1:1。 */
.listcard--media .mediacard__media.mediacard__media--sq{aspect-ratio:1/1}
.listcard--media .mediacard__media.mediacard__media--sq img{object-position:center center}

/* ------------------------------------------------------------
   产品品类页 · 型号卡（.listcard--model）
   与首页产品图卡（.prodcard）同一口径：图位满幅放大、文字区紧凑。
   实测改前 图 367 : 文 290/319（约 56:44），正文自然高度接近首页
   同款卡 193px 的 1.5 倍，故卡片显“图小字多”。
   做法：方形实拍左右各裁 10% 取 4:5（腰头 / 裆部结构完整保留，
   仍不裁掉上下），同时收内边距与行距。
   权重 (0,3,0) 与上方 1:1 规则同级但更靠后，故桌面与 ≤640px
   统一为 4:5；知识中心文章卡（不带 --model）与产品总览隐藏模板
   （.mediacard--img）不受影响。空态图位不带 --sq，仍为 16:10。
   ------------------------------------------------------------ */
.listcard--model .mediacard__media.mediacard__media--sq{aspect-ratio:4/5}
/* 空态图位（.ph--card，不带 --sq）同高，避免空卡比邻近实拍卡矮一截。
   :not() 计入一个类，权重 (0,3,0) 高于 ≤640px 媒体查询里的 16/9。 */
.listcard--model .mediacard__media:not(.mediacard__media--sq){aspect-ratio:4/5}
.listcard--model .mediacard__body{padding:16px 18px 18px}
.listcard--model .mediacard__title{font-size:17px;line-height:1.45;margin:0 0 8px}
.listcard--model .mediacard__meta{gap:6px 8px;margin:0 0 10px;
  font-size:12.5px;line-height:1.5}
.listcard--model .mediacard__lead{margin:0 0 12px;font-size:13.5px;line-height:1.65}
.listcard--model .mediacard .card__link{font-size:14.5px;padding-top:12px}

/* ============================================================
   知识中心 · 栏目分页器 / 未配图文字链接区 / 图文卡位空状态
   （前端分页：卡片全部留在 DOM，只切换 hidden，不新增 URL）
   ============================================================ */
.pager{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:14px 22px;margin-top:34px;padding-top:22px;border-top:1px solid var(--color-border);
}
.pager[hidden]{display:none}
.pager__count{margin:0;font-size:14px;line-height:1.6;color:var(--color-text-muted)}
.pager__count b{font-weight:700;color:var(--color-primary)}
.pager__nav{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.pager__pages{display:flex;flex-wrap:wrap;gap:6px}
.pager__btn,.pager__num{
  font-family:inherit;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;
  background:#fff;color:var(--color-text);border:1px solid var(--color-border);
  border-radius:var(--radius-btn);padding:9px 16px;
  transition:background var(--transition-base),color var(--transition-base),border-color var(--transition-base);
}
.pager__num{min-width:42px;padding:9px 0;text-align:center}
.pager__btn:hover:not(:disabled),.pager__num:hover:not([aria-current="page"]){
  background:var(--color-primary-light);border-color:var(--color-primary);color:var(--color-primary);text-decoration:none;
}
.pager__num[aria-current="page"]{background:var(--color-primary);border-color:var(--color-primary);color:#fff;cursor:default}
.pager__btn:disabled{opacity:.42;cursor:not-allowed}
/* 被分页隐藏的卡片必须显式压掉 .listcard>li{display:flex}，否则 [hidden] 失效 */
.listcard--media>.mediacard[hidden]{display:none}

.morelinks{margin-top:34px;padding:24px 26px;background:var(--color-bg-soft);border:1px solid var(--color-border);border-radius:var(--radius-card)}
.morelinks__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px;margin:0 0 12px;font-size:15.5px;font-weight:700;color:var(--color-text)}
.morelinks__note{font-size:13px;font-weight:400;color:var(--color-text-muted)}
.morelinks__list{display:grid;grid-template-columns:1fr 1fr;gap:0 28px;margin:0;padding:0;list-style:none}
.morelinks__list>li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:9px 0;border-bottom:1px dashed var(--color-border);font-size:14px;line-height:1.65}
.morelinks__list>li:last-child{border-bottom:0}
.morelinks__list a{flex:1 1 320px;min-width:0;color:var(--color-primary);font-weight:600}
.morelinks__meta{font-size:12.5px;color:var(--color-text-muted);white-space:nowrap}

.emptystate{padding:32px 30px;background:var(--color-primary-light);border:1px dashed var(--color-primary);border-radius:var(--radius-card)}
.emptystate__title{margin:0 0 16px;font-size:15.5px;line-height:1.8;color:var(--color-text)}
.emptystate__list{display:grid;gap:10px;margin:0 0 22px;padding:0;list-style:none}
.emptystate__list a{display:block;font-size:15px;font-weight:600;line-height:1.6;color:var(--color-primary)}
.emptystate__meta{font-size:12.5px;color:var(--color-text-muted)}
.emptystate__links{display:flex;flex-wrap:wrap;gap:12px;margin:0}

@media (max-width:900px){
  .morelinks__list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pager{margin-top:26px;padding-top:18px;gap:12px}
  .pager__nav{width:100%;justify-content:space-between}
  .pager__btn{padding:8px 12px;font-size:13px}
  .pager__num{min-width:36px;padding:8px 0;font-size:13px}
  .morelinks{padding:18px 16px}
  .emptystate{padding:20px 16px}
}

/* ===== 定义列表与有序步骤（详情模具 / 品类页新增，纯附加规则，不改既有选择器） ===== */
.deflist{display:grid;grid-template-columns:172px 1fr;gap:10px 22px;align-items:start;margin:0 0 8px;padding:0}
.deflist dt{font-weight:700;line-height:1.6;color:var(--color-primary)}
.deflist dd{margin:0;font-size:14.5px;line-height:1.7;color:var(--color-text-muted)}
.step-list{margin:0 0 14px;padding-left:22px}
.step-list li{margin-bottom:10px;line-height:1.7}
.step-list li:last-child{margin-bottom:0}
.step-list li strong{color:var(--color-primary)}
@media (max-width:767px){
  .deflist{grid-template-columns:1fr;gap:0}
  .deflist dt{margin-top:16px}
  .deflist dt:first-of-type{margin-top:0}
  .deflist dd{margin-top:5px}
}

/* ---------- 产品分类页「产品规格」右侧预留图位：企业实拍图 ----------
   图占位符 .ph 换成 .figure 后，桌面段限宽居中，避免竖版实拍压过左侧规格表；
   ≤900px 时 .detail 已转单列，图片自动 100% 宽，无需额外规则。 */
.detail__media .figure figcaption{text-align:center}
@media (min-width:901px){.detail__media{align-self:end}}
@media (min-width:901px){.detail__media .figure{max-width:100%;margin:0 auto}}
@media (min-width:901px){.detail .table-wrap .spec{min-width:0}}

/* ---------- 可持续页面「相关可持续产品方向」卡片：填入企业实拍图 ----------
   原为纯文案图位（.sus-slot__ph 虚线占位）；现改为同方向产品实拍，
   桌面卡面加高到 200px 并 contain 展示，避免方形实拍被压成横条。 */
.sus-slot__media--photo{background:linear-gradient(135deg,#F2F8F6,#E6F0EC);height:200px}
.sus-slot__media--photo img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.sus-slot__media--photo .sus-slot__num{position:absolute;left:14px;top:12px;z-index:2;
  font-size:12.5px;font-weight:700;letter-spacing:.08em;color:var(--color-primary);
  background:rgba(255,255,255,.94);border:1px solid rgba(15,95,83,.14);
  border-radius:999px;padding:2px 10px;line-height:1.55}
.sus-slot__models{margin:12px 0 0;font-size:13.5px;line-height:1.75;color:var(--color-text-muted)}
.sus-slot__models a{color:var(--color-primary);font-weight:700;text-decoration:none;
  border-bottom:1px solid rgba(15,95,83,.24)}
.sus-slot__models a:hover{border-bottom-color:var(--color-primary)}
@media (max-width:820px){.sus-slot__media--photo{height:176px}}

/* ================= 产品详情页 v2：顶部图廊 + 关键参数 ================= */
.pdp-top{padding:var(--space-block) 0 56px;border-bottom:1px solid var(--color-border)}
/* 图廊已放大、参数带改为通栏，故右列只需容纳标题/摘要/标签/按钮 */
.pdp-top__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,380px);gap:40px;align-items:start}

/* ---- 左：图廊轮播 ---- */
.pgal{position:relative;min-width:0}
/* 满幅：去掉边框与内缩，实拍图直接铺满容器（图与容器同为 4:3，不裁切） */
.pgal__stage{position:relative;overflow:hidden;border-radius:var(--radius-card);background:#fff;aspect-ratio:4/3}
.pgal__stage:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.pgal__track{display:block}
.pgal__slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 240ms ease;pointer-events:none}
.pgal__slide.is-active{opacity:1;pointer-events:auto}
.pgal__slide img{width:100%;height:100%;object-fit:contain;display:block}
.pgal__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin-top:12px}
.pgal__count{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--color-primary)}
/* 列数由每页张数通过 style="--pgal-cols:N" 注入（全局窄屏分支会覆盖为横滑条）：
     auto-fill/auto-fit 都无法避免孤儿行——5 张排 4+1、10 张排 7+3 且留 424px 空白。 */
.pgal__thumbs{display:grid;grid-template-columns:repeat(var(--pgal-cols,5),minmax(0,1fr));gap:10px;margin-top:14px}
.pgal__thumb{position:relative;padding:0;border:2px solid var(--color-border);border-radius:6px;background:var(--color-bg-soft);cursor:pointer;overflow:hidden;aspect-ratio:4/3;transition:border-color var(--transition-base),box-shadow var(--transition-base)}
.pgal__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pgal__thumb:hover{border-color:var(--color-primary-light)}
.pgal__thumb.is-active{border-color:var(--color-primary);box-shadow:0 0 0 2px var(--color-primary-light)}
.pgal__thumb:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.pgal__hint{margin:0;font-size:13px;color:var(--color-text-muted)}

/* ---- 右：标题 / 摘要 / 标签 / 按钮（参数已移到图下方通栏） ---- */
.pkey .eyebrow{margin:0 0 6px}
.pkey h1{margin:0 0 12px;font-size:var(--fs-h1);line-height:var(--lh-tight);color:var(--color-text)}
.pkey__summary{margin:0 0 16px;font-size:15.5px;line-height:1.75;color:var(--color-text-muted)}
.pkey__chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px;padding:0;list-style:none}
.pkey__chips li{padding:5px 12px;border-radius:999px;background:var(--color-primary-light);color:var(--color-primary);font-size:13px;font-weight:600}
.pkey__note{margin:16px 0 0;font-size:13px;line-height:1.7;color:var(--color-text-muted)}
.pkey__note a{color:var(--color-primary);font-weight:600}
.pkey__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}

/* ---- 关键参数带：通栏横排（图下方），9 格 3×3，消除左右不对称 ----
   用 gap:1px + 底色描边取替逐格 border-right/bottom，列数随断点变化时无需 nth-child 补偿。 */
.pkband{margin-top:28px;border:1px solid var(--color-border);border-radius:var(--radius-card);
  background:var(--color-bg);box-shadow:var(--shadow-card);overflow:hidden}
.pkband__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;
  padding:15px 20px;border-bottom:1px solid var(--color-border);background:var(--color-bg-soft)}
.pkband__title{margin:0;font-size:17px;color:var(--color-primary)}
.pkband__sub{margin:0;font-size:13px;color:var(--color-text-muted)}
.pkband__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin:0;background:var(--color-border)}
.pkband__cell{margin:0;padding:15px 18px 17px;background:var(--color-bg);min-width:0}
.pkband__cell dt{margin:0 0 7px;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--color-primary)}
.pkband__cell dd{margin:0;font-size:14px;line-height:1.68;color:var(--color-text)}
.pkband__foot{margin:0;padding:13px 20px;border-top:1px solid var(--color-border);
  background:var(--color-bg-soft);font-size:12.5px;line-height:1.7;color:var(--color-text-muted)}
.pkband__foot a{color:var(--color-primary);font-weight:600}

/* ---- 产品说明 / 结构与原理：表格化呈现 ----
   直接沿用全站 .spec 视觉，只补两处：说明表首列是短标签（比规格表的 210px 更窄更齐），
   层结构表的层次名下方带一行工艺口径（.layer-cap）。 */
.pdp-body .spec--text th[scope="row"]{width:150px}
.pdp-body .spec--text td{line-height:1.75}
.layer-cap{display:block;margin-top:6px;font-size:13px;color:var(--color-text-muted)}
.pdp-body h2+.table-wrap{margin-top:16px}
.pdp-body .table-wrap+.table-wrap{margin-top:28px}

/* ---- 正文与相关页 ----
   正文原为 880px 居中，与上方通栏的图 + 参数带左右边界不齐；现放开到容器满宽，
   让表格/参数带与顶部板块对齐，纯文字段落再单独限宽保证可读性。 */
.pdp-body{max-width:none;margin:0;padding-top:var(--space-block)}
.pdp-body>p,.pdp-body>div>p,.pdp-body .prose{max-width:880px}
.pdp-body h2{scroll-margin-top:calc(var(--header-h) + 16px)}
.rel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin:20px 0 0;padding:0;list-style:none}
.rel-grid li{border:1px solid var(--color-border);border-radius:var(--radius-card);background:var(--color-bg);padding:16px 18px;box-shadow:var(--shadow-card);transition:box-shadow var(--transition-base),transform var(--transition-base)}
.rel-grid li:hover{box-shadow:var(--shadow-hover);transform:translateY(-2px)}
.rel-grid a{color:var(--color-primary);font-weight:700;text-decoration:none}
.rel-grid a:hover{text-decoration:underline}
.rel-grid p{margin:6px 0 0;font-size:13.5px;line-height:1.65;color:var(--color-text-muted)}

@media (max-width:1023px){
  .pdp-top__grid{grid-template-columns:1fr;gap:28px}
  .pkey h1{font-size:32px}
  .pkband__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .pdp-top{padding-bottom:40px}
  /* 窄屏缩略图改为横向滑动条：全站图廊张数为 5（38 页）/6/10，任何固定列数都会产生
     孤儿行（5 张排 4+1、6 张排 5+1）；横滑可让张数任意而不换行，且缩略图保持 86px 不用缩小。
     右缘渐隐提示可滑动，与「1 / N」计数、提示文案共同提示切换方式。 */
  .pgal__thumbs{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;
    margin-top:12px;padding-bottom:4px;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;-ms-overflow-style:none}
  .pgal__thumbs::-webkit-scrollbar{display:none}
  .pgal__thumb{flex:0 0 86px;scroll-snap-align:start}
  .pgal__foot{margin-top:10px}
  .pkey h1{font-size:26px}
  .pkband{margin-top:22px}
  .pkband__head{padding:13px 16px}
  .pkband__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pkband__cell{padding:13px 14px 15px}
  .pkband__cell dt{font-size:12px}
  .pkband__cell dd{font-size:13.5px}
  /* 说明表在窄屏堆叠为「标签 + 值」的卡片行，避免横向滚动 */
  .pdp-body .spec--text{min-width:0}
  .pdp-body .spec--text,.pdp-body .spec--text tbody,
  .pdp-body .spec--text tr,.pdp-body .spec--text th,.pdp-body .spec--text td{display:block;width:auto}
  .pdp-body .spec--text thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  /* 表格转 block 后，caption 仍是 table-caption，会被匿名表格包裹而收缩成 ~74px 窄列；
     显式转 block 恢复整行宽度（摘要句此前在窄屏被挤成竖排）。 */
  .pdp-body .spec--text caption{display:block;width:auto;padding:0 0 12px}
  .pdp-body .spec--text tbody tr{border:1px solid var(--color-border);border-radius:var(--radius-card);
    background:#fff;margin-bottom:12px;overflow:hidden}
  .pdp-body .spec--text tbody tr:nth-child(even){background:#fff}
  .pdp-body .spec--text th[scope="row"]{width:auto;background:var(--color-bg-soft);
    white-space:normal;padding:11px 14px}
  .pdp-body .spec--text td{padding:11px 14px;line-height:1.75}
  .pdp-body .spec--text tbody tr:last-child th,
  .pdp-body .spec--text tbody tr:last-child td{border-bottom:1px solid var(--color-border)}
  .pdp-body .spec--text tbody tr th[scope="row"]:last-child,
  .pdp-body .spec--text tbody tr td:last-child{border-bottom:none}
}
@media (prefers-reduced-motion:reduce){
  .pgal__slide{transition:none}
  .rel-grid li{transition:none}
}

/* 知识中心列表页排版：三张子目录卡成排、说明段与无图关联入口 */
.sol-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.sol-grid--3>.sol-card{display:flex}
.sol-grid--3 .sol-card__link{display:flex;flex-direction:column;flex:1 1 auto}
.sol-grid--3 .sol-card__go{margin-top:auto}
.prod-slot--text{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.prod-slot--text>li{grid-template-columns:minmax(0,1fr);align-content:start;padding:20px 22px 22px}
.prod-slot--text .prod-slot__name{margin:0 0 14px;line-height:1.5;padding-bottom:12px;border-bottom:1px solid var(--color-border)}
.prod-slot--text .prod-slot__name a{color:var(--color-primary-dark)}
.prod-slot--text .prod-slot__dl{align-items:start;gap:4px 10px}
.prod-slot--text>li:hover{box-shadow:var(--shadow-hover);border-color:var(--color-primary)}
@media (max-width:1199px){
  .sol-grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .prod-slot--text{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .sol-grid--3,
  .prod-slot--text{grid-template-columns:minmax(0,1fr)}
}

/* ---------- PDF 下载询盘闸门（由 main.js initDownloadGate 注入并驱动） ---------- */
/* 全站任一 PDF 链接点击后先弹询盘表单，提交成功后才触发下载。
   弹层挂在 body 上：.header 有 backdrop-filter，会成为 position:fixed 的包含块，
   放在头部内会导致定位与尺寸被压缩。z-index 90 高于阅读进度条（80）。 */
.dlgate{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(9,22,20,.58);overflow-y:auto}
.dlgate[hidden]{display:none}
.dlgate__box{position:relative;width:100%;max-width:560px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;border-radius:var(--radius-card);box-shadow:0 24px 64px rgba(9,22,20,.32);
  padding:30px 30px 26px}
.dlgate__close{position:absolute;top:10px;right:10px;width:34px;height:34px;border:0;background:transparent;
  color:var(--color-text-muted);font-size:22px;line-height:1;border-radius:var(--radius-btn);cursor:pointer}
.dlgate__close:hover{background:var(--color-bg-soft);color:var(--color-text)}
.dlgate__title{margin:6px 0 10px;font-size:22px;line-height:1.35}
.dlgate__file{margin:0 0 18px;padding:10px 14px;background:var(--color-primary-light);
  border-radius:var(--radius-btn);font-size:14px;color:var(--color-primary-dark);word-break:break-word}
.dlgate__file strong{font-weight:700}
.dlgate__form .field:last-of-type{margin-bottom:6px}
.dlgate__form.is-done .field,.dlgate__form.is-done [type="submit"]{display:none}
.dlgate__again{margin:10px 0 0;font-size:13px;color:var(--color-text-muted)}
.dlgate__again[hidden]{display:none}
.dlgate__box .btn-row{margin-top:18px}
.is-dlgate-open{overflow:hidden}
@media (max-width:600px){
  .dlgate{padding:12px;align-items:flex-start}
  .dlgate__box{padding:24px 20px 20px;max-height:calc(100vh - 24px)}
  .dlgate__title{font-size:19px}
}
/* 资料文档卡（Request K）：文档名置顶 + 单一 3 列网格，保证一排 3 张左右对齐。
   文档名区固定两行高度，使各行缩略图纵向对齐；卡片 id 作为页外内链锚点。 */
.dl-grid__name{margin:0;padding:18px 22px 0;box-sizing:border-box;min-height:68px;
  font-size:17px;line-height:1.45;background:var(--color-bg-soft)}
.dl-grid>li[id]{scroll-margin-top:calc(var(--header-h) + 20px)}

/* ============================================================
   资料下载页 · 统一资料区（17 份 PDF，每三张一排）
   2026-10-16：原「经期内裤合作和生产相关文件下载」「初创品牌合作文件下载」
   「细分品类定制指南」「合规认证文件下载」与 OEM 总览区合并为一个区。
   以下规则只作用于 .dl-grid--library 与 .doc-index，不影响认证与检测区。
   ============================================================ */
/* 名称牌统一高度：一行标题与两行标题占同样高度，同一排三张卡的封面与按钮因此左右对齐。
   实测（17 页 · 1279px 视口 · 三列 369px）：一行标题 24.65px，两行 49.3px，
   上下内边距各 14px → 两行实高 77.3px，故 min-height 取 78px 才能让两种标题等高。 */
.dl-grid--library .dl-grid__name{display:flex;align-items:center;min-height:78px;padding:14px 22px}

/* 本页资料一览：桌面三列锚点索引，既是手机端的快速跳转，也是机器可读的资料名称清单 */
.doc-index{margin:0 0 26px;padding:18px 22px;background:var(--color-bg-soft);
  border:1px solid var(--color-border);border-radius:var(--radius-card)}
.doc-index__title{margin:0 0 12px;font-size:14px;font-weight:700;color:var(--color-text)}
.doc-index__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 20px;
  margin:0;padding:0;list-style:none}
.doc-index__list li{min-width:0}
.doc-index__list a{position:relative;display:block;padding:4px 0 4px 14px;font-size:13px;
  line-height:1.5;color:var(--color-primary-dark);word-break:break-word}
.doc-index__list a::before{content:"›";position:absolute;left:0;color:var(--color-accent);font-weight:700}
.doc-index__list a:hover{color:var(--color-accent);text-decoration:underline}

@media (max-width:1199px){
  .doc-index__list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* 手机端：单列，取消跨卡等高（单列无需对齐），压掉封面与内边距，按钮拉满便于点击 */
@media (max-width:900px){
  .doc-index{margin:0 0 20px;padding:16px 18px}
  .doc-index__list{grid-template-columns:1fr;gap:2px}
  .dl-grid--library .dl-grid__name{display:block;min-height:0;padding:14px 18px 0}
  .dl-grid--library .dl-grid__thumb{padding:12px}
  .dl-grid--library .dl-grid__thumb img{max-width:160px}
  .dl-grid--library .dl-grid__body{padding:16px 18px 18px}
  .dl-grid--library .dl-grid__body .btn{align-self:stretch;text-align:center}
}