/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 2025   *
* / /_\ | | _____  _| |_/ /_ __ __ _ _ __   __| |_ _ __   __ _   | |_ ___  __ _ _ __ ___   *
* |  _  | |/ _ \ \/ / ___ \ '__/ _` | '_ \ / _` | | '_ \ / _` |  | __/ _ \/ _` | '_ ` _ \  *
* | | | | |  __/>  <| |_/ / | | (_| | | | | (_| | | | | | (_| |  | ||  __/ (_| | | | | | | *
* \_| |_/_|\___/_/\_\____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |  \___\___|\__,_|_| |_| |_| *
*                                                         __/ |                            *
*                                                        |___/                             *
* ---------------------------------------------------------------------------------------- *
* This is commercial software, only users who have purchased a valid license and accept    *
* to the terms of the License Agreement can install and use this program.                  *
* ---------------------------------------------------------------------------------------- *
* website: https://cs-cart.alexbranding.com                                                *
*   email: info@alexbranding.com                                                           *
*******************************************************************************************/

.ut2-cascade-gallery {
    --rt-col-width: 450px;

    @media (max-width: 1400px) {
        --rt-col-width: 400px;
    }
    @media (max-width: 768px) {
        --rt-col-width: 50%;
    }

    .ut2-pb__right-wrapper {
        @media (min-width: 900px) {
            width: var(--rt-col-width);
        }
    }

    .ut2-pb__img-wrapper {
        .ty-previewer {
            display: flex;
        }
        .ty-product-img > * {
            opacity: 1;
        }
    }

    .ut2-pb__short-descr {
        margin-top: var(--gap-sm)
    }
    .ut2-pb__img {
        padding: 0;
        background: unset;
        border-radius: unset;
    }

    .ut2-pb__wrapper {

        &:not(.ut2-pb__single-image) {

            --pd-image-gallery-height-size: calc(~'var(--pd-image-gallery-height) * 1px');
            --pd-image-gallery-width-size: calc(~'var(--pd-image-gallery-width) * 1px');
            --pd-image-gallery-width-duble: calc(~'(var(--pd-image-gallery-width) * 2) * 1px');

            @media (min-width: 769px) {
                grid-template-columns: minmax(calc(~'100% -'(var(--pd-image-gallery-width-duble) - var(--gap-l))),1fr) var(--rt-col-width);
                grid-gap: var(--gap-l);
            }

            .ty-product-img {
                display: grid;
                gap: var(--gap-xs);
                max-height: fit-content;
                width: 100%;
                margin: 0;

                > div {
                    display: flex;
                    position: relative;
                }

                @media (max-width: 767px) {
                    display: flex;
                    min-width: 100%;
                    padding-bottom: var(--gap);
                    position: relative;
                    overflow-y: hidden;
                    overflow-x: auto;
                    scroll-snap-type: x mandatory;
                    -webkit-overflow-scrolling: touch;
                    scrollbar-width: none;

                    &::-webkit-scrollbar {
                        height: 5px;
                    }

                    .ty-previewer {
                        scroll-snap-align: start;
                        scroll-snap-stop: always;
                        min-width: 80vw;
                    }
                }
                @media (min-width: 577px) {
                    > * {
                        aspect-ratio: var(--pd-image-gallery-width) / var(--pd-image-gallery-height);

                        img.ty-pict, iframe, video {
                            height: 100%;
                            width: 100%;
                        }
                    }
                }
            }

            &.formation-1 {
                .ty-product-img {
                    @media (min-width: 1025px) {
                        grid-template-columns: repeat(6, 1fr);

                        > * {
                            grid-column: span 3;
                        }

                        > *:nth-child(6) ~ * {
                            grid-column: span 2;
                        }
                    }
                }
            }
            &.formation-2 {
                .ty-product-img {
                    @media (min-width: 1025px) {
                        grid-template-columns: repeat(6, 1fr);

                        > * {
                            grid-column: span 3;
                        }

                        > *:nth-child(4) ~ * {
                            grid-column: span 2;
                        }
                    }
                }
            }
            &.formation-3 {
                .ty-product-img {
                    @media (min-width: 1025px) {
                        grid-template-columns: repeat(6, 1fr);

                        > * {
                            grid-column: span 3;
                        }
                    }
                }
            }
        }
    }

    .ut2-pb__title {
        align-items: flex-start;
        flex-direction: column;
        margin-top: var(--gap-sm);
        margin-bottom: var(--gap-l);

        h1 {
            font-family: @body_font;
        }
    }

    .ut2-pb__product-brand-name {
        /*span > span {
            display: none;
        }*/
        a {
            color: var(--color-font-lighten);
            font-size: var(--font-size-medium);
        }
    }

    .ut2-pb__reviews > * {
        flex: 1 0 auto;
    }
    .ty-product-review-reviews-stars--large,
    .ty-product-review-reviews-stars--large.ut2-show-rating-num {
        font-size: var(--font-size-large);
    }

    .ut2-pb__price-wrap {
        position: relative;
        flex: 1 0 auto;
    }

    .ut2-pb__button {
        margin-top: var(--gap-s);

        > [id*="add_to_cart"] {
            justify-content: flex-start;
        }

        .ut2-qty__wrap + div .ty-btn,
        .ut2-qty__wrap + div > div .ty-btn {
            min-width: 200px;
        }
    }

    ul.ty-popup-tabs {
        text-align: left;
    }

    @media (max-width: 899px) {
        .ut2-pb__wrapper > form {
            flex-direction: column;
        }
        .ut2-pb__img-wrapper, &__right {
            position: inherit;
            width: 100%;
            flex: 1 100%;
        }
        .ut2-pb__img-wrapper {
            .ut2-add-to-wish {
                font-size: 0;
                position: absolute;
                right: 0;
                z-index: 1;

                i {
                    font-size: 32px;
                    position: relative;
                    top: -4px;
                    right: -3px;
                }
            }
        }
    }
}
