/*
 * B2B 站底包 · 第 2 层：通用组件
 *
 * 这一层只放「跨页面复用 + 功能层已经硬依赖」的组件。
 * 之所以必须存在：inc/sdfrchem/ 里的渲染函数（mega menu、面包屑、产品卡、
 * 弹窗、支付图标）已经输出了固定的 BEM 类名，没有这层样式它们会裸奔。
 *
 * 新项目仿站时：
 *   - 这些组件**可以整体替换**，但类名不要改（改了就断了 PHP 渲染函数）
 *   - 想换视觉就改这里的属性值，或在自己的样式里覆盖
 *   - 页面专属版式一律写在模板底部 <style>，不要往这里塞
 *
 * 命名：BEM，块名带 sdf- 前缀。
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 1. 布局
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-container {
	width: 100%;
	max-width: var(--sdf-container);
	margin-inline: auto;
	padding-inline: var(--sdf-space-md);
}

.sdf-container--mid {
	max-width: var(--sdf-container-mid);
}

.sdf-container--narrow {
	max-width: var(--sdf-container-narrow);
}

.sdf-container--wide {
	max-width: 1520px;
}

.sdf-section {
	padding-block: var(--sdf-section-y);
}

.sdf-section--tight {
	padding-block: calc(var(--sdf-section-y) * .6);
}

.sdf-section--soft {
	background: var(--sdf-color-bg-soft);
}

/* 栅格：加 --cols-* 修饰符控制列数，窄屏一律降为 1~2 列 */
.sdf-grid {
	display: grid;
	gap: var(--sdf-space-lg);
	grid-template-columns: 1fr;
}

@media (min-width: 600px) {
	.sdf-grid--2,
	.sdf-grid--3,
	.sdf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.sdf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sdf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.sdf-stack > * + * {
	margin-top: var(--sdf-space-md);
}

.sdf-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sdf-space-sm);
	align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. 区块标题
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-heading {
	margin: 0 0 var(--sdf-space-lg);
}

.sdf-heading__kicker {
	display: block;
	margin: 0 0 var(--sdf-space-2xs);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	font-weight: 600;
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
}

.sdf-heading__title {
	margin: 0;
	font-size: var(--sdf-fs-xl);
}

.sdf-heading__sub {
	margin: var(--sdf-space-xs) 0 0;
	max-width: 62ch;
	color: var(--sdf-color-text-muted);
}

.sdf-heading--center {
	text-align: center;
}

.sdf-heading--center .sdf-heading__sub {
	margin-inline: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. 按钮
 * ═══════════════════════════════════════════════════════════════════════ */

/* 按钮：对标站为方角 + 常规字重 + 大写，统一 52px 高 */
.sdf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sdf-space-xs);
	min-height: 52px;
	padding: 0 28px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--sdf-btn-bg);
	color: var(--sdf-btn-text);
	font-size: var(--sdf-fs-sm);
	font-weight: 400;
	letter-spacing: var(--sdf-ls-wide);
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: background var(--sdf-t-base) var(--sdf-ease),
		color var(--sdf-t-base) var(--sdf-ease),
		border-color var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-btn:hover {
	background: var(--sdf-btn-hover-bg);
	color: var(--sdf-btn-hover-text);
}

.sdf-btn:active {
	transform: translateY(1px);
}

.sdf-btn--outline {
	background: transparent;
	border-color: var(--sdf-color-border);
	color: var(--sdf-color-heading);
}

.sdf-btn--outline:hover {
	background: var(--sdf-color-heading);
	border-color: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
}

/* 深色实底：用于浅色背景上的主行动按钮 */
.sdf-btn--dark {
	background: var(--sdf-color-heading);
	border-color: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
}

.sdf-btn--dark:hover {
	background: var(--sdf-color-accent);
	border-color: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
}

/* 浅色实底：用于深色背景（如 CTA 区）上的按钮 */
.sdf-btn--light {
	background: var(--sdf-color-bg);
	border-color: var(--sdf-color-bg);
	color: var(--sdf-color-heading);
}

.sdf-btn--light:hover {
	background: var(--sdf-color-accent);
	border-color: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
}

.sdf-btn--ghost {
	background: transparent;
	color: var(--sdf-color-heading);
	padding-inline: var(--sdf-space-xs);
}

.sdf-btn--ghost:hover {
	background: transparent;
	color: var(--sdf-color-accent);
}

.sdf-btn--block {
	width: 100%;
}

.sdf-btn--sm {
	min-height: 42px;
	padding: 0 18px;
	font-size: var(--sdf-fs-xs);
}

.sdf-btn--lg {
	min-height: 60px;
	padding: 0 36px;
	font-size: var(--sdf-fs-base);
}

/* 图标按钮：内容一律用内联 SVG，不要用文字字形（见 base.css 的说明） */
.sdf-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	color: var(--sdf-color-heading);
	line-height: 0;
	transition: background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-icon-btn:hover {
	background: var(--sdf-color-bg-soft);
}

.sdf-icon-btn svg {
	display: block;
	flex: 0 0 auto;
}

/* 链接下划线动效 */
.sdf-link-underline {
	position: relative;
}

.sdf-link-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-link-underline:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. 表单
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-field {
	display: block;
	margin: 0 0 var(--sdf-space-md);
}

.sdf-field__label {
	display: block;
	margin: 0 0 var(--sdf-space-2xs);
	font-size: var(--sdf-fs-sm);
	font-weight: 600;
	color: var(--sdf-color-heading);
}

.sdf-input,
.sdf-select,
.sdf-textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sdf-color-border);
	border-radius: var(--sdf-radius-sm);
	background: var(--sdf-color-bg);
	color: var(--sdf-color-text);
	font-size: var(--sdf-fs-base);
	transition: border-color var(--sdf-t-hover) var(--sdf-ease),
		box-shadow var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-input:focus,
.sdf-select:focus,
.sdf-textarea:focus {
	outline: none;
	border-color: var(--sdf-color-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--sdf-color-accent) 16%, transparent);
}

.sdf-input::placeholder,
.sdf-textarea::placeholder {
	color: var(--sdf-color-text-muted);
	opacity: .75;
}

.sdf-textarea {
	min-height: 130px;
	resize: vertical;
}

.sdf-field__hint {
	margin: var(--sdf-space-2xs) 0 0;
	font-size: var(--sdf-fs-xs);
	color: var(--sdf-color-text-muted);
}

.sdf-field__error {
	margin: var(--sdf-space-2xs) 0 0;
	font-size: var(--sdf-fs-xs);
	color: var(--sdf-color-error);
}

.sdf-check {
	display: flex;
	align-items: flex-start;
	gap: var(--sdf-space-xs);
	font-size: var(--sdf-fs-sm);
	cursor: pointer;
}

.sdf-check input {
	flex: 0 0 auto;
	margin-top: 3px;
}

/* 联系表单 / 询盘表单共用的字段样式（.sdf-form__*） */
.sdf-form__row {
	margin: 0 0 var(--sdf-space-md);
}

.sdf-form__label {
	display: block;
	margin-bottom: 6px;
	color: var(--sdf-color-text);
	font-size: var(--sdf-fs-sm);
	letter-spacing: .02em;
}

.sdf-form__input {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	border: 1px solid var(--sdf-color-border);
	border-radius: 0;
	background: var(--sdf-color-bg);
	color: var(--sdf-color-text);
	font-family: inherit;
	font-size: var(--sdf-fs-sm);
	letter-spacing: .02em;
	transition: border-color var(--sdf-t-base) var(--sdf-ease),
		box-shadow var(--sdf-t-base) var(--sdf-ease);
}

.sdf-form__textarea {
	height: auto;
	min-height: 160px;
	padding: 14px 16px;
	line-height: var(--sdf-lh-base);
	resize: vertical;
}

