/* ============================================
   LOJIFY VISUAL TEMPLATES SYSTEM
   Performance-optimized themes with fallback
   ============================================ */

/* THEME: Lojify Dark Elegance (Default/Fallback) */
.store-container.theme-dark-elegance {
  --template-bg-base: #0a0a0a;
  --template-accent: #ff6b35;
  --template-accent-rgb: 255, 107, 53;
  --template-text: #ffffff;
  --template-text-secondary: #a0a0a0;
  --template-glow-intensity: 0.6;
  --template-shadow-blur: 20px;
  /* Aliases for base CSS compatibility */
  --shadow-blur: var(--template-shadow-blur);
  --glow-intensity: var(--template-glow-intensity);
  background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

.store-container.theme-dark-elegance .product-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 107, 53, 0.2);
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.1);
}

.store-container.theme-dark-elegance .product-card:hover {
  box-shadow: 0 12px 48px rgba(255, 107, 53, 0.3);
  transform: translateY(-4px);
}

.store-container.theme-dark-elegance .btn-primary {
  background: linear-gradient(135deg, #ff6b35, #ff8c5a);
  box-shadow: 0 4px 20px rgba(255, 107, 53, 0.4);
}

/* THEME: Sushi Premium */
.store-container.theme-sushi-premium {
  --template-bg-base: #1a0f0f;
  --template-accent: #dc2626;
  --template-accent-rgb: 220, 38, 38;
  --template-text: #ffffff;
  --template-text-secondary: #d4a574;
  --template-glow-intensity: 0.5;
  --template-shadow-blur: 16px;
  /* Aliases for base CSS compatibility */
  --shadow-blur: var(--template-shadow-blur);
  --glow-intensity: var(--template-glow-intensity);
  background: linear-gradient(135deg, #1a0f0f 0%, #2a1616 100%);
}

.store-container.theme-sushi-premium .product-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(220, 38, 38, 0.3);
  box-shadow: 0 8px 32px rgba(220, 38, 38, 0.15);
}

.store-container.theme-sushi-premium .product-card:hover {
  box-shadow: 0 12px 48px rgba(220, 38, 38, 0.35);
}

.store-container.theme-sushi-premium .btn-primary {
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.5);
}

/* THEME: Fitness Energy */
.store-container.theme-fitness-energy {
  --template-bg-base: #0d1117;
  --template-accent: #22c55e;
  --template-accent-rgb: 34, 197, 94;
  --template-text: #ffffff;
  --template-text-secondary: #94a3b8;
  --template-glow-intensity: 0.7;
  --template-shadow-blur: 24px;
  /* Aliases for base CSS compatibility */
  --shadow-blur: var(--template-shadow-blur);
  --glow-intensity: var(--template-glow-intensity);
  background: linear-gradient(135deg, #0d1117 0%, #1a1f2e 100%);
}

.store-container.theme-fitness-energy .product-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(34, 197, 94, 0.25);
  box-shadow: 0 8px 32px rgba(34, 197, 94, 0.12);
}

.store-container.theme-fitness-energy .product-card:hover {
  box-shadow: 0 12px 48px rgba(34, 197, 94, 0.4);
}

