@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-fur-primary { background-color: #F5F2EB; } /* Warm beige/sand */
    .bg-fur-dark { background-color: #2D302A; } /* Deep olive/charcoal */
    .bg-fur-accent { background-color: #8E6E53; } /* Wood/terracotta */
    .bg-fur-light { background-color: #E8E5DF; } 
    
    .text-fur-primary { color: #2D302A; }
    .text-fur-accent { color: #8E6E53; }
    .text-fur-muted { color: #73756F; }
    
    .border-fur-accent { border-color: #8E6E53; }
    .border-fur-dark { border-color: #2D302A; }
    
    .font-cormorant { font-family: 'Cormorant Garamond', serif; }
    .font-jakarta { font-family: 'Plus Jakarta Sans', sans-serif; }
    
    .btn-fur {
        @apply inline-flex items-center justify-center bg-[#2D302A] text-white font-jakarta text-[13px] uppercase tracking-widest font-semibold py-4 px-8 hover:bg-[#8E6E53] transition-colors duration-300;
    }
    
    .btn-fur-outline {
        @apply inline-flex items-center justify-center border border-[#2D302A] text-[#2D302A] font-jakarta text-[13px] uppercase tracking-widest font-semibold py-4 px-8 hover:bg-[#2D302A] hover:text-white transition-colors duration-300;
    }
    
    .nav-link {
        @apply text-[#2D302A] hover:text-[#8E6E53] font-jakarta text-[13px] uppercase tracking-widest font-medium transition-colors duration-300 relative;
    }
    
    .nav-link::after {
        content: '';
        @apply absolute -bottom-1.5 left-0 w-0 h-[1px] bg-[#8E6E53] transition-all duration-300;
    }
    
    .nav-link:hover::after, .nav-link.active::after {
        @apply w-full;
    }
    
    .nav-link.active {
        @apply text-[#8E6E53];
    }
}

.product-card {
    @apply relative group overflow-hidden bg-[#F5F2EB];
}

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

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

.product-action {
    @apply absolute bottom-6 left-1/2 -translate-x-1/2 w-[90%] bg-white py-3 px-4 flex justify-center gap-6 opacity-0 translate-y-4 transition-all duration-500 group-hover:opacity-100 group-hover:translate-y-0 shadow-lg;
}

.feature-line {
    @apply relative pl-12;
}

.feature-line::before {
    content: '';
    @apply absolute top-1/2 left-0 w-8 h-[1px] bg-[#8E6E53] -translate-y-1/2;
}