.products {
    ul {
        list-style: none;

        li {
            img {
                width: 35px;
                max-width: 35px;
                height: auto;
            }
        }

        &.grid-view {
            &.transparent {
                li {
                    background: var(--#{$prefix}white) !important;
                    padding: 15px;
                    box-shadow: $card-box-shadow;
                    text-align: center;
                    float: left;
                    justify-content: center !important;

                    [theme-mode='dark'] & {
                        box-shadow: $card-box-shadow-dark !important;
                    }

                    a {
                        i {
                            border-radius: 10px;
                            font-size: 35px;
                            margin-bottom: 5px;
                        }
                    }

                    &:hover {
                        background: var(--#{$prefix}primary) !important;

                        a {
                            i {
                                &:before {
                                    color: var(--#{$prefix}white);
                                }
                            }

                            span {
                                color: var(--#{$prefix}white);
                            }
                        }
                    }

                    @include media-breakpoint-down(xxl) {
                        padding: 15px 5px;
                        height: 150px;
                        justify-content: center !important;
                        display: flex !important;
                        align-items: center !important
                    }

                    [dir="rtl"] & {
                        float: right !important;
                    }
                }
            }

            li {
                width: 24%;
                box-shadow: $card-box-shadow;
                margin: 0.5% 0.5% 1% 0.5%;
                float: left;
                background: var(--#{$prefix}white);
                display: flex !important;
                align-items: center !important;
                border-radius: 8px;
                transition: $transition;

                @include media-breakpoint-down(xxl) {
                    padding: 15px 5px;
                    height: 150px;
                    justify-content: center !important;
                    display: flex !important;
                    align-items: center !important
                }

                [dir="rtl"] & {
                    float: right !important;
                }

                [theme-mode='dark'] & {
                    background: var(--#{$prefix}primary-dark) !important;
                    box-shadow: $card-box-shadow-dark !important;
                }

                a {
                    color: var(--#{$prefix}text-color);
                    text-decoration: none;
                    padding: 20px;
                    width: 100%;
                    transition: $transition;

                    i {
                        font-size: 35px;
                        transition: $transition;
                    }

                    span {
                        padding-top: 10px;
                        display: block;
                        font-weight: 600;
                        font-size: $font-size-sm;

                        [theme-mode='dark'] & {
                            color: var(--#{$prefix}white);
                        }
                    }

                    &:hover {
                        color: var(--#{$prefix}white);
                        background: var(--#{$prefix}primary);
                        border-radius: 8px;

                        i {
                            &:before {
                                color: var(--#{$prefix}white);
                            }
                        }
                    }
                }
            }

            @media (max-width: 1100px) {
                li {
                    width: 24%;
                }
            }

            @media (max-width: 992px) {
                li {
                    width: 32%;
                }
            }

            @media (max-width: 550px) {
                li {
                    width: 49%;
                }
            }
        }

        &.list-view {
            @include media-breakpoint-up(xxl) {
                &.list-view-sm {
                    li {
                        width: 24%;
                    }
                }
            }

            li {
                -webkit-box-flex: 0;
                -ms-flex: 0 0 auto;
                flex: 0 0 auto;
                width: 32%;
                box-shadow: $card-box-shadow;
                background: var(--#{$prefix}white);
                margin-bottom: 2%;
                float: left;
                display: flex !important;
                align-items: center !important;
                border-radius: 8px;
                transition: $transition;

                @include media-breakpoint-up(lg) {

                    &:nth-child(1n) {
                        counter-increment: li;
                    }

                    &:nth-child(3n - 2) {
                        margin-right: 2%;
                    }

                    &:nth-child(3n - 1) {
                        margin-right: 2%;
                    }
                }

                @include media-breakpoint-down(lg) {

                    &:nth-child(1n) {
                        counter-increment: li;
                    }

                    &:nth-child(2n - 2) {
                        margin-right: 0;
                    }

                    &:nth-child(2n - 1) {
                        margin-right: 2%;
                    }
                }

                @include media-breakpoint-down(sm) {
                    margin-bottom: 4%;
                }

                [theme-mode='dark'] & {
                    background: var(--#{$prefix}primary-dark);
                    box-shadow: $card-box-shadow-dark;
                }

                @include media-breakpoint-down(xxl) {
                    height: 85px;
                }

                @include media-breakpoint-down(xl) {
                    height: 100px;
                }

                @include media-breakpoint-down(lg) {
                    height: 85px;
                }

                a {
                    color: var(--#{$prefix}text-color);
                    text-decoration: none;
                    position: relative;
                    display: flex !important;
                    align-items: center !important;
                    padding: 20px 15px;
                    width: 100%;

                    i {
                        font-size: 40px;
                        transition: $transition;
                    }

                    span {
                        display: block;
                        padding-left: 10px;
                        font-size: 13px;
                        text-transform: uppercase;
                        font-weight: 600;

                        [theme-mode='dark'] & {
                            color: var(--#{$prefix}white);
                        }

                        [dir="rtl"] & {
                            padding-left: 0;
                            padding-right: 10px;
                        }

                    }

                    &:hover {
                        color: var(--#{$prefix}white);
                        background: var(--#{$prefix}primary);
                        border-radius: 8px;

                        i {
                            &:before {
                                color: var(--#{$prefix}white);
                            }
                        }
                    }
                }
            }

            &.transparent {
                li {
                    background: transparent !important;
                    border-radius: 4px;
                    padding: 0;

                    &:hover {
                        box-shadow: inset $card-box-shadow;
                    }

                    a {
                        padding: 20px;

                        i {
                            font-size: 35px;
                        }
                    }
                }
            }

            @media (max-width: 1100px) {
                li {
                    width: 32%;
                }
            }

            @media (max-width: 992px) {
                li {
                    width: 49%;
                }
            }

            @media (max-width: 576px) {
                li {
                    width: 100%;
                }
            }
        }
    }
}

.favorite-tools {
    border: 1px dotted var(--#{$prefix}primary);
    padding: 30px;
    background: var(--#{$prefix}body-bg);

    [theme-mode='dark'] & {
        background: var(--#{$prefix}primary-dark);
        box-shadow: $card-box-shadow-dark;
    }
}
