:root {
    scroll-behavior: smooth;
}

.product-card {
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px -24px rgba(255, 255, 255, .18);
}

#cart-drawer:not(.hidden) .panel {
    transform: translateX(0);
}

#toast.show {
    animation: fadeInOut 2.8s ease both;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(8px)
    }

    10% {
        opacity: 1;
        transform: translateY(0)
    }

    90% {
        opacity: 1
    }

    100% {
        opacity: 0;
        transform: translateY(8px)
    }
}

* {
    scrollbar-width: thin;
    scrollbar-color: #475569 #0a0a0a;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: #0a0a0a;
}

*::-webkit-scrollbar-thumb {
    background: #475569;
    border-radius: 6px;
}

/* Accent color overrides: convert Tailwind hex utilities #5b9cff to green */
.text-\[\#5b9cff\] { color: #ffffff !important; }
.bg-\[\#5b9cff\] { background-color: #ffffff !important; color: #000 !important; }
.border-\[\#5b9cff\] { border-color: #ffffff !important; }
.ring-\[\#5b9cff\] { --tw-ring-color: #ffffff !important; }
.bg-\[\#5b9cff\]\/20 { background-color: rgba(255, 255, 255, .2) !important; }
.text-\[\#5b9cff\]\/20 { color: rgba(255, 255, 255, .2) !important; }
.hover\:border-\[\#5b9cff\]\/50:hover { border-color: rgba(255, 255, 255, .5) !important; }
.hover\:text-\[\#5b9cff\]:hover { color: #ffffff !important; }
.hover\:bg-\[\#5b9cff\]:hover { background-color: #ffffff !important; color: #000 !important; }
/* Focus ring override */
.focus\:ring-\[\#5b9cff\]\/40:focus { --tw-ring-color: rgba(255,255,255,.4) !important; }