/* ============================================================
   模板新增样式（原型 style.css 之外的部分）
   —— 只放三类：① 无 JS 兜底；② 原型没有的版式（兜底页 / 详情页）；③ 覆盖与补正
   ============================================================ */

/* ① 无 JS 兜底：<html class="no-js"> 时让 .reveal 直接可见。
      原型把内容藏在 .reveal（opacity:0）里、靠 JS 加 .in 显现 ——
      SSR / 未执行 JS 时若不复原，整页内容不可见（对搜索引擎也不可见）。
      客户端接管后（app-layout 的 useReveal）会摘掉 .no-js 并补 .in，同帧完成、不闪烁。 */
.no-js .reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* ② 兜底详情页正文（原型无此版式：客户日后在万云 3.0 自建文章时使用） */
.article-body {
  font-size: 16px;
  line-height: 2;
  color: #333;
  max-width: 980px;
  margin: 0 auto;
}
.article-body p {
  margin: 0 0 18px;
  text-align: justify;
}
.article-body img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 18px auto;
}
.article-body h2 {
  font-size: 26px !important;
  letter-spacing: 0 !important;
  margin: 30px 0 14px;
}
.article-body h3 {
  font-size: 21px !important;
  letter-spacing: 0 !important;
  margin: 24px 0 12px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 18px 22px;
}

.article-faqs {
  max-width: 980px;
  margin: 54px auto 0;
  border-top: 1px solid #eee;
  padding-top: 34px;
}
.article-faqs h3 {
  font-size: 22px !important;
  letter-spacing: 0 !important;
  margin-bottom: 18px;
}
.article-faqs li {
  margin-bottom: 16px;
}
.article-faqs strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
}
.article-faqs p {
  color: #646464;
  font-size: 15px;
  line-height: 1.9;
}

/* ============================================================
   ③ 覆盖与补正
   ============================================================ */

/* 产品卡片悬停位移：入场动效（.reveal/.reveal.in）与悬停共用 transform，
   而 style.css 里 `.reveal.in{transform:none}` 比 `.prod-card:hover` 更靠后 ⇒ 会把位移压掉
   （截图看不出来，只有量 getComputedStyle().transform 才发现）。原型 style.css 不动，
   这里用**同特异性 + 更靠后的样式表**把悬停位移补回来。 */
.prod-card:hover { transform: translateY(-10px); }
.honor-card:hover,
.value-card:hover,
.craft-step:hover { transform: translateY(-8px); }

/* 图片盒子钉死（C172② 的另一条路：CSS 给两个方向的尺寸就不必在标签上写宽高）。
   ⚠️ 判据按「某条规则里 width 与 height 是否都不是 auto」判单条规则，不做跨规则合并，
   故这里把 height 一并写上（与原值一致，视觉不变）。 */
.prod-card .pic { width: 100%; height: 340px; }

