/* ============================================================
   GiMi 吉幂保洁 — 手机端专属样式（mobile.css）
   仅在 width ≤ 980px 时加载（link media 属性 + 整文件 @media 双重保险）
   ✅ 改手机端：只改本文件，电脑端 100% 不受影响
   ❌ 改电脑端：不要动本文件，去 pc.css
   内部嵌套块：≤980 通用 / ≤720 手机竖屏 / ≤560 小屏 / ≤380 超小屏
   ============================================================ */

@media (max-width: 980px) {

  @media (max-width: 980px) {
    .hero-grid { grid-template-columns: 1fr; gap: 36px; }
    .grid-3 { grid-template-columns: 1fr; }
    .feature-row { grid-template-columns: repeat(2, 1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    .layout-2col { grid-template-columns: 1fr; }
    .side-card { position: static; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .cta-grid { grid-template-columns: 1fr; gap: 24px; max-width: 520px; }
    .cta-qr { max-width: 220px; margin: 0 auto; }
    /* 移动端 .card-feature 不跨列，避免生成隐式列轨道 */
    .card-feature { grid-column: auto !important; max-width: 100% !important; margin: 0 !important; }
    /* 导航汉堡化（QQ 浏览器移动版会按 980 渲染） */
    .nav-links { display: none; }
    .nav-cta { display: none; }
    .nav-toggle { display: flex; }
    /* Hero 服务卡片 emoji 与文字不挤 */
    .card { padding: 22px 18px; }
    .card h3 { font-size: 17px; }
    .card p { font-size: 13.5px; line-height: 1.65; }
    .ic-badge { width: 44px; height: 44px; font-size: 22px; }
    /* 容器边距收紧 */
    .container { padding: 0 16px; }
    .section { padding: 56px 0; }
    .section-head h2 { font-size: 26px; }
    .hero { padding: 56px 0 60px; }
    .hero h1 { font-size: 32px; }
    .hero p.lead { font-size: 16px; }
    .page-hero h1 { font-size: 28px; }
    .hero-card { grid-template-columns: 1fr; }
    .hero-card-qr { flex-direction: row; gap: 12px; padding: 10px; }
    .hero-card-qr img { width: 80px; height: 80px; }
    .hero-card-qr .qr-caption, .hero-card-qr .qr-tip { margin-top: 0; }
    /* 保洁站：下单页 / 卖点 / 服务清单 单列 */
    .order-wrap { grid-template-columns: 1fr; gap: 28px; }
    .pm-box { grid-template-columns: 1fr; }
    .svc-block { grid-template-columns: 1fr; gap: 20px; padding: 32px 0; }
    .svc-list { columns: 1; }
    /* 现场实拍：平板 4 列 */
    .video-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; }
    .vcard .vplay { width: 38px; height: 38px; font-size: 13px; }
    .vcard .vtitle { font-size: 13px; }
  }

  /* —— 手机竖屏（≤720px）—— */
  @media (max-width: 720px) {
    .grid-3, .grid-2, .region { grid-template-columns: 1fr; }
    .feature-row { grid-template-columns: 1fr 1fr; }
    .steps { grid-template-columns: 1fr; }
    .cta-band { padding: 32px 22px; }
    .cta-band h2 { font-size: 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 24px; }
    .footer-bottom { flex-direction: column; }
    .fab-wechat { right: 14px; bottom: 16px; }
    .fab-wechat .fab-btn { width: 50px; height: 50px; font-size: 24px; }
    .fab-wechat .fab-panel { width: 170px; }
    .fab-wechat .fab-panel img { width: 150px; height: 150px; }
    /* 现场实拍：手机 3 列 */
    .video-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  }

  /* —— 小屏手机（≤560px）—— */
  @media (max-width: 560px) {
    .hero h1 { font-size: 28px; }
    .section-head h2 { font-size: 22px; }
    .hero-card { padding: 22px 18px; }
    .hero-card h3 { font-size: 17px; }
    .ic-badge { width: 40px; height: 40px; font-size: 20px; }
    .tag { font-size: 12px; padding: 5px 11px; }
    .breadcrumb { font-size: 12px; }
    .feature-row { grid-template-columns: 1fr; }
    .hero-card-qr { padding: 8px; }
    .hero-card-qr img { width: 64px; height: 64px; }
    .cta-grid { max-width: 100%; }
    .cta-qr { max-width: 100%; }
    .cta-qr img { width: 120px; height: 120px; }
    .field-2 { grid-template-columns: 1fr; }
    .order-card { padding: 22px 18px; }
    /* 现场实拍：小屏 2 列 */
    .video-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* —— 超小屏手机（≤380px）—— */
  @media (max-width: 380px) {
    .container { padding: 0 12px; }
    .hero h1 { font-size: 24px; }
    .section-head h2 { font-size: 20px; }
    .section { padding: 44px 0; }
    .card { padding: 18px 14px; }
    .ic-badge { width: 36px; height: 36px; font-size: 18px; }
    .hero-card { padding: 18px 14px; }
    .hero-card-qr { padding: 6px; }
    .hero-card-qr img { width: 56px; height: 56px; }
    .hero-card-qr .qr-caption { font-size: 12px; }
    .fab-wechat .fab-btn { width: 46px; height: 46px; font-size: 22px; }
  }

  /* —— 报价表：手机端改成纵向卡片，取消横向滑动 —— */
  .price-wrap { overflow: visible; border-radius: 0; }
  .price-wrap table { width: 100%; min-width: 0; display: block; border-collapse: collapse; }
  .price-wrap thead { display: none; }
  .price-wrap tbody { display: block; }
  .price-wrap table tr {
    display: block; background: #fff; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px 16px 12px; margin-bottom: 12px;
    box-shadow: var(--shadow-sm);
  }
  .price-wrap table tbody tr:last-child { margin-bottom: 0; }
  .price-wrap table td {
    display: flex; gap: 12px; align-items: baseline;
    border: none; padding: 5px 0; font-size: 14.5px; line-height: 1.6; color: var(--navy);
  }
  .price-wrap table td::before {
    content: attr(data-label); flex: 0 0 86px;
    color: var(--text-soft); font-size: 12.5px; font-weight: 400;
  }
  .price-wrap table tbody td:first-child {
    display: block; font-size: 16px; font-weight: 700; color: var(--navy);
    padding: 0 0 9px; margin-bottom: 8px; border-bottom: 1px dashed var(--border);
  }
  .price-wrap table tbody td:first-child::before { display: none; }
  .price-wrap table td.price-hl { color: var(--cta-dark); font-weight: 700; font-size: 15.5px; }
  .price-note { font-size: 13px; margin-top: 14px; line-height: 1.8; }

}