/*
 * B2B 站底包 · 第 3 层：站点骨架版式
 *
 * 对标站：enovathemes.com/joice/home-2
 * 覆盖范围：促销条 / 页头（品牌行 + 导航行）/ 主导航 / 下拉面板 /
 *          搜索 / 语言切换 / 货币切换 / 工具区 / 侧边树状菜单 /
 *          移动端抽屉 / 页脚 / 鼠标跟随圆点 / 区块标题
 *
 * 页面级版式不在这里，在各模板底部 <style>。
 * 加载顺序：base.css → components.css → layout.css → 模板 <style> → 后台配色变量
 */

/* ═══════════════════════════════════════════════════════════════════════
 * 0. 通用：区块标题 / 分隔线
 *
 * 这一组是全站标题的"总闸"：各模板的 h1/h2 都挂了 .sdf-serif 或
 * .sdf-section-title，改这里等于一次改完 15 个页面。
 *
 * 与珠宝站时期的差别：
 *   - 字重 400 → 600（几何无衬线在 400 下显得单薄）
 *   - 全大写 → 保留原样（B2B 英文标题全大写在长句上可读性差）
 *   - 字距 .04em（放大）→ -.015em（收紧），大字号的常规做法
 *   - 区块标题 24px → 36px（B2B 页面标题层级要更明确）
 * ═══════════════════════════════════════════════════════════════════════ */

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

.sdf-section-title {
	margin: 0;
	color: var(--sdf-color-heading);
	font-size: clamp(24px, 2.6vw, 36px);
	line-height: 1.22;
	letter-spacing: -.018em;
	text-align: center;
	text-transform: none;
}

.sdf-section-title--left {
	text-align: left;
}

.sdf-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sdf-space-md);
	margin-bottom: var(--sdf-space-xl);
}

.sdf-section-head .sdf-section-title {
	text-align: left;
}

/* 标题下的短金线 */
.sdf-rule {
	display: block;
	width: 64px;
	height: 2px;
	margin: var(--sdf-space-md) auto 0;
	background: var(--sdf-color-accent);
	border: 0;
}

.sdf-rule--left {
	margin-left: 0;
}

.sdf-section-more {
	color: var(--sdf-color-heading);
	font-size: var(--sdf-fs-sm);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

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

/* 图片占位（后台未传图时不留空洞） */
.sdf-ph {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 120px;
	/*
	 * 图片占位块。
	 *
	 * 底色用极浅的品牌蓝，再叠一层 45° 细斜纹 + 右下角柔光：
	 * 纯灰块在长页面里看起来像「加载失败」，带纹理的浅色块则明确是「待补图」。
	 * 斜纹用 repeating-linear-gradient 实现，不引入任何图片资源。
	 */
	background:
		radial-gradient(circle at 76% 22%, rgba(23, 53, 127, .09) 0%, rgba(23, 53, 127, 0) 62%),
		repeating-linear-gradient(
			45deg,
			rgba(23, 53, 127, .035) 0px,
			rgba(23, 53, 127, .035) 1px,
			transparent 1px,
			transparent 10px
		),
		var(--sdf-color-bg-soft);
	border: 1px solid var(--sdf-color-border-soft);
	border-radius: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 1. 促销条（文案垂直轮播，由 sdfrchem-main.js 控制 .is-active）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-promo {
	position: relative;
	z-index: calc(var(--sdf-z-header) + 1);
	background: var(--sdf-promo-bg, var(--sdf-color-promo));
	background-image: var(--sdf-promo-bg-image, none);
	background-size: cover;
	background-position: center;
	color: var(--sdf-promo-text, #fff);
}

.sdf-promo__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: var(--sdf-container);
	/* 条高下限 44px：关闭按钮用 top/bottom 撑满条高，
	 * 条太矮会让它的触控高度不足 44px。 */
	min-height: 44px;
	margin-inline: auto;
	/* 右侧留出关闭按钮宽度，避免长文案压到按钮下 */
	padding: 9px 52px;
	text-align: center;
}

/* 促销条关闭按钮：撑满条高，保证触控面积 */
.sdf-promo__close {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	line-height: 0;
	opacity: .72;
	cursor: pointer;
	transition: opacity var(--sdf-t-hover) var(--sdf-ease),
		background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-promo__close svg {
	display: block;
}

.sdf-promo__close:hover {
	opacity: 1;
	background: rgba(255, 255, 255, .12);
}

.sdf-promo__track {
	position: relative;
	width: 100%;
	min-height: 1.5em;
	overflow: hidden;
}

.sdf-promo__item {
	display: block;
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	color: inherit;
	font-size: var(--sdf-fs-xs);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		visibility var(--sdf-t-base) var(--sdf-ease);
}

.sdf-promo__item:first-child {
	position: relative;
}

.sdf-promo__item.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
}

.sdf-promo__item:hover {
	color: inherit;
	opacity: .85;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. 页头
 *
 * 两行结构（对标站 96 + 64 = 160px）：
 *   .sdf-head--main  白底品牌行
 *   .sdf-head--nav   灰底导航行
 *
 * 滚动收起上排：sticky 的 top 取「上排行高的负值」，
 * 这样滚动后上排自然移出视口，且因为 sticky 不脱流，页面不会跳动。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-header {
	position: sticky;
	top: calc(-1 * var(--sdf-head-main-h));
	z-index: var(--sdf-z-header);
	background: var(--sdf-color-bg);
	transition: box-shadow var(--sdf-t-base) var(--sdf-ease);
}

.sdf-header.is-scrolled {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .07);
}

.sdf-head {
	position: relative;
}

.sdf-head__inner {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-lg);
	max-width: var(--sdf-container);
	margin-inline: auto;
	padding-inline: var(--sdf-space-md);
}

/* ── 上排：品牌行 ── */
.sdf-head--main {
	background: var(--sdf-color-bg);
	border-bottom: 1px solid var(--sdf-color-border-soft);
}

.sdf-head--main > .sdf-head__inner {
	height: var(--sdf-head-main-h);
}

/* ── 下排：导航行 ── */
.sdf-head--nav {
	background: var(--sdf-head-nav-bg);
}

.sdf-head--nav > .sdf-head__inner {
	height: var(--sdf-head-nav-h);
	gap: 0;
}

/* 汉堡：只在窄屏出现 */
.sdf-burger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sdf-color-heading);
	cursor: pointer;
}

.sdf-burger span,
.sdf-burger span::before,
.sdf-burger span::after {
	display: block;
	width: 20px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-burger span::before,
.sdf-burger span::after {
	content: "";
	position: relative;
}

.sdf-burger span::before { top: -6px; }
.sdf-burger span::after  { top: 4.5px; }

/* Logo：图标 + 双行文字（主品牌名 / 副公司全称）
 * 图标与文字各自独立输出 —— 只传图标（单色标记）时文字照常显示；
 * 传整张带字的 Logo 图时，把 logo_text / logo_tagline 留空即可只显示图片。 */
.sdf-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	flex: 0 0 auto;
	color: var(--sdf-color-heading);
	text-decoration: none;
}

/* 选择器写成两层是必需的，不是冗余：
 * WooCommerce 自带 `.woocommerce img, .woocommerce-page img { height: auto }`，
 * 特异性 (0,1,1) 会压过任何单类名规则。在商店页 / 分类页 / 商品页上，
 * 页头 Logo 会被还原成图片原始尺寸（300×300）直接撑破页头。
 * 提到 (0,2,0) 才能在这些页面保持尺寸可控。 */
.sdf-logo .sdf-logo__mark {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 42px;
	object-fit: contain;
}

.sdf-logo__text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.sdf-logo__name {
	color: var(--sdf-color-heading);
	font-family: var(--sdf-font-heading);
	font-size: 21px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: var(--sdf-ls-wider);
	text-transform: uppercase;
	white-space: nowrap;
}

.sdf-logo__suffix {
	margin-left: 2px;
	font-size: 11px;
	vertical-align: super;
}

/* 副行是 29 字的公司全称，主行只有 13 字。
 * 要让两行右端对齐成等宽块面，副行必须用「小字号 + 大字距」补偿：
 * 实测 8.5px/.30em 与 21px/.12em 的内容宽度同为 215px。
 * 两者都用 em 单位，所以断点缩放时比例自动保持，无需逐档重算。 */
