/* ===================================================================
   Premium marketplace styling, layered on the Tailwind Play CDN.
   Only the bits Tailwind utilities can't express cleanly live here.
   =================================================================== */

/* Multi-line truncation for card titles */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product image hover zoom */
.mkt-zoom {
    transition: transform .45s cubic-bezier(.2, .8, .2, 1);
}
.mkt-card:hover .mkt-zoom {
    transform: scale(1.06);
}
.mkt-card {
    transition: transform .2s ease, box-shadow .2s ease;
}
.mkt-card:hover {
    transform: translateY(-3px);
}

/* Horizontal rails: hide the scrollbar but keep touch/scroll */
.mkt-rail {
    scrollbar-width: none;
    scroll-snap-type: x proximity;
}
.mkt-rail::-webkit-scrollbar { display: none; }
.mkt-rail > * { scroll-snap-align: start; }

/* Skeleton shimmer */
.mkt-skeleton {
    background: linear-gradient(100deg, #eef1f5 30%, #f7f9fb 50%, #eef1f5 70%);
    background-size: 200% 100%;
    animation: mkt-shimmer 1.3s ease-in-out infinite;
}
@keyframes mkt-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Hero slider */
.mkt-hero { position: relative; }
.mkt-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .6s ease;
    pointer-events: none;
}
.mkt-hero-slide.is-active {
    position: relative;
    opacity: 1;
    pointer-events: auto;
}
.mkt-hero-dot.is-active { background: #fff; width: 1.4rem; }
.mkt-hero-dot { transition: width .3s ease, background .3s ease; }

/* Wishlisted heart */
.js-wishlist-btn.is-wished i::before { content: "\F415"; } /* bi-heart-fill */
.js-wishlist-btn.is-wished { color: #f97316; }

/* Toast auto-fade */
.js-toast { animation: mkt-toast-in .3s ease; }
@keyframes mkt-toast-in {
    from { opacity: 0; transform: translate(-50%, -8px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .mkt-zoom, .mkt-card, .mkt-hero-slide, .mkt-skeleton { transition: none; animation: none; }
}