/**
 * YXS B2B Table — 前台样式
 *
 * 所有规则均以 .yxs-b2b- 前缀做作用域隔离，避免与站点主题冲突
 * （PRD 9.1 风险应对）。
 * 使用 CSS 变量便于运营在后台调整主色。
 */

.yxs-b2b-wrap {
	/*
	 * 调色板跟随站点主题。
	 *
	 * 站点是黑白灰单色系（Astra 全局色：链接 #000、标题/正文 #222、
	 * 浅底 #f8f8f8、白底 #fff），所以这里直接引用主题的全局色变量，
	 * 运营在主题里改配色时插件自动跟随，不需要回来改插件。
	 * 第二个参数是本地开发 / 非 Astra 主题时的回落值。
	 */
	--yxs-primary: var( --ast-global-color-0, #111111 );
	--yxs-primary-dark: var( --ast-global-color-7, #000000 );
	--yxs-accent: var( --ast-global-color-8, #333333 );
	--yxs-heading: var( --ast-global-color-2, #222222 );
	--yxs-text: var( --ast-global-color-3, #222222 );
	--yxs-bg: var( --ast-global-color-5, #ffffff );
	--yxs-bg-alt: var( --ast-global-color-4, #f8f8f8 );

	/*
	 * 语义色不跟随主题：站点是单色的，若警示色也变灰就彻底失去了区分度。
	 * 「缺货 / 库存紧张 / 有货」必须靠颜色一眼分辨。
	 */
	--yxs-warn: #b3261e;
	--yxs-warn-bg: #fdecea;
	--yxs-ok: #2e7d32;
	--yxs-ok-bg: #edf7ee;
	--yxs-notice-bg: #f7f7f7;
	--yxs-notice-border: #d8d8d8;

	--yxs-muted: #767676;
	--yxs-border: #e4e4e4;
	--yxs-border-strong: #c9c9c9;
	--yxs-radius: 6px;
	--yxs-row-h: 44px;

	font-size: 14px;
	line-height: 1.6;
	color: var(--yxs-text);
	box-sizing: border-box;
	/*
	 * v4.13.1：「底色」= 整本手册的底，明/暗主题都生效（--yxs-cat-bg 由后台按主题注入）。
	 * 留空时透明，跟随页面/Astra 背景，保持原有观感。
	 */
	background: var(--yxs-cat-bg, transparent);
}

.yxs-b2b-wrap *,
.yxs-b2b-wrap *::before,
.yxs-b2b-wrap *::after {
	box-sizing: inherit;
}

/*
 * ⚠️ 关键：让 HTML 的 hidden 属性真正生效。
 *
 * hidden 属性是靠浏览器默认样式表的 `display: none` 生效的，属于**最低优先级**；
 * 只要作者 CSS 给该元素设了 display，hidden 就完全失效。
 *
 * 本插件踩过这个坑：询价弹窗与底部操作条都写了 `hidden` 属性，
 * 但它们的 CSS 里设了 `display: flex` → hidden 被压制 → 弹窗一进页面就铺满全屏，
 * 而 JS 里关闭弹窗只是移除 hidden 属性，视觉上毫无变化，表现为「弹窗关不掉」。
 * 操作条同样一直显示着「0 个 SKU 已选」。
 *
 * 这条规则优先级高于下面所有 display:flex 声明，且用 !important 兜底，
 * 保证「无 JS 时默认不可见」——弹窗与操作条都靠 JS 移除 hidden 才出现，
 * 属于渐进增强，绝不会出现关不掉的遮罩层。
 */
[data-yxs-b2b][hidden],
.yxs-b2b-modal[hidden],
.yxs-b2b-tier-pop[hidden],
.yxs-b2b-actionbar[hidden] {
	display: none !important;
}

/*
 * 解除主题强加的「正文内容宽度」上限。
 *
 * 现网（Astra）在「页面构建器模板」页上有一条规则：
 *   .ast-page-builder-template .entry-content[data-ast-blocks-layout]
 *     > .inherit-container-width > *  (实际选择器覆盖多层后代)
 *   { max-width: var(--wp--custom--ast-content-width-size); margin-left:auto; margin-right:auto }
 * 它会把正文里的多层子元素统一压到站点的内容宽度（实测 1000px）并居中。
 * 实测页面实际可用宽度是 1400px，被这条规则压掉 400px，
 * 直接导致「图案 × 机型」矩阵右边两列被切、必须横向拖动才能看到。
 *
 * 选择器只用单独一个类，优先级低于主题那条，因此必须 !important。
 * 作用范围限定在插件容器及其两层子元素内，不影响站点的其他内容。
 * 只重置 max-width 即可：失去上限后块级元素自然占满父容器，auto 外边距归零。
 */
.yxs-b2b-wrap,
.yxs-b2b-wrap > *,
.yxs-b2b-wrap > * > * {
	max-width: none !important;
}

/*
 * 全宽模式。
 *
 * 主题把正文容器限在约 1000px，而「图案 × 机型」矩阵需要 1100px 以上，
 * 右列会被切掉。这里用负外边距把容器对称突破到视口宽度，
 * 让桌面端一屏放下全部机型列。
 *
 * 左右各留 16px 内边距，避免内容贴屏边。
 *
 * ⚠️ 这条负外边距在站上**从未生效过**（v4.2.6 实测 margin 计算值 = 0px）：
 * 主题的 .entry-content[data-ast-blocks-layout] > * 写了
 * `margin-left:auto; margin-right:auto`，优先级 (0,2,0) 高于本选择器的 (0,1,0)。
 * 桌面端容器本来就够宽（auto 外边距在 max-width:none 后归零）看不出问题，
 * 移动端则白白多出主题那 20px —— 移动端已在媒体查询里改用
 * `--yxs-outset`（由 b2b.js 实测）加 !important 顶掉，见下方。
 *
 * 桌面端**故意不动**：那里有占位滚动条，100vw 比可视宽度大一个滚动条，
 * 照着出血反而会多出约半个滚动条宽度的横向溢出。
 */
.yxs-b2b-wrap--full {
	margin-left: calc( ( 100% - 100vw ) / 2 );
	margin-right: calc( ( 100% - 100vw ) / 2 );
	padding-left: 16px;
	padding-right: 16px;
}

/* ---------- 页头（当前渠道与货盘） ---------- */

.yxs-b2b-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.yxs-b2b-head__back {
	display: inline-block;
	margin-bottom: 4px;
	font-size: 12px;
	color: var(--yxs-muted);
	text-decoration: none;
}

.yxs-b2b-head__back:hover {
	color: var(--yxs-primary);
}

.yxs-b2b-head__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
	color: var(--yxs-heading);
}

.yxs-b2b-head__desc {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--yxs-muted);
}

.yxs-b2b-head__right {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.yxs-b2b-chip {
	display: inline-block;
	padding: 3px 10px;
	border: 1px solid var(--yxs-border-strong);
	border-radius: 999px;
	font-size: 12px;
	line-height: 1.6;
	color: var(--yxs-text);
	background: var(--yxs-bg);
	white-space: nowrap;
}

.yxs-b2b-chip--channel {
	background: var(--yxs-primary);
	border-color: var(--yxs-primary);
	color: #fff;
}

/* ---------- 货盘列表页 ---------- */

.yxs-b2b-gate {
	max-width: 860px;
}

/* v4.7.0：标题行 + 右上角手册入口（提示在左、按钮在右）。 */
.yxs-b2b-gate__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

.yxs-b2b-gate__top .yxs-b2b-gate__title {
	margin: 0;
}

.yxs-b2b-gate__top .yxs-b2b-gate__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.yxs-b2b-gate__title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.35;
	color: var(--yxs-heading);
}

.yxs-b2b-gate__meta {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 10px;
}

.yxs-b2b-gate__intro {
	margin: 0 0 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--yxs-muted);
}

.yxs-b2b-gate__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin: 16px 0 0;
}

.yxs-b2b-gate__selfpick {
	margin: 0;
}

.yxs-b2b-gate-wrap {
	padding: 24px 0;
}

.yxs-b2b-pallets {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 12px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

/*
 * ⚠️ 上面那条「padding: 0」在站上**不生效**（v4.2.6 实测货盘列表左内边距 = 40px）。
 *
 * 主题（Astra）的内联样式里有
 *   .entry-content ul, .entry-content ol { padding: revert; margin: revert }
 * 优先级 (0,1,1)，比 .yxs-b2b-pallets 的 (0,1,0) 高一级，把我们的重置压掉了。
 * `revert` = 回到浏览器默认：ul 左内边距 40px、上下外边距 1em。
 * 后果：390px 屏上货盘卡片从 x=76 才开始，右边还空一大块，看着就是"两边留白特别宽"。
 *
 * 修法是把选择器提到 (0,2,0) 压回去（与 max-width 那条用 !important 是同一个对手，
 * 但这里不必用 !important，只要优先级高一级即可）。
 */
.yxs-b2b-wrap .yxs-b2b-pallets {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.yxs-b2b-pallet {
	display: flex;
}

.yxs-b2b-pallet__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: 100%;
	padding: 16px;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	background: var(--yxs-bg);
	text-decoration: none;
	transition: border-color 0.15s, box-shadow 0.15s;
}

.yxs-b2b-pallet__link:hover {
	border-color: var(--yxs-primary);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.yxs-b2b-pallet__name {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	font-weight: 700;
	color: var(--yxs-heading);
}

.yxs-b2b-pallet__badge {
	padding: 1px 6px;
	border-radius: 3px;
	background: var(--yxs-bg-alt);
	font-size: 11px;
	font-style: normal;
	font-weight: 500;
	color: var(--yxs-muted);
}

.yxs-b2b-pallet__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--yxs-text);
}

.yxs-b2b-pallet__meta {
	margin-top: auto;
	padding-top: 6px;
	font-size: 12px;
	color: var(--yxs-muted);
}

/*
 * 货盘卡片上的「推荐理由」。
 *
 * 本站是黑白灰单色系，所以用**边框 + 浅底**做区分，不用强调色。
 * 「推荐」标签做成小方块前缀，扫一眼就能看到这句是推荐语、而不是货盘说明。
 */
.yxs-b2b-pallet__reason {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 5px 8px;
	border: 1px solid var(--yxs-border);
	border-radius: 3px;
	background: var(--yxs-bg-alt, #f6f6f6);
	font-size: 12px;
	line-height: 1.5;
	color: var(--yxs-heading);
}

.yxs-b2b-pallet__reason-tag {
	flex: 0 0 auto;
	padding: 0 5px;
	border-radius: 2px;
	background: var(--yxs-bg, #f1f1f1);
	color: var(--yxs-muted);
	font-style: normal;
	font-size: 11px;
	line-height: 1.6;
}

/*
 * 选品卡片的货值行。
 *
 * 客户拿选品是去谈上游报价 / 备货的，「总共多少钱」是他最关心的数，
 * 所以比上面那行计数更醒目，但**不能用强调色**——
 * 本站是黑白灰单色系，用字号与字重区分层级即可。
 */
.yxs-b2b-pallet__value {
	padding-top: 2px;
	font-size: 13px;
	font-weight: 700;
	color: var(--yxs-heading);
}

.yxs-b2b-pallet--empty {
	align-items: center;
	padding: 16px;
	border: 1px dashed var(--yxs-border-strong);
	border-radius: var(--yxs-radius);
	font-size: 13px;
	color: var(--yxs-muted);
}

/* 选择货盘页：顶部「浏览商品手册」入口 */
.yxs-b2b-gate__actions {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
	flex-wrap: wrap;
}

.yxs-b2b-gate__hint {
	font-size: 12px;
	color: var(--yxs-muted);
}

/* 货盘卡片：右上角「看图册」胶囊 */
.yxs-b2b-pallet {
	position: relative;
}

.yxs-b2b-pallet__catalog {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: 12px;
	font-weight: 600;
	color: var(--yxs-heading);
	text-decoration: none;
	border: 1px solid var(--yxs-border-strong);
	border-radius: 999px;
	padding: 3px 10px;
	background: var(--yxs-bg);
	transition: border-color 0.15s, color 0.15s;
}

.yxs-b2b-pallet__catalog:hover {
	border-color: var(--yxs-heading);
}

/* ---------- 我的选品（客户自建） ---------- */

.yxs-b2b-mine {
	margin: 22px 0 8px;
	padding-top: 18px;
	border-top: 1px solid var(--yxs-border);
}

.yxs-b2b-mine__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 12px;
}

.yxs-b2b-mine__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 18px;
	line-height: 1.35;
	color: var(--yxs-heading);
}

.yxs-b2b-mine__count {
	padding: 1px 8px;
	border-radius: 10px;
	background: var(--yxs-bg-alt);
	font-size: 12px;
	font-weight: 500;
	color: var(--yxs-muted);
}

.yxs-b2b-mine__empty {
	margin: 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--yxs-muted);
}

/* 选品卡片：复用货盘网格，链接区与操作区分两段，按钮并排。 */
.yxs-b2b-pallet--mine {
	display: flex;
	flex-direction: column;
}

.yxs-b2b-pallet--mine .yxs-b2b-pallet__link {
	flex: 1 1 auto;
}

.yxs-b2b-pallet__ops {
	display: flex;
	gap: 6px;
	padding: 8px 16px 14px;
	border: 1px solid var(--yxs-border);
	border-top: 0;
	border-radius: 0 0 var(--yxs-radius) var(--yxs-radius);
	background: var(--yxs-bg);
}

/* ---------- 选品弹窗 ---------- */

.yxs-b2b-sel-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.45);
}

.yxs-b2b-sel-modal__box {
	width: 100%;
	max-width: 360px;
	padding: 20px;
	border-radius: var(--yxs-radius);
	background: var(--yxs-bg);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.yxs-b2b-sel-modal__title {
	margin: 0 0 6px;
	font-size: 17px;
	color: var(--yxs-heading);
}

.yxs-b2b-sel-modal__hint {
	margin: 0 0 14px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--yxs-muted);
}

.yxs-b2b-sel-modal__input {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--yxs-border-strong);
	border-radius: var(--yxs-radius);
	font-size: 14px;
	box-sizing: border-box;
}

.yxs-b2b-sel-modal__input:focus {
	outline: none;
	border-color: var(--yxs-primary);
}

.yxs-b2b-sel-modal__err {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--yxs-warn);
}

.yxs-b2b-sel-modal__ops {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.yxs-b2b-sel-modal__tabs {
	display: flex;
	gap: 6px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--yxs-border);
}

.yxs-b2b-sel-modal__tab {
	padding: 7px 12px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: transparent;
	font-size: 13px;
	color: var(--yxs-muted);
	cursor: pointer;
}

.yxs-b2b-sel-modal__tab:hover {
	color: var(--yxs-heading);
}

.yxs-b2b-sel-modal__tab.is-active {
	border-bottom-color: var(--yxs-primary);
	color: var(--yxs-heading);
	font-weight: 600;
}

