:root {
    --t-000000: rgba(0,0,0,0.08);
    --t-ff2e63: rgba(255,46,99,0.4);
  }

        * { box-sizing: border-box; }
        html, body { width: 100%; }
        body { background: var(--legacy-bg); margin: 0; font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif; }
        .v8-wrap { width: 100%; max-width: 100%; margin: 0 auto; background: var(--legacy-bg); min-height: 100vh; padding-bottom: var(--page-padding-bottom); }

        .v8-topbar {
            background: linear-gradient(90deg, var(--mkt-red) 0%, var(--mkt-red-light) 50%, var(--mkt-orange) 100%);
            padding: 14px 16px 18px;
            color: var(--bg-card);
        }
        .v8-topbar h1 { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; }

        /*    Tab */
        .mkt-tabs { display: flex; background: var(--bg-card); border-bottom: 1px solid #f0f0f0;
                    position: sticky; top: 0; z-index: var(--z-sticky, 100); }
        .mkt-tabs .t { flex: 1; text-align: center; padding: 12px 0; font-size: 15px;
                       color: var(--legacy-text-light); cursor: pointer; position: relative; text-decoration: none; }
        .mkt-tabs .t.active { color: var(--mkt-red); font-weight: 700; }
        .mkt-tabs .t.active::after { content: ''; position: absolute; bottom: 0; left: 50%;
                     transform: translateX(-50%); width: 24px; height: 3px; border-radius: 2px;
                     background: var(--mkt-red); }

        .v8-search {
            margin: -8px 12px 12px;
            background: var(--bg-card);
            border-radius: var(--radius-xl);
            padding: 10px 16px;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px var(--t-000000);
        }
        .v8-search i { color: var(--legacy-text-light); font-size: 1.125rem; }
        .v8-search input { flex: 1; border: 0; outline: 0; font-size: 0.875rem; color: #333333; background: transparent; min-width: 0; }
        .v8-search button { background: linear-gradient(90deg, var(--mkt-red), var(--mkt-red-light)); color: var(--bg-card); border: 0; border-radius: 0.875rem; padding: 5px 14px; font-size: 0.8125rem; }

        .v8-cat-body {
            display: block; background: var(--legacy-bg);
        }
        /* FIX-CHECK:2026-10-03 盒马式重构：顶部金刚区 12 分类（hema-cat-row 由 market-v8.css 提供 5 列网格样式） */
        .v8-cat-body .hema-cat-row { margin: 10px 8px 0; }
        .v8-cat-sidebar {
            width: 90px; flex-shrink: 0; background: var(--bg-card); overflow-y: auto;
            max-height: calc(100vh - 180px); position: sticky; top: 0;
        }
        .v8-cat-sidebar .s-item {
            padding: 14px 8px; text-align: center; font-size: 0.8125rem; color: #333333;
            cursor: pointer; border-left: 3px solid transparent; transition: all 0.2s;
            position: relative; min-height: 46px; display: flex; align-items: center; justify-content: center;
        }
        .v8-cat-sidebar .s-item.active {
            background: var(--legacy-bg); color: var(--mkt-red); font-weight: 700; border-left-color: var(--mkt-red);
        }
        .v8-cat-sidebar .s-item .s-emoji {
            width: 28px; height: 28px; display: inline-block; margin-right: 6px;
            flex-shrink: 0; overflow: hidden; border-radius: 0.375rem;
        }
        .v8-cat-sidebar .s-item .s-emoji img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: var(--radius-sm); }
        .v8-cat-content { flex: 1; min-width: 0; overflow: hidden; }

        .v8-sub-scroll {
            background: var(--bg-card);
            margin: 0 8px 8px;
            border-radius: 0.625rem;
            padding: 12px 4px 8px;
        }
        .v8-sub-list { display: flex; gap: 8px; overflow-x: auto; padding: 0 8px; scrollbar-width: none; }
        .v8-sub-list::-webkit-scrollbar { display: none; }
        .v8-sub-item { flex: 0 0 64px; display: flex; flex-direction: column; align-items: center; cursor: pointer; }
        .v8-sub-circle { width: 58px; height: 58px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.75rem; overflow: hidden; }
        .v8-sub-circle img { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 50%; }
        .v8-sub-item.active .v8-sub-circle { color: var(--bg-card); box-shadow: 0 4px 12px var(--t-ff2e63); }
        .v8-sub-label { font-size: 0.75rem; color: #333333; margin-top: 4px; white-space: nowrap; }
        .v8-sub-item.active .v8-sub-label { color: var(--mkt-red); font-weight: 700; }

        .v8-sort-bar {
            background: var(--bg-card);
            margin: 0 8px 6px;
            border-radius: 0.625rem;
            padding: 10px 12px;
            display: flex;
            gap: 0;
            align-items: center;
            font-size: 0.8125rem;
            color: #333333;
        }
        .v8-sort-bar .opt { flex: 1; cursor: pointer; color: var(--legacy-text-secondary); text-align: center; position: relative; }
        .v8-sort-bar .opt.active { color: var(--mkt-red); font-weight: 700; }
        .v8-sort-bar .opt .price-arrow { font-size: 0.625rem; margin-left: 2px; }
        .v8-sort-bar .opt.filter-opt { flex: 0 0 auto; padding: 0 8px; border-left: 1px solid var(--legacy-border); }

        .v8-list { padding: 0 8px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .v8-item {
            background: var(--bg-card);
            border-radius: 0.625rem;
            padding: 10px;
            display: flex;
            flex-direction: column;
            gap: 6px;
            position: relative;
        }
        .v8-item-emoji {
            width: 100%; aspect-ratio: 1 / 1; border-radius: 0.625rem;
            display: flex; align-items: center; justify-content: center;
            font-size: 72px; line-height: 1;
            position: relative; overflow: hidden;
        }
        .v8-item-emoji img { width: 100% !important; height: 100% !important; object-fit: cover !important; background: #f8f8f8; }
        .v8-item-emoji .qty-tag {
            position: absolute; bottom: 4px; left: 4px; right: 4px;
            background: var(--t-000000); color: var(--bg-card); font-size: 0.5625rem;
            padding: 1px 3px; border-radius: 0.1875rem; text-align: center;
            line-height: 1.2; backdrop-filter: blur(4px);
        }
        .v8-item-info { width: 100%; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; }
        .v8-item-name { font-size: 0.875rem; color: #222222; line-height: 1.3; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
        .v8-item-tag { display: inline-block; background: #fff5e6; color: #ff8c00; font-size: 0.625rem; padding: 1px 4px; border-radius: 0.1875rem; margin-top: 4px; }
        .v8-item-spec { font-size: 0.75rem; color: #888888; margin-top: 2px; }
        .v8-item-sales { font-size: 0.6875rem; color: var(--legacy-text-light); margin-top: 2px; }
        .v8-item-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; }
        .v8-item-price { color: var(--mkt-red); font-size: 1.25rem; font-weight: 700; }
        .v8-item-price .small { font-size: 0.875rem; }
        .v8-item-price s { color: var(--legacy-text-light); font-size: 0.8125rem; font-weight: 400; margin-left: 4px; text-decoration: line-through; }
        .v8-item-credit { font-size: 0.75rem; color: #f39c12; margin-top: 2px; }
        .v8-item-add { width: 44px; height: 44px; border-radius: 50%; background: var(--mkt-red); color: var(--bg-card); border: 0; font-size: 1.125rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
        .v8-item-cart { display: flex; align-items: center; gap: 6px; }
        .v8-item-badge { position: absolute; top: 8px; left: 8px; background: linear-gradient(45deg, var(--mkt-red), var(--mkt-red-light)); color: var(--bg-card); font-size: 0.625rem; padding: 2px 6px; border-radius: 0.1875rem; }

        /* 宪法：FAB 购物车属导航性操作，用主色天蓝（促销橙仅限加购按钮/现价/折扣标签） */
        .v8-fab-cart { position: fixed; right: 16px; bottom: 70px; width: 50px; height: 50px; border-radius: 50%; background: var(--brand-trust, #0EA5E9); color: var(--bg-card); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(14,165,233,0.30); font-size: 1.375rem; z-index: var(--z-fab, 560); cursor: pointer; }

        .v8-loading-more { text-align: center; padding: 16px; color: var(--legacy-text-light); font-size: 0.75rem; }
        .v8-no-more { text-align: center; padding: 16px; color: #cccccc; font-size: 0.75rem; }

        @media (min-width: 768px) {
            .v8-topbar { padding: 22px 32px 28px; }
            .v8-topbar h1 { font-size: 1.75rem; }
            .v8-search { max-width: 720px; margin: -10px auto 14px; padding: 12px 22px; border-radius: 1.75rem; }
            .v8-search input { font-size: 1rem; }
            .v8-search button { padding: 8px 22px; font-size: 0.875rem; }
            .v8-sub-scroll { margin: 0 16px 12px; padding: 16px 8px 12px; border-radius: 0.875rem; }
            .v8-sub-list { justify-content: center; flex-wrap: wrap; overflow: visible; padding: 0; }
            .v8-sub-item { flex: 0 0 88px; }
            .v8-sub-circle { width: 68px; height: 68px; font-size: 2rem; }
            .v8-sub-label { font-size: 0.8125rem; }
            .v8-sort-bar { margin: 0 16px 10px; padding: 12px 16px; font-size: 0.875rem; gap: 24px; }
            .v8-sort-bar .label { font-size: 0.9375rem; }
            .v8-list { padding: 0 16px; max-width: 1080px; margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: 12px; }
            .v8-item { padding: 14px; gap: 8px; border-radius: var(--radius-lg); }
            .v8-item-emoji { font-size: 84px; }
            .v8-item-name { font-size: 0.9375rem; }
            .v8-item-tag { font-size: 0.6875rem; padding: 2px 6px; }
            .v8-item-spec { font-size: 0.8125rem; }
            .v8-item-sales { font-size: 0.75rem; }
            .v8-item-price { font-size: 1.25rem; }
            .v8-item-credit { font-size: 0.75rem; }
            .v8-item-add { width: 44px; height: 44px; font-size: 1.25rem; }
            .v8-fab-cart { right: 32px; bottom: 80px; width: 56px; height: 56px; font-size: 1.625rem; }
        }
        @media (min-width: 1200px) {
            .v8-wrap { max-width: 1200px; }
            .v8-topbar { padding: 28px 40px 32px; border-radius: 0 0 16px 16px; }
            .v8-topbar h1 { font-size: 2rem; }
            .v8-search { max-width: 760px; padding: 14px 24px; }
            .v8-sub-item { flex: 0 0 96px; }
            .v8-sub-circle { width: 72px; height: 72px; font-size: 34px; }
            .v8-item { padding: 16px; gap: 8px; }
            .v8-item-emoji { font-size: 100px; }
            .v8-item-name { font-size: 1rem; }
            .v8-item-price { font-size: 1.375rem; }
            .v8-fab-cart { right: 40px; }
        }

/* ==================================================================
   2026-10-09 分类页 · 筛选面板 + 卡片信息补齐
   ================================================================== */
.v8-filter-panel {
    margin: 8px 12px;
    padding: 12px;
    background: var(--bg-card, #fff);
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,0.08));
    border-radius: var(--border-radius-lg, 12px);
}
.v8-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.v8-filter-label { font-size: 0.8125rem; color: var(--legacy-text-secondary); width: 4.5rem; flex-shrink: 0; }
.v8-filter-sep { color: var(--legacy-text-light); }
.v8-filter-panel input[type="number"] {
    flex: 1;
    min-width: 0;
    padding: 6px 10px;
    border: 0.5px solid var(--color-border-tertiary, rgba(0,0,0,0.12));
    border-radius: var(--border-radius-md, 8px);
    font-size: 0.8125rem;
    background: var(--bg-subtle, #f7f8fa);
}
.v8-filter-check { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--legacy-text); }
.v8-filter-actions { display: flex; gap: 10px; justify-content: flex-end; }
.v8-filter-actions button {
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 0.8125rem;
    border: 0.5px solid var(--color-border-secondary, rgba(0,0,0,0.2));
    background: transparent;
    color: var(--legacy-text-secondary);
}
.v8-filter-actions .v8-filter-ok {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}
.v8-item-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #E0563F;
    color: #fff;
    font-size: 0.625rem;
    line-height: 1.6;
}

/* ===== FIX-CHECK:20261010 筛选面板（此前 filter() 为空操作，补齐半成品样式） ===== */
.v8-filter-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: var(--z-modal, 1000);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.v8-filter-panel {
    width: 100%;
    max-width: 480px;
    background: var(--bg-card);
    border-radius: 16px 16px 0 0;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
    animation: v8FilterUp .22s ease-out;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}
@keyframes v8FilterUp {
    from { transform: translateY(40px); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
}
.v8-filter-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--legacy-text);
    padding-bottom: 12px;
}
.v8-filter-head i { font-size: 1.25rem; color: var(--legacy-text-light); cursor: pointer; }
.v8-filter-group {
    padding: 12px 0;
    border-top: 1px solid var(--bg-subtle, #f2f3f5);
}
.v8-filter-title {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--legacy-text-secondary);
    margin-bottom: 8px;
}
.v8-filter-prices { display: flex; align-items: center; gap: 8px; }
.v8-filter-actions .v8-filter-reset { color: var(--legacy-text-secondary); }
.v8-filter-actions .v8-filter-apply {
    background: #2E7D32;
    border-color: #2E7D32;
    color: #fff;
}

/* ===== FIX-CHECK:20261010 列表骨架屏（对标美团小象） ===== */
.v8-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 4px 0;
}
.v8-skeleton-card {
    background: var(--bg-card);
    border-radius: 10px;
    padding: 10px;
}
@media (min-width: 768px) {
    .v8-skeleton-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ===== FIX-CHECK:20261010 降价标签（分类列表卡） ===== */
.v8-item-cut {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    background: #fff1f0;
    color: #E0563F;
    border: 1px solid #ffd6d2;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    vertical-align: middle;
}