/* pages/products-detail.css — 产品详情页（bundle 4:583「PRODUCTS-detail」，1920×5740）
   断点：base 移动流式；≥768 加留白；≥1280 按 1920 设计稿精确几何；1280–1920 流式收缩（frontend-execute.md §2.1/§2.3） */

/* ---------- 子页面导航（同 products.css：白底黑字、下滑吸附置顶、分隔线淡出） ---------- */
.page-sub .site-nav {
  position: sticky; /* 子页导航在文档流内，sticky 吸附不产生内容位移（fixed 会掉 96px） */
  top: 0;
  background: var(--color-bg-page);
  color: var(--color-text-1);
}

.page-sub .site-nav.is-scrolled {
  position: sticky; /* 必须 sticky：本选择器 (0,3,0) 压过 components.css 的 .site-nav.is-scrolled (0,2,0) */
  top: 0;
  height: 6rem; /* 保持 96px：子页导航在流内，缩到 88 会把下方内容顶上 8px */
}

.page-sub .site-nav__inner {
  border-color: transparent; /* 白底不显示分隔线（同首页下滑态） */
}

.page-sub .site-nav__menu a:hover {
  color: var(--color-primary);
}

.page-sub .site-nav__toggle span {
  background: var(--color-text-1); /* 移动端白底下汉堡线条转黑 */
}

/* ---------- 面包屑（4:830：四级 + home，x=82，y=146） ---------- */
.pmd-crumbs {
  margin: var(--space-12) var(--space-6) 0;
  font-size: var(--font-size-body-sm);
  letter-spacing: -.02em;
}

.pmd-crumbs ol {
  display: flex;
  flex-wrap: wrap; /* 四级路径窄屏换行 */
  align-items: center;
  gap: .375rem .625rem;
}

.pmd-crumbs svg {
  flex: none;
}

.pmd-crumbs [aria-current] {
  letter-spacing: 0;
}

/* ---------- 产品主区（4:814：块 x=82–1810，高 700；标题 y=265，红线 y=445，导语 y=505，Download y=649） ---------- */
.pmd-hero {
  position: relative;
  margin: 0 var(--space-6);
}

.pmd-hero__title {
  padding-top: 2.5rem;
  font-size: clamp(1.75rem, 1rem + 2.6vw, var(--font-size-h1));
  line-height: var(--line-height-title); /* 60/48 */
}

.pmd-hero__rule {
  /* ⚠ 线加粗到 3px 后 hr 盒子高 +2px。这里与下面 .pmd-hero__desc 各减 1px 抵消，
     使**线的中心**与下方所有元素的位置完全不变（2026-09-18 用户要求 3px）。
     实测：线 448.39→447.39..450.39（中心 448.89 不变），导语仍 509.39、Download 仍 653.39。 */
  margin-top: calc(var(--space-8) - 1px);
  width: 9.375rem; /* 300 */
  border: 0;
  border-top: 3px solid var(--color-primary); /* Line 10 红色（原 1px，2026-09-18 加粗） */
}

.pmd-hero__desc {
  /* 与上面 .pmd-hero__rule 的 -1px 配对，抵消 3px 线带来的 2px 位移 */
  margin-top: calc(var(--space-8) - 1px);
  font-size: var(--font-size-body-md);
  line-height: 1.5rem; /* 24 */
}

.pmd-download {
  display: inline-flex;
  align-items: center;
  gap: var(--space-5); /* 20 */
  margin-top: var(--space-12);
  font-size: var(--font-size-body-lg);
  color: var(--color-text-1);
}

.pmd-download__icon {
  display: grid;
  place-items: center;
  width: 2.1875rem; /* 35 */
  height: 2.1875rem;
  border-radius: .3125rem; /* 5px（2026-09-18 用户要求；设计稿 35 盒原为直角） */
  background: var(--color-gray-300);
  color: var(--color-text-2);
  transition: background-color .2s ease-out, color .2s ease-out;
}

.pmd-download__icon svg {
  width: .9375rem;  /* 15 */
  height: 1.0625rem; /* 17 */
}

.pmd-download:hover .pmd-download__icon {
  background: var(--color-primary);
  color: #fff;
}

