/* ============================================================
   Markets-Detail Featured Products 表格（markets-detail.html Section 3）
   Figma Frame 476:19537
   - 背景 var(--color-soft-gray)（此处用 --color-surface 近似）
   - 表头行 bg var(--color-primary) 白字（主名 20px ExtraBold + 单位 16px Regular，两行）
   - 分组行 bg var(--color-soft-blue)、底部 #ccc 分隔线、20px ExtraBold var(--color-text)
   - 数据行 bg white、18px Regular var(--color-text)
   - 绿色高亮行 bg var(--color-secondary) 白字，前置白色 ">" 图标
   - 列对齐：Product/Features 左对齐，其余数值列居中；移动端横向滚动
   ============================================================ */

.mkd-table {
  position: relative;
  background: var(--color-surface); /* 设计 var(--color-soft-gray) */
  padding: 128px 0 152px;
}

.mkd-table__inner {
  max-width: 1648px; /* 表宽 1600（设计 x=160） + 左右 padding 24 */
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

.mkd-table__title {
  font-family: var(--font-primary);
  font-size: 56px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--color-primary);
  margin: 0 0 88px;
}

/* --- 横向滚动容器（移动端表格保持 1080px 最小宽） --- */
.mkd-table__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 移动端滑动提示（参考 reidge.com 的 scroll-hint），PC 隐藏 */
.mkd-table__swipe {
  display: none;
}

.mkd-table__table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
  table-layout: fixed;
}

.mkd-table__table colgroup col:nth-child(1) { width: 8.5%; }
.mkd-table__table colgroup col:nth-child(2) { width: 18.5%; }
.mkd-table__table colgroup col:nth-child(3) { width: 7.5%; }
.mkd-table__table colgroup col:nth-child(4) { width: 13%; }
.mkd-table__table colgroup col:nth-child(5) { width: 11.5%; }
.mkd-table__table colgroup col:nth-child(6) { width: 9%; }
.mkd-table__table colgroup col:nth-child(7) { width: 9%; }
.mkd-table__table colgroup col:nth-child(8) { width: 9%; }
.mkd-table__table colgroup col:nth-child(9) { width: 13%; }

/* --- 表头 --- */
.mkd-table__table thead th {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.4px;
  padding: 12px 8px;
  text-align: left;
}

/* 数值列居中 */
.mkd-table__table thead th:nth-child(n + 3),
.mkd-table__table tbody td:nth-child(n + 3) {
  text-align: center;
}

.mkd-table__unit {
  display: block;
  font-size: 1rem;
  font-weight: 300;
  letter-spacing: 0;
}

.mkd-table__table sub {
  font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.80625rem);
  vertical-align: baseline;
}

/* --- 分组行 --- */
.mkd-table__table tbody .mkd-table__group td {
  background: var(--color-soft-blue);
  border-bottom: 1px solid var(--color-placeholder);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: var(--color-text);
  padding: 12px 32px;
  text-align: left;
}

.mkd-table__table tbody .mkd-table__group .mkd-table__count {
  font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.80625rem);
  font-weight: 600;
  letter-spacing: 0;
}

/* --- 数据行 --- */
.mkd-table__table tbody td {
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: -0.36px;
  color: var(--color-text);
  padding: 12px 8px;
  text-align: left;
}

/* --- 绿色高亮（hover 驱动）：每行数据行 hover 时变绿 + 白字 + 星标淡入
       （表头与分组行除外） --- */
