/* ==========================================================================
   惠隆包装 · 移动端 H5 落地页样式
   形态：全屏翻页（一屏一屏下滑，scroll-snap）广告落地页
   屏序：封面 → 公司介绍 → 展品展示 → 资质 → 联系方式
   配色沿用 PC 站：深炭首屏 + 橙色强调 + 牛皮纸暖调
   ========================================================================== */
:root {
  --ink: #1a1d21;
  --dark: #15181c;
  --dark-2: #1f2429;
  --paper: #f7f5f1;
  --white: #ffffff;
  --accent: #e8722a;
  --accent-dark: #c95d1d;
  --kraft: #c89b6d;
  --muted: #6b7280;
  --muted-2: #9aa3ad;
  --line: #e5e1da;
  --radius: 14px;
  --radius-lg: 20px;
  --shadow: 0 8px 24px rgba(15, 18, 22, .08);
  --serif: "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  /* 顶栏/底栏高度按屏幕高度自适应（客户要求：适配不同机型）
     · iPhone SE / 小屏安卓（约 667px 高）→ 取下限，把更多空间留给内容
     · iPhone 15 Pro Max / 大屏（约 932px 高）→ 取上限，栏更舒展
     用 clamp 而不是写死 px，避免小屏上导航挤占空间、大屏上又显得局促。 */
  --head-h: clamp(46px, 7vh, 58px);
  --dock-h: clamp(50px, 8vh, 68px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
/* --app-h：真实可视高度。由 assets/js/mobile.js 用 window.innerHeight /
   visualViewport 实时写入（JS 没跑起来时先退回 100dvh）。
   为什么需要它：手机浏览器顶部地址栏会随滚动收起/展开，切换窗口
   （分屏、切App、横竖屏）时 100vh / 100dvh 与 position:fixed 的定位基准
   还会短暂打架 —— 顶栏是 fixed(top:0)、.m-wrap 却是 100dvh，两者一错位，
   屏幕顶部就多出一条黑边。改成统一由 --app-h 驱动就不会错位。 */
:root { --app-h: 100vh; --app-h: 100dvh; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  height: var(--app-h);
  overflow: hidden;              /* 页面本身不滚，滚动交给 .m-pages */
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* 大屏（平板/桌面）访问时收窄成手机画幅，保持落地页观感 */
.m-wrap { width: 100%; height: var(--app-h); position: relative; overflow: hidden; }
@media (min-width: 720px) {
  body { background: #eceae5; }
  .m-wrap { max-width: 460px; margin: 0 auto; box-shadow: 0 0 40px rgba(0,0,0,.12); }
  /* 宽屏居中改用 --mx 变量，把 transform 让渡给沉浸态位移 */
  .m-head, .m-dock, .mp-nav { max-width: 460px; left: 50% !important; right: auto !important; --mx: -50%; }
  .m-dots { left: calc(50% - 230px) !important; right: calc(50% - 230px) !important; }
}

/* ============ 翻页容器 ============ */
.m-pages {
  height: 100vh; height: 100dvh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-pages::-webkit-scrollbar { display: none; }

/* ============ 单屏 ============ */
.m-page {
  position: relative;
  height: 100vh; height: 100dvh;
  scroll-snap-align: start;
  scroll-snap-stop: always;      /* 防止快速滑动跨屏 */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-top: calc(var(--head-h) + env(safe-area-inset-top));
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom));
}
.m-page-inner {
  flex: 1; min-height: 0;
  overflow-y: auto;              /* 兜底：内容实在放不下时屏内可滚 */
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 18px 8px;
  display: flex; flex-direction: column;
}
/* 内容不满一屏时上下居中（留白变成呼吸感而不是"半屏空"）；
   内容超高时 auto 外边距自动归 0，从顶部开始滚，不会裁掉标题。 */
.m-page[data-page="1"] .m-page-inner > *:first-child,
.m-page[data-page="2"] .m-page-inner > *:first-child,
.m-page[data-page="3"] .m-page-inner > *:first-child,
.m-page[data-page="4"] .m-page-inner > *:first-child { margin-top: auto; }
.m-page[data-page="1"] .m-page-inner > *:last-child,
.m-page[data-page="2"] .m-page-inner > *:last-child,
.m-page[data-page="3"] .m-page-inner > *:last-child,
.m-page[data-page="4"] .m-page-inner > *:last-child { margin-bottom: auto; }
.m-page-inner::-webkit-scrollbar { display: none; }
.m-page.center .m-page-inner { justify-content: center; }

/* 深色屏 */
.m-page.dark { background: linear-gradient(170deg, #23282e 0%, var(--dark) 55%, #101317 100%); color: #fff; }
.m-page.dark .m-sec-head p { color: rgba(255,255,255,.6); }

/* ---------- 每屏专属背景（纯渐变，不用 blur，低端机不掉帧） ---------- */
/* 屏 1 · 轮播：图片自绘，底色仅作图片未到位时的兜底。
   沉浸态下顶栏/底栏全程隐藏，撤掉首屏为其预留的上下内边距，
   让轮播图通栏铺满整屏——否则 54px/60px 的内边距区会透出暗色页面底色，
   看起来就是上下两条黑边（刘海屏再加安全区，黑边更明显）。
   注意：box-sizing 为 border-box，撤掉内边距不改变屏高，翻页 snap 不受影响。 */
.m-page[data-page="0"] { background: #15181c; padding-top: 0; padding-bottom: 0; }
/* 屏 2 · 公司介绍：暖纸底 + 右上暖光 + 左下牛皮光 */
.m-page[data-page="1"] {
  background:
    radial-gradient(90% 55% at 88% -5%, rgba(232,114,42,.12), transparent 62%),
    radial-gradient(70% 45% at 0% 100%, rgba(200,155,109,.13), transparent 66%),
    var(--paper);
}
/* 屏 3 · 产品介绍：深炭 + 左上冷光，衬托浅色产品卡 */
.m-page[data-page="2"] {
  background:
    radial-gradient(85% 50% at 10% -8%, rgba(143,216,230,.14), transparent 60%),
    linear-gradient(178deg, #1e2328 0%, #23282e 55%, #171a1e 100%);
}
/* 屏 4 · 资质：浅色纸纹理打底 + 顶部淡橙渐入（纹理上覆不透明遮罩，保证文字可读） */
.m-page[data-page="3"] {
  background:
    linear-gradient(180deg, rgba(247,245,241,.90), rgba(247,245,241,.95) 130px, rgba(247,245,241,.97)),
    url('../img/site/paper-light.jpg?v=20261023x') center/cover no-repeat,
    var(--paper);
  /* WebP 优先：不支持 WebP 的老浏览器保留上面的 JPG 声明 */
  background:
    linear-gradient(180deg, rgba(247,245,241,.90), rgba(247,245,241,.95) 130px, rgba(247,245,241,.97)),
    url('../img/site/paper-light.webp?v=20261023x') center/cover no-repeat,
    var(--paper);
}
/* 屏 5 · 工艺：浅色纸纹理 + 顶部极淡暖光 */
.m-page[data-page="4"] {
  background:
    radial-gradient(100% 55% at 50% 0%, rgba(232,114,42,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.95)),
    url('../img/site/paper-light.jpg?v=20261023x') center/cover no-repeat,
    var(--white);
  /* WebP 优先 */
  background:
    radial-gradient(100% 55% at 50% 0%, rgba(232,114,42,.05), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.95)),
    url('../img/site/paper-light.webp?v=20261023x') center/cover no-repeat,
    var(--white);
}
/* 屏 6 · 联系：深色纸纹理 + 双光晕收尾 */
.m-page[data-page="5"] {
  background:
    radial-gradient(80% 45% at 15% 0%, rgba(232,114,42,.22), transparent 62%),
    linear-gradient(180deg, rgba(21,24,28,.86), rgba(21,24,28,.93)),
    url('../img/site/paper-dark.jpg?v=20261023x') center/cover no-repeat,
    var(--dark);
  /* WebP 优先 */
  background:
    radial-gradient(80% 45% at 15% 0%, rgba(232,114,42,.22), transparent 62%),
    linear-gradient(180deg, rgba(21,24,28,.86), rgba(21,24,28,.93)),
    url('../img/site/paper-dark.webp?v=20261023x') center/cover no-repeat,
    var(--dark);
}

/* ============ 固定顶栏（默认透明：轮播屏透出大图；下滑后转毛玻璃） ============ */
.m-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  height: calc(var(--head-h) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  display: flex; align-items: center; justify-content: space-between;
  padding-left: 16px; padding-right: 12px;
  /* 透明态：仅一层极淡的顶部压暗，保证白字在任何展品图上都可读 */
  background: linear-gradient(180deg, rgba(10,12,14,.45), rgba(10,12,14,0));
  /* --mx/--my 位移变量：宽屏居中用 --mx，沉浸态滑出用 --my */
  transform: translateX(var(--mx, 0)) translateY(var(--my, 0));
  transition: background .3s ease, transform .38s cubic-bezier(.32,.72,.36,1);
}
.m-head.solid {
  background: rgba(21, 24, 28, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}
.m-brand { display: flex; align-items: center; gap: 9px; transition: opacity .26s ease; }
.m-mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  background: rgba(255, 255, 255, .95);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .30);
}
.m-mark img { width: 24px; height: 24px; object-fit: contain; display: block; }
.m-brand-txt { color: #fff; line-height: 1.15; }
.m-brand-txt b { display: block; font-family: var(--serif); font-size: 14px; font-weight: 700; letter-spacing: 2px; }
.m-brand-txt span { display: block; font-size: 9px; color: rgba(255,255,255,.62); letter-spacing: 1px; text-transform: uppercase; }
.m-lang { display: flex; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; overflow: hidden; }
.m-lang button { font-size: 11.5px; padding: 4px 11px; color: rgba(255,255,255,.6); transition: all .2s; }
.m-lang button.active { background: var(--accent); color: #fff; font-weight: 600; }

/* ============ 通用屏头 ============ */
.m-sec-head { margin-bottom: 14px; flex: none; }
.m-kicker { font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--accent-dark); font-weight: 700; }
.m-page.dark .m-kicker { color: var(--accent); }
.m-sec-head h2 { margin-top: 6px; font-family: var(--serif); font-size: 20px; line-height: 1.4; font-weight: 700; }
.m-sec-head p { margin-top: 7px; font-size: 12.5px; color: var(--muted); line-height: 1.7; }

/* ============ 屏1 封面 ============ */
.m-hero { position: relative; overflow: hidden; }
.m-hero::after {
  content: ''; position: absolute; right: -70px; top: -50px;
  width: 240px; height: 240px; border-radius: 50%;
  background: radial-gradient(circle, rgba(232,114,42,.30), transparent 70%);
  pointer-events: none;
}
.m-hero::before {
  content: ''; position: absolute; left: -60px; bottom: 10%;
  width: 180px; height: 180px; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,155,109,.18), transparent 70%);
  pointer-events: none;
}
.m-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; letter-spacing: 1px; color: #ffd7bb;
  border: 1px solid rgba(232,114,42,.45); background: rgba(232,114,42,.12);
  padding: 5px 12px; border-radius: 999px;
}
.m-hero h1 {
  margin-top: 15px; font-family: var(--serif);
  font-size: 32px; line-height: 1.26; font-weight: 700; letter-spacing: .5px; color: #fff;
}
.m-hero h1 em { font-style: normal; color: var(--accent); }
.m-hero p { margin-top: 13px; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.62); }
.m-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 22px; }
.m-stat {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 11px 3px; text-align: center;
}
.m-stat b { display: block; font-size: 18px; font-weight: 700; color: var(--accent); letter-spacing: .5px; }
.m-stat b small { font-size: 11px; }
.m-stat span { display: block; margin-top: 2px; font-size: 9.5px; color: rgba(255,255,255,.55); line-height: 1.3; }
.m-hero-cta { margin-top: 22px; display: flex; gap: 10px; }
.m-hero-cta a {
  flex: 1; height: 46px; border-radius: 999px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; transition: transform .16s;
}
.m-hero-cta a:active { transform: scale(.96); }
.m-hero-cta .fill { background: linear-gradient(140deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 10px 24px rgba(232,114,42,.32); }
.m-hero-cta .line { border: 1px solid rgba(255,255,255,.28); color: rgba(255,255,255,.85); }

/* 下滑提示 */
.m-swipe {
  position: absolute; left: 50%; z-index: 5;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 42px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  color: rgba(255,255,255,.62); font-size: 11px; letter-spacing: 1px;
  animation: swipeUp 1.8s ease-in-out infinite; pointer-events: none;
  transition: bottom .38s cubic-bezier(.32,.72,.36,1);
}
/* 沉浸态：操作栏滑走后，上滑提示同样贴到屏幕底部（留在轮播点上方一点） */
.m-wrap.immersive .m-swipe {
  bottom: calc(env(safe-area-inset-bottom) + 54px);
}
.m-swipe svg { width: 18px; height: 18px; }
@keyframes swipeUp {
  0%, 100% { transform: translate(-50%, 0); opacity: .45; }
  50% { transform: translate(-50%, -7px); opacity: 1; }
}

/* ============ 屏2 公司介绍 ============ */
.m-about-card {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 16px 15px; flex: none;
}
.m-about-card p { font-size: 12.8px; color: #4a5158; line-height: 1.85; }
.m-about-card p + p { margin-top: 8px; }
.m-points { margin-top: 13px; display: grid; gap: 8px; }
.m-point {
  display: flex; gap: 9px; align-items: flex-start;
  background: #fbf9f6; border: 1px solid var(--line);
  border-radius: 11px; padding: 9px 11px;
}
.m-point i {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  color: #fff; font-size: 10.5px; font-style: normal; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.m-point span { font-size: 12.3px; color: #4a5158; line-height: 1.65; }

/* ============ 屏3 展品（横滑卡） ============ */
.m-tabs {
  display: flex; gap: 7px; overflow-x: auto; flex: none;
  margin: 0 -18px; padding: 2px 18px 12px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* 右缘渐隐：避免最后一个标签被硬切成"断掉"的样子 */
  -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.18) 100%);
  mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.18) 100%);
}
.m-tabs::-webkit-scrollbar { display: none; }
.m-tab {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 12.5px; color: #5a626a; transition: all .22s;
}
.m-page.dark .m-tab { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); color: rgba(255,255,255,.6); }
.m-tab.on {
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px rgba(232,114,42,.28);
}
.m-slider {
  display: flex; gap: 12px; overflow-x: auto; flex: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 -18px; padding: 2px 18px 10px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 86%, rgba(0,0,0,.2) 100%);
  mask-image: linear-gradient(90deg, #000 86%, rgba(0,0,0,.2) 100%);
}
.m-slider::-webkit-scrollbar { display: none; }
.m-card {
  flex: none; width: 72%; scroll-snap-align: center;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: transform .18s;
}
.m-card:active { transform: scale(.97); }
.m-card-thumb { height: 132px; display: flex; align-items: center; justify-content: center; }
.m-card-thumb svg { width: 76px; height: 76px; }
.m-card-body { padding: 11px 12px 13px; }
.m-card-body h4 { font-size: 13.5px; font-weight: 700; line-height: 1.45; }
.m-card-body p {
  margin-top: 5px; font-size: 11.5px; color: var(--muted); line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card-tags { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 5px; }
.m-card-tags span { font-size: 10px; color: var(--accent-dark); background: rgba(232,114,42,.09); padding: 3px 7px; border-radius: 5px; }
.m-more {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin-top: 12px; flex: none;
  font-size: 13px; font-weight: 600;
  background: rgba(232,114,42,.12); color: var(--accent);
  border: 1px solid rgba(232,114,42,.42); border-radius: 12px; padding: 11px;
}

/* ---------- 屏3 · 交付能力标签 ---------- */
.m-caps { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: none; }
.m-cap {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: 11px; padding: 10px 5px; text-align: center;
  min-height: 48px; display: flex; align-items: center; justify-content: center;
}
.m-cap b { font-size: 11.5px; font-weight: 600; color: var(--accent); letter-spacing: .2px; line-height: 1.45; }

/* ============ 屏4 资质与实力（详情页式图文大卡，横滑浏览） ============ */
.m-certs {
  display: flex; gap: 12px; overflow-x: auto; flex: none;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  margin: 0 -18px; padding: 4px 18px 6px;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.2) 100%);
  mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.2) 100%);
}
.m-certs::-webkit-scrollbar { display: none; }
.m-cert-card {
  flex: none; width: 80%; scroll-snap-align: center;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.m-cc-img { height: 190px; overflow: hidden; background: #eceae5; position: relative; }
.m-cc-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-cc-img::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.34));
}
.m-cc-no {
  position: absolute; right: 11px; top: 11px; z-index: 2;
  font-family: var(--serif); font-size: 12.5px; font-weight: 700; color: #fff;
  background: rgba(10,12,14,.4);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.24); border-radius: 8px; padding: 3px 8px;
}
.m-cc-body { padding: 13px 15px 15px; }
.m-cc-head { display: flex; align-items: center; gap: 9px; }
.m-cc-ic {
  flex: none; width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(140deg, #fbe8d8, #f3cdb0);
  color: var(--accent-dark); font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; letter-spacing: .2px;
}
.m-cc-body h4 { font-size: 15px; font-weight: 700; line-height: 1.35; }
.m-cc-body p { margin-top: 8px; font-size: 12.5px; color: #5a626a; line-height: 1.75; }
.m-cert-hint {
  margin-top: 12px; flex: none; text-align: center;
  font-size: 11.5px; color: var(--muted-2); letter-spacing: .5px;
}

/* ---------- 屏4 · 实力数据条 ---------- */
.m-cert-stats { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; flex: none; }
.m-cs {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 12px; padding: 11px 6px; text-align: center;
}
.m-cs b { display: block; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--accent-dark); line-height: 1.2; }
.m-cs span { display: block; margin-top: 3px; font-size: 10.5px; color: var(--muted-2); }

/* ============ 屏5 联系方式 ============ */
.m-contact { display: grid; gap: 9px; flex: none; }
.m-ct {
  display: flex; align-items: center; gap: 11px;
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 14px;
}
.m-ct-ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: rgba(232,114,42,.1); display: flex; align-items: center; justify-content: center;
}
.m-ct-ic svg { width: 19px; height: 19px; }
.m-ct-txt { flex: 1; min-width: 0; }
.m-ct-txt span { display: block; font-size: 10.5px; color: var(--muted-2); letter-spacing: .5px; }
.m-ct-txt b { display: block; margin-top: 2px; font-size: 14px; font-weight: 600; color: var(--ink); word-break: break-all; line-height: 1.45; }
.m-ct-act {
  flex: none; font-size: 12px; font-weight: 600; color: var(--accent-dark);
  border: 1px solid rgba(232,114,42,.35); border-radius: 999px; padding: 6px 11px;
  transition: all .2s;
}
.m-ct-act:active { background: var(--accent); color: #fff; }
.m-addr {
  background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 13px 14px; font-size: 12.5px; color: #4a5158; line-height: 1.75;
}
.m-addr b { display: block; font-size: 11px; color: var(--muted-2); font-weight: 500; margin-bottom: 3px; letter-spacing: .5px; }
.m-final {
  margin-top: 14px; flex: none; text-align: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  color: #fff; border-radius: 14px; padding: 15px;
  box-shadow: 0 12px 28px rgba(232,114,42,.28);
}
.m-final b { display: block; font-size: 15px; font-weight: 700; font-family: var(--serif); }
.m-final span { display: block; margin-top: 4px; font-size: 11.5px; opacity: .85; }

/* ============ 翻页进度条（顶部横条，不再压住正文） ============ */
.m-dots {
  position: fixed; left: 0; right: 0;
  top: calc(var(--head-h) + env(safe-area-inset-top) - 1px);
  z-index: 88; display: flex; gap: 2px; height: 2px;
  pointer-events: none;
  transition: opacity .3s ease;
}
.m-dots i {
  flex: 1; height: 2px; border-radius: 2px;
  background: rgba(0,0,0,.14); transition: background .3s ease;
}
.m-dots i.on { background: var(--accent); }
.m-dots.light i { background: rgba(255,255,255,.3); }
.m-dots.light i.on { background: var(--accent); }
/* BUG 修复（2026-10-23）：首屏左上角的品牌标 .m-hero-brand 是常显的，
   而 logo（mark-256.webp）自带一道橙色下划线；顶部进度条 .m-dots 恰好落在同一高度，
   z-index:88 还比品牌的 9 高，于是「通栏细线」和「logo 下划线」叠成一条，
   看起来就像 logo 被划了一道（客户反馈「首屏下划线跟 logo 重叠」）。
   处理：停在首屏时隐藏这条进度条 —— 首屏底部本来就有轮播点 .m-carousel-dots
   指示进度，不缺信息；滑到第 2 屏及以后（品牌标已滚出视口）再显示回来。 */
.m-wrap.at-top .m-dots { opacity: 0; }

/* ============ 底部悬浮操作栏（无底色，按钮自持胶囊背景） ============ */
.m-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  background: none; border-top: none;   /* 去掉悬浮白底，按钮直接悬浮在内容上 */
  pointer-events: none;                 /* 容器不吃事件，只让按钮响应 */
  transform: translateX(var(--mx, 0)) translateY(var(--my, 0));
  transition: transform .38s cubic-bezier(.32,.72,.36,1);
}
.m-dock-btn {
  /* 高度随屏幕自适应，同时不低于 44px —— iOS/Android 规范的最小可点击尺寸，
     保证戴手套、手抖也能点中，不会因为屏幕变小而误触。 */
  height: clamp(44px, 6.6vh, 52px); border-radius: 999px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: clamp(12.5px, 1.7vh, 14.5px); font-weight: 600; letter-spacing: .3px;
  transition: transform .16s ease;
  pointer-events: auto; white-space: nowrap;
}
.m-dock-btn:active { transform: scale(.96); }
.m-dock-btn.ghost {
  flex: 1;
  background: rgba(26, 29, 33, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .20);
  color: #fff;
}
.m-dock-btn.primary {
  flex: 1.3;
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  color: #fff;
  box-shadow: 0 10px 26px rgba(232, 114, 42, .36);
}
.m-dock-btn svg { width: 17px; height: 17px; flex: none; }

