.reviews {
    display: grid;
    grid-template-areas:
            "review-head review-btn"
            "review-list review-list";
}

.review_list {
    display: grid;
    grid-auto-flow: column dense;
    overflow-x: auto;
    grid-area: review-list;
    gap: calc(0px + 20 * var(--scale));
    margin: calc(0px - 10 * var(--scale));
}

.review_list .slick-slide {
    margin: calc(0px + 10 * var(--scale));

}

.review_heading {
    grid-area: review-head;
    display: flex;
    align-items: center;
    font-size: calc(0px + 24 * var(--scale));
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-bottom: calc(0px + 50 * var(--scale));
}

.btn.review_btn {
    grid-area: review-btn;
    font-size: calc(0px + 15 * var(--scale));
    margin-left: auto;
    height: calc(0px + 48 * var(--scale));
    padding: 0 calc(0px + 30 * var(--scale));
}


.review_send-btn {
    display: block;
    margin: calc(0px + 36 * var(--scale)) auto 0;
}

.review_popup textarea {
    width: 100%;
    padding: calc(0px + 20 * var(--scale));
    height: calc(0px + 245 * var(--scale));
    resize: vertical;
}


@media (max-width: 767px) {
    #reviews {
        padding: 10px 0;
    }

    .reviews {
        grid-template-columns: 1fr;
        grid-template-areas:
            "review-head"
            "review-list"
            "review-btn";
        gap: 10px;
    }


    .review_heading {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .review_list {
        display: grid;
        overflow-x: auto;
        grid-template-rows: repeat(2, min-content);
    }

    .btn.review_btn {
        font-size: 13px;
        font-style: normal;
        font-weight: 700;
        padding: 10px 60px;
        height: 35px;
        margin: auto;
    }
}

.review_item {
    position: relative;
    display: grid;
    border: var(--border-grey);
    border-radius: calc(0px + 18 * var(--scale));
    grid-template-columns:  auto auto 1fr;
    grid-template-areas:
        "review-name review-date review-rating"
        "review-text review-text review-text";
    gap: calc(0px + 14 * var(--scale)) calc(0px + 22 * var(--scale));
    padding: calc(0px + 18 * var(--scale)) calc(0px + 24 * var(--scale)) calc(0px + 14 * var(--scale));
    font-weight: 700;
}

.review_item-name {
    grid-area: review-name;
    font-size: calc(0px + 20 * var(--scale));
    color: var(--main-color);
}

.review_item-date {
    grid-area: review-date;
    font-size: calc(0px + 18 * var(--scale));
    color: var(--missing-color);
    width: calc(0px + 18 * var(--scale));
    height: calc(0px + 18 * var(--scale));
}

.review_item-rating {
    justify-self: end;
}

.review_item-rating .star {
    grid-area: review-rating;
}

.review_item-text {
    grid-area: review-text;
    font-size: calc(0px + 22 * var(--scale));
}

.review_dots {
    display: flex;
    justify-content: center;
    margin: calc(0px + 20 * var(--scale)) auto calc(0px + 50 * var(--scale));
}

.btn.review_open {
    display: block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2 24L22 24C22.5304 24 23.0391 23.7893 23.4142 23.4142C23.7893 23.0391 24 22.5304 24 22L24 2C24 1.46957 23.7893 0.960859 23.4142 0.585787C23.0391 0.210714 22.5304 0 22 0L2 0C1.46957 0 0.960859 0.210714 0.585787 0.585787C0.210714 0.960859 0 1.46957 0 2L0 22C0 22.5304 0.210714 23.0391 0.585787 23.4142C0.960859 23.7893 1.46957 24 2 24ZM7.2925 10.2925L11.2925 6.2925C11.3854 6.19952 11.4957 6.12576 11.6171 6.07544C11.7385 6.02512 11.8686 5.99921 12 5.99921C12.1314 5.99921 12.2615 6.02512 12.3829 6.07544C12.5043 6.12576 12.6146 6.19952 12.7075 6.2925L16.7075 10.2925C16.8951 10.4801 17.0006 10.7346 17.0006 11C17.0006 11.2654 16.8951 11.5199 16.7075 11.7075C16.5199 11.8951 16.2654 12.0006 16 12.0006C15.7346 12.0006 15.4801 11.8951 15.2925 11.7075L13 9.41375L13 17C13 17.2652 12.8946 17.5196 12.7071 17.7071C12.5196 17.8946 12.2652 18 12 18C11.7348 18 11.4804 17.8946 11.2929 17.7071C11.1054 17.5196 11 17.2652 11 17L11 9.41375L8.7075 11.7075C8.51986 11.8951 8.26536 12.0006 8 12.0006C7.73464 12.0006 7.48014 11.8951 7.2925 11.7075C7.10486 11.5199 6.99944 11.2654 6.99944 11C6.99944 10.7346 7.10486 10.4801 7.2925 10.2925Z' fill='black'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 24px;
    margin: 4px auto;
    border-radius: 0 !important;
    transform: rotate(180deg);
    transition: 300ms;
}

