@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --color-gold-100: #FAF3E0;
  --color-gold-200: #F3E5AB;
  --color-gold-300: #E6CA65;
  --color-gold-400: #D4AF37;
  --color-gold-500: #C5A059;
  --color-gold-600: #AA771C;
  --color-gold-700: #8C5E13;
  --color-gold-800: #6B440C;
  
  --color-obsidian-900: #070708;
  --color-obsidian-800: #0E0E11;
  --color-obsidian-700: #141418;
  --color-obsidian-600: #1C1C22;
  --color-obsidian-500: #26262E;
  
  --color-cream-100: #FAF8F5;
  --color-cream-200: #F5EFE6;
  --color-cream-300: #EAE3D2;
}

/* Typography Classes */
.font-cinzel {
  font-family: 'Cinzel', serif;
}

.font-cormorant {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.font-jakarta {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

/* Smooth Theme Transitions */
body, header, nav, section, footer, div, a, p, h1, h2, h3, h4, span, button, input, select, textarea {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Gold Gradient Effects */
.gold-gradient-text {
  background: linear-gradient(135deg, #FFF0CA 0%, #D4AF37 40%, #F3E5AB 70%, #AA771C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-text-subtle {
  background: linear-gradient(135deg, #F5E2B3 0%, #D4AF37 50%, #C5A059 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-gradient-bg {
  background: linear-gradient(135deg, #AA771C 0%, #D4AF37 50%, #F3E5AB 100%);
}

.gold-gradient-bg-reverse {
  background: linear-gradient(135deg, #F3E5AB 0%, #D4AF37 50%, #AA771C 100%);
}

.gold-border-gradient {
  border-image: linear-gradient(135deg, #D4AF37 0%, rgba(212, 175, 55, 0.2) 50%, #D4AF37 100%) 1;
}

.gold-glow {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.22);
}

.gold-glow-lg {
  box-shadow: 0 0 45px rgba(212, 175, 55, 0.35);
}

.gold-glow-hover:hover {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
}

/* Glassmorphism */
.glass-panel {
  background: rgba(14, 14, 17, 0.75);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.15);
}

.glass-panel-light {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.3);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #070708;
}

html.light ::-webkit-scrollbar-track {
  background: #FAF8F5;
}

::-webkit-scrollbar-thumb {
  background: #2a251b;
  border-radius: 4px;
  border: 1px solid rgba(212, 175, 55, 0.3);
}

html.light ::-webkit-scrollbar-thumb {
  background: #C5A059;
}

::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Shimmer Animation */
@keyframes goldShimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.shimmer-effect {
  background: linear-gradient(
    90deg,
    rgba(212, 175, 55, 0) 0%,
    rgba(255, 240, 202, 0.3) 50%,
    rgba(212, 175, 55, 0) 100%
  );
  background-size: 200% 100%;
  animation: goldShimmer 3s infinite linear;
}

/* Floating Animation */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

.animate-float {
  animation: floatSlow 6s ease-in-out infinite;
}

/* Hero Cinematic Luxury Background */
@keyframes heroKenBurns {
  0% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.08) translate(-1%, -1%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}

.hero-luxury-bg {
  animation: heroKenBurns 22s ease-in-out infinite alternate;
  will-change: transform;
}

.hero-gold-glow {
  background: radial-gradient(circle at 50% 38%, rgba(212, 175, 55, 0.22) 0%, rgba(212, 175, 55, 0.05) 50%, transparent 80%);
}

/* Pulse Soft */
@keyframes pulseGold {
  0%, 100% {
    opacity: 0.2;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(1.05);
  }
}

.animate-pulse-gold {
  animation: pulseGold 4s ease-in-out infinite;
}

/* Luxury Card Hover effects */
.luxury-card {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.luxury-card:hover {
  transform: translateY(-6px);
  border-color: rgba(212, 175, 55, 0.5);
  box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.8), 0 0 25px rgba(212, 175, 55, 0.2);
}

.luxury-card:hover .product-img {
  transform: scale(1.06);
}

.product-img {
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Reveal Animations */
.reveal-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-fade-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-fade-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-fade-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-zoom-in {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-zoom-in.active {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delay helpers */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* Custom Badge Pill */
.luxury-badge {
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  color: #D4AF37;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Fancy Section Divider */
.royal-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.royal-divider::before,
.royal-divider::after {
  content: '';
  height: 1px;
  width: 50px;
  background: linear-gradient(90deg, transparent, #D4AF37, transparent);
}

/* Gold button hover wave */
.btn-gold {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
  background: linear-gradient(135deg, #D4AF37 0%, #F3E5AB 50%, #AA771C 100%);
  background-size: 200% auto;
  color: #070708;
}

.btn-gold:hover {
  background-position: right center;
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
  transform: translateY(-2px);
}

.btn-gold-outline {
  position: relative;
  border: 1px solid #D4AF37;
  color: #D4AF37;
  transition: all 0.4s ease;
  background: transparent;
}

.btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.12);
  border-color: #F3E5AB;
  color: #FFF0CA;
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.25);
  transform: translateY(-2px);
}

/* Smooth active mobile drawer transition */
#mobile-menu {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

#mobile-menu-backdrop {
  transition: opacity 0.3s ease;
}

/* Tab Active State */
.filter-tab.active {
  background: #D4AF37;
  color: #070708;
  border-color: #D4AF37;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Luxury Quote Marks */
.quote-icon {
  font-family: 'Cormorant Garamond', Georgia, serif;
  line-height: 1;
}

/* Prevent Horizontal Scrolling & Responsive Viewport Safeguards */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
  position: relative;
  -webkit-text-size-adjust: 100%;
}

/* Hide Scrollbar for Horizontal Touch Swiping on Mobile */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Fluid Responsive Typography & Touch Controls */
@media (max-width: 640px) {
  h1 {
    word-break: break-word;
  }
  
  input, select, textarea {
    font-size: 16px !important;
  }

  .luxury-card:hover {
    transform: translateY(-3px);
  }
}

/* ============================================================
   ROYAL LIGHT THEME (Majestic Alabaster & Imperial Gold)
============================================================ */
html.light body {
  background-color: #FAF8F5 !important;
  color: #1A1A22 !important;
}

/* Background Replacements */
html.light .bg-\[\#070708\],
html.light .bg-obsidian-950,
html.light .bg-obsidian-900,
html.light [class*="bg-obsidian-950"],
html.light [class*="bg-obsidian-900"] {
  background-color: #FAF8F5 !important;
}

html.light .bg-obsidian-850,
html.light .bg-obsidian-800,
html.light [class*="bg-obsidian-850"],
html.light [class*="bg-obsidian-800"] {
  background-color: #FFFFFF !important;
}

html.light .bg-\[\#0B0B0E\] {
  background-color: #F4EFE6 !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

/* 1. Hero Section in Royal Light */
html.light #hero {
  background-color: #FAF8F5 !important;
}

html.light #hero .hero-gold-glow {
  background: radial-gradient(circle at 50% 38%, rgba(212, 175, 55, 0.18) 0%, rgba(212, 175, 55, 0.03) 50%, transparent 80%) !important;
}

html.light #hero .bg-gradient-to-t {
  background: linear-gradient(to top, #FAF8F5 0%, rgba(250, 248, 245, 0.85) 45%, rgba(250, 248, 245, 0.72) 100%) !important;
}

html.light #hero .bg-gradient-to-r {
  background: linear-gradient(to right, rgba(250, 248, 245, 0.8) 0%, transparent 50%, rgba(250, 248, 245, 0.8) 100%) !important;
}

html.light #hero h1 {
  color: #111116 !important;
}

html.light #hero h1 .text-cream-100 {
  color: #2D2D38 !important;
}

html.light #hero p {
  color: #2F2F38 !important;
}

html.light #hero .border-white\/10,
html.light #hero .border-t {
  border-color: rgba(212, 175, 55, 0.3) !important;
}

html.light #hero span.text-white {
  color: #111116 !important;
}

html.light #hero p.text-gray-400 {
  color: #585866 !important;
}

