:root {
  /* ══ 品牌配色（用户 2026-10-15 定：**照客户 LOGO 取色**，全站只认这一处）══════════
     取色方式：直接从客户 LOGO 图上量像素，不是目测 ——
       · 深蓝 #002460 = LOGO 主字（图上占比最大的那个色桶）
       · 橙   #FC6C14 = LOGO 里那两道斜块（最饱和的那一桶）
       · 奶油 #FCF4E8 = LOGO 底色，用来调浅底档（`--jb-brand-50` 往它靠）
     ⚠️ 命名已跟着品牌走（`--jb-brand*` / `btn-jb-brand`）：原来叫 `--jb-red*` / `btn-jb-red`，
        2026-10-15 连同全站 8 个文件一次性改干净（grep `jb-red` = 0），**别再叫它 red**。
     ⚠️ 对比度取舍（2026-10-15 定）：橙底 + 白字 ≈ 2.9:1，不到 AA 的 4.5。
        决定**保品牌色**（客户 LOGO 就是这个橙，主按钮是大号粗体，够读），不为小字降档；
        将来要过无障碍，把按钮文字色换成 `--jb-navy`（橙底 + 深蓝字 ≈ 5.1:1）即可。 */
  --jb-brand: #fc6c14;        /* 品牌橙：主按钮 / 强调 / 链接 / 图标 */
  --jb-brand-600: #e05a04;    /* 悬停深一档 */
  --jb-brand-50: #fdf0e5;     /* 浅底档：胶囊底 / 悬停底 / 当前项底 */
  --jb-brand-300: #ffa76b;    /* 深色底（深蓝/照片遮罩）上的橙 —— 小字/图标在上面才读得清 */
  --jb-navy: #002460;       /* 品牌深蓝：深色区块 / 页头条 / 顶条 / 深底遮罩 */
  --jb-navy-700: #0a3d7c;   /* 深蓝亮一档（次级深底：浮动邮件按钮） */
  --jb-ink: #1f2937;
  --jb-body: #4b5b70;
  --jb-muted: #7b8798;
  --jb-line: #e3e8ef;
  --jb-bg: #f4f6f9;
  --jb-radius: 10px;
  --jb-radius-lg: 16px;
  --gap-s: 8px;
  --gap-m: 16px;
  --gap-l: 32px;
  --page-pad: 20px;
  /* 行业格**唯一的比例来源**（用户 2026-10-14 定）：
     取值 = 「关于我们 › Industries We Serve」实测 240 × 200 → 6:5。
     格子尺寸可以随页面变大变小（`.jb-grid--tiles` / `.jb-grid--industries`），
     **比例只认这一个变量** —— 改比例就改这里，全站行业格一起变。 */
  --jb-industry-ratio: 6 / 5;
  --jb-shadow: 0 12px 32px rgba(0, 36, 96, .08);      /* 阴影也走品牌深蓝，别再写近黑 */
  --jb-shadow-lg: 0 20px 48px rgba(0, 36, 96, .16);
}

body {
  font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--jb-body);
  background: #fff;
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--jb-navy);
  font-weight: 800;
  line-height: 1.25;
}

a { color: var(--jb-brand); text-decoration: none; }
a:hover { color: var(--jb-brand-600); }

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

.min-w-0 { min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.jb-thumb { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--jb-radius); }
.jb-thumb--wide { aspect-ratio: 16 / 9; }
.jb-thumb--square { aspect-ratio: 1 / 1; }   /* 列表页条目图：方图（用户 2026-10-14 定） */

[id] { scroll-margin-top: 104px; }

.jb-section { padding: 72px 0; }
/* 紧接上一段的第二段（产品详情在用）：两段都是 .jb-section 时中间会叠出 144px，
   实测"内容区离顶部太远"（用户 2026-10-15）→ 这一段的上内边距收到 32。 */
.jb-section--snug { padding-top: 32px; }
.jb-section--alt { background: var(--jb-bg); }
.jb-section--dark { background: var(--jb-navy); }
.jb-section--dark .jb-title { color: #fff; }
.jb-section--dark .jb-lead { color: #b9c6d8; }

.jb-section-head { max-width: 780px; margin: 0 auto 44px; text-align: center; }
.jb-section-head--left { margin-left: 0; text-align: left; }
.jb-eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--jb-brand);
  margin-bottom: 12px;
}
.jb-title { font-size: clamp(1.6rem, 3vw, 2.25rem); margin-bottom: 14px; }
.jb-title span { color: var(--jb-brand); }
.jb-lead { font-size: 1rem; margin: 0; }

.jb-topbar { background: var(--jb-navy); color: #9fb0c6; font-size: .85rem; }
.jb-topbar a { color: #cfd9e6; }
.jb-topbar a:hover { color: #fff; }
.jb-topbar-inner {
  display: flex; flex-wrap: wrap; gap: var(--gap-m);
  align-items: center; justify-content: space-between; min-height: 42px;
}
.jb-topbar-list {
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center;
  margin: 0; padding: 0; list-style: none;
}
.jb-topbar-list li { display: flex; align-items: center; gap: 7px; }

@media (max-width: 767.98px) {
  .jb-topbar-list li.jb-topbar-contact { display: none; }

  .jb-topbar-inner > .jb-topbar-list:first-child { display: none; }

  .jb-topbar-inner > .jb-topbar-list:last-child { flex: 1 1 100%; justify-content: space-between; }
}
.jb-lang-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }

.jb-topbar .dropdown-menu {
  z-index: 1060;
  /* ⚠️ 顶条是深底浅字（`.jb-topbar a { color: #cfd9e6 }`）✗
     下拉菜单却是**白底** ✗ → 不覆盖就变成"白字白底" ✓ 未选中项几乎看不见 ✗
     所以这里必须显式给颜色 ✓（同理给圆角/阴影，跟主导航下拉保持一致 ✓） */
  border: 0; border-radius: var(--jb-radius); box-shadow: var(--jb-shadow-lg);
  padding: 8px; min-width: 190px; margin-top: 6px;
}
.jb-topbar .dropdown-item {
  border-radius: 8px; padding: .45rem .8rem; font-size: .92rem;
  color: var(--jb-ink); font-weight: 500;
}
.jb-topbar .dropdown-item:hover,
.jb-topbar .dropdown-item:focus,
.jb-topbar .dropdown-item.active {
  background: var(--jb-brand-50); color: var(--jb-brand);
}
.jb-topbar .dropdown-item.active { font-weight: 600; }

.jb-header { background: #fff; box-shadow: 0 1px 0 var(--jb-line); z-index: 1030; }
.jb-brand { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.jb-brand-mark {
  width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px;
  background: linear-gradient(135deg, var(--jb-brand), var(--jb-brand-600));
  color: #fff; font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center;
}
.jb-brand-text { display: flex; flex-direction: column; }
.jb-brand-name { font-size: 1.3rem; font-weight: 800; color: var(--jb-navy); line-height: 1.1; letter-spacing: .02em; }
.jb-brand-tag { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--jb-muted); }

.jb-nav { padding: 0; }
.jb-nav .navbar-nav { align-items: stretch; }

.jb-nav .nav-link {
  font-weight: 600; color: var(--jb-navy); font-size: 1.05rem;
  padding: 1.1rem 1rem !important;
}
.jb-nav .nav-link:hover, .jb-nav .nav-link.active, .jb-nav .nav-link.show { color: var(--jb-brand); }
.jb-nav .dropdown-menu {
  border: 0; border-radius: var(--jb-radius); box-shadow: var(--jb-shadow-lg);
  padding: 10px; margin-top: 0; min-width: 250px;
}
.jb-nav .dropdown-menu.jb-mega.show {
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 480px;
}
.jb-nav .dropdown-item { border-radius: 8px; padding: .6rem .8rem; font-size: .96rem; color: var(--jb-ink); font-weight: 500; }
.jb-nav .dropdown-item:hover, .jb-nav .dropdown-item.active { background: var(--jb-brand-50); color: var(--jb-brand); }
.jb-nav .dropdown-item i { color: var(--jb-brand); margin-right: 6px; }

/* ⚠️ 四颗自定义按钮统一 `inline-flex + 居中`（用户 2026-10-15："whatsapp 按钮没有垂直居中，
   文本图标"）—— 按钮里带图标（`.bi-whatsapp` / 箭头）时，`inline-block` 会让图标按**文字基线**
   对齐，看着就偏上/偏下；flex 居中才是稳的。`gap` 兜住没写 `me-*` 的那些用法。 */
.btn-jb-brand, .btn-jb-outline, .btn-jb-ghost, .btn-jb-wa {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
}
.btn-jb-brand {
  background: var(--jb-brand); border: 1px solid var(--jb-brand); color: #fff;
  font-weight: 700; border-radius: 999px; padding: .7rem 1.5rem;
}
.btn-jb-brand:hover { background: var(--jb-brand-600); border-color: var(--jb-brand-600); color: #fff; }
.btn-jb-outline {
  background: transparent; border: 1px solid var(--jb-line); color: var(--jb-navy);
  font-weight: 600; border-radius: 999px; padding: .7rem 1.5rem;
}
.btn-jb-outline:hover { border-color: var(--jb-brand); color: var(--jb-brand); }
.btn-jb-ghost {
  background: transparent; border: 1px solid rgba(255, 255, 255, .55); color: #fff;
  font-weight: 600; border-radius: 999px; padding: .7rem 1.5rem;
}
.btn-jb-ghost:hover { background: #fff; border-color: #fff; color: var(--jb-navy); }

.jb-hero { background: var(--jb-navy); }
.jb-hero .carousel-item {

  background-size: cover; background-position: center center; background-repeat: no-repeat;
}
.jb-hero .carousel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0, 36, 96, .94) 0%, rgba(0, 36, 96, .76) 48%, rgba(0, 36, 96, .30) 100%);
}
.jb-hero-inner {
  position: relative; z-index: 2;
  display: grid; align-content: center;

  min-height: 700px;
  padding: 64px 0; max-width: 640px; color: #fff;
}
.jb-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 3rem); margin-bottom: 18px; }
.jb-hero-sub { font-size: 1.04rem; color: #c9d5e5; margin-bottom: 26px; }
.jb-hero-points { list-style: none; padding: 0; margin: 0 0 30px; display: grid; gap: 12px; }
.jb-hero-points li { display: flex; gap: 10px; align-items: flex-start; color: #e8eef7; font-weight: 600; }
.jb-hero-points i { color: var(--jb-brand-300); margin-top: 3px; }
.jb-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.jb-hero .carousel-indicators { margin-bottom: 22px; }
.jb-hero .carousel-indicators [data-bs-target] {
  width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: .45;
  border: 0; margin: 0 5px;
}
.jb-hero .carousel-indicators .active { opacity: 1; background: var(--jb-brand); }

.jb-trust { background: #fff; border-bottom: 1px solid var(--jb-line); padding: 26px 0; }
.jb-trust-inner { display: grid; gap: 18px; }
.jb-trust-block { min-width: 0; }
.jb-trust-block + .jb-trust-block { border-top: 1px dashed var(--jb-line); padding-top: 16px; }
.jb-trust-label {
  margin: 0 0 12px;
  font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--jb-muted);
}
.jb-cert-list { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; }
.jb-cert {
  display: flex; align-items: center; gap: 8px; padding: 7px 14px;
  border: 1px dashed var(--jb-line); border-radius: 999px;
  font-size: .85rem; font-weight: 600; color: var(--jb-ink); background: var(--jb-bg);
}
.jb-cert i { color: var(--jb-brand); }
.jb-logo-wall {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 14px;
}
.jb-logo-wall img {
  width: 100%; height: 80px; object-fit: contain;
  border-radius: 8px; background: #f4f6fa;
}

.jb-about-media { position: relative; border-radius: var(--jb-radius-lg); overflow: clip; }
.jb-about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.jb-badge-year {
  position: absolute; left: 18px; bottom: 18px; z-index: 2;
  background: var(--jb-brand); color: #fff; border-radius: var(--jb-radius);
  padding: 12px 18px; font-weight: 800; line-height: 1.15; box-shadow: var(--jb-shadow);
}
.jb-badge-year small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.jb-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 20px; margin-top: 26px; }
.jb-stat { background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius); padding: 18px; }
.jb-stat-num { font-size: 1.9rem; font-weight: 800; color: var(--jb-brand); line-height: 1.1; }
.jb-stat-label { font-size: .88rem; color: var(--jb-muted); }
.jb-check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.jb-check-list li { display: flex; gap: 10px; align-items: flex-start; }
.jb-check-list i { color: var(--jb-brand); margin-top: 3px; }

