/*
Theme Name: Empório CTZ
Theme URI: https://emporioctz.com.br/
Author: Empório CTZ
Author URI: https://emporioctz.com.br/
Description: Tema de blocos da loja Empório CTZ. Só aparência: tokens da marca, cabeçalho, rodapé e as classes utilitárias das telas aprovadas. Regra de negócio mora no plugin ctz-loja.
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: emporio-ctz
Tags: block-theme, e-commerce, full-site-editing, one-column
*/

/* Paleta, fontes, tamanhos e espaços estão no theme.json (viram --wp--preset--*).
   Aqui só o que o theme.json não sabe dizer: line-height por papel, recortes,
   proporção da foto, grades e os dois cabeçalhos do protótipo.
   Ponto de corte: 782px (o mesmo do editor de blocos). */

/* ---------------------------------------------------------------- base */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

:where(a:focus-visible),
:where(button:focus-visible),
:where(input:focus-visible),
:where(select:focus-visible),
:where(summary:focus-visible),
:where([tabindex]:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ambar-borda);
	outline-offset: 2px;
	border-radius: var(--wp--custom--raio--caixa);
}

/* ------------------------------------------------------------ estrutura */

/* 1280px de CONTEÚDO (as pranchetas são 1440 com container de 1280) + 16px de
   respiro lateral que só aparece quando a tela aperta. */
.ctz-container {
	width: 100%;
	max-width: calc(var(--wp--custom--largura--container) + 32px);
	margin-inline: auto;
	padding-inline: 16px;
}

/* Ritmo entre seções da página. */
.ctz-secao {
	margin-top: 32px;
}

@media (min-width: 782px) {
	.ctz-secao {
		margin-top: 64px;
	}
}

/* Os dois cabeçalhos do protótipo vivem no mesmo markup; um sempre some.
   `revert !important` volta ao display do navegador e ignora qualquer
   display que uma classe de componente tenha posto no mesmo elemento. */
.ctz-so-celular {
	display: none !important;
}

@media (max-width: 781.98px) {
	.ctz-so-computador {
		display: none !important;
	}

	.ctz-so-celular {
		display: revert !important;
	}

	.ctz-so-celular.ctz-barra-celular {
		display: flex !important;
	}
}

/* Alvo de toque mínimo (44×44 no protótipo do celular). */
.ctz-toque {
	width: var(--wp--custom--altura--toque);
	height: var(--wp--custom--altura--toque);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ---------------------------------------------------------------- ícones */

.ctz-icone {
	display: inline-flex;
	flex: none;
	line-height: 0;
}

.ctz-icone--ambar {
	color: var(--wp--preset--color--ambar-link);
}

.ctz-icone--ambar-escuro {
	color: var(--wp--preset--color--ambar-claro);
}

/* ---------------------------------------------------------- tipo por papel */

/* As pranchetas dão o corpo E a entrelinha em px (56/60 no computador,
   30/34 no celular). Uma razão só não acerta os dois lados, então a
   entrelinha troca no ponto de corte junto com o corpo. */
.ctz-titulo-banner {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--banner);
	line-height: 34px;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: var(--wp--preset--color--texto);
}

.ctz-titulo-secao {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--titulo-secao);
	line-height: 28px;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--texto);
}

.ctz-titulo-pagina {
	margin: 0;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--titulo-pagina);
	line-height: 32px;
	color: var(--wp--preset--color--texto);
}

.ctz-texto {
	font-size: var(--wp--preset--font-size--texto);
	line-height: 24px;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-pequeno {
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 17px;
	color: var(--wp--preset--color--texto-medio);
}

@media (min-width: 782px) {
	.ctz-titulo-banner {
		line-height: 60px;
	}

	.ctz-titulo-secao {
		line-height: 34px;
	}

	.ctz-titulo-pagina {
		line-height: 42px;
	}

	.ctz-texto {
		line-height: 26px;
	}

	.ctz-pequeno {
		line-height: 18px;
	}
}

.ctz-mono {
	font-family: var(--wp--preset--font-family--mono);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* Cabeçalho de seção: título à esquerda, "Ver todos" + setas à direita. */
.ctz-cabecalho-secao {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}

.ctz-cabecalho-secao__acoes {
	display: flex;
	align-items: center;
	gap: 16px;
}

.ctz-ver-todos {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ambar-link);
}

/* Botão redondo de carrossel (40×40; 44×44 na borda do banner). */
.ctz-seta {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	color: var(--wp--preset--color--texto);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

@media (min-width: 782px) {
	.ctz-cabecalho-secao {
		margin-bottom: 24px;
	}
}

@media (max-width: 781.98px) {
	.ctz-cabecalho-secao .ctz-seta {
		display: none;
	}
}

/* -------------------------------------------------------------- botões */

.ctz-botao {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: var(--wp--custom--altura--botao-celular);
	padding: 0 24px;
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--ambar-sobre);
	border: 1px solid var(--wp--preset--color--ambar-borda);
	border-radius: var(--wp--custom--raio--botao);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

/* No hover o âmbar escurece e o texto CONTINUA escuro: texto claro sobre
   âmbar dá 3,4:1 e é proibido pelo contrato. Este par dá 4,97:1. */
.ctz-botao:hover {
	background: var(--wp--preset--color--ambar-borda);
	color: var(--wp--preset--color--ambar-sobre);
}

.ctz-botao--largo {
	width: 100%;
}

@media (min-width: 782px) {
	.ctz-botao {
		height: var(--wp--custom--altura--botao);
	}
}

/* Pílula: "Mais vendido", filtro aplicado, forma de pagamento. */
.ctz-pilula {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--ambar-suave);
	color: var(--wp--preset--color--ambar-link);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* --------------------------------------------------- card de produto (3:4) */

/* Quem monta a grade de verdade é .ctz-vitrine (seção "vitrines"); estas
   classes servem só ao padrão avulso patterns/card-produto.php. */
.ctz-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	padding: 8px;
}

.ctz-card__midia {
	position: relative;
	aspect-ratio: var(--wp--custom--proporcao--produto);
	border-radius: var(--wp--custom--raio--foto);
	overflow: hidden;
	background: var(--wp--preset--color--superficie);
}

/* Foto de estúdio (fundo branco recortado): não cortar. */
.ctz-card__foto,
.ctz-card__midia img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Foto ambientada: preencher o quadro. */
.ctz-card__midia img.ctz-card__foto--ambiente {
	object-fit: cover;
}

/* Selo de desconto, escuro (nunca âmbar). */
.ctz-card__selo {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--wp--preset--color--escuro);
	color: var(--wp--preset--color--claro);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 9px;
	border-radius: var(--wp--custom--raio--pilula);
}

.ctz-card__nome {
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--card-nome);
	font-weight: 500;
	line-height: 20px;
	color: var(--wp--preset--color--texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 40px;
}

.ctz-card__nome a {
	color: inherit;
}

@media (min-width: 782px) {
	.ctz-card {
		gap: 12px;
		padding: 12px;
	}

	.ctz-card__nome {
		line-height: 21px;
		min-height: 42px;
	}

}

/* Bloco de preços: de → Pix → parcelas. */
.ctz-precos {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-variant-numeric: tabular-nums;
}

.ctz-preco-de {
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 17px;
	color: var(--wp--preset--color--texto-medio);
	text-decoration: line-through;
}

.ctz-preco-pix {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--card-preco);
	font-weight: 700;
	line-height: 22px;
	color: var(--wp--preset--color--texto);
}

.ctz-preco-nota {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-preco-parcela {
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 17px;
	color: var(--wp--preset--color--texto-medio);
}

@media (min-width: 782px) {
	.ctz-preco-pix {
		line-height: 26px;
	}

	.ctz-preco-de,
	.ctz-preco-parcela {
		line-height: 18px;
	}
}

/* Estoque: sempre ícone + palavra, nunca só cor. */
.ctz-estoque {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--wp--preset--color--sucesso);
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
}

/* ---------------------------------------------------- faixa preta do topo */

.ctz-faixa {
	background: var(--wp--preset--color--escuro);
	color: var(--wp--preset--color--claro);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	min-height: 34px;
	padding: 8px 16px;
	text-align: center;
}

@media (min-width: 782px) {
	.ctz-faixa {
		height: var(--wp--custom--altura--faixa);
		min-height: 0;
		padding: 0;
		font-size: 13px;
		line-height: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 28px;
	}
}

.ctz-faixa__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---------------------------------------------------------- cabeçalho */

.ctz-cabecalho {
	background: var(--wp--preset--color--cartao);
}

.ctz-cabecalho__linha {
	height: var(--wp--custom--altura--cabecalho);
	display: flex;
	align-items: center;
	gap: 40px;
}

.ctz-marca {
	display: flex;
	align-items: center;
	gap: 10px;
	flex: none;
	color: var(--wp--preset--color--texto);
}

.ctz-marca figure {
	margin: 0;
	line-height: 0;
}

.ctz-marca img,
.ctz-marca .wp-block-image img {
	height: 52px;
	width: auto;
	display: block;
}

.ctz-marca .wp-block-site-title {
	margin: 0;
}

/* Busca (core/search) com a cara do campo do protótipo. */
.ctz-busca {
	flex: 1;
	margin: 0;
}

