/* ==========================================================================
   Produtos do protocolo — Figma 3464:2690 (1440x1048)
   Coluna centralizada, gap 48, padding 0/112/136/112, fundo #FAF7F2:
   cabeçalho (806x230) · cartões (1216x458) · fechamento + CTA (1216x128).

   Os seletores vêm como ".vp-products .vp-products__x" (0,2,0): assim os
   ajustes vencem as classes compartilhadas do base.css (.vp-h2, .vp-badge__*,
   .vp-btn) sem depender da ordem das folhas. O reset do base.css é :where()
   (especificidade zero) e não interfere.

   Larguras: o Figma arredonda para cima a caixa de texto HUG (o Chrome mede
   "Mais vendido" com 78.02, o Figma com 79) e isso empurra os vizinhos. As
   pílulas, os rótulos e o botão usam calc-size(fit-content, round(up, size,
   1px)) para repetir o arredondamento sem fixar larguras no CSS (Chrome
   129+; nos outros navegadores fica a largura natural, fração de pixel
   menor).

   Alturas de linha: o Figma arredonda a entrelinha para o pixel inteiro
   (52.8 → 53, 25.2 → 25): é isso que dá as caixas de 106 e 125 da spec. No
   desktop usamos os valores arredondados; abaixo de 1024 voltam os do DS.
   ========================================================================== */

.vp-products {
	background: var(--vp-cream);
}

.vp-products .vp-products__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
	padding-bottom: 136px;
}

/* --------------------------------------------------------------------------
   Cabeçalho — 3463:2348, 806 de largura (badge, gap 24, títulos gap 12)
   -------------------------------------------------------------------------- */

.vp-products .vp-products__head {
	width: 100%;
	max-width: 806px;
}

/* Pílulas e rótulos com a largura arredondada do Figma (ver o topo). */
.vp-products .vp-badge__label,
.vp-products .vp-badge__text,
.vp-products .vp-products__tag,
.vp-products .vp-products__highlight {
	width: calc-size(fit-content, round(up, size, 1px));
}

/* Badge 3463:2350 (282x32): rótulo de 142 (10 + 122 + 10) e subtítulo de
   107. No Figma o texto de 14px assenta ~1.75px mais baixo que no Chrome
   (medido pelo centróide do traço). O rótulo tem fundo, então desce pelo
   padding; o subtítulo, por deslocamento relativo — a pílula não se move.
   O texto encosta no padding, como no Figma (a sobra fica à direita). */
.vp-products .vp-badge__label {
	justify-content: flex-start;
	padding-top: 3.5px;
}

.vp-products .vp-badge__text {
	position: relative;
	top: 1.75px;
}

/* 3463:2352 — Display/48 Regular (.vp-h2), caixa de 106 (2 x 53). O traço
   assenta 1px mais baixo que no Chrome. O apoio 3463:2353 é o .vp-lead. */
.vp-products .vp-products__title {
	position: relative;
	top: 1px;
	line-height: 53px;
}

/* --------------------------------------------------------------------------
   Cartões — "Products Cards Row" 3473:4578: quatro de 292, gap 16, todos da
   altura do mais alto (h:FILL).
   -------------------------------------------------------------------------- */

/* Envolve a lista e, no mobile, os pontos do carrossel. */
.vp-products .vp-products__carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.vp-products .vp-products__list {
	display: flex;
	align-items: stretch;
	gap: 16px;
	width: 100%;
}

/* 3473:4579 — branco, borda interna #F8F8F5, raio 16, padding 12/12/24/12,
   gap 20. A borda do Figma é interna: o padding do CSS desconta o 1px. */
.vp-products .vp-products__card {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	padding: 11px 11px 23px;
	border: 1px solid var(--vp-offwhite);
	border-radius: 16px;
	background: var(--vp-white);
}

/* "Product Photo Placeholder" 3473:4580 — 268x201, raio 12, #F8F4EC, com
   clip. O render do produto fica onde a spec diz, em % da moldura, para
   acompanhar quando o cartão encolhe. */
.vp-products .vp-products__frame {
	position: relative;
	flex: none;
	width: 100%;
	aspect-ratio: 268 / 201;
	overflow: hidden;
	border-radius: 12px;
	background: var(--vp-cream-2);
}

/* 3473:4613 — a moldura do Maxogaine é branca. */
.vp-products .vp-products__frame--white {
	background: var(--vp-white);
}

