/* ============================================================
   移动端适配层（加载在 style.css 之后，覆盖桌面样式）
   底部导航 / 响应式布局 / 爆款商品横向自动滑动
   ============================================================ */

/* ===== 爆款商品横向自动滑动（桌面 + 手机通用） ===== */
.hot-scroll-viewport {
    overflow: hidden;
    width: 100%;
}
/* 爆款橙色标签内图标间距（模仿截图） */
.section-tag i { margin-right: 4px; }
.hot-scroll-track {
    display: flex;
    gap: 12px;
    width: max-content;
    animation: hotMarquee 120s linear infinite;
    will-change: transform;
}
.hot-scroll-viewport:hover .hot-scroll-track,
.hot-scroll-viewport:active .hot-scroll-track {
    animation-play-state: paused;
}
@keyframes hotMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.hot-scroll-track .hot-product-card {
    width: 208px;
    flex-shrink: 0;
    margin: 0;
}
/* 滚出视口时暂停动画，省电省 CPU（减少手机端卡顿） */
.hot-scroll-viewport.is-offscreen .hot-scroll-track { animation-play-state: paused; }
/* 系统“减少动态效果”时完全关闭滚动动画 */
@media (prefers-reduced-motion: reduce) {
    .hot-scroll-track { animation: none !important; }
}
/* 分类分页容器：桌面端"溶解"，让条目直接落在父级网格里（手机端见 media 内规则） */
.cat-page { display: contents; }
/* 移动端分类页（左一级 / 右二级+商品）：桌面端隐藏，仅手机端显示 */
.m-catpage { display: none; }

