/*
 * CH Builder Child — reskin do WooCommerce + estrutura fora do construtor.
 *
 * Carregado por inc/chb-bridge.php DEPOIS do chb-base.css do plugin (dep
 * ['chb-base']), então sobrescreve componentes sem !important. Usa só tokens
 * --chb-* (injetados por chb_brand_css()). NÃO substitui o CSS estrutural do
 * WooCommerce — só cor, raio e tipografia.
 *
 * Cole overrides específicos do projeto no fim, na seção marcada.
 */

/* Tokens locais — cores que o plugin não expõe (com fallback sensato).
   Tipografia da marca: assets/css/chb-fonts-standard.css (handle `chb-fonts`,
   apontado em Identidade → Fontes de marca) — NÃO declarar @import aqui. */
:root {
	--chb-wa: #1ec773;
	--chb-wa-dark: #15a862;
	--chb-success: #14803b;
	--chb-success-soft: #e6f7ec;

	/* Largura máxima do conteúdo — design pede ~1200; cliente preferiu 1280.
	   .chb-shell (chb-base.css) usa este token; vale pro site todo. */
	--chb-shell: 1280px;
}

/* ── Sticky footer — chb-base.css não define isto; sem ele o rodapé sobe em
      páginas curtas (carrinho vazio, 404, minha conta). ── */
body.chb-site { display: flex; flex-direction: column; min-height: 100vh; }
body.chb-site .chb-main { flex: 1 0 auto; }

/* ── Página comum (page.php) ── */
.chb-page { padding-block: var(--chb-space-4, 32px); }
.chb-page__title { font-family: var(--chb-font-display); font-size: var(--chb-text-3xl, 2rem); margin: 0 0 var(--chb-space-2, 16px); }

/* ── Barra de promoção (inc/promo-bar.php) ── */
.chb-promo-bar {
	background: var(--chb-ink); color: var(--chb-paper);
	font-family: var(--chb-font-condensed, var(--chb-font)); font-size: 12.5px;
	letter-spacing: .04em; text-transform: uppercase;
}
.chb-promo-bar .chb-shell { display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: center; padding-block: 7px; }
.chb-promo-bar span { position: relative; }
.chb-promo-bar span + span::before { content: '·'; position: absolute; left: -13px; opacity: .5; }

/* ── Wrapper de loja (inc/woocommerce.php) ── */
.chb-woo { padding-block: var(--chb-space-4, 32px); }
.woocommerce-breadcrumb { font-size: 12px; letter-spacing: .5px; text-transform: uppercase; color: var(--chb-ink-mute); margin-bottom: var(--chb-space-2, 16px); }

/* ── Grade de produtos ── */
.woocommerce ul.products {
	display: grid; gap: var(--chb-space-3, 24px); margin: 0; padding: 0; list-style: none;
	grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products li.product {
	margin: 0; width: auto; float: none;
	background: var(--chb-paper); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg, 16px);
	padding: var(--chb-space-2, 16px); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.woocommerce ul.products li.product:hover {
	box-shadow: var(--chb-shadow); transform: translateY(-3px);
	border-color: rgba(var(--chb-primary-rgb), .35);
}
.woocommerce ul.products li.product a img {
	border-radius: var(--chb-radius, 10px); aspect-ratio: 1 / 1; object-fit: cover;
	background: var(--chb-paper-alt); margin-bottom: var(--chb-space-1, 8px);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--chb-font-display); font-weight: 600; font-size: var(--chb-text-sm, 14px);
	color: var(--chb-ink); padding: 0; line-height: 1.35;
}
.woocommerce ul.products li.product .price {
	color: var(--chb-primary); font-weight: 700; font-size: var(--chb-text-base, 16px);
}
.woocommerce ul.products li.product .price del { opacity: .5; font-weight: 400; font-size: var(--chb-text-sm, 13px); }
.woocommerce ul.products li.product .price ins { text-decoration: none; }

