/* ===================================================================
 * mobile-v5.css —— 手机 / 平板端布局修复 + 触控优化 + 底部「栏目导航栏」样式
 * -------------------------------------------------------------------
 * 加载顺序在所有打包样式之后，采用「同权重 + 后置覆盖」的方式修正，
 * **不改动打包产物**（index-*.css / index-app-*.js）。
 * 配套脚本：/assets/mobile-nav.js（注入 .bottom-nav 结构）
 *
 * 打包样式的手机端断点只有 640 / 480，641~1024 这段区间是"无人区"，
 * 而顶栏 .main-nav 在 ≤1024px 就被 display:none 隐藏且没有替代方案，
 * 所以本文件同时负责补齐 641~1024 的布局与导航。
 * =================================================================== */

/* ===================================================================
 * 一、修复「1fr 轨道被下拉框 min-content 撑爆」造成的横向溢出
 * -------------------------------------------------------------------
 * 根因：grid-template-columns:1fr 等价于 minmax(auto,1fr)，下限是该元素
 * 的 min-content。类目下拉框最长选项（如
 * "🧱 非金属矿物制品及复合材料｜工业品与原材料"）使 <select> 的
 * min-content ≈ 368px，于是轨道无法收缩，直接把卡片顶出屏幕：
 *   · 首页   → 被 .hero 的 overflow:hidden 裁掉，下拉框右侧被切
 *   · 目录页 → 整页横向滚动（390px 视口下文档宽 404px）
 *   · 详情页 → .product-detail-grid 单列变 377px，卡片越出右边界
 *   · 工厂页 → .two-col 左栏被压成 12px，卡片挤成一条竖线
 * 修法：把轨道下限显式设为 0，或直接改为单列。
 * =================================================================== */

/* --- 1.1 三级类目：≤1024 三列等宽（去掉首列 368px 的 min-content 下限） --- */
@media (max-width: 1024px) {
  .catalog-levels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .catalog-levels label,
  .catalog-levels select { min-width: 0; }
  .catalog-levels select { width: 100%; }
}

/* --- 1.2 搜索行：≤1024 去掉固定轨道下限 --- */
@media (max-width: 1024px) {
  .catalog-main-row { grid-template-columns: minmax(0, 1.7fr) 142px 130px 140px auto; }
  .catalog-main-row .catalog-keyword,
  .catalog-main-row select { min-width: 0; }
}

