/* =====================================================================
   desktop.css — PC（宽屏）自适应样式
   ---------------------------------------------------------------------
   设计原则：
   - 全部规则包在 @media (min-width:1024px) 内，对手机端（H5）零影响。
   - 只覆盖带 pc-* 标记类 / 既有 id 的元素，不改变任何 DOM 结构。
   - 加载顺序在 app.css 之后，等specificity 时靠源码顺序胜出。

   断点：
     ≥1024px  进入 PC 版式，商品网格 3 列
     ≥1280px  商品网格 4 列
   ===================================================================== */

@media (min-width: 1024px) {

  /* ---------- 整体外壳：手机宽 → 桌面宽 ---------- */
  .app-shell {
    max-width: 1200px;
  }

  /* ---------- 顶部导航 ---------- */
  .pc-header-inner {
    padding: 1rem 2rem;
  }
  /* 品牌行（品牌在左、客服按钮在右）整行加宽即可 */
  .pc-header-top .text-lg {
    font-size: 1.5rem;
    line-height: 2rem;
  }
  /* 搜索框：不再撑满，居中收窄成桌面搜索条 */
  .pc-search {
    max-width: 560px;
    margin-top: 1rem;
  }
  /* 分类胶囊：取消横向滚动，自动换行平铺 */
  .pc-chips {
    flex-wrap: wrap;
    overflow-x: visible;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-bottom: 1rem;
  }

  /* ---------- 主体 ---------- */
  .pc-main {
    /* 桌面端不再有底部固定操作条，缩小底部留白（保留悬浮客服按钮空间） */
    padding-bottom: 3rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* ---------- Hero ---------- */
  .pc-hero {
    padding: 2.5rem 3rem;
  }
  .pc-hero h1 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
  .pc-hero p {
    font-size: 1rem;
    line-height: 1.75rem;
    max-width: 720px;
  }

  /* ---------- 商品网格：2 列 → 3 列 ---------- */
  #productGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }
  /* 卡片主图区在桌面端加高，图片更醒目 */
  #productGrid .product-card .h-28 {
    height: 11rem;
  }
  /* 桌面端悬停微抬升 */
  .product-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
  .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.12);
  }

  /* ---------- 商品详情页：单列 → 双列 ---------- */
  .pc-detail-sec {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
  .pc-detail-card {
    display: grid;
    grid-template-columns: 440px minmax(0, 1fr);
    align-items: stretch; /* 左图随右侧内容拉伸等高 */
  }
  .pc-detail-media {
    height: auto;
    min-height: 460px;
  }
  .pc-detail-body {
    padding: 1.75rem 2rem;
  }
  .pc-detail-body h1 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  /* ---------- 悬浮「客服」按钮：贴视口右下角 ---------- */
  .pc-fab {
    left: auto;
    right: 1.75rem;
    bottom: 1.75rem;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  /* ---------- 底部固定操作条：桌面端隐藏（联系入口在顶部导航 + 区块内按钮） ---------- */
  .pc-bottombar {
    display: none;
  }

  /* ---------- 联系/留资浮层：底部抽屉 → 居中弹窗 ---------- */
  .pc-modal-panel {
    inset: auto auto 50% 50%;
    transform: translate(-50%, 50%);
    width: 100%;
    max-width: 420px;
    max-height: 85vh;
    border-radius: 24px;
  }
}

/* ≥1280px：商品网格升到 4 列 */
@media (min-width: 1280px) {
  #productGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}