/* 长标题进面包屑时截断，避免撑破 56px 高的面包屑条 */
.crumb .cur { max-width: 760px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 详情页 banner 的长标题（资讯标题）：缩字号 + 允许换行，不撑破 440px 的 banner */
.inbanner h1.long {
  font-size: 30px; font-weight: 700; letter-spacing: 2px; text-indent: 0;
  line-height: 1.5; max-width: 1100px; margin: 0 auto;
}

/* ============================================================
   ④ 详情页版式（产品 / 资讯）—— 原型没有这两页
   ============================================================ */

/* 详情页正文与上方区块的间距（.article-body 自身 margin 是 `0 auto`，这里只补上边距） */
.detail-body { margin-top: 60px; }

/* 产品详情首屏：左图右信息（2026-10-13 客户要求：主图改成正方形，原 3/4 竖版作废；
 * 平台实拍近方形 745×790，1:1 cover 仅上下各裁约 2%，object-position 归正为 center；
 * 同日追加：左列 650px、图容器白底 + 30px 内边距） */
.pd-hero { display: grid; grid-template-columns: 650px 1fr; gap: 64px; align-items: center; }
.pd-hero .pic {
  width: 100%; aspect-ratio: 1 / 1;
  padding: 30px; background: #fff;
  border-radius: 20px; overflow: hidden; box-shadow: var(--shadow);
}
.pd-hero .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.pd-hero .bd .tag {
  display: inline-block; background: var(--red); color: #fff;
  font-size: 13px; padding: 6px 16px; border-radius: 30px; letter-spacing: 1px;
}
.pd-hero .bd h2 { font-size: 38px; font-weight: 700; letter-spacing: 2px; margin-top: 16px; }
.pd-hero .bd .price { margin-top: 18px; color: var(--red); font-size: 34px; font-weight: 700; }
.pd-hero .bd .price small { display: block; font-size: 13px; color: #999; font-weight: 400; margin-bottom: 2px; }
.pd-hero .bd .price em { font-style: normal; font-size: 18px; }
.pd-hero .bd .intro {
  margin-top: 22px; font-size: 15px; color: var(--gray); line-height: 2; text-align: justify;
}

/* 资讯详情头部 */
.nd-date { text-align: center; font-size: 15px; font-weight: 700; color: var(--red); letter-spacing: 1px; }
.nd-lead {
  max-width: 980px; margin: 20px auto 0; font-size: 15px; color: #888;
  line-height: 2; letter-spacing: .5px; text-align: justify;
}
.nd-back { text-align: center; margin-top: 60px; }
.nd-back .btn-more { margin-top: 0; }

@media (max-width: 1200px) {
  .pd-hero { grid-template-columns: 1fr; gap: 40px; }
  .pd-hero .pic { max-width: 520px; margin: 0 auto; }
}

/* ════════════ 首页 banner 改版（2026-10-12 客户成品设计图 1920×1000）════════════
 * 背景：原型 banner 是「摄影底图 + .cap 遮罩文案」，现换成 4 张自带文案��成品图。
 *  1) 关掉 .slide::after 的压暗渐变 —— 新图是亮色金/红/青底，叠加会发灰压暗产品图；
 *  2) 图是 1920:1000（≈1.92:1），原型 min-height 620 / max-height 1000 在窄屏会切到主体，
 *     改为按比例锁定高度，减少裁切；
 *  3) 圆点下移到画面底部安全区，避开图下缘的包装盒。
 */
.index_banner .banner .slide::after { display: none; }
.index_banner .banner {
  height: min(100vh, 56.25vw);
  min-height: 460px;
  max-height: 900px;
}
.index_banner .banner .slide { background-position: center center; }
.index_banner .banner .dots { bottom: 40px; }
/* 圆点：原型是纯白 .85 透明，为深色摄影底图设计；新 banner 底色明亮（金/红/青），
   纯白圆点会看不见 —— 加半透明深色描边/阴影，任何底色下都能看清。 */
.index_banner .banner .dots span {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 4px rgba(0, 0, 0, .35);
}
.index_banner .banner .dots span.active {
  background: transparent;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 0 3px rgba(255, 255, 255, .95);
}
/* 无障碍：图上自带文案，视觉隐藏但保留给读屏 */
.index_banner .banner .slide .sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* 窄屏：1920×1000 横图按比例铺满会左右切掉标题。
 * 第 1/3 屏文案在左、产品在右 → 焦点偏左；第 2/4 屏文案同样在左。
 * 统一用 38% 焦点并适当收高，避免只露出中间一条。 */
@media (max-width: 900px) {
  .index_banner .banner { height: 62vw; min-height: 240px; }
  .index_banner .banner .slide { background-position: 38% center; }
  .index_banner .banner .dots { bottom: 22px; }
}

/* ════════════ 首页 banner 顶部对齐（2026-10-12 起，2026-10-14 再调）═════════════
 *  - 首页占位高度：94px（原型）→ 20px（10-12）→ **0（10-14 客户要求，彻底顶格）**。
 *  - 内页仍用 94px 占位 —— 内页导航是白底不透明，占位一旦变小，
 *    页面首屏内容会被固定导航盖掉，所以只有首页走这个修饰类。
 *  - 2026-10-12（第二次）：首页顶部导航背景由「透明浮层」改为纯白 #fff。
 *    随之移除了只服务于透明态的白色文字投影 / logo 投影（白底上等于无效果）。
 *  - 2026-10-14：占位归零后 banner 从 y=0 起铺，固定导航（94px）**浮在 banner 之上**，
 *    这正是客户要的效果（导航压住 banner 顶部）。
 */
.header_height--home { height: 0; }

/* 导航：首页顶部（.header--clear 由首页路由态驱动）—— 用户要求纯白背景 */
.header--clear {
  background: #fff;
  box-shadow: none;
}

/* 首页 banner 高度（2026-10-14 客户指定）：`min(100vh, 56.25vw)` ——
   视口高与 16:9（56.25vw）取小；占位已归零（见上），故不再减 20px。
   同时解除原型那条 max-height 夹取（原型 1000px / 本站曾 900px），
   否则大屏下 banner 会被夹短、底部露出下一屏内容。 */
.index_banner .banner {
  height: min(calc(100vh), calc(56.25vw));
  max-height: none;
}

/* banner 两侧切换箭头（2026-10-12 用户要求）
   —— 图上自带亮色文案，所以用半透明深色圆底 + 白箭头，压任何底色都看得清。 */
.banner .bn-arrow {
  position: absolute; z-index: 5; top: 50%; transform: translateY(-50%);
  width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .3); color: #fff;
  font-size: 32px; line-height: 1; font-family: inherit;
  cursor: pointer; opacity: .8;
  transition: background .25s, opacity .25s, transform .25s;
}
.banner .bn-arrow:hover { background: rgba(0, 0, 0, .55); opacity: 1; }
.banner .bn-arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.banner .bn-arrow.prev { left: 40px; }
.banner .bn-arrow.next { right: 40px; }
/* 箭头用「‹ ›」字形，视觉上略偏，补偿 1px 让其在圆内居中 */
.banner .bn-arrow.prev { padding-right: 4px; }
.banner .bn-arrow.next { padding-left: 4px; }

/* 非首页保持原样（白底固定导航 + 94px 占位） */
@media (max-width: 900px) {
  .index_banner .banner { height: 62vw; min-height: 240px; }
  .banner .bn-arrow { width: 40px; height: 40px; font-size: 24px; }
  .banner .bn-arrow.prev { left: 12px; }
  .banner .bn-arrow.next { right: 12px; }
}

/* ════════════ 导航一级链接字号/字重（2026-10-12 用户指定）═════════════
 * 原型为 18px / 常规字重；客户要求放大加粗。行高沿用原型的 94px（= 导航高），
 * 文字仍在导航条内垂直居中，不动布局。
 */
.nav > ul > li > a {
  font-size: 20px;
  font-weight: bold;
}

/* ════════════ 酱香工艺三步卡片配色（2026-10-12 用户指定）═════════════
 * 原型：深色半透明卡 rgba(30,26,40,.35) + 金色数字/标题 + 白色正文，.on/悬停加深 + 金底线。
 * 客户改为：**默认白卡 + 主色调数字/标题**，**悬停变主色调底 + 白字**。
 *
 * 两个必须说明的点：
 * 1) 正文 p 原为 rgba(255,255,255,.72)（白色）—— 白卡上会**完全看不见**，
 *    客户没提但必须一并改为深色，否则正文消失。悬停时再转白。
 * 2) 组件是 onMouseOver 把 .on 移到悬停项上 ⇒ `.on` 与 `:hover` 本就是同一视觉态。
 *    客户要求「.on 那块背景为 #fff」，故把 .on 归入默认白卡；
 *    悬停规则用 `.c2-steps .c2-item:hover`（特异性 0,3,0）稳稳压过 `.c2-item.on`（0,2,0），
 *    避免同特异性下靠书写顺序取胜的脆弱写法。
 * 主色调取 var(--red) = #E1001F（品牌基色，原型中用于 logo 红章等实体填充）。
 */
.c2-item,
.c2-item.on {
  background: #fff;
  border-bottom-color: transparent;
}
.c2-item .no,
.c2-item h3 { color: var(--red); }
.c2-item p { color: #666; }

/* 悬停：主色调底 + 白字（金底线沿用原型） */
.c2-steps .c2-item:hover {
  background: var(--red);
  border-bottom-color: var(--gold2, #C8A45C);
}
.c2-steps .c2-item:hover .no,
.c2-steps .c2-item:hover h3 { color: #fff; }
.c2-steps .c2-item:hover p { color: rgba(255, 255, 255, .92); }

/* ════════════ 首页服务中心三张卡（2026-10-12 客户要求）═════════════
 *  ① 第 1 张卡（白底）由「服务支持 4 个入口」改为**在线留言表单**；
 *  ② 第 3 张卡「微信订购」悬停向下滑出二维码；
 *  ③ 「到厂品鉴」改为跳转腾讯地图导航。
 *  原型 CSS 未改（改动只落这里）。
 */

/* ① 留言表单 —— 卡片是白底，故输入框用浅灰底 + 细边，聚焦转主色 */
.index-part04 li:first-child .box { margin-top: 44px; } /* 原 120px 是给 4 个药丸按钮留的，表单不需要那么大空隙 */
.index-part04 li .box .msg-form { display: flex; flex-direction: column; gap: 12px; }
.index-part04 li .box .msg-form input,
.index-part04 li .box .msg-form textarea {
  width: 100%; box-sizing: border-box; padding: 12px 14px; font-size: 15px;
  color: #222; background: #f6f6f6; border: 1px solid #e2e2e2; border-radius: 8px;
  font-family: inherit; outline: none; transition: .3s;
}
.index-part04 li .box .msg-form textarea { resize: vertical; min-height: 96px; line-height: 1.7; }
.index-part04 li .box .msg-form input:focus,
.index-part04 li .box .msg-form textarea:focus { border-color: var(--red); background: #fff; }
.index-part04 li .box .msg-form input::placeholder,
.index-part04 li .box .msg-form textarea::placeholder { color: #9a9a9a; }
.index-part04 li .box .msg-form button {
  height: 48px; border: 0; border-radius: 8px; background: var(--red); color: #fff;
  font-size: 16px; font-weight: 700; letter-spacing: 6px; text-indent: 6px;
  font-family: inherit; cursor: pointer; transition: .3s;
}
.index-part04 li .box .msg-form button:hover { background: var(--red2); }
.index-part04 li .box .msg-note { margin-top: 12px; font-size: 12px; line-height: 1.7; color: #999; }

/* ② 微信二维码浮层 —— 卡片 overflow:hidden，故浮层落在卡内底部，从上方"滑下"
 *
 * 2026-10-28：卡里现在有**两个**入口（微信订购 / 微信公众号），各有一张浮层，落点相同、
 * 同时只开一个（`aria-hidden` + `.on` 由页面状态控制）。
 * 🔴 `pointer-events: none` 是**必须**的：浮层盖住药丸下缘约 12px，若它能接收鼠标，
 *    悬停就会被"进浮层 ⇒ 离开药丸 ⇒ 关掉 ⇒ 又回药丸 ⇒ 打开"打成抖动。
 *    加它之后浮层纯展示、不抢事件，点药丸也不受影响。
 * 🔴 浮层必须是 `li` 的直属子级：`.box` 是 position:relative，把浮层塞进去会让它按 `.box` 定位，
 *    从卡片底部跳到按钮上方（实测偏 300px+）。 */
.index-part04 li .qr-pop {
  position: absolute; z-index: 3; left: 40px; right: 40px; bottom: 34px;
  padding: 14px; border-radius: 14px; background: #fff; text-align: center;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
  opacity: 0; visibility: hidden; transform: translateY(-18px);
  transition: opacity .35s ease, transform .35s ease, visibility .35s;
  pointer-events: none;
}
.index-part04 li .qr-pop.on { opacity: 1; visibility: visible; transform: translateY(0); }
.index-part04 li .qr-pop img { display: block; width: 100%; max-width: 168px; margin: 0 auto; }
.index-part04 li .qr-pop .qr-holder {
  width: 168px; height: 168px; margin: 0 auto; border: 1px dashed #ccc; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #999; background: #fafafa;
}
.index-part04 li .qr-pop span {
  display: block; margin-top: 10px; font-size: 13px; color: #666; letter-spacing: 1px;
}

/* 官方渠道：二维码默认展示，不再依赖悬停。 */
.channel-qr-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
.index-part04 li:last-child .box {
  margin-left: 18px;
  margin-right: 18px;
}
.channel-qr-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 12px;
  background: rgba(255, 255, 255, .94);
  color: #333;
  text-align: center;
}
.channel-qr-card img,
.channel-qr-card .qr-holder {
  width: 100%;
  max-width: 120px;
  aspect-ratio: 1;
}
.channel-qr-card img {
  display: block;
  object-fit: contain;
  border-radius: 6px;
  background: #fff;
}
.channel-qr-card .qr-holder {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed #ccc;
  border-radius: 6px;
  background: #fafafa;
  color: #999;
  font-size: 12px;
}
.channel-qr-card strong {
  margin-top: 7px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #222;
  white-space: nowrap;
}
.channel-qr-card > span:not(.channel-map-icon) {
  margin-top: 3px;
  min-height: 2.9em;
  font-size: 10.5px;
  line-height: 1.45;
  color: #777;
}
.channel-qr-card--link {
  text-decoration: none;
  transition: border-color .2s, transform .2s;
}
.channel-qr-card--link:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
/* ════════════ 产品展示内页：卡片图改为正方形（2026-10-13 客户要求）═════════════
 * 原型 `.prod-card .pic` 是固定 `height: 340px`（3 列时约 483×340 ≈ 1.42:1 横图）。
 * 客户要求**图片以正方形展示** ⇒ 改用 `aspect-ratio: 1/1`，随列宽自适应：
 *   3 列（>1280px）与 2 列（≤1280px）都不变形，也不用为每个断点分别写死高度。
 * 口径与首页产品卡 `.p2-pic`（本就是 aspect-ratio:1/1）保持一致，两页观感统一。
 * 平台实拍图为近方形（实测蓝盒酒 745×790 ≈ 0.94），cover 裁切损失极小，
 * 故 object-fit / object-position 沿用原型不动。
 */
.prod-card .pic {
  height: auto;
  aspect-ratio: 1 / 1;
}

/* ════════════ 产品详情页：补「产品详情」模块标题（2026-10-13 客户要求）═════════════
 * 平台产品文章正文只有一张详情图、没有标题 ⇒ 标题由站点代码统一补齐，
 * 所有 /products/:slug 详情页观感一致（新闻详情页不加）。
 * 版式按客户提供的参考图：左对齐标题 + 底部浅灰分隔线，图片在下方居中。
 */
.pd-detail {
  max-width: none; /* 2026-10-13 客户要求：模块放开到整行宽（正文 img 仍居中自适应） */
  margin: 60px auto 0;
}
.pd-detail > h3 {
  font-size: 24px;
  font-weight: 400;
  color: #333;
  letter-spacing: 1px;
  padding-bottom: 14px;
  border-bottom: 2px solid #e5e5e5;
  margin-bottom: 28px;
}
.pd-detail .detail-body { margin-top: 0; }

/* ════════════ 新闻列表页：按客户参考站（dextest newsList）重排版（2026-10-13）════════════
 * 原型版式是「整卡点击 + 日期单行 + 标题 + 摘要」的上下堆叠；
 * 参考站为横向三栏：日期块（大号「日」+ 年.月，居中）+ 缩略图（298:209 圆角）+ 标题/摘要/查看更多。
 * 品牌口径：日期块用站点主色 var(--red)（参考站是其品牌蓝 #0C60AA）。
 * 原型的 li:hover 红底白字交互保留；行间用下边框分隔（参考站口径）。
 */
.news-list-page li { padding: 0; border-radius: 0; border-bottom: none; }
.news-list-page li a {
  display: flex; align-items: center; gap: 44px;
  padding: 42px 0; border-bottom: 1px solid var(--line);
}
.news-list-page .time-box { flex-shrink: 0; width: 110px; text-align: center; color: var(--red); }
.news-list-page .time-box .num { font-size: 56px; font-weight: 700; line-height: 1.15; }
.news-list-page .time-box .year { font-size: 16px; line-height: 1.4; letter-spacing: 1px; }
.news-list-page .pic {
  flex-shrink: 0; width: 268px; aspect-ratio: 298 / 209;
  border-radius: 14px; overflow: hidden;
}
.news-list-page .pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.26,.06,0,1); }
.news-list-page li:hover .pic img { transform: scale(1.06); }
.news-list-page .bd { flex: 1; min-width: 0; }
.news-list-page .bd h3 {
  font-weight: 400; margin-top: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-list-page .bd .btn-more { margin-top: 20px; }
@media (max-width: 760px) {
  .news-list-page li a { gap: 24px; padding: 30px 0; }
  .news-list-page .pic { display: none; }
  .news-list-page .time-box { width: 84px; }
  .news-list-page .time-box .num { font-size: 40px; }
  .news-list-page .bd h3 { white-space: normal; }
}

/* ════════════ 新闻详情页：标题显示到正文区 + 正文各层放开整行宽（2026-10-13 客户要求）════════════
 * 1. 标题此前只进 banner 的 <h1>，客户要求正文区也要显示 ⇒ .nd-title（居中、30px、加粗）；
 * 2. .wrap 下一级的日期/导语/正文/FAQ/返回各层原 max-width 980px 居中 ⇒ 放开为 none。
 * 作用域用 .nd-page（NewsDetailPage 的 wrap 修饰类），产品详情页的正文/FAQ 不受影响。
 */
.nd-page .nd-title {
  text-align: center; font-size: 30px; font-weight: 700;
  line-height: 1.6; letter-spacing: 1px;
}
.nd-page .nd-lead,
.nd-page .article-body,
.nd-page .article-faqs,
.nd-page .nd-back { max-width: none; }

/* ════════════ 联系我们页：留言表单放开整行宽（2026-10-13 客户要求）════════════
 * 原型 `.form-card` 是 max-width: 900px 居中 ⇒ 覆盖为 none（卡片随 .wrap 整行宽，
 * 内边距 60/70 沿用原型不动，输入框自动随卡片拉宽）。
 */
.form-card { max-width: none; }

/* 联系页地图：自绘天地图 WMTS 瓦片，避免依赖外部全局 JS 与 iframe。 */
.contact-map {
  margin: 0 0 42px;
  padding: 22px;
  border: 1px solid #eee;
  border-radius: 18px;
  background: #fafafa;
}
.contact-map-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 24px;
  margin-bottom: 18px;
}
.contact-map-head h2 {
  margin: 0;
  font-size: 24px !important;
  line-height: 1.35 !important;
  letter-spacing: 1px !important;
}
.contact-map-head p {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.8;
  color: #888;
}
.contact-map-head a {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; padding: 0 18px;
  border-radius: 20px; background: var(--red); color: #fff;
  font-size: 13.5px; font-weight: 700; letter-spacing: .5px;
  transition: background .25s, transform .25s;
}
.contact-map-head a:hover { background: var(--red2); transform: translateY(-1px); }
.tdt-map {
  position: relative; width: 100%; height: 430px;
  overflow: hidden; border-radius: 12px; background: #e9ece8;
  cursor: grab; touch-action: none; user-select: none;
  outline: none; isolation: isolate;
}
.tdt-map.is-moving { cursor: grabbing; }
.tdt-map:focus-visible { box-shadow: 0 0 0 3px rgba(225, 0, 31, .28); }
.tdt-map-tiles { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.tdt-map-tile {
  position: absolute; display: block; width: 256px; height: 256px;
  max-width: none; pointer-events: none; user-select: none;
  -webkit-user-drag: none;
}
.tdt-map::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 30%, rgba(0,0,0,.04));
}
.tdt-map-marker {
  position: absolute; z-index: 4; transform: translate(-50%, -100%);
  display: flex; flex-direction: column; align-items: center; pointer-events: none;
}
.tdt-map-pin {
  position: relative; display: flex; width: 34px; height: 42px;
  align-items: flex-start; justify-content: center;
  filter: drop-shadow(0 7px 12px rgba(0, 0, 0, .28));
}
.tdt-map-pin::before {
  content: ""; width: 30px; height: 30px; border-radius: 50% 50% 50% 8px;
  background: var(--red); border: 3px solid #fff; transform: rotate(-45deg);
}
.tdt-map-pin i {
  position: absolute; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.22);
}
.tdt-map-card {
  min-width: 220px; max-width: 320px; margin-top: 9px; padding: 10px 13px;
  border: 1px solid rgba(0,0,0,.08); border-radius: 10px;
  background: rgba(255,255,255,.96); text-align: left;
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  transform: translateY(4px);
}
.tdt-map-card strong { display: block; font-size: 13px; line-height: 1.45; color: #222; }
.tdt-map-card span { display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.55; color: #777; }
.tdt-map-tools {
  position: absolute; z-index: 5; right: 14px; top: 14px;
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(0,0,0,.12); border-radius: 10px;
  background: rgba(255,255,255,.96); box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.tdt-map-tools button {
  display: flex; width: 38px; height: 38px; align-items: center; justify-content: center;
  border: 0; border-bottom: 1px solid #eee; background: #fff; color: #333;
  font: 700 21px/1 Arial, sans-serif; cursor: pointer;
}
.tdt-map-tools button:last-child { border-bottom: 0; }
.tdt-map-tools button:hover { background: #fff4f4; color: var(--red); }
.tdt-map-tools .tdt-map-reset { font-size: 18px; }
.tdt-map-bottom {
  position: absolute; z-index: 5; left: 14px; right: 14px; bottom: 12px;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
  pointer-events: none;
}
.tdt-map-bottom > div {
  display: flex; flex-direction: column; gap: 2px; padding: 6px 9px;
  border-radius: 7px; background: rgba(255,255,255,.9); color: #666;
  font-size: 10px; line-height: 1.3; box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.tdt-map-bottom span { font-weight: 700; color: #444; }
.tdt-map-bottom small { font-size: 10px; }
.tdt-map-bottom a {
  pointer-events: auto; display: inline-flex; align-items: center;
  min-height: 36px; padding: 0 16px; border-radius: 18px;
  background: var(--red); color: #fff; font-size: 13px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(225,0,31,.25);
}
.tdt-map-bottom a:hover { background: var(--red2); }
.tdt-map--failed { cursor: default; }
.tdt-map-failed-layer { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.tdt-map-fallback-image { width: 100%; height: 100%; object-fit: cover; }
.tdt-map-fallback {
  position: absolute; left: 50%; top: 50%; width: min(360px, calc(100% - 32px));
    z-index: 3; transform: translate(-50%, -50%); padding: 18px; border-radius: 12px;
  background: rgba(255,255,255,.96); text-align: center; box-shadow: 0 12px 38px rgba(0,0,0,.2);
}
.tdt-map-fallback strong, .tdt-map-fallback span { display: block; }
.tdt-map-fallback span { margin-top: 6px; font-size: 13px; color: #777; }
.tdt-map-fallback-actions {
    display: flex; justify-content: center; gap: 8px; margin-top: 14px;
}
.tdt-map-fallback-actions a,
.tdt-map-fallback-actions button {
    display: inline-flex; min-height: 34px; align-items: center; justify-content: center;
    padding: 0 14px; border: 0; border-radius: 17px;
    font: 700 13px/1 inherit; text-decoration: none; cursor: pointer;
}
.tdt-map-fallback-actions a { background: var(--red); color: #fff; }
.tdt-map-fallback-actions button {
    border: 1px solid #ddd; background: #fff; color: #555;
}

/* ════════════ 首页新闻区：卡片两行摘要 / 右列一行摘要（2026-10-13 客户要求）════════════
 * 左侧大卡 .txt 是「白→透明」渐变盖在图上，摘要落在渐变下段 ⇒ 渐变不透明段从 52% 提到 70%，
 * 保证两行摘要在纯白底上可读；右列 li 悬停红底时摘要翻白。
 */
.index-part01 .ll .card .txt {
  background: linear-gradient(180deg, #fff 70%, rgba(255, 255, 255, 0));
}
.index-part01 .ll .card .txt .desc {
  margin-top: 10px; font-size: 14px; line-height: 1.7; color: #999;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.index-part01 .rr li .desc {
  margin-top: 6px; font-size: 13.5px; color: #999;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.index-part01 .rr li:hover .desc { color: rgba(255, 255, 255, .85); }

/* 新闻区左右等高：右列变高时左卡同步拉伸，不再出现底部错位。 */
.index-part01 .con { align-items: stretch; }
.index-part01 .ll {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.index-part01 .ll .card,
.index-part01 .rr {
  height: auto;
  min-height: 560px;
}
.index-part01 .ll .card {
  width: 100%;
  min-width: 0;
}

/* 产品详情画廊：桌面端高度跟随图片比例，不再强制 615px。 */
@media (min-width: 1024px) {
  .shop-gallery-stage {
    aspect-ratio: auto !important;
    height: auto !important;
  }
}

/* ════════════ 留言表单（平台动态表单）：蜜罐隐藏 + 选项组 + 状态提示（2026-10-14）════════════
 * 表单结构由平台按 code 下发（form_contact / form_message），前端按 fields[] 动态渲染；
 * 这里只补三样平台表单需要的样式，输入框/按钮沿用 .form-card 与 .msg-form 的既有规则。
 */
/* 🔴 蜜罐字段：视觉隐藏（不是 display:none —— 要让爬虫"看得见、填得着"，
 *    真实用户则完全不可见、不可聚焦）。 */
.cf-hp {
  position: absolute !important; left: -9999px !important; top: auto !important;
  width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
/* radio / checkbox 选项组 */
.cf-choice { margin-bottom: 20px; }
.cf-choice .cf-choice-label { display: block; font-size: 14px; color: #666; margin-bottom: 10px; }
.cf-choice label { display: inline-flex; align-items: center; gap: 6px; margin: 0 18px 8px 0; font-size: 15px; cursor: pointer; }
.cf-choice input { width: auto; margin: 0; }
/* 状态提示：联系页（.form-card 内）居中红字，与原型提示口径一致 */
.form-card .cf-note {
  margin: 16px 0 0; text-align: center; font-size: 14px; color: #999; line-height: 1.7;
}
.form-card form[aria-busy] .cf-note { color: #E1001F; }

/* ════════════ 制酒工艺七步卡片（2026-10-22 客户要求新增「基酒贮存 · 勾调」「灌装线」）════════════
 * 原型 `.craft-steps` 是 `repeat(5, 1fr)`。加到 7 张后两个方案都不行：
 *   · 仍用 5 列 ⇒ 第二行只剩 2 张，孤零零且与上行不对齐；
 *   · 直接 7 列 ⇒ 单卡约 170px，22px 标题 + 正文会被挤到频繁折行。
 * ⇒ 改 4 列（4 + 3），并补窄屏逐级降级（原型本就没有响应式断点，5 列硬扛到手机上会挤成细条）。
 */
.craft-steps { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .craft-steps { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px) { .craft-steps { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (max-width: 560px) { .craft-steps { grid-template-columns: 1fr; } }

/* 「伍 七次取酒（烤酒蒸馏）」跨两列（2026-10-22 客户要求「占两个位置」）：
   4 列布局下 4 + (2+1+1) 正好把第二行填满，不再剩孤格；
   ≤560px 单列时必须重置 —— 否则 `span 2` 会撑出隐式列、把卡片顶出屏幕。 */
.craft-step.wide { grid-column: span 2; }
@media (max-width: 560px) {
  .craft-step.wide { grid-column: span 1; }
}

/* ════════════ 导航栏 AI 搜索（2026-10-28 客户要求：放在订购热线之后）════════════
 * ① 入口按钮：与 .header-hot 同排，flex 顺序即 DOM 顺序（logo → nav → 热线 → 按钮）；
 * ② 覆盖层面板：z-index 必须高于 fixed header（1001），否则被导航压住；
 * ③ 断点沿用原型：≤1280px 时 .nav / .header-hot 一起隐藏，按钮改用 margin-left:auto 靠右。
 */
.ai-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  flex-shrink: 0; margin-left: 22px; height: 42px; padding: 0 20px 0 17px;
  border: 0; border-radius: 21px; cursor: pointer;
  background: linear-gradient(135deg, var(--red) 0%, var(--red2) 100%);
  color: #fff; font-size: 15px; line-height: 1; letter-spacing: 1.5px; font-family: var(--sans);
  box-shadow: 0 6px 16px rgba(225, 0, 31, .26);
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.ai-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.ai-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(225, 0, 31, .34); filter: saturate(1.08); }
.ai-btn:active { transform: translateY(0); box-shadow: 0 4px 12px rgba(225, 0, 31, .3); }
.ai-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* ── 覆盖层 ── */
.ai-mask {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 10vh 20px 40px;
  background: rgba(24, 14, 12, .46);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: aiFade .2s ease both;
}
@keyframes aiFade { from { opacity: 0; } to { opacity: 1; } }

.ai-panel {
  width: min(760px, 100%); max-height: 76vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
  animation: aiRise .26s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes aiRise { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* 头部：AI 角标 + 输入框 + 关闭 */
.ai-head {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 18px; border-bottom: 1px solid #f0f0f0;
}
.ai-badge {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--red), var(--red2));
  color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0;
}
.ai-head input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font-family: var(--sans); font-size: 17px; color: #111;
}
.ai-head input::placeholder { color: #bdbdbd; }
.ai-close {
  flex-shrink: 0; width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: #f3f3f3; color: #777; font-size: 20px; line-height: 1; cursor: pointer;
  transition: background .25s, color .25s;
}
.ai-close:hover { background: var(--red); color: #fff; }

/* 内容区 */
.ai-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 20px 20px; }
.ai-sec-h { margin: 18px 2px 12px; font-size: 13px; color: #999; letter-spacing: 1px; }
.ai-body > .ai-sec-h:first-child { margin-top: 2px; }

.ai-answer {
  padding: 16px 18px; border: 1px solid #f6dede; border-radius: 14px;
  background: linear-gradient(180deg, #fff8f8 0%, #fff 100%);
}
.ai-answer-h {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  font-size: 13px; font-weight: 700; letter-spacing: 2px; color: var(--red);
}
.ai-answer p { font-size: 15.5px; line-height: 1.95; color: #333; text-align: justify; }
.ai-answer p + p { margin-top: 8px; }

.ai-hits { display: flex; flex-direction: column; gap: 2px; }
.ai-hit {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; border-radius: 12px; transition: background .22s;
}
.ai-hit:hover { background: #fafafa; }
.ai-hit .n {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fdecef; color: var(--red); font-size: 12px; letter-spacing: 0;
}
.ai-hit .txt { flex: 1; min-width: 0; display: block; }
.ai-hit .t {
  display: block; font-size: 15.5px; font-weight: 600; color: #111;
  line-height: 1.5; transition: color .22s;
}
.ai-hit .d {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-top: 5px; font-size: 13.5px; line-height: 1.7; color: #8a8a8a;
}
.ai-hit .m { display: block; margin-top: 6px; font-size: 12.5px; color: #c0c0c0; }
.ai-hit .t em, .ai-hit .d em { font-style: normal; color: var(--red); }
.ai-hit .go { flex-shrink: 0; align-self: center; color: #d5d5d5; font-size: 22px; line-height: 1; }
.ai-hit:hover .t { color: var(--red); }
.ai-hit:hover .go { color: var(--red); }

/* 建议词 */
.ai-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ai-chip {
  padding: 9px 16px; border: 1px solid #eee; border-radius: 20px;
  background: #fafafa; color: #555; font-size: 14px; font-family: var(--sans);
  cursor: pointer; transition: border-color .22s, color .22s, background .22s;
}
.ai-chip:hover { border-color: var(--red); color: var(--red); background: #fff; }

/* 加载 / 空态 */
.ai-loading { display: flex; align-items: center; gap: 7px; padding: 26px 4px; color: #999; font-size: 14px; }
.ai-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--red); opacity: .3;
  animation: aiBlink 1.2s infinite ease-in-out;
}
.ai-dot:nth-child(2) { animation-delay: .18s; }
.ai-dot:nth-child(3) { animation-delay: .36s; }
.ai-loading > :nth-child(3) { margin-right: 6px; }
@keyframes aiBlink {
  0%, 100% { opacity: .25; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
.ai-empty { padding: 22px 4px; color: #8a8a8a; font-size: 14.5px; line-height: 1.9; }

.ai-foot {
  padding: 10px 18px; border-top: 1px solid #f4f4f4;
  font-size: 12px; color: #bdbdbd; text-align: center; letter-spacing: .5px;
}

/* ── 断点 ── */
/* 原型在 ≤1280px 隐藏 .nav / .header-hot；此时按钮是唯一入口，必须靠右且留出边距 */
@media (max-width: 1280px) {
  .ai-btn { margin-left: auto; }
}
@media (max-width: 560px) {
  .ai-btn { width: 42px; padding: 0; letter-spacing: 0; }
  .ai-btn .ai-btn-txt { display: none; }
}
@media (max-width: 640px) {
  .ai-mask { padding: 0; align-items: stretch; }
  .ai-panel { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; }
  .ai-head { padding: 12px 14px; }
  .ai-head input { font-size: 16px; }
  .ai-body { padding: 16px 14px 18px; }
  .ai-answer p { font-size: 15px; }
}

/* ════════════ 页头登录态（2026-10-28 · 技能 C203）════════════
 * 站点自有页面要显示登录态，就必须读运行时模板的共享契约（localStorage `mall:auth` +
 * `mall:auth-changed` 事件）。未登录与已登录两态**不许写死**；退出要真做（清 key + 派发事件）。
 * 视觉上跟热线/AI 按钮同一排，克制一些：描边胶囊 + 小字号，不抢主视觉。
 */
.header-user {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0; margin-left: 16px; font-size: 15px;
}
.hu-login {
  display: inline-flex; align-items: center; height: 36px; padding: 0 16px;
  border: 1px solid #e3e3e3; border-radius: 18px; color: #333; letter-spacing: 1px;
  transition: border-color .25s, color .25s, background .25s;
}
.hu-login:hover { border-color: var(--red); color: var(--red); background: #fff; }
.hu-name {
  display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; color: #333; transition: color .25s;
}
.hu-name:hover { color: var(--red); }
.hu-out {
  border: 0; background: transparent; padding: 0 2px; cursor: pointer;
  font-family: var(--sans); font-size: 13px; color: #aaa; transition: color .25s;
}
.hu-out:hover { color: var(--red); }

@media (max-width: 1280px) {
  .header-user { margin-left: 12px; }
}
@media (max-width: 560px) {
  .hu-login { height: 42px; padding: 0 14px; border-radius: 21px; font-size: 14px; letter-spacing: 0; }
  .hu-name { max-width: 76px; font-size: 13px; }
  .hu-out { display: none; }
}

/* ════════════ 列表分页（2026-10-28 客户要求：产品 9 条 / 资讯 6 条 + 上一页下一页）════════════
 * 原型（style.css）里没有分页器，这一套是本工程新增 —— 按 C98 记一笔：类名由本文件定义，
 * 不是从模板样式表里挖出来的；边界行为：只有一页时**照常渲染**，两侧按钮为禁用态（不留死按钮）。
 */
.pager {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  margin-top: 56px;
}
.pg {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 92px; height: 42px; padding: 0 20px;
  border: 1px solid #e3e3e3; border-radius: 21px;
  font-size: 15px; color: #333; letter-spacing: 1px;
  transition: border-color .25s, color .25s, background .25s;
}
.pg:hover { border-color: var(--red); color: var(--red); }
.pg.is-disabled { color: #c9c9c9; border-color: #eee; cursor: not-allowed; }
.pg.is-disabled:hover { color: #c9c9c9; border-color: #eee; }

.pg-nums { display: flex; align-items: center; gap: 6px; }
.pg-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid transparent; font-size: 15px; color: #444;
  transition: color .25s, border-color .25s, background .25s;
}
.pg-num:hover { color: var(--red); border-color: var(--red); }
.pg-num.is-current { background: var(--red); color: #fff; border-color: var(--red); }
.pg-gap { color: #bbb; padding: 0 2px; user-select: none; }
.pg-info { margin-left: 14px; font-size: 13px; color: #999; letter-spacing: .5px; }

/* 分页条与下方「价格说明」之间的呼吸感 */
.pager + .prod-note { margin-top: 40px; }

@media (max-width: 860px) {
  .pg-info { display: none; }
  .pg { min-width: 82px; padding: 0 16px; }
  .pager { margin-top: 44px; }
}
@media (max-width: 560px) {
  .pager { gap: 6px; margin-top: 36px; }
  .pg { min-width: 0; height: 40px; padding: 0 14px; font-size: 14px; letter-spacing: 0; }
  .pg-num { width: 38px; height: 38px; font-size: 14px; }
}

/* ════════════ 详情页「上一篇 / 下一篇」（2026-10-28 客户要求）════════════
 * 两栏等宽卡：左「上一篇」/ 右「下一篇」，标题两行封顶；
 * 只有一侧时另一侧是灰态占位（两栏对齐 + 明确"到头了"，且不存在可点却是空链接的情况）。
 * 与正文区之间用一条细线分隔，避免和上方 FAQ 糊在一起。
 */
.detail-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 56px; padding-top: 34px; border-top: 1px solid #eee;
}
.dn-item {
  display: block; min-width: 0;
  padding: 20px 24px; border-radius: 14px;
  background: #fafafa; border: 1px solid transparent;
  transition: background .25s, border-color .25s, transform .25s;
}
a.dn-item:hover { background: #fff; border-color: var(--red); transform: translateY(-2px); }
.dn-k {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; color: #999; letter-spacing: 2px;
}
.dn-t {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: 15.5px; line-height: 1.6; color: #222;
  transition: color .25s;
}
a.dn-item:hover .dn-t { color: var(--red); }
.dn-next { text-align: right; }
.dn-item.is-empty { cursor: default; }
.dn-item.is-empty .dn-t { color: #c9c9c9; }
.detail-nav.is-single { grid-template-columns: minmax(0, 1fr); }

@media (max-width: 640px) {
  .detail-nav { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; padding-top: 26px; }
  .dn-item { padding: 16px 18px; }
  .dn-next { text-align: left; }
}

/* ════════════════════════════════════════════════════════════════════════════
   移动端（Wap）适配层 —— 2026-10-28
   ────────────────────────────────────────────────────────────────────────────
   背景：原型 style.css 只有一档 `@media (max-width:1280px)`，而且是**减法**
   （隐藏 .nav / .header-hot、把多列压成一列），没有为 390px 屏幕重排过任何一处
   ⇒ 真机上表现为：① 手机没有导航入口；② 52px 大标题被硬塞进 390px，断开成 2~3 行；
      ③ 首页新闻卡两栏各 170px，标题竖排断字；④ 首屏 banner 顶部文案被固定导航压住；
      ⑤ 页脚、服务区、表单的内边距仍是桌面值，一屏塞不下。

   本层**只做加法**：一律写在 style.css 之后，用同特异性 + 更靠后的顺序覆盖，
   不引入 !important 与原型对抗（少数 h1/h2 例外 —— 原型自己用了 !important 定死 52px）。

   断点口径：
     ≤1280px  汉堡导航出现（与原型隐藏 .nav 同步，互补关系）
     ≤900px   页头高度 94→64、logo 收小、首页 banner 不再被页头压住
     ≤760px   全站排版降级（标题 / 区块留白 / 卡片网格 / 表单）
     ≤560px   细节收口（药丸按钮、页脚、分页、详情页上下篇）
   ════════════════════════════════════════════════════════════════════════════ */

/* ── ① 移动端导航（汉堡按钮 + 侧滑抽屉）─────────────────────────────────────
 * 桌面端彻底不参与布局（display:none），由 ≤1280 断点打开 ——
 * 与 style.css 里 `.nav{display:none}` 是同一档，保证「桌面有横排、手机有抽屉」，
 * 不会出现两边都在或两边都没有的中间态。
 */
.mnav-btn { display: none; }

.mnav-mask {
  position: fixed; inset: 0; z-index: 2100;
  background: rgba(24, 14, 10, .48);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  animation: mnavFade .2s ease both;
}
@keyframes mnavFade { from { opacity: 0; } to { opacity: 1; } }

.mnav-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(84vw, 340px);
  display: flex; flex-direction: column;
  background: #fff; box-shadow: -12px 0 40px rgba(0, 0, 0, .26);
  animation: mnavIn .28s cubic-bezier(.2, .7, .3, 1) both;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
@keyframes mnavIn { from { transform: translateX(100%); } to { transform: none; } }

.mnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #f0f0f0;
  position: sticky; top: 0; background: #fff; z-index: 2;
}
.mnav-tit { font-size: 15px; font-weight: 700; letter-spacing: 2px; color: #222; }
.mnav-close {
  width: 36px; height: 36px; border: 0; border-radius: 50%;
  background: #f4f4f4; color: #666; font-size: 22px; line-height: 1;
  cursor: pointer; transition: background .25s, color .25s;
}
.mnav-close:hover { background: var(--red); color: #fff; }

.mnav-list { padding: 4px 0; }
.mnav-list li { border-bottom: 1px solid #f5f5f5; }
.mnav-list li:last-child { border-bottom: 0; }
.mnav-list a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 16px; font-size: 16px; color: #222; letter-spacing: 1px;
}
.mnav-list a i { font-style: normal; color: #d0d0d0; font-size: 20px; line-height: 1; }
.mnav-list li.on a { color: var(--red); font-weight: 700; }
.mnav-list li.on a i { color: var(--red); }

.mnav-foot { margin-top: auto; padding: 18px 16px 24px; background: #faf7f5; }
.mnav-k { font-size: 12px; color: #999; letter-spacing: 1px; }
.mnav-tel { display: block; margin: 4px 0 14px; font-size: 24px; font-weight: 800; color: var(--red); }
.mnav-tel2 { display: block; margin-top: 4px; font-size: 17px; font-weight: 700; color: #222; }

@media (max-width: 1280px) {
  .mnav-btn {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    width: 44px; height: 44px; margin-left: 10px; padding: 0 11px;
    border: 1px solid #e6e6e6; border-radius: 12px; background: #fff;
    flex-shrink: 0; cursor: pointer; transition: border-color .25s, background .25s;
  }
  .mnav-btn:hover { border-color: var(--red); }
  .mnav-bar {
    display: block; width: 100%; height: 2px; border-radius: 2px; background: #222;
    transition: background .25s;
  }
  .mnav-btn:hover .mnav-bar { background: var(--red); }
}

/* ── ② 页头：移动端收高 + 首页 banner 不再被压 ──────────────────────────────
 * 原型页头写死 94px（.header / .header .wrap / .header_height 三处），
 * 390px 屏上 94px 的纯白条 + 244px 宽的 logo 已经吃掉 1/4 首屏，
 * 且首页 `.header_height--home{height:0}` 会让 banner 从 y=0 起铺、被页头压住顶部文案。
 * ⇒ 移动端统一 64px，并让首页也保留这段占位（banner 从页头下方开始）。
 */
@media (max-width: 1024px) {
  /* 页头收高：1024 及以下（平板 / 小笔记本）已经没有横排导航，94px 的纯白条太占屏幕 */
  .header, .header .wrap { height: 64px; }
  .header_height, .header_height--home { height: 64px; }
  .logo img { height: 40px; }
  .header .wrap { gap: 0; }
}

@media (max-width: 900px) {
  /* 首页 banner：1920×1000 的图自带文案，且文案贴左边 ⇒ cover 会切字。
     移动端按图片比例锁定容器 + contain 完整显示（不留裁切、不变形），
     底色取图的暖白，比例不完全吻合时也不露突兀的白块。 */
  .index_banner .banner {
    height: auto; aspect-ratio: 1920 / 1000;
    min-height: 0; max-height: none;
    background: #f6f1ea;
  }
  .index_banner .banner .slide {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
  .index_banner .banner .dots { bottom: 12px; }
  .index_banner .banner .dots span { width: 10px; height: 10px; }
  .index_banner .banner .dots span.active { width: 13px; height: 13px; border-width: 2px; }
}

/* ── ③ 全站排版降级（≤760px）────────────────────────────────────────────── */
@media (max-width: 760px) {
  .wrap { max-width: 92%; }

  /* 标题：原型把 h1/h2 用 !important 钉死在 52px，390px 屏一行只放得下 7 个字，
     带「·」的中文标题必然断成 2~3 行且第 2 行只剩两三个字（"热点" / "服务"）。
     这里整体降到 28px，并按语义重设字距 —— 同特异性 + 后置样式表 + !important 才压得住。 */
  h1, h2, .about-intro .in-h, .about-grid h2 {
    font-size: 28px !important;
    letter-spacing: 1px !important;
    line-height: 1.4 !important;
  }
  .tit { margin-bottom: 28px; }
  .tit span { font-size: 13px; letter-spacing: 2px; }
  .tit h2 { font-size: 28px !important; line-height: 1.35 !important; }
  .tit h2 small { font-size: 10px; letter-spacing: 2px; margin-top: 8px; }
  .tit-desc { font-size: 13px; line-height: 1.9; letter-spacing: .5px; }

  /* 区块留白：桌面是 100~130px，手机上一屏只能装一张卡 */
  .page-sec { padding: 48px 0; }
  .index-part01 { padding: 52px 0; }
  .index-part02 { padding: 8px 0 52px; }

  /* 公司简介（首页 + 简介页共用） */
  .intro-left { padding: 40px 5%; }
  .intro-left .in-h { font-size: 22px !important; line-height: 1.45 !important; }
  .intro-left .in-p { margin-top: 16px; font-size: 14px; line-height: 1.95; }
  .intro-left .in-p + .in-p { margin-top: 12px; }
  .btn-more { margin-top: 26px; padding: 11px 26px; font-size: 14px; letter-spacing: 1px; }
  .intro-right { height: 210px; }
  .intro-stats { padding: 40px 0 16px; }
  .intro-stats .wrap { flex-wrap: wrap; justify-content: center; gap: 26px 0; }
  .intro-stats .st {
    flex: 0 0 50%;
    padding-right: 0;
    text-align: center;
  }
  .intro-stats .num { font-size: 34px; }
  .intro-stats .num sup { font-size: 16px; vertical-align: 16px; }
  .intro-stats .num small { font-size: 14px; }
  .intro-stats .lb { margin-top: 8px; font-size: 12.5px; letter-spacing: 0; }

  /* 新闻区：桌面是「左 2 张大卡 + 右 1 列条卡」，手机上两张卡各 170px、标题竖着断字。
     改成上下两段：大卡单列 + 条卡单列。 */
  .index-part01 .con { gap: 20px; }
  .index-part01 .ll { display: flex; flex-direction: column; gap: 18px; width: 100%; }
  .index-part01 .ll .card { width: 100%; height: 400px; min-height: 0; border-radius: 16px; }
  .index-part01 .ll .card .txt { padding: 24px 20px 70px; }
  .index-part01 .ll .card .txt h3 { font-size: 19px; height: auto; max-height: 4.2em; }
  .index-part01 .ll .card .txt .desc { font-size: 13px; }
  .index-part01 .rr { width: 100%; min-height: 0; padding: 6px 10px; border-radius: 16px; }
  .index-part01 .rr li { padding: 14px 12px; border-radius: 12px; }
  .index-part01 .rr li h3 { font-size: 16px; height: auto; max-height: 2.9em; }
  .index-part01 .rr li span { font-size: 13px; }

  /* 产品选项卡（首页 part02）与深色小标题区 */
  .tab_tit li { font-size: 15px; padding: 12px 0 14px; }
  .tab_item { height: 420px; border-radius: 16px; }
  .tab_item .tinfo { left: 22px; right: 22px; max-width: none; }
  .tab_item .tinfo h3 { font-size: 24px; letter-spacing: 1px; }
  .tab_item .tinfo p { font-size: 14px; line-height: 1.8; }
  .tab_item .tinfo .price { font-size: 22px; margin-top: 16px; }
  .tab_item .tinfo .price b { font-size: 28px; }
  .pt-dark { padding: 60px 0 170px; }
  .prod2-grid { margin-top: -130px; gap: 18px; }
  .p2-body { padding: 18px 18px 22px; }
  .p2-body h3 { font-size: 18px; }
  .p2-price { font-size: 21px; }

  /* 历史文化（part03）：错位排布在窄屏没有意义，直接单列等距 */
  .index-part03 .tt { padding: 60px 0 120px; }
  .index-part03 .res-list { margin-top: -80px; padding-bottom: 8px; }
  .index-part03 .res-list li { height: 320px; margin-top: 18px; border-radius: 22px; }
  .index-part03 .res-list li:nth-of-type(2) { margin-top: 18px; }
  .index-part03 .res-list li .rcon { left: 22px; right: 22px; bottom: 24px; }
  .index-part03 .res-list li .rcon h3 { font-size: 21px; letter-spacing: 1px; }
  .index-part03 .res-list li .rcon p { font-size: 13.5px; line-height: 1.7; }

  /* 酱香工艺（全屏深色 + 三张步骤卡） */
  .craft2-sec { padding: 56px 0 64px; }
  .c2-tit .kick { font-size: 14px; letter-spacing: 2px; }
  .c2-tit h2 { font-size: 26px !important; margin-top: 8px; }
  .c2-tit .en { font-size: 12px; letter-spacing: 2px; margin-top: 8px; }
  .btn-ghost { margin-top: 20px; padding: 8px 20px; font-size: 12px; letter-spacing: 2px; }
  .c2-steps { margin-top: 32px; }
  .c2-item { padding: 24px 20px 26px; }
  .c2-item .no { font-size: 40px; }
  .c2-item h3 { font-size: 18px; margin-top: 14px; letter-spacing: 1px; }
  .c2-item p { font-size: 13px; line-height: 1.8; }

  /* 服务中心（part04）：三张卡竖排后，卡内 120px 的顶部空隙会把内容推到屏幕外 */
  .index-part04 { padding: 52px 0; }
  .index-part04 ul { gap: 18px; }
  .index-part04 li { min-height: 0; padding-bottom: 26px; border-radius: 16px; }
  .index-part04 li:hover { margin-top: 0; }
  .index-part04 li h3 { margin: 24px 20px 0; font-size: 22px; letter-spacing: 1px; }
  .index-part04 li .box { margin: 18px 20px 0; }
  .index-part04 li:first-child .box { margin-top: 16px; }
  .index-part04 li:nth-of-type(2) .box { margin-top: 18px; }
  .index-part04 li .box .sub { font-size: 13px; margin-bottom: 10px; }
  .index-part04 li .box .tel { font-size: 25px; letter-spacing: 0; }
  .index-part04 li .box .tel2 { font-size: 16px; margin-top: 8px; }
  .index-part04 li .box a.a1, .index-part04 li .box a.a2 {
    height: 42px; line-height: 42px; padding: 0 16px;
    margin: 0 10px 10px 0; font-size: 14px;
  }
  .index-part04 li .qr-pop { left: 14px; right: 14px; bottom: 14px; padding: 12px; }
  .index-part04 li .qr-pop .qr-holder { width: 140px; height: 140px; }
  .channel-qr-grid { gap: 6px; }
  .channel-qr-card { padding: 6px; border-radius: 10px; }
  .channel-qr-card img,
  .channel-qr-card .qr-holder { max-width: none; }
  .channel-qr-card strong { font-size: 11.5px; }
  .channel-qr-card > span:not(.channel-map-icon) { font-size: 9.5px; }

  /* 留言表单（首页卡 + 联系页卡） */
  .index-part04 li .box .msg-form { gap: 10px; }
  .index-part04 li .box .msg-form textarea { min-height: 84px; }

  /* 页脚 */
  .footer .fwrap { padding: 40px 0 24px; }
  .foot_logo { margin-bottom: 18px; }
  .foot_logo img { height: 38px; }
  .foot_nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin-bottom: 16px;
    line-height: 1.6;
  }
  .foot_nav a, .foot_nav span {
    margin: 0;
    font-size: 13.5px;
    white-space: nowrap;
    word-break: keep-all;
  }
  .foot_p01 { font-size: 12.5px; line-height: 1.9; }
  .foot_share { top: -32px; height: 32px; line-height: 32px; padding: 0 6px; }
  .foot_share a { width: 44px; font-size: 12px; }

  /* 内页 banner / 面包屑 */
  .inbanner { height: 220px; }
  .inbanner h1 { font-size: 26px !important; letter-spacing: 3px !important; text-indent: 3px; line-height: 1.4 !important; }
  .inbanner h1.long { font-size: 19px !important; letter-spacing: 1px !important; line-height: 1.5 !important; padding: 0 12px; }
  .inbanner p { margin-top: 8px; font-size: 11px; letter-spacing: 2px; }
  .crumb .wrap { height: 44px; font-size: 12.5px; }
  .crumb .sep { margin: 0 7px; }
  .crumb .cur { max-width: 44vw; }

  /* 公司简介页 */
  .about-grid { gap: 24px; }
  .about-grid .apic img { height: 230px; }
  .about-stats { flex-wrap: wrap; gap: 18px 0; margin-top: 24px; padding-top: 20px; }
  .about-stats .st { flex: 1 1 50%; }
  .about-stats .num { font-size: 28px; }
  .about-stats .lb { font-size: 12.5px; }
  .about-quote { margin-top: 40px; padding: 26px 20px; border-radius: 16px; }
  .about-quote p { font-size: 15px; letter-spacing: 1px; line-height: 1.95; }
  .honor-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .honor-card { padding: 22px 12px; border-radius: 14px; }
  .honor-card .year { font-size: 28px; }
  .honor-card p { margin-top: 10px; font-size: 13px; line-height: 1.6; }
  .value-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .value-card { padding: 22px 16px; border-radius: 14px; }
  .value-card .no { width: 36px; height: 36px; font-size: 15px; }
  .value-card h3 { font-size: 16px; margin-top: 12px; }
  .value-card p { font-size: 12.5px; line-height: 1.75; }

  /* 产品展示列表 */
  .prod-filter span { font-size: 14px; padding: 12px 0; }
  .prod-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .prod-card { border-radius: 14px; }
  .prod-card .tag { top: 10px; left: 10px; font-size: 11px; padding: 4px 11px; }
  .prod-card .info { padding: 14px 12px 16px; }
  .prod-card .info h3 { font-size: 15.5px; letter-spacing: 0; line-height: 1.45; }
  .prod-card .info .ds {
    margin-top: 6px; font-size: 12px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .prod-card .info .price { margin-top: 10px; font-size: 19px; }
  .prod-card .info .price small { font-size: 11px; }
  .prod-note { margin-top: 32px; padding: 18px 16px; border-radius: 14px; font-size: 12.5px; }

  /* 制酒工艺页 */
  .craft-steps { gap: 12px; }
  .craft-step { padding: 24px 18px 22px; border-radius: 14px; }
  .craft-step .no { width: 44px; height: 44px; font-size: 16px; }
  .craft-step h3 { font-size: 17px; margin-top: 12px; letter-spacing: 1px; }
  .craft-step p { margin-top: 10px; font-size: 13px; line-height: 1.8; }
  .craft-row { gap: 18px; margin-top: 40px; }
  .craft-row .rpic img { height: 210px; }
  .craft-row h3 { font-size: 21px; letter-spacing: 1px; }
  .craft-row .para { margin-top: 14px; font-size: 14px; line-height: 1.9; }

  /* 联系页 */
  .contact-cards { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 28px; }
  .contact-card { padding: 20px 14px; border-radius: 14px; }
  .contact-card .ico { width: 40px; height: 40px; font-size: 16px; }
  .contact-card h3 { margin-top: 12px; font-size: 15px; letter-spacing: 0; }
  .contact-card p { margin-top: 6px; font-size: 12.5px; line-height: 1.7; }
  .contact-card .big { font-size: 16px; }
  .contact-map { margin-bottom: 30px; padding: 16px; border-radius: 14px; }
  .contact-map-head { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 14px; }
  .contact-map-head h2 { font-size: 20px !important; }
  .contact-map-head p { font-size: 12.5px; }
  .contact-map-head a { min-height: 38px; padding: 0 15px; font-size: 13px; }
  .tdt-map { height: 300px; }
  .tdt-map-card { min-width: 190px; max-width: 250px; padding: 8px 10px; }
  .tdt-map-bottom > div small { display: none; }
  .form-card { padding: 26px 18px 30px; border-radius: 16px; }
  .form-card .ftit { margin-bottom: 22px; }
  .form-card .ftit h2 { font-size: 21px !important; }
  .form-card .ftit p { font-size: 12.5px; letter-spacing: 1px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card input, .form-card textarea {
    margin-bottom: 12px; padding: 13px 14px; font-size: 15px; border-radius: 8px;
  }
  .form-card button { height: 48px; font-size: 15px; letter-spacing: 4px; text-indent: 4px; }

  /* 详情页（产品 / 资讯共用） */
  .detail-body { margin-top: 28px; }
  .pd-hero { gap: 20px; }
  .pd-hero .pic { max-width: 100%; padding: 14px; border-radius: 16px; }
  .pd-hero .bd .tag { font-size: 12px; padding: 5px 13px; }
  .pd-hero .bd h2 { font-size: 22px !important; margin-top: 12px; letter-spacing: 1px; }
  .pd-hero .bd .price { font-size: 25px; margin-top: 12px; }
  .pd-hero .bd .price em { font-size: 15px; }
  .pd-hero .bd .intro { margin-top: 14px; font-size: 13.5px; line-height: 1.95; }
  .pd-detail { margin-top: 32px; }
  .pd-detail > h3 { font-size: 18px; padding-bottom: 10px; margin-bottom: 18px; }
  .article-body { font-size: 14.5px; line-height: 1.95; }
  .article-body h2 { font-size: 19px !important; margin: 22px 0 10px; }
  .article-body h3 { font-size: 16px !important; margin: 18px 0 8px; }
  .nd-page .nd-title { font-size: 20px !important; line-height: 1.55 !important; }
  .nd-date { font-size: 13px; }
  .nd-lead { margin-top: 14px; font-size: 13.5px; line-height: 1.9; }
  .nd-back { margin-top: 36px; }
  .article-faqs { margin-top: 36px; padding-top: 24px; }
  .article-faqs h3 { font-size: 17px !important; }
  .article-faqs strong { font-size: 14.5px; }
  .article-faqs p { font-size: 13.5px; line-height: 1.85; }

  /* 新闻列表页的「查看更多」按钮在窄屏下过大 */
  .news-list-page .bd .btn-more { margin-top: 12px; padding: 9px 20px; font-size: 13px; }
  .page-more { margin-top: 36px; font-size: 13px; }
}

/* ── ④ 细节收口（≤560px）───────────────────────────────────────────────── */
@media (max-width: 560px) {
  .wrap { max-width: 94%; }
  .page-sec { padding: 38px 0; }

  /* 页头：logo 163px + AI 42 + 登录 ~50 + 汉堡 44 + 间隙，正好卡在 359px 内 */
  .logo img { height: 36px; }
  .header-user { margin-left: 8px; }
  .mnav-btn { margin-left: 8px; }
  .hu-login { padding: 0 12px; font-size: 13px; }

  /* 首页 banner 圆点再收一档（图更小，圆点会挤到产品图上） */
  .index_banner .banner .dots { bottom: 8px; gap: 12px; }

  /* 服务区药丸按钮：一行两个，避免第三个单独掉到第二行左侧 */
  .index-part04 li .box .ch { display: contents; }
  .index-part04 li .box a.a1, .index-part04 li .box a.a2 { margin-right: 8px; }

  /* 上/下篇 + 分页 */
  .pager { gap: 6px; }
  .pg { min-width: 0; padding: 0 12px; height: 38px; font-size: 13px; }

  .contact-map { padding: 12px; }
  .tdt-map { height: 260px; }
  .tdt-map-tools { right: 9px; top: 9px; }
  .tdt-map-tools button { width: 34px; height: 34px; }
  .tdt-map-bottom { left: 9px; right: 9px; bottom: 9px; }
  .tdt-map-bottom a { min-height: 34px; padding: 0 13px; font-size: 12px; }

  /* 关于页荣誉卡在 320px 级屏幕仍要能两列 */
  .honor-grid, .value-grid { grid-template-columns: 1fr 1fr; }
}

/* ── ⑤ 横屏（手机横过来）与超窄屏兜底 ──────────────────────────────────────
 * 横屏 700×390 时 ≤900 的 banner 比例规则会把图压得很扁 ——
 * 改用 62vw 高度并回到 cover，保证画面有内容。
 */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 480px) {
  .index_banner .banner { aspect-ratio: auto; height: 62vw; }
  .index_banner .banner .slide { background-size: cover; background-position: 38% center; }
}

/* ════════════ 运行时页（商城/购物车/登录）页头必须实底白（2026-10-28）════════════
 * 症状（客户截图）：`/products` 与商品详情页往下滚时，「商品图/价格」像压在导航栏上，
 *   导航文字与 logo 直接浮在商品图上 —— 看着像被商品挡住了。
 * 成因（抓 runtime.css 核过，不是猜）：模板里有一条
 *   `html:not([data-header-scrolled=true]) body:has(main[data-inner-page]) [data-header-root=domestic]{
 *      box-shadow:none; background-color:#0000 }`
 *   —— 模板的内页页头设计是「顶部透明、hover 变白」，靠 `<html data-header-scrolled>` 这个开关量切。
 *   站点自有页由 `site-header.tsx` 的 useEffect 补属性；**运行时页不水合站点 React**，
 *   属性永远缺 ⇒ 那条规则一直命中 ⇒ 页头背景透明，下面的商品就"透"出来了。
 *   （`elementFromPoint` 仍然命中 header —— 命中测试没问题，是**背景没画**，所以之前查 z-index 一无所获。）
 *
 * 主修：SSR 时就把开关量写进 `<html>`（见 `runtime-page.tsx` / `document.ts`）。
 * 这里再补一条兜底：`:has(#mw3-rt-slot)` 带 id 权重 (1,1,1)，稳压模板那条 (0,3,3)，
 * 将来模板改选择器、或片段容器换个写法，也不会再退回透明。
 * ⚠️ 别改成 `.header{background:#fff!important}` —— 会连模板的「极简移动头」「内页透明头」一起拍死，
 *    那是别的站点形态要用的设计。
 */
html:has(#mw3-rt-slot) [data-header-root='domestic'] {
  background-color: #fff;
  box-shadow: 0 0 10px 5px rgba(0, 0, 0, .1);
}


/* ════════════ 企业资质页（2026-10-28 客户要求：页脚「企业资质」入口）════════════
 * 版式参考同门站资质页（标题块 → 登记信息卡 → 证照/荣誉 → 底部说明），
 * 但类名是本工程自己的（参考站那套 section/container/cert-wall 是别的站模板的样式表，搬过来没有规则）。
 */
.qual-lead {
  max-width: 980px; margin: -28px auto 44px;
  text-align: center; font-size: 15px; line-height: 1.95; color: #888;
}
/* auto-fit：平台把「统一社会信用代码 / 法定代表人 / 成立日期」填上之后卡片会变 4–6 张，
   写死 4 列会留空位（当前只有 3 张登记项）⇒ 按最小宽度自动铺满一行。 */
.qual-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px;
}
.qual-item {
  min-width: 0; padding: 22px 24px; border-radius: 14px; background: #f7f7f7;
}
.qual-item .k {
  display: block; margin-bottom: 8px;
  font-size: 12.5px; color: #999; letter-spacing: 1px;
}
.qual-item .v {
  display: block; font-size: 16px; font-weight: 700; color: #111;
  line-height: 1.55; word-break: break-word;
}

.qual-block { margin-top: 62px; }
.qual-block > h3 {
  margin-bottom: 26px; padding-left: 14px; border-left: 4px solid var(--red);
  font-size: 22px; font-weight: 700; letter-spacing: 1px; line-height: 1.2;
}

/* 证照墙：`auto-fit` + `justify-content:center` —— 写死 4 列时，只有 1 张证照就会孤零零贴在
 * 左边、占 1/4 宽（客户 2026-10-28 反馈"证书图片没有展示出来"，其中一半是"看见了但小得像缩略图"）。
 * auto-fit 会把空轨道塌掉 ⇒ 1 张时只有一条 360px 的轨道并居中；多张时按容器宽自动排 2–3 列。
 * ⚠️ 别改回 `repeat(4, 1fr)`：那会让单张证照永远只占 1/4 宽。 */
.cert-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 420px));
  justify-content: center;
  gap: 22px;
}
.cert-item {
  margin: 0; padding: 12px; border-radius: 14px; background: #f7f7f7; text-align: center;
  transition: transform .3s, box-shadow .3s;
}
.cert-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.cert-item img { display: block; width: 100%; height: auto; border-radius: 8px; background: #fff; }
.cert-item figcaption { margin-top: 10px; font-size: 13.5px; color: #666; }

/* 证照缩略图 = 按钮（2026-10-28 客户要求"点击营业执照放大"）
 * 🔴 包 <button> 而不是给 <img> 绑 onClick：键盘能 Tab 到、回车能开，读屏会念"放大查看：营业执照"。
 * 按钮要复位成"什么都没有"的样子（透明底/无边框/零内边距），否则浏览器默认灰底会把图糊一圈。 */
.cert-zoom {
  position: relative; display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in; border-radius: 8px; overflow: hidden; line-height: 0;
}
.cert-zoom:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
/* 悬停/聚焦时浮出"点击放大"，触屏没有 hover 所以只在 :focus-visible 也显示 */
.cert-zoom-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  font-size: 12.5px; line-height: 1.2; color: #fff; background: rgba(0, 0, 0, .62);
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
.cert-item:hover .cert-zoom-hint,
.cert-zoom:focus-visible .cert-zoom-hint { opacity: 1; }

/* ════════════ 图片放大遮罩（灯箱）════════════
 * 层级 2000：压过页头（1001）、回顶（99）与客服球（1200）—— 看证照时不该被别的东西挡住。
 * 点遮罩空白处关闭；点图片本身不关（看细节时容易误触）。 */
.zoom-mask {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 4vmin; background: rgba(0, 0, 0, .88);
  cursor: zoom-out; animation: zoomFade .18s ease-out;
}
.zoom-mask img {
  max-width: 92vw; max-height: 92vh; width: auto; height: auto;
  border-radius: 6px; background: #fff; box-shadow: 0 24px 80px rgba(0, 0, 0, .55);
  cursor: default;
}
.zoom-close {
  position: fixed; top: 16px; right: 16px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s;
}
.zoom-close:hover { background: rgba(255, 255, 255, .3); }
.zoom-close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.zoom-cap {
  position: fixed; left: 0; right: 0; bottom: 18px; text-align: center;
  font-size: 14px; color: rgba(255, 255, 255, .82); letter-spacing: 1px;
}
@keyframes zoomFade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 560px) {
  .zoom-mask { padding: 12px; }
  .zoom-mask img { max-width: 96vw; max-height: 88vh; }
}

.qual-note {
  margin-top: 54px; padding-top: 26px; border-top: 1px solid #eee;
  text-align: center; font-size: 13.5px; line-height: 1.9; color: #999;
}
.qual-note a { color: var(--red); }
.qual-note a:hover { text-decoration: underline; }

/* 页脚「| 技术支持：万商云集 | 企业资质」之间的分隔（2026-10-28）——
   原来靠裸文本 "|"，与两边文字黏在一起（截图里是「…号-1|技术支持：万商云集企业资质」）。 */
.foot_sep { margin: 0 10px; color: #c9c9c9; }

@media (max-width: 1100px) {
  .qual-grid { grid-template-columns: repeat(2, 1fr); }
  /* 证照墙保持"卡片定宽 + 居中"，别拉成半屏宽 */
  .cert-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 340px)); }
}
@media (max-width: 560px) {
  .qual-grid, .cert-grid { grid-template-columns: 1fr; }
  .qual-lead { margin: -18px auto 32px; font-size: 14px; }
  .qual-block { margin-top: 44px; }
  .qual-block > h3 { font-size: 19px; }
  .qual-item { padding: 18px 18px; }
}

/* ════════════ 桌面导航宽度自适应（2026-10-28 客户反馈"不同屏幕宽度下导航挤乱"）════════════
 * 病因：导航链接是客户 2026-10-12 要求放大加粗后的 **20px**（见上面 .nav > ul > li > a 那条），
 *       7 项 + 热线 + AI 按钮在 wrap 上限 1510px 下已经贴边（实测 1920 视口约 1488/1510）；
 *       之前再多一个「登录」（≈90px）就直接溢出 ⇒ flex 把 li 压扁、文字竖排、盖到 logo 上。
 * 修法：① 链接一律 `white-space: nowrap`（**永不换行**，宁可缩字号）；
 *       ② 1281–1599 按宽度分三档收缩（字号 / 内外边距 / 热线），1280 以下沿用原型（nav 隐藏）；
 *       ③ ≤1365 断掉热线（导航优先 —— 热线在页脚和联系页都有）。
 * ⚠️ 三条媒体查询都带 `min-width: 1281px`：否则在 ≤1280 时会盖掉"AI 按钮 margin-left:auto 靠右"那条。
 */
.nav > ul > li > a { white-space: nowrap; }

@media (min-width: 1281px) and (max-width: 1599px) {
  .nav > ul > li { margin: 0 14px; }
  .nav > ul > li > a { font-size: 17px; }
  .header-hot { margin-left: 18px; padding-left: 18px; }
  .header-hot .v { font-size: 18px; }
  .ai-btn { margin-left: 16px; padding: 0 16px 0 13px; font-size: 14px; }
}
@media (min-width: 1281px) and (max-width: 1439px) {
  .nav > ul > li { margin: 0 10px; }
  .nav > ul > li > a { font-size: 16px; }
  .header-hot { margin-left: 14px; padding-left: 14px; }
  .header-hot .v { font-size: 17px; }
  .header-hot .k { font-size: 11px; letter-spacing: 1px; }
}
@media (min-width: 1281px) and (max-width: 1365px) {
  .header-hot { display: none; }
  .nav > ul > li { margin: 0 8px; }
}

/* ════════════ 轻支付 / 商城运行时页跟随站点主题色（2026-10-28 客户要求）════════════
 * 背景：`/products`、`/products/:slug`、`/cart`、`/checkout`、`/orders`、`/login`、`/member`
 *       这些页由**平台运行时模板（lightpay）**渲染，站点改不了它们的源码（技能 r-runtime-pages §7.4）。
 *       但模板自 v16（2026-10-26）起**统一跟随站点主题色**，取的是这两个 CSS 变量：
 *         优先 `--color-theme-primary`，兼容 `--primary`。
 *       ⇒ 站点只要在自己的样式表里把这两个变量声明好，运行时页就会跟着变色（分类胶囊、按钮、
 *         交互色与浅底都同步；**价格与订单状态保留模板自己的语义色**，那是有意为之，不动）。
 * 🔴 值必须与站点主色一致：本站 --red = #E1001F（见 style.css 的 :root）。
 *    运行时页同样是站点拼的整份文档、同样引用本文件 ⇒ 变量在 :root 上写一次就够。
 */
:root {
  --color-theme-primary: #E1001F;
  --primary: #E1001F;
}

/* ════════════ 运行时页（轻支付）内的标题与商品详情栅格（2026-10-28 客户要求）════════════
 * ① 标题字号：站点 style.css 第 619 行 `h1, h2, .about-intro .in-h { … !important; font-size: 52px }`
 *    是给**站点自有页面**钉的（原型要求）。这条 !important 会一起盖到运行时模板的页面上
 *    ⇒ 商品详情页的 H1（商品标题）被顶成 52px、H2（"参数信息/图文详情"）也是 52px。
 *    修法：只在运行时插槽 `#mw3-rt-slot` 作用域内拉回来，站点自有页**一个字不动**。
 *    客户 2026-10-28 指定 H1 = 20px。
 * ② 栅格：模板里那条类名写的是 65fr_35fr，值却写成了 `minmax(0,65fr) minmax(0,65fr)`（两列各半），
 *    客户要求按类名本意改成 65 / 35。
 */
#mw3-rt-slot h1 {
  font-size: 20px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
/* H2 同源污染（模板本意 18px）：客户只点名 H1，这里按模板原意拉回，避免同一页出现 52px 的怪标题 */
#mw3-rt-slot h2 {
  font-size: 18px !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
/* 移动端（<1024）模板本来就单列，别把字号再压小；只在桌面断点修栅格 */
@media (min-width: 1024px) {
  #mw3-rt-slot .lg\:grid-cols-\[minmax\(0\,65fr\)_minmax\(0\,35fr\)\] {
    grid-template-columns: minmax(0, 65fr) minmax(0, 35fr) !important;
  }
}

/* ════════════ 商品详情页主图：正方形展示（2026-10-28 客户要求）════════════
 * 现状：图库三层 track / viewport / slide 的高都是 613px（由主图原始比例撑出来，706×613 ≈ 1.15:1），
 *       `aspect-ratio` 是 auto ⇒ 只能逐层压。
 * 做法：给 viewport 定 `aspect-ratio: 1/1`（高度由宽度算出来），再把 track / slide / 主图 拉满 100%，
 *       主图用 **`object-fit: contain`**（不是 cover）：商品图是白底图，contain 让整张图完整落在正方形里，
 *       **不会把包装上的"酒精精度 / 净含量"裁掉**（cover 会左右各裁约 53px，实测会把那行字切掉一半）。
 * ⚠️ 只作用于运行时插槽；缩略图列（同为 .shop-gallery-media）用 `>` 直接子代限定，不受影响。
 */
#mw3-rt-slot .shop-gallery-viewport {
  aspect-ratio: 1 / 1 !important;
  height: auto !important;
  background: #fff;
}
#mw3-rt-slot .shop-gallery-track,
#mw3-rt-slot .shop-gallery-slide {
  height: 100% !important;
}
#mw3-rt-slot .shop-gallery-slide > .shop-gallery-media {
  height: 100% !important;
  width: 100% !important;
  object-fit: contain !important;
}