/* --- 1.3 ≤860（小屏平板/大屏手机）：搜索行与两栏布局改为堆叠 --- */
@media (max-width: 860px) {
  .catalog-main-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .catalog-main-row .catalog-keyword { grid-column: 1 / -1; }
  .catalog-main-row .fc-btn { min-width: 0; justify-content: center; }

  /* 工厂页：左内容 + 320px 右栏，窄屏会饿死左栏 → 直接单栏 */
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .two-col > * { min-width: 0; }

  /* 报价列表：641~860 仍是一行摆不下，文案被省略号截断得很厉害 → 与手机端一致改为换行 */
  .quote-row { flex-wrap: wrap; gap: 10px; }
  .quote-row .qr-right { text-align: left; width: 100%; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

  /* 产业带展示区：右侧 250px 侧栏把左栏"厂家排行"挤到 ~109px，
     里面的描述文案没有省略号，是被硬生生截断的 → 改单栏 */
  .belt-showcase-grid { grid-template-columns: minmax(0, 1fr); }
}

/* --- 1.4 ≤640（手机）：三级类目改纵向单列，详情页单栏 --- */
@media (max-width: 640px) {
  .catalog-levels { grid-template-columns: minmax(0, 1fr); }
  .prod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .product-detail-grid { grid-template-columns: minmax(0, 1fr); }
  .product-detail-grid > *,
  .product-detail-main,
  .product-detail-side,
  .product-gallery-card,
  .product-info-card { min-width: 0; }
}

/* --- 1.5 641~1024：详情页两栏保留但右栏收窄，避免主栏被压太窄 --- */
@media (min-width: 641px) and (max-width: 1024px) {
  .product-detail-grid { grid-template-columns: minmax(0, 1fr) 272px; }
}

/* --- 1.6 641~860：报价广场 / 需求大厅三列太窄（每档约 190px，标题被省略号截掉一半）→ 两列
 * ⚠️ 必须限定 min-width:641px：打包样式在 ≤640 本就把这两处改成单列，
 *    若只写 max-width:860 会把手机端也强制成两列（390px 下卡片仅 176px，标题被截掉 40%）。 */
@media (min-width: 641px) and (max-width: 860px) {
  .quote-mall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .request-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- 1.7 ≤380px（iPhone SE / 老安卓）：minmax(300px,1fr) 这类轨道的下限比容器还宽 ---
 * 320px 屏可用宽 292px < 300px，会被顶出 8px，改成单列。 */
@media (max-width: 380px) {
  .demand-list,
  .response-list { grid-template-columns: minmax(0, 1fr); }
}

/* ===================================================================
 * 二、手机端排版 & 触控优化（≤640px）
 * =================================================================== */
@media (max-width: 640px) {
  /* 左右留白 20 → 14px，把可用宽度还给内容 */
  .wrap,
  .site-footer .wrap { padding-left: 14px; padding-right: 14px; }

  /* 标题层级收紧，避免小屏"头重脚轻" */
  .sec-head { margin-bottom: 16px; }
  .sec-head h2 { font-size: 20px; }
  .page-banner h1 { font-size: 23px; }

  /* 搜索卡片：内边距收紧，字段高度对齐触控标准（≥44px） */
  .catalog-filter { padding: 12px 12px 10px; border-radius: 13px; }
  .catalog-levels { gap: 9px; margin-top: 10px; }
  .catalog-levels label { font-size: 12.5px; }
  .catalog-main-row { gap: 8px; }
  .catalog-main-row select,
  .catalog-levels select,
  .catalog-keyword { min-height: 44px; }
  .catalog-main-row .fc-btn { min-height: 44px; }

  /* iOS Safari：输入框字号 <16px 时聚焦会自动放大页面，这里统一到 16px */
  input,
  textarea,
  .catalog-keyword input { font-size: 16px; }

  /* 卡片内边距微调，小屏不显得拥挤 */
  .prod-card .pc-body { padding: 11px 12px 13px; }
  .quote-row { padding: 13px 13px; }

  /* 滚到底时给底部导航预留滚动余量 */
  body { scroll-padding-bottom: 78px; }
}

/* ===================================================================
 * 三、底部「栏目导航栏」
 * -------------------------------------------------------------------
 * 打包 CSS 里已经预留了 .bottom-nav / .bn-in / .bn-item 的骨架样式，
 * 但打包产物中从未渲染这份 DOM（JS 里 "bottom-nav" 出现 0 次），
 * 所以这里：① 补齐样式；② 由 /assets/mobile-nav.js 注入结构；
 * ③ 显示区间设为 ≤1024px —— 正好补上打包 CSS 把 .main-nav 隐藏的区间。
 * =================================================================== */
.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 253, 249, 0.95);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--c-line, #e3d9cf);
  box-shadow: 0 -8px 20px -14px rgba(38, 33, 29, 0.35);
  /* 高于普通内容，但低于 .modal-mask(100) 与 .site-header(1000)，
     保证弹窗打开时能盖住底栏（打包 CSS 自己给 .bottom-nav 定义的是 60）。 */
  z-index: 90;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (max-width: 1024px) {
  .bottom-nav { display: block; }
}
.bottom-nav .bn-in {
  display: flex;
  max-width: 560px;
  margin: 0 auto;
}
.bottom-nav .bn-item {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 7px 2px 6px;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--c-ink-light, #74685d);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s;
}
.bottom-nav .bn-item svg {
  width: 21px;
  height: 21px;
  display: block;
}
.bottom-nav .bn-item.active {
  color: var(--c-primary, #c93628);
}
.bottom-nav .bn-item.active svg {
  color: var(--c-primary, #c93628);
}
/* 选中态：顶部小红条（移动端 App 的经典标识） */
.bottom-nav .bn-item.active::after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2.5px;
  border-radius: 0 0 3px 3px;
  background: var(--c-primary, #c93628);
}
.bottom-nav .bn-item:active {
  background: #f5ece3;
}
/* 底部导航出现时，页脚末尾留出空间，避免最后一行被压住 */
@media (max-width: 1024px) {
  .site-footer { padding-bottom: 88px; }
}
@media (max-width: 360px) {
  .bottom-nav .bn-item { font-size: 10px; padding-left: 0; padding-right: 0; }
  .bottom-nav .bn-item svg { width: 20px; height: 20px; }
}

/* ===================================================================
 * 三·补：底栏 8 格 / 10 格自适应收窄
 * -------------------------------------------------------------------
 * 类名由 mobile-nav.js 直接写成 .bn-<项目数>，这里逐档收窄。
 *  8 格：每格 = 视口 ÷ 8，360px 时 45px，4 字标签需 ≈46px → 收一档
 *        （字号 10px、去掉左右内边距与字距，4 字约 40px）。
 * 10 格：每格只剩 36px，4 字标签无论怎么收都放不下 → 标签已统一改成 2~3 字
 *        （见 ITEMS 注释），这里再把字号/图标各收一档，3 字 ≈ 27px，留 9px 余量。
 * 英文标签同理：Catalog/Member 这种长词已换成 Shop/Plan 等短词。
 * =================================================================== */
.bottom-nav.bn-8 .bn-item,
.bottom-nav.bn-9 .bn-item,
.bottom-nav.bn-10 .bn-item,
.bottom-nav.bn-11 .bn-item,
.bottom-nav.bn-12 .bn-item {
  font-size: 10px;
  padding-left: 0;
  padding-right: 0;
  letter-spacing: 0;
}
.bottom-nav.bn-8 .bn-item svg,
.bottom-nav.bn-9 .bn-item svg { width: 20px; height: 20px; }

/* ≥10 格再收一档 */
.bottom-nav.bn-10 .bn-item,
.bottom-nav.bn-11 .bn-item,
.bottom-nav.bn-12 .bn-item { font-size: 9.5px; }
.bottom-nav.bn-10 .bn-item svg,
.bottom-nav.bn-11 .bn-item svg,
.bottom-nav.bn-12 .bn-item svg { width: 18px; height: 18px; }

@media (max-width: 400px) {
  .bottom-nav.bn-8 .bn-item { font-size: 9.5px; }
  .bottom-nav.bn-8 .bn-item svg { width: 19px; height: 19px; }
  .bottom-nav.bn-10 .bn-item,
  .bottom-nav.bn-11 .bn-item,
  .bottom-nav.bn-12 .bn-item { font-size: 9px; }
  .bottom-nav.bn-10 .bn-item svg,
  .bottom-nav.bn-11 .bn-item svg,
  .bottom-nav.bn-12 .bn-item svg { width: 17px; height: 17px; }
}
/* ===================================================================
 * 十二、窄屏顶栏：禁止文案折行（≤360px 时 logo 与登录按钮被压成两行）
 * -------------------------------------------------------------------
 * 症状（320 / 360px）顶栏挤成：
 *     [ 翼 河北内卷 / 网 ]   [ 中文 | EN ]   [ 手机登 / 录 ]
 * 根因（都是"允许折行 + 可收缩"凑在一起）：
 *   ① .header-in 是 flex + gap:26px。320px 下可用宽度只有 320-28=292px，
 *      光两个 gap 就吃掉 52px。
 *   ② .logo-txt 与 .btn-login 都是 white-space:normal → 允许折行。
 *   ③ .logo / .header-right 是 flex:0 1 auto（可收缩），而 .i18n-switch 是
 *      flex:0 0 auto（不收缩）→ 收缩压力全转嫁给 logo 文案和登录按钮。
 *      320px 下 .btn-login 被压到仅 60px 宽，而它的左右内边距就占 32px，
 *      只剩 28px 去装「手机登录」四个字 → 折成两行、按钮高达 59px。
 * 实测失效区间：≤360px 折行；≥375px 正常。所以只改窄屏，不碰大屏。
 * 修法：
 *   ① 三个主体一律「不收缩 + 不折行」—— 宁可收窄间距，也绝不允许折行；
 *   ② gap 26px → 14px（≤360 再收到 10px）；
 *   ③ ≤360 时字号 / 内边距各收一档，保证 320px 总宽仍留有约 10px 余量。
 * ⚠️ 语言切换器用的是 .header-right .i18n-seg（0,2,0）而不是 .i18n-seg（0,1,0）：
 *    i18n.css 在 mobile-v5.css **之后**加载，同权重会被它盖掉。
 * ⚠️ 不要用 flex-wrap / column 去"容纳"折行 —— 那只会让顶栏变高、更难看。
 * =================================================================== */

@media (max-width: 640px) {
  .header-in { gap: 14px; }
  /* 明确声明：不折行。折行才是这次的缺陷本身，不是"自适应"。 */
  .btn-login { flex: 0 0 auto; white-space: nowrap; padding: 7px 12px; font-size: 13.5px; }
  .header-right { flex: 0 0 auto; }
  .header-right .i18n-switch { flex: 0 0 auto; }
  .header-right .i18n-seg { padding: 4px 6px; font-size: 12px; }
  /* 登录按钮是主 CTA，上面已锁死「不收缩」；品牌名则留一条**最后的**退路：
     切到 EN 后 i18n.js 会把「河北内卷网」在线翻译成更长的英文，中文下富余的
     空间未必够。此时宁可省略号，也绝不折行 / 溢出（overflow-x 会让整页能横向拖）。
     中文态下 320px 实测仍有约 29px 余量，所以不会真的触发省略。 */
  .logo { flex: 0 1 auto; min-width: 0; }
  .logo-txt { white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* 320px 档：再收一档字号与留白，把总宽压进可用区间 */
@media (max-width: 360px) {
  .header-in { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .logo { gap: 8px; }
  .logo-mark { width: 34px; height: 34px; border-radius: 9px; }
  .logo-mark svg { width: 27px; height: 27px; }
  .logo-txt { font-size: 15px; }
  .header-right { gap: 8px; }
  .header-right .i18n-seg { padding: 4px 5px; font-size: 11.5px; }
  .btn-login { padding: 7px 10px; font-size: 13px; }
}

@media print {
  .bottom-nav { display: none !important; }
}