.fancybox__container.comments-mini {

.fancybox__toolbar.is-absolute, .is-compact .fancybox__toolbar {

    text-shadow: none;

}

}



.fancybox__infobar {

    font-weight: 600;

    font-family: 'DM Sans';

}



.f-button.f-close img {

    width: 25px !important;

    height: 25px !important;

}



.f-button.f-thumbs img {

    width: 26px !important;

    height: 26px !important;

}



.f-button.f-comments img {

    width: 28px !important;

    height: 28px !important;

}



.fancybox__container.comments-mini.is-closing .fancybox__carousel {

    opacity: 0 !important;

    visibility: hidden !important;

}



.fancybox__container.comments-mini {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr;

    grid-template-rows: min-content 65vh min-content;

    grid-template-areas:

        "toolbar toolbar toolbar"

        "slider slider info"

        "thumbails thumbails thumbails";

    margin: 2em;

    max-width: 1200px;

    justify-self: center;

    align-self: stretch;



    .fancybox__toolbar.is-absolute, .is-compact .fancybox__toolbar {

        color: #ffffff;

        background-color: #ffffff52;

        border-radius: 10px 10px 0 0;

        height: 46px;

        grid-area: toolbar;

        position: unset !important;



        .fancybox__toolbar__column.is-right {



            .f-button:not([disabled]) {

                color: var(--f-button-hover-color);

                background-color: var(--f-button-hover-bg);

            }



            .f-button {

                background: transparent !important;

                width: 42px !important;

                height: 42px !important;

            }

        }

    }



    .fancybox__backdrop {

        background: #0000008f !important;

        backdrop-filter: blur(12px);

        -webkit-backdrop-filter: blur(12px);

    }



    .fancybox__carousel.hide-comment {

        border-radius: 0 0 1em 1em !important;

    }



    .fancybox__carousel {

        background: #00000062;

        border-radius: 0 0 0 10px;

        transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;

        opacity: 1;

        visibility: visible;

        grid-area: slider;

        margin: 0;



        .fancybox__slide.has-image.is-animating, .fancybox__slide.has-image.is-selected {

            overflow:

            hidden;

            border-radius: 0 0 0 10px;

        }



        .fancybox__slide {

            padding: 1em;



            .fancybox__content {

                position: relative;

                width: 100% !important;

                height: 100% !important;

                border-radius: 12px;



                .fancybox__html5video {

                    border-radius: 12px;

                }



                .fancybox-image {

                    border-radius: 12px;

                    width: auto !important;

                    max-height: 100% !important;

                    height: auto !important;

                    max-width: 100% !important;

                }

            }

        }

    }



    .fancybox__footer.hidden {

        height: 0 !important;

        overflow: hidden;

    }



    .fancybox__footer {

        padding: 0;

        margin: 0;

        position: relative;

        grid-area: thumbails !important;

        height: fit-content;



        .fancybox__thumbs {

            --f-thumb-border-radius: 6px;

            --f-thumb-outline-color: #ffb471;

        }



        .fancybox__thumbs.is-horizontal {

            padding: 0 !important;



            .f-thumbs__viewport {

                height: auto !important;



                .f-thumbs__slide__img {

                    border-radius: 6px !important;

                }

            }

        }

    }



    .fancybox__data.hidden {

        display: none !important;

    }



    .fancybox__data {

        background: #00000062;

        padding: 1em 2em;

        border-radius: 0 0 10px 0;

        display: flex;

        flex-direction: column;

        flex-wrap: nowrap;

        transition: height 0.3s ease;

        grid-area: info;

        margin: 0;

        overflow-y: hidden;



        .comm-header {

            display: flex;

            flex-direction: row;

            flex-wrap: nowrap;

            align-items: stretch;

            margin-bottom: 1em;

            position: relative;



            #fancybox_avatar {

                float: left;

                padding: 3px;

                width: 65px;

                height: 65px;

                background: transparent !important;

                border: 0px solid #f0eef0 !important;

                border-radius: 50%;

                margin-right: 15px;

                line-height: 1;

                position: unset !important;

            }



            .text-comm-block {

                display: flex;

                flex-direction: column;

                flex-wrap: nowrap;

                justify-content: center;

            }



            #fancybox_rating_value {

                display: none;

            }



            .review-product-rating {

                display: flex;

                flex-direction: row;

                flex-wrap: nowrap;

                width: fit-content;

                justify-content: flex-start;

                gap: 0.5em;

                position: absolute;

                top: 0;

                right: 0;



                .rating {

                    display: none;

                }



                .star-rating::before {

                    top: 0;

                    left: 0;

                    position: absolute;

                    background-image: url(https://starkframe.store/wp-content/themes/starkframe/assets/images/stark-frame/a1-star-g.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%;

                    }

                }

            }

        }



        #fancybox_comment {

            padding: 0 0.5em 0 0;

            border-radius: 10px;

            overflow-y: scroll;

            scrollbar-width: thin;

            scrollbar-color: #ffffff75 transparent;

            scrollbar-gutter: stable;

            margin: 0 0 0.5em 0;

        }

    }

}



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

.fancybox__container.hide-comment.comments-mini {

    grid-template-areas:

        "toolbar toolbar toolbar"

        "slider slider slider"

        "thumbails thumbails thumbails" !important;

}

}



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

    

    .fancybox__container.hide-carousel.comments-mini {

        grid-template-areas:

            "toolbar toolbar toolbar"

            "info info info"

            "thumbails thumbails thumbails" !important;

    }



    .fancybox__container.comments-mini {

        grid-template-rows: min-content 1fr min-content !important;

        grid-template-areas:

            "toolbar toolbar toolbar"

            "slider slider slider"

            "thumbails thumbails thumbails";

        bottom: 71px;

        margin: 0 !important;

        align-self: unset !important;

        align-content: space-between;

        

        .fancybox__toolbar.is-absolute, .is-compact .fancybox__toolbar {

            background-color: #00000052 !important;

            border-radius: unset !important;

        }



        .fancybox__carousel.hidden {

            display: none !important;

        }



        .fancybox__carousel {

            background: unset !important;

            border-radius: unset !important;

            align-self: center;

            object-fit: contain;

            height: 100%;

            width: 100%;

            overflow: hidden;

        }



        .fancybox__footer {

            z-index: 11;



            .f-thumbs.fancybox__thumbs.is-classic.is-ltr.is-horizontal {

                margin: 0 0.5em;

            }

        }



        .fancybox__data {

            margin: 1em 1em 1em 1.5em !important;

            border-radius: 8px !important;

            padding: 1em 1em 1em 1.5em !important;

            max-width: 450px;

            justify-self: center;

        }

    }

}