/* 文字 hover 下划线：与 .btn-more 同款滑动效果（2026-09-18 用户要求推广到「文字+箭头」按钮）。
   注意本按钮图标在**前**、文字在后（与 .btn-more 相反），故用 :not(.pmd-download__icon) 定位文字 span。 */
.pmd-download > span:not(.pmd-download__icon) {
  position: relative;
}

.pmd-download > span:not(.pmd-download__icon)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.375rem;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease-out;
}

.pmd-download:hover > span:not(.pmd-download__icon)::after,
.pmd-download:focus-visible > span:not(.pmd-download__icon)::after {
  transform: scaleX(1);
}

/* 右侧主图 + 描边装饰（Group 861：外框 605 满幅 + glyph 312×284 右下，主图 500×488 置前） */
.pmd-hero__figure {
  position: relative;
  aspect-ratio: 1;
  margin-top: 2rem;
}

.pmd-hero__deco {
  position: absolute;
  color: var(--color-text-3); /* 描边灰 #999 */
}

.pmd-hero__deco--frame {
  inset: 0;
  width: 100%;
  height: 100%;
}

.pmd-hero__deco--glyph {
  left: 48.43%;   /* 293/605 */
  top: 53.06%;    /* 321/605 */
  width: 51.57%;  /* 312/605 */
  height: 46.94%; /* 284/605 */
}

/* 产品图：精确复刻设计稿显示窗（fill transform 解码：等比 0.1856，取原图窗 u 0.270–0.938 / v 0.061–0.931，
   该窗恰完整框住产品 bbox）——图框 overflow hidden + 图片放大定位 */
.pmd-hero__imgbox {
  position: absolute;
  left: 8.6%;   /* 52/605 */
  top: 9.59%;   /* 58/605 */
  width: 82.64%; /* 500/605 */
  aspect-ratio: 500 / 488;
  overflow: hidden;
}

.pmd-hero__imgbox img {
  position: absolute;
  width: 149.66%;  /* 4032 × 0.18558 / 500 */
  height: 114.99%; /* 3024 × 0.18558 / 488 */
  left: -40.39%;   /* −(0.26984 × 748.3) / 500 */
  top: -7.03%;     /* −(0.06118 × 561.2) / 488 */
  max-width: none;
}

/* ---------- MULTI-ANGLE 轮播（4:800：#f8f8f8 高 700；标题 y=1195，图 y=1025 810×540，箭头 y=1520） ---------- */
.pmd-gallery {
  margin-top: var(--space-20);
  background: var(--color-gray-100);
}

.pmd-gallery__reveal {
  position: relative;
  padding: 2rem var(--space-6) 2.5rem;
  transition: opacity .3s ease-out, transform .3s ease-out;
}

/* 进屏动效：区块滑入视口时整体自左滑入（JS 加 pmd-anim 启用初始态，IntersectionObserver 加 is-inview 释放） */
.pmd-gallery.pmd-anim:not(.is-inview) .pmd-gallery__reveal {
  opacity: 0;
  transform: translateX(-3rem);
}

.pmd-gallery__title {
  max-width: 30.6875rem; /* 491 */
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39; /* 50/36 */
}

.pmd-gallery__viewport {
  overflow: hidden;
  margin-top: var(--space-8);
}

.pmd-gallery__track {
  display: flex;
  gap: 1rem;
  padding-inline: var(--space-6);
  transition: transform .3s ease-out;
}

.pmd-gallery__slide {
  flex: none;
  width: 78vw;
  aspect-ratio: 3 / 2; /* 810×540 */
}

.pmd-gallery__slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pmd-gallery__nav {
  display: flex;
  gap: .3125rem; /* 5px（2026-09-18 用户指定，原 3px） */
  margin-top: var(--space-8);
}

/* 箭头钮（2026-09-18 用户改规格）：
   默认 = 浅灰块 + 灰箭头；hover / 键盘聚焦 / 按下 = 主红块 + 白箭头。
   原先「左钮灰、右钮红」是设计稿把左钮画成 disabled 态的静态复刻，现改为两个钮同一套规则。
   ⚠ disabled 不参与变红（否则「上一张不可点」看起来却可点）。 */