/* Selo de promoção */
.woocommerce span.onsale {
	background: var(--chb-accent); color: var(--chb-accent-text, #fff);
	border-radius: 6px; padding: 3px 9px; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; min-height: 0; line-height: 1.6;
	top: 10px; right: 10px; left: auto; margin: 0;
}

/* Botões */
.woocommerce a.button, .woocommerce button.button,
.woocommerce .single_add_to_cart_button, .chb-loop-btn {
	background: var(--chb-primary); color: var(--chb-primary-ink, #fff);
	border-radius: var(--chb-radius, 8px); font-family: var(--chb-font); font-weight: 700;
	font-size: var(--chb-text-sm, 13px); text-transform: uppercase; letter-spacing: .03em;
	padding: 10px 18px; transition: background .15s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce .single_add_to_cart_button:hover, .chb-loop-btn:hover { background: var(--chb-primary-dark); color: var(--chb-primary-ink, #fff); }
.woocommerce ul.products li.product .chb-loop-btn { display: block; text-align: center; margin-top: 10px; }

/* Avisos */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
	border-top-color: var(--chb-primary); border-radius: var(--chb-radius-lg, 14px);
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--chb-primary); }

/* Tabelas de carrinho / checkout */
.woocommerce table.shop_table { border-radius: var(--chb-radius-lg, 14px); }
.woocommerce table.shop_table th { background: var(--chb-paper-alt); }
.woocommerce #place_order, .woocommerce-checkout #place_order {
	background: var(--chb-primary); color: var(--chb-primary-ink, #fff);
	border-radius: var(--chb-radius, 8px); font-weight: 700; text-transform: uppercase;
}
.woocommerce #place_order:hover { background: var(--chb-primary-dark); }

/* ── Página de produto (PDP) ── */
.single-product .product .product_title {
	font-family: var(--chb-font-display); font-size: clamp(24px, 3.4vw, 34px);
	color: var(--chb-secondary, var(--chb-ink));
}
.single-product .price { color: var(--chb-primary); font-family: var(--chb-font-display); font-weight: 700; }
.single-product .woocommerce-product-details__short-description { color: var(--chb-ink-soft); font-size: var(--chb-text-sm, 14px); }
.single-product form.cart {
	background: var(--chb-paper); border: 1px solid var(--chb-line); border-radius: var(--chb-radius-lg, 14px);
	box-shadow: var(--chb-shadow); padding: var(--chb-space-3, 20px); margin-block: var(--chb-space-3, 20px);
}

/* Galeria própria (chb_pdp_gallery, inc/single-product.php) — sem flexslider.
   Imagem principal num box de proporção fixa (some o problema de dimensionar
   dentro do grid) + miniaturas que trocam a src no clique. */
.chb-gallery { display: block; }
@media (min-width: 700px) {
	.chb-gallery {
		display: grid;
		grid-template-columns: 82px minmax(0, 1fr);
		gap: 12px;
		align-items: start;
	}
	.chb-gallery__thumbs { order: -1; flex-direction: column; }
	/* Explícito — sem isso, quando não há thumbs (1 imagem só), a principal é a
	   única item do grid e cai na 1ª coluna livre (82px, a das thumbs) em vez da
	   larga. */
	.chb-gallery__main { grid-column: 2; }
}
.chb-gallery__main {
	position: relative;
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: var(--chb-radius-lg, 14px);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(16px, 1rem + 2vw, 40px);
}
.chb-gallery__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.chb-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.chb-gallery__thumb {
	width: 74px; height: 74px; flex: none;
	border: 2px solid var(--chb-line); border-radius: 10px;
	background: var(--chb-paper); padding: 5px; overflow: hidden; cursor: pointer;
	transition: border-color .15s ease;
}
.chb-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.chb-gallery__thumb:hover,
.chb-gallery__thumb.is-active { border-color: var(--chb-primary); }
.chb-gallery__arrow {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
	width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--chb-line);
	background: rgba(255, 255, 255, .9); color: var(--chb-secondary, var(--chb-ink));
	font-size: 20px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.chb-gallery__arrow:hover { background: var(--chb-primary); color: #fff; border-color: var(--chb-primary); }
.chb-gallery__arrow--prev { left: 10px; }
.chb-gallery__arrow--next { right: 10px; }
@media (max-width: 699px) {
	.chb-gallery__thumbs { justify-content: center; }
}
.chb-gallery__note {
	grid-column: 1 / -1;
	margin: 6px 0 0; font-size: 12px; font-style: italic; color: var(--chb-ink-soft); text-align: center;
}

/* Tag categoria (inc/single-product.php) */
.chb-pdp-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.chb-pdp-tag {
	font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px; line-height: 1.4;
}
.chb-pdp-tag--cat { background: rgba(var(--chb-primary-rgb), .1); color: var(--chb-primary); }

/* Botão "Pedir no WhatsApp" (inc/single-product.php) */
.chb-pdp-whatsapp {
	display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
	padding: 11px 18px; border: 1.5px solid var(--chb-wa); border-radius: var(--chb-radius, 8px);
	color: var(--chb-wa-dark); font-weight: 700; font-size: var(--chb-text-sm, 13px);
	text-transform: uppercase; letter-spacing: .03em; text-decoration: none; transition: background .15s ease;
}
.chb-pdp-whatsapp:hover { background: var(--chb-success-soft); }
.chb-pdp-whatsapp svg { flex: none; }

/* Aba Especificações (inc/single-product.php) */
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--chb-line); }
.woocommerce-tabs ul.tabs li a { font-family: var(--chb-font); font-weight: 700; font-size: var(--chb-text-sm, 13px); text-transform: uppercase; color: var(--chb-ink-mute); }
.woocommerce-tabs ul.tabs li.active a { color: var(--chb-secondary, var(--chb-ink)); }
.chb-pdp-specs { display: flex; flex-direction: column; }
.chb-pdp-specs__row {
	display: flex; justify-content: space-between; gap: 16px;
	padding: 9px 0; border-bottom: 1px solid var(--chb-line); font-size: var(--chb-text-sm, 13px);
}
.chb-pdp-specs__row span { color: var(--chb-ink-mute); }
.chb-pdp-specs__row strong { color: var(--chb-secondary, var(--chb-ink)); text-align: right; }

/* Relacionados */
.related.products > h2, .upsells.products > h2 {
	font-family: var(--chb-font-display); font-size: var(--chb-text-2xl, 24px);
	color: var(--chb-secondary, var(--chb-ink)); margin-top: var(--chb-space-5, 48px);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * OVERRIDES DO PROJETO — cole aqui o que for específico deste cliente
 * (retoques de cor, ajustes de seção do plugin tipo .chb-hero / .chb-cta,
 * layout da PDP, etc.). Mantém o starter acima limpo pra receber updates.
 * ═════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────  Página de produto (PDP)  ─────────────────────────
   Layout de referência: base/Standard Product Page.dc.html + INSTRUCOES §7.
   Coluna direita: tags · título · SKU · card de compra (à vista / preço / parcela
   / qtd + orçamento / Pedir no WhatsApp) · 3 selos. Callbacks em
   inc/single-product.php. */

/* Fundo da página cinza (#F2F2F3); galeria, card de compra, selos, abas e
   relacionados ficam em branco (conforme imagem enviada pelo cliente). */
.single-product .chb-woo { background: #F2F2F3; }

.single-product div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr);
	gap: var(--chb-space-4, 32px);
	align-items: start;
}
@media (max-width: 860px) {
	.single-product div.product { grid-template-columns: minmax(0, 1fr); }
}
.single-product div.product .chb-gallery { grid-column: 1; min-width: 0; }
.single-product div.product .summary.entry-summary {
	grid-column: 2;
	/* Explícito — grid items com linha automática podem cair numa linha diferente
	   da esperada dependendo da ordem/posição de outros itens do grid (algoritmo
	   de auto-placement "sparse" do CSS Grid). Fixar evita depender disso. */
	grid-row: 1;
	min-width: 0;
	/* woocommerce-layout.css põe width:48%; float:right (0,0,3,2) — subir. */
	width: auto !important;
	margin: 0 !important;
	float: none !important;
}
.single-product div.product .woocommerce-tabs,
.single-product div.product .related.products,
.single-product div.product .upsells.products { grid-column: 1 / -1; float: none; width: auto; }
@media (max-width: 860px) {
	/* Só existe 1 coluna aqui (regra acima muda o template) — sem resetar o
	   grid-column:2 do summary, ele cria uma coluna implícita fantasma e
	   espreme a galeria a ~0px. Precisa vir DEPOIS das regras acima (mesma
	   especificidade — quem manda é a ordem no arquivo, não o media query).
	   grid-row também reseta pra auto, senão o grid-row:1 do summary faz ele
	   sobrepor a galeria (que também cai na coluna 1 aqui). */
	.single-product div.product .chb-gallery,
	.single-product div.product .summary.entry-summary,
	.single-product div.product .woocommerce-tabs,
	.single-product div.product .related.products,
	.single-product div.product .upsells.products { grid-column: 1; grid-row: auto; }
}

/* Abas em card branco */
.single-product .woocommerce-tabs {
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: var(--chb-radius-lg, 14px);
	padding: clamp(16px, 1rem + 1vw, 28px);
	margin-top: var(--chb-space-4, 32px);
}

/* "Cód. xxx" logo abaixo do título (inc/single-product.php, no lugar do meta). */
.chb-pdp-sku {
	margin: -4px 0 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--chb-ink-mute);
}

/* Card de compra */
.chb-pdp-buy {
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: var(--chb-radius-lg, 14px);
	box-shadow: var(--chb-shadow);
	padding: clamp(18px, 1rem + 1vw, 28px);
	margin-block: var(--chb-space-3, 20px);
}
.chb-pdp-buy__vista {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--chb-ink-mute);
}
/* Preço: só o valor à vista, grande e azul — sem "de/por" nem selo na PDP
   (a comparação de preço vive nos cards de promoção da home).
   woocommerce.css usa .woocommerce div.product p.price (0,0,3,2) — subir. */
.woocommerce div.product .summary .price,
.woocommerce div.product .summary .price ins,
.woocommerce div.product .summary .price .woocommerce-Price-amount {
	color: var(--chb-primary);
}
.woocommerce div.product .summary .price {
	display: block;
	margin: 6px 0 4px;
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	font-size: clamp(30px, 1.5rem + 2vw, 40px);
	line-height: 1.05;
}
/* esconde "de/por" e selo na PDP (a regra do woocommerce.css é (0,0,3,3) —
   precisa de mais especificidade). */
.woocommerce div.product .summary .price del,
.woocommerce div.product .summary .price .screen-reader-text { display: none; }
.woocommerce div.product .summary .price ins { text-decoration: none; background: none; }
.single-product .product > .onsale,
.woocommerce div.product .summary .onsale { display: none; }

