*:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #C5A059 !important;
  outline-offset: 2px !important;
}

/* ========================================
   AtlasClé - Ultra Premium Dark Theme
   ======================================== */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

  :root {
  /* Color Palette - Automotive Obsidian & Champagne Gold */
  --primary: #0B0C0E;
  --secondary: #14161B;
  --bg-primary: #0B0C0E;
  --bg-secondary: #14161B;
  --bg-elevated: #1C1F26;
  --bg-glass: rgba(20, 22, 27, 0.75);

  --accent: #C5A059;
  --accent-hover: #D4AF37;
  --gold-primary: #C5A059;
  --gold-hover: #D4AF37;
  --gold-light: #E6C687;
  --gold-dark: #9A7B3E;
  --border-gold: rgba(197, 160, 89, 0.30);
  --border-gold-focus: #C5A059;
  --gold-glow: 0 4px 20px rgba(197, 160, 89, 0.20);

  --text-primary: #F8FAFC;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --text-inverse: #0B0C0E;

  --border: #2A2A2A;
  --border-light: #3A3A3A;
  --border-subtle: rgba(255, 255, 255, 0.08);

  --success: #10B981;
  --error: #EF4444;
  --warning: #F59E0B;
  --info: #3B82F6;

  /* Gradients */
  --gradient-primary: linear-gradient(135deg, #0B0C0E 0%, #14161B 100%);
  --gradient-accent: linear-gradient(135deg, #C5A059 0%, #D4AF37 100%);
  --gradient-glass: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
  --gradient-hero: linear-gradient(135deg, #0B0C0E 0%, #14161B 50%, #1C1F26 100%);

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 48px rgba(0, 0, 0, 0.75);
  --shadow-gold: 0 4px 16px rgba(197, 160, 89, 0.25);

  /* Border Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 50px;

  /* Spacing */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;

  /* Typography */
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Space Grotesk', 'Inter', -apple-system, sans-serif;

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow: 0.4s ease;

  /* Legacy & Luxury Alias Variables */
  --lux-bg: #0B0C0E;
  --lux-glass: rgba(20, 22, 27, 0.75);
  --lux-gold: #C5A059;
  --lux-gold-glow: 0 4px 20px rgba(197, 160, 89, 0.20);
  --lux-glass-blur: blur(12px);
  --lux-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Reset & Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-primary);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  font-size: 16px;
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold-primary);
  outline-offset: 2px;
}
   
   /* --- Sidebar overlays (Panier / Favoris) --- */
   .sidebar-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(2px);
     display: none;
     z-index: 1200;
   }
   .sidebar-overlay.active { display: block; }
   .sidebar-card {
     position: fixed;
     top: 0;
     right: -420px;
     width: 400px;
     max-width: 90vw;
     height: 100vh;
     background: #141414;
     border-left: 1px solid var(--border);
     box-shadow: var(--shadow-xl);
     transition: right var(--transition-normal);
     z-index: 1300;
     display: flex;
     flex-direction: column;
   }
   .sidebar-card.active { right: 0; }
   .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); }
   .sidebar-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
   .sidebar-content { padding: 16px; overflow-y: auto; flex: 1; }
   .sidebar-empty { text-align: center; color: var(--text-secondary); }
   .sidebar-total { padding: 12px 16px; border-top: 1px solid var(--border); background: #0f0f0f; }
   .sidebar-total-row { display: flex; justify-content: space-between; margin-bottom: 8px; }
   .sidebar-checkout-btn { width: 100%; background: var(--gradient-accent); color: #181818; font-weight: 700; padding: 10px 14px; border-radius: 8px; }

   /* Orders panel - enhanced */
   .orders-header { position: sticky; top: 0; background: #141414; z-index: 1; box-shadow: 0 2px 0 rgba(255,215,0,0.06); }
   .orders-panel { backdrop-filter: blur(6px); }
   .orders-list { display: grid; gap: 12px; }
   .order-card { background: #121212; border: 1px solid var(--border); border-radius: 12px; padding: 12px; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
   .order-card:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); border-color: #2f2f2f; }
   .order-card-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
   .order-id-wrap { min-width: 0; }
   .order-id { font-weight: 700; letter-spacing: 0.02em; }
   .order-date { color: var(--text-secondary); font-size: 0.85rem; }
   .order-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
   .order-total { font-weight: 800; color: #fff; background: #181818; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--border); }
   .order-count { color: var(--text-secondary); background: #101010; border: 1px solid var(--border); padding: 6px 10px; border-radius: 10px; }
   .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-weight: 700; font-size: 0.85rem; border: 1px solid transparent; }
   .status-badge i { font-size: 0.9em; }
   .status-pending { background: #2a2a2a; color: var(--gold-primary); border-color: #3a3a3a; }
   .status-confirmed { background: #1e293b; color: #93c5fd; border-color: #243b55; }
   .status-processing { background: #222; color: #e5e7eb; border-color: #333; }
   .status-shipped { background: #0b3a2a; color: #34d399; border-color: #115e59; }
   .status-delivered { background: #102a43; color: #7ee3ff; border-color: #164e63; }
   .status-cancelled { background: #3b0a0a; color: #ff6b6b; border-color: #5b1111; }
   .status-refunded { background: #3a2a0b; color: #fbbf24; border-color: #5b430f; }
   @media (max-width: 520px) {
     .order-card-row { flex-direction: column; align-items: flex-start; gap: 8px; }
     .order-meta { width: 100%; justify-content: space-between; }
   }
   
   /* Loading Screen */
   .loading-screen {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: var(--gradient-primary);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 9999;
     transition: opacity var(--transition-slow), visibility var(--transition-slow);
   }
   
   .loading-screen.hidden {
     opacity: 0;
     visibility: hidden;
   }
   
   .loading-content {
     text-align: center;
   }
   
   .logo-animation {
     display: flex;
     align-items: center;
     gap: var(--space-sm);
     font-size: 2rem;
     font-weight: 700;
     color: var(--accent);
     margin-bottom: var(--space-lg);
     animation: logoPulse 2s ease-in-out infinite;
   }
   
   @keyframes logoPulse {
     0%, 100% { transform: scale(1); }
     50% { transform: scale(1.05); }
   }
   
   .loading-spinner {
     width: 40px;
     height: 40px;
     border: 3px solid var(--border);
     border-top: 3px solid var(--accent);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto;
   }
   
   @keyframes spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
   }
   
   /* Header */
   .header { 
     position: sticky; 
     top: 0; 
     z-index: 100; 
     background: rgba(17, 17, 17, 0.95); 
     box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(15px);
     border-bottom: 1px solid rgba(197, 160, 89, 0.1);
     transition: all 0.3s ease;
   }
   
  .header.scrolled {
  background: rgba(11, 12, 14, 0.98);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid var(--border-gold);
}
.header-container { max-width: 1400px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.logo { display: flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--gold-primary); text-decoration: none; transition: color 0.2s ease; }
.logo i { font-size: 1.7rem; color: var(--gold-primary); margin-right: 0.18em; vertical-align: middle; }
.search-container { flex: 1; max-width: 500px; }.search-bar { display: flex; align-items: stretch; background: var(--bg-secondary); border: 1px solid var(--border-gold); border-radius: 2rem; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.search-bar:focus-within { border-color: var(--gold-hover); box-shadow: var(--gold-glow); }
.search-bar input { flex: 1; background: transparent; border: none; padding: 0.85rem 1.25rem; color: var(--text-primary); font-size: 0.95rem; font-family: var(--font-primary); outline: none; }
.search-bar input::placeholder { color: var(--text-muted); }
.search-btn { background: var(--gold-primary); border: none; padding: 0 1.25rem; color: var(--bg-primary); cursor: pointer; font-weight: 700; transition: background 0.2s ease; display: flex; align-items: center; justify-content: center; outline: none; }
.search-btn:hover { background: var(--gold-hover); }
.header-actions { display: flex; align-items: center; gap: 1rem; }
.auth-btn, .orders-btn, .favorites-btn, .cart-btn { background: var(--bg-secondary); color: var(--gold-primary); border: 1px solid var(--border-gold); border-radius: 1rem; padding: 0.6em 1.2em; font-weight: 600; font-size: 1rem; display: flex; align-items: center; gap: 0.5em; box-shadow: var(--shadow-sm); transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease; position: relative; font-family: var(--font-primary); }
.auth-btn:hover, .orders-btn:hover, .favorites-btn:hover, .cart-btn:hover { border-color: var(--gold-hover); box-shadow: var(--gold-glow); background: var(--bg-elevated); color: var(--gold-hover); }
.cart-count, .favorites-count { background: var(--gold-primary); color: var(--bg-primary); font-size: 0.85em; font-weight: 700; padding: 0.15em 0.6em; border-radius: 1em; min-width: 1.6em; text-align: center; margin-left: 0.3em; transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.cart-count.animated, .favorites-count.animated { transform: scale(1.15); box-shadow: var(--gold-glow); }
   
   /* Navigation */
   .nav {
     background: #181818;
     border-bottom: 1.5px solid #222;
     box-shadow: 0 2px 8px #0002;
     z-index: 99;
   }
   
   .nav-container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 32px;
   }
   
   /* Nav - Accueil only for product page */
   .nav-menu {
     display: flex;
     gap: 32px;
     justify-content: flex-start;
     align-items: center;
     list-style: none;
     padding: 0;
     margin: 0;
   }
   .nav-menu .nav-link {
     color: #fff;
     font-weight: 600;
     font-size: 1.13em;
     letter-spacing: 0.01em;
     padding: 10px 18px;
     border-radius: 8px;
     transition: background 0.18s, color 0.18s;
     text-decoration: none;
     position: relative;
   }
   .nav-menu .nav-link:hover,
   .nav-menu .nav-link.active {
     background: rgba(197, 160, 89, 0.13);
     color: var(--gold-primary);
   }
   
   /* Main Content */
   .main {
     margin-top: 0; /* Remove margin since header is sticky */
   }
   
   /* Hero Section */
   .hero {
     position: relative;
     min-height: 80vh;
     display: flex;
     align-items: center;
     background: linear-gradient(120deg, #181818 60%, #232323 100%);
     overflow: hidden;
   }
   
   .hero::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 0;
     background: radial-gradient(circle at 70% 40%, rgba(197, 160, 89, 0.2) 0%, #181818 80%),
                 linear-gradient(120deg, #181818 60%, #232323 100%);
     opacity: 0.8;
     pointer-events: none;
     animation: hero-bg-move 12s linear infinite alternate;
   }
   
   @keyframes hero-bg-move {
     from { background-position: 70% 40%; }
     to { background-position: 40% 70%; }
   }
   
   .hero-container {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 3.5rem;
     max-width: 1400px;
     margin: 0 auto;
     padding: 4.5rem 2rem 3.5rem 2rem;
     position: relative;
     min-height: 80vh;
     z-index: 2;
   }
   
   .hero-glass-card {
     background: rgba(24, 24, 24, 0.65);
     border-radius: 2.5rem;
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.13), 0 1.5px 0 #fff2;
     backdrop-filter: blur(12px) saturate(1.2);
     padding: 4rem 3.5rem 4rem 4rem;
     min-width: 0; max-width: 440px; width: 100%;
     max-width: 600px;
     flex: 1.3;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     position: relative;
   }
   
   .hero-glass-card::before {
     content: '';
     position: absolute;
     inset: 0;
     border-radius: 2.5rem;
     background: radial-gradient(circle at 60% 60%, rgba(197, 160, 89, 0.2) 0%, rgba(197, 160, 89, 0.07) 60%, transparent 100%);
     z-index: 0;
     filter: blur(24px);
     opacity: 0.7;
     pointer-events: none;
   }
   
   .hero-content {
     position: relative;
     z-index: 2;
     text-align: left;
     width: 100%;
   }
   
   .hero-title {
     font-family: 'Space Grotesk', 'Inter', sans-serif;
     font-size: 3.4rem;
     font-weight: 800;
     color: #fff;
     margin-bottom: 1.2rem;
     line-height: 1.1;
     letter-spacing: -1px;
     text-shadow: 0 4px 32px #000a, 0 1px 0 #fff1;
   }
   
   .hero-title .title-accent {
     color: var(--gold-primary);
     background: linear-gradient(90deg, var(--gold-primary) 40%, #fffbe6 60%, var(--gold-primary) 100%);
     background-size: 200% auto;
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     animation: gold-shine 2.5s linear infinite alternate;
     text-shadow: 0 2px 16px rgba(197, 160, 89, 0.33), 0 1px 0 #fff1;
   }
   
   @keyframes gold-shine {
     0% { background-position: 0% 50%; }
     100% { background-position: 100% 50%; }
   }
   
   .hero-description {
     color: #d1d1d1;
     font-size: 1.2rem;
     margin-bottom: 2.2rem;
     max-width: 480px;
   }
   
   .hero-buttons {
     display: flex;
     gap: 1.2rem;
   }
   
   .btn-primary {
     background: linear-gradient(90deg, var(--gold-primary) 60%, var(--gold-hover) 100%);
     color: #181818;
     font-weight: 700;
     border: 2px solid var(--gold-primary);
     border-radius: 2.5rem;
     padding: 1.1rem 2.6rem;
     font-size: 1.2rem;
     box-shadow: 0 4px 24px rgba(197, 160, 89, 0.2), 0 1.5px 0 #fff2;
     transition: transform 0.18s, box-shadow 0.18s, background 0.18s, border 0.18s;
     cursor: pointer;
     position: relative;
     z-index: 2;

     animation: cta-glow 2.5s infinite alternate;
     overflow: hidden;
   }
   
   .btn-primary i {
     margin-left: 0.7rem;
     transition: transform 0.2s;
     display: inline-block;
   }
   
   .btn-primary:hover i {
     transform: translateX(8px) scale(1.1);
   }
   
   @keyframes cta-glow {
     from { box-shadow: 0 4px 24px rgba(197, 160, 89, 0.2), 0 1.5px 0 #fff2; }
     to { box-shadow: 0 8px 48px rgba(197, 160, 89, 0.6), 0 1.5px 0 #fff2; }
   }
   
   .btn-primary:hover {
     background: linear-gradient(90deg, var(--gold-hover) 60%, var(--gold-primary) 100%);
     transform: translateY(-2px) scale(1.04);
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.6), 0 1.5px 0 #fff2;
     border: 2.5px solid #fffbe6;
   }
   
   .btn-secondary {
     background: rgba(24,24,24,0.7);
     color: var(--gold-primary);
     border: 2px solid var(--gold-primary);
     border-radius: 2.5rem;
     padding: 1.1rem 2.6rem;
     font-size: 1.2rem;
     font-weight: 600;
     transition: background 0.18s, color 0.18s, border 0.18s;
     cursor: pointer;
     z-index: 2;
   }
   
   .btn-secondary:hover {
     background: var(--gold-primary);
     color: #181818;
   }
   
   .hero-visual {
     flex: 1.1;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     min-width: 340px;
     position: relative;
     z-index: 2;
     
   }
   
   .luxury-car {
     position: relative;
     width: 420px;
     height: 260px;
     display: flex;
     align-items: flex-end;
     justify-content: center;
     background: rgba(255,255,255,0.08);
     border-radius: 2.5rem;
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.2), 0 1.5px 0 #fff2;
     backdrop-filter: blur(10px) saturate(1.3);
     overflow: visible;
     animation: glassy-fadein 1.2s cubic-bezier(.4,1.4,.6,1) 0.2s both;
   }
   
   .luxury-car::before {
     content: '';
     position: absolute;
     left: -40px; top: 50%;
     width: 60px; height: 6px;
     background: linear-gradient(90deg, var(--gold-primary) 0%, #fffbe6 100%);
     border-radius: 3px;
     box-shadow: 0 0 16px rgba(197, 160, 89, 0.6);
     opacity: 0.7;
     transform: translateY(-50%);
     z-index: 2;
   }
   
   .hero-car-img {
     width: 620px !important;
     max-width: 80vw !important;
     height: auto !important;
     border-radius: 2rem !important;
     box-shadow: 0 0 60px 0 rgba(255, 200, 0, 0.18) !important;
   }
   
   @keyframes car-float {
     from { opacity: 0; transform: translateY(60px) scale(0.92) rotate(-4deg); }
     to { opacity: 1; transform: translateY(0) scale(1) rotate(0deg); }
   }
   
   /* Container */
   .container {
     max-width: 1400px;
     margin: 0 auto;
     padding: 0 var(--space-lg);
   }
   
   /* Section Headers */
   .section-header {
     text-align: center;
     margin-bottom: var(--space-2xl);
   }
   
   .section-title {
     font-family: var(--font-display);
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: var(--space-md);
   }
   
   .section-subtitle {
     font-size: 1.125rem;
     color: var(--text-secondary);
     max-width: 600px;
     margin: 0 auto;
   }
   
   /* Products Section */
   .products {
     padding: var(--space-2xl) 0;
     background: var(--secondary);
   }
   
   /* Filter Tabs */
   .filter-tabs {
     display: flex;
     justify-content: center;
     gap: var(--space-sm);
     margin-bottom: var(--space-xl);
     flex-wrap: wrap;
   }
   
   .filter-tab {
     display: flex;
     align-items: center;
     gap: var(--space-xs);
     background: var(--primary);
     border: 1px solid var(--border);
     padding: var(--space-sm) var(--space-md);
     border-radius: var(--radius-full);
     color: var(--text-secondary);
     cursor: pointer;
     transition: all var(--transition-normal);
     font-size: 0.9rem;
     font-weight: 500;
   }
   
   .filter-tab:hover {
     border-color: var(--accent);
     color: var(--accent);
   }
   
   .filter-tab.active {
     background: var(--accent);
     color: var(--primary);
     border-color: var(--accent);
   }
   
   /* Products Grid */
   .products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     gap: var(--space-lg);
     margin-bottom: var(--space-xl);
     max-width: 1400px;
     margin-left: auto;
     margin-right: auto;
   }
   
   /* Pagination Styles */
   .pagination-container {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 1.5rem;
     margin-top: 2rem;
     padding: 2rem 0;
     border-top: 1px solid rgba(197, 160, 89, 0.1);
   }
   
   .pagination-info {
     color: #bdbdbd;
     font-size: 0.95rem;
     font-weight: 500;
   }
   
   .pagination-controls {
     display: flex;
     align-items: center;
     gap: 1rem;
     flex-wrap: wrap;
     justify-content: center;
   }
   
   .pagination-btn {
     background: rgba(24, 24, 24, 0.8);
     border: 2px solid transparent;
     border-radius: 1.2rem;
     padding: 0.8em 1.5em;
     color: var(--gold-primary);
     font-weight: 600;
     font-size: 0.95rem;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(.4,1.4,.6,1);
     display: flex;
     align-items: center;
     gap: 0.5em;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     min-width: 120px;
     justify-content: center;
   }
   
   .pagination-btn:hover:not(:disabled) {
     border-color: var(--gold-primary);
     box-shadow: 0 0 0 2px rgba(197, 160, 89, 0.1);
     background: rgba(24, 24, 24, 0.9);
     transform: translateY(-2px);
   }
   
   .pagination-btn:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     transform: none;
   }
   
   .pagination-btn:disabled:hover {
     border-color: transparent;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     background: rgba(24, 24, 24, 0.8);
     transform: none;
   }
   
   .pagination-numbers {
     display: flex;
     gap: 0.5rem;
     align-items: center;
   }
   
   .page-number {
     background: rgba(24, 24, 24, 0.8);
     border: 2px solid transparent;
     border-radius: 0.8rem;
     padding: 0.6em 1em;
     color: var(--gold-primary);
     font-weight: 600;
     font-size: 0.9rem;
     cursor: pointer;
     transition: all 0.3s cubic-bezier(.4,1.4,.6,1);
     min-width: 40px;
     text-align: center;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
   }
   
   .page-number:hover {
     border-color: var(--gold-primary);
     box-shadow: 0 0 12px rgba(197, 160, 89, 0.4);
     background: rgba(24, 24, 24, 0.9);
     transform: translateY(-1px);
   }
   
   .page-number.active {
     background: var(--gold-primary);
     color: #181818;
     border-color: var(--gold-primary);
     box-shadow: 0 0 16px rgba(197, 160, 89, 0.53);
     font-weight: 700;
   }
   
   .page-number.active:hover {
     background: var(--gold-primary);
     color: #181818;
     transform: none;
   }
   
   /* Responsive Pagination */
   /* Responsive Products Grid */
   @media (max-width: 1200px) {
     .products-grid {
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
       max-width: 1200px;
     }
   }
   
   @media (max-width: 900px) {
     .products-grid {
       grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
       max-width: 900px;
     }
   }
   
   @media (max-width: 768px) {
     .products-grid {
       grid-template-columns: repeat(2, 1fr) !important;
       gap: 0.5rem;
       max-width: 100%;
       padding: 0;
     }
     
     .product-card.luxury-card {
       border-radius: 0.6rem;
       box-shadow: 0 2px 12px #0005, 0 0 0 1px rgba(197, 160, 89, 0.12);
     }
     
     .product-card .product-image.luxury-image {
       min-height: 140px;
     }
     
     .carousel-container,
     .carousel-track {
       height: 140px;
     }
     
     .carousel-img {
       max-height: 130px;
       max-width: 85%;
     }
     
     .carousel-nav {
       display: none;
     }
     
     .carousel-dot {
       width: 5px;
       height: 5px;
     }
     
     .product-card .product-info {
       padding: 0.5rem 0.5rem;
     }
     
     .product-card .product-name,
     .product-card h3 {
       font-size: 0.75rem !important;
       line-height: 1.25;
       margin-bottom: 0.2rem;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
     
     .product-card .product-price,
     .product-card .price {
       font-size: 0.9rem !important;
       font-weight: 700;
       margin-bottom: 0.3rem;
     }
     
     .product-card .add-to-cart-btn {
       padding: 0.4rem 0.5rem;
       font-size: 0.7rem;
       border-radius: 1.2rem;
       min-height: 30px;
       gap: 0.3em;
     }
     
     .product-card .quick-view-btn {
       padding: 0.3rem 0.5rem;
       font-size: 0.65rem;
       min-height: 26px;
     }
     
     .pagination-controls {
       gap: 0.8rem;
     }
     
     .pagination-btn {
       padding: 0.7em 1.2em;
       font-size: 0.9rem;
       min-width: 100px;
     }
     
     .page-number {
       padding: 0.5em 0.8em;
       font-size: 0.85rem;
       min-width: 35px;
     }
     
     .pagination-info {
       font-size: 0.9rem;
       text-align: center;
     }
   }
   
   @media (max-width: 480px) {
     .pagination-controls {
       flex-direction: column;
       gap: 1rem;
     }
     
     .pagination-btn {
       width: 100%;
       max-width: 200px;
     }
     
     .pagination-numbers {
       order: -1;
     }
   }
   
   .product-card {
     background: rgba(24, 24, 24, 0.72);
     border-radius: 1.7rem;
     box-shadow: 0 8px 32px rgba(197, 160, 89, 0.13), 0 1.5px 0 #fff2;
     border: 2px solid transparent;
     transition: box-shadow 0.35s cubic-bezier(.4,1.4,.6,1), border-color 0.35s, transform 0.25s cubic-bezier(.4,1.4,.6,1);
     overflow: hidden;
     position: relative;
     min-width: 260px;
     max-width: 340px;
     margin: 0 auto;
   }
   
   .product-card:hover, .product-card:focus-within {
     box-shadow: 0 12px 48px rgba(197, 160, 89, 0.33), 0 2px 16px #fffbe6aa;
     border-color: var(--gold-primary);
     transform: translateY(-6px) scale(1.025);
     z-index: 2;
   }
   
   .product-image {
     position: relative;
     width: 100%;
     height: 210px;
     overflow: hidden;
     background: #181818;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .product-image img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     transition: transform 0.35s cubic-bezier(.4,1.4,.6,1), box-shadow 0.35s;
     box-shadow: 0 2px 16px #000a;
   }
   
   .product-card:hover .product-image img {
     transform: scale(1.13);
     box-shadow: 0 8px 32px rgba(197, 160, 89, 0.27), 0 2px 16px #fffbe6aa;
   }
   
   .product-card .wishlist-btn {
     position: absolute;
     top: 1.1rem;
     right: 1.1rem;
     background: rgba(24,24,24,0.7);
     border: none;
     border-radius: 50%;
     width: 2.3rem;
     height: 2.3rem;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     font-size: 1.25rem;
     cursor: pointer;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     transition: background 0.2s, color 0.2s;
     z-index: 3;
   }
   
   .product-card .wishlist-btn i {
     color: #fff;
     transition: color 0.25s, filter 0.25s;
   }
   
   .product-card .wishlist-btn.active i {
     color: #ff3b3b;
     filter: drop-shadow(0 0 8px #ff3b3b66);
   }
   
   .product-card .wishlist-btn.active {
     background: #181818;
   }
   
   .product-info {
     padding: 1.3rem 1.2rem 1.2rem 1.2rem;
     background: rgba(0,0,0,0.82);
     border-bottom-left-radius: 1.7rem;
     border-bottom-right-radius: 1.7rem;
   }
   
   .product-title {
     font-size: 1.13rem;
     font-weight: 600;
     color: #fff;
     margin-bottom: 0.5rem;
     letter-spacing: -0.01em;
   }
   
   .product-price {
     font-size: 1.18rem;
     font-weight: 700;
     color: var(--gold-primary);
     margin-bottom: 1.1rem;
   }
   
   .add-to-cart-btn {
     width: 100%;
     background: linear-gradient(90deg, var(--gold-primary) 60%, var(--gold-hover) 100%);
     color: #181818;
     font-weight: 700;
     border: none;
     border-radius: 1.5rem;
     padding: 1.1rem 0;
     font-size: 1.1rem;
     box-shadow: 0 4px 24px rgba(197, 160, 89, 0.2), 0 1.5px 0 #fff2;
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
     cursor: pointer;
     position: relative;
     overflow: hidden;
   }
   
   .add-to-cart-btn:active {
     background: linear-gradient(90deg, var(--gold-hover) 60%, var(--gold-primary) 100%);
     box-shadow: 0 8px 32px rgba(197, 160, 89, 0.6), 0 1.5px 0 #fff2;
   }
   
   .add-to-cart-btn .fa-shopping-cart {
     margin-right: 0.7rem;
   }
   
   .add-to-cart-btn::after {
     content: '';
     position: absolute;
     left: 50%;
     top: 50%;
     width: 0;
     height: 0;
     background: rgba(197, 160, 89, 0.18);
     border-radius: 50%;
     transform: translate(-50%, -50%);
     transition: width 0.4s cubic-bezier(.4,1.4,.6,1), height 0.4s cubic-bezier(.4,1.4,.6,1), opacity 0.4s;
     opacity: 0;
     z-index: 1;
   }
   
   .add-to-cart-btn:active::after {
     width: 180%;
     height: 400%;
     opacity: 1;
     transition: none;
   }
   
   /* Quick View Modal */
   .quick-view-modal {
     display: none;
     position: fixed;
     top: 0; left: 0; right: 0; bottom: 0;
     background: rgba(0,0,0,0.82);
     z-index: 9999;
     align-items: center;
     justify-content: center;
     animation: fadeInUp 0.5s cubic-bezier(.4,1.4,.6,1);
   }
   
   .quick-view-modal.open {
     display: flex;
   }
   
   .quick-view-content {
     background: rgba(18,18,18,0.96);
     border-radius: 1.5rem;
     box-shadow: 0 16px 70px rgba(0,0,0,0.35), 0 4px 18px rgba(197, 160, 89, 0.18);
     padding: 2rem;
     max-width: 880px;
     width: min(90vw, 860px);
     text-align: left;
     position: relative;
     max-height: 90vh;
     overflow-y: auto;
   }
   .quick-view-grid {
     display: grid;
     grid-template-columns: 1fr 1.05fr;
     gap: 1.75rem;
     align-items: start;
   }
   .quick-view-media {
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .quick-view-image-wrap {
     width: 100%;
     max-width: 360px;
     aspect-ratio: 1 / 1;
     background: #141414;
     border-radius: 1.5rem;
     padding: 1rem;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   .quick-view-img {
     width: 100%;
     max-height: 100%;
     object-fit: contain;
     border-radius: 1.2rem;
     box-shadow: 0 14px 36px rgba(0,0,0,0.35);
   }
   .quick-view-details {
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
   .quick-view-title {
     font-size: 1.8rem;
     font-weight: 800;
     color: #ffffff;
     margin-bottom: 0.25rem;
     line-height: 1.1;
   }
   .quick-view-price {
     font-size: 1.5rem;
     font-weight: 800;
     color: var(--gold-primary);
     margin-bottom: 0.35rem;
   }
   .quick-view-meta {
     color: #d4d4d4;
     font-size: 0.95rem;
     letter-spacing: 0.01em;
   }
   .quick-view-description {
     color: #cfcfcf;
     font-size: 1rem;
     line-height: 1.75;
     min-height: 5.5rem;
   }
   .quick-view-actions {
     display: flex;
     gap: 0.85rem;
     flex-wrap: wrap;
     margin-top: 0.5rem;
   }
   .quick-view-add-to-cart,
   .quick-view-view-product {
     border: none;
     border-radius: 999px;
     padding: 0.95rem 1.4rem;
     font-size: 0.98rem;
     font-weight: 700;
     cursor: pointer;
     transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
   }
   .quick-view-add-to-cart {
     background: linear-gradient(135deg, var(--gold-primary) 0%, var(--gold-hover) 100%);
     color: #121212;
     box-shadow: 0 12px 24px rgba(255,215,0,0.25);
   }
   .quick-view-add-to-cart:hover {
     transform: translateY(-1px);
     box-shadow: 0 16px 30px rgba(255,215,0,0.32);
   }
   .quick-view-view-product {
     background: rgba(255,255,255,0.08);
     color: #f5f5f5;
     border: 1px solid rgba(255,255,255,0.12);
   }
   .quick-view-view-product:hover {
     transform: translateY(-1px);
     background: rgba(255,255,255,0.12);
   }
   .quick-view-close {
     position: absolute;
     top: 1rem;
     right: 1rem;
     width: 3rem;
     height: 3rem;
     display: grid;
     place-items: center;
     background: rgba(255,255,255,0.06);
     border-radius: 50%;
     border: 1px solid rgba(255,255,255,0.16);
     color: var(--gold-primary);
     font-size: 1.55rem;
     cursor: pointer;
     transition: transform 0.2s ease, background-color 0.2s ease;
   }
   .quick-view-close:hover {
     transform: scale(1.05);
     background: rgba(255,255,255,0.12);
   }
   @media (max-width: 800px) {
     .quick-view-content {
       padding: 1.25rem;
       width: min(96vw, 520px);
     }
     .quick-view-grid {
       grid-template-columns: 1fr;
     }
     .quick-view-image-wrap {
       max-width: 100%;
       aspect-ratio: auto;
     }
     .quick-view-img {
       max-height: 320px;
     }
     .quick-view-title {
       font-size: 1.45rem;
     }
   }
   @media (max-width: 520px) {
     .quick-view-actions {
       flex-direction: column;
     }
     .quick-view-add-to-cart,
     .quick-view-view-product {
       width: 100%;
     }
   }
   
   .quick-view-close:hover {
     color: #fffbe6;
   }
   
   @media (max-width: 700px) {
     .product-card {
       min-width: 90vw;
       max-width: 98vw;
     }
     .product-image {
       height: 160px;
     }
     .quick-view-content {
       padding: 1.2rem 0.5rem 1.1rem 0.5rem;
       max-width: 98vw;
     }
     .quick-view-img {
       max-width: 98vw;
     }
   }
   
   /* Loading & Empty States */
   .loading-state, .empty-state {
     text-align: center;
     padding: var(--space-2xl) 0;
     color: var(--text-secondary);
   }
   
   .spinner {
     width: 40px;
     height: 40px;
     border: 3px solid var(--border);
     border-top: 3px solid var(--accent);
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto var(--space-md);
   }
   
   .empty-state i {
     font-size: 3rem;
     color: var(--text-muted);
     margin-bottom: var(--space-md);
   }
   
   /* Features Section */
   .features {
     padding: var(--space-2xl) 0;
     background: var(--primary);
   }
   
   /* --- Modernisation de la section features-grid et feature-card --- */
   .features-grid {
     display: flex;
     flex-wrap: nowrap;
     justify-content: center;
     align-items: stretch;
     gap: 2.2rem;
     margin-top: 2.5rem;
     overflow-x: auto;
     padding-bottom: 1.5rem;
   }
   
   .feature-card {
     background: #181818;
     border-radius: 18px;
     box-shadow: 0 2px 16px #00000022;
     padding: 2.2rem 1.6rem 1.6rem 1.6rem;
     min-width: 210px;
     max-width: 220px;
     flex: 0 0 210px;
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: transform 0.18s cubic-bezier(.4,1.4,.6,1), box-shadow 0.18s;
     cursor: pointer;
   }
   .feature-card:hover {
     transform: translateY(-8px) scale(1.03);
     box-shadow: 0 8px 32px rgba(197, 160, 89, 0.2), 0 2px 16px #00000022;
   }
   .feature-icon {
     background: var(--gold-primary);
     color: #181818;
     border-radius: 50%;
     width: 56px;
     height: 56px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 2rem;
     margin-bottom: 1.2rem;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.27);
   }
   .feature-card h3 {
     font-size: 1.18rem;
     font-weight: 700;
     margin-bottom: 0.7rem;
     text-align: center;
   }
   .feature-card p {
     color: #bdbdbd;
     font-size: 1rem;
     text-align: center;
     margin: 0;
   }
   
   @media (max-width: 1100px) {
     .feature-card {
       min-width: 180px;
       max-width: 200px;
       flex: 0 0 180px;
     }
   }
   @media (max-width: 900px) {
     .features-grid {
       flex-wrap: wrap;
       gap: 1.2rem;
       overflow-x: unset;
     }
     .feature-card {
       min-width: 160px;
       max-width: 100%;
       flex: 1 1 100%;
     }
   }
   @media (max-width: 600px) {
     .features-grid {
       flex-direction: column;
       align-items: center;
     }
     .feature-card {
       width: 100%;
       min-width: unset;
       max-width: 400px;
     }
   }
   
   .about {
     padding: var(--space-2xl) 0;
     background: var(--gradient-primary);
   }
   
   .about-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-2xl);
     align-items: center;
   }
   
   .about-text h2 {
     font-family: var(--font-display);
     font-size: 2.5rem;
     font-weight: 700;
     color: var(--text-primary);
     margin-bottom: var(--space-lg);
   }
   
   .about-text p {
     font-size: 1.125rem;
     color: var(--text-secondary);
     margin-bottom: var(--space-xl);
     line-height: 1.7;
   }
   
   .stats {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: var(--space-lg);
   }
   
   .stat {
     text-align: center;
   }
   
   .stat-number {
     display: block;
     font-size: 2rem;
     font-weight: 700;
     color: var(--accent);
   }
   
   .stat-label {
     font-size: 0.875rem;
     color: var(--text-secondary);
   }
   
   .about-visual {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   
   .about-image {
     font-size: 6rem;
     color: var(--accent);
     opacity: 0.8;
   }
   
   /* Contact Section */
   .contact {
     padding: var(--space-2xl) 0;
     background: var(--secondary);
   }
   
   .contact-content {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: var(--space-2xl);
   }
   
   .contact-info {
     display: flex;
     flex-direction: column;
     gap: var(--space-lg);
   }
   
   .contact-item {
     display: flex;
     align-items: center;
     gap: var(--space-md);
   }
   
   .contact-icon {
     width: 50px;
     height: 50px;
     background: var(--accent);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     color: var(--primary);
     font-size: 1.25rem;
   }
   
   .contact-details h4 {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: var(--space-xs);
   }
   
   .contact-details p {
     color: var(--text-secondary);
   }
   
   .contact-form {
     background: var(--primary);
     border: 1px solid var(--border);
     border-radius: var(--radius-lg);
     padding: var(--space-xl);
   }
   
   .contact-form h3 {
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: var(--space-lg);
   }
   
   .form-group {
     margin-bottom: var(--space-md);
   }
   
   .form-group label {
     display: block;
     font-weight: 500;
     color: var(--text-primary);
     margin-bottom: var(--space-xs);
   }
   
   .form-group input,
   .form-group textarea {
     width: 100%;
     background: var(--secondary);
     border: 1px solid var(--border);
     border-radius: var(--radius-md);
     padding: var(--space-sm);
     color: var(--text-primary);
     font-size: 0.9rem;
     transition: all var(--transition-normal);
   }
   
   .form-group input:focus,
   .form-group textarea:focus {

     border-color: var(--accent);
     box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.1);
   }
   
   /* Cart Drawer */
   .cart-drawer {
     position: fixed;
     top: 0;
     right: -400px;
     width: 400px;
     height: 100vh;
     background: var(--primary);
     border-left: 1px solid var(--border);
     transition: right var(--transition-normal);
     z-index: 1001;
     display: flex;
     flex-direction: column;
   }
   
   .cart-drawer.open {
     right: 0;
   }
   
   .cart-header {
     padding: var(--space-lg);
     border-bottom: 1px solid var(--border);
     display: flex;
     justify-content: space-between;
     align-items: center;
   }
   
   .cart-header h3 {
     display: flex;
     align-items: center;
     gap: var(--space-sm);
     font-weight: 600;
     color: var(--text-primary);
   }
   
   .close-cart {
     background: none;
     border: none;
     font-size: 1.25rem;
     cursor: pointer;
     color: var(--text-secondary);
     transition: color var(--transition-normal);
   }
   
   .close-cart:hover {
     color: var(--text-primary);
   }
   
   .cart-content {
     flex: 1;
     padding: var(--space-lg);
     overflow-y: auto;
   }
   
   .cart-footer {
     padding: var(--space-lg);
     border-top: 1px solid var(--border);
   }
   
   .cart-total {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: var(--space-md);
     font-weight: 600;
     font-size: 1.125rem;
     color: var(--text-primary);
   }
   
   .checkout-btn {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: var(--space-sm);
   }
   
   /* Cart Backdrop */
   .cart-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.5);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: all var(--transition-normal);
   }
   
   .cart-backdrop.open {
     opacity: 1;
     visibility: visible;
   }
   
   /* Cart Item Styles */
   .cart-item {
     display: flex;
     align-items: center;
     gap: 1rem;
     padding: 1rem;
     border-bottom: 1px solid var(--border);
     background: var(--primary);
     transition: background var(--transition-normal);
   }
   
   .cart-item:hover {
     background: var(--secondary);
   }
   
   .cart-item-img {
     flex-shrink: 0;
     width: 60px;
     height: 60px;
     border-radius: 0.5rem;
     overflow: hidden;
     background: var(--secondary);
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .cart-item-img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
     border-radius: 0.5rem;
   }
   
   .cart-item-info {
     flex: 1;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 0.5rem;
   }
   
   .cart-item-name {
     font-weight: 600;
     color: var(--text-primary);
     font-size: 0.95rem;
     line-height: 1.3;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
   
   .cart-item-price {
     font-weight: 700;
     color: var(--accent);
     font-size: 1.1rem;
   }
   
   .cart-item-qty {
     display: flex;
     align-items: center;
     gap: 0.5rem;
   }
   
   .qty-btn {
     background: var(--secondary);
     border: 1px solid var(--border);
     color: var(--text-primary);
     width: 24px;
     height: 24px;
     border-radius: 0.25rem;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 0.8rem;
     font-weight: 700;
     transition: all var(--transition-normal);
   }
   
   .qty-btn:hover {
     background: var(--accent);
     color: var(--primary);
     border-color: var(--accent);
   }
   
   .cart-item-remove {
     background: none;
     border: none;
     color: var(--text-secondary);
     font-size: 1.2rem;
     cursor: pointer;
     padding: 0.25rem;
     border-radius: 0.25rem;
     transition: color var(--transition-normal);
     flex-shrink: 0;
   }
   
   .cart-item-remove:hover {
     color: #ff4444;
   }
   
   /* Luxury Auth Modal Styles */
   .auth-modal {
     position: fixed;
     top: 50%; left: 50%;
     transform: translate(-50%, -50%);
     background: rgba(24, 24, 24, 0.98);
     border-radius: 2.2rem;
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.2), 0 2px 16px #000a;
     border: 2.5px solid var(--gold-primary);
     z-index: 1002;
     min-width: 340px;
     max-width: 95vw;
     width: 370px;
     padding: 2.5rem 2.2rem 2.1rem 2.2rem;
     display: none;
     flex-direction: column;
     gap: 1.7rem;
     animation: modalFadeIn 0.7s cubic-bezier(.4,1.4,.6,1) both;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s cubic-bezier(.4,1.4,.6,1);
   }
   .auth-modal.open {
     display: flex;
     opacity: 1;
     pointer-events: auto;
   }
   .auth-header h3 {
     font-size: 2.1rem;
     font-weight: 800;
     color: var(--gold-primary);
     letter-spacing: -1.2px;
     text-align: center;
     margin-bottom: 0.5em;
   }
   .auth-tabs {
     display: flex;
     justify-content: center;
     gap: 1.2em;
     margin-bottom: 1.2em;
   }
   .auth-tab {
     background: none;
     border: none;
     color: #fff;
     font-size: 1.1rem;
     font-weight: 700;
     padding: 0.7em 1.5em;
     border-radius: 2em;
     cursor: pointer;
     transition: background 0.18s, color 0.18s;
     position: relative;
   }
   .auth-tab.active {
     color: #181818;
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe0 100%);
     box-shadow: 0 0 16px rgba(197, 160, 89, 0.27);
   }
   .auth-form { display: none; flex-direction: column; gap: 1.1em; }
   .auth-form.active { display: flex; }
   .auth-form label { color: var(--gold-primary); font-weight: 600; font-size: 1.05em; margin-bottom: 0.1em; }
   .auth-form input {
     padding: 0.9em 1.1em;
     border-radius: 1.5em;
     border: 1.5px solid rgba(197, 160, 89, 0.6);
     background: rgba(255,255,255,0.07);
     color: #fff;
     font-size: 1.08em;
     font-weight: 500;
     transition: border 0.18s, box-shadow 0.18s;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.07);
   }
   .auth-form input:focus {
     border: 2px solid var(--gold-primary);
     box-shadow: 0 0 16px rgba(197, 160, 89, 0.33);
     background: rgba(255,255,255,0.13);
   }
   .btn-primary {
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe0 100%);
     color: #181818;
     font-weight: 800;
     border: none;
     border-radius: 2em;
     padding: 1em 0;
     font-size: 1.13em;
     box-shadow: 0 0 24px rgba(197, 160, 89, 0.33);
     margin-top: 0.7em;
     cursor: pointer;
     transition: background 0.18s, box-shadow 0.18s, color 0.18s;
     position: relative;
     overflow: hidden;
   }
   .btn-primary:hover, .btn-primary:focus {
     background: linear-gradient(90deg, #fffbe0 0%, var(--gold-primary) 100%);
     color: #181818;
     box-shadow: 0 0 32px rgba(197, 160, 89, 0.6), 0 2px 8px #fff2;
   }
   .close-auth {
     position: absolute;
     top: 1.1em; right: 1.1em;
     background: none;
     border: none;
     color: var(--gold-primary);
     font-size: 1.5em;
     cursor: pointer;
     z-index: 10;
     transition: color 0.18s;
   }
   .close-auth:hover { color: #fffbe0; }
   .auth-backdrop {
     position: fixed;
     inset: 0;
     background: rgba(24,24,24,0.82);
     z-index: 1001;
     display: none;
     opacity: 0;
     pointer-events: none;
     transition: opacity 0.35s cubic-bezier(.4,1.4,.6,1);
   }
   .auth-backdrop.open {
     display: block;
     opacity: 1;
     pointer-events: auto;
   }
   
   /* Auth Actions */
   .auth-actions {
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
     margin-top: 0.5rem;
   }
   
   .btn-forgot-password {
     background: none;
     border: none;
     color: var(--gold-primary);
     font-size: 0.9rem;
     text-decoration: underline;
     cursor: pointer;
     transition: color 0.2s;
     padding: 0.3rem 0;
   }
   
   .btn-forgot-password:hover {
     color: #ffa500;
   }
   
   /* Forgot Password Modal */
   .forgot-password-modal {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.9);
     background: #181818;
     border: 2px solid var(--gold-primary);
     border-radius: 1.2rem;
     padding: 2rem;
     min-width: 400px;
     max-width: 90vw;
     z-index: 1001;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 16px rgba(197, 160, 89, 0.13);
   }
   
   .forgot-password-modal.open {
     opacity: 1;
     visibility: visible;
     transform: translate(-50%, -50%) scale(1);
   }
   
   .forgot-password-header {
     text-align: center;
     margin-bottom: 1.5rem;
   }
   
   .forgot-password-header h3 {
     color: var(--gold-primary);
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 0.5rem;
   }
   
   .forgot-password-header p {
     color: #b0b0b0;
     font-size: 0.95rem;
   }
   
   .forgot-password-form {
     display: flex;
     flex-direction: column;
     gap: 1.1rem;
   }
   
   .close-forgot-password {
     position: absolute;
     top: 1rem;
     right: 1rem;
     background: none;
     border: none;
     color: var(--gold-primary);
     font-size: 1.5rem;
     cursor: pointer;
     transition: color 0.2s;
     width: 2rem;
     height: 2rem;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 50%;
   }
   
   .close-forgot-password:hover {
     color: #ffa500;
     background: rgba(197, 160, 89, 0.1);
   }
   
   .forgot-password-backdrop {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.8);
     z-index: 1000;
     opacity: 0;
     visibility: hidden;
     transition: all 0.3s ease;
   }
   
   .forgot-password-backdrop.open {
     opacity: 1;
     visibility: visible;
   }
   
   /* Logout Button Styles */
   .logout-btn {
     background: #ff6b6b;
     color: white;
     border: none;
     border-radius: 0.5rem;
     padding: 0.3rem 0.6rem;
     font-size: 0.8rem;
     cursor: pointer;
     transition: all 0.2s;
     margin-left: 0.5rem;
   }
   
   .logout-btn:hover {
     background: #ff5252;
     transform: scale(1.05);
   }
   
   /* User Profile Display */
   .auth-btn.user-logged-in {
     background: #232323;
     border-color: var(--gold-primary);
   }
   
   .auth-btn.user-logged-in span {
     color: var(--gold-primary);
     font-weight: 600;
   }
   @media (max-width: 480px) {
     .auth-modal { min-width: 90vw; padding: 1.2rem 0.5rem 1.1rem 0.5rem; }
     .auth-header h3 { font-size: 1.3rem; }
   }
   
   /* Footer */
   .footer {
     background: var(--primary);
     border-top: 1px solid var(--border);
     padding: var(--space-2xl) 0 var(--space-lg);
   }
   
   .footer-content {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: var(--space-xl);
     margin-bottom: var(--space-xl);
   }
   
   .footer-section h4 {
     font-weight: 600;
     color: var(--accent);
     margin-bottom: var(--space-md);
   }
   
   .footer-section p {
     color: var(--text-secondary);
     line-height: 1.6;
   }
   
   .footer-section ul {
     list-style: none;
   }
   
   .footer-section ul li {
     margin-bottom: var(--space-sm);
   }
   
   .footer-section ul li a {
     color: var(--text-secondary);
     text-decoration: none;
     transition: color var(--transition-normal);
   }
   
   .footer-section ul li a:hover {
     color: var(--accent);
   }
   
   .footer-bottom {
     text-align: center;
     padding-top: var(--space-lg);
     border-top: 1px solid var(--border);
     color: var(--text-muted);
   }
   
   /* Responsive Design */
   @media (max-width: 1200px) {
     .hero-container { flex-direction: column; gap: 2rem; min-height: 0; }
     .hero-glass-card { min-width: 0; max-width: 100%; padding: 2.2rem 1.2rem; }
     .hero-visual { min-width: 0; justify-content: center; margin-left: 0; }
     .luxury-car { width: 320px; height: 180px; }
     .hero-car-img { width: 220px; }
   }
   
   @media (max-width: 700px) {
     .hero-container { flex-direction: column; gap: 1.2rem; min-height: 0; }
     .hero-glass-card { margin: 0 auto; padding: 1.2rem 0.7rem; border-radius: 1.2rem; }
     .hero-content { text-align: center; }
     .hero-visual { margin: 0 auto; }
     .luxury-car { width: 180px; height: 90px; border-radius: 1.2rem; }
     .hero-car-img { width: 120px; border-radius: 0.7rem; }
     .luxury-car::before { display: none; }
   }
   
   @media (max-width: 1024px) {
     .hero-container {
       grid-template-columns: 1fr;
       text-align: center;
     }
     
     .about-content {
       grid-template-columns: 1fr;
       text-align: center;
     }
     
     .contact-content {
       grid-template-columns: 1fr;
     }
     
     .cart-drawer {
       width: 100%;
       right: -100%;
     }
     .bg-hero-car {
       padding-left: 4vw;
       min-height: 60vh;
       background-position: center center;
     }
     .bg-hero-car .hero-content-left {
       max-width: 90vw;
     }
}
   
   @media (max-width: 768px) {
     /* ==========================================================
        PREMIUM E-COMMERCE MOBILE LAYOUT (Shein/Amazon style)
        ========================================================== */

     /* ===== GLOBAL RESETS ===== */
     body, html {
       overflow-x: hidden;
     }
     
     .container {
       padding: 0 0.75rem;
       max-width: 100vw;
       box-sizing: border-box;
     }

     /* ===== HEADER: Ultra-compact, single row ===== */
     .header {
       position: sticky;
       top: 0;
       z-index: 100;
     }

     .header-container {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       padding: 0.5rem 0.75rem;
       flex-wrap: nowrap;
     }
     
     .logo {
       flex-shrink: 0;
     }
     
     .logo i {
       font-size: 1.2rem;
     }
     
     .logo span {
       font-size: 1.1rem;
     }

     .search-container {
       flex: 1;
       max-width: none;
       order: 0;
     }
     
     .search-bar {
       border-radius: 1.5rem;
     }
     
     .search-bar input {
       font-size: 0.8rem;
       padding: 0.55rem 0.75rem;
     }
     
     .search-btn {
       padding: 0.55rem 0.85rem;
       font-size: 0.85rem;
     }

     /* Hide header action buttons — replaced by bottom nav */
     .header-actions {
       display: none !important;
     }

     /* ===== NAV: Hidden on mobile — bottom nav replaces it ===== */
     .nav {
       display: none !important;
     }

     /* ===== BOTTOM NAVIGATION BAR (App-style) ===== */
     .mobile-bottom-nav {
       display: flex !important;
       position: fixed;
       bottom: 0;
       left: 0;
       right: 0;
       z-index: 9999;
       background: rgba(17, 17, 17, 0.98);
       border-top: 1px solid rgba(197, 160, 89, 0.15);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       padding: 0.4rem 0;
       padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
       justify-content: space-around;
       align-items: center;
     }
     
     .mobile-bottom-nav .bottom-nav-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 0.15rem;
       padding: 0.3rem 0.5rem;
       color: #888;
       font-size: 0.65rem;
       font-weight: 600;
       text-decoration: none;
       transition: color 0.2s;
       position: relative;
       background: none;
       border: none;
       cursor: pointer;
       font-family: var(--font-primary);
       min-width: 48px;
       min-height: 44px;
       justify-content: center;
     }
     
     .mobile-bottom-nav .bottom-nav-item i {
       font-size: 1.15rem;
     }
     
     .mobile-bottom-nav .bottom-nav-item.active,
     .mobile-bottom-nav .bottom-nav-item:hover {
       color: var(--gold-primary);
     }
     
     .mobile-bottom-nav .bottom-nav-badge {
       position: absolute;
       top: 2px;
       right: 4px;
       background: var(--gold-primary);
       color: #111;
       font-size: 0.6rem;
       font-weight: 800;
       min-width: 16px;
       height: 16px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       justify-content: center;
       line-height: 1;
     }

     /* Add padding at page bottom so content isn't hidden behind bottom nav */
     body {
       padding-bottom: 60px;
     }

     /* ===== HERO: Slim banner, not half the screen ===== */
     .hero-section, .luxury-hero {
       min-height: auto !important;
     }
     
     .bg-hero-car {
       min-height: 35vh !important;
       padding: 0 !important;
       background-position: center center;
       background-size: cover;
     }
     
     .bg-hero-car .hero-content-left {
       padding: 1.5rem 1rem;
       max-width: 100%;
     }
     
     .hero-title {
       font-size: 1.6rem !important;
       line-height: 1.2;
       margin-bottom: 0.5rem;
     }
     
     .title-accent {
       font-size: inherit;
     }
     
     .hero-description {
       font-size: 0.85rem !important;
       line-height: 1.4;
       margin-bottom: 1rem;
       opacity: 0.9;
     }
     
     .hero-buttons {
       flex-direction: row;
       width: 100%;
     }
     
     .hero-buttons .btn-primary,
     .hero-buttons .btn-secondary,
     .hero-buttons a.btn-primary {
       width: 100%;
       justify-content: center;
       text-align: center;
       padding: 0.7rem 1rem;
       font-size: 0.9rem;
       min-height: 44px;
       border-radius: 1.5rem;
     }

     /* ===== SECTIONS ===== */
     .section-header {
       padding: 0 0.25rem;
       margin-bottom: 0.75rem;
     }
     
     .section-title {
       font-size: 1.25rem !important;
       margin-bottom: 0.25rem;
     }
     
     .section-subtitle {
       font-size: 0.8rem;
     }
     
     .products {
       padding: 1rem 0;
     }

     /* ===== FILTER TABS: Horizontal scroll chips ===== */
     .filter-tabs {
       display: flex;
       flex-wrap: nowrap;
       overflow-x: auto;
       -ms-overflow-style: none;
       scrollbar-width: none;
       gap: 0.4rem;
       padding: 0 0.25rem 0.5rem 0.25rem;
       margin-bottom: 0.5rem;
     }
     
     .filter-tabs::-webkit-scrollbar {
       display: none;
     }
     
     .filter-tab {
       flex-shrink: 0;
       white-space: nowrap;
       padding: 0.4rem 0.85rem;
       font-size: 0.78rem;
       min-height: 32px;
       border-radius: 2rem;
     }

     /* ===== PRODUCTS: 2-column grid (like Shein/Amazon) ===== */
     /* ===== PRODUCTS: 2-column grid (like Shein/Amazon) ===== */
     .products-grid {
       grid-template-columns: repeat(2, 1fr) !important;
       gap: 0.4rem;
       padding: 0;
     }
     
     .product-card.luxury-card {
       border-radius: 0.5rem;
       padding-bottom: 0.4rem;
     }
     
     .product-card .product-image.luxury-image {
       min-height: 140px;
       border-bottom: none;
     }
     
     .carousel-container,
     .carousel-track {
       height: 140px;
     }
     
     .carousel-img {
       max-height: 130px;
       max-width: 90%;
     }
     
     .product-card .product-info {
       padding: 0.4rem 0.5rem 0 0.5rem;
       position: relative;
     }
     
     .product-card .product-title,
     .product-card .product-name,
     .product-card h3 {
       font-size: 0.75rem !important;
       line-height: 1.25 !important;
       margin-bottom: 0.2rem !important;
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
       font-weight: 400;
     }
     
     .product-card .product-price-container {
       margin-bottom: 0 !important;
       display: flex;
       align-items: center;
       justify-content: flex-start;
       gap: 0.4rem;
     }
     
     .product-card .product-price {
       font-size: 0.95rem !important;
       font-weight: 800 !important;
       margin-bottom: 0 !important;
       color: var(--text-primary);
     }
     
     .product-card .quick-view-btn {
       display: none !important;
     }
     
     .product-card .add-to-cart-btn {
       position: absolute;
       bottom: -2px;
       right: 0.4rem;
       width: 32px !important;
       height: 32px !important;
       min-width: 32px !important;
       min-height: 32px !important;
       border-radius: 50% !important;
       padding: 0 !important;
       display: flex;
       align-items: center;
       justify-content: center;
       background: var(--gold-primary);
       color: #111;
     }
     
     .product-card .add-to-cart-btn span {
       display: none !important;
     }
     
     .product-card .add-to-cart-btn i {
       font-size: 0.8rem;
       margin: 0;
     }
     
     /* Hide carousel nav arrows on mobile (use swipe) */
     .carousel-nav {
       display: none;
       display: none !important;
     }
     
     .carousel-dot {
       width: 5px;
       height: 5px;
     }
     
     /* Wishlist heart */
     .product-card .wishlist-btn {
       top: 6px;
       right: 6px;
       width: 28px;
       height: 28px;
     }
     .product-card .wishlist-btn i {
       font-size: 0.9rem;
     }

     /* ===== FEATURES: 2-column grid ===== */
     .features-grid {
       grid-template-columns: repeat(2, 1fr);
       gap: 0.6rem;
     }
     
     .feature-card {
       padding: 1rem;
       border-radius: 0.75rem;
     }
     
     .feature-icon {
       width: 40px;
       height: 40px;
       margin-bottom: 0.5rem;
     }
     
     .feature-icon i {
       font-size: 1.1rem;
     }
     
     .feature-card h3 {
       font-size: 0.85rem;
       margin-bottom: 0.3rem;
     }
     
     .feature-card p {
       font-size: 0.75rem;
       line-height: 1.3;
     }

     /* ===== ABOUT: Stack, hide broken image ===== */
     .about {
       padding: 2rem 0;
     }
     
     .about-content {
       grid-template-columns: 1fr;
       text-align: center;
       gap: 1.5rem;
     }
     
     .about-text h2 {
       font-size: 1.25rem;
     }
     
     .about-text p {
       font-size: 0.85rem;
     }

     .stats {
       grid-template-columns: 1fr 1fr;
       gap: 0.75rem;
     }
     
     .stat-number {
       font-size: 1.2rem;
     }
     
     .stat-label {
       font-size: 0.75rem;
     }
     
     .about-visual {
       display: none;
     }

     /* ===== CONTACT: Stack ===== */
     .contact {
       padding: 2rem 0;
     }
     
     .contact-content {
       grid-template-columns: 1fr;
       gap: 1.5rem;
     }

     /* ===== FOOTER: Stack ===== */
     .footer-content {
       grid-template-columns: 1fr 1fr;
       text-align: left;
       gap: 1.5rem;
     }

     /* ===== SCROLL TO TOP: Adjust for bottom nav ===== */
     #scroll-top, .scroll-top {
       bottom: 70px !important;
     }
   }
   
   @media (max-width: 420px) {
     .logo span {
       display: none;
     }
     
     .hero-title {
       font-size: 1.35rem !important;
     }
     
     .hero-description {
       font-size: 0.8rem !important;
     }
     
     .section-title {
       font-size: 1.1rem !important;
     }
     
     .products-grid {
       gap: 0.4rem;
     }
     
     .product-card .product-image.luxury-image {
       min-height: 130px;
     }
     
     .carousel-container, .carousel-track {
       height: 130px;
     }
     
     .feature-card h3 {
       font-size: 0.78rem;
     }
     
     .feature-card p {
       font-size: 0.7rem;
     }
     
     .footer-content {
       grid-template-columns: 1fr;
       text-align: center;
     }
     
     .stats {
       grid-template-columns: 1fr;
     }
   }
   
   /* Hide bottom nav on desktop */
   .mobile-bottom-nav {
     display: none;
   }
   
   /* Utility Classes */
   .hidden {
     display: none !important;
   }
   
   .visually-hidden {
     position: absolute;
     width: 1px;
     height: 1px;
     padding: 0;
     margin: -1px;
     overflow: hidden;
     clip: rect(0, 0, 0, 0);
     white-space: nowrap;
     border: 0;
   }
   
   /* --- Luxury Hero Section Upgrades --- */
   .luxury-hero-flex {
     display: flex;
     align-items: stretch;
     justify-content: space-between;
     gap: 3.5rem;
     max-width: 1400px;
     margin: 0 auto;
     padding: 4.5rem 2rem 3.5rem 2rem;
     min-height: 80vh;
     z-index: 2;
   }
   .hero-left {
     flex: 0 1 48%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     min-width: 340px;
     z-index: 2;
   }
   .hero-right {
     flex: 0 1 52%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     min-width: 340px;
     z-index: 2;
   }
   .hero-image-card {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgba(24,24,24,0.45);
     border-radius: 2.5rem;
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.13), 0 1.5px 0 #fff2;
     backdrop-filter: blur(14px) saturate(1.2);
     padding: 2.5rem 2.5rem 2.5rem 2.5rem;
     min-width: 0;
     max-width: 90vw;
     width: 100%;
     min-height: 320px;
     overflow: visible;
   }
   .gold-glow {
     box-shadow: 0 0 32px 8px rgba(197, 160, 89, 0.33), 0 8px 48px rgba(197, 160, 89, 0.13), 0 1.5px 0 #fff2 !important;
     border: 1.5px solid rgba(197, 160, 89, 0.27);
   }
   .glass-card {
     background: rgba(24,24,24,0.35);
     backdrop-filter: blur(10px) saturate(1.2);
   }
   .btn-glow {
     box-shadow: 0 0 16px 2px rgba(197, 160, 89, 0.53), 0 4px 24px rgba(197, 160, 89, 0.2);
     border: 2.5px solid var(--gold-primary);
     position: relative;
     overflow: hidden;
   }
   .btn-glow:hover {
     box-shadow: 0 0 32px 8px rgba(197, 160, 89, 0.8), 0 8px 48px rgba(197, 160, 89, 0.6);
     border: 2.5px solid #fffbe6;
   }
   .arrow-animate {
     display: inline-block;
     margin-left: 0.7rem;
     transition: transform 0.3s cubic-bezier(.4,1.4,.6,1);
   }
   .btn-primary:hover .arrow-animate {
     transform: translateX(10px) scale(1.1);
   }
   /* Remove floating icons and .luxury-car styles from hero */
   .luxury-car, .luxury-car::before { display: none !important; }
   /* Bugatti image styling */
   .hero-car-img {
     width: 100%;
     height: auto;
     border-radius: 2.2rem;
     box-shadow: 0 12px 64px #000a, 0 0 0 18px rgba(197, 160, 89, 0.13);
     filter: drop-shadow(0 8px 32px rgba(197, 160, 89, 0.33)) drop-shadow(0 2px 8px #0008);
     background: rgba(255,255,255,0.05);
     animation: car-float 2.5s cubic-bezier(.4,1.4,.6,1) 0.4s both;
   }
   /* Responsive adjustments for new hero layout */
   @media (max-width: 1200px) {
     .luxury-hero-flex { flex-direction: column; gap: 2rem; min-height: 0; }
     .hero-left, .hero-right { min-width: 0; max-width: 100%; justify-content: center; }
     .hero-image-card { min-width: 0; max-width: 100%; padding: 2.2rem 1.2rem; }
     .hero-car-img { max-width: 340px; }
   }
   @media (max-width: 700px) {
     .luxury-hero-flex { flex-direction: column; gap: 1.2rem; min-height: 0; }
     .hero-left, .hero-right { min-width: 0; max-width: 100%; justify-content: center; }
     .hero-image-card { margin: 0 auto; padding: 1.2rem 0.7rem; border-radius: 1.2rem; }
     .hero-content { text-align: center; }
     .hero-car-img { max-width: 180px; border-radius: 0.7rem; }
   }
   /* Luxury animated background for hero */
   .luxury-hero-bg {
     background: linear-gradient(120deg, #181818 60%, #232323 100%);
     position: relative;
     overflow: hidden;
   }
   .luxury-hero-bg::before {
     content: '';
     position: absolute;
     inset: 0;
     z-index: 0;
     background: radial-gradient(circle at 70% 40%, rgba(197, 160, 89, 0.2) 0%, #181818 80%),
                 linear-gradient(120deg, #181818 60%, #232323 100%);
     opacity: 0.8;
     pointer-events: none;
     animation: hero-bg-move 12s linear infinite alternate;
   }
   
   /* Hero Badges */
   .badge {
     display: inline-flex;
     align-items: center;
     font-size: 1.05rem;
     font-weight: 500;
     padding: 0.38em 1em 0.38em 0.8em;
     border-radius: 2em;
     background: rgba(197, 160, 89, 0.08);
     color: #fff;
     box-shadow: 0 2px 12px 0 rgba(197, 160, 89, 0.08);
     gap: 0.5em;
     letter-spacing: 0.01em;
   }
   .badge-premium {
     border: 1.5px solid var(--gold-primary);
   }
   .badge-refund {
     border: 1.5px solid var(--gold-primary);
   }
   .gold-icon {
     color: var(--gold-primary);
     font-size: 1.15em;
     margin-right: 0.4em;
   }
   /* Remove border/glass from hero text card */
   .hero-left .hero-glass-card, .hero-left .glass-card, .hero-left .gold-glow {
     background: none !important;
     box-shadow: none !important;
     border: none !important;
     padding: 0 !important;
   }
   .hero-content {
     background: none !important;
     box-shadow: none !important;
     border: none !important;
     padding-left: 0 !important;
   }
   /* Shift hero text left */
   .hero-left {
     align-items: flex-start !important;
     justify-content: center !important;
     padding-left: 2vw !important;
   }
   /* Make car image smaller and premium */
   .hero-car-img {
     width: 350px !important;
     max-width: 40vw !important;
     height: auto !important;
     border-radius: 2rem !important;
     box-shadow: 0 0 60px 0 rgba(255, 200, 0, 0.18) !important;
   }
   .hero-image-card {
     background: none !important;
     box-shadow: none !important;
     padding: 0 !important;
   }
   
   /* Hero layout adjustments for more left-aligned and vertically centered text, larger car image */
   .hero-container.luxury-hero-flex {
     align-items: center !important;
     min-height: 480px;
   }
   .hero-left {
     align-items: flex-start !important;
     justify-content: center !important;
     padding-left: 8vw !important;
     padding-top: 0 !important;
     height: 100% !important;
   }
   .hero-content {
     margin-top: 0 !important;
     display: flex !important;
     flex-direction: column !important;
     justify-content: center !important;
     height: 100% !important;
   }
   .hero-right {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     height: 100% !important;
   }
   .hero-image-card {
     display: flex !important;
     align-items: center !important;
     height: 100% !important;
   }
   
   /* --- New Premium Hero Section --- */
   .hero-section {
     width: 100vw;
     min-height: 80vh;
     display: flex;
     align-items: stretch;
     justify-content: center;
     background: linear-gradient(120deg, #181818 60%, #23210f 100%);
     position: relative;
     overflow: hidden;
   }
   .hero-content-left {
     flex: 1 1 0;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: flex-start;
     padding: 0 0 0 7vw;
     max-width: 650px;
     min-width: 320px;
     z-index: 2;
     animation: fadeInUp 1.1s cubic-bezier(.4,1.4,.6,1) 0.1s both;
   }
   .premium-badge {
     display: flex;
     align-items: center;
     gap: 0.5em;
     background: rgba(253,224,47,0.09);
     color: var(--gold-primary);
     font-weight: 600;
     font-size: 1.05rem;
     border-radius: 1.5em;
     padding: 0.32em 1.1em 0.32em 0.9em;
     margin-bottom: 1.2em;
     box-shadow: 0 2px 16px 0 rgba(253,224,47,0.08);
   }
   .hero-headline {
     font-family: 'Inter', 'Space Grotesk', sans-serif;
     font-size: 3.2rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.08;
     margin-bottom: 0.7em;
     letter-spacing: -0.01em;
   }
   .hero-headline span {
     color: var(--gold-primary);
     text-shadow: 0 2px 16px rgba(197, 160, 89, 0.27);
   }
   .hero-desc {
     font-size: 1.18rem;
     color: #eaeaea;
     font-weight: 400;
     margin-bottom: 2.2em;
     max-width: 420px;
     line-height: 1.5;
   }
   .hero-cta-row {
     display: flex;
     gap: 1.2em;
   }
   .btn-hero-primary {
     background: var(--gold-primary);
     color: #0f0f0f;
     font-weight: 700;
     font-size: 1.13rem;
     border-radius: 2.2em;
     padding: 0.95em 2.3em;
     box-shadow: 0 4px 32px rgba(197, 160, 89, 0.33), 0 1.5px 0 #fff1 inset;
     transition: box-shadow 0.18s, transform 0.18s;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 0.7em;
     filter: drop-shadow(0 2px 12px rgba(197, 160, 89, 0.27));
     border: none;
     cursor: pointer;
     animation: fadeInUp 1.2s cubic-bezier(.4,1.4,.6,1) 0.3s both;
   }
   .btn-hero-primary:hover {
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.6), 0 1.5px 0 #fff1 inset;
     transform: translateY(-2px) scale(1.03);
   }
   .btn-hero-secondary {
     background: transparent;
     color: var(--gold-primary);
     font-weight: 700;
     font-size: 1.13rem;
     border: 2px solid var(--gold-primary);
     border-radius: 2.2em;
     padding: 0.95em 2.3em;
     box-shadow: 0 2px 16px rgba(197, 160, 89, 0.13);
     transition: box-shadow 0.18s, transform 0.18s;
     text-decoration: none;
     display: flex;
     align-items: center;
     gap: 0.7em;
     filter: drop-shadow(0 2px 12px rgba(197, 160, 89, 0.13));
     cursor: pointer;
     animation: fadeInUp 1.2s cubic-bezier(.4,1.4,.6,1) 0.4s both;
   }
   .btn-hero-secondary:hover {
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.33);
     background: rgba(253,224,47,0.08);
     transform: translateY(-2px) scale(1.03);
   }
   .hero-image-right {
     flex: 1 1 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     min-width: 320px;
     position: relative;
     z-index: 1;
     animation: fadeInRight 1.1s cubic-bezier(.4,1.4,.6,1) 0.2s both;
   }
   .hero-main-img {
     width: 92%;
     max-width: 600px;
     min-width: 260px;
     height: 78vh;
     max-height: 600px;
     min-height: 320px;
     object-fit: cover;
     border-radius: 2.5rem;
     box-shadow: 0 0 80px 0 rgba(197, 160, 89, 0.2), 0 8px 32px 0 #000a;
     background: rgba(255,255,255,0.04);
     filter: brightness(1.04) contrast(1.08);
     margin-right: -12vw;
   }
   @media (max-width: 1100px) {
     .hero-section {
       flex-direction: column;
       min-height: 100vh;
       padding: 0 0 2em 0;
     }
     .hero-content-left {
       max-width: 100vw;
       padding: 4vw 6vw 0 6vw;
     align-items: center;
       text-align: center;
     }
     .hero-image-right {
       justify-content: center;
       margin-top: 2em;
       margin-bottom: 1em;
     }
     .hero-main-img {
       width: 98vw;
       max-width: 98vw;
       min-width: 180px;
       height: 44vh;
       max-height: 340px;
       min-height: 180px;
       margin: 0 auto;
     }
   }
   @media (max-width: 700px) {
     .hero-section {
       min-height: 80vh;
       padding: 0 0 1em 0;
     }
     .hero-content-left {
       padding: 4vw 2vw 0 2vw;
       font-size: 0.98em;
     }
     .hero-headline {
       font-size: 2.1rem;
     }
     .hero-main-img {
       border-radius: 1.2rem;
       height: 32vh;
       max-height: 180px;
       min-height: 120px;
     }
   }
   /* Entry Animations */
   @keyframes fadeInUp {
     from { opacity: 0; transform: translateY(32px); }
     to { opacity: 1; transform: none; }
   }
   @keyframes fadeInRight {
     from { opacity: 0; transform: translateX(48px); }
     to { opacity: 1; transform: none; }
   }
   @media (max-width: 900px) {
     .hero-main-img {
       margin-right: 0 !important;
     }
   }
   
   /* Hero section with car background */
   .bg-hero-car {
     position: relative;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     min-height: 80vh;
     padding-left: 7vw;
     background:
       linear-gradient(90deg, rgba(24,24,24,0.75) 0%, rgba(24,24,24,0.55) 40%, rgba(24,24,24,0.08) 80%, rgba(24,24,24,0.0) 100%),
       url('https://res.cloudinary.com/dw75elc2a/image/upload/w_1200,q_auto/v1753881089/hero/bugatti-chiron.jpg') right center/cover no-repeat;
     overflow: hidden;
   }
   .bg-hero-car::after {
     content: "";
     position: absolute;
     right: 0;
       top: 0;
     width: 40vw;
     height: 100%;
     background: radial-gradient(circle at 80% 50%, rgba(197, 160, 89, 0.2) 0%, transparent 80%);
     pointer-events: none;
     z-index: 1;
   }
   .bg-hero-car .hero-content-left {
     position: relative;
     z-index: 2;
   }
   /* Remove old hero image styles if present */
   .hero-image-right, .hero-image-wrapper, .hero-main-img, .hero-image-bg-glow {
     display: none !important;
   }
   

   .favorites-modal-content {
     max-width: 520px;
     width: 95vw;
     max-height: 80vh;
     padding: 2.5rem 2.5rem 2rem 2.5rem;
     border-radius: 2rem;
     background: rgba(24,24,24,0.98);
     box-shadow: 0 8px 48px rgba(197, 160, 89, 0.33), 0 2px 16px #fffbe6aa;
     display: flex;
     flex-direction: column;
     align-items: stretch;
     overflow: hidden;
   }
   .favorites-list {
     display: flex;
     flex-direction: column;
     gap: 1.2rem;
     max-height: calc(80vh - 120px);
     overflow-y: auto;
     margin-top: 0.5rem;
     padding-right: 0.5rem;
     scrollbar-width: thin;
     scrollbar-color: var(--gold-primary) #181818;
   }
   .favorites-list::-webkit-scrollbar {
     width: 6px;
   }
   .favorites-list::-webkit-scrollbar-track {
     background: #181818;
     border-radius: 3px;
   }
   .favorites-list::-webkit-scrollbar-thumb {
     background: var(--gold-primary);
     border-radius: 3px;
   }
   .favorites-list::-webkit-scrollbar-thumb:hover {
     background: #ffed4e;
   }
   .favorite-item {
     display: flex;
     align-items: center;
     gap: 1.1rem;
     background: rgba(24,24,24,0.85);
     border-radius: 1.2rem;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.13);
     padding: 0.7rem 1.2rem;
     cursor: pointer;
     transition: box-shadow 0.2s, background 0.2s;

     position: relative;
   }
   .favorite-item:hover, .favorite-item:focus {
     box-shadow: 0 4px 24px rgba(197, 160, 89, 0.33), 0 2px 16px #fffbe6aa;
     background: rgba(24,24,24,0.98);
   }
   .favorite-img {
     width: 54px;
     height: 54px;
     border-radius: 1rem;
     background: #181818;
     display: flex;
     align-items: center;
     justify-content: center;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
   }
   .favorite-img img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     border-radius: 1rem;
   }
   .favorite-info {
     flex: 1;
     display: flex;
     flex-direction: column;
     gap: 0.2rem;
   }
   .favorite-title {
     font-size: 1.08rem;
     font-weight: 600;
     color: #fff;
   }
   .favorite-price {
     font-size: 1.05rem;
     font-weight: 700;
     color: var(--gold-primary);
   }
   
   .favorite-remove-btn {
     position: absolute;
     right: 1rem;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(231, 76, 60, 0.8);
     border: none;
     color: white;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.3s ease;
     opacity: 0;
     z-index: 10;
   }
   
   .favorite-item:hover .favorite-remove-btn {
     opacity: 1;
   }
   
   .favorite-remove-btn:hover {
     background: rgba(231, 76, 60, 1);
     transform: translateY(-50%) scale(1.1);
   }
   .empty-favorites {
     text-align: center;
     color: var(--gold-primary);
     font-size: 1.2rem;
     margin: 2.5rem 0 1.5rem 0;
   }
   .empty-favorites i {
     font-size: 2.2rem;
     margin-bottom: 0.7rem;
     color: #ff3b3b;
   }
   .favorites-counter {
     color: var(--gold-primary);
     font-size: 0.9rem;
     margin-bottom: 1rem;
     text-align: center;
     font-weight: 600;
     padding: 0.5rem;
     background: rgba(197, 160, 89, 0.1);
     border-radius: 0.8rem;
     border: 1px solid rgba(197, 160, 89, 0.2);
   }
   .highlight-product {
     box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.8), 0 8px 32px rgba(197, 160, 89, 0.33) !important;
     transition: box-shadow 0.4s;
     z-index: 10;
   }
   @media (max-width: 700px) {
     .favorites-modal-content {
       padding: 1.2rem 0.5rem 1.1rem 0.5rem;
       max-width: 98vw;
     }
     .favorite-img {
       width: 38px;
       height: 38px;
     }
   }
   
   /* Luxury Product Card Carousel & Premium Effects */
   .product-card.luxury-card {
     background: rgba(30, 30, 40, 0.82);
     border-radius: 1.2rem;
     box-shadow: 0 4px 32px 0 #000a, 0 0 0 2px rgba(197, 160, 89, 0.27);
     border: 1.5px solid rgba(197, 160, 89, 0.18);
     transition: box-shadow 0.25s cubic-bezier(.4,1.4,.6,1), transform 0.18s cubic-bezier(.4,1.4,.6,1);
     overflow: hidden;
     position: relative;

   }
   .product-card.luxury-card:focus,
   .product-card.luxury-card:hover {
     box-shadow: 0 8px 48px 0 #000c, 0 0 0 3px var(--gold-primary), 0 0 16px 2px rgba(197, 160, 89, 0.6);
     transform: translateY(-4px) scale(1.025);
     z-index: 2;
   }
   .product-card .product-image.luxury-image {
     background: linear-gradient(120deg, #23232b 60%, #1a1a22 100%);
     min-height: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
     cursor: pointer;
     border-bottom: 1px solid rgba(197, 160, 89, 0.13);
     overflow: hidden;
   }
   .carousel-container {
     width: 100%;
     height: 220px;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;

   }
   .carousel-track {
     width: 100%;
     height: 220px;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.22s cubic-bezier(.4,1.4,.6,1);
   }
   .carousel-img {
     max-width: 92%;
     max-height: 200px;
     border-radius: 0.7rem;
     box-shadow: 0 2px 16px #0006;
     object-fit: contain;
     background: #18181c;
     transition: box-shadow 0.18s, filter 0.18s;
   }
   .carousel-placeholder {
     font-size: 3.2rem;
     color: rgba(197, 160, 89, 0.33);
   }
   .carousel-indicators {
     position: absolute;
     bottom: 12px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     gap: 0.4em;
     z-index: 2;
   }
   .carousel-dot {
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: rgba(197, 160, 89, 0.33);
     border: none;

     cursor: pointer;
     transition: background 0.18s;
     box-shadow: 0 0 0 1.5px rgba(197, 160, 89, 0.2);
   }
   .carousel-dot.active,
   .carousel-dot:focus {
     background: var(--gold-primary);
     box-shadow: 0 0 0 2.5px rgba(197, 160, 89, 0.6);
   }
   .carousel-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     background: rgba(30,30,40,0.82);
     border: 1.5px solid rgba(197, 160, 89, 0.33);
     color: var(--gold-primary);
     border-radius: 50%;
     width: 32px;
     height: 32px;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     z-index: 3;
     font-size: 1.1rem;
     transition: background 0.18s, box-shadow 0.18s;
   }
   .carousel-nav.prev { left: 10px; }
   .carousel-nav.next { right: 10px; }
   .carousel-nav:hover, .carousel-nav:focus {
     background: var(--gold-primary);
     color: #18181c;
     box-shadow: 0 0 0 2.5px rgba(197, 160, 89, 0.6);
   }
   
   /* Wishlist Heart Animation */
   .wishlist-btn {
     position: absolute;
     top: 16px;
     right: 16px;
     background: rgba(30,30,40,0.82);
     border: 1.5px solid rgba(197, 160, 89, 0.2);
     border-radius: 50%;
     color: var(--gold-primary);
     width: 38px;
     height: 38px;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.3rem;
     cursor: pointer;
     z-index: 4;
     transition: background 0.18s, box-shadow 0.18s;
   }
   .wishlist-btn.active {
     background: var(--gold-primary);
     color: #18181c;
     box-shadow: 0 0 0 3px rgba(197, 160, 89, 0.6);
   }
   .wishlist-btn.wishlist-animate {
     animation: wishlist-bounce 0.35s cubic-bezier(.4,1.4,.6,1);
   }
   @keyframes wishlist-bounce {
     0% { transform: scale(1); }
     30% { transform: scale(1.25); }
     60% { transform: scale(0.92); }
     100% { transform: scale(1); }
   }
   
   /* Add-to-cart Button Feedback */
   .add-to-cart-btn {
     background: var(--gold-primary);
     color: #18181c;
     border: none;
     border-radius: 0.7rem;
     font-weight: 700;
     font-size: 1.08rem;
     padding: 0.7em 1.2em;
     margin: 1em 0 0.5em 0;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.2);
     cursor: pointer;
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
     display: flex;
     align-items: center;
     gap: 0.7em;
   }
   .add-to-cart-btn:hover, .add-to-cart-btn:focus {
     background: #fffbe6;
     color: #bfa100;
     box-shadow: 0 4px 24px rgba(197, 160, 89, 0.33);
   }
   .add-to-cart-btn.added {
     background: #10b981;
     color: #fff;
     box-shadow: 0 0 0 2.5px #10b98199;
     animation: cart-btn-bounce 0.5s cubic-bezier(.4,1.4,.6,1);
   }
   @keyframes cart-btn-bounce {
     0% { transform: scale(1); }
     30% { transform: scale(1.13); }
     60% { transform: scale(0.97); }
     100% { transform: scale(1); }
   }
   
   /* Toast Notification */
   .atlascle-toast {
     position: fixed;
     bottom: 38px;
     left: 50%;
     transform: translateX(-50%) scale(0.98);
     background: rgba(30,30,40,0.98);
     color: var(--gold-primary);
     font-weight: 700;
     font-size: 1.08rem;
     padding: 0.9em 2.2em;
     border-radius: 1.2em;
     box-shadow: 0 4px 32px rgba(197, 160, 89, 0.2), 0 0 0 2.5px rgba(197, 160, 89, 0.6);
     opacity: 0;
     pointer-events: none;
     z-index: 9999;
     transition: opacity 0.22s, transform 0.22s;
   }
   .atlascle-toast.show {
     opacity: 1;
     transform: translateX(-50%) scale(1.04);
   }
   
   /* Cart Icon Animation */
   .cart-btn.cart-animate {
     animation: cart-bounce 0.7s cubic-bezier(.4,1.4,.6,1);
   }
   @keyframes cart-bounce {
     0% { transform: scale(1); }
     30% { transform: scale(1.18) rotate(-8deg); }
     60% { transform: scale(0.95) rotate(6deg); }
     100% { transform: scale(1) rotate(0deg); }
   }
   
   /* Quick View Button */
   .quick-view-btn {
     background: rgba(30,30,40,0.82);
     color: var(--gold-primary);
     border: 1.5px solid rgba(197, 160, 89, 0.33);
     border-radius: 0.7rem;
     font-size: 1rem;
     padding: 0.4em 1.1em;
     margin-top: 0.5em;
     cursor: pointer;
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
     display: flex;
     align-items: center;
     gap: 0.5em;
     opacity: 0.92;
   }
   .quick-view-btn:hover, .quick-view-btn:focus {
     background: var(--gold-primary);
     color: #18181c;
     box-shadow: 0 0 0 2.5px rgba(197, 160, 89, 0.6);
   }
   
   /* Accessibility Focus Styles */
   .product-card:focus, .carousel-dot:focus, .carousel-nav:focus, .wishlist-btn:focus, .add-to-cart-btn:focus, .quick-view-btn:focus {
     outline: 2.5px solid var(--gold-primary);
     outline-offset: 2px;
     z-index: 3;
   }
   
   /* Luxury Product Detail Guarantee Section */
   .premium-guarantee {
     display: flex;
     align-items: center;
     gap: 14px;
     background: rgba(197, 160, 89, 0.10);
     border-radius: 16px;
     padding: 18px 24px;
     margin-top: 24px;
     font-size: 1.13em;
     font-weight: 700;
     color: var(--gold-primary);
     box-shadow: 0 4px 24px rgba(197, 160, 89, 0.13), 0 2px 12px #0002;
     border: 1.5px solid rgba(197, 160, 89, 0.22);
     backdrop-filter: blur(8px);
     transition: box-shadow 0.22s, background 0.22s;
   }
   .premium-guarantee i {
     font-size: 1.7em;
     color: var(--gold-primary);
     margin-right: 10px;
     filter: drop-shadow(0 0 6px rgba(197, 160, 89, 0.33));
   }
   .premium-guarantee span {
     color: var(--gold-primary);
     letter-spacing: 0.01em;
     text-shadow: 0 2px 8px rgba(197, 160, 89, 0.2), 0 1px 0 #fff1;
   }
   @media (max-width: 700px) {
     .premium-guarantee {
       padding: 12px 10px;
       font-size: 1em;
       border-radius: 10px;
       margin-top: 16px;
     }
     .premium-guarantee i {
       font-size: 1.2em;
       margin-right: 6px;
     }
   }
   
   /* Luxury Product Detail Layout */
   .product-detail-main {
     margin-top: 32px;
     padding: 0 0 48px 0;
   }
   .product-detail-container {
     display: flex;
     flex-direction: row;
     align-items: flex-start;
     justify-content: center;
     gap: 48px;
     max-width: 1200px;
     margin: 0 auto;
     padding: 32px 24px 0 24px;
   }
   .product-gallery-section {
     flex: 1 1 480px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     min-width: 320px;
     max-width: 500px;
   }
   .main-image-container {
     width: 100%;
     max-width: 480px;
     max-height: 420px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--secondary);
     border-radius: 22px;
     box-shadow: 0 6px 32px #0004, 0 2px 12px rgba(197, 160, 89, 0.13);
     overflow: hidden;
     margin-bottom: 18px;
   }
   .main-product-image {
     width: 100%;
     height: auto;
     max-width: 480px;
     max-height: 420px;
     object-fit: contain;
     border-radius: 18px;
     box-shadow: 0 2px 16px #0002;
     background: #181818;
     transition: box-shadow 0.22s;
   }
   .image-thumbnails {
     display: flex;
     gap: 10px;
     margin-top: 8px;
     justify-content: center;
   }
   .thumbnail {
     border-radius: 8px;
     overflow: hidden;
     border: 2px solid transparent;
     cursor: pointer;
     transition: border 0.18s, box-shadow 0.18s;
     box-shadow: 0 1px 6px #0002;
   }
   .thumbnail.active, .thumbnail:hover {
     border: 2px solid var(--gold-primary);
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.2);
   }
   .thumbnail img {
     width: 54px;
     height: 54px;
     object-fit: contain;
     background: #222;
     border-radius: 6px;
   }
   .product-info-section {
     flex: 1 1 340px;
     min-width: 320px;
     max-width: 420px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 18px;
   }
   @media (max-width: 900px) {
     .product-detail-container {
       flex-direction: column;
       align-items: center;
       gap: 32px;
       padding: 18px 6vw 0 6vw;
     }
     .product-gallery-section, .product-info-section {
       max-width: 100%;
       min-width: 0;
       width: 100%;
     }
     .main-image-container {
       max-width: 98vw;
       max-height: 320px;
     }
     .main-product-image {
       max-width: 98vw;
       max-height: 320px;
     }
   }
   @media (max-width: 600px) {
     .product-detail-main {
       margin-top: 68px;
       padding: 0 0 24px 0;
     }
     .product-detail-container {
       gap: 18px;
       padding: 8px 2vw 0 2vw;
     }
     .main-image-container {
       max-width: 98vw;
       max-height: 180px;
       border-radius: 12px;
     }
     .main-product-image {
       max-width: 98vw;
       max-height: 180px;
       border-radius: 10px;
     }
     .image-thumbnails {
       gap: 6px;
     }
     .thumbnail img {
       width: 38px;
       height: 38px;
       border-radius: 4px;
     }
     .product-info-section {
       gap: 12px;
       padding: 0;
     }
   }
   
   /* Luxury Product Detail Transitions & Effects */
   .fade-in {
     animation: fadeInLuxury 0.6s cubic-bezier(.4,1.4,.6,1) both;
   }
   .fade-out {
     animation: fadeOutLuxury 0.3s cubic-bezier(.4,1.4,.6,1) both;
   }
   @keyframes fadeInLuxury {
     from { opacity: 0; transform: scale(0.97); }
     to { opacity: 1; transform: scale(1); }
   }
   @keyframes fadeOutLuxury {
     from { opacity: 1; transform: scale(1); }
     to { opacity: 0; transform: scale(1.03); }
   }
   .fade-in-tab {
     animation: fadeInTabLuxury 0.5s cubic-bezier(.4,1.4,.6,1) both;
   }
   @keyframes fadeInTabLuxury {
     from { opacity: 0; transform: translateY(18px); }
     to { opacity: 1; transform: translateY(0); }
   }
   .thumbnail {
     transition: border 0.18s, box-shadow 0.18s, transform 0.18s;
   }
   .thumbnail:focus {
     outline: 2px solid var(--gold-primary);
     border: 2px solid var(--gold-primary);
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.33);
     transform: scale(1.08);
   }
   .tab-btn {
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
     border-radius: 8px 8px 0 0;
     margin-right: 2px;
     font-weight: 600;
     font-size: 1.08em;
     background: rgba(255,255,255,0.03);
     color: var(--gold-primary);
     border: none;
     padding: 10px 22px;
     cursor: pointer;
     box-shadow: none;
   }
   .tab-btn.active, .tab-btn:focus {
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe0 100%);
     color: #181818;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.2);

   }
   .tab-btn:hover:not(.active) {
     background: rgba(255,215,0,0.12);
     color: var(--gold-primary);
   }
   .tabs-header {
     display: flex;
     gap: 2px;
     margin-bottom: 0.7em;
     border-bottom: 2px solid rgba(197, 160, 89, 0.13);
     padding-bottom: 2px;
   }
   .tab-panel {
     padding: 1.2em 0.5em 0.7em 0.5em;
     min-height: 120px;
   }
   @media (max-width: 700px) {
     .tab-btn { font-size: 1em; padding: 8px 10px; }
     .tab-panel { padding: 0.7em 0.1em 0.5em 0.1em; }
   }
   
   /* Image Lightbox Modal */
   .image-lightbox-modal {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.9);
     z-index: 9999;
     display: flex;
     align-items: center;
     justify-content: center;
   }
   
   .image-lightbox-content {
     position: relative;
     max-width: 90%;
     max-height: 90%;
   }
   
   .close-lightbox-btn {
     position: absolute;
     top: -40px;
     right: 0;
     background: none;
     border: none;
     color: white;
     font-size: 2em;
     cursor: pointer;
     z-index: 10000;
   }
   
   .luxury-zoom-image {
     max-width: 100%;
     max-height: 90vh;
     object-fit: contain;
     cursor: grab;
     transition: transform 0.3s ease;
     user-select: none;
     transform-origin: center center;
   }
   
   .luxury-zoom-image.zoomed {
     cursor: grab;
   }
   
   .luxury-zoom-image.zoomed:active {
     cursor: grabbing;
   }
   
   /* Star Rating Improvements */
   .luxury-star-input .fas.fa-star {
     font-size: 1.7em;
     color: rgba(197, 160, 89, 0.6);
     cursor: pointer;
     transition: color 0.18s, transform 0.18s;

     user-select: none;
   }
   
   .luxury-star-input .fas.fa-star:hover {
     color: var(--gold-primary);
     transform: scale(1.1);
   }
   
   .luxury-star-input .fas.fa-star.gold-star {
     color: var(--gold-primary);
     text-shadow: 0 2px 8px rgba(197, 160, 89, 0.2);
     transform: scale(1.13);
   }
   
   .luxury-star-input .fas.fa-star:focus {
     color: #fffbe6;
     outline: 2px solid var(--gold-primary);
   }
   
   /* Review Star Input */
   .add-review-section {
     margin-top: 32px;
     background: rgba(255,215,0,0.07);
     border-radius: 12px;
     padding: 18px 22px 16px 22px;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.07);
   }
   .star-rating-input {
     display: flex;
     gap: 8px;
     margin-bottom: 10px;
   }
   .star-rating-input .fa-star {
     font-size: 1.7em;
     color: rgba(197, 160, 89, 0.6);
     cursor: pointer;
     transition: color 0.18s, transform 0.18s;

   }
   .star-rating-input .fa-star.gold-star {
     color: var(--gold-primary);
     text-shadow: 0 2px 8px rgba(197, 160, 89, 0.2);
     transform: scale(1.13);
   }
   .star-rating-input .fa-star:focus {
     color: #fffbe6;
     outline: 2px solid var(--gold-primary);
   }
   .submit-review-btn {
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe6 100%);
     color: #222;
     font-weight: 700;
     border: none;
     border-radius: 8px;
     padding: 10px 22px;
     font-size: 1.08em;
     margin-top: 8px;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     cursor: pointer;
     transition: background 0.18s, color 0.18s;
   }
   .submit-review-btn:hover {
     background: var(--gold-primary);
     color: #111;
   }
   
   @media (max-width: 900px) {
     .product-detail-container {
       flex-direction: column;
       gap: 32px;
       padding: 18px 6vw 0 6vw;
     }
     .image-lightbox-content img {
       max-width: 98vw;
       max-height: 60vh;
     }
   }
   
   /* Luxury Review Section */
   .luxury-review-section {
     margin-top: 36px;
     background: rgba(255,215,0,0.09);
     border-radius: 16px;
     padding: 28px 32px 22px 32px;
     box-shadow: 0 2px 16px rgba(197, 160, 89, 0.07);
     display: flex;
     flex-direction: column;
     align-items: flex-start;
   }
   .luxury-review-title {
     font-size: 1.25em;
     font-weight: 700;
     color: var(--gold-primary);
     margin-bottom: 12px;
     letter-spacing: 0.01em;
   }
   .luxury-star-input {
     margin-bottom: 12px;
   }
   .luxury-review-textarea {
     width: 100%;
     min-height: 70px;
     font-size: 1.08em;
     border-radius: 8px;
     border: 1.5px solid rgba(197, 160, 89, 0.27);
     background: #181818;
     color: #fff;
     padding: 12px 14px;
     margin-bottom: 10px;
     box-shadow: 0 1px 6px rgba(197, 160, 89, 0.07);
     transition: border 0.18s, box-shadow 0.18s;
   }
   .luxury-review-textarea:focus {
     border: 1.5px solid var(--gold-primary);

     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.2);
   }
   .luxury-review-btn {
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe6 100%);
     color: #222;
     font-weight: 700;
     border: none;
     border-radius: 8px;
     padding: 12px 28px;
     font-size: 1.13em;
     margin-top: 8px;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     cursor: pointer;
     transition: background 0.18s, color 0.18s;
   }
   .luxury-review-btn:hover {
     background: var(--gold-primary);
     color: #111;
   }
   
   /* Luxury Zoom Image */
   .luxury-zoom-container {
     max-width: 700px;
     min-width: 320px;
     margin: 0 auto;
   }
   .luxury-zoom-image {
     max-width: 680px;
     max-height: 540px;
     width: 100%;
     height: auto;
     border-radius: 18px;
     box-shadow: 0 4px 32px rgba(197, 160, 89, 0.13), 0 2px 12px #0002;
     background: #222;
     cursor: zoom-in;
     transition: box-shadow 0.22s, transform 0.22s;
   }
   .luxury-zoom-image.zoomed {
     max-width: 98vw;
     max-height: 90vh;
     transform: scale(1.13);
     z-index: 10;
   }
   
   @media (max-width: 900px) {
     .product-detail-main {
       margin-top: 10px;
     }
     .luxury-zoom-container {
       max-width: 98vw;
     }
     .luxury-zoom-image {
       max-width: 98vw;
       max-height: 60vh;
     }
     .luxury-zoom-image.zoomed {
       max-width: 100vw;
       max-height: 98vh;
     }
     .product-title, .luxury-review-title {
       font-size: 1.3em;
     }
   }
   
   /* Luxury Product Back Button */
   .product-back-bar {
     position: relative;
     margin-top: 18px;
     margin-bottom: 8px;
     z-index: 10;
     display: flex;
     align-items: center;
   }
   .luxury-back-btn {
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe6 100%);
     color: #222;
     font-weight: 700;
     border: none;
     border-radius: 12px;
     padding: 10px 26px 10px 18px;
     font-size: 1.08em;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.13);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 10px;
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
   }
   .luxury-back-btn:hover {
     background: var(--gold-primary);
     color: #111;
     box-shadow: 0 4px 24px rgba(197, 160, 89, 0.2);
   }
   
   /* Luxury Rating Section */
   .luxury-rating-section {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 10px;
     font-size: 1.18em;
     font-weight: 600;
   }
   .luxury-rating-section .stars {
     font-size: 1.5em;
     color: var(--gold-primary);
     letter-spacing: 0.04em;
     text-shadow: 0 2px 8px rgba(197, 160, 89, 0.2);
   }
   .luxury-rating-section .rating-text {
     color: var(--gold-primary);
     font-weight: 700;
     margin-left: 2px;
   }
   .luxury-rating-section .review-count {
     color: #aaa;
     font-size: 0.98em;
     margin-left: 4px;
   }
   
   /* Luxury Zoom Button */
   .luxury-zoom-btn {
     margin-top: 18px;
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe6 100%);
     color: #222;
     font-weight: 700;
     border: none;
     border-radius: 10px;
     padding: 9px 22px 9px 16px;
     font-size: 1.05em;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     cursor: pointer;
     display: flex;
     align-items: center;
     gap: 8px;
     transition: background 0.18s, color 0.18s, box-shadow 0.18s;
   }
   .luxury-zoom-btn:hover {
     background: var(--gold-primary);
     color: #111;
     box-shadow: 0 4px 16px rgba(197, 160, 89, 0.2);
   }
   
   @media (max-width: 900px) {
     .product-back-bar {
       margin-top: 10px;
       margin-bottom: 4px;
     }
     .luxury-back-btn {
       padding: 8px 16px 8px 12px;
       font-size: 1em;
     }
     .luxury-rating-section {
       font-size: 1.05em;
     }
     .luxury-zoom-btn {
       margin-top: 10px;
       padding: 8px 12px 8px 10px;
       font-size: 0.98em;
     }
   }
   
   /* Similar Products Section */
   .similar-products-section {
     margin: 48px auto 0 auto;
     max-width: 1200px;
     padding: 0 24px 32px 24px;
   }
   .luxury-section-title {
     font-size: 2em;
     font-weight: 800;
     color: var(--gold-primary);
     margin-bottom: 24px;
     letter-spacing: -0.01em;
     text-shadow: 0 2px 16px rgba(197, 160, 89, 0.13);
   }
   .similar-products-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
     gap: 32px;
     width: 100%;
   }
   .similar-product-card {
     background: rgba(30,30,30,0.98);
     border-radius: 16px;
     box-shadow: 0 2px 16px rgba(197, 160, 89, 0.07), 0 1px 6px #0002;
     padding: 22px 18px 18px 18px;
     display: flex;
     flex-direction: column;
     align-items: center;
     transition: box-shadow 0.18s, transform 0.18s;
     cursor: pointer;
     position: relative;
   }
   .similar-product-card:hover {
     box-shadow: 0 6px 32px rgba(197, 160, 89, 0.2), 0 2px 12px #0004;
     transform: translateY(-4px) scale(1.03);
   }
   .similar-product-card .similar-product-image {
     width: 120px;
     height: 120px;
     object-fit: contain;
     border-radius: 10px;
     background: #181818;
     margin-bottom: 14px;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
   }
   .similar-product-card .similar-product-title {
     font-size: 1.08em;
     font-weight: 700;
     color: #fff;
     margin-bottom: 6px;
     text-align: center;
   }
   .similar-product-card .similar-product-price {
     color: var(--gold-primary);
     font-weight: 700;
     font-size: 1.13em;
     margin-bottom: 8px;
   }
   .similar-product-card .similar-product-btn {
     background: linear-gradient(90deg, var(--gold-primary) 60%, #fffbe6 100%);
     color: #222;
     font-weight: 700;
     border: none;
     border-radius: 8px;
     padding: 8px 18px;
     font-size: 1em;
     margin-top: 8px;
     box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13);
     cursor: pointer;
     transition: background 0.18s, color 0.18s;
   }
   .similar-product-card .similar-product-btn:hover {
     background: var(--gold-primary);
     color: #111;
   }
   
   .luxury-policy-link {
     color: var(--gold-primary);
     text-decoration: underline;
     font-weight: 600;
     transition: color 0.18s;
   }
   .luxury-policy-link:hover {
     color: #fffbe6;
   }
   
   @media (max-width: 900px) {
     .similar-products-section {
       padding: 0 4vw 24px 4vw;
     }
     .luxury-section-title {
       font-size: 1.2em;
     }
     .similar-products-grid {
       gap: 18px;
     }
   }
   
   /* === Luxury Product Page Styles === */
   .lux-hero { position: relative; min-height: 60vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(120deg, #181818 60%, #232323 100%); overflow: hidden; }
   .lux-hero-bg { position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at 70% 40%, rgba(197, 160, 89, 0.2) 0%, #181818 80%); opacity: 0.7; pointer-events: none; }
   .lux-hero-content { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 3rem; width: 100%; max-width: 1200px; margin: 0 auto; padding: 3rem 1rem 2rem 1rem; }
   .lux-hero-img { flex: 1 1 340px; max-width: 420px; display: flex; align-items: center; justify-content: center; }
   .lux-hero-img img { width: 100%; max-width: 380px; border-radius: 2.2rem; box-shadow: 0 8px 48px rgba(197, 160, 89, 0.13), 0 1.5px 0 #fff2; background: #181818; transition: transform 0.4s cubic-bezier(.4,1.4,.6,1), box-shadow 0.4s; cursor: zoom-in; }
   .lux-hero-img img:hover { transform: scale(1.04) rotate(-2deg); box-shadow: 0 12px 64px rgba(197, 160, 89, 0.33), 0 1.5px 0 #fff2; }
   .lux-hero-info { flex: 1 1 340px; max-width: 500px; display: flex; flex-direction: column; gap: 1.2rem; }
   .lux-hero-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 2.5rem; font-weight: 900; color: #fff; margin: 0 0 0.5rem 0; letter-spacing: -1px; }
   .lux-hero-sub { font-size: 1.15rem; color: var(--gold-primary); font-weight: 600; margin-bottom: 1.2rem; }
   .lux-hero-badges { display: flex; gap: 0.7rem; margin-bottom: 1.1rem; }
   .lux-badge { background: rgba(197, 160, 89, 0.12); color: var(--gold-primary); border-radius: 1.2rem; padding: 0.4em 1.2em; font-weight: 700; font-size: 1rem; display: flex; align-items: center; gap: 0.5em; box-shadow: 0 2px 12px rgba(197, 160, 89, 0.13); }
   .lux-price-badge { background: rgba(197, 160, 89, 0.18); color: #181818; font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 2.1rem; font-weight: 900; border-radius: 1.5rem; padding: 0.5em 1.5em; box-shadow: 0 4px 24px rgba(197, 160, 89, 0.27); margin-bottom: 1.2rem; display: inline-block; backdrop-filter: blur(8px); border: 1.5px solid rgba(197, 160, 89, 0.22); }
   .lux-hero-cta { display: flex; gap: 1.2rem; align-items: center; }
   .glassy-button { background: rgba(197, 160, 89, 0.1); backdrop-filter: blur(8px); border: 1px solid rgba(197, 160, 89, 0.2); color: var(--gold-primary); font-weight: 700; font-size: 1.1rem; border-radius: 2rem; padding: 0.9em 2.2em; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(197, 160, 89, 0.13); }
   .glassy-button:hover { background: rgba(197, 160, 89, 0.3); color: #181818; transform: scale(1.04); box-shadow: 0 0 18px var(--gold-primary); }
   .lux-sticky-cart { position: sticky; top: 0; z-index: 10; background: transparent; }
   
   .lux-specs { margin: 2.5rem auto 0 auto; max-width: 900px; background: rgba(24,24,24,0.7); border-radius: 1.5rem; box-shadow: 0 2px 24px rgba(197, 160, 89, 0.07); padding: 2.2rem 2rem 1.5rem 2rem; display: flex; flex-wrap: wrap; gap: 2.2rem; justify-content: space-between; }
   .lux-spec-list { flex: 1 1 320px; display: flex; flex-direction: column; gap: 1.1rem; }
   .lux-spec-item { display: flex; align-items: center; gap: 0.8em; font-size: 1.08rem; color: #fff; }
   .lux-spec-icon { color: var(--gold-primary); font-size: 1.3em; }
   .lux-spec-expand { color: var(--gold-primary); cursor: pointer; font-size: 1em; margin-left: 0.5em; }
   .lux-spec-details { display: none; margin-top: 0.7em; color: #bdbdbd; font-size: 0.98em; }
   .lux-spec-item.expanded .lux-spec-details { display: block; }
   
   .lux-trust {
     margin: 2.5rem auto 0 auto;
     max-width: 900px;
     background: rgba(24,24,24,0.7);
     border-radius: 1.5rem;
     box-shadow: 0 2px 24px rgba(197, 160, 89, 0.07);
     padding: 2.2rem 2rem 1.5rem 2rem;
     display: flex;
     flex-wrap: wrap;
     gap: 2.2rem;
     align-items: center;
     justify-content: space-between;
   }
   
   .lux-trust-badge {
     display: flex;
     align-items: center;
     gap: 0.5em;
     background: rgba(197, 160, 89, 0.10);
     color: var(--gold-primary);
     border-radius: 1.2rem;
     padding: 0.4em 1.2em;
     font-weight: 700;
     font-size: 1rem;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.13);
     transition: box-shadow 0.2s;
   }
   
   .lux-trust-badge:hover {
     box-shadow: 0 0 12px var(--gold-primary);
   }
   
   .lux-cart-module { margin: 2.5rem auto 0 auto; max-width: 900px; background: rgba(24,24,24,0.7); border-radius: 1.5rem; box-shadow: 0 2px 24px rgba(197, 160, 89, 0.07); padding: 2.2rem 2rem 1.5rem 2rem; display: flex; flex-wrap: wrap; gap: 2.2rem; align-items: center; justify-content: space-between; }
   .lux-cart-qty { display: flex; align-items: center; gap: 0.7em; }
   .lux-cart-qty label { font-weight: 600; color: #fff; }
   .lux-cart-qty select { background: #181818; color: var(--gold-primary); border: 1px solid rgba(197, 160, 89, 0.27); border-radius: 0.7em; padding: 0.3em 1em; font-size: 1.1em; }
   .lux-cart-shipping { color: #bdbdbd; font-size: 1.05em; }
   .lux-cart-payments { display: flex; gap: 1.1em; align-items: center; }
   .lux-cart-payments img { filter: grayscale(1) brightness(1.2); width: 38px; height: 24px; transition: filter 0.2s; }
   .lux-cart-payments img:hover { filter: none; }
   
   .lux-related { margin: 3.5rem auto 0 auto; max-width: 1200px; }
   .lux-related-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 1.4rem; font-weight: 800; color: var(--gold-primary); margin-bottom: 1.2rem; }
   .lux-related-list { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 1.2rem; }
   .lux-related-item {
     min-width: 180px;
     background: #181818;
     border-radius: 1.2rem;
     box-shadow: 0 2px 12px rgba(197, 160, 89, 0.07);
     padding: 1.1rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     scroll-snap-align: start;
     transition: box-shadow 0.2s, transform 0.2s;
     position: relative;
     overflow: hidden;
   }
   
   .lux-related-item:hover {
     box-shadow: 0 0 12px var(--gold-primary);
     transform: translateY(-2px);
   }
   
   .lux-related-item img {
     width: 100px;
     height: 100px;
     object-fit: contain;
     margin-bottom: 0.7em;
     border-radius: 0.7em;
     background: #232323;
     transition: transform 0.2s;
   }
   
   .lux-related-item:hover img {
     transform: scale(1.05);
   }
   
   .lux-related-item .lux-related-name {
     color: #fff;
     font-weight: 700;
     margin-bottom: 0.3em;
     text-align: center;
     font-size: 0.95rem;
     line-height: 1.2;
   }
   
   .lux-related-item .lux-related-price {
     color: var(--gold-primary);
     font-weight: 700;
     margin-bottom: 0.8em;
     font-size: 1.1rem;
   }
   
   .lux-related-item .lux-related-btn {
     color: var(--gold-primary);
     font-weight: 600;
     font-size: 0.9rem;
     padding: 0.4rem 1rem;
     background: rgba(197, 160, 89, 0.1);
     border: 1px solid rgba(197, 160, 89, 0.3);
     border-radius: 0.8rem;
     transition: all 0.2s;
   }
   
   .lux-related-item:hover .lux-related-btn {
     background: rgba(197, 160, 89, 0.2);
     border-color: rgba(197, 160, 89, 0.5);
     transform: scale(1.05);
   }
   
   .lux-related-viewall { color: var(--gold-primary); font-weight: 700; background: none; border: none; font-size: 1.1em; cursor: pointer; display: flex; align-items: center; gap: 0.5em; transition: color 0.2s; }
   .lux-related-viewall:hover { color: #fff; }
   
   @media (max-width: 900px) {
     .lux-hero-content { flex-direction: column; gap: 2rem; }
     .lux-hero-img, .lux-hero-info { max-width: 100%; }
     .lux-specs, .lux-trust, .lux-cart-module { flex-direction: column; gap: 1.2rem; padding: 1.2rem 0.7rem; }
   }
   @media (max-width: 600px) {
     .lux-hero-title { font-size: 1.5rem; }
     .lux-price-badge { font-size: 1.3rem; }
     .lux-related-list { gap: 0.7rem; }
   }
   
   /* === Luxury Comments/Reviews Section === */
   .lux-comments { margin: 3.5rem auto 0 auto; max-width: 900px; background: rgba(24,24,24,0.7); border-radius: 1.5rem; box-shadow: 0 2px 24px rgba(197, 160, 89, 0.07); padding: 2.2rem 2rem 1.5rem 2rem; }
   .lux-comments-title { font-family: var(--font-display, 'Space Grotesk', sans-serif); font-size: 1.3rem; font-weight: 800; color: var(--gold-primary); margin-bottom: 1.2rem; }
   #commentsList { display: flex; flex-direction: column; gap: 1.2rem; margin-bottom: 2rem; }
   .lux-comment-card { background: #181818; border-radius: 1.2rem; box-shadow: 0 2px 12px rgba(197, 160, 89, 0.07); padding: 1.1rem 1.2rem; color: #fff; }
   .lux-comment-header { display: flex; align-items: center; gap: 0.7em; margin-bottom: 0.5em; }
   .lux-comment-name { font-weight: 700; color: var(--gold-primary); }
   .lux-comment-date { color: #bdbdbd; font-size: 0.95em; }
   .lux-comment-stars { color: var(--gold-primary); font-size: 1.1em; }
   .lux-comment-text { color: #fff; font-size: 1.05em; }
   .lux-comment-form { display: flex; flex-direction: column; gap: 1em; margin-top: 1.5em; }
   .lux-comment-form input, .lux-comment-form textarea { background: #232323; color: #fff; border: 1px solid rgba(197, 160, 89, 0.27); border-radius: 0.7em; padding: 0.7em 1em; font-size: 1em; }
   .lux-comment-form textarea { min-height: 80px; resize: vertical; }
   .lux-star-input { display: flex; gap: 0.3em; font-size: 1.5em; color: var(--gold-primary); cursor: pointer; }
   .lux-star-input .fa-star { transition: color 0.2s; }
   .lux-star-input .fa-star.inactive { color: #444; }
   
   /* Review Delete Button */
   .delete-review-btn {
     background: none;
     border: none;
     color: #ef4444;
     cursor: pointer;
     padding: 4px 8px;
     border-radius: 6px;
     font-size: 0.9em;
     transition: all 0.2s ease;
     margin-left: auto;
     opacity: 0.7;
   }
   
   .delete-review-btn:hover {
     opacity: 1;
     background: rgba(239, 68, 68, 0.1);
     transform: scale(1.1);
   }
   
   /* Login Prompt */
   .login-prompt {
     margin-bottom: 1.5rem;
   }
   
   .login-prompt .lux-comment-card {
     background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
     border: 1px solid rgba(197, 160, 89, 0.2);
     text-align: center;
   }
   
   .login-prompt p {
     color: var(--gold-primary);
     font-weight: 600;
     margin-bottom: 1rem;
     font-size: 1.1em;
   }
   
   .login-prompt .glassy-button {
     background: linear-gradient(135deg, var(--gold-primary) 0%, #ffed4e 100%);
     color: #1a2340;
     border: none;
     padding: 12px 24px;
     border-radius: 8px;
     font-weight: 600;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
   }
   
   .login-prompt .glassy-button:hover {
     transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
   }
   
   /* Luxury Review Form Section */
   .luxury-review-section {
     margin: 2rem auto;
     max-width: 900px;
     background: rgba(24,24,24,0.7);
     border-radius: 1.5rem;
     box-shadow: 0 2px 24px rgba(197, 160, 89, 0.07);
     padding: 2rem;
   }
   
   .luxury-review-title {
     font-family: var(--font-display, 'Space Grotesk', sans-serif);
     font-size: 1.3rem;
     font-weight: 800;
     color: var(--gold-primary);
     margin-bottom: 1.5rem;
     text-align: center;
   }
   
   .luxury-star-input {
     display: flex;
     justify-content: center;
     gap: 0.5rem;
     margin-bottom: 1.5rem;
   }
   
   .luxury-star-input .fas.fa-star {
     font-size: 2rem;
     color: #444;
     cursor: pointer;
     transition: all 0.2s ease;
   }
   
   .luxury-star-input .fas.fa-star.gold-star {
     color: var(--gold-primary);
   }
   
   .luxury-star-input .fas.fa-star:hover {
     color: var(--gold-primary);
     transform: scale(1.1);
   }
   
   .luxury-review-textarea {
     width: 100%;
     min-height: 120px;
     background: #232323;
     color: #fff;
     border: 1px solid rgba(197, 160, 89, 0.27);
     border-radius: 12px;
     padding: 1rem;
     font-size: 1rem;
     font-family: inherit;
     resize: vertical;
     margin-bottom: 1.5rem;
   }
   
   .luxury-review-textarea:focus {

     border-color: var(--gold-primary);
     box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.1);
   }
   
   .luxury-review-btn {
     background: linear-gradient(135deg, var(--gold-primary) 0%, #ffed4e 100%);
     color: #1a2340;
     border: none;
     padding: 12px 32px;
     border-radius: 8px;
     font-weight: 700;
     font-size: 1rem;
     cursor: pointer;
     transition: all 0.3s ease;
     box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
     display: block;
     margin: 0 auto;
   }
   
   .luxury-review-btn:hover:not(:disabled) {
     transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(255, 215, 0, 0.4);
   }
   
   .luxury-review-btn:disabled {
     opacity: 0.6;
     cursor: not-allowed;
     transform: none;
   }
   
   @media (max-width: 600px) { 
     .lux-comments { padding: 1.2rem 0.7rem; } 
     .luxury-review-section { padding: 1.5rem; }
     .luxury-star-input .fas.fa-star { font-size: 1.8rem; }
   }
   
   /* Social Login Styles */
   .social-login-divider {
     display: flex;
     align-items: center;
     margin: 1.5rem 0;
     color: #bdbdbd;
     font-size: 0.9rem;
   }
   
   .social-login-divider::before,
   .social-login-divider::after {
     content: '';
     flex: 1;
     height: 1px;
     background: #3a3a3a;
     display: none; /* Hide by default to prevent unwanted lines */
   }
   
   .social-login-divider.show::before,
   .social-login-divider.show::after {
     display: block; /* Only show when explicitly needed */
   }
   
   .social-login-divider span {
     padding: 0 1rem;
     background: #181818;
   }
   
   .social-login-options {
     display: flex;
     flex-direction: column;
     gap: 0.8rem;
   }
   
   .social-login-btn {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.8rem;
     width: 100%;
     padding: 0.9rem 1.2rem;
     border: 1px solid #3a3a3a;
     border-radius: 0.8rem;
     background: #232323;
     color: #fff;
     font-weight: 600;
     font-size: 1rem;
     cursor: pointer;
     transition: all 0.3s ease;
     text-decoration: none;
   }
   
   .social-login-btn:hover {
     background: #2a2a2a;
     border-color: rgba(197, 160, 89, 0.27);
     transform: translateY(-1px);
     box-shadow: 0 4px 12px rgba(197, 160, 89, 0.1);
   }
   
   .social-login-btn i {
     font-size: 1.2rem;
   }
   
   .google-btn {
     border-color: #4285f444;
   }
   
   .google-btn:hover {
     border-color: #4285f4;
     box-shadow: 0 4px 12px rgba(66, 133, 244, 0.2);
   }
   
   .apple-btn {
     border-color: #00000044;
   }
   
   .apple-btn:hover {
     border-color: #000000;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
   }
   
   @media (max-width: 480px) {
     .social-login-btn {
       padding: 0.8rem 1rem;
       font-size: 0.95rem;
     }
     
     .social-login-btn i {
       font-size: 1.1rem;
     }
   }
   
   .orders-header .orders-close-btn { background: #1a1a1a; color: var(--gold-primary); border: 1px solid rgba(255,215,0,0.25); width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast); }
   .orders-header .orders-close-btn:hover { transform: translateX(2px); background: #202020; box-shadow: 0 0 0 3px rgba(255,215,0,0.1); }
   .orders-header .orders-close-btn i { pointer-events: none; }

   /* =====================================================================
      PREMIUM E-COMMERCE MOBILE LAYOUT - PRODUCT DETAILS PAGE (Amazon/Shein style)
      ===================================================================== */
   @media (max-width: 768px) {
     /* Hero & Image */
     .lux-hero {
       min-height: auto !important;
       padding: 0 !important;
       background: #111 !important; /* Clean dark background */
       display: block !important;
     }
     .lux-hero-content {
       padding: 0 0 1rem 0 !important;
       gap: 1rem !important;
       display: flex;
       flex-direction: column;
     }
     .lux-hero-img {
       max-width: 100vw !important;
       width: 100vw !important;
       padding: 0 !important;
       flex: none !important;
     }
     .lux-hero-img img {
       max-width: 100vw !important;
       border-radius: 0 !important; /* Edge to edge */
       box-shadow: none !important;
       background: #111 !important;
     }
     
     /* Info (Title & Price) */
     .lux-hero-info {
       padding: 0 1rem !important;
       gap: 0.5rem !important;
       align-items: flex-start !important;
       margin-top: 0.5rem !important;
       flex: none !important;
     }
     .lux-hero-title {
       font-size: 1.3rem !important;
       line-height: 1.3 !important;
       margin-bottom: 0.25rem !important;
     }
     .lux-price-badge {
       font-size: 1.5rem !important;
       padding: 0 !important;
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
       color: var(--gold-primary) !important;
       margin-bottom: 0.5rem !important;
       backdrop-filter: none !important;
     }
     .lux-hero-sub, .lux-hero-badges {
       font-size: 0.85rem !important;
       margin-bottom: 0.5rem !important;
     }
     
     /* Containers - Remove big rounded boxes */
     .lux-specs, .lux-trust, .lux-cart-module, .lux-comments, .luxury-review-section, .similar-products-section {
       margin: 0 !important;
       padding: 1rem !important;
       border-radius: 0 !important;
       background: transparent !important;
       box-shadow: none !important;
       border-top: 1px solid rgba(255,255,255,0.05) !important;
       max-width: 100vw !important;
       flex-direction: column !important;
     }
     
     /* ==========================================================
        EDGE-TO-EDGE PRODUCT GALLERY ON MOBILE (Amazon/Shein style)
        ========================================================== */
     .product-detail-main {
       margin-top: 60px !important; /* Just below header */
       padding: 0 !important;
     }
     .product-detail-container {
       padding: 0 !important; /* Remove horizontal padding entirely */
       gap: 0 !important;
       display: flex !important;
       flex-direction: column !important;
     }
     .product-gallery-section {
       padding: 0 !important;
       margin: 0 !important;
       width: 100vw !important;
       max-width: 100vw !important;
     }
     .main-image-container {
       background: transparent !important; /* Remove dark box */
       box-shadow: none !important;
       border-radius: 0 !important;
       margin-bottom: 0 !important;
       width: 100vw !important;
       max-width: 100vw !important;
       height: auto !important;
       max-height: 450px !important; /* Let image be tall */
       aspect-ratio: 1/1 !important; /* Square for products */
       padding: 0 !important;
       overflow: hidden !important;
     }
     .main-product-image {
       background: transparent !important; /* Keep it dark for dark theme */
       box-shadow: none !important;
       border-radius: 0 !important;
       width: 100vw !important;
       max-width: 100vw !important;
       height: 100% !important;
       max-height: 450px !important;
       object-fit: contain !important; /* Ensure product isn't cropped */
       margin: 0 !important;
       padding: 0 !important;
     }
     .image-thumbnails {
       padding: 0.5rem 1rem !important;
       margin: 0 !important;
       justify-content: flex-start !important;
       overflow-x: auto !important;
       gap: 0.5rem !important;
       -ms-overflow-style: none;
       scrollbar-width: none;
       background: transparent !important;
     }
     .image-thumbnails::-webkit-scrollbar {
       display: none;
     }
     .thumbnail {
       flex-shrink: 0 !important;
       box-shadow: none !important;
       border: 1px solid rgba(255,255,255,0.1) !important;
     }
     
     /* Make sure info section (Title, price) has padding since we removed it from container */
     .product-info-section {
       padding: 1rem !important;
       background: transparent !important;
     }
     
     
     /* Trust Badges - Horizontal scrolling chips */
     .lux-trust {
       display: flex !important;
       flex-direction: row !important;
       flex-wrap: nowrap !important;
       overflow-x: auto !important;
       gap: 0.5rem !important;
       padding: 1rem !important;
       -ms-overflow-style: none;
       scrollbar-width: none;
       justify-content: flex-start !important;
     }
     .lux-trust::-webkit-scrollbar {
       display: none;
     }
     .lux-trust-badge {
       flex-shrink: 0 !important;
       padding: 0.4rem 0.8rem !important;
       font-size: 0.8rem !important;
       background: rgba(197,160,89,0.1) !important;
       border-radius: 2rem !important;
       box-shadow: none !important;
     }
     
     /* Add to cart module (qty selector) */
     .lux-cart-module {
       gap: 1rem !important;
       align-items: flex-start !important;
     }
     .lux-cart-module .add-to-cart-btn, .lux-cart-module .wishlist-btn { display: flex !important; }
     
     /* Related Products - Small horizontal scroll */
     .lux-related {
       margin: 0 0 5rem 0 !important; /* Room for sticky CTA */
       padding: 1rem !important;
     }
     .lux-related-title {
       font-size: 1.1rem !important;
       margin-bottom: 0.75rem !important;
     }
     .lux-related-list {
       gap: 0.75rem !important;
       padding-bottom: 0.5rem !important;
     }
     .lux-related-item {
       min-width: 130px !important;
       padding: 0.5rem !important;
       border-radius: 0.5rem !important;
       background: #1a1a1a !important;
     }
     .lux-related-item img {
       width: 100px !important;
       height: 100px !important;
       margin-bottom: 0.5rem !important;
     }
     .lux-related-item .lux-related-name {
       font-size: 0.8rem !important;
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
       max-width: 100% !important;
     }
     .lux-related-item .lux-related-price {
       font-size: 0.95rem !important;
       margin-bottom: 0.5rem !important;
     }
     .lux-related-item .lux-related-btn {
       padding: 0.3rem 0.6rem !important;
       font-size: 0.75rem !important;
       width: 100% !important;
       text-align: center !important;
     }
     
     /* Sticky CTA adjustments */
     .sticky-mobile-cta {
       bottom: 60px !important; /* Above the bottom nav bar */
       padding: 0.5rem 1rem !important;
       background: rgba(17,17,17,0.98) !important;
       border-top: 1px solid rgba(197,160,89,0.2) !important;
     }
     
     /* Hide back/zoom buttons on mobile for a cleaner look */
     .product-back-bar, .luxury-zoom-btn {
       display: none !important;
     }
   }

   /* =====================================================================
      STICKY MOBILE CTA (Add to cart & Wishlist on Product Page)
      ===================================================================== */
   .sticky-mobile-cta {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100vw;
     background: rgba(20, 20, 20, 0.95);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(197, 160, 89, 0.2);
     padding: 0.75rem 1rem;
     z-index: 999;
     display: flex;
     justify-content: center;
   }
   
   /* If mobile bottom nav is present, move sticky CTA up */
   @media (max-width: 768px) {
     .sticky-mobile-cta {
       bottom: 60px !important; /* height of .mobile-bottom-nav */
       padding: 0.5rem 1rem !important;
     }
   }

   .sticky-cta-content {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     max-width: 500px;
     gap: 0.75rem;
   }

   .sticky-price {
     font-size: 1.1rem;
     font-weight: 800;
     color: #fff;
     flex-shrink: 0;
   }

   .sticky-add-cart {
     flex: 1;
     background: var(--gold-primary);
     color: #111;
     border: none;
     border-radius: 2rem;
     padding: 0.6rem 1rem;
     font-weight: 700;
     font-size: 0.95rem;
     cursor: pointer;
     box-shadow: 0 4px 12px rgba(197, 160, 89, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 0.4rem;
   }

   .sticky-wishlist {
     flex-shrink: 0;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     border: 1px solid rgba(255, 255, 255, 0.2);
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.1rem;
     cursor: pointer;
   }
   .sticky-wishlist.active {
     background: rgba(255, 59, 48, 0.15);
     color: #ff3b30;
     border-color: rgba(255, 59, 48, 0.3);
   }

   /* =====================================================================
      COMPACT COOKIE BANNER
      ===================================================================== */
   .cookie-banner-minimal {
     position: fixed;
     bottom: 0;
     left: 0;
     width: 100vw;
     z-index: 99998;
     background: rgba(20, 20, 20, 0.98);
     backdrop-filter: blur(10px);
     color: #fff;
     padding: 0.6rem 1rem;
     box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
     border-top: 1px solid rgba(197, 160, 89, 0.2);
     display: flex; /* Remove !important so JS can hide it */
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
   }
   
   @media (max-width: 768px) {
     .cookie-banner-minimal {
       bottom: 60px !important; /* Above mobile bottom nav */
     }
     /* If sticky CTA is also visible, the banner might overlap it. 
        Usually banners are fine to overlap CTA initially. */
   }

   .cookie-text {
     font-size: 0.75rem;
     line-height: 1.3;
     color: #ccc;
   }
   .cookie-text a {
     color: var(--gold-primary);
     text-decoration: underline;
   }

   .cookie-accept-btn {
     flex-shrink: 0;
     background: var(--gold-primary);
     color: #111;
     border: none;
     border-radius: 4px;
     padding: 0.4rem 0.8rem;
     font-weight: 700;
     font-size: 0.8rem;
     cursor: pointer;
   }

@media (max-width: 768px) {
  .sticky-mobile-cta {
    display: flex !important;
    bottom: 60px !important;
  }
}

/* Pro Scroll to Top Button */
.pro-scroll-top {
  position: fixed;
  bottom: 32px;
  right: 24px;
  z-index: 999;
  display: none;
  background: rgba(17, 17, 17, 0.8);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(197, 160, 89, 0.4);
  color: var(--gold-primary, #C5A059);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s, background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pro-scroll-top:hover {
  background: rgba(30, 30, 30, 0.95);
  transform: translateY(-2px);
}
.pro-scroll-top i {
  font-size: 1.2rem;
}
@media (max-width: 768px) {
  .pro-scroll-top {
    bottom: 85px !important; /* Above the mobile nav */
    right: 16px;
    width: 40px;
    height: 40px;
  }
  .pro-scroll-top i {
    font-size: 1rem;
  }
}

/* Premium Loader CSS */
.premium-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  pointer-events: none;
}

.loader-door {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  background-color: #0a0a0a;
  transition: transform 1.2s cubic-bezier(0.77, 0, 0.175, 1);
  z-index: 1;
}

.loader-door-top {
  top: 0;
  border-bottom: 1px solid rgba(212, 175, 55, 0.15);
}

.loader-door-bottom {
  bottom: 0;
  border-top: 1px solid rgba(212, 175, 55, 0.15);
}

/* Split animation */
.premium-loader.loaded .loader-door-top {
  transform: translateY(-100%);
}
.premium-loader.loaded .loader-door-bottom {
  transform: translateY(100%);
}

.premium-loader-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.premium-loader.loaded .premium-loader-content {
  opacity: 0;
  transform: scale(1.1);
}

.svg-key-container {
  width: 70px;
  height: 70px;
  margin-bottom: 24px;
  position: relative;
}

.premium-key-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-45deg); /* Elegant tilt */
}

/* SVG Line Drawing Animation */
.key-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: drawKey 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.key-path:nth-child(1) { animation-delay: 0.1s; }
.key-path:nth-child(2) { animation-delay: 0.3s; }
.key-path:nth-child(3) { animation-delay: 0.5s; }

@keyframes drawKey {
  100% {
    stroke-dashoffset: 0;
  }
}

.premium-text-container {
  position: relative;
  overflow: hidden;
  padding: 0 10px;
}

.premium-text {
  font-family: 'Cinzel', 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: #ffffff;
  letter-spacing: 6px;
  text-transform: uppercase;
  opacity: 0;
  animation: fadeTextIn 1s ease 1s forwards;
}

@keyframes fadeTextIn {
  to { opacity: 1; }
}

.light-sweep {
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
  transform: skewX(-25deg);
  animation: sweep 2s ease 1.3s forwards;
}

@keyframes sweep {
  0% { left: -150%; }
  100% { left: 200%; }
}

/* Add a gold glow after drawing */
.svg-key-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  height: 150%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(212, 175, 55, 0.15) 0%, transparent 60%);
  opacity: 0;
  animation: glowPulse 2s ease 1.2s forwards;
  z-index: -1;
}

@keyframes glowPulse {
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1); }
}

/* Golden Streak - fires when doors split */
.golden-streak {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 25%;
  height: 3px;
  z-index: 10;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.3) 20%, #d4af37 50%, #f5e6a3 70%, rgba(212, 175, 55, 0.3) 80%, transparent 100%);
  border-radius: 2px;
  box-shadow: 0 0 15px 3px rgba(212, 175, 55, 0.6), 0 0 40px 8px rgba(212, 175, 55, 0.3);
  opacity: 0;
  pointer-events: none;
}

.premium-loader.loaded .golden-streak {
  animation: streakAcross 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) 0.15s forwards;
}

@keyframes streakAcross {
  0% {
    left: -25%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    left: 110%;
    opacity: 0;
  }
}

/* Center Flash - a burst of light when streak passes center */
.center-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  z-index: 9;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(245, 230, 163, 0.8) 0%, rgba(212, 175, 55, 0.4) 30%, transparent 70%);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

.premium-loader.loaded .center-flash {
  animation: centerBurst 0.6s ease-out 0.35s forwards;
}

@keyframes centerBurst {
  0% {
    width: 0;
    height: 0;
    opacity: 0;
  }
  30% {
    width: 200px;
    height: 200px;
    opacity: 0.9;
  }
  100% {
    width: 600px;
    height: 600px;
    opacity: 0;
  }
}

/* Trailing sparkle particles */
.golden-streak::before,
.golden-streak::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  background: #f5e6a3;
  border-radius: 50%;
  transform: translateY(-50%);
  box-shadow: 0 0 8px 2px rgba(212, 175, 55, 0.8);
}

.golden-streak::before {
  right: 15%;
  width: 4px;
  height: 4px;
  opacity: 0.7;
}

.golden-streak::after {
  right: 30%;
  width: 3px;
  height: 3px;
  opacity: 0.5;
}

/* ==================== HERO PREMIUM REDESIGN ==================== */

/* Hero Title - Luxury Serif Typography */
.hero-title {
  font-family: 'Cinzel', 'Playfair Display', serif !important;
  font-size: 3.8rem !important;
  font-weight: 700 !important;
  letter-spacing: 3px !important;
  line-height: 1.15 !important;
  text-shadow: 0 4px 40px rgba(0,0,0,0.7) !important;
}

.hero-title .title-line {
  display: block;
  font-weight: 500;
  letter-spacing: 4px;
}

.hero-title .title-accent {
  font-size: 1.1em;
  letter-spacing: 8px;
}

/* Hero Description - Better readability */
.hero-description {
  font-size: 1.25rem !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.85) !important;
  max-width: 500px;
  text-shadow: 0 2px 20px rgba(0,0,0,0.6);
  margin-bottom: 2.5rem !important;
}

/* Hero CTA - Bigger, bolder */
.bg-hero-car .btn-primary {
  padding: 1.2rem 3rem !important;
  font-size: 1.15rem !important;
  letter-spacing: 1px;
  font-weight: 700;
  text-transform: uppercase;
}

/* Trust Badges */
.hero-trust-badges {
  display: flex;
  gap: 1.8rem;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}

.trust-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.trust-badge i {
  color: #d4af37;
  font-size: 0.95rem;
}

.trust-badge:hover {
  color: rgba(255,255,255,0.95);
  transition: color 0.2s ease;
}

/* Stronger hero overlay for text readability */
.bg-hero-car {
  background:
    linear-gradient(90deg, rgba(10,10,10,0.88) 0%, rgba(10,10,10,0.65) 45%, rgba(10,10,10,0.15) 75%, rgba(10,10,10,0.0) 100%),
    url('https://res.cloudinary.com/dw75elc2a/image/upload/w_1200,q_auto/v1753881089/hero/bugatti-chiron.jpg') right center/cover no-repeat !important;
}

/* ==================== HIDE EMPTY BADGES ==================== */
.cart-count:empty,
.favorites-count:empty,
.cart-count[data-count="0"],
.favorites-count[data-count="0"] {
  display: none !important;
}

/* ==================== LOGO SVG ==================== */
.logo-svg {
  flex-shrink: 0;
}

.logo {
  text-decoration: none !important;
}

/* ==================== RESPONSIVE TRUST BADGES ==================== */
@media (max-width: 768px) {
  .hero-trust-badges {
    gap: 1rem;
    margin-top: 1.5rem;
  }
  .trust-badge {
    font-size: 0.75rem;
  }
  .trust-badge i {
    font-size: 0.8rem;
  }
  .hero-title {
    letter-spacing: 1px !important;
  }
}

@media (max-width: 420px) {
  .hero-trust-badges {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* ==================== PREMIUM NAVIGATION BAR ==================== */
.nav {
  background: rgba(15, 15, 15, 0.95) !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.12) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(12px);
}

.nav-menu {
  justify-content: center !important;
  gap: 0 !important;
}

.nav-menu .nav-link {
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Inter', sans-serif;
  font-weight: 500 !important;
  font-size: 0.92rem !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  padding: 14px 28px !important;
  border-radius: 0 !important;
  position: relative;
  transition: color 0.3s ease !important;
  background: transparent !important;
}

.nav-menu .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  transition: width 0.3s ease;
}

.nav-menu .nav-link:hover,
.nav-menu .nav-link.active {
  color: #d4af37 !important;
  background: transparent !important;
}

.nav-menu .nav-link:hover::after,
.nav-menu .nav-link.active::after {
  width: 70%;
}

/* Separator dots between nav items */
.nav-menu li:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  background: rgba(212, 175, 55, 0.25);
  border-radius: 50%;
  vertical-align: middle;
}

/* Fix hero height to fill screen */
.hero-section, .bg-hero-car {
  min-height: calc(100vh - 135px) !important;
}

@media (max-width: 768px) {
  .hero-section, .bg-hero-car {
    min-height: calc(100vh - 100px) !important;
  }
}

/* ==================== PRODUCTS SECTION LUXURY REDESIGN ==================== */

/* Section Headers */
.section-title {
  font-family: 'Cinzel', 'Playfair Display', serif !important;
  font-size: 2.8rem !important;
  font-weight: 600 !important;
  color: #d4af37 !important;
  letter-spacing: 2px !important;
  text-align: center;
  margin-bottom: 0.5rem !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}

.section-subtitle {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.1rem !important;
  color: rgba(255,255,255,0.7) !important;
  text-align: center;
  max-width: 600px;
  margin: 0 auto 3rem auto !important;
  font-weight: 300 !important;
  letter-spacing: 1px;
}

/* Filter Tabs (Categories) */
.filter-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.2rem !important;
  margin-bottom: 3.5rem !important;
}

.filter-tabs .filter-tab {
  background: transparent !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: rgba(255,255,255,0.8) !important;
  padding: 10px 24px !important;
  border-radius: 30px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  transition: all 0.3s ease !important;
  display: flex;
  align-items: center;
  gap: 8px;
}

.filter-tabs .filter-tab i {
  color: rgba(212, 175, 55, 0.7) !important;
  font-size: 0.9rem !important;
  transition: color 0.3s ease !important;
}

.filter-tabs .filter-tab:hover {
  border-color: #d4af37 !important;
  color: #fff !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.15) !important;
}

.filter-tabs .filter-tab.active {
  background: rgba(212, 175, 55, 0.1) !important;
  border-color: #d4af37 !important;
  color: #d4af37 !important;
  box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.1), 0 4px 15px rgba(212, 175, 55, 0.2) !important;
}

.filter-tabs .filter-tab.active i {
  color: #d4af37 !important;
}

/* Product Cards */
.products {
  background: #0a0a0a !important; /* Pitch black for luxury */
}

.product-card {
  background: #111 !important;
  border: 1px solid rgba(212, 175, 55, 0.1) !important;
  border-radius: 12px !important;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.product-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.5), 0 0 20px rgba(212, 175, 55, 0.1) !important;
}

/* Fix inner image background */
.product-image {
  background: #000 !important; 
  padding: 0 !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.05) !important;
}

.product-image img {
  object-fit: cover !important;
  mix-blend-mode: normal !important;
}

/* Wishlist Button */
.wishlist-btn {
  background: rgba(10, 10, 10, 0.6) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1) !important;
  top: 12px !important;
  right: 12px !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
}

.wishlist-btn:hover {
  border-color: #d4af37 !important;
}

.wishlist-btn.active i {
  color: #d4af37 !important;
}

/* Product Info */
.product-info {
  padding: 1.5rem !important;
  background: linear-gradient(180deg, #111 0%, #0a0a0a 100%) !important;
}

.product-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.2rem !important;
  font-weight: 600 !important;
  color: #fff !important;
  margin-bottom: 0.8rem !important;
  letter-spacing: 0.5px;
}

.product-price {
  font-family: 'Inter', sans-serif !important;
  font-size: 1.15rem !important;
  color: #d4af37 !important; /* Gold price */
  font-weight: 600 !important;
}

.product-compare-price {
  color: rgba(255,255,255,0.4) !important;
  text-decoration-color: rgba(255,255,255,0.4) !important;
}

/* Product Buttons */
.add-to-cart-btn {
  background: transparent !important;
  border: 1px solid #d4af37 !important;
  color: #d4af37 !important;
  border-radius: 6px !important;
  padding: 0.8rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100% !important;
  margin-bottom: 0.6rem !important;
  transition: all 0.3s ease !important;
}

.add-to-cart-btn:hover {
  background: #d4af37 !important;
  color: #000 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3) !important;
}

.quick-view-btn {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  width: 100% !important;
  padding: 0.5rem !important;
  transition: color 0.3s ease !important;
}

.quick-view-btn:hover {
  color: #fff !important;
  background: transparent !important;
}

/* ==================== PAGINATION REDESIGN ==================== */
.pagination-container {
  margin-top: 4rem !important;
  border-top: 1px solid rgba(212, 175, 55, 0.1) !important;
  padding-top: 2.5rem !important;
}

.pagination-info {
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.5rem !important;
}

.pagination-controls {
  gap: 1rem !important;
}

.pagination-btn {
  background: transparent !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 4px !important;
  padding: 0.6rem 1.2rem !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease !important;
}

.pagination-btn:hover:not(:disabled) {
  border-color: #d4af37 !important;
  color: #fff !important;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
}

.pagination-btn:disabled {
  border-color: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.2) !important;
}

.pagination-numbers .page-num {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.5) !important;
  font-family: 'Cinzel', serif !important;
  font-size: 1.1rem !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  margin: 0 0.2rem !important;
  transition: all 0.3s ease !important;
}

.pagination-numbers .page-num:hover:not(.active) {
  color: #d4af37 !important;
}

.pagination-numbers .page-num.active {
  background: rgba(212, 175, 55, 0.1) !important;
  color: #d4af37 !important;
  border: 1px solid #d4af37 !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.2) !important;
}

/* ==================== FEATURES SECTION REDESIGN (POURQUOI CHOISIR) ==================== */
.features {
  background: #050505 !important;
  padding: 6rem 2rem !important;
  border-top: 1px solid rgba(212, 175, 55, 0.05) !important;
}

.features .section-title {
  margin-bottom: 4rem !important;
}

.features-grid {
  gap: 2rem !important;
}

.feature-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 2rem 1rem !important;
  text-align: center;
  transition: transform 0.4s ease !important;
  position: relative;
}