.sdf-form__input:focus {
	border-color: var(--sdf-color-accent);
	box-shadow: 0 0 0 3px rgba(201, 162, 54, .16);
	outline: none;
}

.sdf-form__input::placeholder {
	color: var(--sdf-color-text-muted);
	opacity: .7;
}

/* 提交结果提示条 */
.sdf-form__msg {
	margin: 0 0 var(--sdf-space-lg);
	padding: var(--sdf-space-md) var(--sdf-space-lg);
	border-left: 3px solid var(--sdf-color-accent);
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-text);
	font-size: var(--sdf-fs-sm);
}

.sdf-form__msg--ok {
	border-left-color: var(--sdf-color-success);
}

.sdf-form__msg--err {
	border-left-color: var(--sdf-color-error);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. 卡片 / 徽章
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-card {
	padding: var(--sdf-space-lg);
	border: 1px solid var(--sdf-color-border-soft);
	border-radius: var(--sdf-radius-md);
	background: var(--sdf-color-bg);
	transition: box-shadow var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-card--hover:hover {
	box-shadow: var(--sdf-shadow-md);
	transform: translateY(-2px);
}

.sdf-card__title {
	margin: 0 0 var(--sdf-space-xs);
	font-size: var(--sdf-fs-md);
}

.sdf-card__text {
	margin: 0;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
}

.sdf-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--sdf-radius-pill);
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	font-weight: 600;
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

.sdf-badge--accent {
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. 面包屑
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sdf-space-xs);
	padding-block: var(--sdf-space-sm);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
	/* 首项「HOME」是硬编码大写，而后续项来自页面标题（混合大小写）。
	 * 统一转大写，避免出现「HOME / About Us」这种大小写混排。 */
	text-transform: uppercase;
}

.sdf-breadcrumb a {
	color: inherit;
}

.sdf-breadcrumb a:hover {
	color: var(--sdf-color-accent);
}

.sdf-breadcrumb__sep {
	opacity: .5;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. 产品卡（由 sdfrchem_product_card() 渲染，类名不可改）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-product-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* 整卡可点用的是「拉伸链接」（空 <a> 用绝对定位铺满卡片），
 * 不是把卡片内容包进 <a>。原因：卡片内容里可能自带 <a>
 * （B 端未审批时价格会输出「Sign in / Apply for an account」链接），
 * 而 HTML 不允许 <a> 嵌套 <a> —— 浏览器会提前闭合外层 <a>，
 * 把标题 / 价格 / 按钮挤出卡片盒子，表现为内容溢出到下一个模块。
 * 拉伸链接没有嵌套问题，两个链接还各自可点。 */
.sdf-product-card__link {
	position: absolute;
	inset: 0;
	z-index: 1;
	color: inherit;
}

/* 卡片内自带的链接要抬到拉伸层之上，否则被它盖住点不到。 */
.sdf-product-card__price a {
	position: relative;
	z-index: 2;
}

.sdf-product-card__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--sdf-radius-sm);
	background: var(--sdf-color-bg-soft);
	aspect-ratio: 1 / 1;
}

.sdf-product-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sdf-t-page) var(--sdf-ease);
}

/* 悬停效果挂在卡片上而不是拉伸链接上：
 * 价格里那个内层链接抬到了拉伸层之上，光标落在它上面时拉伸链接并不处于
 * :hover 状态，挂链接上会导致「移到价格上图片就不缩放了」。 */
.sdf-product-card:hover .sdf-product-card__img {
	transform: scale(1.04);
}