.jb-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.jb-grid > * { min-width: 0; }
.jb-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); }
.jb-grid--tiles { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }
/* 列表页（侧栏 + 内容）用的一档：下限 300 —— 侧栏占掉 280 后，984 的可用宽度正好排 3 列；
   更窄时自动退成 2 列 / 1 列，不需要额外断点 */
.jb-grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
/* 行业列表页（`list_industries.html`）专用一档：**同一套行业格，格子更大** ——
   1440 视口实测 **3 列 416 × 347**（对比「关于我们」那 **5 列 240 × 200**），
   ⚠️ 比例不变，仍由 `--jb-industry-ratio`（6:5）控制（用户 2026-10-14 要求）。
   `align-items: start`：别让 grid 的 stretch 去顶高度，把高度**留给 aspect-ratio**。 */
/* ⚠️ 2026-10-15 用户定：行业格**一行 4 个**（首页「Engineered for Demanding Applications」
   与行业列表页都用这一档）。下限 280 → 容器 1296 时正好 4 列 ≈ 306 宽；
   比例仍由 `--jb-industry-ratio`（6:5）管，跟格子大小无关。 */
.jb-grid--industries { grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); align-items: start; }

.jb-card {
  display: flex; flex-direction: column; height: 100%;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
  padding: 26px; transition: border-color .25s, box-shadow .25s, transform .25s;
}
.jb-card:hover { border-color: rgba(252, 108, 20, .45); box-shadow: var(--jb-shadow); transform: translateY(-3px); }
.jb-card-icon {
  width: 52px; height: 52px; flex: 0 0 52px; border-radius: 12px;
  background: var(--jb-brand-50); color: var(--jb-brand);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px;
}
.jb-card-title { font-size: 1.08rem; margin-bottom: 8px; overflow-wrap: anywhere; word-break: break-word; }
.jb-card-text { font-size: .94rem; color: var(--jb-body); margin-bottom: 16px; overflow-wrap: anywhere; word-break: break-word; }
.jb-card-body { flex: 1 1 auto; }
.jb-card-foot { margin-top: auto; font-weight: 700; font-size: .9rem; display: inline-flex; align-items: center; gap: 6px; }

/* ── 加工能力卡：**整张卡就是背景图**（用户 2026-10-15："不要图标了，每个卡片是背景"）────
   原来是"白卡 + 左上角奶油色小方块放图标"，现在整卡铺图 + 深蓝遮罩压白字。
   ⚠️ 文字要用**明确的选择器**（`.jb-card-body` / `.jb-card-foot`）提到 `z-index: 2`，
      别图省事写 `> *` —— 那会把绝对定位的 `.jb-card-bg` 一起改成 `relative`，
      图就从"铺满"变成"占一行"，卡片直接垮掉。
   ⚠️ 遮罩是"上中下三段"加深：标题在顶、正文在中、Learn more 在底，三段都不许压不住。 */
.jb-card--media {
  position: relative; overflow: clip;
  /* ⚠️ 卡就是一张 **4:3 的图**（用户 2026-10-15："图片比例 4:3，与 single_machining 保持一致"），
     文字压在图上、贴底（`justify-content: flex-end`）。 */
  aspect-ratio: 4 / 3; justify-content: flex-end;
  /* ⚠️ **不要边框**（用户："边框处理不好看"）：图上再套一圈浅灰线很脏，
     圆角由卡片自己带，去掉 border 后里外都不留那 1px 缝。 */
  border: 0; background: var(--jb-navy); color: #fff;
}
.jb-card--media .jb-card-bg {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  object-fit: cover; transition: transform .5s ease;
}
.jb-card--media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; transition: background .3s ease;
  /* 用户 2026-10-15 定的调子：**默认"文字明显"、悬停"图明显"** —— 所以平时遮罩偏厚（.18/.62/.94），
     鼠标上来才让照片透出来（见下面的 :hover）。文字那一段始终 ≥ .62，白字一直压得住。 */
  background: linear-gradient(180deg, rgba(0, 36, 96, .18) 0%, rgba(0, 36, 96, .62) 42%, rgba(0, 36, 96, .94) 100%);
}
/* ⚠️ 这两条都**必须**写，少一条文字就贴不到底：
   ① `flex: 0 0 auto` —— `.jb-card-body` 全局是 `flex: 1 1 auto`（占满剩余空间），
      不清掉，"justify-content: flex-end"就推不动任何东西；
   ② `margin-top: 0` —— `.jb-card-foot` 全局是 `margin-top: auto`，
      **auto 外边距会先把剩余空间吃光**，一样让 justify-content 失效（实测踩到：
      卡片 320 高，正文却还贴在 27px 处，正好压在照片最亮的地方，白字糊掉）。 */
.jb-card--media > .jb-card-body,
.jb-card--media > .jb-card-foot { flex: 0 0 auto; position: relative; z-index: 2; }
.jb-card--media > .jb-card-foot { margin-top: 12px; }
.jb-card--media .jb-card-title { color: #fff; }
.jb-card--media .jb-card-text { color: rgba(255, 255, 255, .88); }
.jb-card--media .jb-card-foot { color: #fff; }
.jb-card--media:hover { border-color: rgba(252, 108, 20, .55); }
/* 悬停：图放大 + **遮罩大幅变淡** —— "移动过去图明显"（底部仍留 .84，白字不糊） */
.jb-card--media:hover .jb-card-bg { transform: scale(1.08); }
.jb-card--media:hover::after {
  background: linear-gradient(180deg, rgba(0, 36, 96, 0) 0%, rgba(0, 36, 96, .28) 42%, rgba(0, 36, 96, .84) 100%);
}

/* ── 条目卡片底部的"材料 / 行业"（列表页用，用户 2026-10-14 要求）──────
   设计取舍：用 `<dl>` 做"标签字 + 内容"两列：
     · 每行前面一个极小的标签字（MATERIAL / INDUSTRY）—— 不用图例、不用图标，
       买家一眼知道这排是"用什么材料做的"、那排是"用在哪个行业"；
     · 内容是**纯文本、逗号分隔**（用户 2026-10-14 定：不用胶囊标签，
       多条就写 "Al 6061, Anodized"）；
     · 文本照常换行，长牌号 / 连写行业名（无空格长串）也**强制断行**，绝不冲出卡片。
   ⚠️ 接数据时每类**限制条数**（材料 2 条、行业 2 条），多了会把卡片撑得很难看。 */
.jb-tags {
  display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px 8px;
  margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--jb-line);
}
.jb-tags dt {
  padding-top: 1px; font-size: .68rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--jb-muted);
}
.jb-tags dd {
  margin: 0; min-width: 0; font-size: .8rem; line-height: 1.6; color: var(--jb-ink);
  /* ⚠️ 必须断行：客户往里填的是"没空格的长串"（型号 / 连写行业名）时，
     默认只认空格 / 连字符断行，长串会整条冲出卡片 —— 与 .jb-card-text 同一套写法 */
  overflow-wrap: anywhere; word-break: break-word;
}

.jb-mat-card { text-align: left; }
.jb-mat-code { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--jb-muted); }
/* ── 材料卡（首页「Materials We Machine Every Day」）：**左图 + 右文**，一行 3 张 ──────
   用户 2026-10-15："一行 3 个卡片，每个卡片左右分离，左面是图，右面是材料标签"。
   做法：卡变成两列 grid；图**跨两行** + `align-self: stretch` —— 内容多高图就多高，
   不用写死比例（`.jb-thumb` 那套 4:3 反而会和内容高度打架）。
   右列从上到下：标题 → 牌号胶囊 → 描述 → View materials。 */
.jb-grid--three { grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); }
/* 版式（用户 2026-10-15 二次调整）：**标题在图上面 → 图(1:1) + 右边只有牌号标签
   → 卡内下一行放"描述 + View materials"**。整张卡是 flex 列，三段从上往下排。 */
.jb-mat-card--row { display: flex; flex-direction: column; padding: 20px; }
.jb-mat-card--row .jb-card-title { margin-bottom: 14px; }
/* ⚠️ `align-items: start`（**顶部对齐**，用户 2026-10-15：不要垂直居中）——
   描述多两行时，垂直居中会让图跟着上下漂，顶部对齐更稳。 */
.jb-mat-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; }
/* 描述：**最多 5 行**（用户 2026-10-15），超了出省略号 —— 不许把卡片顶高、更不许溢出。
   ⚠️ `.jb-card-text` 全局带 `margin-bottom: 16px`，在网格里会额外撑高一行，这里清零。 */
.jb-mat-row .jb-card-text {
  margin: 0; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
/* 图：**固定 1:1**（用户明确要求），只裁不拉伸 */
.jb-mat-figure { margin: 0; overflow: clip; border-radius: var(--jb-radius); background: var(--jb-bg); }
.jb-mat-figure > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
/* 卡内第二段（用户 2026-10-15 最终定稿）：
     ① **牌号标签允许占多行**（有几行排几行，卡片跟着长）；
     ② **View materials 独占一行**，在标签下面，左对齐。
   ⚠️ 上一版我给标签加了 `max-height + overflow:hidden`（两行封顶）——
      后果就是**第二行的胶囊上下边框被裁掉**（用户："边框上下都不显示"）。
      现在**不裁了**，行数交给数据，卡片高度随内容长。
   ⚠️ 行间距写死在 `gap: 8px 6px`（上下 8 / 左右 6）：换行时上下也要有缝，
      不然两行胶囊会贴在一起。 */
/* ⚠️ `align-items` **不能写 `flex-start`**（那是列方向上的"收缩到内容宽度"）：
   写了之后胶囊容器会按 max-content 撑开、**永远不换行**，多出来的胶囊横向溢出卡片
   （压测 12 个牌号时 ul 仍是 26px 高、scrollHeight 29 —— 一行全塞下、溢出被卡片裁掉）。
   保持默认的 `stretch`：容器占满卡片宽度，`flex-wrap` 才会真正生效。 */
.jb-mat-foot {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--jb-line);
}
.jb-mat-foot .jb-card-foot { margin: 0; white-space: nowrap; }
/* ⚠️ 材料卡胶囊的"间距 / 尺寸"**不在这一行写** —— 基础胶囊规则在文件后半段
   （`.jb-chip-row` 那一组，约 1030 行），同权重谁在后谁赢，写在这里会被它盖掉
   （踩过：这里写的 `gap: 12px 8px` 被后面的 `gap: 6px` 顶掉，界面上两行标签贴在一起）。
   真正的覆盖写在下面 `.jb-chip-row .jb-chip` 之后，见注释「材料卡覆盖」。 */

