/* ===========================================================================
   东康部品 —— 首页改版样式（第二轮设计：白底 / 深蓝 / 红）
   ---------------------------------------------------------------------------
   版本：1.0 · 2026-10-12

   这一份**只作用于首页**，选择器全部挂在 `body.home` 下，或者用 `dk2-` 前缀的
   类名。原因：用户明确要求「产品的内容导航页保持之前的样式不要改动」，
   而站上其它页面共用 tokens.css / front.css。动那两个文件会全站改观感。

   与上一版 home.css 的关系
     · home.css 仍然加载（它负责复位 WordPress 的受限宽度容器，见其文件头）。
     · 本文件用一套**新的类名前缀 dk2-**，与 dk-* 不冲突，
       所以老规则不会渗进来，回退时也不会互相牵扯。

   颜色一律走本文件的 --dk2-* 变量（值取自设计包《设计与内容说明.md》），
   不复用 tokens.css 的钢灰/品牌蓝 —— 那套是上一版工业风的语言。

   ★ 对比度实测（写之前算过，不是估计）
     --dk2-muted  #526373 在白底 6.19:1、在 --dk2-paper 上 5.71:1   ✓
     --dk2-navy   #10283f 在白底 15.05:1                            ✓
     --dk2-red    #b82332 白字放上去 6.32:1 / 红字放白底 6.32:1      ✓
     --dk2-num    #7e8d99 大号数字（34px）在白底 3.41:1              ✓（大字门槛 3:1）
       —— 设计稿原值 #cad3db 只有 1.52:1，连大字门槛都不到，已压深。
   =========================================================================== */

body.home {
	/* ---- 设计包取色 ---- */
	--dk2-navy: #10283f; /* 深蓝：标题、深底区块 */
	--dk2-navy-2: #1c3f5c; /* 深蓝悬停 */
	--dk2-red: #b82332; /* 红：关键动作、强调 */
	--dk2-red-2: #981d2a; /* 红悬停 */
	--dk2-ink: #152a3d; /* 正文 */
	--dk2-muted: #526373; /* 辅助文字 */
	--dk2-line: #dbe1e6; /* 细线 */
	--dk2-line-2: #c6d0d8; /* 控件边框 */
	--dk2-paper: #f4f6f7; /* 分区浅底 */
	--dk2-hero-bg: #f6f7f8; /* 主视觉浅底 */
	--dk2-white: #fff;
	--dk2-num: #7e8d99; /* 大号序号（唯一为对比度调整过的值） */
	--dk2-on-navy: #d1dde6; /* 深蓝底上的次文字 */
	--dk2-on-navy-2: #c6d2df; /* 深蓝底上的小标签 */

	--dk2-max: 1200px;
	--dk2-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

	background: var(--dk2-white);
	color: var(--dk2-ink);
}

/* 首页正文容器复位（home.css 已经做过一次，这里再声明一次是为了本文件的
   独立性 —— 万一以后 home.css 被移除，首页宽度仍然正确）。 */
body.home .entry-content.wp-block-post-content.is-layout-constrained {
	padding-inline: 0;
}
body.home .entry-content.wp-block-post-content.is-layout-constrained > * {
	max-width: none !important;
	margin-inline: 0 !important;
}

.dk2-container {
	width: 100%;
	max-width: var(--dk2-max);
	margin-inline: auto;
	padding-inline: var(--dk2-gutter);
}
.dk2-section {
	padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.dk2-section--soft {
	background: var(--dk2-paper);
}

/* ---------------------------------------------------------------------------
   通用件：小标题、按钮、文字链接
   --------------------------------------------------------------------------- */
.dk2-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	color: var(--dk2-muted);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: var(--fw-bold);
	letter-spacing: 2px;
	text-transform: uppercase;
}
.dk2-eyebrow::before {
	content: "";
	flex: none;
	width: 27px;
	height: 2px;
	background: var(--dk2-red);
}

.dk2-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 30px;
}

