/* GENERATED by `manage.py build_css` from base.css, mobile.css, ecommerce.css, customer.css, tokens.css, foundation.css, shell.css, components.css, forms.css - do not edit this file. */

/* ---- base.css ---- */
/* ============================================
   MV STYLES - PROFESSIONAL DESIGN SYSTEM
   Modern, Premium Furniture Brand UI/UX
   ============================================ */

/* ==========================================
   CSS CUSTOM PROPERTIES (Design Tokens)
   ========================================== */

:root {
    /* Colors - Luxury Cream & Neutral (missboon.ca inspired) */
    --color-primary: #2C2826;           /* Deep charcoal */
    --color-primary-light: #4A4644;
    --color-primary-dark: #1A1816;
    
    --color-secondary: #8B8680;         /* Soft gray */
    --color-secondary-light: #A39E9A;
    --color-secondary-dark: #6B6662;
    
    --color-background: #FFFFFF;
    --color-surface: #F5F1ED;           /* Warm cream */
    --color-surface-alt: #E8E4DF;       /* Light beige */
    
    --color-text: #2C2826;              /* Dark charcoal */
    --color-text-light: #6B6662;
    --color-text-lighter: #A39E9A;
    
    --color-border: #E8E4DF;
    --color-border-light: #F5F1ED;
    
    /* Status Colors */
    --color-success: #4A7C59;
    --color-warning: #D4A574;
    --color-error: #C84B3B;
    --color-info: #8B8680;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-secondary: 'Poppins', sans-serif;
    --font-display: 'Playfair Display', Georgia, serif;
    
    --font-size-xs: 0.75rem;      /* 12px */
    --font-size-sm: 0.875rem;     /* 14px */
    --font-size-base: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;     /* 18px */
    --font-size-xl: 1.25rem;      /* 20px */
    --font-size-2xl: 1.5rem;      /* 24px */
    --font-size-3xl: 1.875rem;    /* 30px */
    --font-size-4xl: 2.25rem;     /* 36px */
    --font-size-5xl: 3rem;        /* 48px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.25;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;
    
    /* Spacing */
    --spacing-1: 0.25rem;    /* 4px */
    --spacing-2: 0.5rem;     /* 8px */
    --spacing-3: 0.75rem;    /* 12px */
    --spacing-4: 1rem;       /* 16px */
    --spacing-5: 1.25rem;    /* 20px */
    --spacing-6: 1.5rem;     /* 24px */
    --spacing-8: 2rem;       /* 32px */
    --spacing-10: 2.5rem;    /* 40px */
    --spacing-12: 3rem;      /* 48px */
    --spacing-16: 4rem;      /* 64px */
    
    /* Border Radius */
    --radius-sm: 0.25rem;    /* 4px */
    --radius-md: 0.5rem;     /* 8px */
    --radius-lg: 0.75rem;    /* 12px */
    --radius-xl: 1rem;       /* 16px */
    --radius-full: 9999px;
    
    /* Shadows - Subtle & Professional */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Layout */
    --container-max-width: 1200px;
    --header-height: 70px;
    --sidebar-width: 260px;
    
    /* Z-index layers */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* ==========================================
   GLOBAL RESET & BASE STYLES
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: var(--color-background);
    overflow-x: hidden;
}

/* ==========================================
   TYPOGRAPHY SYSTEM
   ========================================== */

h1, h2, h3, h4, h5, h6 {
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

h1 {
    font-size: var(--font-size-4xl);
    font-family: var(--font-display);
}

h2 {
    font-size: var(--font-size-3xl);
    font-family: var(--font-display);
}

h3 {
    font-size: var(--font-size-2xl);
}

h4 {
    font-size: var(--font-size-xl);
}

h5 {
    font-size: var(--font-size-lg);
}

h6 {
    font-size: var(--font-size-base);
}

p {
    margin-bottom: var(--spacing-4);
    color: var(--color-text);
}

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

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

/* ==========================================
   BUTTON SYSTEM
   ========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-2);
    padding: var(--spacing-3) var(--spacing-6);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: 2px solid transparent;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
    user-select: none;
}

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

/* Button Variants */
.btn-primary {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

.btn-secondary:hover:not(:disabled) {
    background-color: var(--color-secondary-dark);
    border-color: var(--color-secondary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

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

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

.btn-ghost {
    background-color: transparent;
    color: var(--color-primary);
    border-color: transparent;
}

.btn-ghost:hover:not(:disabled) {
    background-color: var(--color-surface);
}

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-2) var(--spacing-4);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-4) var(--spacing-8);
    font-size: var(--font-size-lg);
}

.btn-block {
    display: flex;
    width: 100%;
}

/* ==========================================
   CARD SYSTEM
   ========================================== */

.card {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.card-header {
    padding: var(--spacing-5) var(--spacing-6);
    border-bottom: 1px solid var(--color-border-light);
}

.card-body {
    padding: var(--spacing-6);
}

.card-footer {
    padding: var(--spacing-5) var(--spacing-6);
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border-light);
}

/* Product Card rules removed 2026-09-17: confirmed dead code. The
   customer-facing product card component was rewritten to use .pcard
   during the redesign (product_card.html), and this .product-card
   family (base.css + matching continuation in customer.css) has had
   zero live template references since. Verified: no template anywhere
   in the codebase renders class="product-card-image/-body/-title/-price". */

/* ==========================================
   GRID SYSTEM
   ========================================== */

.container {
    width: 100%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-4);
}

.container-fluid {
    width: 100%;
    padding: 0 var(--spacing-4);
}