.jb-industry {
  position: relative; display: flex; align-items: flex-end;
  /* ⚠️ 高度**只由比例算**（不提像素）：`height: auto` + `aspect-ratio` ——
     格子变宽，高度按 `--jb-industry-ratio` 跟着长，**比例永远一样**；
     `min-height` 只是兜底（窄到比例算出来不足 200 时不让格子塌）。 */
  height: auto; aspect-ratio: var(--jb-industry-ratio);
  min-height: 200px; border-radius: var(--jb-radius-lg); overflow: clip;
  color: #fff; background-size: cover; background-position: center center;
}
/* 悬停图片放大（2026-10-14 用户要求，与材料/工艺卡同一手感）：
   ⚠️ 行业格用的是 `background-image` 内联样式，没法直接 transform，
      所以让 ::before 用 `background-image: inherit` **接住那张图**，只缩放这一层 ——
      好处是**不用改任何 HTML**：线上首页那 8 个行业格也自动一起有这效果。
      文字在 .jb-industry-body（z-index 2），不跟着变大。 */
.jb-industry::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: inherit; background-size: cover; background-position: center center;
  transition: transform .55s ease;
}
.jb-industry:hover::before { transform: scale(1.06); }
.jb-industry::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0, 36, 96, .10) 0%, rgba(0, 36, 96, .90) 100%);
}
.jb-industry-body { position: relative; z-index: 2; padding: 20px; }
.jb-industry-title { color: #fff; font-size: 1.05rem; margin-bottom: 4px; }
.jb-industry-text { font-size: .85rem; color: #c7d2e0; margin: 0; }

.jb-chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.jb-chip {
  padding: 8px 15px; border: 1px solid var(--jb-line); border-radius: 999px;
  font-size: .88rem; color: var(--jb-ink); background: #fff;
}
.jb-chip:hover { border-color: var(--jb-brand); color: var(--jb-brand); }

.jb-steps { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.jb-steps > * { min-width: 0; }
.jb-step { position: relative; }
.jb-step-num {
  width: 46px; height: 46px; border-radius: 50%; background: var(--jb-navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; margin-bottom: 16px;
}
.jb-step:hover .jb-step-num { background: var(--jb-brand); }
.jb-step-title { font-size: 1.05rem; margin-bottom: 8px; }
.jb-step-text { font-size: .92rem; margin: 0; }

.jb-post-meta { font-size: .8rem; color: var(--jb-muted); display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.jb-post-title { font-size: 1.05rem; margin-bottom: 10px; overflow-wrap: anywhere; word-break: break-word; }
/* ⚠️ `position: relative` = 给卡片里那个"整卡可点"的链接做**定位祖先**（见 `.stretched-link`） */
.jb-post-card { position: relative; padding: 0; overflow: clip; }
/* 卡片交互（用户 2026-10-14）：
   ① 标题是**唯一链接**，用 Bootstrap 现成的 `.stretched-link` 铺满整张卡 ——
      点标题 / 点图 / 点 "View details" 都进详情页。
      （用户 2026-10-14：不自己写 `::after` —— bootstrap.css 里 `.stretched-link::after`
        就是同一条规则，重复实现只会跟框架脱节。
        前提：祖先已定位，见 `.jb-post-card { position: relative }`；
        卡里**不能再有第二个可点元素**，否则会被这层盖住。）
   ② 鼠标移到卡片上图片轻微放大（overflow: clip 保证缩放的图不溢出、也不推布局）；
   ③ 标题、描述都走 clamp-2：超两行**出省略号**，卡片高度不变；
   ④ 标题 / 描述**各占满两行的高度** —— 一行标题的卡与两行标题的卡，
      下面的 MATERIAL / INDUSTRY / View details 必须左右对齐（用户 2026-10-14 反馈）。 */
.jb-post-card .jb-thumb { transition: transform .35s ease; }
/* ④ 一行也预留两行的位（关键：clamp-2 只保证"最多两行"，
      管不了"只占一行" —— 同一排卡片会从标题开始一路错位）。
   em 相对各自字号：标题 line-height 1.25 → 2.5em；描述 line-height 1.65 → 3.3em。
   ⚠️ 以后改 .jb-post-title / .jb-card-text 的字号或行高，这两处要跟着一起改。 */
.jb-post-card .jb-post-title { min-height: 2.5em; }
.jb-post-card .jb-card-text { min-height: 3.3em; }
.jb-post-card:hover .jb-thumb { transform: scale(1.05); }
.jb-card-link { color: inherit; }
.jb-card-link:hover { color: var(--jb-brand); }
/* ⚠️ 铺满整卡的点击层**不在这里**：用 Bootstrap 的 `.stretched-link`（见上面 ①） */
.jb-post-card .jb-post-body { padding: 22px; display: flex; flex-direction: column; flex: 1 1 auto; }
.jb-post-card .jb-thumb { border-radius: 0; }

.jb-quote { background: var(--jb-navy); color: #c7d2e0; }
.jb-quote .jb-title { color: #fff; }
.jb-quote .jb-eyebrow { color: var(--jb-brand-300); }
.jb-form-card { background: #fff; border-radius: var(--jb-radius-lg); padding: 28px; box-shadow: var(--jb-shadow-lg); }
.jb-form-card .form-label { font-weight: 600; color: var(--jb-navy); font-size: .9rem; }
.jb-form-card .form-control { border-radius: var(--jb-radius); border-color: var(--jb-line); padding: .7rem .85rem; }
.jb-form-card .form-control:focus { border-color: var(--jb-brand); box-shadow: 0 0 0 .2rem rgba(252, 108, 20, .18); }
.jb-contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.jb-contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.jb-contact-list i { color: var(--jb-brand-300); font-size: 1.1rem; margin-top: 3px; }
.jb-contact-list strong { display: block; color: #fff; font-size: .92rem; }

.jb-footer { background: #001a45; color: #93a3b8; font-size: .92rem; }   /* 比页头条再暗一档，压住页面底部 */
.jb-footer-title {
  color: #fff; font-size: .95rem; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 18px;
}
.jb-footer a { color: #93a3b8; }
.jb-footer a:hover { color: #fff; }
.jb-footer-links, .jb-footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.jb-footer-contact i { color: var(--jb-brand); margin-right: 8px; }
.jb-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 44px;
  padding: 18px 0; font-size: .85rem;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
}
.jb-social { display: flex; gap: 10px; }
.jb-social a {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .08);
  display: flex; align-items: center; justify-content: center;
}
.jb-social a:hover { background: var(--jb-brand); color: #fff; }

.jb-float { position: fixed; right: 18px; bottom: 92px; z-index: 1040; display: grid; gap: 10px; }
.jb-float a {
  width: 44px; height: 44px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.15rem; box-shadow: var(--jb-shadow);
}
.jb-float-wa { background: #25d366; }
.jb-float-mail { background: var(--jb-navy-700); }
.jb-float-top { background: var(--jb-brand); opacity: 0; pointer-events: none; transition: opacity .25s; }
.jb-float-top.is-visible { opacity: 1; pointer-events: auto; }

@media (max-width: 1199.98px) {
  .jb-hero-inner { min-height: 660px; padding: 56px 0; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .jb-nav .nav-link { font-size: 1rem; padding: 1rem .55rem !important; }
}

@media (max-width: 991.98px) {
  .jb-hero-inner { min-height: 620px; padding: 48px 0; }
}

@media (max-width: 767.98px) {
  .jb-hero-inner { min-height: 640px; padding: 44px 0; }

  .jb-trust-inner { gap: 14px; }
  .jb-trust-label { margin-bottom: 10px; }
  .jb-trust-block + .jb-trust-block { padding-top: 12px; }
}

@media (max-width: 359.98px) {
  .jb-hero-points { display: none; }
}

@media (max-width: 991.98px) {
  .jb-section { padding: 52px 0; }
  .jb-section-head { margin-bottom: 32px; }
  .jb-nav .nav-link { padding: .7rem 0 !important; border-bottom: 1px solid var(--jb-line); }
  .jb-nav .dropdown-menu { box-shadow: none; padding: 0 0 0 14px; min-width: 0; }
  .jb-nav .dropdown-menu.jb-mega.show { display: block; min-width: 0; }
  .jb-nav-cta { margin: 14px 0 6px; }
  .jb-float { bottom: 78px; right: 12px; }
}

@media (max-width: 575.98px) {
  .jb-hero-actions .btn { width: 100%; text-align: center; }

  .jb-hero-inner { min-height: 680px; padding: 32px 0; }
  .jb-hero h1 { font-size: 1.6rem; }
  .jb-hero-sub { font-size: .95rem; margin-bottom: 18px; }
  .jb-hero-points { gap: 8px; margin-bottom: 20px; }
  .jb-hero-points li { font-size: .88rem; }
  .jb-form-card { padding: 20px; }
  .jb-card { padding: 20px; }
  .jb-logo-wall { grid-template-columns: repeat(auto-fill, minmax(min(132px, 100%), 1fr)); }
  .jb-logo-wall img { height: 64px; }
}

/* ══════════════════════════════════════════════════════════════════════
   列表页（产品 / 材料**共用**）—— 栏目页头 · 侧栏栏目树 · 工具条 · 分页 · 底部询价条
   ⚠️ 这几块只加类，不改首页既有规则；条目卡复用首页的 .jb-card / .jb-post-card
   ══════════════════════════════════════════════════════════════════════ */

/* ── 栏目页头（面包屑 + 栏目名 + 介绍 + 询价入口） ─────────────────────── */
.jb-pagehead { background: var(--jb-navy); color: #c7d2e0; padding: 34px 0 38px; }
/* 只有面包屑的栏目页头（文章详情在用）：**保持和别的页面同一套深蓝底**
   （用户 2026-10-15 澄清："面包屑那里也是这个样式" —— 指的是「关于我们」那种蓝底面包屑，
     所以不改成白底）。因为这条上只有面包屑、没有标题/简介，上下留白收窄到 22/24。
   ⚠️ 面包屑自带 14px 下边距，这里一并清零，否则底部会多一条空档。 */
.jb-pagehead--crumb { padding: 22px 0 24px; }
.jb-pagehead--crumb .jb-breadcrumb { margin-bottom: 0; }
/* 面包屑在左、询价按钮在右（文章页头，用户 2026-10-15）—— 和其它页头的"文案左 / 按钮右"同一条规矩 */
.jb-crumb-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
}
/* 「日期 + 分享」一行左侧那半天：字号提到 1rem 才和右边 36px 的圆钮配平
   （用户 2026-10-15："左侧的时间适当加大，因为右面图标大，尽量左右大小一致"） */
.jb-article-date { font-size: 1rem; font-weight: 600; color: var(--jb-navy-700); }

/* 文章页的「日期 + 分享」一行：日期靠左、分享靠右（用户 2026-10-15："分享放到时间右侧"）。
   ⚠️ 这一行里塞了 36px 高的圆形按钮，行高会比纯文字高一截，属于预期（别去压按钮尺寸）。 */
.jb-article-meta--bar { justify-content: space-between; gap: 16px 20px; }
.jb-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none; margin: 0 0 14px; padding: 0;
  font-size: .85rem; color: #8fa0b8;
}
/* 分隔符用 CSS 生成（**一处即可**）—— 面包屑由栏目树生成，不能靠逐项写图标 */
.jb-breadcrumb li + li::before { content: "/"; margin: 0 10px; color: #5c6f8a; }
.jb-breadcrumb a { color: #c7d2e0; }
.jb-breadcrumb a:hover { color: #fff; }
.jb-breadcrumb [aria-current] { color: #fff; }
.jb-pagehead-inner {
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 20px 40px;
}
.jb-pagehead h1 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.05rem); margin: 0 0 10px; }
.jb-pagehead p { max-width: 720px; margin: 0; }
.jb-pagehead-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* WhatsApp 按钮：**用 WhatsApp 自己的绿**（用户 2026-10-15），和右下角那颗悬浮按钮同一个
   `#25d366` —— 橙色留给"询价"（导航那颗 Free Quote），绿色＝"现在就能聊"，
   两个 CTA 一眼分得开（别把两者都做成橙色）。 */
/* ⚠️ 圆角 / 字重 / 内边距**必须和 `.btn-jb-brand` 对齐**（用户 2026-10-15："两按钮风格保持一致，
   用询盘那个圆角"）—— 上一版只改了颜色，圆角掉回 Bootstrap 的 6px，
   和橙色那颗并排放着就不像一套（截图里一个胶囊、一个方角）。 */
.btn-jb-wa {
  background: #25d366; border-color: #25d366; color: #fff;
  font-weight: 700; border-radius: 999px; padding: .7rem 1.5rem;
}
.btn-jb-wa:hover, .btn-jb-wa:focus, .btn-jb-wa:active { background: #1eb257; border-color: #1eb257; color: #fff; }

/* ── 列表页骨架：侧栏栏目树 + 条目区 ───────────────────────────────────── */
/* 栅格：侧栏固定 280，右侧 `minmax(0, 1fr)`（min 0 = 长内容不把列顶宽）；
   ⚠️ **不用 `align-items: start`**（那是"卡片等高"的坑）—— 侧栏用 `align-self: start` 单独贴顶 */
.jb-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 32px; }
/* 镜像版：**内容在左、侧栏在右**（产品详情的内容区在用，用户 2026-10-15："右面的分类呢"）。
   ⚠️ 窄屏那条媒体查询（`.jb-layout { grid-template-columns: 1fr }`）写在文件更靠后，
      同权重 → 后写的赢，所以这里不用再写一遍断点。 */
.jb-layout--right { grid-template-columns: minmax(0, 1fr) 280px; }
.jb-sidebar {
  align-self: start;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
  padding: 18px;
}
.jb-sidebar-title {
  font-size: .95rem; margin: 0 0 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--jb-line);
}
.jb-cat { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
/* 侧栏栏目：**只有一层、不折叠**（用户 2026-10-14 定）——
   这 5 个名字其实就是"加工能力 / 服务"，要一眼全看见，所以不做展开收起、
   也不摆折叠箭头（栏目树是动态的，箭头状态维护不了）。
   ⚠️ 原先的嵌套子菜单（`.jb-cat-sub`）已**删除**：需求就是一层，留着只会让下次改的人以为还有二级。 */
.jb-cat a {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: .92rem; font-weight: 600; color: var(--jb-ink);
  overflow-wrap: anywhere;   /* 栏目名很长时换行，不撑宽侧栏 */
}
.jb-cat a:hover { background: var(--jb-bg); color: var(--jb-brand); }
.jb-cat a.active { background: var(--jb-brand-50); color: var(--jb-brand); }

/* ── 工具条：条目计数 + 排序 ───────────────────────────────────────────── */
/* ⚠️ 工具条（条目计数 + 排序）**暂时不摆**（用户 2026-10-14：
   服务 / 材料这类栏目一页就几条到几十条，摆"Showing x of y + 排序"反而杂）。
   样式留着 —— 条目多起来要摆回来，直接加回 HTML 即可。 */
.jb-toolbar {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px; margin-bottom: 20px;
}
.jb-count { margin: 0; font-size: .9rem; color: var(--jb-muted); }
.jb-count strong { color: var(--jb-navy); }
.jb-sort .form-select { min-width: 190px; }

/* ── 条目卡 ────────────────────────────────────────────────────────────── */
/* 卡片结构复用首页的 `.jb-card` + `.jb-post-card`（等高 / 溢出截断 / 图框都已经是现成的） */
/* 无图 / 图挂了：同一比例的**灰底占位** —— 高度不塌、栅格不跳 */
.jb-thumb-ph {
  display: flex; align-items: center; justify-content: center;
  background: var(--jb-bg); color: var(--jb-muted); font-size: .8rem;
}

/* ── 分页（完整结构：上一页 / 页码 / 下一页 / 当前页 / 禁用） ───────────── */
.jb-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px; list-style: none; margin: 32px 0 0; padding: 0;
}
.jb-pagination a, .jb-pagination span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 14px;
  border: 1px solid var(--jb-line); border-radius: 8px; background: #fff;
  color: var(--jb-ink); font-weight: 600; font-size: .92rem;
}
.jb-pagination a:hover { border-color: var(--jb-brand); color: var(--jb-brand); }
.jb-pagination .is-active { background: var(--jb-brand); border-color: var(--jb-brand); color: #fff; }
.jb-pagination .is-disabled { opacity: .5; pointer-events: none; }

/* ── 底部询价条（列表页不放整表单，指向询价 / 联系） ───────────────────── */
.jb-cta { background: var(--jb-navy); color: #c7d2e0; padding: 34px 0; }
.jb-cta-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 18px 32px;
}
.jb-cta h2 { color: #fff; font-size: clamp(1.15rem, 2vw, 1.5rem); margin: 0 0 8px; }
.jb-cta p { margin: 0; max-width: 680px; }
.jb-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── 响应式：窄屏侧栏移到上方、整条铺满 ───────────────────────────────── */
@media (max-width: 991.98px) {
  .jb-layout { grid-template-columns: 1fr; gap: 24px; }
  .jb-pagehead { padding: 26px 0 30px; }
}
@media (max-width: 575.98px) {
  .jb-pagination a, .jb-pagination span { min-width: 38px; height: 38px; padding: 0 11px; font-size: .88rem; }
  .jb-sidebar, .jb-form-card { padding: 16px; }
}

/* ══════════════════════════════════════════════════════════════════════
   内容页（2026-10-15 新增）：文章详情 / 行业详情 / 产品详情 / 联系我们
     ① 正文排版 `.jb-prose`   ② 产品详情的图+参数两栏   ③ 侧栏小卡
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 正文排版（`.jb-prose`）：文章页与行业页共用 ────────────────────────
   以前没有这套，正文直接塞裸标签 —— 标题层级、段落间距、引用块全靠浏览器默认，很难看。
   ⚠️ 间距用 `> * + *` 统一给：相邻元素之间 18px，标题自带更大的上边距（36/28），
      所以**不用给每个标签单独写 margin**，加新标签也不会掉队。 */
.jb-prose { font-size: 1rem; line-height: 1.8; color: var(--jb-body); }
.jb-prose > * { margin: 0; }
.jb-prose > * + * { margin-top: 18px; }
.jb-prose h2 { margin-top: 36px; font-size: 1.35rem; color: var(--jb-navy); }
.jb-prose h3 { margin-top: 28px; font-size: 1.08rem; color: var(--jb-navy); }
.jb-prose strong { color: var(--jb-ink); }
.jb-prose a { color: var(--jb-brand-600); text-decoration: underline; text-underline-offset: 2px; }
.jb-prose ul, .jb-prose ol { padding-left: 1.3rem; }
.jb-prose li + li { margin-top: 8px; }
.jb-prose img { display: block; width: 100%; border-radius: var(--jb-radius); }
.jb-prose figure { margin: 28px 0; }
.jb-prose figcaption { margin-top: 8px; font-size: .82rem; color: var(--jb-muted); text-align: center; }
.jb-prose blockquote {
  padding: 18px 22px; border-left: 3px solid var(--jb-brand); background: var(--jb-brand-50);
  border-radius: 0 var(--jb-radius) var(--jb-radius) 0; color: var(--jb-navy); font-weight: 600;
}
.jb-prose code { padding: 2px 6px; background: var(--jb-bg); border-radius: 4px; font-size: .9em; }
.jb-prose table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.jb-prose th, .jb-prose td { padding: 12px 14px; border-bottom: 1px solid var(--jb-line); text-align: left; vertical-align: top; }
.jb-prose th { background: var(--jb-brand-50); color: var(--jb-navy); white-space: nowrap; }
/* 文章头：分类 / 日期 一行，标题，摘要 —— 宽度收在 820，别拉成一行 1000px 的长句 */
.jb-article-head { max-width: 820px; }
.jb-article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--jb-muted);
}
.jb-article-meta .jb-chip { padding: 3px 10px; font-size: .76rem; }
/* 正文区宽度：文章/行业正文也别铺满 1296（一行 100+ 字符读不动） */
.jb-article-body { max-width: 820px; }

/* ── ② 产品详情：图集（左）+ 产品信息（右）────────────────────────────────
   ⚠️ 左栏**固定在 520 左右**（用户 2026-10-15：主图 1:1；要是让它吃满 1fr，
      860 宽的正方形主图会变成一面墙）。右栏吃掉剩下的宽度。 */
.jb-product { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: 36px; align-items: start; }
@media (max-width: 991.98px) { .jb-product { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

/* 主图：**1:1**（用户 2026-10-15："外面列表是 1:1，所以里面也是 1:1"）；
   视频那格在主图上叠一个播放圆标（`.is-video` 由 app.js 的 `initGallery()` 切） */
.jb-gallery-main {
  position: relative; overflow: clip; border-radius: var(--jb-radius-lg); background: var(--jb-navy);
}
.jb-gallery-main img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.jb-gallery-main .jb-play { display: none; }
.jb-gallery-main.is-video .jb-play { display: flex; }

/* 小图带：**横向滚动**（固定 94px 一格，多了就滚）+ 两端箭头（用户 2026-10-15：
   "小图大图都是有左右箭头的吧，比如小图数量多了以后呢"）。
   ⚠️ 藏掉横向滚动条：细条会顶乱这一行的高度，箭头已经替代了它的作用。 */
.jb-thumbs-bar { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.jb-gallery-thumbs {
  flex: 1 1 auto; display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none;
}
.jb-gallery-thumbs::-webkit-scrollbar { display: none; }
.jb-gallery-thumb {
  position: relative; flex: 0 0 94px; display: block; padding: 0; cursor: pointer; background: #fff;
  border: 1px solid var(--jb-line); border-radius: var(--jb-radius); overflow: clip;
  transition: border-color .2s, box-shadow .2s;
}
.jb-gallery-thumb img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.jb-gallery-thumb:hover { border-color: var(--jb-brand); }
.jb-gallery-thumb.is-active { border-color: var(--jb-brand); box-shadow: 0 0 0 2px var(--jb-brand-50); }
/* 小图带两端的箭头（没有溢出时由 JS 加 `hidden` 藏起来） */
.jb-thumbs-nav {
  flex: 0 0 30px; width: 30px; height: 30px; cursor: pointer; background: #fff;
  border: 1px solid var(--jb-line); border-radius: 50%; color: var(--jb-navy-700);
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background .2s, border-color .2s;
}
.jb-thumbs-nav:hover { background: var(--jb-brand); border-color: var(--jb-brand); color: #fff; }
/* ⚠️ 这条必须写：上面是 `display: flex`，会**顶掉** `hidden` 属性的默认 `display: none` */
.jb-thumbs-nav[hidden] { display: none; }

/* 主图上的左右翻页按钮（半透明白圆 + 深蓝箭头，悬停变品牌橙） */
.jb-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border: 0; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .88); color: var(--jb-navy); font-size: 1.15rem;
  box-shadow: var(--jb-shadow); transition: background .2s, color .2s;
}
.jb-gallery-nav:hover { background: var(--jb-brand); color: #fff; }
.jb-gallery-prev { left: 14px; }
.jb-gallery-next { right: 14px; }

/* 产品页标题区：**通栏、压在图片上方**（用户 2026-10-15："标题描述挪到一行，就是图片上方"）
   ⚠️ **不限宽**（用户 2026-10-15 二次："这个标题快也要铺满吧"）—— 上一版写死 900，
      长标题会在右边留一大片空，看着像"没铺满"。 */
.jb-prod-head { max-width: none; margin-bottom: 26px; }
.jb-prod-head > h1 { font-size: clamp(1.45rem, 2.6vw, 1.95rem); margin: 0 0 10px; }
.jb-prod-head .jb-lead { font-size: 1rem; line-height: 1.65; margin: 0; }
/* 分享按钮挂在描述下面、靠左（用户 2026-10-15："少了 facebook 那 3 个按钮，描述下方左面"） */
.jb-prod-head .jb-share { margin-top: 18px; }

/* 播放圆标（主图 / 小图共用）：深蓝半透明圆 + 白三角；`pointer-events: none` 不挡点击 */
.jb-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 36, 96, .62); color: #fff; font-size: 1.35rem;
}
.jb-gallery-thumb .jb-play { width: 26px; height: 26px; font-size: .9rem; }

/* 右栏（产品信息）：标题 → 描述 → 动作 → 能改什么 → 分类 → 参数 */
.jb-prod-info > h1 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 10px; }
.jb-prod-info .jb-lead { font-size: .98rem; line-height: 1.65; margin: 0 0 22px; }

/* ── 行业详情页顶部（用户 2026-10-15）：**单图/视频 + 信息** 两栏 ──────────────
   "右侧内容参考产品详情，没有轮播图，只有一个图片或视频；右侧放标题、描述、
     facebook 那些分享，以及 Customisable 卡片"。所以比起 `.jb-product`：
       ① 媒体列**只有一张**（没有图集/缩略图/箭头）；
       ② 媒体列窄一点（420），把宽度让给右边的标题 + 卡片。
   ⚠️ 转动态时媒体换成 `<video>` 即可，两栏结构不用动。 */
.jb-ind-top { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; align-items: start; }
/* ⚠️ **长标题必须能断行**（用户 2026-10-15："标题过长的问题"）：押测里把标题写成
   `AutomotiveAutomotive…` 这种没有空格的超长串，`overflow-wrap: normal` 时它**不换行**，
   直接冲出栏目、压到悬浮按钮上。`anywhere` 连"无空格长串"也能断，而且参与 min-content 计算，
   grid/flex 里不会被它顶宽。三个内容页的标题一起加（同一类问题）。 */
.jb-ind-info > h1,
.jb-prod-head > h1,
.jb-prod-info > h1,
.jb-article-body > h1 { overflow-wrap: anywhere; }
@media (max-width: 991.98px) { .jb-ind-top { grid-template-columns: minmax(0, 1fr); gap: 22px; } }
.jb-ind-info > h1 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 0 0 10px; }
.jb-ind-info .jb-lead { font-size: .98rem; line-height: 1.65; margin: 0 0 20px; }
/* 关键数字在 420 宽的列里自动排成 2×2（`.jb-stats` 本来就是 auto-fit，这里只是收紧间距） */
.jb-ind-top .jb-stats { gap: 12px; margin-top: 16px; }
.jb-ind-top .jb-stat { padding: 14px; }
/* 参数行：左标签右值（`.jb-proc-facts` 那套的轻量版，这里是纯文字） */
.jb-spec { margin: 0; display: grid; gap: 0; }
.jb-spec > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--jb-line); }
.jb-spec dt { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jb-muted); padding-top: 2px; }
.jb-spec dd { margin: 0; font-size: .9rem; color: var(--jb-ink); overflow-wrap: anywhere; }

/* ── ③ 侧栏小卡（相关文章 / 其他行业 / 联系入口）──────────────────────── */
.jb-side-card {
  margin-top: 22px; padding: 18px;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
}
.jb-side-card-title {
  font-size: .95rem; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--jb-line);
}
.jb-side-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.jb-side-list a { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; color: var(--jb-ink); }
.jb-side-list a:hover { color: var(--jb-brand); }
.jb-side-list img { flex: 0 0 64px; width: 64px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; }

/* ── ④ 社交分享（`.jb-share`）：文章详情 / 行业详情各一份（用户 2026-10-15）────────
   图标用站点自己的 **Bootstrap Icons**（`bi-facebook` / `bi-twitter-x` / `bi-linkedin`），
   不是参考站那套 icofont；点开的弹窗逻辑在 app.js 的 `initShareLinks()`（HTML 只写 data-share）。
   ⚠️ 圆形按钮 36px：比文字链更"像分享"，也不会把标题行拉高。 */
.jb-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* ⚠️ 不再有 "Share" 字样（用户 2026-10-15："Share 文字就不要了"）——
   原来那条 `.jb-share-label` 规则**已删**。三颗圆钮本身就是通用认知：
   悬停有 `title` 提示、读屏有 `aria-label`。 */
/* X（推特）那颗是**内联 SVG**（自托管图标库没有 `bi-twitter-x`）：去掉基线间隙、与字体图标对齐 */
.jb-share svg { display: block; }
.jb-share button {
  width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--jb-line); border-radius: 50%; background: #fff; color: var(--jb-navy-700);
  font-size: 1rem; cursor: pointer; transition: color .2s, background .2s, border-color .2s, transform .2s;
}
.jb-share button:hover {
  color: #fff; background: var(--jb-brand); border-color: var(--jb-brand); transform: translateY(-2px);
}

/* ── 内容区三层层级（用户 2026-10-15："标题、描述和正文要多少明显区分点吧"）────────
   ① 标题：最大 + 深蓝 + 最粗；② 描述：左侧一道橙杠 + 略大字号（新闻里 standfirst 的读感）；
   ③ 正文：基准字号、行距更松（`.jb-prose` 自己管）。
   三层靠**字号 / 颜色 / 那道橙杠**分开，不用分割线也不堆间距 —— 分割线一多反而更糊。 */
.jb-article-body > h1 { font-size: clamp(1.6rem, 3vw, 2.15rem); line-height: 1.18; margin: 0 0 14px; }
.jb-article-body .jb-lead {
  font-size: 1.04rem; line-height: 1.7; color: var(--jb-navy-700);
  border-left: 3px solid var(--jb-brand); padding-left: 16px;
  /* ⚠️ 下面必须留边距：原来写的是 `margin: 0`，描述跟紧随其后的头图**贴在一起**
     （用户 2026-10-15 报的就是这个）。头图只有 `mb-4`（下边距），上边距全靠这里。 */
  margin: 0 0 26px;
}

/* ⚠️ 正文最终是 **wangEditor 的输出**（用户 2026-10-15："右侧内容没那么复杂，最终都是
   wangeditor，所以做好内容区域的通用样式就行了"）—— 编辑器可能吐出 h1 / h4~h6 / hr / pre，
   `.jb-prose` 一开始只兜了 h2/h3，这里补齐，否则这几个标签会按浏览器默认跑版。 */
.jb-prose h1 { margin-top: 36px; font-size: 1.5rem; color: var(--jb-navy); }
.jb-prose h4, .jb-prose h5, .jb-prose h6 { margin-top: 24px; font-size: 1rem; color: var(--jb-navy); }
.jb-prose hr { border: 0; border-top: 1px solid var(--jb-line); }
.jb-prose pre {
  padding: 16px 18px; background: var(--jb-navy); color: #e8eef7; border-radius: var(--jb-radius);
  overflow-x: auto; font-size: .88rem;
}
.jb-prose pre code { padding: 0; background: none; color: inherit; }

/* ══════════════════════════════════════════════════════════════════════
   单页（关于我们 / 联系我们这类）—— 只补这一页**真正新增**的几个零件；
   其余全部复用首页既有类（pagehead / section / grid / card / stats / steps / chips / quote）
   ══════════════════════════════════════════════════════════════════════ */

/* ── 栏内小标题（材料区块里的 Metals / Plastics 这种） ─────────────────── */
.jb-subtitle {
  font-size: .82rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--jb-muted); margin: 26px 0 12px;
}

/* ── 能力参数格：一行一项（加工范围 / 材料能力都用它） ───────────────────
   ⚠️ 为什么不用真 `<table>`：真表格在手机上必然横向溢出，或者被迫塞一个内部滚动条；
      "一格一项"的网格式天然自适应（下限写 `min(x, 100%)` 兜住窄屏）。 */
.jb-spec-list {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  margin: 0;
}
.jb-spec {
  background: #fff; border: 1px solid var(--jb-line);
  border-radius: var(--jb-radius); padding: 15px 16px;
}
.jb-spec-k {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--jb-muted); margin-bottom: 6px;
}
.jb-spec-v {
  margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--jb-navy);
  overflow-wrap: anywhere;
}
.jb-spec-v small {
  display: block; margin-top: 5px;
  font-size: .84rem; font-weight: 500; color: var(--jb-body); line-height: 1.5;
}

/* ── 卡片里的一行"能力参数"（典型零件卡用）：贴卡片底部，与描述用虚线隔开 ── */
.jb-card-spec {
  margin: auto 0 0; padding-top: 12px;
  border-top: 1px dashed var(--jb-line);
  font-size: .85rem; color: var(--jb-muted);
}

/* ── 图 + 图注（工厂 / 检测照片） ─────────────────────────────────────── */
.jb-figure { margin: 0; }
.jb-figure figcaption {
  margin-top: 10px; font-size: .86rem; color: var(--jb-muted); line-height: 1.5;
}
/* 图注**压在图上**的变体（用户 2026-10-15："这些文字去掉吧，都放到图片上用遮罩"）——
   与全站"图上文字"同一个记号：**居中** + 遮罩；多行 / 超长词用 overflow-wrap 兜住。
   ⚠️ 图注绝对定位后不再占高度，图的 4:3 比例（`.jb-thumb`）就是这个格子的高度。 */
.jb-figure--cap { position: relative; display: block; overflow: clip; }
.jb-figure--cap > img { transition: transform .5s ease; }
.jb-figure--cap figcaption {
  position: absolute; inset: 0; margin: 0; padding: 12px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow-wrap: anywhere;
  background: linear-gradient(180deg, rgba(0, 36, 96, .22) 0%, rgba(0, 36, 96, .82) 100%);
  color: #fff; font-size: .82rem; line-height: 1.35; font-weight: 600;
  border-radius: var(--jb-radius); transition: background .3s ease;
}
/* 悬停反馈（用户 2026-10-15："这三张图都需要移动过去有效果"）：
   与工艺卡 / 共用条同一套 —— 图轻推近 + 遮罩加深 */
.jb-figure--cap:hover > img { transform: scale(1.05); }
.jb-figure--cap:hover figcaption {
  background: linear-gradient(180deg, rgba(0, 36, 96, .32) 0%, rgba(0, 36, 96, .90) 100%);
}
/* 大图（质检段的主图）上的图注放大一档：图大、字太小会显得空 */
.jb-figure--cap.jb-figure--lg figcaption { font-size: .95rem; padding: 18px; }

/* ══════════════════════════════════════════════════════════════════════
   链条速览条（单页用）：把"材料 → 工艺 → 零件 → 行业"摆在首屏当目录
   ══════════════════════════════════════════════════════════════════════ */
.jb-chainbar { background: #fff; padding: 40px 0; border-bottom: 1px solid var(--jb-line); }
.jb-chain { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.jb-chain-item {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 20px 20px 22px; background: var(--jb-bg);
  border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.jb-chain-item:hover { border-color: var(--jb-brand); box-shadow: 0 12px 26px rgba(0, 36, 96, .09); transform: translateY(-2px); }
.jb-chain-no { font-size: .72rem; font-weight: 800; letter-spacing: .16em; color: var(--jb-brand); }
.jb-chain-title { font-size: 1.05rem; margin: 0; color: var(--jb-navy); }
.jb-chain-text { font-size: .88rem; color: var(--jb-body); margin: 0; overflow-wrap: anywhere; }
.jb-chain-num { margin-top: auto; padding-top: 10px; font-size: 1.5rem; font-weight: 800; color: var(--jb-navy); line-height: 1; }
.jb-chain-num em { margin-left: 6px; font-style: normal; font-size: .8rem; font-weight: 600; color: var(--jb-muted); }
/* ⚠️ 卡片之间的箭头 2026-10-14 去掉：贴在两格边缘上，尺寸/位置都不好控，观感也乱。
      链条靠 01–04 的编号 + 四段的 eyebrow 措辞来串，不靠箭头。 */

/* ── 图上覆盖文字的卡片（**02 工艺**在用；01 材料用的是下面的"横条"）───────
   简介压在图片上（遮罩），鼠标移上去图片缩放、简介展开；
   尺寸/参数那行（`.jb-photo-card-spec`）留在图下。
   ⚠️ 遮罩用和行业格一致的"上浅下深"渐变 —— 白字落在任何一张图上都读得清。
   ⚠️ 2026-10-14：01 材料 与 02 工艺 两块**排法对调**过，改的时候别看错区块。 ── */
.jb-grid--thirds { grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.jb-photo-card {
  display: flex; flex-direction: column; overflow: clip;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
}
/* 图框 = **16:9 定比例** + **绝对定位的文字层**：
   这就是"padding-top 撑高度"那套的现代写法 —— 高度只由比例决定，里面的文字再长也顶不动卡片。
   （⚠️ 原先把文字放在正常流里，塞一段超长文案会把图框撑高、把牌号行顶变形） */
.jb-photo-card-media {
  position: relative; aspect-ratio: 16 / 9; overflow: clip; background: var(--jb-navy);
}
/* 图片一律 object-fit: cover —— 素材不是 16:9（4:3 / 1:1 / 竖图）时**裁切填满**，不拉伸变形 */
.jb-photo-card-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform .55s ease;
}
/* 遮罩整体加深（2026-10-14 用户要求"再深点"）—— 标题现在压在图片正中，浅遮罩根本读不清 */
.jb-photo-card-media::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0, 36, 96, .46) 0%,
    rgba(0, 36, 96, .62) 48%,
    rgba(0, 36, 96, .95) 100%);
}
.jb-photo-card:hover .jb-photo-card-media > img { transform: scale(1.06); }

/* ⚠️ 图上文字**水平 + 垂直都居中**；简介默认收起，**鼠标移上去才展开**（2026-10-14 用户要求）——
   · 收起用 max-height + opacity（不是 display:none），这样才有过渡；
   · 展开的同时标题缩一号，两块合起来仍居中；
   · ⚠️ 触屏没有 hover：`@media (hover: none)` 里让简介**常显**，否则手机上永远看不到这段简介。 */
.jb-photo-card-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 18px 22px; text-align: center; overflow: hidden;
}
.jb-photo-card-title {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);   /* 比正文（.88rem）大一大截才"显眼" */
  line-height: 1.2; letter-spacing: .01em; color: #fff; margin: 0;
  overflow-wrap: anywhere; text-shadow: 0 1px 12px rgba(9, 18, 32, .6);
  transition: font-size .3s ease;
  /* ⚠️ 标题最多 2 行，超出省略号 —— 长名字不许把图框顶变形 */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.jb-photo-card-text {
  max-width: 42ch; margin: 0 auto; font-size: .88rem; line-height: 1.55; color: #e2e9f3;
  text-shadow: 0 1px 8px rgba(9, 18, 32, .6);
  max-height: 0; opacity: 0; transform: translateY(6px);
  transition: max-height .32s ease, opacity .28s ease, transform .28s ease, margin-top .28s ease;
  /* ⚠️ 简介最多 3 行（9em 的 max-height 是"展开动画"的上限，真正的行数上限在这里） */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.jb-photo-card:hover .jb-photo-card-title { font-size: clamp(1.2rem, 2.1vw, 1.5rem); }
.jb-photo-card:hover .jb-photo-card-text { max-height: 9em; opacity: 1; transform: none; margin-top: 8px; }
/* 触屏 / 无悬停设备：简介常显（否则手机上永远看不到），标题按"展开态"那一号 */
@media (hover: none) {
  .jb-photo-card-title { font-size: clamp(1.2rem, 4.6vw, 1.5rem); }
  .jb-photo-card-text { max-height: 9em; opacity: 1; transform: none; margin-top: 8px; }
}
.jb-photo-card-spec {
  margin: 0; padding: 14px 20px; border-top: 1px dashed var(--jb-line);
  font-size: .85rem; color: var(--jb-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}

/* ── 图在左、字在右的横条（**03 零件**在用）—— 与 02 工艺的覆字卡刻意不同：
      图方、字右侧成列，2 列排布（`.jb-grid--halves`） ── */
.jb-grid--halves { grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); }
.jb-row-photo {
  display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: flex-start;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg); padding: 14px;
}
.jb-row-photo > img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--jb-radius); }
.jb-row-photo-body { display: flex; min-width: 0; flex-direction: column; gap: 6px; }
.jb-row-photo-title { font-size: 1rem; margin: 0; overflow-wrap: anywhere; }
.jb-row-photo-text { font-size: .9rem; color: var(--jb-body); margin: 0; }
.jb-row-photo-spec {
  margin: 0; padding-top: 8px; border-top: 1px dashed var(--jb-line);
  font-size: .82rem; color: var(--jb-muted);
}

