/* ═══════════════════════════════════════════════════════════
   a.corner4candles — Premium E-Commerce Theme (Dark/Light)
   ═══════════════════════════════════════════════════════════ */

/* ═══════ DARK THEME (Default) ═══════ */
:root, [data-theme="dark"] {
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-card: #161616;
    --bg-elevated: #1c1c1c;
    --bg-input: #1a1a1a;

    --gold: #c9a96e;
    --gold-light: #e2cb9a;
    --gold-dark: #a07d3f;
    --rose: #d4a0a0;
    --rose-deep: #b87878;
    --rose-glow: rgba(212,160,160,0.15);

    --text-primary: #f5f0eb;
    --text-secondary: #aaa;
    --text-muted: #666;

    --glass: rgba(255,255,255,0.03);
    --glass-border: rgba(255,255,255,0.08);
    --glass-border-hover: rgba(201,169,110,0.25);

    --glow-gold: 0 0 40px rgba(201,169,110,0.12);
    --glow-rose: 0 0 40px rgba(212,160,160,0.1);

    --navbar-bg: rgba(10,10,10,0.92);
    --nav-mobile-bg: rgba(10,10,10,0.98);
    --preloader-bg: #0a0a0a;
    --particle-opacity: 0.08;

    --success: #4caf50;
    --error: #ef5350;
    --warning: #ff9800;

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --transition: all 0.4s cubic-bezier(0.23,1,0.32,1);
}

/* ═══════ LIGHT THEME ═══════ */
[data-theme="light"] {
    --bg-primary: #faf8f5;
    --bg-secondary: #f0ece6;
    --bg-card: #ffffff;
    --bg-elevated: #f5f2ee;
    --bg-input: #ffffff;

    --gold: #a07d3f;
    --gold-light: #c9a96e;
    --gold-dark: #7a5c2a;
    --rose: #b87878;
    --rose-deep: #9e5e5e;
    --rose-glow: rgba(184,120,120,0.12);

    --text-primary: #1a1614;
    --text-secondary: #5a5550;
    --text-muted: #9a9590;

    --glass: rgba(0,0,0,0.02);
    --glass-border: rgba(0,0,0,0.08);
    --glass-border-hover: rgba(160,125,63,0.3);

    --glow-gold: 0 4px 20px rgba(160,125,63,0.1);
    --glow-rose: 0 4px 20px rgba(184,120,120,0.08);

    --navbar-bg: rgba(250,248,245,0.92);
    --nav-mobile-bg: rgba(250,248,245,0.98);
    --preloader-bg: #faf8f5;
    --particle-opacity: 0.04;
}

