style.css

/* Tailwind already loaded via CDN – this file is for extra spice */

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #ff6a00;
    border-radius: 4px;
}
.dark ::-webkit-scrollbar-track {
    background: #1f2937;
}
.dark ::-webkit-scrollbar-thumb {
    background: #ff8c00;
}

/* Filter pills */
.filter-btn {
    @apply px-4 py-2 rounded-full text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-orange-100 dark:hover:bg-orange-900/30 transition;
}
.filter-btn.active {
    @apply bg-orange-500 text-white border-orange-500;
}

/* Card hover lift */
.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.dark .card-hover:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

/* Quantity buttons */
.qty-btn {
    @apply w-8 h-8 rounded-full flex items-center justify-center bg-gray-200 dark:bg-gray-700 hover:bg-orange-200 dark:hover:bg-orange-800 transition;
}