/* Página do anúncio */

.vpan {
	--vpan-estrela: #C98A00;
	--vpan-bronze-bg: #F3E3D3;
	--vpan-bronze: #7A4A22;
	--vpan-prata-bg: #E7EAEE;
	--vpan-prata: #3A4250;
	--vpan-raio-card: 20px;
	--vpan-raio-box: 12px;
	--vpan-sobre-claro: rgba(255, 255, 255, .92);
	--vpan-sombra-barra: rgba(6, 47, 40, .12);
	--vpan-escuro-72: rgba(6, 47, 40, .72);
	--vpan-escuro-50: rgba(6, 47, 40, .5);
	--vpan-lb-fundo: rgba(4, 22, 19, .94);
	--vpan-lb-botao: rgba(255, 255, 255, .14);
	--vpan-lb-botao-hover: rgba(255, 255, 255, .26);
	color: var(--vphn-n800);
}

.vpan :where(h1, h2, h3) {
	font-family: var(--vphn-display);
	letter-spacing: -.02em;
	color: var(--vphn-forest);
}

.vpan .vpan-pagina {
	padding: 20px var(--vphn-lado) 64px;
}

.vpan .vpan-avisos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.vpan .vpan-avisos > * { margin-top: 0; margin-bottom: 0; }

.vpan :where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
}

/* Grade: topo, galeria e resto à esquerda; caixa à direita */

.vpan .vpan-grade {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	grid-template-areas: "topo lado" "gal lado" "resto lado";
	gap: 0 32px;
	align-items: start;
}

.vpan .vpan-topo { grid-area: topo; min-width: 0; }
.vpan .vpan-gal { grid-area: gal; min-width: 0; }
.vpan .vpan-resto { grid-area: resto; min-width: 0; }

.vpan .vpan-lado {
	grid-area: lado;
	position: sticky;
	top: calc(var(--vpan-topo, 102px) + 16px);
	align-self: start;
	min-width: 0;
}

.vpan .vpan-lado--rec,
.vpan .vpan-lado--alta { position: static; }

/* Trilha */

.vpan .vpan-migalhas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	margin-bottom: 12px;
	font: 600 13px/1.4 var(--vphn-ui);
	color: var(--vphn-n600);
}

.vpan .vpan-migalhas a {
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--vphn-n600);
	text-decoration: none;
}

.vpan .vpan-migalhas a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 44px;
	transform: translateY(-50%);
}

.vpan .vpan-migalhas a:hover {
	color: var(--vphn-forest);
	text-decoration: underline;
}

.vpan .vpan-migalhas__sep {
	display: inline-flex;
	align-items: center;
}

/* Título e linha do vendedor */

.vpan .vpan-tit {
	margin-bottom: 12px;
	font-size: 30px;
	line-height: 1.15;
	text-wrap: balance;
	overflow-wrap: anywhere;
}

.vpan .vpan-vend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-bottom: 16px;
	font-size: 14px;
}

.vpan .vpan-vend b { font-weight: 700; }

.vpan .vpan-avatar {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--vphn-forest);
	color: var(--vphn-n0);
	font: 700 16px/1 var(--vphn-display);
}

.vpan .vpan-selo {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 6px;
	background: var(--vphn-n100);
	color: var(--vphn-n800);
	font-size: 12px;
	font-weight: 700;
}

.vpan .vpan-selo--n1 { background: var(--vpan-bronze-bg); color: var(--vpan-bronze); }
.vpan .vpan-selo--n2 { background: var(--vpan-prata-bg); color: var(--vpan-prata); }
.vpan .vpan-selo--n3 { background: var(--vphn-ouro-bg); color: var(--vphn-ouro); }

.vpan .vpan-nota {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 700;
}

.vpan .vpan-nota svg { color: var(--vpan-estrela); fill: var(--vpan-estrela); }

.vpan .vpan-mudo { color: var(--vphn-n600); }

/* Salvar e Compartilhar */

.vpan .vpan-acoes {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: -4px 0 16px;
}

.vpan .vpan-acao,
.vpan .vpf-botao {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--vphn-n200);
	border-radius: 999px;
	background: var(--vphn-n0);
	color: var(--vphn-forest);
	font: 600 14px/1 var(--vphn-ui);
	text-decoration: none;
	cursor: pointer;
}

