/* =============================================
   ОТЗЫВЫ
   Звёзды, карточки отзывов, блок в карточке книги, карусель на главной,
   рейтинг в карточках каталога, окно «Оставить отзыв», статусы в ЛК.
   Шрифты, цвета, кнопки, стрелки и точки — как на сайте
   (slider-base.css, кнопки карточки книги, попап отмены заказа).
   ============================================= */

/* ---------- Звёзды: одна строка, заливка по проценту (--rv: 96% = 4,8) ---------- */
.rv-stars {
    --rv-size: 18px;
    display: inline-block;
    flex: 0 0 auto;
    width: calc(var(--rv-size) * 5);
    height: var(--rv-size);
    background: linear-gradient(90deg, #F6881B var(--rv, 100%), #DDD6CB var(--rv, 100%));
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.83 5.9 6.47.84-4.74 4.5 1.2 6.42L12 17.12l-5.76 3.14 1.2-6.42-4.74-4.5 6.47-.84z'/%3E%3C/svg%3E") 0 0 / var(--rv-size) var(--rv-size) repeat-x;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.83 5.9 6.47.84-4.74 4.5 1.2 6.42L12 17.12l-5.76 3.14 1.2-6.42-4.74-4.5 6.47-.84z'/%3E%3C/svg%3E") 0 0 / var(--rv-size) var(--rv-size) repeat-x;
}

.rv-stars--sm {
    --rv-size: 15px;
}

.rv-stars--lg {
    --rv-size: 24px;
}

/* ---------- Кнопка (как «Купить книгу» в карточке книги) ---------- */
.rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border: 1px solid #005C67;
    border-radius: 4px;
    background: #005C67;
    color: #FFFFFF;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 1.12px;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.rv-btn:hover {
    border-color: #F6881B;
    background: transparent;
    color: #222322;
}

.rv-btn:active {
    border-color: #F6881B;
    background: #F6881B;
    color: #FFFFFF;
}

/* Ссылка-действие (как «Прослушать фрагмент») */
.rv-link {
    padding: 0;
    border: 0;
    background: none;
    color: #005C67;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.rv-link:hover {
    color: #F6881B;
}

/* ---------- Карточка отзыва ---------- */
/* Как карточка анонса (news-slider__slide): подложка только при наведении, рамка при нажатии.
   Поля вынесены наружу отрицательными отступами — текст стоит по колонке, как книги и анонсы. */
.rv-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    height: calc(100% + 36px);
    padding: 18px 17.5px;
    margin: -18px -17.5px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.rv-card:hover {
    background: #FFFAF5;
}

.rv-card:active {
    border: 1px solid rgba(246, 136, 27, 0.31);
}

/* Сенсорные экраны: :hover после касания «залипает» и уезжает вместе с карточкой при листании.
   Как у карточек товаров и анонсов (js/script.js, класс is-touch-hover): подложка — только пока палец
   на карточке; начали листать или прокручивать — гаснет сразу, без плавного исчезновения (js/reviews.js). */
@media (hover: none) {
    .rv-card:hover {
        background: transparent;
    }

    .rv-card:active {
        border-color: transparent;
    }

    .rv-card.is-touch-hover {
        background: #FFFAF5;
    }

    .rv-card.is-touch-hover:active {
        border-color: rgba(246, 136, 27, 0.31);
    }

    .rv-card.rv-card--instant {
        transition: none;
    }
}

.rv-card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.rv-card__name {
    color: #111;
    font-family: "PT Astra Serif", serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
}

.rv-card__date {
    color: #929292;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    white-space: nowrap;
}

.rv-card__text {
    margin: 0;
    color: #222322;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 16px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    overflow: hidden;
}

.rv-card.is-expanded .rv-card__text {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
}

.rv-card__more {
    align-self: flex-start;
    margin-top: -6px;
}

/* Карточка на главной: сверху книга, снизу автор */
.rv-card__book {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #000;
    text-decoration: none;
}

.rv-card__book img {
    flex: 0 0 auto;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
}