.ctz-busca .wp-block-search__inside-wrapper {
	height: var(--wp--custom--altura--campo);
	padding: 0 16px;
	gap: 12px;
	background: var(--wp--preset--color--fundo);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--cartao);
}

.ctz-busca .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 15px;
	line-height: 1;
	color: var(--wp--preset--color--texto);
}

.ctz-busca .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--texto-medio);
	opacity: 1;
}

.ctz-busca .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--texto-medio);
	min-width: 22px;
}

.ctz-busca .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ctz-acoes {
	display: flex;
	align-items: center;
	gap: 28px;
	flex: none;
}

/* Conta (woocommerce/customer-account): ícone + duas linhas. */
.ctz-acoes .wp-block-woocommerce-customer-account {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--texto);
	font-size: 12px;
	line-height: 16px;
}

.ctz-acoes .wp-block-woocommerce-customer-account a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--texto);
	font-weight: 600;
	font-size: 14px;
}

.ctz-acoes .wc-block-customer-account__account-icon svg {
	width: 24px;
	height: 24px;
}

/* Sacola (woocommerce/mini-cart): ícone 26 + contador âmbar. */
.ctz-acoes .wc-block-mini-cart__button {
	position: relative;
	padding: 0;
	background: transparent;
	color: var(--wp--preset--color--texto);
}

.ctz-acoes .wc-block-mini-cart__icon {
	width: 26px;
	height: 26px;
}

.ctz-acoes .wc-block-mini-cart__badge,
.ctz-contador {
	position: absolute;
	top: -6px;
	right: -8px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--ambar-sobre);
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
}

/* Linha do menu. */
.ctz-menu-linha {
	background: var(--wp--preset--color--cartao);
	border-top: 1px solid var(--wp--preset--color--borda-suave);
	border-bottom: 1px solid var(--wp--preset--color--borda);
	height: var(--wp--custom--altura--menu);
}

.ctz-menu {
	height: 100%;
}

.ctz-menu .wp-block-navigation__container {
	height: 100%;
	align-items: stretch;
	gap: 28px;
}

.ctz-menu .wp-block-navigation-item {
	display: flex;
	align-items: center;
	border-bottom: 2px solid transparent;
}

.ctz-menu .wp-block-navigation-item__content {
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--texto-medio);
}

/* Item ativo: âmbar só no sublinhado. */
.ctz-menu .wp-block-navigation-item.current-menu-item,
.ctz-menu .wp-block-navigation-item.current-menu-ancestor,
.ctz-menu .wp-block-navigation-item.is-ativo {
	border-bottom-color: var(--wp--preset--color--ambar);
}

.ctz-menu .current-menu-item > .wp-block-navigation-item__content,
.ctz-menu .current-menu-ancestor > .wp-block-navigation-item__content,
.ctz-menu .is-ativo > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--texto);
	font-weight: 600;
}

/* "Todas as categorias" e "Ofertas": primeiro à esquerda, último à direita. */
.ctz-menu .wp-block-navigation-item:first-child .wp-block-navigation-item__content {
	color: var(--wp--preset--color--texto);
	font-weight: 600;
}

.ctz-menu .wp-block-navigation-item:last-child {
	margin-left: auto;
}

.ctz-menu .wp-block-navigation-item:last-child .wp-block-navigation-item__content {
	color: var(--wp--preset--color--ambar-link);
	font-weight: 600;
}

/* Barra do celular: menu · marca · busca + sacola. */
.ctz-barra-celular {
	background: var(--wp--preset--color--cartao);
	height: var(--wp--custom--altura--cabecalho-celular);
	padding: 0 12px;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--wp--preset--color--borda);
	gap: 0;
}

.ctz-barra-celular .ctz-marca img,
.ctz-barra-celular .ctz-marca .wp-block-image img {
	height: 32px;
	width: 32px;
}

.ctz-barra-celular .ctz-marca {
	gap: 8px;
}

.ctz-barra-celular .wp-block-site-title {
	font-size: 18px;
}

.ctz-barra-celular .wp-block-navigation__responsive-container-open {
	width: var(--wp--custom--altura--toque);
	height: var(--wp--custom--altura--toque);
	justify-content: center;
	color: var(--wp--preset--color--texto);
}

.ctz-barra-celular .ctz-acoes {
	gap: 0;
}

.ctz-barra-celular .wc-block-mini-cart__button,
.ctz-busca-celular .wp-block-search__button {
	width: var(--wp--custom--altura--toque);
	height: var(--wp--custom--altura--toque);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--texto);
}

.ctz-busca-celular .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.ctz-barra-celular .wc-block-mini-cart__icon {
	width: 24px;
	height: 24px;
}

.ctz-barra-celular .wc-block-mini-cart__badge,
.ctz-barra-celular .ctz-contador {
	top: 4px;
	right: 2px;
}

/* Menu em tela cheia do celular: mesmos neutros quentes. */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--fundo);
	color: var(--wp--preset--color--texto);
	padding: 24px 16px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--texto);
}

/* ------------------------------------------------------------- rodapé */

.ctz-rodape {
	background: var(--wp--preset--color--escuro);
	color: var(--wp--preset--color--claro-medio);
	margin-top: 40px;
	padding: 32px 0 24px;
}

.ctz-rodape a {
	color: var(--wp--preset--color--claro-medio);
}

.ctz-rodape a:hover {
	color: var(--wp--preset--color--claro);
}

.ctz-rodape h2,
.ctz-rodape h3,
.ctz-rodape .ctz-rodape__titulo {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 15px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0;
	color: var(--wp--preset--color--claro);
}

.ctz-rodape__marca img {
	width: 120px;
	height: auto;
	display: block;
}

.ctz-rodape__slogan {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 22px;
	color: var(--wp--preset--color--claro);
}

.ctz-rodape__links {
	display: flex;
	flex-direction: column;
	font-size: 14px;
	line-height: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ctz-rodape__links li {
	margin: 0;
}

.ctz-rodape__linha-icone {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	line-height: 28px;
}

.ctz-rodape__pagamentos {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ctz-rodape__pagamento {
	border: 1px solid var(--wp--preset--color--escuro-borda);
	border-radius: var(--wp--custom--raio--selo);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--claro);
	padding: 6px 10px;
}

.ctz-rodape__legal {
	border-top: 1px solid var(--wp--preset--color--escuro-borda);
	margin-top: 24px;
	padding-top: 20px;
	font-size: 12px;
	line-height: 18px;
	color: var(--wp--preset--color--claro-medio);
}

/* Celular: cada coluna vira uma linha separada pela borda, como no protótipo. */
@media (max-width: 781.98px) {
	.ctz-rodape__coluna {
		border-top: 1px solid var(--wp--preset--color--escuro-borda);
		padding-top: 16px;
		margin-top: 16px;
	}

	.ctz-rodape__coluna h2,
	.ctz-rodape__coluna .ctz-rodape__titulo {
		font-family: var(--wp--preset--font-family--texto);
		font-size: 15px;
		font-weight: 600;
		margin-bottom: 8px;
	}
}

@media (min-width: 782px) {
	.ctz-rodape {
		margin-top: 64px;
		padding: 56px 0 28px;
	}

	.ctz-rodape__legal {
		margin-top: 40px;
	}
}

/* --------------------------------------------- botão flutuante do WhatsApp */

.ctz-zap {
	position: fixed;
	right: 16px;
	bottom: 16px;
	width: 52px;
	height: 52px;
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--whatsapp);
	color: var(--wp--preset--color--whatsapp-icone);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--wp--preset--shadow--flutuante);
	z-index: 30;
}

@media (min-width: 782px) {
	.ctz-zap {
		right: 24px;
		bottom: 24px;
		width: 56px;
		height: 56px;
	}
}

/* ------------------------------------------------ WooCommerce: só a pintura */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	background: var(--wp--preset--color--superficie);
	border-top-color: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--texto);
	border-radius: var(--wp--custom--raio--foto);
}

.woocommerce .price,
.woocommerce-Price-amount {
	font-variant-numeric: tabular-nums;
}

/* ================================================================
   TELAS INTERNAS — página, post, busca, 404, carrinho, checkout
   (o que os templates de /templates precisam e o kit ainda não tinha)
   ================================================================ */

/* ------------------------------------------------------- texto corrido */

/* Medida de leitura. O protótipo usa max-width:880px no texto de SEO da
   categoria; institucional e post seguem a mesma medida. */
.ctz-prosa {
	max-width: 880px;
}

.ctz-prosa > * + * {
	margin-top: 20px;
}

.ctz-prosa p,
.ctz-prosa li {
	font-size: var(--wp--preset--font-size--texto);
	line-height: 24px;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-prosa h2 {
	margin: 32px 0 0;
	font-size: var(--wp--preset--font-size--titulo-secao);
}

.ctz-prosa h3 {
	margin: 24px 0 0;
}

.ctz-prosa img {
	border-radius: var(--wp--custom--raio--foto);
}

@media (min-width: 782px) {
	.ctz-prosa p,
	.ctz-prosa li {
		line-height: 26px;
	}
}

.ctz-titulo-pagina.wp-block-post-title,
.ctz-titulo-pagina.wp-block-query-title {
	margin: 0 0 8px;
}

/* Imagem destacada do post. */
.ctz-figura img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: var(--wp--custom--raio--banner);
}