/* 选品视图：商品行「移除」按钮（仅查看自己选品时出现）。 */
.yxs-b2b-sel-remove {
	margin-left: 4px;
	padding: 2px 8px;
	border: 1px solid var(--yxs-border-strong);
	border-radius: 3px;
	background: var(--yxs-bg);
	font-size: 12px;
	line-height: 1.4;
	color: var(--yxs-warn);
	cursor: pointer;
}

.yxs-b2b-sel-remove:hover {
	border-color: var(--yxs-warn);
	background: var(--yxs-warn-bg);
}

.yxs-b2b-sel-remove[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* 规格行内的移除按钮：比商品行那个更紧凑，避免撑高密集的 SKU 行。 */
.yxs-b2b-sel-remove--row {
	margin-left: 6px;
	padding: 0 6px;
	font-size: 11px;
	vertical-align: middle;
	opacity: 0.75;
}

.yxs-b2b-sel-remove--row:hover {
	opacity: 1;
}

/* 表格页眉的操作区（如「＋ 添加商品」）。 */
.yxs-b2b-head__actions {
	margin: 10px 0 0;
}

/* 表格页眉里的推荐理由（与列表页卡片同一套视觉）。 */
.yxs-b2b-head__reason {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 8px 0 0;
	padding: 6px 9px;
	border: 1px solid var(--yxs-border);
	border-radius: 3px;
	background: var(--yxs-bg-alt, #f6f6f6);
	font-size: 12px;
	line-height: 1.5;
	color: var(--yxs-heading);
}

.yxs-b2b-head__reason em {
	flex: 0 0 auto;
	padding: 0 5px;
	border-radius: 2px;
	background: var(--yxs-bg, #f1f1f1);
	color: var(--yxs-muted);
	font-style: normal;
	font-size: 11px;
	line-height: 1.6;
}

/* ---------- 工具栏 ---------- */

.yxs-b2b-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var(--yxs-border);
	margin-bottom: 12px;
}

.yxs-b2b-toolbar__left,
.yxs-b2b-toolbar__right {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.yxs-b2b-count {
	color: var(--yxs-muted);
	font-size: 13px;
}

/* 「仅看有货」开关：与工具栏按钮同高，避免视觉跳一行。 */
.yxs-b2b-switch {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
	user-select: none;
	white-space: nowrap;
}

.yxs-b2b-switch:hover {
	border-color: var(--yxs-text);
}

.yxs-b2b-switch input {
	margin: 0;
}

.yxs-b2b-switch input:checked + span {
	color: var(--yxs-text);
	font-weight: 600;
}

/*
 * 「全选本页」开关：只在移动端出现（见 @media (max-width: 782px) 里那条）。
 *
 * 桌面端表头已经有一颗全选框，两颗并存会互相打架（勾一颗另一颗不同步），
 * 所以这里默认隐藏，只在卡片布局（thead 被隐藏）时才显示出来。
 */
.yxs-b2b-switch--checkall {
	display: none;
}

.yxs-b2b-viewswitch {
	display: inline-flex;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	overflow: hidden;
}

.yxs-b2b-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 7px 14px;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	background: var(--yxs-bg);
	color: var(--yxs-text);
	font-size: 13px;
	line-height: 1.4;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s, color 0.15s;
	white-space: nowrap;
}

/*
 * 禁用态。
 *
 * v4.1.0 操作条改为常驻后必须有它：否则「未勾选时不可点的批量动作」
 * 看起来和可点的完全一样，用户点了没反应又不知道要先勾商品。
 *
 * 用灰底+ 浅字 + `not-allowed` 光标，仍是黑白灰单色系。
 */
.yxs-b2b-btn:disabled,
.yxs-b2b-btn[disabled],
.yxs-b2b-btn.is-disabled {
	background: var(--yxs-bg);
	border-color: var(--yxs-border);
	color: #b8b8b8;
	cursor: not-allowed;
	opacity: 0.75;
}

.yxs-b2b-btn:disabled:hover,
.yxs-b2b-btn[disabled]:hover,
.yxs-b2b-btn.is-disabled:hover {
	background: var(--yxs-bg);
	border-color: var(--yxs-border);
	color: #b8b8b8;
}

.yxs-b2b-btn:hover {
	background: var(--yxs-bg-alt);
	border-color: var(--yxs-border-strong);
	color: var(--yxs-text);
}

.yxs-b2b-btn--primary {
	background: var(--yxs-primary);
	border-color: var(--yxs-primary);
	color: #fff;
	font-weight: 600;
}

.yxs-b2b-btn--primary:hover {
	background: var(--yxs-primary-dark);
	border-color: var(--yxs-primary-dark);
	color: #fff;
}

.yxs-b2b-btn--accent {
	background: var(--yxs-accent);
	border-color: var(--yxs-accent);
	color: #fff;
	font-weight: 600;
}

.yxs-b2b-btn--ghost {
	background: transparent;
}

.yxs-b2b-btn--link {
	border-color: transparent;
	background: transparent;
	color: var(--yxs-primary);
	text-decoration: underline;
}

.yxs-b2b-btn--tiny {
	padding: 3px 8px;
	font-size: 12px;
}

.yxs-b2b-btn--tab {
	border: 0;
	border-radius: 0;
	padding: 7px 16px;
}

.yxs-b2b-btn--tab.is-active {
	background: var(--yxs-primary);
	color: #fff;
	font-weight: 600;
}

.yxs-b2b-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

.yxs-b2b-select,
.yxs-b2b-field input[type="search"],
.yxs-b2b-field input[type="text"],
.yxs-b2b-field input[type="number"],
.yxs-b2b-field select,
.yxs-b2b-field textarea {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	font-size: 13px;
	color: var(--yxs-text);
	background: var(--yxs-bg);
}

.yxs-b2b-select {
	width: auto;
	min-width: 130px;
}

/* ---------- 筛选器 ---------- */

.yxs-b2b-filters {
	padding: 14px;
	background: var(--yxs-bg-alt);
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	margin-bottom: 14px;
}

.yxs-b2b-filters.is-collapsed {
	display: none;
}

.yxs-b2b-filters__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 12px;
}

.yxs-b2b-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.yxs-b2b-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--yxs-muted);
}

.yxs-b2b-field--check label {
	flex-direction: row;
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	color: var(--yxs-text);
}

.yxs-b2b-range {
	display: flex;
	align-items: center;
	gap: 6px;
}

.yxs-b2b-range input {
	min-width: 0;
}

.yxs-b2b-filters__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--yxs-border);
}

/* ---------- 表格 ---------- */

/*
 * 横向滚动容器。
 *
 * macOS 默认不显示滚动条（overlay scrollbar），用户看不出表格还能往右拖，
 * 会直接认为「右边的列不见了」。因此显式给滚动条留位置并上色，
 * 让「可以横向滚动」这件事可见。
 */
.yxs-b2b-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	scrollbar-width: thin;
	scrollbar-color: var(--yxs-border-strong) var(--yxs-bg-alt);
}

.yxs-b2b-table-scroll::-webkit-scrollbar {
	height: 10px;
	width: 10px;
}

.yxs-b2b-table-scroll::-webkit-scrollbar-track {
	background: var(--yxs-bg-alt);
	border-radius: 0 0 var(--yxs-radius) var(--yxs-radius);
}

.yxs-b2b-table-scroll::-webkit-scrollbar-thumb {
	background: var(--yxs-border-strong);
	border-radius: 5px;
}

.yxs-b2b-table-scroll::-webkit-scrollbar-thumb:hover {
	background: var(--yxs-muted);
}

/* 溢出提示：右侧渐隐 + 提示条，由 JS 按实际溢出量开关。 */
.yxs-b2b-table-scroll--hint {
	position: relative;
}

.yxs-b2b-scroll-hint {
	display: none;
	margin-left: 8px;
	color: var(--yxs-primary);
	font-size: 12px;
}

.yxs-b2b-wrap.has-h-overflow .yxs-b2b-scroll-hint {
	display: inline;
}

.yxs-b2b-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	min-width: 880px;
}

.yxs-b2b-table thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	background: var(--yxs-bg-alt);
	border-bottom: 1px solid var(--yxs-border);
	padding: 10px 8px;
	text-align: left;
	font-weight: 600;
	font-size: 12px;
	white-space: nowrap;
}

.yxs-b2b-table tbody td {
	padding: 8px;
	border-bottom: 1px solid #eef1f4;
	vertical-align: middle;
}

.yxs-b2b-row:hover {
	background: var(--yxs-bg-alt);
}

.yxs-b2b-row.is-selected {
	background: #f0f0f0;
}

.yxs-b2b-col--check {
	width: 36px;
	text-align: center;
}

.yxs-b2b-col--image {
	width: 60px;
}

.yxs-b2b-col--image img {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.yxs-b2b-col--name {
	min-width: 200px;
	max-width: 320px;
}

.yxs-b2b-sku {
	display: inline-block;
	padding: 2px 6px;
	background: var(--yxs-bg-alt);
	border-radius: 3px;
	font-family: Consolas, Monaco, monospace;
	font-size: 11px;
	cursor: pointer;
	white-space: nowrap;
}

.yxs-b2b-col--spec {
	color: var(--yxs-muted);
	font-size: 12px;
	max-width: 220px;
}

.yxs-b2b-col--price {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.yxs-b2b-col--price strong {
	color: var(--yxs-primary-dark);
	font-size: 14px;
}

.yxs-b2b-muted {
	color: #b0b7c0;
}

.yxs-b2b-locked {
	color: var(--yxs-muted);
	font-size: 12px;
	text-decoration: underline dotted;
	cursor: help;
}

.yxs-b2b-qty {
	width: 76px;
	padding: 5px 8px;
	border: 1px solid var(--yxs-border);
	border-radius: 4px;
	font-size: 13px;
	text-align: center;
}

.yxs-b2b-qty:focus {
	outline: 2px solid rgba(0, 0, 0, 0.18);
	border-color: var(--yxs-primary);
}

.yxs-b2b-stock {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	white-space: nowrap;
}

.yxs-b2b-stock--in {
	background: var(--yxs-ok-bg);
	color: var(--yxs-ok);
}

.yxs-b2b-stock--low {
	background: #fff8e1;
	color: #ef6c00;
}

.yxs-b2b-stock--out {
	background: var(--yxs-bg-alt);
	color: var(--yxs-muted);
}

/* ---------- SPU 分组行 ---------- */

.yxs-b2b-spu-row td {
	padding: 0;
	border-top: 2px solid var(--yxs-border-strong);
}

.yxs-b2b-spu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 9px 12px;
	background: var(--yxs-bg-alt);
}

.yxs-b2b-spu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--yxs-heading);
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	text-align: left;
	line-height: 1.4;
}

.yxs-b2b-spu-toggle:hover {
	color: var(--yxs-primary);
}

.yxs-b2b-spu-caret {
	color: var(--yxs-muted);
	font-size: 11px;
	transition: transform 0.2s;
}

.yxs-b2b-spu-row.is-collapsed .yxs-b2b-spu-caret {
	transform: rotate(-90deg);
}

.yxs-b2b-spu-sku {
	padding: 2px 6px;
	background: var(--yxs-bg);
	border-radius: 3px;
	color: var(--yxs-muted);
	font-family: Consolas, Monaco, monospace;
	font-size: 11px;
	white-space: nowrap;
}

.yxs-b2b-spu-meta {
	color: var(--yxs-muted);
	font-size: 12px;
	white-space: nowrap;
}

.yxs-b2b-spu-price {
	margin-left: auto;
	color: var(--yxs-primary);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.yxs-b2b-spu-link {
	color: var(--yxs-muted);
	font-size: 12px;
	text-decoration: none;
	white-space: nowrap;
}

.yxs-b2b-spu-link:hover {
	color: var(--yxs-primary);
	text-decoration: underline;
}

.yxs-b2b-spu-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var(--yxs-text);
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
}

/* SKU 行相对 SPU 行缩进一档，体现从属关系。 */
.yxs-b2b-row--sku .yxs-b2b-col--name {
	padding-left: 24px;
}

.yxs-b2b-variation {
	color: var(--yxs-text);
}

/*
 * 折叠隐藏 SKU 行。
 *
 * ⚠️ 必须带 !important：移动端媒体查询里把 tr 改成了 `display: block`，
 * 而本规则与它**优先级相同、位置更靠前**，会被后者覆盖 →
 * 「展开 SKU / 折叠 SKU」点了完全没反应（移动端必现的 bug）。
 * !important 让折叠状态在任何断点下都稳。
 */
.yxs-b2b-row.is-hidden,
.yxs-b2b-table tbody tr.yxs-b2b-row.is-hidden {
	display: none !important;
}

/*
 * 「详情」切换按钮只服务移动端，桌面端必须藏起来。
 * 放在媒体查询外声明，避免依赖加载顺序。
 */
.yxs-b2b-row__more {
	display: none;
}

/* 阶梯价浮层 */

.yxs-b2b-tier-trigger {
	background: none;
	border: 0;
	padding: 0;
	color: var(--yxs-primary);
	font-size: 12px;
	cursor: pointer;
	text-decoration: underline dotted;
}

.yxs-b2b-tier-pop {
	position: absolute;
	z-index: 30;
	background: #fff;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	padding: 8px;
	min-width: 180px;
}

.yxs-b2b-col--tiers {
	position: relative;
}

.yxs-b2b-tier-pop table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.yxs-b2b-tier-pop th,
.yxs-b2b-tier-pop td {
	padding: 4px 8px;
	border-bottom: 1px solid #f0f2f5;
	text-align: left;
}

.yxs-b2b-tier-pop th {
	color: var(--yxs-muted);
	font-weight: 600;
}

/* ---------- 分页 ---------- */

.yxs-b2b-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 16px 0;
}

.yxs-b2b-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	height: 34px;
	padding: 0 8px;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	color: var(--yxs-text);
	text-decoration: none;
	font-size: 13px;
}

.yxs-b2b-page:hover {
	background: var(--yxs-bg-alt);
}

.yxs-b2b-page.is-active {
	background: var(--yxs-primary);
	border-color: var(--yxs-primary);
	color: #fff;
	font-weight: 600;
}

.yxs-b2b-page-ellipsis {
	color: var(--yxs-muted);
	padding: 0 4px;
}

/* ---------- 底部操作条 ---------- */

.yxs-b2b-actionbar {
	position: sticky;
	bottom: 0;
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	margin-top: 12px;
	background: #fff;
	border: 1px solid var(--yxs-border);
	border-radius: var(--yxs-radius);
	box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
}

.yxs-b2b-actionbar__info {
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}

.yxs-b2b-actionbar__info strong {
	color: var(--yxs-primary-dark);
	font-size: 15px;
}

.yxs-b2b-actionbar__sep {
	color: var(--yxs-border);
}

.yxs-b2b-actionbar__ops {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.yxs-b2b-actionbar__fill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--yxs-muted);
}

.yxs-b2b-actionbar__fill .yxs-b2b-qty {
	width: 64px;
}