.dk2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 48px;
	padding: 12px 23px;
	border: 1px solid var(--dk2-navy);
	background: var(--dk2-navy);
	color: #fff;
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border-radius: 0;
	transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.dk2-btn:hover {
	background: var(--dk2-navy-2);
	border-color: var(--dk2-navy-2);
}
.dk2-btn--red {
	background: var(--dk2-red);
	border-color: var(--dk2-red);
}
.dk2-btn--red:hover {
	background: var(--dk2-red-2);
	border-color: var(--dk2-red-2);
}
.dk2-btn--outline {
	background: transparent;
	border-color: #9caab6;
	color: var(--dk2-navy);
}
.dk2-btn--outline:hover {
	background: #e8edf1;
	border-color: #9caab6;
}

.dk2-link {
	display: inline-block;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--dk2-line);
	color: var(--dk2-navy);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	text-decoration: none;
}
.dk2-link:hover {
	border-bottom-color: var(--dk2-navy);
}

.dk2-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 25px;
	margin-bottom: 30px;
}
.dk2-head h2 {
	margin: 0;
	color: var(--dk2-navy);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
	max-width: 26ch;
}
.dk2-head .dk2-eyebrow {
	margin-bottom: 12px;
}
.dk2-head p {
	margin: 12px 0 0;
	max-width: 62ch;
	color: var(--dk2-muted);
	font-size: var(--fs-sm);
	line-height: 1.7;
}
.dk2-head__link {
	flex: none;
}
.dk2-note {
	margin: 18px 0 0;
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   1. 主视觉
   --------------------------------------------------------------------------- */
.dk2-hero {
	background: var(--dk2-hero-bg);
	overflow: hidden;
}
.dk2-hero__grid {
	display: grid;
	/* 文案列略宽一点：西语/葡语标题比中文长，1.02fr 时西语主标题会折成 5 行。
	   1.08fr 下中文仍是 3 行，西语 4 行，照片也不至于被压窄。 */
	grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
	gap: 32px;
	align-items: center;
	min-height: 560px;
	padding-block: clamp(2.5rem, 2rem + 3vw, 4rem);
}
.dk2-hero__copy {
	padding-inline-end: 25px;
}
.dk2-hero h1 {
	margin: 0;
	color: var(--dk2-navy);
	font-size: clamp(2.2rem, 1.3rem + 2.9vw, 3.55rem);
	line-height: 1.14;
	letter-spacing: -0.035em;
}
.dk2-hero h1 em {
	color: var(--dk2-red);
	font-style: normal;
}
.dk2-hero__lead {
	margin: 24px 0 0;
	max-width: 46ch;
	color: var(--dk2-muted);
	font-size: var(--fs-base);
	line-height: 1.85;
}
.dk2-hero__foot {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
}
.dk2-hero__foot li::before {
	content: "✓";
	margin-inline-end: 7px;
	color: var(--dk2-red);
}

/* 主视觉图片：左上切角 + 右上红色直角符号（照设计稿） */
.dk2-hero__visual {
	position: relative;
	align-self: stretch;
	min-height: 400px;
}
.dk2-hero__visual img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 400px;
	object-fit: cover;
	object-position: 60% 50%;
	clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}
.dk2-hero__visual::before {
	content: "";
	position: absolute;
	inset-block-start: -14px;
	inset-inline-end: 15px;
	width: 65px;
	height: 50px;
	border-block-start: 3px solid var(--dk2-red);
	border-inline-end: 3px solid var(--dk2-red);
	z-index: 1;
}
.dk2-hero__caption {
	position: absolute;
	inset-block-end: 20px;
	inset-inline-start: 23px;
	inset-inline-end: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	padding: 16px 22px;
	background: var(--dk2-navy);
	color: #fff;
}
.dk2-hero__caption small {
	display: block;
	margin-bottom: 4px;
	color: var(--dk2-on-navy-2);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.6px;
}
.dk2-hero__caption strong {
	display: block;
	font-size: var(--fs-lead);
	line-height: 1.35;
}
.dk2-hero__caption > span {
	flex: none;
	color: #e8a2a6;
	font-size: 26px;
	line-height: 1;
}

/* ---------------------------------------------------------------------------
   2. 数据条
   --------------------------------------------------------------------------- */