/* 2. About Section in Royal Light */
html.light #about {
  background: linear-gradient(180deg, #FAF8F5 0%, #F5EFE6 50%, #FAF8F5 100%) !important;
}

html.light #about .bg-obsidian-900,
html.light #about .bg-obsidian-800\/80 {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

/* 3. Collections Section in Royal Light */
html.light #collections {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
}

html.light #collections .luxury-card {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.08) !important;
}

html.light #collections .luxury-card .relative.h-72 {
  background-color: #FAF8F5 !important;
}

html.light #collections .luxury-card h3 {
  color: #111116 !important;
}

html.light #collections .luxury-card p {
  color: #4B5563 !important;
}

/* 4. Why Choose Us Section in Royal Light */
html.light #why-us {
  background: linear-gradient(180deg, #FAF8F5 0%, #F4EFE6 100%) !important;
}

html.light #why-us .bg-obsidian-800\/90 {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}

/* 5. Bridal Section in Royal Light */
html.light #bridal {
  background: linear-gradient(180deg, #FAF8F5 0%, #F5EFE6 50%, #FAF8F5 100%) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
}

html.light #bridal h2 {
  color: #111116 !important;
}

html.light #bridal p {
  color: #374151 !important;
}

html.light #bridal li {
  color: #1F2937 !important;
}