/* ============ 沉浸态：首屏沉浸（隐藏顶栏/品类条/底栏/进度条），滑离首屏恢复，滑回首屏再沉浸 ============ */
.m-wrap.immersive .m-head { --my: -110%; }
.m-wrap.immersive .m-dock { --my: calc(100% + 24px); }
.m-wrap.immersive .m-dots { opacity: 0; }
/* 品类条跟随顶栏滑出：calc 抵消自身 top 偏移 + 条高（约30px）+ 余量，完全移出屏顶 */
.m-wrap.immersive .m-cats {
  transform: translateY(calc(-1 * (var(--head-h) + env(safe-area-inset-top) + 56px)));
  opacity: 0;
  pointer-events: none;
}

/* ============ 页脚（联系方式屏底部） ============ */
.m-foot {
  margin-top: auto; padding-top: 14px; flex: none;
  font-size: 10.5px; color: var(--muted-2); text-align: center; line-height: 1.7;
}
.m-foot a { color: var(--accent-dark); text-decoration: underline; margin-left: 8px; }

/* ============ 入场动画 ============ */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ============ Toast ============ */
.m-toast {
  position: fixed; left: 50%; bottom: 92px; transform: translate(-50%, 10px);
  background: rgba(26,29,33,.92); color: #fff; font-size: 13px;
  padding: 9px 17px; border-radius: 999px; z-index: 200;
  opacity: 0; pointer-events: none; transition: all .25s;
}
.m-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   追加：全屏产品轮播（屏 1）+ 工艺/运输 + 单品页
   ========================================================================== */

