.wcrs {
	--wcrs-star: #e0a100;
	--wcrs-star-off: color-mix(in srgb, currentColor 20%, transparent);
	--wcrs-line: color-mix(in srgb, currentColor 16%, transparent);
	position: relative;
}

.wcrs__swiper { padding: 2px; margin: -2px; }
.wcrs .swiper-slide { height: auto; display: flex; }

.wcrs__slide {
	width: 100%;
	margin: 0;
	padding: 1.5rem;
	border: 1px solid var(--wcrs-line);
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	box-sizing: border-box;
}

.wcrs__stars { display: flex; gap: 2px; }
.wcrs__star svg { width: 1.1em; height: 1.1em; display: block; fill: var(--wcrs-star-off); }
.wcrs__star.is-on svg { fill: var(--wcrs-star); background-color: #219653; padding: 2px;}

.wcrs__text { margin: 0; padding: 0; border: 0; flex: 1; line-height: 1.55; }

.wcrs__meta { display: flex; align-items: center; gap: .75rem; font-size: .875em; }
.wcrs__avatar-img { border-radius: 50%; display: block; width: 44px; height: 44px; }
.wcrs__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.wcrs__author { font-weight: 600; }
.wcrs__verified, .wcrs__date { opacity: .7; font-size: .92em; }
.wcrs__verified::before { content: "✓ "; }
.wcrs__product { opacity: .85; text-decoration: underline; text-underline-offset: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Controls */
.wcrs__controls { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.wcrs__dots { display: flex; gap: 8px; flex-wrap: wrap; }
.wcrs__dot {
	width: 10px; height: 10px; padding: 0; border-radius: 50%;
	border: 1.5px solid currentColor; background: transparent; cursor: pointer; opacity: .5;
}
.wcrs__dot.is-active { background: currentColor; opacity: 1; }
.wcrs__arrows { display: flex; gap: .5rem; margin-left: auto; }
.wcrs__arrow {
	width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
	border: 1px solid var(--wcrs-line); background: transparent; color: inherit;
	display: grid; place-items: center; padding: 0;
}
.wcrs__arrow:hover:not(.is-disabled) { border-color: currentColor; }
.wcrs__arrow.is-disabled { opacity: .3; cursor: default; }
.wcrs__arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.wcrs__dot:focus-visible, .wcrs__arrow:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.wcrs__dots.is-locked, .wcrs__arrow.is-locked { display: none; }

.wcrs__empty { opacity: .7; }

.wcrs {
	--wcrs-per-view: 4;
	margin-top: -4.5rem;
}
.wcrs__controls {
	margin-bottom: 2rem;
}

.wcrs__slide {
	border-radius: 15px;
	background: #FFF;
	box-shadow: 0 2px 4px 0 rgba(7, 4, 146, 0.10), 0 24px 60px 0 rgba(6, 47, 125, 0.05), 0 12px 24px 0 rgba(27, 59, 119, 0.05);
}