/* ==========================================================================
   酒界 · 移动端（H5）适配层
   --------------------------------------------------------------------------
   设计原则
   1. 只做「移动端补偿」——所有规则包在 @media (max-width: 767px) 内，
      PC 端（≥768px）表现与接入前 100% 一致，避免影响已上线的桌面版。
   2. 不改 style.css（3635 行，脆弱）——本文件在其后加载，靠同权重后置覆盖。
   3. 移动端新增的 DOM（.m-topbar / .m-drawer）默认 display:none，
      仅在小屏显示，PC 端零影响。
   4. 修复目标来自 375px 真机实测：13 项主导航被裁 7 项、搜索框右侧按钮溢出、
      商品牌价条内容被裁、行情表格溢出。
   ========================================================================== */

/* ---------- 0. 移动专有元素：PC 端恒隐藏 ---------- */
.m-topbar,
.m-drawer { display: none; }

/* 抽屉打开时锁滚动（JS 加在 body 上；PC 端不会触发） */
body.m-lock { overflow: hidden; }

/* ==========================================================================
   小屏适配（≤767px）
   ========================================================================== */
@media (max-width: 767px) {

  /* ---------- 1. 基础 ---------- */
  /* ⚠️ 只在 body 上设 overflow-x:hidden 是无效的——移动端横向滚动由 html 决定，
     必须同时作用在 html 上，否则个别页面（如 /consign，实测 scrollWidth 398 > 360）
     仍能被左右拖动。 */
  html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
  body { overflow-x: hidden; }
  img, video, iframe { max-width: 100%; height: auto; }
  .jj-container { padding-left: 12px; padding-right: 12px; }

  /* 移动端顶栏（替代 PC 的 top-bar + logo 区） */
  .m-topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 10px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 1040;
  }
  .m-logo { flex: 1; display: flex; align-items: center; justify-content: center; min-width: 0; }
  .m-logo img { height: 34px; width: auto; }
  .m-top-actions { display: flex; align-items: center; gap: 2px; }
  .m-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    background: transparent;
    color: var(--text-main);
    font-size: 1.35rem;
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
  }
  .m-icon-btn:active { background: #f6f1ee; }
  .m-badge {
    position: absolute;
    top: 4px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--wine-red);
    color: #fff;
    font-size: 0.65rem;
    line-height: 16px;
    text-align: center;
    font-style: normal;
  }

  /* ---------- 2. 顶部通栏 / 搜索区 ---------- */
  .top-bar { display: none; }

  .header-main { padding: 10px 0; }
  .header-inner { flex-wrap: wrap; gap: 6px; }
  /* logo / 二维码 / 登录注册 已由 .m-topbar 承担，此处移除以免重复占高 */
  .header-inner > .logo,
  .header-inner > .header-qrcode,
  .header-inner > .header-actions { display: none; }
  .header-search { flex: 1 1 100%; max-width: none; order: 1; }

  /* 搜索框：PC 端 select(110) + input + Ai + 按钮(52) 合计约 426px，
     375 视口下右侧「搜酒」按钮被裁 → 收窄各部分并隐藏 Ai 入口 */
  .search-container { border-radius: 44px; border-width: 1.5px; }
  .search-category-select,
  .search-container select { width: 88px; padding: 11px 24px 11px 12px; font-size: 0.85rem; }
  .search-input { padding: 11px 10px; font-size: 0.88rem; min-width: 0; }
  .ai-icon-link { display: none; }
  .search-btn { padding: 0 16px; font-size: 0.88rem; border-radius: 0 44px 44px 0; }
  .search-btn i { font-size: 0.95rem; }

  .hot-keyword { margin-top: 7px; font-size: 0.75rem; gap: 2px; }
  .hot-keyword a { margin-right: 10px; }

  /* ---------- 3. 主导航：13 项横向滚动 + 两侧渐隐提示 ---------- */
  .nav-main { position: static; }
  .nav-inner { height: 46px; gap: 0; }
  .nav-menu {
    /* 移动端不再均分，改为内容宽度 + 横滑，配合抽屉菜单保证 13 项全部可达 */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 26px), transparent 100%);
  }
  .nav-menu li { flex: 0 0 auto; scroll-snap-align: start; }
  .nav-menu li a {
    padding: 0 14px;
    line-height: 46px;
    font-size: 0.88rem;
    font-weight: 600;
  }
  .nav-phone { display: none; }

  /* ---------- 4. 抽屉菜单 ---------- */
  .m-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 2000;
    visibility: hidden;
    pointer-events: none;
  }
  .m-drawer.open { visibility: visible; pointer-events: auto; }
  .m-drawer-mask {
    position: absolute;
    inset: 0;
    background: rgba(20, 10, 8, 0.5);
    opacity: 0;
    transition: opacity 0.26s ease;
  }
  .m-drawer.open .m-drawer-mask { opacity: 1; }
  .m-drawer-panel {
    position: absolute;
    top: 0; left: 0;
    width: 80%;
    max-width: 320px;
    height: 100%;
    background: #fff;
    box-shadow: 6px 0 30px rgba(40, 10, 5, 0.22);
    display: flex;
    flex-direction: column;
    transform: translateX(-102%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    overscroll-behavior: contain;
  }
  .m-drawer.open .m-drawer-panel { transform: translateX(0); }
  .m-drawer-head {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 12px 12px 16px;
    border-bottom: 1px solid var(--line);
  }
  .m-drawer-head img { height: 30px; width: auto; }
  .m-drawer-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
  .m-drawer-title {
    padding: 14px 16px 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--text-muted);
  }
  .m-drawer-nav { display: flex; flex-direction: column; }
  .m-drawer-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 600;
    border-bottom: 1px solid #f6f1ee;
  }
  .m-drawer-nav a i { color: #c9b8b0; font-size: 0.8rem; }
  .m-drawer-nav a.active { color: var(--wine-red); background: #fdf4f0; }
  .m-drawer-nav a:active { background: #f8f3f0; }
  .m-drawer-nav-sub a { font-size: 0.9rem; font-weight: 500; color: var(--text-sub); }
  .m-drawer-phone {
    margin: 16px 16px 0;
    padding: 12px;
    border-radius: 12px;
    background: #fdf4f0;
    color: var(--wine-red);
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
  }

  /* ---------- 5. 公告条 ---------- */
  .notice-bar { padding: 8px 0; font-size: 0.78rem; }
  .notice-bar a { font-size: 0.78rem; }

  /* ---------- 6. 商品卡：价格区不再被裁 ---------- */
  /* PC 端各价格元素都是 white-space:nowrap 且横排，卡片在移动端仅 ~160px 宽
     （Bootstrap col-6 两列），实测内部需 192px → 最低价行被 overflow:hidden 切掉。
     解法：价格横排允许换行 + 整体缩一号字 + 收窄内边距。 */
  .product-card { border-radius: 14px; }
  .product-info { padding: 11px; }
  .product-title { font-size: 0.88rem; margin-bottom: 8px; }
  .price-compare { flex-wrap: wrap; gap: 3px; }
  .price-item { font-size: 0.66rem; padding: 2px 5px; }
  .lowest-row { flex-wrap: wrap; row-gap: 5px; gap: 5px; }
  .lowest-badge { font-size: 0.7rem; padding: 3px 7px; }
  .btn-compare-sm { padding: 3px 10px; font-size: 0.7rem; }
  .mall-brand { white-space: normal; overflow: visible; }

  /* ---------- 7. 首页轮播 ---------- */
  .hero-banner { border-radius: 14px; }
  .hero-banner.banner-has-image { aspect-ratio: 16 / 9; }

  /* ---------- 8. 表格类内容：横滑而非裁切 ---------- */
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { max-width: 100%; }

  /* ---------- 9. 表单 / 按钮 / 弹窗 ---------- */
  input, select, textarea { font-size: 16px; } /* 阻止 iOS 聚焦时页面自动放大 */
  .btn { font-size: 0.9rem; }
  .modal { max-width: 100%; width: calc(100% - 24px); padding: 18px 16px; }
  .jj-modal-backdrop .modal { margin: 0 auto; }

  /* ---------- 10. 页脚 ---------- */
  .vip-cta { padding: 30px 0; }
  .vip-cta h2 { font-size: 1.25rem; }
  .footer-main { padding: 30px 0 16px; }
  .footer-inner { gap: 22px; }
  .copyright { font-size: 0.75rem; line-height: 1.7; }

  /* ---------- 11. 长内容防溢出兜底 ---------- */
  /* 富文本正文里的宽表格 / 长英文 / 长 URL 是移动端横向溢出的头号来源 */
  .br-article, .bgd-article, .news-content, .sp-detail, .article-content {
    overflow-wrap: break-word;
    word-break: break-word;
  }
  .br-article table, .bgd-article table { display: block; overflow-x: auto; }

  /* ---------- 12. flex 子项防撑破（服务栏目共用） ---------- */
  /* ⚠️ 经典陷阱：flex 子项默认 min-width:auto，即使写了 flex:0 0 100%，
     只要内容（长酒名 / 不换行文字 / 定宽图片）比容器宽，子项就会被撑开，
     再被父级 overflow:hidden 悄悄裁掉右侧——实测 /consign 的「热门酒款」卡
     容器 288px 而卡片被撑到 362px（右侧切掉 74px）。
     解法：显式 min-width:0 允许收缩 + 文字断行。 */
  .hot-wines-grid,
  .hot-wine-card { min-width: 0; max-width: 100%; }
  .hot-wine-card { box-sizing: border-box; }
  .hot-wine-title { overflow-wrap: break-word; word-break: break-word; }

  /* ---------- 13. 会员中心 / 发布类表单（供求 · 鉴定 · 企业认证 · 品牌入驻） ---------- */
  /* ⚠️ 站内 style.css 已自带这些断点，不要在这里重复覆盖（会互相打架）：
       ≤992px  .member-grid → 单列、.member-aside → static、.ma-nav → 横向 wrap
       ≤768px  .br-form-row / .sp-type-picker → 单列
       ≤640px  .ap-up-grid / .ap-vid-grid → 单列（照片槽位 aspect-ratio 4/3，
               改成两列会只剩 ~107px 宽、槽内提示文字被裁掉，实测过，别改）
     本节只补「站内没做、且手机上确实需要」的部分。 */

  /* 会员侧栏：手机上是整块横滑导航，12 个入口靠 wrap 会占掉大半屏 */
  .ma-user { padding: 14px 16px; }
  .ma-nav {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; padding: 8px;
    scrollbar-width: none;
  }
  .ma-nav::-webkit-scrollbar { display: none; }
  .ma-nav a { flex: 0 0 auto; white-space: nowrap; padding: 8px 12px; font-size: .85rem; gap: 6px; }

  /* 内容块：24/26px 内边距在 375px 上只剩 284px 可用宽，收紧到 14px */
  .mm-block { padding: 16px 14px; border-radius: 12px; }
  .mm-block-head { flex-wrap: wrap; gap: 8px; }

  /* 表单：站内已转单列，这里只收紧纵向间距（.br-fg 自带 14px margin-bottom，
     叠加 .br-form-row 的 14px row-gap 会变成 28px，手机上过于松散） */
  .br-form-row { gap: 0; }

  /* 带按钮的输入行：允许换行，避免按钮被挤出屏幕 */
  .br-img-row { flex-wrap: wrap; }
  .br-img-row .form-control { flex: 1 1 100%; }
  .br-img-row .btn { flex: 0 0 auto; }
  .sp-price-row { flex-wrap: wrap; }
  .sp-price-row .form-control { flex: 1 1 45%; min-width: 0; }
  .mb-submit-row { flex-wrap: wrap; }
  .mb-submit-row .btn { flex: 1 1 auto; }

  /* 鉴定：只缩字号，列数交给站内 ≤640px 的单列规则 */
  .ap-up-tip { font-size: .74rem; }

  /* 品牌入驻：展示商品重复行里的图片选择行 */
  .bs-prod .br-form-row { gap: 0; }
}