/* ===== YONGDAO Metal Products v2 - 荣特风（深灰黑+红 工业极简） ===== */
:root {
  --dark: #212529;
  --dark-2: #2b2f33;
  --dark-3: #343a40;
  --red: #dc2b30;
  --red-dark: #c21f24;
  --white: #ffffff;
  --light: #f2f2f2;
  --gray: #666666;
  --gray-light: #999999;
  --border: #e6e6e6;
  --radius: 20px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--dark);
  font-size: 15px;
  line-height: 1.75;
  background: var(--white);
}
[dir="rtl"] body {
  font-family: "Segoe UI", "Tahoma", "Noto Kufi Arabic", "Cairo", Arial, sans-serif;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; transition: all .25s; }
ul { list-style: none; }
.container { width: 100%; max-width: 1270px; margin: 0 auto; padding: 0 24px; }

/* ===== Topbar (Rongte style: white bg, red icons) ===== */
/* ===== 页头尺寸冻结（zh/en/ru/ar 全 16 页共用同一套固定值，不依赖继承、无页面级覆盖）=====
   上条 .topbar：宽随 .container(最大 1270px 含 24px 内距，内容宽 1222px)、font-size 13px、
                 line-height 1.75(22.75px)、min-height 40px + 下边框 1px = 实测高 41px
   下条 .site-header：min-height 76px（实测 76px）、sticky 吸顶 top:0
   logo：.logo-mark 高 46px；.logo margin-inline-start:-24px（对齐内容区外沿，随书写方向自动镜像）；
         .logo-text strong 15px/1.25(18.75px)、small 11px/1.25(13.75px)
   主导航：font-size 14.5px、line-height 1.75(25.375px)、padding 10px 16px、.main-nav gap 6px
   工具组：.header-tools gap 12px、margin-inline-start 6px（逻辑属性，阿语自动镜像为右侧 6px）；
           .search-toggle 40x40 圆形；.btn-msg 在线咨询按钮 padding 10px 30px / 圆角 50px /
           字号 14px / 边框 2px（实测 121.61x48.5）
   字体栈：中英俄共用 body 栈；阿语由 [dir="rtl"] body 指定含 Noto Kufi Arabic 的栈（见文件头部）
   滚动行为：.topbar static 随页面滚出、.site-header sticky 吸顶，无收起动画（保持现状） */
