/* ===== 弘冶钢铁 产品/材质/标准卡片美化 v1 ===== */
/* 统一提升三个列表页的卡片视觉层次 */

/* ===== 产品卡片（products.html） ===== */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}
.product-card{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;text-decoration:none;color:inherit;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.product-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#ff7a45);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.product-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(20,60,130,.16);
  border-color:var(--accent);
}
.product-card:hover::before{transform:scaleX(1)}
.product-card:hover .product-thumb img{transform:scale(1.08)}
.product-card:hover .grade{background:var(--accent);color:#fff}

.product-thumb{
  position:relative;height:180px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#f0f4f9 0%,#e2e8f0 100%);overflow:hidden;
}
.product-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.product-thumb.has-img{background:#e8ecf0}
.product-thumb .badge{
  position:absolute;top:10px;left:10px;z-index:2;
  background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;
  font-size:12px;font-weight:700;padding:3px 12px;border-radius:20px;
  box-shadow:0 2px 8px rgba(239,68,68,.3);
}
.product-thumb .grade{
  position:absolute;bottom:10px;right:10px;z-index:2;
  background:rgba(26,54,93,.92);color:#fff;font-size:13px;font-weight:700;
  padding:4px 14px;border-radius:8px;letter-spacing:.5px;
  backdrop-filter:blur(4px);
}

.product-body{padding:16px 18px}
.product-body h4{
  font-size:15px;font-weight:700;color:#1a2a3a;margin-bottom:6px;
  line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.product-body .meta{
  font-size:12px;color:var(--muted);margin-bottom:10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.product-body .price{font-size:18px;font-weight:800;color:#ef4444}
.product-body .stock{font-size:12px;color:#6b7280;margin-left:8px}

/* ===== 材质卡片（materials.html） ===== */
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.material-card{
  display:block;text-decoration:none;color:inherit;
  border-radius:16px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:all .28s cubic-bezier(.4,0,.2,1);
}
.material-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(20,60,130,.16);
}
.material-card:hover .card-header{background:linear-gradient(135deg,#1e3a5f 0%,#3182ce 100%)}
.material-card:hover .card-inner{border-color:var(--accent)}
.material-card:hover .mat-card-shot img{transform:scale(1.06)}
.material-card:hover .view-link{color:#1e3a5f}

.material-card .card-inner{
  background:#fff;border-radius:16px;
  border:1px solid #e8ecf0;transition:border-color .3s ease;
}
.material-card .mat-card-shot{
  height:160px;overflow:hidden;background:#f0f4f9;
}
.material-card .mat-card-shot img{
  width:100%;height:100%;object-fit:cover;transition:transform .4s ease;
}
.material-card .card-header{
  padding:16px 20px;color:#fff;
  background:linear-gradient(135deg,#1a365d 0%,#2c5282 100%);
  transition:background .3s ease;
}
.material-card .card-header .grade-badge{
  font-size:19px;font-weight:800;letter-spacing:.5px;
  text-shadow:0 2px 4px rgba(0,0,0,.15);
}
.material-card .card-header .grade-eq{
  margin-top:6px;font-size:12px;color:rgba(255,255,255,.85);line-height:1.5;
}
.material-card .card-header .category-tag{
  display:inline-block;margin-top:8px;padding:3px 12px;
  background:rgba(255,255,255,.22);border-radius:14px;font-size:12px;
  backdrop-filter:blur(4px);
}
.material-card .card-body{padding:16px 20px}
.material-card .info-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;border-bottom:1px solid #f0f0f0;
}
.material-card .info-row:last-child{border-bottom:none}
.material-card .info-row .label{color:var(--muted);font-size:13px}
.material-card .info-row .value{font-weight:600;color:#1a365d;font-size:14px}
.material-card .card-footer{
  padding:12px 20px;background:#f7fafc;border-top:1px solid #e8ecf0;
  display:flex;justify-content:space-between;align-items:center;
}
.material-card .view-link{
  color:var(--accent);font-size:14px;font-weight:700;transition:color .3s ease;
}
.material-card .arrow{color:var(--accent);font-size:20px;transition:transform .3s ease}
.material-card:hover .arrow{transform:translateX(4px)}

/* ===== 标准卡片（standards_index.html） ===== */
.std-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.std-card{
  display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;text-decoration:none;color:inherit;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.std-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--accent),#ff7a45);
  transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
.std-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 48px rgba(20,60,130,.16);
  border-color:var(--accent);
}
.std-card:hover::before{transform:scaleX(1)}
.std-card:hover .std-cover-doc{transform:scale(1.2) rotate(-8deg)}
.std-card:hover .std-cover-badge{background:rgba(0,0,0,.4)}

.std-cover{
  position:relative;height:140px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:8px;overflow:hidden;
}
.std-cover-gb{background:linear-gradient(135deg,#1e3a5f,#2c5282)}
.std-cover-asme{background:linear-gradient(135deg,#7c2d12,#c2410c)}
.std-cover-astm{background:linear-gradient(135deg,#065f46,#047857)}
.std-cover-en{background:linear-gradient(135deg,#3730a3,#4f46e5)}
.std-cover-as{background:linear-gradient(135deg,#831843,#be185d)}
.std-cover-other{background:linear-gradient(135deg,#374151,#4b5563)}

.std-cover-badge{
  position:absolute;top:10px;left:10px;
  background:rgba(255,255,255,.2);color:#fff;
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;
  backdrop-filter:blur(4px);
}
.std-cover-doc{font-size:36px;transition:transform .4s ease}
.std-cover-name{
  color:#fff;font-size:13px;font-weight:600;
  max-width:80%;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 2px 4px rgba(0,0,0,.2);
}
.std-body{padding:14px 16px}
.std-body h4{
  font-size:14px;font-weight:700;color:#1a2a3a;margin-bottom:6px;
  line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.std-body .std-no{
  font-size:12px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ===== 响应式 ===== */
@media(max-width:768px){
  .product-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
  .mat-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
  .std-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
  .product-thumb{height:140px}
  .material-card .mat-card-shot{height:120px}
  .std-cover{height:100px}
  .std-cover-doc{font-size:28px}
}
/* ===== 产品卡片 product-body 美化 v2 ===== */

/* 整体底部区域：分区线 + 间距优化 */
.product-card .product-body{
  padding:14px 18px 16px;
  border-top:1px solid #f0f4f9;
}

/* 标题：更清晰的层次 */
.product-card .product-body h4{
  font-size:15px;font-weight:700;color:#1a2a3a;
  margin-bottom:8px;line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* 分类标签行：chip 风格 */
.product-card .product-body .meta{
  display:flex;align-items:center;gap:8px;
  margin-bottom:12px;flex-wrap:wrap;
}
.product-card .product-body .meta::before{
  content:'';display:inline-block;width:3px;height:12px;
  background:var(--accent);border-radius:2px;
  margin-right:2px;
}
.product-card .product-body .meta{
  font-size:12px;color:var(--muted);
}

/* 价格行：渐变背景 + 标签风格 */
.product-card .product-body .price-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;border-radius:10px;
  background:linear-gradient(135deg,#fff5f5 0%,#fef0f0 100%);
  border:1px solid #fed7d7;
}

/* 价格标签 */
.product-card .product-body .price{
  font-size:20px;font-weight:800;color:#dc2626;
  letter-spacing:-.5px;
}
.product-card .product-body .price::before{
  content:'¥';font-size:13px;font-weight:600;
  color:#dc2626;margin-right:1px;
}

/* 现货状态标签 */
.product-card .product-body .stock{
  font-size:11px;font-weight:700;color:#16a34a;
  padding:3px 10px;border-radius:20px;
  background:#dcfce7;border:1px solid #bbf7d0;
  white-space:nowrap;
}
.product-card .product-body .stock.no-stock{
  color:#9ca3af;background:#f3f4f6;border-color:#e5e7eb;
}

/* 库存标签（非现货价格时） */
.product-card .product-body .stock.stock-text{
  font-size:12px;font-weight:500;color:#6b7280;
  padding:2px 8px;border-radius:6px;
  background:#f9fafb;border:1px solid #f3f4f6;
  white-space:nowrap;
}

/* 底部操作行（hover 时显示） */
.product-card .product-body .actions{
  display:flex;gap:8px;margin-top:12px;
  opacity:0;transform:translateY(8px);
  transition:opacity .3s ease,transform .3s ease;
}
.product-card:hover .product-body .actions{
  opacity:1;transform:translateY(0);
}
.product-card .product-body .actions a{
  flex:1;text-align:center;
  padding:8px 0;border-radius:8px;
  font-size:13px;font-weight:600;text-decoration:none;
  transition:all .2s ease;
}
.product-card .product-body .actions .btn-detail{
  background:#1a3a5c;color:#fff;
}
.product-card .product-body .actions .btn-detail:hover{
  background:#2d5a87;
}
.product-card .product-body .actions .btn-inquiry{
  background:#fff;color:#1a3a5c;border:1px solid #1a3a5c;
}
.product-card .product-body .actions .btn-inquiry:hover{
  background:#f0f4f9;
}

/* 响应式 */
@media(max-width:768px){
  .product-card .product-body{padding:12px 14px}
  .product-card .product-body .price-row{padding:8px 12px}
  .product-card .product-body .price{font-size:17px}
  .product-card .product-body .actions{display:none}
}
/* ===== 修复 materials 卡片边框圆角缺失 ===== */
/* card-inner 的 inline style 有 border-radius:12px + overflow:hidden
   导致与 .material-card 的 border-radius:16px 不匹配，且裁切边框圆角 */

.material-card .card-inner{
  border-radius:16px !important;
  overflow:visible !important;
}

/* mat-card-shot 自己有 overflow:hidden，不需要 card-inner 裁切 */
.material-card .mat-card-shot{
  border-radius:16px 16px 0 0 !important;
}

/* card-header 底部也需要圆角过渡 */
.material-card .card-header{
  border-radius:0 !important;
}

/* card-footer 保持直角 */
.material-card .card-footer{
  border-radius:0 !important;
}
/* ===== 统一修复 materials 卡片底部圆角 + 边框 ===== */
/* 问题：card-inner inline style 有 overflow:hidden + border-radius:12px
   导致底部圆角被裁切，且部分卡片样式不一致 */

/* 1. 强制 card-inner 去掉 overflow:hidden，统一圆角 */
.material-card .card-inner{
  border-radius:16px !important;
  overflow:visible !important;
  border:1px solid #e8ecf0 !important;
}

/* 2. mat-card-shot 顶部圆角，与 card-inner 匹配 */
.material-card .mat-card-shot{
  border-radius:16px 16px 0 0 !important;
  overflow:hidden;
}

/* 3. card-header 直角（衔接 mat-card-shot） */
.material-card .card-header{
  border-radius:0 !important;
}

/* 4. card-body 直角 */
.material-card .card-body{
  border-radius:0 !important;
}

/* 5. card-footer 底部圆角 */
.material-card .card-footer{
  border-radius:0 0 16px 16px !important;
  border-top:1px solid #e8ecf0 !important;
}

/* 6. hover 时边框变色 + 圆角保持 */
.material-card:hover .card-inner{
  border-color:var(--accent) !important;
}

/* 7. 确保所有材质卡片样式一致 */
.material-card{
  border-radius:16px !important;
}

/* 8. 阴影统一 */
.material-card .card-inner{
  box-shadow:0 2px 12px rgba(0,0,0,.08) !important;
}
.material-card:hover .card-inner{
  box-shadow:0 22px 46px rgba(20,60,130,.20) !important;
}
/* ===== 产品卡片 meta 区域：保留跑马灯 + 居中 + 固定高度只显示一行 ===== */

/* 1. 容器居中 + 固定高度（只显示一行） */
.product-body .meta.is-marquee{
  text-align:center !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  overflow:hidden !important;
  height:1.5em !important;
  line-height:1.5 !important;
}

/* 2. 两个 track 都显示，保持跑马灯动画
   [2026-11-04] 删除这里的 `animation:metaMarquee linear infinite !important`：
   animation 简写会隐式把 animation-duration 设为 0s 且带 !important，
   压过 main.js 内联设置的 animationDuration，导致跑马灯完全不动。
   duration 一律交给 main.js 按文字宽度动态设置；此处只用 longhand 声明。 */
.product-body .meta.is-marquee .mq-track{
  display:inline-block !important;
  white-space:nowrap !important;
  padding-right:1.5em !important;
  animation-name:metaMarquee !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
}

/* 3. hover 暂停 */
.product-body .meta.is-marquee:hover .mq-track{
  animation-play-state:paused !important;
}

/* 4. 卡片美化里的 meta 样式也居中 */
.product-card .product-body .meta{
  text-align:center !important;
}
.product-card .product-body .meta::before{
  display:none !important;
}

/* ===== [2026-11-04] .meta 胶囊最终统一规则（必须放在本文件最后，覆盖以上所有冲突声明） =====
   上方 51-54 / 202-213 / 360-392 行曾把 .meta 设成 display:flex，并给 .is-marquee
   强制 height:1.5em!important + animation 简写 !important，造成三个问题：
   ① flex 让胶囊变通栏且文字由 justify-content:flex-start 左对齐 → 短标签不居中；
   ② 固定 height:1.5em 把长标签胶囊压成 18px，而短标签是 30px → "被价格块挤压高度"；
   ③ animation 简写 !important 把 animation-duration 重置为 0s，压过 main.js 内联的
      style.animationDuration，导致 .is-marquee 已加上、两个 track 也在，但动画完全不动。
   以下统一收敛：短标签=收缩居中胶囊；超长=通栏等高、无缝跑马灯。禁止在上方再覆盖。 */
.product-card .product-body .meta,
.product-body .meta{
  /* block + fit-content：既保留"收缩成胶囊并居中"，又消除 inline-block 的
     行盒下沉（会让短标签与价格行的间距比长标签多约 9px，导致同行价格行错位） */
  display:block !important;
  width:fit-content !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  margin:0 auto 12px !important;
  padding:5px 12px !important;
  border-radius:999px !important;
  background:rgba(35,119,224,.08) !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  text-align:center !important;
  line-height:1.6 !important;
  min-height:30px !important;
  flex-wrap:nowrap !important;
  gap:normal !important;
  align-items:normal !important;
}
.product-card .product-body .meta::before{
  display:none !important;
  content:none !important;
}
/* 超长标签：通栏、等高（不设固定 height），两份 track 横向无缝循环 */
.product-card .product-body .meta.is-marquee,
.product-body .meta.is-marquee{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  height:auto !important;
  line-height:1.6 !important;
  min-height:30px !important;
  cursor:default !important;
}
.product-card .product-body .meta.is-marquee .mq-track,
.product-body .meta.is-marquee .mq-track{
  display:inline-block !important;
  white-space:nowrap !important;
  padding-right:1.5em !important;
  flex:none !important;
  /* 只用 longhand，绝不用 animation 简写：简写会把 main.js 设置的 duration 重置为 0s */
  animation-name:metaMarquee !important;
  animation-timing-function:linear !important;
  animation-iteration-count:infinite !important;
}
.product-body .meta.is-marquee:hover .mq-track{
  animation-play-state:paused !important;
}
@media(max-width:600px){
  .product-card .product-body .meta,
  .product-body .meta,
  .product-card .product-body .meta.is-marquee,
  .product-body .meta.is-marquee{
    padding:3px 10px !important;
    min-height:26px !important;
    margin-bottom:9px !important;
  }
}

/* ===== [2026-11-04] 首页两个 6 卡片块固定 2 行 3 列 =====
   切割案例实拍 / 推荐明星产品各有 6 张卡，此前走 .product-grid 的
   auto-fill minmax(240px,1fr)，桌面宽下会排成 4 列（4+2），不是 2x3。
   用 .home-grid-3 只作用于首页这两个 grid，不影响 /products 等列表页。
   放在文件末尾 + !important，压过 style.css 与上方所有 @media 的 .product-grid 覆盖。 */
.product-grid.home-grid-3{grid-template-columns:repeat(3,1fr)!important;gap:20px!important}
@media(max-width:900px){
  .product-grid.home-grid-3{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}
}
@media(max-width:560px){
  .product-grid.home-grid-3{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
}

/* ===== [2026-11-04] 首页「按品类选购」卡片正文 .cat-card-body 美化 =====
   修复两处历史缺陷：
   ① style.css:160 旧图标卡规则把 text-align:center 继承给图片卡，而 h3 是
      display:flex（justify-content 默认 flex-start），造成「标题左对齐 / 描述居中」不一致；
   ② 英文副标题 .cat-card-en 与中文标题挤在同一行，层次不清。
   全部限定 .cat-cards 作用域；保留卡片原有配图留白，只把 .cat-card 改为 flex 列
   以实现正文等高 + CTA 顶底，不影响其它页面/旧 .cat-card。 */
.cat-cards .cat-card{
  display:flex;flex-direction:column;   /* 仅用于正文等高 + CTA 顶底，保留原有配图留白 */
}
.cat-cards .cat-card-thumb{flex:0 0 auto}
.cat-cards .cat-card-body{
  position:relative;
  flex:1 1 auto;
  display:flex;flex-direction:column;
  padding:20px 20px 18px!important;
  text-align:left!important;
  background:linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
/* 标题上方橙色渐变小短线：跟随居中标题，hover 拉长（translateX 基于自身宽度，拉长后仍居中） */
.cat-cards .cat-card-body::before{
  content:'';position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:34px;height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));
  transition:width .3s ease;
}
.cat-cards .cat-card:hover .cat-card-body::before{width:66px}

/* 中文标题：独立一行、深蓝加粗、居中（英文 eyebrow 作为子元素随之中居中） */
.cat-cards .cat-card-body h3{
  display:block!important;
  margin:0!important;
  text-align:center;
  font-size:19px;font-weight:900;line-height:1.35;
  color:var(--steel-800);letter-spacing:.2px;
  transition:color .25s ease;
}
.cat-cards .cat-card:hover .cat-card-body h3{color:var(--accent)}

/* 英文副标题：另起一行，作为 eyebrow（小号 + 字距 + 大写） */
.cat-cards .cat-card-en{
  display:block!important;
  margin-top:5px;
  font-size:10.5px;font-weight:700;letter-spacing:1.3px;
  text-transform:uppercase;line-height:1.5;color:#8a9bb0;
}

/* 描述：虚线分隔 + 两行截断 + 固定两行高度（保证等高） */
.cat-cards .cat-card-body p{
  display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin:12px 0 0!important;
  padding-top:12px;
  border-top:1px dashed var(--line);
  min-height:56px;
  font-size:12.5px!important;line-height:1.75;color:#60748c;
}

/* 底部 CTA：顶到卡片底部，hover 右移 */
.cat-cards .cat-card-body::after{
  content:'查看品类 →';
  margin-top:auto;padding-top:12px;
  font-size:12.5px;font-weight:800;letter-spacing:.3px;
  color:var(--accent);opacity:.9;
  transition:transform .25s ease,opacity .25s ease;
}
.cat-cards .cat-card:hover .cat-card-body::after{transform:translateX(5px);opacity:1}

@media(max-width:560px){
  .cat-cards .cat-card-body{padding:16px 16px 16px!important}
  /* 装饰线保持居中（不再 left:16px 覆盖），与居中的 h3 对齐 */
  .cat-cards .cat-card-body h3{font-size:17px}
  .cat-cards .cat-card-body p{font-size:12px!important}
}

/* ===== [2026-11-04] 移动端「资讯与行业动态」卡片美化 =====
   问题：移动端 .news-grid 仍是 2 列（每卡约 182px），而 .news-card-body 保持
   flex-direction:row + 58px 方形日期块 + 14px gap，导致标题只剩约 76px 宽，
   每行 4 个字、标题高达 167px，四张卡高度参差（429/429/452/452）。
   方案：保留用户偏好的 2 列紧凑栅格，把日期改成顶部横向小胶囊、正文改纵向排列、
   标题/摘要定高截断、CTA 顶底，保证 4 卡等高。全部限定 .news-grid 作用域。 */
@media(max-width:680px){
  .news-grid{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
  .news-grid .news-card{
    display:flex;flex-direction:column;height:100%;
    padding:0!important;border-radius:14px;overflow:hidden;
  }
  .news-grid .news-card .news-thumb{height:104px}
  .news-grid .news-card .news-card-body{
    /* body 用 block + 相对定位：让 h4/p 不是 flex item，display:-webkit-box 才不会被
       blockify 成 flow-root，-webkit-line-clamp 才能生成真正的省略号（而非硬切断）。
       CTA 改用绝对定位顶底；body 仍是 .news-card(flex 列) 的子项，靠 flex:1 撑满。 */
    display:block;position:relative;flex:1 1 auto;
    padding:12px 12px 34px!important;
  }
  /* 日期：左侧大方块 → 顶部横向小胶囊，整行宽度让给标题 */
  .news-grid .news-card .news-date{
    display:inline-flex;align-items:baseline;gap:6px;align-self:flex-start;
    width:auto;min-width:0;height:auto;
    padding:4px 9px;margin-bottom:8px;
    border-radius:8px;box-shadow:none;
  }
  .news-grid .news-card .news-date b{
    font-size:14px;line-height:1;letter-spacing:0;
    background:none;box-shadow:none;border-radius:0;
  }
  .news-grid .news-card .news-date span{
    font-size:10px;line-height:1;letter-spacing:0;
  }
  /* 内层 div 保持 block（不设 flex），h4/p 才能正常使用 -webkit-line-clamp */
  .news-grid .news-card .news-card-body>div{display:block;min-width:0}
  /* 标题：全宽、3 行截断 + 真省略号；min-height 保证四卡等高 */
  .news-grid .news-card h4{
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
    min-height:61px;
    font-size:13.5px;line-height:1.5;
    margin:0 0 6px!important;
  }
  /* 摘要：2 行截断 + 真省略号 */
  .news-grid .news-card p{
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
    min-height:37px;
    font-size:11.5px;line-height:1.6;margin:0!important;
  }
  /* CTA 绝对定位顶底（body 已预留 34px 底部空间），统一字号 */
  .news-grid .news-card .news-card-body>div>span:last-child{
    position:absolute;left:12px;bottom:12px;
    font-size:12px!important;
  }
}

/* ===== [2026-11-04] 移动端页脚美化 =====
   原状：@media(max-width:400px) 把 .footer-grid 压成单列，页脚高达 861px，
   四段内容只是松散堆叠的纯文字，链接没有可点击的视觉反馈。
   方案：≤680px 改为紧凑 2 列玻璃卡片；品牌简介通栏、产品/链接各占半列、
   联系方式通栏（内部再 2 列）；链接行 ≥40px 可点区、右侧箭头；版权栏细化。
   全部限定 .footer 作用域，桌面端不受影响。 */
@media(max-width:680px){
  .footer{margin-top:40px}
  .footer .footer-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
    padding:26px 0 18px!important;
  }
  /* 玻璃卡片 */
  .footer .footer-grid>div{
    min-width:0;
    background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.085);
    border-radius:16px;
    padding:16px 14px 14px;
    box-shadow:0 6px 20px rgba(0,0,0,.13);
  }
  .footer .footer-grid>div:first-child{
    grid-column:1/-1!important;
    background:linear-gradient(135deg,rgba(31,111,212,.17),rgba(255,90,31,.06));
    border-color:rgba(255,255,255,.13);
  }
  .footer .footer-grid>div:last-child{grid-column:1/-1!important}

  /* 标题：橙色渐变竖条 + 字距 */
  .footer .footer-grid h4{
    margin:0 0 10px!important;
    padding-left:12px!important;
    font-size:14.5px!important;font-weight:800;letter-spacing:.4px;
  }
  .footer .footer-grid h4::before{
    top:2px;bottom:2px;width:3px;border-radius:3px;
    background:linear-gradient(180deg,var(--accent),var(--accent-3));
  }
  .footer .footer-grid>div:first-child h4{font-size:16px!important}

  /* 公司简介 */
  .footer .footer-grid p{
    font-size:12px!important;line-height:1.72!important;
    color:#b6c8dc!important;margin:0!important;
  }

  /* 列表：统一为可点行 + 虚线分隔 */
  .footer .footer-grid .ft-list{list-style:none;margin:0;padding:0}
  .footer .footer-grid .ft-list li{
    padding:0!important;margin:0!important;
    border-bottom:1px dashed rgba(255,255,255,.10);
    font-size:12px!important;line-height:1.5!important;color:#b6c8dc!important;
  }
  .footer .footer-grid .ft-list li:last-child{border-bottom:none}
  .footer .footer-grid .ft-list li:not(:has(a)){
    display:flex;align-items:center;min-height:38px;
  }
  .footer .footer-grid .ft-list a{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    min-height:40px;color:#d8e6f5!important;text-decoration:none;
    transition:color .2s ease;
  }
  .footer .footer-grid .ft-list a:active{color:var(--accent)!important}
  /* 英文小标签 */
  .footer .footer-grid .ft-list .en{
    font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
    color:#7f97b4;margin-left:2px;
  }
  /* 快捷链接右侧箭头 */
  .footer .footer-grid .ft-links a::after{
    content:'›';flex:0 0 auto;font-size:18px;line-height:1;color:var(--accent);
    transition:transform .2s ease;
  }
  .footer .footer-grid .ft-links a:hover::after{transform:translateX(3px)}
  /* 联系方式：电话/邮箱 2 列，地址通栏 */
  .footer .footer-grid .ft-contact{
    display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;
  }
  .footer .footer-grid .ft-contact li:last-child{
    grid-column:1/-1;border-bottom:none;
  }
  .footer .footer-grid .ft-contact a{
    font-size:11.5px;word-break:break-all;
  }

  /* 版权栏 */
  .footer .footer-bottom{
    margin-top:6px;
    padding:16px 0 20px!important;
    font-size:11px!important;line-height:1.8;
    color:#8ba1bb;
    border-top:1px solid rgba(255,255,255,.10);
  }
  .footer .footer-bottom .icp{
    display:inline-block;margin:5px 4px 0!important;padding:3px 10px;
    border:1px solid rgba(255,255,255,.14);border-radius:999px;
    color:#a9bcd2!important;font-size:10.5px;text-decoration:none;
  }
}

/* ===== [2026-11-04] /products 移动端价格行「现货询价议价」胶囊出格修复 =====
   实测 390 宽：胶囊右边界超出价格框 18px，360 宽超出 32px；价格被压成 3 行。
   根因：.price-row 是 nowrap 的单行 flex，.stock 有 white-space:nowrap 无法收缩，
   加上 .price::before 重复注入 ¥（模板本身已有 ¥¥），挤出粉色框。
   方案：全局去掉重复的 ¥ 伪元素；移动端价格行改纵向两行并水平居中
   （价格一行、绿色胶囊一行），桌面宽度充足仍保持横排。 */
.product-card .product-body .price::before{content:none}

@media(max-width:680px){
  .product-card .product-body .price-row{
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    padding:10px 10px 11px;
    text-align:center;
  }
  .product-card .product-body .price{
    flex:0 0 auto;
    white-space:nowrap;          /* 防止被压成「¥ / ¥3490 / 起」三行 */
    font-size:18px;
    line-height:1.25;
    text-align:center;
  }
  .product-card .product-body .stock{
    flex:0 0 auto;
    max-width:100%;
    margin-left:0;               /* 清掉基础规则残留的 8px，保证真正居中 */
    font-size:10px;
    padding:2px 9px;
    text-align:center;
  }
  .product-card .product-body .stock.stock-text{
    font-size:10.5px;
  }
}

/* ===== [2026-11-05] 移动端全站样式美化补丁（仅动 cards_beauty.css，避免与模板修改冲突） ===== */
@media (max-width:680px){
  /* 1. 区块留白统一：消除首页/列表页/详情页 padding 28/22/48 不一致 */
  .section{padding:40px 0 !important}
  .section-head{margin-bottom:24px !important}
  .page-hero{padding:32px 0 !important}

  /* 2. 标准详情页宽表：容器横滚，杜绝整页横向溢出（内联 .std-body table 用 !important 覆盖） */
  .std-body .table-container{max-width:100% !important;overflow-x:auto !important;-webkit-overflow-scrolling:touch}
  .std-body .table-container>table{width:auto !important;min-width:640px !important}
  .std-body img{max-width:100%;height:auto}

  /* 3. 切割案例主图：去掉 600px 固定高，消除大块深色空白（覆盖 img 行内 style 的 height:100%） */
  .case-media img,.case-media video{height:auto !important;max-height:none !important;object-fit:contain !important;background:transparent !important}

  /* 4. 右下客服浮窗：上移+内收，避免遮挡标题/主按钮/页脚 */
  .float-tools{right:8px !important;bottom:90px !important;gap:8px !important}
  .float-tools .ft-btn,.float-tools a,.float-tools button{min-width:44px !important;min-height:44px !important}

  /* 5. 表单/搜索输入框 ≥16px，避免 iOS 聚焦自动缩放（覆盖内联 .std-search-box） */
  .hc-input-row input{font-size:16px !important}
  .std-search-box input{font-size:16px !important;padding:12px 8px !important}
  .std-search-box button{min-height:44px !important;font-size:15px !important}

  /* 6. 分页可点区放大到 44px，与全站按钮一致 */
  .pagination .page-num{min-width:44px !important;height:44px !important}
  .pager .pg{min-width:44px !important;min-height:44px !important}
  .pager .pg-prev,.pager .pg-next{min-height:44px !important}

  /* 7. 顶部高频热区：汉堡/语言/品牌（同时修复窄屏 header 横向溢出） */
  .nav-inner{padding:0 14px !important;gap:10px !important;justify-content:flex-start}
  .langswitch{margin-left:auto}
  .nav-toggle{min-width:44px;min-height:44px;padding:8px 10px}
  .langswitch .ls-go{min-width:44px;min-height:44px}
  .brand{flex:1 1 auto !important;min-width:0}
  .brand-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

  /* 8. 正文/辅助文字字号提升，移动端可读性 */
  .news-grid .news-card p{font-size:13px !important;line-height:1.7 !important}
  .news-grid .news-card .news-date span{font-size:12px !important;line-height:1.4 !important}
  .std-no{font-size:12px !important}

  /* 9. 页脚字号提升（覆盖既有 !important 规则，按同等特异性 + !important） */
  .footer .footer-grid p{font-size:13px !important}
  .footer .footer-grid .ft-list li{font-size:13px !important}
  .footer .footer-grid .ft-list .en{font-size:11px !important}
  .footer .footer-grid .ft-contact a{font-size:12.5px !important}
  .footer .footer-bottom{font-size:12px !important}
  .footer .footer-bottom .icp{font-size:11px !important}

  /* 10. /export 长 URL 列换行，避免整表被撑爆（覆盖 export.css min-width:560px，!important 因其后加载） */
  table.exz-tbl{min-width:0 !important}
  .exz-tbl td,.exz-tbl th{word-break:break-all !important;white-space:normal !important}
}

/* 触屏设备：去除卡片 hover 位移/橙色描边/图片缩放的残留效果 */
@media (hover:none){
  .product-card:hover,.material-card:hover,.cat-card:hover,.std-card:hover,.news-card:hover{
    transform:none !important;box-shadow:var(--shadow) !important;border-color:var(--line) !important;
  }
  .product-card:hover .product-thumb img,
  .material-card:hover .mat-card-shot img,
  .std-card:hover .std-cover-doc{transform:none !important}
}

/* ===== [2026-11-05] 标准详情页：段距收紧 + 移动端适配 + CTA 卡片美化 =====
   正文基础样式在 templates/standards_detail.html 的 {% block scripts %} 内联 <style>
   （DOM 顺序在 head CSS 之后），故此处一律用 !important 覆盖，确保稳定生效。 */

/* 1. 段与段间距收紧（用户明确要求减小段落间距） */
.std-body p{margin:7px 0 !important;line-height:1.8 !important}
.std-body h2{margin:22px 0 10px !important}
.std-body h3{margin:16px 0 8px !important}
.std-body ul{margin:8px 0 !important}
.std-body li{margin:4px 0 !important}

/* 2. 表格在窄屏更紧凑易读（横滚容器已在 [2026-11-05] 通用补丁中设置） */
.std-body table{font-size:13px !important}
.std-body th,.std-body td{padding:7px 10px !important}

/* 3. 移动端（≤680px）：正文容器去固定宽、字号行高更舒适、CTA 竖排堆叠 */
@media (max-width:680px){
  .std-body{max-width:100% !important;font-size:15px !important;line-height:1.78 !important;padding:0 2px !important}
  .std-body h2{font-size:18px !important;margin:20px 0 9px !important;padding-left:11px !important}
  .std-body h3{font-size:16px !important;margin:15px 0 7px !important}
  .std-body p{margin:6px 0 !important}
  .std-body table{font-size:12.5px !important}
  .std-body th,.std-body td{padding:6px 8px !important}

  /* TL;DR 速览块移动端收紧 */
  .std-tldr{margin:22px auto 14px !important;padding:14px 16px !important;border-radius:0 10px 10px 0 !important}
  .std-tldr p{font-size:13.5px !important;line-height:1.7 !important}

  /* 相关标准网格移动端两列，提升信息密度 */
  .std-body>div[style*="grid-template-columns"]{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:10px !important}
  .std-body>div[style*="grid-template-columns"] a{padding:12px 14px !important}

  /* CTA 卡片：竖排堆叠 + 按钮全宽，消除右侧留白（覆盖模板内联 flex） */
  .std-cta{
    flex-direction:column !important;
    align-items:stretch !important;
    text-align:left !important;
    padding:20px 18px !important;
    gap:14px !important;
  }
  .std-cta>div:first-child h3{font-size:18px !important;margin:0 0 6px !important}
  .std-cta>div:first-child p{font-size:12.5px !important;margin:0 !important;color:#cdd9e8 !important}
  .std-cta>div:last-child{
    display:flex !important;flex-direction:column !important;gap:10px !important;width:100% !important
  }
  .std-cta .btn{
    width:100% !important;min-height:44px !important;
    display:inline-flex !important;align-items:center !important;justify-content:center !important;
    font-size:15px !important
  }
}