/* =============================================
   THEME: 极简商务纯白风
   Minimalist Business Pure White
   Clean, professional, sophisticated whitespace-driven design
   ============================================= */

/* ===== 1. COLOR PALETTE ===== */
html.theme-pure-white {
    /* Primary brand */
    --brand-coffee: #1A1A1A;
    --brand-cream: #FAFAFA;
    --brand-gold: #9C7C3C;
    --brand-dark: #111111;
    --brand-light: #F5F5F5;

    /* Background layers */
    --bg-primary: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-tertiary: #F0F0F0;

    /* Text colors */
    --text-primary: #111111;
    --text-secondary: #6B7280;
    --text-muted: #9CA3AF;
    --text-inverse: #FFFFFF;
    --placeholder-color: #B0B0B0;

    /* Borders & dividers */
    --border-light: #E8E8E8;
    --border-medium: #D0D0D0;
    --divider-color: #EEEEEE;

    /* Overlay */
    --overlay-color: rgba(0, 0, 0, 0.35);

    /* Status colors */
    --color-success-bg: #F0FDF4;
    --color-success-border: #BBF7D0;
    --color-success-text: #166534;
    --color-warning-bg: #FFFBEB;
    --color-warning-border: #FDE68A;
    --color-warning-text: #92400E;
    --color-info-bg: #EFF6FF;
    --color-info-border: #BFDBFE;
    --color-info-text: #1E40AF;
    --color-error-bg: #FEF2F2;
    --color-error-border: #FECACA;
    --color-error-text: #DC2626;

    /* ===== 2. TYPOGRAPHY ===== */
    --font-heading: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-nav: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-button: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --font-small: 'Inter', 'Helvetica Neue', Arial, sans-serif;

    --h1-size: 3.5rem;
    --h1-weight: 700;
    --h1-lineheight: 1.1;
    --h2-size: 2.5rem;
    --h2-weight: 700;
    --h2-lineheight: 1.2;
    --h3-size: 1.75rem;
    --h3-weight: 600;
    --h3-lineheight: 1.3;
    --nav-font-size: 0.8125rem;
    --nav-font-weight: 500;
    --btn-font-size: 0.8125rem;
    --btn-font-weight: 600;
    --body-font-size: 0.9375rem;
    --body-lineheight: 1.7;
    --small-font-size: 0.8125rem;
    --footer-font-size: 0.8125rem;

    /* ===== 3. BORDER RADIUS ===== */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-full: 9999px;
    --radius-card: 4px;
    --radius-button: 2px;
    --radius-input: 2px;
    --radius-badge: 2px;
    --radius-modal: 8px;
    --radius-image: 2px;

    /* ===== 4. SHADOWS ===== */
    --shadow-page: none;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.03);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.04);
    --shadow-button: none;
    --shadow-button-hover: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-elevated: 0 4px 20px rgba(0, 0, 0, 0.06);
    --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.08);

    /* ===== 5. BACKGROUND TEXTURE ===== */
    --bg-texture: none;
    --nav-blur: blur(12px);
    --nav-bg-opacity: 0.92;
}

/* ===== 6. BODY BACKGROUND ===== */
html.theme-pure-white body {
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(0,0,0,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 50%, rgba(0,0,0,0.01) 0%, transparent 50%);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--body-font-size);
    line-height: var(--body-lineheight);
}

/* ===== 7. NAVIGATION ===== */
html.theme-pure-white nav {
    background: rgba(255, 255, 255, var(--nav-bg-opacity));
    border-bottom: 1px solid var(--border-light);
}

html.theme-pure-white nav.wv-nav--scrolled {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: var(--nav-blur);
    -webkit-backdrop-filter: var(--nav-blur);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Logo */
html.theme-pure-white .wv-nav-logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--brand-dark);
}
html.theme-pure-white .wv-nav-logo-accent {
    font-weight: 300;
    color: var(--brand-gold);
}

/* Nav links */
html.theme-pure-white .wv-nav-link {
    color: var(--text-secondary);
    font-size: var(--nav-font-size);
    font-weight: var(--nav-font-weight);
    letter-spacing: 0.02em;
    position: relative;
    padding: 6px 16px;
    border-radius: var(--radius-sm);
}
html.theme-pure-white .wv-nav-link:hover {
    color: var(--brand-dark);
    background: rgba(0,0,0,0.03);
}
html.theme-pure-white .wv-nav-link--active {
    color: var(--brand-dark);
    font-weight: 600;
}

