/* ============================================================================
   赛路生物 CelluBio 官网公开页样式（配合 tokens.css；品牌站单一浅色外观，底色显式绘制）
   ========================================================================== */

/* ---------- 基础 ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  /* 防线：任何元素越界都不许把整页撑出横向滚动（clip 不产生滚动容器，sticky 不受影响） */
  overflow-x: hidden;
  overflow-x: clip;
  font-family: var(--clb-font-body);
  font-size: var(--clb-fs-body);
  line-height: 1.7;
  color: var(--clb-ink-soft);
  background: var(--clb-paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--clb-pine); text-decoration: none; }
a:hover { color: var(--clb-leaf); }
:focus-visible { outline: 2px solid var(--clb-leaf); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, .display { font-family: var(--clb-font-display); color: var(--clb-ink); line-height: 1.3; font-weight: 600; }

.container { max-width: var(--clb-page-max); margin: 0 auto; padding-left: var(--clb-page-pad); padding-right: var(--clb-page-pad); }

/* 视觉隐藏（蜜罐字段/无障碍标签） */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* hidden 属性必须压过组件自己的 display（.btn 是 inline-flex，否则 JS 设 hidden 不生效——询价态曾因此没藏住加购按钮） */
[hidden] { display: none !important; }

/* 苹方/SF 在深色与常规底上都需要抗锯齿，否则中文笔画显脏（apple.com.cn 同款设置） */
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
/* 无衬线标题靠「重字重 + 负字距」立住层次；正文行高放宽到 1.75，中英混排更松弛 */
h1, h2, h3, h4 { font-family: var(--clb-font-display); font-weight: 600; letter-spacing: -0.01em; }
h1 { letter-spacing: -0.022em; }
h2 { letter-spacing: -0.018em; }

/* ---------- 顶部导航 ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 253, 250, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--clb-mist-deep);
}
.header-bar { display: flex; align-items: center; gap: var(--clb-space-4); height: 64px; }
.brand { display: flex; align-items: center; gap: 0.55rem; color: var(--clb-ink); }
.brand-logo { height: 30px; width: auto; display: block; }
/* 页脚是深底：字标本体反白（logo 已做透明底，反白只作用到字形，彩色 Y 一并转白保持整体统一） */
.brand--footer .brand-logo { filter: brightness(0) invert(1); opacity: 0.95; }
.brand:hover { color: var(--clb-ink); }
.brand-zh { font-family: var(--clb-font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; }
.brand-en { font-size: var(--clb-fs-micro); letter-spacing: 0.28em; text-transform: uppercase; color: var(--clb-leaf); }
.site-nav { margin-left: auto; display: flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.55rem, 1.2vw, 1.4rem); }
/* 一级菜单字号与字重取自 tokens.css 的共享变量，与商城 SPA 顶栏（.my-nav）同源 */
.site-nav a { color: var(--clb-ink-soft); font-size: var(--clb-nav-fs); font-weight: var(--clb-nav-fw); padding: 0.35rem 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.site-nav a:hover { color: var(--clb-pine); }
.site-nav a.active { color: var(--clb-pine); font-weight: 600; border-bottom-color: var(--clb-leaf); }
/* 「我的」与语言切换是胶囊按钮，选择器必须写成 `.site-nav a.xxx`（0,2,1）压过上面的
   `.site-nav a`（0,1,1）——后者的 `border-bottom: 2px solid transparent` 简写会把底边颜色刷成透明，
   只用 `.nav-my`（0,1,0）+ `border-bottom-width:1px !important` 补救的话宽度回来了、颜色还是透明，
   于是胶囊少一条底边（用户可见的「边框不完整」，已踩）。提高特异性后就不再需要任何 !important。 */
.site-nav a.nav-my {
  font-size: var(--clb-fs-small); line-height: 1.2; color: var(--clb-pine);
  border: 1px solid var(--clb-pine); border-radius: 999px; padding: 0.32rem 0.85rem; white-space: nowrap;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.site-nav a.nav-my:hover { background: var(--clb-pine); color: var(--clb-white); }
.site-nav a.nav-lang {
  font-size: var(--clb-fs-micro); line-height: 1.2; letter-spacing: 0.12em; color: var(--clb-ink-faint);
  border: 1px solid var(--clb-mist-deep); border-radius: 999px; padding: 0.3rem 0.75rem; white-space: nowrap;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.site-nav a.nav-lang:hover { color: var(--clb-pine); border-color: var(--clb-pine); background: var(--clb-mist); }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--clb-mist-deep); border-radius: 8px; padding: 0.45rem 0.6rem; cursor: pointer; color: var(--clb-ink); }

/* ---------- 小标题（eyebrow：各页页首与分区头共用） ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: var(--clb-fs-micro); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--clb-leaf); margin-bottom: var(--clb-space-3);
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--clb-leaf); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.6rem; border-radius: 999px; font-size: 0.95rem; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.btn-primary { background: var(--clb-pine); color: var(--clb-white); }
.btn-primary:hover { background: var(--clb-pine-deep); color: var(--clb-white); transform: translateY(-1px); }
.btn-ghost { border-color: var(--clb-pine); color: var(--clb-pine); background: transparent; }
.btn-ghost:hover { background: var(--clb-mist); color: var(--clb-pine-deep); }

/* 轮播（管理后台的多张主图）
   所有帧叠在同一个网格单元里，容器高度恒为最高的一帧——切换时布局纹丝不动。
   ⚠️ 原来是 display:none/block 硬切，配合模板上的 loading="lazy" 会出大问题：
   lazy 图片在 display:none 的元素里根本不会开始下载，切到它的那一刻才发起请求，
   而 <img> 在图片到货前高度是 0 —— 整个 hero 塌掉几百像素、文档变短，
   浏览器把 scrollTop 夹回去，表现就是「页面往下拉着，一切换就跳到顶部」。
   手机上网络慢，这个 0 高度的窗口更长，所以更明显。
   现在非活动帧用 visibility 藏起来但**仍占布局**，高度自始至终不变。 */
.hero-slides { position: relative; display: grid; align-items: center; }
.hero-slide-img {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  /* visibility 延到淡出结束再切，否则刚开始淡出就不可见了，等于没有过渡 */
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.hero-slide-img.active { opacity: 1; visibility: visible; transition: opacity 0.7s ease; }
.hero-slide-img a { display: block; }
.hero-slide-img img { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--clb-radius-lg); box-shadow: var(--clb-shadow); }
.hero-dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; display: flex; gap: 8px; }
.hero-dots button { width: 9px; height: 9px; border-radius: 50%; border: none; background: rgba(255, 255, 255, 0.75); box-shadow: 0 0 0 1px rgba(23, 59, 43, 0.25); cursor: pointer; padding: 0; }
.hero-dots button.active { background: var(--clb-pine); }
.hero-banners { padding-bottom: var(--clb-space-5); }
/* 首页：轮播就是第一屏（标语/特性行已去掉），紧贴 sticky 导航之下留一小段，下方间距交给紧随其后的 .section */
/* 上下都留白：下面紧跟的「为什么选择」区块带上边框，轮播底边不能贴着那条线 */
.banner-strip { padding: var(--clb-space-4) 0 clamp(1.6rem, 4vw, 2.6rem); }
.banner-strip .hero-banners { padding-bottom: 0; }

/* ---------- 分区骨架 ---------- */
.section { padding: clamp(2.8rem, 6.5vw, 4.6rem) 0; }
.section.tinted { background: var(--clb-mist); border-top: 1px solid var(--clb-mist-deep); border-bottom: 1px solid var(--clb-mist-deep); }
.section-head { max-width: 560px; margin-bottom: var(--clb-space-5); }
.section-head h2 { font-size: var(--clb-fs-h2); margin-bottom: var(--clb-space-2); }
.section-head p { color: var(--clb-ink-faint); }
.section-head .more { font-size: var(--clb-fs-small); }
/* 页首（关于我们 / 应用领域 / 详情页）：与产品中心、资讯等页一致的 eyebrow + 标题 + 导语，不用带背景与纹样的 hero 带 */
.page-intro { max-width: 800px; margin-bottom: var(--clb-space-5); }
.page-intro h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); letter-spacing: 0.02em; margin: var(--clb-space-2) 0 var(--clb-space-3); }
.page-intro p { color: var(--clb-ink-soft); font-size: 1.02rem; line-height: 1.8; }
.page-intro .fiber-divider { margin-top: var(--clb-space-3); }
/* 页首自成一段、下一段紧随其后时，去掉底部留白让两段的间距只算一次 */
.section--top { padding-bottom: 0; }
.section--top .page-intro { margin-bottom: 0; }
.fiber-divider { width: 120px; height: 10px; color: var(--clb-sprout); margin-top: var(--clb-space-2); }