/* ── 纯文字的规格清单行（**01 材料**在用）—— 没有图、没有图标，也**没有行首编号**：
      左：分组名 + 一句话；右：牌号 + 相配工艺（竖线分隔）
      ⚠️ 2026-10-14 用户要求去掉行首那列数字，所以第一列不再预留编号位 ── */
.jb-row-text-list { border-top: 1px solid var(--jb-line); }
.jb-row-text {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 24px;
  align-items: flex-start; padding: 22px 6px; border-bottom: 1px solid var(--jb-line);
  transition: background .16s ease;
}
.jb-row-text:hover { background: var(--jb-bg); }
.jb-row-text-title { font-size: 1.1rem; margin: 0 0 6px; overflow-wrap: anywhere; }
.jb-row-text-desc { font-size: .93rem; color: var(--jb-body); margin: 0; }
.jb-row-text-spec {
  margin: 0; padding-left: 18px; border-left: 2px solid var(--jb-line);
  font-size: .85rem; color: var(--jb-muted); overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  .jb-row-text { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 2px; }
  .jb-row-text-spec { padding-left: 0; border-left: 0; }
  .jb-row-photo { grid-template-columns: 96px minmax(0, 1fr); }
}

/* 行业格里补的一行"什么材料 + 什么工艺"（深色遮罩上的小字，比正文再暗一档） */
.jb-industry-meta { margin: 8px 0 0; font-size: .76rem; color: #9fb0c6; letter-spacing: .01em; }

/* ══════════════════════════════════════════════════════════════════════
   「分节页」专用零件 —— 一页讲好几块的单页（加工 `single_machining` / 材料 `single_materials`）
     ① 吸顶分节 Tab 条（滚动联动）  ② 内容版工艺卡  ③ 材料牌号卡  ④ 表面处理分组
   ⚠️ 只有这两个页面引这几样，改这里不影响其它页
   ══════════════════════════════════════════════════════════════════════ */

/* ── ① 吸顶分节 Tab —— **滚动联动**（不是"点一下换一屏"）────────────────
   行为在 `app.js` 的 `initSectionTabs()`；这里只管长相 + 吸顶位置。
   ⚠️ `top: var(--jb-header-h)` 必须等于页头实际高度（吸顶页头挡在上面）：
      不相等就会漏一条缝、或者盖住页头。改页头 padding / 字号时回来同步这两个值。 */
:root { --jb-header-h: 66px; --jb-tabs-h: 58px; }   /* 实测：页头 66、tab 条 59（写字号/padding 时回来量） */
.jb-tabs {
  position: sticky; top: var(--jb-header-h); z-index: 1025;
  background: #fff; border-bottom: 1px solid var(--jb-line);
}
/* 手机上一条排不下 → **横向滑**（不换行、不折成两排），滚动条藏掉 */
.jb-tab-list {
  display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.jb-tab-list::-webkit-scrollbar { display: none; }
.jb-tab {
  display: block; padding: 15px 18px; white-space: nowrap;
  font-weight: 700; font-size: .96rem; color: var(--jb-body);
  border-bottom: 3px solid transparent; transition: color .16s, border-color .16s;
}
.jb-tab:hover { color: var(--jb-navy); }
.jb-tab.is-active { color: var(--jb-navy); border-bottom-color: var(--jb-brand); }
/* 吸顶挡在前面 → 锚点跳转的落点要往下让开"页头 + 这条 tab"，否则标题会被压住 */
main.jb-has-tabs section[id] { scroll-margin-top: calc(var(--jb-header-h) + var(--jb-tabs-h) + 8px); }
/* 平滑滚动只在"没关动效"时开（与 app.js 里 counters 的判定同一个口径） */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ── ② 内容版工艺卡：图 + 标题 + 两三句介绍 + 参数清单 ────────────────────
   与关于我们那张 `.jb-photo-card`（简介**悬停才展开**）**刻意不同**：
   这一页就是来讲这几件事的，介绍必须**一眼看得见**，所以不复用那套遮罩展开的写法。 */
.jb-spec-grid { display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); }
.jb-spec-card {
  display: flex; flex-direction: column; overflow: clip;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.jb-spec-card:hover { border-color: rgba(252, 108, 20, .45); box-shadow: var(--jb-shadow); transform: translateY(-3px); }
/* 图固定 16:9 + object-fit: cover —— 素材不是 16:9 也只裁不拉伸，卡片高度不被图带跑 */
.jb-spec-media { aspect-ratio: 16 / 9; overflow: clip; background: var(--jb-bg); }
.jb-spec-media > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.jb-spec-card:hover .jb-spec-media > img { transform: scale(1.04); }
.jb-spec-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px 22px 22px; }
.jb-spec-title { font-size: 1.15rem; margin: 0 0 8px; overflow-wrap: anywhere; }
.jb-spec-text { font-size: .92rem; color: var(--jb-body); margin: 0 0 16px; }
/* 参数清单贴卡片底部（`margin-top: auto`）：同一排几张卡的虚线**都在同一水平线上** */
.jb-spec-list {
  list-style: none; margin: auto 0 0; padding: 14px 0 0;
  border-top: 1px dashed var(--jb-line); display: grid; gap: 8px;
}
.jb-spec-list li { display: flex; gap: 8px; align-items: flex-start; font-size: .84rem; line-height: 1.5; }
.jb-spec-list i { color: var(--jb-brand); margin-top: 2px; }
.jb-spec-k { flex: 0 0 96px; color: var(--jb-muted); font-weight: 700; overflow-wrap: anywhere; }
.jb-spec-v { min-width: 0; color: var(--jb-ink); }

/* ── ③ 材料牌号卡（材料页用）：牌号 + 一句话 + 两行事实 ────────────────────
   ⚠️ 材料页**先立样式**（用户 2026-10-15："客户虽然没给详细的但先制作样式"）——
      牌号/参数是行业通用值，接数据时整卡替换即可，版式不用动。 */
.jb-grade-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.jb-grade {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius);
  padding: 18px 20px; transition: border-color .25s, box-shadow .25s;
}
.jb-grade:hover { border-color: rgba(252, 108, 20, .45); box-shadow: var(--jb-shadow); }
.jb-grade-name {
  font-size: 1.05rem; margin: 0 0 6px; color: var(--jb-navy); letter-spacing: .01em;
  min-height: 1.35em; overflow-wrap: anywhere;   /* 预留一行高：牌号长短不一时，下面那块也对得齐 */
}
/* 描述：**固定 4 行高**（超了出省略号、不满也占满 4 行）——
   用户 2026-10-15："上面描述最多 4 行，省略号，固定 4 行高度"，
   目的就是让一排卡片下面的**虚线分隔线整整齐齐对齐**（比较图里 4 张卡虚线参差）。
   4 行 = line-height 1.65 × 4 = 6.6em。 */