/* 常用起订档位：10 / 50 / 100，紧挨「批量填」放，别挤到主按钮那边去。 */
.yxs-b2b-actionbar__quick {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.yxs-b2b-actionbar__quick .yxs-b2b-btn {
	min-width: 34px;
	justify-content: center;
}

.yxs-b2b-actionbar__feedback {
	width: 100%;
	font-size: 13px;
}

/*
 * 无下单能力时的状态说明。
 * 刻意做成非按钮样式：它不是可点的东西，避免客户反复点、又以为页面坏了。
 */
.yxs-b2b-actionbar__blocked {
	display: inline-flex;
	align-items: center;
	padding: 8px 14px;
	border: 1px dashed var(--yxs-line, #ddd);
	border-radius: var(--yxs-radius, 6px);
	background: var(--yxs-notice-bg, #f6f6f6);
	color: var(--yxs-muted, #666);
	font-size: 13px;
	line-height: 1.5;
}

.yxs-b2b-actionbar__feedback.is-error {
	color: var(--yxs-warn);
}

.yxs-b2b-actionbar__feedback.is-success {
	color: #2e7d32;
}

/* ---------- 提示与空状态 ---------- */

.yxs-b2b-notice {
	padding: 12px 14px;
	border-radius: var(--yxs-radius);
	font-size: 13px;
	margin-bottom: 14px;
}

.yxs-b2b-notice--info {
	background: var(--yxs-notice-bg);
	border-left: 4px solid var(--yxs-primary);
}

.yxs-b2b-notice--warn {
	background: #fff8e6;
	border-left: 4px solid #ef6c00;
}

.yxs-b2b-notice--warn a {
	color: #b35c00;
	font-weight: 600;
}

.yxs-b2b-empty {
	padding: 48px 20px;
	text-align: center;
	border: 1px dashed var(--yxs-border);
	border-radius: var(--yxs-radius);
	background: var(--yxs-bg-alt);
}

.yxs-b2b-empty__title {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 6px;
}

.yxs-b2b-empty__desc {
	color: var(--yxs-muted);
	margin: 0 0 16px;
}

/* ---------- 弹窗 ---------- */

.yxs-b2b-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.yxs-b2b-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.yxs-b2b-modal__panel {
	position: relative;
	width: 100%;
	max-width: 540px;
	max-height: 88vh;
	overflow-y: auto;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.yxs-b2b-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid var(--yxs-border);
}

.yxs-b2b-modal__head h2 {
	margin: 0;
	font-size: 17px;
}

.yxs-b2b-modal__close {
	background: none;
	border: 0;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: var(--yxs-muted);
	padding: 0 4px;
}

.yxs-b2b-modal__body {
	padding: 18px 20px 22px;
}

.yxs-b2b-modal__hint {
	color: var(--yxs-muted);
	font-size: 12px;
	margin: 0 0 12px;
}

.yxs-b2b-modal__summary {
	max-height: 180px;
	overflow-y: auto;
	background: var(--yxs-bg-alt);
	border-radius: var(--yxs-radius);
	padding: 10px 12px;
	margin-bottom: 16px;
	font-size: 12px;
}

.yxs-b2b-modal__summary ul {
	margin: 0;
	padding-left: 18px;
}

.yxs-b2b-modal__actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

.yxs-b2b-modal__feedback {
	margin-top: 12px;
	font-size: 13px;
}

.yxs-b2b-modal__feedback.is-error {
	color: var(--yxs-warn);
}

.yxs-b2b-modal__feedback.is-success {
	color: #2e7d32;
}

body.yxs-b2b-modal-open {
	overflow: hidden;
}

/*
 * 「详情」切换单元格：桌面端隐藏。
 *
 * 必须显式 `display: none`，不能只依赖"媒体查询里才给样式"——
 * 那样桌面端这个按钮仍会以默认 inline-block 显示出来（空的、很丑）。
 */
.yxs-b2b-table tbody tr.yxs-b2b-row td.yxs-b2b-col--more {
	display: none;
}

/* ---------- 移动端：表格降级为卡片 ---------- */

/* ==========================================================================
 * 移动端（≤782px）：整页重做（v4.2.0）
 *
 * 旧版问题（用户实机反馈）：一个规格一张 297px 高的卡片、字段一行一项、
 * 主图被 CSS 隐藏、底部操作条又与站点底部菜单（wp-bottom-menu, 73px）叠在一起，
 * 一屏看不到两个规格，几乎没法用。
 *
 * 新版：
 *   ① 规格行改成 grid 卡片：勾选 / 主图 / 规格名 + 渠道价（第一行），
 *      库存 + 数量（第二行），展开详情（第三行）→ 单卡约 150px；
 *   ② 主图恢复显示（52×52 圆角），跟随 WooCommerce 商品主图；
 *   ③ 常显格不再显示「主图/渠道价/数量」这类字段名前缀（只在实际值上留文字），
 *      标签只在「展开详情」后的次要字段上保留；
 *   ④ 操作条抬到站点底部菜单**之上**（--yxs-menu-h 由 JS 实测写入，见 b2b.js），
 *      并给表格容器留出等高底部内边距，最后一行不会被挡；
 *   ⑤ 商品分组（SPU）行压缩成 1–2 行。
 * ========================================================================== */

@media screen and (max-width: 782px) {

	/*
	 * 容器两侧留白收窄（v4.2.6，用户实机反馈「两边边距有点宽」）。
	 *
	 * 实测 390px 屏：主题 .ast-container 左右各 20px + 我们自己的 16px
	 * = 两侧各 36px，内容只剩 318px。两步一起收：
	 *   ① --yxs-outset = 主题那一圈内边距（由 b2b.js 实测写入），用负外边距顶掉
	 *      （必须 !important，理由见上方 --full 注释：主题的 margin:auto 优先级更高）；
	 *   ② 我们自己的内边距 16px → 12px。
	 * 结果：内容宽 366px，两侧各留 12px。
	 *
	 * ⚠️ 不用 calc(50% - 50vw)：桌面窗口拖窄到 782px 以内时**有占位滚动条**，
	 * 100vw 比可视宽度大一个滚动条，实测 768 宽的窗口横向溢出 8px，
	 * 反而多出一条横向滚动条。改用量出来的外扩量，与滚动条无关。
	 * JS 没跑起来时变量缺省为 0，退回"只收我们自己的那 16→12px"，不会变宽。
	 */
	.yxs-b2b-wrap--full {
		margin-left: calc( -1 * var( --yxs-outset, 0px ) ) !important;
		margin-right: calc( -1 * var( --yxs-outset, 0px ) ) !important;
		padding-left: 12px;
		padding-right: 12px;
	}

	/*
	 * 移动端「全选本页」开关（v4.2.6）。
	 *
	 * 桌面端这个开关在表头第一个格子里，而移动端卡片布局把 <thead> 整块隐藏，
	 * 于是手机上**根本没有全选入口**，只剩「全选本商品」和逐行点。
	 * 这里在工具栏补一个，桌面端隐藏（那里有表头那颗，两个会打架）。
	 */
	.yxs-b2b-switch--checkall {
		display: inline-flex;
	}

	/* 开关类控件和按钮一样要够高（v4.2.5 的 36px 口径，别漏了 label 形态的开关）。 */
	.yxs-b2b-switch {
		min-height: 36px;
	}

	.yxs-b2b-table {
		min-width: 0;
	}

	.yxs-b2b-table thead {
		display: none;
	}

	/*
	 * v4.8.2：清掉桌面端那条 `.yxs-b2b-table tbody td` 留下的满格细线与内边距。
	 *
	 * 根因是特异性：桌面端基础规则 `.yxs-b2b-table tbody td`(0,1,2)
	 * 一直压着卡片布局里的 `.yxs-b2b-row > td`(0,1,1)，
	 * 于是手机上每个格子都带着 8px 内边距和一条 #eef1f4 下边线
	 * （用户实机反馈「表格里面的这些描边」）。
	 *
	 * 用直接子代链把特异性提到 (0,1,3) 后置覆盖；
	 * 子代链同时保证不伸进阶梯价弹窗里的内嵌表格（那有独立样式）。
	 */
	.yxs-b2b-table > tbody > tr > td {
		padding: 0;
		border-bottom: 0;
	}

	/* 卡片布局下 tbody 不能再是表格行组，否则 grid 行会被浏览器包一层匿名表格。 */
	.yxs-b2b-table tbody {
		display: block;
		column-width: auto;
	}

	/* 每个商品（SPU 头 + 其 SKU 卡）包成一个分组 tbody，移动端用 grid 两列对齐。 */
	.yxs-b2b-table tbody.yxs-b2b-spu-group {
		display: grid;
		grid-template-columns: 1fr;
		gap: 8px;
		/* v4.8.2：商品（SPU）之间间距 12 → 20px（用户实机反馈「每一 SPU 之间的间距加大」）。 */
		margin: 0 0 20px;
	}

	/* ---------- 规格卡 ---------- */

	.yxs-b2b-table tbody tr.yxs-b2b-row {
		display: grid;
		grid-template-columns: 26px 64px minmax(0, 1fr) auto;
		grid-template-areas:
			"check img name  price"
			"check img stock qty"
			"retail retail retail retail"
			"more  more more more";
		align-items: center;
		column-gap: 8px;
		row-gap: 3px;
		margin: 0;
		padding: 8px 10px;
		/* v4.8.2：去掉卡片描边（用户实机反馈）——分隔交给留白与分组，不再靠框线。 */
		border-radius: 10px;
		background: #fff;
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* 默认全部隐藏，再逐个摆回网格——比逐个去覆盖更不容易漏。 */
	.yxs-b2b-row > td {
		display: none;
		padding: 0;
		font-size: 13px;
	}

	.yxs-b2b-row > td.yxs-b2b-col--check {
		grid-area: check;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yxs-b2b-row > td.yxs-b2b-col--image {
		grid-area: img;
		display: block;
	}

	.yxs-b2b-row > td.yxs-b2b-col--name {
		grid-area: name;
		display: block;
		font-size: 13px;
		font-weight: 500;
		line-height: 1.3;
	}

	/* 长规格名最多两行，避免个别商品把整屏撑长。 */
	.yxs-b2b-col--name .yxs-b2b-variation {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.yxs-b2b-row > td.yxs-b2b-col--price {
		grid-area: price;
		display: block;
		text-align: right;
		white-space: nowrap;
	}

	.yxs-b2b-row > td.yxs-b2b-col--price strong {
		font-size: 15px;
	}

	.yxs-b2b-row > td.yxs-b2b-col--stock {
		grid-area: stock;
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 12px;
	}

	.yxs-b2b-row > td.yxs-b2b-col--qty {
		grid-area: qty;
		display: flex;
		justify-content: flex-end;
	}

	/*
	 * 数量输入框：16px 是**必须的**——低于 16px 时 iOS Safari 聚焦会自动放大整页，
	 * 客户每填一次数量就被"推"一下，非常难受。44px 是 HIG 的最小可点尺寸。
	 */
	.yxs-b2b-row > td.yxs-b2b-col--qty .yxs-b2b-qty,
	.yxs-b2b-actionbar .yxs-b2b-qty {
		width: 64px;
		min-height: 44px;
		font-size: 16px;
		text-align: center;
	}

	.yxs-b2b-row > td.yxs-b2b-col--more {
		grid-area: more;
		display: block;
	}

	/*
	 * 常显格字段名前缀（v4.8.2 改）。
	 *
	 * v4.2.x 的做法是常显格一律去掉前缀，理由是「勾选框/主图/规格名/
	 * 价格/库存/数量本身就自解释」。但用户实机反馈：单独一个
	 * 「紧张 5」「¥32.00」看不出是什么——价格与库存**必须**带字段名。
	 *
	 * 现在分两类：
	 *  - check / image / name / qty：仍然 content:none（复选框、缩略图、
	 *    规格名、数量框都自解释，顶前缀只会把卡片挤高）；
	 *  - price / stock：恢复 data-label 前缀（「渠道价」「可售库存」），
	 *    样式与展开态的字段名同一套（11px 弱化色）。
	 *  - retail：从「展开才可见」改为常显一行（见下面 .yxs-b2b-col--retail）。
	 *
	 * 注意：桌面端那条 ::before 规则在媒体查询之外用不上，这里只需压掉本查询内的。
	 */
	.yxs-b2b-row > td.yxs-b2b-col--check::before,
	.yxs-b2b-row > td.yxs-b2b-col--image::before,
	.yxs-b2b-row > td.yxs-b2b-col--name::before,
	.yxs-b2b-row > td.yxs-b2b-col--qty::before {
		content: none;
	}

	/* 渠道价 / 可售库存：字段名前缀（与展开态 ::before 同样式）。 */
	.yxs-b2b-row > td.yxs-b2b-col--price::before,
	.yxs-b2b-row > td.yxs-b2b-col--stock::before {
		content: attr( data-label );
		margin-right: 5px;
		color: var(--yxs-muted);
		font-size: 11px;
		font-weight: 400;
		white-space: nowrap;
	}

	/*
	 * 零售价常显行（v4.8.2，用户要求「零售价可以加上」）。
	 *
	 * 原来只在展开态里出现；现在每个规格卡固定多一行，右对齐
	 * 贴在渠道价下方，两个价格读起来是一组。后台关掉
	 * 「展示零售价」时模板会给这格加 is-empty，整行隐藏。
	 */
	.yxs-b2b-row > td.yxs-b2b-col--retail {
		grid-area: retail;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 6px;
		font-size: 11px;
		color: var(--yxs-muted);
	}

	.yxs-b2b-row > td.yxs-b2b-col--retail::before {
		content: attr( data-label );
		white-space: nowrap;
	}

	.yxs-b2b-row > td.yxs-b2b-col--retail.is-empty,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--retail.is-empty {
		display: none;
	}

	/* 主图：64×64 圆角（v4.8.2 从 52px 放大），跟随商品主图。 */
	.yxs-b2b-col--image img {
		display: block;
		width: 64px;
		height: 64px;
		/* 主题普遍带 img 的 max-width:100%，会把图压成 43px；这里要精确尺寸。 */
		max-width: none;
		object-fit: cover;
		border-radius: 8px;
		/* 不加灰底：商品图自带白底，垫灰反而像"图没加载出来"。 */
		background: transparent;
	}

	/* 空图（无主图的商品）不要留一块灰。 */
	.yxs-b2b-col--image img:not([src]),
	.yxs-b2b-col--image img[src=""] {
		display: none;
	}

	/*
	 * 勾选反馈：整卡高亮。
	 * 勾选是移动端最高频动作，必须有明确反馈（此前 .is-selected 几乎没表现）。
	 */
	.yxs-b2b-table tbody tr.yxs-b2b-row.is-selected {
		border-color: var(--yxs-primary);
		background: var(--yxs-notice-bg, #f6f6f6);
		box-shadow: inset 3px 0 0 var(--yxs-primary);
	}

	/* 「详情」切换（移动端由模板额外渲染）。 */
	.yxs-b2b-row__more {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		margin-top: 2px;
		padding: 4px 0;
		border: 0;
		border-top: 1px dashed var(--yxs-border);
		background: none;
		color: var(--yxs-muted);
		font-family: inherit;
		font-size: 11px;
		cursor: pointer;
	}

	.yxs-b2b-row__more::after {
		content: '展开详情';
	}

	.yxs-b2b-row.is-expanded .yxs-b2b-row__more::after {
		content: '收起详情';
	}

	/*
	 * 展开后：次要字段整行铺开，左侧保留字段名（此时确实需要）
	 * —— 这是 ::before(data-label) 唯一还需要的场景。
	 */
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--retail,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--tiers,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--sku,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--spec,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--categories,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--moq,
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--actions {
		display: flex;
		grid-column: 1 / -1;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 3px 0;
		font-size: 12px;
	}

	.yxs-b2b-row.is-expanded > td::before {
		flex: 0 0 auto;
		margin-right: 8px;
		color: var(--yxs-muted);
		font-size: 12px;
		white-space: nowrap;
		content: attr( data-label );
	}

	/* 展开后的次要字段里，文字值靠右、按钮不拉伸。 */
	.yxs-b2b-row.is-expanded > td.yxs-b2b-col--actions {
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	/*
	 * 「我的选品」视图：手机上把「移除」常显出来（v4.2.7）。
	 *
	 * 卡片布局默认把操作列收进「展开详情」里，于是编辑选品时客户找不到「移除」——
	 * 用户实机反馈"移动端没有移除该规格的按钮"。带 .has-sel-actions 的行
	 * 多排一行单独放操作列，不必先展开。
	 *
	 * 「详情」链接在同一个格子里，手机上让位给「移除」：
	 * 商品详情在分组行（SPU 行）上本来就有入口，卡片里再放一个纯属占位。
	 */
	.yxs-b2b-table tbody tr.yxs-b2b-row.has-sel-actions {
		grid-template-areas:
			"check img name  price"
			"check img stock qty"
			"retail retail retail retail"
			"acts acts acts acts"
			"more  more more more";
	}

	.yxs-b2b-row.has-sel-actions > td.yxs-b2b-col--actions {
		display: flex;
		grid-area: acts;
		justify-content: flex-end;
		gap: 8px;
		padding: 4px 0 0;
		border-top: 1px dashed var(--yxs-border);
	}

	/* 已经常显了，展开时不要再被"整行铺开 + 左对齐"的规则改写。 */
	.yxs-b2b-row.has-sel-actions.is-expanded > td.yxs-b2b-col--actions {
		grid-column: auto;
		justify-content: flex-end;
	}

	.yxs-b2b-row.has-sel-actions > td.yxs-b2b-col--actions::before {
		content: none;
	}

	.yxs-b2b-row.has-sel-actions > td.yxs-b2b-col--actions > a.yxs-b2b-btn {
		display: none;
	}

	/*
	 * v4.8.2：选品卡片只保留**一条**虚线——操作区（移除）上方那条
	 * 作为「正文 / 操作」的分界。移除按钮下面那条（展开详情上方）
	 * 去掉，用户实机反馈两条太碎。
	 *
	 * 非选品视图没有 acts 行，仍然保留展开详情上方那条作为唯一分界，
	 * 与选品视图「一条虚线」的口径一致。
	 */
	.yxs-b2b-row.has-sel-actions .yxs-b2b-row__more {
		border-top: 0;
	}

	/* 卡片内按钮满足触控尺寸。 */
	.yxs-b2b-table tbody tr.yxs-b2b-row .yxs-b2b-btn--tiny {
		min-height: 36px;
		padding: 0 12px;
	}

	/*
	 * 手机上**所有**小按钮统一到 36px（v4.2.5）。
	 *
	 * 实测「我的选品」卡片上的「复制 / 重命名 / 删除」和「+ 新建选品」只有 **25px 高**，
	 * 手指很难点准 —— 而「删除」还是不可撤销的危险操作，误触代价高。
	 * 原来只有"表格行内"的小按钮被提到了 36px，卡片与页头里的没有覆盖到。
	 */
	.yxs-b2b-btn--tiny {
		min-height: 36px;
		padding: 0 12px;
	}

	/* 卡片右下角的操作组也允许换行，别把按钮挤成一条细线。 */
	.yxs-b2b-pallet__actions,
	.yxs-b2b-mine__head {
		flex-wrap: wrap;
		gap: 6px;
	}

	.yxs-b2b-col--name,
	.yxs-b2b-col--spec {
		flex-wrap: wrap;
	}

	/* ---------- 商品分组（SPU）行 ---------- */

	.yxs-b2b-table tbody tr.yxs-b2b-spu-row {
		display: block;
		grid-column: 1 / -1;
		margin: 0;
		padding: 6px 10px;
		border-radius: 8px;
		background: #f6f7f8;
		break-after: avoid;
		page-break-after: avoid;
	}

	.yxs-b2b-table tbody tr.yxs-b2b-spu-row td {
		display: block;
		padding: 0;
	}

	.yxs-b2b-table tbody tr.yxs-b2b-spu-row td::before {
		content: none;
	}

	.yxs-b2b-spu {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 2px 8px;
	}

	.yxs-b2b-spu-toggle {
		font-size: 14px;
	}

	.yxs-b2b-spu-sku {
		font-size: 11px;
		opacity: 0.75;
	}

	.yxs-b2b-spu-meta,
	.yxs-b2b-spu-link {
		font-size: 12px;
	}

	.yxs-b2b-spu-price {
		margin-left: auto;
		font-size: 13px;
		font-weight: 500;
		/* v4.8.2：手机上 SPU 分组行不显示价格（用户实机反馈）。
		 * 每组下面的规格卡已全部带渠道价，分组行再来一个区间价冗余；
		 * 桌面端分组行仍是汇总信息，保留。 */
		display: none;
	}

	.yxs-b2b-spu-check {
		margin-left: auto;
		font-size: 12px;
	}

	/* ---------- 筛选区压缩 ---------- */

	.yxs-b2b-filters {
		gap: 6px;
		padding: 8px 10px;
	}

	.yxs-b2b-filters label {
		font-size: 12px;
	}

	.yxs-b2b-filters .yxs-b2b-btn,
	.yxs-b2b-filters select,
	.yxs-b2b-filters input[type="search"],
	.yxs-b2b-filters input[type="number"] {
		min-height: 36px;
		font-size: 13px;
	}

	.yxs-b2b-summary {
		font-size: 12px;
	}

	/*
	 * 工具栏压缩（v4.2.3）：实测 207px → 157px。
	 *
	 * 原来每个控件占一行（筛选/展开/折叠/仅看有货 → 排序 → 导出 CSV → 导出 Excel），
	 * 390px 屏上还没看到商品就先滚两屏。现在左右两组都允许换行、按钮缩到 34px，
	 * 「筛选/展开/折叠/仅看有货」回到一行，两个导出按钮平分一行，排序独占一行（便于点选）。
	 */
	.yxs-b2b-toolbar {
		gap: 6px;
		padding: 8px 0;
	}

	.yxs-b2b-toolbar__left,
	.yxs-b2b-toolbar__right {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		width: 100%;
	}

	.yxs-b2b-toolbar__left .yxs-b2b-btn,
	.yxs-b2b-toolbar__right .yxs-b2b-btn {
		min-height: 36px;
		padding: 4px 10px;
		font-size: 12px;
	}

	.yxs-b2b-toolbar__right .yxs-b2b-btn {
		flex: 1 1 44%;
		justify-content: center;
	}

	.yxs-b2b-sort {
		flex: 1 1 100%;
	}

	.yxs-b2b-count {
		font-size: 12px;
	}

	/* 窄屏下「我的选品」标题与新建按钮允许换行，避免挤压。 */
	.yxs-b2b-mine__head {
		flex-wrap: wrap;
	}

	/* ---------- 底部悬浮操作条 ---------- */

	/*
	 * ⚠️ 这一条是用户实机反馈的核心问题：操作条原来贴在 bottom:0，
	 * 而本站（以及多数装了底部导航的站点）底部还有一条固定菜单，
	 * 两者重叠 → 主按钮被菜单压住、点不到。
	 *
	 * --yxs-menu-h = 站点底部固定元素的高度，由 b2b.js 实测写入
	 * （找不到就是 0px，退回原行为，不产生新的遮挡）。
	 */
	.yxs-b2b-actionbar {
		bottom: calc(var(--yxs-menu-h, 0px) + env(safe-area-inset-bottom, 0px) + 6px);
		flex-direction: column;
		align-items: stretch;
		gap: 6px;
		padding: 8px 10px;
		border-radius: 12px;
		box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.1);
	}

	.yxs-b2b-actionbar__info {
		font-size: 12px;
	}

	.yxs-b2b-actionbar__ops {
		flex-wrap: wrap;
		gap: 6px;
		justify-content: stretch;
	}

	.yxs-b2b-actionbar__ops .yxs-b2b-btn {
		flex: 1 1 auto;
		/* 主按钮也要够高，手指才点得准（HIG 最小 44px）。 */
		min-height: 44px;
	}

	/* 快捷档位与「批量填」用小尺寸，把操作条压回两行以内。 */
	.yxs-b2b-actionbar__quick {
		display: inline-flex;
		gap: 3px;
	}

	/*
	 * 手机上隐藏「批量填 N + 应用到已选」这一行（v4.2.2）。
	 *
	 * 批量改数量一共有三条入口，手机上不需要全给：
	 *   ① 这一行（桌面式做法：先填数字再点"应用到已选"）
	 *   ② 5/10/20/50 一键档位 —— 点了同样写入批量值并**立即对已勾选生效**，一次点击就完成
	 *   ③ 每个规格卡自带的数量输入框
	 * 隐藏 ① 后操作条从 206px 压到 146px（省 7% 屏高），一键档位与逐行填写都还在。
	 * 注意：只是 display:none，输入框仍在 DOM 里，JS 的"点档位写入并应用"照常工作。
	 */
	.yxs-b2b-actionbar__fill {
		display: none;
	}

	.yxs-b2b-actionbar__quick .yxs-b2b-btn,
	.yxs-b2b-actionbar__ops .yxs-b2b-btn--tiny {
		/* 40px：一键档位是手机上最高频的批量操作，别做成 32px 的小目标。 */
		min-height: 40px;
		padding: 3px 10px;
		font-size: 12px;
		line-height: 1;
	}

	/* 按钮间留出可点间隙，避免误触。 */
	.yxs-b2b-actionbar__ops .yxs-b2b-btn + .yxs-b2b-btn {
		margin-left: 0;
	}

	/*
	 * 给表格容器留出「操作条 + 站点菜单」的总高度，
	 * 否则最后一行商品会被操作条永久遮住（滚到底也看不到）。
	 */
	.yxs-b2b-table-scroll {
		padding-bottom: calc(var(--yxs-bar-h, 120px) + var(--yxs-menu-h, 0px) + 16px);
		/* v4.8.2：去掉表格外描边（用户实机反馈「表格的外面的那个描边」）——
		 * 卡片布局下这圈边框把整块表框死，分组留白已经足够分隔。 */
		border: 0;
	}
}

/*
 * 平板/大屏手机（520–782px）：卡片足够窄时并排两列。
 * 只在卡片布局之上叠加列宽，宽屏仍然是单列，避免 390px 上挤成两条 180px 的窄卡。
 */
@media screen and (min-width: 600px) and (max-width: 782px) {
	/* 大屏手机/平板：每个商品分组内规格卡并排两列，同行等高对齐，根治瀑布流错位。
	 * 阈值取 600px：保证每列卡宽≥~290px 不被挤窄（520–600 仍单列，卡片更宽更好点）。 */
	.yxs-b2b-table tbody.yxs-b2b-spu-group {
		grid-template-columns: 1fr 1fr;
	}
}

/* ============================================================
 * 商品手册（Catalog）v4.3.0
 * 黑白灰单色、大留白、细线分节、以图为主（复用站点字体栈）。
 * 全部以 .yxs-b2b-wrap 作用域隔离。
 * ============================================================ */

/* 内容容器：模板里用 .wrap 做居中，这里统一成固定最大宽 + 内边距。 */
.yxs-b2b-wrap .wrap {
	max-width: 1080px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 28px;
	padding-right: 28px;
	width: 100%;
}

/* 顶部目录条 */
.yxs-catalog__nav {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: saturate(180%) blur(6px);
	border-bottom: 1px solid var(--yxs-border);
}

.yxs-catalog__nav-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 56px;
	padding-top: 8px;
	padding-bottom: 8px;
}

.yxs-catalog__brandmark {
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--yxs-heading);
}

.yxs-catalog__nav-links {
	display: flex;
	gap: 22px;
	margin-left: 0;
	font-size: 13px;
}

.yxs-catalog__nav-links a {
	color: var(--yxs-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.yxs-catalog__nav-links a:hover {
	color: var(--yxs-heading);
}

.yxs-catalog__nav-tools {
	display: flex;
	gap: 8px;
	margin-left: auto;
}

/* 区块通用 */
.yxs-catalog__sec {
	padding: 64px 0;
	border-top: 1px solid var(--yxs-border);
}

.yxs-catalog__sec:first-of-type {
	border-top: 0;
}

.yxs-cat-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 36px;
}

.yxs-cat-sec__head h2 {
	margin: 0;
	font-size: var(--yxs-fs-sec_title, 24px);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--yxs-heading);
}

.yxs-cat-sec__index {
	font-size: var(--yxs-fs-sec_index, 12px);
	letter-spacing: 0.18em;
	color: var(--yxs-muted);
	text-transform: uppercase;
	white-space: nowrap;
}

/* v4.9.0：板块内插入的编辑器内容（顶部 / 底部），由后台 do_blocks 渲染。 */
.yxs-cat-sec__insert {
	font-size: 15px;
	line-height: 1.7;
	color: var(--yxs-text);
}

.yxs-cat-sec__insert--top {
	margin: 0 0 32px;
}

.yxs-cat-sec__insert--bottom {
	margin: 32px 0 0;
}

/* 防止插入的图片 / 区块撑破版心。 */
.yxs-cat-sec__insert img,
.yxs-cat-sec__insert figure,
.yxs-cat-sec__insert .wp-block-image img {
	max-width: 100%;
	height: auto;
}

.yxs-cat-sec__insert p:first-child {
	margin-top: 0;
}

.yxs-cat-sec__insert p:last-child {
	margin-bottom: 0;
}

.yxs-cat-sec__insert h2,
.yxs-cat-sec__insert h3,
.yxs-cat-sec__insert h4 {
	color: var(--yxs-heading);
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* 封面 */
.yxs-catalog__cover {
	padding: 72px 0 56px;
}

.yxs-catalog__cover-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 48px;
	align-items: center;
}

.yxs-cat-eyebrow {
	font-size: var(--yxs-fs-eyebrow, 12px);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--yxs-muted);
	margin-bottom: 18px;
}

.yxs-catalog__cover-title {
	margin: 0 0 22px;
	font-size: var(--yxs-fs-cover_title, 40px);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--yxs-heading);
}

.yxs-catalog__cover-lead {
	margin: 0 0 32px;
	font-size: var(--yxs-fs-cover_lead, 16px);
	line-height: 1.9;
	color: var(--yxs-text);
	max-width: 46ch;
}

.yxs-catalog__cover-meta {
	display: flex;
	gap: 36px;
	margin-bottom: 26px;
}

.yxs-catalog__cover-meta > div {
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--yxs-muted);
	line-height: 1.4;
}

.yxs-catalog__cover-meta b {
	display: block;
	font-size: 26px;
	font-weight: 700;
	color: var(--yxs-heading);
	letter-spacing: 0;
	margin-bottom: 4px;
}

.yxs-catalog__cover-source {
	font-size: 12px;
	color: var(--yxs-muted);
	margin: 0;
}

/*
 * v4.8.0：比例 / 边框 / 填充全部走变量，后台可配。
 */
.yxs-catalog__cover-fig {
	aspect-ratio: var(--yxs-cover-ratio, 4 / 5);
	background: var(--yxs-bg-alt);
	border: var(--yxs-cover-border, 1px) solid var(--yxs-border);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.yxs-cat-cover__img {
	width: 100%;
	height: 100%;
	/* contain = 完整显示不裁切（适合透明 PNG）；cover = 裁切填满。 */
	object-fit: var(--yxs-cover-fit, cover);
	display: block;
}

.yxs-cat-cover__ph {
	padding: 24px;
	font-size: 13px;
	color: var(--yxs-muted);
	text-align: center;
}

/* IP 介绍 */
.yxs-cat-ip__lead {
	margin: 0 0 40px;
	font-size: var(--yxs-fs-ip_lead, 16px);
	line-height: 1.9;
	color: var(--yxs-text);
	max-width: 60ch;
}

/* v4.6.0：一行三个（原来两个）。描述字号 14 → 13px，否则每列一窄就挤成一块。 */
.yxs-cat-ip__entries {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 32px;
}

.yxs-cat-ip__entry {
	padding: 26px 0;
	border-top: 1px solid var(--yxs-border);
}

.yxs-cat-ip__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
}

.yxs-cat-ip__no {
	font-size: 13px;
	font-weight: 700;
	color: var(--yxs-muted);
	font-variant-numeric: tabular-nums;
}

.yxs-cat-ip__head h3 {
	margin: 0;
	font-size: var(--yxs-fs-ip_name, 19px);
	font-weight: 700;
	color: var(--yxs-heading);
}

.yxs-cat-ip__en {
	margin: 6px 0 12px 27px;
	font-size: var(--yxs-fs-ip_en, 11px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--yxs-muted);
}

.yxs-cat-ip__desc {
	margin: 0 0 0 27px;
	font-size: var(--yxs-fs-ip_desc, 13px);
	line-height: 1.8;
	color: var(--yxs-text);
}

/*
 * v4.7.0：配了图的 IP 改成**上下结构**（图在上、文字在下）。
 * 原来是「图在左 + 文在右」，一行三个之后每列很窄，图文并排非常挤。
 */
.yxs-cat-ip__link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.yxs-cat-ip__entry.has-img .yxs-cat-ip__link {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 14px;
	align-content: start;
}

.yxs-cat-ip__fig {
	overflow: hidden;
	background: transparent;
}

/*
 * v4.7.1：**不裁不拉**，按上传的原图比例自适应高度。
 * 原来写死 aspect-ratio: 4/3 + object-fit: cover → 正方形的图会被裁掉上下两条，
 * 透明 PNG 还会露出 .yxs-cat-ip__fig 的底色。
 * 现在 height:auto + width:100%，并给一个 min-height 兜底（免得极端细长的图把卡片压扁）。
 */
.yxs-cat-ip__fig img {
	display: block;
	width: 100%;
	height: auto;
	max-height: var(--yxs-fs-ip_fig, 340px);
	object-fit: contain;
	background: transparent;
	transition: opacity 0.18s ease;
}

.yxs-cat-ip__link:hover .yxs-cat-ip__fig img {
	opacity: 0.82;
}

/* 「查看更多」小文字链 */
.yxs-cat-ip__more {	display: inline-block;
	margin: 10px 0 0 27px;
	font-size: var(--yxs-fs-ip_more, 11px);
	letter-spacing: 0.06em;
	color: var(--yxs-muted);
	border-bottom: 1px solid var(--yxs-border-strong);
	padding-bottom: 1px;
}

.yxs-cat-ip__link:hover .yxs-cat-ip__more {
	color: var(--yxs-heading);
	border-bottom-color: var(--yxs-heading);
}

/* ---------- 系列 IP：雷达谱系（v4.13.0；v4.13.2 改椭圆自适应） ---------- */

/*
 * 容器就是「轨道画布」：宽屏左右宽、上下窄（1.85:1），窄屏收到 1.45:1，手机正圆。
 * 节点位置是百分比（相对宽/高各算一次），所以容器比例一变，整圈自动摊成椭圆，
 * 不需要另算一套坐标、也不需要 JS 参与。
 */
.yxs-cat-ip__radar {
	position: relative;
	width: min(980px, 100%);
	aspect-ratio: 1.85 / 1;
	margin: 22px auto 14px;

	/*
	 * v4.14.1：精致星图。
	 * 线退到背景里（1px / 低透明度），主体是放大的白盘圆图；
	 * 名字不再用白色圆角底，改用与板块同色的柔光在字周围断开引线。
	 */
	--yxs-radar-line: rgba(17, 17, 17, 0.18);
	--yxs-radar-halo: #f5f5f5;
	--yxs-radar-disc: #ffffff;
	--yxs-radar-disc-border: rgba(17, 17, 17, 0.05);
	--yxs-radar-disc-shadow: 0 18px 44px rgba(17, 17, 17, 0.1);
	--yxs-radar-node-shadow: 0 12px 28px rgba(17, 17, 17, 0.08);

	/* v4.15.1：鼠标 / 触摸视差 3D。JS 在可动效设备上挂 .is-3d。 */
	--yxs-tilt-x: 0deg;
	--yxs-tilt-y: 0deg;
	transform-style: preserve-3d;
}

.yxs-cat-ip__radar.is-3d {
	transform: perspective(900px) rotateX(var(--yxs-tilt-x)) rotateY(var(--yxs-tilt-y));
	will-change: transform;
	/* 触摸拖动只做横向透视，纵向仍交给页面滚动。 */
	touch-action: pan-y;
}

/* 主图与节点在 Z 轴上轻微抬起，倾斜时才有「层次」而不是整张纸在转。 */
.yxs-cat-ip__radar.is-3d .yxs-radar__hub {
	transform: translate(-50%, -50%) translateZ(56px);
}

.yxs-cat-ip__radar.is-3d .yxs-radar__node {
	transform: translate(-50%, -50%) translateZ(30px);
}

/* 系统开启「减少动态」时保持正视图；触摸屏本身是启用的。 */
@media (prefers-reduced-motion: reduce) {
	.yxs-cat-ip__radar.is-3d {
		transform: none;
	}

	.yxs-cat-ip__radar.is-3d .yxs-radar__hub,
	.yxs-cat-ip__radar.is-3d .yxs-radar__node {
		transform: translate(-50%, -50%);
	}
}

/* 暗黑底：线改用半透明白，白盘保留，阴影压深。 */
[data-palette="dark"] .yxs-cat-ip__radar {
	--yxs-radar-line: rgba(255, 255, 255, 0.22);
	--yxs-radar-halo: #151515;
	--yxs-radar-disc: #ffffff;
	--yxs-radar-disc-border: rgba(255, 255, 255, 0.1);
	--yxs-radar-disc-shadow: 0 20px 46px rgba(0, 0, 0, 0.45);
	--yxs-radar-node-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
}

/*
 * 轨道与引线画在 SVG 里（v4.13.2）。
 * preserveAspectRatio="none" → viewBox 的 1 单位 = 容器的 1%，圆自动摊成椭圆；
 * non-scaling-stroke → 线宽不跟着容器拉伸变形。
 */
.yxs-radar__web {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 0;
}

.yxs-radar__web .yxs-radar__ring,
.yxs-radar__web .yxs-radar__spoke {
	position: static;
	fill: none;
	stroke: var(--yxs-radar-line, rgba(17, 17, 17, 0.18));
	stroke-width: 1;
	vector-effect: non-scaling-stroke;
}

/* 轨道只做“谱系感”，更细的虚线、更淡，不与主图抢。 */
.yxs-radar__web .yxs-radar__ring {
	stroke-dasharray: 3 8;
	opacity: 0.38;
}

/* 引线是背景纹理，不是主角。 */
.yxs-radar__web .yxs-radar__spoke {
	opacity: 0.32;
}

.yxs-radar__hub {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 280px;
	text-align: center;
	z-index: 2;
	padding: 0;
	background: none;
}

/*
 * v4.14.1：圆心重新加白色圆盘（不是灰底），用 12px 白边把主图托起来。
 * 白盘 + 极浅描边 + 大软阴影，照片/插画的边缘不再是「贴上去的」。
 */
.yxs-radar__hub .yxs-cat-ip__fig {
	/* span 默认 inline，inline 元素吃不到 width/height —— 必须 block，否则尺寸全失效。 */
	display: block;
	width: 176px;
	height: 176px;
	margin: 0 auto;
	padding: 12px;
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
	background: var(--yxs-radar-disc, #fff);
	border: 1px solid var(--yxs-radar-disc-border, rgba(17, 17, 17, 0.05));
	box-shadow: var(--yxs-radar-disc-shadow, 0 18px 44px rgba(17, 17, 17, 0.1));
}

.yxs-radar__hub .yxs-cat-ip__fig img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	border-radius: 50%;
}

/*
 * 名字不再有白色圆角底。
 * 用与板块同色的极轻柔光在字周围「擦断」引线，视觉上是留白而不是白块。
 */
.yxs-radar__name {
	display: block;
	margin: 0 auto;
	max-width: 260px;
	padding: 10px 0 0;
	background: transparent;
	border-radius: 0;
	font-size: 18px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--yxs-heading);
	text-shadow: 0 0 6px var(--yxs-radar-halo, #f5f5f5), 0 0 12px var(--yxs-radar-halo, #f5f5f5);
}

.yxs-radar__node {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 166px;
	text-align: center;
	z-index: 2;
}

.yxs-radar__link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.yxs-radar__node .yxs-cat-ip__fig {
	display: block;
	width: 124px;
	height: 124px;
	margin: 0 auto 9px;
	padding: 8px;
	box-sizing: border-box;
	border-radius: 50%;
	overflow: hidden;
	background: var(--yxs-radar-disc, #fff);
	border: 1px solid var(--yxs-radar-disc-border, rgba(17, 17, 17, 0.05));
	box-shadow: var(--yxs-radar-node-shadow, 0 12px 28px rgba(17, 17, 17, 0.08));
}

.yxs-radar__node .yxs-cat-ip__fig img {
	width: 100%;
	height: 100%;
	max-height: none;
	object-fit: cover;
	border-radius: 50%;
	transition: transform 0.18s ease;
}

.yxs-radar__link:hover .yxs-cat-ip__fig img {
	transform: scale(1.04);
}

.yxs-radar__kname {
	display: block;
	font-size: 13px;
	line-height: 1.35;
	letter-spacing: 0.05em;
	color: var(--yxs-text);
	text-shadow: 0 0 6px var(--yxs-radar-halo, #f5f5f5), 0 0 12px var(--yxs-radar-halo, #f5f5f5);
}

/*
 * 图下方仍给一份可读条目：小节点放不下长名称与描述。
 * v4.13.2：去掉与雷达之间那条横线，改成纯留白（线会跟椭圆下沿挤在一起）。
 * v4.13.3：选择器提到 (0,2,0) —— Astra 的 `.entry-content ul { padding:revert }` (0,1,1)
 * 会盖掉 (0,1,0) 的 padding:0，线上移动端实测列表被缩进 40px。
 */
.yxs-b2b-wrap .yxs-radar__list {
	list-style: none;
	margin: 46px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 56px;
	row-gap: 0;
}

/*
 * v4.15.0：底部条目从「两列文字」改成「编号 + 名称/英文 + 描述」的目录行。
 * 每行一条细线，主次靠编号与字号区分，hover 只做很轻的底色。
 */
.yxs-radar__li-row {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr);
	column-gap: 14px;
	padding: 18px 0 17px;
	border-top: 1px solid var(--yxs-border, #e5e5e5);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.yxs-radar__li-row:hover {
	background: rgba(17, 17, 17, 0.035);
}

[data-palette="dark"] .yxs-radar__li-row {
	border-top-color: #2c2c2c;
}

[data-palette="dark"] .yxs-radar__li-row:hover {
	background: rgba(255, 255, 255, 0.045);
}

.yxs-radar__li-index {
	font-size: 10px;
	line-height: 1.7;
	letter-spacing: 0.16em;
	color: var(--yxs-muted);
	font-variant-numeric: tabular-nums;
}

.yxs-radar__li-body {
	display: block;
	min-width: 0;
}

.yxs-radar__li-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--yxs-heading);
}

.yxs-radar__li-en {
	margin-left: 8px;
	font-style: normal;
	font-weight: 400;
	font-size: 10px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--yxs-muted);
}

.yxs-radar__li-desc {
	display: block;
	margin-top: 5px;
	font-size: 12.5px;
	line-height: 1.7;
	color: var(--yxs-muted);
}

/*
 * 中屏（平板 / 窄窗口）：椭圆别太扁，纵向半径留着放上下两个节点。
 * ⚠️ 所有断点都必须限定 screen，否则打印（A4 ≈ 794px）会命中，PDF 变成平板/手机版式。
 */
@media screen and (max-width: 1024px) and (min-width: 601px) {
	.yxs-cat-ip__radar {
		aspect-ratio: 1.4 / 1;
	}

	/* 平板：主图 150 / 衍生 112，保持与桌面同一套白盘语言。 */
	.yxs-radar__hub {
		width: 240px;
	}

	.yxs-radar__hub .yxs-cat-ip__fig {
		width: 150px;
		height: 150px;
		padding: 10px;
	}

	.yxs-radar__name {
		max-width: 230px;
		padding-top: 8px;
		font-size: 16px;
	}

	.yxs-radar__node {
		width: 146px;
	}

	.yxs-radar__node .yxs-cat-ip__fig {
		width: 112px;
		height: 112px;
		padding: 8px;
		margin-bottom: 8px;
	}

	.yxs-radar__kname {
		font-size: 12.5px;
	}
}

/*
 * 小屏：收成正圆（不再降级成竖列表——竖列表丢掉了「谱系」这层意思）。
 * 中心与节点同步缩小，保证一圈放得下。
 */
@media screen and (max-width: 600px) {
	.yxs-cat-ip__radar {
		aspect-ratio: 1 / 1;
		width: 100%;
		max-width: 420px;
		margin: 20px auto 0;
	}

	/* 触摸屏 / 小屏保留 3D，但 JS 会把倾角收窄到 ±4.5° / ±3.2°。 */

	/* 手机：主图 104 / 衍生 84（仍比旧版 66 / 60 大一截）。 */
	.yxs-radar__hub {
		width: 190px;
	}

	.yxs-radar__hub .yxs-cat-ip__fig {
		width: 104px;
		height: 104px;
		padding: 8px;
		margin-bottom: 0;
	}

	.yxs-radar__name {
		max-width: 170px;
		margin-top: 0;
		padding-top: 7px;
		font-size: 13px;
		letter-spacing: 0.06em;
		text-shadow: 0 0 5px var(--yxs-radar-halo, #f5f5f5), 0 0 10px var(--yxs-radar-halo, #f5f5f5);
	}

	.yxs-radar__node {
		width: 120px;
	}

	.yxs-radar__node .yxs-cat-ip__fig {
		width: 84px;
		height: 84px;
		padding: 6px;
		margin-bottom: 7px;
	}

	.yxs-radar__kname {
		font-size: 11.5px;
		line-height: 1.25;
		text-shadow: 0 0 5px var(--yxs-radar-halo, #f5f5f5), 0 0 10px var(--yxs-radar-halo, #f5f5f5);
	}

	/*
	 * 移动端底部介绍：上下间距太小 → 调大（行距与顶部留白）；
	 * 左右缩进问题主因是 Astra 的 ul padding（上面已用高优先级修掉），这里保持与雷达同宽。
	 * ⚠️ 选择器必须与基础规则同级 (0,2,0)，否则单列覆盖会输给基础的两列。
	 */
	.yxs-b2b-wrap .yxs-radar__list {
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 0;
		margin-top: 52px;
		padding: 0;
	}

	.yxs-radar__li-row {
		grid-template-columns: 28px minmax(0, 1fr);
		column-gap: 11px;
		padding: 15px 0 14px;
	}

	.yxs-radar__li-name {
		font-size: 13.5px;
	}

	.yxs-radar__li-desc {
		font-size: 12px;
		line-height: 1.65;
	}
}

/* 精选商品 */
.yxs-cat-groups {
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.yxs-cat-group__head {
	margin: 0 0 22px;
	font-size: var(--yxs-fs-group_head, 15px);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--yxs-heading);
}

.yxs-cat-group__head span {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 2px solid var(--yxs-heading);
}

/*
 * 列数由后台配置：
 *   3 / 4 / 5  → 固定列数；
 *   auto       → 真自适应（auto-fill），1440 约 5 列、1024 约 4 列，越窄自动越少。
 * 变量写在 .yxs-b2b-wrap 根节点上（模板输出），这里直接消费。
 */
.yxs-cat-cards {
	display: grid;
	grid-template-columns: repeat(var(--yxs-cat-cols, 3), minmax(0, 1fr));
	gap: 28px 24px;
}

/* auto 是字符串不是数字，CSS 里没法直接进 repeat()；模板在根节点加 .yxs-b2b-wrap--autocols 来切换。 */
.yxs-b2b-wrap--autocols .yxs-cat-cards {
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

/*
 * v4.7.1：卡片**完全透明**——描边去掉后不该又加一块底色，
 * 现在两个都是 0，就是"只有图和字浮在页面上"。
 * 悬停只做 2px 上浮，不加底色（加了又变回色块）。
 */
.yxs-cat-card {
	position: relative;
	border: 0;
	background: transparent;
	display: flex;
	flex-direction: column;
	transition: transform 0.15s ease;
}

.yxs-cat-card:hover {
	transform: translateY(-2px);
}

/*
 * 整卡可点：一个覆盖整卡的透明链接。
 * 用它而不是给图片/标题/按钮各包一个 <a>——三处重复链接对读屏软件是噪音，
 * 也会让 Tab 键在同一个商品上停三次。aria-labelledby 指向标题，所以读屏念的仍是商品名。
 */
.yxs-cat-card__overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	text-decoration: none;
}

.yxs-cat-card__overlay:focus-visible {
	outline: 2px solid var(--yxs-heading);
	outline-offset: 2px;
}

/*
 * v4.7.1：卡片整体透明后，这块灰底（--yxs-bg-alt）会很显眼 → 一并去掉。
 * 用 aspect-ratio 而不是固定 height：这样每行卡片高度一致，栅格不会歪。
 */
.yxs-cat-card__img {
	aspect-ratio: 1 / 1;
	background: transparent;
	overflow: hidden;
}

.yxs-cat-card__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.yxs-cat-card__ph {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(45deg, #f0f0f0, #f0f0f0 10px, #f6f6f6 10px, #f6f6f6 20px);
}

/* v4.7.1：卡片没有边框/底色了，原本给内边距留的 16px 现在显得松，收紧到 10px。 */
.yxs-cat-card__body {
	padding: 10px 10px 14px;
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}

.yxs-cat-card__name {
	display: block;
	margin: 0;
	/* v4.7.1：标题与分类同为小号黑字，弱化成"附属信息"，视觉重心交给图片。 */
	font-size: var(--yxs-fs-card_name, 12.5px);
	line-height: 1.5;
	font-weight: 400;
	color: var(--yxs-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* v4.7.1：与标题同为小号黑字，两者视觉权重一致。 */
.yxs-cat-card__sku {
	margin-top: 2px;
	font-size: var(--yxs-fs-card_sku, 12.5px);
	line-height: 1.5;
	letter-spacing: 0.01em;
	color: var(--yxs-heading);
	opacity: 0.75;
}

/* 无权限时显示的零售价标记（零售价是公开信息，不加任何"登录可见"占位）。 */
.yxs-cat-card__retail {
	font-style: normal;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--yxs-muted);
	background: var(--yxs-bg-alt);
	border: 1px solid var(--yxs-border);
	border-radius: 2px;
	padding: 1px 5px;
	margin-right: 6px;
	vertical-align: 1px;
}

.yxs-cat-card__divider {
	height: 1px;
	background: var(--yxs-border);
	margin: 8px 0 7px;
}

.yxs-cat-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-top: auto;
}

/* v4.7.1：价格比文字大一点即可，不必抢图片的视觉重心。 */
.yxs-cat-card__price {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 6px;
	font-size: var(--yxs-fs-card_price, 14px);
	font-weight: 600;
	color: var(--yxs-heading);
}

/* 价格数字本身 */
.yxs-cat-card__amount {
	white-space: nowrap;
}

/*
 * v4.8.0：价格前的小标签（带框）。
 * 字号跟分类一致（11px），实心黑框白字——够醒目又不抢价格的视觉重心。
 */
/*
 * v4.8.1：标签的圆角 / 字号 / 前景 / 描边 / 背景全部后台可配。
 *
 * ⚠️ 渠道价默认从 v4.8.0 的「实心黑」改成「描边」——
 * 一页45 张卡全是黑块，视觉噪音太大，实测后你反馈"有点重"。
 * 想改回实心：后台「价格标签 · 渠道价背景」填 #222 即可。
 */
.yxs-cat-card__tag {
	display: inline-block;
	padding: 1px 5px;
	border: 1px solid var(--yxs-tag-channel-bd, #111111);
	border-radius: var(--yxs-tag-radius, 2px);
	font-style: normal;
	font-size: var(--yxs-tag-font, 11px);
	line-height: 1.5;
	font-weight: 500;
	color: var(--yxs-tag-channel-fg, #111111);
	background: var(--yxs-tag-channel-bg, transparent);
	white-space: nowrap;
	align-self: center;
}

/* 零售价标签：描边、字更浅（普通用户只关心价格本身）。 */
.yxs-cat-card__tag--retail {
	color: var(--yxs-tag-retail-fg, #555555);
	border-color: var(--yxs-tag-retail-bd, #555555);
	background: transparent;
	font-weight: 400;
}

/*
 * 渠道商看到的「零售价划掉」——方便一眼比出渠道优惠了多少。
 * 颜色压到最浅，不要和主价格抢眼。
 */
/* v4.8.1：默认比 v4.8.0 更浅（#767676 → #b0b0b0），别跟主价格抢眼。 */
.yxs-cat-card__was {
	display: inline-block;
	font-style: normal;
	font-size: var(--yxs-tag-was-font, 11px);
	font-weight: 400;
	color: var(--yxs-tag-was-color, #b0b0b0);
	text-decoration: line-through;
	white-space: nowrap;
	align-self: center;
}

.yxs-cat-card__price em {
	font-style: normal;
	font-size: 11px;
	font-weight: 600;
	color: var(--yxs-muted);
	margin-left: 6px;
}

/*
 * 「去下单」现在只是文字，由覆盖整卡的 .yxs-cat-card__overlay 负责点击，
 * 所以这里 pointer-events: none —— 否则它会截住鼠标事件、hover 样式失效。
 */
/* 桌面显示「去下单」，手机显示「查看详情」。 */
.yxs-cat-card__buy--mob {
	display: none;
}

.yxs-cat-card__buy {
	font-size: 13px;
	font-weight: 600;
	color: var(--yxs-heading);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: 1px solid var(--yxs-heading);
	padding-bottom: 1px;
	pointer-events: none;
	transition: opacity 0.15s ease;
}

.yxs-cat-card:hover .yxs-cat-card__buy {
	opacity: 0.65;
}

.yxs-catalog__empty {
	padding: 40px;
	text-align: center;
	color: var(--yxs-muted);
	background: var(--yxs-bg-alt);
	border: 1px dashed var(--yxs-border-strong);
}

/*
 * 现场图集：四种版式，全部做到「图片之间零白缝」。
 *
 * ⚠️ 之前露白缝的根因：杂志式让首图 grid-row: span 2，行高被它撑高，
 * 而其余图锁死 aspect-ratio: 4/3 填不满行高 → 格子内部露出白底。
 * 修法：**不再让格子高度由图片比例决定**——统一用固定行高（或固定 flex 行高），
 * 图片一律 height:100% + object-fit:cover 填满自己的格子。
 */

/*
 * ⚠️ `padding: 0` 必须带 !important 并把选择器提到 (0,2,0)。
 * Astra 主题有 `.entry-content ul { padding: revert }`（优先级 0,1,1），
 * `revert` 会退回**浏览器默认的 padding-inline-start: 40px** → 整块现场图右移 40px。
 * 这个坑在货盘列表那踩过一次，现场区漏了。
 */
.yxs-b2b-wrap .yxs-cat-exhibit__grid {
	margin: 0;
	padding: 0 !important;
	list-style: none;
	gap: 1px;
}

.yxs-cat-exhibit__item {
	margin: 0;
	background: var(--yxs-bg);
	min-width: 0;
}

.yxs-cat-exhibit__link {
	position: relative;
	display: block;
	height: 100%;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}

.yxs-cat-exhibit__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity 0.18s ease;
}

/*
 * ① 两端对齐画廊（默认）：每行自动铺满整宽，行高固定。
 *
 * 两个坑都要避开：
 *  a) `flex: 1 1 auto` —— 图片 width:100% 让 flex 基准无法解析 → 整行塌成一张。
 *  b) `flex-basis: 0` —— 基准为 0 时**永远不会换行**，所有图被挤在一行里。
 * 所以：基准给一个百分比（决定一行放几张），flex-grow 再按图片真实宽高比
 * （模板输出的 --ar）分配剩余空间 → 每行正好铺满 100%，宽窄符合各自比例。
 */
.yxs-b2b-wrap .yxs-cat-exhibit__grid--justified {
	display: flex;
	flex-wrap: wrap;
}

.yxs-cat-exhibit__grid--justified > .yxs-cat-exhibit__item {
	flex: var(--ar, 1.5) 1 var(--yxs-expo-basis, 22%);
	height: var(--yxs-expo-row, 200px);
}

/* ② 瀑布流：高矮不一自然下垂，天生不可能有缝 */
.yxs-b2b-wrap .yxs-cat-exhibit__grid--masonry {
	column-count: 3;
	column-gap: 1px;
}

.yxs-cat-exhibit__grid--masonry > .yxs-cat-exhibit__item {
	break-inside: avoid;
	margin-bottom: 1px;
}

.yxs-cat-exhibit__grid--masonry .yxs-cat-exhibit__img {
	height: auto;
	object-fit: initial;
}

/* ③ 统一等高网格：全部切同一比例 */
.yxs-b2b-wrap .yxs-cat-exhibit__grid--grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: var(--yxs-expo-row, 200px);
}

/* ④ 编辑式混排：首图跨两行，行高由 grid-auto-rows 统一给，格子里不会露白 */
.yxs-b2b-wrap .yxs-cat-exhibit__grid--magazine {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	grid-auto-rows: calc(var(--yxs-expo-row, 200px) / 2);
}

.yxs-cat-exhibit__grid--magazine > .yxs-cat-exhibit__item:first-child {
	grid-row: span 2;
}

/*
 * 题注：默认不显示，hover 才从底部浮出。
 * 手机没有 hover（且点击会跳走），所以 ≤900px 直接不渲染题注。
 */
.yxs-cat-exhibit__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 22px 12px 10px;
	font-size: var(--yxs-fs-expo_cap, 11px);
	letter-spacing: 0.05em;
	line-height: 1.5;
	color: #fff;
	background: rgba(0, 0, 0, 0.86);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease;
}

.yxs-cat-exhibit__link:hover .yxs-cat-exhibit__img,
.yxs-cat-exhibit__link:focus-visible .yxs-cat-exhibit__img {
	opacity: 0.82;
}

.yxs-cat-exhibit__link:hover .yxs-cat-exhibit__cap,
.yxs-cat-exhibit__link:focus-visible .yxs-cat-exhibit__cap {
	opacity: 1;
	transform: translateY(0);
}

/* 联系 */
.yxs-catalog__sec--contact {
	background: var(--yxs-bg-alt);
}

.yxs-cat-contact__grid {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: start;
}

.yxs-cat-contact__info {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.yxs-cat-contact__row {
	display: flex;
	gap: 16px;
	font-size: var(--yxs-fs-contact, 15px);
	border-bottom: 1px solid var(--yxs-border);
	padding-bottom: 12px;
}

.yxs-cat-contact__row span {
	color: var(--yxs-muted);
	min-width: 56px;
}

.yxs-cat-contact__row b {
	font-weight: 600;
	color: var(--yxs-heading);
}

.yxs-cat-contact__qr {
	text-align: center;
	font-size: 12px;
	color: var(--yxs-muted);
}

.yxs-cat-contact__qr img {
	width: 140px;
	height: 140px;
	object-fit: contain;
	border: 1px solid var(--yxs-border);
	background: #fff;
	margin-bottom: 8px;
}

.yxs-catalog__colophon {
	margin: 48px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--yxs-border);
	font-size: 12px;
	color: var(--yxs-muted);
}

/*
 * ============================================================
 * v4.8.2：手册整体风格预设（后台「样式」面板可切，默认 classic）
 * ============================================================
 *
 * 两套预设都只做「改变量 + 少量布局」，不新增 DOM、不改结构：
 *  - 经典 classic：不挂类，即下方默认规则，零变化；
 *  - 画报 editorial：大标题 / 衬线感 / 封面单列满宽 / 商品两列大图；
 *  - 暗黑 dark：黑底白字 / 强对比 / 细边框。
 *
 * ⚠️ 站点是黑白灰单色系，这里也只动排版与留白，不动色相。
 * ⚠️ 移动端断点（≤900 / ≤782 / ≤520）在后面，预设规则放在它们之前，
 *    需要时由断点内的规则继续覆盖（预设不参与响应式微调，避免互相打架）。
 */

/* ==========================================================
 * v4.11.0：模块化主题
 *
 * 以前这些差异都挂在 `.yxs-cat-theme--editorial`（整包）下，
 * 结果「只想要画报的封面」也会连带动到 IP / 商品 / 联系，
 * 无法自由组合。现在按**模块**拆开：
 *   [data-mod-type]     排版气质
 *   [data-mod-cover]    封面
 *   [data-mod-products] 商品区
 *   [data-mod-ip]       系列 IP
 *   [data-mod-contact]  联系方式
 *   [data-palette]      配色（明亮 / 暗黑）
 * 主题只是「每个模块选哪个值」，所以任意组合都不互相污染。
 * ========================================================== */

/* ---------- 排版 type=editorial（画报气质：衬线大标题 + 更松的行距） ---------- */

[data-mod-type="editorial"] {
	--yxs-fs-cover_title: 56px;
	--yxs-fs-cover_lead: 17px;
	--yxs-fs-sec_title: 26px;
	--yxs-fs-card_name: 14px;
	--yxs-fs-card_price: 16px;
}

[data-mod-type="editorial"] .yxs-catalog__cover-title {
	font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.24;
}

[data-mod-type="editorial"] .yxs-catalog__cover-lead {
	max-width: 60ch;
	line-height: 2.05;
}

[data-mod-type="editorial"] .yxs-cat-eyebrow {
	letter-spacing: 0.34em;
}

[data-mod-type="editorial"] .yxs-cat-sec__head h2 {
	font-family: "Songti SC", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
	font-weight: 600;
}

/* 章节头：编号 + 标题靠左同行，下压一条通栏细线。 */
[data-mod-type="editorial"] .yxs-cat-sec__head {
	justify-content: flex-start;
	gap: 14px;
	margin-bottom: 30px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--yxs-border);
}

/* ---------- 封面 cover=overlay（整幅背景图 + 文字压图） ---------- */

[data-mod-cover="overlay"] .yxs-catalog__cover {
	position: relative;
	overflow: hidden;
}

[data-mod-cover="overlay"] .yxs-catalog__cover-fig {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

[data-mod-cover="overlay"] .yxs-catalog__cover-fig .yxs-cat-cover__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* 纯色蒙层（颜色与不透明度后台可调），保证白字在任何图上都可读。 */
[data-mod-cover="overlay"] .yxs-catalog__cover-fig::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--yxs-editorial-mask, #000000);
	opacity: var(--yxs-editorial-mask-opacity, 0.2);
}

[data-mod-cover="overlay"] .yxs-catalog__cover-grid {
	grid-template-columns: 1fr;
	gap: 36px;
	position: relative;
	z-index: 2;
	min-height: 62vh;
	align-content: end;
	padding-top: 120px;
	padding-bottom: 56px;
}

[data-mod-cover="overlay"] .yxs-catalog__cover-text {
	position: relative;
	z-index: 2;
	color: #ffffff;
}

[data-mod-cover="overlay"] .yxs-catalog__cover-title,
[data-mod-cover="overlay"] .yxs-catalog__cover-lead {
	color: #ffffff !important;
}

[data-mod-cover="overlay"] .yxs-catalog__cover-meta,
[data-mod-cover="overlay"] .yxs-catalog__cover-source,
[data-mod-cover="overlay"] .yxs-cat-eyebrow {
	color: rgba(255, 255, 255, 0.85);
}

/* ---------- 商品区 products=magazine（两列 + 首图跨整行） ---------- */

[data-mod-products="magazine"] .yxs-cat-cards {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
}

[data-mod-products="magazine"] .yxs-cat-card__img {
	aspect-ratio: 4 / 5;
}

[data-mod-products="magazine"] .yxs-cat-card__body {
	padding: 14px 12px 18px;
	gap: 5px;
}

[data-mod-products="magazine"] .yxs-cat-card:first-child {
	grid-column: 1 / -1;
}

[data-mod-products="magazine"] .yxs-cat-card:first-child .yxs-cat-card__img {
	aspect-ratio: 16 / 9;
}

/* ---------- 系列 IP ip=stagger（左右交错图文） ---------- */

[data-mod-ip="stagger"] .yxs-cat-ip__entry.has-img .yxs-cat-ip__link {
	grid-template-columns: 1.1fr 1fr;
	grid-template-rows: auto;
	align-items: center;
	gap: 24px;
}

[data-mod-ip="stagger"] .yxs-cat-ip__entry:nth-child(even).has-img .yxs-cat-ip__link {
	direction: rtl;
}

[data-mod-ip="stagger"] .yxs-cat-ip__entry:nth-child(even).has-img .yxs-cat-ip__link > * {
	direction: ltr;
}

/* ---------- 联系方式 contact=two-col（左信息右二维码两栏） ---------- */

[data-mod-contact="two-col"] .yxs-cat-contact__grid {
	grid-template-columns: 1.4fr 1fr;
	align-items: start;
}

/* ---------- logo 两版：按 palette 自动切换（v4.11.0） ---------- */

.yxs-catalog__logo.has-dark-logo .yxs-logo--dark {
	display: none;
}

[data-palette="dark"] .yxs-catalog__logo.has-dark-logo .yxs-logo--light {
	display: none;
}

[data-palette="dark"] .yxs-catalog__logo.has-dark-logo .yxs-logo--dark {
	display: block;
}

/*
 * v4.13.2：logo 版本可按主题手动指定（data-yxs-logo 由后台「Logo 用哪一版」注入）。
 * 用在哪版不该只看配色——文字压图（overlay）时封面图本身是深是浅才决定 logo 反不反白，
 * 所以后台给了显式选择； specificity (0,4,0) 高于上面的 palette 规则 (0,3,0)，无需 !important。
 */
[data-yxs-logo="dark"] .yxs-catalog__logo.has-dark-logo .yxs-logo--light {
	display: none;
}

[data-yxs-logo="dark"] .yxs-catalog__logo.has-dark-logo .yxs-logo--dark {
	display: block;
}

[data-yxs-logo="light"] .yxs-catalog__logo.has-dark-logo .yxs-logo--light {
	display: block;
}

[data-yxs-logo="light"] .yxs-catalog__logo.has-dark-logo .yxs-logo--dark {
	display: none;
}

/* ---------- IP 配图两版：按 palette 自动切换（v4.11.1） ---------- */

.yxs-cat-ip__fig--pair .yxs-ip-img--dark {
	display: none;
}

[data-palette="dark"] .yxs-cat-ip__fig--pair .yxs-ip-img--light {
	display: none;
}

[data-palette="dark"] .yxs-cat-ip__fig--pair .yxs-ip-img--dark {
	display: block;
}

/* ---------- 暗黑 dark（原「简约」改名，v4.10.0） ---------- */

[data-palette="dark"] {
	--yxs-text: #eeeeee;
	--yxs-heading: #ffffff;
	--yxs-muted: #9a9a9a;
	--yxs-bg: #111111;
	--yxs-bg-alt: #191919;
	--yxs-border: #2c2c2c;
	--yxs-border-strong: #4a4a4a;
	--yxs-fs-cover_title: 40px;
	--yxs-fs-cover_lead: 15px;
	--yxs-fs-sec_title: 21px;
	--yxs-fs-card_name: 12.5px;
	--yxs-fs-card_price: 14px;
	/* v4.13.1：先认「底色」，没设才用暗黑默认黑。 */
	background: var(--yxs-cat-bg, var(--yxs-dark-bg, #0b0b0b));
	color: var(--yxs-text);
}

/*
 * 各板块可能带内联背景色（设置里配的），暗黑下只给**默认深色**。
 * ⚠️ 不能再用 !important：v4.13.1 起「板块底色」每个主题都能设，内联值必须能压过默认。
 */
[data-palette="dark"] .yxs-catalog__nav,
[data-palette="dark"] .yxs-catalog__cover {
	background: var(--yxs-cat-bg, var(--yxs-dark-bg, #0b0b0b));
	color: var(--yxs-text);
}

/* 板块之间做「黑 / 深灰」的层次，避免一片死黑；底色后台可调。 */
[data-palette="dark"] .yxs-catalog__sec {
	background: var(--yxs-cat-bg, var(--yxs-dark-bg, #0b0b0b));
	color: var(--yxs-text);
}

[data-palette="dark"] .yxs-cat-sec--ip,
[data-palette="dark"] .yxs-cat-sec--prod,
[data-palette="dark"] .yxs-cat-sec--cust {
	background: var(--yxs-dark-bg-alt, #151515);
}

[data-palette="dark"] .yxs-catalog__sec + .yxs-catalog__sec {
	border-top: 1px solid #242424;
}

/* 章节编号在深色下压成偏灰，标题保持白，形成主次。 */
[data-palette="dark"] .yxs-cat-sec__index {
	color: #8a8a8a;
}

/* 暗黑下所有区块标题强制浅色（否则会被 Astra 的 h2 深色盖住）。 */
[data-palette="dark"] .yxs-cat-sec__head h2,
[data-palette="dark"] .yxs-cat-sec__head .yxs-cat-sec__title {
	color: #ffffff !important;
}

/* 区块分隔线提亮，强化层次（原来 #242424 太贴底色）。 */
[data-palette="dark"] .yxs-catalog__sec,
[data-palette="dark"] .yxs-cat-sec {
	border-top-color: #333333 !important;
}

/* 联系区链接（官网 URL 等）在深色底上必须浅色可读。 */
[data-palette="dark"] .yxs-cat-contact a,
[data-palette="dark"] .yxs-cat-contact__row a,
[data-palette="dark"] .yxs-cat-contact__info a {
	color: #eaeaea !important;
}

[data-palette="dark"] .yxs-cat-contact a:hover {
	color: #ffffff !important;
}

/* 打印 / 存 PDF 等主按钮在深色底上反色，保证清楚。 */
[data-palette="dark"] .yxs-b2b-btn--primary {
	background: #f2f2f2;
	border-color: #f2f2f2;
	color: #111111;
}

[data-palette="dark"] .yxs-b2b-btn--primary:hover {
	background: #ffffff;
	border-color: #ffffff;
	color: #111111;
}

[data-palette="dark"] .yxs-catalog__nav {
	border-color: #2c2c2c;
}

/* 封面标题在深色下强制白字（避免被 Astra 的 h1 颜色覆盖）。 */
[data-palette="dark"] .yxs-catalog__cover-title {
	color: #ffffff !important;
}

/*
 * v4.10.4：手册内所有标题在暗黑下一律反白。
 *
 * 根因：IP 单条名称是 h3，走的是 `color: var(--yxs-heading)`；变量本身在
 * [data-palette="dark"] 上已改成 #ffffff，但 Astra 主题的
 * `.entry-content h3`（同为 0,1,1）会盖过来，于是标题仍是深灰、在深色底上几乎看不见。
 * 与 h1/h2 同病，这里统一用 !important 拿回控制权。
 */
[data-palette="dark"] :is(h1, h2, h3, h4, h5, h6),
[data-palette="dark"] .yxs-cat-ip__head h3 {
	color: #ffffff !important;
}

/* IP 单条的说明文字给一点点灰度，标题才立得起来（标题白、正文 #dcdcdc）。 */
[data-palette="dark"] .yxs-cat-ip__desc {
	color: #dcdcdc !important;
}

/* IP 单条的编号与英文名用弱一档的白，保持层次但不至于看不见。 */
[data-palette="dark"] .yxs-cat-ip__no,
[data-palette="dark"] .yxs-cat-ip__en {
	color: #b4b4b4 !important;
}

/* 「查看更多 →」在深色底上要能看清。 */
[data-palette="dark"] .yxs-cat-ip__more {
	color: #ffffff !important;
	border-bottom-color: #6a6a6a !important;
}

/* 卡片文字与价格标签在深色下重设，保证可读。 */
[data-palette="dark"] .yxs-cat-card__name,
[data-palette="dark"] .yxs-cat-card__sku {
	color: var(--yxs-text);
}

[data-palette="dark"] .yxs-cat-card__divider {
	background: #2c2c2c;
}

[data-palette="dark"] .yxs-cat-card__tag--channel,
[data-palette="dark"] .yxs-cat-card__tag--retail {
	background: #1a1a1a;
	color: #f2f2f2;
	border-color: #4a4a4a;
}

[data-palette="dark"] .yxs-cat-card__was {
	color: #8a8a8a;
}

/* 图片留一点深色底，避免白底图刺眼。 */
[data-palette="dark"] .yxs-cat-card__img {
	background: #1a1a1a;
}

/* 主题切换器在暗黑下也反色。 */
[data-palette="dark"] .yxs-cat-themeswitch__btn {
	background: #1a1a1a;
	color: #eaeaea;
	border-color: #4a4a4a;
}

[data-palette="dark"] .yxs-cat-themeswitch__btn.is-active {
	background: #f2f2f2;
	color: #111111;
	border-color: #f2f2f2;
}

/*
 * 移动端：单列 + 收窄间距
 *
 *⚠️ 所有响应式断点都必须限定 `screen`。
 * v4.4.0 之前写的是裸 `@media (max-width: …)`，**打印时也会命中**——
 * 打印视口宽度≈A4 纸宽 794px，正好落进这个断点，于是导出的 PDF 是平板版式。
 */
@media screen and (max-width: 900px) {
	.yxs-catalog__cover-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.yxs-catalog__cover-title {
		/* 手机端保持比例：按桌面值的 0.75 缩，不写死 30px。 */
		font-size: calc(var(--yxs-fs-cover_title, 40px) * 0.75);
	}

	.yxs-catalog__cover-fig {
		/* 手机端必须满宽：之前 max-width:360px 会让图靠左、右侧空一片（经典/画报都中招）。 */
		max-width: none;
		width: 100%;
	}

	/* IP 介绍：平板 2 列（3 列在 1024 每列太窄，标题和描述会挤在一起）。 */
	.yxs-cat-ip__entries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 28px;
	}

	.yxs-cat-ip__entry.has-img {
		grid-template-columns: 96px 1fr;
		gap: 16px;
	}

	/* 平板：不管后台配几列，一律降成 2 列（5 列在 1024 会挤到没法看）。 */
	.yxs-cat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.yxs-b2b-wrap--autocols .yxs-cat-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* 手机没有 hover，题注就永远不出现 → 干脆不渲染，省一次绘制。 */
	.yxs-cat-exhibit__cap {
		display: none;
	}

	/* 四种版式在平板下的降级 */
	.yxs-b2b-wrap .yxs-cat-exhibit__grid--grid,
	.yxs-b2b-wrap .yxs-cat-exhibit__grid--magazine {
		grid-template-columns: repeat(2, 1fr);
	}

	.yxs-b2b-wrap .yxs-cat-exhibit__grid--masonry {
		column-count: 2;
	}

	/* 行高压低 + 一行 2 张，平板上一屏能看到更多 */
	.yxs-cat-exhibit__grid {
		--yxs-expo-row: 160px;
		--yxs-expo-basis: 46%;
	}

	/* 混排主位在两列下没有意义，回到普通格子。 */
	.yxs-cat-exhibit__grid--magazine > .yxs-cat-exhibit__item:first-child {
		grid-row: auto;
	}

	.yxs-cat-contact__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

@media screen and (max-width: 520px) {
	.yxs-b2b-wrap .wrap {
		padding-left: 18px;
		padding-right: 18px;
	}

	.yxs-catalog__sec {
		padding: 44px 0;
	}

	.yxs-catalog__cover {
		padding: 40px 0 36px;
	}

	.yxs-catalog__cover-meta {
		gap: 20px;
	}

	/* 手机：IP 介绍回单列，3 列在这个宽度没法读。 */
	/* v4.7.1：手机端 IP 介绍改成一行 2 个（原来 1 个，一屏只能看到一个）。 */
	.yxs-cat-ip__entries {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0;
	}

	.yxs-cat-cards,
	.yxs-b2b-wrap--autocols .yxs-cat-cards {
		/* 手机列数后台可配 1 / 2 / 3（默认 2）。 */
		grid-template-columns: repeat(var(--yxs-cat-cols-m, 2), minmax(0, 1fr));
	}

	/* v4.7.0：现场图在手机统一一行 2 张（瀑布流原来会降成 1 张，这里统一掉）。 */
	.yxs-b2b-wrap .yxs-cat-exhibit__grid--grid,
	.yxs-b2b-wrap .yxs-cat-exhibit__grid--magazine {
		grid-template-columns: repeat(2, 1fr);
	}

	.yxs-b2b-wrap .yxs-cat-exhibit__grid--masonry {
		column-count: 2;
	}

	.yxs-cat-exhibit__grid {
		--yxs-expo-row: 140px;
		--yxs-expo-basis: 46%;
	}

	/* 卡片按钮：手机换成「查看详情」（只换文案，链接不变）。 */
	.yxs-cat-card__buy--desk {
		display: none;
	}

	.yxs-cat-card__buy--mob {
		display: inline;
	}

	.yxs-catalog__nav-links {
		display: none;
	}

	.yxs-catalog__nav-tools {
		margin-left: auto;
	}
}

/*
 * ============================================================================
 * v4.8.0：后台可配的对齐方式 + 品牌 Logo
 * ============================================================================
 */

/* 默认全部左对齐。 */
.yxs-catalog__cover,
.yxs-cat-sec--ip,
.yxs-cat-sec--expo,
.yxs-cat-sec--products,
.yxs-cat-sec--contact {
	text-align: left;
}

/*
 * 居中：根节点带 --yxs-align-xxx:center 时对应板块居中。
 * 用属性选择器匹配行内变量（变量只写在配了的板块上，没配的不匹配）。
 */
.yxs-b2b-wrap[style*="--yxs-align-cover:center"] .yxs-catalog__cover,
.yxs-b2b-wrap[style*="--yxs-align-ip:center"] .yxs-cat-sec--ip,
.yxs-b2b-wrap[style*="--yxs-align-expo:center"] .yxs-cat-sec--expo,
.yxs-b2b-wrap[style*="--yxs-align-products:center"] .yxs-cat-sec--products,
.yxs-b2b-wrap[style*="--yxs-align-contact:center"] .yxs-cat-sec--contact {
	text-align: center;
}

/* 只让大标题居中、卡片还左对齐会很怪，下面这些跟着一起居中。 */
.yxs-b2b-wrap[style*="--yxs-align-products:center"] .yxs-cat-group__head,
.yxs-b2b-wrap[style*="--yxs-align-ip:center"] .yxs-cat-ip__head,
.yxs-b2b-wrap[style*="--yxs-align-ip:center"] .yxs-cat-ip__more,
.yxs-b2b-wrap[style*="--yxs-align-contact:center"] .yxs-cat-contact__row {
	text-align: center;
	justify-content: center;
}

/* 自定义板块居中（v4.9.0）：对齐是内联 text-align:center 写在 section 上，
   标题条是 flex space-between，需单独把标题+编号收到中间。 */
.yxs-cat-sec--custom[style*="text-align:center"] .yxs-cat-sec__head {
	justify-content: center;
}

/* 品牌 Logo（后台勾了「显示 Logo」才渲染） */
.yxs-catalog__logo {
	margin-bottom: 14px;
}

.yxs-catalog__logo img {
	display: block;
	max-width: 100%;
	max-height: var(--yxs-logo-size, 64px);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* 有 Logo 时隐藏眉题里的品牌名文字，避免和 Logo 重复。 */
.yxs-cat-eyebrow--hidden-name {
	display: none;
}

/* 打印 */

@media print {

	/*
	 * v4.7.1：模块背景色**不参与打印**。
	 * 后台能设彩色底，但纸上打印彩色很难看，也会浪费墨 → 一律压成白底。
	 * 内联 style 优先级高于样式表，必须用 !important 才压得住。
	 */
	.yxs-catalog__cover,
	.yxs-catalog__sec {
		background: #fff !important;
	}

	/* 卡片保持透明（打印时淡底色靠 -webkit-print-color-adjust，不自然）。 */
	.yxs-cat-card {
		background: transparent !important;
	}

	.yxs-cat-card__img,
	.yxs-cat-ip__fig {
		background: transparent !important;
	}

	.yxs-b2b-toolbar,
	.yxs-b2b-filters,
	.yxs-b2b-actionbar,
	.yxs-b2b-pagination,
	.yxs-b2b-col--qty,
	.yxs-b2b-col--actions,
	.yxs-b2b-col--check,
	.yxs-catalog__nav,
	[data-yxs-b2b="catalog-print"],
	.yxs-catalog__cover-source {
		display: none !important;
	}

	.yxs-b2b-table-scroll {
		overflow: visible;
		border: 0;
	}

	.yxs-b2b-wrap {
		font-size: 11pt;
		color: #000;
	}

	.yxs-catalog__sec {
		padding: 18pt 0;
		border-top: 1px solid #ccc;
		page-break-inside: avoid;
	}

	.yxs-cat-ip__entry,
	.yxs-cat-card,
	.yxs-cat-exhibit__item,
	.yxs-cat-exhibit__img {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* 打印时整卡链接无意义，去掉避免空白热区影响选区。 */
	.yxs-cat-card__overlay {
		display: none !important;
	}

	.yxs-catalog__cover {
		padding-top: 0;
	}

	.yxs-catalog__cover-fig,
	.yxs-cat-card__img,
	.yxs-cat-exhibit__img,
	.yxs-cat-cover__img,
	.yxs-cat-contact__qr img {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/*
	 * 手册打印版式（v4.5.0）
	 *
	 * 断点全部限定了 `screen`，打印不再命中响应式规则，于是这里可以安心
	 * 强制一套「桌面密度」：内容区固定 1020px 居中 + 卡片 3 列。
	 * 不这么做的话，A4 纸宽会把版面压成两列窄图，看起来像平板。
	 */
	.yxs-b2b-wrap .wrap {
		max-width: 1020px;
		width: 100%;
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
	}

	.yxs-cat-cards,
	.yxs-b2b-wrap--autocols .yxs-cat-cards {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* IP 介绍打印时也保持一行三个（用户要求）。 */
	.yxs-cat-ip__entries {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 0 24px;
	}

	/*
	 * 现场图集打印：四种版式里只有「两端对齐」在纸面上每行都铺满，
	 * 瀑布流在打印时列宽会被浏览器重排、杂志式跨行会被页边界切断，
	 * 所以打印**强制**两端对齐 + 3 列当量行高。
	 */
	.yxs-cat-exhibit__grid--masonry,
	.yxs-cat-exhibit__grid--grid,
	.yxs-b2b-wrap .yxs-cat-exhibit__grid--magazine {
		display: flex;
		flex-wrap: wrap;
		grid-template-columns: none;
		column-count: none;
	}

	.yxs-cat-exhibit__grid--magazine > .yxs-cat-exhibit__item:first-child {
		grid-row: auto;
	}

	.yxs-cat-exhibit__grid {
		--yxs-expo-row: 130px;
		--yxs-expo-basis: 30%;
	}

	.yxs-cat-exhibit__grid--masonry .yxs-cat-exhibit__img {
		height: 100%;
		object-fit: cover;
	}

	/* 打印没有 hover，题注必须常驻，否则图注全丢。 */
	.yxs-cat-exhibit__cap {
		display: block !important;
		position: static;
		opacity: 1 !important;
		transform: none !important;
		padding: 6px 10px;
		color: #000;
		background: #fff;
		border: 1px solid #ccc;
		border-top: 0;
	}

	.yxs-cat-exhibit__link:hover .yxs-cat-exhibit__img {
		opacity: 1;
	}

	.yxs-cat-exhibit__img {
		border: 0;
	}
}

/* ── 商品手册主题切换器（仅已开通 B2B 客户可见，v4.9.6）────────── */
.yxs-b2b-wrap .yxs-cat-themeswitch {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 6px;
	padding: 12px 16px 0;
}

.yxs-cat-themeswitch__btn {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid rgba(17, 17, 17, 0.18);
	background: #fff;
	color: #333;
	font-size: 12px;
	line-height: 1;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.yxs-cat-themeswitch__btn:hover {
	border-color: #111;
}

.yxs-cat-themeswitch__btn.is-active {
	background: #111;
	border-color: #111;
	color: #fff;
}

.yxs-cat-themeswitch__btn:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

@media (max-width: 520px) {
	.yxs-b2b-wrap .yxs-cat-themeswitch {
		padding: 10px 12px 0;
	}

	.yxs-cat-themeswitch__btn {
		padding: 6px 11px;
		font-size: 11px;
	}
}

@media print {
	.yxs-cat-themeswitch {
		display: none !important;
	}

	/* 打印时绝不能保留鼠标倾斜：PDF 要正视图。 */
	.yxs-cat-ip__radar,
	.yxs-cat-ip__radar.is-3d {
		transform: none !important;
	}

	.yxs-cat-ip__radar .yxs-radar__hub,
	.yxs-cat-ip__radar .yxs-radar__node {
		transform: translate(-50%, -50%) !important;
	}
}

/* ── 右上角工具区（主题切换 + 分享，v4.10.1）────────── */
.yxs-b2b-wrap .yxs-cat-tools {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding: 12px 16px 0;
	position: relative;
	z-index: 30;
}

.yxs-cat-tools .yxs-cat-themeswitch {
	padding: 0;
}

.yxs-cat-share {
	position: relative;
	display: inline-flex;
	align-items: center;
}

/* 分享面板挂在导航栏右侧，别被导航裁切。 */
.yxs-catalog__nav-tools {
	position: relative;
	overflow: visible;
}

.yxs-cat-share__btn {
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid rgba(17, 17, 17, 0.18);
	background: #fff;
	color: #333;
	font-size: 12px;
	line-height: 1;
	padding: 7px 14px;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.yxs-cat-share__btn:hover {
	border-color: #111;
}

.yxs-cat-share__panel {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	width: 240px;
	padding: 14px;
	background: #fff;
	border: 1px solid #e4e4e4;
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	z-index: 40;
}

.yxs-cat-share__panel[hidden] {
	display: none !important;
}

.yxs-cat-share__close {
	position: absolute;
	top: 6px;
	right: 8px;
	border: 0;
	background: transparent;
	font-size: 18px;
	line-height: 1;
	color: #767676;
	cursor: pointer;
}

.yxs-cat-share__qr {
	width: 180px;
	height: 180px;
	margin: 4px auto 12px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.yxs-cat-share__qr img,
.yxs-cat-share__qr svg,
.yxs-cat-share__qr canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

.yxs-cat-share__url {
	display: flex;
	gap: 6px;
}

.yxs-cat-share__url input {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 11px;
	padding: 6px 8px;
	border: 1px solid #e4e4e4;
	border-radius: 6px;
	background: #f8f8f8;
	color: #333;
}

.yxs-cat-share__copy {
	flex: 0 0 auto;
	font-size: 11px;
	padding: 6px 10px;
	border: 1px solid #111;
	border-radius: 6px;
	background: #111;
	color: #fff;
	cursor: pointer;
}

/* 暗黑下工具区反色 */
[data-palette="dark"] .yxs-cat-share__btn {
	background: #1a1a1a;
	color: #eaeaea;
	border-color: #4a4a4a;
}

[data-palette="dark"] .yxs-cat-share__panel {
	background: #161616;
	border-color: #333333;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}

[data-palette="dark"] .yxs-cat-share__close {
	color: #9a9a9a;
}

[data-palette="dark"] .yxs-cat-share__url input {
	background: #0f0f0f;
	border-color: #333333;
	color: #eaeaea;
}

@media (max-width: 520px) {
	.yxs-b2b-wrap .yxs-cat-tools {
		padding: 10px 12px 0;
		gap: 6px;
	}

	.yxs-cat-share__btn {
		padding: 6px 11px;
		font-size: 11px;
	}

	.yxs-cat-share__panel {
		width: 210px;
	}

	.yxs-cat-share__qr {
		width: 150px;
		height: 150px;
	}
}

@media print {
	.yxs-cat-tools {
		display: none !important;
	}
}

/* ── 联系我们：多张二维码（白底卡片保证可扫，v4.10.2）────── */
.yxs-cat-contact__qrs {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: flex-end;
	align-items: flex-start;
}

.yxs-cat-contact__qr-card {
	width: 132px;
	background: #ffffff;
	border: 1px solid #e4e4e4;
	border-radius: 12px;
	padding: 10px;
	text-align: center;
	box-sizing: border-box;
}

.yxs-cat-contact__qr-card img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.yxs-cat-contact__qr-label {
	margin-top: 6px;
	font-size: 12px;
	color: #222222;
}

.yxs-cat-contact__qr-link {
	display: inline-block;
	margin-top: 4px;
	font-size: 11px;
	color: #666666;
	text-decoration: underline;
}

/* 白底卡片里的链接保持深色（否则暗黑的浅色链接在白卡上不可见）。 */
[data-palette="dark"] .yxs-cat-contact__qr-card a {
	color: #444444 !important;
}

@media (max-width: 520px) {
	.yxs-cat-contact__qrs {
		justify-content: flex-start;
		gap: 10px;
	}

	.yxs-cat-contact__qr-card {
		width: 104px;
	}
}

@media print {
	.yxs-cat-contact__qrs {
		display: flex !important;
	}
}