.topbar { background: #fff; color: var(--gray); font-size: 13px; line-height: 1.75; border-bottom: 1px solid var(--border); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: 16px; flex-wrap: wrap; }
.topbar-left { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-inline-end: auto; }
.topbar-left a { color: var(--dark); font-weight: 600; }
.topbar-left a:hover { color: var(--red); }
.tb-item { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; line-height: 1.75; }
.tb-ico { display: inline-flex; align-items: center; color: var(--red); }
.tb-sep { color: var(--border); }
.lang-switch { display: flex; gap: 2px; margin-inline-start: auto; }
.lang-item { padding: 3px 9px; font-size: 12px; line-height: 1.75; color: var(--gray); border-radius: 3px; border: 1px solid transparent; }
.lang-item:hover { color: var(--red); border-color: var(--border); }
.lang-item.active { color: var(--red); font-weight: 700; border-color: var(--red); }

/* ===== Main nav (Rongte style: white bg, logo left, tools right) ===== */
.site-header { position: sticky; top: 0; z-index: 1000; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.logo { display: flex; align-items: center; gap: 12px; margin-inline-start: -24px; }
.logo a { display: flex; align-items: center; gap: 12px; }
.logo-mark {
  width: auto; height: 46px; display: block; flex: 0 0 auto;
  background: none; border: 0; border-radius: 0; object-fit: contain;
}
.logo-text { line-height: 1.25; }
.logo-text strong { font-size: 15px; line-height: 1.25; letter-spacing: 0.4px; color: var(--dark); display: block; }
.logo-text small { font-size: 11px; line-height: 1.25; color: var(--gray-light); text-transform: uppercase; letter-spacing: 1.5px; }

.main-nav { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.main-nav > li { position: relative; }
.main-nav > li > a {
  display: block; padding: 10px 16px; font-size: 14.5px; line-height: 1.75; font-weight: 600; color: var(--dark);
  letter-spacing: 0.3px;
}
.main-nav > li > a:hover, .main-nav > li > a.active { color: var(--red); }
.main-nav > li > a::after { content: ""; display: block; height: 2px; width: 0; background: var(--red); transition: width .25s; margin-top: 3px; }
.main-nav > li > a:hover::after, .main-nav > li > a.active::after { width: 100%; }

.dropdown {
  position: absolute; top: 100%; inset-inline-start: 0; min-width: 260px; background: #fff;
  border-top: 2px solid var(--red); box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; z-index: 100;
}
.main-nav > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown li a { display: block; padding: 11px 20px; font-size: 14px; color: var(--dark); border-bottom: 1px solid #f0f0f0; }
.dropdown li a:hover { color: var(--red); background: var(--light); padding-left: 26px; }

/* Header tools: search + online message button */
.header-tools { display: flex; align-items: center; gap: 12px; margin-inline-start: 6px; }
.header-search { position: relative; display: flex; align-items: center; }
.search-toggle {
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 50%;
  background: #fff; color: var(--dark); display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .25s;
}
.search-toggle:hover { color: #fff; background: var(--red); border-color: var(--red); }
.search-box {
  position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: 280px;
  background: #fff; border: 1px solid var(--border); border-top: 2px solid var(--red);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12); padding: 8px; display: none; z-index: 100;
}
.header-search.open .search-box { display: flex; align-items: center; gap: 6px; }
.search-box input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 4px;
  padding: 8px 10px; font-size: 13px; font-family: inherit; outline: none;
}
.search-box input:focus { border-color: var(--red); }
.search-go {
  border: none; background: var(--red); color: #fff; width: 34px; height: 34px; flex: 0 0 auto;
  border-radius: 4px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.search-go:hover { background: var(--red-dark); }
/* 在线咨询按钮 .btn-msg：与 .btn 的尺寸冲突已合并——原 padding 9/22、圆角 6px、字号 13.5px 被后面的 .btn
   (padding 10/30、圆角 50px、字号 14px) 全量覆盖，属失效声明，已清除；最终尺寸以首页现状为准。
   .btn.btn-msg 提升一级特异性，保证不再被 .btn 反向覆盖；hover 取改前实际生效值（.btn-red:hover 胜出）。 */
.btn-msg,
.btn.btn-msg {
  display: inline-block; padding: 10px 30px; border-radius: 50px; font-size: 14px; line-height: 1.75;
  font-weight: 700; letter-spacing: 0.4px; text-align: center; border: 2px solid transparent;
  white-space: nowrap; cursor: pointer; transition: all .25s;
}
.btn-msg:hover,
.btn.btn-msg:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(220,43,48,0.3); }
.nav-toggle { display: none; background: none; border: none; font-size: 26px; color: var(--dark); cursor: pointer; }

/* ===== Category nav (Series style: white bg, deep-gray labels, red underline for selected, light dropdown with icons) ===== */
.cat-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 900;
}
.cat-nav-inner {
  display: flex; align-items: stretch; gap: 0; flex-wrap: nowrap;
  overflow: visible;
  justify-content: center;
}
.cat-nav-item { position: relative; flex: 1 1 auto; min-width: 0; }
/* 间距均匀化 ①：统一两类项的按钮宽度行为。
   原先 <button class="cat-nav-btn"> 的 width:auto 为 shrink-to-fit（收缩到内容宽并靠左），
   而独立项 <a class="cat-nav-btn"> 是块级弹性容器（width:auto 撑满父级、内容居中），
   两者混排导致"带下拉项文本贴左、独立项文本居中"，相邻间隙一宽一窄。统一为撑满 + 文本居中。 */
.cat-nav-item > .cat-nav-btn { width: 100%; }
/* 间距均匀化 ②：独立项无下拉箭头，缺少箭头占位（gap 6px + ▼ 10px = 16px），
   故在其按钮右侧补等量不可见留白，使 (左内边距 + 右内边距 + 箭头占位) 两类项均为 44px，
   从而相邻文本块间隔恒定（不新增任何可见元素，不添加假箭头）。 */
.cat-nav-item-plain > .cat-nav-btn { padding-inline-end: 30px; }
.cat-nav-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 50px; padding: 0 14px; background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--dark);
  letter-spacing: 0.2px; white-space: nowrap; transition: all .25s;
}
.cat-nav-btn .cnv-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-nav-btn:hover { color: var(--red); }
.cat-nav-btn .cnv-arrow { font-size: 10px; color: var(--red); transition: transform .25s; }
.cat-nav-item:hover .cat-nav-btn .cnv-arrow,
.cat-nav-item.open .cat-nav-btn .cnv-arrow { transform: rotate(180deg); }
.cat-nav-drop {
  position: absolute; top: 100%; left: 0; min-width: 260px; width: 100%;
  background: var(--light); border: 1px solid var(--border); border-top: 2px solid var(--red);
  box-shadow: 0 14px 34px rgba(0,0,0,0.13); padding: 8px 0;
  opacity: 0; visibility: hidden; transform: translateY(10px); transition: all .25s; z-index: 100;
}
.cat-nav-item:hover .cat-nav-drop { opacity: 1; visibility: visible; transform: translateY(0); }
.cat-nav-drop li a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; font-size: 14px; color: var(--dark); white-space: nowrap;
}
.cat-nav-drop li a:hover { color: var(--red); background: #fff; padding-left: 22px; }
.cat-nav-drop .cnv-ico { display: inline-flex; color: var(--red); flex: 0 0 auto; }
.cat-nav-drop li a:hover .cnv-ico { color: var(--red); }

/* Multi-item dropdown (>=8 items, e.g. Bolts 11 / Nuts 12): two-column wide panel */
.cat-nav-drop.wide {
  min-width: 560px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 6px;
  row-gap: 0;
  padding: 10px 16px;
}
.cat-nav-drop.wide li a { white-space: normal; line-height: 1.35; align-items: flex-start; padding: 8px 12px; }
.cat-nav-drop.wide .cnv-ico { margin-top: 2px; }

/* RTL mirror for dropdown panel + arrow */
[dir="rtl"] .cat-nav-drop { left: auto; right: 0; }
/* 间距均匀化 ③：RTL（阿语）下 flex 主轴反向，文本块间隔会额外叠加"相邻项文本宽度差"，
   故在 RTL 下让 5 项等宽，使各项格位严格等距，消除文本长度差异带来的间隔波动。 */
@media (min-width: 1101px) { [dir="rtl"] .cat-nav-item { flex: 1 1 0px; } }
[dir="rtl"] .cat-nav-btn .cnv-arrow { transform: scaleX(-1); }
[dir="rtl"] .cat-nav-item:hover .cat-nav-btn .cnv-arrow,
[dir="rtl"] .cat-nav-item.open .cat-nav-btn .cnv-arrow { transform: scaleX(-1) rotate(180deg); }

/* Mid: wrap to 3 columns below 1100px (no horizontal scroll, dropdown stays visible) */
@media (max-width: 1100px) {
  .cat-nav-inner { flex-wrap: wrap; }
  .cat-nav-item { flex: 1 1 33.333%; }
  .cat-nav-btn { height: 46px; font-size: 13px; padding: 0 10px; }
  .cat-nav-item-plain > .cat-nav-btn { padding-inline-end: 10px; }
  .cat-nav-drop.wide { display: block; min-width: 0; grid-template-columns: none; padding: 8px 0; }
}

/* Mobile: tap to expand/collapse */
@media (max-width: 768px) {
  .cat-nav { overflow: visible; }
  .cat-nav-inner { flex-wrap: wrap; }
  .cat-nav-item { flex: 1 1 50%; border-bottom: 1px solid var(--border); border-right: none; }
  .cat-nav-item:first-child { border-left: none; }
  .cat-nav-btn { height: 46px; font-size: 14px; }
  .cat-nav-drop {
    position: static; width: 100%; min-width: 0; border: none; border-top: 1px solid var(--border);
    box-shadow: none; opacity: 1; visibility: hidden; display: none; transform: none;
  }
  .cat-nav-item.open .cat-nav-drop { visibility: visible; display: block; }
  .cat-nav-drop.wide { display: none; grid-template-columns: none; min-width: 0; padding: 8px 0; }
  .cat-nav-item.open .cat-nav-drop.wide { visibility: visible; display: block; }
}

/* ===== Buttons ===== */
.btn {
  display: inline-block; padding: 10px 30px; border-radius: 50px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.4px; border: 2px solid transparent; cursor: pointer; text-align: center; transition: all .25s;
}
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(220,43,48,0.3); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.7); }
.btn-outline-light:hover { background: rgba(255,255,255,0.15); }
.btn-outline-dark { background: transparent; color: var(--dark); border-color: var(--dark); }
.btn-outline-dark:hover { background: var(--dark); color: #fff; }
.link-more { color: var(--red); font-weight: 700; font-size: 14px; }
.link-more:hover { text-decoration: underline; }

/* ===== Hero Banner ===== */
.hero { position: relative; height: 620px; overflow: hidden; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease;
  background-size: cover; background-position: center; display: flex; align-items: center;
}
.hero-slide.active { opacity: 1; z-index: 2; }
/* 明亮版：不再叠加深色氛围遮罩，保持背景原图亮度 */
.hero-content { position: absolute; z-index: 3; left: 8%; bottom: 15vh; width: 16.3em; max-width: 92vw; padding: 0; margin: 0; color: var(--dark); text-align: end; background: transparent; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
[dir="rtl"] .hero-content { left: auto; right: 8%; }
.hero-content h1 { line-height: 1.2; font-weight: 800; color: var(--dark); }
.hero-content h2 { font-size: 23px; font-weight: 600; color: #3a3f45; margin-bottom: 18px; }
.hero-content p { font-size: 16px; color: var(--gray); margin-bottom: 30px; max-width: 560px; }
.hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
/* 无卡片 Hero 文字配色：silver 落纯白区黑字；color 压彩色金属管黑字；factory 压建筑白字+局部暗角衬底（禁止整图遮罩） */
/* V22：原 silver/color per-slide 的 hero 文字 text-shadow 规则（含白晕阴影）已从源头删除，hero 文字不再定义任何 text-shadow */
.hero-slide--factory .hero-content { color: #fff; }
.hero-slide--factory .hero-content h1 { color: #fff; }
.hero-slide--factory .hero-content h2 { color: rgba(255,255,255,0.94); }
.hero-slide--factory .hero-content p { color: rgba(255,255,255,0.86); }
/* 局部暗角衬底：仅 factory 文字落点区（LTR 左下 / RTL 右下），非整图遮罩 */
.hero-slide--factory::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 55%; height: 64%;
  background: radial-gradient(120% 115% at 16% 94%, rgba(10,13,18,0.82) 0%, rgba(10,13,18,0.46) 44%, rgba(10,13,18,0) 76%);
  z-index: 1; pointer-events: none;
}
[dir="rtl"] .hero-slide--factory::after { left: auto; right: 0; background: radial-gradient(120% 115% at 84% 94%, rgba(10,13,18,0.82) 0%, rgba(10,13,18,0.46) 44%, rgba(10,13,18,0) 76%); }
/* 左下角圆形缩略图导航条（当前项高亮圆环），替代原底部居中圆点 */
.hero-thumbs { position: absolute; bottom: 26px; left: 44px; z-index: 6; display: flex; gap: 14px; align-items: center; }
[dir="rtl"] .hero-thumbs { left: auto; right: 44px; }
.hero-thumbs .hero-thumb {
  width: 58px; height: 58px; border-radius: 50%; padding: 0; margin: 0; cursor: pointer;
  border: 2px solid rgba(33,37,41,0.45); outline: none; overflow: hidden;
  background-color: #e6e6e6; background-size: cover; background-position: center;
  opacity: 0.85; transition: opacity .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.hero-thumbs .hero-thumb:hover { opacity: 1; border-color: rgba(33,37,41,0.75); }
.hero-thumbs .hero-thumb.active {
  opacity: 1; border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(220,43,48,0.30), 0 4px 14px rgba(0,0,0,0.28);
  transform: translateY(-3px);
}

/* ===== Section ===== */
.section { padding: 90px 0; }
.section-light { background: var(--light); }
.section-dark { background: var(--dark); color: #fff; }
.section-head { text-align: center; max-width: 820px; margin: 0 auto 56px; position: relative; padding-bottom: 22px; }
.section-head::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 46px; height: 3px; background: var(--red); border-radius: 2px; }
.section-head .sec-tag {
  display: inline-block; color: var(--red); font-size: 13px; font-weight: 800; letter-spacing: 3px;
  text-transform: uppercase; margin-bottom: 10px;
}
.section-head h2 { font-size: 34px; font-weight: 800; color: var(--dark); line-height: 1.3; margin-bottom: 14px; }
.section-dark .section-head h2 { color: #fff; }
.section-head p { color: var(--gray); font-size: 15px; }
.section-dark .section-head p { color: rgba(255,255,255,0.72); }

/* ===== Products cards ===== */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.prod-card { background: var(--light); border-radius: var(--radius); overflow: hidden; transition: all .3s; }
.prod-card:hover { background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,0.12); transform: translateY(-6px); }
.prod-img { height: 230px; overflow: hidden; background: #fff; }
.prod-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s; }
.prod-card:hover .prod-img img { transform: scale(1.06); }
.prod-body { padding: 26px 26px 28px; }
.prod-body h3 { font-size: 19px; font-weight: 800; color: var(--dark); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; }
.prod-en { font-size: 12px; color: var(--red); font-weight: 700; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 10px; }
.prod-desc { font-size: 13.5px; color: var(--gray); margin-bottom: 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.prod-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.prod-tags span { font-size: 11px; color: var(--gray); border: 1px solid #d5d5d5; border-radius: 50px; padding: 3px 12px; }

/* ===== About ===== */
.about-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.about-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.about-imgs img { border-radius: var(--radius); object-fit: cover; width: 100%; height: 220px; }
.about-imgs img:first-child { grid-column: 1 / -1; height: 300px; }
.about-text h2 { font-size: 34px; font-weight: 800; margin-bottom: 18px; color: var(--dark); }
.about-text p { color: var(--gray); margin-bottom: 16px; font-size: 15px; }
.cert-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 22px 0; }
.cert-row img { width: 92px; height: 92px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; }

/* ===== Stats ===== */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.stat { text-align: center; padding: 30px 10px; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,0.12); }
[dir="rtl"] .stat + .stat { border-left: none; border-right: 1px solid rgba(255,255,255,0.12); }
.stat strong { display: block; font-size: 48px; font-weight: 800; color: var(--red); line-height: 1.1; }
.stat span { font-size: 14px; color: rgba(255,255,255,0.75); letter-spacing: 1px; }

/* ===== Why cards ===== */
.why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.why-item { background: var(--light); border-radius: var(--radius); padding: 40px 32px; transition: all .3s; }
.why-item:hover { background: #fff; box-shadow: 0 14px 40px rgba(0,0,0,0.1); transform: translateY(-6px); }
.why-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--red); color: #fff; font-size: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 22px; font-weight: 800; }
.why-ico svg { width: 28px; height: 28px; }
.why-item h4 { font-size: 19px; font-weight: 800; color: var(--dark); margin-bottom: 12px; }
.why-item p { font-size: 14px; color: var(--gray); }

/* ===== Materials strip（材质前置，卖点强化） ===== */
.materials-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: -34px 0 44px; }
.mat-item { border: 1px solid #d5d5d5; border-radius: 50px; padding: 8px 22px; font-size: 13px; color: var(--gray); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; transition: all .25s; background: transparent; cursor: pointer; font-family: inherit; line-height: 1.6; }
.mat-item:hover { border-color: var(--red); color: var(--red); }
.mat-item.active { background: var(--dark); border-color: var(--dark); color: #fff; }
.mat-item.active:hover { color: #fff; }

/* ===== 首页产品大类卡片（V4：卡宽 292px + 间距 13.5px 通栏铺满 1222px，一屏 3 整卡 + 左右各半张无缝循环；≤1100px 258px，≤768px 90vw） ===== */
.section-products { background: var(--light); }
.cat-carousel { width: 100%; max-width: none; }
.cat-viewport { width: 100%; overflow: hidden; padding: 4px 2px 16px; touch-action: pan-y; }
.cat-track { display: flex; flex-wrap: nowrap; gap: 13.5px; will-change: transform; align-items: stretch; }
.cat-card {
  position: relative; min-width: 0; flex: 0 0 292px; max-width: 292px;
  background: #fafafa; border-radius: 16px; padding: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.06); transition: box-shadow .3s, transform .3s;
  display: flex; flex-direction: row; align-items: stretch; gap: 16px;
}
.cat-card:hover { box-shadow: 0 16px 38px rgba(0,0,0,0.14); transform: translateY(-4px); }
.cat-info { min-width: 0; flex: 1; order: 1; display: flex; flex-direction: column; gap: 9px; }
.cat-info h3 { font-size: 20px; font-weight: 800; color: #8f1f1f; margin-bottom: 2px; line-height: 1.2; }
.cat-desc {
  font-size: 13px; color: var(--gray); line-height: 1.6; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.mat-label { font-size: 13px; font-weight: 800; color: var(--red); margin: 6px 0 0; letter-spacing: .5px; }
.mat-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-mat {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid #d9d9d9; background: var(--white); border-radius: 9px;
  padding: 6px 12px; font-size: 13px; color: var(--dark); font-weight: 600;
  cursor: pointer; transition: all .2s; font-family: inherit; line-height: 1.55;
}
.cat-mat .mat-arrow { color: var(--red); font-weight: 800; font-size: 13px; line-height: 1; }
.cat-mat:hover { border-color: var(--red); color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.cat-mat.selected { background: var(--red); border-color: var(--red); color: #fff; }
.cat-mat.selected .mat-arrow { color: #fff; }
.cat-photo {
  order: 2; flex: 0 0 48%; width: 48%; height: 260px; align-self: stretch; margin: 0;
  background: #fafafa; border: 1px solid #f0f0f0; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.cat-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
[dir="rtl"] .cat-mat .mat-arrow { transform: scaleX(-1); }
@media (max-width: 1100px) {
  .cat-card { flex: 0 0 380px; max-width: 380px; }
}
@media (max-width: 768px) {
  .cat-card { flex: 0 0 88vw; max-width: 88vw; flex-direction: column; }
  .cat-photo { order: 0; flex: none; width: 100%; height: 200px; }
  .cat-info { order: 0; }
}

/* ===== Industries（应用行业板块） ===== */
.ind-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.ind-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  padding: 34px 28px; text-align: center; transition: all .3s;
}
.ind-card:hover { box-shadow: 0 14px 36px rgba(0,0,0,0.1); transform: translateY(-4px); border-color: transparent; }
.ind-ico {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 14px;
  background: rgba(220,43,48,0.08); color: var(--red);
  display: flex; align-items: center; justify-content: center;
}
.ind-ico svg { width: 30px; height: 30px; }
.ind-card:hover .ind-ico { background: var(--red); color: #fff; }
.ind-card h4 { font-size: 18px; font-weight: 800; color: var(--dark); margin-bottom: 10px; }
.ind-card p { font-size: 13.5px; color: var(--gray); line-height: 1.7; }

/* ===== Apps ===== */
.app-tags { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.app-tag {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.9);
  border-radius: 50px; padding: 10px 26px; font-size: 14px; transition: all .25s;
}
.app-tag:hover { background: var(--red); border-color: var(--red); color: #fff; }

/* ===== Certificates ===== */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.cert-item { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
.cert-item img { width: 100%; height: 260px; object-fit: contain; }

/* ===== Page banner ===== */
.page-banner { background: var(--dark); color: #fff; padding: 80px 0; position: relative; }
.page-banner::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
.page-banner .sec-tag { color: var(--red); font-size: 13px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; }
.page-banner h1 { font-size: 42px; font-weight: 800; margin: 10px 0 12px; }
.page-banner p { color: rgba(255,255,255,0.8); max-width: 720px; font-size: 16px; }
.breadcrumb { font-size: 13px; color: rgba(255,255,255,0.6); margin-top: 16px; }
.breadcrumb a { color: var(--red); }
.breadcrumb a:hover { color: #fff; }

/* ===== Product blocks ===== */
.prod-block {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; align-items: center;
  background: var(--light); border-radius: var(--radius); padding: 44px; margin-bottom: 34px;
  /* 锚点补偿：吸顶导航（site-chrome + cat-nav 双排约 166px）不遮挡产品标题，桌面取 190px */
  scroll-margin-top: 190px;
}
.prod-block.even .prod-block-img { order: 2; }
.prod-block-img img { border-radius: 14px; width: 100%; height: 340px; object-fit: cover; }
.prod-block-text h3 { font-size: 26px; font-weight: 800; color: var(--dark); margin-bottom: 6px; text-transform: uppercase; }
.prod-block-text .prod-en { font-size: 13px; }
.prod-block-text > p { color: var(--gray); margin-bottom: 16px; }
.prod-block-text ul { margin-bottom: 20px; }
.prod-block-text li { padding: 7px 0 7px 24px; position: relative; color: #444; font-size: 14.5px; border-bottom: 1px dashed #ddd; }
.prod-block-text li:last-child { border-bottom: none; }
.prod-block-text li::before { content: "›"; position: absolute; left: 4px; color: var(--red); font-weight: 800; font-size: 18px; }
[dir="rtl"] .prod-block-text li { padding: 7px 24px 7px 0; }
[dir="rtl"] .prod-block-text li::before { left: auto; right: 4px; }

/* ===== Contact ===== */
.contact-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 50px; }
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.contact-card { background: var(--light); border-radius: var(--radius); padding: 30px; transition: all .3s; }
.contact-card:hover { background: #fff; box-shadow: 0 12px 34px rgba(0,0,0,0.1); }
.contact-card .ico { width: 52px; height: 52px; border-radius: 50%; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 16px; }
.contact-card span { display: block; font-size: 12px; color: var(--gray-light); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }
.contact-card a, .contact-card p { font-size: 16px; font-weight: 700; color: var(--dark); word-break: break-all; }
.contact-card a:hover { color: var(--red); }
.contact-card.full { grid-column: 1 / -1; }
.contact-form-wrap { background: var(--light); border-radius: var(--radius); padding: 40px; }
.contact-form-wrap h2 { font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.contact-form-wrap > p { color: var(--gray); font-size: 14px; margin-bottom: 24px; }

/* ===== Forms ===== */
.quote-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.quote-form input, .quote-form textarea {
  width: 100%; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--dark); transition: border .2s;
}
.quote-form input:focus, .quote-form textarea:focus { outline: none; border-color: var(--red); }
.quote-form textarea { margin-bottom: 14px; resize: vertical; }
.form-ok { margin-top: 12px; color: #16a34a; font-weight: 700; font-size: 14px; }

/* ===== Footer：顶部右侧社交圆钮 + 红线 + 下三栏(左栏顶部为品牌标头) ===== */
.site-footer { background: var(--dark); color: rgba(255,255,255,0.75); border-top: 1px solid rgba(255,255,255,0.16); }
.footer-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; padding: 54px 24px 22px; }
.footer-top .footer-brand-title { margin: 0; padding: 0; color: #fff; font-size: clamp(24px, 2.4vw, 30px); font-weight: 800; line-height: 1.2; letter-spacing: 1.2px; text-align: left; overflow-wrap: anywhere; }
[dir="rtl"] .footer-top .footer-brand-title { text-align: right; letter-spacing: 0.6px; }
.footer-rule { height: 2px; background: var(--red); }
.footer-grid { display: grid; grid-template-columns: 1fr 1fr 1.06fr; gap: 0 96px; padding: 56px 24px 64px; align-items: start; }
.footer-col h4 { color: #fff; font-size: 16px; font-weight: 800; margin-bottom: 26px; position: relative; padding: 6px 0 12px; letter-spacing: 0.5px; }
.footer-col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--red); }
[dir="rtl"] .footer-col h4::after { left: auto; right: 0; }
.footer-brand p { font-size: 14px; margin: 0 0 16px; line-height: 1.8; }
.footer-contact li { position: relative; padding: 11px 0 11px 15px; font-size: 14px; }
.footer-contact li::before { content: ""; position: absolute; left: 0; top: 20px; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }
[dir="rtl"] .footer-contact li { padding: 11px 15px 11px 0; }
[dir="rtl"] .footer-contact li::before { left: auto; right: 0; }
.footer-contact a { color: rgba(255,255,255,0.75); }
.footer-contact a:hover { color: var(--red); }
.footer-social { display: flex; flex-wrap: nowrap; gap: 10px; margin: 0; }
.footer-social a { width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; transition: transform .2s, filter .2s, background .2s, border-color .2s; }
.footer-social a:hover { color: #fff; transform: translateY(-2px); filter: brightness(1.18); }
.footer-social .fs-fb { background: #1877F2; border-color: #1877F2; }
.footer-social .fs-in { background: #0A66C2; border-color: #0A66C2; }
.footer-social .fs-x { background: #14171A; border-color: rgba(255,255,255,0.42); }
.footer-social .fs-tb { background: #36465D; border-color: #36465D; }
.footer-social .fs-pi { background: #E60023; border-color: #E60023; }
.footer-links li { position: relative; padding-left: 15px; margin-bottom: 14px; }
.footer-links li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--red); font-size: 12px; line-height: 1.9; }
[dir="rtl"] .footer-links li { padding-left: 0; padding-right: 15px; }
[dir="rtl"] .footer-links li::before { left: auto; right: 0; }
.footer-links a { font-size: 14px; color: rgba(255,255,255,0.7); }
.footer-links a:hover { color: var(--red); }
.footer-quote { background: transparent; border-radius: 0; padding: 0; }
.footer-quote h4 { margin-bottom: 22px; padding-top: 0; }
.footer-quote .quote-form input, .footer-quote .quote-form textarea { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.15); color: #fff; }
.footer-quote .quote-form input::placeholder, .footer-quote .quote-form textarea::placeholder { color: rgba(255,255,255,0.5); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding: 20px 0; text-align: center; font-size: 13px; color: rgba(255,255,255,0.45); }

/* ===== Floating bar ===== */
.float-bar {
  position: fixed; right: 0; top: 40%; transform: translateY(-50%); z-index: 900;
  background: var(--dark); border-radius: 12px 0 0 12px; overflow: hidden; box-shadow: -4px 4px 16px rgba(0,0,0,0.2);
}
[dir="rtl"] .float-bar { right: auto; left: 0; border-radius: 0 12px 12px 0; box-shadow: 4px 4px 16px rgba(0,0,0,0.2); }
.float-bar a { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; color: #fff; font-size: 20px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.float-bar a:hover { background: var(--red); }
.float-bar a:last-child { border-bottom: none; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  .footer-grid { gap: 0 64px; }
  .footer-top { padding: 44px 24px 18px; }
  .footer-top .footer-brand-title { font-size: clamp(22px, 2.6vw, 27px); }
  .footer-social { gap: 6px; }
  .footer-social a { width: 34px; height: 34px; font-size: 12.5px; }
}
@media (max-width: 1100px) {
  .footer-top { flex-direction: column; align-items: flex-start; gap: 18px; padding: 38px 24px 16px; }
  .footer-top .footer-brand-title { font-size: clamp(22px, 4.4vw, 27px); }
  .footer-top .footer-social { margin-left: auto; }
  [dir="rtl"] .footer-top .footer-social { margin-left: 0; margin-right: auto; }
  .footer-social { flex-wrap: wrap; gap: 8px; }
  .footer-social a { width: 38px; height: 38px; font-size: 13px; }
}
@media (max-width: 992px) {
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .ind-grid { grid-template-columns: repeat(2, 1fr); }
  .about-wrap, .contact-grid, .prod-block { grid-template-columns: 1fr; gap: 32px; }
  .prod-block.even .prod-block-img { order: 0; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 44px 64px; }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { height: 520px; }
}
@media (max-width: 768px) {
  .topbar-left .hide-sm { display: none; }
  .main-nav {
    display: none; position: absolute; top: 76px; left: 0; right: 0; background: #fff;
    flex-direction: column; padding: 14px 20px; gap: 0; box-shadow: 0 12px 30px rgba(0,0,0,0.1);
  }
  .main-nav.open { display: flex; }
  .main-nav > li > a { padding: 13px 0; border-bottom: 1px solid #f0f0f0; }
  .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; min-width: auto; display: none; }
  .main-nav > li.open .dropdown { display: block; }
  .nav-toggle { display: block; }
  .nav-quote { margin: 12px 0; }
  .header-tools { gap: 8px; margin-inline-start: 0; }
  .btn-msg,
  .btn.btn-msg { padding: 8px 14px; font-size: 12.5px; }
  .search-box { width: 230px; }
  .hero { height: 460px; }
  .hero-content h2 { font-size: 19px; }
  .hero-thumbs { bottom: 16px; left: 20px; gap: 10px; }
  [dir="rtl"] .hero-thumbs { right: 20px; }
  .hero-thumbs .hero-thumb { width: 44px; height: 44px; }
  .prod-grid, .why-grid { grid-template-columns: 1fr; }
  .ind-grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 38px 0; }
  .footer-top { padding: 32px 24px 14px; }
  .contact-cards { grid-template-columns: 1fr; }
  .section { padding: 56px 0; }
  .float-bar { display: none; }
}


/* ===== V3 首页板块（产品系列 / 产品大类竖卡 / 服务横幅 / 全球网络 / 编号优势） ===== */
.section-white { background: #fff; }

/* 产品大类卡：白底上图下文竖版（参考 ref_product_categories）
   V4：卡宽 292px + 列间距 13.5px —— 可见区 1222px 内恰好 4×(292+13.5)=1222，
   即一屏 3 张完整卡 + 左右各半张；图区按 4:3（292×219，正方形原图 cover 裁上下各 12.5%），整卡约 292×380（≈1:1.30）。 */
.cat-card { flex-direction: column; gap: 0; flex: 0 0 292px; max-width: 292px; background: #fff; padding: 0; border-radius: 16px; box-shadow: 0 6px 22px rgba(0,0,0,0.07); overflow: hidden; }
.cat-photo { order: 0; flex: none; display: block; width: 100%; height: 219px; border: 0; border-radius: 16px 16px 0 0; background: #fff; overflow: hidden; padding: 0; }
.cat-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; padding: 0; }
.cat-info { order: 1; display: flex; flex-direction: column; flex: 1 1 auto; padding: 16px 18px 20px; gap: 12px; }
.cat-info h3 { font-size: 20px; color: var(--dark); margin: 0; line-height: 1.35; display: flex; align-items: center; min-height: 2.7em; }
.cat-info h3 a { color: inherit; text-decoration: none; }
.cat-info h3 a:hover { color: var(--red); }
.cat-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 13px; border-top: 1px solid #f0f0f0; }
.btn-sm { padding: 9px 18px; font-size: 13.5px; border-radius: 9px; }
@media (max-width: 1100px) { .cat-card { flex: 0 0 258px; max-width: 258px; } .cat-photo { height: 194px; } }
@media (max-width: 768px) { .cat-card { flex: 0 0 90vw; max-width: 90vw; } .cat-photo { height: auto; aspect-ratio: 4 / 3; } .cat-info { padding: 16px 16px 18px; } .cat-info h3 { font-size: 18px; } }


/* 编号优势（参考 ref_manufacturer 模块编号感，品牌红浅水印序号） */
.why-grid.numbered { counter-reset: whyc; }
.why-grid.numbered .why-item { counter-increment: whyc; position: relative; overflow: hidden; }
.why-grid.numbered .why-item::before { content: "0" counter(whyc); position: absolute; top: 18px; inset-inline-end: 26px; font-size: 52px; font-weight: 800; line-height: 1; color: rgba(220,43,48,0.10); pointer-events: none; z-index: 0; }
.why-grid.numbered .why-item > * { position: relative; z-index: 1; }

/* 服务横幅（参考 ref_ns_custom：深色三列服务） */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 10px; }
.svc-col {
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.10); border-radius: 18px;
  padding: 34px 30px; text-align: start; transition: all .3s;
}
.svc-col:hover { background: rgba(255,255,255,0.08); transform: translateY(-5px); border-color: rgba(220,43,48,0.6); }
.svc-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.svc-ico svg { width: 28px; height: 28px; }
.svc-code { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; color: rgba(255,255,255,0.45); margin-bottom: 8px; }
.svc-col h4 { font-size: 19px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.svc-col p { font-size: 14px; line-height: 1.75; color: rgba(255,255,255,0.72); }
.svc-apps { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 46px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.08); }
.svc-apps .app-tag { background: transparent; border-color: rgba(255,255,255,0.2); color: rgba(255,255,255,0.85); }
.svc-apps .app-tag:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: 1fr; gap: 16px; } }

/* 服务保障三栏（大桥照片通栏铺满 + 约 45% 暗色蒙层；整栏内容居中，悬停该栏整栏红底 #DC2B30 + 说明文字居中淡入展开）
   V4：单栏高度由 430px 提到 560px（整块更饱满），图标/标题/正文一律水平居中并整体垂直居中 */
.section-guarantee { position: relative; background: #14161a url(../images/bridge-guarantee.jpg) center center / cover no-repeat; overflow: hidden; }
.sg-mask { position: absolute; inset: 0; background: rgba(17,19,23,0.45); pointer-events: none; }
.sg-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); max-width: 1440px; margin: 0 auto; }
.sg-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 560px; padding: 56px 40px; background: transparent; cursor: default;
  transition: background-color .35s ease;
}
.sg-ico { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin: 0 auto 26px; color: #fff; }
.sg-ico svg { display: block; width: 54px; height: 54px; }
.sg-title { margin: 0; font-size: 25px; font-weight: 800; line-height: 1.35; letter-spacing: .02em; color: #fff; text-align: center; }
.sg-body { max-height: 0; opacity: 0; overflow: hidden; transform: translateY(8px); transition: max-height .45s ease, opacity .35s ease, transform .35s ease; width: 100%; }
.sg-body p { margin: 0 auto; padding-top: 20px; max-width: 340px; font-size: 15px; line-height: 1.9; color: rgba(255,255,255,0.94); text-align: center; }
.sg-col.is-open,
.sg-col:focus-visible { background: #DC2B30; }
.sg-col.is-open .sg-body,
.sg-col:focus-visible .sg-body { max-height: 420px; opacity: 1; transform: none; }
@media (hover: hover) {
  .sg-col:hover { background: #DC2B30; }
  .sg-col:hover .sg-body { max-height: 420px; opacity: 1; transform: none; }
}
@media (max-width: 1100px) {
  .sg-col { min-height: 470px; padding: 48px 26px; }
  .sg-ico { width: 60px; height: 60px; margin-bottom: 22px; }
  .sg-ico svg { width: 46px; height: 46px; }
  .sg-title { font-size: 21px; }
  .sg-body p { font-size: 14.5px; max-width: 300px; }
}
@media (max-width: 768px) {
  .section-guarantee { background-position: center top; }
  .sg-grid { grid-template-columns: 1fr; }
  .sg-col { min-height: 0; padding: 34px 24px; justify-content: flex-start; cursor: pointer; }
  .sg-ico { width: 48px; height: 48px; margin-bottom: 16px; }
  .sg-ico svg { width: 38px; height: 38px; }
  .sg-title { font-size: 19px; }
  .sg-body p { font-size: 14px; padding-top: 12px; max-width: 100%; }
}


/* ===== Hero 全屏首屏（V3：100vh/svh 铺满，保留缩略图与浮文） ===== */
.hero { height: 100vh; height: 100svh; min-height: 660px; }
.hero-slide { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* 明亮版：hero-content 卡片内距在 Hero Banner 主规则中定义，不再单独覆盖 */
@media (max-width: 1100px) {
  .hero { height: 100vh; height: 100svh; min-height: 620px; }
}
@media (max-width: 768px) {
  .hero { height: 100vh; height: 100svh; min-height: 560px; }
  [dir="rtl"] .hero-content { left: auto; right: 6%; }
}


/* ===== V3.3 首页页头与内页统一：白底顶部信息栏 + 白底主导航（页头回归文档流） =====
   历史：V3.2 期间首页使用「深色半透明悬浮页头」（position:fixed 覆盖在 Hero 大图上，
   视觉上看不到顶部信息栏）。现改为与内页完全同一种页头：.topbar + .site-header
   直接位于 <body> 下、Hero 之前，回归正常文档流；顶部信息栏随页面滚出，
   主导航沿用内页 .site-header 的 sticky 吸顶。
   因此首页不再需要任何专属页头样式（旧悬浮 / 深色 / is-stuck 规则整块移除），
   页头的外观与尺寸由与内页完全相同的基础规则决定。 */
/* 类目导航条：滚动到主导航下沿后吸顶跟随（吸顶偏移 = 主导航实际高度，见 --hdr-h），
   与内页吸顶导航行为一致；未取到变量时回退 76px（桌面四语主导航高度）。 */
body.page-index .cat-nav {
  position: sticky;
  top: var(--hdr-h, 76px);
}
/* ===== 锚点滚动补偿：吸顶导航（site-chrome + 8 类目 cat-nav 双排）不遮挡区块标题 ===== */
/* 四语共用 style.css，通用选择器覆盖所有潜在锚点容器（.section / .prod-block / 带 id 区块），
   保证锚点跳转与吸顶导航下滚动到区块时标题不被遮挡，不改变任何视觉布局。 */
.section[id],
.prod-block[id],
[id^="product-"],
[id^="cat-"],
[id^="about"],
[id^="service"],
[id^="contact"],
[id^="hero"] {
  scroll-margin-top: 190px;
}
/* 兜底：任意带 id 的容器若被当作锚点目标，同样获得补偿（scroll-margin 不影响静态布局） */
[id] {
  scroll-margin-top: 190px;
}
/* 移动端吸顶导航更矮（单排/折叠态），改用较小补偿避免标题距视口顶部过远 */
@media (max-width: 768px) {
  .section[id],
  .prod-block[id],
  [id^="product-"],
  [id^="cat-"],
  [id^="about"],
  [id^="service"],
  [id^="contact"],
  [id^="hero"],
  [id] {
    scroll-margin-top: 120px;
  }
}

/* ===== 实力介绍（原「关于我们」+「为什么选择我们」合并区块） ===== */
.section-strength{position:relative;background:#212529;color:#fff;padding:84px 0;overflow:hidden;}
.strength-bg{position:absolute;inset:0;background-size:cover;background-position:center center;background-repeat:no-repeat;}
.strength-mask{position:absolute;inset:0;background:rgba(0,0,0,.65);}
.strength-wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:60px;align-items:center;}
.strength-stats{display:flex;flex-direction:column;gap:30px;}
.strength-stat{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:18px;row-gap:10px;align-items:center;}
[dir="rtl"] .strength-stat{text-align:right;}
.st-ico{grid-column:1;grid-row:1;display:inline-flex;align-items:center;justify-content:center;flex:0 0 46px;width:46px;height:46px;border-radius:13px;background:rgba(220,43,48,.16);border:1px solid rgba(220,43,48,.42);color:#ff5a5f;box-shadow:0 6px 18px rgba(0,0,0,.28);}
.st-ico svg{width:25px;height:25px;display:block;}
.st-val{grid-column:2;grid-row:1;justify-self:start;display:inline-flex;align-items:baseline;font-size:64px;font-weight:800;line-height:1;color:var(--red);letter-spacing:.5px;text-shadow:0 6px 24px rgba(220,43,48,.35);}
.st-num{font-variant-numeric:tabular-nums;}
.st-suf{font-size:52px;font-weight:800;margin-left:4px;}
.st-label{grid-column:2;grid-row:2;justify-self:start;font-size:15px;font-weight:600;letter-spacing:1px;color:#fff;}
.strength-right{display:flex;flex-direction:column;gap:22px;min-width:0;}
.strength-title{font-size:clamp(23px,2.35vw,33px);font-weight:800;line-height:1.35;letter-spacing:.5px;color:#fff;margin:0;}
.strength-body p{font-size:16px;line-height:2;color:rgba(255,255,255,.88);margin:0 0 16px;text-align:justify;}
[dir="rtl"] .strength-body p{text-align:right;}
.strength-body p:last-child{margin-bottom:0;}
.strength-video{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;background:#000;border:1px solid rgba(255,255,255,.18);overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,.35);}
.strength-video-el{display:block;width:100%;height:100%;object-fit:cover;background:#000;cursor:pointer;}
.strength-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.4);cursor:pointer;z-index:2;transition:opacity .28s ease,transform .28s ease;}
.strength-play::after{content:"";display:block;margin-left:5px;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #dc2b30;}
[dir="rtl"] .strength-play::after{margin-left:0;margin-right:5px;border-width:13px 21px 13px 0;border-color:transparent #dc2b30 transparent transparent;}
.strength-play:hover{transform:translate(-50%,-50%) scale(1.06);}
.strength-play:focus-visible{outline:3px solid rgba(220,43,48,.85);outline-offset:3px;}
.strength-video.is-playing .strength-play{opacity:0;pointer-events:none;}
@media(max-width:768px){.strength-play{width:56px;height:56px;}}

@media(max-width:1100px){
  .strength-wrap{grid-template-columns:1fr;gap:40px;}
  .strength-stats{display:grid;grid-template-columns:1fr 1fr;gap:26px 24px;}
  .strength-stat{column-gap:14px;}
  .strength-title{font-size:27px;}
  .st-val{font-size:48px;}
  .st-suf{font-size:39px;}
  .st-ico{flex:0 0 40px;width:40px;height:40px;border-radius:11px;}
  .st-ico svg{width:22px;height:22px;}
}
@media(max-width:768px){
  .section-strength{padding:56px 0;}
  .strength-stats{grid-template-columns:1fr;gap:20px;}
  .strength-stat{column-gap:11px;row-gap:8px;}
  .strength-title{font-size:21px;line-height:1.45;}
  .st-val{font-size:38px;}
  .st-suf{font-size:31px;}
  .st-label{font-size:13.5px;letter-spacing:.6px;}
  .st-ico{flex:0 0 34px;width:34px;height:34px;border-radius:10px;}
  .st-ico svg{width:19px;height:19px;}
  .strength-body p{font-size:14.5px;line-height:1.85;}
  .strength-play{width:56px;height:56px;}
  .strength-play::after{border-width:11px 0 11px 18px;}
}


/* ===== 首页「厂房车间」展示区（替换原「核心优势」6 宫格） ===== */
.section-factory{background:#ffffff;padding:88px 0;overflow:hidden;}
.factory-head{display:flex;flex-direction:column;align-items:center;gap:20px;}
.factory-rule{display:block;width:56px;height:3px;border-radius:2px;background:#dc2b30;}
.factory-title{margin:0;font-size:clamp(36px,4.2vw,62px);font-weight:900;line-height:1.15;letter-spacing:.08em;color:#111111;text-align:center;}
.factory-text{max-width:880px;margin:26px auto 0;font-size:17px;line-height:1.9;color:#5a5f66;text-align:center;}
.factory-actions{display:flex;justify-content:center;margin-top:34px;}
.btn-factory{display:inline-flex;align-items:center;gap:10px;padding:13px 40px;border:2px solid #dc2b30;border-radius:50px;background:#dc2b30;color:#fff;font-size:15px;font-weight:700;letter-spacing:.5px;text-decoration:none;transition:all .25s;}
.btn-factory .arrow{display:inline-block;transition:transform .25s;}
.btn-factory:hover{background:#b21f24;border-color:#b21f24;transform:translateY(-2px);box-shadow:0 10px 24px rgba(220,43,48,.32);}
.btn-factory:hover .arrow{transform:translateX(4px);}
[dir="rtl"] .btn-factory .arrow{transform:scaleX(-1);}
[dir="rtl"] .btn-factory:hover .arrow{transform:scaleX(-1) translateX(-4px);}
.factory-strip{width:100%;margin-top:52px;}
.factory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.factory-photo{position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#f2f2f2;box-shadow:0 4px 14px rgba(0,0,0,.06);transition:box-shadow .45s ease;}
.factory-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease;}
@media(hover:hover){
  .factory-photo:hover{box-shadow:0 12px 30px rgba(0,0,0,.18);}
  .factory-photo:hover img{transform:scale(1.06);}
}
@media(max-width:1100px){
  .section-factory{padding:72px 0;}
  .factory-strip{margin-top:44px;}
  .factory-grid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
  .section-factory{padding:56px 0;}
  .factory-head{gap:15px;}
  .factory-title{font-size:34px;}
  .factory-text{margin-top:20px;font-size:15.5px;line-height:1.85;}
  .factory-actions{margin-top:26px;}
  .btn-factory{padding:11px 30px;font-size:14px;}
  .factory-strip{margin-top:32px;}
  .factory-grid{gap:12px;}
}


/* ===== 首页「资格证书」展示区（替换原「应用行业」6 卡片） ===== */
.section-cert{--cert-per:5;--cert-gap:20px;--cert-w:248px;background:#f5f6f7;padding:88px 0;overflow:hidden;}
.cert-head{display:flex;flex-direction:column;align-items:center;gap:20px;}
.cert-rule{display:block;width:56px;height:3px;border-radius:2px;background:#dc2b30;}
.cert-title{margin:0;font-size:clamp(36px,4.2vw,62px);font-weight:900;line-height:1.15;letter-spacing:.08em;color:#111111;text-align:center;}
.cert-carousel{position:relative;width:92%;max-width:none;margin:52px auto 0;}
.cert-viewport{width:100%;overflow:hidden;touch-action:pan-y;cursor:grab;-webkit-user-select:none;user-select:none;}
.cert-viewport.is-dragging{cursor:grabbing;}
.cert-track{position:relative;display:flex;flex-wrap:nowrap;align-items:flex-start;will-change:transform;}
.cert-card{flex:0 0 auto;width:var(--cert-w);margin-inline-end:var(--cert-gap);background:#ffffff;border:1px solid #e7e9ec;border-radius:10px;box-shadow:0 4px 14px rgba(0,0,0,.06);overflow:hidden;transition:box-shadow .35s ease;}
.cert-card img{display:block;width:100%;height:auto;aspect-ratio:1000/1414;object-fit:contain;background:#ffffff;}
@media(hover:hover){
  .cert-card:hover{box-shadow:0 12px 28px rgba(0,0,0,.16);}
}
.cert-nav{position:absolute;top:50%;z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-top:-24px;padding:0;border:2px solid #dc2b30;border-radius:50%;background:#ffffff;color:#dc2b30;cursor:pointer;transition:background .25s ease,color .25s ease,box-shadow .25s ease;}
.cert-nav svg{display:block;width:20px;height:20px;}
.cert-nav:hover{background:#dc2b30;color:#ffffff;box-shadow:0 8px 20px rgba(220,43,48,.28);}
.cert-prev{inset-inline-start:18px;}
.cert-next{inset-inline-end:18px;}
[dir="rtl"] .cert-nav svg{transform:scaleX(-1);}
@media(max-width:1100px){
  .section-cert{--cert-per:4;--cert-gap:16px;padding:72px 0;}
  .cert-carousel{margin-top:44px;}
  .cert-card{width:calc((100% - 3 * var(--cert-gap)) / 4);}
  .cert-nav{width:44px;height:44px;margin-top:-22px;}
}
@media(max-width:768px){
  .section-cert{--cert-per:2;--cert-gap:12px;padding:56px 0;}
  .cert-head{gap:15px;}
  .cert-title{font-size:34px;}
  .cert-carousel{margin-top:32px;max-width:620px;}
  .cert-card{width:calc((100% - var(--cert-gap)) / 2);}
  .cert-nav{width:38px;height:38px;margin-top:-19px;}
  .cert-nav svg{width:16px;height:16px;}
  .cert-prev{inset-inline-start:8px;}
  .cert-next{inset-inline-end:8px;}
}

/* ===== 实力介绍视频：自定义控制条（进度 / 时间 / 音量） ===== */
.strength-video .svc{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:24px 12px 9px;background:linear-gradient(to top,rgba(33,37,41,.86),rgba(33,37,41,.46) 52%,rgba(33,37,41,0));opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);transition:opacity .35s ease,transform .35s ease,visibility .35s ease;direction:inherit;}
.strength-video.is-idle .svc{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);}
.strength-video .svc-bar{position:relative;display:block;height:34px;margin:-12px 0 0;cursor:pointer;touch-action:none;}
.strength-video .svc-bar-track{position:absolute;left:0;right:0;top:50%;height:5px;margin-top:-2.5px;border-radius:3px;background:rgba(255,255,255,.32);overflow:hidden;}
.strength-video .svc-fill{position:absolute;top:0;bottom:0;left:0;width:0;border-radius:3px;background:#dc2b30;}
[dir="rtl"] .strength-video .svc-fill{left:auto;right:0;}
.strength-video .svc-knob{position:absolute;top:50%;left:0;width:13px;height:13px;margin-top:-6.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #dc2b30,0 2px 6px rgba(0,0,0,.45);transform:translateX(-50%);transition:transform .18s ease;pointer-events:none;}
.strength-video .svc-bar:hover .svc-knob,.strength-video .svc-bar.is-drag .svc-knob{transform:translateX(-50%) scale(1.18);}
.strength-video .svc-tip{position:absolute;bottom:30px;left:0;transform:translateX(-50%);padding:2px 8px;border-radius:6px;background:rgba(33,37,41,.94);color:#fff;font-size:12px;line-height:18px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .18s ease;}
.strength-video .svc-tip.is-on{opacity:1;}
.strength-video .svc-row{display:flex;align-items:center;justify-content:space-between;gap:10px;height:34px;margin-top:2px;}
.strength-video .svc-time{color:#fff;font-size:12.5px;letter-spacing:.02em;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.65);}
.strength-video .svc-vol{display:flex;align-items:center;gap:6px;}
.strength-video .svc-vol-btn{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s ease;}
.strength-video .svc-vol-btn:hover{background:rgba(255,255,255,.15);}
.strength-video .svc-vol-btn:focus-visible{outline:2px solid #dc2b30;outline-offset:2px;}
.strength-video .svc-vol-ico{width:20px;height:20px;display:block;background:transparent;background-color:transparent;border:0;border-radius:0;margin:0;padding:0;flex:0 0 auto;box-shadow:none;overflow:visible;}
.strength-video .svc-vol-ico path{fill:none;stroke:#fff;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.strength-video .svc-vol-ico-spk{fill:#fff;stroke:#fff;stroke-width:1.1;}
.strength-video .svc-vol-ico-x{display:none;}
.strength-video .svc-vol-btn.is-muted .svc-vol-ico-w1,.strength-video .svc-vol-btn.is-muted .svc-vol-ico-w2{display:none;}
.strength-video .svc-vol-btn.is-muted .svc-vol-ico-x{display:block;}
.strength-video .svc-vol-btn.is-low .svc-vol-ico-w2{display:none;}
.strength-video .svc-vol-slider{position:relative;display:block;width:76px;height:34px;cursor:pointer;touch-action:none;}
.strength-video .svc-vol-track{position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden;}
.strength-video .svc-vol-fill{position:absolute;top:0;bottom:0;left:0;width:100%;border-radius:2px;background:#dc2b30;}
[dir="rtl"] .strength-video .svc-vol-fill{left:auto;right:0;}
.strength-video .svc-vol-knob{position:absolute;top:50%;left:100%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #dc2b30;transform:translateX(-50%);transition:transform .18s ease;pointer-events:none;}
.strength-video .svc-vol-slider:hover .svc-vol-knob,.strength-video .svc-vol-slider.is-drag .svc-vol-knob{transform:translateX(-50%) scale(1.2);}
@media(max-width:768px){
  .strength-video .svc{padding:20px 10px 7px;}
  .strength-video .svc-time{font-size:12px;}
  .strength-video .svc-vol-slider{width:64px;}
}

/* ===== 首页「搜索寻找」区块（原地改造原「定制与服务」，沿用深灰黑 #212529 + 红色强调） ===== */
.find-banner{padding:92px 0;}
.find-banner .section-head.find-head{
  text-align:center;max-width:none;margin:0 0 44px;padding-bottom:0;
}
.find-banner .section-head.find-head::after{display:none;}
.find-banner .find-tag{
  display:block;color:#dc2b30;font-size:clamp(22px,2.05vw,30px);font-weight:800;
  letter-spacing:1.5px;text-transform:uppercase;line-height:1.25;margin:0 0 16px;
}
.find-banner .find-lead{
  margin:0 auto;max-width:1020px;font-size:16.5px;line-height:1.95;color:rgba(255,255,255,.78);
}
.find-grid{display:grid;grid-template-columns:1.55fr 1fr;align-items:stretch;margin-top:0;}
.find-col{min-width:0;}
.find-col--search{padding-inline-end:56px;}
.find-col--custom{
  padding-inline-start:56px;border-inline-start:1px solid rgba(255,255,255,.16);
  display:flex;flex-direction:column;justify-content:center;
}
.find-kicker{
  display:block;font-size:14px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;
  color:#dc2b30;margin-bottom:14px;
}
.find-title{margin:0 0 14px;font-size:clamp(22px,2vw,30px);font-weight:800;line-height:1.4;color:#fff;}
.find-desc{margin:0 0 28px;font-size:16.5px;line-height:1.95;color:rgba(255,255,255,.75);}
.find-form{display:flex;align-items:stretch;gap:14px;margin:0;}
.find-input{
  flex:1 1 auto;min-width:0;height:60px;padding:0 26px;border-radius:50px;font-family:inherit;font-size:16.5px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;outline:none;
  transition:border-color .25s,background .25s;
}
.find-input::placeholder{color:rgba(255,255,255,.5);}
.find-input:focus{border-color:#dc2b30;background:rgba(255,255,255,.1);}
.find-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;}
.find-btn{
  flex:0 0 auto;height:60px;padding:0 48px;border:0;border-radius:50px;background:#dc2b30;color:#fff;
  font-family:inherit;font-size:16.5px;font-weight:800;letter-spacing:.6px;cursor:pointer;transition:all .25s;
}
.find-btn:hover{background:#b21f24;transform:translateY(-2px);box-shadow:0 10px 24px rgba(220,43,48,.3);}
.find-btn:focus-visible{outline:2px solid #fff;outline-offset:2px;}
.find-cta{
  display:inline-flex;align-items:center;gap:10px;align-self:flex-start;height:60px;padding:0 40px;border-radius:50px;
  border:2px solid rgba(255,255,255,.55);color:#fff;font-size:16.5px;font-weight:800;letter-spacing:.4px;transition:all .25s;
}
.find-cta .arw{display:inline-block;transition:transform .25s;}
.find-cta:hover{background:#dc2b30;border-color:#dc2b30;transform:translateY(-2px);box-shadow:0 10px 24px rgba(220,43,48,.3);}
.find-cta:hover .arw{transform:translateX(4px);}
[dir="rtl"] .find-cta .arw{transform:scaleX(-1);}
[dir="rtl"] .find-cta:hover .arw{transform:scaleX(-1) translateX(-4px);}
@media (max-width:1100px){
  .find-grid{grid-template-columns:minmax(0,1fr);}
  .find-col--search{padding-inline-end:0;padding-bottom:42px;}
  .find-col--custom{
    padding-inline-start:0;padding-top:42px;
    border-inline-start:0;border-top:1px solid rgba(255,255,255,.16);
  }
}
@media (max-width:768px){
  .find-banner{padding:60px 0;}
  .find-banner .section-head.find-head{margin-bottom:34px;}
  .find-banner .find-tag{font-size:22px;letter-spacing:1px;}
  .find-banner .find-lead{font-size:15.5px;line-height:1.9;}
  .find-title{font-size:21px;}
  .find-desc{font-size:15.5px;margin-bottom:22px;}
  .find-form{flex-wrap:wrap;gap:12px;}
  .find-input{flex:1 1 100%;height:56px;padding:0 20px;font-size:16px;}
  .find-btn{flex:1 1 100%;height:56px;padding:0;font-size:16px;}
  .find-cta{width:100%;justify-content:center;height:56px;padding:0 20px;font-size:16px;}
}
/* 修复：窄屏（长词，如俄语）下 about 区块被 min-content 撑破导致的横向溢出 */
@media (max-width:992px){
  .about-wrap{grid-template-columns:minmax(0,1fr);}
  .about-text,.about-imgs{min-width:0;}
  .about-text h2,.about-text p{overflow-wrap:anywhere;}
}

/* ===== V4 首页悬浮功能条（回到顶部 / WhatsApp / 邮件 / 电话 / 滑到最下方 / 收起）===== */
.float-tools{position:fixed;inset-inline-end:0;top:50%;transform:translateY(-50%);z-index:950;}
.ft-bar{background:var(--dark);border-start-start-radius:12px;border-end-start-radius:12px;box-shadow:0 10px 26px rgba(0,0,0,.32);}
.ft-stack{display:flex;flex-direction:column;}
.ft-item{position:relative;display:block;}
.ft-item + .ft-item > .ft-btn{border-top:1px solid rgba(255,255,255,.13);}
.ft-btn{
  display:flex;align-items:center;justify-content:center;width:56px;height:56px;padding:0;margin:0;
  background:transparent;border:0;border-radius:0;color:#fff;font:inherit;cursor:pointer;
  transition:background .2s ease,color .2s ease;
}
.ft-btn svg{display:block;width:22px;height:22px;}
.ft-ico{display:inline-flex;align-items:center;justify-content:center;}
/* 收起/展开箭头固定朝左，不随状态变化；阿语 RTL 站镜像为朝右 */
.ft-ico--arrow svg{transition:none;}
[dir="rtl"] .ft-ico--arrow svg{transform:scaleX(-1);}
.float-tools.is-collapsed .ft-stack{display:none;}
.ft-stack > .ft-item:first-child > .ft-btn{border-start-start-radius:12px;}
.ft-item--toggle > .ft-btn{border-end-start-radius:12px;background:rgba(0,0,0,.15);}
body:not(.is-touch) .ft-item:hover > .ft-btn,
body:not(.is-touch) .ft-item:focus-within > .ft-btn,
body.is-touch .ft-item.is-open > .ft-btn{background:var(--red);color:#fff;}
.ft-btn:focus-visible{outline:2px solid #fff;outline-offset:-3px;}
/* 信息条：桌面端悬停向外滑出（深灰黑底 + 品牌红强调） */
.ft-tip{
  position:absolute;top:50%;inset-inline-end:100%;margin-inline-end:10px;
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--dark);color:#fff;font-size:14px;font-weight:600;line-height:1.2;
  padding:12px 16px;border-radius:8px;border-inline-start:3px solid var(--red);
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(-50%) translateX(14px);
  transition:opacity .2s ease,transform .26s ease,visibility .2s ease;
}
[dir="rtl"] .ft-tip{transform:translateY(-50%) translateX(-14px);}
.ft-tip b{color:var(--red);font-weight:800;}
.ft-tip::after{
  content:"";position:absolute;top:50%;inset-inline-start:100%;transform:translateY(-50%);
  width:0;height:0;border:6px solid transparent;border-inline-start-color:var(--dark);
}
body:not(.is-touch) .ft-item:hover > .ft-tip,
body:not(.is-touch) .ft-item:focus-within > .ft-tip,
body.is-touch .ft-item.is-open > .ft-tip{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) translateX(0);
}
@media (hover:none){
  .ft-item:hover > .ft-tip{opacity:0;visibility:hidden;pointer-events:none;}
}
@media (max-width:768px){
  .ft-btn{width:48px;height:48px;}
  .ft-btn svg{width:20px;height:20px;}
  .ft-tip{font-size:13px;padding:10px 13px;margin-inline-end:8px;}
  .ft-tip::after{border-width:5px;}
}
@media (max-width:768px) and (max-height:700px){
  .ft-btn{width:44px;height:44px;}
  .ft-btn svg{width:18px;height:18px;}
}

/* ===== 页脚：长文本换行保护 ===== */
.footer-contact li { overflow-wrap: anywhere; }


/* ===== 首页产品中心：鼠标拖拽态（抓取光标 / 拖拽中禁用过渡与选中） ===== */
.cat-viewport { cursor: grab; -webkit-user-select: none; user-select: none; }
.cat-viewport.is-dragging { cursor: grabbing; }
.cat-carousel.is-dragging .cat-card { transition: none; }
.cat-viewport.is-dragging .cat-card { transition: none; }
.cat-photo img { -webkit-user-drag: none; }

/* ===== 产品中心页 V3：左栏 22% 类目导航 + 右栏 78% 产品卡网格 ===== */
.prod-section { padding: 52px 0 88px; }
.prod-layout { display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 78fr); gap: 34px; align-items: start; }
.prod-side { min-width: 0; }
.prod-main { min-width: 0; }
.side-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  margin-bottom: 24px; box-shadow: 0 2px 10px rgba(0,0,0,.03);
}
.side-card:last-child { margin-bottom: 0; }
.side-title {
  background: var(--red); color: #fff; font-size: 16px; font-weight: 800;
  letter-spacing: .4px; padding: 12px 18px; margin: 0; line-height: 1.5;
}
.cat-list { padding: 6px 0; }
.cat-node { border-bottom: 1px solid #f0f0f0; }
.cat-node:last-child { border-bottom: 0; }
.cat-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; background: none; border: 0; font-family: inherit; font-size: 14.5px;
  font-weight: 700; color: var(--dark); text-align: start; cursor: pointer; line-height: 1.5;
  transition: background .2s, color .2s;
}
.cat-head:hover { color: var(--red); }
.cat-head::after {
  content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .25s;
}
.cat-node.open > .cat-head::after { transform: rotate(-135deg); }
.cat-node.active > .cat-head { background: var(--red); color: #fff; }
.cat-subs { max-height: 0; overflow: hidden; transition: max-height .3s ease; background: #fafafa; }
.cat-node.open > .cat-subs { max-height: 560px; }
.cat-sub {
  display: block; padding: 9px 16px 9px 28px; font-size: 13.5px; color: var(--gray);
  border-inline-start: 2px solid transparent; line-height: 1.6; transition: all .2s;
}
.cat-sub:hover { color: var(--red); background: #fff; }
.side-contact { padding: 14px 18px 18px; }
.side-contact li {
  display: flex; align-items: flex-start; gap: 10px; padding: 7px 0;
  font-size: 13.5px; color: #4a4a4a; line-height: 1.7;
}
.side-contact .sc-ico { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 4px; color: var(--red); }
.side-contact .sc-ico svg { width: 18px; height: 18px; display: block; }
.side-contact a { color: #4a4a4a; word-break: break-word; }
.side-contact a:hover { color: var(--red); }
.pcard-group { scroll-margin-top: 130px; }
.pcard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 26px; }
.pcard {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden; transition: box-shadow .3s, transform .3s;
}
.pcard:hover { box-shadow: 0 14px 34px rgba(0,0,0,.12); transform: translateY(-4px); }
.pcard-img { display: block; aspect-ratio: 4 / 3; background: #f7f7f7; overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s; }
.pcard:hover .pcard-img img { transform: scale(1.04); }
.pcard-title {
  margin: 0; padding: 16px 18px; font-size: 14.5px; font-weight: 700; line-height: 1.5;
  color: var(--dark); text-align: start; min-height: 3em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pcard-btn {
  margin: auto 18px 18px; margin-top: auto; padding: 11px 16px; background: var(--red);
  color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px; text-align: center;
  border-radius: 8px; transition: background .25s, box-shadow .25s;
}
.pcard-btn:hover { background: var(--red-dark); color: #fff; box-shadow: 0 8px 20px rgba(220,43,48,.25); }
@media (max-width: 1100px) {
  .prod-layout { grid-template-columns: minmax(0, 26fr) minmax(0, 74fr); gap: 26px; }
  .pcard-grid { gap: 24px 20px; }
}
@media (max-width: 900px) {
  .prod-layout { grid-template-columns: 1fr; gap: 24px; }
  .pcard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .cat-node.open > .cat-subs { max-height: none; }
}
@media (max-width: 600px) {
  .pcard-grid { grid-template-columns: 1fr; }
  .pcard-title { font-size: 14px; min-height: 0; }
}

/* ===== V6：产品页左栏二级子项选中态 ===== */
.cat-sub.active { color: var(--red); background: #fff; border-inline-start-color: var(--red); font-weight: 700; }

/* ===== V6：右栏上方产品横幅 ===== */
.prod-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; margin: 0 0 24px; background: #fafafa;
  border-inline-start: 4px solid var(--red); border-radius: 6px;
}
.prod-bar-title { font-size: 17px; font-weight: 700; color: var(--dark); margin: 0; line-height: 1.5; }
.prod-bar-count {
  flex: 0 0 auto; padding: 4px 12px; border-radius: 999px; background: var(--red); color: #fff;
  font-size: 12.5px; font-weight: 700; line-height: 1.7; white-space: nowrap;
}
@media (max-width: 600px) {
  .prod-bar { flex-wrap: wrap; gap: 8px; padding: 10px 14px; }
  .prod-bar-title { font-size: 15px; }
}

/* ===== V19：产品页双窗格（左类目 / 右列表各自独立滚动；页面本身仍可正常滚动、页脚可达） ===== */
/* 窗格高 = 视口高 − 吸顶页头高（--prod-hdr-h 由内联脚本写入实际页头高度，缺省 76px） − 产品区上下内边距 48px */
@media (min-width: 901px) {
  .prod-section { padding: 24px 0; }
  .prod-layout { height: calc(100vh - var(--prod-hdr-h, 76px) - 48px); align-items: stretch; }
  .prod-side, .prod-main {
    height: 100%; position: relative;
    overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scroll-behavior: auto;
  }
  /* 右栏横幅在窗格内吸顶：实色背景 + 抬高层级，避免卡片透出 */
  .prod-bar { position: sticky; top: 0; z-index: 5; background: #fafafa; }
  /* 双窗格下锚点定位改由脚本控制，取消原 scroll-margin-top 双保险，避免多滚 130px */
  .pcard-group { scroll-margin-top: 0; }
}

/* ===== V36：产品中心子类锚点（sub-<group>-<sub>，挂于各子类首张卡）=====
   作用：站内/跨页跳转 products.html#sub-<group>-<sub>，或页内点击左栏二级类目后，
   该子类首张卡不被吸顶页头遮挡（scroll-margin 只影响锚点定位，不改变静态布局）。 */
.page-products .pcard[id^="sub-"] { scroll-margin-top: 190px; }
@media (min-width: 901px) {
  /* 宽屏双窗格：定位由内联脚本 alignTarget() 精确控制，取消 CSS 补偿避免多滚 */
  .page-products .pcard[id^="sub-"] { scroll-margin-top: 0; }
}
@media (max-width: 900px) {
  /* 移动/平板：吸顶页头高度随语言换行而变（实测 375px 下约 150px），
     --prod-hdr-h 由 products.html 内联脚本按实际页头高度写入，此处按「页头高 + 16px」补偿，
     确保跳转后该子类首张卡完整落在页头下方而不被遮挡。 */
  .page-products .pcard[id^="sub-"] { scroll-margin-top: calc(var(--prod-hdr-h, 120px) + 16px); }
}


/* ===== V7：产品页子项空态提示（该子项暂无产品卡时显示） ===== */
.pcard-empty {
  display: block; padding: 56px 20px; text-align: center;
  border: 1px dashed #dcdcdc; border-radius: 8px; background: #fcfcfc;
}
.pcard-empty .pe-txt { display: inline-block; font-size: 15px; color: #9a9a9a; letter-spacing: .5px; }


/* ===== V9.1：首页 Hero 三屏（Hero/产品中心/为什么选择我们）字体排版按样板图重排 =====
   样板基准（样板图文字块宽 660px）：标题 40px / 四条卖点 0.94×标题 / "20+" 2.75×标题 / 卖点行距 1.6em，
   标题与四条卖点右边缘对齐成一条竖线，"20+" 位于文字块起始侧（左上），红字黑描边。
   站点基准取标题 38px（块宽 16.3em≈620px，避开银/彩底图产品起始位约 51%），以上比例与样板一致。 */
.hero-content {
  font-size: 38px;            /* 样板比例基准：块内字号全部用 em 派生，改此处即可整体缩放 */
  width: 16.3em;              /* ≈620px，与样板 660/40=16.5em 同比例，容纳中文主标题整行 */
  max-width: 92vw;
  text-align: right;          /* 标题 + 四条卖点右边缘成一条竖线（四语同口径，均贴文字块右缘） */
}
.hero-num {
  text-align: left;           /* "20+" 单独贴文字块左缘（样板中位于文字块左上，与右侧文字块错位） */
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 2.2em;           /* ≈84px，按样板实测 数字字号/标题字号 ≈ 2.1~2.2 修正 */
  line-height: 1; font-weight: 900; letter-spacing: 0;
  color: var(--red); margin: 0;
  /* V22：原「黑色描边 + paint-order」定义已从源头删除（红色数字现为纯色，无描边、无阴影） */
}
[dir="rtl"] .hero-num { text-align: right; }   /* 阿拉伯语：整块贴右缘，20+ 同侧避免与左侧镜像产品图相碰 */
[dir="rtl"] .hero-btns { justify-content: flex-start; }  /* RTL 下 flex-start 即右缘，与文字同侧 */
.hero-content h1 {
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 1em; line-height: 1.16; font-weight: 800; letter-spacing: 0.01em;
  margin: 12px 0 28px;   /* V9.2：数字与标题紧贴、标题与按钮留一档间距 */
}
.hero-points {
  list-style: none; padding: 0; margin: 0 0 24px;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Tahoma, Arial, sans-serif;
}
.hero-points li { font-size: 0.947em; font-weight: 700; line-height: 1.6; }  /* ≈36px、行距 1.6em 与样板一致 */
/* 各主题底色下的可读性（V22：原 per-slide 的 text-shadow 清零 / 白晕 / 黑晕与 -webkit-text-stroke 描边定义已从源头删除） */
.hero-slide--factory .hero-points li { color: rgba(255,255,255,0.94); }
@media (max-width: 1100px) {
  .hero-content { font-size: 28px; left: 7%; }
}
@media (max-width: 768px) {
  .hero-content { font-size: 22px; left: 6%; bottom: 92px; }
}

/* ===== V10：产品中心页横幅改版 ===== */
/* 1) 红标签承担板块标题（放大至原 13px 的约 1.69 倍，保留红标签样式） */
/* 2) 副标题强制单行，窄屏由脚本自动缩小字号 */
body.page-products .page-banner h1.sec-tag{ display: inline-block; font-size: 22px; font-weight: 800;
  letter-spacing: 3px; text-transform: uppercase; color: var(--red); line-height: 1.3; margin: 0 0 14px; }
body.page-products .page-banner .banner-sub{ max-width: none; white-space: nowrap; font-size: 16px; }

/* ===== V11：产品中心页横幅背景图（素材 D:\下载\1.png 裁切修整）+ 深灰黑遮罩，仅 products 页生效 ===== */
/* 背景图 1920x260（按横幅实际渲染比例裁切修整、主体居中）；zh/en/ru 用 page-banner-products.jpg，ar 用水平镜像版 page-banner-products-ar.jpg */
/* 遮罩约 58% 深灰黑（--dark: #212529），保证红色标签与白色副标题清晰可读；底部 4px 红条与原有内距不变 */
body.page-products .page-banner{
  background-color: var(--dark);
  background-image: linear-gradient(rgba(33,37,41,0.58), rgba(33,37,41,0.58)), url("../images/page-banner-products.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}
html[lang="ar"] body.page-products .page-banner{
  background-image: linear-gradient(rgba(33,37,41,0.58), rgba(33,37,41,0.58)), url("../images/page-banner-products-ar.jpg");
}

/* ===== V12：产品中心页横幅增高至 289px（较原 230.6px 增 58px），横幅内文字垂直居中；仅 products 页生效 ===== */
/* 做法：min-height 289px + flex 纵向居中；原 80px 上下内距、左右内距、底部 4px 红条、58% 深灰黑遮罩均保持原样 */
/* 底图同步换为 2560x340 宽幅版（page-banner-products.jpg / page-banner-products-ar.jpg），cover 居中裁切 */
body.page-products .page-banner{
  min-height: 289px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== V13：关于我们页横幅改版（对齐产品中心页规格），仅 about 页生效 ===== */
/* 1) 高度：原 348.5px（内距 80/80）→ 289px，与产品中心页横幅一致；
      上下内距改为 37/43 并配合 flex 纵向居中，使收缩后的内距在 289px 内仍然视觉居中（左右内距为 0，保持不变） */
/* 2) 背景：用户提供的工厂自动化生产线素材图（原图 1203x460，取 y=70~230 的 1203x160 横条，主体设备完整、居中）
      经脚本 fill 输出 2560x340 JPG；ar 版为同区间水平镜像，另存 page-banner-about-ar.jpg */
/* 3) 遮罩：沿用产品中心页同款 58% 深灰黑 rgba(33,37,41,0.58)，保证红标签与白字可读；底部 4px 红条(::after)保留 */
body.page-about .page-banner{
  padding: 37px 0 43px;
  min-height: 289px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--dark);
  background-image: linear-gradient(rgba(33,37,41,0.58), rgba(33,37,41,0.58)), url("../images/page-banner-about.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}
html[lang="ar"] body.page-about .page-banner{
  background-image: linear-gradient(rgba(33,37,41,0.58), rgba(33,37,41,0.58)), url("../images/page-banner-about-ar.jpg");
}

/* ===== V14：联系我们页横幅改版（对齐产品中心/关于我们页规格），仅 contact 页生效 ===== */
/* 1) 高度：原 348.5px（内距 80/80）→ 289px，与产品中心页、关于我们页横幅完全一致；
      上下内距改为 37/43 并配合 flex 纵向居中，使收缩后的内容块在 289px 内视觉居中（左右内距保持 0 不变） */
/* 2) 背景：用户提供的商务握手素材（原图 992x672，取 y=356~488 的 992x132 横条，握手主体完整、城市夜景饱满）
      经脚本 fill 输出 2560x340 JPG；ar 版为同区间水平镜像，另存 page-banner-contact-ar.jpg */
/* 3) 遮罩：沿用同款 58% 深灰黑 rgba(33,37,41,0.58)，保证红标签与白字可读；底部 4px 红条(::after)保留 */
body.page-contact .page-banner{
  padding: 37px 0 43px;
  min-height: 289px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-color: var(--dark);
  background-image: linear-gradient(rgba(33,37,41,0.58), rgba(33,37,41,0.58)), url("../images/page-banner-contact.jpg");
  background-repeat: no-repeat, no-repeat;
  background-position: center center, center center;
  background-size: cover, cover;
}
html[lang="ar"] body.page-contact .page-banner{
  background-image: linear-gradient(rgba(33,37,41,0.58), rgba(33,37,41,0.58)), url("../images/page-banner-contact-ar.jpg");
}

/* ===== V17：关于我们 / 联系我们 横幅标题区对齐产品中心页规格（新增覆盖，不改 HTML、不影响其他页） ===== */
/* 目标：让 body.page-about / body.page-contact 的横幅标题区与 body.page-products 完全同规格
   仅通过新增更高优先级的规则覆盖，原 V13 / V14 / 基础 .page-banner 规则一律保留不动 */

/* 1) 标题：两页横幅 h1 由 42px 普通大标题改为产品中心同款红标签标题
      （display:inline-block; font-size:22px; font-weight:800; letter-spacing:3px;
        text-transform:uppercase; color:var(--red); line-height:1.3; margin:0 0 14px）
      text-transform 与产品中心一致（其 h1.sec-tag 继承 .page-banner .sec-tag 的 uppercase），保证拉丁/西里尔文标题观感统一 */
body.page-about .page-banner h1,
body.page-contact .page-banner h1{
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--red);
  line-height: 1.3;
  margin: 0 0 14px;
}

/* 2) 隐藏两页横幅内与标题重复的红色小标签与面包屑（作用域限定 .page-banner，正文区 .sec-tag 不受影响） */
body.page-about .page-banner .sec-tag,
body.page-contact .page-banner .sec-tag,
body.page-about .page-banner .breadcrumb,
body.page-contact .page-banner .breadcrumb{
  display: none;
}

/* 3) 副标题：与产品中心页一致，解除 720px 宽度限制，字号 16px（颜色等其余继承 .page-banner p） */
body.page-about .page-banner p,
body.page-contact .page-banner p{
  max-width: none;
  font-size: 16px;
}

/* 4) 上下内距回到产品中心同款 80px 0；高度仍由 V13/V14 的 min-height:289px + flex 纵向居中决定，横幅总高保持 289px 不变 */
body.page-about .page-banner,
body.page-contact .page-banner{
  padding: 80px 0;
}


/* ===== V23：关于我们页横幅背景视频（zh/en/ru/ar 四语共用，仅 body.page-about 生效） =====
   1) 视频层：绝对定位铺满横幅，object-fit:cover。横幅实际渲染约 1920x289（≈6.6:1），
      视频源已按主体区间（源 y=112~272，成排螺栓 + 传送带主体）裁切并编码为 1920x320（6:1），
      cover 后仅上下各裁约 15px，主体不再被切掉。
   2) 遮罩层：位于视频之上、文字之下，沿用同款 58% 深灰黑 rgba(33,37,41,0.58)，
      红标签与白字可读性、文字排版、内边距、min-height 全部保持现状；底部 4px 红条(::after)提到最上层。
   3) 回退：视频缺失 / 加载失败时，V13 的背景图 + 58% 遮罩仍作为 section 自身背景显示
      （视频层不绘制像素时自然透出底层静态背景图），静态图仅作"播不出来"时的兜底。
   4) V24（本次）：删除历史 V23 的 @media (prefers-reduced-motion: reduce){ display:none }。
      Windows 关闭「动画效果」时 Chrome 会报告 prefers-reduced-motion: reduce，旧策略会把视频
      整层隐藏、退回静态图，导致这类用户"看不到任何变化"。现改为任何情况下视频层始终显示，
      循环播放的稳定维持交给 js/main.js 的播放兜底逻辑。 */
body.page-about .page-banner{ overflow: hidden; }
body.page-about .page-banner .page-banner-media{
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center center;
  border: 0; pointer-events: none;
}
body.page-about .page-banner::before{
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: rgba(33,37,41,0.58);
}
body.page-about .page-banner::after{ z-index: 2; }
body.page-about .page-banner .container{ position: relative; z-index: 3; }
/* 阿语版按站点惯例水平镜像（与 page-banner-about-ar.jpg 的镜像处理一致） */
html[lang="ar"] body.page-about .page-banner .page-banner-media{ transform: scaleX(-1); }
/* V24：视频层在任何情况下都显示（显式 display:block，避免被其它规则或旧媒体查询波及）。
   历史 V23 的 @media (prefers-reduced-motion: reduce){ .page-banner-media{ display:none } } 已删除，
   系统关闭动画（reduce）时不再退回静态背景图。 */
body.page-about .page-banner .page-banner-media{ display: block; }


/* ===== V21：首页 Hero 三屏文字版式（品牌两行 → 20年+（仅首屏）→ 标语 → 按钮）
   基准字号（在 V20 拟定值上整体翻倍）：品牌名 80px / 标语 48px / 英文公司名 26px / 「20年+」68px；
   版式：品牌两行在上、标语在下、按钮压底，全部左对齐、文字块垂直居中、左边距 = 屏宽 10%（阿语 RTL 镜像为右边距 10%）。
   配色：品牌「永道」用品牌红 #DC2B30，其余文字白色；「20年+」仅第 1 张（--factory）出现，位于标语上方。
   阴影：hero 文字不定义任何 text-shadow / drop-shadow（V22：历史 per-slide 阴影与描边规则已从源头删除，不再使用兜底清零）。
   未改动：轮播机制（自动播放 / 缩略图 heroThumbs / 切换）、按钮文案与按钮自身样式。
   背景：三张主图左侧落字区亮度不足以直接承字，沿用 V20 的左侧深色渐隐衬底（.hero-slide::before），
        仅压左侧落字区，右侧产品图亮度保持原样。 */
.hero-slide::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(13,16,21,0.90) 0%, rgba(13,16,21,0.82) 34%, rgba(13,16,21,0.64) 52%,
    rgba(13,16,21,0.24) 70%, rgba(13,16,21,0) 88%);
}
[dir="rtl"] .hero-slide::before {
  background: linear-gradient(270deg,
    rgba(13,16,21,0.90) 0%, rgba(13,16,21,0.82) 34%, rgba(13,16,21,0.64) 52%,
    rgba(13,16,21,0.24) 70%, rgba(13,16,21,0) 88%);
}
/* 文字块：左对齐 + 垂直居中 + 左边距 10%（阿语 RTL 镜像：右边距 10%） */
.hero-content {
  left: 10%; right: auto; bottom: auto; top: 50%;
  transform: translateY(-50%);
  width: auto; max-width: min(80vw, 760px);
  display: flex; flex-direction: column; align-items: flex-start;
  text-align: left; color: #fff;
}
[dir="rtl"] .hero-content { left: auto; right: 10%; text-align: right; }
/* 品牌第一行：永道（品牌红）+ 紧固件（白），80px，三张最大字号 */
.hero-content .hero-brand-cn {
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: min(50px, 4.55vw); line-height: 1.12; font-weight: 800; letter-spacing: 0.02em; /* 20260930: 14 字中文全称在 760px 容器内原 80px 会折行，改视口自适应 */
  color: #fff; margin: 0 0 14px;
}
.hero-content .hero-brand-red { color: var(--red); }
/* 品牌第二行：英文公司名，26px */
.hero-content .hero-brand-en {
  font-size: 26px; line-height: 1.3; font-weight: 600; letter-spacing: 0.045em;
  color: #fff; margin: 0 0 20px;
}
/* 「20年+」：仅第 1 张，位于标语上方，68px 品牌红（无描边、无阴影） */
.hero-content .hero-num {
  font-size: 68px; line-height: 1; font-weight: 900; letter-spacing: 0;
  color: var(--red); margin: 0 0 12px;
}
/* 标语：48px，三张次大字号 */
.hero-content h1 {
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: 48px; line-height: 1.38; font-weight: 700; letter-spacing: 0.01em;
  color: #fff; margin: 0 0 30px; max-width: 100%;
}
/* 按钮压底：文字块最下方一层，与文字同侧左对齐（RTL 下 flex-start 即右缘）；按钮自身样式沿用 .btn 原规则 */
.hero-content .hero-btns { justify-content: flex-start; margin: 0; }
/* V22：原「阴影清零兜底」块已删除（曾用 !important 强制 text-shadow:none / -webkit-text-stroke:0 / filter:none）；
   现由源头规则不含任何阴影定义来保证 hero 文字无阴影，文件内不再存在 !important 清零阴影的规则。 */
@media (max-width: 1100px) {
  .hero-content { max-width: 84vw; }
  .hero-content .hero-brand-cn { font-size: min(50px, 4.55vw); margin-bottom: 11px; }
  .hero-content .hero-brand-en { font-size: 18px; letter-spacing: 0.035em; margin-bottom: 15px; }
  .hero-content .hero-num { font-size: 46px; margin-bottom: 10px; }
  .hero-content h1 { font-size: 34px; margin-bottom: 22px; }
}
@media (max-width: 768px) {
  .hero-content { max-width: 82vw; }
  .hero-content .hero-brand-cn { font-size: min(38px, 4.55vw); margin-bottom: 8px; }
  .hero-content .hero-brand-en { font-size: 13px; letter-spacing: 0.03em; margin-bottom: 11px; }
  .hero-content .hero-num { font-size: 32px; margin-bottom: 8px; }
  .hero-content h1 { font-size: 24px; margin-bottom: 16px; }
  /* 窄屏：文字块几乎占满宽度，左侧渐隐不足以承字，改为整幅深色衬底 */
  .hero-slide::before, [dir="rtl"] .hero-slide::before {
    background: linear-gradient(100deg,
      rgba(13,16,21,0.90) 0%, rgba(13,16,21,0.86) 66%, rgba(13,16,21,0.60) 88%, rgba(13,16,21,0.45) 100%);
  }
}
@media (max-width: 480px) {
  .hero-content .hero-brand-cn { font-size: min(30px, 4.55vw); }
  .hero-content .hero-brand-en { font-size: 11px; }
  .hero-content .hero-num { font-size: 26px; }
  .hero-content h1 { font-size: 19px; }
}

/* ===== V25：产品详情页（中文版打样，作用域 body.page-product-detail） ===== */
body.page-product-detail .pd-crumb { background: var(--dark); padding: 18px 0; position: relative; }
body.page-product-detail .pd-crumb::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--red); }
body.page-product-detail .pd-crumb .breadcrumb { margin: 0; }
body.page-product-detail .pd-crumb .breadcrumb .crumb-cur { color: #fff; }

/* 主体两栏：左约 22% 类目栏 + 右约 78% 产品主体 */
body.page-product-detail .pd-section { padding: 44px 0 76px; background: #fff; }
body.page-product-detail .pd-layout { display: grid; grid-template-columns: minmax(0, 22fr) minmax(0, 78fr); gap: 34px; align-items: start; }
body.page-product-detail .pd-side,
body.page-product-detail .pd-main { min-width: 0; }
body.page-product-detail .cat-head { color: var(--dark); text-decoration: none; }

/* 右栏产品主体 */
body.page-product-detail .pd-head { padding-bottom: 18px; border-bottom: 1px solid var(--border); margin-bottom: 26px; }
body.page-product-detail .pd-title { font-size: 34px; font-weight: 800; color: var(--dark); line-height: 1.3; margin: 0 0 10px; }
body.page-product-detail .pd-lead { font-size: 15px; color: var(--gray); margin: 0; }
body.page-product-detail .pd-figure { max-width: 620px; margin: 0 auto; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
body.page-product-detail .pd-figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
body.page-product-detail .pd-h2 { font-size: 22px; font-weight: 800; color: var(--dark); line-height: 1.4; margin: 0 0 16px; padding-inline-start: 12px; border-inline-start: 4px solid var(--red); }
body.page-product-detail .pd-fields { margin-top: 30px; }
body.page-product-detail .pd-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.page-product-detail .pd-specs li { display: flex; gap: 10px; align-items: baseline; background: var(--light); border-radius: 8px; padding: 10px 14px; font-size: 14px; }
body.page-product-detail .pd-specs .k { flex: 0 0 auto; color: var(--gray); }
body.page-product-detail .pd-specs .v { color: var(--dark); font-weight: 700; word-break: break-word; }
body.page-product-detail .pd-specs .v.is-ph { color: #b3b3b3; font-weight: 500; }
body.page-product-detail .pd-note { font-size: 12.5px; color: var(--gray-light); line-height: 1.8; margin: 12px 0 0; }
body.page-product-detail .pd-meta { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--border); }
body.page-product-detail .pd-meta p { font-size: 14px; color: #4a4a4a; line-height: 1.8; margin: 0 0 10px; }
body.page-product-detail .pd-meta .pd-lbl { color: var(--gray); }
body.page-product-detail .pd-meta a { color: var(--dark); }
body.page-product-detail .pd-meta a:hover { color: var(--red); }
body.page-product-detail .pd-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
body.page-product-detail .pd-social a { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--dark); color: #fff; font-size: 12px; font-weight: 800; transition: background .25s, transform .25s; }
body.page-product-detail .pd-social a:hover { background: var(--red); color: #fff; transform: translateY(-2px); }
body.page-product-detail .pd-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }
body.page-product-detail .pd-intro { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--border); }
body.page-product-detail .pd-intro p { font-size: 15px; color: var(--gray); line-height: 1.9; margin: 0 0 14px; }
body.page-product-detail .pd-tags-h { font-size: 15px; font-weight: 800; color: var(--dark); margin: 24px 0 12px; }
body.page-product-detail .pd-tags { display: flex; flex-wrap: wrap; gap: 8px; }
body.page-product-detail .pd-tags span { font-size: 12.5px; color: var(--gray); border: 1px solid #d5d5d5; border-radius: 50px; padding: 5px 14px; }

/* 下方图文交错内容区 */
body.page-product-detail .pd-block { background: #fff; }
body.page-product-detail .section-light.pd-block { background: var(--light); }
body.page-product-detail .pd-feat { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; margin-bottom: 60px; }
body.page-product-detail .pd-feat:last-child { margin-bottom: 0; }
body.page-product-detail .pd-feat.rev .pd-feat-media { order: 2; }
body.page-product-detail .pd-feat-media img { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--border); background: #fff; }
body.page-product-detail .pd-feat-text h3 { font-size: 22px; font-weight: 800; color: var(--dark); line-height: 1.4; margin: 0 0 14px; }
body.page-product-detail .pd-feat-text p { font-size: 15px; color: var(--gray); line-height: 1.9; margin: 0; }

/* 相关产品 */
body.page-product-detail .pd-related { padding-bottom: 76px; }
body.page-product-detail a.pd-rel { text-decoration: none; color: inherit; }

@media (max-width: 1100px) {
  body.page-product-detail .pd-layout { grid-template-columns: minmax(0, 26fr) minmax(0, 74fr); gap: 26px; }
  body.page-product-detail .pd-feat { gap: 30px; }
}
@media (max-width: 900px) {
  body.page-product-detail .pd-layout { grid-template-columns: 1fr; gap: 26px; }
  body.page-product-detail .pd-feat { grid-template-columns: 1fr; gap: 20px; margin-bottom: 44px; }
  body.page-product-detail .pd-feat.rev .pd-feat-media { order: 0; }
  body.page-product-detail .pd-block .section-head { margin-bottom: 36px; }
}
@media (max-width: 600px) {
  body.page-product-detail .pd-crumb { padding: 14px 0; }
  body.page-product-detail .pd-section { padding: 30px 0 52px; }
  body.page-product-detail .pd-title { font-size: 26px; }
  body.page-product-detail .pd-specs { grid-template-columns: 1fr; }
  body.page-product-detail .pd-figure { padding: 10px; }
  body.page-product-detail .pd-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ===== V26：产品详情页下方内容区重做（阿里国际站版式；深灰黑 #212529 + 红 #dc2b30；仅 body.page-product-detail 生效） ===== */
body.page-product-detail .pdx-sec { width: 100%; padding: 56px 0 60px; background: #fff; }
body.page-product-detail .pdx-sec--light { background: var(--light); }
body.page-product-detail .pdx-sec--dark { background: var(--dark); }
body.page-product-detail .pdx-sec :is(h2, h3, h4, p, figure) { margin: 0; }
body.page-product-detail .pdx-sec img { display: block; width: 100%; height: auto; border-radius: 0; }

/* 段内标题（左对齐） */
body.page-product-detail .pdx-head { margin-bottom: 26px; }
body.page-product-detail .pdx-en { display: block; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }
body.page-product-detail .pdx-head h2,
body.page-product-detail .pdx-about-text h2,
body.page-product-detail .pdx-why-text h2 { font-size: 26px; font-weight: 800; color: var(--dark); line-height: 1.35; margin: 6px 0 0; }
body.page-product-detail .pdx-head h2::after,
body.page-product-detail .pdx-about-text h2::after,
body.page-product-detail .pdx-why-text h2::after { content: ""; display: block; width: 46px; height: 3px; background: var(--red); margin-top: 12px; }
body.page-product-detail .pdx-head p { font-size: 14px; color: var(--gray); margin-top: 12px; }
body.page-product-detail .pdx-note { font-size: 12.5px; color: var(--gray-light); line-height: 1.9; margin-top: 18px; }

/* 通栏标题条（深灰黑底白字） */
body.page-product-detail .pdx-bar { background: var(--dark); }
body.page-product-detail .pdx-bar .container { display: flex; align-items: center; gap: 12px; padding-top: 20px; padding-bottom: 20px; }
body.page-product-detail .pdx-bar-ico { display: inline-flex; color: #fff; }
body.page-product-detail .pdx-bar h2 { font-size: 21px; font-weight: 800; color: #fff; letter-spacing: .04em; }
body.page-product-detail .pdx-bar-en { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--red); }

/* 1 公司介绍 */
body.page-product-detail .pdx-about { padding: 0; }
body.page-product-detail .pdx-banner { position: relative; overflow: hidden; }
body.page-product-detail .pdx-banner img { width: 100%; height: 300px; object-fit: cover; }
body.page-product-detail .pdx-banner-inner { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(33,37,41,.88) 0%, rgba(33,37,41,.55) 55%, rgba(33,37,41,.25) 100%); }
body.page-product-detail .pdx-banner-en { font-size: 26px; font-weight: 800; letter-spacing: .06em; color: #fff; line-height: 1.35; }
body.page-product-detail .pdx-banner-zh { font-size: 14px; letter-spacing: .1em; color: rgba(255,255,255,.82); margin-top: 10px !important; }
body.page-product-detail .pdx-banner-zh::before { content: ""; display: inline-block; width: 34px; height: 3px; background: var(--red); margin-right: 10px; vertical-align: middle; }
body.page-product-detail .pdx-about-main { padding: 56px 0 60px; }
body.page-product-detail .pdx-about-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; }
body.page-product-detail .pdx-about-text p { font-size: 15px; color: var(--gray); line-height: 1.95; margin-top: 14px; }
body.page-product-detail .pdx-about-media img { width: 100%; height: 340px; object-fit: cover; }

/* 2 工厂实力网格（直角硬边 + 左上角深灰黑标签） */
body.page-product-detail .pdx-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.page-product-detail .pdx-shot { position: relative; overflow: hidden; }
body.page-product-detail .pdx-shot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.page-product-detail .pdx-tag { position: absolute; left: 0; top: 0; background: var(--dark); color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 7px 13px; }

/* 3 供应链流程 */
body.page-product-detail .pdx-flowbar { padding-bottom: 0; }
body.page-product-detail .pdx-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); padding: 44px 0 56px; }
body.page-product-detail .pdx-flow::before { content: ""; position: absolute; left: 8%; right: 8%; top: 82px; border-top: 1px dashed #c9cdd1; }
body.page-product-detail .pdx-node { position: relative; z-index: 1; text-align: center; padding: 0 10px; }
body.page-product-detail .pdx-node-ico { display: flex; align-items: center; justify-content: center; width: 78px; height: 78px; margin: 0 auto; background: #fff; border: 1px solid var(--border); color: var(--dark); }
body.page-product-detail .pdx-node h4 { font-size: 15.5px; font-weight: 800; color: var(--dark); margin-top: 16px; }
body.page-product-detail .pdx-node p { font-size: 12.5px; color: var(--gray); line-height: 1.7; margin-top: 6px; }

/* 4 公司优势（深灰黑通栏） */
body.page-product-detail .pdx-why { padding: 0; }
body.page-product-detail .pdx-why-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
body.page-product-detail .pdx-why-text { padding: 60px 0; }
body.page-product-detail .pdx-why-text h2 { color: #fff; }
body.page-product-detail .pdx-why-list { margin-top: 6px; }
body.page-product-detail .pdx-why-list li { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px dashed rgba(255,255,255,.2); }
body.page-product-detail .pdx-why-list li:last-child { border-bottom: 0; }
body.page-product-detail .pdx-diamond { flex: 0 0 auto; width: 10px; height: 10px; background: var(--red); transform: rotate(45deg); margin-top: 9px; }
body.page-product-detail .pdx-why-list h4 { font-size: 15.5px; font-weight: 800; color: #fff; }
body.page-product-detail .pdx-why-list p { font-size: 13.5px; color: rgba(255,255,255,.72); line-height: 1.85; margin-top: 5px; }
body.page-product-detail .pdx-why-media img { width: 100%; height: 100%; min-height: 340px; max-height: 460px; object-fit: cover; }

/* 5 工厂情况 + 认证 */
body.page-product-detail .pdx-view-media img { width: 100%; height: 400px; object-fit: cover; }
body.page-product-detail .pdx-certs-h { display: flex; align-items: baseline; gap: 12px; margin: 34px 0 16px; border-bottom: 1px solid var(--border); padding-bottom: 12px; }
body.page-product-detail .pdx-certs-h h3 { font-size: 18px; font-weight: 800; color: var(--dark); }
body.page-product-detail .pdx-certs-h span { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gray-light); }
body.page-product-detail .pdx-certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.page-product-detail .pdx-cert { border: 1px solid var(--border); padding: 12px; background: #fff; }
body.page-product-detail .pdx-cert img { width: 100%; height: 320px; object-fit: contain; }

/* 6 生产流程 */
body.page-product-detail .pdx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.page-product-detail .pdx-step img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
body.page-product-detail .pdx-step figcaption { background: var(--dark); color: #fff; font-size: 14.5px; padding: 12px 16px; }
body.page-product-detail .pdx-step figcaption b { color: var(--red); font-size: 15.5px; margin-right: 10px; }

/* 7 包装展示 */
body.page-product-detail .pdx-pack { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
body.page-product-detail .pdx-pack-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
body.page-product-detail .pdx-pack-item figcaption { text-align: center; font-size: 13.5px; color: var(--gray); margin-top: 12px; }

/* 8 参展情况 */
body.page-product-detail .pdx-show { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
body.page-product-detail .pdx-show-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 9 团队展示 九宫格 */
body.page-product-detail .pdx-team { padding-bottom: 60px; }
body.page-product-detail .pdx-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 30px; }
body.page-product-detail .pdx-team-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* 10 FAQ */
body.page-product-detail .pdx-faq-list { border-top: 1px solid var(--border); }
body.page-product-detail .pdx-faq-item { padding: 20px 0; border-bottom: 1px solid var(--border); }
body.page-product-detail .pdx-faq-q { position: relative; font-size: 16px; font-weight: 800; color: var(--dark); padding-left: 30px; }
body.page-product-detail .pdx-faq-q::before { content: "Q"; position: absolute; left: 0; top: 0; color: var(--red); font-weight: 800; }
body.page-product-detail .pdx-faq-a { position: relative; font-size: 14.5px; color: var(--gray); line-height: 1.95; margin-top: 10px !important; padding-left: 30px; }
body.page-product-detail .pdx-faq-a::before { content: "A"; position: absolute; left: 0; top: 0; color: var(--dark); font-weight: 800; }

/* 11 产品规格网格 */
body.page-product-detail .pdx-prods { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px 16px; }
body.page-product-detail .pdx-prod { display: block; }
body.page-product-detail .pdx-prod img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border: 1px solid var(--border); background: #fff; }
body.page-product-detail .pdx-prod h4 { font-size: 13px; font-weight: 700; color: var(--dark); line-height: 1.55; margin-top: 9px; min-height: 40px; }
body.page-product-detail .pdx-prod:hover h4 { color: var(--red); }
body.page-product-detail .pdx-prod-no { display: block; font-size: 11.5px; color: var(--gray-light); letter-spacing: .04em; }
body.page-product-detail .pdx-prod-sp { display: block; font-size: 11.5px; color: var(--gray-light); }

@media (max-width: 1100px) {
  body.page-product-detail .pdx-prods { grid-template-columns: repeat(4, 1fr); }
  body.page-product-detail .pdx-flow { grid-template-columns: repeat(3, 1fr); row-gap: 30px; }
  body.page-product-detail .pdx-flow::before { display: none; }
}
@media (max-width: 900px) {
  body.page-product-detail .pdx-about-grid,
  body.page-product-detail .pdx-why-grid { grid-template-columns: 1fr; gap: 28px; }
  body.page-product-detail .pdx-why-text { padding: 44px 0; }
  body.page-product-detail .pdx-grid3,
  body.page-product-detail .pdx-certs,
  body.page-product-detail .pdx-steps,
  body.page-product-detail .pdx-pack,
  body.page-product-detail .pdx-show,
  body.page-product-detail .pdx-team-grid { grid-template-columns: repeat(2, 1fr); }
  body.page-product-detail .pdx-banner-en { font-size: 20px; }
  body.page-product-detail .pdx-banner img { height: 250px; }
  body.page-product-detail .pdx-view-media img { height: 280px; }
  body.page-product-detail .pdx-about-media img { height: 280px; }
}
@media (max-width: 600px) {
  body.page-product-detail .pdx-sec { padding: 40px 0 44px; }
  body.page-product-detail .pdx-prods { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
  body.page-product-detail .pdx-flow { grid-template-columns: repeat(2, 1fr); }
  body.page-product-detail .pdx-head h2,
  body.page-product-detail .pdx-about-text h2,
  body.page-product-detail .pdx-why-text h2 { font-size: 22px; }
  body.page-product-detail .pdx-banner-en { font-size: 17px; }
  body.page-product-detail .pdx-banner img { height: 210px; }
  body.page-product-detail .pdx-banner-zh { font-size: 12.5px; }
  body.page-product-detail .pdx-view-media img { height: 210px; }
  body.page-product-detail .pdx-about-media img { height: 230px; }
  body.page-product-detail .pdx-cert img { height: 220px; }
  body.page-product-detail .pdx-why-media img { min-height: 220px; }
  body.page-product-detail .pdx-bar h2 { font-size: 18px; }
}

/* ===== V27：素材替换与「减法」收敛（原图等比展示，禁裁剪/禁拉伸/不压字；仅 body.page-product-detail 生效） ===== */
body.page-product-detail .pdx-hero img,
body.page-product-detail .pdx-about-media img,
body.page-product-detail .pdx-why-media img,
body.page-product-detail .pdx-view-media img,
body.page-product-detail .pdx-cert img,
body.page-product-detail .pdx-team-item img,
body.page-product-detail .pdx-prod img,
body.page-product-detail .pdx-strength-poster img,
body.page-product-detail .pdx-solo-fig img { object-fit: contain; }

/* 1 公司介绍：顶部厂区实景横幅（原图等比、不压字）+ 深灰黑标语条 */
body.page-product-detail .pdx-hero { background: #1b1e21; }
body.page-product-detail .pdx-hero img { width: 100%; height: auto; }
body.page-product-detail .pdx-slogan { background: var(--dark); padding: 20px 0; }
body.page-product-detail .pdx-slogan-en { font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.6); text-align: center; }
body.page-product-detail .pdx-slogan-zh { font-size: 15px; font-weight: 700; letter-spacing: .06em; color: #fff; text-align: center; margin-top: 8px; }
body.page-product-detail .pdx-about-media img { height: auto; }

/* 2 工厂实力：一张原图海报 + 要点清单（取代 6 格裁切图） */
body.page-product-detail .pdx-strength-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr); gap: 56px; align-items: start; }
body.page-product-detail .pdx-strength-poster img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; box-shadow: 0 12px 32px rgba(33,37,41,.10); }
body.page-product-detail .pdx-strength-list h3 { font-size: 19px; font-weight: 800; color: var(--dark); padding-bottom: 16px; border-bottom: 2px solid var(--dark); }
body.page-product-detail .pdx-strength-list ul { list-style: none; margin: 0; padding: 0; }
body.page-product-detail .pdx-strength-list li { display: flex; align-items: center; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--border); }
body.page-product-detail .pdx-strength-list b { font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--red); }
body.page-product-detail .pdx-strength-list span { font-size: 15px; font-weight: 700; color: var(--dark); }
body.page-product-detail .pdx-strength-list em { margin-left: auto; font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--gray-light); }

/* 4 公司优势：补回深灰黑底（原白底白字不可读）+ 媒体图等比 */
body.page-product-detail .pdx-why { background: var(--dark); }
body.page-product-detail .pdx-why-media img { height: auto; min-height: 0; max-height: none; }

/* 5 工厂情况与认证：现场图等比 + 4 张真实证书横排带边框 */
body.page-product-detail .pdx-view-media img { height: auto; }
body.page-product-detail .pdx-certs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
body.page-product-detail .pdx-cert { padding: 10px; }
body.page-product-detail .pdx-cert img { height: 400px; background: #fff; }
body.page-product-detail .pdx-cert figcaption { margin-top: 10px; font-size: 12.5px; color: var(--gray); text-align: center; line-height: 1.5; }

/* 6/7/8 生产流程 · 包装展示 · 参展情况：单一原图（等比 + 统一画框）+ 文字清单 */
body.page-product-detail .pdx-solo { display: flex; flex-direction: column; align-items: center; gap: 24px; }
body.page-product-detail .pdx-solo-fig { display: flex; justify-content: center; width: 100%; padding: 18px; background: #f3f5f6; border: 1px solid var(--border); }
body.page-product-detail .pdx-solo-fig img { width: auto; max-width: 100%; max-height: 560px; height: auto; }
body.page-product-detail .pdx-solo-fig--tall img { max-height: 660px; }
body.page-product-detail .pdx-solo-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 34px; margin: 0; padding: 0; list-style: none; }
body.page-product-detail .pdx-solo-list li { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700; color: var(--dark); }
body.page-product-detail .pdx-solo-list b { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--red); color: #fff; font-size: 11.5px; }

/* 9 团队展示：6 张真实团队照（3×2 等高对齐，等比不裁） */
body.page-product-detail .pdx-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
body.page-product-detail .pdx-team-item { background: #eef0f1; }
body.page-product-detail .pdx-team-item img { height: auto; aspect-ratio: 4 / 3; background: #eef0f1; }

/* 11 产品规格网格：等比展示不裁切 */
body.page-product-detail .pdx-prod img { aspect-ratio: 4 / 3; height: auto; }

@media (max-width: 1100px) {
  body.page-product-detail .pdx-strength-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}
@media (max-width: 900px) {
  body.page-product-detail .pdx-strength-grid { grid-template-columns: 1fr; gap: 30px; }
  body.page-product-detail .pdx-strength-poster img { max-width: 460px; }
  body.page-product-detail .pdx-certs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  body.page-product-detail .pdx-cert img { height: 340px; }
  body.page-product-detail .pdx-team-grid { gap: 10px; }
  body.page-product-detail .pdx-about-media img,
  body.page-product-detail .pdx-view-media img { height: auto; }
}
@media (max-width: 600px) {
  body.page-product-detail .pdx-slogan-en { font-size: 11.5px; letter-spacing: .12em; }
  body.page-product-detail .pdx-slogan-zh { font-size: 13px; }
  body.page-product-detail .pdx-solo-fig { padding: 8px; }
  body.page-product-detail .pdx-solo-fig img { max-height: 420px; }
  body.page-product-detail .pdx-certs { gap: 12px; }
  body.page-product-detail .pdx-cert { padding: 6px; }
  body.page-product-detail .pdx-cert img { height: 260px; }
  body.page-product-detail .pdx-solo-list { gap: 10px 20px; }
}

/* =====================================================================
   V25（页头配色试点）· 页头局部蓝化：红(#dc2b30/#c21f24) → 主色 #004890
   作用域：仅 <div class="topbar"> 与 <header class="site-header"> 两段页头
   做法：不改 --red / --red-dark 全局变量，仅在文件末尾追加页头专属覆盖规则；
        每条选择器均带 .topbar / .site-header 前缀（特异性更高）且位于源码最后，
        可稳定覆盖前文及响应式媒体查询里的红色声明；不改任何 HTML 结构。
   例外（保持红色不动）：右侧「在线留言」按钮 .btn-red / .btn.btn-msg
   （含 hover #c21f24 与红色投影）——本块刻意不包含其任何覆盖。
   未纳入本次：紧邻页头下方的「产品分类导航条」.cat-nav（不在 <header> 元素内）保持原样。
   回滚：删除自本注释起至文件末尾的整段即可完全还原（全局变量未被动过）。
   ===================================================================== */
.topbar .topbar-left a:hover { color: #004890; }
.topbar .tb-ico { color: #004890; }
.topbar .lang-item:hover { color: #004890; }
.topbar .lang-item.active { color: #004890; border-color: #004890; }
.topbar .lang-item.active:hover { color: #00376f; border-color: #00376f; }

.site-header .main-nav > li > a:hover,
.site-header .main-nav > li > a.active { color: #004890; }
.site-header .main-nav > li > a::after { background: #004890; }
.site-header .dropdown { border-top-color: #004890; }
.site-header .dropdown li a:hover { color: #004890; }
.site-header .search-toggle:hover { background: #004890; border-color: #004890; color: #fff; }
.site-header .search-box { border-top-color: #004890; }
.site-header .search-box input:focus { border-color: #004890; }
.site-header .search-go { background: #004890; }
.site-header .search-go:hover { background: #00376f; }
/* 例外锚点：「在线留言」.btn.btn-red.btn-msg 维持红底白字（#dc2b30 / hover #c21f24） */

/* ===== V28：产品详情页主体区重排（参考图版式：左图右文 + 红竖线参数表；仅 body.page-product-detail 生效） ===== */
/* 右栏顶部：左图右文（主图纯图、白底圆角、等比完整展示，不叠加任何徽标） */
body.page-product-detail .pd-top { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); gap: 34px; align-items: start; }
body.page-product-detail .pd-top .pd-figure { width: 100%; max-width: none; margin: 0; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
body.page-product-detail .pd-top .pd-figure img { display: block; width: 100%; height: auto; border-radius: 10px; }
body.page-product-detail .pd-info { min-width: 0; }
body.page-product-detail .pd-info .pd-head { padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
body.page-product-detail .pd-info .pd-actions { margin-top: 0; }
body.page-product-detail .pd-info .pd-meta { margin-top: 22px; padding-top: 0; border-top: 0; }
body.page-product-detail .pd-info .pd-social { margin-top: 16px; }

/* 产品参数：通栏标题 + 键值表格（无底色，浅灰细线分隔；宽屏一行两组，窄屏一行一组） */
body.page-product-detail .pd-fields { margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--border); background: none; }
body.page-product-detail .pd-fields .pd-h2 { background: none; }
body.page-product-detail .pd-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 46px; row-gap: 0; }
body.page-product-detail .pd-specs li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline; background: none; border-radius: 0; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
body.page-product-detail .pd-specs .k { color: var(--gray); }
body.page-product-detail .pd-specs .v { color: var(--dark); font-weight: 700; }
body.page-product-detail .pd-specs .v.is-ph { color: #b3b3b3; font-weight: 500; }

@media (max-width: 1100px) {
  body.page-product-detail .pd-top { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); gap: 26px; }
  body.page-product-detail .pd-specs { column-gap: 32px; }
}
@media (max-width: 900px) {
  body.page-product-detail .pd-top { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
  body.page-product-detail .pd-top .pd-figure { padding: 10px; }
  body.page-product-detail .pd-fields { margin-top: 34px; padding-top: 26px; }
  body.page-product-detail .pd-specs { grid-template-columns: 1fr; column-gap: 0; }
  body.page-product-detail .pd-specs li { grid-template-columns: 84px minmax(0, 1fr); }
}

/* =====================================================================
   V29：详情页主体区三处微调（仅 body.page-product-detail 生效）
   1) 左栏删除「联系我们」卡片（HTML 删除，左栏仅保留「类别」卡）；
   2) 主图放大：pd-top 左图列由 44fr 加宽至 54fr，主图显示宽度同步抬高，
      仍等比完整展示（pd-figure img width:100% / height:auto，无裁切、无拉伸、无叠加）；
   3) 「Inquiry」「Contact us」两按钮（.pd-actions）由 .pd-info 直属下移到
      .pd-meta 内「邮箱」行下方、.pd-social 之前，样式沿用本站 .btn / .btn-red /
      .btn-outline-dark 规范（红 #dc2b30 + 深灰黑 #212529）。
   未改动：页头 #004890 蓝色试点块、面包屑、.pd-fields 参数表、下方 pdx-* 内容区、页脚、en/ru/ar。
   回滚：删除本注释块起至文件末尾的整段即可还原。
   ===================================================================== */
body.page-product-detail .pd-top { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
body.page-product-detail .pd-info .pd-meta .pd-actions { margin-top: 18px; margin-bottom: 2px; }
body.page-product-detail .pd-info .pd-meta .pd-actions + .pd-social { margin-top: 22px; }

@media (max-width: 1100px) {
  body.page-product-detail .pd-top { grid-template-columns: minmax(0, 52fr) minmax(0, 48fr); }
}
@media (max-width: 900px) {
  body.page-product-detail .pd-top { grid-template-columns: 1fr; }
}


/* =====================================================================
   V30：详情页下方内容区重构（新增两段；仅 body.page-product-detail 生效）
   1) FACTORY TOUR：3 列 × 2 行（6 图）。每格外框等高（16:9），图内等比缩放
      居中留白，不裁切、不变形；素材为 1920×1080 原生比例，故不产生黑边。
   2) PACKING & DELIVERY：2 列 × 2 行（4 图）。统一裁切为 4:3，居中裁切、
      不裁切走样（object-fit: cover，object-position: center）。
   3) 两段均为白底（#fff），标题仅英文大写、字色 #dc2b30，无红色竖线 /
      角标 / 深灰黑底；标题下方仅一条浅灰细横线（--border）。
   4) 栅格宽度收在站点统一 .container 内（max-width 1270px / padding 0 24px），
      与产品主体区左右留白对齐，不通栏。
   说明：上方 pdx-* 旧内容区样式（V26/V27）保留不动，FAQ 段仍在复用其中
   的 .pdx-sec / .pdx-head / .pdx-en / .pdx-faq-* 规则。
   回滚：删除本注释块起至文件末尾的整段即可还原。
   ===================================================================== */
body.page-product-detail .pdx2-block { width: 100%; background: #fff; padding: 0 0 72px; }
body.page-product-detail .pdx2-block + .pdx2-block { padding-top: 0; }

body.page-product-detail .pdx2-head { margin: 0 0 28px; padding-bottom: 14px; border-bottom: 1px solid var(--border); }
body.page-product-detail .pdx2-title { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

body.page-product-detail .pdx2-grid { display: grid; gap: 22px; }
body.page-product-detail .pdx2-grid--tour { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.page-product-detail .pdx2-grid--pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.page-product-detail .pdx2-item { margin: 0; background: #fff; overflow: hidden; }

/* FACTORY TOUR：等高外框 + 图内等比缩放居中留白（不裁切） */
body.page-product-detail .pdx2-grid--tour .pdx2-item { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: #f7f7f7; }
body.page-product-detail .pdx2-grid--tour .pdx2-item img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0; }

/* PACKING & DELIVERY：统一裁切同一比例（居中裁切，禁止变形） */
body.page-product-detail .pdx2-grid--pack .pdx2-item { aspect-ratio: 4 / 3; }
body.page-product-detail .pdx2-grid--pack .pdx2-item img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }

@media (max-width: 1100px) {
  body.page-product-detail .pdx2-grid { gap: 18px; }
  body.page-product-detail .pdx2-title { font-size: 25px; }
}
@media (max-width: 760px) {
  body.page-product-detail .pdx2-block { padding-bottom: 52px; }
  body.page-product-detail .pdx2-grid { gap: 14px; }
  body.page-product-detail .pdx2-grid--tour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-product-detail .pdx2-grid--pack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.page-product-detail .pdx2-head { margin-bottom: 20px; }
  body.page-product-detail .pdx2-title { font-size: 21px; letter-spacing: .06em; }
}
@media (max-width: 480px) {
  body.page-product-detail .pdx2-grid--pack { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   V31：详情页主体区宽度对齐 + FACTORY TOUR 栅格改 2 列 × 3 行
   1) 产品参数（.pd-fields）与 产品介绍 + 应用领域（.pd-intro）已从右栏
      .pd-main 脱出，改为 .container 的直接子元素，占满站点统一容器宽度
      （max-width 1270px / padding 0 24px，1920 视口内容宽 1222px），
      左右边界与下方 FACTORY TOUR / PACKING & DELIVERY 完全对齐；
      左栏「类别」卡（.pd-side）保留在 .pd-layout 内，仅与顶部主图信息区并排。
   2) FACTORY TOUR：由 3 列 × 2 行改为 2 列 × 3 行（6 图顺序不变）；
      仍为等高外框（16:9）+ 图内 object-fit: contain 等比缩放居中留白，不裁切。
      PACKING & DELIVERY 保持 2 列 × 2 行不变。
   3) 内容、字号、内距、分隔线样式均沿用原规则，未做改动。
   回滚：删除本注释块起至文件末尾的整段即可还原（HTML 需同步把两块移回 .pd-main）。
   ===================================================================== */
/* 1) 脱出后占满统一容器宽：显式解除任何继承自右栏的宽度限制 */
body.page-product-detail .pd-fields,
body.page-product-detail .pd-intro { width: 100%; max-width: none; min-width: 0; }

/* 2) FACTORY TOUR：2 列 × 3 行 */
body.page-product-detail .pdx2-grid--tour { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 760px) {
  body.page-product-detail .pd-fields { margin-top: 32px; padding-top: 24px; }
  body.page-product-detail .pd-intro { margin-top: 32px; padding-top: 26px; }
  /* 窄屏仍保持 2 列，与桌面版式一致 */
  body.page-product-detail .pdx2-grid--tour { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  /* 手机竖屏：FACTORY TOUR 收为单列，保证每图可读 */
  body.page-product-detail .pdx2-grid--tour { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

/* =====================================================================
   V32：顶部产品主图放大 + 去掉主图白框（仅 body.page-product-detail 生效）
   1) 去白框：.pd-top .pd-figure 移除边框（1px --border）、内边距（14px）、
      圆角（14px）、白底（#fff）与阴影，内部 img 圆角（10px）同步归零；
      主图直接以原图形态呈现，不再有外框包裹。
   2) 放大：.pd-top 栅格由 54fr / 46fr 调整为 62fr / 38fr，主图显示宽度由
      约 452px 提升至约 553px（1920 视口）。素材 800×600，width:100% /
      height:auto 等比缩放，不裁切、不变形、不拉伸（仍为 4:3）。
   3) 响应式：≤1100px 收为 60fr / 40fr；≤900px 起单列堆叠、主图满栏；
      ≤600px 沿用单列并去掉原 10px 内边距，窄屏不溢出。
   未改动：页头 #004890 试点块、面包屑、左栏类别卡、产品参数/产品介绍/
   应用领域、下方 pdx-* 内容区、页脚、en/ru/ar 及其他 HTML。
   回滚：删除本注释块起至文件末尾的整段即可还原。
   ===================================================================== */
body.page-product-detail .pd-top { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); }
body.page-product-detail .pd-top .pd-figure {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.page-product-detail .pd-top .pd-figure img { border-radius: 0; }

@media (max-width: 1100px) {
  body.page-product-detail .pd-top { grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); }
}
@media (max-width: 900px) {
  body.page-product-detail .pd-top { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body.page-product-detail .pd-top { grid-template-columns: 1fr; }
  body.page-product-detail .pd-top .pd-figure { padding: 0; }
}

/* =====================================================================
   V33：顶部「主图 + 信息」整块相对左侧「类别」卡垂直居中（仅 body.page-product-detail 生效）
   1) .pd-layout 由 align-items: start 改为 center，使 .pd-main（内含 .pd-top）
      相对更高的 aside.pd-side（类别卡，实测高约 492.7px）在垂直方向居中，
      类别卡上下留白基本相等（约 34px）；
   2) .pd-top 内部仍保持 align-items: start，主图与右侧信息列继续顶部对齐，
      主图尺寸、栅格比例（62fr/38fr）与去框样式均不变；
   3) ≤900px 单列堆叠时恢复 align-items: start，避免出现异常居中。
   未改动：页头 #004890 试点块、面包屑、左栏类别卡内部结构、产品参数/产品
   介绍/应用领域、下方 pdx-* 内容区、页脚、en/ru/ar 及其他 HTML。
   回滚：删除本注释块起至文件末尾的整段即可还原。
   ===================================================================== */
body.page-product-detail .pd-layout { align-items: center; }
body.page-product-detail .pd-top { align-items: start; }

@media (max-width: 900px) {
  body.page-product-detail .pd-layout { align-items: start; }
}

/* =====================================================================
   V34：详情页下方内容区新增三段（Customized delivery process / Product inquiry /
   Related products，仅 body.page-product-detail 生效）
   1) 位置：PACKING & DELIVERY（.pdx2-pack）之后、FAQ（.pdx-faq）之前；三段均沿用
      .pdx2-block + .container（max-width 1270px / padding 0 24px，1920 视口内容宽
      1222px），白底、英文红色大写标题 + 浅灰细横线，无额外说明文字。
   2) .pdx2-flow：Order precautions 说明段（中文正文，15px/1.95）+ 8 步流程，
      4 列 × 2 行。流程项为浅灰圆角卡（#f7f7f7）+ 白底圆形线性图标（描边取本站红
      --red）；第 1/2/3、5/6/7 项右侧以伪元素绘制箭头，方向统一从左到右。
   3) .pdx2-inquiry：复用既有 .quote-form 表单样式（输入框边框/聚焦描边同站内约定），
      两列：产品名称 / 您的姓名、联系电话 / 电子邮箱，Content 通栏，底部 Submit 按钮
      沿用 .btn.btn-red 并居中；提交反馈复用 main.js 的 window.handleQuote + .form-ok。
   4) .pdx2-related：横向滑动区，一屏 4 张产品卡（共 6 张），左右方形箭头按钮切换，
      超出部分隐藏；滑动逻辑为 product-detail.html 页面内联脚本，未改动 js/main.js。
   5) 响应式：≤1100px 收紧间距；≤760px 流程改 2 列（箭头仅奇数列保留）、产品卡一屏
      2 张；≤480px 流程收为单列并隐藏箭头、产品卡保持一屏 2 张，窄屏无横向溢出。
   未改动：上方产品主体区、FACTORY TOUR / PACKING & DELIVERY / FAQ、页脚、
   en/ru/ar 及其他 HTML。
   回滚：删除本注释块起至文件末尾的整段 + product-detail.html 中三段 section
   与内联滑动脚本即可还原。
   ===================================================================== */

/* ---------- 1) Customized delivery process ---------- */
body.page-product-detail .pdx2-note-wrap { margin: 0 0 34px; }
body.page-product-detail .pdx2-sub { margin: 0 0 14px; font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: .01em; color: #1f2937; text-transform: none; }
body.page-product-detail .pdx2-note { margin: 0; font-size: 15px; line-height: 1.95; color: #4b5563; }

body.page-product-detail .pdx2-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 46px; }
body.page-product-detail .pdx2-step { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 12px; padding: 22px 14px; min-height: 148px; background: #f7f7f7; border-radius: 10px; }
body.page-product-detail .pdx2-step-ico { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: #fff; border: 1px solid var(--border); color: var(--red); }
body.page-product-detail .pdx2-step-txt { font-size: 15px; font-weight: 600; line-height: 1.5; color: #2b2f36; text-align: center; }
body.page-product-detail .pdx2-step-no { margin-right: 5px; font-style: normal; font-weight: 800; color: var(--red); }
/* 箭头：每行前三项右侧，方向一律从左到右 */
body.page-product-detail .pdx2-step:nth-child(4n+1)::after,
body.page-product-detail .pdx2-step:nth-child(4n+2)::after,
body.page-product-detail .pdx2-step:nth-child(4n+3)::after {
  content: ""; position: absolute; top: 50%; right: -31px; width: 16px; height: 16px; margin-top: -8px;
  border-top: 2px solid #c9ccd1; border-right: 2px solid #c9ccd1; transform: rotate(45deg);
}

/* ---------- 2) Product inquiry ---------- */
body.page-product-detail .pdx2-form textarea { margin-bottom: 20px; }
body.page-product-detail .pdx2-submit { display: block; min-width: 200px; margin: 0 auto; padding: 12px 34px; font-size: 15px; }

/* ---------- 3) Related products ---------- */
body.page-product-detail .pdx2-slider { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 18px; }
body.page-product-detail .pdx2-viewport { overflow: hidden; }
body.page-product-detail .pdx2-track { display: flex; gap: 22px; transition: transform .35s ease; will-change: transform; }
body.page-product-detail .pdx2-card { flex: 0 0 calc((100% - 66px) / 4); display: flex; flex-direction: column; gap: 12px; color: inherit; }
body.page-product-detail .pdx2-card-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f7f7f7; }
body.page-product-detail .pdx2-card-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 0; }
body.page-product-detail .pdx2-card-name { font-size: 15px; font-weight: 600; line-height: 1.5; color: #2b2f36; }
body.page-product-detail .pdx2-card:hover .pdx2-card-name { color: var(--red); }
body.page-product-detail .pdx2-nav { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: #fff; color: #1f2937; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
body.page-product-detail .pdx2-nav:hover:not([disabled]) { background: var(--red); border-color: var(--red); color: #fff; }
body.page-product-detail .pdx2-nav[disabled] { opacity: .35; cursor: default; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  body.page-product-detail .pdx2-steps { gap: 20px 34px; }
  body.page-product-detail .pdx2-step:nth-child(4n+1)::after,
  body.page-product-detail .pdx2-step:nth-child(4n+2)::after,
  body.page-product-detail .pdx2-step:nth-child(4n+3)::after { right: -25px; }
}
@media (max-width: 760px) {
  body.page-product-detail .pdx2-note { font-size: 14px; line-height: 1.85; }
  body.page-product-detail .pdx2-sub { font-size: 17px; }
  body.page-product-detail .pdx2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 36px; }
  body.page-product-detail .pdx2-step { min-height: 132px; padding: 18px 12px; }
  body.page-product-detail .pdx2-step::after { display: none; }
  body.page-product-detail .pdx2-step:nth-child(odd)::after { display: block; right: -26px; width: 14px; height: 14px; margin-top: -7px; }
  body.page-product-detail .pdx2-slider { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 12px; }
  body.page-product-detail .pdx2-nav { width: 38px; height: 38px; }
  body.page-product-detail .pdx2-track { gap: 16px; }
  body.page-product-detail .pdx2-card { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (max-width: 480px) {
  /* 窄屏保留 2 列 × 4 行（箭头同 ≤760px 规则），避免单列过长 */
  body.page-product-detail .pdx2-steps { gap: 14px 30px; }
  body.page-product-detail .pdx2-step { min-height: 0; padding: 16px 10px; }
  body.page-product-detail .pdx2-step:nth-child(odd)::after { right: -22px; }
  body.page-product-detail .pdx2-step-txt { font-size: 14px; }
  body.page-product-detail .pdx2-card-name { font-size: 14px; }
}

/* =====================================================================
   V35：详情页左栏「类别」卡垂直位置固定（仅 body.page-product-detail 生效）
   1) 问题：V33 将 .pd-layout 设为 align-items: center 后，左栏 .pd-side
      （类别卡）在 .pd-layout 行内被垂直居中，其顶部位置随右栏 .pd-main 高度
      浮动 —— 面包屑栏底边到左栏卡顶部的间距＝44px ＋（右栏高 − 左栏高）÷2。
      实测同一语言下不同产品在 44.9px ~ 112px 之间跳动（nut-hex-08 最小、
      screw-drywall-04 最大），即用户所见的「间距不一致、有的离得远有的贴得近」。
   2) 修复：本块把 .pd-layout 恢复为 align-items: start，使左栏卡顶部恒定
      贴齐 .pd-section 的 padding-top（44px），即面包屑栏底边 → 左栏卡顶部的
      垂直间距恒为 44px（截图三基准），zh / en / ru / ar 四语与所有产品页完全
      一致，且不再随右栏内容高度浮动。
   3) 保留右栏观感：在 ≥901px 双列布局下给 .pd-main 加 align-self: center，
      右栏（主图 + 信息）在行内仍垂直居中；因左栏卡通常更高、行高由左栏决定，
      右栏居中后主图区顶部与左栏卡顶部齐平，观感与 V33 一致，且不再反向
      影响左栏位置。
   4) ≤900px 单列堆叠：保持原有规则不变（V33 内已是 align-items: start，
      本块在窄屏下取值相同，不产生冲突）。
   未改动：页头 #004890 试点块、面包屑、左栏类别卡内部结构、产品参数 / 产品
   介绍 / 应用领域、下方 pdx-* 内容区、页脚、en / ru / ar 及其他 HTML。
   回滚：删除本注释块起至文件末尾的整段即可还原到 V34 状态（V33 注释块保留原位）。
   ===================================================================== */
body.page-product-detail .pd-layout { align-items: start; }

@media (min-width: 901px) {
  body.page-product-detail .pd-main { align-self: center; }
}