/*
 * 产品目录前端样式。
 *
 * Token 全部沿用站点既有体系（定义在 astra-child 首页 hero 的 CSS 里），
 * 不引入新配色、不引入新字体。目标是让这个页面看起来像站点原本就有的。
 *
 * 形状锁：圆角只有两档 —— 8px（按钮/输入/卡片/表格）与 pill（筛选标签）。
 * 色彩锁：唯一强调色 --swkc-acc，全页一致。
 */

.swkc {
	--swkc-ink: #0b1a2b;
	--swkc-brand: #14448c;
	/*
	 * 两档橙：
	 *   --swkc-acc        品牌橙，只用于浅色底纹与描边（不承载文字）
	 *   --swkc-acc-strong 深一档，用于任何"白字放上面"或"橙字放白底"的场合
	 *
	 * 站点现有按钮是白字配 #ff6a2b = 2.86:1，达不到 WCAG AA 的 4.5:1。
	 * #c9430e 是 4.89:1，视觉上仍是同一个品牌橙，只是深一档。
	 */
	--swkc-acc: #ff6a2b;
	--swkc-acc-strong: #c9430e;
	--swkc-acc-dark: #b83c0c;
	/*
	 * 两档线：
	 *   --swkc-line        #dde3ea，1.29:1。只用于表格行分隔这类装饰性细线，
	 *                      加深会让表格变成密密麻麻的网格。
	 *   --swkc-line-strong #8494a6，3.10:1。用于输入框、下拉、卡片这些
	 *                      「可交互控件的边界」——WCAG 1.4.11 要求这类边界
	 *                      对背景至少 3:1，原来统一用浅色所以看着发虚。
	 */
	--swkc-line: #dde3ea;
	--swkc-line-strong: #8494a6;
	--swkc-muted: #3c4a59;
	--swkc-soft: #f7f9fc;
	--swkc-softer: #eef1f5;
	--swkc-radius: 8px;

	font-family: var(--swk-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
	color: var(--swkc-ink);
	/*
	 * 1200px 时表格整行横跨屏幕，眼睛从「型号」扫到「加入询价」要走一米，
	 * 反而更难读。收到 980px：8 列仍然放得下，行长回到舒适区。
	 */
	max-width: 980px;
	margin: 0 auto;
	padding: 0 0 48px;
}

.swkc *,
.swkc *::before,
.swkc *::after {
	box-sizing: border-box;
}

/* 去掉移动端点击的 300ms 双击缩放等待，按钮响应更跟手 */
.swkc a,
.swkc button,
.swkc select,
.swkc input {
	touch-action: manipulation;
}

.swkc-sronly {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- 页头 ---------- */

.swkc-head {
	padding: 8px 0 20px;
}

.swkc-title {
	margin: 0 0 6px;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--swkc-ink);
}

.swkc-sub {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--swkc-muted);
	max-width: 62ch;
}

/* ---------- 搜索与筛选 ---------- */

.swkc-controls {
	margin: 0 0 18px;
}

.swkc-searchwrap {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}

/* 图标锚在输入框自己的容器上，窄屏换行后不会掉到两行中间 */
.swkc-searchfield {
	position: relative;
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}

.swkc-searchicon {
	position: absolute;
	left: 14px;
	width: 20px;
	height: 20px;
	color: var(--swkc-muted);
	pointer-events: none;
}

/*
 * 表单控件一律用 `.swkc 前缀` 提高优先级。
 *
 * 主题的动态内联样式里有 `input[type="search"], input[type="text"]…`
 * 这类属性选择器（优先级 0,1,1），会压过裸类名 `.swkc-search`（0,1,0），
 * 把 padding 改成 12px 16px、高度改成 40px、圆角抹成 0——
 * 表现就是放大镜压住输入的文字、输入框变矮变方。
 * 加一层根容器变成 0,2,0 就赢了，不必动用 !important。
 */