/* ===== 底部导航栏（仅移动端显示） ===== */
.m-tabbar {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    background: #fff;
    border-top: 1px solid #eef0f4;
    box-shadow: 0 -4px 16px rgba(15,23,42,.06);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
}
.m-tabbar-inner {
    display: flex;
    align-items: stretch;
}
.m-tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-decoration: none;
    color: #9aa3b2;
    font-size: 11px;
    padding: 5px 0 3px;
    position: relative;
}
.m-tab-item .mt-ico {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    border-radius: 50%;
    transition: transform .15s;
}
.m-tab-item.active { color: #f43f24; font-weight: 600; }
.m-tab-item.active .mt-ico { transform: scale(1.08); }

/* 中间凸起的"兑换"圆钮（模仿截图：蓝色渐变圆形按钮悬浮于导航条上沿） */
.m-tab-item.is-center { color: #1f6fe0; }
.m-tab-item .mt-ico.mt-center {
    width: 42px; height: 42px;
    margin-top: -20px;
    background: linear-gradient(160deg, #52a8ff, #1f6fe0);
    border-radius: 50%;
    box-shadow: 0 5px 12px rgba(31,111,224,.38);
}

/* ===== 移动端快捷入口（仅首页注入） ===== */
.m-quick {
    display: none;
    background: #fff;
    border-radius: 14px;
    margin: 10px 12px 0;
    padding: 16px 2px 14px;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
}
.m-quick-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.m-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: #4b5568;
    font-size: 11px;
    padding: 0;
}
/* 圆形浅色底图标（对齐参考图：38px 圆形 + 20px 彩色图标） */
.m-quick-item .mq-ico {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
}
.m-quick-item .mq-ico svg { width: 20px; height: 20px; }
/* 快捷入口四色浅底（粉/薄荷/蓝/浅蓝，对齐参考图） */
.m-quick-item .mq-ico.tone-red { background: #ffe9ee; }
.m-quick-item .mq-ico.tone-orange { background: #e2f7f1; }
.m-quick-item .mq-ico.tone-blue { background: #e8f1ff; }
.m-quick-item .mq-ico.tone-teal { background: #e9f3ff; }

/* ============================================================
   ≤ 768px 移动端布局
   ============================================================ */
@media (max-width: 768px) {
    /* 防止任何横向溢出元素把整页撑宽（撑宽后 hero 栅格会一起变宽） */
    html, body { max-width: 100%; overflow-x: hidden; }
    body {
        padding-bottom: calc(64px + env(safe-area-inset-bottom));
        /* 背景图：柔和渐变 + 顶部装饰图形，卡片间隙透出背景图（对齐参考图） */
        background-color: #eef2f9;
        background-image:
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='390'%20height='470'%3E%3Cdefs%3E%3ClinearGradient%20id='g'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0'%20stop-color='%234f9bff'/%3E%3Cstop%20offset='1'%20stop-color='%238fc0ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M-60%20-60%20Q%20140%2040%2080%20220%20Q%2020%20380%20-80%20400%20Z'%20fill='url(%23g)'%20opacity='0.16'/%3E%3Ccircle%20cx='372'%20cy='40'%20r='98'%20fill='%234f9bff'%20opacity='0.13'/%3E%3Ccircle%20cx='338'%20cy='360'%20r='74'%20fill='%237aa8ff'%20opacity='0.10'/%3E%3C/svg%3E"),
            linear-gradient(180deg, #eaf1fc 0%, #f1f5fb 42%, #f4f6fa 100%);
        background-repeat: no-repeat, no-repeat;
        background-size: 100% 470px, 100% 100%;
        background-position: top center, top center;
    }
    .m-tabbar { display: block; }
    .m-quick { display: block; }

    /* ---- 顶栏（对齐参考图：总高 55px，更紧凑，让下方内容整体上移） ---- */
    .header { position: sticky; top: 0; z-index: 500; background: #fff; border-bottom: 1px solid #f0f2f6; }
    .header-inner { height: 55px; padding: 0 10px; gap: 8px; flex-wrap: nowrap; }
    .logo-text .en { display: none; }
    .logo-text .cn { font-size: 15px; }
    .logo-icon { width: 28px !important; height: 28px !important; }
    .logo-img { height: 28px; width: auto; } /* 手机端 Logo 28px，与顶栏 55px 高度协调 */
    .header .search-box { flex: 1; min-width: 0; height: 34px; border-radius: 17px; }
    .header .logo { flex: 0 0 auto; }
    .logo-text .cn { white-space: nowrap; }
    .search-box input { flex: 1; min-width: 0; width: auto; padding: 0 8px; font-size: 12.5px; }
    .search-box .search-icon { display: none; } /* 手机端搜索框内不放放大镜（模仿参考图） */
    /* 搜索按钮：蓝色小胶囊（对齐参考图），不再通栏贴边 */
    .search-box button { flex: 0 0 auto; min-width: 0; width: auto; height: 26px; margin-right: 3px; padding: 0 15px;
        font-size: 12.5px; border-radius: 13px; background: #1f6fe0; }
    .nav { display: none !important; } /* 底部导航替代顶部导航 */
    .header-actions { display: flex !important; align-items: center; flex: none; gap: 8px; } /* 手机端显示设置入口 */
    .header-actions .btn-register { display: none !important; } /* 上游手机端顶栏无登录按钮 */
    .header-gear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
        border-radius: 50%; background: #f2f4f8; color: #5b6474; font-size: 15px; flex: none; text-decoration: none; }
    .header-gear:active { background: #e6eaf1; }

    /* ---- 首页 hero：横幅通栏（与参考图一致，无左右留白、无圆角），仅留 6px 与顶栏的呼吸位 ---- */
    .hero-section { flex-direction: column; margin: 6px 0 0; padding: 0; gap: 0; }
    .category-sidebar-wrap { display: none; } /* 悬浮菜单在触屏无意义 */
    .banner-section { flex-direction: column; }
    .banner-area { min-height: 0; width: 100%; border-radius: 0; }
    .banner-main { min-height: 0; flex: none; aspect-ratio: 448 / 170; border-radius: 0; }
    .banner-subs { display: none !important; }

    /* ---- 快捷入口下公告条 ---- */
    .notice-bar, .site-notice {
        margin: 8px 12px 0;
        border-radius: 12px;
        font-size: 11.5px;
    }
    /* 首页公告条：白色圆角小条（对齐参考图：图标后有竖向分隔线） */
    .announcement { margin: 8px 12px 0; padding: 9px 12px; border-radius: 14px; font-size: 12px; gap: 9px; }
    .announcement-icon { font-size: 17px; line-height: 1; flex: none; position: relative; padding-right: 10px; }
    .announcement-icon::after { content: ''; position: absolute; right: 0; top: 2px; bottom: 2px; width: 1px; background: #edeff4; }
    .announcement-more { font-size: 11.5px; flex: none; color: #9aa3b2; }

    /* ---- 一级分类：白卡 + 5 列 × 2 行，按页横向滑动（对齐参考图） ---- */
    .categories-section { margin: 8px 12px 0; padding: 10px 6px 12px; background: #fff; border-radius: 14px; }
    .categories-section .cat-head { margin-bottom: 8px; padding: 0 8px; }
    .categories-section h2 { font-size: 15px; margin-bottom: 0; }
    .categories-section .view-all { font-size: 11.5px; }
    /* .category-grid 滑动条本体规则见下方"分类网格"通用块（与商品页 .cat-grid 共用） */

    /* 分类标题右侧"全部分类"链接：蓝色（模仿截图） */
    .cat-level-head .cat-more { color: #1f6fe0; font-size: 12.5px; }
    .cat-level-head .cat-more i { color: #1f6fe0; }

    /* ---- 排序 Tab（模仿截图：激活为深色胶囊，未激活白底描边） ---- */
    .product-toolbar .sort-link, .ag-card .sort-link { background: #fff; border: 1px solid #eef1f6; }
    .product-toolbar .sort-link.is-active, .ag-card .sort-link.is-active { background: #262b36; border-color: #262b36; color: #fff; }

    /* ---- 爆款商品（白卡容器 + 86px 大图卡：图上 / 采购价 / 价格，对齐参考图右侧） ---- */
    .hot-products { margin: 8px 12px 0; padding: 11px 6px 10px; background: #fff; border-radius: 14px; }
    .hot-products .section-header { margin-bottom: 12px; padding: 0 4px; gap: 8px; }
    .hot-products .section-header h2 { font-size: 16px; color: #1a1d23; }
    .hot-products .section-tag { font-size: 11px; padding: 3px 8px; border-radius: 999px; }
    .hot-products .view-all { font-size: 12px; }
    .hot-products-grid, .hot-grid { display: block !important; }
    .hot-scroll-track { gap: 11px; padding-bottom: 2px; }
    .hot-scroll-track .hot-product-card {
        width: 86px;
        border-radius: 10px;
        border: 1px solid #eef0f4;
        background: #fff;
        padding: 5px 5px 7px;
        box-sizing: border-box;
        box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    }
    .hot-scroll-track .hot-product-card img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 6px;
        background: #f7f9fc;
    }
    /* 商品名隐藏，只保留"采购价"标签 + 橙色价格（对齐参考图） */
    .hot-products-grid .hot-product-title { display: none; }
    .hot-products-grid .hot-product-info { padding: 7px 1px 0; }
    .hot-products-grid .hot-product-price { display: flex; flex-direction: column; gap: 0; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; letter-spacing: -.2px; color: #ff6b35; }
    .hot-products-grid .hot-product-price span { font-size: 11px; line-height: 1.2; color: #ff7b34; font-weight: 400; margin-bottom: 2px; }

    /* ---- 爆款弹窗（模仿上游：近全屏 + 两列商品卡，边界留白小） ---- */
    .hot-modal-mask { padding: 0; }
    .hot-modal {
        width: 100% !important;
        max-height: 86vh;
        padding: 14px 12px 12px;
        border-radius: 14px;
    }
    .hot-modal-close { top: 10px; right: 10px; width: 26px; height: 26px; font-size: 12px; background: none; color: #999; }
    .hot-modal-title { font-size: 17px; margin-bottom: 12px; }
    .hot-modal-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        padding: 0 !important;
    }
    /* 弹窗内商品卡：浅灰描边 + 圆角，图上/名中/价下 */
    .hot-modal-grid .hot-product-card {
        width: 100%;
        border: 1px solid #eef0f4;
        border-radius: 10px;
        background: #fff;
    }
    .hot-modal-grid .hot-product-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 10px 10px 0 0;
    }
    .hot-modal-grid .hot-product-info { padding: 8px 9px 10px; }
    .hot-modal-grid .hot-product-title {
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 13px;
        line-height: 1.45;
        color: #333;
        margin-bottom: 6px;
        min-height: 38px;
    }
    .hot-modal-grid .hot-product-price {
        display: flex;
        align-items: baseline;
        gap: 4px;
        font-size: 16px;
    }
    .hot-modal-grid .hot-product-price span {
        font-size: 11px;
        color: #ff6b35;
        font-weight: 600;
    }

    /* ---- features / footer ---- */
    .features { grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 12px; }
    .feature-item { padding: 12px 8px; }
    .feature-item p { display: none; }
    .footer-content { display: none; }
    .footer-bottom { padding: 12px; }

    /* ---- 商品列表页 goods.html ---- */
    .goods-layout, .category-layout, .goods-container { flex-direction: column; padding: 10px; }
    .goods-sidebar, .cat-sidebar { width: 100% !important; position: static !important; }
    .goods-toolbar { flex-wrap: wrap; gap: 6px; padding: 10px; }
    .sort-pill, .view-toggle { font-size: 12px; }
    .view-switch { display: none !important; } /* 上游手机端无视图切换 */
    .product-list { grid-template-columns: 1fr !important; gap: 10px; }
    .product-grid-list { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .product-card, .g-card { border-radius: 12px; }
    .cat-icons-row { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }

    /* ---- 商品页分类条：单行横向滑动 ---- */
    .goods-container .cat-grid {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap: 16px;
        padding: 2px 12px 6px;
        scrollbar-width: none;
    }
    .goods-container .cat-grid::-webkit-scrollbar { display: none; }
    .goods-container .cat-grid .cat-item {
        flex: 0 0 58px;
        scroll-snap-align: start;
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        text-decoration: none; color: #4b5568; font-size: 11px;
    }
    .goods-container .cat-item img { width: 52px; height: 52px; border-radius: 14px; }
    .goods-container .cat-item .cat-name { font-size: 11px; }

    /* ---- 首页一级分类：5 列 × 2 行 = 一页，整页横向翻动（参考图布局） ---- */
    .category-grid {
        display: flex !important;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        overscroll-behavior-x: contain;
        touch-action: pan-x pan-y;
        gap: 0;
        padding: 0;
        grid-template-columns: none !important;
        scrollbar-width: none;
    }
    .category-grid::-webkit-scrollbar { display: none; }
    .category-grid .cat-page {
        flex: 0 0 100%;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: min-content;
        gap: 22px 0;
        align-content: start;
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
    .category-grid .category-item {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        text-decoration: none; color: #4b5568; font-size: 11px;
        padding: 0 2px;
    }
    .category-grid .category-icon { width: 38px; height: 38px; border-radius: 11px; }
    .category-grid .category-icon img { width: 100%; height: 100%; object-fit: cover; }
    .category-grid .category-name { font-size: 11px; line-height: 15px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* ---- 商品列表卡片容器：收紧内边距（桌面 .gp-card 26px 太大） ---- */
    .goods-container .gp-card { padding: 14px 12px; }

    /* ---- 商品卡（对齐上游手机端截图：小图 + 标题/简介 + 整行三色指标块 + 价格行/小购买按钮） ---- */
    .product-item {
        display: grid; grid-template-columns: 92px 1fr;
        gap: 6px 10px; align-items: start;
        padding: 14px; border-radius: 16px;
    }
    .product-cover { width: 92px; height: 92px; border-radius: 10px; grid-column: 1; grid-row: 1 / span 2; }
    .product-main { display: contents; }
    .product-title { grid-column: 2; grid-row: 1; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; font-weight: 700; }
    .product-desc { grid-column: 2; grid-row: 2; margin: 0; font-size: 11px; }
    .metrics { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin: 6px 0 0; }
    .metric { padding: 8px 6px; gap: 5px; border-radius: 10px; min-width: 0; }
    .m-ico { width: 22px; height: 22px; border-radius: 6px; font-size: 10px; flex-shrink: 0; }
    .m-txt { min-width: 0; flex: 1; }
    .m-txt small { font-size: 9px; }
    .m-txt b { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-sub { display: none; }
    .metric .id-copy { display: none; }
    .grid-tags { display: none; }
    .product-pricebox { grid-column: 1 / -1; grid-row: 4; width: 100%; flex-shrink: 1; display: flex; flex-direction: row; align-items: center; justify-content: space-between; background: none; border-left: none; border-top: 1px dashed #eef1f6; border-radius: 0; padding: 10px 2px 0; margin: 0; }
    .price-ribbon { display: none; }
    .price-content { text-align: left; }
    .price-content small { display: none; }
    .price-big { font-size: 24px; font-weight: 800; }
    .price-big em { font-size: 14px; }
    /* 立即购买：右侧小号橙色胶囊（模仿截图，不再通栏） */
    .product-pricebox .buy-link {
        width: auto; flex: 0 0 auto;
        padding: 7px 16px; font-size: 13px; border-radius: 17px; gap: 5px;
        box-shadow: 0 3px 8px rgba(255, 90, 31, .28);
    }
    .product-pricebox .buy-link i { font-size: 12px; }

    /* ---- 用户中心类页面（user/recharge/billings/messages/invite/security） ---- */
    .layout { flex-direction: column !important; padding: 0 0 20px !important; gap: 0 !important; }
    .layout > .sidebar {
        width: 100% !important;
        position: static !important;
        display: flex;
        overflow-x: auto;
        gap: 6px;
        padding: 10px 12px;
        background: #fff;
        border-radius: 0;
        -webkit-overflow-scrolling: touch;
    }
    .layout > .sidebar .u-head { display: none; }
    .layout > .sidebar .menu-group { display: none; }
    .layout > .sidebar .menu-item {
        flex-shrink: 0;
        white-space: nowrap;
        padding: 7px 12px;
        border-radius: 16px;
        background: #f2f5fa;
        font-size: 12px;
        margin: 0;
    }
    .layout > .sidebar .menu-item.active { background: #1f6fe0; color: #fff; }
    .layout > .main { width: 100% !important; padding: 12px !important; }
    .hero { padding: 14px; }
    .stat-grid, .ov-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .panel, .card { border-radius: 12px; }

    /* ---- 订单查询 ---- */
    .query-container { padding: 12px; }
    .query-box { padding: 16px; border-radius: 14px; }
    .query-input-group { flex-direction: column; gap: 8px; }
    .query-input-group button, .query-input-group .btn { width: 100%; }

    /* ---- 商品详情 ---- */
    .product-detail, .pd-wrap { flex-direction: column; padding: 12px; }
    .pd-img, .product-gallery { width: 100% !important; }
    .pd-info, .product-info { width: 100% !important; }

    /* ---- 登录/注册 ---- */
    .login-container { margin: 20px 12px !important; padding: 24px 18px !important; }

    /* ---- 充值页 ---- */
    .amount-grid, .recharge-amounts { grid-template-columns: repeat(3, 1fr) !important; }

    /* ---- 表格类面板横向滚动 ---- */
    .table-wrap, .panel { overflow-x: auto; }
    table { min-width: 480px; }

    /* ============================================================
       移动端分类页（goods.html）：左一级分类竖列表 + 右二级分类/商品
       ============================================================ */
    /* 隐藏桌面端首页式模块，改用移动端双栏 */
    body.page-goods .hero-section,
    body.page-goods .announcement,
    body.page-goods .hot-products,
    body.page-goods .goods-container,
    body.page-goods .site-footer { display: none !important; }

    body.page-goods .m-catpage {
        display: flex;
        align-items: flex-start;
        background: #f3f5f9;
        min-height: calc(100vh - 56px - 62px);
    }
    /* 左侧一级分类（吸顶、独立滚动，自带单独滚动条） */
    body.page-goods .m-rail {
        position: sticky;
        top: 56px;
        flex: 0 0 74px;
        width: 74px;
        height: calc(100vh - 56px - 62px);
        overflow-y: auto;
        background: #eef1f7;
        -webkit-overflow-scrolling: touch;
        /* 与右栏明显区分的细分隔线，强化"单独"滚动列观感 */
        border-right: 1px solid #e3e8f0;
        /* 单独滚动条（仅在内容超出时出现） */
        scrollbar-width: thin;
        scrollbar-color: #c4ccdb #eef1f7;
    }
    /* WebKit 单独滚动条：细窄、与右栏内容明显区分 */
    body.page-goods .m-rail::-webkit-scrollbar { width: 4px; display: block; }
    body.page-goods .m-rail::-webkit-scrollbar-track { background: transparent; }
    body.page-goods .m-rail::-webkit-scrollbar-thumb { background: #c4ccdb; border-radius: 4px; }
    body.page-goods .m-rail::-webkit-scrollbar-thumb:hover { background: #aab4c6; }
    body.page-goods .m-rail-item {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 4px;
        padding: 11px 2px; font-size: 11px; color: #5b6474; text-align: center;
        cursor: pointer; transition: background .15s;
    }
    body.page-goods .m-rail-item img {
        width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
        background: #fff; flex: none;
    }
    body.page-goods .m-rail-name {
        line-height: 1.2; max-width: 66px; overflow: hidden;
        text-overflow: ellipsis; white-space: nowrap;
    }
    body.page-goods .m-rail-count { font-size: 10px; color: #9aa3b2; min-height: 12px; }
    body.page-goods .m-rail-item.active { background: #fff; color: #1f6fe0; font-weight: 600; }
    body.page-goods .m-rail-item.active .m-rail-count { color: #1f6fe0; }
    body.page-goods .m-rail-item.active::before {
        content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
        width: 3px; height: 24px; background: #1f6fe0; border-radius: 0 3px 3px 0;
    }

    /* 右侧内容区 */
    body.page-goods .m-content { flex: 1; min-width: 0; padding: 10px 10px 24px; }
    body.page-goods .m-promo {
        background: linear-gradient(135deg, #3f7ff0, #2a5fd0);
        border-radius: 12px; padding: 14px 16px; color: #fff;
        box-shadow: 0 4px 12px rgba(42,95,208,.22);
    }
    body.page-goods .m-promo-title { font-size: 16px; font-weight: 700; }
    body.page-goods .m-promo-sub { font-size: 12px; opacity: .92; margin-top: 3px; }
    body.page-goods .m-cur-cat { font-size: 15px; font-weight: 700; color: #1f6fe0; margin: 12px 2px 8px; }
    body.page-goods .m-sub-label { font-size: 12.5px; color: #5b6474; margin: 2px 2px 8px; }
    body.page-goods .m-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.page-goods .m-sub-card {
        display: flex; align-items: center; gap: 10px;
        background: #fff; border-radius: 12px; padding: 12px;
        box-shadow: 0 1px 4px rgba(15,23,42,.05); cursor: pointer;
    }
    body.page-goods .m-sub-card.active { outline: 1.5px solid #1f6fe0; }
    body.page-goods .m-sub-card img { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex: none; }
    body.page-goods .m-sub-info { min-width: 0; }
    body.page-goods .m-sub-name { font-size: 13px; color: #2b3242; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    body.page-goods .m-sub-count { font-size: 11px; color: #9aa3b2; margin-top: 2px; }
    body.page-goods .m-list-head { font-size: 13.5px; font-weight: 700; color: #2b3242; margin: 14px 2px 8px; }

    /* 商品双列网格 */
    body.page-goods .m-prod-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.page-goods .m-prod-card {
        background: #fff; border-radius: 12px; overflow: hidden;
        box-shadow: 0 1px 4px rgba(15,23,42,.05); cursor: pointer;
    }
    body.page-goods .m-prod-img { position: relative; width: 100%; aspect-ratio: 1 / 1; background: #f5f7fb; }
    body.page-goods .m-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
    body.page-goods .m-badge {
        position: absolute; top: 6px; left: 6px; z-index: 2;
        background: rgba(24,144,255,.92); color: #fff; font-size: 10px;
        padding: 2px 7px; border-radius: 9px;
    }
    body.page-goods .m-prod-body { padding: 8px 8px 10px; }
    body.page-goods .m-prod-title {
        font-size: 12px; line-height: 1.35; color: #2b3242; height: 32px;
        overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        margin-bottom: 6px;
    }
    body.page-goods .m-pill {
        display: flex; align-items: center; gap: 5px;
        font-size: 10.5px; padding: 4px 8px; border-radius: 7px; margin-bottom: 5px;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    body.page-goods .m-pill i { font-size: 10px; }
    body.page-goods .m-pill-green { background: #eafaf1; color: #18a058; }
    body.page-goods .m-pill-blue { background: #eef4ff; color: #1f6fe0; }
    body.page-goods .m-prod-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
    body.page-goods .m-price { color: #ff3b30; font-weight: 800; font-size: 17px; line-height: 1; }
    body.page-goods .m-price em { font-style: normal; font-size: 12px; margin-right: 1px; }
    body.page-goods .m-price small { font-size: 10px; color: #9aa3b2; font-weight: 400; margin-left: 1px; }
    body.page-goods .m-cart {
        width: 30px; height: 30px; border-radius: 50%; border: none;
        background: linear-gradient(135deg, #ff8a3d, #ff5a1f); color: #fff;
        font-size: 13px; display: flex; align-items: center; justify-content: center;
        box-shadow: 0 3px 8px rgba(255,90,31,.3); cursor: pointer; flex: none;
    }
    body.page-goods .m-loading,
    body.page-goods .m-empty { grid-column: 1 / -1; text-align: center; color: #98a0af; padding: 30px 0; font-size: 12px; }
    body.page-goods .m-more { display: none; text-align: center; color: #1f6fe0; font-size: 12.5px; padding: 14px 0; cursor: pointer; }
}

/* ≤380px 小屏微调 */
@media (max-width: 380px) {
    .product-grid-list { grid-template-columns: repeat(2, 1fr) !important; }
}