/* ===========================================================================
   东康部品 —— 设计系统前置层（前台）
   ---------------------------------------------------------------------------
   这一层不产出新标记，只把「线上已有的 WordPress / WooCommerce / 自研插件的类名」
   映射到 design-tokens 的视觉语言上。

   为什么先上这一层而不是先改模板：
     线上没有 staging，站点公开且已被搜索引擎收录。只上样式的话，
     任何一步都能靠「删掉 mu-plugin 目录」整体回退，不动数据库、不动模板文件。
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. 字体与基础
   --------------------------------------------------------------------------- */
body,
.wp-site-blocks,
.editor-styles-wrapper {
	font-family: var(--font-sans);
}

body {
	background: var(--surface-2);
	color: var(--ink-2);
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	font-family: var(--font-cond);
	color: var(--ink);
	letter-spacing: -0.01em;
	line-height: var(--lh-tight);
}

.wp-block-post-title,
.wp-block-post-title a {
	font-family: var(--font-cond);
	color: var(--ink);
}

a { color: var(--brand-deep); }
a:hover { color: var(--brand); }

/* 件号 / SKU / 任何机器可读的标识符 —— 全站视觉签名 */
code, kbd, samp, pre,
.ap-pf__table td,
.ap-fitment__table td,
.ap-inq__col-sku,
.sku {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   2. 页头
   --------------------------------------------------------------------------- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow-header);
}

.wp-block-site-title,
.wp-block-site-title a {
	font-family: var(--font-cond);
	font-size: 1.3125rem;
	font-weight: var(--fw-bold);
	line-height: 1.05;
	letter-spacing: 0.01em;
	color: var(--brand-deep);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content {
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--r-2);
	color: var(--ink-2);
	font-size: var(--fs-ui);
	font-weight: var(--fw-medium);
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content:hover {
	background: var(--surface-2);
	color: var(--ink);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content {
	color: var(--ink);
	font-weight: var(--fw-semibold);
}
.wp-block-navigation__submenu-container {
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	box-shadow: var(--shadow-pop);
	padding: var(--sp-2);
	min-width: 13rem;
}
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: var(--fs-sm);
}

.wp-block-search__input {
	min-height: 44px;
	border: 1px solid var(--line-2);
	border-radius: var(--r-1);
	background: var(--surface);
	font-size: var(--fs-sm);
}
.wp-block-search__input:focus {
	outline: none;
	border-color: var(--brand);
	box-shadow: var(--focus-ring);
}
.wp-block-search__button {
	min-height: 44px;
	border-radius: var(--r-2);
	background: var(--surface-2);
	color: var(--ink);
	border: 1px solid var(--line-2);
}

/* ---------------------------------------------------------------------------
   3. 按钮 —— 全站统一，品牌蓝只给主操作
   --------------------------------------------------------------------------- */
.wp-block-button__link,
.wc-block-components-button,
.wp-element-button,
.ap-inq__btn,
.ap-inq-add__btn,
.ap-pf__wa,
button.wp-block-search__button {
	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);
	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;
	cursor: pointer;
	transition: background-color .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}

/* 主操作 */
.wp-block-button__link.has-background,
.wp-block-button__link:not(.is-style-outline),
.wc-block-components-button:not(.is-style-outline),
.ap-inq__btn,
.ap-inq-add__btn {
	background: var(--brand);
	color: #fff;
}
.wp-block-button__link.has-background:hover,
.wp-block-button__link:not(.is-style-outline):hover,
.wc-block-components-button:not(.is-style-outline):hover,
.ap-inq__btn:hover,
.ap-inq-add__btn:hover {
	background: var(--brand-deep);
	color: #fff;
}

/* 次要操作 */
.is-style-outline > .wp-block-button__link,
.wp-block-button__link.is-style-outline,
.wc-block-components-button.is-style-outline {
	background: var(--surface);
	border-color: var(--line-2);
	color: var(--ink);
}
.is-style-outline > .wp-block-button__link:hover,
.wp-block-button__link.is-style-outline:hover {
	background: var(--surface);
	border-color: var(--ink);
	color: var(--ink);
}