.swkc .swkc-search {
	width: 100%;
	min-width: 0;
	height: 52px;
	padding: 0 16px 0 44px;
	font-size: 16px;
	font-family: inherit;
	color: var(--swkc-ink);
	background: #fff;
	/*
	 * 这两条必须 !important。
	 *
	 * 有一条来源不明的规则在给搜索框强制 border-radius:0 与
	 * border-color:#d1d5db（Astra 的全局边框色）。查过了：页面内联 style、
	 * 26 个外链样式表、adoptedStyleSheets、shadow DOM 里都找不到它，
	 * 但实测只有 !important 压得住——同一条规则里的 padding / height /
	 * color 都正常生效，唯独这两个属性被覆盖。
	 *
	 * 不加的话搜索框会是直角 + 灰边，和旁边 8px 圆角的 Search 按钮、
	 * 下拉框对不上，一眼就看出是拼凑的。
	 */
	border: 1px solid var(--swkc-line-strong) !important;
	border-radius: var(--swkc-radius) !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* 悬停加深边框：静止 3.1:1 已够看清，悬停再深一档表明「这里能点」 */
.swkc .swkc-search:hover,
.swkc .swkc-select:hover {
	border-color: #6b7a8d !important;
}

/* placeholder 对比度：#6b7785 对白底约 4.6:1，达到 WCAG AA */
.swkc .swkc-search::placeholder {
	color: #6b7785;
	opacity: 1;
}

.swkc .swkc-search:focus,
.swkc .swkc-select:focus,
.swkc-go:focus-visible,
.swkc-add:focus-visible,
.swkc-chip:focus-visible,
.swkc-page:focus-visible {
	outline: none;
	border-color: var(--swkc-brand);
	box-shadow: 0 0 0 3px rgba(20, 68, 140, .18);
}

/* 聚焦态的边框色同样要盖过那条规则，否则点进去边框不会变蓝 */
.swkc .swkc-search:focus {
	border-color: var(--swkc-brand) !important;
}

.swkc-go {
	flex: 0 0 auto;
	height: 52px;
	padding: 0 26px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .01em;
	color: #fff;
	background: var(--swkc-acc-strong);
	border: 1px solid var(--swkc-acc-strong);
	border-radius: var(--swkc-radius);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, transform .1s ease;
}

.swkc-go:hover {
	background: var(--swkc-acc-dark);
	border-color: var(--swkc-acc-dark);
}

.swkc-go:active {
	transform: translateY(1px);
}

.swkc-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.swkc-fwrap {
	display: block;
}

.swkc .swkc-select {
	height: 42px;
	padding: 0 34px 0 12px;
	font-family: inherit;
	font-size: 14px;
	color: var(--swkc-ink);
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233c4a59' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 16px;
	border: 1px solid var(--swkc-line-strong);
	border-radius: var(--swkc-radius);
	appearance: none;
	cursor: pointer;
	max-width: 100%;
}

/* ---------- 已选条件（唯一使用 pill 圆角的地方）---------- */

.swkc-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--swkc-line);
}

.swkc-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--swkc-ink);
	background: rgba(255, 106, 43, .10);
	border: 1px solid rgba(255, 106, 43, .35);
	border-radius: 999px;
	text-decoration: none;
	transition: background-color .15s ease;
}

.swkc-chip:hover {
	background: rgba(255, 106, 43, .18);
	color: var(--swkc-ink);
}

.swkc-chip-x {
	font-size: 16px;
	line-height: 1;
	color: var(--swkc-acc-dark);
}

.swkc-clear {
	font-size: 13px;
	font-weight: 600;
	color: var(--swkc-brand);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- 结果摘要 ---------- */

.swkc-summary {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--swkc-muted);
	min-height: 22px;
}

/* ---------- 类目标签栏 ---------- */

/*
 * 标签数量是开放的（后台随时可新增类目），所以窄屏必须能横向滚动，
 * 不能靠换行——换行会让标签栏在手机上占掉半屏。
 */
