/* ============================================================
   mall.css —— 页面 C（微小店商城页）+ 询价卡样式
   顶部色带（safe-top 治本 U1） / 号主体头（v58 起仅 logo + 店名） /
   分类过滤条 / 商品卡（多图视频角标 R4-08） / 询价抽屉（媒体区升级）
   v15-R3：店头介绍整栏可点 + 微小店介绍全屏弹层（v96 已随清理移除）
   v58-R3：商城介绍（简介行 + 促销语胶囊）编辑项与展示位同步下线
   询价卡 z-index(600) 在 layout.css 层级表统一维护
   ============================================================ */

/* ---------- 0. 顶部色带（R4/U1：向上延伸至页签背后，与半透明页签视觉一体） ---------- */
.page-c::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--safe-top) - 8px);
  background: linear-gradient(180deg, var(--c-primary-2), transparent);
  opacity: .15;
  z-index: 0;
}

/* ---------- 1. 号主体头 ----------
 * ⚠️ v42 起「微小店介绍」模块已整体下线，本页由 main.js 只挂 .mall-grid。
 *    v58 曾删店头简介行与促销语胶囊两条规则，其余店头死 CSS 按「死 CSS 对齐规范」保留；
 *    v96（代码清理）：店头死 CSS 与介绍弹层族、商品标签、旧询价提交按钮已确认零引用，
 *    整族移除。数据字段 jubaopen.intro / jubaopen.promo 保留不删。复活时从 git 历史或
 *    backup-pre-v96 取回。
 * v43：页签/横卡已移入固定头部（.fixed-head），页内不再让位，去 padding-top */
.mall-inner {
  background: var(--c-bg);
  position: relative;
  z-index: 1;                     /* 卡片浮于色带之上 */
}
/* ---------- 2. 分类过滤条（R6-M3 已下线：自有商品不多，纵向下滑浏览即可；
 * 样式段移除，.mall-cats/.mall-cat 不再被任何渲染器输出） ---------- */

/* ---------- 3. 商品卡列表 ----------
 * v57（核心）：单列大卡 → **双列方形小卡**（设计稿核对值：grid 1fr 1fr / gap 10px /
 *   页边距 16px；卡 1px #eef0f4 + 圆角 12 + 轻投影 + overflow hidden）。
 * v60（需求 2）：封面由**方形 1:1** 改 **16:9 矮横幅**（等宽、高度明显降低，占卡片上部一小块）；
 *   信息区固定三行：商品名 1 行 → 商品简介 1 行（无描述不渲染，不留空位）→ 价格 + 询价按钮同行；
 *   卡改 flex 列、信息区吃满剩余高度、价格行 `margin-top:auto` 贴底 ——
 *   同一行两张卡的价格行因此**基线对齐**（有简介/无简介不再一高一低）。 */
