* {
	-webkit-tap-highlight-color: transparent;
}

.reviews {
	display: block;
	width: 100%;
}

.reviews__swiper-slide {
	display: block;
	min-height: 250px;
	height: 100%;
	padding: 17px 14px;
	background-color: #F9F9F9;
	border-radius: 15px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .1);
	margin-bottom: 8px;
	box-sizing: border-box;
}

.reviews__top {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.reviews__logo {
	display: block;
	width: 48px;
	height: 48px;
	margin-right: 20px;
}

.reviews__row {
	display: flex;
	flex-direction: row;
}

.reviews__col {
	display: flex;
	flex-direction: column;
}

.reviews__name {
	display: flex;
	align-items: center;
	color: #1E1E1E;
	font-size: 24px;
	font-weight: 700;
	line-height: 100%;
	font-family: 'Tilda Sans', Arial, sans-serif;
	margin: 0;
}

.reviews__name p {
	/*width: min-content;*/
	/*min-width: 120px;*/
	margin: 0;
}

.reviews__date {
	display: block;
	color: #1E1E1E;
	font-size: 12px;
	font-weight: 400;
	line-height: 100%;
	font-family: 'Tilda Sans', Arial, sans-serif;
	margin-top: 6px;
}

.reviews__text {
	display: block;
	margin-top: 15px;
	color: #1E1E1E;
	font-size: 16px;
	font-weight: 300;
	line-height: 100%;
	font-family: 'Tilda Sans', Arial, sans-serif;
}

.reviews__empty {
	color: #c1c1c1;
	font-weight: 700;
	font-size: 20px;
	text-align: center;
	margin: 30px;
}

.reviews__rating {
	height: 100%;
	display: flex;
	flex-direction: row;
	margin-left: 15px;
	pointer-events: none;
}

.reviews__rating-item,
.reviews__rating-item svg{
	width: 19px;
	height: 19px;
}

.reviews__rating-item svg path{
	fill: #C1C1C1;
}

.reviews__rating-item_active svg path{
	fill: #FED500;
}

@media (max-width: 1280px) {
	.reviews {
		padding: 0;
	}
}

@media screen and (max-width: 768px) {
	.reviews {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}

@media screen and (max-width: 450px) {
	.reviews__swiper-slide {
		min-height: 200px;
	}

	.reviews__name {
		font-size: 16px;
		align-items: flex-end;
	}

	.reviews__rating {
		margin-left: 9px;
	}
}

@media screen and (max-width: 375px) {
	.reviews__col {
		align-items: center;
		justify-content: center;
		margin-bottom: 5px;
	}

	.reviews__date {
		margin: 5px 0;
	}

	.reviews__row {
		flex-direction: column;
	}
}
/* ============================================================================
   Цветомания · Блок "Фото товара / Фото после доставки" в карточке отзыва
   Добавлено для функции прикрепления фото к отзывам
============================================================================ */

.reviews__photos {
	display: grid;
	gap: 12px;
	margin: 14px 0;
}

.reviews__photos--compare {
	grid-template-columns: 1fr 1fr;
	max-width: 280px;
}

.reviews__photos--product-only,
.reviews__photos--customer-only {
	grid-template-columns: 1fr;
	max-width: 130px;
}

.reviews__photos-item {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.reviews__photos-link {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	border: 1px solid #ececec;
	transition: border-color .2s ease, transform .2s ease;
}

.reviews__photos-link:hover {
	border-color: #A11826;
	transform: translateY(-1px);
}

.reviews__photos-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.reviews__photos-caption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

.reviews__photos-label {
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #A11826;
	line-height: 1.2;
}

.reviews__photos-label--customer {
	color: #888;
}

.reviews__photos-product-name {
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: #1E1E1E;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	transition: border-color .2s ease, color .2s ease;
}

.reviews__photos-product-name:hover {
	border-bottom-color: #A11826;
	color: #A11826;
}

@media screen and (max-width: 480px) {
	.reviews__photos--compare {
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	.reviews__photos-link {
		aspect-ratio: 1 / 1;
	}
	.reviews__photos-label {
		font-size: 9px;
	}
}

@media screen and (max-width: 375px) {
	.reviews__photos--compare {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   Цветомания · Кнопка "Оставить отзыв" — редизайн в брендовом стиле
============================================================================ */

.product__review-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 28px;
	background: #A11826;
	color: #fff;
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}

.product__review-button:hover {
	background: #8a141f;
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(161, 24, 38, .25);
	text-decoration: none;
}

.product__review-button:active {
	transform: translateY(0);
}

.product__review-button::after {
	content: '';
	display: inline-block;
	width: 14px;
	height: 14px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3 7h8M7 3l4 4-4 4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	transition: transform .2s ease;
}

.product__review-button:hover::after {
	transform: translateX(2px);
}

/* ============================================================================
   Цветомания · Модальное окно с формой отзыва
============================================================================ */

.rv-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.rv-modal--open {
	display: block;
}

.rv-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	animation: rv-modal-fade .2s ease;
}

@keyframes rv-modal-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.rv-modal__dialog {
	position: relative;
	max-width: 640px;
	margin: 40px auto;
	padding: 40px 40px 32px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
	font-family: 'Tilda Sans', Arial, sans-serif;
	color: #1a1a1a;
	box-sizing: border-box;
	animation: rv-modal-slide .25s cubic-bezier(.16, 1, .3, 1);
}

@keyframes rv-modal-slide {
	from { transform: translateY(20px); opacity: 0; }
	to   { transform: translateY(0); opacity: 1; }
}

.rv-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	border: none;
	background: transparent;
	color: #888;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background .2s ease, color .2s ease;
	padding: 0;
}

.rv-modal__close:hover {
	background: #f5f5f5;
	color: #A11826;
}

.rv-modal__head {
	text-align: center;
	margin: 0 0 28px;
}

.rv-modal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #A11826;
	margin: 0 0 12px;
}

.rv-modal__eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: #A11826;
	display: inline-block;
}

.rv-modal__title {
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: #1a1a1a;
	margin: 0 0 12px;
}

.rv-modal__lede {
	font-size: 14px;
	line-height: 1.55;
	color: #5a5a5a;
	margin: 0;
}

.rv-modal__body {
	min-height: 100px;
}

.rv-modal__loading,
.rv-modal__error,
.rv-modal__success {
	text-align: center;
	padding: 40px 20px;
	font-size: 15px;
	color: #5a5a5a;
}

.rv-modal__error {
	color: #A11826;
}

.rv-modal__error a {
	color: #A11826;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

/* Внутри модалки форма compact */
.rv-modal__body form {
	display: block;
}

.rv-modal__body form input[type="text"],
.rv-modal__body form input[type="email"],
.rv-modal__body form textarea {
	width: 100%;
	box-sizing: border-box;
}

@media (max-width: 600px) {
	.rv-modal__dialog {
		max-width: calc(100% - 24px);
		margin: 12px auto;
		padding: 32px 20px 24px;
		border-radius: 16px;
	}
	.rv-modal__close {
		top: 8px;
		right: 8px;
	}
}

/* ============================================================================
   Цветомания · File uploader в форме отзыва
============================================================================ */

.rv-form__upload {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 16px 0 20px;
}

.rv-form__upload-label {
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: #1a1a1a;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.rv-form__upload-hint {
	font-size: 12px;
	color: #888;
	font-weight: 400;
}

.rv-form__upload-input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
}

.rv-form__upload-area {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	padding: 24px 16px;
	border: 1.5px dashed #d0d0d0;
	border-radius: 12px;
	background: #fafaf8;
	cursor: pointer;
	transition: border-color .2s ease, background .2s ease;
	text-align: center;
}

.rv-form__upload-area:hover,
.rv-form__upload-area--dragover {
	border-color: #A11826;
	background: #fbecee;
}

.rv-form__upload-icon {
	width: 32px;
	height: 32px;
	color: #A11826;
}

.rv-form__upload-text {
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 14px;
	color: #1a1a1a;
}

.rv-form__upload-text strong {
	color: #A11826;
	font-weight: 500;
}

.rv-form__upload-subtext {
	font-size: 12px;
	color: #888;
}

.rv-form__upload-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rv-form__upload-preview {
	position: relative;
	width: 80px;
	height: 80px;
	border-radius: 10px;
	overflow: hidden;
	background: #fafaf8;
	border: 1px solid #ececec;
}

.rv-form__upload-preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rv-form__upload-preview-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	line-height: 1;
	padding: 0;
	transition: background .2s ease;
}

