/* ============================================================
   分站皮肤（XStore 风）
   参考 xstoremarket.com：浅灰底 + 青色主色 + 方正卡片 + 紧凑网格

   与总站的区别（总站 = 靛蓝 #4f46e5 + 大圆角 + 白顶栏 + 宽松留白）：
     · 主色   靛蓝 → 青色 #0891b2
     · 圆角   14~18px → 6px（方正）
     · 卡片   柔阴影 → 细边框 + 悬停青色描边
     · 网格   宽松 → 紧凑（同屏能看到更多商品）
     · 顶栏   白色 → 深墨蓝，与浅色内容区形成明确分层

   ★ 靠覆盖生效，不改任何 HTML 结构；要还原只需删掉 Index.html 里那行 link。
   ============================================================ */

:root {
    --bx-primary: #0891b2;        /* 青 */
    --bx-primary-dark: #0e7490;
    --bx-primary-soft: #ecfeff;
    --bx-ink: #0f172a;            /* 深墨蓝：顶栏/标题 */
    --bx-text: #334155;
    --bx-muted: #64748b;
    --bx-line: #e2e8f0;
    --bx-bg: #f1f5f9;
    --bx-radius: 6px;
}

/* ---------------- 全局底色 ---------------- */
body {
    background: var(--bx-bg) !important;
    color: var(--bx-text);
}

/* ---------------- 顶栏：白色 → 深墨蓝 ---------------- */
.site-header {
    background: var(--bx-ink) !important;
    border-bottom: 3px solid var(--bx-primary) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* 滚动后原样式会把顶栏刷成半透明白，深色顶栏下必须一起压掉 */
.site-header.scrolled {
    background: var(--bx-ink) !important;
    box-shadow: none !important;
}
/* ★ logo 原本是渐变文字（background-clip:text + -webkit-text-fill-color:transparent），
   只改 color 不生效——必须同时把渐变和 text-fill-color 复位，否则深色顶栏上是一团黑字 */
.site-header .logo-text,
.header-logo .logo-text,
.header-logo:hover .logo-text {
    color: #fff !important;
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.site-header .header-action-link {
    color: #cbd5e1 !important;
    border-radius: var(--bx-radius) !important;
}
.site-header .header-action-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.08) !important;
}
.site-header .search-input {
    border-radius: var(--bx-radius) 0 0 var(--bx-radius) !important;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}
.site-header .search-input::placeholder { color: #94a3b8 !important; }
.site-header .search-input:focus {
    background: #fff !important;
    color: var(--bx-ink) !important;
    border-color: var(--bx-primary) !important;
    box-shadow: none !important;
}
.site-header .search-btn {
    background: var(--bx-primary) !important;
    border: none !important;
    border-radius: 0 var(--bx-radius) var(--bx-radius) 0 !important;
    color: #fff !important;
}
.site-header .search-btn:hover { background: var(--bx-primary-dark) !important; }
.site-header .lang-btn {
    color: #94a3b8 !important;
    border-radius: var(--bx-radius) !important;
}
.site-header .lang-btn.active,
.site-header .lang-btn:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

/* ---------------- 二级导航：胶囊 → 直角下划线标签 ---------------- */
.sub-nav {
    background: #fff !important;
    border-bottom: 1px solid var(--bx-line) !important;
    box-shadow: none !important;
}
.sub-nav-link {
    border-radius: 0 !important;
    color: var(--bx-text) !important;
    font-weight: 600 !important;
    border-bottom: 2px solid transparent !important;
    transition: color .15s, border-color .15s !important;
}
.sub-nav-link:hover,
.sub-nav-link.active {
    color: var(--bx-primary) !important;
    background: transparent !important;
    border-bottom-color: var(--bx-primary) !important;
}
.sub-nav-link i { color: var(--bx-primary) !important; }

/* 「推广赚佣金」原本是橙色渐变胶囊，与新配色冲突：改成青色实心方块 */
#homePromoEntry {
    background: var(--bx-primary) !important;
    border-radius: var(--bx-radius) !important;
    color: #fff !important;
    box-shadow: none !important;
}
#homePromoEntry:hover { background: var(--bx-primary-dark) !important; transform: none !important; }
#homePromoEntry,
#homePromoEntry i { color: #fff !important; }