.mkd-table__table tbody tr:not(.mkd-table__group) td {
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

.mkd-table__table tbody tr:not(.mkd-table__group):hover td {
  background: var(--color-secondary);
  color: var(--color-white);
}

.mkd-table__star {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 14px;
  vertical-align: -3px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.mkd-table__star img {
  width: 100%;
  height: 100%;
}

.mkd-table__table tbody tr:not(.mkd-table__group):hover .mkd-table__star {
  opacity: 1;
}

/* ============================================================
   富文本收口：本区块已改由 CMS 富文本（wt_cms_article.content）驱动
   运营粘贴的内容 **不带任何 class、没有 <thead>、没有 <colgroup>**，也没有上面的
   .mkd-table__group / __star / __unit / __count span（编辑器粘贴时丢弃），只剩
   text-align / line-height / width 三类内联样式。故选择器一律改成「结构 / 元素选择器」，
   统一收在 .mkd-table__rich 下。规则与取值照抄同源先例 css/pd2_params.css
   （product-detail「产品系列推荐」富文本块 —— 同一 Figma Frame 476:19537 的同一张表）。
   三类行按结构判别：表头行 = tbody 第一行的 9 个 <th>；分组行 = 整行只有 1 个 <td>；
   数据行 = 9 个 <td>。判别用 :only-child 而非 [colspan] —— wangEditor 给每个普通单元格
   都写了 colspan="1"，只有跨列单元格才写 colspan="9"，故 td:not([colspan]) 会命中 0 个元素。
   本文件上面针对硬编码表格的规则（.mkd-table__table / __group / __star 等）接富文本后
   不再命中，保留以便对照设计意图。
   ============================================================ */

/* 富文本容器：横向溢出由本容器承担（旧 .mkd-table__scroll 外层的滚动职责移到此处，
   同时保留其移动端惯性滚动配置） */
.mkd-table__rich {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: var(--font-size-base);
  line-height: var(--line-height-body);
  color: var(--color-text);
}

/* --- 富文本裸元素兜底（运营粘贴内容不带 class，只能按标签选） --- */
.mkd-table__rich p {
  margin: 0 0 var(--space-md);
}

/* 富文本独立图片（正文插图）：块级居中 */
.mkd-table__rich img {
  height: auto;
  margin: 0 auto var(--space-md);
}

/* 表格单元格内的图片一律按行内元素处理，覆盖上一条块级居中规则 ——
   否则单元格里的星标会 display:block 独占一行，还多出一条 16px 下边距 */
.mkd-table__rich table img {
  display: inline-block;
  margin: 0;
  vertical-align: -3px; /* = 设计 .mkd-table__star 的 vertical-align */
}

/* --- 表格本体 --- */
.mkd-table__rich table {
  /* 粘贴内容自带内联 width:auto；auto 实际按 shrink-to-fit 收缩，内容窄于容器时
     表格靠左、右侧留空（2026-10-04 实测 /cn/markets-detail，与 pd2_params 同源问题），
     须 !important 覆盖内联值 */
  width: 100% !important;
  min-width: 1080px; /* 设计：窄屏不塌陷，由 .mkd-table__rich 的 overflow-x 横向滚动承托 */
  margin: 0;
  border-collapse: collapse;
  /* 粘贴内容没有 <colgroup>，列宽改由表头行（tbody 第一行的 th）承载 ——
     fixed 布局下列宽只取第一行，与 colgroup 语义一致 */
  table-layout: fixed;
  font-size: var(--font-size-base);
}

/* 列宽：设计 colgroup 的 9 列比例，改挂到表头行单元格上 */
.mkd-table__rich table tbody th:nth-child(1) { width: 8.5%; }

/* 第一列（产品型号）不换行：fixed 布局下 8.5% 窄列会把型号折成两行（2026-10-04 需求 5），
   表头行与数据行一并生效；型号均短（S-830 量级），8.5% 容得下 */
.mkd-table__rich table tbody th:nth-child(1),
.mkd-table__rich table tbody td:nth-child(1) {
  white-space: nowrap;
}
.mkd-table__rich table tbody th:nth-child(2) { width: 18.5%; }
.mkd-table__rich table tbody th:nth-child(3) { width: 7.5%; }
.mkd-table__rich table tbody th:nth-child(4) { width: 13%; }
.mkd-table__rich table tbody th:nth-child(5) { width: 11.5%; }
.mkd-table__rich table tbody th:nth-child(6) { width: 9%; }
.mkd-table__rich table tbody th:nth-child(7) { width: 9%; }
.mkd-table__rich table tbody th:nth-child(8) { width: 9%; }
.mkd-table__rich table tbody th:nth-child(9) { width: 13%; }

/* --- 表头行（9 个 <th> 在 tbody 里，没有 thead） --- */
.mkd-table__rich table tbody th {
  background: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: var(--line-height-small);
  letter-spacing: -0.4px;
  padding: 12px var(--space-sm); /* 设计 12px 8px；8px 即 --space-sm */
  text-align: left;
}

/* 设计表内 <sub> 的兜底（现役内容用 ₂ 字符，此规则供其它型号数据使用） */
.mkd-table__rich table sub {
  font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.80625rem);
  vertical-align: baseline;
}

/* --- 分组行：整行只有 1 个 <td>（跨全列的宽条） --- */
.mkd-table__rich table tbody td:only-child {
  background: var(--color-soft-blue);
  border-bottom: 1px solid var(--color-placeholder);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.16vw + 0.96rem, 1.25rem);
  font-weight: 600;
  line-height: var(--line-height-small);
  letter-spacing: -0.4px;
  color: var(--color-text);
  padding: 12px var(--space-xl); /* 设计 12px 32px；32px 即 --space-xl */
  text-align: left;
}