.swkc-tabs {
	display: flex;
	gap: 4px;
	margin: 0 0 18px;
	padding: 4px;
	/*
	 * 做成分段控件（一个浅底容器 + 选中项白底浮起），而不是一排下划线文字。
	 * 原来的样子太像普通链接，客户不容易意识到这是可切换的目录分区；
	 * 容器一包，「这几个是一组、当前在其中之一」就一眼看得出来。
	 */
	background: var(--swkc-soft);
	border: 1px solid var(--swkc-line);
	border-radius: 10px;
	overflow-x: auto;
	scrollbar-width: thin;
}

/*
 * ── 关于本文件里的 !important ──────────────────────────────────
 *
 * 这个站上有一条（或几条）来源不明的规则，会用 !important 强制覆盖
 * 三个属性：链接的 text-decoration、输入框的 border-radius 与 border-color。
 *
 * 排查过：页面内联 <style>、26 个外链样式表、@import 引入的表、
 * adoptedStyleSheets、shadow DOM——CSSOM 里都枚举不到它；唯一读不出内容的
 * 是 CDN 上的 intlTelInput.css，已单独下载确认与这三个属性无关。
 *
 * 但实测非常稳定：不加 !important 一律无效，加了就生效。
 * 所以下面几处的 !important 是有依据的，不是图省事——只用在这三个属性上，
 * 其余样式一律走正常优先级。
 * ─────────────────────────────────────────────────────────────
 *
 * 标签是分段控件不是正文链接，下划线会让它看起来像一排文字链接。
 */
.swkc .swkc-tab {
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid transparent;
	background: none;
	border-radius: 7px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--swkc-muted);
	text-decoration: none !important;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.swkc .swkc-tab:hover {
	color: var(--swkc-ink);
	background: rgba(255, 255, 255, .7);
	text-decoration: none !important;
}

/* 选中项：白底 + 实边框 + 一点投影，从浅底容器里浮起来 */
.swkc .swkc-tab.is-on {
	color: var(--swkc-brand);
	background: #fff;
	border-color: var(--swkc-line-strong);
	box-shadow: 0 1px 2px rgba(11, 26, 43, .08);
}

.swkc .swkc-tab:focus-visible {
	outline: 2px solid var(--swkc-brand);
	outline-offset: 1px;
}

/* 条数是次要信息：比标签小一号、颜色更淡，但仍达 AA */
.swkc-tab-n {
	font-size: 11.5px;
	font-weight: 600;
	color: #6b7785;
	font-variant-numeric: tabular-nums;
}

.swkc .swkc-tab.is-on .swkc-tab-n {
	color: var(--swkc-brand);
}

/* ---------- 数值字段区间筛选 ---------- */

/*
 * 克重、容量这类连续值用 min–max 输入，不用下拉。
 * 整块和筛选下拉同高同风格，混在一排里不突兀。
 */
.swkc-range {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px;
	height: 38px;
	border: 1px solid var(--swkc-line-strong);
	border-radius: var(--swkc-radius);
	background: #fff;
	font-size: 13px;
	white-space: nowrap;
}

.swkc-range-label {
	font-weight: 600;
	color: var(--swkc-muted);
}

.swkc .swkc-range-in {
	width: 62px;
	padding: 2px 4px;
	border: 0;
	border-bottom: 1px solid var(--swkc-line);
	border-radius: 0;
	background: none;
	font-family: inherit;
	font-size: 13px;
	color: var(--swkc-ink);
	/* 数字输入框的上下箭头在这么窄的框里挤掉了字，隐藏掉 */
	-moz-appearance: textfield;
}

.swkc .swkc-range-in::-webkit-outer-spin-button,
.swkc .swkc-range-in::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/*
 * 原来只把 1px 底边变个色，键盘用户几乎看不出焦点在哪。
 * 换成和其它控件一致的蓝色光晕。
 */
.swkc .swkc-range-in:focus {
	outline: none;
	border-bottom-color: var(--swkc-brand);
	box-shadow: 0 0 0 2px rgba(20, 68, 140, .25);
	border-radius: 3px;
}

.swkc-range-sep {
	color: #6b7785;
}