.rv-form__upload-preview-remove:hover {
	background: #A11826;
}

/* ============================================================================
   Цветомания · ИСПРАВЛЕНИЯ после первого тестирования
   1. Усилить специфичность кнопки "Оставить отзыв" (была розовая F13A5F)
   2. Скрыть дубль заголовка формы внутри модалки
   3. Стилизовать поля формы внутри модалки (стандартный CSS не загружается
      на странице карточки товара, грузится только на /otzyvy/)
   4. Звёзды рейтинга — горизонтальный layout с подписями по краям
   5. Submit-кнопка формы — primary brand
============================================================================ */

/* ---------- 1. Кнопка "Оставить отзыв" — усиленная специфичность ---------- */
a.product__review-button,
.product__review-button {
	background-color: #A11826 !important;
	background-image: none !important;
	color: #fff !important;
}

a.product__review-button:hover,
.product__review-button:hover {
	background-color: #8a141f !important;
}

/* ---------- 2. Скрыть дубль "Уже покупали у нас? Оставьте ваш отзыв!" ---------- */
.rv-modal__body .testimonials-form__title-wrapper {
	display: none;
}

/* ---------- 3. Поля формы внутри модалки ---------- */
.rv-modal__body .testimonials-form,
.rv-modal__body form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.rv-modal__body .testimonials-form__input,
.rv-modal__body input[type="text"],
.rv-modal__body input[type="email"],
.rv-modal__body input[type="tel"],
.rv-modal__body textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 14px 16px;
	border: 1px solid #ececec;
	border-radius: 12px;
	background: #fafaf8;
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 15px;
	line-height: 1.4;
	color: #1a1a1a;
	outline: none;
	transition: border-color .2s ease, background .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.rv-modal__body .testimonials-form__input:focus,