.dk2-metrics {
	border-block: 1px solid var(--dk2-line);
	background: var(--dk2-white);
}
.dk2-metrics__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	padding-block: 26px;
}
.dk2-metric {
	display: flex;
	align-items: center;
	gap: 17px;
	padding-inline-start: 38px;
	border-inline-start: 1px solid var(--dk2-line);
	/* ★ 栅格子项必须能收缩。1fr = minmax(auto,1fr)，auto 的最小尺寸是内容宽度，
	   西语那种长单词（Integral）会把整行顶宽，页面就出现横向滚动。
	   实测 360px：加上这一条之前 scrollWidth 373 > 视口 360。 */
	min-width: 0;
}
.dk2-metric:first-child {
	padding-inline-start: 0;
	border-inline-start: 0;
}
.dk2-metric strong {
	color: var(--dk2-navy);
	font-family: var(--font-mono);
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.4rem);
	font-weight: var(--fw-bold);
	line-height: 1;
	letter-spacing: -1px;
}
.dk2-metric span {
	color: var(--dk2-muted);
	font-size: var(--fs-sm);
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
   3. 快速找到所需配件 —— 真表单，提交到 /shop/
   --------------------------------------------------------------------------- */
.dk2-search {
	padding-block: 38px;
	border-block-end: 1px solid var(--dk2-line);
	background: var(--dk2-white);
}
.dk2-search__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
	margin-bottom: 16px;
}
.dk2-search__head h2 {
	margin: 0;
	color: var(--dk2-navy);
	font-size: var(--fs-h4);
	letter-spacing: -0.01em;
}
.dk2-search__head p {
	margin: 0;
	color: var(--dk2-muted);
	font-size: var(--fs-sm);
}
.dk2-search__form {
	display: grid;
	grid-template-columns: 1.2fr 1fr 2fr auto;
	gap: 12px;
	align-items: end;
}

.dk2-field label {
	display: block;
	margin-bottom: 7px;
	color: var(--dk2-ink);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}
.dk2-field select,
.dk2-field input {
	width: 100%;
	min-height: 48px;
	padding: 11px 12px;
	border: 1px solid var(--dk2-line-2);
	border-radius: 0;
	background: var(--dk2-white);
	color: var(--dk2-ink);
	font-family: var(--font-sans);
	font-size: var(--fs-ui);
}
.dk2-field select:focus-visible,
.dk2-field input:focus-visible {
	outline: 3px solid #3177b0;
	outline-offset: 2px;
}
.dk2-search__form .dk2-btn {
	min-height: 48px;
	white-space: nowrap;
}

/* 品类快捷入口（折叠进「查找配件」这一段，不单独占一屏） */
.dk2-cats {
	margin-top: 22px;
	padding-top: 18px;
	border-block-start: 1px solid var(--dk2-line);
}
.dk2-cats__title {
	margin: 0 0 12px;
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
}
.dk2-cats__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.dk2-cats__list a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--dk2-line);
	background: var(--dk2-white);
	color: var(--dk2-ink);
	font-size: var(--fs-xs);
	text-decoration: none;
	transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.dk2-cats__list a:hover {
	border-color: var(--dk2-navy);
	color: var(--dk2-navy);
}
.dk2-cats__list a.dk2-all {
	border-color: var(--dk2-navy);
	color: var(--dk2-navy);
	font-weight: var(--fw-semibold);
}

/* ---------------------------------------------------------------------------
   4. 汽车品牌
   --------------------------------------------------------------------------- */
.dk2-brands {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block-start: 1px solid var(--dk2-line);
	border-inline-start: 1px solid var(--dk2-line);
}
.dk2-brand {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 7px;
	min-height: 122px;
	padding: 26px 24px;
	border-inline-end: 1px solid var(--dk2-line);
	border-block-end: 1px solid var(--dk2-line);
	background: var(--dk2-white);
	text-decoration: none;
	transition: background 0.15s var(--ease);
}
.dk2-brand:hover {
	background: #eef2f5;
}
.dk2-brand strong {
	color: var(--dk2-navy);
	font-family: var(--font-cond);
	font-size: 22px;
	font-weight: var(--fw-bold);
	letter-spacing: -0.5px;
	line-height: 1.2;
}
.dk2-brand span {
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
	line-height: 1.5;
	padding-inline-end: 13px;
}
.dk2-brand i {
	position: absolute;
	inset-block-end: 22px;
	inset-inline-end: 18px;
	color: var(--dk2-red);
	font-size: 19px;
	font-style: normal;
	line-height: 1;
}
.dk2-brand:focus-visible {
	outline: 3px solid #3177b0;
	outline-offset: -3px;
}