.rv-card__book-name {
    font-family: "PT Astra Serif", serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
    text-underline-offset: 2px;
}

.rv-card__book:hover .rv-card__book-name {
    text-decoration: underline;
    text-decoration-thickness: 1px;
}

.rv-card__foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

.rv-card__foot .rv-card__name {
    font-size: 18px;
}

/* ---------- Карусель отзывов ----------
   Геометрия — как у слайдера книг на главной (catalog.section/homepage_products/style.css):
   сетка «стрелка 56 | окно | стрелка 56», окно по центру шириной на 4 / 3 / 2 / 1 карточку книги
   (340 px + промежутки + 20 px по краям), карточки отзывов — по тем же колонкам.
   До 1024 px стрелки и точки — строкой под карточками. Листается страницей, 0,4 с ease. */
.rv-slider {
    --rv-per: 4;
    --rv-gap: 42px;
    --rv-view: calc(4 * 340px + 3 * 40px + 40px + 20px);
    display: grid;
    grid-template-columns: var(--slider-arrow-width) minmax(0, 1fr) var(--slider-arrow-width);
    align-items: center;
}

.rv-slider__viewport {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    max-width: var(--rv-view);
    margin: 0 auto;
    padding: 20px;  /* как у слайдера книг: в полях видна подложка карточки при наведении */
    box-sizing: border-box;
    overflow: hidden;
}

.rv-slider__track {
    display: flex;
    gap: var(--rv-gap);
    transition: transform 0.4s ease;
}

.rv-slider__slide {
    flex: 0 0 calc((100% - (var(--rv-per) - 1) * var(--rv-gap)) / var(--rv-per));
    min-width: 0;
}

.rv-slider .slider-pagination {
    margin-top: 20px;
}

/* Всё помещается — стрелок и точек нет, карточки от левого края окна (там же, где первая книга) */
.rv-slider.is-static .rv-slider__arrow,
.rv-slider.is-static .rv-slider__pagination {
    display: none;
}

.rv-slider__track.no-anim {
    transition: none;
}

@media (max-width: 1728px) {
    .rv-slider {
        --rv-per: 3;
        --rv-view: calc(3 * 340px + 2 * 40px + 40px + 20px);
    }
}

@media (max-width: 1400px) {
    .rv-slider {
        --rv-per: 2;
        --rv-view: calc(2 * 340px + 1 * 40px + 40px + 20px);
    }
}

/* Планшет и мобилка: стрелки и точки — строкой под карточками */
@media (max-width: 1024px) {
    .rv-slider {
        /* стрелки прижаты к точкам (justify-self из slider-base), окно — на всю ширину строки */
        grid-template-columns: 1fr auto 1fr;
        gap: 24px 50px;
    }

    .rv-slider__viewport {
        grid-column: 1 / -1;
    }

    .rv-slider .slider-arrow--prev {
        grid-column: 1;
        grid-row: 2;
    }

    .rv-slider .slider-pagination {
        grid-column: 2;
        grid-row: 2;
        margin-top: 0;
    }

    .rv-slider .slider-arrow--next {
        grid-column: 3;
        grid-row: 2;
    }
}

@media (max-width: 850px) {
    .rv-slider {
        --rv-gap: 30px;
        --rv-view: calc(2 * 320px + 1 * 30px + 40px);
    }
}

@media (max-width: 768px) {
    .rv-slider {
        gap: 20px 40px;
        --rv-view: calc(2 * 300px + 1 * 30px + 40px);
    }
}

@media (max-width: 720px) {
    .rv-slider {
        --rv-gap: 24px;
        --rv-view: calc(2 * 280px + 1 * 24px + 40px);
    }
}

@media (max-width: 680px) {
    .rv-slider {
        --rv-per: 1;
        --rv-view: calc(1 * 340px + 40px);
    }
}

