/**
 * Provador Virtual — página de produto.
 *
 * ## Direção
 *
 * O provador abre num **painel lateral à direita** (drawer), não num modal centralizado: encosta
 * na borda da tela, desliza de fora para dentro e deixa o produto ainda visível à esquerda — o
 * cliente decide "provar em mim" sem perder de vista a peça que está avaliando.
 *
 * Ele roda em 4 temas (default, classic, vestuario, suplementos) e em dezenas de lojas com
 * identidades diferentes. As ações primárias são **quase-pretas** (near-black), calmas e neutras;
 * a cor da loja (`var(--primary)`) aparece só em toques de interação (foco, hover do upload) e no
 * momento-assinatura da cabine, para o provador parecer parte da loja sem competir com ela.
 *
 * ## A assinatura: a cabine
 *
 * A espera de 10 a 55 segundos é o ponto mais frágil da experiência — e a revelação é o que paga
 * essa espera. Em vez de um spinner, a própria foto do cliente vira o pano de fundo: borrada e
 * escurecida, com frases de provador rotativas por cima ("Tirando suas medidas...", "Vestindo a
 * peça em você..."). Dá sentido à espera — você está trocando de roupa — sem esconder quem espera.
 *
 * Quando o resultado chega, a cabine vira um comparador antes/depois: o novo look aparece inteiro
 * e o divisor desliza sozinho da esquerda para a direita até o meio; a partir daí o cliente
 * arrasta a linha para comparar a foto original (esquerda) com o resultado (direita).
 */

/*
 * Tokens em `.pv` E `.pv-drawer`: o JS move o drawer para o `body` (portal, para escapar do
 * stacking context da loja), então ele deixa de herdar as variáveis de `.pv`. Declará-las também
 * em `.pv-drawer` mantém o estilo intacto após o move. `var(--primary)` vem do `:root` do tema.
 */