/* ---------------------------------------------------------------------------
   5. 仓储与出运（新增栏目）
   --------------------------------------------------------------------------- */
.dk2-logi {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 28px;
	align-items: stretch;
}
.dk2-panel {
	min-width: 0;
	background: var(--dk2-white);
	border: 1px solid var(--dk2-line);
	border-block-start: 3px solid var(--dk2-navy);
	padding: 30px;
}
.dk2-panel__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.dk2-panel__mark {
	display: grid;
	flex: none;
	place-items: center;
	width: 46px;
	height: 46px;
	background: #edf2f6;
	color: var(--dk2-navy);
	font-size: 26px;
	line-height: 1;
}
.dk2-panel__head h3 {
	margin: 0;
	color: var(--dk2-navy);
	font-size: var(--fs-h4);
	line-height: 1.25;
}
.dk2-panel__head p {
	margin: 6px 0 0;
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
}
.dk2-panel__count {
	margin-inline-start: auto;
	color: var(--dk2-num);
	font-family: var(--font-mono);
	font-size: 34px;
	font-weight: var(--fw-bold);
	line-height: 1;
}

.dk2-places {
	margin: 25px 0 0;
	padding: 0;
	list-style: none;
}
.dk2-places--wh li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 19px 0;
	border-block-start: 1px solid var(--dk2-line);
}
.dk2-places__i {
	flex: none;
	color: var(--dk2-muted);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
}
.dk2-places strong {
	display: block;
	color: var(--dk2-navy);
	font-family: var(--font-cond);
	font-size: 22px;
	line-height: 1.3;
	letter-spacing: -0.02em;
}
.dk2-places li div > span {
	display: block;
	margin-top: 5px;
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
}
.dk2-dot {
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--dk2-navy);
}
.dk2-places--wh .dk2-dot {
	margin-inline-start: auto;
	box-shadow: 0 0 0 5px #edf2f6;
}
.dk2-places__note {
	margin: 14px 0 0;
	color: var(--dk2-muted);
	font-size: var(--fs-xs);
	line-height: 1.8;
}

.dk2-delivery {
	display: grid;
	grid-template-rows: auto 1fr;
	gap: 20px;
	min-width: 0;
}
.dk2-domestic {
	padding: 25px 28px;
	background: var(--dk2-navy);
	color: #fff;
}
.dk2-domestic .dk2-region {
	margin-bottom: 8px;
	color: #d6b4b8;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 1.7px;
}
.dk2-domestic h3 {
	margin: 0;
	color: #fff;
	font-family: var(--font-cond);
	font-size: var(--fs-h4);
	line-height: 1.25;
}
.dk2-domestic p {
	margin: 12px 0 0;
	color: var(--dk2-on-navy);
	font-size: var(--fs-sm);
	line-height: 1.8;
}
.dk2-export {
	padding: 27px 28px;
	background: var(--dk2-white);
	border: 1px solid var(--dk2-line);
	border-block-start: 3px solid var(--dk2-red);
	min-width: 0;
}
.dk2-export .dk2-panel__mark {
	background: #f9ecee;
	color: var(--dk2-red);
}
.dk2-places--port {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 0;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--dk2-line);
}
.dk2-places--port li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	min-width: 0;
}
.dk2-places--port .dk2-dot {
	margin-block-start: 10px;
	background: var(--dk2-red);
}
.dk2-logi__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-block-start: 26px;
	padding-block-start: 24px;
	border-block-start: 1px solid #d4dde4;
}
.dk2-logi__foot p {
	margin: 0;
	color: var(--dk2-muted);
	font-size: var(--fs-sm);
}
.dk2-logi__foot .dk2-link {
	flex: none;
}

