/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 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                                                           *
*******************************************************************************************/
// Product-list ================================================================================================

@pl_width_min_width_left_col: 240px;
@pl_width_right_col: 280px;
@pl_width_min_col: 800px;

.ty-product-list {
    flex: 1 100%;
    background: @general_bg_color;

    // Margin border
    .ut2_grid_border_base() when not (@abt__ut2_product_list_show_grid_border = none) {
        box-shadow: inset 0 0 0 1px @base, 0 0 0 1px @content_bg;
    }
    .ut2_grid_border_base()  when (@abt__ut2_product_list_show_grid_border = solid_with_margins) {
        margin-bottom: var(--gap-xs);
        padding: var(--gap-sm);
        border-radius: var(--border-radius-box);
    }
    .ut2_grid_border_base()  when (@abt__ut2_product_list_show_grid_border = solid_without_margins) {
        padding: var(--gap-s);

        @media (max-width: 576px) {
            min-width: calc(100% + var(--gap-sm)* 2);
            max-width: 100vw;
            margin: 0 calc(var(--gap-sm)* -1);
            border-width: 1px 0 0 0;
        }
    }
    .ut2_grid_border_base() when (@abt__ut2_product_list_show_grid_border = none) {
        margin-bottom: -1px;
        border-top: solid 1px @base;
        border-bottom: solid 1px @base;
        padding: var(--gap-s) 0;
    }
    .ut2_grid_border_base();

    .duble_col_view() when (@fluidContainerMaxWidth > 1920), (@fluidContainerMaxWidth = auto) {
        @media (min-width: 1921px) {
            flex: 1 50%;
            flex-grow: initial;
            min-width: @pl_width_min_col;
            margin: 0;

            .ut2_grid_border_base() when not (@abt__ut2_product_list_show_grid_border = none) {
                &:first-child, &:nth-child(2) {
                    border-top: 1px solid @base;
                }
                &:nth-child(2n + 1) {
                    border-right: 1px solid @base;
                }
            }
            .ut2_grid_border_base();
        }
    }
    .duble_col_view();

    .ut2-pl {

        &__wrap {
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap-s);
        }

        // Image
        &__image {
            position: relative;
            width: var(--pl-thumbs-width);
            max-height: var(--pl-thumbs-height);
            max-width: min(40%, var(--pl-thumbs-width));

            > a, .cm-item-gallery > a, .ut2-image-reload > a {
                display: flex;
                width: 100%;
                height: 100%;
                clip-path: inset(0 round calc(~'(var(--border-radius-box) * 2) / 3'));

                // Mask
                .ut2_product_image_mask() when not (@general_bg_image = transparent) {
                    background: @general_bg_image;
                }
                .ut2_product_image_mask() when (@abt__ut2_product_list_mask_images_gallery = true) and (@general_bg_color = #ffffff) {
                    background: lighten(@fill-gray-box, 0.5%);

                    img.ty-pict {
                        mix-blend-mode: multiply;
                        filter: brightness(1.05);
                    }
                }
                .ut2_product_image_mask();
            }

            .ty-thumbs-wrapper {
                max-height: var(--pl-thumbs-height);
            }
        }

        // Content
        &__content {
            flex: 1;
            display: flex;
            flex-wrap: wrap;
            gap: var(--gap-s);

            .ty-control-group {
                margin-bottom: 0;
            }
        }
        &__info {
            display: flex;
            flex-flow: column;
            flex: 1 0 @pl_width_min_width_left_col;
            padding-right: var(--gap-s);
            margin-right: -1px;
            border-right: 1px solid @base;
            gap: var(--gap-xs);
        }
        &__control {
            display: inline-flex;
            flex-direction: column;
            width: @pl_width_right_col;
            gap: var(--gap-xs);

            select {
                width: 100%;
            }
            .ty-product-options__item:not(:last-child) {
                margin-bottom: var(--gap-xs);
            }
        }

        // Rating
        &__rating {
            flex-direction: row-reverse;
            justify-content: flex-end;
            align-items: center;
            display: flex;
        }

        // Name
        &__item-name {
            display: flex;
            justify-content: space-between;

            .brand-img {
                margin-left: var(--gap-s);
                min-width: 40px;
                text-align: right;

                flex-shrink: 0;
            }
            a {
                display: flex;
                align-items: center;
                color: @font;
                font-size: var(--font-size-large);
                font-weight: bold;
                vertical-align: middle;

                &:hover {
                    color: @links;
                }
            }
        }

        // Extra block
        &__extra-block {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            line-height: 1;
            column-gap: var(--gap-xs);

            .ty-sku-item {
                &.ty-control-group, .ut2--sku-text {
                    font-size: calc(~'var(--font-size-normal) - 1px');
                }
            }
        }

        // Description
        &__description {
            line-height: 1.4;

            @media (max-width: 1023px) {
                font-size: var(--font-size-small);
            }
        }

        // Qty
        &__qty-wrap {
            display: flex;
            flex-wrap: wrap;
            column-gap: var(--gap-xs);
            row-gap: var(--gap-xxs);

            /*@media (min-width: 900px) {
                justify-content: space-between;

                > [id*="add_to_cart"] {
                    flex: 1 0 auto;
                }
            }*/

            .ty-qty,
            .quantity {
                margin: initial;

                .ty-value-changer,
                .ty-value-changer__input,
                .ty-value-changer a[class*="changer"] {
                    height: var(--min-height-button);
                }
            }
            .ty-control-group__label {
                display: none;
            }
            .ty-min-qty-description {
                padding: initial;
                order: 1;
                flex-basis: 100%;

                /*+ div {
                    margin-top: var(--gap-xs);
                    width: 100%;
                }*/
            }
        }

        // Responsive
        @media (max-width: 1100px) {
            &__info {
                padding-right: 0;
                border-right: 0;
                width: 100%;
            }
            &__control {
                min-width: 100%;
                padding-right: 0;
            }
        }
        @media (max-width: 576px) {
            &__content {
                width: 100%;
            }
            &__image {
                margin-right: 0;
                min-width: 100%;
                text-align: center;
            }
        }
    }
}