.vpan .vpan-acao:hover { border-color: var(--vphn-forest); }

.vpan .vpan-menu {
	position: absolute;
	top: 50px;
	left: 0;
	z-index: 6;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 6px;
	border: 1px solid var(--vphn-n200);
	border-radius: 14px;
	background: var(--vphn-n0);
	box-shadow: var(--vphn-sombra-overlay);
}

.vpan .vpan-menu a,
.vpan .vpan-menu button {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 12px;
	border: 0;
	border-radius: 10px;
	background: none;
	color: var(--vphn-forest);
	font: 600 14px/1 var(--vphn-ui);
	text-align: left;
	text-decoration: none;
	cursor: pointer;
}

.vpan .vpan-menu a:hover,
.vpan .vpan-menu button:hover { background: var(--vphn-n100); }

/* Galeria */

.vpan .vpan-gal { --vpan-gal-r: 1.3333; }

.vpan .vpan-gal__palco,
.vpan .vpan-gal__minis {
	width: min(100%, calc(560px * var(--vpan-gal-r)));
	margin-inline: auto;
}

.vpan .vpan-gal__palco { position: relative; }

.vpan .vpan-gal__faixa {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	border-radius: var(--vpan-raio-card);
	background: var(--vphn-n100);
}

.vpan .vpan-gal__faixa::-webkit-scrollbar { display: none; }

.vpan .vpan-gal__slide {
	position: relative;
	flex: 0 0 100%;
	aspect-ratio: var(--vpan-gal-r);
	scroll-snap-align: start;
	overflow: hidden;
	isolation: isolate;
}

@supports not (aspect-ratio: 1) {
	.vpan .vpan-gal__slide { height: 0; padding-top: calc(100% / var(--vpan-gal-r)); }
	.vpan .vpan-gal__img,
	.vpan .vpan-gal__video,
	.vpan .vpan-gal__zoom { top: 0; left: 0; }
	.vpan .vpan-gal__fundo { top: -30px; right: -30px; bottom: -30px; left: -30px; }
	.vpan .vpan-lb { top: 0; right: 0; bottom: 0; left: 0; }
}

.vpan .vpan-gal__fundo {
	position: absolute;
	inset: -30px;
	background: var(--vphn-n100) center / cover no-repeat;
	filter: blur(24px) saturate(1.1);
	opacity: .85;
	transform: scale(1.1);
}

.vpan .vpan-gal__img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: contain;
}

.vpan .vpan-gal__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.vpan .vpan-gal__zoom {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
}

.vpan .vpan-gal__zoom:focus-visible {
	outline: 2px solid var(--vphn-forest);
	outline-offset: -6px;
	box-shadow: inset 0 0 0 4px var(--vphn-n0);
}

.vpan .vpan-gal__seta {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vpan-sobre-claro);
	color: var(--vphn-forest);
	box-shadow: var(--vphn-sombra-card);
	cursor: pointer;
	transition: opacity .15s var(--vphn-curva);
}

.vpan .vpan-gal__seta--ant { left: 12px; }
.vpan .vpan-gal__seta--prox { right: 12px; }
.vpan .vpan-gal__seta:disabled { opacity: .35; cursor: default; }
.vpan .vpan-gal__seta:focus-visible {
	outline: 2px solid var(--vphn-forest);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--vphn-n0), var(--vphn-sombra-card);
}

.vpan .vpan-gal__cont {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--vpan-escuro-72);
	color: var(--vphn-n0);
	font: 600 12px/1.5 var(--vphn-ui);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

.vpan .vpan-gal__vazio {
	aspect-ratio: 16 / 9;
	border-radius: var(--vpan-raio-card);
	background: linear-gradient(135deg, var(--vphn-forest-800), var(--vphn-green-700) 60%, var(--vphn-lime));
}

.vpan .vpan-gal__minis {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: 8px;
	margin-top: 10px;
}

.vpan .vpan-gal__mini {
	position: relative;
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 10px;
	background: var(--vphn-n100);
	color: var(--vphn-forest);
	opacity: .72;
	transition: opacity .15s var(--vphn-curva), border-color .15s var(--vphn-curva);
}

