/* =====================================================================
   Vinhos - Ficha de Produto
   Ajuste as variáveis abaixo para casar com a identidade visual do site.
   ===================================================================== */
:root {
	--vpf-primary: #6d1626;         /* bordô da barra e dos destaques   */
	--vpf-primary-dark: #4f0f1b;    /* bordô mais escuro (hover/sombra) */
	--vpf-black: #171717;           /* preto usado nos ícones e no botão "Finalizar" */
	--vpf-text-on-primary: #ffffff;
	--vpf-icon-color: #171717;
	--vpf-icon-bg: #f4f1ef;
	--vpf-border: #e7e2df;
	--vpf-bg-soft: #eef0f1;         /* fundo cinza-claro do bloco padronizado */
	--vpf-page-bg: #f0f1f2;         /* fundo cinza da página do produto */
	--vpf-star-color: #f5b301;      /* cor das estrelas de avaliação */

	/* Largura do conteúdo (cartão do produto, bloco padronizado e o
	   conteúdo interno da barra). A barra em si continua 100% da tela;
	   só o conteúdo de dentro fica nessa largura, centralizado.        */
	--vpf-content-width: 90%;
	--vpf-content-max: 1600px;

	/* Altura do MENU MOBILE que você já tem no site — ajuste este valor
	   para a barra do rodapé encostar certinho em cima do seu menu.     */
	--vpf-mobile-menu-height: 64px;

	--vpf-bar-height: 64px;
}

/* ---------------------------------------------------------------------
   Padronização automática do "cartão" do produto (fundo, título,
   breadcrumb, avaliação) — aplica-se a QUALQUER produto/tema, sem
   precisar configurar nada em cada um. Se o seu tema já entrega esse
   visual, pode apagar este bloco.
   --------------------------------------------------------------------- */
body.single-product {
	background: var(--vpf-page-bg);
}

body.single-product div.product {
	background: #ffffff;
	border-radius: 12px;
	padding: 32px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
	width: var(--vpf-content-width);
	max-width: var(--vpf-content-max);
	margin: 24px auto !important;

	/* Galeria e resumo lado a lado, permitindo a imagem ficar "sticky"
	   (grudada) enquanto o texto do lado direito rola.                 */
	display: flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 40px;
}

/* Galeria: fica grudada (sticky) enquanto o resumo ao lado é mais alto,
   e acompanha até o fim do conteúdo da direita — igual a uma ficha de
   produto de loja grande. Se sua página tiver uma barra de admin ou
   cabeçalho fixo, ajuste o valor de "top" abaixo.                      */
body.single-product div.product > .woocommerce-product-gallery {
	flex: 1 1 420px;
	max-width: 460px;
	position: sticky;
	top: calc(var(--vpf-bar-height) + 24px);
	align-self: flex-start;
}

body.single-product div.product > .summary,
body.single-product div.product > .summary.entry-summary {
	flex: 1 1 420px;
	min-width: 280px;
}

/* O bloco "Sobre/Atendimento/Dúvidas" sempre ocupa a linha inteira,
   abaixo da galeria+resumo (nunca ao lado). */
body.single-product div.product > .vpf-details {
	flex: 1 1 100%;
}

@media (max-width: 991px) {
	body.single-product div.product > .woocommerce-product-gallery {
		position: static;
		max-width: 100%;
		flex-basis: 100%;
	}

	body.single-product div.product > .summary,
	body.single-product div.product > .summary.entry-summary {
		flex-basis: 100%;
	}
}

body.single-product .woocommerce-breadcrumb {
	font-size: 14px;
	color: #6b6b6b;
	margin: 0 0 16px !important;
	padding: 0 !important;
	background: none !important;
}

body.single-product .woocommerce-breadcrumb a {
	color: #6b6b6b;
	text-decoration: none;
}

body.single-product h1.product_title {
	font-size: 28px;
	font-weight: 700;
	color: #1a1a1a;
	margin: 14px 0 10px;
	line-height: 1.25;
}

body.single-product .woocommerce-product-rating,
body.single-product .woocommerce-product-details__short-description + .woocommerce-product-rating {
	margin-bottom: 18px;
}

body.single-product .star-rating {
	color: var(--vpf-star-color);
	font-size: 18px;
}

body.single-product .star-rating::before {
	color: #d8d8d8;
}

body.single-product .star-rating span::before {
	color: var(--vpf-star-color);
}

/* Botão de lupa sobre a galeria (inserido via JS), igual em todos os
   produtos. Precisa que a galeria tenha position:relative — o JS já
   aplica isso automaticamente. */