.mall-grid {
  margin: 12px 16px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.mall-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  background: var(--c-card);
  border: 1px solid var(--c-line-soft);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mall-card:active {
  transform: scale(.985);
  box-shadow: 0 2px 8px rgba(15, 43, 91, .10);
}
.mall-img-wrap { position: relative; flex: none; }
.mall-img {
  display: block;
  width: 100%;
  /* v60（需求 2）：16:9 矮横幅（原 1:1 方图 —— 双列小卡里封面过高，把信息区挤到很局促）；
     低版本内核回退见文末 @supports */
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  background: var(--c-bg);
  cursor: zoom-in;
}
/* 商品类型徽标（R6-M2 已下线：后台删除类型编辑格式，前台同步不再渲染） */
/* 多图/视频角标组（R4-08：封面右下，提示"含视频 / 共 N 图"）——v57 随小卡缩小 */
.mall-media-badges {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  gap: 4px;
}
.mall-media-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(10, 14, 22, .6);
  color: #fff;
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: .5px;
  /* v18：去 backdrop-filter（滚动重合成），提不透明度补偿 */
}
.mall-media-badge.is-video svg { width: 10px; height: 10px; }
.mall-body {
  /* v60（需求 2）：信息区改成弹性列 —— 名称/简介各自 1 行、价格行贴底（margin-top:auto），
     同一行两张卡的价格行因此基线对齐；卡片变高时多出来的空间落在名称与价格之间，视觉上"舒展"。 */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 9px 11px 11px;
}
.mall-name {
  flex: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.4;
  /* v60（需求 2）：商品名**固定一行**，超长走省略号（原两行截断 + min-height 锁高，
     在 16:9 矮横幅的新结构里会把信息区顶得很高，也与"舒展"的设计稿不符）。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* v57：商品简介在**网格小卡内不再占位**（双列小卡高度有限，一屏 4 件是硬指标）；
 * v60（需求 2）**反转**该口径：简介回到列表卡可见一行（灰色小字、超出省略号），
 *   由需求 2 的确认效果图确定；**无描述时该行整个不渲染**（JS 侧条件产出），不留空位。
 *   简介数据与详情抽屉里 .inquiry-desc 的完整展示一条未改。 */
.mall-desc {
  flex: none;
  margin-top: 3px;
  font-size: 11.5px;
  color: var(--c-text-2);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mall-foot {
  /* v60（需求 2）：价格与询价按钮**同行**（价格左、按钮右、垂直居中），贴到卡片底部 */
  margin-top: auto;
  padding-top: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.mall-price {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--c-price);
  letter-spacing: .3px;
  /* v60（需求 2）：数字已由 priceTextCompact 缩写；这里再留一层省略号兜底，
     保证任何异常长的价格文本都不会把卡片撑破相。 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mall-price.is-inquiry {
  color: var(--c-text-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
}
.mall-inquiry-btn { padding: 8px 18px; flex: none; }
/* v57：双列小卡内的询价按钮收窄（不抢占价格行） */
.mall-card .mall-inquiry-btn { padding: 6px 10px; font-size: 12px; }
/* v60（需求 2）：不支持 aspect-ratio 的内核回退（原方图 180px → 16:9 等价的 96px） */
@supports not (aspect-ratio: 16 / 9) {
  .mall-img { height: 96px; }
}

/* ---------- 4. 询价卡（半屏底部抽屉，z-index 600 见 layout.css 层级表） ---------- */
.inquiry-sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: rgba(10, 14, 22, .55);
  animation: ui-fade-in .2s ease;
}
.inquiry-panel {
  position: relative;
  background: var(--c-card);
  border-radius: 20px 20px 0 0;
  max-height: 78%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
  padding-bottom: calc(18px + var(--safe-bottom));
  will-change: transform;
}
.inquiry-panel.is-open { transform: translateY(0); }
/* v145（需求①）：深链直达 —— 抽屉首帧即终态（不做 300ms 上滑）。
   由 openInquirySheet(..., {instant:true}) 在加 is-open 前打上，下一帧移除；
   ⚠ 必须放在 .is-open 之后（同权重、后声明胜出，避免被上面的 transform 覆盖认知）。 */
.inquiry-panel.is-instant { transition: none; }
/* 把手：sticky 吸附面板顶部，touch-action:none 让手势全归 JS（跟手下滑关闭） */
.inquiry-grip {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  padding: 10px 0 6px;
  cursor: grab;
  touch-action: none;
}
.inquiry-grip-bar {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: var(--c-line);
}
.inquiry-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 3;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c-bg);
  color: var(--c-text-2);
  font-size: 15px;
  line-height: 1;
}
/* 媒体区（R4-08/U3 升级）：wrap 持边距并作箭头定位基准，mediaBox 零边距负责换片 */
.inquiry-media-wrap {
  position: relative;
  margin: 4px 16px 0;
}
.inquiry-media { margin: 0; }
/* 左右切换箭头（slides>1 时渲染） */
.inq-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(10, 14, 22, .6);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  padding: 0 0 2px;
  /* v18：去 backdrop-filter */
  transition: background .2s ease;
}
.inq-arrow:active { background: rgba(10, 14, 22, .82); }
.inq-arrow-prev { left: 10px; }
.inq-arrow-next { right: 10px; }
.inquiry-img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  border-radius: 12px;
  background: var(--c-bg);
  cursor: zoom-in;  /* 点击主图进图集灯箱（R4-08） */
}
/* 缩略图条（slides>1 时渲染：≤9 图 + 视频缩略位 ▶） */
.inquiry-thumbs {
  display: flex;
  gap: 8px;
  margin: 10px 16px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.inquiry-thumbs::-webkit-scrollbar { display: none; }
.inquiry-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 10px;
  border: 2px solid transparent;
  background: var(--c-bg);
  opacity: .62;
  overflow: hidden;
  transition: opacity .2s ease, border-color .2s ease;
}
.inquiry-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.inquiry-thumb.is-active { border-color: var(--c-gold); opacity: 1; }
.inquiry-thumb.is-video {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #16294D 0%, #0C1B38 100%);
  color: #fff;
}
.inquiry-thumb.is-video svg { width: 16px; height: 16px; }
/* 视频主位播放占位卡（与主图同高，点击进 gallery 播放） */
.inquiry-video-ph {
  width: 100%;
  height: 190px;
  border-radius: 12px;
  background: linear-gradient(150deg, #16294D 0%, #0C1B38 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.inquiry-video-play {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .85);
  background: rgba(15, 43, 91, .55);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inquiry-video-play svg { width: 22px; height: 22px; margin-left: 3px; }
/* v59（需求 2）：商品宣传视频无封面图 —— 用 <video> 首帧当封面。
   封面绝对铺满占位卡；播放图标由 flex 居中并抬到封面之上。 */
.inquiry-video-ph { position: relative; overflow: hidden; }
.inquiry-video-cover {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.inquiry-video-play { position: relative; z-index: 1; }
.inquiry-name {
  margin: 12px 16px 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: .5px;
}
.inquiry-tags {
  margin: 8px 16px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.inquiry-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--c-gold-soft);
  color: var(--c-gold);
  font-size: 11px;
  letter-spacing: .5px;
}
.inquiry-price {
  margin: 8px 16px 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--c-danger);
}
.inquiry-price.is-inquiry {
  color: var(--c-gold);
  font-size: 15px;
  letter-spacing: 2px;
}
.inquiry-desc {
  margin: 10px 16px 0;
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.8;
  text-align: justify;
}
.inquiry-note {
  margin: 12px 16px 0;
  font-size: 11px;
  color: var(--c-text-3);
  line-height: 1.7;
}
.inquiry-report {
  margin: 10px 16px 0;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 11px;
  color: var(--c-text-3);
  cursor: pointer;
}
/* ---------- 4b. 在线询价表单（v34 第7步：访客填电话 + 留言 → 商家后台线索列表） ----------
   沿用抽屉既有视觉：卡片底色 + --c-line 描边 + --c-gold 聚焦，与 .inquiry-* 同族。 */
.inquiry-form {
  margin: 14px 16px 0;
  padding: 14px 14px 16px;
  border-radius: 14px;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
}
.inquiry-form-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: .5px;
}
.inquiry-form-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--c-text-3);
  line-height: 1.7;
}
.inq-form-field { margin-top: 10px; }
.inq-input,
.inq-textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-text);
  font-size: 14px;
  font-family: inherit;
  line-height: 1.6;
}
.inq-input:focus,
.inq-textarea:focus { border-color: var(--c-gold); outline: none; }
.inq-textarea { resize: vertical; min-height: 72px; }
.inq-submit { display: block; width: 100%; margin-top: 12px; padding: 12px; }
.inq-submit:disabled { opacity: .6; }
/* 提交成功回执（就地替换表单块，避免误以为未提交成功而重复点） */
.inq-done {
  margin: 14px 16px 0;
  padding: 18px 14px;
  border-radius: 14px;
  background: var(--c-gold-soft);
  text-align: center;
}
.inq-done-ico {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--c-gold);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 40px;
}
.inq-done-title { margin-top: 8px; font-size: 15px; font-weight: 800; color: var(--c-text); }
.inq-done-desc { margin-top: 4px; font-size: 12px; color: var(--c-text-2); line-height: 1.7; }

