.hero-bg {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.9) 0%, rgba(217, 119, 6, 0.9) 100%),
                url('data:image/svg+xml,%3Csvg width="100" height="100" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M0 0h100v100H0z" fill="%23f59e0b"/%3E%3C/svg%3E');
    background-size: cover;
    background-position: center;
}

.card-hover {
    transition: all 0.3s ease;
}
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.category-active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}
.category-inactive {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
}

.rating-stars {
    color: #fbbf24;
}
.discount-badge {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.floating-cart { position: fixed; bottom: 20px; right: 20px; z-index: 1000; }
.modal { display: none; }
.modal.show { display: flex; }

.fade-in { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}