/* Bluideias — cabeçalho: link "Catálogo" */
.chb-header__catalog {
	display: inline-flex; align-items: center; gap: .4em;
	padding: .55em 1.1em; border-radius: 8px;
	background: var(--chb-primary); color: var(--chb-primary-ink, #fff); font-weight: 600; font-size: var(--chb-text-sm);
	text-decoration: none;
}
.chb-header__catalog:hover { background: var(--chb-primary-dark); color: var(--chb-primary-ink, #fff); }
@media (max-width: 768px) { .chb-header__catalog { display: none; } }

/* Bluideias — rodapé: faixa de benefícios + coluna de categorias */
.chb-footer__features {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--chb-space-2);
	padding-block: var(--chb-space-3); border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.chb-footer__feature { display: flex; align-items: center; gap: 10px; font-size: var(--chb-text-sm); color: rgba(255, 255, 255, .85); }
.chb-footer__feature span { font-size: 18px; flex: none; }

/* Bluideias — card de produto como link inteiro com botão "Saber mais" (catálogo, sem carrinho) */
.chb-product-card__btn {
	display: inline-flex; align-items: center; justify-content: center;
	margin-top: auto; padding: .5em 1em; border-radius: var(--chb-radius);
	border: 2px solid var(--chb-primary); color: var(--chb-primary-text, var(--chb-primary));
	font-weight: 600; font-size: var(--chb-text-sm); text-align: center;
	transition: background .15s ease, color .15s ease;
}
.chb-product-card:hover .chb-product-card__btn { background: var(--chb-primary); color: var(--chb-primary-ink, #fff); }

/* Layout uniforme dos cards: o título reserva SEMPRE 3 linhas (e corta com "…"
   se passar disso) e o botão fica colado na base — assim todos os cards da
   linha têm a mesma altura e o botão alinha, não importa o tamanho do nome.
   O card do canônico é display:block; aqui vira coluna flex pra o corpo
   poder esticar até a base. */
.chb-product-card { display: flex; flex-direction: column; }
.chb-product-card__media { flex: none; }
.chb-product-card__body { flex: 1 1 auto; }
.chb-product-card__title {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3;
	overflow: hidden; min-height: calc(3 * 1.3em); /* 1.3 = line-height do título no canônico */
}
.chb-product-card__price { margin-bottom: 10px; }

/* Bluideias — botão do CTA que aponta pro WhatsApp ganha o ícone da marca.
   Máscara (não <img>/<svg> no HTML) porque o template do CTA é do ch-builder
   (imutável): o seletor pelo href pega qualquer botão do CTA que vá pro
   WhatsApp e o ícone herda a cor do texto do botão (currentColor). */
:root {
	--chbx-wa-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347M12.05 21.785h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884M20.463 3.488A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413'/%3E%3C/svg%3E");
}
.chb-cta .chb-btn[href*="wa.me"]::before,
.chb-cta .chb-btn[href*="whatsapp.com"]::before {
	content: ""; flex: none; width: 1.3em; height: 1.3em; background: currentColor;
	-webkit-mask: var(--chbx-wa-icon) center / contain no-repeat;
	mask: var(--chbx-wa-icon) center / contain no-repeat;
}

/* ── Correções de bugs do ch-builder 0.8.0 (cópia imutável — corrigir também no canônico) ── */

/* Hero com vídeo de fundo: o overlay escuro sumia. O wrapper do vídeo é
   position:relative e o overlay é estático (ambos na mesma célula do grid):
   elemento posicionado pinta POR CIMA de estático, então o vídeo cobria o
   overlay. Tornando o overlay posicionado, a ordem do DOM volta a valer
   (vídeo → overlay → conteúdo, que já tem z-index:1). */
.chb-hero__overlay { position: relative; }

/* Seção Texto + Imagem "gradiente escuro" (divulgação do catálogo): a imagem
   saía distorcida. A regra base dá min-height:280px a TODA imagem da seção e
   o estilo escuro limita a largura a 50% — numa foto horizontal (ex.: 1132×800)
   a altura mínima forçava o esticamento vertical (object-fit:fill). Aqui a
   proporção original sempre vence: tamanho natural limitado por largura da
   coluna E por uma altura máxima — foto horizontal ocupa a coluna, capa
   vertical continua um mockup menor (como era a intenção). */
.chb-text-image--dark-gradient .chb-text-image__media img {
	width: auto; height: auto; min-height: 0;
	max-width: 100%; max-height: 420px;
	object-fit: contain; display: block; margin-inline: auto;
}

/* Menu mobile aberto: o painel é position:fixed (fora do fluxo), então com o
   megamenu "Produtos" expandido (8 categorias) as últimas categorias e os itens
   "Sobre"/"Contato" passavam do rodapé da tela sem como rolar. Limita à altura
   visível (header = 68px) e rola dentro do próprio painel. (bug do ch-builder
   0.8.0 — corrigir também no canônico) */
@media (max-width: 768px) {
	.chb-nav {
		max-height: calc(100vh - 68px);
		max-height: calc(100dvh - 68px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
	/* O megamenu tem o próprio max-height/overflow (regra do desktop, 100vh - 90px):
	   dentro do menu mobile viraria uma segunda rolagem aninhada. Quem rola é o
	   painel todo (acima), então a lista de categorias cresce livremente. */
	.chb-nav .chb-megamenu { max-height: none; overflow: visible; }
}

/* Leadster — o pop-up de conversa que abre sozinho ficava pra fora da tela.
   O widget fixa width:420px e min-height:300px e só vira tela cheia em aparelhos
   de tela <= 720px (max-device-width: mede o APARELHO, não a janela). Numa janela
   estreita ou baixa de um aparelho maior (notebook com janela reduzida, DevTools,
   celular deitado) ele passava da borda — cortado na esquerda/no topo. Aqui ele
   nunca excede a área visível. (min-device-width: 721px) é o complemento exato da
   regra de tela cheia deles: no celular em pé nada muda. !important porque o CSS
   do widget é injetado por JS depois deste arquivo. */
@media (min-device-width: 721px) {
	.nld-chatbot .nld-conversation {
		/* % (não vw): num elemento fixo é a área visível SEM a barra de rolagem; 100vw a incluiria */
		width: min(420px, calc(100% - 32px)) !important;
		min-height: 0 !important;
		max-height: min(370px, calc(100vh - 72px)) !important;
		max-height: min(370px, calc(100dvh - 72px)) !important;
	}
}