/* =====================================================
   HiGi Fashion House
   AUTOMATIC HORIZONTAL SHOP SCROLL (CORRECTED)
===================================================== */

.shop-carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Product container */
.shop-scroll-container {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 24px;

    /* FIX: Changed from max-content to 100% so clientWidth/scrollWidth calculate correctly */
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    padding: 20px 5px 30px;

    /* Smooth manual scrolling */
    scroll-behavior: smooth;

    /* Hide scrollbar */
    scrollbar-width: none;

    /* FIX: Allow both horizontal scrolling and normal page vertical gestures */
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;

    cursor: grab;
}

/* Chrome / Edge / Safari */
.shop-scroll-container::-webkit-scrollbar {
    display: none;
}

/* When user is dragging */
.shop-scroll-container.is-dragging {
    cursor: grabbing;
    scroll-behavior: auto;
}

/* Important:
   Prevent products from shrinking */
.shop-scroll-container > * {
    flex: 0 0 auto;
}


/* =====================================================
   PRODUCT CARD
===================================================== */

.shop-scroll-container .product-card {
    flex: 0 0 280px;
    width: 280px;
}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 1000px) {

    .shop-scroll-container .product-card {
        flex-basis: 300px;
        width: 300px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 999px) {

    .shop-scroll-container .product-card {
        flex-basis: 260px;
        width: 260px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .shop-carousel {
        width: 100%;
    }

    .shop-scroll-container {
        gap: 16px;
        padding-left: 15px;
        padding-right: 15px;
    }

    .shop-scroll-container .product-card {
        flex-basis: 230px;
        width: 230px;
    }

}