:root {
    --primary-red: #c53771;
    --success-green: #059669;
    --bg-peach: #fffdf5;
}

body {
    font-family: 'Nunito', sans-serif;
    background-color: var(--bg-peach);
}

.font-cormorant {
    font-family: 'Cormorant Garamond', serif;
}

.font-nunito {
    font-family: 'Nunito', sans-serif;
}

#regular-grid-container {
    width: 100%;
}

/* Base Card Styles */
.product-card {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover {
    box-shadow: 0 25px 50px -12px rgba(197, 55, 113, 0.1);
}

/* Card Image Zoom Effect */
.card-image {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.product-card:hover .card-image {
    transform: scale(1.1);
}

/* White Content Overlay Styling */
.hover-overlay {
    transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(100%);
    opacity: 0;
}

.product-card:hover .hover-overlay {
    transform: translateY(0);
    opacity: 1;
}

/* Highlighted Card Specifics */
.highlighted-card-wrapper {
    position: relative;
}

.leaf-decoration {
    position: absolute;
    inset: -60px;
    top: -240px;
    z-index: 0;
    /* Moving to 0 to be safely above background but below card content if needed */
    pointer-events: none;
    background-image: url('../Images/leaf.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.05));
    animation: leafFloat 6s ease-in-out infinite;
    transition: all 0.5s ease;
}

.highlighted-card-wrapper:hover .leaf-decoration {
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .leaf-decoration {
        inset: -30px;
        top: -150px;
        opacity: 0.6;
    }
}

@media (max-width: 640px) {
    .leaf-decoration {
        inset: -10px;
        top: -100px;
        opacity: 0.5;
    }
}

/* Second leaf for more density like in the screenshot */


@keyframes leafFloat {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(10px, -15px) rotate(2deg);
    }

    66% {
        transform: translate(-10px, 10px) rotate(-2deg);
    }
}

.highlighted-card:hover {
    z-index: 10;
    box-shadow: 0 40px 80px -20px rgba(197, 55, 113, 0.25);
}

.highlighted-card .card-image {
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.highlighted-card:hover .card-image {
    transform: scale(1.1);
}

/* Mobile & Tablet Default View for Overlay */
@media (max-width: 1024px) {
    .hover-overlay {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Buy Today Button Animation */
.btn-buy {
    transition: all 0.3s ease;
}

.btn-buy:active {
    transform: scale(0.95);
}

.btn-buy:hover {
    filter: brightness(1.1);
}

/* Nav Buttons */
.nav-btn {
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

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

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

/* Smooth Fade In for Dynamic Updates */
.update-fade-in {
    animation: updateFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes updateFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}