.pmd-gallery__btn {
  display: grid;
  place-items: center;
  width: 2.8125rem; /* 45 */
  height: 2.8125rem;
  border: 0;
  background: var(--color-gray-300);
  color: var(--color-text-2);
  cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}

.pmd-gallery__btn svg {
  width: .625rem;  /* 10 */
  height: .875rem; /* 14 */
}

/* 圆角方向：左钮圆左侧两角、右钮圆右侧两角（2026-09-18 用户要求 5px） */
.pmd-gallery__btn--prev {
  border-radius: .3125rem 0 0 .3125rem;
}

.pmd-gallery__btn--prev svg {
  transform: scaleX(-1); /* i-arrow 朝右，prev 镜像 */
}

.pmd-gallery__btn--next {
  border-radius: 0 .3125rem .3125rem 0;
}

.pmd-gallery__btn:disabled {
  opacity: .35;
  cursor: default;
}

.pmd-gallery__btn:hover:not(:disabled),
.pmd-gallery__btn:focus-visible:not(:disabled),
.pmd-gallery__btn:active:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- PARAMETERS（4:649：标题 y=1725，两张表行高 52，表 1 双栏 / 表 2 五栏） ---------- */
.pmd-specs {
  margin-top: var(--space-20);
  padding: 0 var(--space-6);
}

.pmd-specs__inner {
  padding: 0;
}

.pmd-specs__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39; /* 50/36 */
}

.pmd-specs__scroll {
  margin-top: 1.875rem; /* 表 1 y=1805（标题底 1775 + 30） */
  overflow-x: auto;     /* 窄屏表格横向滚动（§2.3） */
}

.pmd-table {
  width: 100%;
  min-width: 60rem;
  border-collapse: collapse;
}

.pmd-table + .pmd-table {
  margin-top: 5.125rem; /* 表 2 y=3083（表 1 底 3001 + 82） */
}

.pmd-table th,
.pmd-table td {
  height: 3.25rem; /* 52 */
  padding: 0 1.875rem;
  border-bottom: 1px solid var(--color-text-1); /* 仅横向行分隔线，无竖线无外框 */
}

.pmd-table tr:last-child th,
.pmd-table tr:last-child td {
  border-bottom: 0;
}

.pmd-table thead th {
  background: var(--color-gray-200);
  font-size: var(--font-size-h3);
  line-height: 1.1667; /* 28/24 */
  font-weight: var(--font-weight-bold);
  text-align: left;
}

.pmd-table thead th:not(:first-child) {
  text-align: center; /* 表头除 Name 外全部左右居中 */
}

.pmd-table tbody th {
  font-size: var(--font-size-body);
  line-height: 1.625rem; /* 26 */
  font-weight: var(--font-weight-regular);
  text-align: left;
}

/* 分组行（表 1 的 <th colspan="2">「Integrated impact and rotation power head」）：
   2026-09-18 用户要求 18px / 600，与普通行（16px / 400）区分开。
   用属性选择器定位 —— 两张表里只有这一行带 colspan，天然唯一，无需在 HTML 挂类名。
   特异性 (0,3,1) > 上面 .pmd-table tbody th 的 (0,2,1)，故无需 !important。 */
.pmd-table tbody th[colspan] {
  font-size: var(--font-size-body-md);     /* 18 */
  font-weight: var(--font-weight-semibold); /* 600 */
}

.pmd-table tbody td {
  font-size: var(--font-size-body);
  line-height: 1.5rem; /* 24 */
  text-align: center;
}

.pmd-table--single tbody td,
.pmd-table--single thead th:nth-child(2) {
  width: 42.36%; /* 值列中心 x=1384（1756 内） */
}

.pmd-table--multi thead th:nth-child(n+2),
.pmd-table--multi tbody td {
  width: 19.305%; /* 339/1756，四列等宽 */
}

/* ---------- OTHER MODELS（4:612：推广卡固定 + 型号卡轮播，promo 双箭头控制；行高 660） ---------- */
.pmd-others {
  margin-top: var(--space-20);
}

.pmd-others__wrap {
  display: flex;
  flex-direction: column;
}

.pmd-others__viewport {
  overflow: hidden;
}

.pmd-others__track {
  display: flex;
  transition: transform .3s ease-out;
}