/* ---------- 卡片 ---------- */
.card-grid { display: grid; gap: var(--clb-space-4); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--clb-shadow-lift); }
.card-body { padding: var(--clb-space-4); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; }
.card h3 { font-size: var(--clb-fs-h3); }
.card h3 a { color: var(--clb-ink); }
.card h3 a:hover { color: var(--clb-pine); }
/* 整卡可点的资讯卡：卡片本身就是 <a>，要把全局 a 的深绿字色压回正文色，再把「链接感」只给标题 */
.card-link, .card-link:hover { color: var(--clb-ink-soft); text-decoration: none; }
.card-link h3 { color: var(--clb-ink); transition: color 0.15s ease; }
.card-link:hover h3 { color: var(--clb-pine); }
.card p { font-size: var(--clb-fs-small); color: var(--clb-ink-faint); }
/* 副标题恒占两行：超出省略（悬停看 title 全文），不足也留白，
   否则一行与两行的卡片价格区高度不齐，整排看着参差 */
.card-sub {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  overflow: hidden; line-height: 1.5; min-height: 3em;
}
/* 参数微字：用真实规格当 eyebrow（结构即信息） */
.spec-micro { font-family: var(--clb-font-mono); font-size: var(--clb-fs-micro); letter-spacing: 0.04em; color: var(--clb-leaf); }
.card-cover { display: block; aspect-ratio: 16/9; background: linear-gradient(150deg, var(--clb-mist) 0%, var(--clb-mist-deep) 100%); position: relative; overflow: hidden; }
.card-cover img { width: 100%; height: 100%; object-fit: cover; }
/* 商品卡封面按 800×800 口径：1:1 容器 + contain 留白，与详情页主图同一观感，不裁切不变形 */
/* 留白放在容器上、圆角放在图片上：反过来（img 自带 padding + border-radius）圆角只裁到
   img 的边框盒，而图像内容被 padding 内缩了 8px，正好落在圆弧里面——四个直角照样露着。 */
.card-cover--square { aspect-ratio: 1/1; background: var(--clb-white); padding: 0.5rem; display: grid; place-items: center; }
/* 图片按内容尺寸收缩（不是撑满 100%）：contain 撑满时元素盒比画出来的图大，圆角裁的是
   那圈空白，竖版海报的四角照旧是直的；让元素盒等于图片盒，圆角才落在图像本身上。 */
.card-cover--square img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--clb-radius-lg); }
.card-cover .cover-fiber { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--clb-sprout); opacity: 0.8; }
.card-meta { display: flex; align-items: center; gap: 0.8rem; font-size: var(--clb-fs-micro); color: var(--clb-ink-faint); }
.tag { display: inline-block; background: var(--clb-mist); color: var(--clb-pine); border-radius: 999px; padding: 0.1rem 0.65rem; font-size: var(--clb-fs-micro); }

/* ---------- 首页「为什么选择 CelluBio」 ---------- */
/* 淡绿渐变底（不放纤维纹样，用户要求去掉）；四栏用细竖线分隔，标题下一段短绿线，底部一行字距很宽的口号 */
/* 淡绿带：首页「为什么选择 CelluBio」与关于我们「为什么选择我们」是同一块底，改一处两处一起变 */
.why, .whyus { background: var(--clb-grad-mist); border-top: 1px solid var(--clb-mist-deep); border-bottom: 1px solid var(--clb-mist-deep); }
.why { position: relative; overflow: hidden; }
.why-head { position: relative; text-align: center; max-width: 780px; margin: 0 auto var(--clb-space-5); }
.why-head h2 { font-size: var(--clb-fs-h2); display: inline-flex; align-items: center; gap: 0.9rem; margin-bottom: var(--clb-space-2); }
.why-head h2::before, .why-head h2::after { content: ""; flex: none; width: 44px; height: 2px; background: linear-gradient(90deg, transparent, var(--clb-leaf)); }
.why-head h2::after { background: linear-gradient(90deg, var(--clb-leaf), transparent); }
.why-head h2 em { font-style: normal; color: var(--clb-pine); }
.why-head p { color: var(--clb-ink-soft); }
.why-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--clb-space-4); }
.why-item { position: relative; text-align: center; padding: 0 var(--clb-space-2); }
.why-item + .why-item::before { content: ""; position: absolute; left: calc(var(--clb-space-4) / -2); top: 14%; bottom: 14%; width: 1px; background: linear-gradient(transparent, var(--clb-mist-deep) 30%, var(--clb-mist-deep) 70%, transparent); }
.why-item__art { aspect-ratio: 4 / 3; border-radius: var(--clb-radius-lg); overflow: hidden; margin-bottom: var(--clb-space-3); box-shadow: var(--clb-shadow); }
.why-item__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.why-item h3 { font-size: 1.12rem; margin-bottom: 0.55rem; overflow-wrap: anywhere; }
.why-item h3::after { content: ""; display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--clb-leaf); margin: 0.65rem auto 0; }
.why-item p { font-size: var(--clb-fs-small); color: var(--clb-ink-soft); line-height: 1.7; max-width: 22em; margin: 0 auto; }
.why-tagline { margin-top: var(--clb-space-5); display: flex; align-items: center; justify-content: center; gap: 1rem; font-size: var(--clb-fs-micro); letter-spacing: 0.32em; text-transform: uppercase; color: var(--clb-ink-faint); text-align: center; }
.why-tagline::before, .why-tagline::after { content: ""; flex: 1 1 0; max-width: 220px; height: 1px; background: var(--clb-mist-deep); }

