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

html { scroll-behavior: smooth; }

@layer utilities {
    .bg-boutique-pink { background-color: #FFF0F5; }
    .bg-boutique-rose { background-color: #B76E79; }
    .text-boutique-rose { color: #B76E79; }
    .text-boutique-dark { color: #2C2C2C; }
    .border-boutique-rose { border-color: #B76E79; }
    
    .btn-boutique {
        @apply bg-[#B76E79] hover:bg-[#9f5c66] text-white font-sans uppercase tracking-[0.15em] text-xs py-4 px-10 transition-colors duration-300 rounded-sm shadow-md hover:shadow-lg;
    }
    .btn-boutique-outline {
        @apply border border-[#B76E79] text-[#B76E79] hover:bg-[#B76E79] hover:text-white font-sans uppercase tracking-[0.15em] text-xs py-4 px-10 transition-colors duration-300 rounded-sm;
    }
    
    .product-card {
        @apply bg-white rounded-lg p-4 shadow-[0_4px_20px_rgb(0,0,0,0.03)] border border-pink-50 hover:shadow-[0_8px_30px_rgb(0,0,0,0.08)] transition-all duration-300 group;
    }
    
    .product-img-wrapper {
        @apply relative overflow-hidden rounded-md aspect-[4/5] mb-4 bg-gray-50;
    }
    .product-img-wrapper img {
        @apply w-full h-full object-cover transition-transform duration-700 group-hover:scale-105;
    }
    
    .badge-new {
        @apply absolute top-3 left-3 bg-[#B76E79] text-white text-[10px] uppercase tracking-wider px-3 py-1 rounded-full z-10;
    }
}