/* Lista de posts (arquivo e busca): uma entrada por linha, separadas. */
.ctz-lista-posts {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.ctz-lista-posts > li {
	margin: 0;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--wp--preset--color--borda-suave);
}

.ctz-lista-posts > li > * + * {
	margin-top: 8px;
}

.ctz-lista-posts .ctz-titulo-secao a {
	color: inherit;
}

.ctz-navegacao-post {
	margin-top: 40px;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--borda);
	gap: 16px;
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
}

/* --------------------------------------------------------- paginação */

/* 40×40, raio 10, branco sobre borda; página atual em escuro (protótipo). */
.ctz-paginacao {
	margin-top: 40px;
	gap: 8px;
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.ctz-paginacao .wp-block-query-pagination-numbers {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 44 no celular (alvo de toque), 40 da prancheta no computador. */
.ctz-paginacao a,
.ctz-paginacao .page-numbers,
.ctz-paginacao .wp-block-query-pagination-previous,
.ctz-paginacao .wp-block-query-pagination-next {
	min-width: var(--wp--custom--altura--toque);
	height: var(--wp--custom--altura--toque);
	padding: 0 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--wp--custom--raio--botao);
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	color: var(--wp--preset--color--texto);
	text-decoration: none;
}

@media (min-width: 782px) {
	.ctz-paginacao a,
	.ctz-paginacao .page-numbers,
	.ctz-paginacao .wp-block-query-pagination-previous,
	.ctz-paginacao .wp-block-query-pagination-next {
		min-width: 40px;
		height: 40px;
	}
}

.ctz-paginacao .page-numbers.current {
	background: var(--wp--preset--color--escuro);
	border-color: var(--wp--preset--color--escuro);
	color: var(--wp--preset--color--claro);
	font-weight: 600;
}

.ctz-paginacao .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--texto-medio);
	padding: 0;
}

/* ------------------------------------------------------- migalhas (Woo) */

/* Um nome só: .ctz-migalha. (Havia .ctz-migalhas em metade dos templates.) */
.ctz-migalha.woocommerce-breadcrumb,
.ctz-migalha .woocommerce-breadcrumb {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 18px;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-migalha a {
	color: var(--wp--preset--color--texto-medio);
}

.ctz-migalha a:hover {
	color: var(--wp--preset--color--texto);
}

/* ------------------------------- contagem + ordenação acima da vitrine */

.ctz-barra-resultados {
	gap: 16px;
	margin: 24px 0;
}

.ctz-barra-resultados .wc-block-product-results-count,
.ctz-barra-resultados .wc-block-catalog-sorting {
	margin: 0;
	font-size: 15px;
	line-height: 20px;
	color: var(--wp--preset--color--texto-medio);
	font-variant-numeric: tabular-nums;
}

.ctz-barra-resultados select,
.wc-block-catalog-sorting select {
	height: 44px;
	padding: 0 14px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--botao);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--interface);
	color: var(--wp--preset--color--texto);
	max-width: 100%;
}

/* ---------------------------- vitrine do Woo: o que falta no card ---------
   A pintura base de .ctz-vitrine (grade, cartão, preço, selo) está na seção
   "vitrines (product-collection)" lá embaixo, compartilhada com a home e a
   categoria. Aqui só os quatro pontos do contrato que ela ainda não cobre —
   e que valem para TODA vitrine, não só para a busca:
     1. a foto é 3:4 (contrato §8.2), não a proporção que vier do arquivo;
     2. foto de estúdio não pode ser cortada (object-fit: contain);
     3. o selo do bloco vem em CAIXA ALTA e o contrato não usa caixa alta;
     4. o nome do produto tem duas linhas e altura mínima (15/21, min-h 42).
   ponytail: é adendo, não cópia. Se alguém mexer no bloco de baixo, conferir
   se estes quatro continuam valendo antes de apagar daqui. */

.ctz-vitrine .wc-block-components-product-image {
	aspect-ratio: var(--wp--custom--proporcao--produto);
}

.ctz-vitrine .wc-block-components-product-image a {
	display: block;
	width: 100%;
	height: 100%;
}

.ctz-vitrine .wc-block-components-product-image img {
	height: 100%;
	object-fit: contain;
}

/* O overlay do selo já tem 12px de padding; quem posiciona é o próprio selo. */
.ctz-vitrine .wc-block-components-product-image__inner-container {
	padding: 0;
}

.ctz-vitrine .wc-block-components-product-sale-badge {
	font-family: var(--wp--preset--font-family--texto);
	text-transform: none;
}

.ctz-vitrine .wp-block-post-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 40px;
}

.ctz-vitrine .wp-block-post-title a {
	color: inherit;
}

@media (min-width: 782px) {
	.ctz-vitrine .wp-block-post-title {
		line-height: 21px;
		min-height: 42px;
	}
}

/* ------------------------------------------- busca e botões em página */

.ctz-busca--pagina {
	max-width: 560px;
	margin: 16px 0 0;
}

.ctz-busca--pagina .wp-block-search__inside-wrapper {
	height: var(--wp--custom--altura--campo);
	padding: 0 16px;
	gap: 12px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--cartao);
}

.ctz-busca--pagina .wp-block-search__input {
	border: 0;
	background: transparent;
	padding: 0;
	font-size: 15px;
	color: var(--wp--preset--color--texto);
}

.ctz-busca--pagina .wp-block-search__button {
	background: transparent;
	border: 0;
	padding: 0;
	min-width: 22px;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-busca--pagina .wp-block-search__button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

.ctz-botoes {
	margin-top: 24px;
	gap: 12px;
}

/* Botão secundário das pranchetas, escrito como estilo "outline" do core. */
.ctz-botao-secundario .wp-block-button__link {
	background: var(--wp--preset--color--cartao);
	color: var(--wp--preset--color--texto-botao-2);
	border: 1px solid var(--wp--preset--color--borda-media);
}

.ctz-botao-secundario .wp-block-button__link:hover {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
}

/* ------------------------------------------------------------ 404 */

.ctz-404__codigo {
	margin: 0 0 8px;
	font-size: var(--wp--preset--font-size--interface);
	color: var(--wp--preset--color--texto-fraco);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ctz-404 .ctz-texto {
	max-width: 560px;
}

.ctz-404__titulo-categorias {
	margin-top: 48px;
}

.ctz-atalhos {
	list-style: none;
	margin: 16px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ctz-atalhos li {
	margin: 0;
}

/* 44 no celular (alvo de toque), 36 da prancheta no computador. */
.ctz-atalhos a {
	display: flex;
	align-items: center;
	height: var(--wp--custom--altura--toque);
	padding: 0 16px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--pilula);
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--texto);
}

@media (min-width: 782px) {
	.ctz-atalhos a {
		height: 36px;
	}
}

/* ------------------------------------------------ cabeçalho do checkout */

/* Sem menu, sem busca, sem sacola: no checkout só marca e sinal de segurança. */
.ctz-cabecalho-checkout {
	border-bottom: 1px solid var(--wp--preset--color--borda);
}

.ctz-cabecalho-checkout__linha {
	height: var(--wp--custom--altura--cabecalho-celular);
	gap: 16px;
}

.ctz-cabecalho-checkout .ctz-marca img,
.ctz-cabecalho-checkout .ctz-marca .wp-block-image img {
	height: 32px;
}

.ctz-cabecalho-checkout .wp-block-site-title {
	font-size: 18px;
}

.ctz-selo-seguro {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--texto-medio);
	flex: none;
}

@media (min-width: 782px) {
	.ctz-cabecalho-checkout__linha {
		height: var(--wp--custom--altura--cabecalho);
	}

	.ctz-cabecalho-checkout .ctz-marca img,
	.ctz-cabecalho-checkout .ctz-marca .wp-block-image img {
		height: 52px;
	}

	.ctz-cabecalho-checkout .wp-block-site-title {
		font-size: 22px;
	}
}

/* No checkout o rodapé perde as colunas de link: só a linha legal fica. */
.woocommerce-checkout .ctz-rodape__colunas {
	display: none;
}

.woocommerce-checkout .ctz-rodape__legal {
	margin-top: 0;
	border-top: 0;
	padding-top: 0;
}

/* ------------------------------------------ carrinho e checkout (blocos) */

/* Cartão da coluna de resumo. */
.ctz-carrinho .wc-block-components-sidebar,
.ctz-checkout .wc-block-components-sidebar {
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	padding: 20px;
}

.ctz-carrinho .wc-block-components-totals-item,
.ctz-checkout .wc-block-components-totals-item,
.ctz-carrinho .wc-block-components-product-price,
.ctz-checkout .wc-block-components-product-price {
	font-variant-numeric: tabular-nums;
}

/* Total final com o peso do preço Pix do protótipo. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 700;
}

/* Títulos dos passos e dos painéis. */
.ctz-carrinho .wc-block-components-title,
.ctz-checkout .wc-block-components-title {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--texto);
}

/* Campos: só a pintura. A altura fica com o Woo por causa do rótulo
   flutuante — mexer nela corta o rótulo quando o campo está preenchido. */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__container,
.wc-block-components-country-input input,
.wc-block-components-state-input input {
	background: var(--wp--preset--color--cartao);
	border-color: var(--wp--preset--color--borda-controle);
	border-radius: var(--wp--custom--raio--campo);
	font-family: var(--wp--preset--font-family--texto);
	color: var(--wp--preset--color--texto);
}