.pmd-others__track .pmd-omcard {
  flex: none;
  width: 100%;
}

.pmd-omcard {
  position: relative;
  padding: 0 1rem 2.5rem;
  background: var(--color-bg-card);
  transition: background-color .2s ease-out;
}

/* 整卡可点（2026-09-18 用户要求，与 products-sub 的 .pmod-card 同款 stretched link）。
   关键在 .pmd-omcard__link **自身是 static** —— 所以它 ::after 的包含块是上面那个
   position:relative 的 .pmd-omcard，inset:0 才能铺满整张卡（含卡片内边距）。
   ⚠ 若日后给 .pmd-omcard__link 或它祖先加 position，覆盖层会塌回那个祖先的盒子。
   ⚠ 不能把这段挪进 .pmd-omcard__divider：divider 是 position:relative，
     会把包含块截在 1px 高的分隔线上。
   仅型号卡有此链接；推广卡（.pmd-omcard--promo）没有，故不受影响。 */
.pmd-omcard__link {
  color: inherit;
  text-decoration: none;
}

.pmd-omcard__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1; /* 低于红色箭头钮的 z-index:2，高于卡片其余内容 */
}

/* 型号卡：媒体位 540×424，产品图 63% 宽贴底居中（设计稿 340/540） */
.pmd-omcard__media {
  position: relative;
  aspect-ratio: 540 / 424;
}

.pmd-omcard__media img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 63%;
  height: auto;
}

/* 分隔线：灰线 1px，红段 3px 高、上下居中覆于灰线之上（上下各高出 1px）、左右居中；
   hover 时红段自中间向两边"长"至全宽覆盖灰线（0.35s ease-out） */
.pmd-omcard__divider {
  position: relative;
  height: 1px;
  margin-top: 2.5rem;
  background: var(--color-text-1);
}

.pmd-omcard__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 25%;
  right: 25%;
  height: 3px;
  transform: translateY(-50%);
  background: var(--color-primary);
  transition: left .35s ease-out, right .35s ease-out;
}

.pmd-omcard__go {
  position: absolute;
  right: 0;
  /* ⚠ 从 calc(100% + 1px) 改为 100%：钮整体下移 1px，与红段**重叠** 1px。
     原值是「钮底与红段上缘刚好相切」（盒模型上确实 0 缝，实测重叠 0.000），
     但钮与红段各自成层、各自光栅化取整，共享边界又落在分数上 → 被撕开一条缝
     （1x 屏 1px、2x/4x 屏 0.5px）。重叠 1px 后取整误差吃不掉它。
     与 products-sub 的 .pmod-card__go 同款修法（2026-09-18）。
     ⚠ 这个 1px 不是「视觉微调」，是**消除接缝的必要量**，别再改回相切。 */
  bottom: 100%;
  z-index: 2; /* 高于整卡覆盖层（.pmd-omcard__link::after 的 z-index:1）—— 指针落在钮上时命中的是钮自己，保住它的 :hover 变深红 */
  display: grid;
  place-items: center;
  width: 2.8125rem; /* 45 */
  height: 2.8125rem;
  border-radius: .3125rem 0 0 0; /* 左上 5px 圆角（2026-09-18 用户要求；其余三角仍为设计稿的直角） */
  background: var(--color-primary);
  color: #fff;
  transition: opacity .2s ease-out, background-color .2s ease-out;
}

.pmd-omcard__go:hover {
  background: var(--color-primary-dark);
}

.pmd-omcard__go svg {
  width: .625rem;
  height: .875rem;
}

.pmd-omcard__name {
  margin-top: 1.875rem;
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
  font-weight: var(--font-weight-medium);
  text-align: center;
}

/* 型号名 PRO 右上角标（QY-100LPRO 等连写型号） */
/* 型号名后缀右上角标（pro / max）
   ⚠ 2026-09-23：原本只覆盖 .pmd-hero__title / .pmd-omcard__name 两处，
      现整站统一「后缀小写 + 上角标」（与俄语站 xitec-demo-ru 同一规范），
      所以把选择器扩展到面包屑与规格表表头。
      sup 默认的 vertical-align: super 会顶出行盒、把标题行距撑开；
      这里改成 baseline + position:relative + top:-.5em，并让 line-height:0
      —— 既抬到上标位置，又**不参与行盒计算**（加 sup 不改行高、不推挤相邻行）。 */
