/**
 * Mobile Carousel Logic
 * Trigger: .is-style-vortex-mobile-carousel
 * 
 * Strategy:
 * 1. Desktop: Do nothing (inherit default Grid).
 * 2. Mobile: Convert the UL to a flex container with overflow-x.
 */

/* Only apply on Mobile/Tablet (below 782px) */
@media screen and (max-width: 782px) {

    /* 1. Target the Product Template List inside the Collection */
    .wp-block-woocommerce-product-collection.is-style-vortex-mobile-carousel .wc-block-product-template {
        display: flex !important;
        flex-wrap: nowrap !important;

        /* Scroll Mechanics */
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;

        /* Spacing */
        gap: 16px;
        padding-bottom: 24px;
        /* Space for scrollbar or touch area */
        margin-bottom: 0;

        /* Hide Scrollbar (Optional - Cleaner Look) */
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE/Edge */
    }

    /* Hide Scrollbar for Chrome/Safari */
    .wp-block-woocommerce-product-collection.is-style-vortex-mobile-carousel .wc-block-product-template::-webkit-scrollbar {
        display: none;
    }

    /* 2. Target the Individual Product Items (LI) */
    .wp-block-woocommerce-product-collection.is-style-vortex-mobile-carousel .wc-block-product-template li.wc-block-product {
        /* 
         * Width Logic:
         * 85vw means the user sees 85% of the current card 
         * and 15% of the next card. This is a crucial UX hint 
         * that tells the user "Hey, there's more content here ->"
         */
        flex: 0 0 37vw !important;
        max-width: 320px !important;
        /* Cap width on larger phones */
        width: 37vw !important;



        /* Reset Margins */
        margin: 0 !important;
    }

    /* 3. First Item Spacing Fix */
    /* Ensures the first item isn't glued to the left edge */
    .wp-block-woocommerce-product-collection.is-style-vortex-mobile-carousel .wc-block-product-template li.wc-block-product:first-child {
        margin-left: 0;
        scroll-margin-left: 16px;
    }
}