@media (max-width: 580px) {
    .rv-slider {
        grid-template-columns: auto 1fr auto;
        gap: 20px 0;
    }

    .rv-slider .slider-pagination {
        justify-self: center;
    }

    /* стрелки по краям, отступы — как у слайдера книг */
    .rv-slider .slider-arrow--prev {
        justify-self: start;
        margin: 0 0 0 25px;
    }

    .rv-slider .slider-arrow--next {
        justify-self: end;
        margin: 0 25px 0 0;
    }
}

@media (max-width: 480px) {
    .rv-slider .slider-arrow--prev {
        margin-left: 35px;
    }

    .rv-slider .slider-arrow--next {
        margin-right: 35px;
    }
}

@media (max-width: 420px) {
    .rv-slider {
        --rv-view: calc(1 * 300px + 40px);
    }

    .rv-slider .slider-arrow--prev {
        margin-left: 20px;
    }

    .rv-slider .slider-arrow--next {
        margin-right: 20px;
    }
}

@media (max-width: 360px) {
    .rv-slider {
        --rv-view: calc(1 * 260px + 40px);
    }

    .rv-slider .slider-arrow--prev {
        margin-left: 10px;
    }

    .rv-slider .slider-arrow--next {
        margin-right: 10px;
    }
}


/* ---------- Блок «Отзывы» в карточке книги ---------- */
.rv-section {
    /* только по вертикали: боковые отступы задаёт контейнер (на главной секция — container--nopad) */
    padding-top: 80px;
    padding-bottom: 40px;
    scroll-margin-top: 140px;
}

.rv-section__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-bottom: 48px;
}

.rv-section__title {
    margin: 0;
    color: #4F4F4F;
    font-family: "PT Astra Serif", serif;
    font-size: 48px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

.rv-section__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-right: auto;
    padding-bottom: 4px;
}

.rv-section__value {
    color: #222322;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 0.8;
}

.rv-section__count {
    color: #5F5F5F;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 16px;
}

.rv-section__action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.rv-note {
    max-width: 320px;
    color: #5F5F5F;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    text-align: right;
}

.rv-note a {
    color: #005C67;
    text-underline-offset: 2px;
}

.rv-note a:hover {
    color: #F6881B;
}

.rv-empty {
    margin: 0;
    color: #5F5F5F;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 18px;
    line-height: 1.5;
}

@media (max-width: 1024px) {
    .rv-section__title {
        font-size: 40px;
    }
}

@media (max-width: 540px) {
    .rv-section {
        padding-top: 56px;
    }

    .rv-section__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        margin-bottom: 32px;
    }

    .rv-section__title {
        font-size: 32px;
    }

    .rv-section__action {
        align-items: flex-start;
    }

    .rv-note {
        text-align: left;
    }
}

/* ---------- Строка под названием книги: рейтинг | прослушивания ---------- */
.product-detail__stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 4px 0 16px;
}

.product-detail__stats .product-detail__listens {
    margin: 0;
}

.product-detail__stats .product-detail__rating + .product-detail__listens {
    padding-left: 14px;
    border-left: 1px solid #C3C7C3;
}

@media (max-width: 540px) {
    .product-detail__stats {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-detail__stats .product-detail__rating + .product-detail__listens {
        padding-left: 0;
        border-left: 0;
    }
}

/* Счётчик ушёл на новую строку (узкая колонка) — без черты; ставит js */
.product-detail__stats .product-detail__listens.is-wrapped {
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
}

.product-detail__rating {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #222322;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 16px;
    line-height: 1;
    text-decoration: none;
}

.product-detail__rating b {
    font-weight: 600;
}

.product-detail__rating-count {
    color: #005C67;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.25s ease;
}

.product-detail__rating:hover .product-detail__rating-count {
    color: #F6881B;
}

/* ---------- Рейтинг в карточках (вариант В4): своей строкой под названием ----------
   «★★★★★ 4,8 · 5 отзывов». Строка есть всегда — у книги без отзывов она пустая,
   поэтому карточки в ряду одинаковой высоты. */
.card-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #111;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 14px;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.card-rating--line {
    min-height: 18px;
}