.sdf-product-card__badge {
	position: absolute;
	top: var(--sdf-space-sm);
	left: var(--sdf-space-sm);
	padding: 4px 10px;
	border-radius: var(--sdf-radius-pill);
	background: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

.sdf-product-card__badge--sale {
	background: var(--sdf-color-error);
	color: #fff;
}

.sdf-product-card__badge--new {
	background: var(--sdf-color-success);
	color: #fff;
}

.sdf-product-card__content {
	padding-top: var(--sdf-space-sm);
}

.sdf-product-card__title {
	margin: 0 0 var(--sdf-space-2xs);
	font-size: var(--sdf-fs-base);
	font-weight: 500;
	line-height: var(--sdf-lh-snug);
}

/* 星级（由 sdfrchem_stars_html() 输出，纯 CSS 画星，不依赖图标字体） */
.sdf-product-card__stars {
	display: flex;
	gap: 2px;
	margin: 0 0 6px;
}

.sdf-star {
	position: relative;
	display: block;
	width: 12px;
	height: 12px;
	background: var(--sdf-color-border);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.sdf-star--on {
	background: var(--sdf-color-accent);
}

.sdf-star--half {
	background: linear-gradient(90deg, var(--sdf-color-accent) 50%, var(--sdf-color-border) 50%);
}

/* 「Add to cart →」文字链接（文字来自后台，留空则不输出） */
.sdf-product-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	color: var(--sdf-color-heading);
	font-size: 12px;
	letter-spacing: var(--sdf-ls-wide);
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-product-card__cta svg {
	display: block;
	transition: transform var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-product-card:hover .sdf-product-card__cta {
	color: var(--sdf-color-accent);
}

.sdf-product-card:hover .sdf-product-card__cta svg {
	transform: translateX(3px);
}

.sdf-product-card__price {
	margin: 0;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
}

.sdf-product-card__price del {
	opacity: .55;
	margin-right: var(--sdf-space-2xs);
}

.sdf-product-card__price ins {
	color: var(--sdf-color-error);
	text-decoration: none;
	font-weight: 600;
}

/* B 端：卡片价格下方的「起订价 / MOQ」标签（由 sdfrchem_b2b_loop_price_suffix 追加） */
.sdf-b2b-badge {
	display: block;
	margin-top: 4px;
	color: var(--sdf-color-accent);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
}

/* 正文内嵌商品（博客 [sdf_product] 短代码）。
 *
 * 商品卡本来是给栅格用的（撑满列宽），直接塞进 720px 正文列会变成一张巨卡。
 * 这里限宽 + 居中，让它读起来像一处「插入的图注」而不是一块版面。
 * 上下留白比段落间距略大，与正文明确分开。 */
.sdf-inline-product {
	max-width: 260px;
	margin: var(--sdf-space-2xl) auto;
	padding-top: var(--sdf-space-lg);
	border-top: 1px solid var(--sdf-color-border-soft);
}

.sdf-inline-product__label {
	margin: 0 0 var(--sdf-space-md);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
}

/* 卡片内的标题在窄容器里会长于两行，统一交给卡片自己的省略逻辑处理；
   这里只把与上方小标题的间距取消（小标题已经给了 margin-bottom）。 */
.sdf-inline-product__card .sdf-product-card {
	margin: 0;
}

/* 未审批用户 / 游客看到的「价格已隐藏」占位 */
.sdf-price-locked {
	display: inline-block;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	line-height: 1.5;
}

.sdf-price-locked a {
	color: var(--sdf-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: opacity 0.2s ease;
}

.sdf-price-locked a:hover {
	opacity: 0.75;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. 归档页头 + 文章卡 + 评论区
 *    （index.php / archive.php / search.php / single.php 共用）
 *
 * 放 components.css 而不是某个模板底部：模板底部的 <style> 只在
 * 当前模板渲染时输出，写在 archive.php 里的话，搜索页拿不到这些规则。
 * 评论区同理 —— comments.php 是被 include 到 body 中间的片段，
 * 在那里输出 <style> 会把样式表插到 DOM 中段。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-archive__head {
	margin-bottom: var(--sdf-space-xl);
	padding-bottom: var(--sdf-space-md);
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

.sdf-archive__eyebrow {
	margin: 0 0 var(--sdf-space-2xs);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
}

.sdf-archive__title {
	margin: 0;
	color: var(--sdf-color-heading);
	font-family: var(--sdf-font-heading);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-archive__desc {
	max-width: 78ch;
	margin-top: var(--sdf-space-sm);
	color: var(--sdf-color-text);
	font-size: var(--sdf-fs-base);
	line-height: var(--sdf-lh-loose);
}

.sdf-archive__count {
	margin: var(--sdf-space-xs) 0 0;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	letter-spacing: var(--sdf-ls-wide);
}

.sdf-archive__grid {
	margin-bottom: var(--sdf-space-2xl);
}

.sdf-post-card {
	border: 1px solid var(--sdf-color-border-soft);
	background: var(--sdf-color-bg);
	transition: border-color var(--sdf-t-base) var(--sdf-ease);
}

.sdf-post-card:hover {
	border-color: var(--sdf-color-accent);
}

/* 分类标签只能放在卡片最上沿、作为 .sdf-post-card__link 的兄弟节点：
   <a> 内不允许再嵌套 <a>（HTML 规范禁止交互内容互相嵌套），
   塞进链接里会让分类链接失效或被打平成一整块点击区。 */
.sdf-post-card__cat {
	display: inline-block;
	margin: var(--sdf-space-md) var(--sdf-space-md) 0;
	color: var(--sdf-color-accent);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
	transition: opacity var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-post-card__cat:hover {
	opacity: .75;
}

.sdf-post-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
}

.sdf-post-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--sdf-color-bg-soft);
}

.sdf-post-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--sdf-t-page) var(--sdf-ease);
}

.sdf-post-card:hover .sdf-post-card__img {
	transform: scale(1.04);
}

.sdf-post-card__title {
	margin: var(--sdf-space-md) var(--sdf-space-md) 0;
	color: var(--sdf-color-heading);
	font-size: var(--sdf-fs-base);
	font-weight: 500;
	line-height: var(--sdf-lh-snug);
	letter-spacing: .02em;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-post-card:hover .sdf-post-card__title {
	color: var(--sdf-color-accent);
}

/* 摘要截到 3 行：卡片等高时长短不一的摘要把整行网格拉得高低不齐，
   这里用行数上限而不是字数上限，视觉上更可控。 */
.sdf-post-card__excerpt {
	display: -webkit-box;
	margin: var(--sdf-space-xs) var(--sdf-space-md) 0;
	overflow: hidden;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	line-height: var(--sdf-lh-loose);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.sdf-post-card__meta {
	/* 上边距 auto 把元信息压到卡片底部：同一行的卡片日期才会对齐成一条线 */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sdf-space-xs);
	margin: auto var(--sdf-space-md) var(--sdf-space-md);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

/* 日期与阅读时间之间的分隔点用伪元素画，避免在 HTML 里塞装饰性标签 */
.sdf-post-card__time::before {
	margin-right: var(--sdf-space-xs);
	content: "\00b7";
}

/* ── 博客主题导航（分类筛选条）────────────────────────────────────────
 * 放 components.css：博客列表页（home.php）与分类归档页（archive.php）都要用。
 *
 * 为什么值得单独做一条常驻导航：B 端读者是带着具体问题来的
 * （「这颗石头和那种差在哪」「供应商怎么验」），第一眼能不能看到
 * 「这里正好有我关心的话题」决定了他是往下翻还是直接离开。
 * 纯 CSS 横向滚动，不依赖 JS，窄屏也不换行、不挤压卡片。
 * ─────────────────────────────────────────────────────────────────── */

.sdf-topics {
	padding-block: var(--sdf-space-lg);
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

.sdf-topics__label {
	margin: 0 0 var(--sdf-space-sm);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
}

.sdf-topics__list {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--sdf-space-xs);
	margin: 0;
	padding: 0 0 var(--sdf-space-2xs);
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* 窄屏可横滑，但滚动条本身不显示（保留键盘与触摸滚动能力） */
	scrollbar-width: none;
}

.sdf-topics__list::-webkit-scrollbar {
	display: none;
}

.sdf-topics__item {
	flex: 0 0 auto;
}

.sdf-topics__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sdf-space-2xs);
	padding: 8px 16px;
	border: 1px solid var(--sdf-color-border);
	border-radius: 999px;
	color: var(--sdf-color-text-soft);
	font-size: var(--sdf-fs-sm);
	white-space: nowrap;
	transition: border-color var(--sdf-t-hover) var(--sdf-ease),
		background var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-topics__link:hover {
	border-color: var(--sdf-color-heading);
	color: var(--sdf-color-heading);
}

.sdf-topics__link.is-active {
	background: var(--sdf-color-heading);
	border-color: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
}

/* 文章数字：小一号、低对比，不抢分类名的注意力 */
.sdf-topics__count {
	opacity: .55;
	font-size: 11px;
}

/* ── 评论区（结构见 comments.php） ───────────────────────────────────── */

.sdf-comments {
	margin-top: var(--sdf-space-2xl);
	padding-top: var(--sdf-space-xl);
	border-top: 1px solid var(--sdf-color-border-soft);
	/* 与正文同一阅读宽度：不限宽时评论会长到 900px 一行，很难读 */
	max-width: 78ch;
}

.sdf-comments__title,
.sdf-comments .comment-reply-title {
	margin: 0 0 var(--sdf-space-lg);
	color: var(--sdf-color-heading);
	font-family: var(--sdf-font-heading);
	font-size: clamp(20px, 2.2vw, 26px);
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-comments .comment-reply-title {
	margin-top: var(--sdf-space-xl);
}

/* 评论列表：清掉浏览器默认的项目符号与缩进 */
.sdf-comments__list,
.sdf-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdf-comment__inner {
	display: flex;
	gap: var(--sdf-space-md);
	padding: var(--sdf-space-lg) 0;
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

/* 嵌套回复向右缩进一格，并用左侧竖线标示层级 */
.sdf-comments__list .children {
	margin-left: var(--sdf-space-2xl);
}

.sdf-comments__list .children .sdf-comment__inner {
	border-bottom: 0;
	padding-bottom: 0;
}

.sdf-comment__avatar {
	flex: 0 0 auto;
}

.sdf-comment__img {
	display: block;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sdf-color-bg-soft);
}

.sdf-comment__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sdf-comment__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sdf-space-2xs) var(--sdf-space-sm);
	margin-bottom: var(--sdf-space-xs);
}

.sdf-comment__author {
	color: var(--sdf-color-heading);
	font-size: var(--sdf-fs-base);
	font-weight: 500;
}

.sdf-comment__date {
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

.sdf-comment__pending {
	padding: 2px 8px;
	border-radius: var(--sdf-radius-pill);
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
}

.sdf-comment__content {
	font-size: var(--sdf-fs-base);
	line-height: var(--sdf-lh-loose);
}

/* 评论正文里的默认段落间距（.sdf-rte 只给相邻子元素加间距） */
.sdf-comment__content p {
	margin: 0 0 var(--sdf-space-sm);
}

.sdf-comment__content p:last-child {
	margin-bottom: 0;
}

.sdf-comment__actions {
	margin-top: var(--sdf-space-xs);
}

.sdf-comment__actions .comment-reply-link {
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-comment__actions .comment-reply-link:hover {
	color: var(--sdf-color-accent);
}

.sdf-comments__closed,
.sdf-comments__notes {
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
}

.sdf-comments__notes {
	margin-bottom: var(--sdf-space-md);
}

/* 评论表单：comment_form() 输出的是 WordPress 原生结构，
 * 这里统一成与全站表单一致的描边输入框。 */
.sdf-comments .comment-form {
	display: grid;
	gap: var(--sdf-space-md);
}

.sdf-comments .comment-form p {
	margin: 0;
}

.sdf-comments .comment-form label {
	display: block;
	margin-bottom: var(--sdf-space-2xs);
	color: var(--sdf-color-heading);
	font-size: var(--sdf-fs-sm);
}

.sdf-comments .comment-form .required {
	color: var(--sdf-color-accent);
}

/* Cookie 同意项：WordPress 输出的是「复选框 + 长文案 label」，
 * 而上面给 label 设了 display:block，会把勾选框和文字拆成两行。 */
.sdf-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: var(--sdf-space-2xs);
}

.sdf-comments .comment-form-cookies-consent label {
	margin-bottom: 0;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	line-height: 1.6;
}

.sdf-comments .comment-form-cookies-consent input[type="checkbox"] {
	flex: 0 0 auto;
	margin: 4px 0 0;
	accent-color: var(--sdf-color-accent);
}

.sdf-comments .comment-form input[type="text"],
.sdf-comments .comment-form input[type="email"],
.sdf-comments .comment-form input[type="url"],
.sdf-comments .comment-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--sdf-color-border);
	border-radius: var(--sdf-radius-sm);
	background: var(--sdf-color-bg);
	color: var(--sdf-color-text);
	font-family: inherit;
	font-size: var(--sdf-fs-base);
	transition: border-color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-comments .comment-form input:focus,
.sdf-comments .comment-form textarea:focus {
	border-color: var(--sdf-color-accent);
	outline: none;
}

.sdf-comments .comment-form textarea {
	min-height: 140px;
	resize: vertical;
}

/* 姓名 / 邮箱在宽屏并排一行，网址与正文通栏。
 * 评论区整体限宽 78ch（约 620px），排三列会挤到 200px 以下，两列更稳。 */
@media (min-width: 768px) {
	.sdf-comments .comment-form {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sdf-comments .comment-form-comment,
	.sdf-comments .comment-form-url,
	.sdf-comments .form-submit,
	.sdf-comments .comment-notes {
		grid-column: 1 / -1;
	}

	.sdf-comments .comment-form-author { grid-column: 1 / 2; }
	.sdf-comments .comment-form-email  { grid-column: 2 / 3; }
}

.sdf-comments .form-submit {
	margin: 0;
}

.sdf-comments .form-submit input[type="submit"],
.sdf-comments .form-submit .submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 160px;
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: var(--sdf-radius-sm);
	background: var(--sdf-color-accent);
	color: var(--sdf-color-bg);
	font-family: inherit;
	font-size: var(--sdf-fs-sm);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-comments .form-submit input[type="submit"]:hover,
.sdf-comments .form-submit .submit:hover {
	opacity: .85;
}

/* 评论表单里的回复提示（点「Reply」后标题右上角出现的取消链接） */
.sdf-comments .comment-reply-title small {
	margin-left: var(--sdf-space-sm);
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: none;
}

.sdf-comments .comment-reply-title small a {
	color: var(--sdf-color-text-muted);
}

.sdf-comments .comment-reply-title small a:hover {
	color: var(--sdf-color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. 分页
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sdf-space-2xs);
	margin-top: var(--sdf-space-2xl);
}

.sdf-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--sdf-color-border);
	border-radius: var(--sdf-radius-sm);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	transition: background var(--sdf-t-hover) var(--sdf-ease),
		border-color var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-pagination .page-numbers:hover,
.sdf-pagination .page-numbers.current {
	background: var(--sdf-color-heading);
	border-color: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. 图标占位（mega menu / 列表项左侧）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	line-height: 0;
	color: var(--sdf-color-text-muted);
}

.sdf-ico svg,
.sdf-ico img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sdf-ico--blank {
	opacity: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 11. 全宽分组菜单（mega menu）
 *
 * 结构与类名由 sdfrchem_render_mega_menu() 决定。
 * 交互（hover / 点击展开）在 assets/js/sdfrchem-main.js。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: var(--sdf-z-header);
	background: var(--sdf-color-bg);
	border-top: 1px solid var(--sdf-color-border-soft);
	box-shadow: var(--sdf-shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		visibility var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sdf-mega__inner {
	padding-block: var(--sdf-space-xl);
}

.sdf-mega__cols {
	display: grid;
	gap: var(--sdf-space-xl);
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	.sdf-mega__cols {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

.sdf-mega__title {
	margin: 0 0 var(--sdf-space-sm);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
}

.sdf-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdf-mega__link {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-xs);
	padding: 7px 0;
	color: var(--sdf-color-text);
	font-size: var(--sdf-fs-sm);
}

.sdf-mega__link:hover {
	color: var(--sdf-color-accent);
}

/* ── 分面词表（PRODUCTS 下拉每列底部的紧凑标签行） ──────────────────
 * 为什么不用竖排链接：一条产品线的分面词有 20 多个（SS4~SS40、8 种颜色、
 * 5 种用途），5 列全竖排会让面板高过一屏。这里按「组名 + 词条顺排」压缩，
 * 每组占 1~3 行，整体高度可控。
 * 词条本身仍然可点（统一指向该产品线的分类页），与首页侧栏面板行为一致。 */
.sdf-mega__facets {
	margin-top: var(--sdf-space-sm);
	padding-top: var(--sdf-space-xs);
	border-top: 1px solid var(--sdf-color-border-soft);
}

.sdf-mega__facet {
	margin: 0 0 6px;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	line-height: 1.7;
}

.sdf-mega__facet:last-child {
	margin-bottom: 0;
}

.sdf-mega__facet-label {
	display: block;
	color: var(--sdf-color-text-muted);
	font-weight: 700;
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
	opacity: .75;
}

.sdf-mega__facet-items {
	display: block;
}

.sdf-mega__facet-link {
	/* inline-block：让每个词条成为一个不可拆的原子盒，
	   配合 PHP 侧输出的真实空格，换行只发生在词条之间，
	   不会把「Crystal AB」拦腰截断。 */
	display: inline-block;
	color: var(--sdf-color-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .2s, border-color .2s;
}

.sdf-mega__facet-link:hover,
.sdf-mega__facet-link:focus-visible {
	color: var(--sdf-color-accent);
	border-bottom-color: currentColor;
}

.sdf-mega__facet-sep {
	display: inline-block;
	color: var(--sdf-color-border);
}

.sdf-mega__feature {
	margin-top: var(--sdf-space-md);
	padding-top: var(--sdf-space-md);
	border-top: 1px solid var(--sdf-color-border-soft);
}

.sdf-mega__feature-title {
	margin: 0 0 var(--sdf-space-2xs);
	font-size: var(--sdf-fs-sm);
	font-weight: 600;
}

.sdf-mega__feature-link {
	font-size: var(--sdf-fs-xs);
	color: var(--sdf-color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 12. 移动端抽屉
 *
 * 结构在 header.php，开关在 sdfrchem-main.js。
 * 关闭按钮的图标必须是 SVG —— 文字字形在圆钮里会偏。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-overlay {
	position: fixed;
	inset: 0;
	z-index: var(--sdf-z-overlay);
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		visibility var(--sdf-t-base) var(--sdf-ease);
}

.sdf-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.sdf-mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	z-index: var(--sdf-z-drawer);
	display: flex;
	flex-direction: column;
	width: min(360px, 86vw);
	background: var(--sdf-color-bg);
	transform: translateX(-100%);
	transition: transform var(--sdf-t-base) var(--sdf-ease);
	overflow-y: auto;
}

.sdf-mobile-nav.is-open {
	transform: translateX(0);
}

.sdf-mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdf-space-md);
	padding: var(--sdf-space-md);
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

/* 触控目标 44×44（移动端抽屉的关闭按钮必须够大） */
.sdf-mobile-nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-heading);
	line-height: 0;
	cursor: pointer;
	transition: background var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease),
		transform var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-mobile-nav__close svg {
	display: block;
}

.sdf-mobile-nav__close:hover {
	background: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
	transform: rotate(90deg);
}

.sdf-mobile-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdf-mobile-nav__item {
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

.sdf-mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdf-space-sm);
	padding: var(--sdf-space-md);
	font-weight: 600;
	color: var(--sdf-color-heading);
}

/* 展开箭头：同样用 SVG，靠 is-open 旋转 45° 变成叉号。
 * 视觉 28px 圆形，但用伪元素把点击热区撑到 44×44（移动端触控标准）；
 * 伪元素属于按钮自身，点击它等同于点击按钮。 */
.sdf-mobile-nav__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 1px solid var(--sdf-color-border);
	border-radius: 50%;
	background: transparent;
	color: var(--sdf-color-text-muted);
	line-height: 0;
	cursor: pointer;
	transition: transform var(--sdf-t-base) var(--sdf-ease),
		border-color var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-mobile-nav__toggle::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	transform: translate(-50%, -50%);
}

.sdf-mobile-nav__toggle svg {
	display: block;
}

.sdf-mobile-nav__toggle:hover {
	border-color: var(--sdf-color-accent);
	color: var(--sdf-color-accent);
}

.sdf-mobile-nav__item.is-open .sdf-mobile-nav__toggle {
	transform: rotate(45deg);
	border-color: var(--sdf-color-accent);
	color: var(--sdf-color-accent);
}

.sdf-mobile-nav__panel {
	display: none;
	padding: 0 var(--sdf-space-md) var(--sdf-space-md);
}

.sdf-mobile-nav__item.is-open .sdf-mobile-nav__panel {
	display: block;
}

.sdf-mobile-nav__group-title {
	margin: var(--sdf-space-sm) 0 var(--sdf-space-2xs);
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-xs);
	font-weight: 700;
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
}

.sdf-mobile-nav__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdf-mobile-nav__sub-link {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-xs);
	padding: 7px 0;
	color: var(--sdf-color-text-soft);
	font-size: var(--sdf-fs-sm);
}

/* 移动端分面词表：与桌面下拉同一份数据（PRODUCTS 列），
   抽屉里排成紧凑标签行，避免一条产品线展开就占满整屏。 */
.sdf-mobile-nav__facets {
	margin: var(--sdf-space-xs) 0 var(--sdf-space-sm);
	padding-left: var(--sdf-space-sm);
	border-left: 2px solid var(--sdf-color-border-soft);
}

.sdf-mobile-nav__facet {
	margin: 0 0 6px;
	font-size: var(--sdf-fs-xs);
	line-height: 1.7;
}

.sdf-mobile-nav__facet:last-child {
	margin-bottom: 0;
}

.sdf-mobile-nav__facet-label {
	display: block;
	color: var(--sdf-color-text-muted);
	font-weight: 700;
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
	opacity: .75;
}

.sdf-mobile-nav__facet-items a {
	color: var(--sdf-color-text-soft);
	text-decoration: none;
}

.sdf-mobile-nav__facet-items a:hover {
	color: var(--sdf-color-accent);
}

.sdf-mobile-nav__facet-sep {
	margin: 0 5px;
	color: var(--sdf-color-border);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 13. 语言切换容器（GTranslate 下拉）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-lang {
	display: inline-flex;
	align-items: center;
}

.sdf-lang--dark { color: var(--sdf-header-transparent-color, var(--sdf-color-heading)); }
.sdf-lang--light { color: var(--sdf-color-heading); }

/* ═══════════════════════════════════════════════════════════════════════
 * 14. 支付图标
 *
 * 底包刻意用文字块占位（不带任何品牌的图形 logo，避免商标问题）。
 * 新项目换成自己的支付图标图片即可。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-pay {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 46px;
	height: 28px;
	padding: 0 8px;
	border: 1px solid var(--sdf-color-border);
	border-radius: var(--sdf-radius-xs);
	background: var(--sdf-color-bg);
	color: var(--sdf-color-text-muted);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .02em;
	line-height: 1;
}

/* 各平台使用品牌彩色（品牌色属第三方商标规范，不纳入主题 --sdf-* 变量体系）。
 * 需要与站点配色统一时，直接覆盖对应修饰类的 color / background 即可。 */
.sdf-pay--visa   { color: #1434cb; }
.sdf-pay--amex   { color: #006fcf; }
.sdf-pay--pp     { color: #003087; }
.sdf-pay--disc   { color: #e45e00; }
.sdf-pay--jcb    { color: #0e4c96; }
.sdf-pay--ap     { color: #111111; }
.sdf-pay--gpay   { color: #4285f4; }
.sdf-pay--up     { color: #e21836; }

/* Klarna 品牌为粉底黑字 */
.sdf-pay--klarna {
	border-color: transparent;
	background: #ffb3c7;
	color: #17120f;
}

/* Mastercard 双圆：左红右黄 */
.sdf-pay--mc i {
	display: block;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: #eb001b;
	opacity: 1;
}

.sdf-pay--mc i + i {
	margin-left: -6px;
	background: #f79e1b;
	mix-blend-mode: multiply;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 15. 弹窗（订阅 / 促销，结构见 inc/sdfrchem/sdfrchem-popup.php）
 *
 * 配色由后台字段内联注入到 .sdf-popup__box 上的 --sdf-popup-* 变量。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-popup {
	position: fixed;
	inset: 0;
	z-index: var(--sdf-z-modal);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--sdf-space-md);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		visibility var(--sdf-t-base) var(--sdf-ease);
}

.sdf-popup.is-open {
	opacity: 1;
	visibility: visible;
}

.sdf-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .5);
}

.sdf-popup__box {
	position: relative;
	z-index: 1;
	width: min(460px, 100%);
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: var(--sdf-space-xl);
	border-radius: var(--sdf-radius-lg);
	background: linear-gradient(135deg, var(--sdf-popup-from, #1b1b1b), var(--sdf-popup-to, #3a3a3a));
	color: var(--sdf-popup-text, #fff);
	text-align: center;
	box-shadow: var(--sdf-shadow-lg);
}

.sdf-popup__box > * {
	position: relative;
	z-index: 1;
}

/* 触控目标 44×44；位置留出边距避免贴边难点 */
.sdf-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--sdf-popup-to, #1b1b1b);
	line-height: 0;
	cursor: pointer;
	transition: transform var(--sdf-t-hover) var(--sdf-ease),
		background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-popup__close svg {
	display: block;
}

.sdf-popup__close:hover {
	background: #fff;
	transform: rotate(90deg);
}

/*
 * 顶部品牌徽标。
 *
 * 弹窗是访客第一次近距离看到品牌的位置，一枚真实标记能把"促销广告"
 * 变成"品牌在说话"。白色圆底是必要的：徽标是透明底金色图，
 * 直接压在深蓝渐变上会与背景糊在一起。
 */
.sdf-popup__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--sdf-space-md);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .22);
	overflow: hidden;
}

.sdf-popup__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * 眉标：全大写细体小字。
 * 用 opacity 而不是固定颜色 —— 弹窗底色由后台配置，
 * 写死颜色会在浅色底上失效，而 opacity 始终跟随正文色。
 */
.sdf-popup__eyebrow {
	margin: 0 0 8px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .72;
}

.sdf-popup__title {
	margin: 0 0 var(--sdf-space-xs);
	font-family: var(--sdf-font-heading);
	font-size: var(--sdf-fs-lg);
	font-weight: 600;
	letter-spacing: -.015em;
	color: inherit;
}

.sdf-popup__subtitle {
	margin: 0 0 var(--sdf-space-md);
	color: inherit;
	font-size: var(--sdf-fs-sm);
	opacity: .92;
}

.sdf-popup__media {
	margin-bottom: var(--sdf-space-md);
}

.sdf-popup__value {
	font-size: var(--sdf-fs-2xl);
	font-weight: 700;
	line-height: 1;
}

.sdf-popup__form {
	display: flex;
	flex-direction: column;
	gap: var(--sdf-space-xs);
}

.sdf-popup__field {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-xs);
	padding: 11px 14px;
	border: 1px solid var(--sdf-footer-input-border, rgba(255, 255, 255, .35));
	border-radius: var(--sdf-radius-sm);
}

.sdf-popup__field input {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font-size: var(--sdf-fs-sm);
}

.sdf-popup__field input:focus {
	outline: none;
}

.sdf-popup__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--sdf-radius-sm);
	background: var(--sdf-popup-btn-bg, #fff);
	color: var(--sdf-popup-btn-text, #1b1b1b);
	font-size: var(--sdf-fs-sm);
	font-weight: 700;
	letter-spacing: var(--sdf-ls-wide);
	cursor: pointer;
	transition: opacity var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-popup__btn:hover {
	opacity: .88;
	color: var(--sdf-popup-btn-text, #1b1b1b);
}

.sdf-popup__decline {
	margin-top: var(--sdf-space-sm);
	background: transparent;
	color: inherit;
	font-size: var(--sdf-fs-xs);
	text-decoration: underline;
	opacity: .8;
}

.sdf-popup__success {
	margin: var(--sdf-space-xs) 0 0;
	font-size: var(--sdf-fs-sm);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 16. 提示条 / 空状态
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-notice {
	padding: var(--sdf-space-sm) var(--sdf-space-md);
	border-left: 3px solid var(--sdf-color-info);
	border-radius: var(--sdf-radius-xs);
	background: var(--sdf-color-bg-soft);
	font-size: var(--sdf-fs-sm);
}

.sdf-notice--success { border-left-color: var(--sdf-color-success); }
.sdf-notice--warning { border-left-color: var(--sdf-color-warning); }
.sdf-notice--error   { border-left-color: var(--sdf-color-error); }

.sdf-empty {
	padding: var(--sdf-space-2xl) var(--sdf-space-md);
	color: var(--sdf-color-text-muted);
	text-align: center;
}

/* 空分类的 B2B 引导（结构见 sdfrchem-woocommerce.php 的 sdfrchem_wc_empty_products）——
   空分类不代表站点故障，而应给出「这个系列还没上齐 + 可以找我们要报价」的下一步。 */
.sdf-empty__title {
	margin: 0 0 var(--sdf-space-sm);
	color: var(--sdf-color-heading);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-empty__body {
	max-width: 62ch;
	margin: 0 auto;
}

.sdf-empty__body p {
	margin: 0 0 var(--sdf-space-sm);
	font-size: var(--sdf-fs-sm);
	line-height: 1.8;
}

.sdf-empty__body p:last-child {
	margin-bottom: 0;
}

.sdf-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sdf-space-sm);
	margin-top: var(--sdf-space-xl);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 17. 滚动淡入（由 sdfrchem-main.js 添加 .is-inview）
 *
 * 隐藏只在 html.sdf-js 下生效（JS 确认可用后才加这个类），
 * 保证脚本被拦截 / 报错时内容仍然可见。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-js .sdf-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--sdf-t-page) var(--sdf-ease),
		transform var(--sdf-t-page) var(--sdf-ease);
}

.sdf-js .sdf-reveal.is-inview {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.sdf-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 18. 横向滚动轨道（产品横滑，左右箭头分页）
 *
 * 结构由 sdfrchem_product_rail() 输出，行为由 sdfrchem-main.js 的
 * [data-sdf-rail] 模块驱动。注意：JS 的翻页步长按 gap = 20px 计算，
 * 这里的 gap 必须保持 20px，否则每页会错位。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-rail {
	position: relative;
}

.sdf-rail__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	/* 隐藏滚动条：翻页交给箭头与手势 */
	scrollbar-width: none;
}

.sdf-rail__viewport::-webkit-scrollbar {
	display: none;
}

.sdf-rail__track {
	display: flex;
	gap: 20px;
}

.sdf-rail__track > * {
	flex: 0 0 auto;
	width: 240px;
	scroll-snap-align: start;
}

/* 箭头：桌面端悬浮在轨道两侧，窄屏隐藏（改用触摸横滑） */
.sdf-rail__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--sdf-color-border);
	border-radius: 0;
	background: var(--sdf-color-bg);
	color: var(--sdf-color-heading);
	transform: translateY(-50%);
	cursor: pointer;
	transition: background var(--sdf-t-hover) var(--sdf-ease),
		border-color var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease),
		opacity var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-rail__arrow svg {
	display: block;
	width: 18px;
	height: 18px;
}

.sdf-rail__arrow--prev { left: 0; }
.sdf-rail__arrow--next { right: 0; }

.sdf-rail__arrow:hover:not(:disabled) {
	border-color: var(--sdf-color-accent);
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
}

/* 到达两端时禁用（由 JS 切换 disabled） */
.sdf-rail__arrow:disabled {
	opacity: .35;
	cursor: not-allowed;
}

@media (max-width: 767px) {
	.sdf-rail__arrow { display: none; }

	.sdf-rail__track > * { width: 200px; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 19. 媒体 Logo 墙（无缝横向跑马灯）
 *
 * 结构由模板输出 .sdf-press__marquee > .sdf-press__list，
 * JS 会克隆列表补足宽度并写入 animationDuration，动画名由这里定义。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-press {
	overflow: hidden;
}

.sdf-press__marquee {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-4xl);
}

.sdf-press__marquee--scroll {
	width: max-content;
	animation: sdf-marquee-left 30s linear infinite;
}

.sdf-press__marquee:hover {
	animation-play-state: paused;
}

.sdf-press__list {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-4xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sdf-press__list img {
	display: block;
	width: auto;
	max-height: 42px;
	object-fit: contain;
	/* 灰化处理：Logo 墙不抢视觉焦点，hover 恢复本色 */
	filter: grayscale(1);
	opacity: .55;
	transition: filter var(--sdf-t-base) var(--sdf-ease),
		opacity var(--sdf-t-base) var(--sdf-ease);
}

.sdf-press__list img:hover {
	filter: grayscale(0);
	opacity: 1;
}

@keyframes sdf-marquee-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.sdf-press__marquee--scroll { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 20. 页面头横幅（内页面包屑下方的大标题区，多处复用）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-page-hero {
	padding-block: clamp(32px, 5vw, 64px);
	background: var(--sdf-color-bg-soft);
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

.sdf-page-hero__inner {
	display: flex;
	flex-direction: column;
	gap: var(--sdf-space-sm);
}

.sdf-page-hero__title {
	margin: 0;
	color: var(--sdf-color-heading);
	font-family: var(--sdf-font-heading);
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-page-hero__text {
	margin: 0;
	max-width: 68ch;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	line-height: var(--sdf-lh-base);
}

/* 带背景图的变体：整幅图 + 深色遮罩，文字转白保证对比度 */
.sdf-page-hero--img {
	position: relative;
	overflow: hidden;
	background: var(--sdf-color-heading);
	border-bottom: 0;
}

.sdf-page-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .45;
}

.sdf-page-hero--img .sdf-page-hero__inner {
	position: relative;
	z-index: 1;
}

.sdf-page-hero--img .sdf-page-hero__title,
.sdf-page-hero--img .sdf-page-hero__text {
	color: var(--sdf-color-bg);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 21. 富文本排版（后台 textarea 输出的正文 / 页面内容）
 *
 * Astra 会把 p 的 margin 清零，所以段落间距统一用「相邻兄弟」规则控制。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-rte {
	color: var(--sdf-color-text);
	font-size: var(--sdf-fs-base);
	line-height: var(--sdf-lh-loose);
}

.sdf-rte > * + * {
	margin-top: var(--sdf-space-md);
}

.sdf-rte h2,
.sdf-rte h3,
.sdf-rte h4 {
	margin: var(--sdf-space-xl) 0 0;
	color: var(--sdf-color-heading);
	font-family: var(--sdf-font-heading);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-rte h2 { font-size: clamp(20px, 2.2vw, 26px); }
.sdf-rte h3 { font-size: clamp(18px, 1.8vw, 21px); }
.sdf-rte h4 { font-size: var(--sdf-fs-md); }

.sdf-rte > h2:first-child,
.sdf-rte > h3:first-child,
.sdf-rte > h4:first-child {
	margin-top: 0;
}

.sdf-rte p {
	margin: 0;
}

.sdf-rte a {
	color: var(--sdf-color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-rte a:hover {
	color: var(--sdf-color-heading);
}

.sdf-rte ul,
.sdf-rte ol {
	margin: 0;
	padding-left: 1.25em;
}

.sdf-rte li + li {
	margin-top: var(--sdf-space-xs);
}

.sdf-rte blockquote {
	margin: var(--sdf-space-lg) 0;
	padding: var(--sdf-space-md) var(--sdf-space-lg);
	border-left: 3px solid var(--sdf-color-accent);
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-text-soft);
	font-style: italic;
}

.sdf-rte img {
	max-width: 100%;
	height: auto;
}

.sdf-rte .sdf-figure {
	margin: var(--sdf-space-lg) 0;
}

.sdf-rte .sdf-figure__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--sdf-radius-md);
}

.sdf-rte table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sdf-fs-sm);
}

.sdf-rte th,
.sdf-rte td {
	padding: 10px 14px;
	border: 1px solid var(--sdf-color-border-soft);
	text-align: left;
}

.sdf-rte th {
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-heading);
	font-weight: 500;
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

.sdf-rte hr {
	margin: var(--sdf-space-xl) 0;
	border: 0;
	border-top: 1px solid var(--sdf-color-border);
}

/*
 * 正文表格的横向滚动容器。
 *
 * 博客的对比类文章大量使用 5 列参数表（材质 / 成本 / 耐久 / 适用品类 …），
 * 在 430px 的窄屏上强行 100% 宽会把每列压到 80px 上下，中文与英文单词都被
 * 切得七零八落，反而不可读。这里允许表格保持最小宽度并横向滚动，
 * 表格本身的形态不变，读者左右滑动即可看完一行。
 *
 * 为什么用包裹层而不是直接给 table 加 overflow：table 的 overflow 在部分
 * 浏览器上不生效（会被当作 table 盒模型处理），包裹一个 div 是可靠做法。
 */
.sdf-rte .sdf-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sdf-rte .sdf-table-scroll table {
	min-width: 560px;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 22. 折叠面板（FAQ，产品详情与列表页共用）
 *
 * 选择器统一带 .sdf-accordion 前缀：列表页的筛选折叠按钮也复用
 * .sdf-accordion__q 类名，不加前缀会把它的样式一起改掉。
 * 展开状态由 sdfrchem-main.js 切换 .is-open。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-accordion {
	border-top: 1px solid var(--sdf-color-border-soft);
}

.sdf-accordion .sdf-accordion__item {
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

.sdf-accordion .sdf-accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdf-space-md);
	width: 100%;
	padding: var(--sdf-space-md) 0;
	border: 0;
	background: none;
	color: var(--sdf-color-heading);
	font-family: inherit;
	font-size: var(--sdf-fs-base);
	font-weight: 400;
	line-height: var(--sdf-lh-snug);
	letter-spacing: .02em;
	text-align: left;
	cursor: pointer;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-accordion .sdf-accordion__q:hover {
	color: var(--sdf-color-accent);
}

.sdf-accordion .sdf-accordion__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	color: var(--sdf-color-accent);
	font-size: 18px;
	line-height: 1;
	transition: transform var(--sdf-t-base) var(--sdf-ease);
}

/* 展开时「+」旋转 45° 变成「×」 */
.sdf-accordion .sdf-accordion__item.is-open .sdf-accordion__icon {
	transform: rotate(45deg);
}

.sdf-accordion .sdf-accordion__a {
	max-height: 0;
	overflow: hidden;
	color: var(--sdf-color-text-muted);
	font-size: var(--sdf-fs-sm);
	line-height: var(--sdf-lh-loose);
	transition: max-height var(--sdf-t-page) var(--sdf-ease),
		padding var(--sdf-t-page) var(--sdf-ease);
}

.sdf-accordion .sdf-accordion__item.is-open .sdf-accordion__a {
	max-height: 60vh;
	padding-bottom: var(--sdf-space-lg);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 23. 资质证书墙（首页 + 关于我们共用）
 *
 * 结构由 inc/sdfrchem/sdfrchem-certificates.php 输出，行为由
 * sdfrchem-main.js 的 [data-sdf-cert] 模块驱动。
 * 深色底 + 金色光效：证书是白底扫描件，只有深色底才能让它们「跳」出来；
 * 同时这一区在首页与关于我们都承担「深色节奏点」的角色。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-certs {
	position: relative;
	overflow: hidden;
	padding-block: clamp(56px, 6.5vw, 96px);
	background: #0e0e0e;
}

/* 环境光：左上角的金色径向光晕，缓慢呼吸。
 * 纯装饰，用 aria-hidden 标记，且不参与点击（pointer-events: none）。 */
.sdf-certs__glow {
	position: absolute;
	top: -30%;
	left: 50%;
	width: min(1100px, 120%);
	height: 900px;
	transform: translateX(-50%);
	background: radial-gradient(
		ellipse at center,
		rgba(201, 162, 54, .17) 0%,
		rgba(201, 162, 54, .06) 38%,
		transparent 68%
	);
	pointer-events: none;
	animation: sdf-certs-breathe 9s ease-in-out infinite;
}

@keyframes sdf-certs-breathe {
	0%, 100% { opacity: .65; transform: translateX(-50%) scale(1); }
	50%      { opacity: 1;   transform: translateX(-50%) scale(1.07); }
}

.sdf-certs__inner { position: relative; z-index: 1; }

/* ── 区头 ── */
.sdf-certs__head {
	margin: 0 auto clamp(36px, 4vw, 56px);
	max-width: 720px;
	text-align: center;
}

.sdf-certs__eyebrow {
	display: block;
	margin-bottom: 12px;
	color: var(--sdf-color-accent);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: .3em;
	text-transform: uppercase;
}

.sdf-certs__title {
	margin: 0 0 16px;
	color: #fff;
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: .05em;
	text-transform: uppercase;
}

/* 标题下方一小段金色短线，把标题和说明分开。 */
.sdf-certs__title::after {
	content: '';
	display: block;
	width: 48px;
	height: 1px;
	margin: 18px auto 0;
	background: linear-gradient(90deg, transparent, var(--sdf-color-accent), transparent);
}

.sdf-certs__text {
	margin: 0;
	color: rgba(255, 255, 255, .62);
	font-size: 14px;
	line-height: 1.9;
}

/* ── 网格 ── */
.sdf-certs__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* 逐项延迟，让滚动进入时的淡入有先后顺序而不是整排一起动。
 * --sdf-cert-i 由模板按索引写入。
 *
 * 必须带 .sdf-js 前缀把特异性提到 (0,3,0)：
 * 第 17 节的 `.sdf-js .sdf-reveal` 用的是 transition 简写，
 * 简写会把未写出的 transition-delay 重置为 0s；它特异性 (0,2,0)
 * 高于单独的 `.sdf-certs__item` (0,1,0)，延迟会被它吃掉。 */
.sdf-js .sdf-certs__item {
	transition-delay: calc(var(--sdf-cert-i, 0) * 90ms);
}

/* ── 单张证书卡 ── */
.sdf-cert {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .1);
	background: rgba(255, 255, 255, .03);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color var(--sdf-t-base) var(--sdf-ease),
		background var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease),
		box-shadow var(--sdf-t-base) var(--sdf-ease);
}

.sdf-cert:hover,
.sdf-cert:focus-visible {
	border-color: rgba(201, 162, 54, .6);
	background: rgba(201, 162, 54, .05);
	transform: translateY(-6px);
	box-shadow: 0 20px 44px rgba(0, 0, 0, .5), 0 0 0 1px rgba(201, 162, 54, .18);
}

.sdf-cert:focus-visible {
	outline: 2px solid var(--sdf-color-accent);
	outline-offset: 3px;
}

/* ── 证书图框 ── */
.sdf-cert__frame {
	position: relative;
	display: block;
	overflow: hidden;
	/* A4 比例，与证书原图一致（1810×2560 ≈ 0.707），
	 * 这样 contain 与 cover 的取景结果相同，不会裁掉证书边缘。 */
	aspect-ratio: 210 / 297;
	background: #fff;
}

.sdf-cert__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* 默认略压暗、降饱和，悬停时恢复 —— 一排四张时不会互相抢视线。 */
	filter: brightness(.86) saturate(.85);
	transition: filter var(--sdf-t-page) var(--sdf-ease),
		transform var(--sdf-t-page) var(--sdf-ease);
}

.sdf-cert:hover .sdf-cert__img,
.sdf-cert:focus-visible .sdf-cert__img {
	filter: none;
	transform: scale(1.03);
}

/* 光效：一道斜向高光扫过证书表面，像光掠过纸张。
 * 用 animation 而不是 transition —— transition 会「扫过去再扫回来」，
 * animation 只在进入时单向扫一次，更像真实反光。 */
.sdf-cert__sheen {
	position: absolute;
	inset: 0;
	transform: translateX(-130%);
	background: linear-gradient(
		104deg,
		transparent 32%,
		rgba(255, 255, 255, .5) 45%,
		rgba(255, 255, 255, .82) 50%,
		rgba(201, 162, 54, .38) 56%,
		transparent 70%
	);
	pointer-events: none;
}

.sdf-cert:hover .sdf-cert__sheen,
.sdf-cert:focus-visible .sdf-cert__sheen {
	animation: sdf-cert-sheen .95s var(--sdf-ease);
}

@keyframes sdf-cert-sheen {
	from { transform: translateX(-130%); }
	to   { transform: translateX(130%); }
}

/* 放大提示：悬停时从右下角浮起。 */
.sdf-cert__zoom {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(201, 162, 54, .55);
	border-radius: 50%;
	background: rgba(14, 14, 14, .78);
	color: var(--sdf-color-accent);
	opacity: 0;
	transform: translateY(8px) scale(.85);
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-cert__zoom svg { width: 19px; height: 19px; }

.sdf-cert:hover .sdf-cert__zoom,
.sdf-cert:focus-visible .sdf-cert__zoom {
	opacity: 1;
	transform: none;
}

/* ── 卡内文字 ── */
.sdf-cert__meta {
	display: flex;
	flex-direction: column;
	/* 撑满卡片剩余高度，配合下方 number 的 margin-top:auto 把专利号压到底。
	 * 不写 flex:1 的话 meta 只有内容高度，margin-top:auto 无处可推。 */
	flex: 1 1 auto;
	gap: 7px;
	padding: 18px 18px 20px;
}

.sdf-cert__type {
	color: var(--sdf-color-accent);
	font-size: 10px;
	letter-spacing: .22em;
	text-transform: uppercase;
}

/*
 * 名称区锁定三行高度。
 *
 * 四条证书名的长短不一，实测有 3 行的也有 2 行的（"Gemstone Grinding
 * Production Line" 只有两行）。不锁高度时，两行的那张卡里专利号会整体
 * 上浮约一个行高，四张并排看起来就是「专利号不在一条直线上」。
 *
 * 用 em 而不是 px：字号在窄屏会降到 14px，em 会跟着缩，锁定行数始终是 3。
 */
.sdf-cert__name {
	min-height: calc(1.45em * 3);
	color: #fff;
	font-family: var(--sdf-font-heading);
	font-size: 15px;
	line-height: 1.45;
	letter-spacing: .01em;
}

/*
 * 专利号贴卡片底部。
 *
 * min-height 只能兜住「名称不足三行」，兜不住「名称超过三行」——
 * 那张卡会把整行撑高，同行其余卡片的专利号又会浮起来。
 * 加 margin-top:auto 后，无论名称几行，四张卡的专利号都落在同一条底线上。
 */
.sdf-cert__number {
	margin-top: auto;
	color: rgba(255, 255, 255, .48);
	font-size: 11px;
	letter-spacing: .08em;
}

/* ── 注脚 ── */
.sdf-certs__note {
	margin: clamp(28px, 3vw, 40px) auto 0;
	max-width: 760px;
	color: rgba(255, 255, 255, .38);
	font-size: 12px;
	line-height: 1.8;
	text-align: center;
}

/* ── 灯箱 ── */
.sdf-certbox {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(6, 6, 6, .93);
	animation: sdf-certbox-in var(--sdf-t-base) var(--sdf-ease);
}

.sdf-certbox[hidden] { display: none; }

@keyframes sdf-certbox-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sdf-certbox__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	max-width: 100%;
	max-height: 100%;
}

.sdf-certbox__stage {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sdf-certbox__img {
	display: block;
	max-width: min(760px, 76vw);
	max-height: 76vh;
	border: 1px solid rgba(201, 162, 54, .35);
	background: #fff;
	box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
	animation: sdf-certbox-pop var(--sdf-t-page) var(--sdf-ease);
}

@keyframes sdf-certbox-pop {
	from { opacity: 0; transform: scale(.96); }
	to   { opacity: 1; transform: none; }
}

.sdf-certbox__caption {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0;
	text-align: center;
}

.sdf-certbox__name {
	color: #fff;
	font-family: var(--sdf-font-heading);
	font-size: 15px;
	letter-spacing: .02em;
}

.sdf-certbox__number {
	color: var(--sdf-color-accent);
	font-size: 11px;
	letter-spacing: .12em;
}

/* 关闭 / 翻页按钮：深色圆形，金色描边 */
.sdf-certbox__close,
.sdf-certbox__nav {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid rgba(201, 162, 54, .45);
	border-radius: 50%;
	background: rgba(20, 20, 20, .85);
	color: var(--sdf-color-accent);
	cursor: pointer;
	transition: background var(--sdf-t-hover) var(--sdf-ease),
		border-color var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-certbox__close svg,
.sdf-certbox__nav svg { width: 20px; height: 20px; }

.sdf-certbox__close:hover,
.sdf-certbox__nav:hover {
	background: var(--sdf-color-accent);
	border-color: var(--sdf-color-accent);
	color: #111;
}

.sdf-certbox__close {
	position: absolute;
	top: -6px;
	right: -6px;
	z-index: 2;
}

/* 翻页按钮压在图片两侧，不占额外宽度。
 * 图片最大 760px，两侧各留 56px 给按钮，窄屏会自动收进图片内。 */
.sdf-certbox__nav { position: absolute; top: 50%; transform: translateY(-50%); }
.sdf-certbox__nav--prev { left: -58px; }
.sdf-certbox__nav--next { right: -58px; }

/* ── 断点 ── */

@media (min-width: 768px) {
	.sdf-certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}

@media (min-width: 1024px) {
	.sdf-certs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
	/* 窄屏下翻页按钮改到图片下方，避免压住证书内容。 */
	.sdf-certbox__nav { position: static; transform: none; }

	.sdf-certbox__dialog { gap: 14px; }

	.sdf-certbox__stage { flex-direction: row; gap: 12px; }

	.sdf-certbox__img { max-width: 100%; max-height: 62vh; }

	.sdf-certbox__close { top: -10px; right: 0; }

	.sdf-certs__grid { gap: 16px; }

	.sdf-cert__meta { padding: 14px 14px 16px; gap: 6px; }

	.sdf-cert__name { font-size: 14px; }
}

/* 尊重系统的「减少动态效果」设置：关掉呼吸光与扫光，
 * 只保留状态变化（颜色 / 位移），不做循环动画。 */
@media (prefers-reduced-motion: reduce) {
	.sdf-certs__glow { animation: none; opacity: .8; }

	.sdf-cert:hover .sdf-cert__sheen,
	.sdf-cert:focus-visible .sdf-cert__sheen { animation: none; }

	.sdf-certbox,
	.sdf-certbox__img { animation: none; }
}