/* ===========================================================================
   DONGKANG PARTS — 设计规则（Design Tokens）
   ---------------------------------------------------------------------------
   面向：外贸汽配 B2B 批发站 · 目标市场拉美（智利/秘鲁为主），后期中东
   风格：工业件号目录（industrial parts catalogue）
   版本：1.0 · 2026-09-20

   使用方式
     1) 在任何页面 <link rel="stylesheet" href="design-tokens.css">
     2) 页面自己的布局样式写在页面里，只允许引用本文件的变量，不再自定义色值
     3) 要改整站观感，只改本文件的变量

   三条铁律（违反这三条，页面就不再是同一套设计）
     · 品牌蓝 #0033FF 只用于「动作」——按钮、链接、焦点环。
       页头、页脚、分隔、边框一律用钢灰，不用蓝。
     · 每个区块的视觉重点只有一个。产品卡上唯一的实心按钮就是询价。
     · 信息用「标签 / 值」的行结构承载，值用等宽字体。
       分隔靠 1px 细线，不靠阴影。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. 字体
   ---------------------------------------------------------------------------
   一个超家族，三种职能，不是三种风格：
     IBM Plex Sans            正文与界面
     IBM Plex Sans Condensed  标题（窄体＝工业标识牌的气质，且省横向空间）
     IBM Plex Mono            件号 / SKU / 数量 / 规格值（机器可读的标识符）
     IBM Plex Sans Arabic     阿拉伯语（未来中东市场，同家族，RTL 时骨架不违和）
   --------------------------------------------------------------------------- */
