/* ===== 妙物商城移动端全局兜底（参考米来多响应式方案，2026-11-01 增补） =====
   说明：本站 style.css 已包含大量 @media 响应式断点（导航汉堡、各网格塌列等），
   本文件仅补充「全局防溢出闸门」、流体排版、触控区与个别未覆盖网格的移动端塌列，
   不重复已有规则。所有关键规则带 !important，确保作为最后一道兜底生效。 */

/* 1) 媒体元素永不撑破容器（个别图片/视频在窄屏会溢出） */
img, video, canvas, svg {
    max-width: 100%;
    height: auto;
}
iframe {
    max-width: 100%;
}

/* 2) 防止个别元素导致横向滚动条 / 白边 */
body {
    overflow-x: hidden;
}

/* 3) 长代码/文本不溢出 */
pre, code {
    white-space: pre-wrap;
    word-break: break-word;
}

/* 4) 流体排版：标题与正文字号随视口平滑缩放（避免小屏字号过大/溢出） */
h1 {
    font-size: clamp(28px, calc(22px + 3vw), 48px) !important;
}
h2 {
    font-size: clamp(21px, calc(17px + 1.3vw), 32px) !important;
}
h3 {
    font-size: clamp(17px, calc(16px + .55vw), 23px) !important;
}
p {
    font-size: clamp(13px, calc(12px + .45vw), 16px) !important;
}

/* 5) 导航栏移动端：隐藏搜索框与「下载APP」按钮，汉堡菜单更干净
      （不影响 style.css 已有的 .nav-links 折叠逻辑） */
@media (max-width: 768px) {
    .navbar .site-search {
        display: none !important;
    }
    .nav-actions .btn-download {
        display: none !important;
    }
}

/* 6) 触屏点击区域不小于 44px，提升移动端可用性 */
@media (max-width: 768px) {
    .menu-btn {
        min-width: 44px;
        min-height: 44px;
    }
    .btn-login,
    .btn-register,
    .btn-download {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .nav-links a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* 7) 个别未在 style.css 中做移动端塌列的网格：手机端降为 2 列，避免 4/5 列挤压溢出 */
@media (max-width: 600px) {
    .categories-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .shop-entries {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .recommend-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* 8) 商家入驻页（merchant.html）内联布局的移动端塌列
     该页两处关键布局（紫色渐变卡、图文两栏卡）写死在 inline style 里，
     需在此用 !important 兜底，避免手机端溢出裁字 / 双栏挤压成竖排单字。 */
@media (max-width: 768px) {
    /* 紫色渐变 banner 卡：手机端改为纵向堆叠（标题→描述→按钮），
       解除左侧 min-width 约束并撑满宽度，让文字正常换行，不再被压成窄列 */
    .merchant-banner {
        padding: 24px !important;
        gap: 16px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    .merchant-banner__text {
        min-width: 0 !important;
        width: 100% !important;
    }
    /* 按钮在窄屏允许整块换行、靠左并独占一行，避免 nowrap 顶破布局 */
    .merchant-banner__btn {
        white-space: normal !important;
        align-self: flex-start !important;
    }
    /* 图文两栏卡：外层塌成单列（图上、文下），并缩小内边距与占位图高度 */
    .merchant-showcase {
        grid-template-columns: 1fr !important;
    }
    .merchant-showcase__body {
        padding: 28px !important;
    }
    #merchant-showcase-image-wrap {
        min-height: 220px !important;
    }
}
/* 手机端进一步把功能列表塌为单列，彻底消除"竖排单字"挤压 */
@media (max-width: 600px) {
    .merchant-list {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    /* 展示卡标题在窄屏去掉 <br> 造成的大间距，统一自然换行 */
    #merchant-showcase-title {
        font-size: 22px !important;
    }
}

/* 9) 新闻/展会/多媒体/关于 等页共用的"标题 + 标签页"头部（inline flex 行）
     手机端标题与标签条被挤到同一行，CJK 文字在挤压下逐字换行 → 标签竖排单字。
     统一兜底：标题独占一行、标签条换到下一行，并禁止标签内部拆字。 */
@media (max-width: 768px) {
    /* 外层头部：允许换行，标题落第一行的整行 */
    div[style*="border-bottom:1px solid #e8ecf2"] {
        flex-wrap: wrap !important;
    }
    div[style*="border-bottom:1px solid #e8ecf2"] > h2 {
        margin: 0 0 8px !important;
        width: 100% !important;
    }
    /* 内层标签条：换行到下一行、收窄间距、整条占满 */
    div[style*="gap:36px"] {
        gap: 20px !important;
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    /* 每个标签（含激活态 span 与跳转 a）禁止逐字拆行 */
    div[style*="gap:36px"] > * {
        white-space: nowrap !important;
    }
}

/* 10) 首页通栏轮播 banner：换背景图后多端自适应
      - PC 用横图(16:9)，手机优先用专属竖版图，均由 JS 用 background cover 铺满、不变形
      - 小屏提高 banner 高度，让竖版图 cover 时上下裁切更少、主体更完整 */
@media (max-width: 768px) {
    .hero-carousel-full { height: 480px; }
    .hero-carousel-full .carousel-slide { padding-bottom: 92px; }
}
@media (max-width: 480px) {
    .hero-carousel-full { height: 460px; }
}
@media (max-width: 360px) {
    .hero-carousel-full { height: 420px; }
}