/* 发卡密商城 - 主样式文件 (现代化设计) */

/* Google Font */
/* [052] Inter 字体从 Google Fonts 改用 jsdelivr 国内可达 CDN (fontsource/inter@5)
 * 起因: Google Fonts 国内访问慢/被墙, 且商城 CSP 没允许 fonts.googleapis.com -> 一直被拒
 * jsdelivr cdn.jsdelivr.net 国内 fastly 节点访问 OK, CSP 加 cdn.jsdelivr.net 白名单 */
@import url('https://cdn.jsdelivr.net/npm/@fontsource/inter@5.1.1/index.css');

/* ==================== CSS 变量 ==================== */
:root {
    /* 主色调 - 现代蓝紫 */
    --primary-color: #4f46e5;
    --primary-hover: #4338ca;
    --primary-light: #eef2ff;
    --primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    --secondary-color: #7c3aed;

    /* 文字颜色 */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-light: #9ca3af;

    /* 背景颜色 */
    --bg-primary: #f9fafb;
    --bg-secondary: #f3f4f6;
    --bg-card: #ffffff;

    /* 边框 - 现代设计 */
    --border-color: #e5e7eb;
    --border-radius: 10px;
    --border-radius-sm: 6px;
    --flat-border: 1px solid var(--border-color);

    /* 阴影 - 柔和层次感 */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05);

    /* 动画 */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;

    /* 状态颜色 */
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --info-color: #3b82f6;
}

/* ==================== 全局样式 ==================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* 永久保留垂直滚动条位置，防止 pjax 切换时左右抖动（不会产生双滚动条） */
    scrollbar-gutter: stable;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
        'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: var(--bg-primary);
    position: relative;
    width: 100%;
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
    /* 注意：不设 overflow，避免与 html 的 scrollbar-gutter 冲突产生双滚动条 */
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--secondary-color);
}

img {
    max-width: 100%;
    height: auto;
}

/* ==================== 布局 ==================== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    width: 100%;
    box-sizing: border-box;
}

.page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    max-width: 100vw;
    overflow: visible; /* 不要 overflow:hidden，避免产生独立滚动条 */
    z-index: 1;
}

.main-content {
    flex: 1;
    padding: 20px 0;
}

/* Pjax 页面切换平滑过渡 */
.pjax-leaving {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.12s ease !important;
}

/* 新内容注入时不可见但保持正常文档流（不用 position:absolute，避免布局重计算） */
.pjax-hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 淡入 */
.pjax-visible {
    visibility: visible !important;
    opacity: 1 !important;
    transition: opacity 0.18s ease !important;
}