/* ---------------------------------------------------------------------------
   6. 公司 + 采购支持
   --------------------------------------------------------------------------- */
.dk2-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
}
.dk2-two figure {
	margin: 0;
}
.dk2-two figure img {
	display: block;
	width: 100%;
	aspect-ratio: 1.17;
	object-fit: cover;
}
.dk2-two figcaption {
	padding-block-start: 10px;
	color: var(--dk2-muted);
	font-size: 11px;
}
.dk2-copy h2 {
	margin: 0;
	max-width: 24ch;
	color: var(--dk2-navy);
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.35rem);
	line-height: 1.22;
	letter-spacing: -0.02em;
}
.dk2-copy p {
	margin: 20px 0 0;
	color: var(--dk2-muted);
	font-size: var(--fs-base);
	line-height: 1.9;
}
.dk2-lines {
	margin-top: 26px;
}
.dk2-line {
	display: flex;
	gap: 20px;
	padding: 17px 0;
	border-block-start: 1px solid var(--dk2-line);
}
.dk2-line b {
	flex: none;
	color: var(--dk2-red);
	font-family: var(--font-mono);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	line-height: 1.9;
}
.dk2-line strong {
	display: block;
	margin-bottom: 4px;
	color: var(--dk2-ink);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
}
.dk2-line p {
	margin: 0;
	font-size: var(--fs-sm);
	line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   7. 市场
   --------------------------------------------------------------------------- */
.dk2-markets {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 30px;
}
.dk2-market {
	padding-block-start: 21px;
	border-block-start: 2px solid var(--dk2-navy);
}
.dk2-market .dk2-region {
	margin-bottom: 8px;
	color: var(--dk2-red);
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 1.2px;
}
.dk2-market h3 {
	margin: 0;
	color: var(--dk2-navy);
	font-family: var(--font-cond);
	font-size: var(--fs-h4);
	line-height: 1.25;
}
.dk2-market p {
	margin: 12px 0 0;
	color: var(--dk2-muted);
	font-size: var(--fs-sm);
	line-height: 1.8;
}

/* ---------------------------------------------------------------------------
   8. 询盘区
   --------------------------------------------------------------------------- */
.dk2-cta {
	padding-block: 48px;
	background: var(--dk2-navy);
	color: #fff;
}
.dk2-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 35px;
}
.dk2-cta h2 {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
	line-height: 1.25;
}
.dk2-cta p {
	margin: 10px 0 0;
	color: var(--dk2-on-navy);
	font-size: var(--fs-sm);
	line-height: 1.7;
}
.dk2-cta .dk2-actions {
	margin-top: 0;
	flex: none;
}
.dk2-cta .dk2-btn--outline {
	border-color: #a6b8c7;
	color: #fff;
}
.dk2-cta .dk2-btn--outline:hover {
	background: #28435b;
	border-color: #a6b8c7;
}