/* WhatsApp —— 用压深过的绿（官方绿的对比度不够，见设计规则） */
.ap-pf__wa { background: var(--wa); color: #fff; }
.ap-pf__wa:hover { background: var(--wa-hover); color: #fff; }

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

/* ---------------------------------------------------------------------------
   4. 产品卡 —— WooCommerce 区块输出映射成 .pcard 的样子
   --------------------------------------------------------------------------- */
.wc-block-product-template {
	display: grid !important;
	gap: var(--sp-5) !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (max-width: 1024px) { .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 640px)  { .wc-block-product-template { grid-template-columns: 1fr !important; } }
.wc-block-product-template.is-flex-container > li { width: auto !important; }

/* 卡片里的文字左对齐 —— 主题默认给的是 has-text-align-center，
   报价卡居中排会让件号对不齐、没法扫 */
li.wc-block-product,
li.wc-block-product .wc-block-components-product-name,
li.wc-block-product .wp-block-post-title,
li.wc-block-product .wc-block-components-product-price,
li.wc-block-product .wc-block-components-product-metadata,
li.wc-block-product .has-text-align-center {
	text-align: start !important;
}

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

/* 图片井：3:2 */
.wc-block-components-product-image {
	aspect-ratio: 3 / 2;
	background: var(--surface-3);
	margin: 0 !important;
	overflow: hidden;
}
.wc-block-components-product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover !important;
	aspect-ratio: auto !important;
	display: block;
}

/* ★ 2026-10-23 修：卡片图片被放到 1500px 高、只露出照片中间一条地板色。
   根因是 img 的 height:100% 外面套着一层 height:auto 的 <a>，百分比高度在
   「容器有 aspect-ratio、子元素又靠内容撑高」这种环里被浏览器解析成了奇怪的值。
   把 img 绝对定位到有 aspect-ratio 的图片井里，高度就一定是井的高度。 */
.wc-block-components-product-image { position: relative; }
.wc-block-components-product-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover !important;
}

li.wc-block-product > *:not(.wc-block-components-product-image) { padding-inline: var(--sp-5); }
li.wc-block-product > *:last-child { padding-bottom: var(--sp-5); }
li.wc-block-product > *:nth-child(2) { padding-top: var(--sp-5); }

.wc-block-components-product-title,
.wc-block-components-product-name,
.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 0 var(--sp-1) !important;
}
.wc-block-components-product-name a,
.wc-block-components-product-title a { color: var(--ink); text-decoration: none; }
.wc-block-components-product-name a:hover,
.wc-block-components-product-title a:hover { color: var(--brand); text-decoration: underline; }

/* 价格全是「询价」，不该抢戏 */
.wc-block-components-product-price,
.wc-block-grid__product-price {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--ink-3);
	margin: 0 0 var(--sp-4) !important;
}

li.wc-block-product .wc-block-components-product-button { margin-top: auto; }
li.wc-block-product .wc-block-components-product-button__button {
	width: 100%;
	margin-bottom: var(--sp-3);
}

