/* ==========================================================================
   SRI SAI KRISHNA JEWELLERS - ETIKOPPAKA
   Luxury Indian Traditional & Modern Fine Jewellery Stylesheet
   ========================================================================== */

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

:root {
  /* ==========================================================================
     DEFAULT SHOWROOM PALETTE: ROYAL WHITE & 22K GOLD (Pearl Alabaster Edition)
     ========================================================================== */
  --bg-primary: #fcfaf7;
  --bg-secondary: #f6f1e7;
  --bg-tertiary: #eee7d8;
  --bg-card: #ffffff;
  --bg-card-hover: #ffffff;
  --bg-glass: rgba(255, 255, 255, 0.92);
  --bg-sidebar: rgba(255, 253, 249, 0.98);
  --bg-top-bar: linear-gradient(90deg, #f7f3eb 0%, #fffdf8 50%, #f7f3eb 100%);
  --bg-rates: #f6f1e7;
  --bg-image-wrap: #faf7f2;
  --bg-calculator: linear-gradient(135deg, #ffffff 0%, #faf6ee 100%);
  --bg-artisan: radial-gradient(circle at 20% 50%, rgba(212, 160, 36, 0.08) 0%, rgba(246, 241, 231, 0.95) 70%);
  --bg-promo: linear-gradient(135deg, #f7f3eb 0%, #fffdf8 50%, #f4ede1 100%);
  
  --gold-100: #fffdf5;
  --gold-200: #fbf1d3;
  --gold-300: #d4a024;
  --gold-400: #c59218;
  --gold-500: #a3740e;
  --gold-600: #825a07;
  --gold-gradient: linear-gradient(135deg, #b8861b 0%, #e0ab35 50%, #946408 100%);
  --gold-gradient-subtle: linear-gradient(135deg, rgba(212, 160, 36, 0.14) 0%, rgba(181, 128, 19, 0.04) 100%);
  
  --silver-gradient: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  --silver-accent: #e2e8f0;
  
  --ruby-red: #9e142e;
  --ruby-glow: rgba(158, 20, 46, 0.35);
  --emerald-green: #0f633d;
  --whatsapp-green: #25d366;
  --whatsapp-dark: #128c7e;
  
  --text-main: #1c1511;
  --text-muted: #5e5349;
  --text-dim: #7f756a;
  --text-gold: #96670a;
  
  --border-gold: rgba(181, 128, 19, 0.28);
  --border-gold-glow: rgba(181, 128, 19, 0.55);
  --border-subtle: rgba(181, 128, 19, 0.14);
  
  /* Shadows & Glows */
  --glow-gold: 0 4px 20px rgba(181, 128, 19, 0.16);
  --glow-gold-lg: 0 8px 32px rgba(181, 128, 19, 0.25);
  --shadow-card: 0 6px 24px rgba(70, 50, 30, 0.08), 0 2px 6px rgba(0, 0, 0, 0.03);
  --shadow-elevated: 0 16px 40px rgba(70, 50, 30, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05);

  /* Typography */
  --font-royal: 'Cinzel', serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;

  /* Transitions */
  --transition-smooth: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-royal: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   DARK SHOWROOM PALETTE: OBSIDIAN BLACK & 22K GOLD
   ========================================================================== */
[data-theme="dark"],
html.theme-dark,
body.theme-dark {
  --bg-primary: #0a0507;
  --bg-secondary: #130a0e;
  --bg-tertiary: #1c0f15;
  --bg-card: rgba(26, 14, 20, 0.85);
  --bg-card-hover: rgba(38, 20, 29, 0.95);
  --bg-glass: rgba(19, 10, 14, 0.85);
  --bg-sidebar: rgba(12, 12, 11, 0.96);
  --bg-top-bar: linear-gradient(90deg, #100609 0%, #1f0c13 50%, #100609 100%);
  --bg-rates: #0e0e0d;
  --bg-image-wrap: #190e13;
  --bg-calculator: linear-gradient(135deg, rgba(30, 16, 23, 0.95), rgba(18, 9, 14, 0.95));
  --bg-artisan: radial-gradient(circle at 20% 50%, rgba(139, 19, 40, 0.2) 0%, rgba(10, 5, 7, 0.95) 70%);
  --bg-promo: linear-gradient(135deg, #0b0608 0%, #1d0c13 48%, #090507 100%);
  
  --gold-100: #fff9e6;
  --gold-200: #faeab1;
  --gold-300: #f3d274;
  --gold-400: #e5b94c;
  --gold-500: #d4a024;
  --gold-600: #b58013;
  --gold-gradient: linear-gradient(135deg, #fff2b2 0%, #e5b94c 50%, #9e6f0b 100%);
  --gold-gradient-subtle: linear-gradient(135deg, rgba(229, 185, 76, 0.2) 0%, rgba(181, 128, 19, 0.05) 100%);
  
  --silver-gradient: linear-gradient(135deg, #ffffff 0%, #cbd5e1 50%, #94a3b8 100%);
  --silver-accent: #e2e8f0;
  
  --ruby-red: #8b1328;
  --ruby-glow: rgba(139, 19, 40, 0.4);
  --emerald-green: #116b42;
  --whatsapp-green: #25d366;
  --whatsapp-dark: #128c7e;
  
  --text-main: #f8fafc;
  --text-muted: #cbd5e1;
  --text-dim: #94a3b8;
  --text-gold: #faeab1;
  
  --border-gold: rgba(229, 185, 76, 0.28);
  --border-gold-glow: rgba(229, 185, 76, 0.6);
  --border-subtle: rgba(255, 255, 255, 0.08);
  
  --glow-gold: 0 0 25px rgba(229, 185, 76, 0.22);
  --glow-gold-lg: 0 0 45px rgba(229, 185, 76, 0.35);
  --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.7);
  --shadow-elevated: 0 20px 40px -15px rgba(0, 0, 0, 0.85);
}

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

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--gold-300);
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 300;
  padding: 0.65rem 0.9rem;
  background: var(--gold-300);
  color: #17120a;
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.2s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-sans);
  line-height: 1.6;
  overflow-x: hidden;
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(212, 160, 36, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(181, 128, 19, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(212, 160, 36, 0.05) 0%, transparent 50%);
  background-attachment: fixed;
  animation: pageBreath 1.4s var(--ease-royal) both;
  padding-left: 238px;
}

body.theme-dark {
  background-image: 
    radial-gradient(circle at 10% 20%, rgba(139, 19, 40, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(212, 160, 36, 0.09) 0%, transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(139, 19, 40, 0.08) 0%, transparent 50%);
}

/* Persistent showroom wayfinding keeps the long catalogue easy to scan. */
.showroom-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 238px;
  overflow-y: auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1rem 1.2rem;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-gold);
  box-shadow: 10px 0 35px rgba(0, 0, 0, 0.05);
}
body.theme-dark .showroom-sidebar {
  box-shadow: 18px 0 45px rgba(0, 0, 0, 0.18);
}
.sidebar-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.sidebar-brand-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.sidebar-brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--gold-400); color: var(--gold-500); font: 700 0.78rem var(--font-royal); letter-spacing: 0.05em; flex-shrink: 0; }
body.theme-dark .sidebar-brand-mark { color: var(--gold-200); }
.sidebar-brand-copy { display: flex; flex-direction: column; gap: 0.15rem; }
.sidebar-brand-copy strong { color: var(--text-main); font: 600 0.92rem var(--font-royal); letter-spacing: 0.03em; }
.sidebar-brand-copy span { color: var(--text-dim); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; }
.sidebar-close-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(208, 163, 62, 0.08);
  border: 1px solid var(--border-gold);
  color: var(--text-main);
  font-size: 1.25rem;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.sidebar-close-btn:hover {
  background: rgba(208, 163, 62, 0.2);
  color: var(--gold-600);
}
.sidebar-label { color: var(--text-dim); display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; margin: 0 0 0.6rem 0.7rem; text-transform: uppercase; }
.sidebar-nav { display: flex; flex-direction: column; gap: 0.25rem; }
.side-nav-link { position: relative; display: grid; grid-template-columns: 24px 1fr; column-gap: 0.55rem; align-items: center; padding: 0.7rem 0.65rem; color: var(--text-muted); text-decoration: none; border-left: 2px solid transparent; transition: var(--transition-smooth); }
.side-nav-link i { grid-row: span 2; color: var(--gold-500); font-size: 1.05rem; text-align: center; }
.side-nav-link span { font-size: 0.78rem; font-weight: 600; }
.side-nav-link small { color: var(--text-dim); font-size: 0.64rem; }
.side-nav-link:hover, .side-nav-link.active { color: var(--gold-600); background: rgba(208, 163, 62, 0.12); border-left-color: var(--gold-400); transform: translateX(3px); }
.side-nav-link.active i { color: var(--gold-500); }
body.theme-dark .side-nav-link:hover, body.theme-dark .side-nav-link.active { color: #f5e6bd; background: rgba(208, 163, 62, 0.1); }
body.theme-dark .side-nav-link.active i { color: var(--gold-300); }
.sidebar-help-card { margin-top: auto; padding: 0.9rem; border: 1px solid var(--border-gold); background: var(--gold-gradient-subtle); }
.sidebar-help-kicker { display: block; color: var(--gold-500); font-size: 0.63rem; letter-spacing: 0.08em; text-transform: uppercase; }
body.theme-dark .sidebar-help-kicker { color: var(--gold-300); }
.sidebar-help-card strong { display: block; color: var(--text-main); font: 600 0.84rem var(--font-serif); margin: 0.45rem 0 0.7rem; }
.sidebar-help-card a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--whatsapp-green); font-size: 0.72rem; font-weight: 700; text-decoration: none; }
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: rgba(5, 3, 2, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.sidebar-backdrop.open {
  opacity: 1;
  pointer-events: auto;
  display: block;
}
body.sidebar-drawer-open {
  overflow: hidden;
}
/* Mobile nav is shown via the bottom section media query */

body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 242, 178, 0.08) 48%, transparent 72%);
  transform: translateX(-120%);
  animation: goldSweep 1.8s 0.15s var(--ease-reveal) both;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: #3a222c;
  border-radius: 4px;
  border: 1px solid var(--border-gold);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--gold-500);
}

/* Typography Utilities */
.font-royal {
  font-family: var(--font-royal);
  letter-spacing: 0.05em;
}
.font-serif {
  font-family: var(--font-serif);
}
.gold-text {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}
.silver-text {
  background: var(--silver-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

/* Container */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================================
   TOP BAR & LIVE RATES TICKER
   ========================================================================== */
.top-bar {
  background: var(--bg-top-bar);
  border-bottom: 1px solid var(--border-gold);
  font-size: 0.82rem;
  padding: 0.45rem 0;
  position: relative;
  z-index: 50;
  box-shadow: 0 1px 0 rgba(255, 242, 178, 0.05), 0 4px 15px rgba(0, 0, 0, 0.04);
}
body.theme-dark .top-bar {
  box-shadow: 0 1px 0 rgba(255, 242, 178, 0.05), 0 10px 35px rgba(0, 0, 0, 0.18);
}

.top-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.rate-ticker-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow-x: auto;
  white-space: nowrap;
  padding-bottom: 2px;
}

.rate-badge-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(229, 185, 76, 0.15);
  border: 1px solid var(--border-gold);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  color: var(--gold-600);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  animation: badgeGlow 3.5s ease-in-out infinite;
}
body.theme-dark .rate-badge-title {
  color: var(--gold-300);
}

.live-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: pulseGreen 2s infinite;
}

@keyframes pulseGreen {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.4); opacity: 0.5; }
}

.rate-item {
  color: var(--text-muted);
  font-weight: 500;
  display: inline-flex;
  gap: 0.35rem;
}
.rate-item strong {
  color: var(--text-gold);
  font-weight: 700;
}
body.theme-dark .rate-item strong {
  color: var(--gold-200);
}

.top-bar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.top-link {
  color: var(--text-muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: var(--transition-smooth);
}
.top-link:hover {
  color: var(--gold-300);
}

.rate-edit-btn {
  background: transparent;
  border: 1px solid rgba(229, 185, 76, 0.4);
  color: var(--gold-300);
  font-size: 0.72rem;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}
.rate-edit-btn:hover {
  background: var(--gold-400);
  color: #000;
}

.rate-refresh-btn {
  background: rgba(229, 185, 76, 0.12);
  border: 1px solid var(--border-gold);
  color: var(--gold-300);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.2rem 0.65rem;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--transition-smooth);
}
.rate-refresh-btn:hover {
  background: rgba(229, 185, 76, 0.25);
  color: var(--gold-100);
  box-shadow: 0 0 10px rgba(229, 185, 76, 0.3);
}

.spin-animation {
  animation: spinSlow 0.9s linear infinite;
}

@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.rate-timestamp-badge {
  color: var(--text-dim);
  font-size: 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}


/* ==========================================================================
   NAVIGATION BAR
   ========================================================================== */
.navbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-subtle);
  padding: 0.85rem 0;
  transition: var(--transition-smooth);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.brand-logo {
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.brand-title {
  font-family: var(--font-royal);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.15;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: var(--glow-gold);
}

.brand-subtitle {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  color: var(--gold-200);
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  list-style: none;
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border-gold);
  color: var(--gold-200);
  border-radius: 8px;
  width: 42px;
  height: 42px;
  font-size: 1.25rem;
  cursor: pointer;
}

.admin-login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(229, 185, 76, 0.45);
  border-radius: 8px;
  background: transparent;
  color: var(--gold-200);
  padding: 0.38rem 0.65rem;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
}

.admin-login-btn:hover {
  background: rgba(229, 185, 76, 0.14);
}

.password-field-wrap { position: relative; }
.password-field-wrap input { width: 100%; padding-right: 3rem; }
.password-toggle-btn { position: absolute; top: 50%; right: 0.65rem; display: grid; width: 34px; height: 34px; place-items: center; color: var(--text-dim); background: transparent; border: 0; border-radius: 5px; cursor: pointer; transform: translateY(-50%); }
.password-toggle-btn:hover, .password-toggle-btn:focus-visible { color: var(--gold-300); background: rgba(229, 185, 76, 0.1); }

.nav-link {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  transition: var(--transition-smooth);
  position: relative;
  padding: 0.25rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--gold-gradient);
  transition: var(--transition-smooth);
}

.nav-link:hover {
  color: var(--gold-200);
}
.nav-link:hover::after {
  width: 100%;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.btn-shortlist-nav {
  position: relative;
  background: rgba(229, 185, 76, 0.12);
  border: 1px solid var(--border-gold);
  color: var(--gold-200);
  padding: 0.55rem 1rem;
  border-radius: 25px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}

.btn-shortlist-nav:hover {
  background: rgba(229, 185, 76, 0.25);
  box-shadow: var(--glow-gold);
  transform: translateY(-2px);
}

.shortlist-badge {
  background: var(--ruby-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.btn-whatsapp-nav {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #ffffff;
  text-decoration: none;
  padding: 0.55rem 1.15rem;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
  transition: var(--transition-smooth);
}

.btn-whatsapp-nav:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.5);
  color: #ffffff;
}

/* ==========================================================================
   HERO BANNER
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 82vh;
  display: flex;
  align-items: center;
  padding: 4.5rem 0;
  overflow: hidden;
  background: radial-gradient(circle at 70% 50%, rgba(139, 19, 40, 0.28) 0%, rgba(10, 5, 7, 0.95) 75%),
              linear-gradient(to right, rgba(10, 5, 7, 0.98) 35%, rgba(10, 5, 7, 0.6) 100%);
}

.hero-bg-visual {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  height: 100%;
  z-index: 1;
  opacity: 0.45;
  mix-blend-mode: lighten;
  pointer-events: none;
}

.hero-bg-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  mask-image: radial-gradient(circle at 60% 50%, black 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 60% 50%, black 40%, transparent 80%);
  animation: heroImageDrift 16s ease-in-out infinite alternate;
}

.hero-content {
  position: relative;
  z-index: 10;
  max-width: 680px;
}

.hero-content > * {
  opacity: 0;
  animation: revealUp 0.85s var(--ease-reveal) forwards;
}

.hero-content > :nth-child(1) { animation-delay: 0.35s; }
.hero-content > :nth-child(2) { animation-delay: 0.5s; }
.hero-content > :nth-child(3) { animation-delay: 0.65s; }
.hero-content > :nth-child(4) { animation-delay: 0.8s; }
.hero-content > :nth-child(5) { animation-delay: 0.95s; }

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(229, 185, 76, 0.12);
  border: 1px solid var(--border-gold);
  padding: 0.35rem 0.95rem;
  border-radius: 30px;
  font-size: 0.8rem;
  color: var(--gold-300);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  box-shadow: 0 0 0 rgba(229, 185, 76, 0);
  animation: revealUp 0.85s var(--ease-reveal) 0.35s forwards, pillGlow 4s 1.5s ease-in-out infinite;
}

.hero-title {
  font-family: var(--font-royal);
  font-size: clamp(2.4rem, 5vw, 3.8rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1.25rem;
  color: #ffffff;
}

.hero-description {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 2rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
}

.hero-badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-bottom: 2.2rem;
}

.pill-badge {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 185, 76, 0.25);
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-gold);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

.btn-primary-gold {
  background: var(--gold-gradient);
  color: #1a0f12;
  font-weight: 700;
  padding: 0.85rem 1.8rem;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.96rem;
  border: none;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 20px rgba(212, 160, 36, 0.35);
  position: relative;
  overflow: hidden;
}

.btn-primary-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 35%;
  transform: translateX(-180%) skewX(-18deg);
  background: rgba(255, 255, 255, 0.32);
  transition: transform 0.7s var(--ease-reveal);
}

.btn-primary-gold:hover::after { transform: translateX(390%) skewX(-18deg); }

.btn-primary-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(212, 160, 36, 0.55);
}

.btn-outline-gold {
  background: transparent;
  border: 1px solid var(--gold-400);
  color: var(--gold-200);
  font-weight: 600;
  padding: 0.85rem 1.6rem;
  border-radius: 30px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.94rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-outline-gold:hover {
  background: rgba(229, 185, 76, 0.15);
  border-color: var(--gold-300);
  transform: translateY(-2px);
}

/* ==========================================================================
   FEATURES / TRUST STRIP
   ========================================================================== */
.trust-strip {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  padding: 2.2rem 0;
  position: relative;
  z-index: 20;
}

.trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.75rem;
}

