/* ==========================================================================
Ablumir 前台 · 设计增强层 front.css
--------------------------------------------------------------------------
与 ablumir.css 的关系：
ablumir.css = 基础设计系统（Token + 组件）
front.css = 视觉增强层，**只做加法，不覆盖 Token 与既有组件语义**
加载顺序：ablumir.css → front.css（本文件后者优先）
覆盖要素：首屏科学视觉层 / 信任徽章带 / 分区背景纹理 / 分类彩色标识 /
卡片深度与悬停 / 滚动入场动效 / 移动端浮条玻璃态与客服浮窗
========================================================================== */
/* ==========================================================================
0. 基础件
========================================================================== */
.mob-toggle {
display: none; width: 40px; height: 40px; border: 1px solid var(--line-default);
border-radius: var(--r-btn); background: #fff; color: var(--text-primary);
align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.mob-toggle:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
/* 面包屑 */
.crumb-bar { border-bottom: 1px solid var(--line-default); background: var(--bg-subtle); }
.crumb-bar .wrap { display: flex; align-items: center; gap: 8px; height: 46px; font-size: var(--fs-body-s); color: var(--text-secondary); overflow-x: auto; white-space: nowrap; }
.crumb-bar a { color: var(--text-secondary); }
.crumb-bar a:hover { color: var(--brand-primary); }
.crumb-bar .sep { color: var(--text-disabled); }
.crumb-bar b { color: var(--text-primary); font-weight: 600; }
/* 分页 */
.pg { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 28px 0 8px; }
.pg__i {
min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line-default);
border-radius: var(--r-btn); background: #fff; display: inline-flex; align-items: center;
justify-content: center; font-size: var(--fs-body-s); color: var(--text-primary);
transition: all .16s var(--ease);
}
.pg__i:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pg__i.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 700; }
.pg__i.is-dis { color: var(--text-disabled); background: var(--bg-subtle); cursor: not-allowed; }
.pg__info { margin-left: 10px; font-size: var(--fs-body-s); color: var(--text-secondary); }
/* 区块标题右侧动作区 */
.sec-head__right { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }
.sec-head__txt { max-width: 760px; }
/* 空态 */
.empty-state { text-align: center; padding: 64px 24px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); background: var(--bg-subtle); }
.empty-state__ico { width: 68px; height: 68px; margin: 0 auto 14px; border-radius: 50%; background: #fff; border: 1px solid var(--line-default); display: flex; align-items: center; justify-content: center; color: var(--brand-primary); }
.empty-state h3 { font-size: var(--fs-h4); margin-bottom: 6px; }
.empty-state p { color: var(--text-secondary); font-size: var(--fs-body-s); margin-bottom: 16px; }
/* 产品图位：无实拍图时用品牌化矢量示意 */
.pcard__art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* 真实产品图：contain —— 实验图（WB/IHC/IF 照片）不能被裁掉关键条带，
宁可上下留白（卡片底色是品牌浅渐变，留白不难看），也绝不压扁或裁切。 */
.pcard__art > .pcard__img {
display: block; width: 100%; height: 100%;
object-fit: contain; padding: 10px;
transition: transform .25s var(--ease);
}
.pcard:hover .pcard__art > .pcard__img { transform: scale(1.04); }
.ab-glyph { display: block; transition: transform .3s var(--ease); }
.pcard:hover .ab-glyph { transform: scale(1.06); }
/* 页脚 slogan */
.footer-brand .slogan {
font-family: var(--ff-display); font-weight: 900; color: #fff;
letter-spacing: .02em; margin-bottom: 12px; font-size: 18px;
}
/* 深色底上的次级按钮（首屏 / 深色宣传带通用） */
.btn--on-dark {
background: rgba(255, 255, 255, .14); color: #fff;
border: 1px solid rgba(255, 255, 255, .40);
}
.btn--on-dark:hover { background: rgba(255, 255, 255, .24); border-color: rgba(255, 255, 255, .62); color: #fff; }
/* 资讯 / 方案栏目标题 */
.feed__h { font-size: var(--fs-h4); margin-bottom: 6px; }
/* 促销标签色 */
.tag--accent { background: var(--brand-accent-light); color: var(--brand-accent); border-color: rgba(192, 0, 0, .18); }
/* 分类卡底部说明行 */
.cat-card__apps { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: auto; }
.cat-card__apps b { color: var(--brand-primary); font-weight: 900; font-family: var(--ff-display); }
/* 四大索引小色块 */
.index4__col h3 .bul { display: inline-block; width: 4px; height: 18px; border-radius: 2px; margin-right: 8px; vertical-align: -3px; }
.index4__col h3 { display: flex; align-items: center; }
/* 首屏纵向内边距（.hero 高度改为 auto 后需要自行撑开） */
.hero__slide > .wrap { padding-top: 58px; padding-bottom: 58px; position: relative; z-index: 3; }
/* ==========================================================================
1. 首屏科学视觉层
原首屏：单色渐变 + 文字 + 一个右下角光斑，视觉上"平"。
升级后：渐变底 + 点阵网格 + 分子线描（双层，不同透明度）+ 主光晕 + 数据徽章浮层。
全部用 CSS/SVG 实现，零图片请求 —— 不增加首屏字节负担。
========================================================================== */
.hero { height: auto; min-height: 400px; max-height: 520px; }
.hero__slide { overflow: hidden; }
/* 点阵网格 */
.hero__slide::before {
content: ""; position: absolute; inset: 0;
background-image:
radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px),
radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px);
background-size: 34px 34px, 34px 34px;
background-position: 0 0, 17px 17px;
-webkit-mask-image: linear-gradient(105deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .25) 46%, transparent 72%);
mask-image: linear-gradient(105deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, .25) 46%, transparent 72%);
pointer-events: none;
}
/* 主光晕 */
.hero__slide::after {
content: ""; position: absolute; right: -120px; top: -160px;
width: 620px; height: 620px; border-radius: 50%;
background:
radial-gradient(circle, rgba(120, 220, 180, .20) 0%, rgba(120, 220, 180, 0) 62%),
radial-gradient(circle at 62% 68%, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 55%);
pointer-events: none;
}
/* 分子线描装饰层（由 PHP 注入 .hero__art，内为内联 SVG） */
.hero__art {
position: absolute; right: 0; top: 0; bottom: 0; width: 52%; z-index: 1;
pointer-events: none; opacity: .5; overflow: hidden;
}
.hero__art svg { position: absolute; right: -3%; top: 50%; transform: translateY(-50%); height: 132%; width: auto; }
.hero__art--b { opacity: .26; }
.hero__art--b svg { right: 16%; height: 96%; top: 62%; }
/* 后台在「轮播与栏目图」里配了图时走这一层（PHP 侧与线描层互斥，不会同时出现）。
图片从左侧淡出与深色底融合，避免出现一条生硬的图片边界。 */
.hero__art--img { width: 50%; opacity: .92; }
.hero__art--img img {
position: absolute; right: 0; top: 0; width: 100%; height: 100%;
object-fit: cover; object-position: center;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .88) 24%, #000 58%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .88) 24%, #000 58%);
}
.hero__inner { z-index: 3; }
/* 首屏数据徽章浮层 */
.hero__badges {
position: absolute; right: 4%; bottom: 54px; z-index: 4;
display: flex; flex-direction: column; gap: 10px; pointer-events: none;
}
.hero__badge {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px 10px 12px; border-radius: 6px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .22);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
color: #fff; box-shadow: 0 6px 22px rgba(0, 0, 0, .18);
}
.hero__badge i {
width: 34px; height: 34px; border-radius: 4px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .16); color: #FFD9A0;
}
.hero__badge b { display: block; font-size: 17px; font-weight: 900; font-family: var(--ff-display); line-height: 1.1; }
.hero__badge span { display: block; font-size: 12px; color: rgba(255, 255, 255, .78); letter-spacing: .02em; }
/* 首屏底部渐隐过渡，避免与下一区块硬切 */
.hero::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 6;
background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand-primary) 34%, #3E9B78 62%, var(--state-info) 100%);
opacity: .85;
}
/* ==========================================================================
2. 信任与资质徽章带
对标 abcam / CST 首页的 credential strip。原设计完全没有这一层。
========================================================================== */
.credbar {
border-top: 1px solid var(--line-default);
border-bottom: 1px solid var(--line-default);
background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-subtle) 100%);
}
.credbar__row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
padding: 22px 0;
}
.cred {
display: flex; align-items: center; gap: 14px; padding: 6px 26px;
border-right: 1px solid var(--line-default);
}
.cred:last-child { border-right: 0; }
.cred__ico {
width: 44px; height: 44px; border-radius: 6px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: var(--brand-primary-light); color: var(--brand-primary);
border: 1px solid rgba(35, 105, 82, .14);
}
.cred__ico--blue { background: var(--state-info-bg); color: var(--state-info); border-color: rgba(27, 110, 194, .16); }
.cred__ico--accent { background: var(--brand-accent-light); color: var(--brand-accent); border-color: rgba(192, 0, 0, .14); }
.cred__ico--warn { background: var(--state-warning-bg); color: var(--state-warning); border-color: rgba(217, 139, 0, .18); }
.cred b { display: block; font-size: var(--fs-h4); font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.cred span { display: block; font-size: var(--fs-caption); color: var(--text-secondary); }
/* ==========================================================================
3. 分区块背景纹理 —— 破除"全白平板"
========================================================================== */
.section { position: relative; }
.section--grid > .wrap::before,
.section--mesh::before {
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
}
.section--grid > .wrap::before {
background-image: radial-gradient(var(--line-default) 1px, transparent 1px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 0%, transparent 78%);
opacity: .9;
}
.section--mesh::before {
background:
radial-gradient(ellipse 60% 50% at 12% 0%, rgba(35, 105, 82, .07) 0%, transparent 62%),
radial-gradient(ellipse 50% 50% at 92% 100%, rgba(27, 110, 194, .06) 0%, transparent 62%);
}
.section > .wrap { position: relative; z-index: 1; }
/* 区块标题的上方装饰短线 */
.section-head .eyebrow { position: relative; padding-left: 26px; }
.section-head .eyebrow::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 18px; height: 3px; border-radius: 2px;
background: linear-gradient(90deg, var(--brand-accent), var(--brand-primary));
}
/* ==========================================================================
4. 数据条升级 —— 从"裸数字"变成有承载的卡片带
========================================================================== */
.statbar--card {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
border: 1px solid var(--line-default); border-radius: var(--r-card); background: #fff;
box-shadow: var(--sh-card); overflow: hidden; position: relative;
}
.statbar--card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--brand-primary), #3E9B78 40%, var(--state-info) 76%, var(--brand-accent));
}
.statbar--card .stat {
text-align: left; padding: 26px 26px 24px; position: relative;
border-right: 1px solid var(--line-default);
}
.statbar--card .stat:last-child { border-right: 0; }
.statbar--card .stat__v { font-size: 36px; }
.statbar--card .stat__k { margin-top: 2px; }
.stat__src {
display: block; font-style: normal; font-size: 11px;
color: var(--text-disabled); margin-top: 3px;
}
/* 首屏右侧科学视觉层：加强可见度，原 .5 在深绿底上几乎看不清 */
.hero__art { opacity: .72; }
.hero__art--b { opacity: .34; }
.stat__ico {
width: 34px; height: 34px; border-radius: 4px; margin-bottom: 10px;
display: flex; align-items: center; justify-content: center;
background: var(--brand-primary-light); color: var(--brand-primary);
}
/* ==========================================================================
5. 分类卡升级 —— 每类一个色相 + 纸质纹理 + 悬停光晕
========================================================================== */
.cat-card { position: relative; overflow: hidden; padding-top: 26px; }
.cat-card::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
background: var(--cc, var(--brand-primary));
opacity: .9;
}
.cat-card::after {
content: ""; position: absolute; right: -70px; top: -70px; width: 180px; height: 180px;
border-radius: 50%; background: var(--cc, var(--brand-primary));
opacity: .06; transition: opacity .25s var(--ease), transform .25s var(--ease);
pointer-events: none;
}
.cat-card:hover::after { opacity: .12; transform: scale(1.12); }
.cat-card:hover { box-shadow: 0 10px 28px rgba(16, 24, 40, .10), 0 2px 6px rgba(16, 24, 40, .06); }
.cat-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.cat-card__medal {
width: 52px; height: 52px; border-radius: 6px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center; color: #fff;
background: linear-gradient(135deg, var(--cc, var(--brand-primary)) 0%, var(--cc2, var(--brand-primary)) 100%);
box-shadow: 0 6px 16px -4px var(--cc, var(--brand-primary));
}
.cat-card__subs { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-card__subs a {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 10px; border-radius: var(--r-tag);
background: var(--bg-subtle); border: 1px solid var(--line-default);
font-size: var(--fs-caption); color: var(--text-secondary);
transition: all .16s var(--ease);
}
.cat-card__subs a:hover { background: var(--brand-primary-light); border-color: var(--brand-primary); color: var(--brand-primary-dark); }
/* ==========================================================================
6. 产品卡升级
========================================================================== */
.pcard { position: relative; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.pcard:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.pcard__media {
background:
radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F8F6 58%, #EAF1ED 100%);
position: relative; overflow: hidden;
}
.pcard__media::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(35, 105, 82, .10) 1px, transparent 1px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}
.pcard__pick {
background: #fff !important; border-color: var(--line-strong) !important;
box-shadow: 0 1px 3px rgba(16, 24, 40, .12); z-index: 3;
}
.pcard__pick:hover { border-color: var(--brand-primary) !important; }
.pcard__pick.is-on { background: var(--brand-primary) !important; border-color: var(--brand-primary) !important; color: #fff; }
.pcard__name a { transition: color .16s var(--ease); }
.pcard__name a:hover { color: var(--brand-primary); }
/* 卡内区块行数定稿：名称 2 行、元信息 1 行、应用标签 1 行。收紧留白避免卡面显空。
横向一排卡片相同区块顶线对齐，短内容的卡在尾部留白而不是上浮。 */
@media (min-width: 761px) {
.pcard__name {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: calc(1.45em * 2);
}
.pcard__meta {
/* 元信息只留一行（货号 · 宿主 · 反应性）；min-height 与实际行高 1.8em 同源 */
min-height: calc(1.8em);
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard__specs { min-height: 28px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 5px; }
.pcard__status { min-height: 1.6em; }
}
/* ==========================================================================
7. mega 菜单补充件
========================================================================== */
.mega__sub {
display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 7px 10px; border-radius: 4px; font-size: var(--fs-body-s); color: var(--text-primary);
transition: background .14s var(--ease);
}
.mega__sub:hover, .mega__sub.is-on { background: var(--brand-primary-light); color: var(--brand-primary-dark); }
/* 第三栏（三级分类 / 热门靶点）：更紧凑的小胶囊，跟二级项区分开层级 */
.mega__sub3 {
display: inline-flex; align-items: center; padding: 5px 10px; margin: 0 6px 6px 0;
border: 1px solid var(--line-default); border-radius: var(--r-pill);
font-size: var(--fs-caption); color: var(--text-secondary); background: #fff;
transition: border-color .14s var(--ease), color .14s var(--ease);
}
.mega__sub3:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.mega__subsets--third { display: flex; flex-wrap: wrap; max-height: 210px; overflow-y: auto; }
.mega__cat.light { font-weight: 400; font-size: 15px; padding: 7px 10px; border-radius: 4px; }
.mega__cat .bul { color: var(--brand-primary); }
.mega__cat .enx, .mega__sub .enx { color: var(--text-disabled); font-weight: 400; font-size: 12px; }
.mega--simple .mega__inner { grid-template-columns: repeat(3, 1fr); gap: 4px 28px; }
.mega__reco-card {
display: block; border: 1px solid var(--line-default); border-radius: 5px;
padding: 10px 12px; transition: all .16s var(--ease);
}
.mega__reco-card:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); }
.mega__reco-card .t { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.4; }
.mega__reco-card .s { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
/* 导航当前项 */
.nav-link.is-on { color: var(--brand-primary); font-weight: 700; }
.nav-link.is-on::after { background: var(--brand-primary); }
/* ==========================================================================
8. 页脚升级
========================================================================== */
.site-footer { position: relative; }
.site-footer::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand-primary) 30%, #3E9B78 55%, var(--state-info) 100%);
}
.site-footer .footer-dl a { transition: all .16s var(--ease); }
.site-footer .footer-dl a:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
/* ==========================================================================
9. 滚动入场
--------------------------------------------------------------------------
重要取舍：入场动画**默认不隐藏内容**。
只有 带上 .ab-js（由 内联脚本即时添加）时才隐藏，
且 app.js 另设 1.5s 兜底强制显示。
原因：单纯用 IntersectionObserver 控制可见性，一旦 JS 报错 / 观察器漏触发，
内容会永久停留在 opacity:0 —— 实测整页滚动后仍有 3 个区块未触发。
对以百度收录为目标的营销站，内容可见性不能依赖 JS 一定成功。
========================================================================== */
html.ab-js [data-reveal]:not(.is-in) {
opacity: 0; transform: translateY(18px);
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.ab-js [data-reveal].is-in {
opacity: 1; transform: none;
transition: opacity .5s var(--ease), transform .5s var(--ease);
}
html.ab-js [data-reveal].is-in[data-reveal-d="1"] { transition-delay: .07s; }
html.ab-js [data-reveal].is-in[data-reveal-d="2"] { transition-delay: .14s; }
html.ab-js [data-reveal].is-in[data-reveal-d="3"] { transition-delay: .21s; }
@media (prefers-reduced-motion: reduce) {
html.ab-js [data-reveal]:not(.is-in) { opacity: 1 !important; transform: none !important; }
html.ab-js [data-reveal].is-in { transition: none !important; }
}
/* 无 JS 时明确保证可见 */
.no-js [data-reveal] { opacity: 1 !important; transform: none !important; }
/* ==========================================================================
11. 列表页（筛选 + 结果）
========================================================================== */
/* 页首导语 */
.page-lead { margin-bottom: 26px; }
.page-lead h1 { font-size: var(--fs-h2); margin: 4px 0 8px; }
.page-lead .lede { font-size: var(--fs-body-s); color: var(--text-secondary); max-width: 900px; line-height: 1.8; }
.page-lead .lede b { color: var(--brand-primary); }
/* 列表 / 搜索页：文案区分隔线之后直接衔接结果工具条，不再做成孤立圆角卡 */
.page-lead:has(+ .filters) { margin-bottom: 14px; }
.plist-head {
display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
padding: 12px 2px; margin-bottom: 10px;
border: 0; border-radius: 0; background: transparent;
border-bottom: 1px solid var(--line-default);
}
.plist-head .cnt { font-size: var(--fs-body-s); color: var(--text-secondary); }
.plist-head .cnt b { color: var(--brand-primary); font-size: var(--fs-h4); font-weight: 900; font-family: var(--ff-display); }
.plist-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.plist-tools .viewsw { display: flex; border: 1px solid var(--line-default); border-radius: var(--r-btn); overflow: hidden; }
.plist-tools .viewsw button {
width: 36px; height: 36px; border: 0; background: #fff; color: var(--text-secondary);
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.plist-tools .viewsw button.is-on { background: var(--brand-primary-light); color: var(--brand-primary); }
.chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chips .lb { font-size: var(--fs-caption); color: var(--text-secondary); }
.chip {
display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px;
border-radius: var(--r-pill); background: var(--brand-primary-light);
border: 1px solid rgba(35, 105, 82, .20); font-size: var(--fs-caption);
color: var(--brand-primary-dark); font-weight: 600;
}
.chip a { color: inherit; opacity: .6; display: flex; }
.chip a:hover { opacity: 1; }
/* 整卡即移除链接的 chip（列表页 / 搜索页已选条件）：block 链接去掉下划线，hover 变警示色 */
a.chip { text-decoration: none; cursor: pointer; transition: color .15s var(--ease), border-color .15s var(--ease); }
a.chip:hover { color: var(--brand-accent); border-color: var(--brand-accent); text-decoration: none; }
.chip a:hover { opacity: 1; }
/* 「全部清除」chip：与普通筛选项区分开，用虚线框 + 次级文字色 */
.chips .chip--clear { background: none; border-style: dashed; color: var(--text-secondary); font-weight: 500; }
.chips .chip--clear:hover { color: var(--brand-primary); border-color: var(--brand-primary); }
/* 命中 0 的筛选项：置灰但仍可点（隐藏会让用户以为维度不存在）。
已选中时恢复满不透明度 —— 用户自己勾上的必须看得清。 */
.fopt.is-dim { opacity: .45; }
.fopt.is-dim.is-on { opacity: 1; }
/* 侧栏筛选 */
/* 显式关掉 ablumir.css 老规则（.filters 自身 sticky + overflow:hidden）：
overflow 容器会剪掉子项 .filters__side 的 sticky，吸附必失效 */
.filters { display: grid; grid-template-columns: 250px 1fr; gap: 26px; align-items: start; position: static; overflow: visible; }
.filters__side {
border: 1px solid var(--line-default); border-radius: var(--r-card); background: #fff;
/* 吸附线算上站头实际高度（--pdnav-top 由 app.js 实测写回）：
写 16px 会钻进吸顶站头底下，卡片顶部被硬切 */
position: sticky; top: calc(var(--pdnav-top, 126px) + 16px);
max-height: calc(100vh - var(--pdnav-top, 126px) - 32px); overflow-y: auto;
}
.filters__hd {
display: flex; align-items: center; gap: 8px; padding: 14px 15px;
border-bottom: 1px solid var(--line-default); color: var(--brand-primary);
}
.filters__hd b { font-size: var(--fs-body-s); color: var(--text-primary); }
.filters__clean {
margin-left: auto; background: none; border: 0; cursor: pointer; padding: 0;
font-size: var(--fs-caption); color: var(--text-secondary);
}
.filters__clean:hover { color: var(--brand-accent); text-decoration: underline; }
/* 应用快筛（左侧筛选栏顶部）没有专属样式：
用的就是普通维度的 .fgroup / .fgroup__body / label.fopt。
不要为「应用」单独造皮肤：一套样式两处维护，改版时必然被落下。 */
.plist-sort { display: flex; align-items: center; }
.sorts {
height: 36px; border: 1px solid var(--line-default); border-radius: var(--r-btn);
padding: 0 30px 0 11px; font-size: var(--fs-body-s); font-family: inherit;
background: #fff url("data:image/svg+xml;utf8,") no-repeat right 10px center;
-webkit-appearance: none; appearance: none; cursor: pointer; color: var(--text-primary);
}
.sorts:hover { border-color: var(--brand-primary); }
#resultHost { min-height: 240px; transition: opacity .18s var(--ease); }
#resultHost.is-loading { opacity: .45; pointer-events: none; }
.fopt--more { display: none; }
.chips .kw { color: var(--brand-primary); font-weight: 600; }
.filters__side::-webkit-scrollbar { width: 6px; }
.filters__side::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }
.fgroup { border-bottom: 1px solid var(--line-default); }
.fgroup:last-child { border-bottom: 0; }
.fgroup__head {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 13px 15px; cursor: pointer; font-size: var(--fs-body-s); font-weight: 700;
color: var(--text-primary); user-select: none;
}
.fgroup__head:hover { background: var(--bg-subtle); }
.fgroup__head svg { transition: transform .18s var(--ease); color: var(--text-secondary); }
.fgroup.is-open .fgroup__head svg { transform: rotate(180deg); }
.fgroup__body { display: none; padding: 0 15px 14px; }
.fgroup.is-open .fgroup__body { display: block; }
.fopt { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: var(--fs-body-s); color: var(--text-secondary); cursor: pointer; }
/* .fopt 自带 display:flex 会盖掉 [hidden] 的 UA 样式（与 .hsnav 同一个坑），
命中数为 0 被 JS 收起时必须显式关掉 */
.fopt[hidden] { display: none; }
.fopt input { accent-color: var(--brand-primary); width: 15px; height: 15px; flex: 0 0 auto; }
.fopt .v { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
.fopt .c { font-size: 11px; color: var(--text-disabled); font-variant-numeric: tabular-nums; }
.fopt:hover .v { color: var(--brand-primary); }
.fopt.is-on .v { color: var(--brand-primary-dark); font-weight: 600; }
.fmore { font-size: var(--fs-caption); color: var(--state-info); background: none; border: 0; cursor: pointer; padding: 4px 0; }
.fclean {
display: block; width: 100%; text-align: center; padding: 10px; font-size: var(--fs-body-s);
color: var(--text-secondary); background: none; border: 0; border-top: 1px solid var(--line-default); cursor: pointer;
}
.fclean:hover { color: var(--brand-accent); }
/* ---------- 产品列表页左侧筛选栏 ---------- */
.filters__side--products {
background: #fff;
border: 1px solid var(--line-default);
border-radius: var(--r-card);
box-shadow: 0 2px 10px rgba(30, 55, 46, .04);
padding: 0;
}
.filters__side--products .filters__hd {
padding: 14px 16px;
border-bottom: 1px solid var(--line-default);
font-size: var(--fs-body);
}
.filters__side--products .fgroup { border-bottom: 1px solid var(--line-default); }
.filters__side--products .fgroup:last-child { border-bottom: 0; }
.filters__side--products .fgroup__head {
background: #F3F8FB;
padding: 11px 14px;
font-size: 15px;
font-weight: 700;
color: #1A4A6E;
gap: 8px;
/* 覆盖 ablumir.css 的 space-between：加了 ::before 的「+」号后，
两端对齐会把标题推到最右边，看起来像右对齐的乱版。改为左起排列。 */
justify-content: flex-start;
}
.filters__side--products .fgroup__head > span { flex: 1 1 auto; min-width: 0; }
.filters__side--products .fgroup__head::before {
content: '+';
width: 18px; height: 18px;
display: inline-flex; align-items: center; justify-content: center;
background: #1A4A6E; color: #fff;
border-radius: 3px;
font-size: 13px; line-height: 1;
font-weight: 500;
flex: 0 0 auto;
}
.filters__side--products .fgroup.is-open .fgroup__head::before { content: '−'; }
.filters__side--products .fgroup__head:hover { background: #E6F1F8; }
.filters__side--products .fgroup__head svg { display: none; }
.filters__side--products .fgroup__body { padding: 10px 14px 14px; background: #fff; }
.filters__side--products .fopt {
padding: 5.5px 0;
font-size: 14px;
color: var(--text-primary);
}
.filters__side--products .fopt:hover .v { color: var(--brand-primary); }
.filters__side--products .fopt.is-on .v { color: var(--brand-primary-dark); font-weight: 600; }
.filters__side--products .fopt .c { color: var(--text-disabled); }
.filters__side--products .fmore {
width: 100%; text-align: left;
color: var(--brand-primary); font-weight: 600;
margin-top: 4px;
}
/* 左侧栏搜索框—— 与勾选同一条 AJAX 管线：输入即筛 */
.filters__side--products .fsearch {
display: flex; align-items: center; gap: 8px;
padding: 11px 14px;
border-bottom: 1px solid var(--line-default);
background: #fff;
}
.filters__side--products .fsearch > svg { flex: 0 0 auto; color: var(--brand-primary); }
.filters__side--products .fsearch input {
flex: 1 1 auto; min-width: 0;
border: 0; background: transparent;
font-size: 14px; color: var(--text-primary);
}
.filters__side--products .fsearch input::placeholder { color: var(--text-disabled); }
/* 聚焦落在整行（输入框无边框，只改 input 自身看不见） */
.filters__side--products .fsearch:focus-within { background: #F3F8FB; }
.filters__side--products .fsearch input:focus { outline: 0; }
.filters__side--products .fsearch__clr {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; border-radius: 50%;
background: var(--bg-subtle); color: var(--text-secondary);
}
.filters__side--products .fsearch__clr:hover { background: var(--brand-primary-light); color: var(--brand-primary); text-decoration: none; }
/* 组内选项搜索—— 只做前端选项过滤，样式比顶部搜索框更轻，
避免和「全站搜索」抢视觉层级 */
.fopt-search {
display: flex; align-items: center; gap: 6px;
margin: 0 0 8px; padding: 6px 10px;
border: 1px solid var(--line-default); border-radius: var(--r-btn);
background: #fff;
}
.fopt-search > svg { flex: 0 0 auto; color: var(--text-disabled); }
.fopt-search__i {
flex: 1 1 auto; min-width: 0;
border: 0; background: transparent; outline: 0;
font-size: 13px; color: var(--text-primary);
}
.fopt-search__i::placeholder { color: var(--text-disabled); }
.fopt-search:focus-within { border-color: var(--brand-primary); }
/* 过滤掉的选项直接不占位 —— 长列表过滤后应当变短，而不是留一段空白 */
.fopt.is-hidden { display: none; }
.fopt-search__none { font-size: 12px; color: var(--text-disabled); padding: 2px 2px 6px; }
/* 结果网格 */
.plist { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: var(--gutter); }
.plist.is-row { grid-template-columns: 1fr; }
/* ==========================================================================
12. 详情页
========================================================================== */
.pd-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.pd-gallery { border: 1px solid var(--line-default); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.pd-gallery__main {
aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center;
background: radial-gradient(circle at 50% 44%, #FFFFFF 0%, #F4F8F6 56%, #E7EFEA 100%);
position: relative; overflow: hidden;
}
.pd-gallery__main::after {
content: ""; position: absolute; inset: 0;
background-image: radial-gradient(rgba(35, 105, 82, .11) 1px, transparent 1px);
background-size: 20px 20px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 74%);
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 74%);
}
.pd-gallery__thumbs { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line-default); }
.pd-gallery__thumbs button {
width: 68px; height: 68px; border: 1px solid var(--line-default); border-radius: 4px;
background: var(--bg-subtle); cursor: pointer; padding: 4px;
display: flex; align-items: center; justify-content: center;
}
.pd-gallery__thumbs button.is-on { border-color: var(--brand-primary); background: var(--brand-primary-light); }
.pd-title { font-size: 28px; line-height: 1.3; margin-bottom: 8px; }
.pd-sub { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; font-size: var(--fs-body-s); color: var(--text-secondary); }
.pd-keyfacts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 16px 0; }
.pd-kf { border: 1px solid var(--line-default); border-radius: var(--r-btn); padding: 10px 12px; background: var(--bg-subtle); }
.pd-kf dt { font-size: var(--fs-caption); color: var(--text-secondary); margin-bottom: 2px; }
.pd-kf dd { font-size: var(--fs-body-s); font-weight: 700; color: var(--text-primary); word-break: break-word; }
.pd-zh { font-size: var(--fs-h4); color: var(--text-secondary); margin-bottom: 10px; font-weight: 400; }
/* 别名行：货号元信息行下方，标签浅灰、值次级灰，随内容自然换行 */
.pd-alias { font-size: var(--fs-body-s); color: var(--text-secondary); margin: -4px 0 0; }
.pd-alias span { color: var(--text-disabled); margin-right: 8px; }
/* 中等屏幕：搜索框被品牌区与右侧工具挤到只剩 200px 出头，长提示语会被截断。
这里收窄下拉与按钮、并让「联系我们」文字按钮让位，把宽度还回输入框。 */
@media (max-width: 1180px) {
.searchbox { max-width: none; }
.searchbox select { min-width: 74px; padding: 0 24px 0 10px; font-size: 12.5px; }
.searchbox button[type="submit"] { padding: 0 16px; }
.header-tools > .btn--ghost { display: none; }
}
/* 页面右侧：一键到顶 / 一键到底 */
.page-jump {
position: fixed; right: 18px; bottom: 92px; z-index: 115;
display: flex; flex-direction: column; gap: 8px;
}
.page-jump[hidden] { display: none; }
.page-jump__b {
width: 38px; height: 38px; display: grid; place-items: center;
border: 1px solid var(--line-default); border-radius: 5px;
background: #fff; color: var(--text-secondary); cursor: pointer;
box-shadow: 0 2px 10px rgba(16, 24, 40, .08);
transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.page-jump__b svg { width: 17px; height: 17px; }
.page-jump__b:hover {
color: var(--brand-primary); border-color: var(--brand-primary); transform: translateY(-1px);
}
.page-jump__b:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
@media (max-width: 900px) { .page-jump { right: 10px; bottom: 78px; } .page-jump__b { width: 34px; height: 34px; } }
/* 栏目页：配图来源小字 + 通路清单 */
.cat-hero__src {
margin-top: 8px; font-size: 11px; line-height: 1.6; color: var(--text-disabled); text-align: left;
}
.cat-pathways { margin-top: 18px; }
.cat-pathways__t {
font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary); margin-bottom: 8px;
}
.cat-pathways__list { display: flex; flex-wrap: wrap; gap: 8px 10px; list-style: none; margin: 0; padding: 0; }
.cat-pathways__list a {
display: inline-block; padding: 5px 12px; border: 1px solid var(--line-default);
border-radius: 999px; font-size: var(--fs-caption); color: var(--brand-primary-dark); text-decoration: none;
}
.cat-pathways__list a:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); text-decoration: none; }
.cat-pathways__list a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
/* 关键信息四列：标题灰、内容品牌绿、每列左对齐 */
.pd-keyinfo {
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px 22px;
margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-default);
}
.pd-keyinfo__i { display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; }
.pd-keyinfo .k {
font-size: var(--fs-caption); color: var(--text-disabled); font-weight: 600; letter-spacing: .04em;
}
.pd-keyinfo .v {
font-size: var(--fs-body-s); color: var(--brand-primary-dark); font-weight: 700;
text-align: left; word-break: break-word;
}
@media (max-width: 760px) { .pd-keyinfo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.catno--lg { font-size: 15px; padding: 3px 9px; margin-left: -5px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.catno--lg:hover { background: var(--brand-primary-light); color: var(--brand-primary-dark); }
/* 「复制产品信息」按钮：与货号胶囊同一视觉层级，
但描边更弱，避免抢走货号本身的注意力 */
.catno__copyall {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px; border: 1px solid var(--line-default); border-radius: var(--r-pill);
background: #fff; color: var(--text-secondary);
font-family: var(--ff-body); font-size: var(--fs-caption); font-weight: 600;
cursor: pointer; line-height: 1.6;
}
.catno__copyall:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); }
.catno__copyall > svg { flex: 0 0 auto; }
.pcard__specs .lb { font-size: var(--fs-caption); color: var(--text-secondary); align-self: center; margin-right: 2px; }
.pd-glyph-note {
display: flex; align-items: center; gap: 6px; padding: 9px 12px;
font-size: var(--fs-caption); color: var(--text-disabled);
border-top: 1px solid var(--line-default); background: var(--bg-subtle); margin: 0;
}
.pd-glyph-note svg { color: var(--brand-primary); flex: 0 0 auto; }
.pd-buy__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.qtybox { display: flex; align-items: center; border: 1px solid var(--line-default); border-radius: var(--r-btn); overflow: hidden; height: var(--h-btn); }
.qtybox button { width: 38px; height: 100%; border: 0; background: #fff; cursor: pointer; font-size: 17px; color: var(--text-secondary); }
.qtybox button:hover { background: var(--brand-primary-light); color: var(--brand-primary); }
.qtybox input { width: 54px; height: 100%; border: 0; border-left: 1px solid var(--line-default); border-right: 1px solid var(--line-default); text-align: center; font-size: var(--fs-body-s); font-family: inherit; }
.qtybox input::-webkit-outer-spin-button, .qtybox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qtybox input[type=number] { -moz-appearance: textfield; }
.pd-total { margin-top: 10px; font-size: var(--fs-body-s); color: var(--text-secondary); }
.pd-total b { font-size: var(--fs-h4); color: var(--brand-accent); font-family: var(--ff-display); font-weight: 900; }
.pd-assure {
display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; padding-top: 13px;
border-top: 1px dashed var(--line-default); font-size: var(--fs-caption); color: var(--text-secondary);
}
.pd-assure span { display: inline-flex; align-items: center; gap: 5px; }
.pd-assure svg { color: var(--state-success); flex: 0 0 auto; }
.pd-h2 { font-size: 19px; margin: 26px 0 12px; padding-left: 11px; border-left: 4px solid var(--brand-primary); }
.tabpanel .pd-h2:first-child { margin-top: 0; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line-default); margin-bottom: 20px; overflow-x: auto; }
.tabs .tab .n { font-size: 11px; color: var(--text-disabled); margin-left: 4px; }
.dl-mini { display: flex; flex-direction: column; gap: 6px; }
.dl-mini a { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 4px; transition: background .15s var(--ease); }
.dl-mini a:hover { background: var(--brand-primary-light); }
.dl-mini .ext {
flex: 0 0 auto; min-width: 38px; text-align: center; padding: 3px 6px; border-radius: 3px;
font-size: 10px; font-weight: 800; letter-spacing: .03em;
background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--line-default);
}
.dl-mini .ext.pdf { background: var(--brand-accent-light); color: var(--brand-accent); border-color: rgba(192,0,0,.16); }
.dl-mini .ext.xlsx, .dl-mini .ext.xls { background: var(--state-success-bg); color: var(--state-success); border-color: rgba(31,146,84,.18); }
.dl-mini .ext.doc, .dl-mini .ext.docx { background: var(--state-info-bg); color: var(--state-info); border-color: rgba(27,110,194,.18); }
.dl-mini .t { font-size: var(--fs-body-s); color: var(--text-primary); line-height: 1.45; }
.rel-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.rel-list a { display: block; padding: 9px 10px; border-radius: 4px; transition: background .15s var(--ease); }
.rel-list a:hover { background: var(--brand-primary-light); }
.rel-list .nm { display: block; font-size: var(--fs-body-s); font-weight: 700; line-height: 1.45; margin: 2px 0; }
.rel-list .mt { display: block; font-size: var(--fs-caption); color: var(--text-secondary); }
.pd-card .sm { font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
.pd-card--legal { background: var(--bg-subtle); }
.pd-card--legal .sm { display: flex; gap: 7px; margin: 0; font-size: var(--fs-caption); }
.pd-card--legal svg { color: var(--brand-primary); flex: 0 0 auto; margin-top: 1px; }
.pd-buy { border: 1px solid var(--line-default); border-radius: var(--r-card); background: #fff; padding: 18px; margin-top: 16px; }
.pd-packs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.pd-pack {
border: 1px solid var(--line-default); border-radius: var(--r-btn); background: #fff;
padding: 9px 13px; cursor: pointer; text-align: left; transition: all .16s var(--ease);
}
.pd-pack:hover { border-color: var(--brand-primary); }
.pd-pack.is-on { border-color: var(--brand-primary); background: var(--brand-primary-light); box-shadow: 0 0 0 1px var(--brand-primary) inset; }
.pd-pack b { display: block; font-size: var(--fs-body-s); color: var(--text-primary); }
.pd-pack span { display: block; font-size: var(--fs-caption); color: var(--brand-primary); font-weight: 700; margin-top: 2px; }
.pd-pack.is-on b { color: var(--brand-primary-dark); }
.pd-spec { display: grid; grid-template-columns: 132px 1fr; gap: 0; border: 1px solid var(--line-default); border-radius: var(--r-card); overflow: hidden; }
.pd-spec dt, .pd-spec dd { padding: 10px 14px; font-size: var(--fs-body-s); border-bottom: 1px solid var(--line-default); margin: 0; }
.pd-spec dt { background: var(--bg-subtle); color: var(--text-secondary); font-weight: 600; }
.pd-spec dd { color: var(--text-primary); word-break: break-word; }
.pd-spec tr:last-child dt, .pd-spec tr:last-child dd { border-bottom: 0; }
.pd-layout { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: start; margin-top: 40px; }
.pd-aside { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
.pd-card { border: 1px solid var(--line-default); border-radius: var(--r-card); background: #fff; padding: 16px; }
.pd-card h3 { font-size: var(--fs-h4); margin-bottom: 10px; }
.pd-card ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pd-card li { font-size: var(--fs-body-s); color: var(--text-secondary); display: flex; gap: 8px; }
.pd-card li svg { color: var(--brand-primary); flex: 0 0 auto; margin-top: 2px; }
.sequence {
font-family: var(--ff-mono); font-size: 12px; line-height: 1.75; word-break: break-all;
background: #0F1A16; color: #C8E6D8; padding: 16px; border-radius: var(--r-btn);
max-height: 300px; overflow-y: auto;
}
.dilution { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.dil-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid var(--line-default); border-radius: var(--r-btn); padding: 8px 12px; font-size: var(--fs-body-s); }
.dil-item b { color: var(--brand-primary); font-weight: 700; }
.ref-line { padding: 12px 0; border-bottom: 1px solid var(--line-default); }
.ref-line:last-child { border-bottom: 0; }
.ref-line .t { font-size: var(--fs-body-s); font-weight: 600; line-height: 1.55; margin-bottom: 4px; }
.ref-line .t:hover { color: var(--brand-primary); }
.ref-line .m { font-size: var(--fs-caption); color: var(--text-secondary); display: flex; gap: 12px; flex-wrap: wrap; }
.ref-line .m .if { color: var(--brand-accent); font-weight: 700; }
/* ==========================================================================
13. 认证 / 证书条 & 通用补充
========================================================================== */
.no-hits { padding: 40px; border: 1px dashed var(--line-strong); border-radius: var(--r-card); text-align: center; color: var(--text-secondary); }
.quote-band {
border-radius: var(--r-card); padding: 40px; color: #fff; position: relative; overflow: hidden;
background: linear-gradient(120deg, var(--brand-primary-dark) 0%, #1E5A46 52%, #236952 100%);
}
.quote-band::before {
content: ""; position: absolute; right: -80px; bottom: -120px; width: 420px; height: 420px; border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 66%);
}
.quote-band::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
background-size: 28px 28px;
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .8) 60%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .8) 60%);
}
.quote-band > * { position: relative; z-index: 1; }
/* 深色渐变底上，全局标题色（深色）会看不清 —— 强制回到白系 */
.quote-band h1, .quote-band h2 { color: #fff; }
.quote-band .lede { color: rgba(255, 255, 255, .85); }
.quote-band__eyebrow { margin: 0 0 8px; color: rgba(255, 255, 255, .78); font-size: var(--fs-caption); font-weight: 600; letter-spacing: .08em; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: var(--fs-caption); color: var(--text-secondary); font-weight: 600; }
.field label .req { color: var(--brand-accent); }
.field input, .field select, .field textarea {
height: var(--h-input); border: 1px solid var(--line-default); border-radius: var(--r-input);
padding: 0 13px; font-size: var(--fs-body-s); font-family: inherit; background: #fff;
transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.field textarea { height: auto; padding: 11px 13px; min-height: 110px; resize: vertical; line-height: 1.7; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(35, 105, 82, .12);
}
/* 新闻 / 资讯列表 */
.news-list { display: flex; flex-direction: column; }
.news-i {
display: grid; grid-template-columns: 200px 1fr; gap: 20px; padding: 20px 0;
border-bottom: 1px solid var(--line-default); align-items: start;
transition: all .18s var(--ease);
}
.news-i:last-child { border-bottom: 0; }
.news-i:hover { padding-left: 8px; }
.news-i__art {
aspect-ratio: 16 / 10; border-radius: var(--r-btn); border: 1px solid var(--line-default);
background: radial-gradient(circle at 50% 44%, #FFFFFF 0%, #F2F7F4 60%, #E7EFEA 100%);
display: flex; align-items: center; justify-content: center; color: var(--brand-primary);
overflow: hidden; position: relative;
}
.news-i__art img { width: 100%; height: 100%; object-fit: cover; }
/* 新闻条目行数统一：标题恒 2 行、摘要恒 2 行（不足留白、超出截断） */
.news-i__t {
font-size: var(--fs-h4); line-height: 1.45; margin-bottom: 8px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: calc(2 * 1.45em);
}
.news-i__t a:hover { color: var(--brand-primary); }
.news-i__s {
font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; min-height: calc(2 * 1.7em);
}
.news-i__m { font-size: var(--fs-caption); color: var(--text-disabled); display: flex; gap: 14px; flex-wrap: wrap; }
/* 文章正文 */
.article-body { font-size: 16px; line-height: 1.9; color: #2A3238; }
.article-body h2 { font-size: 22px; margin: 32px 0 12px; padding-left: 12px; border-left: 4px solid var(--brand-primary); }
.article-body h3 { font-size: 18px; margin: 24px 0 10px; color: var(--brand-primary-dark); }
.article-body p { margin-bottom: 14px; }
.article-body ul, .article-body ol { margin: 0 0 16px 20px; }
.article-body li { margin-bottom: 6px; }
.article-body img { max-width: 100%; border-radius: var(--r-btn); margin: 12px 0; }
.article-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; }
.article-body th, .article-body td { border: 1px solid var(--line-default); padding: 9px 12px; text-align: left; }
.article-body th { background: var(--bg-subtle); font-weight: 700; }
.article-body blockquote { border-left: 3px solid var(--brand-primary); background: var(--brand-primary-light); padding: 12px 16px; margin: 16px 0; border-radius: 0 var(--r-btn) var(--r-btn) 0; }
.article-body code { background: var(--bg-subtle); padding: 2px 6px; border-radius: 3px; font-family: var(--ff-mono); font-size: 13px; }
/* ==========================================================================
14. 响应式
========================================================================== */
@media (max-width: 767px) {
/* 修正：ablumir.css 的 .site-header__main{padding:10px 0} 会用简写把
.wrap 的左右 20px 内边距一起清掉，再叠加 .searchbox{flex-basis:100%}
就会让搜索框撑满视口宽度 + 竖线边框，造成 3px 横向滚动。 */
.wrap.site-header__main { padding: 10px var(--pad-mobile); }
.searchbox { min-width: 0; }
/* 移动浮条实为 4 项（首页 / 电话 / 产品 / 客服），基础样式是 3 列，需覆盖 */
.mobile-nav { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 1200px) {
.hero__badges { display: none; }
.plist { grid-template-columns: repeat(2, 1fr); }
.dl-grid { grid-template-columns: repeat(3, 1fr); }
.filters { grid-template-columns: 220px 1fr; }
.pd-layout { grid-template-columns: 1fr 280px; }
}
@media (max-width: 1000px) {
.credbar__row { grid-template-columns: repeat(2, 1fr); }
.cred { border-right: 0; border-bottom: 1px solid var(--line-default); padding: 14px 20px; }
.cred:nth-last-child(-n+2) { border-bottom: 0; }
.statbar--card { grid-template-columns: repeat(2, 1fr); }
.statbar--card .stat:nth-child(2) { border-right: 0; }
.statbar--card .stat:nth-child(-n+2) { border-bottom: 1px solid var(--line-default); }
.pd-top { grid-template-columns: 1fr; gap: 24px; }
.pd-layout { grid-template-columns: 1fr; }
.pd-aside { position: static; }
.news-i { grid-template-columns: 150px 1fr; gap: 14px; }
}
@media (max-width: 900px) {
.mob-toggle { display: flex; }
/* 修正（实测 820px 溢出 52px）：
.mob-toggle 在 ≤900px 显示，但 ablumir.css 里让 header 换行的
.site-header__main{flex-wrap:wrap} 与 .searchbox{flex-basis:100%}
只在 ≤767px 生效 —— 768–900px 这个区间按钮无处可放，被挤出视口右侧。
这里把换行与搜索框独占一行提前到 900px，与汉堡按钮的显隐断点对齐。 */
.site-header__main { flex-wrap: wrap; height: auto; min-height: 60px; row-gap: 10px; }
.searchbox { max-width: none; flex-basis: 100%; order: 3; min-width: 0; }
.filters { grid-template-columns: 1fr; }
.filters__side { position: static; max-height: none; }
.plist { grid-template-columns: 1fr; }
.dl-grid { grid-template-columns: repeat(2, 1fr); }
.section--grid > .wrap::before, .section--mesh::before { display: none; }
}
@media (max-width: 700px) {
.hero { min-height: 340px; }
.hero__art { width: 100%; opacity: .3; }
/* 图片层在窄屏降到背景强度：满宽铺底，遮住文字就没法看了 */
.hero__art--img { opacity: .24; }
.hero__art--img img {
-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .9) 45%, #000 100%);
mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .9) 45%, #000 100%);
}
.hero__title { font-size: 28px; }
.statbar--card { grid-template-columns: 1fr; }
.statbar--card .stat { border-right: 0; border-bottom: 1px solid var(--line-default); padding: 18px 18px; }
.statbar--card .stat:last-child { border-bottom: 0; }
.credbar__row { grid-template-columns: 1fr; }
.cred { border-bottom: 1px solid var(--line-default) !important; }
.cred:last-child { border-bottom: 0 !important; }
.dl-grid { grid-template-columns: 1fr; }
.news-i { grid-template-columns: 1fr; }
.news-i__art { max-width: 100%; }
.form-grid { grid-template-columns: 1fr; }
.pd-keyfacts, .pd-spec { grid-template-columns: 1fr; }
.pd-spec { border: 0; }
.pd-spec dt { background: transparent; padding-bottom: 2px; border-bottom: 0; color: var(--text-secondary); }
.pd-spec dd { padding-top: 0; border-bottom: 1px solid var(--line-default); }
}
/* ==========================================================================
15. 页面组件（询价车 / 对比 / 文献库 / 下载分类 / 积分 / 账户 /
联系 · 关于 / 资讯详情 / 搜索 / 分页 / 通用小件）
--------------------------------------------------------------------------
说明：本区为「第二阶段页面」补齐既有设计系统未覆盖的组件。
所有取值仍走 ablumir.css 的 :root 设计 token，不新增颜色语义。
========================================================================== */
/* ---- 15.0 首屏标题语义（h1 + h2 共用 .hero__title） ----
轮播第 1 张是 h1、其余降为 h2，两者共用同一个类；
ablumir.css 的 .hero__title 只设了 margin-bottom，h2 会带上浏览器默认上边距，此处归零。 */
.hero__title { margin-top: 0; }
/* 页脚公司信息：电话与邮箱各自不许在其内部换行，否则 CJK 断行会把号码拆开 */
.footer-brand .nb { display: inline-block; white-space: nowrap; margin-right: 18px; }
/* ---- 15.1 分页（func.php · paginate()） ---- */
.pager {
display: flex; align-items: center; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
margin-top: 30px; padding-top: 20px;
border-top: 1px solid var(--line-default);
}
.pager__meta { font-size: var(--fs-body-s); color: var(--text-secondary); }
.pager__meta b { color: var(--text-primary); font-weight: 700; }
.pager__links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pager__btn {
display: inline-flex; align-items: center; justify-content: center;
min-width: 34px; height: 34px; padding: 0 10px;
border: 1px solid var(--line-default); border-radius: var(--r-btn);
background: #fff; color: var(--text-secondary);
font-size: var(--fs-body-s); font-weight: 600; line-height: 1;
transition: border-color .18s var(--ease), color .18s var(--ease), background .18s var(--ease);
}
a.pager__btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); background: var(--brand-primary-light); }
.pager__btn.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; cursor: default; }
.pager__btn.is-off { color: var(--text-disabled); background: var(--bg-subtle); cursor: not-allowed; }
/* ---- 15.2 询价车（cart.php） ---- */
.cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; }
.cart-box {
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; box-shadow: var(--sh-card); overflow: hidden;
}
.cart-table-wrap { overflow-x: auto; }
.cart-table { width: 100%; border-collapse: collapse; min-width: 660px; }
.cart-table thead th {
background: var(--bg-subtle); text-align: left;
padding: 12px 14px; font-size: var(--fs-caption); font-weight: 700;
color: var(--text-secondary); letter-spacing: .04em; text-transform: uppercase;
border-bottom: 1px solid var(--line-default); white-space: nowrap;
}
.cart-table tbody td { padding: 14px; border-bottom: 1px solid var(--line-default); vertical-align: middle; }
.cart-table tbody tr:last-child td { border-bottom: 0; }
.cart-table tbody tr:hover { background: #FAFCFB; }
.cart-table .c-art { width: 66px; }
.cart-table .c-art svg { display: block; width: 46px; height: 46px; }
.cart-table .c-info { min-width: 220px; }
.cart-table .c-info .nm { display: block; font-size: var(--fs-body-s); font-weight: 700; line-height: 1.5; color: var(--text-primary); }
.cart-table .c-info .nm:hover { color: var(--brand-primary); }
.cart-table .c-info .mt { font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 3px; }
.cart-table .c-pack { color: var(--text-secondary); font-size: var(--fs-body-s); white-space: nowrap; }
.cart-table .c-price, .cart-table .c-sub { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cart-table .c-sub { font-weight: 700; color: var(--brand-primary); }
.cart-table .c-price em, .cart-table .c-sub em { font-style: normal; color: var(--state-warning); font-size: var(--fs-caption); font-weight: 600; }
.cart-table .c-qty { width: 130px; }
.cart-table .c-act { width: 76px; text-align: right; }
.cart-table .qtybox { display: inline-flex; align-items: center; border: 1px solid var(--line-default); border-radius: var(--r-btn); overflow: hidden; }
.cart-table .qtybox button {
width: 30px; height: 32px; border: 0; background: var(--bg-subtle);
color: var(--text-secondary); font-size: 16px; line-height: 1; cursor: pointer;
transition: background .16s var(--ease), color .16s var(--ease);
}
.cart-table .qtybox button:hover { background: var(--brand-primary-light); color: var(--brand-primary); }
.cart-table .qtybox input {
width: 46px; height: 32px; border: 0; text-align: center;
font-size: var(--fs-body-s); font-weight: 700; -moz-appearance: textfield;
}
.cart-table .qtybox input::-webkit-outer-spin-button,
.cart-table .qtybox input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-foot {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
padding: 16px 18px; background: var(--bg-subtle);
border-top: 1px solid var(--line-default);
}
.cart-count { font-size: var(--fs-body-s); color: var(--text-secondary); }
.cart-warn { font-size: var(--fs-caption); color: var(--state-warning); background: var(--state-warning-bg); padding: 5px 10px; border-radius: var(--r-tag); }
.cart-total { margin-left: auto; font-size: var(--fs-body-s); color: var(--text-secondary); }
.cart-total b { font-size: var(--fs-h3); color: var(--brand-accent); font-variant-numeric: tabular-nums; margin-left: 6px; }
.cart-form { margin-top: 30px; }
.cart-form__foot, .ct-form__foot {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-default);
}
.cart-form__foot .hint, .ct-form__foot .hint { font-size: var(--fs-caption); color: var(--text-secondary); }
/* ---- 15.3 产品多维对比（compare.php） ---- */
.cmp-toolbar {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
padding: 14px 18px; margin-bottom: 18px;
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: var(--bg-subtle);
}
.cmp-sw { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-body-s); font-weight: 600; color: var(--text-primary); cursor: pointer; user-select: none; }
.cmp-sw input { width: 16px; height: 16px; accent-color: var(--brand-primary); cursor: pointer; }
.cmp-cnt { font-size: var(--fs-body-s); color: var(--text-secondary); }
.cmp-cnt b { color: var(--brand-primary); font-weight: 700; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 720px; }
.cmp-table th, .cmp-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-default); font-size: var(--fs-body-s); vertical-align: top; text-align: left; }
.cmp-table thead th { position: sticky; top: 0; z-index: 2; background: #fff; border-bottom: 1px solid var(--line-strong); }
.cmp-dim {
position: sticky; left: 0; z-index: 1;
width: 168px; min-width: 168px;
background: var(--bg-subtle); color: var(--text-secondary);
font-weight: 600; text-align: left;
}
.cmp-table thead .cmp-dim { z-index: 3; background: var(--bg-subtle); }
.cmp-prod { min-width: 200px; max-width: 260px; }
.cmp-prod__art { display: block; margin-bottom: 8px; }
.cmp-prod__art svg { display: block; width: 66px; height: 66px; }
/* 有实验图时出真图：版位与占位图形同宽（66px），按 4:3 取高，cover 居中裁切。 */
.cmp-prod__art img {
display: block; width: 66px; height: 50px; object-fit: cover;
border-radius: var(--r-btn); background: var(--bg-subtle);
}
.cmp-prod__nm { display: block; font-size: var(--fs-body-s); font-weight: 700; line-height: 1.45; color: var(--text-primary); margin-bottom: 4px; }
.cmp-prod__nm:hover { color: var(--brand-primary); }
.cmp-prod .catno { display: inline-block; font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--text-secondary); }
.cmp-prod__act { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.cmp-group td {
background: linear-gradient(90deg, var(--brand-primary-light) 0%, rgba(232, 242, 237, 0) 100%);
font-size: var(--fs-caption); font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--brand-primary-dark);
padding: 9px 14px; position: sticky; left: 0;
}
.cmp-row th.cmp-dim { font-weight: 600; color: var(--text-secondary); }
.cmp-row td { line-height: 1.6; }
.cmp-row.is-diff td { background: #FFFDF6; }
.cmp-row.is-diff th.cmp-dim { background: #FFF9E9; color: var(--text-primary); }
.cmp-row.is-empty td { color: var(--text-disabled); }
.cmp-diffdot {
display: inline-block; width: 6px; height: 6px; margin-left: 6px;
border-radius: 50%; background: var(--brand-accent); vertical-align: middle;
}
.cmp-na { color: var(--text-disabled); }
/* 「仅看差异」：隐藏无差异行与全空行 */
.cmp-table.only-diff .cmp-row:not(.is-diff) { display: none; }
.cmp-table.only-diff .cmp-row.is-empty { display: none; }
/* ---- 15.4 文献库（refs.php） ---- */
.ref-bar {
padding: 16px 18px; margin-bottom: 24px;
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: var(--bg-subtle);
}
.ref-bar form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ref-bar input[type=search] {
flex: 1 1 260px; min-width: 0; height: var(--h-input);
padding: 0 14px; border: 1px solid var(--line-default); border-radius: var(--r-input);
background: #fff; font-size: var(--fs-body-s);
}
.ref-bar input[type=search]:focus { outline: 0; border-color: var(--brand-primary); box-shadow: 0 0 0 3px rgba(35, 105, 82, .12); }
.ref-bar select {
height: var(--h-input); padding: 0 34px 0 12px; min-width: 140px;
border: 1px solid var(--line-default); border-radius: var(--r-input);
background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235C6670' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
appearance: none; -webkit-appearance: none;
font-size: var(--fs-body-s); color: var(--text-primary); cursor: pointer;
}
.ref-bar select:focus { outline: 0; border-color: var(--brand-primary); }
.ref-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.ref-list { display: flex; flex-direction: column; gap: 14px; }
/* ---------------- 产品手册列表（manuals.php） ---------------- */
.ds-list { display: flex; flex-direction: column; }
.ds-row {
display: grid; grid-template-columns: 130px minmax(0, 1fr) auto;
gap: 18px; align-items: center;
padding: 14px 4px; border-bottom: 1px solid var(--line-default);
}
.ds-row:last-child { border-bottom: 0; }
.ds-row__no { font-family: var(--ff-display); font-weight: 700; color: var(--brand-primary); }
.ds-row__no a { text-decoration: none; }
.ds-row__no a:hover, .ds-row__no a:focus-visible { color: var(--brand-dark, #1E5540); }
.ds-row__t { font-size: var(--fs-body); color: var(--text-primary); line-height: 1.6; min-width: 0; }
.ds-row__t .zh { display: block; font-size: var(--fs-caption); color: var(--text-secondary); margin-top: 2px; }
.ds-row__act { display: flex; gap: 8px; flex-wrap: wrap; }
.ds-row__act .btn { white-space: nowrap; }
@media (max-width: 760px) {
.ds-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
.ds-row__act { justify-content: flex-start; }
}
.ref-card {
border: 1px solid var(--line-default); border-left: 3px solid transparent;
border-radius: var(--r-card); background: #fff;
padding: 18px 20px; box-shadow: var(--sh-card);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.ref-card:hover { border-left-color: var(--brand-primary); box-shadow: 0 10px 26px rgba(16, 24, 40, .09); transform: translateY(-2px); }
.ref-card__hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.ref-year {
display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
border-radius: var(--r-tag); background: var(--brand-primary);
color: #fff; font-size: var(--fs-caption); font-weight: 800;
font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.ref-if {
display: inline-flex; align-items: center; height: 22px; padding: 0 9px;
border-radius: var(--r-tag); background: var(--brand-accent-light);
color: var(--brand-accent); font-size: var(--fs-caption); font-weight: 800;
font-variant-numeric: tabular-nums;
}
.ref-card__t { font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; margin: 0 0 6px; }
.ref-card__t a { color: var(--text-primary); }
.ref-card__t a:hover { color: var(--brand-primary); text-decoration: underline; text-underline-offset: 3px; }
.ref-card__sub { font-size: var(--fs-body-s); color: var(--text-secondary); font-style: italic; line-height: 1.6; margin: 0 0 8px; }
.ref-card__abs { font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.72; margin: 0 0 10px; }
.ref-card__meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-disabled); }
.ref-card__meta b { color: var(--text-secondary); font-weight: 700; }
.ref-card__foot {
display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-default);
font-size: var(--fs-body-s);
}
.ref-card__foot .lb { font-size: var(--fs-caption); color: var(--text-disabled); }
.ref-card__foot .catno { font-family: var(--ff-mono); font-weight: 700; color: var(--brand-primary); }
.ref-card__foot .catno:hover { text-decoration: underline; text-underline-offset: 3px; }
.ref-card__foot .pn { color: var(--text-secondary); }
.ref-aside { display: flex; flex-direction: column; gap: 18px; }
/* ---- 15.5 积分计划（points.php） ---- */
.pts-hero {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px;
align-items: center; padding: 44px 44px;
border-radius: 8px; color: #fff; overflow: hidden; position: relative;
background: linear-gradient(118deg, #10362A 0%, #1B5745 52%, #276B52 100%);
}
.pts-hero::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .16) 1px, transparent 0);
background-size: 22px 22px; opacity: .5;
}
.pts-hero > * { position: relative; z-index: 1; }
.pts-hero__l, .pts-hero__r { min-width: 0; }
.pts-hero h1 { font-size: var(--fs-h1); font-family: var(--ff-display); margin: 6px 0 10px; }
.pts-hero__rate { display: flex; gap: 30px; flex-wrap: wrap; margin-top: 26px; }
.pts-hero__rate > div { display: flex; flex-direction: column; gap: 2px; }
.pts-hero__rate b { font-size: 30px; font-family: var(--ff-display); line-height: 1.1; font-variant-numeric: tabular-nums; }
.pts-hero__rate span { font-size: var(--fs-caption); color: rgba(255, 255, 255, .72); }
.pts-calc {
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
border-radius: var(--r-card); padding: 22px; backdrop-filter: blur(3px);
}
.pts-calc > b { display: block; font-size: var(--fs-h4); margin-bottom: 14px; }
.pts-calc label { display: block; font-size: var(--fs-caption); color: rgba(255, 255, 255, .78); }
.pts-calc input {
width: 100%; height: 42px; margin-top: 7px; padding: 0 12px;
border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--r-input);
background: rgba(255, 255, 255, .12); color: #fff;
font-size: var(--fs-h4); font-weight: 700; font-variant-numeric: tabular-nums;
}
.pts-calc input:focus { outline: 0; border-color: #fff; background: rgba(255, 255, 255, .18); }
.pts-calc__out {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .2);
}
.pts-calc__out span { font-size: var(--fs-caption); color: rgba(255, 255, 255, .78); }
.pts-calc__out b { font-size: 26px; font-family: var(--ff-display); font-variant-numeric: tabular-nums; }
.pts-calc__hint { margin: 12px 0 0; font-size: var(--fs-caption); color: rgba(255, 255, 255, .62); line-height: 1.6; }
.pts-tasks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pts-task {
display: flex; flex-direction: column; gap: 12px;
padding: 20px; border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; box-shadow: var(--sh-card);
transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.pts-task:hover { border-color: var(--brand-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .10); }
.pts-task__v {
align-self: flex-start; padding: 4px 11px; border-radius: var(--r-pill);
background: var(--brand-primary-light); color: var(--brand-primary);
font-size: var(--fs-body-s); font-weight: 800; font-variant-numeric: tabular-nums;
}
.pts-task__b { display: flex; flex-direction: column; gap: 5px; }
.pts-task__b b { font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.pts-task__b span { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.62; }
.pts-rules { max-width: 880px; }
/* 手风琴头部里的箭头（.acc__head 已有基础样式，此处只补图标容器） */
.acc__ico { display: inline-flex; align-items: center; justify-content: center; color: var(--text-disabled); transition: transform .22s var(--ease), color .22s var(--ease); }
.acc__item.is-open .acc__ico { transform: rotate(180deg); color: var(--brand-primary); }
/* ---- 15.6 账户中心（member.php） ---- */
/* ---- 15.7 联系 / 关于（contact.php · about.php） ---- */
.ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 30px; align-items: start; }
.ct-aside { display: flex; flex-direction: column; gap: 18px; }
.ct-prod {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 12px 16px; margin-bottom: 18px;
border: 1px solid var(--line-default); border-left: 3px solid var(--brand-primary);
border-radius: var(--r-card); background: var(--brand-primary-light);
font-size: var(--fs-body-s);
}
.ct-prod .lb { font-size: var(--fs-caption); color: var(--text-secondary); }
.ct-prod .catno { font-family: var(--ff-mono); font-weight: 800; color: var(--brand-primary); }
.ct-prod .catno:hover { text-decoration: underline; text-underline-offset: 3px; }
.ct-prod .nm { font-weight: 700; color: var(--text-primary); }
.ct-prod .mt { color: var(--text-secondary); font-size: var(--fs-caption); }
.ct-err {
display: flex; align-items: center; gap: 9px;
padding: 12px 15px; margin-bottom: 18px;
border: 1px solid #F3C7C7; border-left: 3px solid var(--brand-accent);
border-radius: var(--r-card); background: var(--brand-accent-light);
font-size: var(--fs-body-s); color: #8A0000; font-weight: 600;
}
.ct-done {
text-align: center; padding: 48px 30px;
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; box-shadow: var(--sh-card);
}
.ct-done__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 64px; height: 64px; margin-bottom: 18px;
border-radius: 50%; background: var(--state-success-bg); color: var(--state-success);
}
.ct-done h1, .ct-done h2 { font-size: var(--fs-h2); margin: 0 0 12px; }
.ct-done p { max-width: 620px; margin: 0 auto 22px; font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.78; }
.ct-done p a { color: var(--brand-primary); font-weight: 700; }
.ct-form { display: block; }
/* 表单操作行：主按钮 + 次级文字入口（「已有账号，去登录」之类）。
放这儿是为了让 5 个认证页（注册/登录/找回/重置/资料）共用同一套间距，
否则按钮紧贴上一个输入框，手机上还容易跟随内容折行错位。 */
.ct-form__act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.ct-form__act a:not(.btn) { font-size: var(--fs-body-s); color: var(--brand-primary); font-weight: 700; }
.ct-form__act a:not(.btn):hover { text-decoration: underline; text-underline-offset: 3px; }
/* 表单必填说明：电话/邮箱是「至少填一项」，两个标签都打 * 但不加 HTML required
（只填一项时 required 会误拦），具体规则由服务端把关，这里只做提示。 */
.ct-form__note { margin: 12px 0 16px; font-size: var(--fs-caption); color: var(--text-secondary); }
.ct-form__note .req { color: var(--brand-accent); font-weight: 800; }
.ct-line { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--line-default); font-size: var(--fs-body-s); }
.ct-line:last-of-type { border-bottom: 0; }
.ct-line .k { flex: 0 0 68px; color: var(--text-disabled); font-size: var(--fs-caption); }
.ct-line .v { color: var(--text-primary); font-weight: 600; word-break: break-word; }
a.ct-line .v, .ct-line a.v { color: var(--brand-primary); }
a.ct-line .v:hover, .ct-line a.v:hover { text-decoration: underline; text-underline-offset: 3px; }
.ab-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 34px; align-items: start; }
.ab-body { font-size: var(--fs-body); line-height: 1.88; color: var(--text-secondary); }
.ab-aside { display: flex; flex-direction: column; gap: 18px; }
.ab-claims { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ab-claims li { display: flex; align-items: flex-start; gap: 9px; font-size: var(--fs-body-s); line-height: 1.68; color: var(--text-secondary); }
.ab-claims li svg { flex: 0 0 auto; margin-top: 3px; color: var(--state-success); }
.ab-point {
padding: 24px; border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; box-shadow: var(--sh-card);
transition: border-color .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.ab-point:hover { border-color: var(--brand-primary); transform: translateY(-3px); box-shadow: 0 12px 28px rgba(16, 24, 40, .10); }
.ab-point__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 48px; height: 48px; margin-bottom: 15px;
border-radius: 6px; background: var(--brand-primary-light); color: var(--brand-primary);
}
.ab-point h3 { font-size: var(--fs-h4); margin: 0 0 9px; }
.ab-point p { font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.76; margin: 0; }
/* ---- 15.8 资讯详情（news-detail.php） ---- */
.art-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.art-head { margin-bottom: 22px; }
.art-head h1 { font-size: var(--fs-h1); line-height: 1.32; margin: 8px 0 10px; }
.art-sub { font-size: var(--fs-h3); font-weight: 400; color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px; }
.art-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: var(--fs-caption); color: var(--text-disabled); }
.art-cover { display: block; width: 100%; height: auto; margin: 0 0 26px; border-radius: var(--r-card); }
.art-foot {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px;
margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line-default);
}
.art-nav {
display: flex; flex-direction: column; gap: 5px;
padding: 15px 17px; border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; transition: border-color .18s var(--ease), background .18s var(--ease), transform .18s var(--ease);
}
.art-nav:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); transform: translateY(-2px); }
.art-nav span { font-size: var(--fs-caption); color: var(--text-disabled); }
.art-nav b { font-size: var(--fs-body-s); font-weight: 700; color: var(--text-primary); line-height: 1.55; }
.art-aside { display: flex; flex-direction: column; gap: 18px; }
/* ---- 15.9 搜索页（search.php） ---- */
.srch-big {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 10px 10px 10px 20px; margin-bottom: 6px;
border: 1px solid var(--line-strong); border-radius: var(--r-pill);
background: #fff; box-shadow: var(--sh-card);
}
.srch-big:focus-within { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(35, 105, 82, .12); }
.srch-big input[type=search], .srch-big input[type=text] {
flex: 1 1 240px; min-width: 0; height: 42px;
border: 0; background: transparent; font-size: var(--fs-h4);
}
.srch-big select {
height: 34px; border: 0; border-radius: var(--r-btn);
padding: 0 28px 0 12px;
background: var(--bg-subtle) url("data:image/svg+xml;utf8,") no-repeat right 8px center;
font-size: var(--fs-body-s); color: var(--text-secondary); cursor: pointer;
-webkit-appearance: none; appearance: none; min-width: 96px;
}
.srch-big select:hover { background-color: #eef1f3; }
.srch-big input:focus { outline: 0; }
.srch-tips {
display: flex; align-items: flex-start; gap: 10px;
margin-top: 18px; padding: 14px 17px;
border: 1px solid var(--line-default); border-left: 3px solid var(--state-info);
border-radius: var(--r-card); background: var(--state-info-bg);
font-size: var(--fs-body-s); color: #14538F; line-height: 1.72;
}
.srch-tips svg { flex: 0 0 auto; margin-top: 2px; }
/* ---- 15.10 响应式补充 ---- */
@media (max-width: 1200px) {
.pts-tasks { grid-template-columns: repeat(3, 1fr); }
.dl-cats { grid-template-columns: repeat(3, 1fr); }
.cart-layout { grid-template-columns: minmax(0, 1fr) 280px; }
.ref-layout, .art-layout, .ct-layout, .ab-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; }
}
@media (max-width: 1000px) {
.cart-layout, .ref-layout, .art-layout, .ct-layout, .ab-grid { grid-template-columns: 1fr; }
.cart-aside, .ref-aside, .art-aside, .ct-aside, .ab-aside { position: static; } /* 卡在手机上并排显示更省纵向空间 */
.pts-hero { grid-template-columns: 1fr; padding: 32px 26px; gap: 26px; }
.pts-tasks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
.dl-cats { grid-template-columns: repeat(2, 1fr); }
.dl-search input[type=search], .ref-bar input[type=search] { flex: 1 1 100%; }
.dl-search .btn, .ref-bar .btn { flex: 0 0 auto; }
}
@media (max-width: 700px) {
.pager { justify-content: center; text-align: center; }
.pager__links { justify-content: center; }
.pager__btn { min-width: 30px; height: 30px; padding: 0 8px; font-size: var(--fs-caption); }
.dl-cats { grid-template-columns: 1fr; }
.dl-cat { flex-direction: row; text-align: left; padding: 15px 16px; gap: 15px; }
.dl-cat__art { width: 56px; height: 56px; flex: 0 0 auto; }
.dl-cat__body { align-items: flex-start; }
.dl-cat__body .n { margin-top: 2px; }
.pts-tasks { grid-template-columns: 1fr; }
.pts-hero h1 { font-size: var(--fs-h2); }
.pts-hero__rate { gap: 20px; }
.pts-hero__rate b { font-size: 24px; }
.art-head h1 { font-size: var(--fs-h2); }
.art-sub { font-size: var(--fs-body); }
.art-foot { grid-template-columns: 1fr; }
.srch-big { border-radius: var(--r-card); padding: 8px 8px 8px 15px; }
.srch-big input[type=search], .srch-big input[type=text] { font-size: var(--fs-body); }
.srch-big .btn { width: 100%; }
.cmp-toolbar { padding: 12px 14px; gap: 12px; }
.cart-foot { gap: 10px; }
.cart-total { margin-left: 0; width: 100%; display: flex; align-items: baseline; justify-content: space-between; }
/* 对比栏：① 让开移动浮条（浮条 z-index 200 > 对比栏 150，否则被压在下面完全点不到）
② 压成单行紧凑布局，避免在手机上独占 190px 高度
③ body 的补偿留白由 app.js 的 syncTraySpace() 按实测高度动态给 */
.compare-tray { bottom: 62px; }
.compare-tray .wrap { gap: 10px; padding: 8px var(--pad-mobile); flex-wrap: nowrap; }
.compare-tray__lead { display: none; }
.compare-tray__items { flex: 1 1 auto; min-width: 0; }
.compare-tray__item { width: 132px; }
.compare-tray__empty { font-size: var(--fs-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-tray__act { flex: 0 0 auto; gap: 6px; }
.compare-tray .btn { height: 30px; padding: 0 11px; font-size: var(--fs-caption); }
}
/* ==========================================================================
会员体系（注册 / 登录 / 找回密码 / 会员中心 / 资料维护 / 我的询价 / 我的积分）
--------------------------------------------------------------------------
设计取向：前台以白底 + 品牌绿为主，比后台轻一档；
全部走 ablumir.css 的设计 token，不新增颜色语义。
========================================================================== */
/* ---------- 0. 反垃圾蜜罐（register / login / forgot / contact） ----------
不能用 display:none 或 visibility:hidden —— 一部分采集脚本会跳过隐藏元素；
这里用「绝对定位移出视口 + 1px 裁剪 + opacity:0」：真实用户看不到，
机器人按 DOM 顺序仍然会填。类名必须是 ab-hp：ablumir.css 里的 .hp
是另一个无关布局类（display:flex），复用会让「请勿填写」框直接暴露出来。 */
.ab-hp {
position: absolute !important;
left: -9999px !important;
top: auto !important;
width: 1px; height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
/* ---------- 1. 表单页骨架：主栏 + 侧栏 ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 44px; align-items: start; }
.auth--narrow { grid-template-columns: minmax(0, 620px); justify-content: center; }
.auth__main { min-width: 0; }
.auth__side { display: grid; gap: 14px; position: sticky; top: 92px; }
.auth-card {
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); padding: 20px 22px;
}
.auth-card h3 {
display: flex; align-items: center; gap: 8px;
margin: 0 0 14px; font-size: var(--fs-h4); color: var(--text-primary);
}
.auth-card h3 svg { color: var(--brand-primary); flex: none; }
.auth-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.auth-list li { display: grid; gap: 2px; padding-left: 16px; position: relative; }
.auth-list li::before {
content: ''; position: absolute; left: 2px; top: 7px;
width: 6px; height: 6px; border-radius: 50%; background: var(--brand-primary);
}
.auth-list b { font-size: var(--fs-body-s); color: var(--text-primary); }
.auth-list span { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.65; }
.auth-note {
display: flex; gap: 9px; align-items: flex-start;
background: var(--bg-subtle); border: 1px solid var(--line-default);
border-radius: var(--r-card); padding: 13px 15px;
font-size: var(--fs-caption); line-height: 1.75; color: var(--text-secondary);
}
.auth-note svg { color: var(--brand-primary); flex: none; margin-top: 2px; }
.auth-note b { color: var(--text-primary); }
/* 协议勾选框 */
.ck { display: flex; gap: 9px; align-items: flex-start; margin: 16px 0 4px; font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.7; cursor: pointer; }
.ck input { margin-top: 3px; flex: none; width: 15px; height: 15px; accent-color: var(--brand-primary); }
.ck a { color: var(--brand-primary); }
/* 成功提示（与 .ct-err 对称） */
.ct-ok {
display: flex; align-items: center; gap: 8px;
background: var(--state-success-bg); border: 1px solid #BFE3CE;
color: #146B3C; border-radius: var(--r-btn);
padding: 11px 14px; margin-bottom: 18px; font-size: var(--fs-body-s);
}
.ct-ok svg { flex: none; }
/* ---------- 2. 未登录的会员中心 ---------- */
.mem-guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.mem-guest__card {
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); padding: 26px 24px;
}
.mem-guest__card h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-h4); }
.mem-guest__card h3 svg { color: var(--brand-primary); }
.mem-guest__card .sm { margin: 0 0 18px; }
.mem-guest__card .btn + .btn { margin-top: 8px; }
.mem-guest__card--accent {
border-color: var(--brand-primary);
background: linear-gradient(180deg, var(--brand-primary-light) 0%, #fff 62%);
}
.mem-guest__tip { display: block; margin-top: 12px; font-size: var(--fs-caption); color: var(--text-disabled); }
/* 快捷入口卡 */
.quick-card {
display: grid; gap: 5px; padding: 18px 18px 20px;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); transition: all .16s var(--ease);
}
.quick-card:hover { border-color: var(--brand-primary); box-shadow: var(--sh-pop); text-decoration: none; }
.quick-card__ico {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 5px;
background: var(--brand-primary-light); color: var(--brand-primary); margin-bottom: 4px;
}
.quick-card b { font-size: var(--fs-body-s); color: var(--text-primary); }
.quick-card span:last-child { font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.7; }
/* ---------- 3. 会员中心头部 ---------- */
.mem-head {
display: flex; align-items: center; justify-content: space-between;
gap: 20px; flex-wrap: wrap;
padding: 22px 24px; background: #fff;
border: 1px solid var(--line-default); border-radius: var(--r-card);
margin-bottom: 18px;
}
.mem-head__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mem-head__avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 54px; height: 54px; border-radius: 50%; flex: none;
background: var(--brand-primary-light); color: var(--brand-primary);
}
.mem-head h1 { display: flex; align-items: center; gap: 10px; margin: 0 0 3px; font-size: 24px; }
.mem-lv {
font-size: var(--fs-caption); font-weight: 700; color: #8A6A14;
background: linear-gradient(90deg, #FFF3D0, #FFE7A8);
border: 1px solid #EFD79A; border-radius: var(--r-pill); padding: 2px 10px;
}
.mem-head__act { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* KPI 卡 */
.mem-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.mem-kpi {
display: grid; gap: 2px; padding: 18px 18px 16px;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); transition: all .16s var(--ease);
}
a.mem-kpi:hover { border-color: var(--brand-primary); box-shadow: var(--sh-pop); text-decoration: none; }
.mem-kpi__lb { font-size: var(--fs-caption); color: var(--text-secondary); }
.mem-kpi__v { font-size: 28px; font-weight: 800; color: var(--text-primary); line-height: 1.25; font-variant-numeric: tabular-nums; }
.mem-kpi__sub { font-size: var(--fs-caption); color: var(--text-disabled); }
.mem-todo {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
background: var(--state-warning-bg); border: 1px solid #F1DFB6;
border-radius: var(--r-card); padding: 13px 16px; margin-bottom: 18px;
font-size: var(--fs-body-s); color: #7A5300;
}
.mem-todo svg { flex: none; }
.mem-todo b { color: #5C3E00; }
.mem-todo .btn { margin-left: auto; }
/* 两栏 */
.mem-cols { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.mem-col { min-width: 0; }
/* 列表 */
.mem-list { display: grid; gap: 10px; }
.mem-item { padding: 14px 16px; background: #fff; border: 1px solid var(--line-default); border-radius: var(--r-card); }
.mem-item__hd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 7px; }
.mem-item__txt { margin: 0; font-size: var(--fs-body-s); color: var(--text-primary); line-height: 1.7; }
.mem-item__time { font-size: var(--fs-caption); color: var(--text-disabled); margin-left: auto; }
.mem-item__reply {
display: flex; gap: 7px; align-items: flex-start; margin: 9px 0 0;
padding: 9px 11px; background: var(--brand-primary-light);
border-radius: var(--r-btn); font-size: var(--fs-body-s); color: #1B5039; line-height: 1.7;
}
.mem-item__reply svg { flex: none; margin-top: 3px; color: var(--brand-primary); }
.mem-item--pt { display: flex; align-items: center; gap: 13px; }
.mem-pt__v { font-size: 18px; font-weight: 800; color: var(--state-success); font-variant-numeric: tabular-nums; flex: none; min-width: 62px; }
.mem-pt__v.is-minus { color: var(--brand-accent); }
.mem-empty {
padding: 30px 20px; text-align: center;
background: var(--bg-subtle); border: 1px dashed var(--line-strong);
border-radius: var(--r-card);
}
.mem-empty--big { padding: 54px 20px; }
.mem-empty p { margin: 0 0 14px; color: var(--text-secondary); font-size: var(--fs-body-s); }
/* ---------- 4. 我的询价 ---------- */
.seg__i {
display: inline-flex; align-items: center; gap: 6px;
padding: 0 15px; height: var(--h-btn-sm);
font-size: var(--fs-body-s); color: var(--text-secondary);
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-pill); margin: 0 8px 20px 0;
}
.seg__i:hover { border-color: var(--brand-primary); color: var(--brand-primary); text-decoration: none; }
.seg__i.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; font-weight: 700; }
.seg__n { font-size: var(--fs-caption); opacity: .8; font-variant-numeric: tabular-nums; }
.inq-list { display: grid; gap: 14px; }
.inq { padding: 18px 20px; background: #fff; border: 1px solid var(--line-default); border-radius: var(--r-card); }
.inq__hd { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 10px; }
.inq__no { font-size: var(--fs-caption); color: var(--text-disabled); font-family: var(--ff-mono); }
.inq__time { margin-left: auto; font-size: var(--fs-caption); color: var(--text-disabled); }
.inq__txt { margin: 0; font-size: var(--fs-body-s); color: var(--text-primary); line-height: 1.8; white-space: pre-wrap; }
.inq__reply {
margin-top: 13px; padding: 13px 15px;
background: var(--brand-primary-light); border-left: 3px solid var(--brand-primary);
border-radius: 0 var(--r-btn) var(--r-btn) 0;
}
.inq__reply__lb { display: flex; align-items: center; gap: 6px; font-size: var(--fs-caption); font-weight: 700; color: var(--brand-primary-dark); margin-bottom: 5px; }
.inq__reply p { margin: 0; font-size: var(--fs-body-s); color: #1B5039; line-height: 1.8; white-space: pre-wrap; }
/* ---------- 5. 我的积分 ---------- */
.pt-hero {
display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
padding: 28px 30px; border-radius: var(--r-card);
background: linear-gradient(120deg, var(--brand-primary) 0%, #2E7C61 62%, #359177 100%);
color: #fff;
}
.pt-hero__main { flex: 1 1 260px; min-width: 0; }
.pt-hero__lb { display: block; font-size: var(--fs-caption); opacity: .82; letter-spacing: .1em; }
.pt-hero__v { display: block; font-size: 46px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pt-hero__worth { display: block; font-size: var(--fs-body-s); opacity: .9; }
.pt-hero__side { display: flex; gap: 34px; }
.pt-hero__side div { display: grid; gap: 2px; text-align: right; }
.pt-hero__side b { font-size: 20px; font-variant-numeric: tabular-nums; }
.pt-hero__side span { font-size: var(--fs-caption); opacity: .82; }
.pt-table { border: 1px solid var(--line-default); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.pt-table__hd, .pt-table__row {
display: grid; grid-template-columns: 150px 74px minmax(0, 1fr) 110px 90px 90px;
gap: 12px; align-items: center; padding: 11px 16px;
}
.pt-table__hd {
background: var(--bg-subtle); border-bottom: 1px solid var(--line-default);
font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary);
}
.pt-table__row { border-bottom: 1px solid var(--line-default); font-size: var(--fs-body-s); color: var(--text-primary); }
.pt-table__row:last-child { border-bottom: 0; }
.pt-table__row:hover { background: var(--bg-subtle); }
.pt-table__t { font-size: var(--fs-caption); color: var(--text-disabled); font-variant-numeric: tabular-nums; }
.pt-table__ref { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.ta-r { text-align: right; }
.c-up { color: var(--state-success); }
.c-down { color: var(--brand-accent); }
/* ---------- 6. 响应式 ---------- */
@media (max-width: 1023px) {
.auth { grid-template-columns: 1fr; gap: 28px; }
.auth__side { position: static; }
.mem-cols { grid-template-columns: 1fr; gap: 30px; }
.mem-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.mem-guest { grid-template-columns: 1fr; }
.mem-head { padding: 18px; }
.mem-head h1 { font-size: 20px; }
.mem-kpi__v { font-size: 24px; }
.mem-todo .btn { margin-left: 0; width: 100%; }
.pt-hero { padding: 22px 20px; }
.pt-hero__v { font-size: 36px; }
.pt-hero__side { gap: 20px; }
.pt-hero__side div { text-align: left; }
.pt-table__hd { display: none; }
.pt-table__row { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; padding: 14px 16px; }
.pt-table__row > span:nth-child(1) { grid-column: 1 / -1; }
.pt-table__row > span:nth-child(3) { grid-column: 1 / -1; }
.pt-table__row > span:nth-child(4) { display: none; }
.pt-table__row .ta-r { text-align: left; }
}
/* ==========================================================================
产品详情页 · 重设计
--------------------------------------------------------------------------
取舍：
· **单页长滚动 + 粘性锚点导航**：一眼看全，且与说明书 PDF 章节同序
· 每个字段只在一个板块里出现一次（去重复展示）
· 字段表统一成**行式斑马纹**，不一处 一处 各写一套
· 图区带「应用筛选胶囊 + 图注 + 全屏放大」
========================================================================== */
/* ==========================================================================
一、首屏三栏骨架
--------------------------------------------------------------------------
首屏必须同时看到画廊 / 信息栏 / 购买框（价格不能被挤到第二行）。
「画廊 | 字段 | 价格栏常驻」三栏。
列宽推导（内容区最宽 1280px，gap 20px×2）：
clamp(280,23%,320) + 20 + 信息(minmax(0,1fr)) + 20 + clamp(290,24%,330)
1440 视口 → 294 + 20 + 638 + 20 + 307 = 1279 ✓
1280 视口 → 276→280 + 20 + 592 + 20 + 288 = 1200 ✓
用百分比而不是写死 px，是为了让信息栏在 1200~1440 区间都尽量宽。
注意 .pd-buy 的 `margin-top:16px` 要清零 —— 它是给「信息栏内部尾块」留的，
提成独立网格项后不清零会让购买框比画廊低 16px、对不齐顶边。
========================================================================== */
.pd-top {
/* display / align-items 在本段里重复声明一次，是刻意的：
它们原本只写在 529 行的旧规则里，本段只覆盖了列定义 —— 属于隐式继承。
尤其 align-items:start 不能丢：默认值 stretch 会把 .pd-buy 拉满整列高度，
那它的 position:sticky 就再也没有可滑动的余量，右栏会「粘不住」。
写在这里，日后清理旧段时不会连带踩掉 sticky。 */
display: grid;
align-items: start;
grid-template-columns: clamp(280px, 23%, 320px) minmax(0, 1fr) clamp(290px, 24%, 330px);
gap: 20px;
}
.pd-top > * { min-width: 0; }
.pd-info { min-width: 0; } /* 允许被压缩，否则长内容撑破网格 */
.pd-buy { margin-top: 0; position: sticky; top: 16px; }
.pd-quick-h { font-size: 16px; font-weight: 700; margin: 18px 0 10px; }
.pd-quick-note { font-size: 13px; color: var(--text-secondary); align-self: center; }
/* ==========================================================================
二、手机端横向溢出防护
--------------------------------------------------------------------------
grid/flex 项默认 `min-width: auto`，自动最小尺寸 = min-content；
内部横排 flex 行不会把 min-content 归零，会把轨道顶宽、整页撑出横向滚动。
修法：沿链的 grid/flex 项 min-width 归零，让滚动容器自己出横向滚动条。
.pd-body 现在是块级盒子本不会触发，min-width:0 留作保险
—— 将来改回 grid/flex 时不会复发。
========================================================================== */
.pd-body, .pd-body > * { min-width: 0; }
.pd-sec { min-width: 0; }
@media (max-width: 1100px) {
/* 三栏放不下：画廊跨两行、购买框落到信息栏下方（仍占右窄栏） */
.pd-top { grid-template-columns: 300px minmax(0, 1fr); gap: 20px 24px; }
.pd-gallery { grid-row: 1 / span 2; }
.pd-buy { grid-column: 2; position: static; }
}
@media (max-width: 1000px) {
/* 单栏：顺序回到 画廊 → 信息 → 价格 */
.pd-top { grid-template-columns: minmax(0, 1fr); }
.pd-gallery { grid-row: auto; }
.pd-buy { grid-column: 1; }
}
@media (max-width: 767px) {
.pd-quick-note { display: block; width: 100%; margin-top: 2px; }
}
/* ==========================================================================
三、主要信息（首屏信息栏）
--------------------------------------------------------------------------
用 + 两列 grid 而不是 ：手机端直接把标签压到值上面，
不用像 那样把整张表 display:block 化（那套写法很容易把列宽压成 1%）。
斑马纹用 `4n+3 / 4n+4` 上色 —— 第 2、4… 行的 dt 与 dd 恰好落在这两个序号上。
========================================================================== */
.pd-core {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
margin: 18px 0 0;
border: 1px solid var(--line-default);
border-radius: 5px;
overflow: hidden;
font-size: var(--fs-body-s);
}
.pd-core dt {
padding: 9px 14px;
color: var(--text-secondary);
font-weight: 600;
white-space: nowrap;
border-bottom: 1px solid var(--line-default);
}
.pd-core dd {
margin: 0;
padding: 9px 14px;
line-height: 1.7;
border-bottom: 1px solid var(--line-default);
word-break: break-word;
}
.pd-core dt:nth-child(4n+3), .pd-core dd:nth-child(4n+4) { background: var(--bg-subtle); }
.pd-core > :nth-last-child(1), .pd-core > :nth-last-child(2) { border-bottom: 0; }
.pd-core dd a { color: var(--brand-primary); text-decoration: none; }
.pd-core dd a:hover { text-decoration: underline; }
.pd-core dd i { font-style: normal; color: var(--text-secondary); font-size: var(--fs-caption); }
/* 多值字段（反应物种 / 应用 / 修饰 …）之间的分隔符。
每个值都是一个下钻链接，逗号留在链接外面：颜色调淡一档，免得逗号和链接一样抢眼。 */
.pd-sep { color: var(--text-secondary); opacity: .7; }
/* ==========================================================================
四、图区（点击放大 + 标注）
--------------------------------------------------------------------------
图卡规范：
图上带实验类型标签 + 右下角全屏按钮，图下是写明 green/red 各标什么的图注。
⚠️ 控件全部挂在 .pd-shot__stagewrap 上，`.fig__img` 里只留 ![]()
——
app.js 的灯箱会把 .fig__img 的 innerHTML 整块搬进弹层，
控件放进去弹层里就会多出一整套按钮。
========================================================================== */
.pd-gal__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.pd-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
font-size: var(--fs-caption);
font-weight: 600;
color: var(--text-secondary);
background: #fff;
border: 1px solid var(--line-default);
border-radius: var(--r-pill);
cursor: pointer;
transition: color .16s, border-color .16s, background .16s;
}
.pd-chip b { font-weight: 700; font-size: 11px; opacity: .7; }
.pd-chip:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.pd-chip.is-on { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.pd-chip.is-on b { opacity: .85; }
.pd-shot { position: relative; }
.pd-shot__stagewrap { position: relative; }
/* 舞台高度压掉 .fig__img 的 4/3 默认值：876px 列宽下 4:3 高达 657px，
一张 blot 图居中后四周全是空底，视觉上「展示区太大」。
改固定高度 + contain，图不变形式不裁切，空底大幅收窄。 */
.pd-shot .fig__img {
cursor: zoom-in; aspect-ratio: auto; height: 440px;
/* 大图底与列表卡 .pcard__media 同款：品牌径向渐变 + 圆点纹理，两处视觉一致 */
background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F8F6 58%, #EAF1ED 100%);
position: relative; overflow: hidden;
}
.pd-shot .fig__img::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(35, 105, 82, .10) 1px, transparent 1px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}
@media (max-width: 900px) { .pd-shot .fig__img { height: 320px; } }
@media (max-width: 640px) { .pd-shot .fig__img { height: 260px; } }
/* 切图淡入淡出（与灯箱同一条曲线）：直接改 src 会在新旧图之间闪一段空白 */
.pd-shot .fig__img img { transition: opacity .18s ease; }
.pd-shot .fig__img img.is-fading { opacity: 0; }
.pd-shot .fig__img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.pd-shot__full {
position: absolute;
right: 10px;
bottom: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 11px;
font-size: var(--fs-caption);
font-weight: 600;
color: #fff;
background: rgba(26, 26, 26, .62);
border: 0;
border-radius: var(--r-pill);
cursor: pointer;
transition: background .16s;
}
.pd-shot__full:hover { background: var(--brand-primary); }
.pd-shot__nav {
position: absolute;
top: 50%;
z-index: 2;
width: 34px;
height: 34px;
margin-top: -17px;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
background: rgba(255, 255, 255, .88);
border: 1px solid var(--line-default);
border-radius: 50%;
cursor: pointer;
transition: background .16s, color .16s;
}
.pd-shot__nav:hover { background: #fff; color: var(--brand-primary); }
/* 箭头方向（修）：chev 的 path 是 `m9 6 6 6-6 6`，即 (9,6)→(15,12)→(9,18)，
形状是「>」——**朝右**。原注释写「chev 默认朝下 → 转成朝左」前提就错了，
于是 rotate(90deg) 把朝右转成了**朝下**、rotate(-90deg) 转成了**朝上**，
左右翻页按钮的箭头上下颠倒。之所以长期没暴露：库里 41 条产品一张图都没有，
这两个按钮压根不渲染（只有多图才出）。首次上传测试图后截图才看见。
正确：prev 用 rotate(180deg)（右→左），next 保持原朝向。 */
.pd-shot__nav--prev { left: 10px; }
.pd-shot__nav--prev svg { transform: rotate(180deg); }
.pd-shot__nav--next { right: 10px; }
.pd-shot__nav--next svg { transform: none; }
.pd-shot__count {
position: absolute;
left: 10px;
bottom: 10px;
z-index: 2;
padding: 4px 10px;
font-size: var(--fs-caption);
font-weight: 600;
color: #fff;
background: rgba(26, 26, 26, .55);
border-radius: var(--r-pill);
}
/* 图注（= 「标注」的展示端）：实验类型标签 + 说明文字 */
.pd-shot .fig__cap { padding: 12px 14px; }
/* 页面图注：贴在舞台下沿、与图区同一张卡片内，浅底 + 上分隔线，
读起来是「这张图的说明」而不是又一段正文。
min-height 只锁一行：图注长短不一，完全不锁的话切图整个左栏会跳一截；
锁太高则一行文案下面挂一大截空白。 */
.pd-shot__cap {
padding: 9px 14px 10px;
background: var(--bg-subtle, #F6F9F7);
border-top: 1px solid var(--line-default);
min-height: 40px;
}
.pd-shot__cap .pd-shot__note { display: block; }
.pd-shot__tag {
display: inline-block;
margin-right: 8px;
padding: 2px 8px;
font-size: 11px;
font-weight: 700;
letter-spacing: .02em;
color: var(--brand-primary);
background: var(--brand-primary-light);
border-radius: var(--r-tag);
vertical-align: 1px;
}
/* ---------------- 灯箱内翻页 ----------------
灯箱是 inset:0 铺满屏幕，页面上的 .pd-shot__nav 被它整个盖住够不着 ——
点开大图后不补箭头就翻不了下一张。
这两个箭头由 product.php 的 injectLbNav() 注入，图标直接复用页面上
[data-gal-prev] 的 innerHTML，所以朝向的修正（rotate 180 / none）与
.pd-shot__nav 保持一致，不要在这里另用手写角度。 */
/* 灯箱翻页箭头：挂在 .lb-box 卡片上（随灯箱卡片化一起改）——
箭头要贴着图，且深色底才压得住浅色图片。 */
.lb-arrow {
position: absolute;
top: 50%;
z-index: 3;
width: 42px;
height: 42px;
margin-top: -21px;
padding: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-primary);
background: rgba(255, 255, 255, .92);
border: 1px solid var(--line-default);
border-radius: 50%;
cursor: pointer;
box-shadow: 0 2px 10px rgba(16, 24, 40, .16);
transition: background .16s var(--ease), color .16s var(--ease);
}
.lb-arrow:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); }
.lb-arrow--prev { left: 12px; }
.lb-arrow--prev svg { transform: rotate(180deg); }
.lb-arrow--next { right: 12px; }
.lb-arrow--next svg { transform: none; }
/* 计数放在右上角工具条里 —— 底部那行已经被图注占了 */
.lb-arrow-cnt {
align-self: center;
padding: 0 6px;
font-size: var(--fs-caption);
font-weight: 600;
color: var(--text-secondary);
white-space: nowrap;
}
.pd-shot__note { color: var(--text-primary); line-height: 1.7; }
.pd-gal__thumbs {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
gap: 8px;
margin-top: 12px;
}
.pd-gal__thumbs button {
position: relative;
padding: 0;
aspect-ratio: 1/1;
background: var(--bg-subtle);
border: 2px solid transparent;
border-radius: 4px;
overflow: hidden;
cursor: pointer;
transition: border-color .16s;
}
.pd-gal__thumbs button img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-gal__thumbs button i {
position: absolute;
left: 3px;
bottom: 3px;
padding: 1px 5px;
font-size: 9px;
font-style: normal;
font-weight: 700;
color: #fff;
background: rgba(26, 26, 26, .66);
border-radius: 2px;
}
.pd-gal__thumbs button:hover { border-color: var(--line-strong); }
.pd-gal__thumbs button.is-on { border-color: var(--brand-primary); }
.pd-shot-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px;
border: 1px solid var(--line-default);
border-radius: var(--r-card);
/* 品牌底与列表卡 .pcard__media 同款：径向渐变 + 圆点纹理，详情页与列表视觉一致 */
background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F8F6 58%, #EAF1ED 100%);
position: relative; overflow: hidden;
}
.pd-shot-empty::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(35, 105, 82, .10) 1px, transparent 1px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}
.pd-shot-empty > svg { width: 100%; max-height: 260px; }
/* 无图态：占位图 + 说明 + 索取入口（41 条产品当前全走这条分支，是**主路径**而非兜底）。
.pd-glyph-note 的默认外观是「顶边框 + 灰底横条」，那是给图区底部的说明条用的；
放进这里居中堆叠的空态里会像挂了一条横幅 → 去掉边框与底色，压成正文小字。 */
.pd-shot-empty__t {
margin: 14px 0 6px;
font-size: var(--fs-body-s);
font-weight: 700;
color: var(--text-primary);
}
.pd-shot-empty .pd-glyph-note {
border-top: 0;
background: none;
padding: 0;
margin: 0 auto 14px;
max-width: 46ch;
/* 默认是 flex 横排（icon 在左、文字块在右），在**居中堆叠**的空态里会变成
「文字块内部居中、但整个块偏左」——两行文字的第二行看着明显偏左。
二稿：不要用 flex 修。
一稿写成 flex-direction:column（图标独占一行）确实让两行都居中了，
但图标被挤成孤零零的一行夹在标题和正文之间，很飘。
正解是回到普通块级 + text-align:center，让 svg 当**行内元素**跟着首行文字排，
「图标 + 两行字」整块一起居中。svg 的覆盖规则见下方。 */
display: block;
text-align: center;
line-height: 1.7;
}
/* 覆盖 .pd-glyph-note svg 的 flex:0 0 auto —— 块级上下文里得让它回到行内，
才会跟着文字走。vertical-align 微调，让图标与中文首行的视觉重心对齐。 */
.pd-shot-empty .pd-glyph-note svg {
display: inline-block;
vertical-align: -2px;
margin-right: 5px;
}
/* ==========================================================================
五、正文：粘性锚点导航 + 板块卡片
--------------------------------------------------------------------------
导航 top 用 CSS 变量 --pdnav-top，由页面脚本按站头实际高度写回：
桌面站头 72px、移动端站头会换行（.site-header__main 是 flex-wrap），
写死一个像素值必然在某个视口下被站头盖住。
--pdstick：锚点导航 / 右栏价格框的吸附线 = 站头 + **悬浮紧凑条**实际高度。
产品页滚动时 .pd-fixbar 占据站头下沿，导航再贴站头就会钻到它底下；
条高由页面脚本实测写回 --pdbar-h（桌面 55px、移动端换行会变），不留缝。
非产品页没有 fixbar，不用这个变量。
板块 scroll-margin-top 让锚点跳转后标题不会被粘性条挡住。
========================================================================== */
.pd-nav {
position: sticky;
top: var(--pdstick, 138px);
z-index: 60;
display: flex;
gap: 2px;
margin-top: 26px;
background: #fff;
border-bottom: 1px solid var(--line-default);
overflow-x: auto;
scrollbar-width: none;
}
.pd-nav::-webkit-scrollbar { display: none; }
.pd-nav__i {
flex: 0 0 auto;
padding: 14px 16px;
font-size: var(--fs-body);
font-weight: 600;
color: var(--text-secondary);
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color .16s, border-color .16s;
}
.pd-nav__i:hover { color: var(--brand-primary); }
.pd-nav__i.is-on { color: var(--brand-primary); border-bottom-color: var(--brand-primary); }
.pd-body { display: block; }
/* --pdstick：悬浮紧凑条的吸附线（站头高 + 条实测高），.pd-sec 的锚点落点由它推导；
偏移只走 .pd-sec 的 scroll-margin-top，html 层不再叠加 scroll-padding（两者并存会双倍补偿） */
html {
--pdstick: calc(var(--pdnav-top, 72px) + var(--pdbar-h, 66px));
}
.pd-sec {
margin-top: 22px;
padding: 26px 30px;
background: #fff;
border: 1px solid var(--line-default);
border-radius: var(--r-card);
/* 偏移量 = 吸附线（站头 + 悬浮紧凑条）+ 导航条自身高度 + 呼吸位，
锚点跳转后板块标题正好露在导航条下沿。 */
scroll-margin-top: calc(var(--pdstick, 138px) + var(--pdnav-h, 52px) + 16px);
}
.pd-sec__h {
display: flex;
align-items: baseline;
gap: 12px;
position: relative;
margin: 0 0 18px;
padding-left: 15px;
font-size: var(--fs-h3);
line-height: 1.3;
}
.pd-sec__h::before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 4px;
border-radius: 2px;
background: var(--brand-primary);
}
.pd-sec__h span {
font-size: var(--fs-caption);
font-weight: 400;
color: var(--text-secondary);
letter-spacing: .02em;
}
.pd-sec__h em { margin-left: auto; font-size: var(--fs-caption); font-style: normal; font-weight: 600; color: var(--brand-primary); }
/* 板块标题右侧的计数（如「参考文献 128 篇」）。与 .pd-sec__h em 同一套外观 ——
单独留一个类名是给不放进 里的场景用（避免标题里塞 影响 SEO 语义）。 */
.pd-sec__n { margin-left: auto; font-size: var(--fs-caption); font-style: normal; font-weight: 600; color: var(--brand-primary); }
.pd-sec__sub { margin: 22px 0 12px; font-size: var(--fs-body); font-weight: 700; color: var(--text-primary); }
.pd-sec > .pd-sec__h + .pd-sec__sub { margin-top: 0; }
/* 字段表：行式斑马纹 */
.pd-fields { border: 1px solid var(--line-default); border-radius: 5px; overflow: hidden; }
.pd-fields__row {
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
border-bottom: 1px solid var(--line-default);
}
.pd-fields__row:last-child { border-bottom: 0; }
.pd-fields__row:nth-child(odd) { background: var(--bg-subtle); }
.pd-fields__k {
padding: 13px 18px;
font-size: var(--fs-body-s);
font-weight: 700;
color: var(--text-primary);
line-height: 1.7;
}
.pd-fields__v {
padding: 13px 18px 13px 0;
font-size: var(--fs-body-s);
line-height: 1.75;
color: var(--text-primary);
word-break: break-word;
}
.pd-fields__v a { color: var(--brand-primary); text-decoration: none; }
.pd-fields__v a:hover { text-decoration: underline; }
.pd-fields .dtable-wrap { margin: 0; }
/* 「展开内容」按钮（每个字段默认展示三行文字，更多点击展开）。
.clamp[data-lines=3] 的截断与按钮注入由 app.js 的 bindClamp() 统一处理，
这里只管外观；复用同一套 class 而不是另写一份，避免两处折叠行为不一致。 */
.pd-more {
margin-top: 6px;
padding: 5px 12px;
font-size: var(--fs-caption);
font-weight: 600;
color: var(--brand-primary);
background: var(--bg-subtle);
border: 1px solid var(--line-default);
border-radius: var(--r-pill);
cursor: pointer;
}
.pd-more:hover { border-color: var(--brand-primary); }
.pd-fields .clamp-toggle {
margin-top: 6px;
padding: 5px 12px;
font-size: var(--fs-caption);
font-weight: 600;
background: var(--bg-subtle);
border: 1px solid var(--line-default);
border-radius: var(--r-pill);
}
.pd-fields .clamp-toggle:hover { text-decoration: none; border-color: var(--brand-primary); }
/* 序列折叠：默认露出约 8 行，够看清开头；完整序列点按钮展开 */
.pd-seqwrap { max-height: 170px; overflow: hidden; position: relative; }
/* 序列块配色：.sequence 深墨绿代码块（#0F1A16 底 + 浅绿字），
放在产品详情页这种整页浅底里显得很闷、和「清爽大气」正相反。
v2 改用浅底 + 淡边框，可读性不降、视觉重量降一档。
⚠️ 用后代选择器限定在 .pd-seqwrap 内，不动其它地方可能复用的 .sequence。 */
.pd-seqwrap .sequence {
background: var(--bg-subtle);
color: var(--text-primary);
border: 1px solid var(--line-default);
padding: 14px 16px;
}
.pd-seqwrap::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: 0;
height: 42px;
/* 渐变终点必须跟序列块底色一致，写死 #fff 会露出一条白边 */
background: linear-gradient(rgba(246, 248, 249, 0), var(--bg-subtle));
pointer-events: none;
}
.pd-seqwrap.is-open { max-height: none; }
.pd-seqwrap.is-open::after { display: none; }
/* 同源数据库三列表 */
.pd-homo { font-size: var(--fs-body-s); }
.pd-homo th {
padding: 9px 12px;
font-size: var(--fs-caption);
font-weight: 600;
color: var(--text-secondary);
background: var(--bg-subtle);
text-align: left;
border-bottom: 1px solid var(--line-default);
}
.pd-homo td { padding: 9px 12px; border-bottom: 1px solid var(--line-default); }
.pd-homo tr:last-child td { border-bottom: 0; }
.pd-homo a { color: var(--brand-primary); text-decoration: none; }
.pd-homo a:hover { text-decoration: underline; }
/* 实验信息：稀释比表 */
/* 推荐稀释比：复用「详细信息」的 .pd-fields 两列表（左＝应用，右＝稀释比）。
改版前是 ul>li 的「一整行文本」，应用名与稀释比挤在同一格（提出）。
为什么不用 .pd-fields 默认的 190px 左列：那是给中文标签（三四个字）留的宽度，
这里左列是英文缩写（WB / IHC / IF / ELISA），190px 会把值列起点推得太靠右，
窄屏尤其明显。132px 足够容纳最长的 "Flow Cyt"。
应用名拆不出来的行（如 "Ready to Use"）只渲染值列 —— 让它跨满整行，
否则会被塞进 132px 的第一列里折成两三行。 */
/* 稀释比：左列是应用缩写，值列要留出呼吸位 —— 数字紧贴分隔线会显得挤 */
.pd-dil2 .pd-fields__row { grid-template-columns: 168px minmax(0, 1fr); }
.pd-dil2 .pd-fields__v { padding-left: 22px; }
.pd-dil2 .pd-fields__v--wide { grid-column: 1 / -1; padding-left: 18px; }
.pd-dl { margin-top: 0; }
/* 实验试剂：产品信息长文 / 使用说明步骤
客户给的产品描述是一整段英文技术文案，行高放宽到 1.85 才好读；
段落间距走 p 的 margin，容器不加 padding —— 与上下 .pd-fields 对齐同一左边线。 */
.pd-prose { font-size: var(--fs-body-s); color: var(--text-primary); line-height: 1.85; }
.pd-prose p { margin: 0 0 12px; }
.pd-prose p:last-child { margin-bottom: 0; }
.pd-steps { margin: 0; padding-left: 20px; font-size: var(--fs-body-s); color: var(--text-primary); line-height: 1.85; }
.pd-steps li { margin-bottom: 8px; }
.pd-steps li:last-child { margin-bottom: 0; }
/* ==========================================================================
六、参考文献
--------------------------------------------------------------------------
左栏：期刊 / 年份 / 标题 / 副标题 / 作者；右栏：影响因子 / DOI / PMID。
两栏而不是一条竖排列表 —— 一篇文献 8 个字段竖着排会拉得很长，且横向对不齐。
========================================================================== */
.pd-refs { display: grid; gap: 12px; }
.pd-ref {
display: grid;
grid-template-columns: minmax(0, 1fr) 200px;
gap: 20px;
padding: 16px 18px;
border: 1px solid var(--line-default);
border-radius: 5px;
transition: border-color .16s;
}
.pd-ref:hover { border-color: var(--line-strong); }
.pd-ref__main { min-width: 0; }
.pd-ref__j { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.pd-ref__j b { font-size: var(--fs-body-s); color: var(--text-primary); }
.pd-ref__j span { font-size: var(--fs-caption); color: var(--text-secondary); }
.pd-ref__t { margin: 0; font-size: var(--fs-body); font-weight: 600; line-height: 1.6; }
.pd-ref__t a { color: var(--text-primary); text-decoration: none; }
.pd-ref__t a:hover { color: var(--brand-primary); }
.pd-ref__s, .pd-ref__a { margin: 6px 0 0; font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.7; }
.pd-ref__meta {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 6px 10px;
align-content: start;
margin: 0;
padding-left: 18px;
border-left: 1px solid var(--line-default);
font-size: var(--fs-caption);
}
.pd-ref__meta dt { color: var(--text-secondary); white-space: nowrap; }
.pd-ref__meta dd { margin: 0; color: var(--text-primary); word-break: break-word; }
.pd-ref__meta dd.if { font-weight: 700; color: var(--brand-primary); }
.pd-ref__apps { display: flex; flex-wrap: wrap; gap: 4px; }
.pd-ref__meta a { color: var(--brand-primary); text-decoration: none; }
.pd-ref__meta a:hover { text-decoration: underline; }
/* ==========================================================================
七、相关产品（卡网格式）
========================================================================== */
.pd-relgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.pd-rel {
display: block;
padding: 14px 16px;
border: 1px solid var(--line-default);
border-radius: 5px;
text-decoration: none;
transition: border-color .16s, box-shadow .16s;
}
.pd-rel:hover { border-color: var(--brand-primary); box-shadow: 0 6px 18px rgba(0, 0, 0, .06); }
.pd-rel__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.pd-rel__top .catno { font-family: var(--ff-mono); font-size: var(--fs-caption); color: var(--brand-primary); font-weight: 700; }
.pd-rel__top i { font-style: normal; font-size: var(--fs-caption); color: var(--text-secondary); }
.pd-rel__n { display: block; font-size: var(--fs-body-s); line-height: 1.6; color: var(--text-primary); min-height: 42px; }
.pd-rel__m { display: block; margin-top: 6px; font-size: var(--fs-caption); color: var(--text-secondary); line-height: 1.6; }
.pd-rel__p { display: block; margin-top: 8px; font-size: var(--fs-body-s); font-weight: 700; color: var(--brand-primary); }
/* 页尾合规声明 */
.pd-legal {
display: flex;
align-items: flex-start;
gap: 8px;
margin: 22px 0 0;
padding: 14px 18px;
font-size: var(--fs-caption);
color: var(--text-secondary);
line-height: 1.7;
background: var(--bg-subtle);
border-radius: var(--r-card);
}
.pd-legal svg { flex: 0 0 auto; margin-top: 2px; }
.pd-sub--wrap { align-items: flex-start; }
.pd-sub--wrap .clamp { min-width: 0; }
/* ==========================================================================
八、响应式
========================================================================== */
@media (max-width: 1200px) {
.pd-relgrid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.pd-relgrid { grid-template-columns: repeat(2, 1fr); }
.pd-ref { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.pd-ref__meta { padding-left: 0; padding-top: 12px; border-left: 0; border-top: 1px solid var(--line-default); }
}
@media (max-width: 767px) {
/* 字段表在窄屏为「标签一行 + 值一行」的堆叠块。
⚠️ 这里改 grid-template-columns 单列，而不是给子项 display:block ——
后者会让 .pd-fields__k 的 padding 计算变得难以推理，加子元素也容易漏。 */
.pd-fields__row { grid-template-columns: minmax(0, 1fr); }
.pd-fields__k { padding: 12px 14px 2px; }
.pd-fields__v { padding: 0 14px 12px; }
/* 推荐稀释比区块：窄屏同样退化为「应用名一行 + 稀释比一行」。
⚠️ 必须在这里显式写 —— .pd-dil2 .pd-fields__row 的特异性(0,2,0)高于上面的
.pd-fields__row(0,1,0)，不覆盖回来会把 132px 两列带进手机。
⚠️ --wide 的 padding-left 也要跟着回到 14px，与同屏其它行对齐。 */
.pd-dil2 .pd-fields__row { grid-template-columns: minmax(0, 1fr); }
.pd-dil2 .pd-fields__v--wide { padding-left: 14px; }
.pd-sec { padding: 20px 16px; border-radius: 5px; }
.pd-sec__h { font-size: var(--fs-h4); }
.pd-sec__h span { display: none; } /* 中文标题已经说清了，省一行 */
.pd-core dt { white-space: normal; }
.pd-nav__i { padding: 12px 13px; font-size: var(--fs-body-s); }
.pd-gal__thumbs { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); }
.pd-shot__nav { width: 30px; height: 30px; margin-top: -15px; }
.pd-relgrid { grid-template-columns: minmax(0, 1fr); }
.pd-rel__n { min-height: 0; }
}
/* ==========================================================================
首页门户化布局
--------------------------------------------------------------------------
首屏为「浅色搜索门户」：
巨型搜索条 + 搜索历史 + 热搜词 + 分类浏览矩阵。
全部走 ablumir.css 设计 token，品牌绿只作为强调色/按钮色。
========================================================================== */
/* ---------- 1. 首屏搜索门户 ---------- */
.home-hero {
position: relative;
padding: 82px 0 78px;
background:
linear-gradient(180deg, #F9FBFA 0%, #FFFFFF 58%, #F4F8F6 100%);
overflow: hidden;
border-bottom: 1px solid var(--line-default);
}
.home-hero::before {
content: "";
position: absolute; inset: 0; pointer-events: none;
background-image:
radial-gradient(circle at 18% 24%, rgba(35, 105, 82, .08) 0%, transparent 38%),
radial-gradient(circle at 86% 18%, rgba(27, 110, 194, .06) 0%, transparent 32%),
radial-gradient(circle at 72% 86%, rgba(217, 139, 0, .05) 0%, transparent 30%);
}
.home-hero::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand-primary) 34%, #3E9B78 62%, var(--state-info) 100%);
opacity: .85;
}
/* ---- 首屏轮播 ----
做法：轮播铺在 .home-hero 底层（z-index 0），搜索门户仍在 .wrap 里（z-index 1），
两者叠加而不是二选一 —— 轮播给首屏大图，搜索门户不丢。
高度按 **视口 50%** 给（30% 太矮、不够醒目）。
首屏容器不再留上下 padding —— .home-hero 的门户内边距（82/78px）收掉，
搜索门户删掉后这块 padding 就成了轮播正下方的一条空白带（指出的「banner 下面还有一块空白」）。 */
.home-hero--slider { padding: 0; background: none; border-bottom: 0; }
.home-hero--slider::before { display: none; }
.home-slides {
position: relative; height: 50vh; min-height: 300px; max-height: 620px;
overflow: hidden; background: linear-gradient(120deg, #0F3D2E 0%, #236952 52%, #1B6EC2 100%);
}
.home-slide {
position: absolute; inset: 0;
display: flex; align-items: center;
opacity: 0; transition: opacity .55s var(--ease);
}
.home-slide.is-on { opacity: 1; }
.home-slide[hidden] { display: none; }
.home-slide__img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; opacity: .34; /* 压暗做底，保证上面的白字可读 */
}
.home-slide__txt {
position: relative; z-index: 1;
max-width: 720px; margin: 0 auto; padding: 0 24px; text-align: center; color: #fff;
}
.home-slide__sub {
margin: 0 0 8px; font-size: var(--fs-body-s); letter-spacing: .06em;
text-transform: uppercase; color: rgba(255, 255, 255, .78);
}
.home-slide__t { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 32px); font-weight: 700; color: #fff; }
.home-slide__lede { margin: 0 0 14px; font-size: var(--fs-body-s); color: rgba(255, 255, 255, .88); }
.home-slides__nav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
width: 38px; height: 38px; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .22); color: #fff; font-size: 22px; line-height: 1;
cursor: pointer; backdrop-filter: blur(2px);
}
.home-slides__nav:hover { background: rgba(255, 255, 255, .38); }
.home-slides__nav--prev { left: 16px; }
.home-slides__nav--next { right: 16px; }
.home-slides__dots {
position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2;
display: flex; justify-content: center; gap: 8px;
}
.home-slides__dot {
width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
background: rgba(255, 255, 255, .45); cursor: pointer;
}
.home-slides__dot.is-on { background: #fff; width: 22px; border-radius: 3px; }
.home-hero > .wrap { position: relative; z-index: 1; }
.home-hero__inner { max-width: 840px; margin: 0 auto; text-align: center; }
.home-hero__kicker {
display: inline-flex; align-items: center; gap: 8px;
padding: 5px 13px; margin: 0 0 16px;
border-radius: var(--r-pill);
background: var(--brand-primary-light); color: var(--brand-primary-dark);
font-size: var(--fs-caption); font-weight: 700; letter-spacing: .04em;
}
.home-hero__title {
font-size: var(--fs-display); line-height: 1.15; margin: 0 0 16px;
color: var(--text-primary);
}
.home-hero__lede {
font-size: var(--fs-body); color: var(--text-secondary);
margin: 0 auto 34px; max-width: 680px; line-height: 1.7;
}
/* ---------- 2. 巨型搜索条 ---------- */
.home-search {
display: grid; gap: 18px;
background: #fff; border: 1px solid var(--line-strong);
border-radius: var(--r-card); box-shadow: 0 16px 50px rgba(16, 24, 40, .08);
padding: 18px;
}
.home-search__form {
display: flex; height: 58px;
border: 1px solid var(--brand-primary); border-radius: var(--r-input);
overflow: hidden; background: #fff;
transition: box-shadow .18s var(--ease);
}
.home-search__form:focus-within {
box-shadow: 0 0 0 5px rgba(35, 105, 82, .12);
}
.home-search__form select {
border: 0; border-right: 1px solid var(--line-default);
background: var(--bg-subtle); padding: 0 14px 0 18px;
font-size: var(--fs-body); color: var(--text-secondary); cursor: pointer;
font-weight: 600;
}
.home-search__form select:focus { outline: none; }
.home-search__form input[type="search"] {
flex: 1; min-width: 0; border: 0; padding: 0 18px;
font-size: var(--fs-h4); color: var(--text-primary);
background: transparent;
}
.home-search__form input[type="search"]:focus { outline: none; }
.home-search__form input[type="search"]::placeholder { color: var(--text-disabled); font-size: 17px; }
.home-search__form button[type="submit"] {
border: 0; background: var(--brand-primary); color: #fff;
padding: 0 28px; font-size: var(--fs-body); font-weight: 700;
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
}
.home-search__form button[type="submit"]:hover { background: var(--brand-primary-dark); }
/* ---------- 3. 搜索历史 + 热搜 ---------- */
.home-search__tags { display: flex; flex-direction: column; gap: 12px; font-size: var(--fs-body-s); }
.home-search__hist { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.home-search__hist.is-empty { color: var(--text-disabled); }
.home-search__hist .lb,
.home-search__hot .lb {
font-size: var(--fs-caption); font-weight: 700; color: var(--text-secondary);
letter-spacing: .04em; flex: 0 0 auto;
}
.home-search__hist .pill,
.home-search__hot .pill { padding: 6px 13px; }
.home-search__hist button {
background: none; border: 0; color: var(--text-disabled);
font-size: var(--fs-caption); cursor: pointer; margin-left: auto;
}
.home-search__hist button:hover { color: var(--brand-accent); text-decoration: underline; }
.home-search__hot {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
/* ---------- 4. 分类浏览矩阵 ---------- */
.home-cats { background: linear-gradient(180deg, #FFFFFF 0%, var(--bg-subtle) 100%); }
.home-cats__grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter);
}
.home-cat {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); box-shadow: var(--sh-card);
overflow: hidden; transition: all .2s var(--ease);
}
.home-cat:hover {
transform: translateY(-3px);
box-shadow: 0 14px 36px rgba(16, 24, 40, .10);
border-color: var(--line-strong);
}
/* 一级分类卡的配图（图 + 标题 + 二级入口卡式） */
.home-cat__art {
position: relative; display: block; height: 132px; overflow: hidden;
background: linear-gradient(135deg, var(--cc, #236952) 0%, var(--cc2, #3E9B78) 100%);
}
.home-cat__art img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform .35s var(--ease);
}
.home-cat:hover .home-cat__art img { transform: scale(1.06); }
.home-cat__badge {
position: absolute; left: 10px; bottom: 10px;
width: 34px; height: 34px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .94); color: var(--brand-primary);
box-shadow: 0 2px 8px rgba(16, 24, 40, .18);
}
/* 配图加高到 150px：卡片现在是「图 + 文案介绍」，图要撑得住视觉重量 */
.home-cat__art { height: 150px; }
.home-cat__badge { left: 12px; bottom: 12px; width: 38px; height: 38px; }
/* 一级目录**文案介绍**区（不再列二级分类） */
.home-cat__body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.home-cat__body h3 {
margin: 0 0 2px; font-size: 19px; font-weight: 700; color: var(--text-primary);
position: relative; padding-left: 12px;
}
.home-cat__body h3::before {
content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
width: 4px; height: 16px; border-radius: 2px;
background: linear-gradient(180deg, var(--cc, var(--brand-primary)), var(--cc2, var(--brand-primary)));
}
.home-cat__en {
display: block; padding-left: 12px; margin-bottom: 10px;
font-size: var(--fs-caption); color: var(--text-disabled); letter-spacing: .04em;
}
.home-cat__desc {
margin: 0 0 12px; font-size: var(--fs-body-s); line-height: 1.75;
color: var(--text-secondary);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
min-height: calc(1.75em * 3);
}
.home-cat__meta {
margin: auto 0 12px; padding-top: 10px; border-top: 1px dashed var(--line-default);
font-size: var(--fs-caption); color: var(--text-secondary);
}
.home-cat__meta b {
font-family: var(--ff-display); font-weight: 900; font-size: 18px;
color: var(--cc, var(--brand-primary)); font-variant-numeric: tabular-nums;
}
.home-cat__dot { margin: 0 6px; color: var(--line-strong); }
.home-cat__cta { align-self: flex-start; padding-left: 0; margin-top: auto; }
/* meta 行缺席的卡（如暂无在售数据的分类）：CTA 由 margin-top:auto 贴底，
与有 meta 行的卡保持同一底部基线 —— 布局不因数据缺失而变形。 */
.home-cat__meta + .home-cat__cta { margin-top: 0; }
/* 热搜 pill 和分类卡 pill 统一样式微调 */
.home-search__hot .pill { font-size: 14px; }
/* ---------- 5. 导航下拉矩阵 ---------- */
.mega--matrix .mega__inner {
grid-template-columns: repeat(4, minmax(0, 1fr)) 260px;
gap: 22px; align-items: stretch;
}
.mega--matrix .mega__foot { justify-content: center; gap: 24px; }
.mega__matrix-col {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); overflow: hidden;
}
.mega__matrix-col--reco { background: var(--bg-subtle); border-color: var(--line-strong); padding: 16px; }
.mega__matrix-col--reco .mega__col-title { margin-bottom: 12px; }
.mega__matrix-h {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 12px; align-items: center;
padding: 13px 14px;
background: #fff; border-bottom: 1px solid var(--line-default);
text-decoration: none; color: var(--text-primary);
}
.mega__matrix-h:hover {
background: var(--brand-primary-light);
color: var(--brand-primary-dark); text-decoration: none;
}
.mega__matrix-ico {
width: 40px; height: 40px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
flex: 0 0 auto; color: #fff;
}
.mega__matrix-h b { display: block; font-size: var(--fs-body); margin-bottom: 1px; }
.mega__matrix-h span { display: block; font-size: var(--fs-caption); color: var(--text-secondary); }
.mega__matrix-h em {
font-style: normal; font-family: var(--ff-display); font-weight: 900;
font-size: 18px; color: var(--brand-primary);
}
.mega__matrix-list {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px;
background: var(--line-default); flex: 1;
}
.mega__matrix-list a {
display: flex; align-items: center; gap: 6px;
padding: 9px 12px; background: #fff;
font-size: var(--fs-body-s); color: var(--text-primary);
text-decoration: none; min-height: 40px;
}
.mega__matrix-list a:hover { background: var(--brand-primary-light); color: var(--brand-primary-dark); }
.mega__matrix-list .tag--hot {
height: 18px; padding: 0 6px;
background: var(--state-error); color: #fff; border-color: var(--state-error);
font-size: 10px;
}
.mega__reco { display: grid; gap: 10px; }
.mega__reco-card {
display: block; padding: 12px 14px;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); text-decoration: none;
}
.mega__reco-card:hover { border-color: var(--brand-primary); background: var(--brand-primary-light); }
.mega__reco-card .t { font-weight: 700; color: var(--text-primary); margin-bottom: 3px; }
.mega__reco-card .s { font-size: var(--fs-caption); color: var(--text-secondary); }
.mega__reco-card .catno { font-family: var(--ff-mono); color: var(--brand-primary); font-weight: 700; }
/* ---------- 6. 响应式 ---------- */
@media (max-width: 1200px) {
.home-cats__grid { grid-template-columns: repeat(2, 1fr); }
.home-hero { padding: 64px 0 58px; }
.home-hero__title { font-size: 40px; }
.mega--matrix .mega__inner { grid-template-columns: repeat(2, minmax(0, 1fr)) 240px; gap: 18px; }
}
@media (max-width: 900px) {
.home-search__form { height: 52px; }
.home-search__form input[type="search"] { font-size: var(--fs-body); }
.home-search__form select { display: none; }
.home-hero { padding: 48px 0; }
.home-hero__title { font-size: 32px; }
.mega--matrix .mega__inner { grid-template-columns: 1fr; gap: 14px; }
.mega__matrix-list { grid-template-columns: 1fr; }
.mega__matrix-col--reco { display: none; }
}
@media (max-width: 767px) {
.home-search { padding: 12px; }
.home-search__form { height: 50px; border-radius: 5px; }
.home-search__form button[type="submit"] { padding: 0 16px; }
.home-search__form button[type="submit"] span { display: none; }
.home-search__form button[type="submit"] svg { width: 22px; height: 22px; }
.home-hero__lede { font-size: var(--fs-body-s); margin-bottom: 24px; }
.home-cats__grid { grid-template-columns: 1fr; }
.home-cat__subs { grid-template-columns: 1fr; }
.home-search__hist .pill,
.home-search__hot .pill { padding: 5px 10px; font-size: 13px; }
}
/* ==========================================================================
一级分类介绍页（category.php）
========================================================================== */
.cat-page { padding: 28px 0 70px; }
.cat-layout {
display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: start;
}
.cat-aside {
display: flex; flex-direction: column; gap: 20px;
position: sticky; top: calc(var(--pdnav-top, 126px) + 16px);
}
.cat-aside__panel {
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 18px;
}
/* 组标题：渐变色条 + 主色字 + 底线，与 page-lead 竖条同一设计语言 */
.cat-aside__title {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-caption); font-weight: 800; letter-spacing: .06em;
text-transform: uppercase; color: var(--brand-primary-dark);
margin: 0 0 12px; padding-bottom: 10px;
border-bottom: 1px solid var(--line-default);
}
.cat-aside__title::before {
content: ""; flex: 0 0 auto; width: 4px; height: 14px; border-radius: 2px;
background: linear-gradient(180deg, var(--brand-accent) 0%, var(--brand-primary) 100%);
}
.cat-aside__l1 {
display: flex; align-items: center; gap: 10px;
padding: 10px 12px; border-radius: var(--r-btn);
color: var(--text-primary); text-decoration: none; font-weight: 600;
transition: background .15s var(--ease), color .15s var(--ease);
}
.cat-aside__l1:hover { background: var(--brand-primary-light); color: var(--brand-primary-dark); text-decoration: none; }
.cat-aside__l1.is-on { background: var(--brand-primary-light); color: var(--brand-primary-dark); }
.cat-aside__dot {
width: 30px; height: 30px; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
color: #fff; flex: 0 0 auto;
}
.cat-aside__l2 {
display: block;
padding: 9px 0; border-bottom: 1px solid var(--line-default);
color: var(--text-primary); text-decoration: none; font-size: 14px;
transition: color .15s var(--ease), padding-left .15s var(--ease);
}
.cat-aside__l2:last-child { border-bottom: 0; }
.cat-aside__l2:hover { color: var(--brand-primary); padding-left: 4px; text-decoration: none; }
.cat-aside__contact-line {
display: flex; align-items: flex-start; gap: 8px;
font-size: 14px; color: var(--text-secondary); line-height: 1.5;
margin: 0 0 10px;
}
.cat-aside__contact-line strong {
flex: 0 0 auto; width: 36px; font-weight: 700; color: var(--text-primary);
}
.cat-aside__contact-line span { word-break: break-all; }
.cat-aside__help p {
font-size: var(--fs-body-s); color: var(--text-secondary); line-height: 1.6; margin: 0 0 14px;
}
.cat-hero {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 0;
overflow: hidden;
}
.cat-hero__text { padding: 36px; }
.cat-hero__eyebrow {
font-family: var(--ff-display); font-size: 15px; font-weight: 700;
color: var(--brand-primary); letter-spacing: .06em; text-transform: uppercase;
margin: 0 0 8px;
}
.cat-hero__title { font-size: 36px; margin: 0 0 14px; }
.cat-hero__sub { font-size: var(--fs-h4); color: var(--text-secondary); margin: 0 0 18px; }
.cat-hero__lead { font-size: 18px; color: var(--text-primary); margin: 0 0 16px; }
.cat-hero__lead strong {
font-family: var(--ff-display); font-weight: 900; font-size: 34px; color: var(--brand-primary);
}
.cat-hero__intro { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.8; margin: 18px 0 0; }
.pw-intro { font-size: var(--fs-body); color: var(--text-secondary); line-height: 1.8; margin: 18px 0 0; }
.cat-hero__media {
position: relative; min-height: 360px; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, #F0F7FA 0%, #E6F0F5 100%);
}
.cat-hero__media::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(35,105,82,.06) 0%, transparent 50%),
radial-gradient(circle at 70% 70%, rgba(26,74,110,.08) 0%, transparent 50%);
}
.cat-hero__ico {
width: 140px; height: 140px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
color: #fff; position: relative; z-index: 2;
box-shadow: 0 20px 50px rgba(35,105,82,.25);
}
.cat-hero__ring {
position: absolute; width: 220px; height: 220px; border-radius: 50%;
border: 2px solid; opacity: .18; z-index: 1;
}
/* 主题插画（真实图缺失时的兜底）：自带底色，所以不再叠渐变背景，
尺寸也放大到接近真实图的体量 —— 80px 的小图标读不出「这是一张图」。 */
.cat-hero__art {
width: 200px; height: 150px; border-radius: var(--r-card);
background: none; box-shadow: 0 18px 44px rgba(16, 24, 40, .16);
}
.cat-hero__art svg { display: block; width: 100%; height: 100%; }
.cat-subs__title { font-size: var(--fs-h3); margin: 40px 0 20px; }
.cat-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); }
.cat-subcard {
display: flex; flex-direction: column; gap: 8px;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); box-shadow: var(--sh-card); padding: 20px;
text-decoration: none; color: var(--text-primary);
transition: border-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--ease);
}
.cat-subcard:hover {
border-color: var(--line-strong); box-shadow: var(--sh-pop); transform: translateY(-2px);
text-decoration: none; color: var(--brand-primary-dark);
}
.cat-subcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cat-subcard h3 { font-size: var(--fs-h5); margin: 0; }
.cat-subcard p { font-size: var(--fs-body-s); color: var(--text-secondary); margin: 0; line-height: 1.5; flex: 1; }
.cat-subcard__count { font-size: var(--fs-caption); color: var(--brand-primary); font-weight: 700; }
.cat-empty { padding: 60px 0; max-width: 720px; }
.cat-empty h1 { font-size: var(--fs-h2); margin-bottom: 12px; }
/* ---- 介绍页：产品链接 ---- */
.cat-aside__l2.is-on { color: var(--brand-primary); font-weight: 700; }
.cat-hero__img {
width: 100%; height: 100%; max-height: 260px; object-fit: cover;
border-radius: var(--r-card); display: block;
}
.cat-plist {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
}
.cat-pcard {
display: flex; flex-direction: column; gap: 6px;
padding: 12px; border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; text-decoration: none; transition: box-shadow .16s, border-color .16s;
}
.cat-pcard:hover {
border-color: var(--brand-primary);
box-shadow: 0 6px 18px rgba(35, 105, 82, .10);
text-decoration: none;
}
.cat-pcard__img {
display: flex; align-items: center; justify-content: center;
height: 108px; border-radius: var(--r-btn); overflow: hidden;
background: var(--bg-subtle); color: var(--text-secondary);
}
.cat-pcard__img img { width: 100%; height: 100%; object-fit: contain; }
.cat-pcard__no { font-size: var(--fs-caption); color: var(--brand-primary); font-weight: 700; }
.cat-pcard__nm {
font-size: var(--fs-body-s); color: var(--text-primary); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.cat-more { margin-top: 20px; text-align: center; }
@media (max-width: 1200px) {
.cat-layout { grid-template-columns: 220px 1fr; gap: 28px; }
.cat-subs { grid-template-columns: repeat(2, 1fr); }
.cat-plist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.cat-layout { grid-template-columns: 1fr; }
.cat-aside { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cat-hero { grid-template-columns: 1fr; }
.cat-hero__media { order: -1; min-height: 220px; }
}
@media (max-width: 767px) {
.cat-aside { grid-template-columns: 1fr; }
.cat-hero { padding: 24px; }
.cat-hero__lead strong { font-size: 27px; }
.cat-subs { grid-template-columns: 1fr; }
.cat-plist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ==========================================================================
首页改版（7 条落地）
========================================================================== */
/* ---------- ① 顶部活动滚动条（连续横向滚动，见 ablumir.css .promo-bar） ----------
这里只补窄屏：手机上「活动快讯」标签占宽太多，直接隐藏标签、把整条留给滚动内容。 */
@media (max-width: 767px) {
.promo-bar__tag { display: none; }
.promo-bar__item { padding: 0 16px; }
}
/* ---------- ③ 数据条（生物研发元素版） ----------
一张通透浅色带（无竖向分隔线与副行小字）：
底层 DNA 双螺旋 + 细胞点缀（纯装饰、aria-hidden），数字放大、字重拉开。 */
.statband {
position: relative; overflow: hidden;
padding: 34px 30px 26px;
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: linear-gradient(135deg, #FFFFFF 0%, #F7FBF9 48%, #F2F8FB 100%);
box-shadow: var(--sh-card);
}
.statband::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--brand-primary), #3E9B78 40%, var(--state-info) 76%, var(--brand-accent));
}
.statband__bg { position: absolute; inset: 0; pointer-events: none; opacity: .5; }
.statband__bg svg { width: 100%; height: 100%; display: block; }
.statband__bg svg path { fill: none; stroke: var(--brand-primary); stroke-width: 1.6; opacity: .22; }
.statband__bg .statband__rungs path { stroke: #3E9B78; stroke-width: 1.2; opacity: .3; }
.statband__bg .statband__cells circle { fill: var(--state-info); opacity: .16; }
.statband__grid {
position: relative; z-index: 1;
display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.statband__i { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.statband__ico {
width: 44px; height: 44px; border-radius: 6px;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand-primary) 0%, #3E9B78 100%);
color: #fff; box-shadow: 0 6px 16px -6px rgba(35, 105, 82, .7);
}
.statband__i:nth-child(2) .statband__ico { background: linear-gradient(135deg, #1B6EC2 0%, #4A9BE0 100%); box-shadow: 0 6px 16px -6px rgba(27, 110, 194, .7); }
.statband__i:nth-child(3) .statband__ico { background: linear-gradient(135deg, #7A5AF8 0%, #9E86FF 100%); box-shadow: 0 6px 16px -6px rgba(122, 90, 248, .7); }
.statband__i:nth-child(4) .statband__ico { background: linear-gradient(135deg, #D98B00 0%, #F0AE33 100%); box-shadow: 0 6px 16px -6px rgba(217, 139, 0, .7); }
.statband__n {
display: flex; align-items: baseline; gap: 1px;
font-family: var(--ff-display); font-weight: 900; line-height: 1.05;
color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.statband__n b { font-size: 42px; font-weight: 900; }
.statband__n i { font-style: normal; font-size: 22px; color: var(--brand-primary); font-weight: 800; }
.statband__k { font-size: var(--fs-body-s); color: var(--text-secondary); letter-spacing: .02em; }
.statband__note {
position: relative; z-index: 1; margin: 18px 0 0; padding-top: 12px;
border-top: 1px dashed var(--line-default);
font-size: var(--fs-caption); color: var(--text-disabled);
}
.statband__note b { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .statband__grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } }
@media (max-width: 560px) {
.statband { padding: 26px 20px 20px; }
.statband__grid { grid-template-columns: 1fr; gap: 18px; }
.statband__n b { font-size: 34px; }
}
/* ---------- ④ 明星商品：左右箭头切换 ----------
箭头贴在卡片区两侧（原「上一屏 / 下一屏」文字按钮挂在标题行，视线要来回跳）。 */
.hscroll-wrap { position: relative; }
.hsnav {
position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
border: 1px solid var(--line-strong); background: #fff; color: var(--brand-primary);
box-shadow: 0 6px 20px rgba(16, 24, 40, .14);
cursor: pointer; transition: all .18s var(--ease);
}
.hsnav:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; }
.hsnav--prev { left: -14px; }
.hsnav--prev svg { transform: rotate(180deg); }
.hsnav--next { right: -14px; }
@media (max-width: 767px) { .hsnav { width: 38px; height: 38px; } .hsnav--prev { left: -6px; } .hsnav--next { right: -6px; } }
/* ---------- ⑥ 四大索引（图卡式） ---------- */
.idx4 {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter);
}
.idx4__card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--line-default);
border-radius: var(--r-card); overflow: hidden; box-shadow: var(--sh-card);
transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}
.idx4__card:hover { transform: translateY(-3px); box-shadow: 0 14px 36px rgba(16, 24, 40, .10); border-color: var(--line-strong); }
.idx4__media { position: relative; display: block; height: 148px; overflow: hidden; background: var(--bg-subtle); }
.idx4__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.idx4__card:hover .idx4__media img { transform: scale(1.07); }
.idx4__media::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(9, 32, 24, 0) 34%, rgba(9, 32, 24, .82) 100%);
}
.idx4__ttl { position: absolute; left: 16px; right: 16px; bottom: 13px; z-index: 1; color: #fff; }
.idx4__ttl b { display: block; font-size: 17px; font-weight: 700; letter-spacing: .02em; }
.idx4__ttl em { display: block; font-style: normal; font-size: var(--fs-caption); color: rgba(255, 255, 255, .72); margin-top: 2px; }
.idx4__body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.idx4__list { list-style: none; margin: 0; padding: 0; flex: 1; }
.idx4__list li { border-bottom: 1px dashed var(--line-default); }
.idx4__list li:last-child { border-bottom: 0; }
.idx4__list a {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 7px 0; font-size: var(--fs-body-s); color: var(--text-secondary);
}
.idx4__list a:hover { color: var(--brand-primary); text-decoration: none; }
.idx4__list i { font-style: normal; font-size: 11px; color: var(--text-disabled); font-variant-numeric: tabular-nums; }
.idx4__go {
margin-top: 12px; font-size: var(--fs-body-s); font-weight: 600; color: var(--brand-primary);
}
.idx4__go:hover { color: var(--brand-primary-dark); text-decoration: none; }
@media (max-width: 1100px) { .idx4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .idx4 { grid-template-columns: 1fr; } }
/* ---------- ⑦ 页脚重排版（营销获客导向） ---------- */
.footer-top--v2 {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
}
.footer-brand__desc { font-size: var(--fs-body-s); line-height: 1.8; margin: 12px 0 18px; max-width: 380px; }
.footer-social { display: flex; flex-wrap: wrap; gap: 10px; }
.fsoc {
width: 40px; height: 40px; border-radius: 5px;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .18);
color: rgba(255, 255, 255, .88);
transition: all .18s var(--ease);
}
.fsoc:hover { background: #fff; color: var(--brand-primary-dark); transform: translateY(-2px); text-decoration: none; }
.fsoc--linkedin:hover { color: #0A66C2; }
.fsoc--facebook:hover { color: #1877F2; }
.fsoc--youtube:hover { color: #FF0000; }
.fsoc--x:hover { color: #111111; }
.fsoc--instagram:hover { color: #E1306C; }
.fcontact { list-style: none; margin: 0; padding: 0; }
.fcontact li { margin-bottom: 10px; }
.fcontact a, .fcontact__hours { display: flex; align-items: center; gap: 12px; }
.fcontact__ico {
width: 32px; height: 32px; border-radius: 4px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
color: #fff;
}
.fcontact b { display: block; font-size: var(--fs-caption); font-weight: 600; color: rgba(255, 255, 255, .62); }
.fcontact em { display: block; font-style: normal; font-size: var(--fs-body-s); color: #fff; }
.fcontact a:hover em { color: #fff; text-decoration: underline; }
.footer-addr {
display: flex; align-items: flex-start; gap: 8px;
margin: 14px 0 0; font-size: var(--fs-caption); color: rgba(255, 255, 255, .62); line-height: 1.7;
}
.footer-links ul { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 9px; font-size: var(--fs-body-s); }
.footer-bottom { flex-wrap: wrap; gap: 12px 20px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 16px; }
.footer-legal a { color: rgba(255, 255, 255, .72); font-size: var(--fs-caption); }
.footer-legal a:hover { color: #fff; }
@media (max-width: 1100px) { .footer-top--v2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 620px) {
.footer-top--v2 { grid-template-columns: 1fr; gap: 28px; }
.footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
下午改版（9 条落地）
========================================================================== */
/* ---------- ② 产品卡：去掉价格/规格行后的占位收紧 ---------- */
.pcard__foot { justify-content: flex-start; gap: 8px; }
.pcard__foot .btn--primary:only-child { flex: 1; }
/* ---------- ③ 数据条（一行式） ----------
文案简化、数字读库内实际数据。
桌面端：数字与标签分两行、三栏 flex:1 均分 +
竖线分隔 —— space-between 横铺三项会显得空，均分栏才撑得起整卡。 */
.statline {
position: relative; overflow: hidden;
display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap;
gap: 0; padding: 14px 10px;
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: linear-gradient(90deg, #FFFFFF 0%, #F7FBF9 55%, #F2F8FB 100%);
box-shadow: var(--sh-card);
}
.statline__bg { position: absolute; inset: 0; pointer-events: none; opacity: .4; }
.statline__bg svg { width: 100%; height: 100%; display: block; }
.statline__bg svg path { fill: none; stroke: var(--brand-primary); stroke-width: 1.4; opacity: .2; }
/* 动物剪影装饰：描边较细，避免小尺寸下糊成一团；
circle/ellipse 是 fe_ico() 里动物造型用的图元，也要一起上色。 */
.statline__animal { fill: none; stroke: var(--brand-primary); stroke-width: 1; opacity: .22; }
.statline__animal circle, .statline__animal ellipse { fill: none; }
.statline__item {
position: relative; z-index: 1;
flex: 1 1 0; padding: 4px 22px;
display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; white-space: nowrap;
}
.statline__item:first-child { padding-left: 20px; }
.statline__ico {
align-self: center;
width: 34px; height: 34px; border-radius: 5px; flex: 0 0 auto;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--brand-primary) 0%, #3E9B78 100%);
color: #fff; box-shadow: 0 5px 12px -5px rgba(35, 105, 82, .7);
}
.statline__item:nth-child(3) .statline__ico { background: linear-gradient(135deg, #1B6EC2 0%, #4A9BE0 100%); box-shadow: 0 5px 12px -5px rgba(27, 110, 194, .7); }
.statline__item:nth-child(4) .statline__ico { background: linear-gradient(135deg, #7A5AF8 0%, #9E86FF 100%); box-shadow: 0 5px 12px -5px rgba(122, 90, 248, .7); }
.statline__item:nth-child(5) .statline__ico { background: linear-gradient(135deg, #D98B00 0%, #F0AE33 100%); box-shadow: 0 5px 12px -5px rgba(217, 139, 0, .7); }
.statline__item b {
font-family: var(--ff-display); font-weight: 900; font-size: 30px;
color: var(--text-primary); line-height: 1; font-variant-numeric: tabular-nums;
}
.statline__item i { font-style: normal; font-size: 17px; font-weight: 800; color: var(--brand-primary); }
.statline__k { flex-basis: 100%; padding-left: 42px; font-size: var(--fs-body-s); line-height: 1.35; color: var(--text-secondary); }
.statline__item + .statline__item { border-left: 1px solid var(--line-default); }
@media (max-width: 1000px) {
.statline { padding: 14px 8px; }
.statline__item { padding: 4px 16px; }
.statline__item b { font-size: 23px; }
.statline__k { padding-left: 38px; }
}
@media (max-width: 640px) {
.statline { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.statline__item:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* ---------- ④ 生物动感层 ----------
漂浮细胞泡 + 荧光小点 ，纯 CSS 动画；装饰层不挡点击、不进读屏，
prefers-reduced-motion 用户自动静止。 */
.bio-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.bio-fx i, .bio-fx b { position: absolute; display: block; border-radius: 50%; will-change: transform; }
.bio-fx i {
background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.5) 0%, rgba(255,255,255,.10) 55%, transparent 72%);
border: 1px solid rgba(255,255,255,.14);
animation: bioFloat 16s ease-in-out infinite alternate;
}
.bio-fx b {
width: 6px; height: 6px; background: rgba(122, 232, 180, .85);
box-shadow: 0 0 10px 2px rgba(122, 232, 180, .45);
animation: bioDrift 11s ease-in-out infinite alternate;
}
.bio-fx--hero i:nth-of-type(1) { width: 130px; height: 130px; left: 6%; top: 18%; animation-duration: 18s; }
.bio-fx--hero i:nth-of-type(2) { width: 74px; height: 74px; left: 26%; top: 62%; animation-duration: 14s; animation-delay: -4s; }
.bio-fx--hero i:nth-of-type(3) { width: 190px; height: 190px; left: 58%; top: 8%; animation-duration: 22s; animation-delay: -8s; }
.bio-fx--hero i:nth-of-type(4) { width: 96px; height: 96px; left: 78%; top: 48%; animation-duration: 16s; animation-delay: -2s; }
.bio-fx--hero i:nth-of-type(5) { width: 54px; height: 54px; left: 44%; top: 70%; animation-duration: 12s; animation-delay: -6s; }
.bio-fx--hero b:nth-of-type(1) { left: 14%; top: 76%; animation-delay: -1s; }
.bio-fx--hero b:nth-of-type(2) { left: 34%; top: 22%; animation-delay: -4s; }
.bio-fx--hero b:nth-of-type(3) { left: 62%; top: 78%; animation-delay: -7s; }
.bio-fx--hero b:nth-of-type(4) { left: 84%; top: 24%; animation-delay: -3s; }
.bio-fx--hero b:nth-of-type(5) { left: 92%; top: 66%; animation-delay: -9s; }
.bio-fx--hero b:nth-of-type(6) { left: 8%; top: 40%; animation-delay: -5s; }
/* 浅色底版（四大索引区）：绿色系低透明度，不抢卡片 */
.bio-fx--soft i {
background: radial-gradient(circle at 32% 30%, rgba(35,105,82,.10) 0%, rgba(35,105,82,.04) 55%, transparent 72%);
border-color: rgba(35,105,82,.10);
}
.bio-fx--soft b { background: rgba(35,105,82,.35); box-shadow: 0 0 8px 2px rgba(35,105,82,.15); }
.bio-fx--soft i:nth-of-type(1) { width: 170px; height: 170px; left: -60px; top: 10%; animation-duration: 24s; }
.bio-fx--soft i:nth-of-type(2) { width: 110px; height: 110px; left: 88%; top: 60%; animation-duration: 18s; animation-delay: -6s; }
.bio-fx--soft i:nth-of-type(3) { width: 80px; height: 80px; left: 46%; top: 84%; animation-duration: 15s; animation-delay: -3s; }
.bio-fx--soft i:nth-of-type(4) { width: 60px; height: 60px; left: 68%; top: 6%; animation-duration: 20s; animation-delay: -9s; }
.bio-fx--soft b:nth-of-type(1) { left: 20%; top: 80%; }
.bio-fx--soft b:nth-of-type(2) { left: 56%; top: 12%; animation-delay: -4s; }
.bio-fx--soft b:nth-of-type(3) { left: 90%; top: 34%; animation-delay: -8s; }
@keyframes bioFloat {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(26px, -34px, 0) scale(1.08); }
}
@keyframes bioDrift {
from { transform: translate3d(0, 0, 0); opacity: .5; }
50% { opacity: 1; }
to { transform: translate3d(-18px, -26px, 0); opacity: .4; }
}
@media (prefers-reduced-motion: reduce) {
.bio-fx i, .bio-fx b { animation: none; }
}
/* 文案要压在动效层上面 */
.home-slide__txt { z-index: 2; }
/* ---------- ⑧ 导航二级目录「热销」小图标 ---------- */
.mega__hot {
display: inline-flex; align-items: center; justify-content: center;
width: 17px; height: 17px; flex: 0 0 auto; margin-right: 2px;
border-radius: 3px; color: #fff;
background: linear-gradient(135deg, #FF7A1A 0%, #E8442E 100%);
}
.mega__hot svg { width: 11px; height: 11px; }
/* ---------- ⑨ 页脚浅色版 ---------- */
.site-footer--light {
background: linear-gradient(180deg, #FFFFFF 0%, #F4F8F5 100%);
color: var(--text-secondary);
border-top: 1px solid var(--line-default);
padding: 0; /* 原深色版的 64px 顶内边距由 .footer-top--v3 自带，避免叠加 */
}
.site-footer--light::before { display: none; }
.site-footer--light a { color: var(--text-secondary); }
.site-footer--light a:hover { color: var(--brand-primary); }
.site-footer--light h4 {
color: var(--text-primary); font-size: var(--fs-body-s); font-weight: 700;
letter-spacing: .04em; margin-bottom: 16px;
}
.footer-top--v3 {
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
gap: 40px;
padding: 52px 0 40px; border-bottom: 1px solid var(--line-default);
}
.footer-top--v3 .slogan { color: var(--brand-primary-dark); font-weight: 700; }
.footer-top--v3 .footer-brand img { height: 30px; margin-bottom: 14px; }
.footer-top--v3 .footer-brand__desc { color: var(--text-secondary); }
.footer-social .fsoc {
background: #fff; border-color: var(--line-strong); color: var(--text-secondary);
box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}
.footer-social .fsoc:hover { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; transform: translateY(-2px); }
.footer-social .fsoc--linkedin:hover { background: #0A66C2; border-color: #0A66C2; }
.footer-social .fsoc--facebook:hover { background: #1877F2; border-color: #1877F2; }
.footer-social .fsoc--youtube:hover { background: #FF0000; border-color: #FF0000; }
.footer-social .fsoc--x:hover { background: #111111; border-color: #111111; }
.footer-social .fsoc--instagram:hover { background: #E1306C; border-color: #E1306C; }
.footer-top--v3 .fcontact__ico {
background: #fff; border-color: var(--line-strong); color: var(--brand-primary);
box-shadow: 0 2px 6px rgba(16, 24, 40, .05);
}
.footer-top--v3 .fcontact b { color: var(--text-disabled); }
.footer-top--v3 .fcontact em { color: var(--text-primary); font-weight: 600; }
.footer-top--v3 .footer-addr { color: var(--text-secondary); }
.footer-top--v3 .footer-links li { color: var(--text-secondary); }
.footer-top--v3 .footer-links a:hover { color: var(--brand-primary); }
/* 精简页脚：一行导航 + 一行版权，居中 */
.footer-simple { padding: 26px 0 30px; text-align: center; }
.footer-simple .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 34px; }
.footer-simple .footer-nav a {
font-size: var(--fs-body-s); color: var(--text-primary); font-weight: 600;
text-decoration: none; transition: color .16s var(--ease);
}
.footer-simple .footer-nav a:hover { color: var(--brand-primary); text-decoration: none; }
.footer-simple .footer-nav a:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 3px; border-radius: 3px; }
.footer-simple .footer-copy {
margin-top: 14px; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
font-size: var(--fs-caption); color: var(--text-disabled);
}
@media (max-width: 620px) {
.footer-simple .footer-nav { gap: 10px 20px; }
.footer-simple .footer-copy { flex-direction: column; }
}
.site-footer--light .footer-bottom {
border-top: 0; color: var(--text-disabled); padding: 18px 0 26px;
}
.site-footer--light .footer-bottom span { color: var(--text-disabled); }
.site-footer--light .footer-legal a { color: var(--text-secondary); }
.site-footer--light .footer-legal a:hover { color: var(--brand-primary); }
@media (max-width: 1100px) { .footer-top--v3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; } }
@media (max-width: 620px) {
.footer-top--v3 { grid-template-columns: 1fr; gap: 28px; padding: 36px 0 30px; }
.site-footer--light .footer-bottom { flex-direction: column; align-items: flex-start; }
}
/* ==========================================================================
午后（8 条落地）
========================================================================== */
/* ---------- ① 活动条：去掉标签，随页面自然滚出 ----------
促销条在 .site-top（sticky）之外：吸顶块高度全程不变，滚动零跳动。
任何「滚动后收起」的高度动画都会让整页内容跟着位移，肉眼即晃动。 */
.promo-bar__tag { display: none; } /* 「活动快讯」标签去掉，只留滚动内容 */
/* ---------- ⑧ 数据条：与轮播图衔接（上浮玻璃卡） ----------
玻璃卡压在轮播底边上：负 margin 上浮、
半透明白 + 背景模糊、顶部一道品牌渐变线与轮播底部的渐变线同款 —— 视觉上连成一体。 */
.home-stats { position: relative; z-index: 5; margin-top: -58px; padding-top: 0; }
.home-stats .statline {
background: rgba(255, 255, 255, .86);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
/* 压边卡片下半截落在白底上，白色描边会"隐形"，
看起来像卡片被拦腰切断 —— 换中性描边 + 收紧投影。 */
border: 1px solid rgba(16, 24, 40, .10);
box-shadow: 0 18px 44px -18px rgba(9, 32, 24, .30), 0 2px 8px rgba(16, 24, 40, .06);
overflow: hidden;
}
.home-stats .statline::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
background: linear-gradient(90deg, var(--brand-accent) 0%, var(--brand-primary) 34%, #3E9B78 62%, var(--state-info) 100%);
opacity: .9;
}
.home-stats .statline__bg { opacity: .28; }
/* ---------- ⑦ 导航精修 ----------
项与项之间加分隔点、hover/当前态用底部短条 + 加色，mega 弹层加入场动画与更清晰的列头。 */
.site-nav .nav-link {
position: relative; font-weight: 600; letter-spacing: .02em;
padding: 0 16px;
}
.site-nav .nav-link::after {
content: ""; position: absolute; left: 16px; right: 16px; bottom: 0;
height: 3px; border-radius: 2px 2px 0 0;
background: linear-gradient(90deg, var(--brand-primary), #3E9B78);
transform: scaleX(0); transform-origin: center;
transition: transform .22s var(--ease);
}
.site-nav .nav-link:hover, .site-nav .nav-link.is-on { color: var(--brand-primary-dark); }
.site-nav .nav-link:hover::after, .site-nav .nav-link.is-on::after { transform: scaleX(1); }
.site-nav .nav-item + .nav-item .nav-link::before {
content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%);
width: 1px; height: 14px; background: var(--line-strong);
}
.nav-item--has:hover .nav-link .caret { transform: rotate(180deg); }
.nav-link .caret { transition: transform .2s var(--ease); }
.nav-link__ico { width: 18px; height: 18px; margin-right: 6px; color: var(--text-secondary); transition: color .2s var(--ease); }
.nav-link:hover .nav-link__ico, .nav-link.is-on .nav-link__ico { color: var(--brand-primary); }
@media (max-width: 900px) {
.nav-link__ico { display: none; }
}
/* mega 弹层：入场动画 + 列头精修 */
.mega {
opacity: 0; transform: translateY(10px); pointer-events: none;
transition: opacity .2s var(--ease), transform .2s var(--ease);
}
.nav-item--has:hover .mega, .nav-item--has:focus-within .mega, .nav-item--has.is-open .mega {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
.mega__inner {
border-top: 3px solid transparent;
-webkit-border-image: linear-gradient(90deg, var(--brand-primary), #3E9B78 45%, var(--state-info)) 1;
border-image: linear-gradient(90deg, var(--brand-primary), #3E9B78 45%, var(--state-info)) 1;
}
.mega__col-title {
font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
color: var(--text-disabled); margin-bottom: 12px;
}
.mega__sub, .mega__cat {
border-radius: 4px; transition: background .14s var(--ease), color .14s var(--ease), padding .14s var(--ease);
}
.mega__sub:hover { padding-left: 4px; }
.mega__foot { background: var(--bg-subtle); }
/* ---------- ④ 选型助手横幅重设计（行业属性元素） ---------- */
.finder-band {
position: relative; overflow: hidden;
border-radius: var(--r-card);
background: linear-gradient(115deg, #0C2F23 0%, #17513D 46%, #12557A 100%);
color: #fff; padding: 44px 48px;
display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.finder-band__art { position: absolute; inset: 0; pointer-events: none; }
/* 与页脚同一只手绘线稿兔：反白后压到低透明度，错落摆放只做背景。 */
.finder-band__bunny {
position: absolute; display: block; height: auto;
filter: brightness(0) invert(1); pointer-events: none;
}
.finder-band__bunny--1 { width: 176px; right: 240px; top: -14px; opacity: .17; transform: rotate(-6deg); }
.finder-band__bunny--2 { width: 122px; right: 58px; bottom: -22px; opacity: .13; transform: scaleX(-1) rotate(8deg); }
.finder-band__bunny--3 { width: 92px; right: 430px; bottom: -10px; opacity: .10; transform: rotate(12deg); }
.finder-band .bio-fx { z-index: 1; }
.finder-band__txt { position: relative; z-index: 2; max-width: 640px; }
.finder-band__txt h2 { margin: 0 0 10px; font-size: 28px; color: #fff; }
.finder-band__txt .lede { margin: 0; color: rgba(255, 255, 255, .82); line-height: 1.8; }
/* 品牌 Slogan：比 lede 更短更重，用品牌色提亮，
与下方的卖点胶囊（.finder-band__props）拉开层级 —— 一句定性，几点论据 */
.finder-band__slogan {
margin: 12px 0 0; font-family: var(--ff-display); font-weight: 900;
font-size: 17px; letter-spacing: .02em; color: #7FE0AE;
}
.finder-band__props {
list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0;
}
.finder-band__props li {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 12px; border-radius: var(--r-pill);
background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .16);
font-size: var(--fs-caption); color: rgba(255, 255, 255, .9);
}
.finder-band__props svg { color: #7FE0AE; }
.finder-band__act { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 10px; }
.finder-band__act .btn { min-width: 168px; }
@media (max-width: 900px) {
.finder-band { padding: 32px 24px; }
.finder-band__bunny--1 { right: -30px; }
.finder-band__act { flex-direction: row; }
}
/* ---------- ⑤ 动效增强：更大更亮 + 旋转轨道环 / 脉冲荧光点 ----------
纯 CSS：::before/::after 画两圈缓慢旋转的虚线轨道（"研发仪器"感），
荧光点加脉冲呼吸，细胞泡加辉光。 */
.bio-fx::before, .bio-fx::after {
content: ""; position: absolute; border-radius: 50%;
border: 1px dashed rgba(255, 255, 255, .18);
pointer-events: none;
}
.bio-fx::before {
width: 340px; height: 340px; right: -110px; top: -120px;
animation: bioOrbit 46s linear infinite;
}
.bio-fx::after {
width: 220px; height: 220px; left: -80px; bottom: -90px;
border-color: rgba(255, 255, 255, .12);
animation: bioOrbit 34s linear infinite reverse;
}
.bio-fx--soft::before { border-color: rgba(35, 105, 82, .14); }
.bio-fx--soft::after { border-color: rgba(35, 105, 82, .10); }
@keyframes bioOrbit { to { transform: rotate(360deg); } }
.bio-fx i {
box-shadow: 0 0 24px 4px rgba(122, 232, 180, .10), inset 0 0 18px rgba(255, 255, 255, .08);
animation-name: bioFloat, bioPulse;
animation-duration: 16s, 7s;
animation-timing-function: ease-in-out, ease-in-out;
animation-iteration-count: infinite, infinite;
animation-direction: alternate, alternate;
}
.bio-fx i:nth-of-type(2n) { animation-delay: -4s, -2.4s; }
.bio-fx i:nth-of-type(3n) { animation-delay: -8s, -1.2s; }
@keyframes bioPulse { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.bio-fx b { animation-name: bioDrift, bioBlink; animation-duration: 11s, 3.2s; animation-iteration-count: infinite, infinite; }
@keyframes bioBlink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.bio-fx::before, .bio-fx::after, .bio-fx i, .bio-fx b { animation: none; }
}
/* ---------- ⑥ 页脚 logo：合成版 logo+slogan 一体图 ---------- */
.footer-brand__logo { height: 74px; width: auto; margin: 0 0 16px; }
.footer-top--v3 .footer-brand img.footer-brand__logo { height: 74px; margin-bottom: 16px; }
/* ==========================================================================
========================================================================== */
/* ---------- ① 选型横幅：线稿兔轻微漂浮 ----------
动画会整体接管 transform，镜像与倾角都写进关键帧里。 */
.finder-band__bunny--1 { animation: bunnySway1 17s ease-in-out infinite; }
.finder-band__bunny--2 { animation: bunnySway2 21s ease-in-out infinite; animation-delay: -5s; }
.finder-band__bunny--3 { animation: bunnySway3 15s ease-in-out infinite; animation-delay: -8s; }
@keyframes bunnySway1 {
0%, 100% { transform: rotate(-6deg) translate(0, 0); }
50% { transform: rotate(-2deg) translate(-10px, 8px); }
}
@keyframes bunnySway2 {
0%, 100% { transform: scaleX(-1) rotate(8deg) translate(0, 0); }
50% { transform: scaleX(-1) rotate(3deg) translate(8px, -8px); }
}
@keyframes bunnySway3 {
0%, 100% { transform: rotate(12deg) translate(0, 0); }
50% { transform: rotate(6deg) translate(-8px, -6px); }
}
@media (prefers-reduced-motion: reduce) {
.finder-band__bunny--1, .finder-band__bunny--2, .finder-band__bunny--3 { animation: none; }
}
/* ---------- ② 轮播 → 明星产品的过渡 ----------
轮播底边加一段暗部渐隐（视觉上"收底"），明星产品区顶部改浅绿渐入，
中间再由数据条玻璃卡压边 —— 三层过渡，不再是硬切一条线。 */
.home-slides::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
background: linear-gradient(180deg, rgba(9, 38, 28, 0) 0%, rgba(9, 38, 28, .45) 100%);
pointer-events: none; z-index: 1;
}
.section--mesh {
background: linear-gradient(180deg, #E9F1ED 0%, #F6F9F7 30%, #F6F9F7 100%);
}
/* 明星产品区：—— 用**纯白背景**与上方板块衔接（浅绿渐层与轮播底
形成明显断层）。板块间不再靠背景色区分，靠 .band-divider 分割带做设计衔接。 */
.section--products { background: #fff; }
/* ---------- ③ 导航：hover 底部短条删掉 + 一级分类项靠左 ----------
hover 导航项时的底部短条，加上项间分隔竖线与面板顶边渐变，
看起来"像三条线段"。hover 只留变色 + caret 旋转。 */
.site-nav .nav-link::after { display: none; }
.nav-link.is-on::after { display: none; }
/* 一级分类列的项（dot + 名称 + 计数）靠左排，不用 space-between */
.mega__list a { justify-content: flex-start; }
.mega__list .sku { margin-left: auto; }
/* 搜索联想 · 后台推荐标签（最新热门搜索）—— 与普通 pill 区分：主色描边 + 浅底 */
.pill--reco {
border-color: var(--brand-primary);
background: var(--brand-primary-light);
color: var(--brand-primary-dark);
font-weight: 600;
}
.pill--reco:hover { background: var(--brand-primary); color: #fff; text-decoration: none; }
/* ==========================================================================
========================================================================== */
/* ---------- ② 数据条 → 明星商品过渡带：渐隐线 + 中央分子徽标 ---------- */
.band-divider { display: flex; align-items: center; gap: 18px; margin-top: 36px; }
.band-divider i { flex: 1; height: 1px; }
.band-divider i:first-child { background: linear-gradient(90deg, transparent 0%, rgba(35, 105, 82, .38) 100%); }
.band-divider i:last-child { background: linear-gradient(270deg, transparent 0%, rgba(35, 105, 82, .38) 100%); }
.band-divider__badge {
width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #fff; color: var(--brand-primary);
border: 1px solid rgba(35, 105, 82, .30);
box-shadow: 0 6px 18px rgba(35, 105, 82, .18);
}
/* ---------- ③ 动效提亮 + 幅度加大 + 靠正文两侧空白 ----------
soft 版透明度提到肉眼可见；漂浮距离加大近一倍；
泡和荧光点改到内容区两侧空白带（wrap 1200 居中，两侧各约 150px）。 */
.bio-fx--soft i {
background: radial-gradient(circle at 32% 30%, rgba(62, 155, 120, .20) 0%, rgba(62, 155, 120, .08) 55%, transparent 72%);
border-color: rgba(62, 155, 120, .22);
}
.bio-fx--soft b {
background: rgba(62, 175, 130, .75);
box-shadow: 0 0 12px 3px rgba(62, 175, 130, .35);
}
.bio-fx--soft i:nth-of-type(1) { width: 170px; height: 170px; left: -70px; top: 12%; animation-duration: 18s; }
.bio-fx--soft i:nth-of-type(2) { width: 120px; height: 120px; left: 92%; top: 55%; animation-duration: 14s; animation-delay: -6s; }
.bio-fx--soft i:nth-of-type(3) { width: 84px; height: 84px; left: -30px; top: 78%; animation-duration: 12s; animation-delay: -3s; }
.bio-fx--soft i:nth-of-type(4) { width: 64px; height: 64px; left: 95%; top: 6%; animation-duration: 16s; animation-delay: -9s; }
.bio-fx--soft b:nth-of-type(1) { left: 3%; top: 82%; }
.bio-fx--soft b:nth-of-type(2) { left: 4%; top: 10%; animation-delay: -4s; }
.bio-fx--soft b:nth-of-type(3) { left: 96%; top: 36%; animation-delay: -8s; }
@keyframes bioFloat {
from { transform: translate3d(0, 0, 0) scale(1); }
to { transform: translate3d(52px, -68px, 0) scale(1.12); }
}
@keyframes bioDrift {
from { transform: translate3d(0, 0, 0); opacity: .55; }
50% { opacity: 1; }
to { transform: translate3d(-38px, -54px, 0); opacity: .45; }
}
/* ---------- ④ 产品下拉：二级项靠左 + 去顶部渐变长线 ---------- */
.mega__sub { justify-content: flex-start; }
.mega__inner::before { display: none; }
.mega__inner { border-top: 0 !important; border-image: none !important; }
.mega--simple .mega__inner { border-radius: 6px; }
/* ---------- ⑤ 产品以外的下拉：紧凑小面板（贴导航项、两列、无脚条） ----------
参考给的样式：白底圆角阴影小卡片，不是全宽 mega。 */
.nav-item--drop { position: relative; }
.nav-item--drop .mega {
left: 4px; right: auto; width: max-content; min-width: 300px; max-width: 480px; top: 100%;
padding: 0;
}
.mega--simple .mega__inner {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 10px;
padding: 10px 12px; margin: 0;
border: 1px solid var(--line-default); border-radius: 6px;
box-shadow: 0 18px 44px rgba(16, 24, 40, .14);
}
.mega--simple .mega__cat.light { justify-content: flex-start; padding: 9px 12px; white-space: nowrap; }
.mega--simple .mega__foot { display: none; }
/* ---------- ⑥ 内页栏目头：去英文辅助 + 渐变主色条重设计 ---------- */
.page-lead { position: relative; padding: 4px 0 22px 24px; margin-bottom: 30px; }
.page-lead::before {
content: ""; position: absolute; left: 0; top: 6px; bottom: 24px; width: 4px; border-radius: 3px;
background: linear-gradient(180deg, var(--brand-accent) 0%, var(--brand-primary) 55%, #3E9B78 100%);
}
.page-lead::after {
content: ""; position: absolute; left: 24px; right: 0; bottom: 0; height: 1px;
background: linear-gradient(90deg, rgba(35, 105, 82, .30), rgba(35, 105, 82, .05) 65%, transparent);
}
/* 修正：紧凑小面板（nav-item--drop）的显隐 —— 显示规则原只写 .nav-item--has:hover，
--drop 面板几何尺寸正常但 opacity:0（验收断言量 rect 才差点假通过）。 */
.nav-item--drop:hover .mega, .nav-item--drop:focus-within .mega, .nav-item--drop.is-open .mega {
opacity: 1; transform: translateY(0); pointer-events: auto;
}
/* ==========================================================================
① 明星商品与上方板块的间距收紧 ② 首页通栏横幅 150px ③ 产品目录单个细胞动画
④ 各板块背景统一重做 ⑤ 导航：促销活动不下拉 / 关于我们一行一列
========================================================================== */
/* ---------- ① 收紧：数据条 → 明星商品 ----------
home-stats 底部 64px + 明星商品顶部 82px = 146px 空白，去掉背景色后
这段"空"被放大成一条明显的缝。现在压缩到 22 + 44 = 66px，
并把明星商品区顶部做成浅色渐入（白→透明），衔接不再是硬切。 */
.section--tight.home-stats { padding-bottom: 22px; }
/* 详情页首屏头部：顶部留白收紧（面包屑到标题 64→38px） */
.section--pdtop { padding-top: 38px; }
.section--products { padding-top: 44px; }
/* ---------- ② 首页通栏横幅（150px · 与正文同宽 · 纯 CSS 自动轮播） ----------
不依赖 JS：JS 轮播一旦绑定失败就"卡住不动"，纯 CSS 关键帧在任何环境下都转。
--n = 张数，--i = 序号，各张按 5s 一段接力淡入淡出。 */
.home-strip-sec { padding: 4px 0 6px; }
.home-strip {
position: relative; height: 150px; overflow: hidden;
border-radius: 6px; background: var(--bg-subtle);
box-shadow: 0 10px 30px rgba(16, 24, 40, .07);
}
.home-strip__i {
position: absolute; inset: 0; display: block; overflow: hidden;
opacity: 0; animation: stripSwap calc(var(--n) * 5s) linear infinite;
animation-delay: calc(var(--i) * 5s);
}
.home-strip__i img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 文字压底：横幅图左半区偏亮，白字直接压图对比度不够；
左深右浅的渐变只压文字活动区，右侧画面保持通透 */
.home-strip__i::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(90deg, rgba(8, 38, 28, .62) 0%, rgba(8, 38, 28, .34) 38%, rgba(8, 38, 28, 0) 68%);
}
.home-strip__ph { position: relative; display: block; width: 100%; height: 100%; background: linear-gradient(120deg, #0E4C3A, #1C7A56 55%, #2E9B72); }
.home-strip__i:nth-child(1) .home-strip__ph { background-image: linear-gradient(120deg, #0E4C3A 0%, #1C7A56 55%, #35956E 100%); }
.home-strip__i:nth-child(2) .home-strip__ph { background-image: linear-gradient(120deg, #123B63 0%, #1C6BA8 55%, #3C8FC8 100%); }
.home-strip__i:nth-child(3) .home-strip__ph { background-image: linear-gradient(120deg, #4A2C6B 0%, #6E46A0 55%, #9270C6 100%); }
.home-strip__ph::after {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 18% 78%, rgba(255, 255, 255, .16) 0 2px, transparent 3px),
radial-gradient(circle at 62% 26%, rgba(255, 255, 255, .13) 0 2px, transparent 3px),
radial-gradient(circle at 86% 66%, rgba(255, 255, 255, .12) 0 2px, transparent 3px);
background-repeat: no-repeat;
}
.home-strip__t {
position: absolute; left: 28px; bottom: 26px; z-index: 2;
font-size: 21px; font-weight: 700; letter-spacing: .3px; color: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 2px 14px rgba(0, 0, 0, .45);
}
.home-strip__dots { position: absolute; right: 18px; bottom: 14px; z-index: 3; display: flex; gap: 6px; }
@keyframes stripSwap {
0% { opacity: 0; transform: scale(1.03); }
3% { opacity: 1; transform: scale(1); }
/* 单张可见时长 = 5s，总周期 = n*5s → 可见占比 = 1/n */
22% { opacity: 1; transform: scale(1); }
26% { opacity: 0; transform: scale(1.01); }
100% { opacity: 0; }
}
@keyframes stripDot { 0%, 22% { background: rgba(255,255,255,.95); } 26%, 100% { background: rgba(255,255,255,.40); } }
@media (prefers-reduced-motion: reduce) {
.home-strip__i, .home-strip__dots i { animation: none; }
.home-strip__i { opacity: 0; }
.home-strip__i:first-child { opacity: 1; }
}
@media (max-width: 700px) { .home-strip { height: 112px; } .home-strip__t { font-size: 17px; left: 18px; bottom: 18px; } }
/* ---------- ③ 产品目录：单个细胞动画（非满屏堆砌） ----------
"比如在产品目录那个板块增加一个动画细胞，看起来生动真实一些"。
只在右下角放**一个**细胞：膜呼吸、核漂移、细胞器公转、囊泡浮动、膜外多糖层慢转。
pointer-events:none，reduced-motion 下静止。 */
.home-cats { padding-bottom: 148px; }
.home-cats > .bio-cell {
position: absolute; right: 3%; bottom: -34px; width: 250px; height: 250px;
pointer-events: none; z-index: 0; opacity: .9;
}
.home-cats > .bio-cell::after {
/* 细胞外围的一圈柔光，让它像"浸在培养液里"而不是贴纸 */
content: ""; position: absolute; inset: -18%;
background: radial-gradient(circle, rgba(62, 155, 120, .16) 0%, rgba(62, 155, 120, .05) 55%, transparent 72%);
}
.bio-cell svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bio-cell .bc-mem { transform-origin: 120px 120px; animation: bcBreath 7s ease-in-out infinite; }
.bio-cell .bc-glyco { transform-origin: 120px 120px; animation: bcSpin 46s linear infinite reverse; }
.bio-cell .bc-nuc { transform-origin: 120px 120px; animation: bcDrift 11s ease-in-out infinite; }
.bio-cell .bc-org { transform-origin: 120px 120px; animation: bcSpin 30s linear infinite; }
.bio-cell .bc-v { animation: bcFloat 6s ease-in-out infinite; }
.bio-cell .bc-v2 { animation: bcFloat 7.5s ease-in-out infinite; animation-delay: -2.4s; }
.bio-cell .bc-v3 { animation: bcFloat 9s ease-in-out infinite; animation-delay: -5.1s; }
@keyframes bcBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.038); } }
@keyframes bcSpin { to { transform: rotate(360deg); } }
@keyframes bcDrift { 0%, 100% { transform: translate(0, 0); } 34% { transform: translate(5px, -4px); } 68% { transform: translate(-4px, 4px); } }
@keyframes bcFloat { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-7px); opacity: .85; } }
@media (prefers-reduced-motion: reduce) { .bio-cell * { animation: none !important; } }
@media (max-width: 900px) { .home-cats > .bio-cell { display: none; } .home-cats { padding-bottom: 82px; } }
/* ---------- ④ 板块背景统一重做（设计审查） ----------
原则：整页只用 **白 → 极浅薄荷 → 白** 一段深浅呼吸，不再每个板块各自一层
重色纹理；明暗差控制在 3% 以内（#FFF ↔ #F1F7F4），靠**纹理与光位**区分板块，
而不是靠色块硬切。 */
.home-cats {
background: linear-gradient(180deg, #FFFFFF 0%, #F6FAF8 46%, #F1F7F4 100%);
}
.home-cats::before {
/* 实验记录纸式的淡格，只在右下（细胞那一角）显影，别处不铺 */
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
background-image:
linear-gradient(rgba(35, 105, 82, .075) 1px, transparent 1px),
linear-gradient(90deg, rgba(35, 105, 82, .075) 1px, transparent 1px);
background-size: 62px 62px;
-webkit-mask-image: radial-gradient(ellipse 62% 58% at 82% 86%, #000 0%, transparent 74%);
mask-image: radial-gradient(ellipse 62% 58% at 82% 86%, #000 0%, transparent 74%);
}
.section--grid {
background: linear-gradient(180deg, #EEF5F1 0%, #F7FAF8 62%, #FFFFFF 100%);
}
.section--grid > .wrap::before {
background-image: radial-gradient(rgba(35, 105, 82, .14) 1px, transparent 1px);
background-size: 28px 28px; opacity: .5;
}
/* 明星商品区顶部的一层极淡上行光，去掉背景色后不至于"一片死白" */
.section--products::before {
content: ""; position: absolute; left: 0; right: 0; top: 0; height: 260px; pointer-events: none; z-index: 0;
background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(62, 155, 120, .07) 0%, transparent 72%);
}
/* ---------- ⑤ 导航：关于我们"一行一列" / 促销活动不下拉 ---------- */
.mega--single .mega__inner { grid-template-columns: minmax(0, 1fr); min-width: 210px; }
.mega--single .mega__cat.light { padding: 10px 14px; }
/* ==========================================================================
① 关于我们下拉收窄 ② 产品目录浅灰底/去网格/细胞上移提亮 ③ 横幅 200px + 真实图 + 衔接
④ 四大索引下方空白收紧
========================================================================== */
/* ---------- ① 关于我们下拉：一行一列 + 按内容收宽，不再撑 300px ---------- */
.nav-item--drop .mega.mega--single { min-width: 0; width: max-content; max-width: none; }
.mega--single .mega__inner { min-width: 0; padding: 8px 10px; }
.mega--single .mega__cat.light { padding: 8px 12px; }
/* ---------- ② 产品目录：浅灰底（不要网格）；细胞挪到标题行右侧空白 ----------
细胞 bottom:-34px 会被板块底边裁掉一截 ——
挪到左上标题行的右侧留白区（那里本来就是空的），完整不裁切。 */
.home-cats {
background: linear-gradient(180deg, #FFFFFF 0%, #F4F5F6 46%, #F0F1F3 100%);
padding-bottom: 56px;
}
.home-cats::before { content: none; }
.home-cats > .bio-cell { right: auto; bottom: auto; left: 10px; top: 52px; width: 118px; height: 118px; }
/* ---------- ③ 通栏横幅：200px；上下板块同底色，消除"硬塞"的白缝 ----------
产品目录(白) → 横幅(白底) → 四大索引(灰绿)，三段底色互不相接。
现在：产品目录收在 #F0F1F3 → 横幅带 #F0F1F3→#EEF0F2 → 四大索引从 #EEF0F2 起，
一条灰带贯通三个板块，横幅像是"长在"页面里的，不是贴上去的。 */
.home-strip-sec {
padding: 26px 0 32px;
background: linear-gradient(180deg, #F0F1F3 0%, #EEF0F2 100%);
}
.home-strip { height: 200px; border-radius: 5px; }
@media (max-width: 700px) { .home-strip { height: 132px; } }
/* ---------- ④ 四大索引下方空白 ----------
section-y=96px，索引区底 96 + 选型带区顶 96 = 192px 空 → 收到 44 + 48。 */
.section--grid {
padding-bottom: 44px;
background: linear-gradient(180deg, #EEF0F2 0%, #F7F8F8 62%, #FFFFFF 100%);
}
.section--grid + .section { padding-top: 48px; }
/* ==========================================================================
⑤：产品详情页
产品头全宽置顶 → 大图(左) + 价格侧栏(右, sticky)；下方「最近浏览」
========================================================================== */
/* ---------- 产品头（全宽） ---------- */
.pd-head { margin-bottom: 20px; }
.pd-head .pd-title { font-size: 30px; }
/* ---------- 两栏：大图 | 侧栏 ----------
画廊宽度不足时图区显小（约占 55%）——
画廊吃满剩余宽度，侧栏固定 clamp(300,30%,380)。 */
.pd-top {
grid-template-columns: minmax(0, 1fr) clamp(300px, 30%, 380px);
gap: 24px;
}
.pd-aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.pd-buy { margin-top: 0; position: sticky; top: 16px; }
.pd-info { margin: 0; }
/* 字段表在窄侧栏里改单列堆叠（原两列 190px 标签列放不下） */
.pd-aside .pd-core { grid-template-columns: minmax(0, 1fr); }
.pd-aside .pd-core dt { width: 118px; flex: 0 0 118px; }
.pd-aside .pd-core dd { flex: 1; }
.quickbar--col { flex-direction: column; align-items: stretch; }
.quickbar--col .btn { justify-content: center; }
/* ---------- 右栏：联系销售 / 技术支持 / 文档下载 ---------- */
.pd-docs {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-default);
display: flex; flex-direction: column; gap: 8px;
}
.pd-docs__row { display: flex; align-items: baseline; gap: 10px; font-size: var(--fs-body-s); }
.pd-docs__row--col { flex-direction: column; align-items: flex-start; gap: 6px; }
.pd-docs__k {
display: inline-flex; align-items: center; gap: 5px; flex: 0 0 88px;
font-weight: 700; color: var(--text-primary);
}
.pd-docs__row a { color: var(--brand-primary-dark); }
.pd-docs__row a:hover { text-decoration: underline; }
.pd-docs__links { display: flex; flex-direction: column; gap: 5px; }
/* ---------- 最近浏览（纯前端 localStorage，无记录整块不渲染） ----------
此 section 已移出正文 .wrap（main 直接子级），左右边界与 .pd-top 同为
80/1360；与上一板块的间距由 section--tight 的 64 + 这里 40 = 104px 决定
（两块同处一个 section 只隔 8px，视觉太近）。 */
.pd-recent { padding-top: 40px; padding-bottom: 72px; }
.pd-recent__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.pd-recent__head h2 { font-size: 21px; }
.pd-recent__clear {
border: 0; background: none; cursor: pointer; font-size: var(--fs-body-s);
color: var(--text-secondary); padding: 2px 4px;
}
.pd-recent__clear:hover { color: var(--brand-primary-dark); text-decoration: underline; }
.pd-recent__row {
display: flex; gap: var(--gutter);
overflow-x: auto; overscroll-behavior-x: contain;
scroll-snap-type: x proximity; scrollbar-width: none;
padding-bottom: 4px;
}
.pd-recent__row::-webkit-scrollbar { height: 0; display: none; }
.pd-recent__card {
position: relative; display: flex; flex-direction: column; gap: 8px;
flex: 0 0 calc((100% - 3 * var(--gutter)) / 4); scroll-snap-align: start;
border: 1px solid var(--line-default); border-radius: var(--r-card);
background: #fff; padding: 14px 16px; box-shadow: var(--sh-card);
text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
}
.pd-recent__card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(16, 24, 40, .10); }
.pd-recent__cat {
align-self: flex-start; font-size: 11px; padding: 2px 8px; border-radius: 999px;
background: var(--brand-primary-light); color: var(--brand-primary-dark); font-weight: 600;
}
.pd-recent__no { font-size: var(--fs-caption); color: var(--text-secondary); }
.pd-recent__name {
font-size: var(--fs-body-s); font-weight: 600; color: var(--text-primary); line-height: 1.45;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.9em;
}
@media (max-width: 1100px) { .pd-recent__card { flex-basis: calc((100% - 2 * var(--gutter)) / 3); } }
/* 窄屏回落：详情页两栏 → 单栏（原 1100/1000 断点里的三栏规则随之失效） */
@media (max-width: 1100px) {
.pd-top { grid-template-columns: minmax(0, 1fr); }
/* 旧断点给画廊写过 grid-row:1/span 2（三栏时代让画廊跨两行）——
单栏下不清零会拖出一个空行，侧栏被顶到第二屏。 */
.pd-gallery { grid-row: auto; }
.pd-buy, .pd-info { position: static; }
}
/* ==========================================================================
① 横幅回色块 / 目录↔明星间距 / 明星区滚动条 ② 细胞悬停动效
③ 详情页：产品头与右栏悬浮、去 Category、pd-docs 排版、锚点导航重设计
========================================================================== */
/* ---------- ①a 横幅回到色块占位（真实图记录已在后台停用，前台自动回落） ---------- */
/* ---------- ①b 明星商品 ↔ 产品目录 间距收紧（96+96=192 → 44+48） ---------- */
.section--products { padding-bottom: 44px; }
.home-cats { padding-top: 48px; }
/* ---------- ①c 明星产品横向滚动条隐藏（箭头还在，滚动手势/滚轮不受影响） ---------- */
.hscroll { scrollbar-width: none; padding-bottom: 4px; }
.hscroll::-webkit-scrollbar { height: 0; display: none; }
/* ---------- ①d 明星产品桌面端改 4 列网格（8 款排两行；滚动/箭头只留手机端） ---------- */
@media (min-width: 761px) {
.section--products .hscroll { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); overflow: visible; }
.section--products .hsnav { display: none; }
}
/* ---------- ② 细胞：悬停动效 ----------
悬停幅度用 CSS 变量传进关键帧（var() 在动画里动态解析），
悬停只改变量、不换 animation-name —— 动画不会跳帧。 */
.bio-cell { --bamp: .038; --vamp: 7px; }
@keyframes bcBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(calc(1 + var(--bamp))); } }
@keyframes bcFloat { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(calc(-1 * var(--vamp))); opacity: .9; } }
.home-cats > .bio-cell {
pointer-events: auto; /* 只此实例可接收 hover；位置在标题行右侧空白，不压任何链接 */
z-index: 2; /* 必须 > .wrap 的 z-index:1 —— 否则 hover 全被 wrap 截走 */
transition: transform .5s ease;
}
.home-cats > .bio-cell svg { transition: transform .55s ease; }
.home-cats > .bio-cell:hover { --bamp: .075; --vamp: 15px; transform: translateY(-6px); }
.home-cats > .bio-cell:hover svg { transform: scale(1.05) rotate(2.5deg); }
.home-cats > .bio-cell::after { transition: transform .55s ease; }
.home-cats > .bio-cell:hover::after { transform: scale(1.14); }
.bio-cell .bc-mem circle, .bio-cell .bc-glyco { transition: stroke-opacity .45s ease; }
.home-cats > .bio-cell:hover .bc-glyco { stroke-opacity: .55; }
.home-cats > .bio-cell:hover .bc-mem > circle:first-child { stroke-opacity: .8; }
/* 悬停彩蛋：三颗彩色溶酶体亮起（默认 opacity:0）。
⚠️ 不能复用 bcFloat —— 它带 opacity 通道，会把 hover 淡入盖掉；
这里用只动 transform 的 bcFloatT，opacity 通道留给 hover 过渡。 */
.bio-cell .bc-h { opacity: 0; transition: opacity .45s ease; }
.home-cats > .bio-cell:hover .bc-h { opacity: 1; }
@keyframes bcFloatT { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(-1 * var(--vamp, 8px))); } }
.bio-cell .bc-h1 { animation: bcFloatT 5s ease-in-out infinite; }
.bio-cell .bc-h2 { animation: bcFloatT 6.4s ease-in-out infinite; animation-delay: -2.2s; }
.bio-cell .bc-h3 { animation: bcFloatT 7.6s ease-in-out infinite; animation-delay: -4.6s; }
/* ---------- ③a 详情页：产品头走普通文档流，悬浮信息由覆盖条承接 ----------
sticky 元素滚动收起高度必然牵动整页内容位移（晃动/闪屏的根源），一律不做。
滚过哨兵后 .pd-fixbar（fixed 覆盖层）滑入，滑入滑出只动自身 transform。 */
.pd-head {
margin-bottom: 18px; padding: 0 0 8px;
border-bottom: 1px solid transparent;
}
.pd-fixbar {
position: fixed; left: 0; right: 0;
top: var(--pdnav-top, 72px); z-index: 70;
background: rgba(255, 255, 255, .97);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--line-default);
box-shadow: 0 12px 26px -20px rgba(16, 24, 40, .40);
transform: translateY(-110%);
transition: transform .24s ease;
pointer-events: none;
}
.pd-fixbar.is-on { transform: translateY(0); pointer-events: auto; }
.pd-fixbar__in { display: flex; align-items: center; gap: 14px; height: 54px; min-width: 0; }
.pd-fixbar__t {
flex: 1 1 auto; min-width: 0; margin: 0;
font-size: 16px; font-weight: 700; color: var(--text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pd-fixbar__no { flex: 0 0 auto; color: var(--text-secondary); font-size: 13px; }
.pd-fixbar .catno__copyall { flex: 0 0 auto; }
/* 右栏 sticky 顶部 = 锚点导航同一吸附线（站头 + 悬浮紧凑条实际高度） */
.pd-buy { top: var(--pdstick, 138px); }
/* 购买盒底部的服务承诺行（服务维度辅助文案） */
.pd-buy__svc {
display: flex; align-items: center; gap: 7px;
margin-top: 14px; padding-top: 12px;
border-top: 1px dashed var(--line-default);
color: var(--text-secondary); font-size: var(--fs-body-s); line-height: 1.6;
}
.pd-buy__svc svg { flex: 0 0 auto; color: var(--brand-primary); }
/* ---------- ③b 右栏细节排版（规格价格框内） ---------- */
.pd-assure {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 7px 14px; margin-top: 14px; padding-top: 13px;
}
.pd-assure span:last-child { grid-column: 1 / -1; }
.pd-docs { gap: 0; margin-top: 12px; }
.pd-docs__row { padding: 9px 0; border-bottom: 1px dashed var(--line-default); align-items: center; }
.pd-docs__row:first-child { padding-top: 0; }
.pd-docs__row:last-child { border-bottom: 0; padding-bottom: 2px; }
.pd-docs__row--col { gap: 7px; padding-top: 11px; align-items: flex-start; } /* 上面 .pd-docs__row 的 center 会波及本行，收回来 */
.pd-docs__k { flex: 0 0 96px; }
.pd-docs__links { gap: 2px; }
.pd-docs__links a { padding: 3px 0; display: inline-flex; }
/* ---------- ③c 锚点导航（分段胶囊） ----------
圆角分段按钮：当前项实底主色，其余浅灰。 */
.pd-nav {
gap: 10px; margin-top: 24px; padding: 8px 0 12px;
background: #fff; border-bottom: 0; overflow-x: auto;
/* 背景必须实底：sticky 悬浮后正文从透明背景后面穿过，字会叠在页签之间 */
}
.pd-nav__i {
flex: 0 0 auto; padding: 10px 24px; border: 1px solid var(--line-default);
border-bottom: 1px solid var(--line-default); border-radius: 5px;
background: #F4F5F6; color: var(--text-primary); font-weight: 600;
transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.pd-nav__i:hover { background: var(--brand-primary-light); border-color: var(--brand-primary-light); color: var(--brand-primary-dark); }
.pd-nav__i.is-on {
background: var(--brand-primary); border-color: var(--brand-primary); color: #fff;
}
/* ---------- 补充：左列容器（图区 + 锚点导航 + 正文同列） ----------
侧栏要与整个正文同高，价格框才能 sticky 到底；左列必须 min-width:0
防正文里的横排内容把 1fr 轨道顶宽（产品页溢出老坑）。 */
.pd-main { min-width: 0; }
.pd-top > .pd-main { grid-column: 1; }
.pd-top > .pd-aside { grid-column: 2; }
@media (max-width: 1100px) {
.pd-top { grid-template-columns: minmax(0, 1fr); }
.pd-top > .pd-main { grid-column: 1; }
.pd-top > .pd-aside { grid-column: 1; }
}
/* 纵排的「文档下载」行里，96px 的 flex-basis 会变成 96px 高度（主轴为纵向）——
收回 auto，高度由内容决定。 */
.pd-docs__row--col .pd-docs__k { flex: 0 0 auto; }
/* ==========================================================================
① 右栏悬浮顶部被遮挡 ② 最近浏览与正文不对齐/太近 ③ 首页细胞左移缩小错落
========================================================================== */
/* ---------- ① 右栏：改回「stretch + 静态」，sticky 只留给价格框 ----------
根因：.pd-top 的 align-items:start 是**老三栏布局**的遗产（那时 .pd-buy 直接是
网格项，stretch 会把它拉满整列）；.pd-aside 当网格项后，
start 让 aside 只剩内容高（524px），而 aside 自己还带着 730 行的
position:sticky; top:16px → 整栏被钉在视口 16px，顶部 110px 压进 126px 高的顶栏下面，
看起来就是"右侧悬浮上面被遮挡"。现在 stretch 让 aside 与左列同高，
sticky 的行程交给里面的 .pd-buy（top:218px）。 */
.pd-top { align-items: stretch; }
.pd-aside { position: static; }
/* ---------- ③ 首页产品目录：3 个细胞沿左边缘错落 ----------
"细胞动画放左侧 缩小一半 多两错位展现"。
尺寸 212→106（缩小一半）；位置全部收在左页边距（x ≤ 80px，见 index.php 注释）。
三只错落 = 高度错开 + 横向也错开 + 透明度递减（近→远）+ 内部动画周期各不相同，
避免三只"整齐划一"像复制粘贴。hover 交互沿用那套（.home-cats > .bio-cell:hover）。
"如果到时和正文冲突，在正文后面即可"。
于是**解除「left + width ≤ 80」的硬约束** —— 细胞放大到 118px 并整体右移到
离屏幕左边 10~24px，探进标题/卡片的部分**压在内容之下（z-index:0）**，
由标题文字与卡片自己盖住；露在左页边距里的那部分才是"看得见的"。
⚠️ 配套必须做两件事，缺一个就出问题：
① `.home-cats > .wrap` 设 pointer-events:none、其后代设 auto ——
否则 wrap（z-index:1，铺满整宽）会把细胞的 hover 全部截走（踩过）；
② 透明度：露出区只有 70px 宽的新月形（可见宽度恒 = 80 - left，与尺寸无关），
所以**不能靠放大来增加存在感，只能靠透明度**。原 .58/.46/.36 实测偏淡
（绿色干扰仅 +3~+5/255），提到 .82/.66/.52 后干扰 ≈ +7，标题仍清晰。 */
/* 审阅方"细胞图标消失了"——三只都压在正文之下、
只有左缘一条露出，透明度太低几乎看不见。上调一档（仍保持衬底定位）。 */
.home-cats > .bio-cell { opacity: .95; }
/* 细胞降到内容之下（wrap 是 z-index:1），露在页边距的部分仍要能 hover */
.home-cats > .bio-cell { z-index: 0; pointer-events: auto; }
.home-cats > .wrap { pointer-events: none; }
.home-cats > .wrap * { pointer-events: auto; }
/* 细胞变小后，-18% 的柔光圈相对就太小了，放宽到 -16% */
.home-cats > .bio-cell::after { inset: -16%; }
/* 细胞整体位置不再钉死：沿小幅路径缓慢漂移。
用独立 translate 属性承载漂移，不占 transform 通道 —— hover 的
transform 位移/缩放仍可叠加，两者互不覆盖。 */
.home-cats > .bio-cell--a { animation: cellDrift 17s ease-in-out infinite; }
@keyframes cellDrift {
0%, 100% { translate: 0 0; }
30% { translate: 6px -12px; }
55% { translate: -8px -5px; }
80% { translate: 4px 8px; }
}
@media (prefers-reduced-motion: reduce) {
.home-cats > .bio-cell--a { animation: none; }
}
/* （≤900px 隐藏细胞的规则沿用 3550 行那条，不在这里重复定义） */
/* ==========================================================================
① 右栏「文档下载」条目化：PDF/COA 徽标 + 文件名 + 体积 + 下载箭头，
一眼看出是「可下载的文件」，而不是一排文字链
② 最近浏览重排：卡片带产品图、统一基线对齐
③ 首页通栏横幅：圆点可点 + 丝滑；与下方四大索引的间距收紧
========================================================================== */
/* ---------- ① 文档下载条目 ----------
.pd-docs__links 纯文字 a 看不出是文件。
「徽标 + 名称 + 体积 + 下载箭头」横条：徽标用 PDF 红、COA 绿，
hover 整条上浮 1px 并高亮边框，箭头从半透明变实 —— 可点感明确。 */
.pd-files { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.pd-file {
display: flex; align-items: center; gap: 10px;
padding: 9px 10px; border: 1px solid var(--line-default); border-radius: 4px;
background: #fff; text-decoration: none; color: var(--text-primary);
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.pd-file:hover {
border-color: var(--brand-primary); background: var(--bg-subtle);
box-shadow: 0 6px 16px rgba(16, 24, 40, .08); transform: translateY(-1px);
}
.pd-file__ico {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; border-radius: 3px;
/* 徽标是「PDF / COA」这种 3 字母，字号压小、字重拉满才像文件类型标签 */
font-size: 10px; font-weight: 800; letter-spacing: .2px; color: #fff;
background: linear-gradient(160deg, #D8483C, #B32A20);
box-shadow: 0 2px 6px rgba(180, 42, 32, .22);
}
.pd-file__ico--coa { background: linear-gradient(160deg, #1C7A56, #0E4C3A); box-shadow: 0 2px 6px rgba(14, 76, 58, .20); }
.pd-file__ico--more { background: #EEF0F2; color: var(--text-secondary); font-size: 17px; box-shadow: none; }
.pd-file__t {
flex: 1 1 auto; min-width: 0;
font-size: var(--fs-body-s); font-weight: 600; line-height: 1.35;
}
.pd-file__m {
flex: 0 0 auto; font-style: normal;
font-size: var(--fs-caption); color: var(--text-secondary);
}
.pd-file__dl { flex: 0 0 auto; opacity: .5; transition: opacity .2s ease, transform .2s ease; }
.pd-file:hover .pd-file__dl { opacity: 1; transform: translateY(1px); }
@media (max-width: 700px) {
.pd-file { padding: 8px; gap: 8px; }
.pd-file__ico { width: 30px; height: 30px; }
}
/* ---------- ② 最近浏览：卡片带图、基线对齐 ----------
纯文字卡片没有图，名称行数不同导致卡片底部参差。
标准商品卡：上 4:3 图区（object-fit:contain，抗不同长宽比的产品图）
+ 下文字区；文字区用等高（分类胶囊行 + 名称 2 行 min-height）保证横向对齐。 */
.pd-recent__card { padding: 0; gap: 0; overflow: hidden; }
.pd-recent__thumb {
/* 与列表卡 .pcard__media 同规格：固定高 150px + 品牌径向渐变底；
flex 居中 —— 占位 glyph 是固定尺寸 SVG，不居中会顶在左上角 */
display: flex; align-items: center; justify-content: center;
width: 100%; height: 150px;
background: radial-gradient(circle at 50% 42%, #FFFFFF 0%, #F4F8F6 58%, #EAF1ED 100%);
border-bottom: 1px solid var(--line-default);
position: relative; overflow: hidden;
}
/* 占位图形放大到接近首页明星产品卡的观感（默认 82px 在大卡里显小） */
.pd-recent__thumb svg.ab-glyph { width: 112px; height: 112px; }
.pd-recent__thumb::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background-image: radial-gradient(rgba(35, 105, 82, .10) 1px, transparent 1px);
background-size: 18px 18px;
-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 72%);
mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 70%);
}
.pd-recent__thumb img {
width: 100%; height: 100%; object-fit: contain; display: block;
padding: 10px; box-sizing: border-box;
transition: transform .35s ease;
}
.pd-recent__card:hover .pd-recent__thumb img { transform: scale(1.045); }
/* 历史记录里没有图时（老数据 / 该产品确实没配图）不能塌成一块空白 ——
给一个中性占位，卡片高度与其它卡片仍完全一致。 */
.pd-recent__thumb:empty::after {
content: "暂无图片";
display: flex; align-items: center; justify-content: center;
height: 100%; font-size: var(--fs-caption); color: var(--text-disabled);
}
.pd-recent__body {
display: flex; flex-direction: column; gap: 6px;
padding: 10px 12px 12px; min-width: 0;
}
.pd-recent__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-recent__name { min-height: 2.9em; }
@media (max-width: 860px) { .pd-recent__card { flex-basis: calc((100% - var(--gutter)) / 2); } }
@media (max-width: 560px) { .pd-recent__card { flex-basis: 100%; } }
/* 一行滚动的分页圆点 + 箭头到头灰态：移动端也保留（圆点热区靠 ::after 扩到 40px 以上） */
.pd-recent__dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 14px; }
.pd-recent__dots[hidden] { display: none; }
.pd-recent__dot {
position: relative; width: 8px; height: 8px; padding: 0; border: 0;
border-radius: 3px; background: var(--line-strong); cursor: pointer;
transition: width .2s var(--ease), background .2s var(--ease);
}
.pd-recent__dot::after { content: ""; position: absolute; inset: -9px -5px; }
.pd-recent__dot.is-on { width: 20px; background: var(--brand-primary); }
.pd-recent .hsnav--prev { left: -14px; }
.pd-recent .hsnav--next { right: -14px; }
.pd-recent .hsnav.is-off { opacity: .35; cursor: default; }
/* .hsnav 自带 display:flex 会盖掉 [hidden] 的 UA 样式，条数不足一屏时必须显式关掉 */
.pd-recent .hsnav[hidden] { display: none; }
@media (max-width: 767px) {
.pd-recent .hsnav--prev { left: -6px; }
.pd-recent .hsnav--next { right: -6px; }
}
/* ---------- ③ 通栏横幅：圆点可点 + 丝滑 ----------
圆点是