/* ---------- 应用领域 ---------- */
/* 列表/首页卡：16:9 主图 + 序号 + 标题 + 三行简介 + 「查看应用建议」 */
.app-card .card-body { gap: 0.45rem; }
.app-card__no { font-family: var(--clb-font-mono); font-size: var(--clb-fs-micro); letter-spacing: 0.14em; color: var(--clb-leaf); }
.app-card h3 { font-size: 1.1rem; }
.app-card__intro { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; line-height: 1.6; font-size: var(--clb-fs-small); color: var(--clb-ink-faint); }
.app-card__more { margin-top: auto; padding-top: 0.4rem; font-size: var(--clb-fs-small); font-weight: 500; color: var(--clb-pine); }
/* 列表页收尾的联系卡：深绿底 + 纤维纹样，与其它卡同尺寸，把「行业不在列表里」的人接到联系我们 */
.app-card--ask { position: relative; background: var(--clb-grad-pine); border-color: var(--clb-pine-deep); color: rgba(255, 255, 255, 0.82); justify-content: flex-end; min-height: 100%; }
.app-card--ask .ask-fiber { position: absolute; right: -12%; top: -8%; width: 80%; color: rgba(255, 255, 255, 0.16); pointer-events: none; }
.app-card--ask .card-body { position: relative; }
.app-card--ask .app-card__no { color: var(--clb-sprout); }
.app-card--ask h3 { color: var(--clb-white); font-size: 1.25rem; }
.app-card--ask p { color: rgba(255, 255, 255, 0.78); font-size: var(--clb-fs-small); line-height: 1.6; }
.app-card--ask .app-card__more { color: var(--clb-white); }
/* 详情页 */
.app-crumb { margin-top: var(--clb-space-4); }
.app-head { max-width: 820px; padding: var(--clb-space-2) 0 var(--clb-space-5); }
.app-head h1 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); margin: var(--clb-space-2) 0 var(--clb-space-3); overflow-wrap: anywhere; }
.app-lead { font-size: 1.05rem; color: var(--clb-ink-soft); line-height: 1.85; }
.app-detail { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--clb-space-5); align-items: start; }
.app-figure { margin: 0; }
.app-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--clb-radius-lg); box-shadow: var(--clb-shadow); }
/* 正文分节：序号胶囊 + 标题；「优先推荐」一节加底色成为页面的视觉重心，「说明」一节降为小字 */
.app-body { margin-top: var(--clb-space-5); counter-reset: sec; }
.app-sec { margin-bottom: var(--clb-space-5); }
.app-sec h2 { display: flex; align-items: center; gap: 0.7rem; font-size: 1.2rem; margin-bottom: var(--clb-space-3); overflow-wrap: anywhere; }
.app-sec h2::before { counter-increment: sec; content: counter(sec, decimal-leading-zero); flex: none; font-family: var(--clb-font-mono); font-size: var(--clb-fs-micro); letter-spacing: 0.1em; color: var(--clb-leaf); background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: 999px; padding: 0.2rem 0.55rem; }
.app-sec p, .app-sec li { color: var(--clb-ink-soft); line-height: 1.85; overflow-wrap: anywhere; }
.app-sec p { margin-bottom: 0.8em; }
.app-sec > :last-child { margin-bottom: 0; }
.app-sec ul, .app-sec ol { margin: 0 0 0.8em; padding-left: 1.3em; }
.app-sec li { margin-bottom: 0.4em; }
.app-sec strong { color: var(--clb-ink); font-weight: 600; }
.app-sec--pick { background: var(--clb-mist); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg); padding: var(--clb-space-4); }
.app-sec--pick h2::before { background: var(--clb-pine); border-color: var(--clb-pine); color: var(--clb-white); }
.app-sec--note { border-top: 1px dashed var(--clb-mist-deep); padding-top: var(--clb-space-3); }
.app-sec--note h2 { font-size: 1rem; }
.app-sec--note p { font-size: var(--clb-fs-small); color: var(--clb-ink-faint); }
.app-sec table { border-collapse: collapse; width: 100%; font-size: var(--clb-fs-small); margin: 0.4em 0 1em; }
.app-sec th, .app-sec td { border: 1px solid var(--clb-mist-deep); padding: 0.5em 0.75em; text-align: left; vertical-align: top; }
.app-sec th { background: var(--clb-white); color: var(--clb-ink); }
.app-sec--pick th { background: var(--clb-paper); }
/* 「A → B」这类选型口诀行 */
.arrow-list { list-style: none; padding-left: 0 !important; }
.arrow-list li { position: relative; padding-left: 1.1em; }
.arrow-list li::before { content: "›"; position: absolute; left: 0; color: var(--clb-sprout); font-weight: 700; }
/* 侧栏：全部领域索引（当前项高亮）+ 联系卡 */
.app-detail__aside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: var(--clb-space-4); }
.app-index { background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg); padding: var(--clb-space-3); }
.app-index h3 { font-size: var(--clb-fs-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--clb-ink-faint); margin: 0 0.6rem 0.6rem; font-family: var(--clb-font-body); }
.app-index ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; max-height: 62vh; overflow-y: auto; }
.app-index a { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px; font-size: var(--clb-fs-small); color: var(--clb-ink-soft); }
.app-index a .no { flex: none; font-family: var(--clb-font-mono); font-size: var(--clb-fs-micro); color: var(--clb-leaf); }
.app-index a:hover { background: var(--clb-paper); color: var(--clb-pine); }
.app-index a.on { background: var(--clb-mist); color: var(--clb-pine); font-weight: 600; }
.app-contact { background: var(--clb-grad-pine); color: var(--clb-white); border-radius: var(--clb-radius-lg); padding: var(--clb-space-4); display: flex; flex-direction: column; gap: 0.6rem; }
.app-contact b { font-size: 1.05rem; line-height: 1.5; }
.app-contact p { font-size: var(--clb-fs-small); color: rgba(255, 255, 255, 0.82); }
.app-contact .btn { background: var(--clb-white); color: var(--clb-pine); align-self: flex-start; margin-top: 0.3rem; }
.app-contact .btn:hover { background: var(--clb-mist); }
.app-related { margin-top: var(--clb-space-6); }