.grid {
    display: grid;
    gap: var(--spacing-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* ==========================================
   FORM ELEMENTS
   ========================================== */

.form-group {
    margin-bottom: var(--spacing-5);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.form-control {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-family: var(--font-primary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--color-text);
    background-color: white;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(44, 62, 80, 0.1);
}

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

textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* ==========================================
   BADGE SYSTEM
   ========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-1) var(--spacing-3);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge-success {
    background-color: var(--color-success);
    color: white;
}

.badge-warning {
    background-color: var(--color-warning);
    color: var(--color-primary);
}

.badge-error {
    background-color: var(--color-error);
    color: white;
}

.badge-info {
    background-color: var(--color-info);
    color: white;
}

/* ==========================================
   UTILITY CLASSES
   ========================================== */

/* Spacing */
.mt-1 { margin-top: var(--spacing-1); }
.mt-2 { margin-top: var(--spacing-2); }
.mt-4 { margin-top: var(--spacing-4); }
.mt-6 { margin-top: var(--spacing-6); }
.mt-8 { margin-top: var(--spacing-8); }

.mb-1 { margin-bottom: var(--spacing-1); }
.mb-2 { margin-bottom: var(--spacing-2); }
.mb-4 { margin-bottom: var(--spacing-4); }
.mb-6 { margin-bottom: var(--spacing-6); }
.mb-8 { margin-bottom: var(--spacing-8); }

.p-4 { padding: var(--spacing-4); }
.p-6 { padding: var(--spacing-6); }
.p-8 { padding: var(--spacing-8); }

/* Text */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }
.text-muted { color: var(--color-text-light); }

.font-bold { font-weight: var(--font-weight-bold); }
.font-semibold { font-weight: var(--font-weight-semibold); }

/* Display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-grid { display: grid; }

/* Flexbox */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-4 { gap: var(--spacing-4); }

/* Misc */
.rounded { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.shadow-md { box-shadow: var(--shadow-md); }

/* ==========================================
   RESPONSIVE BREAKPOINTS
   ========================================== */

@media (max-width: 768px) {
    :root {
        --font-size-4xl: 1.875rem;   /* 30px on mobile */
        --font-size-3xl: 1.5rem;     /* 24px on mobile */
    }
    
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(1, 1fr);
    }
    
    .container {
        padding: 0 var(--spacing-4);
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================
   ANIMATIONS (If Enabled)
   ========================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-20px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn var(--transition-slow) ease-out;
}

.animate-slide-in {
    animation: slideIn var(--transition-slow) ease-out;
}

/* ==========================================
   LOADING STATES
   ========================================== */

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}

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

/* ==========================================
   PRINT STYLES
   ========================================== */

@media print {
    body {
        color: black;
        background: white;
    }
    
    .no-print {
        display: none !important;
    }
}

/* ---- mobile.css ---- */
@media (max-width: 768px) {
/* ============================================
   MOBILE OPTIMIZATIONS - Ultra Fast Loading
   Minimal, Critical Styles Only
   ============================================ */

/* Header Mobile Optimization */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Cart Icon */
.cart-icon {
    position: relative;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--color-text, #333);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cart-icon:hover {
    background: rgba(0, 0, 0, 0.05);
}

.cart-icon>span:first-child {
    font-size: 24px;
}

.cart-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: #DC3545;
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    padding: 0 5px;
    animation: badge-pop 0.3s ease;
}

@keyframes badge-pop {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Logo */
.header-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 0;
    background: transparent !important;
    border: none;
    min-width: 40px;
    min-height: 40px;
}

.logo-image-small {
    height: 40px;
    width: 40px;
    object-fit: contain;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    border: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Three Dot Menu */
.three-dot-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 8px;
    min-width: 36px;
    min-height: 36px;
}

.three-dot-menu:hover {
    background: rgba(0, 0, 0, 0.05);
}

.three-dot-menu .dot {
    width: 5px;
    height: 5px;
    background: var(--color-text, #333);
    border-radius: 50%;
    transition: all 0.3s ease;
    display: block;
}

.three-dot-menu:hover .dot {
    background: var(--color-primary, #2C2826);
}

/* Main Container - Footer content */
.container {
    margin-top: var(--spacing-6, 1.5rem);
}

/* Footer */
.site-footer {
    background-color: var(--color-primary);
    color: white;
    padding: 2rem 0 1rem;
    margin-top: 3rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.footer-content h3 {
    color: white;
    font-size: 1rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.footer-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.social-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.social-links a:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.35rem;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    display: inline-block;
    padding: 0.15rem 0;
    font-size: 0.85rem;
    line-height: 1.4;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: #d4a574;
}

.social-icon {
    background: #25D366;
}

.social-icon.instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}

.social-icon.whatsapp {
    background: #25D366;
}

.social-icon.whatsapp:hover {
    background: #20BA5A;
}

.dropdown-item-empty {
    font-weight: 600;
    color: #333;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Dropdown Styles */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    min-width: 220px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu-right {
    left: auto;
    right: 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    color: var(--color-text, #333);
    text-decoration: none;
    border-bottom: 1px solid #f5f5f5;
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-divider {
    height: 1px;
    background: #e0e0e0;
    margin: 0.5rem 0;
}

.dropdown-item-icon {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}

.dropdown-item-empty {
    display: block;
    padding: 1rem;
    color: #999;
    text-align: center;
}

/* Mobile Specific - 768px and below */
@media (max-width: 768px) {
    .header-content {
        flex-wrap: nowrap;
        gap: 0.5rem;
    }
    
    .site-nav {
        display: none;
    }
    
    .header-right {
        margin-left: auto;
        gap: 0.5rem;
    }
    
    .site-logo {
        max-width: 160px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .menu-dropdown {
        display: block;
    }
    
    .three-dot-menu {
        padding: 10px 12px;
        min-width: 44px;
        min-height: 44px;
    }
    
    .three-dot-menu .dot {
        width: 6px;
        height: 6px;
        background: #000;
    }
    
    .logo-image-small {
        height: 28px;
    }
    
    .cart-icon {
        padding: 4px 6px;
    }
    
    .dropdown-menu {
        position: fixed;
        left: 50%;
        top: 60px;
        transform: translateX(-50%) translateY(-10px);
        width: 90%;
        max-width: 320px;
        z-index: 9999;
    }
    
    .dropdown.active .dropdown-menu {
        transform: translateX(-50%) translateY(0);
    }
    
    .dropdown-menu-right {
        left: 50%;
        right: auto;
    }
    
    .dropdown-item {
        padding: 1rem 1.25rem;
        font-size: 16px;
        min-height: 48px;
    }
    
    .dropdown-item-icon {
        font-size: 1.5rem;
    }
    
    /* Footer 2 columns on mobile */
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
}

/* Extra Small - 390px and below */
@media (max-width: 390px) {
    .site-logo {
        font-size: 0.9rem;
        max-width: 120px;
    }
    
    .header-content {
        gap: 0.25rem;
    }
    
    .header-right {
        gap: 0.35rem;
    }
    
    .logo-image-small {
        height: 24px;
    }
    
    .three-dot-menu {
        padding: 8px 10px;
        min-width: 40px;
        min-height: 40px;
    }
    
    .three-dot-menu .dot {
        width: 7px;
        height: 7px;
    }
    
    .footer-content {
        gap: 1rem !important;
    }
}
}

/* ---- ecommerce.css ---- */
/**
 * MV Styles Interior Furniture - Premium E-Commerce Styles
 * Modern, mobile-first furniture store design
 * 
 * Features:
 * - CSS Variables for easy customization
 * - Mobile-first responsive design
 * - Smooth animations and transitions
 * - Product cards with badges and hover effects
 * - Category cards
 * - Premium typography and spacing
 */

/* ==========================================
   CSS VARIABLES
   ========================================== */

:root {
    /* Brand Colors - Luxury Neutral Palette */
    --color-primary: #2C2826;
    --color-primary-light: #4A4644;
    --color-primary-dark: #1A1816;
    --color-secondary: #8B8680;
    --color-accent: #D4A574;            /* Warm gold */
    
    /* UI Colors */
    --color-success: #4A7C59;
    --color-warning: #D4A574;
    --color-danger: #C84B3B;
    --color-info: #8B8680;
    
    /* Neutral Colors */
    --color-white: #FFFFFF;
    --color-light-gray: #F5F1ED;
    --color-gray: #A39E9A;
    --color-dark-gray: #6B6662;
    --color-black: #2C2826;
    
    /* Text Colors */
    --color-text: #2C2826;
    --color-text-light: #6B6662;
    --color-text-dark: #1A1816;
    
    /* Background Colors */
    --color-bg: #FFFFFF;
    --color-bg-light: #F5F1ED;
    --color-bg-dark: #E8E4DF;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 16px rgba(0,0,0,0.15);
    --shadow-xl: 0 12px 24px rgba(0,0,0,0.2);
    
    /* Spacing */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */
    --spacing-2xl: 3rem;      /* 48px */
    --spacing-3xl: 4rem;      /* 64px */
    
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 50px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --font-size-xs: 0.75rem;   /* 12px */
    --font-size-sm: 0.875rem;  /* 14px */
    --font-size-base: 1rem;    /* 16px */
    --font-size-lg: 1.125rem;  /* 18px */
    --font-size-xl: 1.25rem;   /* 20px */
    --font-size-2xl: 1.5rem;   /* 24px */
    --font-size-3xl: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem;  /* 36px */
    
    /* Container Widths */
    --container-sm: 640px;
    --container-md: 768px;
    --container-lg: 1024px;
    --container-xl: 1280px;
}


/* ==========================================
   GLOBAL STYLES
   ========================================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-bg-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

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


/* ==========================================
   CONTAINER & LAYOUT
   ========================================== */

.container {
    width: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--spacing-md);
}

.section {
    padding: var(--spacing-xl) 0;
}

.section-title {
    font-size: var(--font-size-3xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-lg);
    text-align: center;
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-2xl);
    text-align: center;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


/* ==========================================
   PRODUCT GRID - REFINED MINIMAL DESIGN
   Desktop: 4 columns | Tablet: 3 columns | Mobile: 2 columns
   ========================================== */

/* Mobile default (< 480px) - 2 columns */
.grid,
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0;
}

/* Category grid - 1 column on mobile */
.grid.categories-grid {
    grid-template-columns: 1fr;
}

/* Larger phones (480px+) - 3 columns */
@media (min-width: 480px) {
    .grid,
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    
    .grid.categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablets (768px+) - 3 columns with better spacing */
@media (min-width: 768px) {
    .grid,
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
    
    .grid.categories-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Desktop (1024px+) - 4 columns */
@media (min-width: 1024px) {
    .grid,
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }
    
    .grid.categories-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* REFINED PRODUCT CARD - PREMIUM DESIGN section removed 2026-09-17:
   confirmed dead code (.product-card / .product-card__* BEM family,
   superseded by .pcard in product_card.html, zero template consumers).
   .badge* rules below remain in active use by product_card.html. */

.badge {
    display: inline-block;
    padding: 5px 11px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.2;
    box-shadow: var(--shadow-sm);
}

.badge--sale {
    background: var(--color-error);
    color: var(--color-background);
}

.badge--featured {
    background: var(--color-warning);
    color: var(--color-text);
}

.badge--sold-out {
    background: rgba(44, 40, 38, 0.85);
    color: var(--color-background);
}

/* Wishlist Heart Button - Always Visible */
.wishlist-heart-btn {
    transition: all 0.3s ease;
}

.wishlist-heart-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3) !important;
    border-color: #e74c3c !important;
}

.wishlist-heart-btn:active {
    transform: scale(0.95) !important;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.15); }
}

/* Product Info/Name/Price/Lazy-loading rules for the retired
   .product-card__* family removed 2026-09-17 (see note above). */


.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
}

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

.btn--primary:hover {
    background: var(--color-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn--secondary {
    background: var(--color-white);
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
}

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

.btn--block {
    width: 100%;
}


/* ==========================================
   CATEGORY CARD
   ========================================== */

.category-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07), 0 10px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    text-decoration: none;
    display: block;
    transform: perspective(1000px) translateZ(0);
    transform-style: preserve-3d;
}

.category-card:hover {
    box-shadow: 0 14px 28px rgba(0, 0, 0, 0.12), 0 20px 40px rgba(0, 0, 0, 0.08);
    transform: perspective(1000px) translateY(-10px) translateZ(30px) scale(1.02);
}

.category-card__icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-md);
}

.category-card__title {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text-dark);
    margin-bottom: var(--spacing-sm);
}

.category-card__description {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.category-card__link {
    display: inline-flex;
    align-items: center;
    font-size: var(--font-size-sm);
    color: var(--color-accent);
    font-weight: 600;
}

.category-card__link::after {
    content: '→';
    margin-left: var(--spacing-sm);
    transition: transform var(--transition-fast);
}

.category-card:hover .category-card__link::after {
    transform: translateX(4px);
}


/* ==========================================
   HERO SECTION
   ========================================== */

.hero {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: var(--color-white);
    padding: var(--spacing-3xl) 0;
    text-align: center;
}

.hero__title {
    font-size: var(--font-size-4xl);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
}

.hero__subtitle {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-xl);
    opacity: 0.9;
}

.hero__cta {
    display: inline-flex;
    align-items: center;
    padding: var(--spacing-lg) var(--spacing-2xl);
    background: var(--color-secondary);
    color: var(--color-white);
    text-decoration: none;
    border-radius: var(--radius-md);
    font-size: var(--font-size-lg);
    font-weight: 600;
    cursor: pointer;
    position: relative;
    z-index: 10;
    pointer-events: auto;
    transition: all var(--transition-base);
}

.hero__cta:hover {
    background: #d35400;
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
}


/* ==========================================
   FILTERS & SEARCH
   ========================================== */

.filters {
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-xl);
    box-shadow: var(--shadow-sm);
}

.filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-md);
    align-items: center;
}

.search-box {
    flex: 1;
    min-width: 200px;
}

.search-box__input {
    width: 100%;
    padding: var(--spacing-md);
    border: 2px solid var(--color-bg-dark);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: border-color var(--transition-fast);
}

.search-box__input:focus {
    outline: none;
    border-color: var(--color-accent);
}

.filter-select {
    padding: var(--spacing-md);
    border: 2px solid var(--color-bg-dark);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    background: var(--color-white);
    cursor: pointer;
    transition: border-color var(--transition-fast);
}

