/* ==========================================================================
   Barra fixa de CTA — Figma 3478:2355 (desktop, 1440x80) / 3456:3224
   (mobile da LP Vitruvian, 390x80)

   Presa ao pé da janela, de borda a borda; o conteúdo fica na faixa de 1440
   com as margens do DS. O body já reserva 80 + 48px embaixo (base.css), então
   nada da página fica escondido atrás dela — nem no iPhone, onde a barra
   cresce com a área segura (80 + 34 < 128).
   ========================================================================== */

.vp-sticky-cta {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900; /* abaixo só do "Pular para o conteúdo" (1000) */
	/* iPhone sem botão: a barra desce até a borda e o conteúdo sobe. */
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--vp-brown);
	color: var(--vp-white);
}

/* O contorno de foco do tema é #845D32 — some sobre o #503629. */
.vp-sticky-cta :focus-visible {
	outline-color: var(--vp-white);
}

/* 3478:2355 — row SPACE_BETWEEN, cross CENTER, padding 0/112. O gap não
   existe no Figma (sobram 423px entre os grupos a 1440): é só o mínimo
   quando a janela aperta. As laterais nunca ficam menores que a área
   segura (iPhone deitado, com viewport-fit=cover). */
.vp-sticky-cta__inner {
	--vp-sticky-lado: var(--vp-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	max-width: var(--vp-max);
	height: var(--vp-sticky-h);
	margin-inline: auto;
	padding-right: max(var(--vp-sticky-lado), env(safe-area-inset-right, 0px));
	padding-left: max(var(--vp-sticky-lado), env(safe-area-inset-left, 0px));
}

/* --------------------------------------------------------------------------
   Benefícios — "Benefits List" 3478:2356: row gap 12, textos 18/25.2 600
   brancos e pontos #D4B48A de 3px entre eles.
   Quebra + altura de uma linha + overflow: quando a janela aperta, o
   benefício que não cabe desce para a segunda linha e fica escondido
   inteiro (nunca cortado no meio), em vez de empurrar o botão.
   O gap é 12.33 e não 12: o Figma arredonda para cima a caixa de cada
   texto (88/136/133) e o Chrome mede 87.5/135.2/132.1; com 12.33 os
   pontos e textos caem a menos de 0.4px das posições do desenho
   (212 / 227 / 375 / 390) sem fixar a largura de nenhum texto.
   Na vertical o Chrome desenha o Myriad Semibold 18 meio pixel acima do
   Figma e o ponto (centrado na linha de 25.2, y=38.5) meio pixel abaixo:
   o item desce 0.5 e o ponto sobe 1 (medido a 2x, casa com o desenho).
   Com transform e não top: o top fracionário é arredondado para 1px.
   -------------------------------------------------------------------------- */

.vp-sticky-cta__beneficios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12.33px;
	flex: 0 1 auto;
	min-width: 0;
	height: 25.2px;
	overflow: hidden;
}

.vp-sticky-cta__beneficio {
	display: flex;
	align-items: center;
	gap: 12.33px;
	flex: none;
	color: var(--vp-white);
	font-size: 18px;
	line-height: 25.2px;
	font-weight: 600;
	white-space: nowrap;
	transform: translateY(0.5px);
}

/* "Dot Separator" 3478:2358 / 3478:2360 — elipse 3x3 #D4B48A. */
.vp-sticky-cta__beneficio + .vp-sticky-cta__beneficio::before {
	content: "";
	flex: none;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--vp-gold-soft);
	transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Contador + botão — "CTA Button Container" 3486:6409: row gap 32, HUG.
   -------------------------------------------------------------------------- */

.vp-sticky-cta__acoes {
	display: flex;
	align-items: center;
	gap: 32px;
	flex: none;
}

/* "Countdown Timer" 3486:6404 — coluna gap 4, alinhada à direita, 132px
   fixos: o número muda de largura sem mexer no botão. */
.vp-sticky-cta__contador {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	flex: none;
	width: 132px;
	color: var(--vp-white);
	white-space: nowrap;
}

/* 3486:6403 — "30% OFF termina em", 14/19.6 700 numa caixa de 20 (o
   Figma arredonda) com alinhamento vertical CENTER: a linha de 19.6 fica
   centrada nos 20, que é o mesmo que line-height 20 (uma linha só). O
   contador fica com 52 de altura, rótulo em y=14 e número em y=38.
   O Chrome arredonda as métricas do Myriad Bold 14 e desenha o texto 1px
   acima do Figma; o top de 1px o devolve à linha do desenho sem mexer na
   caixa (medido a 2x). As larguras mínimas são as caixas do Figma (130 e
   116, o Chrome mede 129.8 e 115.5): com o texto à esquerda dentro delas,
   a tinta cai no mesmo x do desenho. */
