/* =============================================================================
 * responsive.css  ——  Cream 广场 主业务移动端适配覆盖层
 * 作用：在不修改原 style.css 的前提下，通过媒体查询把 PC 版布局渐进地降级
 *      成适合平板和手机的布局。
 *
 * 说明：
 *   1) 本文件必须在 style.css 之后加载（见 header.php）。
 *   2) 部分页面（index.php、shop_list.php、shop_blank.php 等）在 PHP 里写了
 *      内联 <style>，例如 .Main_S_M{top:1000px}，它们的优先级等于本文件。
 *      因此对关键布局属性我们使用 !important 强制覆盖。
 *   3) 风格保持现状（粉色 + 可爱风），只做布局适配，不改主题色。
 * ========================================================================== */

/* ============ 基础：防止超宽元素在小屏出现横向滚动条 ============ */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
img, video {
    max-width: 100%;
    height: auto;
}

/* ============================================================
 * 全局修复：主导航"▼"三角与菜单文字重叠（见用户报告）
 *
 * 根因：
 *   .FirstUl 是 flex 容器并设了 max-width: 70%，视口较窄（或一级菜单项多）时
 *   <li> 会被 flex-shrink 压缩，里面 <a> 的文字横向溢出到 padding-right 外，
 *   与绝对定位在 right:18px 的 ::after 小三角叠在一起（例如 "Cream广场" 那项）。
 *
 * 修复：
 *   1) 禁止 <li> 收缩，且不换行；让 li 至少保持 <a> 的内容宽度
 *   2) 给 .has-submenu 的 <a> 预留 padding-right，给三角形腾位置
 *   3) 把三角往内挪一点，使其始终落在预留的 padding 空白区
 *
 * 注：仅对 > 768px 起效，移动端已把三角 display:none 了，不需要这套规则。
 * ============================================================ */
@media screen and (min-width: 769px) {
    nav .FirstUl {
        flex-wrap: nowrap;
    }
    nav .FirstUl > li {
        flex-shrink: 0 !important;
        white-space: nowrap;
    }
    nav .FirstUl > .has-submenu > a {
        padding-right: 55px !important;  /* = 三角 16px + 左右缓冲 */
        position: relative;
    }
    nav .FirstUl > .has-submenu::after {
        right: 22px !important;          /* 居中落在预留空白里 */
    }
}

/* ============================================================
 * 主流笔记本 (1025-1440px) —— 只收窄导航 padding，防止 5 个菜单项被挤出
 *                             nav.png 装饰带之外
 * ============================================================ */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
    nav .FirstUl > li > a {
        padding: 0 26px !important;
    }
    nav .FirstUl > .has-submenu > a {
        padding-right: 42px !important;
    }
    nav .FirstUl > .has-submenu::after {
        right: 16px !important;
    }
}

/* ============================================================
 * 平板及以下 (<= 1024px)
 * ============================================================ */
@media screen and (max-width: 1024px) {
    .Width1440 {
        padding: 0 16px;
        box-sizing: border-box;
    }

    /* 导航：允许变宽一点，背景图缩放 */
    nav {
        width: 92% !important;
    }
    nav .FirstUl {
        max-width: 90% !important;
        margin-left: 80px !important;
    }
    nav .FirstUl > li > a {
        padding: 0 18px !important;
        font-size: 16px !important;
    }
    /* 平板范围内：has-submenu 需要更紧凑的 padding-right 才能让所有项都塞进 nav.png 装饰带内 */
    nav .FirstUl > .has-submenu > a {
        padding-right: 38px !important;
    }
    nav .FirstUl > .has-submenu::after {
        right: 14px !important;
    }

    /* 首页两列变一列 */
    .index_top {
        flex-direction: column !important;
    }
    .index_top_l,
    .index_top_c {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }

    /* 商品卡片从 4 列变 3 列 */
    .bwg_M_two > ul > li,
    .xny_M_b li {
        width: calc(33.333% - 20px) !important;
    }

    /* 许愿池两栏变一栏 */
    .xyc_M {
        flex-direction: column !important;
    }
    .xyc_M_l,
    .xyc_right_Main,
    .xyc_M_r {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }
}

/* ============================================================
 * 手机横屏/窄平板 (<= 768px)  —— 主要适配断点
 * ============================================================ */
