/* ==========================================================================
   CAROUSEL SẢN PHẨM BỘ SƯU TẬP (SLIDE LAYOUT & ANIMATIONS)
   ========================================================================== */
.cafe-carousel-outer {
    position: relative;
    width: 100%;
    overflow: hidden !important; /* Cắt và che giấu hoàn toàn các viền của sản phẩm tiếp theo đang nằm ẩn bên phải */
}

.cafe-product-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    /* Buộc các card sản phẩm co giãn bằng nhau */
    gap: 30px !important;
    overflow-x: auto !important; /* Vẫn giữ cuộn ngang để kéo thả sản phẩm */
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    scrollbar-width: none !important;
    /* Firefox */
    -ms-overflow-style: none !important;
    /* IE */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important; /* Xóa hoàn toàn padding để căn thẳng cột dọc tuyệt đối */
}

/* Triệt tiêu hoàn toàn các pseudo-element tự sinh của WooCommerce/Astra tránh làm bẻ gãy flex-nowrap */
.cafe-product-carousel::before,
.cafe-product-carousel::after {
    display: none !important;
    content: none !important;
}

.cafe-product-carousel::-webkit-scrollbar {
    display: none !important;
    /* Chrome/Safari */
}

/* Định dạng card sản phẩm trong carousel */
.cafe-product-carousel li.product.product-card {
    flex: 0 0 calc((100% - 60px) / 3) !important;
    /* 2 khoảng gap 30px = 60px */
    width: calc((100% - 60px) / 3) !important;
    min-width: calc((100% - 60px) / 3) !important;
    max-width: calc((100% - 60px) / 3) !important;
    /* Luôn hiển thị đúng 3 sản phẩm trên desktop */
    height: auto !important;
    /* Để co giãn tự nhiên theo chiều cao lớn nhất của hàng */
    scroll-snap-align: start !important;
    box-sizing: border-box !important;
    margin-top: 15px !important;   /* Tạo lề trên để khi hover không bị cắt ở đỉnh */
    margin-bottom: 25px !important;/* Tạo lề dưới để không bị cắt bóng đổ */
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;        /* Triệt tiêu float của Astra/WooCommerce */
    clear: none !important;        /* Triệt tiêu clear của Astra/WooCommerce */

    /* Hiệu ứng chuyển động mượt mà cho hover bay lên */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease !important;
}

/* Đảm bảo khi hover vào card, card chỉ bay lên dọc (translateY) và đổ bóng hướng xuống dưới, 
   không dùng scale phóng to để tránh lấn biên trái/phải làm rách layout */
.cafe-product-carousel li.product.product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 24px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04) !important;
    opacity: 1 !important;
}

@media (max-width: 1024px) {
    .cafe-product-carousel {
        gap: 16px !important;
    }

    .cafe-product-carousel li.product.product-card {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        /* 1 khoảng gap 16px */
        width: calc((100% - 16px) / 2) !important;
        min-width: calc((100% - 16px) / 2) !important;
        max-width: calc((100% - 16px) / 2) !important;
        /* 2 sản phẩm trên tablet */
    }
}

@media (max-width: 640px) {
    .cafe-product-carousel li.product.product-card {
        flex: 0 0 100% !important;
        /* 1 sản phẩm trên mobile */
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
}

/* Trạng thái dragging chuột */
.cafe-product-carousel.dragging {
    cursor: grabbing !important;
    cursor: -webkit-grabbing !important;
    user-select: none !important;
    scroll-snap-type: none !important;
    /* Tạm tắt snap khi drag để cuộn mượt */
}

.cafe-product-carousel:not(.dragging) {
    cursor: grab !important;
    cursor: -webkit-grab !important;
}

/* Ngăn trình duyệt kéo rê ảnh/link và bôi đen nội dung khi drag */
.cafe-product-carousel img,
.cafe-product-carousel a {
    user-drag: none !important;
    -webkit-user-drag: none !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
}