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

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(-10px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .animate-fade-in-up {
            animation: fadeInUp 0.5s ease-out;
        }

        .animate-slide-in {
            animation: slideIn 0.3s ease-out;
        }

        .transition-smooth {
            transition: all 0.3s ease-out;
        }

        .product-card {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            border: 1px solid rgba(99, 102, 241, 0.2);
        }

        .dark .product-card {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
            border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .category-btn {
            transition: all 0.3s ease;
        }

        .category-btn.active {
            @apply bg-gradient-to-r from-indigo-500 to-purple-500 text-white shadow-lg scale-105;
        }

        .empty-state {
            @apply text-center py-12;
        }

        .empty-state-icon {
            @apply text-6xl text-gray-300 dark:text-gray-600 mb-4;
        }

        .category-btn {
    transition: all 0.2s ease;
}

/* default */
.category-btn:not(.active) {
    background: #e5e7eb;
    color: #1f2937;
}

.dark .category-btn:not(.active) {
    background: #374151;
    color: #e5e7eb;
}

/* ACTIVE */
.category-btn.active {
    background: #3b82f6 !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.4);
}