.pmd-hero__title sup,
.pmd-omcard__name sup,
.pmd-crumbs sup,
.pmd-table sup {
  font-size: .6em;
  line-height: 0;
  vertical-align: baseline;
  position: relative;
  top: -.5em;
}

/* 类目推广卡（660×660：底图 + 40% 黑遮罩 + 白色内容） */
.pmd-omcard--promo {
  aspect-ratio: 1;
  padding: 0;
  color: #fff;
}

.pmd-omcard__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pmd-omcard--promo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

.pmd-omcard__icon {
  position: absolute;
  z-index: 1;
  top: 18.18%;  /* 120/660 */
  left: 12.58%; /* 83/660 */
  width: 15.15%; /* 100/660 */
  aspect-ratio: 1;
}

.pmd-omcard__icon > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: #fff;
}

.pmd-omcard__icon img {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 58%;
  height: auto;
}

.pmd-omcard__cat {
  position: absolute;
  z-index: 1;
  top: 37.88%; /* 250/660 */
  left: 12.58%;
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2rem);
  line-height: 1.5;
  font-weight: var(--font-weight-medium);
  color: #fff;
}

.pmd-omcard__cta {
  position: absolute;
  z-index: 1;
  right: 2.27%;  /* 15/660 */
  bottom: 11.52%; /* 76/660 */
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.pmd-omcard__view {
  font-size: var(--font-size-body-lg);
  font-weight: var(--font-weight-medium);
  color: #fff;
}

.pmd-omcard__view:hover {
  text-decoration: underline;
}

.pmd-omcard__nav {
  display: flex;
  gap: .3125rem; /* 5px（2026-09-18 用户要求，原 10px；与 MULTI-ANGLE 箭头一致） */
}

/* 与 .pmd-gallery__btn 同一套规格：默认浅灰块 + 灰箭头，hover/focus/active 主红块 + 白箭头 */
.pmd-omcard__btn {
  display: grid;
  place-items: center;
  width: 2.8125rem; /* 45 */
  height: 2.8125rem;
  border: 0;
  background: var(--color-gray-300);
  color: var(--color-text-2);
  cursor: pointer;
  transition: background-color .2s ease-out, color .2s ease-out, opacity .2s ease-out;
}

.pmd-omcard__btn svg {
  width: .625rem;
  height: .875rem;
}

.pmd-omcard__btn--prev {
  border-radius: .3125rem 0 0 .3125rem;
}

.pmd-omcard__btn--prev svg {
  transform: scaleX(-1);
}

.pmd-omcard__btn--next {
  border-radius: 0 .3125rem .3125rem 0;
}

/* 原先 promo 的 disabled 钮没有任何视觉区分（gallery 档本来就有 .35）。
   两个钮都改成「默认灰」之后，不补这条就分不出「上一张不可点」。 */
.pmd-omcard__btn:disabled {
  opacity: .35;
  cursor: default;
}

.pmd-omcard__btn:hover:not(:disabled),
.pmd-omcard__btn:focus-visible:not(:disabled),
.pmd-omcard__btn:active:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
}

/* ---------- 售后服务（4:593：与 products.html 同构） ---------- */
.pmd-service {
  margin-top: var(--space-20);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--color-text-1); /* Line 7 */
}

.pmd-service__title {
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--font-size-h1));
  line-height: 1.39; /* 50/36 */
  border-bottom: 1px solid currentColor; /* Line 5 */
}

.pmd-service__cols {
  position: relative;
  display: grid;
  gap: var(--space-12);
  margin-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.pmd-service__col {
  position: relative;
}

.pmd-service__icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 4rem;
  height: 4rem;
}

.pmd-service__col h3 {
  margin-top: var(--space-10);
  padding-right: 5rem; /* 移动端避让右上角图标 */
  font-size: var(--font-size-h3);
  line-height: 2rem; /* 32 */
}

.pmd-service__col p {
  margin-top: var(--space-8);
  font-size: var(--font-size-body-md);
  line-height: 1.5rem; /* 24 */
  color: var(--color-text-2);
}