.trust-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 8px;
  transition: var(--transition-smooth);
  animation: revealUp 0.75s var(--ease-reveal) both;
}

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

.trust-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(229, 185, 76, 0.12);
  border: 1px solid var(--border-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  font-size: 1.35rem;
  flex-shrink: 0;
  transition: var(--transition-bounce);
}

.trust-card:hover .trust-icon-box { transform: translateY(-5px) rotate(-4deg); box-shadow: var(--glow-gold); }

/* ==========================================================================\n+   CINEMATIC JEWELLERY PROMOTION
   ========================================================================== */
.promo-media-section {
  position: relative;
  overflow: hidden;
  padding: 5.5rem 0 4.5rem;
  background: linear-gradient(135deg, #0b0608 0%, #1d0c13 48%, #090507 100%);
  border-bottom: 1px solid var(--border-gold);
}

.promo-media-section::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 0%, rgba(229, 185, 76, 0.07) 48%, transparent 72%);
  animation: goldSweep 8s ease-in-out infinite;
}

.promo-media-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr); gap: 4rem; align-items: center; }
.promo-video-stage { min-width: 0; }
.promo-video-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border-gold-glow); border-radius: 4px; background: #050304; box-shadow: 0 22px 70px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(229, 185, 76, 0.04); }
.promo-video-frame::before, .promo-video-frame::after { content: ''; position: absolute; z-index: 3; width: 42px; height: 42px; border-color: var(--gold-300); border-style: solid; pointer-events: none; }
.promo-video-frame::before { top: 14px; left: 14px; border-width: 1px 0 0 1px; }
.promo-video-frame::after { right: 14px; bottom: 14px; border-width: 0 1px 1px 0; }
.promo-video { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.9) contrast(1.06); transition: transform 1.2s var(--ease-reveal), filter 0.7s ease; }
.promo-video-frame:hover .promo-video { transform: scale(1.035); filter: saturate(1.08) contrast(1.08); }
.promo-video-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 3, 4, 0.08), transparent 45%, rgba(5, 3, 4, 0.72)); }
.promo-video-caption { position: absolute; z-index: 4; left: 1.25rem; bottom: 1.1rem; display: flex; align-items: center; gap: 0.45rem; color: var(--gold-100); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.promo-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #edb84b; box-shadow: 0 0 12px #edb84b; animation: pulseGreen 1.8s infinite; }
.promo-video-control { position: absolute; z-index: 5; right: 1rem; bottom: 0.8rem; width: 43px; height: 43px; border: 1px solid rgba(255, 249, 230, 0.65); border-radius: 50%; background: rgba(10, 5, 7, 0.58); backdrop-filter: blur(10px); color: var(--gold-100); cursor: pointer; font-size: 1.05rem; transition: var(--transition-bounce); }
.promo-video-control:hover { background: var(--gold-gradient); color: #180c0f; transform: scale(1.12); box-shadow: var(--glow-gold); }
.promo-video-meta { display: flex; justify-content: space-between; gap: 1rem; padding-top: 0.8rem; color: var(--text-dim); font-size: 0.72rem; }
.promo-video-meta i { color: var(--gold-400); margin-right: 0.25rem; }
.promo-copy-panel { position: relative; max-width: 520px; }
.promo-copy-panel h2 { margin: 0.75rem 0 1rem; color: var(--gold-100); font-family: var(--font-royal); font-size: clamp(1.8rem, 3vw, 3.1rem); line-height: 1.17; }
.promo-copy-panel > p { max-width: 480px; color: var(--text-muted); font-family: var(--font-serif); font-size: 1.18rem; line-height: 1.65; }
.promo-stat-row { display: flex; gap: 2rem; margin: 1.8rem 0 2rem; }
.promo-stat-row div { display: flex; flex-direction: column; gap: 0.1rem; }
.promo-stat-row strong { color: var(--gold-300); font-family: var(--font-royal); font-size: 1.2rem; }
.promo-stat-row span { color: var(--text-dim); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.promo-cta { border-radius: 4px; }
.promo-image-rail { position: relative; z-index: 2; display: grid; grid-template-columns: 1.35fr repeat(3, 1fr); gap: 0.8rem; margin-top: 2.4rem; }
.promo-image-card { position: relative; height: 145px; overflow: hidden; border: 1px solid var(--border-gold); background: #12080c; }
.promo-image-card-large { height: 185px; }
.promo-image-card img { width: 100%; height: 100%; display: block; object-fit: cover; filter: saturate(0.8); transition: transform 0.8s var(--ease-reveal), filter 0.8s ease; }
.promo-image-card:hover img { transform: scale(1.1); filter: saturate(1.15); }
.promo-image-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent 42%, rgba(5, 3, 4, 0.9)); pointer-events: none; }
.promo-image-card figcaption { position: absolute; z-index: 2; left: 0.7rem; bottom: 0.6rem; color: var(--gold-100); font-family: var(--font-royal); font-size: 0.68rem; letter-spacing: 0.05em; }
.promo-gold-orbit { position: absolute; border: 1px solid rgba(229, 185, 76, 0.1); border-radius: 50%; pointer-events: none; animation: orbitFloat 12s ease-in-out infinite; }
.promo-orbit-one { width: 520px; height: 520px; right: -260px; top: -180px; }
.promo-orbit-two { width: 300px; height: 300px; left: -170px; bottom: -160px; animation-delay: -4s; }

.trust-info h4 {
  font-family: var(--font-royal);
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--gold-200);
  margin-bottom: 0.25rem;
}

.trust-info p {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.4;
}

/* ==========================================================================
   LIVE ESTIMATOR & BULLION RATES BAR
   ========================================================================== */
.calculator-section {
  padding: 2.5rem 0 1rem;
}

.calculator-card {
  background: var(--bg-calculator);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  animation: revealUp 0.9s var(--ease-reveal) 0.2s both;
}
body.theme-dark .calculator-card {
  background: linear-gradient(135deg, rgba(30, 16, 23, 0.95), rgba(18, 9, 14, 0.95));
}

.calculator-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold-gradient);
  animation: goldLine 4s ease-in-out infinite;
}

.calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.calc-title-box h3 {
  font-family: var(--font-royal);
  font-size: 1.25rem;
  color: var(--text-gold);
}
body.theme-dark .calc-title-box h3 {
  color: var(--gold-200);
}

.calc-title-box p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.calc-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
  align-items: flex-end;
}

.calc-input-group label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold-600);
  margin-bottom: 0.4rem;
  font-weight: 600;
}
body.theme-dark .calc-input-group label {
  color: var(--gold-300);
}

.calc-input-group input,
.calc-input-group select {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  color: var(--text-main);
  padding: 0.65rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
  transition: var(--transition-smooth);
}
body.theme-dark .calc-input-group input,
body.theme-dark .calc-input-group select {
  background: rgba(10, 5, 7, 0.8);
  color: #fff;
}

.calc-input-group input:focus,
.calc-input-group select:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 15px rgba(229, 185, 76, 0.3);
}

.calc-live-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--gold-500);
  background: rgba(229, 185, 76, 0.12);
  border: 1px solid rgba(208, 163, 62, 0.35);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
}
body.theme-dark .calc-live-tag {
  color: var(--gold-300);
}

.calc-body-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 1.75rem;
  align-items: stretch;
  margin-top: 1.25rem;
}

@media (max-width: 820px) {
  .calc-body-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.calc-inputs-column {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.calc-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.calc-chip {
  background: var(--bg-secondary);
  border: 1px solid var(--border-gold);
  color: var(--text-muted);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.18s ease;
}
body.theme-dark .calc-chip {
  background: rgba(255, 255, 255, 0.05);
  color: #c9c3b6;
}

.calc-chip:hover {
  background: rgba(208, 163, 62, 0.15);
  border-color: var(--gold-400);
  color: var(--gold-600);
}
body.theme-dark .calc-chip:hover {
  color: #fff;
}

.calc-chip.active {
  background: linear-gradient(135deg, #d4a024, #b8861b);
  border-color: #ffd56b;
  color: #120a05;
  font-weight: 700;
}

.calc-summary-column {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}

.calc-breakdown-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1.25rem 1.35rem;
  box-shadow: var(--shadow-card);
}
body.theme-dark .calc-breakdown-card {
  background: linear-gradient(145deg, rgba(26, 17, 12, 0.95), rgba(16, 11, 8, 0.98));
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.breakdown-kicker {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-500);
  margin-bottom: 0.85rem;
}
body.theme-dark .breakdown-kicker {
  color: var(--gold-400);
}

.calc-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.42rem 0;
}

.calc-breakdown-row strong {
  color: var(--text-main);
  font-weight: 600;
}

.calc-breakdown-divider {
  height: 1px;
  background: rgba(208, 163, 62, 0.25);
  margin: 0.75rem 0;
}

.calc-total-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.35rem;
}

.calc-total-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.theme-dark .calc-total-label {
  color: var(--gold-200);
}

.calc-total-value {
  font-size: 1.65rem;
  font-weight: 800;
  color: var(--text-gold);
  font-family: var(--font-royal);
  text-shadow: 0 0 12px rgba(212, 160, 36, 0.15);
}
body.theme-dark .calc-total-value {
  color: #ffd56b;
  text-shadow: 0 0 12px rgba(212, 160, 36, 0.3);
}

.calc-inquire-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.2rem;
  width: 100%;
  font-size: 0.92rem;
  font-weight: 700;
  border-radius: 8px;
  text-decoration: none;
}

/* ==========================================================================
   CATALOGUE FILTER BAR & SEARCH
   ========================================================================== */
.catalog-section {
  padding: 3.5rem 0 5rem;
}

.section-head {
  text-align: center;
  margin-bottom: 2.5rem;
}

.section-tag {
  display: inline-block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-400);
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.section-title {
  font-family: var(--font-royal);
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  color: var(--text-main);
  margin-bottom: 0.75rem;
}
body.theme-dark .section-title {
  color: #fff;
}

.section-subtitle {
  color: var(--text-muted);
  font-size: 1.05rem;
  font-family: var(--font-serif);
  max-width: 600px;
  margin: 0 auto;
}

.filter-control-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 1.25rem;
  margin-bottom: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: var(--shadow-card);
  animation: revealUp 0.8s var(--ease-reveal) 0.35s both;
}

.filter-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.category-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.category-pills::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.filter-btn {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
  padding: 0.5rem 1.1rem;
  border-radius: 20px;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
  position: relative;
  overflow: hidden;
}
body.theme-dark .filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 185, 76, 0.2);
}

.filter-btn:hover {
  background: rgba(229, 185, 76, 0.15);
  color: var(--gold-600);
}
body.theme-dark .filter-btn:hover {
  color: var(--gold-200);
}

.filter-btn.active {
  background: var(--gold-gradient);
  color: #1a0f12;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(212, 160, 36, 0.35);
}

.filter-btn::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--gold-100);
  transform: translateX(-50%);
  transition: width 0.35s var(--ease-reveal);
}

.filter-btn.active::after, .filter-btn:hover::after { width: 55%; }

.search-box-wrap {
  position: relative;
  min-width: 250px;
}

.search-box-wrap input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 0.5rem 1rem 0.5rem 2.25rem;
  color: var(--text-main);
  font-size: 0.88rem;
  outline: none;
  transition: var(--transition-smooth);
}
body.theme-dark .search-box-wrap input {
  background: rgba(10, 5, 7, 0.8);
  color: #fff;
}

.search-box-wrap input:focus {
  border-color: var(--gold-400);
  box-shadow: 0 0 12px rgba(229, 185, 76, 0.25);
}

.search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-500);
  font-size: 0.85rem;
}
body.theme-dark .search-icon {
  color: var(--gold-400);
}

.filter-sub-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 0.85rem;
  font-size: 0.82rem;
}

.type-filter-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.type-filter-group::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.chip-filter {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-dim);
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-size: 0.78rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.chip-filter:hover,
.chip-filter.active {
  border-color: var(--gold-400);
  color: var(--gold-200);
  background: rgba(229, 185, 76, 0.1);
}

.product-count-display {
  color: var(--text-dim);
  font-style: italic;
}

/* ==========================================================================
   PRODUCT GRID & CARDS
   ========================================================================== */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 2rem;
}

.product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  overflow: hidden;
  transition: var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: var(--shadow-card);
  animation: cardReveal 0.8s var(--ease-reveal) both;
  transform-origin: center bottom;
}

.product-card:nth-child(1) { animation-delay: 0.05s; }
.product-card:nth-child(2) { animation-delay: 0.1s; }
.product-card:nth-child(3) { animation-delay: 0.15s; }
.product-card:nth-child(4) { animation-delay: 0.2s; }
.product-card:nth-child(5) { animation-delay: 0.25s; }
.product-card:nth-child(6) { animation-delay: 0.3s; }

.product-card:hover {
  transform: translateY(-8px) scale(1.012);
  border-color: var(--gold-400);
  box-shadow: var(--glow-gold), var(--shadow-elevated);
}

.card-image-wrap {
  position: relative;
  width: 100%;
  padding-top: 100%; /* 1:1 Aspect ratio */
  background: var(--bg-image-wrap);
  overflow: hidden;
  cursor: pointer;
}

.card-image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-image-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 242, 178, 0.18) 50%, transparent 65%);
  transform: translateX(-130%);
  transition: transform 0.8s var(--ease-reveal);
}

.product-card:hover .card-image-wrap::after { transform: translateX(130%); }

.product-card:hover .card-image-wrap img {
  transform: scale(1.08);
}

.card-badges {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 5;
}

.badge-pill {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.25rem 0.65rem;
  border-radius: 4px;
  backdrop-filter: blur(8px);
}

.badge-ready {
  background: rgba(17, 107, 66, 0.88);
  color: #fff;
  border: 1px solid rgba(34, 197, 94, 0.4);
}

.badge-custom {
  background: rgba(139, 19, 40, 0.88);
  color: var(--gold-100);
  border: 1px solid var(--border-gold);
}

.badge-sku {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  color: var(--gold-600);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.25rem 0.55rem;
  border-radius: 4px;
  z-index: 5;
  font-family: var(--font-royal);
}
body.theme-dark .badge-sku {
  background: rgba(10, 5, 7, 0.75);
  color: var(--gold-300);
}

.btn-shortlist-heart {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  color: var(--ruby-red);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: var(--transition-smooth);
}
body.theme-dark .btn-shortlist-heart {
  background: rgba(19, 10, 14, 0.8);
  color: #fff;
}

.btn-shortlist-heart:hover {
  background: var(--ruby-red);
  transform: scale(1.15);
  color: #fff;
  box-shadow: 0 0 15px rgba(139, 19, 40, 0.6);
}

.btn-shortlist-heart.active {
  background: var(--ruby-red);
  color: #fff;
  border-color: #ff4d6d;
}

.card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.card-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
  font-size: 0.75rem;
}

.card-purity {
  color: var(--gold-500);
  font-weight: 700;
  text-transform: uppercase;
}
body.theme-dark .card-purity {
  color: var(--gold-400);
}

.card-weight {
  background: var(--bg-secondary);
  border: 1px solid var(--border-subtle);
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: var(--text-main);
  font-weight: 600;
}

.card-title {
  font-family: var(--font-royal);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-main);
  margin-bottom: 0.35rem;
}
body.theme-dark .card-title {
  color: #ffffff;
}

.card-telugu-name {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--gold-600);
  margin-bottom: 0.85rem;
  opacity: 0.9;
}
body.theme-dark .card-telugu-name {
  color: var(--gold-200);
  opacity: 0.85;
}

.card-specs-mini {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
  line-height: 1.4;
  flex-grow: 1;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.65rem;
  margin-top: auto;
}

.btn-inquire-whatsapp {
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #ffffff;
  border: none;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  text-decoration: none;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-inquire-whatsapp:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
}

.btn-view-details {
  background: var(--gold-gradient-subtle);
  border: 1px solid var(--border-gold);
  color: var(--text-main);
  font-weight: 700;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.theme-dark .btn-view-details {
  background: linear-gradient(135deg, rgba(229, 185, 76, 0.22), rgba(184, 138, 34, 0.4));
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.btn-view-label {
  font-size: 0.8rem;
  font-weight: 700;
}

.btn-view-details:hover {
  background: var(--gold-gradient);
  color: #1a0f12;
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(212, 160, 36, 0.45);
}

/* ==========================================================================
   HANDMADE ARTISAN HERITAGE SPOTLIGHT
   ========================================================================== */
.artisan-section {
  padding: 5rem 0;
  background: radial-gradient(circle at 20% 50%, rgba(139, 19, 40, 0.2) 0%, rgba(10, 5, 7, 0.95) 70%);
  border-top: 1px solid var(--border-gold);
  border-bottom: 1px solid var(--border-gold);
  position: relative;
}

.artisan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 3.5rem;
  align-items: center;
}

.artisan-image-box {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border-gold);
  box-shadow: var(--glow-gold-lg);
}