.card-rating--line.is-empty {
    visibility: hidden;
}

.card-rating--line .rv-stars {
    --rv-size: 15px;
}

.card-rating__count {
    color: #929292;
    transition: color 0.25s ease;
}

.card-rating:hover .card-rating__count {
    color: #F6881B;
}

/* Компактные карточки (серия, «Вам также…», оформление заказа) */
.product-series__info > .card-rating--line {
    margin: 6px 0 2px;
}

/* Всплывающие карточки на бирюзовом фоне — белым */
.product-sticky-card .card-rating,
.product-sticky-card .card-rating__count {
    color: #FFFFFF;
}

.product-sticky-card .card-rating__count {
    opacity: 0.7;
}

.product-sticky-card .card-rating:hover .card-rating__count {
    color: #F6881B;
    opacity: 1;
}

/* ---------- Название всегда занимает ровно 2 строки ----------
   В шаблонах это и задумано (min-height: 2 × 1.2em), но em считается от шрифта заголовка h3
   (18,7 px), а не ссылки в нём (24 px) — короткое название было ниже соседних на ~13 px,
   и всё под ним (рейтинг, формат, язык) съезжало. Даём h3 размер шрифта ссылки. */
.products-grid__name,
.products-slider__name {
    font-size: 24px;
    line-height: 1.2;
}

@media (max-width: 768px) {
    .products-grid__name {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .products-grid__name {
        font-size: 18px;
    }
}

/* слайдер на главной и в корзине */
@media (max-width: 1024px) {
    .products-slider:not(.products-slider--popular) .products-slider__name {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .products-slider:not(.products-slider--popular) .products-slider__name {
        font-size: 20px;
    }
}

@media (max-width: 360px) {
    .products-slider:not(.products-slider--popular) .products-slider__name {
        font-size: 18px;
    }
}

/* «Популярное» (карточка товара, ЛК, пустая корзина) */
@media (max-width: 768px) {
    .products-slider--popular .products-slider__name {
        font-size: 20px;
    }
}

@media (max-width: 380px) {
    .products-slider--popular .products-slider__name {
        font-size: 18px;
    }
}

@media (max-width: 340px) {
    .products-slider--popular .products-slider__name {
        font-size: 16px;
    }
}

/* ---------- Одинаковая высота карточек в ряду ----------
   Сетка и лента слайдера и так тянут карточки до самой высокой; содержимое растягиваем,
   а цену и кнопки прижимаем к низу — свободное место (короткое название, один язык и т.п.)
   уходит над ценой, кнопки в ряду стоят на одной линии. */
.products-grid__item > .products-grid__content,
.products-slider__slide > .products-slider__content {
    flex: 1 1 auto;
}

.products-grid__content > .products-grid__meta,
.products-slider__content > .products-slider__meta {
    margin-bottom: auto;
}

/* ---------- Свой отзыв: статус + «Изменить» (карточка книги и ЛК) ---------- */
.rv-state {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 14px;
    font-family: "tt-commons-pro", sans-serif;
}

.rv-state__text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #5F5F5F;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
}

.rv-state--published .rv-state__text {
    color: #005C67;
}

a.rv-state__text {
    transition: color 0.25s ease;
}

a.rv-state__text:hover {
    color: #F6881B;
}

.rv-state__text svg {
    flex: 0 0 auto;
}

/* «Изменить» — как ссылка-действие сайта («Слушать фрагмент»): бирюзовая, подчёркнутая */
.rv-edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    border: 0;
    background: none;
    color: #005C67;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.3px;
    cursor: pointer;
    transition: color 0.25s ease;
}

