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

// two columns mode
.ty-pagination-container .ty-compact-list.show-two-columns:has(> .ty-compact-list__item),
.ty-pagination-container .ty-compact-list.show-two-columns #categories_view_pagination_contents {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(max(320px,calc(~'50% - 'var(--gap-xs))),1fr));
    width: 100%;

    .ut2_grid_border() when not (@abt__ut2_product_list_show_grid_border = solid_without_margins) {
        column-gap: var(--gap);
    }
    .ut2_grid_border();

    &:only-child {
        max-width: 100%;
        border-right: 0 !important;
    }

    .ty-compact-list__controls {
        align-content: baseline;
    }
}


.ty-compact-list {
    width: 100%;

    > div:not(.ty-compact-list__item) {
        display: flex;
        flex-wrap: wrap;

        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = solid_with_margins) {
             gap: var(--gap-xs);
        }
        .ut2_grid_border();
    }

    &__item {
        flex: 1 100%;
        max-width: 100%;
        padding: 0;
        border: 0;

        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = none) {
            border-top: 1px solid @base;
            border-bottom: 1px solid @base;
            margin-bottom: -1px;

            @media (min-width: 1025px) {
                width: calc(~'100% + (var(--gap-xs) * 2)');
            }
        }
        .ut2_grid_border();

        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = solid_without_margins) {
            @media (max-width: 576px) {
                max-width: calc(~'100% + (var(--gap-s) * 2)');
                margin: 0 calc(~'var(--gap-s) * -1');
            }
        }
        .ut2_grid_border();

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

        > form {
            height: 100%;
        }
    }

    &__content {
        display: flex;
        flex-wrap: wrap;
        min-height: 100%;
        column-gap: min(2vw, var(--gap-sm));
        row-gap: var(--gap-xs);

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

        &:hover {
            position: relative;
            border-color: @base5;
            z-index: 2;
        }

        // Margin border
        .ut2_grid_border() when not (@abt__ut2_product_list_show_grid_border = none) {
            background: @general_bg_color;
        }
        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = none) {
            border: 0;
            border-radius: var(--border-radius-box);
            padding-top: var(--gap-sm);
            padding-bottom: var(--gap-sm);
        }
        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = solid_without_margins) {
            padding: var(--gap-sm);
            box-shadow: inset 0 0 0 1px @base, 0 0 0 1px @content_bg;
        }
        .ut2_grid_border() when (@abt__ut2_product_list_show_grid_border = solid_with_margins) {
            padding: var(--gap-sm);
            border: 1px solid @base;
            border-radius: var(--border-radius-box);

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

    &__image {
        display: flex;
        align-items: center;
        position: relative;
        width: auto;
        max-width: 100%;
        height: 100%;
        padding: 0;
        flex: 0 0 auto;
        overflow: hidden;

        .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();

        // 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-product-labels {

            &__content {
                text-indent: -9999px;

                > bdi, &:after {
                    font-size: var(--font-size-small);
                    font-weight: normal;
                    text-indent: 0;
                    margin-left: 0;
                }
            }
            &__item--discount {
                .ty-product-labels__content bdi:before {
                    content: "-";
                    letter-spacing: 2px;
                }
            }
        }
    }

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

    &__title {
        margin: 0;
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
        width: 30%;

        > span {
            position: relative;
            display: flex;

            > a {
                display: block;
                width: 100%;
                padding-bottom: 5px;
                text-align: left;
                color: @font;
                font-size: var(--font-size-normal);

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

    &__sku {
        padding-top: 5px;

        .ty-control-group {
            font-size: var(--font-size-small);
        }
    }

    &__amount {
        margin-top: var(--gap-xxs);
        margin-bottom: var(--gap-xxs);

        .ty-control-group {
            margin-top: 0;
            margin-bottom: 0;
        }
    }

    &__controls {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        padding-bottom: 0;
        flex: 1;
        gap: var(--gap-xs);

        @media (max-width: 480px) {
            flex-wrap: nowrap;
            justify-content: space-between;
            flex: 1 0 auto;
        }

        [id*="qty_update"] {
            position: relative;
        }

        .ty-qty-out-of-stock {
            line-height: 1;
            text-align: left;
            word-break: normal;
            min-width: 90px;
        }

        .ty-compact-list__price {
            flex: 1;
            margin: 0;
            padding: 0;

            @media (min-width: 480px) {
                min-width: 160px;
            }
            @media (max-width: 480px) {
                align-items: flex-start;
            }

            > div:first-child {
                justify-content: flex-end;

                @media (max-width: 469px) {
                    justify-content: flex-start;
                }
            }

            .ty-price-update ~ span {
                @media (min-width: 470px) {
                    justify-content: flex-end;
                }
            }

            .ty-list-price {
                margin-right: 0;
            }
            .ty-price-curency-input {
                flex: initial;
                display: flex;
                align-content: center;
                align-items: center;
                gap: 3px;
            }
        }
    }

    .ut2-compact-list__qty-wrap {
        display: flex;
        flex-direction: row-reverse;

        &:hover [id*="add_to_cart"] {
            .ty-btn {
                z-index: 2;
            }
            & + [id*="qty_"] {
                .ty-qty {
                    visibility: visible;
                    opacity: 1;
                }
            }
        }
        // QTY
        .ty-qty {
            @media (hover: hover) {
                right: -52px;
                top: 0;
            }
            @media (hover: none) {
                margin-right: var(--gap-xs);

                .ty-value-changer, .quantity {
                    background: var(--fill-gray);
                }
            }

            a + input.ty-value-changer__input, .quantity a + input.ty-value-changer__input {
                border-radius: 0;
                border: 0;
                background: transparent;
                box-shadow: none !important;
            }
        }
    }

    .ut2-compact-list__buttons {
        display: flex;
        flex-direction: row-reverse;
        align-items: center;

        .ty-btn {
            position: relative;
            margin: 0;
            margin-left: var(--gap-xs);
            z-index: 1;
        }

        .ut2-cl-bt {
            display: flex;
        }
    }
}