.rv-modal__body input[type="text"]:focus,
.rv-modal__body input[type="email"]:focus,
.rv-modal__body input[type="tel"]:focus,
.rv-modal__body textarea:focus {
	border-color: #A11826;
	background: #fff;
}

.rv-modal__body textarea {
	min-height: 110px;
	resize: vertical;
}

.rv-modal__body .testimonials-form__input::placeholder,
.rv-modal__body input::placeholder,
.rv-modal__body textarea::placeholder {
	color: #999;
	opacity: 1;
}

/* Скрыть стандартные label которые в Битриксе обычно дублируют placeholder */
.rv-modal__body .testimonials-form__messages {
	margin: 0;
}

/* ---------- 4. Звёзды рейтинга — горизонтальный layout ---------- */
.rv-modal__body .input-caption__rating {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 4px 0;
	padding: 0;
}

.rv-modal__body .bee__rating-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}

.rv-modal__body .bee__rating,
.rv-modal__body .bee__rating--editable {
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-items: center;
}

.rv-modal__body .bee__rating__item {
	width: 28px;
	height: 28px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease;
}

.rv-modal__body .bee__rating__item:hover {
	transform: scale(1.1);
}

.rv-modal__body .bee__rating__item svg {
	width: 100%;
	height: 100%;
}

.rv-modal__body .bee__rating__item svg path {
	fill: #d8d8d8;
	transition: fill .15s ease;
}

.rv-modal__body .bee__rating__item--active svg path,
.rv-modal__body .bee__rating__item--js-active svg path {
	fill: #FED500;
}

/* Подписи "Плохо/Хорошо" по краям */
.rv-modal__body .bee__rating-wrapper > span,
.rv-modal__body .bee__rating-wrapper > label {
	font-size: 12px;
	color: #888;
	font-family: 'Tilda Sans', Arial, sans-serif;
}

/* ---------- 5. Submit-кнопка "Оставить отзыв" внизу формы ---------- */
.rv-modal__body .btn,
.rv-modal__body button[type="submit"],
.rv-modal__body input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 32px;
	background: #A11826;
	color: #fff;
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	min-width: 200px;
	margin-top: 8px;
	-webkit-appearance: none;
	appearance: none;
}

.rv-modal__body .btn:hover,
.rv-modal__body button[type="submit"]:hover,
.rv-modal__body input[type="submit"]:hover {
	background: #8a141f;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(161, 24, 38, .25);
}

.rv-modal__body .btn:active,
.rv-modal__body button[type="submit"]:active {
	transform: translateY(0);
}

/* ============================================================================
   ВТОРАЯ ИТЕРАЦИЯ ФИКСОВ
   1. "Плохо"/"Хорошо" — внутри 1й и 5й звёзд (span'ы), накладываются
   2. Success-экран после отправки отзыва
============================================================================ */

/* Скрыть подписи внутри звёзд (они в HTML внутри 1-го и 5-го .bee__rating__item) */
.rv-modal__body .bee__rating__item span {
	display: none !important;
}

