/* Отзывы о магазине на главной. Шапка — тот же .sb-band/.sb-kicker/.sb-stamp
   из theme.css, что и у стены поступлений (wall.css) — витрина читается
   одним набором знаков, тут только своё содержимое. */

.sb-reviews {
	margin: 30px 0 40px;
}

/* Страница «Все отзывы» (extension/soviet/catalog/controller/catalog/reviewsstore.php)
   живёт в обычном .container, не во всю ширину, как на главной — берём
   поменьше отступов сверху/снизу и не спорим с брэдкрамбом над секцией. */
.sb-reviews--page {
	margin: 10px 0 40px;
}

.sb-reviews__empty {
	margin: 24px 0;
	color: var(--sb-muted);
	text-align: center;
}

/* Страница «Все отзывы»: текст не обрезан (в отличие от карусели на
   главной — см. .sb-reviews__text ниже), а письма разной длины: у кого-то
   два абзаца, у кого-то шесть. Сетка (CSS grid) с таким разбросом высот
   не подходит — общая высота строки равняется по самой длинной карточке,
   и под короткими вылезают голые проёмы фона. CSS-колонки (`columns`)
   этой беды не знают: каждая колонка копится независимо, карточка просто
   не разрывается (`break-inside: avoid`). На всю ширину страницы, не
   зауженной колонкой — так просили после того, как одна узкая колонка
   выглядела потерянной на широком экране. */
.sb-reviews__grid {
	columns: 2 480px;
	column-gap: 20px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}

.sb-reviews__grid .sb-reviews__card {
	display: block;
	margin: 0 0 20px;
	break-inside: avoid;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-card);
}

/* Полный текст, без обрезки «шестью строками» — та обрезка нужна только
   карусели на главной, где карточки едут в ряд и должны быть одного роста. */
.sb-reviews__grid .sb-reviews__text {
	display: block;
	overflow: visible;
	-webkit-line-clamp: unset;
}

@media (max-width: 767px) {
	.sb-reviews__grid {
		columns: 1;
	}
}

.sb-reviews__head {
	margin-bottom: 16px;
}

.sb-reviews__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: #fff;
	font-size: 24px;
}

.sb-reviews__title::before {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	background: var(--sb-red);
	content: '';
	-webkit-mask: var(--sb-i-star) center / contain no-repeat;
	mask: var(--sb-i-star) center / contain no-repeat;
}

/* Строка-лозунг забирает остаток ширины и уводит штамп оценки к правому краю —
   тот же приём, что у .sb-wall__lead. */
.sb-reviews__lead {
	flex: 1 1 220px;
	margin: 0;
	color: color-mix(in srgb, var(--sb-paper) 78%, var(--sb-ink));
	font-size: 15px;
}

.sb-reviews__score {
	flex: 0 0 auto;
	text-align: right;
}

.sb-reviews__score .sb-stamp {
	margin: 0 0 4px;
}

/* Кнопка «File Your Report» в шапке страницы «Все отзывы» — сама себе
   строка внизу плашки (flex: 1 0 100% переносит её на новую линию после
   кикера/заголовка/счёта, тот же приём, что у .sb-blog__head .sb-kicker
   в theme.css). Тонкая белая обводка тут терялась на чёрном/красном —
   сплошная красная заливка, тот же кумач, что у клина плашки, читается
   уверенно на любом фоне. */
.sb-reviews__link--head {
	flex: 1 0 100%;
	display: inline-block;
	margin-top: 10px;
	padding: 10px 24px;
	border: var(--sb-rule) solid var(--sb-red);
	background: var(--sb-red);
	color: #fff;
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .12em;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.sb-reviews__link--head:hover,
.sb-reviews__link--head:focus-visible {
	border-color: #fff;
	background: #fff;
	color: var(--sb-red);
}

.sb-reviews__count {
	margin: 0;
	color: color-mix(in srgb, var(--sb-paper) 68%, var(--sb-ink));
	font-family: var(--sb-display);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Строки-карусели — общая .sb-carousel из carousel.css. Своя тут только
   ширина плитки и то, что вторая и следующие строки идут с отступом сверху,
   когда открываются кнопкой «Show More». */
.sb-reviews__row {
	--sb-carousel-item: min(360px, 82vw);

	margin-top: 6px;
}

.sb-reviews__row + .sb-reviews__row {
	margin-top: 16px;
}

.sb-reviews__card {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-card);
}

.sb-reviews__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 10px;
}

.sb-reviews__rating {
	margin: 0;
}

.sb-reviews__date {
	flex: 0 0 auto;
	margin: 0;
	color: var(--sb-muted);
	font-family: var(--sb-display);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Штамп одобрения — общий .sb-stamp, тут только свой отступ и цвет: на
   светлой карточке (не на чёрной плашке) он краснеет сам, не вывороткой. */
.sb-reviews__approved {
	align-self: flex-start;
	margin: 0 0 12px;
	color: var(--sb-red);
}

/* Письмо — до шести строк, дальше обрезаем: карточка не должна тянуться
   до размера самого длинного отзыва, остальные рядом будут пустовать. */
.sb-reviews__text {
	display: -webkit-box;
	flex: 1 1 auto;
	overflow: hidden;
	margin: 0 0 16px;
	color: var(--sb-ink);
	font-size: 14px;
	line-height: 1.6;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
}

/* Подпись — как на настоящем письме, внизу карточки. */
.sb-reviews__sign {
	margin: 0;
	color: var(--sb-muted);
	font-family: var(--sb-display);
	font-size: 12.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sb-reviews__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-top: 24px;
	text-align: center;
}

.sb-reviews__button {
	display: inline-flex;
	align-items: center;
	min-height: var(--sb-control-h);
	padding: 0 30px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-ink);
	color: var(--sb-paper);
	font-family: var(--sb-display);
	font-size: 15px;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .12s, border-color .12s, color .12s, translate .12s, box-shadow .12s;
}

