:root {
    --terem-pink: #FADADD;
    --terem-green: #006400;
    --terem-gold: #D4AF37;
}

/* Base resets & global styles handled partially by Tailwind */
html {
    scroll-behavior: smooth;
}

/* Custom Utilities for Premium Look */
.font-serif {
    font-family: 'Playfair Display', serif !important;
}

.bg-terem-pink {
    background-color: var(--terem-pink);
}

.text-terem-green {
    color: var(--terem-green);
}

.text-terem-gold {
    color: var(--terem-gold);
}

/* Product Image Aspect Ratio Utility */
.aspect-product {
    position: relative;
    padding-bottom: 125%;
    /* 4:5 Aspect Ratio */
}

.aspect-product img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Image Swap Hover Effect */
.product-image-container {
    perspective: 1000px;
}

.product-image-primary,
.product-image-hover {
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Only hide primary if there's a hover image to show */
.has-hover-image:hover .product-image-primary {
    opacity: 0;
}

.has-hover-image:hover .product-image-hover {
    opacity: 1;
    transform: scale(1.05);
}

/* Ensure primary image stays visible if no hover image */
.group:not(.has-hover-image):hover .product-image-primary {
    opacity: 1;
    transform: scale(1.02);
}

/* Custom Scrollbar for Drawer/PDP */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Skeleton Loading Animation */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f7f7f7 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Custom Glassmorphism for Modals/Drawers */
.glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

/* Legacy Overrides */
.main-header,
.top-bar,
.category-nav,
.site-header {
    display: none !important;
    /* Managed by base.html new structure */
}

/* Grid & Layout overrides if any legacy exists */
.container {
    padding-left: 1rem;
    padding-right: 1rem;
}