/* ---------- 页尾标语（4:585：590 居中，Contact Us y=94） ---------- */
.pmd-slogan {
  margin: var(--space-20) auto;
  padding: 0 var(--space-6);
  text-align: center;
}

.pmd-slogan__text {
  max-width: 36.875rem; /* 590 */
  margin: 0 auto;
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: var(--font-weight-medium);
}

.pmd-slogan .btn-more {
  margin-top: 1.875rem;
}

/* ---------- 平板档（768–1279：加大留白） ---------- */
@media (min-width: 768px) {
  .pmd-crumbs {
    margin-inline: var(--space-10);
  }

  .pmd-hero {
    margin-inline: var(--space-10);
  }

  .pmd-gallery__reveal {
    padding-inline: var(--space-10);
  }

  .pmd-gallery__track {
    padding-inline: var(--space-10);
  }

  .pmd-gallery__slide {
    width: 70vw;
  }

  .pmd-specs {
    padding-inline: var(--space-10);
  }

  .pmd-slogan {
    padding: 0 var(--space-10);
  }
}

/* ---------- 桌面档（≥1280：1920 设计值精确命中） ---------- */
@media (min-width: 1280px) {
  .pmd-crumbs {
    margin: 3.125rem 0 0 5.125rem; /* (82,146) */
  }

  .pmd-hero {
    height: 43.75rem; /* 块 165–865 */
    margin: 0 6.875rem 0 5.125rem; /* x=82–1810 */
  }

  .pmd-hero__body {
    width: 55.556%; /* 960/1728 */
  }

  .pmd-hero__title {
    padding-top: 6.25rem; /* y=265（区块顶 165 + 100） */
    font-size: var(--font-size-h1);
  }

  .pmd-hero__rule {
    margin-top: 3.6875rem; /* 线 y=445（标题底 385 + 60）；3px 线占位多 2px，故 -1px 抵消 */
    width: 18.75rem;       /* 300 */
  }

  .pmd-hero__desc {
    margin-top: 3.6875rem; /* 导语 y=505；与上面 rule 的 -1px 配对，抵消 3px 线的位移 */
    font-size: var(--font-size-h3);
    line-height: 2rem; /* 32 */
  }

  .pmd-download {
    margin-top: 5rem; /* y=649（导语底 569 + 80） */
  }

  .pmd-hero__figure {
    position: absolute;
    top: 2.375rem; /* 38 */
    right: 0;
    width: 35%; /* 605/1728 */
    margin: 0;
  }

  .pmd-gallery {
    height: 43.75rem; /* 945–1645 */
    margin-top: 5rem;
  }

  .pmd-gallery__reveal {
    height: 100%;
    padding: 0;
  }

  .pmd-gallery__title {
    position: absolute;
    top: 15.625rem; /* y=1195（区块顶 945 + 250） */
    left: 5.125rem; /* x=82 */
    width: 30.6875rem; /* 491 */
    font-size: var(--font-size-h1);
    line-height: 3.125rem; /* 50 */
  }

  .pmd-gallery__viewport {
    position: absolute;
    top: 5rem;    /* 图 y=1025（+80） */
    bottom: 5rem; /* 图底 1565（-80） */
    left: 43.698%; /* 839/1920 */
    right: 0;      /* 右缘出血裁切 */
    margin: 0;
  }

  .pmd-gallery__track {
    gap: 2.083vw; /* 40/1920 */
    height: 100%;
    padding: 0;
  }

  .pmd-gallery__slide {
    width: 42.188vw; /* 810/1920 */
    height: 100%;
    aspect-ratio: auto;
  }

  .pmd-gallery__nav {
    position: absolute;
    left: 33.698%; /* 647/1920 */
    bottom: 5rem;  /* 箭头底 1565 */
    margin: 0;
  }

  .pmd-specs {
    margin-top: 5rem; /* PARAMETERS y=1725（轮播底 1645 + 80） */
    padding: 0 3.125rem;
  }

  .pmd-specs__inner {
    padding: 0 2rem; /* 内容 x=82 */
  }

  .pmd-specs__title {
    font-size: var(--font-size-h1);
    line-height: 3.125rem; /* 50 */
  }

  .pmd-others {
    margin-top: 6.25rem; /* others y=3859（表 2 底 3759 + 100） */
  }

  .pmd-others__wrap {
    flex-direction: row;
    align-items: stretch;
  }

  .pmd-omcard--promo {
    flex: none;
    width: 34.375%; /* 660/1920，固定不随轮播 */
    aspect-ratio: auto; /* 高度随 flex stretch 与型号卡等高（设计稿两者同为 660） */
  }

  .pmd-others__viewport {
    flex: 1;
    min-width: 0;
  }

  .pmd-others__track .pmd-omcard {
    width: 50.7937%; /* 640/1260，第二张右缘出血 20px 与设计一致 */
  }

  .pmd-omcard {
    /* 注意：flex item 的 % padding 基准是 flex 容器（track）而非卡片自身，
       故左右内距改由内部元素的 width 占比实现（子元素 % 基准 = 卡内容盒 = 卡宽） */
    padding: 0 0 4.25rem; /* 底部留白 68 */
  }

  .pmd-omcard__media,
  .pmd-omcard__divider,
  .pmd-omcard__name {
    width: 84.375%; /* 540/640，等效原设计的左右内距 50 */
    margin-inline: auto;
  }

  .pmd-omcard--promo {
    padding: 0;
  }

  .pmd-omcard__divider {
    margin-top: 4.5625rem; /* 线 y=4356（媒体位底 4283 + 73） */
    margin-inline: auto;
  }

  .pmd-omcard__name {
    margin-inline: auto;
  }

  /* 卡 2 在设计稿中即 hover 态（灰底 + 全宽红线 + 红色箭头钮），实现为 hover/focus-within 交互 */
  .pmd-omcard__go {
    opacity: 0;
  }

  .pmd-omcard:not(.pmd-omcard--promo):hover,
  .pmd-omcard:not(.pmd-omcard--promo):focus-within {
    background: var(--color-gray-100);
  }

  .pmd-omcard:not(.pmd-omcard--promo):hover .pmd-omcard__go,
  .pmd-omcard:not(.pmd-omcard--promo):focus-within .pmd-omcard__go {
    opacity: 1;
    /* 等红线铺完（.35s = 上面 ::after 的 left/right 过渡时长）再出现。
       只给 hover-in 加延迟：基态的 transition 无延迟，所以移出鼠标时钮先消失、
       线再收回 —— 反向顺序正好是自然的，不用另写一条规则。
       ⚠ 必须写成**两个值**：.pmd-omcard__go 基态的 transition 列了两条
       （opacity .2s, background-color .2s），单值的 transition-delay 会同时命中两者 ——
       那样指针移到钮上时「变深红」也会被拖 350ms。
       第一个值对应 opacity（要延迟），第二个对应 background-color（不延迟）。
       与 products-sub 的 .pmod-card__go 同款（2026-09-18）。 */
    transition-delay: .35s, 0s;
  }

  .pmd-omcard:not(.pmd-omcard--promo):hover .pmd-omcard__divider::after,
  .pmd-omcard:not(.pmd-omcard--promo):focus-within .pmd-omcard__divider::after {
    left: 0;
    right: 0;
  }

  .pmd-service {
    margin-top: 6.25rem; /* 售后区 y=4619（others 底 4519 + 100） */
    padding: 0 3.125rem;
    border-bottom: 0; /* Line 7 移到 __inner（见下） */
  }

  /* 售后区两条分隔线（设计 Line 5 / Line 7）都横跨区块盒 50→1870（1820），文字才内缩到 x=82：
     原先 Line 7 挂在区块 border 上 → 跨满视口 0→1920；Line 5 挂在标题上、被 __inner 的
     2rem 内缩带成 82→1838 —— 两条都偏。改法：__inner 不再承担内缩，两条线自然跨满区块盒，
     内缩交给文字元素自己（标题与两栏各 2rem）。仅 ≥1280 生效，移动/平板档不变。 */
  .pmd-service__inner {
    border-bottom: 1px solid var(--color-text-1); /* Line 7：50→1870 */
  }

  .pmd-service__title {
    padding-inline: 2rem; /* 文字 x=82；Line 5 随盒跨 50→1870 */
    font-size: var(--font-size-h1);
    line-height: 3.125rem;
  }

  .pmd-service__cols {
    padding-inline: 2rem; /* 两栏内容仍在 x=82 / x=1010 */
    grid-template-columns: 47.1526% 47.1526%; /* 828/1756：百分比按**内容盒**解析（1820 − 2rem×2），不是按画板宽 1820 */
    justify-content: space-between;
    gap: 0;
    margin-top: 3.75rem;
    padding-bottom: 3.75rem;
  }

  .pmd-service__cols::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 1px;
    height: 19.375rem; /* Line 6 竖线 310 */
    background: var(--color-text-1);
  }

  .pmd-service__icon {
    width: 5rem;
    height: 5rem;
  }

  .pmd-service__col h3 {
    margin-top: 3rem;
    padding-right: 0;
  }

  .pmd-service__col p {
    margin-top: 3.125rem;
  }

  .pmd-slogan {
    margin: 5rem auto; /* 标语 y=5119（售后底 5039 + 80），底部距页脚 80 */
  }

  .pmd-slogan__text {
    font-size: var(--font-size-h3);
    line-height: 2rem;
  }
}