.filter-select:focus {
    outline: none;
    border-color: var(--color-accent);
}


/* ==========================================
   BREADCRUMB
   ========================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.breadcrumb__item {
    color: var(--color-text-light);
}

.breadcrumb__item--active {
    color: var(--color-text);
    font-weight: 600;
}

.breadcrumb__separator {
    color: var(--color-gray);
}


/* ==========================================
   RESPONSIVE UTILITIES
   ========================================== */

/* Hide on mobile */
@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }
}

/* Hide on tablet and up */
@media (min-width: 768px) {
    .hide-tablet-up {
        display: none !important;
    }
}

/* Hide on desktop */
@media (min-width: 1024px) {
    .hide-desktop {
        display: none !important;
    }
}


/* ==========================================
   ANIMATIONS
   ========================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

/* Stagger animation for grid items */
.grid > * {
    animation: fadeIn 0.5s ease-out backwards;
}

.grid > *:nth-child(1) { animation-delay: 0.1s; }
.grid > *:nth-child(2) { animation-delay: 0.2s; }
.grid > *:nth-child(3) { animation-delay: 0.3s; }
.grid > *:nth-child(4) { animation-delay: 0.4s; }


/* ==========================================
   LAZY LOADING
   ========================================== */

.lazy-image {
    opacity: 0;
    transition: opacity var(--transition-base);
}

.lazy-image.loaded {
    opacity: 1;
}


/* ==========================================
   MOBILE OPTIMIZATIONS
   ========================================== */

/* Mobile product grid - 2 columns (considered-purchase merchandising) */
@media (max-width: 768px) {
    .grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: var(--spacing-sm);
    }
    
    /* .product-card / .product-card__* mobile overrides removed
       2026-09-17: retired BEM family, see top-of-file note. */

    /* Make badges smaller on mobile */
    .badge {
        padding: 2px 6px;
        font-size: 0.6rem;
    }

    .btn--block {
        width: 100%;
    }
    
    /* Larger tap targets for critical actions */
    .btn--primary {
        min-height: 36px;
        font-weight: 600;
    }
    
    /* Optimize category cards for mobile */
    .category-card {
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
    }
    
    .category-card__icon {
        font-size: 2rem;
    }
    
    /* Hero section mobile */
    .hero {
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    .hero__title {
        font-size: var(--font-size-2xl);
    }
    
    /* Section spacing */
    .section {
        padding: var(--spacing-xl) var(--spacing-sm);
    }
}

/* Very small screens - keep 2 columns, tighten the gutter */
@media (max-width: 480px) {
    .grid,
    .products-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    
    .category-card {
        padding: var(--spacing-sm);
    }
}


/* ==========================================
   ========================================== */

@media print {
    .no-print {
        display: none !important;
    }
}

/* ---- customer.css ---- */
/* ============================================
   MV STYLES - CUSTOMER PORTAL STYLES
   Professional Furniture E-commerce UI
   ============================================ */

/* ==========================================
   HEADER & NAVIGATION
   ========================================== */

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background-color: white;
    border-bottom: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-sm);
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-4) 0;
    gap: var(--spacing-6);
}

.site-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    text-decoration: none;
}

.logo-image {
    height: 50px;
    width: auto;
    object-fit: contain;
}

.logo-text {
    font-family: var(--font-display);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-6);
}

.nav-link {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
    text-decoration: none;
    transition: color var(--transition-fast);
    position: relative;
}

.nav-link:hover {
    color: var(--color-secondary);
}

.nav-link.active::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-secondary);
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
    cursor: pointer;
}

@media (max-width: 768px) {
    .site-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        right: 0;
        flex-direction: column;
        background-color: white;
        padding: var(--spacing-6);
        box-shadow: var(--shadow-lg);
        transform: translateY(-100%);
        transition: transform var(--transition-base);
    }
    
    .site-nav.active {
        transform: translateY(0);
    }
    
    .menu-toggle {
        display: block;
    }
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero,
.hero-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
    color: white;
    padding: var(--spacing-16) 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse"><path d="M 100 0 L 0 0 0 100" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.5;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: white;
    margin-bottom: var(--spacing-4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: var(--font-size-xl);
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: var(--spacing-8);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    gap: var(--spacing-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .hero,
    .hero-section {
        padding: var(--spacing-12) 0;
    }
    
    .hero-title {
        font-size: var(--font-size-2xl);
        line-height: 1.3;
        padding: 0 var(--spacing-4);
    }
    
    .hero-subtitle {
        font-size: var(--font-size-base);
    }
}

/* ==========================================
   PRODUCT GRID
   ========================================== */

.products-section {
    padding: var(--spacing-12) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-10);
}

.section-title {
    font-size: var(--font-size-3xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-3);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
}

/* ==========================================
   PRODUCT GRID - REFINED DESIGN
   Desktop: 4 columns | Tablet: 3 columns | Mobile: 2-3 columns
   ========================================== */

/* Mobile default (< 480px) - 2 columns */
.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0;
}

/* Larger phones (480px+) - 3 columns */
@media (min-width: 480px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

/* Tablets (768px+) - 3 columns */
@media (min-width: 768px) {
    .products-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }
}

/* Desktop (1024px+) - 4 columns */
@media (min-width: 1024px) {
    .products-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 22px;
    }
}

/* Product Card Enhanced rules removed 2026-09-17: confirmed dead code,
   continuation of the same retired .product-card family (see base.css). */

/* ==========================================
   PRODUCT DETAIL PAGE
   ========================================== */

.product-detail {
    padding: var(--spacing-12) 0;
}

.product-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-10);
    align-items: start;
}

.product-image-gallery {
    position: sticky;
    top: calc(var(--header-height) + var(--spacing-6));
}

.product-main-image {
    width: 100%;
    aspect-ratio: 4/3;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    margin-bottom: var(--spacing-4);
}

.product-info {
    padding: var(--spacing-6);
}

.product-detail-title {
    font-size: var(--font-size-4xl);
    color: var(--color-primary);
    margin-bottom: var(--spacing-4);
}

.product-detail-price {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-secondary);
    margin-bottom: var(--spacing-6);
}

.product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-6);
    padding-bottom: var(--spacing-6);
    border-bottom: 1px solid var(--color-border);
}

.product-meta-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.product-description {
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
    color: var(--color-text);
    margin-bottom: var(--spacing-8);
}

.product-actions {
    display: flex;
    gap: var(--spacing-4);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-6);
    }
    
    .product-image-gallery {
        position: static;
    }
}

/* ==========================================
   STICKY CALL-TO-ACTION (Mobile)
   ========================================== */

.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: var(--spacing-4);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: var(--z-sticky);
    transform: translateY(100%);
    transition: transform var(--transition-base);
}

.sticky-cta.visible {
    transform: translateY(0);
}

.sticky-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-4);
    max-width: var(--container-max-width);
    margin: 0 auto;
}

@media (min-width: 769px) {
    .sticky-cta {
        display: none;
    }
}

/* ==========================================
   FOOTER
   ========================================== */

.site-footer {
    background-color: var(--color-primary);
    color: white;
    padding: var(--spacing-6) 0 var(--spacing-4);
    margin-top: var(--spacing-8);
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-4);
    margin-bottom: var(--spacing-4);
}

.footer-section h3 {
    color: white;
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-4);
}

.footer-section p,
.footer-section a {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
}

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

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: var(--spacing-2);
}

.footer-social a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    transform: translateX(5px);
    color: var(--color-secondary);
}

.social-links {
    display: flex;
    gap: var(--spacing-4);
    margin-top: var(--spacing-4);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: white;
    transition: all var(--transition-base);
}

.social-link:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--spacing-6);
    text-align: center;
    font-size: var(--font-size-sm);
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================
   CONTACT SECTION
   ========================================== */

.contact-section {
    padding: var(--spacing-12) 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-10);
}

.contact-info-card {
    background-color: var(--color-surface);
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    text-align: center;
}

.contact-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto var(--spacing-4);
    background-color: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
}

@media (max-width: 768px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   WHATSAPP FLOAT BUTTON & CONTACT CARD
   ========================================== */

.whatsapp-float {
    position: fixed;
    bottom: var(--spacing-6);
    right: var(--spacing-6);
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--font-size-2xl);
    box-shadow: var(--shadow-xl);
    z-index: var(--z-fixed);
    transition: all var(--transition-base);
    cursor: pointer;
}

.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 40px rgba(37, 211, 102, 0.4);
}

/* WhatsApp Contact Card */
.whatsapp-card {
    position: fixed;
    bottom: 90px;
    right: var(--spacing-6);
    width: 280px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    z-index: 999;
    display: none;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.3s ease;
}

.whatsapp-card.active {
    display: block;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.whatsapp-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    border-bottom: 1px solid #eee;
}

.whatsapp-card-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.whatsapp-card-header .close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.whatsapp-card-header .close-btn:hover {
    background: #f5f5f5;
    color: #333;
}

.whatsapp-card-body {
    padding: 12px;
}

.whatsapp-contact-item {
    display: flex;
    align-items: center;
    padding: 12px;
    margin-bottom: 8px;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s;
}

.whatsapp-contact-item:last-child {
    margin-bottom: 0;
}

.whatsapp-contact-item:hover {
    background: #e8f5e9;
    transform: translateX(4px);
}