.rv-edit__text {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.rv-edit svg {
    flex: 0 0 auto;
    transition: transform 0.25s ease;
}

.rv-edit:hover {
    color: #F6881B;
}

.rv-edit:hover svg {
    transform: rotate(-12deg);
}

.rv-edit:active {
    color: #F6881B;
    opacity: 0.8;
}

.rv-edit.is-loading {
    opacity: 0.5;
    cursor: wait;
}

.rv-edit:focus-visible {
    outline: 2px solid #F6881B;
    outline-offset: 2px;
    border-radius: 2px;
}

/* ---------- ЛК «История заказов»: сетка «иконка | кнопка» ----------
   «Оставить отзыв» стоит под «Слушать книгу» и той же ширины; статус — строкой под ними,
   колонки не раздвигает (ширину задают иконка и «Слушать книгу»). */
.order-actions {
    display: inline-grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 14px 12px;
    vertical-align: middle;
}

.order-actions > .order-listen-group,
.order-actions > .order-review {
    display: contents;
}

.order-actions .order-listen-link {
    justify-content: center;
}

.order-actions > .order-no-audio {
    grid-column: 1 / -1;
}

/* поля у́же, чем у «Слушать книгу»: кнопка не раздвигает колонку и тянется до её ширины —
   «Слушать книгу» во всех строках одной ширины, как было */
.order-actions .order-review > .rv-btn {
    grid-column: 2;
    padding: 12px 12px;
    line-height: normal;
}

.order-actions .order-review > .rv-state {
    grid-column: 1 / -1;
    justify-content: flex-end;
    width: 0;
    min-width: 100%;
    flex-wrap: nowrap;
    gap: 10px;
    white-space: nowrap;
}

.order-review .rv-state__text {
    font-size: 14px;
}

/* в ЛК — только карандаш (подсказка «Изменить отзыв»), чтобы строка не была шире кнопки */
.order-review .rv-edit__text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.order-review .rv-edit {
    padding: 4px;
    margin: -4px;
}

/* Выравнивание как у «Слушать книгу» в ячейке: справа → слева (≤1024) → по центру (≤580) */
@media (max-width: 1024px) {
    .order-actions .order-review > .rv-state {
        grid-column: 2;
        justify-content: flex-start;
    }
}

@media (max-width: 580px) {
    .order-actions .order-review > .rv-state {
        grid-column: 1 / -1;
        justify-content: center;
    }
}

/* Второстепенная кнопка: контур, как «В корзине» */
.rv-btn--outline {
    background: transparent;
    color: #005C67;
}

.rv-btn--outline:hover {
    border-color: #F6881B;
    background: transparent;
    color: #F6881B;
}

.rv-btn--outline:active {
    border-color: #005C67;
    background: #005C67;
    color: #FFFFFF;
}

/* ---------- Страница «Отзывы читателей» (/reviews/) ---------- */
.rv-page {
    padding-bottom: 100px;
}

.rv-page__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    /* у h1.container--nopad--inside отступ снизу 100 px (до 1024) и 40 px — подтягиваем итог к заголовку */
    margin: -56px 0 48px;
}

.rv-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
    align-items: stretch;
}

.rv-grid__item {
    min-width: 0;
}

@media (max-width: 1200px) {
    .rv-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 40px;
    }
}

@media (max-width: 1024px) {
    .rv-page__summary {
        margin: 0 0 40px;
    }
}

@media (max-width: 580px) {
    .rv-page__summary {
        margin: -12px 0 28px;
    }
}

@media (max-width: 680px) {
    .rv-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .rv-page {
        padding-bottom: 60px;
    }
}

/* до 480 px у контейнера поля 12 px — подложка ховера (17,5 px за карточкой) уходила бы за край экрана:
   сдвигаем сетку, край подложки — по линии заголовка */
@media (max-width: 480px) {
    .rv-grid {
        padding: 0 17.5px;
    }
}

/* ---------- Приглашение оставить отзыв: «Спасибо за оплату» и подтверждение заказа ---------- */
.payment-success-page__review,
.order-confirm__review {
    max-width: 640px;
    margin: 20px auto 0;
    color: #5F5F5F;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 18px;
    line-height: 1.45;
    text-align: center;
}

.order-confirm__review {
    margin: 12px 0 20px;
    max-width: none;
    font-size: 16px;
    text-align: inherit;
}