.jb-grade-text {
  font-size: .88rem; color: var(--jb-body); margin: 0 0 14px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.65; min-height: 6.6em;
}
/* 牌号卡的"事实"区：**外面这层只管分隔线与贴底**，内容是一份对钩清单
   （`.jb-proc-points`，与加工页卡片同一套零件 —— 用户 2026-10-15：
   原来两段用 `<br>` 挤在一行，改成"一行一条 + 橙色对钩"）。
   ⚠️ `margin-top: auto` 是把它推到卡片底部的，同一排卡片才对得齐。 */
/* ⚠️ **不要 `margin-top: auto`**（原来靠它贴底）：描述高度已经固定成 4 行，
   这里改成紧跟其后，一排卡片的虚线才会落在同一水平线上（用户 2026-10-15）。 */
.jb-grade-facts {
  margin: 0; padding-top: 12px; border-top: 1px dashed var(--jb-line);
  font-size: .82rem; line-height: 1.6; color: var(--jb-muted);
}
/* 清单本身：清掉外边距（间距由每条的 gap 管） */
.jb-grade-facts .jb-proc-points { margin: 0; }

/* ── ④ 表面处理分组（加工页用）：一组一张卡，**组名压在图上**（用户 2026-10-15）────
   原来组名是"深蓝粗体 + 橙色下划线"的纯文字标题，看着干、也和别处不一致；
   改成与段级共用条同一套：图 + 遮罩 + 压在图上的组名（悬停图轻推近、遮罩加深）。
   ⚠️ 图 16:9 固定高，四张卡才对得齐；卡 `padding: 0`，留白交给图下的列表。 */
