/* CurioFinds / EmilClearChoice - Modern Custom Styles & Animations */

/* Smooth scrolling & High-Readability Base Typography */
html {
    scroll-behavior: smooth;
    font-size: 16.5px;
    letter-spacing: -0.012em;
}

@media (max-width: 640px) {
    html {
        font-size: 15.5px;
    }
}

body {
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Mobile Header & Brand Protection */
@media (max-width: 440px) {
    .site-brand-text {
        font-size: 1.15rem !important;
        letter-spacing: -0.025em;
    }
}

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.dark .glass {
    background: rgba(15, 23, 42, 0.88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
    background: #334155;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}
.dark ::-webkit-scrollbar-thumb:hover {
    background: #475569;
}

/* Hide scrollbar for clean category pill slider */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Image Uniform Aspect Ratio Container */
.aspect-uniform {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #f8fafc;
}
.dark .aspect-uniform {
    background-color: #0f172a;
}
.aspect-uniform img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}
.product-card:hover .aspect-uniform img {
    transform: scale(1.06);
}

/* Line clamp fallbacks */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Wishlist heart active state */
.heart-active svg {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* Upvote active state */
.upvoted {
    background-color: #fff7ed !important;
    color: #ea580c !important;
    border-color: #fdba74 !important;
}
.dark .upvoted {
    background-color: rgba(234, 88, 12, 0.15) !important;
    color: #fb923c !important;
    border-color: rgba(251, 146, 60, 0.4) !important;
}

/* Toast Notification animations */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
.toast-enter {
    animation: slideDown 0.3s ease forwards;
}
.toast-exit {
    animation: fadeOut 0.3s ease forwards;
}