/* ---------- 4b-2. v60（需求 3）留言登录门槛（未登录 / 未注册访客） ----------
   未登录时抽屉里**不渲染留言表单**，改渲染 .inquiry-gate（沿用 .inquiry-form 底座）。
   v71（用户指令①）：悬浮弹窗整体下线 —— 登录 /
   未登录都不再弹悬浮提示；已登录用户由 JS 复核会话后直接换回留言表单。
   文案与按钮由 JS 产出，本段只管外观。 */
.inq-gate-main {
  margin-top: 8px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.6;
}
.inq-gate-sub {
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--c-text-3);
  line-height: 1.7;
}
.inq-gate-acts {
  margin-top: 12px;
  display: flex;
  gap: 10px;
}
.inq-gate-btn { flex: 1; padding: 11px 8px; }
/* v71：弹窗下线后，原弹层专属样式（弹层类 / 关闭按钮类）已整体删除，此处不再保留。 */

/* 企业联系方式区（PRD §4.4 P0 / Q7：自动取名片 Hero 的电话/微信/邮箱）
 * v61（需求 4）：**邮箱行删除**（只留电话/微信），两行可点击复制 */
.inquiry-contact {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--c-bg);
}
.inquiry-contact-title {
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-3);
  letter-spacing: 2px;
}
.inquiry-contact-row {
  font-size: 13px;
  color: var(--c-text-2);
  line-height: 1.9;
}
/* v61（需求 4）：电话/微信行「点击即复制」—— 轻量可点暗示与按压反馈，不加图标不改版式 */
.inquiry-contact-row.is-copy {
  cursor: pointer;
  border-radius: 6px;
  margin: 0 -6px;
  padding: 0 6px;
  -webkit-tap-highlight-color: transparent;
}
.inquiry-contact-row.is-copy:active { background: rgba(15, 43, 91, .08); }
.inquiry-contact-row.is-copy:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 1px; }