:root {
	--font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;
	--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
		monospace;
	--font-arabic: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif;

	/* 字号阶梯 —— 1.25 比例，无衬线取紧一档行高 */
	--fs-2xs: 0.6875rem; /* 11px  表格脚注、版权 */
	--fs-xs: 0.75rem; /* 12px  标签、单位 */
	--fs-sm: 0.8125rem; /* 13px  元信息 */
	--fs-ui: 0.875rem; /* 14px  导航、按钮 */
	--fs-base: 1rem; /* 16px  正文基准 */
	--fs-lead: 1.0625rem; /* 17px  导语（西语/葡语较长，基准略大更耐读） */
	--fs-h4: 1.25rem; /* 20px */
	--fs-h3: 1.5rem; /* 24px */
	--fs-h2: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); /* 28→36px */
	--fs-h1: clamp(2.125rem, 1.5rem + 2.4vw, 3.125rem); /* 34→50px */
	--fs-display: clamp(2.5rem, 1.5rem + 4vw, 4.25rem); /* 40→68px 主视觉 */

	--lh-tight: 1.12; /* 大标题 */
	--lh-snug: 1.28; /* 小标题 */
	--lh-body: 1.6; /* 正文 */
	--lh-data: 1.4; /* 表格 / 数据行 */

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ---------------------------------------------------------------------------
	   2. 颜色
	   ---------------------------------------------------------------------------
	   底色是钢灰（冷调中性），不是暖白 —— 汽配是钢铁、铸件、橡胶的行业。
	   品牌蓝取自商标的三角标 #0033FF，深红 #9E0506 只属于 logo，不进界面。
	   --------------------------------------------------------------------------- */

	/* 钢灰中性阶 */
	--ink: #0e1418; /* 标题 */
	--ink-2: #38454f; /* 正文 */
	--ink-3: #5f6e78; /* 次要信息、标签（实测 #66757f 在 --surface-2 上只有 4.34:1，不够 4.5） */
	--ink-4: #8b979f; /* 占位、禁用 */

	--surface: #ffffff; /* 卡片 */
	--surface-2: #f2f5f7; /* 页面底 */
	--surface-3: #e7ecf0; /* 图片井、表头 */
	--surface-4: #dde4e9;

	--line: #dfe5ea; /* 常规细线 */
	--line-2: #c8d2da; /* 强调细线 / 控件边框 */
	--line-3: #9aa8b2; /* 强边框 */

	/* 深钢色带：页头、主视觉、页脚 */
	--steel-900: #101a21;
	--steel-800: #18242c;
	--steel-700: #24323c;
	--steel-600: #33434e;
	--on-steel-1: #ffffff; /* 深底主文字 */
	--on-steel-2: #b8c5cd; /* 深底次文字 */
	--on-steel-3: #8494a0; /* 深底弱文字 */

	/* 品牌 */
	--brand: #0033ff; /* ★ 动作色：询价按钮、链接、焦点环 */
	--brand-deep: #071e8d; /* 悬停 / 浅底上的链接文字 */
	--brand-tint: #eaf0ff; /* 选中态浅底 */
	--brand-red: #9e0506; /* 仅用于 logo 图形，界面里不使用 */

	/* 语义 */
	--ok: #0f7b4f; /* 已确认、现货 */
	--ok-tint: #e6f4ed;
	--pending: #9a5b06; /* 「待确认」——本站真实存在的状态（适配年款未定） */
	--pending-tint: #fdf2e0;
	--danger: #b3261e;

	/* 平台色：WhatsApp 只出现在 WhatsApp 按钮上。
	   ⚠️ 没有用官方的 #25D366 / #1FA855 —— 那两个绿上放白字只有 1.9:1 / 3.1:1，
	   14px 文字读不了（实测）。压深到 5.03:1，仍然是明确的绿色。 */
	--wa: #0d803f;
	--wa-hover: #0a6933;

	/* ---------------------------------------------------------------------------
	   3. 间距（4px 基）
	   --------------------------------------------------------------------------- */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.25rem;
	--sp-6: 1.5rem;
	--sp-8: 2rem;
	--sp-10: 2.5rem;
	--sp-12: 3rem;
	--sp-16: 4rem;
	--sp-20: 5rem;
	--sp-24: 6rem;

	/* 区块纵向节奏 */
	--section-y: clamp(3rem, 2rem + 3vw, 5rem);
	--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--container: 1280px;
	--measure: 68ch; /* 正文最大行长 */

	/* ---------------------------------------------------------------------------
	   4. 圆角 —— 工业风：小圆角。全局只有三档，避免「所有东西一个圆角」。
	   --------------------------------------------------------------------------- */
	--r-1: 2px; /* 输入框、标签 */
	--r-2: 3px; /* 按钮、表格容器、图片井 */
	--r-3: 4px; /* 大面板 */
	--r-pill: 999px; /* 仅用于状态徽标 */

	/* ---------------------------------------------------------------------------
	   5. 描边与阴影
	   ---------------------------------------------------------------------------
	   分离靠细线不靠阴影。阴影只用在「浮起来」的东西上：吸顶页头、下拉、悬浮按钮。
	   --------------------------------------------------------------------------- */
	--shadow-header: 0 1px 0 var(--line), 0 6px 16px -12px rgba(16, 26, 33, 0.28);
	--shadow-pop: 0 10px 30px -12px rgba(16, 26, 33, 0.3);
	--shadow-float: 0 6px 20px -6px rgba(16, 26, 33, 0.35);

	--focus-ring: 0 0 0 3px rgba(0, 51, 255, 0.32);
	--focus-ring-steel: 0 0 0 3px rgba(255, 255, 255, 0.55);

	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------------------------------------------------------------------------
   6. 基础元素
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* 页头是吸顶的，锚点跳转要给标题留出被页头盖住的那一段 */
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--surface-2);
	color: var(--ink-2);
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* 西/葡/英之外的语言：阿拉伯语切成同家族 Arabic 字面，行高放宽 */
:lang(ar) body,
[dir="rtl"] body {
	font-family: var(--font-arabic);
	line-height: 1.8;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--ink);
	font-family: var(--font-cond);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
}
h2 {
	font-size: var(--fs-h2);
}
h3 {
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}
h4 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}