@media screen and (max-width: 768px) {

    /* -------- 背景图：iOS 的 fixed 会抖动且性能差，改 scroll -------- */
    body {
        background-attachment: scroll !important;
        background-position: top center !important;
    }

    /* -------- 顶部 Logo / 头像原本用 position:absolute 钉在右上角，
                手机上会压到导航上。改成流式 -------- */
    .logo {
        position: static !important;
        text-align: center;
        padding: 16px 0 8px;
    }
    .logo img {
        width: 140px !important;
        max-width: 50%;
    }
    .touxiang {
        position: static !important;
        text-align: center;
        padding: 8px 0;
    }
    .touxiang .bTmg {
        width: 100px !important;
    }
    .touxiang .b2Tmg {
        width: 56px !important;
        left: auto !important;
        top: auto !important;
        position: relative !important;
        margin-left: -24px;
        margin-top: -32px;
        vertical-align: bottom;
    }

    /* -------- 导航：去掉 nav.png 背景图，改纯色；横向 2 行展开 -------- */
    nav {
        width: 100% !important;
        height: auto !important;
        background: linear-gradient(135deg, #fcdde0 0%, #f9c3cc 100%) !important;
        background-image: none !important;
        margin: 0 !important;
        padding: 8px 0;
        border-radius: 0 !important;
    }
    nav .topUl {
        display: flex !important;
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
        padding: 6px 12px !important;
        margin: 0 !important;
        font-size: 14px;
        color: #fff;
        position: static !important;
    }
    nav .topUl > li {
        list-style: none;
    }
    nav .topUl a {
        color: #fff !important;
    }
    nav .FirstUl {
        position: static !important;
        display: flex !important;
        flex-wrap: wrap;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        justify-content: center;
    }
    nav .FirstUl > li {
        height: auto !important;
        line-height: normal !important;
        flex: 0 0 auto;
    }
    nav .FirstUl > li > a {
        padding: 10px 14px !important;
        font-size: 15px !important;
        border-right: 1px solid rgba(255, 255, 255, 0.4) !important;
        display: inline-block;
        line-height: 1.4;
    }
    /* 隐藏 PC 版二级菜单的小三角（空间不够） */
    nav .FirstUl > .has-submenu::after {
        display: none !important;
    }
    /* 二级菜单：移动端 hover 不可用，干脆全部展开平铺
       每个一级菜单下面的二级菜单作为一行缩略标签显示 */
    nav .FirstUl > .has-submenu {
        width: 100%;
        margin-bottom: 6px;
    }
    nav .FirstUl > .has-submenu > a {
        display: block;
        border-right: 0 !important;
        border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
    }
    nav .SecondUl {
        position: static !important;
        display: flex !important;  /* 直接展开，省去 hover 依赖 */
        background: rgba(255, 255, 255, 0.9) !important;
        margin: 4px 0 10px !important;
        border-radius: 10px !important;
        top: auto !important;
        box-shadow: none !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        padding: 6px !important;
        animation: none !important;
    }
    nav .SecondUl li {
        width: auto !important;
        height: 32px !important;
        line-height: 32px !important;
        padding: 0 12px !important;
        margin: 3px !important;
        border-radius: 16px !important;
        background: rgba(252, 221, 224, 0.5);
        font-size: 14px;
    }
    nav .SecondUl li.hover {
        background: #fcdde0 !important;
        color: #c2185b;
    }

    /* -------- 核心：干掉所有"写死巨大 top"的布局 -------- */
    .Main_S_M {
        top: 0 !important;
        position: static !important;
    }
    .Main_S {
        padding-top: 0 !important;
    }

    /* 绝对定位的 Main 容器（许愿池、奶油星博馆、交易所等）拉回文档流 */
    .bwg_M,
    .bwg_detail_Main,
    .ly_Main,
    .jys_Main,
    .xny_Main_s {
        position: static !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    /* -------- 首页 index.php 版块 -------- */
    .main {
        margin: 12px 8px !important;
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .index_top {
        flex-direction: column !important;
        gap: 16px;
        margin: 12px 0 !important;
    }
    .index_top_l,
    .index_top_c {
        width: 100% !important;
        margin-right: 0 !important;
    }
    .index_top_l h2,
    .index_top_c_t h2,
    .index_top_c_b_l h2,
    .index_top_c_b_r h2,
    .index_two h2,
    .index_three_top h2,
    .index_three_top .start,
    .index_four h2 {
        height: 48px !important;
        line-height: 48px !important;
        font-size: 16px !important;
        padding: 0 16px !important;
    }
    .index_top_l img {
        width: 100px !important;
        margin-top: 12px !important;
        margin-bottom: 16px !important;
    }
    .index_top_l_m {
        margin: 16px !important;
    }
    .index_top_c_t {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px;
        margin-bottom: 20px !important;
    }
    .index_top_c_t li {
        width: 100% !important;
        margin-right: 0 !important;
        box-sizing: border-box;
    }
    .index_top_c_t h2 {
        padding: 0 16px !important;
    }
    .index_top_c_b {
        flex-direction: column !important;
        gap: 12px;
    }
    .index_top_c_b_l,
    .index_top_c_b_r {
        margin-right: 0 !important;
    }
    .index_two ul {
        flex-direction: column !important;
        margin: 0 !important;
        gap: 12px;
    }
    .index_two li {
        width: 100% !important;
        margin: 0 !important;
    }
    .index_three {
        flex-direction: column !important;
        margin: 0 0 20px !important;
        gap: 16px;
    }
    .index_three li {
        width: 100% !important;
        margin: 0 !important;
    }
    .index_three_top .right {
        display: none !important;  /* "(一部分)"等冗余元素在手机上隐藏 */
    }
    .index_four {
        margin-top: 20px !important;
        overflow-x: auto;   /* 表格可横向滚动 */
    }
    .index_four table {
        min-width: 560px;
    }
    .index_six {
        flex-direction: column !important;
    }
    .index_six_l {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 20px;
    }
    .index_five_con li {
        padding: 0 16px !important;
        flex-wrap: wrap;
    }

    /* -------- 奶油星物馆 index_bwg.php -------- */
    .bwg_M_t {
        flex-direction: column !important;
        margin: 16px 0 24px !important;
    }
    .bwg_M_t_l,
    .bwg_M_t_r {
        width: 100% !important;
    }
    .bwg_M_t_l_t_t {
        margin-right: 0 !important;
    }
    .bwg_M_t_l_t_b {
        flex-wrap: wrap;
    }
    .bwg_M_t_l_t_b li,
    .bwg_M_t_l_t_b_btn {
        width: 100% !important;
        margin: 0 0 10px 0 !important;
        box-sizing: border-box;
    }
    /* 资源列表：每屏一列 */
    .bwg_M_two > ul {
        flex-direction: column !important;
        padding: 0 !important;
        margin: 10px 0 !important;
    }
    .bwg_M_two > ul > li {
        width: 100% !important;
        margin: 0 0 16px 0 !important;
        border-radius: 20px !important;
    }
    .bwg_M_two > ul > li img {
        border-radius: 20px 20px 0 0 !important;
    }
    .bwg_M_two > ul > li h2 {
        padding: 14px 16px !important;
        font-size: 18px !important;
    }
    .bwg_M_two > ul > li .con {
        padding: 0 16px 12px !important;
        flex-wrap: wrap;
        gap: 12px;
    }
    .bwg_M_two > ul > li .con > div {
        width: auto !important;
        font-size: 14px;
    }
    .bwg_M_three_Ul {
        margin: 0 !important;
    }
    .bwg_M_three_Ul > li {
        width: 100% !important;
        margin: 0 0 16px 0 !important;
        padding: 16px !important;
    }
    .bwg_M_title {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }
    .bwg_M_four,
    .bwg_M_five,
    .bwg_M_detail_Three,
    .bwg_M_detail_Four {
        margin: 20px 16px !important;
    }
    .bwg_M_detail_One .con_t {
        flex-direction: column !important;
        gap: 8px;
    }
    .bwg_M_detail_One .con_t h2 {
        font-size: 22px !important;
    }

    /* -------- 许愿池 index_xyc.php -------- */
    .xyc_M {
        flex-direction: column !important;
        padding: 12px 8px;
    }
    .xyc_M_l {
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 16px;
    }
    .xyc_right_Main,
    .xyc_M_r {
        width: 100% !important;
        height: auto !important;
        max-height: 75vh;
    }
    /* 许愿池里用了 position:absolute 吸顶的筛选条，改回文档流 */
    .xyc_M_r_c {
        position: static !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 12px 16px !important;
        box-sizing: border-box;
        flex-wrap: wrap;
        gap: 10px;
    }
    .xyc_M_r_t,
    .xyc_M_r_t_l,
    .xyc_M_r_t_r {
        flex-wrap: wrap;
    }
    .xyc_M_r_c_r {
        margin-right: 0 !important;
    }
    .xyc_M_r_b {
        padding: 20px 16px !important;
    }
    .xyc_M_r_b_1 {
        width: 100% !important;
    }
    .xyc_M_r_b_2,
    .xyc_M_r_b_3,
    .xyc_M_r_b_4 {
        width: 33.333% !important;
        font-size: 13px;
        text-align: center;
    }
    .creator_header textarea,
    .creator_header input {
        width: 100% !important;
        box-sizing: border-box;
    }
    .mlk_M {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 16px 12px !important;
    }

    /* -------- 商城列表 shop_list.php / shop_xny.php -------- */
    .xny_M {
        width: 100% !important;
        padding: 16px !important;
        box-sizing: border-box;
    }
    .xny_M_t {
        flex-direction: column !important;
        gap: 12px;
        padding-bottom: 12px !important;
        margin-bottom: 20px !important;
    }
    .xny_M_t li {
        width: 100% !important;
    }
    .xny_M_b {
        padding: 0 !important;
        margin: 0 !important;
    }
    .xny_M_b li {
        width: calc(50% - 12px) !important;  /* 两列布局更紧凑 */
        margin: 0 6px 16px !important;
        border-radius: 20px !important;
    }
    .xny_M_b li img {
        border-radius: 20px 20px 0 0 !important;
    }
    .xny_M_b li h2 {
        padding: 10px !important;
        font-size: 14px !important;
    }
    .xny_M_b_Ul .c_btn {
        width: calc(100% - 20px) !important;
        margin: 0 10px 16px !important;
    }
    .cateList {
        flex-direction: column !important;
        padding: 16px !important;
    }
    .cateList_l,
    .cateList_r {
        width: 100% !important;
    }
    .cateList_l li,
    .cateList_r li {
        width: calc(50% - 10px) !important;
        margin-right: 10px !important;
        margin-bottom: 10px;
    }
    .pageList {
        margin-top: 20px !important;
        font-size: 16px;
    }
    .pageList .num {
        padding: 4px 12px !important;
        margin: 0 10px !important;
    }

    /* -------- 鼠鼠银行 shop_blank.php -------- */
    .blank_M .user_header {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .blank_M .user_info {
        width: 100% !important;
        text-align: center;
    }
    .blank_M .user_data {
        justify-content: center;
        flex-wrap: wrap;
        gap: 12px;
    }
    .goods_grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    .goods_grid h2 {
        grid-column: 1 / -1;
        font-size: 18px;
    }
    .goods_item {
        width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .goods_thumb img {
        width: 100% !important;
        height: auto !important;
    }
    .exchange_btn {
        width: 100% !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
    .modal-content {
        width: 92% !important;
        max-width: 420px !important;
        margin: 10vh auto !important;
        padding: 20px 16px !important;
        box-sizing: border-box;
    }

    /* -------- 购物车 cart.php -------- */
    .cartMain .cartList {
        padding: 8px !important;
    }
    .cartMain .cartList li {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 12px !important;
        gap: 12px;
    }
    .cartMain .cartList .left {
        width: 100% !important;
    }
    .cartMain .cartList img {
        width: 80px !important;
        height: 80px !important;
    }
    .cartMain .cartList .rigMain {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
    }
    .cartMain .cartList .right {
        width: auto !important;
    }
    .cartMain .cartList .right .prev,
    .cartMain .cartList .right .add {
        width: 32px !important;
        height: 32px !important;
        line-height: 30px !important;
        font-size: 18px !important;
    }
    .cartMain .cartList .right .inp {
        width: 40px !important;
        height: 32px !important;
        text-align: center;
    }
    .cartMain .addList {
        flex-direction: column !important;
        gap: 16px;
        padding: 16px !important;
    }
    .cartMain .addList .left,
    .cartMain .addList .right {
        width: 100% !important;
        text-align: center;
    }
    .cartMain .addList .right .btn {
        width: 100% !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    .cartMain .shipping-info {
        padding: 0 12px;
    }
    .cartMain .form-group input,
    .cartMain .form-group textarea {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* -------- Footer -------- */
    footer {
        height: auto !important;
        line-height: 1.6 !important;
        padding: 14px 12px !important;
        margin-top: 24px !important;
    }
    footer p {
        font-size: 12px;
        word-break: break-word;
    }
    footer img {
        vertical-align: middle;
    }

    /* -------- 通用字号缩放 -------- */
    h1 { font-size: 22px !important; }
    h2 { font-size: 18px !important; }
    h3 { font-size: 16px !important; }
}

/* ============================================================
 * 小屏手机 (<= 480px) —— 极窄屏再次压缩
 * ============================================================ */
@media screen and (max-width: 480px) {
    nav .FirstUl > li > a {
        padding: 8px 10px !important;
        font-size: 14px !important;
    }
    nav .topUl {
        font-size: 12px !important;
    }
    .Width1440 {
        padding: 0 10px;
    }
    /* 超窄屏把双列商品卡也降成单列 */
    .xny_M_b li,
    .goods_grid {
        width: 100% !important;
    }
    .xny_M_b li {
        margin: 0 0 14px !important;
    }
    .goods_grid {
        grid-template-columns: 1fr !important;
    }
    .xyc_M_r_b_2,
    .xyc_M_r_b_3,
    .xyc_M_r_b_4 {
        font-size: 12px;
    }
}