/* ==========================================================================
   H5 移动端适配（Mobile / H5）
   --------------------------------------------------------------------------
   站点：card.wm-yz.cn
   创建：2026-10-13

   【重要约定】
   1. 本文件所有规则一律包裹在 @media (max-width: 991.98px) 内 —— 桌面端零影响。
   2. 只做「覆盖」，不修改 style.css 原文，便于随时回滚（删掉引入即可）。
   3. 引入位置必须在 style.css 之后，才能生效。

   改造内容：
   - A1 hero 首屏：压缩高度、修复文案可读性
   - A2 商品卡：手机端 2 列
   - A3 点击目标：放大到 >= 44px
   - A4 字号体系 / 间距 / 底部安全区
   ========================================================================== */

/* --------------------------------------------------------------------------
   仅在手机与小平板生效（< 992px）
   992px 是 Bootstrap 的 lg 断点，也是本模板切换移动菜单的临界点
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

  /* ======================================================================
     A1. hero 首屏
     问题：390px 视口下 hero 高约 1180px（超过一屏 844px），
           图片下方留白约 580px；标题/副标题颜色极淡几乎不可见。
     方案：① 限制图片高度  ② 文案叠加到图片上  ③ 提高文字对比度
     ====================================================================== */

  /* 1) 整个 hero 区不再被内容撑高 */
  .hero-section {
    background-color: #0e1220;
  }

  .hero-swiper,
  .hero-swiper .swiper-wrapper,
  .hero-swiper .swiper-slide {
    height: auto;
  }

  /* 2) 幻灯片改为「图上叠字」：图片做背景，文案绝对定位在上层 */
  .slider-box {
    position: relative;
    display: block;
    background-color: #0e1220;
    min-height: 0;
  }

  /* 图片层：固定一个适合手机的高度，不要按原图比例撑开 */
  .slider-box .img-box {
    position: relative;
    inset-inline-start: auto;
    aspect-ratio: auto;
    height: 62vw;
    min-height: 210px;
    max-height: 340px;
    width: 100%;
    z-index: 0;
  }

  .slider-box .img-box .img-inner {
    aspect-ratio: auto;
    height: 100%;
  }

  .slider-box .img-box .img-inner .main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }

  /* 底部加一层渐变，保证叠在上面的文字始终可读 */
  .slider-box .img-box::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 65%;
    background: linear-gradient(to bottom,
      rgba(14, 18, 32, 0) 0%,
      rgba(14, 18, 32, 0.55) 45%,
      rgba(14, 18, 32, 0.95) 100%);
    pointer-events: none;
    z-index: 2;
  }

  /* 文案层：压在图片下缘，紧贴图片，不再产生大片留白 */
  .slider-box .text-box {
    position: relative;
    margin-top: -18vw;
    z-index: 3;
    padding: 0 18px 22px;
    max-width: 100%;
  }

  .slider-box .text-box .text-box-inner {
    min-height: 0;
    padding: 0;
    max-width: 100%;
  }

  /* 3) 文字对比度：副标题原来颜色太淡，改为高对比 */
  .slider-box .text-box .section-subtitle {
    font-size: 12px;
    padding: 4px 12px;
    background-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: #ffffff;
    margin-bottom: 6px;
  }

  .slider-box .text-box .title {
    font-size: 23px;
    line-height: 1.28;
    margin-top: 8px;
    color: #ffffff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55);
    /* 最多 3 行，避免长标题把首屏撑爆 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .slider-box .text-box .description {
    font-size: 13.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 6px;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 主 CTA：足够大、够醒目 */
  .slider-box .text-box .cmn-btn {
    margin-top: 14px;
    min-height: 44px;
    padding: 11px 22px;
    font-size: 15px;
  }

  /* 4) 分页点与倒计时进度不遮挡文案 */
  .hero-swiper .swiper-pagination {
    bottom: 6px;
  }

  .hero-swiper .swiper-pagination-bullet {
    width: 26px;
    height: 4px;
  }

  .hero-swiper .autoplay-progress {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    font-size: 11px;
  }

  /* ======================================================================
     A2. 商品卡：手机端 2 列
     问题：col-md-4 / col-lg-* 在 <768px 退化为 col-12（单列），
           每张卡图高 700+px，一屏只能看 1 个商品。
     方案：强制 2 列，并同步缩小卡内间距与字号。
     ====================================================================== */

  /* 首页 Exclusive Cards / Game Top-Up Offers / 买号区 */
  .exclusive-offer-section .row > [class*="col-"],
  .trending-game-section .row > [class*="col-"],
  .buy-game-id-section .row > [class*="col-"],
  .campaign-section .row > [class*="col-"],
  .flash-deal-section .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }

  /* 列表页（/cards、/top-ups）商品网格：已经是 col-6，这里只收窄间距 */
  .card-list-section .row > [class*="col-"],
  .topup-list-section .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 50%;
  }

  /* 商品卡内部：手机上更紧凑 */
  .product-box {
    gap: 8px;
  }

  .product-box .img-box {
    border-radius: 10px;
  }

  .product-box .text-box .title {
    font-size: 13px;
    line-height: 1.35;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .product-box .text-box .name {
    font-size: 11.5px;
    margin-bottom: 2px;
  }

  .product-box .text-box .review {
    font-size: 11px;
  }

  .product-box .text-box .price {
    font-size: 13px;
  }

  .product-box .text-box .price .promo-price {
    font-size: 15px;
  }

  /* 卡片上的购物车角标缩小，避免遮挡图片 */
  .product-box .cart-icon,
  .product-box .cart-badge,
  .product-box .add-to-cart {
    transform: scale(0.82);
    transform-origin: top right;
  }

  /* 网格行间距收紧 */
  .exclusive-offer-section .row,
  .trending-game-section .row,
  .buy-game-id-section .row {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 18px;
  }

  /* ======================================================================
     A3. 点击目标放大到 >= 44px
     实测：社交图标 30x30、Login 81x37、view all 77x28、页脚链接 30x19
     ====================================================================== */

  /* 顶部社交图标 */
  .social-box a,
  .social-links a,
  .header-social a,
  .top-bar .social-box a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 语言/货币切换 */
  .lang-currency-btn,
  .wap-lang-btn {
    min-height: 44px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  /* Login / 顶部导航按钮 */
  .login-btn,
  .nav-link.login-btn,
  .custom-nav .nav-item > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* view all 按钮 */
  .view-all-btn {
    min-height: 44px;
    padding: 12px 18px;
    display: inline-flex;
    align-items: center;
    font-size: 14px;
  }

  /* 通用按钮 */
  .cmn-btn {
    min-height: 44px;
    padding: 11px 20px;
  }

  /* 页脚链接：加大点击区（用 padding 撑开，视觉上仍紧凑） */
  .footer-section .widget-link {
    display: inline-block;
    padding: 10px 0;
    min-height: 40px;
    line-height: 20px;
  }

  /* 分页按钮 */
  .pagination .page-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ======================================================================
     A4. 字号体系 / 间距 / 安全区
     ====================================================================== */

  /* 移动端正文基准字号（原来是 16px 但部分区块偏小） */
  body {
    -webkit-text-size-adjust: 100%;
  }

  /* 区块标题统一收敛 */
  .section-title h2,
  .section-title .title {
    font-size: 22px;
    line-height: 1.3;
  }

  .section-title p {
    font-size: 13.5px;
    line-height: 1.55;
  }

  /* 各区块上下留白收紧（原桌面留白在手机上过大） */
  section {
    scroll-margin-top: 70px;
  }

  /* 容器左右内边距，避免内容贴边 */
  .container,
  .container-fluid {
    padding-left: 14px;
    padding-right: 14px;
  }

  /* 底部安全区（iPhone 手势条 / 全面屏） */
  body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .footer-section {
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }

  /* 左右安全区（横屏刘海） */
  .container {
    padding-left: max(14px, env(safe-area-inset-left, 0px));
    padding-right: max(14px, env(safe-area-inset-right, 0px));
  }

  /* 表格在手机上允许横向滚动，避免撑破布局 */
  .table-responsive,
  table.table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 长单词/URL 不撑破容器 */
  .product-box .text-box .title,
  .product-box .text-box .name,
  .footer-section a,
  .blog-details-content {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* 输入框最小 16px，避免 iOS 自动放大 */
  input,
  select,
  textarea,
  .form-control,
  .form-select {
    font-size: 16px;
  }

  /* 表单控件高度，方便点按 */
  .form-control,
  .form-select {
    min-height: 46px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 修复 hero 副标题可能被裁切（审计发现的 p.description 超出 30px） */
  .slider-box .text-box .description {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  /* ======================================================================
     A5. 跑马灯（品牌条 / 关键词条）
     问题：390px 下 .marquee-item-wrapper 宽 2302px，
           文字从屏幕左边缘外开始滚动，首屏看到的是被裁切的半截词
           （截图实测："gital Vouchers" 缺了 "Di"）。
     方案：手机上缩小字号与间距，让更多内容落在可视区内。
     ====================================================================== */

  .marquee-section {
    gap: 12px;
  }

  .marquee,
  .marquee-item-box {
    gap: 14px;
  }

  .brand-item {
    font-size: 15px;
    white-space: nowrap;
  }

  .brand-item i,
  .brand-item .fa-regular {
    font-size: 14px;
  }

  /* 跑马灯容器裁剪边界对齐屏幕，避免"半个词"的观感 */
  .marquee-section {
    overflow: hidden;
  }

  /* ======================================================================
     A6. 列表页（/cards、/top-ups、/buy）
     模板已有 .mobile-filter-bar d-lg-none，这里做细节打磨。
     ====================================================================== */

  /* 左侧筛选栏在手机上改为可折叠，默认收起 */
  .sidebar-widget-area {
    padding: 14px;
    border-radius: 10px;
  }

  .sidebar-widget-area .widget-title {
    font-size: 15px;
    margin-bottom: 8px;
  }

  /* 移动筛选栏吸顶，方便随时切换分类 */
  .mobile-filter-bar {
    position: sticky;
    top: 58px;
    z-index: 40;
    background: #fff;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color1, #e5e7eb);
  }

  /* 列表页顶部工具条：手机上纵向排列，避免挤压 */
  .card-list-section .row.justify-content-between > [class*="col-"],
  .topup-list-section .row.justify-content-between > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* 排序/筛选下拉在手机上占满宽 */
  .nice-select,
  .nice-select.right {
    width: 100%;
    float: none;
  }

  /* ======================================================================
     A7. 详情页（/card/details、/direct-topup/details）
     ====================================================================== */

  .product-details-section .product-details-header {
    margin-bottom: 20px;
  }

  .product-details-section .product-details-header h1,
  .product-details-section .product-details-header h2 {
    font-size: 20px;
    line-height: 1.32;
  }

  /* 详情页里的两栏（图 + 信息）在手机上纵向堆叠，已有 col-lg 处理，
     这里只收紧间距 */
  .product-details-section .row {
    --bs-gutter-x: 16px;
    --bs-gutter-y: 20px;
  }

  /* 数量选择 / 加入购物车按钮：手机上占满宽，方便点按 */
  .product-details-section .cmn-btn,
  .product-details-section .add-cart-btn,
  .product-details-section .buy-now-btn {
    width: 100%;
    justify-content: center;
  }

  /* ======================================================================
     A8. 购物车 / 结算
     ====================================================================== */

  /* 购物车表格：手机上允许横向滚动（已在通用规则处理 table-responsive），
     这里进一步缩小单元格内边距，减少横向滚动距离 */
  .cart-section .table > :not(caption) > * > * {
    padding: 8px 6px;
    font-size: 13px;
  }

  .cart-section .cart-item {
    gap: 8px;
  }

  .cart-section .cart-item img {
    width: 54px;
    height: 54px;
    object-fit: cover;
    border-radius: 8px;
  }

  /* 结算按钮区在手机上纵向排列、占满宽 */
  .cart-section .cmn-btn,
  .cart-section .checkout-btn {
    width: 100%;
    justify-content: center;
    margin-bottom: 8px;
  }

  /* 订单汇总卡片 */
  .cart-section .cart-summary,
  .cart-section .order-summary {
    padding: 14px;
    border-radius: 10px;
  }

  /* ======================================================================
     A9. 登录 / 注册 / 找回密码 / 验证码
     ====================================================================== */

  /* 表单卡片在手机上占满宽，去掉多余留白 */
  .auth-card,
  .auth-form-wrapper,
  .login-form-wrapper,
  .register-form-wrapper {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .auth-card h2,
  .auth-card h3,
  .auth-card .auth-title {
    font-size: 20px;
  }

  /* 表单内两列（如验证码 + 发送按钮）在手机上不挤压 */
  .auth-card .row.g-2 > [class*="col-sm-4"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* 提交按钮占满宽 */
  .auth-card .cmn-btn,
  .auth-card button[type="submit"] {
    width: 100%;
    justify-content: center;
  }

  /* 社交登录按钮：并排显示但保证足够高度 */
  .auth-card .social-login a,
  .auth-card .auth-social a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* ======================================================================
     A10. 用户中心（如果使用 light 主题的 user 布局）
     ====================================================================== */

  .user-sidebar,
  .dashboard-sidebar {
    margin-bottom: 16px;
  }

  .user-sidebar .nav-link,
  .dashboard-sidebar .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 10px 14px;
  }

  /* 用户中心的统计卡片：手机上一行 2 个 */
  .dashboard-card,
  .stat-card,
  .user-stat-card {
    padding: 14px;
  }

  /* 内容区左右留白 */
  .user-content,
  .dashboard-content {
    padding: 14px;
  }

  /* ======================================================================
     A11. 分页 / 空状态 / 提示
     ====================================================================== */

  .pagination {
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
  }

  .null_data,
  .empty-state {
    padding: 32px 16px !important;
    font-size: 14px;
  }

  /* ======================================================================
     A12. 模态框 / 弹层：手机上留出边距，不要贴边
     ====================================================================== */

  .modal-dialog {
    margin: 12px;
  }

  .modal-content {
    border-radius: 12px;
  }

  /* ======================================================================
     A13. 通用：长内容与横向滚动容器
     ====================================================================== */

  /* 任何可能横向溢出的滚动容器，统一加上惯性滚动 */
  .table-responsive,
  .owl-carousel,
  .swiper,
  .marquee-section,
  [style*="overflow-x"] {
    -webkit-overflow-scrolling: touch;
  }

  /* 代码块 / 富文本内容在手机上换行 */
  pre,
  code,
  .blog-details-content pre {
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12.5px;
  }

  /* 防止 iframe（如视频）撑破布局 */
  iframe,
  embed,
  object {
    max-width: 100%;
  }

  /* ======================================================================
     A14. 第二轮：审计剩余的小点击目标
     实测仍有 55 个 <40px 的元素，逐个补齐。
     ====================================================================== */

  /* 1) 页脚链接（.footer-widget .widget-link）：原 30x19
        原样式用 ::before 画小圆点、margin-left:18px，这里保持视觉、放大热区 */
  .footer-widget .widget-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
    line-height: 22px;
    font-size: 14px;
  }

  /* 2) 分类筛选链接（.checkbox-categories-area .category-link）：原 329x38
        只差 2px 高度，补齐即可 */
  .checkbox-categories-area .category-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  /* 3) 详情页/购物车数量增减按钮（.btn-inc-dec）：原 30x30
        这是高频操作，放大到 44x44 */
  .btn-inc-dec {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
  }

  /* 数量输入框同步放大，与按钮齐平 */
  .item-count input,
  #quantityNumber,
  input[data-value] {
    min-height: 44px;
    width: 56px;
    text-align: center;
    font-size: 16px;
  }

  /* 4) 带下划线动画的链接（.border-effect）：原 83x24
        这类多为"查看更多 / 了解详情"，加高点击区。
        注意：min-height 在 flex 容器里可能被压缩，改用 padding 撑开。 */
  .border-effect {
    display: inline-flex;
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* 5) 页脚里作为普通文本出现的链接（.widget-link）：
        高度已 44px，宽度只是文字本身宽度 —— 这是符合规范的，
        但为了更保险，给一个最小宽度并保证垂直居中 */
  .footer-widget .widget-link {
    min-width: 44px;
    justify-content: flex-start;
  }

  /* 5) 博客/评论区的普通链接（无类名，21-27px 高）
        针对性地给正文区链接加内边距，不影响段落排版 */
  .blog-details-content a,
  .review-content a,
  .comments-area a {
    display: inline-block;
    padding: 8px 0;
    min-height: 40px;
  }

  /* 6) 面包屑导航 */
  .breadcrumb-item a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 6px 0;
  }

  /* 7) 语言下拉里的选项 */
  .wap-lang-dropdown a,
  .wap-lang-dropdown .wap-lang-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* 8) 卡片上的图标按钮（收藏/对比等） */
  .product-box .icon-btn,
  .product-box .wishlist-btn,
  .product-box .compare-btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* 9) 评分星标（可点击时） */
  .rating a,
  .review-star a,
  .star-rating a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 10) 轮播左右箭头：手机上增大到 44px 方便点按 */
  .owl-nav button,
  .swiper-button-next,
  .swiper-button-prev {
    min-width: 44px;
    min-height: 44px;
  }

  /* 11) 关闭按钮（弹窗/提示） */
  .btn-close,
  .close,
  .modal .close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 12) 社交分享按钮 */
  .social-sharing a,
  .share-buttons a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* 13) 标签/徽章类可点元素 */
  .tag a,
  .badge a,
  .category-tag a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
  }

  /* 14) 底部固定栏（若存在）预留安全区高度 */
  .app-tab-bar,
  .bottom-nav,
  .fixed-bottom-bar {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* ======================================================================
     A15. 第三轮：正文内联链接与页脚品牌链接
     实测这些是「行内 <a>」，高度只有 19-27px（文字本身高度）。
     注意：正文里的链接如果强行撑到 44px 会破坏段落行距，
     所以采用「垂直内边距 10px + 保持行内显示」的方式，
     既扩大热区又不打乱排版。
     ====================================================================== */

  /* 1) 页脚品牌名链接（.highlight，如 "Gamers Arena"）：104x19 -> 加大 */
  .footer-section .highlight,
  .footer-widget .highlight,
  p.mb-0 > a.highlight {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
  }

  /* 2) 登录页「忘记密码」「创建账号」：126x19 / 131x19 */
  .forgot a,
  .forgot-password a,
  form .forgot a,
  .auth-card p.mb-0 > a,
  .auth-form-wrapper p.mb-0 > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 0;
  }

  /* 3) 博客详情侧栏的分类链接（li > a，334x27） */
  .blog-sidebar li > a,
  .sidebar-widget-area li > a,
  .widget-categories li > a,
  .category-list li > a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 0;
  }

  /* 4) 正文段落里的行内链接（如 "HERE"、"www.gamers.com"）
        保持 inline，用垂直 padding 撑开热区，不影响行距 */
  .product-details-section p > a,
  .product-details-section li > a,
  .blog-details-content p > a,
  .blog-details-content li > a,
  .cookie-content p > a,
  .cookie-content li > a,
  .privacy-section p > a,
  .privacy-section li > a,
  .support-section p > a,
  .support-section li > a {
    display: inline-block;
    padding: 10px 0;
    min-height: 40px;
    line-height: 1.5;
  }

  /* 5) 富文本区域里所有链接兜底（但排除按钮类，避免被撑变形） */
  .blog-details-content a:not(.cmn-btn):not(.view-all-btn):not(.border-effect),
  .privacy-section a:not(.cmn-btn):not(.view-all-btn):not(.border-effect) {
    display: inline-block;
    padding: 8px 0;
    min-height: 40px;
  }

  /* ======================================================================
     A16. 区块高度优化（实测数据驱动）
     390px 视口下实测各区块高度（一屏 = 844px）：
       hero              397px   0.5 屏  ✅ 已优化
       exclusive-offer  1003px   1.2 屏  ✅ 商品卡 2 列后
       about            1061px   1.3 屏  ⚠ 图片 362x505 占满
       trending-game    1601px   1.9 屏
       why-choose-us    1515px   1.8 屏  ⚠ 图片过大
       blog             1783px   2.1 屏  ⚠ 博客卡过高
     目标：把大图区块压到合理高度，减少无谓滚动。
     ====================================================================== */

  /* 1) About 区块：图片限制高度，避免一张图占 1.3 屏 */
  .about-section .img-box {
    max-height: 260px;
    overflow: hidden;
    border-radius: 12px;
  }

  .about-section .img-box img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
  }

  .about-section .text-box h2 {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .about-section .text-box p,
  .about-section .text-box div {
    font-size: 13.5px;
    line-height: 1.6;
  }

  /* About 区块上下留白收紧 */
  .about-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* 2) Experience the Difference：左侧配图限制高度 */
  .why-choose-us-section .img-box {
    max-height: 240px;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
  }

  .why-choose-us-section .img-box img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
  }

  /* 该区块的 3 个卖点：手机上一行一个，紧凑排列 */
  .why-choose-us-section .row .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .why-choose-us-section .why-choose-item,
  .why-choose-us-section .single-item {
    margin-bottom: 14px;
  }

  .why-choose-us-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* 3) 博客区：手机上一行一个，但压缩图片高度
        实测结构：.blog-box > .text-box(88) + a.img-box(300) + p(72) = 504px/卡 */
  .blog-section .row > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .blog-section .blog-box {
    gap: 10px;
  }

  .blog-section .blog-box .img-box {
    max-height: 180px;
    overflow: hidden;
    border-radius: 10px;
  }

  .blog-section .blog-box .img-box img {
    width: 100%;
    height: 180px;
    object-fit: cover;
  }

  .blog-section .blog-box h3,
  .blog-section .blog-box h4,
  .blog-section .blog-box .title {
    font-size: 16px;
    line-height: 1.35;
  }

  .blog-section .blog-box p {
    font-size: 13px;
    line-height: 1.55;
    /* 摘要最多 3 行，避免卡片过高 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .blog-section .blog-box .meta {
    font-size: 12px;
    gap: 8px;
  }

  .blog-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* 4) 各区块统一收紧上下留白（原桌面留白在手机上过大） */
  .exclusive-offer-section,
  .trending-game-section,
  .buy-game-id-section,
  .flash-deal-section,
  .testimonial-section,
  .contact-section {
    padding-top: 28px;
    padding-bottom: 28px;
  }

  /* 5) 区块标题与"view all"之间的间距收紧 */
  .exclusive-offer-section > .container > .d-flex,
  .trending-game-section > .container > .d-flex,
  .buy-game-id-section > .container > .d-flex,
  .blog-section > .container > .d-flex {
    margin-bottom: 16px !important;
  }

  /* 6) 博客详情页正文配图限制高度 */
  .blog-details-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
  }

  /* 7) 详情页主图限制高度，避免占满整屏 */
  .product-details-section .product-img,
  .product-details-section .main-img-box,
  .product-details-section .details-img {
    max-height: 320px;
    overflow: hidden;
    border-radius: 12px;
  }

  .product-details-section .product-img img,
  .product-details-section .main-img-box img,
  .product-details-section .details-img img {
    width: 100%;
    height: 320px;
    object-fit: contain;
    background: #f6f7fa;
  }
}

/* --------------------------------------------------------------------------
   更小屏（< 576px）进一步微调
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {

  /* 超小屏（如 iPhone SE 375 / Android 360）标题再收一点 */
  .slider-box .text-box .title {
    font-size: 20px;
    line-height: 1.26;
  }

  .slider-box .text-box .description {
    font-size: 12.5px;
  }

  /* 商品卡字号再收一点，保证 2 列下不换行错乱 */
  .product-box .text-box .title {
    font-size: 12.5px;
  }

  .product-box .text-box .price .promo-price {
    font-size: 14px;
  }

  .section-title h2,
  .section-title .title {
    font-size: 20px;
  }
}