.review_wrap:hover .review_open {
}

.open .review_open {
    transform: rotate(0deg);
}

.review_answer {
    border: var(--border-grey);
    background-color: var(--main-color);
    color: white;

    display: grid;
    border: var(--border-grey);
    border-radius: calc(0px + 18 * var(--scale));
    grid-template-columns:  auto auto 1fr;
    grid-template-areas:
        "answer-name answer-date ."
        "answer-text answer-text answer-text";
    gap: calc(0px + 14 * var(--scale)) calc(0px + 22 * var(--scale));
    font-weight: 700;
    max-height: 0;
    padding: 0 calc(0px + 24 * var(--scale));
    overflow: hidden;
    opacity: 0;
    transition: 300ms;
}

.open .review_answer {
    padding: calc(0px + 18 * var(--scale)) calc(0px + 24 * var(--scale));
    max-height: 500px;
    opacity: 1;
}

.review_answer-name {
    grid-area: answer-name;
    font-size: calc(0px + 18 * var(--scale));
}

.review_answer-date {
    grid-area: answer-date;
    color: #D0B9FF;
    font-size: calc(0px + 18 * var(--scale));
    width: calc(0px + 18 * var(--scale));
    height: calc(0px + 18 * var(--scale));
}

.review_answer-text {
    grid-area: answer-text;
    font-size: calc(0px + 22 * var(--scale));
}


@media (max-width: 767px) {
    .review_item {
        padding: 12px 16px 42px;
        border-radius: 5px;
        gap: 9px 15px;
        min-width: 245px;
    }

    .review_item-name {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .review_item-date {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .review_item .review_item-rating .star {
        width: 24px;
        height: 24px;
    }

    .review_item-text {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .review_open {
        opacity: 1;
        position: relative;
        margin-top: -28px;
    }

    .review_answer {
        padding: 0 16px;
        margin: 10px 15px 0;
        gap: 10px 9px;
    }

    .open .review_answer {
        padding: 12px 16px;
    }

    .review_answer-name, .review_answer-date {
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .review_answer-text {
        font-size: 16px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }

    .product_rating {
        justify-content: start;
    }

    .product_rating .star.btn.transparent {
        width: 24px;
        height: 24px;
    }
}


.review_popup {
    max-width: calc(0px + 990 * var(--scale));
}

.review_popup .popup_content {
    width: 100%;
    max-width: calc(0px + 620 * var(--scale));
    margin: 0 auto;
}

.review_popup label {
    padding-top: calc(0px + 16 * var(--scale));
    padding-bottom: calc(0px + 16 * var(--scale));
}

.review_label {
    position: relative;
}

.review_label::before {
    content: "";
    display: block;
    width: calc(0px + 175 * var(--scale));
    height: calc(0px + 175 * var(--scale));
    background-image: url(/upload/template/image/illustrations/cube4.svg);
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    top: calc(0px + 10 * var(--scale));
    right: 0;
}


@media (max-width: 767px) {

    .review_popup, .review_popup .popup_content {
        max-width: 100%;
    }

    .review_popup textarea {
        height: 120px;
    }

    .review_label::before {
        width: 80px;
        height: 80px;
    }

    .input[name=name] {
        width: 200px;
    }
}

.review_popup [data-score] .star {
    width: calc(0px + 45 * var(--scale));
    height: calc(0px + 45 * var(--scale));
}