.feature-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  transition: width 0.4s ease;
}

.feature-card:hover {
  transform: translateY(-10px) !important;
  background: transparent !important;
}

.feature-card:hover::after {
  width: 60%;
}

.feature-icon {
  background: transparent !important;
  width: 80px !important;
  height: 80px !important;
  margin: 0 auto 1.5rem auto !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  border-radius: 50% !important;
  position: relative;
  transition: all 0.4s ease !important;
}

.feature-icon::before {
  content: '';
  position: absolute;
  inset: -5px;
  border: 1px dashed rgba(212, 175, 55, 0.15);
  border-radius: 50%;
  animation: rotateSpin 15s linear infinite;
}

@keyframes rotateSpin {
  100% { transform: rotate(360deg); }
}

.feature-card:hover .feature-icon {
  border-color: #d4af37 !important;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.15) !important;
}

.feature-icon i {
  color: #d4af37 !important;
  font-size: 2rem !important;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.feature-card h3 {
  font-family: 'Cinzel', serif !important;
  color: #fff !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  margin-bottom: 1rem !important;
  line-height: 1.4 !important;
}

.feature-card p {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.6) !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  font-weight: 300 !important;
}

/* ==================== ABOUT SECTION LUXURY REDESIGN ==================== */
.luxury-about {
  background: #0a0a0a !important;
  padding: 6rem 2rem !important;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

.about-text-content .section-title {
  text-align: left !important;
  margin-bottom: 1.5rem !important;
}

.luxury-paragraph {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.7) !important;
  font-size: 1.05rem !important;
  line-height: 1.8 !important;
  margin-bottom: 2.5rem !important;
}

