/* ============================================================
   国际风 · 全站换肤层 (intl-reskin)
   必须加载在 style.css 之后：覆盖旧暗蓝主题到国际风（亮色 / 蓝主色 /
   白卡片 / 圆角 / 柔影）。纯外观，不改 DOM 与内容。
   设计语言对齐首页 index.html（international.css）。
   ============================================================ */

/* ---- 重定义主色变量：旧主题几乎全靠这几个变量 ---- */
:root{
  --navy:#1d4ed8;          /* 主蓝：导航 / 页脚 / 按钮 / 强调 */
  --navy-deep:#1e3a8a;     /* 深蓝：顶栏 */
  --navy-mid:#3b82f6;      /* 中蓝：次级 */
  --red:#2563eb;           /* 原暗红强调 → 统一为蓝 */
  --tint:#eff6ff;          /* 浅蓝底 */
  --intl-blue:#1d4ed8;
  --intl-blue2:#0ea5e9;
  --intl-ink:#0f172a;
  --intl-muted:#64748b;
  --intl-line:#e5e7eb;
  --intl-bg:#ffffff;
  --intl-alt:#f8fafc;
  --intl-card:#ffffff;
  --intl-sky:#eff6ff;
  --intl-shadow:0 10px 30px rgba(15,23,42,.10);
  --intl-shadow-sm:0 2px 10px rgba(15,23,42,.06);
}