.whatsapp-contact-item .contact-icon {
    font-size: 36px;
    margin-right: 12px;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.whatsapp-contact-item .woman-icon {
    background: linear-gradient(135deg, #FF6B9D 0%, #C06C84 100%);
}

.whatsapp-contact-item .man-icon {
    background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
}

.whatsapp-contact-item .contact-info {
    flex: 1;
}

.whatsapp-contact-item .contact-label {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 2px;
}

.whatsapp-contact-item .contact-number {
    font-size: 13px;
    color: #666;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .whatsapp-float {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 56px;
        height: 56px;
        font-size: 24px;
        background-color: #25D366;
        color: white;
        border-radius: 50%;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
        box-shadow: 0 4px 16px rgba(37, 211, 102, 0.3);
        z-index: 1000;
        cursor: pointer;
    }
    
    .whatsapp-card {
        position: fixed;
        bottom: 85px;
        right: 20px;
        width: 280px;
        max-width: calc(100vw - 40px);
        background: white;
        border-radius: 16px;
        -webkit-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        z-index: 999;
        display: none;
    }
    
    .whatsapp-card.active {
        display: block;
    }
    
    .whatsapp-card-header {
        padding: 16px;
        border-bottom: 1px solid #f0f0f0;
        background: #25D366;
        border-radius: 16px 16px 0 0;
        position: relative;
    }
    
    .whatsapp-card-header h3 {
        font-size: 16px;
        font-weight: 700;
        color: white;
        margin: 0;
    }
    
    .whatsapp-card-body {
        padding: 12px;
        background: white;
        border-radius: 0 0 16px 16px;
    }
    
    .whatsapp-contact-item {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 12px;
        margin-bottom: 8px;
        border-radius: 10px;
        background: #f8f9fa;
        -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
        text-decoration: none;
    }
    
    .whatsapp-contact-item:last-child {
        margin-bottom: 0;
    }
    
    .whatsapp-contact-item .contact-icon {
        font-size: 36px;
        width: 48px;
        height: 48px;
        margin-right: 12px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        border-radius: 50%;
        -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    .whatsapp-contact-item .contact-info {
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }
    
    .whatsapp-contact-item .contact-label {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 3px;
        color: #333;
    }
    
    .whatsapp-contact-item .contact-number {
        font-size: 13px;
        color: #25D366;
        font-weight: 600;
    }
    
    .whatsapp-card-header .close-btn {
        position: absolute;
        top: 14px;
        right: 14px;
        width: 28px;
        height: 28px;
        font-size: 18px;
        color: white;
        background: rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        border: none;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        cursor: pointer;
    }
}

/* ==========================================
   EMPTY STATE
   ========================================== */

.empty-state {
    text-align: center;
    padding: var(--spacing-16) var(--spacing-4);
}

.empty-state-icon {
    font-size: var(--font-size-5xl);
    color: var(--color-text-lighter);
    margin-bottom: var(--spacing-6);
}

.empty-state-title {
    font-size: var(--font-size-2xl);
    color: var(--color-text);
    margin-bottom: var(--spacing-3);
}

.empty-state-text {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-6);
}

/* ==========================================
   STAT CARDS (HOMEPAGE)
   ========================================== */

.stat-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
    border-top: 4px solid transparent;
}

.stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
}

.stat-card-primary {
    border-top-color: var(--color-primary);
}

.stat-card-success {
    border-top-color: var(--color-success);
}

.stat-card-secondary {
    border-top-color: var(--color-secondary);
}

.stat-card-icon {
    font-size: var(--font-size-4xl);
    margin-bottom: var(--spacing-4);
}

.stat-card-value {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
}

.stat-card-label {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
    font-weight: var(--font-weight-medium);
}

/* ==========================================
   SECTION HEADERS
   ========================================== */

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-12);
}

.section-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    color: var(--color-text);
    margin-bottom: var(--spacing-3);
    font-weight: var(--font-weight-bold);
}

.section-subtitle {
    font-size: var(--font-size-lg);
    color: var(--color-text-light);
}

/* ==========================================
   CATEGORY CARDS
   ========================================== */

.category-card {
    background: white;
    padding: var(--spacing-8);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    text-decoration: none;
    display: block;
}

.category-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-xl);
}

.category-card-icon {
    font-size: var(--font-size-5xl);
    margin-bottom: var(--spacing-4);
}

.category-card-title {
    font-size: var(--font-size-xl);
    color: var(--color-text);
    margin-bottom: var(--spacing-2);
    font-weight: var(--font-weight-semibold);
}

.category-card-count {
    font-size: var(--font-size-base);
    color: var(--color-text-light);
}

/* ==========================================
   CONTACT CTA
   ========================================== */

.contact-cta {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    color: white;
    padding: var(--spacing-12) var(--spacing-8);
    border-radius: var(--radius-xl);
    text-align: center;
}

.contact-cta-content {
    margin-bottom: var(--spacing-8);
}

.contact-cta-title {
    font-family: var(--font-display);
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-4);
    color: white;
}

.contact-cta-text {
    font-size: var(--font-size-lg);
    opacity: 0.95;
    max-width: 600px;
    margin: 0 auto;
}

.contact-cta-action {
    display: flex;
    justify-content: center;
}

/* Mobile adjustments for new components */
@media (max-width: 768px) {
    .stat-card {
        padding: var(--spacing-6);
    }
    
    .stat-card-value {
        font-size: var(--font-size-3xl);
    }
    
    .category-card {
        padding: var(--spacing-6);
    }
    
    .category-card-icon {
        font-size: var(--font-size-4xl);
    }
    
    .contact-cta {
        padding: var(--spacing-8) var(--spacing-6);
    }
    
    .contact-cta-title {
        font-size: var(--font-size-2xl);
    }
    
    .section-title {
        font-size: var(--font-size-2xl);
    }
}

/* ---- tokens.css ---- */
/* ============================================================
   MV STYLES — DESIGN TOKENS  (single source of truth)
   Brand direction: Luxury charcoal + warm gold
   ------------------------------------------------------------
   This file is the ONLY place brand values are defined.
   It is loaded AFTER base.css / ecommerce.css / customer.css and
   uses the `:root:root` selector so its values win over the older
   conflicting :root blocks in those files regardless of load order.

   Admin-configurable brand colours (BrandingSettings) are injected
   as a small inline <style> AFTER this file in the base templates,
   so a colour set in the admin still overrides the defaults here.
   ============================================================ */

:root:root {
  /* ---------- Brand palette ---------- */
  --color-primary: #2C2826;          /* deep warm charcoal — primary ink / buttons */
  --color-primary-light: #4A4644;
  --color-primary-dark: #1A1715;

  --color-accent: #B98C46;           /* warm gold — CTAs, highlights, decorative rules */
  --color-accent-light: #D9B87C;
  --color-accent-dark: #8A6A34;      /* gold that passes AA as text on light bg (~4.7:1) */
  --color-accent-strong: var(--color-accent-dark);

  --color-secondary: #6B6662;        /* muted stone — secondary text / UI */
  --color-secondary-light: #A39E9A;
  --color-secondary-dark: #4A4644;

  /* ---------- Neutrals / surfaces ---------- */
  --color-background: #FFFFFF;
  --color-bg: var(--color-background);
  --color-bg-light: #F7F4EF;          /* warm cream */
  --color-bg-dark: #EFEAE2;
  --color-surface: #F7F4EF;
  --color-surface-alt: #EFEAE2;
  --color-surface-2: #EFEAE2;
  --color-white: #FFFFFF;
  --color-light-gray: #F2EEE8;
  --color-gray: #857C72;
  --color-dark-gray: #5C554E;
  --color-black: #1A1715;

  /* ---------- Text ---------- */
  --color-text: #262220;             /* body ink — AA on white (~14:1) */
  --color-text-dark: #1A1715;
  --color-text-light: #5C554E;       /* secondary text (~7:1) */
  --color-text-secondary: #5C554E;   /* (was undefined — 12 template uses) */
  --color-text-muted: #7A7168;       /* muted but still AA (~4.7:1) */
  --color-text-lighter: #7A7168;     /* (was #A39E9A ≈ 2.3:1 — failed AA) */

  /* ---------- Borders ---------- */
  --color-border: #E4DED4;
  --color-border-light: #EFEAE2;
  --color-border-strong: #D8D0C4;

  /* ---------- Semantic ---------- */
  --color-success: #3E7C4E;
  --color-warning: #B4832F;
  --color-danger: #B23B2E;
  --color-error: var(--color-danger);
  --color-info: #5C554E;

  /* ---------- Legacy aliases (base.html era — keep until templates migrate) ---------- */
  --primary-color: var(--color-primary);
  --secondary-color: var(--color-accent);
  --accent-color: var(--color-accent);
  --text-dark: var(--color-text);
  --text-light: var(--color-text-light);
  --bg-light: var(--color-bg-light);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --danger: var(--color-danger);

  /* ---------- Typography ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-secondary: var(--font-primary);
  --font-family: var(--font-primary);

  --font-size-xs: 0.75rem;      /* 12 */
  --font-size-sm: 0.875rem;     /* 14 */
  --font-size-base: 1rem;       /* 16 */
  --font-size-lg: 1.125rem;     /* 18 */
  --font-size-xl: 1.25rem;      /* 20 */
  --font-size-2xl: 1.5rem;      /* 24 */
  --font-size-3xl: 1.875rem;    /* 30 */
  --font-size-4xl: 2.25rem;     /* 36 */
  --font-size-5xl: 3rem;        /* 48 */

  /* Oversized editorial display sizes — fluid clamp() so hero headlines
     scale smoothly between mobile and large desktop instead of jumping
     at breakpoints. Used for hero/section headlines only, not body copy. */
  --font-size-display-sm: clamp(2.5rem, 5vw + 1rem, 4rem);    /* ~40-64 */
  --font-size-display-md: clamp(3rem, 6vw + 1rem, 5.5rem);    /* ~48-88 */
  --font-size-display-lg: clamp(3.5rem, 8vw + 1rem, 7.5rem);  /* ~56-120 */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-snug: 1.35;
  --line-height-normal: 1.6;
  --line-height-relaxed: 1.75;

  --tracking-tighter: -0.045em; /* oversized display headlines only */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;   /* eyebrow / small caps labels */

  /* ---------- Spacing — one 4/8 scale, both naming schemes ---------- */
  --spacing-1: 0.25rem;  --spacing-xs: 0.25rem;
  --spacing-2: 0.5rem;   --spacing-sm: 0.5rem;
  --spacing-3: 0.75rem;
  --spacing-4: 1rem;     --spacing-md: 1rem;
  --spacing-5: 1.25rem;
  --spacing-6: 1.5rem;   --spacing-lg: 1.5rem;
  --spacing-8: 2rem;     --spacing-xl: 2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;    --spacing-2xl: 3rem;
  --spacing-16: 4rem;    --spacing-3xl: 4rem;
  --spacing-20: 5rem;
  --spacing-24: 6rem;    --spacing-4xl: 6rem;   /* (was undefined — 2 template uses) */

  /* Editorial section spacing — the generous negative space "Exaggerated
     Minimalism" needs between major homepage/landing sections. Larger
     than any existing scale step on purpose; shrinks on mobile below. */
  --section-spacing: clamp(4rem, 10vw, 9rem);

  /* ---------- Radius ---------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --radius-full: 9999px;

  /* ---------- Shadows — soft, warm-tinted ---------- */
  --shadow-xs: 0 1px 2px rgba(38, 34, 32, 0.06);
  --shadow-sm: 0 1px 3px rgba(38, 34, 32, 0.08), 0 1px 2px rgba(38, 34, 32, 0.04);
  --shadow-md: 0 4px 12px rgba(38, 34, 32, 0.10);
  --shadow-lg: 0 10px 24px rgba(38, 34, 32, 0.12);
  --shadow-xl: 0 20px 40px rgba(38, 34, 32, 0.14);

  /* ---------- Motion ---------- */
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
  --transition-slow: 350ms ease;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Scroll-reveal / stagger timing for the new animation layer. Kept
     separate from the micro-interaction transitions above since reveals
     run once per element and can afford a slightly longer, more cinematic
     duration without feeling laggy the way a hover transition would.
     foundation.css's universal prefers-reduced-motion rule already forces
     all animation/transition durations to ~0, so any reveal built on
     these tokens is automatically neutralised for that setting. */
  --reveal-duration: 600ms;
  --reveal-distance: 24px;
  --reveal-stagger: 60ms;

  /* ---------- Focus ---------- */
  --focus-ring-color: #2C2826;
  --focus-ring: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--focus-ring-color);

  /* ---------- Layout ---------- */
  --container-max: 1200px;   /* one canonical page width — see .container everywhere */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --content-measure: 68ch;     /* readable line length for prose */
  --header-height: 64px;

  /* ---------- Z-index scale ---------- */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-toast: 1080;
}

