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

.ut2-simple-list {

    form {
        > bdi {
            display: inline-block;
            text-align: center;
        }
    }

    .product-title {
        line-height: normal;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        padding: 0;
        color: @font;
        word-wrap: break-word;
        white-space: inherit;

        .ut2_line_clamp(var(--sl-lines-in-name-product));

        .ut2-gl-title-color() when (iscolor(@grid_list_title_color)) {
            color: @grid_list_title_color;
        }
        .ut2-gl-title-color();

        .ut2_grid_use_elements_alignment() when (@abt__ut2_product_list_use_elements_alignment = use) {
            min-height: calc(var(--sl-lines-in-name-product) * @body_font_size);
        }
        .ut2_grid_use_elements_alignment();
    }

    &__wrap {
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        line-height: 1;
        gap: var(--gap-xxs);

        ~ .ut2-simple-list__control {
            margin-top: var(--gap-xs);
        }

        // Price
        >   .ut2-simple-list__price {
            height: var(--height-button);

            &:has([id*="clean_price_update"]) {
                height: calc(var(--height-button) + var(--font-size-small));
            }

            &[class*="price"][class*="pr-"] {
                display: flex;
                flex-flow: column;
                align-items: center;
                justify-content: center;

                > div {
                    &:first-child {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        flex-wrap: wrap;
                        column-gap: var(--gap-xxs);
                    }
                }
                .ty-strike bdi > span {
                    position: relative;
                    top: -2px;
                }
                .ty-price-update ~ span {
                    justify-content: center;
                }
            }
        }

        // Buttons
        + .ut2-simple-list__control {
            display: flex;
            flex-direction: row-reverse;
            justify-content: center;
            align-items: flex-end;
            width: 100%;
            height: var(--min-height-button);
            gap: var(--gap-xs);

            &[class*="text"] {
                margin: var(--gap-xxs) 0 var(--gap-xs);
            }

            .ty-qty .ty-value-changer, .quantity .ty-value-changer {
                max-height: var(--min-height-button);
            }
        }

        &.price-top-position {
            .ut2-simple-list__mix-price-and-button {
                order: 1;
                margin-top: var(--gap-xs);
            }
            ~ .ut2-simple-list__control.ut2-view-qty {
                margin-top: var(--gap-xs);
            }
            //&:has(.ut2-simple-list__mix-price-and-button) .product-title {
            //    min-height: initial;
            //}
            .product-title {
                order: 2;
            }
            .ut2-gl__rating {
                order: 3;
            }
            [id*="product_amount"] {
                order: 4;
            }
        }
    }

    // Rating
    .ut2-rating-stars {
        justify-content: center;

        > span {
            margin-right: 0;
        }
    }

    // Amount
    .stock-wrap .ty-control-group {
        margin-bottom: 0;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    // Mix Price and buttons
    .ut2-simple-list__mix-price-and-button {
        display: flex;
        justify-content: center;
        align-items: center;
        width: fit-content;
        padding-bottom: var(--gap-xs);
        gap: var(--gap-xs);

        .ut2-simple-list__price {
            &.pr-row, &.pr-row-mix {
                flex: auto;
                flex-flow: column;
                justify-content: center;

                > * {
                    justify-content: center;
                    align-items: center;
                }
            }
        }
        .ut2-simple-list__control {
            position: relative;
            flex: 0 0 auto;
            margin: 0;
            gap: var(--gap-xs);

            @media (hover: hover) {
                &:hover .ty-qty {
                    visibility: visible;
                    opacity: 1;
                    right: -5px;
                }
            }
            @media (hover: none) and (pointer: coarse) {
                display: flex;
                flex-direction: row-reverse;

                .ty-qty {
                    > div {
                        background: var(--fill-gray);
                    }
                }
            }
        }
    }

    // Button
    &__buttons {
        display: flex;
        flex-wrap: nowrap;
        align-items: flex-start;
        justify-content: center;
        height: var(--height-button);
        width: 100%;
        gap: var(--gap-xs);

        @media (max-width: 899px) {
            .ty-btn {
                padding: 0;

                bdi {
                    display: none;
                }
            }
        }
    }
}
