/* Відгуки про магазин на головній (Reviews_Showcase) — у стилі блоків «Останні акції» і «Блог» */
.rs {
	--rs-accent: var(--ds-primary-color, #2abd13);
	--rs-text: #1d2433;
	--rs-muted: #7a8291;
	--rs-soft: #f6f8fa;
	--rs-star: #ffb400;
	display: grid; grid-template-columns: minmax(240px, 1fr) 3fr; gap: 32px; align-items: start; padding: 32px;
}
.rs.content-block { border-radius: 20px; }
.rs-title { display: flex; align-items: center; gap: 10px; color: var(--rs-text); font-size: 26px; font-weight: 700; line-height: 1.2; }
.rs-title svg { flex: 0 0 auto; color: var(--rs-accent); }

/* Загальна оцінка */
.rs-score { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.rs-score-value { color: var(--rs-text); font-size: 46px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.rs-score-side { display: flex; flex-direction: column; gap: 6px; }
.rs-score-total { color: var(--rs-muted); font-size: 14px; }

/* Зірки з дробовим заповненням: --r від 0 до 5 */
.rs-stars {
	position: relative; display: inline-block; flex: none; width: 90px; height: 18px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e3e7ec' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}
.rs-stars > span {
	position: absolute; top: 0; left: 0; bottom: 0; width: calc(var(--r, 0) / 5 * 100%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffb400' d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.6L12 17.3l-5.9 3.3 1.3-6.6-4.9-4.6 6.6-.8z'/%3E%3C/svg%3E") 0 0 / 18px 18px repeat-x;
}
.rs-stars-lg { width: 120px; height: 24px; background-size: 24px 24px; }
.rs-stars-lg > span { background-size: 24px 24px; }

/* Оцінки за критеріями */
.rs-subjects { display: flex; flex-direction: column; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.rs-subjects li { display: grid; grid-template-columns: minmax(0, 1fr) 56px 28px; align-items: center; gap: 10px; color: var(--rs-text); font-size: 14px; line-height: 1.3; }
.rs-subject-name { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.rs-bar { height: 6px; overflow: hidden; border-radius: 3px; background: #edf0f3; }
.rs-bar i { display: block; height: 100%; border-radius: 3px; background: var(--rs-star); }
.rs-subjects b { font-weight: 700; text-align: right; }
.rs-text-intro { margin: 16px 0 0; color: var(--rs-text); font-size: 15px; line-height: 1.5; }

.rs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 24px; }
.rs-all {
	display: inline-flex; align-items: center; height: 52px; padding: 0 26px; border-radius: 26px;
	background: var(--rs-accent); color: #fff !important; font-size: 17px; font-weight: 600; text-decoration: none !important; transition: filter .15s;
}
.rs-all:hover { filter: brightness(.94); }
.rs-write { display: inline-flex; align-items: center; gap: 6px; color: var(--rs-accent) !important; font-size: 15px; font-weight: 600; text-decoration: none !important; }
.rs-write::after { content: ''; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.rs-write:hover { text-decoration: underline !important; }

/* Картки відгуків */
.rs-body { position: relative; min-width: 0; }
.rs-nav { display: flex; gap: 8px; margin-top: 20px; }
.rs-nav[hidden] { display: none; }
.rs-arrow {
	display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0;
	border: 1px solid #e3e7ec; border-radius: 50%; background: #fff; color: var(--rs-text); cursor: pointer; transition: border-color .15s, color .15s;
}
.rs-arrow:hover { border-color: var(--rs-accent); color: var(--rs-accent); }
.rs-list {
	display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 40px) / 3); gap: 20px;
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.rs-list::-webkit-scrollbar { display: none; }
.rs-card {
	position: relative; display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 20px; overflow: hidden;
	border-radius: 16px; background: var(--rs-soft); scroll-snap-align: start;
}
/* Велика лапка в куті */
.rs-card::before {
	content: ''; position: absolute; right: 14px; bottom: 6px; width: 56px; height: 56px; opacity: .07; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%231d2433' d='M4 11.5C4 7.9 6.3 5.3 9.6 4.5l.7 1.6C8.3 6.8 7.2 8.3 7.1 10H10v8H4v-6.5zm10 0c0-3.6 2.3-6.2 5.6-7l.7 1.6c-2 .7-3.1 2.2-3.2 3.9H20v8h-6v-6.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rs-head { display: flex; align-items: center; gap: 12px; }
.rs-avatar { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.rs-who { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.rs-who b { overflow: hidden; color: var(--rs-text); font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.rs-who small { color: var(--rs-muted); font-size: 13px; }
.rs-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.rs-head .rs-stars { width: 75px; height: 15px; background-size: 15px 15px; }
.rs-head .rs-stars > span { background-size: 15px 15px; }
.rs-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 5; color: var(--rs-text); font-size: 15px; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.rs-open .rs-text { display: block; -webkit-line-clamp: unset; }
.rs-more { align-self: flex-start; margin-top: -6px; padding: 0; border: 0; background: none; color: var(--rs-accent); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.rs-more[hidden] { display: none; }
.rs-reply { position: relative; display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding: 10px 12px 10px 14px; border-left: 3px solid var(--rs-accent); border-radius: 0 10px 10px 0; background: #fff; color: var(--rs-text); font-size: 14px; line-height: 1.45; }
.rs-reply b { color: var(--rs-accent); font-size: 13px; font-weight: 700; }
.rs-reply span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; white-space: pre-line; }
.rs-open .rs-reply span { display: block; }

@media (max-width: 1199.98px) {
	.rs { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
	.rs-list { grid-auto-columns: calc((100% - 20px) / 2); }
	.rs-nav { display: none; }
}
@media (max-width: 767.98px) {
	.rs { padding: 16px; }
	.rs.content-block { border-radius: 16px; }
	.rs-title { font-size: 21px; }
	.rs-score-value { font-size: 38px; }
	.rs-all { height: 44px; font-size: 15px; }
	.rs-list { grid-auto-columns: 86%; gap: 12px; padding-bottom: 4px; }
	.rs-card { padding: 16px; }
}

.dark-theme .rs { --rs-text: #f1f3f5; --rs-muted: #9aa1a9; --rs-soft: #1f1f1f; }
.dark-theme .rs-reply, .dark-theme .rs-arrow { background: #161616; border-color: #333; }
.dark-theme .rs-bar { background: #2a2a2a; }