/* ---- 基础 ---- */
* { box-sizing:border-box; }
/* 消除页面间滚动条出现/消失导致的横向跳动 */
html { scrollbar-gutter:stable; }
body{
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif !important;
  color:var(--intl-ink);
  background:#fff;
  font-size:15px; line-height:1.75;
  overflow-x:hidden;            /* 防止溢出产生横向滚动条造成跳动 */
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--intl-blue); }
a:hover{ color:#1e40af; text-decoration:none; }
h1,h2,h3,h4,h5,h6{ color:#0f172a; font-weight:700; }
img{ border-radius:0; }

/* ---- 顶栏 / 头部 ---- */
/* 内页外壳已统一为 .intl-topbar / .intl-header class，样式见共享文件 css/chrome.css */

/* ---- 导航 + 下拉 ----
   规则已统一到共享样式 css/nav.css（与首页共用同一份），此处不再重复定义。 */

/* ---- 内页标题（蓝渐变 + 白字）---- */
.page-header{ background:linear-gradient(135deg,#1d4ed8,#0ea5e9) !important; color:#fff; padding:52px 0; }
.page-header h1{ color:#fff; }
.page-header .breadcrumb,
.page-header .breadcrumb a{ color:rgba(255,255,255,.85) !important; }
.page-header .breadcrumb a:hover{ color:#fff !important; }
/* 修正内联 eyebrow 颜色（原 #b9c3dd 在蓝底上看不清）*/
.page-header .wrap > div{ color:rgba(255,255,255,.82) !important; }

/* ---- 区块 ---- */
.section{ background:#fff; padding:58px 0; }
.section-alt{ background:var(--intl-alt) !important; }

/* 区块标题 */
.sec-title{ text-align:center; margin-bottom:42px; }
.sec-title .en{
  display:inline-block; color:var(--intl-blue); font-weight:700;
  letter-spacing:3px; font-size:12px; text-transform:uppercase; margin-bottom:12px;
}
.sec-title h2{ font-size:30px; color:#0f172a; }
.sec-title .desc{ color:var(--intl-muted); font-size:15px; max-width:760px; margin:12px auto 0; }

/* ---- 按钮 ---- */
.btn{ border-radius:8px; font-weight:600; padding:12px 26px; transition:all .2s; }
.btn-primary{
  background:linear-gradient(135deg,#1d4ed8,#2563eb) !important; color:#fff !important;
  border:none; box-shadow:0 6px 16px rgba(29,78,216,.25);
}
.btn-primary:hover{ background:linear-gradient(135deg,#1e40af,#1d4ed8) !important; color:#fff !important; }
.btn-ghost{ background:#fff !important; color:var(--intl-blue) !important; border:1.5px solid var(--intl-blue) !important; }
.btn-ghost:hover{ background:var(--intl-sky) !important; color:#1e40af !important; }

/* ---- 通用卡片：白底 / 圆角 / 轻阴影 / 悬停微浮 ---- */
.cap-item,.cul-card,.hon-item,.brd-item,.net-item,
.feature-card,.ct-card,.ofc-item,.prom-item,
.ind-card,.pl-item,.cat-card,.stat-cell,.step,.f-item,
.ncard,.faq details,.product-card,.news-item,.contact-item{
  background:var(--intl-card);
  border:1px solid var(--intl-line);
  border-radius:14px;
  box-shadow:var(--intl-shadow-sm);
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.cap-item:hover,.cul-card:hover,.hon-item:hover,.brd-item:hover,.net-item:hover,
.feature-card:hover,.ct-card:hover,.ofc-item:hover,.prom-item:hover,
.ind-card:hover,.pl-item:hover,.cat-card:hover,.step:hover,.f-item:hover,
.ncard:hover,.product-card:hover,.news-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--intl-shadow);
  border-color:#bfdbfe;
}
.feature-card,.ct-card,.ofc-item,.prom-item,.step,.f-item,
.cap-item,.cul-card,.hon-item,.brd-item,.net-item{
  padding:24px;
}

/* 卡片内强调色 */
.cap-no,.cul-k,.hi{ color:var(--intl-blue); font-weight:700; letter-spacing:1px; }
.cap-item h3,.cul-card h3,.feature-card h4,.ct-card h4,.ofc-item h4,
.prom-item h4,.step h4,.f-item h4,.ind-card h3,.pl-item h3,.cat-card h3{
  color:#0f172a; margin-bottom:8px;
}
.cap-item p,.cul-card p,.feature-card p,.ct-card p,.ofc-item p,
.prom-item p,.step p,.f-item p,.ind-card p,.pl-item p,.cat-card p{
  color:var(--intl-muted); font-size:14px;
}

/* 数据条（蓝渐变带 + 白字卡片）*/
.stats-row{ background:linear-gradient(120deg,#1e3a8a,#1d4ed8) !important; border-radius:18px; padding:38px 26px; margin:0 0 8px; }
.stat-cell{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20); border-radius:14px; color:#fff; padding:22px; }
.stat-cell .num{ color:#fff !important; font-size:40px; font-weight:800; line-height:1; }
.stat-cell .label{ color:rgba(255,255,255,.88) !important; font-size:14px; margin-top:6px; }

/* 发展历程时间轴 */
.tl-year{ color:var(--intl-blue); }
.tl-item.is-now .tl-year{ color:var(--intl-blue2); }
.tl-item.is-now .tl-body{ border-color:#bfdbfe; box-shadow:0 0 0 3px rgba(29,78,216,.10); }
.tl-tag{ background:var(--intl-blue); color:#fff; }

/* 企业文化 / 荣誉 / 伙伴 / 分公司 小标 */
.cul-card .cul-k{ font-size:12px; letter-spacing:2px; text-transform:uppercase; }
.hon-item .hi{ font-size:13px; }
.brd-item span{ color:var(--intl-muted); font-size:13px; display:block; margin-top:4px; }
.net-item.is-hq{ border-color:var(--intl-blue); box-shadow:0 0 0 2px rgba(29,78,216,.12); }
.net-en{ color:var(--intl-blue); font-size:12px; letter-spacing:1px; margin:6px 0; }

/* ---- 产品中心：七大类卡片 ---- */
.cat-card{ overflow:hidden; }
.cat-card .cc-img{ overflow:hidden; }
.cat-card .cc-img img{ transition:transform .3s; }
.cat-card:hover .cc-img img{ transform:scale(1.05); }
.cc-body{ padding:22px 22px 18px; display:flex; flex-direction:column; flex:1; }
.cc-foot{ margin-top:14px; display:flex; justify-content:space-between; align-items:center; }
.cc-num{ color:var(--intl-muted); font-size:13px; }
.cc-more{ color:var(--intl-blue); font-weight:600; font-size:13px; }
/* 第 8 格「按需定制」CTA 卡：复用 style.css 既有 .cat-card--dark/.cc-dk 结构骨架，
   配色 / 居中改为对齐首页 intl-prod-card.dark（蓝渐变 + 白色药丸按钮）。
   用双类选择器提高权重，避免被同文件的 .cat-card h3 / .cat-card p 覆盖。 */
.cat-card.cat-card--dark{
  background:linear-gradient(135deg,#1e3a8a,#1d4ed8);
  border:1px solid transparent;
  border-radius:14px;
  box-shadow:0 16px 40px rgba(29,78,216,.22);
  text-decoration:none;
}
.cat-card.cat-card--dark::before{ display:none; }              /* 去掉顶部红条 */
.cat-card.cat-card--dark:hover{
  transform:translateY(-4px);
  box-shadow:0 22px 48px rgba(29,78,216,.34);
  border-color:transparent;
}
.cat-card.cat-card--dark .cc-dk{
  padding:32px 26px; height:100%;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.cat-card.cat-card--dark .cc-dk-en{ color:#bfdbfe; margin-bottom:12px; }
.cat-card.cat-card--dark h3{ color:#fff; font-size:19px; margin:0 0 12px; }
.cat-card.cat-card--dark .cc-dk p{ color:#dbeafe; font-size:13.5px; line-height:1.7; flex:1; margin:0 0 20px; }
.cat-card.cat-card--dark .cc-dk-btn{
  background:#fff; color:#1d4ed8; border:none; border-radius:10px;
  padding:11px 22px; font-size:13.5px; font-weight:700; white-space:nowrap;
}
.cat-card.cat-card--dark:hover .cc-dk-btn{ background:#e0ecff; color:#1e40af; }
/* products/index 的 8 格网格（7 产品线 + 1 按需定制）：
   style.css 在 ≤1100px 会把 .cat-grid 降到 3 列，8 % 3 ≠ 0 会空 1 格；
   故 861–1100 区间保持 4 列，≤860px 由 style.css 降到 2 列（8 能被 2 整除），≤540px 降到 1 列。 */
@media (max-width:1100px) and (min-width:861px){
  .cat-grid--8{ grid-template-columns:repeat(4,1fr); gap:20px; }
}

/* ---- 行业方案：卡片 + 胶囊选项卡 ---- */
.ind-card,.pl-item{ overflow:hidden; }
.ind-card .i-img img,.pl-item .p-img img{ transition:transform .3s; }
.ind-card:hover .i-img img,.pl-item:hover .p-img img{ transform:scale(1.05); }
.i-b,.pl-item > div{ padding:18px 20px 20px; }
.i-go,.p-go span{ color:var(--intl-blue); font-weight:600; font-size:13px; }

/* 解决方案总览·「按行业查看」：改用行业实拍图，铺满卡槽（原来是产品图 / 插画，留白多） */
#pane-ind .ind-card .i-img{ padding:0; background:#eef2f7; }
#pane-ind .ind-card .i-img img{ width:100%; height:100%; object-fit:cover; }

/* 解决方案总览·「RFID 细分场景」：标题最多 2 行、简介最多 3 行，整行卡片高度一致 */
#pane-scene .ind-card .i-b h3{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.8em;
}
#pane-scene .ind-card .i-b p{
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;
  overflow:hidden; min-height:0; height:5.6em;
}
.ntab,.sol-tab{
  border-radius:999px; border:1px solid var(--intl-line); background:#fff;
  color:var(--intl-muted); padding:9px 20px; cursor:pointer; font-weight:500; transition:all .2s;
}
.ntab.is-on,.sol-tab.is-on{ background:var(--intl-blue) !important; border-color:var(--intl-blue); color:#fff !important; }
.sol-hero-box{ display:flex; gap:32px; align-items:center; background:var(--intl-sky); border-radius:18px; padding:32px; }
.sol-hero-box h2{ font-size:24px; }
/* ⚠️ 解决方案页 hero 图片槽位：必须给死宽度与比例（2026-09-17 修）
   事故：style.css 里 `.sol-hero-box` 写的是 grid（.9fr / 1.1fr），但本文件下面
   这行 `.sol-hero-box{display:flex}` 因为**加载在后**把它覆盖掉了 —— 而 flex 下
   `.sh-img` 没有任何尺寸约束（flex:0 1 auto），图片列宽于是变成
   「图片固有宽度 vs 文字最小宽度」的博弈结果：
     · 文字短的页（如防伪页）图片撑到 631px，文字列被压成 168px；
     · 文字长的页（如垃圾桶页）图片被反挤到 105×61，小到看不清。
   同一套模板渲染出 103×75 ~ 631×438 十几种尺寸，全站 38 页只有 8 页拿了
   下面的 `sh-img--photo` 规则（flex:0 0 44%）才正常。
   现在把剩下 30 页（产品图 / 应用实拍混合，宽高比 1:1 ~ 2:1）统一成同一槽位：
   定宽 44%、定比例 3:2、object-fit:contain 不裁切任何图。

   ⚠️ 2026-09-17 二次修（用户反馈「这个位置图应该铺满白框」）：上面那条只解决了
   「图太大 / 太小」，没解决「图不铺满」——真正的病灶是**两条**：
     ① style.css 给 .sh-img 留了 16px 内边距 + #f7f8fa 底 + 1px 边线，等于在
        44% 的槽位里又套了一层「画框」，图永远比框小一圈；
     ② 图片规则用的是 `max-width/height:100%` + `width/height:auto` ——
        max-* 只**封顶不托底**，比槽位小的图会**停在原始像素尺寸**永不放大。
        实测 assets/img/tsc/service_program.png 只有 260×190，在 481×321 的槽位里
        就以 260×190 渲染，四周留白 111/65px，缩成一个角标。
   现改为：槽位不再内衬（padding:0；背景同 --photo 的 #eef2f7），图片改成
   `width/height:100%` + object-fit:contain —— 能放大也能缩小，且 3:2 的图正好满幅。
   ⛔ 别顺手改成 object-fit:cover：全站 26 页的 hero 图不是 3:2，其中
   ind-cashbox / ind-asset / ind-ebike / ind-ebike-charge / ind-forklift(带「≤4 inch」
   标注) / ind-san-weigh / ind-wh-rfid 等是**流程图 / UI 截图 / 带字标注的图**，
   cover 会把左右边缘的文字直接切掉（实测拼图 _r3_contain_vs_cover 里可见）。 */
.sol-hero-box .sh-img:not(.sh-img--photo){
  flex:0 0 44%; box-sizing:border-box; aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center;
  padding:0; border:none; background:#eef2f7; border-radius:16px;
}
/* ⚠️ 不要用「绝对定位 + left/right/top/bottom 四边」来约束这里的 img：
   对**替换元素**（img）若 width/height 是 auto，浏览器按固有尺寸定盒，
   右/下偏移被忽略（CSS 2.1 §10.3.8 过约束解算），图片会溢出槽位 ——
   而 .sh-img 带 overflow:hidden，1:1 的图（如 ind-jewelry 的 600×600）
   会被直接裁掉下半截。
   ⚠️ 也不要用 `max-width:100%;max-height:100%;width:auto;height:auto`：
   它只缩小、不放大（见上面 ② 的事故）。width/height 直接给 100%，
   用 object-fit:contain 保证不裁不变形。 */
.sol-hero-box .sh-img:not(.sh-img--photo) img{
  display:block; width:100%; height:100%; object-fit:contain;
}
.sol-kv{ display:flex; gap:30px; margin-top:18px; flex-wrap:wrap; }
.sol-kv b{ display:block; font-size:30px; color:var(--intl-blue); line-height:1; }
.sol-kv span{ color:var(--intl-muted); font-size:13px; }
/* 行业内页 hero：实拍行业大图满幅（仅 8 个行业内页用 sh-img--photo，产品图页不受影响） */
.sol-hero-box .sh-img--photo{ padding:0; background:#eef2f7; border:none; border-radius:16px; flex:0 0 44%; box-shadow:0 18px 44px rgba(15,23,42,.14); }
.sol-hero-box .sh-img--photo img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:16px; }
/* 相关方案卡片里的行业缩略图：原为 contain 居中留白，实拍图改为满幅裁切 */
.scene .sc-img--photo{ padding:0; background:#eef2f7; }
.scene .sc-img--photo img{ width:100%; height:100%; max-height:none; object-fit:cover; }
.p-tags span{ display:inline-block; background:var(--intl-sky); color:var(--intl-blue); font-size:12px; padding:3px 10px; border-radius:6px; margin:0 6px 6px 0; }
.flow,.f-item{ }
.f-item .f-i{ width:42px; height:42px; border-radius:50%; background:var(--intl-blue); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; }

/* ---- 新闻列表 ---- */
.ngrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.ncard{ display:flex; flex-direction:column; overflow:hidden; }
.ncard .nimg{ overflow:hidden; }
.ncard .nimg img{ transition:transform .3s; }
.ncard:hover .nimg img{ transform:scale(1.05); }
.nbody{ padding:20px 22px 24px; flex:1; display:flex; flex-direction:column; }
.nbody h3{ font-size:17px; color:#0f172a; margin-bottom:8px; }
.nbody p{ color:var(--intl-muted); font-size:13px; flex:1; }
.nmeta{ font-size:12px; color:var(--intl-muted); margin-bottom:8px; }
.ncat{ background:var(--intl-sky); color:var(--intl-blue); padding:3px 10px; border-radius:6px; font-size:12px; }
.ncat--red{ background:var(--intl-sky); color:var(--intl-blue); }
.nmore{ color:var(--intl-blue); font-weight:600; font-size:13px; margin-top:12px; }
.news-item .date{ background:var(--intl-sky); color:var(--intl-blue); }
.news-item .date .m{ color:var(--intl-blue); }
.news-item h3 a{ color:#0f172a; }
.news-item h3 a:hover{ color:var(--intl-blue); }
.news-item p{ color:var(--intl-muted); }

/* ---- 新闻栏目页「焦点区」：1 大 + 6 小 ----
   与首页资讯板块（international.css 的 .news-hero / .news-col）同一套编辑式语言。
   16 篇的分配：焦点区 7 篇 + 下方网格 9 篇 → 3×3 正好整除，不留末行空洞。 */
.nlead{ display:grid; grid-template-columns:1.55fr 1fr; gap:26px; align-items:stretch; margin-bottom:26px; }
.nlead--list{ grid-template-columns:1fr; }   /* 头条被筛掉、只剩速览条目时切单栏铺满 */
.nfeat{ display:flex; flex-direction:column; background:var(--intl-card); border:1px solid var(--intl-line);
  border-radius:14px; overflow:hidden; box-shadow:var(--intl-shadow-sm); transition:.25s; }
.nfeat:hover{ box-shadow:var(--intl-shadow); border-color:#bfdbfe; }
.nfeat-img{ position:relative; aspect-ratio:16/9; overflow:hidden; background:#f2f4f7; }
.nfeat-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s; }
.nfeat:hover .nfeat-img img{ transform:scale(1.04); }
/* 浮层标签：图上给白底，免得压在深色照片上看不清 */
.nfeat-tag{ position:absolute; top:14px; left:14px; background:#fff; box-shadow:0 2px 8px rgba(15,23,42,.20); }
.nfeat-body{ padding:20px 24px 24px; display:flex; flex-direction:column; flex:1; }
.nfeat-body h3{ font-size:22px; font-weight:800; line-height:1.42; color:#0f172a; margin:0 0 10px; letter-spacing:-.2px; }
.nfeat:hover h3{ color:var(--intl-blue); }
.nfeat-body p{ font-size:13.5px; line-height:1.85; color:var(--intl-muted); flex:1; margin:0; }
.nfeat-meta{ display:flex; align-items:center; gap:12px; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--intl-line); font-size:12.5px; color:var(--intl-muted); }
.nfeat-meta .nmore{ margin-top:0; margin-left:auto; }
.nrows{ display:flex; flex-direction:column; background:var(--intl-card); border:1px solid var(--intl-line);
  border-radius:14px; overflow:hidden; box-shadow:var(--intl-shadow-sm); }
.nrows-h{ padding:15px 20px 12px; font-size:12px; font-weight:800; letter-spacing:2px; color:var(--intl-muted);
  text-transform:uppercase; border-bottom:1px solid var(--intl-line); }
.nrows-list{ flex:1; display:flex; flex-direction:column; }
.nrow{ flex:1; display:flex; gap:14px; align-items:center; padding:12px 20px;
  border-bottom:1px solid var(--intl-line); transition:.2s; }
.nrow:last-child{ border-bottom:0; }
.nrow:hover{ background:var(--intl-sky); }
.nrow-thumb{ flex:0 0 auto; width:88px; height:60px; border-radius:10px; overflow:hidden; background:#f2f4f7; }
.nrow-thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; }
.nrow:hover .nrow-thumb img{ transform:scale(1.07); }
.nrow-b{ min-width:0; flex:1; }
.nrow-b h4{ font-size:14px; font-weight:600; line-height:1.45; color:#0f172a; margin:0; transition:.2s;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.nrow:hover .nrow-b h4{ color:var(--intl-blue); }
.nrow-meta{ display:flex; gap:8px; align-items:center; font-size:11.5px; color:var(--intl-muted); margin-top:5px; }
/* 网格改「居中 flex」：分类筛选后条数不再整除 3，末行会剩 1~2 个空洞（最宽 780px）→
   居中排布把留白摊到两侧，与 products-grid--few 同一套思路。全部 9 篇时与 3 列网格等价。 */
.ngrid--center{ display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.ngrid--center>.ncard{ flex:0 1 calc((100% - 48px)/3); }

/* ---- 联系我们 ---- */
.ct-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.ct-card{ display:flex; gap:16px; align-items:flex-start; }
.ct-card.is-hot{ border-color:var(--intl-blue); box-shadow:0 0 0 3px rgba(29,78,216,.12); }
.ct-ico{ width:46px; height:46px; border-radius:12px; background:var(--intl-sky); color:var(--intl-blue); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ct-v{ color:var(--intl-blue); font-weight:700; font-size:18px; }
.ct-n{ color:var(--intl-muted); font-size:13px; }
.ofc-grid,.prom-grid{ display:grid; gap:20px; }
.prom-item{ }
.traffic{ background:var(--intl-alt); border:1px solid var(--intl-line); border-radius:12px; padding:20px 24px; }
.bus{ color:var(--intl-muted); font-size:14px; }
.faq details{ padding:0 18px; margin-bottom:12px; }
.faq summary{ padding:16px 0; cursor:pointer; font-weight:600; color:#0f172a; }
.faq .faq-a{ padding:0 0 16px; color:var(--intl-muted); }

/* ---- 关于我们 ---- */
.ab-intro{ display:flex; gap:40px; align-items:center; }
.ab-eyebrow{ display:inline-block; color:var(--intl-blue); font-weight:700; letter-spacing:2px; font-size:12px; text-transform:uppercase; margin-bottom:12px; }
.ab-intro p{ color:var(--intl-muted); }
.ab-fig{ position:relative; flex-shrink:0; border-radius:14px; overflow:hidden; }
.ab-figcap{ position:absolute; left:0; bottom:0; background:var(--intl-blue); color:#fff; padding:10px 16px; border-radius:12px 0 12px 0; }
.ab-figcap strong{ font-size:26px; display:block; line-height:1; }
.ab-figcap span{ font-size:11px; letter-spacing:1px; }
.cul-slogan{ background:var(--intl-sky); border-radius:14px; padding:26px; text-align:center; margin-top:20px; }

/* ---- 产品 / 详情页强调（变量已换蓝，这里加固）---- */
.pd-block h3{ border-left:4px solid var(--intl-blue) !important; }
.pd-thumb.is-on{ border-color:var(--intl-blue) !important; }
.pd-flist li::before{ background:var(--intl-blue) !important; }
.pd-flist li strong{ color:var(--intl-blue) !important; }
.pd-h3{ border-left:3px solid var(--intl-blue) !important; }
.product-card .body{ color:#0f172a; }
.product-card .body h3 a{ color:#0f172a; }
.product-card .body h3 a:hover{ color:var(--intl-blue); }

/* ---- CTA 区块（深海军蓝渐变，对齐首页 intl-cta）---- */
.section[style*="--navy"]{ background:linear-gradient(120deg,#0b1f3a,#16335f) !important; }
.section[style*="--navy"] h2{ color:#fff !important; }
.section[style*="--navy"] p{ color:#cbd5e1 !important; }

/* ---- 页脚 ---- */
/* 内页外壳已统一为 .intl-footer class，样式见共享文件 css/chrome.css */

/* ---- 网格补数修饰类：让卡片数整除列数，消掉末行留白 ----
   .cat-grid/.products-grid/.ngrid 的默认列数在 style.css；这里只做「按内容定列数」的覆盖，
   必须同时给出窄屏回退，否则会盖掉 style.css 里的响应式规则（同权重，本文件在后）。 */
.cat-grid--3{ grid-template-columns:repeat(3,1fr); }
.products-grid--2{ grid-template-columns:repeat(2,1fr); }
/* 4 张卡片在 3 列网格里会空出 2 格（宽 864px、高 600px+）→ 4 列正好一行；
   只有 1~2 张时列数怎么都除不尽 → 改用居中 flex，两侧留白对称 */
.products-grid--4{ grid-template-columns:repeat(4,1fr); }
.products-grid--few{ display:flex; flex-wrap:wrap; justify-content:center; gap:22px; }
.products-grid--few>.product-card{ flex:0 1 390px; }

/* ---- 响应式：窄屏收卡片列数 ---- */
@media (max-width:1100px){
  .products-grid--4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .ngrid,.ct-cards{ grid-template-columns:repeat(2,1fr); }
  .nlead{ grid-template-columns:1fr; }
  .ngrid--center>.ncard{ flex:0 1 calc((100% - 24px)/2); }
  .products-grid--4{ grid-template-columns:1fr; }
  .ab-intro,.sol-hero-box{ flex-direction:column; }
  .sol-hero-box .sh-img--photo{ flex:0 0 auto; width:100%; }
  /* 纵向排布时 flex-basis 会从「宽」变成「高」-> 必须显式改回 auto + width:100% */
  .sol-hero-box .sh-img:not(.sh-img--photo){ flex:0 0 auto; width:100%; }
  .cat-grid--3{ grid-template-columns:repeat(2,1fr); }
  .products-grid--2{ grid-template-columns:1fr; }
  /* 导航的窄屏行为见 nav.css */
}
@media (max-width:600px){
  .ngrid,.ct-cards{ grid-template-columns:1fr; }
  .ngrid--center>.ncard{ flex:0 1 100%; }
  .products-grid--few>.product-card{ flex:0 1 100%; }
  .cat-grid--3{ grid-template-columns:1fr; }
  .sec-title h2{ font-size:24px; }
}

/* ---- 产品详情：产品实拍多图网格 + 缩略图换行 ----
   .pd-gallery 默认是 style.css 里的「单列满幅」（给源站长条详情图用）；
   产品多角度方图要用修饰类 .pd-gallery--grid 改成两列等宽，否则会被拉成巨幅糊图。
   .pd-thumbs 是 flex 且不换行 —— 媒体列宽上限 440px，5~6 张缩略图必溢出，这里补上换行。 */
.pd-thumbs{ flex-wrap:wrap; row-gap:10px; }
.pd-gallery--grid{ grid-template-columns:repeat(2,1fr); gap:14px; }
.pd-gallery--grid img{ aspect-ratio:4/3; object-fit:contain; padding:14px; }
@media (max-width:700px){
  .pd-gallery--grid{ grid-template-columns:1fr; }
}