.jb-finish-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); }
.jb-finish-group {
  display: flex; flex-direction: column; overflow: clip;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
}
.jb-finish-figure {
  position: relative; display: block; margin: 0; aspect-ratio: 16 / 9;
  overflow: clip; background: var(--jb-navy);
}
.jb-finish-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jb-finish-figure::after {
  content: ""; position: absolute; inset: 0; transition: background .3s ease;
  background: linear-gradient(180deg, rgba(0, 36, 96, .20) 0%, rgba(0, 36, 96, .80) 100%);
}
.jb-finish-group:hover .jb-finish-figure > img { transform: scale(1.05); }
.jb-finish-group:hover .jb-finish-figure::after {
  background: linear-gradient(180deg, rgba(0, 36, 96, .32) 0%, rgba(0, 36, 96, .90) 100%);
}
/* 组名：**居中**（与段级共用条、零件遮罩同一个记号 —— 这一轮起全站"图上文字"统一居中，
   不再用"橙色下划线"那套）。多行 / 长词靠 overflow-wrap 兜住。 */
.jb-finish-title {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 10px 16px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow-wrap: anywhere;
  color: #fff; font-size: 1.02rem; line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0, 36, 96, .55);
}
.jb-finish-list { list-style: none; margin: 0; padding: 20px 22px 22px; display: grid; gap: 12px; }
.jb-finish-list li { font-size: .87rem; line-height: 1.55; color: var(--jb-body); }
.jb-finish-list strong { display: block; color: var(--jb-navy); font-size: .93rem; }
.jb-finish-list em { font-style: normal; color: var(--jb-muted); font-size: .79rem; }

