style.css

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
    --amber-50: #fffbeb;
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;
    --amber-900: #78350f;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    color: #1f2937;
    line-height: 1.6;
    overflow-x: hidden;
}

.font-serif {
    font-family: 'Cormorant Garamond', Georgia, serif;
}

/* Loading Screen */
.loading-screen {
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loading-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Animations */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-delay {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-delay-2 {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float {
    animation: float 20s ease-in-out infinite;
}

.animate-float-delay {
    animation: float 25s ease-in-out infinite;
    animation-delay: 5s;
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-fade-in-delay {
    animation: fade-in 1s ease-out 0.3s both;
}

.animate-fade-in-delay-2 {
    animation: fade-in 1s ease-out 0.6s both;
}

/* Product Card Styles */
.product-card {
    @apply bg-white rounded-2xl overflow-hidden shadow-lg hover:shadow-2xl transform hover:-translate-y-2 transition-all duration-300 cursor-pointer group;
}

.product-image-wrapper {
    @apply relative overflow-hidden h-80;
}

.product-image {
    @apply w-full h-full object-cover transition-transform duration-500 group-hover:scale-110;
}

.product-badge {
    @apply absolute top-4 right-4 px-3 py-1 bg-amber-500 text-white text-xs font-semibold tracking-wider rounded-full z-10;
}

.product-overlay {
    @apply absolute inset-0 bg-gradient-to-t from-black/60 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6;
}

.product-actions {
    @apply flex gap-3 opacity-0 group-hover:opacity-100 transition-all duration-300 transform translate-y-4 group-hover:translate-y-0;
}

.action-btn {
    @apply px-4 py-2 bg-white text-gray-900 text-sm font-medium rounded-lg hover:bg-amber-500 hover:text-white transition-all duration-300;
}

.product-info {
    @apply p-6;
}

.product-name {
    @apply text-lg font-serif font-medium mb-2 text-gray-900;
}

.product-price {
    @apply text-xl font-semibold text-amber-600;
}

.product-original-price {
    @apply text-sm text-gray-400 line-through ml-2;
}

.product-rating {
    @apply flex items-center gap-1 mt-2;
}

.star {
    @apply w-4 h-4 text-amber-400 fill-current;
}

/* Filter Button Active State */
.filter-btn.active {
    @apply bg-amber-500 text-white border-amber-500;
}

/* Cart Badge */
.cart-badge {
    @apply absolute -top-2 -right-2 w-6 h-6 bg-red-500 text-white text-xs rounded-full flex items-center justify-center font-semibold;
}

/* Newsletter Modal */
.newsletter-modal {
    @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 opacity-0 invisible transition-all duration-300;
}

.newsletter-modal.active {
    @apply opacity-100 visible;
}

.newsletter-content {
    @apply bg-white rounded-2xl p-8 max-w-md w-full transform scale-95 transition-transform duration-300;
}

.newsletter-modal.active .newsletter-content {
    @apply scale-100;
}

/* Quick View Modal */
.quick-view-modal {
    @apply fixed inset-0 bg-black/80 z-50 flex items-center justify-center p-4 opacity-0 invisible transition-all duration-300;
}

.quick-view-modal.active {
    @apply opacity-100 visible;
}

/* Wishlist Heart */
.wishlist-btn {
    @apply absolute top-4 left-4 w-10 h-10 bg-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300 z-10;
}

.wishlist-btn:hover svg {
    @apply fill-red-500 text-red-500;
}

.wishlist-btn.active svg {
    @apply fill-red-500 text-red-500;
}

/* Mobile Menu */
.mobile-menu {
    @apply fixed inset-0 bg-white z-40 transform translate-x-full transition-transform duration-300;
}

.mobile-menu.active {
    @apply translate-x-0;
}

/* Shopping Cart Sidebar */
.cart-sidebar {
    @apply fixed right-0 top-0 h-full w-96 bg-white shadow-2xl z-50 transform translate-x-full transition-transform duration-300;
}

.cart-sidebar.active {
    @apply translate-x-0;
}

.cart-overlay {
    @apply fixed inset-0 bg-black/50 z-40 opacity-0 invisible transition-all duration-300;
}

.cart-overlay.active {
    @apply opacity-100 visible;
}

/* Responsive Design */
@media (max-width: 768px) {
    .text-6xl {
        font-size: 2.5rem;
    }
    
    .text-8xl {
        font-size: 3.5rem;
    }
    
    #products-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 1rem;
    }
    
    .cart-sidebar {
        width: 100%;
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: var(--amber-500);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--amber-600);
}