/* Linha de parcelamento (inc/product-parcela.php) dentro do card */
.chb-pdp-buy .chb-pdp-parcela,
.single-product .summary .chb-pdp-parcela {
	margin: 0 0 var(--chb-space-3, 18px);
	font-size: var(--chb-text-sm, 14px);
	color: var(--chb-ink-soft, var(--chb-ink-mute));
}

/* Form add-to-cart: quantidade + botão "Comprar" lado a lado */
.single-product form.cart {
	background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
	display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap;
}
.single-product form.cart .quantity {
	display: flex; align-items: center;
	border: 1px solid var(--chb-line); border-radius: 8px; overflow: hidden;
}
.single-product form.cart .quantity input.qty {
	width: 46px; height: 48px; border: 0; text-align: center; font-weight: 600;
	background: var(--chb-paper); -moz-appearance: textfield;
}
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.single-product form.cart .single_add_to_cart_button {
	flex: 1 1 auto; min-width: 160px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--chb-primary); color: #fff;
	border: 0; border-radius: 8px;
	font-family: var(--chb-font); font-weight: 700; font-size: 14px;
	text-transform: uppercase; letter-spacing: .05em; cursor: pointer;
	transition: background .15s ease;
}
.single-product form.cart .single_add_to_cart_button:hover { background: var(--chb-primary-dark, var(--chb-secondary)); }

