/**
 * Denim Store — product-page reviews carousel.
 * Scroll-snap based: the track is a real horizontal scroller, so swipe works
 * natively on touch and the arrows/dots just drive scrollLeft.
 */

.sr-wrap { margin: 28px 0 8px; }

.sr-head {
	display: flex; align-items: baseline; gap: 10px;
	margin-bottom: 14px; flex-wrap: wrap;
}

.sr-head h2 {
	margin: 0; font-size: 19px; font-weight: 700;
	color: var(--dark, #0A192F); line-height: 1.3;
}

.sr-count { font-size: 13px; color: #6b7280; }

.sr-viewport { overflow: hidden; }

.sr-track {
	display: flex; gap: 14px;
	overflow-x: auto; scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 4px;
	scrollbar-width: none;
}
.sr-track::-webkit-scrollbar { display: none; }

.sr-card {
	flex: 0 0 100%; scroll-snap-align: start;
	background: #fff; border: 1px solid #e6e8eb; border-radius: 14px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 18px rgba(16, 24, 40, .05);
	display: flex; flex-direction: column; gap: 10px;
}

.sr-stars { color: #f5a524; font-size: 16px; letter-spacing: 2px; line-height: 1; }

.sr-text {
	margin: 0; font-size: 15px; line-height: 1.75; color: #1f2937;
	/* Keep every card the same height regardless of review length. */
	display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
	overflow: hidden;
}

.sr-meta {
	display: flex; align-items: center; justify-content: space-between;
	gap: 10px; margin-top: auto; padding-top: 8px; border-top: 1px dashed #eef0f2;
}

.sr-name { font-size: 14px; font-weight: 700; color: var(--dark, #0A192F); }
.sr-date { font-size: 12px; color: #9ca3af; }

.sr-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; }

.sr-arrow {
	width: 34px; height: 34px; border-radius: 50%;
	border: 1px solid #e0e3e7; background: #fff; color: #374151;
	font-size: 20px; line-height: 1; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
	transition: .15s;
}
.sr-arrow:hover { border-color: var(--primary, #00B4D8); color: var(--primary, #00B4D8); }
.sr-arrow:disabled { opacity: .35; cursor: default; }

.sr-dots { display: flex; gap: 6px; }

.sr-dot {
	width: 7px; height: 7px; border-radius: 50%; border: 0; padding: 0;
	background: #d5d9de; cursor: pointer; transition: .2s;
}
.sr-dot.is-active { background: var(--primary, #00B4D8); width: 20px; border-radius: 999px; }

@media (min-width: 720px)  { .sr-card { flex-basis: calc((100% - 14px) / 2); } }
@media (min-width: 1080px) { .sr-card { flex-basis: calc((100% - 28px) / 3); } }

@media (prefers-reduced-motion: reduce) {
	.sr-track { scroll-behavior: auto; }
	.sr-dot, .sr-arrow { transition: none; }
}