/* CSS scroll-snap karuselli — ei JS-riippuvuuksia */
.my-product-carousel {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 15px;
    padding: 8px 8px 4px;
    margin: -8px -8px 0;
}

.my-product-carousel::-webkit-scrollbar {
    display: none;
}

/* Natiivissa rakenteessa on ylimääräinen välikääre-div (.wp-block-woocommerce-
   product-collection) .my-product-carousel:n ja itse vieritettävän rivin
   (.wc-block-product-template) välissä. Ilman tätä ohitusta molemmat saisivat
   oman scroll-barinsa. Neutraloidaan ulomman elementin vieritys silloin kun
   se sisältää natiivin rakenteen. */
.my-product-carousel:has(.wc-block-product-template) {
    display: block;
    overflow: hidden;
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
}

/* Välikääre-div .my-product-carousel:n ja itse rivin välissä — varmistetaan
   ettei sekään voi kasvaa sisältönsä mukaan säiliötä leveämmäksi. */
.my-product-carousel .wp-block-woocommerce-product-collection {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .my-product-carousel {
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
        padding-bottom: 10px;
    }

    .my-product-carousel::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .my-product-carousel::-webkit-scrollbar-track {
        background: transparent;
    }

    .my-product-carousel::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }
}

.my-product-carousel .carousel-item {
    flex: 0 0 calc(100% / 2.6);
    scroll-snap-align: start;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

@media (min-width: 480px) {
    .my-product-carousel .carousel-item {
        flex-basis: calc(100% / 3.2);
    }
}

@media (min-width: 768px) {
    .my-product-carousel .carousel-item {
        flex-basis: calc(100% / 4.2);
    }
}

@media (min-width: 1024px) {
    .my-product-carousel .carousel-item {
        flex-basis: calc(100% / 5.2);
    }
}

@media (min-width: 1280px) {
    .my-product-carousel .carousel-item {
        flex-basis: calc(100% / 6.2);
    }
}

/* Tuotekortti täyttää carousel-itemin korkeuden */
.my-product-carousel .carousel-item > li.product {
    flex: 1;
    width: 100%;
    margin: 0;
}

/* Natiivi lohkopohjainen kortti (käytössä kun aktiivinen teema on
   cosmetsky-block-theme, ks. cosmetsky_render_native_product_carousel()).
   Tuotannossa (Blocksy) tätä markuppia ei koskaan synny, joten säännöt ovat
   silloin vaikutuksettomia. Tuotekortin oma tyyli tulee kokonaan teeman
   product-card-native.css:stä — täällä muotoillaan vain vaakavieritys. */
.my-product-carousel .wc-block-product-template {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 15px;
    margin: 0;
    padding: 8px 0 12px;
}

.my-product-carousel .wc-block-product-template::-webkit-scrollbar {
    display: none;
}

@media (min-width: 1024px) {
    .my-product-carousel .wc-block-product-template {
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
        padding-bottom: 10px;
    }

    .my-product-carousel .wc-block-product-template::-webkit-scrollbar {
        display: block;
        height: 4px;
    }

    .my-product-carousel .wc-block-product-template::-webkit-scrollbar-track {
        background: transparent;
    }

    .my-product-carousel .wc-block-product-template::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 4px;
    }
}

.my-product-carousel li.wc-block-product {
    flex: 0 0 calc(100% / 2.6);
    scroll-snap-align: start;
    min-width: 0;
}

@media (min-width: 480px) {
    .my-product-carousel li.wc-block-product {
        flex-basis: calc(100% / 3.2);
    }
}

@media (min-width: 768px) {
    .my-product-carousel li.wc-block-product {
        flex-basis: calc(100% / 4.2);
    }
}

@media (min-width: 1024px) {
    .my-product-carousel li.wc-block-product {
        flex-basis: calc(100% / 5.2);
    }
}

@media (min-width: 1280px) {
    .my-product-carousel li.wc-block-product {
        flex-basis: calc(100% / 6.2);
    }
}