/* ============================================================
   禾田 VI 设计系统 · 基础样式与组件类库
   依赖 design-tokens.css 的 CSS 变量。
   页面用 GenerateBlocks 搭结构，视觉一律套这里的 .ht-* 类，
   保证编辑只能改文字、改不出风格。
   ============================================================ */

/* ---------- 全局基础 ---------- */
html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--ht-font-body);
  font-size: var(--ht-fs-body);
  line-height: 1.7;
  color: var(--ht-text);
  background: var(--ht-white);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--ht-red); color: #fff; }

a { color: var(--ht-black); text-decoration: none; transition: color var(--ht-t); }
a:hover { color: var(--ht-red); }

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

/* WordPress 编辑器/前端通用排版兜底（不影响 GB 区块自身的设置） */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4 {
  font-family: var(--ht-font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: var(--ht-ls-display);
  color: var(--ht-black);
  text-transform: uppercase;
}
.entry-content h1 { font-size: var(--ht-fs-h1); }
.entry-content h2 { font-size: var(--ht-fs-h2); margin-top: var(--ht-sp-5); }
.entry-content h3 { font-size: var(--ht-fs-h3); margin-top: var(--ht-sp-4); }

/* 中文自动去大写（Oswald 只有拉丁字形，中文回思源黑体，不需要大写形态） */

/* ---------- 布局：容器与区块 ---------- */
/* GP 给块包装层塞了 40px 内边距——清零，留白全部由 .ht-* 组件自己管 */
body .wp-block-group__inner-container { padding: 0 !important; }

/* 经典主题的 group 包装层（wp-block-group__inner-container）：
   让真实子元素直接参与下面的 grid/flex 布局 */
.ht-grid-cards > .wp-block-group__inner-container,
.ht-numbers > .wp-block-group__inner-container,
.ht-cta > .wp-block-group__inner-container,
.ht-plantstrip > .wp-block-group__inner-container { display: contents; }
.ht-card > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* v0.9.26：补 width——块编辑器卡片（group.ht-card）在部分布局下内层容器按内容收缩
     （模具车间三卡实测缩到 55px，图片跟着塌），强制撑满卡片宽 */
  width: 100%;
}

/* --- E-E-A-T 作者框（v0.9.27，single.php）：部门署名的介绍卡 --- */
.ht-author-box {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-top: 2.5rem;
  padding: 1.3rem 1.4rem;
  background: var(--ht-section-gray, #F5F5F6);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius-card);
}
.ht-author-box__photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex: none;
  background: var(--ht-line);
}
.ht-author-box__label {
  margin: 0 0 .3rem;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ht-red);
  font-weight: 600;
}
.ht-author-box__name { margin: 0 0 .45rem; font-weight: 700; font-size: 1.05rem; }
.ht-author-box__role { color: var(--ht-muted, #6E6E71); font-weight: 400; }
.ht-author-box__bio { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ht-muted, #52525B); }
.ht-author-box__links { margin: .55rem 0 0; font-size: .85rem; color: var(--ht-muted, #6E6E71); }
.ht-author-box__links a { color: var(--ht-red); text-decoration: none; }
.ht-author-box__links a:hover { text-decoration: underline; }
@media (max-width: 520px) {
  .ht-author-box { flex-direction: column; }
  .ht-author-box__photo { width: 80px; height: 80px; }
}

.ht-container {
  max-width: var(--ht-container);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
}
.ht-container--narrow { max-width: var(--ht-container-narrow); }

.ht-section { padding-block: var(--ht-section-pad); }
/* 面包屑独占区块时收掉双份区块 padding——面包屑下沿到标题区之间原会叠出 110-190px 空白（老板 2026-10-03 圈图点名的页头大空）。
   GP 会给每个 group 塞 inner-container 包装层，故用"面包屑是其父级唯一子元素"判定独占，不写直接子代链。
   面包屑与标题同区块的页面（quality/catalogue/resources 等）天然不命中；不支持 :has 的旧浏览器维持原样（渐进增强）。 */
.ht-section:has(.ht-breadcrumb:only-child) { padding-block: clamp(1rem, 2.5vw, 1.5rem) 0; }
/* 面包屑与下文的间距统一收到 1rem（seed 里写死的是内联 1.5rem，需 !important 覆盖） */
.ht-breadcrumb { margin-bottom: 1rem !important; }
.ht-section--gray { background: var(--ht-gray-bg); }
.ht-section--black { background: var(--ht-black); color: var(--ht-text-inverse); }
.ht-section--black ::selection { background: #fff; color: var(--ht-black); }
.ht-section--black h1, .ht-section--black h2, .ht-section--black h3, .ht-section--black h4 { color: #fff; }

/* 区块眉标：红短杠 + 大写小字 */
.ht-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--ht-font-display);
  font-size: var(--ht-fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray-2);
  margin-bottom: var(--ht-sp-2);
}
.ht-eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  background: var(--ht-red);
  flex: none;
}
.ht-section--black .ht-eyebrow { color: var(--ht-gray); }

/* 大标题（Oswald 窄体大写） */
.ht-display {
  font-family: var(--ht-font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ht-ls-display);
  line-height: 1.06;
}
.ht-display--hero { font-size: var(--ht-fs-hero); font-weight: 600; }
.ht-display--h1 { font-size: var(--ht-fs-h1); }
.ht-display--h2 { font-size: var(--ht-fs-h2); }
.ht-display--h3 { font-size: var(--ht-fs-h3); }
.ht-display--h4 { font-size: var(--ht-fs-h4); }

/* 中文标题：不强制大写、稍放宽行高 */
:lang(zh-CN) .ht-display, .ht-display:lang(zh) { text-transform: none; letter-spacing: 0.01em; }

/* ---------- 按钮（触控 ≥44px） ---------- */
.ht-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-family: var(--ht-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  border-radius: var(--ht-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--ht-t), color var(--ht-t), border-color var(--ht-t);
}
.ht-btn--primary { background: var(--ht-red); color: #fff; }
.ht-btn--primary:hover { background: var(--ht-red-dark); color: #fff; }
.ht-btn--outline { background: transparent; color: var(--ht-black); border-color: var(--ht-black); }
.ht-btn--outline:hover { border-color: var(--ht-red); color: var(--ht-red); }
.ht-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.ht-btn--outline-light:hover { border-color: #fff; background: rgba(255,255,255,.06); color: #fff; }
.ht-btn--ghost { background: transparent; color: inherit; padding-inline: 0.5rem; min-height: 44px; }
.ht-btn--ghost:hover { color: var(--ht-red); }

/* 按钮尾部箭头（SVG 内联，避免额外资源）。
   r1 验证修复：箭头伪元素改挂到锚点自身——wp:button 结构里 .ht-btn--arrow 落在
   外层 div 上，::after 会掉到灰丸下一行（375 尤其破碎）；挂到 >a 上让箭头进丸内。 */
.ht-btn--arrow > a::after {
  content: "→";
  font-family: var(--ht-font-body);
  font-weight: 500;
  margin-left: 0.35rem;
}
.ht-btn--arrow:hover > a::after { transform: translateX(3px); }

/* r2 评审（双层胶囊）：wp:button 结构里 ht-btn 类挂在外层包装 div 上，
   内层 a.wp-block-button__link / a.wp-element-button 自带主题默认按钮样式
   （灰底 #55555e、9999px 圆角、自带内边距）——形成按钮内嵌按钮的怪观感。
   压平内层，视觉层只留外层 ht-btn；对 a 本体直挂 ht-btn 的写法零影响。 */
.wp-block-button.ht-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  box-shadow: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
}
.wp-block-button.ht-btn .wp-block-button__link:hover {
  color: inherit;      /* 主题 hover 态不抢色，色彩统一由外层 ht-btn 管 */
}

/* ---------- 卡片 ---------- */
.ht-card {
  background: var(--ht-white);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius-card);
  padding: var(--ht-sp-3);
  transition: border-color var(--ht-t), transform var(--ht-t), box-shadow var(--ht-t);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.ht-card:hover {
  border-color: var(--ht-red);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(27, 27, 29, .28);
}
.ht-card__tag {
  font-family: var(--ht-font-display);
  font-size: 0.75rem;
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray);
  margin-bottom: var(--ht-sp-1);
}
.ht-card__title {
  font-family: var(--ht-font-display);
  font-size: var(--ht-fs-h4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ht-ls-display);
  margin-bottom: var(--ht-sp-1);
}
.ht-card__text { font-size: var(--ht-fs-small); color: var(--ht-gray-2); }
.ht-card__link { margin-top: auto; padding-top: var(--ht-sp-2); }

/* 黑底卡片 */
.ht-card--dark {
  background: var(--ht-black-2);
  border-color: var(--ht-black-3);
  color: #fff;
}
.ht-card--dark .ht-card__title { color: #fff; }
.ht-card--dark .ht-card__text { color: var(--ht-gray); }
.ht-card--dark:hover { border-color: var(--ht-red); }

/* 红色顶条卡片（目录阵列用，R5） */
.ht-card--accent { border-top: 3px solid var(--ht-red); }

/* ---------- 表格（搜索结果/适配车型/OE 表通用） ---------- */
.ht-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius-card);
}
table.ht-table {
  width: 100%;
  min-width: 720px;              /* 强制窄屏横向滚动而非挤压 */
  border-collapse: collapse;
  font-size: var(--ht-fs-small);
  background: var(--ht-white);
}
table.ht-table th {
  background: var(--ht-black);
  color: #fff;
  font-family: var(--ht-font-display);
  font-weight: 500;
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  text-align: left;
  padding: 0.8rem 1rem;
  white-space: nowrap;
}
table.ht-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--ht-line);
  vertical-align: top;
}
table.ht-table tbody tr:last-child td { border-bottom: 0; }
table.ht-table tbody tr:hover { background: var(--ht-gray-bg); }

/* 375px 首列冻结（配合横向滚动） */
@media (max-width: 767px) {
  table.ht-table th:first-child,
  table.ht-table td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    box-shadow: 1px 0 0 var(--ht-line);
    z-index: 1;
    min-width: var(--ht-table-freeze-col);
  }
  table.ht-table th:first-child { background: var(--ht-black); }
  table.ht-table tbody tr:hover td:first-child { background: var(--ht-gray-bg); }
  table.ht-table tbody tr td:first-child { background: var(--ht-white); }
}

/* v0.9.34 键值窄表（证书页等小容器内的双列表格）：
   不受搜索表 min-width:720px 横滚约束（窄容器里会把列/页面撑破，证书页实测），
   也不启用 375 首列冻结（窄表无需横向滚动） */
table.ht-table--kv { min-width: 0; }
table.ht-table--kv th { white-space: normal; }
@media (max-width: 767px) {
  table.ht-table--kv th:first-child,
  table.ht-table--kv td:first-child { position: static; min-width: 0; box-shadow: none; }
}

/* ---------- 表单 ---------- */
.ht-field { display: flex; flex-direction: column; gap: 0.375rem; }
.ht-field label {
  font-size: var(--ht-fs-small);
  font-weight: 500;
  color: var(--ht-gray-2);
}
.ht-field input, .ht-field textarea, .ht-field select,
.ht-input {
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--ht-font-body);
  font-size: 1rem;
  color: var(--ht-text);
  background: var(--ht-white);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  transition: border-color var(--ht-t);
}
.ht-field input:focus, .ht-field textarea:focus, .ht-field select:focus, .ht-input:focus {
  outline: none;
  border-color: var(--ht-black);
}
.ht-input--dark {
  background: var(--ht-black-2);
  border-color: var(--ht-black-3);
  color: #fff;
}