.luxury-stats {
  display: flex;
  align-items: center;
  gap: 2.5rem;
}

.l-stat {
  display: flex;
  flex-direction: column;
}

.l-stat-number {
  font-family: 'Cinzel', serif !important;
  font-size: 2.5rem !important;
  color: #d4af37 !important;
  font-weight: 700 !important;
  line-height: 1;
  display: flex;
  align-items: flex-start;
}

.l-stat-unit {
  font-size: 1.2rem !important;
  margin-top: 0.2rem;
  margin-left: 2px;
}

.l-stat-label {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.85rem !important;
  margin-top: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.l-stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(212, 175, 55, 0.2);
}

.about-visual-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Premium Badge / Seal */
.luxury-badge {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: radial-gradient(circle, rgba(212,175,55,0.05) 0%, transparent 70%);
}

.luxury-badge::before {
  content: '';
  position: absolute;
  inset: 10px;
  border: 1px dashed rgba(212, 175, 55, 0.4);
  border-radius: 50%;
  animation: rotateSpin 20s linear infinite reverse;
}

.badge-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
}

.badge-year {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.8rem !important;
  color: rgba(255,255,255,0.4);
  letter-spacing: 3px;
  margin-bottom: 0.5rem;
}

.badge-brand {
  font-family: 'Cinzel', serif !important;
  font-size: 2rem !important;
  color: #d4af37;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 15px rgba(212,175,55,0.3);
}

