assets/app.css — small extras layered on top of Tailwind CDN utility classes

body {
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


/* simple skeleton shimmer, used by all "loading" states */

.skeleton {
    background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
    background-size: 400% 100%;
    animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
}


/* thumbnail scroll strip on product details */

.thumb-strip::-webkit-scrollbar {
    width: 4px;
}

.thumb-strip::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}


/* product card image fit */

.product-card img {
    transition: transform .25s ease;
}

.product-card:hover img {
    transform: scale(1.04);
}