/* 数值列右对齐并用等宽数字，和页产量一致 */
.swkc-c-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

@media (max-width: 767px) {
	/* 卡片布局下 td 是整行，右对齐由 .swkc-table tbody td 统一管 */
	.swkc-c-num {
		text-align: right;
	}
}

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

/*
 * 列数不固定：核心 6 列之外，后台每勾选一个「列表显示」的自定义字段就多一列。
 * 原来这里是 overflow:hidden，超出的列会被**直接裁掉且无法滚动**——加一个
 * CHIP 列，最右边的 Add to inquiry 就再也点不到了。
 * 改成横向滚动，并把动作列 sticky 在右侧（见下方 min-width:768px 区块），
 * 这样无论加多少列，按钮始终可见可点。
 */
.swkc-results {
	position: relative;
	border: 1px solid var(--swkc-line-strong);
	border-radius: var(--swkc-radius);
	/*
	 * 纵向：结果区自己是一个定高滚动窗口，配合 catalog.js 的滚动加载，
	 * 上万条也是「一页里上下滚」，不用翻页。表头 sticky 吸顶（见下）。
	 * 横向：列数由后台自定义字段决定，可能超宽，同样允许滚动。
	 */
	max-height: 68vh;
	overflow: auto;
	overscroll-behavior: contain;   /* 滚到底不要顺势把整个页面带着滚 */
	background: #fff;
}

.swkc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}

/*
 * 表头吸顶。滚到第 300 行还得知道哪列是「页产量」哪列是「适用机型」。
 *
 * 下边线用 inset box-shadow 不用 border：表格是 border-collapse:collapse，
 * sticky 单元格的 border 在滚动时会被下面的行盖住，shadow 不会。
 */
.swkc-table thead th {
	position: sticky;
	top: 0;
	z-index: 3;
	padding: 9px 12px;
	text-align: left;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--swkc-muted);
	background: var(--swkc-soft);
	box-shadow: inset 0 -1px 0 var(--swkc-line);
	white-space: nowrap;
}

.swkc-table tbody td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--swkc-line);
	vertical-align: middle;
	color: var(--swkc-muted);
}

.swkc-table tbody tr:last-child td {
	border-bottom: 0;
}

.swkc-table tbody tr:hover td {
	background: var(--swkc-soft);
}

/*
 * 斑马纹。8 列宽的表格，眼睛从「型号」横扫到「适用机型」很容易串行，
 * 尤其是相邻两行只差一个字母（CF230A / CF230X）。
 * 底色比 hover 更淡，两者叠加时 hover 仍然看得出来。
 */
.swkc-table tbody tr:nth-child(even) td {
	background: #fcfdfe;
}

.swkc-table tbody tr:nth-child(even):hover td {
	background: var(--swkc-soft);
}

.swkc-model {
	font-weight: 700;
	color: var(--swkc-ink);
	letter-spacing: -0.01em;
}

/*
 * 有详情页的型号做成链接。
 *
 * 不用常规的蓝色链接色：一列几十个型号全变蓝会很吵，而且会削弱
 * 「型号是这一行的主标识」这个层次。改成保持墨色 + 虚线下划线，
 * 悬停才变品牌蓝——可点性看得出来，但不抢戏。
 */
a.swkc-model-link {
	color: var(--swkc-ink);
	/* 虚线下划线是刻意的：既表明可点，又不像正文链接那样抢眼 */
	text-decoration: underline !important;
	text-decoration-style: dotted;
	text-decoration-color: #9aa6b4;
	text-underline-offset: 3px;
	transition: color .15s ease, text-decoration-color .15s ease;
}

a.swkc-model-link:hover,
a.swkc-model-link:focus-visible {
	color: var(--swkc-brand);
	text-decoration-color: var(--swkc-brand);
	text-decoration-style: solid;
}

a.swkc-model-link:focus-visible {
	outline: 2px solid var(--swkc-brand);
	outline-offset: 2px;
	border-radius: 3px;
}

