/* ===========================================================================
   东康部品 —— 首页区块样式
   ---------------------------------------------------------------------------
   首页内容由 dk-* 类名的区块承载（写在页面内容里），样式集中在这里。
   和 front.css 分开的原因：front.css 是「映射已有类名」，这一份是「首页专用布局」。

   所有颜色/字号/间距一律走 tokens.css 的变量，这里不出现硬编码色值。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   0. 首页正文容器复位 ★ 先看这段，它决定下面所有区块的宽度
   ---------------------------------------------------------------------------
   首页正文外面套的是 WordPress 的受限宽度容器：

     <div class="entry-content wp-block-post-content has-global-padding is-layout-constrained">

   它做两件事，对 dk-* 这套「自己用 .dk-container 管宽度」的结构都是多余的：

     · is-layout-constrained 给每个直接子元素 max-width: content-size。
       Twenty Twenty-Five 下这个值是 645px。
       **实测**（无头 Chromium，1440px 视口）：.dk-hero 宽 645px，
       而同一页里作为 wp-block-group alignfull 的 .dk-products 是 1440px。
       整页因此是「645 → 1280 → 645」来回跳的，主视觉被压成中间一条。

     · has-global-padding 给正文左右各 32px 内边距，区块的「整屏宽」还要再减 64px。

   ★ 为什么不用 WordPress 自己的 alignfull
     试过了。给区块加 alignfull 类确实会让 `.has-global-padding > .alignfull` 命中，
     但那条规则用的是 --wp--style--root--padding-left（在本站算出 50px），
     而正文真正的内边距是 32px —— 两个数对不上。结果：
       区块宽 1316px、左边缘 -18px，页面多出 36px 横向滚动
       （实测 scrollWidth 1298，视口 1280）。**比不改还糟。**
     所以这里不复用那条规则，直接把父容器复位，宽度完全交给 .dk-container。

   影响面：只在首页（body.home）。其它页面的正文是标准区块，保持原样。
   --------------------------------------------------------------------------- */
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 > * {
	/* WordPress 那条约束写的是
	     :where(.is-layout-constrained) > :where(:not(.alignleft):not(.alignright):not(.alignfull))
	       { max-width: ...; margin-left: auto !important; margin-right: auto !important }
	   选择器是 :where() 所以特异性为 0，但带了 !important ——
	   只能同样用 !important 盖掉，这里没有别的办法。 */
	max-width: none !important;
	margin-inline: 0 !important;
}

/* 首页里每一屏的统一容器 */
.dk-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.dk-section { padding-block: var(--section-y); }
.dk-section--tight { padding-block: var(--sp-12); }

/* 区块小标题（档目名 + 一句说明） */
.dk-head { margin-bottom: var(--sp-8); }
.dk-head h2 {
	font-family: var(--font-cond);
	font-size: var(--fs-h2);
	margin: 0 0 var(--sp-2);
	max-width: 24ch;
}
.dk-head p {
	margin: 0;
	color: var(--ink-3);
	font-size: var(--fs-lead);
	max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   1. 主视觉 —— 用真实的仓库照，不用汽车拼贴。
      批发商的信任来自「仓库里真的压着货」。
   --------------------------------------------------------------------------- */
.dk-hero {
	position: relative;
	background: var(--steel-900);
	color: var(--on-steel-2);
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 5vw, 5rem) clamp(5.5rem, 4rem + 6vw, 7.5rem);
}
.dk-hero__media { position: absolute; inset: 0; z-index: 0; }
.dk-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.dk-hero__scrim {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(100deg,
		rgba(10,18,24,.93) 0%, rgba(10,18,24,.84) 34%,
		rgba(10,18,24,.52) 64%, rgba(10,18,24,.26) 100%);
}

/* ---------------------------------------------------------------------------
   窄屏：压暗层要更厚
   ---------------------------------------------------------------------------
   桌面上文案只占左边 640px，正好落在压暗层最深的一段（实测对照度 9.6~11.5:1）。
   窄屏不一样：文案铺满整个宽度，**每行的右端会伸到照片最亮的那一头**
   （100deg 渐变在右端只有 0.26 的不透明度）。

   实测（无头 Chromium，取文字下方真实像素里最亮的 5% 作为最坏情况）：
     视口 390px  .dk-hero__lead  最坏背景对比度 **3.92:1**  ← 低于 4.5，不合格
     视口 768px  同上 7.42:1      视口 ≥1280px 9.28~9.58:1（合格）

   所以只在 ≤900px 把渐变整体压厚（右端 0.26 → 0.64），桌面端分毫不动。
   压厚不是把照片盖掉 —— 最深处仍然留 6% 的通透，货架还看得见。
   --------------------------------------------------------------------------- */