.vp-sticky-cta__rotulo {
	position: relative;
	top: 1px;
	display: block;
	min-width: 130px;
	height: 20px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
}

/* 3486:6402 — "01d 23h 47m", 20/28 700. Algarismos tabulares: o número
   troca a cada minuto sem o texto "tremer". */
.vp-sticky-cta__tempo {
	display: block;
	min-width: 116px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* "Button" 3582:2147 — o primário do DS (.vp-btn: 48 de altura, 11/23 +
   borda de 1px = o 12/24 do Figma, hover/pressed do DS), 218x48. A
   largura mínima repõe o que o Chrome mede a menos no rótulo (170 no
   Figma, 169.4 aqui); com o texto encostado à esquerda, a sobra fica à
   direita, como no Figma. */
.vp-sticky-cta .vp-sticky-cta__btn {
	flex: none;
	justify-content: flex-start;
	min-width: 218px; /* 24 + 170 + 24 */
}

/* --------------------------------------------------------------------------
   Impressão: a barra não tem o que fazer no papel.
   -------------------------------------------------------------------------- */

@media print {
	.vp-sticky-cta {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Tablet (768–1023): margem 48 do DS. Mesma barra do desktop; os
   benefícios que não cabem saem pela regra de quebra acima (a 768 ficam
   "Frete grátis • Últimas unidades").
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.vp-sticky-cta__acoes {
		gap: 24px;
	}
}

/* --------------------------------------------------------------------------
   Mobile — LP Vitruvian 3456:3224: 390x80, pad 0/24, SPACE_BETWEEN; texto
   de duas linhas à esquerda e botão pill de 40px à direita (16/22.4 600).
   Aqui o texto da esquerda é o contador compacto (alinhado à esquerda) e
   os benefícios saem. As cores continuam as da barra desta LP (#503629 com
   botão #BC955C): é a mesma barra do desktop, e o branco de 12px pede o
   fundo escuro.
   A 390: contador 24–135, botão 165–366 (Figma 162–366).
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.vp-sticky-cta__inner {
		--vp-sticky-lado: 24px;
	}

	.vp-sticky-cta__beneficios {
		display: none;
	}

	/* Contador numa ponta e botão na outra (o SPACE_BETWEEN do Figma). */
	.vp-sticky-cta__acoes {
		flex: 1 1 auto;
		justify-content: space-between;
		gap: 12px;
		min-width: 0;
	}

	.vp-sticky-cta__contador {
		align-items: flex-start;
		gap: 2px;
		width: auto;
	}

	/* Sem as caixas do desktop (130/116 de largura, 20 de altura, o 1px de
	   ajuste do Bold 14): aqui o texto ocupa só a própria largura. */
	.vp-sticky-cta__rotulo {
		top: 0;
		min-width: 0;
		height: auto;
		font-size: 12px;
		line-height: 16.8px;
	}

	.vp-sticky-cta__tempo {
		min-width: 0;
		font-size: 18px;
		line-height: 25.2px;
	}

	/* 3456:3228 — altura 40 (o 48 do DS não cabe nos 80 com folga);
	   padding 16 (15 + borda) para caber a 375 com "Comprar pelo WhatsApp"
	   inteiro. O ::after estende a área de toque para 48px de altura
	   (mínimo de 44) sem mudar o desenho. */
	.vp-sticky-cta .vp-sticky-cta__btn {
		position: relative;
		justify-content: center;
		min-width: 0;
		height: 40px;
		padding: 0 15px;
	}

	.vp-sticky-cta .vp-sticky-cta__btn::after {
		content: "";
		position: absolute;
		inset: -5px -1px;
	}
}

/* Abaixo de 390: margem 20 do DS, para o contador não encostar no botão
   (a 344, o mais apertado, sobram os 12 de gap). */
@media (max-width: 389px) {
	.vp-sticky-cta__inner {
		--vp-sticky-lado: 20px;
	}
}

/* Telas de 360: o botão Medium do DS (14/19.6). */
@media (max-width: 374px) {
	.vp-sticky-cta .vp-sticky-cta__btn {
		font-size: 14px;
		line-height: 19.6px;
	}
}

/* Abaixo de 344px o botão vira só "Comprar"; o leitor de tela continua
   ouvindo "Comprar pelo WhatsApp". */
@media (max-width: 343px) {
	.vp-sticky-cta__btn-extra {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
}