html.light #bridal .border-t {
  border-color: rgba(212, 175, 55, 0.25) !important;
}

html.light #bridal img {
  filter: brightness(1) !important;
}

/* 6. Royal Gallery Section in Royal Light */
html.light #gallery {
  background: linear-gradient(180deg, #FAF8F5 0%, #FFFFFF 50%, #FAF8F5 100%) !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
}

html.light #gallery .gallery-grid-item {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 10px 25px rgba(212, 175, 55, 0.08) !important;
}

html.light #gallery .gallery-grid-item:hover {
  border-color: #D4AF37 !important;
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.18) !important;
}

html.light .gallery-filter-btn:not(.active) {
  color: #8C5E13 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  background-color: #FFFFFF !important;
}

html.light .gallery-filter-btn.active {
  background-color: #D4AF37 !important;
  color: #070708 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25) !important;
}

html.light #gallery .gallery-grid-item .relative {
  background-color: #FAF8F5 !important;
}

html.light #gallery .gallery-grid-item .border-t {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
}

html.light #gallery .gallery-grid-item h4 {
  color: #111116 !important;
}

html.light #gallery .gallery-grid-item p.text-\[10px\],
html.light #gallery .gallery-grid-item p.text-\[9px\] {
  color: #8C5E13 !important;
}

/* 7. New Arrivals Section in Royal Light */
html.light #new-arrivals {
  background-color: #FAF8F5 !important;
}

html.light #new-arrivals .product-item-card {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.08) !important;
}

html.light #new-arrivals .product-item-card:hover {
  border-color: #D4AF37 !important;
  box-shadow: 0 15px 35px rgba(212, 175, 55, 0.18) !important;
}

html.light #new-arrivals .product-item-card .relative {
  background-color: #FAF8F5 !important;
}

html.light #new-arrivals .product-item-card .bg-obsidian-900 {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.2) !important;
}

html.light #new-arrivals .product-item-card h3 {
  color: #111116 !important;
}

html.light #new-arrivals .product-item-card p.text-xs {
  color: #4B5563 !important;
}

html.light .filter-tab-btn:not(.active) {
  color: #8C5E13 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  background-color: #FFFFFF !important;
}

html.light .filter-tab-btn.active {
  background-color: #D4AF37 !important;
  color: #070708 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.25) !important;
}

/* Mega Menu & Modals in Royal Light */
html.light .mega-menu-panel {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

html.light .mega-menu-panel .w-full.h-28 {
  background-color: #FAF8F5 !important;
}

html.light #quick-view-modal > div {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

html.light #appointment-modal > div {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

/* 7. Private Suite Banner in Royal Light */
html.light section.bg-gradient-to-r {
  background: linear-gradient(135deg, #FAF8F5 0%, #F5EFE6 50%, #FAF8F5 100%) !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

html.light section.bg-gradient-to-r .w-16.h-16 {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
  color: #AA771C !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.15) !important;
}

/* 8. Testimonials in Royal Light */
html.light #testimonials {
  background-color: #FAF8F5 !important;
}

html.light #testimonials .bg-obsidian-800 {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
}

html.light #testimonials .quote-icon {
  color: rgba(212, 175, 55, 0.3) !important;
}

/* 9. Contact Section in Royal Light */
html.light #contact {
  background: linear-gradient(180deg, #FAF8F5 0%, #F2ECE0 100%) !important;
}

html.light #contact .bg-obsidian-800 {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.08) !important;
}

html.light #contact iframe {
  filter: none !important;
}

html.light #contact .absolute.bottom-3.left-3 {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #8C5E13 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
}

