/* Custom styles that can't be done with Tailwind */
.custom-product-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom focus styles */
button:focus, a:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Animation for featured products section */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

#products {
    animation: fadeIn 0.8s ease-out;
}