.badge-quality {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  color: rgba(255,255,255,0.6);
  letter-spacing: 4px;
}

/* ==================== CONTACT SECTION LUXURY REDESIGN ==================== */
.luxury-contact {
  background: #111 !important;
  padding: 6rem 2rem !important;
  border-top: 1px solid rgba(255,255,255,0.03) !important;
}

.luxury-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 5rem;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .luxury-contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Contact Info Panel */
.contact-info-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.panel-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.5rem !important;
  color: #fff;
  margin-bottom: 1rem;
}

.panel-desc {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem !important;
  line-height: 1.6;
  margin-bottom: 2.5rem;
}

.l-contact-item {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.l-contact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37;
  font-size: 1.2rem;
  background: rgba(212, 175, 55, 0.05);
}

.l-contact-text {
  display: flex;
  flex-direction: column;
}

.l-label {
  font-family: 'Inter', sans-serif !important;
  color: rgba(255,255,255,0.4);
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.3rem;
}

.l-value {
  font-family: 'Inter', sans-serif !important;
  color: #fff;
  font-size: 1.05rem !important;
  font-weight: 500;
}

/* Contact Form Panel */
.contact-form-panel {
  background: #0a0a0a;
  padding: 3rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

.l-form-group {
  position: relative;
  margin-bottom: 2rem;
}

.l-input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.2) !important;
  padding: 10px 0 !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  transition: border-color 0.3s ease !important;
}