/* 10. Footer in Royal Light */
html.light footer {
  background-color: #F3ECE0 !important;
  border-top: 1px solid rgba(212, 175, 55, 0.35) !important;
  color: #4A4A58 !important;
}

html.light footer .bg-obsidian-900,
html.light footer .bg-obsidian-800 {
  background-color: #FAF8F5 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
  color: #8C5E13 !important;
}

html.light footer input {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: #111116 !important;
}

html.light footer .text-white {
  color: #111116 !important;
}

html.light footer a:hover {
  color: #AA771C !important;
}

html.light footer .border-b.border-white\/10 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Header in Royal Light */
html.light #main-header {
  background-color: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 4px 20px rgba(212, 175, 55, 0.08);
}

/* Floating Actions in Royal Light */
html.light #back-to-top {
  background-color: #FFFFFF !important;
  border-color: #D4AF37 !important;
  color: #AA771C !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.25) !important;
}

html.light #back-to-top:hover {
  background-color: #D4AF37 !important;
  color: #070708 !important;
}

/* Typography & Universal Color Overrides in Royal Light */
html.light .text-white {
  color: #111116 !important;
}

html.light .text-gray-200,
html.light .text-gray-300 {
  color: #2D2D38 !important;
}

html.light .text-gray-400 {
  color: #585866 !important;
}

html.light .text-gray-500 {
  color: #6E6E7D !important;
}

html.light .border-white\/10,
html.light .border-white\/5 {
  border-color: rgba(0, 0, 0, 0.08) !important;
}

/* Gold Highlights in Royal Light */
html.light .gold-gradient-text {
  background: linear-gradient(135deg, #8C5E13 0%, #AA771C 40%, #D4AF37 70%, #6B440C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

html.light .text-gold-200,
html.light .text-gold-300 {
  color: #8C5E13 !important;
}

html.light .text-gold-400 {
  color: #996515 !important;
}

/* Glass Panels in Royal Light */
html.light .glass-panel {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  box-shadow: 0 12px 35px rgba(212, 175, 55, 0.12), 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

/* Luxury Cards in Royal Light */
html.light .luxury-card,
html.light .product-item-card {
  background: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 10px 30px rgba(212, 175, 55, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

html.light .luxury-card .bg-black,
html.light .product-item-card .bg-black {
  background-color: #F8F5EE !important;
}

html.light .luxury-card span[class*="bg-black"],
html.light .product-item-card span[class*="bg-black"] {
  background-color: rgba(255, 255, 255, 0.95) !important;
  color: #8C5E13 !important;
  border-color: rgba(212, 175, 55, 0.45) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

html.light .luxury-card:hover,
html.light .product-item-card:hover {
  border-color: rgba(212, 175, 55, 0.65) !important;
  box-shadow: 0 20px 45px rgba(212, 175, 55, 0.22), 0 6px 18px rgba(0, 0, 0, 0.05) !important;
}

/* Badges in Royal Light */
html.light .luxury-badge {
  background: rgba(212, 175, 55, 0.12) !important;
  border-color: rgba(170, 119, 28, 0.4) !important;
  color: #8C5E13 !important;
}

/* Form Inputs in Royal Light */
html.light input,
html.light select,
html.light textarea {
  background-color: #FAF8F5 !important;
  color: #111116 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

html.light input:focus,
html.light select:focus,
html.light textarea:focus {
  border-color: #AA771C !important;
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.25) !important;
}

html.light input::placeholder,
html.light textarea::placeholder {
  color: #8E8E9A !important;
}

/* Mobile Drawer in Royal Light */
html.light #mobile-menu {
  background-color: #FAF8F5 !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
}

html.light #mobile-menu a.mobile-nav-link {
  color: #1A1A22 !important;
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

html.light #mobile-menu a.mobile-nav-link:hover {
  color: #AA771C !important;
}

/* Modals & Dialogs in Royal Light */
html.light #quick-view-modal > div,
html.light #appointment-modal > div,
html.light #story-modal > div,
html.light #store-locator-modal > div,
html.light #search-modal > div {
  background-color: #FAF8F5 !important;
  border-color: rgba(212, 175, 55, 0.4) !important;
  color: #111116 !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2), 0 0 35px rgba(212, 175, 55, 0.15) !important;
}

/* Buttons in Royal Light */
html.light .btn-gold-outline {
  border-color: #AA771C;
  color: #8C5E13;
}

html.light .btn-gold-outline:hover {
  background: rgba(212, 175, 55, 0.15);
  color: #6B440C;
}

html.light #luxury-toast {
  background-color: #FFFFFF !important;
  color: #111116 !important;
  border-color: #D4AF37 !important;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.15), 0 0 25px rgba(212, 175, 55, 0.15) !important;
}

html.light #luxury-toast p.text-gray-200 {
  color: #2D2D38 !important;
}

/* ============================================================
   LUXURY HEADER & UTILITY STYLES
============================================================ */

/* Top Satin Gold Announcement Bar */
.announcement-bar-gold {
  background: linear-gradient(90deg, #6B491D 0%, #8C642A 20%, #B0853E 50%, #8C642A 80%, #6B491D 100%);
  color: #FFF6E0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.announcement-ticker-item {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Header Luxury Navigation Links */
.lux-nav-link {
  position: relative;
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  transition: color 0.25s ease;
}

.lux-nav-link::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: #D4AF37;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translateX(-50%);
}

.lux-nav-link:hover::after,
.lux-nav-item:hover .lux-nav-link::after {
  width: 100%;
}

/* Mega Menu Dropdowns */
.mega-menu-container {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
  pointer-events: none;
}

.lux-nav-item:hover .mega-menu-container,
.lux-nav-item:focus-within .mega-menu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Header Icons */
.header-icon-btn {
  position: relative;
  transition: all 0.25s ease;
}

.header-icon-btn:hover {
  transform: translateY(-1.5px);
  color: #D4AF37;
}

.header-badge {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 9999px;
  background: #AA771C;
  color: #FFFFFF;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.header-badge.bump {
  transform: scale(1.3);
}

/* Light / Dark Mode Navbar Support */
html.light #main-header {
  background-color: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid rgba(212, 175, 55, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

html.light #main-header .lux-nav-link {
  color: #26262E;
}

html.light #main-header .lux-nav-link:hover {
  color: #AA771C;
}

html.light #main-header .header-brand-title {
  color: #111116;
}