/* ---------- 屏 1 · 展品品类条 ---------- */
.m-cats {
  position: absolute; z-index: 8;
  top: calc(var(--head-h) + env(safe-area-inset-top) + 8px);
  left: 0; right: 0;
  display: flex; gap: 7px; overflow-x: auto;
  padding: 0 16px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  /* 与顶栏同款位移曲线：沉浸态跟随顶栏一起滑出/滑入 */
  transition: transform .38s cubic-bezier(.32,.72,.36,1), opacity .3s ease;
}
.m-cats::-webkit-scrollbar { display: none; }
.m-cats button {
  flex: none; padding: 5px 13px; border-radius: 999px;
  font-size: 11.5px; color: rgba(255,255,255,.72);
  background: rgba(10,12,14,.34);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.18);
  transition: all .25s;
}
.m-cats button.on {
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  color: #fff; font-weight: 600; border-color: transparent;
  box-shadow: 0 6px 16px rgba(232,114,42,.32);
}

/* ---------- 屏 1 · 首屏左上角品牌标（与电脑端首屏右上角 .hero-brand 同款） ---------- */
/* 无底透明：不用深色底、不用浅金描边，可读性靠自身明暗适配——
   JS 按当前轮播图的亮度切 .mhb-light（浅色图→深色字+压暗 logo），
   否则走默认的白字+品牌橙原色（深色图）。切图时颜色 .3s 柔顺过渡，
   即「字体 logo 跟图片切换一起变」，任何图上都不糊。 */
