body {
      box-sizing: border-box;
    }
    
    * {
      scrollbar-width: thin;
      scrollbar-color: #7C3AED #F3F4F6;
    }
    
    .font-poppins { font-family: 'Poppins', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }
    
    @keyframes float-gentle {
      0%, 100% { transform: translateY(0) rotate(0deg); }
      50% { transform: translateY(-20px) rotate(5deg); }
    }
    
    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(124, 58, 237, 0.3); }
      50% { box-shadow: 0 0 40px rgba(124, 58, 237, 0.6); }
    }
    
    @keyframes slide-up {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }
    
    @keyframes sparkle {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.5); }
    }
    
    .animate-float-gentle { animation: float-gentle 6s ease-in-out infinite; }
    .animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
    .animate-slide-up { animation: slide-up 0.6s ease-out forwards; }
    .animate-sparkle { animation: sparkle 2s ease-in-out infinite; }
    
    .gradient-primary {
      background: linear-gradient(135deg, #7C3AED 0%, #22D3EE 100%);
    }
    
    .gradient-hero {
      background: linear-gradient(180deg, #FFFFFF 0%, #F3F4F6 50%, #E0E7FF 100%);
    }
    
    .card-product {
      background: white;
      border-radius: 1rem;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
    }
    
    .card-product:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(124, 58, 237, 0.15);
    }
    
    .btn-primary {
      background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
      transition: all 0.3s ease;
    }
    
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4);
    }
    
    .btn-secondary {
      border: 2px solid #7C3AED;
      transition: all 0.3s ease;
    }
    
    .btn-secondary:hover {
      background: rgba(124, 58, 237, 0.1);
      transform: translateY(-2px);
    }
    
    .category-card {
      background: linear-gradient(135deg, #FFFFFF 0%, #F9FAFB 100%);
      border-radius: 1rem;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    
    .category-card:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 15px 35px rgba(124, 58, 237, 0.2);
    }
    
    .badge-discount {
      background: linear-gradient(135deg, #EF4444 0%, #DC2626 100%);
      color: white;
      font-size: 0.75rem;
      padding: 0.25rem 0.5rem;
      border-radius: 0.5rem;
      font-weight: 600;
    }
    
    .badge-tag {
      background: linear-gradient(135deg, #22D3EE 0%, #06B6D4 100%);
      color: white;
      font-size: 0.7rem;
      padding: 0.25rem 0.5rem;
      border-radius: 0.5rem;
      font-weight: 500;
    }
    
    .review-card {
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .star-rating {
      color: #FCD34D;
    }
    
    .filter-btn {
      padding: 0.5rem 1rem;
      border-radius: 0.5rem;
      border: 2px solid #E5E7EB;
      background: white;
      transition: all 0.2s ease;
      cursor: pointer;
    }
    
    .filter-btn.active {
      background: #7C3AED;
      color: white;
      border-color: #7C3AED;
    }
    
    .filter-btn:hover {
      border-color: #7C3AED;
    }
    
    .modal-overlay {
      background: rgba(15, 23, 42, 0.8);
      backdrop-filter: blur(8px);
    }
    
    .quick-view-modal {
      background: white;
      border-radius: 1.5rem;
      max-width: 900px;
      width: 90%;
      max-height: 90vh;
      overflow-y: auto;
    }