/* ---------- 移动端专属（<768，2026-09-17）——PC/平板档完全不受影响 ---------- */
@media (max-width: 767px) {
  /* 面包屑：与顶部导航的间距 48 → 18（用户规格「均上移 30px」，2026-09-17 全站 7 个有面包屑的页面统一）。
     base 的 --space-12(48) 是 1920 设计值（y=146 = 导航 96 + 50），移动端导航更矮、视觉密度更小 → 偏大。 */
  .pmd-crumbs {
    margin-top: 1.125rem; /* 18 */
    font-size: .75rem; /* 12px（2026-09-20 移动端面包屑字号；base 为 --font-size-body-sm 14px） */
  }

  /* 面包屑 → 标题的间距 = 60（2026-09-20 用户要求，仅 <768）。
     base 的 .pmd-hero 是 `margin: 0 var(--space-6)`，**上外边距为 0** → 移动端标题原本紧贴
     面包屑（实测间距 0）。这里补 60。≥768 的 margin-inline 覆盖不含 margin-top，不受影响。 */
  .pmd-hero {
    margin-top: 3.75rem; /* 60 */
  }

  /* MULTI-ANGLE 轮播箭头组：由左对齐改为页面水平居中（原先贴在内容左缘 x=24）。
     桌面档箭头是绝对定位（left: 33.698%），不受此规则影响。 */
  .pmd-gallery__nav {
    justify-content: center;
  }

  /* OTHER MODELS 推广卡 CTA（View Other Models + 左右箭头）：
     ① 箭头移到文字下方（column）；② 文字与箭头整体页面水平居中（原为右贴 right:2.27%）；
     ③ 整组上移 20（bottom 加 1.25rem）。移动端推广卡满宽，故卡片居中即页面居中。 */
  .pmd-omcard__cta {
    left: 0;
    right: 0;                        /* 抵消 base 的 right: 2.27%，撑满卡宽后由 align-items 居中 */
    bottom: calc(11.52% + 1.25rem);  /* 11.52%(76/660) + 20 */
    flex-direction: column;
    align-items: center;
  }

  /* 推广卡图标：由 left 12.58% 改为水平居中（与下方 CTA 同一中轴） */
  .pmd-omcard__icon {
    left: 0;
    right: 0;
    margin-inline: auto;
  }

  /* ③ 售后区：与 products.html 同构——图标从右上角绝对定位移到标题前（同行、上下居中），缩小 64 → 40。
     两列内容改用两行网格：第 1 行 = 图标 + 标题，第 2 行 = 正文（跨列，与标题左缘对齐）。 */
  .pmd-service__col {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-3); /* 12：图标与标题间距 */
  }

  .pmd-service__icon {
    position: static;
    grid-column: 1;
    grid-row: 1;
    width: 2.5rem;  /* 40（原移动端 4rem） */
    height: 2.5rem;
  }

  .pmd-service__col h3 {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;    /* 图标已占首行，标题不再下移 */
    padding-right: 0; /* 无需再避让右上角图标 */
  }

  .pmd-service__col p {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}