/* Theme transition for smooth toggle */
body, .navbar, .product-card, .collection-card, .process-step,
.testimonial-card, .checkout-summary, .auth-container, .cart-item,
.cart-summary, .footer, .preloader {
    transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* ═══════ THEME TOGGLE ═══════ */
.theme-toggle {
    position: relative;
    width: 44px; height: 24px;
    background: var(--bg-elevated);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    cursor: pointer;
    display: flex; align-items: center;
    padding: 0 3px;
    transition: var(--transition);
}
.theme-toggle:hover { border-color: var(--gold); }
.theme-toggle-knob {
    width: 18px; height: 18px;
    border-radius: 50%;
    background: var(--gold);
    transition: transform 0.3s ease;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
[data-theme="light"] .theme-toggle-knob { transform: translateX(20px); }
.theme-toggle-icon {
    position: absolute; top: 50%; transform: translateY(-50%);
    font-size: 11px; pointer-events: none; transition: opacity 0.3s ease;
}
.theme-toggle-icon.sun { right: 5px; opacity: 1; }
.theme-toggle-icon.moon { left: 5px; opacity: 1; }
[data-theme="light"] .theme-toggle-icon.sun { opacity: 0.3; }
[data-theme="dark"] .theme-toggle-icon.moon { opacity: 0.3; }

/* ═══════ RESET ═══════ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; }
button { cursor: pointer; border: none; font-family: inherit; }
input, select, textarea { font-family: inherit; }
ul { list-style: none; }

/* ═══════ PRELOADER ═══════ */
.preloader {
    position: fixed; inset: 0;
    background: var(--preloader-bg, var(--bg-primary));
    z-index: 100000;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}
.preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader-flame {
    width: 22px; height: 44px;
    background: linear-gradient(to top, var(--gold), var(--gold-light), #fff3d4);
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    animation: flicker 1.5s ease-in-out infinite alternate;
    margin-bottom: 30px;
    filter: drop-shadow(0 0 25px rgba(201,169,110,0.6));
}
@keyframes flicker {
    0% { transform: scale(1) rotate(-2deg); }
    50% { transform: scale(0.95) rotate(1deg); opacity: 0.85; }
    100% { transform: scale(1) rotate(-1deg); }
}
.preloader-text {
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 700;
    letter-spacing: 6px; text-transform: uppercase;
    color: var(--gold);
}

/* ═══════ PARTICLES ═══════ */
.particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.particle {
    position: absolute; width: 3px; height: 3px;
    background: var(--gold); border-radius: 50%; opacity: var(--particle-opacity, 0.08);
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0% { transform: translateY(100vh); opacity: 0; }
    10% { opacity: 0.08; } 90% { opacity: 0.08; }
    100% { transform: translateY(-10vh); opacity: 0; }
}

/* ═══════ NAVBAR ═══════ */
.navbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    padding: 20px 50px;
    display: flex; justify-content: space-between; align-items: center;
    transition: var(--transition);
}
.navbar.scrolled {
    background: var(--navbar-bg);
    backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
    box-shadow: 0 1px 30px rgba(0,0,0,0.15);
    padding: 14px 50px;
    border-bottom: 1px solid var(--glass-border);
}
.nav-logo {
    font-family: 'Playfair Display', serif;
    font-size: 24px; font-weight: 700;
    color: var(--gold);
}
.nav-links { display: flex; gap: 35px; align-items: center; }
.nav-links a {
    font-size: 13px; font-weight: 600; letter-spacing: 2.5px; text-transform: uppercase;
    color: var(--text-secondary);
    position: relative;
}
.nav-links a::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1.5px; background: var(--gold); transition: width 0.4s ease;
}
.nav-links a:hover { color: var(--gold); }
.nav-links a:hover::after { width: 100%; }

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

.nav-cart {
    position: relative; display: flex; align-items: center; gap: 8px;
    color: var(--text-secondary); font-size: 13px; font-weight: 600;
    letter-spacing: 2px; text-transform: uppercase;
}
.nav-cart:hover { color: var(--gold); }
.nav-cart svg { width: 22px; height: 22px; }
.cart-badge {
    position: absolute; top: -8px; right: -10px;
    background: var(--gold); color: var(--bg-primary);
    font-size: 11px; font-weight: 700;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.cart-badge:empty { display: none; }

.nav-account {
    color: var(--text-secondary); display: flex; align-items: center;
}
.nav-account:hover { color: var(--gold); }
.nav-account svg { width: 22px; height: 22px; }

.nav-ig { color: var(--text-secondary); display: flex; align-items: center; }
.nav-ig:hover { color: var(--gold); }
.nav-ig svg { width: 20px; height: 20px; }

.menu-toggle { display: none; flex-direction: column; gap: 6px; cursor: pointer; z-index: 1001; }
.menu-toggle span { width: 28px; height: 2px; background: var(--gold); transition: all 0.3s ease; }

/* ═══════ HERO ═══════ */
.hero {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    position: relative; overflow: hidden;
    background: radial-gradient(ellipse at 30% 20%, rgba(201,169,110,0.06), transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(212,160,160,0.04), transparent 50%),
                var(--bg-primary);
}
.hero::before {
    content: ''; position: absolute; top: -30%; right: -20%;
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(201,169,110,0.04), transparent 70%);
    animation: floatOrb 20s ease-in-out infinite;
}
.hero::after {
    content: ''; position: absolute; bottom: -20%; left: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(212,160,160,0.04), transparent 70%);
    animation: floatOrb 15s ease-in-out infinite reverse;
}
@keyframes floatOrb {
    0%, 100% { transform: translate(0,0) scale(1); }
    33% { transform: translate(40px,-30px) scale(1.05); }
    66% { transform: translate(-20px,20px) scale(0.95); }
}
.hero-content { position: relative; z-index: 2; text-align: center; padding: 0 20px; }
.hero-logo {
    width: min(420px, 80vw); margin-bottom: 40px;
    opacity: 0; animation: fadeUp 1.2s ease forwards 0.5s;
    filter: drop-shadow(0 10px 40px rgba(201,169,110,0.2));
}
.hero-tagline {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3.5vw, 40px); font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 4px; text-transform: uppercase;
    opacity: 0; animation: fadeUp 1s ease forwards 0.9s;
    margin-bottom: 18px;
}
.hero-subtitle {
    font-family: 'Playfair Display', serif;
    font-size: clamp(17px, 2.2vw, 22px); font-weight: 500; font-style: italic;
    color: var(--gold); letter-spacing: 2px;
    opacity: 0; animation: fadeUp 1s ease forwards 1.2s;
    margin-bottom: 55px;
}
.hero-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 18px 50px; border: 2px solid var(--gold);
    color: var(--gold); font-size: 14px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    position: relative; overflow: hidden;
    opacity: 0; animation: fadeUp 1s ease forwards 1.5s;
    transition: var(--transition);
}
.hero-cta::before {
    content: ''; position: absolute; top: 0; left: -100%;
    width: 100%; height: 100%; background: var(--gold);
    transition: left 0.5s ease; z-index: -1;
}
.hero-cta:hover { color: var(--bg-primary); }
.hero-cta:hover::before { left: 0; }
.hero-scroll {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    opacity: 0; animation: fadeUp 1s ease forwards 1.8s;
}
.hero-scroll span {
    font-size: 10px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    color: var(--text-muted); writing-mode: vertical-rl;
}
.scroll-line {
    width: 1px; height: 50px;
    background: linear-gradient(to bottom, var(--gold), transparent);
    animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse { 0%, 100% { transform: scaleY(1); opacity: 1; } 50% { transform: scaleY(0.5); opacity: 0.4; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

/* ═══════ SECTION COMMON ═══════ */
.section-label {
    font-size: 13px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase;
    color: var(--gold); margin-bottom: 18px; display: block;
}
.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(36px, 5vw, 60px); font-weight: 800;
    color: var(--text-primary); line-height: 1.12; margin-bottom: 25px;
}
.section-title em { font-style: italic; color: var(--gold); font-weight: 600; }

.gold-divider {
    display: flex; align-items: center; justify-content: center; gap: 15px; padding: 60px 0;
}
.gold-divider .line { width: 80px; height: 1px; background: linear-gradient(to right, transparent, var(--gold-dark), transparent); }
.gold-divider .diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }

/* ═══════ FEATURED PRODUCTS ═══════ */
.featured-section {
    padding: 100px 50px;
    max-width: 1400px; margin: 0 auto;
    text-align: center;
}
.products-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 30px; margin-top: 60px;
}

/* ═══════ PRODUCT CARD ═══════ */
.product-card {
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: var(--transition);
    position: relative;
}
.product-card:hover {
    transform: translateY(-8px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--glow-gold);
}
.product-card-image {
    position: relative; overflow: hidden;
    aspect-ratio: 3/4;
    background: var(--bg-elevated);
}
.product-card-image img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.6s ease;
}
.product-card:hover .product-card-image img { transform: scale(1.08); }
.product-card-image .placeholder-icon {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 60px; opacity: 0.3;
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
}
.product-badge {
    position: absolute; top: 12px; left: 12px;
    padding: 5px 14px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
}
.badge-sale { background: var(--error); color: #fff; }
.badge-new { background: var(--gold); color: var(--bg-primary); }
.product-card-quick {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 12px;
    background: linear-gradient(to top, rgba(10,10,10,0.9), transparent);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}
.product-card:hover .product-card-quick { transform: translateY(0); }
.btn-add-cart {
    width: 100%; padding: 12px;
    background: var(--gold); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
}
.btn-add-cart:hover { background: var(--gold-light); }
.product-card-info { padding: 20px; }
.product-card-category {
    font-size: 11px; font-weight: 600; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold-dark); margin-bottom: 8px;
}
.product-card-name {
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 8px;
}
.product-card-name a:hover { color: var(--gold); }
.product-card-price {
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 700; color: var(--gold);
}
.product-card-price .old-price {
    font-size: 15px; color: var(--text-muted);
    text-decoration: line-through; margin-left: 8px; font-weight: 400;
}