/* ---------- CF7 表单（/contact/ /quote/）----------
   CF7 控件默认按 input size=40 渲染 ≈400px 固定宽：窄卡里撑破卡片溢出，
   宽卡里不满宽；wrap 是 inline 无法约束。统一拉满并复用 .ht-input 视觉。 */
.wpcf7-form-control-wrap {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  vertical-align: top;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 select,
.wpcf7 textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0; /* 控件固有宽（input/textarea 的 size/cols≈400px）会经 grid item 的
                   min-width:auto 把网格列撑破容器（/quote/ 375px 溢出 44px），此处断掉 */
  box-sizing: border-box;
  min-height: 48px;
  padding: 0.75rem 1rem;
  font-family: var(--ht-font-body);
  font-size: 1rem;
  color: var(--ht-text);
  background: var(--ht-white);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  transition: border-color var(--ht-t);
}
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
  outline: none;
  border-color: var(--ht-black);
}
.wpcf7 textarea { min-height: 140px; resize: vertical; }
.wpcf7 select { appearance: auto; }
/* 文件上传框也是固有宽（≈350px），窄屏同样溢出 */
.wpcf7 input[type="file"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  font-family: var(--ht-font-body);
  font-size: var(--ht-fs-small);
  color: var(--ht-gray);
}
/* 隐藏追踪字段（part/utm_*）本身不占位，但模板里它们后面的 <br> 每个折一行空行 */
.wpcf7 br:has(+ input.wpcf7-hidden) { display: none; }
/* 提交按钮：套 .ht-btn--primary 站点风格（默认是 GeneratePress 灰底方角系统字体） */
.wpcf7 input[type="submit"].wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0.75rem 2rem;
  font-family: var(--ht-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  background: var(--ht-red);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--ht-radius);
  cursor: pointer;
  transition: background var(--ht-t);
}
.wpcf7 input[type="submit"].wpcf7-submit:hover { background: var(--ht-red-dark); }
/* 文件上传的"选择文件"系统按钮：套站点风格（默认蓝灰系统样式很跳） */
.wpcf7 input[type="file"]::file-selector-button {
  min-height: 40px;
  padding: 0.5rem 1.25rem;
  margin-right: 0.75rem;
  font-family: var(--ht-font-display);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--ht-black);
  color: #fff;
  border: 1px solid var(--ht-black);
  border-radius: var(--ht-radius);
  cursor: pointer;
  transition: background var(--ht-t), border-color var(--ht-t);
}
.wpcf7 input[type="file"]::file-selector-button:hover { background: var(--ht-red); border-color: var(--ht-red); }
.wpcf7-response-output {
  margin: var(--ht-sp-2) 0 0;
  padding: 0.75rem 1rem;
  border-width: 1px;
  border-radius: var(--ht-radius);
  font-size: var(--ht-fs-small);
}

/* ---------- 徽标/编号/数字 ---------- */
/* width:fit-content 抵消 flex 卡片对子项的块化拉伸（.ht-card 是 flex column，
   徽章会被交叉轴拉成通栏色条）；非 flex 上下文行为不变 */
.ht-badge {
  width: fit-content;
  max-width: 100%;
  display: inline-block;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border: 1px solid var(--ht-black);
  border-radius: 2px;
  text-transform: uppercase;
}
.ht-badge--red { background: var(--ht-red); border-color: var(--ht-red); color: #fff; }
.ht-num {
  font-family: var(--ht-font-display);
  font-weight: 600;
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  line-height: 1;
  color: var(--ht-black);
}
.ht-num__label {
  font-size: var(--ht-fs-small);
  color: var(--ht-gray-2);
  margin-top: 0.5rem;
}
.ht-section--black .ht-num { color: #fff; }
.ht-section--black .ht-num__label { color: var(--ht-gray); }

/* ---------- 分隔与辅助图形 ---------- */
.ht-hr { border: 0; border-top: 1px solid var(--ht-line); margin-block: var(--ht-sp-4); }
.ht-hr--dark { border-top-color: var(--ht-black-3); }

/* 斜切块（品牌基因：红，≤1/画面） */
.ht-slash {
  display: inline-block;
  width: 48px;
  height: 10px;
  background: var(--ht-red);
  transform: skewX(-30deg);
}

/* 赛车条纹组（黑底区块分隔用） */
.ht-stripes {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 12px;
}
.ht-stripes span { width: 4px; height: 100%; background: var(--ht-red); display: block; }

/* ---------- 页头/页脚配合 ---------- */
/* 区块自带内边距：清掉 GP 内容区的默认留白，做到边缘到边缘 */
body .site-main { margin: 0 !important; }
body .site-content, body #content { margin: 0 !important; padding: 0 !important; }
body .inside-article { padding: 0 !important; }
body .entry-content { margin: 0; }
body .site.grid-container { max-width: 100%; }
/* GP 父主题把 .site-content 设为 display:flex 却没给主列增长因子（flex:0 1 auto
   按内容收缩）：内容 max-content 小于视口时整列收窄——此前靠宽表格「碰巧」撑满未暴露，
   行卡页/车型结果页（窄于视口）触发。主列恒撑满容器，宽度交给 .ht-container 管。
   本站模板自带 <main class="ht-section">，GP 的 .site-main 包装层不存在。 */
body .site-content > .site-main,
body .site-content > main {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}
@media (max-width: 768px) {
  body.separate-containers .site-main { padding: 0 !important; }
}
/* 导航里的 CTA 菜单项（外观→菜单→CSS 类填 ht-nav-cta） */
.main-nav .ht-nav-cta > a {
  background: var(--ht-red);
  color: #fff !important;
  padding: 0.6rem 1.4rem !important;
  margin-left: 0.75rem;
  font-family: var(--ht-font-display);
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  font-size: 0.8125rem !important;
  border-radius: var(--ht-radius);
  transition: background var(--ht-t);
}
.main-nav .ht-nav-cta > a:hover { background: var(--ht-red-dark); }

/* 站点 logo 尺寸兜底（原始 SVG，禁止重绘） */
.ht-logo img, .ht-logo-svg { height: 26px; width: auto; display: block; }
body .site-header img.is-logo-image { height: 26px; width: auto; display: block; }
body .site-header .site-branding { display: none; }  /* 标题隐藏，只留 logo */

/* 页头：收紧到 72px 设计高度 */
body .site-header .inside-header {
  padding: 14px clamp(1rem, 4vw, 2.5rem);
  min-height: 0;
}
body .main-navigation .main-nav > ul > li > a {
  line-height: 44px;
}

/* r2 评审（全局品牌色收口）：GP 动态内联样式给激活/祖先菜单项上默认链接蓝
   #1e73be（实测 /products/control-arm/ 全页蓝链仅导航 current 两处），
   与红白 VI 冲突。加 body 前缀压过 GP 内联的特异性与加载顺序，
   统一收口为品牌红（浅色页深色页导航通用）。 */
body .main-navigation .main-nav ul li[class*="current-menu-"] > a {
  color: var(--ht-red);
}
body .main-navigation .main-nav ul li[class*="current-menu-"] > a:hover {
  color: var(--ht-red);
}

/* ---------- 移动端通用（≥44px 触控、≥16px 正文、表格滚动） ---------- */
@media (max-width: 767px) {
  body { font-size: 1rem; }
  .ht-section { padding-block: clamp(2rem, 6vw, 3rem); }
  .ht-btn { width: auto; }
  .ht-container { padding-inline: 1.25rem; }
  /* 黑底首屏等区域移动端标题降档 */
  .ht-display--hero { font-size: clamp(2.5rem, 11vw, 3.25rem); }
}

/* 可访问性：焦点可见 */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--ht-red);
  outline-offset: 2px;
}