.vpan .vpan-gal__mini img {
	position: absolute;
	inset: 0;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
}

.vpan .vpan-gal__mini[aria-current="true"],
.vpan .vpan-gal__mini:hover,
.vpan .vpan-gal__mini:focus-visible {
	border-color: var(--vphn-forest);
	opacity: 1;
}

.vpan .vpan-gal__play {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--vpan-sobre-claro);
}

.vpan .vpan-gal__vcapa,
.vpan .vpan-gal__mais { display: none; }

/* Mosaico */

@supports (aspect-ratio: 1) {
	@media (min-width: 768px) {
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__palco { width: 100%; }

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__faixa {
			display: grid;
			grid-template-columns: 4fr 1fr 1fr;
			grid-template-rows: 1fr 1fr;
			gap: 8px;
			aspect-ratio: 2;
			overflow: hidden;
			scroll-snap-type: none;
			border-radius: 0;
			background: none;
		}

		.vpan .vpan-gal--js.vpan-gal--m2:not(.vpan-gal--carrossel) .vpan-gal__faixa { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
		.vpan .vpan-gal--js.vpan-gal--m3:not(.vpan-gal--carrossel) .vpan-gal__faixa { grid-template-columns: 2fr 1fr; }

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__slide {
			min-width: 0;
			min-height: 0;
			aspect-ratio: auto;
			border-radius: var(--vpan-raio-box);
			background: var(--vphn-n100);
		}

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__slide--oculta { display: none; }

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) [data-p="0"] { grid-column: 1; grid-row: 1 / 3; }
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) [data-p="1"] { grid-column: 2; grid-row: 1; }
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) [data-p="2"] { grid-column: 3; grid-row: 1; }
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) [data-p="3"] { grid-column: 2; grid-row: 2; }
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) [data-p="4"] { grid-column: 3; grid-row: 2; }
		.vpan .vpan-gal--js.vpan-gal--m2:not(.vpan-gal--carrossel) [data-p="0"] { grid-row: 1; }
		.vpan .vpan-gal--js.vpan-gal--m3:not(.vpan-gal--carrossel) [data-p="2"] { grid-column: 2; grid-row: 2; }
		.vpan .vpan-gal--js.vpan-gal--m4:not(.vpan-gal--carrossel) [data-p="1"] { grid-column: 2 / 4; }
		.vpan .vpan-gal--js.vpan-gal--m4:not(.vpan-gal--carrossel) [data-p="2"] { grid-column: 2; grid-row: 2; }
		.vpan .vpan-gal--js.vpan-gal--m4:not(.vpan-gal--carrossel) [data-p="3"] { grid-column: 3; grid-row: 2; }

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__img { object-fit: cover; }

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__fundo,
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__video,
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__seta,
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__cont,
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__minis { display: none; }

		/* Vídeo do carrossel em tela cheia */
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__video:fullscreen { display: block; }
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__video:-webkit-full-screen { display: block; }

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__vcapa {
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
			color: var(--vphn-forest);
		}

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__vcapa img {
			position: absolute;
			inset: 0;
			width: 100%;
			max-width: none;
			height: 100%;
			object-fit: cover;
		}

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__vcapa:focus-visible { outline: 0; }
		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__vcapa:focus-visible::after {
			content: "";
			position: absolute;
			inset: 0;
			z-index: 2;
			outline: 2px solid var(--vphn-forest);
			outline-offset: -6px;
			box-shadow: inset 0 0 0 4px var(--vphn-n0);
		}

		.vpan .vpan-gal--mosaico.vpan-gal--js:not(.vpan-gal--carrossel) .vpan-gal__mais {
			position: absolute;
			inset: 0;
			display: grid;
			place-items: center;
			background: var(--vpan-escuro-50);
			color: var(--vphn-n0);
			font: 700 26px/1 var(--vphn-display);
			pointer-events: none;
		}
	}
}

/* Tela cheia */

.vphn.vpan-portal { display: contents; }

.vpan .vpan-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	padding: 60px 72px;
	background: var(--vpan-lb-fundo);
}

.vpan .vpan-lb__palco {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;
	min-height: 0;
}