p {
	margin: 0 0 var(--sp-4);
	max-width: var(--measure);
}
p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--brand-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover {
	color: var(--brand);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* [hidden] 靠 UA 样式表的 display:none 生效 —— 任何设了 display 的组件
   （比如 .chip 的 inline-flex）都会把它顶掉，然后 hidden 的元素照样显示出来。 */
[hidden] {
	display: none !important;
}

/* 键盘可达性：所有可聚焦元素统一的焦点环，永不移除 */
:focus-visible {
	outline: 2px solid var(--brand);
	outline-offset: 2px;
	border-radius: var(--r-1);
}
.steel :focus-visible,
.steel-band :focus-visible,
.site-footer :focus-visible {
	outline-color: #fff;
}

/* 屏幕阅读器专用 */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-inline-start: var(--sp-4);
	top: -100px;
	z-index: 200;
	padding: var(--sp-3) var(--sp-5);
	background: var(--brand);
	color: #fff;
	font-weight: var(--fw-semibold);
	border-radius: var(--r-2);
	transition: top 0.15s var(--ease);
}
.skip-link:focus {
	top: var(--sp-3);
	color: #fff;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
   7. 布局工具
   --------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section {
	padding-block: var(--section-y);
}
.section--tight {
	padding-block: var(--sp-12);
}
.section--surface {
	background: var(--surface);
}
.section--line {
	border-top: 1px solid var(--line);
}

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-8);
}
.section-head__title {
	flex: 1 1 20rem;
	min-width: 0;
}
.section-head__title h2 {
	/* 行长写在标题自己身上 —— 写在 16px 的外层容器上会按 16px 算 ch，
	   36px 的标题就会在约 270px 处换行（这是本页第一版的真实 bug）。 */
	max-width: 24ch;
	margin-bottom: var(--sp-2);
}
.section-head__desc {
	margin: 0;
	color: var(--ink-3);
	font-size: var(--fs-lead);
	max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   8. 标识符文字（件号 / SKU / 规格值）
   ---------------------------------------------------------------------------
   本设计最核心的一条：一切机器可读的标识符都用等宽字体。
   件号是这行的通用语言，让它在视觉上就是「一个编号」而不是「一段文字」。
   --------------------------------------------------------------------------- */
.mono {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	letter-spacing: -0.01em;
}
.ref {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	color: var(--ink);
	/* 件号里带连字符：优先断在连字符处，别在中间硬切。
	   break-all 会把 "CHANGAN-CS75PLUS-HG-001" 切成 "…-HG-0" / "01"。 */
	word-break: normal;
	overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------------------
   ★ RTL：标识符必须锁成 LTR
   ---------------------------------------------------------------------------
   这是 **整个设计里最不能出错的一处**：件号是这行的通用语言，被倒着写
   比字号不对严重得多。

   阿拉伯语页面（dir="rtl"）下，浏览器会按双向算法重排文字。实测（强制
   dir="rtl" 打开线上首页）出问题的正是这些机器可读的值：

     18067965026@163.com   →   渲染成  com.163@18067965026
     +86 180 6796 5026     →   渲染成  5026 6796 180 86+

   只加 unicode-bidi: isolate 不够：隔离只让内容**按自己的方向**排，
   而「+86 180 6796 5026」里一个强方向字符都没有（全是数字和符号），
   于是仍然继承父级的 RTL。所以必须显式给 direction: ltr。

   LTR 页面下这两条没有副作用（方向和继承值一致）。
   --------------------------------------------------------------------------- */
.mono,
.ref {
	direction: ltr;
	unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   9. 标签/值 数据行 —— 全站承载信息的基本单元
   --------------------------------------------------------------------------- */
.spec {
	display: grid;
	grid-template-columns: minmax(6.5rem, 38%) 1fr;
	gap: var(--sp-4);
	padding-block: var(--sp-3);
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
	line-height: var(--lh-data);
}
.spec:last-child {
	border-bottom: 0;
}
.spec__k {
	color: var(--ink-3);
	font-weight: var(--fw-medium);
}
.spec__v {
	color: var(--ink);
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}
.spec--plain .spec__v {
	font-family: var(--font-sans);
}

/* ---------------------------------------------------------------------------
   10. 按钮
   --------------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 44px; /* 触控目标下限 */
	padding: var(--sp-3) var(--sp-5);
	border: 1px solid transparent;
	border-radius: var(--r-2);
	background: transparent;
	color: inherit;
	font-family: inherit;
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
		color 0.15s var(--ease);
}

.btn--primary {
	background: var(--brand);
	color: #fff;
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--brand-deep);
	color: #fff;
}

.btn--outline {
	border-color: var(--line-2);
	background: var(--surface);
	color: var(--ink);
}
.btn--outline:hover,
.btn--outline:focus-visible {
	border-color: var(--ink);
	background: var(--surface);
	color: var(--ink);
}

/* 深色底上的次级按钮 */
.btn--ghost-steel {
	border-color: rgba(255, 255, 255, 0.34);
	color: #fff;
}
.btn--ghost-steel:hover,
.btn--ghost-steel:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.btn--wa {
	background: var(--wa);
	color: #fff;
}
.btn--wa:hover,
.btn--wa:focus-visible {
	background: var(--wa-hover);
	color: #fff;
}

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

/* 页头「询价」按钮上的件数角标 —— 全站可见地告诉客户篮里有多少件。
   蓝底上用白底 + 品牌深蓝字，既跳得出来又不抢主按钮。 */
.cta__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	margin-inline-start: var(--sp-2);
	padding-inline: 5px;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--brand-deep);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: var(--fw-semibold);
	line-height: 1;
}
.btn--lg {
	min-height: 52px;
	padding: var(--sp-4) var(--sp-6);
	font-size: var(--fs-base);
}

/* ---------------------------------------------------------------------------
   11. 状态徽标
   --------------------------------------------------------------------------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-1);
	padding: 2px var(--sp-2);
	border-radius: var(--r-pill);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.5;
	white-space: nowrap;
}
.chip--ok {
	background: var(--ok-tint);
	color: var(--ok);
}
.chip--pending {
	background: var(--pending-tint);
	color: var(--pending);
}

/* ---------------------------------------------------------------------------
   12. 表单控件
   --------------------------------------------------------------------------- */
