/* ============================================================
 * window4_responsive.css - 移动端深度适配（窗口4，独占文件）
 * 断点：
 *   手机   : <768px
 *   平板   : 768px - 1023px
 *   桌面小 : 1024px - 1279px
 *   桌面大 : ≥1280px
 * 铁律：本文件只做覆盖，不改业务结构；所有选择器优先级高于原有CSS。
 * ============================================================ */

/* ---------- 0. 全局基座 ---------- */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
body { font-size: 14px; line-height: 1.5; }
img, video, canvas, svg { max-width: 100%; height: auto; }
button, .btn, a.btn, input[type=button], input[type=submit] {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}
input, select, textarea {
  font-size: 16px; /* 防止iOS聚焦放大 */
  max-width: 100%;
  box-sizing: border-box;
}

/* ---------- 1. 手机断点 <768px ---------- */
@media (max-width: 767px) {
  body { font-size: 14px !important; }

  /* 通用容器收缩 */
  main, .container, .wrapper, .content { padding-left: 12px !important; padding-right: 12px !important; }

  /* 所有表格 → 卡片式 */
  table.rwd-table, table.mobile-table,
  .rwd-table thead, .mobile-table thead { display: none; }
  table.rwd-table tbody tr, table.mobile-table tbody tr,
  .rwd-table tbody tr, .mobile-table tbody tr {
    display: block; background: #fff; border-radius: 10px;
    margin-bottom: 10px; padding: 12px; box-shadow: 0 1px 4px rgba(0,0,0,.06);
  }
  table.rwd-table tbody td, table.mobile-table tbody td,
  .rwd-table tbody td, .mobile-table tbody td {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border: none !important; border-bottom: 1px dashed #f0f0f0 !important;
    text-align: right;
  }
  table.rwd-table tbody td::before, .rwd-table tbody td::before,
  table.mobile-table tbody td::before, .mobile-table tbody td::before {
    content: attr(data-label); font-size: 12px; color: #999;
    text-align: left; margin-right: 12px; flex-shrink: 0;
  }

  /* 通用双列网格 → 单列 */
  .grid-2, .two-col, .row-2, .seller-grid-2 {
    display: block !important;
  }
  .grid-2 > *, .two-col > *, .row-2 > *, .seller-grid-2 > * {
    width: 100% !important; margin-bottom: 12px;
  }

  /* 商品/卡片网格：强制 2 列 */
  .product-grid, .goods-grid, .card-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  /* 按钮全宽 */
  .btn-block-mobile, .mobile-full-btn {
    display: block; width: 100%; margin: 8px 0;
  }

  /* 标题缩字号 */
  h1 { font-size: 22px !important; }
  h2 { font-size: 18px !important; }
  h3 { font-size: 16px !important; }

  /* 轮播高度自适应 */
  .carousel, .hero, .banner { height: auto !important; min-height: 160px; }
}

/* ---------- 2. 平板 768-1023px ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  .product-grid, .goods-grid, .card-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .seller-grid-2 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- 3. 桌面小 1024-1279px ---------- */
@media (min-width: 1024px) and (max-width: 1279px) {
  .product-grid, .goods-grid, .card-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* ---------- 4. 左滑删除（CSS钩子，配合 window4_touch.js） ---------- */
.swipe-item { position: relative; overflow: hidden; }
.swipe-item .swipe-delete {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: 72px; background: #ff4757; color: #fff;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 5. 下拉刷新提示（配合JS） ---------- */
.pull-refresh-indicator {
  height: 0; overflow: hidden; text-align: center;
  color: #999; font-size: 12px; transition: height .2s;
}
.pull-refresh-indicator.active { height: 40px; line-height: 40px; }