.vpan .vpan-lb__img {
	display: block;
	max-width: 100%;
	max-height: 100%;
	border-radius: 8px;
	object-fit: contain;
}

.vpan .vpan-lb__video {
	display: block;
	width: min(100%, calc((100vh - 120px) * 16 / 9));
	max-height: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
	background: var(--vpan-lb-fundo);
}

.vpan .vpan-lb__fechar,
.vpan .vpan-lb__seta {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vpan-lb-botao);
	color: var(--vphn-n0);
	cursor: pointer;
}

.vpan .vpan-lb__fechar { top: 10px; right: 10px; }
.vpan .vpan-lb__seta { top: 50%; margin-top: -22px; }
.vpan .vpan-lb__seta--ant { left: 14px; }
.vpan .vpan-lb__seta--prox { right: 14px; }

.vpan .vpan-lb__fechar:hover,
.vpan .vpan-lb__seta:hover { background: var(--vpan-lb-botao-hover); }
.vpan .vpan-lb :focus-visible { outline-color: var(--vphn-lime); }

.vpan .vpan-lb__cont {
	position: absolute;
	bottom: 18px;
	left: 50%;
	color: var(--vphn-n0);
	font: 600 13px/1.4 var(--vphn-ui);
	font-variant-numeric: tabular-nums;
	transform: translateX(-50%);
}

/* Amostras de áudio */

.vpan .vpan-audios { margin-top: 20px; }
.vpan .vpan-audio + .vpan-audio { margin-top: 10px; }

.vpan .vpan-audio__nativo {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
}

.vpan .vpan-audio__ui {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--vphn-n200);
	border-radius: var(--vpan-raio-box);
	background: var(--vphn-n0);
}

.vpan .vpan-audio__play {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--vphn-forest);
	color: var(--vphn-n0);
	cursor: pointer;
}

.vpan .vpan-audio__play .vpan-i--pausa,
.vpan .vpan-audio__play[aria-pressed="true"] .vpan-i--play { display: none; }
.vpan .vpan-audio__play[aria-pressed="true"] .vpan-i--pausa { display: inline-block; }

.vpan .vpan-audio__corpo {
	flex: 1;
	min-width: 0;
}