/* ═══════ COLLECTIONS GRID ═══════ */
.collections-section {
    padding: 100px 50px;
    max-width: 1400px; margin: 0 auto;
    text-align: center;
}
.collections-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 30px; margin-top: 60px;
}
.collection-card {
    position: relative; border-radius: var(--radius-md);
    overflow: hidden; aspect-ratio: 3/4;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    transition: var(--transition); cursor: pointer;
}
.collection-card:hover {
    transform: translateY(-8px);
    border-color: var(--glass-border-hover);
    box-shadow: var(--glow-gold);
}
.collection-card-bg {
    position: absolute; inset: 0;
    transition: transform 0.8s ease;
}
.collection-card:hover .collection-card-bg { transform: scale(1.05); }
.col-bg-1 { background: linear-gradient(160deg, #2a1a1a, #1a0f0f, #2d1515); }
.col-bg-2 { background: linear-gradient(160deg, #2a2418, #1a1610, #2d2015); }
.col-bg-3 { background: linear-gradient(160deg, #221a2a, #150f1a, #20152d); }
.collection-card-icon {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
    height: 60%; font-size: 70px;
    filter: drop-shadow(0 5px 30px rgba(201,169,110,0.15));
}
.collection-card-content {
    position: relative; z-index: 2;
    padding: 30px; text-align: left;
    background: linear-gradient(to top, rgba(10,10,10,0.9) 60%, transparent);
    position: absolute; bottom: 0; left: 0; right: 0;
}
.collection-card-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px; font-weight: 800; color: var(--text-primary); margin-bottom: 8px;
}
.collection-card-content p {
    font-size: 14px; color: var(--text-secondary); line-height: 1.7;
}
.collection-card-content .card-price {
    display: inline-block; margin-top: 12px;
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 700; color: var(--gold);
}

/* ═══════ ABOUT SECTION ═══════ */
.about-section {
    padding: 100px 50px; max-width: 1400px; margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center;
}
.about-image-frame { position: relative; padding: 25px; }
.about-image-frame::before {
    content: ''; position: absolute; top: 0; left: 0;
    width: 60%; height: 60%; border-top: 1.5px solid var(--gold-dark); border-left: 1.5px solid var(--gold-dark);
}
.about-image-frame::after {
    content: ''; position: absolute; bottom: 0; right: 0;
    width: 60%; height: 60%; border-bottom: 1.5px solid var(--gold-dark); border-right: 1.5px solid var(--gold-dark);
}
.about-img {
    width: 100%; aspect-ratio: 4/5;
    background: linear-gradient(135deg, var(--bg-card), var(--bg-elevated));
    display: flex; align-items: center; justify-content: center;
    font-size: 120px; opacity: 0.3; border-radius: 2px;
}
.about-text p {
    font-size: 16px; font-weight: 400; line-height: 2;
    color: var(--text-secondary); margin-bottom: 20px;
}
.about-text strong { font-weight: 700; color: var(--text-primary); }
.about-signature {
    font-family: 'Playfair Display', serif;
    font-size: 28px; font-weight: 600; font-style: italic;
    color: var(--gold); margin-top: 35px;
}

/* ═══════ MARQUEE ═══════ */
.marquee-section {
    padding: 25px 0; overflow: hidden;
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-secondary);
}
.marquee-track { display: flex; animation: marquee 30s linear infinite; width: max-content; }
.marquee-item {
    font-family: 'Playfair Display', serif;
    font-size: 16px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase;
    color: var(--text-muted); white-space: nowrap; padding: 0 40px;
    display: flex; align-items: center; gap: 40px;
}
.mdot { width: 5px; height: 5px; background: var(--gold-dark); border-radius: 50%; flex-shrink: 0; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ═══════ PROCESS ═══════ */
.process-section { padding: 100px 50px; }
.process-inner { max-width: 1200px; margin: 0 auto; text-align: center; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; margin-top: 60px; }
.process-step {
    padding: 40px 25px; position: relative;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    transition: var(--transition);
}
.process-step:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--glow-gold);
}
.step-number {
    font-family: 'Playfair Display', serif;
    font-size: 60px; font-weight: 900; color: var(--gold); opacity: 0.2;
    line-height: 1; margin-bottom: 18px;
}
.process-step h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 800; color: var(--text-primary); margin-bottom: 14px;
}
.process-step p { font-size: 14px; line-height: 1.9; color: var(--text-secondary); }

/* ═══════ TESTIMONIALS ═══════ */
.testimonials-section { padding: 100px 50px; max-width: 900px; margin: 0 auto; text-align: center; }
.testimonial-card {
    background: var(--bg-card); padding: 60px 50px;
    border: 1px solid var(--glass-border); border-radius: var(--radius-md);
    position: relative; margin-top: 50px;
}
.testimonial-card::before {
    content: '\201E'; font-family: 'Playfair Display', serif;
    font-size: 140px; font-weight: 900; color: var(--gold); opacity: 0.1;
    position: absolute; top: 0; left: 30px; line-height: 1;
}
.testimonial-text {
    font-family: 'Playfair Display', serif;
    font-size: 24px; font-weight: 500; font-style: italic;
    line-height: 1.8; color: var(--text-primary); margin-bottom: 30px;
    position: relative; z-index: 1;
}
.testimonial-author {
    font-size: 14px; font-weight: 700; letter-spacing: 4px;
    text-transform: uppercase; color: var(--gold);
}
.testimonial-stars { color: var(--gold); font-size: 20px; letter-spacing: 6px; margin-bottom: 25px; }

/* ═══════ CTA SECTION ═══════ */
.cta-section {
    padding: 120px 50px; text-align: center; position: relative; overflow: hidden;
    background: linear-gradient(135deg, #151010, #0d0808, #151012);
    border-top: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
}
.cta-section::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(201,169,110,0.06), transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(212,160,160,0.04), transparent 50%);
}
.cta-inner { position: relative; z-index: 2; max-width: 700px; margin: 0 auto; }
.cta-desc { font-size: 17px; line-height: 2; color: var(--text-muted); margin-bottom: 45px; }
.cta-btn {
    display: inline-flex; align-items: center; gap: 14px;
    padding: 18px 50px;
    background: linear-gradient(135deg, var(--gold), var(--gold-dark));
    color: var(--bg-primary); font-size: 14px; font-weight: 700;
    letter-spacing: 3px; text-transform: uppercase;
    border-radius: var(--radius-sm);
    transition: var(--transition);
    box-shadow: 0 10px 40px rgba(201,169,110,0.2);
}
.cta-btn:hover { transform: translateY(-3px); box-shadow: 0 15px 50px rgba(201,169,110,0.3); }
.cta-btn svg { width: 20px; height: 20px; }
.cta-handle {
    display: block; margin-top: 22px;
    font-family: 'Playfair Display', serif;
    font-size: 20px; font-weight: 500; font-style: italic;
    color: var(--gold-dark);
}

/* ═══════ FOOTER ═══════ */
.footer {
    padding: 80px 50px 40px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--glass-border);
}
.footer-inner {
    max-width: 1200px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px;
}
.footer-brand h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px; font-weight: 800; color: var(--gold); margin-bottom: 15px;
}
.footer-brand p { font-size: 15px; line-height: 1.9; color: var(--text-muted); }
.footer-col h4 {
    font-size: 12px; font-weight: 700; letter-spacing: 4px; text-transform: uppercase;
    color: var(--gold-dark); margin-bottom: 20px;
}
.footer-col a {
    display: block; color: var(--text-muted);
    font-size: 14px; margin-bottom: 12px;
}
.footer-col a:hover { color: var(--gold); }
.footer-bottom {
    max-width: 1200px; margin: 60px auto 0; padding-top: 30px;
    border-top: 1px solid var(--glass-border);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; color: var(--text-muted);
}

