/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 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-big-image {

    --rt-col-flex-width: 50%;
    --rt-col-width: 450px;

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

    .ut2-pb__right-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: fit-content;
        gap: var(--gap-s);
        z-index: 1;
        order: 2;

        > div {
            width: 100%;
            margin: 0;
        }
    }
    .ut2-pb__right {
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);

        > div {
            margin-bottom: 0;
        }
    }

    .ut2-pb__img-wrapper {
        order: 1;
    }

    .ut2-pb__button {
        @media (min-width: 768px) {
            text-align: center;
            border-top: 1px solid @base;
            padding-top: var(--gap-sm);
            margin-top:  var(--gap-s);
        }
    }

    .ut2-pb__tabs-wrapper  {
        display: flex;
        flex-flow: column;
        gap: var(--gap-s);
    }
    ul.ty-popup-tabs {
        border-top: 1px solid @base;
        text-align: center;
        padding-top: var(--gap-sm);
        margin-top: var(--gap-sm);

        .ty-popup-tabs__item a, .ty-icon {
            text-decoration-color: fade(@font, 50%);
        }
    }

    div.ut2-pb__rating {
        padding-right: 0;
        padding-bottom: var(--gap-sm);
    }

    .ty-discussion {
        &__rating-wrapper {
            justify-content: center;

            .ty-stars i, .no-rating i {
                position: relative;
                top: -2px;
            }

            @media (max-width: 992px) {
                display: block;
                .ty-stars {
                    width: 100%;
                }
            }
        }
    }
}

.ut2-big-image-flat {

    --rt-col-width: max(15vw, 500px);

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

    .ut2-pb__right-wrapper {
        box-shadow: none;
        background: none;
        padding: 0;
    }

    .ut2-pb__main-content {
        border: 1px solid @base;
        border-radius: var(--border-radius-box);
        padding: var(--gap-xs) 0;

        > div {
            border: 0;
            margin: 0;

            &:before, &:after {
                content: none;
            }

            &.ut2-pb__note,
            &.ut2-pb__price-wrap,
            &.ut2-pb__button:not(:last-of-type) {
                border-bottom: 1px solid @base;
                margin-bottom: -1px;
            }
            &.ut2-pb__button {
                border-top: 1px solid @base;
            }
            &:not(.ut2-pb__options) {
                padding: var(--gap-sm) var(--gap-s);
            }
            &.ut2-pb__advanced-options:not(:has(> * > *)) {
                padding: 0;
            }
        }
        > div:not(.ut2-pb__options):not(.ut2-pb__short-features) {
            border-radius: 0;
            margin-top: 0;

            &:first-of-type {
                padding-top: var(--gap-sm);
            }
            &:last-of-type {
                padding: var(--gap-sm);
            }
        }
        .stock-wrap {
            padding-top: 0;
        }
        .ty-product-options .ty-control-group {
            padding: var(--gap-xs) var(--gap-s) 0;

            &:not(:last-of-type) {
                margin-bottom: 0;
            }
        }
        .ty-product-block__button ~ div {
            &:not(:last-of-type) {
                padding-bottom: 0;
            }
        }
    }
    .ty-features-list {
        margin: 0;
    }

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

        h1 {
            font-family: @body_font;
        }
    }
    .ut2-pb__product-brand-name {
        a {
            color: var(--color-font-lighten);
            font-size: var(--font-size-medium);
        }
    }

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

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

    ul.ty-popup-tabs {
        text-align: left;
        border: 0;
        padding: 0 0 0 var(--gap-sm);
        margin: 0;

        .ty-popup-tabs__item {
            padding-top: 0;
        }
    }

    @media (max-width: 900px) {
        .ut2-pb__wrapper > form {
            flex-direction: column;
        }
        .ut2-pb__img-wrapper, &__right {
            position: inherit;
            width: 100%;
            flex: 1 100%;
        }
        .ut2-pb__img-wrapper {
            padding-top: var(--gap-xxs);

            .ut2-add-to-wish {
                font-size: 0;
                position: absolute;
                right: 0;
                z-index: 1;

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

.ut2-big-image-gallery {

    .ut2-pb__img-wrapper, .ut2-pb__wrapper {
        position: relative;
        height: auto;
        top: 0;
        bottom: 0;
    }

    .ut2-pb__img-wrapper {
        top: 0 !important;
        position: initial !important;
        margin-bottom: var(--gap-s);
        order: 0;
    }

    &.--single {
        .ut2-pb__as-gallery .ty-product-img {
            width: 100% !important;

            .owl-item, .owl-wrapper {
                width: 100% !important;
            }
        }
    }

    .ty-product-img {
        height: unset !important;
    }

    .ut2-pb__right-wrapper {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        height: fit-content;
        gap: var(--gap-s);
        z-index: 1;
    }

    .ut2-pb__right-second {
        display: flex;
        flex-direction: column;
        gap: var(--gap-s);

        > div {
            margin-bottom: 0;
        }
    }
}
