/* 福友电竞 · 手机（窄屏）适配样式
 * 原则：不改原版排版模板 —— 分类栏仍在左边（只是固定宽度不被挤压）、商品仍是一行两个。
 * 只解决窄屏下的实际毛病：筛选栏被挤成竖排、底部导航压住内容、整页横向溢出。
 * 只在 ≤820px 生效，电脑上完全不受影响。
 */

@media (max-width: 820px) {
  /* 1) 页面底部留白：底部导航不再压住最后一行内容；同时禁止整页横向偏移 */
  uni-page-body,
  .page {
    padding-bottom: 3.6rem !important;
    overflow-x: hidden !important;
  }

  /* 2) 分类页：左侧筛选栏保持竖向，但"不许被压缩"（原版是 flex 会被挤成一条） */
  .main-layout {
    flex-direction: row !important;
    overflow: hidden !important;
  }

  .left-sidebar {
    flex: 0 0 4.75rem !important;
    width: 4.75rem !important;
    min-width: 4.75rem !important;
    max-width: 4.75rem !important;
    height: auto !important;
  }

  .left-sidebar .uni-scroll-view-content {
    width: 100% !important;
  }

  .left-sidebar .sidebar-item {
    width: 100% !important;
    padding: .55rem .25rem !important;
  }

  .left-sidebar .zone-label {
    font-size: .8125rem !important;
    line-height: 1.3 !important;
    white-space: normal !important;
    word-break: break-all;
  }

  /* 3) 商品卡片：保持一行两个（原版模板），图片区域略高一点 */
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .card-cover-wrap {
    padding-bottom: 72% !important;
  }
}