/* Responsive type — keep large display sizes from overflowing small screens
   (mirrors the shrink base.css applied at <=768px, which :root:root would otherwise win over). */
@media (max-width: 768px) {
  :root:root {
    --font-size-5xl: 2.25rem;   /* 36 */
    --font-size-4xl: 1.875rem;  /* 30 */
    --font-size-3xl: 1.5rem;    /* 24 */
    --font-size-2xl: 1.375rem;  /* 22 */
  }
}

/* ---- foundation.css ---- */
/* ============================================================
   MV STYLES — FOUNDATION
   Accessibility + motion baseline. Loaded LAST in <head>.
   Additive only — no layout/visual changes to existing components
   beyond adding focus rings and honouring reduced-motion.
   ============================================================ */

/* ---------- Visible keyboard focus (was missing site-wide) ---------- */
a,
button,
input,
select,
textarea,
summary,
[tabindex],
[role="button"],
.btn,
.dropdown-item,
.suggestion-item {
  outline: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
.btn:focus-visible,
.dropdown-item:focus-visible,
.suggestion-item:focus-visible {
  outline: 2px solid var(--focus-ring-color, #2C2826);
  outline-offset: 2px;
  border-radius: var(--radius-sm, 4px);
}

/* Keep the ring off for pointer users (browsers without :focus-visible get no regression) */
:focus:not(:focus-visible) {
  outline: none;
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: var(--z-toast, 1080);
  padding: 10px 16px;
  background: var(--color-primary, #2C2826);
  color: #fff;
  border-radius: var(--radius-md, 8px);
  font: 600 14px/1 var(--font-primary, system-ui, sans-serif);
  text-decoration: none;
  transform: translateY(-150%);
  transition: transform 150ms ease;
}
.skip-link:focus {
  transform: translateY(0);
  color: #fff;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Stop always-on decorative loops explicitly */
  .promo-slide,
  .promo-bar-enhanced [style*="animation"] {
    animation: none !important;
  }

  /* Neutralise layout-shifting hover transforms.
     (.pcard/.cat-tile are the current card class names post-redesign -
     .product-card/.category-card were the pre-redesign names and matched
     nothing live; corrected here rather than left stale.) */
  .pcard:hover,
  .cat-tile:hover,
  .btn:hover,
  .btn-primary:hover:not(:disabled),
  .cart-icon:hover,
  .wishlist-icon:hover,
  .compare-icon:hover,
  .three-dot-menu:hover {
    transform: none !important;
  }
  .pcard:hover .pcard__media img,
  .cat-tile:hover .cat-tile__img {
    transform: none !important;
  }
}

/* ---------- Small quality-of-life ---------- */
[hidden] { display: none !important; }

/* Belt-and-braces against horizontal scroll from a stray wide element.
   `clip` (not `hidden`) so it never breaks position: sticky. */
html, body { overflow-x: clip; }


/* ---------- Scroll-reveal utility (sitewide, opt-in via [data-reveal]) ----------
   Fail-safe by construction: elements are fully visible by default. JS only
   adds .reveal-armed (the hidden pre-state) right before it starts observing,
   so a JS error or an old browser without IntersectionObserver never leaves
   content permanently invisible - reveal is enhancement, not a requirement.
   The universal prefers-reduced-motion rule above already zeroes transition
   durations, so armed elements still end up visible, just without motion. */
[data-reveal].reveal-armed {
  opacity: 0;
  transform: translateY(var(--reveal-distance, 24px));
  transition: opacity var(--reveal-duration, 600ms) var(--ease-out),
              transform var(--reveal-duration, 600ms) var(--ease-out);
  will-change: opacity, transform;
}
[data-reveal].reveal-armed.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Give icon-only controls a real hit area without changing their look */
.wishlist-icon,
.compare-icon,
.cart-icon,
.three-dot-menu,
.back-to-top,
.clear-search,
.search-button {
  min-width: 44px;
  min-height: 44px;
}

/* ---- shell.css ---- */
/* ============================================================
   MV STYLES — SHELL  (header, primary nav, mobile drawer,
   announcement bar, footer)
   Token-driven, no !important, SVG icons. Replaces the inline
   header/footer <style> blocks that used to live in base_new.html.
   ============================================================ */

/* ---------- Header shell ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

/* Body offset is set inline in base_new.html from --header-stack so first paint
   reserves the right space (no CLS). These vars document the pieces. */
:root {
  --announce-h: 44px;
  --headerbar-h: 116px;   /* phones/tablets: brand row + search row */
}
@media (min-width: 1280px) {
  :root { --headerbar-h: 102px; }   /* desktop: brand/search/icons row + menu row */
}

/* ---------- Announcement bar ---------- */
.announcement {
  position: relative;
  background:
    radial-gradient(120% 260% at 10% 0%, rgba(185, 140, 70, 0.24), transparent 55%),
    linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%);
  color: #fff;
  font-size: 0.8125rem;
  line-height: 1.2;
  box-shadow: inset 0 -1px 0 rgba(185, 140, 70, 0.45);
}
.announcement__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  height: var(--announce-h);
  padding: 0 52px 0 var(--spacing-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  overflow: hidden;
}
.announcement__tag {
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}
.announcement__text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.announcement__headline { font-weight: 600; }
.announcement__sub { font-weight: 400; color: rgba(255, 255, 255, 0.74); }
.announcement__sub::before { content: "\00b7"; margin: 0 0.6em; color: var(--color-accent); }
.announcement__countdown { flex-shrink: 0; display: inline-flex; gap: 4px; }
.pcd__u {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.1);
  font-variant-numeric: tabular-nums;
}
.pcd__u b { font-weight: 700; }
.pcd__s { font-size: 0.6875rem; opacity: 0.7; margin-left: 1px; }
.pcd__l { display: none; }
.announcement__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  color: var(--color-accent-light);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.announcement__cta svg { width: 12px; height: 12px; transition: transform var(--transition-fast); }
.announcement__cta:hover { background: var(--color-accent); color: var(--color-primary-dark); }
.announcement__cta:hover svg { transform: translateX(2px); }
.announcement__close {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  line-height: 0;
  z-index: 4;   /* above the sliding slides (z-index 2) and their controls (3) */
}
.announcement__close:hover { color: #fff; }

/* Phones: one fixed-height line - headline + button only. The tag, second
   line and countdown move to the homepage banner so nothing wraps. */
@media (max-width: 640px) {
  .announcement__tag,
  .announcement__sub,
  .announcement__countdown { display: none; }
  .announcement__inner { justify-content: flex-start; padding-left: 14px; padding-right: 48px; gap: 10px; }
  .announcement__text { flex: 1; }
}

/* ---------- Promo slider (top bar + homepage banner) ----------
   Slides sit stacked in one grid cell; only the active one (and the one
   leaving during a slide) is visible. The sliding itself is animated by the
   promo-slider script in base_new.html. */
.announcement__viewport { position: relative; display: grid; overflow: hidden; touch-action: pan-y; }
/* hold-to-pause: no text selection / link preview popping up while a finger rests on a slide */
.announcement__viewport,
.promo-feature__viewport { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.announcement__slide { grid-area: 1 / 1; min-width: 0; }
.pc-slide { visibility: hidden; }
.pc-slide.is-active { visibility: visible; z-index: 2; }
.pc-slide.is-leaving { visibility: visible; z-index: 1; }

.pc-controls { display: flex; align-items: center; gap: 6px; }
.pc-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(185, 140, 70, 0.55);
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-accent-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pc-btn svg { width: 14px; height: 14px; }
.pc-btn:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-primary-dark); }
.pc-btn--toggle .pc-ico-play { display: none; }
.is-user-paused .pc-btn--toggle .pc-ico-pause { display: none; }
.is-user-paused .pc-btn--toggle .pc-ico-play { display: block; }

.pc-dots { display: flex; align-items: center; }
.pc-dot {
  width: 20px;
  height: 32px;
  padding: 0;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.pc-dot span {
  position: relative;
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
  transition: width 0.35s var(--ease-out), background var(--transition-fast);
}
.pc-dot:hover span { background: rgba(255, 255, 255, 0.6); }
.pc-dot.is-active span { width: 28px; }
/* the active dot fills up over the time the slide stays on screen */
.pc-dot.is-active span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  animation: pc-fill var(--pc-interval, 6s) linear forwards;
}
.is-paused .pc-dot.is-active span::after { animation-play-state: paused; }
.is-static .pc-dot.is-active span::after { animation: none; transform: scaleX(1); }
@keyframes pc-fill { to { transform: scaleX(1); } }

/* top bar: controls sit just left of the close button */
.pc-controls--bar { position: absolute; right: 46px; top: 50%; transform: translateY(-50%); z-index: 3; gap: 4px; }
.pc-controls--bar .pc-btn { width: 28px; height: 28px; }
.pc-controls--bar .pc-btn svg { width: 12px; height: 12px; }
.pc-controls--bar .pc-dot { width: 16px; height: 28px; }
.pc-controls--bar .pc-dot span { width: 6px; height: 6px; }
.pc-controls--bar .pc-dot.is-active span { width: 20px; }
.announcement--multi .announcement__inner { padding-left: 52px; padding-right: 196px; }
.announcement__cta-label { display: inline; }
@media (max-width: 900px) {
  .announcement--multi .announcement__sub { display: none; }
}
@media (max-width: 640px) {
  .pc-controls--bar .pc-btn { display: none; }
  .announcement--multi .announcement__inner { padding-left: 14px; padding-right: 100px; }
  .announcement--multi .announcement__cta { padding: 7px; }
  .announcement--multi .announcement__cta-label { display: none; }
}

/* ---------- Header bar ---------- (lives inside .container) */
.header-bar {
  min-height: var(--headerbar-h);
  padding: 10px 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-wrap: wrap;
  row-gap: 10px;
}
/* Desktop: row 1 = brand | search | icons, row 2 = the full menu. One row
   couldn't hold the brand, 8 menu links, search and icons in 1200px, so the
   links used to spill over the search box and icons. */
@media (min-width: 1280px) {
  .header-bar { gap: 0 var(--spacing-4); row-gap: 4px; padding: 10px 0 0; }
  .brand { order: 1; }
  .header-actions { order: 3; }
  .primary-nav { order: 4; }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  text-decoration: none;
  flex-shrink: 0;
}
.brand__logo { height: 36px; width: 36px; object-fit: contain; border-radius: var(--radius-sm); }
.brand__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* Phones: the short name ("MV Styles") keeps the menu button, logo and icons
   on one row instead of the icons dropping to a line of their own. */
.brand__name-short { display: none; }
@media (max-width: 560px) {
  .brand__name-full { display: none; }
  .brand__name-short { display: inline; }
}

/* ---------- Primary nav (desktop) ---------- */
.primary-nav { display: none; }
@media (min-width: 1280px) {
  .primary-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    flex: 1 1 100%;
    min-width: 0;
    min-height: 44px;
    border-top: 1px solid var(--color-border-light);
  }
}
.primary-nav__link {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.primary-nav__link:hover,
.primary-nav__link[aria-current="page"] {
  color: var(--color-primary);
  background: var(--color-surface);
}
.primary-nav__link--accent { color: var(--color-accent-dark); font-weight: 600; }
/* the "More" toggle is a <button>: strip the browser's default box so it matches the links */
button.primary-nav__link { border: 0; background: none; font-family: inherit; cursor: pointer; }
button.primary-nav__link:hover,
button.primary-nav__link[aria-expanded="true"] { background: var(--color-surface); color: var(--color-primary); }

/* “More” categories popover */
.nav-more { position: relative; }
.nav-more__panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 220px;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: var(--z-dropdown);
  /* Reveal via opacity/transform, not display, so it can transition.
     220ms matches micro-interaction timing (not the 600ms scroll-reveal
     token — a hover dropdown needs to feel instant-adjacent, not cinematic). */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base) var(--ease-out),
              transform var(--transition-base) var(--ease-out),
              visibility var(--transition-base);
  pointer-events: none;
}
.nav-more:hover .nav-more__panel,
.nav-more__panel:focus-within,
.nav-more button[aria-expanded="true"] + .nav-more__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.nav-more__panel a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text);
  text-decoration: none;
}
.nav-more__panel a:hover { background: var(--color-surface); color: var(--color-primary); }
/* Many categories (18+) made the panel taller than a laptop screen, and the bottom ones could not be
   reached (2026-10-05). Two columns on wider screens, anchored to the right so it never runs off-screen,
   and scrolling as a safety net on short screens. */