/* CTA 带 */
.cta-band { background: var(--clb-grad-pine); border-radius: var(--clb-radius-lg); color: var(--clb-white); padding: clamp(1.8rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: var(--clb-space-4); position: relative; overflow: hidden; }
.cta-band h2 { color: var(--clb-white); font-size: var(--clb-fs-h2); margin-bottom: 0.4rem; }
.cta-band p { color: rgba(255, 255, 255, 0.82); font-size: var(--clb-fs-small); max-width: 40em; }
.cta-band .btn { background: var(--clb-white); color: var(--clb-pine); margin-left: auto; }
.cta-band .btn:hover { background: var(--clb-mist); }
.cta-band .band-fiber { position: absolute; right: -30px; top: -40px; width: 300px; color: rgba(255, 255, 255, 0.14); pointer-events: none; }

/* ---------- 文章页（资讯详情/富文本） ---------- */
/* 正文列宽跟商品详情一致：不再自设 max-width，直接由外层 .container 决定（--clb-page-max 1280 减两侧留白 = 1216）。
   资讯/技术中心/商品三处渲染宽度相同，后台两个富文本编辑器的画布宽度才能是同一个数（见 SITE_RICH_TEXT_WIDTH）。 */
.article { margin: 0 auto; padding: var(--clb-space-5) 0 var(--clb-space-6); }
/* 标题是后台录入的自由文本，可能整条没有空格可断 */
.article-head h1 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); margin: var(--clb-space-2) 0; overflow-wrap: anywhere; }
.article-meta { display: flex; gap: 1rem; font-size: var(--clb-fs-small); color: var(--clb-ink-faint); border-bottom: 1px solid var(--clb-mist-deep); padding-bottom: var(--clb-space-3); margin-bottom: var(--clb-space-4); }
/* 封面按原图尺寸展示（img 只有 max-width，不放大）；正文列加宽到 1216 后，
   窄封面会在右侧留出一大片空白，居中才不显得贴着左边 */
.article-cover { border-radius: var(--clb-radius-lg); overflow: hidden; margin-bottom: var(--clb-space-4); }
.article-cover img { margin-inline: auto; }
/* 富文本是站上最大的一片自由内容（后台录入）：长 URL、无空格的英文长词都可能出现，
   而它下面的 pre 已经单独给了 overflow-x:auto，正文段落此前没有任何保护。 */
.rich-text { color: var(--clb-ink-soft); overflow-wrap: anywhere; }
.rich-text h1, .rich-text h2, .rich-text h3 { margin: 1.4em 0 0.6em; }
.rich-text p { margin: 0 0 1em; }
.rich-text ul, .rich-text ol { margin: 0 0 1em; padding-left: 1.6em; }
/* 图片不能跟着全局的 img{display:block} 走：编辑器里图片是行内节点
   （wangEditor 对编辑区强制 display:inline!important），同一段落里的两张图并排；
   前台一旦变成块级，同一份 HTML 就被排成上下两张——后台所见与前台所得不一致。
   用 inline-block 而不是 inline：既保住并排，又让上下外边距与圆角照常生效。 */
/* ⚠️ 纵向留白交给承载段落（.rich-text p 的 margin-bottom），这里只留左右间距：
   行内级盒子的外边距**不与任何东西折叠**，块级时代那句 `margin: 1em 0` 会跟 p 的边距相加，
   把所有已发布正文里图片的上下留白直接翻倍。 */
.rich-text img { display: inline-block; vertical-align: top; border-radius: var(--clb-radius); margin: 0; }
/* 编辑器里图片之间靠空白节点分隔，行内元素之间的空白会塌成一个空格，这里补一点呼吸感 */
/* 并排图之间的间距。⚠️ max-width 必须扣掉这段间距：两张图各被 max-width:100% 夹到列宽后，
   它们会各占一行，而第二张仍带着 margin-left —— 于是 8px 的间距变成纯溢出
   （390px 下实测 366 > 358，真实数据即触发，无需任何极端内容）。
   只收窄「跟在图后面的图」，单张图仍占满列宽，桌面端并排的观感不变。 */
.rich-text img + img { margin-left: 0.5em; max-width: calc(100% - 0.5em); }
/* 编辑器的代码块（正文里粘代码/配方时会用到），前台原本没有样式 */
.rich-text pre { background: var(--clb-mist); border-radius: var(--clb-radius); padding: 0.9em 1.1em; overflow-x: auto; margin: 1em 0; }
.rich-text pre code, .rich-text code { font-family: var(--clb-font-mono); font-size: 0.92em; }
/* 富文本里插入的附件（技术资料等）：地址形态是 /f/{id}?dl=1（服务端据此强制下载）。
   链接节点在编辑器里只保留 href/target，class 存不住，所以只能按地址识别；
   样式与技术资料页的 .attach-chip 合一（见下方那条规则），别再各写一份、各自漂移。 */
.rich-text a[href*="?dl="] { margin: 0.2rem 0.4rem 0.2rem 0; }
.rich-text a[href*="?dl="]::before { content: "\2913"; font-size: 0.95em; line-height: 1; }
.rich-text blockquote { border-left: 3px solid var(--clb-sprout); padding-left: 1em; color: var(--clb-ink-faint); margin: 1em 0; }
.rich-text table { border-collapse: collapse; width: 100%; margin: 1em 0; font-size: var(--clb-fs-small); }
.rich-text th, .rich-text td { border: 1px solid var(--clb-mist-deep); padding: 0.5em 0.8em; }
.rich-text th { background: var(--clb-mist); color: var(--clb-ink); }

/* 附件 chip（技术资料下载） */
.attach-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
/* 下载胶囊：技术资料页的附件与富文本里插入的附件共用一套值 */
.attach-chip,
.rich-text a[href*="?dl="] { display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--clb-mist-deep); background: var(--clb-white); border-radius: 999px; padding: 0.35rem 0.9rem; font-size: var(--clb-fs-small); color: var(--clb-pine); }
.attach-chip:hover,
.rich-text a[href*="?dl="]:hover { border-color: var(--clb-leaf); background: var(--clb-mist); }
.attach-chip svg { width: 15px; height: 15px; }
/* 技术中心详情页的下载区：正文之后、返回链接之前 */
.article-attach { margin-top: var(--clb-space-5); padding-top: var(--clb-space-4); border-top: 1px solid var(--clb-mist-deep); }
.article-attach h3 { font-size: var(--clb-fs-h3); margin-bottom: var(--clb-space-3); }
.article-back { margin-top: var(--clb-space-5); font-size: var(--clb-fs-small); }

/* ---------- 列表分页 ---------- */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: var(--clb-space-5); }
.pagination a, .pagination span { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--clb-mist-deep); font-size: var(--clb-fs-small); color: var(--clb-ink-soft); padding: 0 0.6rem; }
.pagination a:hover { border-color: var(--clb-leaf); color: var(--clb-pine); }
.pagination .current { background: var(--clb-pine); border-color: var(--clb-pine); color: var(--clb-white); }