.vpf-zoom-btn {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffffff;
	border: 1px solid var(--vpf-border);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #1a1a1a;
	cursor: pointer;
	z-index: 5;
}

.vpf-zoom-btn svg {
	width: 20px;
	height: 20px;
}

@media (max-width: 767px) {
	body.single-product div.product {
		padding: 18px;
		margin: 0 auto !important;
		border-radius: 0;
	}
}

/* ---------------------------------------------------------------------
   Remove a barra lateral (sidebar) na página de produto, para o
   conteúdo ocupar a largura toda, igual ao layout de referência.
   Cobre os temas mais comuns (Divi, Astra, GeneratePress, temas padrão).
   Se o seu tema usar outro nome de sidebar, me avise para eu incluir.
   --------------------------------------------------------------------- */
body.single-product #sidebar,
body.single-product .et_pb_row #sidebar,
body.single-product aside.widget-area,
body.single-product .sidebar,
body.single-product #secondary,
body.single-product .widget_shopping_cart,
body.single-product .woocommerce.widget_shopping_cart_content,
body.single-product aside .product_list_widget {
	display: none !important;
}

body.single-product #left-area,
body.single-product #content-area,
body.single-product #primary,
body.single-product .content-area {
	width: 100% !important;
	float: none !important;
	max-width: 100% !important;
}

/* Segurança extra: se o tema ainda renderizar as abas antigas de
   descrição do WooCommerce (por fora do filtro que as remove) ou um
   segundo título duplicado, eles ficam escondidos aqui. Se depois de
   instalar ainda aparecer algo duplicado, me manda um print que eu
   troco o seletor certinho para o seu tema. */
body.single-product .woocommerce-tabs,
body.single-product #tab-description,
body.single-product .wc-tabs-wrapper {
	display: none !important;
}

/* ---------------------------------------------------------------------
   Barra fixa (topo). Começa no fluxo normal da página (onde o hook do
   WooCommerce a posiciona) e só GRUDA no topo quando o usuário rola até
   ela — controlado via JS (mais confiável que só CSS "sticky", que
   alguns temas quebram com overflow em elementos pais).
   --------------------------------------------------------------------- */
.vpf-bar--top {
	position: static;
	z-index: 500;
	background: var(--vpf-primary);
	color: var(--vpf-text-on-primary);
}