/* Pedir no WhatsApp: secundário, contorno verde, largura total, abaixo do Comprar */
.chb-pdp-whatsapp {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 48px; margin-top: 12px;
	padding: 0 16px;
	border: 2px solid var(--chb-wa, #1ec773);
	border-radius: 8px;
	background: transparent;
	color: var(--chb-wa-dark, #15a862);
	font-weight: 700; font-size: 14px;
	text-transform: uppercase; letter-spacing: .04em; text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.chb-pdp-whatsapp:hover { background: var(--chb-wa, #1ec773); color: #fff; }
.chb-pdp-whatsapp svg { flex: none; }

/* 3 selos de confiança */
.chb-pdp-trust {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
	margin-top: var(--chb-space-3, 20px);
}
.chb-pdp-trust__item {
	display: flex; flex-direction: column; gap: 8px;
	padding: 14px;
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: 12px;
}
.chb-pdp-trust__item svg { color: var(--chb-primary); }
.chb-pdp-trust__item span {
	font-size: 12px; font-weight: 600; line-height: 1.3;
	color: var(--chb-secondary, var(--chb-ink));
}
@media (max-width: 480px) {
	.chb-pdp-trust { grid-template-columns: 1fr; }
	.chb-pdp-trust__item { flex-direction: row; align-items: center; }
}

/* ── Abas ── */
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--chb-line); padding: 0; margin: 0; }
.woocommerce-tabs ul.tabs::before { display: none; }
.woocommerce-tabs ul.tabs li {
	background: none; border: 0; border-radius: 0; margin: 0; padding: 0;
}
.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce-tabs ul.tabs li a {
	display: block; padding: 14px 22px;
	border-bottom: 3px solid transparent;
	font-family: var(--chb-font); font-weight: 700; font-size: 13px;
	text-transform: uppercase; letter-spacing: .05em; color: var(--chb-ink-mute);
}
.woocommerce-tabs ul.tabs li.active a {
	color: var(--chb-secondary, var(--chb-ink));
	border-bottom-color: var(--chb-accent);
}
.woocommerce-tabs .panel { padding-top: var(--chb-space-3, 20px); }
.woocommerce-tabs .panel > h2:first-child { display: none; } /* WC repete o título da aba */

/* Aba "Características" — lista */
.chb-pdp-caracs {
	margin: 0; padding-left: 18px; max-width: 760px;
	display: flex; flex-direction: column; gap: 8px;
	font-size: var(--chb-text-sm, 14px); line-height: 1.6; color: var(--chb-ink-soft, var(--chb-ink));
}

/* Aba "Especificações Técnicas" — tabela rótulo/valor */
table.chb-pdp-specs { width: 100%; max-width: 680px; border-collapse: collapse; font-size: 13px; }
table.chb-pdp-specs th,
table.chb-pdp-specs td {
	text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--chb-line); vertical-align: top;
}
table.chb-pdp-specs th { font-weight: 400; color: var(--chb-ink-mute); width: 42%; }
table.chb-pdp-specs td { font-weight: 600; color: var(--chb-secondary, var(--chb-ink)); }

/* Aba "Descrição" — texto corrido */
.chb-pdp-descricao { max-width: 760px; font-size: var(--chb-text-sm, 14px); line-height: 1.7; color: var(--chb-ink-soft, var(--chb-ink)); }
.chb-pdp-descricao p { margin: 0 0 1em; }

/* Relacionados: 5 colunas, cards iguais aos da home (o reskin de
   .woocommerce ul.products li.product já cuida do card). */
.related.products ul.products,
.upsells.products ul.products {
	display: grid; gap: var(--chb-space-3, 24px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .related.products ul.products, .upsells.products ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.related.products ul.products li.product,
.upsells.products ul.products li.product { width: auto; max-width: none; margin: 0; float: none; }

/* ─────────────────────────  Página Contato  ─────────────────────────
   Rótulos da lista de contato (Telefone / E-mail / Endereço / …) em azul
   escuro (chb-base deixa em cinza). */
.chb-contact__list strong { color: var(--chb-secondary, var(--chb-ink)); }

/* ─────────────────────────  Cabeçalho  ─────────────────────────
   Design §5: fundo branco sólido, borda inferior 3px amarela, sticky.
   Logo 52px · busca (campo + botão amarelo) · menu azul caixa alta ·
   carrinho azul. O WhatsApp fica só no botão flutuante. */
.chb-header {
	background: var(--chb-paper);
	backdrop-filter: none;
	border-bottom: 3px solid var(--chb-accent);
}
.chb-header__inner { min-height: 82px; }
.chb-header__logo img { max-height: 52px; }

.chb-header__search {
	border: 1px solid var(--chb-line);
	border-radius: 8px;
	overflow: hidden;
	background: var(--chb-paper);
	padding: 0;
	height: 44px;
}
.chb-header__search input[type="search"] {
	border: 0;
	padding: 0 14px;
	flex: 1;
	outline: none;
	font-size: var(--chb-text-sm);
}
.chb-header__search-btn {
	background: var(--chb-accent);
	border: 0;
	color: var(--chb-secondary);
	width: 52px;
	padding: 0;               /* herdava padding:10px 20px de button e comia o ícone */
	flex: none;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: filter .15s ease;
}
.chb-header__search-btn:hover { filter: brightness(.95); }
/* Lupa maior (o partial emite o svg em 16px) */
.chb-header__search-btn svg { width: 24px; height: 24px; flex: none; stroke-width: 2; }
.chb-header__search-toggle svg { width: 22px; height: 22px; }

.chb-header__cart {
	position: relative;
	background: var(--chb-primary);
	color: #fff;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	transition: background .15s ease;
}
.chb-header__cart:hover { background: var(--chb-secondary); color: #fff; }
/* Contador de itens (templates/partials/header.php + fragment em inc/woocommerce.php) */
.chb-header__cart-count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--chb-accent);
	color: var(--chb-secondary, #101a52);
	font-family: var(--chb-font);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	box-shadow: 0 0 0 2px var(--chb-paper);
}
.chb-header__cart-count[data-count="0"] { display: none; }

.chb-nav__list a {
	color: var(--chb-secondary);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: .02em;
	border-bottom: 2px solid transparent;
	border-radius: 0;
}
.chb-nav__list a:hover,
.chb-nav__list a[aria-current],
.chb-nav__list .current-menu-item > a,
.chb-nav__list .current-menu-parent > a {
	color: var(--chb-primary);
	border-bottom-color: var(--chb-accent);
}

/* WhatsApp só no botão flutuante (design não tem no cabeçalho). */
.chb-header__wa { display: none; }

/* ─────────────────────────  Hero  ─────────────────────────
   Design §6.1 original pedia um gradiente azul 120° por cima da foto/vídeo;
   o cliente pediu pra tirar (2026-09-11) — imagem/vídeo aparecem sem tingir.
   Selo "desde 1956" acima do H1 condensado em caixa alta, faixa amarela
   3px topo / 6px base (campo "accent_border" da seção) continuam. */
/* Um pouco mais baixo que o padrão do chb-base (min(78vh,640px)). Alto um
   pouco maior que o valor "puro" pretendido (min(62vh,500px)) porque o
   cliente tirou a frase (subtítulo) do hero — 2026-09-17 — e sem esse texto
   o bloco ficava com menos conteúdo, parecendo menor/mais vazio; a altura
   compensa isso mesmo com só o título (ou nada) dentro. */
.chb-hero {
	min-height: min(68vh, 560px);
	padding-block: var(--chb-space-5, 4rem);
}
/* Hero "compacto" (campo da seção) — páginas internas tipo Sobre. chb-base
   define .chb-hero--compact mas o override de .chb-hero acima ganhava dele. */
.chb-hero--compact {
	min-height: min(42vh, 340px);
	padding-block: var(--chb-space-4, 2.5rem);
}
/* Sem tingimento sobre a imagem/vídeo (chb-base tem um scrim preto de
   fundo — cancelado aqui). Se o texto ficar difícil de ler em cima de uma
   foto muito clara, dá pra reintroduzir uma sombra leve só atrás do texto
   (text-shadow no título) em vez de tingir a imagem inteira de novo. */
.chb-hero__overlay {
	display: none;
}
.chb-hero__seal {
	display: block;
	margin: 0 auto var(--chb-space-3);
	width: clamp(110px, 22vw, 150px);
	height: auto;
	filter: drop-shadow(0 10px 24px rgba(0, 0, 0, .35));
}
.chb-hero__title {
	text-transform: uppercase;
	line-height: 1.06;
	max-width: none;
	font-size: clamp(2rem, 1.3rem + 3.2vw, 3.4rem);   /* design §3: H1 ~52px */
	margin-bottom: var(--chb-space-2);
}
.chb-hero__sub {
	font-weight: 400;
	opacity: .9;
	max-width: min(100%, 780px);
	font-size: var(--chb-text-lg);
}

@media (max-width: 640px) {
	/* ~40% mais baixo que o valor anterior (64vh) — pedido do cliente
	   2026-09-17: no mobile a seção estava alta demais pro pouco conteúdo
	   que sobrou nela (título/subtítulo vazios). Padding também reduzido
	   proporcionalmente, senão ele sozinho já ocupava boa parte da caixa
	   nova, menor. */
	.chb-hero { min-height: 38vh; padding-block: var(--chb-space-3, 1.5rem); }
}

/* ─────────────────────  Grade de categorias  ─────────────────────
   Carrossel de cards com FOTO da categoria + degradê escuro + nome branco
   embaixo (estilo da imagem de referência) — é o .chb-category-card padrão
   do plugin, aqui só ajusto proporção, degradê e tipografia.
   Categoria SEM foto → o template emite .chb-category-card--noimg (quadrado
   azul + inicial) como fallback — CSS mais abaixo. */
.chb-category-card {
	aspect-ratio: 3 / 2;
	border: 0;
	background: var(--chb-secondary);
}
.chb-category-card__overlay {
	background: linear-gradient(to top,
		rgba(16, 26, 82, .92) 0%,
		rgba(16, 26, 82, .45) 45%,
		rgba(16, 26, 82, .10) 100%);
}
.chb-category-card__name {
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: var(--chb-text-lg, 18px);
}
.chb-carousel--category .chb-carousel__dots { margin-top: var(--chb-space-2, 16px); }
/* ─────────────────  Cabeçalho de seção — igual ao da seção Instagram  ─────────
   Design: todos os títulos de seção alinhados à esquerda, condensados, caixa
   alta, ~texto-xl, na cor secundária — o mesmo tratamento do "SIGA-NOS" da
   seção Instagram (.chb-instagram__heading). Substitui o título grande e
   centralizado padrão do chb-base. */
.chb-section-header,
.chb-section-header--split {
	text-align: left;
	margin-bottom: var(--chb-space-3, 24px);
}
.chb-section-header .chb-section__lead,
.chb-section-header--split .chb-section__lead { margin-inline: 0; }
.chb-section__title {
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--chb-text-xl, 20px);
	line-height: 1.1;
	color: var(--chb-secondary, var(--chb-ink));
}

/* Seção mais baixa (sem título, é só a fileira de cards) — mesmo ritmo das
   demais seções da home (Instagram/Promoções/Produtos). */
.chb-category-grid { padding-block: var(--chb-space-4, 2.5rem); }

.chb-category-card--noimg {
	position: static;
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 14px;
	padding: 28px 18px;
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: 14px;
}
.chb-category-card--noimg .chb-category-card__overlay { display: none; }
.chb-category-card--noimg .chb-category-card__media {
	position: static;
	inset: auto;
	width: 60px;
	height: 60px;
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--chb-primary);
	border-radius: 14px;
}
.chb-category-card__initial {
	font-family: var(--chb-font-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	color: var(--chb-accent);
}
.chb-category-card--noimg .chb-category-card__body {
	position: static;
	inset: auto;
	padding: 0;
	align-items: center;
	gap: 8px;
}
.chb-category-card--noimg .chb-category-card__name {
	color: var(--chb-secondary);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--chb-text-lg);
}
.chb-category-card--noimg .chb-category-card__count {
	color: var(--chb-primary);
	font-weight: 600;
	font-size: 12px;
	border-bottom: 2px solid var(--chb-accent);
	padding-bottom: 3px;
}

/* ─────────────────────────  Produtos (shortcode [products])  ──────────────────
   Design §6.4: grade de 5 (3 no tablet, 2 no mobile). #produtos = seção
   shortcode sobre o reskin de .woocommerce ul.products do starter.
   (#promocoes agora é a seção própria chb_promocoes — ver adiante.) */
/* .chb-embed__content vem com overflow-x:auto (pra embeds largos); a grade
   de produtos não deve rolar na horizontal — 1-2px de sobra de arredondamento
   do grid disparavam um scrollbar. */
#produtos .chb-embed__content { overflow: visible; }

/* Seções mais baixas (como Instagram/Promoções) — o padding cheio de seção
   (--chb-section-y ~90px) deixava um respiro grande demais na home. */
#produtos,
#avaliacoes { padding-block: var(--chb-space-4, 2.5rem); }
#produtos .chb-section-header,
#avaliacoes .chb-section-header { margin-bottom: var(--chb-space-2, 16px); }

/* Avaliações do Google — fundo neutro cinza, distinto do branco (Produtos,
   acima) e do azul-claro #EEF0FC (Instagram, abaixo). */
#avaliacoes {
	background: #E8EBEF;
	border-top: 1px solid var(--chb-line);
	border-bottom: 1px solid var(--chb-line);
}

#produtos .woocommerce ul.products {
	display: grid;
	gap: var(--chb-space-3, 24px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 640px) {
	#produtos .woocommerce ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
	#produtos .woocommerce ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
/* O shortcode [products] emite <div class="woocommerce columns-5"> e o
   woocommerce-layout.css tem regra de largura em li.product com
   especificidade maior que o reskin do starter (.columns-5 …). O escopo por
   #id aqui vence (1,0,x,y) e devolve o controle pro grid. */
#produtos .woocommerce ul.products li.product {
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
}
#produtos .woocommerce ul.products li.product a img { width: 100%; }
/* O clearfix ::before/::after que o woocommerce.css põe no ul.products vira
   um ITEM do grid (o starter torna ul.products um grid) — ocupa a 1ª e a
   última célula, o 1º produto ia pra coluna 2 e a linha "quebrava" com uma
   coluna a menos. Vale pra toda grade: loja, categoria, home. */
.woocommerce ul.products::before,
.woocommerce ul.products::after {
	content: none;
	display: none;
}

/* Aviso "nenhum produto" do WooCommerce — some, não polui a home. */
#produtos .woocommerce-info { display: none; }

/* ───────────────  Promoções — seção chb_promocoes (tema)  ───────────────
   themes/standard2026-child/sections/promocoes.php. Tira de cards de produto
   em promoção: 5 visíveis; com mais de 5 o template liga data-chb-carousel
   (autoplay 5s) e mostra setas no topo, na mesma linha do título "PROMOÇÕES"
   (igual à seção Instagram). Reusa o card global
   .woocommerce ul.products li.product via wc_get_template_part(). */
.chb-promocoes {
	background: #EEF0FC;
	border-top: 1px solid var(--chb-line);
	padding-block: var(--chb-space-4, 2.5rem); /* mais baixa, como a seção Instagram */
}
.chb-promocoes__box { position: relative; }
.chb-promocoes__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chb-space-2, 16px);
	margin-bottom: var(--chb-space-2, 16px);
}
.chb-promocoes__head .chb-section__title { margin: 0; }
.chb-promocoes__nav { display: flex; gap: 8px; flex: none; }
.chb-promocoes__empty {
	text-align: center;
	color: var(--chb-ink-mute);
	font-size: var(--chb-text-sm);
	padding: var(--chb-space-2) 0;
}