/* Cart button */
html.theme-pure-white .wv-nav-cart {
    color: var(--text-secondary);
}
html.theme-pure-white .wv-nav-cart:hover {
    color: var(--brand-dark);
}
html.theme-pure-white .wv-nav-cart-count {
    background: var(--brand-dark);
    color: white;
    box-shadow: 0 0 0 2px var(--bg-primary);
}

/* ===== MOBILE HAMBURGER ===== */
html.theme-pure-white .wv-mobile-toggle {
    color: var(--text-secondary);
    border-radius: var(--radius-sm);
}
html.theme-pure-white .wv-mobile-toggle:hover {
    background: var(--bg-tertiary);
    color: var(--brand-dark);
}

html.theme-pure-white .wv-mobile-menu {
    background: var(--bg-primary);
    border-top: 1px solid var(--border-light);
    box-shadow: var(--shadow-elevated);
}

html.theme-pure-white .wv-mobile-link {
    color: var(--text-secondary);
    border-bottom: 1px solid var(--divider-color);
}

html.theme-pure-white .wv-mobile-link:hover {
    color: var(--brand-dark);
    background: var(--bg-secondary);
    padding-left: 20px;
}

html.theme-pure-white .wv-mobile-link--active {
    color: var(--brand-dark);
    font-weight: 600;
    background: var(--bg-secondary);
    border-left: 3px solid var(--brand-gold);
}

/* ===== DROPDOWN ===== */
html.theme-pure-white .wv-dropdown-menu {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-elevated);
    border-radius: var(--radius-md);
    padding: 4px 0;
}
html.theme-pure-white .wv-dropdown-item {
    color: var(--text-secondary);
    padding: 8px 16px;
}
html.theme-pure-white .wv-dropdown-item:hover {
    color: var(--brand-dark);
    background: var(--bg-secondary);
}

/* ===== 8. HERO ===== */
html.theme-pure-white .wv-hero-full {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
html.theme-pure-white .wv-hero-full-title {
    font-family: var(--font-heading);
    color: var(--text-primary);
}
html.theme-pure-white .wv-hero-full-sub {
    color: var(--text-secondary);
}

/* ===== 9. BUTTONS ===== */
/* Primary button */
html.theme-pure-white .wv-btn--primary {
    background: var(--brand-dark);
    color: var(--text-inverse);
    border: 1px solid var(--brand-dark);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: 0.05em;
    border-radius: var(--radius-button);
}
html.theme-pure-white .wv-btn--primary:hover {
    background: #2A2A2A;
    border-color: #2A2A2A;
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}
html.theme-pure-white .wv-btn--primary:active {
    transform: translateY(0) scale(0.98);
}

/* Outline button */
html.theme-pure-white .wv-btn--outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-medium);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    letter-spacing: 0.05em;
    border-radius: var(--radius-button);
}
html.theme-pure-white .wv-btn--outline:hover {
    border-color: var(--brand-dark);
    color: var(--brand-dark);
    background: rgba(0,0,0,0.02);
    transform: translateY(-1px);
}
html.theme-pure-white .wv-btn--outline:active {
    transform: translateY(0) scale(0.98);
}

/* Ghost button */
html.theme-pure-white .wv-btn--ghost {
    color: var(--text-secondary);
    border-radius: var(--radius-button);
}
html.theme-pure-white .wv-btn--ghost:hover {
    color: var(--brand-dark);
    background: var(--bg-tertiary);
}

/* Gold button */
html.theme-pure-white .wv-btn--gold {
    background: var(--brand-gold);
    color: var(--text-inverse);
    border-radius: var(--radius-button);
}
html.theme-pure-white .wv-btn--gold:hover {
    background: #8A6D32;
    box-shadow: var(--shadow-button-hover);
    transform: translateY(-1px);
}

/* Disabled state */
html.theme-pure-white .wv-btn--disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Label/tag button */
html.theme-pure-white .wv-btn--tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    background: transparent;
}
html.theme-pure-white .wv-btn--tag:hover {
    border-color: var(--brand-dark);
    color: var(--brand-dark);
    background: var(--bg-secondary);
}

/* ===== 10. PRODUCT CARDS ===== */
html.theme-pure-white .wv-product-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
html.theme-pure-white .wv-product-card:hover {
    border-color: var(--border-medium);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

/* Category label */
html.theme-pure-white .wv-product-card-category {
    color: var(--text-muted);
    letter-spacing: 0.1em;
}

/* Product name */
html.theme-pure-white .wv-product-card-name {
    color: var(--text-primary);
    font-weight: 600;
}
html.theme-pure-white .wv-product-card-name a:hover {
    color: var(--brand-gold);
}

/* Price */
html.theme-pure-white .wv-product-card-price {
    color: var(--brand-dark);
    font-weight: 700;
}
html.theme-pure-white .wv-product-card-price--old {
    color: var(--text-muted);
}

/* Product image */
html.theme-pure-white .wv-product-card-image {
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

/* ===== BADGES ===== */
html.theme-pure-white .wv-badge--new     { background: #111111; color: white; }
html.theme-pure-white .wv-badge--hot     { background: #DC2626; color: white; }
html.theme-pure-white .wv-badge--sale    { background: #111111; color: white; }
html.theme-pure-white .wv-badge--limited { background: #9C7C3C; color: white; }
html.theme-pure-white .wv-badge--bestseller { background: #1D4ED8; color: white; }

/* ===== 11. SECTIONS ===== */
html.theme-pure-white .wv-section--alt {
    background: var(--bg-secondary);
}
html.theme-pure-white .wv-section-label {
    color: var(--brand-gold);
    letter-spacing: 0.25em;
}
html.theme-pure-white .wv-section-title {
    color: var(--text-primary);
    font-family: var(--font-heading);
    font-weight: var(--h2-weight);
}

/* Section header decorative bar uses gold */
html.theme-pure-white .wv-section-header::before {
    background: var(--brand-gold);
}

/* ===== 12. VALUE BOXES ===== */
html.theme-pure-white .wv-value-icon {
    background: var(--brand-dark);
    color: white;
    border-radius: var(--radius-sm);
}
html.theme-pure-white .wv-value-title {
    color: var(--text-primary);
    font-weight: 700;
}
html.theme-pure-white .wv-value-text {
    color: var(--text-secondary);
}

/* ===== 13. TESTIMONIALS ===== */
html.theme-pure-white .wv-testimonial {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-card);
}
html.theme-pure-white .wv-testimonial:hover {
    box-shadow: var(--shadow-card-hover);
}
html.theme-pure-white .wv-testimonial-text {
    color: var(--text-secondary);
}
html.theme-pure-white .wv-testimonial-name {
    color: var(--text-primary);
    font-weight: 600;
}
html.theme-pure-white .wv-testimonial-role {
    color: var(--text-muted);
}
html.theme-pure-white .wv-testimonial-avatar {
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    border: 2px solid var(--border-light);
}
html.theme-pure-white .wv-star--filled {
    color: var(--brand-gold);
}

/* ===== 14. NEWSLETTER ===== */
html.theme-pure-white .wv-newsletter {
    background: linear-gradient(135deg, #1A1A1A 0%, #2A2A2A 100%);
}
html.theme-pure-white .wv-newsletter-title {
    color: white;
    font-family: var(--font-heading);
}
html.theme-pure-white .wv-newsletter-text {
    color: rgba(255,255,255,0.6);
}
html.theme-pure-white .wv-newsletter-input {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    border-radius: var(--radius-input);
}
html.theme-pure-white .wv-newsletter-input:focus {
    border-color: var(--brand-gold);
    box-shadow: 0 0 0 3px rgba(156, 124, 60, 0.2);
}
html.theme-pure-white .wv-newsletter-input::placeholder {
    color: rgba(255,255,255,0.4);
}

/* ===== 15. FOOTER ===== */
html.theme-pure-white .wv-footer {
    background: #1A1A1A;
    color: rgba(255,255,255,0.55);
}
html.theme-pure-white .wv-footer::before {
    background: linear-gradient(to right, var(--brand-dark), var(--brand-gold), var(--brand-dark));
}
html.theme-pure-white .wv-footer-title {
    color: rgba(255,255,255,0.9);
    letter-spacing: 0.1em;
}
html.theme-pure-white .wv-footer-link {
    color: rgba(255,255,255,0.5);
}
html.theme-pure-white .wv-footer-link:hover {
    color: white;
}
html.theme-pure-white .wv-footer-social a {
    border-color: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.4);
    border-radius: var(--radius-sm);
}
html.theme-pure-white .wv-footer-social a:hover {
    border-color: var(--brand-gold);
    color: var(--brand-gold);
    background: rgba(156, 124, 60, 0.1);
}
html.theme-pure-white .wv-footer-bottom {
    border-color: rgba(255,255,255,0.08);
}

/* ===== 16. FORMS ===== */
html.theme-pure-white .wv-input {
    background: var(--bg-primary);
    border: 1px solid var(--border-light);
    color: var(--text-primary);
    border-radius: var(--radius-input);
}
html.theme-pure-white .wv-input:focus {
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
}
html.theme-pure-white .wv-input::placeholder {
    color: var(--placeholder-color);
}
html.theme-pure-white .wv-input--error {
    border-color: var(--color-error-text);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1);
}
html.theme-pure-white .wv-input[readonly] {
    background: var(--bg-tertiary);
}
html.theme-pure-white .wv-input:disabled {
    background: var(--bg-secondary);
    opacity: 0.6;
}
html.theme-pure-white .wv-select {
    background-color: var(--bg-primary);
}

/* ===== 17. MODAL ===== */
html.theme-pure-white .wv-overlay {
    background: var(--overlay-color);
}
html.theme-pure-white .wv-modal-panel {
    background: var(--bg-primary);
    border-radius: var(--radius-modal);
}
html.theme-pure-white .wv-modal-header {
    border-bottom: 1px solid var(--border-light);
}
html.theme-pure-white .wv-modal-footer {
    border-top: 1px solid var(--border-light);
}
html.theme-pure-white .wv-modal-close {
    color: var(--text-muted);
    border-radius: var(--radius-sm);
}
html.theme-pure-white .wv-modal-close:hover {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

/* ===== 18. DIVIDERS ===== */
html.theme-pure-white .wv-divider--solid {
    border-color: var(--divider-color);
}

/* ===== 19. SIDEBAR ===== */
html.theme-pure-white .wv-sidebar-nav {
    border-color: var(--border-light);
    border-radius: var(--radius-card);
}
html.theme-pure-white .wv-sidebar-link {
    color: var(--text-secondary);
    border-bottom-color: var(--divider-color);
}
html.theme-pure-white .wv-sidebar-link:hover {
    color: var(--brand-dark);
    background: var(--bg-secondary);
}
html.theme-pure-white .wv-sidebar-link--active {
    background: var(--bg-secondary);
    color: var(--brand-dark);
    font-weight: 600;
    border-left: 3px solid var(--brand-gold);
}

/* ===== 20. CART SIDEBAR ===== */
html.theme-pure-white .wv-cart-sidebar {
    background: var(--bg-primary);
    box-shadow: var(--shadow-modal);
}
html.theme-pure-white .wv-cart-sidebar-overlay {
    background: var(--overlay-color);
}

/* ===== 21. BREADCRUMB ===== */
html.theme-pure-white .wv-breadcrumb a {
    color: var(--text-secondary);
}
html.theme-pure-white .wv-breadcrumb a:hover {
    color: var(--brand-dark);
}
html.theme-pure-white .wv-breadcrumb .wv-current {
    color: var(--text-primary);
}

/* ===== 22. PAGINATION ===== */
html.theme-pure-white .wv-page-link {
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
}
html.theme-pure-white .wv-page-link:hover {
    color: var(--brand-dark);
    background: var(--bg-secondary);
    border-color: var(--border-light);
}
html.theme-pure-white .wv-page-link--active {
    background: var(--brand-dark) !important;
    color: white !important;
    border-color: var(--brand-dark) !important;
}

/* ===== 23. TABLE ===== */
html.theme-pure-white .wv-table th {
    color: var(--text-muted);
    border-bottom-color: var(--border-light);
}
html.theme-pure-white .wv-table td {
    border-bottom-color: var(--divider-color);
    color: var(--text-secondary);
}
html.theme-pure-white .wv-table tr:hover td {
    background: var(--bg-secondary);
}

/* ===== 24. SCROLLBAR ===== */
html.theme-pure-white ::-webkit-scrollbar-thumb {
    background: #C0C0C0;
}

/* ===== 25. COOKIE BAR ===== */
html.theme-pure-white .wv-cookie-bar {
    background: var(--brand-dark);
    color: white;
}
html.theme-pure-white .wv-cookie-text {
    color: rgba(255,255,255,0.7);
}

/* ===== 26. LOADING SPINNER ===== */
html.theme-pure-white .wv-spinner {
    border-color: var(--border-light);
    border-top-color: var(--brand-dark);
}

/* ===== 27. RESPONSIVE OVERRIDES ===== */
@media (max-width: 639px) {
    html.theme-pure-white .wv-footer-grid {
        grid-template-columns: 1fr !important;
    }
    html.theme-pure-white nav .wv-nav-inner {
        height: 56px;
    }
}