/* ==================== 头部 - 现代设计 ==================== */
.header {
    background: var(--bg-card);
    border-bottom: var(--flat-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 顶部渐变装饰线 */
.header-accent {
    height: 3px;
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 35%, #a78bfa 65%, #4f46e5 100%);
    background-size: 200% 100%;
    animation: accentShimmer 4s ease-in-out infinite;
}

@keyframes accentShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* Logo 图标 */
.logo-icon {
    width: 34px;
    height: 34px;
    background: var(--primary-gradient);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 15px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
    transition: transform 0.2s ease;
}

.logo:hover .logo-icon {
    transform: scale(1.05);
}

/* Logo 文字 */
.logo-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    letter-spacing: 0.3px;
}

.nav {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* 胶囊式导航按钮 */
.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    padding: 7px 16px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.nav-pill:hover {
    color: var(--primary-color);
    background: rgba(79, 70, 229, 0.06);
}

.nav-pill.active {
    color: var(--primary-color);
    background: rgba(79, 70, 229, 0.1);
    font-weight: 600;
}

/* 登录/注册按钮特殊样式 */
.nav-pill-auth {
    background: var(--primary-gradient);
    color: #fff !important;
    font-weight: 600;
    padding: 7px 20px;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

.nav-pill-auth:hover {
    background: var(--primary-gradient);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.35);
    transform: translateY(-1px);
}

/* 兼容旧的 .nav a 引用 */
.nav a {
    text-decoration: none;
}

/* ==================== 按钮 - 扁平设计 ==================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
}

/* 主按钮 - 扁平纯色 */
.btn-primary {
    background: var(--primary-gradient);
    color: white;
    border: none;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.4);
    transform: translateY(-1px);
}

.btn-secondary {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: var(--flat-border);
}

.btn-secondary:hover {
    background: var(--border-color);
}

.btn-outline {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-outline:hover {
    background: var(--primary-color);
    color: white;
}

.btn-lg {
    padding: 10px 24px;
    font-size: 1rem;
}

.btn-sm {
    padding: 5px 12px;
    font-size: 0.8rem;
}

.btn-block {
    width: 100%;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ==================== 卡片 - 扁平设计 ==================== */
.card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: var(--flat-border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: var(--transition-normal);
}

.card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-md);
}

.card-header {
    padding: 14px 16px;
    border-bottom: var(--flat-border);
}

.card-body {
    padding: 14px 16px;
}

.card-footer {
    padding: 14px 16px;
    border-top: var(--flat-border);
    background: var(--bg-secondary);
}

/* ==================== 表单 - 扁平设计 ==================== */
.form-group {
    margin-bottom: 14px;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-control {
    width: 100%;
    padding: 8px 12px;
    font-size: 0.9rem;
    border: var(--flat-border);
    border-radius: var(--border-radius-sm);
    transition: var(--transition-fast);
    background: var(--bg-card);
}

.form-control:focus {
    outline: none;
    border-color: var(--primary-color);
}

.form-control::placeholder {
    color: var(--text-light);
}

select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23718096' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

/* ==================== 产品网格 - 扁平设计 ==================== */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

.product-card {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    overflow: hidden;
    border: var(--flat-border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: var(--transition-normal);
    display: flex;
    flex-direction: column;
    max-width: 100%;
    min-width: 0;
    cursor: pointer;
}

.product-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15), 0 4px 8px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* 售罄产品 — 图片和文字变灰，按钮保持原色 */
.product-card.sold-out {
    position: relative;
}

.product-card.sold-out .product-image {
    filter: grayscale(100%);
    opacity: 0.6;
}

.product-card.sold-out .product-info,
.product-card.sold-out .product-content {
    filter: grayscale(100%);
    opacity: 0.55;
}

.product-card.sold-out:hover .product-image {
    filter: grayscale(80%);
    opacity: 0.75;
}

.product-card.sold-out:hover .product-info,
.product-card.sold-out:hover .product-content {
    filter: grayscale(60%);
    opacity: 0.7;
}

.product-card.sold-out .sold-out-ribbon {
    position: absolute;
    top: 12px;
    right: -38px;
    z-index: 10;
    width: 130px;
    padding: 4px 0;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
    transform: rotate(45deg);
    box-shadow: 0 2px 8px rgba(239, 68, 68, 0.5);
}

/* 产品卡片顶部：完整标题（左） | 图片（右） */
.product-top {
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 12px 0;
}

.product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.product-image {
    width: 90px;
    height: 90px;
    min-width: 90px;
    background: #f5f5f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.5rem;
    overflow: hidden;
    border-radius: 10px;
}

.product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-content {
    padding: 8px 12px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

@media (max-width: 768px) {
    .product-top {
        gap: 10px;
        padding: 10px 10px 0;
    }
    .product-image {
        width: 75px;
        height: 75px;
        min-width: 75px;
        border-radius: 8px;
    }
    .product-content {
        padding: 6px 10px 10px;
    }
}

.product-category {
}

/* ==========================================================================
   Payment Modal (1:1 Strict Image Match)
   ========================================================================== */

.pm-card {
    position: relative;
    background: #ffffff;
    border-radius: 12px;
    width: 90%;
    max-width: 680px;
    max-height: 90vh;
    overflow: visible;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    animation: pm-enter .2s ease-out;
    display: flex;
}

@keyframes pm-enter {
    from { opacity: 0; transform: translateY(20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Close button - Top Right of the right panel really, but we place it top-right of the whole card for safety */
.pm-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 4px;
    transition: color 0.15s;
}
.pm-close:hover { color: #333; }

/* ---- two-column body ---- */
.pm-body {
    display: flex;
    width: 100%;
    min-height: 480px;
}

.pm-info {
    flex: 1;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    align-items: center; /* PERFECT CENTERING */
    justify-content: center;
}

.pm-qr {
    flex: 0.9;
    background: #f8f9fa;
    padding: 48px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0 12px 12px 0;
}

@media (max-width: 640px) {
    .pm-card { flex-direction: column; }
    .pm-body { flex-direction: column; }
    .pm-info { padding: 36px 24px; }
    .pm-qr  { padding: 36px 24px; border-radius: 0 0 12px 12px; }
    .pm-close { color: #555; }
}

/* ---- left column content ---- */
.pm-title {
    font-size: 1.6rem;
    font-weight: 500;
    color: #111;
    margin: 0 0 8px;
    letter-spacing: 1px;
    text-align: center;
}

.pm-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.85rem;
    color: #555;
    margin-bottom: 30px;
}

.pm-timer {
    color: #e53935;
}

.pm-dot {
    width: 6px; height: 6px;
    background: #e53935;
    border-radius: 50%;
    opacity: 0.8;
}

.pm-amount-block {
    text-align: center;
    margin-bottom: 24px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pm-amount-label {
    display: block;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 4px;
}

.pm-price {
    font-size: 3.2rem;
    font-weight: 300;
    color: #111;
    margin: 0 0 12px 0;
    line-height: 1;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    letter-spacing: -1px;
}

.pm-warning {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #e53935;
    background: #fef2f2;
    border-radius: 4px;
    padding: 6px 14px;
    margin-bottom: 32px;
}

/* ---- step buttons ---- */
.pm-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 260px;
}

.pm-step-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 20px;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s;
}

.pm-step-dark {
    background: #171c24;
    color: #fff;
}

.pm-step-dark:hover {
    background: #2a313c;
}

.pm-step-light {
    background: #f1f3f5;
    color: #333;
    border: 1px solid #e9ecef;
}

.pm-step-light:hover:not(:disabled) {
    background: #e9ecef;
}

.pm-step-light:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.pm-step-check {
    position: absolute;
    right: 16px;
    color: #fff;
    opacity: 0.8;
}

/* ---- status row ---- */
.pm-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #777;
    font-size: 0.8rem;
    margin-top: 40px;
}

.pm-spinner {
    width: 14px; height: 14px;
    border: 2px solid #ddd;
    border-top-color: #777;
    border-radius: 50%;
    animation: pm-spin 0.8s linear infinite;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* ---- right column: QR ---- */
.pm-qr-frame {
    position: relative;
    background: #fff;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.pm-scan-corners span {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: #555;
    border-style: solid;
}
.pm-scan-corners .tl { top: -6px; left: -6px; border-width: 1.5px 0 0 1.5px; border-top-left-radius: 4px; }
.pm-scan-corners .tr { top: -6px; right: -6px; border-width: 1.5px 1.5px 0 0; border-top-right-radius: 4px; }
.pm-scan-corners .bl { bottom: -6px; left: -6px; border-width: 0 0 1.5px 1.5px; border-bottom-left-radius: 4px; }
.pm-scan-corners .br { bottom: -6px; right: -6px; border-width: 0 1.5px 1.5px 0; border-bottom-right-radius: 4px; }

#qrcode-wrapper img,
#qrcode-wrapper canvas {
    display: block;
    margin: 0 auto;
}

.pm-qr-tip {
    font-size: 0.8rem;
    color: #555;
    margin: 0;
    text-align: center;
}

.product-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
    line-height: 1.35;
    display: block;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 768px) {
    .product-name {
        font-size: 1rem;
        margin-bottom: 4px;
    }
}

.product-footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 480px) {
    .product-footer {
        flex-direction: column;
        gap: 6px;
    }

    .product-footer .product-stock {
        align-self: flex-start;
    }
}

.product-price {
    font-size: 0.9rem;
    font-weight: 700;
    /* [083] 价格数字颜色可后台配置 (--shop-price-color 由 app.js 注入; 未配置则默认红色) */
    color: var(--shop-price-color, var(--error-color));
}

.product-price small {
    font-size: 0.7rem;
    font-weight: normal;
}

/* 首页商品卡片价格区域 */
.product-price-box {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    max-width: 100%;
}

.product-price-box .product-price {
    font-size: 0.95rem;
}

.product-price-box .product-price.vip-price {
    color: #f59e0b;
}

.product-price-box .product-original-price {
    font-size: 0.8rem;
    color: #999;
    text-decoration: line-through;
}

.product-price-box .product-vip-hint {
    font-size: 0.75rem;
    color: #78350f;
    background: linear-gradient(135deg, #fcd34d, #fbbf24);
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* 多VIP等级价格展示 */
.product-price-box .product-vip-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
    max-width: 100%;
}

.product-price-box .vip-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.7rem;
    padding: 3px 6px;
    border-radius: 3px;
    font-weight: 500;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fcd34d;
}

/* 移动端VIP价格标签优化 */
@media (max-width: 480px) {
    .product-price-box .product-vip-prices {
        gap: 2px;
    }

    .product-price-box .vip-price-tag {
        font-size: 0.6rem;
        padding: 1px 4px;
    }
}

.product-stock {
    font-size: 0.7rem;
    font-weight: 600;
    color: #15803d;
    background: #dcfce7;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.product-stock.low {
    color: #b45309;
    background: #fef3c7;
}

.product-stock.out {
    color: #dc2626;
    background: #fee2e2;
}

/* [007] SEO/UX 兜底：当 textContent 为空时不显示库存徽章，
 * 避免 JS 渲染时序问题导致的"空红色泡泡"闪现 */
.product-stock:empty {
    display: none !important;
}

/* [017] 改造 [009]：空 VIP 容器保持占位但视觉隐藏，让商品卡横向对齐
 * 爷爷需求："就算是产品卡片没有VIP价格，也要留下VIP价格的位置，让别的保持对齐"
 * 原 [009] display: none 会让空容器消失导致卡片高度不齐
 * 新方案：visibility: hidden 让容器透明但占位（高度等于一行 vip-tag-item） */
.product-vip-tags:empty {
    visibility: hidden;
    min-height: 22px;  /* 一行 vip-tag-item 的高度（font-size 11px + 上下 padding 3+3px + border 2px） */
}

/* ==================== [045] 看板 Kanban 布局 ==================== */
/* 商城首页商品列表改为「分类看板分栏」展示：
 *   - "全部商品"时：每个分类一栏，多栏并排（auto-fit 自适应宽度）
 *   - 选中具体分类时：只有 1 栏，自动占满
 * 移动端: 单列堆叠 */
.products-grid.kanban-mode {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 16px;
    align-items: start;
}

.kanban-col {
    background: #fafbfc;
    border-radius: 12px;
    padding: 14px;
    border: 1px solid #e8eaf0;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kanban-col-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    margin-bottom: 12px;
}

.kanban-col-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kanban-col-count {
    background: var(--primary-color);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

.kanban-col-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 看板内的卡片：紧凑横向 layout，覆盖外层 .product-card 默认样式 */
.products-grid.kanban-mode .product-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef0f5;
}

.products-grid.kanban-mode .product-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.18);
}