.vp-products .vp-products__photo {
	position: absolute;
	top: calc(100% * var(--vp-prod-y) / 201);
	left: calc(100% * var(--vp-prod-x) / 268);
	width: calc(100% * var(--vp-prod-w) / 268);
	max-width: none;
	height: auto;
}

/* No Figma a borda do frame (#F8F8F5, interna) é desenhada por cima da foto. */
.vp-products .vp-products__frame::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--vp-offwhite);
	border-radius: inherit;
	pointer-events: none;
}

/* "Product Card Info" 3473:4582 — padding 0/12, gap 16.
   Quando os quatro cartões encolhem (1280–1439), "TÔNICO CAPILAR" +
   "Fórmula exclusiva" (105 + 8 + 104 = 217) deixariam de caber numa linha
   com o padding 12. O padding lateral é proporcional à largura do cartão
   (% do conteúdo do cartão, que é 268 a 1440): 12 a 1440, ~2 a 1280 e ~1
   a 1280 com a barra de rolagem do Windows (17px) — e não depende do
   100vw, que conta a barra. */
.vp-products .vp-products__info {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0 clamp(0px, 25% - 55px, 12px);
}

/* "Badges Row" 3473:4583 — etiqueta à esquerda, destaque à direita. */
.vp-products .vp-products__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 8px;
}

/* 3473:4584 — 24 de altura, padding 8, raio 8, #F1E9DD; texto 12/16.8 600
   #845D32. No Figma a caixa do texto tem 8 (a altura da versal), então o
   traço assenta 1.5px mais baixo que o centro do Chrome: o padding de cima
   (3 = 1.5 de deslocamento) desce o texto sem mudar a pílula. */
.vp-products .vp-products__tag {
	display: inline-flex;
	align-items: center;
	height: 24px;
	padding: 3px 8px 0;
	border-radius: 8px;
	background: var(--vp-sand);
	color: var(--vp-bronze);
	font-size: 12px;
	line-height: 16.8px;
	font-weight: 600;
	white-space: nowrap;
}

/* "Metric Highlight" 3473:4597 — 14/19.6 #503629, centrado na linha e
   encostado à direita (caixa de 79 no Figma, texto alinhado à esquerda
   dentro dela). O traço do Figma fica 1.5px abaixo do centro do Chrome. */
.vp-products .vp-products__highlight {
	position: relative;
	top: 1.5px;
	color: var(--vp-brown);
	font-size: 14px;
	line-height: 19.6px;
	font-weight: 400;
	white-space: nowrap;
}

/* "Text Content" 3473:4587 — nome e descrição, gap 8. */
.vp-products .vp-products__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vp-products .vp-products__name {
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
}

