/* ==========================================================================
   SƠN TIẾN BẢO V7 — 21ST.DEV LUXURY ARCHITECTURAL STUDIO ENHANCEMENT
   Components from 21st.dev:
   - Tubelight Floating Navbar (Serenity UI / 21st.dev)
   - Spotlight Architectural Hero (Aceternity UI / 21st.dev)
   - Magic UI Infinite Marquee (Magic UI / 21st.dev)
   - Asymmetrical Bento Grid Categories (Magic UI / 21st.dev)
   - Interactive E-Commerce Product Cards (shadcn/ui / 21st.dev)
   - Glowing Smart Tools: Paint Calculator V5 & Color Studio (Cult UI / 21st.dev)
   - Motion Accordion FAQ (shadcn/ui / 21st.dev)
   - High-Trust Multi-Column Footer (21st.dev)
   ========================================================================== */

:root {
  --ui-gold: #c5a059;
  --ui-gold-glow: rgba(197, 160, 89, 0.3);
  --ui-navy-deep: #030a10;
  --ui-navy-luxe: #071521;
}

/* 1. Tubelight Glowing Navbar Pill */
.store .site-header {
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  background: rgba(5, 17, 26, 0.8) !important;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
}

.store .desktop-nav button:hover,
.store .desktop-nav a:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--ui-gold-glow);
}

/* 2. Spotlight Hero Highlights */
.store .hero .eyebrow {
  border-color: rgba(197, 160, 89, 0.35) !important;
  background: rgba(197, 160, 89, 0.09) !important;
  color: #dfbe7e !important;
}

.store .hero .eyebrow i {
  background: #c5a059 !important;
  box-shadow: 0 0 0 4px rgba(197, 160, 89, 0.25) !important;
}

.store .hero h1 em:after {
  background: linear-gradient(90deg, #d72620, #c5a059) !important;
}

.store .trust-mark {
  border-color: rgba(197, 160, 89, 0.35) !important;
  background: rgba(197, 160, 89, 0.1) !important;
  color: #c5a059 !important;
}

/* 3. Magic UI Continuous Marquee Fade Mask */
.store .kinetic-marquee {
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent) !important;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent) !important;
}

/* 4. Bento Grid Hover Glow */
.store .category-card:hover {
  border-color: rgba(197, 160, 89, 0.45) !important;
  box-shadow: 0 24px 60px rgba(5, 18, 28, 0.12), 0 0 20px rgba(197, 160, 89, 0.15) !important;
}

.store .cat-num {
  color: #dfbe7e !important;
}

/* 5. Interactive E-commerce Product Cards */
.store .product-card:hover {
  border-color: rgba(215, 38, 32, 0.35) !important;
  box-shadow: 0 24px 60px rgba(5, 18, 28, 0.13), 0 0 20px rgba(215, 38, 32, 0.12) !important;
}

/* 6. Glowing Calculator Card (Cult UI style) */
.store .calculator-shell-v5 {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.035) !important;
  box-shadow: 0 35px 90px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.store .calc-product-title > span {
  background: linear-gradient(135deg, #d72620, #c5a059) !important;
}

/* 7. Animated Accordion Details */
.store .faq-list details[open] {
  border-color: rgba(197, 160, 89, 0.45) !important;
  box-shadow: 0 14px 36px rgba(5, 18, 28, 0.08) !important;
}

/* 8. Footer Assurance Badge */
.store .foot-assurance > .ui-icon {
  color: #c5a059 !important;
}