.pv,
.pv-drawer {
	--pv-accent: var(--primary, #120a8f);
	--pv-ink: #16161a;
	--pv-ink-soft: #3a3a42;
	--pv-muted: #71717a;
	--pv-line: #e6e6ec;
	--pv-surface: #fff;
	--pv-wash: #f4f4f7;
	--pv-radius: 16px;
}

.pv {
	margin-top: 12px;
}

/* ---------- Gatilho na página ---------- */

.pv-trigger {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	justify-content: center;
	padding: 13px 18px;
	border: 1.5px solid var(--pv-accent);
	border-radius: var(--pv-radius);
	background: transparent;
	color: var(--pv-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.pv-trigger:hover,
.pv-trigger:focus-visible {
	background: var(--pv-accent);
	color: #fff;
}

.pv-trigger__glyph svg {
	display: block;
	width: 20px;
	height: 20px;
}

/* ---------- Drawer lateral ---------- */

.pv-drawer {
	position: fixed;
	inset: 0;
	/* Máximo de um int de 32 bits: fica acima de qualquer overlay/sticky/header da loja. */
	z-index: 2147483647;
	display: flex;
	justify-content: flex-end;
}

.pv-drawer[hidden] {
	display: none;
}

.pv-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(12, 12, 16, 0.5);
	backdrop-filter: blur(2px);
	animation: pv-fade 0.3s ease;
}

.pv-drawer__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 480px;
	max-width: 100%;
	height: 100%;
	overflow-y: auto;
	padding: 22px 26px 30px;
	background: var(--pv-surface);
	color: var(--pv-ink);
	box-shadow: -24px 0 60px rgba(12, 12, 16, 0.18);
	animation: pv-slide 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pv-slide {
	from { transform: translateX(100%); }
	to   { transform: none; }
}

@keyframes pv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ---------- Cabeçalho: produto + fechar ---------- */

.pv-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.pv-head__product {
	display: flex;
	align-items: center;
	gap: 11px;
	min-width: 0;
}

.pv-head__thumb {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 11px;
	object-fit: cover;
	background: var(--pv-wash);
}

/* Nome + preço na primeira linha; condições (parcelas/pix) na segunda — como na PDP. */
.pv-head__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.pv-head__line {
	display: flex;
	align-items: baseline;
	gap: 6px;
	min-width: 0;
}

/* Título do design de referência: nome e preço juntos, mesmo peso e cor ("Vestido... R$590,00"). */
.pv-head__name {
	min-width: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--pv-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pv-head__price {
	flex-shrink: 0;
	font-size: 1rem;
	font-weight: 700;
	color: var(--pv-ink);
	white-space: nowrap;
}

.pv-head__pay {
	font-size: 0.71875rem;
	color: var(--pv-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pv-head__close {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pv-muted);
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.pv-head__close:hover { background: var(--pv-wash); color: var(--pv-ink); }
.pv-head__close svg { width: 20px; height: 20px; }

/* ---------- Título + régua ---------- */

.pv-title {
	margin: 20px 0 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.pv-rule {
	height: 0;
	margin: 14px 0 16px;
	border: 0;
	border-top: 1px solid var(--pv-line);
}

.pv-lede {
	margin: 0 0 18px;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--pv-muted);
}

/* ---------- Passos ---------- */

.pv-step[hidden] { display: none; }

/* ---------- Passo 0: apresentação ---------- */

.pv-showcase {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 22px;
}

.pv-shot {
	position: relative;
	margin: 0;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 14px;
	background: linear-gradient(160deg, #f6f6f9, #e9e9ee);
}

.pv-shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* O card "Resultado" é um teaser: mostra a própria peça (flat lay em fundo claro). */
.pv-shot--result img {
	object-fit: contain;
	background: #fff;
}

.pv-shot__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: #b6b6c1;
}

.pv-shot__ph svg { width: 42%; height: 42%; }

.pv-shot__tag {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 4px 10px;
	border-radius: 999px;
	background: rgba(20, 20, 26, 0.62);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.pv-shot__ai {
	position: absolute;
	top: 8px;
	right: 8px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(20, 20, 26, 0.58);
	color: #fff;
	font-size: 0.5625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

.pv-steps {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
}

.pv-steps li {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 10px 0;
	border-bottom: 1px solid var(--pv-line);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--pv-ink-soft);
}

.pv-steps li:last-child { border-bottom: 0; }

.pv-steps__n {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	flex-shrink: 0;
	border: 1.5px solid var(--pv-line);
	border-radius: 50%;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--pv-muted);
}

/* ---------- Ação primária ---------- */

.pv-cta {
	width: 100%;
	padding: 16px;
	border: 0;
	border-radius: 14px;
	background: var(--pv-ink);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: opacity 0.18s ease, transform 0.12s ease;
}

.pv-cta:hover { opacity: 0.92; }
.pv-cta:active { transform: translateY(1px); }
.pv-cta:disabled { opacity: 0.4; cursor: not-allowed; }
.pv-cta:disabled:active { transform: none; }

.pv-fineprint {
	margin: 12px 0 0;
	font-size: 0.6875rem;
	line-height: 1.5;
	color: var(--pv-muted);
	text-align: center;
}

/* ---------- Passo 1: foto ---------- */

.pv-drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 34px 18px;
	border: 1.5px dashed var(--pv-line);
	border-radius: var(--pv-radius);
	text-align: center;
	cursor: pointer;
	transition: border-color 0.18s ease, background-color 0.18s ease;
}

.pv-drop:hover,
.pv-drop.is-dragging {
	border-color: var(--pv-accent);
	background: rgba(0, 0, 0, 0.015);
}

.pv-drop:focus-within {
	outline: 2px solid var(--pv-accent);
	outline-offset: 2px;
}

.pv-drop[hidden] { display: none; }
.pv-drop__icon svg { width: 28px; height: 28px; color: var(--pv-accent); }
.pv-drop__cta { font-weight: 600; font-size: 0.9375rem; }
.pv-drop__hint { font-size: 0.75rem; color: var(--pv-muted); }

.pv-preview {
	margin: 0;
	text-align: center;
}

.pv-preview[hidden] { display: none; }

.pv-preview img {
	width: 100%;
	max-height: 320px;
	object-fit: contain;
	border-radius: var(--pv-radius);
	background: var(--pv-wash);
}

.pv-preview figcaption { margin-top: 10px; }

/* Consentimento implícito: texto informativo colado ao botão, sem checkbox (menos fricção). */
.pv-consent {
	margin: 10px 0 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--pv-muted);
	text-align: center;
}

.pv-submit {
	width: 100%;
	margin-top: 16px;
	padding: 16px;
	border: 0;
	border-radius: 14px;
	background: var(--pv-ink);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: opacity 0.18s ease;
}

.pv-submit:disabled { opacity: 0.4; cursor: not-allowed; }
.pv-submit:not(:disabled):hover { opacity: 0.92; }

.pv-link {
	border: 0;
	background: none;
	padding: 0;
	color: var(--pv-accent);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.pv-error {
	margin: 0 0 12px;
	font-size: 0.8125rem;
	color: #c62828;
}

.pv-error[hidden] { display: none; }

/* ---------- Passo 2: a cabine (assinatura) ---------- */

.pv-booth {
	position: relative;
	overflow: hidden;
	border-radius: var(--pv-radius);
	background: #0e0e12;
	aspect-ratio: 3 / 4;
}

.pv-booth__before,
.pv-booth__after {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pv-booth__after[hidden] { display: none; }

/* Resultado restaurado (página recarregada): a foto original nunca é salva, não há "antes". */
.pv-booth__before[hidden] { display: none; }

/*
 * Durante a espera, a foto do cliente vira o pano de fundo: borrada e escurecida, com as frases
 * por cima. O scale esconde o halo claro que o blur cria nas bordas.
 */
.pv-booth__before {
	transition: filter 0.7s ease, transform 0.7s ease;
}

.pv-booth.is-processing .pv-booth__before {
	filter: blur(16px) brightness(0.55) saturate(0.9);
	transform: scale(1.08);
}

/*
 * O comparador: o "depois" só aparece à direita do divisor (--pv-pos, controlado pelo JS).
 * Na revelação o divisor nasce em 0% — o novo look inteiro — e desliza até o meio.
 */
.pv-booth__after {
	clip-path: inset(0 0 0 var(--pv-pos, 50%));
	opacity: 0;
	transition: opacity 0.45s ease;
}

.pv-booth.is-revealed .pv-booth__after { opacity: 1; }

/* ---------- Download do resultado ---------- */

/* Ícone no canto superior esquerdo da imagem: fundo branco, cantos arredondados, 5px das bordas. */
.pv-download {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 2;
	display: none;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 12px;
	background: #fff;
	color: var(--pv-ink);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
	cursor: pointer;
	transition: transform 0.12s ease, box-shadow 0.15s ease;
}

/* Só existe com resultado na tela (prova recém-feita ou restaurada). */
.pv-booth.is-revealed .pv-download { display: grid; }

.pv-download:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.pv-download:active { transform: none; }
.pv-download:disabled { opacity: 0.6; cursor: wait; }
.pv-download svg { width: 20px; height: 20px; }

/* ---------- Frases de espera ---------- */

.pv-booth__phrase {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 0;
	padding: 26px;
	text-align: center;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
}

/* Ícone de vestuário da frase, num disco translúcido para destacar sobre qualquer foto. */
.pv-booth__phrase-icon {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(4px);
}

.pv-booth__phrase-icon:empty { display: none; }

.pv-booth__phrase-icon svg {
	width: 34px;
	height: 34px;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
}

.pv-booth.is-revealed .pv-booth__phrase { display: none; }

/* Reaplicada pelo JS a cada troca de frase; a duração casa com PHRASE_INTERVAL_MS. */
.pv-booth__phrase.is-live {
	animation: pv-phrase 4.2s ease both;
}

@keyframes pv-phrase {
	0%   { opacity: 0; transform: translateY(8px); }
	14%  { opacity: 1; transform: none; }
	78%  { opacity: 1; transform: none; }
	100% { opacity: 0; transform: translateY(-6px); }
}

/* ---------- Divisor antes/depois ---------- */

.pv-compare {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--pv-pos, 50%);
	width: 44px;
	/* O hit-area de 44px fica centrado na linha. */
	margin-left: -22px;
	display: grid;
	place-items: center;
	cursor: ew-resize;
	touch-action: none;
}

.pv-compare[hidden] { display: none; }

/* A linha vertical que separa o antes do depois. */
.pv-compare::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}

.pv-compare__grip {
	position: relative;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--pv-ink);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.pv-compare__grip svg { width: 18px; height: 18px; }

.pv-compare:focus-visible { outline: none; }

.pv-compare:focus-visible .pv-compare__grip {
	outline: 2px solid var(--pv-accent);
	outline-offset: 2px;
}

/* Visível só para leitores de tela: o status real da FASHN segue sendo anunciado. */
.pv-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.pv-disclaimer {
	margin: 14px 0 0;
	font-size: 0.75rem;
	line-height: 1.45;
	color: var(--pv-muted);
	text-align: center;
}

.pv-disclaimer[hidden] { display: none; }

/* ---------- Cupom Secreto ---------- */

/*
 * O único bloco quente do drawer: âmbar de oferta, de propósito fora da paleta neutra — é a
 * recompensa da prova e precisa parecer um achado.
 */
.pv-coupon {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 14px;
	padding: 14px 16px;
	border: 1px solid #fcd9a8;
	border-radius: 14px;
	background: linear-gradient(135deg, #fff8ef, #fff2df);
}

.pv-coupon[hidden] { display: none; }

.pv-coupon__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: #ffe7c4;
	color: #c2620a;
}

.pv-coupon__icon svg { width: 22px; height: 22px; }

.pv-coupon__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1;
}

.pv-coupon__text strong {
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #7c3f04;
}

.pv-coupon__text span {
	font-size: 0.75rem;
	color: #9a6215;
}

.pv-coupon__cta {
	padding: 10px 14px;
	border: 0;
	border-radius: 10px;
	background: #f59e0b;
	color: #fff;
	font: inherit;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.pv-coupon__cta:hover { background: #d97706; }
.pv-coupon__cta:disabled { opacity: 0.6; cursor: wait; }
.pv-coupon__cta[hidden] { display: none; }

/* O código gerado: tracejado de "recorte de cupom", clique copia. */
.pv-coupon__code {
	width: 100%;
	padding: 9px 14px;
	border: 1.5px dashed #d97706;
	border-radius: 10px;
	background: #fff;
	color: #b45309;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	cursor: copy;
}

.pv-coupon__code[hidden] { display: none; }

.pv-coupon__timer {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #c2620a;
}

.pv-coupon__timer[hidden] { display: none; }
.pv-coupon__timer svg { width: 20px; height: 20px; }

.pv-coupon__count {
	font-size: 1.0625rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.pv-coupon__timer small {
	font-size: 0.5625rem;
	font-weight: 600;
	line-height: 1.2;
	max-width: 52px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ---------- Botões de compra pós-prova ---------- */

.pv-actions {
	margin-top: 16px;
	text-align: center;
}

.pv-actions[hidden] { display: none; }

.pv-buy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

.pv-buy__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 12px;
	border: 0;
	border-radius: 12px;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.12s ease;
}

.pv-buy__btn:hover { filter: brightness(0.96); }
.pv-buy__btn:active { transform: translateY(1px); }

.pv-buy__btn svg {
	width: 21px;
	height: 21px;
	flex-shrink: 0;
}

.pv-buy__btn span {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.pv-buy__btn strong {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	white-space: nowrap;
}

.pv-buy__btn small {
	font-size: 0.625rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pv-buy__btn--cart {
	background: #ececf0;
	color: var(--pv-ink);
}

.pv-buy__btn--cart small { color: var(--pv-muted); }

/* Azul vivo do "Comprar agora" — o CTA final, deliberadamente mais quente que o resto. */
.pv-buy__btn--now {
	background: #1d6ff2;
	color: #fff;
}

.pv-buy__btn--now small { color: rgba(255, 255, 255, 0.75); }

/* ---------- Mobile: o drawer vira tela cheia ---------- */

@media (max-width: 575px) {
	.pv-drawer__panel {
		width: 100%;
		padding: 20px 18px 26px;
		box-shadow: none;
		animation: pv-rise 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	}

	.pv-title { font-size: 1.5rem; }
}

@keyframes pv-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

/* Telas muito estreitas: os dois botões lado a lado não cabem com os rótulos inteiros. */
@media (max-width: 420px) {
	.pv-buy { grid-template-columns: 1fr; }
	.pv-buy__btn { justify-content: flex-start; }
}

/* ---------- Acessibilidade ---------- */

@media (prefers-reduced-motion: reduce) {
	.pv-drawer__panel,
	.pv-drawer__backdrop {
		animation: none;
	}

	/* Sem movimento: o resultado simplesmente aparece (o JS também pula o deslize automático). */
	.pv-booth__before,
	.pv-booth__after {
		transition: none;
	}

	/* As frases trocam sem deslizar nem piscar. */
	.pv-booth__phrase.is-live {
		animation: none;
		opacity: 1;
		transform: none;
	}
}