.l-input:focus {
  outline: none !important;
  border-bottom-color: #d4af37 !important;
}

.l-label-float {
  position: absolute;
  left: 0;
  top: 12px;
  color: rgba(255,255,255,0.4);
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem;
  pointer-events: none;
  transition: all 0.3s ease;
}

.l-input:focus ~ .l-label-float,
.l-input:not(:placeholder-shown) ~ .l-label-float {
  top: -12px;
  font-size: 0.75rem;
  color: #d4af37;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.l-submit-btn {
  background: transparent !important;
  border: 1px solid #d4af37 !important;
  color: #d4af37 !important;
  padding: 1rem 2rem !important;
  width: 100%;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.95rem !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: all 0.4s ease !important;
  cursor: pointer;
}

.l-submit-btn:hover {
  background: #d4af37 !important;
  color: #000 !important;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.3) !important;
}

.l-submit-btn:hover i {
  transform: translateX(5px);
}

.l-submit-btn i {
  transition: transform 0.3s ease;
}

/* ==================== FOOTER LUXURY REDESIGN ==================== */
.luxury-footer {
  background: #050505 !important;
  border-top: 1px solid rgba(212, 175, 55, 0.1) !important;
  padding: 5rem 0 2rem 0 !important;
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Inter', sans-serif !important;
}