.field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
}
.field__label {
	color: var(--ink-3);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}

.input,
.select,
.textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--sp-3);
	border: 1px solid var(--line-2);
	border-radius: var(--r-1);
	background: var(--surface);
	color: var(--ink);
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
	line-height: 1.3;
}
.textarea {
	min-height: 6rem;
	resize: vertical;
}
.input::placeholder,
.textarea::placeholder {
	color: var(--ink-4);
}
.input:hover,
.select:hover,
.textarea:hover {
	border-color: var(--line-3);
}
.input:focus,
.select:focus,
.textarea:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: var(--focus-ring);
}

/* 原生 select 自带箭头在各浏览器不一致，统一换掉 */
.select {
	appearance: none;
	padding-inline-end: var(--sp-8);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2366757f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-3) center;
}
[dir="rtl"] .select {
	background-position: left var(--sp-3) center;
}

/* 深色底上的控件 */
.steel .input,
.steel .select,
.steel .textarea,
.steel-band .input,
.steel-band .select,
.steel-band .textarea {
	border-color: rgba(255, 255, 255, 0.24);
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
}
.steel .input::placeholder,
.steel .textarea::placeholder {
	color: var(--on-steel-3);
}
.steel .select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23b8c5cd' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.steel .select option {
	color: var(--ink);
}
.steel .field__label {
	color: var(--on-steel-2);
}

/* ---------------------------------------------------------------------------
   13. 产品卡 —— 首页与列表页共用
   --------------------------------------------------------------------------- */
.pcard {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	transition: border-color 0.15s var(--ease);
}
.pcard:hover {
	border-color: var(--line-3);
}
.pcard__media {
	position: relative;
	aspect-ratio: 3 / 2;
	background: var(--surface-3);
}
.pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pcard__badge {
	position: absolute;
	inset-block-start: var(--sp-3);
	inset-inline-start: var(--sp-3);
}
.pcard__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: var(--sp-5);
}
.pcard__name {
	margin-bottom: var(--sp-1);
	font-family: var(--font-cond);
	/* 卡片标题比正文标题小一档：件号卡片是密排的，
	   20px 时「Parachoques delantero GEELY COOLRAY 2020–2024」要占 4 行，
	   四张卡的内节奏就散了。18px 收在 3 行内。 */
	font-size: 1.125rem;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
}
.pcard__name a {
	color: var(--ink);
	text-decoration: none;
}
.pcard__name a:hover {
	color: var(--brand);
	text-decoration: underline;
}
.pcard__ref {
	margin-bottom: var(--sp-4);
}

/* 适配行：这个件装在哪台车上。列表页用一行写完，
   不再像首页那样拆成「Aplica」「Año」两行——列表要的是密度。 */
.pcard__fit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-2);
	margin-top: calc(var(--sp-4) * -1 + var(--sp-1));
	margin-bottom: var(--sp-4);
	color: var(--ink-3);
	font-size: var(--fs-sm);
	line-height: var(--lh-data);
}

/* 名称 + 件号 + 适配的成组容器。
   卡片视图里它只是个普通块；列表页的**表格视图**靠它把这三样合成一列
   （父级 .pcard__body 用 display: contents 打散，这个容器就是那一列）。 */
.pcard__id {
	min-width: 0;
}

/* 卡片内的规格行：标签列更窄，给值让位 */
.pcard__specs {
	margin-bottom: var(--sp-5);
	border-top: 1px solid var(--line);
}
.pcard__specs .spec {
	grid-template-columns: 5.5rem 1fr;
	padding-block: var(--sp-2);
}

/* 询价是这个页面唯一重要的动作，所以它是卡片上唯一的实心按钮 */
.pcard__actions {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-top: auto;
}
.pcard__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: 40px;
	color: var(--ink-3);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	border-radius: var(--r-2);
}
.pcard__wa:hover {
	color: var(--wa-hover);
	background: var(--ok-tint);
}

/* ---------------------------------------------------------------------------
   14. RTL 就绪
   ---------------------------------------------------------------------------
   全部用逻辑属性（inline-start/end）。此刻不需要额外翻转规则 ——
   给 <html dir="rtl"> 即可整体镜像，为将来的阿拉伯语站点留好路。
   --------------------------------------------------------------------------- */
[dir="rtl"] .pcard__badge {
	inset-inline-start: var(--sp-3);
	inset-inline-end: auto;
}