/* ---------- 表单（留言/定制） ---------- */
.form-panel { background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--clb-shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--clb-space-3); }
.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: var(--clb-fs-small); color: var(--clb-ink); }
.form-field label em { color: var(--clb-danger); font-style: normal; }
.form-field input, .form-field textarea {
  font: inherit; color: var(--clb-ink); background: var(--clb-paper);
  border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius); padding: 0.6rem 0.85rem;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--clb-leaf); box-shadow: 0 0 0 3px rgba(63, 143, 95, 0.15); }
.form-field textarea { min-height: 130px; resize: vertical; }
.form-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--clb-space-3); }
/* 表单提交结果：文案来自服务端（`res.result.desc`），异常时可能是一长串无空格的内部消息。
   本文件此前没有任何断行保护，全靠 body 的 overflow-x:clip 兜着——那是把溢出裁掉，不是修好。 */
.form-tip { font-size: var(--clb-fs-small); overflow-wrap: anywhere; }
.form-tip.ok { color: var(--clb-pine); }
.form-tip.err { color: var(--clb-danger); }

/* ---------- 联系我们 ---------- */
.contact-layout { display: grid; grid-template-columns: 5fr 7fr; gap: var(--clb-space-5); align-items: start; }
.contact-card { background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg); padding: var(--clb-space-4); display: flex; flex-direction: column; gap: var(--clb-space-3); }
.contact-company { font-family: var(--clb-font-display); font-size: var(--clb-fs-body); font-weight: 600; color: var(--clb-ink); line-height: 1.5; }
/* 联系人信息：标签一列、内容一列。dt/dd 直接是 dl 的网格子项（按行判空用的是 th:block，不留包裹元素），
   标签列按本语言最长的那个自适应——中文最长「联系电话」、英文最长「Contact person」，宽度差一倍，写死哪个都有一边不对。
   内容列 minmax(0,1fr) + overflow-wrap:anywhere：邮箱、地址这类长串在格内断行，不把卡片撑宽。 */
.contact-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 1.25rem; row-gap: 0.65rem; font-size: var(--clb-fs-small); line-height: 1.6; }
.contact-list dt { color: var(--clb-ink-faint); }
.contact-list dd { color: var(--clb-ink); overflow-wrap: anywhere; }
/* 电话/邮箱/WhatsApp/LinkedIn 可点：站内链接色 pine 与正文 ink 太接近，单靠颜色看不出能点，补一条浅绿下划线 */
.contact-list a { text-decoration: underline; text-decoration-color: var(--clb-sprout); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.contact-list a:hover { text-decoration-color: currentColor; }
/* 官方店铺：整页唯一的非绿色块，刻意的——它们是唯一会把人带离本站的入口。
   底色取各平台的品牌色、字形反白，与手机上的 App 图标同一观感，一眼认得出是哪家。 */
.contact-stores { border-top: 1px solid var(--clb-mist-deep); padding-top: var(--clb-space-3); }
.contact-stores h4 { font-size: var(--clb-fs-small); color: var(--clb-ink); margin-bottom: 0.75rem; }
.store-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
/* min-width 4em = 四个汉字宽：「阿里巴巴」比图标宽、「淘宝」比图标窄，不给统一宽度的话三个图标间距不等 */
.store-link { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; min-width: 4em; font-size: var(--clb-fs-small); color: var(--clb-ink-soft); }
.store-link:hover { color: var(--clb-pine); }
.store-link__icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  color: var(--clb-white); background: var(--store-brand); transition: box-shadow 0.2s ease;
}
.store-link__icon svg { width: 28px; height: 28px; }
.store-link:hover .store-link__icon { box-shadow: 0 6px 16px -6px var(--store-brand); }
.store-link--alibaba { --store-brand: #ff6a00; }
.store-link--taobao { --store-brand: #e94f20; }
.store-link--xiaohongshu { --store-brand: #ff2442; }

/* ---------- 关于我们 ---------- */
.about-lead { font-family: var(--clb-font-display); font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--clb-ink); line-height: 1.9; max-width: 44em; }
/* 图文两栏（公司简介：外景 | 文字；我们为您提供：五步 | 车间实景，左右镜像）。
   两列等宽、垂直居中；≤960 叠成一列（照 DOM 顺序） */
.about-intro, .provide { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.about-intro__text h2 { font-size: var(--clb-fs-h2); margin-bottom: var(--clb-space-3); }
.about-intro__text p { color: var(--clb-ink-soft); }
/* 实景照片的取景框：圆角大图 + 右下错位一层浅色底板（本站卡片/纹样之外的第二个签名元素），下方一条短线引出说明。
   底板往右下各探出 14px：容器两侧留白最小 16px，窄屏也不会顶出视口。 */
.photo-frame { position: relative; margin: 0; }
.photo-frame::before { content: ""; position: absolute; inset: 14px -14px -14px 14px; border-radius: var(--clb-radius-lg); background: var(--clb-mist); border: 1px solid var(--clb-mist-deep); }
/* img 带 width/height 属性（防布局跳动），属性 height 会压过 aspect-ratio，必须显式 height:auto */
.photo-frame img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--clb-radius-lg); box-shadow: var(--clb-shadow-lift); }
/* 图注 = 一行标题 + 一行说明，短线对齐标题行 */
.photo-frame figcaption { position: relative; margin-top: 1.1rem; padding-left: 2rem; }
.photo-frame figcaption::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 22px; height: 2px; background: var(--clb-leaf); }
.photo-frame figcaption b { display: block; color: var(--clb-ink); font-size: 1rem; font-weight: 600; }
.photo-frame figcaption span { display: block; margin-top: 0.25rem; font-size: var(--clb-fs-small); color: var(--clb-ink-faint); line-height: 1.65; }
/* 我们专注：四类材料各一张卡（序号 + 品类代号 + 名称 + 说明）。
   外壳走 .card（栅格走 card-grid cols-4），这里只写差异——卡片的悬停抬升只能有一份，
   否则 prefers-reduced-motion 那条按类名点名的覆盖要跟着长，漏一个就是无声的无障碍回归。 */
.focus-card { position: relative; padding: var(--clb-space-4); gap: 0.5rem; }
/* 序号是这张卡唯一的装饰元素：第 4 项没有品类代号，靠它撑住四张卡的视觉节奏 */
.focus-card__no { position: absolute; right: var(--clb-space-4); top: var(--clb-space-3); font-family: var(--clb-font-mono); font-size: 1.6rem; font-weight: 600; line-height: 1; color: var(--clb-mist-deep); }
.focus-card__code b { display: inline-block; font-family: var(--clb-font-mono); font-size: var(--clb-fs-small); font-weight: 600; letter-spacing: 0.04em; color: var(--clb-pine); background: var(--clb-mist); border-radius: 999px; padding: 0.16rem 0.62rem; }
/* 第 4 张卡的 code 键是空值（那一类没有品类代号）：渲染成一枚不可见的等高胶囊占位，
   同一行四张卡的标题顶边才齐平。⚠️ 高度必须像这样由真实字体度量撑出来，不能给代号行定一个
   手调高度去猜胶囊有多高——猜差几像素标题就错开几像素，且改字号或内边距后无人会想起来重调。 */
