body {
    font-family: 'Manrope', sans-serif !important;
}

h1, h2, h3, .font-serif {
    font-family: 'Noto Serif', serif !important;
}

/* animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeUp {
    animation: fadeUp 1s ease forwards;
}

.delay-200 {
    animation-delay: .2s;
}

.delay-500 {
    animation-delay: .5s;
}

.delay-700 {
    animation-delay: .7s;
}

.wishlist-icon {
    color: #555;
    transition: all 0.3s ease;
}

    /* khi đã thích */
    .wishlist-icon.active {
        color: red !important;
    }

    /* hover nhẹ */
    .wishlist-icon:hover {
        transform: scale(1.2);
    }

body {
    font-family: 'Manrope', sans-serif;
    background: #fbf9f4;
    color: #1b1c19;
}

/* màu primary thống nhất */
:root {
    --primary: #1d5b32;
}

/* animation dùng chung */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeUp {
    animation: fadeUp 0.8s ease forwards;
}

/* ensure strike-through <del> is visible and not overridden */
.price-original {
    text-decoration: line-through;
    color: #888;
}

/* input chống lỗi UI cũ đè */
input, textarea {
    background: white;
    color: #1b1c19;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

body {
    font-family: 'Manrope', sans-serif;
}

h1, h2, h3, .serif {
    font-family: 'Noto Serif', serif;
}

/* mobile menu handled via Tailwind utility class 'translate-x-full' and adding/removing it */
/* keep a will-change hint */
#mobile-menu { will-change: transform; }

/* reliable open state: add/remove this class from JS */
#mobile-menu.mobile-open {
    transform: translateX(0) !important;
}

#mobile-menu {
    transition: transform 0.28s ease-in-out;
}

/* badge styles */
.badge-healthy {
    background: #2f5b33; /* solid primary green */
    color: #ffffff;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 20px rgba(31, 56, 32, 0.18);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2);
}
.badge-handmade {
    background: #ffdcbf; /* warm beige */
    color: #5c4129;
    border: 1px solid rgba(92,65,41,0.08);
    box-shadow: 0 8px 20px rgba(92,65,41,0.08);
}
.badge-best {
    background: #f6c84c; /* gold */
    color: #2b1703;
    border: 1px solid rgba(80,60,20,0.08);
    box-shadow: 0 8px 20px rgba(80,60,20,0.12);
}
.badge-default {
    background: rgba(0,0,0,0.75);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}

/* remove backdrop-filter (no image bleed) and ensure strong contrast */
.badge-healthy, .badge-handmade, .badge-best, .badge-default {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* wrapper when multiple badges present to improve contrast */
.badge-wrapper {
    display: inline-flex;
    gap: .5rem;
    padding: .25rem;
    border-radius: .75rem;
    background: rgba(255,255,255,0.6);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}