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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-fashion-beige { background-color: #F5F5F0; }
    .bg-fashion-dark { background-color: #111111; }
    .text-fashion-dark { color: #111111; }
    .text-fashion-gray { color: #555555; }
    .border-fashion-dark { border-color: #111111; }
    
    .btn-fashion {
        @apply bg-[#111111] hover:bg-[#333333] text-white font-sans uppercase tracking-[0.2em] text-xs py-4 px-10 transition-colors duration-300;
    }
    .btn-fashion-outline {
        @apply border border-[#111111] text-[#111111] hover:bg-[#111111] hover:text-white font-sans uppercase tracking-[0.2em] text-xs py-4 px-10 transition-colors duration-300;
    }
    .btn-fashion-white {
        @apply bg-white hover:bg-gray-100 text-[#111111] font-sans uppercase tracking-[0.2em] text-xs py-4 px-10 transition-colors duration-300;
    }
    
    .product-image-wrapper {
        @apply relative overflow-hidden group;
    }
    .product-image-main {
        @apply w-full h-full object-cover transition-opacity duration-500 group-hover:opacity-0;
    }
    .product-image-hover {
        @apply absolute inset-0 w-full h-full object-cover transition-opacity duration-500 opacity-0 group-hover:opacity-100;
    }
    
    .fashion-underline {
        @apply relative inline-block;
    }
    .fashion-underline::after {
        content: '';
        @apply absolute w-full h-[1px] bg-current bottom-0 left-0 scale-x-0 origin-bottom-right transition-transform duration-300;
    }
    .fashion-underline:hover::after {
        @apply scale-x-100 origin-bottom-left;
    }
}