/**
 * 虚拟商品商城 首页样式（配合 index/virtual.html 模板使用）
 * 皮肤由 body 上的 vm-skin-1/2/3 随机切换：
 *   vm-skin-1 幻彩紫蓝 | vm-skin-2 轻奢黑金 | vm-skin-3 清新青绿
 * 响应式断点：1024 / 768 / 480
 */

/* ==================== 基础布局 ==================== */
body.virtual-mall .vmh-page {
    background: #f5f7fb;
    padding-bottom: 40px;
    overflow-x: hidden;
}
.vmh-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

/* 虚拟商城隐藏顶部搜索条（保留 logo，以 Hero 搜索框为准，避免双搜索框） */
body.virtual-mall .search-bar,
body.virtual-mall .search-hot-keywords {
    display: none !important;
}
body.virtual-mall .random-search-wrapper {
    justify-content: center;
}

/* ==================== 分类导航栏：随机隐藏时悬浮唤出 ==================== */
/* 首页 50% 随机隐藏 / 非首页默认隐藏，鼠标悬浮“全部分类”区域时展开 */
.common-goods-category-hide {
    display: none;
}
#goods-category .goods-category-s:hover .common-goods-category-hide,
#goods-category .goods-category-s:focus-within .common-goods-category-hide {
    display: block;
}