/* ── ②b 工艺卡（`.jb-proc`）—— 加工页「铣削」在用 ─────────────────────────
   **2026-10-15 改版 v2：三项并排成三列**（v1 是三项竖着堆的整行大块）。为什么改：
     ① 页面太长：v1 每块 1296 × 737，光铣削段就 2578px（整页 7419px），后面还有车削三块；
     ② 三项里"适用材料 / 应用行业 / 参数区间"**本来就是同一套**，写三遍纯浪费 ——
        用户 2026-10-15 的原话："部分内容可以合并，比如材料行业，每个仅仅介绍自己或特性"。
   现在：段头下面先给一条**共用信息条**（`.jb-shared`：材料 / 行业 / 能力区间），
        三项并排成三列，每张卡只说"我是谁 + 只有我有的特性 + 我用在哪 + 我做哪些零件"。
   ⚠️ 卡里**不再有 3 张小图**（用户 2026-10-15：标题已压到主图上、下面又有零件墙，小图冗余）。
   ⚠️ 与 `.jb-ladder`（车削段的阶梯）是**两套**，别互相搬。
   ⚠️ 窄屏只需把 `.jb-proc-list` 改单列 —— 这张卡**没有 grid-template-areas**，
      不存在"隐式列把图挤成 0 宽"那个坑（v1 踩过）。 */
.jb-proc-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jb-proc {
  display: flex; flex-direction: column; overflow: clip;
  background: #fff; border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
  transition: border-color .25s, box-shadow .25s;
}
.jb-proc:hover { border-color: rgba(252, 108, 20, .45); box-shadow: var(--jb-shadow); }
/* 主图：卡是竖着的 → 4:3 定高（v1 那种"图随文字撑高"在这里不需要）；
   标题压图上 + 遮罩，鼠标移到**整张卡**上图片轻推近、遮罩加深 */
.jb-proc-figure { position: relative; display: block; overflow: clip; aspect-ratio: 4 / 3; background: var(--jb-bg); }
.jb-proc-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jb-proc-figure::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 36, 96, 0) 40%, rgba(0, 36, 96, .80) 100%);
  transition: background .3s ease;
}
.jb-proc:hover .jb-proc-figure > img { transform: scale(1.045); }
.jb-proc:hover .jb-proc-figure::after {
  background: linear-gradient(180deg, rgba(0, 36, 96, .20) 0%, rgba(0, 36, 96, .90) 100%);
}
/* 图上标题：白字 + 品牌橙小横线（那根线是全站"图上标题"的记号，别看漏）。
   ⚠️ 排成 flex 列只是为了给"第二行小字"定顺序：标题(0) → `.jb-proc-sub`(2) → 橙线(3)，
      不然橙线会插在标题和小字中间。 */
.jb-proc-title {
  position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2;
  display: flex; flex-direction: column; align-items: flex-start;
  margin: 0; color: #fff; font-size: 1.22rem; line-height: 1.25;
  text-shadow: 0 1px 12px rgba(0, 36, 96, .55);
}
.jb-proc-title::after {
  order: 3;
  content: ""; display: block; width: 32px; height: 3px; margin-top: 9px;
  background: var(--jb-brand); border-radius: 2px;
}
/* 图上标题的第二行（车削段在用）：3 / 4 / 5 轴这台机器到底多了什么，比主标题小一档 */
.jb-proc-sub {
  order: 2; margin-top: 6px; font-size: .82rem; font-weight: 500;
  color: rgba(255, 255, 255, .84); overflow-wrap: anywhere;
}
.jb-proc-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; padding: 20px 22px 22px; }
.jb-proc-text { font-size: .9rem; color: var(--jb-body); margin: 0 0 14px; }
/* "只有我才有"的几条 —— **共用**的材料 / 行业 / 能力区间不写在这里，在上面的 `.jb-shared` */
.jb-proc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.jb-proc-points li { display: flex; gap: 9px; align-items: flex-start; font-size: .84rem; line-height: 1.5; color: var(--jb-ink); }
.jb-proc-points i { color: var(--jb-brand); margin-top: 3px; }
/* 附加工序（面铣 / 钻攻 / 型腔…）—— 虚线上方一小排灰片 */
.jb-proc-ops {
  display: flex; flex-wrap: wrap; gap: 6px 8px; list-style: none;
  margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--jb-line);
}
.jb-proc-ops li {
  padding: 3px 10px; background: var(--jb-bg); border-radius: 6px;
  font-size: .78rem; color: var(--jb-navy-700);
}
/* ⚠️ 胶囊当**链接**用：材料跳材料页锚点、行业跳行业列表页 —— 站内串起来才有内链 */
a.jb-chip { display: inline-block; text-decoration: none; }
/* 胶囊组默认间距：**上下 10 / 左右 8** —— 换行时上下要比左右松一点，不然两行贴在一起
   （`.jb-mat-foot` 里又单独放宽到 12/8，那里胶囊更多行） */
.jb-chip-row { display: flex; flex-wrap: wrap; gap: 10px 8px; list-style: none; margin: 0; padding: 0; }
.jb-chip-row .jb-chip { padding: 6px 13px; font-size: .82rem; }
/* ⚠️⚠️ 胶囊**绝对不许被压缩**：flex 项默认 `flex-shrink: 1`，一旦排不下，
   浏览器会**先把它们挤扁**（实测挤到 0 宽、"AAAA-9999" 每字一行 —— 看着就是坏的），
   而不是换行。必须 `flex: 0 0 auto` + 内容 `nowrap`，`flex-wrap: wrap` 才真正生效。
   （2026-10-15 压测发现：这条不加，标签一多就烂。） */
.jb-chip-row > li { flex: 0 0 auto; }
.jb-chip-row .jb-chip { white-space: nowrap; }

/* ── 「材料卡覆盖」——**必须写在上面这几条之后**（同权重、后写的赢）──────────────
   首页材料卡里的牌号胶囊：比段级那套**小一档**（它是"标签"，不是可点筛选器），
   换行时的**上下间距放宽到 12**（用户 2026-10-15："第一行标签和第二行上下间距太小"）。
   ⚠️ 这两条以前写在第 360 行附近，被这里的 `.jb-chip-row .jb-chip`（在后）盖掉了 ——
      表现就是"设了 12px 没反应、两行还贴着"。以后要改材料卡胶囊，**改这里**。 */
.jb-mat-foot .jb-chip-row { gap: 12px 8px; }
.jb-mat-card--row .jb-chip { padding: 3px 9px; font-size: .76rem; }

/* ── ②b2 段级共用信息条（`.jb-shared`）—— 铣削段在用 ───────────────────────
   同一段的几个工艺用的是**同一批材料、同一批行业** —— 与其在每张卡里各写一遍，不如写一遍。
   版式（用户 2026-10-15 定）：**一行两列**（材料 / 行业），每列 = **图 + 右侧胶囊**，
   组名（Materials / Industries）**压在图上**，和工艺卡标题同一套遮罩写法。
   ⚠️ 原来还有第三列 "Capability across the three"（能力区间）——
      用户 2026-10-15 说**没用**，整列删了；公差 / 批量这些数改由每张卡的"只有我有"那几条承担。
   ⚠️ 接数据时：这两块是**段级字段**，卡片里那几条是工艺级字段，别把同一份数据存两处。 */