.swkc-c-yield {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.swkc-c-fits {
	max-width: 260px;
}

.swkc-fits {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.swkc-na {
	/* 虽然带 aria-label，但它是可见文字，低视力用户看得到，仍需达 AA */
	color: #6b7785;
}

.swkc-c-act {
	text-align: right;
	white-space: nowrap;
}

/* 自定义字段列：给一个上限，避免某条数据填了长文本就把整表撑开 */
.swkc-c-extra {
	max-width: 180px;
}

/*
 * 动作列固定在右侧。只在桌面端生效——767px 以下表格已经转成卡片布局，
 * 那里 td 是 display:block，sticky 没有意义也会错位。
 *
 * 分隔线用 box-shadow 不用 border：表格是 border-collapse:collapse，
 * sticky 单元格的 border 在部分浏览器上不渲染，shadow 不受影响。
 */
@media (min-width: 768px) {
	.swkc-table tbody td.swkc-c-act {
		position: sticky;
		right: 0;
		z-index: 1;
		box-shadow: -1px 0 0 var(--swkc-line);
	}

	/*
	 * 型号列也固定。列一多，横向滚动后 MODEL 会滚出视野，剩下一排 Yes/Black
	 * 根本认不出是哪一行——固定住它，行的身份才始终在。
	 */
	.swkc-table tbody td.swkc-c-model {
		position: sticky;
		left: 0;
		z-index: 1;
	}

	/*
	 * 表头的首/末格是「双向固定」：既吸顶又贴边。层级必须高于普通表头格
	 * （z-index 3），否则横向滚动时中间的表头会盖在它上面。
	 * 阴影要把表头下边线和列分隔线**叠在一起写**，后写的整条会覆盖前面的。
	 */
	.swkc-table thead th:first-child {
		left: 0;
		z-index: 4;
		box-shadow: inset 0 -1px 0 var(--swkc-line);
	}

	.swkc-table thead th:last-child {
		position: sticky;
		right: 0;
		z-index: 4;
		box-shadow: inset 0 -1px 0 var(--swkc-line), -1px 0 0 var(--swkc-line);
	}

	.swkc-results.is-scrolled .swkc-table tbody td.swkc-c-model {
		box-shadow: 1px 0 0 var(--swkc-line), 12px 0 12px -8px rgba(11, 26, 43, .22);
	}

	.swkc-results.is-scrolled .swkc-table thead th:first-child {
		box-shadow: inset 0 -1px 0 var(--swkc-line), 1px 0 0 var(--swkc-line), 12px 0 12px -8px rgba(11, 26, 43, .22);
	}

	/*
	 * 投影只在真的滚动过之后才出现（.is-scrolled 由 catalog.js 挂上），
	 * 表示「左边还有内容压在下面」。不滚动时只留一条和其它列一样的分隔线。
	 */
	.swkc-results.is-scrolled .swkc-table tbody td.swkc-c-act {
		box-shadow: -1px 0 0 var(--swkc-line), -12px 0 12px -8px rgba(11, 26, 43, .22);
	}

	.swkc-results.is-scrolled .swkc-table thead th:last-child {
		box-shadow: inset 0 -1px 0 var(--swkc-line), -1px 0 0 var(--swkc-line), -12px 0 12px -8px rgba(11, 26, 43, .22);
	}

	/* sticky 单元格必须有不透明背景，否则滚动时下面的内容会透上来 */
	.swkc-table thead th:last-child,
	.swkc-table thead th:first-child {
		background: var(--swkc-soft);
	}

	.swkc-table tbody td.swkc-c-act,
	.swkc-table tbody td.swkc-c-model {
		background: #fff;
	}

	.swkc-table tbody tr:hover td.swkc-c-act,
	.swkc-table tbody tr:hover td.swkc-c-model {
		background: var(--swkc-soft);
	}
}

/* 颜色圆点：文字标签由 SWK_Catalog_Color 一并输出，不单靠颜色传达信息 */
.swkc .swkc-color {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	color: var(--swkc-muted);
}

.swkc .swkc-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	/* inset 描边：黄色等浅色在白底上必须有边界才看得见 */
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
	flex: 0 0 auto;
}

.swkc-link {
	font-size: 13px;
	font-weight: 600;
	color: var(--swkc-brand);
	text-decoration: none;
	margin-right: 10px;
}

.swkc-link:hover {
	text-decoration: underline;
}

/*
 * 行内动作是次级操作，用描边而非实心。
 * 每行一个实心橙按钮的话，一屏 18 个会和页面主 CTA（Search）抢注意力，
 * 而且眼睛没法先扫数据。颜色仍是同一个强调色，色彩锁不破。
 * 文字用 --swkc-acc-strong（#c9430e，对白底 4.89:1），达到 WCAG AA。
 */
.swkc-add {
	padding: 5px 11px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	color: var(--swkc-acc-strong);
	background: #fff;
	border: 1px solid rgba(201, 67, 14, .45);
	border-radius: var(--swkc-radius);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}

.swkc-add:hover {
	color: #fff;
	background: var(--swkc-acc-strong);
	border-color: var(--swkc-acc-strong);
}

.swkc-add:active {
	transform: translateY(1px);
}

/*
 * 滚动加载的底部状态条。放在滚动容器**内部**，所以只有滚到底才看得见，
 * 正好是需要它的时刻（"还在加载" / "已经到底了"）。
 */
.swkc-more {
	position: sticky;
	left: 0;
	padding: 12px 14px;
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	color: var(--swkc-muted);
	background: var(--swkc-soft);
	border-top: 1px solid var(--swkc-line);
}

.swkc-more[hidden] {
	display: none;
}

/*
 * 走滚动加载时分页链接就多余了。但它必须留在 DOM 里：
 * 没有 IntersectionObserver 的浏览器不会加 .swkc-is-infinite，分页照常可用。
 */
.swkc-is-infinite .swkc-pager {
	display: none;
}

/* ---------- 加载态 ---------- */

.swkc-results.is-loading {
	pointer-events: none;
}

.swkc-results.is-loading .swkc-table tbody {
	opacity: .35;
}

.swkc-results.is-loading::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
	background-size: 200% 100%;
	animation: swkc-shimmer 1.1s linear infinite;
	pointer-events: none;
	z-index: 2;   /* 要盖住 sticky 的动作列（z-index:1），否则加载态在那一列断开 */
}