/* chb-base põe "scroll-snap-type: x mandatory" em .chb-carousel__track; com
   mandatory o Chrome REVERTE o track.scrollTo() do motor de carrossel
   (chb-frontend.js) — setas e autoplay não andam. "proximity" mantém o
   encaixe no swipe/touch sem brigar com o scroll programático. Vale pra
   TODOS os carrosséis (promoções, instagram, categorias, banners). */
.chb-carousel__track { scroll-snap-type: x proximity; }

/* ul.products vira tira flex (o starter deixa ul.products como grid — precisa
   de especificidade acima de .woocommerce ul.products li.product = 0,0,3,2). */
.chb-promocoes .woocommerce ul.products.chb-promocoes__track {
	display: flex;
	grid-template-columns: none;
	gap: var(--chb-space-3, 24px);
	margin: 0;
}
.chb-promocoes .woocommerce ul.products.chb-promocoes__track li.product {
	flex: 0 0 calc((100% - 4 * var(--chb-space-3, 24px)) / 5);
	width: auto;
	max-width: none;
	margin: 0;
	float: none;
	scroll-snap-align: start;
}
.chb-promocoes .woocommerce ul.products.chb-promocoes__track li.product a img { width: 100%; }
@media (max-width: 900px) {
	.chb-promocoes .woocommerce ul.products.chb-promocoes__track li.product {
		flex-basis: calc((100% - 2 * var(--chb-space-3, 24px)) / 3);
	}
}
@media (max-width: 640px) {
	.chb-promocoes .woocommerce ul.products.chb-promocoes__track li.product {
		flex-basis: calc((100% - 1.2 * var(--chb-space-2, 16px)) / 2.2);
	}
	.chb-promocoes__head { flex-wrap: wrap; }
}

/* ─────────────────────  Card de produto — alinhamento (conforme protótipo) ─────
   Todos os cards da linha com a mesma altura; nome com altura reservada;
   preço + parcelas + botão colados na base; botão ocupa a largura toda.
   Vale pra loja/categoria/relacionados/home. */
.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	padding: 18px;
	text-align: left;
	/* height:auto de propósito — um valor fixo aqui desliga o align-items:
	   stretch do grid e os cards da linha voltam a ficar desiguais. */
}
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	/* Coluna flex que ESTICA (flex:1) — o preço+parcela vão pra base da área
	   do link (margin-top:auto no .price) e o botão fica logo abaixo, alinhado
	   em TODOS os cards da linha, mesmo os que têm preço promocional (o <del>
	   riscado deixa o bloco de preço ~1 linha mais alto). Antes o link era
	   display:block e o botão "descia" nos cards em promoção. */
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	position: relative;      /* âncora do selo -X% (fica no canto da imagem) */
}
.woocommerce ul.products li.product a img {
	flex: none;
	object-fit: contain;
	background: var(--chb-paper);
	margin-bottom: 14px;
}
/* Selo -X%: dentro do card, canto sup. direito da imagem. O
   woocommerce.css tem regra mais específica (li.product .onsale) — igualar. */
.woocommerce ul.products li.product span.onsale {
	top: 8px;
	right: 8px;
	left: auto;
	bottom: auto;
	margin: 0;
	position: absolute;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	/* Sempre exatamente 2 linhas — 1-linha ganha o espaço reservado,
	   3+ linhas são cortadas — pra o bloco de preço alinhar em todos. */
	flex: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-height: 1.3;
	height: 2.6em;
	margin-bottom: 6px;
	overflow: hidden;
}
.woocommerce ul.products li.product .price {
	display: block;
	margin-top: auto;           /* empurra preço + parcelas + botão pra base */
	font-size: var(--chb-text-lg, 18px);
	line-height: 1.2;
}
/* "De" riscado na própria linha, acima do preço atual (como no protótipo)
   — inline ele quebra em 2 linhas nos valores maiores e desalinha a linha. */
.woocommerce ul.products li.product .price del {
	display: block;
	margin-bottom: 1px;
	font-size: 11px;
	font-weight: 400;
	color: var(--chb-ink-mute);
}
.woocommerce ul.products li.product .price ins { display: block; }
.chb-loop-parcela {
	display: block;
	margin-top: 3px;
	font-size: 11px;
	color: var(--chb-ink-mute);
}
/* Mesma linha na página do produto (inc/product-parcela.php) */
.chb-pdp-parcela {
	margin: -6px 0 12px;
	font-size: var(--chb-text-sm, 13px);
	color: var(--chb-ink-soft, var(--chb-ink-mute));
}
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .chb-loop-btn {
	display: block;
	width: 100%;
	margin-top: 14px;
	text-align: center;
	padding: 12px 14px;
}