.products-grid.kanban-mode .product-top {
    padding: 0;
    gap: 10px;
    margin-bottom: 6px;
}

.products-grid.kanban-mode .product-image {
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 8px;
}

.products-grid.kanban-mode .product-name {
    font-size: 0.88rem;
    line-height: 1.3;
    margin-bottom: 3px;
}

.products-grid.kanban-mode .product-content {
    padding: 8px 0 0;
    gap: 6px;
}

.products-grid.kanban-mode .product-footer {
    gap: 6px;
}

.products-grid.kanban-mode .product-price-box .product-price {
    font-size: 0.95rem;
}

.products-grid.kanban-mode .vip-tag-item {
    font-size: 0.65rem;
    padding: 2px 5px;
}

.products-grid.kanban-mode .product-vip-tags:empty {
    min-height: 0; /* 看板模式下不强制占位（看板内不需要横向对齐） */
}

.products-grid.kanban-mode .card-attr-selector {
    gap: 4px;
}

.products-grid.kanban-mode .card-attr-btn {
    padding: 4px 8px;
    font-size: 0.72rem;
}

.products-grid.kanban-mode .product-detail-btn {
    padding: 6px 0;
    font-size: 0.78rem;
    margin-top: 6px;
}

.products-grid.kanban-mode .product-card.sold-out .sold-out-ribbon {
    top: 6px;
    right: -36px;
    width: 110px;
    font-size: 10px;
}

/* 平板 / 中小屏：固定 2 栏（避免 1 栏太宽显得空，3 栏太挤） */
@media (min-width: 769px) and (max-width: 1199px) {
    .products-grid.kanban-mode {
        grid-template-columns: 1fr 1fr;
    }
}

/* 移动端：单列堆叠（分类标题仍可见，按分类纵向看） */
@media (max-width: 768px) {
    .products-grid.kanban-mode {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .kanban-col {
        padding: 10px;
    }
    .kanban-col-title {
        font-size: 14px;
    }
}

/* ==================== [046] 方案 A 横向分组 + 6 列布局 ==================== */
/* admin 后台「商城首页商品布局」选「方案 A」时启用：
 *   - 每个分类一个段落 (.category-section)，段顶部紫色标题 + 计数
 *   - 段内 6 列网格，卡片顶部大方形商品图 + 名/描述/价格/VIP/库存/按钮纵向
 *   - 响应式：>=1200 6 列 / 768-1199 4 列 / <=768 2 列 */
.products-grid.grouped-mode {
    display: block; /* 由内部 .category-section 自管 grid */
}

.category-section {
    margin-bottom: 28px;
}

.category-section-title {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0 10px;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
}

.category-section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #667eea, #764ba2);
    border-radius: 2px;
}

.category-section-count {
    background: var(--primary-color);
    color: #fff;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.category-section-body {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

/* 段内卡片：纵向布局（图在顶 + 内容在底），覆盖默认 .product-card */
.products-grid.grouped-mode .product-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid #eef0f5;
    display: flex;
    flex-direction: column;
    gap: 7px;
    height: 100%; /* [047] 撑满 grid cell, 配合 grid stretch 让同行所有卡等高 */
}

/* [150] 第二套方案：同一视觉行共享“商品顶部 / 商品内容”两条纵向轨道。
 * 每行第一条轨道由该行最高的完整产品名称自然撑开，第二条轨道因此从
 * 同一个纵坐标开始，规格/价格框会自动与该行位置最低的一个对齐。
 * 仅命中后台第二个单选 grouped；方案 3 同时带 grouped-mode，必须排除。
 * 不支持 subgrid 的旧浏览器继续使用上面的安全 Flex 降级，不会截断名称。 */
@supports (grid-template-rows: subgrid) {
    .products-grid.grouped-mode:not(.grouped-compact-mode) .product-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        height: auto;
    }

    .products-grid.grouped-mode:not(.grouped-compact-mode) .product-top {
        grid-row: 1;
    }

    .products-grid.grouped-mode:not(.grouped-compact-mode) .product-content {
        grid-row: 2;
    }
}

.products-grid.grouped-mode .product-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(102, 126, 234, 0.18);
}

/* 商品顶部：图 + 文字结构反向 — 把图放顶部 100% 宽方形 */
.products-grid.grouped-mode .product-top {
    flex-direction: column;
    padding: 0;
    gap: 7px;
}

.products-grid.grouped-mode .product-image {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    min-width: 0;
    border-radius: 8px;
    order: -1; /* 把图移到 product-info 之上 */
}

.products-grid.grouped-mode .product-name {
    font-size: 0.92rem; /* [048] 字号放大: 0.82 → 0.92 */
    line-height: 1.3;
    margin-bottom: 2px;
}

.products-grid.grouped-mode .product-content {
    padding: 0;
    gap: 6px;
    flex: 1; /* [047] 撑满 product-card 剩余空间, 配合内部 footer flex:1 + stock margin-top:auto 让按钮推到卡底 */
}

.products-grid.grouped-mode .product-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1; /* [047] 撑满 product-content 剩余, 让 stock margin-top:auto 真正推到 footer 底 */
}

.products-grid.grouped-mode .product-price-box .product-price {
    font-size: 1.15rem; /* [048] 字号放大: 1.05 → 1.15 */
}

.products-grid.grouped-mode .vip-tag-item {
    font-size: 0.7rem; /* [048] 字号放大: 0.62 → 0.7 */
    padding: 2px 6px;
}

/* [047] VIP 容器空/非空都占一行 vip-tag 高度, 多档自然撑高;
 * 配合 stock margin-top:auto 让"VIP 起始位置"在所有卡对齐
 * [048] min-height 24 → 26px 适配 vip-tag 字号 0.7rem */
.products-grid.grouped-mode .product-vip-tags,
.products-grid.grouped-mode .product-vip-tags:empty {
    min-height: 26px;
}