/* 阅读增强（GEO：正文直出、结构干净） */
.ht-lede { font-size: 1.125rem; line-height: 1.8; color: var(--ht-text); }
.ht-muted { color: var(--ht-gray-2); }
.ht-small { font-size: var(--ht-fs-small); }

/* ============================================================
   首页区块组件（R1 全幅暗调首屏 / R5 卡片阵列）
   ============================================================ */

/* --- Hero：全幅暗调实拍 + 左下大字 + 单一红 CTA（首屏公式） --- */
.ht-hero {
  position: relative;
  /* v0.9.16 满屏首屏（SpaceX 式）：吃满整个视口，检索条让到首屏之下 */
  min-height: min(100vh, 1120px);
  display: flex;
  align-items: flex-end;
  background: var(--ht-black);
  overflow: hidden;
}
@supports (min-height: 100svh) {
  .ht-hero { min-height: min(100svh, 1120px); }
  @media (max-width: 767px) {
    .ht-hero { min-height: 100svh; }   /* 小屏地址栏伸缩不吃掉内容 */
  }
}
.ht-hero__bg { position: absolute; inset: 0; margin: 0; }
.ht-hero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* v0.7：主体（焊接机器人）在宽幅右侧，移动端裁切保主体 */
  /* v0.7：调色已烘焙进 hero-forge-night.webp（生成器 build-assets.py），
     不再跑实时 filter 链——少一层 GPU 合成，LCP 更快 */
}
/* v0.9.19：hero 背景视频（锻打实拍）盖在静态图上，
   图保留作视频加载前首绘与 reduced-motion 兜底，LCP 仍按 img 计；
   v0.9.29 改为只放一遍且定格末帧：无 loop 无淡出，ended 后末帧即首屏
   收尾画面一直保持（静态图只兜首绘与 reduced-motion） */
.ht-hero__bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.ht-hero__overlay {
  position: absolute; inset: 0;
  /* r2 评审：叠右上红光晕（呼应深色区块氛围红），底部压深到 #101012 衔接；
     v0.9.16 顶部加压暗渐变——页头透明悬浮后保证白色导航在亮图上也可读 */
  background:
    linear-gradient(180deg, rgba(11, 11, 13, .62) 0%, rgba(11, 11, 13, .18) 13%, rgba(0, 0, 0, 0) 24%),
    radial-gradient(52% 44% at 78% 16%, rgba(230, 31, 24, .16), transparent 70%),
    linear-gradient(180deg, rgba(27,27,29,.34) 0%, rgba(27,27,29,.5) 48%, rgba(16,16,18,.96) 100%);
  pointer-events: none;
}
.ht-hero__inner {
  position: relative; z-index: 2;
  width: 100%;
  min-width: 0;   /* r3 验证修复：字体回退时 H1 词盒变宽，禁 flex 子项被 min-content 撑破视口 */
  padding-block: clamp(3rem, 9vh, 5.5rem);
  color: #fff;
}
.ht-hero__inner .ht-display--hero { color: #fff; max-width: 16ch; }
.ht-hero__lede { color: rgba(255,255,255,.82); max-width: 56ch; font-size: 1.0625rem; }
.ht-hero__meta {
  display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem;
  margin-top: var(--ht-sp-4);
  font-family: var(--ht-font-display);
  font-size: var(--ht-fs-eyebrow);
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
@media (max-width: 767px) {
  .ht-hero { min-height: 100vh; }
}

/* --- 首屏检索条（贴在 Hero 下沿的黑条 + 三框入口） --- */
.ht-searchbar {
  background: var(--ht-black);
  color: #fff;
  padding-block: var(--ht-sp-3);
  border-top: 1px solid var(--ht-black-3);
}
.ht-searchbar .ht-searchbar__form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--ht-sp-2);
  align-items: end;
}
@media (max-width: 767px) {
  .ht-searchbar .ht-searchbar__form { grid-template-columns: 1fr; }
}
.ht-searchbar label {
  display: block;
  font-family: var(--ht-font-display);
  font-size: 0.75rem;
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray);
  margin-bottom: 0.5rem;
}

/* --- 目录卡片阵列（R5：产品线入口） --- */
.ht-grid-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ht-sp-3);
}
@media (max-width: 1023px) { .ht-grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .ht-grid-cards { grid-template-columns: 1fr; } }

.ht-card__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #F4F4F5;
  margin: 0 0 var(--ht-sp-2);
  border-radius: var(--ht-radius) var(--ht-radius) 0 0;
  flex: none;
}
.ht-card__media img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  object-fit: contain;
  padding: var(--ht-sp-3);
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.ht-card:hover .ht-card__media img { transform: scale(1.04); }

/* 缺产品图占位（r1 评审修复）：列表模板仅在产品有图时输出 img，
   无图产品的图位会剩一块空洞灰底。用 :has 识别后给品牌化小字占位，
   保持与邻卡同节奏；有图卡零影响；不支持 :has 的浏览器维持原灰块。 */
.ht-card__media:not(:has(img))::before {
  content: "PHOTO ON REQUEST";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ht-font-display);
  font-size: 0.8125rem;
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray-2);
}

/* --- 数字信任条 --- */
.ht-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ht-sp-4);
}
@media (max-width: 1023px) { .ht-numbers { grid-template-columns: repeat(2, 1fr); } }
.ht-numbers > div { border-left: 1px solid var(--ht-black-3); padding-left: var(--ht-sp-3); }

/* --- 视频区块（封面帧 + 点击播放） --- */
.ht-video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ht-black);
  border-radius: var(--ht-radius-card);
}
.ht-video img, .ht-video video {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.ht-video video { filter: brightness(.85); }
.ht-video img { filter: brightness(.6); }
.ht-video__play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; gap: var(--ht-sp-2);
  color: #fff; text-decoration: none;
}
.ht-video__play-icon {
  width: 72px; height: 72px;
  border: 2px solid rgba(255,255,255,.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--ht-t), border-color var(--ht-t);
}
.ht-video__play:hover .ht-video__play-icon { background: var(--ht-red); border-color: var(--ht-red); }
.ht-video__play-icon::after {
  content: "";
  display: block;
  margin-left: 4px;
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
}

/* --- 双视频并排（经销商页：工厂影片 + 套件实装快剪） --- */
.ht-video-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ht-sp-4);
  align-items: start;
}
@media (max-width: 767px) { .ht-video-duo { grid-template-columns: 1fr; } }

/* --- 新闻卡 --- */
.ht-news-card { display: flex; flex-direction: column; gap: var(--ht-sp-1); }
/* v0.7.5：卡片带特色图（Query Loop post-featured-image），图贴卡上缘、正文区留 padding */
.ht-news-card { padding: 0; overflow: hidden; }
.ht-news-card .ht-news-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--ht-sp-1);
  padding: var(--ht-sp-3);
}
.ht-news-card .ht-news-card__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ht-gray-bg);
  margin: 0;
  flex: none;
}
.ht-news-card .ht-news-card__media img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover;
  display: block;
  transition: transform .45s cubic-bezier(.2,.6,.2,1);
}
.ht-news-card:hover .ht-news-card__media img { transform: scale(1.04); }
/* 深色区新闻卡（首页）正文底色与文字 */
.ht-section--dark .ht-news-card .ht-news-card__body { background: transparent; }

/* --- 首页新闻双通道（v0.9.35）：左"公司动态"右"技术博客"各一张最新文章卡 --- */
/* 注意：group 块渲染时中间隔一层 wp-block-group__inner-container，grid 必须打在它身上 */
.ht-news-duo > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ht-sp-4);
  align-items: start;
}
.ht-news-duo__lane { display: flex; flex-direction: column; }
.ht-news-duo__label { margin-bottom: var(--ht-sp-2); }
.ht-news-duo__more { margin: var(--ht-sp-2) 0 0; font-size: 0.9375rem; }
@media (max-width: 767px) {
  .ht-news-duo > .wp-block-group__inner-container { grid-template-columns: 1fr; gap: var(--ht-sp-5); }
}