.sdf-logo__tagline {
	color: var(--sdf-color-text-muted);
	font-size: 8.5px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: .3em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* ── 页头搜索：分类下拉 + 关键词 + 金色按钮 ── */
.sdf-hsearch {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 824px;
	height: 48px;
	border: 1px solid var(--sdf-color-border);
	background: var(--sdf-color-bg);
}

.sdf-hsearch__cat {
	position: relative;
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	width: 164px;
	border-right: 1px solid var(--sdf-color-border);
}

.sdf-hsearch__select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	height: 100%;
	padding: 0 30px 0 16px;
	border: 0;
	background: transparent;
	color: var(--sdf-color-text);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: .04em;
	cursor: pointer;
}

.sdf-hsearch__select:focus {
	outline: none;
}

.sdf-hsearch__chev {
	position: absolute;
	right: 12px;
	display: inline-flex;
	color: var(--sdf-color-heading);
	pointer-events: none;
}

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

.sdf-hsearch__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0 16px;
	border: 0;
	background: transparent;
	color: var(--sdf-color-text);
	font-family: inherit;
	font-size: 13px;
	letter-spacing: .04em;
}

.sdf-hsearch__input:focus {
	outline: none;
}

.sdf-hsearch__input::placeholder {
	color: var(--sdf-color-text-muted);
	opacity: 1;
}

.sdf-hsearch__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	padding: 0;
	border: 0;
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
	line-height: 0;
	cursor: pointer;
	transition: background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-hsearch__btn:hover {
	background: var(--sdf-color-heading);
}

.sdf-hsearch__btn svg { display: block; }

/* 移动端搜索开关（桌面不显示） */
.sdf-head__searchbtn {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	margin-left: auto;
	padding: 0;
	border: 0;
	background: none;
	color: var(--sdf-color-heading);
	line-height: 0;
	cursor: pointer;
}

.sdf-head__searchbtn svg { display: block; }

/* ── 语言 / 货币 ── */
.sdf-head__side {
	display: flex;
	align-items: center;
	gap: var(--sdf-space-lg);
	margin-left: auto;
	flex: 0 0 auto;
}

.sdf-hlang {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--sdf-color-heading);
}

.sdf-hlang__icon,
.sdf-hlang__chev {
	display: inline-flex;
	flex: 0 0 auto;
}

.sdf-hlang__chev {
	color: var(--sdf-color-text-muted);
	transition: transform var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-hlang:hover .sdf-hlang__chev {
	transform: rotate(180deg);
}

/* GTranslate 原生 select：清掉系统外观，做成纯文字切换器 */
.sdf-lang {
	display: inline-flex;
	align-items: center;
}

.sdf-lang .gt_selector {
	appearance: none;
	-webkit-appearance: none;
	max-width: 92px;
	height: 30px;
	padding: 0 2px;
	border: 0;
	background: transparent;
	color: var(--sdf-color-heading);
	font-family: inherit;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
	cursor: pointer;
}

/* 去掉鼠标点击时的默认外框，但键盘焦点必须留可见提示 ——
 * 直接 outline:none 会把「键盘用户当前在哪」也一并抹掉。 */
.sdf-lang .gt_selector:focus { outline: none; }

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

.sdf-lang .gt_selector option {
	color: var(--sdf-color-text);
	text-transform: none;
	letter-spacing: normal;
}

/* 货币切换器 */
.sdf-cur {
	position: relative;
	display: inline-flex;
}

.sdf-cur__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--sdf-color-border);
	background: var(--sdf-color-bg);
	color: var(--sdf-color-heading);
	font-family: inherit;
	font-size: 12px;
	letter-spacing: .06em;
	cursor: pointer;
	transition: border-color var(--sdf-t-hover) var(--sdf-ease);
}

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

.sdf-cur__flag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	line-height: 0;
}

.sdf-cur__flag--sm {
	width: 20px;
	height: 14px;
}

.sdf-cur__flag img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sdf-cur__flag--text {
	background: var(--sdf-color-bg-mute);
	color: var(--sdf-color-text-muted);
	font-size: 8px;
	font-weight: 600;
	letter-spacing: 0;
}