.m-hero-brand {
  position: absolute; z-index: 9;
  top: calc(env(safe-area-inset-top) + 10px);
  left: 14px;
  display: flex; align-items: center; gap: 10px;
  max-width: calc(100% - 28px);
  pointer-events: none;               /* 纯展示：不挡轮播左右滑动手势 */
  /* 方案 A（2026-10-23）：首屏品牌常显。
     原来要等 immersive（JS 延时3.2s）才淡入，导致它成了 LCP 元素、
     把首屏 LCP 拖到约 3.9s；用户看到的是「打开后顶部空着，4 秒后 logo 才冒出来」。
     现在打开即显示，LCCP 回到 0.4s 量级。
     顶栏里的品牌条已同步隐藏，避免双品牌同屏。 */
  opacity: 1; transform: none;
  transition: opacity .3s ease, transform .38s cubic-bezier(.32,.72,.36,1);
}
/* 沉浸态顶栏滑入时，首屏品牌淡出一点做视觉交接（仍保留在首屏，不遮挡内容） */
.m-wrap.immersive .m-hero-brand { opacity: .92; }
/* ---- 防「惠隆隆」双logo 重叠（2026-10-23）----
   首屏左上角的 .m-hero-brand 现在是**常显**的（打开就有，LCP 才不会被拖到 3.9s）；
   而顶栏 .m-head 里还有一套同款 logo +「惠隆/Huilong」。
   导航栏滑回来时两者叠在同一个位置，视觉上变成「惠隆隆」+ 两行公司名压住品类条。
   所以：停在首屏（.m-wrap.at-top，由 JS 按滚动位置打上）→ 顶栏品牌条让位隐藏；
   滑到第 2 屏及以后（首屏品牌已滚出视口）→ 顶栏品牌条恢复显示。 */