.jb-shared {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 26px;
  margin: 0 0 26px; padding: 18px 22px;
  background: var(--jb-bg); border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
}
/* 每列：图（168px）+ 胶囊（吃掉剩下的宽度）；胶囊少时**垂直居中**，不会吊在顶上 */
.jb-shared-item {
  display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 18px;
  align-items: center; min-width: 0;
}
.jb-shared-figure {
  position: relative; display: block; margin: 0; aspect-ratio: 4 / 3;
  border-radius: var(--jb-radius); overflow: clip; background: var(--jb-navy);
}
.jb-shared-figure > img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.jb-shared-figure::after {
  content: ""; position: absolute; inset: 0; transition: background .3s ease;
  background: linear-gradient(180deg, rgba(0, 36, 96, .18) 0%, rgba(0, 36, 96, .78) 100%);
}
/* 悬停反馈（用户 2026-10-15："移动过去也有效果"）：图轻推近 + 遮罩加深 */
.jb-shared-figure:hover > img { transform: scale(1.06); }
.jb-shared-figure:hover::after {
  background: linear-gradient(180deg, rgba(0, 36, 96, .32) 0%, rgba(0, 36, 96, .90) 100%);
}
/* 组名：**横向 + 垂直都居中**，而且**不要下面那根橙色条**（用户 2026-10-15）。
   ⚠️ 居中用 `inset: 0` + flex，**不是** left/right/bottom —— 这样英语长标题折成多行时
      整块仍居中、不会从下半截往上顶；`overflow-wrap: anywhere` 兜住超长单词不横向溢出。 */
.jb-shared-title {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 10px 14px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow-wrap: anywhere;
  color: #fff; font-size: 1.02rem; line-height: 1.25;
  text-shadow: 0 1px 10px rgba(0, 36, 96, .55);
}
.jb-shared .jb-chip-row { align-content: center; }

/* ── ②f 典型部件九宫格（`.jb-parts`）—— 铣削段在用 ────────────────────────
   来源：用户 2026-10-15："典型部件其实可以用途展示出来的，一个一个小图 / 九宫格"。
   位置：工艺块正文里，**夹在"工序灰片"与"材料 / 行业胶囊"之间** ——
        先文字讲"这台机器能干嘛" → 九宫格**把用途摆出来**（一图配一行说明）→ 胶囊给延伸链接。
   ⚠️ 9 格 = **用户原话**；桌面 **9 列一排**（约 130px 一格，"用途墙"），
      <1200px 收成 3 列（3 × 3 九宫格）。列数**写死**，不用 auto-fill —— 一排七个就散了。
      数据不足 9 条时留空即可。 */
/* ── 零件墙现在在**段的末尾**（三张卡下面），不再塞在每张卡里 ─────────────
   用户 2026-10-15："下面的零部件是不是也基本是通用的，放到……3 块内容结束后的下面"——
   三种铣削做出来的零件确实大面积重叠（都是同一批机床出的活），
   所以合成**一面墙**放在三张卡之后；段宽做成 9 格一排，窄屏 3 × 3。
   （这里原来还有一行 `.jb-parts-head` 小标题，用户要求去掉这类小标题，已删。） */
.jb-parts { margin: 26px 0 0; padding: 18px 0 0; border-top: 1px dashed var(--jb-line); }
.jb-parts-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
/* 方形小图；**默认不显示文字**，鼠标移上去才用遮罩把名字浮出来
   （用户 2026-10-15："这块不要文字了，移动过去遮罩加文字显示"）。
   ⚠️ 遮罩文字必须**居中 + 能折行 + 不溢出**：inset:0 + flex 居中 + overflow-wrap。
      零件名长短差别很大（"Heat sinks" 对 "Aerospace brackets"），不许靠图撑高。 */
.jb-part { position: relative; margin: 0; border-radius: 8px; overflow: clip; background: var(--jb-bg); }
.jb-part img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.jb-part figcaption {
  position: absolute; inset: 0; z-index: 2; margin: 0; padding: 8px;
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow-wrap: anywhere;
  background: linear-gradient(180deg, rgba(0, 36, 96, .40), rgba(0, 36, 96, .86));
  color: #fff; font-size: .78rem; font-weight: 600; line-height: 1.3;
  opacity: 0; transition: opacity .25s ease;
}
.jb-part:hover figcaption { opacity: 1; }
/* ⚠️ 触屏设备没有 hover —— 那里把名字**放回图下方常显**，
   否则这些图在手机上等于就没名字了（`hover: none` 正好把这类设备筛出来）。 */
@media (hover: none) {
  .jb-part figcaption {
    position: static; opacity: 1; padding: 5px 0 0; background: none;
    color: var(--jb-body); font-weight: 400; font-size: .72rem; text-align: left;
  }
}

/* ── ②c 选型对比表（`.jb-cmp`）—— 三张工艺一块用表对比，一眼看出该选哪个 ──── */
.jb-cmp-card {
  border: 1px solid var(--jb-line); border-radius: var(--jb-radius-lg);
  background: #fff; overflow: clip;
}
/* 窄屏横滑（表格本来就该能滚），别把表格压成一列 */
.jb-cmp-scroll { overflow-x: auto; }
.jb-cmp { width: 100%; border-collapse: collapse; font-size: .88rem; }
/* ⚠️ 行距（用户 2026-10-15："表格间距大一点，现在有点近太多了"）——
   原来 13px 上下、字号 .88 挤成一块；现在上下 20px + 行高 1.7，六行也不显臃肿。 */
.jb-cmp th, .jb-cmp td {
  padding: 20px 18px; line-height: 1.7; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--jb-line);
}
.jb-cmp tbody tr:last-child th, .jb-cmp tbody tr:last-child td { border-bottom: 0; }
.jb-cmp thead th { background: var(--jb-brand-50); color: var(--jb-navy); font-weight: 700; white-space: nowrap; }
.jb-cmp tbody th {
  width: 150px; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--jb-muted); white-space: nowrap;
}
.jb-cmp td { color: var(--jb-ink); line-height: 1.6; min-width: 180px; }
.jb-cmp tbody tr:hover td { background: var(--jb-bg); }

@media (max-width: 991.98px) {
  /* 三列并排在窄屏放不下 → 单列竖排（卡本身是 flex，改列数就够，没有 areas 的坑） */
  .jb-proc-list { grid-template-columns: minmax(0, 1fr); }
  /* 共用信息条：两列改一列；图缩到 120px，跟胶囊并排。
     ⚠️ 手机上胶囊会一个个掉行（一行放不下两个），整列会很高 ——
        所以图**顶对齐**（居中会飘在列表中间，看着像没对齐）。 */
  .jb-shared { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .jb-shared-item { grid-template-columns: 120px minmax(0, 1fr); gap: 14px; align-items: start; }
  /* 零件墙：9 格一排 → 3 × 3 九宫格 */
  .jb-parts-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ── ②e 阶梯行（`.jb-ladder`）—— **车削段专用**（3 / 4 / 5 轴）──────────────
   为什么不照抄铣削那套三列大图卡（用户 2026-10-15："不是和上面一样，是要**换换风格**，
   避免审美疲劳、页面拉太长"）：车削这三档是**递进**关系（每多一根轴多一种能力），
   而共用项（材料 / 行业 / 典型零件）已经提到段级 —— 每条只剩"多出来那点能力"，
   用**横条**讲最省地方：左＝轴数徽标，中＝标题 + 一句 + 一行参数，右＝方形小图；
   两条之间夹一行"+1 轴"把递进点破。实测三条横排 ≈ 480px，比三张竖卡省 40%。
   ⚠️ 类名**必须带 `.jb-ladder` 前缀**：`.jb-step / .jb-step-title / .jb-step-text`
      这三个名字首页与关于我们页的"四步流程"（`.jb-steps`）也在用 ——
      不限定作用域会串味（2026-10-15 踩过一次：把人家 1.05rem 的标题改成了 1.1rem navy）。 */
.jb-ladder { display: grid; }
/* ⚠️ 2026-10-15 二次调整（用户）：**去掉左侧轴数徽标**，改成图片；
   图按**右 → 左 → 右**交替（第 2 条翻到左边）。换边照样用 `grid-template-areas`，
   **不用 `order`** —— `order` 只换"谁先排"，列宽还是按声明顺序发，
   图会被发到宽列上变得老大（2026-10-15 踩过一次，别再犯）。 */
.jb-ladder .jb-step {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px;
  grid-template-areas: "body media";
  gap: 26px; align-items: center; padding: 22px 0; border-top: 1px solid var(--jb-line);
}
.jb-ladder .jb-step--flip {
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-areas: "media body";
}
.jb-ladder > .jb-step:first-child { border-top: 0; padding-top: 0; }
.jb-step-body { grid-area: body; min-width: 0; }
.jb-ladder .jb-step-img {
  grid-area: media; display: block; width: 100%; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: var(--jb-radius);
}
.jb-ladder .jb-step-title { font-size: 1.1rem; margin: 0 0 6px; color: var(--jb-navy); }
/* 标题后面的小字：这台比上一台多了什么（横排里没有"+1 轴"那么大地方，靠它点破递进） */
.jb-step-sub { font-size: .84rem; font-weight: 500; color: var(--jb-muted); }
.jb-ladder .jb-step-text { font-size: .9rem; color: var(--jb-body); margin: 0; }
/* ⚠️ 参数原来是 `.jb-step-spec` 一行用"·"串起来 —— 用户 2026-10-15 要求
   **一行一条 + 每条前面同一图标**，于是改用铣削卡那套 `.jb-proc-points`，
   这条样式随之删掉（别再往回加）。 */
/* 两项之间的"递进说明"（小字 + 加号）—— 阶梯之所以是阶梯，靠它点破。
   徽标撤掉后**不再缩进**（原来 94px 是为了对齐徽标右边的正文）。 */
.jb-step-add {
  display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 0 4px;
  font-size: .8rem; font-weight: 600; color: var(--jb-brand-600);
}
.jb-step-add i { font-size: 1.05rem; }

@media (max-width: 575.98px) {
  .jb-tab { padding: 13px 14px; font-size: .9rem; }
  .jb-spec-k { flex-basis: 84px; }
  /* 手机上"标签 / 内容"不再左右分栏，改成标签在上、内容在下（128px 挤不下字） */
  .jb-proc-facts > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  /* 材料卡：左图收窄到 100px（132 + 正文在 390 宽的手机上会把字挤成一条） */
  .jb-mat-card--row { grid-template-columns: 100px minmax(0, 1fr); gap: 0 14px; }
}

/* 阶梯行的窄屏：**单列**（文字在上、图在下，横向 16:9）—— 左右交替在手机上没意义，
   两份 areas（含 --flip）都要改回单列，只改一份会剩一个隐式列把内容挤扁。 */
@media (max-width: 767.98px) {
  .jb-ladder .jb-step,
  .jb-ladder .jb-step--flip {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "body" "media";
    gap: 16px; padding: 18px 0;
  }
  .jb-ladder .jb-step-img { aspect-ratio: 16 / 9; margin-top: 4px; }
  /* 手机上的工艺卡：主图已是 4:3 定高，只有图上标题要小一号
     （3 张小图随 v2 改版整个删掉了，不再需要"手机上隐藏"那套） */
  .jb-proc-title { left: 16px; right: 16px; bottom: 14px; font-size: 1.12rem; }
}