.store-container.theme-fitness-energy .btn-primary {
  background: linear-gradient(135deg, #22c55e, #10b981);
  box-shadow: 0 4px 24px rgba(34, 197, 94, 0.5);
}

/* THEME: Luxury Gold */
.store-container.theme-luxury-gold {
  --template-bg-base: #0f0f0f;
  --template-accent: #f59e0b;
  --template-accent-rgb: 245, 158, 11;
  --template-text: #ffffff;
  --template-text-secondary: #d4af37;
  --template-glow-intensity: 0.8;
  --template-shadow-blur: 28px;
  /* Aliases for base CSS compatibility */
  --shadow-blur: var(--template-shadow-blur);
  --glow-intensity: var(--template-glow-intensity);
  background: linear-gradient(135deg, #0f0f0f 0%, #1f1810 100%);
}

.store-container.theme-luxury-gold .product-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(245, 158, 11, 0.3);
  box-shadow: 0 8px 32px rgba(212, 175, 55, 0.2);
}

.store-container.theme-luxury-gold .product-card:hover {
  box-shadow: 0 12px 48px rgba(245, 158, 11, 0.5);
}

.store-container.theme-luxury-gold .btn-primary {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  box-shadow: 0 4px 28px rgba(245, 158, 11, 0.6);
}

/* THEME: Ocean Blue */
.store-container.theme-ocean-blue {
  --template-bg-base: #0a1628;
  --template-accent: #3b82f6;
  --template-accent-rgb: 59, 130, 246;
  --template-text: #ffffff;
  --template-text-secondary: #94a3b8;
  --template-glow-intensity: 0.6;
  --template-shadow-blur: 20px;
  /* Aliases for base CSS compatibility */
  --shadow-blur: var(--template-shadow-blur);
  --glow-intensity: var(--template-glow-intensity);
  background: linear-gradient(135deg, #0a1628 0%, #172554 100%);
}

.store-container.theme-ocean-blue .product-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(59, 130, 246, 0.25);
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
}

.store-container.theme-ocean-blue .product-card:hover {
  box-shadow: 0 12px 48px rgba(59, 130, 246, 0.4);
}

.store-container.theme-ocean-blue .btn-primary {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  box-shadow: 0 4px 20px rgba(59, 130, 246, 0.5);
}

/* THEME: Pink Glamour */
.store-container.theme-pink-glamour {
  --template-bg-base: #1a0a14;
  --template-accent: #ec4899;
  --template-accent-rgb: 236, 72, 153;
  --template-text: #ffffff;
  --template-text-secondary: #f9a8d4;
  --template-glow-intensity: 0.7;
  --template-shadow-blur: 22px;
  /* Aliases for base CSS compatibility */
  --shadow-blur: var(--template-shadow-blur);
  --glow-intensity: var(--template-glow-intensity);
  background: linear-gradient(135deg, #1a0a14 0%, #2d1420 100%);
}

.store-container.theme-pink-glamour .product-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(236, 72, 153, 0.3);
  box-shadow: 0 8px 32px rgba(236, 72, 153, 0.15);
}

.store-container.theme-pink-glamour .product-card:hover {
  box-shadow: 0 12px 48px rgba(236, 72, 153, 0.45);
}

.store-container.theme-pink-glamour .btn-primary {
  background: linear-gradient(135deg, #ec4899, #f472b6);
  box-shadow: 0 4px 22px rgba(236, 72, 153, 0.55);
}

/* ============================================
   COMMON TEMPLATE UTILITIES
   ============================================ */

.store-container[class*="theme-"] .store-header {
  color: var(--template-text);
}

.store-container[class*="theme-"] .product-price {
  color: var(--template-accent);
  text-shadow: 0 0 var(--template-shadow-blur) 
    rgba(var(--template-accent-rgb), var(--template-glow-intensity));
}

.store-container[class*="theme-"] .product-title {
  color: var(--template-text);
}

.store-container[class*="theme-"] .product-description {
  color: var(--template-text-secondary);
}

/* Smooth transitions for all themes */
.store-container[class*="theme-"] .product-card,
.store-container[class*="theme-"] .btn-primary {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   CRITICAL PERFORMANCE OPTIMIZATION
   Mobile-safe, no body transforms
   ============================================ */

/* GPU acceleration - exclude html/body to prevent scroll issues */
[class*="theme-"]:not(html):not(body) {
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Targeted transitions - only on relevant elements */
.store-container[class*="theme-"] .neon-card,
.store-container[class*="theme-"] .btn-primary,
.store-container[class*="theme-"] .store-header,
.store-container[class*="theme-"] .neon-price-current {
  transition: background-color 0.25s ease, 
              border-color 0.25s ease, 
              box-shadow 0.25s ease,
              color 0.2s ease;
}

/* Map template variables to actual catalog classes */
.store-container[class*="theme-"] .neon-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(var(--template-accent-rgb), 0.25);
  box-shadow: 0 8px 32px rgba(var(--template-accent-rgb), 0.12);
}

.store-container[class*="theme-"] .neon-card:hover {
  box-shadow: 0 12px 48px rgba(var(--template-accent-rgb), 0.30);
  transform: translateY(-2px);
}

.store-container[class*="theme-"] .neon-price-current {
  color: var(--template-accent);
  text-shadow: 0 0 var(--template-shadow-blur) rgba(var(--template-accent-rgb), var(--template-glow-intensity));
}

.store-container[class*="theme-"] .neon-text-primary {
  color: var(--template-text);
}

.store-container[class*="theme-"] .neon-text-secondary {
  color: var(--template-text-secondary);
}

.store-container[class*="theme-"] .neon-header-badge,
.store-container[class*="theme-"] .btn-primary,
.store-container[class*="theme-"] .neon-cta-button {
  background: linear-gradient(135deg, var(--template-accent), color-mix(in oklab, var(--template-accent) 70%, white));
  box-shadow: 0 4px 20px rgba(var(--template-accent-rgb), 0.35);
  color: #0a0a0a;
}

/* Accent highlight adapts to template */
.store-container[class*="theme-"] .neon-header-highlight {
  color: var(--template-accent);
  text-shadow: 0 0 var(--template-shadow-blur) rgba(var(--template-accent-rgb), 0.35);
}

/* Mobile safe mode - lighter shadows */
@media (max-width: 768px) {
  .store-container[class*="theme-"] .neon-card,
  .store-container[class*="theme-"] .btn-primary,
  .store-container[class*="theme-"] .neon-cta-button {
    box-shadow: 0 6px 18px rgba(var(--template-accent-rgb), 0.22);
  }
  
  .store-container[class*="theme-"] .neon-card:hover {
    box-shadow: 0 8px 24px rgba(var(--template-accent-rgb), 0.28);
    transform: none; /* evita jump no mobile */
  }
}

/* Disable hover transforms on touch devices to avoid interaction bugs */
@media (hover: none) {
  .store-container[class*="theme-"] .neon-card:hover {
    transform: none;
  }
}

/* Accessibility - disable animations for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .store-container[class*="theme-"] .neon-card,
  .store-container[class*="theme-"] .btn-primary,
  .store-container[class*="theme-"] .store-header,
  .store-container[class*="theme-"] .neon-price-current {
    transition: none !important;
  }
}