/* 动作按钮组（v58 需求 6）：**只剩「拨打电话」一个动作** ——
   原 ①复制询价信息（主）②复制微信号 ③发送邮件 与顶部「转发」全部下线，
   故由「1fr 1fr 双列网格」收敛为**单列通栏主按钮**：详情面板的主互动已交给
   抽屉内的「留言」表单（.inquiry-form），本按钮是"想直接打电话"的快捷通道。
   电话缺失时整组不渲染（JS 侧判断，不留空壳按钮行）。 */
.inquiry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 14px 16px 0;
}
/* v70（需求 2）：两键（拨打电话 + 分享）**并排等宽** —— 由渲染端显式加 .is-duo 声明，
   刻意不用 `:has()`（微信 X5 内核支持不可靠，不能用"现代 CSS"赌真机）。 */
.inquiry-actions.is-duo { grid-template-columns: 1fr 1fr; }
.inquiry-act {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 12px 8px;
  border-radius: var(--radius-btn);
  /* v58：唯一动作 → 主按钮观感（与 .btn-primary 同族深蓝渐变），不再是并列的次级按钮 */
  border: 0;
  background: linear-gradient(135deg, var(--c-primary-2), var(--c-primary));
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .5px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 43, 91, .18);
}
.inquiry-act:active { opacity: .82; }
/* v70（需求 2）：次级动作（分享）—— 描边浅底，与主键「拨打电话」形成明确主次。
   配色全部走主题 token（--c-card / --c-line / --c-primary / --c-line-soft），
   五套主题与两套风格自由组合下都不会跑色。 */
.inquiry-act.is-ghost {
  border: 1px solid var(--c-line);
  background: var(--c-card);
  color: var(--c-primary);
  box-shadow: none;
}
.inquiry-act.is-ghost:active { background: var(--c-line-soft); opacity: 1; }

/* ---------- v58（需求 6）：`.mall-share-btn` 家族规则**已整体删除** ----------
 * 原 v40（P0-6）商品「转发」按钮的两处用法：
 *   ① 商品卡右上角浮标 —— v42 已随「商品级转发」整体下线（page-mall.js 只留空 stub）；
 *   ② 询价抽屉内（`.is-panel`）—— v58 需求 6 把「转发」入口连图标常量一并删除。
 * 两处渲染点都不再存在，保留样式只会让后人误判"这里还有个转发按钮"，故连类名一起删。
 * 全库 grep 复核：仅 inquiry.js 的注释提及，无任何渲染器输出该类。 */