.products-grid.grouped-mode .card-attr-selector {
    gap: 3px;
}

.products-grid.grouped-mode .card-attr-selector:empty {
    display: none; /* [047] 无属性商品的空 attr 容器隐藏, 不占布局 */
}

.products-grid.grouped-mode .card-attr-btn {
    padding: 4px 8px;
    font-size: 0.72rem; /* [048] 字号放大: 0.65 → 0.72 */
}

.products-grid.grouped-mode .product-stock {
    font-size: 0.72rem; /* [048] 字号放大: 0.65 → 0.72 */
    padding: 2px 8px;
    /* [077] margin-top:auto 上移到 .product-stat-row, 库存+已售整行一起推到 footer 底 */
}

/* [077] 库存 + 已售 并排成一行 (爷爷"销量放卡片右边, 跟库存并排"):
 * grouped-mode (方案 A + 方案 3 继承) 下整行 margin-top:auto 推到 footer 底, flex row 横向;
 * 库存在左、已售在右; 其他布局 (kanban/默认) 的 stat-row 只含库存, 表现不变 */
.products-grid.grouped-mode .product-stat-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: auto;
}

.products-grid.grouped-mode .product-detail-btn {
    padding: 7px 0;
    font-size: 0.82rem; /* [048] 字号放大: 0.75 → 0.82 */
    margin-top: 6px; /* [047] 紧贴 stock 下方 (stock 已 margin-top:auto 推到 footer 底, 按钮在卡底) */
}

.products-grid.grouped-mode .product-card.sold-out .sold-out-ribbon {
    top: 6px;
    right: -36px;
    width: 110px;
    font-size: 10px;
}