@media (max-width: 900px) {
	.dk-hero__scrim {
		background: linear-gradient(100deg,
			rgba(10,18,24,.94) 0%, rgba(10,18,24,.88) 38%,
			rgba(10,18,24,.76) 70%, rgba(10,18,24,.64) 100%);
	}
}

/* ---------------------------------------------------------------------------
   主视觉的 RTL 镜像
   ---------------------------------------------------------------------------
   上面两条压暗层都是「左深右浅」（100deg），因为文案在 LTR 下靠左。
   切到 RTL 之后文案跑到右边 —— 压暗层不跟着翻，文字就直接落在最亮那一头。
   （同样的情形在 LTR 窄屏上已经实测过一次：对比度掉到 3.92:1。）
   260deg = 360 - 100，即水平镜像；object-position 的 62% 也翻成 38%。

   ⚠️ 这一段**在今天的站点上不生效** —— 还没有阿拉伯语，<html> 上没有 dir="rtl"。
      验证方式是用 Playwright 强制 dir="rtl" + lang="ar" 截图比对，见交付报告。
   --------------------------------------------------------------------------- */
[dir="rtl"] .dk-hero__scrim {
	background: linear-gradient(260deg,
		rgba(10,18,24,.93) 0%, rgba(10,18,24,.84) 34%,
		rgba(10,18,24,.52) 64%, rgba(10,18,24,.26) 100%);
}
@media (max-width: 900px) {
	[dir="rtl"] .dk-hero__scrim {
		background: linear-gradient(260deg,
			rgba(10,18,24,.94) 0%, rgba(10,18,24,.88) 38%,
			rgba(10,18,24,.76) 70%, rgba(10,18,24,.64) 100%);
	}
}
[dir="rtl"] .dk-hero__media img {
	object-position: 38% 50%;
}
.dk-hero__inner { position: relative; z-index: 2; }
.dk-hero__copy { max-width: 40rem; }
.dk-hero h1 {
	color: #fff;
	font-family: var(--font-cond);
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
	margin: 0 0 var(--sp-5);
}
.dk-hero__lead {
	color: #d3dde3;
	font-size: var(--fs-lead);
	line-height: 1.65;
	max-width: 46ch;
	margin: 0 0 var(--sp-8);
	text-shadow: 0 1px 2px rgba(6,12,17,.5);
}
.dk-hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
@media (max-width: 560px) { .dk-hero__actions > * { width: 100%; } }

/* ---------------------------------------------------------------------------
   2. 按车型找件 —— 跨在主视觉下沿，是这一屏最主要的动作
   --------------------------------------------------------------------------- */
.dk-finder { position: relative; z-index: 3; margin-block-start: calc(var(--sp-10) * -1 - var(--sp-2)); }
.dk-finder__card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-top: 3px solid var(--brand);
	border-radius: var(--r-3);
	box-shadow: var(--shadow-pop);
	padding: var(--sp-6);
}
.dk-finder__head {
	display: flex; flex-wrap: wrap; align-items: baseline;
	justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.dk-finder__title {
	font-family: var(--font-cond); font-size: var(--fs-h4);
	font-weight: var(--fw-bold); color: var(--ink);
}
.dk-finder__lead { color: var(--ink-3); font-size: var(--fs-sm); }
.dk-finder__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
	gap: var(--sp-4);
	align-items: end;
}
@media (max-width: 900px) { .dk-finder__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .dk-finder__grid { grid-template-columns: 1fr; } }
.dk-finder__grid .dk-field { display: flex; flex-direction: column; gap: var(--sp-2); }
.dk-finder__grid label { color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.dk-finder__grid select {
	width: 100%; min-height: 44px; padding: var(--sp-3);
	border: 1px solid var(--line-2); border-radius: var(--r-1);
	background-color: var(--surface); color: var(--ink);
	font-family: var(--font-sans); font-size: var(--fs-ui);
	appearance: none;
	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='%235f6e78' 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;
}
/* RTL：箭头是 background-image，逻辑属性管不到，只能显式翻到左边 */
[dir="rtl"] .dk-finder__grid select {
	background-position: left var(--sp-3) center;
}
.dk-finder__grid button {
	min-height: 52px; padding: var(--sp-4) var(--sp-6);
	border: 0; border-radius: var(--r-2);
	background: var(--brand); color: #fff;
	font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold);
	cursor: pointer;
}
.dk-finder__grid button:hover { background: var(--brand-deep); }

/* ---------------------------------------------------------------------------
   3. 供应条件铭牌 —— 像机器的铭牌，不是 SaaS 的统计带
   --------------------------------------------------------------------------- */
