/* ===== Design Tokens (对齐设计稿真值) ===== */
:root {
  --brand: #ED1B24;          /* 设计稿红块/红条 */
  --brand-dark: #c9161e;     /* hover 深红 */
  --brand-brown: #4B2F31;    /* products 分类标签深红棕 */
  --ink: #333333;            /* 设计稿正文/标题主色 #333 */
  --ink-strong: #1a1a1a;
  --ink-soft: #555555;
  --line: rgba(0,0,0,.08);
  --max: 1424px;
  /* 区块背景（取自 PSD 真实均值） */
  --bg-about: #FFFFFF;      /* PSD about 区块背景为白色；之前 #F1F1F0 误取为过渡区灰色 */
  --bg-products: #FFFFFF;    /* PSD 背景图层在 products 区(1835~2460)实测为纯白 255,255,255；
                                之前 #E9E9EA 是误取了整组均值，导致整块发灰 */
  --bg-service: #FFFFFF;     /* PSD 组9 区块背景为纯白 255,255,255；卡片矩形 6 内部亦纯白，仅带 2px #EDED 边框 */
  --bg-news: #ffffff;        /* PSD news 区块整体背景为白色；标题区深色仅是大卡片/局部元素 */
  --news-dark: #1c1e20;      /* news 大卡片底色 (PSD 矩形8 近黑 0,0,0) */
  --news-dark2: #232629;     /* news 卡片2 深底（同族微调） */
  --news-light: #EFEFEF;     /* news 右侧列表浅块 */
  --footer-bg: #282828;      /* PSD bottom 背景 (40,40,40) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* 入场缓出曲线，heroFadeIn 等 @keyframes 动画使用 */
}

/* ===== Reset & Base ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Poppins', 'Source Han Sans CN', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background: #ffffff;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: 78px; /* fixed nav 占高，避免后续 section 被遮挡 */
}
img { display: block; max-width: 100%; height: auto; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
h1, h2, h3, h4 { font-weight: 700; line-height: 1.2; }
p { line-height: 1.6; }

/* 键盘焦点可见（无障碍） */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 2px; }
/* 减弱动效：只关掉「平滑滚动」这种可能引起不适的连续位移，
   但保留入场淡入/上浮等关键帧动画（否则用户开了系统"减弱动态效果"后整个站会完全静止）。 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ===== Layout container ===== */