/* --- 文章详情页（v0.7.6 single.php，窄栏阅读版式） --- */
.ht-post__back {
  font-family: var(--ht-font-display);
  font-size: 0.875rem;
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  margin-bottom: var(--ht-sp-3);
}
.ht-post__back a { color: var(--ht-gray-2); text-decoration: none; }
.ht-post__back a:hover { color: var(--ht-red); }
.ht-post__meta {
  font-family: var(--ht-font-display);
  font-size: 0.875rem;
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  color: var(--ht-gray-2);
  margin: 0 0 var(--ht-sp-3);
}
.ht-post__thumb {
  margin: 0 0 var(--ht-sp-4);
  border-radius: var(--ht-radius-card);
  overflow: hidden;
  background: var(--ht-gray-bg);
}
.ht-post__thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}
.ht-post__content h2 {
  font-family: var(--ht-font-display);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: var(--ht-ls-display);
  margin: var(--ht-sp-4) 0 var(--ht-sp-2);
  scroll-margin-top: 96px;
}
.ht-post__content p { margin-bottom: var(--ht-sp-3); }
.ht-post__content ul { margin: 0 0 var(--ht-sp-3); padding-left: 1.25rem; }
.ht-post__content li { margin-bottom: 0.4rem; }
.ht-post__foot {
  margin-top: var(--ht-sp-4);
  padding-top: var(--ht-sp-3);
  border-top: 1px solid var(--ht-line);
}

/* ---------- 图片轮播（v0.7.7：ht-carousel，短代码 [ht_carousel]） ----------
   无 JS：横向 scroll-snap 原生可滑（触屏/触摸板），圆点静态示能；
   有 JS：圆点点击跳转 + 自动 4.5s 下一张（悬停/触摸/离屏暂停，reduced-motion 不自动）。 */
.ht-carousel {
  position: relative;
  overflow: hidden;
  border-radius: var(--ht-radius-card);
  background: var(--ht-gray-bg);
}
/* 卡内轮播与 .ht-card__media 同节奏（媒体下 16px 间距），双卡并排时
   徽章/标题齐平（figure 有 margin-bottom 而轮播没有曾差 16px）。
   用 :first-child 不写层级链——GP 的 group 包装层使 > 直接子代失配 */
.ht-carousel:first-child { margin: 0 0 var(--ht-sp-2); }
.ht-carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  aspect-ratio: 16 / 9;
  scrollbar-width: none;             /* 滚动条藏给圆点 */
  -webkit-overflow-scrolling: touch;
}
.ht-carousel__track::-webkit-scrollbar { display: none; }
.ht-carousel__item {
  flex: 0 0 100%;
  scroll-snap-align: start;
  margin: 0;
  min-width: 0;
}
.ht-carousel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ht-carousel__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 10px;
  display: flex;
  justify-content: center;
  gap: 8px;
  pointer-events: none;              /* 只有圆点本体接事件，防误触图片 */
}
.ht-carousel__dot {
  pointer-events: auto;
  position: relative;                /* v0.9.22 锚定触达热区 */
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25);
  cursor: pointer;
  transition: background var(--ht-t), transform var(--ht-t);
}
/* v0.9.22 触达面积：可见圆点仍 9px，热区扩到 17×17——正好等于圆点+间距的
   整节距（9+8），圆点带整条无死区可点；再大必与相邻圆点热区重叠产生误触，
   44px 对该布局物理不可达，故取无歧义上限。 */
.ht-carousel__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
}
.ht-carousel__dot:hover { background: #fff; }
.ht-carousel__dot.is-on {
  background: var(--ht-red);
  transform: scale(1.25);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}
/* 新闻卡内轮播：图贴卡上缘（ht-news-card 已 padding:0），去独立圆角由卡裁切 */
.ht-news-card .ht-carousel { border-radius: 0; }
.ht-news-card .ht-carousel__track { aspect-ratio: 16 / 10; }
.ht-news-card .ht-news-card__date {
  font-family: var(--ht-font-display);
  font-size: 0.8125rem;
  letter-spacing: var(--ht-ls-btn);
  color: var(--ht-gray);
  text-transform: uppercase;
}
.ht-news-card .ht-news-card__title {
  font-family: var(--ht-font-display);
  font-size: 1.125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--ht-ls-display);
  line-height: 1.3;
}
.ht-news-card:hover .ht-news-card__title { color: var(--ht-red); }

/* --- CTA 条 --- */
.ht-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ht-sp-3);
}
.ht-cta .ht-display--h3 { margin-bottom: var(--ht-sp-1); }
.ht-cta .ht-muted { max-width: 56ch; }

/* ---------- 产品系统（OE 参照库/类目页/详情页） ---------- */
.ht-oe-cell { font-family: var(--ht-font-mono); font-size: .8125rem; }
.ht-oe-list li { font-family: var(--ht-font-mono); }
.ht-breadcrumb a { color: var(--ht-gray-2); }
.ht-breadcrumb a:hover { color: var(--ht-red); }
.ht-oe-form label {
  display: block;
  font-family: var(--ht-font-display);
  font-size: 0.75rem;
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray-2);
  margin-bottom: 0.5rem;
}
@media (max-width: 767px) {
  .ht-oe-form { grid-template-columns: 1fr !important; }
}
/* r1 评审修复：OE 页三框检索条铺满容器。模板复用 ht-searchbar__form 类名，
   但原 grid 规则作用域是 .ht-searchbar .ht-searchbar__form（首页搜索条专用），
   OE 页外层无 .ht-searchbar 时 display:grid 不触发，输入框回落 ~220px 默认宽。
   这里按 .ht-oe-form 直接给布局；移动端单列由上方既有规则接管。 */
form.ht-oe-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--ht-sp-2);
  align-items: end;
}
form.ht-oe-form .ht-input { width: 100%; }

/* r2 评审（批量粘贴示能）：批量搜索面板 details.ht-bulk 默认折叠，
   summary 的 display:flex 吃掉了浏览器展开三角，看起来像普通标题，
   评审无法确认输入框存在（textarea 在面板内，DOM 已确认存在）。
   加红色 chevron 示能 + hover 提示；展开时 chevron 朝上。 */
.ht-bulk > summary { position: relative; padding-right: 2.25rem; }
.ht-bulk > summary::after {
  content: "";
  position: absolute;
  right: 0.5rem;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ht-red);
  border-bottom: 2px solid var(--ht-red);
  transform: translateY(-50%) rotate(45deg);       /* 折叠：朝下 */
  transition: transform var(--ht-t);
}
.ht-bulk[open] > summary::after { transform: translateY(-50%) rotate(225deg); }  /* 展开：朝上 */
.ht-bulk > summary:hover { color: var(--ht-red); }

/* ---------- 动效层（v0.4：滚动进场 / Ken Burns / 黑区斜切衔接） ----------
   门槛纪律：初始隐藏只挂在 html.ht-anim 后代上（motion.js 才会加该类），
   无 JS / AI 爬虫 / SEO 抓取看到的是完整静态内容。 */
/* 滚动进场 */
html.ht-anim .ht-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
  transition-delay: var(--ht-reveal-delay, 0s);
  will-change: opacity, transform;
}
html.ht-anim .ht-reveal.ht-in {
  opacity: 1;
  transform: none;
}
/* Hero 背景 Ken Burns 慢缩放 */
@keyframes ht-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}
html.ht-anim .ht-hero__bg img {
  animation: ht-kenburns 24s ease-in-out infinite alternate;
}
/* 黑区块顶部斜切衔接（左低右高 20px），打破白/灰→黑的硬直线 */
.ht-section--black {
  clip-path: polygon(0 20px, 100% 0, 100% 100%, 0 100%);
}
/* 用户要求减少动效：一切归于静态直显 */
@media (prefers-reduced-motion: reduce) {
  html.ht-anim .ht-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html.ht-anim .ht-hero__bg img { animation: none; }
  .ht-card, .ht-card__media img { transition: none; }
  .ht-section--dark .ht-card__media:has(img)::before { transition: none; }
}

/* ============================================================
   深邃层 v0.5（黑红方向 · 参考 oiloil.org 动效语言）
   范围纪律：压深只作用于首页（body.home）与 ht-section--dark 修饰类；
   内容页保持原浅色体系，待老板确认首页效果后再推广。
   ============================================================ */

/* --- 深色区块基座：炭黑底 + 反白文字 + 红光晕 + 工程网格 --- */
/* 首页 body 压深：黑区顶部斜切（clip-path）缺口与区块间缝一律露出深底，
   杜绝白条（老板 2026-10-02 反馈：产品卡区↔数字条、新闻区↔滚动带↔CTA 交界白条） */