html.light #main-header .header-brand-subtitle {
  color: #8C5E13;
}

html.light #main-header .header-icon-btn {
  color: #2C2C35;
}

html.light #main-header .header-icon-btn:hover {
  color: #AA771C;
}

html.light .mega-menu-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(212, 175, 55, 0.35) !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 25px rgba(212, 175, 55, 0.15) !important;
}

html.light .mega-menu-panel a {
  color: #33333F;
}

html.light .mega-menu-panel a:hover {
  color: #AA771C;
}

/* Dark Mode Headers */
html.dark #main-header {
  background-color: rgba(7, 7, 8, 0.96);
  border-bottom: 1px solid rgba(212, 175, 55, 0.2);
}

html.dark #main-header .lux-nav-link {
  color: #E2E2E8;
}

html.dark #main-header .lux-nav-link:hover {
  color: #F3E5AB;
}

html.dark #main-header .header-brand-title {
  color: #FFFFFF;
}

html.dark #main-header .header-brand-subtitle {
  color: #D4AF37;
}

html.dark #main-header .header-icon-btn {
  color: #D2D2DC;
}

html.dark #main-header .header-icon-btn:hover {
  color: #F3E5AB;
}

html.dark .mega-menu-panel {
  background: #0B0B0E !important;
  border: 1px solid rgba(212, 175, 55, 0.25) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.85), 0 0 35px rgba(212, 175, 55, 0.15) !important;
}

/* Slide-out Drawers (Cart, Wishlist, Store Locator, Search) */
html.light #cart-drawer,
html.light #wishlist-drawer,
html.light #store-locator-modal > div,
html.light #search-modal > div {
  background-color: #FFFFFF !important;
  border-color: rgba(212, 175, 55, 0.35) !important;
  color: #111116 !important;
}

html.light #cart-drawer .drawer-title,
html.light #wishlist-drawer .drawer-title,
html.light #store-locator-modal .modal-title,
html.light #search-modal .modal-title {
  color: #111116 !important;
}

html.dark #cart-drawer,
html.dark #wishlist-drawer,
html.dark #store-locator-modal > div,
html.dark #search-modal > div {
  background-color: #0B0B0E !important;
  border-color: rgba(212, 175, 55, 0.3) !important;
  color: #EDEDF2 !important;
}

/* Smooth Drawer Transitions */
.slide-drawer {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}