.wc-block-components-text-input input:focus,
.wc-block-components-textarea:focus {
	border-color: var(--wp--preset--color--ambar-borda);
}

/* O foco do Woo é azul de fábrica; azul não é cor desta marca. */
.wc-block-components-button:not(.is-link):focus,
.wc-block-components-text-input input:focus,
.wc-block-components-checkout-place-order-button:focus {
	box-shadow: 0 0 0 2px var(--wp--preset--color--ambar-borda);
	outline: 2px solid transparent;
}

/* Painéis (cupom, métodos de envio, pagamento). */
.wc-block-components-panel,
.wc-block-components-radio-control__option {
	border-radius: var(--wp--custom--raio--foto);
}

.wc-block-components-radio-control__option {
	font-family: var(--wp--preset--font-family--texto);
}

/* Botões grandes: âmbar, texto escuro, altura das pranchetas. */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	min-height: var(--wp--custom--altura--botao);
	border-radius: var(--wp--custom--raio--botao);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
}

/* Miniatura do item no resumo: mesma moldura 3:4 da vitrine. */
.wc-block-components-order-summary-item__image img,
.wc-block-cart-item__image img {
	border-radius: var(--wp--custom--raio--foto);
	background: var(--wp--preset--color--superficie);
}

.wc-block-components-product-name {
	color: var(--wp--preset--color--texto);
	font-weight: 500;
}

/* Aviso informativo do Woo vem azul; aqui vira a superfície quente. */
.wc-block-components-notice-banner.is-info {
	background: var(--wp--preset--color--ambar-suave);
	border-color: var(--wp--preset--color--ambar-borda);
	color: var(--wp--preset--color--texto);
}

.wc-block-components-notice-banner.is-info > svg {
	background-color: var(--wp--preset--color--ambar-borda);
	fill: var(--wp--preset--color--claro);
}

/* Garantias abaixo do checkout e da confirmação. */
.ctz-garantias-checkout {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 24px;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--borda-suave);
}

.ctz-garantia {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 18px;
	color: var(--wp--preset--color--texto-medio);
}

/* ------------------------------------------------ confirmação do pedido */

/* O bloco de status desenha o <h1> dentro do wrapper: o título de página tem
   que ser pedido nele, não na classe do wrapper. */
.ctz-pedido .wc-block-order-confirmation-status {
	margin-bottom: 8px;
}

.ctz-pedido .wc-block-order-confirmation-status h1 {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--titulo-pagina);
	line-height: 32px;
	color: var(--wp--preset--color--texto);
}

@media (min-width: 782px) {
	.ctz-pedido .wc-block-order-confirmation-status h1 {
		line-height: 42px;
	}
}

/* Tabela de totais em 390px: rola dentro da caixa, nunca empurra a página. */
.ctz-pedido .wp-block-woocommerce-order-confirmation-totals-wrapper,
.ctz-pedido .wp-block-woocommerce-order-confirmation-downloads-wrapper {
	overflow-x: auto;
}

.ctz-pedido .wc-block-order-confirmation-summary {
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	padding: 20px;
	font-variant-numeric: tabular-nums;
}

.ctz-pedido__enderecos {
	margin-top: 32px;
	gap: 24px;
}

.ctz-pedido table {
	width: 100%;
	font-size: var(--wp--preset--font-size--interface);
	font-variant-numeric: tabular-nums;
}


/* ================================================================
   CATEGORIA — templates/archive-product.html
   (serve também /categoria/*: o WooCommerce cai para archive-product
   quando não existe taxonomy-product_cat — ProductCategoryTemplate.php.)
   Valores das pranchetas CategoriaVarais.dc.html (1440) e
   CategoriaVaraisCelular.dc.html (390). O cartão, a grade, a migalha, a
   paginação e a ordenação reusam .ctz-vitrine / .ctz-migalha /
   .ctz-paginacao / .wc-block-catalog-sorting já definidos acima; aqui só
   o que é próprio da categoria: malha da página, filtros e subcategorias.
   ================================================================ */

/* Sem isto uma fileira larga (subcategorias, grade) estica o corpo e o
   celular rola de lado. O sangramento das subcategorias depende disto. */
html,
body {
	overflow-x: hidden;
}

/* ------------------------------------------------- cabeçalho da categoria */

.ctz-categoria {
	margin-top: 16px;
}

.ctz-categoria .ctz-titulo-pagina {
	margin: 8px 0 6px;
}

/* Fileira de subcategorias (woocommerce/product-categories). No celular
   sangra até a borda e rola na horizontal; alvo de toque de 44px. */
.ctz-subcategorias {
	margin: 16px -16px 0;
	padding: 0 16px;
	overflow-x: auto;
	scrollbar-width: none;
}

.ctz-subcategorias::-webkit-scrollbar {
	display: none;
}

.ctz-subcategorias ul {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctz-subcategorias li {
	margin: 0;
	flex: none;
}

.ctz-subcategorias li a {
	display: flex;
	align-items: center;
	height: var(--wp--custom--altura--toque);
	padding: 0 16px;
	white-space: nowrap;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--pilula);
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--texto);
}

@media (min-width: 782px) {
	.ctz-categoria {
		margin-top: 24px;
	}

	.ctz-categoria .ctz-titulo-pagina {
		margin: 12px 0 8px;
	}

	.ctz-subcategorias {
		margin: 20px 0 0;
		padding: 0;
		overflow-x: visible;
	}

	.ctz-subcategorias ul {
		flex-wrap: wrap;
	}

	.ctz-subcategorias li a {
		height: 36px;
	}
}

/* ---------------------------------------- malha filtros + barra + grade

   Uma marcação só para os dois tamanhos.
   Celular: [Filtrar][Ordenar] / contagem / grade.
   Computador: filtros (256) à esquerda + contagem/ordenar + grade.
   O corte é 601px porque é onde o WooCommerce troca a gaveta de filtros
   pela coluna fixa; refazer isso em 782 exigiria desfazer ~20 declarações
   da folha do Woo, que quebram a cada atualização. A grade só abre a
   terceira coluna em 782 (a coluna de filtros come 296px do container). */

.ctz-cat {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas:
		"filtros ordenar"
		"contagem contagem"
		"grade grade";
	column-gap: 8px;
	margin-top: 16px;
}

.ctz-cat__filtros {
	grid-area: filtros;
}

.ctz-cat__contagem {
	grid-area: contagem;
	margin-top: 12px;
}

.ctz-cat__ordenar {
	grid-area: ordenar;
}

.ctz-cat__grade {
	grid-area: grade;
	margin-top: 16px;
	margin-bottom: 0;
}

@media (min-width: 601px) {
	.ctz-cat {
		grid-template-columns: 256px minmax(0, 1fr) auto;
		grid-template-areas:
			"filtros contagem ordenar"
			"filtros grade    grade";
		column-gap: 40px;
		align-items: start;
		margin-top: 32px;
	}

	.ctz-cat__contagem {
		margin-top: 0;
		align-self: center;
	}

	.ctz-cat__ordenar {
		align-self: center;
	}

	.ctz-cat__grade {
		margin-top: 24px;
	}
}

/* Contagem: o número sai do woocommerce/product-results-count, isto é, da
   consulta de verdade — nunca de um texto escrito à mão. */
.ctz-cat__contagem .woocommerce-result-count {
	margin: 0;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 18px;
	color: var(--wp--preset--color--texto-medio);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 782px) {
	.ctz-cat__contagem .woocommerce-result-count {
		font-size: 15px;
		line-height: 20px;
	}
}

/* No celular o seletor de ordem ocupa a metade inteira da linha. */
.ctz-cat__ordenar .woocommerce-ordering,
.ctz-cat__ordenar select.orderby {
	width: 100%;
	margin: 0;
}

@media (max-width: 600px) {
	.ctz-cat__ordenar select.orderby {
		font-weight: 600;
		color: var(--wp--preset--color--texto-botao-2);
		text-align: center;
	}
}

/* -------------------------------------------- coluna / gaveta de filtros */

/* Até 600 o WooCommerce mostra só o botão que abre a gaveta: ele vira o
   botão secundário "Filtrar" da prancheta do celular. */
.ctz-cat__filtros.wc-block-product-filters {
	display: block;
}

/* O rótulo é do WooCommerce ("Filtrar produtos", mais longo que o "Filtrar"
   da prancheta): 14px + nowrap + ícone de 20 para caber nos 175px que sobram
   da metade da linha em 390. Trocar a palavra exigiria PHP. */
.ctz-cat__filtros .wc-block-product-filters__open-overlay {
	width: 100%;
	height: var(--wp--custom--altura--toque);
	justify-content: center;
	gap: 6px;
	padding: 0 8px;
	background: var(--wp--preset--color--cartao);
	color: var(--wp--preset--color--texto-botao-2);
	border: 1px solid var(--wp--preset--color--borda-media);
	border-radius: var(--wp--custom--raio--botao);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}

.ctz-cat__filtros .wc-block-product-filters__open-overlay span {
	padding: 0;
}

.ctz-cat__filtros .wc-block-product-filters__open-overlay svg {
	width: 20px;
	height: 20px;
	flex: none;
}

.ctz-cat__filtros .wc-block-product-filters__overlay-dialog {
	background: var(--wp--preset--color--fundo);
}