body.home { background: #101012; }
/* 真凶在此：GP 内容容器 .inside-article 白底盖住 body 深色，缝隙/斜切缺口露白 */
body.home .inside-article,
body.home .site-content .inside-article { background: transparent !important; }
.ht-section--dark {
  position: relative;
  background: #101012;
  color: var(--ht-text-inverse);
}
.ht-section--dark h1, .ht-section--dark h2, .ht-section--dark h3, .ht-section--dark h4 { color: #fff; }
.ht-section--dark .ht-lede, .ht-section--dark .ht-eyebrow, .ht-section--dark .ht-card__text, .ht-section--dark .ht-card__tag { color: var(--ht-gray); }
.ht-section--dark a { color: #fff; }
.ht-section--dark .ht-card__title a { color: #fff; }
.ht-section--dark .ht-card:hover { border-color: var(--ht-red); }

/* 深区氛围：右上红光 + 左下弱光（v0.9.18 移除 72px 工程网格——暗部显脏） */
.ht-section--dark, .ht-section--black { position: relative; }
.ht-section--dark::before, .ht-section--black::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(60% 55% at 88% 0%, rgba(230, 31, 24, .065), transparent 70%),
    radial-gradient(45% 45% at 0% 100%, rgba(230, 31, 24, .04), transparent 70%);
}

/* --- 深区卡片：黑色展柜 + 深色图位（multiply 消融白底，免抠像） --- */
.ht-section--dark .ht-card {
  background: var(--ht-black-2);
  border-color: #2A2A2E;
}
/* 图位深色展台：白底产品图用 multiply 混合，白底自动化为台面深色，
   顶部射灯光锥 + 底部微红光（老板要的光影），hover 灯光增强 */
.ht-section--dark .ht-card__media {
  background:
    radial-gradient(90% 55% at 50% 100%, rgba(230, 31, 24, .07), transparent 70%),
    radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, .09), transparent 72%),
    #1E1E21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 -40px 60px -50px rgba(0, 0, 0, .9);
  transition: filter .45s cubic-bezier(.2, .6, .2, 1);
}
.ht-section--dark .ht-card__media img {
  mix-blend-mode: multiply;              /* 白底消融为台面色，部件本体保留 */
  filter: brightness(1.22) contrast(1.04); /* multiply 偏暗，提亮补偿 */
  padding: var(--ht-sp-3);
  object-fit: contain;
}
.ht-section--dark .ht-card:hover .ht-card__media { filter: brightness(1.32); }
.ht-section--dark .ht-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 26%, transparent 78%, rgba(0, 0, 0, .22));
}
/* v0.9.16 金属光扫：hover/键盘聚焦时一道高光斜扫过图位（抛光金属质感）；
   ::before 仅在有图卡占用（无图卡 ::before 是 PHOTO ON REQUEST 占位字） */
.ht-section--dark .ht-card__media:has(img)::before {
  content: "";
  position: absolute;
  inset: -30% -65%;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 44%, rgba(255, 255, 255, .13) 50%, transparent 56%);
  transform: translateX(-72%);
  transition: transform .9s cubic-bezier(.2, .6, .2, 1);
}
.ht-section--dark .ht-card:hover .ht-card__media:has(img)::before,
.ht-section--dark .ht-card:focus-within .ht-card__media:has(img)::before {
  transform: translateX(72%);
}
.ht-section--dark .ht-news-card .ht-news-card__date { color: var(--ht-gray); }

/* --- 首页导航与页脚压深（白导航在深页里突兀） ---
   r1 验证修复：GP 内联样式把 .main-navigation 本体刷成白底（var(--base-3)），
   之前只压暗了 .site-header 外壳——深色页露白条、浅色链接字落在白底上不可读。
   nav 本体透明让深色页头透出；下拉子菜单给深底（transparent 会在浅色内容上不可读）。
   v0.9.16：页头改为悬浮于满屏 hero 之上，首屏未滚动时全透明（SpaceX 式），
   hero 顶部自带压暗渐变保证可读；滚过 24px 由 ht-scrolled 接管变实底。 */
body.home .site-header {
  position: fixed;
  left: 0; right: 0; top: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
body.admin-bar.home .site-header { top: 32px; }
@media (max-width: 782px) { body.admin-bar.home .site-header { top: 46px; } }
body.home .main-navigation { background: transparent; }
body.home .main-navigation ul ul { background: #17171A; }
/* v0.9.27：内页菜单本体也透明——GP 把 .main-navigation 刷成实底白（var(--base-3)），
   页头外壳却是半透白玻：滚到深色区块上时外壳随内容变灰、菜单死白不变=两块白色差
   （经销页 CTA 上方实锤）。下拉子菜单有独立 ul ul 底色不受影响；移动端折叠面板
   （<769px）保留 GP 白底防透明破相。 */
@media (min-width: 769px) {
  body:not(.home) .main-navigation { background: transparent; }
}
body.home .main-navigation a, body.home .main-navigation .main-nav ul li a { color: #EDEDEF; }
body.home .main-navigation .main-nav ul li a:hover { color: var(--ht-red); }
body.home .menu-toggle { color: #EDEDEF; }
/* r1 验证防御：装饰件（hero 网格地面 ::after 左右 -20%、雾视频）不再把首页撑出横向滚动 */
body.home { overflow-x: clip; }

/* --- Hero 光雾层（ffmpeg 生成 109KB 无缝循环，screen 混合免抠像） --- */
.ht-hero__fog {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.ht-hero__fog video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: screen;
  opacity: .5;
  transform: scale(1.06);                    /* 视差位移余量 */
}
/* --- Hero 粒子光尘 canvas（motion.js 动态创建，红微尘上浮） --- */
.ht-hero__dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* --- 滚动带 roll-band（oiloil 式首尾呼应横滚，CTA 前奏） --- */
.ht-rollband {
  background: #0B0B0D;
  border-block: 1px solid #26262A;
  overflow: hidden;
  padding-block: 1.05rem;
}
.ht-rollband__track {
  display: flex;
  align-items: center;
  gap: 2.75rem;
  width: max-content;
  animation: ht-roll 30s linear infinite;
}
.ht-rollband:hover .ht-rollband__track { animation-play-state: paused; }
.ht-rollband__track span {
  font-family: var(--ht-font-display);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
  white-space: nowrap;
}
.ht-rollband__track i {
  flex: none;
  width: 7px; height: 7px;
  background: var(--ht-red);
  transform: rotate(45deg);
}
@keyframes ht-roll { to { transform: translateX(-50%); } }

/* --- 产品图展开进场（panelin，配合整卡 stagger 的次级动效） --- */
html.ht-anim .ht-card__media {
  clip-path: inset(0 0 100% 0);
  transition: clip-path .85s cubic-bezier(.2, .6, .2, 1) .12s;
}
html.ht-anim .ht-card__media.ht-panel-in { clip-path: inset(0 0 -1% 0); }

/* --- CTA 主按钮呼吸光晕（红环扩散，唯一常驻脉动） --- */
.ht-cta .ht-btn--primary .wp-block-button__link,
.ht-cta .ht-btn--primary a {
  animation: ht-glow-pulse 2.8s ease-in-out infinite;
}
@keyframes ht-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 31, 24, .38); }
  55% { box-shadow: 0 0 0 14px rgba(230, 31, 24, 0); }
}

/* --- 全页噪点（打破渐变色带 + 去塑料感；SVG feTurbulence 程序生成） --- */
body.home::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Hero 入场编排（首屏震撼：镜头落定 → 标题逐词 → 元素依次进场） --- */
/* 背景揭示：推近落定 + 由暗转明（figure 层做，img 的 Ken Burns 独立继续不冲突） */
html.ht-anim .ht-hero__bg {
  animation: ht-hero-settle 1.5s cubic-bezier(.16, .84, .3, 1) both;
}
@keyframes ht-hero-settle {
  0%   { transform: scale(1.14); filter: brightness(.5) saturate(.75); }
  100% { transform: scale(1);    filter: none; }
}
/* 光雾与粒子在背景落定的同时渐起 */
html.ht-anim .ht-hero__fog video { animation: ht-fog-rise 1.8s ease .35s both; }
@keyframes ht-fog-rise { from { opacity: 0; } to { opacity: .5; } }
html.ht-anim .ht-hero__dust { animation: ht-fade-in 1.2s ease .55s both; }
@keyframes ht-fade-in { from { opacity: 0; } }
/* 标题逐词上浮（motion.js 按词包裹；无 JS 时保持原文本直显） */
html.ht-anim .ht-hero__word { display: inline-block; overflow: hidden; vertical-align: top; }
html.ht-anim .ht-hero__word > span {
  display: inline-block;
  transform: translateY(112%);
  animation: ht-word-up .72s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--wd, 0) * 85ms + .28s);
}
@keyframes ht-word-up { to { transform: none; } }
/* 眉标/副文案/按钮/参数依次进场 */
html.ht-anim .ht-hero__eyebrow-line, /* 备用钩子 */
html.ht-anim .ht-hero .ht-eyebrow { animation: ht-rise-in .6s ease .16s both; }
html.ht-anim .ht-hero__lede { animation: ht-rise-in .7s ease .95s both; }
html.ht-anim .ht-hero__inner .wp-block-buttons { animation: ht-rise-in .6s ease 1.12s both; }
html.ht-anim .ht-hero__meta { animation: ht-rise-in .6s ease 1.28s both; }
@keyframes ht-rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
/* forged 关键词点红（motion.js 标记） */
html.ht-anim .ht-hero__word--accent > span, .ht-hero__word--accent > span { color: var(--ht-red); }