.luxury-footer .footer-content {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  margin-bottom: 4rem !important;
}

@media (max-width: 992px) {
  .luxury-footer .footer-content {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  .luxury-footer .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

/* Brand Section */
.footer-brand {
  display: flex;
  flex-direction: column;
}

.footer-logo {
  font-family: 'Cinzel', serif !important;
  font-size: 2rem !important;
  color: #d4af37 !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  margin-bottom: 1rem !important;
  text-transform: uppercase;
}

.footer-brand p {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  margin-bottom: 2rem !important;
  max-width: 300px;
}

@media (max-width: 576px) {
  .footer-brand p {
    margin: 0 auto 2rem auto !important;
  }
}

.footer-social {
  display: flex;
  gap: 1rem;
}

@media (max-width: 576px) {
  .footer-social {
    justify-content: center;
  }
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d4af37 !important;
  transition: all 0.3s ease !important;
}

.footer-social a:hover {
  background: #d4af37 !important;
  color: #000 !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

/* Footer Sections (Links) */
.luxury-footer .footer-section h4 {
  font-family: 'Cinzel', serif !important;
  color: #fff !important;
  font-size: 1.1rem !important;
  letter-spacing: 1px !important;
  margin-bottom: 1.5rem !important;
  position: relative;
  display: inline-block;
}

.luxury-footer .footer-section h4::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 30px;
  height: 2px;
  background: #d4af37;
}

@media (max-width: 576px) {
  .luxury-footer .footer-section h4::after {
    left: 50%;
    transform: translateX(-50%);
  }
}

.luxury-footer .footer-section ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.luxury-footer .footer-section ul li {
  margin-bottom: 1rem !important;
}

.luxury-footer .footer-section ul li a {
  color: rgba(255,255,255,0.6) !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-size: 0.95rem !important;
  position: relative;
}

.luxury-footer .footer-section ul li a:hover {
  color: #d4af37 !important;
  padding-left: 5px;
}

@media (max-width: 576px) {
  .luxury-footer .footer-section ul li a:hover {
    padding-left: 0;
  }
}

/* Footer Bottom */
.luxury-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 2rem !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  margin-top: 2rem !important;
  font-size: 0.85rem !important;
  text-align: left;
}

@media (max-width: 768px) {
  .luxury-footer .footer-bottom {
    flex-direction: column-reverse;
    gap: 1rem;
    text-align: center;
  }
}

.luxury-footer .footer-bottom p {
  margin: 0 !important;
}

.footer-legal {
  display: flex;
  gap: 2rem;
}

.footer-legal a {
  color: rgba(255,255,255,0.4) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

.footer-legal a:hover {
  color: #fff !important;
}

/* ==================== PRODUCT DETAILS PAGE (PDP) LUXURY REDESIGN ==================== */

/* Top Navigation Fix for PDP */
.navbar-brand i {
  /* Hide the old FontAwesome key if it exists, assuming the SVG is used in index.html */
  /* Wait, the navbar in product.html still has the old <i> tag. We should replace it in HTML. */
}

/* Overall layout */
.product-detail-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  margin-top: 3rem;
  margin-bottom: 5rem;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

@media (max-width: 992px) {
  .product-detail-container {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
}

/* Gallery / Images */
.product-gallery-section {
  background: #050505 !important;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.03);
  overflow: hidden;
  position: relative;
}

.lux-main-image-container {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lux-main-image-container img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Remove old zoom button style and make it elegant */
.lux-zoom-btn {
  background: rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  color: #fff !important;
  bottom: 20px !important;
  right: 20px !important;
  border-radius: 50% !important;
  width: 45px !important;
  height: 45px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0 !important; /* Hide "Zoom" text */
  backdrop-filter: blur(4px);
  transition: all 0.3s ease !important;
}

.lux-zoom-btn::before {
  content: '\f00e'; /* fa-search-plus */
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: 1rem;
  color: #d4af37;
}

.lux-zoom-btn:hover {
  background: #d4af37 !important;
  border-color: #d4af37 !important;
}

.lux-zoom-btn:hover::before {
  color: #000;
}

/* Info Section (Right side) */
.product-info-section {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
}

.lux-hero-title {
  font-family: 'Cinzel', serif !important;
  font-size: 2.5rem !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  margin-bottom: 1rem !important;
  line-height: 1.2;
}

.lux-price-badge {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 2rem !important;
  display: flex !important;
  align-items: baseline !important;
}

.lux-price-badge span:first-child {
  font-family: 'Inter', sans-serif !important;
  font-size: 2rem !important;
  color: #d4af37 !important;
  font-weight: 600 !important;
}

.product-sku {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  color: rgba(255,255,255,0.4) !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: 1px;
}

.product-stock {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  margin-bottom: 2rem !important;
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
}

.product-stock.in {
  background: rgba(46, 204, 113, 0.1) !important;
  color: #2ecc71 !important;
  border: 1px solid rgba(46, 204, 113, 0.2) !important;
}

/* Add to cart module */
.lux-cart-module {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1.5rem !important;
  margin-bottom: 2rem !important;
}

.lux-cart-qty {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
}

.lux-cart-qty label {
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
}

.pdp-qty-input {
  background: #111 !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  color: #fff !important;
  font-family: 'Inter', sans-serif !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  width: auto !important;
  min-width: 80px;
}

/* Button Group Wrapper (we need to apply flex to the container of buttons in JS, but we can do it via nth-child if necessary. The JS has them as siblings in lux-cart-module) */
.lux-cart-module .add-to-cart-btn {
  background: transparent !important;
  border: 1px solid #d4af37 !important;
  color: #d4af37 !important;
  padding: 1.2rem !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 1rem !important;
  text-transform: uppercase;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
  width: 100% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.lux-cart-module .add-to-cart-btn:hover {
  background: #d4af37 !important;
  color: #000 !important;
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
}

.lux-cart-module .wishlist-btn {
  position: absolute;
  right: 0;
  top: 0;
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.4) !important;
  font-size: 1.5rem !important;
}

.lux-cart-module {
  position: relative; /* for wishlist absolute positioning */
}

.lux-cart-module .wishlist-btn.active, .lux-cart-module .wishlist-btn:hover {
  color: #d4af37 !important;
}

/* Trust Badges under Add to Cart */
.lux-trust {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  padding: 2rem 0 !important;
  margin: 3rem 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.lux-trust-badge {
  background: transparent !important;
  border: none !important;
  flex-direction: column !important;
  gap: 0.8rem !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.lux-trust-badge i {
  color: #d4af37 !important;
  font-size: 1.5rem !important;
}

.lux-trust-badge span {
  color: rgba(255,255,255,0.5) !important;
  font-size: 0.8rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Description Section */
.lux-specs {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 4rem !important;
}

.lux-specs .lux-section-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.5rem !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2rem !important;
}

.lux-specs p, .lux-desc-content {
  color: rgba(255,255,255,0.6) !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1.8 !important;
}

.read-more-btn {
  background: transparent !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  color: #d4af37 !important;
  border-radius: 30px !important;
}

.read-more-btn:hover {
  background: rgba(212, 175, 55, 0.1) !important;
}

/* Reviews Section */
.lux-comments {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-bottom: 4rem !important;
}

.lux-comments .lux-section-title {
  font-family: 'Cinzel', serif !important;
  font-size: 1.5rem !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.2) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2rem !important;
}

.luxury-review-section {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  padding: 3rem !important;
  box-shadow: none !important;
}

.luxury-review-title {
  font-family: 'Cinzel', serif !important;
  color: #d4af37 !important;
}

.auth-prompt-btn {
  background: transparent !important;
  border: 1px solid #d4af37 !important;
  color: #d4af37 !important;
  border-radius: 6px !important;
  font-family: 'Inter', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.8rem 2rem !important;
}

.auth-prompt-btn:hover {
  background: #d4af37 !important;
  color: #000 !important;
}

/* Recommendations Title */
h2[style*="color: var(--primary-color)"] {
  font-family: 'Cinzel', serif !important;
  color: #fff !important;
  font-size: 2rem !important;
  letter-spacing: 1px;
  margin-bottom: 2rem !important;
}