/* ===================================================================
   卡Go 前台 H5 App 层  h5-app.css   v20261102c
   - 加载位置：h5.css / h5-nav.css 之后（最终覆盖层，可用高特异性压制历史规则）
   - 版式基线：双列商品网格（4:3 图）+ 48px 吸顶栏 + 吸底购买条 + 56px 底部导航
   - 只做视觉/布局覆盖，不改 DOM、类名、JS 钩子
   - >=992px 在文件末尾还原桌面版式
   =================================================================== */

:root {
    --h5-primary: #0071e3;
    --h5-primary-soft: rgba(0, 113, 227, .08);
    --h5-bg: #f5f5f7;
    --h5-card: #ffffff;
    --h5-text: #1d1d1f;
    --h5-text-2: #6e6e73;
    --h5-line: #e5e5ea;
    --h5-tb-h: 56px;
}

/* ---------------- 1. 基础 ---------------- */
html { -webkit-text-size-adjust: 100% !important; }

html body,
body {
    background: var(--h5-bg) !important;
    color: var(--h5-text) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

body.h5-tb { padding-bottom: calc(var(--h5-tb-h) + env(safe-area-inset-bottom) + 12px) !important; }
body.h5-tb-buy { padding-bottom: calc(var(--h5-tb-h) + env(safe-area-inset-bottom) + 92px) !important; }

main.container,
.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
}

main.container { padding-top: 10px !important; padding-bottom: 20px !important; }

/* ---------------- 2. 顶栏 48px ---------------- */
.navbar-acg {
    position: sticky !important;
    top: 0 !important;
    z-index: 900 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, .94) !important;
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: .5px solid var(--h5-line) !important;
    box-shadow: none !important;
}

.navbar-acg > .container {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 8px;
}

.navbar-acg .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    gap: 6px !important;
}

.navbar-acg .navbar-brand .brand-logo {
    width: 24px !important;
    height: 24px !important;
    border-radius: 7px !important;
    object-fit: cover;
}

/* ---------------- 3. 面板 / 卡片 ---------------- */
.panel,
.hero-acg,
.fly-panel,
.auth-card {
    background: var(--h5-card) !important;
    border: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    overflow: hidden !important;
}

.panel { margin-bottom: 10px !important; }

.panel-header {
    padding: 10px 14px !important;
    border-bottom: .5px solid #f0f0f2 !important;
    background: transparent !important;
}

.panel-header .panel-title { font-size: 13.5px !important; font-weight: 600 !important; letter-spacing: .2px; }

.panel-body { padding: 12px 14px !important; font-size: 13.5px !important; line-height: 1.62 !important; }
.panel-body p { margin: 0 0 6px !important; word-break: break-word; overflow-wrap: anywhere; }
.panel-body p:last-child { margin-bottom: 0 !important; }

/* ---------------- 4. 分类胶囊 ---------------- */
.chip-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 2px 0 6px !important;
    margin: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.chip-list::-webkit-scrollbar { display: none !important; }

.chip {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 13px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--h5-text-2) !important;
    background: #fff !important;
    border: 1px solid var(--h5-line) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.chip.is-primary {
    color: #fff !important;
    background: var(--h5-primary) !important;
    border-color: var(--h5-primary) !important;
    font-weight: 600 !important;
}

.chip .chip-icon { width: 17px !important; height: 17px !important; border-radius: 5px !important; }

/* ---------------- 5. 首页商品网格（双列） ---------------- */
html body .row.item-list,
html body .item-list {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -5px !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
}

html body .row.item-list > a[class*="col-"],
html body .item-list > a[class*="col-"],
html body .item-list > a,
html body .item-list > .col-12 {
    flex: 0 0 50% !important;
    width: 50% !important;
    max-width: 50% !important;
    padding: 0 5px !important;
    margin: 0 0 10px !important;
    display: block !important;
    color: inherit !important;
    text-decoration: none !important;
}

html body .item-list .acg-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
    background: #fff !important;
    border: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06) !important;
    overflow: hidden !important;
}

html body .item-list .acg-thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    background-color: #f2f2f4 !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 0 !important;
}

html body .item-list .p-3 { padding: 9px 10px 11px !important; }

html body .item-list .tags { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; margin-bottom: 5px !important; }

html body .item-list .goods-title {
    margin: 0 0 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.34 !important;
    color: var(--h5-text) !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 36px !important;
}

html body .item-list .stat-row { margin: 0 0 3px !important; }