.dk-plate { background: var(--steel-800); color: var(--on-steel-2); border-radius: var(--r-3); overflow: hidden; }
.dk-plate__grid { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); }
.dk-plate__cell {
	padding: var(--sp-6) var(--sp-5);
	border-inline-end: 1px solid rgba(255,255,255,.1);
	border-block-end: 1px solid rgba(255,255,255,.1);
}
.dk-plate__cell:last-child { border-inline-end: 0; }
.dk-plate__k { display: block; margin-bottom: var(--sp-2); color: var(--on-steel-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.dk-plate__v { color: #fff; font-family: var(--font-mono); font-size: 1.375rem; font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: -0.02em; }
.dk-plate__sub { display: block; margin-top: var(--sp-1); color: var(--on-steel-3); font-size: var(--fs-xs); }
@media (max-width: 1100px) { .dk-plate__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .dk-plate__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* ---------------------------------------------------------------------------
   4. 品类索引 —— 细线网格，像一本零件目录的索引页
   --------------------------------------------------------------------------- */
.dk-catgrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	border-top: 1px solid var(--line);
	border-inline-start: 1px solid var(--line);
	background: var(--surface);
}
.dk-catgrid a {
	display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
	min-height: 74px; padding: var(--sp-4) var(--sp-5);
	border-inline-end: 1px solid var(--line);
	border-block-end: 1px solid var(--line);
	color: var(--ink);
	font-family: var(--font-cond); font-size: 1.125rem; font-weight: var(--fw-semibold);
	line-height: 1.25; text-decoration: none;
	transition: background-color .15s var(--ease), color .15s var(--ease);
}
.dk-catgrid a:hover, .dk-catgrid a:focus-visible { background: var(--brand); color: #fff; }
.dk-catgrid a.dk-all { background: var(--surface-2); font-weight: var(--fw-bold); }
@media (max-width: 1100px) { .dk-catgrid { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 720px)  { .dk-catgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .dk-catgrid { grid-template-columns: 1fr; } .dk-catgrid a { min-height: 62px; font-size: 1rem; } }

/* ---------------------------------------------------------------------------
   5. 按品牌
   --------------------------------------------------------------------------- */
.dk-brands { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--sp-8); }
@media (max-width: 720px) { .dk-brands { grid-template-columns: 1fr; gap: var(--sp-6); } }
.dk-brandgroup__title {
	display: flex; align-items: center; gap: var(--sp-3);
	margin-bottom: var(--sp-4);
	color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold);
}
.dk-brandgroup__title::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.dk-brandgroup__list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dk-brandgroup__list a {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: var(--sp-2) var(--sp-4);
	border: 1px solid var(--line-2); border-radius: var(--r-2);
	background: var(--surface); color: var(--ink);
	font-family: var(--font-cond); font-size: 1.0625rem; font-weight: var(--fw-semibold);
	text-decoration: none;
}
.dk-brandgroup__list a:hover { border-color: var(--brand); background: var(--brand-tint); color: var(--brand-deep); }

/* ---------------------------------------------------------------------------
   6. 公司能力
   --------------------------------------------------------------------------- */
.dk-capability { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (max-width: 900px) { .dk-capability { grid-template-columns: 1fr; } }
.dk-capability__body p { margin: 0 0 var(--sp-4); font-size: var(--fs-base); color: var(--ink-2); max-width: 62ch; }
.dk-capability__facts {
	display: grid; grid-template-columns: repeat(2, minmax(0,1fr));
	gap: var(--sp-4) var(--sp-8);
	margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--line);
}
@media (max-width: 560px) { .dk-capability__facts { grid-template-columns: 1fr; } }
.dk-fact__k { display: block; color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.dk-fact__v { color: var(--ink); font-size: var(--fs-ui); font-weight: var(--fw-medium); }
.dk-capability__media { border-radius: var(--r-3); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 4/3; }
.dk-capability__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------
   7. 询价区 —— 全站唯一允许出现的深色带之一
   --------------------------------------------------------------------------- */
.dk-quote { background: var(--steel-900); color: var(--on-steel-2); }
.dk-quote h2 { color: #fff; font-family: var(--font-cond); font-size: var(--fs-h2); margin: 0 0 var(--sp-4); }
.dk-quote__lead { color: var(--on-steel-2); font-size: var(--fs-lead); max-width: 40ch; margin: 0 0 var(--sp-6); }
.dk-quote__grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (max-width: 900px) { .dk-quote__grid { grid-template-columns: 1fr; } }
.dk-quote__panel { padding: var(--sp-5); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-3); background: rgba(255,255,255,.04); }
.dk-quote__line { display: flex; align-items: center; gap: var(--sp-3); color: var(--on-steel-1); font-size: var(--fs-ui); text-decoration: none; padding-block: var(--sp-2); }
.dk-quote__line:hover { color: #fff; text-decoration: underline; }
.dk-quote__line .mono { font-family: var(--font-mono); margin-inline-start: auto; color: var(--on-steel-3); }
.dk-quote__qr { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-5); margin-top: var(--sp-3); border-top: 1px solid rgba(255,255,255,.14); }
.dk-quote__qr img { width: 92px; height: auto; background: #fff; padding: 5px; border-radius: var(--r-1); }
.dk-quote__qr p { margin: 0; color: var(--on-steel-3); font-size: var(--fs-xs); max-width: 22ch; }
.dk-quote__tips { margin: 0; padding: 0; list-style: none; max-width: 34ch; }
.dk-quote__tips li {
	display: flex; gap: var(--sp-3); padding-block: var(--sp-3);
	border-top: 1px solid rgba(255,255,255,.14); color: var(--on-steel-1); font-size: var(--fs-ui);
}
/* 深底上的主按钮要用白字高对比蓝 */
.dk-quote .wp-block-button__link { background: var(--brand); color: #fff; }

/* ---------------------------------------------------------------------------
   8. 首页里的 WooCommerce 商品网格
   --------------------------------------------------------------------------- */
.dk-products .wc-block-product-template { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
@media (max-width: 1100px) { .dk-products .wc-block-product-template { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 900px)  { .dk-products .wc-block-product-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px)  { .dk-products .wc-block-product-template { grid-template-columns: 1fr !important; } }
.dk-products .wp-block-query-pagination { margin-top: var(--sp-8); }

/* ---------------------------------------------------------------------------
   9. 首页按钮 —— 首页内容是用 dk- 类名写的，不依赖主题的 .wp-block-button
   --------------------------------------------------------------------------- */
.dk-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 52px; padding: var(--sp-4) var(--sp-6);
	border: 1px solid transparent; border-radius: var(--r-2);
	font-family: var(--font-sans); font-size: var(--fs-base); font-weight: var(--fw-semibold);
	line-height: 1.2; text-decoration: none; cursor: pointer;
}
.dk-btn--primary { background: var(--brand); color: #fff; }
.dk-btn--primary:hover { background: var(--brand-deep); color: #fff; }
.dk-btn--ghost { border-color: rgba(255,255,255,.34); color: #fff; }
.dk-btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

/* ---------------------------------------------------------------------------
   10. 首页商品卡 —— 首页用的是 core/post-template，标记和列表页的
       WooCommerce 商品区块完全不一样（li.wp-block-post 而不是 li.wc-block-product），
       所以卡片样式必须在这里单独写一份。
       ⚠️ 图片上有内联样式（border-radius / aspect-ratio），不加 !important 压不住。
   --------------------------------------------------------------------------- */
.dk-products .wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	gap: var(--sp-5) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 1100px) { .dk-products .wp-block-post-template { grid-template-columns: repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 900px)  { .dk-products .wp-block-post-template { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width: 560px)  { .dk-products .wp-block-post-template { grid-template-columns: 1fr !important; } }

.dk-products li.wp-block-post {
	display: flex;
	flex-direction: column;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	margin: 0;
	transition: border-color .15s var(--ease);
}
.dk-products li.wp-block-post:hover { border-color: var(--line-3); }

.dk-products .wp-block-post-featured-image { margin: 0 !important; aspect-ratio: 3 / 2; background: var(--surface-3); overflow: hidden; }
.dk-products .wp-block-post-featured-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	aspect-ratio: auto !important;
	border-radius: 0 !important;
	display: block;
}

.dk-products .wp-block-post-title {
	font-family: var(--font-cond) !important;
	font-size: 1.125rem !important;
	font-weight: var(--fw-semibold);
	line-height: var(--lh-snug);
	margin: 0 !important;
	padding: var(--sp-5) var(--sp-5) var(--sp-1);
}
.dk-products .wp-block-post-title a { color: var(--ink); text-decoration: none; }
.dk-products .wp-block-post-title a:hover { color: var(--brand); text-decoration: underline; }

.dk-products .wp-block-woocommerce-product-price,
.dk-products .wc-block-components-product-price {
	margin: 0 !important;
	padding: 0 var(--sp-5) var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

/* 「Solicitar cotización」——用 core/read-more 渲染，样式改成主按钮。
   margin-top:auto 让同一排的按钮底对齐。 */
.dk-products .wp-block-read-more {
	margin: auto var(--sp-5) var(--sp-5) !important;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; padding: var(--sp-3) var(--sp-5);
	background: var(--brand); color: #fff !important;
	border-radius: var(--r-2);
	font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: var(--fw-semibold);
	text-decoration: none !important;
}
.dk-products .wp-block-read-more:hover { background: var(--brand-deep); color: #fff !important; }