.nav-more__panel {
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (min-width: 900px) {
  .nav-more__panel {
    left: auto;
    right: 0;
    width: min(500px, calc(100vw - 48px));
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 4px;
  }
}

/* ---------- Header search ----------
   One form. Mobile: wraps to its own full-width row. Desktop: inline. */
.header-search {
  order: 4;
  flex: 1 1 100%;
  position: relative;
}
@media (min-width: 1280px) {
  .header-search { order: 2; flex: 1 1 auto; max-width: 560px; margin: 0 auto; }
}

.search-form {
  display: flex;
  align-items: center;
  height: 42px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}
.search-form:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(185, 140, 70, 0.18);
  background: var(--color-background);
}
.search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: none;
  padding: 0 14px;
  font-size: 0.9375rem;
  color: var(--color-text);
  outline: none;
}
.search-input::placeholder { color: var(--color-text-muted); }
.camera-button,
.search-button {
  flex-shrink: 0;
  height: 100%;
  border: 0;
  background: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-light);
  padding: 0 12px;
}
.camera-button { border-left: 1px solid var(--color-border); }
.search-button {
  background: var(--color-primary);
  color: #fff;
  width: 46px;
  padding: 0;
}
.search-button:hover { background: var(--color-primary-light); }
.camera-button:hover { color: var(--color-primary); }
.camera-button svg, .search-button svg { width: 18px; height: 18px; }

.search-loading {
  position: absolute;
  right: 108px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
.search-loading.active { display: block; }
.search-spinner {
  width: 16px; height: 16px;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-accent);
  border-radius: 50%;
  animation: shell-spin 0.6s linear infinite;
}
@keyframes shell-spin { to { transform: rotate(360deg); } }
.clear-search {
  position: absolute;
  right: 92px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
}
.clear-search.active { display: block; }
.clear-search:hover { color: var(--color-text); }
.search-hint { display: none; }

/* Suggestions dropdown */
.search-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  max-height: 420px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity var(--transition-base) var(--ease-out),
              transform var(--transition-base) var(--ease-out),
              visibility var(--transition-base);
}
.search-suggestions.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.suggestions-header {
  padding: 8px 14px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}
.suggestion-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--color-border-light);
  text-decoration: none;
  color: var(--color-text);
}
.suggestion-item:last-child { border-bottom: 0; }
.suggestion-item:hover,
.suggestion-item.selected { background: var(--color-surface); }
.suggestion-image {
  width: 44px; height: 44px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.suggestion-info { flex: 1; min-width: 0; }
.suggestion-name {
  font-weight: 600;
  font-size: 0.875rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suggestion-name .highlight { background: var(--color-accent-light); border-radius: 2px; }
.suggestion-category { font-size: 0.75rem; color: var(--color-text-muted); }
.suggestion-price-wrapper { text-align: right; flex-shrink: 0; }
.suggestion-price { font-weight: 700; font-size: 0.875rem; color: var(--color-primary); }
.suggestion-old-price {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.suggestion-badge {
  margin-left: 4px;
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-danger);
}
.suggestion-no-results { padding: 24px; text-align: center; color: var(--color-text-muted); font-size: 0.875rem; }
.view-all-results {
  display: block;
  padding: 12px;
  text-align: center;
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-accent-dark);
  text-decoration: none;
  border-top: 1px solid var(--color-border);
}
.view-all-results:hover { background: var(--color-surface); }

/* ---------- Header actions ---------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
}
@media (min-width: 1280px) { .header-actions { margin-left: 0; } }
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.icon-btn:hover { background: var(--color-surface); color: var(--color-primary); }
.icon-btn svg { width: 21px; height: 21px; }
.badge-count {
  position: absolute;
  top: 4px;
  right: 4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background: var(--color-accent-dark);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
}
.icon-btn--cart .badge-count { background: var(--color-primary); }

/* very small phones (under 390px): drop the compare icon so the logo and the other icons stay on one row */
@media (max-width: 389px) { .icon-btn--compare { display: none; } }

.menu-toggle { display: inline-flex; }
@media (min-width: 1280px) {
  .menu-toggle { display: none; }
}

/* ---------- Mobile drawer ---------- */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 23, 21, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: var(--z-backdrop);
}
.mobile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 340px);
  background: var(--color-background);
  z-index: var(--z-modal);
  transform: translateX(-100%);
  transition: transform var(--transition-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.drawer-open .mobile-drawer { transform: translateX(0); }
body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }

.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
}
.drawer-head .brand__name { font-size: 1.05rem; }
.drawer-close {
  width: 40px; height: 40px;
  border: 0; background: none; cursor: pointer;
  color: var(--color-text-light);
  display: inline-flex; align-items: center; justify-content: center;
}
.drawer-close:hover { color: var(--color-primary); }

.drawer-section { padding: var(--spacing-2) 0; border-bottom: 1px solid var(--color-border-light); }
.drawer-section__title {
  padding: 10px var(--spacing-4) 6px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.drawer-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px var(--spacing-4);
  font-size: 0.9375rem;
  color: var(--color-text);
  text-decoration: none;
}
.drawer-link:hover { background: var(--color-surface); color: var(--color-primary); }
.drawer-link svg { width: 18px; height: 18px; color: var(--color-text-muted); flex-shrink: 0; }
.drawer-link--strong { font-weight: 600; }