/* 平板 / 中小屏：4 列 */
@media (min-width: 769px) and (max-width: 1199px) {
    .category-section-body {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* 移动端：2 列（分类标题独立可见） */
@media (max-width: 768px) {
    .category-section-body {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .category-section-title {
        font-size: 14px;
        padding: 10px 0 8px;
    }
    .products-grid.grouped-mode .product-name {
        font-size: 0.88rem; /* [048] 移动端字号同步放大: 0.78 → 0.88 */
    }
}

/* [148] 方案 3 = 方案 A 的宽卡变体
 * - 桌面端 4 列、平板 3 列、移动端 2 列
 * - 三种方案统一不渲染简短描述，标题完整换行规则由基础 .product-name 统一提供
 * - 其他规则全部继承方案 A grouped-mode，避免重复样式
 */
.products-grid.grouped-compact-mode .category-section-body {
    grid-template-columns: repeat(4, 1fr); /* [070] 5 → 4 列, 卡片更宽 */
}

/* [076][077] 销量标签「已售 N」: 默认全局隐藏, 仅方案 3 (grouped-compact) 显示
 * [077] 位置改为 footer 底部 .product-stat-row 内, 与库存并排 (库存左 / 已售右);
 * 颜色: 暖橙 pill, 区别于库存绿色 pill, 呼应"热销"语义; 尺寸/圆角对齐 .product-stock */
.product-sales-badge {
    display: none;
}

.products-grid.grouped-compact-mode .product-sales-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: #c2410c;
    background: #ffedd5;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

/* [070] 平板 3 列 (4 列桌面下平板保持 3 列, 769-1199px 宽度 3 列 ~380px/卡 舒适) */
@media (min-width: 769px) and (max-width: 1199px) {
    .products-grid.grouped-compact-mode .category-section-body {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* [069] 移动端 2 列, 跟方案 A 一致 (移动端三方案表现一样) */
@media (max-width: 768px) {
    .products-grid.grouped-compact-mode .category-section-body {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* [025] 取消 [024] 强制上移 chatwoot bubble 的规则
 * 原因：[024] 的选择器 .woot-widget-bubble 实测没生效（chatwoot v3 实际 DOM 结构包了多层 holder，单层 bottom 覆盖被忽略）
 * 新方案：chatwoot bubble 保持右下角默认位置（bottom: 20px），微信客服按钮挪到左下角（见 .cs-float-btn 修改）
 * 两个按钮分开两侧不再叠加，比强行上移到同一侧更清晰
 * 历史规则已删除（不留死代码） */

/* [018] 强制覆盖：首页商品卡 .product-price-box 不显示 background 和 border
 * 起因：F12 实测首页 .product-price-box 偶尔被涂成淡红色 #fef2f2（爷爷反复反馈）
 * 但 style.css 里**根本没有**给它设 background。怀疑来源：
 *   1) product.html 详情页 inline `<style>` 的 `.product-price-box { background: #fef2f2 }`
 *      跨页面 CSS 共享（理论上不可能但 F12 见过类似现象）
 *   2) 浏览器扩展（A11y / 广告拦截 / Web Vitals 监视器）注入的 CSS
 *   3) 缓存 / Service Worker 残留
 * 不管根因如何，本规则用 `.products-grid` 父级 scope（只命中首页商品网格内的 price-box）
 * + `!important` 强制透明 + 无 border，杜绝任何视觉伪影 */
.products-grid .product-price-box {
    background: transparent !important;
    border: none !important;
}

/* [017] 删除 [009] 的 .product-price-box:not(:has(...)) 规则
 * 原规则：当 price-box 内既没价格又只有空 vip-tags 时整体隐藏
 * 删除原因：爷爷要求空 VIP 也保留位置，price-box 不能被隐藏
 * 后续如果再出现"空红色泡泡"，通过 .product-vip-tags:empty visibility:hidden 兜底 */

/* ==================== 轮播图 ==================== */
.banner-carousel {
    margin-bottom: 16px;
}

.carousel-track {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 1;
    border-radius: 12px;
    overflow: hidden;
    background: var(--bg-secondary);
    border: var(--flat-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;
    pointer-events: auto;
}

.carousel-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

.carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    transition: var(--transition-fast);
    opacity: 0;
    z-index: 10;
}

.banner-carousel:hover .carousel-btn {
    opacity: 1;
}

.carousel-btn:hover {
    background: white;
    color: var(--primary-color);
}

.carousel-prev {
    left: 16px;
}

.carousel-next {
    right: 16px;
}

.carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 10px 0 2px;
}

.carousel-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color, #dcdfe6);
    background: var(--bg-primary, #fff);
    color: var(--text-secondary, #909399);
    font-size: 12px;
    font-weight: 500;
    line-height: 21px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s ease;
    user-select: none;
}

.carousel-dot:hover {
    border-color: var(--primary-color, #667eea);
    color: var(--primary-color, #667eea);
}

.carousel-dot.active {
    background: var(--primary-color, #667eea);
    border-color: var(--primary-color, #667eea);
    color: #fff;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.35);
}

/* 轮播图响应式 */
@media (max-width: 768px) {
    .banner-carousel {
        margin-bottom: 20px;
    }

    .carousel-track {
        aspect-ratio: 3 / 1;
    }

    .carousel-btn {
        width: 36px;
        height: 36px;
        opacity: 1;
    }

    .carousel-prev {
        left: 8px;
    }

    .carousel-next {
        right: 8px;
    }

    .carousel-dots {
        padding: 8px 0 2px;
        gap: 6px;
    }

    .carousel-dot {
        width: 22px;
        height: 22px;
        font-size: 11px;
        line-height: 19px;
    }
}

/* ==================== 分类标签 - 扁平设计 ==================== */
.categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

/* 分类标签 - 扁平方形设计 */
.category-tag {
    padding: 6px 14px;
    background: var(--bg-card);
    border: var(--flat-border);
    border-radius: var(--border-radius);
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    transition: var(--transition-fast);
    /* [019] 改为 inline-flex 让图标和文字在同一标签框内垂直居中对齐 */
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* [019] 分类标签前置图标 */
.category-tag-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 3px;
}

.category-tag:hover,
.category-tag.active {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(102, 126, 234, 0.08);
}

/* ==================== 订单页面 - 扁平设计 ==================== */
.order-section {
    max-width: 600px;
    margin: 0 auto;
}

.order-info {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    padding: 18px;
    margin-bottom: 16px;
    border: var(--flat-border);
}

.order-info h2 {
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: var(--flat-border);
    font-size: 1.1rem;
}

.order-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--bg-secondary);
    font-size: 0.9rem;
}

.order-row:last-child {
    border-bottom: none;
}

.order-row .label {
    color: var(--text-secondary);
}

.order-row .value {
    font-weight: 600;
    color: var(--text-primary);
}

/* 订单状态标签 - 扁平设计 */
.order-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--border-radius);
    font-size: 0.8rem;
    font-weight: 600;
}

.order-status.pending {
    background: rgba(237, 137, 54, 0.1);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.order-status.paid,
.order-status.completed {
    background: rgba(72, 187, 120, 0.1);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.order-status.cancelled {
    background: rgba(245, 101, 101, 0.1);
    color: var(--error-color);
    border: 1px solid var(--error-color);
}

/* ==================== 卡密展示 - 扁平设计 ==================== */
.cards-list {
    margin-top: 12px;
}

.card-item {
    background: var(--bg-secondary);
    border: var(--flat-border);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.88rem;
    word-break: break-all;
    position: relative;
}

.card-item .copy-btn {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    padding: 6px 12px;
    font-size: 0.85rem;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    opacity: 0;
    transition: var(--transition-fast);
}

.card-item:hover .copy-btn {
    opacity: 1;
}

/* ==================== 加载和提示 - 扁平设计 ==================== */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--text-secondary);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.empty-state {
    text-align: center;
    padding: 30px 16px;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 10px;
    opacity: 0.5;
}

/* ==================== Toast 提示 - 扁平设计 ==================== */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
}

.toast {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: var(--flat-border);
    padding: 10px 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: slideIn 0.3s ease;
    max-width: 320px;
    font-size: 0.88rem;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.toast.success {
    border-left: 4px solid var(--success-color);
}

.toast.error {
    border-left: 4px solid var(--error-color);
}

.toast.warning {
    border-left: 4px solid var(--warning-color);
}

/* ==================== 模态框 - 扁平设计 ==================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-normal);
}

.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--bg-card);
    border-radius: var(--border-radius);
    border: var(--flat-border);
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    transform: scale(0.95);
    transition: var(--transition-normal);
}

.modal-overlay.active .modal {
    transform: scale(1);
}

.modal-header {
    padding: 14px 16px;
    border-bottom: var(--flat-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-header h3 {
    font-size: 1.1rem;
}

.modal-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--text-light);
    transition: var(--transition-fast);
}

.modal-close:hover {
    color: var(--text-primary);
}

.modal-body {
    padding: 14px 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.modal-footer {
    padding: 14px 16px;
    border-top: var(--flat-border);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ==================== 富文本详情内容样式 ==================== */
.product-detail-content {
    margin-top: 16px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: var(--border-radius);
    border: var(--flat-border);
    max-height: 300px;
    overflow-y: auto;
}

.product-detail-content h1,
.product-detail-content h2,
.product-detail-content h3,
.product-detail-content h4,
.product-detail-content h5,
.product-detail-content h6 {
    margin: 16px 0 8px;
    color: var(--text-primary);
}

.product-detail-content h1:first-child,
.product-detail-content h2:first-child,
.product-detail-content h3:first-child {
    margin-top: 0;
}

.product-detail-content p {
    margin: 8px 0;
    line-height: 1.8;
    color: var(--text-secondary);
}

.product-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius);
    margin: 12px 0;
}

.product-detail-content ul,
.product-detail-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.product-detail-content li {
    margin: 6px 0;
    line-height: 1.6;
}

.product-detail-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
}

.product-detail-content th,
.product-detail-content td {
    padding: 8px 12px;
    border: var(--flat-border);
    text-align: left;
}

.product-detail-content th {
    background: var(--bg-primary);
    font-weight: 600;
}

.product-detail-content blockquote {
    margin: 12px 0;
    padding: 12px 16px;
    border-left: 4px solid var(--primary-color);
    background: rgba(102, 126, 234, 0.05);
    color: var(--text-secondary);
}

.product-detail-content code {
    background: rgba(0, 0, 0, 0.05);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9em;
}

.product-detail-content pre {
    background: #2d3748;
    color: #e2e8f0;
    padding: 16px;
    border-radius: var(--border-radius);
    overflow-x: auto;
    margin: 12px 0;
}

.product-detail-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.product-detail-content a {
    color: var(--primary-color);
    text-decoration: underline;
}

.product-detail-content hr {
    border: none;
    border-top: var(--flat-border);
    margin: 16px 0;
}

/* ==================== 底部 - 扁平设计 ==================== */
.footer {
    background: var(--text-primary);
    color: var(--text-light);
    padding: 20px 0;
    margin-top: auto;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links {
    display: flex;
    gap: 16px;
}

.footer-links a {
    color: var(--text-light);
    font-size: 0.85rem;
}

.footer-links a:hover {
    color: white;
}

.footer-copyright {
    font-size: 0.82rem;
}

/* ==================== 响应式 ==================== */
/* 移动端底部导航栏 */
.mobile-tab-bar {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-color);
    padding: 6px 0;
    z-index: 1000;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
}

.tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: var(--text-light);
    text-decoration: none;
    font-size: 0.7rem;
    flex: 1;
    padding: 4px 0;
}

.tab-item.active {
    color: var(--primary-color);
}

.tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.tab-item.active .tab-icon {
    transform: translateY(-2px);
}

@media (max-width: 768px) {

    /* 显示底部导航 */
    .mobile-tab-bar {
        display: flex;
    }

    /* 页面底部增加 padding，防止被遮挡 */
    .page {
        padding-bottom: 52px;
    }

    /* 隐藏汉堡按钮样式（不再需要） */
    .mobile-menu-btn {
        display: none;
    }

    .container {
        padding: 0 12px;
    }

    .header-inner {
        height: 46px;
        position: relative;
    }

    .logo-text {
        font-size: 0.72rem;
        max-width: 180px;
        padding: 3px 10px;
    }

    /* 隐藏移动端顶部导航 */
    .nav {
        display: none;
    }

    /* 移动端不显示顶部用户区域，转移到"我的"标签页 */

    /* 调整 Toast 位置 */
    .toast-container {
        bottom: 80px;
    }

    /* 调整客服按钮位置 */
    .cs-float-btn {
        bottom: 80px;
    }

    .main-content {
        padding: 20px 0;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .categories {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 10px;
        -webkit-overflow-scrolling: touch;
    }

    .category-tag {
        flex-shrink: 0;
    }

    .product-detail-btn {
        padding: 6px 0;
        font-size: 0.75rem;
        /* [008] 移动端同样用 auto 推到底部对齐 */
        margin-top: auto;
        opacity: 1;
    }

    .footer-content {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* ==================== 支付方式选择 - 扁平设计 ==================== */
.payment-methods {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.payment-method {
    flex: 1;
    padding: 10px;
    border: var(--flat-border);
    border-radius: var(--border-radius);
    text-align: center;
    cursor: pointer;
    transition: var(--transition-fast);
    background: var(--bg-card);
}

.payment-method:hover {
    border-color: var(--primary-color);
}

.payment-method.active {
    border-color: var(--primary-color);
    background: rgba(102, 126, 234, 0.08);
}

.payment-method-icon {
    font-size: 1.6rem;
    margin-bottom: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.payment-method-icon svg,
.payment-method-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.payment-method-name {
    font-weight: 600;
    font-size: 0.88rem;
}

/* ==================== 数量选择器 - 扁平设计 ==================== */
.quantity-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quantity-btn {
    width: 30px;
    height: 30px;
    border: var(--flat-border);
    background: var(--bg-card);
    border-radius: var(--border-radius);
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.quantity-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.quantity-input {
    width: 50px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 600;
}

/* ==================== 动画与特效 (扁平化增强) ==================== */

/* 关键帧定义 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* 页面入场动画 */
.main-content,
.header,
.footer {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.header {
    animation-delay: 0s;
}

.main-content {
    animation-delay: 0.1s;
}

.footer {
    animation-delay: 0.2s;
}

/* 组件微交互 */

/* 按钮点击按压感 */
.btn:active {
    transform: scale(0.96);
}

/* 产品卡片交互升级 */
.product-card {
    /* 覆盖之前的样式，添加更平滑的过渡 */
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
        border-color 0.3s ease,
        box-shadow 0.3s ease !important;
}

.product-card:hover {
    transform: translateY(-4px);
    /* 轻微上浮 */
    border-color: var(--primary-color);
}

.product-image img {
    transition: transform 0.5s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.08);
    /* 图片轻微放大 */
}

/* 模态框动画优化 */
/* 查看详情按钮 */
.product-detail-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* [008] 把固定 margin-top: 10px 改成 auto，让 flex column 的 .product-content
       自动把按钮推到卡片底部；这样同一行所有商品卡的"查看详情"按钮横向对齐。
       视觉间距由卡片剩余空间自然分配（内容多时按钮上方紧凑，内容少时按钮上方留白多）。*/
    margin-top: auto;
    padding: 8px 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    opacity: 0.9;
}

.product-card:hover .product-detail-btn {
    opacity: 1;
    box-shadow: 0 3px 10px rgba(102, 126, 234, 0.4);
}

.product-detail-btn svg {
    transition: transform 0.3s ease;
}

.product-card:hover .product-detail-btn svg {
    transform: translateX(3px);
}

.modal-overlay.active .modal {
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 输入框聚焦动画 */
.form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
    transform: translateY(-1px);
}

/* 链接下划线动画优化 */
.nav a::after {
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 产品列表交错动画基础类 */
.product-card.animate-in {
    opacity: 0;
    /* 初始隐藏，由动画控制显示 */
    animation: fadeInUp 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* ==================== 客服悬浮按钮 ==================== */
.cs-float-btn {
    position: fixed;
    bottom: 100px;
    /* [025] 2026-05-20 16:30 微信客服按钮从右下角挪到左下角，让 chatwoot bubble 独占右下角 */
    left: 24px;
    width: 48px;
    height: 48px;
    background: var(--primary-color);
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
    cursor: pointer;
    z-index: 999;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: 2px solid white;
}

.cs-float-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.cs-float-btn svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.cs-tooltip {
    position: absolute;
    /* [025] 微信按钮挪左下角后，tooltip 从原右侧（right: 70px）改为左侧（left: 70px，按钮右边显示） */
    left: 70px;
    background: white;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 1;
    /* 改为 1，常驻显示 */
    transform: translateX(0);
    /* 改为 0 */
    transition: all 0.3s ease;
    /* 移除 pointer-events: none; 以支持可能的交互 */
    white-space: nowrap;
    border: 1px solid var(--border-color);
}

/* 移除 :hover 触发样式，因为已经默认显示了 */
/* .cs-float-btn:hover .cs-tooltip { ... } */

/* 客服二维码悬浮卡片 */
.cs-qrcode-card {
    position: absolute;
    bottom: 0;
    /* [025] 微信按钮挪左下角后，二维码卡从原按钮左侧（right: 80px）改为右侧（left: 80px）展开
     * 入场动画方向也反转：translateX(20px) → translateX(-20px)（从左滑入） */
    left: 80px;
    background: white;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-color);
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none;
    z-index: 1000;
    text-align: center;
    width: 240px;
}

.cs-float-btn:hover .cs-qrcode-card {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.cs-qrcode-card img {
    width: 200px;
    height: 200px;
    display: block;
    border-radius: 12px;
    margin: 0 auto 15px auto;
}

.cs-qrcode-card .qr-tip {
    font-size: 15px;
    color: #333;
    font-weight: 600;
    white-space: nowrap;
}

/* ==================== 用户认证相关样式 ==================== */

/* 用户区域 */
.user-area {
    display: flex;
    align-items: center;
    margin-left: 20px;
}

.user-guest {
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-guest a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.user-guest a:hover {
    color: var(--primary-color);
}

.user-guest .divider {
    color: var(--text-light);
}

/* 已登录用户 */
.user-logged {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.nav-link-logged {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 10px;
    border-radius: var(--border-radius-sm);
    transition: color 0.2s, background 0.2s;
    white-space: nowrap;
}

.nav-link-logged:hover {
    color: var(--primary-color);
    background: var(--bg-secondary);
}

.user-dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 20px;
    transition: background 0.2s;
}

.user-dropdown:hover {
    background: var(--bg-secondary);
}

.user-vip-badge {
    font-size: 16px;
}

.user-name {
    font-size: 14px;
    color: var(--text-primary);
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    min-width: 140px;
    display: none;
    z-index: 100;
    overflow: hidden;
}

.user-menu.show {
    display: block;
}

.user-menu a {
    display: block;
    padding: 12px 16px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.user-menu a:hover {
    background: var(--bg-secondary);
}

.user-menu a.active {
    color: var(--primary-color);
}

/* 登录/注册弹窗 */
.auth-modal {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.auth-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.auth-modal-content {
    position: relative;
    background: white;
    border-radius: 10px;
    padding: 24px;
    width: 100%;
    max-width: 380px;
    margin: 16px;
}

.auth-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: none;
    font-size: 24px;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.2s;
}

.auth-close:hover {
    color: var(--text-primary);
}

.auth-form h2 {
    text-align: center;
    margin-bottom: 18px;
    font-size: 20px;
    color: var(--text-primary);
}

.auth-field {
    margin-bottom: 14px;
}

.auth-field label {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-field input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.auth-field input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.auth-btn {
    width: 100%;
    padding: 10px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

.auth-btn:hover {
    opacity: 0.9;
}

.auth-switch {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-secondary);
}

.auth-switch a {
    color: var(--primary-color);
    text-decoration: none;
}

.auth-switch a:hover {
    text-decoration: underline;
}

/* ==================== 用户中心页面 ==================== */

.user-center {
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 0;
}

.user-profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    background: var(--primary-color);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: bold;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 2px;
}

.profile-email {
    color: var(--text-secondary);
    font-size: 14px;
    margin-bottom: 8px;
}

.profile-vip {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-vip .vip-badge {
    padding: 4px 12px;
    border-radius: 20px;
    color: white;
    font-size: 13px;
}

.profile-vip .vip-expire {
    color: var(--text-secondary);
    font-size: 13px;
}

/* 订单列表 */
.orders-section h2 {
    font-size: 17px;
    margin-bottom: 12px;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.order-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.order-no {
    font-size: 13px;
    color: var(--text-secondary);
}

.order-status {
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 20px;
}

.order-status.status-pending {
    background: #fef3c7;
    color: #d97706;
}

.order-status.status-paid {
    background: #d1fae5;
    color: #059669;
}

.order-status.status-completed {
    background: #dbeafe;
    color: #2563eb;
}

.order-status.status-cancelled {
    background: #fee2e2;
    color: #dc2626;
}

.order-body {
    padding: 12px 14px;
}

.order-product {
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
}

.order-meta {
    display: flex;
    gap: 14px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.order-discount {
    color: var(--success-color);
}

.order-time {
    font-size: 13px;
    color: var(--text-light);
}

.order-cards {
    padding: 10px 14px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.cards-title {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.card-content {
    background: white;
    padding: 10px 14px;
    border-radius: 4px;
    font-family: monospace;
    font-size: 13px;
    margin-bottom: 6px;
    word-break: break-all;
}

.card-content:last-child {
    margin-bottom: 0;
}

/* 空订单状态 */
.empty-orders {
    text-align: center;
    padding: 30px 16px;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.empty-orders .empty-icon {
    font-size: 36px;
    margin-bottom: 10px;
}

.empty-orders p {
    color: var(--text-secondary);
    margin-bottom: 14px;
}

.empty-orders .go-shopping {
    display: inline-block;
    padding: 8px 18px;
    background: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* 分页 */
.orders-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
}

.page-btn {
    padding: 6px 12px;
    border: 1px solid var(--border-color);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.page-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.page-btn.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
}

/* VIP 价格显示 */
.product-vip-prices {
    margin-top: 8px;
}

.vip-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    margin-right: 6px;
    margin-bottom: 4px;
}

.vip-price-tag .vip-icon {
    font-size: 14px;
}

.original-price {
    text-decoration: line-through;
    color: var(--text-light);
    font-size: 13px;
    margin-left: 8px;
}

/* 响应式 */
@media (max-width: 768px) {
    .user-profile-card {
        flex-direction: column;
        text-align: center;
    }

    .profile-vip {
        justify-content: center;
    }

    .order-meta {
        flex-wrap: wrap;
        gap: 10px;
    }
}

/* 移动端退出登录按钮 */
.mobile-logout-section {
    display: none;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .mobile-logout-section {
        display: block;
    }
}

/* ==================== 动态公告栏 ==================== */
.announcement-bar {
    width: 100%;
    height: 44px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(102, 126, 234, 0.1);
    overflow: hidden;
    position: relative;
    z-index: 90;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(102, 126, 234, 0.05);
}

.announcement-content {
    white-space: nowrap;
    position: absolute;
    font-size: 14px;
    color: var(--primary-color);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: scroll-left 15s linear infinite;
    /* 初始位置并不重要，因为动画会控制 transformï¼?
       但为了从屏幕右侧进入，我们可以在 JS 中动态设ç½?initial offset 
       或者这里直接设ç½?left: 100% */
    left: 100%;
}

.announcement-content::before {
    content: '\2B50';
    font-size: 16px;
    animation: spin 3s linear infinite;
}

/* 简单的游走动画：从当前位置 (left: 100%) 移动到完全离开屏幕左侧 */
@keyframes scroll-left {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-100vw, 0, 0);
        /* 移动距离大约是视口宽åº?+ 自身宽度，这里简化为 -100vw - 100% */
        /* 为了更精确控制，通常åœ?JS 中根据文字宽度动态计ç®?durationï¼?
           或者使ç”?translateX(-100%) 并配合父容器宽度 */
    }
}

/* 更精确的滚动关键帧，假设父容器是 100vw */
@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - 100vw));
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 适配暗黑模式或深色背æ™?*/
@media (prefers-color-scheme: dark) {
    .announcement-bar {
        background: rgba(30, 30, 30, 0.6);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* ==================== VIP 价格标签优化 ==================== */
.product-vip-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.vip-tag-item {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    border-radius: 4px;
    border: 1px solid var(--tag-color);
    /* 使用 CSS 变量 */
    background: #fff;
    color: var(--tag-color);
    overflow: hidden;
    transition: all 0.2s;
}

.vip-tag-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.vip-level {
    padding: 3px 5px;
    background: var(--tag-color);
    color: #fff;
    font-weight: bold;
}

.vip-val {
    padding: 3px 6px;
    font-weight: 600;
}

/* 最佳价格特殊样å¼?- 可选，目前保持一致以简洁为ä¸?*/
.vip-tag-item.best-price .vip-val {
    font-weight: 800;
}

/* ==================== 商品卡片属性选择器 ==================== */
.card-attr-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px;
}

.card-attr-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.25s;
    background: #fafafa;
    font-size: 13px;
    user-select: none;
}

.card-attr-btn:hover {
    border-color: var(--primary-color, #667eea);
    background: rgba(102, 126, 234, 0.05);
    transform: translateY(-1px);
}

.card-attr-btn.active {
    border-color: var(--primary-color, #667eea);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.12), rgba(118, 75, 162, 0.12));
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

.card-attr-name {
    font-weight: 600;
    color: #333;
}

.card-attr-btn.active .card-attr-name {
    color: var(--primary-color, #667eea);
}

.card-attr-price {
    font-weight: 700;
    color: #e63946;
    font-size: 14px;
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .vip-tag-item {
        background: transparent;
    }
}

/* ==================== 进店弹窗公告 ==================== */
.welcome-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.welcome-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.welcome-popup {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.welcome-popup-overlay.active .welcome-popup {
    transform: scale(1) translateY(0);
}

.welcome-popup-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 20px;
    border-bottom: var(--flat-border);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
}

.welcome-popup-header svg {
    width: 20px;
    height: 20px;
    color: var(--primary-color);
}

.welcome-popup-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    line-height: 1.8;
    font-size: 0.92rem;
    color: var(--text-secondary);
}

.welcome-popup-body img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    margin: 8px 0;
}

.welcome-popup-body video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 60vh;
    border-radius: 6px;
    margin: 8px 0;
    background: #000;
}

.welcome-popup-body a {
    color: var(--primary-color);
    text-decoration: underline;
}

.welcome-popup-body p {
    margin: 8px 0;
}

.welcome-popup-footer {
    padding: 14px 20px;
    border-top: var(--flat-border);
    display: flex;
    justify-content: center;
}

.welcome-popup-confirm {
    padding: 10px 48px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.welcome-popup-confirm:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.welcome-popup-confirm:active {
    transform: scale(0.97);
}

@media (max-width: 768px) {
    .welcome-popup {
        width: 92%;
        max-height: 75vh;
    }

    .welcome-popup-body {
        padding: 14px 16px;
    }

    .welcome-popup-confirm {
        padding: 10px 36px;
    }
}

/* ==================== 毛玻璃效果（仅当设置了全局背景图时激活） ==================== */
/* 利用 JS 动态设置 body[data-has-bg="true"] 来条件激活 */

body[data-has-bg="true"] {
    background-color: transparent;
}

/* 移除固定遮罩层（由 JS 创建），改用 CSS 实现更精细的控制 */
body[data-has-bg="true"] #bg-overlay {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* 顶部导航栏 - 毛玻璃 */
body[data-has-bg="true"] .header {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* 毛玻璃模式下的胶囊导航 */
body[data-has-bg="true"] .nav-pill:hover {
    background: rgba(79, 70, 229, 0.08);
}

body[data-has-bg="true"] .nav-pill.active {
    background: rgba(79, 70, 229, 0.12);
}

/* 内容容器背景透明 */
body[data-has-bg="true"] .main-content {
    background: transparent;
}

/* 商品卡片 - 毛玻璃 */
body[data-has-bg="true"] .card,
body[data-has-bg="true"] .product-card {
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

body[data-has-bg="true"] .card:hover,
body[data-has-bg="true"] .product-card:hover {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(79, 70, 229, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 商品卡片内属性按钮 - 白色背景，确保可读性 */
body[data-has-bg="true"] .product-card .card-attr-btn {
    background: rgba(255, 255, 255, 0.95);
}

/* 分类标签 - 毛玻璃 */
body[data-has-bg="true"] .category-tag {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

body[data-has-bg="true"] .category-tag.active,
body[data-has-bg="true"] .category-tag:hover {
    background: rgba(79, 70, 229, 0.85);
}

/* 轮播图区域 - 毛玻璃边框 */
body[data-has-bg="true"] .carousel-track {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* 产品详情页 - 所有白色区域毛玻璃化 */
body[data-has-bg="true"] .product-detail-container,
body[data-has-bg="true"] .product-detail-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* 产品详情页 - 价格区域 */
body[data-has-bg="true"] .price-section,
body[data-has-bg="true"] .price-box {
    background: rgba(255, 240, 245, 0.7) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 10px;
}

/* 产品详情页 - 图片区域 */
body[data-has-bg="true"] .product-gallery {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* 产品详情页 - 规格选择区域 */
body[data-has-bg="true"] .attr-selector {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 产品详情页 - 购买区域 */
body[data-has-bg="true"] .buy-section {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 产品详情页 - 订单/购买区域 */
body[data-has-bg="true"] .order-section,
body[data-has-bg="true"] .purchase-section,
body[data-has-bg="true"] .order-form {
    background: rgba(255, 255, 255, 0.65) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
}

/* 产品详情页 - 详细介绍区域 */
body[data-has-bg="true"] .detail-section {
    background: rgba(255, 255, 255, 0.68) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

/* 属性选择按钮 */
body[data-has-bg="true"] .attr-btn {
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body[data-has-bg="true"] .attr-btn.active,
body[data-has-bg="true"] .attr-btn:hover {
    background: rgba(79, 70, 229, 0.12) !important;
}

/* 表单控件 - 半透明 */
body[data-has-bg="true"] .form-control,
body[data-has-bg="true"] input[type="text"],
body[data-has-bg="true"] input[type="email"],
body[data-has-bg="true"] input[type="number"] {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 支付方式选项 */
body[data-has-bg="true"] .payment-option {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

body[data-has-bg="true"] .payment-option.active {
    background: rgba(79, 70, 229, 0.08) !important;
    border-color: var(--primary-color);
}

/* 底部栏 - 毛玻璃 */
body[data-has-bg="true"] footer,
body[data-has-bg="true"] .footer {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

/* 底部移动端导航 - 毛玻璃 */
body[data-has-bg="true"] .bottom-nav,
body[data-has-bg="true"] .mobile-tab-bar {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-top: 1px solid rgba(255, 255, 255, 0.4);
}

/* 产品详情页 - 商品信息右栏（标题、价格、描述文字区域） */
body[data-has-bg="true"] .product-info {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    padding: 20px;
}


/* 弹窗遮罩 - 保持不变 */
body[data-has-bg="true"] .modal-overlay {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* 弹窗内容 - 毛玻璃 */
body[data-has-bg="true"] .modal,
body[data-has-bg="true"] .welcome-popup {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Toast 提示 - 毛玻璃 */
body[data-has-bg="true"] .toast {
    background: rgba(255, 255, 255, 0.88) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* 客服按钮 - 毛玻璃 */
body[data-has-bg="true"] .cs-float-btn {
    background: rgba(79, 70, 229, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.3);
}

/* 公告栏 - 毛玻璃 */
body[data-has-bg="true"] .announcement-bar,
body[data-has-bg="true"] #announcement-bar {
    background: rgba(79, 70, 229, 0.75) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* 订单查询页 - 毛玻璃 */
body[data-has-bg="true"] .order-query-card,
body[data-has-bg="true"] .order-result-card {
    background: rgba(255, 255, 255, 0.72) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

/* VIP 价格标签 - 保持不变（已有渐变色） */

/* 确保文字在毛玻璃背景上清晰 */
body[data-has-bg="true"] {
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a6a;
}

/* Safari 兼容性后备 */
@supports not (backdrop-filter: blur(1px)) {
    body[data-has-bg="true"] .header {
        background: rgba(255, 255, 255, 0.92) !important;
    }

    body[data-has-bg="true"] .card,
    body[data-has-bg="true"] .product-card {
        background: rgba(255, 255, 255, 0.90) !important;
    }

    body[data-has-bg="true"] .category-tag {
        background: rgba(255, 255, 255, 0.85) !important;
    }

    body[data-has-bg="true"] footer,
    body[data-has-bg="true"] .footer {
        background: rgba(255, 255, 255, 0.90) !important;
    }

    body[data-has-bg="true"] .bottom-nav {
        background: rgba(255, 255, 255, 0.92) !important;
    }
}