/* ─────────────────  Card de produto — troca de imagem no hover  ─────────────────
   inc/woocommerce.php injeta a 1ª imagem da galeria (.chb-loop-img-hover) dentro
   do <a> do card quando o produto tem galeria. Fica sobreposta à destacada e
   aparece no hover. Sem galeria → nada é injetado e o card se comporta igual. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link {
	overflow: hidden;                       /* recorta a imagem sobreposta no raio */
	border-radius: var(--chb-radius, 10px);
}
.woocommerce ul.products li.product img.chb-loop-img-hover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	aspect-ratio: 1 / 1;
	margin: 0;
	object-fit: contain;
	background: var(--chb-paper);
	opacity: 0;
	transition: opacity .2s ease;
	pointer-events: none;
}
.woocommerce ul.products li.product:hover img.chb-loop-img-hover { opacity: 1; }
@media (hover: none) {
	.woocommerce ul.products li.product img.chb-loop-img-hover { display: none; }
}

/* ═════════════════════════  Seção Instagram (antes do rodapé)  ═════════════════
   themes/standard2026-child/sections/instagram.php. Tira de imagens: 5 visíveis;
   com mais de 5 o template liga data-chb-carousel (autoplay 4s) e as setas
   entram no topo, na mesma linha do título (design). */
/* Fundo próprio — faixa azul-clara da marca (mesmo tom da seção Promoções),
   separa a tira do branco de "Produtos" acima e do rodapé escuro abaixo.
   Altura reduzida: é só uma tira de imagens, não precisa do padding cheio
   de seção (--chb-section-y vai a ~90px). */
.chb-section.chb-instagram {
	background: #EEF0FC;
	border-top: 1px solid var(--chb-line);
	padding-block: var(--chb-space-4, 2.5rem);
}
.chb-instagram__box { position: relative; }

.chb-instagram__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chb-space-2, 16px);
	margin-bottom: var(--chb-space-2, 16px);
}
.chb-instagram__brand {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex-wrap: wrap;
}
.chb-instagram__icon { color: var(--chb-primary); flex: none; }
.chb-instagram__heading {
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--chb-text-xl, 20px);
	color: var(--chb-secondary, var(--chb-ink));
	line-height: 1.1;
}
.chb-instagram__handle {
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	text-transform: lowercase;
	letter-spacing: .02em;
	font-size: var(--chb-text-xl, 20px);
	line-height: 1.1;
	color: var(--chb-primary);
	text-decoration: none;
}
.chb-instagram__handle:hover { text-decoration: underline; }

.chb-instagram__nav { display: flex; gap: 8px; flex: none; }
.chb-instagram__arrow,
.chb-promocoes__arrow {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid var(--chb-line);
	background: var(--chb-paper);
	color: var(--chb-secondary, var(--chb-ink));
	font-size: 20px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chb-instagram__arrow:hover,
.chb-promocoes__arrow:hover {
	background: var(--chb-primary);
	border-color: var(--chb-primary);
	color: #fff;
}

/* Tira de imagens — herda .chb-carousel__track (flex + scroll-snap) de
   chb-base.css. 4 por vez (só neste projeto — padrão do plugin é 5; pedido
   do cliente 2026-09-17 pra imagens maiores); abaixo de 640px, ~2,2 (deixa
   "espiar" o próximo). */
.chb-instagram__track { gap: var(--chb-space-3, 24px); }
.chb-instagram__item {
	flex: 0 0 calc((100% - 3 * var(--chb-space-3, 24px)) / 4);
	scroll-snap-align: start;
	display: block;
	border-radius: var(--chb-radius-lg, 16px);
	overflow: hidden;
	background: var(--chb-paper-alt, var(--chb-line));
}
.chb-instagram__img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}
@media (max-width: 900px) {
	.chb-instagram__item { flex-basis: calc((100% - 2 * var(--chb-space-3, 24px)) / 3); }
}
@media (max-width: 640px) {
	.chb-instagram__item { flex-basis: calc((100% - 1.2 * var(--chb-space-2, 16px)) / 2.2); }
	.chb-instagram__track { gap: var(--chb-space-2, 16px); }
	.chb-instagram__head { flex-wrap: wrap; }
}

/* ═══════════════════  Faixa de informações / cards (chb_infobar)  ═════════════
   sections/infobar.php. Ícone de traço + título + texto por coluna.
   .chb-infobar--azul  → faixa no azul da marca, texto branco (home, antes do rodapé)
   .chb-infobar--cards → cards brancos com borda (ex.: Missão e Visão na Sobre) */
.chb-section.chb-infobar { padding-block: var(--chb-space-3, 24px); }
.chb-section.chb-infobar--azul { background: var(--chb-primary); color: #fff; }
.chb-section.chb-infobar--cards { padding-block: var(--chb-space-4, 2.5rem); }

/* Home no mobile: a faixa de 3 cards (Atendimento/Assistência/Garantia) vai
   pro fim da página — depois do Instagram, antes do rodapé — porque
   categoria/produto são mais importantes que essa informação institucional
   ali em cima, logo abaixo do hero (pedido do cliente 2026-09-17). Sem
   mexer na ordem real das seções (isso mudaria pra desktop também e pro
   HTML que buscador/leitor de tela veem) — só reordena visualmente via
   flex + order, só nessa faixa de largura. .chb-main já é flex item do
   body (sticky footer); virar flex CONTAINER pros próprios filhos aqui não
   conflita com isso — sem "order" definido em mais nada, o resultado é
   idêntico ao empilhamento normal em bloco, exceto pelo item que tem
   order. */
@media (max-width: 768px) {
	/* body.home escopa só a página inicial — a Sobre também usa chb_infobar
	   (Missão e Visão + faixa azul) e não deve ser mexida por este pedido. */
	body.home .chb-main { display: flex; flex-direction: column; }
	body.home .chb-infobar { order: 10; }
}

.chb-infobar__grid {
	display: grid;
	grid-template-columns: repeat(var(--chb-infobar-cols, 3), 1fr);
	gap: var(--chb-space-3, 24px) var(--chb-space-4, 40px);
}
.chb-infobar__item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.chb-infobar__icon {
	flex: none;
	color: var(--chb-accent);
	margin-top: 2px;
}
.chb-infobar__title {
	margin: 0 0 2px;
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: var(--chb-text-base, 16px);
	line-height: 1.2;
}
.chb-infobar--azul .chb-infobar__text {
	margin: 0;
	font-size: var(--chb-text-sm, 13px);
	line-height: 1.4;
	color: rgba(255, 255, 255, .85);
}

/* Variante cards brancos — ícone em cima, depois título e texto (protótipo). */
.chb-infobar--cards .chb-infobar__grid { gap: var(--chb-space-3, 24px); }
.chb-infobar--cards .chb-infobar__item {
	flex-direction: column;
	gap: 12px;
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: 14px;
	padding: clamp(20px, 1rem + 1.5vw, 32px);
}
.chb-infobar--cards .chb-infobar__icon { color: var(--chb-primary); margin: 0; }
.chb-infobar--cards .chb-infobar__title {
	font-size: var(--chb-text-xl, 20px);
	color: var(--chb-secondary, var(--chb-ink));
}
.chb-infobar--cards .chb-infobar__text {
	margin: 0;
	font-size: var(--chb-text-sm, 14px);
	line-height: 1.7;
	color: var(--chb-ink-soft, var(--chb-ink-mute));
}

@media (max-width: 780px) {
	.chb-infobar__grid { grid-template-columns: 1fr; gap: 14px; }
	.chb-infobar--cards .chb-infobar__grid { gap: var(--chb-space-3, 24px); }
}

/* ═══════════════════════  História + linha do tempo + fotos (chb_historia)  ════
   sections/historia.php (página Sobre). Texto à esquerda; à direita, fixos ao
   rolar, o card azul da linha do tempo e o carrossel de fotos. */
.chb-historia { padding-block: var(--chb-space-4, 2.5rem); }
.chb-historia__grid { display: grid; gap: var(--chb-space-4, 40px); }
.chb-historia__aside { display: flex; flex-direction: column; gap: var(--chb-space-3, 24px); }
@media (min-width: 900px) {
	.chb-historia__grid { grid-template-columns: 1.4fr 1fr; align-items: start; }
	.chb-historia__aside { position: sticky; top: 96px; }
}
.chb-historia__text .chb-prose { display: flex; flex-direction: column; gap: var(--chb-space-3, 20px); }
.chb-historia__text .chb-prose p { margin: 0; }

.chb-historia__timeline {
	background: var(--chb-secondary, var(--chb-ink));
	color: #fff;
	border-radius: 14px;
	padding: clamp(20px, 1rem + 1.5vw, 32px);
	display: flex;
	flex-direction: column;
	gap: var(--chb-space-3, 20px);
}
.chb-historia__tl-year {
	display: block;
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--chb-accent);
}
.chb-historia__tl-label {
	display: block;
	margin-top: 4px;
	font-size: var(--chb-text-sm, 13px);
	line-height: 1.5;
	color: rgba(255, 255, 255, .82);
}
.chb-historia__tl-div { height: 1px; background: rgba(255, 255, 255, .15); }