.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* ===== Fixed Nav ===== */
.site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  width: 100%;
  z-index: 1000;
  height: 78px;
  display: flex;
  align-items: center;
  background: transparent;
  box-shadow: none;
  transition: height .35s ease, background .35s ease, box-shadow .35s ease;
}
.site-nav.scrolled {
  height: 64px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
}
.nav-inner {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: center;
  gap: 32px;
}
/* min-width:0 让品牌名在窄屏（≤320px）可以收缩并省略号，否则 nowrap 的最小内容宽度会把导航工具区挤出屏幕 */
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo { width: 36px; height: auto; display: block; flex: none; }
.brand-name {
  font-size: 18px; font-weight: 700; color: var(--ink-strong);
  white-space: nowrap; letter-spacing: .02em;
  min-width: 0;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.nav-links { flex: 1; display: flex; align-items: center; justify-content: center; gap: 40px; margin-left: 0; }
/* 英文站顶栏：英文公司名自然宽 390px（中文仅 232px），且英文导航标签（Machined Products
   128px 等）远长于中文 4 字标签 —— 实测英文导航一行需要 692px，@1440 只剩 687px，
   差 5px 就会触发 flex 收缩，导致**所有**导航项被压到自然宽以下、文字折成两行。
   策略：① 导航项 flex:0 0 auto 禁止压缩（宁可略挤也不折行）；
        ② 收紧 nav-inner / nav-links 间距，把 ≥1440 的一行导航稳住；
        ③ ≤1439 由下面的媒体查询把品牌名改成折两行，进一步让出横向空间。
   作用域仅在 html[lang="en"]，中文站取值一律不动。 */
html[lang="en"] .nav-inner { gap: 20px; }
html[lang="en"] .nav-links { gap: 20px; }
html[lang="en"] .nav-links > a,
html[lang="en"] .nav-links .nav-item { flex: 0 0 auto; }
html[lang="en"] .nav-links a { font-size: 14px; }
html[lang="en"] .brand-name { font-size: 15px; letter-spacing: 0; }
.nav-links a {
  font-size: 15px; font-weight: 500; color: var(--ink-strong);
  position: relative; padding: 6px 2px;
  transition: color .3s ease;
}
.nav-links a:hover { color: var(--brand); }
/* 当前所在栏目（一级菜单）：与老站一致，仅文字变红。
   刻意不加粗、不加下划线 —— 字重变化会改变文本宽度，英文站长标签会把导航挤折行。 */
.nav-links a.is-active { color: var(--brand); }
.nav-tools { display: flex; align-items: center; gap: 18px; }
.nav-phone {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--ink-strong);
  background: transparent;
  transition: transform .25s ease, color .25s ease;
}
.nav-phone:hover { transform: translateY(-2px); color: var(--brand); }
.nav-phone__icon {
  width: 34px; height: 34px; flex: none;
  border-radius: 50%;
  background: var(--brand);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s ease, box-shadow .25s ease;
}
.nav-phone:hover .nav-phone__icon { background: var(--brand-dark); box-shadow: 0 6px 16px rgba(237, 27, 36, .35); }
.nav-phone__icon img { width: 16px; height: 16px; display: block; }
.nav-lang { position: relative; display: flex; align-items: center; }
.nav-lang__btn {
  display: flex; align-items: center; gap: 5px;
  height: 32px; padding: 0 6px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink-strong); font-size: 14px; font-weight: 600; font-family: inherit;
}
.nav-lang__btn img { width: 22px; height: 22px; display: block; }
.nav-lang__current { white-space: nowrap; }
.nav-lang__caret { width: 10px; height: 6px; color: var(--ink-strong); transition: transform .25s ease; }
.nav-lang.open .nav-lang__caret { transform: rotate(180deg); }
.nav-lang__menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 100px; margin: 0; padding: 6px;
  list-style: none; background: #fff; border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1100;
}
.nav-lang.open .nav-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-lang__menu li { list-style: none; }
/* 语言菜单项：既是 button 也可能是真实链接 <a>（当前语言高亮） */
.nav-lang__menu button,
.nav-lang__menu a {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 9px 12px;
  border: none; background: transparent; cursor: pointer;
  color: var(--ink); font-size: 14px; font-family: inherit; text-align: left;
  border-radius: 6px; text-decoration: none; box-sizing: border-box;
}
.nav-lang__menu button:hover,
.nav-lang__menu a:hover { background: #f5f5f5; color: var(--brand); }
.nav-lang__menu button.is-active,
.nav-lang__menu a.is-active { color: var(--brand); font-weight: 700; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; border: none; background: transparent; cursor: pointer;
}
.nav-toggle span { display: block; height: 2px; width: 24px; background: var(--ink-strong); transition: .3s; }

/* ===== Generic section spacing ===== */
.section { padding: 72px 0; position: relative; }
.section__head { margin-bottom: 40px; }
.section__title { font-size: clamp(28px, 4vw, 40px); color: var(--ink); }
.section__sub { margin-top: 14px; font-size: 16px; color: #666; max-width: 760px; }
.section__more {
  font-size: 16px; font-weight: 700; color: var(--ink);
  display: inline-flex; align-items: center; gap: 4px;
  transition: color .25s ease, transform .25s ease;
}
.section__more:hover { color: var(--brand); transform: translateX(3px); }

/* ===== Hero / Banner ===== */
.hero {
  position: relative;
  min-height: clamp(520px, 54.4vw, 1044px);
  background: #DDDCE0;
  overflow: hidden;
  margin-top: -78px;        /* 背景图顶到页面最上方 */
  padding-top: 78px;        /* 内容从固定导航下方开始 */
}
.hero__bg,
.hero__mould,
.hero__bottles,
.hero__content,
.hero__cats,
.hero__scroll {
  position: absolute;
  z-index: 2;
}
.hero__bg {
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; z-index: 1;
}
.hero__content {
  left: 6.93%;              /* PSD x=133/1920 */
  top: 26.05%;              /* PSD y=272/1044 */
  max-width: 540px;
  /* 用 @keyframes 动画做 hero 入场（替代原先的 transition 写法，属于"真正的动画"） */
  animation: heroFadeIn 0.9s var(--ease-out) both;
}
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero__en {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(15px, 2vw, 20px);
  font-weight: 700; color: var(--ink); margin-bottom: 10px;
}
.hero__title {
  font-size: clamp(32px, 5vw, 44px);
  color: var(--ink-strong); line-height: 1.1;
}
.hero__desc {
  margin-top: 20px;
  max-width: 440px;         /* PSD 描述文字真实宽度约 421px，留安全边 */
  font-size: clamp(14px, 1.5vw, 16px);
  color: #444; line-height: 1.6;
}
.hero__mould {
  left: 34.79%;             /* PSD x=668/1920 */
  top: 31.90%;              /* PSD y=333/1044 */
  width: 30.57%;            /* PSD w=587/1920 */
  height: auto;
}
.hero__bottles {
  left: 3.54%;              /* PSD x=68/1920 */
  top: 57.57%;              /* PSD y=601/1044 */
  width: 22.60%;            /* PSD w=434/1920 */
  height: auto;
  mix-blend-mode: multiply; /* PSD 该图层 blend_mode=MULTIPLY，白色底会融入背景 */
}
.hero__cats {
  right: 6.82%;             /* PSD right=(1920-1789)/1920 */
  top: 25.86%;              /* PSD y=270/1044 */
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  width: 21.98%;            /* PSD w=422/1920 */
  border: none;
}
.hero__cat {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  aspect-ratio: 211 / 159;  /* PSD 单卡近似比例 */
  background: rgba(255, 255, 255, .6);
  color: var(--ink-strong);
  font-size: clamp(11px, 1.05vw, 15px);
  font-weight: 600;
  transition: background .25s ease, color .25s ease;
  position: relative;
}
.hero__cat__icon {
  width: clamp(32px, 3.2vw, 52px);
  height: auto;
  margin-bottom: 8px;
  transition: filter .25s ease;
}
.hero__cat:hover {
  background: var(--brand);
  color: #fff;
}
.hero__cat:hover .hero__cat__icon { filter: brightness(0) invert(1); }
.hero__scroll {
  left: 7.14%;              /* PSD x=137/1920 */
  top: 47.32%;              /* PSD y=494/1044 */
  width: 2.24%;             /* PSD w=43/1920 */
  min-width: 28px;
  opacity: .7;
  animation: bounceDown 1.8s ease-in-out infinite;
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

/* ===== About ===== */
/* PSD about 组就是内容 bbox（974~1940，高 966），组内无额外上下留白，
   上下 72px 的 section padding 会让区块比设计稿高出一截，这里归零 */
/* overflow:hidden 让超出视口右侧的大图像 PSD 一样被裁掉，同时避免整页出现横向滚动 */
.about { background: var(--bg-about); padding-top: 0; padding-bottom: 0; overflow: hidden; }
/* PSD：大图顶边 y=974，标题顶边 y=1185 → 文本列比大图低 211px */
.about__text-col { margin-top: 211px; position: relative; }
.about__inner {
  /* about 组左边缘对齐 PSD 全局内容区（x≈249），右栏直接延伸到视口右边缘 */
  width: 100%;
  max-width: 100%;
  padding-left: max(24px, calc((100vw - var(--max)) / 2));
  padding-right: 0;
  display: grid;
  /* PSD：文本列 249→1144（宽 895），大图紧贴其后从 1144 起（宽 853，右侧超出画布被裁）
     故左列固定 896px、gap 为 0，右列取剩余宽度；改为 minmax(0,896px) 保证缩放下可收缩不溢出 */
  grid-template-columns: minmax(0, 896px) minmax(0, 1fr);
  gap: 0;
  align-items: start;
}
.about__title { font-size: clamp(34px, 4.6vw, 55px); color: var(--ink); font-weight: 700; }
/* PSD 副标题顶边 y=1257 → 组相对 283；标题盒底 277 + 6 = 283 */
.about__subtitle { margin-top: 6px; font-size: clamp(24px, 2.6vw, 36px); color: var(--ink); font-weight: 500; }
/* PSD 正文文字图层宽 944px（252→1196），会略微压在大图左侧的透明留白上 */
/* PSD 正文顶边 y=1347 → 组相对 373；副标题盒底 341 + 32 = 373 */
.about__text { margin-top: 32px; max-width: 944px; font-size: 16px; color: var(--ink); line-height: 1.75; }
.about__more {
  display: inline-block; margin-top: 75px;   /* PSD：正文末行 y=487 → 「查看更多」y=560，间距 73px */
  /* PSD 中文字图层在小图之上，小图会压到「查看更多」这一行，这里保证文字盖在上面 */
  position: relative; z-index: 2;
  font-size: 18px; font-weight: 700; color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-underline-offset: 4px;
  transition: color .25s ease, transform .25s ease;
}
.about__more:hover { color: var(--brand); transform: translateX(3px); }
.about__thumbs {
  /* PSD 小图是独立摆放的（thumbL 顶边 y=1550），并不排在「查看更多」之后，
     且会与那一行重叠；这里按 PSD 坐标绝对定位，top=576-211=365，left=254-249=5 */
  position: absolute; left: 5px; top: 365px;
  display: flex;
  align-items: flex-end;
  gap: 10px;            /* PSD：左图右边缘 x=535，右图左边缘 x=545 → 间距 10px */
  z-index: 1;
  max-width: 100%;      /* 不超出文本列 */
}
.about__thumb {
  width: auto;
  height: auto;
  max-height: 280px;    /* PSD 左小图高 267px，需放行到原始高度，避免被压缩 */
  display: block;
  flex: none;
}
/* PSD 真值：左小图 281×267，右小图 453×216；
   之前用 38%/58% 百分比，因容器 shrink-to-fit 导致右图被异常压缩，
   改为固定宽度并按 PSD 原始比例缩放 */
.about__thumb--left { width: 281px; max-width: 100%; }
.about__thumb--right { width: 453px; max-width: 100%; }
.about__media { position: relative; overflow: hidden; }
/* PSD 中该图保持原始尺寸 853×966，右侧超出画布被裁掉；
   因此这里不缩放到列宽，保持原尺寸，由 body 的 overflow-x:hidden 裁切 */
/* PSD smartobject 的 fill_opacity 已经包含在 psd-tools 导出的 alpha 通道里：
   大图 alpha 0~77，小图 alpha 0~51。保留原始 RGBA 即可复现设计稿的淡色与层次感；
   不需要再用 CSS opacity，否则会把内部深浅层次压平。 */
.about__main { width: 853px; max-width: none; height: auto; display: block; }
/* 小图同理：组 composite 已含 fill_opacity，不能再叠 CSS opacity。
   实测叠 0.20 后墨迹被抬到 240 以上，小图几乎看不见（灰度<200 检测直接抓空）。 */

/* ===== Products ===== */
/* PSD products 组 = 内容 bbox（y 1828~2467，高 639），组内无额外留白：
   标题顶边在组相对 y=39，故上 padding 取 39，不用通用 .section 的 72 */
.products { background: var(--bg-products); padding-top: 80px; padding-bottom: 97px; }
/* PSD 头部内容跨 252~1669，容器内容只到 272~1648，故左右各外溢 20/21px。
   标题左 x=252 右 x=470；分类左 x=719 右 x=1537；箭头 x=1604~1669。
   PSD 中标题顶 y=39；实际网页固定 nav 会遮挡，故整体下移，保留足够呼吸空间。 */
.products__head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: flex-start;
  gap: 0;
  margin-left: 0; margin-right: 0;
  min-height: 80px;
  border-bottom: 1px solid rgba(0,0,0,.12);   /* PSD 图层 7 拷贝：y≈119 的淡灰参考线 */
}
/* PSD「产品中心」bbox 252~470(宽218)/高53 → 字号约 55px、加粗、行高紧；
   通用 .section__title 上限只有 40px，这里单独放大 */
.products__head .section__title { font-size: clamp(32px, 3.6vw, 55px); font-weight: 800; line-height: 1; }
.products__title-wrap { display: flex; align-items: center; gap: 24px; flex: none; }
.products__cats-wrap {
  display: flex; align-items: flex-start; justify-content: flex-end;
  flex: 1 1 auto; min-width: 0;
  padding-top: 16px;   /* 让分类文字顶边落在 PSD y≈55 */
  margin-left: clamp(24px, 4vw, 247px);  /* 标题右 x=470 → 分类左 x=719，空出 247px（缩放时收缩） */
}
.products__cats {
  display: flex; flex-wrap: wrap; gap: 8px 41px;   /* PSD 分类间距 ≈ 41px */
}
.products__cats li {
  font-size: clamp(14px, 1.5vw, 18px); font-weight: 600; color: var(--brand-brown);
  cursor: pointer; transition: color .25s ease;
  white-space: nowrap;
  position: relative;
  padding-bottom: 0;
  line-height: 1;   /* PSD 分类文字 bbox 高 18px */
}
/* PSD 活动分类下划线：文字顶 y55，下划线顶 y114 → 相对文字顶 59px */
.products__cats li::after {
  content: ''; position: absolute; left: 0; right: 0; top: 59px;
  height: 5px; background: var(--brand); transform: scaleX(0); transition: transform .25s ease;
}
.products__cats li:hover { color: var(--brand); }
.products__cats li.active { color: var(--brand); }
.products__cats li.active::after { transform: scaleX(1); }
.products__arrows {
  display: flex; align-items: flex-end; gap: 37px;   /* PSD：两箭头 1604~1618 / 1655~1669 → 间距 37 */
  flex: none;
  align-self: flex-start;
  margin-left: 67px;    /* 分类右 x=1537 → 箭头左 x=1604，空出 67px */
  margin-top: 11px;     /* 箭头中心与分类文字中心对齐（分类文字顶 y55 高 18，箭头 14×26） */
}
.products__arrow {
  width: 14px; height: 26px; border: none; background: transparent;
  padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .25s ease;
}
.products__arrow img { width: 100%; height: 100%; object-fit: contain; }
.products__arrow:hover { opacity: .6; }
.products__arrow--prev img { transform: rotate(0deg); }
.products__arrow--next img { transform: rotate(0deg); }

/* ===== 首页产品中心：分类标签数量由后台决定，不再固定 7 个 =====
   分类变多时不能换行（会顶掉 PSD 的 80px 头部高度），改为单行 + 横向滚动，
   由左右箭头切换选中项并把选中标签滚入视野。 */
.products__cats {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* 旧 Edge/IE */
}
.products__cats::-webkit-scrollbar { display: none; }
/* 活动分类下划线位于 li::after top:59px，超出 li 自身高度(18px)。
   给 li 预留底部内边距，让下划线落在盒内，否则会被上面的 overflow 裁掉。
   46px + 文字 18px = 64px，加 .products__cats-wrap 的 padding-top 16px 仍是 80px，
   与 PSD 的头部高度/下边框位置完全一致。 */
.products__cats li { padding-bottom: 46px; }

/* 左右箭头到头时置灰（本次改造前箭头是死按钮，没有终态样式） */
.products__arrow:disabled,
.products__arrow:disabled:hover { opacity: .28; cursor: default; }

/* 分类切换时的占位/提示文案（跨整行） */
.products__empty {
  grid-column: 1 / -1;
  padding: 70px 0 30px;
  text-align: center;
  font-size: 15px;
  color: var(--brand-brown);
}
/* 切换中轻微变淡，避免点了没反应的错觉 */
.products__grid.is-loading { opacity: .45; }
/* 切换完成后整块淡入上浮（动态插入的卡片不带 reveal，靠这里给动效） */
.products__grid.is-swapping { animation: zmProductsSwap .45s var(--ease-out) both; }
@keyframes zmProductsSwap {
  from { opacity: 0; transform: translateY(11px); }
  to   { opacity: 1; transform: none; }
}
/* PSD 实测列宽是固定像素而非比例：
   card1 图 199~654(455) | 空42 | 分隔线4 | 空54 | card2 图 754~1162(408)
   | 空57 | 分隔线4 | 空19 | card3 组 1242~1668(426)，图本身 1242~1662(420)。
   总宽 199→1668 = 1469。容器内容从 272 起，故左溢 73px、右溢 20px。 */
.products__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 57px);
  margin-top: 51px; position: relative;   /* 头部底 y=119，栅格再下推 51px */
  margin-left: 0; margin-right: 0;
  align-items: start;
}
.products__grid > :nth-child(1) { grid-column: 1; }
.products__grid > :nth-child(2) { grid-column: 2; }
.products__grid > :nth-child(3) { grid-column: 3; }
/* PSD 形状 2：x 696~700(3px 灰 203)，组相对 y 221~570(349 高) */
/* 桌面端改为流式布局后，竖线分隔由 grid 列间距替代，隐藏独立 sep 元素避免撑宽 */
.products__sep {
  display: none;
}
.product-card {
  display: block;
  transition: transform .3s ease;
}
.product-card:hover { transform: translateY(-4px); }
/* 用户要求：产品图片容器长宽一致，避免 item 高度不齐。
   统一图片容器为 100%宽 × 421px高（取 PSD 最高图高度），图片在容器内居中缩放。 */