/* ═══════ SHOP PAGE ═══════ */
.shop-header {
    padding: 140px 50px 60px;
    text-align: center;
    background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.05), transparent 60%),
                var(--bg-primary);
}
.shop-filters {
    max-width: 1400px; margin: 0 auto;
    padding: 0 50px 40px;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 20px;
}
.filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-tab {
    padding: 10px 24px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: 30px; color: var(--text-secondary);
    font-size: 13px; font-weight: 600; letter-spacing: 1px;
    cursor: pointer; transition: var(--transition);
}
.filter-tab:hover, .filter-tab.active {
    background: var(--gold); color: var(--bg-primary);
    border-color: var(--gold);
}
.shop-sort select {
    padding: 10px 20px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-secondary);
    font-size: 13px; cursor: pointer;
}
.shop-grid {
    max-width: 1400px; margin: 0 auto;
    padding: 0 50px 100px;
}
.shop-empty {
    text-align: center; padding: 100px 20px;
    color: var(--text-muted);
}
.shop-empty h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px; color: var(--text-secondary); margin-bottom: 10px;
}

/* ═══════ PRODUCT PAGE ═══════ */
.product-page {
    padding: 120px 50px 80px;
    max-width: 1300px; margin: 0 auto;
}
.product-layout {
    display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
.product-gallery { position: sticky; top: 100px; }
.product-main-image {
    width: 100%; aspect-ratio: 3/4; border-radius: var(--radius-md);
    overflow: hidden; background: var(--bg-card); border: 1px solid var(--glass-border);
    margin-bottom: 15px;
}
.product-main-image img { width: 100%; height: 100%; object-fit: cover; }
.product-main-image .placeholder-icon {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 100px; opacity: 0.2;
}
.product-thumbs { display: flex; gap: 10px; }
.product-thumb {
    width: 80px; height: 80px; border-radius: var(--radius-sm);
    overflow: hidden; border: 2px solid var(--glass-border);
    cursor: pointer; transition: var(--transition);
}
.product-thumb:hover, .product-thumb.active { border-color: var(--gold); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; }

.product-details { padding-top: 20px; }
.product-breadcrumb {
    font-size: 13px; color: var(--text-muted); margin-bottom: 20px;
}
.product-breadcrumb a:hover { color: var(--gold); }
.product-breadcrumb span { color: var(--gold-dark); }
.product-title {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 800; color: var(--text-primary);
    margin-bottom: 15px; line-height: 1.2;
}
.product-price-block { margin-bottom: 30px; }
.product-price {
    font-family: 'Playfair Display', serif;
    font-size: 32px; font-weight: 700; color: var(--gold);
}
.product-price .old-price {
    font-size: 22px; color: var(--text-muted);
    text-decoration: line-through; margin-left: 15px; font-weight: 400;
}
.product-desc {
    font-size: 16px; line-height: 1.9; color: var(--text-secondary);
    margin-bottom: 35px; padding-bottom: 35px;
    border-bottom: 1px solid var(--glass-border);
}
.product-meta {
    display: grid; grid-template-columns: 1fr 1fr; gap: 15px;
    margin-bottom: 35px; padding-bottom: 35px;
    border-bottom: 1px solid var(--glass-border);
}
.product-meta-item {
    padding: 15px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}
.product-meta-label {
    font-size: 11px; font-weight: 700; letter-spacing: 2px;
    text-transform: uppercase; color: var(--gold-dark); margin-bottom: 5px;
}
.product-meta-value { font-size: 15px; color: var(--text-primary); font-weight: 600; }

.product-add-section { display: flex; gap: 15px; align-items: center; margin-bottom: 35px; }
.qty-selector {
    display: flex; align-items: center; gap: 0;
    border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
    overflow: hidden;
}
.qty-btn {
    width: 45px; height: 50px;
    background: var(--bg-card); color: var(--text-primary);
    border: none; font-size: 18px; cursor: pointer;
    transition: var(--transition);
}
.qty-btn:hover { background: var(--bg-elevated); color: var(--gold); }
.qty-input {
    width: 55px; height: 50px; text-align: center;
    background: var(--bg-primary); color: var(--text-primary);
    border: none; border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    font-size: 16px; font-weight: 600;
}
.btn-add-cart-large {
    flex: 1; padding: 16px 30px;
    background: var(--gold); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
}
.btn-add-cart-large:hover { background: var(--gold-light); box-shadow: 0 10px 30px rgba(201,169,110,0.3); }

.product-stock { margin-bottom: 30px; }
.stock-in { color: var(--success); font-size: 14px; font-weight: 600; }
.stock-out { color: var(--error); font-size: 14px; font-weight: 600; }
.stock-low { color: var(--warning); font-size: 14px; font-weight: 600; }

.related-section {
    padding: 80px 50px; max-width: 1400px; margin: 0 auto;
    border-top: 1px solid var(--glass-border);
}

/* ═══════ CART PAGE ═══════ */
.cart-page {
    padding: 120px 50px 80px;
    max-width: 1100px; margin: 0 auto;
}
.cart-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 800; margin-bottom: 50px;
    text-align: center;
}
.cart-items { margin-bottom: 40px; }
.cart-item {
    display: grid; grid-template-columns: 100px 1fr auto auto auto;
    gap: 25px; align-items: center;
    padding: 25px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); margin-bottom: 12px;
    transition: var(--transition);
}
.cart-item:hover { border-color: var(--glass-border-hover); }
.cart-item-image {
    width: 100px; height: 100px; border-radius: var(--radius-sm);
    overflow: hidden; background: var(--bg-elevated);
}
.cart-item-image img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-image .placeholder-icon {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 35px; opacity: 0.3;
}
.cart-item-name {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700; color: var(--text-primary);
}
.cart-item-name small {
    display: block; font-family: 'DM Sans', sans-serif;
    font-size: 12px; color: var(--text-muted); margin-top: 4px;
    font-weight: 400;
}
.cart-item-price {
    font-family: 'Playfair Display', serif;
    font-size: 18px; font-weight: 700; color: var(--gold);
    white-space: nowrap;
}
.cart-item-remove {
    background: none; border: none; color: var(--text-muted);
    font-size: 20px; cursor: pointer; padding: 8px;
    transition: var(--transition);
}
.cart-item-remove:hover { color: var(--error); }