/* ---------- Alerts (messages) ---------- */
.alert {
  max-width: var(--container-max);
  margin: var(--spacing-4) auto 0;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  font-size: 0.9375rem;
}
.alert-success { background: #EEF5EF; border-color: #CBE0CF; color: #2C5138; }
.alert-error, .alert-danger { background: #FBEEEC; border-color: #F0CFC9; color: #7E2A20; }
.alert-warning { background: #FBF3E6; border-color: #EEDDBE; color: #6E4E19; }
.alert-info { background: var(--color-surface); color: var(--color-text); }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-primary-dark);
  color: rgba(255, 255, 255, 0.72);
  margin-top: var(--spacing-16);
  font-size: 0.875rem;
}
.site-footer .container { max-width: var(--container-max); }

.footer-newsletter {
  text-align: center;
  padding: var(--spacing-10) var(--spacing-4);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-newsletter h3 {
  font-family: var(--font-display);
  color: #fff;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 500;
  margin-bottom: var(--spacing-2);
  letter-spacing: var(--tracking-tight);
  text-transform: none;
}
.footer-newsletter p { color: rgba(255, 255, 255, 0.6); margin-bottom: var(--spacing-5); font-size: 0.875rem; }
.newsletter-form {
  display: flex;
  gap: var(--spacing-2);
  max-width: 460px;
  margin: 0 auto;
}
@media (max-width: 600px) {
  .newsletter-form { flex-direction: column; }
  .newsletter-btn { width: 100%; justify-content: center; }
}
.newsletter-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 0.9375rem;
}
.newsletter-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.newsletter-input:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.1);
}
.newsletter-btn {
  flex-shrink: 0;
  padding: 12px 22px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-accent);
  color: var(--color-primary-dark);
  font-weight: 700;
  font-size: 0.875rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background var(--transition-fast);
}
.newsletter-btn:hover { background: var(--color-accent-light); }
.newsletter-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.newsletter-message { margin: var(--spacing-3) auto 0; max-width: 460px; font-size: 0.8125rem; }
.newsletter-message.success { color: #A9D6B4; }
.newsletter-message.error { color: #E8A9A0; }

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  padding: var(--spacing-10) var(--spacing-4);
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--spacing-10); } }

.footer-col h4 {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  margin-bottom: var(--spacing-4);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color var(--transition-fast); }
.footer-col a:hover { color: var(--color-accent-light); }

.footer-brand__name { font-family: var(--font-display); color: #fff; font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.footer-brand__tagline { color: rgba(255, 255, 255, 0.6); margin-bottom: var(--spacing-4); max-width: 34ch; }

.footer-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--spacing-4); }
.footer-trust span {
  font-size: 0.75rem;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-pill);
  color: rgba(255, 255, 255, 0.75);
}

.footer-social { display: flex; gap: 10px; }
.footer-social a {
  width: 38px; height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.75);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.footer-social a:hover { border-color: var(--color-accent); color: var(--color-accent-light); }

.footer-payments { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--spacing-4); }
.footer-payments span {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  color: rgba(255, 255, 255, 0.6);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding: var(--spacing-5) var(--spacing-4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom nav { display: flex; gap: var(--spacing-4); flex-wrap: wrap; }
.footer-bottom a { color: rgba(255, 255, 255, 0.5); text-decoration: none; }
/* 2026-10-07: a general `p` colour made this line dark grey on the dark footer - nearly invisible (contrast 1.13). */
.footer-bottom p, .footer-bottom p a { color: rgba(255, 255, 255, 0.72); }
.footer-bottom a:hover { color: var(--color-accent-light); }

.back-to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-background);
  color: var(--color-primary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: var(--z-sticky);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.85);
  transition: opacity var(--transition-base) var(--ease-out),
              transform var(--transition-base) var(--ease-out),
              visibility var(--transition-base),
              background var(--transition-fast);
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: scale(1); }
.back-to-top:hover { background: var(--color-surface); }

/* ---- components.css ---- */
/* ============================================================
   MV STYLES — COMPONENTS
   Product card + product grid + shared empty/loading states.
   Token-driven, no inline styles. Replaces the ~150 lines of
   inline style that used to live in product_card.html.
   ============================================================ */

/* ---------- Product grid ----------
   Column counts come from ecommerce.css (.grid / .products-grid:
   2 cols mobile / 3 tablet / 4 desktop). Here we only normalise
   the gutter and the section rhythm. */
.products-grid,
.grid.grid-3,
.grid.grid-4 {
  gap: var(--spacing-3);
}
@media (min-width: 768px) {
  .products-grid,
  .grid.grid-3,
  .grid.grid-4 { gap: var(--spacing-5); }
}

/* ---------- Product card ---------- */
.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base) var(--ease-out);
}
.pcard:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.pcard__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-decoration: none;
  color: inherit;
}

.pcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-surface);
  overflow: hidden;
}
.pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow) var(--ease-out);
}
.pcard:hover .pcard__media img { transform: scale(1.04); }

.pcard__ph {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: var(--color-surface-alt);
  color: var(--color-accent-dark);
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
}

/* Badge — one at a time, top-left */
.pcard__badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.pcard__badge--sale     { background: var(--color-danger); color: #fff; }
.pcard__badge--new      { background: var(--color-primary); color: #fff; }
.pcard__badge--featured { background: var(--color-accent); color: var(--color-primary-dark); }
.pcard__badge--out      { background: rgba(38, 34, 32, 0.82); color: #fff; }

/* Body */
.pcard__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px 14px;
  flex: 1;
}
.pcard__name {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.5em;
}
.pcard__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}
.pcard__stars {
  color: var(--color-accent);
  letter-spacing: 1.5px;
  font-size: 0.875rem;
  line-height: 1;
}
.pcard__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 2px;
}
.pcard__price-now {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.01em;
}
.pcard__price-old {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  text-decoration: line-through;
}

/* Wishlist — persistent, top-right */
.pcard__wish {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: rgba(255, 255, 255, 0.92);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-light);
  transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.pcard__wish svg { width: 18px; height: 18px; }
.pcard__wish:hover { color: var(--color-danger); border-color: var(--color-danger); background: #fff; }
.pcard__wish.is-active { color: var(--color-danger); border-color: var(--color-danger); }
.pcard__wish.is-active svg { fill: currentColor; animation: pcard-pop 320ms var(--ease-out); }
.pcard__wish[disabled] { opacity: 0.6; cursor: default; }

/* Add to cart — full-width action under the price */
.pcard__add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 14px 14px;
  padding: 9px 12px;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: var(--color-primary);
  font: 600 0.8125rem/1 var(--font-primary);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.pcard__add svg { width: 15px; height: 15px; }
.pcard__add:hover { background: var(--color-primary); color: #fff; }
.pcard__add.is-added { background: var(--color-success); border-color: var(--color-success); color: #fff; animation: pcard-pop 320ms var(--ease-out); }

/* One-time confirmation "pop" - not a loop, fires once when a class is
   applied (wishlist activated / item added to cart). Neutralised for
   prefers-reduced-motion by foundation.css's universal duration override. */
@keyframes pcard-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  65%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.pcard__add--out {
  border-color: var(--color-border);
  color: var(--color-text-muted);
  background: var(--color-surface);
  cursor: not-allowed;
  text-transform: none;
  letter-spacing: 0;
}

@media (max-width: 600px) {
  .pcard__body { padding: 10px 10px 12px; gap: 4px; }
  .pcard__name { font-size: 0.8125rem; min-height: 2.4em; }
  .pcard__price-now { font-size: 0.9375rem; }
  .pcard__rating { font-size: 0.75rem; }
  .pcard__add { margin: 0 10px 10px; padding: 10px; font-size: 0.75rem; }
  .pcard__wish { width: 38px; height: 38px; top: 6px; right: 6px; }
  .pcard__wish svg { width: 17px; height: 17px; }
}

/* ---------- Empty state ---------- */
.products-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--spacing-16) var(--spacing-4);
  color: var(--color-text-light);
}
.products-empty h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-text);
  margin-bottom: 8px;
}
.products-empty p { margin-bottom: var(--spacing-5); }
.products-empty .btn,
.products-empty a.button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}

/* ============================================================
   LISTING PAGES (category / product list / catalog)
   ============================================================ */

.page-hero {
  background: var(--color-primary);
  color: #fff;
  padding: var(--spacing-8) 0;
  text-align: center;
  margin-bottom: var(--spacing-6);
}
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.page-hero__sub {
  margin: 8px auto 0;
  max-width: 52ch;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9375rem;
}

.listing-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-3);
  padding: var(--spacing-3) 0 var(--spacing-5);
}
.listing-count { font-size: 0.875rem; color: var(--color-text-light); }
.listing-sort { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--color-text-light); }
.listing-sort select {
  padding: 8px 30px 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C554E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}
.listing-sort select:focus { outline: 2px solid var(--focus-ring-color); outline-offset: 1px; }

/* Browse other categories */
.other-cats { background: var(--color-surface); padding: var(--spacing-12) 0; margin-top: var(--spacing-12); }
.other-cats__title {
  text-align: center;
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-text);
  margin-bottom: var(--spacing-6);
}
.other-cats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-3);
}
@media (min-width: 768px) { .other-cats__grid { grid-template-columns: repeat(4, 1fr); gap: var(--spacing-4); } }
.other-cat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: var(--spacing-5);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.other-cat:hover { border-color: var(--color-accent); box-shadow: var(--shadow-sm); }
.other-cat__name { font-weight: 600; color: var(--color-text); font-size: 0.9375rem; }
.other-cat__go { margin-top: auto; font-size: 0.8125rem; font-weight: 600; color: var(--color-accent-dark); }

/* ============================================================
   FILTERED PRODUCT LIST (product_list.html)
   Class hooks (.collapsible-filter/.collapsed/.filter-options/.chevron/
   .filters-sidebar/.mobile-open) are kept so the existing JS still works.
   ============================================================ */