.m-wrap.at-top .m-head .m-brand { opacity: 0; pointer-events: none; }
.mhb-mark { flex: none; display: flex; }
/* mark.png 内容为宽幅（约 1.47:1），按高度等比缩放，避免正方框纵向拉伸 */
.mhb-mark img {
  height: 40px; width: auto; display: block;
  transition: filter .3s ease;
}
.mhb-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
/* 名称行：品牌简称 + 地域标识（与电脑端同一套设计语言：
   小圆点 + 无边框疏排小字；胶囊框在手机小屏上太挤，也不够透气） */
.mhb-name { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.mhb-name em {
  position: relative;
  font-style: normal; font-size: 10.5px; font-weight: 600;
  letter-spacing: .14em; white-space: nowrap;
  color: rgba(255, 255, 255, .72);
  padding-left: 13px;
  transition: color .3s ease;
}
.mhb-name em::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 114, 42, .20);
}
.mhb-txt b {
  font-family: var(--serif);
  font-size: 16px; font-weight: 700; letter-spacing: 2px;
  line-height: 1.2; white-space: nowrap;
  transition: color .3s ease, text-shadow .3s ease;
}
.mhb-txt i {
  font-style: normal; font-size: 9.5px; letter-spacing: .6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color .3s ease, text-shadow .3s ease;
}
/* 深色图（默认，也是 JS 采样前的兜底）：白字 + 品牌橙 logo 原色 */
.m-hero-brand .mhb-txt b { color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .34); }
.m-hero-brand .mhb-txt i { color: rgba(255, 255, 255, .72); text-shadow: 0 1px 6px rgba(0, 0, 0, .30); }
.m-hero-brand .mhb-mark img { filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .30)); }
/* 浅色图：深色字 + logo 压暗成深橙（保留品牌色相），浅底上照样读得清 */
.m-hero-brand.mhb-light .mhb-txt b { color: #14171b; text-shadow: 0 1px 8px rgba(255, 255, 255, .50); }
.m-hero-brand.mhb-light .mhb-txt i { color: rgba(20, 23, 27, .70); text-shadow: 0 1px 6px rgba(255, 255, 255, .45); }
/* 浅色图上地域标识要压深，否则浅色文字在浅底上读不清 */
.m-hero-brand.mhb-light .mhb-name em { color: rgba(20, 23, 27, .70); }
.m-hero-brand.mhb-light .mhb-mark img { filter: brightness(.52) saturate(1.1) drop-shadow(0 2px 8px rgba(255, 255, 255, .4)); }

/* ---------- 屏 1 · 产品轮播 ---------- */
.m-page-inner.nopad { padding: 0; }
.m-carousel {
  display: flex; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.m-carousel::-webkit-scrollbar { display: none; }
.m-slide {
  flex: none; width: 100%; height: 100%;
  scroll-snap-align: center; position: relative;
  background: #1b1e22;
}
/* picture 包裹：source 分流不影响布局，picture 与 img 都撑满 slide；
   object-fit: cover 保证任何比例的图都不变形、铺满屏幕。 */
.m-slide picture { display: block; width: 100%; height: 100%; }
.m-slide-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.m-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  /* 底部内边距跟着底部栏高度走：栏高会随机型自适应（大屏更高、带安全区），
     写死 96px 会在大屏 iPhone 上被操作栏压住最后一行文字。 */
  padding: 70px 20px calc(var(--dock-h) + env(safe-area-inset-bottom) + 26px);
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.86) 100%);
  color: #fff;
}
.m-slide-cap .cat { font-size: 10.5px; letter-spacing: 2px; color: var(--accent); font-weight: 600; }
.m-slide-cap h3 { margin-top: 6px; font-family: var(--serif); font-size: 22px; font-weight: 700; line-height: 1.3; }
.m-slide-cap p { margin-top: 6px; font-size: 12px; line-height: 1.6; color: rgba(255,255,255,.72); }
.m-slide-btn {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid rgba(255,255,255,.45); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; color: #fff;
}
/* 同一产品第 2+ 张图的计数器（与文案卡并存，标出当前是第几张）。
   轮播通栏后 slide 顶端由「54px 内边距处」变成「屏幕顶端」，计数器随之上移：
   下移到品类条（top+8px、高约30px）下方约 8px 处，避免滑离首屏瞬间
   （顶栏/品类条滑入时）计数器与品类条最后一个胶囊相碰。 */
.m-slide-idx {
  position: absolute; right: 14px; top: calc(var(--head-h) + env(safe-area-inset-top) + 46px);
  z-index: 6; font-size: 11px; letter-spacing: 1px; color: rgba(255,255,255,.85);
  background: rgba(10,12,14,.42); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 4px 10px;
}
.m-carousel-dots {
  position: absolute; left: 50%; transform: translateX(-50%); z-index: 7;
  bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 10px);
  display: flex; gap: 6px;
  /* 与顶部栏同一套缓动：底部操作栏滑入/滑出时，轮播点跟着贴底或让位 */
  transition: bottom .38s cubic-bezier(.32,.72,.36,1), opacity .3s ease;
}
/* 沉浸态：底部操作栏已经滑出屏幕，轮播点必须跟着贴到真正的屏幕底部，
   否则它会停在原来「操作栏上方」的高度悬在半空，看起来没靠底。 */
.m-wrap.immersive .m-carousel-dots {
  bottom: calc(env(safe-area-inset-bottom) + 18px);
}
.m-carousel-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,.35); transition: all .3s;
}
.m-carousel-dots i.on { width: 16px; border-radius: 3px; background: var(--accent); }

