/* 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; }