/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 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                                                           *
*******************************************************************************************/
// Small items
:root {
    --smallitems-item-min-width: 295px;
}

.ut2-template-small {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(var(--smallitems-item-min-width), calc((100% / var(--si-columns, 3)) - var(--gap))), 1fr));
    width: 100%;

    .ut2_grid_border_base() when (@abt__ut2_product_list_show_grid_border = none) {
        grid-gap: var(--gap);
    }
    .ut2_grid_border_base() when (@abt__ut2_product_list_show_grid_border = solid_with_margins) {
        @media (min-width: 577px) {
            grid-gap: var(--gap);
        }
        @media (max-width: 576px) {
            grid-gap: var(--gap-xs);
        }
    }
    .ut2_grid_border_base();

    // Counter
    span.ut2-hit {
        position: absolute;
        padding: 0;
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 11px;
        font-weight: 500;
        color: @font;
        background: white;
        background-clip: content-box;
        border-radius: 100%;
        box-shadow: 0 1px 3px rgba(0,0,0,0.3);

        .ut2_grid_border_base() when (@abt__ut2_product_list_show_grid_border = none) {
            left: auto;
            right: 0;
            top: 0;
        }
        .ut2_grid_border_base() when (@abt__ut2_product_list_show_grid_border = solid_with_margins) {
            left: auto;
            right: 10px;
            top: 10px;
        }
        .ut2_grid_border_base() when (@abt__ut2_product_list_show_grid_border = solid_without_margins) {
            left: auto;
            right: 10px;
            top: 10px;
        }
        .ut2_grid_border_base();

        & > span {
            display: none;
        }
        & + .ut2-template-small__item-description > .product-title {
            padding-right: var(--gap-s);
        }
    }

    &__item {
        display: flex;
        justify-content: space-between;
        position: relative;
        padding: 0;
        gap: var(--gap-sm);
        background: @general_bg_color;
        //overflow: hidden;

        .contrast_background();

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

        .ut2_grid_border() when not (@abt__ut2_product_list_show_grid_border = none) {
            padding: var(--gap-sm);

            @media (max-width: 1023px) {
                padding: var(--gap-xs);
            }

            box-shadow: inset 0 0 0 1px @base;

            .extend_grid_item_on_hover() when not (@abt__ut2_product_list_extend_grid_item_on_hover = true) {
                transition: box-shadow .2s linear;
            }
            .extend_grid_item_on_hover();

            &:hover {
                box-shadow: inset 0 0 0 1px @base5;
            }
        }
        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = none) {
            @media (max-width: 577px) {
                margin-bottom: var(--gap);
            }
        }
        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = solid_without_margins) {
            box-shadow: inset 0 0 0 1px @base, 0 0 0 1px @general_bg_color;
            border-radius: 0;

            &:hover {
                z-index: 1;
                box-shadow: inset 0 0 0 1px @base5, 0 0 0 1px @general_bg_color;
            }

            @media (max-width: 577px) {
                margin-bottom: -1px;
            }
        }
        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = solid_with_margins) {
            border-radius: var(--border-radius-box);

            @media (max-width: 577px) {
                margin-bottom: -1px;
            }
        }
        .ut2_grid_border();

        > form {
            display: flex;
            height: 100%;
            width: 100%;
            gap: var(--gap-sm);

            @media (max-width: 1023px) {
                gap: var(--gap-xs);
            }
        }

        &.clearfix {
            list-style-type: none;
        }
    }

    // Image
    &__item-img {
        flex: 0 auto;
        aspect-ratio: var(--si-product-image-size,50) / var(--si-product-image-size,50);
        max-height: 100%;
        position: relative;

        > a {
            display: inline-block;
            overflow: hidden;

            // 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) {
                .ut2_round() when (@abt__ut2_general_use_rounding = little) {
                    border-radius: calc(var(--border-radius-box) - 2px);
                }
                .ut2_round() when (@abt__ut2_general_use_rounding = full) {
                    border-radius: calc(var(--border-radius-box) - 6px);
                }
                .ut2_round();
            }
            .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();
        }
    }

    // description
    &__item-description {
        display: flex;
        flex-flow: column;
        height: 100%;
        flex: 1;
        gap: var(--gap-xxs);
        align-items: flex-start;
        align-content: flex-start;

        // Buttons
        > .ut2-template-small__control {
            position: relative;
            display: flex;
            flex-direction: row-reverse;
            justify-content: flex-end;
            align-items: flex-end;
            width: 100%;
            max-height: var(--min-height-button);
            flex: 1;
            gap: var(--gap-xxs);

            .ty-qty, .quantity {
                margin-bottom: 0;

                .ty-value-changer {
                    height: var(--min-height-button);
                }
            }
        }
    }

    // Title
    .product-title {
        display: inline-flex;
        align-items: flex-start;
        text-align: left;
        color: @font;

        .ut2_line_clamp(var(--si-lines-in-name-product));
    }

    // Price
    &__item-price {
        display: flex;
        flex-flow: column;
        flex-wrap: wrap;
        justify-content: center;
        min-height: var(--min-height-button);
        min-width: 120px;
    }

    // Mix Price and buttons
    .ut2-template-small__mix-price-and-button {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        width: 100%;
        gap: var(--gap-xxs);
        flex: 1;

        .ut2-template-small__price {
            flex: auto;
        }
        .ut2-template-small__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);
                    }
                }
            }
        }
    }

    .ut2-gray-box & {
        .ut2-template-small__mix-price-and-button .ut2-template-small__control .ty-qty > div {
            background: var(--fill-white);
        }
    }

    // Amount
    .stock-wrap {
        .ty-control-group {
            margin-bottom: var(--gap-xxs);

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

    // Bestsellers block
    @hits_start_color: @discount_label;
    @hits_end_color: yellow;
    @color-count: 10;

    .ut2-bestsellers-block & {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(max(var(--smallitems-item-min-width), calc((100% / 5) - var(--gap))), 1fr));

        .generate-colors(@n, @i: 1) when (@i =< @n) {
            .ut2-template-small__item:nth-child(@{i}) {
                .ut2-hit {
                    color: white;
                    background-color: mix(@hits_end_color, @hits_start_color, @i * 10%);
                    box-shadow: none;
                }
            }
            .generate-colors(@n, (@i + 1));
        }
        .generate-colors(@color-count);
    }
}