.vpan .vpan-audio__nome {
	display: block;
	overflow: hidden;
	margin-bottom: 2px;
	font-size: 13px;
	line-height: 1.4;
	color: var(--vphn-n600);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.vpan .vpan-audio__barra {
	position: relative;
	height: 28px;
	border-radius: 4px;
	background: repeating-linear-gradient(90deg, var(--vphn-n200) 0 3px, transparent 3px 6px);
	cursor: pointer;
	touch-action: none;
	-webkit-user-select: none;
	user-select: none;
}

.vpan .vpan-audio__feito {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: 4px;
	background: repeating-linear-gradient(90deg, var(--vphn-green-700) 0 3px, transparent 3px 6px);
	pointer-events: none;
}

.vpan .vpan-audio__tempo {
	flex: none;
	min-width: 36px;
	font: 600 13px/1 var(--vphn-ui);
	color: var(--vphn-n600);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

/* Seções */

.vpan .vpan-sec { margin-top: 36px; }
.vpan .vpan-sec,
.vpan .vp-rec { scroll-margin-top: calc(var(--vpan-topo, 102px) + 16px); }
.vpan .vpan-h2 { margin-bottom: 12px; font-size: 22px; line-height: 1.2; }
.vpan .vpan-ajuda { margin-bottom: 10px; font-size: 13px; color: var(--vphn-n600); }
.vpan .vpan-conteudo { overflow-wrap: anywhere; }
.vpan .vpan-conteudo p + p { margin-top: 10px; }
.vpan .vpan-instr { white-space: pre-line; overflow-wrap: anywhere; }

/* Caixa de compra */

.vpan .vpan-caixa {
	overflow: hidden;
	border: 1px solid var(--vphn-n200);
	border-radius: var(--vpan-raio-card);
	background: var(--vphn-n0);
	box-shadow: var(--vphn-sombra-card);
}

.vpan .vpan-abas {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	border-bottom: 1px solid var(--vphn-n200);
}

.vpan .vpan-abas button {
	min-height: 52px;
	padding: 12px 4px;
	border: 0;
	border-bottom: 3px solid transparent;
	background: transparent;
	color: var(--vphn-n600);
	font: 600 15px/1 var(--vphn-ui);
	cursor: pointer;
}

.vpan .vpan-abas button[aria-selected="true"] {
	border-bottom-color: var(--vphn-green);
	color: var(--vphn-forest);
}

.vpan .vpan-caixa__corpo { padding: 20px; }
.vpan .vpan-caixa__corpo + .vpan-caixa__corpo--dono { padding-top: 0; }

.vpan .vpan-cx-topo {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.vpan .vpan-cx-nome {
	font: 600 17px/1.3 var(--vphn-display);
	letter-spacing: -.01em;
	overflow-wrap: anywhere;
}

.vpan .vpan-cx-preco {
	font: 700 28px/1.1 var(--vphn-display);
	font-variant-numeric: tabular-nums;
	color: var(--vphn-forest);
	white-space: nowrap;
}

.vpan .vpan-cx-desc {
	margin: 6px 0 14px;
	font-size: 14px;
	color: var(--vphn-n600);
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.vpan .vpan-eyebrow {
	display: block;
	margin-bottom: 6px;
	font: 600 11px/1.2 var(--vphn-ui);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--vphn-n600);
}

.vpan .vpan-cx-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 14px 0;
	font-size: 14px;
	font-weight: 600;
}

.vpan .vpan-cx-meta span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.vpan .vpan-itens {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 18px;
	font-size: 14px;
}

.vpan .vpan-itens li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.vpan .vpan-itens svg { margin-top: 2px; }
.vpan .vpan-itens__sim svg { color: var(--vphn-green-700); }
.vpan .vpan-itens__nao { color: var(--vphn-n600); }
.vpan .vpan-itens__nao > span:first-of-type { text-decoration: line-through; }

.vpan .vpan-btn--largo { width: 100%; }

.vpan .vpan-cx-nota {
	margin-top: 8px;
	font-size: 13px;
	color: var(--vphn-n600);
	text-align: center;
}

.vpan .vpan-aviso {
	padding: 12px 14px;
	border-radius: var(--vpan-raio-box);
	background: var(--vphn-n100);
	font-size: 14px;
	font-weight: 600;
}

.vpan .vpan-cx-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px;
	margin: 0 20px;
	padding: 6px 0;
	border-top: 1px solid var(--vphn-n100);
}

.vpan .vpan-btnlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 6px;
	color: var(--vphn-green-700);
	font: 600 15px/1 var(--vphn-ui);
	text-decoration: none;
}

.vpan .vpan-btnlink:hover { color: var(--vphn-forest); text-decoration: underline; }

.vpan .vpan-projeto {
	margin-top: 12px;
	padding: 14px 16px;
	border: 1px dashed var(--vphn-n200);
	border-radius: var(--vpan-raio-box);
	font-size: 14px;
	color: var(--vphn-n600);
}

.vpan .vpan-projeto a { font-weight: 600; }

.vpan .vpan-garantia {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-top: 12px;
	font-size: 13px;
	color: var(--vphn-n600);
}

.vpan .vpan-garantia svg { margin-top: 2px; color: var(--vphn-green-700); }
.vpan .vpan-garantia b { display: block; color: var(--vphn-forest); }

.vpan .vpan-admin {
	margin-top: 12px;
	padding: 10px 14px;
	border: 1px solid var(--vphn-n200);
	border-radius: var(--vpan-raio-box);
	font-size: 13px;
	overflow-wrap: anywhere;
}

.vpan .vpan-admin summary { font-weight: 600; cursor: pointer; }
.vpan .vpan-admin p { margin-top: 6px; }

/* Avisos da caixa: vendedor parado e serviço indisponível */