/* ---------- 屏 2 · 走进我们的车间 ---------- */
.m-workshop {
  margin-top: 12px; flex: none;
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden;
}
.m-ws-img { position: relative; height: 152px; overflow: hidden; background: #eceae5; }
.m-ws-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-ws-img::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 58%;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.58));
}
.m-ws-badge {
  position: absolute; left: 12px; bottom: 11px; z-index: 2;
  font-size: 9.5px; letter-spacing: 2.2px; text-transform: uppercase; font-weight: 700;
  color: #fff; background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  border-radius: 999px; padding: 4px 11px;
}
.m-ws-body { padding: 12px 14px 14px; }
.m-ws-body h3 { font-family: var(--serif); font-size: 16.5px; font-weight: 700; line-height: 1.35; }
.m-ws-facts { margin-top: 9px; display: grid; gap: 6px; }
.m-ws-facts li { display: flex; gap: 7px; align-items: flex-start; font-size: 11.5px; color: #5a626a; line-height: 1.5; }
.m-ws-facts i { flex: none; margin-top: 1px; font-style: normal; font-size: 10px; color: var(--accent); }
.m-ws-cta {
  margin-top: 12px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: #fff;
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  box-shadow: 0 8px 20px rgba(232,114,42,.28);
}

/* ---------- 屏 3 · 推荐卡（带实拍图） ---------- */
.m-card-img { height: 148px; overflow: hidden; background: #eceae5; }
.m-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- 屏 5 · 下单流程（横滑卡片，避免 5 列挤压导致每行 2–4 字） ---------- */
.m-flow {
  display: flex; gap: 8px; overflow-x: auto; flex: none;
  margin: 0 -18px; padding: 2px 18px 8px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.18) 100%);
  mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.18) 100%);
}
.m-flow::-webkit-scrollbar { display: none; }
.m-flow-i {
  flex: none; width: 106px;
  background: #fbf9f6; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 10px 11px;
}
.m-flow-i .no {
  width: 24px; height: 24px; margin: 0 0 6px; border-radius: 50%;
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  color: #fff; font-size: 11.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.m-flow-i b { display: block; font-size: 12px; font-weight: 700; line-height: 1.35; }
.m-flow-i span {
  display: block; margin-top: 4px; font-size: 10px; color: var(--muted); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- 屏 5 · 制作工艺 ---------- */
.m-procs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.m-proc {
  background: #fbf9f6; border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 11px;
}
.m-proc b { display: block; font-size: 12.5px; font-weight: 700; }
.m-proc p { margin-top: 4px; font-size: 10.8px; color: var(--muted); line-height: 1.55; }

/* ---------- 屏 5 · 包装与运输 ---------- */
.m-ship {
  margin-top: 14px; border-radius: 14px; padding: 13px 14px;
  background: linear-gradient(150deg, #2a2f35, #1f2429); color: #fff;
}
.m-ship h4 { font-family: var(--serif); font-size: 14px; font-weight: 700; }
.m-ship ul { margin-top: 9px; display: grid; gap: 7px; }
.m-ship li { display: flex; gap: 8px; font-size: 11.3px; color: rgba(255,255,255,.72); line-height: 1.55; }
.m-ship li b { color: var(--kraft); flex: none; }

/* ---------- 屏 6 · 工作时间 / 语言 ---------- */
.m-ct-extra { margin-top: 11px; display: grid; gap: 7px; flex: none; }
.m-ce-item {
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 11px; padding: 10px 12px;
  font-size: 12px; color: rgba(255,255,255,.75);
}
.m-ce-item svg { width: 16px; height: 16px; flex: none; }

/* ---------- 屏 6 · 地址块 ---------- */
.m-map {
  margin-top: 11px; display: flex; gap: 11px; align-items: flex-start;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px; padding: 13px;
}
.m-map-ic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(232,114,42,.18); display: flex; align-items: center; justify-content: center;
}
.m-map-ic svg { width: 18px; height: 18px; }
.m-map b { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 500; }
.m-map p { margin-top: 3px; font-size: 13px; line-height: 1.6; }
.m-map span { display: block; margin-top: 4px; font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.5; }

/* ==========================================================================
   单品介绍页（mobile-product.html）
   ========================================================================== */
.mp-body {
  background: var(--paper);
  /* 底部固定联系条高度补偿，避免最后一行内容被压住 */
  padding-bottom: calc(var(--dock-h) + 20px);
}
.mp-body, .mp-body .m-wrap { height: auto; min-height: 100%; overflow: visible; }
.mp-body .m-head { background: rgba(21, 24, 28, .55); }
.mp-hero { position: relative; background: #1b1e22; }
/* 主图轮播：横向 scroll-snap，圆点 + 计数器 */
.mp-gallery { position: relative; }
.mp-g-track {
  display: flex; width: 100%; height: 62vh;
  overflow-x: auto; scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.mp-g-track::-webkit-scrollbar { display: none; }
.mp-g-slide { flex: none; width: 100%; height: 100%; scroll-snap-align: center; background: #1b1e22; }
.mp-g-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mp-g-dots {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 14px; z-index: 3;
  display: flex; gap: 6px;
}
.mp-g-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,.4); transition: all .25s;
}
.mp-g-dots i.on { width: 16px; border-radius: 3px; background: var(--accent); }
.mp-g-idx {
  position: absolute; right: 12px; top: 12px; z-index: 3;
  font-size: 11px; letter-spacing: .5px; color: rgba(255,255,255,.85);
  background: rgba(10,12,14,.42); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: 999px; padding: 4px 10px;
}
.mp-hero-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 60px 18px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.8));
  color: #fff;
  pointer-events: none;            /* 标题层不挡手势：图区左右滑动照样切图 */
}
.mp-hero-cap .mp-back { pointer-events: auto; }
.mp-hero-cap .cat { font-size: 10.5px; letter-spacing: 2px; color: var(--accent); font-weight: 600; }
.mp-hero-cap h1 { margin-top: 6px; font-family: var(--serif); font-size: 23px; line-height: 1.3; }
.mp-hero-cap p { margin-top: 6px; font-size: 12px; color: rgba(255,255,255,.75); line-height: 1.6; }
.mp-wrap-body { padding: 16px 16px 0; }
.mp-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; margin-bottom: 12px;
}
.mp-card > h2 {
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  padding-left: 10px; border-left: 3px solid var(--accent); margin-bottom: 10px;
}
.mp-spec { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 12.5px; }
.mp-spec:last-child { border-bottom: none; }
.mp-spec b { flex: none; width: 76px; color: var(--muted); font-weight: 500; }
.mp-spec span { flex: 1; line-height: 1.6; }
.mp-list { display: grid; gap: 7px; }
.mp-list li { display: flex; gap: 8px; font-size: 12.5px; color: #4a5158; line-height: 1.65; }
.mp-list li i {
  flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: rgba(232,114,42,.12); color: var(--accent-dark);
  font-size: 10px; font-style: normal; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.mp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.mp-tags span { font-size: 11px; color: var(--accent-dark); background: rgba(232,114,42,.09); padding: 4px 9px; border-radius: 6px; }
.mp-related { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mp-related::-webkit-scrollbar { display: none; }
.mp-related a { flex: none; width: 40%; }
.mp-related .m-card-img { height: 86px; border-radius: 10px 10px 0 0; }
.mp-related .m-card-body { background: #fff; padding: 8px 9px 10px; border-radius: 0 0 10px 10px; }
.mp-related h4 { font-size: 12px; font-weight: 700; line-height: 1.4; }
.mp-back {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: rgba(255,255,255,.85); margin-bottom: 6px;
}
.mp-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: 0 14px calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px;
  background: none; border-top: none;
  pointer-events: none;
  transform: translateX(var(--mx, 0)) translateY(var(--my, 0));
}
.mp-nav .m-dock-btn { height: 46px; pointer-events: auto; }
.mp-nav .m-dock-btn.ghost { background: rgba(26,29,33,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.2); color: #fff; }
.mp-nav .m-dock-btn.primary { background: linear-gradient(140deg, var(--accent), var(--accent-dark)); color: #fff; box-shadow: 0 10px 26px rgba(232,114,42,.36); }

/* ==========================================================================
   全部产品列表页（mobile-products.html）
   ========================================================================== */
.mpl-head { padding: 76px 18px 14px; }
.mpl-head .m-kicker { color: var(--accent-dark); }
.mpl-head h1 { margin-top: 6px; font-family: var(--serif); font-size: 22px; line-height: 1.35; }
.mpl-head p { margin-top: 8px; font-size: 12.5px; color: var(--muted); line-height: 1.75; }
.mpl-tabs {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 2px 18px 12px;
  position: sticky; top: calc(var(--head-h) + env(safe-area-inset-top)); z-index: 20;
  background: rgba(247,245,241,.92);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.2) 100%);
  mask-image: linear-gradient(90deg, #000 88%, rgba(0,0,0,.2) 100%);
}
.mpl-tabs::-webkit-scrollbar { display: none; }
.mpl-tab {
  flex: none; padding: 7px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 12.5px; color: #5a626a; transition: all .22s;
}
.mpl-tab.on {
  background: linear-gradient(140deg, var(--accent), var(--accent-dark));
  border-color: transparent; color: #fff; font-weight: 600;
  box-shadow: 0 6px 16px rgba(232,114,42,.28);
}
.mpl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 18px; }
.mpl-card {
  background: var(--white); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: transform .18s;
}
.mpl-card:active { transform: scale(.97); }
.mpl-card-img { height: 132px; overflow: hidden; background: #eceae5; }
.mpl-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpl-card-body { padding: 10px 11px 12px; }
.mpl-cat { font-size: 9.5px; letter-spacing: 1.2px; color: var(--accent-dark); font-weight: 600; }
.mpl-card-body h3 { margin-top: 4px; font-size: 13px; font-weight: 700; line-height: 1.4; }
.mpl-card-body p {
  margin-top: 5px; font-size: 11px; color: var(--muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mpl-meta { margin-top: 8px; display: grid; gap: 3px; }
.mpl-meta span { font-size: 10.5px; color: #5a626a; }
.mpl-meta b { font-weight: 500; color: var(--muted-2); margin-right: 5px; }
.mpl-empty { grid-column: 1/-1; text-align: center; color: var(--muted); font-size: 13px; padding: 30px 0; }

/* ==========================================================================
   高度适配（两档）
   —— 必须放在文件末尾：媒体查询与基础规则同权重，
      写在前面的覆盖会被后面的基础样式反覆盖（历史 bug）。
   ========================================================================== */

/* 中等高度（≤880px：iPhone 14/15 的 844~852）：适度压缩，保证整屏放得下 */
@media (max-height: 880px) {
  .m-about-card { padding: 13px; }
  .m-about-card p {
    font-size: 12.3px; line-height: 1.72;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-about-card p + p { margin-top: 6px; -webkit-line-clamp: 2; }
  .m-points { margin-top: 10px; gap: 6px; }
  .m-point { padding: 7px 10px; }
  .m-point span { font-size: 11.8px; line-height: 1.55; }
  .m-ws-img { height: 104px; }
  .m-ws-body { padding: 10px 13px 12px; }
  .m-ws-body h3 { font-size: 15.5px; }
  .m-ws-facts { margin-top: 7px; gap: 5px; }
  .m-ws-facts li { font-size: 11px; line-height: 1.45; }
  .m-ws-cta { margin-top: 10px; height: 38px; }
  .m-card-img { height: 132px; }
  .m-cc-img { height: 162px; }
  .m-cc-body { padding: 11px 13px 13px; }
  .m-cc-body p { font-size: 12px; line-height: 1.65; }
  .m-cert-stats { margin-top: 11px; }
  .m-caps { margin-top: 10px; }
  .m-proc { padding: 9px 10px; }
  .m-proc p { font-size: 10.5px; }
  .m-ship { margin-top: 10px; padding: 11px 12px; }
  .m-ship li { font-size: 10.8px; }
  .m-flow-i { width: 100px; }
  .m-flow-i span { font-size: 9.6px; }
  .m-ct { padding: 11px 13px; }
  .m-ct-extra { margin-top: 9px; }
  .m-map { margin-top: 9px; padding: 11px; }
  .m-final { margin-top: 11px; padding: 13px; }
}

/* 矮屏（≤720px：iPhone SE / 667 高等小屏）：激进压缩，保证每屏整屏放下 */
@media (max-height: 720px) {
  .m-sec-head { margin-bottom: 6px; }
  .m-sec-head h2 { font-size: 18px; }
  .m-sec-head p {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-certs { gap: 12px; }
  .m-cc-img { height: 146px; }
  .m-cc-body { padding: 10px 12px 12px; }
  .m-cc-body h4 { font-size: 13.5px; }
  .m-cc-body p { margin-top: 6px; font-size: 11.5px; line-height: 1.6; }
  .m-cc-ic { width: 30px; height: 30px; font-size: 10px; }
  .m-cert-hint { margin-top: 8px; font-size: 10.5px; }
  .m-cert-stats { margin-top: 9px; }
  .m-cs { padding: 8px 5px; }
  .m-cs b { font-size: 15px; }
  .m-cs span { font-size: 9.5px; }
  /* 资质屏副标题在矮屏省略，把空间留给资质卡本身 */
  .m-page[data-page="3"] .m-sec-head p { display: none; }
  .m-card-img { height: 104px; }
  .m-card { width: 70%; }
  .m-hero h1 { font-size: 28px; }
  .m-hero p { font-size: 12.3px; margin-top: 10px; }
  .m-stats { margin-top: 16px; }
  .m-hero-cta { margin-top: 16px; }
  .m-slide-cap { padding: 50px 18px calc(var(--dock-h) + env(safe-area-inset-bottom) + 22px); }
  .m-slide-cap h3 { font-size: 20px; }
  .m-carousel-dots { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 8px); }
  .m-wrap.immersive .m-carousel-dots { bottom: calc(env(safe-area-inset-bottom) + 14px); }
  .m-swipe { bottom: calc(var(--dock-h) + env(safe-area-inset-bottom) + 36px); }
  .m-wrap.immersive .m-swipe { bottom: calc(env(safe-area-inset-bottom) + 46px); }
  .m-proc { padding: 8px 10px; }
  .m-proc p { font-size: 10.2px; }
  .m-ship { margin-top: 8px; padding: 10px 12px; }
  .m-ship li { font-size: 10.2px; }
  .m-ship h4 { font-size: 13px; }
  .m-flow-i span { font-size: 9.2px; }
  .m-flow-i b { font-size: 11.5px; }
  .m-map { padding: 11px; }

  /* --- 屏 1 公司介绍：矮屏只保留首段与核心要点，车间区块精简 --- */
  .m-about-card { padding: 10px 12px; }
  .m-about-card p {
    font-size: 12.2px; line-height: 1.7;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-about-card p + p { display: none; }
  .m-points { margin-top: 8px; gap: 5px; }
  .m-point { padding: 4px 8px; }
  .m-point i { width: 16px; height: 16px; font-size: 9.5px; }
  .m-point span { font-size: 10.8px; line-height: 1.45; }
  .m-ws-img { height: 74px; }
  .m-ws-body { padding: 8px 12px 10px; }
  .m-ws-body h3 { font-size: 14.5px; }
  .m-ws-facts { margin-top: 5px; gap: 3px; }
  .m-ws-facts li { font-size: 10.5px; line-height: 1.4; }
  .m-ws-facts li:nth-child(3) { display: none; }
  .m-ws-cta { margin-top: 8px; height: 32px; font-size: 12px; }

  /* --- 屏 2 解决方案 --- */
  .m-caps { margin-top: 7px; }
  .m-cap { padding: 7px 4px; }
  .m-cap b { font-size: 10.5px; }
  .m-more { margin-top: 9px; padding: 9px; font-size: 12.5px; }

  /* --- 屏 4 流程 / 工艺 / 运输：流程卡只留标题，工艺与运输收紧 --- */
  .m-flow-i { width: 92px; padding: 8px 9px 9px; }
  .m-flow-i .no { width: 21px; height: 21px; font-size: 10.5px; margin-bottom: 5px; }
  .m-flow-i b { font-size: 11px; }
  .m-flow-i span { display: none; }
  .m-procs { gap: 7px; }
  .m-proc { padding: 7px 9px; }
  .m-proc p {
    font-size: 10px; line-height: 1.45;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .m-ship li { line-height: 1.45; }

  /* --- 屏 5 联系方式：压缩行高，页脚在矮屏隐藏 --- */
  .m-contact { gap: 7px; }
  .m-ct { padding: 9px 12px; }
  .m-ct-ic { width: 34px; height: 34px; }
  .m-ct-ic svg { width: 17px; height: 17px; }
  .m-ct-txt b { font-size: 13px; }
  .m-ct-extra { margin-top: 7px; gap: 6px; }
  .m-ce-item { padding: 8px 11px; font-size: 11.5px; }
  .m-ce-item:nth-child(2) { display: none; }
  .m-map { margin-top: 8px; padding: 10px 12px; }
  .m-map p { font-size: 12.3px; }
  .m-final { margin-top: 9px; padding: 11px; }
  .m-final b { font-size: 14px; }
  .m-foot { display: none; }

  .m-cats { top: calc(var(--head-h) + env(safe-area-inset-top) + 5px); }

  /* --- 顶栏 / 底栏：矮屏进一步收窄，把每一像素都让给内容 --- */
  :root { --head-h: clamp(42px, 6.4vh, 50px); --dock-h: clamp(46px, 7.2vh, 58px); }
  .m-head { padding-left: 13px; padding-right: 10px; }
  .m-brand-txt b { font-size: 14px; }
  .m-brand-txt span { font-size: 8.5px; }
  .m-dock { padding: 0 11px calc(10px + env(safe-area-inset-bottom)); gap: 8px; }
  .m-dock-btn { height: clamp(40px, 6vh, 46px); font-size: 12.5px; }
  .m-dock-btn svg { width: 15px; height: 15px; }
}

/* ---------------- 机型自适应补充（2026-10-22）----------------
   下面三段分别解决：大屏更舒展、横屏不挤压、系统大字体不溢出。 */

/* 1) 高屏（≥820px：iPhone 15 Pro Max / 大屏安卓）：栏位更舒展，按钮更好点 */
@media (min-height: 820px) {
  :root { --head-h: clamp(54px, 6.6vh, 64px); --dock-h: clamp(62px, 7.6vh, 76px); }
  .m-head { padding-left: 18px; padding-right: 16px; }
  .m-brand-txt b { font-size: 16.5px; }
  .m-dock { padding: 0 18px calc(18px + env(safe-area-inset-bottom)); gap: 12px; }
  .m-dock-btn { height: clamp(50px, 6vh, 56px); font-size: 15px; }
  .m-dock-btn svg { width: 19px; height: 19px; }
}

/* 2) 横屏 / 极矮屏（≤480px 高）：栏位压到最薄，否则内容几乎没空间 */
@media (max-height: 480px) {
  :root { --head-h: clamp(38px, 9vh, 46px); --dock-h: clamp(42px, 10vh, 52px); }
  .m-head { padding-left: 12px; padding-right: 10px; }
  .m-dock { padding: 0 10px calc(8px + env(safe-area-inset-bottom)); gap: 7px; }
  .m-dock-btn { height: clamp(36px, 11vh, 44px); font-size: 12px; }
  .m-dock-btn svg { width: 14px; height: 14px; }
  .m-cats { top: calc(var(--head-h) + env(safe-area-inset-top) + 4px); }
  /* 顶栏只有 38~46px 高，首屏品牌标（logo 34px + 上下 10px）会探出顶栏压到品类条，
     这里同步缩小并上移，保证它始终待在顶栏这条带子里。 */
  .m-hero-brand { top: calc(env(safe-area-inset-top) + 4px); }
  .m-hero-brand .mhb-mark img { height: 33px; }
  .m-hero-brand .mhb-txt b { font-size: 14.5px; }
  .m-hero-brand .mhb-name em { font-size: 9.5px; letter-spacing: .1em; padding-left: 11px; }
  .m-hero-brand .mhb-txt i { font-size: 8.5px; }
}

/* 3) 系统字体放大（无障碍 / 长辈模式）：栏位改为按内容撑开，
      避免文字被裁掉；按钮仍保证不低于 44px 的可点击高度。 */
@media (max-width: 480px) {
  .m-head { min-height: calc(var(--head-h) + env(safe-area-inset-top)); height: auto; }
  .m-dock-btn { min-height: 44px; height: auto; padding: 0 12px; }
}