/* ---------------- 分类侧栏：方正 + 青色选中条 ---------------- */
.sidebar-categories {
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    box-shadow: none !important;
}
.sidebar-categories-header {
    background: var(--bx-ink) !important;
    border-radius: var(--bx-radius) var(--bx-radius) 0 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.sidebar-categories-header,
.sidebar-categories-header * { color: #fff !important; }
.category-sidebar-item {
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    color: var(--bx-text) !important;
    font-weight: 600 !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
.category-sidebar-item:hover,
.category-sidebar-item.active {
    background: var(--bx-primary-soft) !important;
    color: var(--bx-primary-dark) !important;
    border-left-color: var(--bx-primary) !important;
    transform: none !important;
}
.category-sidebar-item.active { font-weight: 700 !important; }

/* ---------------- 列表头 ---------------- */
.products-header {
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid var(--bx-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-bottom: 0.6rem !important;
}
.products-header-title {
    color: var(--bx-ink) !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}


/* ---------------- 商品卡：方正描边 + 悬停青色 ---------------- */
.product-card {
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    box-shadow: none !important;
    padding: 14px !important;
    transition: border-color .15s, box-shadow .15s, transform .15s !important;
}
.product-card:hover {
    border-color: var(--bx-primary) !important;
    box-shadow: 0 6px 18px rgba(8, 145, 178, 0.12) !important;
    transform: translateY(-2px) !important;
}
.card-product-name {
    color: var(--bx-ink) !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
}
.product-card:hover .card-product-name { color: var(--bx-primary-dark) !important; }

/* 供应商行：分站不展示货源方（原模板默认值会显示上游品牌名） */
.card-supplier { display: none !important; }

.card-section-meta { color: var(--bx-muted) !important; font-size: 0.8rem !important; }
.card-stock { color: var(--bx-ink) !important; }
.card-stock.out-of-stock { color: #dc2626 !important; }

/* 库存条：圆角细条 → 直角 */
.stock-meter {
    height: 4px !important;
    border-radius: 0 !important;
    background: #e2e8f0 !important;
}
.stock-meter-fill {
    border-radius: 0 !important;
    background: var(--bx-primary) !important;
}

/* 价格区：加分隔线，价格用青色强调 */
.card-section-price {
    border-top: 1px dashed var(--bx-line) !important;
    padding-top: 10px !important;
    margin-top: 10px !important;
}
.card-price-label {
    color: var(--bx-muted) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.card-price-value {
    color: var(--bx-primary-dark) !important;
    font-weight: 800 !important;
}

/* 收藏按钮：淡化为次要操作 */
.card-follow-btn {
    border-radius: var(--bx-radius) !important;
    border: 1px solid var(--bx-line) !important;
    background: #fff !important;
    color: var(--bx-muted) !important;
}
.card-follow-btn:hover {
    border-color: var(--bx-primary) !important;
    color: var(--bx-primary) !important;
    background: var(--bx-primary-soft) !important;
}

/* ---------------- 通用按钮：直角块状 ---------------- */
.btn { border-radius: var(--bx-radius) !important; }
.btn-primary,
button.btn-primary,
.btn-primary:focus,
.layui-btn-normal {
    background: var(--bx-primary) !important;
    border-color: var(--bx-primary) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    box-shadow: none !important;
}
.btn-primary:hover,
button.btn-primary:hover {
    background: var(--bx-primary-dark) !important;
    border-color: var(--bx-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--bx-primary) !important;
    border-color: var(--bx-primary) !important;
}
.btn-outline-primary:hover {
    background: var(--bx-primary) !important;
    color: #fff !important;
}
a { color: var(--bx-primary); }
a:hover { color: var(--bx-primary-dark); }

/* ---------------- 公告条 ---------------- */
.notice-bar {
    background: var(--bx-primary-soft) !important;
    border: 1px solid #a5f3fc !important;
    border-radius: var(--bx-radius) !important;
    color: #155e75 !important;
}

/* ---------------- 分页 ---------------- */
.pagination .page-link {
    border-radius: var(--bx-radius) !important;
    color: var(--bx-text) !important;
    border-color: var(--bx-line) !important;
}
.pagination .page-item.active .page-link {
    background: var(--bx-primary) !important;
    border-color: var(--bx-primary) !important;
    color: #fff !important;
}

/* ---------------- 页脚胶囊：跟随青色主色 ---------------- */
.site-footer {
    background: #fff !important;
    border-top: 1px solid var(--bx-line) !important;
}
.site-footer a.ft-chip:hover {
    color: var(--bx-primary-dark) !important;
    border-color: var(--bx-primary) !important;
    box-shadow: 0 8px 20px rgba(8, 145, 178, 0.12) !important;
}
.site-footer a.ft-chip:hover i { color: var(--bx-primary) !important; }

/* ---------------- 移动端收紧 ---------------- */
@media (max-width: 768px) {
    .product-list-card {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
        gap: 10px !important;
    }
    .product-card { padding: 11px !important; }
}

/* ============================================================
   ★ 首页布局改造（不只是换色）★
   总站：左侧竖排分类栏 + 右侧商品网格
   分站：顶部横向分类条 + 通栏商品网格（同屏商品更多，结构上就不是一回事）
   ============================================================ */

/* 1) 分类栏：左侧竖排 → 顶部横向滚动条 */
.sidebar-categories {
    width: 100% !important;
    max-width: none !important;
    flex: 0 0 100% !important;
    position: static !important;
    float: none !important;
    max-height: none !important;
    margin: 0 0 14px !important;
    border: none !important;
    background: transparent !important;
}
/* 「商品分类」那个标题栏去掉，横条不需要 */
.sidebar-categories-header { display: none !important; }

#sidebar-categories-list,
.sidebar-categories-list {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 4px !important;
    max-height: none !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    scrollbar-width: thin;
}
/* 父子分类在横条里平铺 */
.category-sidebar-group { display: contents !important; }

.category-sidebar-item {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    border-left: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
    font-size: 0.9rem !important;
}
.category-sidebar-item:hover,
.category-sidebar-item.active {
    background: transparent !important;
    border-left: none !important;
    border-bottom-color: var(--bx-primary) !important;
    color: var(--bx-primary-dark) !important;
}

/* 2) 商品区通栏 */
.home-columns { display: block !important; }
.products-main-area {
    width: 100% !important;
    max-width: none !important;
    flex: 1 1 100% !important;
}



/* ============================================================
   ★ 商品展示形式：卡片网格 → 长条列表（与总站的卡片墙彻底区分）★
   一行一个商品：左侧名称，中间库存/销量，右侧价格，最右收藏。
   信息横向排布，同屏能看到更多商品，也更像"批发清单"而不是"商品橱窗"。
   ============================================================ */
.product-list-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    overflow: hidden !important;
}

.product-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 230px 150px !important;
    align-items: center !important;
    gap: 18px !important;
    padding: 14px 18px !important;
    margin: 0 !important;
    background: #fff !important;
    border: none !important;
    border-bottom: 1px solid var(--bx-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background .12s !important;
}
.product-card:last-child { border-bottom: none !important; }
.product-card:hover {
    background: var(--bx-primary-soft) !important;
    transform: none !important;
    box-shadow: none !important;
    border-color: var(--bx-line) !important;
}

/* 各区块在长条里的位置 */
.product-card .card-section-title {
    order: 1 !important;
    min-height: 0 !important;
    padding: 0 !important;
}
.product-card .card-section-meta {
    order: 2 !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-card .card-section-price {
    order: 3 !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-card .card-section-top {
    order: 4 !important;
    padding: 0 !important;
    justify-content: flex-end !important;
}

.card-product-name { font-size: 0.95rem !important; }
.card-meta-row { display: flex !important; gap: 14px !important; font-size: 0.8rem !important; }
.stock-meter { margin-top: 6px !important; max-width: 200px !important; }
.card-price-value { font-size: 1.1rem !important; white-space: nowrap !important; }
.card-price-label { display: none !important; }

/* 窄屏回退：两行式 */
@media (max-width: 860px) {
    .product-card {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: 6px 12px !important;
        padding: 12px 14px !important;
    }
    .product-card .card-section-title { grid-column: 1 / -1 !important; }
    .product-card .card-section-meta  { order: 2 !important; }
    .product-card .card-section-price { order: 3 !important; }
    .product-card .card-section-top   { display: none !important; }
    .stock-meter { max-width: 140px !important; }
}

/* ============================================================
   ★ 商品详情页布局改造 ★
   总站：左「商品信息」+ 右「粘性购买卡」两栏对照 + 选项卡切换
   分站：顶部通栏吸顶下单条 → 规格表 → 顺序铺开的内容段落
   骨架从"左右对照"改成"上下推进"，没有一处版式对得上。
   ============================================================ */

/* 1) 两栏 → 单栏；购买区提到最上方并吸顶 */
.detail-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
    grid-template-columns: none !important;
}
.detail-grid .sidebar-sticky {
    order: -1 !important;            /* 购买区排到最前 */
    width: 100% !important;
    max-width: none !important;
    /* 顶部通栏不需要吸顶：sticky 会让容器高度受行盒约束，内容一多就撑不开 */
    position: static !important;
    /* align-self:stretch 会让容器高度跟随行高而不是内容，内容一多就被卡住 */
    align-self: auto !important;
    height: auto !important;
    min-height: 0 !important;
    /* ★ 原样式是给右侧竖排侧栏设计的：max-height:calc(100vh-100px) + overflow-y:auto。
       改成顶部通栏后这个限制会把「立即购买」挤到容器外，必须内部滚动才看得到。
       通栏是横向排布、天然不高，这里解除高度限制，让内容完整展开、无需滚动。 */
    max-height: none !important;
    overflow: visible !important;
}
.detail-grid .sidebar-card,
.detail-grid .sidebar-body {
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
}
/* 结算区内部横向排布：换行后各项自然堆叠，容器高度随内容增长 */
.detail-grid .sidebar-body { align-items: flex-start !important; }
.detail-grid .main-card {
    order: 1 !important;
    width: 100% !important;
    max-width: none !important;
}

/* 购买卡 → 通栏横条：标题、价格、数量、按钮横排 */
.sidebar-card {
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .06) !important;
    background: #fff !important;
}
.sidebar-head {
    background: var(--bx-ink) !important;
    color: #fff !important;
    border-radius: var(--bx-radius) var(--bx-radius) 0 0 !important;
    padding: 12px 18px !important;
}
.sidebar-head * { color: #fff !important; }
.sidebar-body {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 14px 22px !important;
    padding: 16px 18px !important;
}
.sidebar-body .sb-section {
    flex: 0 1 auto !important;
    min-width: 150px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}
/* 购买按钮所在的段落推到最右并占满剩余宽度 */
.sidebar-body .sb-section:last-child { margin-left: auto !important; flex: 0 0 auto !important; }
.sb-label {
    display: block !important;
    font-size: .75rem !important;
    color: var(--bx-muted) !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 5px !important;
}
.sb-input, .sb-input input, .sb-input select {
    border-radius: var(--bx-radius) !important;
    border-color: var(--bx-line) !important;
}
.qty-stepper-btn { border-radius: var(--bx-radius) !important; }

/* 2) 商品参数 → 标签/值 两列表格 */
.main-card .val { color: var(--bx-ink) !important; font-weight: 600 !important; }
.trust-bar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 0 !important;
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    padding: 0 !important;
}
.trust-item {
    padding: 12px 16px !important;
    border-right: 1px solid var(--bx-line) !important;
    font-size: .85rem !important;
    color: var(--bx-text) !important;
}
.trust-item:last-child { border-right: none !important; }

/* 3) 批发价：彩色横幅 → 阶梯价表格 */
.wholesale-bar {
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-left: 3px solid var(--bx-primary) !important;
    border-radius: var(--bx-radius) !important;
    color: var(--bx-text) !important;
    padding: 12px 16px !important;
    font-size: .88rem !important;
}

/* 4) 选项卡 → 顺序铺开，去掉切换 */
/* 收窄到详情页主区内，避免误伤其它页面的导航（branch.css 在用户中心所有页面都会加载）*/
.main-card .nav-tabs,
.main-card .detail-tabs,
.main-card > ul.nav { display: none !important; }
.main-card .tab-pane,
.main-card .tab-pane.active {
    display: block !important;
    opacity: 1 !important;
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) !important;
    padding: 18px 20px !important;
    margin-bottom: 12px !important;
}
/* 每段前加一条青色小标题线，替代原来的 tab 标签 */
.main-card .tab-pane::before {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: var(--bx-primary);
    margin-bottom: 14px;
}

@media (max-width: 860px) {
    .sidebar-body { flex-direction: column !important; align-items: stretch !important; }
    .sidebar-body .sb-section:last-child { margin-left: 0 !important; }
    .detail-grid .sidebar-sticky { position: static !important; }
}


/* 收藏按钮：首页不需要，整块隐藏（连带供应商行，那一列本来就只有这两样） */
.product-card .card-section-top,
.card-follow-btn { display: none !important; }

/* ============================================================
   ★ 用户中心改版（与总站区分）★
   总站：layui 默认蓝 + 圆角卡片 + 浅色侧栏
   分站：深墨蓝侧栏 + 青色选中条 + 方正描边面板 + 表头深色
   Common/Header.html 已引入本文件，所有用户中心页面自动生效。
   ============================================================ */

/* 侧边导航：浅色 → 深墨蓝，选中项左侧青色竖条 */
.layui-side, .layui-side-scroll, .layui-nav-tree {
    background: var(--bx-ink) !important;
}
.layui-nav-tree .layui-nav-item a {
    color: #cbd5e1 !important;
    border-radius: 0 !important;
    border-left: 3px solid transparent !important;
    transition: background .15s, border-color .15s, color .15s !important;
}
.layui-nav-tree .layui-nav-item a:hover {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
}
.layui-nav-tree .layui-nav-itemed > a,
.layui-nav-tree .layui-this > a,
.layui-nav-tree .layui-this a {
    background: rgba(8, 145, 178, .18) !important;
    color: #fff !important;
    border-left-color: var(--bx-primary) !important;
}
/* layui 选中项默认那条底部横线去掉，改用左侧竖条 */
.layui-nav-tree .layui-this:after,
.layui-nav-bar { display: none !important; }
.layui-nav-tree .layui-nav-child { background: rgba(0, 0, 0, .25) !important; }

/* 内容区面板：圆角阴影 → 方正描边 */
.layui-card, .layui-panel, .layui-form, .bg-content > .layui-body {
    border-radius: var(--bx-radius) !important;
    border: 1px solid var(--bx-line) !important;
    box-shadow: none !important;
    background: #fff !important;
}
.layui-card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid var(--bx-line) !important;
    border-radius: var(--bx-radius) var(--bx-radius) 0 0 !important;
    color: var(--bx-ink) !important;
    font-weight: 700 !important;
}

/* 表格：表头深色，行分隔细线 */
.layui-table thead tr,
.bootstrap-table thead tr,
table.table thead tr {
    background: var(--bx-ink) !important;
}
.layui-table thead th,
.bootstrap-table thead th,
table.table thead th {
    background: var(--bx-ink) !important;
    color: #fff !important;
    border-color: var(--bx-ink) !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
}
.layui-table td, .table td { border-color: var(--bx-line) !important; }
.layui-table tbody tr:hover, .table tbody tr:hover { background: var(--bx-primary-soft) !important; }

/* 按钮：layui 蓝 → 青色方块 */
.layui-btn:not(.layui-btn-danger):not(.layui-btn-warm) {
    background: var(--bx-primary) !important;
    border-radius: var(--bx-radius) !important;
    border: none !important;
}
.layui-btn:not(.layui-btn-danger):not(.layui-btn-warm):hover {
    background: var(--bx-primary-dark) !important;
}
.layui-btn-primary {
    background: #fff !important;
    border: 1px solid var(--bx-line) !important;
    color: var(--bx-text) !important;
}
.layui-btn-primary:hover { border-color: var(--bx-primary) !important; color: var(--bx-primary) !important; }

/* 输入框 */
.layui-input, .layui-select, .layui-textarea {
    border-radius: var(--bx-radius) !important;
    border-color: var(--bx-line) !important;
}
.layui-input:focus, .layui-textarea:focus {
    border-color: var(--bx-primary) !important;
    box-shadow: 0 0 0 3px rgba(8, 145, 178, .12) !important;
}

/* 状态徽章：统一成方正小标签 */
.acg-badge {
    border-radius: 3px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
}

/* 控制台三张数据卡：方正描边 + 左侧青色竖条 */
.hero-card {
    border-radius: var(--bx-radius) !important;
    border: 1px solid var(--bx-line) !important;
    border-left: 3px solid var(--bx-primary) !important;
    box-shadow: none !important;
    background: #fff !important;
}
.hero-card-icon { border-radius: var(--bx-radius) !important; background: var(--bx-primary) !important; }
.hero-card-label { color: var(--bx-muted) !important; text-transform: uppercase; letter-spacing: .03em; }
.hero-card-value { color: var(--bx-ink) !important; font-weight: 800 !important; }

/* 移动端菜单网格 */
.mobile-menu-item {
    border-radius: var(--bx-radius) !important;
    border: 1px solid var(--bx-line) !important;
    background: #fff !important;
}
.mobile-menu-item i { color: var(--bx-primary) !important; }

/* ============================================================
   ★ 独立功能页（充值中心 / 订单记录 / 售后申请）★
   用 Index/Header.html 轻量顶栏，不再有用户中心左侧菜单。
   ============================================================ */
.page-container {
    max-width: 1200px;
    margin: 22px auto 40px;
    padding: 0 16px;
}
.uc-panel {
    background: #fff;
    border: 1px solid var(--bx-line);
    border-radius: var(--bx-radius);
    padding: 22px 24px;
}
/* 轻量顶栏跟随分站配色（原样式是白底蓝字） */
.header-bar {
    background: var(--bx-ink) !important;
    border-bottom: 3px solid var(--bx-primary) !important;
    box-shadow: none !important;
}
.header-bar a { color: #cbd5e1 !important; border-radius: var(--bx-radius) !important; }
.header-bar a:hover { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.header-bar .logo-text { color: #fff !important; text-transform: uppercase; letter-spacing: .04em; }
.header-bar .hb-user {
    color: #fff !important;
    font-size: .85rem;
    padding: 6px 12px;
    background: rgba(8,145,178,.25);
    border-radius: var(--bx-radius);
}

/* 首页顶栏的用户名（非链接，仅标识身份） */
.site-header .header-username { cursor: default; color: #fff !important; }
.site-header .header-username:hover { background: transparent !important; }

/* ---------------- 详情页「结算订单」容器内部重排 ---------------- */
/* 金额独占整行并放大，作为视觉重心；其余选项横向排布，不再每项一行 */
.sidebar-body .amount-row {
    flex: 0 0 100% !important;
    order: -1 !important;
    background: var(--bx-primary-soft) !important;
    border: 1px solid #a5f3fc !important;
    border-radius: var(--bx-radius) !important;
    padding: 12px 14px !important;
    margin-bottom: 4px !important;
}
.sidebar-body .amount-top {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
}
.sidebar-body .amount-label { color: var(--bx-muted) !important; font-size: .8rem !important; }
.sidebar-body .amount-value {
    color: var(--bx-primary-dark) !important;
    font-size: 1.6rem !important;
    font-weight: 800 !important;
}
/* 折扣提示紧跟金额，不另起一块 */
.sidebar-body .discount-info { margin-top: 6px !important; }
.sidebar-body .discount-badge {
    background: var(--bx-primary) !important;
    color: #fff !important;
    border-radius: 3px !important;
    padding: 1px 7px !important;
    font-size: .72rem !important;
}

/* ============================================================
   ★ 结算订单卡片：彻底解除高度约束（放最末，优先级最高）★
   症状：立即购买按钮被挤出可视区，需要在卡片内滚动才能看到。
   根因：原样式为「右侧竖排侧栏」设计，给 .sidebar-sticky 设了
   max-height:calc(100vh-100px) + overflow-y:auto；改成顶部通栏后
   这个限制反而把内容裁掉。这里对整条链路（容器→卡片→内容区）
   一次性解除，并让内部回到自然块流，高度完全由内容决定。
   ============================================================ */
body .detail-grid .sidebar-sticky,
body .detail-grid .sidebar-card,
body .detail-grid .sidebar-body {
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    overflow-y: visible !important;
    position: static !important;
}
/* 内容区回到自然流：横向 flex 在窄容器里会把「立即购买」挤到看不见的位置 */
body .detail-grid .sidebar-body {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    align-content: flex-start !important;
    gap: 12px 20px !important;
}
/* 购买按钮独占一行、通栏，绝不会被挤出去 */
body .detail-grid .sidebar-body > .sb-section:last-child {
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    margin-top: 4px !important;
}
body .detail-grid .sidebar-body > .sb-section:last-child .btn,
body .detail-grid .sidebar-body > .sb-section:last-child button {
    width: 100% !important;
}

/* 商品 ID 隐藏：与总站的 ID 相同会被关联。
   ★ 只隐藏显示，不删元素 —— 下单/API 仍需要读取 #p-id 的值 ★ */
.p-id-wrap,
#p-id,
.detail-grid .p-id-wrap { display: none !important; }

/* 首页商品弹窗里的「商品ID」也一并隐藏（同样只隐藏显示，值仍可被 JS 读取） */
.commodity-stats .stat-item:has(.label-product-id) { display: none !important; }
.label-product-id,
.label-product-id + span,
span.commodityId { display: none !important; }

/* ============================================================
   结算订单卡片整体缩小 10%：内容放不下就整体缩，比逐条去猜高度约束直接得多。
   transform 不影响布局宽度，配 transform-origin: top 让它从顶部往上收。
   ============================================================ */
/* （结算卡片的单独缩放已由整页 80% 缩放取代）*/


/* ============================================================
   商品详情页整体缩放 80% + 容器加宽 20%
   用 zoom 而不是 transform：zoom 会真实参与布局重排，
   不会像 transform 那样留下"占位还在、视觉缩小"的空白。
   容器 1400px → 1680px（+20%），缩放后横向观感接近原宽度但信息密度更高。
   ============================================================ */
body .page-container {
    zoom: 0.8;
    max-width: 1680px !important;
}
/* 移动端不缩放：屏幕本来就窄，再缩就看不清了 */
@media (max-width: 860px) {
    body .page-container { zoom: 1; max-width: 100% !important; }
}

/* ============================================================
   修复：结算卡片压住下方商品区
   原因：.sidebar-sticky 作为 flex 项，高度没有按内容撑开（算出来比内容矮），
   overflow:visible 让内容溢出渲染，于是视觉上盖住了后面的 .main-card。
   办法：明确 flex: 0 0 auto（按内容定高、不被压缩）+ height: fit-content，
   并保证 .main-card 排在它下方且不被覆盖。
   ============================================================ */
body .detail-grid {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
body .detail-grid > .sidebar-sticky {
    flex: 0 0 auto !important;      /* 按内容定高，不参与伸缩 */
    height: fit-content !important;
    min-height: fit-content !important;
    overflow: visible !important;
    margin-bottom: 14px !important; /* 与下方商品区留出间距 */
}
body .detail-grid > .sidebar-sticky > .sidebar-card {
    height: fit-content !important;
    min-height: fit-content !important;
    margin-bottom: 0 !important;
}
body .detail-grid > .main-card {
    flex: 1 1 auto !important;
    position: relative !important;
    z-index: 1 !important;          /* 确保不被上方元素的溢出内容遮挡 */
    margin-top: 0 !important;
}

/* 商品描述区向下拉长约 30px
   原样式 .main-card 是 max-height: calc(100vh - 100px) + overflow-y:auto，
   描述不多时也要拖滚动条才能看全。这里把可用高度放宽 30px。 */
body .detail-grid > .main-card {
    max-height: none !important;     /* 1006：不再限高，商品卡按内容撑开，描述不用在卡片里滚 */
    overflow: visible !important;
}