.ctz-cat__filtros .wc-block-product-filters__close-overlay {
	min-width: var(--wp--custom--altura--toque);
	min-height: var(--wp--custom--altura--toque);
	justify-content: center;
	color: var(--wp--preset--color--texto);
	cursor: pointer;
}

.ctz-cat__filtros .wc-block-product-filters__apply {
	height: var(--wp--custom--altura--botao-celular);
	background: var(--wp--preset--color--ambar);
	color: var(--wp--preset--color--ambar-sobre);
	border: 1px solid var(--wp--preset--color--ambar-borda);
	border-radius: var(--wp--custom--raio--botao);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	cursor: pointer;
}

.ctz-filtros__titulo {
	margin: 0 0 4px;
	font-size: var(--wp--preset--font-size--subtitulo);
	line-height: 24px;
}

/* Cada filtro é um bloco do Woo: título + lista, separados por borda. */
.ctz-cat__filtros .wp-block-woocommerce-product-filter-taxonomy,
.ctz-cat__filtros .wp-block-woocommerce-product-filter-attribute,
.ctz-cat__filtros .wp-block-woocommerce-product-filter-price,
.ctz-cat__filtros .wp-block-woocommerce-product-filter-status {
	border-bottom: 1px solid var(--wp--preset--color--borda-suave);
	padding: 20px 0;
}

.ctz-cat__filtros h3 {
	margin: 0 0 12px;
	font-family: var(--wp--preset--font-family--texto);
	font-size: 15px;
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto);
}

.ctz-cat__filtros .wc-block-product-filter-checkbox-list__items {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ctz-cat__filtros .wc-block-product-filter-checkbox-list__label {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--wp--custom--altura--toque);
	font-size: var(--wp--preset--font-size--interface);
	line-height: 20px;
	color: var(--wp--preset--color--texto);
	cursor: pointer;
}

.ctz-cat__filtros .wc-block-product-filter-checkbox-list__input {
	width: 18px;
	height: 18px;
	flex: none;
	accent-color: var(--wp--preset--color--ambar);
	border: 1.5px solid var(--wp--preset--color--borda-controle);
	border-radius: var(--wp--custom--raio--caixa);
}

.ctz-cat__filtros .wc-block-product-filter-checkbox-list__count {
	color: var(--wp--preset--color--texto-medio);
}

.ctz-cat__filtros .wc-block-product-filter-checkbox-list__color-swatch {
	width: 24px;
	height: 24px;
	flex: none;
	border-radius: var(--wp--custom--raio--pilula);
	border: 1px solid var(--wp--preset--color--borda);
}

/* Faixa de preço: os dois campos R$ mín / R$ máx da prancheta. */
.ctz-cat__filtros .wc-block-product-filter-price-slider__content--inline {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

.ctz-cat__filtros .wc-block-product-filter-price-slider input[type="text"],
.ctz-cat__filtros .wc-block-product-filter-price-slider input[type="number"] {
	width: 100%;
	height: var(--wp--custom--altura--toque);
	padding: 0 12px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-controle);
	border-radius: var(--wp--custom--raio--campo);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--interface);
	line-height: 1;
	color: var(--wp--preset--color--texto);
}

/* Chips do que está filtrado + "Limpar filtros". */
.ctz-cat__filtros .wc-block-product-filter-removable-chips__item {
	background: var(--wp--preset--color--ambar-suave);
	color: var(--wp--preset--color--ambar-link);
	border-radius: var(--wp--custom--raio--pilula);
	font-size: 12px;
	font-weight: 600;
}

.ctz-cat__filtros .wp-block-woocommerce-product-filter-clear-button a,
.ctz-cat__filtros .wp-block-woocommerce-product-filter-clear-button button {
	display: inline-flex;
	align-items: center;
	min-height: var(--wp--custom--altura--toque);
	padding: 0;
	background: transparent;
	border: 0;
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
	line-height: 20px;
	color: var(--wp--preset--color--ambar-link);
	cursor: pointer;
}

@media (min-width: 601px) {
	/* Na coluna fixa a linha do filtro volta aos 32px da prancheta. */
	.ctz-cat__filtros .wc-block-product-filter-checkbox-list__label {
		min-height: 32px;
	}
}

/* ------------------------------------------------ grade só de 3 colunas */

/* A coluna de filtros tira 296px do container, então aqui a grade para em 3
   (a da home vai a 4). Quem decide a terceira coluna é a LARGURA DA GRADE,
   não a da janela: em 782px de janela sobram 454px ao lado dos filtros e
   três cartões dariam 135px cada — menos que no celular. Por isso é
   @container e não @media: 800px de grade = 3 cartões de 250 para cima.

   O !important é herdado: a .ctz-vitrine da home já marca as colunas assim
   para vencer a folha do product-template do Woo, e regra marcada só perde
   para outra marcada. Se aquele !important cair, este cai junto. */
.ctz-cat__grade {
	container-type: inline-size;
}

.ctz-cat__grade.ctz-vitrine .wc-block-product-template {
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
}

@container (min-width: 800px) {
	.ctz-cat__grade.ctz-vitrine .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}
}

/* ------------------------------------------------------------ paginação */

/* .ctz-paginacao já dá a forma; no celular o alvo sobe para 44px. */
.ctz-cat__grade .ctz-paginacao {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 24px;
}

@media (max-width: 781.98px) {
	.ctz-cat__grade .ctz-paginacao {
		gap: 6px;
	}

	.ctz-cat__grade .ctz-paginacao .wp-block-query-pagination-numbers {
		gap: 6px;
	}

	.ctz-cat__grade .ctz-paginacao a,
	.ctz-cat__grade .ctz-paginacao .page-numbers,
	.ctz-cat__grade .ctz-paginacao .wp-block-query-pagination-previous,
	.ctz-cat__grade .ctz-paginacao .wp-block-query-pagination-next {
		min-width: var(--wp--custom--altura--toque);
		height: var(--wp--custom--altura--toque);
		padding: 0 10px;
	}
}

@media (min-width: 782px) {
	.ctz-cat__grade .ctz-paginacao {
		margin-top: 40px;
	}
}

/* Vazio: quem diz que não há produto é a consulta, não um texto fixo. */
.ctz-cat__grade .wp-block-woocommerce-product-collection-no-results {
	padding: 32px 0;
	color: var(--wp--preset--color--texto-medio);
}

/* ==================================================================== home
   Seções da página inicial: templates/front-page.html e os padrões
   patterns/banner-home.php e patterns/veja-em-uso.php.
   Só o que as pranchetas Main.dc.html (1440) e HomeCelular.dc.html (390)
   pedem e o contrato acima não cobre. Mesmo ponto de corte: 782px. */

/* O <main> empilha as seções em flex, não em fluxo: a prancheta do celular
   abre pelos atalhos de categoria e a do computador pelo banner, e `order`
   resolve os dois com uma marcação só (regra 4 do contrato). */
.ctz-home {
	display: flex;
	flex-direction: column;
}

@media (min-width: 782px) {
	/* Banner a 32 do menu, como na prancheta; as outras seções seguem 64. */
	.ctz-home > .ctz-secao:first-child {
		margin-top: 32px;
	}
}

@media (max-width: 781.98px) {
	.ctz-home .ctz-categorias {
		order: -1;
		margin-top: 16px;
	}

	.ctz-home .ctz-banner-secao {
		margin-top: 16px;
	}
}

/* -------------------------------------------------- cabeçalho de seção (+) */

/* Variante com subtítulo: o "Ver todos" encosta no topo, junto do título. */
.ctz-cabecalho-secao--topo {
	align-items: flex-start;
}

/* Seta do "Ver todos" sem SVG no markup — assim o link continua sendo um
   parágrafo editável pelo painel. Não é token de marca, é o desenho da seta. */
.ctz-home {
	--ctz-seta-direita: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
}

.ctz-ver-todos--seta::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--ctz-seta-direita) center / 16px 16px no-repeat;
	mask: var(--ctz-seta-direita) center / 16px 16px no-repeat;
}

/* Alvo de toque do "Ver todos" no celular (44 na prancheta). */
@media (max-width: 781.98px) {
	.ctz-ver-todos {
		min-width: 104px;
		min-height: var(--wp--custom--altura--toque);
		justify-content: flex-end;
	}
}

/* ------------------------------------------------------------- fileiras */

/* Rola na horizontal no celular (sangrando os 16px do container) e vira
   grade no computador. Serve os atalhos, os benefícios e o "Veja em uso".
   A lista de categorias é markup do WooCommerce: mesmas regras, outro seletor. */
.ctz-fileira,
.ctz-categorias .wp-block-woocommerce-product-categories {
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
}

.ctz-fileira::-webkit-scrollbar,
.ctz-categorias .wp-block-woocommerce-product-categories::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.ctz-fileira__trilho,
.ctz-categorias .wc-block-product-categories-list {
	display: flex;
	gap: 12px;
	/* max-content: sem isso o trilho para nos 100% da tela e nada rola. */
	width: max-content;
	min-width: 100%;
	margin: 0;
	padding: 0 16px;
	list-style: none;
}

.ctz-fileira__trilho > *,
.ctz-categorias .wc-block-product-categories-list-item {
	flex: none;
	scroll-snap-align: start;
	margin: 0;
}