.vpan .vpan-cx-parado,
.vpan .vpan-cx-indisp {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin: 0 0 12px;
	padding: 10px 12px;
	border-radius: var(--vpan-raio-box);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.vpan .vpan-cx-parado { background: var(--vphn-ouro-bg); color: var(--vphn-ouro); }
.vpan .vpan-cx-indisp { background: var(--vphn-n100); color: var(--vphn-n800); }
.vpan .vpan-cx-parado svg,
.vpan .vpan-cx-indisp svg { flex: none; margin-top: 1px; }
.vpan .vpan-caixa__corpo + .vpan-caixa__corpo--indisp { padding-top: 0; }

.vpan .vpan-btn--indisp,
.vpan .vpan-btn--indisp[disabled] {
	background: var(--vphn-n200);
	color: var(--vphn-n600);
	opacity: 1;
}

/* Sugestões abaixo da caixa */

.vpan .vpan-sug { margin-top: 20px; }

.vpan .vpan-sug__tit {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
	font-size: 17px;
	line-height: 1.3;
}

.vpan .vpan-sug__tit--ativos::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vphn-green);
}

.vpan .vpan-sug__lista {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vpan .vpan-sug__link {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	align-items: center;
	gap: 12px;
	padding: 8px;
	border: 1px solid var(--vphn-n200);
	border-radius: var(--vpan-raio-box);
	background: var(--vphn-n0);
	color: var(--vphn-n800);
	text-decoration: none;
	transition: border-color .14s, box-shadow .14s;
}

.vpan .vpan-sug__link:hover { border-color: var(--vphn-n300); box-shadow: var(--vphn-sombra-card); }
.vpan .vpan-sug__link:hover .vpan-sug__nome { text-decoration: underline; }

.vpan .vpan-sug__foto {
	display: block;
	width: 96px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 8px;
	background: var(--vphn-n100);
}

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

.vpan .vpan-sug__corpo {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.vpan .vpan-sug__nome {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--vphn-n800);
	overflow-wrap: anywhere;
}

.vpan .vpan-sug__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	font-size: 13px;
	color: var(--vphn-n600);
}

.vpan .vpan-sug__nota {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.vpan .vpan-sug__nota svg { fill: currentColor; }
.vpan .vpan-sug__nota { color: var(--vphn-n800); }

.vpan .vpan-sug__selo {
	padding: 1px 8px;
	border-radius: 999px;
	background: var(--vphn-ouro-bg);
	color: var(--vphn-ouro);
	font-size: 12px;
	font-weight: 700;
}

.vpan .vpan-sug__preco {
	font: 700 15px/1.2 var(--vphn-display);
	color: var(--vphn-forest);
}

.vpan .vpan-sug__trilho { display: none; }

.vpan .vpan-sug__card {
	display: flex;
	min-width: 0;
	scroll-snap-align: start;
}

.vpan .vpan-sug__card > .vphn-card { flex: 1 1 auto; }

.vpan .vpan-sug__mais {
	display: block;
	margin-top: 10px;
	padding: 8px 0;
	color: var(--vphn-green-700);
	font-weight: 700;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
}

.vpan .vpan-sug__mais:hover { color: var(--vphn-forest); text-decoration: underline; }

/* Comparação */

.vpan .vpan-cmp {
	position: relative;
	max-width: 100%;
	overflow-x: auto;
	border: 1px solid var(--vphn-n200);
	border-radius: 16px;
	background: var(--vphn-n0);
}

.vpan .vpan-cmp table {
	width: 100%;
	min-width: 520px;
	border-collapse: collapse;
	font-size: 14px;
}

.vpan .vpan-cmp th,
.vpan .vpan-cmp td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--vphn-n100);
	text-align: center;
	vertical-align: middle;
}

.vpan .vpan-cmp th:first-child,
.vpan .vpan-cmp td:first-child { text-align: left; }

.vpan .vpan-cmp thead th {
	background: var(--vphn-n100);
	font: 600 15px/1.3 var(--vphn-display);
}

.vpan .vpan-cmp thead th small {
	display: block;
	font: 500 12px/1.3 var(--vphn-ui);
	color: var(--vphn-n600);
}

.vpan .vpan-cmp tbody th { font-weight: 600; text-align: left; }
.vpan .vpan-cmp tr:last-child td,
.vpan .vpan-cmp tr:last-child th { border-bottom: 0; }
.vpan .vpan-cmp__ok { color: var(--vphn-green-700); }
.vpan .vpan-cmp__no { color: var(--vphn-n600); }
.vpan .vpan-cmp__preco td { font: 700 16px/1.2 var(--vphn-display); font-variant-numeric: tabular-nums; }