@media (max-width: 768px) {
    .payment-success-page__review {
        font-size: 16px;
    }
}

/* ---------- Окно «Оставить отзыв» (как попап отмены заказа: бирюзовое) ---------- */
.rv-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(255, 255, 255, 0.17);
    -webkit-backdrop-filter: blur(31.55px);
    backdrop-filter: blur(31.55px);
    overflow-y: auto;
}

.rv-modal[hidden] {
    display: none;
}

.rv-modal__panel {
    position: relative;
    width: 560px;
    max-width: 100%;
    margin: auto;
    padding: 48px 40px 40px;
    box-sizing: border-box;
    border-radius: 4px;
    background: #005C67;
    color: #FFFFFF;
    font-family: "tt-commons-pro", sans-serif;
}

.rv-modal__close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #FFFFFF;
    opacity: 0.75;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.rv-modal__close:hover {
    transform: scale(1.43);
}

.rv-modal__close:active {
    transform: scale(0.95);
}

.rv-modal__title {
    margin: 0 0 20px;
    font-family: "PT Astra Serif", serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
}

.rv-modal__book {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.rv-modal__book img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 4px;
}

.rv-modal__book-name {
    font-family: "PT Astra Serif", serif;
    font-size: 22px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.2;
}

.rv-field {
    display: block; /* поля — <label>, без этого отступ снизу не работает */
    margin-bottom: 22px;
}

.rv-field__label {
    display: block;
    margin-bottom: 10px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 16px;
    line-height: 1.2;
}

.rv-field__input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 17px;
    border: 1px solid #FFFFFF;
    border-radius: 4px;
    background: #FFFFFF;
    color: #222322;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rv-field__input:focus {
    border-color: #F6881B;
    box-shadow: 0 0 0 1px #F6881B;
}

textarea.rv-field__input {
    min-height: 140px;
    resize: vertical;
}

.rv-field__input::placeholder {
    color: rgba(34, 35, 34, 0.45);
}

.rv-field__hint {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    text-align: right;
}

/* Выбор оценки */
.rv-pick {
    display: flex;
    gap: 6px;
}

.rv-pick__star {
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}

.rv-pick__star svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.rv-pick__star.is-on {
    color: #F6881B;
}

.rv-pick__star:hover {
    transform: scale(1.12);
}

.rv-modal__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin-top: 28px;
}

/* Белая кнопка на бирюзовом (как «Да» в попапе отмены заказа) */
.rv-btn--light {
    border-color: #FFFFFF;
    background: #FFFFFF;
    color: #005C67;
}

.rv-btn--light:hover {
    border-color: #FFFFFF;
    background: transparent;
    color: #FFFFFF;
}

.rv-btn--light:active {
    border-color: #F6881B;
    background: #F6881B;
    color: #FFFFFF;
}

.rv-modal__note {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    line-height: 1.4;
}

.rv-modal__done {
    padding: 12px 0 4px;
    text-align: center;
}

.rv-modal__done-text {
    margin: 0 0 28px;
    font-family: "PT Astra Serif", serif;
    font-size: 24px;
    font-style: italic;
    line-height: 1.3;
}

@media (max-width: 540px) {
    .rv-modal {
        align-items: flex-start;
        padding: 16px 12px;
    }

    .rv-modal__panel {
        padding: 44px 20px 24px;
    }

    .rv-modal__book-name {
        font-size: 19px;
    }

    .rv-pick__star {
        width: 36px;
        height: 36px;
    }
}

/* ---------- Мелочи карточек и карусели ---------- */
.rv-card__stars {
    display: flex;
    line-height: 0;
}

.rv-card__more[hidden] {
    display: none;
}

/* ---------- Главная: «Отзывы читателей» — как блок книг (.products-slider: шапка, отступы) ---------- */
.rv-section--home {
    padding-top: 40px;
    padding-bottom: 60px;
}

.rv-home__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 40px;
}

.rv-home__head.container {
    padding-left: 0;
    padding-right: 0;
}

