.fade-in { animation: fadeIn 0.5s ease-in; }
.slide-up { animation: slideUp 0.5s ease-out; }
.slide-in-right { animation: slideInRight 0.5s ease-out; }
.scale-in { animation: scaleIn 0.3s ease-out; }

@keyframes fadeIn {
    from { opacity: 0; } to { opacity: 1; }
}
@keyframes slideUp {
    from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
    0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); }
}

.product-card { animation: slideUp 0.5s ease-out; }
.category-card:hover i { animation: pulse 1s infinite; }
.cart-badge { animation: scaleIn 0.3s ease-out; }
.alert { animation: slideUp 0.3s ease-out; }

.flash-sale-carousel .item,
.trending-carousel .item {
    padding: 8px;
}

.owl-carousel .owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: #fff !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}
.owl-carousel .owl-nav button:hover { background: var(--primary) !important; color: #fff !important; }
.owl-carousel .owl-nav .owl-prev { left: -10px; }
.owl-carousel .owl-nav .owl-next { right: -10px; }
.owl-carousel .owl-dots { margin-top: 15px; }
.owl-carousel .owl-dot span { background: #ddd !important; }
.owl-carousel .owl-dot.active span { background: var(--primary) !important; }