/* ============================================================
   移动端修复层（仅 760px 以下生效）
   核心目标：消除错位、适配小屏、保留 admin 前后台穿梭入口
   ============================================================ */

:root {
  --tb-h: 64px;
}

/* ---------- 全局防溢出 ---------- */
html, body { overflow-x: hidden; }
img, svg, video, canvas, iframe, .thumb { max-width: 100%; height: auto; }

/* ---------- 顶栏汉堡菜单 + 抽屉 ---------- */
.topbar .wrap { position: relative; }

.drawer {
  position: fixed; inset: 0 0 0 auto; z-index: 80;
  width: min(78vw, 300px); background: var(--ivory);
  box-shadow: -8px 0 30px rgba(33,28,24,.18);
  transform: translateX(100%); transition: transform .28s cubic-bezier(.22,.61,.36,1);
  display: flex; flex-direction: column;
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
}
.drawer-head .brandmark .logo { font-size: 18px; letter-spacing: 1px; }
.drawer-head .brandmark .sub { display: none; }
.drawer-close {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft); font-size: 18px;
}
.drawer-close:hover { background: var(--gold-soft); color: var(--gold-deep); }
.drawer-body { flex: 1; overflow-y: auto; padding: 10px 0; -webkit-overflow-scrolling: touch; }
.drawer-body a, .drawer-body button {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px;
  padding: 14px 20px; font-size: 15px; color: var(--ink);
  border-bottom: 1px solid rgba(231,223,210,.7);
}
.drawer-body a .fa-solid, .drawer-body button .fa-solid { width: 22px; text-align: center; color: var(--gold-deep); }
.drawer-body a:hover, .drawer-body button:hover { background: var(--gold-soft); }
.drawer-body .me { color: var(--gold-deep); font-weight: 600; }
.drawer-cta {
  margin: 14px 16px 16px;
  justify-content: center;
  border: none !important;
  border-radius: 10px;
  background: linear-gradient(120deg, var(--gold), var(--gold-deep)) !important;
  color: #fff !important;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(169,139,83,.28);
}
.drawer-cta .fa-solid { color: #fff !important; }
.drawer-cta:hover { filter: brightness(1.05); }
.drawer-group { border-bottom: 1px solid rgba(231,223,210,.5); }
.drawer-group .dg-label {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 20px 4px; font-size: 12px; color: var(--ink-soft); letter-spacing: 1px;
}
.drawer-group .dg-label::before { content: ''; flex: 1; height: 1px; background: var(--line); }
.drawer-group a { border-bottom: none; }
.drawer-head .brandmark { max-width: 78%; overflow: hidden; }
.drawer-head .brandmark .logo { font-size: 17px; letter-spacing: 0; white-space: nowrap; }
.drawer-head .brandmark .sub { display: none; }
.drawer-mask {
  position: fixed; inset: 0; z-index: 70; background: rgba(33,28,24,.35);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.drawer-mask.show { opacity: 1; pointer-events: auto; }

/* ---------- 移动断点核心修正 ---------- */
@media (max-width: 760px) {
  :root { --tb-h: 56px; }
  .wrap { padding: 0 14px; }
  .topbar .wrap { height: var(--tb-h); }
  .topnav { display: none; }
  .hamburger {
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink); background: transparent;
    font-size: 18px;
  }
  .hamburger:hover { background: var(--gold-soft); color: var(--gold-deep); }
  .brandmark .logo { font-size: 17px; letter-spacing: 1px; }
  .brandmark .sub { display: none; }

  /* hero 避免标题过长 */
  .hero { padding: 34px 0 18px; }
  .hero h1 { font-size: 24px; line-height: 1.18; }
  .hero p { font-size: 13.5px; max-width: none; }

  /* 品类 chip */
  .cat-chips { padding: 2px 0 10px; gap: 8px; }
  .cat-chips a, .cat-chips button { padding: 6px 12px; font-size: 12px; }

  /* 品牌 chip 跟随真实顶栏高度 */
  .brandchips { top: var(--tb-h); padding: 8px 0 10px; }

  /* 搜索条不顶到边缘 */
  .search-bar { margin: 4px 0 16px; }
  .search-bar input { padding: 11px 40px 11px 38px; font-size: 14px; }

  /* 商品卡片：价格防止折行爆裂 */
  .grid { gap: 12px; }
  .card .body { padding: 10px 12px 12px; gap: 4px; }
  .card .name { font-size: 14px; min-height: 38px; }
  .card .prices { flex-wrap: wrap; gap: 4px 10px; }
  .card .price-self .num { font-size: 17px; }
  .card .price-retail { font-size: 12px; }
  .corner-cart, .corner-dl { opacity: 1; }  /* 移动端始终可见 */
  .corner-dl { top: 8px; right: 8px; width: 34px; height: 34px; font-size: 13px; }
  .corner-cart { top: 8px; right: 44px; }
  .card-actions { margin-top: 6px; gap: 5px; }
  .card-act { padding: 7px 4px; font-size: 12.5px; }

  /* 分享页：小屏单列且列表不溢出 */
  .share-grid { gap: 18px; }
  .share-col.pick { padding: 12px; }
  .sp-list { max-height: none; }
  .sp-thumb { width: 48px; height: 48px; }

  /* 海报横幅：小屏缩小 padding 与字号 */
  .poster { min-height: 110px; padding: 20px 22px; }
  .poster .pt { font-size: 20px; }
  .poster .ps { font-size: 13px; max-width: 80%; }
  .poster .pb { padding: 7px 16px; font-size: 13px; }

  /* 详情页 */
  .detail { padding: 18px 0 40px; gap: 18px; }
  .detail .gallery .main { border-radius: var(--radius); }
  .detail .gallery .thumb { width: 48px; height: 48px; }
  .detail .info h1 { font-size: 21px; }
  .price-row .val { font-size: 20px; }
  .detail .actions { flex-direction: column; }
  .detail .actions .btn { width: 100%; }
  .ver-sel { flex-direction: column; }

  /* 表单/输入框宽度 */
  .auth-wrap { padding: 0 14px; margin: 24px auto 50px; }
  .ofield input { font-size: 15px; }

  /* 购物车 */
  .cart-row { grid-template-columns: 1fr; gap: 10px; }
  .cr-price, .cr-qty, .cr-del { justify-self: start; }
  .cs-form { padding: 16px; }

  /* 订单卡片 */
  .oc-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .order-actions { flex-wrap: wrap; }

  /* 管理台：工作台 */
  .workbench { padding-top: 22px; }
  .wb-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wb-head h2 { font-size: 24px; }
  .wb-cards { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wb-modules { grid-template-columns: 1fr; gap: 12px; }
  .wb-card { padding: 16px 14px; }
  .wb-card-n { font-size: 28px; }
  .wb-mod { padding: 14px; }

  /* 管理表格：覆盖 JS 内联 grid-template-columns */
  .adm-table { overflow-x: hidden; }
  .adm-th, .adm-tr, .adm-table .adm-tr.ord-row, .adm-table .adm-th.ord-head {
    display: flex !important; flex-direction: column !important;
    gap: 6px !important; padding: 12px 14px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .adm-th { display: none !important; }
  .adm-tr .name { font-size: 15px; }
  .adm-tr .sub { font-size: 12px; }
  .adm-tr .num { font-size: 18px; }
  .adm-contact { font-size: 13px; }
  .act-approve, .act-reject { width: auto; }

  /* 筛选条 */
  .filter-bar, .settle-bar { gap: 8px; }
  .ch-sel, .ps-sel, .filter-bar .pe-inp { min-width: 0; flex: 1 1 120px; width: 100%; }
  .cp-inp, .pe-inp { width: 86px; }

  /* 页脚 */
  .footer .wrap { flex-direction: column; text-align: center; gap: 6px; }

  /* toast 不贴边 */
  .toast { max-width: calc(100vw - 32px); text-align: center; }
}

/* ---------- 超小屏（375px 以下）再收紧 ---------- */
@media (max-width: 374px) {
  .brandmark .logo { font-size: 15px; letter-spacing: 0; }
  .hero h1 { font-size: 21px; }
  .poster { min-height: 96px; padding: 16px 18px; }
  .poster .pt { font-size: 18px; }
  .card .price-self .num { font-size: 15px; }
  .card .price-retail .num { font-size: 13px; }
}

/* ============================================================
   手机端（≤560px）卡片对齐收口
   ------------------------------------------------------------
   问题：两列布局下卡片仅约 160px 宽，"市场价 + 会员价"必然换行，
   且"有市场价 / 无市场价"的卡片行数不同 → 相邻卡片的价格行被顶到
   不同高度，看上去就是商品错位。
   处理：价格区改纵向排列 + 固定高度，1 行和 2 行占同样高度。
   ============================================================ */
@media (max-width: 560px) {
  .card .prices {
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 0;
    padding-top: 6px;
    min-height: 50px;
    max-height: 50px;
    overflow: hidden;
  }
  .card .price-retail { white-space: nowrap; }
}