/* =============================================================================
KIES 铠石智能 · 前台设计系统 v2
2026-08-26 · 服务端直出，无框架，无构建期依赖
-----------------------------------------------------------------------------
风格取向：**中文工业品 B2B 商城的密集信息布局** —— 左侧品类导航、多卡片面板、
橙红价格体系、宫格入口、情报流。不是 SaaS 落地页那种大留白。
为什么是这个方向：采购方进站的第一个动作是「在一屏里扫到我要的那一类」。
这类用户一次会开七八个标签页横向比货，留白越大他要滚的次数越多。
密集不等于杂乱 —— 靠的是卡片边界、统一行高、对齐的数字，而不是靠留白分区。
为什么不用 Google Fonts：默认语言中文、主要客户在中国大陆，
fonts.googleapis.com 在那里不可靠。一次字体超时换来整页 FOIT，
代价远大于自定义字形带来的品味。全站系统字体栈 + tabular-nums 保证
价格与参数对齐 —— 这类站的字体工作重点本来就是「数字能不能对齐」。
为什么不用 CSS 框架：这份样式会被静态化进每一个页面的关键渲染路径。
旧站那份 92 KB 的 home.css 就是这么来的。这里只写真正用到的组件。
颜色一律走令牌。任何一处写死 hex 都是在给下一次改版埋几千处修改。
============================================================================= */
/* ── 令牌 ────────────────────────────────────────────────────────────────── */
:root {
/* 底色浅灰、卡片纯白 —— 这是「一屏很多块内容」能读得下去的前提：
卡片靠底色衬出边界，不必再用粗描边或重阴影去分区。 */
--k-paper: #F5F5F5;
--k-surface: #FFFFFF;
--k-surface-2: #FAFAFA;
--k-surface-3: #F0F0F0;
--k-line: #E6E6E6;
--k-line-soft: #F0F0F0;
--k-ink: #333333;
--k-ink-2: #666666;
--k-ink-3: #999999;
--k-ink-4: #BBBBBB;
/* 主色：工业橙。品牌、主 CTA、栏目「更多 ›」、选中态。
不给它太多地方 —— 满屏橙色时橙色就不再是指引。 */
--k-brand: #FF6A00;
--k-brand-2: #E85D00;
--k-brand-3: #FF8630;
--k-brand-soft: #FFF1E6;
--k-brand-tint: #FFF8F2;
/* 价格红。规则（2026-08-27 按实际用法收紧了措辞，原来写的是「别处一律不许用」，
而代码里始终有四处例外 —— 规则和代码不一致时，先改到一致再谈遵守）：
· **大面积一律不用**：按钮、卡片底色、横幅。中文电商用户对这个红的语义预期
就是「钱」，一个红色大按钮会被读成「折扣」或「危险」。
主 CTA 一律走品牌橙（.k-btn-primary）。
· **小面积的强调标记可以用**：角标（.k-badge）、必填星号（.k-req）、
「新品上架」（.k-nav-hot）。这几处面积小、位置固定，
用红是中文电商的通行约定，换成别的颜色反而要重新学。
.k-btn-signal（红底按钮）保留定义但**目前全站没有使用者** ——
留着是为了「确实需要一个比主 CTA 更强的红按钮」那天，不要再去发明一个新类。 */
--k-price: #E4393C;
--k-price-2: #C8302F;
--k-price-soft: #FDECEC;
/* 蓝：功能入口、链接、信息类标签。与橙分工明确，不混用 */
--k-blue: #2D7CF0;
--k-blue-2: #1A67DB;
--k-blue-soft: #EAF2FE;
/* ── 结构深色 ────────────────────────────────────────────────────────
2026-08-28 新增。品牌的第二支柱色，**不是**「深色主题」——
它在浅色主题下同样出现，而且正是浅色主题下最重要的那几块：
顶栏工具条、首屏、四张行动卡、整个页脚。
为什么需要它：此前全站只有「白卡片 + 浅灰底 + 橙点缀」三层，
一页从上到下没有一处深色，于是每一块的视觉权重完全一样 ——
版面读起来是「一叠等重的白盒子」，这正是「不够大气」的技术成因。
国际工业品站（Misumi / RS / Keyence / Farnell）无一例外用一块深色
去锚定首屏与页脚，剩下的部分才敢留白。
⚠️ 不要用 --k-ink 系列代替它。--k-ink 是**文字**颜色，深色主题下会翻成浅色；
这一组是**结构底色**，两个主题下都必须是深的，翻过去页脚就白给白了。 */
--k-deep: #0E1519;
--k-deep-2: #162127;
--k-deep-3: #1F2C34;
--k-deep-line: rgba(255,255,255,.13);
--k-deep-ink: #F4F7F8;
--k-deep-ink-2: rgba(255,255,255,.70);
--k-deep-ink-3: rgba(255,255,255,.46);
--k-ok: #17A05B; --k-ok-soft: #E6F6EE;
--k-warn: #E6A23C; --k-warn-soft: #FDF4E5;
--k-crit: #D93026; --k-crit-soft: #FCEBEA;
/* 四张行动卡的底色。它们是**装饰**，不承载语义，
所以深色主题下只降饱和不换色相 —— 换了就认不出是同一张卡。
⚠️ 2026-08-28 重调。原来是橙 / 正红 / 亮蓝 / 天青四支**互不相干的高饱和**渐变，
四张卡并排时页面上同时出现四个争夺注意力的主色 —— 这是整页里
「看起来最不专业」的一块，而且它恰好排在首页最后，是访客带走的最后印象。
高饱和撞色是消费类促销位的语言，B2B 采购看到的是「这家像个做活动的」。
现在收成**一族**：一支品牌橙（唯一的暖色，留给第一张最重要的卡）
+ 三支深色调（石墨 / 靛蓝 / 深松绿）。四张仍然分得清、仍然认得出，
但页面的主色只剩橙一个，其余三张退成结构色 —— 与工具条、页脚同一族。
白字在这四支上的对比度都 ≥ 7:1（原来的天青只有 2.6:1，白字其实是糊的）。 */
--k-grad-1: linear-gradient(140deg, #FF8A3D 0%, #E85D00 100%);
--k-grad-2: linear-gradient(140deg, #2C3B45 0%, #0E1519 100%);
--k-grad-3: linear-gradient(140deg, #3C5C9E 0%, #1B2F5C 100%);
--k-grad-4: linear-gradient(140deg, #2C7F76 0%, #10504C 100%);
/* 圆角：4/8 → 6/12。4px 在 14px 正文的密集版式里几乎看不出是圆角，
只是把直角磨毛了；6/12 才读得出「这是有人调过的」。
再大就不行了 —— 16px 以上是消费类 App 的语言，参数表放进去会显得轻浮。 */
--k-radius: 6px;
--k-radius-lg: 12px;
/* 阴影带一点冷偏（16,24,32 而不是纯黑）：纯黑阴影压在浅灰底上会发灰发脏，
带蓝的阴影读起来是「有高度」而不是「有污渍」。两层叠加 ——
近处那层给边界，远处那层给高度，单层做不出这两件事。 */
--k-shadow: 0 1px 2px rgba(16,24,32,.05), 0 2px 8px rgba(16,24,32,.05);
--k-shadow-hov: 0 2px 4px rgba(16,24,32,.06), 0 8px 24px rgba(16,24,32,.10);
--k-shadow-lg: 0 4px 8px rgba(16,24,32,.06), 0 20px 48px rgba(16,24,32,.16);
/* 键盘焦点环。全站一处定义 —— 每个组件各写各的焦点样式，
结果一定是「有几个组件根本没写」，而那几个只有键盘用户会遇到。 */
--k-focus: 0 0 0 3px rgba(255,106,0,.30);
/* ── 字体 ────────────────────────────────────────────────────────────
**全部是系统字体引用：仓库里不带任何字体文件，也不外链任何字体服务。**
两条理由缺一不可：
1. 版权。在 CSS 里按名字引用一款字体，用的是**访客机器上已经装好的那一份**，
不构成分发；只有把字体文件打包进仓库、或用 @font-face 由自己的服务器发出去，
才涉及授权。所以「微软雅黑」「苹方」这类商业字体出现在下面的列表里是安全的，
把它们的 .ttf 放进 public/ 就不安全了。
⚠️ 以后若要自托管，只能加明确允许 Web 嵌入的开源字体（思源黑体 Source Han Sans、
Noto Sans SC、HarmonyOS Sans 均为 SIL OFL / Apache），并把 LICENSE 一起入库。
商业字体一律「引用不打包」。
2. 性能。默认语言中文、主要客户在中国大陆，fonts.googleapis.com 在那里不可靠，
一次超时换来整页 FOIT；中文字体动辄 3~10 MB，自托管也要分片。
── 中英分两套，而不是一套通吃 ──────────────────────────────────────
· **字形来源**。中文页面里的拉丁字母（型号 EB-E200、单位 TOPS、价格）应当来自
与中文字重、x-height 匹配的西文字体，而不是让中文字体自带的半吊子拉丁字形去凑
—— 那正是中文网页里英文「又宽又飘」的来源。所以中文栈把西文字体排在**中文字体
之前**：西文字体不含汉字，汉字自然落到后面那一款，两边各取所长。
· **字距**。雅黑/苹方在 14px 下笔画密，+0.01em 明显更透气；同样的字距加在英文上
会让单词散开。
· **平滑**。-webkit-font-smoothing: antialiased 让字变细 —— 对拉丁是「更精致」，
对汉字是「笔画糊掉」，深色主题下的白字尤其明显。所以中文用 auto，英文才开 antialiased。
语言由 决定（layout.php 输出 IntlLang::locale()：中文 zh-CN、英文 en），
下面用 [lang^="en"] 覆盖一组令牌。新增语种按同样方式加一段。 */
--k-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
"PingFang SC", "HarmonyOS Sans SC", "Hiragino Sans GB",
"Microsoft YaHei UI", "Microsoft YaHei",
"Source Han Sans SC", "Noto Sans SC", "Noto Sans CJK SC", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
/* 等宽只用在**数字与型号**上（价格、库存、日期、货号），不用在正文 ——
中文没有等宽需求，强行等宽会让中英混排的行看起来一格一格的。
选型标准只有一条：0 带斜杠、1/l/I 分得开，型号要能被一位不差地抄下来。 */
--k-mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
"Sarasa Mono SC", "JetBrains Mono", "Noto Sans Mono",
"Roboto Mono", Consolas, "Liberation Mono", monospace;
/* 中文简体的排版参数（默认值；英文见下面的 [lang^="en"] 覆盖） */
--k-ls: .01em; /* 正文字距 */
--k-prose-lh: 1.85; /* 长文行高：汉字方块密，要比拉丁松 */
--k-head-lh: 1.4; /* 标题行高 */
--k-head-ls: 0;
--k-smooth: auto; /* 汉字不做 antialiased，理由见上 */
/* ⚠️ 2026-08-28：1200 → 1280，槽宽 16 → 24。
原来的注释写的是「1280 在 1366 的笔记本上顶死了」—— 那句话把**版心**
和**窗口**算成了一回事。版心 1280 加上两侧各 24 的内边距，占位仍是 1280，
1366 的屏幕左右各余 43px；真正会顶死的是 1366 上再开第二个窗口，
而那种用法下浏览器宽度早就掉到断点以下了（≤1080 走单栏）。
为什么值得加这 80px：首页是「左栏 220 + 12 栅格」，多出来的宽度全部落在
右侧的面板区 —— 8 栏的首屏促销位从 ~700 涨到 ~760，标题才排得下一行。
槽宽 16 → 24 是另一半：16px 的左右留白在 1280 的版心里比例失衡，
内容像是被压到玻璃上。 */
--k-w: 1280px;
--k-w-text: 68ch;
--k-gut: 24px;
--k-head-h: 60px;
--k-rail-w: 220px; /* 左侧品类导航宽度，首页面板栅格与它对齐 */
/* 版块之间的垂直节奏。写成令牌而不是散落的 20px：
「大气」在版面上的唯一实现方式就是节奏 —— 而节奏必须一处可调。 */
--k-sec: 32px;
--k-gap: 16px; /* 面板栅格的槽宽 */
}
/* ── 英文站的排版覆盖 ────────────────────────────────────────────────────
纯拉丁栈：不需要为汉字让位，所以把各平台的界面字体放在最前面
（Segoe UI Variable 是 Win11 的界面字体，比 Segoe UI 的字重级配得更细）。
末尾仍留一档中文兜底 —— 英文站上仍会出现中文（公司全称、少数未翻译的数据字段），
掉到 serif 上会非常突兀。 */
:root:lang(en), [lang^="en"] {
--k-sans: system-ui, -apple-system, BlinkMacSystemFont,
"Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue",
"Noto Sans", Arial, sans-serif,
"PingFang SC", "Microsoft YaHei", "Noto Sans SC",
"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
--k-ls: 0;
--k-prose-lh: 1.65;
--k-head-lh: 1.25;
--k-head-ls: -.01em; /* 拉丁大字号收一点字距，标题才不散 */
--k-smooth: antialiased;
/* ⚠️ 必须显式声明，且必须是 light 而不是 "light dark"。
这个属性管的是**浏览器自己画的那部分**：滚动条、下拉箭头、日期选择器、
的默认背景、表单控件的焦点环。
不声明的话它默认跟随系统 —— 于是在系统深色的机器上会出现最难看的那种组合：
页面是我们画的白底，滚动条和下拉框却是浏览器画的黑底。
站点已经决定默认浅色（见下面那段注释），这里就要把浏览器一起按住。 */
color-scheme: light;
}
/* 深色主题。工业现场显示器常年高亮度，必须让用户能压暗。
⚠️ 这里只重定义令牌值，组件样式一律不写进来 ——
写进来的颜色在「跟随系统」这个未打标记的状态下不会生效。 */
:root[data-theme="dark"] {
color-scheme: dark; /* 用户切到深色时，把滚动条与原生控件一起翻过去 */
--k-paper:#0F1214; --k-surface:#181C1F; --k-surface-2:#1E2327; --k-surface-3:#262C31;
--k-line:#2E353A; --k-line-soft:#232A2E;
--k-ink:#E8EAEB; --k-ink-2:#AAB2B7; --k-ink-3:#7C868C; --k-ink-4:#5A6469;
--k-brand:#FF8A3D; --k-brand-2:#FFA060; --k-brand-3:#FFB37E;
--k-brand-soft:#2B1B0E; --k-brand-tint:#20160E;
--k-price:#FF6B62; --k-price-2:#FF8A82; --k-price-soft:#2C1513;
--k-blue:#5C9BFF; --k-blue-2:#7FB2FF; --k-blue-soft:#111E33;
--k-ok:#3FBF7F; --k-ok-soft:#0F2A1D; --k-warn:#D9A441; --k-warn-soft:#2A2113;
--k-crit:#F0665C; --k-crit-soft:#2C1512;
--k-shadow:0 1px 4px rgba(0,0,0,.5);
--k-shadow-hov:0 4px 16px rgba(0,0,0,.6);
--k-shadow-lg:0 6px 28px rgba(0,0,0,.7);
/* 结构深色在深色主题下要**比页面底色更深**。
浅色主题里 --k-deep(#0E1519) 压在 --k-paper(#F5F5F5) 上，对比强烈；
深色主题里 --k-paper 变成 #0F1214 —— 与 --k-deep 只差 3 个灰阶，
工具条、首屏与页脚会整个融进背景，页面从「三段式」塌成一整块黑。
所以这里把它们再往下压一档，反差方向不变。 */
--k-deep:#06090B; --k-deep-2:#0B1013; --k-deep-3:#151D22;
}
/* ⚠️ 2026-08-28：**刻意不再有 @media (prefers-color-scheme: dark) 这一段。**
以前这里有一份与上面完全相同的令牌覆盖，作用是「系统是深色就自动跟随」。
删掉它是产品决定，不是遗漏：
· 这是一个**品牌站**。首屏是品牌的第一印象，而「第一印象长什么样」
不该由访客机器上一个与本站无关的开关决定 —— 同一条推广链接，
甲看到的是白底橙字、乙看到的是黑底，对外投放物料没法做。
· 中国大陆 B2B 采购方的办公机器大量是系统级深色（尤其是 Windows 11 默认
跟随「深色应用模式」的那批），自动跟随的实际结果是**多数人进站即深色**。
· 深色主题本身要留 —— 工业现场显示器常年高亮度，用户需要能压暗。
但那是**用户按了按钮**之后的事，走 :root[data-theme="dark"]。
所以现在的规则只有一条：**默认浅色；深色仅在用户显式切换后生效并被记住。**
恢复跟随系统的话，只需把这段注释换回一份 :root:not([data-theme="light"])
的令牌覆盖 —— 但请先确认上面三条理由是不是都不成立了。 */
/* ── 重置 ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}
body {
margin: 0;
/* 明确画底色：直出页面不给 body 上色会借用宿主底色 */
background: var(--k-paper);
color: var(--k-ink);
font-family: var(--k-sans);
font-size: 14px; /* 中文密集布局的基准字号，不是 16 */
line-height: 1.6;
letter-spacing: var(--k-ls);
-webkit-font-smoothing: var(--k-smooth);
/* ⚠️ 这里**刻意不写 font-synthesis**。合成粗体确实难看，但把它关掉的前提是
字体族里真的有 Bold 字重 —— 而这是一份系统字体栈，最终用哪一款取决于
访客装了什么。真关掉的话，在缺 Bold 的机器上标题会退成正常字重，
「标题看不出是标题」比「粗体是合成的」严重得多。 */
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--k-ink); text-decoration: none; }
/* ⚠️ 全站唯一的键盘焦点样式，写在重置层。
:focus-visible 而不是 :focus —— 后者会让**鼠标点击**也留下一圈框，
于是下一个人为了「点按钮时那圈难看的线」把 outline:none 写进组件里，
键盘用户从此在这个站上完全看不到自己在哪。这是无障碍最常见的死法。
两层：outline 负责在任何底色上都可见，box-shadow 负责好看。 */
:focus-visible {
outline: 2px solid var(--k-brand);
outline-offset: 2px;
border-radius: var(--k-radius);
}
.k-btn:focus-visible, .k-input:focus-visible, .k-select:focus-visible, .k-textarea:focus-visible {
outline-offset: 1px; box-shadow: var(--k-focus);
}
a:hover { color: var(--k-brand); }
h1, h2, h3, h4 {
margin: 0; font-weight: 600;
line-height: var(--k-head-lh); letter-spacing: var(--k-head-ls);
/* text-wrap: balance 让多行标题的每一行长度接近，中文标题受益尤其明显；
word-break: keep-all 保证中文不从词中间断开（英文仍在空格处正常换行）。 */
text-wrap: balance; word-break: keep-all;
}
p { margin: 0 0 .8em; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
table { border-collapse: collapse; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--k-brand); outline-offset: 2px; border-radius: 2px; }
.k-skip { position: absolute; left: -9999px; top: 0; z-index: 300; background: var(--k-brand); color: #fff; padding: 10px 16px; }
.k-skip:focus { left: 0; }
/* ── 布局原语 ────────────────────────────────────────────────────────────── */
.k-wrap { max-width: var(--k-w); margin: 0 auto; padding-inline: var(--k-gut); }
.k-wrap-narrow { max-width: 900px; margin: 0 auto; padding-inline: var(--k-gut); }
.k-prose { max-width: var(--k-w-text); line-height: var(--k-prose-lh); }
.k-stack { display: flex; flex-direction: column; }
.k-row { display: flex; align-items: center; }
.k-gap-4{gap:4px} .k-gap-8{gap:8px} .k-gap-12{gap:12px}
.k-gap-16{gap:16px} .k-gap-24{gap:24px} .k-gap-32{gap:32px}
.k-grow { flex: 1 1 auto; min-width: 0; }
.k-section { padding-block: var(--k-sec); }
.k-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.k-hide { display: none !important; }
@media (max-width: 900px){ .k-hide-md{ display:none !important } }
@media (max-width: 640px){ .k-hide-sm{ display:none !important } }
/* ── 排版 ────────────────────────────────────────────────────────────────── */
/* 眉标（栏目上方那一行小字）。它必须一眼被读成「标签」而不是「一句很小的话」，
字距是唯一不靠颜色做到这件事的手段。
⚠️ 2026-08-28：中文默认**不再用等宽体**。原来整条规则是
`font-family: var(--k-mono); letter-spacing:.16em; text-transform:uppercase`——
这三样是为拉丁写的，套在汉字上是三重灾难：
· 等宽体里的汉字要么退到系统兜底字体（与正文不是同一款），要么被拉成方格；
· .16em 字距加在方块字之间，「专注 AI 硬件」会读成「专 注 A I 硬 件」；
· uppercase 对汉字无效，只把中间夹的英文单词变形。
现在：中文走无衬线 + 字重 600 + 克制的 .08em；
拉丁在下面 [lang^="en"] 那段里恢复等宽与大字距 —— 那里它是对的。 */
.k-eyebrow { font-family: var(--k-sans); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; color: var(--k-ink-3); }
[lang^="en"] .k-eyebrow { font-family: var(--k-mono); font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
/* ⚠️ 2026-08-28：标题字阶整体上调一档（24/18/15 → 30/21/16）。
正文仍然是 14px —— 密集版式的正文不能动，动了每屏能装的信息量就掉了。
要放大的是**层级差**：原来 h1 只比正文大 10px，扫版面时「哪里是标题」
要靠加粗去分辨，而加粗在中文里本来就不明显（很多系统字体没有真 Bold）。
30 / 21 / 16 / 14 这四档，隔着一米看屏幕也分得出来。 */
.k-h1 { font-size: 30px; font-weight: 600; line-height: var(--k-head-lh); letter-spacing: var(--k-head-ls); }
.k-h2 { font-size: 21px; font-weight: 600; line-height: var(--k-head-lh); letter-spacing: var(--k-head-ls); }
.k-h3 { font-size: 16px; font-weight: 600; }
.k-lede { color: var(--k-ink-2); font-size: 15px; max-width: var(--k-w-text); line-height: var(--k-prose-lh); }
.k-muted { color: var(--k-ink-3); }
.k-num { font-family: var(--k-mono); font-variant-numeric: tabular-nums; }
.k-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* 栏目头：左标题 + 右「更多 ›」。整站所有卡片共用这一个，
而不是每块内容各写一套 —— 旧站就是各写各的，没有两处间距一样。 */
.k-panel-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 14px 18px; border-bottom: 1px solid var(--k-line-soft);
}
.k-panel-head h2, .k-panel-head h3 {
font-size: 16.5px; font-weight: 600; letter-spacing: .3px;
/* 标题左侧那条 3px 的品牌色短竖线。整站几十个栏目头共用同一个组件，
所以这一笔加一次就到处都有 —— 这是「品牌化」性价比最高的一处：
它不占地方、不抢注意力，但每一块内容的起点都带上了品牌色。
用伪元素而不是让模板多写一个 ：模板里一个字都不用改。 */
display: inline-flex; align-items: center; gap: 9px;
}
.k-panel-head h2::before, .k-panel-head h3::before {
content: ""; width: 3px; height: 15px; border-radius: 2px;
background: var(--k-brand); flex: 0 0 auto;
}
.k-panel-more { font-size: 12.5px; color: var(--k-brand); display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.k-panel-more:hover { color: var(--k-brand-2); }
.k-panel-more::after { content: "\203A"; font-size: 15px; line-height: 1; }
/* ── 按钮 ────────────────────────────────────────────────────────────────── */
.k-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
/* 2026-08-28：7/16 → 9/18。原来的按钮高 30px，在 14px 正文旁边显得「细」，
而按钮是页面上唯一一个「越敦实越可信」的元素 —— 它承诺的是点下去会发生事。 */
padding: 9px 18px; border-radius: var(--k-radius); border: 1px solid transparent;
font-size: 13.5px; font-weight: 500; line-height: 1.4; cursor: pointer;
background: var(--k-surface-3); color: var(--k-ink);
transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .15s;
white-space: nowrap;
}
.k-btn:hover { background: var(--k-line); color: var(--k-ink); }
/* 主 CTA 带一层同色投影。这不是装饰 —— 纯色块按钮贴在白底上是「平的」，
一层橙色的低透明投影让它从纸面上浮起来，这是主按钮与次按钮之间
除了颜色以外的第二重区分（色盲用户只能靠这一重）。 */
.k-btn-primary { background: var(--k-brand); color: #fff; box-shadow: 0 1px 2px rgba(232,93,0,.24), 0 4px 12px rgba(232,93,0,.20); }
.k-btn-primary:hover { background: var(--k-brand-2); color: #fff; box-shadow: 0 2px 4px rgba(232,93,0,.26), 0 8px 20px rgba(232,93,0,.26); transform: translateY(-1px); }
.k-btn-primary:active { transform: none; }
/* 强调按钮 = 会花钱或产生商务往来的动作：加购、立即订购、提交询价。
到处都是它的时候，它就不再是强调。 */
.k-btn-signal { background: var(--k-price); color: #fff; }
.k-btn-signal:hover { background: var(--k-price-2); color: #fff; }
.k-btn-ghost { background: var(--k-surface); border-color: var(--k-line); color: var(--k-ink-2); }
.k-btn-ghost:hover { background: var(--k-surface-2); border-color: var(--k-brand); color: var(--k-brand); }
.k-btn-lg { padding: 13px 30px; font-size: 15px; }
.k-btn-sm { padding: 5px 11px; font-size: 12px; }
.k-btn-block { width: 100%; }
.k-btn[disabled], .k-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.k-btn-pill { border-radius: 999px; padding: 6px 20px; border: 1px solid rgba(255,255,255,.85); background: transparent; color: #fff; font-size: 13px; }
.k-btn-pill:hover { background: rgba(255,255,255,.16); color: #fff; }
/* ── 表单 ────────────────────────────────────────────────────────────────── */
.k-field { display: flex; flex-direction: column; gap: 5px; }
.k-label { font-size: 13px; color: var(--k-ink-2); }
.k-label .k-req { color: var(--k-price); margin-left: 2px; }
.k-input, .k-select, .k-textarea {
width: 100%; padding: 9px 12px; border: 1px solid var(--k-line);
border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-ink);
font-size: 13.5px; transition: border-color .15s, box-shadow .15s;
}
.k-input:focus, .k-select:focus, .k-textarea:focus { outline: none; border-color: var(--k-brand); box-shadow: var(--k-focus); }
.k-input::placeholder, .k-textarea::placeholder { color: var(--k-ink-4); }
.k-textarea { min-height: 96px; resize: vertical; line-height: 1.6; }
.k-help { font-size: 12px; color: var(--k-ink-3); }
.k-error { font-size: 12px; color: var(--k-crit); }
.k-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.k-hp { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }
.k-qty { display: inline-flex; border: 1px solid var(--k-line); border-radius: var(--k-radius); overflow: hidden; background: var(--k-surface); }
.k-qty button { width: 28px; border: 0; background: var(--k-surface-3); cursor: pointer; color: var(--k-ink-2); font-size: 15px; line-height: 1; }
.k-qty button:hover { background: var(--k-line); color: var(--k-ink); }
.k-qty input { width: 58px; border: 0; text-align: center; background: transparent; font-family: var(--k-mono); font-variant-numeric: tabular-nums; font-size: 13.5px; }
.k-qty input:focus { outline: none; }
/* ── 标签 / 状态 ─────────────────────────────────────────────────────────── */
.k-tag { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: 2px; font-size: 11.5px; line-height: 18px; background: var(--k-surface-3); color: var(--k-ink-2); white-space: nowrap; }
.k-tag-brand { background: var(--k-brand-soft); color: var(--k-brand); }
.k-tag-ok { background: var(--k-ok-soft); color: var(--k-ok); }
.k-tag-warn { background: var(--k-warn-soft); color: var(--k-warn); }
.k-tag-crit { background: var(--k-crit-soft); color: var(--k-crit); }
.k-tag-signal { background: var(--k-price-soft); color: var(--k-price); }
.k-tag-blue { background: var(--k-blue-soft); color: var(--k-blue); }
.k-tag-mono { font-family: var(--k-mono); letter-spacing: .02em; }
/* 实心角标，压在商品图左上角：买赠 / 新品 / 直供 */
.k-tag-solid { background: var(--k-brand); color: #fff; border-radius: 2px 0 6px 0; padding: 2px 7px; font-size: 11px; }
.k-stock { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; }
.k-stock::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }
.k-stock-in::before { background: var(--k-ok); } .k-stock-in { color: var(--k-ok); }
.k-stock-low::before { background: var(--k-warn); border-radius: 1px; transform: rotate(45deg); }
.k-stock-low { color: var(--k-warn); }
.k-stock-out::before { background: var(--k-ink-3); border-radius: 1px; }
.k-stock-out { color: var(--k-ink-3); }
.k-stock-rfq::before { background: var(--k-blue); border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.k-stock-rfq { color: var(--k-blue); }
/* ── 顶栏 ────────────────────────────────────────────────────────────────── */
/* 三层：工具条（细）→ 主栏（Logo + 搜索 + 购物车）→ 导航条（全部分类 + 主入口）。
导航必须服务端直出 —— JS 渲染的导航等于爬虫眼里每个页面都是孤岛，
几万个产品页只能靠 sitemap 被发现，站内权重完全传不下去。 */
.k-head { background: var(--k-surface); }
/* ── 工具条 ──────────────────────────────────────────────────────────────
⚠️ 2026-08-28：浅灰底 → 结构深色。这是整次改版里**单笔收益最大**的一处。
原来它是 #FAFAFA 底 + #999 小字，压在 #FFF 的主栏上面 —— 两者相差不到 3%
亮度，实际效果是「顶栏上方有一条说不清是什么的浅色带」。
换成深色之后：① 页面从第一像素起就有一条锚，整个顶栏被它压住，
显得稳；② 深色带是国际工业品站（RS / Farnell / Misumi）的通行开局，
中文用户对它也不陌生（京东企业购、震坤行同样是深色工具条）；
③ 币种、语言这类「不常用但必须能找到」的功能放在深色带里最合适 ——
它们从此不再与主栏的搜索框争夺注意力。
⚠️ 里面所有颜色走 --k-deep-* 而不是 --k-ink-*：这块在深浅两个主题下
**都是深的**，用文字色令牌会让它在深色主题下翻成浅色。 */
.k-head-util { background: var(--k-deep); font-size: 12px; color: var(--k-deep-ink-3); }
.k-head-util .k-wrap { display: flex; align-items: center; gap: 16px; height: 38px; }
/* ⚠️ 这条不是可有可无的。工具条挂着 .k-scroll-x（横向滚），但**横向滚的前提是
里面的东西不折行** —— 少了这一条，390px 的手机上「您好，欢迎光临」会折成两行、
「简体中文」被压成竖排的「体中」，整条工具条从 38px 撑到 76px。
flex item 默认可以收缩到内容宽度以下（min-width:auto 只对 overflow 可见时生效），
所以要同时按住 flex 与 white-space 两处。 */
.k-head-util .k-wrap > * { flex: 0 0 auto; white-space: nowrap; }
.k-head-util .k-wrap > .k-grow { flex: 1 1 auto; }
.k-head-util a { color: var(--k-deep-ink-3); transition: color .15s; }
.k-head-util a:hover { color: #fff; text-decoration: none; }
.k-head-util .k-lang { margin-left: 4px; }
.k-head-util .k-sep { width: 1px; height: 12px; background: var(--k-deep-line); }
/* 币种是一个原生