.focus-card__code b:empty { visibility: hidden; }
.focus-card__code b:empty::before { content: "\00a0"; }
.focus-card h3 { font-size: 1.08rem; }
.focus-card p { line-height: 1.75; }
/* 服务对象：四张卡下的一条细带。它只是补充说明「谁在用」，不该和四类材料抢版面，所以不给卡片外壳 */
.serve-band { margin-top: var(--clb-space-4); padding-top: var(--clb-space-4); border-top: 1px solid var(--clb-mist-deep); display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.1rem; }
.serve-band__label { flex: none; font-size: 0.95rem; font-weight: 600; color: var(--clb-ink); }
.serve-band .chip-row { min-width: 0; }
.serve-band p { flex: 1 1 22em; min-width: 0; font-size: var(--clb-fs-small); color: var(--clb-ink-faint); line-height: 1.7; }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chip { display: inline-block; border: 1px solid var(--clb-mist-deep); background: var(--clb-paper); color: var(--clb-pine); border-radius: 999px; padding: 0.22rem 0.8rem; font-size: var(--clb-fs-small); font-weight: 500; overflow-wrap: anywhere; }
/* 我们为您提供的五步时间线（版式与公司简介共用 .about-intro 那条两栏规则） */
.provide-steps { list-style: none; margin: 0; padding: 0; --dot: 35px; }
.provide-steps li { position: relative; display: flex; gap: 1rem; padding-bottom: var(--clb-space-4); }
.provide-steps li:last-child { padding-bottom: 0; }
/* 序号圆点之间一条竖线，读起来是一条自上而下的时间线。位置全部由 --dot 推出：
   left = 圆点半径 − 线宽的一半（让 1px 的线正对圆心），top = 圆点底边再空一点 */
.provide-steps li:not(:last-child)::before { content: ""; position: absolute; left: calc(var(--dot) / 2 - 0.5px); top: calc(var(--dot) + 0.25rem); bottom: 4px; width: 1px; background: var(--clb-mist-deep); }
.provide-steps__no { flex: none; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--clb-white); border: 1px solid var(--clb-mist-deep); color: var(--clb-pine); font-family: var(--clb-font-mono); font-size: var(--clb-fs-small); font-weight: 600; display: grid; place-items: center; }
.provide-steps h3 { font-size: 1.02rem; margin-bottom: 0.22rem; }
.provide-steps p { font-size: var(--clb-fs-small); color: var(--clb-ink-faint); line-height: 1.7; }
/* 为什么选择我们：淡绿底 + 3x2 白卡（版式按 docs/clb/select_cellubio.png），末尾接全站询单条 */
.whyus-head { max-width: 46em; margin-bottom: var(--clb-space-5); }
.whyus-head h2 { font-size: var(--clb-fs-h2); margin: var(--clb-space-2) 0 var(--clb-space-3); }
.whyus-head p { color: var(--clb-ink-soft); line-height: 1.85; }
/* 外壳走 .card + .card-link（整卡可点、标题才有链接感——资讯卡与应用领域卡是同一套），
   栅格走 card-grid cols-3；这里只写差异 */
.whyus-card { padding: var(--clb-space-4); gap: 0.7rem; }
.whyus-card__icon { width: 46px; height: 46px; border-radius: 12px; background: var(--clb-mist); display: grid; place-items: center; }
.whyus-card__icon svg { width: 26px; height: 26px; color: var(--clb-leaf); }
.whyus-card h3 { font-size: 1.12rem; }
.whyus-card p { line-height: 1.8; }
/* 箭头是真链接：读完这句主张后最想去的那一页（产品中心/技术中心/应用领域/联系我们），不做装饰性死箭头 */
.whyus-card::after { content: "\2192"; margin-top: auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--clb-mist-deep); color: var(--clb-pine); font-size: 0.95rem; display: grid; place-items: center; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.whyus-card:hover::after { background: var(--clb-pine); border-color: var(--clb-pine); color: var(--clb-white); }
.whyus .cta-band { margin-top: var(--clb-space-5); }

/* ---------- 页脚 ---------- */
.site-footer { background: var(--clb-footer); color: rgba(255, 255, 255, 0.78); margin-top: var(--clb-space-6); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.6fr; gap: var(--clb-space-5); padding: var(--clb-space-6) 0 var(--clb-space-4); }
.footer-brand .brand-zh { color: var(--clb-white); }
.footer-brand p { font-size: var(--clb-fs-small); color: rgba(255, 255, 255, 0.55); margin-top: 0.6rem; max-width: 26em; }
.site-footer h4 { color: var(--clb-white); font-size: var(--clb-fs-small); letter-spacing: 0.1em; margin-bottom: var(--clb-space-3); font-family: var(--clb-font-body); }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; font-size: var(--clb-fs-small); }
.footer-links a { color: rgba(255, 255, 255, 0.72); }
.footer-links a:hover { color: var(--clb-white); }
.footer-contact { font-size: var(--clb-fs-small); display: flex; flex-direction: column; gap: 0.45rem; color: rgba(255, 255, 255, 0.72); }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.12); padding: var(--clb-space-3) 0; font-size: var(--clb-fs-micro); color: rgba(255, 255, 255, 0.45); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; }
/* ICP 备案号：三项 space-between 后它落在底栏中央（工信部要求主页底部中央位置）。
   全局 a 是深绿的 --clb-pine，在深色页脚上等于看不见，故显式继承底栏文字色。 */
.footer-icp a { color: inherit; }
.footer-icp a:hover { color: rgba(255, 255, 255, 0.85); text-decoration: underline; }
/* 公安备案：徽标与编号同处一个链接内，徽标不反白（它本身是彩色警徽，不是单色图标） */
.footer-police a { display: inline-flex; align-items: center; gap: 0.4rem; }
.footer-police img { flex: none; display: block; }