.cart-summary {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 40px;
}
.cart-summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; font-size: 16px;
}
.cart-summary-row.total {
    border-top: 1px solid var(--glass-border);
    margin-top: 15px; padding-top: 20px;
    font-size: 22px; font-weight: 700;
}
.cart-summary-row.total span:last-child {
    font-family: 'Playfair Display', serif; color: var(--gold);
}
.btn-checkout {
    display: block; width: 100%; padding: 18px;
    margin-top: 25px; text-align: center;
    background: var(--gold); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
}
.btn-checkout:hover { background: var(--gold-light); box-shadow: 0 10px 30px rgba(201,169,110,0.3); }
.btn-continue-shopping {
    display: block; text-align: center; margin-top: 15px;
    color: var(--text-muted); font-size: 14px;
}
.btn-continue-shopping:hover { color: var(--gold); }
.cart-empty {
    text-align: center; padding: 80px 20px;
}
.cart-empty h3 {
    font-family: 'Playfair Display', serif;
    font-size: 28px; margin-bottom: 15px; color: var(--text-secondary);
}

/* ═══════ CHECKOUT PAGE ═══════ */
.checkout-page {
    padding: 120px 50px 80px;
    max-width: 1100px; margin: 0 auto;
}
.checkout-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 800; margin-bottom: 50px;
    text-align: center;
}
.checkout-layout { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; }
.form-group { margin-bottom: 22px; }
.form-label {
    display: block; margin-bottom: 8px;
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-dark);
}
.form-input, .form-textarea, .form-select {
    width: 100%; padding: 14px 18px;
    background: var(--bg-input); border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-primary);
    font-size: 15px; transition: var(--transition);
}
.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none; border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.1);
}
.form-textarea { resize: vertical; min-height: 100px; }
.form-select { cursor: pointer; }
.form-select option { background: var(--bg-card); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.checkout-summary {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-md); padding: 35px;
    position: sticky; top: 100px;
}
.checkout-summary h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; margin-bottom: 25px;
    padding-bottom: 15px; border-bottom: 1px solid var(--glass-border);
}
.checkout-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 0; font-size: 14px;
}
.checkout-item-name { color: var(--text-secondary); }
.checkout-item-price { color: var(--text-primary); font-weight: 600; }

