/**
 * Storefront Reviews & CTA — boudoir spec hex. The CTA buttons are <a>, so
 * their colours/backgrounds are written 2-class to beat the Elementor kit's
 * `a { color }` bleed.
 */

/* ============================================================ Testimonials */
.sr__head { text-align: center; max-width: 640px; margin: 0 auto clamp(36px, 5vw, 56px); }
.sr__eyebrow { margin: 0 0 14px; font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #E0102F; }
.sr__title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(30px, 4vw, 46px); font-weight: 600; line-height: 1.1; color: #F5EDE7; }
.sr__subtitle { margin: 16px auto 0; max-width: 540px; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: #A98D96; }

.sr__grid { display: grid; gap: 28px; grid-template-columns: repeat(3, minmax(0, 1fr)); }

.sr-card {
	display: flex; flex-direction: column; padding: 36px;
	border-radius: 20px; background: linear-gradient(180deg, #1E1218 0%, #140B10 100%);
	border: 1px solid rgba(245, 237, 231, .08);
}
.sr-card__stars { display: inline-flex; gap: 3px; margin-bottom: 24px; }
.sr-star { fill: none; stroke: #4A3540; }
.sr-star.is-on { fill: #C9A15A; stroke: #C9A15A; }

.sr-card .sr-card__quote { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: 19px; font-weight: 500; line-height: 1.55; color: #F5EDE7; }
.sr-card__rule { display: block; height: 1px; margin: 28px 0 18px; background: rgba(245, 237, 231, .12); }
.sr-card .sr-card__meta { font-family: 'Manrope', system-ui, sans-serif; font-size: 13.5px; letter-spacing: .01em; color: #8B7078; margin-top: auto; }

@media (max-width: 1024px) { .sr__grid:not([style*="grid-template-columns"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .sr__grid:not([style*="grid-template-columns"]) { grid-template-columns: 1fr; } }

/* ================================================================ CTA band */
.sr-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 40px;
	padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 56px);
	border-radius: 24px; border: 1px solid rgba(224, 16, 47, .5);
	background: radial-gradient(130% 190% at 82% 50%, rgba(224, 16, 47, .14), #120A0F 58%);
}
.sr-cta__text { flex: 1 1 auto; min-width: 0; }
.sr-cta__eyebrow { margin: 0 0 12px; font-family: 'Manrope', system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: #E0102F; }
.sr-cta__title { margin: 0; font-family: 'Playfair Display', Georgia, serif; font-size: clamp(26px, 3vw, 36px); font-weight: 600; line-height: 1.1; color: #F5EDE7; }
.sr-cta__desc { margin: 16px 0 0; max-width: 540px; font-family: 'Manrope', system-ui, sans-serif; font-size: 15px; line-height: 1.65; color: #A98D96; }

.sr-cta__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sr-cta .sr-cta__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 16px 30px; border-radius: 999px; text-decoration: none; cursor: pointer;
	font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 700; white-space: nowrap;
	transition: transform 150ms cubic-bezier(.22, 1, .36, 1), box-shadow 150ms ease, background 150ms ease, border-color 150ms ease;
}
.sr-cta .sr-cta__btn--primary { background: #E0102F; color: #FFF6F0; border: 0; letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 44px rgba(224, 16, 47, .5); }
.sr-cta .sr-cta__btn--primary:hover { background: #F03A50; color: #FFF6F0; transform: translateY(-1px); box-shadow: 0 0 56px rgba(224, 16, 47, .62); }
.sr-cta .sr-cta__btn--ghost { background: transparent; color: #F5EDE7; border: 1px solid rgba(245, 237, 231, .24); letter-spacing: .02em; }
.sr-cta .sr-cta__btn--ghost:hover { border-color: rgba(245, 237, 231, .5); color: #F5EDE7; }

@media (max-width: 860px) {
	.sr-cta { flex-direction: column; align-items: flex-start; }
	.sr-cta__actions { width: 100%; }
	.sr-cta .sr-cta__btn { flex: 1 1 auto; }
}

/* Mobile: reviews become a horizontal swipe slider instead of a tall stack.
   !important beats the Elementor "columns" inline grid-template-columns. */
@media (max-width: 767px) {
	.sr__grid {
		display: grid !important;
		grid-auto-flow: column !important;
		grid-auto-columns: 85% !important;
		grid-template-columns: none !important;
		gap: 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 12px;
	}
	.sr__grid::-webkit-scrollbar { display: none; }
	.sr__grid > .sr-card { scroll-snap-align: start; }
}