/* ---------- 悬浮客服入口（只中文站渲染） ---------- */
/* 定位吃安全区（iOS 底部横条），z-index 高于 sticky 头（50）——这类挂件按惯例浮在最上层 */
.cs-widget { position: fixed; z-index: 60; right: clamp(14px, 2.4vw, 28px); bottom: calc(clamp(14px, 3vh, 30px) + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: flex-end; gap: 0.7rem; }
.cs-btn {
  width: 58px; height: 58px; border: none; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--clb-grad-pine); color: var(--clb-white);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  box-shadow: 0 6px 18px rgba(23, 59, 43, 0.28); transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.cs-btn svg { width: 22px; height: 22px; }
.cs-btn span { font-size: 0.62rem; letter-spacing: 0.06em; line-height: 1; }
.cs-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(23, 59, 43, 0.34); }
.cs-btn:focus-visible { outline: 2px solid var(--clb-sprout); outline-offset: 3px; }
/* 面板常驻 DOM，用 visibility+opacity 收起：display:none 不能过渡，而 visibility:hidden 同时把它移出无障碍树。
   ⚠️ visibility 的过渡要延到淡出结束，否则一开始淡出就不可见了（同 .hero-slide-img 那条）。 */
.cs-panel {
  position: relative; width: 232px; max-width: calc(100vw - 28px);
  background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg);
  box-shadow: var(--clb-shadow-lift); padding: var(--clb-space-4) var(--clb-space-3) var(--clb-space-3);
  text-align: center; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.cs-widget.open .cs-panel { opacity: 1; visibility: visible; transform: none; transition: opacity 0.18s ease, transform 0.18s ease; }
/* 指向按钮的小三角（贴右下，与按钮同一垂直线） */
.cs-panel::after { content: ""; position: absolute; right: 22px; bottom: -7px; width: 12px; height: 12px; background: var(--clb-white); border-right: 1px solid var(--clb-mist-deep); border-bottom: 1px solid var(--clb-mist-deep); transform: rotate(45deg); }
.cs-close { position: absolute; top: 4px; right: 6px; width: 26px; height: 26px; border: none; background: none; cursor: pointer; color: var(--clb-ink-faint); font-size: 1.15rem; line-height: 1; border-radius: 6px; }
.cs-close:hover { background: var(--clb-mist); color: var(--clb-ink); }
.cs-title { font-weight: 600; color: var(--clb-ink); font-size: 0.95rem; margin-bottom: 0.7rem; }
.cs-qr { display: block; width: 176px; height: 176px; margin: 0 auto; border-radius: 8px; background: var(--clb-white); }
.cs-tip { margin-top: 0.7rem; font-size: var(--clb-fs-micro); color: var(--clb-ink-faint); line-height: 1.6; }

/* ---------- 进场动效（尊重 reduced-motion） ---------- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .hero-slide-img { transition: none; }
  .card:hover, .btn-primary:hover, .cs-btn:hover { transform: none; }
  .cs-panel { transition: none; }
}

/* ---------- 响应式 ---------- */
@media (max-width: 960px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); row-gap: var(--clb-space-5); }
  .why-item + .why-item::before { display: none; }
  /* 图文两栏叠成一列：简介图在前、五步流程图在后（照 DOM 顺序） */
  .about-intro, .provide { grid-template-columns: 1fr; }
  /* 应用领域详情：侧栏落到正文之下，索引不再限高 */
  .app-detail { grid-template-columns: 1fr; }
  .app-detail__aside { position: static; }
  .app-index ol { max-height: none; }
  .contact-layout { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .site-nav {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    background: var(--clb-paper); border-bottom: 1px solid var(--clb-mist-deep);
    flex-direction: column; align-items: flex-start; padding: var(--clb-space-3) var(--clb-page-pad); gap: 0.8rem;
  }
  .site-nav.open { display: flex; }
  .nav-toggle { display: block; }
}
@media (max-width: 680px) {
  .cs-btn { width: 50px; height: 50px; }
  .cs-btn svg { width: 19px; height: 19px; }
  .cs-btn span { font-size: 0.56rem; }
  .cs-qr { width: 160px; height: 160px; }
  .params-table th, .params-table td { padding: 0.5rem 0.6rem; }
  .why-grid { grid-template-columns: 1fr; }
  .why-head h2::before, .why-head h2::after { width: 26px; }
  .why-tagline { letter-spacing: 0.18em; }
  .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-band .btn { margin-left: 0; }
}

/* ---------- 产品中心（M2） ---------- */
/* 三行共用一个标签列：宽度取最长的那个标签（grid 的 max-content），所以中文「按功能」
   与英文「By function」都不用各自调宽——原来写死 width:4.2em 是按三个汉字量的，
   英文站上标签被折成两行。行本身用 display:contents 摊平成网格项。 */
.filter-panel { background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg); padding: var(--clb-space-3) var(--clb-space-4); margin-bottom: var(--clb-space-4); display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.6rem 0.8rem; align-items: baseline; }
.filter-row { display: contents; }
.filter-label { font-size: var(--clb-fs-small); color: var(--clb-ink-faint); white-space: nowrap; }
/* 搜索行有输入框和按钮两个控件，必须自己成一格，否则按钮会掉到下一行的标签列 */
.filter-search { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 0.35rem 0.7rem; }
/* 胶囊尽量不断行：英文分类名很长，断在词中间会让整排筛选看起来碎掉；
   容器本来就 flex-wrap，放得下的胶囊会整枚换到下一行——这一点靠 flex 的换行规则天然成立
   （换行看的是 max-content，够不下就整枚下移），不需要 white-space:nowrap 来保证。
   ⚠️ 原来写死 nowrap 反而漏了一种情况：**单枚胶囊比容器还宽时「整枚换行」救不了它**，
   它会直接顶破筛选区（390px 下后台录入一个长分类名即触发）。
   改成常规换行 + anywhere 后，断行只发生在「这枚胶囊单独占一行仍放不下」时，
   而那种情况下溢出显然更糟；短胶囊的观感一个像素没变。 */
.filter-chips a { font-size: var(--clb-fs-small); color: var(--clb-ink-soft); padding: 0.15rem 0.7rem; border-radius: 999px; overflow-wrap: anywhere; }
/* 分类逐层下钻：一层一行，下层缩进并降一档字色，层级关系靠位置表达而不是靠前缀符号 */
.cat-nav { display: flex; flex-direction: column; gap: 0.3rem; }
.cat-nav .cat-sub { padding-left: 0.9rem; border-left: 2px solid var(--clb-mist-deep); }
.cat-nav .cat-sub a { color: var(--clb-ink-faint); }
.filter-chips a:hover { background: var(--clb-mist); color: var(--clb-pine); }
.filter-chips a.on { background: var(--clb-pine); color: var(--clb-white); }
.filter-input { font: inherit; font-size: var(--clb-fs-small); border: 1px solid var(--clb-mist-deep); border-radius: 999px; padding: 0.3rem 0.9rem; background: var(--clb-paper); min-width: 220px; }
.filter-input:focus { outline: none; border-color: var(--clb-leaf); }
.btn-sm { padding: 0.3rem 1rem; font-size: var(--clb-fs-small); }
.empty-tip { color: var(--clb-ink-faint); padding: var(--clb-space-5) 0; text-align: center; }