/* Perguntas ao comprador */

.vpan .vpan-perg {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	counter-reset: vpan-q;
}

.vpan .vpan-perg li {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid var(--vphn-n200);
	border-radius: var(--vpan-raio-box);
	background: var(--vphn-n0);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.vpan .vpan-perg li::before {
	counter-increment: vpan-q;
	content: counter(vpan-q);
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--vphn-n100);
	font: 700 13px/1 var(--vphn-display);
}

.vpan .vpan-perg__tipo {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	color: var(--vphn-n600);
}

/* Sobre o vendedor */

.vpan .vpan-cartao {
	padding: 20px;
	border: 1px solid var(--vphn-n200);
	border-radius: var(--vpan-raio-card);
	background: var(--vphn-n0);
}

.vpan .vpan-vd-topo {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 14px;
}

.vpan .vpan-avatar--grande {
	width: 56px;
	height: 56px;
	font-size: 22px;
	object-fit: cover;
}

.vpan .vpan-vd-id { min-width: 0; }
.vpan .vpan-vd-nome { font: 600 17px/1.3 var(--vphn-display); overflow-wrap: anywhere; }
.vpan .vpan-vd-id .vpan-ajuda { margin: 2px 0 0; }

.vpan .vpan-bio {
	font-size: 14px;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.vpan .vpan-nums {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 12px 0;
	padding: 12px 0;
	border-top: 1px solid var(--vphn-n100);
	border-bottom: 1px solid var(--vphn-n100);
}

.vpan .vpan-num { font-size: 13px; color: var(--vphn-n600); }

.vpan .vpan-num b {
	display: flex;
	align-items: center;
	gap: 4px;
	font: 700 16px/1.3 var(--vphn-display);
	font-variant-numeric: tabular-nums;
	color: var(--vphn-n800);
}

.vpan .vpan-num .vphn-ic { color: var(--vpan-estrela); fill: currentColor; }

.vpan .vpan-vd-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin-top: 14px;
}

.vpan .vpan-vd-topo + .vpan-vd-acoes,
.vpan .vpan-nums + .vpan-vd-acoes { margin-top: 0; }

/* Avaliações */

.vpan .vpan-av-resumo {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: 20px;
	margin-bottom: 16px;
}

.vpan .vpan-av-media {
	font: 700 44px/1 var(--vphn-display);
	color: var(--vphn-forest);
}

.vpan .vpan-av-media small {
	display: block;
	margin-top: 6px;
	font: 500 13px/1.3 var(--vphn-ui);
	color: var(--vphn-n600);
}

.vpan .vpan-barras {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.vpan .vpan-barra-av {
	display: grid;
	grid-template-columns: 62px minmax(0, 1fr) 38px;
	align-items: center;
	gap: 8px;
}

.vpan .vpan-barra-av i {
	display: block;
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: var(--vphn-n100);
}

.vpan .vpan-barra-av b {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--vpan-estrela);
}

.vpan .vpan-barra-av span:last-child {
	text-align: right;
	color: var(--vphn-n600);
	font-variant-numeric: tabular-nums;
}

