@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Jost:wght@300;400;500;600&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-lea-primary { background-color: #FAFAFA; }
    .bg-lea-dark { background-color: #2D2018; }
    .bg-lea-accent { background-color: #8C5333; }
    .bg-lea-light { background-color: #E6DCD1; }
    
    .text-lea-primary { color: #2D2018; }
    .text-lea-accent { color: #8C5333; }
    .text-lea-muted { color: #6E5C50; }
    
    .border-lea-accent { border-color: #8C5333; }
    .border-lea-dark { border-color: #2D2018; }
    
    .font-cinzel { font-family: 'Cinzel', serif; }
    .font-jost { font-family: 'Jost', sans-serif; }
    
    .btn-lea {
        @apply inline-flex items-center justify-center bg-[#2D2018] text-white font-jost text-xs uppercase tracking-[0.2em] py-4 px-8 border border-[#2D2018] hover:bg-[#8C5333] hover:border-[#8C5333] transition-all duration-300;
    }
    
    .btn-lea-outline {
        @apply inline-flex items-center justify-center border border-[#2D2018] text-[#2D2018] font-jost text-xs uppercase tracking-[0.2em] py-4 px-8 hover:bg-[#2D2018] hover:text-white transition-all duration-300;
    }
    
    .nav-link {
        @apply text-[#2D2018] hover:text-[#8C5333] font-jost text-[13px] uppercase tracking-widest transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1.5 left-1/2 w-0 h-[1px] bg-[#8C5333] transition-all duration-300 -translate-x-1/2;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#8C5333];
    }
}

.product-card {
    @apply relative group overflow-hidden bg-white;
}

.product-img-wrapper {
    @apply relative overflow-hidden aspect-[4/5] bg-gray-100;
}

.product-img-wrapper img {
    @apply w-full h-full object-cover transition-transform duration-1000 group-hover:scale-105;
}

.product-img-hover {
    @apply absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-700 group-hover:opacity-100;
}

.product-action {
    @apply absolute bottom-0 left-0 w-full bg-white/90 backdrop-blur-sm p-4 translate-y-full transition-transform duration-300 group-hover:translate-y-0 flex justify-center gap-4;
}

/* Subtle leather texture noise overlay */
.bg-texture {
    position: relative;
}
.bg-texture::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.04'/%3E%3C/svg%3E");
    opacity: 0.5;
    pointer-events: none;
    z-index: 0;
}