/*
 * 华健生物 · 第 2.6 层：全站设计语言统一
 *
 * 为什么需要这一层：
 *   底座来自珠宝站，各模板的内联 <style> 里散落着珠宝时期的写法 ——
 *   衬线标题、金色图标、偏大的区块留白、圆角不统一。
 *   逐页重写成本高且容易漏，这里用一层"后加载"的通用规则把语言拉齐，
 *   模板只在自己那一页需要特殊版式时才写样式。
 *
 * 加载顺序：base → components → layout → motion → theme-unify
 * 靠"后写者胜"生效，不使用 !important。
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. 标题：统一为几何无衬线 + 统一字重
 *
 * 珠宝站用 Libre Caslon（衬线）做标题，那是首饰的调性；
 * 口腔护理 B2B 要的是"工程感"，衬线的柔软感反而削弱专业形象。
 *
 * 选择器里重复两次 .sdf-serif 是必要的：
 *   各模板内联样式写了 `.sdf-about-hero__title { font-weight: 400 }`，
 *   而模板 <style> 在 body 末尾、加载晚于本文件 —— 同特异性下后者胜。
 *   重复类名把特异性提到 (0,3,0)，才能在"后写者胜"的规则下反超。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main .sdf-serif.sdf-serif,
.sdf-main .sdf-page-title.sdf-page-title,
.sdf-main .sdf-section-title.sdf-section-title {
	font-family: var(--sdf-font-heading);
	font-weight: 600;
	letter-spacing: -.018em;
}

/* 标题字号与字重的兜底：
 * 各模板给自己的 h1 写了 34px / 40px / 44px / 500 / 400 等不同值，
 * 靠类选择器逐个覆盖会漏。这里用「所有 h1/h2 统一压到规范值」的方式兜住：
 *   - 有 .sdf-serif / .sdf-page-title 的走上面那条（特异性更高）
 *   - 没有的（如产品页 .sdf-buy__title）由这条兜底
 * 末尾的 h1 规则特异性最低，只在没有任何类命中时才生效。 */
.sdf-main h1 {
	font-family: var(--sdf-font-heading);
	font-weight: 600;
	letter-spacing: -.022em;
}

.sdf-main h2 {
	font-family: var(--sdf-font-heading);
	font-weight: 600;
	letter-spacing: -.018em;
}

/* 标题字号下限：列表页 / 详情页的 h1 曾被写成 28px，
 * 在 1240px 容器里显得像小标题，与 B2B 的层级不符。 */
.sdf-main h1.sdf-serif {
	font-size: clamp(30px, 3.2vw, 44px);
	line-height: 1.2;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. 图标：金色 2.5D 写实图标 → 单色线框
 *
 * 底座 ui-icons 里有 20 多枚手绘金色图标（#D4AF37 金 + #3B2A10 深棕描边）。
 * 金色是珠宝品类的视觉符号，放在口腔护理站上会直接把观感拉回"首饰盒"。
 *
 * 修法：把图标内部的 fill / stroke 统一改成 currentColor，让容器 color 决定颜色。
 * 这样同一枚图标可以在深蓝块上变白、在浅底上变深蓝、在强调区变青绿。
 * presentation attribute（fill="..."）优先级低于 CSS，所以这条能生效。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main .sdf-uico [fill]:not([fill="none"]) {
	fill: currentColor;
}

.sdf-main .sdf-uico [stroke]:not([stroke="none"]) {
	stroke: currentColor;
}

/* 单色化后原本靠"亮面/暗面"区分的前后关系会消失，
 * 用透明度还原一点层次：浅色面（原 #EFDCA8 / #FBF6EC）降低不透明度。 */
.sdf-main .sdf-uico [fill="#EFDCA8"],
.sdf-main .sdf-uico [fill="#FBF6EC"] {
	opacity: .38;
}

.sdf-main .sdf-uico [fill="#AE8A29"],
.sdf-main .sdf-uico [stroke="#7B6020"],
.sdf-main .sdf-uico [stroke="#8A6A3B"] {
	opacity: .72;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. 区块留白与节奏
 *
 * 珠宝站的 .sdf-section 留白偏大（适合"看单品"），
 * B2B 页面的信息密度更高，留白收到 6vw 上限 88px 更紧凑。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main .sdf-section {
	padding-top: clamp(48px, 6vw, 88px);
	padding-bottom: clamp(48px, 6vw, 88px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. 卡片统一
 *
 * 各页面卡片圆角有 4/10/16 三种写法，边框色也有两套。
 * 这里统一到 radius-md + border，阴影只在 hover 出现。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main article,
.sdf-main .sdf-card {
	border-radius: var(--sdf-radius-md);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. 眉标（eyebrow）统一
 *
 * 各页面已有 .sdf-head2__eyebrow 的写法，但珠宝时期用的是金色，
 * 这里把「区块标题上方的小标签」统一到青绿。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main .sdf-section-title + .sdf-rule,
.sdf-main .sdf-rule {
	background: var(--sdf-color-signal, #0e7c66);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. 链接与强调
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main a:not(.sdf-btn):not([class*="__btn"]):not([class*="__link"]):hover {
	color: var(--sdf-color-signal, #0e7c66);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. 表格统一（参数表 / 对照表 / 规格表在各页面都有）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main table {
	border-color: var(--sdf-color-border);
}

.sdf-main th {
	color: var(--sdf-color-heading);
	font-family: var(--sdf-font-heading);
	letter-spacing: -.005em;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. 页脚：与新的深蓝主色对齐
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-footer a:hover {
	color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. 响应式补充
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	/* 移动端标题字距放宽回 0：负字距在小字号 + 中文混排时会让字粘在一起 */
	.sdf-main h1,
	.sdf-main h2,
	.sdf-main h3,
	.sdf-main h4 {
		letter-spacing: 0;
	}
}