@keyframes swkc-shimmer {
	from { background-position: 200% 0; }
	to   { background-position: -200% 0; }
}

/* ---------- 空状态 ---------- */

.swkc-empty {
	padding: 56px 24px;
	text-align: center;
}

.swkc-empty-icon {
	width: 44px;
	height: 44px;
	color: #b6c0cb;
	margin-bottom: 14px;
}

.swkc-empty-title {
	margin: 0 0 12px;
	font-size: 18px;
	font-weight: 700;
	color: var(--swkc-ink);
}

.swkc-empty-tips {
	margin: 0 auto 20px;
	padding: 0;
	list-style: none;
	max-width: 52ch;
	font-size: 14px;
	line-height: 1.8;
	color: var(--swkc-muted);
	text-align: left;
}

.swkc-empty-tips li {
	padding-left: 18px;
	position: relative;
}

.swkc-empty-tips li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 11px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--swkc-line);
}

.swkc-empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin: 0;
}

.swkc-btn {
	display: inline-block;
	padding: 11px 22px;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	background: var(--swkc-acc-strong);
	border: 1px solid var(--swkc-acc-strong);
	border-radius: var(--swkc-radius);
	text-decoration: none;
}

.swkc-btn:hover {
	background: var(--swkc-acc-dark);
	border-color: var(--swkc-acc-dark);
	color: #fff;
}

.swkc-btn-ghost {
	color: var(--swkc-ink);
	background: #fff;
	border-color: var(--swkc-line);
}

.swkc-btn-ghost:hover {
	background: var(--swkc-softer);
	border-color: var(--swkc-muted);
	color: var(--swkc-ink);
}

/* ---------- 错误态 ---------- */