.wc-block-components-product-metadata__description,
.wc-block-components-product-metadata__description p {
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

/* ---------------------------------------------------------------------------
   5. 面包屑 / 归档标题 / 结果计数 / 排序
   --------------------------------------------------------------------------- */
.wp-block-woocommerce-breadcrumbs,
.woocommerce-breadcrumb {
	font-size: var(--fs-sm);
	color: var(--ink-3);
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding-block: var(--sp-3);
}
.wp-block-woocommerce-breadcrumbs a,
.woocommerce-breadcrumb a { color: var(--ink-3); text-decoration: none; }
.wp-block-woocommerce-breadcrumbs a:hover { color: var(--brand); text-decoration: underline; }

.wp-block-query-title,
h1.wp-block-query-title {
	font-size: var(--fs-h1);
	margin-bottom: var(--sp-4);
}

.woocommerce-result-count,
.wc-block-product-results-count {
	font-size: var(--fs-sm);
	color: var(--ink-3);
}

.woocommerce-ordering select,
.wp-block-woocommerce-catalog-sorting select {
	min-height: 44px;
	/* ★ 这里原来是 padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-3)
	   —— 四值简写是**物理方向**的，RTL 下不会镜像。改成逻辑属性：
	   左右各 sp-3，行尾多留 sp-8 给下拉箭头。 */
	padding-block: var(--sp-3);
	padding-inline: var(--sp-3) var(--sp-8);
	border: 1px solid var(--line-2);
	border-radius: var(--r-1);
	background-color: var(--surface);
	color: var(--ink);
	font-size: var(--fs-sm);
	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"] .woocommerce-ordering select,
[dir="rtl"] .wp-block-woocommerce-catalog-sorting select {
	background-position: left var(--sp-3) center;
}

/* ---------------------------------------------------------------------------
   6. 产品详情页 —— 自研插件的三块信息统一成一套「数据行」
   --------------------------------------------------------------------------- */
.ap-pf,
.ap-fitment,
.ap-inq-add { margin-block: var(--sp-8); }

.ap-pf__title,
.ap-fitment__title {
	font-family: var(--font-cond);
	font-size: var(--fs-h4);
	font-weight: var(--fw-semibold);
	color: var(--ink);
	margin: 0 0 var(--sp-4);
}
.ap-pf__sub {
	font-family: var(--font-cond);
	font-size: var(--fs-ui);
	font-weight: var(--fw-semibold);
	color: var(--ink);
	margin: var(--sp-6) 0 var(--sp-3);
	padding-bottom: var(--sp-2);
	border-bottom: 1px solid var(--line-2);
}

.ap-pf__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	overflow: hidden;
	margin: 0 0 var(--sp-5);
}
.ap-pf__table th,
.ap-pf__table td {
	padding: var(--sp-4) var(--sp-5);
	text-align: start;
	vertical-align: top;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
	line-height: var(--lh-data);
	background: none;
}
.ap-pf__table th {
	width: 38%;
	color: var(--ink-3);
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
}
.ap-pf__table td { color: var(--ink); }
.ap-pf__table tr:last-child th,
.ap-pf__table tr:last-child td { border-bottom: 0; }

.ap-pf__price { font-size: var(--fs-base); margin: 0 0 var(--sp-4); }
.ap-pf__price-label { color: var(--ink-3); }
.ap-pf__on-request {
	font-family: var(--font-mono);
	font-size: 1.25rem;
	font-weight: var(--fw-semibold);
	color: var(--ink);
}

.ap-pf__cta {
	margin-top: var(--sp-6);
	padding: var(--sp-5);
	border: 1px solid var(--line-2);
	border-radius: var(--r-3);
	background: var(--surface-2);
}
.ap-pf__cta-note {
	margin: var(--sp-3) 0 0;
	font-size: var(--fs-xs);
	color: var(--ink-3);
}

/* 适配表 */
.ap-fitment {
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	overflow: hidden;
}
.ap-fitment__title {
	margin: 0;
	padding: var(--sp-5) var(--sp-5) var(--sp-4);
	border-bottom: 1px solid var(--line);
}
.ap-fitment__scroll { overflow-x: auto; }
.ap-fitment__table { width: 100%; border-collapse: collapse; }
.ap-fitment__table th,
.ap-fitment__table td {
	padding: var(--sp-4) var(--sp-5);
	text-align: start;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
}
.ap-fitment__table thead th {
	background: var(--surface-2);
	color: var(--ink-3);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}
.ap-fitment__table tbody tr:last-child td { border-bottom: 0; }
.ap-fitment__badge {
	display: inline-flex;
	align-items: center;
	padding: 2px var(--sp-2);
	border-radius: var(--r-pill);
	background: var(--pending-tint);
	color: var(--pending);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   7. 询价流程
   --------------------------------------------------------------------------- */
.ap-inq-add {
	padding: var(--sp-5);
	border: 1px solid var(--line-2);
	border-radius: var(--r-3);
	background: var(--surface-2);
}
.ap-inq-add__form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--sp-3);
	margin: 0;
}
.ap-inq-add__qty {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	font-size: var(--fs-xs);
	color: var(--ink-3);
	font-weight: var(--fw-semibold);
}
.ap-inq-add__qty input {
	width: 6rem;
	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-mono);
	font-size: var(--fs-base);
	text-align: center;
}
.ap-inq-add__status { font-size: var(--fs-sm); color: var(--ok); }

.ap-inq__title {
	font-family: var(--font-cond);
	font-size: var(--fs-h3);
	font-weight: var(--fw-semibold);
	color: var(--ink);
	margin: var(--sp-8) 0 var(--sp-4);
}
.ap-inq__scroll {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
}
.ap-inq__table { width: 100%; border-collapse: collapse; }
.ap-inq__table th,
.ap-inq__table td {
	padding: var(--sp-4) var(--sp-5);
	text-align: start;
	border-bottom: 1px solid var(--line);
	font-size: var(--fs-sm);
	vertical-align: middle;
}
.ap-inq__table thead th {
	background: var(--surface-2);
	color: var(--ink-3);
	font-family: var(--font-sans);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	white-space: nowrap;
}
.ap-inq__table tbody tr:last-child td { border-bottom: 0; }
.ap-inq__col-sku { color: var(--ink); white-space: nowrap; }
.ap-inq__qty-form { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.ap-inq__qty-form input {
	width: 5rem; min-height: 40px; padding: var(--sp-2);
	border: 1px solid var(--line-2); border-radius: var(--r-1);
	background: var(--surface); color: var(--ink);
	font-family: var(--font-mono); font-size: var(--fs-sm); text-align: center;
}
.ap-inq__mini {
	width: 40px; min-height: 40px;
	border: 1px solid var(--line-2); border-radius: var(--r-2);
	background: var(--surface); color: var(--ink-2); cursor: pointer;
}
.ap-inq__remove { color: var(--ink-3); font-size: var(--fs-sm); text-decoration: underline; }
.ap-inq__remove:hover { color: var(--danger); }

.ap-inq__form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sp-4);
}
@media (max-width: 640px) { .ap-inq__form { grid-template-columns: 1fr; } }
.ap-inq__field { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; }
.ap-inq__field--message,
.ap-inq__submit,
.ap-inq__note { grid-column: 1 / -1; }
.ap-inq__field label { color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.ap-inq__field input,
.ap-inq__field 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);
}
.ap-inq__field textarea { min-height: 6rem; resize: vertical; }
.ap-inq__field input:focus,
.ap-inq__field textarea:focus {
	outline: none; border-color: var(--brand); box-shadow: var(--focus-ring);
}
.ap-inq__req { color: var(--ink-3); font-weight: var(--fw-regular); }
.ap-inq__hint { color: var(--ink-3); font-size: var(--fs-xs); }
.ap-inq__note { color: var(--ink-3); font-size: var(--fs-xs); margin: 0; }
.ap-inq__alt { color: var(--ink-3); font-size: var(--fs-sm); }