/* ==================== Hero 主视觉 ==================== */
body.virtual-mall .vmh-hero {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    overflow: hidden;
    /* 深色兜底背景：轮播图缺失/未加载时，白色文字仍有深色衬底 */
    background: linear-gradient(120deg, #14183a 0%, #23204a 55%, #101433 100%);
}
body.virtual-mall .vmh-hero-slides {
    position: absolute;
    inset: 0;
}
body.virtual-mall .vmh-hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: vmhFade 8s infinite;
    transform: scale(1.06);
}
body.virtual-mall .vmh-slide-count-1 .vmh-hero-slide { animation: none; opacity: 1; }
body.virtual-mall .vmh-slide-count-2 .vmh-hero-slide { animation-duration: 10s; }
body.virtual-mall .vmh-slide-count-3 .vmh-hero-slide { animation-duration: 15s; }
body.virtual-mall .vmh-slide-count-4 .vmh-hero-slide { animation-duration: 20s; }
body.virtual-mall .vmh-slide-count-5 .vmh-hero-slide { animation-duration: 25s; }
body.virtual-mall .vmh-slide-count-6 .vmh-hero-slide { animation-duration: 30s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide { animation-duration: 35s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide { animation-duration: 40s; }
body.virtual-mall .vmh-slide-count-2 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-3 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-3 .vmh-hero-slide:nth-child(3) { animation-delay: -10s; }
body.virtual-mall .vmh-slide-count-4 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-4 .vmh-hero-slide:nth-child(3) { animation-delay: -10s; }
body.virtual-mall .vmh-slide-count-4 .vmh-hero-slide:nth-child(4) { animation-delay: -15s; }
body.virtual-mall .vmh-slide-count-5 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-5 .vmh-hero-slide:nth-child(3) { animation-delay: -10s; }
body.virtual-mall .vmh-slide-count-5 .vmh-hero-slide:nth-child(4) { animation-delay: -15s; }
body.virtual-mall .vmh-slide-count-5 .vmh-hero-slide:nth-child(5) { animation-delay: -20s; }
body.virtual-mall .vmh-slide-count-6 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-6 .vmh-hero-slide:nth-child(3) { animation-delay: -10s; }
body.virtual-mall .vmh-slide-count-6 .vmh-hero-slide:nth-child(4) { animation-delay: -15s; }
body.virtual-mall .vmh-slide-count-6 .vmh-hero-slide:nth-child(5) { animation-delay: -20s; }
body.virtual-mall .vmh-slide-count-6 .vmh-hero-slide:nth-child(6) { animation-delay: -25s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide:nth-child(3) { animation-delay: -10s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide:nth-child(4) { animation-delay: -15s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide:nth-child(5) { animation-delay: -20s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide:nth-child(6) { animation-delay: -25s; }
body.virtual-mall .vmh-slide-count-7 .vmh-hero-slide:nth-child(7) { animation-delay: -30s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(2) { animation-delay: -5s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(3) { animation-delay: -10s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(4) { animation-delay: -15s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(5) { animation-delay: -20s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(6) { animation-delay: -25s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(7) { animation-delay: -30s; }
body.virtual-mall .vmh-slide-count-8 .vmh-hero-slide:nth-child(8) { animation-delay: -35s; }
@keyframes vmhFade {
    0%   { opacity: 0; }
    5%   { opacity: 1; }
    45%  { opacity: 1; }
    50%  { opacity: 0; }
    100% { opacity: 0; }
}
body.virtual-mall .vmh-hero-mask {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(8, 12, 36, .88) 0%, rgba(8, 12, 36, .62) 42%, rgba(8, 12, 36, .18) 100%);
}
body.virtual-mall .vmh-hero-wave {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 60px;
    background: #f5f7fb;
    -webkit-clip-path: ellipse(75% 100% at 50% 100%);
    clip-path: ellipse(75% 100% at 50% 100%);
}
body.virtual-mall .vmh-hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-top: 30px;
    padding-bottom: 70px;
    color: #fff;
}
body.virtual-mall .vmh-hero-eyebrow {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 6px;
    opacity: .85;
    border: 1px solid rgba(255,255,255,.4);
    border-radius: 999px;
    padding: 5px 16px;
    margin-bottom: 18px;
    backdrop-filter: blur(4px);
}
body.virtual-mall .vmh-hero-title {
    font-size: 46px;
    font-weight: 900;
    letter-spacing: 4px;
    line-height: 1.2;
    margin: 0 0 12px;
    text-shadow: 0 6px 24px rgba(0,0,0,.35);
}
body.virtual-mall .vmh-hero-sub {
    font-size: 17px;
    letter-spacing: 2px;
    opacity: .92;
    margin: 0 0 30px;
}
body.virtual-mall .vmh-hero-search {
    display: flex;
    max-width: 560px;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
body.virtual-mall .vmh-hero-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    padding: 0 20px;
    font-size: 15px;
    color: #333;
    min-width: 0;
}
body.virtual-mall .vmh-hero-search button {
    border: none;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 4px;
    padding: 12px 34px;
    border-radius: 999px;
    background-color: #ff5f62;
    background-image: linear-gradient(135deg, #ff5f62, #ff9a3d);
    transition: opacity .2s ease, transform .2s ease;
}
body.virtual-mall .vmh-hero-search button:hover { opacity: .9; transform: translateY(-1px); }

/* Hero 数据条 */
body.virtual-mall .vmh-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}
body.virtual-mall .vmh-hero-stats span {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    color: rgba(255,255,255,.92);
    font-size: 14px;
    letter-spacing: 1px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 999px;
    padding: 7px 18px;
    backdrop-filter: blur(6px);
}
body.virtual-mall .vmh-hero-stats b {
    font-size: 19px;
    font-weight: 900;
    color: #fff;
}

/* ==================== 权益条（玻璃拟态） ==================== */
body.virtual-mall .vmh-container.vmh-perks {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: -44px;
    position: relative;
    z-index: 3;
}
body.virtual-mall .vmh-perk {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.65);
    border-radius: 16px;
    padding: 18px 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 56, .12);
    transition: transform .25s ease, box-shadow .25s ease;
}
body.virtual-mall .vmh-perk:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(15, 23, 56, .16);
}
body.virtual-mall .vmh-perk > div:last-child { min-width: 0; }
body.virtual-mall .vmh-perk .ico {
    width: 46px;
    height: 46px;
    min-width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--vmh-accent-a), var(--vmh-accent-b));
    box-shadow: 0 6px 14px var(--vmh-accent-shadow);
}
body.virtual-mall .vmh-perk .t {
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
    margin: 0;
}
body.virtual-mall .vmh-perk .d {
    font-size: 12px;
    color: #8a90a0;
    margin: 3px 0 0;
}

/* ==================== 档位分类导航（常驻，3 种随机样式） ==================== */
/* 样式A：胶囊横排（默认） */
body.virtual-mall .vmh-tiers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 26px auto 6px;
}
body.virtual-mall .vmh-tier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #e8eaf2;
    border-radius: 999px;
    padding: 9px 20px 9px 12px;
    color: #3a4050;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s ease;
}
body.virtual-mall .vmh-tier img {
    width: 26px;
    height: 26px;
    object-fit: contain;
}
body.virtual-mall .vmh-tier:hover {
    border-color: transparent;
    color: #fff;
    background: linear-gradient(135deg, var(--vmh-accent-a), var(--vmh-accent-b));
    box-shadow: 0 8px 20px var(--vmh-accent-shadow);
    transform: translateY(-2px);
}

/* 样式B：图标卡片网格 */
body.virtual-mall .vmh-tiers-card {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin: 26px auto 8px;
}
body.virtual-mall .vmh-tiers-card .vmh-tier {
    flex-direction: column;
    gap: 6px;
    border-radius: 16px;
    padding: 16px 8px 14px;
    text-align: center;
}
body.virtual-mall .vmh-tiers-card .vmh-tier img { width: 40px; height: 40px; }
body.virtual-mall .vmh-tiers-card .vmh-tier-name { font-size: 14px; }
body.virtual-mall .vmh-tiers-card .vmh-tier-desc {
    font-size: 11px;
    color: #9aa0b0;
    font-weight: 400;
    line-height: 1.35;
    display: block;
}
body.virtual-mall .vmh-tiers-card .vmh-tier:hover .vmh-tier-desc { color: rgba(255,255,255,.85); }

/* 样式C：渐变色块（呼应卡面档位配色） */
body.virtual-mall .vmh-tiers-block {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin: 26px auto 8px;
}
body.virtual-mall .vmh-tiers-block .vmh-tier {
    flex-direction: column;
    gap: 8px;
    border: none;
    border-radius: 16px;
    padding: 18px 8px 16px;
    text-align: center;
    background-size: 140% 140%;
    color: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 56, .16);
}
body.virtual-mall .vmh-tiers-block .vmh-tier-emoji { font-size: 30px; line-height: 1; }
body.virtual-mall .vmh-tiers-block .vmh-tier-name { font-size: 14px; font-weight: 700; text-shadow: 0 2px 8px rgba(0,0,0,.25); }
body.virtual-mall .vmh-tiers-block .vmh-tier:hover {
    transform: translateY(-4px) scale(1.02);
    background-size: 100% 100%;
    box-shadow: 0 14px 30px rgba(15, 23, 56, .26);
}

/* ==================== 楼层入场动画 ==================== */
@keyframes vmhUp {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}
body.virtual-mall .vmh-floor {
    animation: vmhUp .55s cubic-bezier(.22, .61, .36, 1) both;
}
body.virtual-mall .vmh-floor:nth-of-type(1) { animation-delay: .05s; }
body.virtual-mall .vmh-floor:nth-of-type(2) { animation-delay: .14s; }
body.virtual-mall .vmh-floor:nth-of-type(3) { animation-delay: .23s; }
body.virtual-mall .vmh-floor:nth-of-type(4) { animation-delay: .32s; }
body.virtual-mall .vmh-floor:nth-of-type(5) { animation-delay: .41s; }
body.virtual-mall .vmh-floor:nth-of-type(6) { animation-delay: .5s; }
body.virtual-mall .vmh-tiers { animation: vmhUp .45s ease both .02s; }
body.virtual-mall .vmh-perks { animation: vmhUp .5s ease both; }
@media (prefers-reduced-motion: reduce) {
    body.virtual-mall .vmh-floor,
    body.virtual-mall .vmh-tiers,
    body.virtual-mall .vmh-perks { animation: none; }
}

/* 商品卡片：悬停渐变描边 */
body.virtual-mall .vmh-card:hover {
    border-color: var(--vmh-accent-a);
    box-shadow: 0 18px 36px rgba(15, 23, 56, .13), 0 0 0 3px color-mix(in srgb, var(--vmh-accent-a) 18%, transparent);
}

/* ==================== 商品楼层 ==================== */
body.virtual-mall .vmh-floor {
    margin-top: 40px;
}
body.virtual-mall .vmh-floor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}
body.virtual-mall .vmh-floor-title {
    display: flex;
    align-items: center;
    gap: 14px;
}
body.virtual-mall .vmh-floor-bar {
    width: 7px;
    height: 40px;
    border-radius: 4px;
    background: linear-gradient(180deg, var(--vmh-accent-a), var(--vmh-accent-b));
}
body.virtual-mall .vmh-floor-title h2 {
    font-size: 26px;
    font-weight: 800;
    color: #1b2030;
    margin: 0;
    letter-spacing: 1px;
}
body.virtual-mall .vmh-floor-title p {
    font-size: 13px;
    color: #9aa0b0;
    margin: 3px 0 0;
    letter-spacing: 1px;
}
body.virtual-mall .vmh-floor-more {
    font-size: 14px;
    color: #6b7180;
    text-decoration: none;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1px solid #e5e8f0;
    background: #fff;
    transition: all .2s ease;
}
body.virtual-mall .vmh-floor-more:hover {
    color: var(--vmh-accent-a);
    border-color: var(--vmh-accent-a);
}

/* 商品网格 */
body.virtual-mall .vmh-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    gap: 18px;
}
body.virtual-mall .vmh-card {
    display: block;
    background: #fff;
    border-radius: var(--vmh-radius);
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(15, 23, 56, .05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    border: 1px solid #eef0f6;
}
body.virtual-mall .vmh-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 36px rgba(15, 23, 56, .13);
    border-color: transparent;
}
body.virtual-mall .vmh-card-img {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f2f4f9;
}
body.virtual-mall .vmh-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
body.virtual-mall .vmh-card:hover .vmh-card-img img { transform: scale(1.06); }
body.virtual-mall .vmh-card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    padding: 3px 10px;
    border-radius: 999px;
    background-color: #ff5f62;
    background-image: linear-gradient(135deg, #ff5f62, #ff9a3d);
    box-shadow: 0 4px 10px rgba(255, 95, 98, .4);
}
body.virtual-mall .vmh-card-info { padding: 12px 14px 14px; }
body.virtual-mall .vmh-card-title {
    font-size: 15px;
    font-weight: 600;
    color: #232838;
    line-height: 1.45;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 42px;
}
body.virtual-mall .vmh-card-price {
    display: flex;
    align-items: baseline;
    gap: 2px;
    color: #ff4d4f;
}
body.virtual-mall .vmh-card-price .cur { font-size: 14px; font-weight: 700; }
body.virtual-mall .vmh-card-price .num { font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
body.virtual-mall .vmh-card-price .unit { font-size: 12px; color: #9aa0b0; margin-left: 2px; }
body.virtual-mall .vmh-card-price .orig {
    font-size: 12px;
    color: #b3b8c6;
    text-decoration: line-through;
    margin-left: 8px;
}
body.virtual-mall .vmh-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
}
body.virtual-mall .vmh-card-meta .sales { font-size: 12px; color: #9aa0b0; }
body.virtual-mall .vmh-buy {
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    padding: 7px 16px;
    border-radius: 999px;
    background-color: var(--vmh-accent-a);
    background-image: linear-gradient(135deg, var(--vmh-accent-a), var(--vmh-accent-b));
    box-shadow: 0 6px 14px var(--vmh-accent-shadow);
    transition: transform .2s ease, opacity .2s ease;
}
body.virtual-mall .vmh-card:hover .vmh-buy { transform: scale(1.05); opacity: .95; }

/* ==================== 主题楼层系统（每楼层随机一种主题：配色+楼头+卡片形态） ==================== */

/* --- 主题楼头通用 --- */
body.virtual-mall .vmf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}
body.virtual-mall .vmf-head-main { display: flex; align-items: center; gap: 14px; min-width: 0; }
body.virtual-mall .vmf-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    border-radius: 14px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 6px 16px rgba(0,0,0,.12);
}
body.virtual-mall .vmf-head-text h2 {
    font-size: 26px;
    font-weight: 900;
    margin: 0;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
body.virtual-mall .vmf-badge {
    font-size: 12px;
    font-style: normal;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: 1px;
}
body.virtual-mall .vmf-head-text p {
    font-size: 13px;
    margin: 4px 0 0;
    letter-spacing: 1px;
    opacity: .8;
}
body.virtual-mall .vmf-more {
    font-size: 13px;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 999px;
    white-space: nowrap;
    transition: all .2s ease;
}
body.virtual-mall .vmf-body { counter-reset: vmfrank; }

/* --- 主题1：⚡限时特惠（红·横滑大卡） --- */
body.virtual-mall .vmh-t-flash {
    background: linear-gradient(135deg, #ff6a5f 0%, #ff3d6e 60%, #ff2d6f 100%);
    border-radius: 22px;
    padding: 24px 0 26px;
    margin-top: 30px;
    box-shadow: 0 14px 34px rgba(255, 61, 110, .28);
}
body.virtual-mall .vmh-t-flash .vmf-head-text h2,
body.virtual-mall .vmh-t-flash .vmf-head-text p { color: #fff; }
body.virtual-mall .vmh-t-flash .vmf-badge { background: rgba(255,255,255,.22); color: #fff; }
body.virtual-mall .vmh-t-flash .vmf-more { background: #fff; color: #ff3d6e; }
body.virtual-mall .vmh-t-flash .vmf-more:hover { transform: translateY(-2px); }
body.virtual-mall .vmh-t-flash .vmf-body {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 4px 2px 10px;
}
body.virtual-mall .vmh-t-flash .vmh-card { flex: 0 0 236px; }
body.virtual-mall .vmh-t-flash .vmh-card .num { font-size: 28px; }
body.virtual-mall .vmh-t-flash .vmh-card-badge { background-color: #ff2d55; background-image: linear-gradient(135deg, #ff2d55, #ff7a45); }

/* --- 主题2：🔥热销榜（白底·金银铜排名条目） --- */
body.virtual-mall .vmh-t-rank {
    background: #fff;
    border-radius: 22px;
    padding: 22px 0 24px;
    margin-top: 30px;
    box-shadow: 0 6px 24px rgba(15, 23, 56, .07);
    border: 1px solid #eef0f6;
}
body.virtual-mall .vmh-t-rank .vmf-icon { background: linear-gradient(135deg, #fff4e5, #ffe8cc); }
body.virtual-mall .vmh-t-rank .vmf-head-text h2 { color: #e6550d; }
body.virtual-mall .vmh-t-rank .vmf-head-text p { color: #9aa0b0; }
body.virtual-mall .vmh-t-rank .vmf-badge { background: #fff1e4; color: #e6550d; }
body.virtual-mall .vmh-t-rank .vmf-more { border: 1px solid #f0d9c4; color: #e6550d; }
body.virtual-mall .vmh-t-rank .vmf-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
body.virtual-mall .vmh-t-rank .vmh-card {
    display: flex;
    align-items: center;
    gap: 14px;
    counter-increment: vmfrank;
    padding: 10px 14px 10px 12px;
    border-radius: 16px;
}
body.virtual-mall .vmh-t-rank .vmh-card::before {
    content: counter(vmfrank);
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f0f2f7;
    color: #6b7180;
    font-weight: 800;
    font-size: 15px;
}
body.virtual-mall .vmh-t-rank .vmh-card:nth-child(1)::before { background: linear-gradient(135deg, #ffd76e, #ffb930); color: #7a4c00; }
body.virtual-mall .vmh-t-rank .vmh-card:nth-child(2)::before { background: linear-gradient(135deg, #e8e8e8, #c4c4c4); color: #555; }
body.virtual-mall .vmh-t-rank .vmh-card:nth-child(3)::before { background: linear-gradient(135deg, #f0b98c, #d98a4b); color: #6b3a00; }
body.virtual-mall .vmh-t-rank .vmh-card-img {
    flex: 0 0 86px;
    aspect-ratio: 1/1;
    border-radius: 12px;
}
body.virtual-mall .vmh-t-rank .vmh-card-info { flex: 1; padding: 0; display: flex; flex-direction: column; gap: 5px; }
body.virtual-mall .vmh-t-rank .vmh-card-title { min-height: 0; margin: 0; }
body.virtual-mall .vmh-t-rank .vmh-card-meta { margin-top: 0; }
body.virtual-mall .vmh-t-rank .vmh-buy {
    background-color: #e6550d;
    background-image: linear-gradient(135deg, #ff8a3d, #e6550d);
    box-shadow: 0 6px 14px rgba(230, 85, 13, .3);
}

/* --- 主题3：✨编辑精选（紫渐变·一大N小） --- */
body.virtual-mall .vmh-t-pick {
    background: linear-gradient(135deg, #f3efff 0%, #e9e2ff 100%);
    border-radius: 22px;
    padding: 24px 0 26px;
    margin-top: 30px;
}
body.virtual-mall .vmh-t-pick .vmf-icon { background: linear-gradient(135deg, #7c5cff, #a58bff); }
body.virtual-mall .vmh-t-pick .vmf-head-text h2 { color: #5b34d9; }
body.virtual-mall .vmh-t-pick .vmf-head-text p { color: #8b7bb8; }
body.virtual-mall .vmh-t-pick .vmf-badge { background: #5b34d9; color: #fff; }
body.virtual-mall .vmh-t-pick .vmf-more { background: #5b34d9; color: #fff; }
body.virtual-mall .vmh-t-pick .vmf-body {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
body.virtual-mall .vmh-t-pick .vmh-featured {
    grid-column: span 2;
    grid-row: span 2;
}
body.virtual-mall .vmh-t-pick .vmh-featured .num { font-size: 34px; }
body.virtual-mall .vmh-t-pick .vmh-featured .vmh-card-title { font-size: 17px; }
body.virtual-mall .vmh-t-pick .vmh-buy {
    background-color: #7c5cff;
    background-image: linear-gradient(135deg, #7c5cff, #a58bff);
    box-shadow: 0 6px 14px rgba(124, 92, 255, .32);
}

/* --- 主题4：🌱新品首发（绿·宫格+NEW角标） --- */
body.virtual-mall .vmh-t-fresh {
    background: #fff;
    border-radius: 22px;
    padding: 22px 0 24px;
    margin-top: 30px;
    box-shadow: 0 6px 24px rgba(15, 23, 56, .07);
    border: 1px solid #e6f5ea;
}
body.virtual-mall .vmh-t-fresh .vmf-icon { background: linear-gradient(135deg, #e4f7ec, #d0f0dd); }
body.virtual-mall .vmh-t-fresh .vmf-head-text h2 { color: #17954f; }
body.virtual-mall .vmh-t-fresh .vmf-head-text p { color: #9aa0b0; }
body.virtual-mall .vmh-t-fresh .vmf-badge { background: #e4f7ec; color: #17954f; }
body.virtual-mall .vmh-t-fresh .vmf-more { border: 1px solid #cbe9d6; color: #17954f; }
body.virtual-mall .vmh-t-fresh .vmf-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
    gap: 16px;
}
body.virtual-mall .vmh-t-fresh .vmh-card-badge {
    background-color: #17954f;
    background-image: linear-gradient(135deg, #1fbf66, #0e9c50);
    box-shadow: 0 4px 10px rgba(23, 149, 79, .35);
}
body.virtual-mall .vmh-t-fresh .vmh-buy {
    background-color: #17954f;
    background-image: linear-gradient(135deg, #22b866, #0f8f4a);
    box-shadow: 0 6px 14px rgba(23, 149, 79, .3);
}

/* --- 主题5：💰超值面额（深蓝渐变·大价格卡） --- */
body.virtual-mall .vmh-t-value {
    background: linear-gradient(135deg, #16224d 0%, #1d3a7a 100%);
    border-radius: 22px;
    padding: 24px 0 26px;
    margin-top: 30px;
    box-shadow: 0 14px 34px rgba(22, 34, 77, .35);
}
body.virtual-mall .vmh-t-value .vmf-head-text h2,
body.virtual-mall .vmh-t-value .vmf-head-text p { color: #fff; }
body.virtual-mall .vmh-t-value .vmf-badge { background: rgba(255,255,255,.18); color: #ffd76e; }
body.virtual-mall .vmh-t-value .vmf-more { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3); }
body.virtual-mall .vmh-t-value .vmf-body {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
    gap: 16px;
}
body.virtual-mall .vmh-t-value .vmh-card { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.14); }
body.virtual-mall .vmh-t-value .vmh-card:hover { background: rgba(255,255,255,.12); }
body.virtual-mall .vmh-t-value .vmh-card-title { color: #f2f5ff; }
body.virtual-mall .vmh-t-value .vmh-card-meta .sales { color: rgba(255,255,255,.55); }
body.virtual-mall .vmh-t-value .vmh-card .num { font-size: 32px; color: #ffd76e; }
body.virtual-mall .vmh-t-value .vmh-card .cur { color: #ffd76e; }
body.virtual-mall .vmh-t-value .vmh-buy {
    background-color: #ffd76e;
    background-image: linear-gradient(135deg, #ffe29a, #ffc93c);
    color: #4c3900;
    box-shadow: 0 6px 14px rgba(255, 215, 110, .3);
}
body.virtual-mall .vmh-t-value .vmh-card-badge {
    background-color: #1d3a7a;
    background-image: linear-gradient(135deg, #2b5bb0, #1d3a7a);
    box-shadow: none;
}

/* --- 主题6：👑臻选典藏（黑金·深色大卡横排） --- */
body.virtual-mall .vmh-t-luxury {
    background: linear-gradient(135deg, #17130a 0%, #2b2210 100%);
    border-radius: 22px;
    padding: 24px 0 26px;
    margin-top: 30px;
    box-shadow: 0 14px 34px rgba(23, 19, 10, .45);
    border: 1px solid rgba(212, 175, 55, .35);
}
body.virtual-mall .vmh-t-luxury .vmf-icon { background: linear-gradient(135deg, #d4af37, #f0d98c); }
body.virtual-mall .vmh-t-luxury .vmf-head-text h2 {
    background: linear-gradient(135deg, #f0d98c, #d4af37);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.virtual-mall .vmh-t-luxury .vmf-head-text p { color: rgba(240, 217, 140, .75); }
body.virtual-mall .vmh-t-luxury .vmf-badge { background: rgba(212, 175, 55, .18); color: #f0d98c; border: 1px solid rgba(212, 175, 55, .4); }
body.virtual-mall .vmh-t-luxury .vmf-more { background: transparent; color: #f0d98c; border: 1px solid rgba(212, 175, 55, .5); }
body.virtual-mall .vmh-t-luxury .vmf-body {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 6px;
}
body.virtual-mall .vmh-t-luxury .vmh-card {
    flex: 0 0 252px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(212, 175, 55, .28);
}
body.virtual-mall .vmh-t-luxury .vmh-card:hover { border-color: rgba(240, 217, 140, .8); box-shadow: 0 18px 36px rgba(0,0,0,.5); }
body.virtual-mall .vmh-t-luxury .vmh-card-title { color: #f5f0dd; }
body.virtual-mall .vmh-t-luxury .vmh-card .cur { color: #f0d98c; }
body.virtual-mall .vmh-t-luxury .vmh-card .num { font-size: 30px; color: #f0d98c; }
body.virtual-mall .vmh-t-luxury .vmh-card-meta .sales { color: rgba(245, 240, 221, .5); }
body.virtual-mall .vmh-t-luxury .vmh-card .orig { color: rgba(245, 240, 221, .4); }
body.virtual-mall .vmh-t-luxury .vmh-buy {
    background-color: #d4af37;
    background-image: linear-gradient(135deg, #f0d98c, #b8892d);
    color: #241a00;
    box-shadow: 0 6px 14px rgba(212, 175, 55, .35);
}
body.virtual-mall .vmh-t-luxury .vmh-card-badge {
    background-color: #b8892d;
    background-image: linear-gradient(135deg, #d4af37, #b8892d);
    box-shadow: 0 4px 10px rgba(212, 175, 55, .35);
}

/* ==================== 服务保障 / 购买须知 ==================== */
body.virtual-mall .vmh-guarantee {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 46px;
}
body.virtual-mall .vmh-gt {
    background: #fff;
    border-radius: var(--vmh-radius);
    text-align: center;
    padding: 24px 14px;
    box-shadow: 0 2px 10px rgba(15, 23, 56, .05);
    border: 1px solid #eef0f6;
}
body.virtual-mall .vmh-gt .ico { font-size: 30px; display: block; margin-bottom: 10px; }
body.virtual-mall .vmh-gt p { font-size: 16px; font-weight: 700; color: #232838; margin: 0 0 4px; }
body.virtual-mall .vmh-gt .d { font-size: 12px; color: #9aa0b0; font-weight: 400; }
body.virtual-mall .vmh-notice {
    margin-top: 26px;
    background: #fff;
    border-radius: var(--vmh-radius);
    border: 1px solid #eef0f6;
    padding: 24px 28px;
}
body.virtual-mall .vmh-notice h3 {
    font-size: 17px;
    font-weight: 800;
    color: #1b2030;
    margin: 0 0 12px;
    letter-spacing: 2px;
}
body.virtual-mall .vmh-notice ul { margin: 0; padding-left: 20px; }
body.virtual-mall .vmh-notice li {
    font-size: 13px;
    color: #6b7180;
    line-height: 2;
}

/* ==================== 皮肤变量 ==================== */
/* 皮肤1 幻彩紫蓝（默认） */
body.virtual-mall.vm-skin-1 {
    --vmh-accent-a: #6a5cff;
    --vmh-accent-b: #9b6bff;
    --vmh-accent-shadow: rgba(122, 92, 255, .35);
    --vmh-radius: 16px;
}
body.virtual-mall.vm-skin-1 .vmh-hero-mask {
    background: linear-gradient(100deg,
        rgba(38, 20, 82, .92) 0%,
        rgba(62, 38, 140, .68) 45%,
        rgba(28, 18, 66, .30) 100%);
}
/* 皮肤2 轻奢黑金 */
body.virtual-mall.vm-skin-2 {
    --vmh-accent-a: #b8892d;
    --vmh-accent-b: #e3bd63;
    --vmh-accent-shadow: rgba(184, 137, 45, .35);
    --vmh-radius: 12px;
}
body.virtual-mall.vm-skin-2 .vmh-hero-mask {
    background: linear-gradient(100deg,
        rgba(12, 10, 6, .93) 0%,
        rgba(30, 24, 12, .72) 45%,
        rgba(12, 10, 6, .32) 100%);
}
body.virtual-mall.vm-skin-2 .vmh-hero-title { color: #f4e3b2; }
body.virtual-mall.vm-skin-2 .vmh-card-badge {
    background: linear-gradient(135deg, #b8892d, #e3bd63);
    box-shadow: 0 4px 10px rgba(184, 137, 45, .4);
}
body.virtual-mall.vm-skin-2 .vmh-perk .ico {
    background: linear-gradient(135deg, #faf3e0, #fdf9ef);
}
/* 皮肤3 清新青绿 */
body.virtual-mall.vm-skin-3 {
    --vmh-accent-a: #00b09b;
    --vmh-accent-b: #6fce6a;
    --vmh-accent-shadow: rgba(0, 176, 155, .32);
    --vmh-radius: 20px;
}
body.virtual-mall.vm-skin-3 .vmh-hero-mask {
    background: linear-gradient(100deg,
        rgba(4, 48, 44, .92) 0%,
        rgba(8, 82, 74, .66) 45%,
        rgba(4, 48, 44, .28) 100%);
}
body.virtual-mall.vm-skin-3 .vmh-perk .ico {
    background: linear-gradient(135deg, #e4f7f0, #f2fbef);
}
body.virtual-mall.vm-skin-3 .vmh-card-badge {
    background: linear-gradient(135deg, #00b09b, #6fce6a);
    box-shadow: 0 4px 10px rgba(0, 176, 155, .35);
}

/* ==================== 响应式 ==================== */
@media (max-width: 1024px) {
    body.virtual-mall .vmh-hero { min-height: 380px; }
    body.virtual-mall .vmh-hero-title { font-size: 38px; }
    body.virtual-mall .vmh-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
}
@media (max-width: 768px) {
    body.virtual-mall .vmh-page { padding-bottom: 24px; }
    body.virtual-mall .vmh-hero { min-height: 360px; }
    body.virtual-mall .vmh-hero-content { padding-top: 20px; padding-bottom: 60px; }
    body.virtual-mall .vmh-hero-eyebrow { font-size: 11px; letter-spacing: 4px; padding: 4px 12px; margin-bottom: 12px; }
    body.virtual-mall .vmh-hero-title { font-size: 30px; letter-spacing: 2px; }
    body.virtual-mall .vmh-hero-sub { font-size: 13px; margin-bottom: 22px; }
    body.virtual-mall .vmh-hero-search { padding: 4px; }
    body.virtual-mall .vmh-hero-search input { padding: 0 14px; font-size: 14px; }
    body.virtual-mall .vmh-hero-search button { padding: 10px 22px; font-size: 14px; letter-spacing: 2px; }
    body.virtual-mall .vmh-hero-stats { gap: 8px; margin-top: 16px; }
    body.virtual-mall .vmh-hero-stats span { font-size: 12px; padding: 5px 13px; }
    body.virtual-mall .vmh-hero-stats b { font-size: 15px; }
    /* 注意选择器需与桌面端同特异性（.vmh-container.vmh-perks），否则 4 列规则压不过 */
    body.virtual-mall .vmh-container.vmh-perks { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: -34px; }
    body.virtual-mall .vmh-perk { padding: 13px 14px; gap: 10px; border-radius: 14px; }
    body.virtual-mall .vmh-perk .ico { width: 38px; height: 38px; min-width: 38px; font-size: 20px; }
    body.virtual-mall .vmh-perk .t { font-size: 14px; }
    body.virtual-mall .vmh-perk .d { font-size: 11px; }
    /* 分类导航移动端：三种样式统一 3 列 */
    body.virtual-mall .vmh-tiers {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-top: 20px;
        padding-bottom: 4px;
    }
    body.virtual-mall .vmh-tiers::-webkit-scrollbar { display: none; }
    body.virtual-mall .vmh-tier { white-space: nowrap; font-size: 13px; padding: 8px 14px 8px 10px; }
    body.virtual-mall .vmh-tier img { width: 22px; height: 22px; }
    body.virtual-mall .vmh-tiers-card,
    body.virtual-mall .vmh-tiers-block { grid-template-columns: repeat(3, 1fr); gap: 9px; }
    body.virtual-mall .vmh-tiers-card .vmh-tier,
    body.virtual-mall .vmh-tiers-block .vmh-tier { padding: 12px 6px 11px; border-radius: 13px; }
    body.virtual-mall .vmh-tiers-card .vmh-tier img { width: 32px; height: 32px; }
    body.virtual-mall .vmh-tiers-card .vmh-tier-name { font-size: 12px; }
    body.virtual-mall .vmh-tiers-card .vmh-tier-desc { display: none; }
    body.virtual-mall .vmh-tiers-block .vmh-tier-emoji { font-size: 24px; }
    body.virtual-mall .vmh-tiers-block .vmh-tier-name { font-size: 12px; }
    body.virtual-mall .vmh-floor { margin-top: 20px; }
    body.virtual-mall .vmf-head { flex-wrap: wrap; margin-bottom: 14px; gap: 8px; }
    body.virtual-mall .vmf-head-main { gap: 10px; }
    body.virtual-mall .vmf-icon { width: 42px; height: 42px; min-width: 42px; font-size: 21px; border-radius: 12px; }
    body.virtual-mall .vmf-head-text h2 { font-size: 19px; }
    body.virtual-mall .vmf-head-text p { font-size: 11px; }
    body.virtual-mall .vmf-badge { font-size: 10px; padding: 2px 8px; }
    body.virtual-mall .vmf-more { font-size: 12px; padding: 6px 12px; }
    /* 主题楼层移动端 */
    body.virtual-mall .vmh-t-flash,
    body.virtual-mall .vmh-t-pick,
    body.virtual-mall .vmh-t-value,
    body.virtual-mall .vmh-t-luxury,
    body.virtual-mall .vmh-t-rank,
    body.virtual-mall .vmh-t-fresh { padding: 14px 0 16px; border-radius: 16px; }
    body.virtual-mall .vmh-t-flash .vmf-body,
    body.virtual-mall .vmh-t-luxury .vmf-body { gap: 10px; }
    body.virtual-mall .vmh-t-flash .vmh-card,
    body.virtual-mall .vmh-t-luxury .vmh-card { flex: 0 0 150px; }
    body.virtual-mall .vmh-t-luxury .vmh-card .num { font-size: 22px; }
    body.virtual-mall .vmh-t-value .vmh-card .num { font-size: 24px; }
    body.virtual-mall .vmh-t-pick .vmf-body { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.virtual-mall .vmh-t-pick .vmh-featured { grid-column: span 2; grid-row: span 1; }
    body.virtual-mall .vmh-t-pick .vmh-featured .num { font-size: 24px; }
    body.virtual-mall .vmh-t-fresh .vmf-body { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.virtual-mall .vmh-t-value .vmf-body { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    body.virtual-mall .vmh-t-rank .vmh-card { padding: 8px 10px 8px 8px; gap: 10px; }
    body.virtual-mall .vmh-t-rank .vmh-card::before { min-width: 26px; height: 26px; font-size: 12px; }
    body.virtual-mall .vmh-t-rank .vmh-card-img { flex: 0 0 64px; border-radius: 10px; }
    body.virtual-mall .vmh-card-info { padding: 9px 10px 11px; }
    body.virtual-mall .vmh-card-title { font-size: 13px; min-height: 36px; margin-bottom: 6px; }
    body.virtual-mall .vmh-card-price .num { font-size: 21px; }
    body.virtual-mall .vmh-card-price .cur { font-size: 12px; }
    body.virtual-mall .vmh-card-meta { margin-top: 8px; }
    body.virtual-mall .vmh-card-meta .sales { font-size: 11px; }
    body.virtual-mall .vmh-buy { font-size: 12px; padding: 6px 12px; }
    body.virtual-mall .vmh-guarantee { grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 28px; }
    body.virtual-mall .vmh-gt { padding: 16px 10px; }
    body.virtual-mall .vmh-gt .ico { font-size: 24px; margin-bottom: 6px; }
    body.virtual-mall .vmh-gt p { font-size: 14px; }
    body.virtual-mall .vmh-notice { padding: 16px 18px; }
    body.virtual-mall .vmh-notice li { font-size: 12px; line-height: 1.9; }
}
@media (max-width: 480px) {
    body.virtual-mall .vmh-hero { min-height: 320px; }
    body.virtual-mall .vmh-hero-title { font-size: 25px; }
    body.virtual-mall .vmh-hero-sub { font-size: 12px; }
    body.virtual-mall .vmh-grid { gap: 8px; }
    body.virtual-mall .vmh-card-title { font-size: 12px; -webkit-line-clamp: 1; min-height: 20px; }
    body.virtual-mall .vmh-card-price .num { font-size: 19px; }
    body.virtual-mall .vmh-card-meta { flex-direction: column; align-items: flex-start; gap: 6px; }
    body.virtual-mall .vmh-buy { align-self: stretch; text-align: center; }
    body.virtual-mall .vmh-t-flash .vmh-card,
    body.virtual-mall .vmh-t-luxury .vmh-card { flex: 0 0 136px; }
    body.virtual-mall .vmh-t-rank .vmh-card-img { flex: 0 0 56px; }
    body.virtual-mall .vmh-t-rank .vmh-card-title { font-size: 12px; }
}