.rv-home__title {
    margin: 0;
    color: #4F4F4F;
    font-family: "PT Astra Serif", serif;
    font-size: 48px;
    font-style: italic;
    font-weight: 700;
    line-height: 1;
}

/* «Все отзывы» — как «Смотреть все» у слайдера книг */
.rv-home__all {
    flex: 0 0 auto;
    color: #222322;
    font-family: "TT Ramillas", serif;
    font-size: 18px;
    font-style: italic;
    font-weight: 700;
    line-height: 22.4px;
    text-decoration-line: underline;
    text-underline-position: from-font;
    transition: color 0.3s ease;
}

.rv-home__all:hover {
    color: #005C67;
}

@media (max-width: 1024px) {
    .rv-section--home {
        padding-bottom: 40px;
    }
}

@media (max-width: 768px) {
    .rv-section--home {
        padding-bottom: 30px;
    }

    .rv-home__head {
        margin-bottom: 30px;
    }
}

@media (max-width: 680px) {
    .rv-home__title {
        font-size: 24px;
    }

    .rv-home__all {
        font-size: 16px;
    }
}

@media (max-width: 580px) {
    .rv-section--home {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .rv-home__head {
        margin-bottom: 20px;
    }
}

/* ---------- Окно: служебное ---------- */
html.rv-modal-lock {
    overflow: hidden;
}

.rv-modal__error {
    margin: -6px 0 16px;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    color: #E61734;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
}

.rv-modal__error[hidden] {
    display: none;
}

.rv-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}

.rv-pick__star:focus-visible,
.rv-modal__close:focus-visible {
    outline: 2px solid #FFFFFF;
    outline-offset: 2px;
    border-radius: 4px;
}


/* ===== Вводный текст под заголовком страницы: /reviews/ и главная ЛК =====
   Шрифты как у текстовых страниц: обращение — курсив PT Astra Serif, текст — tt-commons-pro 300 */
.page-intro {
    /* только верх и низ: по бокам у .container--nopad--inside margin auto — по нему блок встаёт по сетке страницы */
    margin-top: -8px;
    margin-bottom: 48px;
}

.page-intro > p {
    max-width: 1000px;
    margin: 0;
}

.page-intro__lead {
    margin-bottom: 12px !important;
    color: #363636;
    font-family: "PT Astra Serif", serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 700;
    line-height: 1.3;
}

.page-intro__text {
    color: #222322;
    font-family: "tt-commons-pro", sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1.6;
}

.page-intro__text a {
    color: #005C67;
    text-decoration: underline;
}

.page-intro--center > p {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* ЛК: у приветствия большой отступ снизу (100 / 60 / 40 / 30 px) — с текстом под ним он уходит под текст */
h1.personal-title:has(+ .page-intro--lk) {
    margin-bottom: 24px;
}

.page-intro--lk {
    margin-top: 0;
    margin-bottom: 40px;
}

@media (max-width: 1024px) {
    .page-intro__text {
        font-size: 18px;
    }

    .page-intro--lk {
        margin-bottom: 32px;
    }
}

@media (max-width: 580px) {
    .page-intro,
    .page-intro--lk {
        margin-bottom: 32px;
    }

    h1.personal-title:has(+ .page-intro--lk) {
        margin-bottom: 16px;
    }

    .page-intro__lead {
        font-size: 20px;
    }

    .page-intro__text {
        font-size: 16px;
    }
}

/* /reviews/: у h1 отступ снизу 100 px (до 1024) — текст подтягивается к заголовку, как итог раньше; итог встаёт под текстом */
.page-intro--reviews {
    margin-top: -56px;
}

.page-intro--reviews + .rv-page .rv-page__summary {
    margin-top: 0;
}

@media (max-width: 1024px) {
    .page-intro--reviews {
        margin-top: -8px;
        margin-bottom: 40px;
    }
}

@media (max-width: 580px) {
    .page-intro--reviews {
        margin-bottom: 28px;
    }
}