@media (min-width: 782px) {
	.ctz-fileira,
	.ctz-categorias .wp-block-woocommerce-product-categories {
		overflow-x: visible;
	}

	.ctz-fileira__trilho,
	.ctz-categorias .wc-block-product-categories-list {
		display: grid;
		width: 100%;
		/* o min-width: 100% do celular ganha do max-width se ficar de pé */
		min-width: 0;
		max-width: calc(var(--wp--custom--largura--container) + 32px);
		margin-inline: auto;
		gap: 24px;
	}
}

/* ------------------------------------------- atalhos de categoria (Woo) */

/* Bloco nativo "Lista de categorias de produtos" pintado como as bolachas da
   prancheta. Só o primeiro nível: as subcategorias aninhadas ficam ocultas. */
.ctz-categorias .wc-block-product-categories-list-item > ul {
	display: none;
}

.ctz-categorias .wc-block-product-categories-list-item {
	width: 72px;
}

.ctz-categorias .wc-block-product-categories-list-item > a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--texto);
}

.ctz-categorias .wc-block-product-categories-list-item__image {
	/* O <a> do Woo é flex em coluna: sem `flex: none` a bolacha encolhe a
	   altura até zero e sobra só o nome da categoria. */
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: var(--wp--custom--raio--pilula);
	background: var(--wp--preset--color--superficie);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.ctz-categorias .wc-block-product-categories-list-item__image img {
	width: 54px;
	height: 54px;
	object-fit: cover;
	display: block;
}

.ctz-categorias .wc-block-product-categories-list-item__name {
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 600;
	line-height: 16px;
	text-align: center;
}

@media (min-width: 782px) {
	.ctz-categorias .wc-block-product-categories-list {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}

	.ctz-categorias .wc-block-product-categories-list-item {
		width: auto;
	}

	.ctz-categorias .wc-block-product-categories-list-item__image {
		width: 128px;
		height: 128px;
	}

	.ctz-categorias .wc-block-product-categories-list-item__image img {
		width: 96px;
		height: 96px;
	}

	.ctz-categorias .wc-block-product-categories-list-item__name {
		font-size: var(--wp--preset--font-size--interface);
		line-height: 20px;
	}
}

/* ---------------------------------------------------------- benefícios */

/* No celular cada vantagem é um cartão que rola; no computador os quatro
   viram células de um cartão só, como na prancheta. */
.ctz-beneficio {
	width: 240px;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	padding: 16px;
}

.ctz-beneficio__texto {
	display: flex;
	flex-direction: column;
}

.ctz-beneficio__titulo {
	font-size: var(--wp--preset--font-size--card-nome);
	font-weight: 600;
	line-height: 20px;
	color: var(--wp--preset--color--texto);
}

@media (min-width: 782px) {
	.ctz-beneficios .ctz-fileira__trilho {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		/* aqui o trilho É o cartão: fica dentro dos 16px de respiro, não por cima */
		width: calc(100% - 32px);
		max-width: var(--wp--custom--largura--container);
		background: var(--wp--preset--color--cartao);
		border: 1px solid var(--wp--preset--color--borda-suave);
		border-radius: var(--wp--custom--raio--cartao);
		padding: 20px 24px;
	}

	.ctz-beneficio {
		width: auto;
		background: none;
		border: 0;
		padding: 0;
	}
}

/* ----------------------------------------------------------- veja em uso */

.ctz-emuso__item {
	width: 150px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--wp--preset--color--texto);
}

.ctz-emuso__midia {
	position: relative;
	display: block;
	aspect-ratio: 9 / 16;
	background: var(--wp--preset--color--escuro);
	border-radius: var(--wp--custom--raio--cartao);
	overflow: hidden;
}

.ctz-emuso__midia img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--wp--preset--color--cartao);
	display: block;
}

.ctz-emuso__play {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 56px;
	height: 56px;
	border-radius: var(--wp--custom--raio--pilula);
	/* Véu sobre foto: escuro a 72%, o mesmo da prancheta. */
	background: color-mix(in srgb, var(--wp--preset--color--escuro) 72%, transparent);
	color: var(--wp--preset--color--claro);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ctz-emuso__nome {
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 500;
	line-height: 20px;
	color: var(--wp--preset--color--texto);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ctz-emuso__preco {
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--texto);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 782px) {
	.ctz-emuso .ctz-fileira__trilho {
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: 20px;
	}

	.ctz-emuso__item {
		width: auto;
		gap: 10px;
	}
}

/* -------------------------------------------------------------- marcas */

.ctz-marcas__grade {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}

.ctz-marcas__item {
	height: 56px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--texto-medio);
	text-align: center;
	padding: 0 8px;
}

@media (min-width: 782px) {
	.ctz-marcas__grade {
		grid-template-columns: repeat(8, minmax(0, 1fr));
		gap: 16px;
	}

	.ctz-marcas__item {
		height: 72px;
		font-size: 17px;
	}
}

/* ------------------------------------------------------- texto de rodapé */

.ctz-seo {
	border-top: 1px solid var(--wp--preset--color--borda);
	padding-top: 32px;
}

.ctz-seo p {
	max-width: 880px;
}

@media (min-width: 782px) {
	.ctz-seo {
		padding-top: 40px;
	}
}

/* --------------------------------------------------------------- banner */

/* Duas colunas do core: quebram exatamente nos 782 e o dono troca foto,
   título, texto e link pelo painel. No computador a foto vai pra direita
   (row-reverse) sem inverter a ordem no celular, onde ela entra em cima. */
.ctz-banner {
	border-radius: var(--wp--custom--raio--banner);
	overflow: hidden;
	background: var(--wp--preset--color--superficie);
}

.ctz-banner__foto {
	display: flex;
	height: 270px;
	background: var(--wp--preset--color--cartao);
}

.ctz-banner__foto figure,
.ctz-banner__foto .wp-block-image {
	margin: 0;
	flex: 1;
	min-width: 0;
}

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

.ctz-banner__conteudo {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
	padding: 20px;
}

.ctz-banner__texto {
	margin: 0;
	font-size: var(--wp--preset--font-size--subtitulo);
	line-height: 24px;
	color: var(--wp--preset--color--texto-medio);
}

/* Mesma altura do .ctz-botao do contrato (48 no celular, 52 no computador);
   o padding do botão do core daria 51. */
.ctz-banner__conteudo .wp-block-buttons {
	align-self: flex-start;
}

.ctz-banner__conteudo .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: fit-content;
	height: var(--wp--custom--altura--botao-celular);
	padding: 0 24px;
}

@media (max-width: 781.98px) {
	/* Botão de largura cheia, como na prancheta do celular. */
	.ctz-banner__conteudo .wp-block-buttons {
		align-self: stretch;
	}

	.ctz-banner__conteudo .wp-block-button,
	.ctz-banner__conteudo .wp-block-button__link {
		width: 100%;
	}
}

@media (min-width: 782px) {
	.ctz-banner {
		flex-direction: row-reverse;
		min-height: 480px;
	}

	.ctz-banner__foto {
		height: auto;
	}

	.ctz-banner__conteudo {
		gap: 24px;
		padding: 64px;
	}

	.ctz-banner__conteudo .wp-block-button__link {
		height: var(--wp--custom--altura--botao);
	}

	.ctz-banner__texto {
		line-height: 28px;
	}
}

/* ------------------------------------------- vitrines (product-collection)
   Base compartilhada pela home, pela categoria e pela busca: o bloco nativo
   do WooCommerce vestido de card do contrato (3:4, selo escuro, preço Pix).
   Os adendos que só valem para a vitrine da busca/categoria estão lá em cima.

   O !important é proposital: a folha do product-template do Woo pinta a grade
   com duas classes (`.wc-block-product-template.is-flex-container`), empate de
   especificidade com a daqui, e ela é impressa no RODAPÉ — depois desta. Sem
   marcar, o desempate por ordem de carga entrega a grade para o Woo. */

/* Os dois jeitos de marcar: .ctz-vitrine na seção (home) ou na própria
   coleção (categoria e busca). O Woo põe 30px embaixo do bloco; aqui não. */
.ctz-vitrine .wp-block-woocommerce-product-collection,
.ctz-vitrine.wp-block-woocommerce-product-collection {
	margin-bottom: 0;
}

/* 2 → 3 → 4 colunas. Esta é a ÚNICA grade de produto do tema. */
.ctz-vitrine .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	gap: 12px !important;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ctz-vitrine .wc-block-product-template > li {
	width: auto !important;
	/* :not(:last-child) do layout "list" do Woo tem 3 classes; a classe do
	   próprio cartão entra no seletor só para vencer essa margem. */
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	padding: 8px;
}

.ctz-vitrine .wc-block-product-template > li.wc-block-product {
	margin: 0;
}

.ctz-vitrine .wc-block-product-template > li > * {
	margin-block: 0;
}

/* Moldura da foto: fundo de superfície, canto de foto, nada vaza. */
.ctz-vitrine .wc-block-components-product-image {
	position: relative;
	border-radius: var(--wp--custom--raio--foto);
	overflow: hidden;
	background: var(--wp--preset--color--superficie);
	margin: 0;
}

.ctz-vitrine .wc-block-components-product-image img {
	width: 100%;
	display: block;
}

/* Selo de desconto: escuro, nunca âmbar. Três classes porque a folha do Woo
   posiciona o selo com duas (`…product-image .…--align-left`). */