html body .item-list .price {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--h5-text) !important;
    line-height: 1.15 !important;
    letter-spacing: -.2px;
}

html body .item-list .price .unit { font-size: 12px !important; font-weight: 600 !important; margin-right: 1px; }

html body .item-list .stat-bottom {
    display: flex !important;
    justify-content: space-between !important;
    gap: 4px !important;
    font-size: 11px !important;
    color: var(--h5-text-2) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}

.badge-soft,
.badge-soft-success,
.badge-soft-primary,
.badge-soft-info,
.badge-soft-warning,
.badge-soft-danger {
    padding: 1px 6px !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    border: 0 !important;
    border-radius: 5px !important;
    background: #f0f0f2 !important;
    color: var(--h5-text-2) !important;
}

.badge-soft-success { background: rgba(26, 157, 90, .1) !important; color: #1a9d5a !important; }
.badge-soft-primary { background: var(--h5-primary-soft) !important; color: var(--h5-primary) !important; }

/* ---------------- 6. 商品详情页 ---------------- */
.h5-item-page { padding-bottom: 128px !important; }

html body .h5-item-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: start !important;
}

html body .h5-item-hero {
    width: 100% !important;
    max-height: none !important;
    aspect-ratio: 4 / 3 !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

html body .h5-item-hero .item-cover {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 8px !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    box-sizing: border-box;
}

html body .h5-item-main { width: 100% !important; min-width: 0 !important; }

html body .h5-item-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
    letter-spacing: -.2px;
    margin: 2px 0 8px !important;
    color: var(--h5-text) !important;
}

.h5-item-badges { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px !important; margin-bottom: 10px !important; }

html body .h5-item-price .price,
html body .abacus .price {
    font-size: 24px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -.4px;
    color: var(--h5-text) !important;
}

html body .h5-item-price .price .unit,
html body .abacus .price .unit { font-size: 14px !important; font-weight: 600 !important; margin-right: 2px; }

.h5-item-form { gap: 12px !important; margin-top: 10px !important; display: flex !important; flex-direction: column !important; }
.h5-field { width: 100% !important; }
.h5-label { font-size: 12.5px !important; font-weight: 600 !important; color: var(--h5-text-2) !important; margin-bottom: 7px !important; }

/* 规格：双列大按钮（高特异性压制历史三列规则） */
html body .sku-list.h5-sku-grid,
html body .h5-sku-grid.sku-list,
html body .sku-list,
html body .h5-sku-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
}

html body .h5-sku-grid .sku {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    min-height: 52px !important;
    max-width: none !important;
    padding: 9px 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 1.28 !important;
    color: var(--h5-text) !important;
    background: #fff !important;
    border: 1px solid var(--h5-line) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
}

html body .h5-sku-grid .sku .badge-money {
    position: static !important;
    display: block !important;
    margin: 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--h5-text-2) !important;
    background: transparent !important;
    padding: 0 !important;
}

html body .h5-sku-grid .sku.is-primary {
    color: var(--h5-primary) !important;
    background: var(--h5-primary-soft) !important;
    border-color: var(--h5-primary) !important;
    font-weight: 600 !important;
    box-shadow: 0 0 0 1px var(--h5-primary) inset !important;
}

html body .h5-sku-grid .sku.is-primary .badge-money { color: var(--h5-primary) !important; }

/* 数量步进器 */
html body .h5-qty {
    width: 100% !important;
    max-width: 180px !important;
    display: flex !important;
    align-items: center !important;
    border: 1px solid var(--h5-line) !important;
    border-radius: 11px !important;
    overflow: hidden !important;
    background: #fff !important;
}

html body .h5-qty button,
html body .h5-qty .change-num-sub,
html body .h5-qty .change-num-add {
    width: 46px !important;
    height: 42px !important;
    font-size: 19px !important;
    line-height: 1 !important;
    border: 0 !important;
    background: #fff !important;
    color: var(--h5-text) !important;
    flex: 0 0 auto !important;
}

html body .h5-qty input {
    height: 42px !important;
    font-size: 16px !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

/* 支付方式 */
.cash-pay .pay-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }

.cash-pay .pay-list > * {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 46px !important;
    padding: 10px 13px !important;
    background: #fff !important;
    border: 1px solid var(--h5-line) !important;
    border-radius: 11px !important;
    font-size: 14px !important;
    cursor: pointer;
}

