/* =====================================================
   移动端适配（max-width 768px）
   覆盖 hqy 模板固定 1200px 布局，含 480px 小屏档
   引入：template/default/header.php（style.css 之后）
===================================================== */
@media (max-width: 768px) {
  html, body { overflow-x: hidden; }

  /* ---- 顶部细条 / 头部 ---- */
  .haoquanyi_head_top .head_top_box1 { width: 100%; padding: 0 8px; }
  .haoquanyi_head .hqy_top { width: 100%; }
  .haoquanyi_head .hqy_logo a { font-size: 24px; }
  .haoquanyi_head .hqy_logo .logo-ico { font-size: 34px; }
  .search_shop li button { padding: 0 14px; }

  /* ---- 导航：横向滚动（触摸） ---- */
  .haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav {
    width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;
  }
  .haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li { display: inline-block; white-space: nowrap; }
  .haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li span { width: 100px; font-size: 14px; }
  .haoquanyi_head .haoquanyi_com_navigation .hqy_top_nav li a { padding: 0 10px; font-size: 14px; }

  /* ---- 公告跑马灯 ---- */
  .index-gonggao .box { width: 100%; }
  .index-gonggao .box li marquee { width: 100% !important; }

  /* ---- 主体容器 ---- */
  .main, .index-top-box { width: 100%; padding-left: 8px; padding-right: 8px; }
  .card { padding: 14px; }

  /* ---- 商品列表：隐藏表头，行改「名称整行 + 四栏」 ---- */
  .index-box1 .index-box1-type { display: none; }
  .index-box1 .index-box1-shop { flex-wrap: wrap; padding: 6px 8px; }
  .index-box1 .index-box1-shop .shop1 { width: 100%; font-size: 15px; }
  .index-box1 .index-box1-shop .shop1 .biaoqian { min-width: 0; padding: 3px 7px; font-size: 12px; }
  .index-box1 .index-box1-shop .shop2,
  .index-box1 .index-box1-shop .shop3,
  .index-box1 .index-box1-shop .shop4,
  .index-box1 .index-box1-shop .shop5 { flex: 1; width: auto; min-width: 0; padding: 6px 2px; text-align: center; }
  .index-box1 .index-box1-shop .shop5 .hqy-btn { padding: 0 12px; height: 26px; line-height: 26px; font-size: 13px; }

  /* ---- 订单查询结果：单列堆叠 ---- */
  .index-box1.order-query .index-box1-shop > div { width: 100% !important; text-align: left; padding: 6px 8px; }
  .index-box1.order-query .index-box1-shop { padding: 6px 0; }

  /* ---- 商品详情 ---- */
  .product-detail { padding: 16px; }
  .product-detail .pd-head { flex-direction: column; gap: 12px; }
  .product-detail .pd-cover { width: 100%; height: auto; aspect-ratio: 3 / 2; }
  .trade-goodinfo { font-size: 18px; padding: 14px; }
  .trade-goodinfo2 { padding: 12px; }
  .trade-goodinfo2 .from_wz_3, .trade-goodinfo2 .from_in_3 { float: none; width: 100%; text-align: left; }
  .trade-goodinfo2 .from_wz_3 { margin-bottom: 2px; }
  .trade-goodinfo2 .from_off_4 { float: none; width: 100% !important; }
  .trade-goodinfo2 .from_in_4 { float: none; width: auto !important; margin-bottom: 6px; }

  /* ---- 下单表单：支付方式换行 ---- */
  .pay-types { flex-wrap: wrap; gap: 8px; }
  .pay-type { flex: 1 1 45%; padding: 12px 6px; }
  .pay-type .icon { font-size: 24px; }

  /* ---- 卡密展示 ---- */
  .cards-box { padding: 12px; font-size: 12px; }
  .cards-toolbar .btn { flex: 1 1 100%; }

  /* ---- 扫码支付页：收款码尺寸由 js/payqr.js 按海报模板计算并设行内样式，
         此处不可再用 !important 覆盖（否则会把放大后的图强行缩回 78vw，
         而 left/top 仍按原尺寸算 → 二维码错位裁坏）。仅约束未知模板的回退显示。 ---- */
  .payqr-crop.no-crop .payqr-img { width: auto !important; height: auto !important; max-width: 78vw; }
  /* 裁剪窗口在窄屏上不超出视口 */
  .payqr-crop.is-cropped { width: min(276px, 78vw); height: min(276px, 78vw); }

  /* ---- 表格：横向滚动 ---- */
  .table { display: block; overflow-x: auto; white-space: nowrap; }

  /* ---- 通用按钮（补齐前台 .btn 基础样式，大触控区） ---- */
  .btn { display: inline-block; height: 40px; line-height: 40px; padding: 0 18px; border: none; border-radius: 4px; font-size: 15px; cursor: pointer; text-align: center; }
  .btn-primary { background: #00A2CA; color: #fff; }
  .btn-success { background: #16a34a; color: #fff; }
  .btn-gray { background: #eef0f1; color: #555; }
  .btn-block { width: 100%; }

  /* ---- 商品封面图：列表内缩小，不影响一行放四栏 ---- */
  .shop-cover { width: 38px; height: 38px; margin-right: 7px; }
  .index-box1 .index-box1-shop .shop1 { align-items: flex-start; }
  .pd-cover-img { width: 100%; height: auto; aspect-ratio: 3 / 2; }

  /* ---- 首页 Banner：宽度自适应，比例改矮一点更省屏幕 ---- */
  .faka-banner { width: 100%; margin-top: 8px; aspect-ratio: 750 / 300; border-radius: 0; }
  .faka-banner-nav { display: none; }          /* 移动端用滑动切换，箭头多余 */
  .faka-banner-dot { width: 7px; height: 7px; }
  .faka-banner-dot.active { width: 16px; }

  /* ---- 进站公告弹窗：小屏收紧 ---- */
  .faka-ann-box { padding: 18px 16px; max-height: 90vh; }
  .faka-ann-head h3 { font-size: 17px; }
  .faka-ann-body { font-size: 13px; padding: 10px 12px; }
  .faka-ann-image img { max-width: 240px; }

  /* ---- 数量选择器：加大触控区 ---- */
  .num-picker button { width: 48px; height: 46px; }
  .num-picker input { width: 72px; height: 46px; font-size: 17px; }

  /* ---- 订单查询：输入与按钮上下排列，按钮整行 ---- */
  .order-lookup { flex-direction: column; max-width: 100%; }
  .order-lookup .hqy-btn { width: 100%; }

  /* ---- 二维码弹层：占满更多屏幕便于扫码 ---- */
  .faka-qr-panel { padding: 14px; max-height: 92vh; }
  .faka-qr-scroll { max-height: 60vh; }
  .faka-qr-tab { font-size: 12px; padding: 10px 0; }
  .faka-mini-btn { flex: 1; padding: 9px 10px; }
  /* 卡密二维码：手机上取容器宽的 75%（与桌面 255px 上限保持同一缩小比例，
     不再顶格占满，避免过大） */
  .faka-qr-code img { max-width: 100%; width: 75%; }
  .faka-qr-single img { max-width: 100%; width: 75%; }

  /* ---- 公告中心 ---- */
  .gg-item-head { flex-wrap: wrap; gap: 6px; padding: 12px; }
  .gg-item-head .gg-title { flex: 1 1 100%; order: 3; font-size: 14px; }
  .gg-item-head .gg-time { font-size: 11px; }
  .gg-item-body { padding: 12px; font-size: 13px; }

  /* ---- 卡密工具栏：按钮整行更好点 ---- */
  .cards-toolbar .cards-btn { flex: 1 1 100%; }
  .cards-toolbar-tip { font-size: 11px; }

  /* ---- 通用按钮（移动端大触控区，覆盖 ui.css 的 36px） ---- */
  .btn { height: 42px; line-height: 42px; padding: 0 18px; font-size: 15px; }
  .btn-block { width: 100%; }

  /* ---- 底部 ---- */
  .pc-footer .nb { width: 100%; }
}

/* ---- 小屏手机：支付方式单列 ---- */
@media (max-width: 480px) {
  .pay-type { flex: 1 1 100%; }
  .faka-banner { aspect-ratio: 750 / 340; }
  .faka-ann-image img { max-width: 200px; }
}