.ctz-vitrine .wc-block-components-product-image .wc-block-components-product-sale-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	right: auto;
	background: var(--wp--preset--color--escuro);
	color: var(--wp--preset--color--claro);
	border: 0;
	border-radius: var(--wp--custom--raio--pilula);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 9px;
}

/* Preço: <del> é o "de", <ins> é o de venda. */
.ctz-vitrine .wc-block-components-product-price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-family: var(--wp--preset--font-family--titulo);
	font-size: var(--wp--preset--font-size--card-preco);
	font-weight: 700;
	line-height: 22px;
	color: var(--wp--preset--color--texto);
	font-variant-numeric: tabular-nums;
}

.ctz-vitrine .wc-block-components-product-price ins {
	text-decoration: none;
	background: transparent;
	color: inherit;
}

.ctz-vitrine .wc-block-components-product-price del,
.ctz-vitrine .wc-block-components-product-price del .wc-block-components-product-price__value {
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--pequeno);
	font-weight: 400;
	line-height: 17px;
	color: var(--wp--preset--color--texto-medio);
	text-decoration: line-through;
	opacity: 1;
}

/* Sem resultado: nada de grade vazia. */
.ctz-vitrine .wp-block-woocommerce-product-collection-no-results {
	padding: 24px 0;
	color: var(--wp--preset--color--texto-medio);
}

@media (min-width: 560px) {
	.ctz-vitrine .wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 16px !important;
	}
}

@media (min-width: 782px) {
	.ctz-vitrine .wc-block-product-template {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		gap: 24px !important;
	}

	.ctz-vitrine .wc-block-product-template > li {
		gap: 12px;
		padding: 12px;
	}

	.ctz-vitrine .wc-block-components-product-price {
		line-height: 26px;
	}

	.ctz-vitrine .wc-block-components-product-price del,
	.ctz-vitrine .wc-block-components-product-price del .wc-block-components-product-price__value {
		line-height: 18px;
	}
}

/* ================================================================
   PÁGINA DO PRODUTO — templates/single-product.html
   Medido nas pranchetas ProdutoVaralMiami(.Celular).dc.html.
   Uma marcação só; o corte continua sendo 782px.
   Vitrine, migalha, "Veja em uso", fileira, prosa, garantia e botões já
   existem acima — aqui só o que é da tela do produto.
   ================================================================ */

.ctz-produto__cabeca {
	margin-top: 12px;
	gap: 16px;
}

@media (min-width: 782px) {
	.ctz-produto__cabeca {
		margin-top: 24px;
		gap: 48px;
		align-items: flex-start;
	}

	/* A prancheta dá 720 + 48 + 512 dentro dos 1280. Em proporção, e não em
	   px fixos, porque entre 782 e 1280 um flex-basis de 720px come a coluna
	   de compra inteira (medido: 100px de largura a 900). 56,25% de 1280 dá
	   os mesmos 720 no tamanho da prancheta. */
	.wp-block-column.ctz-produto__coluna-galeria {
		flex: 0 1 56.25%;
	}
}

/* ------------------------------------------ galeria (clássica do Woo) */

/* GALERIA CLÁSSICA (flexslider), não o bloco novo `woocommerce/product-gallery`.
   O bloco novo quebrava a hidratação do JS (`Cannot destructure property
   'imageData'`) e, com ela, o "Adicionar ao carrinho" ficava `hidden` em toda
   página de produto com foto — o cliente não chegava ao carrinho. O template
   padrão do próprio Woo 11.1 também usa a galeria clássica. (18/09) */
.ctz-produto__coluna-galeria .woocommerce-product-gallery {
	float: none !important;
	width: 100% !important;
	position: relative;
	margin: 0;
}

.ctz-produto__coluna-galeria .flex-viewport,
.ctz-produto__coluna-galeria .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image:only-child {
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--banner);
	overflow: hidden;
}

.ctz-produto__coluna-galeria .woocommerce-product-gallery__image {
	aspect-ratio: var(--wp--custom--proporcao--produto);
	background: var(--wp--preset--color--cartao);
}

.ctz-produto__coluna-galeria .woocommerce-product-gallery__image a {
	display: block;
	width: 100%;
	height: 100%;
}

/* contain, nunca cover: ~760 produtos ainda têm foto 1:1 do Olist, e cover numa
   moldura 3:4 corta 25% da largura. Foto branca em moldura branca: a faixa some. */
.ctz-produto__coluna-galeria .woocommerce-product-gallery__image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}

.ctz-produto__coluna-galeria .flex-control-thumbs {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
	gap: var(--wp--preset--spacing--20);
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
	list-style: none;
}

.ctz-produto__coluna-galeria .flex-control-thumbs li {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
}

.ctz-produto__coluna-galeria .flex-control-thumbs img {
	width: 100%;
	aspect-ratio: var(--wp--custom--proporcao--produto);
	object-fit: contain;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--botao);
	opacity: .55;
	cursor: pointer;
	transition: opacity .15s;
}

/* Miniatura ativa: moldura escura (âmbar é só do botão e do menu). */
.ctz-produto__coluna-galeria .flex-control-thumbs img.flex-active,
.ctz-produto__coluna-galeria .flex-control-thumbs img:hover {
	opacity: 1;
	border: 2px solid var(--wp--preset--color--escuro);
}

.ctz-produto__coluna-galeria .woocommerce-product-gallery__trigger {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 5;
}

/* O selo do bloco vem no canto a 4px e em caixa alta; a prancheta manda 8px. */
.ctz-produto__coluna-galeria .onsale {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 5;
	background: var(--wp--preset--color--escuro);
	color: var(--wp--preset--color--claro);
	border-radius: var(--wp--custom--raio--pilula);
	font-family: var(--wp--preset--font-family--texto);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	padding: 6px 9px;
	min-height: 0;
	min-width: 0;
}

/* No celular a foto sangra até a borda da tela, como na prancheta de 390. */
@media (max-width: 781.98px) {
	.ctz-produto__coluna-galeria {
		margin-inline: -16px;
	}

	.ctz-produto__coluna-galeria .flex-viewport {
		border-inline: 0;
		border-radius: 0;
	}

	.ctz-produto__coluna-galeria .flex-control-thumbs {
		padding-inline: 16px;
	}
}

/* --------------------------------------------------- coluna de compra */

.ctz-produto__compra {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ctz-produto__marca a {
	font-size: var(--wp--preset--font-size--interface);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--ambar-link);
}

.ctz-produto__sku {
	font-weight: 400;
}

@media (min-width: 782px) {
	.ctz-produto__compra {
		gap: 20px;
	}
}

/* ------------------------------------------------------- caixa de preço */

/* O conteúdo é do woocommerce/product-price. Pix, parcelas e "Ver parcelas"
   entram por filtro no plugin ctz-loja (woocommerce_get_price_html) — sem o
   plugin a caixa mostra o preço normal do Woo, que é degradação limpa. */
.ctz-preco-caixa {
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--banner);
	padding: 20px;
	font-size: var(--wp--preset--font-size--pequeno);
	line-height: 18px;
	color: var(--wp--preset--color--texto-medio);
	font-variant-numeric: tabular-nums;
}

.ctz-preco-caixa .wc-block-components-product-price,
.ctz-preco-caixa .wp-block-woocommerce-product-price {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ctz-preco-caixa del,
.ctz-preco-caixa del .wc-block-components-product-price__value {
	font-size: var(--wp--preset--font-size--interface);
	line-height: 20px;
	color: var(--wp--preset--color--texto-medio);
	text-decoration: line-through;
	opacity: 1;
}

.ctz-preco-caixa ins,
.ctz-preco-caixa ins .wc-block-components-product-price__value,
.ctz-preco-caixa > .wp-block-woocommerce-product-price > .woocommerce-Price-amount {
	font-family: var(--wp--preset--font-family--titulo);
	font-weight: 800;
	/* 36px no computador; no celular a prancheta pede 30 e o token para em 26. */
	font-size: var(--wp--preset--font-size--titulo-pagina);
	line-height: 34px;
	color: var(--wp--preset--color--texto);
	text-decoration: none;
	background: transparent;
}

/* Linhas que o plugin acrescenta dentro do preço. */
.ctz-preco-caixa .ctz-preco-cartao {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--wp--preset--color--borda-suave);
	font-size: var(--wp--preset--font-size--texto);
	line-height: 22px;
	color: var(--wp--preset--color--texto);
}

@media (min-width: 782px) {
	.ctz-preco-caixa {
		padding: 24px;
		font-size: var(--wp--preset--font-size--interface);
		line-height: 20px;
	}

	.ctz-preco-caixa ins,
	.ctz-preco-caixa ins .wc-block-components-product-price__value,
	.ctz-preco-caixa > .wp-block-woocommerce-product-price > .woocommerce-Price-amount {
		line-height: 40px;
	}
}

/* ------------------------------------------------------------ estoque */

/* O bloco do Woo escreve só a palavra; o contrato manda ícone + palavra. */
.ctz-estoque.wp-block-woocommerce-product-stock-indicator::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sem estoque não é sucesso: perde o verde, mantém ícone + palavra. */
.ctz-estoque.wc-block-components-product-stock-indicator--out-of-stock,
.ctz-estoque.wc-block-components-product-stock-indicator--available-on-backorder {
	color: var(--wp--preset--color--texto-medio);
}