/* --- 光影增强：hero 标题与背景分层、数字底部红光 --- */
.ht-hero .ht-display--hero {
  text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .6);
}
.ht-section--black .ht-num {
  text-shadow: 0 12px 42px rgba(230, 31, 24, .18);
}
/* 搜索条底边一道极细红光（工业仪表感） */
.ht-searchbar { box-shadow: 0 1px 0 rgba(230, 31, 24, .25), 0 18px 40px -20px rgba(0, 0, 0, .8); }

/* --- 深邃层 reduced-motion 兜底 --- */
@media (prefers-reduced-motion: reduce) {
  .ht-hero__fog video,
  .ht-rollband__track, .ht-cta .ht-btn--primary .wp-block-button__link,
  .ht-cta .ht-btn--primary a { animation: none !important; }
  /* v0.9.19：背景视频对 reduce 用户整体退回静态首图（大动态背景也算动效） */
  .ht-hero__bg video { display: none !important; }
  html.ht-anim .ht-card__media { clip-path: none; transition: none; }
  /* Hero 入场编排全关：直显 */
  html.ht-anim .ht-hero__bg, html.ht-anim .ht-hero__fog video,
  html.ht-anim .ht-hero__dust, html.ht-anim .ht-hero__word > span,
  html.ht-anim .ht-hero .ht-eyebrow, html.ht-anim .ht-hero__lede,
  html.ht-anim .ht-hero__inner .wp-block-buttons, html.ht-anim .ht-hero__meta
  { animation: none !important; opacity: 1 !important; transform: none !important; }
  /* v0.6 新件兜底：interstitial 背景视差为 JS 驱动（reduce 下 motion.js 已退出），
     这里防御性归零，杜绝任何残留位移 */
  .ht-interstitial__bg img { transform: none !important; }
}

/* --- 入场编排死开关（r1 验证修复） ---
   headless 截图器（--virtual-time-budget）里 CSS 动画时钟不前进，
   fill-mode:both 把 hero 文本永久冻在 0% 关键帧（不可见），门检截图全空。
   motion.js 加上 ht-anim 2.5s 后追加 ht-anim-done；真实浏览器里动画早已播完，
   该类只是把终态钉死；冻结环境里到点强制直显。作用域仅 hero 入场件。 */
html.ht-anim.ht-anim-done .ht-hero__bg, html.ht-anim.ht-anim-done .ht-hero__fog video,
html.ht-anim.ht-anim-done .ht-hero__dust, html.ht-anim.ht-anim-done .ht-hero__word > span,
html.ht-anim.ht-anim-done .ht-hero .ht-eyebrow, html.ht-anim.ht-anim-done .ht-hero__lede,
html.ht-anim.ht-anim-done .ht-hero__inner .wp-block-buttons, html.ht-anim.ht-anim-done .ht-hero__meta
{ animation: none !important; opacity: 1 !important; transform: none !important; }

/* ============================================================
   v0.6 巨字阶 / 沉浸留白 / interstitial / plantstrip / coverage
   范围纪律：留白升级只作用 body.home，内页零影响；
   --ht-fs-mega 在本文件单点维护（design-tokens.css 不动）；
   About（.ht-about）保持白红浅色，只调节奏不压色。
   ============================================================ */

/* --- 巨字阶：:root 单点变量，宽屏断点逐级提值 --- */
:root { --ht-fs-mega: clamp(3.5rem, 9vw, 8.75rem); }
/* r3 验证修复：≤480px 时 mega 下限降为 12vw（帽 56px）——Oswald 未就绪的环境
   （headless 虚拟时间截图、弱网）回退字体比窄体宽，56px 档最长词 LIGHTWEIGHT
   会把 hero 内容层撑到 ~420px，lede/数据条随之被视口右缘切字；45px 档回退
   字体也稳进 375px。桌面断点不受影响。 */
@media (max-width: 480px) {
  :root { --ht-fs-mega: clamp(2.5rem, 12vw, 3.5rem); }
}
@media (min-width: 1440px) { :root { --ht-fs-mega: clamp(3.5rem, 9vw, 10rem); } }
@media (min-width: 1728px) { :root { --ht-fs-mega: clamp(4rem, 9vw, 12rem); } }
@media (min-width: 1920px) { :root { --ht-fs-mega: clamp(4.5rem, 9vw, 14rem); } }

.ht-display--mega {
  font-size: var(--ht-fs-mega, clamp(3.5rem, 9vw, 8.75rem));
  line-height: 0.92;
  letter-spacing: -0.01em;               /* 大写收紧 */
}
/* r1 验证修复：WP 内容区里 .entry-content h1/h2（本文件 :36-37，特异性 0,1,1）
   会压过单类 .ht-display--mega（0,1,0），巨字阶在页面里不生效。
   这里用同级更高特异性把 mega 的三件套还给它——只影响挂了 mega 类的标题，
   内页普通 h1/h2 的字阶不受影响。 */
.entry-content .ht-display--mega {
  font-size: var(--ht-fs-mega, clamp(3.5rem, 9vw, 8.75rem));
  line-height: 0.92;
  letter-spacing: -0.01em;
}

/* hero 标题配巨字阶：限宽收至 12ch 级（两行短句） */
.ht-hero__inner .ht-display--mega { max-width: 12ch; }

/* --- 沉浸留白（仅首页；内页 .ht-section 零变化）——老板 2026-10-03 定调全站留空收紧，首页同步降一档 --- */
body.home .ht-section { padding-block: clamp(3.5rem, 6.5vw, 6.5rem); }
body.home .ht-lede { max-width: 58ch; }  /* 正文限宽，不做文字墙 */

/* --- interstitial 全幅巨字横断（背景 img 供滚动视差，见 motion.js；
       结构约定：区块最前写死 div.ht-interstitial__bg > img） --- */
.ht-interstitial {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #101012;
  color: #fff;
}
.ht-interstitial__bg {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
}
.ht-interstitial__bg img {
  position: absolute;
  left: 0;
  top: -15%;                              /* 视差位移余量：上下各留 15% */
  width: 100%;
  height: 130%;
  object-fit: cover;
  object-position: center;
  filter: brightness(.62) contrast(1.05) saturate(.9);
}
/* 对角暗渐变压字 + 上下渐隐衔接 #101012 */
.ht-interstitial__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, #101012 0%, transparent 12%),
    linear-gradient(180deg, transparent 78%, #101012 100%),
    linear-gradient(130deg, rgba(16, 16, 18, .55) 45%, rgba(16, 16, 18, .9));
}
.ht-interstitial .ht-display--mega {
  position: relative;
  z-index: 1;                             /* 压在渐变之上 */
  color: #fff;
}

/* --- Inside the Plant 条带（3→2→1；首页 6 工艺卡；About 未使用此网格） --- */
.ht-plantstrip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ht-sp-3);
}
@media (max-width: 1023px) { .ht-plantstrip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .ht-plantstrip { grid-template-columns: 1fr; } }

/* --- 实拍图变体（首页 plantstrip / About 工艺卡共用）：
       cover 铺满、去内边距；深色区豁免白底产品图的 multiply 消融
       （实拍图非白底，multiply 会发灰） --- */
.ht-card__media--cover img {
  object-fit: cover;
  padding: 0;
}
.ht-section--dark .ht-card__media--cover img {
  mix-blend-mode: normal;
  filter: none;
}
/* 16:9 宽幅变体：与 ht-carousel 轨道同高（16:9），双卡并排时
   徽章/标题在一条水平线上（About Quality&Lab 两卡曾差 93px 错位） */
.ht-card__media--wide {
  aspect-ratio: 16 / 9;
}

/* --- 原图直出变体（v0.7.3，老板定调：不抠图、按原本颜色展示）：
       产品线卡图位 = 白色相框，白底棚拍照片原样放进（白底是照片本身），
       零混合零滤镜；深色卡片里的白相框产品照（SKF/MOOG 同款做法） --- */