.vpf-bar--top.is-stuck {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.vpf-bar__inner {
	width: var(--vpf-content-width);
	max-width: var(--vpf-content-max);
	margin: 0 auto;
	min-height: var(--vpf-bar-height);
	padding: 10px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.vpf-bar__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vpf-bar__title {
	font-weight: 600;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 60vw;
}

.vpf-bar__price {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
}

.vpf-bar__price del {
	opacity: 0.7;
	font-weight: 400;
	font-size: 14px;
	margin-right: 6px;
}

.vpf-bar__action {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

/* Contador de quantidade */
.vpf-qty {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 8px;
	overflow: hidden;
}

.vpf-qty__btn {
	background: transparent;
	border: 0;
	color: var(--vpf-text-on-primary);
	width: 32px;
	height: 36px;
	font-size: 18px;
	cursor: pointer;
	line-height: 1;
}

.vpf-qty__btn:hover {
	background: rgba(255, 255, 255, 0.18);
}

.vpf-qty__input {
	width: 38px;
	height: 36px;
	text-align: center;
	border: 0;
	background: transparent;
	color: var(--vpf-text-on-primary);
	font-weight: 600;
	-moz-appearance: textfield;
}

.vpf-qty__input::-webkit-outer-spin-button,
.vpf-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.vpf-bar__button {
	background: #ffffff;
	color: var(--vpf-primary);
	border: 0;
	border-radius: 8px;
	padding: 0 20px;
	height: 40px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
	transition: transform 0.15s ease, background 0.15s ease;
}

.vpf-bar__button:hover {
	background: #f2f2f2;
}

.vpf-bar__button.is-loading {
	opacity: 0.6;
	cursor: default;
}

.vpf-bar__button.is-added {
	background: #2e7d32;
	color: #fff;
}

/* Botão "Finalizar" — vai direto pro checkout. Preto para destacar ao
   lado do "Adicionar ao carrinho" (branco/bordô), mantendo a paleta
   bordô + preto pedida. */
.vpf-bar__button--buy {
	background: var(--vpf-black);
	color: #ffffff;
}

.vpf-bar__button--buy:hover {
	background: #000000;
}

/* Botão "Carrinho" (mobile) — ícone + texto, identidade bordô. */
.vpf-bar__button--cart {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
}

.vpf-bar__button--cart svg {
	width: 18px;
	height: 18px;
}

/* ---------------------------------------------------------------------
   Barra fixa (rodapé) — só aparece em telas mobile, fixa de verdade
   (não sticky), posicionada acima do seu menu mobile já existente.
   Duas cores lado a lado (modelo enviado, estilo Shopee): metade branca
   com "Finalizar" + divisor + "Carrinho", metade bordô com nome,
   avaliação (quando o produto já tem notas) e preço.
   --------------------------------------------------------------------- */
.vpf-bar--bottom {
	display: none;
}

@media (max-width: 767px) {
	/* No mobile só existe a barra do rodapé (junto do menu). A barra do
	   topo é removida aqui para não duplicar a mesma informação na tela. */
	.vpf-bar--top {
		display: none !important;
	}

	.vpf-bar--bottom {
		display: flex;
		align-items: stretch;
		position: fixed;
		left: 0;
		right: 0;
		bottom: var(--vpf-mobile-menu-height);
		z-index: 490; /* deixe abaixo do z-index do seu menu mobile */
		min-height: 60px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.18);
	}

	.vpf-bar--bottom .vpf-bar__actions {
		flex: 1 1 52%;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding: 8px 12px;
	}

	.vpf-bar--bottom .vpf-bar__finalize {
		flex: 1 1 auto;
		max-width: 150px;
		height: 40px;
		padding: 0 18px;
		border: 0;
		border-radius: 999px;
		background: var(--vpf-black);
		color: #ffffff;
		font-weight: 700;
		font-size: 13px;
		letter-spacing: 0.2px;
		cursor: pointer;
	}

	.vpf-bar--bottom .vpf-bar__finalize:active {
		background: #000000;
	}

	.vpf-bar--bottom .vpf-bar__divider {
		width: 1px;
		align-self: stretch;
		margin: 6px 0;
		background: #dcdcdc;
		flex-shrink: 0;
	}

	.vpf-bar--bottom .vpf-bar__cart-btn {
		flex-shrink: 0;
		background: transparent;
		border: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
		color: #171717;
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.2px;
		text-transform: uppercase;
		cursor: pointer;
	}

	.vpf-bar--bottom .vpf-bar__cart-icon {
		width: 22px;
		height: 22px;
	}

	.vpf-bar--bottom .vpf-bar__cart-icon svg {
		width: 100%;
		height: 100%;
	}

	.vpf-bar--bottom .vpf-bar__info {
		flex: 1 1 48%;
		min-width: 0;
		background: var(--vpf-primary);
		color: var(--vpf-text-on-primary);
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		padding: 8px 16px;
	}

	.vpf-bar--bottom .vpf-bar__title {
		max-width: 100%;
		font-size: 12px;
		font-weight: 700;
		line-height: 1.25;
		white-space: normal;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.vpf-bar--bottom .vpf-bar__rating {
		display: flex;
		align-items: center;
		gap: 4px;
		font-size: 11px;
		font-weight: 600;
	}

	.vpf-bar--bottom .vpf-bar__rating-star {
		width: 12px;
		height: 12px;
		color: var(--vpf-star-color);
	}

	.vpf-bar--bottom .vpf-bar__rating-star svg {
		width: 100%;
		height: 100%;
	}

	.vpf-bar--bottom .vpf-bar__rating-count {
		font-weight: 400;
		opacity: 0.85;
	}

	.vpf-bar--bottom .vpf-bar__price {
		font-size: 17px;
		font-weight: 700;
	}

	/* Evita que o conteúdo final da página fique escondido atrás das
	   duas barras fixas (rodapé do plugin + menu mobile do tema).      */
	body.single-product {
		padding-bottom: calc(60px + var(--vpf-mobile-menu-height));
	}
}

/* ---------------------------------------------------------------------
   Grade de especificações (ícones + rótulo + valor)
   --------------------------------------------------------------------- */
.vpf-specs-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px 24px;
	margin: 28px 0;
	padding-top: 24px;
	border-top: 1px solid var(--vpf-border);
}

.vpf-spec {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	cursor: default;
}

.vpf-spec__icon {
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	color: var(--vpf-icon-color);
	transition: color 0.25s ease, transform 0.25s ease;
}

.vpf-spec:hover .vpf-spec__icon {
	color: var(--vpf-primary);
	transform: scale(1.12) rotate(-4deg);
}

.vpf-spec__icon svg {
	width: 100%;
	height: 100%;
}

.vpf-spec__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.vpf-spec__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.vpf-spec__label {
	font-weight: 600;
	font-size: 15px;
	color: #1a1a1a;
}

.vpf-spec__value {
	font-size: 14px;
	color: #6b6b6b;
}

@media (max-width: 991px) {
	.vpf-specs-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.vpf-specs-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------
   Selo / emblema — igual em todos os produtos, acima do título.
   --------------------------------------------------------------------- */
.vpf-seal {
	margin-bottom: 10px;
}

.vpf-seal img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: contain;
}

/* ---------------------------------------------------------------------
   Bloco padronizado: "Sobre o produto" + "Atendimento" + "Dúvidas
   Frequentes". Igual em todos os produtos — só o texto de "Sobre o
   produto" muda (vem da descrição de cada produto).
   --------------------------------------------------------------------- */
.vpf-details {
	background: var(--vpf-bg-soft);
	border-radius: 12px;
	margin-top: 24px;
	padding: 32px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.vpf-details__col {
	min-width: 0;
}

.vpf-details__block {
	margin-bottom: 32px;
}

.vpf-details__block:last-child {
	margin-bottom: 0;
}

.vpf-details__title {
	color: var(--vpf-primary);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 16px;
}

.vpf-details__desc {
	color: #333;
	font-size: 14.5px;
	line-height: 1.6;
}

.vpf-details__desc p {
	margin: 0 0 12px;
}

.vpf-details__desc p:last-child {
	margin-bottom: 0;
}

.vpf-details__desc-empty {
	color: #777;
	font-size: 14px;
	font-style: italic;
}

/* Atendimento (telefone / whatsapp) */
.vpf-attend {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.vpf-attend__item {
	background: #ffffff;
	border: 1px solid var(--vpf-border);
	border-radius: 10px;
	padding: 22px 12px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	color: #1a1a1a;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vpf-attend__item:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-1px);
}

.vpf-attend__icon {
	width: 34px;
	height: 34px;
	color: var(--vpf-primary);
	transition: color 0.25s ease, transform 0.25s ease;
}

.vpf-attend__item:hover .vpf-attend__icon {
	color: var(--vpf-black);
	transform: scale(1.1);
}

.vpf-attend__icon svg {
	width: 100%;
	height: 100%;
}

.vpf-attend__label {
	font-weight: 700;
	font-size: 13.5px;
	line-height: 1.35;
	color: #1a1a1a;
}

/* Dúvidas Frequentes (acordeão) */
.vpf-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vpf-faq__item {
	background: #ffffff;
	border: 1px solid var(--vpf-border);
	border-radius: 10px;
	overflow: hidden;
}

.vpf-faq__question {
	width: 100%;
	background: transparent;
	border: 0;
	text-align: left;
	padding: 16px 18px;
	font-weight: 700;
	font-size: 14.5px;
	color: #1a1a1a;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.vpf-faq__toggle {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	border: 1.5px solid #9a9a9a;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	line-height: 1;
	color: #6b6b6b;
	transition: transform 0.15s ease;
}

.vpf-faq__item.is-open .vpf-faq__toggle {
	transform: rotate(45deg);
}

.vpf-faq__answer {
	padding: 0 18px 16px;
	font-size: 14px;
	color: #555;
	line-height: 1.55;
}

.vpf-faq__answer p {
	margin: 0;
}

@media (max-width: 767px) {
	.vpf-details {
		grid-template-columns: 1fr;
		padding: 24px 18px;
		gap: 28px;
	}
}

/* ---------------------------------------------------------------------
   Produtos relacionados — grade bonita no desktop, carrossel (arrasta
   com o dedo) no mobile em vez de quebrar linha quando tem mais
   produtos do que cabe.
   --------------------------------------------------------------------- */
body.single-product .related.products {
	width: var(--vpf-content-width);
	max-width: var(--vpf-content-max);
	margin: 32px auto 40px !important;
	padding: 0;
	clear: both;
}

body.single-product .related.products > h2 {
	color: var(--vpf-primary);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 20px;
}

body.single-product .related.products ul.products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
}

body.single-product .related.products ul.products li.product {
	background: #ffffff;
	border: 1px solid var(--vpf-border);
	border-radius: 12px;
	padding: 14px;
	text-align: left;
	list-style: none;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

body.single-product .related.products ul.products li.product::before,
body.single-product .related.products ul.products li.product::after {
	content: none !important;
}

body.single-product .related.products ul.products li.product:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

body.single-product .related.products ul.products li.product a.woocommerce-loop-product__link {
	display: block;
	text-decoration: none;
	color: #1a1a1a;
}

body.single-product .related.products ul.products li.product img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background: var(--vpf-icon-bg);
	border-radius: 8px;
	margin-bottom: 12px;
}

body.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 6px;
	color: #1a1a1a;
}

body.single-product .related.products ul.products li.product .star-rating {
	font-size: 13px;
	margin-bottom: 6px;
}

body.single-product .related.products ul.products li.product .price {
	font-size: 15px;
	font-weight: 700;
	color: var(--vpf-primary);
}

body.single-product .related.products ul.products li.product .price del {
	margin-right: 6px;
	font-size: 13px;
	font-weight: 400;
	opacity: 0.6;
}

body.single-product .related.products ul.products li.product a.button {
	display: inline-block;
	margin-top: 10px;
	padding: 8px 14px;
	border-radius: 20px;
	background: var(--vpf-black);
	color: #ffffff !important;
	font-size: 12.5px;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease;
}

body.single-product .related.products ul.products li.product a.button:hover {
	background: var(--vpf-primary);
}

@media (max-width: 1200px) {
	body.single-product .related.products ul.products {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 991px) {
	body.single-product .related.products ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Mobile: em vez de quebrar em várias linhas, vira carrossel horizontal
   arrastável (com "encaixe" nos cartões). Com poucos produtos, não
   sobra espaço pra rolar e o resultado é uma linha normal — sem
   depender de JS pra decidir. */
@media (max-width: 640px) {
	body.single-product .related.products {
		width: 100%;
		padding: 0;
	}

	body.single-product .related.products > h2 {
		padding: 0 18px;
		font-size: 18px;
	}

	body.single-product .related.products ul.products {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		gap: 14px;
		padding: 2px 18px 12px;
		scrollbar-width: none;
	}

	body.single-product .related.products ul.products::-webkit-scrollbar {
		display: none;
	}

	body.single-product .related.products ul.products li.product {
		flex: 0 0 62%;
		scroll-snap-align: start;
	}
}

@media (max-width: 420px) {
	body.single-product .related.products ul.products li.product {
		flex-basis: 72%;
	}
}

/* =====================================================================
   Animações (entrada suave, hover, transições) — deixam a página mais
   viva sem sair do padrão visual. Respeita quem prefere menos animação.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

	/* Fade + leve deslocamento para cima quando o elemento entra na tela. */
	.vpf-spec,
	.vpf-details__block,
	.vpf-attend__item,
	.vpf-faq__item,
	.vpf-seal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.5s ease, transform 0.5s ease;
	}

	.vpf-spec.vpf-in-view,
	.vpf-details__block.vpf-in-view,
	.vpf-attend__item.vpf-in-view,
	.vpf-faq__item.vpf-in-view,
	.vpf-seal.vpf-in-view {
		opacity: 1;
		transform: translateY(0);
	}

	/* Barra do topo: pequena entrada suave só no momento em que ela gruda
	   (fica fixa) ao rolar a página até ela. */
	.vpf-bar--top.is-stuck {
		animation: vpf-slide-down 0.3s ease both;
	}

	.vpf-bar--bottom {
		animation: vpf-slide-up 0.4s ease both;
	}

	@keyframes vpf-slide-down {
		from { transform: translateY(-100%); }
		to   { transform: translateY(0); }
	}

	@keyframes vpf-slide-up {
		from { transform: translateY(100%); }
		to   { transform: translateY(0); }
	}

	/* Botão de lupa: pulso sutil para chamar atenção discretamente. */
	.vpf-zoom-btn {
		animation: vpf-pulse 2.4s ease-in-out infinite;
	}

	.vpf-zoom-btn:hover {
		animation: none;
		transform: scale(1.12);
	}

	@keyframes vpf-pulse {
		0%, 100% { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 0 rgba(109, 22, 38, 0.25); }
		50%      { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 0 6px rgba(109, 22, 38, 0); }
	}

	.vpf-zoom-btn,
	.vpf-attend__item,
	.vpf-faq__item,
	.vpf-bar__button,
	.vpf-qty__btn {
		transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	}

	.vpf-bar__button:hover {
		transform: translateY(-1px);
		box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
	}

	.vpf-bar__button:active {
		transform: translateY(0) scale(0.96);
	}

	.vpf-faq__item:hover {
		box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
	}

	/* Resposta do acordeão com transição de altura mais suave (além do
	   slideUp/slideDown do jQuery, que já usa easing). */
	.vpf-faq__answer {
		transition: opacity 0.2s ease;
	}
}