/* ------------------------------------------ variação, quantidade e botões */

.ctz-produto__acoes {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ctz-variacao {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ctz-variacao .wp-block-woocommerce-add-to-cart-with-options-variation-selector-attribute-name {
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 20px;
	color: var(--wp--preset--color--texto);
}

.ctz-variacao .wc-block-product-filter-chips__items {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.ctz-variacao .wc-block-product-filter-chips__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--wp--custom--altura--campo);
	padding: 0 16px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--botao);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 500;
	line-height: 1;
	color: var(--wp--preset--color--texto);
	cursor: pointer;
}

.ctz-variacao .wc-block-product-filter-chips__item[aria-checked="true"],
.ctz-variacao .wc-block-product-filter-chips__item.is-selected {
	border: 2px solid var(--wp--preset--color--escuro);
	font-weight: 600;
}

/* Combinação indisponível: traço, não só cor. */
.ctz-variacao .wc-block-product-filter-chips__item[aria-disabled="true"] {
	border-style: dashed;
	color: var(--wp--preset--color--texto-fraco);
}

.ctz-produto__linha-compra {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

/* Contador: − valor + numa caixa só, como na prancheta. */
.ctz-produto__acoes .wc-block-components-quantity-selector {
	display: flex;
	align-items: center;
	flex: none;
	width: 116px;
	height: var(--wp--custom--altura--campo);
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--botao);
	overflow: hidden;
}

.ctz-produto__acoes .wc-block-components-quantity-selector__button {
	width: var(--wp--custom--altura--toque);
	height: 100%;
	flex: none;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--texto);
	cursor: pointer;
}

.ctz-produto__acoes .wc-block-components-quantity-selector__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0;
	background: transparent;
	border: 0;
	text-align: center;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 1;
	color: var(--wp--preset--color--texto);
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

.ctz-produto__acoes .wc-block-components-quantity-selector__input::-webkit-outer-spin-button,
.ctz-produto__acoes .wc-block-components-quantity-selector__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* "Adicionar ao carrinho" (woocommerce/product-button) é o botão secundário. */
.ctz-produto__ao-carrinho .wc-block-components-product-button__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: var(--wp--custom--altura--botao-celular);
	padding: 0 24px;
	background: var(--wp--preset--color--cartao);
	color: var(--wp--preset--color--texto-botao-2);
	border: 1px solid var(--wp--preset--color--borda-media);
	border-radius: var(--wp--custom--raio--botao);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 1;
}

.ctz-produto__ao-carrinho .wc-block-components-product-button__button:hover {
	background: var(--wp--preset--color--superficie);
	color: var(--wp--preset--color--texto);
}

@media (max-width: 781.98px) {
	/* Celular: contador sozinho na linha, botões ocupando a largura. */
	.ctz-produto__linha-compra {
		flex-direction: column;
		align-items: stretch;
	}
}

@media (min-width: 782px) {
	.ctz-produto__acoes .wc-block-components-quantity-selector,
	.ctz-produto__ao-carrinho .wc-block-components-product-button__button {
		height: var(--wp--custom--altura--botao);
	}

	.ctz-produto__linha-compra > .ctz-botao {
		flex: 1;
	}
}

/* --------------------------------------------------------------- frete */

.ctz-produto__frete {
	border-top: 1px solid var(--wp--preset--color--borda-suave);
	padding-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Sem o bloco de cálculo (plugin fora do ar) some a seção inteira: rótulo
   órfão é pior que seção ausente. */
.ctz-produto__frete:not(:has(input)) {
	display: none;
}

.ctz-produto__rotulo {
	margin: 0;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 20px;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto);
}

.ctz-produto__frete input[type="text"],
.ctz-produto__frete input[type="tel"] {
	flex: 1;
	min-width: 0;
	height: var(--wp--custom--altura--campo);
	padding: 0 14px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--campo);
	font-family: var(--wp--preset--font-family--texto);
	/* 16px: abaixo disso o iOS dá zoom ao focar o campo. */
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--texto);
}

.ctz-produto__frete input::placeholder {
	color: var(--wp--preset--color--texto-fraco);
	opacity: 1;
}

.ctz-produto__frete-nota {
	align-items: flex-start;
	font-size: var(--wp--preset--font-size--interface);
	line-height: 20px;
}

/* ------------------------------------------------------------ garantias */

.ctz-produto__garantias {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 782px) {
	.ctz-produto__garantias {
		flex-direction: row;
		gap: 20px;
	}

	.ctz-produto__garantias > .ctz-garantia {
		flex: 1;
	}
}

/* ------------------------------------------- descrição + ficha técnica */

.ctz-produto__texto {
	gap: 32px;
}

.ctz-produto__descricao .ctz-prosa {
	margin-top: 0;
	max-width: 70ch;
}

@media (min-width: 782px) {
	.ctz-produto__texto {
		gap: 48px;
		align-items: flex-start;
	}

	/* 440 dentro dos 1280 da prancheta, em proporção pelo mesmo motivo da
	   galeria: em px fixos a ficha ficava maior que a descrição a 900. */
	.wp-block-column.ctz-produto__ficha {
		flex: 0 1 34.375%;
	}
}

/* Ficha técnica: woocommerce/product-specifications zebrado. */
.ctz-ficha table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--cartao);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--interface);
	line-height: 20px;
}

.ctz-ficha .wp-block-product-specifications-item {
	background: var(--wp--preset--color--cartao);
}

.ctz-ficha .wp-block-product-specifications-item:nth-child(even) {
	background: var(--wp--preset--color--superficie);
}

.ctz-ficha .wp-block-product-specifications-item__label,
.ctz-ficha .wp-block-product-specifications-item__value {
	height: 44px;
	padding: 0 14px;
	border: 0;
	vertical-align: middle;
}

.ctz-ficha .wp-block-product-specifications-item__label {
	text-align: left;
	font-weight: 400;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-ficha .wp-block-product-specifications-item__value {
	text-align: right;
	font-weight: 600;
	color: var(--wp--preset--color--texto);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 782px) {
	.ctz-ficha .wp-block-product-specifications-item__label,
	.ctz-ficha .wp-block-product-specifications-item__value {
		padding: 0 16px;
	}
}

/* ---------------------------------------------------------- vídeo 16:9 */

/* Produto sem vídeo (ou plugin fora): some a seção com o título junto. */
.ctz-produto__video:not(:has(video, iframe)) {
	display: none;
}

.ctz-produto__player {
	position: relative;
	width: 100%;
	max-width: 840px;
	aspect-ratio: 16 / 9;
	border-radius: var(--wp--custom--raio--banner);
	overflow: hidden;
	background: var(--wp--preset--color--escuro);
}

.ctz-produto__player video,
.ctz-produto__player iframe,
.ctz-produto__player img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 0;
}

/* O play desenhado por cima da capa reusa a peça do "Veja em uso". */
.ctz-produto__player .ctz-emuso__play {
	width: 72px;
	height: 72px;
}

/* -------------------------------------------------------- avaliações */

/* A loja tem zero avaliações: quem fala na caixa vazia é o próprio
   formulário do Woo ("Seja o primeiro a avaliar…"). */
.ctz-produto__avaliacoes .wp-block-woocommerce-product-reviews {
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda-suave);
	border-radius: var(--wp--custom--raio--banner);
	padding: 20px;
}

.ctz-produto__avaliacoes .comment-reply-title {
	margin: 0 0 8px;
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 22px;
	letter-spacing: 0;
	color: var(--wp--preset--color--texto);
}

.ctz-produto__avaliacoes .comment-notes {
	margin: 0 0 12px;
	font-size: var(--wp--preset--font-size--texto);
	line-height: 24px;
	color: var(--wp--preset--color--texto-medio);
}

.ctz-produto__avaliacoes input[type="text"],
.ctz-produto__avaliacoes input[type="email"],
.ctz-produto__avaliacoes textarea {
	width: 100%;
	padding: 12px 14px;
	background: var(--wp--preset--color--cartao);
	border: 1px solid var(--wp--preset--color--borda);
	border-radius: var(--wp--custom--raio--campo);
	font-family: var(--wp--preset--font-family--texto);
	font-size: 16px;
	color: var(--wp--preset--color--texto);
}

.ctz-produto__avaliacoes input[type="submit"] {
	height: var(--wp--custom--altura--botao-celular);
	padding: 0 24px;
	background: var(--wp--preset--color--cartao);
	color: var(--wp--preset--color--texto-botao-2);
	border: 1px solid var(--wp--preset--color--borda-media);
	border-radius: var(--wp--custom--raio--botao);
	font-family: var(--wp--preset--font-family--texto);
	font-size: var(--wp--preset--font-size--texto);
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.ctz-avaliacao + .ctz-avaliacao {
	border-top: 1px solid var(--wp--preset--color--borda-suave);
	padding-top: 16px;
	margin-top: 16px;
}

.ctz-avaliacao__meta {
	gap: 8px;
	font-size: var(--wp--preset--font-size--pequeno);
	color: var(--wp--preset--color--texto-medio);
}

@media (min-width: 782px) {
	.ctz-produto__avaliacoes .wp-block-woocommerce-product-reviews {
		padding: 32px;
	}

	.ctz-produto__avaliacoes input[type="submit"] {
		height: var(--wp--custom--altura--botao);
	}
}