/* ==========================================================================
   TikTok card look & motion for product slider sections
   (section_products + custom_product). Mirrors .tiktok-video-card in
   tiktok-product-videos.css: shadow, hover lift, CTA hover + press.
   Card dimensions are intentionally untouched. Arrows are left as-is.
   ========================================================================== */

/* Room for the hover lift + shadow so slick-list doesn't clip them (vertical only) */
.product-home.tiktok-style .slick-list {
    padding-top: 8px !important;
    padding-bottom: 20px !important;
}

/* ─── Card ─────────────────────────────────────────────── */
.product-home.tiktok-style .item {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(0,0,0,.10);
    transition: transform .2s, box-shadow .2s;
}

.product-home.tiktok-style .item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,.14);
}

.product-home.tiktok-style .item .product {
    border: 0;
}

/* ─── Title (2-line clamp like the TikTok card) ───────── */
.product-home.tiktok-style .product .product-card-title {
    font-weight: 700;
    line-height: 1.35;
    color: #1a1a1a;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

/* ─── Price ────────────────────────────────────────────── */
.product-home.tiktok-style .product .text-gray-1 del {
    color: #aaa;
}

/* ─── Add to cart button ───────────────────────────────── */
.product-home.tiktok-style .product .btn-cart {
    border-radius: 10px !important;
    font-weight: 600;
    transition: background .2s, border-color .2s, transform .15s;
}

.product-home.tiktok-style .product .btn-cart:not(.btn-out-of-stock):hover {
    background: #333 !important;
    border-color: #333 !important;
    color: #fff !important;
}

.product-home.tiktok-style .product .btn-cart:not(.btn-out-of-stock):hover svg path {
    fill: #fff !important;
    stroke: #fff !important;
}

.product-home.tiktok-style .product .btn-cart:active {
    transform: scale(.97);
}

@media (prefers-reduced-motion: reduce) {
    .product-home.tiktok-style .item,
    .product-home.tiktok-style .product .btn-cart { transition: none; }
    .product-home.tiktok-style .item:hover { transform: none; }
}