/**
 * CP — Produtos Slide
 *
 * O carrossel é uma faixa com scroll-snap. Arrastar no celular, rolar com
 * trackpad e navegar por teclado funcionam sem uma linha de JS; o JS só
 * move a faixa quando as setas são clicadas.
 */

.rkscp-slide {
	--rkscp-slide-por-vez: 4;
	--rkscp-slide-gap: 20px;
	/* Quanto os cards vizinhos invadem a visão, de cada lado. */
	--rkscp-slide-peek: 0px;
	/* Largura do cabeçalho (título + setas). Menor que 100% puxa as setas
	   para dentro, afastando-as da borda da faixa. */
	--rkscp-slide-head-w: 90%;

	position: relative;
}

/* ── Cabeçalho ─────────────────────────────────────────────── */

.rkscp-slide__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 24px;
	width: var(--rkscp-slide-head-w, 90%);
	/* Centralizado: a sobra se divide igualmente nos dois lados. Com 90%,
	   são 5% de cada lado — e não 10% só à direita, que é o que a margem
	   automática ausente produzia. */
	margin-inline: auto;
	/* max-width evita que um valor em px maior que o container estoure a
	   largura e crie rolagem horizontal na página. */
	max-width: 100%;
}

.rkscp-slide__titulo {
	margin: 0;
	padding: 2px 0 2px 14px;
	border-left: 4px solid var(--rkscp-accent, #d81022);
	color: var(--rkscp-ink-900, #161616);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.rkscp-slide__setas {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}

/* ── Setas ─────────────────────────────────────────────────── */

.rkscp-slide__seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rkscp-accent, #d81022);
	color: var(--rkscp-white, #fff);
	cursor: pointer;
	transition: opacity .15s ease, transform .15s ease;
}

.rkscp-slide__seta svg {
	width: 18px;
	height: 18px;
}

.rkscp-slide__seta:hover { transform: scale(1.06); }

/* Fim da faixa: a seta apaga em vez de sumir, para o cabeçalho não
   mudar de largura no meio da navegação. */
.rkscp-slide__seta[disabled] {
	opacity: .3;
	cursor: default;
	transform: none;
}

.rkscp-slide__viewport {
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
}

.rkscp-slide--setas-laterais .rkscp-slide__seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}

.rkscp-slide--setas-laterais .rkscp-slide__seta:hover { transform: translateY(-50%) scale(1.06); }
.rkscp-slide--setas-laterais .rkscp-slide__seta--anterior { left: -21px; }
.rkscp-slide--setas-laterais .rkscp-slide__seta--proximo { right: -21px; }

/* ── Faixa ─────────────────────────────────────────────────── */

.rkscp-slide__track {
	display: flex;
	gap: var(--rkscp-slide-gap);
	width: 100%;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	/* Barra escondida sem perder a rolagem: quem usa trackpad ou toque
	   continua arrastando normalmente. */
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;

	/* O padding abre a faixa onde os vizinhos aparecem. O scroll-padding
	   é o par obrigatório: sem ele o snap encosta o card na borda do
	   viewport e come justamente a invasão que acabamos de criar. */
	padding-inline: var(--rkscp-slide-peek);
	scroll-padding-inline: var(--rkscp-slide-peek);
}

.rkscp-slide__track::-webkit-scrollbar { display: none; }

.rkscp-slide__track:focus-visible {
	outline: 2px solid var(--rkscp-accent, #d81022);
	outline-offset: 4px;
}

/* Qualquer filho da faixa, não só o card de produto: o mesmo carrossel
   serve depoimentos e o que vier depois. */
.rkscp-slide__track > :not(.rkscp-slide__vazio) {
	flex: 0 0 calc(
		(100% - (var(--rkscp-slide-por-vez) - 1) * var(--rkscp-slide-gap))
		/ var(--rkscp-slide-por-vez)
	);
	scroll-snap-align: start;
}

.rkscp-slide__vazio {
	margin: 0;
	padding: 40px 0;
	color: var(--rkscp-ink-500, #6b6b6b);
	font-size: 14px;
}

@media (max-width: 1024px) {
	.rkscp-slide--setas-laterais .rkscp-slide__seta--anterior { left: 4px; }
	.rkscp-slide--setas-laterais .rkscp-slide__seta--proximo { right: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.rkscp-slide__track { scroll-behavior: auto; }
	.rkscp-slide__seta { transition: none; }
	.rkscp-slide__seta:hover { transform: none; }
}