.vpan .vpan-avs {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.vpan .vpan-av {
	padding: 14px 16px;
	border: 1px solid var(--vphn-n200);
	border-radius: 16px;
	background: var(--vphn-n0);
}

.vpan .vpan-av-cab {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 10px;
	margin-bottom: 6px;
	font-size: 14px;
}

.vpan .vpan-av-cab .vpan-avatar {
	width: 30px;
	height: 30px;
	object-fit: cover;
	font-size: 13px;
}

.vpan .vpan-avatar--letra { background: var(--vphn-n100); color: var(--vphn-n800); }
.vpan .vpan-av-nome { font-weight: 700; overflow-wrap: anywhere; }
.vpan .vpan-av-data { font-size: 13px; color: var(--vphn-n600); }

.vpan .vpan-estrelas {
	display: inline-flex;
	gap: 1px;
	color: var(--vpan-estrela);
}

.vpan .vpan-estrelas__cheias,
.vpan .vpan-estrelas__vazias { display: inline-flex; gap: 1px; }
.vpan .vpan-estrelas__vazias { opacity: .25; }

.vpan .vpan-av-txt {
	font-size: 14px;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

.vpan .vpan-av-resp {
	margin-top: 10px;
	padding: 10px 12px;
	border-left: 3px solid var(--vphn-n200);
	border-radius: 0 var(--vpan-raio-box) var(--vpan-raio-box) 0;
	background: var(--vphn-n50);
}

.vpan .vpan-av-resp-tit {
	display: block;
	margin-bottom: 2px;
	font-size: 13px;
	color: var(--vphn-n600);
}

.vpan .vpan-vd-acoes .vphn-btn,
.vpan .vpan-av-mais { height: 48px; }

.vpan .vpan-av-mais { margin-top: 12px; }

/* Outros anúncios */

.vpan .vpan-outros {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

/* Barra fixa do celular */

.vpan .vpan-barra { display: none; }

@media (max-width: 860px) {
	.vpan .vpan-pagina { padding: 16px var(--vphn-lado) 40px; }

	.vpan .vpan-grade {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "topo" "gal" "lado" "resto";
	}

	.vpan .vpan-lado {
		position: static;
		margin-top: 18px;
	}

	.vpan .vpan-tit { font-size: 24px; }

	.vpan .vpan-gal__palco,
	.vpan .vpan-gal__minis { width: 100%; }

	.vpan .vpan-lb { padding: 60px 8px; }
	.vpan .vpan-lb__seta--ant { left: 8px; }
	.vpan .vpan-lb__seta--prox { right: 8px; }

	.vpan .vpan-outros { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.vpan.vpan--barra { padding-bottom: 84px; }
	.vpan.vpan--barra-aviso { padding-bottom: 128px; }
	.vpan.vpan--barra-aviso .vpan-cx-parado { display: none; }

	.vpan .vpan-sug--trilho .vpan-sug__lista { display: none; }
	.vpan .vpan-sug--trilho .vpan-sug__trilho { display: grid; }

	.vpan .vpan-barra {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 50;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--vphn-n200);
		background: var(--vphn-n0);
		box-shadow: 0 -12px 40px var(--vpan-sombra-barra);
	}

	.vpan .vpan-barra--aviso { flex-wrap: wrap; row-gap: 8px; }

	.vpan .vpan-barra__aviso {
		display: flex;
		flex: 1 0 100%;
		align-items: center;
		gap: 6px;
		padding: 6px 10px;
		border-radius: 10px;
		background: var(--vphn-ouro-bg);
		color: var(--vphn-ouro);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.3;
	}

	.vpan .vpan-barra__aviso svg { flex: none; }

	.vpan .vpan-barra__txt {
		font-size: 13px;
		line-height: 1.3;
		color: var(--vphn-n600);
	}

	.vpan .vpan-barra__txt b {
		display: block;
		font: 700 18px/1.2 var(--vphn-display);
		color: var(--vphn-forest);
	}
}

@media (max-width: 560px) {
	.vpan .vpan-outros { grid-template-columns: minmax(0, 1fr); }
	.vpan .vpan-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vpan .vpan-av-resumo { grid-template-columns: minmax(0, 1fr); }
}

/* Prévia */

.vpan .vpan-previa {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 12px 14px;
	border-radius: var(--vpan-raio-box);
	background: var(--vphn-n100);
	color: var(--vphn-n800);
	font-size: 14px;
	line-height: 1.45;
}

.vpan .vpan-previa svg { flex: none; margin-top: 1px; }
.vpan--previa button.vpan-btnlink { border: 0; background: none; }

.vpan--previa .vpan-caixa .vphn-btn[disabled],
.vpan--previa .vpan-barra .vphn-btn[disabled],
.vpan--previa .vpan-vd-acoes .vphn-btn[disabled],
.vpan--previa .vpan-acao[disabled],
.vpan--previa .vpan-btnlink[disabled] {
	opacity: .5;
	cursor: not-allowed;
}

.vpan--previa .vpan-acao[disabled]:hover { border-color: var(--vphn-n200); }
.vpan--previa .vpan-btnlink[disabled]:hover { color: var(--vphn-green-700); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.vpan .vpan-gal__faixa { scroll-behavior: auto; }
}