.artisan-image-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.artisan-tag-badge {
  position: absolute;
  bottom: 1.25rem;
  left: 1.25rem;
  background: rgba(10, 5, 7, 0.88);
  border: 1px solid var(--border-gold);
  border-radius: 8px;
  padding: 0.5rem 1rem;
  backdrop-filter: blur(8px);
}

.artisan-tag-badge h5 {
  font-family: var(--font-royal);
  color: var(--gold-300);
  font-size: 0.85rem;
}

.artisan-tag-badge p {
  color: var(--text-dim);
  font-size: 0.72rem;
}

.artisan-content h2 {
  font-family: var(--font-royal);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  color: #fff;
  line-height: 1.2;
  margin-bottom: 1.25rem;
}

.artisan-content p {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-family: var(--font-serif);
  font-size: 1.2rem;
}

.craft-steps-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 2rem;
}

.craft-step-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold-gradient);
  color: #1a0f12;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.step-text h5 {
  color: var(--gold-200);
  font-family: var(--font-royal);
  font-size: 0.94rem;
  margin-bottom: 0.15rem;
}

.step-text p {
  font-size: 0.84rem;
  color: var(--text-dim);
  font-family: var(--font-sans);
  line-height: 1.4;
  margin-bottom: 0;
}

/* ==========================================================================
   CUSTOM ORDER REQUEST DESK
   ========================================================================== */
.custom-order-section {
  padding: 4.5rem 0;
}

.custom-card {
  background: linear-gradient(135deg, #1c0e14 0%, #100609 100%);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: var(--shadow-elevated);
}

.custom-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--gold-300);
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: rgba(10, 5, 7, 0.7);
  border: 1px solid var(--border-gold);
  color: #fff;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  outline: none;
  font-family: inherit;
  transition: var(--transition-smooth);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--gold-300);
  box-shadow: 0 0 15px rgba(229, 185, 76, 0.3);
}

/* ==========================================================================
   STORE VISIT & VIDEO CALL BANNER
   ========================================================================== */
.store-section {
  padding: 4rem 0 5rem;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-gold);
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem;
}

.store-info-box {
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  padding: 2rem;
}

.store-info-box h3 {
  font-family: var(--font-royal);
  font-size: 1.4rem;
  color: var(--gold-200);
  margin-bottom: 1.25rem;
}

.store-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.store-icon {
  color: var(--gold-400);
  font-size: 1.2rem;
  margin-top: 2px;
}

.store-cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
}

.btn-call-shop {
  background: var(--gold-gradient);
  color: #100609;
  font-weight: 700;
  padding: 0.65rem 1.4rem;
  border-radius: 25px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  transition: var(--transition-smooth);
}

.btn-call-shop:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-gold);
}

/* ==========================================================================
   SHORTLIST INQUIRY TRAY (DRAWER)
   ========================================================================== */
.shortlist-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  z-index: 99;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.shortlist-drawer-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.shortlist-drawer {
  position: fixed;
  top: 0;
  right: -420px;
  width: 100%;
  max-width: 420px;
  height: 100%;
  background: #140a0f;
  border-left: 1px solid var(--border-gold);
  z-index: 100;
  transition: right 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
}

.shortlist-drawer.open {
  right: 0;
}

.drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-gold);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(10, 5, 7, 0.9);
}

.drawer-header h3 {
  font-family: var(--font-royal);
  font-size: 1.15rem;
  color: var(--gold-200);
}

.btn-close-drawer {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1.35rem;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.btn-close-drawer:hover {
  color: #fff;
}

.drawer-body {
  padding: 1.25rem;
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.empty-shortlist-notice {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-dim);
}

.empty-shortlist-notice i {
  font-size: 2.5rem;
  color: var(--gold-500);
  margin-bottom: 0.85rem;
  opacity: 0.6;
}

.shortlist-item-card {
  background: rgba(26, 14, 20, 0.9);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  padding: 0.75rem;
  display: flex;
  gap: 0.85rem;
  align-items: center;
  position: relative;
}

.shortlist-item-img {
  width: 65px;
  height: 65px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--border-gold);
}

.shortlist-item-info {
  flex-grow: 1;
}

.shortlist-item-info h5 {
  font-family: var(--font-royal);
  font-size: 0.88rem;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.shortlist-item-info p {
  font-size: 0.76rem;
  color: var(--gold-300);
}

.btn-remove-shortlist {
  background: transparent;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.4rem;
  transition: var(--transition-smooth);
}

.btn-remove-shortlist:hover {
  color: #ff4d6d;
}

.drawer-footer {
  padding: 1.25rem;
  border-top: 1px solid var(--border-gold);
  background: rgba(10, 5, 7, 0.95);
}

.drawer-summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.drawer-summary-row strong {
  color: var(--gold-200);
}

.btn-send-all-whatsapp {
  width: 100%;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #ffffff;
  border: none;
  padding: 0.85rem 1rem;
  border-radius: 30px;
  font-weight: 700;
  font-size: 0.92rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: var(--transition-smooth);
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.35);
}

.btn-send-all-whatsapp:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(37, 211, 102, 0.5);
}

/* Floating Shortlist Button (Bottom Right) */
.floating-shortlist-btn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 35;
  background: var(--bg-card);
  border: 1px solid var(--gold-400);
  color: var(--gold-200);
  padding: 0.75rem 1.25rem;
  border-radius: 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.8), var(--glow-gold);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  cursor: pointer;
  transition: var(--transition-bounce);
}

.floating-shortlist-btn:hover {
  transform: scale(1.05) translateY(-3px);
  border-color: var(--gold-200);
}

/* ==========================================================================
   PRODUCT DETAIL MODAL
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(6px);
  z-index: 110;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.modal-backdrop.open {
  opacity: 1;
  pointer-events: auto;
}

.modal-content-card {
  background: #14090e;
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  width: 100%;
  max-width: 860px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: var(--shadow-elevated), var(--glow-gold-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.btn-close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--border-gold);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10;
  transition: var(--transition-smooth);
}

.btn-close-modal:hover {
  background: var(--ruby-red);
  transform: rotate(90deg);
}

.modal-media-col {
  position: relative;
  background: #000;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-media-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal-media-actions { position: absolute; top: 1rem; right: 1rem; display: flex; gap: 0.45rem; z-index: 5; }
.modal-media-actions button { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; background: rgba(12, 12, 10, 0.72); border: 1px solid var(--border-gold); border-radius: 50%; cursor: pointer; }
.modal-media-actions button:hover { color: #17120a; background: var(--gold-300); }
.modal-image-dots { position: absolute; bottom: 0.8rem; left: 50%; display: flex; gap: 0.35rem; transform: translateX(-50%); }
.modal-image-dots span { width: 6px; height: 6px; background: rgba(255, 255, 255, 0.55); border-radius: 50%; }
.modal-image-dots span.active { width: 18px; background: var(--gold-300); border-radius: 4px; }

.modal-info-col {
  padding: 2rem;
  display: flex;
  flex-direction: column;
}

.modal-purity-tag {
  color: var(--gold-300);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

.modal-title {
  font-family: var(--font-royal);
  font-size: 1.45rem;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.25rem;
}

.modal-telugu-title {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  color: var(--gold-200);
  margin-bottom: 1.25rem;
}

.modal-rating-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; font-size: 0.72rem; }
.modal-rating-row > span:first-child { padding: 0.25rem 0.45rem; color: #17120a; background: #e5b94c; border-radius: 4px; font-weight: 800; }
.modal-rating-row > span:first-child i { font-size: 0.65rem; }
.modal-rating-row strong { color: var(--text-muted); font-weight: 600; }
.modal-rating-row > span:last-child { color: var(--gold-300); }
.modal-price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; padding: 0.7rem 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.modal-price-row strong { color: var(--gold-200); font-size: 1.25rem; }
.modal-price-row span { color: var(--text-dim); font-size: 0.65rem; text-align: right; }
.modal-choice-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0.85rem 0; color: var(--text-dim); font-size: 0.72rem; }
.modal-choice { padding: 0.38rem 0.65rem; color: var(--text-muted); background: transparent; border: 1px solid var(--border-subtle); border-radius: 5px; cursor: pointer; font: inherit; }
.modal-choice.active, .modal-choice:hover { color: var(--gold-200); border-color: var(--gold-400); background: rgba(229, 185, 76, 0.1); }
.modal-highlights { margin-bottom: 0.9rem; }
.modal-highlights h3 { margin-bottom: 0.55rem; color: var(--text-main); font-size: 0.82rem; }
.modal-highlight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
.modal-highlight-grid div { display: flex; align-items: center; gap: 0.4rem; min-width: 0; padding: 0.45rem; color: var(--text-muted); background: rgba(255, 255, 255, 0.035); border-radius: 5px; font-size: 0.68rem; }
.modal-highlight-grid i { flex: 0 0 auto; color: var(--gold-300); font-size: 0.9rem; }
.modal-highlight-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.modal-specs-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.5rem;
  font-size: 0.86rem;
}

.modal-specs-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.modal-specs-table td {
  padding: 0.55rem 0;
}

.modal-specs-table td:first-child {
  color: var(--text-dim);
  width: 45%;
}

.modal-specs-table td:last-child {
  color: #fff;
  font-weight: 600;
}

.modal-description {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  margin-bottom: 1.75rem;
}

.modal-actions-row {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

body.light-theme .modal-price-row { border-color: rgba(57, 48, 33, 0.12); }
body.light-theme .modal-highlight-grid div { background: rgba(157, 112, 22, 0.06); }

/* ==========================================================================
   RATE EDIT MODAL (FOR SHOP OWNER)
   ========================================================================== */
.rate-modal-card {
  background: #14090e;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  width: 100%;
  max-width: 460px;
  padding: 2rem;
  box-shadow: var(--shadow-elevated);
}

.admin-login-card {
  background: #14090e;
  border: 1px solid var(--border-gold);
  border-radius: 16px;
  width: min(100%, 420px);
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow-elevated), var(--glow-gold);
}

.admin-login-icon {
  color: var(--gold-400);
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.admin-login-card h2 {
  font-family: var(--font-royal);
  color: var(--gold-100);
  margin: 0.5rem 0;
}

.admin-login-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin-bottom: 1.25rem;
}

.admin-login-card form {
  display: grid;
  gap: 0.55rem;
}

.admin-login-card label {
  color: var(--gold-200);
  font-size: 0.8rem;
  font-weight: 700;
  margin-top: 0.35rem;
}

.admin-login-card input {
  width: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  color: #fff;
  padding: 0.75rem;
  font: inherit;
}

.admin-login-card input:focus {
  outline: 2px solid var(--gold-400);
  outline-offset: 1px;
}

.admin-login-card small {
  display: block;
  color: var(--text-dim);
  font-size: 0.72rem;
  margin-top: 1rem;
}

.admin-login-error {
  min-height: 1.2rem;
  color: #fda4af !important;
  margin: 0 !important;
}

.admin-portal-card {
  width: min(1180px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  background: linear-gradient(145deg, rgba(26, 14, 20, 0.98), rgba(12, 7, 10, 0.99));
  border: 1px solid var(--border-gold-glow);
  border-radius: 12px;
  box-shadow: var(--shadow-elevated), var(--glow-gold);
  padding: 1.5rem;
}

.admin-portal-header { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border-subtle); padding-bottom: 1.25rem; margin-bottom: 1.25rem; }
.admin-portal-header h2 { color: var(--gold-100); font-family: var(--font-royal); font-size: clamp(1.2rem, 2vw, 1.7rem); margin: 0.4rem 0; }
.admin-portal-header p, .admin-catalogue-list p { color: var(--text-dim); font-size: 0.82rem; }
.admin-portal-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.85fr); gap: 1.5rem; }
.product-admin-form, .admin-catalogue-list { min-width: 0; }
.admin-form-heading { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.admin-form-heading h3 { color: var(--gold-200); font-family: var(--font-royal); font-size: 0.98rem; }
.admin-form-heading h3 span { color: var(--gold-400); font-family: var(--font-sans); font-size: 0.8rem; margin-left: 0.25rem; }
.admin-reset-btn, .admin-storage-note { background: transparent; border: 0; color: var(--text-dim); font-size: 0.72rem; }
.admin-reset-btn { cursor: pointer; text-decoration: underline; }
.admin-storage-note { white-space: nowrap; }
.admin-storage-note i { color: var(--gold-400); }
.admin-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.admin-field { display: flex; flex-direction: column; gap: 0.3rem; }
.admin-field-wide { grid-column: 1 / -1; }
.admin-field label { color: var(--text-muted); font-size: 0.72rem; font-weight: 600; }
.admin-field input, .admin-field select, .admin-field textarea { width: 100%; border: 1px solid rgba(229, 185, 76, 0.2); border-radius: 5px; background: rgba(0, 0, 0, 0.25); color: var(--text-main); font: inherit; font-size: 0.78rem; padding: 0.62rem 0.7rem; outline: none; }
.admin-field textarea { resize: vertical; min-height: 5rem; }
.admin-field input:focus, .admin-field select:focus, .admin-field textarea:focus { border-color: var(--gold-400); box-shadow: 0 0 0 2px rgba(229, 185, 76, 0.1); }
.admin-field select option { background: var(--bg-secondary); }
.admin-submit-btn { width: 100%; justify-content: center; margin-top: 1rem; }
.admin-catalogue-list { border-left: 1px solid var(--border-subtle); padding-left: 1.25rem; }
.admin-product-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 0.65rem; border-top: 1px solid var(--border-subtle); padding: 0.75rem 0; }
.admin-product-row img { width: 48px; height: 48px; object-fit: cover; border-radius: 5px; border: 1px solid var(--border-gold); }
.admin-product-row strong, .admin-product-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-product-row strong { color: var(--text-main); font-size: 0.76rem; }
.admin-product-row span { color: var(--text-dim); font-size: 0.68rem; margin-top: 0.2rem; }
.admin-product-actions { display: flex; gap: 0.3rem; }
.admin-icon-btn { background: transparent; border: 1px solid var(--border-gold); border-radius: 4px; color: var(--gold-300); cursor: pointer; padding: 0.35rem; }
.admin-icon-btn:hover { background: rgba(229, 185, 76, 0.15); }
.admin-icon-btn.danger { color: #fb7185; border-color: rgba(251, 113, 133, 0.35); }
.admin-empty-state { border: 1px dashed var(--border-gold); border-radius: 7px; color: var(--text-dim); padding: 2rem 1rem; text-align: center; }
.admin-empty-state i { color: var(--gold-400); display: block; font-size: 2rem; margin-bottom: 0.5rem; }
.admin-empty-state span { display: block; font-size: 0.72rem; margin-top: 0.25rem; }
.card-price { color: var(--gold-200); font-family: var(--font-royal); font-size: 1rem; font-weight: 700; margin: 0.45rem 0; }
.admin-rates-panel { border-top: 1px solid var(--border-subtle); margin-top: 1.5rem; padding-top: 1.25rem; }
.admin-rates-panel p { color: var(--text-dim); font-size: 0.72rem; margin-top: 0.25rem; }
.admin-rate-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: end; gap: 0.8rem; }
.admin-rate-grid .btn-primary-gold { min-height: 2.55rem; justify-content: center; white-space: nowrap; }

@media (max-width: 900px) {
  .admin-rate-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-rate-grid .btn-primary-gold { grid-column: 1 / -1; }
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: #080305;
  border-top: 1px solid var(--border-gold);
  padding: 4rem 0 2rem;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.footer-col h4 {
  font-family: var(--font-royal);
  color: var(--gold-200);
  font-size: 1rem;
  margin-bottom: 1.25rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  transition: var(--transition-smooth);
}

.footer-col a:hover {
  color: var(--gold-300);
  padding-left: 4px;
}

.footer-bottom-bar {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 1.5rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
}

/* ==========================================================================
   TOAST NOTIFICATION
   ========================================================================== */
.toast-notice {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(19, 10, 14, 0.95);
  border: 1px solid var(--gold-400);
  color: var(--gold-200);
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  box-shadow: var(--glow-gold);
  font-size: 0.88rem;
  font-weight: 600;
  z-index: 150;
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.toast-notice.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

@keyframes pageBreath {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@keyframes goldSweep {
  0% { opacity: 0; transform: translateX(-120%); }
  25% { opacity: 1; }
  70%, 100% { opacity: 0; transform: translateX(120%); }
}

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

@keyframes cardReveal {
  from { opacity: 0; transform: translateY(24px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroImageDrift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.5%, -0.5%, 0); }
}

@keyframes pillGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 185, 76, 0); }
  50% { box-shadow: 0 0 24px rgba(229, 185, 76, 0.16); }
}

@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(229, 185, 76, 0); }
  50% { box-shadow: 0 0 18px rgba(229, 185, 76, 0.18); }
}

@keyframes goldLine {
  0%, 100% { opacity: 0.65; transform: scaleX(0.75); transform-origin: left; }
  50% { opacity: 1; transform: scaleX(1); transform-origin: left; }
}

@keyframes orbitFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.45; }
  50% { transform: translate3d(18px, 12px, 0) rotate(12deg); opacity: 0.9; }
}

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

/* ==========================================================================
   RESPONSIVE QUERIES
   ========================================================================== */