.product-card__imgwrap {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 421px;
  overflow: hidden;
}
.product-card__img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s ease; }
.product-card:hover .product-card__img { transform: scale(1.06); }
/* 统一卡片 body 位置，不再按各卡图片高度微调 */
.product-card__body { padding: 0; margin-top: 24px; }
/* 保留原来 381px 灰线宽度约束 */
.product-card__line-wrap { max-width: 381px; }
.product-card__line { max-width: 381px; }
.product-card__name { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1; }
/* PSD 形状1：三卡统一 380px 宽 × 5px 高，y=607~611；名字底 y≈593，故 line-wrap 上边距 14px */
.product-card__line-wrap {
  position: relative;
  display: block;
  width: 100%;
  max-width: 381px;
  margin: 14px 0 10px;
}
.products__grid > :nth-child(1) .product-card__line-wrap { margin-left: 0px; }
.products__grid > :nth-child(2) .product-card__line-wrap { margin-left: 0px; }
.products__grid > :nth-child(3) .product-card__line-wrap { margin-left: 0px; }
.product-card__line {
  display: block; width: 100%; max-width: 381px; height: 5px; background: #CBCBCB; border-radius: 0;
}
/* PSD 右箭头 (3) 图标：25×25，右缘在灰线右端内侧 1px（bbox 右=630 vs 线右=631），底边在灰线上方约 8px */
.product-card__more-arrow {
  position: absolute;
  right: 1px;
  top: -34px;
  width: 25px; height: 25px;
  pointer-events: none;
}
/* PSD「查看详情」实测墨迹 RGB = (237,27,36) 品牌红，之前写成 #777 灰色 */
.product-card__more {
  display: inline-block;
  font-size: 13px; color: var(--brand); font-weight: 600;
  transition: color .25s ease, transform .25s ease;
}
.product-card:hover .product-card__more { color: var(--brand); transform: translateX(4px); }

/* ===== Factory ===== */
.factory {
  display: block;
  background: #ffffff;  /* PSD 组7 两侧为白色背景 */
  overflow: hidden;
  position: relative;
}
/* PSD 组 7 总尺寸 1922×1232。
   按真实 bbox 切图后，用 absolute 百分比定位 + z-index 还原 PSD 层级覆盖关系，
   确保 tile 边缘的相邻块内容被上层盖住、不露出。 */
.factory__mosaic {
  position: relative;
  width: 100%;
  max-width: 1922px;
  aspect-ratio: 1922 / 1232;
  margin: 0 auto;
}
.factory__tile {
  position: absolute;
  display: block;
  overflow: hidden;
}
.factory__tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* PSD 可见边界对齐（相对 1922×1232，按 shape 实际不透明边界 + 上层覆盖修正）
   TL=(0,3,480,418)    TM=(480,3,959,418)   TR=(959,2,1921,834)
   BL=(0,418,960,834)  BM_PHOTO=(482,834,961,1231)  BM_ARROW=(961,834,1440,1231)
   z-index 按 PSD 层级：TR(4)>BL(3)>TM/BM_ARROW(2)>TL/BM_PHOTO(1) */
.factory__tile--tl       { left: 0%;        top: 0.2435%; width: 24.9740%; height: 33.685%; z-index: 1; }
.factory__tile--tm       { left: 24.9740%; top: 0.2435%; width: 24.9220%; height: 33.685%; z-index: 2; background: var(--brand); }
.factory__tile--tr       { left: 49.9480%; top: 0.1623%; width: 50.0520%; height: 67.532%; z-index: 4; }
.factory__tile--bl       { left: 0%;        top: 33.9286%; width: 49.9480%; height: 33.7662%; z-index: 3; }
.factory__tile--bm-photo { left: 25.0780%; top: 67.695%; width: 24.9220%; height: 32.224%; z-index: 1; }
.factory__tile--bm-arrow { left: 49.9480%; top: 67.695%; width: 24.9220%; height: 32.224%; z-index: 2; background: var(--brand); }
/* 中上红块文字：DOM 化，避免重影 */
.factory__title {
  position: absolute;
  left: 18.54%; top: 17.11%;
  font-size: clamp(20px, 2.2vw, 30px);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.factory__en {
  position: absolute;
  left: 18.75%; top: 29.64%;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(11px, 1.1vw, 16px);
  color: rgba(255,255,255,.95);
  line-height: 1.2;
}
.factory__cta {
  position: absolute;
  left: 18.33%; top: 73.49%;
  width: 28.54%; height: 11.57%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--brand);
  font-size: clamp(11px, 1vw, 14px);
  font-weight: 600;
  line-height: 1;
  transition: background .25s ease, color .25s ease;
}
.factory__tile--tm:hover .factory__cta { background: #f5f5f5; color: var(--brand-dark); }
/* 中下箭头块：红底 + 居中箭头图标 */
.factory__tile--bm-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}
.factory__tile--bm-arrow img { position: static; width: 40px; height: auto; }
.factory__tile--bm-arrow:hover { opacity: .95; }
/* 平板端（≤768px）：从 absolute 拼贴切换为真响应式 grid 堆叠，
   不再等比缩小整张图。保持照片和红块的视觉存在感，文字/按钮回归可读。 */
@media (max-width: 768px) {
  .factory__mosaic {
    display: grid;
    grid-template-areas:
      "tr tr"
      "tl tm"
      "bl bl"
      "bm-photo bm-arrow";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, auto);
    gap: 0;
    width: 100%;
    max-width: 100%;
    aspect-ratio: auto;
    padding: 0 24px;
  }
  .factory__tile {
    position: relative;
    left: auto; top: auto; width: auto; height: auto;
    min-height: 150px;
    border-radius: 0;
  }
  .factory__tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  /* 照片 tile 在窄屏按原图比例自然撑开，避免被固定高度裁切 */
  .factory__tile--photo:not(.factory__tile--bm-arrow) { min-height: auto; }
  .factory__tile--photo:not(.factory__tile--bm-arrow) img {
    position: static;
    width: 100%;
    height: auto;
    display: block;
  }
  .factory__tile--tl        { grid-area: tl; }
  .factory__tile--tm        { grid-area: tm; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: var(--brand); min-height: 150px; }
  .factory__tile--tr        { grid-area: tr; }
  .factory__tile--bl        { grid-area: bl; }
  .factory__tile--bm-photo  { grid-area: bm-photo; }
  .factory__tile--bm-arrow  { grid-area: bm-arrow; display: flex; align-items: center; justify-content: center; background: var(--brand); min-height: 150px; }
  .factory__tile--bm-arrow img { position: static; width: 48px; height: auto; }
  /* 窄屏下红块文字不再用绝对百分比，改为 flex 居中 */
  .factory__tile--tm .factory__title,
  .factory__tile--tm .factory__en,
  .factory__tile--tm .factory__cta {
    position: static;
    left: auto; top: auto; width: auto; height: auto;
  }
  .factory__title { font-size: clamp(20px, 5vw, 32px); }
  .factory__en { font-size: clamp(12px, 3vw, 16px); }
  .factory__cta {
    font-size: clamp(13px, 3.5vw, 16px);
    padding: 10px 24px;
    min-height: 44px; /* 触控友好 */
    min-width: 104px;
  }
}

/* 手机端（≤480px）：全部单列堆叠，进一步放大文字/按钮 */
@media (max-width: 480px) {
  .factory__mosaic {
    grid-template-areas:
      "tr"
      "tl"
      "tm"
      "bl"
      "bm-photo"
      "bm-arrow";
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 24px 24px;
  }
  .factory__tile { min-height: 150px; }
  .factory__tile--photo:not(.factory__tile--bm-arrow) { min-height: auto; }
  .factory__title { font-size: clamp(20px, 6.5vw, 30px); }
  .factory__en { font-size: clamp(12px, 3.6vw, 15px); }
  .factory__cta {
    font-size: clamp(14px, 4.5vw, 17px);
    padding: 12px 28px;
    min-height: 48px;
    min-width: 112px;
  }
  .factory__tile--bm-arrow { min-height: 150px; }
  .factory__tile--bm-arrow img { position: static; width: 64px; height: auto; }
}