/* ---------- 商品详情 ---------- */
.breadcrumb { display: flex; gap: 0.5rem; font-size: var(--clb-fs-small); color: var(--clb-ink-faint); margin-bottom: var(--clb-space-4); flex-wrap: wrap; }
.breadcrumb b { color: var(--clb-ink); font-weight: 600; }
.pd-layout { display: grid; grid-template-columns: 5fr 6fr; gap: var(--clb-space-5); align-items: start; }
.pd-gallery { position: sticky; top: 84px; }
/* 主图按 800×800 的正方形口径适配：容器 1:1，图片 contain 留白，非正方来图不裁切不变形 */
.pd-main { aspect-ratio: 1/1; max-width: 540px; background: var(--clb-white); border: 1px solid var(--clb-mist-deep); border-radius: var(--clb-radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.pd-main img { width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
.pd-main svg { width: 100%; height: 100%; color: var(--clb-sprout); opacity: 0.8; }
.pd-thumbs { display: flex; gap: 0.5rem; margin-top: 0.6rem; flex-wrap: wrap; }
.pd-thumbs img { width: 64px; height: 64px; object-fit: contain; background: var(--clb-white); border-radius: 8px; border: 2px solid var(--clb-mist-deep); cursor: pointer; padding: 2px; }
.pd-thumbs img:hover { border-color: var(--clb-sprout); }
.pd-thumbs img.on { border-color: var(--clb-leaf); }
/* 商品名同样是后台录入的自由文本 */
.pd-buybox h1 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin: 0.3rem 0; overflow-wrap: anywhere; }
.pd-subtitle { color: var(--clb-ink-faint); font-size: var(--clb-fs-small); margin-bottom: var(--clb-space-3); }
.pd-price { display: flex; align-items: baseline; gap: 0.5rem; background: var(--clb-mist); border-radius: var(--clb-radius); padding: 0.8rem 1rem; margin-bottom: var(--clb-space-3); }
.pd-price .cur { color: var(--clb-pine); }
.pd-price b { font-family: var(--clb-font-display); font-size: 1.9rem; color: var(--clb-pine); }
.pd-price s { color: var(--clb-ink-faint); font-size: var(--clb-fs-small); }
/* 未定价 SKU：价格位显示「联系厂家」，字号收小以免撑破价格条 */
.pd-price b.is-inquiry { font-size: 1.25rem; letter-spacing: 0.02em; }
.pd-dims { display: flex; flex-direction: column; gap: 0.8rem; margin-bottom: var(--clb-space-3); }
.pd-dim { display: flex; gap: 0.8rem; align-items: baseline; }
.pd-dim__name { flex: none; width: 4.2em; font-size: var(--clb-fs-small); color: var(--clb-ink-faint); }
.pd-dim__vals { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pd-dim__vals button { font: inherit; font-size: var(--clb-fs-small); padding: 0.32rem 0.85rem; border-radius: 8px; border: 1px solid var(--clb-mist-deep); background: var(--clb-white); color: var(--clb-ink-soft); cursor: pointer; }
.pd-dim__vals button:hover { border-color: var(--clb-leaf); color: var(--clb-pine); }
.pd-dim__vals button.on { border-color: var(--clb-pine); background: var(--clb-mist); color: var(--clb-pine); font-weight: 600; }
.pd-dim__vals button.dis { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.pd-skucode { font-size: var(--clb-fs-small); color: var(--clb-ink-faint); margin-bottom: var(--clb-space-3); }
.pd-skucode span:last-child { font-family: var(--clb-font-mono); color: var(--clb-ink); }
.pd-buy-row { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.pd-buy-row .btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none !important; }
/* 加购/立即购买的结果提示，文案同样来自服务端（product.js 的 showBuyMsg） */
.pd-soon { font-size: var(--clb-fs-micro); color: var(--clb-ink-faint); margin-top: 0.6rem; overflow-wrap: anywhere; }
.pd-section { margin-top: var(--clb-space-6); }
.pd-section h2 { font-size: 1.25rem; margin-bottom: var(--clb-space-3); padding-left: 0.7rem; border-left: 3px solid var(--clb-leaf); }
/* 产品简介：后台是多行文本框，换行按录入原样保留（pre-line 只保留换行、不保留缩进空白）。
   ⚠️ 不要在这里加 max-width：详情页的简介/基本信息/参数/富文本详情四块必须同宽（都由外层 .container 决定），
   给简介单独设一个「易读宽度」会让它比下面三块窄一截，四块左对齐右不齐，很显眼。
   这个宽度同时是后台富文本编辑器的画布宽度（SITE_RICH_TEXT_WIDTH），改一处要三处都对上。 */
.pd-brief { white-space: pre-line; overflow-wrap: anywhere; }
.table-wrap { overflow-x: auto; }
/* 基本信息表 / 参数表：两列（名称 | 值）。
   ⚠️ 名称列不能写死 220px：手机上内容列只有 358px，名称吃掉 220 后值只剩 100 来像素——
   「标题很长、内容很短」。桌面保持 220px，≤960px 改按表宽 32%，值列永远拿到 2/3 以上；
   table-layout:fixed 让这个比例不被长内容撑歪，长值在格内换行（anywhere 连无空格的英文长串也断得开）。
   ⚠️ 不要写 width:min(220px, 34%)：WebKit 对表格单元格的 width 不认 min()/calc 混合单位，整列退化成均分（实测 50/50）。 */
.params-table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: var(--clb-fs-small); background: var(--clb-white); }
.params-table th, .params-table td { border: 1px solid var(--clb-mist-deep); padding: 0.55rem 0.9rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.params-table th { background: var(--clb-mist); color: var(--clb-ink); width: 220px; font-weight: 600; }

@media (max-width: 960px) {
  .pd-layout { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .params-table th { width: 32%; }
}

/* ---- M3 购买区数量框 ---- */
.pd-qty { display: inline-flex; align-items: center; gap: .45rem; font-size: var(--clb-fs-small); color: var(--clb-ink-soft); }
.pd-qty input { width: 4.2rem; padding: .5rem .55rem; border: 1px solid var(--clb-mist-deep); border-radius: 8px; font: inherit; color: var(--clb-ink); background: #fff; }
.pd-qty input:focus { outline: 2px solid var(--clb-sprout); outline-offset: 1px; }

/* ⚠️ iOS Safari：字号 <16px 的输入框聚焦时会自动放大整页且保持放大态（真机特有，模拟器无感）。
   移动端所有输入控件一律 16px，从源头消除触发；桌面不受影响。 */
@media (max-width: 720px) {
  .form-field input, .form-field textarea, .filter-input, .pd-qty input { font-size: 16px; }
  /* 窄屏标签与胶囊上下排，省出整行宽度给长分类名 */
  .filter-panel { grid-template-columns: 1fr; gap: 0.2rem; }
  .filter-label { margin-top: 0.5rem; }
}