@media (max-width: 992px) {
  body { padding-left: 0 !important; }
  .showroom-sidebar { 
    transform: translateX(-105%); 
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1); 
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.85); 
    z-index: 1050;
    width: 300px;
    max-width: 84vw;
    display: flex !important;
  }
  .showroom-sidebar.open { 
    transform: translateX(0); 
  }
  .sidebar-backdrop { 
    position: fixed; 
    inset: 0; 
    z-index: 1040; 
    display: block; 
    background: rgba(5, 3, 2, 0.72); 
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0; 
    pointer-events: none; 
    transition: opacity 0.3s ease; 
  }
  .sidebar-backdrop.open { 
    opacity: 1; 
    pointer-events: auto; 
  }
  .sidebar-close-btn {
    display: flex;
  }
  .hero-section {
    min-height: auto;
    padding: 3.5rem 0;
  }
  .nav-links {
    display: none !important;
  }
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
  }
  .nav-inner {
    flex-wrap: nowrap;
  }
  .nav-links.mobile-open {
    display: none !important;
  }
  .promo-media-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .promo-copy-panel { max-width: 680px; }
}

@media (max-width: 768px) {
  .mobile-quick-actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(5, 1fr); padding: 0.4rem 0.2rem calc(0.4rem + env(safe-area-inset-bottom)); background: rgba(12, 12, 11, 0.97); border-top: 1px solid rgba(208, 163, 62, 0.28); backdrop-filter: blur(18px); gap: 0; }
  .mobile-quick-actions .mob-nav-item,
  .mobile-quick-actions a,
  .mobile-quick-actions button { position: relative; display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; padding: 0.3rem 0.1rem 0.28rem; color: #a09891; background: transparent; border: 0; font: inherit; font-size: 0.57rem; font-weight: 700; text-decoration: none; letter-spacing: 0.01em; cursor: pointer; transition: color 0.18s; -webkit-tap-highlight-color: transparent; }
  .mobile-quick-actions i { font-size: 1.1rem; margin-bottom: 0.05rem; }
  .mobile-quick-actions .mob-nav-item.active,
  .mobile-quick-actions a.active,
  .mobile-quick-actions button.active { color: #f1d57d; }
  .mobile-quick-actions .mob-nav-item.active::before,
  .mobile-quick-actions a.active::before { content: ''; position: absolute; top: 0; left: 25%; right: 25%; height: 2px; background: var(--gold-400); border-radius: 0 0 2px 2px; }
  .mobile-quick-actions a[href*="wa.me"] i { color: #25d366; }
  .mobile-quick-actions a[href*="wa.me"].active,
  .mobile-quick-actions a[href*="wa.me"]:not(.active) { color: #25d366; }
  body { padding-bottom: 4.2rem; }
  .top-bar { padding: 0.3rem 0; }
  .rate-ticker-wrap { width: 100%; gap: 0.7rem; }
  .rate-item:not(:nth-of-type(2)), .rate-timestamp-badge { display: none; }
  .rate-refresh-btn { margin-left: auto; }
  .top-bar-actions { display: none; }
  .top-bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .top-bar-actions {
    width: 100%;
    justify-content: space-between;
  }
  .admin-login-btn {
    margin-left: auto;
  }
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .btn-primary-gold, .btn-outline-gold {
    width: 100%;
    justify-content: center;
  }
  .floating-shortlist-btn {
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
    right: 1.25rem;
  }
  .toast-notice { bottom: calc(4.6rem + env(safe-area-inset-bottom)); max-width: calc(100vw - 2rem); text-align: center; }
  .admin-portal-card { width: calc(100% - 1rem); padding: 1rem; }
  .admin-portal-layout { grid-template-columns: 1fr; }
  .admin-catalogue-list { border-left: 0; border-top: 1px solid var(--border-subtle); padding-left: 0; padding-top: 1.25rem; }
  .admin-form-grid { grid-template-columns: 1fr; }
  .admin-field-wide { grid-column: auto; }
  .promo-media-section { padding: 3.5rem 0 3rem; }
  .promo-image-rail { grid-template-columns: repeat(2, 1fr); }
  .promo-image-card, .promo-image-card-large { height: 135px; }
  .promo-video-meta { flex-direction: column; gap: 0.35rem; }
}

/* ==========================================================================
   THEME STYLES - WHITE & GOLD (DEFAULT) + OBSIDIAN DARK MODE
   ========================================================================== */
body,
.navbar,
.product-card,
.calculator-card,
.filter-control-panel,
.store-info-box,
.custom-card,
.promo-media-section,
.shortlist-drawer,
.drawer-header,
.modal-content-card,
.rate-modal-card,
.admin-login-card,
.admin-portal-card,
.toast-notice { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }

/* Obsidian Dark Theme Overrides */
[data-theme="dark"],
body.theme-dark {
  --bg-primary: #090909;
  --bg-secondary: #10100f;
  --bg-tertiary: #171613;
  --bg-card: rgba(22, 21, 18, 0.85);
  --bg-card-hover: rgba(31, 29, 24, 0.96);
  --bg-glass: rgba(14, 14, 13, 0.85);
  --border-gold: rgba(208, 163, 62, 0.3);
  --border-gold-glow: rgba(235, 195, 96, 0.7);
  --shadow-card: 0 18px 42px -22px rgba(0, 0, 0, 0.92);
  --shadow-elevated: 0 28px 65px -28px rgba(0, 0, 0, 0.98);
}

body.theme-dark {
  background-image: radial-gradient(circle at 75% 0%, rgba(193, 143, 42, 0.08), transparent 30%), linear-gradient(180deg, #090909 0%, #0d0d0c 55%, #090909 100%);
  color: var(--text-main);
}

body.theme-dark .top-bar {
  background: #0b0b0a;
  border-bottom-color: rgba(208, 163, 62, 0.2);
}
body.theme-dark .rate-item { color: #a6a39a; }
body.theme-dark .rate-item strong { color: #e7c874; }
body.theme-dark .top-link { color: #9e9b93; }

body.theme-dark .navbar {
  background: rgba(10, 10, 9, 0.86);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.theme-dark .nav-link { color: #b2afa6; }
body.theme-dark .nav-link:hover { color: var(--gold-300); }

body.theme-dark .hero-section {
  background: linear-gradient(90deg, #090909 0%, rgba(9, 9, 9, 0.76) 43%, rgba(9, 9, 9, 0.28) 100%);
}
body.theme-dark .hero-bg-visual { opacity: 0.58; mix-blend-mode: normal; }
body.theme-dark .hero-title { color: #f8fafc; }
body.theme-dark .hero-description { color: #c5c1b7; }
body.theme-dark .trust-strip { background: #10100f; border-color: rgba(208, 163, 62, 0.2); }
body.theme-dark .calculator-card { background: #121210; border-color: rgba(208, 163, 62, 0.22); }
body.theme-dark .filter-control-panel { background: rgba(18, 18, 16, 0.74); border-color: rgba(255, 255, 255, 0.09); }
body.theme-dark .product-card { background: #151512; border-color: rgba(255, 255, 255, 0.1); }
body.theme-dark .promo-media-section { background: linear-gradient(180deg, #0e0e0d 0%, #13120f 50%, #0b0b0a 100%); }
body.theme-dark .store-section { background: #10100f; }
body.theme-dark .store-info-box, body.theme-dark .custom-card { background: #151512; border-color: rgba(255, 255, 255, 0.09); }
body.theme-dark .shortlist-drawer { background: #13120f; border-color: rgba(208, 163, 62, 0.3); }
body.theme-dark .drawer-header { background: #171613; }
body.theme-dark .modal-content-card, body.theme-dark .rate-modal-card, body.theme-dark .admin-login-card, body.theme-dark .admin-portal-card { background: #151512; color: #f8fafc; }

/* Default White & Gold (Light Theme) Refinements */
body:not(.theme-dark),
body.light-theme {
  color: var(--text-main);
}
body:not(.theme-dark) .top-bar,
body.light-theme .top-bar { background: var(--bg-top-bar); color: var(--text-muted); border-bottom-color: var(--border-gold); }
body:not(.theme-dark) .rate-item,
body.light-theme .rate-item { color: var(--text-muted); }
body:not(.theme-dark) .top-link,
body.light-theme .top-link { color: var(--text-muted); }
body:not(.theme-dark) .navbar,
body.light-theme .navbar { background: rgba(255, 253, 248, 0.94); border-bottom-color: rgba(181, 128, 19, 0.2); }
body:not(.theme-dark) .nav-link,
body.light-theme .nav-link { color: #5a4f44; }
body:not(.theme-dark) .nav-link:hover,
body.light-theme .nav-link:hover { color: #9a6b0c; }
body:not(.theme-dark) .brand-subtitle,
body.light-theme .brand-subtitle { color: #8a6414; }
body:not(.theme-dark) .btn-shortlist-nav,
body.light-theme .btn-shortlist-nav { color: #715817; background: rgba(188, 142, 34, 0.08); }
body:not(.theme-dark) .hero-section,
body.light-theme .hero-section { background: linear-gradient(90deg, #fcfaf7 0%, rgba(252, 250, 247, 0.92) 43%, rgba(252, 250, 247, 0.35) 100%); }
body:not(.theme-dark) .hero-bg-visual,
body.light-theme .hero-bg-visual { opacity: 0.38; mix-blend-mode: multiply; }
body:not(.theme-dark) .hero-title,
body.light-theme .hero-title { color: #1c1511; }
body:not(.theme-dark) .hero-description,
body.light-theme .hero-description { color: #5e5349; }
body:not(.theme-dark) .hero-pill,
body.light-theme .hero-pill,
body:not(.theme-dark) .pill-badge,
body.light-theme .pill-badge { background: rgba(181, 128, 19, 0.08); color: #8a6414; border-color: rgba(181, 128, 19, 0.28); }
body:not(.theme-dark) .trust-strip,
body.light-theme .trust-strip { background: #f5efe3; border-color: rgba(181, 128, 19, 0.22); }
body:not(.theme-dark) .trust-info h4,
body.light-theme .trust-info h4,
body:not(.theme-dark) .calc-title-box h3,
body.light-theme .calc-title-box h3,
body:not(.theme-dark) .section-title,
body.light-theme .section-title { color: #1c1511; }
body:not(.theme-dark) .calculator-card,
body.light-theme .calculator-card,
body:not(.theme-dark) .filter-control-panel,
body.light-theme .filter-control-panel,
body:not(.theme-dark) .product-card,
body.light-theme .product-card,
body:not(.theme-dark) .store-info-box,
body.light-theme .store-info-box,
body:not(.theme-dark) .custom-card,
body.light-theme .custom-card { background: #ffffff; border-color: rgba(181, 128, 19, 0.25); box-shadow: 0 8px 24px rgba(70, 50, 20, 0.07); }
body:not(.theme-dark) .calc-input-group input,
body.light-theme .calc-input-group input,
body:not(.theme-dark) .calc-input-group select,
body.light-theme .calc-input-group select,
body:not(.theme-dark) .search-box-wrap input,
body.light-theme .search-box-wrap input { background: #ffffff; color: #1c1511; border-color: rgba(181, 128, 19, 0.28); }
body:not(.theme-dark) .product-card:hover,
body.light-theme .product-card:hover { background: #ffffff; border-color: var(--gold-400); box-shadow: 0 16px 36px rgba(181, 128, 19, 0.2); }
body:not(.theme-dark) .card-title,
body.light-theme .card-title { color: #1c1511; }
body:not(.theme-dark) .card-telugu-name,
body.light-theme .card-telugu-name { color: #8a6414; }
body:not(.theme-dark) .card-specs-mini,
body.light-theme .card-specs-mini { color: #6a5e51; }
body:not(.theme-dark) .promo-media-section,
body.light-theme .promo-media-section { background: linear-gradient(180deg, #f5efe3 0%, #fcfaf7 50%, #f3ece0 100%); }
body:not(.theme-dark) .promo-copy-panel h2,
body.light-theme .promo-copy-panel h2 { color: #1c1511; }
body:not(.theme-dark) .promo-copy-panel > p,
body.light-theme .promo-copy-panel > p { color: #5e5349; }
body:not(.theme-dark) .store-section,
body.light-theme .store-section { background: #f6f1e7; }
body:not(.theme-dark) .shortlist-drawer,
body.light-theme .shortlist-drawer { background: #ffffff; border-color: rgba(181, 128, 19, 0.25); color: #1c1511; }
body:not(.theme-dark) .drawer-header,
body.light-theme .drawer-header { background: #f6f1e7; color: #1c1511; }
body:not(.theme-dark) .modal-content-card,
body.light-theme .modal-content-card,
body:not(.theme-dark) .rate-modal-card,
body.light-theme .rate-modal-card,
body:not(.theme-dark) .admin-login-card,
body.light-theme .admin-login-card,
body:not(.theme-dark) .admin-portal-card,
body.light-theme .admin-portal-card { background: #ffffff; color: #1c1511; border-color: rgba(181, 128, 19, 0.3); }
body:not(.theme-dark) .admin-field input,
body.light-theme .admin-field input,
body:not(.theme-dark) .admin-field select,
body.light-theme .admin-field select,
body:not(.theme-dark) .admin-field textarea,
body.light-theme .admin-field textarea { background: #ffffff; color: #1c1511; border-color: rgba(181, 128, 19, 0.28); }
body:not(.theme-dark) .toast-notice,
body.light-theme .toast-notice { background: rgba(255, 253, 248, 0.98); color: #705615; border: 1px solid rgba(181, 128, 19, 0.35); box-shadow: 0 10px 30px rgba(70, 50, 20, 0.15); }

/* Theme Toggle Button Styling */
.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.75rem;
  color: var(--text-main);
  background: var(--gold-gradient-subtle);
  border: 1px solid var(--border-gold);
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  transition: var(--transition-smooth);
}
.btn-theme-toggle i {
  font-size: 0.95rem;
  color: var(--gold-500);
  transition: transform 0.3s ease;
}
body.theme-dark .btn-theme-toggle i {
  color: var(--gold-300);
}
.btn-theme-toggle:hover {
  background: rgba(212, 160, 36, 0.18);
  border-color: var(--gold-400);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(181, 128, 19, 0.2);
}
.btn-theme-toggle:hover i {
  transform: rotate(15deg);
}
@media (max-width: 600px) {
  .btn-theme-toggle {
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   ORGANIZED SHOWROOM RATES SECTION
   ========================================================================== */
.rates-section {
  position: relative;
  z-index: 10;
  padding: 2.8rem 0 2.4rem;
  background: #0e0e0d;
  border-bottom: 1px solid rgba(208, 163, 62, 0.18);
}

.rates-section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  margin-bottom: 1.35rem;
}

.rates-section-heading h2 {
  margin-top: 0.35rem;
  color: #f1e6c9;
  font-family: var(--font-serif);
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 600;
}

.rates-section-heading p {
  max-width: 620px;
  margin-top: 0.35rem;
  color: #97948c;
  font-size: 0.82rem;
}

.rates-status-panel,
.showroom-controls,
.showroom-contact-details {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.rates-status-panel {
  flex-wrap: wrap;
  justify-content: flex-end;
  min-width: 265px;
}

.rates-status-panel .rate-badge-title {
  padding: 0.35rem 0.65rem;
  border-radius: 3px;
  font-size: 0.65rem;
}

.rates-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
}

.rate-card {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  padding: 1rem 1.1rem;
  background: #151512;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 4px;
}

.rate-card-featured {
  border-color: rgba(208, 163, 62, 0.52);
  background: linear-gradient(145deg, rgba(184, 143, 49, 0.16), #151512 72%);
}

.rate-card span {
  color: #a7a39a;
  font-size: 0.76rem;
  font-weight: 600;
}

.rate-card strong {
  color: #ead18a;
  font-size: 1.45rem;
  letter-spacing: 0.01em;
}

.rate-card small {
  color: #77746d;
  font-size: 0.68rem;
}

.showroom-tools-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.showroom-contact-details .top-link,
.showroom-location {
  color: #a6a39a;
  font-size: 0.78rem;
}

.showroom-contact-details i {
  color: #d5ae53;
}

body:not(.theme-dark) .rates-section,
body.light-theme .rates-section {
  background: var(--bg-rates);
  border-bottom-color: var(--border-gold);
}

body:not(.theme-dark) .rates-section-heading h2,
body.light-theme .rates-section-heading h2 { color: var(--text-main); }
body:not(.theme-dark) .rates-section-heading p,
body.light-theme .rates-section-heading p,
body:not(.theme-dark) .rate-card span,
body.light-theme .rate-card span { color: var(--text-muted); }
body:not(.theme-dark) .rate-card,
body.light-theme .rate-card { background: #ffffff; border-color: rgba(181, 128, 19, 0.25); box-shadow: 0 4px 16px rgba(70, 50, 20, 0.06); }
body:not(.theme-dark) .rate-card-featured,
body.light-theme .rate-card-featured { background: linear-gradient(145deg, #ffffff 0%, #fffbf2 100%); border-color: rgba(181, 128, 19, 0.55); box-shadow: 0 6px 20px rgba(181, 128, 19, 0.14); }
body:not(.theme-dark) .rate-card strong,
body.light-theme .rate-card strong { color: var(--text-gold); }
body:not(.theme-dark) .rate-card small,
body.light-theme .rate-card small,
body:not(.theme-dark) .showroom-contact-details .top-link,
body.light-theme .showroom-contact-details .top-link,
body:not(.theme-dark) .showroom-location,
body.light-theme .showroom-location { color: var(--text-dim); }

@media (max-width: 768px) {
  .rates-section { padding: 2.2rem 0 1.6rem; }
  .rates-section-heading { display: block; }
  .rates-status-panel { justify-content: flex-start; min-width: 0; margin-top: 1rem; }
  .rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rate-card { min-height: 96px; padding: 0.85rem; }
  .rate-card strong { font-size: 1.2rem; }
  .showroom-tools-row { align-items: flex-start; flex-direction: column; }
  .showroom-contact-details { align-items: flex-start; flex-direction: column; gap: 0.35rem; }
  .showroom-controls { width: 100%; justify-content: flex-start; }
}

/* ==========================================================================
   HERO-FIRST SHOWROOM EXPERIENCE
   ========================================================================== */
.hero-section {
  min-height: min(900px, calc(100vh - 78px));
  padding: 5rem 0 20rem;
}

.hero-section > .container {
  min-height: 560px;
  display: flex;
  align-items: center;
}

.hero-discover-rail {
  position: absolute;
  right: 1.5rem;
  bottom: 14rem;
  left: 1.5rem;
  z-index: 12;
  max-width: 1240px;
  margin: 0 auto;
}

.hero-discover-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.55rem;
  color: #e8d29a;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-discover-heading a {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: #f0dc9e;
  text-decoration: none;
  text-transform: none;
}

.hero-product-track {
  display: flex;
  gap: 0.75rem;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}

.hero-product-track-group {
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
}

.hero-product-track.is-moving .hero-product-track-group {
  animation: heroProductDrift 38s linear infinite;
}

.hero-product-track:hover .hero-product-track-group,
.hero-product-track:focus-within .hero-product-track-group {
  animation-play-state: paused;
}

.hero-product-card {
  display: flex;
  width: 142px;
  min-width: 142px;
  height: 146px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.08rem;
  padding: 0.65rem;
  overflow: hidden;
  color: #fff8e5;
  text-align: left;
  background: rgba(16, 15, 12, 0.78);
  border: 1px solid rgba(229, 185, 76, 0.28);
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
}

.hero-product-card::after {
  content: '';
  position: absolute;
  inset: 42% 0 0;
  z-index: -1;
  background: linear-gradient(transparent, rgba(7, 6, 5, 0.96));
}

.hero-product-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.hero-product-card:hover,
.hero-product-card:focus-visible {
  border-color: #e6c263;
  transform: translateY(-3px);
}

.hero-product-card:hover img,
.hero-product-card:focus-visible img { transform: scale(1.08); }
.hero-product-card span { font-size: 0.72rem; font-weight: 700; line-height: 1.2; }
.hero-product-card small { color: #d2c19c; font-size: 0.62rem; }

.hero-section .rates-section {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 13;
  padding: 1rem 0 0.85rem;
  background: rgba(10, 10, 9, 0.86);
  border-top: 1px solid rgba(229, 185, 76, 0.28);
  border-bottom: 0;
  backdrop-filter: blur(16px);
}

.hero-section .rates-section-heading { align-items: center; margin-bottom: 0.65rem; }
.hero-section .rates-section-heading h2 { margin-top: 0; font-family: var(--font-sans); font-size: 0.92rem; font-weight: 700; }
.hero-section .rates-section-heading p { display: none; }
.hero-section .section-tag { font-size: 0.62rem; }
.hero-section .rates-status-panel { min-width: 0; }
.hero-section .rates-grid { gap: 0.5rem; }
.hero-section .rate-card { min-height: 74px; padding: 0.65rem 0.8rem; background: rgba(23, 22, 18, 0.78); }
.hero-section .rate-card strong { font-size: 1.1rem; }
.hero-section .rate-card small { font-size: 0.6rem; }
.hero-section .showroom-tools-row { margin-top: 0.65rem; padding-top: 0.65rem; }
.hero-section .showroom-contact-details .top-link,
.hero-section .showroom-location { font-size: 0.7rem; }

@keyframes heroProductDrift {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-product-track-group { animation: none; }
}

@media (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: 3rem 0 0;
  }
  .hero-section > .container { min-height: 570px; align-items: flex-start; }
  .hero-discover-rail {
    position: relative;
    right: auto;
    bottom: auto;
    left: auto;
    margin: 0 1rem 1.5rem;
  }
  .hero-product-card { width: 128px; min-width: 128px; height: 132px; }
  .hero-section .rates-section { position: relative; }
  .hero-section .rates-section-heading { display: block; }
  .hero-section .rates-status-panel { margin-top: 0.75rem; }
  .hero-section .showroom-tools-row { align-items: flex-start; }
}

/* ==========================================================================
   LANGUAGE CHOICE & MOBILE-FIRST REFINEMENTS
   ========================================================================== */
.language-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(4, 4, 3, 0.78);
  backdrop-filter: blur(12px);
}

.language-modal-backdrop.open { display: flex; }

.language-modal-card {
  width: min(420px, 100%);
  padding: 2rem;
  color: #f7efd7;
  background: #151512;
  border: 1px solid rgba(208, 163, 62, 0.48);
  border-radius: 18px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  text-align: center;
}

.language-modal-mark {
  display: grid;
  width: 48px;
  height: 48px;
  margin: 0 auto 1rem;
  place-items: center;
  color: #f5d77f;
  border: 1px solid #c89b32;
  font-family: var(--font-royal);
  font-weight: 800;
}

.language-modal-card h2 { margin: 0.45rem 0; font-family: var(--font-serif); font-size: 2rem; }
.language-modal-card p { color: #aaa69d; font-size: 0.9rem; }
.language-choice-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-top: 1.5rem; }
.language-choice { display: flex; min-height: 92px; flex-direction: column; justify-content: center; gap: 0.25rem; padding: 0.9rem; color: #f4df9b; background: #0f0f0d; border: 1px solid rgba(208, 163, 62, 0.3); border-radius: 10px; cursor: pointer; font: inherit; transition: var(--transition-smooth); }
.language-choice:hover, .language-choice:focus-visible { background: rgba(184, 143, 49, 0.16); border-color: #dfb94f; transform: translateY(-2px); }
.language-choice strong { font-size: 1rem; }
.language-choice span { color: #97948c; font-size: 0.7rem; }

/* The rate panel sits over the right side of the hero on desktop. */
.hero-section .rates-section {
  top: 2rem;
  right: 3.5rem;
  bottom: auto;
  left: auto;
  width: min(360px, calc(100% - 2rem));
  padding: 1.05rem;
  background: rgba(13, 13, 11, 0.82);
  border: 1px solid rgba(229, 185, 76, 0.4);
  border-radius: 22px;
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 245, 200, 0.08);
}

.hero-section .rates-section .container { padding: 0; }
.hero-section .rates-section-heading { display: block; margin-bottom: 0.75rem; }
.hero-section .rates-section-heading h2 { margin-top: 0.3rem; font-family: var(--font-serif); font-size: 1.35rem; }
.hero-section .rates-status-panel { justify-content: flex-start; margin-top: 0.75rem; }
.hero-section .rates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-section .rate-card { min-height: 76px; padding: 0.7rem; border-radius: 12px; }
.hero-section .rate-card strong { font-size: 1.1rem; }
.hero-section .showroom-tools-row { display: block; margin-top: 0.8rem; padding-top: 0.8rem; }
.hero-section .showroom-contact-details { display: block; }
.hero-section .showroom-contact-details > * { display: block; margin-top: 0.35rem; }
.hero-section .showroom-controls { margin-top: 0.7rem; }

@media (max-width: 768px) {
  .language-modal-card { padding: 1.5rem; border-radius: 14px; }
  .language-modal-card h2 { font-size: 1.65rem; }
  body { padding-bottom: calc(4.2rem + env(safe-area-inset-bottom)); }
  .navbar { padding: 0.7rem 0; }
  .nav-inner { min-height: 58px; gap: 0.5rem; }
  .brand-logo { min-width: 0; }
  .brand-title { max-width: 210px; overflow: hidden; font-size: 0.86rem; letter-spacing: 0.09em; text-overflow: ellipsis; white-space: nowrap; }
  .brand-subtitle { overflow: hidden; font-size: 0.6rem; text-overflow: ellipsis; white-space: nowrap; }
  .nav-actions { margin-left: auto; }
  .btn-shortlist-nav, .btn-whatsapp-nav { width: 38px; height: 38px; justify-content: center; padding: 0; }
  .mobile-menu-btn { width: 38px; height: 38px; flex: 0 0 auto; }

  .hero-section {
    min-height: auto;
    padding: 2.4rem 0 0;
    display: block;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(9, 9, 9, 0.94) 0%, rgba(9, 9, 9, 0.78) 62%, #0d0d0c 100%);
  }
  .hero-section > .container { min-height: 0; display: block; padding: 0 1.25rem; }
  .hero-bg-visual { width: 100%; height: 62%; opacity: 0.24; }
  .hero-content { max-width: none; }
  .hero-pill { max-width: 100%; margin-bottom: 1rem; padding: 0.35rem 0.65rem; font-size: 0.58rem; letter-spacing: 0.08em; }
  .hero-title { max-width: 330px; margin-bottom: 1rem; font-size: clamp(2.45rem, 12.5vw, 3.35rem); line-height: 1.02; letter-spacing: -0.015em; }
  .hero-description { max-width: 310px; margin-bottom: 1.25rem; font-size: 1.02rem; line-height: 1.55; }
  .hero-badges-row { display: none; }
  .hero-cta-group { display: grid; grid-template-columns: 1fr; gap: 0.55rem; width: min(100%, 330px); margin-bottom: 0.85rem; }
  .hero-cta-group .btn-primary-gold, .hero-cta-group .btn-outline-gold { min-height: 44px; padding: 0.65rem 0.8rem; font-size: 0.78rem; }
  .hero-start-here { display: none; }

  .hero-discover-rail { width: calc(100% - 2.5rem); margin: 1.25rem 1.25rem 1rem; overflow: hidden; }
  .hero-discover-heading { gap: 0.5rem; margin-bottom: 0.45rem; font-size: 0.61rem; letter-spacing: 0.04em; white-space: nowrap; }
  .hero-discover-heading span { overflow: hidden; text-overflow: ellipsis; }
  .hero-discover-heading a { flex: 0 0 auto; font-size: 0.62rem; }
  .hero-product-track { width: 100%; gap: 0.5rem; overflow-x: auto; padding-bottom: 0.35rem; mask-image: none; -webkit-mask-image: none; scrollbar-width: none; }
  .hero-product-track::-webkit-scrollbar { display: none; }
  .hero-product-track-group { gap: 0.5rem; animation: none !important; }
  .hero-product-track-group + .hero-product-track-group { display: none; }
  .hero-product-card { width: 112px; min-width: 112px; height: 116px; padding: 0.5rem; border-radius: 9px; }
  .hero-product-card span { font-size: 0.64rem; }
  .hero-product-card small { font-size: 0.56rem; }

  .hero-section .rates-section {
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    margin: 0 1.25rem 1.2rem;
    padding: 1rem;
    border-radius: 16px;
  }
  .hero-section .rates-grid { gap: 0.5rem; }
  .hero-section .rate-card { min-height: 70px; }
  .hero-section .rate-card strong { font-size: 1rem; }
  .hero-section .showroom-contact-details .top-link,
  .hero-section .showroom-location { font-size: 0.68rem; }

  .catalog-section { padding: 1.25rem 0 3rem; }
  .catalog-section .container { padding: 0 0.75rem; }
  .catalog-section .section-head { padding: 0 0.25rem; margin-bottom: 0.65rem; text-align: center; }
  .catalog-section .section-title { font-size: 1.5rem; margin-bottom: 0.25rem; }
  .catalog-section .section-subtitle { font-size: 0.78rem; line-height: 1.35; }
  .filter-control-panel { margin: 0.55rem 0 0.95rem; padding: 0.65rem 0.75rem; border-radius: 12px; gap: 0.5rem; }
  .category-pills { gap: 0.4rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0; scrollbar-width: none !important; -ms-overflow-style: none !important; }
  .category-pills::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .filter-btn { flex: 0 0 auto; font-size: 0.74rem; padding: 0.42rem 0.75rem; border-radius: 20px; }
  .search-box-wrap { margin-top: 0.5rem; }
  .filter-sub-row { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding-top: 0.45rem; margin-top: 0; }
  .type-filter-group { gap: 0.35rem; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0; scrollbar-width: none !important; -ms-overflow-style: none !important; }
  .type-filter-group::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; }
  .type-filter-group > * { flex: 0 0 auto; font-size: 0.68rem; }
  .chip-filter { font-size: 0.68rem; padding: 0.22rem 0.55rem; border-radius: 12px; }
  .product-count-display { margin-top: 0; font-size: 0.7rem; white-space: nowrap; }
  .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; }
  .product-card { border-radius: 10px; }
  .card-image-wrap { padding-top: 112%; }
  .card-badges { top: 0.35rem; left: 0.35rem; gap: 0.2rem; }
  .badge-pill { max-width: calc(100% - 0.7rem); overflow: hidden; padding: 0.18rem 0.35rem; font-size: 0.5rem; text-overflow: ellipsis; white-space: nowrap; }
  .badge-sku { top: 0.35rem; right: 0.35rem; padding: 0.18rem 0.3rem; font-size: 0.52rem; }
  .btn-shortlist-heart { right: 0.35rem; bottom: 0.35rem; width: 28px; height: 28px; font-size: 0.8rem; }
  .card-body { min-height: 122px; padding: 0.55rem; }
  .card-meta-row { margin-bottom: 0.25rem; font-size: 0.54rem; gap: 0.25rem; }
  .card-weight { padding: 0.1rem 0.25rem; }
  .card-title { display: -webkit-box; overflow: hidden; margin-bottom: 0.15rem; font-size: 0.72rem; line-height: 1.2; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .card-telugu-name { display: none; }
  .card-specs-mini { display: none; }
  .card-actions { grid-template-columns: 1fr auto; gap: 0.3rem; }
  .card-actions .btn-inquire-whatsapp { min-height: 28px; justify-content: center; padding: 0.3rem; font-size: 0; }
  .card-actions .btn-inquire-whatsapp i { margin: 0; font-size: 0.85rem; }
  .card-actions .btn-view-details { min-height: 28px; padding: 0.3rem 0.5rem; font-size: 0.58rem; gap: 0.2rem; }
  .card-actions .btn-view-details .btn-view-label { font-size: 0.58rem; }
}

@media (max-width: 480px) {
  .hero-section > .container { padding: 0 1rem; }
  .hero-title { max-width: 280px; font-size: clamp(2.15rem, 11vw, 2.8rem); }
  .hero-description { max-width: 270px; font-size: 0.94rem; line-height: 1.45; }
  .hero-cta-group { width: min(100%, 280px); }
  .hero-cta-group .btn-outline-gold { display: none; }
  .hero-discover-rail { width: calc(100% - 2rem); margin-right: 1rem; margin-left: 1rem; }
  .hero-section .rates-section { margin-right: 1rem; margin-left: 1rem; }
  .hero-section .rates-section-heading h2 { font-size: 1.1rem; }
  .hero-section .rates-section-heading .section-tag { font-size: 0.55rem; }
  .hero-section .rates-status-panel { gap: 0.35rem; }
  .hero-section .rate-badge-title,
  .hero-section .rate-timestamp-badge,
  .hero-section .rate-refresh-btn { font-size: 0.58rem; }
  .hero-section .rate-card { min-height: 62px; padding: 0.5rem; }
  .hero-section .rate-card span { font-size: 0.62rem; }
  .hero-section .rate-card strong { font-size: 0.9rem; }
  .hero-section .rate-card small { font-size: 0.5rem; }
}

@media (max-width: 300px) {
  .brand-title { max-width: 120px; font-size: 0.7rem; }
  .brand-subtitle { display: none; }
  .hero-title { font-size: 2rem; }
  .hero-description { font-size: 0.82rem; }
  .hero-section .rates-grid { grid-template-columns: 1fr; }
  .hero-section .rate-card { min-height: 54px; }
  .hero-section .showroom-location { display: none; }
}

@media (max-width: 768px) {
  .modal-backdrop#product-modal .modal-media-actions { top: 0.7rem; right: 0.7rem; }
  .modal-backdrop#product-modal .modal-media-actions button { width: 38px; height: 38px; }
  .modal-backdrop#product-modal .modal-rating-row { margin-bottom: 0.55rem; }
  .modal-backdrop#product-modal .modal-price-row { padding: 0.55rem 0; }
  .modal-backdrop#product-modal .modal-price-row strong { font-size: 1.05rem; }
  .modal-backdrop#product-modal .modal-choice-row { margin: 0.6rem 0; }
  .modal-backdrop#product-modal .modal-highlights { margin-bottom: 0.65rem; }
  .modal-backdrop#product-modal .modal-highlight-grid { gap: 0.35rem; }
  .modal-backdrop#product-modal .modal-highlight-grid div { min-height: 38px; padding: 0.35rem; font-size: 0.63rem; }
  .modal-backdrop#product-modal {
    align-items: flex-end;
    padding: 0;
  }

  .modal-backdrop#product-modal .modal-content-card {
    width: 100%;
    max-width: none;
    height: min(92dvh, 760px);
    max-height: 92dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    border-bottom: 0;
    box-shadow: 0 -16px 50px rgba(0, 0, 0, 0.48);
  }

  .modal-backdrop#product-modal .modal-media-col {
    min-height: 0;
    height: 43%;
    flex: 0 0 43%;
  }

  .modal-backdrop#product-modal .modal-media-col img { object-fit: contain; }
  .modal-backdrop#product-modal .btn-close-modal { top: 0.7rem; right: 0.7rem; width: 34px; height: 34px; }
  .modal-backdrop#product-modal .modal-info-col { min-height: 0; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
  .modal-backdrop#product-modal .modal-purity-tag { margin-bottom: 0.2rem; font-size: 0.65rem; }
  .modal-backdrop#product-modal .modal-title { margin-bottom: 0.1rem; font-size: 1.15rem; }
  .modal-backdrop#product-modal .modal-telugu-title { margin-bottom: 0.65rem; font-size: 0.9rem; }
  .modal-backdrop#product-modal .modal-specs-table { margin-bottom: 0.7rem; font-size: 0.72rem; }
  .modal-backdrop#product-modal .modal-specs-table td { padding: 0.38rem 0; }
  .modal-backdrop#product-modal .modal-description { display: -webkit-box; overflow: hidden; margin-bottom: 0.75rem; font-size: 0.76rem; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .modal-backdrop#product-modal .modal-actions-row { position: sticky; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin: auto -1rem -1rem; padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom)); background: rgba(20, 20, 17, 0.96); border-top: 1px solid rgba(208, 163, 62, 0.22); backdrop-filter: blur(12px); }
  .modal-backdrop#product-modal .modal-actions-row a,
  .modal-backdrop#product-modal .modal-actions-row button { min-height: 42px; justify-content: center; padding: 0.55rem 0.45rem !important; border-radius: 8px !important; font-size: 0.7rem !important; }
}

@media (max-width: 768px) {
  .mobile-tab-badge { position: absolute; top: 0.05rem; right: 20%; display: inline-flex; min-width: 14px; height: 14px; align-items: center; justify-content: center; padding: 0 0.18rem; color: #15120a; background: #e5b94c; border-radius: 50%; font-size: 0.5rem; }
}

.browse-search-bar {
  display: flex;
  align-items: center;
  width: min(100%, 560px);
  min-height: 48px;
  margin-top: 1.2rem;
  padding: 0 0.85rem;
  gap: 0.6rem;
  background: #121210;
  border: 1px solid rgba(208, 163, 62, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}

.browse-search-bar:focus-within { border-color: var(--gold-400); box-shadow: 0 0 0 3px rgba(208, 163, 62, 0.12); }
.browse-search-bar > i { color: var(--gold-400); font-size: 1.1rem; }
.browse-search-bar input { min-width: 0; flex: 1; color: var(--text-main); background: transparent; border: 0; outline: 0; font: inherit; font-size: 0.88rem; }
.browse-search-bar input::placeholder { color: #817d73; }
.browse-search-bar span { color: #9d8a59; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; }

body.light-theme .browse-search-bar { background: #fffdf8; border-color: rgba(157, 112, 22, 0.3); }
body.light-theme .browse-search-bar input { color: #332f28; }

@media (max-width: 768px) {
  .browse-search-bar { width: 100%; min-height: 44px; margin-top: 0.6rem; padding: 0 0.9rem; border-radius: 25px; }
  .browse-search-bar input { font-size: 0.84rem; }
  .browse-search-bar span { font-size: 0.62rem; }
}

.hero-search-bar {
  display: flex;
  align-items: center;
  width: min(100%, 390px);
  min-height: 46px;
  margin-top: 1rem;
  padding: 0 0.55rem 0 0.8rem;
  gap: 0.5rem;
  background: rgba(12, 12, 10, 0.82);
  border: 1px solid rgba(229, 185, 76, 0.48);
  border-radius: 9px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
}

.hero-search-bar:focus-within { border-color: #f0d277; box-shadow: 0 0 0 3px rgba(229, 185, 76, 0.14); }
.hero-search-bar > i { color: var(--gold-300); font-size: 1.05rem; }
.hero-search-bar input { min-width: 0; flex: 1; color: #fff8e5; background: transparent; border: 0; outline: 0; font: inherit; font-size: 0.82rem; }
.hero-search-bar input::placeholder { color: #b7ad93; }
.hero-search-bar button { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; color: #17120a; background: var(--gold-400); border: 0; border-radius: 7px; cursor: pointer; }
.hero-search-bar button:hover { background: #f1d477; }

@media (max-width: 768px) {
  .hero-search-bar { width: min(100%, 330px); min-height: 46px; margin-top: 0.8rem; border-radius: 10px; }
  .hero-search-bar input { font-size: 0.8rem; }
}

/* ==========================================================================
   SAVED DESIGNS DRAWER - IMPROVED UX
   ========================================================================== */
.drawer-go-browse {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.7rem;
  color: var(--gold-300);
  background: rgba(208, 163, 62, 0.12);
  border: 1px solid rgba(208, 163, 62, 0.32);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s;
}
.drawer-go-browse:hover { background: rgba(208, 163, 62, 0.22); color: var(--gold-200); }
.drawer-go-browse i { font-size: 0.88rem; }

.drawer-browse-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  width: 100%;
  padding: 0.62rem 1rem;
  margin-top: 0.65rem;
  color: var(--text-dim);
  background: transparent;
  border: 1px dashed rgba(208, 163, 62, 0.25);
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.18s;
}
.drawer-browse-more-btn:hover { color: var(--gold-300); border-color: rgba(208, 163, 62, 0.5); background: rgba(208, 163, 62, 0.06); }
.drawer-browse-more-btn i { font-size: 0.85rem; }

/* ==========================================================================
   PRODUCT MODAL - COMPARE STRIP
   ========================================================================== */
.modal-compare-strip {
  margin: 0.85rem 0;
  padding: 0.85rem;
  background: rgba(208, 163, 62, 0.06);
  border: 1px solid rgba(208, 163, 62, 0.22);
  border-radius: 10px;
}
.modal-compare-heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
  color: var(--gold-300);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal-compare-heading i { font-size: 0.9rem; }
.modal-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.modal-compare-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.55rem;
  background: rgba(20, 19, 15, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 7px;
  text-align: center;
}
.modal-compare-item .compare-metal { color: var(--text-dim); font-size: 0.62rem; font-weight: 600; }
.modal-compare-item .compare-price { color: var(--gold-200); font-size: 0.92rem; font-weight: 800; margin: 0.12rem 0; }
.modal-compare-item .compare-note { color: var(--text-dim); font-size: 0.56rem; }
.modal-compare-item.compare-active { border-color: rgba(208, 163, 62, 0.48); background: rgba(208, 163, 62, 0.08); }
.modal-compare-item.compare-active .compare-metal { color: var(--gold-300); }

@media (max-width: 768px) {
  .modal-compare-strip { margin: 0.6rem 0; padding: 0.65rem; }
  .modal-compare-grid { grid-template-columns: repeat(2, 1fr); gap: 0.35rem; }
  .modal-compare-item { padding: 0.4rem 0.3rem; }
  .modal-compare-item .compare-price { font-size: 0.82rem; }
}

/* ==========================================================================
   PRODUCT CARD - VIEW DETAILS BUTTON IMPROVEMENTS
   ========================================================================== */
.btn-view-details {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.38rem 0.65rem;
  color: var(--gold-300);
  background: transparent;
  border: 1px solid rgba(208, 163, 62, 0.38);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.btn-view-details:hover { background: rgba(208, 163, 62, 0.1); border-color: rgba(208, 163, 62, 0.6); color: var(--gold-200); }
.btn-view-details i { font-size: 0.85rem; }

@media (max-width: 768px) {
  .btn-view-details { padding: 0.3rem 0.45rem; font-size: 0.62rem; }
  .btn-view-details .btn-view-label { display: inline; }
}

/* ==========================================================================
   ADMIN LOGIN - MOBILE-FIRST IMPROVEMENTS
   ========================================================================== */
.admin-login-card {
  max-width: min(400px, calc(100vw - 2rem));
}
.admin-login-offline-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding: 0.6rem;
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.25);
  border-radius: 8px;
  color: #f87171;
  font-size: 0.78rem;
}
.admin-login-card label {
  display: block;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
  color: var(--gold-200);
  font-size: 0.78rem;
  font-weight: 600;
}
.admin-login-card input {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border-radius: 8px;
  min-height: 44px;
  font-size: 0.9rem;
}

@media (max-width: 480px) {
  .admin-login-card { padding: 1.5rem 1.25rem; border-radius: 16px 16px 0 0; width: 100%; }
  #admin-login-modal.open { align-items: flex-end; }
}

/* ==========================================================================
   LANGUAGE SWITCHER - ALWAYS VISIBLE
   ========================================================================== */
.btn-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.48rem 0.65rem;
  color: var(--gold-200);
  background: rgba(208, 163, 62, 0.08);
  border: 1px solid rgba(208, 163, 62, 0.3);
  border-radius: 3px;
  cursor: pointer;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  transition: all 0.18s;
}
.btn-lang-switcher::after { content: 'EN/తె'; font-size: 0.62rem; color: var(--text-dim); }
.btn-lang-switcher:hover { background: rgba(208, 163, 62, 0.16); color: var(--gold-100); }

@media (max-width: 768px) {
  .btn-lang-switcher { padding: 0.4rem 0.5rem; }
  .btn-lang-switcher::after { display: none; }
}

/* ==========================================================================
   LIVE RATES - PULSE ANIMATION IMPROVEMENT
   ========================================================================== */
.live-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 6px #22c55e;
  animation: livePulse 1.6s ease-in-out infinite;
  vertical-align: middle;
  margin-right: 3px;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.75); }
}

/* ==========================================================================
   PRODUCT CARD VIEW BUTTON - NO EYE ICON ON MOBILE
   ========================================================================== */
@media (max-width: 768px) {
  .card-actions { display: flex; gap: 0.35rem; align-items: stretch; }
  .card-actions .btn-inquire-whatsapp { flex: 1; min-height: 34px; font-size: 0.7rem; justify-content: center; padding: 0.35rem 0.5rem; }
  .card-actions .btn-view-details { flex: 0 0 auto; min-height: 34px; padding: 0.35rem 0.55rem; font-size: 0.62rem; border-radius: 6px; }
  .card-actions .btn-view-details i { display: none; }
  .card-actions .btn-view-details .btn-view-label { font-size: 0.62rem; display: inline !important; }
}

/* ==========================================================================
/* ==========================================================================
   MOBILE NAVIGATION - 5-TAB APP BAR (Requirement 1)
   Home -> Price -> Browse -> Save -> Ask
   ========================================================================== */
.mobile-quick-actions {
  display: none;
}

@media (max-width: 768px) {
  body {
    padding-left: 0 !important;
    padding-bottom: calc(4.2rem + env(safe-area-inset-bottom));
  }

  .showroom-sidebar {
    width: 290px;
    max-width: 84vw;
    z-index: 1050;
    display: flex !important;
  }

  .mobile-quick-actions {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 90;
    background: rgba(10, 5, 7, 0.98);
    border-top: 1px solid rgba(208, 163, 62, 0.35);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 0.35rem 0.15rem calc(0.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.65);
  }

  .mob-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: 3.2rem;
    padding: 0.25rem 0.1rem;
    color: #8c857b;
    text-decoration: none;
    background: transparent;
    border: none;
    cursor: pointer;
    font: inherit;
    font-size: 0;
    position: relative;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }

  .mob-nav-item i {
    font-size: 1.25rem;
    display: block;
    line-height: 1;
    transition: transform 0.18s ease, color 0.18s ease;
  }

  .mob-nav-item span:not(.mobile-tab-badge) {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: block;
    line-height: 1;
  }

  .mob-nav-item.active,
  .mob-nav-item:active {
    color: var(--gold-300);
  }

  .mob-nav-item.active::before {
    content: '';
    position: absolute;
    top: -0.35rem;
    left: 20%;
    right: 20%;
    height: 2.5px;
    background: var(--gold-400);
    border-radius: 0 0 3px 3px;
    box-shadow: 0 2px 8px rgba(229, 185, 76, 0.6);
  }

  .mob-nav-item:active i {
    transform: scale(0.9);
  }

  .mob-nav-item.active i {
    color: var(--gold-300);
    text-shadow: 0 0 10px rgba(229, 185, 76, 0.5);
  }

  /* WhatsApp button gets green accent */
  .mob-nav-item[href*="wa.me"] i {
    color: #25d366;
  }

  .mob-nav-item[href*="wa.me"].active,
  .mob-nav-item[href*="wa.me"]:active {
    color: #25d366;
  }

  /* Badge positioned over Save button */
  .mobile-tab-badge {
    position: absolute;
    top: 0.15rem;
    right: calc(50% - 15px);
    display: inline-flex;
    min-width: 15px;
    height: 15px;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
    color: #ffffff;
    background: #ff4d6d;
    border-radius: 10px;
    font-size: 0.55rem;
    font-weight: 800;
    box-shadow: 0 1px 4px rgba(255, 77, 109, 0.6);
  }

  /* Toast above bottom nav */
  .toast-notice {
    bottom: calc(4.6rem + env(safe-area-inset-bottom));
  }

  /* Floating shortlist button */
  .floating-shortlist-btn {
    bottom: calc(4.8rem + env(safe-area-inset-bottom));
    right: 1rem;
  }
}

/* ==========================================================================
   SAVED DESIGNS DRAWER - COMPLETE UX & UI ENHANCEMENT (Requirement 2)
   ========================================================================== */
.drawer-title-group {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.drawer-heading-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.drawer-heading-row h3 {
  font-family: var(--font-royal);
  font-size: 1.15rem;
  color: var(--gold-200);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.drawer-subtext {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0;
}
.drawer-header-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.drawer-go-home-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  color: #fff;
  background: rgba(208, 163, 62, 0.22);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.drawer-go-home-btn:hover,
.drawer-go-home-btn:active {
  background: var(--gold-500);
  color: #120e06;
}
.drawer-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.drawer-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: all 0.2s;
  width: 100%;
}
.drawer-action-btn.primary {
  background: rgba(208, 163, 62, 0.16);
  border: 1px solid var(--border-gold);
  color: var(--gold-200);
}
.drawer-action-btn.primary:hover,
.drawer-action-btn.primary:active {
  background: var(--gold-400);
  color: #140d04;
}
.drawer-action-btn.secondary {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-muted);
}
.drawer-action-btn.secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.empty-shortlist-notice {
  text-align: center;
  padding: 2.5rem 1rem;
}
}

.drawer-go-home:hover { background: rgba(255, 255, 255, 0.12); color: var(--text-main); }
.drawer-go-home i { font-size: 0.88rem; }

/* ==========================================================================
   PRODUCT MODAL - COMPARE + RELATED ALWAYS VISIBLE ON SCROLL
   ========================================================================== */
@media (max-width: 768px) {
  /* Make the info column naturally tall so compare/related are below */
  .modal-backdrop#product-modal .modal-info-col {
    overflow: visible;
    padding-bottom: 5rem; /* Space for sticky action bar */
  }

  .modal-compare-strip,
  .modal-related-section {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Ensure the full modal scrolls to reach compare and related sections */
  .modal-backdrop#product-modal .modal-content-card {
    height: auto;
    max-height: 94dvh;
    min-height: unset;
  }

  /* Related products rail on mobile - horizontal scroll with nice sizing */
  .modal-related-rail {
    display: flex;
    gap: 0.65rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .modal-related-rail::-webkit-scrollbar { display: none; }

  .modal-related-card {
    flex: 0 0 120px;
    min-width: 120px;
    scroll-snap-align: start;
  }

  .modal-related-card img {
    width: 120px;
    height: 110px;
    object-fit: cover;
    border-radius: 8px;
  }
}

/* ==========================================================================
   ADMIN PORTAL - MOBILE FIRST REDESIGN
   ========================================================================== */
@media (max-width: 768px) {
  /* Admin portal full screen on mobile */
  .admin-portal-card {
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    padding: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  #admin-portal-modal.open {
    padding: 0;
    align-items: flex-start;
  }

  .admin-portal-header {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(20, 9, 14, 0.97);
    backdrop-filter: blur(16px);
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(208, 163, 62, 0.3);
    margin-bottom: 0;
  }

  .admin-portal-header h2 { font-size: 1.1rem; margin: 0.2rem 0; }
  .admin-portal-header p { font-size: 0.72rem; margin: 0; }

  /* Stack form and list vertically on mobile */
  .admin-portal-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
  }

  .product-admin-form {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }

  .admin-catalogue-list {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 1rem 1.25rem;
  }

  /* Single column form grid on mobile */
  .admin-form-grid {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .admin-field-wide { grid-column: 1; }

  /* Admin rates panel */
  .admin-rates-panel {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    margin-top: 0;
  }

  .admin-rate-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.65rem;
  }

  .admin-rate-grid .btn-primary-gold { grid-column: 1 / -1; }

  /* Mobile product list rows */
  .admin-product-row {
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 0.5rem;
    padding: 0.65rem 0;
  }

  /* Admin login modal - bottom sheet on mobile */
  .admin-login-card {
    border-radius: 20px 20px 0 0;
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
  }

  #admin-login-modal.open {
    align-items: flex-end;
    padding: 0;
  }
}

/* ==========================================================================
   MOBILE LIGHT THEME - BOTTOM NAV
   ========================================================================== */
body.light-theme .mobile-quick-actions {
  background: rgba(255, 253, 248, 0.96);
  border-top-color: rgba(157, 112, 22, 0.3);
  box-shadow: 0 -4px 24px rgba(76, 61, 29, 0.16);
}

body.light-theme .mob-nav-item {
  color: #9e9484;
}

body.light-theme .mob-nav-item.active {
  color: #7a5410;
}

/* ==========================================================================
   MODAL RELATED PRODUCTS SECTION - DESKTOP STYLES
   ========================================================================== */
.modal-related-section {
  margin-top: 0.85rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.modal-related-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
  color: var(--gold-300);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.modal-related-heading i { font-size: 0.9rem; }

.modal-related-view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--text-dim);
  font-size: 0.65rem;
  font-weight: 600;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  transition: color 0.18s;
}

.modal-related-view-all:hover { color: var(--gold-300); }

.modal-related-rail {
  display: flex;
  gap: 0.65rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.modal-related-rail::-webkit-scrollbar { display: none; }

.modal-related-card {
  display: flex;
  flex: 0 0 100px;
  min-width: 100px;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: opacity 0.18s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  animation: relatedStaggerReveal 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

@keyframes relatedStaggerReveal {
  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.modal-related-card:hover { opacity: 0.95; transform: translateY(-3px); }

.modal-related-card img {
  width: 100px;
  height: 90px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid rgba(229, 185, 76, 0.22);
}

.modal-related-card span {
  font-size: 0.66rem;
  font-weight: 700;
  color: var(--text-main);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.25;
}

.modal-related-card small {
  font-size: 0.58rem;
  color: var(--gold-400);
}

/* ==========================================================================
   SIDEBAR LANGUAGE WIDGET (Requirement 6)
   ========================================================================== */
.sidebar-lang-box {
  padding: 0.85rem 1.25rem 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sidebar-lang-pills {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.sidebar-lang-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(208, 163, 62, 0.25);
  color: var(--text-muted);
  font: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.sidebar-lang-btn:hover,
.sidebar-lang-btn.active {
  background: rgba(208, 163, 62, 0.2);
  color: var(--gold-200);
  border-color: var(--gold-400);
}

/* Navbar language button enhancement */
.btn-lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.65rem;
  color: var(--gold-200);
  background: rgba(208, 163, 62, 0.12);
  border: 1px solid var(--border-gold);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  transition: all 0.18s;
}
.btn-lang-switcher:hover {
  background: rgba(208, 163, 62, 0.25);
  color: #fff;
}
.lang-btn-text {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ==========================================================================
   PRODUCT DETAILS MODAL - COMPARISON MATRIX (Requirement 4)
   ========================================================================== */
.modal-compare-section {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}
.modal-section-title {
  margin: 0;
  font-family: var(--font-royal);
  font-size: 0.96rem;
  color: var(--gold-200);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.modal-section-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.18rem 0.45rem;
  background: rgba(208, 163, 62, 0.15);
  border: 1px solid rgba(208, 163, 62, 0.3);
  color: var(--gold-300);
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.modal-section-subtitle {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin: 0 0 0.85rem;
}

.modal-compare-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 0.65rem;
  margin-bottom: 0.75rem;
}
.compare-product-card {
  position: relative;
  background: rgba(20, 18, 15, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 0.6rem;
  display: flex;
  flex-direction: column;
  transition: all 0.2s ease;
}
.compare-product-card.is-current {
  border-color: var(--gold-400);
  background: rgba(208, 163, 62, 0.08);
  box-shadow: 0 0 12px rgba(229, 185, 76, 0.15);
}
.compare-badge-current {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: var(--gold-500);
  color: #110e08;
  font-size: 0.55rem;
  font-weight: 800;
  padding: 0.12rem 0.35rem;
  border-radius: 3px;
  text-transform: uppercase;
}
.compare-card-thumb {
  width: 100%;
  height: 85px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.45rem;
}
.compare-card-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.35rem;
  min-height: 1.8rem;
}
.compare-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  padding: 0.15rem 0;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
}
.compare-row span:first-child { color: var(--text-dim); }
.compare-row span:last-child { color: var(--gold-200); font-weight: 700; }
.compare-card-price {
  margin: 0.45rem 0 0.35rem;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--gold-300);
  text-align: center;
}
.btn-compare-switch {
  width: 100%;
  padding: 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gold-200);
  background: rgba(208, 163, 62, 0.12);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.18s;
}
.btn-compare-switch:hover {
  background: var(--gold-400);
  color: #120e06;
}

/* ==========================================================================
   MOBILE-CENTRIC ADMIN PORTAL STYLES (Requirement 5)
   ========================================================================== */
.admin-portal-backdrop {
  z-index: 1200;
}
.admin-mobile-app-shell {
  width: 100%;
  max-width: 680px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #0e0d0c;
  border: 1px solid rgba(208, 163, 62, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.85);
}

@media (max-width: 768px) {
  .admin-mobile-app-shell {
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border: none;
  }
}

.admin-appbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(18, 16, 14, 0.98);
  border-bottom: 1px solid rgba(208, 163, 62, 0.22);
}
.admin-appbar-title-wrap {
  text-align: center;
}
.admin-appbar-title-wrap h2 {
  font-family: var(--font-royal);
  font-size: 1.05rem;
  color: var(--gold-200);
  margin: 0;
}
.admin-appbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  color: #10b981;
}
.admin-appbar-status .status-dot {
  width: 6px;
  height: 6px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 6px #10b981;
}
.admin-appbar-btn {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  font-size: 1.1rem;
  transition: all 0.18s;
}
.admin-appbar-btn:hover { background: rgba(208, 163, 62, 0.2); color: var(--gold-200); }
.admin-appbar-btn.danger:hover { background: rgba(239, 68, 68, 0.2); color: #ef4444; }

/* Admin Segmented Tabs */
.admin-tabs-nav {
  display: flex;
  background: rgba(14, 13, 11, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.admin-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.7rem 0.5rem;
  color: var(--text-dim);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.18s;
}
.admin-tab-btn i { font-size: 1rem; }
.admin-tab-btn.active {
  color: var(--gold-300);
  border-bottom-color: var(--gold-400);
  background: rgba(208, 163, 62, 0.06);
}

/* Admin Tab Panes */
.admin-tab-pane {
  display: none;
  flex: 1;
  overflow-y: auto;
  padding: 1rem;
  -webkit-overflow-scrolling: touch;
}
.admin-tab-pane.active {
  display: block;
}

.admin-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.admin-pane-header h3 {
  font-family: var(--font-royal);
  font-size: 1rem;
  color: var(--gold-200);
  margin: 0 0 0.15rem;
}
.admin-pane-header p {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin: 0;
}
.btn-sm {
  padding: 0.4rem 0.75rem;
  font-size: 0.75rem;
}

/* Form sheet */
.admin-form-sheet {
  background: rgba(24, 21, 17, 0.9);
  border: 1px solid var(--border-gold);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.admin-form-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
}

/* Admin Mobile Rate Cards */
.admin-mobile-rate-cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.admin-rate-card {
  background: rgba(24, 21, 17, 0.8);
  border: 1px solid rgba(208, 163, 62, 0.28);
  border-radius: 10px;
  padding: 0.85rem;
}
.admin-rate-card.silver-card {
  border-color: rgba(220, 225, 230, 0.28);
}
.rate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}
.rate-metal-tag {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-200);
}
.admin-rate-card.silver-card .rate-metal-tag {
  color: #e2e8f0;
}
.rate-unit {
  font-size: 0.7rem;
  color: var(--text-dim);
}
.rate-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.rate-input-wrap .currency-symbol {
  position: absolute;
  left: 0.75rem;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold-400);
}
.rate-input-wrap input {
  width: 100%;
  padding: 0.65rem 0.75rem 0.65rem 1.85rem;
  font-size: 1.25rem;
  font-weight: 800;
  color: #fff;
  background: rgba(10, 8, 6, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}
.rate-quick-adjust {
  display: flex;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.rate-quick-adjust button {
  flex: 1;
  padding: 0.35rem 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.rate-quick-adjust button:active {
  background: rgba(208, 163, 62, 0.25);
  color: #fff;
}

/* Settings Card */
.admin-settings-card {
  background: rgba(20, 18, 15, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  padding: 1rem;
}
.api-quick-presets {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0 0.8rem;
}
.preset-btn {
  flex: 1;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gold-300);
  background: rgba(208, 163, 62, 0.1);
  border: 1px solid rgba(208, 163, 62, 0.3);
  border-radius: 5px;
  cursor: pointer;
}
.admin-server-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.server-config-toggle-btn {
  background: none;
  border: none;
  color: var(--gold-300);
  font: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  text-decoration: underline;
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* ==========================================================================
   VISUAL-FIRST TOP BULLION TICKER BAR
   ========================================================================== */
.top-bullion-ticker-bar {
  background: rgba(14, 10, 8, 0.96);
  border-bottom: 1px solid rgba(208, 163, 62, 0.28);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 60px;
  z-index: 45;
  padding: 0.35rem 0.75rem;
}

.ticker-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  overflow: hidden;
}

.ticker-live-status {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #22c55e;
  white-space: nowrap;
  flex-shrink: 0;
  z-index: 2;
}

.ticker-marquee-track-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 3%, black 97%, transparent);
  white-space: nowrap;
}

.ticker-marquee-track {
  display: flex;
  width: max-content;
  will-change: transform;
  animation: ratesMarqueeContinuous 22s linear infinite;
}

.ticker-marquee-track:hover {
  animation-play-state: paused;
}

.ticker-rates-group {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding-right: 1.8rem;
  flex-shrink: 0;
}

.ticker-pill {
  font-size: 0.76rem;
  color: #c9c3b6;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.ticker-pill strong {
  color: var(--gold-300);
  font-weight: 700;
}
.ticker-pill span {
  font-weight: 700;
  color: #fff;
}

@keyframes ratesMarqueeContinuous {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

.ticker-calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(208, 163, 62, 0.15);
  border: 1px solid rgba(208, 163, 62, 0.35);
  color: var(--gold-200);
  font-size: 0.72rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}
.ticker-calc-btn:hover {
  background: var(--gold-400);
  color: #120a05;
}

/* ==========================================================================
   INSTAGRAM-STYLE COLLECTION STORY CIRCLES
   ========================================================================== */
.collection-stories-section {
  padding: 0.85rem 0 0.5rem;
  background: linear-gradient(180deg, rgba(14, 10, 8, 0.95) 0%, rgba(10, 5, 7, 1) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.stories-container {
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.stories-container::-webkit-scrollbar { display: none; }

.stories-track {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  padding: 0.25rem 0.5rem;
  min-width: min-content;
}

.story-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}
.story-bubble:hover {
  transform: translateY(-2px);
}

.story-ring {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  padding: 2.5px;
  background: linear-gradient(135deg, rgba(208, 163, 62, 0.4), rgba(255, 255, 255, 0.1));
  border: 1px solid rgba(208, 163, 62, 0.3);
  position: relative;
  transition: all 0.25s ease;
}

.story-bubble.active .story-ring {
  background: linear-gradient(135deg, #ffd56b, #d4a024, #b8861b);
  box-shadow: 0 0 14px rgba(229, 185, 76, 0.45);
  transform: scale(1.05);
}

.story-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.story-bubble span {
  font-size: 0.72rem;
  font-weight: 600;
  color: #a6a095;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.story-bubble.active span {
  color: var(--gold-200);
  font-weight: 700;
}

/* ==========================================================================
   VISUAL-FIRST SPOTLIGHT HERO
   ========================================================================== */
.visual-first-hero {
  padding: 1.25rem 0 2rem;
  background: transparent;
}

.spotlight-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 2rem;
  background: linear-gradient(145deg, rgba(26, 17, 12, 0.9), rgba(16, 10, 8, 0.95));
  border: 1px solid rgba(208, 163, 62, 0.35);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6);
  position: relative;
}

.spotlight-media {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: #000;
}

.spotlight-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-reveal);
}
.spotlight-card:hover .spotlight-img {
  transform: scale(1.03);
}

.spotlight-badges {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 2;
}

.spotlight-tag-gold {
  background: linear-gradient(135deg, rgba(208, 163, 62, 0.95), rgba(175, 128, 30, 0.95));
  color: #0d0805;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}

.spotlight-tag-purity {
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.spotlight-info {
  padding: 2rem 2rem 2rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.spotlight-kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.5rem;
}

.spotlight-title {
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  font-family: var(--font-royal);
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.35rem;
}

.spotlight-telugu {
  font-size: 0.95rem;
  color: #c4b998;
  margin-bottom: 1.25rem;
}

.spotlight-pricing {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(208, 163, 62, 0.25);
  border-radius: 10px;
  padding: 1.2rem;
  margin-top: auto;
}

.spotlight-price-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8c867b;
}

.spotlight-price-val {
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffd56b;
  font-family: var(--font-royal);
  margin: 0.15rem 0;
}

.spotlight-price-note {
  display: block;
  font-size: 0.72rem;
  color: #aba496;
  margin-bottom: 1rem;
}

.spotlight-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.spotlight-view-btn {
  flex: 1;
  min-width: 180px;
  padding: 0.75rem 1rem;
  font-size: 0.86rem;
  font-weight: 700;
}

.btn-whatsapp-spotlight {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #25d366;
  color: #0b0704;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.75rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-whatsapp-spotlight:hover {
  background: #20ba59;
  transform: translateY(-2px);
}

@media (max-width: 860px) {
  .spotlight-card {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .spotlight-media {
    min-height: 280px;
  }
  .spotlight-info {
    padding: 1.4rem;
  }
  .top-bullion-ticker-bar {
    top: 52px;
    padding: 0.35rem 0.5rem;
  }
  .story-ring {
    width: 56px;
    height: 56px;
  }
  .stories-track {
    gap: 0.9rem;
  }
  .product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
  .product-card .card-body {
    padding: 0.75rem 0.65rem !important;
  }
  .product-card .card-title {
    font-size: 0.84rem !important;
    line-height: 1.3 !important;
  }
  .product-card .card-price {
    font-size: 0.96rem !important;
  }
  .product-card .badge-sku {
    display: none !important;
  }
  .product-card .badge-pill {
    font-size: 0.56rem !important;
    padding: 0.15rem 0.35rem !important;
  }
  .product-card .card-specs-mini {
    font-size: 0.66rem !important;
    margin: 0.3rem 0 !important;
  }
  .card-actions {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    margin-top: auto !important;
  }
  .card-actions .btn-view-details {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .card-actions .btn-inquire-whatsapp {
    padding: 0.5rem 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* ==========================================================================
   HIDDEN OWNER FLOATING BADGE (Visible only when authenticated)
   ========================================================================== */
.owner-floating-badge {
  position: fixed;
  bottom: 74px;
  left: 16px;
  z-index: 9999;
  background: rgba(18, 10, 14, 0.95);
  border: 1px solid var(--border-gold);
  border-radius: 30px;
  padding: 0.35rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(212, 175, 55, 0.3);
  backdrop-filter: blur(8px);
  animation: fadeIn 0.3s ease;
  font-family: var(--font-royal);
  color: var(--gold-200);
}

.owner-badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
}

.btn-owner-pill-action {
  background: var(--gold-gradient);
  color: #11080b;
  border: none;
  font-weight: 700;
  font-size: 0.72rem;
  padding: 0.25rem 0.6rem;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: all 0.2s ease;
}

.btn-owner-pill-action:hover {
  filter: brightness(1.15);
  transform: scale(1.04);
}

.btn-owner-pill-logout {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-owner-pill-logout:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #ff4d6d;
}

/* ==========================================================================
   STREAMLINED CLEAN CATALOG CONTROLS & FILTER BOTTOM SHEET
   ========================================================================== */
.catalog-clean-controls {
  margin-bottom: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.catalog-search-filter-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
}

.catalog-search-filter-row .browse-search-bar {
  flex: 1;
  margin: 0 !important;
  min-height: 44px;
  background: rgba(18, 10, 14, 0.85);
  border: 1px solid var(--border-gold);
  border-radius: 25px;
}

.btn-filter-trigger {
  height: 44px;
  padding: 0 1rem;
  background: rgba(229, 185, 76, 0.14);
  border: 1px solid var(--border-gold);
  color: var(--gold-200);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 25px;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition-smooth);
}

.btn-filter-trigger:hover {
  background: var(--gold-gradient);
  color: #11080b;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 160, 36, 0.35);
}

.filter-count-badge {
  background: var(--gold-400);
  color: #0b0704;
  font-size: 0.66rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.quick-category-track {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: 0.1rem;
}

.quick-category-track::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.catalog-status-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.74rem;
  color: var(--text-dim);
  padding: 0 0.25rem;
}

.active-filter-chips-row {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.active-filter-tag {
  background: rgba(229, 185, 76, 0.18);
  border: 1px solid var(--gold-400);
  color: var(--gold-200);
  padding: 0.15rem 0.5rem;
  border-radius: 12px;
  font-size: 0.68rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.active-filter-tag button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Filter Modal Bottom Sheet */
.filter-modal-backdrop {
  align-items: flex-end !important;
  background: rgba(0, 0, 0, 0.7) !important;
}

.filter-sheet-card {
  width: min(100%, 540px);
  max-height: 85vh;
  margin: 0 auto;
  background: #140c10;
  border: 1px solid var(--border-gold);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 55, 0.2);
  animation: slideUpSheet 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

@keyframes slideUpSheet {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.filter-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.filter-sheet-title-group h3 {
  font-family: var(--font-royal);
  font-size: 1.15rem;
  color: var(--gold-200);
  margin-bottom: 0.15rem;
}

.filter-sheet-title-group p {
  font-size: 0.74rem;
  color: var(--text-dim);
}

.filter-sheet-body {
  padding: 1.1rem 1.25rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.sheet-filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sheet-filter-label {
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gold-300);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sheet-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.sheet-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(229, 185, 76, 0.2);
  color: var(--text-muted);
  padding: 0.42rem 0.8rem;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-smooth);
}

.sheet-chip:hover {
  background: rgba(229, 185, 76, 0.15);
  color: #fff;
}

.sheet-chip.active {
  background: var(--gold-gradient);
  color: #11080b;
  border-color: transparent;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(212, 160, 36, 0.3);
}

.filter-sheet-footer {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(10, 5, 7, 0.6);
}

.btn-sheet-reset {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text-muted);
  border-radius: 8px;
  padding: 0.65rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: all 0.2s ease;
}

.btn-sheet-reset:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.btn-sheet-apply {
  flex: 1;
  border-radius: 8px;
  padding: 0.65rem 1.1rem;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   ROYAL CINEMATIC INTRO GATEWAY & PARTICLES
   ========================================================================== */
.cinematic-intro-gateway {
  position: fixed;
  inset: 0;
  z-index: 999999;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle at 50% 45%, #1f140a 0%, #0d0805 55%, #040201 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s ease, transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), filter 0.75s ease;
  user-select: none;
  -webkit-user-select: none;
}

.cinematic-intro-gateway.intro-exiting {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(1.06);
  filter: blur(10px);
}

.intro-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.intro-ambient-glow {
  position: absolute;
  width: min(600px, 90vw);
  height: min(600px, 90vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(218, 165, 32, 0.22) 0%, rgba(184, 134, 11, 0.08) 50%, transparent 75%);
  filter: blur(55px);
  pointer-events: none;
  z-index: 2;
  animation: introPulseGlow 4.5s ease-in-out infinite alternate;
}

@keyframes introPulseGlow {
  0% { transform: scale(0.9) translate3d(0, 0, 0); opacity: 0.65; }
  100% { transform: scale(1.15) translate3d(0, 0, 0); opacity: 0.95; }
}

.intro-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.92);
}

.intro-top-bar {
  position: absolute;
  top: 1.25rem;
  left: 1.5rem;
  right: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 20;
}

.intro-sound-toggle,
.intro-skip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 1rem;
  background: rgba(22, 16, 12, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  color: var(--gold-200);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.intro-sound-toggle:hover,
.intro-skip-btn:hover {
  background: rgba(212, 175, 55, 0.18);
  border-color: var(--gold-300);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
}

.intro-stage-content {
  position: relative;
  z-index: 10;
  max-width: 640px;
  width: 92%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
}

/* Monogram Crest Container */
.intro-crest-container {
  position: relative;
  width: 140px;
  height: 140px;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-crest-aura {
  position: absolute;
  inset: -15px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.35) 0%, rgba(212, 175, 55, 0.12) 50%, transparent 75%);
  filter: blur(15px);
  animation: introCrestPulse 3s ease-in-out infinite alternate;
}

@keyframes introCrestPulse {
  0% { transform: scale(0.95); opacity: 0.6; }
  100% { transform: scale(1.1); opacity: 1; }
}

.intro-crest-frame {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.intro-crest-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px rgba(212, 175, 55, 0.45));
  animation: introCrestFloat 4s ease-in-out infinite;
}

@keyframes introCrestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.intro-crest-flare {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 235, 170, 0.25) 45deg, transparent 90deg);
  animation: introFlareSpin 8s linear infinite;
  pointer-events: none;
}

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

/* Brand Details in Intro */
.intro-est-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold-400);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.4);
}

.intro-brand-name {
  font-family: var(--font-royal);
  font-size: clamp(1.85rem, 5vw, 2.7rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.08em;
  margin: 0;
  background: linear-gradient(135deg, #fff3cc 0%, #ffd700 30%, #ffffff 50%, #d4af37 75%, #aa7c11 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: introTextSheen 5s linear infinite;
  text-shadow: 0 0 24px rgba(212, 175, 55, 0.3);
}

.intro-brand-name small {
  display: block;
  font-size: 0.48em;
  font-weight: 600;
  letter-spacing: 0.32em;
  margin-top: 0.2rem;
}

@keyframes introTextSheen {
  0% { background-position: 0% center; }
  100% { background-position: 250% center; }
}

.intro-telugu-name {
  font-size: clamp(1.2rem, 3.2vw, 1.55rem);
  color: var(--gold-200);
  font-weight: 700;
  margin: 0.35rem 0 0.45rem;
  text-shadow: 0 0 12px rgba(212, 175, 55, 0.35);
}

.intro-tagline {
  font-size: 0.85rem;
  color: var(--text-dim);
  max-width: 460px;
  margin: 0 auto 1.6rem;
  line-height: 1.45;
}

/* Language Selection Cards inside Intro */
.intro-lang-portal {
  width: 100%;
  animation: introPortalSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: 0.25s;
}

@keyframes introPortalSlideUp {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

.intro-portal-title {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--gold-300);
  margin-bottom: 0.9rem;
  text-transform: uppercase;
}

.intro-lang-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9rem;
  width: 100%;
}

.intro-lang-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1.05rem 1.15rem;
  background: rgba(22, 16, 12, 0.75);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1.5px solid rgba(212, 175, 55, 0.32);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.intro-lang-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 220, 130, 0.18), transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.intro-lang-card:hover {
  border-color: var(--gold-300);
  background: rgba(36, 26, 18, 0.9);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.24);
}

.intro-lang-card:hover::before {
  opacity: 1;
}

.intro-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(212, 175, 55, 0.15);
  border: 1px solid rgba(212, 175, 55, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gold-300);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.intro-card-text {
  flex: 1;
}

.intro-card-text strong {
  display: block;
  font-size: 1.05rem;
  color: #fff;
  font-family: var(--font-royal);
  letter-spacing: 0.04em;
}

.intro-card-text span {
  display: block;
  font-size: 0.75rem;
  color: var(--gold-200);
  margin-top: 0.12rem;
}

.intro-card-arrow {
  color: var(--gold-400);
  font-size: 1.15rem;
  transition: transform 0.25s ease, color 0.25s ease;
}

.intro-lang-card:hover .intro-card-arrow {
  transform: translateX(4px);
  color: #fff;
}

@media (max-width: 600px) {
  .intro-lang-cards-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .intro-lang-card {
    padding: 0.85rem 1rem;
  }
  .intro-crest-container {
    width: 115px;
    height: 115px;
    margin-bottom: 0.85rem;
  }
  .intro-tagline {
    font-size: 0.78rem;
    margin-bottom: 1.2rem;
  }
  .intro-top-bar {
    top: 0.85rem;
    left: 1rem;
    right: 1rem;
  }
}

/* ==========================================================================
   FRAMER-GRADE PRODUCT MOTION GRAPHICS (3D Tilt & Specular Glare)
   ========================================================================== */
.product-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  will-change: transform;
  transition: transform 0.14s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.product-card .card-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    circle 280px at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(255, 235, 175, 0.32) 0%,
    rgba(218, 165, 32, 0.1) 40%,
    transparent 75%
  );
  opacity: var(--glare-opacity, 0);
  mix-blend-mode: color-dodge;
  transition: opacity 0.25s ease;
}

.product-card .card-image-wrap {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.product-card .card-image-wrap img {
  transform: translateZ(22px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.product-card:hover .card-image-wrap img {
  transform: translateZ(32px) scale(1.05);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.5));
}

.product-card .card-badges,
.product-card .btn-shortlist-heart {
  transform: translateZ(30px);
}

/* Tap Elastic Framer Bounce */
.product-card.card-tapped-spring {
  animation: framerSpringBounce 0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes framerSpringBounce {
  0% { transform: perspective(1000px) scale(1); }
  25% { transform: perspective(1000px) scale(0.96) translateZ(-10px); }
  65% { transform: perspective(1000px) scale(1.025) translateZ(12px); }
  100% { transform: perspective(1000px) scale(1); }
}

/* Golden Sparkle Particle Burst on Tap */
.gold-sparkle-burst-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999999;
}

.gold-sparkle-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffe066 50%, #d4af37 100%);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.9), 0 0 20px rgba(212, 175, 55, 0.5);
  animation: sparkleBurstFade 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sparkleBurstFade {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.2) rotate(var(--rot));
  }
}

/* ==========================================================================
   PRODUCT DETAIL MODAL CINEMATICS (Rotating Halo & Macro Lens)
   ========================================================================== */
.modal-media-col {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at center, rgba(30, 20, 14, 0.85) 0%, rgba(10, 5, 7, 0.95) 100%);
  border-radius: 14px;
  padding: 1.25rem;
  border: 1px solid rgba(212, 175, 55, 0.22);
}

.modal-ambient-aura {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.26) 0%, rgba(184, 134, 11, 0.08) 55%, transparent 75%);
  filter: blur(35px);
  pointer-events: none;
  z-index: 1;
  animation: modalAuraRotate 8s linear infinite;
}

@keyframes modalAuraRotate {
  0% { transform: rotate(0deg) scale(0.95); }
  50% { transform: rotate(180deg) scale(1.1); }
  100% { transform: rotate(360deg) scale(0.95); }
}

.modal-img-viewport {
  position: relative;
  z-index: 2;
  width: 100%;
  max-height: 420px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: crosshair;
  overflow: hidden;
  border-radius: 10px;
}

.modal-img-viewport img {
  width: 100%;
  max-height: 380px;
  object-fit: contain;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.6));
}

.modal-specular-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(
    circle 240px at var(--modal-glare-x, 50%) var(--modal-glare-y, 50%),
    rgba(255, 240, 190, 0.35) 0%,
    rgba(212, 175, 55, 0.12) 40%,
    transparent 70%
  );
  opacity: var(--modal-glare-opacity, 0);
  mix-blend-mode: color-dodge;
  transition: opacity 0.25s ease;
}

.modal-zoom-lens {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  border: 2px solid var(--gold-300);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.5), inset 0 0 12px rgba(212, 175, 55, 0.3);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.7);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
  background-repeat: no-repeat;
  display: none;
}

.modal-zoom-lens.active {
  display: block;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.modal-lens-hint {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: var(--text-dim);
  margin-top: 0.75rem;
  text-align: center;
  z-index: 2;
}

/* Intro Replay Button in Nav */
.btn-intro-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(212, 175, 55, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  color: var(--gold-200);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}

.btn-intro-replay:hover {
  background: rgba(212, 175, 55, 0.25);
  border-color: var(--gold-300);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(212, 175, 55, 0.25);
}

@media (max-width: 600px) {
  .btn-intro-replay {
    padding: 0.3rem 0.55rem;
    font-size: 0.72rem;
  }
}

/* ==========================================================================
   SRI SAI KRISHNA JEWELLERS — PREMIUM MOTION EXPERIENCE
   Framer-Grade Motion Design System
   ========================================================================== */

/* 1. CINEMATIC 1.5s ENTRY VEIL & HORIZONTAL GOLD BEAM */
.cinematic-entry-veil {
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: radial-gradient(circle at 50% 50%, #150e09 0%, #080503 65%, #020101 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.55s ease;
  overflow: hidden;
}

.cinematic-entry-veil.veil-dissolved {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entry-particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.entry-ambient-glow {
  position: absolute;
  width: min(500px, 85vw);
  height: min(500px, 85vw);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.16) 0%, rgba(184, 134, 11, 0.05) 50%, transparent 75%);
  filter: blur(40px);
  pointer-events: none;
}

/* Horizontal Golden Light Beam (0.3s - 0.8s) */
.entry-gold-beam-track {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100vw;
  height: 2px;
  transform: translateY(-50%);
  pointer-events: none;
  overflow: visible;
}

.entry-gold-beam {
  position: absolute;
  top: 0;
  left: -40vw;
  width: 40vw;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.4) 30%, #fff6d6 70%, #ffffff 95%, transparent 100%);
  box-shadow: 0 0 16px rgba(255, 235, 170, 0.9), 0 0 32px rgba(212, 175, 55, 0.5);
  animation: entryBeamSweep 0.85s cubic-bezier(0.2, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
}

.entry-lens-flare {
  position: absolute;
  top: -19px;
  left: -40vw;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 230, 150, 0.6) 30%, transparent 70%);
  filter: blur(2px);
  animation: entryBeamSweep 0.85s cubic-bezier(0.2, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
}

@keyframes entryBeamSweep {
  0% { transform: translateX(0); opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translateX(140vw); opacity: 0; }
}

/* Entry Monogram Brand Crest */
.entry-brand-crest {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(14px);
  filter: blur(6px);
  animation: entryCrestReveal 0.75s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.45s;
}

@keyframes entryCrestReveal {
  0% { opacity: 0; transform: translateY(14px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.entry-crest-mark {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  border: 1.5px solid rgba(212, 175, 55, 0.5);
  background: radial-gradient(circle at 35% 30%, #2a1c12 0%, #120b07 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-royal);
  font-weight: 800;
  font-size: 1.35rem;
  color: var(--gold-300);
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.3);
  margin-bottom: 0.75rem;
}

.entry-crest-title {
  font-family: var(--font-royal);
  font-size: clamp(1.2rem, 3.5vw, 1.85rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.4);
}

.entry-crest-sub {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--gold-300);
  margin-top: 0.3rem;
  text-transform: uppercase;
}

/* 2. BACKGROUND DEFOCUS DURING PRODUCT EXTRACTION */
.page-bg-cinematic-defocus {
  filter: blur(6px) brightness(0.78);
  opacity: 0.75;
  transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.45s ease;
  pointer-events: none;
}

/* 3. TINY GOLDEN CLICK PULSE (Step 1: 150-250ms) */
.gold-click-pulse {
  position: fixed;
  pointer-events: none;
  z-index: 9999999;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(255, 248, 220, 0.95) 0%, rgba(212, 175, 55, 0.6) 40%, rgba(212, 175, 55, 0) 75%);
  box-shadow: 0 0 18px rgba(255, 215, 0, 0.9);
  animation: goldPulseKeyframe 0.24s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes goldPulseKeyframe {
  0% { transform: translate(-50%, -50%) scale(0.5); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(7.5); opacity: 0; }
}

/* 4. PRODUCT EXTRACTION CLONE (Step 2: Card -> Center) */
.product-flying-clone {
  position: fixed;
  z-index: 10000000;
  pointer-events: none;
  object-fit: contain;
  will-change: transform, left, top, width, height;
  filter: drop-shadow(0 20px 45px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 28px rgba(212, 175, 55, 0.35));
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  border-radius: 8px;
}

/* 5. VELOCITY-RESPONSIVE FINE GOLD DUST TRAIL */
.gold-dust-speck {
  position: fixed;
  pointer-events: none;
  z-index: 9999999;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #ffd700 65%, transparent 100%);
  box-shadow: 0 0 6px #ffd700;
  animation: goldDustFade 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes goldDustFade {
  0% { transform: scale(1) translate(0, 0); opacity: 0.95; }
  100% { transform: scale(0.2) translate(var(--dust-x, 0), var(--dust-y, 0)); opacity: 0; }
}

/* 6. REUSABLE LUXURY GOLD LIGHT SWEEP (Section 11) */
.luxury-gold-sweep-host {
  position: relative;
  overflow: hidden;
}

.luxury-gold-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 50%;
  pointer-events: none;
  z-index: 8;
  background: linear-gradient(
    105deg,
    transparent 15%,
    rgba(255, 245, 210, 0.42) 50%,
    rgba(212, 175, 55, 0.18) 65%,
    transparent 85%
  );
  transform: translateX(-150%) skewX(-20deg);
  will-change: transform;
}

.luxury-gold-sweep.sweep-active {
  animation: sweepPass 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sweepPass {
  0% { transform: translateX(-160%) skewX(-20deg); }
  100% { transform: translateX(360%) skewX(-20deg); }
}

/* 7. REUSABLE GEMSTONE SPARKLE SYSTEM (Section 10) */
.gemstone-sparkle-host {
  position: relative;
}

.gemstone-micro-sparkle {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%) scale(0);
  animation: gemstoneSparkleAnim 0.48s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  filter: drop-shadow(0 0 6px rgba(255, 245, 200, 0.9));
}

.gemstone-micro-sparkle svg {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes gemstoneSparkleAnim {
  0% { transform: translate(-50%, -50%) scale(0) rotate(0deg); opacity: 0; }
  35% { transform: translate(-50%, -50%) scale(1.15) rotate(45deg); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(0.9) rotate(90deg); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(0) rotate(135deg); opacity: 0; }
}

/* 8. CINEMATIC SCROLL REVEAL (Section 4) */
.cinematic-scroll-reveal {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(3px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.8s ease;
  will-change: opacity, transform, filter;
}

.cinematic-scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* 9. PRODUCT DETAIL MODAL HERO ANIMATION & 3D TILT (Section 7, 8, 9) */
#product-modal.open .modal-media-col img#modal-img {
  animation: modalHeroReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalHeroReveal {
  0% { opacity: 0; transform: scale(0.96); filter: blur(4px); }
  60% { opacity: 1; transform: scale(1.015); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* 10. PREFERS-REDUCED-MOTION (Section 15) */
@media (prefers-reduced-motion: reduce) {
  .cinematic-entry-veil,
  .cinematic-intro-gateway,
  .entry-gold-beam,
  .gold-click-pulse,
  .product-flying-clone,
  .gold-dust-speck,
  .luxury-gold-sweep,
  .gemstone-micro-sparkle {
    animation: none !important;
    transition: opacity 0.2s ease !important;
  }
  .product-card {
    transform: none !important;
    transition: none !important;
  }
  .cinematic-scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}