/* 吸底购买条 */
html body .h5-buybar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(var(--h5-tb-h) + env(safe-area-inset-bottom)) !important;
    max-width: none !important;
    width: 100% !important;
    z-index: 1150 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 14px !important;
    background: rgba(255, 255, 255, .97) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border: 0 !important;
    border-top: .5px solid var(--h5-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, .05) !important;
}

.h5-buybar-label { font-size: 11px !important; color: var(--h5-text-2) !important; }
.h5-buybar-price { font-size: 19px !important; font-weight: 700 !important; line-height: 1.1 !important; }
.h5-buybar-price .unit { font-size: 12px !important; font-weight: 600 !important; margin-right: 1px; }

.h5-buybar-btn {
    flex: 0 0 auto !important;
    min-width: 126px !important;
    padding: 10px 18px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--h5-primary) !important;
    border-radius: 999px !important;
    text-align: center !important;
    text-decoration: none !important;
}

/* ---------------- 7. 底部三段导航 ---------------- */
html body .h5-tabbar {
    height: calc(var(--h5-tb-h) + env(safe-area-inset-bottom)) !important;
    z-index: 1250 !important;
    background: rgba(255, 255, 255, .96) !important;
    border-top: .5px solid var(--h5-line) !important;
}

html body .h5-tabbar a {
    gap: 2px !important;
    font-size: 10.5px !important;
    letter-spacing: 0 !important;
    color: #8e8e93 !important;
}

html body .h5-tabbar a svg { width: 22px !important; height: 22px !important; }
html body .h5-tabbar a.on { color: var(--h5-primary) !important; font-weight: 600 !important; }

/* ---------------- 8. 表单 / 表格 / 用户中心 ---------------- */
input, select, textarea { font-size: 16px !important; }

.form-control, .form-select, .layui-input {
    min-height: 44px !important;
    border: 1px solid var(--h5-line) !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
    font-size: 16px !important;
    color: var(--h5-text) !important;
}

.btn, .layui-btn { border-radius: 999px !important; min-height: 42px !important; font-size: 15px !important; font-weight: 600 !important; }

.table-responsive, .table-wrap, .fixed-table-container { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }

table { font-size: 13px !important; }
table th, table td { white-space: normal !important; word-break: break-word; }

.layui-nav-tree, .fly-sidebar { display: none !important; }

/* ---------------- 9. 桌面端还原（>=992px） ---------------- */
@media (min-width: 992px) {
    main.container, .container { max-width: 1180px !important; padding-left: 12px !important; padding-right: 12px !important; }
    main.container { padding-bottom: 32px !important; }

    html body .row.item-list,
    html body .item-list { margin: 0 -6px !important; }

    html body .row.item-list > a[class*="col-"],
    html body .item-list > a[class*="col-"],
    html body .item-list > a,
    html body .item-list > .col-12 {
        flex: 0 0 25% !important;
        width: 25% !important;
        max-width: 25% !important;
        padding: 0 6px !important;
        margin: 0 0 16px !important;
    }

    html body .item-list .acg-thumb { aspect-ratio: auto !important; height: 190px !important; }
    html body .item-list .goods-title { font-size: 15px !important; height: 42px !important; }
    html body .item-list .price { font-size: 21px !important; }

    html body .h5-item-grid { grid-template-columns: minmax(0, 440px) minmax(0, 1fr) !important; gap: 32px !important; }
    html body .h5-item-hero { aspect-ratio: 1 / 1 !important; }
    .h5-item-page { padding-bottom: 32px !important; }

    html body .sku-list.h5-sku-grid,
    html body .h5-sku-grid.sku-list,
    html body .sku-list,
    html body .h5-sku-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

    html body .h5-buybar {
        left: auto !important;
        right: 28px !important;
        bottom: 28px !important;
        max-width: 380px !important;
        width: auto !important;
        border: 1px solid var(--h5-line) !important;
        border-radius: 14px !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .1) !important;
        padding: 12px 16px !important;
    }
}


/* ===== v20261102e 修复：100vh 固定滚动容器导致移动端内容被裁 ===== */
@media (max-width: 991.98px) {
    html body .bg-content {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
        display: block !important;
    }
    /* 兜底：确保固定底栏不压住页面最后内容 */
    html body { padding-bottom: calc(var(--h5-tb-h) + env(safe-area-inset-bottom) + 14px) !important; }
    html body.h5-tb-buy { padding-bottom: calc(var(--h5-tb-h) + env(safe-area-inset-bottom) + 94px) !important; }
}

/* 充值页按钮与输入区间距 */
html body .recharge-page .btn,
html body .form-inline .btn { margin-top: 8px !important; }