/* ═══════ COUPON SECTION ═══════ */
.coupon-section {
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}
.coupon-input-row {
    display: flex; gap: 10px; align-items: stretch;
}
.coupon-input-row .form-input {
    flex: 1; padding: 12px 14px; font-size: 14px;
    text-transform: uppercase; letter-spacing: 1px;
}
.coupon-apply-btn {
    padding: 12px 22px; background: var(--gold); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition); white-space: nowrap;
}
.coupon-apply-btn:hover { background: var(--gold-light); }
.coupon-apply-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.coupon-message {
    font-size: 13px; margin-top: 8px; min-height: 18px;
    transition: var(--transition);
}
.coupon-message-success { color: #81c784; }
.coupon-message-error { color: #ef5350; }
.coupon-applied {
    display: flex; align-items: center; justify-content: space-between;
    background: rgba(76,175,80,0.08); border: 1px solid rgba(76,175,80,0.25);
    border-radius: var(--radius-sm); padding: 12px 16px; margin-top: 10px;
}
.coupon-applied-info {
    display: flex; align-items: center; gap: 8px; font-size: 14px; color: #81c784;
}
.coupon-applied-icon {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(76,175,80,0.2); display: flex; align-items: center;
    justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.coupon-discount-amount {
    font-weight: 700; margin-left: 4px;
}
.coupon-remove-btn {
    background: none; border: none; color: #ef5350;
    font-size: 22px; cursor: pointer; padding: 0 4px;
    line-height: 1; transition: var(--transition); opacity: 0.7;
}
.coupon-remove-btn:hover { opacity: 1; transform: scale(1.2); }
.coupon-discount-row span:last-child {
    font-weight: 600;
}

/* ═══════ ACCOUNT PAGE ═══════ */
.account-page {
    padding: 120px 50px 80px;
    max-width: 900px; margin: 0 auto;
}
.auth-container {
    max-width: 480px; margin: 0 auto;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 50px;
}
.auth-tabs {
    display: flex; gap: 0; margin-bottom: 40px;
    border-bottom: 1px solid var(--glass-border);
}
.auth-tab {
    flex: 1; padding: 14px; text-align: center;
    font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: var(--transition);
}
.auth-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.auth-form { display: none; }
.auth-form.active { display: block; }
.btn-auth {
    width: 100%; padding: 16px;
    background: var(--gold); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
    margin-top: 10px;
}
.btn-auth:hover { background: var(--gold-light); }

.profile-section { margin-top: 40px; }
.profile-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 30px;
}
.profile-header h2 {
    font-family: 'Playfair Display', serif;
    font-size: 30px; font-weight: 800;
}
.btn-logout {
    padding: 10px 25px;
    background: transparent; border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm); color: var(--text-muted);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: var(--transition);
}
.btn-logout:hover { border-color: var(--error); color: var(--error); }

.orders-table {
    width: 100%; border-collapse: collapse; margin-top: 20px;
}
.orders-table th {
    text-align: left; padding: 12px 16px;
    font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    color: var(--gold-dark);
    border-bottom: 1px solid var(--glass-border);
}
.orders-table td {
    padding: 16px; font-size: 14px; color: var(--text-secondary);
    border-bottom: 1px solid var(--glass-border);
}
.orders-table tr:hover td { color: var(--text-primary); }

/* ═══════ STATUS BADGES ═══════ */
.status-badge {
    display: inline-block; padding: 5px 14px;
    border-radius: 20px; font-size: 12px; font-weight: 700;
    letter-spacing: 1px; text-transform: uppercase;
}
.status-pending { background: rgba(255,152,0,0.15); color: #ff9800; border: 1px solid rgba(255,152,0,0.3); }
.status-confirmed { background: rgba(33,150,243,0.15); color: #42a5f5; border: 1px solid rgba(33,150,243,0.3); }
.status-shipped { background: rgba(156,39,176,0.15); color: #ba68c8; border: 1px solid rgba(156,39,176,0.3); }
.status-delivered { background: rgba(76,175,80,0.15); color: #81c784; border: 1px solid rgba(76,175,80,0.3); }
.status-cancelled { background: rgba(244,67,54,0.15); color: #ef5350; border: 1px solid rgba(244,67,54,0.3); }

/* ═══════ ORDER CONFIRMATION ═══════ */
.confirmation-page {
    padding: 120px 50px 80px;
    max-width: 700px; margin: 0 auto; text-align: center;
}
.confirmation-icon {
    width: 80px; height: 80px; border-radius: 50%;
    background: rgba(76,175,80,0.15); border: 2px solid rgba(76,175,80,0.3);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 30px; font-size: 36px;
}

/* ═══════ FLASH MESSAGES ═══════ */
.flash {
    padding: 15px 25px; border-radius: var(--radius-sm);
    margin-bottom: 25px; font-size: 14px; font-weight: 600;
}
.flash-success { background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.25); color: #81c784; }
.flash-error { background: rgba(244,67,54,0.12); border: 1px solid rgba(244,67,54,0.25); color: #ef5350; }

/* ═══════ REVEAL ANIMATION ═══════ */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }
.reveal-delay-4 { transition-delay: 0.6s; }

/* ═══════ BUTTONS ═══════ */
.btn-primary {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 35px;
    background: var(--gold); color: var(--bg-primary);
    border: none; border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
}
.btn-primary:hover { background: var(--gold-light); box-shadow: 0 8px 25px rgba(201,169,110,0.3); }
.btn-outline {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 35px;
    background: transparent; border: 1px solid var(--gold);
    color: var(--gold); border-radius: var(--radius-sm);
    font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    cursor: pointer; transition: var(--transition);
}
.btn-outline:hover { background: var(--gold); color: var(--bg-primary); }

/* ═══════ LIGHT THEME OVERRIDES ═══════ */
[data-theme="light"] .hero {
    background: radial-gradient(ellipse at 30% 20%, rgba(160,125,63,0.06), transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(184,120,120,0.04), transparent 50%),
                var(--bg-primary);
}
[data-theme="light"] .hero::before {
    background: radial-gradient(circle, rgba(160,125,63,0.04), transparent 70%);
}
[data-theme="light"] .hero::after {
    background: radial-gradient(circle, rgba(184,120,120,0.04), transparent 70%);
}
[data-theme="light"] .shop-header {
    background: radial-gradient(ellipse at 50% 0%, rgba(160,125,63,0.05), transparent 60%),
                var(--bg-primary);
}
[data-theme="light"] .cta-section {
    background: linear-gradient(135deg, #f5efe6, #ede5d8, #f5efe8);
}
[data-theme="light"] .cta-section::before {
    background: radial-gradient(ellipse at 30% 50%, rgba(160,125,63,0.06), transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(184,120,120,0.04), transparent 50%);
}
[data-theme="light"] .product-card-quick {
    background: linear-gradient(to top, rgba(255,255,255,0.95), transparent);
}
[data-theme="light"] .collection-card-content {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 60%, transparent);
}
[data-theme="light"] .col-bg-1 { background: linear-gradient(160deg, #f5e8e8, #f0dede, #f5e3e3); }
[data-theme="light"] .col-bg-2 { background: linear-gradient(160deg, #f5f0e3, #f0ebdb, #f5ede0); }
[data-theme="light"] .col-bg-3 { background: linear-gradient(160deg, #ede5f0, #e8dded, #ede3f0); }
[data-theme="light"] .about-img {
    background: linear-gradient(135deg, var(--bg-elevated), var(--bg-card));
}
[data-theme="light"] .product-card {
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
[data-theme="light"] .product-card:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.08);
}
[data-theme="light"] .checkout-summary,
[data-theme="light"] .auth-container,
[data-theme="light"] .cart-summary {
    box-shadow: 0 2px 15px rgba(0,0,0,0.04);
}
[data-theme="light"] .scroll-line {
    background: linear-gradient(to bottom, var(--gold-dark), transparent);
}
[data-theme="light"] .preloader-flame {
    background: linear-gradient(to top, var(--gold-dark), var(--gold), #f5e6c8);
    filter: drop-shadow(0 0 25px rgba(160,125,63,0.5));
}

/* ═══════ PAYMENT METHOD SELECTOR ═══════ */
.payment-methods { margin-bottom: 25px; }
.payment-methods h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px; margin-bottom: 20px; color: var(--gold);
}
.payment-option {
    display: flex; align-items: center; gap: 15px;
    padding: 18px 20px;
    background: var(--bg-card); border: 2px solid var(--glass-border);
    border-radius: var(--radius-md); margin-bottom: 10px;
    cursor: pointer; transition: var(--transition);
    position: relative;
}
.payment-option:hover { border-color: var(--glass-border-hover); }
.payment-option.selected {
    border-color: var(--gold);
    background: var(--bg-elevated);
    box-shadow: var(--glow-gold);
}
.payment-option input[type="radio"] { display: none; }
.payment-radio {
    width: 22px; height: 22px;
    border: 2px solid var(--glass-border);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: var(--transition);
}
.payment-option.selected .payment-radio {
    border-color: var(--gold);
}
.payment-radio::after {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--gold);
    transform: scale(0);
    transition: transform 0.2s ease;
}
.payment-option.selected .payment-radio::after { transform: scale(1); }
.payment-icon {
    font-size: 24px; width: 40px; text-align: center;
}
.payment-info { flex: 1; }
.payment-info strong {
    display: block; font-size: 15px; color: var(--text-primary);
    margin-bottom: 3px;
}
.payment-info span {
    font-size: 13px; color: var(--text-secondary);
}
.payment-details {
    display: none; padding: 15px 20px;
    margin: -5px 0 10px;
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-size: 14px; color: var(--text-secondary); line-height: 1.8;
}
.payment-details.show { display: block; }
.payment-details .crypto-wallets { margin-top: 10px; }
.payment-details .wallet-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; margin-bottom: 6px;
    background: var(--bg-elevated); border-radius: var(--radius-sm);
    font-family: monospace; font-size: 12px; word-break: break-all;
}
.payment-details .wallet-label {
    font-weight: 700; color: var(--gold); min-width: 50px;
    font-family: 'DM Sans', sans-serif; font-size: 13px;
}

/* ═══════ LEGAL PAGE ═══════ */
.legal-page {
    padding: 120px 50px 80px;
    max-width: 900px; margin: 0 auto;
}
.legal-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 800; margin-bottom: 15px;
    text-align: center;
}
.legal-page .legal-subtitle {
    text-align: center; color: var(--text-muted);
    font-size: 14px; margin-bottom: 60px;
}
.legal-content h2 {
    font-family: 'Playfair Display', serif;
    font-size: 24px; font-weight: 700; color: var(--gold);
    margin: 40px 0 18px; padding-top: 30px;
    border-top: 1px solid var(--glass-border);
}
.legal-content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.legal-content p {
    font-size: 15px; line-height: 2; color: var(--text-secondary);
    margin-bottom: 15px;
}
.legal-content ul, .legal-content ol {
    padding-left: 25px; margin-bottom: 15px;
}
.legal-content li {
    font-size: 15px; line-height: 2; color: var(--text-secondary);
    margin-bottom: 8px; list-style: disc;
}
.legal-content ol li { list-style: decimal; }
.legal-content strong { color: var(--text-primary); font-weight: 600; }

/* ═══════ PAYMENT INFO PAGE ═══════ */
.payment-info-page {
    padding: 120px 50px 80px;
    max-width: 1000px; margin: 0 auto;
}
.payment-info-page h1 {
    font-family: 'Playfair Display', serif;
    font-size: 40px; font-weight: 800; margin-bottom: 15px;
    text-align: center;
}
.payment-info-page .page-subtitle {
    text-align: center; color: var(--text-muted);
    font-size: 16px; margin-bottom: 60px;
}
.payment-cards {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 30px; margin-bottom: 60px;
}
.payment-card {
    background: var(--bg-card); border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg); padding: 40px 30px;
    text-align: center; transition: var(--transition);
}
.payment-card:hover {
    border-color: var(--glass-border-hover);
    box-shadow: var(--glow-gold);
    transform: translateY(-5px);
}
.payment-card-icon {
    font-size: 50px; margin-bottom: 25px;
    filter: drop-shadow(0 5px 15px rgba(201,169,110,0.15));
}
.payment-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 22px; font-weight: 700; color: var(--text-primary);
    margin-bottom: 15px;
}
.payment-card p {
    font-size: 14px; line-height: 1.9; color: var(--text-secondary);
}
.payment-card .payment-badge {
    display: inline-block; margin-top: 18px;
    padding: 6px 18px; border-radius: 20px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    background: rgba(201,169,110,0.12); color: var(--gold);
    border: 1px solid rgba(201,169,110,0.2);
}

@media (max-width: 768px) {
    .payment-cards { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .legal-page, .payment-info-page { padding-left: 20px; padding-right: 20px; }
}

/* ═══════ RESPONSIVE ═══════ */
@media (max-width: 1200px) {
    .products-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
    .about-section { grid-template-columns: 1fr; gap: 50px; }
    .collections-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .products-grid { grid-template-columns: repeat(2, 1fr); }
    .product-layout { grid-template-columns: 1fr; gap: 40px; }
    .product-gallery { position: static; }
    .checkout-layout { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
    .navbar { padding: 15px 25px; }
    .navbar.scrolled { padding: 12px 25px; }
    .nav-links { display: none; }
    .menu-toggle { display: flex; }
    .nav-links.open {
        display: flex; flex-direction: column;
        position: fixed; inset: 0;
        background: var(--nav-mobile-bg); backdrop-filter: blur(30px);
        justify-content: center; align-items: center; gap: 30px; z-index: 1000;
    }
    .nav-links.open a { font-size: 18px; font-weight: 800; letter-spacing: 5px; color: var(--text-primary); }
    .hero-logo { width: min(300px, 80vw); }
    .featured-section, .collections-section, .about-section,
    .process-section, .testimonials-section, .cta-section,
    .shop-header, .related-section { padding-left: 25px; padding-right: 25px; }
    .shop-filters { padding: 0 25px 30px; }
    .shop-grid { padding: 0 25px 60px; }
    .products-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .collections-grid { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; }
    .process-grid { grid-template-columns: 1fr; max-width: 350px; margin-left: auto; margin-right: auto; }
    .cart-page, .checkout-page, .account-page, .product-page, .confirmation-page {
        padding-left: 20px; padding-right: 20px;
    }
    .cart-item { grid-template-columns: 70px 1fr; gap: 15px; }
    .cart-item-price, .cart-item-remove { grid-column: 2; }
    .footer-inner { grid-template-columns: 1fr; gap: 40px; }
    .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
    .testimonial-card { padding: 40px 25px; }
    .auth-container { padding: 35px 25px; }
    .form-row { grid-template-columns: 1fr; }
    .product-meta { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   ULTRA PREMIUM ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/* ═══════ PREMIUM SCROLLBAR ═══════ */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, var(--gold-dark), var(--gold));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--gold-light); }
html { scrollbar-width: thin; scrollbar-color: var(--gold-dark) var(--bg-primary); }

/* ═══════ SCROLL PROGRESS BAR ═══════ */
#scroll-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-dark), var(--gold), var(--gold-light), var(--gold));
    background-size: 300% 100%;
    animation: progressShine 3s ease infinite;
    z-index: 10001;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(201,169,110,0.5), 0 0 20px rgba(201,169,110,0.2);
    pointer-events: none;
}
@keyframes progressShine {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ═══════ LUXURY GRAIN TEXTURE ═══════ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    opacity: 0.018;
    pointer-events: none;
    z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
}
[data-theme="light"] body::before { opacity: 0.012; }

/* ═══════ GOLDEN SHIMMER ON PRODUCT CARDS ═══════ */
.product-card {
    position: relative;
    overflow: hidden;
}
.product-card::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 40%,
        rgba(201,169,110,0.06) 45%,
        rgba(201,169,110,0.12) 50%,
        rgba(201,169,110,0.06) 55%,
        transparent 60%
    );
    transform: translateX(-100%) translateY(-100%);
    transition: none;
    z-index: 1;
    pointer-events: none;
}
.product-card:hover::after {
    animation: cardShimmer 1.2s ease forwards;
}
@keyframes cardShimmer {
    0% { transform: translateX(-100%) translateY(-100%); }
    100% { transform: translateX(100%) translateY(100%); }
}

/* Ensure card content above shimmer */
.product-card-image,
.product-card-info,
.product-card-quick,
.product-badge {
    position: relative;
    z-index: 2;
}

/* ═══════ STAR RATINGS ═══════ */
.product-card-rating {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-top: 10px;
}
.star-icon {
    font-size: 14px;
    line-height: 1;
}
.star-filled {
    color: var(--gold);
    text-shadow: 0 0 6px rgba(201,169,110,0.4);
}
.star-empty {
    color: var(--text-muted);
    opacity: 0.2;
}
.rating-count {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 6px;
    font-weight: 500;
}

/* ═══════ ENHANCED NEWSLETTER BOX ═══════ */
.newsletter-box {
    margin-top: 30px;
    padding: 30px;
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}
.newsletter-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.newsletter-box h4 {
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--gold);
    margin-bottom: 8px;
}
.newsletter-box > p {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.newsletter-form {
    display: flex;
    gap: 0;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: var(--transition);
}
.newsletter-form:focus-within {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(201,169,110,0.1);
}
.newsletter-input {
    flex: 1;
    padding: 14px 16px;
    background: var(--bg-input);
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
}
.newsletter-input::placeholder { color: var(--text-muted); }
.newsletter-btn {
    padding: 14px 22px;
    background: var(--gold);
    color: var(--bg-primary);
    border: none;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.newsletter-btn:hover { background: var(--gold-light); }
.newsletter-msg {
    font-size: 13px;
    margin-top: 8px;
    min-height: 18px;
}

/* ═══════ ENHANCED LINK HOVER UNDERLINES ═══════ */
.nav-links a::after {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ═══════ BUTTON GOLDEN RIPPLE ═══════ */
.btn-add-cart,
.btn-add-cart-large,
.btn-checkout,
.btn-auth,
.btn-primary,
.hero-cta,
.cta-btn,
.coupon-apply-btn,
.newsletter-btn {
    position: relative;
    overflow: hidden;
}
.btn-add-cart::after,
.btn-add-cart-large::after,
.btn-checkout::after,
.btn-auth::after,
.btn-primary::after,
.cta-btn::after,
.coupon-apply-btn::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
    opacity: 0;
    pointer-events: none;
}
.btn-add-cart:active::after,
.btn-add-cart-large:active::after,
.btn-checkout:active::after,
.btn-auth:active::after,
.btn-primary:active::after,
.cta-btn:active::after,
.coupon-apply-btn:active::after {
    width: 300px; height: 300px;
    opacity: 1;
    transition: 0s;
}

/* ═══════ ENHANCED PRODUCT CARD HOVER ═══════ */
.product-card {
    transition: transform 0.5s cubic-bezier(0.23,1,0.32,1),
                border-color 0.4s ease,
                box-shadow 0.5s cubic-bezier(0.23,1,0.32,1);
}
.product-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: var(--glow-gold), 0 20px 60px rgba(0,0,0,0.15);
}

/* ═══════ COLLECTION CARD GLOW ═══════ */
.collection-card:hover {
    box-shadow: var(--glow-gold), 0 20px 50px rgba(0,0,0,0.2);
}

/* ═══════ ENHANCED HERO CTA ═══════ */
.hero-cta {
    border-radius: 0;
    position: relative;
}
.hero-cta::after {
    content: '';
    position: absolute;
    inset: -3px;
    border: 1px solid rgba(201,169,110,0.3);
    opacity: 0;
    transition: all 0.4s ease;
}
.hero-cta:hover::after {
    inset: -6px;
    opacity: 1;
}

/* ═══════ FLOATING LABEL EFFECT ON INPUTS ═══════ */
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    box-shadow: 0 0 0 3px rgba(201,169,110,0.1),
                0 4px 20px rgba(201,169,110,0.08);
    border-color: var(--gold);
}

/* ═══════ SELECTION COLOR ═══════ */
::selection {
    background: rgba(201,169,110,0.3);
    color: var(--text-primary);
}
::-moz-selection {
    background: rgba(201,169,110,0.3);
    color: var(--text-primary);
}

/* ═══════ ENHANCED PAGE TRANSITIONS ═══════ */
.shop-header,
.product-page,
.cart-page,
.checkout-page,
.account-page,
.legal-page,
.payment-info-page,
.confirmation-page,
.contact-page,
.faq-page {
    animation: pageIn 0.8s ease forwards;
}
@keyframes pageIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════ ENHANCED FOOTER ═══════ */
.footer {
    position: relative;
    overflow: hidden;
}
.footer::before {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 200px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ═══════ ENHANCED NAVBAR GLASS EFFECT ═══════ */
.navbar.scrolled {
    backdrop-filter: blur(30px) saturate(1.2);
    -webkit-backdrop-filter: blur(30px) saturate(1.2);
}

/* ═══════ PRICE GLOW ═══════ */
.product-price {
    text-shadow: 0 0 30px rgba(201,169,110,0.15);
}
.product-card-price {
    text-shadow: 0 0 20px rgba(201,169,110,0.1);
}

/* ═══════ MOBILE: DISABLE EFFECTS ═══════ */
@media (hover: none), (pointer: coarse) {
    #scroll-progress { display: none !important; }
    body::before { display: none; }
}