.chb-historia__photos {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	background: var(--chb-secondary, var(--chb-ink));
	border: 1px solid var(--chb-line);
}
.chb-historia__slide { flex: 0 0 100%; scroll-snap-align: start; }
.chb-historia__slide img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}
.chb-historia__photos .chb-carousel__arrow--prev { left: 12px; }
.chb-historia__photos .chb-carousel__arrow--next { right: 12px; }
.chb-historia__photos .chb-carousel__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 12px;
	margin: 0;
}
.chb-historia__photos .chb-carousel__dot { background: rgba(255, 255, 255, .55); }
.chb-historia__photos .chb-carousel__dot.is-active { background: var(--chb-accent); }

/* ═════════════════════════════  Rodapé  ═══════════════════════════════════════
   Design: títulos das colunas em negrito e na cor de destaque (amarelo).
   chb-base deixa .chb-footer h2 pequeno, cinza e com opacity .7. */
.chb-footer h2 {
	color: var(--chb-accent);
	font-weight: 700;
	opacity: 1;
}

/* Colunas: Produtos · Navegação · Atendimento · Localização · Marca (logo +
   selo + redes) — a marca vai por último (footer.php do projeto reordenado).
   chb-base só define as colunas acima de 720px; abaixo disso vira 1 coluna. */
@media (min-width: 720px) {
	.chb-footer__grid--cols-5 { grid-template-columns: repeat(4, 1fr) 1.25fr; }
}
.chb-footer__brand { text-align: left; }
.chb-footer__logo img { margin-inline: 0; }
.chb-footer__seal {
	display: block;
	width: auto;
	max-height: 78px;
	margin: 12px 0 4px;
}
.chb-footer__social { justify-content: flex-start; }

/* ═══════════════════  Loja: barra de categorias + filtros (inc/shop-browse.php)  ═══
   shop / categoria / tag / busca de produto. Barra de categorias colada no
   cabeçalho; grade de produtos à esquerda + sidebar de filtros (sanfona) à
   direita; 40 produtos por página. */