.products-layout { display: grid; grid-template-columns: 1fr; gap: var(--spacing-6); }
@media (min-width: 992px) { .products-layout { grid-template-columns: 260px 1fr; gap: var(--spacing-8); } }

.filters-container {
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
@media (min-width: 992px) {
  .filters-container { position: sticky; top: calc(var(--headerbar-h) + 20px); }
}
.filters-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--color-border);
}
.filters-header h3 { font-family: var(--font-display); font-size: 1.0625rem; margin: 0; }
.filters-clear { font-size: 0.8125rem; font-weight: 600; color: var(--color-danger); text-decoration: none; }
.filters-body { padding: 2px 16px 16px; }
@media (min-width: 992px) { .filters-body { max-height: calc(100vh - 170px); overflow-y: auto; } }

.filter-group { border-bottom: 1px solid var(--color-border-light); padding: 14px 0; }
.filter-group:last-of-type { border-bottom: 0; }
.filter-header-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.filter-header-btn h4 {
  font-size: 0.9375rem; font-weight: 600; color: var(--color-text); margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.filter-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); display: inline-block; }
.chevron { color: var(--color-text-muted); font-size: 0.7rem; transition: transform 0.3s; }

.collapsible-filter .filter-options {
  max-height: 480px; overflow-y: auto;
  transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
  opacity: 1; margin-top: 12px;
}
.collapsible-filter.collapsed .filter-options { max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; }
.collapsible-filter.collapsed .chevron { transform: rotate(-90deg); }

.filter-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer;
  font-size: 0.875rem; color: var(--color-text);
}
.filter-opt:hover { background: var(--color-surface); }
.filter-opt > span:first-child { display: flex; align-items: center; gap: 8px; }
.filter-opt input { accent-color: var(--color-primary); width: 16px; height: 16px; flex-shrink: 0; }
.filter-opt--active { background: var(--color-surface-alt); font-weight: 600; }
.filter-opt__count {
  font-size: 0.75rem; color: var(--color-text-muted);
  background: var(--color-surface-alt); padding: 1px 8px; border-radius: var(--radius-pill);
}
.filter-opt--active .filter-opt__count { background: var(--color-primary); color: #fff; }

.filter-field {
  display: block; width: 100%; padding: 9px 12px;
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  font: inherit; font-size: 0.875rem; background: var(--color-background); color: var(--color-text);
}
.filter-field:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(185, 140, 70, 0.18); }
select.filter-field {
  appearance: none; cursor: pointer; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C554E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.filter-sort-label { font-size: 0.9375rem; font-weight: 600; margin: 0 0 12px; color: var(--color-text); }
.price-row { display: flex; align-items: center; gap: 10px; }
.price-row > span { color: var(--color-text-muted); }
.price-hint { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--color-text-muted); margin-top: 8px; }

.filter-apply {
  width: 100%; margin-top: 14px; padding: 11px; border: 0; border-radius: var(--radius-sm);
  background: var(--color-primary); color: #fff;
  font: 600 0.8125rem/1 var(--font-primary); text-transform: uppercase; letter-spacing: 0.04em; cursor: pointer;
}
.filter-apply:hover { background: var(--color-primary-light); }

.active-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--color-border-light); }
.active-chip { background: var(--color-surface-alt); color: var(--color-text); padding: 5px 10px; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }

.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--spacing-5); }
.results-bar p { margin: 0; color: var(--color-text-light); font-size: 0.9375rem; }
.results-bar strong { color: var(--color-text); }

.mobile-filter-btn { display: none; }
@media (max-width: 991px) {
  .mobile-filter-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-primary); color: #fff; border: 0;
    padding: 9px 16px; border-radius: var(--radius-sm); font-weight: 600; cursor: pointer;
  }
  .filters-sidebar { display: none; }
  .filters-sidebar.mobile-open {
    display: block; position: fixed; inset: 0; z-index: var(--z-modal);
    background: var(--color-background); overflow-y: auto;
  }
  .filters-sidebar.mobile-open .filters-container { border: 0; border-radius: 0; min-height: 100vh; position: static; }
}
.mobile-close-btn {
  position: sticky; top: 0; width: 100%; background: var(--color-primary); color: #fff;
  border: 0; padding: 14px; font-weight: 700; cursor: pointer; z-index: 10;
}

.pagination { margin-top: var(--spacing-12); display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 0.875rem; }
.pagination a { padding: 8px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); text-decoration: none; color: var(--color-text); }
.pagination a:hover { border-color: var(--color-accent); }
.pagination span { color: var(--color-text-muted); }

/* ---------- Skeleton (optional, for JS-driven lists) ---------- */
.pcard--skeleton { pointer-events: none; border-color: var(--color-border-light); }
.pcard--skeleton .pcard__media,
.pcard--skeleton .pcard__body::before {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-alt) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: pcard-shimmer 1.4s ease infinite;
}
.pcard--skeleton .pcard__body::before {
  content: "";
  display: block;
  height: 1em;
  border-radius: 3px;
  margin-bottom: 8px;
}
@keyframes pcard-shimmer { to { background-position: -100% 0; } }

/* ---- forms.css ---- */
/* ============================================================
   MV STYLES — FORMS, BUTTONS, STATES, PROSE
   Loaded after components.css. Restyles the existing button /
   form class names so templates get the new look without edits,
   and adds a proper field / error / toast / empty / prose system.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn,
.btn-primary, .btn-secondary, .btn-outline, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font: 600 0.9375rem/1 var(--font-primary);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled, .btn.is-loading,
button.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-primary,
.btn.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled),
.btn.btn--primary:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; }

.btn-secondary, .btn-outline,
.btn.btn--secondary {
  background: var(--color-background);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled),
.btn.btn--secondary:hover:not(:disabled) { background: var(--color-primary); color: #fff; }

.btn-ghost, .btn.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface); }

.btn--accent { background: var(--color-accent); color: var(--color-primary-dark); border-color: var(--color-accent); }
.btn--accent:hover:not(:disabled) { background: var(--color-accent-light); border-color: var(--color-accent-light); }

.btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn--wa { background: #fff; color: #1DA851; border-color: #1DA851; }
.btn--wa:hover:not(:disabled) { background: #1DA851; color: #fff; }

.btn--block, .btn-block { display: flex; width: 100%; }
.btn--sm { padding: 8px 14px; font-size: 0.8125rem; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }

/* Loading spinner inside a button */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: #fff;
}
.btn-secondary.is-loading::after, .btn-outline.is-loading::after { color: var(--color-primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Form fields ---------- */
.field { margin-bottom: var(--spacing-5); }
.field__label,
label.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.field__label .req { color: var(--color-danger); }

.field-control,
.form-control,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-control:focus,
.form-control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(185, 140, 70, 0.18);
}
.field-control::placeholder,
.form-control::placeholder { color: var(--color-text-muted); }
textarea.field-control, .field textarea { min-height: 120px; resize: vertical; }

.field__hint { margin-top: 6px; font-size: 0.75rem; color: var(--color-text-muted); }
.field__error { margin-top: 6px; font-size: 0.75rem; color: var(--color-danger); font-weight: 500; }
.field--invalid .field-control,
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: var(--color-danger); }
.field--invalid .field-control:focus { box-shadow: 0 0 0 3px rgba(178, 59, 46, 0.16); }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--spacing-6); }
.form-note { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ---------- Inline messages / alerts (reuse .alert from shell.css) ---------- */
.form-message { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.875rem; }
.form-message.success { background: #EEF5EF; border: 1px solid #CBE0CF; color: #2C5138; }
.form-message.error { background: #FBEEEC; border: 1px solid #F0CFC9; color: #7E2A20; }

/* ---------- Toast (shared with showMiniNotification) ---------- */
.toast-region { position: fixed; top: 16px; right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.toast {
  background: var(--color-primary); color: #fff;
  padding: 11px 16px; border-radius: var(--radius-sm);
  font: 600 0.875rem/1.35 var(--font-primary);
  box-shadow: var(--shadow-lg);
}
.toast--success { background: var(--color-success); }
.toast--error { background: var(--color-danger); }

/* ---------- Empty state (generic; .products-empty already in components.css) ---------- */
.empty-state, .empty {
  text-align: center;
  padding: var(--spacing-16) var(--spacing-4);
  color: var(--color-text-light);
}
.empty-state .empty-state-icon, .empty .empty-icon { display: none; }
.empty-state h2, .empty-state-title, .empty h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-text);
  margin-bottom: 8px;
}
.empty-state p, .empty-state-text, .empty p { margin-bottom: var(--spacing-5); font-size: 0.9375rem; }

/* ---------- Document / legal / info pages ---------- */
.doc-page { max-width: 780px; margin: 0 auto; padding: var(--spacing-10) var(--spacing-4) var(--spacing-16); }
.doc-page__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: 0.72rem; font-weight: 700; color: var(--color-accent-dark); margin-bottom: 10px; }
.doc-page__title { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 8px; }
.doc-page__meta { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-8); }

.prose { color: var(--color-text); line-height: 1.7; }
.prose > * + * { margin-top: var(--spacing-4); }
.prose h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; margin-top: var(--spacing-10); }
.prose h3 { font-size: 1.0625rem; font-weight: 700; margin-top: var(--spacing-8); }
.prose h2 + p, .prose h3 + p { margin-top: var(--spacing-3); }
.prose p, .prose li { color: var(--color-text-light); }
.prose a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-primary); }
.prose strong { color: var(--color-text); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: 6px; }
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--spacing-4);
  color: var(--color-text-light);
  font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.prose th { font-weight: 600; color: var(--color-text); background: var(--color-surface); }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--spacing-8) 0; }

/* ---------- Mobile: prevent iOS Safari zoom-on-focus (inputs must be >= 16px) ---------- */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .field-control,
  .form-control,
  .search-input,
  .filter-field,
  .newsletter-input,
  .quantity-input,
  .qty input {
    font-size: 16px;
  }
}

/* ---------- Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-alt) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { to { background-position: -100% 0; } }