.ht-section--dark .ht-card__media--photo {
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.ht-section--dark .ht-card__media--photo img {
  mix-blend-mode: normal;
  filter: none;
  padding: var(--ht-sp-2);
  object-fit: contain;
}
.ht-section--dark .ht-card__media--photo::after { display: none; }  /* 去掉展台黑渐变 */
.ht-section--dark .ht-card:hover .ht-card__media--photo { filter: none; }  /* hover 不改照片色彩 */

/* --- 市场覆盖率行：大百分数 + 细分隔线（4→2→1） --- */
.ht-coverage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ht-sp-4);
}
.ht-coverage > div {
  border-left: 1px solid var(--ht-black-3);
  padding-left: var(--ht-sp-3);
}
.ht-coverage .ht-num { font-size: clamp(2rem, 3.6vw, 3rem); }
.ht-coverage small, .ht-coverage__note {
  display: block;
  font-size: var(--ht-fs-small);
  color: var(--ht-gray-2);
}
@media (max-width: 1023px) { .ht-coverage { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px)  { .ht-coverage { grid-template-columns: 1fr; } }

/* --- About 页区块节奏（仅标题间距；区块 padding 跟随全局 --ht-section-pad，2026-10-03 收紧时不再单独放大） --- */
.ht-about .ht-display--h1, .ht-about .ht-display--h2 { margin-bottom: var(--ht-sp-3); }

/* ============================================================
   v0.7 体验与视觉精修
   吸顶页头 / 平滑锚点 / 键盘 hover 同权 / 全球点阵地图 /
   CTA 质感底 / 巨字平衡换行。范围纪律与既有层级一致：
   深色件只认 body.home 与 ht-section--dark/black，内页零颜色侵入。
   ============================================================ */

/* --- 平滑锚点 + 吸顶偏移（锚点跳转不被页头盖住） --- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ht-header-h) + 24px);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* --- 吸顶页头（GP 免费版无 sticky，这里补齐；全站生效） --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;               /* 低于噪点 9990 / intro 99995 / 切换幕布 99999 */
  transition: box-shadow var(--ht-t), background-color var(--ht-t);
}
body.admin-bar .site-header { top: 32px; }          /* 登录态 WP 管理条让位 */
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }
/* 内页：白底半透 + 模糊，滚动时落影（保持白红体系，只加纵深） */
body:not(.home) .site-header {
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
body.ht-scrolled:not(.home) .site-header {
  box-shadow: 0 1px 0 var(--ht-line), 0 14px 34px -22px rgba(27, 27, 29, .28);
}
/* 首页：滚动后从全透明收敛为实底深玻 */
body.home.ht-scrolled .site-header {
  background: rgba(11, 11, 13, .96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom-color: #26262A;
}

/* --- 卡片键盘可达性：focus-within 与 hover 同权 --- */
.ht-card:focus-within {
  border-color: var(--ht-red);
  transform: translateY(-6px);
  box-shadow: 0 18px 40px -18px rgba(27, 27, 29, .28);
}
.ht-card:focus-within .ht-card__media img { transform: scale(1.04); }
.ht-section--dark .ht-card:focus-within .ht-card__media { filter: brightness(1.32); }

/* --- 巨字/大标题平衡换行（不支持的浏览器自动忽略） --- */
.ht-display--mega, .ht-display--h2 { text-wrap: balance; }

/* --- 全球点阵地图（By the Numbers 区块内；SVG 内联自 seed，生成器 build-global-map.py） --- */
.ht-globalmap {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  border-top: 1px solid var(--ht-black-3);
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
}
.ht-globalmap svg { display: block; width: 100%; height: auto; }
.ht-map-dots { stroke: #3A3B42; }
.ht-map-arc {
  stroke: var(--ht-red);
  stroke-width: 2;
  opacity: .8;
  fill: none;
  stroke-dasharray: 5 9;
}
.ht-map-dest, .ht-map-hub { fill: var(--ht-red); }
.ht-map-hub-ring {
  fill: none;
  stroke: var(--ht-red);
  stroke-width: 1.5;
  opacity: .55;
}
.ht-map-hub-label {
  fill: var(--ht-gray);
  font-family: var(--ht-font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.ht-globalmap__caption {
  margin-top: var(--ht-sp-2);
  font-family: var(--ht-font-display);
  font-size: var(--ht-fs-eyebrow);
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray);
}
/* 弧线流动 + 枢纽脉冲（仅 html.ht-anim；reduced-motion 静态直显） */
html.ht-anim .ht-map-arc { animation: ht-arc-flow 2.4s linear infinite; }
@keyframes ht-arc-flow { to { stroke-dashoffset: -56; } }
html.ht-anim .ht-map-hub-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: ht-hub-pulse 2.8s ease-out infinite;
}
@keyframes ht-hub-pulse {
  0%   { transform: scale(.55); opacity: .8; }
  70%  { opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  html.ht-anim .ht-map-arc, html.ht-anim .ht-map-hub-ring { animation: none; }
}

/* --- CTA 区块质感底（程序化拉丝金属 + 红边光，生成器 build-assets.py） --- */
.ht-cta-section {
  background-image:
    linear-gradient(rgba(11, 11, 13, .55), rgba(11, 11, 13, .78)),
    url("/wp-content/uploads/2026/10/cta-texture.webp");
  background-size: cover;
  background-position: center;
}

/* ---------- 图片占位（v0.7.5）：seed 预留图位、媒体后补 ----------
   用法：<div class="ht-media-ph" role="img" aria-label="…"><span>IMAGE PENDING · 说明</span></div>
   修饰类：--card（卡片图位，4/3、贴卡上缘） / --tall（4/3） / --wide（21/9 横幅） */
.ht-media-ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--ht-sp-2);
  background: var(--ht-gray-bg);
  border: 1px dashed var(--ht-line);
  border-radius: var(--ht-radius-card);
  overflow: hidden;
}
.ht-media-ph::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 49.7%, var(--ht-line) 49.7%, var(--ht-line) 50.3%, transparent 50.3%),
    linear-gradient(45deg, transparent 49.7%, var(--ht-line) 49.7%, var(--ht-line) 50.3%, transparent 50.3%);
  opacity: .6;
}
.ht-media-ph > span {
  position: relative;
  font-family: var(--ht-font-display);
  font-size: 0.8125rem;
  letter-spacing: var(--ht-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ht-gray-2);
  padding: 0 var(--ht-sp-3);
  text-align: center;
}
.ht-media-ph--card {
  aspect-ratio: 4 / 3;
  margin: 0 0 var(--ht-sp-2);
  border-radius: var(--ht-radius) var(--ht-radius) 0 0;
}
.ht-media-ph--tall { aspect-ratio: 4 / 3; }
.ht-media-ph--wide { aspect-ratio: 21 / 9; }

/* --- FAQ 折叠条（v0.7.5，FAQ 页；details 原生交互，无 JS 可用） --- */
details.ht-faq {
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius-card);
  background: var(--ht-white);
  margin-bottom: var(--ht-sp-2);
}
details.ht-faq > summary {
  position: relative;
  padding: var(--ht-sp-3) 3rem var(--ht-sp-3) var(--ht-sp-3);
  font-family: var(--ht-font-display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: var(--ht-ls-btn);
  cursor: pointer;
  list-style: none;
}
details.ht-faq > summary::-webkit-details-marker { display: none; }
details.ht-faq > summary::after {
  content: "";
  position: absolute;
  right: var(--ht-sp-3);
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ht-red);
  border-bottom: 2px solid var(--ht-red);
  transform: translateY(-50%) rotate(45deg);       /* 折叠：朝下 */
  transition: transform var(--ht-t);
}
details.ht-faq[open] > summary::after { transform: translateY(-50%) rotate(225deg); }  /* 展开：朝上 */
details.ht-faq > summary:hover { color: var(--ht-red); }
.ht-faq__body {
  padding: 0 var(--ht-sp-3) var(--ht-sp-3);
  border-top: 1px solid var(--ht-line);
}
.ht-faq__body p { margin-top: var(--ht-sp-3); }
.ht-faq__body ul { margin-top: var(--ht-sp-2); padding-left: 1.25rem; }
.ht-faq__body li { margin-bottom: 0.4rem; }


/* ═══════════════ 统一检索双 Tab（纯 CSS radio 切换：无 JS 可用，爬虫两栏全可见；固定 id，每页一个实例） ═══════════════ */
.ht-tabs { position: relative; }
.ht-tabs__r {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.ht-tabs__tab {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1.2rem;
  margin-right: 0.4rem;
  font-family: var(--ht-font-display);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: var(--ht-ls-btn);
  color: var(--ht-gray-2);
  background: var(--ht-gray-bg);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius) var(--ht-radius) 0 0;
  border-bottom: none;
  cursor: pointer;
  user-select: none;
  transition: color var(--ht-t), background var(--ht-t);
}
.ht-tabs__tab:hover { color: var(--ht-text); }
#htsm-n:checked ~ label[for="htsm-n"],
#htsm-v:checked ~ label[for="htsm-v"] {
  color: var(--ht-white);
  background: var(--ht-black);
  cursor: default;
}
.ht-tabs__r:focus-visible + .ht-tabs__tab {
  outline: 2px solid var(--ht-red);
  outline-offset: 2px;
}
.ht-tabs__panel {
  display: none;
  margin-top: -1px;
  padding: var(--ht-sp-3) 0 0;
  border-top: 2px solid var(--ht-black);
}
#htsm-n:checked ~ .ht-tabs__panel[data-p="n"],
#htsm-v:checked ~ .ht-tabs__panel[data-p="v"] { display: block; }
/* 单表单模式（OE Reference 页：无 Tab 头，号码面板直接展开） */
.ht-tabs__panel--open { display: block; border-top: 2px solid var(--ht-black); }

