/*******************************************************************************************
*   ___  _          ______                     _ _                _                        *
*  / _ \| |         | ___ \                   | (_)              | |              © 2023   *
* / /_\ | | _____  _| |_/ /_ __ __ _ _ __   __| |_ _ __   __ _   | |_ ___  __ _ _ __ ___   *
* |  _  | |/ _ \ \/ / ___ \ '__/ _` | '_ \ / _` | | '_ \ / _` |  | __/ _ \/ _` | '_ ` _ \  *
* | | | | |  __/>  <| |_/ / | | (_| | | | | (_| | | | | | (_| |  | ||  __/ (_| | | | | | | *
* \_| |_/_|\___/_/\_\____/|_|  \__,_|_| |_|\__,_|_|_| |_|\__, |  \___\___|\__,_|_| |_| |_| *
*                                                         __/ |                            *
*                                                        |___/                             *
* ---------------------------------------------------------------------------------------- *
* 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                                                           *
*******************************************************************************************/

@titles-font-size: 16px;
@links-font-size: 15px;

.landing-page-categories, .ab-ut2-feature-content {
    h1 {
        margin: 0;
    }
}

.ab-lc-wrap {
    display: flex;
    flex-flow: row wrap;
    padding: @pd 0;
    margin: @pd -@pdi 0 -@pdi;
    width: calc(~'100% + '(@pdi * 2));

    .ab-lc-group, .ab-lc-landing {
        flex: 1 1 var(--col-basis, 245px);
        padding: 0 @pdi (@pdi*2) @pdi;
        min-width: 180px;

        &:empty {
            all: unset;
            flex: 1 1 var(--col-basis);
            visibility: hidden;
            min-width: 180px;
        }

        .head {
            img {
                display: block;
            }

            .cat-title {
                display: block;
                padding: 7px 0;
                margin-bottom: 7px;
                min-height: 22px;
                border-bottom: 1px solid @base;
            }

            a {
                &, .cat-title {
                    font-size: @titles-font-size;
                    font-weight: bold;
                    color: @font;

                    &:hover {
                        color: @links;
                    }
                }

            }
        }

        &.left-mini-icon {
            padding-left: 57px;

            img {
                display: inline-block;
                float: left;
                margin: 0 10px 0 -42px;
            }
        }

        a {
            font-size: @links-font-size;
            color: lighten(@font, 25%);
            @media screen and (max-width: 360px) {
                font-size: 14px;
            }
        }

        ul > li {
            display: flex;
            justify-content: center;
            flex-direction: column;
            position: relative;
            padding: 4px 0;

            i {
                position: relative;
                top: ((@links-font-size/2)-4);
                color: @lighten-font;
                line-height: .9;

                .ut2-icon();

                &:before {
                    content: "\e908";
                }
            }

            &.opened {
                > a {
                    color: @links;

                    i:before {
                        position: absolute;
                        -webkit-transform: rotate(180deg);
                        -moz-transform: rotate(180deg);
                        -ms-transform: rotate(180deg);
                        -o-transform: rotate(180deg);
                        transform: rotate(180deg);
                        color: @links;
                    }
                }
            }

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

        ul ul {
            margin: 8px 0;

            & > li {
                padding-left: @pdi;
            }
        }

        .items-level-2 {
            margin: 0;
        }

        .hidden-items-level-2 {
            display: none;
        }

        .show-hidden-items-level-2 {
            display: block;
            cursor: pointer;
            padding: 5px 0 0 0;
            color: @links;
            font-size: @links-font-size;

            &:after {
                content: "\e023";
                font-family: "glyphs";
                font-size: 15px;
                speak: none;
                position: relative;
                top: 2px;
                padding-left: 3px;
                -webkit-font-smoothing: antialiased;
            }

            &.opened:after {
                content: "\e00b";
            }

            &:hover {
                color: darken(@links, 5%);
            }
        }

        .items-level-3 {
            display: none;
        }
    }

    .cols-loop (@col) when (@col > 2) {
        &.ab-lc-cols-@{col} {
            --col-basis: 100%/@col;
        }
        .cols-loop(@col - 1)
    }
    .cols-loop (6);
    .ab-lc-group{
        max-width: 245px;
        @media screen and (max-width: 1024px) {
            max-width: 25%;
        }
        @media screen and (max-width: 800px) and (min-width: 601px) {
            max-width: 33.3333%;
        }
        @media screen and (max-width: 600px) {
            max-width: 50%;
        }
        @media screen and (max-width: 360px) {
            max-width: 100%;
            a {
                font-size: 14px;
            }
        }
    }
}

.ab-ut2-feature-content {
    .t-col {
        background: lighten(@base, 3%);
        margin-bottom: @pdi;
        padding: @pdi 0 @pdi @pdi;
        margin: 0 0 @pdi 0;
        width: 100%;

        .ab-lc-group, .ab-lc-landing {
            flex: 1 228px;
            padding: 0 @pdi @pdi 0;
            max-width: 228px;

            @media screen and (max-width: 525px) {
                max-width: 50%;
            }
            @media screen and (max-width: 425px) {
                max-width: 100%;
            }

            .head .cat-title {
                border-color: darken(@base, 5%);
            }
        }
    }
}