/* 成功页：询盘编号是客户唯一的凭证 */
.ap-inq__done {
	margin-block: var(--sp-12);
	padding: var(--sp-10) var(--sp-8);
	text-align: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
}
.ap-inq__done-title { font-size: var(--fs-h2); margin-bottom: var(--sp-4); }
.ap-inq__ref {
	display: inline-block;
	margin: var(--sp-4) auto var(--sp-5);
	padding: var(--sp-5) var(--sp-8);
	border: 1px solid var(--line-2);
	border-radius: var(--r-3);
	background: var(--surface-2);
	font-family: var(--font-mono);
	font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
	font-weight: var(--fw-semibold);
	color: var(--ink);
}

.ap-inq__empty,
.ap-inq__error {
	padding: var(--sp-8) var(--sp-6);
	border: 1px solid var(--line);
	border-radius: var(--r-3);
	background: var(--surface);
	color: var(--ink-2);
	font-size: var(--fs-base);
	text-align: center;
}
.ap-inq__error { border-color: var(--danger); background: #fdf0ef; color: var(--danger); }

/* ---------------------------------------------------------------------------
   8. 页脚
   --------------------------------------------------------------------------- */
footer.wp-block-template-part {
	background: var(--steel-900);
	color: var(--on-steel-2);
	margin-top: var(--section-y);
	padding-block: var(--sp-12);
}
footer.wp-block-template-part a { color: var(--on-steel-2); text-decoration: none; }
footer.wp-block-template-part a:hover { color: #fff; text-decoration: underline; }
footer.wp-block-template-part h1,
footer.wp-block-template-part h2,
footer.wp-block-template-part h3,
footer.wp-block-template-part h4,
footer.wp-block-template-part .wp-block-heading { color: #fff; }

/* ---------------------------------------------------------------------------
   9. 通用收紧
   --------------------------------------------------------------------------- */

/* ★ 内边距和「alignfull 的负边距」必须是同一个值，否则会撑出横向滚动
   ---------------------------------------------------------------------------
   WordPress 的机制是这样的（两条规则配对使用）：

     .has-global-padding              { padding-left: var(--wp--style--root--padding-left) }
     .has-global-padding > .alignfull { margin-left: calc(var(--wp--style--root--padding-left) * -1) }

   它假设「内边距多宽，负边距就多宽」，alignfull 才能正好铺满整屏。

   而下面这一行把内边距换成了我们的 --gutter（16→32px），
   **却漏了同步那个变量** —— 它仍然是主题的
   --wp--preset--spacing--50 = clamp(30px, 5vw, 50px)，1280px 下算出 50px。
   于是「内边距 32px、负边距 50px」，alignfull 元素每边被顶出去 18px。

   实测（2026-09-21 定位）：询价页正文外面套了**两层** alignfull，误差累加 ——
   每边 36px，scrollWidth 恒等于视口宽 + 36，**所有宽度下都有横向滚动**。
   这个 bug 从第一轮就在，第三轮做全站尺寸体检时才被抓出来。

   修法：在同一个元素上把变量指向 --gutter，两条规则从此永久同步。
   写在 .has-global-padding 上而不是 :root，是因为 WordPress 自己也在别处
   定义这个变量，写在真正消费它的元素上最稳。
   --------------------------------------------------------------------------- */
.has-global-padding {
	--wp--style--root--padding-left: var(--gutter);
	--wp--style--root--padding-right: var(--gutter);
	padding-inline: var(--gutter);
}
.wp-block-group.alignwide,
.alignwide { max-width: var(--container); }

.wc-block-components-product-image--aspect-ratio-1-1 img { aspect-ratio: auto !important; }
.woocommerce-product-gallery__image img { border-radius: var(--r-3); }

/* B2B 批发站不需要商品评价 */
.woocommerce-Reviews,
#reviews { display: none !important; }

/* 购物车 —— 本站是询价制，不做下单，把这套消费级残留藏掉 */
.wc-block-mini-cart,
.wp-block-woocommerce-mini-cart { display: none !important; }