.starkframe__custom-controls {



    .sf-progress-bar {

        height: 6px !important;



        .progress-thumb::before {

            content: '';

            position: absolute;

            top: 11px;

            left: 7px;

            background-color: #ffffff;

            width: 6px;

            height: 5px;

        }



        .progress-thumb {

            background-color: unset !important;

            border-radius: unset !important;

            transform: translate(calc(-50% - 0.75em), calc(-100% - 0.75em)) !important;

            margin: 0.75em 0.75em 0 !important;

        }

    }

}



.main-prod-reviews {

    grid-area: review;

    overflow: hidden;



    .prod-title {

        margin: 0;

        font-size: 18px;

        color: rgb(63, 60, 90);

        line-height: 1;

        margin-top: 1em;

    }



    .sf-reviews-toolbar {

        display: flex;

        flex-direction: row;

        flex-wrap: nowrap;

        justify-content: flex-start;

        margin: 0.75em 0 0;

        overflow: scroll;

        position: relative;

        left: -1.5em;

        width: calc(100% + 3em);

        scrollbar-width: none;

        scrollbar-color: #ebebeb transparent;

        scrollbar-gutter: stable;



        > button:first-child {

            margin-left: 1.5em;

        }



        > button {

            border-radius: 6px;

            cursor: pointer;

            text-align: center;

            width: fit-content;

            padding: 0px 20px;

            font-family: 'Poppins';

            white-space: nowrap;

            font-weight: 600;

            align-content: center;

            border-radius: 8px;

            font-size: 13px;

            height: 34px;

            margin-right: 0.5em;

            background: #ebeaf2;

            color: #3f3c5a;

        }



        .sf-add-review-butt {

            background: #3f3c5a !important;

            color: #ffffff !important;

        }

        

    }



    .all-comment-outter-cont {

        position: relative;

        display: grid;

        grid-template-columns: 1fr;

        left: -1.5em;

        width: calc(100% + 3em);



        .all-comment-cont {

            position: relative;

            padding: 5px 0;

            margin: 0;

        

            .all-comment-media {

                display: flex;

                margin: 0px 1.5em;

                flex-flow: row;

                list-style-type: none;

                padding: 0px;

                gap: 0em;

                width: fit-content !important;



                .all-comment-video-item {

                    

                    a::before {

                        content: "";

                        background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/play-butt-comm-trans.svg);

                        background-size: contain;

                        position: absolute;

                        top: 0;

                        right: 0;

                        bottom: 0;

                        left: 0;

                        z-index: 99;

                    }

                }





                > li {

                    margin: 0.5em;

                    margin-left: 0;

                    margin-right: 0.75em;

                    z-index: 1;

                    position: relative;

                    

                    a {

                        color: #000000;

                        text-decoration: none;

                        cursor: pointer;

                    

                        img {

                            object-fit: cover;

                            padding: 0px;

                            border-radius: 6px;

                            display: block;

                            position: relative;

                            width: 85px !important;

                            aspect-ratio: 3 / 4 !important;

                            height: auto !important;

                        }

                    }

                }

            }

        }

    }



    .sf-reviews-cont {

        display: grid;

        grid-template-rows: repeat(2, auto);

        grid-template-columns: 1fr;

        position: relative;

        width: calc(100% + 3em);

        left: -1.5em;



        .sf-reviews-box.swiper-initialized .sf-reviews-list {

            display: flex !important;

        }



        .sf-reviews-box:not(.swiper-initialized) {

            background: #f4f4f4;

            border-radius: 12px;

            margin-bottom: 0.5em;

            min-height: 274px;

            padding: 0 !important;

            margin: 0.5em 1.5em;



            .sf-reviews-list, .swiper-button-prev, .swiper-button-next, .swiper-pagination {

                display: none;

            }

        }



        .sf-reviews-box:not(.swiper-initialized)::after {

            content: "";

            position: absolute;

            inset: 0;

            transform: translateX(-100%);

            background-image: linear-gradient(90deg,rgba(255,255,255,0) 0%, var(--skel-shine) 50%,rgba(255,255,255,0) 100%);

            animation: skel-shimmer var(--skel-speed) ease-in-out infinite;

        }



        .sf-reviews-box {

            position: relative;

            user-select: none;

            display: grid;

            grid-template-rows: auto;

            grid-template-columns: 1fr;

            padding: 0.5em 1.5em;

            width: calc(100% - 3em);



            .sf-reviews-list {

                padding: 0;

                margin: 0 0 1em;

                display: none;



                .review {

                    position: relative;

                    border-radius: 15px;

                    background: #fff0e2;

                    background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/owl/doodles1.png);

                    background-size: contain;

                    height: 270px;

                    box-sizing: border-box;

                    overflow: hidden;

                    padding: 0.5em !important;

                    box-shadow: 0 0 0 1px #ffca9b;



                    .comment_container {

                        display: grid;

                        grid-template-columns: 1fr;

                        grid-template-rows: auto;

                        align-items: stretch;

                        position: relative;



                        .comment-header {

                            display: grid;

                            align-items: center;

                            width: 100%;

                            background: #ffffff59;

                            backdrop-filter: blur(2px);

                            box-shadow: 0px 0px 0px 1px #ffffff;

                            border-radius: 10px;

                            grid-template-columns: min-content min-content minmax(0, 1fr);

                            grid-auto-rows: min-content;



                            .avatar {

                                width: 65px;

                                height: 65px;

                                padding: 3px;

                                background: transparent;

                                border-radius: 50%;

                                margin-right: 10px;

                                line-height: 1;

                                position: unset;

                                border: unset;

                            }



                            .comment-meta {

                                display: flex;

                                flex-direction: column;

                                height: 100%;

                                justify-content: space-evenly;



                                .review-product-rating {

                                    display: flex;

                                    flex-direction: row;

                                    flex-wrap: nowrap;

                                    width: fit-content;

                                    justify-content: flex-start;

                                    gap: 0.5em;



                                    .rating {

                                        display: none;

                                    }



                                    .star-rating::before {

                                        top: 0;

                                        left: 0;

                                        position: absolute;

                                        background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/owl/stcomm1.svg);

                                        content: '';

                                        display: block;

                                        height: 100%;

                                        width: 100%;

                                        background-size: contain;

                                    }



                                    .star-rating {

                                        position: relative;

                                        height: 20px;

                                        width: 7.1em;



                                        span::before {

                                            background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a1-star-o.svg);

                                            content: '';

                                            background-size: contain;

                                            top: 0;

                                            position: absolute;

                                            left: 0;

                                            width: 100%;

                                            height: 100%;

                                        }



                                        span {

                                            float: left;

                                            top: 0;

                                            left: 0px;

                                            position: absolute;

                                            height: 100%;

                                        }

                                    }

                                }



                                .meta {

                                    display: flex;

                                    flex-direction: column;

                                    flex-wrap: nowrap;

                                    align-items: flex-start;

                                    margin: 0;

                                    justify-content: center;

                                    margin-left: 3px;



                                    .woocommerce-review__author {

                                        line-height: 1;

                                        margin-bottom: 5px;

                                        font-weight: 600;

                                        color: #3f3c5a;

                                        font-size: 13px;

                                        font-family: 'Poppins';

                                    }



                                    .woocommerce-review__verified.verified {

                                        display: none;

                                    }



                                    .woocommerce-review__published-date {

                                        line-height: 1;

                                        color: #a59da5;

                                        font-size: 13px;

                                    }

                                }

                            }



                            .comment-info {

                                display: flex;

                                flex-direction: column;

                                height: 100%;

                                justify-content: center;

                                align-items: flex-end;

                                margin: 0.5em;

                                gap: 0.25em;

                                color: #a59da5;



                                > p {

                                    margin: 0;

                                }



                                .open-full-butt {

                                    cursor: pointer;

                                    padding: 0;

                                    width: fit-content;

                                    color: #3f3c5a;

                                    font-weight: 600;

                                }



                                .comment-media-count {

                                    margin: 0;

                                    color: #a59da5;

                                }



                                .comment-reply-count {

                                    margin: 0;

                                    padding: 0;

                                }

                            }

                        }



                        .comment-text {

                            margin: 1.5em 1em 0 1em;

                            display: flex;

                            flex-direction: row;

                            gap: 0.5em;

                            border: unset !important;

                            padding: 0 !important;



                            .description {

                                background: #ffffff;

                                box-shadow: -2px 3px 5px 1px #0000001c;

                                color: #25242e;

                                width: fit-content;

                                padding: 7px 8px 7px 15px;

                                border-radius: 15px;

                                position: relative;

                                display: flex;

                                flex-direction: row;

                                gap: 0.5em;



                                p:before {

                                    content: "";

                                    background: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/owl/tails.svg);

                                    background-size: cover;

                                    position: absolute;

                                    top: 0px;

                                    left: 0;

                                    width: 32px;

                                    height: 32px;

                                    margin-right: 0;

                                    transform: translate(20px, -25px);

                                }



                                p {

                                    margin: 0 !important;

                                    padding: 3px 0;

                                    min-width: 50px;

                                    display: -webkit-box;

                                    color: #25242e;

                                    -webkit-line-clamp: 6;

                                    -webkit-box-orient: vertical;

                                    overflow: hidden;

                                }



                                .comment-toggle {

                                    position: absolute;

                                    right: 8px;

                                    bottom: 8px;

                                    background: linear-gradient(140deg, rgb(255 255 255 / 50%) 0%, rgb(255 255 255) 30% 100%);

                                    padding: 5px 5px 5px 30px;

                                    font-family: 'Poppins';

                                    line-height: 1;

                                    color: #25242e80;

                                }

                            }

                        }

                    }

                }

            }

        }

    }

}



@media screen and (min-width: 901px) {



}



@media screen and (max-width: 900px) {



}



@media screen and (min-width: 601px) and (max-width: 900px) {



}



@media screen and (min-width: 601px) {



}



@media screen and (max-width: 600px) {

    .main-prod-reviews {



        .sf-reviews-toolbar {

            > button {

                /*height: 36px !important;*/

            }

        }

    }

}