.swkc-error {
	margin-top: 14px;
	padding: 16px 18px;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: var(--swkc-radius);
	color: #991b1b;
}

.swkc-error p {
	margin: 0 0 10px;
	font-size: 14px;
}

.swkc-retry {
	padding: 8px 16px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	background: #b91c1c;
	border: 0;
	border-radius: var(--swkc-radius);
	cursor: pointer;
}

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

.swkc-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 20px;
}

.swkc-page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--swkc-ink);
	background: #fff;
	border: 1px solid var(--swkc-line);
	border-radius: var(--swkc-radius);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
}

.swkc-page:hover {
	border-color: var(--swkc-muted);
	color: var(--swkc-ink);
}

.swkc-page-on {
	color: #fff;
	background: var(--swkc-brand);
	border-color: var(--swkc-brand);
	cursor: default;
}

.swkc-gap {
	padding: 0 4px;
	color: var(--swkc-muted);
}

/* ---------- 移动端：表格转卡片 ---------- */

@media (max-width: 767px) {
	/*
	 * 手机端不做嵌套滚动框：一个小窗口里再上下滚，手指很容易滚错层。
	 * 解除定高，让整页自然滚动；滚动加载改由 IntersectionObserver 用视口
	 * 作为根来触发，逻辑不变。
	 */
	.swkc-results {
		border: 0;
		background: transparent;
		max-height: none;
		overflow: visible;
	}

	.swkc-more {
		margin-top: 4px;
		border: 1px solid var(--swkc-line);
		border-radius: var(--swkc-radius);
	}

	.swkc-table,
	.swkc-table tbody,
	.swkc-table tr,
	.swkc-table td {
		display: block;
		width: 100%;
	}

	.swkc-table thead {
		display: none;
	}

	.swkc-table tbody tr {
		margin-bottom: 12px;
		background: #fff;
		border: 1px solid var(--swkc-line);
		border-radius: var(--swkc-radius);
		overflow: hidden;
	}

	.swkc-table tbody td {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 10px 14px;
		text-align: right;
	}

	.swkc-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 auto;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .06em;
		text-transform: uppercase;
		color: var(--swkc-muted);
		text-align: left;
	}

	.swkc-table tbody td.swkc-c-model {
		background: var(--swkc-soft);
		border-bottom: 1px solid var(--swkc-line);
	}

	.swkc-table tbody td.swkc-c-model::before {
		display: none;
	}

	.swkc-table tbody td.swkc-c-model {
		justify-content: flex-start;
		text-align: left;
	}

	.swkc-model {
		font-size: 16px;
	}

	/* 卡片布局下 td 是整行，桌面端的列宽上限会把整行压成 180px */
	.swkc-c-extra {
		max-width: none;
	}

	/*
	 * 手机端把按钮放大到 40px 高并占满整行。
	 * 桌面端 24px 是为了不让每行一个橙按钮抢走注意力，但手指按不准——
	 * WCAG 2.5.8 的 24×24 只是底线，拇指操作要 40 以上才舒服。
	 */
	.swkc-add {
		width: 100%;
		min-height: 40px;
		padding: 10px 14px;
		font-size: 13px;
	}

	.swkc-c-act {
		padding-top: 6px;
		padding-bottom: 12px;
	}

	.swkc-c-fits {
		max-width: none;
	}

	.swkc-c-act {
		justify-content: flex-end;
		border-bottom: 0;
	}

	.swkc-c-act::before {
		display: none;
	}

	.swkc-searchwrap {
		flex-wrap: wrap;
	}

	.swkc-go {
		width: 100%;
	}

	.swkc-select {
		width: 100%;
	}

	.swkc-fwrap {
		flex: 1 1 calc(50% - 5px);
		min-width: 140px;
	}
}

/* ---------- 减少动效 ---------- */

@media (prefers-reduced-motion: reduce) {
	.swkc *,
	.swkc *::before,
	.swkc *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}

	.swkc-results.is-loading::after {
		animation: none;
		background: rgba(255, 255, 255, .5);
	}
}