.ul-inner-products-wrapper {
    .ul-product {
        border: 1px solid rgba(0, 0, 0, 0.2);
        box-shadow: 0px 4px 60px 10px rgba(239, 40, 83, 0);
        transition: 0.2s linear;

        &:hover {
            box-shadow: 0px 4px 60px 10px rgba(239, 40, 83, 0.06);
            border-color: var(--white);
        }
    }
}

.ul-products {
    &-sidebar {
        >* {
            margin-bottom: clamp(15px, 1.58vw, 30px);

            &:last-child {
                margin-bottom: 0;
            }
        }

        &-widget {
            background-color: #FEF4F6;
            border-radius: 10px;
            padding: clamp(15px, 1.58vw, 30px);

            &-title {
                font-size: clamp(17px, 1.05vw, 20px);
                line-height: 160%;
                font-weight: 600;
                color: var(--black);
                letter-spacing: -0.04em;
                margin-bottom: clamp(13px, 0.84vw, 16px);
            }

        }
    }

    &-search-form {
        background-color: var(--white);
        height: clamp(45px, 3.15vw, 60px);
        border-radius: 10px;
        display: flex;
        align-items: center;

        input {
            background-color: transparent;
            height: 100%;
            padding: clamp(15px, 1.05vw, 20px);
            width: 100%;
            border: none;
        }

        button {
            flex-shrink: 0;
            color: var(--ul-primary);
            font-size: 20px;
            padding-right: 15px;
            padding-top: 6px;
            padding-left: 0;
        }
    }

    &-price-filter {
        &-form {
            background-color: var(--white);
            padding: clamp(7px, 0.53vw, 10px);
            padding-top: clamp(13px, 0.84vw, 16px);
            border-radius: 10px;
        }

        .noUi-base {
            margin-bottom: 8px;
        }

        .noUi-horizontal {
            height: 7px;
            border: 1px solid var(--ul-primary);
        }

        .noUi-handle {
            width: 18px;
            height: 18px;
            box-shadow: none;
            border: 5px solid var(--ul-primary);
            border-radius: 50%;
            top: -7px;

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

        .noUi-connect {
            background-color: var(--ul-primary);
        }

        .noUi-touch-area::before,
        .noUi-touch-area::after {
            content: none;
        }

        .filtered-price {
            font-weight: 700;
            font-size: clamp(10px, 0.63vw, 12px);
            margin-top: clamp(5px, 0.42vw, 8px);
            display: inline-block;
            color: #676666;
        }


    }

    &-categories {
        &-link {
            a {
                display: flex;
                align-items: center;
                margin-bottom: 8px;
                color: #676666;
                font-size: clamp(13px, 0.84vw, 16px);
                margin-bottom: 8px;

                &:last-child {
                    margin-bottom: 0;
                }

                &:hover {
                    color: var(--ul-primary);
                }

                i {
                    font-size: 12px;
                    padding-top: 2px;
                }
            }
        }
    }

    &-color-filter {
        &-colors a {
            display: flex;
            align-items: center;
            justify-content: space-between;
            color: #676666;
            margin-bottom: clamp(10px, 1.05vw, 20px);

            &:last-child {
                margin-bottom: 0;
            }

            &:hover {
                color: var(--ul-primary);
            }

            .left {
                display: flex;
                align-items: center;
                gap: clamp(5px, 0.32vw, 6px);
            }

            .color-prview {
                display: inline-block;
                background-color: var(--ul-primary);
                width: clamp(15px, 0.95vw, 18px);
                height: clamp(15px, 0.95vw, 18px);
                border-radius: 50%;

            }

            &.black .color-prview {
                background-color: black;
            }

            &.green .color-prview {
                background-color: green;
            }

            &.blue .color-prview {
                background-color: blue;
            }

            &.red .color-prview {
                background-color: red;
            }

            &.brown .color-prview {
                background-color: brown;
            }

            &.yellow .color-prview {
                background-color: yellow;
            }

            &.white .color-prview {
                background-color: var(--white);
            }
        }
    }

    &-rating-filter-ratings {
        .single-rating-wrapper {
            margin-bottom: clamp(9px, 0.63vw, 12px);

            &:last-child {
                margin-bottom: 0;
            }

            label {
                padding-left: 24px;
                position: relative;
                display: inline-block;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .stars {
                    color: #FC791A;

                    span,
                    i {
                        padding-top: 2px;
                        display: inline-flex;
                        font-size: clamp(12px, 0.79vw, 15px);
                    }
                }

                .stars::before,
                .stars::after {
                    content: "";
                    position: absolute;
                    width: 16px;
                    aspect-ratio: 1/1;
                    border: 1px solid #FC791A;
                    top: 4px;
                    left: 0;
                    border-radius: 4px;
                }

                .stars::after {
                    border: none;
                    background-color: #FC791A;
                    opacity: 0;
                    content: "\f10a";
                    font-family: flaticon_glamer !important;
                    font-style: normal;
                    font-weight: normal !important;
                    font-variant: normal;
                    text-transform: none;
                    line-height: 1;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                    color: var(--white);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 11px;
                }


                input:checked~.stars::after {
                    opacity: 1;
                }
            }

            .right {
                color: #676666;
                font-size: clamp(13px, 0.84vw, 16px);
            }
        }
    }
}