.sdf-cur__arrow {
	display: inline-flex;
	color: var(--sdf-color-text-muted);
	transition: transform var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-cur.is-open .sdf-cur__arrow {
	transform: rotate(180deg);
}

.sdf-cur__list {
	position: absolute;
	top: calc(100% + 6px);
	right: 0;
	z-index: var(--sdf-z-header);
	min-width: 170px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--sdf-color-bg);
	box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
	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-cur.is-open .sdf-cur__list {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sdf-cur__option {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	padding: 8px 14px;
	border: 0;
	background: none;
	color: var(--sdf-color-text-muted);
	font-family: inherit;
	font-size: 13px;
	text-align: left;
	cursor: pointer;
	transition: color var(--sdf-t-hover) var(--sdf-ease),
		background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-cur__option:hover {
	background: var(--sdf-color-bg-soft);
	color: var(--sdf-color-accent);
}

.sdf-cur__option-text {
	flex: 1 1 auto;
	white-space: nowrap;
}

.sdf-cur__check {
	display: none;
	color: var(--sdf-color-accent);
}

.sdf-cur__option.is-active .sdf-cur__check {
	display: inline-flex;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 3. 主导航（下排）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-nav {
	display: none;
	align-items: stretch;
	flex: 1 1 auto;
	height: var(--sdf-head-nav-h);
}

.sdf-nav__item {
	position: relative;
	display: flex;
	align-items: stretch;
}

.sdf-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 100%;
	padding: 0 24px;
	border: 1px solid transparent;
	color: var(--sdf-color-heading);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .07em;
	text-transform: uppercase;
	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);
}

/* 无下拉的一级项：hover 给金色文字反馈。
 * 有下拉的项走下面的「白底 + 描边」，两者形态不同，别混用。 */
.sdf-nav__item:not(.sdf-nav__item--has-sub) > .sdf-nav__link:hover {
	color: var(--sdf-color-accent);
}

.sdf-nav__arrow {
	display: inline-flex;
	color: var(--sdf-color-heading);
	transition: transform var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

/* hover / 展开态：白底 + 细描边 + 底部金色小三角（对标站形态） */
.sdf-nav__item--has-sub:hover > .sdf-nav__link,
.sdf-nav__item--has-sub.is-open > .sdf-nav__link {
	border-color: var(--sdf-color-border);
	background: var(--sdf-color-bg);
}

.sdf-nav__item--has-sub:hover > .sdf-nav__link::after,
.sdf-nav__item--has-sub.is-open > .sdf-nav__link::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	transform: translateX(-50%);
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid var(--sdf-color-accent);
}

.sdf-nav__item--has-sub:hover .sdf-nav__arrow,
.sdf-nav__item--has-sub.is-open .sdf-nav__arrow {
	transform: rotate(180deg);
	color: var(--sdf-color-accent);
}

.sdf-nav__item--sale > .sdf-nav__link {
	color: var(--sdf-color-accent);
}

/* 菜单项上方的小标签（对标站 FEATURES 上的 Wow!） */
.sdf-nav__badge {
	position: absolute;
	top: 2px;
	left: 50%;
	transform: translateX(-50%);
	padding: 1px 6px;
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
	font-size: 9px;
	line-height: 1.5;
	letter-spacing: .04em;
	text-transform: none;
	white-space: nowrap;
}

.sdf-nav__item--has-sub > .sdf-nav__link {
	padding-top: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. 下拉面板（mega menu）
 *
 * 结构与类名由 sdfrchem_render_mega_menu() 决定。
 * 对标站：白底 + 0 4px 4px rgba(0,0,0,.1) 阴影，紧贴导航行下沿。
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: auto;
	z-index: var(--sdf-z-header);
	width: max-content;
	max-width: calc(100vw - 48px);
	background: var(--sdf-color-bg);
	box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
	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-nav__item:hover > .sdf-mega,
.sdf-nav__item.is-open > .sdf-mega,
.sdf-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* ── 宽面板（≥3 列）：以「导航整行」为定位基准，列等分 ─────────────────
 *
 * 为什么必须换定位基准：
 *   面板锚在菜单项上时，left:0 从菜单项的左边缘起算（PRODUCTS 在 x=60）。
 *   5 列产品线面板的 max-content 宽度约 1392px（被 max-width 钳住），
 *   右边缘落在 1452，**超出 1440 视口的右侧 12px**，最后一列被裁掉。
 *
 * 换基准后：面板宽度 = 容器宽度（left:0 / right:0），永远不会溢出视口，
 * 且与页面内容左右对齐。窄面板（1~2 列）不套这个类，保持贴着菜单项。
 *
 * 判定阈值在 PHP 侧 sdfrchem_mega_is_wide()，改一处必须改另一处。
 * ─────────────────────────────────────────────────────────────────── */

/* 宽面板的最近定位祖先：导航行容器（与 .sdf-container 同宽） */
.sdf-head--nav .sdf-head__inner {
	position: relative;
}

/* 交回定位权给上面的容器 —— 不改这条，panel 仍会被菜单项捕获 */
.sdf-nav__item--mega-wide {
	position: static;
}

.sdf-mega--wide {
	left: 0;
	right: 0;
	width: auto;
	max-width: none;
}

/* 列改为等分。
 * 原实现是 grid-auto-flow: column + minmax(150px, max-content)，
 * 列的 max-content 增长限制不可收缩，一旦容器被 max-width 钳住，
 * 内容就会溢出让外层裁切。auto-fit + minmax(0, 1fr) 让列可以收缩，
 * 从根上消掉溢出。 */
.sdf-mega--wide .sdf-mega__cols {
	grid-auto-flow: row;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 24px 32px;
}

/* 网格项默认 min-width:auto 会挡住收缩，长词会顶破列宽 */
.sdf-mega--wide .sdf-mega__col {
	min-width: 0;
}

.sdf-mega__inner {
	padding: 24px 28px 28px;
}

/* 分组横向排开：auto-flow: column 让面板按内容撑宽（宽度由 max-content 决定），
 * 若用 auto-fit 网格，shrink-to-fit 容器算不出列宽，会退化成竖排单列。 */
.sdf-mega__cols {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, max-content);
	gap: 24px 44px;
}

.sdf-mega__title {
	margin: 0 0 12px;
	color: var(--sdf-color-heading);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .07em;
	text-transform: uppercase;
}

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

.sdf-mega__link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 3px 0;
	color: var(--sdf-color-text-muted);
	font-size: 14px;
	line-height: 24px;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

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

/* 对标站的一级导航下拉是纯文字列表，不带图标；
 * 图标能力保留给移动端抽屉（那里层级深，图标有辨识价值）。 */
.sdf-mega__link .sdf-ico {
	display: none;
}

.sdf-mega__feature {
	display: none;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. 工具区（收藏 / 购物车 / 账户）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-tools {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex: 0 0 auto;
}

.sdf-tools__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: var(--sdf-color-heading);
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

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

.sdf-tools__icon svg {
	display: block;
}

/* 购物车数量角标（对标站：金色圆点，压在图标右上） */
.sdf-tools__count {
	position: absolute;
	top: 0;
	right: 0;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: var(--sdf-radius-pill);
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
	font-size: 9px;
	font-weight: 500;
	line-height: 16px;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. 全屏搜索面板（移动端）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-search {
	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: 0 6px 18px rgba(0, 0, 0, .08);
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	/* visibility 不参与时长过渡，只做延迟：关闭时等淡出结束再隐藏。
	 * 若让它按 0.3s 过渡，打开瞬间仍是 hidden，JS 里的 input.focus() 会失效。 */
	transition: max-height var(--sdf-t-base) var(--sdf-ease),
		opacity var(--sdf-t-base) var(--sdf-ease),
		visibility 0s var(--sdf-t-base);
}

.sdf-search.is-open {
	max-height: 220px;
	opacity: 1;
	visibility: visible;
	/* 打开时立即可见，focus 才能落到输入框 */
	transition: max-height var(--sdf-t-base) var(--sdf-ease),
		opacity var(--sdf-t-base) var(--sdf-ease),
		visibility 0s;
}

.sdf-search__form {
	display: flex;
	gap: var(--sdf-space-xs);
	padding-block: var(--sdf-space-lg);
}

.sdf-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 var(--sdf-space-md);
	border: 1px solid var(--sdf-color-border);
	background: var(--sdf-color-bg);
	color: var(--sdf-color-text);
	font-family: inherit;
	font-size: var(--sdf-fs-sm);
}

.sdf-search__input:focus {
	outline: none;
	border-color: var(--sdf-color-accent);
}

/* 搜索面板关闭按钮：作为表单 flex 项，触控目标 44×44 */
.sdf-search__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	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-text);
	line-height: 0;
	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),
		transform var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-search__close svg {
	display: block;
}

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

/* 展开时搜索按钮转为激活态（放大镜 → 关闭） */
.sdf-head__searchbtn.is-active {
	background: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 7. 侧边树状菜单（首页 Hero 左侧，对标站 282px 灰底）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-vmenu {
	position: relative;
	flex: 0 0 auto;
	width: 282px;
	background: var(--sdf-color-bg-soft);
	padding: 8px 0;
}

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

.sdf-vmenu__item {
	position: relative;
}

.sdf-vmenu__link {
	display: flex;
	align-items: center;
	gap: 14px;
	height: 56px;
	padding: 0 16px;
	color: var(--sdf-color-heading);
	font-size: 16px;
	letter-spacing: .04em;
	transition: color var(--sdf-t-hover) var(--sdf-ease),
		background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-vmenu__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	color: var(--sdf-color-heading);
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

/* .sdf-ico 是组件层给图标定的默认色（次要灰）与默认尺寸，
 * 这里让图标跟随各自容器，避免侧边菜单 / 卖点条的图标被刷成灰色。 */
.sdf-vmenu__icon .sdf-ico,
.sdf-feats__icon .sdf-ico {
	color: inherit;
}

.sdf-vmenu__txt {
	flex: 1 1 auto;
}

.sdf-vmenu__arrow {
	display: inline-flex;
	flex: 0 0 auto;
	color: var(--sdf-color-heading);
	transition: transform var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-vmenu__item:hover > .sdf-vmenu__link {
	background: var(--sdf-color-bg);
	color: var(--sdf-color-accent);
}

.sdf-vmenu__item:hover > .sdf-vmenu__link .sdf-vmenu__icon,
.sdf-vmenu__item:hover > .sdf-vmenu__link .sdf-vmenu__arrow {
	color: var(--sdf-color-accent);
}

/* 右侧展开的大面板（对标站 1038px，3 列 × 2 行 + 右侧促销卡） */
.sdf-vmenu__panel {
	position: absolute;
	top: 0;
	left: 100%;
	z-index: var(--sdf-z-header);
	display: flex;
	width: 1038px;
	max-width: calc(100vw - 320px);
	min-height: 504px;
	background: var(--sdf-color-bg);
	box-shadow: 0 4px 4px rgba(0, 0, 0, .1);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-8px);
	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-vmenu__item:hover > .sdf-vmenu__panel {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

.sdf-vmenu__cols {
	display: grid;
	flex: 1 1 auto;
	gap: 24px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-content: start;
	padding: 32px 0 32px 40px;
}

.sdf-vmenu__col-title {
	margin: 0 0 10px;
	color: var(--sdf-color-heading);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .07em;
	text-transform: uppercase;
}

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

.sdf-vmenu__col-list a {
	display: block;
	padding: 2px 0;
	color: var(--sdf-color-text-muted);
	font-size: 14px;
	line-height: 26px;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

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

.sdf-vmenu__all {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 6px;
	color: var(--sdf-color-accent);
	font-size: 14px;
}

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

.sdf-vmenu__promo {
	position: relative;
	flex: 0 0 auto;
	width: 300px;
	overflow: hidden;
	background: var(--sdf-color-bg-soft);
}

.sdf-vmenu__promo-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sdf-vmenu__promo-body {
	position: relative;
	z-index: 1;
	padding: 32px 24px;
	text-align: center;
}

.sdf-vmenu__promo-eyebrow {
	display: block;
	font-size: 11px;
	letter-spacing: .28em;
	text-transform: uppercase;
}

.sdf-vmenu__promo-title {
	display: block;
	margin: 8px 0 12px;
	font-family: var(--sdf-font-heading);
	font-size: 22px;
	line-height: 1.35;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-vmenu__promo-link {
	color: var(--sdf-color-heading);
	font-size: 14px;
	text-decoration: underline;
	text-underline-offset: 4px;
}

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

/* ═══════════════════════════════════════════════════════════════════════
 * 8. 主体
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-main {
	display: block;
	min-height: 40vh;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 9. 订阅横幅（页脚上方，对标站浅米底 + 居中标题 + 邮箱输入 + 金色箭头按钮）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-news {
	background-color: var(--sdf-news-bg, #f5ede6);
	color: var(--sdf-color-heading);
	/*
	 * 输入框面板色：必须是本区块自己的变量，不能借用 --sdf-color-bg（页面背景）。
	 * 页面背景是「全站底色」，只要它被设成和本区块同色（米色），或者后台存了
	 * 空白/非法值导致 var() 失效，输入框就会与背景融成一片、看起来「白框消失」。
	 * 这里显式给白色，保证无论页面背景怎么配都可见。
	 */
	--sdf-news-input-bg: #fff;
}

/*
 * 底图：完整展示，不裁切。
 *
 * 【为什么不用 background-image + cover】
 * 底图是 2540×540（4.7:1）的全景图，三颗宝石只占中间约 35%，左右各约 1/3 是
 * 空白米色桌面。cover 的缩放比 = max(容器宽/图宽, 容器高/图高)，移动端窄容器下
 * 这一项由「高度」主导：图片被放大到 2079px 宽再裁到 390px —— 横向裁掉 81%，
 * 只剩中间一颗宝石，左右两颗完全看不见（实测 390/430/768/1280/1440 五个视口
 * 的裁切率分别为 81%/79%/63%/39%/32%，无一例外）。
 *
 * 改用 <img> 后，图片按自身比例自然撑开：无论视口多宽都完整显示，
 * 也无需在 CSS 里硬编码图片宽高比 —— 换任何底图都自动适配。
 */
.sdf-news__media {
	line-height: 0;   /* 消除行内盒在图片下方留出的基线空隙 */
}

.sdf-news__bg {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * 下沿渐隐，把图片过渡到区块底色。
	 * 底图本身是米色桌面（下沿实测 #ecdece），区块底色是 #f5ede6，两者相差约
	 * 29 级色阶，硬拼会露出一条横向接缝。
	 * 只渐隐最下 15%：该区域在底图里是纯桌面留白（宝石约占纵向 12%~59%），
	 * 不会淡到宝石本身；用百分比而非固定像素，各视口下的过渡长度自动等比。
	 */
	-webkit-mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 85%, transparent 100%);
}

.sdf-news__inner {
	padding-block: clamp(48px, 6vw, 96px);
	text-align: center;
}

.sdf-news__title {
	margin: 0 0 6px;
	font-family: var(--sdf-font-heading);
	font-size: clamp(20px, 1.8vw, 24px);
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sdf-news__desc {
	margin: 0 0 24px;
	font-size: 13px;
	letter-spacing: .04em;
}

.sdf-news__form {
	display: flex;
	justify-content: center;
	max-width: 400px;
	margin-inline: auto;
}

.sdf-news__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 18px;
	border: 0;
	/* 用本区块自己的面板色，不跟随页面背景（原因见 .sdf-news 的注释） */
	background: var(--sdf-news-input-bg);
	color: var(--sdf-color-text);
	font-family: inherit;
	font-size: 13px;
}

.sdf-news__input:focus {
	outline: none;
}

.sdf-news__input::placeholder {
	color: var(--sdf-color-text-muted);
	opacity: 1;
}

.sdf-news__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 56px;
	height: 48px;
	padding: 0;
	border: 0;
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
	line-height: 0;
	cursor: pointer;
	transition: background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-news__btn:hover {
	background: var(--sdf-color-heading);
}

.sdf-news__btn svg { display: block; }

.sdf-news__ok {
	margin: 0 0 16px;
	color: var(--sdf-color-success);
	font-size: 13px;
}

/*
 * 有底图时纵向留白收紧。
 *
 * 底图已在上方按原始比例完整撑开（不再靠 288px 上内边距把文案顶到画面下沿），
 * 这里若继续用 48~96px，就会变成「图 + 一大片空白 + 文字」的松散结构。
 * 图片下沿本身还有 15% 渐隐区承担过渡，故上下取同一档更匀称。
 */
.sdf-news--bg .sdf-news__inner {
	padding-block: clamp(28px, 3.5vw, 48px);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. 页脚（对标站：#111 深色，5 列 + 支付条）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-footer {
	background: var(--sdf-footer-bg, #111111);
	color: var(--sdf-footer-text, rgba(255, 255, 255, .72));
	font-size: 13px;
}

.sdf-footer a {
	color: inherit;
	transition: color var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-footer a:hover {
	color: var(--sdf-footer-title, #ffffff);
}

/* 移动端：单列堆叠，且不留行间距 —— 各折叠列之间靠 1px 分隔线相连，
 * 中间插 40px 空隙会把它割成几段孤立的内容，不像一份可折叠清单。
 * 桌面端在 min-width: 900px 里恢复多列与 40px 间距。 */
.sdf-footer__main {
	display: grid;
	gap: 0;
	padding-block: 48px 0;
	grid-template-columns: 1fr;
}

/* 品牌块下方留白，与第一条分隔线拉开。 */
.sdf-footer__brand {
	padding-bottom: 28px;
}

/* 每个可折叠列自带顶部分隔线，与底部条的 border-top 一起构成完整的分隔体系。 */
.sdf-footer__col {
	border-top: 1px solid rgba(255, 255, 255, .12);
}

/* 页脚列标题。
 * 移动端它是一个 52px 高的可点条（下面挂折叠面板），标题与面板之间的间距
 * 已由这条的高度提供，所以这里不留 margin；
 * 桌面端补回 20px 下边距，并把按钮降级成纯文字（见 min-width: 900px 那段）。 */
.sdf-footer__col-title {
	margin: 0;
	color: var(--sdf-footer-title, #ffffff);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.sdf-footer__col-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	/* ≥44px 触控目标。 */
	min-height: 52px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	/* 继承 h3 的字号 / 字重 / 字距 / 大写，避免按钮回落到系统 UI 字体。 */
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	text-align: left;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* 键盘焦点可见：按钮默认轮廓被 border: 0 与 background: none 抹掉了外观，
 * 但 :focus-visible 的轮廓仍在，这里只是把它调成与深色底对比够的高亮色。 */
.sdf-footer__col-btn:focus-visible {
	outline: 2px solid var(--sdf-color-accent);
	outline-offset: 2px;
}

/* 折叠箭头：两根边框拼出的 chevron，不引图标文件。
 * 展开时旋转 180°（45° → 225°），用同一元素转，避免两个图标互换时的跳变。
 * 状态直接读 aria-expanded，不额外维护 class —— 少一处可能与 aria 不同步的地方。 */
.sdf-footer__col-caret {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	margin-right: 3px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-footer__col-btn[aria-expanded="true"] .sdf-footer__col-caret {
	transform: rotate(225deg) translate(-1px, -1px);
}

/* 折叠面板：高度由 JS 驱动（Web Animations API），
 * 这里只负责裁切。用 JS 而不是 transition 的原因与首页图文说明区一致
 * （见 page-clone-home.php 里 .sdf-mosaic__panel 的说明）。 */
.sdf-footer__col-panel {
	overflow: hidden;
}

.sdf-footer__col-panelinner {
	/* 展开时内容与下一条分隔线之间留白；收起时随面板一起被裁掉，不会留空。 */
	padding-bottom: 20px;
}

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

.sdf-footer__col-list li {
	padding: 2px 0;
}

.sdf-footer__col-list a {
	display: inline-block;
	line-height: 24px;
	letter-spacing: .03em;
}

/* 品牌块 */
/* 图标 + 公司名同一行。
 *
 * 字号随视口收缩（22px → 18px）：页脚 5 列并排，品牌列在 1024px 视口下只有约 230px，
 * 固定 22px 的「YOUR BRAND」约 210px 宽，加上 36px 图标与 10px 间距就必然折行，
 * 折成上下两行后与左侧图标错位、像是排版坏了。 */
.sdf-fbrand__head {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 20px;
}

/* 选择器写两层是必需的，不是冗余：
 * WooCommerce 自带 `.woocommerce img { height: auto }` 特异性 (0,1,1)，
 * 会压过单类名规则，把页脚 Logo 还原成 300×300 原图尺寸撑破品牌块
 * （实测窄屏下会撑出 51px 横向溢出）。
 * 前缀必须用真实存在的祖先类 —— `.sdf-fbrand` 只是 BEM 命名空间，
 * 页面上没有这个元素，写成它等于匹配不到任何东西。 */
.sdf-footer__brand .sdf-fbrand__logo {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 36px;
	object-fit: contain;
}

/* 页脚底色近黑，而 Logo 标记是黑色单色图，不反白等于看不见。
 * 页眉 Logo 在白底上不做任何处理，这个类只加在页脚这一份上。 */
.sdf-fbrand__logo--invert {
	filter: brightness(0) invert(1);
}

/*
 * 内置徽标（金色圆形标记）。
 *
 * 与 --invert 的区别：这是彩色透明图，不能反白。
 * 加一圈浅描边把金色边缘与深蓝页脚分开，否则在 36px 尺寸下
 * 金色外圈会融进背景、看起来像缺了一块。
 * 尺寸比单色 logo 略大（44px）：圆形标记在视觉重量上比横向字样轻，
 * 同样高度会显得偏小。
 */
.sdf-fbrand__logo--mark {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: contain;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .14);
}

.sdf-fbrand__name {
	color: var(--sdf-footer-title, #ffffff);
	font-family: var(--sdf-font-heading);
	font-size: clamp(18px, 1.45vw, 22px);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/*
 * 移动端页脚品牌区。
 *
 * 窄屏下品牌块是整页最上方的一栏。徽标 44px 与公司名同排放不下，
 * HUAJIAN BIOTECH 会被挤成两行、看起来像断词；
 * 改为徽标在上、公司名在下，垂直排列后再长的名字也只是一行。
 *
 * 缩写说明里刻意选左对齐而不是居中：页脚其余栏目在移动端仍左对齐，
 * 品牌块单独居中会与下方链接列形成锯齿。
 */
@media (max-width: 767px) {
	.sdf-fbrand__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
		margin-bottom: 16px;
	}

	.sdf-fbrand__logo--mark {
		width: 52px;
		height: 52px;
	}

	.sdf-fbrand__name {
		font-size: 19px;
		letter-spacing: .03em;
		line-height: 1.25;
	}

	/* 特异性提到两层才能压过下方基础规则：
	 * 基础 .sdf-fbrand__about 写在后面，同特异性会反过来覆盖媒体查询。 */
	.sdf-footer__brand .sdf-fbrand__about {
		max-width: none;
		font-size: 12.5px;
		line-height: 1.8;
	}
}

.sdf-fbrand__about {
	margin: 0 0 20px;
	max-width: 330px;
	font-size: 13px;
	line-height: 1.85;
}

.sdf-social {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.sdf-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, .25);
	color: rgba(255, 255, 255, .85);
	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-social__link svg {
	display: block;
	width: 14px;
	height: 14px;
}

.sdf-social__link:hover {
	background: var(--sdf-color-accent);
	border-color: var(--sdf-color-accent);
	color: #fff;
}

/* 联系方式块：左侧图标一列，右侧「小标签 + 内容」纵向排列。
 *
 * 图标必须顶对齐（align-items: flex-start）。默认的 stretch 会把图标盒撑到
 * 与整段等高，图标随即被垂直居中 —— 地址折成三五行时，图标就飘到第二三行旁边、
 * 与首行脱节，看上去像是错位。 */
.sdf-fcontact__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
}

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

.sdf-fcontact__icon {
	display: inline-flex;
	flex: 0 0 auto;
	/* 行高归零：让图标盒高度精确等于 SVG 的 16px，
	 * 从而与右侧小标签的 16px 行框在同一水平线。 */
	line-height: 0;
	/*
	 * 图标色必须是浅色。
	 *
	 * 原来写的是 --sdf-color-accent（品牌深蓝 #17357f），而页脚底色是
	 * #12275c —— 两者对比度只有 1.2:1，图标等于隐形。
	 * 这里改用页脚正文色，与右侧地址文字同色，视线扫下来是连贯的一组。
	 */
	color: var(--sdf-footer-text, #c3cde0);
}

.sdf-fcontact__body {
	min-width: 0;
}

/* 小标签（OFFICE / PHONE / EMAIL）：把三项切开，扫读时一眼知道每段是什么 */
.sdf-fcontact__label {
	display: block;
	margin-bottom: 2px;
	color: var(--sdf-footer-title, #ffffff);
	font-size: 11px;
	line-height: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .72;
}

.sdf-fcontact__value {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	/* 地址里是长英文词（Innovation / Guangzhou），窄列下必须允许断词，
	 * 否则会顶出列宽造成横向溢出。 */
	overflow-wrap: anywhere;
}

/* 电话下方的小字（服务时间） */
.sdf-fcontact__note {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.6;
	opacity: .62;
}

/* 页脚底部：支付图标 + 货币 + 版权 + 法务链接 */
.sdf-footer__bottom {
	display: grid;
	gap: 4px;
	padding-block: 20px 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.sdf-footer__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sdf-space-md);
	padding-block: 8px;
}

.sdf-payments {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.sdf-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
}

.sdf-footer__copy {
	color: rgba(255, 255, 255, .6);
	font-size: 12px;
}

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

.sdf-footer__sep {
	opacity: .4;
}

/* 页脚（深底）里的货币 / 语言切换器走浅色文字 */
.sdf-cur--dark .sdf-cur__toggle {
	background: transparent;
	border-color: rgba(255, 255, 255, .28);
	color: #fff;
}

.sdf-cur--dark .sdf-cur__arrow {
	color: rgba(255, 255, 255, .7);
}

/* 页脚里的货币下拉向上展开。
 *
 * 原因：下拉的「关闭态」只是 opacity:0 + visibility:hidden，元素仍占 159px
 * 布局高度（不能改用 display:none，否则会失去淡入过渡）。而这是页面最底部
 * 的控件，向下展开时那 159px 会伸出页脚之外，把文档滚动高度撑高 77px ——
 * 页面滚到底后，页脚下方就露出一条空白（body 白底透出来）。
 *
 * 改为向上展开后，关闭态那份落在页脚内部，不再产生滚动溢出；
 * 对处在底部的控件来说，向上展开的交互方向也更自然。
 * 阴影方向同步翻转，符合「光从上方来」的视觉习惯。 */
.sdf-footer__bottom .sdf-cur__list {
	top: auto;
	bottom: calc(100% + 6px);
	box-shadow: 0 -4px 12px rgba(0, 0, 0, .18);
	transform: translateY(6px);
}

.sdf-footer__bottom .sdf-cur.is-open .sdf-cur__list {
	transform: translateY(0);
}

/* 窄屏：页脚底行的货币切换器贴近左侧，基类的 right: 0 会让 170px 宽的
 * 下拉从切换器右边界向左铺开，实测左边界到 -56px，超出视口并产生横向滚动。
 * 窄屏改为左对齐，并把宽度收进视口内。 */
@media (max-width: 767px) {
	.sdf-footer__bottom .sdf-cur__list {
		right: auto;
		left: 0;
		width: max-content;
		min-width: 0;
		max-width: calc(100vw - 32px);
	}
}

.sdf-lang--dark .gt_selector {
	color: #fff;
}

/* 移动端抽屉底部是白底，货币 / 语言切换器必须用深色文字 */
.sdf-mobile-nav__footer .sdf-cur--light .sdf-cur__toggle {
	border-color: var(--sdf-color-border);
	color: var(--sdf-color-heading);
}

.sdf-mobile-nav__footer .sdf-lang--light .gt_selector {
	color: var(--sdf-color-heading);
}

/* 抽屉底部的两个切换器要满足移动端触控尺寸（44px 高）。
 * 语言下拉是 GTranslate 的原生 select，页眉那版靠 .sdf-hlang__chev 提供箭头，
 * 抽屉这版没有图标，因此用 CSS 渐变补一个，避免看不出可下拉。 */
.sdf-mobile-nav__footer .sdf-cur__toggle,
.sdf-mobile-nav__footer .sdf-lang .gt_selector {
	height: 44px;
}

.sdf-mobile-nav__footer .sdf-lang .gt_selector {
	min-width: 132px;
	max-width: none;
	padding: 0 22px 0 10px;
	background-image: linear-gradient(45deg, transparent 50%, var(--sdf-color-text-muted) 50%),
		linear-gradient(135deg, var(--sdf-color-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. 鼠标跟随圆点（对标站 .cursor-follower：金色半透明圆，hover 放大 3 倍）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: var(--sdf-z-toast);
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border-radius: 50%;
	background: rgba(201, 162, 54, .3);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--sdf-t-base) var(--sdf-ease);
	will-change: transform;
}

.sdf-cursor.is-on {
	opacity: .6;
}

.sdf-cursor.is-grow {
	opacity: .35;
}

@media (hover: none), (pointer: coarse) {
	.sdf-cursor { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10b. 返回顶部按钮（对标站 .to-top：40×40 方角，滚过 400px 后淡入）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-totop {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: var(--sdf-z-header);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--sdf-color-border);
	border-radius: 0;
	background: var(--sdf-color-bg);
	color: var(--sdf-color-heading);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease),
		visibility var(--sdf-t-base) var(--sdf-ease),
		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-totop.is-on {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* 第三方客服悬浮球（由站内客服插件输出，右下角圆形白底品牌 logo）
 * 与返回顶部按钮同在右下角，fixed 定位相近时白底方角会叠在圆球上，
 * 露出一个「白色方框」——检测到共存的页面把返回顶部按钮上移错开。
 * 悬浮球直径已由 48px 放大到 66px：移动端贴边 12px + 高 66px = 顶边距底 78px，
 * 桌面端贴边 16px + 高 66px = 顶边距底 82px。
 * 此处预留 ≥28px 的清晰间隙，避免返回顶部按钮贴到圆球上造成视觉重叠。 */
body:has(.sicily-chat__launcher) .sdf-totop {
	bottom: 108px;
}

@media (min-width: 1024px) {
	body:has(.sicily-chat__launcher) .sdf-totop {
		bottom: 114px;
	}
}

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

.sdf-totop svg {
	display: block;
	width: 16px;
	height: 16px;
}

@media (min-width: 768px) {
	.sdf-totop {
		right: 32px;
		bottom: 32px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10c. 首屏气泡粒子（对标站 Revolution Slider bubble-effect）
 *      灰 + 品牌金半透明圆点，随机分布，进入时 2s 淡入到 .5 不透明度
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-bubbles {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.sdf-bubble {
	position: absolute;
	display: block;
	border-radius: 50%;
	opacity: 0;
	animation: sdf-bubble-in 2s var(--sdf-ease) forwards;
}

.sdf-bubble--gold { background: var(--sdf-color-accent); }

.sdf-bubble--gray { background: #cccccc; }

@keyframes sdf-bubble-in {
	to { opacity: .5; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10d. 图片懒加载淡入（对标站 .lazy：opacity + 轻微上移，0.3s 缓出）
 *      类名由 sdfrchem-main.js 在图片进入视口时添加，过渡结束即移除
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-img-fade {
	opacity: 0;
	transform: translateY(10px);
}

.sdf-img-fade.is-loaded {
	opacity: 1;
	transform: none;
	transition: opacity var(--sdf-t-base) ease-out,
		transform var(--sdf-t-base) cubic-bezier(.19, 1, .22, 1);
}

@media (prefers-reduced-motion: reduce) {
	.sdf-bubble { animation: none; opacity: .5; }
	.sdf-img-fade { opacity: 1; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10e. 侧栏快捷联系（右侧固定，移动端 + 桌面端）
 *      方角 + 1px 边框 + 悬停填品牌金，与返回顶部按钮同一套视觉语言
 * ═══════════════════════════════════════════════════════════════════════ */

/* 移动端与桌面端都固定显示在右侧中部。
 * 最初只在 ≥1024px 显示（担心窄屏拥挤），实测移动端完全放得下：
 * 三个 44px 按钮共 132px 高，居中后上下仍各留出大片空白。
 * 层级压在页头之下（--sdf-z-header = 100），抽屉(200)/遮罩(190)/弹窗(300)
 * 展开时都能盖住它，不会被它挡住浮层右侧的关闭按钮。 */
.sdf-side {
	position: fixed;
	top: 50%;
	right: 0;
	z-index: 90;
	display: flex;
	flex-direction: column;
	transform: translateY(-50%);
	/* 移动端浮在正文之上（购买区按钮是满宽的，必然与侧栏有 44px 重叠区），
	 * 加一层投影把「浮动层」讲清楚，否则白底图标块压在按钮上会被读成布局错位。
	 * 桌面端正文右侧本就是留白，不需要这层投影，在 ≥1024px 关掉。 */
	box-shadow: var(--sdf-shadow-md);
}

.sdf-side__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 比返回顶部按钮（40px）大一档：那是辅助动作，这是主要联系入口，热区给足。
	 * 移动端取 44px（WCAG 2.5.5 的触控目标下限），桌面端放宽到 48px。 */
	width: 44px;
	height: 44px;
	border: 1px solid var(--sdf-color-border);
	background: var(--sdf-color-bg);
	color: var(--sdf-color-heading);
	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);
}

/* 相邻按钮共用一条边线，整体读起来是一根竖条，而不是三个孤立方块。
 * 负 margin 让边框重叠 1px；hover 时把该项 z-index 提到 1，
 * 否则它的金色边框会被下一个按钮的上边框盖掉一条。 */
.sdf-side__link + .sdf-side__link {
	margin-top: -1px;
}

.sdf-side__link:hover,
.sdf-side__link:focus-visible {
	z-index: 1;
	border-color: var(--sdf-color-accent);
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
}

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

.sdf-side__ico {
	display: inline-flex;
}

.sdf-side__ico svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* 悬停时向左滑出的文字标签。
 *
 * 初始用 opacity + translateX 隐藏，而不是把标签推到按钮底下再用容器裁切：
 * 后者需要 overflow: hidden，但触发按钮与标签是同层兄弟，裁切会把标签一起裁掉；
 * 若改用外层容器裁切，又会在按钮右侧留出一条可滚动区域。
 * 淡入 + 位移更简单，也不会撑出横向滚动条。 */
.sdf-side__label {
	position: absolute;
	top: 50%;
	/* 贴在按钮左侧（不是右侧）：按钮紧贴屏幕右缘，标签放右边会被推出视口。 */
	right: 100%;
	margin-right: 10px;
	padding: 9px 14px;
	/* 底色用品牌金、文字用 --sdf-accent-text，这两者是配套的一对：
	 * accent-text 的语义就是「强调色底上的文字色」，后台「外观配色」会按
	 * 金色底反算出一个达标色（本站在金底上算出来是深色 #1a1a1a，因为白字
	 * 压金底只有 2.2:1 不达标）。
	 * 反过来说，深色底绝不能用它 —— 那样会得到深底深字，文字直接看不见。 */
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
	font-size: var(--sdf-fs-xs);
	line-height: 1;
	letter-spacing: .06em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translate(10px, -50%);
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-side__link:hover .sdf-side__label,
.sdf-side__link:focus-visible .sdf-side__label {
	opacity: 1;
	transform: translate(0, -50%);
}

@media (min-width: 1024px) {
	.sdf-side {
		/* 正文右侧是留白，不需要浮动投影，保持与返回顶部按钮同一套扁平语言 */
		box-shadow: none;
	}

	.sdf-side__link {
		width: 48px;
		height: 48px;
	}
}

/* 触屏 / 无悬停设备：只保留图标，不输出悬停标签与二维码卡。
 * 标签/二维码卡靠 hover 滑出，这类设备上永远读不到文字；而部分移动端浏览器在点按后
 * 会触发「粘滞 hover」，把卡片点亮不放手，比不显示更糟。
 * 注意：这里选择器带 .sdf-side 前缀抬高特异性 —— 因为 .sdf-side__qr 的基础样式
 * （display:flex）定义在本文件更靠后的位置，同特异性会被源序覆盖回可见。
 * 侧栏本身在移动端是要显示的，不做整条隐藏。 */
@media (hover: none) {
	.sdf-side__label,
	.sdf-side .sdf-side__label,
	.sdf-side__qr,
	.sdf-side .sdf-side__qr {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * WhatsApp 悬停二维码卡（桌面 hover 设备）
 *
 * 与文字标签同一套「向左滑出」语言，但内容升级为：品牌小字 + 二维码 + 提示行。
 * 二维码里已经带 Logo，卡片保持白底细边 + 一层浅投影，不加多余装饰。
 * 只在 hover 设备出现 —— 触屏设备的入口是下方的底部抽屉（.sdf-waqr）。
 * ═══════════════════════════════════════════════════════════════════════ */
.sdf-side__link--wa .sdf-side__label {
	display: none; /* WA 项的文字说明并入二维码卡头，不再单独出标签 */
}

.sdf-side__qr {
	position: absolute;
	top: 50%;
	right: 100%;
	margin-right: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 7px;
	width: 156px;
	padding: 12px 12px 10px;
	background: var(--sdf-color-bg);
	border: 1px solid var(--sdf-color-border-soft);
	box-shadow: 0 14px 34px -14px rgba(0, 0, 0, .35);
	opacity: 0;
	pointer-events: none;
	transform: translate(10px, -50%);
	transition: opacity var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease);
}

.sdf-side__link--wa:hover .sdf-side__qr,
.sdf-side__link--wa:focus-visible .sdf-side__qr {
	opacity: 1;
	transform: translate(0, -50%);
}

.sdf-side__qr-img {
	display: block;
	width: 132px;
	height: auto;
}

.sdf-side__qr-brand {
	color: var(--sdf-color-accent);
	font-size: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	line-height: 1;
}

.sdf-side__qr-hint {
	color: var(--sdf-color-text-muted);
	font-size: 11px;
	line-height: 1.4;
	text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════
 * WhatsApp 二维码底部抽屉（触屏设备）
 *
 * 触屏没有 hover，点 WA 图标时 main.js 拦下跳转、打开这层抽屉：
 * 大图二维码（方便另一台手机扫）+ 保留 Open WhatsApp 原始跳转按钮。
 * 桌面 hover 设备不需要它 —— 悬停已能看到二维码，点击直接跳。
 * 层级取 --sdf-z-modal（300）：打开时盖过页头与侧栏，与既有弹窗同级。
 * ═══════════════════════════════════════════════════════════════════════ */
.sdf-waqr {
	position: fixed;
	inset: 0;
	z-index: var(--sdf-z-modal, 300);
}

.sdf-waqr__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(17, 17, 17, .45);
}

.sdf-waqr__sheet {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 30px 24px calc(24px + env(safe-area-inset-bottom, 0px));
	background: var(--sdf-color-bg);
	border-top: 1px solid var(--sdf-color-border-soft);
	border-radius: 16px 16px 0 0;
	transform: translateY(0);
	animation: sdf-waqr-up .3s var(--sdf-ease);
}

@keyframes sdf-waqr-up {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

.sdf-waqr__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--sdf-color-heading);
	cursor: pointer;
}

.sdf-waqr__close svg {
	width: 20px;
	height: 20px;
}

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

.sdf-waqr__img {
	display: block;
	width: 220px;
	height: auto;
}

.sdf-waqr__hint {
	max-width: 30ch;
	color: var(--sdf-color-text-muted);
	font-size: 13px;
	line-height: 1.6;
	text-align: center;
}

.sdf-waqr__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 200px;
	height: 46px;
	padding: 0 26px;
	background: var(--sdf-color-accent);
	color: var(--sdf-accent-text);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--sdf-t-hover) var(--sdf-ease);
}

.sdf-waqr__btn:hover {
	background: var(--sdf-color-heading);
	color: var(--sdf-color-bg);
}

/* 桌面（hover 设备）整层抽屉不需要：隐藏，不占焦点树。 */
@media (hover: hover) and (pointer: fine) {
	.sdf-waqr {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 11. 移动端抽屉补充（主体结构在 components.css）
 * ═══════════════════════════════════════════════════════════════════════ */

.sdf-mobile-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sdf-font-heading);
	font-size: 20px;
	letter-spacing: .12em;
	text-transform: uppercase;
	/* 抽屉宽度只有 335px，品牌名较长时（如 HUAJIAN BIOTECH）会被压成两行，
	 * 与左侧徽标视觉错位。这里锁单行并允许收缩字距，宁可字小也不折行。 */
	white-space: nowrap;
	min-width: 0;
}

.sdf-mobile-nav__brand > span {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 同 `.sdf-logo__mark`：两层选择器用于压过 WooCommerce 的 img 高度重置。 */
.sdf-mobile-nav .sdf-mobile-nav__mark {
	display: block;
	flex: 0 0 auto;
	width: auto;
	height: 30px;
	object-fit: contain;
}

.sdf-mobile-nav__footer {
	display: grid;
	gap: var(--sdf-space-md);
	margin-top: auto;
	padding: var(--sdf-space-md);
	border-top: 1px solid var(--sdf-color-border-soft);
}

.sdf-mobile-nav__account {
	display: inline-flex;
	align-items: center;
	gap: var(--sdf-space-xs);
	color: var(--sdf-color-heading);
	font-size: var(--sdf-fs-sm);
	letter-spacing: var(--sdf-ls-wide);
	text-transform: uppercase;
}

.sdf-mobile-nav__account svg {
	width: 18px;
	height: 18px;
}

.sdf-mobile-nav__footer .sdf-cur__list {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	padding: 0;
	margin-top: 6px;
	display: none;
}

.sdf-mobile-nav__footer .sdf-cur.is-open .sdf-cur__list {
	display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 12. 断点扩展（移动优先，这里往上加）
 * ═══════════════════════════════════════════════════════════════════════ */

/* 平板：抽屉还在，页头保留两排但收窄 */
@media (max-width: 1023px) {
	.sdf-header {
		top: calc(-1 * var(--sdf-head-main-h));
	}

	.sdf-hsearch,
	.sdf-head__side {
		display: none;
	}

	.sdf-head__searchbtn {
		display: inline-flex;
	}

	.sdf-head--main > .sdf-head__inner {
		justify-content: space-between;
	}
}

/* Logo 缩放：上排高度固定 96px 不随滚动收缩，但窄屏要腾出空间给
 * 汉堡按钮、搜索按钮与工具区，因此按断点递减图标与字号。
 * 副行是 31 字的公司全称，是宽度主导项，所以字距同步收窄。 */
@media (max-width: 767px) {
	.sdf-logo {
		gap: 9px;
	}

	.sdf-logo .sdf-logo__mark {
		height: 34px;
	}

	.sdf-logo__name {
		font-size: 17px;
	}

	/* 副行字号必须按 0.405 的比例跟随主行（17 × 0.405 ≈ 6.9），
	 * 两行的字距都用 em，比例才能整体等比缩放、右端始终对齐。 */
	.sdf-logo__tagline {
		font-size: 6.9px;
	}
}

@media (max-width: 479px) {
	.sdf-logo {
		gap: 8px;
	}

	.sdf-logo .sdf-logo__mark {
		height: 30px;
	}

	.sdf-logo__name {
		font-size: 15px;
	}

	/* 同上：15 × 0.405 ≈ 6.1 */
	.sdf-logo__tagline {
		font-size: 6.1px;
	}
}

/* 触控目标：移动端可点元素热区一律 ≥ 44×44。
 * 图标视觉尺寸不动（对齐对标站），只放大按钮本体 / 补内边距。 */
@media (max-width: 1023px) {
	.sdf-burger,
	.sdf-head__searchbtn {
		width: 44px;
		height: 44px;
	}

	.sdf-social__link {
		width: 44px;
		height: 44px;
	}

	.sdf-mobile-nav__account {
		min-height: 44px;
		padding-block: 10px;
	}

	.sdf-footer__col-list a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}
}

/* 桌面：显示主导航，隐藏汉堡 */
@media (min-width: 1024px) {
	.sdf-burger { display: none; }

	.sdf-nav { display: flex; }
}

/* 平板：页脚转多列，折叠功能整体关闭 —— 所有列表始终展开。
 * 下面把移动端的折叠外观逐项撤销：按钮降级成纯文字标题、隐藏箭头、
 * 面板不再裁切、恢复多列间距与各列顶部无分隔线。
 * 断点取 900px，与页脚由单列转多列的断点保持一致。 */
@media (min-width: 900px) {
	.sdf-footer__main {
		gap: 32px;
		padding-block: 96px 56px;
		/* 900~1099 用两列 + 品牌整行：
		 * 品牌 + 3 个链接列 + 联系方式共 5 个区块，两列正好排成
		 * 「品牌一行 / 链接列两两一行 / 剩下一个链接列与联系方式一行」，版式均衡。
		 *
		 * 这一段刻意不上 5 列：1100px 以下 5 列并排会把品牌列压到 230px 以内、
		 * 联系方式列压到 230px 左右，前者导致公司名折行与图标错位，
		 * 后者让地址又折回 5 行（见下面 1100px 断点的说明）。 */
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sdf-footer__brand {
		grid-column: 1 / -1;
		padding-bottom: 0;
	}

	.sdf-footer__col {
		border-top: 0;
	}

	.sdf-footer__col-title {
		margin: 0 0 20px;
	}

	.sdf-footer__col-btn {
		display: block;
		width: auto;
		min-height: 0;
		/* 桌面端内容本就全部展开，点击没有意义。
		 * 让指针穿透，免得鼠标变手型误导用户以为这里能点；
		 * 键盘可达性由 JS 一并撤掉（设 tabindex="-1"）。 */
		pointer-events: none;
		cursor: default;
	}

	.sdf-footer__col-caret {
		display: none;
	}

	.sdf-footer__col-panel {
		overflow: visible;
	}

	.sdf-footer__col-panelinner {
		padding-bottom: 0;
	}
}

/* ≥1100px：页脚 5 列（品牌 + 3 个链接列 + 联系方式），宽屏不再改列数。
 *
 * 断点取 1100 而不是 1024：实测 1024px 下 5 列并排，联系方式列只有 229px，
 * 100 多字符的地址会折成 5 行 —— 那正是本次要修掉的问题，不能在平板竖屏上又出现。
 * 所以 900~1099 继续用上面那套 2 列布局（联系方式列宽 480px，地址只占 2 行）。
 *
 * 列宽配比按两个约束反推：
 *   - 品牌列要放得下 Logo + 「YOUR BRAND」（约 218px），取 1.6fr；
 *   - 联系方式列要放得下地址（3 行以内需约 280px），取 1.9fr。 */
@media (min-width: 1100px) {
	.sdf-footer__main {
		grid-template-columns:
			minmax(0, 1.6fr)
			repeat(3, minmax(0, 0.95fr))
			minmax(0, 1.9fr);
	}

	.sdf-footer__brand {
		grid-column: auto;
	}
}

@media (min-width: 1200px) {
	.sdf-footer__main {
		gap: 40px;
	}
}

/* 刘海屏安全区：抽屉底部避让 home indicator */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
	.sdf-mobile-nav {
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 右下角浮动栈（Dock）
 *
 * 站内有三个组件同事占据右侧：
 *   1. AI 客服圆钮（插件输出，fixed bottom 16 / right 16 / 56px）
 *   2. 回到顶部按钮
 *   3. 侧边快捷联系条
 *
 * 三者若各自写 bottom，任何一个改尺寸都会压到别人（实测移动端
 * 联系条与客服钮完全重叠，客服按钮被压住点不到）。所以这里把纵向位置
 * 抽成一组常量，按"从下往上"叠加推导，谁在上面一目了然：
 *
 *   --sdf-dock-gap  : 组件之间 12px
 *   --sdf-chat-size : 客服圆钮 56px（插件 chat.css 里的 --launcher 尺寸）
 *   --sdf-top-size  : 回到顶部 44px
 *
 * 桌面与移动端只改这三个常量，三个组件的 bottom 全部跟着走。
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
	/*
	 * 三个值的来历（都是实测出来的，不是估的）：
	 *
	 * edge = 16：插件 chat.css 里 `--sdfj-chat-gap: 16px`，圆钮的右边缘距
	 *   视口右边正好 16px。回到顶部与联系条必须用同一个值，
	 *   否则三个圆钮右边缘会差 2–4px，肉眼能看出没对齐。
	 *
	 * gap = 22：插件圆钮的 bottom 并不严格等于 16px —— 受
	 *   `env(safe-area-inset-bottom)` 与视口高度取整影响，实测落在 22px。
	 *   若按 16 算，回到顶部与圆钮的间距会被吃掉 6px（实测只剩 8px，看起来快贴住）。
	 *   取 22 把这段误差补回来，实际间距稳定在 16px 以上。
	 *
	 * chat-size = 60：必须与 chat.css 里 .sdfj-chat__launcher 的宽高一致。
	 *   两处任改一处都要同步，否则回到顶部会压到圆钮上。
	 */
	--sdf-dock-gap: 22px;
	--sdf-chat-size: 60px;
	--sdf-top-size: 44px;
	--sdf-dock-edge: 16px;

	/*
	 * 由下往上推导。只推导「回到顶部」一个位置 ——
	 * 侧边联系条不参与这个栈，它常驻视口垂直居中（见下方 .sdf-side）。
	 */
	--sdf-chat-bottom: var(--sdf-dock-edge);
	--sdf-top-bottom: calc(var(--sdf-chat-bottom) + var(--sdf-chat-size) + var(--sdf-dock-gap));
}

/* ── 回到顶部 ── */

.sdf-totop {
	position: fixed;
	right: var(--sdf-dock-edge);
	bottom: var(--sdf-top-bottom);
	z-index: 95;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--sdf-top-size);
	height: var(--sdf-top-size);
	padding: 0;
	border: 1px solid var(--sdf-color-border);
	border-radius: 50%;
	background: #fff;
	color: var(--sdf-color-accent);
	cursor: pointer;
	box-shadow: var(--sdf-shadow-md);
	transition:
		opacity var(--sdf-t-base) var(--sdf-ease),
		transform var(--sdf-t-base) var(--sdf-ease),
		background-color var(--sdf-t-hover) var(--sdf-ease),
		color var(--sdf-t-hover) var(--sdf-ease);
}

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

/*
 * 显隐只认一个开关：hidden 属性（main.js 滚过一屏才移除）。
 *
 * 不要再引入 body 上的状态类做第二套控制 —— 之前就是「类 + hidden」两套
 * 同时存在，互相覆盖，最后按钮点了没反应。基础样式里 opacity:0/visibility:hidden
 * 是为了 hover 过渡起点，这里用 :not([hidden]) 一次性翻过来。
 */
.sdf-totop:not([hidden]) {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sdf-totop:hover {
	background: var(--sdf-color-accent);
	color: #fff;
	transform: translateY(-2px);
}

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

/* ── 侧边联系条：常驻右侧中部边缘 ── */

/*
 * 与「回到顶部」是两种性质，逻辑必须分开：
 *
 *   联系条（WhatsApp / 电话 / 邮件）—— 常驻。客户在首屏就可能想直接联系，
 *     藏起来等于把最快的转化入口收走。位置取视口垂直居中、贴右缘，
 *     不进下面的浮动栈，也不参与任何滚动显隐。
 *
 *   回到顶部 —— 滚过一屏才出现（见 .sdf-totop 与 main.js）。
 *     页面本来就在顶部时它没有意义。
 *
 * transform 必须是 translateY(-50%)：它是居中的实现手段，
 * 任何「显示态」规则都不能把它覆盖成 none，否则整条会掉到视口下半部、
 * 直接压住客服圆钮。这也是之前浮动栈写法最容易踩的一处。
 */
.sdf-side {
	position: fixed;
	top: 50%;
	right: var(--sdf-dock-edge);
	bottom: auto;
	z-index: 94;
	display: flex;
	flex-direction: column;
	transform: translateY(-50%);
	/* 投影不在这里写：基础样式（§10e）已定义，并在 ≥1024px 关掉 ——
	 * 桌面正文右侧本就是留白，不需要靠投影区分层级。 */
}

@media (max-width: 767px) {
	:root {
		/* 移动端插件用 --sdfj-chat-gap: 12px，这里必须跟它一致才能右边缘对齐。 */
		--sdf-dock-gap: 16px;
		--sdf-chat-size: 60px;
		--sdf-top-size: 40px;
		--sdf-dock-edge: 12px;
	}

	.sdf-side {
		right: var(--sdf-dock-edge);
	}

	/* 移动端右侧横向空间紧张：三个圆形按钮竖排已经很长，
	 * 只保留第一个（WhatsApp，转化率最高），其余收进它自己的跳转里。
	 * 电话/邮箱在页脚与联系页都有入口，不必在浮层里重复三次。 */
	.sdf-side__link {
		width: 42px;
		height: 42px;
		border-radius: 50%;
	}

	.sdf-side__link + .sdf-side__link {
		display: none;
	}

	.sdf-side__label,
	.sdf-side__qr {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 移动端收尾修正
 *
 * 三处都是实测发现的真实问题（不是防御性代码）：
 *   1. 页头两行（89+56=145px）占掉 844px 屏高的 17%
 *   2. 收藏入口在 B2B 站属于低价值动作（根本没有收藏需求）
 * ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {
	/* 1. 页头第二行（导航条）在移动端只剩工具图标，压到 44px 高。
	 *    导航本身已由汉堡 + 抽屉承担，这一条只负责购物车与账户入口。 */
	.sdf-head--nav > .sdf-head__inner {
		height: 44px;
	}

	.sdf-tools {
		gap: 4px;
	}

	.sdf-tools__icon {
		width: 34px;
		height: 34px;
	}

	/* 2. B2B 站没有"收藏商品"的真实场景，移动端隐藏收藏入口 */
	.sdf-tools__icon--wish {
		display: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
 * 客服面板展开时，浮动件让位
 *
 * 面板高度接近一屏，会盖住回到顶部与联系条。被盖住的按钮仍可点击，
 * 但视觉上就是"几个东西叠在一起"，看起来像坏了。
 * 用 :has() 直接读插件挂在根节点的 data-open，不改插件 JS。
 *
 * 位置必须在文件最末尾：这条选择器特异性 (0,3,1)，高于上方
 * .sdf-totop:not([hidden]) 的 (0,2,0)，靠"后写者胜 + 更高特异性"才能压过它 ——
 * 否则实测 .sdf-side 已隐藏、而 .sdf-totop 仍留在面板右缘露一个白方块。
 * ═══════════════════════════════════════════════════════════════════════ */

body:has(.sdfj-chat[data-open="1"]) .sdf-totop:not([hidden]),
body:has(.sdfj-chat[data-open="1"]) .sdf-side {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}