/* ── Barra de categorias (colada na borda amarela do cabeçalho) ── */
.chb-catbar {
	background: var(--chb-paper);
	border-bottom: 1px solid var(--chb-line);
	position: sticky;
	top: 82px; /* altura do cabeçalho — .chb-header__inner min-height */
	z-index: 40;
}
.chb-catbar__inner {
	display: flex;
	align-items: stretch;
	gap: 2px;
	overflow-x: auto;
	scrollbar-width: none;
}
.chb-catbar__inner::-webkit-scrollbar { display: none; }
.chb-catbar__link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: 12px 14px;
	font-family: var(--chb-font);
	font-weight: 700;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--chb-secondary, var(--chb-ink));
	text-decoration: none;
	border-bottom: 3px solid transparent;
	background: none;
	cursor: pointer;
}
.chb-catbar__link:hover { color: var(--chb-primary); }
.chb-catbar__link.is-current {
	color: var(--chb-primary);
	border-bottom-color: var(--chb-accent);
}
.chb-catbar__brands { position: relative; }
.chb-catbar__brands > summary { list-style: none; }
.chb-catbar__brands > summary::-webkit-details-marker { display: none; }
.chb-catbar__brands > summary::after { content: " ▾"; font-size: 9px; }
.chb-catbar__menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 220px;
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: 0 0 10px 10px;
	box-shadow: var(--chb-shadow);
	padding: 6px;
	display: grid;
	gap: 1px;
	max-height: 60vh;
	overflow-y: auto;
	z-index: 5;
}
.chb-catbar__menu a {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	font-size: 13px;
	color: var(--chb-ink);
	text-decoration: none;
	border-radius: 6px;
}
.chb-catbar__menu a:hover { background: var(--chb-paper-alt, #f5f7fa); color: var(--chb-primary); }
.chb-catbar__menu a span { color: var(--chb-ink-mute); }

/* ── Grade 2 colunas: produtos + sidebar ── */
.chb-shop { display: block; }
@media (min-width: 900px) {
	.chb-shop {
		display: grid;
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--chb-space-4, 32px);
		align-items: start;
	}
	.chb-shop__side { order: -1; } /* sidebar de filtros à ESQUERDA */
}
.chb-shop__main { min-width: 0; }

/* A grade em si — 4/linha no desktop (mais estreito por causa da sidebar).
   woocommerce-layout.css + woocommerce-smallscreen.css põem width % / float
   nos li com carga posterior ao main.css nesta rota — precisa de !important. */
.woocommerce .chb-shop__main ul.products {
	display: grid;
	gap: var(--chb-space-3, 20px);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 600px) { .woocommerce .chb-shop__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .woocommerce .chb-shop__main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.woocommerce .chb-shop__main ul.products li.product {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	float: none !important;
}
.woocommerce .chb-shop__main ul.products li.product a img { width: 100%; }

/* ── Sidebar de filtros (sanfona via <details>) ── */
.chb-shop__side { min-width: 0; }
@media (min-width: 900px) {
	.chb-shop__side { position: sticky; top: 130px; }
}
.chb-filters {
	border: 1px solid var(--chb-line);
	border-radius: var(--chb-radius-lg, 14px);
	background: var(--chb-paper);
	overflow: hidden;
}
.chb-filters__title {
	margin: 0;
	padding: 14px 16px;
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 13px;
	color: var(--chb-secondary, var(--chb-ink));
	background: var(--chb-paper-alt, #f5f7fa);
	border-bottom: 1px solid var(--chb-line);
}
.chb-filters__panel { border-bottom: 1px solid var(--chb-line); }
.chb-filters__panel > summary {
	list-style: none;
	cursor: pointer;
	padding: 12px 16px;
	font-weight: 700;
	font-size: 13px;
	color: var(--chb-secondary, var(--chb-ink));
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.chb-filters__panel > summary::-webkit-details-marker { display: none; }
.chb-filters__panel > summary::after {
	content: "+";
	font-size: 16px;
	line-height: 1;
	color: var(--chb-primary);
}
.chb-filters__panel[open] > summary::after { content: "–"; }
.chb-filters__list {
	list-style: none;
	margin: 0;
	padding: 0 16px 14px;
	display: grid;
	gap: 8px;
	max-height: 260px;
	overflow-y: auto;
	font-size: 13px;
}
.chb-filters__list a { color: var(--chb-ink); text-decoration: none; display: flex; justify-content: space-between; gap: 8px; }
.chb-filters__list a:hover,
.chb-filters__list a[aria-current] { color: var(--chb-primary); font-weight: 600; }
.chb-filters__list span { color: var(--chb-ink-mute); }
.chb-filters__list--checks label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.chb-filters__list--checks input { flex: none; accent-color: var(--chb-primary); }
.chb-filters__price {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px 14px;
}
.chb-filters__price input {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid var(--chb-line);
	border-radius: 8px;
	font-size: 13px;
}
.chb-filters__apply {
	display: block;
	width: calc(100% - 32px);
	margin: 14px 16px;
	padding: 11px;
	background: var(--chb-primary);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-weight: 700;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
}
.chb-filters__apply:hover { background: var(--chb-secondary); }
.chb-filters__clear {
	display: block;
	text-align: center;
	margin: -6px 16px 14px;
	font-size: 12px;
	color: var(--chb-ink-mute);
}

/* Mobile: sidebar vira uma sanfona no topo (antes da grade via order) */
@media (max-width: 899px) {
	.chb-shop__side { margin-bottom: var(--chb-space-3, 20px); }
	.chb-catbar { position: static; }
}

/* ═══════════════════  Barra fixa mobile (inc/mobile-bar.php)  ═════════════════
   Sobrescreve o .chb-mobile-bar do chb-base (que faz 2 botões grandes de texto)
   por ícone + rótulo, 5 botões. */
@media (max-width: 768px) {
	body.chb-has-mobile-bar { padding-bottom: 62px; }
	.chb-mobile-bar {
		gap: 0;
		padding: 6px max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
	}
	.chb-mobile-bar__btn {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 3px;
		padding: 4px 2px;
		border: 0;
		border-radius: 8px;
		background: none;
		color: var(--chb-secondary, var(--chb-ink));
		font-size: 10px;
		font-weight: 600;
		text-transform: none;
		letter-spacing: 0;
	}
	.chb-mobile-bar__btn svg { flex: none; }
	.chb-mobile-bar__btn--whatsapp { color: var(--chb-wa-dark, #15a862); }
	.chb-mobile-bar__btn span { line-height: 1; }
}

/* ═══════════════════  Carrinho — modo orçamento (inc/quote.php)  ═══════════════
   Loja sem checkout: some frete/endereço/total do carrinho, e no lugar do
   "Finalizar compra" entra o formulário .chb-quote (Nome + WhatsApp). */
.woocommerce-cart .chb-page,
.woocommerce-cart .entry-content { max-width: 900px; margin-inline: auto; }

.woocommerce-cart table.shop_table {
	border: 1px solid var(--chb-line);
	border-radius: var(--chb-radius-lg, 14px);
	border-collapse: separate;
	overflow: hidden;
	background: var(--chb-paper);
}
.woocommerce-cart table.shop_table thead th {
	background: var(--chb-paper-alt, #f5f7fa);
	font-family: var(--chb-font);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--chb-ink-mute);
	border: 0;
}
.woocommerce-cart table.shop_table td {
	border-top: 1px solid var(--chb-line);
	vertical-align: middle;
}
.woocommerce-cart table.shop_table td.product-name a {
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	color: var(--chb-secondary, var(--chb-ink));
	text-decoration: none;
}
.woocommerce-cart table.shop_table img { border-radius: 8px; }
.woocommerce-cart .product-remove a {
	color: var(--chb-ink-mute) !important;
	font-size: 18px;
}
.woocommerce-cart .product-remove a:hover { color: var(--chb-wa-dark, #c0392b) !important; background: none !important; }
.woocommerce-cart .quantity input.qty {
	border: 1px solid var(--chb-line);
	border-radius: 8px;
	padding: 6px;
}
.woocommerce-cart .actions .button {
	background: var(--chb-secondary, var(--chb-ink)) !important;
	color: #fff !important;
	border-radius: 8px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: .04em;
}

/* Some com o que é de checkout num modo só-orçamento */
.chb-quote-cart .cart-collaterals,
.chb-quote-cart .woocommerce-cart-form .actions .coupon,
.chb-quote-cart .wc-proceed-to-checkout,
.chb-quote-cart .cart_totals,
.chb-quote-cart .woocommerce-shipping-calculator,
.chb-quote-cart .cross-sells { display: none !important; }

/* Formulário de orçamento */
.chb-quote {
	max-width: 900px;
	margin: var(--chb-space-4, 32px) auto 0;
	background: var(--chb-paper);
	border: 1px solid var(--chb-line);
	border-radius: var(--chb-radius-lg, 14px);
	padding: clamp(20px, 1rem + 2vw, 36px);
}
.chb-quote__title {
	margin: 0 0 6px;
	font-family: var(--chb-font-display, var(--chb-font));
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	font-size: var(--chb-text-xl, 22px);
	color: var(--chb-secondary, var(--chb-ink));
}
.chb-quote__lead { margin: 0 0 18px; color: var(--chb-ink-soft, var(--chb-ink-mute)); font-size: var(--chb-text-sm, 14px); }
.chb-quote__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .chb-quote__row { grid-template-columns: 1fr 1fr; } }
.chb-quote__field { display: block; margin-bottom: 14px; }
.chb-quote__field span { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 600; color: var(--chb-secondary, var(--chb-ink)); }
.chb-quote__field input,
.chb-quote__field textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--chb-line);
	border-radius: 8px;
	font: inherit;
	background: var(--chb-paper);
}
.chb-quote__field input:focus,
.chb-quote__field textarea:focus { outline: 2px solid var(--chb-primary); outline-offset: 1px; border-color: var(--chb-primary); }
.chb-quote__btn {
	margin-top: 4px;
	background: var(--chb-primary) !important;
	color: #fff !important;
	border: 0;
	border-radius: 8px;
	padding: 13px 24px !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
}
.chb-quote__btn:hover { background: var(--chb-secondary, var(--chb-ink)) !important; }
.chb-quote__note { margin: 12px 0 0; font-size: 12px; color: var(--chb-ink-mute); }
.chb-quote__ok {
	background: var(--chb-success-soft, #e6f7ec);
	border: 1px solid var(--chb-success, #14803b);
	color: var(--chb-success, #14803b);
	border-radius: 10px;
	padding: 16px 18px;
	font-size: var(--chb-text-sm, 14px);
	line-height: 1.5;
}
.chb-quote__err {
	background: #fde8e8; border: 1px solid #c0392b; color: #c0392b;
	border-radius: 8px; padding: 10px 14px; margin-bottom: 14px; font-size: 13px;
}
.chb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }