/**
 * Vapor Hub — Layout da página inicial (espelho do MVP)
 *
 * Estilos específicos das template-parts da home. Depende de design-system.css.
 *
 * @package VaporHub
 * @since   1.0.1
 */

/* =========================================================================
   0. CONTEXTO — main em tela cheia (Hello Elementor / Elementor)
   ========================================================================= */

body.home #content,
body.home .site-main,
main#site-content.vh-home {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.vh-home {
	background-color: var(--vh-cor-fundo);
}

.vh-home > .vh-section:not(.vh-beneficios),
.vh-home-documento {
	padding-top: var(--vh-espaco-8);
	padding-bottom: 0;
	margin: 0;
}

.vh-home > .vh-section:not(.vh-beneficios):last-child {
	padding-bottom: var(--vh-espaco-8);
}

.vh-home-documento-miolo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vh-espaco-1);
	width: 100%;
	max-width: none;
	padding: var(--vh-espaco-3) var(--vh-espaco-4);
	background: var(--vh-cor-superficie);
	border: 1px solid var(--vh-cor-borda);
	border-radius: var(--vh-raio-lg);
}

.vh-home-documento-titulo {
	margin: 0;
	font-size: var(--vh-fonte-base);
	font-weight: var(--vh-fonte-peso-extra);
	line-height: var(--vh-linha-apertada);
}

.vh-home-documento .vh-vitrine-descricao {
	margin: 0;
	max-width: none;
	text-align: start;
	font-size: var(--vh-fonte-sm);
	color: var(--vh-cor-texto-suave);
}

@media (min-width: 768px) {
	.vh-home > .vh-section:not(.vh-beneficios),
	.vh-home-documento {
		padding-top: var(--vh-espaco-10);
	}

	.vh-home-documento-miolo {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--vh-espaco-6);
	}

	.vh-home-documento-titulo {
		flex: 0 1 auto;
		font-size: var(--vh-fonte-lg);
	}

	.vh-home-documento .vh-vitrine-descricao {
		flex: 1 1 16rem;
		text-align: end;
	}
}

/* =========================================================================
   1. HERO (banner full-bleed, ~600px)
   ========================================================================= */

.vh-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(420px, 75vh, 640px);
	width: 100%;
	overflow: hidden;
	text-align: center;
}

.vh-hero-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.vh-hero-bg-img {
	display: block;
	width: 100%;
	height: 100%;
}

.vh-hero-bg-img > img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Carrossel do hero: imagens empilhadas com transição suave. */
.vh-hero-bg--carrossel .vh-hero-bg-img {
	position: absolute;
	inset: 0;
	opacity: 0;
}

/*
 * A transição de fade só entra depois que o JS marca o carrossel como pronto.
 * Assim o primeiro slide (elemento LCP) pinta de imediato, sem aguardar transição.
 */
.vh-hero-bg--carrossel.vh-hero-pronto .vh-hero-bg-img {
	transition: opacity 1s ease;
}

.vh-hero-bg--carrossel .vh-hero-bg-img--ativa {
	opacity: 1;
}

/* =========================================================================
   HERO — Modo "somente imagem" (carrossel de slides ligado no painel)
   A arte do slide ocupa o banner inteiro, sem textos/botões por cima. A
   altura acompanha a própria imagem (sem corte), inclusive a versão mobile.
   ========================================================================= */
.vh-hero--imagem {
	min-height: 0;
	display: block;
	overflow: visible;
}

.vh-hero--imagem .vh-hero-bg {
	position: relative;
	inset: auto;
}

.vh-hero--imagem .vh-hero-bg-img {
	height: auto;
}

.vh-hero--imagem .vh-hero-bg-img > img {
	height: auto;
}

/* Carrossel (2+ slides): empilha mantendo a altura do primeiro slide. */
.vh-hero--imagem .vh-hero-bg--carrossel .vh-hero-bg-img {
	position: absolute;
	inset: 0;
	height: 100%;
}

.vh-hero--imagem .vh-hero-bg--carrossel .vh-hero-bg-img:first-child {
	position: relative;
}

.vh-hero--imagem .vh-hero-bg--carrossel .vh-hero-bg-img > img {
	height: 100%;
}

.vh-hero--imagem .vh-hero-bg--carrossel .vh-hero-bg-img:first-child > img {
	height: auto;
}

.vh-hero-pontos {
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: clamp(16px, 4vh, 32px);
	display: flex;
	justify-content: center;
	pointer-events: none;
}

/* O botão tem a área de toque mínima (24 × 24); o ponto desenhado é o ::before. */
.vh-hero-ponto {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	min-height: 24px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	pointer-events: auto;
}

.vh-hero-ponto::before {
	content: "";
	width: 11px;
	height: 11px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	background: transparent;
	transition: background 0.2s ease, transform 0.2s ease;
}

.vh-hero-ponto--ativo::before {
	background: #fff;
	transform: scale(1.15);
}

/* Setas de navegação do carrossel */
.vh-hero-setas {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 clamp(10px, 2.5vw, 24px);
	pointer-events: none;
}

.vh-hero-seta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 2px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	background: rgba(12, 24, 48, 0.35);
	color: #fff;
	cursor: pointer;
	pointer-events: auto;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
	backdrop-filter: blur(4px);
}

.vh-hero-seta:hover,
.vh-hero-seta:focus-visible {
	background: color-mix(in srgb, var(--vh-cor-primaria) 75%, transparent);
	border-color: #fff;
	outline: none;
	transform: scale(1.05);
}

.vh-hero-seta:active {
	transform: scale(0.98);
}

.vh-hero-seta svg {
	display: block;
}

.vh-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.45) 45%,
		rgba(0, 0, 0, 0.15) 100%
	);
}

.vh-hero-conteudo {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	max-width: 48rem;
	padding-block: var(--vh-espaco-12);
}

.vh-hero-badge {
	display: inline-block;
	margin-bottom: var(--vh-espaco-4);
	padding: var(--vh-espaco-1) var(--vh-espaco-3);
	font-size: var(--vh-fonte-xs);
	font-weight: var(--vh-fonte-peso-bold);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--vh-cor-primaria);
	background: color-mix(in srgb, var(--vh-cor-primaria) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--vh-cor-primaria) 35%, transparent);
	border-radius: var(--vh-raio-full);
	backdrop-filter: blur(8px);
}

.vh-hero-titulo {
	margin: 0 0 var(--vh-espaco-6);
	font-size: clamp(var(--vh-fonte-3xl), 5vw, var(--vh-fonte-5xl));
	font-weight: var(--vh-fonte-peso-extra);
	line-height: var(--vh-linha-apertada);
	color: #ffffff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.vh-hero-titulo .vh-hero-titulo-destaque {
	display: block;
	margin-top: var(--vh-espaco-2);
	color: var(--vh-cor-primaria);
}

.vh-hero-subtitulo {
	margin: 0 0 var(--vh-espaco-8);
	max-width: 36rem;
	font-size: clamp(var(--vh-fonte-base), 2vw, var(--vh-fonte-xl));
	font-weight: var(--vh-fonte-peso-medio);
	line-height: var(--vh-linha-relaxada);
	color: rgba(255, 255, 255, 0.88);
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25);
}

.vh-hero-acoes {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: var(--vh-espaco-4);
	width: 100%;
	max-width: 28rem;
}

@media (min-width: 576px) {
	.vh-hero-acoes {
		flex-direction: row;
		max-width: none;
		width: auto;
	}
}

/* Botões do hero: primário forte + secundário vidro (como no MVP) */
.vh-hero .vh-btn-primary {
	padding: var(--vh-espaco-4) var(--vh-espaco-8);
	font-size: var(--vh-fonte-lg);
	font-weight: var(--vh-fonte-peso-bold);
	border-radius: var(--vh-raio-full);
	box-shadow: 0 12px 40px color-mix(in srgb, var(--vh-cor-primaria) 28%, transparent);
}

.vh-hero .vh-btn-secondary {
	background: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.vh-hero .vh-btn-secondary:hover,
.vh-hero .vh-btn-secondary:focus-visible {
	background: rgba(255, 255, 255, 0.22);
	border-color: rgba(255, 255, 255, 0.45);
	color: #ffffff;
	text-decoration: none;
}

/* Hero no mobile: legibilidade e botões em coluna, sem perder conteúdo. */
@media (max-width: 767px) {
	.vh-hero {
		min-height: clamp(360px, 64vh, 520px);
	}

	/* Em telas estreitas o conteúdo é centralizado, então escurecemos de forma
	   uniforme (gradiente vertical) para o texto ficar sempre legível. */
	.vh-hero-overlay {
		background: linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.55) 0%,
			rgba(0, 0, 0, 0.45) 45%,
			rgba(0, 0, 0, 0.65) 100%
		);
	}

	.vh-hero-conteudo {
		padding-block: var(--vh-espaco-10);
	}

	.vh-hero-titulo {
		font-size: clamp(1.7rem, 8vw, 2.4rem);
	}

	.vh-hero-subtitulo {
		font-size: var(--vh-fonte-base);
	}

	.vh-hero-acoes .vh-btn {
		width: 100%;
		justify-content: center;
	}

	.vh-hero-pontos {
		bottom: 12px;
	}

	.vh-hero-setas {
		padding: 0 8px;
	}

	.vh-hero-seta {
		width: 38px;
		height: 38px;
	}
}

/* =========================================================================
   HERO — Texto e imagem (slide editorial no mesmo carrossel)
   ========================================================================= */

.vh-hero--misto {
	display: block;
	min-height: 0;
	overflow: hidden;
	text-align: left;
	background: var(--vh-cor-fundo);
}

.vh-hero-misto-caixa {
	padding-block: var(--vh-espaco-6);
}

.vh-hero-palco {
	display: grid;
}

.vh-hero-slide {
	grid-area: 1 / 1;
	background: var(--vh-cor-fundo);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.vh-hero-slide.is-ativo {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vh-hero-palco.vh-hero-pronto .vh-hero-slide {
	transition: opacity 0.6s ease;
}

.vh-hero-editorial {
	display: flex;
	flex-direction: column;
	gap: var(--vh-espaco-5);
}

.vh-hero-editorial-copia {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vh-espaco-3);
}

.vh-hero-editorial-rotulo {
	margin: 0;
	font-size: var(--vh-fonte-xs);
	font-weight: var(--vh-fonte-peso-bold);
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--vh-cor-texto-suave);
}

.vh-hero-editorial-titulo,
h1.vh-hero-editorial-titulo,
h2.vh-hero-editorial-titulo,
h3.vh-hero-editorial-titulo,
p.vh-hero-editorial-titulo {
	margin: 0;
	max-width: 14ch;
	font-family: var(--vh-fonte-familia);
	font-size: clamp(1.75rem, 6vw, var(--vh-fonte-4xl));
	font-weight: var(--vh-fonte-peso-extra);
	line-height: var(--vh-linha-apertada);
	color: var(--vh-cor-texto);
}

.vh-hero-editorial-resumo {
	margin: 0;
	max-width: 38rem;
	font-size: var(--vh-fonte-base);
	line-height: 1.5;
	color: var(--vh-cor-texto-suave);
}

.vh-hero-editorial-acoes {
	width: 100%;
	margin-top: var(--vh-espaco-2);
}

.vh-hero-editorial-acoes .vh-btn {
	width: 100%;
	justify-content: center;
}

.vh-hero-editorial-foto {
	display: block;
	order: -1;
	overflow: hidden;
	border-radius: var(--vh-raio-produto);
	background: var(--vh-cor-superficie);
	aspect-ratio: 4 / 3;
}

.vh-hero-editorial-foto:focus-visible {
	outline: 2px solid var(--vh-cor-primaria);
	outline-offset: 3px;
}

.vh-hero-foto,
.vh-hero-foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vh-hero-slide--imagem,
.vh-hero-slide--imagem .vh-hero-slide-cheia,
.vh-hero-slide--imagem .vh-hero-editorial-foto {
	height: 100%;
}

.vh-hero-slide--imagem .vh-hero-editorial-foto {
	aspect-ratio: auto;
	border-radius: var(--vh-raio-produto);
}

.vh-hero-slide--imagem .vh-hero-foto,
.vh-hero-slide--imagem .vh-hero-foto img {
	height: 100%;
	object-fit: cover;
}

.vh-hero--misto .vh-hero-controles {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--vh-espaco-3);
	margin-top: var(--vh-espaco-4);
}

.vh-hero--misto .vh-hero-setas {
	position: static;
	inset: auto;
	width: auto;
	padding: 0;
	gap: 8px;
}

.vh-hero--misto .vh-hero-seta {
	width: 36px;
	height: 36px;
	border: 1px solid var(--vh-cor-borda);
	background: var(--vh-cor-superficie);
	color: var(--vh-cor-texto);
	backdrop-filter: none;
}

.vh-hero--misto .vh-hero-seta:hover,
.vh-hero--misto .vh-hero-seta:focus-visible {
	border-color: var(--vh-cor-primaria);
	background: var(--vh-cor-superficie);
	color: var(--vh-cor-primaria);
}

.vh-hero--misto .vh-hero-pontos {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	width: auto;
}

.vh-hero--misto .vh-hero-ponto::before {
	border-color: var(--vh-cor-texto-suave);
	background: transparent;
}

.vh-hero--misto .vh-hero-ponto--ativo::before {
	width: 28px;
	border-radius: var(--vh-raio-full);
	border-color: var(--vh-cor-primaria);
	background: var(--vh-cor-primaria);
	transform: none;
}

.vh-hero-links {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.vh-hero-link {
	position: absolute;
	inset: 0;
	background: transparent;
	pointer-events: none;
}

.vh-hero-link.is-ativo {
	pointer-events: auto;
}

@media (min-width: 900px) {
	.vh-hero-misto-caixa {
		padding-block: var(--vh-espaco-10);
	}

	.vh-hero-editorial {
		flex-direction: row;
		align-items: center;
		gap: var(--vh-espaco-10);
		min-height: 420px;
	}

	.vh-hero-editorial-copia {
		flex: 1 1 42%;
	}

	.vh-hero-editorial-foto {
		flex: 1 1 52%;
		order: 0;
	}

	.vh-hero-editorial-titulo,
	h1.vh-hero-editorial-titulo,
	h2.vh-hero-editorial-titulo,
	h3.vh-hero-editorial-titulo,
	p.vh-hero-editorial-titulo {
		font-size: clamp(var(--vh-fonte-4xl), 3.4vw, var(--vh-fonte-5xl));
	}

	.vh-hero-editorial-acoes,
	.vh-hero-editorial-acoes .vh-btn {
		width: auto;
	}

	.vh-hero--misto .vh-hero-controles {
		justify-content: flex-start;
		max-width: 46%;
	}

	.vh-hero-palco.vh-hero-pronto .is-ativo .vh-hero-editorial-foto img {
		transform: scale(1);
		transition: transform 1.1s ease;
	}

	.vh-hero-palco.vh-hero-pronto .vh-hero-editorial-foto img {
		transform: scale(1.03);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vh-hero-palco.vh-hero-pronto .vh-hero-slide,
	.vh-hero-palco.vh-hero-pronto .vh-hero-editorial-foto img {
		transition: none;
		transform: none;
	}
}

/* =========================================================================
   2. BENEFÍCIOS — faixa compacta (surface + borda inferior)
   ========================================================================= */

.vh-beneficios.vh-section {
	padding-block: var(--vh-espaco-5);
	background-color: var(--vh-cor-superficie);
	border-bottom: 1px solid var(--vh-cor-borda);
}

.vh-beneficios-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0;
	border: 1px solid var(--vh-cor-borda);
	border-radius: var(--vh-raio-lg);
	overflow: hidden;
	background: var(--vh-cor-superficie);
}

@media (min-width: 900px) {
	.vh-beneficios-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vh-beneficios-item,
.vh-beneficios-card {
	display: flex;
	align-items: flex-start;
	gap: var(--vh-espaco-3);
	justify-content: flex-start;
	text-align: left;
	padding: var(--vh-espaco-5) var(--vh-espaco-4);
	border-right: 1px solid var(--vh-cor-borda);
	border-bottom: 1px solid var(--vh-cor-borda);
}

@media (min-width: 900px) {
	.vh-beneficios-item:nth-child(4n),
	.vh-beneficios-card:nth-child(4n) {
		border-right: 0;
	}

	.vh-beneficios-item,
	.vh-beneficios-card {
		border-bottom: 0;
	}
}

@media (max-width: 899px) {
	.vh-beneficios-item:nth-child(2n),
	.vh-beneficios-card:nth-child(2n) {
		border-right: 0;
	}

	.vh-beneficios-item:nth-last-child(-n + 2),
	.vh-beneficios-card:nth-last-child(-n + 2) {
		border-bottom: 0;
	}
}

@media (max-width: 767px) {
	.vh-home-head {
		margin-bottom: var(--vh-espaco-8);
	}

	.vh-home-title {
		font-size: var(--vh-fonte-2xl);
		line-height: 1.2;
	}

	.vh-categorias-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vh-espaco-3);
	}

	.vh-beneficios-item,
	.vh-beneficios-card {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

.vh-beneficios-icone {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--vh-raio-full);
	background: var(--vh-cor-primaria-leve);
	color: var(--vh-cor-primaria);
}

.vh-beneficios-icone svg {
	width: 1.35rem;
	height: 1.35rem;
}

.vh-beneficios-titulo {
	display: block;
	margin-bottom: var(--vh-espaco-1);
	font-size: var(--vh-fonte-sm);
	font-weight: var(--vh-fonte-peso-bold);
	line-height: var(--vh-linha-apertada);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--vh-cor-texto);
}

.vh-beneficios-descricao {
	display: block;
	font-size: var(--vh-fonte-xs);
	line-height: var(--vh-linha-normal);
}

/* =========================================================================
   3. CATEGORIAS — grid de cards 4:5
   ========================================================================= */

.vh-categorias {
	background-color: var(--vh-cor-fundo);
}

.vh-categorias-header {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vh-espaco-1);
	margin-bottom: var(--vh-espaco-4);
}

.vh-categorias-eyebrow {
	display: block;
	margin: 0;
	font-size: var(--vh-fonte-sm);
	font-weight: var(--vh-fonte-peso-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vh-cor-primaria);
}

.vh-categorias-titulo {
	margin: 0;
	font-size: var(--vh-fonte-xl);
	font-weight: var(--vh-fonte-peso-extra);
	color: var(--vh-cor-texto);
}

.vh-categorias-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(140px, 1fr));
	gap: var(--vh-espaco-3);
	justify-content: center;
}

@media (min-width: 768px) {
	.vh-categorias-grid {
		grid-template-columns: repeat(3, minmax(150px, 1fr));
	}
}

@media (min-width: 1200px) {
	.vh-categorias-grid {
		grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	}
}

.vh-categorias-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--vh-raio-2xl);
	background: var(--vh-cor-texto);
	text-decoration: none;
	color: inherit;
	transition: transform var(--vh-transicao-lenta), box-shadow var(--vh-transicao);
}

.vh-categorias-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vh-sombra-xl);
	text-decoration: none;
}

.vh-categorias-card-imagem {
	position: absolute;
	inset: 0;
}

.vh-categorias-card-imagem img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.82;
	transition: opacity 0.5s ease, transform 0.55s ease;
}

.vh-categorias-card:hover .vh-categorias-card-imagem img {
	opacity: 1;
	transform: scale(1.08);
}

.vh-categorias-card-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: var(--vh-espaco-4);
	text-align: center;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.82) 0%,
		rgba(0, 0, 0, 0.2) 45%,
		transparent 100%
	);
}

.vh-categorias-card-nome {
	display: block;
	font-size: var(--vh-fonte-sm);
	font-weight: var(--vh-fonte-peso-bold);
	line-height: var(--vh-linha-apertada);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ffffff;
}

.vh-categorias-card-qtd {
	display: block;
	margin-top: var(--vh-espaco-1);
	color: rgba(255, 255, 255, 0.75);
}

/* =========================================================================
   4. VITRINES — trilhos por categoria + fallback destaques
   ========================================================================= */

.vh-vitrine {
	background-color: var(--vh-cor-fundo);
}

.vh-vitrine:nth-of-type(even) {
	background-color: var(--vh-cor-superficie);
}

.vh-vitrine-cabeca {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vh-espaco-5);
	margin-bottom: var(--vh-espaco-8);
}

@media (min-width: 768px) {
	.vh-vitrine-cabeca {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}
}

.vh-vitrine-kicker {
	margin: 0 0 var(--vh-espaco-2);
	font-size: var(--vh-fonte-sm);
	font-weight: var(--vh-fonte-peso-bold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vh-cor-primaria);
}

.vh-vitrine-titulo {
	margin: 0 0 var(--vh-espaco-3);
	font-size: clamp(var(--vh-fonte-2xl), 3vw, var(--vh-fonte-3xl));
	font-weight: var(--vh-fonte-peso-extra);
	line-height: var(--vh-linha-apertada);
	color: var(--vh-cor-texto);
}

.vh-vitrine-descricao {
	margin: 0;
	max-width: 38rem;
	font-size: var(--vh-fonte-base);
	line-height: var(--vh-linha-relaxada);
	color: var(--vh-cor-texto-suave);
}

.vh-vitrine-cta {
	flex-shrink: 0;
}

.vh-home-head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--vh-espaco-4);
	margin-bottom: var(--vh-espaco-10);
}

@media (min-width: 768px) {
	.vh-home-head {
		flex-direction: row;
		align-items: flex-end;
	}
}

.vh-home-head .vh-badge {
	margin-bottom: var(--vh-espaco-2);
	background: transparent;
	border: none;
	padding: 0;
	font-size: var(--vh-fonte-sm);
	font-weight: var(--vh-fonte-peso-bold);
	letter-spacing: 0.08em;
	color: var(--vh-cor-primaria);
}

.vh-home-title {
	margin: 0;
	font-size: var(--vh-fonte-3xl);
	font-weight: var(--vh-fonte-peso-extra);
	color: var(--vh-cor-texto);
}

.vh-home-head .vh-btn-ghost {
	align-self: flex-start;
	padding: 0 0 var(--vh-espaco-1);
	font-size: var(--vh-fonte-base);
	font-weight: var(--vh-fonte-peso-bold);
	color: var(--vh-cor-texto);
	border-bottom: 2px solid var(--vh-cor-primaria);
	border-radius: 0;
}

.vh-home-head .vh-btn-ghost:hover {
	color: var(--vh-cor-primaria);
	background: transparent;
}

.vh-home-grid {
	width: 100%;
}

.vh-home-grid .woocommerce ul.products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--vh-espaco-3);
}

@media (min-width: 480px) {
	.vh-home-grid .woocommerce ul.products {
		gap: var(--vh-espaco-4);
	}
}

@media (min-width: 768px) {
	.vh-home-grid .woocommerce ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--vh-espaco-6);
	}
}

@media (min-width: 1200px) {
	.vh-home-grid .woocommerce ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.vh-home-grid .woocommerce {
	margin-bottom: 0;
}