/* Подписи "Плохо"/"Хорошо" по краям, через ::before / ::after на .bee__rating */
.rv-modal__body .bee__rating {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 60px;
}

.rv-modal__body .bee__rating::before,
.rv-modal__body .bee__rating::after {
	position: absolute;
	font-size: 12px;
	color: #888;
	font-family: 'Tilda Sans', Arial, sans-serif;
	top: 50%;
	transform: translateY(-50%);
	white-space: nowrap;
}

.rv-modal__body .bee__rating::before {
	content: '\041F\043B\043E\0445\043E';  /* Плохо */
	left: 0;
}

.rv-modal__body .bee__rating::after {
	content: '\0425\043E\0440\043E\0448\043E';  /* Хорошо */
	right: 0;
}

@media (max-width: 480px) {
	.rv-modal__body .bee__rating {
		padding: 0 50px;
	}
	.rv-modal__body .bee__rating__item {
		width: 24px;
		height: 24px;
	}
}

/* ---------- Success-экран ---------- */
.rv-modal__success {
	text-align: center;
	padding: 32px 20px 24px;
}

.rv-modal__success-icon {
	display: inline-block;
	margin-bottom: 16px;
}

.rv-modal__success-title {
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 24px;
	font-weight: 500;
	letter-spacing: -0.02em;
	color: #1a1a1a;
	margin: 0 0 12px;
}

.rv-modal__success-text {
	font-size: 14px;
	line-height: 1.55;
	color: #5a5a5a;
	margin: 0 auto 24px;
	max-width: 400px;
}

.rv-modal__success-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	background: #A11826;
	color: #fff;
	font-family: 'Tilda Sans', Arial, sans-serif;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	border: none;
	border-radius: 999px;
	cursor: pointer;
	transition: background .2s ease;
}

.rv-modal__success-btn:hover {
	background: #8a141f;
}

/* ============================================================================
   ТРЕТЬЯ ИТЕРАЦИЯ ФИКСОВ
   1. Кнопка на мобилке (на 430px viewport) — была width:357 padding:6×12
      Существующее правило карточки товара перебивает мои стили
   2. Фото товара и название — теперь статичные (не <a>, а <div>/<span>)
   3. Фото клиента — одно (uploader ограничен 1 файлом)
============================================================================ */

/* ---------- 1. Кнопка "Оставить отзыв" на мобилке ---------- */
@media (max-width: 768px) {
	a.product__review-button,
	.product__review-button {
		display: inline-flex !important;
		width: auto !important;
		padding: 14px 28px !important;
		min-height: 44px;
		font-size: 14px !important;
		box-sizing: border-box;
		justify-content: center;
		align-items: center;
	}
}

@media (max-width: 480px) {
	a.product__review-button,
	.product__review-button {
		padding: 12px 22px !important;
		font-size: 13px !important;
	}
}

/* ---------- 2. Статичный блок для фото товара (не кликабельный) ---------- */
.reviews__photos-link--static {
	cursor: default;
}

.reviews__photos-link--static:hover {
	border-color: #ececec;  /* убираем hover-эффект */
	transform: none;
}

/* Название товара под фото — теперь span, а не <a> */
span.reviews__photos-product-name {
	cursor: default;
	border-bottom: none;
}

span.reviews__photos-product-name:hover {
	border-bottom: none;
	color: #1E1E1E;  /* нет hover-эффекта */
}

/* ============================================================================
   Toast "Спасибо за отзыв!" — показывается на карточке товара после редиректа
============================================================================ */
.rv-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%) translateY(20px);
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	background: #A11826;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(161, 24, 38, .35);
	font-family: 'Tilda Sans', Arial, sans-serif;
	z-index: 100001;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
	max-width: calc(100% - 40px);
}

.rv-toast--visible {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

.rv-toast__icon {
	width: 28px;
	height: 28px;
	flex-shrink: 0;
}

.rv-toast__title {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	margin-bottom: 2px;
}

.rv-toast__sub {
	font-size: 12px;
	opacity: .85;
	line-height: 1.3;
}

@media (max-width: 480px) {
	.rv-toast {
		bottom: 16px;
		padding: 12px 16px;
		gap: 10px;
		max-width: calc(100% - 24px);
	}
	.rv-toast__title {
		font-size: 13px;
	}
	.rv-toast__sub {
		font-size: 11px;
	}
}