.sb-reviews__button:hover,
.sb-reviews__button:focus-visible {
	border-color: var(--sb-red);
	background: var(--sb-red);
	color: #fff;
	box-shadow: var(--sb-shift) var(--sb-shift) 0 var(--sb-ink);
	translate: calc(var(--sb-shift) * -1) calc(var(--sb-shift) * -1);
}

/* Второстепенные действия («Show More», «View All Reports», «Cancel») —
   не своя придумка, а тот же приём, что у «ALL DEPARTMENTS» под плиткой
   отделов (.sb-dept__all, departments.css) и у остальных «второй кнопки
   рядом с главной» на витрине: мельче основной, тонкая рамка вместо
   заливки, красится сплошь только при наведении. */
.sb-reviews__link {
	display: inline-block;
	padding: 7px 14px 6px;
	border: var(--sb-rule) solid var(--sb-line);
	background: transparent;
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 13px;
	letter-spacing: .12em;
	text-decoration: none;
	text-transform: uppercase;
	cursor: pointer;
}

.sb-reviews__link:hover,
.sb-reviews__link:focus-visible {
	background: var(--sb-ink);
	color: var(--sb-paper);
	text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
	.sb-reviews__button {
		transition: none;
	}
}

/* Форма подачи — модальное окно: сайт затемняется, письмо выходит по
   центру. Тот же приём, что у полноэкранного меню на мобильном
   (.sb-nav__scrim/.sb-nav__panel, menu.css) — фон и центрирование на
   .sb-reviews__write, окно — сама .sb-reviews__form поверх затемнения.
   Свёрнута по умолчанию атрибутом `hidden` (reviewsstore.js его снимает),
   `:not([hidden])` переключает display, потому что `hidden` в разметке
   и `display: flex` в CSS иначе спорят за приоритет. */
.sb-reviews__write {
	display: none;
	position: fixed;
	z-index: 10050;
	inset: 0;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.sb-reviews__write:not([hidden]) {
	display: flex;
}

.sb-reviews__write-scrim {
	position: absolute;
	inset: 0;
	background: rgb(0 0 0 / 55%);
}

.sb-reviews__form {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 560px;
	max-height: calc(100vh - 40px);
	padding: 26px;
	overflow-y: auto;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-card);
}

.sb-reviews__form-close {
	position: absolute;
	top: 10px;
	right: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: var(--sb-rule) solid var(--sb-ink);
	background: var(--sb-paper);
	color: var(--sb-ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

.sb-reviews__form-close:hover,
.sb-reviews__form-close:focus-visible {
	background: var(--sb-ink);
	color: var(--sb-paper);
}

html.sb-reviews-write-open {
	overflow: hidden;
}

/* Форма на светлой карточке, не на чёрной плашке — .sb-kicker там по
   умолчанию вывороткой (белым), тут красит себя в красный, как у блога
   (см. .sb-blog__comments .sb-kicker в этом же файле темы). */
.sb-reviews__form .sb-kicker {
	margin-bottom: 6px;
	color: var(--sb-red);
}

.sb-reviews__form-title {
	margin: 0 0 10px;
	padding-right: 40px;
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.sb-reviews__form-lead {
	margin: 0 0 18px;
	color: var(--sb-muted);
	font-size: 13.5px;
	line-height: 1.5;
}

.sb-reviews__field {
	margin-bottom: 16px;
}

.sb-reviews__field label {
	display: block;
	margin-bottom: 6px;
	color: var(--sb-ink);
	font-family: var(--sb-display);
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sb-reviews__input {
	width: 100%;
	padding: 10px 12px;
	border: var(--sb-rule) solid var(--sb-line-soft);
	background: var(--sb-paper);
	color: var(--sb-ink);
	font-size: 14px;
}

.sb-reviews__input:focus-visible {
	outline: 2px solid var(--sb-red);
	outline-offset: 1px;
}

textarea.sb-reviews__input {
	resize: vertical;
}

.sb-reviews__error {
	margin: 6px 0 0;
	color: var(--sb-red);
	font-size: 12.5px;
}

.sb-reviews__error:empty {
	display: none;
}

/* Поле-приманка: спрятано так, как боты обычно не проверяют (не display:none,
   его читают более осторожные скрипты) — вынесено за экран, нулевого
   размера, без доступа с клавиатуры. Живой человек его никогда не увидит. */
.sb-reviews__field--honey {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

.sb-reviews__form-message {
	margin: 0 0 16px;
	padding: 10px 12px;
	border: var(--sb-rule) solid var(--sb-ink);
	font-size: 13.5px;
}

.sb-reviews__form-message--success {
	border-color: var(--sb-red);
	color: var(--sb-red);
}

.sb-reviews__form-message--error {
	color: var(--sb-red);
}

.sb-reviews__form-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}