/* 18/25.2 #636569 — 25 por linha no Figma (5 linhas = 125). */
.vp-products .vp-products__desc {
	color: var(--vp-text);
	font-size: 18px;
	line-height: 25px;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Fechamento — "CTA Section" 3464:2736: frase 20/28 600 centralizada em duas
   linhas, gap 24, botão primário Large (3582:2123).
   -------------------------------------------------------------------------- */

.vp-products .vp-products__footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

.vp-products .vp-products__closing {
	width: 100%;
	color: var(--vp-ink);
	font-size: 20px;
	line-height: 28px;
	font-weight: 600;
	text-align: center;
}

/* 189x48 no Figma (@625.5): 24 + rótulo de 141 + 24. O .vp-btn (borda 1 +
   padding 23) com o rótulo de 140.35 do Chrome daria 188.35: a largura
   arredondada para cima repõe os 189 e o rótulo encosta no padding, em
   649.5 como no desenho. No mobile volta a largura total (fim da folha). */
.vp-products .vp-products__cta {
	justify-content: flex-start;
	width: calc-size(fit-content, round(up, size, 1px));
}

/* Pontos do carrossel (criados pelo products.js): só no mobile. */
.vp-products .vp-products__dots {
	display: none;
}

/* ==========================================================================
   Responsivo (o Figma só tem o desktop 1440)
   ========================================================================== */

/* 1280–1439: os quatro cartões seguem lado a lado e encolhem (o padding
   do texto afina junto, ver "Product Card Info").
   Abaixo de 1280 quatro colunas ficariam estreitas demais: grade 2x2
   centrada na largura do cabeçalho (806), para os cartões não passarem de
   ~390 e as fotos não crescerem além do render @4x. O padding do texto
   volta a 12 daqui para baixo (2x2 e carrossel). */
@media (max-width: 1279px) {
	.vp-products .vp-products__list {
		flex-wrap: wrap;
		max-width: 800px;
	}

	.vp-products .vp-products__card {
		flex: 0 0 calc((100% - 16px) / 2);
	}

	.vp-products .vp-products__info {
		padding-inline: 12px;
	}
}

/* --------------------------------------------------------------------------
   Tablet (DS: margem 48, gutter 24): 2x2 com gutter 24, entrelinhas do DS,
   títulos equilibrados. A frase de fechamento solta a quebra manual (a 768
   a segunda linha não cabe em 20px) e desce para 18/25.2.
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.vp-products .vp-products__inner {
		padding-bottom: 96px;
	}

	.vp-products .vp-products__title {
		top: 0;
		line-height: 52.8px;
		text-wrap: balance;
	}

	.vp-products .vp-products__lead,
	.vp-products .vp-products__closing {
		text-wrap: balance;
	}

	.vp-products .vp-products__list {
		gap: 24px;
	}

	.vp-products .vp-products__card {
		flex-basis: calc((100% - 24px) / 2);
	}

	.vp-products .vp-products__desc {
		line-height: 25.2px;
	}

	.vp-products .vp-products__closing {
		max-width: 640px;
		font-size: 18px;
		line-height: 25.2px;
	}

	.vp-products .vp-products__br {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Mobile 390 (DS: margem 20, gutter 16, seção 64): carrossel horizontal com
   scroll-snap — um cartão por vez (~85% da largura, no máximo 320), o
   próximo aparecendo na borda, sem barra. Os pontos embaixo mostram a
   posição. Títulos 40/44, apoio 18/25.2, CTA de largura total.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-products .vp-products__inner {
		gap: 40px;
		padding-bottom: 64px;
	}

	/* 40/44 e o apoio 18/25.2 vêm do .vp-h2/.vp-lead; só a entrelinha do
	   tablet (acima) precisa voltar. */
	.vp-products .vp-products__title {
		line-height: 44px;
	}

	/* A lista e os pontos ficam juntos, a 24 um do outro. */
	.vp-products .vp-products__carousel {
		align-items: stretch;
		gap: 24px;
	}

	/* O trilho vai de borda a borda da tela; o primeiro cartão continua
	   alinhado à margem do DS. A faixa de 4px acima e abaixo dos cartões
	   (padding que a margem negativa desconta) é onde fica o contorno de
	   foco: o trilho rolável recebe foco pelo teclado (as setas trocam de
	   cartão) e, por fora, o contorno sairia da tela nas laterais. */
	.vp-products .vp-products__list {
		flex-wrap: nowrap;
		gap: 16px;
		width: auto;
		max-width: none;
		margin: -4px calc(-1 * var(--vp-gutter));
		padding: 4px var(--vp-gutter);
		scroll-padding-inline: var(--vp-gutter);
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.vp-products .vp-products__list::-webkit-scrollbar {
		display: none;
	}

	.vp-products .vp-products__list:focus-visible {
		outline-offset: -2px;
	}

	.vp-products .vp-products__card {
		flex: 0 0 min(85%, 320px);
		scroll-snap-align: start;
	}

	/* Pontos: 8px (#D6D1CA), o ativo vira pílula de 24 (#BC955C). Cada
	   botão tem 44x44 de alvo de toque; a margem negativa tira a sobra da
	   altura visual (o ponto fica a 24 do cartão). */
	.vp-products .vp-products__dots {
		display: flex;
		justify-content: center;
		margin-block: -18px;
	}

	.vp-products .vp-products__dot {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
	}

	.vp-products .vp-products__dot::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 9999px;
		background: var(--vp-stone);
		transition:
			width 200ms var(--vp-ease),
			background-color 200ms var(--vp-ease);
	}

	.vp-products .vp-products__dot[aria-current="true"]::before {
		width: 24px;
		background: var(--vp-gold);
	}

	/* O contorno de foco abraça o ponto, não o quadrado de 44. */
	.vp-products .vp-products__dot:focus-visible {
		outline: none;
	}

	.vp-products .vp-products__dot:focus-visible::before {
		outline: 2px solid var(--vp-bronze);
		outline-offset: 3px;
	}

	.vp-products .vp-products__closing {
		max-width: none;
	}

	/* CTA de largura total (.vp-btn--block-mobile), rótulo centralizado. */
	.vp-products .vp-products__cta {
		justify-content: center;
		width: 100%;
	}
}