/* Custom Utilities */
body {
    font-family: 'Inter', sans-serif;
    color: #666666;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', sans-serif;
    color: #232323;
}

.nav-link {
    position: relative;
    transition: all 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #d61319;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

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

.product-actions {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.hover-primary:hover {
    background-color: #a30001;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Slow bounce keyframes */
@keyframes bounce-slow {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.animate-bounce-slow {
    animation: bounce-slow 3s ease-in-out infinite;
}

/* Dynamic Language-Scoped Fonts Override */
html[lang="en"] body {
    font-family: 'Inter', sans-serif;
}
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3, html[lang="en"] h4, html[lang="en"] h5, html[lang="en"] h6 {
    font-family: 'Poppins', sans-serif;
}
html[lang="en"] .font-poppins {
    font-family: 'Poppins', sans-serif !important;
}
html[lang="en"] .font-inter {
    font-family: 'Inter', sans-serif !important;
}

html[lang="kh"] body {
    font-family: 'Battambang', 'Khmer OS Battambang', 'Inter', sans-serif;
}
html[lang="kh"] h1, html[lang="kh"] h2, html[lang="kh"] h3, html[lang="kh"] h4, html[lang="kh"] h5, html[lang="kh"] h6 {
    font-family: 'Battambang', 'Khmer OS Battambang', 'Poppins', sans-serif;
}
html[lang="kh"] .font-poppins {
    font-family: 'Battambang', 'Khmer OS Battambang', 'Poppins', sans-serif !important;
}
html[lang="kh"] .font-inter {
    font-family: 'Battambang', 'Khmer OS Battambang', 'Inter', sans-serif !important;
}

/* Ensure all images are responsive on mobile devices */
img {
    max-width: 100%;
    height: auto;
}