/* ============================================================
   MULTIVEGETAL — Testimonials (V1)
   Carrossel próprio (scroll-snap). Tokens herdados do Design
   System, com fallback embutido.
   ============================================================ */

.mv-tst {
	--mv-tst-cols:   3;
	--mv-tst-gap:    20px;
	--mv-tst-accent: var(--color-accent, #D5B68D);

	--mv-c-primary:  var(--color-primary, #4A5E56);
	--mv-c-secondary:var(--color-secondary, #80967C);
	--mv-c-text:     var(--color-text, #1A1A1A);
	--mv-c-muted:    var(--color-text-muted, #5a5a5a);
	--mv-c-border:   var(--color-border, #e0ddd8);
	--mv-c-bg-soft:  var(--color-bg-soft, #f8f6f2);
	--mv-font:       var(--font-primary, 'Poppins', sans-serif);
	--mv-trans:      var(--transition-base, 250ms ease);

	position: relative;
	font-family: var(--mv-font);
	width: 100%;
}

/* ---------- VIEWPORT + TRACK ---------- */
.mv-tst__viewport {
	overflow: hidden;
	width: 100%;
}
.mv-tst__track {
	display: flex;
	gap: var(--mv-tst-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;            /* Firefox */
	padding-bottom: 4px;
}
.mv-tst__track::-webkit-scrollbar { display: none; }  /* WebKit */
.mv-tst__track { cursor: grab; }
.mv-tst__track.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;   /* não brigar com o arraste */
	scroll-behavior: auto;
	user-select: none;
}

/* ---------- SLIDE ---------- */
.mv-tst__slide {
	flex: 0 0 calc((100% - (var(--mv-tst-cols) - 1) * var(--mv-tst-gap)) / var(--mv-tst-cols));
	min-width: 0;
	scroll-snap-align: start;
	display: flex;
}

/* ---------- CARD ---------- */
.mv-tst__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: clamp(18px, 2vw, 28px);
	background-color: #fff;
	border: 1px solid var(--mv-c-border);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(74,94,86,.08), 0 1px 2px rgba(74,94,86,.05);
	transition: box-shadow var(--mv-trans), transform var(--mv-trans);
}
.mv-tst__card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(74,94,86,.12), 0 4px 12px rgba(74,94,86,.07);
}

/* Aspa decorativa. */
.mv-tst__quote {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 3.5rem;
	line-height: 0.6;
	height: 0.5em;
	color: var(--mv-tst-accent);
	opacity: 0.6;
	user-select: none;
}

/* ---------- ESTRELAS ---------- */
.mv-tst__stars {
	display: inline-flex;
	gap: 2px;
}
.mv-tst__star { font-size: 1rem; line-height: 1; letter-spacing: -1px; }
.mv-tst__star.is-full  { color: #E8B84B; }
.mv-tst__star.is-empty { color: var(--mv-c-border); }

/* ---------- TEXTO ---------- */
.mv-tst__text {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--mv-c-muted);
	margin: 0;
	flex: 1 1 auto;
}

/* ---------- RODAPÉ (nome + produto) ---------- */
.mv-tst__footer {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 4px;
	padding-top: 14px;
	border-top: 1px solid var(--mv-c-border);
}
.mv-tst__name {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--mv-c-text);
}
.mv-tst__product {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mv-c-secondary);
}

/* ---------- SETAS ---------- */
.mv-tst__arrow {
	position: absolute;
	top: calc(50% - 22px);          /* desconta a faixa de dots abaixo */
	transform: translateY(-50%);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	border: 1px solid var(--mv-c-border);
	background-color: #fff;
	color: var(--mv-c-primary);
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(74,94,86,.12);
	transition: background-color var(--mv-trans), color var(--mv-trans), opacity var(--mv-trans), transform var(--mv-trans);
}
.mv-tst__arrow:hover {
	background-color: var(--mv-tst-accent);
	border-color: var(--mv-tst-accent);
	color: var(--mv-c-text);
}
.mv-tst__arrow:focus-visible { outline: 2px solid var(--mv-tst-accent); outline-offset: 2px; }
.mv-tst__arrow--prev { left: -10px; }
.mv-tst__arrow--next { right: -10px; }
.mv-tst__arrow[disabled] { opacity: 0; pointer-events: none; }

/* ---------- DOTS ---------- */
.mv-tst__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}
.mv-tst__dot {
	width: 8px;
	height: 8px;
	border-radius: 9999px;
	border: none;
	padding: 0;
	background-color: var(--mv-c-border);
	cursor: pointer;
	transition: background-color var(--mv-trans), transform var(--mv-trans);
}
.mv-tst__dot.is-active {
	background-color: var(--mv-tst-accent);
	transform: scale(1.35);
}
.mv-tst__dot:focus-visible { outline: 2px solid var(--mv-tst-accent); outline-offset: 2px; }

.mv-tst__empty {
	text-align: center;
	color: var(--mv-c-muted);
	padding: 32px 0;
}

/* ============================================================
   RESPONSIVO — fallback caso o CSS por-dispositivo do Elementor
   não carregue (breakpoints alinhados ao Elementor).
   ============================================================ */
@media (max-width: 1024px) {
	.mv-tst { --mv-tst-cols: 2; }
}
@media (max-width: 767px) {
	.mv-tst { --mv-tst-cols: 1; }
	/* No mobile as setas saem das bordas para não cobrir o card. */
	.mv-tst__arrow--prev { left: 2px; }
	.mv-tst__arrow--next { right: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.mv-tst__track { scroll-behavior: auto; }
	.mv-tst__card, .mv-tst__arrow, .mv-tst__dot { transition: none; }
}