/* ---------------------------------------------------------------------------
   响应式
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.dk2-hero__grid {
		min-height: 520px;
		gap: 18px;
	}
	.dk2-hero__copy {
		padding-inline-end: 5px;
	}
	.dk2-search__form {
		grid-template-columns: 1fr 1fr;
	}
	.dk2-search__form .dk2-keyword {
		grid-column: 1 / -1;
	}
	.dk2-search__form .dk2-btn {
		grid-column: 1 / -1;
	}
	.dk2-two {
		gap: 35px;
	}
}

@media (max-width: 900px) {
	.dk2-head {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
		margin-bottom: 23px;
	}
	.dk2-metric {
		gap: 10px;
		padding-inline-start: 20px;
	}
	.dk2-brands {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.dk2-logi {
		gap: 20px;
	}
	.dk2-panel {
		padding: 25px;
	}
	.dk2-domestic,
	.dk2-export {
		padding: 23px;
	}
	.dk2-markets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dk2-logi__foot {
		align-items: flex-start;
		flex-direction: column;
	}
	.dk2-cta__inner {
		align-items: flex-start;
		flex-direction: column;
		gap: 22px;
	}
}

@media (max-width: 760px) {
	.dk2-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		min-height: 0;
		gap: 28px;
		padding-block-start: 36px;
	}
	.dk2-hero__visual {
		min-height: 0;
	}
	.dk2-hero__visual img {
		min-height: 0;
		height: 300px;
		clip-path: polygon(6% 0, 100% 0, 100% 100%, 0 100%);
	}
	.dk2-hero__visual::before {
		inset-block-start: -8px;
		inset-inline-end: 0;
		width: 46px;
		height: 30px;
	}
	.dk2-hero__caption {
		inset-block-end: 12px;
		inset-inline-start: 12px;
		inset-inline-end: 12px;
		padding: 13px 15px;
	}
	.dk2-hero__caption strong {
		font-size: var(--fs-sm);
	}
	.dk2-metrics__grid {
		gap: 8px;
		padding-block: 21px;
	}
	.dk2-metric {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
		padding-inline-start: 15px;
	}
	.dk2-search {
		padding-block: 26px;
	}
	.dk2-search__form {
		gap: 12px;
	}
	.dk2-field select,
	.dk2-field input {
		font-size: 16px; /* iOS 上 <16px 会触发缩放 */
	}
	.dk2-brands {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.dk2-brand {
		min-height: 108px;
		padding: 22px 18px;
	}
	.dk2-brand strong {
		font-size: 19px;
	}
	.dk2-logi {
		grid-template-columns: minmax(0, 1fr);
	}
	.dk2-panel {
		padding: 24px;
	}
	.dk2-places--wh li {
		padding: 17px 0;
	}
	.dk2-places strong {
		font-size: 21px;
	}
	.dk2-places--port {
		gap: 16px;
	}
	.dk2-two {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.dk2-two figure img {
		aspect-ratio: 1.35;
	}
	.dk2-markets {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}
	.dk2-cta {
		padding-block: 35px;
	}
	.dk2-cta .dk2-actions {
		margin-top: 0;
	}
	/* ★ 触控目标：品类快捷入口原本只有 62×33px。
	   独立复核按 44px 的门槛量出来的，手机上是真会点不准。
	   加高到 44px 后这一块会多出约 55px 高度（17 个品类在 390px 下占 5 行）。 */
	.dk2-cats__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: 10px 14px;
	}
}

@media (max-width: 420px) {
	.dk2-metric strong {
		font-size: 24px;
		/* 换语言的译者如果把这里的值改长，最后一道保险：宁可断开也不要横向滚动 */
		overflow-wrap: anywhere;
	}
	.dk2-places--port {
		grid-template-columns: minmax(0, 1fr);
	}
	.dk2-brand strong {
		font-size: 17px;
	}
}

/* 打印：深底区块改白底黑字，省墨且能读 */
@media print {
	.dk2-cta,
	.dk2-domestic,
	.dk2-hero__caption {
		background: transparent !important;
		color: #000 !important;
		border: 1px solid #999;
	}
	.dk2-cta h2,
	.dk2-cta p,
	.dk2-domestic h3,
	.dk2-domestic p,
	.dk2-domestic .dk2-region,
	.dk2-hero__caption strong,
	.dk2-hero__caption small {
		color: #000 !important;
	}
	/* ★ 按钮在打印时必须是「白底 + 深字 + 可见边框」。
	   独立复核实测抓到的真问题：上面把 .dk2-cta 的深蓝底强制成透明之后，
	   区块里的 WhatsApp 按钮仍然是 color:#fff，于是**白字白纸、标签整个消失**
	   （截图里只剩一个空边框盒子）。原规则只列了 h2/p，漏了 a。
	   顺带把红按钮也一起改掉 —— 打印时浏览器默认不打印背景色，
	   白字落在白纸上同样看不见。 */
	.dk2-btn,
	.dk2-btn--red,
	.dk2-btn--outline,
	.dk2-cta .dk2-btn,
	.dk2-cta .dk2-btn--outline {
		background: #fff !important;
		color: #000 !important;
		border: 1px solid #555 !important;
	}
	.dk2-hero__visual img {
		clip-path: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dk2-btn,
	.dk2-brand,
	.dk2-cats__list a {
		transition: none !important;
	}
}