/* ===== Service ===== */
.service { background: var(--bg-service); }
.service__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.service__head > div {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex: 1;
}
.service__head .section__title { flex: none; white-space: nowrap; font-size: clamp(32px, 3.6vw, 55px); font-weight: 800; line-height: 1; }
.service__head .section__sub { flex: 1; max-width: 760px; margin-top: 5px; color: var(--ink); }
.service__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 48px;
  /* PSD 组9：四个卡片整体被 1px #EDEDED 包围（上+左+右，底边由红色装饰条替代） */
  border: 1px solid #EDEDED;
  border-bottom: 0;
}
.service-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background: #FFFFFF;
  padding: 53px 26px 47px;
  transition: transform .3s ease, box-shadow .3s ease;
  height: 335px;
}
/* PSD 矩形 6：描边 width=1，卡片间 1px #EDEDED 分隔线；最右侧卡片无右边框 */
.service-card:not(:last-child) {
  box-shadow: inset -1px 0 0 0 #EDEDED;
}
/* PSD 矩形 7：红线真值高 6px；按用户反馈进一步减细为 4px，贴卡片底边 */
.service-card::after {
  content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 4px;
  background: var(--brand);
}
.service-card:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(0, 0, 0, .12); }
.service-card:not(:last-child):hover { box-shadow: inset -1px 0 0 0 #EDEDED, 0 14px 36px rgba(0, 0, 0, .12); }
.service-card:hover::after { height: 5px; }
.service-card__title { font-size: 20px; color: var(--ink); }
/* 描述不再撑满空间 */
.service-card__desc { margin-top: 29px; font-size: 14px; color: var(--ink); line-height: 1.7; }
/* PSD 图标在卡片内绝对定位：图标顶距卡片顶约 247px、距左约 33px；不随描述高度变化 */
.service-card__icon {
  position: absolute; left: 33px; top: 247px;
  width: 40px; height: 40px; object-fit: contain;
}

/* ===== News ===== */
.news {
  background: var(--bg-news);
  padding: 30px 0 56px;
}
.news__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.news__head .section__title { color: var(--ink); font-size: 50px; font-weight: 800; line-height: 1; }
.news__head .section__more { color: var(--ink-soft); font-size: 15px; font-weight: 500; }
.news__head .section__more-arrow { color: var(--brand); font-size: 18px; margin-left: 2px; }
.news__head .section__more:hover { color: var(--brand); }
.news__layout {
  display: grid;
  grid-template-columns: 489fr 489fr 408fr;
  gap: 19px;
  margin-top: 26px;
  align-items: stretch;
  min-height: 418px;
}
.news-card {
  display: block; position: relative;
  border-radius: 0; overflow: hidden;
  width: 100%; height: 100%;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1), box-shadow .6s ease;
  color: #fff;
  text-decoration: none;
}
.news-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.news-card:hover .news-card__bg { transform: scale(1.08); }
.news-card__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 10s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.news-card__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .55) 100%);
  pointer-events: none;
}
.news-card__body {
  position: relative; z-index: 2;
  display: flex; flex-direction: column;
  height: 100%;
  padding: 59px clamp(24px, 4vw, 36px) 73px;
}
.news-card__title { font-size: clamp(18px, 1.6vw, 20px); font-weight: 700; line-height: 1.3; }
.news-card__desc { margin-top: 24px; font-size: clamp(13px, 1.2vw, 14px); line-height: 1.7; color: rgba(255, 255, 255, .95); }
.news-card__more { margin-top: auto; font-size: 16px; font-weight: 500; color: #fff; }
.news-list { display: flex; flex-direction: column; gap: 19px; min-height: 418px; }
.news-item {
  display: flex; flex-direction: column; justify-content: center;
  padding: 22px 26px; border-radius: 0; background: var(--news-light);
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  flex: 1;
}
.news-item:hover { background: #e6e6e6; }
.news-item__date { font-size: 13px; color: #666; }
.news-item__title { margin-top: 10px; font-size: 16px; font-weight: 600; color: var(--ink); transition: color .3s ease; line-height: 1.5; }
.news-item:hover .news-item__title { color: var(--brand); }

/* ===== Contact Page (v13) ===== */
.contact-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 5vw, 72px);
  align-items: stretch;
  padding: clamp(48px, 6vw, 80px) 0;
}

/* ---- 左侧：联系信息卡片 ---- */
.contact-page__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
}
.contact-card {
  background: #f7f8fa;
  border-radius: 14px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: box-shadow .3s ease, transform .3s ease;
  flex: 1;
}
.contact-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,.07);
  transform: translateY(-2px);
}
.contact-card__icon {
  flex-shrink: 0;
  width: 48px; height: 48px;
  background: var(--brand, #C40C24);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.contact-card__icon svg { width: 22px; height: 22px; }
.contact-card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.contact-card__label {
  font-size: 13px; color: #999;
  line-height: 1.4;
}
.contact-card__value {
  font-size: 16px; color: var(--ink); font-weight: 600; line-height: 1.5;
}
.contact-card__value a {
  color: var(--ink); text-decoration: none;
  transition: color .25s ease;
}
.contact-card__value a:hover { color: var(--brand); }

/* ---- 右侧：表单卡片 ---- */
.contact-page__form-wrap {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 28px rgba(0,0,0,.08);
  padding: clamp(32px, 3.5vw, 44px) clamp(28px, 3.5vw, 40px);
  display: flex;
  flex-direction: column;
}
.contact-form__header { margin-bottom: 32px; }
.contact-form__title {
  font-size: clamp(22px, 2.2vw, 28px); font-weight: 700;
  color: var(--ink); margin: 0 0 10px; line-height: 1.3;
}
.contact-form__desc {
  font-size: 14px; color: #888; margin: 0; line-height: 1.6;
}
.contact-form { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.contact-form__field { position: relative; }
.contact-form__field--msg { flex: 1; }
.contact-form textarea,
.contact-form input[type="email"],
.contact-form input[type="tel"] {
  width: 100%;
  border: 1.5px solid #e0e3e8;
  border-radius: 10px;
  padding: 15px 18px;
  font-size: 15px; color: var(--ink);
  background: #fafbfc;
  font-family: inherit;
  outline: none;
  transition: border-color .25s ease, box-shadow .25s ease, background .25s ease;
  resize: vertical;
  min-height: 54px;
  box-sizing: border-box;
}
.contact-form textarea { min-height: 140px; line-height: 1.65; flex: 1; }
.contact-form textarea::placeholder,
.contact-form input::placeholder { color: #bbb; }
.contact-form textarea:focus,
.contact-form input:focus {
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(196,12,36,.08);
}
.contact-form__submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 28px;
  background: var(--brand, #C40C24); color: #fff;
  border: none; border-radius: 10px;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: background .25s ease, transform .2s ease, box-shadow .25s ease;
  font-family: inherit;
  letter-spacing: 0.5px;
}
.contact-form__submit svg { width: 18px; height: 18px; }
.contact-form__submit:hover {
  background: #a00a1e;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(196,12,36,.3);
}
.contact-form__submit:active { transform: translateY(0); }

/* ===== 厂房设备相册（自助列表版块） ===== */
.album__title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 22px;
  padding-left: 14px;
  position: relative;
  line-height: 1.3;
}
.album__title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 5px; height: 20px;
  border-radius: 3px;
  background: var(--brand, #C40C24);
}
.album__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.album__item {
  position: relative;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #f0f2f5;
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.album__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.album__caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 14px 12px;
  background: linear-gradient(transparent, rgba(0,0,0,.62));
  color: #fff;
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
}

/* ===== Footer / Contact ===== */
.footer {
  position: relative;
  background: var(--footer-bg);
  color: #fff;
  padding: 76px 0 48px;
  overflow: hidden;
}
.footer__inner {
  position: relative; z-index: 2;
  width: 100%;
  max-width: 1720px;        /* PSD 内容区 x100~1820，避免大屏右侧空旷 */
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 100px);
  padding-right: clamp(20px, 5vw, 89px);
}
.footer__brand { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 12px; color: #fff; }
.footer__logo { width: 40px; height: auto; display: block; }
.footer__sep {
  border: none; height: 1px; background: rgba(255,255,255,.04);
  margin: 38px 0 0;
}
.footer__main {
  display: grid;
  grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 360px);
  gap: clamp(32px, 4vw, 100px);
  justify-content: start;
  align-items: start;
  max-width: 100%;
  padding: 44px 0 36px;
}
.footer__col--company,
.footer__nav-cols,
.footer__col--form { min-width: 0; }
.footer__contact { font-size: 14px; line-height: 2; color: rgba(255,255,255,.85); }
.footer__social { margin-top: 22px; }
.footer__social-title { font-size: 15px; font-weight: 700; color: #fff; margin: 0 0 8px; line-height: 1.2; }
.footer__social-list {
  display: flex; align-items: center; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.footer__social-list li { flex: none; }
.footer__social-list a {
  display: block; width: 30px; height: 30px;
}
.footer__social-list img { width: 100%; height: 100%; display: block; }
.footer__nav-cols {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px clamp(14px, 1.5vw, 24px);
  justify-content: start;
  align-items: start;
}
/* 英文站页脚导航：7 列在英文下每列只有 67~84px，而 "Machined Products"(119px)、
   "Online Store"(82px) 等标题放不下，配合 white-space:nowrap 会溢出串列
   （表现为 "Online StoreContact Us" 挤在一起）。英文站改为 4 列 + 标题允许折行，
   7 个栏目自然排成 4+3 两行；中文 4 字标题在 7 列里放得下，取值一律不动。
   ⚠️ 必须限定 min-width:1200px —— ≤1199 时页脚导航会切成手风琴（单列），
   若这里不加媒体查询包裹，本条因特异性更高会把手风琴的 1fr 单列覆盖掉，手机端页脚散架。 */
@media (min-width: 1200px) {
  html[lang="en"] .footer__nav-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* 表单列与公司列各收窄一点，给 4 列导航区多留 ~70px，避免 "Machined Products" 折行 */
  html[lang="en"] .footer__main {
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 340px);
    gap: clamp(28px, 3vw, 72px);
  }
  html[lang="en"] .footer__nav-cols { gap: 22px 20px; }
}
html[lang="en"] .footer__nav-title { white-space: normal; }

.footer__nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer__nav-title {
  font-size: 15px; font-weight: 700; color: #fff;
  line-height: 1.2; margin: 0;
  white-space: nowrap;
  text-decoration: none;
  background: none; border: none; padding: 0;
  font-family: inherit;
}
.footer__nav-title--toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  cursor: default; pointer-events: none;
}
.footer__nav-title--toggle::after { display: none; }
a.footer__nav-title { color: #fff; transition: color .25s ease; }
a.footer__nav-title:hover { color: #ffd9dc; }
.footer__nav-panel {
  display: grid;
  grid-template-rows: 1fr !important;
  transition: grid-template-rows .3s ease, opacity .3s ease, margin-top .3s ease;
  opacity: 1 !important;
}
.footer__nav-panel > * { overflow: hidden; }
.footer__links li { margin-bottom: 10px; }
.footer__links li:last-child { margin-bottom: 0; }
.footer__links a { font-size: 14px; color: rgba(255,255,255,.85); transition: color .25s ease; }
.footer__links a:hover { color: #ffd9dc; }
.footer__form-title { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.footer__form-note { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.5; margin-bottom: 14px; }
.footer__form {
  display: flex; flex-direction: column; gap: 12px;
  background: #333333;
  padding: 12px;
  border-radius: 0;
}
.footer__form input,
.footer__form textarea {
  width: 100%; border: none;
  background: #fff; color: #333;
  font-size: 14px; padding: 10px 12px; border-radius: 0; outline: none;
  font-family: inherit;
}
.footer__form input::placeholder,
.footer__form textarea::placeholder { color: #999; }
.footer__form textarea { resize: none; height: 100px; line-height: 1.5; }
.footer__submit {
  background: #C40C24; color: #fff; border: none;
  font-size: 15px; font-weight: 700; padding: 12px;
  border-radius: 0; cursor: pointer;
  transition: background .25s ease, transform .2s ease;
}
.footer__submit:hover { background: #9e0a1c; transform: translateY(-1px); }
.footer__submit.done { background: #2e7d32; }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px; font-size: 13px; color: #939393;
}
.footer__copyright { text-align: left; color: #939393; }
.footer__icp { text-align: right; color: #939393; }

/* ===== Back to top ===== */
.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 999;
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; color: transparent; border: 1px solid rgba(0,0,0,.08);
  font-size: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  transition: opacity .35s ease, transform .35s ease, background .25s, border-color .25s, box-shadow .25s;
}
.back-to-top::before {
  content: '';
  position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ED1B24' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 13l6-6 6 6'/%3E%3Cpath d='M6 18l6-6 6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
  transition: transform .25s ease, filter .25s ease;
}
.back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }
.back-to-top:hover {
  background: var(--brand); border-color: transparent;
  box-shadow: 0 10px 24px rgba(237,27,36,.28);
  transform: translateY(-4px);
}
.back-to-top:hover::before { filter: brightness(0) invert(1); transform: translateY(-1px); }

/* ===== Scroll reveal（多方向关键帧入场，按版块错峰，节奏明快） ===== */
/* 仅在 JS 激活时隐藏初始态，保证无 JS 环境内容正常显示 */
.js .reveal { opacity: 0; will-change: opacity, transform, filter; }

/* 进入视口（或 hero 级联）时播放对应方向的关键帧动画 */
.js .reveal.is-visible {
  animation-duration: 0.8s;
  animation-timing-function: var(--ease-out);
  animation-fill-mode: both;
  animation-name: revealUp;          /* 默认方向：上浮 */
}
.js .reveal--up.is-visible    { animation-name: revealUp; }
.js .reveal--down.is-visible  { animation-name: revealDown; }
.js .reveal--left.is-visible  { animation-name: revealLeft; }
.js .reveal--right.is-visible { animation-name: revealRight; }
.js .reveal--zoom.is-visible  { animation-name: revealZoom; }
.js .reveal--blur.is-visible  { animation-name: revealBlur; }

@keyframes revealUp {
  from { opacity: 0; transform: translateY(42px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealDown {
  from { opacity: 0; transform: translateY(-42px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes revealLeft {
  from { opacity: 0; transform: translateX(-60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealRight {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes revealZoom {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes revealBlur {
  from { opacity: 0; filter: blur(14px); transform: translateY(20px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}

/* ===== Responsive ===== */
/* products 用的是 PSD 固定像素列宽（455/408/420 + 特定间距），只适配 ≥1440；
   窄屏必须回到流式栅格，否则固定列宽 + 负 margin 会造成横向溢出。 */
@media (max-width: 1439px) {
  .products__head { margin-left: 0; margin-right: 0; min-height: auto; flex-wrap: wrap; justify-content: space-between; }
  .products__cats-wrap { margin-left: 0; padding-top: 0; flex: 1; }
  .products__arrows { margin-left: 24px; margin-top: 0; }
  .products { padding-top: 64px; }
  .products__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: 0; margin-right: 0; gap: 24px; margin-top: 40px;
  }
  .products__grid > :nth-child(1),
  .products__grid > :nth-child(2),
  .products__grid > :nth-child(3) { grid-column: auto; }
  .product-card__imgwrap { height: 340px; }
  .product-card__body { margin-top: 18px; text-align: left; }
  .product-card__line-wrap,
  .product-card__line { width: 100%; }
  /* footer 适配：收窄公司与表单列，给导航标题留出足够空间，配合 white-space:nowrap 保持单行 */
  .footer__inner { padding-left: 40px; padding-right: 40px; }
  /* 原 200/340 + 24px 间距：@1200 时 7 列每列只剩 53px，中文 4 字标题（60px）会溢出串列。
     收窄公司/表单列并减小列间距后，@1200 每列 ~66px，刚好容下 4 字标题。 */
  .footer__main {
    grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 320px);
    gap: 32px;
  }
  .footer__nav-cols { gap: 16px; }

  /* 中文站：1200~1439 时 7 个导航项按 40px 间距需要约 697px，实际只有 656px，
     会被压成两行。这里只收紧间距（不动 ≥1440 的 PSD 取值与字号）。 */
  .nav-inner { gap: 20px; }
  .nav-links { gap: 20px; }

  /* 英文站：≤1439 横向空间不足以放下「一行品牌名 + 一行导航」（英文导航一行需 692px），
     ① 品牌名由 nowrap+ellipsis（会截断公司全称）改为折两行；
     ② 导航字号 14→13、间距收紧。实测可用宽度 = 视口 - 品牌块(logo36+间距12+名字190)
        - 工具区223 - 两侧间距32，@1200 得 611px ≥ 需求 597px。 */
  html[lang="en"] .brand { flex: 0 0 auto; }
  html[lang="en"] .brand-name {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.25; max-width: 190px;
  }
  html[lang="en"] .nav-inner { gap: 16px; }
  html[lang="en"] .nav-links { gap: 16px; }
  html[lang="en"] .nav-links a { font-size: 13px; }
  /* 英文站页脚：表单列收窄一点，导航区拿到更宽的 1fr（4 列每列约 140~165px） */
  html[lang="en"] .footer__main {
    grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 320px);
    gap: 28px;
  }
  html[lang="en"] .footer__nav-cols { gap: 22px 18px; }
  html[lang="en"] .footer__nav-title { font-size: 14px; line-height: 1.35; }
  html[lang="en"] .footer__links a { font-size: 13px; }
}
@media (max-width: 1199px) {
  .nav-inner { padding: 0 24px; gap: 20px; }
  .nav-links { gap: 16px; }
  /* 中文站 992~1199：品牌名(232px) + 7 项导航(457px) + 工具区(232px) 三者横向放不下
     （@1100 只有 548px 给导航，需要 577px）。品牌名改为折两行，把宽度让给导航。 */
  .brand { flex: 0 0 auto; }
  .brand-name {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.25; max-width: 170px; font-size: 17px;
  }
  .nav-links a { font-size: 14px; }
  /* 英文站：这一档还要再挤一点，并把电话号码文字收起（只留可点的电话图标），
     否则 "Machined Products"(128px) 这类长标签放不下。 */
  html[lang="en"] .nav-inner { gap: 14px; }
  html[lang="en"] .nav-links a { font-size: 13px; }
  html[lang="en"] .brand-name { max-width: 165px; font-size: 14px; }
  html[lang="en"] .nav-phone span:last-child { display: none; }
  .about__inner { grid-template-columns: 1fr; gap: 32px; padding: 60px 24px; }
  .about__media { display: none; }
  .about__main { width: 100%; max-width: 100%; height: auto; }
  /* 单列时取消 PSD 绝对定位，小图回到正常流 */
  .about__text-col { margin-top: 0; text-align: center; }
  .about__thumbs { position: static; margin-top: 32px; justify-content: center; }
  .about__text { max-width: 720px; margin-left: auto; margin-right: auto; text-align: left; }
  .about__more { margin-top: 28px; }
  .products__head { flex-direction: column; align-items: center; gap: 14px; padding-bottom: 16px; }
  .products__title-wrap { width: 100%; justify-content: center; }
  .products__arrows { display: none; }
  .products__cats-wrap {
    width: 100%;
    overflow: visible;
    justify-content: center;
    margin-top: 0;
    padding-bottom: 0;
  }
  .products__cats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 16px;
    padding-bottom: 0;
  }
  .products__cats li {
    font-size: clamp(13px, 1.4vw, 16px);
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    padding: 10px 22px;
    border-radius: 24px;
    background: #F4F4F4;
    color: #666;
    line-height: 1.2;
    transition: background .25s ease, color .25s ease, transform .2s ease;
  }
  .products__cats li:hover { color: var(--brand); }
  .products__cats li.active { background: var(--brand); color: #fff; }
  .products__cats li.active:hover { color: #fff; }
  .products__cats li::after { display: none; }
  .service__head { flex-direction: column; }
  .service__head > div { flex-direction: column; gap: 12px; }
  .service__head .section__sub { margin-top: 0; }
  .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service__grid { grid-template-columns: repeat(2, 1fr); }
  .news__layout { grid-template-columns: 1fr 1fr; }
  .news-list { grid-column: 1 / -1; flex-direction: row; }
  /* footer 改为两行：公司信息+表单并排，导航单独占满第二行 */
  .footer__inner { padding-left: 40px; padding-right: 40px; }
  .footer__main {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "company form" "navs navs";
    gap: 40px 48px;
  }
  .footer__col--company { grid-area: company; }
  .footer__nav-cols {
    grid-area: navs;
    grid-template-columns: 1fr;
    gap: 0;
    justify-content: stretch;
  }
  .footer__nav-col {
    gap: 0;
    padding: 16px 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  .footer__nav-col:first-child { padding-top: 0; }
  .footer__nav-title {
    width: 100%;
    text-align: left;
    cursor: pointer;
    pointer-events: auto;
  }
  .footer__nav-title--toggle::after {
    display: block;
    content: "";
    width: 8px; height: 8px;
    margin-top: -4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s ease, margin-top .3s ease;
    flex: none;
  }
  .footer__nav-col.is-open .footer__nav-title--toggle::after {
    transform: rotate(-135deg);
    margin-top: 4px;
  }
  .footer__nav-panel {
    grid-template-rows: 0fr !important;
    opacity: 0 !important;
    margin-top: 0;
  }
  .footer__nav-col.is-open .footer__nav-panel {
    grid-template-rows: 1fr !important;
    opacity: 1 !important;
    margin-top: 14px;
  }
  .footer__col--form { grid-area: form; }
  .hero__mould,
  .hero__bottles,
  .hero__content,
  .hero__cats,
  .hero__scroll { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none; }
  .hero { min-height: auto; padding: 104px 24px 48px; }
  .hero__bg { object-position: center top; }
  .hero__content { max-width: 640px; margin: 0 auto; padding: 0; text-align: center; }
  .hero__en { font-size: clamp(14px, 1.8vw, 18px); }
  .hero__title { font-size: clamp(30px, 4.5vw, 42px); }
  .hero__desc { margin-left: auto; margin-right: auto; }
  .hero__mould { max-width: 520px; width: 82%; margin: 28px auto 0; display: block; }
  .hero__bottles { max-width: 340px; width: 62%; margin: 24px auto 0; display: block; }
  .hero__cats { margin: 28px auto 0; width: 100%; max-width: 520px; }
  .hero__cat { aspect-ratio: 213 / 150; font-size: clamp(12px, 1.2vw, 14px); }
  .hero__cat__icon { width: clamp(40px, 4vw, 54px); }
  .hero__scroll { display: none; }
}
/* 992~1099：品牌名 + 7 个导航项 + 电话 三者横向挤不下（中英文都一样），
   把品牌名折成两行、导航字号降到 14px、并收起电话号码文字（图标仍是可点的 tel: 链接），
   兜住 1024 平板横屏这一档，避免导航折行。 */
@media (max-width: 1099px) {
  .brand { flex: 0 0 auto; }
  .brand-name {
    white-space: normal; overflow: visible; text-overflow: clip;
    line-height: 1.25; max-width: 160px; font-size: 14px;
  }
  .nav-inner { gap: 16px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 14px; }
  .nav-phone span:last-child { display: none; }
  /* 英文站在 992 附近仍差一点点（需 603px / 只有 578px），再收品牌名与导航间距 */
  html[lang="en"] .brand-name { max-width: 145px; }
  html[lang="en"] .nav-links { gap: 12px; }
}
@media (max-width: 991px) {
  .nav-toggle { display: flex; }
  .nav-tools { margin-left: auto; }
  .nav-links {
    position: absolute; top: 100%; right: 24px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; padding: 10px 26px; border-radius: 12px;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .12);
    min-width: 220px; max-width: calc(100vw - 48px); display: none;
  }
  .nav-links.open { display: flex; }
  .site-nav.scrolled .nav-links { border-radius: 0 0 12px 12px; }
  /* 统一手机端一级菜单行距：直接子项与 .nav-item 包裹项都按同样的块级行高排布
     （.nav-item 内的 <a> 不是 flex 子项，若不设 display:block 会退化为行内元素，
     上下的 padding 不参与布局高度，导致该项与相邻项间距不一致） */
  .nav-links > a,
  .nav-links .nav-item { width: 100%; }
  .nav-links a { color: var(--ink) !important; display: block; width: 100%; padding: 12px 0; }
  /* 手机端同样保留「当前栏目」高亮：上面的 !important 会压过普通优先级，
     这里用同样带 !important 的更高特异性规则覆盖回来 */
  .nav-links a.is-active { color: var(--brand) !important; }
  .nav-links a::after { display: none; }
  /* 手机端（汉堡菜单）只显示一级菜单：隐藏二级子菜单与下拉箭头 */
  .nav-links .nav-item.has-child > a::after { display: none; }
  .nav-links .nav-sub { display: none !important; }
  .nav-phone span:last-child { display: none; }
  .products__grid { grid-template-columns: repeat(2, 1fr); }
  .contact-page { grid-template-columns: 1fr; gap: 36px; padding: 40px 0; }
  .contact-card { padding: 24px 26px; gap: 14px; }
  .contact-card__icon { width: 44px; height: 44px; border-radius: 10px; }
  .contact-card__icon svg { width: 20px; height: 20px; }
  .contact-page__form-wrap { padding: 28px 24px; }
  .contact-form__header { margin-bottom: 24px; }
  .album__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .album__title { margin-bottom: 16px; }
}
@media (max-width: 767px) {
  .nav-phone { display: none; }
  .nav-inner { padding: 0 16px; }
  .brand-name { font-size: 15px; }
  .nav-links { right: 16px; max-width: calc(100vw - 32px); }
  .section { padding: 48px 0; }
  .about__inner { padding: 48px 24px; }
  .about__text-col { text-align: center; }
  .about__title { font-size: clamp(28px, 8vw, 34px); }
  .about__subtitle { font-size: clamp(18px, 4.5vw, 22px); }
  .about__text { font-size: 15px; line-height: 1.8; margin-top: 18px; text-align: center; }
  .about__more { margin-top: 24px; }
  .about__media { display: none; }
  .about__thumbs { flex-direction: row; align-items: flex-end; justify-content: center; gap: 18px; margin-top: 28px; }
  .about__thumb--left { width: 38%; max-width: 160px; }
  .about__thumb--right { width: 58%; max-width: 260px; }
  .about__thumb { max-height: none; }
  /* products 手机端，左右 padding 与上方「关于我们」版块保持一致（24px） */
  .products { padding-top: 56px; padding-bottom: 64px; }
  .products .container { padding-left: 24px; padding-right: 24px; }
  .products__head { align-items: center; border-bottom: 1px solid rgba(0, 0, 0, .12); padding: 0 0 18px; }
  .products__title-wrap { width: 100%; justify-content: center; }
  .products__arrows { display: none; }
  .products__cats-wrap { width: 100%; margin-top: 14px; }
  .products__cats { justify-content: center; gap: 10px 12px; padding: 4px 0 0; flex-wrap: wrap; }
  .products__cats li {
    font-size: 13px; font-weight: 500;
    padding: 8px 16px;
    border-radius: 20px;
    background: #F4F4F4;
    color: #666;
    line-height: 1.2;
    transition: background .25s ease, color .25s ease, transform .2s ease;
  }
  .products__cats li:hover { color: var(--brand); }
  .products__cats li.active { background: var(--brand); color: #fff; }
  .products__cats li.active:hover { color: #fff; }
  .products__cats li::after { display: none; }
  .products__grid { grid-template-columns: 1fr; gap: 32px; margin-top: 36px; padding: 0; }
  .product-card__imgwrap { width: 100%; height: clamp(280px, 75vw, 420px); }
  .product-card__img { width: 100%; height: 100%; object-fit: contain; }
  .products__grid > :nth-child(1) .product-card__body,
  .products__grid > :nth-child(2) .product-card__body,
  .products__grid > :nth-child(3) .product-card__body { margin-top: 18px; padding-left: 0; }
  .product-card__body { text-align: left; }
  .product-card__name { font-size: 18px; }
  .product-card__line-wrap { margin: 10px 0 8px; width: 100%; max-width: none; }
  .product-card__line { height: 4px; width: 100%; max-width: none; }
  .product-card__more-arrow { width: 20px; height: 20px; top: -26px; right: 0; }
  .product-card__more { font-size: 12px; }
  .service__grid { grid-template-columns: 1fr; }
  .service-card { height: auto; min-height: auto; padding: 36px 24px 40px; }
  .service-card__desc { margin-top: 14px; }
  .service-card__icon { position: static; margin: 28px 0 0; width: 40px; height: 40px; }
  .service-card::after { height: 4px; bottom: 0; }
  .service-card:hover::after { height: 5px; }
  .news__layout { grid-template-columns: 1fr; }
  .news-list { flex-direction: column; }
  .news-card__body { padding: 48px 28px 56px; }
  .news-card__title { font-size: 18px; }
  .news-card__desc { margin-top: 18px; font-size: 13px; }
  .news-card__more { font-size: 15px; }
  /* footer 手机端单列堆叠（继承 ≤1199px 手风琴） */
  .footer__inner { padding-left: 20px; padding-right: 20px; }
  /* 手机端页脚「上下留白」整体收紧（桌面端取值一律不动）：
     上：.footer 顶内边距 76 → 36；logo 与首条分隔线之间 38(mt)+1(线)+44(main pt)≈83 → 22+1+18≈41；
     下：main pb 36 → 12、末条分隔线 mt 38 → 22、版权行 pt 24 → 16 = 51。 */
  .footer { padding-top: 36px; }
  .footer__main {
    grid-template-columns: 1fr;
    grid-template-areas: "company" "navs" "form";
    gap: 36px;
    padding-top: 18px;
    padding-bottom: 12px;
  }
  .footer__nav-col { padding: 14px 0; }
  .footer__nav-col.is-open .footer__nav-panel { margin-top: 12px; }
  .footer__sep--top { margin-top: 22px; }
  .footer__sep--bottom { margin-top: 22px; }
  .footer__bottom { flex-direction: column; text-align: center; gap: 10px; padding-top: 16px; }
  .footer__copyright, .footer__icp { text-align: center; }
  .hero { min-height: 100svh; padding: 92px 20px 36px; display: flex; flex-direction: column; justify-content: center; }
  .hero__bg { object-position: 12% center; opacity: 0.45; }
  .hero__content { max-width: 100%; text-align: center; }
  .hero__en { font-size: 13px; margin-bottom: 6px; }
  .hero__title { font-size: clamp(26px, 8.5vw, 34px); }
  .hero__desc { font-size: 13px; margin-top: 12px; max-width: 92%; }
  .hero__mould { width: 88%; max-width: 380px; margin: 18px auto 0; }
  .hero__bottles { width: 68%; max-width: 220px; margin: 8px auto 0; }
  .hero__cats { width: 100%; max-width: 100%; margin: 14px 0 0; gap: 8px; }
  .hero__cat { aspect-ratio: auto; min-height: 88px; padding: 10px 4px; font-size: 13px; border-radius: 6px; }
  .hero__cat__icon { width: 40px; margin-bottom: 6px; }
  .hero__scroll { display: none; }
}


/* ============================================================
   中茂模具 - 内页通用内容样式（与首页品牌一致）
   配合 layout/header_zm + footer_zm 使用
   ============================================================ */
:root {
  --primary: var(--brand);
  --primary-dark: var(--brand-dark);
  --gray: #888;
  --line: #ececec;
  --inner-max: 1200px;
}

/* 导航下拉（二级栏目） */
.nav-item { position: relative; }
.nav-item.has-child > a::after {
  content: "";
  display: inline-block;
  width: 0; height: 0;
  margin-left: 5px;
  vertical-align: middle;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid #888;
  transition: transform .2s;
}
.nav-item.has-child:hover > a::after { transform: rotate(180deg); }
.nav-sub {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 160px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  padding: 8px 0;
  opacity: 0; visibility: hidden;
  transition: all .2s ease;
  z-index: 50;
}
.nav-item.has-child:hover .nav-sub { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.nav-sub a {
  display: block;
  padding: 10px 20px;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
}
/* 下拉里的当前栏目（二级菜单）同样标红 */
.nav-sub a.is-active { color: var(--brand); }
.nav-sub a:hover { background: #f7f7f7; color: var(--brand); }

/* 页面主体容器 */
.zm-main { }
.wrap {
  max-width: var(--inner-max);
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* 面包屑 */
.crumb {
  font-size: 14px;
  color: var(--gray);
  padding: 22px 0 6px;
}
.crumb a { color: var(--gray); }
.crumb a:hover { color: var(--brand); }
.crumb span,
.crumb .sep { color: #ccc; margin: 0 8px; }

/* 侧栏 + 内容 两栏布局 */
.detail { }
.layout-flex { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.side { width: 220px; flex: none; position: sticky; top: 96px; }
.side-title {
  font-size: 17px; font-weight: 700; color: #222;
  padding: 12px 16px; background: var(--brand); color: #fff; border-radius: 8px 8px 0 0;
}
.side-menu { background: #fff; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; overflow: hidden; }
.side-menu a {
  display: block; padding: 13px 16px; font-size: 15px; color: #444;
  border-bottom: 1px solid #f3f3f3; transition: .2s;
}
.side-menu a:last-child { border-bottom: 0; }
.side-menu a:hover { color: var(--brand); background: #fff6f6; padding-left: 22px; }
.side-menu a.on { color: var(--brand); background: #fff6f6; font-weight: 600; border-left: 3px solid var(--brand); }

.content-col { flex: 1; min-width: 0; }

/* 文章详情 */
.detail h1,
.page-title {
  font-size: 26px; font-weight: 700; color: #1c1c1c; margin-bottom: 12px; line-height: 1.3;
}
.detail .meta { color: var(--gray); font-size: 13px; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.detail-tip { color: var(--gray); font-size: 14px; margin: 4px 0 0; }
.content { font-size: 16px; line-height: 1.9; color: #333; }
.content p { margin: 0 0 16px; }
.content img { max-width: 100%; height: auto; border-radius: 8px; margin: 12px 0; display: block; margin-left: auto; margin-right: auto; }
/* 一段多图并排（纯图序列）：保持 inline 整体居中，不拆行 */
.content p:has(img + img) { text-align: center; }
.content p:has(img + img) img { display: inline-block; margin: 12px 4px; vertical-align: top; }
.content h2, .content h3 { margin: 24px 0 12px; color: #222; }
.content ul, .content ol { padding-left: 22px; margin: 0 0 16px; }
.content a { color: var(--brand); }

/* ===== 加工成品图集（custom/20） ===== */
.jgcp-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 18px 0 8px;
}
.jgcp-item {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.jgcp-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}
.jgcp-item a { display: block; }
.jgcp-item img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
  background: #f5f5f5;
}
.jgcp-item figcaption {
  padding: 12px 14px;
  font-size: 14px;
  color: var(--ink);
  text-align: center;
  border-top: 1px solid var(--line);
}
@media (max-width: 1199px) {
  .jgcp-gallery { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .jgcp-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .jgcp-item img { height: 170px; }
}
@media (max-width: 460px) {
  .jgcp-gallery { grid-template-columns: 1fr; }
  .jgcp-item img { height: 200px; }
}
.jgcp-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 30px 0 4px;
}
.jgcp-pager a,
.jgcp-pager span {
  min-width: 38px;
  height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  transition: all .2s var(--ease-out);
}
.jgcp-pager a:hover {
  border-color: var(--brand);
  color: var(--brand);
}
.jgcp-pager .pg-cur {
  border-color: var(--brand);
  background: var(--brand);
  color: #fff;
  font-weight: 600;
}

/* ===== 内页两栏布局（替代模板内联样式，保证媒体查询能生效） ===== */
.inner-cols { display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.inner-cols > .side { flex: none; }
.inner-cols > .content-col { flex: 1 1 320px; min-width: 0; }
.side--wide { width: 320px; }
/* 在线留言：右侧「留言展示」面板已下线 → 页面变单栏，限宽避免输入框被拉满整屏（右对齐留白由外层 wrap 承担） */
.content-col--message { flex: 1 1 640px; max-width: 860px; margin: 0 auto; }

/* 详情页图文两栏 */
.detail-cols { display: flex; gap: 34px; align-items: flex-start; flex-wrap: wrap; }
.detail-cols > * { flex: 1 1 320px; min-width: 0; }
.detail-actions { margin-top: 24px; display: flex; gap: 12px; flex-wrap: wrap; }

/* 内页按钮（实心 / 描边） */
.btn-solid, .btn-line {
  display: inline-block; text-align: center;
  font-size: 15px; line-height: 1.4; border-radius: 6px;
  padding: 12px 30px; transition: background .25s, color .25s, border-color .25s;
}
.btn-solid { background: var(--brand); border: 1px solid var(--brand); color: #fff; }
.btn-solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-line { background: #fff; border: 1px solid var(--brand); color: var(--brand); padding: 12px 24px; }
.btn-line:hover { background: var(--brand); color: #fff; }

/* 内页区块小标题 / 上下篇导航 / 辅助文字 */
.section-h2 { font-size: 20px; margin: 18px 0 16px; color: var(--brand-dark); }
.post-nav {
  margin-top: 30px; display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; color: var(--brand); font-size: 15px;
}
.post-nav a:hover { color: var(--brand-dark); }
.muted { color: var(--gray); }
.hl { color: var(--brand); white-space: nowrap; }
.price { color: #e4393c; font-weight: 700; }
.mb-16 { margin-bottom: 16px; }
.mt-20 { margin-top: 20px; }
.mt-24 { margin-top: 24px; }
.mt-30 { margin-top: 30px; }

/* 产品详情主图 */
.goods-img { width: 100%; height: auto; border-radius: 8px; display: block; background: #f5f5f5; }

/* 操作结果提示页 / 内容不存在页 */
.tip-page { padding: 80px 20px; text-align: center; }
.tip-card {
  display: inline-block; max-width: 100%; box-sizing: border-box;
  padding: 30px 50px; background: #fff; border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.tip-card__icon { font-size: 40px; line-height: 1.2; margin-bottom: 14px; }
.tip-card__icon.is-ok { color: var(--brand); }
.tip-card__icon.is-err { color: #e4393c; }
.tip-card__msg { font-size: 16px; color: var(--gray); }
.tip-card__links { margin-top: 20px; }
.tip-card__links a { color: var(--brand); margin-right: 16px; }
.tip-card__links a:last-child { margin-right: 0; }
.empty-page { padding: 70px 20px; text-align: center; }

/* 新闻/行情列表项：缩略图 + 主体列 */
.list-item__thumb { flex: none; width: 160px; height: 110px; object-fit: cover; border-radius: 6px; }
.list-item__main { flex: 1; min-width: 0; }
.list-item__meta { margin-top: 6px; color: var(--gray); font-size: 14px; }

/* 列表项（新闻/行情/招聘） */
.list-item {
  display: flex; gap: 20px; align-items: flex-start;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  color: #333; transition: .2s;
}
.list-item:hover { background: #fafafa; }
.list-item .date { flex: none; width: 84px; color: var(--gray); font-size: 14px; padding-top: 4px; }
.list-item h3 { font-size: 18px; font-weight: 600; color: #222; margin-bottom: 8px; transition: color .2s; }
.list-item:hover h3 { color: var(--brand); }
.list-item p { color: var(--gray); font-size: 14px; line-height: 1.7; margin: 0; }
.list-item .more { color: var(--brand); white-space: nowrap; align-self: center; }

/* 卡片网格（产品/相关推荐） */
.grid { display: grid; gap: 24px; margin-top: 8px; }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.card {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; transition: .25s; color: #333;
}
.card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgba(0,0,0,.10); border-color: transparent; }
.card > img,
.card .img { width: 100%; height: 220px; object-fit: cover; display: block; background: #f5f5f5; }
.card .body { padding: 16px; }
.card .body h3 { font-size: 16px; font-weight: 600; color: #222; margin-bottom: 6px; }
.card .body p { color: var(--gray); font-size: 13px; margin: 0; }
.card .price { color: #e4393c; font-weight: 700; }

/* ===== 产品推荐标签（1.9.33 前台增量：热销 / 促销 / 新品） ===== */
.tag {
  display: inline-block;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 4px 8px; border-radius: 4px;
  color: #fff; white-space: nowrap;
  vertical-align: 3px; margin-left: 6px;
}
.tag--hot   { background: #e4393c; }   /* 热销 红 */
.tag--promo { background: #ff8c00; }   /* 促销 橙 */
.tag--new   { background: #2fa84f; }   /* 新品 绿 */

/* 列表卡片内的标签行（紧贴标题下方，比分页/价格更靠前） */
.card .body .card__tags { margin: 8px 0 0; line-height: 1; }
.card .body .card__tags .tag { font-size: 11px; padding: 3px 6px; margin: 0 4px 0 0; vertical-align: 0; }

/* ===== 产品相册画廊（1.9.33 前台增量：点击缩略图切换主图） ===== */
.goods-album {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 12px;
}
.goods-album__item {
  width: 76px; height: 76px; flex: none;
  object-fit: cover; border-radius: 6px;
  background: #f5f5f5; cursor: pointer;
  border: 2px solid #e5e5e5;
  transition: border-color .2s;
}
.goods-album__item:hover { border-color: #f3a3a6; }
.goods-album__item.is-active { border-color: var(--brand); }
@media (max-width: 576px) {
  .goods-album { gap: 8px; }
  .goods-album__item { width: 62px; height: 62px; }
}

/* 搜索结果 / 留言展示 */
.search-list { list-style: none; padding: 0; margin: 0; }
.search-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.search-list a { color: #222; font-size: 16px; }
.search-list a:hover { color: var(--brand); }
.search-list .price { color: #e4393c; margin-left: 10px; }

/* 表单 */
.message-form { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; }
.form-item { margin-bottom: 16px; }
.form-item label { display: block; font-size: 14px; color: #555; margin-bottom: 6px; }
.form-item input,
.form-item textarea {
  width: 100%; padding: 11px 14px; border: 1px solid #ddd; border-radius: 8px;
  font-size: 15px; color: #333; box-sizing: border-box; font-family: inherit;
}
.form-item input:focus,
.form-item textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(237,27,36,.12); }
.form-item textarea { resize: vertical; }
.btn { cursor: pointer; }
.notice { background: #f4f8ff; border-left: 3px solid var(--brand); padding: 10px 14px; color: var(--gray); font-size: 14px; border-radius: 4px; margin: 10px 0 20px; }

.msg-item { background: #fff; border-radius: 8px; padding: 14px 16px; margin-bottom: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.msg-item__head { font-weight: 600; color: var(--brand-dark); }
.msg-item .name { font-weight: 600; color: var(--brand-dark); }
.msg-item .time { float: right; color: var(--gray); font-size: 12px; }
.msg-item p { color: var(--gray); margin-top: 6px; font-size: 14px; }

/* 空状态 */
.empty-tip { text-align: center; color: var(--gray); padding: 50px 0; }

/* 分页（ThinkPHP paginate 默认输出 .pagination） */
.zm-pager { text-align: center; margin: 34px 0; }
.pagination { display: inline-flex; gap: 6px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; justify-content: center; }
.pagination li { display: inline-block; }
.pagination li a,
.pagination li span {
  display: inline-block; min-width: 38px; padding: 9px 12px;
  border: 1px solid var(--line); border-radius: 8px; color: #555; font-size: 14px; background: #fff;
}
.pagination li a:hover { border-color: var(--brand); color: var(--brand); }
.pagination li.active span,
.pagination li.thispage span,
.pagination .active span { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 联系页信息块 */
.contact-info { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; line-height: 2; }
.contact-info p { margin: 0; }

/* 响应式 */
@media (max-width: 900px) {
  .layout-flex,
  .inner-cols { flex-direction: column; gap: 20px; }
  .side { width: 100%; position: static; top: auto; }
  .detail-cols { gap: 20px; }
  /* 竖向堆叠时要把 flex-basis(320px) 清掉，否则会变成"最小高度 320px" */
  .inner-cols > .content-col,
  .detail-cols > * { flex: none; width: 100%; }
  /* 单栏页面（在线留言）在窄屏不再限宽，交给 wrap 的边距控制 */
  .content-col--message { max-width: none; }

  /* 侧栏「栏目导航」在手机端改为横向可滑动的胶囊条：
     竖排 8 项会把正文整块推到首屏之外，横滑可以让列表页第一眼就看到内容 */
  .side-title { display: none; }
  .side-menu {
    display: flex; gap: 8px;
    overflow-x: auto; overflow-y: hidden;
    background: transparent; border: 0; border-radius: 0;
    margin: 0 -20px;              /* 出血到屏幕两边，滑动更顺手 */
    padding: 2px 20px 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .side-menu::-webkit-scrollbar { display: none; }
  .side-menu a {
    flex: 0 0 auto; white-space: nowrap;
    padding: 8px 16px; font-size: 14px; line-height: 1.4;
    border: 1px solid var(--line); border-radius: 999px;
    background: #fff; color: #444;
  }
  .side-menu a:last-child { border-bottom: 1px solid var(--line); }
  .side-menu a:hover { padding-left: 16px; background: #fff; color: var(--brand); }
  .side-menu a.on {
    padding-left: 16px; border: 1px solid var(--brand);
    background: var(--brand); color: #fff; font-weight: 600;
  }

  .grid.c3, .grid.c4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .list-item { flex-direction: column; gap: 8px; }
  .list-item .date { width: auto; padding-top: 0; }
  .list-item__thumb { width: 100%; height: 190px; }
  .detail-actions { gap: 10px; }
  .btn-solid, .btn-line { width: 100%; padding: 12px 20px; }
  .post-nav { flex-direction: column; gap: 10px; font-size: 14px; }
  .tip-page { padding: 50px 16px; }
  .tip-card { width: 100%; padding: 24px 20px; }
  .empty-page { padding: 50px 20px; }
}

/* ========== 内页 Banner ========== */
.banner {
  position: relative;
  overflow: hidden;
  background: #1a1a2e;
  min-height: 220px;
  display: flex;
  align-items: center;
}
.banner__bg {
  position: absolute; inset: 0;
  background: url('/static/web/img/zhongmao/extracted/banner_bg.png') center / cover no-repeat;
  opacity: .35;
}
.banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 50px 20px 40px;
  width: 100%;
  box-sizing: border-box;
}
.banner__title {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 10px;
  letter-spacing: 1px;
}
.banner__crumb {
  font-size: 14px;
  color: rgba(255,255,255,.7);
}
.banner__crumb a { color: rgba(255,255,255,.85); text-decoration: none; transition: color .2s; }
.banner__crumb a:hover { color: #fff; }
.banner__crumb .sep { margin: 0 8px; }

@media (max-width: 768px) {
  .banner { min-height: 150px; }
  .banner__inner { padding: 36px 16px 28px; }
  .banner__title { font-size: 24px; }
  .banner__crumb { font-size: 13px; }
}

/* ========== 超窄屏（≤380px，如 iPhone SE 375 / 320 机型）==========
   压缩导航内边距与图标尺寸，保证「品牌名 + 语言切换 + 汉堡按钮」同排不溢出 */
@media (max-width: 380px) {
  .nav-inner { padding: 0 12px; gap: 16px; }
  .nav-tools { gap: 10px; }
  .brand { gap: 8px; }
  .brand-logo { width: 30px; }
  .brand-name { font-size: 15px; }
  .nav-lang__btn { padding: 0 2px; }
  .nav-lang__btn img { width: 18px; height: 18px; }
  .nav-toggle { width: 36px; height: 36px; }
}