/* --- 数据行：所在行有多个 <td> 的普通单元格 --- */
.mkd-table__rich table tbody td:not(:only-child) {
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: clamp(1rem, 0.08vw + 0.98rem, 1.125rem);
  font-weight: 300;
  line-height: var(--line-height-small);
  letter-spacing: -0.36px;
  color: var(--color-text);
  padding: 12px var(--space-sm); /* 设计 12px 8px；8px 即 --space-sm */
  text-align: left;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

/* --- 数值列居中（设计 n+3）：必须排在上面两条单元格规则之后
       （与数据行规则同为 (0,2,3) 特异性，靠源码顺序取胜）
       注意：粘贴内容给每个单元格都带了内联 text-align（数值列恰好也是 center），
       内联优先级高于样式表，故本规则只对「没有内联 text-align 的单元格」生效 --- */
.mkd-table__rich table tbody th:nth-child(n + 3),
.mkd-table__rich table tbody td:nth-child(n + 3) {
  text-align: center;
}

/* --- 行 hover：数据行变 --color-secondary 绿底白字
       分组行整行只有 1 个单元格，被 :not(:only-child) 排除；表头是 th 也不匹配，
       故两者都不会被 hover 染绿，无需 :has() --- */
.mkd-table__rich table tbody tr:hover td:not(:only-child) {
  background: var(--color-secondary);
  color: var(--color-white);
}

/* --- 星标（数据行第一列内的图片）：设计里常态不可见，行 hover 淡入 ---
   分组行的单元格也是 :first-child（里面没有 img），用 :not(:only-child) 排除，
   避免运营在分组行里插了图片时被误隐藏 --- */
.mkd-table__rich table tbody td:first-child:not(:only-child) img {
  width: 18px;
  height: 18px;
  margin-right: 14px;
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

.mkd-table__rich table tbody tr:hover td:first-child:not(:only-child) img {
  opacity: 1;
}

/* ==================== 响应式 ==================== */
@media (max-width: 1200px) {
  .mkd-table {
    padding: 88px 0 110px;
  }

  .mkd-table__title {
    font-size: clamp(1.5rem, 0.65vw + 1.35rem, 2.5rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 64px;
  }

  /* Featured Products 标题移动端左右居中（product-detail 与 markets-detail 两页共用此 CSS，均居中） */
  .mkd-table__title {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .mkd-table {
    padding: 72px 0 80px;
  }

  .mkd-table__title {
    font-size: clamp(1.5rem, 0.81vw + 1.31rem, 2.75rem);
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin-bottom: 48px;
  }

  .mkd-table__table {
    min-width: 960px;
    /* fixed 布局下列宽由 colgroup 锁死，第一列 nowrap 内容会溢出重叠；
       改 auto 让列宽按内容自适应（其余数值列本身不换行，分布不变） */
    table-layout: auto;
  }

  /* 移动端显示滑动提示（居中灰字，风格同 reidge.com） */
  .mkd-table__swipe {
    display: block;
    margin: -24px 0 24px;          /* 与标题间距平衡 */
    font-family: var(--font-primary);
    font-size: clamp(0.75rem, 0.04vw + 0.74rem, 0.8125rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--color-text-muted);
    text-align: center;
  }

  .mkd-table__title {
    font-size: clamp(1.625rem, 8vw, 2.25rem);
    line-height: 1.18;
  }

  .mkd-table__group td {
    padding: 8px 20px;
    font-size: clamp(0.8125rem, 0.04vw + 0.8rem, 0.875rem);
  }

  /* 第一列型号（星标+编号）严格不折行 */
  .mkd-table__table tbody td:first-child {
    white-space: nowrap;
  }

  /* 第二列（产品说明）与单元格左缘留 5px 间距 */
  .mkd-table__table tbody td:nth-child(2) {
    padding-left: 5px;
  }

  /* markets-detail 页（id=products）移动端：hover 效果对齐 product-detail，同样隐藏星标 */
  #products .mkd-table__star {
    display: none;
  }

  /* --- 富文本收口（.mkd-table__rich）的移动端覆盖，照抄 pd2_params.css 对应段 --- */
  .mkd-table__rich table {
    min-width: 960px;   /* 设计：移动端表格最小宽 */
    /* 设计注释：fixed 布局下列宽被锁死，第一列 nowrap 内容会溢出重叠，
       改 auto 让列宽按内容自适应（数值列本身不换行，分布不变） */
    table-layout: auto;
  }

  /* 分组行移动端缩排（设计写了这条但特异性低于基础规则、实际从未生效，
     本文件把它落在同特异性的选择器上使其真正生效；
     若要与原硬编码表格逐像素一致，删掉本块即可） */
  .mkd-table__rich table tbody td:only-child {
    padding: var(--space-sm) 20px; /* 设计 8px 20px；20px 无令牌 */
    font-size: clamp(0.8125rem, 0.04vw + 0.8rem, 0.875rem);
  }

  /* 第一列型号（星标 + 编号）严格不折行 */
  .mkd-table__rich table tbody td:first-child {
    white-space: nowrap;
  }

  /* 第二列（产品说明）与单元格左缘留 5px 间距 */
  .mkd-table__rich table tbody td:nth-child(2) {
    padding-left: 5px;
  }

  /* markets-detail 页（区块 id=products）移动端：与上面硬编码表格同样处理 ——
     隐藏 hover 星标、第一列数据左对齐（对应 pd2_params.css 里 #featured 的那组） */
  #products .mkd-table__rich table tbody td:first-child:not(:only-child) img {
    display: none;
  }

  #products .mkd-table__rich table tbody td:first-child {
    text-align: left;
  }
}

/* ==================== 无障碍降级 ====================
   上面的 * 通用块已覆盖全部动效；下面按 pd2_params.css 的同款写法，
   再显式降级 .mkd-table__rich 自己声明的过渡 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .mkd-table__rich table tbody td:not(:only-child),
  .mkd-table__rich table tbody td:first-child:not(:only-child) img {
    transition: none;
  }
}