/* v0.9.3 深色语境双 Tab（首页搜索条与 /products/ 检索同构；[ht_search_tabs dark="1"]） */
.ht-tabs--dark .ht-tabs__tab {
  color: rgba(242, 240, 236, .72);
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .14);
}
.ht-tabs--dark .ht-tabs__tab:hover { color: var(--ht-white); }
.ht-tabs--dark #htsm-n:checked ~ label[for="htsm-n"],
.ht-tabs--dark #htsm-v:checked ~ label[for="htsm-v"] {
  background: #F2F0EC;
  color: var(--ht-black);
}
.ht-tabs--dark .ht-tabs__panel { border-top-color: rgba(255, 255, 255, .14); }
.ht-tabs--dark .ht-input {
  background: var(--ht-black-2);
  border-color: var(--ht-black-3);
  color: #fff;
}
.ht-tabs--dark .ht-input:focus { border-color: var(--ht-red); }
.ht-tabs--dark form label,
.ht-tabs--dark .ht-field label { color: rgba(242, 240, 236, .82); }
.ht-tabs--dark .ht-muted { color: rgba(242, 240, 236, .62); }
.ht-tabs--dark .ht-btn--outline {
  color: #F2F0EC;
  border-color: rgba(255, 255, 255, .3);
}
.ht-tabs--dark .ht-btn--outline:hover { border-color: var(--ht-red); color: #fff; }
.ht-tabs--dark select.ht-input option { color: var(--ht-text); background: var(--ht-white); }

/* ═══════════════ 检索结果行卡（图表合一：一产品一行，图+号+适配+OE；teknorot 密表格的差异化替代） ═══════════════ */
.ht-rl {
  display: flex;
  flex-direction: column;
  gap: var(--ht-sp-1);
}
.ht-rl__row {
  position: relative;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: var(--ht-sp-3);
  align-items: start;
  padding: var(--ht-sp-2) var(--ht-sp-3);
  background: var(--ht-white);
  border: 1px solid var(--ht-line);
  border-left: 3px solid var(--ht-line);
  border-radius: var(--ht-radius-card);
  transition: border-color var(--ht-t), background var(--ht-t);
}
.ht-rl__row:hover {
  border-color: var(--ht-red);
  border-left-color: var(--ht-red);
  background: var(--ht-gray-bg);
}
/* 图位规范（老板定调）：浅色内页产品图=浅灰底原图直出（同 .ht-card__media 口径），
   禁深色展台底/滤镜/混合；无图占位走全站统一 PHOTO ON REQUEST 微字。 */
.ht-rl__media {
  display: block;
  width: 96px;
  height: 72px;
  background: var(--ht-gray-bg);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  overflow: hidden;
}
.ht-rl__media img { width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
.ht-rl__media-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.35rem;
  color: var(--ht-gray);
  font-family: var(--ht-font-display);
  font-size: 0.55rem;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  overflow: hidden;
  word-break: normal;
  hyphens: none;
}
.ht-rl__body { min-width: 0; }
.ht-rl__pn {
  margin: 0;
  font-family: var(--ht-font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: var(--ht-ls-display);
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
}
.ht-rl__pn a { color: var(--ht-text); text-decoration: none; transition: color var(--ht-t); }
.ht-rl__row:hover .ht-rl__pn a { color: var(--ht-red); }
/* stretched link：整行可点；行内其他链接浮上层 */
.ht-rl__cover::after { content: ""; position: absolute; inset: 0; }
.ht-rl__cat,
.ht-rl__pos {
  font-family: var(--ht-font-body);
  font-size: var(--ht-fs-eyebrow);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ht-ls-eyebrow);
  color: var(--ht-gray-2);
}
.ht-rl__apps { margin: 0.3rem 0 0; font-size: var(--ht-fs-small); color: var(--ht-text); }
.ht-rl__fits { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.ht-rl__fits li {
  font-size: var(--ht-fs-small);
  color: var(--ht-text);
  padding: 0.18rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.ht-rl__fits li strong {
  font-family: var(--ht-font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.ht-rl__yr,
.ht-rl__more { color: var(--ht-gray-2); }
.ht-rl__more { font-size: var(--ht-fs-eyebrow); }
.ht-rl__oe {
  margin: 0.45rem 0 0;
  font-family: var(--ht-font-mono);
  font-size: 0.8rem;
  color: var(--ht-gray-2);
}
.ht-rl__go {
  align-self: center;
  font-family: var(--ht-font-display);
  font-size: 1.4rem;
  color: var(--ht-gray);
  transition: color var(--ht-t), transform var(--ht-t);
}
.ht-rl__row:hover .ht-rl__go { color: var(--ht-red); transform: translateX(3px); }

@media (max-width: 719px) {
  .ht-rl__row {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--ht-sp-2);
    padding: var(--ht-sp-2);
  }
  .ht-rl__media { width: 64px; height: 48px; }
  .ht-rl__pn { font-size: 1.1rem; }
  .ht-rl__go { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ht-rl__row,
  .ht-rl__pn a,
  .ht-rl__go { transition: none; }
  .ht-rl__row:hover .ht-rl__go { transform: none; }
}



/* ============================================================
   v0.9.21 中文站修复（2026-10-04）
   ============================================================ */

/* --- 1. 移动端展开菜单面板：不透明深底 ---
   GP 移动菜单 .toggled 面板与 .main-nav 全透明（站头刻意压透明叠在 hero 上），
   首页深色 hero 大标题直接穿透菜单文字，基本不可读（zh 站验收实测）。
   面板压成 VI 石墨黑——深浅页面都保证对比度；二级子菜单本就是 GP 深底，衔接一致。 */
@media (max-width: 768px) {
  body .main-navigation.toggled,
  body .main-navigation.toggled .inside-navigation,
  body .main-navigation.toggled .main-nav > ul {
    background-color: var(--ht-black);
  }
}

/* --- 2. wp:button 双层按钮：内层链接铺满外层（触达面积 ≥44px） ---
   .ht-btn 类挂在外层包装 div 上时，内层 a 被压平成纯文字（padding:0），
   实测 hero「询盘报价」可点击区仅 91×24px。把内边距从外层挪到链接本体：
   视觉盒尺寸不变，可点击区恢复整颗按钮（≥48px 高）。 */
.wp-block-button.ht-btn { padding: 0; }
.wp-block-button.ht-btn .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: inherit;
  padding: 0.75rem 2rem;
  min-height: 48px;
}

/* ============================================================
   v0.9.30 手机菜单可读性修复（2026-10-05）
   ============================================================ */

/* --- 移动端展开菜单：文字统一浅色 ---
   v0.9.21 只把面板压黑、没动文字色：浅色内页的菜单文字仍是
   白底时代的深灰 #222——黑底深字不可读（生产 /products 实测）。
   面板恒为深底，文字也应恒为浅色；悬停/聚焦回品牌红；
   当前项（Products/语言项）保持原有红色高亮不被覆盖；
   二级子菜单底色从 GP 浅灰统一成石墨黑，与面板衔接。 */
@media (max-width: 768px) {
  body .main-navigation.toggled .main-nav ul li a {
    color: #EDEDEF;
  }
  body .main-navigation.toggled .main-nav ul li a:hover,
  body .main-navigation.toggled .main-nav ul li a:focus {
    color: var(--ht-red);
  }
  body .main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a,
  body .main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a:hover,
  body .main-navigation.toggled .main-nav ul li[class*="current-menu-"] > a:focus {
    color: var(--ht-red);
  }
  body .main-navigation.toggled .main-nav ul ul {
    background: #17171A;
  }
  body .main-navigation.toggled .menu-toggle {
    color: #EDEDEF;
  }
}

/* ---------- 列表分页（新闻/技术文章 Query Loop；贴合工程感设计语言） ---------- */
.ht-news .wp-block-query-pagination,
.ht-articles .wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.ht-news .wp-block-query-pagination .page-numbers,
.ht-articles .wp-block-query-pagination .page-numbers,
.ht-news .wp-block-query-pagination-previous,
.ht-news .wp-block-query-pagination-next,
.ht-articles .wp-block-query-pagination-previous,
.ht-articles .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.9rem;
  font-family: var(--ht-font-display);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: var(--ht-ls-btn);
  text-transform: uppercase;
  color: var(--ht-text);
  background: var(--ht-white);
  border: 1px solid var(--ht-line);
  border-radius: var(--ht-radius);
  text-decoration: none;
  transition: color var(--ht-t), border-color var(--ht-t), background var(--ht-t);
}
.ht-news .wp-block-query-pagination-previous,
.ht-articles .wp-block-query-pagination-previous { padding-inline: 1.1rem; }
.ht-news .wp-block-query-pagination-previous::before,
.ht-articles .wp-block-query-pagination-previous::before {
  content: "←"; margin-right: 0.35rem; font-family: var(--ht-font-body);
}
.ht-news .wp-block-query-pagination-next,
.ht-articles .wp-block-query-pagination-next { padding-inline: 1.1rem; }
.ht-news .wp-block-query-pagination-next::after,
.ht-articles .wp-block-query-pagination-next::after {
  content: "→"; margin-left: 0.35rem; font-family: var(--ht-font-body);
}
.ht-news .wp-block-query-pagination a:hover,
.ht-articles .wp-block-query-pagination a:hover {
  color: var(--ht-red); border-color: var(--ht-red);
}
.ht-news .wp-block-query-pagination .page-numbers.current,
.ht-articles .wp-block-query-pagination .page-numbers.current {
  color: #fff; background: var(--ht-red); border-color: var(--ht-red); cursor: default;
}